/* ═══════════════════════════════════════════════════════════════════════════
   THE THEATRE — the shared design system for thefrvrclub.com
   Extracted from the front door (index.html), which stays untouched.

   THE LAW OF THE FRONT DOOR, carried into every room:
     1. The picture IS the page. Copy sits INSIDE the plate, never on a slab
        laid over it.
     2. Nothing has a hard rectangular edge. Every plate dissolves to black on
        all four sides with composited gradient masks.
     3. Red is the only colour. Everything else is black, chrome, white.
     4. The words whisper. Space Mono at 9-13px with wide tracking carries all
        the labels; Anton carries exactly one statement per act.
     5. Light is slow. Nothing snaps. 0.8s-5.5s eases, always.
     6. The glass room is the brand — so every panel on the site is a small
        glass box standing in the dark. One metaphor, top to bottom.

   Load order: theatre.css then the page's own <style> for act-specific anchors.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────────────────────── */
:root{
  --void:#050506; --black:#0A0A0B; --pit:#0E0E10;
  --red:#D42A2A; --red-bright:#E4433D; --crimson:#8E1212;
  --red-glow:rgba(212,42,42,.38); --red-soft:rgba(212,42,42,.12);
  --white:#F4F3F0; --dim:#A0A0A6; --ash:#6E6E74;
  --chrome-hi:#ECEEF2; --chrome-mid:#9AA0A8; --chrome-lo:#565A60;
  /* The old ramp dropped to #565A60 across the middle, which on black made the
     lower half of a 170px letter fade to nothing. Chrome should read as
     polished metal catching a light, never as type disappearing — so the
     darkest band now stops well above the background. */
  --chrome-grad:linear-gradient(177deg,#FFFFFF 3%,var(--chrome-hi) 24%,#9CA2AA 50%,#C6CBD1 63%,#F6F7F9 88%,#FFFFFF 100%);
  --line:rgba(244,243,240,.10);
  --line-soft:rgba(244,243,240,.055);

  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-body:'Inter',system-ui,-apple-system,sans-serif;
  --font-mono:'Space Mono',ui-monospace,monospace;

  /* FIVE SIZES. NOT ELEVEN. The display size is deliberately uncapped at the
     top: a hard max means that on a 27" monitor the headline SHRINKS relative
     to the frame, exactly where it should be taking the room. Anton is
     condensed, so 11vw fills the width without becoming a wall. */
  --t-display:clamp(46px,11vw,236px);
  --t-head:clamp(28px,4.2vw,76px);
  --t-lede:clamp(17px,1.5vw,23px);
  --t-body:clamp(15px,1.05vw,17px);
  --t-label:clamp(10px,.78vw,12px);

  /* TRACKING IS DERIVED FROM SIZE — four values, no exceptions. This is what
     separates typeset from typed: big type closes up, small type opens out. */
  --ls-display:-.015em;
  --ls-head:-.005em;
  --ls-body:.005em;
  --ls-label:.3em;

  /* ONE SPACING SCALE. Arbitrary padding is the first thing an eye reads as
     cheap, before it reads a single word. */
  --s1:8px; --s2:16px; --s3:28px; --s4:48px; --s5:84px; --s6:144px;
  --s7:min(26vh,240px);

  --ease:cubic-bezier(.16,1,.3,1);
  --slow:.9s;
  --maxw:1280px;
  --gutter:clamp(20px,5vw,56px);
}
/* ONE chromatic accent. #FF3B30 was Apple's iOS system red — a borrowed value
   reads as borrowed — so the bright state is now derived from our own red. */
@supports (color: color-mix(in oklab, red, white)){
  :root{--red-bright:color-mix(in oklab,var(--red) 72%,white)}
}

*{margin:0;padding:0;box-sizing:border-box}
/* `hidden` is a promise the UA stylesheet makes at the lowest possible
   specificity, so ANY class that sets display quietly breaks it — which is
   exactly what .door{display:inline-flex} did to the pay-half button. */
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;
  scrollbar-width:thin;scrollbar-color:var(--crimson) var(--void)}
body{background:var(--black);color:var(--white);font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
::selection{background:var(--red);color:var(--white)}
a{color:inherit;text-decoration:none}
img,video,svg{max-width:100%;display:block}
:focus-visible{outline:1px solid var(--red-bright);outline-offset:3px}

/* A cut between rooms, not a page load. Ignored where unsupported. */
@view-transition{navigation:auto}
/* Cam loves the curtain, so the curtain IS the navigation: every room arrives
   by being pulled across the last one, left to right, with a crimson leading
   edge — the same gesture as the menu. The old page simply holds underneath
   instead of fading, which is what makes it read as cloth moving over a room
   rather than one picture dissolving into another. */
::view-transition-old(root){animation:curtainHold .78s linear both}
::view-transition-new(root){animation:curtainPull .78s cubic-bezier(.72,0,.24,1) both}
@keyframes curtainHold{from{transform:none}to{transform:translateX(-7%)}}
@keyframes curtainPull{
  from{clip-path:inset(0 0 0 100%)}
  to{clip-path:inset(0 0 0 0)}}

/* ── 2 · THE FILM LAYER ─────────────────────────────────────────────────────
   Fixed over everything: real-feeling 35mm grain plus the house vignette.
   The grain is one inline turbulence tile stepped around so it flickers the
   way film does — no image request, no payload.                              */
.filmlayer{position:fixed;inset:0;z-index:900;pointer-events:none}
.filmlayer::before{content:'';position:absolute;inset:-180px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.52'/%3E%3C/svg%3E");
  opacity:.085;mix-blend-mode:overlay;animation:grain 1.1s steps(6) infinite;will-change:transform}
.filmlayer::after{content:'';position:absolute;inset:0;
  background:radial-gradient(118% 92% at 50% 44%,transparent 36%,rgba(5,5,6,calc(var(--house,.44))) 78%,rgba(5,5,6,.84) 100%);
  transition:background .9s linear}
@keyframes grain{
  0%{transform:translate(0,0)}      17%{transform:translate(-14px,9px)}
  34%{transform:translate(11px,-13px)} 51%{transform:translate(-8px,-7px)}
  68%{transform:translate(13px,11px)}  85%{transform:translate(-11px,6px)}
  100%{transform:translate(0,0)}}
@media(prefers-reduced-motion:reduce){.filmlayer::before{animation:none;opacity:.055}}

/* ── 3 · THE HOUSE (nav) ────────────────────────────────────────────────────
   Almost nothing until you scroll, then a thin black bar with a chrome
   hairline. The front door has no nav; the rooms do.                         */
.house{position:fixed;top:0;left:0;right:0;z-index:800;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gutter);
  background:linear-gradient(180deg,rgba(5,5,6,.92),rgba(5,5,6,.34) 58%,transparent);
  transition:padding .4s var(--ease),background .4s var(--ease),border-color .4s var(--ease);
  border-bottom:1px solid transparent}
.house.sunk{padding:11px var(--gutter);background:rgba(8,8,9,.93);
  backdrop-filter:blur(14px) saturate(.9);-webkit-backdrop-filter:blur(14px) saturate(.9);
  border-bottom-color:var(--line-soft)}
