/* ============================================================
   UWW — TAPE ARCHIVE  ·  the deck half of the site
   Brutalist editorial · analog media archaeology · photocopy

   Loaded AFTER our-works.css, which owns the shared layer: the design
   tokens (retuned to this build's darker palette), the reset, body, the
   grain/vignette atmosphere and .grit. Everything that lived up here in
   the standalone build has moved there so the two halves cannot fight
   over `.grain`, `:root` or `body` — see "SHARED WITH THE DECK" there.
   ============================================================ */

/* ---------- WebGL canvas: the world ----------
   Pointer events are never needed on the canvas itself — picking is done
   by raycasting window-level pointer coords — so it can sit above the
   page during the finale without swallowing clicks on the index. */
/* z-index 4, not 1: the CRT wall occupies 2 and its front lettering 3, and the
   tapes have to be in FRONT of the pile. See the stack comment in our-works.css. */
#gl{position:fixed;inset:0;width:100vw;height:100vh;z-index:4;display:block;pointer-events:none;opacity:0}
/* the finale lifts it over the page content too */
body.gl-over #gl{z-index:6}

/* ---------- deck chrome: absent on the wall, in from the handoff onward ----------
   The wall opens bare with only its own HUD, cue and cursor. Everything here
   fades up when body.deck-in lands and then STAYS — deckQ never returns to 0
   once passed, so this is the site's chrome for the rest of the page. */
.deck-chrome{opacity:0;transition:opacity .55s ease .05s;pointer-events:none}
body.deck-in .deck-chrome{opacity:1;pointer-events:auto}
/* the decorative members stay untouchable in both states */
.rails.deck-chrome,.spine-r.deck-chrome,.wedge.deck-chrome,
body.deck-in .rails.deck-chrome,body.deck-in .spine-r.deck-chrome,
body.deck-in .wedge.deck-chrome{pointer-events:none}
/* Establishing the page at a position it never scrolled to must not ANIMATE
   into that state — there is nothing to animate from. Without this, a reload
   deep in the document showed the deck's cue and pager arrows fading out over
   half a second on top of the archive's own caption. Scoped to the deck chrome
   so the loader's lift and the wall's reveals are untouched. */
body.priming .deck-chrome,
body.priming .cue,
body.priming .pagearrow{ transition:none !important; }

/* ---- the deck's instrumentation retires with the deck ----
   .wedge reads "SELECTED WORK 01 / of twenty" and .strip carries the tape's
   ticker: both describe A SELECTED TAPE, and past the archive there is no
   longer one — the arch shows all twenty and the index is a table. Left up they
   read as stale UI frozen on whatever tape you last looked at, and the wedge's
   dark triangle sits at top-left over the FAQ's QUESTIONS headline. The rails
   and the spine are the same deck's frame. The nav and the corner crops stay:
   those belong to the site, not to the tape. */
body.deck-done .wedge,
body.deck-done .strip,
body.deck-done .rails,
body.deck-done .spine-r,
/* the arrows page the SHELF, and past the archive there is no shelf — the arch
   is spun by dragging, which its own caption says. deck-in never goes false
   once passed (the wall clamps it), so deckLive alone would leave them up. */
body.deck-done .pagearrow{ opacity:0 !important; pointer-events:none !important; }

/* .corner carries its own opacity:.5, which would out-order .deck-chrome and
   leave the brackets on during the wall — and then snap to a full 1 when the
   deck lands. Given its own pair so it fades 0 → .5. */
.corner.deck-chrome{opacity:0}
body.deck-in .corner.deck-chrome{opacity:.5;pointer-events:none}
/* the drag hint belongs to the deck too, but app.js owns .gone */
.cue{opacity:0}
body.deck-in .cue:not(.gone){opacity:1}

/* The wall draws its own crosshair cursor. The deck needs real affordances —
   grab, grabbing, pointer on the 3D shelf — so the native cursor comes back
   when the deck takes over and the crosshair stands down. */
body.deck-in{cursor:auto}
body.deck-in .cursor{display:none}

