:root{--paper:#eaded4;--paper-light:#f2e6d8;--ink:#482b36;--wine:#74374d;--rose:#b87887;--line:#bda59e;--muted:#715c60;--body:'BIZ UDPGothic',sans-serif;--heading:'Murecho',sans-serif;--card-alpha:.92;--rule-over:14px;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:100px}body{margin:0;color:var(--ink);background:var(--paper);font-family:var(--body);overflow-x:hidden}a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer}button:disabled{cursor:default}button,a,summary{-webkit-tap-highlight-color:transparent}button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--wine);outline-offset:5px}h1,h2,h3,p{margin:0}button{border:0}svg{display:block}::selection{background:#d9b7bc}.skip{position:fixed;left:18px;top:-80px;z-index:100;background:var(--paper-light);padding:16px}.skip:focus{top:10px}.art-defs{position:absolute;width:0;height:0;overflow:hidden}.mobile-only{display:none}
.header{position:fixed;inset:0 0 auto;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 4vw;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s}.header.scrolled{border-color:var(--line)}.brand{display:flex;align-items:center;gap:8px;flex-shrink:0}.brand svg{width:43px;height:43px}.brand small{display:block;font:600 10px var(--heading);letter-spacing:.05em}.brand strong{display:block;font:800 22px var(--heading)}.brand b{color:#95465d}.header nav{display:flex;gap:24px;font:600 14px var(--heading)}.header nav a{min-height:44px;display:flex;align-items:center;border-bottom:2px solid transparent}.header nav a[aria-current=page]{border-color:var(--wine)}.header nav a:hover{color:var(--wine)}.menu-toggle{display:none}
.journey{height:180svh;position:relative}.street-viewport{position:sticky;top:0;height:100svh;overflow:hidden}#world{position:absolute;inset:0;width:100%;height:100%;display:block}.welcome{position:absolute;top:18svh;left:50%;transform:translateX(-50%);width:min(700px,90%);text-align:center}.eyebrow{font:600 14px/1.7 var(--heading);letter-spacing:.04em;color:var(--wine);margin-bottom:16px}h1{font:700 clamp(45px,4.6vw,68px)/1.25 var(--heading);letter-spacing:-.045em}h1 span{display:block}h1 span:last-child{color:var(--wine)}.intro{font-size:16px;line-height:1.8;margin-top:20px}.welcome-actions{display:flex;gap:25px;justify-content:center;align-items:center;margin-top:25px}.paper-button{position:relative;display:inline-flex;align-items:center;justify-content:space-between;gap:25px;min-height:56px;padding:14px 23px;background:var(--wine);color:var(--paper-light);font:600 17px/1.5 var(--heading);border-radius:2px;box-shadow:0 3px 0 #482b36;transition:transform .15s,box-shadow .15s}.paper-button:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 5px 0 #482b36}.paper-button:active:not(:disabled){transform:translateY(2px);box-shadow:0 1px 0 #482b36}.paper-button:disabled{background:#bdaba8;box-shadow:none;color:#fff7ee}.simple-link{display:inline-flex;align-items:center;justify-content:space-between;gap:15px;font:600 15px/1.7 var(--heading);min-height:44px;position:relative}.simple-link::after{content:'';position:absolute;left:-.4em;right:-.4em;bottom:0;border-bottom:1px solid currentColor}.simple-link:hover{color:var(--wine)}
.section{width:min(1190px,calc(100% - 96px));margin-inline:auto;scroll-margin-top:100px}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:44px;margin-bottom:36px}.section-heading h2{font:700 44px/1.3 var(--heading);letter-spacing:-.025em}.section-heading>p{font-size:16px;line-height:1.9;max-width:27em;padding-bottom:5px}.workshop{padding-top:72px;padding-bottom:115px}.packing-lab{position:relative;padding:30px 34px 22px;background:var(--paper-light);box-shadow:0 2px 0 #d0baad,0 10px 0 -3px #ddcfc1,0 12px 0 -3px #c4aa9c}.manifest{display:flex;align-items:center;gap:28px;border-bottom:1px solid var(--line);padding-bottom:20px}.manifest h3{font:600 20px var(--heading)}.manifest ul{display:flex;gap:36px;list-style:none;margin:0;padding:0;flex:1}.manifest li{display:flex;align-items:center;gap:18px;font-size:16px}.manifest li b{font:600 21px var(--heading);white-space:nowrap}.manifest li.complete b{color:var(--wine)}.manifest li.complete b::after{content:' ✓';font-size:17px}.game-status{min-height:42px;padding-top:17px;font-size:14px;line-height:1.7;color:var(--muted)}.bench{position:relative;min-height:310px;display:grid;grid-template-columns:1.1fr 1fr;gap:45px;isolation:isolate}#bench-canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}.stock{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:15px 0}.stock button{position:relative;display:flex;align-items:center;justify-content:flex-end;flex-direction:column;background:transparent;border:1px solid #c8b5ab;border-radius:3px;min-height:120px;padding:8px 5px}.stock button svg{width:72px;height:76px}.stock button span{font:500 14px var(--heading);margin-top:auto}.stock button i{display:none;position:absolute;inset:25px 0 auto;font:500 34px var(--heading);color:var(--wine);font-style:normal}.stock button.packed i{display:block}.stock button.packed{border-style:dashed}.stock button.packed svg{visibility:hidden}.stock button:disabled{color:var(--muted)}.stock button:not(:disabled):hover{border-color:var(--wine);box-shadow:inset 0 0 0 1px var(--wine)}.stock button.wrong{outline:3px solid var(--wine);outline-offset:-3px}.parcel{position:relative;min-height:290px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:20px}.parcel p{font-size:14px;line-height:1.6}.parcel b{font:600 20px var(--heading);margin-left:12px}.box-fallback{position:absolute;left:25%;right:25%;top:30%;height:100px;background:#c7a38b;border:12px solid #ddc1a4;transform:skewY(-5deg);box-shadow:15px 16px 0 #ac8c77}.rendered .stock svg,.rendered .box-fallback{visibility:hidden}.packing-controls{border-top:1px solid var(--line);padding-top:25px;display:flex;align-items:center;justify-content:space-between;gap:25px}.steps{display:flex;list-style:none;padding:0;margin:0;font:500 14px var(--heading);color:var(--muted);gap:22px}.steps li{position:relative;padding-block:8px}.steps li+li::before{content:'›';position:absolute;left:-15px}.steps li[aria-current=step]{color:var(--wine);font-weight:700;border-bottom:2px solid var(--wine)}.packing-actions{display:flex;align-items:center;gap:22px}.quiet-button{background:none;min-height:44px;padding:8px 4px;text-decoration:underline;text-underline-offset:5px;font-size:14px}.quiet-button:disabled{opacity:.4}.reset{display:block;margin-top:15px}.completion{display:flex;align-items:center;justify-content:space-between;gap:32px;padding-block:30px 5px}.completion[hidden]{display:none}.completion h3{font:600 24px/1.6 var(--heading);margin-bottom:8px}.completion p{font-size:14px;line-height:1.8}
.questions{padding-block:90px 120px;border-top:1px solid var(--line)}.questions .section-heading{align-items:center}.questions h2{font-size:40px}.faq-list{max-width:920px;margin-left:auto}.faq-list details{overflow-anchor:none}.faq-list details+details{border-top:1px solid var(--line)}.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:24px;list-style:none;font:600 21px/1.6 var(--heading);padding:26px 2px;cursor:pointer}.faq-list summary::-webkit-details-marker{display:none}.faq-list summary::after{content:'＋';font-size:25px;font-weight:500;flex-shrink:0;color:var(--wine)}.faq-list details[open] summary::after{content:'−'}.faq-list summary:hover{color:var(--wine)}.faq-list details>div{padding:0 38px 25px 2px;font-size:16px;line-height:1.9}.faq-list p+p{margin-top:6px}.faq-list .simple-link{margin-top:12px;font-size:14px}.contact{display:grid;grid-template-columns:1.15fr 1fr;gap:70px;padding-block:80px 100px;border-top:1px solid var(--line)}.contact h2{font:600 33px/1.6 var(--heading);letter-spacing:-.03em;margin-bottom:25px}.contact-copy>p:last-child{font-size:16px;line-height:1.9}.contact-address{font-style:normal;border-left:1px solid var(--line);padding-left:45px}.contact-address h3{font:600 23px var(--heading);margin-bottom:15px}.phone{display:flex;align-items:center;justify-content:space-between;gap:18px;font:600 34px/1.8 var(--heading);border-bottom:1px solid var(--line)}.phone span,.email span{font-size:20px}.email{display:flex;align-items:center;justify-content:space-between;font:500 20px/1.8 var(--heading);padding-block:14px;border-bottom:1px solid var(--line);margin-bottom:24px}.contact-address p{font-size:15px;line-height:1.9}.visit-note{margin-top:20px;color:var(--muted)}footer{display:flex;justify-content:space-between;align-items:center;width:min(1190px,calc(100% - 96px));margin:auto;padding-block:30px 45px;border-top:1px solid var(--line);font-size:13px}.no-street .journey{height:100svh}.no-street #world{display:none}
@media(max-width:1000px){.header nav{gap:14px;font-size:12px}.brand strong{font-size:19px}.section{width:calc(100% - 64px)}.section-heading h2{font-size:36px}.manifest ul{gap:22px}.manifest li{gap:10px}.packing-lab{padding:25px}.packing-controls{align-items:flex-start}.steps{gap:17px}.packing-actions{gap:12px}.contact{gap:30px}.contact-address{padding-left:30px}.phone{font-size:28px}}
@media(max-width:700px){html{scroll-padding-top:84px}.mobile-only{display:block}.header{padding:12px 16px;gap:10px}.brand svg{width:36px;height:36px}.brand small{font-size:8px}.brand strong{font-size:17px}.menu-toggle{display:flex;gap:6px;align-items:center;justify-content:center;min-height:44px;background:none;padding:8px 0;font:600 12px var(--heading)}.menu-toggle span{font-size:19px}.header nav{display:none;position:absolute;top:68px;left:16px;right:16px;padding:12px 24px;background:var(--paper-light);box-shadow:0 7px 12px #69473629;font-size:17px}.header nav.open{display:flex;flex-direction:column;gap:0}.header nav a{min-height:56px;border-bottom:1px solid var(--line)}.header nav a:last-child{border-bottom:0}.journey{height:170svh}.welcome{top:16svh;width:calc(100% - 32px)}.welcome .eyebrow{font-size:11px;margin-bottom:15px}h1{font-size:38px;line-height:1.32}.intro{font-size:14px;margin-top:18px}.welcome-actions{flex-direction:column;gap:11px;margin-top:20px}.paper-button{font-size:16px;padding:12px 19px;min-height:52px}.welcome .simple-link{font-size:13px;min-height:37px}.section{width:calc(100% - 32px);scroll-margin-top:84px}.section-heading{display:block;margin-bottom:25px}.section-heading h2{font-size:34px}.section-heading>p{font-size:14px;line-height:1.8;margin-top:18px;max-width:none}.workshop{padding-block:48px 70px}.packing-lab{padding:20px 12px 15px}.manifest{display:block;padding-bottom:15px}.manifest h3{font-size:16px;margin-bottom:12px}.manifest ul{gap:24px;flex-wrap:wrap}.manifest li{flex-shrink:0;display:block;font-size:12px}.manifest li span{display:block}.manifest li b{display:block;font-size:20px;margin-top:4px}.manifest li b span{display:inline}.manifest li.complete b::after{font-size:13px}.game-status{font-size:12px;min-height:54px;padding-top:14px}.bench{grid-template-columns:1.1fr 1fr;gap:10px;min-height:345px}.stock{grid-template-columns:repeat(2,1fr);gap:8px;padding:10px 0}.stock button{min-height:100px;padding:5px 2px}.stock button span{font-size:11px}.stock button svg{width:50px;height:63px}.stock button i{font-size:25px;top:22px}.parcel{min-height:345px;padding-bottom:55px}.parcel p{font-size:12px;text-align:center}.parcel b{display:block;margin:4px 0 0}.box-fallback{left:10%;right:10%;top:30%;height:95px;border-width:8px}.packing-controls{display:block;padding-top:18px}.steps{justify-content:center;gap:29px;font-size:13px}.packing-actions{justify-content:space-between;margin-top:18px;gap:10px}.packing-actions .paper-button{font-size:15px;gap:16px}.quiet-button{font-size:12px}.reset{margin-top:12px}.completion{display:block;padding-top:25px}.completion h3{font-size:21px}.completion p{font-size:13px}.completion .paper-button{margin-top:20px}.questions{padding-block:55px 70px}.questions h2{font-size:32px}.faq-list summary{font-size:17px;padding-block:22px;gap:10px}.faq-list details>div{padding-right:4px;font-size:14px}.faq-list .simple-link{font-size:12px}.contact{display:block;padding-block:55px 65px}.contact h2{font-size:27px}.contact-copy>p:last-child{font-size:14px}.contact-address{border-left:0;border-top:1px solid var(--line);padding:30px 0 0;margin-top:35px}.contact-address h3{font-size:21px}.phone{font-size:30px}.email{font-size:20px}.contact-address p{font-size:14px}footer{width:calc(100% - 32px);padding-block:20px 30px;font-size:11px}footer .simple-link{font-size:12px}}
/* The first words sit on the clear foreground of the street, without masking its buildings. */
.welcome{top:calc(100svh - 42px);transform:translate(-50%,-100%)}
.section{scroll-margin-top:0}
.header nav{gap:8px}.header nav a{position:relative;isolation:isolate;padding:10px 16px;border-bottom:0}
.header nav a::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--paper-light);clip-path:polygon(0 0,calc(100% - 9px) 0,100% 9px,100% 100%,0 100%);transform-origin:50% 100%;transition:transform .18s,background .18s}
.header nav a::after{content:'';position:absolute;top:0;right:0;width:9px;height:9px;background:var(--line);clip-path:polygon(0 0,0 100%,100% 100%)}
.header nav a:hover::before,.header nav a:focus-visible::before{transform:perspective(280px) rotateX(11deg)}
.header nav a[aria-current=page]::before{background:#dec4c4}
@media(max-width:700px){.welcome{top:calc(100svh - 32px)}.header nav{gap:0}.header nav a{padding:10px 0;border-bottom:1px solid var(--line)}.header nav a::before,.header nav a::after{display:none}.header nav a[aria-current=page]{color:var(--wine);font-weight:800}.section{scroll-margin-top:0}.bench{min-height:280px}.stock button{min-height:80px}.stock button svg{height:58px}.parcel{min-height:280px;padding-bottom:35px}}
#next{width:200px;flex:none}
.paper-button:hover:not(:disabled),.paper-button:active:not(:disabled){transform:none}
@media(max-width:700px){#next{width:190px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
/* The paper planet stays behind the whole page; the visitor keeps walking while reading. */
.world-layer{position:fixed;inset:0;z-index:0;pointer-events:none}
#world{display:block;width:100%;height:100%}
main,footer{position:relative;z-index:1}
.journey{height:100svh}
.section{background:var(--paper-light);margin-top:42svh;padding:56px clamp(24px,4vw,60px);border-radius:3px;box-shadow:0 1px 0 #dccbbd,0 26px 48px -30px rgba(72,43,54,.5)}
#work{margin-top:34svh}
.workshop{padding-top:56px;padding-bottom:60px}
.packing-lab{background:var(--paper)}
.questions,.contact{border-top:0}
.questions{padding-block:56px 64px}
.contact{padding-block:56px 60px}
/* After the last card the way opens onto the square, where the table is, before the foot of the page. */
footer{margin-top:48svh;margin-bottom:24px;background:var(--paper-light);border-top:0;padding-inline:clamp(24px,4vw,60px);border-radius:3px}
.no-street .world-layer{display:none}
.no-street .section{margin-top:56px;box-shadow:none}
.no-street footer{margin-top:24px}
@media(prefers-reduced-motion:reduce){footer{margin-top:24px}}
@media(max-width:700px){.section{margin-top:34svh;padding:32px 16px}#work{margin-top:26svh}.questions,.contact{padding-block:36px 40px}footer{padding-inline:16px;margin-top:42svh}}
/* Cards and header are sheets of the same paper: a faint fibre, no gloss. */
.section,footer,.header{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .33 0 0 0 0 .27 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.world-layer::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,transparent 55%,rgba(110,72,58,.13) 100%)}
/* The header at 1.2 times: the mark, the name and the menu grow together. */
html{scroll-padding-top:124px}
.header{transition:box-shadow .25s,border-color .2s}
.header.scrolled{box-shadow:0 1px 0 var(--line),0 14px 22px -18px rgba(72,43,54,.55)}
.brand{gap:10px}.brand svg{width:52px;height:52px}.brand small{font-size:12px}.brand strong{font-size:26px}
/* Menu tags are card tags hung from one string; they lean as the visitor moves. */
.header nav{position:relative;gap:10px;font:600 17px var(--heading);padding-top:12px;align-self:flex-start}
.header nav::before{content:'';position:absolute;left:-14px;right:-14px;top:0;height:16px;pointer-events:none;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 16' preserveAspectRatio='none'%3E%3Cpath d='M0 2Q50 16 100 2' fill='none' stroke='%23a48d86' stroke-width='1.2' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
.header nav a{padding:0;isolation:auto;min-height:52px;align-items:flex-start}
.header nav a::before,.header nav a::after{display:none}
.header nav .tag{position:relative;isolation:isolate;display:block;padding:18px 19px 10px;margin-top:-8px;transform-origin:50% 0;transform:translateY(var(--sag,0px)) perspective(420px) rotateX(var(--lean,0deg)) rotate(var(--sway,0deg));background:linear-gradient(#a48d86,#a48d86) 50% 0/1px 9px no-repeat;transition:scale .18s,opacity .18s,filter .18s}
.header nav .tag::before{content:'';position:absolute;inset:8px 0 0;z-index:-1;background:var(--paper-light);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);transition:background .18s}
.header nav .tag::after{content:'';position:absolute;top:8px;right:0;width:11px;height:11px;background:var(--line);clip-path:polygon(0 0,0 100%,100% 100%)}
.header nav a:hover .tag,.header nav a:focus-visible .tag{scale:1.06;filter:drop-shadow(0 6px 5px rgba(72,43,54,.18))}
.header nav a[aria-current=page] .tag::before{background:#dec4c4}
.header nav a:active .tag{scale:.97;translate:0 2px}
/* The sun and moon tag, last on the string: by day it shows the moon (to turn to night), by night the sun. */
.mode-toggle{display:flex;align-items:flex-start;min-height:52px;padding:0;margin:0;background:none;border:0;color:var(--wine);font:inherit}
.mode-toggle svg{display:block;width:1.3em;height:1.45em;fill:currentColor}
.mode-toggle .sun{display:none}
.mode-toggle .sun path{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
body.night .mode-toggle .moon{display:none}
body.night .mode-toggle .sun{display:block}
.mode-toggle .mode-label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.header nav .mode-toggle:hover .tag,.header nav .mode-toggle:focus-visible .tag{scale:1.06;filter:drop-shadow(0 6px 5px rgba(72,43,54,.18))}
.header nav .mode-toggle:active .tag{scale:.97;translate:0 2px}
body.no-street .mode-toggle{display:none}
body:not(.planet-ready) .mode-toggle{visibility:hidden}
/* The cards' paper; how much of the town shows through it is tried with the panel (?panel). */
.section,footer{background-color:rgb(242 230 216/var(--card-alpha,1))}
.welcome .eyebrow,.welcome h1,.welcome h1 span,.welcome .simple-link{transition:color .6s}
@media(max-width:700px){.mode-toggle{width:100%;min-height:56px;align-items:center;color:inherit}.header nav .mode-toggle .tag{display:flex;align-items:center;gap:10px}.mode-toggle svg{width:1.1em;height:1.1em;color:var(--wine)}.mode-toggle .mode-label{position:static;width:auto;height:auto;overflow:visible;clip-path:none}}
/* While Ol folds the way to another place, the cards on the way fold away and the new one opens. */
main,footer{transition:opacity .26s ease}
.folding main,.folding footer{opacity:0;transition-duration:.15s}
/* The finished parcel, hopping from the card into a window of the town. */
.courier{position:fixed;left:0;top:0;z-index:15;pointer-events:none;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 10px 8px rgba(72,43,54,.22))}
@media(max-width:1000px){.header nav{gap:6px;font-size:14px}.header nav .tag{padding:18px 12px 10px}.brand strong{font-size:22px}}
@media(max-width:700px){html{scroll-padding-top:98px}.header{padding:14px 16px}.brand svg{width:43px;height:43px}.brand small{font-size:10px}.brand strong{font-size:20px}.menu-toggle{font-size:14px}.menu-toggle span{font-size:22px}.header nav{position:absolute;top:calc(100% + 4px);left:16px;right:16px;padding:12px 24px;align-self:auto;font-size:17px;gap:0}.header nav::before{display:none}.header nav .tag{padding:0;margin:0;transform:none;background:none}.header nav .tag::before,.header nav .tag::after{display:none}.header nav a{min-height:56px;align-items:center}.header nav a:hover .tag,.header nav a:focus-visible .tag{scale:none;filter:none}}
/* One name per section: the heading says what the section is, nothing repeats it. */
.section .section-title{font:700 44px/1.3 var(--heading);letter-spacing:-.025em;margin:0 0 32px}
.welcome-actions{margin-top:34px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
/* The packing lab reads in one order: order ticket, shelf and box, then back / next, then what comes after. */
/* An item not on the ticket lights the ticket itself, with the same margin round it as one line of it. */
.manifest{position:relative;isolation:isolate}
.manifest::before{content:'';position:absolute;inset:-4px -8px 16px;z-index:-1;border-radius:3px}
.manifest.flash::before,.manifest li.flash{animation:flash .9s}
@keyframes flash{0%,100%{background:transparent}25%,60%{background:#ecd3d6}}
.manifest li{padding:4px 8px;margin:-4px -8px;border-radius:3px}
.stock button.wrong{animation:nudge .34s}
@keyframes nudge{20%{translate:-4px 0}50%{translate:4px 0}80%{translate:-2px 0}}
.back-actions{display:flex;align-items:center;gap:22px}
.completion{padding-block:28px 4px}.completion h3{margin:0}
/* Visit: what to know before coming on the left; how to reach the place on the right.
   A phone reads them in page order: the visit, how to reach the place, then the word for companies.
   Companies find their way on their own: their word sits at the foot of the left column, level with the foot of the address. */
.contact{grid-template-columns:1.15fr 1fr;grid-template-rows:auto auto 1fr;gap:30px 70px}
.contact .visit{grid-column:1;grid-row:2}
.contact .contact-address{grid-column:2;grid-row:2/span 2}
.contact .business{grid-column:1;grid-row:3;align-self:end;margin-top:0}
.section.contact .section-title{grid-column:1/-1;margin:0}
.visit h3{font:600 21px var(--heading);margin-bottom:8px}
.visit p{margin:0;font-size:15px;line-height:1.9}
.visit p+p{margin-top:6px}
.visit p,.business p{word-break:auto-phrase}
@media(max-width:700px){.section .section-title{font-size:32px;margin-bottom:22px}.packing-controls{display:flex;padding-top:18px;gap:12px}.back-actions{gap:14px}.completion{display:flex;flex-direction:column;align-items:flex-start;gap:18px}.completion .paper-button{margin-top:0}.contact{display:block}.section.contact .section-title{margin-bottom:22px}.visit p{font-size:14px}}
@media(prefers-reduced-motion:reduce){.manifest.flash::before,.manifest li.flash{animation:none;background:#ecd3d6}}
@media(max-width:700px){.manifest::before{bottom:11px}}
@media(max-width:700px){#next{width:auto;min-width:148px;gap:14px}}
.faq-list .flow{margin:0;padding-left:1.5em}
.faq-list .flow li+li{margin-top:6px}
.contact-address .map{padding:0 .4em 3px;margin-inline:-.4em;background:linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.contact-address .map:hover{color:var(--wine)}
.contact-address p+p{margin-top:12px}
.business{border-top:1px solid var(--line);padding-top:24px;margin-top:28px}
.business h3{font:600 21px var(--heading);margin-bottom:8px}
.business p{margin:0;font-size:15px;line-height:1.9;color:var(--ink,inherit)}.business p+p{margin-top:6px}
@media(max-width:700px){.contact .business{margin-top:28px}.business p{font-size:14px}}
.contact-address .email:has(+.mail-note){margin-bottom:0;border-bottom:0;padding-bottom:4px}
.contact-address .mail-note{font-size:12px;line-height:1.7;color:var(--muted);padding-bottom:14px;border-bottom:1px solid var(--line);margin-bottom:24px}
.contact-address .mail-note+p{margin-top:0}
.work-lead{font-size:17px;line-height:1.9;margin:-12px 0 40px}
.lab-title{font:600 20px var(--heading);margin-bottom:14px}
@media(max-width:700px){.work-lead{font-size:15px;margin:-8px 0 28px}.lab-title{font-size:17px;margin-bottom:10px}}
.completion-actions{display:flex;align-items:center;gap:22px}
@media(max-width:700px){.completion-actions{gap:16px;flex-wrap:wrap}}
.packing-controls .quiet-button{white-space:nowrap}
/* A name on the shelf is as large as on the order slip; a long one takes two lines, breaking only between its words. */
.stock button span{word-break:keep-all;text-align:center}
@media(max-width:700px){.stock button span{display:flex;align-items:flex-end;justify-content:center;min-height:2.5em;font-size:12px;line-height:1.25}}
/* Going back sits right beside going on: the two undo steps stand one above the other, left of the button. */
.packing-controls{display:flex;justify-content:flex-end;align-items:center;gap:20px}
.packing-controls .back-actions{flex-direction:column;align-items:flex-end;gap:0}
.packing-controls .quiet-button{min-height:40px;padding-block:6px}
.paper-button[aria-disabled="true"]{opacity:.55;cursor:default}
/* Back one is the arrow opposite the button's; from the start is the arrow that turns round. */
.packing-controls .quiet-button{display:inline-flex;align-items:center;gap:7px;text-decoration:none}
.packing-controls .quiet-button span:last-child{position:relative}
.packing-controls .quiet-button span:last-child::after{content:'';position:absolute;left:-.4em;right:-.4em;bottom:-3px;border-bottom:1px solid currentColor}
.packing-controls .quiet-button .icon{width:15px;flex:none;text-align:center;font:600 15px/1 var(--heading)}
.packing-controls .quiet-button svg.icon{height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.completion{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:20px;flex-wrap:wrap}
.completion p{font-size:15px;line-height:1.8}
@media(max-width:700px){.packing-controls{gap:14px}.completion{gap:8px 16px}.completion p{font-size:13px}}
/* What is packed reads as tags beside the name of the trial, not as one long list in a sentence. */
.lab-head{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;margin-bottom:14px}
.lab-head .lab-title{margin:0}
.goods{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:0}
.goods li{font:600 13px/1 var(--heading);color:var(--wine);background:var(--paper-light);border:1px solid #d9c3c3;border-radius:999px;padding:6px 12px}
@media(max-width:700px){.lab-head{margin-bottom:10px;gap:8px 12px}.goods{gap:6px}.goods li{font-size:12px;padding:5px 10px}}
/* By night the words that stand in the town take the colour of lamplit paper; the cards stay paper. */
body.night .welcome .eyebrow{color:#f0cbd3}
body.night .welcome h1{color:#f8f0e7}
body.night .welcome h1 span:last-child{color:#f3c6d0}
body.night .welcome .simple-link,body.night .welcome .simple-link:hover{color:#f8f0e7}
body.night .world-layer::after{background:radial-gradient(ellipse at 50% 55%,transparent 50%,rgba(10,14,32,.42) 100%)}
/* A rule is wider than what it divides: the line runs past the words at both ends, so it reads as the edge of a box
   and the words as what is inside it. The words keep their place; only the line reaches out. Rules stand only between things. */
.faq-list details,.phone,.email,.contact-address .mail-note,.business,.manifest,.packing-controls{margin-inline:calc(-1 * var(--rule-over));padding-inline:var(--rule-over)}
.manifest::before{left:calc(var(--rule-over) - 8px);right:calc(var(--rule-over) - 8px)}
@media(min-width:701px){.contact-address{margin-block:calc(-1 * var(--rule-over));padding-block:var(--rule-over)}}
@media(max-width:700px){:root{--rule-over:8px}.contact-address,.header nav a{margin-inline:calc(-1 * var(--rule-over));padding-inline:var(--rule-over)}}
/* One body text and one subhead for every card: the same kind of words are read at the same size and line height,
   and every card's text starts at the card's own left edge. */
:root{--text:16px;--sub:21px}
.work-lead,.faq-list details>div,.visit p,.business p,.contact-address p:not(.mail-note),.completion p{font-size:var(--text);line-height:1.9}
.lab-title,.manifest h3,.visit h3,.business h3,.contact-address h3,.faq-list summary{font-size:var(--sub)}
main p,main summary,main h3{word-break:auto-phrase}
.faq-list{margin-left:0;max-width:none}
@media(max-width:700px){:root{--text:15px;--sub:18px}}
/* Text links, small labels and corners: one value each. The first words under every section title sit the same distance below it. */
.simple-link,.welcome .simple-link,.faq-list .simple-link,footer .simple-link{font-size:15px}
.goods li{font-size:14px}
.paper-button{border-radius:3px}
.faq-list details:first-child summary{padding-top:0}
.work-lead{margin-top:-10px}
.faq-list{margin-top:-7px}
.contact{row-gap:29px}
@media(max-width:700px){.simple-link,.welcome .simple-link,.faq-list .simple-link,footer .simple-link{font-size:14px}.goods li{font-size:13px}.work-lead{margin-top:-6px}.faq-list{margin-top:-1px}}