@font-face{font-family:"Plex Serif";font-weight:300;font-style:normal;font-display:swap;src:url("/assets/cbd12a0193c4dc74.woff2") format("woff2")}
@font-face{font-family:"Plex Sans";font-weight:400 500;font-display:swap;src:url("/assets/056e4e2459f57a00.woff2") format("woff2")}
@font-face{font-family:"Plex Cond";font-weight:400;font-display:swap;src:url("/assets/9427f9b040d9de07.woff2") format("woff2")}











:root {
  --paper:#fdf9f6; --ink:#1c1b1a; --mute:rgba(28,27,26,.64); --rule:rgba(28,27,26,.22);
  --serif:"Plex Serif",Georgia,serif; --sans:"Plex Sans",Arial,sans-serif; --cond:"Plex Cond",var(--sans);
  --display-size:clamp(40px,4.3vw,80px); --display-leading:1.055;
  --gutter:clamp(22px,5vw,80px); --band:34svh; --foot:52px; --head:clamp(112px,15svh,168px);
  --top-inset:env(safe-area-inset-top,0px); --bottom-inset:env(safe-area-inset-bottom,0px); --reading-gap:28px;
  --night:0; --tone:0; --ease:cubic-bezier(.22,.72,.18,1);
  --background:var(--paper); --foreground:var(--ink); --primary:var(--ink); --primary-foreground:var(--paper);
  --card:var(--paper); --card-foreground:var(--ink); --border:var(--rule); --ring:var(--ink);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);color-scheme:light;-webkit-text-size-adjust:100%;scroll-behavior:auto;scrollbar-width:none;scroll-padding:0}
