@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;--mat:#2c2a26;--line:rgb(255 244 225 / .022);--line2:rgb(255 244 225 / .04);--pen:rgb(246 238 222 / .42);--mono:Mono,ui-monospace,monospace}
*{box-sizing:border-box}html{background:var(--mat)}body{margin:0;font:400 18px/1.4 Jost,system-ui,sans-serif;-webkit-font-smoothing:antialiased;color:var(--paper)}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 table: one screen tall, as long as the work. Everything is measured in --u, a hundredth of its height. */
.desk{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}
.mat{position:relative;height:100%;width:calc(var(--W)*var(--u));background-color:var(--mat);
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),linear-gradient(var(--line2) 1px,transparent 1px),linear-gradient(90deg,var(--line2) 1px,transparent 1px),linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);
 background-size:260px 260px,calc(10*var(--u)) calc(10*var(--u)),calc(10*var(--u)) calc(10*var(--u)),calc(2*var(--u)) calc(2*var(--u)),calc(2*var(--u)) calc(2*var(--u));background-position:0 0}
.mat::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 80% at 40% 40%,rgb(255 236 200 / .07),transparent 70%),linear-gradient(to bottom,rgb(0 0 0 / .18),transparent 12%,transparent 85%,rgb(0 0 0 / .22))}
.rl{display:none!important}
/* Rulers along both edges */
.rl{position:absolute;left:0;right:0;height:calc(2.6*var(--u));pointer-events:none;font:calc(1.15*var(--u))/1 var(--mono);color:var(--pen);
 background-image:linear-gradient(90deg,var(--pen) 1px,transparent 1px),linear-gradient(90deg,var(--pen) 1px,transparent 1px);background-size:calc(10*var(--u)) 100%,var(--u) 40%;background-repeat:repeat-x}
.rt{top:0;background-position:0 0,0 0}.rb{bottom:0;background-position:0 0,0 100%}
.rl span{position:absolute;left:calc(var(--x)*var(--u) + 4px);top:calc(.55*var(--u))}.rb span{top:auto;bottom:calc(.55*var(--u))}
/* Anything on the table sits at --x, --y with width --w, in table units. */
.pc,.nt,.pr,.lbl,.endn{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u))}
.pc,.nt,.pr{width:calc(var(--w)*var(--u));rotate:var(--r)}
/* A riso polaroid */
.pc{display:block;background:var(--paper);color:var(--ink);padding:calc(1.3*var(--u)) calc(1.3*var(--u)) 0;user-select:none;-webkit-user-select:none;
 box-shadow:0 1px 1px rgb(0 0 0 / .3),0 calc(.8*var(--u)) calc(1.6*var(--u)) calc(-.4*var(--u)) rgb(0 0 0 / .42),0 calc(2.6*var(--u)) calc(4*var(--u)) calc(-2*var(--u)) rgb(0 0 0 / .55);
 transition:translate .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s,rotate .4s}
