/* site.css — Richard Wang. One cold-silver studio; warm light only where it is earned. */
@font-face{font-family:"Fraunces";font-style:normal;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin-full-normal.woff2) format("woff2-variations")}
@font-face{font-family:"Fraunces";font-style:italic;font-weight:100 900;font-display:swap;src:url(../fonts/fraunces-latin-full-italic.woff2) format("woff2-variations")}
@font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/inter-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:500;font-display:swap;src:url(../fonts/inter-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(../fonts/inter-latin-600-normal.woff2) format("woff2")}
:root{
  --bg:#222a31; --graphite:#d8dcdf; --graphite-2:#e7eaec; --ink:#101417; --ink-2:rgba(16,20,23,.74); --mute:rgba(16,20,23,.5); --line:rgba(16,22,26,.14);
  --burgundy:#713d48; --burgundy-2:#8a4a58; --accent:#79a9b6; --accent-ink:#3f6b79; --amber:var(--accent);
  --paper:#edf0f1; --paper-ink:#101417; --paper-ink2:#3d474d; --paper-mute:#6c7980;
  --serif:"Fraunces","Iowan Old Style",Georgia,serif; --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; --mono:"SF Mono","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --pad:clamp(20px,5vw,72px); --measure:62ch;
}
*{box-sizing:border-box}
html{scroll-behavior:auto}
html,body{margin:0;overflow-x:hidden;background:var(--bg);color:var(--ink);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body.panel-open{overflow:hidden}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:2px}
button{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--sans);font-weight:500;letter-spacing:-.035em;line-height:1.04;margin:0}
p{margin:0 0 1em}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.skip-link{position:fixed;top:12px;left:50%;transform:translate(-50%,-200%);z-index:100;background:var(--ink);color:var(--paper);padding:10px 16px;border-radius:2px;text-decoration:none;font-weight:500;transition:transform .2s}
.skip-link:focus{transform:translate(-50%,0)}

