/* ============================================================================
   WILDER BULL & BEAR — HOUSE SYSTEM
   One stylesheet. Six pages. No per-page drift, no second stack.
   Laws honoured: Times New Roman house voice (mono for machine strings only),
   double-plate ticket notches, no doody-brown, blood #E50914 on verdicts only,
   7:1 small-text floor, compositor-only motion, reduced-motion at CSS + JS.
   ========================================================================= */

/* ---------------------------------------------------------------- TOKENS */
:root{
  /* THE VOID — warm where the story lives, cooling to the edges */
  --void:#050506;
  --void-warm:#0b0907;
  --plate:#090A0D;
  --plate-2:#0B0C11;
  --plate-3:#0E0F15;
  --seat:#000000;

  /* METAL — bright, saturated. No dark desaturated gold anywhere. */
  --gold-hi:#FBEFC4;
  --gold:#E8C557;
  --gold-mid:#D9B33F;
  --graphite:#33343B;      /* the seat of every rim gradient — neutral, never brown */
  --chrome:#D6DBE1;
  --chrome-lo:#79808A;

  /* INK — every value below measured against the plate face (#090A0D–#0E0F15).
     --dn is fixed at #FF6B76 by law, so the FACE is what moves to hold 7:1. */
  --ink:#F4F2EC;           /* 17.4:1 */
  --ink-2:#CBD1D8;         /* 11.9:1 */
  --dim:#A8B2BC;           /*  8.3:1 */
  --dim-2:#9AA5B1;         /*  7.1:1  — floor. Nothing dimmer carries text. */

  /* SEMANTIC */
  --up:#39D98A;            /* 11.0:1 */
  --dn:#FF6B76;            /*  7.3:1  — the only red glyph in the house */
  --blood:#E50914;         /* verdict fills / strokes / rims ONLY */
  --wire:#A9B4BF;

  /* HAIRLINES */
  --line:rgba(214,219,225,.13);
  --line-2:rgba(232,197,87,.26);
  --line-3:rgba(214,219,225,.07);

  /* FACES */
  --mono:'IBM Plex Mono','SFMono-Regular','Consolas',monospace;
  --house:'Times New Roman',Times,'Liberation Serif',serif;

  /* TYPE SCALE — strict. No two steps within 20% of each other. */
  --t-micro:10px;          /* machine labels        */
  --t-meta:12.5px;         /* machine strings  1.25 */
  --t-body:16px;           /* house prose      1.28 */
  --t-lead:20px;           /* house lead       1.25 */
  --t-title:25px;          /* card titles      1.25 */
  --t-h2:40px;             /* section heads    1.60 */
  --t-display:clamp(44px,4.8vw,92px);

  /* NOTCH GEOMETRY — Ticket Notch Law: ONE polygon per plate pair. The face
     carries the SAME cut as the edge and is inset by --tn-rim only, so the
     edge reads as a continuous ring of uniform width straight through the
     45-degree cut. A second, tighter polygon on the face is the outlawed
     recipe that floods every corner solid. */
  --tn:polygon(0 9px,9px 0,calc(100% - 9px) 0,100% 9px,100% calc(100% - 9px),calc(100% - 9px) 100%,9px 100%,0 calc(100% - 9px));
  --tn-sm:polygon(0 5px,5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px));
  --tn-rim:1.5px;

  /* MOTION — 150–400ms, house easing, compositor only */
  --ease:cubic-bezier(.16,.84,.44,1);
  --ease-seat:cubic-bezier(.45,0,.25,1);
  --t-fast:180ms;
  --t-mid:260ms;
  --t-slow:380ms;

  /* SPACE — the house runs wall to wall. No centred column, no letterbox. */
  --gut:24px;
  --gap:24px;
  --max:none;
}