.ph{display:block}.ph img{width:100%;height:auto}
.pm{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:calc(.9*var(--u)) 0 calc(.2*var(--u))}.pm b{font:400 calc(2.4*var(--u))/1.1 Prata,serif;white-space:nowrap}.pm small{font:calc(1.15*var(--u))/1 var(--mono);color:var(--ink2);white-space:nowrap}
.pl{display:block;font-size:calc(1.35*var(--u));line-height:1.3;color:var(--ink2);padding-bottom:calc(1.1*var(--u));min-height:calc(2.9*var(--u))}
.pc:hover,.pc:focus-visible{translate:0 calc(-.8*var(--u));rotate:calc(var(--r)*.5);box-shadow:0 1px 1px rgb(0 0 0 / .25),0 calc(2*var(--u)) calc(3*var(--u)) calc(-.6*var(--u)) rgb(0 0 0 / .45),0 calc(5*var(--u)) calc(7*var(--u)) calc(-3*var(--u)) rgb(0 0 0 / .55)}
.pc.gone,.idx.gone{visibility:hidden}.kinds{display:contents}
.kc .pm b{font-size:calc(3.4*var(--u))}.kc .pm small{font-size:calc(1.5*var(--u))}.kc{padding-bottom:calc(.8*var(--u))}
/* Notes */
.nt{display:block;background:var(--paper);color:var(--ink);box-shadow:0 1px 1px rgb(0 0 0 / .3),0 calc(1*var(--u)) calc(2*var(--u)) calc(-.4*var(--u)) rgb(0 0 0 / .4),0 calc(3*var(--u)) calc(5*var(--u)) calc(-2.4*var(--u)) rgb(0 0 0 / .5)}
.ttl,.lost{padding:calc(3*var(--u)) calc(3.6*var(--u)) calc(2.8*var(--u))}.ttl h1,.lost h1{font:400 calc(19*var(--u))/.9 Prata,serif;letter-spacing:-.02em;margin-left:-.03em}.ttl p,.lost p{font-size:calc(2.3*var(--u));font-weight:500;margin-top:calc(1.2*var(--u))}
.lost a{display:inline-block;margin-top:calc(2*var(--u));font:calc(1.6*var(--u))/1 var(--mono);border-bottom:1px solid var(--ink);padding-bottom:3px}
.idx{aspect-ratio:5/3;padding:calc(1.8*var(--u)) calc(2.2*var(--u));display:flex;flex-direction:column;justify-content:space-between;background-color:#fbf8ef;
 background-image:linear-gradient(transparent calc(5.4*var(--u)),#cf5a43 calc(5.4*var(--u)),#cf5a43 calc(5.4*var(--u) + 1px),transparent calc(5.4*var(--u) + 1px)),repeating-linear-gradient(transparent 0 calc(3*var(--u) - 1px),rgb(60 110 170 / .25) calc(3*var(--u) - 1px) calc(3*var(--u)));
 background-position:0 0,0 calc(5.4*var(--u));transition:translate .3s,rotate .4s}.idx b{font:400 calc(3*var(--u))/1 Prata,serif}.idx span{font-size:calc(1.7*var(--u))}
.idx:hover{translate:0 calc(-.8*var(--u));rotate:1deg}
/* Labels drawn on the mat */
.lbl{display:flex;align-items:baseline;gap:calc(1.2*var(--u));font:400 calc(5.2*var(--u))/1 Prata,serif;color:var(--paper);white-space:nowrap}.lbl span,.lbl i{font:calc(1.3*var(--u))/1 var(--mono);color:var(--pen);font-style:normal}

.endn{font:calc(1.4*var(--u))/1 var(--mono);color:var(--pen)}
/* Pencil drawings */
.ob{position:absolute;left:calc(var(--x)*var(--u));top:calc(var(--y)*var(--u));width:calc(var(--w)*var(--u));height:auto;pointer-events:none;user-select:none;-webkit-user-select:none;z-index:0}
.pr{pointer-events:none;color:var(--pen)}.pr svg{width:100%;height:auto;display:block;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.2;vector-effect:non-scaling-stroke}.pr svg *{vector-effect:non-scaling-stroke}.pr text{fill:currentColor;stroke:none;font:10px var(--mono)}.pr text.b{font-size:22px}
.pr-ring{color:rgb(160 120 80 / .5)}.pr-stamp{color:rgb(214 96 70 / .55)}.pr-stamp svg{stroke-width:2}
/* Where you are on the table */
.map{position:fixed;z-index:5;right:calc(2.4*1dvh);bottom:calc(3.6*1dvh);display:flex;gap:18px;align-items:baseline;padding:8px 12px 10px;background:rgb(36 34 30 / .82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid var(--line2);font:13px/1 var(--mono);color:var(--pen)}
.map button,.map a{transition:color .3s}.map .on,.map button:hover,.map a:hover{color:var(--paper)}
.map>i{position:absolute;left:12px;right:12px;bottom:4px;height:1px;background:var(--line2)}.map>i>i{position:absolute;inset:0;background:var(--paper);transform-origin:0 0;transform:scaleX(0)}

/* The open work */
.scrim{position:fixed;inset:0;z-index:20;background:rgb(12 16 30 / .55);opacity:0;transition:opacity .45s}.scrim.in{opacity:1}
.fly,.pc.fly,.nt.fly{position:fixed;z-index:30;margin:0;pointer-events:none;--u:1dvh;transition:none}
.fly.flying{transition:left .55s cubic-bezier(.2,.7,.2,1),top .55s cubic-bezier(.2,.7,.2,1),width .55s cubic-bezier(.2,.7,.2,1),rotate .55s cubic-bezier(.2,.7,.2,1)}
.fly .pm b{font-size:clamp(20px,3vw,34px)}.fly .pm small{font-size:13px}.fly .pl{font-size:15px;min-height:0}.fly{padding:14px 14px 0}.fly.idx{padding:20px 24px}.fly.idx b{font-size:34px}.fly.idx span{font-size:18px}
/* 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 table stands up. Scroll down it; everything is laid out in the flow. */
@media (orientation:portrait),(max-width:699px){
 .desk{height:auto;overflow-x:clip}.mat{overflow-x:clip}.tb{position:relative;inset:auto;overflow:visible;--u:1vw}
 .mat{width:auto;height:auto;padding:max(10px,env(safe-area-inset-top)) 6vw calc(16vw + env(safe-area-inset-bottom));display:flex;flex-direction:column;background-size:calc(10*var(--u)) calc(10*var(--u)),calc(10*var(--u)) calc(10*var(--u)),calc(2*var(--u)) calc(2*var(--u)),calc(2*var(--u)) calc(2*var(--u))}
 .rl{display:none}
 .pc,.nt,.pr,.lbl,.endn{position:relative;left:auto;top:auto}
 .pr{display:none}.ob{display:none}.ob-compass{display:block;position:absolute;left:auto;right:4vw;top:58vw;width:30vw}
 .ttl{width:auto;margin:4vw 0 0;rotate:-1deg;padding:6vw 6vw 5vw}.ttl h1{font-size:25vw}.ttl p{font-size:4.6vw;margin-top:2vw}
 .idx{width:46vw;margin:6vw 0 0 4vw;rotate:2.5deg;padding:3vw 4vw}.idx b{font-size:6vw}.idx span{font-size:3.6vw}
 .kinds{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:3vw;margin-top:9vw}.kinds .kc{width:auto;margin:0;padding:2vw 2vw 1vw}.kinds .kc:nth-child(1){rotate:-2deg}.kinds .kc:nth-child(2){rotate:1.5deg}.kinds .kc:nth-child(3){rotate:-1deg}.kc .pm b{font-size:4.3vw}.kc .pm small{font-size:2.6vw}
 .lbl{margin:16vw 0 6vw;font-size:11vw;gap:3vw}.lbl span,.lbl i{font-size:3vw}.lbl::after{right:-6vw;bottom:-2vw}
 .pc{width:78vw;--u:1vw;margin:0 0 7vw}.pc .pm b{font-size:6vw}.pc .pm small{font-size:2.8vw}.pc .pl{font-size:3.6vw;min-height:0;padding-bottom:3vw}.pc{padding:3vw 3vw 0}
 .mat>.pc:nth-of-type(even){align-self:flex-end}
 .grp{display:flex;flex-direction:column}
 .endn{margin-top:8vw;font-size:3vw}
 .map{display:none}
 .br{top:calc(min(28vh,220px) + 24px);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}
 .fly{--u:1vw}.fly .pl{display:none}
}
@media (prefers-reduced-motion:reduce){.pc,.br,.scrim,.fly.flying,.idx{transition:none!important}}