.house .mark{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.house .mark img{width:clamp(84px,9vw,118px);height:auto;opacity:.82;
  transition:opacity .3s ease,filter .3s ease}
.house .mark:hover img{opacity:1;filter:drop-shadow(0 0 14px rgba(212,42,42,.4))}
.rooms{display:flex;align-items:center;gap:clamp(14px,2vw,26px);list-style:none}
.rooms a{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(244,243,240,.56);
  transition:color .3s ease,text-shadow .3s ease}
.rooms a:hover,.rooms a:focus-visible{color:var(--red-bright);
  text-shadow:0 0 7px rgba(255,59,48,.6),0 0 20px rgba(212,42,42,.4)}
.rooms a[aria-current]{color:var(--white)}
/* the underline marks the room you're standing in — but the CTA already has a
   border, so adding a rule under it just looks like a broken box */
.rooms a[aria-current]:not(.key)::after{content:'';display:block;height:1px;margin-top:5px;
  background:var(--red);box-shadow:0 0 8px var(--red-glow)}
.rooms a.key[aria-current]{background:var(--red)}
.rooms a.key{border:1px solid var(--red);color:var(--white);padding:7px 14px;
  transition:background .28s ease,box-shadow .28s ease}
.rooms a.key:hover{background:var(--red);text-shadow:none;box-shadow:0 0 28px var(--red-glow)}

/* the curtain — mobile menu, sweeps in like stage velvet */
.pull{display:none;background:none;border:0;cursor:pointer;padding:8px;
  flex-direction:column;gap:5px;width:34px}
.pull span{display:block;height:1px;background:var(--chrome-hi);
  transition:transform .4s var(--ease),opacity .25s ease}
.pull[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.pull[aria-expanded="true"] span:nth-child(2){opacity:0}
.pull[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.curtain{position:fixed;inset:0;z-index:790;
  background:linear-gradient(104deg,var(--void),#120606 58%,var(--void));
  transform:translateX(100%);transition:transform .62s var(--ease);
  display:flex;flex-direction:column;justify-content:center;gap:4px;
  padding:0 var(--gutter);visibility:hidden}
.curtain.open{transform:none;visibility:visible}
.curtain::before{content:'';position:absolute;top:0;bottom:0;left:0;width:1px;
  background:var(--red);box-shadow:0 0 40px 6px rgba(212,42,42,.5)}
.curtain a{font-family:var(--font-display);font-size:clamp(30px,8.5vw,52px);
  text-transform:uppercase;letter-spacing:.02em;line-height:1.26;
  color:rgba(244,243,240,.72);transition:color .3s ease,transform .45s var(--ease);
  opacity:0;transform:translateX(26px)}
.curtain.open a{opacity:1;transform:none;transition:opacity .5s var(--ease) var(--d,0s),transform .6s var(--ease) var(--d,0s),color .3s ease}
.curtain a:hover{color:var(--red-bright)}
.curtain .fine{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash);margin-top:26px}
@media(max-width:900px){
  .rooms{display:none}
  .pull{display:flex}
}

/* ── 4 · THE ACT ────────────────────────────────────────────────────────────
   One act = one held shot. The plate sticks while the copy walks through it,
   so the camera never moves and the words do.                                */
.act{position:relative;isolation:isolate}
.act .plate{position:sticky;top:0;height:100dvh;overflow:hidden;z-index:0;
  background:var(--black)}
.act .plate > img,.act .plate > video{width:100%;height:100%;object-fit:cover;
  /* WHERE THE CROP SITS. A 21:9 plate inside a tall viewport loses most of its
     width, so without an anchor the subject gets cropped out of frame. Each
     plate names the point the crop should hold on to. */
  object-position:var(--plate-x,50%) var(--plate-y,50%);
  /* the law of no hard edges — both axes, composited */
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-size:100% 100%;mask-size:100% 100%;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 6%,#000 17%,#000 83%,rgba(0,0,0,.55) 94%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 4%,#000 13%,#000 87%,rgba(0,0,0,.5) 96%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,rgba(0,0,0,.55) 6%,#000 17%,#000 83%,rgba(0,0,0,.55) 94%,transparent 100%),linear-gradient(90deg,transparent 0,rgba(0,0,0,.5) 4%,#000 13%,#000 87%,rgba(0,0,0,.5) 96%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transform:scale(1.04);transition:transform 1.6s var(--ease),opacity 1.1s ease}
/* the shot breathes: a 2% push over the life of the act, driven from JS */
.act .plate > img.push,.act .plate > video.push{transform:scale(1.085)}
/* The spot, and the scrim.
   The front door never puts copy over detail — the words sit in the black
   above the glass box. A scrolling page cannot choose its background that
   carefully, so the plate carries its own: a directional wash that lays a dark
   bed under the type on the side the type lives on. This is the difference
   between type ON a picture and type IN one. */
.act .plate::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(58% 44% at 50% 28%,var(--red-soft),transparent 74%),
    linear-gradient(97deg,rgba(5,5,6,.90) 0%,rgba(5,5,6,.76) 24%,rgba(5,5,6,.42) 48%,rgba(5,5,6,.10) 72%,transparent 88%),
    linear-gradient(180deg,rgba(5,5,6,.62) 0%,transparent 22%,transparent 72%,rgba(5,5,6,.72) 100%)}
/* centred acts get a centred bed instead of a left-hand one */
.act:has(.beat.mid) .plate::after{
  background:
    radial-gradient(58% 44% at 50% 28%,var(--red-soft),transparent 74%),
    radial-gradient(68% 56% at 50% 50%,rgba(5,5,6,.82),rgba(5,5,6,.34) 62%,transparent 84%),
    linear-gradient(180deg,rgba(5,5,6,.62) 0%,transparent 24%,transparent 70%,rgba(5,5,6,.74) 100%)}
@media(max-width:860px){
  /* portrait: the bed comes up from the floor, the way a stage lights one */
  .act .plate::after,.act:has(.beat.mid) .plate::after{
    background:
      radial-gradient(76% 40% at 50% 24%,var(--red-soft),transparent 76%),
      linear-gradient(180deg,rgba(5,5,6,.80) 0%,rgba(5,5,6,.34) 18%,rgba(5,5,6,.62) 40%,rgba(5,5,6,.70) 56%,rgba(5,5,6,.88) 80%,rgba(5,5,6,.96) 100%)}
}

/* the copy that walks through the held shot */
.act .script{position:relative;z-index:2;margin-top:-100dvh;
  padding:0 var(--gutter)}
.beat{min-height:88dvh;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--maxw);margin:0 auto;padding:9dvh 0}
.beat.tight{min-height:auto;padding:9dvh 0}
/* the first beat of an act has a fixed nav above it — clear it, or display
   type climbs straight into the wordmark */
.act .script .beat:first-child{padding-top:max(17dvh,150px)}
/* a beat can sit left, centre or right inside the picture */
.beat.mid{text-align:center;align-items:center}
.beat.right{align-items:flex-end;text-align:right}


/* ── 4b · PLATE SWAP ────────────────────────────────────────────────────────
   Wide motion on a big screen, the tall still on a phone. The video carries
   preload="none" and no autoplay attribute, so a phone never fetches a file
   it will not show — theatre.js starts whichever one is actually displayed.  */
.plate > .wide{display:none}
.plate > .tall{display:block}
/* Width alone is the wrong question. A 21:9 plate dropped into a PORTRAIT
   viewport (a tablet held upright, a narrow tall window) has to lose most of
   its width to cover, and the subject is the first thing cropped out. So the
   wide plate is only used where the frame is actually landscape; anything
   taller than it is wide gets the portrait plate, at any width. */
@media(min-width:860px) and (min-aspect-ratio:1/1){
  .plate > .wide{display:block}
  .plate > .tall{display:none}
}

/* a plain room with no plate behind it — black box, for the dense pages */
.blackbox{position:relative;padding:var(--s7) var(--gutter)}
.blackbox > .wrap{max-width:var(--maxw);margin:0 auto}

/* ── 5 · THE VOICE ──────────────────────────────────────────────────────── */
.whisper{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ash);
  display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s3);line-height:.9}
.whisper::before{content:'';width:clamp(18px,4vw,34px);height:1px;background:var(--red);
  flex:0 0 auto;box-shadow:0 0 8px var(--red-glow)}
.beat.mid .whisper{justify-content:center}
.beat.right .whisper{flex-direction:row-reverse}

.statement{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:var(--t-display);line-height:.84;letter-spacing:var(--ls-display);
  text-wrap:balance;text-shadow:0 2px 40px rgba(0,0,0,.92)}
.statement.sm{font-size:var(--t-head);line-height:.92;letter-spacing:var(--ls-head)}
.chrome{background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;
  color:transparent}
.redtxt{color:var(--red)}

/* the light that travels through the letters — the front door's own move */
.sweep{position:relative;display:inline-block}
.sweep::after{content:attr(data-t);position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 40%,rgba(255,255,255,.9) 50%,transparent 60%);
  background-size:300% 100%;background-repeat:no-repeat;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:sweep 6s ease-in-out infinite}
@keyframes sweep{0%{background-position:190% 0}62%,100%{background-position:-90% 0}}
@media(prefers-reduced-motion:reduce){.sweep::after{animation:none;opacity:0}}

.read{font-family:var(--font-body);font-weight:300;
  font-size:var(--t-lede);line-height:1.6;letter-spacing:var(--ls-body);color:var(--dim);
  max-width:54ch;margin-top:var(--s3);text-wrap:pretty;text-shadow:0 1px 22px rgba(0,0,0,.9)}
.read strong{color:var(--white);font-weight:600}
.read em{color:var(--red);font-style:normal}
.beat.mid .read{margin-left:auto;margin-right:auto}
.beat.right .read{margin-left:auto}

.figure{font-family:var(--font-display);font-size:clamp(26px,3.4vw,42px);
  letter-spacing:.015em;color:var(--white);line-height:1}
.figure small{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);margin-left:7px}

/* ── 6 · THE GLASS ──────────────────────────────────────────────────────────
   Every panel on this site is a small glass room standing in the dark: light
   catches the top edge, the body is near-black, a hairline holds it.         */
.glass{position:relative;overflow:hidden;
  background:linear-gradient(176deg,rgba(255,255,255,.052),rgba(255,255,255,.012) 38%,rgba(255,255,255,.004) 100%),rgba(10,10,11,.72);
  border:1px solid var(--line-soft);
  backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);
  padding:clamp(22px,2.6vw,32px);
  transition:border-color .45s var(--ease),transform .55s var(--ease),box-shadow .55s var(--ease)}
/* the pane's own top light */
.glass::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(236,238,242,.5) 22%,rgba(236,238,242,.5) 78%,transparent)}
/* the light that moves across the glass when you lean in */
.glass::after{content:'';position:absolute;inset:0;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,transparent 36%,rgba(255,255,255,.07) 48%,transparent 60%);
  background-size:260% 100%;background-position:170% 0;
  transition:opacity .4s ease,background-position 1.1s var(--ease)}