/* ------------------------------------------------------------------ RESET */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:hidden}
body{
  min-height:100%;
  background:var(--void);
  color:var(--ink);
  font-family:var(--house);
  font-size:var(--t-body);
  line-height:1.7;
  overflow-x:hidden;
  position:relative;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
/* ATMOSPHERE — warm light where the story lives, cooling toward the edges,
   plus a barely-there vignette and a machined 26px rule grid. */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 8%, rgba(232,197,87,.075) 0%, rgba(232,197,87,.022) 34%, transparent 62%),
    radial-gradient(140% 100% at 50% 100%, rgba(6,8,14,.9) 0%, transparent 58%),
    linear-gradient(rgba(169,180,191,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(169,180,191,.045) 1px,transparent 1px),
    radial-gradient(115% 85% at 50% 42%, transparent 52%, rgba(0,0,0,.62) 100%);
  background-size:100% 100%,100% 100%,26px 26px,26px 26px,100% 100%;
}
/* GRAIN — a static tile, not a live filter. */
body::after{
  content:'';position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='150' height='150'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.86' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.88  0 0 0 0 0.82  0 0 0 0 0.66  0 0 0 0.45 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
.wrap{width:100%;max-width:var(--max);margin:0 auto;padding:0 var(--gut);position:relative;z-index:2}
img{max-width:100%;display:block}
a{color:inherit}
::selection{background:rgba(232,197,87,.28);color:var(--gold-hi)}

/* focus that answers back, everywhere */
:where(a,button,[tabindex]):focus-visible{
  outline:2px solid var(--gold);outline-offset:3px;border-radius:1px;
}

/* ------------------------------------------------------- ENGRAVED TYPE */
.meta{font:400 var(--t-meta)/1.5 var(--mono);letter-spacing:.16em}

/* ------------------------------------------------ THE PLATE (double-plate)
   Host: transparent, no border, relative, isolated.
   ::before = EDGE plate (inset 0, z -2). ::after = FACE (inset rim, z -1).
   Shadow lives on the host as a drop-shadow filter. Never border + clip. */
.plate{
  position:relative;isolation:isolate;background:transparent;border:0;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 14px 34px rgba(0,0,0,.55));
  transition:filter var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
/* THE RIM GRADIENT — what it is FOR: a raking light catching a milled bevel.
   A real bevel's highlight band and base-shadow band are FIXED widths set by
   the light angle and cut depth — they do not stretch with the part's length.
   The old recipe used percentage stops, so a 900px pillar spread the same
   16%→42%→100% transition across hundreds of px and the rim read as a long
   muddy wash instead of milled metal. Fix: two FIXED-height bands (anchored
   top and bottom, painted first so they sit in front) over a flat base fill
   — the highlight and the shadow stay a constant width at any plate height;
   only the flat middle grows, and a flat fill never reads as "stretched."
   Every color below is an existing token or a literal already in this file
   (#565B66 was already the rim's base tone) — nothing new was invented. */
.plate::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  clip-path:var(--tn);
  background:
    linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 46%,var(--gold-mid) 100%) top/100% 72px no-repeat,
    linear-gradient(180deg,#565B66 0%,var(--graphite) 100%) bottom/100% 88px no-repeat,
    #565B66;
}
.plate::after{
  content:'';position:absolute;inset:var(--tn-rim);z-index:-1;pointer-events:none;
  clip-path:var(--tn);
  background:
    radial-gradient(120% 62% at 50% 0%, rgba(255,246,214,.055) 0%, transparent 70%),
    linear-gradient(180deg,var(--plate-3) 0%,var(--plate) 46%,var(--plate-2) 100%);
}
.plate > *{position:relative;z-index:2}

/* quiet variant — chrome rim, for supporting furniture. Same fixed-band fix. */
.plate.quiet::before{
  background:
    linear-gradient(180deg,rgba(233,238,244,.66) 0%,rgba(154,165,177,.42) 100%) top/100% 72px no-repeat,
    #565B66;
}
/* verdict variants — the ONE place a rim answers the tape.
   Blood rim for a bearish reading (lawful: verdict rims), up-green for bullish.
   Same fixed-band fix — no new colors, just the same stops restructured. */