html::-webkit-scrollbar{display:none}
body{font-family:var(--sans);color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
a{color:inherit;text-decoration:none;-webkit-tap-highlight-color:transparent}
a:focus-visible{outline:2px solid currentColor;outline-offset:5px;border-radius:2px}
h1:focus,h2:focus{outline:none}
::selection{background:var(--ink);color:var(--paper)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;z-index:50;top:8px;left:var(--gutter);padding:12px;background:var(--paper);transform:translateY(-200%)}
.skip:focus{transform:none}

.top{position:fixed;inset:0 0 auto;z-index:30;display:flex;justify-content:space-between;align-items:center;padding:calc(var(--top-inset) + 20px) var(--gutter) 10px;background:var(--paper)}
.wordmark{font-size:22px;font-weight:500;letter-spacing:-.005em;min-height:44px;display:flex;align-items:center}
.wordmark span{font-weight:400;opacity:.72;margin-left:.3em}
.mail{width:44px;height:44px;display:grid;place-items:center;margin-right:-12px;opacity:.72;transition:opacity 180ms ease,transform 180ms ease}
.mail:hover{opacity:1;transform:translateY(-1px)}

.scenes{position:relative;z-index:5}
/* iOS Safari: chapters are 100svh, but with the toolbar collapsed the viewport
   is 100lvh, so the last chapter's start could not reach the top of the screen;
   the page bottomed out short and jumped when the toolbar returned. This spacer
   keeps the last anchor reachable in both toolbar states. Zero on desktop. */
.scenes::after{content:"";display:block;height:calc(100lvh - 100svh);pointer-events:none}
/* Sections already include the header inset; cancel the root's focus padding for hash links. */
.scene{position:relative;min-height:100svh;padding:calc(var(--head) + var(--top-inset)) var(--gutter) calc(var(--band) + var(--foot) + var(--bottom-inset) + 24px);display:block;scroll-margin:0;scroll-snap-align:start;scroll-snap-stop:always}
.copy{width:100%;max-width:1080px}
/* One native document scrolls over every surface. */


#work.is-split .copy{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);column-gap:clamp(40px,5vw,80px);row-gap:18px;align-items:start}
#work.is-split .display{grid-column:1;grid-row:1/span 2}
#work.is-split .block{grid-column:2;grid-row:1;margin-top:0}
#work.is-split .byline{grid-column:2;grid-row:2;margin-top:0}
@media(min-width:1440px){#work .block{margin-top:24px}}
h1,h2{font-family:var(--serif);font-weight:300;letter-spacing:-.014em;line-height:1.055;text-wrap:balance}
/* Opening and closing share one responsive headline scale in every layout. */
h1,.display{font-size:var(--display-size);line-height:var(--display-leading);max-width:16ch}
.display{max-width:26ch}
.lead{font-size:clamp(30px,2.9vw,54px);max-width:34ch;line-height:1.13}
h3{font-family:var(--sans);font-weight:400;font-size:14px;line-height:1.5;color:var(--mute)}
.block{margin-top:clamp(24px,2.5vw,36px);padding-top:16px;position:relative;max-width:70ch}
.block::before{content:"";position:absolute;top:0;left:0;width:40px;height:1px;background:currentColor;opacity:.65}
.list{list-style:none;margin-top:12px;display:grid;grid-template-columns:repeat(2,max-content);column-gap:clamp(32px,4vw,72px);row-gap:.35em;font-size:clamp(16px,1.15vw,18px);line-height:1.45}
.byline{margin-top:20px;font-size:13px;line-height:1.6;color:var(--mute);max-width:72ch}
.byline a{border-bottom:1px solid var(--rule);padding-bottom:2px;transition:border-color .2s}
.byline a:hover{border-color:currentColor}
.cue{margin-top:clamp(26px,4svh,44px);display:inline-flex;align-items:center;gap:14px;min-height:44px;font-size:13px;color:var(--mute)}
.cue{transition:color 180ms ease}
.cue:hover,.cue:focus-visible{color:var(--ink)}
.cue-arrow{display:block;flex:none;transition:transform 180ms ease}
.cue:hover .cue-arrow,.cue:focus-visible .cue-arrow{transform:translateY(2px)}
.cue-track{opacity:.3}
.cue-sweep{stroke-dasharray:24 24;animation:cue-draw 3s var(--ease) infinite}
@keyframes cue-draw{0%{stroke-dashoffset:24}50%,60%{stroke-dashoffset:0}100%{stroke-dashoffset:-24}}

/* The supplied panorama stays continuous. Only its position and light change. */
.band{position:fixed;inset:auto 0 calc(var(--foot) + var(--bottom-inset));height:calc(var(--band) + 16px);z-index:10;overflow:hidden;background:var(--paper);pointer-events:none}
.band::after{content:"";position:absolute;inset:auto 0 0;height:12px;background:linear-gradient(0deg,var(--paper),transparent);z-index:3}
.band::before{content:"";position:absolute;inset:0 0 auto;height:64px;background:linear-gradient(var(--paper),transparent);z-index:2}
.foot{position:fixed;inset:auto 0 0;height:calc(var(--foot) + var(--bottom-inset));background:var(--paper);z-index:20;pointer-events:none}
.plate{position:absolute;top:16px;left:0;width:max(100vw,187.33svh);height:max(18.15vw,34svh);will-change:transform}
.plate img{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.plate .base{opacity:.18;transition:opacity 1000ms ease}
.plate.is-ready .base{opacity:1}
.plate .base,.plate .tone{mask-image:linear-gradient(90deg,#000 0 46%,transparent 54%);mask-size:220% 100%;mask-position:100% 0;transition:opacity 1000ms ease,mask-position 1800ms cubic-bezier(.4,0,.2,1)}
.plate.is-ready .base,.plate.is-ready .tone{mask-position:0 0}
.plate.is-instant .base,.plate.is-instant .tone{mask-position:0 0;transition:none}
.plate .tone{opacity:var(--tone)}
.ridge-bridge{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.ridge-bridge path{fill:none;stroke:rgba(28,27,26,.28);stroke-width:3;stroke-linecap:round}
.plate .dusk-img{opacity:var(--night)}
.rotors,.lights{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.rotors{opacity:0;transition:opacity 650ms ease 900ms}
.is-ready .rotors{opacity:1}
.is-instant .rotors{transition:none}
.rotor path,.rotor circle{fill:var(--paper);stroke:var(--rotor-ink,var(--ink));stroke-width:3.6;stroke-linejoin:round}
.rotor .spin{transform-box:fill-box;transform-origin:center;animation:spin var(--period,11s) linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.lights{opacity:var(--night)}
.lights .bcn{fill:#ff5a4a;animation:blink 3.8s steps(1) infinite}
@keyframes blink{0%,78%{opacity:.85}79%,100%{opacity:.15}}
.lights .lamp{fill:#ffe1a8;opacity:.65}
.labels-wrap{position:fixed;left:0;right:0;bottom:calc(var(--foot) + var(--bottom-inset));height:calc(var(--band) + 16px);z-index:11;pointer-events:none;overflow:hidden}
.labels-wrap svg{position:absolute;top:16px;left:0;overflow:visible}
.lbl{opacity:0}
.lbl circle{fill:var(--ink)}
.lbl path{fill:none;stroke:var(--ink);stroke-width:3}
.lbl path.halo{stroke:var(--paper);stroke-width:11}
.lbl circle.halo{fill:var(--paper)}
.lbl text{font-family:var(--cond);font-size:56px;fill:var(--ink);letter-spacing:.01em;paint-order:stroke;stroke:var(--paper);stroke-width:8;stroke-linejoin:round}

.chapters{position:absolute;left:var(--gutter);right:var(--gutter);bottom:var(--bottom-inset);height:var(--foot);z-index:20;display:flex;align-items:center;gap:16px;pointer-events:none}
.chapters a{pointer-events:auto;min-height:44px;width:60px;display:flex;align-items:center;gap:8px;font-size:13px;white-space:nowrap;opacity:.55;transition:opacity .2s ease;color:var(--ink)}
.chapters a span:last-child{display:none}
.chapters a[aria-current],.chapters a:hover,.chapters a:focus-visible{opacity:1}
.chapters i{display:block;position:relative;width:28px;height:1px;background:currentColor;opacity:.7;transform:scaleX(.55);transform-origin:left;transition:transform 450ms var(--ease)}
.chapters a[aria-current] i{transform:scaleX(1);opacity:1}
.chapters .n{font-family:var(--cond);font-size:12px;font-variant-numeric:tabular-nums}
.chapters .cur{font-size:13px;white-space:nowrap;width:9em;color:var(--mute);pointer-events:none}
.wind{font-family:var(--cond);font-size:12px;color:var(--mute);margin-left:auto;white-space:nowrap;opacity:0;transition:opacity .5s ease}
.wind.on{opacity:1}
.wind .short{display:none}
.is-hidden .spin,.is-hidden .bcn,.is-hidden .cue-sweep{animation-play-state:paused}

@media(min-width:1100px) and (min-height:501px){
  .focus-list{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;padding:0;margin:0}
}
@media(max-width:1099px){.labels-wrap,.wind{display:none}}
@media(max-height:760px) and (min-width:768px){
  :root{--band:30svh;--head:94px;--foot:48px;--display-size:clamp(36px,3.9vw,56px)}
  h1{max-width:22ch}
  .lead{font-size:clamp(28px,2.9vw,46px)}
  .block{margin-top:22px;padding-top:12px}.list{margin-top:10px;row-gap:.2em}
  .byline{margin-top:18px}.signoff{margin-top:10px}
}
@media(max-width:767px){
  :root{--display-size:clamp(30px,8.7vw,38px);--display-leading:1.075;--band:29svh;--head:clamp(96px,13svh,122px);--foot:44px;--gutter:24px;--bottom-inset:min(8px,env(safe-area-inset-bottom,0px));--reading-gap:18px}
  .top{padding-top:calc(var(--top-inset) + 12px)}
  .wordmark{font-size:18px}
  .scene{padding-bottom:calc(var(--band) + var(--foot) + var(--bottom-inset) + 24px)}
  h1{max-width:16ch}
  .display{max-width:none}
  .lead{max-width:30ch;font-size:clamp(26px,6.85vw,34px);line-height:1.16}
  .block{margin-top:24px;padding-top:14px}
  .list{grid-template-columns:1fr;row-gap:.25em;font-size:16px;line-height:1.4}
  .focus-list .list{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);column-gap:12px;row-gap:.45em;font-size:15px}
  .byline{margin-top:22px;font-size:12px}
  #focus .cue{margin-top:14px}
  .signoff{margin-top:10px}
  #work{--head:80px}
  #work .block{margin-top:20px;padding-top:12px}
  #work .list{margin-top:10px;row-gap:3px}
  #work .byline{margin-top:16px}
  .chapters{gap:7px}.chapters a{width:48px;gap:5px}.chapters i{width:22px}.chapters .cur{font-size:12px;width:auto;margin-left:6px}
}
@media(max-width:767px) and (max-height:700px){
  :root{--band:24svh;--head:86px;--foot:44px}
  .lead{font-size:25px}.block{margin-top:20px}
  #work{--head:80px}
  #work .block{margin-top:16px;padding-top:10px}
  #work .list{margin-top:8px;row-gap:2px;line-height:1.35}
  #work .byline{margin-top:12px}
  #work .signoff{margin-top:8px}
}
@media(max-height:500px){:root{--band:22svh;--head:86px}.wind,.labels-wrap{display:none}.focus-list{position:relative;clip-path:none;width:auto;height:auto;white-space:normal;margin-top:20px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}.plate .base,.plate .tone{mask:none}}

/* Standalone apps keep the full home-indicator inset; Safari already has a toolbar. */
@media(max-width:767px) and (display-mode:standalone){:root{--bottom-inset:env(safe-area-inset-bottom,0px)}}

/* Only unusually constrained phones use the compact type and spacing tier. */
@media(max-width:767px){
  .scene.is-compact{--head:80px}
  #focus.is-compact .cue{margin-top:10px}
  .scene.is-compact .lead{font-size:24px;line-height:1.13}
  .scene.is-compact .block{margin-top:16px;padding-top:10px}
  .scene.is-compact .list{margin-top:8px;row-gap:2px}
  .scene.is-compact .byline{margin-top:12px}
  #work.is-compact .block{margin-top:14px;padding-top:8px}
  #work.is-compact .list{display:flex;flex-wrap:wrap;column-gap:20px;row-gap:3px;margin-top:8px}
  #work.is-compact .byline{margin-top:12px}
}
@media(max-width:359px){
  :root{--display-size:30px}
  #work.is-compact{--head:80px}
  #work.is-compact .block{margin-top:12px;padding-top:6px}
  #work.is-compact .list{margin-top:6px;row-gap:2px}
  #work.is-compact .byline{margin-top:8px}
}

/* Keep the header itself a solid paint surface: WebKit's top-color sampler
   can reject background images, including gradients. The fade belongs below it. */
.top::before{content:"";position:absolute;inset:auto 0 100%;height:100px;background:var(--paper);pointer-events:none}
.top::after{content:"";position:absolute;inset:100% 0 auto;height:16px;background:linear-gradient(var(--paper),transparent);pointer-events:none}

/* The navigation inherits a solid fixed footer, so Safari does not cache
   the sampled colour of a separate transparent fixed navigation layer. */

@media(min-width:768px){.scene.is-compact{--head:clamp(84px,10svh,120px)}.scene.is-compact .lead{font-size:clamp(26px,2.2vw,40px)}.scene.is-compact .block{margin-top:14px;padding-top:8px}.scene.is-compact .list{row-gap:2px}.scene.is-compact .byline{margin-top:10px}}

/* Every input uses native document scrolling; chapter links are explicit jumps. */
html[data-layout="panorama"]{scroll-snap-type:none;scroll-padding-bottom:max(0px,calc(100dvh - 100svh))}
#viewport-size{position:fixed;width:0;height:100svh;visibility:hidden;pointer-events:none;contain:strict}
.scene{min-height:100svh;padding-bottom:calc(var(--band) + var(--foot) + var(--bottom-inset) + var(--reading-gap) + 16px)}
#work{min-height:100dvh}
.copy{min-width:0;overflow-wrap:anywhere}
#work .list{grid-template-columns:1fr}
@media(max-width:767px){#work.is-compact .list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px 18px}}
@media(max-height:500px){.top{padding-top:calc(var(--top-inset) + 8px)}.scene{--head:76px}.cue{margin-top:16px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto;scroll-snap-type:none!important}.plate .base,.plate .tone{mask:none;transition:none}.rotors{transition:none}}

.copy [id],.byline,.copy li{scroll-margin-top:calc(var(--head) + var(--top-inset));scroll-margin-bottom:calc(var(--band) + var(--foot) + 32px)}

.band,.labels-wrap{transform:translate3d(0,var(--art-offset,0px),0);will-change:transform}

/* Give the closing headline its intended measure when the wide layout splits. */
@media(min-width:1440px){
  #work.is-split .copy{max-width:1440px;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
  #work .display{max-width:28ch}
}

/* No CSS snapping: explicit links and completed touch drags share moveTo(). */