.glass:hover,.glass:focus-within{border-color:rgba(236,238,242,.26);transform:translateY(-3px);
  box-shadow:0 22px 60px -30px rgba(0,0,0,.9)}
.glass:hover::after,.glass:focus-within::after{opacity:1;background-position:-70% 0}
.glass.lit{border-color:rgba(212,42,42,.5);box-shadow:0 0 54px -18px var(--red-glow)}
.glass.lit::before{background:linear-gradient(90deg,transparent,var(--red-bright) 22%,var(--red-bright) 78%,transparent);
  box-shadow:0 0 16px var(--red-glow)}
.glass h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(18px,1.9vw,23px);letter-spacing:.03em;line-height:1.1}
.glass p{font-size:14.5px;line-height:1.66;color:var(--dim);margin-top:9px}
.glass p strong{color:var(--white);font-weight:600}
.glass .tag{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome-mid);display:block;margin-bottom:13px}
.glass .tag.red{color:var(--red)}
.glass ul{list-style:none;margin-top:14px}
.glass li{color:var(--dim);font-size:14px;line-height:1.55;padding:8px 0 8px 18px;
  border-bottom:1px solid var(--line-soft);position:relative}
.glass li:last-child{border-bottom:0;padding-bottom:0}
.glass li::before{content:'';position:absolute;left:0;top:15px;width:8px;height:1px;
  background:var(--red)}
.glass li strong{color:var(--white);font-weight:600}

/* grids of glass */
.cases{display:grid;gap:12px;margin-top:clamp(28px,4vh,46px)}
.cases.two{grid-template-columns:repeat(2,1fr)}
.cases.three{grid-template-columns:repeat(3,1fr)}
.cases.auto{grid-template-columns:repeat(auto-fill,minmax(248px,1fr))}
.cases.wide{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}
@media(max-width:900px){.cases.three{grid-template-columns:1fr}}
@media(max-width:700px){.cases.two{grid-template-columns:1fr}}

/* ── 7 · THE PLAQUE — mono block for laws, receipts, fine print ─────────── */
.plaque{font-family:var(--font-mono);font-size:12px;line-height:1.85;
  letter-spacing:.03em;color:var(--chrome-hi);text-transform:uppercase;
  background:rgba(8,8,9,.82);border:1px solid var(--line-soft);
  border-left:1px solid var(--red);
  padding:18px 22px;margin-top:20px;overflow-x:auto}
.plaque em{color:var(--red);font-style:normal}
.plaque b{color:var(--white);font-weight:400}

/* ── 8 · THE DOORS (buttons) ────────────────────────────────────────────── */
.doors{display:flex;gap:12px;flex-wrap:wrap;margin-top:clamp(28px,4vh,44px)}
.beat.mid .doors{justify-content:center}
.beat.right .doors{justify-content:flex-end}
/* A door used to be an <a> everywhere. The spec desk needs it on a <button>,
   and a button arrives with the operating system's own grey face and its own
   font — so both are reset here rather than in one page's head. */
.door{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-mono);font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;
  padding:15px 28px;border:1px solid var(--red);color:var(--white);
  background:transparent;appearance:none;-webkit-appearance:none;
  text-align:center;line-height:1.2;cursor:pointer;
  transition:background .3s ease,box-shadow .35s ease,border-color .3s ease}
.door::after{content:'';position:absolute;inset:0;opacity:0;
  background:linear-gradient(104deg,transparent 40%,rgba(255,255,255,.18) 50%,transparent 60%);
  background-size:260% 100%;background-position:180% 0;
  transition:background-position .85s var(--ease),opacity .25s ease}
.door:hover::after{opacity:1;background-position:-80% 0}
.door.open{background:var(--red)}
.door.open:hover{background:var(--red-bright);border-color:var(--red-bright);
  box-shadow:0 0 38px var(--red-glow)}
.door.shut:hover{background:var(--red)}
.door.steel{border-color:var(--chrome-lo);color:var(--chrome-hi)}
.door.steel:hover{border-color:var(--chrome-hi);box-shadow:0 0 30px -12px rgba(236,238,242,.5)}

/* ── 9 · ENTRANCES (scroll reveal) ──────────────────────────────────────── */
.rise{opacity:0;transform:translateY(26px);
  transition:opacity var(--slow) var(--ease),transform var(--slow) var(--ease);
  transition-delay:var(--d,0s)}
.rise.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rise{opacity:1;transform:none;transition:none}
  .act .plate > img,.act .plate > video{transform:none!important;transition:none}
}

/* ── 10 · THE RULE — a thin line of light between movements ─────────────── */
.rule{height:1px;max-width:var(--maxw);margin:0 auto;
  background:linear-gradient(90deg,var(--red),transparent 72%);opacity:.55}

/* ── 11 · THE SOUND SWITCH ──────────────────────────────────────────────────
   Bottom right, always. Three bars that actually move when the room is on.   */
.sound{position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);
  z-index:820;display:inline-flex;align-items:center;gap:9px;cursor:pointer;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:rgba(244,243,240,.46);background:rgba(8,8,9,.72);border:1px solid var(--line-soft);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:8px 12px;transition:color .3s ease,border-color .3s ease,bottom .45s var(--ease)}
/* The spec desk parks a sticky tally along the bottom edge, and the sound chip
   was landing on top of the last button. The desk measures its own bar and
   publishes the height, so the chip steps up by exactly the right amount. */
body.has-tally .sound{bottom:calc(var(--tally-h,112px) + clamp(14px,2.4vw,26px) + 10px)}
.sound:hover{color:var(--white);border-color:rgba(236,238,242,.3)}
.sound[aria-pressed="true"]{color:var(--white);border-color:rgba(212,42,42,.5)}
.sound .bars{display:flex;align-items:flex-end;gap:2px;height:11px}
.sound .bars i{width:2px;height:3px;background:var(--chrome-mid);display:block;
  transition:background .3s ease}
.sound[aria-pressed="true"] .bars i{background:var(--red-bright);
  animation:lvl .9s ease-in-out infinite alternate}
.sound[aria-pressed="true"] .bars i:nth-child(2){animation-duration:.62s}
.sound[aria-pressed="true"] .bars i:nth-child(3){animation-duration:1.15s}
@keyframes lvl{from{height:3px}to{height:11px}}
@media(prefers-reduced-motion:reduce){.sound .bars i{animation:none!important}}

/* ── 12 · THE PROGRAMME (footer) ────────────────────────────────────────── */
.programme{border-top:1px solid var(--line-soft);padding:var(--s6) var(--gutter) var(--s4);
  text-align:center;position:relative}
.programme .fly{width:62px;height:auto;margin:0 auto 26px;opacity:.8;
  filter:grayscale(.35) contrast(1.05) drop-shadow(0 0 22px rgba(154,160,168,.32))}
.programme .hands{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--chrome-mid);
  margin-bottom:18px}
.programme .hands a{transition:color .3s ease}
.programme .hands a:hover{color:var(--red-bright)}
.programme .fine{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);line-height:2}
.programme .fine em{color:var(--red);font-style:normal}
.programme .fine a{color:var(--chrome-mid)}
.programme .fine a:hover{color:var(--white)}

/* ── 13 · SMALL SCREENS ─────────────────────────────────────────────────── */
@media(max-width:700px){
  .beat{min-height:84dvh;padding:11dvh 0}
  .act .plate::after{background:radial-gradient(78% 42% at 50% 30%,var(--red-soft),transparent 74%)}
  .plaque{font-size:10.5px;padding:15px 16px}
  .door{padding:14px 20px;font-size:10.5px}
}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ═══════════════════════════════════════════════════════════════════════════
   THE HOUSE STYLE — added 2026-10-02 after Cam's note:
   "not everything needs to be a glass box … the colors, the feel, the suits,
    the luxury, the red and black, all of that needs to feel consistent"

   So the card grid goes. What replaces it is the furniture of an expensive
   room: a printed bill of fare, hairline rules, big quiet numerals, and
   photography doing the talking. Glass is kept for exactly one thing — the
   three wings — because there it is the actual metaphor, not decoration.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── THE BILL — what things are and what they cost, set like a club menu ── */
.bill{margin-top:clamp(30px,4.5vh,52px);border-top:1px solid var(--line-soft)}
.bill .line{position:relative;display:grid;
  grid-template-columns:minmax(0,1fr) auto;gap:6px clamp(20px,4vw,56px);
  align-items:baseline;padding:clamp(20px,2.6vh,30px) 0 clamp(20px,2.6vh,30px) 0;
  border-bottom:1px solid var(--line-soft);
  transition:background .45s var(--ease)}
.bill .line::before{content:'';position:absolute;left:calc(-1 * clamp(14px,2vw,26px));
  top:clamp(20px,2.6vh,30px);bottom:clamp(20px,2.6vh,30px);width:1px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.bill .line:hover::before,.bill .line:focus-within::before{transform:scaleY(1)}
.bill .line:hover{background:linear-gradient(90deg,rgba(212,42,42,.045),transparent 62%)}
.bill .nm{grid-column:1;grid-row:1;
  font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,23px);letter-spacing:.035em;line-height:1.14;color:var(--white);
  transition:color .35s ease}