.plate.verdict::before{
  background:
    linear-gradient(180deg,#FF5560 0%,var(--blood) 100%) top/100% 72px no-repeat,
    #6E1218;
}
.plate.bull::before{
  background:
    linear-gradient(180deg,#8CEFBD 0%,#2FB874 100%) top/100% 72px no-repeat,
    #175B36;
}

/* small double-plate pill — the ticket */
.tkt{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px;background:transparent;border:0;
  font:600 var(--t-micro)/1 var(--mono);letter-spacing:.26em;text-transform:uppercase;
  color:var(--dim);white-space:nowrap;
}
.tkt::before{
  content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;clip-path:var(--tn-sm);
  background:linear-gradient(180deg,rgba(232,197,87,.62) 0%,rgba(217,179,63,.34) 40%,var(--graphite) 100%);
}
.tkt::after{
  content:'';position:absolute;inset:var(--tn-rim);z-index:-1;pointer-events:none;clip-path:var(--tn-sm);
  background:linear-gradient(180deg,#0D0E13,#07080B);
}
.tkt b{color:var(--gold);font-weight:600;letter-spacing:.2em}
.tkt.on{color:var(--ink-2)}
.tkt.on::before{background:linear-gradient(180deg,rgba(57,217,138,.7) 0%,rgba(57,217,138,.3) 40%,var(--graphite) 100%)}
.tkt.off{color:var(--dim-2)}
.tkt.off::before{background:linear-gradient(180deg,rgba(214,219,225,.4) 0%,rgba(121,128,138,.22) 40%,var(--graphite) 100%)}

/* the live dot */
.dot{width:6px;height:6px;border-radius:50%;background:var(--up);box-shadow:0 0 7px rgba(57,217,138,.9);animation:pulse 2s var(--ease-seat) infinite;flex:0 0 auto}
.dot.d-off{background:var(--dim-2);box-shadow:none;animation:none}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.78)}}

/* ------------------------------------------------------------ BUTTONS */
.btn{
  position:relative;isolation:isolate;display:inline-flex;align-items:center;gap:10px;
  padding:14px 26px;border:0;background:transparent;cursor:pointer;text-decoration:none;
  font:700 var(--t-meta)/1 var(--mono);letter-spacing:.22em;text-transform:uppercase;
  transition:transform var(--t-fast) var(--ease), filter var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
  filter:drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 8px 20px rgba(0,0,0,.5));
}
.btn::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;clip-path:var(--tn-sm)}
.btn::after {content:'';position:absolute;inset:var(--tn-rim);z-index:-1;pointer-events:none;clip-path:var(--tn-sm)}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(1px);transition-duration:90ms}
/* unreachable today — nothing in markup/JS sets aria-disabled or :disabled on
   a .btn yet. Kept: a disabled CTA (execute/submit, once live trading lands)
   is a plausible near-term state, and losing the dimmed/no-pointer-events
   treatment would leave a disabled button reading as clickable. One line,
   defensive, not a defect. H5 six-state sweep, 2026-08-31. */
.btn[aria-disabled="true"],.btn:disabled{pointer-events:none;opacity:.4;filter:none}