/* ---------- the canvas and the poster behind everything ---------- */
#stage-canvas{position:fixed;inset:0;width:100%;height:100%;z-index:0;opacity:0;transition:opacity 1.2s ease}
#stage-canvas.show{opacity:1}
.poster{position:fixed;inset:0;z-index:45;background:radial-gradient(120% 90% at 28% 28%,#53606a 0%,#26313b 52%,#111820 100%);transition:opacity 1.4s ease;display:flex;align-items:flex-end;padding:0 var(--pad) clamp(40px,8vh,90px)}
.poster.hide{opacity:0;pointer-events:none}
.poster-in{max-width:520px} .poster-name{font-family:var(--sans);font-size:clamp(34px,4.2vw,56px);font-weight:500;margin:0 0 6px;color:var(--paper);letter-spacing:-.04em}
.poster-sub{font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,240,241,.62);margin:0 0 26px}
.poster-bar{height:1px;background:rgba(237,240,241,.18);width:min(320px,50vw);position:relative} .poster-bar i{position:absolute;left:0;top:-0.5px;height:2px;width:100%;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .4s ease}
main{position:relative;z-index:1}

/* ---------- nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;padding:10px var(--pad) 16px;font-size:13px;color:var(--paper);pointer-events:none;background:linear-gradient(180deg,rgba(6,10,13,.92) 0,rgba(6,10,13,.54) 62%,rgba(6,10,13,0) 100%);border-top:1px solid rgba(237,240,241,.08)}
.nav .brand{font-family:var(--sans);font-size:14px;letter-spacing:.01em;text-decoration:none;font-weight:600;padding:6px 12px;margin-left:-12px;border-radius:2px;pointer-events:auto;text-shadow:none}
.nav ul{list-style:none;margin:0;padding:0;display:flex;gap:22px;pointer-events:auto}
.nav ul a{display:flex;align-items:center;gap:7px;min-height:44px;padding:6px 0;text-decoration:none;color:rgba(237,240,241,.58);font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;border-bottom:1px solid transparent;text-shadow:none}
.nav ul a:hover{color:var(--paper)}
.nav ul a::before{content:"";width:3px;height:3px;background:currentColor;opacity:0;transform:scale(0);transition:opacity .2s,transform .2s}
.nav ul a.is-active{color:var(--paper);border-bottom-color:transparent}.nav ul a.is-active::before{opacity:1;transform:scale(1);background:var(--accent);box-shadow:0 0 8px rgba(121,169,182,.7)}

/* ---------- stations: the sticky viewport and the plate over it ---------- */
.station{position:relative;height:calc(var(--vh,360)*1vh);height:calc(var(--vh,360)*1svh)}
.station .sticky,.travel .sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;contain:paint}
.station .sticky{pointer-events:auto;touch-action:pan-y}
.travel{position:relative;height:130vh;height:130svh}
.station .sticky::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(ellipse at 68% 44%,transparent 30%,rgba(7,10,13,.13) 68%,rgba(6,8,11,.44) 100%),linear-gradient(90deg,rgba(7,10,13,.62) 0%,rgba(7,10,13,.26) 31%,transparent 58%),linear-gradient(0deg,rgba(7,10,13,.28),transparent 36%)}
.travel .divider{position:absolute;left:var(--pad);right:var(--pad);top:50%;margin:0;display:flex;align-items:center;gap:18px;opacity:.9}
.travel .divider .rule{flex:1;height:1px;background:var(--line)}
.plate-ui{position:absolute;inset:0;z-index:2;pointer-events:none}
.plate-ui .kick{text-shadow:0 2px 16px rgba(4,7,10,.86);position:absolute;left:var(--pad);top:clamp(88px,12vh,124px);margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(237,240,241,.7);display:flex;align-items:center;gap:10px;opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease}
.plate-ui .kick .sq{width:6px;height:6px;background:var(--accent);box-shadow:0 0 12px rgba(121,169,182,.5);display:inline-block}
.plate-ui .title{position:absolute;left:var(--pad);top:clamp(116px,16vh,166px);margin:0;max-width:min(12ch,42vw);font-size:clamp(38px,5.6vw,92px);}
.plate-ui .title.long{font-size:clamp(32px,4.4vw,72px);max-width:min(14ch,42vw)}
.plate-ui .title{line-height:.92;letter-spacing:-.048em;color:var(--paper);text-shadow:0 2px 26px rgba(4,7,10,.9);opacity:0;transform:translateY(14px);transition:opacity .8s ease .05s,transform .8s ease .05s}
.plate-ui .spec{text-shadow:0 2px 14px rgba(4,7,10,.9);position:absolute;left:var(--pad);top:calc(clamp(116px,16vh,166px) + var(--titleH,180px) + 22px);margin:0;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,240,241,.74);max-width:44ch;white-space:nowrap;opacity:0;transition:opacity .8s ease .15s}
.plate-ui .spec.sentence{font-family:var(--sans);font-size:clamp(14px,1.1vw,16px);letter-spacing:0;text-transform:none;color:rgba(237,240,241,.82);max-width:40ch;white-space:normal;line-height:1.5}   /* an object's one line reads as a sentence, not a spec */
.plate-ui .read{text-shadow:0 2px 14px rgba(4,7,10,.9);position:absolute;left:var(--pad);top:calc(clamp(116px,16vh,166px) + var(--titleH,180px) + 56px);pointer-events:auto;background:none;border:0;border-bottom:1px solid rgba(237,240,241,.42);min-height:44px;padding:8px 0;color:var(--paper);font-size:15px;letter-spacing:.01em;cursor:pointer;opacity:0;transition:opacity .8s ease .2s,border-color .2s}
.plate-ui .read .arr{display:inline-block;margin-left:6px;transition:transform .25s}
.plate-ui .read:hover{border-color:var(--paper)} .plate-ui .read:hover .arr{transform:translateX(4px)}
.station.is-here .kick,.station.is-here .title,.station.is-here .spec,.station.is-here .read{opacity:1;transform:none}
.plate-ui .cap{position:absolute;margin:0;max-width:30ch;font-size:clamp(14px,1.15vw,16px);line-height:1.55;color:var(--paper-ink);opacity:0;transform:translateY(6px);transition:opacity .6s ease,transform .6s ease;padding:10px 14px;background:rgba(237,240,241,.96);border:1px solid rgba(16,22,26,.14);border-radius:2px}
.plate-ui .cap.on{opacity:1;transform:none}
.plate-ui .cap[data-side="bl"]{left:var(--pad);bottom:clamp(30px,8vh,72px)}
.plate-ui .cap[data-side="br"]{right:calc(var(--pad) + 40px);bottom:clamp(30px,8vh,72px);text-align:left}
.plate-ui .cap[data-side="tr"]{right:calc(var(--pad) + 40px);top:clamp(116px,16vh,166px)}
.plate-ui .tools{position:absolute;right:calc(var(--pad) + 40px);bottom:calc(clamp(30px,8vh,72px) + 118px);pointer-events:auto;display:flex;flex-direction:column;align-items:flex-end;gap:10px;transition:opacity .4s}
.plate-ui .tools[hidden]{display:none}
.seg-ctl{display:flex;gap:4px;background:rgba(232,235,237,.94);padding:4px;border-radius:999px;border:1px solid rgba(21,23,24,.14)}
.seg{border:0;background:none;color:var(--ink-2);min-height:44px;padding:8px 13px;border-radius:999px;cursor:pointer;font-size:13px}
.seg.is-on{background:var(--paper-ink);color:var(--paper)}
.seg-ctl .count{align-self:center;padding:0 8px;font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--ink-2)}
/* the opening plate */
.intro{position:absolute;left:var(--pad);top:clamp(108px,15vh,150px);max-width:min(52vw,620px);transition:opacity .6s,transform .6s}
.intro.hide{opacity:0;transform:translateY(12px);pointer-events:none}
.intro h1{font-size:clamp(48px,6.4vw,96px);letter-spacing:-.05em;line-height:.9;margin:0 0 20px;color:var(--paper);text-shadow:0 2px 28px rgba(4,7,10,.9)}
.intro .lede{font-size:clamp(16px,1.3vw,19px);color:var(--paper);max-width:37ch;margin:0 0 22px;text-shadow:0 1px 2px rgba(18,16,15,.9),0 0 14px rgba(18,16,15,.72)}
.intro .quick{margin:0;display:flex;gap:22px;pointer-events:auto}
.intro .quick a{color:var(--paper);text-decoration:none;font-size:15px;border-bottom:1px solid rgba(237,240,241,.5);padding-bottom:3px;text-shadow:0 1px 2px rgba(18,16,15,.9),0 0 12px rgba(18,16,15,.72)}
.intro .quick a:hover{border-color:var(--paper)}
.scale-mark{position:absolute;left:var(--pad);bottom:clamp(40px,10vh,90px);margin:0;font-family:var(--serif);font-size:clamp(30px,4.4vw,60px);letter-spacing:.02em;color:var(--paper);opacity:0;transition:opacity .5s;text-shadow:0 2px 24px rgba(0,0,0,.75)}
.scale-mark.on{opacity:1}
.hint{display:none}
.hint.hide{opacity:0}
.skip-btn{position:absolute;right:calc(var(--pad) + 40px);top:78px;pointer-events:auto;background:none;border:0;border-bottom:1px solid rgba(237,240,241,.34);min-height:44px;color:rgba(237,240,241,.72);padding:8px 0;font-family:var(--mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;transition:opacity .4s;text-shadow:0 1px 10px rgba(4,7,10,.8)} .skip-btn:hover{color:var(--paper);border-bottom-color:var(--paper)}
.skip-btn.hide{opacity:0;pointer-events:none}
.nogl-note{position:absolute;left:var(--pad);top:50%;transform:translateY(-50%);max-width:36ch;color:var(--ink-2);font-size:14px}
/* the ghost plate number and the index */
.ghost{position:fixed;left:calc(var(--pad) - .06em);bottom:-.14em;z-index:1;font-family:var(--serif);font-size:clamp(100px,18vw,240px);line-height:1;color:rgba(21,23,24,.025);pointer-events:none;letter-spacing:-.04em;font-variant-numeric:tabular-nums;transition:opacity .6s}
.ghost.hide{opacity:0}
.plate-index{position:fixed;right:clamp(12px,2vw,28px);top:50%;transform:translateY(-50%);z-index:30;display:flex;flex-direction:column;gap:10px;pointer-events:auto;padding:18px 0 18px 40px}
.plate-index a{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:rgba(26,23,22,.55);text-shadow:0 1px 8px rgba(236,232,225,.8);text-decoration:none;display:flex;align-items:center;gap:8px;justify-content:flex-end;transition:color .3s}
.plate-index a::after{content:"";width:18px;height:1px;background:currentColor;transform:scaleX(.333);transform-origin:right;transition:transform .3s}
.plate-index a.is-on{color:var(--ink)} .plate-index a.is-on::after{transform:scaleX(1)}
.plate-index a:hover{color:var(--ink)}

/* ---------- the text columns: a graphite page in the room; the room stays visible beside it ---------- */
.column{position:relative;padding:clamp(72px,10vw,140px) 0;scroll-margin-top:12px;background:linear-gradient(90deg,rgba(237,240,241,.99) 0,rgba(237,240,241,.97) min(720px,58vw),rgba(237,240,241,.58) min(850px,68vw),transparent min(980px,78vw))}
.column .col{max-width:min(720px,58vw);padding:0 var(--pad)}
#notes,#contact{background:linear-gradient(90deg,rgba(237,240,241,.99) 0,rgba(237,240,241,.97) 88vw,rgba(237,240,241,.28) 100%)}
.sec-head{margin:0 0 34px}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.sec-head h2{font-size:clamp(34px,4.4vw,64px);letter-spacing:-.02em;margin:0 0 14px}
.sec-lede{font-size:clamp(16px,1.35vw,19px);color:var(--ink-2);max-width:56ch;margin:0}
.sub-h{font-family:var(--sans);font-size:24px;margin:34px 0 14px}
.cards{list-style:none;margin:0;padding:0;display:block;border-top:1px solid var(--line)}   /* an index, not a grid of boxes: one entry per rule */
.card{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:27px 0 25px;display:grid;grid-template-columns:minmax(190px,240px) 1fr;column-gap:28px;row-gap:8px;align-items:start;min-height:0;transition:border-color .2s,transform .2s}
.card:hover{border-color:var(--accent-ink);transform:none}
.card h3{font-size:24px;margin:0;grid-column:1}
.card p{color:var(--ink-2);font-size:15.5px;line-height:1.6;margin:0;grid-column:2;max-width:46ch}
.card .meta{font-family:var(--mono);font-size:12px;color:var(--mute);letter-spacing:.08em;text-transform:uppercase;grid-column:2}
.card button{grid-column:2;justify-self:start;align-self:flex-start;background:none;border:0;padding:0;color:var(--ink);font-weight:500;cursor:pointer;border-bottom:1px solid rgba(26,23,22,.35);padding-bottom:2px}
.card button:hover{border-color:var(--ink)}
.card.static button{display:none}
.essays{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.essays li{border-bottom:1px solid var(--line)}
.essays button{width:100%;text-align:left;background:none;border:0;padding:22px 0;display:grid;grid-template-columns:1fr auto;gap:16px;align-items:baseline;cursor:pointer}
.essays button:hover .t{color:var(--amber)}
.essays .t{font-family:var(--sans);font-size:clamp(20px,2.2vw,28px);font-weight:500;letter-spacing:-.025em;transition:color .2s}
.essays .m{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);white-space:nowrap}
.essays .sub{grid-column:1/-1;color:var(--ink-2);font-size:15px;margin:0}
.prose p{margin:0 0 .8em}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(26,23,22,.4);text-underline-offset:3px}
.sub-h{font-size:clamp(20px,2vw,24px);margin:8px 0 16px;color:var(--ink)}
.card h3 a{text-decoration:none;border-bottom:1px solid rgba(26,23,22,.3)}
.card h3 a:hover{border-color:var(--ink)}
.card .prose{color:var(--ink-2);font-size:15px;flex:1}
.card .prose p{margin:0 0 .6em}
#project-list .card{display:block;padding:28px 0}
.project-copy{display:grid;grid-template-columns:minmax(180px,220px) 1fr;gap:clamp(24px,4vw,48px);align-items:start}
.project-copy h3{font-size:clamp(24px,2.4vw,32px);margin:0}
.project-copy .prose{padding-top:3px;font-size:15.5px;line-height:1.62;color:var(--ink-2)}
.project-copy .prose p{max-width:48ch;margin:0}
#notes .col,#contact .col{max-width:min(1040px,88vw)}
#notes .sec-head,#contact .sec-head,#contact .about-row,#contact .contact-list{max-width:660px}
.notes-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(28px,5vw,64px);border-top:0}
.notes-cards .note-card{display:flex;flex-direction:column;padding:0 0 26px}
.note-card .thumb{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:0;margin:0 0 18px;display:block;background:#2a2523}
.note-card h3{font-size:clamp(26px,3vw,38px);margin:0 0 8px}
.note-card p{margin:0 0 16px}
.linklist{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.linklist li{border-bottom:1px solid var(--line)}
.linklist a{display:block;padding:18px 0;text-decoration:none;font-family:var(--sans);font-size:clamp(18px,2vw,24px);font-weight:500;letter-spacing:-.02em;line-height:1.3;color:var(--ink)}
.linklist a:hover{color:var(--amber)}
.linklist .link-description{max-width:65ch;padding:0 0 18px;color:var(--ink-2)}
.linklist .link-description p{margin:0}
.about-row{display:flex;gap:28px;align-items:flex-start;margin:0 0 26px}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;flex:0 0 auto;border:1px solid var(--line)}
.about{margin:0;color:var(--ink-2);font-size:17px}
.about p{margin:0 0 .6em}
.about ul{margin:.2em 0 0;padding-left:1.2em}
.contact-list{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.contact-list a{font-family:var(--sans);font-size:clamp(19px,2vw,24px);font-weight:500;letter-spacing:-.02em;text-decoration:none;border-bottom:1px solid rgba(16,20,23,.35);padding-bottom:2px}
.contact-list .via{color:var(--mute);font-size:14px;margin-left:8px}
.fine{font-size:12.5px;line-height:1.75;color:var(--mute);max-width:62ch;margin-top:40px;padding-top:18px;border-top:1px solid var(--line)}
#contact .fine{max-width:none;columns:2;column-gap:clamp(32px,5vw,64px);column-rule:1px solid var(--line);orphans:3;widows:3}
.fine a{color:var(--ink-2);text-decoration:none;border-bottom:1px solid rgba(26,23,22,.18)} .fine a:hover{border-bottom-color:var(--ink)}


/* ---------- the reading page: a cool paper sheet held inside the room ---------- */
.panel{position:fixed;inset:0;z-index:60;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;background:rgba(3,7,10,.56)}
.panel[hidden]{display:none}
.panel-bar{position:sticky;top:0;z-index:2;display:flex;align-items:center;gap:16px;padding:14px clamp(34px,4.5vw,68px);margin-left:0;width:min(780px,64vw);box-sizing:border-box;background:var(--paper);border-bottom:1px solid rgba(16,22,26,.12);border-right:1px solid rgba(121,169,182,.24)}
.back-btn{background:var(--paper);border:1px solid rgba(16,22,26,.22);color:var(--paper-ink);min-height:44px;padding:9px 16px;border-radius:2px;cursor:pointer;font-size:14px}
.back-btn:hover{border-color:rgba(26,23,22,.6)}
.panel-kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--paper-mute)}
body.panel-open main{visibility:hidden}
body.panel-open .nav,body.panel-open .plate-ui,body.panel-open .plate-index,body.panel-open .ghost,body.panel-open .skip-btn{opacity:0!important;visibility:hidden;transition:opacity .3s}
.panel-body{background:var(--paper);color:var(--paper-ink);margin:0;width:min(780px,64vw);box-sizing:border-box;padding:clamp(40px,5vw,64px) clamp(34px,4.5vw,68px) 120px;font-size:18px;line-height:1.72;box-shadow:32px 0 96px rgba(0,6,10,.34);border-right:1px solid rgba(121,169,182,.24);min-height:100vh;overflow-wrap:anywhere}
.panel-body h2,.panel-body h3,.panel-body .note-expand summary{font-family:var(--serif)}
.panel-body h2{font-size:clamp(34px,4vw,58px);margin:0 0 .5em;line-height:1.04;letter-spacing:-.02em}
.panel-body h2 + .date,.panel-body .date{color:var(--paper-mute);font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;margin:-.2em 0 2em}
.panel-body h3{font-size:1.45em;margin:1.6em 0 .5em}
.panel-body h4{font-family:var(--sans);font-size:1.02em;margin:1.4em 0 .4em;color:var(--paper-ink)}
.panel-body h5{font-family:var(--sans);font-size:1.0em;font-style:italic;font-weight:500;margin:1.3em 0 .35em;color:var(--paper-ink2)}
.panel-body h6{font-family:var(--sans);font-size:.95em;font-weight:600;margin:1.2em 0 .3em}
.panel-body p{margin:0 0 1.1em}
.panel-body ul,.panel-body ol{padding-left:1.3em;margin:0 0 1.1em}
.panel-body li{margin-bottom:.45em}
.panel-body a{color:var(--paper-ink);text-decoration:underline;text-decoration-color:rgba(26,23,22,.35);text-underline-offset:3px}
.panel-body .note{background:rgba(16,22,26,.05);border:1px solid rgba(16,22,26,.14);border-radius:2px;padding:12px 16px;font-size:15px;color:var(--paper-ink2);margin:0 0 1.6em}
.panel-body .facts{display:grid;grid-template-columns:max-content 1fr;gap:6px 18px;font-size:15px;margin:0 0 1.6em;padding:16px 0;border-top:1px solid rgba(26,23,22,.14);border-bottom:1px solid rgba(26,23,22,.14)}
.panel-body .facts dt{color:var(--paper-mute);letter-spacing:.06em;text-transform:uppercase;font-size:12px;margin:0;padding-top:3px}
.panel-body .facts dd{margin:0}
.panel-body figure{margin:1.4em 0}
.panel-body figure img{width:100%;height:auto;border-radius:2px;display:block}
.panel-body figure figcaption{font-size:13px;color:var(--paper-mute);margin-top:8px}
.panel-body .imgs{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.panel-body .notes{margin-top:2.4em;padding-top:1em;border-top:1px solid rgba(26,23,22,.14);font-size:15.5px;color:var(--paper-ink2)}
.panel-body .notes ol{padding-left:1.4em}
.panel-body sup.fnref a{text-decoration:none;color:var(--paper-ink);font-weight:600;border-bottom:1px solid rgba(26,23,22,.35)}   /* no red text anywhere: footnote marks are ink */
.panel-body .date{color:var(--paper-mute);font-size:14px;margin:-.2em 0 1.6em}
.panel-body .qa .q{font-weight:600;color:var(--paper-ink);margin-bottom:.3em}
.panel-body .qa{margin:0 0 1.6em}
.panel-body figure .row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-start}
.panel-body figure .row img{flex:1 1 200px;width:auto;max-width:100%}
.panel-body figure img.sm,.panel-body figure .row img.sm{max-width:220px;width:auto;flex:0 0 auto}
.panel-body figure img.fig.sm{max-width:220px;width:auto}
.panel-body figure img.tall{max-width:320px;width:auto}
.panel-body figure .cap{font-size:13px;color:var(--paper-mute);margin:8px 0 0}
.panel-body .fnref{font-size:.8em}
.panel-body .notes li{margin-bottom:.6em}
.panel-body :is(.note-expand,.proj){border-top:1px solid rgba(26,23,22,.16)}
.panel-body :is(.note-expand,.proj):last-child{border-bottom:1px solid rgba(26,23,22,.16)}
.panel-body :is(.note-expand,.proj) summary{position:relative;padding:18px 44px 18px 0;list-style:none;cursor:pointer;font-family:var(--serif);font-size:1.12em;line-height:1.35}
.panel-body :is(.note-expand,.proj) summary::-webkit-details-marker{display:none}
.panel-body :is(.note-expand,.proj) summary::before,.panel-body :is(.note-expand,.proj) summary::after{content:"";position:absolute;right:4px;top:50%;width:14px;height:1px;background:currentColor;transition:transform .2s ease}
.panel-body :is(.note-expand,.proj) summary::after{transform:rotate(90deg)}
.panel-body :is(.note-expand,.proj)[open] summary::after{transform:rotate(0)}
.panel-body :is(.note-expand,.proj) .body{padding:2px 0 28px}