.bill .line:hover .nm{color:var(--red-bright)}
.bill .amt{grid-column:2;grid-row:1;
  font-family:var(--font-display);font-size:clamp(19px,2.1vw,27px);letter-spacing:.015em;
  color:var(--white);white-space:nowrap;text-align:right}
.bill .amt small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin-left:6px}
.bill .say{grid-column:1 / -1;font-size:14.5px;line-height:1.62;color:var(--dim);max-width:72ch;margin-top:2px}
.bill .say strong{color:var(--chrome-hi);font-weight:500}
.bill .say em{color:var(--red);font-style:normal}
@media(max-width:620px){
  .bill .line{grid-template-columns:1fr}
  .bill .nm{grid-column:1;grid-row:1}
  .bill .amt{grid-column:1;grid-row:2;text-align:left;margin-top:6px}
  .bill .say{grid-row:3}
}

/* ── THE SET — a titled run of bill lines, with a quiet rule above it ── */
.set{margin-top:var(--s6)}
.set > .head{display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);
  font-family:var(--font-mono);font-size:var(--t-label);letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ash)}
.set > .head b{color:var(--white);font-weight:400;font-size:12px;letter-spacing:.2em}
.set > .head::after{content:'';flex:1;height:1px;
  background:linear-gradient(90deg,var(--chrome-lo),transparent)}

/* ── THE CREED — a numbered manifesto. No boxes, just numerals and rules. ── */
.creed{margin-top:clamp(30px,4.5vh,52px);border-top:1px solid var(--line-soft)}
.creed .art{display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,42px);padding:clamp(22px,3vh,34px) 0;
  border-bottom:1px solid var(--line-soft)}
.creed .no{font-family:var(--font-display);font-size:clamp(26px,3.4vw,42px);line-height:.9;
  background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent;
  min-width:2ch}
.creed h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(17px,1.9vw,23px);letter-spacing:.035em;line-height:1.14}
.creed p{font-size:14.5px;line-height:1.66;color:var(--dim);margin-top:8px;max-width:68ch}
.creed p strong{color:var(--white);font-weight:600}
.creed .art.last h3{color:var(--red)}

/* ── THE COLUMNS — two sides of an argument, divided by one hairline ── */
.columns{display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,5vw,64px);
  margin-top:clamp(30px,4.5vh,52px)}
.columns > div:first-child{position:relative}
.columns > div:first-child::after{content:'';position:absolute;top:0;bottom:0;
  right:calc(-1 * clamp(13px,2.5vw,32px));width:1px;
  background:linear-gradient(180deg,transparent,var(--line),transparent)}
@media(max-width:800px){
  .columns{grid-template-columns:1fr;gap:34px}
  .columns > div:first-child::after{top:auto;bottom:-17px;left:0;right:0;width:auto;height:1px;
    background:linear-gradient(90deg,transparent,var(--line),transparent)}
}
.columns h3{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--chrome-mid);margin-bottom:18px}
.columns .red h3{color:var(--red)}
.columns ul{list-style:none}
.columns li{font-size:15px;line-height:1.56;color:var(--dim);padding:11px 0 11px 20px;
  border-bottom:1px solid var(--line-soft);position:relative}
.columns li:last-child{border-bottom:0}
.columns li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--chrome-lo)}
.columns .red li::before{background:var(--red)}
.columns li strong{color:var(--white);font-weight:600}

/* ── THE FIGURES — a few big quiet numbers in a row, no containers ── */
.figures{display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(22px,3vw,40px);margin-top:clamp(30px,4.5vh,52px)}
.figures.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.figures,.figures.three{grid-template-columns:1fr}}
.figures > *{display:block;padding-top:20px;border-top:1px solid var(--line-soft);
  transition:border-color .45s var(--ease)}
.figures a:hover{border-top-color:var(--red)}
.figures .n{font-family:var(--font-display);font-size:clamp(34px,4.6vw,56px);line-height:1;display:block;
  background:var(--chrome-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.figures .of{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--red);display:block;margin:10px 0 12px}
.figures h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:18px;
  letter-spacing:.035em;transition:color .35s ease}
.figures a:hover h3{color:var(--red-bright)}
.figures p{font-size:14px;line-height:1.6;color:var(--dim);margin-top:8px}
.figures p strong{color:var(--white);font-weight:600}
.figures .go{font-family:var(--font-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--chrome-mid);display:inline-block;margin-top:14px;transition:color .3s ease}
.figures a:hover .go{color:var(--red-bright)}
.figures .go::after{content:' →';display:inline-block;transition:transform .3s var(--ease)}
.figures a:hover .go::after{transform:translateX(4px)}

/* ── THE CLOSE — how every room ends. Black, a mark, one line. No film. ── */
.close{position:relative;text-align:center;padding:clamp(80px,13vh,150px) var(--gutter);
  border-top:1px solid var(--line-soft);
  background:radial-gradient(62% 48% at 50% 42%,rgba(212,42,42,.085),transparent 72%)}
.close .fly{width:clamp(56px,6.4vw,80px);height:auto;margin:0 auto clamp(26px,4vh,40px);opacity:.82;
  filter:grayscale(.3) contrast(1.05) drop-shadow(0 0 26px rgba(154,160,168,.3))}
.close .statement{margin:0 auto}
.close .read{margin-left:auto;margin-right:auto}
.close .doors{justify-content:center}

/* ── GLASS, DEMOTED ────────────────────────────────────────────────────────
   Kept only for the three wings, and no longer a filled card: a hairline, a
   catch of light along the top edge, and the page showing through.          */
.glass{background:linear-gradient(176deg,rgba(255,255,255,.028),rgba(255,255,255,.004) 46%,transparent);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-color:var(--line-soft)}
.glass:hover,.glass:focus-within{transform:none;box-shadow:none;border-color:rgba(236,238,242,.2)}

/* ═══════════════════════════════════════════════════════════════════════════
   AWARD PASS — 2026-10-02, from the design research.
   The findings that actually move the needle: a page that never flashes white,
   reveals locked to scroll position rather than fired by a threshold, an index
   instead of a card grid, and a rail that makes the page a known-length object.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── The navigation never flashes. The wordmark and the plate persist ACROSS
      the page load instead of being destroyed and rebuilt. Chrome/Edge 126+,
      Safari 18.2+; everywhere else this is simply an ordinary navigation.   */
.house .mark img{view-transition-name:wordmark}
.act .plate{view-transition-name:plate}
@media(prefers-reduced-motion:reduce){ @view-transition{navigation:none} }

/* ── Reveals tied to scroll POSITION, not to a threshold firing once.
      You can scrub these backwards, which is what makes them read as a
      dissolve rather than a plugin. The no-support state is fully visible —
      Firefox still has this behind a flag, and a blank page is not a
      progressive enhancement.                                               */
@supports (animation-timeline: view()){
  @media not (prefers-reduced-motion: reduce){
    .rise{opacity:1;transform:none;transition:none;
      animation:riseIn linear both;
      animation-timeline:view();
      animation-range:entry 8% cover 34%}
    @keyframes riseIn{
      from{opacity:0;transform:translateY(2.2rem)}
      to{opacity:1;transform:none}}

    /* BIG TYPE DOES NOT TRAVEL ON A SCROLL TIMELINE.
       A transition settles on a whole pixel within a second and is crisp
       after that. A SCROLL-DRIVEN transform never settles: every frame puts
       the element at whatever fraction of a pixel the scroll position says —
       35.2px, 35.9px — and text composited at a fraction of a pixel shimmers.
       On a 40px-soft-shadowed Anton headline that reads as the letters
       physically shaking, which is exactly what Cam saw on "THEORY IS TAUGHT
       WELL."
       So display type fades instead of travelling. A title card fading up is
       the more filmic move anyway; the travel stays on everything whose type
       is small enough not to show it. */
    .statement.rise,.card.rise,.folk.rise{animation-name:fadeUp}
    @keyframes fadeUp{from{opacity:0}to{opacity:1}}
  }
}

/* ── THE INDEX — what replaces a card grid.
      One row per thing: a numeral, a name, a category. Rules, not boxes. The
      browser is not deciding this layout; we are.                           */
.index{margin-top:var(--s5);border-top:1px solid var(--line-soft)}
.index .row{position:relative;display:grid;
  grid-template-columns:5ch minmax(0,1fr) 20ch;align-items:center;
  gap:var(--s2) var(--s4);
  min-height:clamp(88px,9vw,136px);padding:var(--s3) 0;
  border-bottom:1px solid var(--line-soft);
  transition:background .5s var(--ease)}
.index .row:hover{background:linear-gradient(90deg,rgba(212,42,42,.05),transparent 58%)}
.index .no{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);color:var(--ash);align-self:start;padding-top:.5em}
.index .ttl{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.6vw,38px);line-height:.96;letter-spacing:var(--ls-head);
  color:var(--white);transition:color .35s ease}
