/* ════════════════════════════════════════════════════════════════════════════════════════════
   SKIN v12 — "LEDGER"  (ground-up rebuild, 2026-07-15)
   The observatory's instrument ledger: visible structure instead of floating furniture.
   v10/v11's glass cards, pill navigation and soft shadows are retired. Content now lives in
   RULED COMPARTMENTS — hairline-framed zones on one continuous near-black field — with the
   serif display voice, amber discipline, medal semantics, scratch reveals and press language
   carried forward intact (owner-won systems are law; only the costume is rebuilt).
   Loaded AFTER every page's inline <style>: equal-specificity rules here win the cascade, so
   this one file re-dresses all eleven pages. Rollback = skin-v11.css.bak.
   ════════════════════════════════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&display=swap');

:root {
  --serif: "Instrument Serif", Georgia, "Times New Roman", serif;
  --accent-hover: #d2611f;                     /* pressed shade of the amber family */
  --rule: rgba(255, 255, 255, .10);            /* the ledger line — ALL structure is drawn with it */
  --rule-soft: rgba(255, 255, 255, .055);      /* interior row rules */
  --pane: rgba(255, 255, 255, .015);           /* compartment fill: barely-there lift off the ground */
  --pane-hover: rgba(255, 255, 255, .04);
}

/* ── coordinates for pointer-driven layers (scratch window / spotlight) ──
   inherits:true — set on the row/card, consumed by CHILD layers. Length-only with px initial:
   a %→px transition can't interpolate and wedges under rapid pointermove restarts. */
@property --mx { syntax: '<length>'; inherits: true; initial-value: 0px; }
@property --my { syntax: '<length>'; inherits: true; initial-value: 0px; }

/* ════════════════════════ GROUND ════════════════════════ */
/* one near-black environment with two whisper radial washes (owner: dead-flat read "too plain") */
body { background:
  radial-gradient(1200px 620px at 15% -260px, rgba(var(--accent-rgb), .05), transparent 62%),
  radial-gradient(1000px 540px at 88% -200px, rgba(var(--accent-2-rgb), .04), transparent 64%),
  var(--ground) !important;
  background-attachment: fixed, fixed, scroll !important; }
.phero::before, .phead::before, header.top::before, #ambient, .grain { display: none !important; }
::selection { background: rgba(var(--accent-rgb), .28); color: var(--ink); }

/* ════════════════════════ CHROME · THE LEDGER BAR ════════════════════════ */
/* v12: the floating pill trio becomes one full-width ruled bar. Brand = serif italic wordmark,
   links = flat type with an amber STAMP underline on the active page (ink pills retired). */
header.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-header);
  background: color-mix(in srgb, var(--ground) 82%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--rule); }
header.topbar .bar { max-width: var(--maxw); margin: 0 auto; padding: 0;
  display: flex; align-items: stretch; justify-content: space-between; gap: 12px; min-height: 62px;
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none; }
header.topbar .brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; }
header.topbar .brand #brandT, header.topbar .brand span:not(.mark) {
  font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 21px;
  letter-spacing: -.01em; color: var(--ink); text-transform: none; }
/* The endorsement, deliberately subordinate: an endorsed product reads as ONE name with a maker's
   note, not two competing brands. Mono against the serif wordmark makes the two typographically
   distinct rather than merely smaller, and the hairline separates without a comma doing the work.
   Hidden on narrow bars, where the product name alone has to carry it. */
header.topbar .brand .mark {
  font-family: var(--mono); font-size: 9.5px; font-weight: 500; letter-spacing: .1em;
  text-transform: uppercase; color: var(--faint); white-space: nowrap;
  padding-left: 9px; border-left: 1px solid var(--line); align-self: center; }
@media (max-width: 720px) { header.topbar .brand .mark { display: none; } }
/* v13.30: the links sit in their own ruled BAY — hairlines flank the group, so the bar reads as
   compartments (brand | pages | language) of one instrument, not three things floating in space */
header.topbar .navlinks { position: static; transform: none; display: flex; align-items: stretch;
  gap: 0; padding: 0 6px; background: transparent; border: 0; border-radius: 0;
  border-left: 1px solid var(--rule-soft); border-right: 1px solid var(--rule-soft);
  margin: 0 auto;   /* the bay floats CENTRED between brand and language — air on both sides,
                       not one dense cluster against the wordmark (app.css pins it left) */
  -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }
header.topbar .navlinks::after { display: none; }
header.topbar .navlinks a { position: relative; display: inline-flex; align-items: center;
  padding: 0 13px; border-radius: 0; font-size: 13px; font-weight: 500;
  color: var(--muted); text-decoration: none; border: 0; background: transparent;
  transition: color var(--dur-1) var(--ease-micro), background var(--dur-1) var(--ease-micro), transform var(--dur-2) var(--ease-spring); }
header.topbar .navlinks a:hover { color: var(--ink); background: rgba(255,255,255,.03); }
header.topbar .navlinks a:active { transform: scale(.96); transition-duration: .08s; }
/* every link carries a stamp slot on the bar's bottom rule: hover presses in a faint ghost, the
   active page holds the amber stamp — one system, two states */
header.topbar .navlinks a::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px;
  background: rgba(255,255,255,.24); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-1) var(--ease-micro); }
header.topbar .navlinks a:hover::after { transform: scaleX(1); }
header.topbar .navlinks a.on, header.topbar .navlinks a[aria-current="page"] {
  color: var(--ink); background: transparent; }
header.topbar .navlinks a.on::after, header.topbar .navlinks a[aria-current="page"]::after {
  background: var(--accent); transform: scaleX(1); }
header.topbar .navlinks a:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }

/* v13.31: nine flat tabs made the bay read as a wall of equal weight, so it now carries four pages
   and folds the rest into a "More" disclosure (built in skin.js by MOVING the existing anchors —
   see the note there). The trigger is styled as a peer of the links, not as a button: same type,
   same size, same stamp slot on the bar's bottom rule, so the bay still reads as one row of
   compartments. When the page you are on lives inside the panel, the trigger holds the amber stamp
   — otherwise the bar would claim no page is active. */
header.topbar .navmore { position: relative; display: inline-flex; align-items: stretch; }
header.topbar .navmore-t { position: relative; display: inline-flex; align-items: center; gap: 6px;
  padding: 0 13px; margin: 0; border: 0; border-radius: 0; background: transparent; cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1; color: var(--muted);
  transition: color var(--dur-1) var(--ease-micro), background var(--dur-1) var(--ease-micro); }
header.topbar .navmore-t:hover { color: var(--ink); }
header.topbar .navmore-t:focus-visible { outline: 2px solid var(--accent); outline-offset: -4px; }
header.topbar .navmore-t::after {
  content: ""; position: absolute; left: 11px; right: 11px; bottom: -1px; height: 2px;
  background: rgba(255,255,255,.24); transform: scaleX(0); transform-origin: center;
  transition: transform var(--dur-1) var(--ease-micro); }
header.topbar .navmore-t:hover::after,
header.topbar .navmore.open .navmore-t::after { transform: scaleX(1); }
header.topbar .navmore.on .navmore-t { color: var(--ink); }
header.topbar .navmore.on .navmore-t::after { background: var(--accent); transform: scaleX(1); }
header.topbar .navmore-c { flex: none; transition: transform var(--dur-1) var(--ease-micro); }
header.topbar .navmore.open .navmore-c { transform: rotate(180deg); }
/* the panel continues the bar rather than floating free of it: same tinted glass, hairline sides,
   and no top border so it reads as the bay extended downward past the rule */
header.topbar .navmore-p { position: absolute; top: 100%; right: -1px; z-index: 1; min-width: 210px;
  display: flex; flex-direction: column; padding: 5px 6px 8px;
  background: color-mix(in srgb, var(--ground) 94%, transparent);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid var(--rule); border-top: 0;
  box-shadow: 0 20px 44px -20px rgba(0,0,0,.8); }
/* Setting `display` above defeats the `hidden` attribute: the UA rule is a bare `[hidden]`, so ANY
   author display declaration outranks it and the panel renders permanently open. Restate it. */