/* 2D fallback tape (no WebGL / context lost) */
.fallback{position:fixed;inset:0;z-index:1;display:none;place-items:center;pointer-events:none}
.fallback.on{display:grid}
.fallback .ftape{width:min(46vh,320px);box-shadow:14px 18px 0 rgba(16,15,14,.3);transform:rotate(-1.5deg);pointer-events:auto;cursor:pointer;border:1px solid #0a0a09}
.fallback .ftape img{display:block;width:100%}
.fallback .ftitle{position:fixed;left:50%;top:46%;transform:translate(-50%,-50%);z-index:-1;
  font-family:var(--disp);font-size:min(20vw,26vh);line-height:.8;letter-spacing:-.03em;
  text-transform:uppercase;opacity:.16;white-space:nowrap;pointer-events:none}

/* .grain and .vignette deliberately absent — the wall's copies in
   our-works.css cover the whole document, and a second pair at
   mix-blend-mode:multiply would compound into double-dark noise. */

.grit{background-image:var(--noise),linear-gradient(var(--ink),var(--ink));
  background-blend-mode:screen;background-size:180px 180px,100% 100%}
@supports (-webkit-background-clip:text) or (background-clip:text){
  .grit{-webkit-background-clip:text;background-clip:text;color:transparent}}

/* ---------- loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:var(--ink);color:var(--paper);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:26px}
.loader::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.loader .lglyph{width:74px;height:74px;background:var(--paper);color:var(--ink);font-family:var(--disp);
  font-size:56px;line-height:74px;text-align:center;transform:skewX(-11deg)}
.loader .lword{font-family:var(--mono);font-size:11px;letter-spacing:.5em;text-transform:uppercase;color:var(--grey-lt)}
.loader .lpct{font-family:var(--mono);font-size:15px;letter-spacing:.6em;font-variant-numeric:tabular-nums}
.loader .lbar{width:min(320px,60vw);height:3px;background:#2b2926;position:relative;overflow:hidden}
.loader .lbar i{position:absolute;inset:0;background:var(--red);transform-origin:left;transform:scaleX(0);transition:transform .35s ease}
.loader .lhint{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:#5c5850;text-transform:uppercase;opacity:0}
.loader.tracking .lhint{opacity:1}
.loader.tracking .lpct{animation:trackjit .12s steps(2) infinite}
@keyframes trackjit{50%{transform:translateX(2px)}}
.loader.done{pointer-events:none}

/* ---------- HUD chrome ---------- */
nav{position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;background:var(--ink);
  color:var(--paper);display:flex;align-items:center;gap:6px;padding:0 14px}
nav::after{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.18;mix-blend-mode:overlay;pointer-events:none}
.mark{display:flex;align-items:center;gap:9px;margin-right:18px;flex:0 0 auto}
.mark .glyph{width:30px;height:30px;background:var(--paper);color:var(--ink);font-family:var(--disp);
  font-size:22px;line-height:30px;text-align:center;transform:skewX(-11deg)}
.mark .wordmark{font-family:var(--mono);font-size:10px;letter-spacing:.34em;line-height:1.15;text-transform:uppercase}
.mark .wordmark b{display:block;font-weight:600}
.mark .wordmark span{display:block;color:var(--grey-lt);letter-spacing:.2em;font-size:8px}
.navlinks{display:flex;align-items:center;gap:2px;flex:1 1 auto;min-width:0;overflow:hidden;position:relative;z-index:1}
.navlinks a{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;
  color:#a5a199;text-decoration:none;padding:8px 13px;white-space:nowrap;border:1px solid transparent;transition:color .15s,border-color .15s;cursor:pointer}
.navlinks a:hover{color:var(--paper);border-color:#3a3733}
.navlinks a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.navtools{display:flex;align-items:center;gap:10px;flex:0 0 auto;position:relative;z-index:1}
.sndbtn{display:flex;align-items:center;gap:7px;background:none;border:1px solid #3d3a35;color:#8d8a82;
  padding:7px 10px;cursor:pointer;font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase}
.sndbtn:hover{color:var(--paper);border-color:#6c6862}
.sndbtn:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.sndbtn .bars{display:flex;gap:2px;align-items:flex-end;height:10px}
.sndbtn .bars i{width:2.5px;height:3px;background:#6c6862}
.sndbtn.on{color:var(--paper);border-color:var(--paper)}
.sndbtn.on .bars i{background:var(--red);animation:lvl .7s ease-in-out infinite alternate}
.sndbtn.on .bars i:nth-child(2){animation-delay:.15s}.sndbtn.on .bars i:nth-child(3){animation-delay:.3s}.sndbtn.on .bars i:nth-child(4){animation-delay:.45s}
@keyframes lvl{from{height:3px}to{height:10px}}
.reel{font-family:var(--mono);font-weight:600;font-size:10.5px;letter-spacing:.16em;background:var(--red);
  color:#fff;border:none;padding:9px 16px;cursor:pointer;text-transform:uppercase;transition:transform .12s;text-decoration:none;display:inline-block}
.reel:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 rgba(0,0,0,.55)}
.reel:focus-visible{outline:2px solid var(--paper);outline-offset:2px}

/* corner brackets */
.corner{position:fixed;width:16px;height:16px;z-index:48;pointer-events:none;opacity:.5}
.corner::before{content:"";position:absolute;inset:0;border:2px solid var(--ink)}
.corner.tl{top:calc(var(--nav-h) + 10px);left:10px}.corner.tl::before{border-right:none;border-bottom:none}
.corner.tr{top:calc(var(--nav-h) + 10px);right:10px}.corner.tr::before{border-left:none;border-bottom:none}
.corner.bl{bottom:calc(var(--foot-h) + 10px);left:10px}.corner.bl::before{border-right:none;border-top:none}
.corner.br{bottom:calc(var(--foot-h) + 10px);right:10px}.corner.br::before{border-left:none;border-top:none}
.rails{position:fixed;left:14px;top:50%;transform:translateY(-50%);z-index:48;pointer-events:none;
  display:flex;flex-direction:column;gap:26px;font-family:var(--mono);font-size:9px;letter-spacing:.2em;
  color:rgba(16,15,14,.38);text-transform:uppercase}
.spine-r{position:fixed;right:6px;top:50%;transform:translateY(-50%) rotate(180deg);z-index:48;
  writing-mode:vertical-rl;font-family:var(--mono);font-size:10px;letter-spacing:.5em;
  color:rgba(16,15,14,.4);text-transform:uppercase;pointer-events:none}

/* index wedge, top-left under nav */
.wedge{position:fixed;top:var(--nav-h);left:0;z-index:40;background:var(--ink);color:var(--paper);
  padding:14px 54px 22px 18px;clip-path:polygon(0 0,100% 0,0 100%);width:250px;height:158px;pointer-events:none}
.wedge .lbl{font-family:var(--mono);font-size:10px;letter-spacing:.36em;text-transform:uppercase}
.wedge .num{font-family:var(--disp);font-size:58px;line-height:.86;letter-spacing:-.02em;margin-top:2px}
.wedge .of{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--grey-lt);margin-top:-1px}

/* bottom strip */
.strip{position:fixed;left:0;right:0;bottom:0;height:var(--foot-h);z-index:47;background:var(--ink);
  color:#9c9890;display:flex;align-items:center;font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase}
.strip .cell{padding:0 14px;white-space:nowrap}.strip .cell.b{border-right:1px solid #2e2b28}
.ticker{flex:1 1 auto;overflow:hidden;border-right:1px solid #2e2b28;border-left:1px solid #2e2b28;height:100%;display:flex;align-items:center}
.ticker div{display:inline-block;white-space:nowrap;animation:slide 34s linear infinite;padding-left:100%}
@keyframes slide{to{transform:translateX(-100%)}}
.dot{display:inline-block;width:6px;height:6px;background:var(--red);border-radius:50%;margin-right:7px;vertical-align:middle;animation:blink 1.4s steps(1) infinite}
@keyframes blink{50%{opacity:.15}}
.marks{display:flex;gap:3px;padding:0 12px}
.marks i{display:block;width:7px;height:3px;background:#3e3b37;cursor:pointer;border:none;padding:0}
.marks i.on{background:var(--red);height:9px}

/* scroll cue */
.cue{position:fixed;left:50%;bottom:calc(var(--foot-h) + 12px);transform:translateX(-50%);z-index:46;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--ink);
  background:rgba(215,211,201,.88);padding:8px 16px;border:1px solid rgba(16,15,14,.25);
  display:flex;align-items:center;gap:10px;transition:opacity .6s;pointer-events:none}
.cue::after{content:"";width:1px;height:22px;background:var(--ink);animation:cueline 1.6s ease-in-out infinite}
@keyframes cueline{0%,100%{transform:scaleY(.3);transform-origin:top}50%{transform:scaleY(1)}}
.cue.gone{opacity:0}

/* ---------- page content (scrolls above the canvas) ---------- */
main{position:relative;z-index:5}   /* above #gl (4) — see the stack in our-works.css */
/* main spans the whole document at z5, so its own box sits over the fixed wall
   (z2) and swallows the pointer everywhere the wall wants it — .type-hit above
   all. It carries no pixels of its own, so it takes no pointer either; every
   real child opts back in. .scroll-track is the exception: it is pure spacer
   and must stay transparent so OUR WORKS can be hovered through it. */
main{pointer-events:none}
main > :not(.scroll-track){pointer-events:auto}

/* hero */
.hero{position:relative;display:flex;align-items:center;justify-content:flex-start;pointer-events:none}
.hero-meta{margin-left:max(9.5vw,128px);margin-bottom:6vh;text-align:left;max-width:290px;pointer-events:auto}
.hero-meta .hm-cat{font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--red);font-weight:600}
.hero-meta .hm-tag{font-family:var(--ui);font-weight:500;font-size:clamp(13px,1.4vw,16px);max-width:28ch;margin:12px 0 0;color:#33312c;line-height:1.5}
.hero-meta .hm-line{overflow:hidden}
/* the gap lives on the MASK, not the text: inside an overflow:hidden box the
   margin would ride up with the line and the hint would leave from 16px lower
   than it sits */
.hero-meta .hm-line--hint{margin-top:16px}
.hero-meta .hm-hint{font-family:var(--mono);font-size:9px;letter-spacing:.3em;color:var(--grey);text-transform:uppercase;margin-top:0;line-height:1.8}
.hero-meta .hm-hint b{color:var(--red);font-weight:600}
.pagearrow{position:fixed;top:50%;transform:translateY(-50%);z-index:20;width:58px;height:42px;
  background:var(--ink);color:var(--paper);border:2px solid var(--ink);cursor:pointer;display:grid;place-items:center;
  font-family:var(--mono);font-size:17px;line-height:1;box-shadow:5px 5px 0 rgba(16,15,14,.28);transition:background .15s,opacity .4s}
.pagearrow:hover{background:var(--red);border-color:var(--red)}
.pagearrow:focus-visible{outline:3px solid var(--red);outline-offset:4px}
.pagearrow.prev{left:clamp(10px,3vw,46px)}.pagearrow.next{right:clamp(10px,3vw,46px)}
.pagearrow.gone{opacity:0;pointer-events:none}

/* practice sections */
.block{min-height:170vh;position:relative}
.block .pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;padding:0 6vw}
.block .copy{max-width:520px;pointer-events:auto}
.block.right .pin{justify-content:flex-end}
.block.center .pin{justify-content:center;text-align:center}
.block.center .copy{max-width:640px}
.eyebrow{font-family:var(--mono);font-size:10px;letter-spacing:.4em;text-transform:uppercase;color:var(--grey);margin-bottom:16px}
.eyebrow em{font-style:normal;color:var(--red);font-weight:600}
.block h2{font-family:var(--disp);font-size:clamp(46px,7.5vw,110px);line-height:.86;letter-spacing:-.02em;
  text-transform:uppercase;margin:0 0 22px;text-wrap:balance}
.block h2 .ln{display:block;overflow:hidden}
.block h2 .ln>span{display:inline-block;will-change:transform}
.block p{font-size:clamp(14px,1.2vw,16.5px);line-height:1.65;color:#26241f;margin:0 0 14px;max-width:56ch}
.block.center p{margin-inline:auto}
.chip{display:inline-block;font-family:var(--mono);font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;
  border:1.5px solid var(--ink);padding:8px 14px;margin-top:12px;position:relative;background:rgba(215,211,201,.7)}
.chip.strike::after{content:"";position:absolute;left:6px;right:6px;top:50%;height:2px;background:var(--red);transform:rotate(-3deg)}
.chip.red{border-color:var(--red);color:var(--red);font-weight:600}

/* archive section */
.archive{min-height:220vh;position:relative}
.archive .pin{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:calc(var(--foot-h) + 42px)}
.archive .arch-hint{font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--grey);pointer-events:none}
.archive .arch-hint b{color:var(--red)}
.archive .arch-count{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--grey-lt);margin-top:8px;text-transform:uppercase}

/* index list — the calm utility beat */
.indexsec{position:relative;background:var(--paper);padding:14vh 6vw 10vh;box-shadow:0 -1px 0 var(--ink)}
.indexsec::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.14;mix-blend-mode:multiply;pointer-events:none}
.sechead{font-family:var(--disp);font-size:clamp(40px,6vw,84px);line-height:.88;text-transform:uppercase;
  letter-spacing:-.02em;margin:0 0 8px}
.subhead{font-family:var(--mono);font-size:10px;letter-spacing:.34em;text-transform:uppercase;color:var(--grey);margin-bottom:36px}
.subhead em{font-style:normal;color:var(--red)}
.idx-table{width:100%;border-collapse:collapse;position:relative}
.idx-row{display:grid;grid-template-columns:64px 1fr 180px 70px 110px;gap:14px;align-items:baseline;
  width:100%;text-align:left;background:none;border:none;border-bottom:1px solid rgba(16,15,14,.3);
  padding:13px 4px;cursor:pointer;font-family:inherit;color:inherit;transition:background .15s}
.idx-row:first-child{border-top:2px solid var(--ink)}
.idx-row:hover{background:rgba(16,15,14,.06)}
.idx-row:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.idx-row .no{font-family:var(--mono);font-size:11px;letter-spacing:.2em;color:var(--grey)}
.idx-row .ti{font-family:var(--disp);font-size:clamp(18px,2.2vw,30px);letter-spacing:0;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idx-row .ty,.idx-row .yr{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--grey)}
.idx-row .stt{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;font-weight:600}
.idx-row .stt.live{color:var(--red)}
.idx-row .stt.dim{color:var(--grey-lt)}
.idx-row:hover .ti{color:var(--red)}
.idx-row.blankrow .ti{color:var(--grey-lt)}

/* FAQ */
.faq{position:relative;background:var(--paper);padding:10vh 6vw 12vh}

/* ---- the utility sections stop at a measure ----
   6vw of padding is a proportion, not a limit: on a 2560px screen the index
   rows ran 2250px wide, which put a tape's title at the far left and its year
   and status at the far right with two feet of empty paper between them —
   nothing reads as one row any more. The FAQ questions had the same problem.
   Everything above is full-bleed by design because it is a SCENE; these two are
   documents, and documents get a measure. */
.indexsec > *, .faq > *{ max-width:1180px; margin-inline:auto; }
.faq .qa{border-bottom:1px solid rgba(16,15,14,.3)}
.faq .qa:first-of-type{border-top:2px solid var(--ink)}
.faq .qa button{width:100%;background:none;border:none;text-align:left;display:flex;justify-content:space-between;
  align-items:center;gap:16px;padding:18px 4px;cursor:pointer;font-family:var(--ui);font-weight:600;
  font-size:clamp(15px,1.5vw,19px);color:var(--ink)}
.faq .qa button:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.faq .qa button .ic{font-family:var(--mono);color:var(--red);flex:0 0 auto;transition:transform .25s}
.faq .qa[data-open] button .ic{transform:rotate(45deg)}
.faq .qa .ans{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq .qa .ans p{max-width:66ch;font-size:15px;line-height:1.65;color:#26241f;margin:0 4px 20px}

/* contact */
.contact{position:relative;background:var(--ink);color:var(--paper);padding:14vh 6vw;text-align:center}
.contact::before{content:"";position:absolute;inset:0;background-image:var(--noise);opacity:.16;mix-blend-mode:overlay;pointer-events:none}
.contact .sechead{color:var(--paper)}
.contact .sechead .red{color:var(--red)}
.contact p{max-width:52ch;margin:18px auto 30px;color:#a5a199;font-size:15.5px;line-height:1.6}
.contact .reel{font-size:13px;padding:16px 34px;position:relative;z-index:1}
.contact .alt{display:block;margin-top:22px;font-family:var(--mono);font-size:10px;letter-spacing:.3em;
  color:var(--grey-lt);text-transform:uppercase}
.contact .alt a{color:var(--paper);text-decoration:none;border-bottom:1px solid var(--red)}
.contact .alt a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* footer */
footer{background:var(--ink);color:#9c9890;padding:0 6vw 60px;position:relative}
footer .frow{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;
  border-top:1px solid #2e2b28;padding-top:22px;font-family:var(--mono);font-size:9.5px;letter-spacing:.24em;text-transform:uppercase}
footer a{color:#9c9890;text-decoration:none}
footer a:hover{color:var(--paper)}
footer a:focus-visible{outline:2px solid var(--red);outline-offset:2px}

/* ---------- project file overlay ---------- */
.overlay{position:fixed;inset:0;z-index:70;background:var(--paper);display:none;overflow-y:auto;overscroll-behavior:contain}
.overlay.open{display:block;animation:cut .18s steps(2)}
@keyframes cut{0%{opacity:0}50%{opacity:.4}100%{opacity:1}}
.ov-surface{position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(70% 50% at 20% 10%,rgba(0,0,0,.10),transparent 60%),radial-gradient(60% 60% at 85% 90%,rgba(0,0,0,.14),transparent 62%)}
.ov-inner{position:relative;max-width:1180px;margin:0 auto;padding:40px 26px 90px}
.ov-top{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;border-bottom:2px solid var(--ink);padding-bottom:9px}
.ov-file{font-family:var(--mono);font-size:11px;letter-spacing:.3em;text-transform:uppercase}
.ov-file em{font-style:normal;color:var(--red)}
.closeb{width:52px;height:38px;background:var(--red);color:#fff;border:none;cursor:pointer;font-family:var(--mono);
  font-size:15px;box-shadow:4px 4px 0 rgba(16,15,14,.35);flex:0 0 auto}
.closeb:hover{background:var(--ink)}
.closeb:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.ov-hero{position:relative;margin-top:22px}
.ov-frame{position:relative;background:#0c0b0a;border:1px solid #0a0a09;padding:10px;box-shadow:16px 18px 0 rgba(16,15,14,.28)}
.ov-screen{position:relative;aspect-ratio:2/1;overflow:hidden;background:#0a0a09;border-radius:10px/6px}
.ov-screen svg{position:absolute;inset:0;width:100%;height:100%}
.ov-screen video,.ov-screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.42) 0 1px,transparent 1px 3px);mix-blend-mode:multiply}
.glare{position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(122deg,rgba(255,255,255,.16) 0 26%,transparent 40%),radial-gradient(120% 80% at 50% 120%,rgba(0,0,0,.7),transparent 60%)}
.ov-title{position:absolute;left:-1.5vw;bottom:-2.2vw;z-index:3;pointer-events:none;font-family:var(--disp);
  font-size:clamp(48px,10.5vw,156px);line-height:.8;letter-spacing:-.03em;text-transform:uppercase;max-width:118%}
.ov-tagline{margin-top:calc(2.2vw + 26px);font-family:var(--disp);font-size:clamp(20px,3vw,40px);
  line-height:.98;letter-spacing:-.01em;text-transform:uppercase;max-width:24ch}
.ov-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(126px,1fr));margin:26px 0 0;
  border-top:2px solid var(--ink);border-bottom:1px solid var(--ink)}
.ov-meta div{padding:11px 12px;border-right:1px solid rgba(16,15,14,.28)}
.ov-meta div:last-child{border-right:none}
.ov-meta dt{font-family:var(--mono);font-size:9px;letter-spacing:.26em;color:var(--grey-lt);text-transform:uppercase;margin:0}
.ov-meta dd{margin:6px 0 0;font-family:var(--mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.ov-meta .red dd{color:var(--red)}
.ov-visit{display:inline-block;margin-top:22px;font-family:var(--mono);font-size:11px;letter-spacing:.24em;
  text-transform:uppercase;background:var(--ink);color:var(--paper);text-decoration:none;padding:13px 24px;
  box-shadow:5px 5px 0 rgba(16,15,14,.28)}
.ov-visit:hover{background:var(--red)}
.ov-visit:focus-visible{outline:3px solid var(--red);outline-offset:3px}
.ov-body{margin-top:26px;max-width:70ch;font-size:15.5px;line-height:1.68;color:#26241f}
.ov-body p{margin:0 0 1.1em}
.ov-body h4{font-family:var(--mono);font-size:10px;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-lt);margin:0 0 8px}
.ov-body ul{margin:0 0 1.2em;padding-left:18px}
.ov-body li{margin-bottom:5px}
.ov-nav{display:flex;justify-content:space-between;gap:12px;margin-top:44px;border-top:2px solid var(--ink);padding-top:14px}
.ov-nav button{background:none;border:none;cursor:pointer;text-align:left;padding:6px 0;font-family:var(--mono);
  font-size:10px;letter-spacing:.24em;color:var(--grey);text-transform:uppercase}
.ov-nav button strong{display:block;font-family:var(--disp);font-size:clamp(18px,2.4vw,30px);letter-spacing:-.01em;
  color:var(--ink);margin-top:5px;font-weight:400}
.ov-nav button:hover strong{color:var(--red)}
.ov-nav button.r{text-align:right}
.ov-nav button:focus-visible{outline:3px solid var(--red);outline-offset:3px}

/* ---------- responsive ---------- */
@media (max-width:900px){
  :root{--nav-h:52px}
  .navlinks{display:none}
  .wedge{width:200px;height:126px;padding:11px 42px 16px 13px}
  .wedge .num{font-size:44px}
  .rails,.spine-r{display:none}
  .pagearrow{width:48px;height:38px}
  .block .pin{padding:0 7vw}
  .idx-row{grid-template-columns:44px 1fr 60px;gap:10px}
  .idx-row .ty,.idx-row .stt{display:none}
  .ov-inner{padding:30px 16px 70px}
  .ov-screen{aspect-ratio:4/3}
}
@media (max-width:560px){
  :root{--nav-h:50px;--foot-h:40px}
  .mark{margin-right:8px}
  .mark .glyph{width:26px;height:26px;font-size:19px;line-height:26px}
  .mark .wordmark{font-size:9px;letter-spacing:.26em}
  .mark .wordmark span{font-size:7px;letter-spacing:.16em}
  .reel{padding:8px 11px;font-size:9px;letter-spacing:.12em}
  .sndbtn{padding:6px 8px}
  .sndbtn .lab{display:none}
  .wedge{width:168px;height:104px;padding:9px 36px 12px 11px}
  .wedge .num{font-size:38px}
  .strip .cell{padding:0 9px;font-size:9px;letter-spacing:.14em}
  .marks{display:none}
  .hero-meta{margin-left:16px;max-width:60vw}
  .block h2{font-size:clamp(40px,13vw,64px)}
  .archive .pin{padding-bottom:calc(var(--foot-h) + 30px)}
  .ov-title{font-size:clamp(34px,13vw,74px);left:-2vw;bottom:-3.5vw}
  .ov-tagline{margin-top:calc(3.5vw + 20px);font-size:clamp(19px,6.4vw,30px);max-width:100%}
  .ov-meta{grid-template-columns:1fr 1fr}
  .ov-meta div:nth-child(2n){border-right:none}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .grain{animation:none}
  .dot,.cue::after,.sndbtn.on .bars i{animation:none}
  .ticker div{animation-duration:120s}
  .block h2 .ln>span{transform:none!important}
}

/* ---------- hosted-build captures in the project file ----------
   The screen grows a strip of dark glass under the picture, so the giant title
   bites glass instead of the capture: Pill Content's fictional-status band runs
   along the bottom of its frames and must stay readable. The picture keeps its
   full 2:1 (84.03% of a 2:1.19 box) at every width, which also stops the mobile
   4:3 screen from cropping a third of it. */
.ov-screen.is-cap{aspect-ratio:2/1.19}
.ov-screen.is-cap video,.ov-screen.is-cap img{height:84.03%;bottom:auto}
.ov-screen.is-cap .scan{opacity:.55}