.index .row:hover .ttl{color:var(--red-bright)}
.index .sub{font-size:var(--t-body);line-height:1.6;color:var(--dim);
  grid-column:2;max-width:56ch;margin-top:var(--s1)}
.index .sub strong{color:var(--white);font-weight:600}
.index .meta{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ash);
  text-align:right;align-self:start;padding-top:.5em;grid-column:3;grid-row:1}
.index .meta b{display:block;font-family:var(--font-display);font-weight:400;
  font-size:clamp(22px,2.4vw,34px);letter-spacing:0;color:var(--white);
  margin-bottom:4px;line-height:1}
.index .row:hover .meta b{color:var(--red-bright)}
@media(max-width:820px){
  .index .row{grid-template-columns:4ch minmax(0,1fr);gap:var(--s1) var(--s3)}
  .index .meta{grid-column:2;grid-row:auto;text-align:left;padding-top:var(--s2)}
  .index .meta b{font-size:26px}
}

/* ── THE RAIL — a hairline that makes the page a known-length object.
      Replaces a second nav bar and costs almost nothing.                     */
.rail{position:fixed;left:max(14px,calc(var(--gutter) * .42));top:22vh;bottom:22vh;
  width:1px;z-index:780;background:var(--line-soft);pointer-events:none}
.rail i{position:absolute;inset:0;transform-origin:top;transform:scaleY(0);
  background:linear-gradient(180deg,var(--red),var(--crimson));
  box-shadow:0 0 12px var(--red-glow)}
@supports (animation-timeline: scroll()){
  .rail i{transform:scaleY(1);animation:railFill linear both;
    animation-timeline:scroll(root block)}
  @keyframes railFill{from{transform:scaleY(0)}to{transform:scaleY(1)}}
}
@media(max-width:900px),(prefers-reduced-motion:reduce){.rail{display:none}}

/* ── dead weight: the card grids these replaced ── */
.cases,.cases.two,.cases.three,.cases.auto,.cases.wide{display:block}

/* ═══════════════════════════════════════════════════════════════════════════
   THE TITLE CARDS — 2026-10-02, Cam: "the wording has to look way more
   cinematic, for everything."

   The fault was using ONE typographic pole for two different jobs: a shrunken
   poster headline standing in for a section head. Film does not do that. Film
   has a POSTER (once, enormous, tight) and it has TITLE CARDS (small, widely
   letterspaced, centred, surrounded by air, held for a beat).

   So: Anton at 11vw stays for exactly one hero per page. Every section opens
   on a card instead — a short rule, the chapter number, a tracked line, one
   sentence. Repeated with no variation, because the repetition is the design.
   ═══════════════════════════════════════════════════════════════════════════ */

.card{text-align:center;max-width:46rem;margin:0 auto var(--s6);
  display:flex;flex-direction:column;align-items:center}
.card .bar{width:38px;height:1px;background:var(--red);
  box-shadow:0 0 12px var(--red-glow);margin-bottom:var(--s3)}
.card .no{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--ash);
  line-height:.9;margin-bottom:var(--s3)}
.card h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(21px,2.2vw,32px);letter-spacing:.145em;line-height:1.5;
  color:var(--white);text-wrap:balance;text-indent:.145em}
.card h2 .redtxt{color:var(--red)}
.card .under{font-size:var(--t-body);line-height:1.7;color:var(--dim);
  max-width:48ch;margin-top:var(--s3);text-wrap:pretty}
.card .under strong{color:var(--white);font-weight:600}
@media(max-width:700px){.card{margin-bottom:var(--s5)}}

/* the whisper label is redundant once a card carries the chapter number */
.card + .bill,.card + .index,.card + .creed,.card + .columns,
.card + .figures,.card + .wings,.card + .set{margin-top:0}

/* ── THE POSTER REVEAL — a title fading up out of focus, the way a film
      opens. One per page, on load, never on scroll.                          */
@media not (prefers-reduced-motion: reduce){
  .act .script .beat:first-child .whisper{animation:cardIn 1s var(--ease) .15s both}
  .act .script .beat:first-child .statement{animation:titleIn 1.5s var(--ease) .3s both}
  .act .script .beat:first-child .read{animation:cardIn 1.1s var(--ease) .9s both}
  .act .script .beat:first-child .doors{animation:cardIn 1.1s var(--ease) 1.1s both}
  @keyframes titleIn{
    from{opacity:0;filter:blur(16px);transform:translateY(16px) scale(1.015)}
    to{opacity:1;filter:blur(0);transform:none}}
  @keyframes cardIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:none}}
}

/* ── ONE RED PER SCREEN. The white/red split on every single headline was a
      product-page tic. The poster keeps it; nothing else does.               */
.card h2 .chrome{background:none;-webkit-text-fill-color:currentColor;color:var(--white)}

/* ═══════════════════════════════════════════════════════════════════════════
   THE QUIET PASS — 2026-10-02, after Cam: "the typography and design is
   still wrong."

   He was right and the diagnosis is simple. I had been building loud,
   left-aligned, 170px Anton posters with the picture cropped tight behind
   them. That is EXACTLY the product-page styling he asked me to get away
   from on the first message.

   His front door does the opposite, and it is worth stating as measurements
   rather than adjectives:
     · the largest piece of TEXT on it is 13px
     · everything is centred
     · the subject sits small inside an enormous black frame
     · the only big element is the wordmark, and that is a picture
   Nothing shouts. The room is what you look at.

   So the rooms now carry the same manners: one centred lockup per view, mono
   label on top, a restrained tracked line, one sentence, and a great deal of
   black. The poster scale is retired.
   ═══════════════════════════════════════════════════════════════════════════ */

/* every beat is centred now — the front door has no left-aligned anything */
.beat,.beat.mid,.beat.right{align-items:center;text-align:center}
.beat .whisper{justify-content:center}
.beat .read{margin-left:auto;margin-right:auto}
.beat .doors{justify-content:center}

/* THE LOCKUP — the only type treatment on the site, at two sizes.
   Over a plate it carries a shadow; in a black box it does not need one. */
.lede{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(23px,2.5vw,37px);letter-spacing:.135em;line-height:1.46;
  color:var(--white);text-indent:.135em;text-wrap:balance;max-width:21ch;
  margin:0 auto}
.act .lede{text-shadow:0 2px 30px rgba(0,0,0,.95),0 0 70px rgba(0,0,0,.7)}
.lede .redtxt{color:var(--red)}
/* the hero of a page gets one step more presence, and not a step more */
.beat:first-child .lede{font-size:clamp(26px,3vw,46px);max-width:26ch}

/* the poster scale is gone. If a .statement survives anywhere it must not
   shout — fold it into the lockup rather than leaving a 170px orphan. */
.statement{font-size:clamp(23px,2.5vw,37px);line-height:1.46;
  letter-spacing:.135em;text-indent:.135em;max-width:24ch;margin:0 auto;
  text-wrap:balance}
.statement.sm{font-size:clamp(21px,2.2vw,32px);letter-spacing:.135em}
.beat:first-child .statement{font-size:clamp(26px,3vw,46px);max-width:26ch}
/* and one colour: the white/red split on every line was the product tic */
.statement .chrome,.lede .chrome{background:none;-webkit-text-fill-color:currentColor;
  color:var(--white)}

/* smaller, calmer body copy with more air under the line */
.act .read,.close .read{font-size:clamp(15px,1.15vw,17px);line-height:1.75;
  max-width:50ch;color:var(--dim)}

/* the scrim can relax now that nothing sits in the corner of the frame —
   a soft centred bed under a centred lockup, and far less of it */
.act .plate::after,.act:has(.beat.mid) .plate::after{
  background:
    radial-gradient(58% 44% at 50% 28%,var(--red-soft),transparent 74%),
    radial-gradient(74% 54% at 50% 50%,rgba(5,5,6,.72),rgba(5,5,6,.26) 58%,transparent 82%),
    linear-gradient(180deg,rgba(5,5,6,.55) 0%,transparent 26%,transparent 76%,rgba(5,5,6,.62) 100%)}
@media(max-width:860px){
  .act .plate::after,.act:has(.beat.mid) .plate::after{
    background:
      radial-gradient(76% 40% at 50% 24%,var(--red-soft),transparent 76%),
      linear-gradient(180deg,rgba(5,5,6,.70) 0%,rgba(5,5,6,.34) 20%,rgba(5,5,6,.58) 46%,rgba(5,5,6,.84) 82%,rgba(5,5,6,.94) 100%)}
}

/* the title cards keep their job, tuned to sit in the same family */
.card h2{font-size:clamp(21px,2.2vw,32px)}

/* and the close becomes a lockup too, not a finale poster */
.close .statement{font-size:clamp(24px,2.7vw,40px);max-width:20ch}

/* ── NOTHING CROSSES THE LIT BOX ───────────────────────────────────────────
   The front door never lays a word over the glass room: the lockup sits in
   the black above it and the tabs sit on the dark floor below it. The room
   itself is left alone to be looked at. A hero beat now does the same — the
   label and the line at the top, the sentence and the doors at the bottom,
   and the middle of the frame kept clear for the picture.                   */