header.topbar .navmore-p[hidden] { display: none; }
header.topbar .navmore.open .navmore-p { animation: navmore-in var(--dur-2) var(--ease-spring) both; }
@keyframes navmore-in { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
header.topbar .navmore-h { margin: 10px 10px 2px; font-family: var(--mono); font-size: 9.5px;
  font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
header.topbar .navmore-p a { padding: 9px 10px; min-height: 36px; }
header.topbar .navmore-p a::after { left: 10px; right: 10px; bottom: 5px; }

header.topbar .seg { align-self: center; border: 1px solid var(--rule); border-radius: 999px;
  padding: 2px; background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
header.topbar .seg button { border-radius: 999px; font-size: 12px; }
header.topbar .seg button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
main.wrap { padding-top: 76px; }

/* collision band: nothing to collide — links are in-flow; keep spacing sane at mid widths */
@media (max-width: 1439px) and (min-width: 861px) {
  header.topbar .navlinks a { padding: 0 10px; }
}
/* mobile: the bar wraps into two ruled rows; the link row scrolls */
@media (max-width: 860px) {
  header.topbar { position: sticky; }
  header.topbar .bar { flex-wrap: wrap; row-gap: 0; padding: 10px 14px; min-height: 0; }
  header.topbar .seg { order: 2; margin-left: auto; }
  header.topbar .navlinks { order: 3; flex-basis: 100%; min-width: 0;
    flex-wrap: nowrap; overflow-x: auto; max-width: 100%; justify-content: flex-start;
    border-top: 1px solid var(--rule-soft); margin-top: 10px;
    border-left: 0; border-right: 0; padding: 0;   /* the wrapped row keeps only its top rule */
    -ms-overflow-style: none; scrollbar-width: none; }
  header.topbar .navlinks::-webkit-scrollbar { display: none; }
  header.topbar .navlinks a { flex: 0 0 auto; min-height: 44px; }   /* HIG touch target */
  /* The "More" disclosure is a DESKTOP affordance only. This row is already a horizontal scroller,
     so there is no wall to solve here — and its overflow-x would clip an absolutely-positioned
     panel anyway (the topbar's backdrop-filter makes it a containing block, so position:fixed
     would not escape either). display:contents dissolves the wrapper so the five folded links flow
     back into the scroll strip in source order, exactly as before this feature existed.
     skin.js keeps the panel's `hidden` attribute off below this breakpoint so the two agree. */
  header.topbar .navmore, header.topbar .navmore-p { display: contents; }
  header.topbar .navmore-t, header.topbar .navmore-h { display: none; }
  header.topbar .seg button, .seg button { min-height: 44px; }
  main.wrap { padding-top: 0; }
  .stage { margin: 14px 0 26px; }
}

/* ════════════════════════ TYPE · DISPLAY VOICE ════════════════════════ */
.hero h1, .phero h1, .phead h1, header.top h1 {
  font-family: var(--serif); font-weight: 400; text-transform: none;
  letter-spacing: -.02em; line-height: .96; text-wrap: balance; }
.hero h1 .gl, .phero h1 .gl, .phead h1 .gl, .phead h1 .hl, .phero h1 .hl,
header.top h1 .gl, header.top h1 .hl, h1 .gl {
  font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em;
  color: rgba(240,238,230,.5) !important; text-shadow: none !important;
  text-transform: none; padding-right: .04em; }
.phero h1, .phead h1, header.top h1 { font-size: var(--h-page) !important; margin-bottom: 18px !important; }
.phero { padding-top: 54px !important; }
.hero p, .phero p, .phead .pintro, header.top .sub {
  color: var(--muted); font-size: clamp(15px, 1.6vw, 18px); line-height: 1.65; max-width: 60ch; }
.eyebrow, .peyebrow, .ueyebrow { font-size: 11px; letter-spacing: .3em; color: var(--muted); }
.eyebrow::before, .peyebrow::before, .ueyebrow::before { width: 34px; background: rgba(240,238,230,.34) !important; }

/* ════════════════════════ SECTION HEADS · LEDGER RULES ════════════════════════ */
/* v12 signature: every section OPENS with a full-width rule; the serif head sits under it,
   the mono note sits ON the line, right-aligned. Structure you can see. */
.sechd { margin: 0 0 26px !important; align-items: baseline !important;
  border-top: 1px solid var(--rule); padding-top: 18px; }
.sechd h2, .sblock > h2, .dethd h2 { font-family: var(--serif) !important; font-size: var(--h-section) !important;
  font-weight: 400 !important; text-transform: none !important; letter-spacing: -.015em !important;
  line-height: 1.04 !important; text-wrap: balance; }
.sec-h, .mcol .chd h2, .panel h2, .cmphd h3, .homeadv h3 {
  font-family: var(--serif) !important; font-size: var(--h-sub) !important;
  font-weight: 400 !important; text-transform: none !important; letter-spacing: -.01em !important; }
.umeta h1 { font-family: var(--serif) !important; font-weight: 400 !important; text-transform: none !important;
  font-size: clamp(38px, 5.6vw, 72px) !important; letter-spacing: -.02em !important; line-height: 1.0 !important;
  text-wrap: balance; }
.sechd h2, .sblock > h2, .dethd h2 { text-wrap: balance; }
.sechd .note { color: rgba(240,238,230,.5) !important; font-family: var(--mono) !important; }
.sec, .mapsec { margin: 0 0 var(--space-section) !important; }
.stage + .sec, .stage + section { margin-top: clamp(64px, 9vh, 110px) !important; }

/* ════════════════════════ SURFACES · COMPARTMENTS ════════════════════════ */
/* the fundamental change: no glass, no blur, no float. A compartment is a ruled zone —
   1px frame, square corners, near-nothing fill. Depth comes from the rules, not shadows. */
.scard, .card, .cref, .ufacts, .trend, .tablewrap, .about, .methcard, .qcard, .mcard,
.panel, .syscard, .cmpempty, .stats > *, .closing, .step,
.board, .dcard, .ustat, .mw-row {
  background: var(--pane) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
  background-image: none !important;
}
.scard::after, .card::after, .cref::after, .ufacts::after, .trend::after, .tablewrap::after,
.stats > *::after, .about::after, .cmpempty::after { display: none !important; }
.scard:hover, .card:hover, .cref:hover, .mcard:hover, .mw-row:hover, .scard:focus-within {
  border-color: rgba(255,255,255,.2) !important; background: var(--pane-hover) !important; }
/* the system-hue identity strip survives the frame (later rule, same importance) */
.syscard { border-top: 2px solid var(--sc, var(--rule)) !important; }
/* chart-in-panel: the panel is the frame; no double enclosure */
.panel .trend, .panel:has(.trend) .trend { background: transparent !important; border: 0 !important; }
.panel:has(.trend) { background: transparent !important; border-color: transparent !important; }
/* modal sheets need a solid surface over the scrim */
.cmpsheet { background: var(--surface) !important; border-radius: 0 !important; border: 1px solid var(--rule) !important; }
/* a11y: reduced transparency = solid fills */
@media (prefers-reduced-transparency: reduce) {
  .scard, .card, .cref, .ufacts, .trend, .tablewrap, .about, .mcard,
  .panel, .syscard, .cmpempty, .stats > *, .closing, .step,
  .board, .dcard, .ustat, .mw-row { background: var(--surface) !important; }
  header.topbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
    background: var(--surface) !important; }
}

/* ════════════════════════ BUTTONS · PRESS LANGUAGE ════════════════════════ */
/* shape law: compartments are square, AFFORDANCES are pills — the roundness itself says "touch me" */
.btn { border-radius: 999px; transition: transform var(--dur-2) var(--ease-spring),
  background var(--dur-1) var(--ease-micro), border-color var(--dur-1) var(--ease-micro),
  color var(--dur-1) var(--ease-micro), box-shadow .2s; }
.btn:hover { transform: scale(1.03); }
.btn:active { transform: scale(.95); transition-duration: .08s; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover);
  box-shadow: 0 10px 28px -8px rgba(var(--accent-rgb), .45); }
/* button-in-button: the trailing arrow lives in its own circular chip */
.btn .ar { width: 24px; height: 24px; border-radius: 999px; display: inline-grid; place-items: center;
  background: rgba(255,255,255,.1); font-size: 12px; margin-right: -6px;
  transition: transform var(--dur-1) var(--ease-micro), background var(--dur-1) var(--ease-micro); }
.btn.primary .ar { background: rgba(0,0,0,.14); }
.btn:hover .ar { transform: translate(2px, -1px); background: rgba(255,255,255,.16); }
.btn.primary:hover .ar { background: rgba(0,0,0,.2); }
select, input[type="search"], input[type="text"] { transition-timing-function: var(--ease-micro) !important; }
.mapreset, .tmerge, .trend .tmerge { transition: color var(--dur-1) var(--ease-micro),
  background var(--dur-1) var(--ease-micro), border-color var(--dur-1) var(--ease-micro),
  transform var(--dur-2) var(--ease-spring); }
.mapreset:active, .tmerge:active { transform: scale(.94); transition-duration: .08s; }

/* ════════════════════════ SEGMENTED CONTROLS ════════════════════════ */
/* the glide indicator survives v12 restyled: a soft square that slides between options */
.seg { position: relative; }
.seg .seg-ind { position: absolute; top: 2px; bottom: 2px; left: 0; border-radius: 6px; z-index: 0;
  background: rgba(255,255,255,.09); box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
  opacity: 0; transition: transform var(--dur-2) var(--ease-spring), width var(--dur-2) var(--ease-spring),
  opacity var(--dur-1) var(--ease-micro); pointer-events: none; }
.seg button { position: relative; z-index: 1; }
.seg.has-ind button.on, .seg.has-ind button[aria-pressed="true"] { background: transparent !important; box-shadow: none !important; }
header.topbar .seg .seg-ind { border-radius: 999px; background: var(--ink); }

/* ════════════════════════ ROWS · THE LEDGER ITSELF ════════════════════════ */
.lrow, .drow { border-bottom-color: var(--rule-soft) !important; }
a.lrow:hover, a.drow:hover { background: rgba(255,255,255,.035); }
/* scratch-ticket photo reveal (opt-in via data-ph; skin.js builds the layer on first hover) */
.lrow[data-ph], .drow[data-ph] { position: relative; overflow: hidden; }
.lrow .rowph, .drow .rowph { position: absolute; inset: 0; background-position: center; background-size: cover;
  opacity: 0; transition: opacity .35s var(--ease-micro), transform 1.2s var(--ease-out);
  transform: scale(1.05); pointer-events: none;
  -webkit-mask-image: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), #000 0 52%, transparent 78%);
  mask-image: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), #000 0 52%, transparent 78%); }
