/* DRAFT I — GATE PANEL, DARK.
   Draft G's structure, spacing rhythm and interaction mechanics, restyled onto
   the palette, type and surface treatment of the LIVE avx-01 site. Tokens are
   lifted verbatim from study-hub-landing/public/css/system.css:
     ground #0D0D0C · ink #ECE9E2 · dim #8E8C84 · accent #FF4D00
     --line rgba(236,233,226,.10) · --line-2 rgba(236,233,226,.18)
   Archivo (display) + IBM Plex Mono (.mono), both self-hosted.

   Loads AFTER paper.css and ticket.css, so this file re-points their palette
   tokens and replaces the two recipes that are ground-specific: the glass and
   the button. Everything else in those two files is already token-driven and
   is reused untouched — ticket.css itself is NOT edited, because g/ and h/
   still rely on it.

   HARD RULE OBSERVED: no decorative background of any family. No radial wash,
   aurora, mesh, glow, ember or orb; no grid, dot-matrix, checkerboard,
   blueprint, noise or scanline; at any opacity. Every ground here is a flat
   colour. The only blur on the page is real glass, and the only thing it
   blurs is real content physically behind it: the departure board's .ghost
   codes run full-bleed UNDER the rail in section 03. The dashboard capture
   used to as well, but it is now sized to sit fully to the right of the rail,
   so the board is the pane the rail refracts. */