.panel-cue{position:fixed;right:clamp(20px,4vw,56px);bottom:clamp(20px,4vh,40px);max-width:30ch;font-size:15px;line-height:1.5;color:var(--paper-ink);opacity:0;transition:opacity .5s;pointer-events:none;padding:10px 14px;background:rgba(237,240,241,.94);border:1px solid rgba(16,22,26,.14);border-radius:2px}
.panel-cue.on{opacity:1}

/* ---------- no WebGL / reduced motion ---------- */
body.no-stage .station{height:auto} body.no-stage .station .sticky{height:auto;padding:120px var(--pad) 40px}
body.no-stage .plate-ui{position:static} body.no-stage .plate-ui .kick,body.no-stage .plate-ui .title,body.no-stage .plate-ui .spec,body.no-stage .plate-ui .read,body.no-stage .plate-ui .cap{position:static;opacity:1;transform:none;max-width:60ch;margin:0 0 14px}
body.no-stage .intro,body.no-stage .scale-mark{position:static;opacity:1;transform:none}
body.no-stage .travel,body.no-stage .ghost,body.no-stage .plate-index,body.no-stage .skip-btn,body.no-stage .hint{display:none}
body.is-reduced .station{height:120vh} body.is-reduced .travel{height:30vh}

/* ---------- phones ---------- */
@media (max-width:899px){
  .panel{background:var(--paper)}
  .panel-body{margin:0;width:auto;max-width:none;padding:34px var(--pad) 100px;box-shadow:none;min-height:100vh}
  .panel-bar{margin-left:0;width:auto;position:sticky;top:0;left:auto;right:auto;background:var(--paper);border-bottom:1px solid rgba(26,23,22,.1);padding:12px var(--pad)} .panel-bar .panel-kicker{display:block}
  .panel-cue{display:none}
  .column{background:var(--paper)} .column .col{max-width:none}
}
@media (max-width:1100px){ .card{grid-template-columns:1fr} .card h3,.card p,.card .meta,.card button{grid-column:1} }
@media (max-width:899px){
  .nav{padding:12px 14px;gap:10px} .nav .brand{font-size:17px;white-space:nowrap}
  .nav ul{gap:14px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-width:none} .nav ul::-webkit-scrollbar{display:none} .nav ul a{padding:6px 0;font-size:11px;white-space:nowrap}
  .station{height:calc(var(--vh,360)*.75vh);height:calc(var(--vh,360)*.75svh)} .travel{height:70vh;height:70svh}
  .station .sticky::before{background:radial-gradient(ellipse at 72% 42%,transparent 24%,rgba(7,10,13,.14) 63%,rgba(6,8,11,.48) 100%),linear-gradient(90deg,rgba(7,10,13,.72) 0%,rgba(7,10,13,.34) 42%,transparent 78%),linear-gradient(0deg,rgba(7,10,13,.62),transparent 42%)}
  .plate-ui .kick{top:76px} .plate-ui .title,.plate-ui .title.long{top:98px;font-size:clamp(30px,8.4vw,44px);max-width:74vw;--lines:2} .plate-ui .title.long{font-size:clamp(24px,6.7vw,34px);max-width:78vw}
  .plate-ui .spec{top:calc(98px + var(--titleH,90px) + 16px);max-width:76vw;white-space:normal} .plate-ui .read{top:calc(98px + var(--titleH,90px) + 54px)}
  .plate-ui .cap{font-size:15px;max-width:min(80vw,30ch);bottom:70px} .plate-ui .cap[data-side="br"],.plate-ui .cap[data-side="tr"]{left:var(--pad);right:auto;top:auto;bottom:70px}
  .plate-ui .tools{left:var(--pad);right:auto;bottom:auto;top:calc(98px + var(--titleH,90px) + 108px);align-items:flex-start}
  .intro{right:var(--pad);top:auto;max-width:none;bottom:34px} .intro h1{font-size:40px} .intro .lede{font-size:15px}
  .scale-mark{bottom:24%;font-size:36px} .hint{display:none} .skip-btn{top:auto;bottom:22px;right:16px;padding:8px 12px;font-size:12px}
  .ghost{font-size:120px} .plate-index{display:none}
  .about-row{flex-direction:column}
  .project-copy{grid-template-columns:1fr;gap:10px}.project-copy h3{margin-bottom:0}
  #notes,#contact{background:var(--paper)} #notes .col,#contact .col{max-width:none} .notes-cards{grid-template-columns:1fr;gap:32px} #contact .fine{columns:1;column-rule:0}
}
@media (max-width:460px){ .nav .brand{display:none} .nav{justify-content:flex-start;padding-left:12px;padding-right:12px} .nav nav,.nav ul{width:100%} .nav ul{justify-content:space-between;gap:clamp(6px,2.2vw,12px);overflow-x:visible} .nav ul a{font-size:clamp(8.5px,2.55vw,10px);letter-spacing:.04em} .skip-btn{bottom:auto;top:58px;right:14px} }
@media (prefers-reduced-motion:reduce){ .card,.card:hover{transform:none} .intro,.poster,#stage-canvas,.plate-ui .kick,.plate-ui .title,.plate-ui .spec,.plate-ui .cap{transition:none} }

/* ---- while the camera is inside a dark room (the full-size tunnel), the page's type turns to paper on a dark halo; the nav and the index take a dark scrim */
body.scene-dark .plate-ui .kick,body.scene-dark .plate-ui .spec,body.scene-dark .plate-ui .title,body.scene-dark .plate-ui .read{color:var(--paper);text-shadow:0 2px 18px rgba(8,10,12,.88)}
body.scene-dark .plate-ui .kick .sq{background:var(--accent)} body.scene-dark .plate-ui .read{border-color:rgba(237,240,241,.4)} body.scene-dark .plate-ui .read:hover{border-color:var(--paper)}
body.scene-dark .nav{background:linear-gradient(180deg,rgba(3,6,8,.9) 0,rgba(3,6,8,.46) 60%,rgba(3,6,8,0) 100%)} body.scene-dark .nav .brand{color:var(--paper);text-shadow:none} body.scene-dark .nav ul a{color:rgba(237,240,241,.6);text-shadow:none} body.scene-dark .nav ul a.is-active,body.scene-dark .nav ul a:hover{color:var(--paper);border-bottom-color:transparent}
body.scene-dark .plate-index{background:none} body.scene-dark .plate-index a{color:rgba(238,233,224,.55);text-shadow:0 1px 8px rgba(8,10,12,.75)} body.scene-dark .plate-index a.is-on{color:var(--paper)}
.plate-ui .kick,.plate-ui .spec,.plate-ui .title,.plate-ui .read,.nav,.nav .brand,.nav ul a,.plate-index,.plate-index a{transition-property:opacity,transform,color,background,border-color,text-shadow;transition-duration:.6s}