.lrow:hover .rowph, .drow:hover .rowph { opacity: .95; transform: none; }
.lrow[data-ph] > :not(.rowph), .drow[data-ph] > :not(.rowph) { position: relative; z-index: 1; }
/* crest chips: white plate for legibility on the dark field — square (shape law: data = slot,
   not pill) and sized up so the crest reads at a glance */
.mono-badge { width: 44px !important; height: 44px !important; font-size: 15px !important; border-radius: 0 !important; }
.ubadge .mono-badge { width: 62px !important; height: 62px !important; font-size: 22px !important; }   /* profile hero keeps its larger cut, corner squared above */

/* ════════════════════════ MEDALS & PODIUM (owner law — semantics unchanged) ════════════════════ */
.lrow:nth-child(-n+3) .pos, .rankpos .mc, .mc-v {
  box-sizing: border-box; width: 22px; height: 22px; line-height: 1;
  display: inline-grid; place-items: center; border-radius: 50%;
  font-weight: 700 !important; font-size: 11.5px; color: #1a1305 !important; text-shadow: none !important; }
.lrow:nth-child(1) .pos, .rankpos .mc.m1, .mc-v.m1 {
  background: radial-gradient(130% 130% at 32% 24%, #f7e7a8, var(--medal-1));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 12px rgba(198,154,43,.5), 0 2px 5px rgba(0,0,0,.4); }
.lrow:nth-child(2) .pos, .rankpos .mc.m2, .mc-v.m2 {
  background: radial-gradient(130% 130% at 32% 24%, #edece5, var(--medal-2));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 10px rgba(155,148,136,.4), 0 2px 5px rgba(0,0,0,.4); }
.lrow:nth-child(3) .pos, .rankpos .mc.m3, .mc-v.m3 {
  background: radial-gradient(130% 130% at 32% 24%, #e7ad7d, var(--medal-3));
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 0 9px rgba(179,116,60,.42), 0 2px 5px rgba(0,0,0,.4); }
/* graduated podium rows + medal wash (tier order 3→2→1 so value coins upgrade ties correctly) */
.lrow:nth-child(3), .lrow:has(.mc-v.m3) {
  padding-top: 15px; padding-bottom: 15px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--medal-3) 10%, transparent) 56px, transparent 380px); }
.lrow:nth-child(2), .lrow:has(.mc-v.m2) {
  padding-top: 20px; padding-bottom: 20px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--medal-2) 11%, transparent) 56px, transparent 410px); }