.act .script .beat:first-child{justify-content:flex-start}
.act .script .beat:first-child .read{margin-top:auto}
.act .script .beat:first-child .doors{margin-bottom:2dvh}
@media(max-width:860px){
  /* on a phone the room sits lower in a 9:16 crop, so the copy needs less
     push or it lands on the floor of the frame */
  .act .script .beat:first-child .read{margin-top:auto}
  .act .script .beat:first-child{padding-bottom:12dvh}
}

/* ═══════════════════════════════════════════════════════════════════════════
   THE METAMORPHOSIS — three movements, 2026-10-03.
   Cam: "it's not the climb, it's the metamorphosis… make it cinematic."

   Three glass boxes lined up in ONE frame read as a diagram. Three separate
   pictures read as a story: the room being built to nobody, the room working
   to a house, the room at the centre of a production. Each wing gets its own
   plate, full width, with the terms set beneath it.
   ═══════════════════════════════════════════════════════════════════════════ */
.movements{margin-top:var(--s5)}
.movement{margin-top:var(--s6)}
.movement:first-child{margin-top:var(--s4)}
.movement figure{position:relative;margin:0 0 var(--s4);overflow:hidden}
.movement figure img{width:100%;height:auto;display:block;
  /* the same law as the plates: no hard edges anywhere */
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 9%,#000 90%,transparent 100%),linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transform:scale(1.015);transition:transform 2.4s var(--ease)}
.movement:hover figure img{transform:scale(1.045)}
.movement .terms{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  gap:var(--s3) var(--s5);align-items:start;max-width:62rem;margin:0 auto}
@media(max-width:820px){.movement .terms{grid-template-columns:1fr;gap:var(--s3)}}
.movement .ph{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);
  display:block;margin-bottom:var(--s2)}
.movement h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(26px,3.2vw,46px);letter-spacing:.11em;line-height:1.1;
  text-indent:.11em;color:var(--white)}
.movement .cost{font-family:var(--font-display);font-size:clamp(22px,2.4vw,34px);
  letter-spacing:.02em;color:var(--white);display:block;margin-top:var(--s2)}
.movement .cost small{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin-left:7px}
.movement .plan{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.05em;
  color:var(--chrome-mid);display:block;margin-top:6px}
.movement .dur{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);display:block;margin-top:10px}
.movement ul{list-style:none}
.movement li{color:var(--dim);font-size:var(--t-body);line-height:1.6;
  padding:11px 0 11px 20px;border-bottom:1px solid var(--line-soft);position:relative}
.movement li:last-child{border-bottom:0}
.movement li::before{content:'';position:absolute;left:0;top:19px;width:9px;height:1px;background:var(--red)}
.movement li strong{color:var(--white);font-weight:600}
.movement .go{margin-top:var(--s3)}

/* ── 14 · THE DESK ──────────────────────────────────────────────────────────
   A form is where most beautiful sites stop being beautiful: the type changes,
   the boxes arrive, and the room turns into a tax return. So the desk is built
   from the same four materials as every other room — hairlines, mono labels,
   Anton for the one number that matters, and a single red light. Nothing here
   is a rounded grey box.

   The rule that makes it hold: a field is a RULED LINE, not a container. The
   input has no border of its own; it sits on one hairline that lights red when
   the visitor is standing on it. Same gesture as .bill, same gesture as .index.

   One hard constraint: every input is 16px. Under that, iOS Safari zooms the
   page on focus, and a zoomed page on a phone is the end of any composition. */

/* the four ways into the desk */
.lanes{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  margin-top:clamp(28px,4vh,46px);background:var(--line-soft)}
@media(max-width:980px){.lanes{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.lanes{grid-template-columns:1fr}}
.lane{position:relative;overflow:hidden;display:block;
  background:linear-gradient(176deg,rgba(255,255,255,.04),rgba(255,255,255,.008) 42%),rgba(10,10,11,.86);
  padding:clamp(22px,2.4vw,30px);
  transition:background .5s var(--ease),transform .5s var(--ease)}
.lane::before{content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:var(--red);transform:scaleX(0);transform-origin:left;
  transition:transform .6s var(--ease)}
.lane:hover,.lane:focus-visible,.lane[aria-current]{background:rgba(14,14,16,.95);transform:translateY(-2px)}
.lane:hover::before,.lane:focus-visible::before,.lane[aria-current]::before{transform:scaleX(1)}
.lane .no{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:14px}
.lane h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(19px,2vw,25px);letter-spacing:.04em;line-height:1.08;color:var(--white)}
.lane p{font-size:13.5px;line-height:1.6;color:var(--dim);margin-top:9px}
.lane .from{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--chrome-mid);display:block;margin-top:14px}
.lane .from b{color:var(--white);font-weight:400}

/* ── the form ───────────────────────────────────────────────────────────── */
.intake{margin-top:var(--s4)}
.intake[hidden]{display:none}

.step{border:0;margin-top:var(--s5)}
.step:first-of-type{margin-top:var(--s4)}
.step > legend{display:flex;align-items:baseline;gap:clamp(12px,2vw,22px);width:100%;
  font-family:var(--font-mono);font-size:10.5px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--chrome-mid);
  padding-bottom:14px;border-bottom:1px solid var(--line-soft);margin-bottom:var(--s3)}
.step > legend b{color:var(--white);font-weight:400}
.step > legend::after{content:'';flex:1;height:1px;background:var(--line-soft)}

/* two fields side by side where they belong together, one where they don't */
.row{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.4vw,34px)}
.row.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.row,.row.three{grid-template-columns:1fr}}

.field{display:block;margin-bottom:var(--s3);position:relative}
.field > .q{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome-mid);display:block;margin-bottom:11px}
.field > .q .req{color:var(--red);margin-left:4px}
.field > .q .hint{display:block;text-transform:none;letter-spacing:.02em;
  font-size:11.5px;color:var(--ash);margin-top:6px;line-height:1.5}
.field input,.field select,.field textarea{
  width:100%;background:transparent;color:var(--white);
  font-family:var(--font-body);font-size:16px;font-weight:300;line-height:1.5;
  border:0;border-bottom:1px solid var(--line);padding:11px 2px;
  transition:border-color .35s ease,box-shadow .35s ease}
.field textarea{min-height:104px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--chrome-lo) 50%),linear-gradient(135deg,var(--chrome-lo) 50%,transparent 50%);
  background-position:calc(100% - 13px) 20px,calc(100% - 8px) 20px;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:28px}
.field select option{background:var(--pit);color:var(--white)}
.field input::placeholder,.field textarea::placeholder{color:var(--chrome-lo);font-weight:300}
.field input:hover,.field select:hover,.field textarea:hover{border-bottom-color:rgba(244,243,240,.22)}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;
  border-bottom-color:var(--red);box-shadow:0 1px 0 0 var(--red),0 6px 26px -18px var(--red-glow)}
.field input:user-invalid,.field textarea:user-invalid{border-bottom-color:var(--crimson)}

/* choices — mono chips, because a native checkbox is a different design system */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips label{position:relative;cursor:pointer}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{display:inline-block;font-family:var(--font-mono);font-size:11px;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:10px 15px;
  transition:border-color .3s ease,color .3s ease,background .3s ease}
.chips label:hover span{border-color:var(--chrome-lo);color:var(--chrome-hi)}
.chips input:checked + span{border-color:var(--red);color:var(--white);
  background:rgba(212,42,42,.1);box-shadow:0 0 24px -12px var(--red-glow)}
.chips input:focus-visible + span{outline:1px solid var(--red-bright);outline-offset:2px}

/* ── the package — Cam's bill, made selectable ───────────────────────────── */
.picks{margin-top:var(--s3);border-top:1px solid var(--line-soft)}
.pick{position:relative;display:grid;
  grid-template-columns:28px minmax(0,1fr) auto;gap:4px clamp(12px,1.6vw,20px);
  align-items:baseline;padding:clamp(18px,2vw,24px) 0;
  border-bottom:1px solid var(--line-soft);cursor:pointer;
  transition:background .4s var(--ease)}
