@font-face{font-family:Prata;src:url(/fonts/Prata-Regular.woff2) format("woff2");font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Jost;src:url(/fonts/Jost-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:Mono;src:url(/fonts/DepartureMono-Regular.woff2) format("woff2");font-display:swap}
:root{--paper:#f6f1e4;--ink:#1c2145;--ink2:#4d5272;--mono:Mono,ui-monospace,monospace}
*{box-sizing:border-box}html{background:#f3ecd9}body{margin:0;font:400 18px/1.4 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--ink)}a{color:inherit;text-decoration:none}p,h1,h2,h3{margin:0}img{display:block}button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}:focus-visible{outline:2px solid currentColor;outline-offset:3px}
html.lock,html.lock body{overflow:hidden}
/* The walk: one screen tall, as long as the print. --u is a hundredth of the screen's height. */
.walk{height:100dvh;overflow:hidden}
.tb{position:fixed;inset:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior:none;outline:0;--u:1dvh}.tb::-webkit-scrollbar{display:none}
.land{position:relative;height:100%;width:calc(var(--W)*var(--u))}
.print{position:absolute;inset:0;display:flex}.print img{height:100%;width:calc(var(--w)*var(--u));flex:none;user-select:none;-webkit-user-select:none}
.plate,.sign,.tag,.pin{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
/* Paper labels pinned to the print, like captions in a field guide */
.plate,.tag{background:var(--paper);box-shadow:0 1px 0 rgb(40 30 10 / .18),0 calc(1.2*var(--u)) calc(3*var(--u)) calc(-1*var(--u)) rgb(40 30 10 / .35)}
.plate{width:calc(46*var(--u));padding:calc(3*var(--u)) calc(3.4*var(--u)) calc(2.6*var(--u))}
.plate h1{font:400 calc(16*var(--u))/.9 Prata,serif;letter-spacing:-.02em;margin-left:-.03em}
.plate>p{font-size:calc(2.2*var(--u));font-weight:500;line-height:1.3;margin-top:calc(1.4*var(--u));max-width:19em}
.route{display:flex;flex-direction:column;margin-top:calc(2.6*var(--u));border-top:1px solid var(--ink)}
.route>*{display:flex;justify-content:space-between;align-items:baseline;padding:calc(.9*var(--u)) 0;border-bottom:1px dotted rgb(28 33 69 / .35);font:400 calc(2.2*var(--u))/1.1 Prata,serif;text-align:left}
.route span span,.route button span{font:calc(1.2*var(--u))/1 var(--mono);color:var(--ink2);text-transform:uppercase;letter-spacing:.05em}
.route button:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}.route .soon{color:var(--ink2)}
.hint{margin-top:calc(2*var(--u));font:calc(1.4*var(--u))/1 var(--mono)!important;text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.back{display:inline-block;margin-top:calc(2.4*var(--u));font:calc(1.5*var(--u))/1 var(--mono);border-bottom:1px solid var(--ink);padding-bottom:3px}
.end{width:calc(36*var(--u))}.end h2{font:400 calc(7*var(--u))/1 Prata,serif;margin:calc(1*var(--u)) 0}.end>p:not(.tn){font-size:calc(1.9*var(--u));font-weight:400}.end .tn{font-size:calc(1.15*var(--u));font-weight:400}.end .tn:last-child{margin-top:calc(2*var(--u))}
/* A place name, set into the sky like the title of an engraving */
.sign{width:calc(31*var(--u));padding:calc(2.2*var(--u)) calc(2.4*var(--u)) calc(2.4*var(--u));background:var(--paper);box-shadow:0 1px 0 rgb(40 30 10 / .18),0 calc(1.2*var(--u)) calc(3*var(--u)) calc(-1*var(--u)) rgb(40 30 10 / .35)}.sign h2{font:400 calc(7.4*var(--u))/.9 Prata,serif;letter-spacing:-.02em}.sign p{font:calc(1.5*var(--u))/1.4 var(--mono);text-transform:uppercase;letter-spacing:.06em;margin-top:calc(1.4*var(--u))}
/* A work: its label, and a pin down to where it stands */
.tag{display:block;width:calc(30*var(--u));padding:calc(1.6*var(--u)) calc(2*var(--u)) calc(1.8*var(--u));transition:translate .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s;z-index:2}
.tag:hover,.tag:focus-visible,.tag.on{translate:0 calc(-.6*var(--u));box-shadow:0 1px 0 rgb(40 30 10 / .18),0 calc(2.4*var(--u)) calc(4*var(--u)) calc(-1.4*var(--u)) rgb(40 30 10 / .45)}
.tn{display:flex;justify-content:space-between;font:calc(1.15*var(--u))/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;color:var(--ink2)}
.tag>b{display:block;font:400 calc(3.6*var(--u))/1.05 Prata,serif;margin-top:calc(1*var(--u))}
.tl{display:block;font-size:calc(1.6*var(--u));line-height:1.3;color:var(--ink2);margin-top:calc(.6*var(--u))}
.lv{display:flex;flex-direction:column;gap:calc(.5*var(--u));margin-top:calc(1.4*var(--u));padding-top:calc(1.1*var(--u));border-top:1px solid rgb(28 33 69 / .2);font:calc(1.25*var(--u))/1.25 var(--mono);color:var(--ink2)}
.lv i{font-style:normal;display:flex;justify-content:space-between;gap:10px}.lv b{font:inherit;color:var(--ink)}
.lv .sw{display:inline-block;width:calc(1.2*var(--u));height:calc(1.2*var(--u));margin-right:8px;vertical-align:-1px;text-decoration:none;box-shadow:inset 0 0 0 1px rgb(28 33 69 / .3)}
[data-live="status"] i{display:block}[data-live="ink"] i{justify-content:flex-start}[data-live="ink"] b{margin-left:auto}
.pin{width:1px;height:calc(var(--h)*var(--u));background:var(--ink);opacity:.75;z-index:1;pointer-events:none}
.pin::after{content:"";position:absolute;left:-3.5px;bottom:-4px;width:8px;height:8px;border-radius:50%;background:var(--ink);box-shadow:0 0 0 3px rgb(246 241 228 / .85)}
/* How far along the path */
.path{position:fixed;z-index:5;left:calc(5*1dvh);right:calc(5*1dvh);bottom:calc(2.6*1dvh);height:1px;background:rgb(28 33 69 / .2)}.path i{position:absolute;inset:0;background:var(--ink);transform-origin:0 0;transform:scaleX(0)}
/* The brief */
.scrim{position:fixed;inset:0;z-index:20;background:rgb(30 22 10 / .35);opacity:0;transition:opacity .45s}.scrim.in{opacity:1}
/* The brief: a specimen sheet */
.br{position:fixed;z-index:40;top:3.5vh;bottom:3.5vh;right:2.4vw;width:min(56vw,880px);overflow-y:auto;overscroll-behavior:contain;background:var(--paper);color:var(--ink);padding:26px clamp(24px,3vw,44px) 36px;
 box-shadow:0 2px 2px rgb(0 0 0 / .3),0 30px 60px -20px rgb(0 0 0 / .6);translate:calc(100% + 4vw) 0;rotate:3deg;transition:translate .6s cubic-bezier(.2,.7,.2,1),rotate .6s cubic-bezier(.2,.7,.2,1);outline:0;scrollbar-width:thin;scrollbar-color:var(--ink2) transparent}
.br.in{translate:0 0;rotate:0deg}.br[hidden]{display:none}
.bh{display:flex;justify-content:space-between;gap:12px;padding-bottom:10px;border-bottom:1px solid var(--ink);font:12.5px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.06em}
.bt{display:grid;grid-template-columns:1fr auto;align-items:end;gap:6px 24px;padding:clamp(16px,3vh,30px) 0 clamp(12px,2vh,20px)}.bt h2{font:400 clamp(48px,min(6vw,9vh),92px)/1 Prata,serif;letter-spacing:-.015em;margin-left:-.02em;grid-column:1/-1}
.bt .ln{font-size:clamp(18px,1.6vw,21px);line-height:1.3;max-width:28em}.lk{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.go{display:inline-block;padding:9px 16px 10px;background:var(--ink);color:var(--paper);font:13.5px/1 var(--mono);white-space:nowrap}.go2{font:12.5px/1 var(--mono);border-bottom:1px solid var(--ink2);padding-bottom:2px}
.lab{width:100%;border-collapse:collapse;border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);font-size:15px;line-height:1.35}.lab th{width:8.6em;text-align:left;font:12px/1.5 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);padding:7px 10px 7px 0;vertical-align:top}.lab td{padding:7px 0}.lab tr+tr{border-top:1px dotted rgb(28 33 69 / .35)}
.bs{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2.4vh,22px) 30px;padding-top:clamp(14px,2.4vh,22px)}.bs h3{font:12px/1.2 var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--ink2);margin-bottom:6px}.bs p{font-size:clamp(15px,min(1.2vw,2vh),17px);line-height:1.45}
.why{margin-top:clamp(14px,2.4vh,22px);padding-top:10px;border-top:1px solid rgb(28 33 69 / .2);font-size:14.5px;line-height:1.4;color:var(--ink2)}.why span{font:11.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;margin-right:6px}
#b-about{bottom:auto}.ab p{font-size:clamp(17px,1.4vw,20px);line-height:1.5;margin-top:14px;max-width:34em}
.bx{position:absolute;top:22px;right:clamp(24px,3vw,44px);font:12.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.06em;background:var(--paper);padding:2px 0 2px 10px}.bx:hover{text-decoration:underline}
.bh span:last-of-type{margin-right:70px}


/* Phones: the path runs down the screen. Each place is a window onto the print, its labels below it. */
@media (orientation:portrait),(max-width:699px){
 .walk{height:auto}.tb{position:relative;inset:auto;overflow:visible;--u:1vw}
 .land{width:auto;height:auto;display:flex;flex-direction:column;padding:0 0 calc(10vw + env(safe-area-inset-bottom))}
 .print{position:relative;inset:auto;height:150vw;overflow:hidden;order:0}.print img{height:150vw;width:calc(var(--w)*1.5vw)}
 .print img:nth-child(n+2){display:none}
 .plate,.sign,.tag{position:relative;left:auto;top:auto}
 .plate{order:1;width:auto;margin:-40vw 5vw 0;padding:7vw 6vw 6vw}.plate h1{font-size:24vw}.plate>p{font-size:4.6vw}
 .route>*{font-size:5vw;padding:2.4vw 0}.route span span,.route button span{font-size:2.8vw}.hint{display:none}
 .sign{order:2;width:auto;margin:14vw 5vw 5vw;padding:0;background:none;box-shadow:none}.sign h2{font-size:18vw}.sign p{font-size:3.2vw}
 .tag{order:3;width:auto;margin:0 5vw 5vw;padding:5vw 5vw 5.4vw}.tag::before{content:"";display:block;height:56vw;margin:-5vw -5vw 5vw;background:var(--bg) center/cover}.tag>b{font-size:8vw}.tl{font-size:4vw}.tn{font-size:2.8vw}.lv{font-size:3.1vw}.lv .sw{width:3vw;height:3vw}
 .pin{display:none}.end .tn{font-size:2.8vw}.end{order:4;width:auto;margin:8vw 5vw 0}.end h2{font-size:12vw}.end>p:not(.tn){font-size:4.4vw}
 .path{display:none}
 .br{top:8vh;left:0;right:0;bottom:0;width:auto;padding:20px 6vw calc(40px + env(safe-area-inset-bottom));translate:0 105%;rotate:0deg}
 .bt{grid-template-columns:1fr}.lk{align-items:flex-start;flex-direction:row;flex-wrap:wrap;align-items:center;gap:14px}.bt h2{font-size:15vw}
 .bs{grid-template-columns:1fr}.bs p{font-size:17px}.bx{top:18px;right:6vw}
}
@media (prefers-reduced-motion:reduce){.tag,.br,.scrim{transition:none!important}}