.lrow:nth-child(1), .lrow:has(.mc-v.m1) {
  padding-top: 26px; padding-bottom: 26px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--medal-1) 15%, transparent) 56px, transparent 460px); }
/* rankings table follows its medal spans through re-sorts */
tbody tr:has(.rankpos .mc.m3) { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--medal-3) 10%, transparent) 72px, transparent 420px); }
tbody tr:has(.rankpos .mc.m3) > td { padding-top: 18px; padding-bottom: 18px; }
tbody tr:has(.rankpos .mc.m2) { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--medal-2) 11%, transparent) 72px, transparent 450px); }
tbody tr:has(.rankpos .mc.m2) > td { padding-top: 22px; padding-bottom: 22px; }
tbody tr:has(.rankpos .mc.m1) { background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--medal-1) 15%, transparent) 72px, transparent 500px); }
tbody tr:has(.rankpos .mc.m1) > td { padding-top: 28px; padding-bottom: 28px; }
/* the FALLING column: descent-red coins + mirrored wash (podium recast, not borrowed gold) */
.mboard.down .lrow:nth-child(1) .pos {
  background: radial-gradient(130% 130% at 32% 24%, #ffb4a8, #de5748);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.5), 0 0 12px rgba(222,87,72,.45), 0 2px 5px rgba(0,0,0,.4);
  color: #2b0d09 !important; }
.mboard.down .lrow:nth-child(2) .pos {
  background: radial-gradient(130% 130% at 32% 24%, #f2c3ba, #bd6055);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.45), 0 0 10px rgba(189,96,85,.38), 0 2px 5px rgba(0,0,0,.4);
  color: #2b0d09 !important; }
.mboard.down .lrow:nth-child(3) .pos {
  background: radial-gradient(130% 130% at 32% 24%, #e6cfc6, #9d655c);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.4), 0 0 9px rgba(157,101,92,.34), 0 2px 5px rgba(0,0,0,.4);
  color: #2b0d09 !important; }
.mboard.down .lrow:nth-child(3) { padding-top: 15px; padding-bottom: 15px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #9d655c 10%, transparent) 56px, transparent 380px); }
.mboard.down .lrow:nth-child(2) { padding-top: 20px; padding-bottom: 20px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #bd6055 11%, transparent) 56px, transparent 410px); }
.mboard.down .lrow:nth-child(1) { padding-top: 26px; padding-bottom: 26px;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #de5748 15%, transparent) 56px, transparent 460px); }

/* ════════════════════════ DATA VOICE (mono readouts — owner law) ════════════════════════ */
.ustat .urank, .dcard .dv, .fct .fv, .mw-r { font-family: var(--mono) !important; font-weight: 600 !important; }
.rdonut .rd-c { font: 600 15px var(--mono) !important; }
/* Plex Mono ships 400/500/600 — anything asking for 700 gets a faux bold; clamp the strays */
.mono-badge, .score .num { font-weight: 600 !important; }

/* ════════════════════════ CHART CHROME (one family — owner law) ════════════════════════ */
.trend .tg, .rline .tg { stroke: var(--line-2); stroke-width: 1; stroke-dasharray: 2 7; opacity: .7; }
.trend .tax, .rline .tax { stroke: var(--line); stroke-width: 1; opacity: .5; }
.trend .tyl, .trend .txl, .rline .tyl, .rline .txl {
  fill: var(--faint); font: 10px var(--mono); font-variant-numeric: tabular-nums; letter-spacing: .02em; }
.trend .tyl, .rline .tyl { text-anchor: end; }
.rline .txl { text-anchor: middle; }
.tdots circle:not([stroke]) { stroke: var(--ground); stroke-width: 1.2; }
@keyframes chartDraw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.js-motion .trend .tlines, .js-motion .rline .rl-path { animation: chartDraw .8s var(--ease-out) both; }
.js-motion .trend .tdots, .js-motion .rline .rl-dot { animation: chartDraw .8s var(--ease-out) .12s both; }

/* ════════════════════════ HERO (v11 structure carried; ledger dressing) ════════════════════════ */
.stage { position: relative; height: 92vh; height: 92dvh; min-height: 600px;
  border-bottom: 1px solid var(--rule); overflow: hidden; }
.stage .st-video { position: absolute; inset: 0; width: 100%; height: 117%; object-fit: cover;
  object-position: center 30%; }
.stage .st-scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(5,7,11,.62) 0%, rgba(5,7,11,.12) 30%,
    rgba(5,7,11,.1) 55%, rgba(5,7,11,.88) 100%); }
.stage .st-hero { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: flex-end; padding: 0 48px clamp(120px, 18vh, 190px); }
.stage .st-hero .eyebrow { pointer-events: auto; color: rgba(240,238,230,.6); letter-spacing: .34em; }
.stage .st-hero .eyebrow::before { background: var(--accent); }
.stage h1 { margin: 0; color: var(--ink); font-family: var(--serif); font-weight: 400;
  line-height: .96; letter-spacing: -.025em; font-size: var(--h-hero);
  max-width: 12ch; text-wrap: balance; text-align: left; }
.stage h1 .h-l1, .stage h1 .h-l2 { display: block; font-family: var(--serif); font-style: normal;
  font-weight: 400; font-size: inherit; letter-spacing: inherit; text-shadow: 0 1px 40px rgba(0,0,0,.5); }
.stage h1 .h-l1 { color: var(--ink); }
.stage h1 .dim { color: rgba(240,238,230,.46); }
@supports (-webkit-background-clip: text) {
  .stage h1 .dim { background: linear-gradient(180deg, rgba(240,238,230,.8), rgba(240,238,230,.32));
    -webkit-background-clip: text; background-clip: text; color: transparent; }
}
.stage .st-sub { max-width: 52ch; color: rgba(232,233,228,.86); font-size: clamp(14px, 1.5vw, 17px);
  line-height: 1.65; margin: 18px 0 0; text-align: left; }
.stage .st-cta { display: flex; gap: 12px; margin-top: 26px; flex-wrap: wrap; }
.stage .st-anim { opacity: 0; animation-fill-mode: forwards; animation-timing-function: var(--ease-out); }
.stage .st-f1 { animation-name: skinFadeUp; animation-duration: 1s; animation-delay: .68s; }
.stage .st-f2 { animation-name: skinFadeUp; animation-duration: 1s; animation-delay: .84s; }
/* per-word entrance + hand-drawn amber underline (owner-won signatures) */
.stage h1 .w { display: inline-block; opacity: 0; will-change: transform, filter;
  animation: skinReveal 1s var(--ease-out) both; animation-delay: calc(.24s + var(--wd, 0ms)); }
.stage h1 .h-l2 { position: relative; }
.stage h1 .hl-draw { position: absolute; left: 0; top: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; }
.stage h1 .hl-draw path { fill: none; stroke: var(--accent); stroke-width: 2.5; stroke-linecap: round;
  opacity: .85; transition: stroke-dashoffset 1s cubic-bezier(.65, 0, .35, 1); }
/* stats docked on the hero's bottom rule — instrument band, ruled not boxed */
.stage .stats { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; margin: 0 !important;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; padding: 0 48px;
  background: color-mix(in srgb, var(--ground) 55%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid var(--rule); }
.stage .stats > * { background: transparent !important; border: 0 !important; border-left: 1px solid var(--rule-soft) !important;
  border-radius: 0 !important; box-shadow: none !important; padding: 18px 22px 16px; }
.stage .stats > *:first-child { border-left: 0 !important; }
@media (max-width: 860px) {
  .stage .st-hero { padding: 0 20px 150px; }
  .stage .stats { grid-template-columns: 1fr 1fr; padding: 0 12px; }
}
@keyframes skinReveal { 0% { opacity: 0; transform: translateY(26px); filter: blur(12px); } 100% { opacity: 1; transform: none; filter: blur(0); } }
@keyframes skinFadeUp { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: none; } }
@keyframes stageZoom { 0% { transform: scale(1.1); } 100% { transform: scale(1); } }   /* uni .uphoto settle */

/* campus photo: machined double-bezel frame (kept from v11 — owner approved) */
.uphoto { border-color: transparent; box-shadow: inset 0 1px 1px rgba(255,255,255,.07); }
.uphoto img { transition: transform .7s var(--ease-out); animation: stageZoom 1.6s var(--ease-out) both; }
.uphoto:hover img { transform: scale(1.02); }

/* ════════════════════════ REVEAL SYSTEM (3-leg: IO + sweep + arm line) ════════════════════════ */
.js-motion .sk-rv { opacity: 0; transform: translateY(16px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out); transition-delay: var(--d, 0ms); }
.js-motion .sk-rv.in { opacity: 1; transform: none; }
/* leaderboard rows cascade one beat apart once their card reveals */
.js-motion .card.sk-rv.in .lrow { opacity: 0; animation: skinFadeUp .5s var(--ease-out) calc(var(--i, 0) * 45ms) both; }

/* ════════════════════════ POINTER SPOTLIGHT (compartment light) ════════════════════════ */
.card, .scard, .panel, .board, .syscard, .cref, .dcard { position: relative; }
.sk-spot { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
  background: radial-gradient(280px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.045), transparent 72%);
  opacity: 0; transition: opacity .45s var(--ease-micro); }
.card:hover > .sk-spot, .scard:hover > .sk-spot, .panel:hover > .sk-spot, .board:hover > .sk-spot,
.syscard:hover > .sk-spot, .cref:hover > .sk-spot, .dcard:hover > .sk-spot { opacity: 1; }

/* ════════════════════════ FLOATING READOUTS · LEDGER CHROME ════════════════════════ */
/* chart hover readouts + the compare tray shed the v10 rounded/floating look: square, ruled */
.trend .treadout, .rlchart .treadout { border-radius: 0 !important; box-shadow: none !important;
  border: 1px solid var(--rule) !important; background: var(--surface) !important;
  font-family: var(--mono) !important; }   /* readout = data voice, on every chart not just Trends */
.cmptray { box-shadow: none !important; border-top: 1px solid var(--rule) !important;
  background: color-mix(in srgb, var(--ground) 88%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ════════════════════════ FIELDS · LEDGER SLOTS ════════════════════════ */
/* inputs and selects are slots you fill, not pills you press: square ruled fields, no float.
   (Buttons keep the pill — shape law: press = pill, fill = slot.) */
input[type="search"], input[type="text"], select, .q, .csearch {
  background: var(--pane) !important; border: 1px solid var(--rule) !important;
  border-radius: 0 !important; box-shadow: none !important; }
input[type="search"]:hover, select:hover, .q:hover, .csearch:hover {
  border-color: rgba(255,255,255,.2) !important; background: var(--pane-hover) !important; }
input[type="search"]:focus-visible, input[type="text"]:focus-visible, select:focus-visible,
.q:focus-visible, .csearch:focus-visible {
  outline: 2px solid var(--accent) !important; outline-offset: 1px; }

/* ════════════════════════ METERS · FLAT INK (no glow, no gradient) ════════════════════════ */
/* every percentage bar becomes a flat single-hue fill in a square ruled track — the v10
   gradient+glow chrome is off the anti-slop list */
.compbar, .score .meter, .ind .bar, .cstk .cbar, .ha-track {
  border-radius: 0 !important; background: rgba(255,255,255,.05) !important;
  border: 1px solid var(--rule-soft) !important; box-shadow: none !important; }
.compbar > span, .score .meter i, .ind .bar > span, .cstk .cbar > span, .ha-bar {
  border-radius: 0 !important; box-shadow: none !important; }
.compbar > span, .score .meter i { background: var(--accent) !important; }
.agree .score .meter i { background: var(--up) !important; }
.compwrap > b { text-shadow: none !important; }
.dlt.up, .dlt.down { text-shadow: none !important; }

/* ════════════════════════ BACK-TO-TOP (ledger tab) ════════════════════════ */
.totop { border-radius: 0 !important; border: 1px solid var(--rule) !important;
  background: color-mix(in srgb, var(--ground) 80%, transparent) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* ════════════════════════ CROSS-DOCUMENT VIEW TRANSITIONS ════════════════════════ */
/* (kept from v11: the ledger bar persists across navigations like an app shell) */

/* ════════════════════════ GUARDS ════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .stage .st-anim, .stage h1 .w { animation: none; opacity: 1; }
  .btn:hover, .btn:active, header.topbar .navlinks a:active,
  .mapreset:active, .tmerge:active { transform: none; }
  .js-motion .sk-rv, .js-motion .card.sk-rv.in .lrow { opacity: 1; transform: none; animation: none; }
}