.pick::before{content:'';position:absolute;left:calc(-1 * clamp(14px,2vw,26px));
  top:0;bottom:0;width:1px;background:var(--red);
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.pick:hover::before,.pick:has(:checked)::before{transform:scaleY(1)}
.pick:hover{background:linear-gradient(90deg,rgba(212,42,42,.045),transparent 62%)}
.pick:has(:checked){background:linear-gradient(90deg,rgba(212,42,42,.075),transparent 70%)}
.pick input{position:absolute;opacity:0;width:1px;height:1px}
/* the tick is drawn, not a glyph — a system checkbox would bring its own look */
.pick .box{grid-column:1;grid-row:1;position:relative;align-self:center;
  width:17px;height:17px;border:1px solid var(--chrome-lo);
  transition:border-color .3s ease,background .3s ease}
.pick .box::after{content:'';position:absolute;left:4px;top:7px;width:7px;height:3px;
  border-left:1.5px solid var(--white);border-bottom:1.5px solid var(--white);
  transform:rotate(-45deg) scale(0);transform-origin:center;
  transition:transform .32s var(--ease)}
.pick:has(:checked) .box{border-color:var(--red);background:var(--red)}
.pick:has(:checked) .box::after{transform:rotate(-45deg) scale(1)}
.pick input:focus-visible ~ .box{outline:1px solid var(--red-bright);outline-offset:3px}
.pick .nm{grid-column:2;grid-row:1;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;font-size:clamp(17px,1.9vw,23px);letter-spacing:.03em;
  line-height:1.1;color:var(--white);transition:color .3s ease}
.pick:hover .nm{color:var(--red-bright)}
.pick .amt{grid-column:3;grid-row:1;text-align:right;white-space:nowrap;
  font-family:var(--font-display);font-size:clamp(17px,1.9vw,23px);letter-spacing:.02em;
  color:var(--white)}
.pick .amt small{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ash);margin-left:6px}
.pick .say{grid-column:2 / -1;font-size:14.5px;line-height:1.62;color:var(--dim);
  max-width:72ch;margin-top:2px}
.pick .say strong{color:var(--chrome-hi);font-weight:500}
.pick .say em{color:var(--red);font-style:normal}
.pick.held{cursor:default;background:linear-gradient(90deg,rgba(212,42,42,.075),transparent 70%)}
.pick.held::before{transform:scaleY(1)}
.pick.held .box{border-color:var(--red);background:var(--red)}
.pick.held .box::after{transform:rotate(-45deg) scale(1)}
.pick.held .nm:hover{color:var(--white)}
@media(max-width:620px){
  .pick{grid-template-columns:22px minmax(0,1fr);row-gap:7px}
  .pick .amt{grid-column:2;grid-row:2;text-align:left}
  .pick .say{grid-row:3}
}
/* a per-song or per-unit line gets a stepper instead of a tick, and a stepper
   is three controls wide — the 28px tick column was crushing it into the name */
.pick.counted{cursor:default;grid-template-columns:78px minmax(0,1fr) auto}
.pick .qty{grid-column:1 / 2;grid-row:1;display:flex;align-items:center;gap:0;
  align-self:center;margin-left:-2px}
.pick .qty button{width:22px;height:22px;background:transparent;cursor:pointer;
  border:1px solid var(--chrome-lo);color:var(--chrome-hi);
  font-family:var(--font-mono);font-size:13px;line-height:1;
  display:grid;place-items:center;transition:border-color .3s ease,background .3s ease,color .3s ease}
.pick .qty button:hover{border-color:var(--red);background:var(--red);color:var(--white)}
.pick .qty output{min-width:26px;text-align:center;font-family:var(--font-display);
  font-size:16px;color:var(--white)}
@media(max-width:620px){.pick .qty{grid-column:1 / -1;grid-row:1;justify-content:flex-start}
  .pick.counted .nm{grid-row:2}.pick.counted .amt{grid-row:3}.pick.counted .say{grid-row:4}}

/* ── the tally — the one number, always visible ──────────────────────────── */
.tally{position:sticky;bottom:0;z-index:600;margin-top:var(--s4);
  display:flex;align-items:center;justify-content:space-between;
  gap:clamp(14px,3vw,40px);flex-wrap:wrap;
  padding:clamp(16px,2vw,22px) clamp(16px,2.4vw,28px);
  background:rgba(8,8,9,.95);border:1px solid var(--line-soft);border-top-color:var(--red);
  backdrop-filter:blur(16px) saturate(.9);-webkit-backdrop-filter:blur(16px) saturate(.9);
  box-shadow:0 -24px 60px -34px rgba(0,0,0,.95)}
.tally .sum{min-width:0}
.tally .k{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--ash);display:block;margin-bottom:7px}
.tally .n{font-family:var(--font-display);font-size:clamp(30px,4vw,52px);line-height:.9;
  letter-spacing:.01em;color:var(--white);display:block}
.tally .n small{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ash);margin-left:9px}
.tally .what{font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;
  color:var(--chrome-mid);display:block;margin-top:9px;line-height:1.6}
.tally .what em{color:var(--red);font-style:normal}
.tally .acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.tally .acts .door{margin:0}
/* On a phone the bar was 288px tall — a third of the screen spent on three
   stacked buttons. The number and the primary door keep their full width; the
   two alternatives share a row, and the itemised line is clamped to two lines
   because the full list is right above it anyway. */
@media(max-width:700px){
  .tally{flex-direction:column;align-items:stretch;gap:12px;padding:14px 16px}
  .tally .k{margin-bottom:5px}
  .tally .n{font-size:clamp(27px,8.4vw,38px)}
  .tally .what{margin-top:7px;font-size:10.5px;line-height:1.55;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  .tally .acts{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .tally .acts .door{justify-content:center;padding:13px 8px;font-size:9.5px;letter-spacing:.13em}
  .tally .acts #pay{grid-column:1 / -1}
  /* when the pay doors are gone the remaining one should not sit half-width */
  .tally .acts #pay[hidden] ~ #send{grid-column:1 / -1}
}
.door[disabled],.door[aria-disabled="true"]{opacity:.42;pointer-events:none}
.door.busy{pointer-events:none}
.door.busy::before{content:'';position:absolute;left:0;bottom:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent,var(--white),transparent);
  animation:runlight 1.1s linear infinite}
@keyframes runlight{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* ── what happens after you press it ───────────────────────────────────── */
.note{font-family:var(--font-mono);font-size:11px;letter-spacing:.04em;line-height:1.7;
  color:var(--ash);margin-top:var(--s2)}
.note em{color:var(--red);font-style:normal}
.wrong{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  color:var(--red-bright);margin-top:var(--s2);line-height:1.7}
.wrong[hidden]{display:none}
.sent{text-align:center;padding:var(--s5) 0}
.sent .ref{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome-hi);
  border:1px solid var(--line);border-left-color:var(--red);
  display:inline-block;padding:13px 20px;margin-top:var(--s3)}

/* ── the three ways to reach a human ────────────────────────────────────── */
.ways{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  margin-top:clamp(28px,4vh,46px);background:var(--line-soft)}
@media(max-width:860px){.ways{grid-template-columns:1fr}}
.way{background:rgba(10,10,11,.86);padding:clamp(24px,2.8vw,34px);
  display:flex;flex-direction:column}
.way .k{font-family:var(--font-mono);font-size:10px;letter-spacing:var(--ls-label);
  text-transform:uppercase;color:var(--red);display:block;margin-bottom:16px}
.way h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(22px,2.4vw,30px);letter-spacing:.04em;line-height:1}
.way .sub{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;
  color:var(--chrome-mid);display:block;margin-top:10px;word-break:break-word}
.way p{font-size:14px;line-height:1.64;color:var(--dim);margin-top:13px;flex:1}
.way p strong{color:var(--white);font-weight:600}
.way .door{margin-top:22px;align-self:flex-start}
@media(max-width:860px){.way .door{align-self:stretch;justify-content:center}}

/* ── 15 · THE FLOW — where a visitor actually lands. Used on The Door and
      on The Spec Desk, so it belongs here rather than in one page's head. */
/* the map of where a visitor actually lands */
.flow{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:38px;
  border:1px solid var(--line-soft);background:rgba(8,8,9,.6)}
@media(max-width:860px){.flow{grid-template-columns:1fr}}
.flow .stop{padding:28px 24px;position:relative;border-right:1px solid var(--line-soft)}
.flow .stop:last-child{border-right:0}
@media(max-width:860px){.flow .stop{border-right:0;border-bottom:1px solid var(--line-soft)}
  .flow .stop:last-child{border-bottom:0}}
.flow .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);display:block;margin-bottom:10px}
.flow h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;font-size:19px;
  letter-spacing:.03em}
.flow p{color:var(--dim);font-size:13.5px;line-height:1.6;margin-top:8px}
.flow p strong{color:var(--white);font-weight:600}
.flow .stop::after{content:'→';position:absolute;right:-9px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);color:var(--chrome-lo);background:var(--black);padding:2px 1px;font-size:13px}
.flow .stop:last-child::after{content:none}
@media(max-width:860px){.flow .stop::after{content:'↓';right:50%;top:auto;bottom:-10px;transform:translateX(50%)}}

/* ── 16 · THE LEDGER — two columns of an argument, ours lit. Used on
      Institutions and on Supervisors, so it lives here. ─────────────────── */
.ledger{display:grid;grid-template-columns:minmax(0,1.2fr) 1fr 1fr;
  margin-top:clamp(30px,4.5vh,52px);border-top:1px solid var(--line-soft)}
.ledger > *{padding:15px clamp(10px,1.6vw,20px);border-bottom:1px solid var(--line-soft);
  font-size:14.5px;line-height:1.55;color:var(--dim)}