:root{
  /* ── the live site's palette, verbatim ─────────────────────────────────*/
  --paper:#0D0D0C;          /* --ground */
  --paper2:#111110;         /* one step up, for raised surfaces */
  --ink:#ECE9E2; --ink2:#C8C4BB; --ink3:#8E8C84;
  --rule:rgba(236,233,226,.10);    /* --line */
  --rule2:rgba(236,233,226,.18);   /* --line-2 */
  --panel:rgba(236,233,226,.028);
  --acc:#FF4D00; --acc-d:#FF4D00; --acc-hot:#ff6524; --acc-ink:#0D0D0C;
  --acc-cast:rgba(255,77,0,.4);
  --wash:rgba(236,233,226,.035);

  /* glass, retuned for a dark ground */
  --glass-line:rgba(236,233,226,.16);
  --glass-under:rgba(0,0,0,.72);
  --glass-pool:rgba(0,0,0,.85);
  --glass-cast1:rgba(0,0,0,.5);
  --glass-cast2:rgba(0,0,0,.92);

  /* the deep panes: a well below the ground, not a second brand */
  --board:#080807; --board2:#141413; --board3:#1C1C1A;
  --board-ink:#ECE9E2; --board-dim:#8E8C84;
  --flap:#FF4D00;

  --railw:clamp(282px,24vw,392px);
}
body{overflow-x:hidden;background:var(--paper);color:var(--ink)}
::selection{background:var(--acc);color:#0D0D0C}
.skip{color:#0D0D0C}
img{display:block;max-width:100%}

/* ── type: the live site's display weight and tracking ───────────────────*/
.d1{font-weight:800;line-height:.9;letter-spacing:-.035em}
.d2{font-weight:800;line-height:.94;letter-spacing:-.03em}
.turn{color:var(--acc)}
.lbl{letter-spacing:.15em;color:var(--ink3)}
.lbl-acc{color:var(--acc)}
.body{color:var(--ink2)}
.dim{color:var(--ink3)}
.mark i{color:#0D0D0C;border-radius:2px}
.mark span{color:var(--ink3)}

/* ── GLASS ON A DARK GROUND ──────────────────────────────────────────────
   The inverse problem to paper.css: on black the rim is what defines the
   pane, so the lit top edge is thick, the underside goes properly dark, and
   saturate() stays in the backdrop-filter so whatever is behind keeps its
   colour through the blur. */
.glass{
  background:linear-gradient(157deg,
     rgba(236,233,226,.075) 0%,
     rgba(236,233,226,.042) 44%,
     rgba(236,233,226,.028) 78%,
     rgba(236,233,226,.055) 100%);
  backdrop-filter:blur(22px) saturate(165%);
  -webkit-backdrop-filter:blur(22px) saturate(165%);
  border:1px solid var(--glass-line);
  border-radius:3px;
  box-shadow:
    inset 0 1px 0 rgba(236,233,226,.30),      /* lit top rim */
    inset 1px 0 0 rgba(236,233,226,.14),      /* lit left edge */
    inset -1px 0 0 rgba(0,0,0,.55),           /* dark right edge */
    inset 0 -1px 0 var(--glass-under),        /* dark underside */
    inset 0 -34px 46px -36px var(--glass-pool),
    0 1px 1px var(--glass-cast1),
    0 30px 62px -30px var(--glass-cast2);
}
.glass::before{                                /* specular sweep */
  background:linear-gradient(118deg,
     rgba(236,233,226,.13) 0%,
     rgba(236,233,226,.05) 16%,
     rgba(236,233,226,0)   34%,
     rgba(236,233,226,0)   72%,
     rgba(236,233,226,.065) 100%);
}
.glass::after{                                 /* the caught rim */
  background:linear-gradient(90deg,transparent,rgba(236,233,226,.55) 42%,rgba(236,233,226,.26),transparent);
}

/* ── buttons: the live site's rule, including the appearance reset. A bare
      <button> without it renders on the OS buttonface grey and the label
      disappears against it. ─────────────────────────────────────────────*/
.btn{padding:.95em 1.5em;border:1px solid var(--rule2);border-radius:2px;
  background:transparent;color:inherit;
  font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.15em;
  text-transform:uppercase;line-height:1;
  -webkit-appearance:none;appearance:none;cursor:pointer;text-align:center;
  backdrop-filter:none;-webkit-backdrop-filter:none;box-shadow:none;
  transition:border-color .35s var(--e),color .35s var(--e),background .35s var(--e)}
.btn:hover{opacity:1;background:transparent;border-color:var(--acc);color:var(--acc)}
.btn-acc{background:var(--acc);border-color:var(--acc);color:#0D0D0C;box-shadow:none}
.btn-acc:hover{background:var(--acc-hot);border-color:var(--acc-hot);color:#0D0D0C}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ── ticket primitives, re-inked for the dark ground ─────────────────────*/
.flap b{background:var(--board2);box-shadow:inset 0 1px 0 rgba(236,233,226,.07),inset 0 -1px 0 rgba(0,0,0,.7)}
.flap-st b{color:var(--ink)}
.brow.on .flap-st b{color:var(--acc)}
.board{border-radius:0}
.board-top{border-bottom-color:var(--rule)}
.brow{border-bottom-color:var(--rule)}
.bhd{background:var(--board2)}
.foil dd{color:var(--acc)}
.step{background:var(--paper2);border-color:var(--rule);border-radius:2px}
.bars i{background:var(--ink);opacity:.55}
.foot-in{border-top-color:var(--rule)}
.foot-in a{color:var(--ink2)}

/* ══════════════ THE STUB RAIL ══════════════════════════════════════════*/
.rail{
  position:fixed;left:0;top:0;bottom:0;width:var(--railw);z-index:40;
  display:flex;flex-direction:column;
  padding:clamp(26px,2.4vw,38px) clamp(22px,2vw,32px);
  border-radius:0;border:0;border-right:1px dashed var(--r-line);
  /* local ink set, retuned wholesale when a deep pane is beneath */
  --r-ink:var(--ink);--r-ink2:var(--ink2);--r-ink3:var(--ink3);
  --r-line:var(--rule2);--r-acc:var(--acc);
  background:linear-gradient(158deg,
     rgba(236,233,226,.085) 0%,
     rgba(236,233,226,.048) 46%,
     rgba(236,233,226,.032) 78%,
     rgba(236,233,226,.058) 100%);
  backdrop-filter:blur(26px) saturate(160%);-webkit-backdrop-filter:blur(26px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(236,233,226,.22),
    inset 1px 0 0 rgba(236,233,226,.12),
    inset -20px 0 42px -38px #000,
    30px 0 70px -34px #000;
  color:var(--r-ink);
  transition:background var(--t-slow) var(--e2),color var(--t-slow) var(--e2),
             backdrop-filter var(--t-slow) var(--e2),
             border-color var(--t-slow) var(--e2)}
/* over a deep pane the fill thins right down, so the departure board and the
   dashboard capture genuinely read through the glass instead of being washed
   out by it. This is the whole point of the rail. */
.rail.dark{
  --r-line:rgba(236,233,226,.22);
  background:linear-gradient(158deg,
     rgba(236,233,226,.038) 0%,
     rgba(236,233,226,.018) 60%,
     rgba(236,233,226,.03) 100%);
  backdrop-filter:blur(15px) saturate(185%);-webkit-backdrop-filter:blur(15px) saturate(185%)}
.rail > *{position:relative;z-index:2}

.rail .mark{color:var(--r-ink)}
.rail .mark span{color:var(--r-ink3)}
.rail .sub{margin-top:clamp(14px,1.4vw,20px);padding-bottom:clamp(20px,2vw,28px);
  border-bottom:1px solid var(--r-line);color:var(--r-ink3);
  transition:color var(--t-slow) var(--e2),border-color var(--t-slow) var(--e2)}

/* the section index, with a travelling gate marker instead of a lit background */
.idx{position:relative;margin-top:clamp(18px,1.8vw,26px);display:flex;flex-direction:column}
.idx .tick{position:absolute;left:0;top:0;width:2px;height:var(--th,44px);background:var(--r-acc);
  transform:translateY(var(--ty,0));
  transition:transform .55s var(--e),height .55s var(--e)}
.idx a{display:grid;grid-template-columns:2.4rem minmax(0,1fr);gap:1rem;align-items:baseline;
  padding:clamp(12px,1.25vw,16px) clamp(12px,1.2vw,16px);
  font:500 .66rem/var(--lh-h) var(--mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--r-ink3);transition:color var(--t-mid) var(--e)}
.idx a .n{color:var(--r-ink3);transition:color var(--t-mid) var(--e)}
.idx a:hover{color:var(--r-ink)}
.idx a.on{color:var(--r-ink)}
.idx a.on .n{color:var(--r-acc)}

/* rail readout — bordered rows, padded on both axes */
.rout{margin-top:auto;border-top:1px solid var(--r-line);transition:border-color var(--t-slow) var(--e2)}
.rout div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--gut);align-items:baseline;
  padding:clamp(13px,1.3vw,17px) clamp(8px,1vw,14px);border-bottom:1px solid var(--r-line);
  transition:border-color var(--t-slow) var(--e2)}
.rout dt{font:400 .6rem/var(--lh-h) var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--r-ink3)}
.rout dd{font:500 .7rem/var(--lh-h) var(--mono);letter-spacing:.08em;color:var(--r-acc);white-space:nowrap}
.rout .now dd{color:var(--r-ink)}

.rail .btn{margin-top:clamp(18px,1.8vw,26px);width:100%;padding-inline:1rem}
.rail .btn-acc{background:var(--acc);color:#0D0D0C;border-color:var(--acc)}

/* the stub foot: coded strip + sequence, the way a real counterfoil ends */
.stubfoot{margin-top:clamp(18px,1.8vw,26px);padding-top:clamp(16px,1.6vw,22px);
  border-top:1px dashed var(--r-line);display:flex;align-items:flex-end;justify-content:space-between;
  gap:var(--gut);transition:border-color var(--t-slow) var(--e2)}
.stubfoot .sq{font:400 .58rem/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--r-ink3)}
.stubfoot .bars i{background:var(--r-ink);opacity:.5}

/* the perforation fill: the tear line down the rail's right edge fills as you
   board the page */
.railfill{position:absolute;top:0;right:-1px;width:1px;height:100%;background:var(--acc);
  transform:scaleY(0);transform-origin:50% 0;z-index:3}

/* ══════════════ THE FLOW: full-bleed panes running under the rail ═══════*/
.flow{position:relative;z-index:1}
.pane{position:relative;border-top:1px solid var(--rule);
  padding:clamp(58px,6.5vw,116px) clamp(30px,4vw,80px) clamp(58px,6.5vw,116px)
          calc(var(--railw) + clamp(34px,3.4vw,76px))}
.pane:first-child{border-top:0}
.pane-in{max-width:1000px}
.pane.stock{background:var(--paper2)}

/* the deep surfaces, full-bleed so they pass right under the rail */
.pane.dark{background:var(--board);color:var(--board-ink);border-top-color:var(--rule);
  min-height:min(96vh,900px);display:flex;flex-direction:column;justify-content:center}
.pane.dark .body{color:var(--ink2)}
/* the codes that live behind the rail, sized to be legible AS refraction */
.ghost{position:absolute;left:clamp(14px,1.6vw,26px);top:50%;transform:translateY(-50%);
  width:calc(var(--railw) - clamp(24px,2.6vw,40px));display:grid;gap:clamp(18px,2.2vw,30px);
  font:800 clamp(2.3rem,3.7vw,3.5rem)/1 var(--display);letter-spacing:-.035em;
  color:rgba(236,233,226,.14)}

/* board inside the deep pane: it is already on the deep ground */
.pane.dark .board{background:transparent;margin-top:clamp(28px,3vw,44px);
  border:1px solid var(--rule)}
.pane.dark .board-top{padding-inline:clamp(20px,2.2vw,30px)}
.pane.dark .brow{padding-inline:clamp(20px,2.2vw,30px)}

/* ── hero ────────────────────────────────────────────────────────────────*/
.hero{min-height:min(94vh,880px);display:flex;flex-direction:column;justify-content:center}
.hero .lbl{display:block;margin-bottom:clamp(20px,2vw,30px)}
.hero .d1{margin-bottom:clamp(24px,2.4vw,34px);font-size:clamp(2.4rem,5.4vw,5rem)}
.hero .cta{margin-top:clamp(28px,2.8vw,42px)}
.hero .foil{margin-top:clamp(36px,4vw,58px);padding:0;border-top:1px solid var(--rule);
  padding-top:clamp(24px,2.6vw,34px)}

/* ── section head ────────────────────────────────────────────────────────*/
.phd{display:flex;align-items:center;gap:.9rem;margin-bottom:clamp(24px,2.6vw,38px)}
.phd .n{font:500 .66rem/1 var(--mono);letter-spacing:.15em;color:var(--acc)}
.phd .t{font:500 .66rem/1 var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.phd .r{flex:1;min-width:20px;height:1px;background:var(--rule2)}
.d2 + .body{margin-top:clamp(18px,2vw,26px)}

/* ══════════════ 02 · DASHBOARD STACK ══════════════════════
   Four real captures of the real product, fanned so each one keeps an edge in
   the open behind the one in front. Every card is a real <button>, so the lift
   answers a pointer AND a keyboard, and its accessible name is the img alt.

   GEOMETRY. The fan travel is a fixed length (--fan), never a percentage, so
   the stack needs no aspect-ratio arithmetic: the four cards are grid-stacked
   in cell 1/1 at the content-box width, and the stack's own padding is exactly
   the room the transformed cards fan out into. Transforms do not affect
   layout, so nothing overflows the section and nothing reflows on hover.

   MOTION. Only transform and opacity animate, so the whole thing composites on
   its own layer. --s is the scale knob and --ct the corner travel; reduced
   motion zeroes both and leaves the z-order, the opacity and the text swap. */
#shots .pane-in{max-width:1180px}       /* the stack is the hero of this section */
.dcopy{margin-top:clamp(18px,2vw,26px)}
.dcopy .dname{margin-bottom:clamp(10px,1.1vw,15px)}
/* four lines reserved. The copy swaps under the pointer and the stack sits
   BELOW it, so an unreserved region would shove the stack out from under the
   cursor and flicker between two states. */
.dcopy .dtext{min-height:calc(var(--lh-b) * 4em)}

.dstack{--fan:clamp(12px,1.6vw,26px);
  /* prints dropped on a table, not a fan. Each one sits at its own angle in
     a loose two-by-two scatter and only the corners overlap, so every card is
     a target you can hit without going through another one. Small at rest
     because hover enlarges them.

     THE ARITHMETIC, since translate() percentages resolve against the CARD,
     not the stack: --tx is a share of card WIDTH, --ty a share of card HEIGHT,
     and the capture is 16:9 so the height is ~9/16 of the width. Two cards
     just touch side by side at +/-50% of width and just touch stacked at
     +/-50% of height; the values below sit a few points inside that, which is
     the few-pixel corner overlap, and each is jittered so it does not read as
     a grid. The stack reserves the room the rotated corners sweep into. */
  position:relative;display:grid;justify-items:center;align-items:center;
  margin-top:clamp(30px,3.2vw,48px);
  min-height:clamp(360px,46vw,700px);
  padding:clamp(26px,3vw,48px) 0}
.dcard{grid-area:1/1;position:relative;width:min(42%,430px);padding:0;
  border:1px solid var(--rule2);border-radius:0;background:#050504;
  font:inherit;color:inherit;text-align:left;
  -webkit-appearance:none;appearance:none;cursor:pointer;
  --s:1;--ct:0px;--rot:0deg;--tx:0px;--ty:0px;
  opacity:calc(1 - var(--i) * .06);
  transform:translate(var(--tx),var(--ty)) rotate(var(--rot)) scale(var(--s));
  box-shadow:0 2px 5px rgba(0,0,0,.7),0 32px 64px -38px #000;
  transition:transform .55s var(--e),opacity .45s var(--e),border-color .45s var(--e)}
.dcard img{width:100%;height:auto}
.dcard:nth-child(1){--i:0;z-index:4;--rot0:-6.5deg;--tx0:-47%;--ty0:-44%;--rot:-6.5deg;--tx:-47%;--ty:-44%}
.dcard:nth-child(2){--i:1;z-index:3;--rot0:5deg;--tx0:48%;--ty0:-47%;--rot:5deg;--tx:48%;--ty:-47%}
.dcard:nth-child(3){--i:2;z-index:2;--rot0:7.5deg;--tx0:-50%;--ty0:45%;--rot:7.5deg;--tx:-50%;--ty:45%}
.dcard:nth-child(4){--i:3;z-index:1;--rot0:-4.5deg;--tx0:46%;--ty0:48%;--rot:-4.5deg;--tx:46%;--ty:48%}
/* the card in hand: straightens, grows and ticks out WHERE IT LIES. It must
   not travel to the middle: at this spread a corner print would move ~200px
   out from under the pointer, drop the hover, snap back, and flicker. */
.dcard:hover,.dcard:focus-visible{--s:1.45;--ct:12px;--rot:0deg;
  z-index:10;opacity:1;border-color:var(--acc);
  box-shadow:0 4px 10px rgba(0,0,0,.75),0 60px 110px -40px #000}
/* the four ticks below ARE the focus indicator, and they are a louder one than
   a ring: 2px accent brackets driven 12px off every corner, over an accent
   border and a scale step. A ring on top of them just reads as a second, wider
   rectangle fighting the flourish. Forced colours cannot paint pseudo-element
   borders reliably, so that mode gets a real outline instead. */
.dcard:focus-visible{outline:none}
@media (forced-colors:active){
  .dcard:hover,.dcard:focus-visible{outline:2px solid Highlight;outline-offset:6px}
}

/* ── the corner ticks ───────────────────────────────────────
   Four brackets that push outward off the card's own corners, the way an
   instrument frames a target. Two come from the button, two from one inert
   .dcnr span, which is why four corners cost one element instead of four. */
.dcnr{position:absolute;inset:0;pointer-events:none}
.dcard::before,.dcard::after,.dcnr::before,.dcnr::after{
  content:"";position:absolute;width:clamp(20px,2vw,34px);height:clamp(20px,2vw,34px);
  border:0 solid var(--acc);opacity:0;pointer-events:none;
  transition:transform .55s var(--e),opacity .4s var(--e)}
.dcnr::before{left:-1px;top:-1px;border-left-width:2px;border-top-width:2px;
  transform:translate(calc(var(--ct) * -1),calc(var(--ct) * -1))}
.dcard::before{right:-1px;top:-1px;border-right-width:2px;border-top-width:2px;
  transform:translate(var(--ct),calc(var(--ct) * -1))}
.dcard::after{left:-1px;bottom:-1px;border-left-width:2px;border-bottom-width:2px;
  transform:translate(calc(var(--ct) * -1),var(--ct))}
.dcnr::after{right:-1px;bottom:-1px;border-right-width:2px;border-bottom-width:2px;
  transform:translate(var(--ct),var(--ct))}
.dcard:hover::before,.dcard:hover::after,
.dcard:hover .dcnr::before,.dcard:hover .dcnr::after,
.dcard:focus-visible::before,.dcard:focus-visible::after,
.dcard:focus-visible .dcnr::before,.dcard:focus-visible .dcnr::after{opacity:1}

@media (prefers-reduced-motion:reduce){
  .dcard{transition:opacity .2s linear,border-color .2s linear}
  /* the print stays exactly where it was dropped: with no transition, letting
     hover straighten it would snap it upright, which is worse than not moving */
  .dcard:hover,.dcard:focus-visible{--s:1;--ct:0px;
    --rot:var(--rot0);--tx:var(--tx0);--ty:var(--ty0)}
  .dcard::before,.dcard::after,.dcnr::before,.dcnr::after{transition:opacity .2s linear}
}

.teasercap{margin-top:clamp(30px,3.2vw,46px);border-top:1px solid var(--rule2)}
.teasercap div{display:grid;grid-template-columns:minmax(var(--labelw),11rem) minmax(0,1fr);
  gap:var(--gut);align-items:baseline;
  padding:var(--padb) var(--padi);border-bottom:1px solid var(--rule)}
.teasercap dt{font:500 .64rem/var(--lh-h) var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--acc)}
.teasercap dd{font:400 .88rem/var(--lh-b) var(--display);color:var(--ink2);max-width:60ch}

/* ── the board's third column ───────────────────────────────────
   The board chrome is G's, untouched, and so is the register: .bname is
   already the mono, uppercase, tracked face the flap tiles are set in, which
   is what makes a row scan as a departure line instead of a paragraph.

   A board does not explain, it lists. There is no prose face in here at all:
   the only thing under a name is a terse mono line in the .bunits / .bskill
   register, and only where a row genuinely carries codes. Rows stay
   vertically centred against their flaps, per ticket.css. */
.bcell{display:block;min-width:0}
.bunits{display:block;margin-top:.9rem;font:500 .6rem/1.95 var(--mono);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.bskill{display:block;margin-top:.55rem;font:400 .58rem/var(--lh-h) var(--mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
.bskill a{color:var(--acc);border-bottom:1px solid rgba(255,77,0,.45)}
.bskill a:hover{color:var(--acc-hot);border-bottom-color:var(--acc-hot)}

/* ── the roll ────────────────────────────────────────────────────────────
   cloudnexis.net's two-layer swap, verbatim mechanic: layer a rolls out
   under a clip while layer b rolls in. Both layers are inert text inside the
   button, so the click target, the focus ring and the modal are untouched —
   and the row's own :hover / :focus-visible drives it, which is why the
   pointer never has to find the words themselves. */
.rollx{display:grid;min-width:0}
.rollx .swap{grid-area:1/1;display:block;
  transition:clip-path .55s var(--e),transform .55s var(--e),color .55s var(--e)}
.rollx .swap.a{clip-path:inset(0)}
.rollx .swap.b{clip-path:inset(100% 0 0 0);transform:translateY(.42em);color:var(--acc)}
.rollrow:hover .rollx .swap.a,
.rollrow:focus-visible .rollx .swap.a{clip-path:inset(0 0 100% 0);transform:translateY(-.42em)}
.rollrow:hover .rollx .swap.b,
.rollrow:focus-visible .rollx .swap.b{clip-path:inset(0);transform:none}

/* ══════════════ 04 · PASSES — every row opens its own window ════════════*/
.courses{display:grid;gap:clamp(11px,1.2vw,16px);margin-top:clamp(28px,3vw,44px)}
/* overflow:hidden is the fix for the punched holes, not a cosmetic choice.
   Each stamp is a full 26px circle centred ON the card's top and bottom edge,
   so it used to spill 13px past the card at both ends — 26px of circle trying
   to live in an 11-16px row gap, which is why consecutive rows' stamps met in
   the middle and read as one blob. Clipping them to the card leaves exactly
   the half-moon that a real perforation is, spills nothing into the gap, and
   needs no reserved space or per-row offset. */
.crow{display:grid;grid-template-columns:minmax(0,1fr) auto;background:var(--paper2);
  border:1px solid var(--rule);border-radius:3px;text-align:left;width:100%;
  font:inherit;color:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;
  overflow:hidden;
  box-shadow:0 1px 1px var(--glass-cast1),0 18px 34px -30px #000;
  transition:background-color var(--t-mid) var(--e),border-color var(--t-mid) var(--e)}
.crow:hover{background-color:rgba(236,233,226,.045);border-color:var(--rule2)}
.crow:hover .go{color:var(--acc-hot)}
.crow-main{padding:clamp(24px,2.6vw,34px) var(--padi);display:flex;flex-direction:column;
  gap:clamp(9px,1vw,13px);min-width:0}
.crow-main .nm{font:700 clamp(1.1rem,1.6vw,1.4rem)/var(--lh-h) var(--display);letter-spacing:-.018em;
  text-transform:uppercase;color:var(--ink)}
.crow-main p{font:400 .86rem/var(--lh-b) var(--display);color:var(--ink2);max-width:54ch}
.crow-main .go{margin-top:.25rem;font:500 .62rem/1 var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--acc);transition:color var(--t-mid) var(--e)}
.crow-stub{position:relative;width:clamp(102px,9vw,140px);border-left:1px dashed var(--rule2);
  display:grid;justify-items:center;align-content:center;gap:clamp(10px,1.2vw,16px);
  padding:clamp(22px,2.4vw,30px) clamp(14px,1.6vw,20px)}
.crow-stub::before,.crow-stub::after{content:"";position:absolute;left:-13px;width:26px;height:26px;
  border-radius:9999px;background:var(--paper);box-shadow:inset 0 2px 3px rgba(0,0,0,.7)}
.crow-stub::before{top:-13px}
.crow-stub::after{bottom:-13px}
.crow-stub .code{font:800 clamp(1.45rem,2vw,1.95rem)/1 var(--display);letter-spacing:-.025em;color:var(--acc)}
.crow-stub .sq{font:400 .56rem/1 var(--mono);letter-spacing:.18em;color:var(--ink3)}

/* ══════════════ COURSE WINDOW ══════════════════════════════════════════
   Structure and classes taken from the signup modal on the live site, and so
   is the thing that was debugged there: .modal-card is a flex COLUMN capped
   at 92dvh, .su-body is the ONLY scroller, and .su-row sits OUTSIDE it, so
   the actions are reachable at every viewport height. Do not fold .su-row
   back into the scroller. */
.modal{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:14px}
.modal[hidden]{display:none}
.modal-scrim{position:absolute;inset:0;background:rgba(6,6,6,.8);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.modal-card{position:relative;width:min(600px,100%);
  max-height:92vh;max-height:92dvh;
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--paper);border:1px solid var(--rule2);
  box-shadow:0 60px 120px -50px #000}
/* the card takes focus on open so screen readers land inside the dialog. It is
   a container, not a control, so it does not draw a ring — every interactive
   child inside it still does. */
.modal-card:focus,.modal-card:focus-visible{outline:none}
.su-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem clamp(18px,2.4vw,30px);border-bottom:1px solid var(--rule)}
.su-rail{display:flex;flex-wrap:wrap;gap:.55rem .95rem;font-size:.55rem;color:var(--ink3)}
.su-rail button{background:none;border:0;padding:0;color:inherit;cursor:pointer;
  font:500 .55rem/1.4 var(--mono);letter-spacing:.15em;text-transform:uppercase;
  -webkit-appearance:none;appearance:none;
  opacity:.35;transition:opacity .3s var(--e),color .3s var(--e)}
.su-rail button:hover{opacity:.8}
.su-rail button.on{opacity:1;color:var(--acc)}
.modal-x{flex:0 0 auto;background:none;border:0;color:var(--ink3);font-size:1.4rem;
  line-height:1;cursor:pointer;padding:.1rem .3rem;-webkit-appearance:none;appearance:none}
.modal-x:hover{color:var(--acc)}

.su-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;padding:clamp(20px,2.6vw,30px) clamp(18px,2.4vw,30px)}
.su-row{flex:0 0 auto;display:flex;justify-content:space-between;align-items:center;gap:.8rem;
  padding:clamp(14px,1.8vw,20px) clamp(18px,2.4vw,30px);
  border-top:1px solid var(--rule);background:var(--paper)}
.su-row .btn{flex:0 1 auto}

.su-code{font:500 .66rem/1 var(--mono);letter-spacing:.15em;color:var(--acc);margin-bottom:.9rem}
.su-h{font:800 clamp(1.4rem,2.6vw,2rem)/1.04 var(--display);letter-spacing:-.028em;text-transform:uppercase}
.su-p{margin-top:.7rem;color:var(--ink2);font-size:.95rem;line-height:1.6}
.su-spec{margin-top:clamp(18px,2vw,26px);border-top:1px solid var(--rule)}
.su-spec div{display:grid;grid-template-columns:minmax(var(--labelw),9.5rem) minmax(0,1fr);
  gap:var(--gut);align-items:baseline;
  padding:clamp(13px,1.4vw,17px) clamp(2px,.4vw,6px);border-bottom:1px solid var(--rule)}
.su-spec dt{font:400 .6rem/var(--lh-h) var(--mono);letter-spacing:.15em;text-transform:uppercase;color:var(--ink3)}
.su-spec dd{font:500 .72rem/var(--lh-h) var(--mono);letter-spacing:.08em;color:var(--ink)}
.su-sub{margin-top:clamp(20px,2.2vw,28px);font:500 .6rem/1 var(--mono);letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink3)}
.su-list{list-style:none;margin:.95rem 0 0;padding:0;display:grid;
  border-top:1px solid var(--rule)}
.su-list li{padding:clamp(11px,1.2vw,15px) clamp(2px,.4vw,6px);border-bottom:1px solid var(--rule);
  color:var(--ink2);font-size:.86rem;line-height:1.55}

/* ── start ───────────────────────────────────────────────────────────────*/
.start .body{margin-top:clamp(20px,2vw,30px)}
.start .steps{margin-top:clamp(30px,3.2vw,46px)}
.start .cta{margin-top:clamp(28px,2.8vw,42px)}

/* ══════════════ 03 · THE BOARD ROW UNDER THE POINTER ════════════════════
   ticket.css owns .brow.on and is shared with g/ and h/, so the same lit
   treatment is restated here against :hover and :focus-within instead. Pure
   CSS: the row still answers the pointer with the script blocked, and the
   rows carry tabindex so the keyboard reaches them too. */
.board-grid .brow:not(.bhd):hover,
.board-grid .brow:not(.bhd):focus-within{background:var(--board2)}
.board-grid .brow:not(.bhd):hover .bname,
.board-grid .brow:not(.bhd):focus-within .bname{color:var(--acc)}
.board-grid .brow:not(.bhd):hover .flap-st b,
.board-grid .brow:not(.bhd):focus-within .flap-st b{color:var(--acc)}

/* ══════════════ ENTRANCE: a pane resolves part by part ══════════════════
   paper.css + js/rev.js already gate the pane itself on [data-rev]. This
   staggers what is INSIDE it so a section lands piece by piece instead of as
   one block. Transform and opacity only, one curve, 18px of travel, no bounce.

   The hidden state is scoped to html.anim, a class js/i.js sets the moment it
   parses. That is deliberate: with the script blocked NOTHING below is hidden,
   so the pattern that already blanks [data-rev] is not extended by a single
   further element. The movement is the enhancement, never the gate. */
html.anim .pane-in > *{
  transition:opacity .5s var(--e2),transform .5s var(--e2);
  transition-delay:var(--base,0s)}
html.anim .pane-in:not(.in) > *{opacity:0;transform:translateY(18px)}
.pane-in > *:nth-child(1){--base:.02s}
.pane-in > *:nth-child(2){--base:.10s}
.pane-in > *:nth-child(3){--base:.18s}
.pane-in > *:nth-child(4){--base:.26s}
.pane-in > *:nth-child(5){--base:.34s}
.pane-in > *:nth-child(6){--base:.42s}

/* one level deeper for the three real lists. --base inherits from the slot
   their container was given above, so the sweep CONTINUES through them rather
   than restarting at zero. Nothing here touches .dstack or .board, whose
   children carry transforms of their own. */
html.anim :is(.foil,.steps,.courses) > *{
  transition:opacity .5s var(--e2),transform .5s var(--e2)}
html.anim .pane-in:not(.in) :is(.foil,.steps,.courses) > *{opacity:0;transform:translateY(12px)}
html.anim :is(.foil,.steps,.courses) > *:nth-child(1){transition-delay:calc(var(--base,0s) + .08s)}
html.anim :is(.foil,.steps,.courses) > *:nth-child(2){transition-delay:calc(var(--base,0s) + .16s)}
html.anim :is(.foil,.steps,.courses) > *:nth-child(3){transition-delay:calc(var(--base,0s) + .24s)}
html.anim :is(.foil,.steps,.courses) > *:nth-child(4){transition-delay:calc(var(--base,0s) + .32s)}
html.anim :is(.foil,.steps,.courses) > *:nth-child(5){transition-delay:calc(var(--base,0s) + .40s)}

/* ── footer ──────────────────────────────────────────────────────────────*/
.foot{position:relative;z-index:1;
  padding:0 clamp(30px,4vw,80px) clamp(36px,4vw,56px) calc(var(--railw) + clamp(34px,3.4vw,76px))}

@media (max-width:900px){
  :root{--railw:0px}
  .rail{position:sticky;top:0;bottom:auto;width:100%;height:auto;flex-direction:row;
    align-items:center;gap:1.1rem;flex-wrap:wrap;
    border-right:0;border-bottom:1px dashed var(--r-line);
    padding:clamp(15px,3vw,22px) clamp(20px,4vw,28px)}
  .rail .sub,.idx,.rout,.stubfoot{display:none}
  .rail .btn{margin:0 0 0 auto;width:auto;padding:.8em 1.2em}
  .railfill{top:auto;bottom:-1px;right:auto;left:0;width:100%;height:1px;
    transform:scaleX(0);transform-origin:0 50%}
  .ghost{display:none}
  .pane,.foot{padding-left:clamp(20px,5vw,40px);padding-right:clamp(20px,5vw,40px)}
  .pane.dark{min-height:auto}
  .hero{min-height:auto}
  .dstack{--fan:clamp(6px,2vw,12px);min-height:clamp(300px,62vw,520px)}
  .dcard{width:min(47%,340px)}
  .dcard:nth-child(1){--rot0:-7deg;--tx0:-48%;--ty0:-45%;--rot:-7deg;--tx:-48%;--ty:-45%}
  .dcard:nth-child(2){--rot0:5.5deg;--tx0:49%;--ty0:-48%;--rot:5.5deg;--tx:49%;--ty:-48%}
  .dcard:nth-child(3){--rot0:8deg;--tx0:-51%;--ty0:46%;--rot:8deg;--tx:-51%;--ty:46%}
  .dcard:nth-child(4){--rot0:-5deg;--tx0:47%;--ty0:49%;--rot:-5deg;--tx:47%;--ty:49%}
  .dcard:hover,.dcard:focus-visible{--s:1.38}
  .teasercap div{grid-template-columns:minmax(0,1fr);gap:.8rem}
  .crow{grid-template-columns:minmax(0,1fr)}
  .crow-stub{width:auto;border-left:0;border-top:1px dashed var(--rule2);
    grid-auto-flow:column;justify-content:start;align-items:center;
    padding:clamp(16px,3.5vw,22px) var(--padi)}
  .crow-stub::before{top:-13px;left:-13px}
  .crow-stub::after{bottom:auto;top:-13px;left:auto;right:-13px}
}
@media (max-width:520px){
  .su-rail{font-size:.5rem;gap:.4rem .6rem}
  .su-row{flex-wrap:wrap}
  .su-row .btn{flex:1 1 auto}
  .su-spec div{grid-template-columns:minmax(0,1fr);gap:.6rem}
}