.btn-gold{color:#0A0800}
.btn-gold::before{background:linear-gradient(180deg,#FFF8DC,#C9A62F)}
.btn-gold::after {background:linear-gradient(160deg,var(--gold-hi) 0%,var(--gold) 46%,var(--gold-mid) 100%)}
.btn-gold:hover{filter:drop-shadow(0 2px 2px rgba(0,0,0,.8)) drop-shadow(0 10px 26px rgba(232,197,87,.34))}

.btn-ghost{color:var(--ink-2)}
.btn-ghost::before{background:linear-gradient(180deg,rgba(232,197,87,.55),var(--graphite))}
.btn-ghost::after {background:linear-gradient(180deg,#0E0F15,#08090C)}
.btn-ghost:hover{color:var(--gold-hi)}
.btn-ghost:hover::after{background:linear-gradient(180deg,#15161E,#0B0C11)}

/* ------------------------------------------------------------ MASTHEAD */
.mast{
  position:sticky;top:0;z-index:60;
  background:linear-gradient(180deg,rgba(5,5,6,.97) 0%,rgba(5,5,6,.88) 100%);
  -webkit-backdrop-filter:blur(14px) saturate(150%);backdrop-filter:blur(14px) saturate(150%);
  box-shadow:0 1px 0 rgba(232,197,87,.2), 0 -1px 0 rgba(255,255,255,.04) inset, 0 12px 34px rgba(0,0,0,.7);
}
.mast-in{display:flex;align-items:center;gap:26px;height:76px}
.crest{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto;position:relative}
.crest .cw{position:relative;width:48px;height:48px;flex:0 0 auto;display:grid;place-items:center}
.crest .cw::before{content:'';position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(232,197,87,.34),transparent 68%)}
.crest img{width:48px;height:48px;object-fit:contain;position:relative}
.crest .wm{font-family:var(--house);font-weight:700;font-size:19px;letter-spacing:.11em;color:var(--gold-hi);line-height:1.05}
.crest .wm small{display:block;font:400 9.5px/1.4 var(--mono);letter-spacing:.3em;color:var(--dim-2);margin-top:3px;text-transform:uppercase}
.mast-nav{display:flex;align-items:center;gap:2px;margin:0 auto}
.mast-nav a{
  position:relative;padding:10px 15px;text-decoration:none;white-space:nowrap;
  font:400 var(--t-meta)/1 var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--dim);
  transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.mast-nav a::after{
  content:'';position:absolute;left:15px;right:15px;bottom:2px;height:1px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);transform-origin:50%;transition:transform var(--t-mid) var(--ease);
}
.mast-nav a:hover{color:var(--gold-hi)}
.mast-nav a:hover::after{transform:scaleX(1)}
.mast-nav a[aria-current="page"]{color:var(--gold-hi)}
.mast-nav a[aria-current="page"]::after{transform:scaleX(1);background:linear-gradient(90deg,transparent,var(--gold-hi),transparent)}
.mast-right{display:flex;align-items:center;gap:14px;flex:0 0 auto}

/* ------------------------------------------------------------ THE TAPE */
.tape{
  position:relative;z-index:6;display:flex;align-items:stretch;height:44px;overflow:hidden;
  background:linear-gradient(180deg,#0c0d11,#06070a);
  box-shadow:0 1px 0 rgba(232,197,87,.16), 0 -1px 0 rgba(0,0,0,.9) inset, 0 8px 22px rgba(0,0,0,.55);
}
.tape-tag{
  flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:0 18px;z-index:3;
  font:600 var(--t-micro)/1 var(--mono);letter-spacing:.28em;color:var(--gold);text-transform:uppercase;
  background:linear-gradient(90deg,rgba(232,197,87,.16),rgba(232,197,87,.03));
  box-shadow:1px 0 0 rgba(232,197,87,.24);
}
.tape-view{flex:1;position:relative;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 62px,#000 calc(100% - 76px),transparent 100%);
          mask-image:linear-gradient(90deg,transparent 0,#000 62px,#000 calc(100% - 76px),transparent 100%);
}
.tape-run{display:inline-flex;align-items:center;height:100%;white-space:nowrap;gap:34px;padding-left:26px;
  animation:runL 72s linear infinite;will-change:transform}
.tape:hover .tape-run{animation-play-state:paused}
.tape:focus-within .tape-run{animation-play-state:paused}
@keyframes runL{from{transform:translate3d(0,0,0)}to{transform:translate3d(-50%,0,0)}}
.tk{display:inline-flex;align-items:baseline;gap:8px;font:400 var(--t-meta)/1 var(--mono);letter-spacing:.05em;color:var(--ink-2);cursor:pointer;transition:color var(--t-fast) var(--ease)}
.tk:hover{color:var(--gold-hi)}
.tk b{color:var(--gold);font-weight:600;letter-spacing:.12em}
.tk .v{font-variant-numeric:tabular-nums}
.tk .u{color:var(--up)} .tk .d{color:var(--dn)}
.tape-dead{display:flex;align-items:center;gap:10px;padding-left:26px;height:100%;font:400 var(--t-meta)/1 var(--mono);letter-spacing:.2em;color:var(--dim-2);text-transform:uppercase}

/* ------------------------------------------------------------- PANELS */
.p-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:13px 16px 12px;
  background:linear-gradient(90deg,rgba(232,197,87,.075),transparent 72%);
  box-shadow:0 1px 0 var(--line);
}
.p-head .l{display:flex;align-items:center;gap:10px;min-width:0}
.p-head .k{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.3em;color:var(--gold);text-transform:uppercase;white-space:nowrap;
  text-shadow:0 1px 0 rgba(0,0,0,.92), 0 -1px 0 rgba(255,255,255,.06)}
.p-head .r{display:flex;align-items:center;gap:8px;font:400 var(--t-micro)/1 var(--mono);letter-spacing:.22em;color:var(--dim-2);text-transform:uppercase;white-space:nowrap;flex:0 0 auto}
.p-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:11px 16px;margin-top:auto;
  background:linear-gradient(0deg,rgba(232,197,87,.06),transparent);
  box-shadow:0 -1px 0 var(--line);
  font:400 var(--t-micro)/1 var(--mono);letter-spacing:.2em;color:var(--dim-2);text-transform:uppercase;
  white-space:nowrap;
}
.p-foot > span{overflow:hidden;text-overflow:ellipsis;min-width:0}
.p-foot a{flex:0 0 auto;color:var(--gold);text-decoration:none;font-weight:600;transition:color var(--t-fast) var(--ease)}
.p-foot a:hover{color:var(--gold-hi)}

/* corner registration ticks */
.ticks{position:absolute;inset:0;pointer-events:none;z-index:4}
.ticks i{position:absolute;width:11px;height:11px;border:1px solid rgba(232,197,87,.5);opacity:.75}
.ticks i.a{top:5px;left:5px;border-right:0;border-bottom:0}
.ticks i.b{top:5px;right:5px;border-left:0;border-bottom:0}
.ticks i.c{bottom:5px;left:5px;border-right:0;border-top:0}
.ticks i.d{bottom:5px;right:5px;border-left:0;border-top:0}

/* ----------------------------------------------------------- SECTIONS */
.sec{padding:78px 0 0;position:relative;z-index:2}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:34px}
h1,h2,h3{font-family:var(--house);font-weight:700}
.sec-head h2{font-size:var(--t-h2);letter-spacing:.02em;line-height:1.05;color:var(--ink)}
.sec-head h2 b{color:var(--gold-hi);font-weight:700}
.sec-head .s{font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.28em;color:var(--dim-2);text-transform:uppercase;padding-bottom:6px}
.rule{height:1px;background:linear-gradient(90deg,rgba(232,197,87,.45),rgba(214,219,225,.1) 42%,transparent);margin-bottom:34px}

/* ------------------------------------------------------------- FOOTER */
.foot{margin-top:86px;padding:26px 0 44px;position:relative;z-index:2;
  box-shadow:0 -1px 0 var(--line)}
.foot-in{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:18px;
  font:400 var(--t-micro)/1.6 var(--mono);letter-spacing:.24em;color:var(--dim-2);text-transform:uppercase}
.foot-in b{color:var(--dim);font-weight:600}
.foot-in a{color:var(--gold);text-decoration:none}
.foot-in a:hover{color:var(--gold-hi)}
.plaque{
  margin:0 0 22px;padding:14px 20px;
  font:400 var(--t-meta)/1.8 var(--mono);letter-spacing:.14em;color:var(--dim);text-transform:uppercase;
  text-align:center;
}
.plaque b{color:var(--gold);font-weight:600}
.sec .plaque{margin-top:var(--gap)}

/* ------------------------------------------------------- PAGE HEROES (subpages)
   THE ROOM HERO — the front door's material language brought to a single wide
   band. The front door is a three-column instrument panel: crest centred,
   light pooled under it, two flanking plates standing guard. A room hero is
   one object, not three, so it does not copy that composition — it takes the
   same three ingredients (atmosphere, a floor the type sits on, machined
   edges) and states them as one panel instead of a cluster of panels. */
.pg{padding:80px 0 46px;position:relative;isolation:isolate;z-index:2;overflow:hidden}

/* THE FLOOR — atmosphere, not decoration. A warm pool of light sits where the
   kicker and h1 live (upper-left, where the eye lands first), cooling toward
   the band's own edges exactly the way body::before cools toward the void's
   edges — same recipe, scoped to this panel instead of the viewport. Under
   it: the same three plate tones (--plate-3 → --plate → --plate-2) used by
   every .plate face in the house, so the type sits ON a milled surface
   instead of floating on raw black. Two inset hairlines — gold catching the
   top edge, neutral closing the bottom — read as the panel's machined seam,
   the same grammar .tape and .p-head/.p-foot already use for unclipped bands
   (notch geometry is reserved for discrete plates/tickets/buttons, never for
   a full-bleed band — see Ticket Notch Law). No outward drop-shadow: the
   band sits flush against the section that follows, it does not cast onto it. */
.pg::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 150% at 18% 6%, rgba(232,197,87,.13) 0%, rgba(232,197,87,.04) 38%, transparent 68%),
    radial-gradient(120% 130% at 50% 0%, transparent 46%, rgba(0,0,0,.5) 100%),
    linear-gradient(180deg,var(--plate-3) 0%,var(--plate) 52%,var(--plate-2) 100%);
  box-shadow:inset 0 1px 0 rgba(232,197,87,.22), inset 0 -1px 0 var(--line-3);
}

/* the engraved kicker, with the front door's flanking rules — a machined
   label, not a typed one. */
.pg .k{
  display:inline-flex;align-items:center;gap:12px;
  font:600 var(--t-micro)/1 var(--mono);letter-spacing:.34em;color:var(--gold);text-transform:uppercase;margin-bottom:20px;
  text-shadow:0 1px 0 rgba(0,0,0,.92), 0 -1px 0 rgba(255,255,255,.06);
}
.pg .k::before,.pg .k::after{content:'';width:30px;height:1px;flex:0 0 auto;background:linear-gradient(90deg,transparent,rgba(232,197,87,.7))}
.pg .k::after{background:linear-gradient(270deg,transparent,rgba(232,197,87,.7))}

.pg h1{font-size:clamp(34px,5.4vw,76px);letter-spacing:.015em;line-height:1.02;color:var(--ink);
  overflow-wrap:break-word;max-width:100%;
  text-shadow:0 2px 0 rgba(0,0,0,.7), 0 -1px 0 rgba(255,255,255,.05)}
.pg h1 b{color:var(--gold-hi)}
.pg .sub{margin-top:20px;max-width:70ch;font-size:var(--t-lead);line-height:1.62;color:var(--ink-2)}

/* room monogram — the sub-page hero's right void, cut into the plate as a
   foundry mark. Machine string (mono), nearly-invisible, behind the text
   (negative z-index inside .pg's own stacking context — see PANEL 6 of the
   stacking order: negative-z descendants paint below normal-flow content).
   Sits at the SAME z-index as the floor (.pg::before) but paints after it —
   ::after always paints above a sibling ::before at equal z-index — so the
   monogram reads as one layer cut deeper into the same floor, never a second
   surface stacked on top of it. */
/* unreachable today — all five sub-pages currently set data-room. Kept: an
   explicit guard against a future .pg added without one, so a stray
   ::after box never appears by accident if the base rule below is ever
   generalised. H5 six-state sweep, 2026-08-31. */
.pg:not([data-room])::after{content:none}
.pg[data-room]::after{
  content:attr(data-room);
  position:absolute;top:52%;right:clamp(8px,3vw,54px);z-index:-1;
  transform:translateY(-50%);
  font:700 180px/1 var(--mono);letter-spacing:-.03em;
  color:rgba(232,197,87,.08);
  text-shadow:0 3px 0 rgba(0,0,0,.85), 0 -1.5px 0 rgba(255,255,255,.05);
  pointer-events:none;user-select:none;white-space:nowrap;
}

/* generic content card */
.grid3{display:grid;grid-template-columns:repeat(auto-fit,minmax(304px,1fr));gap:var(--gap)}
/* ORPHAN CONTROL. `auto-fit` strands a single card on its own last row
   whenever the item count leaves a remainder of one — four cards in three
   columns (3+1), three cards in two (2+1). The home page's .rooms and .laws
   already take explicit column counts for exactly this reason; the room
   pages' .grid3 never did, so ten grids across all five sub-pages were free
   to strand. Derive the column count from the real child count instead of
   hoping the track algorithm lands well. Browsers without :has() fall back
   to plain auto-fit, which is the behaviour they have today. */
@media(min-width:1024px) and (max-width:1439px){
  .grid3:has(> :nth-child(4):last-child){grid-template-columns:repeat(2,1fr)}
}
@media(max-width:1023px){
  .grid3:has(> :nth-child(3):last-child){grid-template-columns:1fr}
}
.card{padding:24px 24px 22px;display:flex;flex-direction:column}
.card .tag{font:600 var(--t-micro)/1 var(--mono);letter-spacing:.3em;color:var(--gold);text-transform:uppercase;margin-bottom:14px;
  text-shadow:0 1px 0 rgba(0,0,0,.92), 0 -1px 0 rgba(255,255,255,.06)}
.card h3{font-size:var(--t-title);letter-spacing:.012em;line-height:1.2;color:var(--ink);margin-bottom:12px}
.card p{font-size:var(--t-body);line-height:1.72;color:var(--ink-2);max-width:66ch}
.card p + p{margin-top:12px}
.card:hover{transform:translateY(-3px);filter:drop-shadow(0 2px 3px rgba(0,0,0,.85)) drop-shadow(0 20px 44px rgba(0,0,0,.6)) drop-shadow(0 0 18px rgba(232,197,87,.16))}
/* .mono-in trimmed from this selector list (H5 six-state sweep, 2026-08-31) —
   unused today, but the block stays live via `code`. */
code{font:400 .88em/1.5 var(--mono);letter-spacing:.04em;color:var(--gold-hi);
  background:rgba(232,197,87,.09);padding:1px 6px}

/* reveal — default VISIBLE. JS opts elements out only when it can see them. */
.rv{opacity:1;transform:none}
.rv.pre{opacity:0;transform:translateY(20px)}
.rv.in{opacity:1;transform:none;transition:opacity var(--t-slow) var(--ease), transform var(--t-slow) var(--ease)}

/* --------------------------------------------------------- RESPONSIVE */
@media(max-width:1180px){ :root{--gut:20px} }
/* The masthead never clips a room off the map: below 1440px the nav becomes a
   scrollable rail on its own line — every door stays reachable at every width.
   (The single row's intrinsic width is ~1416px: crest + seven doors + bridge pill
   + VIP. Between 1101 and 1439 the old single row pushed VIP DOOR off the canvas
   with no scroll — measured live at 1207/1280/1366, Fable ceiling audit
   2026-08-31. Below 1440 the masthead takes its compact two-row form; at 1440+
   the single row is gate-proven.) */
@media(max-width:1439px){
  /* .mast-in IS the .wrap element. A `padding:10px 0 0` shorthand here wipes
     .wrap's own `0 var(--gut)` horizontal padding, which is why the crest sat
     flush on the left edge and the VIP pill kissed the right one below 1440
     while every other band on the page kept its gutter. Carry the gutter
     explicitly so the compact masthead lines up with the house. */
  .mast-in{height:auto;flex-wrap:wrap;gap:10px;padding:10px var(--gut) 0}
  .mast-nav{order:3;width:100%;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 4px;overflow-x:auto;justify-content:flex-start;gap:0;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;box-shadow:0 -1px 0 var(--line-3) inset;
    /* trailing-edge fade — the house's tape-view idiom, scoped to the one edge
       that actually clips (the rail starts at rest with nothing hidden behind
       it, so only the far edge reads as "more, not broken"). No scrollbar,
       no arrow — the fade alone is the affordance. */
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);
            mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 30px),transparent 100%);}
  .mast-nav::-webkit-scrollbar{display:none}
  .mast-nav a{padding:10px 11px;font-size:11.5px;letter-spacing:.16em}
  .mast-right{margin-left:auto;gap:9px}
  .crest{gap:10px}
  .crest .cw,.crest img{width:36px;height:36px}
  .crest .wm{font-size:16px;letter-spacing:.07em}
  .crest .wm small{font-size:8.5px;letter-spacing:.22em;margin-top:2px}
  .mast-right .btn{padding:10px 15px;font-size:11px;letter-spacing:.16em}
}
/* Room-page header cosmetics keep their original narrow-screen threshold —
   the ghost numeral and kicker rules render correctly down to 1101px. */
@media(max-width:1100px){
  .pg[data-room]::after{font-size:120px;right:20px}
  .pg .k::before,.pg .k::after{width:18px}
}
@media(max-width:860px){
  :root{--gut:16px;--t-h2:32px;--t-title:22px;--t-lead:18px;--t-body:15.5px}
  .tape{height:40px}
  .tape-tag{padding:0 12px;letter-spacing:.2em;font-size:9.5px}
  .sec{padding:56px 0 0}
  .pg{padding:52px 0 30px}
  .pg[data-room]::after{content:none}
  .foot{margin-top:56px}
}
@media(max-width:520px){
  .crest .wm small{display:none}
  .mast-right [data-engine-pill]{display:none}
  .pg .k{gap:8px}
  .pg .k::before,.pg .k::after{display:none}
}

/* ------------------------------------------------- REDUCED MOTION (CSS) */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;scroll-behavior:auto !important;
  }
  .tape-run{animation:none !important;transform:none !important}
  .rv.pre{opacity:1 !important;transform:none !important}
}