.ledger .h{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash)}
.ledger .h.ours{color:var(--red)}
.ledger .q{color:var(--chrome-hi)}
.ledger .ours{color:var(--white);background:linear-gradient(90deg,rgba(212,42,42,.07),transparent)}
@media(max-width:700px){
  .ledger{grid-template-columns:1fr 1fr}
  .ledger .q{grid-column:1 / -1;font-family:var(--font-mono);font-size:10px;
    letter-spacing:.2em;text-transform:uppercase;color:var(--ash);border-bottom:0;padding-bottom:4px}
  .ledger .h{display:none}
}
.msg{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  line-height:1.7;margin-top:var(--s2)}
.msg.bad{color:var(--red-bright)}
.msg.good{color:var(--chrome-hi)}

/* ── 17 · THE BAG AND THE TILL ──────────────────────────────────────────────
   A shopping cart is where luxury sites usually give up and ship a supermarket
   widget: a rounded badge, a drop shadow, a blue button. So this one is built
   from the same four materials as everything else — a hairline, mono at 10px,
   Anton for the one number, and a single red light.

   The bag sits bottom-LEFT because the sound chip owns bottom-right, and it
   is not there at all until something is in it. An empty cart icon is a
   permanent small reproach; it should simply not exist yet. */
.bag{position:fixed;left:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:821;
  display:inline-flex;align-items:center;gap:11px;cursor:pointer;
  font-family:var(--font-mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--white);background:rgba(8,8,9,.86);border:1px solid var(--line-soft);
  border-left:1px solid var(--red);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:9px 14px;appearance:none;
  transition:border-color .3s ease,box-shadow .35s ease,transform .45s var(--ease),opacity .35s ease}
.bag:hover{border-color:rgba(236,238,242,.3);box-shadow:0 0 34px -14px var(--red-glow)}
.bag .n{font-family:var(--font-display);font-size:15px;letter-spacing:.02em;line-height:1}
.bag .ct{color:var(--ash)}
.bag.pop{animation:bagpop .5s var(--ease)}
@keyframes bagpop{0%{transform:scale(1)}38%{transform:scale(1.07)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.bag.pop{animation:none}}

/* the drawer — the curtain's gesture, pulled from the other side */
.tillveil{position:fixed;inset:0;z-index:880;background:rgba(5,5,6,.72);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;pointer-events:none;transition:opacity .5s var(--ease)}
.tillveil.open{opacity:1;pointer-events:auto}
.till{position:fixed;top:0;right:0;z-index:881;height:100dvh;
  width:min(470px,100vw);display:flex;flex-direction:column;
  background:linear-gradient(200deg,rgba(18,18,20,.99),rgba(8,8,9,.99) 52%);
  border-left:1px solid var(--line);
  transform:translateX(101%);transition:transform .62s cubic-bezier(.72,0,.24,1);
  box-shadow:-40px 0 90px -50px rgba(0,0,0,.95)}
.till.open{transform:none}
.till::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1px;
  background:linear-gradient(180deg,transparent,var(--red) 18%,var(--red) 82%,transparent);
  box-shadow:0 0 22px var(--red-glow)}
.till .head{display:flex;align-items:center;justify-content:space-between;
  padding:22px clamp(18px,3vw,28px) 18px;border-bottom:1px solid var(--line-soft)}
.till .head h2{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:21px;letter-spacing:.09em;color:var(--white)}
.till .shut{background:none;border:0;cursor:pointer;color:var(--chrome-mid);
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  padding:6px 2px;transition:color .3s ease}
.till .shut:hover{color:var(--red-bright)}
.till .shelf{flex:1;overflow-y:auto;overscroll-behavior:contain;
  padding:0 clamp(18px,3vw,28px) 10px;scrollbar-width:thin}
.till .empty{font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;
  line-height:1.9;color:var(--ash);padding:var(--s4) 0;text-align:center}

.till .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;
  padding:19px 0;border-bottom:1px solid var(--line-soft);align-items:baseline}
.till .row .nm{grid-column:1;font-family:var(--font-display);font-weight:400;
  text-transform:uppercase;font-size:16px;letter-spacing:.035em;line-height:1.15;color:var(--white)}
.till .row .amt{grid-column:2;text-align:right;white-space:nowrap;
  font-family:var(--font-display);font-size:16px;color:var(--white)}
.till .row .per{grid-column:1 / -1;font-family:var(--font-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin-top:3px}
.till .row .tools{grid-column:1 / -1;display:flex;align-items:center;gap:10px;margin-top:9px}
.till .row .tools button{width:21px;height:21px;background:transparent;cursor:pointer;
  border:1px solid var(--chrome-lo);color:var(--chrome-hi);font-family:var(--font-mono);
  font-size:12px;line-height:1;display:grid;place-items:center;
  transition:border-color .3s ease,background .3s ease,color .3s ease}
.till .row .tools button:hover{border-color:var(--red);background:var(--red);color:var(--white)}
.till .row .tools output{min-width:22px;text-align:center;font-family:var(--font-display);
  font-size:14px;color:var(--white)}
.till .row .tools .kill{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--ash);background:none;border:0;width:auto;height:auto;
  margin-left:auto;cursor:pointer;transition:color .3s ease}
.till .row .tools .kill:hover{color:var(--red-bright);background:none;border:0}

.till .who{padding:var(--s3) 0 0;border-top:1px solid var(--line-soft);margin-top:var(--s2)}
.till .who .lead{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--chrome-mid);margin-bottom:var(--s2)}
.till .who .field{margin-bottom:18px}
.till .who .field > .q{font-size:9.5px;margin-bottom:8px}
.till .who textarea{min-height:68px}

.till .foot{padding:18px clamp(18px,3vw,28px) calc(18px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line-soft);background:rgba(8,8,9,.96)}
.till .sum{display:flex;align-items:baseline;justify-content:space-between;gap:14px}
.till .sum .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--ash)}
.till .sum .n{font-family:var(--font-display);font-size:clamp(28px,6vw,38px);line-height:.95;color:var(--white)}
.till .mo{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  color:var(--red);margin-top:7px;line-height:1.6}
.till .foot .door{width:100%;justify-content:center;margin-top:14px}
.till .foot .note{margin-top:12px;font-size:10px;line-height:1.7}

/* the control that puts something in the bag */
.toss{display:inline-flex;align-items:center;gap:8px;cursor:pointer;appearance:none;
  background:transparent;border:0;border-bottom:1px solid var(--line);padding:0 0 4px;
  font-family:var(--font-mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chrome-mid);transition:color .3s ease,border-color .3s ease,gap .3s ease}
.toss:hover{color:var(--red-bright);border-bottom-color:var(--red);gap:13px}
.toss.in{color:var(--white);border-bottom-color:var(--red)}

/* ── 18 · THE FOLKS — the two people, said properly ─────────────────────────
   A founder photo is where most sites drop out of their own design: a circle,
   a drop shadow, a LinkedIn crop. These are held shots, the same as the act
   plates — the portrait dissolves to black on all four sides and the story
   sits beside it rather than under it, so the picture is part of the page
   instead of an avatar glued to it. */
.folks{margin-top:clamp(34px,5vh,60px)}
.folk{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1fr);
  gap:clamp(26px,5vw,76px);align-items:center;margin-top:var(--s6)}
.folk:first-child{margin-top:clamp(20px,3vh,36px)}
@media(max-width:860px){
  .folk{grid-template-columns:1fr;gap:clamp(20px,4vh,34px);margin-top:var(--s5)}
  .folk figure{order:0!important}
}
/* the second portrait sits on the other side, so the page alternates and the
   eye has a reason to keep going */
.folk:nth-child(even) figure{order:2}

.folk figure{position:relative}
.folk figure img{width:100%;height:auto;display:block;
  /* THE LAW OF THE FRONT DOOR: nothing has a hard rectangular edge. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),
                     linear-gradient(180deg,transparent,#000 8%,#000 88%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent),
                     linear-gradient(180deg,transparent,#000 8%,#000 88%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
  transition:transform 1.4s var(--ease),filter 1.4s var(--ease)}
.folk:hover figure img{transform:scale(1.015)}
/* the house light falls on them too */
.folk figure::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(58% 38% at 50% 14%,rgba(212,42,42,.14),transparent 72%)}

.folk .alias{font-family:var(--font-mono);font-size:var(--t-label);
  letter-spacing:var(--ls-label);text-transform:uppercase;color:var(--red);
  display:block;margin-bottom:var(--s2)}
.folk h3{font-family:var(--font-display);font-weight:400;text-transform:uppercase;
  font-size:clamp(30px,4.4vw,62px);line-height:.92;letter-spacing:var(--ls-head);color:var(--white)}
.folk .role{font-family:var(--font-mono);font-size:11px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--chrome-mid);display:block;margin-top:var(--s2)}
.folk p{font-size:var(--t-body);line-height:1.72;color:var(--dim);
  margin-top:var(--s3);max-width:52ch;text-wrap:pretty}
.folk p strong{color:var(--white);font-weight:600}
.folk p em{color:var(--red);font-style:normal}
.folk .credits{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;
  line-height:2;color:var(--ash);margin-top:var(--s3);
  padding-top:var(--s3);border-top:1px solid var(--line-soft);max-width:52ch}
.folk .credits b{color:var(--chrome-hi);font-weight:400}