/* ============================================================
   RTFCLMGZN — design system v2
   Editorial: Fraunces display serif · Inter UI · hairline rules
   ============================================================ */

:root{
  --bg:#0b0b12;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(124,108,240,.13), transparent 70%);
  --surface:#12121c; --surface2:#191926; --surface3:#20202f;
  /* --faint was #615e78: 3.16:1 on --bg and 2.99:1 on --surface, i.e. a WCAG
     1.4.3 failure everywhere it is used (.proto .motto .he-stamp .foot-sub
     .foot-meta .bzm-l …). Raised to 5.28:1 on --bg / 5.00:1 on --surface,
     the only two backgrounds it is ever painted on. */
  --ink:#eceaf4; --ink-soft:#c9c6d8; --muted:#8d8aa3; --faint:#8481a3;
  --line:#232334; --hairline:#1d1d2c;
  --accent:#8b7cf7; --accent2:#b7a5ff; --accent-ink:#cdc2ff;
  /* Text/icon colour for anything filled with --accent. White on the dark-mode
     accent is only 3.32:1; near-black is 5.91:1. Flips per theme. */
  --on-accent:#0b0b12;
  --gate:#e0564d; --ok:#42c08a; --gold:#d9a94e;
  --maxw:1240px; --measure:70ch;
  --serif:"Fraunces","Georgia","Times New Roman",serif;
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"SF Mono","Cascadia Code",Consolas,monospace;
  --shadow:0 18px 50px -18px rgba(0,0,0,.55);
  /* Brand mark. Light canvases override this with the ink variant —
     same alpha mask, only the white blade pixels recoloured. */
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="light"]{
  --bg:#faf9f5;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(124,108,240,.08), transparent 70%);
  --surface:#ffffff; --surface2:#f3f2ec; --surface3:#eceade;
  /* light --faint was #9b98ac = 2.66:1 on --bg; now 4.60:1 on --bg / 4.85:1 on
     --surface, still a visible step lighter than --muted. */
  --ink:#191722; --ink-soft:#3c3950; --muted:#6d6a80; --faint:#726f86;
  --line:#e4e2d8; --hairline:#eae8de;
  --accent:#6a58e8; --accent2:#8b7cf7; --accent-ink:#5646c8;
  --on-accent:#ffffff;
  --shadow:0 18px 45px -20px rgba(60,50,120,.18);
  --rtfc-glyph:url("brand/rtfc-glyph-ink-256.png");
}

/* ============================================================
   APPEARANCES — seven additional skins (nine total with dark/light)
   Every skin redefines the SAME semantic tokens the components already
   consume, so no component decides light-vs-dark for itself and the same
   markup works across all nine. Contrast for ink/muted/faint/accent pairs is
   verified against WCAG (body text AAA, secondary text AA) — see the build
   note in the commit; do not hand-tweak a value without re-checking it.
   --rtfc-glyph swaps the brand mark to the ink variant on light canvases.
   ============================================================ */
[data-theme="midnight"]{ /* Midnight — dark canvas */
  --bg:#080b18;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(90,120,255,.14), transparent 70%);
  --surface:#0e1326; --surface2:#141b33; --surface3:#1b2440;
  --ink:#e8ecfa; --ink-soft:#c2c9e4; --muted:#8b93b4; --faint:#868ead;
  --line:#1e2740; --hairline:#182036;
  --accent:#6f8cf8; --accent2:#9db2ff; --accent-ink:#b9c7ff;
  --on-accent:#080b18;
  --shadow:0 18px 50px -18px rgba(0,0,0,.6);
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="graphite"]{ /* Graphite — dark canvas */
  --bg:#141414;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(150,140,220,.10), transparent 70%);
  --surface:#1c1c1c; --surface2:#242424; --surface3:#2e2e2e;
  --ink:#ededed; --ink-soft:#c9c9c9; --muted:#909090; --faint:#8b8b8b;
  --line:#2b2b2b; --hairline:#232323;
  --accent:#a89bf0; --accent2:#c4b9ff; --accent-ink:#cfc6ff;
  --on-accent:#141414;
  --shadow:0 18px 50px -18px rgba(0,0,0,.6);
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="noir"]{ /* Noir — dark canvas */
  --bg:#000000;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(160,140,255,.09), transparent 70%);
  --surface:#0a0a0a; --surface2:#121212; --surface3:#1a1a1a;
  --ink:#f7f7f7; --ink-soft:#d4d4d4; --muted:#949494; --faint:#8f8f8f;
  --line:#242424; --hairline:#191919;
  --accent:#b9a8ff; --accent2:#d3c7ff; --accent-ink:#ddd4ff;
  --on-accent:#000000;
  --shadow:0 18px 50px -18px rgba(0,0,0,.75);
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="oxide"]{ /* Oxide — dark canvas */
  --bg:#121011;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(220,130,80,.11), transparent 70%);
  --surface:#1a1717; --surface2:#221d1c; --surface3:#2c2523;
  --ink:#f0eae6; --ink-soft:#d0c5be; --muted:#9c8f88; --faint:#978a83;
  --line:#2e2624; --hairline:#241e1d;
  --accent:#e08a5a; --accent2:#f0a878; --accent-ink:#f2b28a;
  --on-accent:#121011;
  --shadow:0 18px 50px -18px rgba(0,0,0,.6);
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="paper"]{ /* Paper — light canvas */
  --bg:#f7f3ea;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(124,108,240,.07), transparent 70%);
  --surface:#fffdf7; --surface2:#f1ece0; --surface3:#e8e2d3;
  --ink:#1c1a16; --ink-soft:#413d34; --muted:#6b6559; --faint:#6f6a5e;
  --line:#e0d9c9; --hairline:#e8e2d5;
  --accent:#6a58e8; --accent2:#8b7cf7; --accent-ink:#5343c0;
  --on-accent:#ffffff;
  --shadow:0 18px 45px -20px rgba(90,75,40,.18);
  --rtfc-glyph:url("brand/rtfc-glyph-ink-256.png");
}
[data-theme="sepia"]{ /* Sepia — light canvas */
  --bg:#f4e9d8;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(160,110,40,.09), transparent 70%);
  --surface:#fdf6e9; --surface2:#eee0cb; --surface3:#e4d4ba;
  --ink:#2a1f14; --ink-soft:#4d3d2b; --muted:#75604a; --faint:#79644e;
  --line:#dfcfb4; --hairline:#e7dac3;
  --accent:#9a5b1f; --accent2:#b8763a; --accent-ink:#834c17;
  --on-accent:#ffffff;
  --shadow:0 18px 45px -20px rgba(110,80,30,.20);
  --rtfc-glyph:url("brand/rtfc-glyph-ink-256.png");
}
[data-theme="slate"]{ /* Slate — light canvas */
  --bg:#eef1f5;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(60,100,200,.08), transparent 70%);
  --surface:#ffffff; --surface2:#e4e9f0; --surface3:#d8dfe9;
  --ink:#151a22; --ink-soft:#374050; --muted:#5f6a7d; --faint:#636e82;
  --line:#d5dce6; --hairline:#e1e7ef;
  --accent:#3f66c4; --accent2:#5b83e0; --accent-ink:#33529e;
  --on-accent:#ffffff;
  --shadow:0 18px 45px -20px rgba(40,60,110,.16);
  --rtfc-glyph:url("brand/rtfc-glyph-ink-256.png");
}

@media (prefers-color-scheme:light){
  :root:not([data-theme]){
    --bg:#faf9f5;
    --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(124,108,240,.08), transparent 70%);
    --surface:#ffffff; --surface2:#f3f2ec; --surface3:#eceade;
    --ink:#191722; --ink-soft:#3c3950; --muted:#6d6a80; --faint:#726f86;
    --line:#e4e2d8; --hairline:#eae8de;
    --accent:#6a58e8; --accent2:#8b7cf7; --accent-ink:#5646c8;
    --on-accent:#ffffff;
    --shadow:0 18px 45px -20px rgba(60,50,120,.18);
  }
}

*{box-sizing:border-box}
/* NO global scroll-behavior:smooth — it breaks Chromium middle-click autoscroll and
   fights native scrollbar/wheel. Intentional smooth scrolls pass behavior:"smooth" in JS. */
html{scroll-behavior:auto}
body{
  margin:0;background:var(--bg);background-image:var(--bg-glow);background-repeat:no-repeat;
  color:var(--ink);font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%}
::selection{background:var(--accent);color:#fff}
.container{max-width:var(--maxw);margin:0 auto;padding:0 28px}

/* ---------- layout stability ----------
   #app is empty in the served HTML and every view is injected by app.js. With
   nothing reserving its box the footer painted at top:176px and then dropped
   ~4,590px the moment the first view rendered — one 0.488 layout shift on every
   route. Reserving a viewport of height means the footer starts below the fold,
   so the fill-in never moves anything the reader can see. Required now that the
   data + app scripts are deferred. */
#app{min-height:100vh}

/* ---------- accessibility utilities ---------- */
/* Visually hidden but exposed to assistive tech. Used for form labels that have
   only a placeholder, and for any icon-only control needing a text name. */
.sr-only{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}
/* Skip link — first focusable element in the document, so a keyboard reader can
   jump the 9 header tab stops. Off-screen until focused. */
a.skip{
  position:absolute;left:8px;top:-60px;z-index:200;
  padding:10px 16px;border-radius:0 0 10px 10px;
  background:var(--accent);color:var(--on-accent);
  font:600 13.5px/1 var(--sans);letter-spacing:.02em;text-decoration:none;
  transition:top .12s ease;
}
a.skip:focus{top:0}
a.skip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------- progress bar ---------- */
#progress{position:fixed;top:0;left:0;height:2px;width:0;z-index:60;
  background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .08s linear}

/* ---------- prototype ribbon ----------
   line-height was inherited (~1.2) while the text is UPPERCASE with .14em
   tracking — on a phone the ribbon wraps to three or four lines and every
   line's descenders were clipped by the line box. Explicit line-height and a
   little breathing room fix it at every width; on phones the tracking eases
   off too, so it wraps to fewer lines in the first place. */
.proto{border-bottom:1px solid var(--hairline);color:var(--faint);font-size:11px;
  line-height:1.65;text-align:center;padding:8px 14px;letter-spacing:.14em;
  text-transform:uppercase;overflow-wrap:break-word}
.proto b{color:var(--accent2);font-weight:600}
@media (max-width:840px){
  .proto{font-size:10px;letter-spacing:.06em;line-height:1.7;padding:9px 14px}
}

/* ---------- header ---------- */
header.site{position:sticky;top:0;z-index:50;
  background:color-mix(in srgb,var(--bg) 82%,transparent);
  backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline)}
.bar{display:flex;align-items:center;gap:26px;height:auto;min-height:70px;flex-wrap:wrap;row-gap:0}
.logo{font-family:var(--serif);font-weight:700;letter-spacing:.1em;font-size:22px;line-height:1;
  color:var(--ink);display:inline-flex;align-items:center;gap:11px}
/* Official transparent glyph beside the wordmark — the two behave as one Home
   link. Derived from the official mark: no baked tile, no border, no recolour
   beyond the light-appearance ink variant declared with --rtfc-glyph. */
.logo-glyph{flex:none;width:26px;height:26px;background:var(--rtfc-glyph) center/contain no-repeat}
.logo-type{display:block}
.logo em{font-style:normal;color:var(--accent2)}
.logo small{display:block;font-family:var(--sans);font-size:8.5px;letter-spacing:.42em;
  color:var(--muted);font-weight:600;margin-top:4px}
nav.top{display:flex;gap:2px;flex-wrap:wrap}
nav.top a,nav.top .sec-btn{padding:8px 13px;border-radius:99px;font-size:13.5px;color:var(--muted);
  font-weight:550;letter-spacing:.01em;transition:color .15s,background .15s}
nav.top a:hover,nav.top .sec-btn:hover{color:var(--ink)}
nav.top a.active,nav.top .sec-btn.active{color:var(--ink);background:var(--surface2)}
nav.top a.masthead-link{color:var(--accent2)}
nav.top a.masthead-link.active{background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-ink)}
.spacer{flex:1}
/* transition:all used to include outline-width, so the global :focus-visible
   ring animated up from 0px — the five header controls (#search-btn, #lang-btn,
   #theme, #acct-btn and the library link) computed outline-width:0px at the
   moment focus landed and had no visible ring. Transition only what is meant to
   move, and give the pill its own ring so the global rule's border-radius:4px
   does not square off a 99px control. */
.theme-btn{border:1px solid var(--line);background:transparent;color:var(--muted);border-radius:99px;
  width:38px;height:38px;cursor:pointer;font-size:15px;display:grid;place-items:center;
  transition:color .15s,border-color .15s,background-color .15s,box-shadow .15s;position:relative}
.theme-btn:hover{color:var(--ink);border-color:var(--muted)}
.theme-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:99px;transition:none}
.theme-btn svg{width:17px;height:17px;display:block}
#acct-btn .acct-dot{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:99px;background:transparent;transition:background .15s}
#acct-btn.signed-in{color:var(--accent2);border-color:var(--accent2)}
#acct-btn.signed-in .acct-dot{background:var(--accent2)}
#acct-btn.plan-plus{color:var(--accent);border-color:var(--accent)}
#acct-btn.plan-plus .acct-dot{background:var(--accent)}

/* Mid widths: 15 nav destinations can't share one row with the logo — give the nav
   its own tidy row below instead of letting wrapped rows collide with the ribbon.
   (Must sit AFTER the base nav.top rules — equal specificity, source order decides.) */
@media (min-width:841px){
  .bar{padding-top:12px;padding-bottom:2px;max-width:1320px}
  nav.top{order:10;flex-basis:100%;padding:2px 0 12px;gap:0}
  nav.top a,nav.top .sec-btn{padding:6px 9px;font-size:12.5px}
  .nav-sep{margin:0 3px}
}

/* Mobile header: logo row + swipeable nav rail (14 destinations don't fit a burger well) */
@media (max-width:840px){
  .bar{flex-wrap:wrap;height:auto;padding:10px 16px 0;gap:6px;row-gap:0}
  .logo{font-size:16.5px;margin-right:4px}
  .logo small{font-size:6.5px;letter-spacing:.3em}
  .spacer{flex:1}
  .theme-btn{width:31px;height:31px;font-size:12.5px}
  .theme-btn svg{width:14px;height:14px}
  nav.top{order:10;flex-basis:100%;flex-wrap:nowrap;overflow-x:auto;gap:0;
    padding:6px 0 10px;margin:4px -20px 0;padding-left:20px;padding-right:20px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch;
    mask-image:linear-gradient(90deg,transparent,#000 18px,#000 calc(100% - 26px),transparent)}
  nav.top::-webkit-scrollbar{display:none}
  nav.top a,nav.top .sec-btn{flex:none;font-size:13px;padding:7px 11px}
  .nav-sep{flex:none;margin:0 6px}
  .lang-menu{position:fixed;top:auto;left:12px;right:12px;width:auto;margin-top:8px}
  .sec-menu{position:fixed;top:auto;left:12px;right:12px;min-width:0;width:auto;margin-top:8px;
    grid-template-columns:repeat(auto-fill,minmax(120px,1fr))}
  .sec-wrap{flex:none}
}

/* ---------- edition line ---------- */
.edition{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  padding:26px 0 20px;border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.edition .date{font-family:var(--serif);font-size:15px;font-style:italic;color:var(--muted)}
.edition .motto{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--faint)}

/* ---------- kickers ---------- */
.kicker{display:flex;align-items:center;gap:12px;font-size:11px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);font-weight:650;margin:42px 0 22px}
.kicker::after{content:"";flex:1;height:1px;background:var(--hairline)}
.kicker .dotc{width:7px;height:7px;border-radius:50%;flex:none}

/* ---------- archive month headers ----------
   Archive used .kicker (same subtle hairline-rule label every other page uses for
   counts/eyebrows) for its month breaks -- data was already grouped by month, but
   nothing on screen read as a real divide. This is deliberately heavier: serif
   headline type sized like a section heading, a full border instead of a 1px
   hairline, and real air above each group, so scrolling the archive reads as
   "new month" the way the section intends, not just another kicker. */
.arch-month{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  margin:56px 0 22px;padding-bottom:12px;border-bottom:2px solid var(--line)}
.arch-month:first-of-type{margin-top:8px}
.arch-month h2{font-family:var(--serif);font-size:24px;font-weight:650;
  letter-spacing:-.01em;margin:0;color:var(--ink)}
.arch-month .cnt{font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);font-weight:650;white-space:nowrap}
@media(max-width:640px){ .arch-month h2{font-size:20px} }

/* ---------- pills / meta ---------- */
.tags{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.pill{font-size:10px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:3px 9px;border-radius:4px}
/* Section pills take their background inline from SECTION_COLORS in app.js —
   pastels between #42c08a and #d9a94e. White on those ran 2.16:1–3.74:1. The
   hues are the section identity system and stay exactly as they are; the ink
   goes near-black instead, which is >=5.24:1 on all ten section colours
   (worst case Products #e0564d) and is theme-independent because the pill
   background is a literal, not a token. */
.pill.section{color:#0b0b12}
.pill.fmt{color:var(--muted);border:1px solid var(--line);background:transparent}
.pill.sample{border:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);color:var(--accent2);background:transparent}
.pill.live{background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff}
/* Breaking deliberately does NOT share the flat-color-chip language every other
   pill uses (section/type/live/sample) -- it used to (#e0564d, identical to the
   Products section color and indistinguishable from a taxonomy tag at a glance).
   A dark outlined chip + a pulsing dot reads as "alert", not "category", and the
   color is a hot red no SECTION_COLORS entry is anywhere near. */
.pill.breaking{background:#1a0d0f;color:#ff3d5a;border:1px solid #ff3d5a;
  margin-right:7px;padding:3px 9px 3px 7px;display:inline-flex;align-items:center;gap:5px}
.pill.breaking::before{content:"";width:6px;height:6px;border-radius:50%;background:#ff3d5a;
  flex:none;animation:rtfc-brk-pulse 1.9s ease-in-out infinite}
@keyframes rtfc-brk-pulse{0%,100%{box-shadow:0 0 0 0 rgba(255,61,90,.55)}50%{box-shadow:0 0 0 5px rgba(255,61,90,0)}}
@media(prefers-reduced-motion:reduce){ .pill.breaking::before{animation:none} }
.byline{display:flex;align-items:center;gap:9px;font-size:12.5px;color:var(--muted)}
.byline .av{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#fff;flex:none;letter-spacing:.03em}
.byline b{color:var(--ink-soft);font-weight:600}

/* ---------- feature (top story) ---------- */
.top-slot{display:grid;grid-template-columns:1.55fr 1fr;gap:44px;padding:34px 0 40px;
  border-bottom:1px solid var(--hairline)}
@media (max-width:900px){.top-slot{grid-template-columns:1fr;gap:28px}}
.feature{display:block}
.feature .art{aspect-ratio:16/9;border-radius:18px;position:relative;overflow:hidden;
  box-shadow:var(--shadow)}
.feature .art .glyph{position:absolute;right:-30px;bottom:-60px;font-size:230px;line-height:1;
  opacity:.16;font-family:var(--serif)}
.feature .art .beatline{position:absolute;left:26px;bottom:22px;color:#fff;font-size:11px;
  letter-spacing:.24em;text-transform:uppercase;font-weight:700;opacity:.92}
.feature h3{font-family:var(--serif);font-size:clamp(28px,3.6vw,42px);line-height:1.12;
  font-weight:640;letter-spacing:-.012em;margin:22px 0 12px}
.feature:hover h3{color:var(--accent2)}
.feature .dek{color:var(--muted);font-size:16.5px;line-height:1.6;margin:0 0 16px;max-width:56ch}

/* side rail */
.rail{display:flex;flex-direction:column}
.rail-item{display:block;padding:18px 2px;border-bottom:1px solid var(--hairline)}
.rail-item:first-child{padding-top:6px}
.rail-item:last-child{border-bottom:none}
.rail-item h4{font-family:var(--serif);font-size:18.5px;line-height:1.28;font-weight:600;
  letter-spacing:-.005em;margin:9px 0 8px;transition:color .14s}
.rail-item:hover h4{color:var(--accent2)}

/* ---------- card grid ---------- */
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:34px 30px;padding-bottom:8px}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:580px){.grid{grid-template-columns:1fr}}
.card{display:flex;flex-direction:column;gap:11px}
.card .art{aspect-ratio:16/10;border-radius:14px;position:relative;overflow:hidden;
  transition:transform .2s ease,box-shadow .2s ease}
.card:hover .art{transform:translateY(-3px);box-shadow:var(--shadow)}
.card .art .glyph{position:absolute;right:-14px;bottom:-34px;font-size:130px;line-height:1;
  opacity:.16;font-family:var(--serif)}
.card h3{font-family:var(--serif);font-size:20px;line-height:1.26;font-weight:620;
  letter-spacing:-.008em;margin:2px 0 0;transition:color .14s}
.card:hover h3{color:var(--accent2)}
.card .dek{color:var(--muted);font-size:13.5px;line-height:1.55;margin:0;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .byline{margin-top:2px}

/* ---------- article ---------- */
.article{max-width:760px;margin:0 auto;padding:44px 0 70px}
.article .back{color:var(--muted);font-size:13px;font-weight:550;letter-spacing:.02em}
.article .back:hover{color:var(--accent2)}
.article h1{font-family:var(--serif);font-size:clamp(34px,5vw,54px);line-height:1.1;
  font-weight:650;letter-spacing:-.018em;margin:20px 0 18px}
.article .dek{font-family:var(--serif);font-style:italic;font-size:21px;color:var(--muted);
  line-height:1.5;margin:0 0 30px;font-weight:400}
.article .meta{display:flex;align-items:center;gap:14px;padding:18px 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--hairline);flex-wrap:wrap}
.article .meta .av{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
  font-size:15px;font-weight:800;color:#fff}
.article .meta .who b{display:block;font-size:15px}
.article .meta .who b a:hover{color:var(--accent2)}
.article .meta .who span{color:var(--muted);font-size:12.5px}
.dateline{font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  font-weight:600;padding:14px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--hairline)}
.dateline .dl-sec{font-weight:700}
.endbyline{display:flex;align-items:center;gap:12px;margin:36px 0 4px;padding-top:22px;
  border-top:1px solid var(--hairline)}
.endbyline .av{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#fff;flex:none}
.endbyline .eb-who{font-size:14px;color:var(--muted);line-height:1.35}
.endbyline .eb-who b{font-weight:600}
.endbyline .eb-who b a{color:var(--ink-soft)}
.endbyline .eb-who b a:hover{color:var(--accent2)}
.endbyline .eb-who span{display:block;font-size:12.5px;color:var(--muted)}
.article .hero{aspect-ratio:16/7;border-radius:18px;margin:30px 0;position:relative;
  overflow:hidden;box-shadow:var(--shadow)}
.article .hero .glyph{position:absolute;right:-40px;bottom:-90px;font-size:340px;line-height:1;
  opacity:.15;font-family:var(--serif)}

/* table of contents (long articles) */
.toc{margin:8px 0 30px;border:1px solid var(--line);border-radius:14px;padding:18px 22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 5%,transparent),transparent)}
.toc-l{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);font-weight:700;display:block;margin-bottom:10px}
.toc ol{list-style:none;margin:0;padding:0;counter-reset:none}
.toc li{border-bottom:1px solid var(--hairline)}
.toc li:last-child{border-bottom:none}
.toc a{display:flex;gap:12px;align-items:baseline;padding:9px 0;font-family:var(--serif);
  font-size:16px;color:var(--ink-soft);transition:color .14s}
.toc a:hover{color:var(--accent2)}
.toc a span{font-family:var(--sans);font-size:11px;font-weight:700;color:var(--accent2);
  letter-spacing:.06em;flex:none;min-width:2ch}
.prose h2{scroll-margin-top:88px}
.prose{font-size:18.5px;line-height:1.8;color:var(--ink-soft);max-width:var(--measure)}
.prose p{margin:0 0 24px}
.prose > p:first-of-type::first-letter{
  font-family:var(--serif);font-size:64px;line-height:.82;font-weight:640;
  float:left;padding:8px 12px 0 0;color:var(--accent2)}
.prose h2{font-family:var(--serif);font-size:27px;line-height:1.25;font-weight:640;
  letter-spacing:-.01em;color:var(--ink);margin:44px 0 16px}
.prose blockquote{margin:38px 0;padding:0 0 0 26px;border-left:2px solid var(--accent);
  font-family:var(--serif);font-size:24px;line-height:1.45;color:var(--ink);
  font-style:italic;font-weight:450;letter-spacing:-.005em}
.endmark::after{content:" ∎";color:var(--accent2);font-size:15px}

/* disclaimers */
.disclaimer{border-radius:12px;padding:15px 18px;margin:28px 0;font-size:14px;
  line-height:1.55;color:var(--ink-soft)}
.disclaimer.med{border:1px solid color-mix(in srgb,var(--gate) 45%,transparent);
  background:color-mix(in srgb,var(--gate) 8%,transparent)}
.disclaimer.fin{border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);
  background:color-mix(in srgb,var(--gold) 8%,transparent)}
.disclaimer b{display:block;margin-bottom:3px;color:var(--ink)}

/* Put it to work */
.apply{margin:40px 0 34px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:18px;overflow:hidden;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 9%,transparent),transparent 90%)}
.apply-head{display:flex;align-items:center;gap:10px;padding:16px 24px;
  font-family:var(--serif);font-size:19px;font-weight:640;letter-spacing:-.01em;color:var(--ink);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 20%,var(--hairline))}
.apply-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;font-size:13px;flex:none}
.apply ul{list-style:none;margin:0;padding:12px 24px 20px}
.apply li{position:relative;padding:12px 0 12px 26px;font-size:16px;line-height:1.62;
  color:var(--ink-soft);border-bottom:1px solid var(--hairline)}
.apply li:last-child{border-bottom:none}
.apply li::before{content:"→";position:absolute;left:0;top:12px;color:var(--accent2);font-weight:700}
.apply li b{color:var(--ink);font-weight:650}

/* TL;DR — the story at a glance */
.tldr{margin:40px 0 34px;border:1px solid color-mix(in srgb,var(--accent2) 40%,var(--line));
  border-radius:18px;overflow:hidden;scroll-margin-top:70px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent2) 9%,transparent),transparent 90%)}
.tldr-head{display:flex;align-items:center;gap:10px;padding:16px 24px;
  font-family:var(--serif);font-size:19px;font-weight:640;letter-spacing:-.01em;color:var(--ink);
  border-bottom:1px solid color-mix(in srgb,var(--accent2) 20%,var(--hairline))}
.tldr-ic{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:linear-gradient(135deg,var(--accent2),var(--accent));color:#fff;font-size:13px;flex:none}
.tldr-sub{margin-left:auto;font-family:var(--sans);font-size:11px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.tldr ul{list-style:none;margin:0;padding:12px 24px 20px}
.tldr li{position:relative;padding:12px 0 12px 26px;font-size:16px;line-height:1.62;
  color:var(--ink-soft);border-bottom:1px solid var(--hairline)}
.tldr li:last-child{border-bottom:none}
.tldr li::before{content:"▸";position:absolute;left:0;top:12px;color:var(--accent2);font-weight:700}
.tldr li b{color:var(--ink);font-weight:650}
/* jump chip under the cover photo */
.tldr-jumpwrap{margin:14px 0 4px;display:flex}
.tldr-jump{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;border-radius:999px;
  border:1px solid color-mix(in srgb,var(--accent2) 45%,var(--line));
  background:color-mix(in srgb,var(--accent2) 10%,transparent);
  color:var(--accent2);font-family:var(--sans);font-size:12px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;cursor:pointer;
  transition:background .15s ease,border-color .15s ease}
.tldr-jump:hover{background:color-mix(in srgb,var(--accent2) 18%,transparent);
  border-color:var(--accent2)}
.tldr-jump .tj-arrow{font-size:13px;line-height:1;transition:transform .15s ease}
.tldr-jump:hover .tj-arrow{transform:translateY(2px)}

/* AI disclosure */
.ai-disclosure{display:flex;gap:14px;align-items:flex-start;
  background:var(--surface);border:1px solid var(--line);
  border-radius:14px;padding:17px 19px;margin:34px 0;font-size:13.5px;
  line-height:1.6;color:var(--muted)}
.ai-disclosure .ic{font-size:21px;line-height:1.2}
.ai-disclosure b{color:var(--ink-soft)}

/* pipeline provenance */
.provenance{border:1px solid var(--line);border-radius:16px;overflow:hidden;margin:34px 0}
.provenance .head{display:flex;align-items:center;gap:10px;padding:15px 19px;
  background:var(--surface2);border-bottom:1px solid var(--hairline);
  font-size:11px;letter-spacing:.18em;text-transform:uppercase;font-weight:700;color:var(--ink-soft)}
.provenance .head .livepill{margin-left:auto}
.provenance .stages{padding:8px 19px 12px}
.pstage{display:flex;gap:12px;align-items:baseline;padding:9px 0;
  border-bottom:1px solid var(--hairline);font-size:13.5px}
.pstage:last-child{border-bottom:none}
.pstage .tick{color:var(--ok);font-weight:700;flex:none}
.pstage .tick.gatehold{color:var(--gate)}
.pstage .sname{font-weight:650;color:var(--ink);min-width:118px;flex:none}
.pstage .sagent{color:var(--accent2);font-size:12px;min-width:130px;flex:none}
.pstage .snote{color:var(--muted);line-height:1.5}
.provenance .gaterow{padding:13px 19px;border-top:1px solid var(--line);
  background:color-mix(in srgb,var(--ok) 7%,transparent);
  font-size:13px;color:var(--ink-soft)}
.provenance .gaterow b{color:var(--ok)}
/* mobile: the three fixed-width stage columns starve .snote into a few-character
   sliver — stack instead: tick+name+agent on line one, the note full-width below. */
@media(max-width:640px){
  .provenance .head{flex-wrap:wrap;row-gap:6px;font-size:13px;line-height:1.45}
  .pstage{flex-wrap:wrap;row-gap:4px}
  .pstage .sname{min-width:0}
  .pstage .sagent{min-width:0}
  .pstage .snote{flex:1 1 100%;padding-left:26px}
}

/* distribution (social) panel */
.distribution{margin:34px 0;border:1px solid var(--line);border-radius:16px;padding:18px 20px;background:var(--surface)}
.dist-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12px;letter-spacing:.14em;
  text-transform:uppercase;font-weight:700;color:var(--ink-soft);margin-bottom:14px}
.dist-live{font-size:10px;letter-spacing:.04em;text-transform:none;font-weight:700;color:#fff;
  background:var(--ok);border-radius:5px;padding:2px 8px}
.dist-dry{font-size:10px;letter-spacing:.04em;text-transform:none;font-weight:700;color:var(--accent2);
  border:1px dashed var(--accent);border-radius:5px;padding:2px 8px}
.dist-note{font-size:11px;letter-spacing:.02em;text-transform:none;font-weight:400;color:var(--muted);flex:1 1 100%}
.dist-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
@media (max-width:720px){.dist-grid{grid-template-columns:1fr}}
.dist-card{background:var(--surface2);border:1px solid var(--hairline);border-radius:12px;padding:14px}
.dist-head{display:flex;align-items:center;gap:8px;font-weight:700;font-size:14px;margin-bottom:9px}
.dist-glyph{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;background:var(--bg);
  border:1px solid var(--line);font-size:13px;flex:none}
.dist-st{margin-left:auto;font-size:10px;letter-spacing:.06em;text-transform:uppercase;font-weight:700;
  color:var(--accent2);border:1px solid var(--line);border-radius:5px;padding:1px 7px}
.dist-st.ok{color:var(--ok);border-color:var(--ok)}
.dist-copy{font-size:12.5px;line-height:1.5;color:var(--ink-soft);white-space:pre-wrap;margin-bottom:9px}
.dist-tags{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:8px}
.dist-tag{font-size:10.5px;color:var(--accent2)}
.dist-img{font-size:11px;color:var(--muted);border-top:1px solid var(--hairline);padding-top:8px}

/* sources & corrections */
.sources,.corrections{margin:30px 0;border-top:1px solid var(--hairline);padding-top:20px}
.sources h4,.corrections h4{font-size:11px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;font-weight:700}
.sources ol{margin:0;padding-left:20px}
.sources li{margin-bottom:7px;font-size:14px;color:var(--muted)}
.sources a{color:var(--accent2);border-bottom:1px solid transparent;transition:border-color .14s}
.sources a:hover{border-color:var(--accent2)}
.corrections .cx{font-size:14px;color:var(--muted);margin-bottom:8px;line-height:1.55}
.corrections .cx time{color:var(--ink-soft);font-weight:600;margin-right:8px}
.corrections .none{color:var(--ok)}

/* ---------- persona page ---------- */
.persona-hero{display:flex;gap:26px;align-items:center;padding:44px 0 30px;flex-wrap:wrap}
.persona-hero .av{width:120px;height:120px;border-radius:50%;display:grid;place-items:center;
  font-size:38px;font-weight:800;color:#fff;flex:none;box-shadow:var(--shadow)}

/* photo avatars — any .av can carry a portrait; the persona color becomes a ring */
.av-photo{background-size:cover;background-position:center top;border:2px solid transparent;
  color:transparent;font-size:0 !important}
/* real box + stacking context — display:contents made this span boxless, which
   broke real-pointer clicks on the masthead (programmatic .click() still worked,
   which is how it slipped past QA) */
.av-pop{display:inline-flex;position:relative;z-index:2;cursor:zoom-in;border-radius:50%}
.av-pop .av{cursor:zoom-in;transition:transform .15s ease,box-shadow .15s ease}
.av-pop:hover .av{transform:scale(1.06);box-shadow:0 8px 26px -8px rgba(0,0,0,.55)}

/* masthead avatar lightbox */
.av-lightbox{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:rgba(8,6,14,.62);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  opacity:0;transition:opacity .18s ease}
.av-lightbox.open{opacity:1}
.avl-card{position:relative;transform:scale(.92);transition:transform .2s cubic-bezier(.2,.9,.3,1.2)}
.av-lightbox.open .avl-card{transform:scale(1)}
.avl-img{width:min(70vw,440px);height:min(70vw,440px);border-radius:24px;
  background-size:cover;background-position:center top;box-shadow:0 40px 90px -20px rgba(0,0,0,.7);
  border:1px solid color-mix(in srgb,#fff 14%,transparent)}
.avl-img.avl-initials{display:grid;place-items:center;font-family:var(--serif);
  font-size:clamp(90px,18vw,150px);font-weight:800;color:#fff}
.avl-x{position:absolute;top:-14px;right:-14px;width:38px;height:38px;border-radius:50%;
  border:1px solid var(--hairline);background:var(--bg);color:var(--ink);font-size:15px;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px -8px rgba(0,0,0,.6);
  transition:transform .12s,border-color .12s}
.avl-x:hover{transform:scale(1.1);border-color:var(--accent2)}
.avl-cap{position:absolute;left:0;right:0;bottom:0;padding:38px 22px 16px;border-radius:0 0 24px 24px;
  background:linear-gradient(180deg,transparent,rgba(5,4,10,.82));display:flex;flex-direction:column;gap:2px}
.avl-cap b{font-family:var(--serif);font-size:22px;color:#fff;letter-spacing:-.01em}
.avl-cap span{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:650}
.persona-hero h1{font-family:var(--serif);margin:0 0 6px;font-size:38px;font-weight:650;letter-spacing:-.015em}
.persona-hero .beat{color:var(--accent2);font-weight:600;font-size:15px;letter-spacing:.02em}
.persona-hero .tone{font-size:13.5px;color:var(--muted);margin-top:7px;font-style:italic;font-family:var(--serif)}
.hi{display:inline-block;margin-left:10px;font-size:9.5px;font-weight:700;color:var(--gate);
  border:1px solid color-mix(in srgb,var(--gate) 60%,transparent);border-radius:4px;
  padding:2px 7px;vertical-align:middle;letter-spacing:.12em}
.persona-bio{max-width:64ch;color:var(--ink-soft);font-size:16.5px;line-height:1.7;
  margin:0 0 8px;padding-bottom:26px;border-bottom:1px solid var(--hairline)}

/* ---------- masthead page ---------- */
.mast-hero{padding:56px 0 20px;max-width:800px}
.mast-hero .over{font-size:11px;letter-spacing:.26em;text-transform:uppercase;
  color:var(--accent2);font-weight:700;margin-bottom:18px}
.mast-hero h1{font-family:var(--serif);font-size:clamp(36px,5vw,56px);line-height:1.08;
  font-weight:650;letter-spacing:-.02em;margin:0 0 20px}
.mast-hero p{font-size:18px;line-height:1.7;color:var(--muted);max-width:62ch;margin:0}
.mast-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:40px 0 10px}
@media (max-width:760px){.mast-grid{grid-template-columns:1fr}}
/* Editors as a compact 3×3 — holds its shape on wide AND portrait (founder 2026-07-12). */
.mast-grid.mast-3x3{ grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:760px){ .mast-grid.mast-3x3{ grid-template-columns:repeat(3,1fr); gap:9px; } }
.mast-3x3 .mast-card{ flex-direction:column; align-items:center; text-align:center; gap:7px; padding:22px 14px; }
.mast-3x3 .mast-card h3{ font-size:16px; margin:2px 0 0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.mast-3x3 .mast-card .beat{ font-weight:600; font-size:13px; }
.mast-3x3 .mast-card .tone{ font-size:12px; color:var(--muted); }
.mast-3x3 .mast-card .hi{ font-size:10px; }
@media (max-width:560px){ .mast-3x3 .mast-card{ padding:13px 7px; gap:5px; } .mast-3x3 .mast-card h3{ font-size:13px; } .mast-3x3 .mast-card .beat{ font-size:11px; } .mast-3x3 .mast-card .tone{ display:none; } }
.mast-card{display:flex;gap:18px;background:var(--surface);border:1px solid var(--line);
  border-radius:18px;padding:24px;transition:border-color .18s,transform .18s,box-shadow .18s}
.mast-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow)}
.mast-card .av{width:62px;height:62px;border-radius:50%;display:grid;place-items:center;
  font-size:21px;font-weight:800;color:#fff;flex:none}
.mast-card h3{font-family:var(--serif);margin:0 0 3px;font-size:21px;font-weight:640}
.mast-card .beat{color:var(--accent2);font-size:13px;font-weight:600;letter-spacing:.02em}
.mast-card .tone{color:var(--muted);font-size:13px;font-style:italic;font-family:var(--serif);margin-top:6px}
.mast-card .bio{color:var(--muted);font-size:13.5px;line-height:1.6;margin-top:9px}
.mast-strip{display:flex;gap:0;align-items:stretch;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;margin:36px 0 20px;flex-wrap:wrap;background:var(--surface)}
.mast-strip .cell{flex:1 1 180px;padding:20px 22px;border-right:1px solid var(--hairline)}
.mast-strip .cell:last-child{border-right:none}
.mast-strip .num{font-family:var(--serif);font-size:30px;font-weight:650;color:var(--accent2)}
.mast-strip .lbl{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.45}

/* ---------- usage / transparency ---------- */
.ustats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:30px 0 8px}
@media (max-width:760px){.ustats{grid-template-columns:1fr 1fr}}
.ucard{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.ucard .ulabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ucard .ucost{font-family:var(--serif);font-size:30px;font-weight:650;margin:8px 0 4px;letter-spacing:-.01em}
.ucard .usub{font-size:12.5px;color:var(--muted)}
.ucard .unote{font-size:12px;color:var(--accent2);margin-top:6px}
.uhero-metric{display:flex;gap:20px;flex-wrap:wrap;margin:22px 0 4px}
.uhero-metric > div{flex:1 1 240px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent);
  border:1px solid var(--line);border-radius:14px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.uhero-metric .big{font-family:var(--serif);font-size:34px;font-weight:650;letter-spacing:-.015em}
.uhero-metric .cap{font-size:13px;color:var(--muted);line-height:1.4}
/* Provider breakdown — Anthropic / OpenAI / Google, one card each. Three equal
   columns on desktop; they stack rather than shrink below 900 so the model list
   inside never has to ellipsis. */
.prov-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:12px}
.prov-card{border:1px solid var(--line);border-radius:14px;padding:16px 16px 14px;background:var(--surface2);
  display:flex;flex-direction:column;min-width:0}
.prov-card[data-idle]{opacity:.62}
.pc-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.pc-dot{width:9px;height:9px;border-radius:50%;flex:none}
.pc-vendor{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.pc-name{font-size:14px;font-weight:750;color:var(--ink)}
.pc-cost{font-size:27px;font-weight:750;line-height:1.05;font-variant-numeric:tabular-nums;color:var(--ink)}
.pc-cost.muted{color:var(--muted);font-size:22px}
.pc-share{height:5px;border-radius:3px;background:color-mix(in srgb,var(--ink) 10%,transparent);
  margin:10px 0 6px;overflow:hidden}
.pc-share i{display:block;height:100%;border-radius:3px}
.pc-share-l{font-size:11.5px;color:var(--muted)}
.pc-role{font-size:12.5px;line-height:1.5;color:var(--muted);margin:11px 0 13px}
.pc-facts{display:flex;gap:16px;flex-wrap:wrap;padding:11px 0;border-top:1px solid var(--hairline);
  border-bottom:1px solid var(--hairline);margin-bottom:11px}
.pc-facts div{display:flex;flex-direction:column;gap:2px;min-width:0}
.pc-facts b{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink)}
.pc-facts span{font-size:10.5px;color:var(--faint);white-space:nowrap}
.pc-models{display:flex;flex-direction:column;gap:5px;margin-top:auto}
.pc-m{display:flex;justify-content:space-between;gap:10px;font-size:12px}
.pc-ml{color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pc-mv{color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
@media (max-width:900px){ .prov-grid{grid-template-columns:1fr} }
.ubars{display:flex;flex-direction:column;gap:10px;margin-bottom:8px}
.ubar{display:grid;grid-template-columns:180px 1fr 160px;gap:14px;align-items:center}
@media (max-width:640px){.ubar{grid-template-columns:110px 1fr;grid-template-areas:"l t" "v v"}.ubar-v{grid-area:v;text-align:left}}
.ubar-l{font-size:13.5px;color:var(--ink-soft);font-weight:550}
.ubar-t{height:10px;background:var(--surface2);border-radius:99px;overflow:hidden}
.ubar-f{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:99px}
.ubar-v{font-size:12.5px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}
.utable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;margin-bottom:8px}
.utable{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
.utable th{text-align:left;padding:12px 16px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);border-bottom:1px solid var(--line);font-weight:700}
.utable td{padding:12px 16px;border-bottom:1px solid var(--hairline);font-variant-numeric:tabular-nums}
.utable td:nth-child(2),.utable td:nth-child(3),.utable td:nth-child(4){color:var(--muted)}
.utable tr:last-child td{border-bottom:none}
.utable a:hover{color:var(--accent2)}
.uexport{display:flex;gap:12px;margin:26px 0 8px}
.uexport button{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:10px;padding:10px 18px;font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .15s}
.uexport button:hover{border-color:var(--accent);color:var(--ink)}
.umethod{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 22px;margin:24px 0 10px}
.umethod h4{margin:0 0 12px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.umethod ul{margin:0;padding-left:18px}
.umethod li{font-size:13.5px;color:var(--muted);line-height:1.6;margin-bottom:9px}
.umethod b{color:var(--ink-soft)}
.umethod code{font-family:var(--mono);font-size:12px;background:var(--surface2);padding:1px 5px;border-radius:4px}

/* ---------- library save buttons ---------- */
.savebtns{position:absolute;top:10px;right:10px;display:flex;gap:6px;z-index:3}
.savebtns.sm{position:static;display:inline-flex;margin-left:12px;vertical-align:middle}
.sv{border:1px solid var(--line);background:color-mix(in srgb,var(--bg) 72%,transparent);
  backdrop-filter:blur(6px);color:var(--muted);border-radius:99px;width:30px;height:30px;
  cursor:pointer;font-size:14px;display:grid;place-items:center;transition:all .15s;line-height:1}
.sv:hover{color:var(--ink);border-color:var(--accent)}
.sv.on{color:#fff;background:var(--accent);border-color:var(--accent)}

/* ---------- magazine hub ---------- */
.plusbar{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line));border-radius:16px;
  padding:18px 22px;margin:22px 0 6px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent)}
.plusbar b{font-family:var(--serif);font-size:19px;display:block}
.plusbar span{color:var(--muted);font-size:13.5px}
.cta{display:inline-block;border:none;border-radius:10px;padding:11px 20px;font:inherit;font-size:14px;
  font-weight:650;cursor:pointer;color:#fff;background:linear-gradient(90deg,var(--accent),var(--accent2));
  transition:opacity .15s;text-align:center}
.cta:hover{opacity:.88}
.cta.ghost{background:transparent;color:var(--muted);border:1px solid var(--line);margin-top:10px}
.cta.ghost:hover{color:var(--ink);border-color:var(--muted);opacity:1}
.protonote{font-size:12px;color:var(--faint);margin:10px 0 0;line-height:1.5}
.mag-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin:6px 0}
@media (max-width:860px){.mag-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.mag-grid{grid-template-columns:1fr}}
.mag-cover{aspect-ratio:3/4;border-radius:16px;padding:22px;display:flex;flex-direction:column;
  position:relative;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow);
  transition:transform .18s,border-color .18s}
a:hover>.mag-cover{transform:translateY(-4px);border-color:var(--accent)}
.mag-cover.has-img{color:#f2f0fa;border-color:rgba(255,255,255,.16)}
.mag-cover.has-img .mc-issue,.mag-cover.has-img .mc-art{color:rgba(242,240,250,.66)}
.mag-cover.has-img .mc-tag{color:rgba(242,240,250,.78)}
.mag-cover.has-img .mc-mast em{color:#cdbcff}
.mc-mast{font-family:var(--serif);font-weight:700;letter-spacing:.12em;font-size:18px}
.mc-mast em{font-style:normal;color:var(--accent2)}
.mc-issue{font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:6px}
.mc-title{font-family:var(--serif);font-size:clamp(22px,2.6vw,30px);line-height:1.12;font-weight:650;
  letter-spacing:-.015em;margin-top:auto}
.mc-tag{font-size:12px;color:var(--muted);margin-top:8px;line-height:1.45}
.mc-art{font-size:10px;color:var(--faint);margin-top:12px;letter-spacing:.06em}

/* ---------- issue reader ---------- */
.issue-shell{max-width:820px;margin:0 auto;padding:26px 0 60px}
.issue-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.issue-pos{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:700}
.ipage{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:44px 48px;min-height:520px;box-shadow:var(--shadow)}
@media (max-width:640px){.ipage{padding:28px 22px}}
.ip-cover{display:flex;flex-direction:column;gap:18px;align-items:stretch}
.ip-cover .mag-cover{aspect-ratio:auto;min-height:420px}
.ip-coverdek{color:var(--muted);font-family:var(--serif);font-style:italic;font-size:17px;text-align:center;margin:4px 0 0}
.ip-art{height:300px;margin:-44px -48px 30px;border-radius:20px 20px 0 0;
  box-shadow:inset 0 -60px 60px -40px var(--surface)}
@media (max-width:640px){.ip-art{margin:-28px -22px 22px;height:200px}}
.ip-kicker{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-bottom:10px}
.ip-title{font-family:var(--serif);font-size:30px;line-height:1.15;font-weight:650;letter-spacing:-.015em;margin:0 0 8px}
.ip-title.big{font-size:clamp(30px,4vw,42px)}
.ip-prose{margin-top:16px;font-size:17px}
.ip-toc{margin:22px 0 0;padding-left:0;list-style:none;counter-reset:toc}
.ip-toc li{counter-increment:toc;padding:13px 0;border-bottom:1px solid var(--hairline);
  font-family:var(--serif);font-size:19px}
.ip-toc li::before{content:counter(toc,decimal-leading-zero);color:var(--accent2);font-family:var(--sans);
  font-size:12px;font-weight:700;margin-right:16px;letter-spacing:.1em}
.ip-tl{margin-top:20px}
.tl-row{display:flex;gap:18px;padding:11px 0;border-bottom:1px solid var(--hairline);align-items:baseline}
.tl-d{flex:none;width:52px;font-size:11px;letter-spacing:.1em;font-weight:700;color:var(--accent2);text-transform:uppercase}
.tl-t{font-size:15px;color:var(--ink-soft);line-height:1.5}
.ip-colhead{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.ip-colhead .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;font-weight:800;color:#fff;font-size:16px;flex:none}
.ip-note{font-size:13px;color:var(--muted);line-height:1.6}
.ip-watch{margin:18px 0 0;padding-left:22px}
.ip-watch li{font-size:16px;line-height:1.6;color:var(--ink-soft);margin-bottom:13px}
.ip-lock{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px}
.ip-lock p{max-width:52ch;color:var(--muted);line-height:1.65}
.lock-ic{font-size:40px;color:var(--accent2)}
.ip-closing{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px}
.ip-closing p{max-width:54ch;color:var(--muted);line-height:1.7;font-size:16px}
.issue-nav{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:18px}
.pgbtn{font-size:13.5px;font-weight:650;color:var(--ink-soft);border:1px solid var(--line);
  border-radius:10px;padding:9px 16px;transition:all .15s}
.pgbtn:hover{border-color:var(--accent);color:var(--ink)}
.pgbtn.dis{opacity:.35;pointer-events:none}
.issue-dots{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.issue-dots .dot{width:8px;height:8px;border-radius:50%;background:var(--surface3);transition:all .15s}
.issue-dots .dot:hover{background:var(--muted)}
.issue-dots .dot.cur{background:var(--accent2);transform:scale(1.3)}

/* ---------- account ---------- */
.acct-card{max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:26px;margin:20px 0;display:flex;flex-direction:column;gap:12px}
.acct-card label{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);font-weight:700}
.acct-card input{background:var(--surface2);border:1px solid var(--line);border-radius:10px;
  padding:12px 14px;font:inherit;color:var(--ink);outline:none}
.acct-card input:focus{border-color:var(--accent)}
.acct-row{display:flex;justify-content:space-between;padding:11px 0;border-bottom:1px solid var(--hairline);font-size:14px}
.acct-row span{color:var(--muted)}

/* ---------- archive ---------- */
.arch-bar{display:flex;gap:10px;flex-wrap:wrap;margin:20px 0 6px}
.arch-bar input[type=search]{flex:2 1 240px;background:var(--surface);border:1px solid var(--line);
  border-radius:10px;padding:11px 14px;font:inherit;color:var(--ink);outline:none}
.arch-bar input[type=search]:focus{border-color:var(--accent)}
.arch-bar select{flex:1 1 140px;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;font:inherit;color:var(--ink-soft);outline:none;cursor:pointer}
.arch-issue{display:flex;align-items:center;gap:16px;border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));
  border-radius:14px;padding:16px 20px;margin:22px 0 8px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 8%,transparent),transparent);transition:border-color .15s}
.arch-issue:hover{border-color:var(--accent)}
.arch-issue>span:first-child{font-size:22px;color:var(--accent2)}
.arch-issue b{display:block;font-family:var(--serif);font-size:16px}
.arch-issue div span{color:var(--muted);font-size:12.5px}
.arch-go{margin-left:auto;color:var(--accent2);font-weight:650;font-size:14px;flex:none}

/* ---------- desk (section) header ---------- */
.desk-head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:38px 0 26px;border-bottom:1px solid var(--hairline);margin-bottom:8px;flex-wrap:wrap}
.desk-title{font-family:var(--serif);font-size:clamp(30px,4vw,44px);font-weight:650;
  letter-spacing:-.018em;margin:0 0 10px}
.desk-desc{color:var(--muted);font-size:15.5px;line-height:1.6;max-width:56ch;margin:0}
.desk-editor{display:flex;align-items:center;gap:13px;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:14px 18px;transition:border-color .15s;flex:none}
.desk-editor:hover{border-color:var(--accent)}
.desk-editor .av{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-weight:800;color:#fff;font-size:16px;flex:none}
.desk-editor em{display:block;font-style:normal;font-size:9.5px;letter-spacing:.18em;
  text-transform:uppercase;color:var(--muted);font-weight:700}
.desk-editor b{display:block;font-size:15px;margin:1px 0}
.desk-editor span span{font-size:11.5px;color:var(--muted);font-style:italic;font-family:var(--serif)}

/* ---------- primer promo banner ---------- */
.primer-banner{position:relative;display:flex;align-items:center;gap:18px;margin:22px 0 4px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:16px;
  padding:16px 52px 16px 16px;overflow:hidden;transition:border-color .18s,transform .18s;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 10%,transparent),transparent 70%)}
.primer-banner:hover{border-color:var(--accent);transform:translateY(-2px)}
.pb-art{width:64px;height:84px;border-radius:8px;flex:none;box-shadow:var(--shadow)}
.pb-txt b{font-family:var(--serif);font-size:17px;display:block;margin-bottom:3px}
.pb-txt span{color:var(--muted);font-size:13px;line-height:1.5;display:block;max-width:60ch}
.pb-go{margin-left:auto;flex:none;color:var(--accent2);font-weight:700;font-size:14px}
.pb-x{position:absolute;top:10px;right:10px;border:none;background:transparent;color:var(--faint);
  cursor:pointer;font-size:13px;padding:6px}
.pb-x:hover{color:var(--ink)}
@media (max-width:640px){.pb-go{display:none}.pb-txt span{display:none}}

/* ---------- reactions ---------- */
.reacts{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin:30px 0 4px;
  padding:16px 0 22px;border-top:1px solid var(--hairline)}
.reacts-l{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-weight:700;margin-right:4px}
.react{border:1px solid var(--line);background:var(--surface);color:var(--ink-soft);
  border-radius:99px;padding:8px 15px;font:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:all .15s}
.react:hover{border-color:var(--accent);transform:translateY(-1px)}
.react.on{background:linear-gradient(90deg,var(--accent),var(--accent2));border-color:transparent;color:#fff}

/* free badge on covers */
.mc-free{color:#7ee0b8;font-weight:800;letter-spacing:.08em}

/* card entrance motion */
@media (prefers-reduced-motion:no-preference){
  /* .card and .mag-cover were listed here with fill:both, and an animation's
     filled value outranks the .rv class's normal declarations -- so every card
     below the fold computed opacity:1 while the IntersectionObserver reveal
     system sat armed and did nothing. Verified 15/15 on the home page. They
     belong to the reveal system; only the banner keeps the blunt entry. */
  .primer-banner{animation:rtfc-rise .45s ease both}
  @keyframes rtfc-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
}

/* ---------- resources ---------- */
.res-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin-bottom:26px}
@media (max-width:720px){.res-grid{grid-template-columns:1fr}}
.res-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;gap:6px;transition:border-color .15s}
.res-card:hover{border-color:var(--accent)}

.res-card>span{color:var(--muted);font-size:13px;line-height:1.5}
.res-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.res-links a{font-size:12px;font-weight:650;color:var(--accent2);border:1px solid var(--line);
  border-radius:99px;padding:4px 11px;transition:all .15s}
.res-links a:hover{border-color:var(--accent);color:var(--ink)}

/* ---------- THE SPREAD READER (real magazine) ---------- */
.mreader{position:fixed;inset:0;z-index:80;background:#050508;display:flex;flex-direction:column}
.mbar{display:flex;align-items:center;gap:16px;height:52px;padding:0 18px;flex:none;
  border-bottom:1px solid rgba(255,255,255,.07)}
.mexit{color:rgba(255,255,255,.65);font-size:13px;font-weight:650;display:flex;gap:7px;align-items:center}
.mexit:hover{color:#fff}
.mtitle{font-family:var(--serif);font-weight:650;color:#f0edf7;font-size:15px;letter-spacing:.04em;
  position:absolute;left:50%;transform:translateX(-50%)}
.mcount{margin-left:auto;font-size:11px;letter-spacing:.16em;color:rgba(255,255,255,.45);font-variant-numeric:tabular-nums}
.mtrack{flex:1;display:flex;gap:18px;overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;padding:20px max(6vw,24px);scrollbar-width:none;align-items:center}
.mtrack::-webkit-scrollbar{display:none}
.mpage{flex:none;height:min(100%, calc(88vw * 4 / 3));aspect-ratio:3/4;width:auto;scroll-snap-align:center;border-radius:4px;
  position:relative;overflow:hidden;box-shadow:0 24px 70px -20px rgba(0,0,0,.85);
  background:#0d0d14;color:#ece9f4;
  container-type:size;container-name:mpage}
.mpage.light{background:#f5f1e8;color:#221d28}
.mpage.light .mfolio-top,.mpage.light .mfolio-bot{color:rgba(34,29,40,.45)}
.mfolio-top{position:absolute;top:3.2%;left:0;right:0;text-align:center;font-size:9px;
  letter-spacing:.34em;color:rgba(236,233,244,.4);font-weight:650}
.mfolio-bot{position:absolute;bottom:3%;left:7%;right:7%;display:flex;justify-content:space-between;
  font-size:9.5px;letter-spacing:.14em;color:rgba(236,233,244,.4);font-weight:600;text-transform:uppercase}
.mpage.light,.mpage.full{padding:0}
.mpage>h2,.mpage .mp-title{margin:0}
.mpage.light{padding:9% 8% 8%}
.mp-title{font-family:var(--serif);font-size:2.3cqh;line-height:1.12;font-weight:680;
  letter-spacing:-.015em;margin:0 0 2.6% !important;color:#181320}
.mp-intro{font-family:var(--serif);font-style:italic;font-size:1.55cqh;color:rgba(34,29,40,.62);
  margin:0 0 3.5%;line-height:1.5}
.mp-body p{font-size:1.5cqh;line-height:1.66;margin:0 0 2.6%;color:#2c2635}
.mp-body>p:first-of-type::first-letter{font-family:var(--serif);font-size:3.1em;line-height:.8;
  float:left;padding:2px 8px 0 0;color:var(--accent);font-weight:650}
.mp-body.cols{columns:2;column-gap:7%}
.mgloss{display:grid;grid-template-columns:1fr 1fr;gap:2.2% 5%}
.mg-item{padding:2.2% 0;border-bottom:1px solid rgba(34,29,40,.12)}
.mg-item b{font-family:var(--serif);font-size:1.55cqh;display:block;color:#181320}
.mg-item span{font-size:1.3cqh;line-height:1.45;color:rgba(34,29,40,.68);display:block;margin-top:2px}
.mlist{display:flex;flex-direction:column}
.ml-item{display:flex;gap:4%;padding:2.4% 0;border-bottom:1px solid rgba(34,29,40,.12);align-items:baseline}
.ml-item:last-child{border-bottom:none}
.ml-n{font-family:var(--serif);font-size:2cqh;color:var(--accent);font-weight:650;flex:none;min-width:2ch}
.ml-item b{font-size:1.5cqh;display:block;color:#181320}
.ml-item div>span{font-size:1.35cqh;line-height:1.5;color:rgba(34,29,40,.68);display:block;margin-top:2px}
/* magazine text-page layout (art rail fills the page — no voids) */
.mpage.light.haslayout{display:flex;flex-direction:column}
.haslayout .mp-title{flex:none}
.mp-grid{display:grid;grid-template-columns:1.32fr 1fr;gap:5%;flex:1;min-height:0;margin-top:1.5%}
.mp-grid .mp-body{margin:0;overflow:hidden}
.mp-grid .mp-body p{font-size:1.52cqh}
.mp-rail{display:flex;flex-direction:column;min-height:0}
.mr-fig{flex:1;min-height:30%;background-size:cover;background-position:center;border-radius:10px;
  box-shadow:0 12px 32px -14px rgba(20,15,35,.5)}
.mr-cap{font-size:1.05cqh;color:rgba(34,29,40,.55);font-style:italic;
  margin:2.5% 0 5%;text-align:center;line-height:1.35;flex:none}
.mr-pull{font-family:var(--serif);font-style:italic;font-size:1.55cqh;line-height:1.42;
  color:#181320;border-left:3px solid var(--accent);padding-left:7%;margin-bottom:6%;flex:none}
.mr-fact{background:linear-gradient(135deg,var(--accent),var(--accent2));border-radius:10px;
  padding:5.5% 8%;color:#fff;flex:none}
.mr-fact b{font-family:var(--serif);font-size:2.5cqh;display:block;line-height:1.05}
.mr-fact span{font-size:1.18cqh;line-height:1.42;display:block;margin-top:3%;color:rgba(255,255,255,.88)}
/* contents page */
.mtoc{margin-top:3%}
.mtoc-thumb{width:9.5%;aspect-ratio:3/4;flex:none;border-radius:6px;background-size:cover;
  background-position:center;box-shadow:0 6px 16px -8px rgba(20,15,35,.5)}
.mtoc-row{display:flex;gap:4%;align-items:center;padding:2.6% 0;border-bottom:1px solid rgba(34,29,40,.12)}
.mtoc-row:last-child{border-bottom:none}
.mtoc-n{font-family:var(--sans);font-size:1.2cqh;font-weight:800;letter-spacing:.18em;
  color:var(--accent);flex:none;min-width:11%}
.mtoc-mid{flex:1}
.mtoc-mid b{font-family:var(--serif);font-size:1.9cqh;display:block;color:#181320;font-weight:680}
.mtoc-mid span{font-size:1.35cqh;line-height:1.45;color:rgba(34,29,40,.62);display:block;margin-top:2px}
.mtoc-p{font-family:var(--serif);font-size:1.9cqh;color:var(--accent);font-weight:650;flex:none}
/* player cards */
.mplayers{display:flex;flex-direction:column;gap:2.4%;margin-top:2.5%}
.mplayer{border-left:4px solid;background:rgba(34,29,40,.045);border-radius:0 10px 10px 0;padding:2.6% 4%}
.mpl-head{display:flex;align-items:center;gap:10px;margin-bottom:1.4%;flex-wrap:wrap}
.mpl-head b{font-family:var(--serif);font-size:1.95cqh;color:#181320;font-weight:700}
.mpl-tag{font-size:1cqh;font-weight:800;letter-spacing:.14em;color:#0d0d14;
  border-radius:4px;padding:2px 8px}
.mplayer p{font-size:1.4cqh;line-height:1.55;color:rgba(34,29,40,.78);margin:0}
.mpl-outro{font-size:1.3cqh;line-height:1.5;color:rgba(34,29,40,.6);
  font-style:italic;margin-top:3%;padding-top:2.5%;border-top:1px solid rgba(34,29,40,.12)}
/* faceoff table */
.mfaceoff{width:100%;border-collapse:collapse;margin-top:3%}
.mfaceoff th{font-family:var(--sans);font-size:1.1cqh;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(34,29,40,.55);text-align:left;padding:1.6% 2%;border-bottom:2px solid #181320;font-weight:800}
.mfaceoff td{font-size:1.35cqh;line-height:1.4;color:rgba(34,29,40,.8);
  padding:2.2% 2%;border-bottom:1px solid rgba(34,29,40,.12);vertical-align:top}
.mfaceoff tr:last-child td{border-bottom:none}
.mfaceoff .fo-m{font-family:var(--serif);font-weight:700;color:#181320;font-size:1.45cqh}
.mfaceoff .fo-p{font-family:var(--sans);font-weight:800;color:var(--accent);letter-spacing:.05em;white-space:nowrap}
.mfo-note{font-size:1.2cqh;color:rgba(34,29,40,.55);font-style:italic;margin-top:3%;line-height:1.5}
/* full-bleed pages */
.mcover-in{position:absolute;left:8%;right:8%;bottom:7%}
.mc-kick{font-size:1.1cqh;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);font-weight:700}
.mc-big{font-family:var(--serif);font-size:6.4cqh;font-weight:700;letter-spacing:.02em;
  color:#fff;margin:2% 0 1%;text-shadow:0 4px 40px rgba(0,0,0,.5)}
.mc-sub{font-family:var(--serif);font-style:italic;font-size:1.8cqh;color:rgba(255,255,255,.85)}
.mopen-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:0 10%}
.mo-part{font-size:1.2cqh;letter-spacing:.42em;color:var(--accent2);font-weight:700}
.mo-title{font-family:var(--serif);font-size:4.6cqh;font-weight:680;color:#fff;margin:3% 0 2%;line-height:1.08}
.mo-sub{font-family:var(--serif);font-style:italic;font-size:1.7cqh;color:rgba(255,255,255,.75)}
.mq-in{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:0 11%}
.mq-mark{font-family:var(--serif);font-size:10cqh;line-height:.6;color:var(--accent);opacity:.9}
.mq-text{font-family:var(--serif);font-size:3.4cqh;line-height:1.3;color:#fff;font-weight:600;
  letter-spacing:-.01em;margin-top:3%}
.mq-attr{margin-top:5%;font-size:1.4cqh;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.55)}
.mback{display:flex;align-items:center;justify-content:center;background:radial-gradient(600px 500px at 50% 35%,rgba(124,108,240,.16),transparent 70%),#0a0a10 !important}
.mb-in{text-align:center;padding:0 12%}
.mb-mark{font-family:var(--serif);font-weight:700;letter-spacing:.14em;font-size:3.4cqh;color:#f0edf7}
.mb-mark em{font-style:normal;color:var(--accent2)}
.mb-sub{font-family:var(--serif);font-style:italic;color:rgba(240,237,247,.6);margin:2% 0 8%}
.mb-in p{font-size:1.4cqh;color:rgba(240,237,247,.55);line-height:1.7;margin:0 0 2.5%}
.mhint{position:fixed;bottom:16px;left:50%;transform:translateX(-50%);font-size:11px;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.4);transition:opacity .6s;pointer-events:none}
/* portrait / mobile: vertical magazine */

/* Removed: seven @media (max-width:1px) blocks. A viewport is never 1px wide, so
   these were disabled mobile-magazine layouts that shipped to every reader as dead
   parse weight and, worse, disguised the fact that the reader had no phone layout
   at all. The real phone layout is in the PHONE READER block at the end of this file. */

/* ---------- footer ---------- */
footer.site{border-top:1px solid var(--hairline);margin-top:72px;padding:56px 0 0;
  color:var(--muted);font-size:13.5px;line-height:1.65}
footer.site a{color:var(--muted);transition:color .15s}
footer.site a:hover{color:var(--accent2)}
footer.site .flogo{font-family:var(--serif);font-size:21px;font-weight:700;
  letter-spacing:.1em;color:var(--ink);margin-bottom:3px}
footer.site .flogo em{font-style:normal;color:var(--accent2)}
.foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr 1.2fr;gap:36px 40px;padding-bottom:46px}
.foot-brand p{margin:0;max-width:36ch}
.foot-sub{font-size:9.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--faint);margin-bottom:16px}
.foot-live{display:flex;flex-direction:column;align-items:flex-start;margin-top:18px;
  padding-top:14px;border-top:1px solid var(--hairline)}
.foot-col strong{color:var(--ink-soft);display:block;margin-bottom:12px;font-size:11px;
  letter-spacing:.18em;text-transform:uppercase}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 8px}
.foot-tag{display:inline-block;margin-left:5px;padding:0 7px;border:1px solid var(--line);
  border-radius:99px;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent2)}
footer.site .foot-cost a{color:var(--accent2)}
.foot-meta{border-top:1px solid var(--hairline);padding:16px 0 30px;display:flex;
  justify-content:space-between;align-items:baseline;gap:10px 24px;flex-wrap:wrap;
  font-size:12px;color:var(--faint)}
.foot-legal{display:flex;gap:20px}
@media (max-width:960px){
  .foot-grid{grid-template-columns:repeat(2,1fr);gap:32px 40px}
  .foot-brand{grid-column:1/-1}
  .foot-brand p{max-width:52ch}
}

/* ============ MAGAZINE V3 — real-magazine layout system (overrides above) ============ */
/* tighter page frame */
.mpage.light{padding:5.5% 6%}
.mp-grid{gap:4.5%}
.mp-grid .mp-body p{font-size:1.42cqh;line-height:1.55;margin-bottom:2.2%}
.mp-body>p:first-of-type::first-letter{font-size:2.9em}
.haslayout .mp-title{font-size:2.15cqh;margin-bottom:2%!important}
/* L: art-top */
.mpage.l-top{display:flex;flex-direction:column}
.l-top .lt-art{margin:-8.5% -6.4% 3.5%;height:42%;flex:none;background-size:cover;background-position:center}
.l-top .mp-body{columns:2;column-gap:5%;flex:1;overflow:hidden}
.l-top .mp-body p{font-size:1.32cqh;line-height:1.5}
/* L: art-left (mirror) */
.mp-grid.rev{grid-template-columns:1fr 1.32fr}
/* L: overlay */
.mpage.l-ov{padding:0!important;display:flex;flex-direction:column;justify-content:flex-end}
.l-ov .ov-panel{margin:4%;background:rgba(10,8,16,.82);backdrop-filter:blur(8px);border-radius:14px;
  padding:4.5% 5%;color:#efeaf8;border:1px solid rgba(255,255,255,.1)}
.l-ov .ov-panel .mp-title{color:#fff;font-size:2.1cqh;margin-bottom:2%!important}
.l-ov .ov-panel p{font-size:1.32cqh;line-height:1.52;color:rgba(239,234,248,.88);margin:0 0 2%}
.l-ov .ov-kick{font-size:1.05cqh;letter-spacing:.26em;color:var(--accent2);font-weight:800;margin-bottom:1.5%}
.l-ov .mfolio-top,.l-ov .mfolio-bot{z-index:2;color:rgba(255,255,255,.55)}
/* L: quote band */
.l-band .bd-art{margin:-8.5% -6.4% 3%;height:30%;flex:none;background-size:cover;background-position:center}
.mpage.l-band{display:flex;flex-direction:column}
.l-band .mp-body{columns:2;column-gap:5%;flex:1;overflow:hidden}
.l-band .mp-body p{font-size:1.28cqh;line-height:1.5}
.l-band .bd-quote{margin:3% -6.4%;padding:3.5% 7%;background:linear-gradient(90deg,var(--accent),var(--accent2));
  color:#fff;font-family:var(--serif);font-style:italic;font-size:1.8cqh;line-height:1.35;flex:none}
/* L: stat strip */
.l-stats .st-strip{display:flex;margin:3% -6.4% -5.9%;flex:none}
.l-stats{display:flex;flex-direction:column}
.l-stats .mp-grid{flex:1;min-height:0}
.l-stats .st-cell{flex:1;padding:3% 4%;border-top:3px solid var(--accent);background:rgba(34,29,40,.05)}
.l-stats .st-cell+.st-cell{border-left:1px solid rgba(34,29,40,.12)}
.l-stats .st-cell b{font-family:var(--serif);font-size:2cqh;color:#181320;display:block}
.l-stats .st-cell span{font-size:1.05cqh;line-height:1.35;color:rgba(34,29,40,.62);display:block;margin-top:2px}
/* AD pages */
.mpage.mad{padding:0!important;display:flex;flex-direction:column}
.mad .ad-rubric{flex:none;text-align:center;font-size:.95cqh;letter-spacing:.4em;
  color:rgba(255,255,255,.55);padding:2.2% 0;background:rgba(5,5,10,.55);font-weight:700;z-index:2}
.mad .ad-art{flex:1;background-size:cover;background-position:center}
.mad .ad-block{flex:none;background:#0b0a12;padding:4% 6% 5.5%;text-align:center}
.mad .ad-brand{font-family:var(--serif);font-weight:700;letter-spacing:.22em;font-size:2.3cqh;color:#fff}
.mad .ad-tag{font-family:var(--serif);font-style:italic;font-size:1.4cqh;color:rgba(255,255,255,.8);margin-top:1.2%}
.mad .ad-line{font-size:1.15cqh;letter-spacing:.18em;color:var(--accent2);font-weight:700;margin-top:2.4%;text-transform:uppercase}
.mad .ad-foot{font-size:.9cqh;color:rgba(255,255,255,.38);margin-top:2.6%;line-height:1.5}
.mad.house .ad-rubric{background:var(--accent);color:#fff;letter-spacing:.32em}
/* photo spread */
.mpage.mphoto{padding:0!important;display:flex;flex-direction:column;justify-content:flex-end}
.mphoto .ph-cap{margin:0;background:linear-gradient(180deg,transparent,rgba(5,5,10,.92) 30%);padding:14% 6% 5%;color:#fff}
.mphoto .ph-kick{font-size:1.05cqh;letter-spacing:.3em;color:var(--accent2);font-weight:800}
.mphoto .ph-title{font-family:var(--serif);font-size:2.3cqh;font-weight:680;margin:1.5% 0}
.mphoto .ph-body{font-size:1.25cqh;line-height:1.5;color:rgba(255,255,255,.82);max-width:60ch}
/* COVER V3 — real magazine cover anatomy */
.mpage.mcov3{padding:0!important;position:relative}
.mcov3 .cv-mast{position:absolute;top:2.8%;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--serif);font-weight:700;letter-spacing:.1em;font-size:4.6cqh;
  color:#fff;text-shadow:0 3px 26px rgba(0,0,0,.65)}
.mcov3 .cv-mast em{font-style:normal;color:var(--accent2)}
.mcov3 .cv-tag{position:absolute;top:10.5%;left:0;right:0;text-align:center;z-index:3;
  font-family:var(--serif);font-style:italic;font-size:1.3cqh;color:rgba(255,255,255,.85);letter-spacing:.12em}
.mcov3 .cv-flash{position:absolute;top:14.5%;right:5%;z-index:3;transform:rotate(6deg);
  background:linear-gradient(135deg,#ffd76e,#e8a13d);color:#3b2a05;font-weight:800;
  font-size:1.15cqh;letter-spacing:.14em;padding:1.6% 3%;border-radius:6px;
  box-shadow:0 6px 20px rgba(0,0,0,.4)}
.mcov3 .cv-title{position:absolute;left:6%;bottom:23%;z-index:3;
  font-family:var(--serif);font-weight:700;font-size:6cqh;letter-spacing:.02em;
  color:#fff;text-shadow:0 4px 34px rgba(0,0,0,.7);line-height:.95}
.mcov3 .cv-sub{position:absolute;left:6%;bottom:19%;z-index:3;
  font-family:var(--serif);font-style:italic;font-size:1.5cqh;color:rgba(255,255,255,.92)}
.mcov3 .cv-lines{position:absolute;left:6%;top:19%;z-index:3;max-width:46%}
.mcov3 .cv-line{margin-bottom:6%;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.mcov3 .cv-line b{display:block;font-size:1.05cqh;letter-spacing:.22em;color:var(--accent2);font-weight:800}
.mcov3 .cv-line span{font-family:var(--serif);font-size:1.5cqh;color:#fff;font-weight:600;line-height:1.25}
.mcov3 .cv-bar{position:absolute;left:0;right:0;bottom:0;z-index:3;display:flex;align-items:center;
  justify-content:space-between;background:rgba(5,5,10,.88);padding:2.2% 5%}
.mcov3 .cv-issue{font-size:1.15cqh;letter-spacing:.26em;color:#fff;font-weight:700}
.mcov3 .cv-code{width:13%;aspect-ratio:2.6/1;background:repeating-linear-gradient(90deg,#fff 0 2px,transparent 2px 4px,#fff 4px 5px,transparent 5px 8px,#fff 8px 11px,transparent 11px 13px);border-radius:2px;opacity:.9}
/* contents tighten */
.mtoc-row{padding:2.2% 0}
/* V3: back cover goes full-bleed brand page */
.mpage.mback{background:linear-gradient(180deg,rgba(6,5,12,.88),rgba(6,5,12,.7) 50%,rgba(6,5,12,.92)),url('img/primer-cover.jpg') center/cover !important}

/* ============ MAGAZINE V4 — founder's final-pass fixes (overrides above) ============ */
/* 1) TITLE CLEARANCE: breathing room below the running head, always */
.mpage.light{padding:9.5% 6.5% 7.5%;display:flex;flex-direction:column}
.mpage.light .mp-title{margin-top:0!important}
.mfolio-top{top:3.4%}
/* 2) RICH TEXT */
.mpage .mk{background:linear-gradient(180deg,transparent 52%,rgba(139,124,247,.38) 52%);padding:0 2px;border-radius:2px;color:inherit}
.mpage .acc{color:var(--accent);font-weight:700}
.mpage.light .mp-body b, .mpage.light .mg-item span b, .mpage.light .ml-item span b{color:#181320}
.l-ov .mk{background:linear-gradient(180deg,transparent 52%,rgba(139,124,247,.55) 52%)}
/* 3) STRUCTURAL FILL — content distributes across full page height, voids impossible */
.mpage.light .mp-body{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.mpage.light .mp-body p{margin-bottom:0}
.mp-grid{flex:1}
.mgloss{flex:1;align-content:space-evenly}
.mlist{flex:1;justify-content:space-evenly}
.ml-item,.mg-item{border-bottom:none}
.ml-item{background:rgba(34,29,40,.04);border-radius:10px;padding:2.6% 4%;border-left:3px solid var(--accent)}
.mg-item{background:rgba(34,29,40,.04);border-radius:8px;padding:3% 4.5%}
.mtoc{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.mtoc-row{border-bottom:none;background:rgba(34,29,40,.04);border-radius:10px;padding:2.4% 3.5%}
.mtoc-foot{margin-top:3%;flex:none;background:linear-gradient(90deg,var(--accent),var(--accent2));color:#fff;
  border-radius:10px;padding:2.6% 4%;font-size:1.25cqh;line-height:1.5;text-align:center}
.mplayers{flex:1;justify-content:space-evenly}
.ip-tl{flex:1;display:flex;flex-direction:column;justify-content:space-evenly;margin-top:2%}
.tl-row{border-bottom:none;background:rgba(34,29,40,.04);border-radius:10px;padding:2.2% 3.5%;
  border-left:3px solid var(--accent);align-items:center}
.tl-d{color:var(--accent);min-width:14%}
.mpage.light .ip-tl+*{flex:none}
.mfaceoff{flex:none}
.fo-verdict{margin-top:auto;background:linear-gradient(90deg,var(--accent),var(--accent2));border-radius:10px;
  padding:2.8% 4.5%;color:#fff;display:flex;gap:4%;align-items:baseline}
.fo-verdict b{font-size:1.1cqh;letter-spacing:.22em;flex:none}
.fo-verdict span{font-family:var(--serif);font-size:1.5cqh;font-style:italic}
/* letter/text default rail pages: rail children distribute */
.mp-rail{justify-content:space-between}
.mr-cap{margin:2.5% 0}
/* stats page strip sits flush bottom */
.l-stats .st-strip{margin-top:auto}
/* 4) COVER POLISH: coverlines get designed chips, title punch */
.mcov3 .cv-line{background:linear-gradient(90deg,rgba(5,5,10,.55),rgba(5,5,10,.05));
  border-left:3px solid var(--accent2);border-radius:0 10px 10px 0;padding:2.2% 4% 2.2% 5%;margin-bottom:4.5%}
.mcov3 .cv-title{letter-spacing:-.01em;bottom:24%}
.mcov3 .cv-sub{bottom:20%}
.mcov3 .cv-flash{box-shadow:0 8px 26px rgba(232,161,61,.45)}
/* 5) BACK COVER richer */
.mb-next{margin:6% auto 0;display:flex;gap:5%;align-items:baseline;justify-content:center;
  border-top:1px solid rgba(255,255,255,.18);padding-top:5%;max-width:80%}
.mb-next b{font-size:1.1cqh;letter-spacing:.26em;color:var(--accent2)}
.mb-next span{font-family:var(--serif);font-style:italic;font-size:1.5cqh;color:rgba(240,237,247,.85)}
.mb-url{margin-top:5%;display:inline-block;border:1px solid rgba(255,255,255,.3);border-radius:99px;
  padding:1.6% 5%;font-size:1.25cqh;letter-spacing:.14em;color:#fff}
.mb-in p{margin:0 0 1.8%}
/* 6) PORTRAIT — composed, never stacked slabs; natural page heights kill voids AND cutoffs */
/* V4.1 — density trim on structured pages (kill residual overflow, landscape) */
@media (min-width:1px){
  .mtoc-row{padding:1.7% 3%}
  .mtoc-thumb{width:7.5%}
  .mtoc-foot{padding:2% 4%;margin-top:2%}
  .mp-intro{margin-bottom:2.2%}
  .mfaceoff td{padding:1.6% 2%}
  .mfaceoff th{padding:1.2% 2%}
  .mfo-note{margin-top:1.6%}
  .fo-verdict{padding:2% 4%}
  .mg-item{padding:2% 4%}
  .mgloss{gap:1.4% 4%}
  .ml-item{padding:1.8% 3.5%}
  .ml-n{font-size:1.7cqh}
}
/* V4.2 — glossary & list must fit wholly (real-cutoff fix) */
@media (min-width:1px){
  .mg-item{padding:1.5% 3.5%}
  .mg-item b{font-size:1.4cqh}
  .mg-item span{font-size:1.15cqh;margin-top:1px}
  .ml-item{padding:1.4% 3%}
  .ml-item b{font-size:1.35cqh}
  .ml-item div>span{font-size:1.2cqh}
  .mp-intro{font-size:1.4cqh;margin-bottom:1.8%}
}
/* V4.3 — grid overflow guards (belt & suspenders after copy-fit) */
.mp-grid>*{min-height:0}
.mp-grid .mp-body{overflow:hidden}
.l-band .mp-body{font-size:98%}
/* V4.4 — band page breathing room */
@media (min-width:1px){ .l-band .bd-art{height:26%} .l-band .bd-quote{padding:3% 7%} }
.mp-grid .mp-body p{line-height:1.52}

/* ============ MAGAZINE V5 — DECOR PACK ============
   Every light page carries edge + corner aesthetics by default:
   trim frame (::before), corner watermark glyph (::after),
   act side-tab (.mtab), art medallion (.mdeco) on structured kinds. */
.mpage.light::before{content:"";position:absolute;inset:2.1%;border:1px solid rgba(106,88,232,.16);
  border-radius:3px;pointer-events:none;z-index:0}
.mpage.light::after{content:"◈";position:absolute;right:-1.5%;bottom:-4%;
  font-family:var(--serif);font-size:18cqh;line-height:1;
  color:rgba(106,88,232,.055);pointer-events:none;z-index:0}
.mpage.light::before,.mpage.light::after{z-index:0}
.mtab{position:absolute;top:11%;right:0;z-index:3;writing-mode:vertical-rl;
  background:var(--accent);color:#fff;font-family:var(--sans);font-weight:750;
  font-size:1.05cqh;letter-spacing:.3em;text-transform:uppercase;
  padding:12px 4px 14px;border-radius:3px 0 0 3px;box-shadow:-4px 4px 14px -6px rgba(0,0,0,.4)}
.mpage.full .mtab,.mpage.mcov3 .mtab{background:rgba(106,88,232,.85);backdrop-filter:blur(4px)}
.mdeco{position:absolute;top:7.8%;right:6.5%;width:15.5%;aspect-ratio:1;border-radius:50%;
  background-size:cover;background-position:center;z-index:2;
  border:2px solid rgba(106,88,232,.55);
  box-shadow:0 0 0 5px rgba(106,88,232,.1),0 10px 26px -10px rgba(20,10,60,.5)}
.mdeco::after{content:"";position:absolute;inset:-11px;border:1px dashed rgba(106,88,232,.3);
  border-radius:50%}
.hasdeco .mp-title{padding-right:18%}
.hasdeco .ip-kicker{padding-right:20%}
/* V5.1 — timeline fits its page (first real render of the kind) */
@media (min-width:1px){
  .ip-tl{min-height:0}
  .tl-row{padding:1.2% 3%;gap:3%}
  .tl-d{font-size:1.25cqh;min-width:13%}
  .tl-t{font-size:1.4cqh;line-height:1.42}
}
/* ============ V6 FEATURES: tools · control room · palette · scoreboard · corrections ============ */
/* article tools row */
.art-tools{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:14px 0 18px}
.tool-btn{border:1px solid var(--hairline);background:var(--card);color:var(--ink);font:inherit;
  font-size:13px;font-weight:650;padding:8px 15px;border-radius:99px;cursor:pointer;
  display:inline-flex;gap:8px;align-items:center;transition:border-color .15s,transform .12s}
.tool-btn:hover{border-color:var(--accent2);transform:translateY(-1px)}
/* "At a glance" leads the tools row and jumps to the summary — subtly accented */
.tldr-btn{border-color:color-mix(in srgb,var(--accent) 45%,var(--hairline));
  background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.tldr-btn:hover{border-color:var(--accent)}
.cost-chip{display:inline-flex;gap:8px;align-items:center;font-size:12.5px;color:var(--muted);
  border:1px dashed color-mix(in srgb,var(--accent) 45%,transparent);border-radius:99px;padding:8px 15px;
  text-decoration:none;transition:border-color .15s}
.cost-chip b{color:var(--accent2)}
.cost-chip .cc-go{color:var(--accent2);font-weight:650;opacity:0;margin-left:2px;transition:opacity .15s}
.cost-chip:hover{border-style:solid;border-color:var(--accent2)}
.cost-chip:hover .cc-go{opacity:1}

/* control room */
.live-dot{display:inline-block;width:8px;height:8px;border-radius:8px;background:#4ade80;margin-right:8px;
  animation:livepulse 1.6s ease-in-out infinite}
@keyframes livepulse{0%,100%{box-shadow:0 0 0 0 rgba(74,222,128,.5)}50%{box-shadow:0 0 0 7px rgba(74,222,128,0)}}
.pulse-next{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hairline));border-radius:16px;padding:22px 26px;margin-top:10px}
.pn-k{font-size:10.5px;letter-spacing:.26em;font-weight:750;color:var(--accent2)}
.pn-slot{font-family:var(--serif);font-size:clamp(22px,3vw,32px);font-weight:680;margin:4px 0 2px}
.pn-sub{font-size:13px;color:var(--muted)}
.pn-count{font-variant-numeric:tabular-nums;font-size:clamp(26px,3.6vw,40px);font-weight:750;
  color:var(--accent2);letter-spacing:.02em}
.pulse-floor{display:flex;flex-direction:column;gap:14px;margin-top:6px}
.ptier{display:flex;gap:8px;flex-wrap:wrap;align-items:stretch}
.pt-l{flex:0 0 100%;font-size:10px;letter-spacing:.24em;text-transform:uppercase;font-weight:750;color:var(--muted);margin:4px 0 2px}
.anode{display:flex;flex-direction:column;gap:2px;min-width:128px;flex:1 1 128px;max-width:200px;
  background:var(--card);border:1px solid var(--hairline);border-radius:11px;padding:11px 13px;
  text-decoration:none;color:var(--ink);position:relative;transition:border-color .15s,transform .12s}
.anode:hover{transform:translateY(-2px);border-color:var(--accent2)}
.anode b{font-size:12.5px;line-height:1.25}
.an-role{font-size:10.5px;color:var(--muted);line-height:1.3}
.an-dot{position:absolute;top:11px;right:11px;width:6px;height:6px;border-radius:6px;background:#4ade80;
  animation:livepulse 2.2s ease-in-out infinite}
.anode.t-eic{border-color:color-mix(in srgb,var(--accent) 55%,var(--hairline));background:color-mix(in srgb,var(--accent) 10%,var(--card))}
.anode.t-desk .an-dot{background:var(--accent2)}
.anode.t-mag .an-dot{background:#e0b64e}
.anode.t-rev .an-dot,.anode.t-biz .an-dot{background:#5aa8d8}
.pulse-sched{border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
.ps-row{display:flex;gap:16px;align-items:baseline;padding:13px 18px;border-bottom:1px solid var(--hairline);font-size:13.5px}
.ps-row:last-child{border-bottom:0}
.ps-row.star{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.ps-row b{min-width:88px;font-variant-numeric:tabular-nums;color:var(--accent2)}
.ps-n{font-weight:700;min-width:130px}
.ps-s{color:var(--muted);font-size:12.5px}
/* Measured publishing cadence — replaces the old fixed-slot table. The clock is
   a 24-column bar chart of the hours stories actually landed in, so it recomputes
   from ARTICLES on every render and cannot drift from the record. */
.sched-real{border:1px solid var(--hairline);border-radius:14px;padding:18px 18px 12px}
.sr-facts{display:flex;flex-wrap:wrap;gap:12px 34px;margin-bottom:20px}
.sr-fact{display:flex;flex-direction:column;gap:3px;min-width:0}
.sr-n{font-size:21px;font-weight:750;color:var(--accent2);font-variant-numeric:tabular-nums;line-height:1.1}
.sr-l{font-size:11.5px;color:var(--muted);letter-spacing:.02em}
.sr-clock{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;align-items:end;height:104px}
.sr-bar{display:flex;flex-direction:column;justify-content:flex-end;align-items:stretch;height:100%;min-width:0}
.sr-bar i{display:block;border-radius:3px 3px 0 0;
  background:linear-gradient(180deg,var(--accent),color-mix(in srgb,var(--accent) 45%,transparent))}
.sr-bar.empty i{background:color-mix(in srgb,var(--ink) 12%,transparent)}
.sr-bar span{display:block;margin-top:6px;height:13px;font-size:10px;color:var(--faint);
  text-align:left;white-space:nowrap;overflow:visible}
@media (max-width:640px){
  .sr-clock{gap:2px;height:88px}
  .sr-bar span{font-size:9px}
  .sr-facts{gap:10px 22px}
  .sr-n{font-size:18px}
}
.pulse-log{display:flex;flex-direction:column;gap:2px;margin-bottom:36px}
.pl-row{display:flex;gap:12px;align-items:baseline;padding:10px 14px;border-radius:9px;font-size:12.5px}
.pl-row:nth-child(odd){background:color-mix(in srgb,var(--ink) 3%,transparent)}
.pl-agent{flex:none;min-width:110px;font-weight:700;color:var(--accent2)}
.pl-desc{color:var(--muted);flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-t{flex:none;color:var(--muted);font-variant-numeric:tabular-nums}
@media(max-width:700px){ .pl-desc{white-space:normal} .pl-agent{min-width:90px} }

/* command palette */
#palette{position:fixed;inset:0;z-index:200}
#palette[hidden]{display:none}
.pal-back{position:absolute;inset:0;background:rgba(5,5,10,.6);backdrop-filter:blur(3px)}
.pal-box{position:relative;max-width:560px;margin:12vh auto 0;background:var(--bg);
  border:1px solid var(--hairline);border-radius:16px;box-shadow:0 40px 90px -30px rgba(0,0,0,.7);overflow:hidden}
#pal-in{width:100%;border:0;outline:0;background:transparent;color:var(--ink);font:inherit;
  font-size:17px;padding:18px 20px;border-bottom:1px solid var(--hairline)}
#pal-list{max-height:46vh;overflow-y:auto;padding:8px}
.pal-item{display:flex;gap:12px;align-items:center;padding:11px 12px;border-radius:10px;
  color:var(--ink);text-decoration:none;font-size:14px;line-height:1.35}
.pal-item.on,.pal-item:hover{background:color-mix(in srgb,var(--accent) 12%,transparent)}
.pal-item .pk{flex:none;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:750;
  color:var(--accent2);border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);
  border-radius:99px;padding:3px 9px;min-width:64px;text-align:center}
.pal-none{padding:22px;color:var(--muted);font-size:14px;text-align:center}
.pal-hint{display:flex;gap:18px;justify-content:center;padding:10px;border-top:1px solid var(--hairline);
  font-size:11px;color:var(--muted)}
@media(max-width:640px){ .pal-box{margin:8vh 12px 0} }

/* scoreboard */
.utable.scoreb .sb-note{font-size:12.5px;color:var(--muted);line-height:1.5;max-width:340px}
.sb-status{font-size:10px;letter-spacing:.12em;text-transform:uppercase;font-weight:750;
  border-radius:99px;padding:3px 10px;white-space:nowrap}
.s-released{background:rgba(74,222,128,.14);color:#4ade80}
.s-delayed{background:rgba(224,182,78,.14);color:#e0b64e}
.s-preview{background:rgba(139,124,247,.16);color:var(--accent2)}

/* corrections */
.corr-empty{text-align:center;border:1px dashed var(--hairline);border-radius:18px;padding:52px 30px;margin-top:8px}
.corr-empty .ce-mark{font-size:44px;color:var(--accent2);opacity:.5}
.corr-empty h2{font-family:var(--serif);font-size:26px;margin:12px 0 10px}
.corr-empty p{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:520px;margin:0 auto 10px}
.corr-empty .ce-dare{font-family:var(--serif);font-style:italic;color:var(--accent2);font-size:16px}
.corr-row{display:flex;gap:18px;padding:16px 4px;border-bottom:1px solid var(--hairline)}
.corr-row time{flex:none;font-size:12px;color:var(--muted);min-width:96px;padding-top:3px}
.corr-row a{font-weight:700;color:var(--ink)}
.corr-row p{color:var(--muted);font-size:13.5px;margin:5px 0 0}

/* ============ V7: briefing · voice · dossiers · dictionary · cost footer ============ */
.brief-chip{display:inline-flex;gap:10px;align-items:center;margin:0 0 18px;padding:10px 18px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--hairline));border-radius:99px;
  background:color-mix(in srgb,var(--accent) 9%,var(--card));color:var(--ink);text-decoration:none;
  font-size:13.5px;transition:transform .12s,border-color .15s}
.brief-chip:hover{transform:translateY(-1px);border-color:var(--accent2)}
.brief-chip b{color:var(--accent2)}
.brief-chip span{color:var(--muted);font-size:12.5px}
.brief-player{display:flex;gap:18px;align-items:center;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 14%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hairline));border-radius:16px;padding:20px 24px;margin-top:8px}
.brief-play{flex:none;width:62px;height:62px;border-radius:62px;border:0;background:var(--accent);color:#fff;
  font-size:22px;cursor:pointer;display:grid;place-items:center;transition:transform .12s;box-shadow:0 12px 30px -10px color-mix(in srgb,var(--accent) 70%,transparent)}
.brief-play:hover{transform:scale(1.05)}
.brief-meta{flex:1;min-width:0}
.brief-meta b{font-family:var(--serif);font-size:18px}
.brief-meta>span{display:block;font-size:12.5px;color:var(--muted);margin:3px 0 10px}
.brief-meta a{color:var(--accent2);text-decoration:none}
.brief-scrub{-webkit-appearance:none;appearance:none;width:100%;height:6px;border-radius:99px;
  background:var(--hairline);outline:0;cursor:pointer;margin:2px 0 8px}
.brief-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;
  background:var(--accent2);cursor:pointer;box-shadow:0 2px 8px -1px rgba(0,0,0,.4)}
.brief-scrub::-moz-range-thumb{width:16px;height:16px;border:0;border-radius:50%;background:var(--accent2);cursor:pointer}
.brief-bar{height:4px;border-radius:99px;background:var(--hairline);overflow:hidden}
.brief-bar i{display:block;height:100%;width:0%;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
.brief-toc{margin-top:18px;border:1px solid var(--hairline);border-radius:14px;overflow:hidden}
.bt-row{display:flex;gap:14px;align-items:center;padding:11px 16px;font-size:13.5px;border-bottom:1px solid var(--hairline);cursor:pointer;transition:background .12s}
.bt-row:last-child{border-bottom:0}
.bt-row:hover{background:color-mix(in srgb,var(--accent) 6%,transparent)}
.bt-row>span{color:var(--accent2);font-variant-numeric:tabular-nums;font-weight:700;font-size:11px;flex:none}
.bt-row.on{background:color-mix(in srgb,var(--accent) 12%,transparent);font-weight:650}
.bt-jump{margin-left:auto;font-style:normal;font-size:11px;color:var(--accent2);opacity:0;transition:opacity .12s;flex:none}
.bt-row:hover .bt-jump,.bt-row.on .bt-jump{opacity:1}
/* cross-page mini-player */
#miniplayer{position:fixed;right:18px;bottom:18px;z-index:150;display:flex;align-items:center;gap:12px;
  width:340px;max-width:calc(100vw - 36px);padding:10px 12px;border-radius:14px;
  background:color-mix(in srgb,var(--bg) 88%,var(--accent));backdrop-filter:blur(12px);
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--hairline));
  box-shadow:0 24px 54px -18px rgba(0,0,0,.6);animation:mpin .25s ease}
@keyframes mpin{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
#miniplayer[hidden]{display:none}
#mp-toggle{flex:none;width:40px;height:40px;border-radius:40px;border:0;background:var(--accent);color:#fff;
  font-size:15px;cursor:pointer;display:grid;place-items:center}
.mp-info{flex:1;min-width:0;text-decoration:none;color:var(--ink);display:block}
.mp-info b{display:block;font-size:12px;color:var(--accent2)}
#mp-seg{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.mp-bar{display:block;height:3px;border-radius:99px;background:var(--hairline);overflow:hidden;margin-top:5px}
.mp-bar i{display:block;height:100%;width:0%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width .3s}
#mp-close{flex:none;width:28px;height:28px;border-radius:28px;border:1px solid var(--hairline);background:transparent;
  color:var(--muted);cursor:pointer;font-size:12px}
#mp-close:hover{color:var(--ink);border-color:var(--muted)}
@media(max-width:520px){ #miniplayer{left:12px;right:12px;bottom:12px;width:auto} }
.voice-panel{position:absolute;z-index:80;margin-top:46px;background:var(--bg);border:1px solid var(--hairline);
  border-radius:14px;padding:16px 18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.5);min-width:290px}
.voice-panel[hidden]{display:none}
.art-tools{position:relative}
.brief-player+.voice-panel{margin-top:8px}
.vp-row{display:flex;gap:12px;align-items:center;margin-bottom:12px}
.vp-row label{font-size:11px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted);min-width:48px}
.vp-row select{flex:1;background:var(--card);color:var(--ink);border:1px solid var(--hairline);border-radius:8px;padding:7px 9px;font:inherit;font-size:12.5px;max-width:220px}
.vp-row input[type=range]{flex:1;accent-color:var(--accent)}
#vp-rate-v{font-size:12px;color:var(--accent2);font-variant-numeric:tabular-nums;min-width:44px}
.vp-actions{margin-bottom:0}
.vp-note{font-size:11px;color:var(--muted);line-height:1.4}
.tb-gear{padding:8px 12px}
.cost-foot{margin:18px 0 4px}
/* reading-progress fill on the Listen button */
.tts-btn2{position:relative;overflow:hidden}
.tts-prog{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--accent2);transition:width .4s;border-radius:0 2px 2px 0}
/* mini-player: scrubbable bar + info column */
.mp-info{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.mp-info a{text-decoration:none;color:var(--ink)}
.mp-bar{cursor:pointer;padding:4px 0;margin:-4px 0}
.mp-bar:hover i{background:var(--accent)}
/* dictionary call-to-action card in Resources */
.dict-cta{display:flex;align-items:center;gap:16px;background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 12%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 26%,var(--hairline));border-radius:16px;padding:18px 22px;text-decoration:none;color:var(--ink);transition:transform .12s,border-color .15s}
.dict-cta:hover{transform:translateY(-2px);border-color:var(--accent2)}
.dict-cta b{font-family:var(--serif);font-size:18px;display:block;margin-bottom:4px}
.dict-cta span span,.dict-cta>div>span{font-size:13.5px;color:var(--muted);line-height:1.5}
.dc-go{margin-left:auto;flex:none;color:var(--accent2);font-weight:650;font-size:13.5px;white-space:nowrap}
/* footer edition countdown — a proper chip, not a bare sentence */
.foot-edition{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted);
  text-decoration:none;margin-top:10px;padding:7px 13px;border:1px solid var(--hairline);border-radius:99px;
  background:color-mix(in srgb,var(--accent) 5%,transparent);max-width:100%;white-space:nowrap;
  transition:border-color .15s,background .15s}
.foot-edition b{color:var(--accent2);font-variant-numeric:tabular-nums;font-weight:700}
.foot-edition:hover{color:var(--ink);border-color:color-mix(in srgb,var(--accent2) 45%,var(--hairline));
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.fe-dot{flex:none;width:6px;height:6px;border-radius:6px;background:#4ade80;animation:livepulse 1.8s ease-in-out infinite}
.fe-label,.fe-in{color:var(--muted)}
.cd-slot{color:var(--ink);font-weight:650;overflow:hidden;text-overflow:ellipsis;max-width:180px}
.dossier-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.dossier-card{display:flex;flex-direction:column;gap:7px;background:var(--card);border:1px solid var(--hairline);
  border-radius:14px;padding:18px 20px;color:var(--ink);text-decoration:none;transition:transform .12s,border-color .15s}
.dossier-card:hover{transform:translateY(-2px);border-color:var(--accent2)}
.dossier-card b{font-family:var(--serif);font-size:18px}
.dossier-card>span{font-size:13px;color:var(--muted);line-height:1.55}
.dc-counts{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--accent2);font-weight:700;margin-top:2px}
.dossier-strip{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ds-chip{border:1px solid var(--hairline);border-radius:99px;padding:7px 15px;font-size:13px;font-weight:650;
  color:var(--ink);text-decoration:none;transition:border-color .15s,background .15s}
.ds-chip:hover{border-color:var(--accent2);background:color-mix(in srgb,var(--accent) 8%,transparent)}
.dict-search{width:100%;max-width:440px;background:var(--card);border:1px solid var(--hairline);border-radius:99px;
  padding:11px 18px;font:inherit;font-size:14px;color:var(--ink);outline:0;margin-bottom:16px}
.dict-search:focus{border-color:var(--accent2)}
.dict-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:12px;margin-bottom:34px}
.dict-item{background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:14px 17px}
.dict-item b{display:block;font-size:14.5px;margin-bottom:5px;color:var(--accent-ink,var(--ink))}
.dict-item span{font-size:13px;color:var(--muted);line-height:1.6}
.foot-cost{display:inline-block;margin-top:10px;font-size:12px;color:var(--muted)}
.foot-cost b{color:var(--accent2)}
.foot-cost a{color:var(--accent2)}

/* ===== V10: richer article body — drop cap · figures · charts · stat callouts · timestamp ===== */
.prose .lead-p::first-letter{initial-letter:2.4;font-family:var(--serif);font-weight:650;color:var(--accent2);
  margin-right:8px;-webkit-initial-letter:2.4}
@supports not (initial-letter:2){ .prose .lead-p::first-letter{float:left;font-size:3.1em;line-height:.82;font-family:var(--serif);font-weight:650;color:var(--accent2);margin:4px 8px 0 0} }
.prose .fig{font-weight:650;color:var(--accent-ink,var(--ink));font-variant-numeric:tabular-nums;
  background:linear-gradient(180deg,transparent 62%,color-mix(in srgb,var(--accent) 22%,transparent) 62%);padding:0 1px}
/* inline charts */
.chart{margin:26px 0;padding:18px 20px;border:1px solid var(--hairline);border-radius:14px;background:color-mix(in srgb,var(--ink) 2.5%,transparent)}
.chart-title{font-family:var(--sans);font-size:12.5px;font-weight:750;letter-spacing:.02em;text-transform:uppercase;color:var(--ink);margin:0 0 14px}
.chart-title span{color:var(--muted);font-weight:500;text-transform:none;letter-spacing:0}
.chart-src{font-size:11px;color:var(--muted);margin-top:12px}
.cbars{display:flex;flex-direction:column;gap:9px}
.cbar{display:flex;align-items:center;gap:12px}
.cb-l{flex:none;width:34%;max-width:150px;font-size:12.5px;color:var(--ink-soft);text-align:right;line-height:1.25}
.cb-track{flex:1;height:18px;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:6px;overflow:hidden}
.cb-track i{display:block;height:100%;border-radius:6px;transition:width .6s cubic-bezier(.3,1,.4,1)}
.cbar.is-hi .cb-l{color:var(--ink);font-weight:650}
.cb-v{flex:none;width:52px;text-align:left;font-weight:700;font-size:13px;font-variant-numeric:tabular-nums}
.chart-pie .pie-wrap{display:flex;gap:22px;align-items:center;flex-wrap:wrap}
.pie-legend{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-soft)}
.pie-legend li{display:flex;align-items:center;gap:9px}
.pie-legend b{color:var(--ink)}
.pl-sw{width:12px;height:12px;border-radius:3px;flex:none}
/* single big stat callout */
.statcallout{display:flex;align-items:baseline;gap:16px;margin:22px 0;padding:16px 22px;border-left:3px solid var(--accent);
  background:color-mix(in srgb,var(--accent) 7%,transparent);border-radius:0 12px 12px 0}
.statcallout b{font-family:var(--serif);font-size:clamp(30px,5vw,46px);line-height:1;color:var(--accent2);font-variant-numeric:tabular-nums;flex:none}
.statcallout span{font-size:14.5px;line-height:1.5;color:var(--ink-soft)}
/* bottom byline timestamp */
.eb-time{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;font-variant-numeric:tabular-nums}
/* translate-blocked toast */
#gt-toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:220;max-width:420px;
  background:var(--bg);border:1px solid var(--hairline);border-left:3px solid #e0b64e;border-radius:12px;
  padding:13px 18px;font-size:13px;line-height:1.5;color:var(--ink);box-shadow:0 20px 50px -18px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:opacity .3s,transform .3s}
#gt-toast.show{opacity:1;transform:translate(-50%,0)}

/* takeaway type variants — each frame gets its own accent so the site reads varied */
.apply-watch{--ap:#5aa8d8} .apply-matters{--ap:#c48af0} .apply-stakes{--ap:#7bb274}
.apply-bottomline{--ap:#e0b64e} .apply-context{--ap:#8b7cf7} .apply-work{--ap:var(--accent2)} .apply-numbers{--ap:#4dd0c4}
.apply[class*="apply-"]{border-left-color:var(--ap,var(--accent2))}
.apply[class*="apply-"] .apply-ic{color:var(--ap,var(--accent2))}
.apply[class*="apply-"] .apply-head{color:var(--ap,var(--accent2))}
#mp-title{font-size:12px;color:var(--accent2)}

/* ============ V8: scoreboard chart · predictions · resources layout · edition chip ============ */
.home-chips{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 18px}
.ed-chip{display:inline-flex;align-items:center;gap:10px;padding:9px 16px;border-radius:99px;text-decoration:none;
  border:1px solid color-mix(in srgb,#4ade80 34%,var(--hairline));background:color-mix(in srgb,#4ade80 8%,var(--card));color:var(--ink);font-size:12.5px}
.ed-chip .ec-k{font-size:9.5px;letter-spacing:.22em;font-weight:750;color:#4ade80}
.ed-chip .ec-slot{font-weight:650}
.ed-chip .ec-time{color:#4ade80;font-variant-numeric:tabular-nums;font-weight:700}
.brief-chip{margin:0}
.anode.t-std .an-dot{background:#e0b64e}

/* scoreboard: strength vs cost */
.sb-insights{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:6px 0 16px}
.sb-ins{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:14px 16px}
.si-k{font-size:11px;letter-spacing:.06em;color:var(--muted);display:block;margin-bottom:5px}
.sb-ins b{font-size:16px;font-family:var(--serif)}
.si-s{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.sb-aha{background:color-mix(in srgb,var(--accent) 9%,var(--card));border:1px solid color-mix(in srgb,var(--accent) 26%,var(--hairline));
  border-radius:12px;padding:13px 16px;font-size:14px;line-height:1.6;color:var(--ink-soft);margin:0 0 18px}
.sb-aha b{color:var(--accent2)}
.sb-sort{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:0 0 14px;font-size:12px;color:var(--muted)}
.sb-sort span{margin-right:4px}
.sb-sort button{border:1px solid var(--hairline);background:transparent;color:var(--muted);font:inherit;font-size:12.5px;
  padding:6px 13px;border-radius:99px;cursor:pointer;transition:all .15s}
.sb-sort button:hover{color:var(--ink);border-color:var(--muted)}
.sb-sort button.on{background:var(--accent);color:#fff;border-color:var(--accent)}
.sb-legend{display:flex;gap:20px;flex-wrap:wrap;align-items:center;font-size:12px;color:var(--muted);margin:2px 0 16px}
.sb-legend i{display:inline-block;width:22px;height:8px;border-radius:3px;vertical-align:middle;margin-right:5px}
.lg-str{background:var(--accent)} .lg-val{background:#e0b64e}
.sb-rank{flex:none;width:22px;height:22px;border-radius:6px;background:var(--surface2,color-mix(in srgb,var(--ink) 8%,transparent));
  color:var(--accent2);font-weight:750;font-size:12px;display:inline-grid;place-items:center;margin-right:2px}
.sb-price{margin-left:auto;font-weight:750;font-size:14.5px;color:var(--ink);white-space:nowrap}
.sb-price em{font-style:normal;font-size:11px;color:var(--muted);font-weight:400;margin-left:2px}
.sb-track i.str{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent))}
.sb-track i.val{background:linear-gradient(90deg,color-mix(in srgb,#e0b64e 55%,transparent),#e0b64e)}
.sb-in{color:var(--muted);font-size:11.5px}
.sb-basis{color:var(--muted);font-size:12px;line-height:1.6;margin-top:22px;padding:12px 14px;border-left:2px solid var(--hairline);background:color-mix(in srgb,var(--ink) 2.5%,transparent);border-radius:0 8px 8px 0}
@media(max-width:640px){ .sb-insights{grid-template-columns:1fr} }
.sb-chart{display:flex;flex-direction:column;gap:12px}
.sb-card{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:15px 18px}
.sb-top{display:flex;align-items:center;gap:10px;margin-bottom:11px;flex-wrap:wrap}
.sb-top b{font-size:15.5px}
.sb-lab{font-size:12px;color:var(--muted)}
.sb-top .sb-status{margin-left:auto}
.sb-bars{display:flex;flex-direction:column;gap:7px}
.sb-brow{display:flex;align-items:center;gap:10px}
.sb-k{flex:none;width:60px;font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:700}
.sb-track{flex:1;height:16px;background:color-mix(in srgb,var(--ink) 6%,transparent);border-radius:6px;overflow:hidden}
.sb-track i{display:block;height:100%;border-radius:6px;transition:width .5s cubic-bezier(.3,1,.4,1)}
.sb-track i.in{background:linear-gradient(90deg,color-mix(in srgb,var(--accent2) 60%,transparent),var(--accent2))}
.sb-track i.out{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 55%,transparent),var(--accent))}
.sb-v{flex:none;width:52px;text-align:right;font-variant-numeric:tabular-nums;font-weight:700;font-size:13px}
.sb-for{font-size:12.5px;color:var(--muted);line-height:1.55;margin-top:11px;padding-top:10px;border-top:1px solid var(--hairline)}
.sb-unpriced{display:flex;flex-direction:column;gap:8px}
.sb-up-row{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:11px 16px;background:var(--card);border:1px solid var(--hairline);border-radius:10px}
.sb-up-row>span{font-size:12.5px;color:var(--muted);text-align:right;max-width:60%}
.sb-status{font-size:10px;letter-spacing:.1em;text-transform:uppercase;font-weight:750;border-radius:99px;padding:3px 9px;white-space:nowrap}
.s-released{background:rgba(74,222,128,.14);color:#4ade80}
.s-delayed{background:rgba(224,182,78,.14);color:#e0b64e}
.s-preview{background:rgba(139,124,247,.16);color:var(--accent2)}

/* prediction ledger */
.pred-score{display:flex;gap:16px;flex-wrap:wrap;align-items:stretch;margin-top:8px}
.ps-acc{flex:1 1 200px;background:linear-gradient(130deg,color-mix(in srgb,var(--accent) 16%,var(--card)),var(--card));
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--hairline));border-radius:16px;padding:18px 22px;display:flex;flex-direction:column;justify-content:center}
.ps-acc b{font-size:40px;font-weight:750;line-height:1;color:var(--accent2)}
.ps-acc span{font-size:12px;color:var(--muted);margin-top:6px}
.ps-tiles{flex:2 1 320px;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.ps-tile{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:14px;text-align:center;display:flex;flex-direction:column;justify-content:center}
.ps-tile b{font-size:26px;font-weight:750;line-height:1}
.ps-tile span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ps-tile.g b{color:#4ade80} .ps-tile.a b{color:#e0b64e} .ps-tile.r b{color:#e0564d}
.pred-list{display:flex;flex-direction:column;gap:10px}
.pred-row{display:flex;gap:14px;background:var(--card);border:1px solid var(--hairline);border-radius:12px;padding:14px 16px;border-left-width:3px}
.pred-row.s-pending{border-left-color:var(--muted)}
.pred-row.s-right{border-left-color:#4ade80}
.pred-row.s-wrong{border-left-color:#e0564d}
.pred-row.s-partial{border-left-color:#e0b64e}
.pr-mark{flex:none;font-size:11px;font-weight:750;letter-spacing:.04em;width:74px;padding-top:2px}
.s-pending .pr-mark{color:var(--muted)} .s-right .pr-mark{color:#4ade80} .s-wrong .pr-mark{color:#e0564d} .s-partial .pr-mark{color:#e0b64e}
.pr-claim{font-size:14.5px;line-height:1.55;font-family:var(--serif)}
.pr-meta{font-size:12px;color:var(--muted);margin-top:6px}
.pr-meta a{color:var(--accent2)}
.pr-verdict{font-size:13px;color:var(--ink-soft);margin-top:8px;padding-top:8px;border-top:1px solid var(--hairline)}

/* resources two-column layout with sticky jump-nav */
.res-layout{display:flex;gap:34px;align-items:flex-start}
.res-nav{position:sticky;top:96px;flex:none;width:190px;display:flex;flex-direction:column;gap:2px}
.rn-title{font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:750;color:var(--muted);margin-bottom:8px}
.res-nav a{font-size:13px;color:var(--muted);text-decoration:none;padding:7px 10px;border-radius:8px;border-left:2px solid transparent;cursor:pointer;transition:color .15s,background .15s}
.res-nav a:hover{color:var(--ink);background:color-mix(in srgb,var(--accent) 7%,transparent);border-left-color:var(--accent2)}
.res-main{flex:1;min-width:0}
.res-main section{scroll-margin-top:150px;margin-bottom:34px}
@media(max-width:820px){
  .res-layout{flex-direction:column;gap:14px}
  .res-nav{position:static;width:auto;flex-direction:row;flex-wrap:wrap;gap:6px;padding-bottom:8px;border-bottom:1px solid var(--hairline);margin-bottom:8px}
  .rn-title{display:none}
  .res-nav a{border:1px solid var(--hairline);border-radius:99px;padding:6px 12px}
  .res-nav a:hover{border-left-color:var(--hairline)}
}

/* ============ LANGUAGE SWITCHER ============ */
.lang-wrap{position:relative;display:flex}
#lang-btn img{border-radius:2px;display:block}
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:60;width:440px;max-width:86vw;
  max-height:60vh;overflow-y:auto;background:var(--bg);border:1px solid var(--hairline);
  border-radius:14px;box-shadow:0 26px 60px -22px rgba(0,0,0,.5);padding:10px;
  display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:2px}
.lang-menu[hidden]{display:none}
.lang-menu button{display:flex;align-items:center;gap:8px;padding:8px 10px;border:0;background:none;
  color:var(--ink);font:inherit;font-size:12.5px;border-radius:8px;cursor:pointer;text-align:left}
.lang-menu button:hover{background:var(--hairline)}
.lang-menu button.on{background:var(--hairline);font-weight:700}
.lang-menu img{border-radius:2px;flex:none}
/* mute Google Translate chrome: no banner, no body offset, no tooltips */
body{top:0 !important}
.goog-te-banner-frame,#goog-gt-tt,.goog-te-balloon-frame,div#goog-gt-{display:none !important}
.goog-text-highlight{background:none !important;box-shadow:none !important}
font[style*="vertical-align"]{background:none !important;box-shadow:none !important}

/* ============ THE BUZZ ============ */
.nav-sep{width:1px;height:16px;background:var(--hairline);margin:0 2px;align-self:center}
/* Sections dropdown in the top bar */
.sec-wrap{position:relative;display:inline-flex}
/* Sizing/typography comes from the shared nav.top selectors above — this rule
   only resets button chrome so the trigger is pixel-identical to the links. */
.sec-btn{font:inherit;font-size:inherit;line-height:inherit;border:0;background:none;
  cursor:pointer;display:inline-flex;align-items:center;gap:0}
.sec-btn:hover{color:var(--ink)}
.sec-btn.active{color:var(--ink);background:var(--surface2)}
/* .sec-caret retired 2026-08-14 — the glyph is gone from the markup. The
   wrapper must not add width of its own either, or the gap comes back. */
.sec-wrap{display:inline-flex}
.sec-menu{position:absolute;top:calc(100% + 10px);left:0;z-index:60;min-width:210px;
  background:var(--bg);border:1px solid var(--hairline);border-radius:14px;
  box-shadow:0 26px 60px -22px rgba(0,0,0,.5);padding:8px;display:grid;gap:1px}
.sec-menu[hidden]{display:none}
.sec-menu a{display:flex;align-items:center;gap:10px;padding:8px 11px;border-radius:9px;
  font-size:13.5px;color:var(--ink-soft);text-decoration:none}
.sec-menu a:hover{background:var(--hairline);color:var(--ink)}
.sec-menu a.on{background:var(--hairline);font-weight:700;color:var(--ink)}
.sec-dot{width:8px;height:8px;border-radius:99px;flex:none}
.buzz-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:16px;margin:0 0 34px}
.buzz-card{background:var(--card);border:1px solid var(--hairline);border-radius:14px;padding:18px 20px;
  display:flex;flex-direction:column;gap:12px;transition:transform .18s,box-shadow .18s}
.buzz-card:hover{transform:translateY(-2px);box-shadow:0 14px 34px -18px rgba(0,0,0,.35)}
.bz-head{display:flex;align-items:center;gap:10px}
.bz-av{width:34px;height:34px;border-radius:10px;color:#fff;font-weight:800;font-size:15px;
  display:flex;align-items:center;justify-content:center;flex:none}
.bz-who{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.bz-who b{font-size:14px}
.bz-who span{font-size:11.5px;color:var(--muted)}
.bz-heat{margin-left:auto;width:52px;height:5px;border-radius:99px;background:var(--hairline);overflow:hidden;flex:none}
.bz-heat i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#e0b64e)}
.bz-text{font-size:14.5px;line-height:1.62;color:var(--ink-soft)}
.bz-why{font-size:12.5px;line-height:1.55;color:var(--muted);border-left:2px solid var(--accent2);padding-left:11px}
.bz-why b{font-size:9.5px;letter-spacing:.22em;color:var(--accent2);display:block;margin-bottom:2px}
.bz-foot{display:flex;gap:7px;align-items:center;margin-top:auto;flex-wrap:wrap}
.bz-tag{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  border:1px solid var(--hairline);border-radius:99px;padding:3px 9px}
.bz-foot a{margin-left:auto;font-size:12px;font-weight:650;color:var(--accent2)}
.bz-count{margin-left:8px;font-size:10px;letter-spacing:.06em;color:var(--muted);border:1px solid var(--hairline);border-radius:99px;padding:1px 8px;font-weight:600}
.buzz-more{display:block;width:100%;margin:6px 0 4px;padding:14px;border:1px dashed var(--hairline);
  border-radius:12px;background:transparent;color:var(--accent2);font:inherit;font-size:13.5px;font-weight:650;
  cursor:pointer;transition:border-color .15s,background .15s}
.buzz-more:hover{border-color:var(--accent2);background:color-mix(in srgb,var(--accent) 7%,transparent)}
#buzz-archive{margin-top:10px}

/* ---------- buzz: solitaire day stacks ----------
   Every day but the newest collapses to one clickable peek row -- the day, the
   count, and the loudest card's avatar+name -- with a layered box-shadow behind
   it standing in for the cards underneath, the way a solitaire pile only shows
   its top card. Clicking it swaps that one day's grid from display:none to
   display:grid; nothing else on the page re-renders. */
.bz-daystack{margin:0 0 12px}
.bzs-peek{width:100%;display:flex;align-items:center;gap:12px;text-align:left;
  background:var(--card);border:1px solid var(--hairline);border-radius:14px;
  padding:12px 18px;font:inherit;color:inherit;cursor:pointer;
  transition:border-color .15s,transform .15s;
  box-shadow:0 5px 0 -2px var(--surface2),0 5px 0 -1px var(--hairline),
             0 10px 0 -4px var(--surface2),0 10px 0 -3px var(--hairline)}
.bzs-peek:hover{border-color:var(--accent2);transform:translateY(-1px)}
.bzs-meta{display:flex;flex-direction:column;line-height:1.3;min-width:0;flex:1}
.bzs-meta b{font-size:14px}
.bzs-meta span{font-size:11.5px;color:var(--muted)}
.bzs-chev{flex:none;color:var(--muted);font-size:13px;transition:transform .25s}
.bz-daystack.open .bzs-chev{transform:rotate(180deg)}
.bz-daystack .bzs-peek{margin-bottom:10px}
.bz-daystack.open .bzs-peek{box-shadow:none}
.bzs-full{display:none}
.bz-daystack.open .bzs-full{display:grid;animation:bzs-in .3s ease}
@keyframes bzs-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){ .bz-daystack.open .bzs-full{animation:none} }

/* V5.2 — back cover composes full-height (teaser removed for flexibility) */
.mpage.mback{align-items:stretch}
.mb-in{display:flex;flex-direction:column;justify-content:space-evenly;height:100%;padding:9% 12%}
.mb-sub{margin:1.5% 0 0}
.mb-sub::after{content:"";display:block;width:38px;height:1px;margin:14px auto 0;
  background:linear-gradient(90deg,transparent,var(--accent2),transparent)}
.mb-in p{font-size:clamp(10.5px,1.55vh,15px);line-height:1.75}
.mb-url{margin-top:0;align-self:center}

/* ============ V11: magazine humanize + readability · side decor · translate polish ============ */
/* MAGAZINE — kill the robotic even-spacing; let content flow naturally top-down */
.mpage.light .mp-body,
.mpage.light .mlist,
.mpage.light .mtoc,
.mpage.light .mplayers,
.mpage.light .ip-tl{ justify-content:flex-start !important; gap:2.3% !important; }
.mpage.light .mgloss{ align-content:flex-start !important; }
.mpage.light .mp-body p{ margin-bottom:0; }
/* readability — page 13 timeline & body text were too light (was ink-soft) */
.mpage.light .tl-t{ color:#332e3a !important; }
.mpage.light .mp-body, .mpage.light .mp-body p, .mpage.light .mr-body{ color:#2b2632; }
.mpage.light .tl-row{ padding:2.7% 3.8% !important; }
.mpage.light .tl-d{ color:var(--accent) !important; font-weight:750; }

/* SIDE DECOR — subtle ornamental rails running down every page (wide screens only) */
@media(min-width:1200px){
  body::before, body::after{
    content:""; position:fixed; top:0; bottom:0; width:26px; z-index:1; pointer-events:none;
    background-repeat:repeat-y; background-position:center top; background-size:26px 118px;
    background-image:
      linear-gradient(180deg, color-mix(in srgb,var(--accent) 26%,transparent), color-mix(in srgb,var(--accent) 26%,transparent)),
      radial-gradient(circle at 50% 22px, color-mix(in srgb,var(--accent2) 55%,transparent) 0 2.2px, transparent 3px);
    background-size:1px 100%, 26px 118px;
    background-position:center top, center top;
    opacity:.5;
  }
  body::before{ left:6px; }
  body::after{ right:6px; }
}
@media(prefers-color-scheme:light){ body::before, body::after{ opacity:.35; } }

/* TRANSLATE — hide ALL Google chrome (banner/tooltip/highlight) so switching is seamless */
.goog-te-banner-frame, .goog-te-banner-frame.skiptranslate,
iframe.skiptranslate, .goog-te-balloon-frame, #goog-gt-tt, .goog-tooltip,
.goog-te-spinner-pos, #goog-gt- , .VIpgJd-ZVi9od-aZ2wEe-wOHMyf, .VIpgJd-yAWNEb-VIpgJd-fmcmS-sn54Q{ display:none !important; }
body{ top:0 !important; position:static !important; }
.goog-text-highlight{ background:none !important; box-shadow:none !important; }
/* pre-buffer: hide page content until translation settles, avoiding the English flash */
html.xlating #app{ opacity:0 !important; }
#app{ transition:opacity .18s ease; }

/* magazine PDF download */
.mdl{color:rgba(255,255,255,.7);font-size:12px;font-weight:650;display:inline-flex;gap:5px;align-items:center;margin-left:14px;text-decoration:none}
.mdl:hover{color:#fff}
.mag-cell{display:flex;flex-direction:column;gap:8px}
.mag-dl{text-align:center;font-size:12.5px;font-weight:650;color:var(--accent2);text-decoration:none;padding:7px;border:1px solid var(--hairline);border-radius:8px;transition:border-color .15s}
.mag-dl:hover{border-color:var(--accent2)}

/* ============ V12: image BANDS on structured magazine pages (real graphics, not medallions) ============ */
.mpage.hasband .mband{
  position:absolute; top:2.1%; left:2.1%; right:2.1%; height:16.5%;
  background-size:cover; background-position:center 42%;
  border-radius:3px 3px 14px 14px; z-index:0;
  box-shadow:inset 0 -24px 30px -16px rgba(245,241,232,.92);
}
.mpage.hasband .mfolio-top{ color:rgba(255,255,255,.92); text-shadow:0 1px 5px rgba(0,0,0,.6); z-index:2; }
.mpage.hasband > *:not(.mband):not(.mfolio-top):not(.mfolio-bot):not(.mtab){ position:relative; z-index:1; }
.mpage.hasband .mp-title{ padding-right:0 !important; margin-top:0 !important; }
.mpage.hasband .ip-kicker{ padding-top:0 !important; }
/* content clears the band; structured lists compact so the densest pages never clip */
.mpage.light.hasband{ padding-top:20% !important; }
.mpage.hasband .ip-tl,.mpage.hasband .mlist,.mpage.hasband .mgloss,.mpage.hasband .mtoc,.mpage.hasband .mplayers{ gap:1.1% !important; }
.mpage.hasband .tl-row{ padding:1.4% 3.2% !important; }
.mpage.hasband .ml-item{ padding:1.5% 3.4% !important; }
.mpage.hasband .mg-item{ padding:1.4% 3.2% !important; }
.mpage.hasband .mtoc-row{ padding:1.4% 3% !important; }
.mpage.hasband .mg-item b{ font-size:1.28cqh !important; }
.mpage.hasband .mg-item span{ font-size:1.05cqh !important; }
.mpage.hasband .tl-t{ font-size:1.32cqh !important; }
.mpage.hasband .ml-item span{ font-size:1.2cqh !important; }
.mpage.hasband .mp-intro{ font-size:1.28cqh !important; margin-bottom:1.4% !important; }
.mpage.hasband .ml-item b,.mpage.hasband .mg-item b{ line-height:1.2 !important; }
@media (min-width:1px){
  .mpage.light.hasband{ padding-top:17.5% !important; }
  .mpage.hasband .mband{ height:14.5%; }
}
.mdeco{ display:none !important; }

/* ============ V13 · VOICE READ-ALONG (karaoke follow-text) ============ */
/* When Listen is playing an article on its own page, the article gets .ra-live:
   every spoken block dims, the current one lights up + glides to center. */
.article.ra-live [data-ra]{
  opacity:.4; transition:opacity .4s ease, background .4s ease, box-shadow .4s ease;
}
.article.ra-live [data-ra].ra-on{
  opacity:1;
  background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 12%,transparent),color-mix(in srgb,var(--accent) 4%,transparent) 60%,transparent);
  box-shadow:inset 3px 0 0 0 var(--accent);
  border-radius:4px;
}
/* pad the lit block a touch so the tint reads as a highlight, not a stripe */
.article.ra-live .prose [data-ra].ra-on{ padding:6px 12px 6px 16px; margin-left:-16px; }
.article.ra-live h1[data-ra].ra-on,
.article.ra-live .dek[data-ra].ra-on{ padding:4px 12px 4px 14px; margin-left:-14px; }
.article.ra-live .ra-wrap[data-ra].ra-on{ box-shadow:none; background:none; opacity:1; }
.article.ra-live .ra-wrap[data-ra]{ opacity:.4; }
.article.ra-live .ra-wrap[data-ra].ra-on{ opacity:1; }
/* the dek and h1 share seg 0 — keep them visually grouped when lit */
@media(prefers-reduced-motion:reduce){
  .article.ra-live [data-ra]{ transition:opacity .2s ease; }
}

/* ============ V14 · LIVE TV · EVENTS · CONTACT · NEWSLETTER · TIME METER · COOKIE ============ */
.live-dot{ display:inline-block;width:8px;height:8px;border-radius:50%;background:#e0564d;box-shadow:0 0 0 0 rgba(224,86,77,.6);animation:livePulse 1.8s infinite; vertical-align:middle; }
@keyframes livePulse{ 0%{box-shadow:0 0 0 0 rgba(224,86,77,.55)} 70%{box-shadow:0 0 0 7px rgba(224,86,77,0)} 100%{box-shadow:0 0 0 0 rgba(224,86,77,0)} }
@media(prefers-reduced-motion:reduce){ .live-dot{ animation:none; } }
.live-chip .live-dot{ margin-right:2px; }

/* Live TV board */
.ltv-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:14px;margin-top:8px; }
.ltv-card{ display:flex;flex-direction:column;gap:8px;padding:16px 16px 13px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .18s,transform .18s; }
.ltv-card:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-2px); }
.ltv-top{ display:flex;align-items:center;justify-content:space-between;gap:8px; }
.ltv-name{ font-weight:700;font-size:16px; }
.ltv-tag{ font-size:10.5px;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);border-radius:20px;padding:2px 8px; }
.ltv-who{ font-size:13.5px;color:var(--ink);opacity:.85;flex:1; }
.ltv-foot{ display:flex;align-items:center;justify-content:space-between;margin-top:2px; }
.ltv-cad{ font-size:11.5px;color:var(--muted); }
.ltv-go{ font-size:12.5px;color:var(--accent2);font-weight:600; }

/* Events */
.ev-list{ display:flex;flex-direction:column;gap:12px; }
.ev-card{ display:flex;align-items:stretch;gap:16px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .18s,transform .18s; }
.ev-card:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-2px); }
.ev-when{ flex:0 0 116px;font-weight:700;font-size:13.5px;color:var(--accent2);display:flex;align-items:center; }
.ev-body{ flex:1;min-width:0; }
.ev-name{ font-weight:700;font-size:16px;margin-bottom:2px; }
.ev-meta{ font-size:12px;color:var(--muted);margin-bottom:5px; }
.ev-type{ color:var(--ink);opacity:.8;font-weight:600; }
.ev-blurb{ font-size:13px;color:var(--ink);opacity:.82; }
.ev-go{ flex:0 0 auto;align-self:center;font-size:12px;color:var(--accent2);font-weight:600;white-space:nowrap; }
.home-events{ margin-top:34px; }
.he-head{ display:flex;align-items:center;justify-content:space-between;gap:10px; }
.he-head .kicker{ margin:0; }
.he-all{ font-size:12.5px;color:var(--accent2);font-weight:600;text-decoration:none; }
@media(max-width:620px){ .ev-when{ flex-basis:92px;font-size:12px; } .ev-go{ display:none; } }

/* Newsletter */
.nl-card{ border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--card)),var(--card));padding:20px 20px 16px; }
.nl-card.compact{ display:flex;align-items:center;gap:20px;flex-wrap:wrap; }
.nl-copy b{ display:block;font-size:17px;font-weight:700;margin-bottom:3px; }
.nl-copy span{ font-size:13px;color:var(--muted); }
.nl-card.compact .nl-copy{ flex:1;min-width:220px; }
.nl-form{ display:flex;gap:8px;margin-top:12px;flex-wrap:wrap; }
.nl-card.compact .nl-form{ margin-top:0; }
.nl-form input{ flex:1;min-width:180px;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:14px; }
.nl-form .cta{ white-space:nowrap; }
.nl-msg{ font-size:12.5px;margin:9px 0 0;min-height:0; }
.nl-msg.ok{ color:var(--accent2); }
.nl-msg.err{ color:var(--gate); }
.home-nl{ margin-top:26px; }

/* ---------- homepage: browse by desk + archive overflow ---------- */
.desk-browse{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px;margin-bottom:30px}
.desk-cell{display:flex;flex-direction:column;gap:5px;padding:13px 15px;border:1px solid var(--line);
  border-radius:13px;background:var(--surface2);transition:border-color .15s,transform .15s}
.desk-cell:hover{border-color:var(--dk);transform:translateY(-2px)}
.dk-top{display:flex;align-items:center;gap:8px}
.dk-dot{width:8px;height:8px;border-radius:50%;flex:none}
.dk-top b{font-size:14.5px;color:var(--ink);font-weight:600}
.dk-top em{margin-left:auto;font-style:normal;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.dk-ed{font-size:12px;color:var(--muted);padding-left:16px}
.home-more{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:4px 0 30px;
  padding:15px 20px;border:1px solid var(--line);border-radius:14px;background:var(--surface2);
  font-size:14.5px;color:var(--ink);transition:border-color .15s}
.home-more:hover{border-color:var(--accent2)}
.home-more span{color:var(--accent2);font-weight:600;white-space:nowrap}
@media(max-width:560px){
  .desk-browse{grid-template-columns:repeat(auto-fill,minmax(142px,1fr))}
  .home-more{font-size:13.5px;padding:13px 16px}
}

/* Contact */
.contact-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px;margin-top:4px; }
.contact-card{ display:flex;flex-direction:column;gap:3px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--card);text-decoration:none;color:inherit;transition:border-color .18s,transform .18s; }
.contact-card:hover{ border-color:color-mix(in srgb,var(--accent) 55%,var(--line));transform:translateY(-2px); }
.cc-ic{ font-size:20px;color:var(--accent2); }
.contact-card b{ font-size:15px; }
.contact-card span:last-child{ font-size:12.5px;color:var(--muted); }
.contact-form{ margin-top:24px;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:20px; }
.contact-form h3{ margin:0 0 12px;font-size:17px; }
.contact-form label{ display:block;font-size:12px;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);margin:10px 0 5px; }
.contact-form input,.contact-form textarea{ width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:10px;background:var(--bg);color:var(--ink);font-size:14px;font-family:inherit; }
.contact-form .cta{ margin-top:14px; }

/* Time-on-site meter */
.tm-card{ margin-top:22px;border:1px solid var(--line);border-radius:16px;background:var(--card);padding:18px 20px; }
.tm-h{ font-size:14px;font-weight:700;margin-bottom:14px; }
.tm-h span{ font-weight:400;font-size:11.5px;color:var(--muted);margin-left:6px; }
.tm-stats{ display:grid;grid-template-columns:repeat(4,1fr);gap:12px; }
.tm-stat{ text-align:center;padding:12px 6px;border-radius:12px;background:color-mix(in srgb,var(--accent) 6%,transparent); }
.tm-stat b{ display:block;font-family:var(--serif,Georgia,serif);font-size:26px;line-height:1;color:var(--accent2); }
.tm-stat span{ display:block;font-size:11px;color:var(--muted);margin-top:5px; }
@media(max-width:560px){ .tm-stats{ grid-template-columns:repeat(2,1fr); } }

/* Cookie / storage notice */
#cookiebar{ position:fixed;left:0;right:0;bottom:0;z-index:1400;background:color-mix(in srgb,var(--card) 94%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:12px 16px; }
.cb-in{ max-width:1000px;margin:0 auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap; }
.cb-txt{ flex:1;min-width:240px;font-size:12.5px;color:var(--ink);opacity:.9;line-height:1.5; }
.cb-txt a{ color:var(--accent2); }
.cb-btns{ display:flex;gap:8px; }
.cb-min,.cb-ok{ font:inherit;font-size:12.5px;font-weight:600;padding:8px 15px;border-radius:9px;cursor:pointer;border:1px solid var(--line);background:transparent;color:var(--ink); }
/* white on --accent was 3.32:1 in dark mode; --on-accent is near-black in dark
   (5.91:1) and white in light, where --accent is already deep enough (5.03:1). */
.cb-ok{ background:var(--accent);border-color:var(--accent);color:var(--on-accent); }
.cb-min:hover{ border-color:var(--accent2); }

/* V14.1 · events header links (Live moved off the top of home) */
.he-links{ display:flex;align-items:center;gap:16px; }
.he-links .live-link{ display:inline-flex;align-items:center;gap:5px; }

/* ============ V17 · MAGAZINE FEATURE LOOK — full-bleed, dense, no frame ============ */
/* Kill the certificate border-frame + corner watermark on ALL light pages — magazines
   don't box every page. Content and images now run to the trim edge. */
.mpage.light::before{ display:none !important; }
.mpage.light::after{ opacity:.035 !important; }

/* Editor's letter as a real feature spread: full-bleed hero, title dropped on the art,
   dense two-column body, a rule-bordered pull-quote, signature at the foot. */
.mpage.light.mletter{ padding:0 !important; display:flex; flex-direction:column; }
.mletter .ml-hero{ flex:0 0 47%; background-size:cover; background-position:center 32%; position:relative; display:flex; align-items:flex-end; }
.mletter .ml-hero-cap{ width:100%; padding:0 7% 5.2%; }
.mletter .ml-kick{ display:block; font-size:1.3cqh; letter-spacing:.24em; text-transform:uppercase; color:#cdbdff; font-weight:700; margin-bottom:1.8%; }
.mletter .ml-title{ font-family:var(--serif,Georgia,serif); font-weight:600; line-height:.96; font-size:5.4cqh; color:#fff; margin:0 !important; letter-spacing:-.015em; text-shadow:0 2px 26px rgba(0,0,0,.6); }
.mletter .ml-main{ flex:1; display:flex; flex-direction:column; padding:5.4% 7% 4.6%; min-height:0; }
.mletter .ml-body{ flex:1; columns:2; column-gap:6.5%; min-height:0; }
.mletter .ml-body p{ font-size:1.52cqh; line-height:1.56; color:#2c2635; margin:0 0 2.3%; text-align:justify; hyphens:auto; }
.mletter .ml-body .ml-lead::first-letter{ font-family:var(--serif,Georgia,serif); float:left; font-size:3.6em; line-height:.72; padding:3px 9px 0 0; color:var(--accent); font-weight:650; }
.mletter .ml-pull{ font-family:var(--serif,Georgia,serif); font-style:italic; font-size:2.35cqh; line-height:1.24; color:#171220; text-align:center;
  padding:3.4% 5% 3.2%; margin:3.4% 0 0; border-top:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); }
.mletter .ml-sign{ margin-top:auto; padding-top:3.4%; display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
.mletter .ml-sig{ font-family:var(--serif,Georgia,serif); font-style:italic; font-size:1.55cqh; color:#171220; }
.mletter .ml-emblem{ font-size:1.05cqh; letter-spacing:.1em; text-transform:uppercase; color:#8a8494; }
.mletter .ml-emblem b{ color:var(--accent); }

/* ============ V16 · PORTRAIT rail text pages — kill the small-image void ============ */
/* In portrait the rail collapsed to a tiny 44% image + gaps. Make the image a big
   full-width band and let copy flow beneath it so these pages actually fill. */

/* ============ V17b · roll the feature look across text pages ============ */
/* Bleed top-art to the trim edge, two-column the copy, bolder titles. */
.l-top .lt-art,.l-band .bd-art{ margin:-9.5% -6.5% 4.5% !important; border-radius:0 !important; height:42cqh !important; box-shadow:none !important; }
.l-top .mp-body,.l-band .mp-body{ columns:2; column-gap:6%; }
.l-top .mp-body p,.l-band .mp-body p{ text-align:justify; hyphens:auto; }
.l-top .mp-title,.l-band .mp-title{ font-size:3.3cqh !important; letter-spacing:-.012em; }
.l-band .bd-quote{ margin-left:-6.5% !important; margin-right:-6.5% !important; }
/* Rail (haslayout) pages: bigger side image bled to the trim edge, denser copy. */
.haslayout .mr-fig{ margin:-9.5% -6.5% 0 0 !important; border-radius:0 !important; box-shadow:none !important; min-height:60% !important; }
.mp-grid.rev .mr-fig{ margin:-9.5% 0 0 -6.5% !important; }
.haslayout .mp-title{ font-size:3.1cqh !important; letter-spacing:-.01em; }
.haslayout .mp-body p{ text-align:justify; hyphens:auto; }

/* ============ V17c · MFEAT — the universal premium text page ============ */
.mpage.light.mfeat{ padding:0 !important; display:flex; flex-direction:column; }
.mfeat .ft-hero{ flex:0 0 44%; background-size:cover; background-position:center 34%; display:flex; align-items:flex-end; }
.mfeat .ft-hero-cap{ width:100%; padding:0 7% 4.4%; }
.mfeat .ft-kick{ display:block; font-size:1.25cqh; letter-spacing:.22em; text-transform:uppercase; color:#cdbdff; font-weight:700; margin-bottom:1.4%; }
.mfeat .ft-title{ font-family:var(--serif,Georgia,serif); font-weight:600; line-height:.98; font-size:4.4cqh; color:#fff; margin:0; letter-spacing:-.015em; text-shadow:0 2px 24px rgba(0,0,0,.6); }
.mfeat .ft-main{ flex:1; display:flex; flex-direction:column; padding:5% 7% 4.4%; min-height:0; }
.mfeat .ft-body{ flex:1; columns:2; column-gap:6.5%; min-height:0; }
.mfeat .ft-body p{ font-size:1.52cqh; line-height:1.55; color:#2c2635; margin:0 0 2.1%; text-align:justify; hyphens:auto; }
.mfeat .ft-body .ft-lead::first-letter{ font-family:var(--serif,Georgia,serif); float:left; font-size:3.5em; line-height:.72; padding:3px 8px 0 0; color:var(--accent); font-weight:650; }
.mfeat .ft-body .fig{ text-decoration-color:color-mix(in srgb,var(--accent) 55%,transparent); }
.mfeat .ft-pull{ font-family:var(--serif,Georgia,serif); font-style:italic; font-size:2.1cqh; line-height:1.24; text-align:center; color:#171220;
  padding:3% 5% 2.8%; margin:2.6% 0 0; border-top:2.5px solid var(--accent); border-bottom:2.5px solid var(--accent); }
.mfeat .ft-stats{ display:flex; gap:4%; margin-top:2.8%; border-top:1px solid rgba(106,88,232,.22); padding-top:2.8%; }
.mfeat .ft-st{ flex:1; }
.mfeat .ft-st b{ display:block; font-family:var(--serif,Georgia,serif); font-size:3cqh; color:var(--accent); line-height:1; }
.mfeat .ft-st span{ display:block; font-size:1.05cqh; color:#6a6472; margin-top:5%; line-height:1.3; }
.mfeat .ft-fact{ margin-top:2.8%; background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:12px; padding:3.4% 5%; color:#fff; }
.mfeat .ft-fact b{ font-family:var(--serif,Georgia,serif); font-size:3cqh; display:block; line-height:1; }
.mfeat .ft-fact span{ font-size:1.1cqh; display:block; margin-top:2.5%; opacity:.92; line-height:1.35; }

/* ============ V18 · DISTINCT TEXT-PAGE LAYOUTS (never same, never crop) ============ */
.mpage.light.tp{ padding:0 !important; }
.tp .tp-body p{ font-size:1.5cqh; line-height:1.58; color:#2c2635; margin:0 0 2.1%; }
.tp .tp-body .tp-lead::first-letter{ font-family:var(--serif,Georgia,serif); float:left; font-size:3.4em; line-height:.74; padding:2px 9px 0 0; color:var(--accent); font-weight:650; }
.tp .tp-kick{ display:block; font-size:1.2cqh; letter-spacing:.22em; text-transform:uppercase; color:var(--accent); font-weight:700; margin-bottom:1.5%; }
.tp .tp-title{ font-family:var(--serif,Georgia,serif); font-weight:600; line-height:1.0; letter-spacing:-.015em; margin:0; }
.tp .tp-cap{ font-size:1cqh; font-style:italic; color:rgba(255,255,255,.92); }
.tp .tp-pull{ font-family:var(--serif,Georgia,serif); font-style:italic; text-align:center; color:#171220; font-size:2cqh; line-height:1.24; padding:2.6% 4% 2.4%; margin:2.6% 0 0; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); }
.tp .tp-fact{ background:linear-gradient(135deg,var(--accent),var(--accent2)); border-radius:12px; padding:3% 4.5%; color:#fff; }
.tp .tp-fact b{ font-family:var(--serif,Georgia,serif); font-size:2.8cqh; display:block; line-height:1; }
.tp .tp-fact span{ font-size:1.02cqh; display:block; margin-top:2%; opacity:.92; line-height:1.34; }
.tp .tp-src{ font-size:.85cqh; line-height:1.5; color:rgba(23,18,32,.62); margin-top:2.4%; padding-top:1.6%; border-top:1px solid rgba(23,18,32,.14); }
.tp.tp-full .tp-src,.tp.tp-corner .tp-src{ color:rgba(255,255,255,.72); border-top-color:rgba(255,255,255,.22); }
.tp .tp-src a{ color:inherit; text-decoration:underline; text-underline-offset:2px; }
.tp .tp-src em{ opacity:.75; font-style:normal; }

/* POSTER (layout:top) — big image up top, title on the art, copy + fact below */
.tp-poster{ display:flex; flex-direction:column; }
.tp-poster .tp-hero{ flex:1 1 auto; min-height:42%; background-size:cover; background-position:center 34%; display:flex; align-items:flex-end; }
.tp-poster .tp-herocap{ width:100%; padding:0 7% 4.4%; }
.tp-poster .tp-onart{ color:#fff; font-size:4cqh; text-shadow:0 2px 22px rgba(0,0,0,.6); }
.tp-poster .tp-herocap .tp-kick{ color:#cdbdff; }
.tp-poster .tp-main{ flex:none; display:flex; flex-direction:column; padding:4.4% 7% 4.4%; }
.tp-poster .tp-fact{ margin-top:3.2%; }

/* SPLIT (layout:left) — floor-to-ceiling image column + text column */
.tp-split{ display:flex; }
.tp-split .tp-img{ flex:0 0 45%; background-size:cover; background-position:center; display:flex; align-items:flex-end; }
.tp-split .tp-img .tp-cap{ padding:7% 7% 6%; background:linear-gradient(0deg,rgba(8,5,16,.72),transparent); width:100%; }
.tp-split .tp-col{ flex:1; display:flex; flex-direction:column; padding:6.5% 7% 5.6%; min-width:0; }
.tp-split .tp-title{ font-size:3.1cqh; color:#171220; margin-bottom:4%; }
.tp-split .tp-body{ flex:none; }
.tp-split .tp-pull{ margin-top:4%; }
.tp-split .tp-fact{ margin-top:auto; }

/* DATA (layout:stats) — title-led, inset image, big number row across the foot */
.tp-data{ display:flex; flex-direction:column; padding:7.5% 7% 5% !important; }
.tp-data .tp-title-lg{ font-size:3.5cqh; color:#171220; margin-bottom:4%; }
.tp-data .tp-datamid{ flex:1; display:flex; gap:6%; min-height:0; }
.tp-data .tp-datamid .tp-body{ flex:1.35; }
.tp-data .tp-dimg{ flex:1; background-size:cover; background-position:center; border-radius:12px; align-self:stretch; min-height:0; }
.tp-data .tp-stats{ display:flex; gap:3.4%; margin-top:4.5%; flex:none; }
.tp-data .tp-st{ flex:1; background:color-mix(in srgb,var(--accent) 10%,transparent); border-radius:12px; padding:3.4% 4%; }
.tp-data .tp-st b{ display:block; font-family:var(--serif,Georgia,serif); font-size:3.4cqh; color:var(--accent); line-height:1; }
.tp-data .tp-st span{ display:block; font-size:1cqh; color:#4a4453; margin-top:6%; line-height:1.3; }

/* CLASSIC (default) — text-led with an inset image the copy wraps around */
.tp-classic{ display:flex; flex-direction:column; padding:7.5% 7% 5% !important; }
.tp-classic .tp-classkick{ margin-bottom:1%; }
.tp-classic .tp-title-lg{ font-size:3.7cqh; color:#171220; margin-bottom:3.4%; }
.tp-classic .tp-flow{ flex:1; }
.tp-classic .tp-inset{ float:right; width:45%; aspect-ratio:4/3.3; background-size:cover; background-position:center; border-radius:10px; margin:1% 0 4% 6%; display:block; position:relative; overflow:hidden; }
.tp-classic .tp-inset .tp-cap{ position:absolute; left:0; right:0; bottom:0; padding:10% 8% 7%; background:linear-gradient(0deg,rgba(8,5,16,.75),transparent); }
.tp-classic .tp-pull{ clear:both; }
.tp-classic .tp-fact{ margin-top:4%; }

/* ============ V19 · the rest of the bespoke text layouts ============ */
/* fullBleed — whole-page photo, title + copy over a dark scrim at the foot */
.mpage.tp.tp-full{ padding:0 !important; display:flex; flex-direction:column; justify-content:flex-end; }
.tp-full .tp-fullcap{ padding:0 8% 7%; }
.tp-full .tp-onart-lg{ color:#fff; font-size:4.6cqh; line-height:.98; text-shadow:0 2px 26px rgba(0,0,0,.7); margin-bottom:2.4%; }
.tp-full .tp-fullcap .tp-kick{ color:#d7c9ff; }
.tp-full .tp-lite p{ color:rgba(255,255,255,.94); font-size:1.5cqh; line-height:1.56; margin:0 0 2%; max-width:82%; }
.tp-full .tp-lite p .fig{ color:#fff; }

/* splitRight uses the base .tp-split (DOM order puts the image on the right) */
.tp-split.tp-rev .tp-title{ text-align:left; }

/* quoteLead — a huge pull-quote leads, image band in the middle, copy at the foot */
.mpage.tp.tp-ql{ padding:0 !important; display:flex; flex-direction:column; }
.tp-ql .tp-ql-q{ flex:none; padding:8% 8% 4.5%; position:relative; }
.tp-ql .tp-ql-q .tp-kick{ margin-bottom:2%; }
.tp-ql .tp-ql-mark{ font-family:var(--serif,Georgia,serif); font-size:8cqh; line-height:.6; color:var(--accent); display:block; height:4.4cqh; }
.tp-ql .tp-ql-t{ font-family:var(--serif,Georgia,serif); font-style:italic; font-weight:500; font-size:3.3cqh; line-height:1.16; color:#171220; display:block; }
.tp-ql .tp-ql-img{ flex:1 1 auto; min-height:24%; background-size:cover; background-position:center; }
.tp-ql .tp-ql-body{ flex:none; padding:4.6% 8% 5%; }
.tp-ql .tp-ql-title{ font-family:var(--serif,Georgia,serif); font-size:2.1cqh; font-weight:600; color:#171220; margin:0 0 2.4%; letter-spacing:-.01em; }
.tp-ql .tp-ql-body .tp-body p{ font-size:1.42cqh; line-height:1.52; }

/* cornerCard — whole-page photo, copy in a solid cream card in the lower corner */
.mpage.tp.tp-corner{ padding:0 !important; background-size:cover; background-position:center; display:flex; align-items:flex-end; }
.tp-corner .tp-card{ margin:0 0 6% 6%; max-width:60%; background:rgba(246,242,233,.97); border-radius:16px; padding:5% 5.4%; box-shadow:0 24px 60px -24px rgba(0,0,0,.7); }
.tp-corner .tp-cardtitle{ font-size:2.9cqh; color:#171220; margin-bottom:3%; line-height:1.02; }
.tp-corner .tp-card .tp-body p{ font-size:1.4cqh; line-height:1.55; color:#2c2635; }

/* bottomImage — copy up top, full-bleed image across the foot */
.mpage.tp.tp-bottom{ padding:0 !important; display:flex; flex-direction:column; }
.tp-bottom .tp-bt-text{ flex:none; padding:8% 7% 4%; }
.tp-bottom .tp-bt-text .tp-title-lg{ font-size:3.5cqh; color:#171220; margin-bottom:3.4%; }
.tp-bottom .tp-bt-img{ flex:1 1 auto; min-height:42%; background-size:cover; background-position:center; display:flex; align-items:flex-end; }
.tp-bottom .tp-bt-img .tp-cap{ padding:4% 7%; background:linear-gradient(0deg,rgba(8,5,16,.66),transparent); width:100%; }

/* ============ V19b · fit fixes (split columns were overflowing) ============ */
.tp-split .tp-img{ flex:0 0 40%; }
.tp-split .tp-col{ padding:5.2% 6% 4.6%; }
.tp-split .tp-title{ font-size:2.7cqh !important; margin-bottom:2.8%; }
.tp-split .tp-body p{ font-size:1.32cqh; line-height:1.46; margin:0 0 1.6%; }
.tp-split .tp-pull{ font-size:1.5cqh; padding:2.2% 0 0; margin-top:2.4%; border-bottom:none; border-top-width:2px; }
.tp-split .tp-fact{ display:none; }   /* pull carries the column; fact would overflow the narrow width */
.tp-poster .tp-hero{ min-height:38%; }
.tp-poster .tp-main{ padding:4% 7% 4%; }
.tp-poster .tp-fact{ margin-top:2.4%; padding:2.6% 4%; }
.tp-poster .tp-fact b{ font-size:2.5cqh; }

/* ============ V19c · flex-direction fixes (base .mpage.light forces column) ============ */
.mpage.tp.tp-split{ flex-direction:row; align-items:stretch; }
.mpage.tp.tp-corner{ flex-direction:column; justify-content:flex-end; align-items:flex-start; }

/* ============ V19d · split text column fills to the foot ============ */
.tp-split .tp-col{ display:flex; flex-direction:column; }
.tp-split .tp-body{ flex:none; }
.tp-split .tp-body p{ font-size:1.42cqh !important; line-height:1.6 !important; margin:0 0 1.9% !important; }
.tp-split .tp-pull{ margin-top:auto !important; }
.tp-split .tp-fact{ display:block !important; margin-top:3.2%; padding:2.6% 3.6%; }
.tp-split .tp-fact b{ font-size:2.1cqh; }
.tp-split .tp-fact span{ font-size:.95cqh; }

/* ============ V19e · data layout needs page padding (global tp padding:0 zeroed it) ============ */
.mpage.light.tp.tp-data{ padding:8% 7.5% 5.5% !important; }

/* ============ V20 · structured pages fill the sheet (rows distribute, no void) ============ */
.mpage.light.hasband{ display:flex; flex-direction:column; }
.mpage.hasband .ip-tl,
.mpage.hasband .mlist,
.mpage.hasband .mtoc,
.mpage.hasband .mplayers{ flex:1 1 auto; display:flex; flex-direction:column; justify-content:space-between; min-height:0; }
.mpage.hasband .mgloss{ flex:1 1 auto; align-content:space-between; }
/* faceoff table: taller rows so the 6-row table fills down to the verdict strip */
.mpage.hasband .mfaceoff{ margin-top:1.5%; }
.mpage.hasband .mfaceoff td{ padding-top:3.1% !important; padding-bottom:3.1% !important; }
.mpage.hasband .mfaceoff th{ padding-bottom:2% !important; }
/* keep the trailing callouts (verdict / outro / foot) pinned below the filled body */
.mpage.hasband .fo-verdict,.mpage.hasband .mpl-outro,.mpage.hasband .mtoc-foot,.mpage.hasband .mfo-note{ flex:none; }

/* ============ V20b · force the distribution (earlier flex-start was winning) ============ */
.mpage.hasband .ip-tl,
.mpage.hasband .mlist,
.mpage.hasband .mtoc,
.mpage.hasband .mplayers{ justify-content:space-between !important; }
.mpage.hasband .mgloss{ align-content:space-between !important; }

/* ============ V20c · players cards grow, face-off table fills to the verdict ============ */
.mpage.hasband .mplayers{ justify-content:flex-start !important; gap:3.4%; }
.mpage.hasband .mplayers .mplayer{ flex:1 1 0; min-height:0; display:flex; flex-direction:column; justify-content:center; }
.mpage.hasband .mfaceoff td{ padding-top:4.1% !important; padding-bottom:4.1% !important; }

/* ============ V20d · face-off rows a touch taller to close the verdict gap ============ */
.mpage.hasband .mfaceoff td{ padding-top:4.7% !important; padding-bottom:4.7% !important; }

/* ============ V21 · nothing crowds the folio (running foot) ============ */
.mletter .ml-main{ padding-bottom:7.5% !important; }
.tp-poster .tp-main{ padding-bottom:5.8% !important; }
.tp-split .tp-img .tp-cap{ padding-bottom:7% !important; }
.tp-bottom .tp-bt-img .tp-cap{ padding-bottom:7% !important; }
.tp-full .tp-fullcap{ padding-bottom:8% !important; }
.mfolio-bot{ text-shadow:0 1px 4px rgba(0,0,0,.35); }

/* ============ V21b · folio clearance in cqh (% padding is width-relative, too small) ============ */
.mletter .ml-main{ padding-bottom:6cqh !important; }
.tp-poster .tp-hero{ min-height:35% !important; }
.tp-poster .tp-main{ padding-bottom:5cqh !important; }
.tp-poster .tp-fact{ margin-top:2cqh !important; }
.tp-split .tp-img .tp-cap{ padding-bottom:5cqh !important; }
.tp-bottom .tp-bt-img .tp-cap{ padding-bottom:5cqh !important; }
.tp-full .tp-fullcap{ padding-bottom:5.5cqh !important; }

/* ============ V22 · face-off rows fill by page height (cqh), not width (%) ============ */
.mpage.hasband .mfaceoff td{ padding-top:4.2cqh !important; padding-bottom:4.2cqh !important; }
.mpage.hasband .mfaceoff th{ padding-bottom:2.4cqh !important; }

/* ============ V22b · face-off rows fill fully ============ */
.mpage.hasband .mfaceoff td{ padding-top:5.3cqh !important; padding-bottom:5.3cqh !important; }

/* ============ V23 · Editor's letter never crops (single-column, hero absorbs slack) ============ */
/* The 2-column body spilled into a clipped 3rd column near capacity. Single column has
   no column threshold to trip; the hero image flexes to absorb any leftover space. */
.mletter .ml-hero{ flex:1 1 auto !important; min-height:33% !important; }
.mletter .ml-main{ flex:none !important; padding-top:4.6% !important; }
.mletter .ml-body{ column-count:1 !important; column-gap:0 !important; }
.mletter .ml-body p{ font-size:1.52cqh !important; line-height:1.62 !important; margin:0 0 2.4% !important; }

/* ============ V24 · split & data text columns fill at any copy length ============ */
.tp-split .tp-col{ justify-content:space-between !important; }
.tp-split .tp-coltop{ flex:none; }
.tp-split .tp-pull{ margin:0 !important; }
.tp-split .tp-fact{ margin:0 !important; }
.tp-data .tp-datamid .tp-body{ display:flex; flex-direction:column; justify-content:space-between; }

/* ============ V24b · split columns fill with weight, not air ============ */
.tp-split .tp-body p{ font-size:1.55cqh !important; line-height:1.68 !important; margin:0 0 2.6% !important; }
.tp-split .tp-pull{ font-size:1.75cqh !important; padding-top:3.6% !important; padding-bottom:3.6% !important; }
.tp-split .tp-fact{ padding:3.6% 4.2% !important; }
.tp-split .tp-fact b{ font-size:2.4cqh; }
.tp-split .tp-title{ font-size:2.9cqh !important; margin-bottom:3.4%; }

/* ============ V25 · magazine page scrubber (fast navigation) ============ */
.mbar .mscrub{ -webkit-appearance:none; appearance:none; margin-left:auto; width:min(30vw,260px);
  height:4px; border-radius:4px; background:rgba(255,255,255,.20); cursor:pointer; outline:none; }
.mbar .mscrub::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:15px; height:15px;
  border-radius:50%; background:var(--accent); border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.55); cursor:grab; }
.mbar .mscrub:active::-webkit-slider-thumb{ cursor:grabbing; transform:scale(1.18); }
.mbar .mscrub::-moz-range-thumb{ width:15px; height:15px; border-radius:50%; background:var(--accent);
  border:2px solid #fff; box-shadow:0 1px 5px rgba(0,0,0,.55); cursor:grab; }
.mbar .mscrub::-moz-range-track{ height:4px; border-radius:4px; background:rgba(255,255,255,.20); }
.mbar .mscrub:focus-visible{ box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 40%,transparent); }
.mbar .mcount{ margin-left:14px; }
@media(max-width:680px){ .mbar .mscrub{ width:38vw; } .mreader .mtitle{ display:none; } }

/* ============ V26 · GATEFOLDS (two normal pages sharing one split image) ============ */
/* A fold renders as TWO normal 3:4 pages (same size as every other page). The image is split
   across them via background-size 200%: centerfold left|right, verticalfold top|bottom. The
   natural gap between pages reads as the gutter. Caption sits on the first page. */
.mpage.mfoldhalf{ padding:0 !important; display:flex; flex-direction:column; justify-content:flex-end;
  background-repeat:no-repeat; color:#fff; overflow:hidden; }
.mfoldhalf .mfold-cap{ padding:0 8% 7%; max-width:88%; }
.mfoldhalf .mfold-kick{ display:block; font-size:1.5cqh; letter-spacing:.24em; text-transform:uppercase; color:#d7c9ff; font-weight:700; margin-bottom:2.4%; }
.mfoldhalf .mfold-title{ font-family:var(--serif,Georgia,serif); font-weight:600; font-size:4.6cqh; line-height:1.02; margin:0; letter-spacing:-.01em; text-shadow:0 2px 28px rgba(0,0,0,.82); }
.mfoldhalf .mfold-sub{ font-size:1.5cqh; color:rgba(255,255,255,.88); margin-top:3%; font-style:italic; }

/* Page-turn: the settling page swings in from its spine like a real page. */
.mtrack{ perspective:2400px; }
@keyframes mturnin{ 0%{ transform:rotateY(-15deg) translateZ(-30px); opacity:.5; filter:brightness(.72); }
  100%{ transform:none; opacity:1; filter:none; } }
.mpage.mturn-in{ animation:mturnin .44s cubic-bezier(.22,.68,.2,1) both; transform-origin:left center; will-change:transform; }
@media(prefers-reduced-motion:reduce){ .mpage.mturn-in{ animation:none; } }

/* While the scrubber is dragged, the glide engine is driving scrollLeft (wheel/arrow), OR the
   reader is being drag-navigated, suspend mandatory snap so it can't fight the motion. */
.mtrack.scrubbing, .mtrack.gliding, .mtrack.dragging{ scroll-snap-type:none; }
/* Drag-to-navigate affordance (mouse/pen). */
.mtrack{ cursor:grab; }
.mtrack.dragging{ cursor:grabbing; user-select:none; }

/* ============ V27 · translation pre-paint guard (no English flash, ever) ============ */
/* The instant a non-English googtrans cookie exists, <html> gets .xlating (set pre-paint
   by an inline <head> script). Content stays hidden behind a spinner until Google Translate
   finishes its pass (JS removes .xlating on settle, or a safety timeout reveals anyway). */
html.xlating #app, html.xlating header.site{ visibility:hidden !important; }
html.xlating::before{ content:""; position:fixed; inset:0; background:var(--bg,#0b0710); z-index:99998; }
html.xlating::after{ content:""; position:fixed; z-index:99999; top:50%; left:50%; width:32px; height:32px;
  margin:-16px 0 0 -16px; border:3px solid rgba(139,124,247,.28); border-top-color:#8b7cf7;
  border-radius:50%; animation:xlspin .7s linear infinite; }
@keyframes xlspin{ to{ transform:rotate(360deg); } }

/* ============ V28 · reader nav buttons + full-screen (bottom-right) ============ */
.mnav-btns{ position:fixed; right:16px; bottom:16px; display:flex; gap:8px; z-index:30; }
.mnav-b{ width:42px; height:42px; border-radius:11px; border:1px solid rgba(255,255,255,.16);
  background:rgba(18,13,28,.72); color:#e8e2f5; font:600 22px/1 Inter,system-ui,sans-serif; cursor:pointer;
  display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
  transition:background .15s, transform .08s; }
.mnav-b:hover{ background:rgba(46,32,68,.92); }
.mnav-b:active{ transform:scale(.93); }

/* ============ V29 · fill glossary/list/resources; bigger words (founder: kill the white space) ============ */
/* The V11 "humanize" rule pinned these item-lists to flex-start, leaving big voids at the foot.
   Item-lists SHOULD distribute to fill the sheet (prose still flows top-down). And the words
   themselves — the point of the page — get larger. */
.mpage.light .mgloss{ align-content:space-between !important; row-gap:1.4% !important; }
.mpage.light .mlist{ justify-content:space-between !important; }
.mgloss .mg-item{ padding:2.4% 4.6%; }
.mgloss .mg-item b{ font-size:2.35cqh; line-height:1.06; letter-spacing:-.01em; }
.mgloss .mg-item span{ font-size:1.34cqh; line-height:1.38; margin-top:3px; }
.mlist .ml-item{ padding:2.5% 4.2%; }
.mlist .ml-item b{ font-size:2.05cqh; line-height:1.1; }
.mlist .ml-item div>span{ font-size:1.4cqh; line-height:1.48; margin-top:3px; }
.mlist .ml-n{ font-size:2.6cqh; }
.hasband .mp-title{ font-size:2.6cqh; }

/* ============ V30 · article action links ("Go there") ============ */
.golinks{ margin:26px 0 6px; padding:18px 20px; border:1px solid var(--line,#e6e1ee); border-radius:14px;
  background:linear-gradient(180deg,rgba(139,124,247,.06),transparent); }
.gl-head{ font:700 12px/1 Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--accent,#8b7cf7); display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.gl-ic{ font-size:15px; }
.golink{ display:flex; align-items:center; gap:10px; padding:12px 14px; margin-top:8px; border-radius:11px;
  background:rgba(139,124,247,.07); border:1px solid rgba(139,124,247,.16); text-decoration:none; color:inherit; transition:background .14s, transform .08s; }
.golink:hover{ background:rgba(139,124,247,.15); transform:translateX(2px); }
.gl-label{ font-weight:650; color:var(--ink,#1a1626); }
.gl-note{ color:var(--muted,#6b6478); font-size:13px; flex:1; }
.gl-arrow{ margin-left:auto; color:var(--accent,#8b7cf7); font-weight:700; }
[data-theme="dark"] .gl-label{ color:#ece8f6; }

/* ============ V31 · scoreboard last-updated line ============ */
.sb-updated{ display:flex; align-items:center; gap:9px; margin:14px 0 4px; padding:11px 15px; border-radius:11px;
  background:rgba(108,182,240,.08); border:1px solid rgba(108,182,240,.18); font-size:13.5px; color:var(--muted,#6b6478); }
.sb-updated b{ color:var(--ink,#1a1626); font-weight:650; }
[data-theme="dark"] .sb-updated b{ color:#e9edf5; }
.sbu-dot{ width:8px; height:8px; border-radius:50%; background:#4ad07a; box-shadow:0 0 0 4px rgba(74,208,122,.16); flex:none; }

/* ============ V32 · GUIDES as step-by-step (distinct from articles) ============ */
.gd-meta{ display:flex; gap:16px; flex-wrap:wrap; margin:20px 0 4px; font:600 13px Inter,sans-serif; color:var(--accent,#8b7cf7); }
.gd-meta span{ display:inline-flex; align-items:center; gap:6px; }
.gd-outcome{ margin:14px 0 4px; padding:14px 18px; border-radius:12px; background:linear-gradient(180deg,rgba(139,124,247,.1),transparent); border:1px solid rgba(139,124,247,.2); font-size:15.5px; line-height:1.55; }
.gd-outcome b{ color:var(--accent,#8b7cf7); display:block; font-size:12px; letter-spacing:.14em; text-transform:uppercase; margin-bottom:4px; }
.guidesteps{ margin:24px 0 8px; }
.gs-head{ font:700 13px Inter,sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--muted,#6b6478); margin:26px 0 14px; }
.gstep{ display:flex; gap:18px; padding:20px 0; border-top:1px solid var(--line,#e7e2ef); }
.gstep:first-of-type{ border-top:none; }
.gs-n{ flex:none; width:38px; height:38px; border-radius:11px; background:var(--accent,#8b7cf7); color:#fff;
  font:700 19px/38px Fraunces,Georgia,serif; text-align:center; box-shadow:0 4px 14px rgba(139,124,247,.35); }
.gs-body{ flex:1; min-width:0; }
.gs-do{ font-family:Fraunces,Georgia,serif; font-size:20px; font-weight:600; line-height:1.25; color:var(--ink,#1a1626); margin-bottom:6px; }
[data-theme="dark"] .gs-do{ color:#ece8f6; }
.gs-detail{ font-size:15.5px; line-height:1.62; color:var(--body,#39323f); }
[data-theme="dark"] .gs-detail{ color:#c7c0d4; }
.gs-ex{ margin-top:10px; padding:11px 14px 12px; border-radius:10px; background:rgba(20,18,28,.05); border-left:3px solid var(--accent2,#5ac8b0); font-size:14.5px; line-height:1.5; font-style:italic; color:var(--body,#39323f); }
[data-theme="dark"] .gs-ex{ background:rgba(255,255,255,.05); color:#cfc8db; }
.gs-ex-k, .gs-tip-k{ display:block; font-style:normal; font-weight:700; font-size:11px; letter-spacing:.12em; text-transform:uppercase; margin-bottom:3px; color:var(--accent2,#5ac8b0); }
.gs-tip{ margin-top:10px; padding:10px 14px; border-radius:10px; background:rgba(139,124,247,.08); font-size:14px; line-height:1.5; }
.gs-tip-k{ color:var(--accent,#8b7cf7); }

/* ============ V33 · hold-and-drag glide scroll grip ============ */
/* Glide grip lives on the LEFT edge (a "spine") — a native scrollbar never lives there,
   so the custom scroller can NEVER fight the window scrollbar or middle-click autoscroll. */
#sgrip{ position:fixed; top:0; left:5px; width:16px; height:100vh; z-index:70; pointer-events:none; }
#sgrip .sg-bar{ position:absolute; left:0; top:0; width:6px; border-radius:8px; pointer-events:auto; cursor:grab;
  background:linear-gradient(180deg,var(--accent,#8b7cf7),var(--accent2,#5ac8b0));
  opacity:.28; transition:opacity .25s, width .12s; box-shadow:0 2px 12px rgba(139,124,247,.45); touch-action:none; }
#sgrip .sg-bar:hover{ opacity:.85; width:9px; }
#sgrip.on .sg-bar{ opacity:.7; }
#sgrip.drag .sg-bar{ opacity:1; width:11px; cursor:grabbing; }
@media (max-width:640px){ #sgrip{ left:2px; } #sgrip .sg-bar{ width:5px; } }
@media (prefers-reduced-motion:reduce){ #sgrip .sg-bar{ transition:none; } }

/* ============ V34 · reader-map heatmap + bottom disclaimer spacing ============ */
/* ================= READER MAP · choropleth over real country geometry =========
   Sequential ramp, one hue, five steps, validated per mode with the dataviz
   ordinal checks (monotone lightness, adjacent dL >= 0.06, light end clears 2:1
   on surface, single hue). Land with NO readers is NOT a step on this ramp: it
   is the substrate, and stays recessive on purpose so the map still reads as a
   map when the counter is empty. */
:root{
  --rm-land:#262636; --rm-edge:#33334a;
  --rm1:#6f5bd6; --rm2:#8f78ee; --rm3:#ad9bff; --rm4:#cabaff; --rm5:#e8e0ff;
  --rm-sea:rgba(10,7,20,.30);
}
[data-theme="light"]{
  --rm-land:#e9e7f5; --rm-edge:#dcd9ec;
  --rm1:#a494f2; --rm2:#8674e9; --rm3:#6553d8; --rm4:#452fb2; --rm5:#2a1c7d;
  --rm-sea:rgba(120,110,170,.06);
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --rm-land:#e9e7f5; --rm-edge:#dcd9ec;
    --rm1:#a494f2; --rm2:#8674e9; --rm3:#6553d8; --rm4:#452fb2; --rm5:#2a1c7d;
    --rm-sea:rgba(120,110,170,.06);
  }
}

.readermap{ margin:14px 0 8px; padding:16px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); }
.rm-load{ padding:38px 12px; text-align:center; color:var(--muted); font-size:14px; }
.rm-figure{ position:relative; }
.rm-svg{ width:100%; height:auto; display:block; border-radius:10px; background:var(--rm-sea); }

path.rmc{ fill:var(--rm-land); stroke:var(--rm-edge); stroke-width:.4; vector-effect:non-scaling-stroke;
  transition:fill .16s ease; }
path.rmc.s1{ fill:var(--rm1); } path.rmc.s2{ fill:var(--rm2); } path.rmc.s3{ fill:var(--rm3); }
path.rmc.s4{ fill:var(--rm4); } path.rmc.s5{ fill:var(--rm5); }
path.rmc:hover,path.rmc:focus{ stroke:var(--ink); stroke-width:1.2; outline:none; }
/* The visitor's own country carries a ring, not a colour: colour is spoken for
   by magnitude, and re-using it here would make "you" look like "busiest". */
path.rmc.rm-you{ stroke:var(--accent2); stroke-width:1.6; }
path.rmc.rm-sel{ stroke:var(--ink); stroke-width:1.6; }

.rml-t{ font:600 11px/1 var(--sans); fill:var(--ink); paint-order:stroke fill;
  stroke:var(--surface); stroke-width:3px; stroke-linejoin:round; }
.rml-n{ font:700 11px/1 var(--sans); fill:var(--accent2); paint-order:stroke fill;
  stroke:var(--surface); stroke-width:3px; stroke-linejoin:round; }

.rm-info{ margin-top:10px; font-size:13px; color:var(--muted); min-height:20px; }
.rm-info b{ color:var(--ink); font-weight:600; }

.rm-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 14px; margin-top:12px;
  font-size:11.5px; color:var(--muted); }
.rml-k{ letter-spacing:.16em; text-transform:uppercase; font-weight:650; font-size:10px; }
.rm-lgi{ display:inline-flex; align-items:center; gap:6px; font-variant-numeric:tabular-nums; }
.rm-sw{ width:13px; height:13px; border-radius:3px; display:inline-block; border:1px solid var(--rm-edge); }
.rm-sw.s0{ background:var(--rm-land); } .rm-sw.s1{ background:var(--rm1); }
.rm-sw.s2{ background:var(--rm2); } .rm-sw.s3{ background:var(--rm3); }
.rm-sw.s4{ background:var(--rm4); } .rm-sw.s5{ background:var(--rm5); }

/* The two panels are the table view the accessibility pass requires: every value
   the choropleth encodes is also readable as a number here. */
.rm-panels{ display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:18px; }
.rm-panel{ min-width:0; }
.rm-pt{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  font-weight:700; margin-bottom:9px; }
.rm-top,.rm-conts{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.rm-top li,.rm-conts li{ display:flex; align-items:center; gap:9px; font-size:13.5px; }
.rm-cc,.rmc-n{ min-width:104px; color:var(--ink); font-weight:600; flex:none;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rm-cc em{ font-style:normal; margin-left:6px; font-size:9.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--accent2); border:1px solid var(--accent2);
  border-radius:3px; padding:1px 4px; vertical-align:1px; }
.rm-bar,.rmc-bar{ flex:1; height:6px; border-radius:4px; background:color-mix(in srgb,var(--accent) 14%,transparent);
  overflow:hidden; min-width:30px; }
.rm-bar i,.rmc-bar i{ display:block; height:100%; background:var(--accent); border-radius:4px; }
.rm-top b,.rm-conts b{ color:var(--ink); min-width:34px; text-align:right;
  font-variant-numeric:tabular-nums; font-size:12.5px; }
.rm-pct{ color:var(--faint); font-size:11.5px; min-width:34px; text-align:right;
  font-variant-numeric:tabular-nums; }
.rm-none{ color:var(--faint); font-size:13px; }
.rm-cap{ margin-top:16px; padding-top:13px; border-top:1px solid var(--hairline);
  font-size:12.5px; line-height:1.62; color:var(--muted); }
.rm-cap b{ color:var(--ink); } .rm-cap code{ font:11.5px var(--mono); color:var(--accent2); }

@media(max-width:700px){
  .readermap{ padding:12px; }
  .rm-panels{ grid-template-columns:1fr; gap:16px; }
  .rm-cc,.rmc-n{ min-width:88px; }
  .rml-t,.rml-n{ font-size:14px; }   /* the viewBox shrinks on a phone; the labels must not */
}

/* ================= THE GRID · world map of AI datacenters =====================
   Shares .rm-figure/.rm-legend/.rm-cap chrome with the Reader Map above (same
   container language, same lazily-loaded geometry) but plots fixed operator pins
   instead of a visit choropleth, so the land is a single static tone rather than
   a 5-step ramp -- there is no "more" or "less" reading for a country here, only
   which cities have a pin. */
.gridmap{ margin:14px 0 8px; padding:16px; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); }
.gd-svg{ width:100%; height:auto; display:block; border-radius:10px; background:var(--rm-sea); }
path.gdc{ fill:var(--rm-land); stroke:var(--rm-edge); stroke-width:.4; vector-effect:non-scaling-stroke; }
.gd-pin{ stroke:var(--surface); stroke-width:1.4; vector-effect:non-scaling-stroke; cursor:pointer;
  transition:r .12s ease; }
.gd-pin:hover,.gd-pin:focus{ outline:none; stroke:var(--ink); }
.gd-pin.gd-sel{ stroke:var(--ink); stroke-width:2; }
.gd-legend{ margin-top:12px; }
.gd-sw{ width:11px; height:11px; border-radius:50%; display:inline-block; border:1px solid var(--rm-edge); }

.gd-empty{ margin-top:16px; padding:20px 16px; text-align:center; color:var(--muted); font-size:13.5px;
  border:1px dashed var(--hairline); border-radius:12px; }
.gd-card{ margin-top:16px; padding:16px 17px; border:1px solid var(--hairline); border-radius:14px;
  background:var(--card); }
.gd-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:9px; }
.gd-dot{ width:9px; height:9px; border-radius:50%; flex:none; }
.gd-st{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); }
.gd-conf{ margin-left:auto; font-size:9.5px; font-weight:800; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); border:1px solid var(--hairline); border-radius:99px; padding:2px 8px; cursor:help; }
.gd-card h3{ font-family:var(--serif); font-size:19px; font-weight:650; margin:0 0 4px; color:var(--ink); }
.gd-place{ font-size:13px; color:var(--muted); margin-bottom:8px; }
.gd-op{ font-size:13.5px; margin-bottom:2px; }
.gd-op a{ color:var(--accent2); font-weight:650; }
.gd-tenant{ font-size:12.5px; color:var(--muted); margin-bottom:8px; }
.gd-tenant a{ color:var(--accent2); }
.gd-scale{ font-size:13px; line-height:1.55; color:var(--ink-soft); margin:8px 0; }
.gd-blurb{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:8px 0; }
.gd-card .lab-follow{ margin-top:4px; }
.gd-added{ margin-top:10px; padding-top:10px; border-top:1px solid var(--hairline);
  font-size:11.5px; color:var(--faint); }

.gd-panels{ margin-top:20px; display:grid; grid-template-columns:repeat(2,1fr); gap:6px 24px; }
.gd-region{ min-width:0; }
.gd-region-h{ display:flex; align-items:baseline; gap:8px; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; font-weight:700; color:var(--ink-soft); padding:10px 4px 6px; }
.gd-region-h span{ color:var(--faint); font-weight:600; }
.gd-row{ display:flex; align-items:center; gap:9px; padding:8px 4px; border-radius:8px; cursor:pointer;
  font-size:13px; transition:background .12s; }
.gd-row:hover,.gd-row:focus{ background:color-mix(in srgb,var(--accent) 7%,transparent); outline:none; }
.gd-row.gd-sel{ background:color-mix(in srgb,var(--accent) 13%,transparent); }
.gd-row-dot{ width:7px; height:7px; border-radius:50%; flex:none; }
.gd-row-name{ color:var(--ink); font-weight:600; flex:none; max-width:56%; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }
.gd-row-name em{ font-style:normal; margin-left:6px; font-size:9px; font-weight:800; letter-spacing:.1em;
  text-transform:uppercase; color:#1a1408; background:var(--gold); border-radius:99px; padding:1px 6px; }
.gd-row-place{ color:var(--faint); font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gd-row.gd-new .gd-row-name{ color:var(--ink); }

.gd-newbar{ margin:14px 0; padding:12px 16px; border-radius:12px; font-size:13.5px;
  background:color-mix(in srgb,var(--gold) 12%,transparent); border:1px solid color-mix(in srgb,var(--gold) 40%,transparent); }
.gd-newbar b{ color:var(--ink); }
.gd-method{ margin-top:18px; }

@media(max-width:700px){
  .gridmap{ padding:12px; }
  .gd-panels{ grid-template-columns:1fr; }
  .gd-row-name{ max-width:46%; }
}

/* ---- promo card on Resources (#res-grid) ---- */
.grid-promo{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap;
  padding:22px 26px; border-radius:18px; text-decoration:none; color:inherit;
  border:1px solid color-mix(in srgb,var(--accent) 30%,var(--line));
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,var(--card)),var(--card) 65%);
  transition:transform .18s ease,box-shadow .18s ease; margin-bottom:6px; }
.grid-promo:hover{ transform:translateY(-2px); box-shadow:var(--shadow); }
.gp-copy{ flex:1; min-width:260px; }
.gp-kicker{ display:block; font-size:10.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent2); margin-bottom:8px; }
.gp-kicker b{ color:#1a1408; background:var(--gold); border-radius:99px; padding:1px 8px; letter-spacing:.04em; }
.grid-promo h2{ font-family:var(--serif); font-size:24px; font-weight:660; line-height:1.2; margin:0 0 8px;
  color:var(--ink); }
.grid-promo p{ font-size:13.5px; line-height:1.6; color:var(--muted); margin:0 0 12px; max-width:56ch; }
.gp-go{ font-size:13px; font-weight:700; color:var(--accent2); }
.gp-stats{ display:flex; gap:22px; flex:none; }
.gp-stats div{ text-align:center; }
.gp-stats b{ display:block; font-family:var(--serif); font-size:28px; font-weight:650; color:var(--ink); }
.gp-stats span{ font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
@media(max-width:640px){
  .grid-promo{ padding:18px; }
  .gp-stats{ width:100%; justify-content:flex-start; gap:28px; }
}

/* ---- nav "what's new" badge (Resources link, when The Grid has unseen sites) ---- */
.nav-badge{ display:inline-block; min-width:16px; height:16px; padding:0 4px; margin-left:6px;
  border-radius:99px; background:var(--gold); color:#1a1408; font-size:10px; font-weight:800;
  line-height:16px; text-align:center; vertical-align:1px; }

/* ================= THE FRONTIER · price against strength ======================
   Two series (on the frontier / dominated), all-pairs validated in both modes.
   Light mode WARNs on the gold's contrast against white, which obligates a
   relief channel: every frontier point is direct-labelled, and the readout line
   below states the numbers, so identity never rests on the fill alone. */
.fr-wrap{ margin:22px 0 8px; padding:16px 16px 12px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface); }
.fr-head b{ display:block; font-family:var(--serif); font-size:17px; font-weight:640; color:var(--ink); }
.fr-head span{ display:block; margin-top:4px; font-size:13px; line-height:1.55; color:var(--muted); }
.fr-legend{ display:flex; flex-wrap:wrap; align-items:center; gap:7px 16px; margin:12px 0 6px;
  font-size:11.5px; color:var(--muted); }
.fr-legend span{ display:inline-flex; align-items:center; gap:6px; }
.fr-sw{ width:11px; height:11px; border-radius:50%; display:inline-block; }
.fr-sw.front{ background:var(--s6); box-shadow:0 0 0 2px var(--surface); }
.fr-sw.dom{ background:var(--s1); opacity:.75; }
.fr-axl{ margin-left:auto; font-style:italic; opacity:.85; }

.fr-plot{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; }
.fr-plot::-webkit-scrollbar{ height:6px; }
.fr-plot::-webkit-scrollbar-thumb{ background:var(--line); border-radius:6px; }
.fr-svg{ width:100%; height:auto; display:block; }
.fr-g{ stroke:var(--hairline); stroke-width:1; }
.fr-ax{ font:11px var(--sans); fill:var(--faint); font-variant-numeric:tabular-nums; }
.fr-axt{ font:10px var(--sans); fill:var(--faint); letter-spacing:.1em; text-transform:uppercase; }
/* Steps, not a smoothed curve: between two listed models nothing exists, and a
   diagonal would draw a product that does not ship. */
.fr-stair{ fill:none; stroke:var(--s6); stroke-width:2; stroke-opacity:.55;
  stroke-linejoin:round; stroke-linecap:round; }
.fr-pt{ cursor:pointer; outline:none; }
.fr-hit{ fill:transparent; }            /* ~30px target, so a dot is not a pinpoint */
.fr-dot{ fill:var(--s1); opacity:.8; stroke:var(--surface); stroke-width:2; transition:opacity .15s; }
.fr-pt.is-front .fr-dot{ fill:var(--s6); opacity:1; }
.fr-pt:hover .fr-dot,.fr-pt:focus .fr-dot{ opacity:1; stroke:var(--ink); }
.fr-lab{ font:600 11px/1 var(--sans); fill:var(--ink); paint-order:stroke fill;
  stroke:var(--surface); stroke-width:3.5px; stroke-linejoin:round; pointer-events:none; }
.fr-read{ margin-top:8px; font-size:13px; color:var(--muted); min-height:20px; }
.fr-read b{ color:var(--ink); font-weight:600; }
.fr-read em{ font-style:normal; color:var(--s6); font-weight:600; }
.fr-cap{ margin:12px 0 0; padding-top:12px; border-top:1px solid var(--hairline);
  font-size:12.5px; line-height:1.62; color:var(--muted); }
.fr-cap b{ color:var(--ink); } .fr-cap em{ font-style:italic; }

@media(max-width:760px){
  .fr-wrap{ padding:13px 13px 10px; }
  .fr-axl{ margin-left:0; flex-basis:100%; }
  /* Below this the viewBox would shrink axis labels to about 5px. Scroll the
     plot instead of shrinking it -- contained inside the card, so the page
     itself never scrolls sideways. */
  .fr-svg{ min-width:600px; }
}
@media(prefers-reduced-motion:reduce){
  path.rmc,.fr-dot{ transition:none; }
}

/* disclaimer relocated to article foot — give it breathing room */
.article .disclaimer{ margin:30px 0 6px; }

/* ============ V31 · RUNOVER — one article flowing across sheets ============ */
/* Continuation pages (founder, 2026-07-14): a feature opens with a headline page,
   then CONTINUES across dense two-column sheets — a "continued" rule instead of a
   fresh title, justified columns, an optional crosshead, pull-quote and spot image.
   runoverAlt flips the spot image above the columns so neighbours never look alike. */
.mpage.light.tp.tp-runover{ padding:0 0 6.5% 0 !important; display:flex; flex-direction:column; }
.tp-runover .tp-ro-head{ flex:none; display:flex; align-items:center; gap:14px; margin:8.6% 7% 0; }
.tp-runover .tp-ro-rule{ flex:1; height:2px; background:linear-gradient(90deg,var(--accent),var(--accent2)); opacity:.5; border-radius:2px; }
.tp-runover .tp-ro-cont{ flex:none; font-size:1.12cqh; letter-spacing:.26em; text-transform:uppercase; color:var(--accent); font-weight:700; }
.tp-runover .tp-ro-x{ flex:none; font-family:var(--serif,Georgia,serif); font-weight:600; font-size:2.3cqh; line-height:1.08; color:#171220; letter-spacing:-.01em; margin:2.2% 7% 0; }
.tp-runover .tp-ro-cols{ flex:0 1 auto; min-height:0; margin:2.4% 7% 0; columns:2; column-gap:6%; column-fill:balance; overflow:hidden; }
.tp-runover .tp-ro-cols:last-child{ flex:1 1 auto; column-fill:auto; }  /* no spot image → columns take the page */
.tp-runover .tp-ro-cols p{ font-size:1.34cqh; line-height:1.6; color:#332e3a; margin:0 0 .95em; text-align:justify; hyphens:auto; -webkit-hyphens:auto; }
.tp-runover .tp-ro-pull{ font-family:var(--serif,Georgia,serif); font-style:italic; text-align:center; font-size:1.72cqh; line-height:1.3; color:#171220; border-top:2px solid var(--accent); border-bottom:2px solid var(--accent); padding:6% 3%; margin:2% 0 6%; break-inside:avoid; }
.tp-runover .tp-ro-img{ flex:1 1 auto; min-height:19%; margin:2.6% 7% 0; border-radius:10px; background-size:cover; background-position:center; position:relative; overflow:hidden; display:flex; align-items:flex-end; }  /* slack absorber — the art eats whatever the columns don't use */
.tp-runover .tp-ro-img .tp-cap{ width:100%; padding:5% 5% 3.2%; background:linear-gradient(0deg,rgba(8,5,16,.74),transparent); }
.tp-runover .tp-fact{ flex:none; margin:3% 7% 0; }
/* alt variant — the spot image rides ABOVE the columns */
.tp-runover.tp-ro-alt .tp-ro-head{ order:1; }
.tp-runover.tp-ro-alt .tp-ro-x{ order:2; }
.tp-runover.tp-ro-alt .tp-ro-img{ order:3; }
.tp-runover.tp-ro-alt .tp-ro-cols{ order:4; }
.tp-runover.tp-ro-alt .tp-fact{ order:5; }

/* ============ V32 · FOLIO CLEARANCE + END MARKS (layout-scan pass, 2026-07-14) ============ */
/* The scan found content kissing the running head/foot on split, data, and
   bottomImage pages. Content must clear the folios on every layout. */
.tp-split .tp-col{ padding:8.5% 6% 7.2% !important; }
.tp-split .tp-img .tp-cap{ padding:7% 7% 8.5% !important; }
.mpage.light.tp.tp-data{ padding:8% 7.5% 7.2% !important; }
.tp-bottom .tp-bt-img .tp-cap{ padding:4% 7% 7.5% !important; }
/* magazine end mark — closes every feature's final page */
.tp-ro-end{ display:inline-block; margin-left:7px; color:var(--accent); font-size:1.25cqh; vertical-align:baseline; }
/* V32b — caption clearance must be height-based: the folio sits ~4.5cqh from the
   page foot, while % padding tracks WIDTH. cqh keeps captions above it at any size. */
.tp-split .tp-img .tp-cap{ padding-bottom:5.6cqh !important; }
.tp-bottom .tp-bt-img .tp-cap{ padding-bottom:5.6cqh !important; }

/* ================= WALLPAPER MAKER (#/wallpapers) ================= */
.wp-wrap{display:grid;grid-template-columns:minmax(240px,340px) 1fr;gap:28px;align-items:start;margin-top:18px}
.wp-stage{position:sticky;top:76px;display:flex;flex-direction:column;align-items:center;gap:12px}
#wp-canvas{width:100%;max-width:300px;height:auto;border-radius:22px;border:1px solid var(--line);box-shadow:var(--shadow);background:var(--surface2)}
.wp-dl{width:100%;max-width:300px;text-align:center}
.wp-hint{font-size:12.5px;color:var(--muted);line-height:1.55;max-width:300px;text-align:center;margin:0}
.wp-controls{min-width:0}
.wp-cgroup{margin-bottom:22px}
.wp-clabel{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.wp-chips{display:flex;flex-wrap:wrap;gap:8px}
.wp-chip{background:var(--surface2);border:1px solid var(--line);border-radius:10px;padding:8px 13px;font-size:13px;color:var(--ink);cursor:pointer;font-family:var(--sans);transition:border-color .15s}
.wp-chip em{display:block;font-style:normal;font-size:11px;color:var(--muted);margin-top:2px}
.wp-chip:hover{border-color:var(--accent2)}
.wp-chip.on{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 14%,var(--surface2));color:var(--ink)}
.wp-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px;padding:2px}
.wp-thumb{aspect-ratio:9/16;border-radius:12px;border:2px solid var(--line);background-size:cover;background-position:center;cursor:pointer;padding:0;transition:border-color .15s,transform .15s}
.wp-thumb:hover{transform:translateY(-2px);border-color:var(--accent2)}
.wp-thumb.on{border-color:var(--accent);box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 45%,transparent)}
/* Groups (wallpaper-archive categories + "article/magazine covers") scroll together
   as one continuous panel rather than each fighting for its own inner scrollbar. */
.wp-cgroup:has(.wp-gsub){max-height:600px;overflow-y:auto;padding-right:6px}
.wp-gsub{font-size:11px;font-weight:600;color:var(--accent2);margin:14px 0 8px;text-transform:uppercase;letter-spacing:.06em}
.wp-gsub:first-child{margin-top:0}
@media(max-width:760px){
  .wp-wrap{grid-template-columns:1fr}
  .wp-stage{position:static}
  .wp-cgroup:has(.wp-gsub){max-height:420px}
}

/* ================= EDITOR DOSSIER (Easter egg · #/editor/<key>) ================= */
/* the ⓘ Dossier link on each persona page */
.dsr-open{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px 5px 9px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--line));border-radius:999px;
  background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--accent2);
  font-size:12.5px;font-weight:650;text-decoration:none;transition:border-color .15s,transform .12s,background .15s}
.dsr-open span{letter-spacing:.03em;text-transform:uppercase;font-size:11px}
.dsr-open:hover{border-color:var(--accent);transform:translateY(-1px);
  background:color-mix(in srgb,var(--accent) 15%,transparent)}
/* hero */
.dsr-hero{display:flex;gap:22px;align-items:center;margin:22px 0 6px}
.dsr-av{flex:none;display:inline-flex}
.dsr-hero .dsr-av .av{width:110px;height:110px;font-size:40px;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--dcol) 55%,transparent),0 12px 30px rgba(0,0,0,.35)}
.dsr-eyebrow{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--dcol);margin-bottom:4px}
.dsr-id h1{margin:0;font-size:clamp(28px,5vw,40px);line-height:1.05}
.dsr-beat-top{color:var(--muted);font-size:15px;margin-top:6px}
.dsr-epigraph{margin:18px 0 22px;padding:0 0 0 18px;border-left:3px solid var(--dcol,var(--accent));
  font-family:var(--serif);font-style:italic;font-size:clamp(19px,3.4vw,24px);line-height:1.35;color:var(--ink)}
/* stats */
.dsr-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:6px 0 10px}
.dsr-stat{border:1px solid var(--line);border-radius:14px;padding:15px 14px;background:var(--surface2);
  border-top:2px solid color-mix(in srgb,var(--dcol) 60%,var(--line))}
.dsr-stat b{display:block;font-family:var(--serif);font-size:26px;line-height:1;color:var(--ink)}
.dsr-stat span{display:block;margin-top:6px;font-size:11.5px;color:var(--muted);letter-spacing:.03em}
.dsr-mix{color:var(--muted);font-size:13px;margin:2px 0 26px}
/* biography — the six beats */
.dsr-bio{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--card)}
.dsr-beat{display:grid;grid-template-columns:132px 1fr;gap:16px;padding:16px 20px;
  border-bottom:1px solid var(--line)}
.dsr-beat:last-child{border-bottom:none}
.dsr-beat-l{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dcol,var(--accent2));padding-top:2px}
.dsr-beat p{margin:0;line-height:1.62;color:var(--ink-soft,var(--ink));font-size:15px}
/* blocks */
.dsr-block{margin-top:30px}
.dsr-h2{font-family:var(--serif);font-size:20px;margin:0 0 14px;
  padding-bottom:8px;border-bottom:1px solid var(--line)}
.dsr-fcs{display:flex;flex-direction:column;gap:10px}
.dsr-fc{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);
  border-radius:12px;padding:13px 15px;background:var(--surface2)}
.dsr-fc-st{flex:none;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  padding:4px 10px;border-radius:999px;white-space:nowrap;margin-top:1px}
.dsr-fc-st.open{background:color-mix(in srgb,var(--gold) 18%,transparent);color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent)}
.dsr-fc-st.ok{background:color-mix(in srgb,var(--ok) 18%,transparent);color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 45%,transparent)}
.dsr-fc-st.no{background:color-mix(in srgb,var(--gate) 18%,transparent);color:var(--gate);
  border:1px solid color-mix(in srgb,var(--gate) 45%,transparent)}
.dsr-fc-c{margin:0 0 4px;line-height:1.5;font-size:14.5px}
.dsr-fc-m{font-size:12px;color:var(--muted)}
.dsr-note{margin-top:12px;font-size:13px}
/* honest footer */
.dsr-foot{display:flex;gap:12px;margin:30px 0 10px;padding:16px 18px;border-radius:14px;
  background:color-mix(in srgb,var(--accent) 6%,var(--surface2));border:1px solid var(--line)}
.dsr-foot .ic{font-size:18px;flex:none}
.dsr-foot b{color:var(--ink)} .dsr-foot div{font-size:13.5px;line-height:1.55;color:var(--muted)}
@media(max-width:640px){
  .dsr-hero{gap:16px} .dsr-hero .dsr-av .av{width:84px;height:84px;font-size:32px}
  .dsr-stats{grid-template-columns:repeat(2,1fr)}
  .dsr-beat{grid-template-columns:1fr;gap:5px;padding:14px 16px}
  .dsr-beat-l{padding-top:0}
}

/* ============ QUALITY & PROGRESSION DESIGN SYSTEM (visual phase · #/design) ============ */
.qs-wrap{max-width:1080px}
.qs-note{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:650;letter-spacing:.05em;
  text-transform:uppercase;color:var(--gold);border:1px dashed color-mix(in srgb,var(--gold) 50%,transparent);
  border-radius:999px;padding:6px 14px;margin:6px 0 4px}
.qs-sec{margin:44px 0}
.qs-h{font-family:var(--serif);font-size:24px;margin:0 0 4px}
.qs-sub{color:var(--muted);font-size:13.5px;margin:0 0 20px;max-width:640px;line-height:1.55}
/* ---- stat bars ---- */
.qs-stat{display:grid;grid-template-columns:118px 1fr 36px;align-items:center;gap:12px;padding:4.5px 0}
.qs-stat-l{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);cursor:help}
.qs-stat-track{display:block;height:5px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden}
.qs-stat-fill{display:block;height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--qcol,#7c6cf0) 70%,transparent),var(--qcol,#7c6cf0));
  box-shadow:0 0 8px color-mix(in srgb,var(--qcol,#7c6cf0) 45%,transparent);
  transition:width 1s cubic-bezier(.22,1,.36,1)}
.qs-stat-fill.on{width:var(--w)}
.qs-stat-v{font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;color:var(--ink)}
/* ---- xp bar ---- */
.qs-xp{margin:10px 0 2px}
.qs-xp-meta{display:flex;justify-content:space-between;font-size:11.5px;color:var(--muted);margin-bottom:5px}
.qs-xp-meta b{color:var(--ink);font-variant-numeric:tabular-nums}
.qs-xp-track{height:8px;border-radius:99px;background:color-mix(in srgb,var(--ink) 8%,transparent);overflow:hidden;
  border:1px solid color-mix(in srgb,var(--qcol,#7c6cf0) 25%,transparent)}
.qs-xp-fill{height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--qcol,#7c6cf0),color-mix(in srgb,var(--qcol,#7c6cf0) 55%,#43e0ff));
  transition:width 1.2s cubic-bezier(.22,1,.36,1)}
.qs-xp-fill.on{width:var(--w)}
/* ---- editor performance card ---- */
.qs-egrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px}
.qs-ecard{border:1px solid var(--line);border-radius:18px;padding:18px;position:relative;overflow:hidden;
  background:linear-gradient(160deg,color-mix(in srgb,var(--qcol,#7c6cf0) 9%,var(--card)) 0%,var(--card) 55%)}
.qs-ecard::before{content:"";position:absolute;inset:0 0 auto;height:2px;
  background:linear-gradient(90deg,transparent,var(--qcol,#7c6cf0),transparent);opacity:.8}
.qs-ehead{display:flex;gap:14px;align-items:center;margin-bottom:12px}
.qs-eport{width:64px;height:64px;border-radius:16px;background-size:cover;background-position:center 22%;flex:none;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--qcol,#7c6cf0) 55%,transparent),0 8px 18px rgba(0,0,0,.35)}
.qs-ecard.full .qs-eport{width:84px;height:84px;border-radius:20px}
.qs-ename{font-family:var(--serif);font-size:18px;letter-spacing:.02em;line-height:1.1}
.qs-ebeat{font-size:11.5px;color:var(--muted);margin-top:3px;letter-spacing:.02em}
.qs-erank{display:flex;gap:8px;align-items:baseline;margin-top:6px;font-size:11px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase}
.qs-erank b{color:var(--qcol,#7c6cf0);font-size:12px}
.qs-erank span{color:var(--muted)}
.qs-sig{display:flex;gap:10px;align-items:center;margin:13px 0 3px;padding:10px 13px;border-radius:12px;
  border:1px solid color-mix(in srgb,var(--qcol,#7c6cf0) 30%,var(--line));
  background:color-mix(in srgb,var(--qcol,#7c6cf0) 7%,transparent)}
.qs-sig-ic{color:var(--qcol,#7c6cf0);font-size:15px}
.qs-sig-l{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.qs-sig-n{font-family:var(--serif);font-size:14.5px;letter-spacing:.04em}
.qs-emeta{display:flex;gap:14px;flex-wrap:wrap;margin-top:11px;font-size:12px;color:var(--muted)}
.qs-emeta b{color:var(--ink);font-variant-numeric:tabular-nums}
.qs-standing{display:inline-flex;gap:6px;align-items:center;font-size:10.5px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;border-radius:999px;padding:4px 11px;border:1px solid}
.qs-standing.s1{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 50%,transparent);background:color-mix(in srgb,var(--ok) 12%,transparent)}
.qs-standing.s2{color:#43e0ff;border-color:color-mix(in srgb,#43e0ff 45%,transparent);background:color-mix(in srgb,#43e0ff 10%,transparent)}
.qs-standing.s3{color:var(--gold);border-color:color-mix(in srgb,var(--gold) 50%,transparent);background:color-mix(in srgb,var(--gold) 12%,transparent)}
/* ---- reader profile card ---- */
.qs-rcard{max-width:430px;border:1px solid var(--line);border-radius:20px;padding:20px;position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 100% 0%,color-mix(in srgb,#43e0ff 10%,transparent),transparent 55%),
    linear-gradient(160deg,color-mix(in srgb,#5f8fd9 8%,var(--card)),var(--card))}
.qs-rhead{display:flex;gap:14px;align-items:center;margin-bottom:6px}
.qs-rname{font-family:var(--mono,monospace);font-size:16px;letter-spacing:.06em}
.qs-rrank{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#43e0ff;margin-top:4px}
.qs-rrank span{color:var(--muted)}
.qs-rstats{margin:12px 0 4px}
.qs-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;margin-top:14px}
.qs-rcell{font-size:12px;color:var(--muted)}
.qs-rcell b{display:block;font-size:17px;font-family:var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.qs-streak{display:inline-flex;gap:7px;align-items:center;margin-top:13px;padding:7px 13px;border-radius:999px;
  font-size:12px;font-weight:650;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 45%,transparent);background:color-mix(in srgb,var(--gold) 10%,transparent)}
/* ---- badges ---- */
.qs-bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.qs-bcell{display:flex;flex-direction:column;align-items:center;gap:8px;padding:16px 10px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface2);text-align:center}
.qs-bname{font-size:12px;font-weight:700;letter-spacing:.05em}
.qs-branks{font-size:10.5px;color:var(--muted)}
.qs-bsizes{display:flex;gap:22px;align-items:flex-end;flex-wrap:wrap;padding:20px;border:1px solid var(--line);
  border-radius:14px;background:var(--surface2)}
.qs-bsz{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;color:var(--muted)}
/* ---- article score panel ---- */
.qs-score{max-width:560px;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--card)}
.qs-score summary{list-style:none;cursor:pointer;padding:18px 20px;display:flex;gap:18px;align-items:center}
.qs-score summary::-webkit-details-marker{display:none}
.qs-score-n{font-family:var(--serif);font-size:40px;line-height:1;font-variant-numeric:tabular-nums;
  background:linear-gradient(135deg,var(--accent),#43e0ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.qs-score-band{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ok);margin-top:4px}
.qs-score-l{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.qs-score-hint{margin-left:auto;font-size:11.5px;color:var(--muted)}
.qs-score-body{padding:4px 20px 16px;border-top:1px solid var(--line)}
.qs-score-meta{display:flex;gap:16px;flex-wrap:wrap;padding:12px 20px 16px;font-size:12px;color:var(--muted);border-top:1px solid var(--line)}
.qs-score-meta b{color:var(--ok)}
/* ---- reader rating ---- */
.qs-rate{max-width:560px;border:1px solid var(--line);border-radius:18px;padding:20px;background:var(--card)}
.qs-rate-h{font-size:11.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.qs-stars{display:flex;gap:6px}
.qs-star{font-size:30px;line-height:1;background:none;border:none;cursor:pointer;color:color-mix(in srgb,var(--ink) 25%,transparent);
  transition:color .12s,transform .12s;padding:2px}
.qs-star:hover{transform:scale(1.12)}
.qs-star.on{color:var(--gold);text-shadow:0 0 14px color-mix(in srgb,var(--gold) 55%,transparent)}
.qs-rate-lbl{margin-top:6px;font-size:13px;color:var(--muted);min-height:18px}
.qs-sliders{display:none;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.qs-sliders.show{display:block}
.qs-slider{margin:14px 0}
.qs-slider-l{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-bottom:6px}
.qs-slider-l b{font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink)}
.qs-slider input[type=range]{width:100%;accent-color:var(--accent)}
.qs-rate-actions{display:flex;gap:10px;margin-top:14px}
.qs-rate-done{display:none;margin-top:12px;font-size:14px;color:var(--ok)}
.qs-rate-done.show{display:block;animation:qsPop .4s ease}
@keyframes qsPop{0%{opacity:0;transform:translateY(4px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .qs-stat-fill,.qs-xp-fill{transition:none}
  .qs-star:hover{transform:none}
  .qs-rate-done.show{animation:none}
}
@media(max-width:640px){
  .qs-stat{grid-template-columns:96px 1fr 32px}
  .qs-egrid{grid-template-columns:1fr}
}

/* ============================================================================
   THE VISUAL COMPONENT SYSTEM
   Structured body blocks + the zero-cost entity layer. Every element here is
   pure CSS/SVG: no chart library, no images, no build step, no network call.

   Rules this section follows, so it stays coherent as components get added:
     - Colour comes from the existing tokens only (--accent, --ok, --gold,
       --gate, --muted). No new hex values, so light theme works for free.
     - Every component is a <figure class="comp comp-*"> with the same outer
       rhythm, so a reader learns the visual grammar once.
     - Numbers use tabular-nums everywhere, so columns actually line up.
     - Everything degrades to a readable stack under 640px. A comparison table
       a reader has to pinch-zoom is worse than no table.
   ========================================================================== */

/* ---------- shared component chrome ---------- */
.comp{margin:30px 0;padding:20px 22px;border:1px solid var(--hairline);border-radius:14px;
  background:color-mix(in srgb,var(--ink) 2.5%,transparent);font-family:var(--sans)}
.comp-head{margin:0 0 16px}
.comp-k{display:block;font-size:10.5px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent2);margin-bottom:7px}
.comp-head h4{margin:0;font-family:var(--serif);font-size:19px;line-height:1.3;font-weight:650;color:var(--ink)}
.comp-head p{margin:6px 0 0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.comp-src{margin-top:14px;padding-top:11px;border-top:1px solid var(--hairline);
  font-size:11px;line-height:1.5;color:var(--muted)}
.comp b,.comp .fig{font-variant-numeric:tabular-nums}

/* ---------- the entity layer: inline provenance chips ---------- */
.ent{position:relative;cursor:help;border-bottom:1px dashed color-mix(in srgb,var(--accent) 55%,transparent);
  padding-bottom:.5px;outline:none}
.ent:hover,.ent:focus-visible{border-bottom-color:var(--accent2)}
.ent-model{background:linear-gradient(transparent 68%,color-mix(in srgb,var(--accent) 15%,transparent) 0)}
.ent::after{content:"";position:absolute;left:0;bottom:-9px;width:100%;height:12px} /* hover bridge */
.ent-card{position:absolute;left:50%;bottom:calc(100% + 11px);transform:translateX(-50%) translateY(4px);
  width:min(320px,78vw);z-index:40;display:block;padding:14px 16px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);box-shadow:var(--shadow);
  font-family:var(--sans);font-size:12.5px;line-height:1.5;text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .16s ease,transform .16s ease}
.ent:hover .ent-card,.ent:focus-visible .ent-card,.ent:focus-within .ent-card{
  opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)}
.ent-card::after{content:"";position:absolute;left:50%;top:100%;margin-left:-6px;
  border:6px solid transparent;border-top-color:var(--surface)}
.ent-h{display:block;font-family:var(--serif);font-size:15.5px;font-weight:650;color:var(--ink);
  margin-bottom:10px;padding-bottom:9px;border-bottom:1px solid var(--hairline)}
.ent-h i{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.ent-row{display:flex;gap:10px;justify-content:space-between;align-items:baseline;padding:3.5px 0}
.ent-row>span{flex:none;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;padding-top:1px}
.ent-row>b{text-align:right;color:var(--ink);font-weight:600}
.ent-row a{color:var(--accent2);font-weight:600}
.ent-house{display:block;margin-top:10px;padding:8px 10px;border-radius:8px;font-size:11.5px;line-height:1.45;
  background:color-mix(in srgb,var(--gold) 13%,transparent);color:var(--ink-soft);
  border-left:2px solid var(--gold)}
.ent-link{display:block;margin-top:11px;padding-top:9px;border-top:1px solid var(--hairline);
  font-size:11.5px;font-weight:650;color:var(--accent2)}
@media(max-width:640px){ .ent-card{width:min(280px,88vw)} }

/* ---------- the evidence strip (derived, under the dateline) ---------- */
.evstrip{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:14px 0 0;padding:9px 14px;
  border:1px solid var(--hairline);border-radius:99px;background:color-mix(in srgb,var(--ink) 2.5%,transparent);
  font-size:11.5px;color:var(--muted);width:fit-content;max-width:100%}
.evstrip .ev-k{font-size:9.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--accent2)}
.evstrip span b{color:var(--ink);font-weight:700;font-variant-numeric:tabular-nums}

/* ---------- COMPARE ---------- */
.cmp-scroll{overflow-x:auto;margin:0 -4px;padding:0 4px}
table.cmp{width:100%;border-collapse:collapse;font-size:13.5px}
table.cmp th,table.cmp td{padding:10px 13px;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--hairline)}
table.cmp thead th{font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink);border-bottom:1px solid var(--line);white-space:nowrap}
table.cmp thead th span{display:block;font-size:10.5px;font-weight:500;letter-spacing:0;
  text-transform:none;color:var(--muted);margin-top:3px;white-space:normal}
table.cmp thead th.is-hi{color:var(--accent2)}
th.cmp-attr{font-size:12.5px!important;font-weight:600!important;letter-spacing:0!important;
  text-transform:none!important;color:var(--muted)!important;width:1%;white-space:nowrap}
th.cmp-attr i{display:block;font-style:normal;font-size:11px;line-height:1.4;color:var(--faint);
  font-weight:400;margin-top:3px;white-space:normal;max-width:26ch}
table.cmp td{line-height:1.45}
table.cmp td{color:var(--ink-soft);font-variant-numeric:tabular-nums}
table.cmp tr.mark td{color:var(--ink);font-weight:550;
  background:color-mix(in srgb,var(--accent) 5.5%,transparent)}
table.cmp tr.mark th.cmp-attr{box-shadow:inset 2px 0 0 var(--accent)}
table.cmp tbody tr:last-child th,table.cmp tbody tr:last-child td{border-bottom:none}
.cmp-legend{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:11px;color:var(--muted)}
.cmp-dot{width:16px;height:9px;border-radius:3px;flex:none;
  background:color-mix(in srgb,var(--accent) 20%,transparent);box-shadow:inset 2px 0 0 var(--accent)}
@media(max-width:640px){ table.cmp th,table.cmp td{padding:8px 9px;font-size:12.5px} }

/* ---------- TIMELINE ---------- */
ol.tl{list-style:none;margin:0;padding:0 0 0 3px;position:relative}
ol.tl::before{content:"";position:absolute;left:4.5px;top:8px;bottom:8px;width:1px;background:var(--line)}
.tl-i{position:relative;display:grid;grid-template-columns:88px 1fr;gap:0 20px;padding:0 0 18px 22px;align-items:baseline}
.tl-i:last-child{padding-bottom:0}
.tl-dot{position:absolute;left:0;top:6px;width:10px;height:10px;border-radius:50%;
  background:var(--surface);border:2px solid var(--muted);box-sizing:border-box}
.tl-i.is-hi .tl-dot{border-color:var(--accent);background:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent)}
.tl-i.future .tl-dot{border-style:dashed;border-color:var(--gold)}
.tl-when{font-size:11.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);
  font-variant-numeric:tabular-nums}
.tl-i.is-hi .tl-when{color:var(--accent2)}
.tl-i.future .tl-when{color:var(--gold)}
.tl-what{font-size:14px;line-height:1.55;color:var(--ink)}
.tl-what i{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:3px}
.tl-src{display:inline-block;margin-top:4px;font-size:10.5px;font-weight:650;color:var(--accent2)}
.tl-i.future .tl-what{color:var(--ink-soft)}
@media(max-width:640px){
  .tl-i{grid-template-columns:1fr;gap:3px}
  .tl-when{margin-bottom:1px}
}

/* ---------- ENTITY BOX (explicit, in-body) ---------- */
.eb-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:13px}
.eb-grid.one{grid-template-columns:1fr}
.eb-card{padding:15px 16px;border:1px solid var(--hairline);border-radius:11px;background:var(--surface)}
.eb-name{font-family:var(--serif);font-size:16.5px;font-weight:650;color:var(--ink);
  padding-bottom:10px;margin-bottom:9px;border-bottom:1px solid var(--hairline)}
.eb-name i{display:block;font-family:var(--sans);font-style:normal;font-size:10.5px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.eb-rows{font-size:12.5px;line-height:1.5}
.eb-note{margin:11px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}

/* ---------- SCORECARD ---------- */
.sc-hd,.sc-row{display:grid;grid-template-columns:1.5fr 118px 1.7fr;gap:16px;align-items:start}
.sc-hd{padding:0 0 9px;border-bottom:1px solid var(--line);
  font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.sc-row{padding:14px 0;border-bottom:1px solid var(--hairline)}
.comp-scorecard .sc-row:last-of-type{border-bottom:none;padding-bottom:0}
.sc-claim{font-size:14px;line-height:1.5;color:var(--ink);font-weight:550}
.sc-lv{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--lc)}
.sc-pip{display:block;font-size:13px;letter-spacing:.14em;margin-bottom:3px;color:var(--lc)}
.sc-basis{font-size:12.5px;line-height:1.55;color:var(--muted)}
.sc-basis i{display:block;font-style:normal;margin-top:6px;padding-left:9px;
  border-left:2px solid color-mix(in srgb,var(--accent) 45%,transparent);color:var(--ink-soft)}
.sc-basis i b{color:var(--accent2);font-weight:650}
@media(max-width:720px){
  .sc-hd{display:none}
  .sc-row{grid-template-columns:1fr;gap:7px}
  .sc-pip{display:inline;margin-right:7px}
}

/* ---------- LEDGER ---------- */
.lg-row{display:grid;grid-template-columns:minmax(96px,auto) 1fr;gap:18px;align-items:start;
  padding:15px 0;border-bottom:1px solid var(--hairline)}
.comp-ledger .lg-row:last-of-type{border-bottom:none;padding-bottom:0}
.lg-v{font-family:var(--serif);font-size:clamp(24px,4vw,33px);line-height:1;font-weight:650;
  color:var(--accent2);font-variant-numeric:tabular-nums}
.lg-v span{display:block;font-family:var(--sans);font-size:10.5px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);margin-top:6px}
.lg-b b{display:block;font-size:14px;line-height:1.45;color:var(--ink);font-weight:600;margin-bottom:7px}
.lg-in,.lg-ex{display:block;font-size:12px;line-height:1.5;padding-left:16px;position:relative;margin-top:3px}
.lg-in{color:var(--ink-soft)} .lg-ex{color:var(--muted)}
.lg-in::before{content:"✓";position:absolute;left:0;color:var(--ok);font-weight:700}
.lg-ex::before{content:"✕";position:absolute;left:0;color:var(--gate);font-weight:700}
.lg-b i{display:block;font-style:normal;font-size:12px;line-height:1.5;color:var(--muted);margin-top:7px}
@media(max-width:640px){ .lg-row{grid-template-columns:1fr;gap:9px} }

/* ---------- BEFORE / AFTER ---------- */
.ba-hd,.ba-row{display:grid;grid-template-columns:minmax(90px,1.1fr) 1fr 26px 1fr;gap:12px;align-items:center}
.ba-hd{padding-bottom:9px;border-bottom:1px solid var(--line);
  font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.ba-row{padding:13px 0;border-bottom:1px solid var(--hairline)}
.comp-ba .ba-row:last-of-type{border-bottom:none;padding-bottom:0}
.ba-l{font-size:12.5px;font-weight:600;color:var(--muted)}
.ba-b,.ba-a{font-size:13.5px;line-height:1.45;font-variant-numeric:tabular-nums;padding:7px 11px;border-radius:8px}
.ba-b{color:var(--muted);background:color-mix(in srgb,var(--ink) 4%,transparent);text-decoration:line-through;
  text-decoration-color:color-mix(in srgb,var(--gate) 60%,transparent);text-decoration-thickness:1px}
.ba-a{color:var(--ink);font-weight:600;background:color-mix(in srgb,var(--ok) 11%,transparent)}
.ba-arrow{text-align:center;color:var(--accent);font-size:15px}
@media(max-width:640px){
  .ba-hd{display:none}
  .ba-row{grid-template-columns:1fr;gap:5px;padding:12px 0}
  .ba-arrow{display:none}
}

/* ---------- SPECTRUM ---------- */
.sp-wrap{padding:52px 8px 0}
.sp-track{position:relative;height:5px;border-radius:99px;
  background:linear-gradient(90deg,color-mix(in srgb,var(--ok) 55%,transparent),
    color-mix(in srgb,var(--gold) 55%,transparent),color-mix(in srgb,var(--gate) 55%,transparent))}
.sp-m{position:absolute;top:50%;transform:translate(-50%,-50%);display:block}
.sp-pin{display:block;width:13px;height:13px;border-radius:50%;background:var(--surface);
  border:2.5px solid var(--muted);box-sizing:border-box}
.sp-m.is-hi .sp-pin{border-color:var(--accent);background:var(--accent);
  box-shadow:0 0 0 5px color-mix(in srgb,var(--accent) 20%,transparent)}
.sp-lb{position:absolute;left:50%;bottom:20px;transform:translateX(-50%);white-space:nowrap;
  font-size:11.5px;font-weight:650;color:var(--ink-soft);text-align:center}
.sp-m:nth-child(even) .sp-lb{bottom:auto;top:20px}
.sp-m.is-hi .sp-lb{color:var(--ink)}
.sp-lb b{display:block;font-size:10.5px;font-weight:600;color:var(--muted);margin-top:2px;
  font-variant-numeric:tabular-nums}
.sp-ends{display:flex;justify-content:space-between;margin-top:16px;font-size:10.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){ .sp-lb{font-size:10px} .sp-wrap{padding-top:60px} }

/* ---------- FLOW ---------- */
ol.fl{list-style:none;margin:0;padding:0;counter-reset:fl}
.fl-s{position:relative;display:grid;grid-template-columns:30px 1fr;gap:14px;padding:0 0 20px;align-items:start}
.fl-s:last-child{padding-bottom:0}
.fl-s::before{content:"";position:absolute;left:14.5px;top:32px;bottom:2px;width:1px;background:var(--line)}
.fl-s:last-child::before{display:none}
.fl-n{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  font-size:12.5px;font-weight:750;font-variant-numeric:tabular-nums;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);position:relative;z-index:1}
.fl-s.is-hi .fl-n{background:var(--accent);color:#fff;border-color:var(--accent)}
.fl-s.blocked .fl-n{background:color-mix(in srgb,var(--gate) 14%,transparent);color:var(--gate);
  border-color:color-mix(in srgb,var(--gate) 40%,transparent)}
.fl-a{display:block;font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent2);margin-bottom:3px}
.fl-s.blocked .fl-a{color:var(--gate)}
.fl-b b{display:block;font-size:14px;line-height:1.5;color:var(--ink);font-weight:600}
.fl-b i{display:block;font-style:normal;font-size:12.5px;line-height:1.5;color:var(--muted);margin-top:4px}
.fl-s.blocked .fl-b b{color:var(--ink-soft)}

/* ---------- KEYFACTS ---------- */
.kf-grid{display:grid;grid-template-columns:repeat(var(--kf-cols,3),minmax(0,1fr));
  background:var(--surface);border:1px solid var(--hairline);border-radius:11px;overflow:hidden}
.kf-i{padding:13px 15px;border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.kf-l{display:block;font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin-bottom:6px}
.kf-v{display:block;font-family:var(--serif);font-size:17.5px;line-height:1.3;font-weight:650;color:var(--ink);
  font-variant-numeric:tabular-nums;text-wrap:balance}
.kf-n{display:block;font-size:11.5px;line-height:1.4;color:var(--muted);margin-top:6px}
@media(max-width:760px){ .kf-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media(max-width:430px){ .kf-grid{grid-template-columns:1fr} }

/* ---------- STAKES ---------- */
.stk-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:13px}
.stk-i{padding:14px 16px;border-radius:11px;background:var(--surface);
  border:1px solid var(--hairline);border-left:3px solid var(--sc)}
.stk-h{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:8px}
.stk-ic{color:var(--sc);font-size:12px}
.stk-h b{font-size:14px;color:var(--ink);font-weight:650}
.stk-t{font-size:9.5px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--sc)}
.stk-i p{margin:0;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}

/* ---------- SOURCECHECK ---------- */
.comp-scc{border-color:color-mix(in srgb,var(--gold) 30%,var(--hairline));
  background:color-mix(in srgb,var(--gold) 4%,transparent)}
.comp-scc .comp-k{color:var(--gold)}
.scc-i+.scc-i{margin-top:18px;padding-top:18px;border-top:1px solid var(--hairline)}
.scc-q{font-size:14px;font-weight:650;line-height:1.45;color:var(--ink);margin-bottom:10px}
ul.scc-l{list-style:none;margin:0;padding:0}
ul.scc-l li{display:grid;grid-template-columns:1fr auto auto auto;gap:10px;align-items:baseline;
  padding:8px 11px;border-radius:8px;font-size:13px}
ul.scc-l li+li{margin-top:5px}
ul.scc-l li.trusted{background:color-mix(in srgb,var(--ok) 11%,transparent)}
.scc-who{color:var(--muted);font-size:12.5px}
.scc-who i{display:block;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint);margin-top:2px}
.scc-val{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums;text-align:right}
ul.scc-l li a{color:var(--accent2);font-weight:700}
.scc-badge{font-size:9px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ok);
  border:1px solid color-mix(in srgb,var(--ok) 45%,transparent);border-radius:99px;padding:2px 7px}
.scc-r{margin:11px 0 0;font-size:12.5px;line-height:1.55;color:var(--ink-soft)}
.scc-r b{color:var(--gold);font-weight:700}
@media(max-width:640px){
  ul.scc-l li{grid-template-columns:1fr auto;gap:5px 9px}
  .scc-val{text-align:left}
}

/* ---------- new chart kinds ---------- */
.cbrow{display:flex;flex-direction:column;gap:4px}
.cbrow.has-note{padding-bottom:3px}
.cb-note{font-size:11px;line-height:1.45;color:var(--faint);
  margin-left:calc(34% + 12px);max-width:52ch}
@media(max-width:640px){ .cb-note{margin-left:0} }
/* line */
.chart-line .ln-wrap{display:flex;gap:11px;align-items:stretch}
.ln-ax{display:flex;flex-direction:column;justify-content:space-between;flex:none;
  font-size:10px;font-weight:650;color:var(--faint);font-variant-numeric:tabular-nums;padding:10px 0 8px}
.ln-svg{width:100%;height:170px;display:block;overflow:visible}
.ln-xl{display:flex;justify-content:space-between;gap:4px;margin:8px 0 0 38px;
  font-size:10px;color:var(--muted);font-variant-numeric:tabular-nums}
.ln-xl span{flex:1;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* stacked */
.sks{display:flex;flex-direction:column;gap:10px}
.sk-row{display:grid;grid-template-columns:minmax(72px,auto) 1fr auto;gap:12px;align-items:center}
.sk-l{font-size:12.5px;color:var(--ink-soft)}
.sk-track{display:flex;height:20px;border-radius:5px;overflow:hidden;
  background:color-mix(in srgb,var(--ink) 6%,transparent)}
.sk-track i{position:relative;transition:filter .15s}
.sk-track i:hover{filter:brightness(1.18)}
.sk-tip{position:absolute;left:50%;bottom:calc(100% + 6px);transform:translateX(-50%);white-space:nowrap;
  padding:4px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--line);
  font-size:10.5px;color:var(--ink);opacity:0;pointer-events:none;transition:opacity .14s;z-index:5}
.sk-track i:hover .sk-tip{opacity:1}
.sk-t{font-size:12px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums}
ul.sk-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px;
  font-size:11.5px;color:var(--ink-soft)}
ul.sk-legend li{display:flex;align-items:center;gap:7px}
ul.sk-legend b{color:var(--ink);font-variant-numeric:tabular-nums}
/* range */
.rgs{display:flex;flex-direction:column;gap:11px}
.rg-row{display:grid;grid-template-columns:minmax(72px,auto) 1fr auto;gap:12px;align-items:center}
.rg-l{font-size:12.5px;color:var(--ink-soft)}
.rg-row.is-hi .rg-l{color:var(--ink);font-weight:650}
.rg-track{position:relative;height:9px;border-radius:99px;
  background:color-mix(in srgb,var(--ink) 6%,transparent)}
.rg-track i{position:absolute;top:0;height:100%;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 45%,transparent)}
.rg-row.is-hi .rg-track i{background:var(--accent)}
.rg-pt{position:absolute;top:50%;width:3px;height:15px;border-radius:2px;background:var(--ink);
  transform:translate(-50%,-50%)}
.rg-v{font-size:11.5px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
/* waffle */
.wf{display:flex;flex-wrap:wrap;gap:4px;max-width:340px}
.wf i{width:17px;height:17px;border-radius:3.5px;display:block}
.wf i.wf-e{background:color-mix(in srgb,var(--ink) 7%,transparent)}

@media(prefers-reduced-motion:reduce){
  .ent-card{transition:none}
  .sk-track i,.sk-tip{transition:none}
}

/* Inline cross-links inside article prose. Deliberately quieter than a nav link:
   an underline that only firms up on hover, so a paragraph with three of them
   still reads as prose rather than as a link farm. */
.prose a.inl,.comp a.inl{color:var(--ink);
  border-bottom:1px solid color-mix(in srgb,var(--accent) 50%,transparent);
  transition:border-color .15s,color .15s}
.prose a.inl:hover,.comp a.inl:hover{color:var(--accent-ink);border-bottom-color:var(--accent)}

/* WCAG 1.4.1 — accent-coloured links inside running article text sit at only
   1.79:1 against the surrounding body copy (#b7a5ff on #eceaf4), far under the
   3:1 that colour-only link identification needs. Rather than desaturate the
   accent, give body links a non-colour affordance: a real underline. .inl is
   excluded because its border-bottom already is one. */
.prose p a,.prose li a,.prose blockquote a,
.comp p a,.comp li a,.comp blockquote a{
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:.16em;
  text-decoration-color:color-mix(in srgb,currentColor 60%,transparent);
}
.prose p a:hover,.prose li a:hover,.prose blockquote a:hover,
.comp p a:hover,.comp li a:hover,.comp blockquote a:hover{text-decoration-color:currentColor}
.prose p a.inl,.prose li a.inl,.prose blockquote a.inl,
.comp p a.inl,.comp li a.inl,.comp blockquote a.inl{text-decoration:none}

/* ============================================================================
   PREMIUM MOTION & DEPTH SYSTEM
   Zero dependencies: View Transitions + IntersectionObserver + pure CSS.
   Everything motion-related sits behind prefers-reduced-motion, and the JS
   never adds the hidden "rv" state when reduced motion is set — so content is
   never hidden for anyone who asked the OS for stillness, or with JS off.
   ========================================================================== */

/* ---------- validated categorical series tokens (see visual-components.md §charts)
   Order is FIXED, assigned by slot, never cycled. Dark and light are separately
   stepped sets that pass the colorblind-separation, normal-vision, lightness-band
   and contrast checks against each mode's real chart surface. Light slots 3–7 sit
   under 3:1 contrast, which is legal here because every chart direct-labels its
   values and legends carry text (the relief rule). ---------- */
:root{
  --s1:#8b7cf7; --s2:#e66767; --s3:#3987e5; --s4:#d95926;
  --s5:#199e70; --s6:#c98500; --s7:#d55181; --s8:#008300;
}
[data-theme="light"]{
  --s1:#6a58e8; --s2:#e34948; --s3:#2a78d6; --s4:#eb6834;
  --s5:#1baf7a; --s6:#eda100; --s7:#e87ba4; --s8:#008300;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --s1:#6a58e8; --s2:#e34948; --s3:#2a78d6; --s4:#eb6834;
    --s5:#1baf7a; --s6:#eda100; --s7:#e87ba4; --s8:#008300;
  }
}

/* ---------- filmic grain — the single cheapest "expensive" signal there is.
   One fixed overlay, 3% opacity, pointer-transparent. ---------- */
/* Luminance is mapped into ALPHA at a low slope, so no single noise pixel can
   reach full brightness. Lives on html::after because body::before/::after are
   already taken by the ornamental side rails ("SIDE DECOR" above). The xlating
   translate-veil also uses html::after and is declared LATER with a scoped
   class, so during translation its spinner simply wins — correct, since the
   whole page is veiled then anyway. White grain for dark, black for light. */
html::after{
  content:"";position:fixed;inset:0;z-index:3000;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.06 0.06 0.06 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}
[data-theme="light"]::after,
:root:not([data-theme="dark"])::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0.07 0.07 0.07 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"])::after{
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0.06 0.06 0.06 0 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
}

/* ---------- typography refinements ---------- */
.article h1,.mast-hero h1,.comp-head h4{text-wrap:balance}
.article .dek,.mast-hero p,.comp-head p{text-wrap:pretty}

/* ---------- scrollbar + focus, quietly custom ---------- */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-thumb{background:var(--surface3);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:color-mix(in srgb,var(--accent) 35%,var(--surface3))}
::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ---------- progress bar glow ---------- */
#progress{box-shadow:0 0 12px color-mix(in srgb,var(--accent) 65%,transparent),0 0 3px var(--accent)}

/* ---------- card physics: longer spring, layered shadow, specular sweep.
   Overrides the flat .2s ease hovers defined earlier in this file. ---------- */
.card .art{transition:transform .45s cubic-bezier(.22,1,.32,1),box-shadow .45s cubic-bezier(.22,1,.32,1)}
.card:hover .art{transform:translateY(-4px) scale(1.012);
  box-shadow:0 24px 48px -20px rgba(0,0,0,.55),
             0 10px 20px -14px color-mix(in srgb,var(--accent) 30%,transparent)}
.card .art::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.10) 50%,transparent 60%);
  transform:translateX(-140%) skewX(-6deg);transition:transform .1s}
.card:hover .art::after{transform:translateX(140%) skewX(-6deg);transition:transform .75s cubic-bezier(.4,0,.2,1)}
.mast-card{transition:transform .45s cubic-bezier(.22,1,.32,1),border-color .3s,box-shadow .45s}
.dossier-card{transition:transform .45s cubic-bezier(.22,1,.32,1),border-color .3s,box-shadow .45s}
.dossier-card:hover{box-shadow:var(--shadow)}
.tool-btn{transition:transform .25s cubic-bezier(.22,1,.32,1),border-color .2s,background .2s,color .2s}
.tool-btn:active{transform:translateY(0) scale(.97)}

/* ---------- masthead aurora: a slow, blurred color field behind the hero.
   Single pseudo-element, transform-only animation. ---------- */
.mast-hero{position:relative;z-index:0}
.mast-hero::before{content:"";position:absolute;left:-12%;right:-12%;top:-56px;height:300px;
  z-index:-1;pointer-events:none;filter:blur(34px);opacity:.9;
  background:
    radial-gradient(430px 210px at 16% 32%, color-mix(in srgb,var(--accent) 17%,transparent), transparent 70%),
    radial-gradient(390px 230px at 80% 18%, color-mix(in srgb,var(--s3) 11%,transparent), transparent 72%),
    radial-gradient(300px 190px at 55% 78%, color-mix(in srgb,var(--s2) 7%,transparent), transparent 70%)}
[data-theme="light"] .mast-hero::before{opacity:.55}

@media (prefers-reduced-motion: no-preference){
  .mast-hero::before{animation:rtfcAurora 17s ease-in-out infinite alternate}
  @keyframes rtfcAurora{
    from{transform:translate3d(-14px,0,0) scale(1)}
    to{transform:translate3d(18px,10px,0) scale(1.07)}
  }

  /* ---------- route changes: soft cross-fade + rise. The header and progress
     bar keep their own stable snapshots so only content appears to move. ---------- */
  header.site{view-transition-name:rtfc-header}
  #progress{view-transition-name:rtfc-progress}
  ::view-transition-old(root){animation:rtfcVtOut .16s ease both}
  ::view-transition-new(root){animation:rtfcVtIn .32s cubic-bezier(.22,1,.32,1) both}
  @keyframes rtfcVtOut{to{opacity:0;transform:translateY(-8px)}}
  @keyframes rtfcVtIn{from{opacity:0;transform:translateY(12px)}}

  /* ---------- scroll-reveal grammar.
     "rv" is the armed (hidden) state, ADDED BY JS — never in the markup, so
     no-JS and reduced-motion readers always see everything instantly.
     "rv-in" releases it, staggered by --rv-d (set per batch by the observer). ---------- */
  .rv{opacity:0;transform:translateY(16px)}
  .rv-in{opacity:1;transform:none;
    transition:opacity .55s ease var(--rv-d,0ms),
               transform .7s cubic-bezier(.22,1,.32,1) var(--rv-d,0ms)}
  /* rv-skip = revealed by the fast-scroll catch-up pass: appear instantly,
     including every child draw-in, so scrolled-past content is simply there */
  .rv-skip,.rv-skip *{transition:none!important;transition-delay:0ms!important}

  /* charts draw themselves in once revealed */
  .rv .cb-track i,.rv .sk-track i,.rv .rg-track i{transform:scaleX(0);transform-origin:left center}
  .rv-in .cb-track i,.rv-in .sk-track i,.rv-in .rg-track i{transform:scaleX(1);
    transition:transform .9s cubic-bezier(.25,1,.35,1) calc(var(--rv-d,0ms) + 120ms)}
  .rv-in .cbrow:nth-child(2) .cb-track i,.rv-in .sk-row:nth-child(2) .sk-track i,.rv-in .rg-row:nth-child(2) .rg-track i{transition-delay:calc(var(--rv-d,0ms) + 210ms)}
  .rv-in .cbrow:nth-child(3) .cb-track i,.rv-in .sk-row:nth-child(3) .sk-track i,.rv-in .rg-row:nth-child(3) .rg-track i{transition-delay:calc(var(--rv-d,0ms) + 300ms)}
  .rv-in .cbrow:nth-child(4) .cb-track i,.rv-in .sk-row:nth-child(4) .sk-track i,.rv-in .rg-row:nth-child(4) .rg-track i{transition-delay:calc(var(--rv-d,0ms) + 390ms)}
  .rv-in .cbrow:nth-child(n+5) .cb-track i,.rv-in .sk-row:nth-child(n+5) .sk-track i,.rv-in .rg-row:nth-child(n+5) .rg-track i{transition-delay:calc(var(--rv-d,0ms) + 470ms)}

  .rv .pie-wrap{opacity:0;transform:scale(.94)}
  .rv-in .pie-wrap{opacity:1;transform:none;
    transition:opacity .6s ease calc(var(--rv-d,0ms) + 100ms),transform .7s cubic-bezier(.22,1,.32,1) calc(var(--rv-d,0ms) + 100ms)}

  .rv .ln-svg polyline{stroke-dasharray:1;stroke-dashoffset:1}
  .rv-in .ln-svg polyline{stroke-dashoffset:0;transition:stroke-dashoffset 1.15s cubic-bezier(.4,0,.2,1) calc(var(--rv-d,0ms) + 180ms)}
  .rv .ln-svg .ln-area,.rv .ln-svg circle{opacity:0}
  .rv-in .ln-svg .ln-area{opacity:.18;transition:opacity .7s ease calc(var(--rv-d,0ms) + 900ms)}
  .rv-in .ln-svg circle{opacity:1;transition:opacity .45s ease calc(var(--rv-d,0ms) + 750ms)}

  .rv .wf i{opacity:0;transform:scale(.4)}
  .rv-in .wf i{opacity:1;transform:scale(1);transition:opacity .35s ease,transform .45s cubic-bezier(.34,1.56,.64,1)}

  /* timelines and flows cascade step by step */
  .rv .tl-i,.rv .fl-s,.rv .sc-row,.rv .lg-row,.rv .ba-row,.rv .stk-i,.rv .eb-card{opacity:0;transform:translateY(10px)}
  .rv-in .tl-i,.rv-in .fl-s,.rv-in .sc-row,.rv-in .lg-row,.rv-in .ba-row,.rv-in .stk-i,.rv-in .eb-card{opacity:1;transform:none;
    transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.32,1)}
  .rv-in .tl-i:nth-child(1),.rv-in .fl-s:nth-child(1){transition-delay:calc(var(--rv-d,0ms) + 80ms)}
  .rv-in .tl-i:nth-child(2),.rv-in .fl-s:nth-child(2),.rv-in .sc-row:nth-of-type(1),.rv-in .lg-row:nth-of-type(1),.rv-in .ba-row:nth-of-type(1),.rv-in .stk-i:nth-child(1),.rv-in .eb-card:nth-child(1){transition-delay:calc(var(--rv-d,0ms) + 150ms)}
  .rv-in .tl-i:nth-child(3),.rv-in .fl-s:nth-child(3),.rv-in .sc-row:nth-of-type(2),.rv-in .lg-row:nth-of-type(2),.rv-in .ba-row:nth-of-type(2),.rv-in .stk-i:nth-child(2),.rv-in .eb-card:nth-child(2){transition-delay:calc(var(--rv-d,0ms) + 220ms)}
  .rv-in .tl-i:nth-child(4),.rv-in .fl-s:nth-child(4),.rv-in .sc-row:nth-of-type(3),.rv-in .lg-row:nth-of-type(3),.rv-in .ba-row:nth-of-type(3),.rv-in .stk-i:nth-child(3),.rv-in .eb-card:nth-child(3){transition-delay:calc(var(--rv-d,0ms) + 290ms)}
  .rv-in .tl-i:nth-child(5),.rv-in .fl-s:nth-child(5),.rv-in .sc-row:nth-of-type(4),.rv-in .lg-row:nth-of-type(4),.rv-in .ba-row:nth-of-type(4),.rv-in .stk-i:nth-child(4),.rv-in .eb-card:nth-child(4){transition-delay:calc(var(--rv-d,0ms) + 360ms)}
  .rv-in .tl-i:nth-child(n+6),.rv-in .fl-s:nth-child(n+6),.rv-in .sc-row:nth-of-type(n+5),.rv-in .lg-row:nth-of-type(n+5),.rv-in .ba-row:nth-of-type(n+5),.rv-in .stk-i:nth-child(n+5),.rv-in .eb-card:nth-child(n+5){transition-delay:calc(var(--rv-d,0ms) + 430ms)}

  /* compare tables: marked divergence rows breathe in their tint */
  .rv table.cmp tr.mark td{background:transparent}
  .rv-in table.cmp tr.mark td{background:color-mix(in srgb,var(--accent) 5.5%,transparent);
    transition:background .8s ease calc(var(--rv-d,0ms) + 350ms)}

  /* the entity hovercard pops with a touch of scale */
  .ent-card{transform:translateX(-50%) translateY(5px) scale(.97)}
  .ent:hover .ent-card,.ent:focus-visible .ent-card,.ent:focus-within .ent-card{
    transform:translateX(-50%) translateY(0) scale(1)}
}

/* safety: print and any missed context always sees everything */
@media print{
  .rv{opacity:1!important;transform:none!important}
  html::after{display:none}
}

/* ---------- SCOREBOARD redesign (overrides the earlier flat rules) ---------- */
.sb-updated{align-items:flex-start}
.sbu-dot{margin-top:5px}
.sbu-t{font-size:13px;line-height:1.6;color:var(--muted)}
.sb-ins{position:relative;overflow:hidden;transition:transform .35s cubic-bezier(.22,1,.32,1),border-color .3s}
.sb-ins:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 35%,var(--hairline))}
.sb-ins .si-k{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent2);margin-bottom:7px}
.sb-ins b{font-family:var(--serif);font-size:18px;line-height:1.25;display:block}
.sb-ins .si-s{display:block;font-size:12px;color:var(--muted);margin-top:5px;font-variant-numeric:tabular-nums}
.sb-card{transition:transform .35s cubic-bezier(.22,1,.32,1),border-color .3s,box-shadow .35s}
.sb-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 30%,var(--hairline));box-shadow:var(--shadow)}
.sb-podium.sb-p1{border-color:color-mix(in srgb,var(--gold) 45%,var(--hairline));
  background:linear-gradient(135deg,color-mix(in srgb,var(--gold) 7%,var(--card)),var(--card) 55%)}
.sb-p1 .sb-rank{background:var(--gold);color:#1c1607;font-weight:800}
.sb-p2 .sb-rank{background:color-mix(in srgb,var(--ink) 22%,var(--surface2));color:var(--ink);font-weight:800}
.sb-p3 .sb-rank{background:color-mix(in srgb,#cf9b57 55%,var(--surface2));color:#241505;font-weight:800}
.sb-mode{font-size:9.5px;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);
  border:1px solid color-mix(in srgb,var(--accent) 35%,transparent);border-radius:99px;padding:2px 8px;
  background:color-mix(in srgb,var(--accent) 10%,transparent)}
.sb-v{font-variant-numeric:tabular-nums}
@media(max-width:640px){
  .sb-top{gap:7px}
  .sb-top .sb-price{margin-left:auto}
  .sb-card{padding:13px 14px}
}

/* ---------- LAB DIRECTORY (Resources) ----------
   Real logo, self-hosted (web/assets/logos/<key>.<ext>) on a white chip -- white
   so a company's actual colors/dark strokes stay legible over BOTH themes, since
   the site is dark-default but not dark-only. .no-logo (missing file, or the
   <img> onerror firing at runtime) renders an empty brand-tinted dashed chip --
   deliberately NOT the old colored-initials monogram, so a gap always reads as
   "not sourced yet", never as a quietly-degraded design choice. */
.bmark{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  background:#fff;border:1px solid color-mix(in srgb,var(--bc) 30%,var(--hairline));
  box-shadow:0 2px 6px -3px color-mix(in srgb,var(--bc) 45%,transparent);overflow:hidden}
.bmark img{width:76%;height:76%;object-fit:contain;display:block}
.bmark.no-logo{background:color-mix(in srgb,var(--bc) 12%,var(--surface));
  border-style:dashed;border-color:color-mix(in srgb,var(--bc) 40%,var(--hairline))}
.bmark-hero{width:60px;height:60px;border-radius:16px}
.ds-chip .bmark{width:20px;height:20px;border-radius:6px;margin-right:7px;vertical-align:-5px}
.dc-head,.dsr-co-head,.rc-head{display:flex;align-items:center;gap:11px}
.dsr-co-head{margin-bottom:6px}
.dsr-co-head h1{margin:0}
.dc-head{margin-bottom:2px}
.rc-head{margin-bottom:1px}
.rc-head>b{font-family:var(--serif);font-size:17px}
.rglyph{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;flex:none;
  font-size:13px;color:var(--accent2);background:color-mix(in srgb,var(--accent2) 12%,transparent);
  border:1px solid color-mix(in srgb,var(--accent2) 28%,var(--hairline))}
.rt-ic{font-size:15px;color:var(--accent2)}
.lab-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;margin-bottom:8px}
.lab-card{display:block;padding:16px 17px;border:1px solid var(--hairline);border-radius:14px;background:var(--card);
  transition:transform .35s cubic-bezier(.22,1,.32,1),border-color .3s,box-shadow .35s;position:relative;overflow:hidden}
.lab-card::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;
  background:linear-gradient(180deg,var(--bc),transparent);opacity:.7}
.lab-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);
  border-color:color-mix(in srgb,var(--bc) 40%,var(--hairline))}
.lab-head{display:flex;align-items:center;gap:11px;margin-bottom:12px;color:inherit;text-decoration:none}
.lab-head .bmark{width:34px;height:34px;border-radius:10px;font-size:13px}
.lab-who{min-width:0;flex:1}
.lab-who b{display:block;font-family:var(--serif);font-size:16.5px;line-height:1.2;color:var(--ink)}
.lab-who span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.lab-go{font-size:11px;font-weight:700;color:var(--accent2);opacity:0;transform:translateX(-4px);
  transition:opacity .25s,transform .25s;flex:none}
.lab-card:hover .lab-go{opacity:1;transform:none}
.lab-models{display:flex;flex-wrap:wrap;gap:6px}
/* Follow-links merged onto the lab card (see followLinks() in app.js) -- same
   pill language as .res-links so it reads as the same kind of control, just
   relocated; a hairline seam separates it from the model chips above. */
.lab-follow{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--hairline)}
.lab-follow a{font-size:11px;font-weight:650;color:var(--accent2);border:1px solid var(--line);
  border-radius:99px;padding:3px 10px;transition:all .15s;position:relative;z-index:1}
.lab-follow a:hover{border-color:var(--accent);color:var(--ink)}
.lm-chip{font-size:11.5px;line-height:1;padding:6px 9px;border-radius:8px;color:var(--ink-soft);
  background:color-mix(in srgb,var(--ink) 4.5%,transparent);border:1px solid var(--hairline);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.lm-chip b{color:var(--accent2);font-weight:750;margin-left:2px}
.lm-chip i{font-style:normal;font-size:9.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-left:4px}
.lm-chip i.lm-open{color:var(--ok)}
.ds-group{margin:0 0 14px}
.ds-gl{display:block;font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--muted);margin-bottom:8px}
.ds-chip{display:inline-flex;align-items:center}

/* ---------- browse by player (homepage) ---------- */
.player-browse{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:10px;margin-bottom:6px}
.player-cell{display:flex;align-items:center;gap:9px;padding:11px 13px;border:1px solid var(--hairline);
  border-radius:12px;background:var(--card);transition:transform .3s cubic-bezier(.22,1,.32,1),border-color .25s}
.player-cell:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--bc,var(--accent)) 45%,var(--hairline))}
.player-cell b{flex:1;min-width:0;font-size:13px;font-weight:650;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-cell em{font-style:normal;font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.player-cell:hover em{color:var(--accent2)}
.player-all{justify-content:center;border-style:dashed}
.player-all b{flex:none;color:var(--muted)}

/* ---------- radar: live status ---------- */
.ev-card.is-live{border-color:color-mix(in srgb,var(--ok) 45%,var(--hairline));
  background:linear-gradient(120deg,color-mix(in srgb,var(--ok) 6%,var(--card)),var(--card) 60%)}
.ev-live{display:inline-flex;align-items:center;gap:6px;margin-left:8px;font-size:9.5px;font-weight:800;
  letter-spacing:.14em;color:var(--ok)}
.ev-soon{display:inline-block;margin-left:8px;font-size:9.5px;font-weight:750;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold)}
.ev-chk{margin-left:8px;font-size:10.5px;color:var(--ok)}
.he-stamp{margin-left:10px;font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
@media(prefers-reduced-motion:no-preference){
  .ev-card.is-live .live-dot{animation:evPulse 1.6s ease-in-out infinite}
  @keyframes evPulse{0%,100%{box-shadow:0 0 0 0 color-mix(in srgb,var(--ok) 45%,transparent)}50%{box-shadow:0 0 0 6px transparent}}
}

/* ---------- buzz upgrade ---------- */
.bz-heat{position:relative}
.bz-heat em{position:absolute;right:0;top:-15px;font-style:normal;font-size:9px;font-weight:800;
  color:var(--muted);font-variant-numeric:tabular-nums}
.buzz-card{transition:transform .35s cubic-bezier(.22,1,.32,1),border-color .3s,box-shadow .35s}
.buzz-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--accent) 30%,var(--hairline));box-shadow:var(--shadow)}
.bz-hot{grid-column:1/-1;border-color:color-mix(in srgb,var(--accent) 40%,var(--hairline));
  background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 8%,var(--card)),var(--card) 55%);position:relative}
.bz-hotk{position:absolute;top:-9px;left:16px;font-size:9px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);background:var(--bg);padding:2px 9px;
  border:1px solid color-mix(in srgb,var(--accent) 40%,var(--hairline));border-radius:99px}
.bz-hot .bz-text{font-size:15.5px;line-height:1.6}

/* ============================================================================
   THE INTERROGATION LAYER + ACCOUNTABILITY ENGINE
   Evidence on demand, reader-adjustable models, cross-archive ranking, the
   strongest-case-against panel, the document viewer, and the claims ledger.
   ========================================================================== */

/* ---------- evidence on demand (per-paragraph provenance) ---------- */
.prose p.has-ev{position:relative}
.evmark{position:relative;display:inline-block;margin-left:5px;vertical-align:2px;cursor:help;outline:none}
.ev-dot{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;
  font-family:var(--sans);font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;
  color:var(--accent-ink);background:color-mix(in srgb,var(--accent) 15%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent);transition:background .18s,color .18s}
.evmark:hover .ev-dot,.evmark:focus-visible .ev-dot{background:var(--accent);color:#fff;border-color:var(--accent)}
.ev-pop{position:absolute;right:0;bottom:calc(100% + 10px);width:min(390px,80vw);z-index:45;display:block;
  padding:13px 15px;border-radius:12px;border:1px solid var(--line);background:var(--surface);
  box-shadow:var(--shadow);font-family:var(--sans);text-align:left;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity .16s,transform .16s}
.evmark:hover .ev-pop,.evmark:focus-visible .ev-pop,.evmark:focus-within .ev-pop{
  opacity:1;visibility:visible;pointer-events:auto;transform:none}
.ev-h{display:block;font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent2);padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid var(--hairline)}
.ev-list{display:block}
.ev-i{display:flex;gap:8px;align-items:baseline;padding:5px 0;font-size:12.5px;line-height:1.45}
.ev-n{flex:none;width:17px;height:17px;border-radius:5px;display:grid;place-items:center;
  font-size:9.5px;font-weight:800;color:var(--muted);background:color-mix(in srgb,var(--ink) 7%,transparent)}
.ev-i.ev-primary .ev-n{color:var(--ok);background:color-mix(in srgb,var(--ok) 15%,transparent)}
.ev-i a{flex:1;color:var(--ink-soft);border-bottom:1px solid transparent}
.ev-i a:hover{color:var(--accent-ink);border-bottom-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.ev-i.ev-primary em{flex:none;font-style:normal;font-size:8.5px;font-weight:800;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ok);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent);
  border-radius:99px;padding:1.5px 6px}
.ev-f{display:block;margin-top:9px;padding-top:8px;border-top:1px solid var(--hairline);
  font-size:10.5px;line-height:1.45;color:var(--muted)}
@media(max-width:640px){ .ev-pop{width:min(300px,88vw)} }

/* ---------- MODEL: reader-adjustable arithmetic ---------- */
.md-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:22px;align-items:start}
.md-ins{display:flex;flex-direction:column;gap:16px}
.md-in label{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  font-size:12.5px;color:var(--ink-soft);margin-bottom:7px}
.md-in label b{font-family:var(--serif);font-size:16px;font-weight:650;color:var(--accent2);
  font-variant-numeric:tabular-nums;flex:none}
.md-in input[type=range]{width:100%;accent-color:var(--accent);height:20px;cursor:grab}
.md-in input[type=range]:active{cursor:grabbing}
.md-note{display:block;font-size:11px;line-height:1.45;color:var(--muted);margin-top:5px}
.md-outs{display:flex;flex-direction:column;gap:11px;padding:15px 16px;border-radius:12px;
  background:color-mix(in srgb,var(--accent) 6%,transparent);
  border:1px solid color-mix(in srgb,var(--accent) 22%,var(--hairline))}
.md-out{display:flex;flex-direction:column;gap:2px}
.md-ol{font-size:10px;font-weight:750;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.md-out b{font-family:var(--serif);font-size:clamp(22px,3.4vw,30px);line-height:1.05;font-weight:650;
  color:var(--ink);font-variant-numeric:tabular-nums}
.md-out i{font-style:normal;font-size:11.5px;line-height:1.45;color:var(--muted);margin-top:3px}
@media(max-width:720px){ .md-grid{grid-template-columns:1fr;gap:18px} }

/* ---------- RANK: against the whole archive ---------- */
.rk-standing{margin:0 0 14px;font-size:13.5px;color:var(--muted)}
.rk-standing b{font-family:var(--serif);font-size:19px;color:var(--accent2);font-variant-numeric:tabular-nums}
.rks{display:flex;flex-direction:column;gap:7px}
.rk-row{display:grid;grid-template-columns:22px minmax(96px,1.25fr) 1fr auto;gap:11px;align-items:center;
  padding:7px 9px;border-radius:9px;transition:background .2s}
a.rk-row:hover{background:color-mix(in srgb,var(--ink) 4%,transparent)}
.rk-n{font-size:10.5px;font-weight:800;color:var(--faint);font-variant-numeric:tabular-nums;text-align:right}
.rk-l{font-size:12.5px;color:var(--ink-soft);line-height:1.35}
.rk-track{height:10px;border-radius:99px;background:color-mix(in srgb,var(--ink) 6%,transparent);overflow:hidden}
.rk-track i{display:block;height:100%;border-radius:99px;
  background:color-mix(in srgb,var(--accent) 45%,transparent);transition:width .8s cubic-bezier(.25,1,.35,1)}
.rk-v{font-size:12.5px;font-weight:700;color:var(--ink-soft);font-variant-numeric:tabular-nums;white-space:nowrap}
.rk-row.is-hi{background:color-mix(in srgb,var(--accent) 10%,transparent);
  box-shadow:inset 2px 0 0 var(--accent)}
.rk-row.is-hi .rk-l{color:var(--ink);font-weight:650}
.rk-row.is-hi .rk-track i{background:var(--accent)}
.rk-row.is-hi .rk-v,.rk-row.is-hi .rk-n{color:var(--ink)}
@media(max-width:640px){
  .rk-row{grid-template-columns:20px 1fr auto;gap:8px}
  .rk-track{grid-column:1/-1;order:3}
}

/* ---------- COUNTER: the strongest case against ---------- */
.comp-counter{border-color:color-mix(in srgb,var(--gate) 28%,var(--hairline));
  background:color-mix(in srgb,var(--gate) 4%,transparent)}
.comp-counter .comp-k{color:var(--gate)}
.ct-p{padding:13px 0;border-bottom:1px solid var(--hairline)}
.ct-p:first-of-type{padding-top:4px}
.comp-counter .ct-p:last-of-type{border-bottom:none;padding-bottom:6px}
.ct-p b{display:block;font-size:14.5px;line-height:1.45;color:var(--ink);font-weight:650}
.ct-p p{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.ct-who{display:block;margin-top:7px;font-size:11px;font-weight:600;letter-spacing:.04em;color:var(--muted)}
.ct-v{margin:14px 0 0;padding:12px 14px;border-radius:10px;font-size:13px;line-height:1.6;
  background:color-mix(in srgb,var(--ink) 3.5%,transparent);color:var(--ink-soft)}
.ct-v b{color:var(--ink)}

/* ---------- DOCUMENT viewer ---------- */
.dc-paper{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:var(--surface)}
.dc-head{display:flex;align-items:center;gap:11px;padding:11px 14px;
  background:color-mix(in srgb,var(--ink) 4%,transparent);border-bottom:1px solid var(--line)}
.dc-ic{color:var(--muted);font-size:14px;flex:none}
.dc-head div{flex:1;min-width:0}
.dc-head b{display:block;font-size:12.5px;color:var(--ink);font-weight:650;line-height:1.3}
.dc-head span{display:block;font-size:10.5px;color:var(--muted);margin-top:2px}
.dc-go{flex:none;font-size:10.5px;font-weight:700;color:var(--accent2)}
.dc-body{padding:6px 0;font-family:var(--mono);font-size:12.5px;line-height:1.75}
.dc-line{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:3px 14px 3px 0}
.dc-ln{text-align:right;color:var(--faint);font-size:10.5px;user-select:none;padding-top:2px}
.dc-t{color:var(--ink-soft);white-space:pre-wrap}
.dc-line.is-mark{background:color-mix(in srgb,var(--gold) 13%,transparent);
  box-shadow:inset 3px 0 0 var(--gold)}
.dc-line.is-mark .dc-t{color:var(--ink);font-weight:600}
.dc-line.is-mark .dc-ln{color:var(--gold);font-weight:700}
.dc-read{margin:13px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft);
  padding-left:11px;border-left:2px solid color-mix(in srgb,var(--gold) 55%,transparent)}
.dc-read b{color:var(--gold)}
@media(max-width:640px){ .dc-body{font-size:11.5px} .dc-line{grid-template-columns:28px 1fr;gap:7px} }

/* ---------- "Since publication" update block on an article ---------- */
.updates{margin:34px 0 8px;padding:20px 22px;border-radius:14px;
  border:1px solid color-mix(in srgb,var(--ok) 30%,var(--hairline));
  background:color-mix(in srgb,var(--ok) 4.5%,transparent);font-family:var(--sans)}
.up-head{font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ok);
  margin-bottom:14px}
.up-head span{display:block;margin-top:7px;font-size:12.5px;font-weight:400;letter-spacing:0;
  text-transform:none;color:var(--muted);line-height:1.55}
.up-row{padding:13px 0 13px 13px;border-left:2px solid var(--oc,var(--ok));margin-bottom:11px;
  background:color-mix(in srgb,var(--ink) 2.5%,transparent);border-radius:0 9px 9px 0}
.up-h{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin-bottom:6px}
.up-h time{font-size:11px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.up-oc{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--oc)}
.up-claim{font-size:14px;line-height:1.5;color:var(--ink);font-weight:600}
.up-note{margin:6px 0 0;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.up-src{display:inline-block;margin-top:7px;font-size:11.5px;font-weight:650;color:var(--accent2)}
.up-all{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;color:var(--ok)}

/* ---------- the Claims Ledger page ---------- */
.cl-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin-top:18px}
.cl-st{padding:15px 17px;border:1px solid var(--hairline);border-radius:14px;background:var(--card)}
.cl-st b{display:block;font-family:var(--serif);font-size:27px;line-height:1;color:var(--accent2);
  font-variant-numeric:tabular-nums}
.cl-st span{display:block;margin-top:6px;font-size:11px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--muted)}
.cl-list{display:flex;flex-direction:column;gap:9px;margin-top:18px}
.cl-row{display:grid;grid-template-columns:1.1fr 1fr;gap:20px;padding:15px 17px;border-radius:12px;
  background:var(--card);border:1px solid var(--hairline);
  transition:transform .3s cubic-bezier(.22,1,.32,1),border-color .25s}
.cl-row:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 26%,var(--hairline))}
.cl-row.is-res{border-left:3px solid var(--oc)}
.cl-claim{font-size:14px;line-height:1.5;color:var(--ink);font-weight:600}
.cl-meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:9px;margin-top:8px;font-size:11.5px;color:var(--muted)}
.cl-kind{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  border:1px solid color-mix(in srgb,var(--gold) 35%,transparent);border-radius:99px;padding:2px 8px}
.cl-meta a{color:var(--ink-soft);border-bottom:1px solid transparent}
.cl-meta a:hover{color:var(--accent-ink);border-bottom-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.cl-res{display:flex;flex-direction:column;gap:5px}
.cl-open{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.cl-oc{font-size:9.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--oc)}
.cl-note{font-size:12.5px;line-height:1.55;color:var(--muted)}
.cl-note b{color:var(--accent2);font-weight:650}
.cl-res time{font-size:10.5px;color:var(--faint);font-variant-numeric:tabular-nums}
@media(max-width:760px){ .cl-row{grid-template-columns:1fr;gap:11px} }

@media(prefers-reduced-motion:no-preference){
  /* scaleX, not width: the width is inline per-row, and a !important width
     override here would win over .rv-in and leave every bar collapsed. */
  .rv .rk-track i{transform:scaleX(0);transform-origin:left center}
  .rv-in .rk-track i{transform:scaleX(1);
    transition:transform .85s cubic-bezier(.25,1,.35,1) calc(var(--rv-d,0ms) + 150ms)}
  .rv .up-row,.rv .ct-p{opacity:0;transform:translateY(8px)}
  .rv-in .up-row,.rv-in .ct-p{opacity:1;transform:none;
    transition:opacity .5s ease var(--rv-d,0ms),transform .6s cubic-bezier(.22,1,.32,1) var(--rv-d,0ms)}
}
@media(prefers-reduced-motion:reduce){ .ev-pop,.md-in input[type=range]{transition:none} }

/* ---------- mobile: hovercards become bottom sheets ----------
   An absolutely-positioned card anchored to an inline chip cannot avoid the
   viewport edge on a narrow screen -- centering on the chip overflows right when
   the chip sits late in a line, and anchoring right overflows left when it sits
   early. On phones both popovers detach to a fixed bottom sheet instead, which
   is edge-safe by construction and easier to hit with a thumb. */
@media(max-width:640px){
  .ent-card,.ev-pop{
    position:fixed;left:12px;right:12px;bottom:14px;top:auto;width:auto;
    transform:translateY(8px);max-height:60vh;overflow-y:auto}
  .ent:hover .ent-card,.ent:focus-visible .ent-card,.ent:focus-within .ent-card,
  .evmark:hover .ev-pop,.evmark:focus-visible .ev-pop,.evmark:focus-within .ev-pop{
    transform:translateY(0)}
  .ent-card::after{display:none} /* the little arrow points at nothing once detached */
}

/* ============================================================================
   MOBILE DENSITY PASS
   The complaint was that the phone view is "too zoomed in" and cluttered at the
   same time, which sounds contradictory and is not: every type ramp on this site
   was built with a desktop floor, and the floors are what a phone actually gets.
   .mast-hero h1 is clamp(36px,5vw,56px) -- at 390px wide, 5vw is 19.5px, so the
   clamp pins it to 36px, a size chosen for a 1280px canvas. Same story for the
   18px hero paragraph, the 28px container gutters and the 42px kicker rhythm.
   Big elements crammed into a small frame reads as clutter even though nothing
   is technically overlapping.
   The fix is to lower the floors and tighten INSIDE groups while keeping the gaps
   BETWEEN groups, so more fits per screen without the page feeling packed.
   Appended last on purpose: equal specificity, so source order decides.
   ========================================================================== */
@media (max-width:840px){
  .container{ padding:0 20px; }
}
@media (max-width:640px){
  body{ font-size:15px; line-height:1.6; }
  .container{ padding:0 16px; }

  /* Section rhythm: the 42px kicker margin alone was eating a fifth of a phone
     screen every time a new section started. */
  .kicker{ margin:26px 0 14px; font-size:10px; letter-spacing:.18em; gap:9px; }
  .edition{ padding:16px 0 12px; }
  .edition .date{ font-size:13.5px; }

  /* Page heads. These floors are the single biggest win on a phone. */
  .mast-hero{ padding:28px 0 12px; }
  .mast-hero .over{ font-size:10px; letter-spacing:.2em; margin-bottom:10px; }
  .mast-hero h1{ font-size:clamp(25px,7.4vw,34px); line-height:1.14; margin:0 0 12px; }
  .mast-hero p{ font-size:15px; line-height:1.62; }

  /* Lead story + rail */
  .top-slot{ gap:20px; padding:20px 0 24px; }
  .feature h3{ font-size:clamp(22px,6.4vw,30px); line-height:1.16; margin:14px 0 8px; }
  .feature .dek{ font-size:14.5px; line-height:1.5; margin:0 0 11px; }
  .feature .art .glyph{ font-size:150px; }
  .rail-item{ padding:12px 2px; }
  .rail-item h4{ font-size:15.5px; line-height:1.3; margin:7px 0 6px; }

  /* Two cards per row instead of one. A 16:10 thumbnail plus a two-line
     headline fits twice over at 390px once the type ramp is sane, which is the
     difference between seeing two stories per screen and seeing half of one. */
  .grid{ grid-template-columns:1fr 1fr; gap:20px 14px; }
  .card{ gap:8px; }
  .card h3{ font-size:15.5px; line-height:1.28; }
  .card .dek{ font-size:12.5px; line-height:1.45;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  .card .art .glyph{ font-size:84px; }
  .byline{ font-size:11.5px; gap:7px; }
  .byline .av{ width:21px; height:21px; font-size:8.5px; }
  .pill{ font-size:9px; padding:2px 7px; }

  /* Article body: the measure is the constraint on a phone, not the size. */
  .prose h2{ font-size:20px; line-height:1.28; }
  .prose p{ font-size:15px; line-height:1.68; }

  /* iOS zooms the whole page when a focused input is under 16px. Everything
     above shrinks; form controls deliberately do not. */
  input,select,textarea{ font-size:16px; }
}
@media (max-width:430px){
  /* Below this a two-up grid starts truncating headlines to nothing. */
  .grid{ grid-template-columns:1fr; gap:18px; }
  .card h3{ font-size:17px; }
  .card .dek{ -webkit-line-clamp:2; }
}

/* ---------------------------------------------------------------------------
   ABOVE-THE-FOLD RECLAIM (phones)
   Measured, not guessed: at 390x844 the first screen was 100% furniture. The
   status ribbon wrapped to four lines, then the masthead, then the edition line,
   then the Briefing chip, then the Primer banner -- roughly 840px of chrome
   before the first headline, on an 844px screen. A reader arriving on a phone
   saw no journalism at all without scrolling.
   Nothing is removed. The furniture is just made to behave like furniture.
   ------------------------------------------------------------------------- */
@media (max-width:640px){
  /* THE CROP (fixed 2026-08-14, owner: "every top line of text gets cropped a
     bit along the bottom"). The clamp was right — this ribbon really did eat a
     phone screen — but its box was exactly two line-heights tall, so the second
     line's descenders (p, g, y) were shaved off by a pixel or two. The clamp
     stays; the box now carries the extra fifth of a line those descenders need,
     and .proto-more drops the ribbon's tail so it fits in two lines honestly
     instead of being cut off mid-sentence. */
  /* THREE lines, not two. The claim genuinely needs three on a 360-390px
     screen, and the choice was: cut the sentence off, or give it the line it
     needs. A masthead claim that reads "...NO HUMAN IN THE PUBLISHI" is worse
     than 14 extra pixels. The tail and lead-in still drop (below), so this is
     three lines of the claim itself and nothing else. */
  .proto{ font-size:9.5px; letter-spacing:.06em; padding:6px 12px 7px; line-height:1.5;
    display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
  /* Two spans come off on a phone so the claim FITS in two lines instead of
     being clamped mid-word: the "founding weeks" lead-in and the offers tail.
     What is left is the sentence that actually distinguishes this publication. */
  .proto-more,.proto-lead{ display:none; }

  header.site .bar{ min-height:0; padding:8px 16px 0; }
  .logo{ font-size:15px; }
  .logo small{ font-size:6px; letter-spacing:.26em; margin-top:3px; }
  nav.top{ padding:4px 0 7px; margin-top:2px; }
  nav.top a,nav.top .sec-btn{ font-size:12.5px; padding:6px 9px; }

  /* The motto is a nice line on a desktop and pure vertical cost on a phone,
     where it duplicates what the masthead already says. */
  .edition{ padding:12px 0 9px; }
  .edition .motto{ display:none; }

  /* Both promos become single-line strips instead of stacked blocks. */
  .home-chips{ margin:8px 0 0; }
  .brief-chip{ padding:9px 13px; gap:9px; font-size:13px; }
  .brief-chip b{ font-size:13.5px; }
  .brief-chip span{ font-size:11.5px; }
  .primer-banner{ margin:10px 0 2px; padding:10px 12px; gap:12px; align-items:center; }
  .pb-art{ width:34px; height:44px; border-radius:6px; }
  .pb-txt b{ font-size:14px; margin-bottom:0; line-height:1.3; }
}

/* Two fixes the phone sweep turned up, both caused by desktop-era assumptions:
   1. -webkit-line-clamp alone did not bound the ribbon's BOX, so a clipped third
      line still reserved height and bled under the sticky header. Cap the height.
   2. The nav rail bleeds to the edges with a -20px margin that assumed a 20px
      gutter; the phone gutter is now 16px, so the rail started 4px off-screen and
      the first destination read as "reboard". Match the gutter exactly. */
@media (max-width:640px){
  /* 3 lines x 1.5 line-height = 4.5em of text; the box gets 4.75em so
     descenders are never shaved. NEVER set this equal to lines x line-height:
     that equality is exactly what cropped the ribbon for weeks. */
  .proto{ max-height:4.75em; }
  nav.top{ margin:2px -16px 0; padding-left:16px; padding-right:16px; }
}

/* ================= THE BUZZ · momentum, filters, coverage ====================
   The momentum bars are a before/after pair, not two categories: "previous 7
   days" is a reference the reader compares against, so it wears a neutral, and
   only the current period carries the accent. Giving both a categorical hue
   would imply they are peers and burn the identity channel on a time axis. */
.bz-momentum{ margin:20px 0 6px; padding:16px 18px; border:1px solid var(--line);
  border-radius:16px; background:var(--surface); max-width:640px; }
@media(max-width:720px){ .bz-momentum{ max-width:none; } }
.bzm-head b{ display:block; font-family:var(--serif); font-size:17px; font-weight:640; color:var(--ink); }
.bzm-head span{ display:block; margin-top:4px; font-size:12.5px; line-height:1.55; color:var(--muted); max-width:74ch; }
.bzm-cols{ display:grid; grid-template-columns:1fr 1fr; gap:16px 30px; margin-top:14px; }
.bzm-l{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  font-weight:700; margin-bottom:9px; }
.bzm-list{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.bzm-list li{ display:flex; align-items:center; gap:9px; font-size:13px; }
.bzm-t{ min-width:104px; flex:none; text-align:left; background:none; border:0; padding:0; cursor:pointer;
  font:inherit; font-weight:600; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bzm-t:hover{ color:var(--accent2); }
/* Two thin bars stacked in one track: the reference sits behind, the current
   period in front, with a 2px surface gap so the fills never touch. */
.bzm-bars{ flex:1; min-width:36px; height:14px; position:relative; }
.bzm-bars i{ position:absolute; left:0; height:5px; border-radius:3px; }
.bzm-prev{ top:0; background:var(--faint); opacity:.55; }
.bzm-now{ top:7px; background:var(--accent); }
.bzm-list b{ min-width:30px; text-align:right; font-variant-numeric:tabular-nums; font-size:12.5px; color:var(--faint); }
.bzm-list b.up{ color:var(--ok); } .bzm-list b.down{ color:var(--muted); }
.bzm-key{ display:flex; gap:14px; margin-top:12px; font-size:11.5px; color:var(--muted); }
.bzm-key span{ display:inline-flex; align-items:center; gap:6px; }
.bzm-sw{ width:14px; height:5px; border-radius:3px; display:inline-block; }
.bzm-sw.prev{ background:var(--faint); opacity:.55; } .bzm-sw.now{ background:var(--accent); }

.bz-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:18px 0 4px; }
.bzf-l{ font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:var(--faint);
  font-weight:700; margin-right:4px; }
.bzf{ font:inherit; font-size:12.5px; font-weight:550; cursor:pointer; color:var(--muted);
  background:transparent; border:1px solid var(--line); border-radius:99px; padding:5px 11px;
  display:inline-flex; align-items:center; gap:6px; transition:color .14s,border-color .14s,background .14s; }
.bzf:hover{ color:var(--ink); border-color:var(--muted); }
.bzf.on{ color:var(--accent-ink); border-color:var(--accent); background:color-mix(in srgb,var(--accent) 14%,transparent); }
.bzf em{ font-style:normal; font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.bzf.on em{ color:var(--accent2); }
.bz-fnote{ margin:12px 0 2px; font-size:13px; color:var(--muted); }
.bz-fnote b{ color:var(--ink); }
.bz-clear{ font:inherit; font-size:13px; background:none; border:0; padding:0; cursor:pointer;
  color:var(--accent2); text-decoration:underline; text-underline-offset:2px; }

.bz-cover{ display:flex; flex-wrap:wrap; align-items:baseline; gap:6px 10px; margin-top:10px;
  padding-top:10px; border-top:1px dashed var(--hairline); }
.bzc-k{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--accent2); border:1px solid var(--accent); border-radius:4px; padding:2px 6px; flex:none; }
.bz-cover a{ font-size:12.5px; line-height:1.4; color:var(--ink-soft); text-decoration:underline;
  text-decoration-color:var(--line); text-underline-offset:2px; }
.bz-cover a:hover{ color:var(--accent2); text-decoration-color:var(--accent); }

@media (max-width:720px){
  .bz-momentum{ padding:13px 14px; }
  .bzm-cols{ grid-template-columns:1fr; gap:14px; }
  .bzm-t{ min-width:92px; }
  .bz-filters{ flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none;
    margin-left:-16px; margin-right:-16px; padding:0 16px 4px; }
  .bz-filters::-webkit-scrollbar{ display:none; }
  .bzf{ flex:none; }
}

/* The hero's aurora glow is an absolutely positioned pseudo bleeding 12% past
   each edge. On a desktop the page gutters absorb it; on a phone it pushed the
   document 16px wider than the viewport, which is what makes a page rock
   sideways under a thumb. It was already within a pixel of overflowing before
   the gutters narrowed, so this is a latent bug being closed, not a new one.
   Pinned to the hero's own box on phones -- the 34px blur still reads as a glow
   without any hard edge, because the gradient stops fade well inside. */
@media (max-width:640px){
  .mast-hero::before{ left:0; right:0; }
}

/* ================= RESOURCES · one spine, then intent =======================
   The page now leads with the lab directory grouped the way the field splits,
   and everything else sits under it in the order a reader wants it: learn it,
   follow it, use it. The old "Company dossiers" chip pile is gone -- it pointed
   at exactly the dossiers the lab cards already link to, so it was the same
   information twice competing for the same attention. */
.res-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:20px 0 4px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.rs-cell{ background:var(--surface); padding:14px 16px; }
.rs-cell b{ display:block; font-family:var(--serif); font-size:26px; line-height:1; font-weight:640;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.rs-cell span{ display:block; margin-top:5px; font-size:11.5px; line-height:1.4; color:var(--muted); }

.res-lede{ color:var(--muted); font-size:14px; line-height:1.6; margin:-8px 0 18px; max-width:74ch; }
.res-sub{ color:var(--muted); font-size:13px; line-height:1.55; margin:0 0 12px; max-width:74ch; }

.labg{ margin:0 0 26px; }
.labg-h{ display:flex; align-items:baseline; gap:12px; margin:0 0 12px; }
.labg-l{ font-size:11px; letter-spacing:.16em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); }
.labg-n{ font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.labg-h::after{ content:""; flex:1; height:1px; background:var(--hairline); }
.labg-thin{ margin-top:6px; }

.res-nav .rn-sub{ padding-left:14px; font-size:12.5px; opacity:.8; }

.res-tiles{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.res-tile{ display:flex; flex-direction:column; gap:7px; padding:16px 17px; border:1px solid var(--line);
  border-radius:14px; background:var(--surface); transition:border-color .16s,transform .16s; }
.res-tile:hover{ border-color:var(--accent); transform:translateY(-2px); }
.rt-k{ font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--accent2); }
.res-tile b{ font-family:var(--serif); font-size:17px; line-height:1.26; font-weight:640; color:var(--ink); }
.rt-d{ font-size:12.5px; line-height:1.55; color:var(--muted); flex:1; }
.rt-go{ font-size:12.5px; font-weight:650; color:var(--accent2); margin-top:2px; }

@media (max-width:900px){ .res-tiles{ grid-template-columns:1fr 1fr; } }
@media (max-width:640px){
  .res-stats{ grid-template-columns:1fr 1fr; }
  .rs-cell{ padding:11px 13px; } .rs-cell b{ font-size:21px; }
  .res-tiles{ grid-template-columns:1fr; gap:11px; }
  .res-tile{ padding:13px 14px; }
  .labg{ margin-bottom:20px; }
}

/* ================= AI EXTENSIONS (#/extensions) =============================
   The connector encyclopedia. Same visual family as the Resources spine —
   surface cards on hairlines, serif names — plus a kind-chip system so a
   reader can tell an API from an MCP server from a framework at a glance
   without reading a word. Chip colors ride color-mix over --kc so all
   eighteen appearances keep them legible for free. */
.ext-search{ display:flex; align-items:center; gap:14px; margin:18px 0 6px; }
.ext-search input{ flex:1; min-width:0; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:12px 16px; font:inherit; font-size:14px; color:var(--ink); outline:none;
  transition:border-color .16s; }
.ext-search input:focus{ border-color:var(--accent); }
.ext-search input::placeholder{ color:var(--faint); }
#ext-count{ flex:none; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.res-nav .rn-n{ margin-left:6px; color:var(--faint); font-size:10.5px; font-variant-numeric:tabular-nums; font-style:normal; }
.xs-ic{ margin-right:8px; color:var(--accent2); }
.ext-sec{ margin:0 0 30px; }
.ext-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(270px,1fr)); gap:12px; }
.ext-card{ display:flex; flex-direction:column; gap:6px; padding:14px 15px; border:1px solid var(--line);
  border-radius:12px; background:var(--surface); transition:border-color .16s,transform .16s; }
.ext-card:hover{ border-color:var(--accent); transform:translateY(-2px); }
.xc-top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.xc-top b{ font-family:var(--serif); font-size:15.5px; line-height:1.25; font-weight:640; color:var(--ink); }
.xc-kind{ flex:none; font-size:9px; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  padding:3px 8px; border-radius:99px; color:var(--kc,var(--accent2));
  background:color-mix(in srgb,var(--kc,var(--accent2)) 13%,transparent);
  border:1px solid color-mix(in srgb,var(--kc,var(--accent2)) 32%,transparent); white-space:nowrap; }
.xk-api{ --kc:#6cb6f0; } .xk-mcp{ --kc:#8b7cf7; } .xk-skill{ --kc:#f0b46c; }
.xk-connector{ --kc:#6cd8d0; } .xk-framework{ --kc:#7dd8a8; } .xk-agent{ --kc:#e888b0; }
.xk-runtime{ --kc:#6cd8d0; } .xk-tool{ --kc:#c8b6f0; } .xk-registry{ --kc:#f0d86c; }
.xk-platform{ --kc:#9ab0f0; } .xk-standard{ --kc:#8b7cf7; }
.xc-by{ font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); font-weight:650; }
.xc-desc{ font-size:12.5px; line-height:1.55; color:var(--muted); margin:0; flex:1; }
.xc-foot{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:2px; }
.xc-foot > a{ font-size:12px; font-weight:650; color:var(--accent2); text-decoration:none; }
.xc-foot > a:hover{ text-decoration:underline; }
.xc-tags{ display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end; }
.xc-tags i{ font-style:normal; font-size:9.5px; color:var(--faint); border:1px solid var(--hairline);
  border-radius:99px; padding:2px 7px; white-space:nowrap; }
@media (max-width:640px){
  .ext-grid{ grid-template-columns:1fr; gap:10px; }
  .ext-search{ flex-direction:column; align-items:stretch; gap:8px; }
  #ext-count{ text-align:right; }
}

/* ================= 2026-08-14 DOPAMINE PASS ================================
   One coordinated layer: the homepage wire, the reading experience, the
   scoreboard fold, the grid zoom chrome, tilt v2, buzz shimmer. Everything
   rides the existing tokens (var(--accent), --surface, --hairline) so all
   eighteen appearances stay coherent for free. */

/* ---- THE WIRE (homepage right rail) ---- */
.wire-card{ position:relative; border:1px solid var(--line); border-radius:14px; background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,var(--surface)),var(--surface));
  padding:13px 15px 11px; overflow:hidden; min-height:118px; }
.wire-card::before{ content:""; position:absolute; inset:-40% -20% auto; height:120%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--accent) 16%,transparent),transparent 70%);
  pointer-events:none; animation:wr-breathe 7s ease-in-out infinite alternate; }
@keyframes wr-breathe{ from{opacity:.4; transform:translateX(-6%)} to{opacity:1; transform:translateX(6%)} }
.wr-head{ display:flex; align-items:center; gap:8px; font-size:9.5px; letter-spacing:.22em;
  font-weight:700; color:var(--accent2); margin-bottom:2px; }
.wr-count{ margin-left:auto; color:var(--faint); letter-spacing:.06em; font-variant-numeric:tabular-nums; }
.wr-slide{ display:none; flex-direction:column; gap:5px; padding:8px 0 6px; text-decoration:none; min-height:74px; }
.wr-slide.on{ display:flex; animation:wr-in .45s cubic-bezier(.2,.7,.2,1); }
@keyframes wr-in{ from{opacity:0; transform:translateY(7px)} to{opacity:1; transform:none} }
.wr-k{ font-size:10px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted); }
.wr-big{ font-family:var(--serif); font-size:23px; line-height:1.1; font-weight:640; color:var(--ink); }
.wire-card .cd-time{ font-family:var(--serif); font-size:23px; line-height:1.1; font-weight:640;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.wr-txt{ font-size:13px; line-height:1.5; color:var(--ink-soft); }
.wr-sub{ font-size:11.5px; color:var(--muted); }
.wr-dots{ display:flex; gap:5px; padding-top:2px; }
.wr-dots i{ width:5px; height:5px; border-radius:99px; background:var(--hairline); transition:all .3s; }
.wr-dots i.on{ background:var(--accent2); width:14px; }

/* ---- mini scoreboard (homepage rail) ---- */
.mini-sb{ display:block; border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:12px 15px; text-decoration:none; transition:border-color .16s,transform .16s; }
.mini-sb:hover{ border-color:var(--accent); transform:translateY(-2px); }
.msb-h{ font-size:9.5px; letter-spacing:.2em; font-weight:700; color:var(--accent2); margin-bottom:8px; }
.msb-row{ display:flex; align-items:center; gap:8px; padding:3.5px 0; }
.msb-r{ flex:none; width:14px; font-size:10.5px; color:var(--faint); font-variant-numeric:tabular-nums; }
.msb-m{ flex:none; width:34%; font-size:12px; font-weight:650; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msb-track{ flex:1; height:5px; border-radius:99px; background:var(--hairline); overflow:hidden; }
.msb-track i{ display:block; height:100%; border-radius:99px;
  background:linear-gradient(90deg,var(--accent),var(--accent2)); }
.msb-row b{ flex:none; font-size:11.5px; color:var(--muted); font-variant-numeric:tabular-nums; }
.msb-go{ display:block; margin-top:7px; font-size:11.5px; font-weight:650; color:var(--accent2); }

/* ---- /usage hero total ---- */
.uhero-total{ display:flex; align-items:center; gap:22px; margin:20px 0 8px; padding:20px 24px;
  border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line)); border-radius:16px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 10%,var(--surface)),var(--surface) 55%); }
.ut-num{ font-family:var(--serif); font-size:clamp(38px,7vw,56px); line-height:1; font-weight:640;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.ut-cap{ font-size:13px; line-height:1.55; color:var(--muted); max-width:52ch; }
@media (max-width:640px){ .uhero-total{ flex-direction:column; align-items:flex-start; gap:8px; padding:16px 18px; } }

/* ---- scoreboard: scan log fold + podium shine ---- */
.sb-log{ margin-top:26px; border:1px solid var(--line); border-radius:14px; background:var(--surface); overflow:hidden; }
.sb-log summary{ display:flex; align-items:center; gap:12px; padding:14px 18px; cursor:pointer; list-style:none; }
.sb-log summary::-webkit-details-marker{ display:none; }
.sbl-t{ font-size:11px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--ink-soft); white-space:nowrap; }
.sbl-n{ font-size:12px; color:var(--muted); }
.sbl-caret{ margin-left:auto; color:var(--faint); transition:transform .2s; }
.sb-log[open] .sbl-caret{ transform:rotate(180deg); }
.sbl-body{ padding:4px 18px 14px; border-top:1px solid var(--hairline); max-height:420px; overflow:auto; }
.sbl-body p{ font-size:12px; line-height:1.6; color:var(--muted); margin:10px 0; padding-left:14px;
  border-left:2px solid var(--hairline); }
.sbl-body p:first-child{ border-left-color:var(--accent2); color:var(--ink-soft); }
.sbl-foot{ font-style:italic; }
.sb-podium{ position:relative; overflow:hidden; }
.sb-podium::after{ content:""; position:absolute; top:0; bottom:0; width:46%; left:-60%;
  background:linear-gradient(105deg,transparent,color-mix(in srgb,var(--accent) 9%,transparent) 50%,transparent);
  animation:sb-shine 6s ease-in-out infinite; pointer-events:none; }
.sb-p2::after{ animation-delay:.9s; } .sb-p3::after{ animation-delay:1.8s; }
@keyframes sb-shine{ 0%,55%{ left:-60%; } 75%,100%{ left:120%; } }
.sb-p1 .sb-rank{ background:linear-gradient(135deg,#f6d276,#c99b3f); color:#231a05; }
.sb-p2 .sb-rank{ background:linear-gradient(135deg,#dfe3ee,#9aa2b6); color:#181b23; }
.sb-p3 .sb-rank{ background:linear-gradient(135deg,#e2a878,#a96a3d); color:#211203; }

/* ---- the grid: split layout, zoom chrome, filter legend, spec chips ---- */
.gd-split{ display:grid; grid-template-columns:minmax(0,1.7fr) minmax(260px,1fr); gap:16px; align-items:start; }
@media (max-width:860px){ .gd-split{ grid-template-columns:1fr; } }
.gd-figure{ position:relative; }
.gd-svg{ touch-action:pan-y; cursor:grab; }
.gd-svg:active{ cursor:grabbing; }
.gd-zoom{ position:absolute; right:10px; bottom:10px; display:flex; flex-direction:column; gap:6px; }
.gd-zoom button{ width:34px; height:34px; border-radius:10px; border:1px solid var(--line);
  background:color-mix(in srgb,var(--surface) 88%,transparent); color:var(--ink); font-size:17px;
  line-height:1; cursor:pointer; backdrop-filter:blur(6px); transition:border-color .15s,transform .15s; }
.gd-zoom button:hover{ border-color:var(--accent); transform:scale(1.06); }
.gd-lg{ font:inherit; font-size:12px; display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  border:1px solid var(--hairline); background:var(--surface); color:var(--muted);
  border-radius:99px; padding:5px 12px; transition:all .15s; }
.gd-lg em{ font-style:normal; color:var(--faint); font-variant-numeric:tabular-nums; }
.gd-lg:hover{ border-color:var(--accent); color:var(--ink); }
.gd-lg.on{ border-color:var(--accent); color:var(--ink);
  background:color-mix(in srgb,var(--accent) 12%,var(--surface)); }
.gd-lg-hint{ font-size:11px; color:var(--faint); margin-left:auto; }
.gd-specs{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:10px 0 2px; }
.gd-spec{ display:flex; flex-direction:column; gap:1px; border:1px solid var(--hairline);
  border-radius:10px; padding:7px 10px; position:relative; }
.gd-spec i{ position:absolute; right:8px; top:6px; font-style:normal; color:var(--accent2); opacity:.8; }
.gd-spec em{ font-style:normal; font-size:9px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--faint); font-weight:700; }
.gd-spec b{ font-size:12.5px; color:var(--ink); line-height:1.3; }

/* ---- reading experience: theme-tinted prose (rides --sec from viewArticle) ---- */
.article .prose .lead-p::first-letter{
  font-family:var(--serif); font-weight:640; font-size:3.05em; line-height:.82;
  float:left; padding:5px 9px 0 0; color:var(--sec,var(--accent2));
}
.article .prose .mk{
  background:linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--sec,var(--accent)) 34%,transparent) 55%);
  padding:0 2px; border-radius:2px; color:inherit;
}
.article .prose .acc{ color:var(--sec,var(--accent)); font-weight:680; }
.article .prose .ul,.article .prose u{
  text-decoration:none; font-style:normal;
  background:linear-gradient(90deg,color-mix(in srgb,var(--sec,var(--accent)) 75%,transparent),color-mix(in srgb,var(--sec,var(--accent)) 30%,transparent)) bottom left / 100% 2px no-repeat;
  padding-bottom:1.5px;
}
.article .prose .fig{ font-variant-numeric:tabular-nums; font-weight:680; color:var(--ink); }
/* PULL QUOTES (2026-08-14, owner: "some texts would be pulled and given its
   own focus and its own font"). Every {type:"quote"} block renders as a true
   magazine pull — oversized Fraunces italic, a giant desk-colored quote glyph,
   pulled wider than the text column on desktop so it breaks the measure. */
.article .prose blockquote{
  position:relative; margin:44px 0; padding:18px 30px 18px 64px;
  border:0; border-left:3px solid var(--sec,var(--accent));
  font-family:var(--serif); font-size:24px; line-height:1.34; font-weight:560;
  font-style:italic; letter-spacing:-.005em; color:var(--ink);
  background:linear-gradient(90deg,color-mix(in srgb,var(--sec,var(--accent)) 8%,transparent),transparent 72%);
  border-radius:0 14px 14px 0;
}
.article .prose blockquote::before{
  content:"“"; position:absolute; left:14px; top:2px;
  font-family:var(--serif); font-style:normal; font-size:64px; line-height:1;
  color:var(--sec,var(--accent)); opacity:.85;
}
.article .prose blockquote .mk{ background:none; }
/* the wide pull only where the container actually has slack — a negative
   margin at narrow widths becomes a horizontal scrollbar, not drama */
@media (min-width:1100px){
  .article .prose blockquote{ margin-left:-34px; margin-right:-34px; }
}
@media (max-width:900px){
  .article .prose blockquote{ margin:34px 0; font-size:20px; padding:14px 18px 14px 52px; }
  .article .prose blockquote::before{ font-size:48px; left:10px; }
}

/* MARGIN NOTES — {{note: ...}}. Its own voice: smaller serif italic, desk-color
   sidebar glyph. Floats into the right margin at very wide widths where the
   column leaves room; an inset card everywhere else. */
.article .prose .mnote{
  display:block; margin:14px 0; padding:11px 14px 11px 34px; position:relative;
  font-family:var(--serif); font-style:italic; font-size:14.5px; line-height:1.55;
  color:var(--ink-soft); border:1px solid color-mix(in srgb,var(--sec,var(--accent)) 26%,var(--line));
  border-radius:12px; background:color-mix(in srgb,var(--sec,var(--accent)) 5%,var(--surface));
}
.article .prose .mnote i{
  position:absolute; left:12px; top:10px; font-style:normal;
  color:var(--sec,var(--accent)); font-size:13px;
}
@media (min-width:1360px){
  .article .prose .mnote{
    float:right; clear:right; width:250px; margin:4px -290px 14px 22px;
  }
}

/* BIG-NUMBER CALLOUTS — %%figure|caption%%. The one number that IS the story,
   set huge in serif with its caption underneath. */
.article .prose .bignum{
  display:block; margin:26px auto; padding:18px 26px; max-width:420px; text-align:center;
  border:1px solid color-mix(in srgb,var(--sec,var(--accent)) 30%,var(--line)); border-radius:16px;
  background:
    radial-gradient(140px 70px at 50% 0%,color-mix(in srgb,var(--sec,var(--accent)) 12%,transparent),transparent 75%),
    var(--surface);
}
.article .prose .bignum b{
  display:block; font-family:var(--serif); font-weight:640; font-size:clamp(34px,5vw,46px);
  line-height:1.05; color:var(--sec,var(--accent)); font-variant-numeric:tabular-nums;
}
.article .prose .bignum i{
  display:block; margin-top:6px; font-style:normal; font-size:12px; letter-spacing:.08em;
  text-transform:uppercase; font-weight:650; color:var(--muted);
}

/* Lede line in soft small caps — the classic magazine open, pure CSS. */
.article .prose .lead-p::first-line{
  font-variant-caps:small-caps; letter-spacing:.035em; font-weight:560;
}
.article .prose h2{ position:relative; padding-left:16px; }
.article .prose h2::before{ content:""; position:absolute; left:0; top:.18em; bottom:.14em; width:4px;
  border-radius:99px; background:linear-gradient(180deg,var(--sec,var(--accent)),transparent); }

/* ---- buzz shimmer (polish only, no structure change) ---- */
.bz-card{ transition:border-color .16s,transform .16s,box-shadow .16s; }
.bz-card:hover{ transform:translateY(-3px); border-color:var(--accent);
  box-shadow:0 10px 30px -18px color-mix(in srgb,var(--accent) 55%,transparent); }

/* ---- tilt v2: bigger, two-tone, with an ambient mode ---- */
@media (hover:none),(pointer:coarse){
  .tilt-glow #rtfc-cursor.tilt{
    display:block; width:340px; height:340px; margin:-170px 0 0 -170px;
    background:
      radial-gradient(circle at 42% 42%,color-mix(in srgb,var(--accent2) 20%,transparent),transparent 58%),
      radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 64%);
  }
  .tilt-glow #rtfc-cursor.tilt.on{ opacity:.85; }
  .tilt-glow #rtfc-cursor.tilt.amb{ opacity:.34; }
}
.tilt-hint{ position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:80;
  display:flex; gap:7px; align-items:center; font-size:13px; color:var(--ink);
  border:1px solid color-mix(in srgb,var(--accent) 45%,var(--line)); border-radius:99px;
  background:color-mix(in srgb,var(--surface) 92%,transparent); backdrop-filter:blur(8px);
  padding:9px 16px; box-shadow:0 12px 34px -14px color-mix(in srgb,var(--accent) 60%,transparent);
  animation:th-in .5s cubic-bezier(.2,.7,.2,1); pointer-events:none; }
.tilt-hint.out{ opacity:0; transition:opacity .7s; }
@keyframes th-in{ from{ opacity:0; transform:translate(-50%,10px); } to{ opacity:1; transform:translate(-50%,0); } }

@media (prefers-reduced-motion:reduce){
  .wire-card::before,.sb-podium::after{ animation:none; }
  .wr-slide.on{ animation:none; }
}

/* ---- THE MAGAZINE MODULE (homepage) ----
   The one paid surface on the site, given a real slot instead of a nav link
   that fell off the right edge of a phone. Editorial, not an ad: the cover at
   full weight, the contents stated from the issue's own metadata. */
.mag-home{ position:relative; display:grid; grid-template-columns:minmax(0,240px) 1fr; gap:28px;
  align-items:center; margin:34px 0; padding:26px 28px; border:1px solid var(--line);
  border-radius:20px; overflow:hidden; background:var(--surface); }
.mag-home::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.20;
  background-image:var(--cov); background-size:cover; background-position:center;
  filter:blur(38px) saturate(1.5); }
.mag-home::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(100deg,var(--surface) 34%,color-mix(in srgb,var(--surface) 72%,transparent)); }
.mag-home > *{ position:relative; z-index:1; }
.mh-cover{ display:block; border-radius:12px; overflow:hidden; box-shadow:0 26px 60px -26px rgba(0,0,0,.8);
  transition:transform .2s; }
.mh-cover:hover{ transform:translateY(-3px) rotate(-.6deg); }
.mh-cover img{ display:block; width:100%; height:auto; }
.mh-k{ font-size:10px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--accent2); margin-bottom:9px; }
.mag-home h2{ font-family:var(--serif); font-size:clamp(24px,3.4vw,34px); line-height:1.1;
  font-weight:640; margin:0 0 8px; color:var(--ink); }
.mh-tag{ font-size:14.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 12px; max-width:56ch; }
.mh-facts{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 8px; padding:0; margin:0 0 16px; }
.mh-facts li{ font-size:11.5px; color:var(--muted); border:1px solid var(--hairline);
  border-radius:99px; padding:4px 11px; }
.mh-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; }
.mh-go{ display:inline-flex; align-items:center; font-size:13.5px; font-weight:700; text-decoration:none;
  color:var(--accent-ink,#fff); background:linear-gradient(120deg,var(--accent),var(--accent2));
  border-radius:99px; padding:10px 20px; transition:transform .16s,box-shadow .16s; }
.mh-go:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent) 75%,transparent); }
.mh-alt{ font-size:13px; font-weight:650; color:var(--accent2); text-decoration:none; }
.mh-alt:hover{ text-decoration:underline; }
.mh-note{ flex-basis:100%; font-size:11.5px; line-height:1.5; color:var(--muted); }
@media (max-width:760px){
  .mag-home{ grid-template-columns:1fr; gap:18px; padding:20px; text-align:left; }
  .mh-cover{ max-width:190px; }
}

/* ================= THE MAGAZINE PAGE (overhaul 2026-08-14) =================
   The storefront for the only paid thing on the site. Every figure on it is
   derived in viewMagazine(); this file only has to make it look like something
   worth paying for. */
.mag-stats{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; margin:22px 0 6px;
  background:var(--line); border:1px solid var(--line); border-radius:14px; overflow:hidden; }
.ms-cell{ background:var(--surface); padding:15px 17px; }
.ms-cell b{ display:block; font-family:var(--serif); font-size:28px; line-height:1; font-weight:640;
  color:var(--ink); font-variant-numeric:tabular-nums; }
.ms-cell span{ display:block; margin-top:6px; font-size:11.5px; line-height:1.45; color:var(--muted); }

.mag-lead{ position:relative; display:grid; grid-template-columns:minmax(0,300px) 1fr; gap:34px;
  align-items:center; margin:26px 0 0; padding:32px; border:1px solid var(--line);
  border-radius:22px; overflow:hidden; background:var(--surface); }
.mag-lead::before{ content:""; position:absolute; inset:0; z-index:0; opacity:.22;
  background-image:var(--cov); background-size:cover; background-position:center;
  filter:blur(46px) saturate(1.6); }
.mag-lead::after{ content:""; position:absolute; inset:0; z-index:0;
  background:linear-gradient(105deg,var(--surface) 30%,color-mix(in srgb,var(--surface) 70%,transparent)); }
.mag-lead > *{ position:relative; z-index:1; }
.ml-cover{ position:relative; display:block; border-radius:14px; overflow:hidden;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85); transition:transform .25s; }
.ml-cover:hover{ transform:translateY(-4px) rotate(-.7deg); }
.ml-cover img{ display:block; width:100%; height:auto; }
.ml-badge{ position:absolute; left:12px; top:12px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--accent-ink,#fff); padding:5px 11px;
  border-radius:99px; background:linear-gradient(120deg,var(--accent),var(--accent2)); }
.ml-k{ font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700;
  color:var(--accent2); margin-bottom:10px; }
.mag-lead h2{ font-family:var(--serif); font-size:clamp(28px,4vw,42px); line-height:1.06;
  font-weight:640; margin:0 0 10px; color:var(--ink); }
.ml-tag{ font-size:15px; line-height:1.55; color:var(--ink-soft); margin:0 0 16px; max-width:56ch; }
.ml-inside{ margin:0 0 18px; }
.ml-il{ display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--faint); margin-bottom:8px; }
.ml-inside ul{ list-style:none; display:flex; flex-wrap:wrap; gap:6px 8px; padding:0; margin:0; }
.ml-inside li{ font-size:12px; color:var(--ink-soft); border:1px solid var(--hairline);
  border-radius:99px; padding:5px 12px; background:color-mix(in srgb,var(--accent) 5%,transparent); }
.ml-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.ml-note{ flex-basis:100%; font-size:11.5px; color:var(--muted); }

/* ---- THE 3D SHELF ----
   Real depth, no dependency: CSS perspective plus a pseudo-element page-block
   for thickness, so each back issue stands like an object instead of lying
   flat as a thumbnail. Deliberately NOT WebGL — a shelf that needs a 3D engine
   is a shelf that can fail to load, and this page is the one that takes money.
   Hover/focus straightens the issue and lifts it off the shelf; reduced-motion
   flattens the whole thing to plain cards. */
.mag-shelf{ display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr));
  gap:36px 30px; margin-top:16px; perspective:1400px; perspective-origin:50% 40%; padding-bottom:26px; }
.mag-shelf .mag-cell{ transform-style:preserve-3d; transition:transform .38s cubic-bezier(.2,.7,.2,1);
  transform:rotateY(14deg) rotateX(3deg) translateZ(0); position:relative; }
.mag-shelf .mag-cell:nth-child(even){ transform:rotateY(-14deg) rotateX(3deg); }
.mag-shelf .mag-cell:hover,
.mag-shelf .mag-cell:focus-within{ transform:rotateY(0deg) rotateX(0deg) translateY(-8px) scale(1.03); }
/* the page block: a slab behind the cover that reads as paper thickness */
.mag-shelf .mag-cell::before{ content:""; position:absolute; inset:6px -7px 10px auto; width:12px;
  border-radius:2px 5px 5px 2px; transform:translateZ(-9px) rotateY(9deg);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 22%,transparent),
    color-mix(in srgb,var(--surface2) 92%,transparent) 42%,var(--surface2));
  box-shadow:inset -1px 0 0 var(--hairline); opacity:.85; pointer-events:none; }
/* the shadow it casts on the shelf */
.mag-shelf .mag-cell::after{ content:""; position:absolute; left:6%; right:6%; bottom:-16px; height:22px;
  border-radius:50%; background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 72%);
  filter:blur(7px); opacity:.6; transition:opacity .38s,transform .38s; pointer-events:none; }
.mag-shelf .mag-cell:hover::after{ opacity:.34; transform:translateY(7px) scale(.92); }
.mag-shelf .mag-cell > *{ border-radius:10px; overflow:hidden;
  box-shadow:0 20px 44px -24px rgba(0,0,0,.9), 0 0 0 1px var(--hairline); }

.mag-plusnote{ margin-top:30px; padding:16px 20px; border:1px solid
  color-mix(in srgb,var(--accent) 40%,var(--line)); border-radius:14px;
  background:color-mix(in srgb,var(--accent) 8%,var(--surface)); font-size:13.5px; line-height:1.6; }
.mag-plusnote a{ color:var(--accent2); font-weight:650; text-decoration:none; }

@media (max-width:860px){
  .mag-lead{ grid-template-columns:1fr; gap:20px; padding:22px; }
  .ml-cover{ max-width:230px; }
  .mag-stats{ grid-template-columns:1fr 1fr; }
  .mag-shelf{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:28px 20px; perspective:1000px; }
}
@media (prefers-reduced-motion:reduce){
  .mag-shelf{ perspective:none; }
  .mag-shelf .mag-cell,
  .mag-shelf .mag-cell:nth-child(even){ transform:none; transition:none; }
  .mag-shelf .mag-cell::before{ display:none; }
  .ml-cover{ transition:none; }
}

/* ================= THE INSTRUCTION BLOCKS ===================================
   Status colour is used here for `verify` and `if not`, which is the reserved,
   correct use: good vs warning state. Both ship with a visible label, never
   colour alone, so the meaning survives greyscale, CVD and forced-colors. */

/* ---- procedure ---- */
.comp.procedure{ margin:26px 0; border:1px solid var(--line); border-radius:16px;
  background:var(--surface); overflow:hidden; }
.pr-head{ padding:16px 18px 13px; border-bottom:1px solid var(--hairline);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent); }
.pr-k{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--accent2); margin-bottom:6px; }
.pr-head b{ display:block; font-family:var(--serif); font-size:19px; line-height:1.24;
  font-weight:640; color:var(--ink); }
.pr-sub{ display:block; margin-top:5px; font-size:13px; line-height:1.55; color:var(--muted); }
.pr-meta{ display:flex; flex-wrap:wrap; gap:6px 14px; margin-top:9px; }
.pr-m{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--faint);
  letter-spacing:.04em; font-variant-numeric:tabular-nums; }
.pr-m i{ font-style:normal; color:var(--accent2); }
.pr-pre{ padding:12px 18px; border-bottom:1px solid var(--hairline); background:var(--surface2); }
.pr-pk{ display:block; font-size:9.5px; letter-spacing:.18em; text-transform:uppercase;
  font-weight:700; color:var(--faint); margin-bottom:6px; }
.pr-pre ul{ margin:0; padding-left:17px; }
.pr-pre li{ font-size:13px; line-height:1.55; color:var(--ink-soft); }
.pr-steps{ list-style:none; margin:0; padding:0; counter-reset:pr; }
.pr-step{ display:flex; gap:13px; padding:15px 18px; border-bottom:1px solid var(--hairline);
  transition:background .18s; }
.pr-step:last-child{ border-bottom:0; }
.pr-step.is-hi{ background:color-mix(in srgb,var(--accent) 5%,transparent); }
.pr-tick{ flex:none; width:28px; height:28px; margin-top:1px; border-radius:50%;
  border:1.5px solid var(--line); background:transparent; color:var(--muted); cursor:pointer;
  display:grid; place-items:center; font:inherit; padding:0;
  transition:border-color .18s,background .18s,color .18s,transform .18s; }
.pr-tick.pr-static{ cursor:default; }
.pr-n{ font-size:12px; font-weight:700; font-variant-numeric:tabular-nums; }
.procedure.is-track .pr-tick:hover{ border-color:var(--accent); color:var(--accent2); transform:scale(1.06); }
.pr-step.is-done .pr-tick{ border-color:var(--ok); background:var(--ok); color:#08130e; }
.pr-step.is-done .pr-n{ font-size:0; }
.pr-step.is-done .pr-n::after{ content:"✓"; font-size:14px; }
.pr-step.is-done .pr-body{ opacity:.55; }
.pr-body{ min-width:0; flex:1; transition:opacity .18s; }
.pr-do{ font-size:14.5px; line-height:1.55; color:var(--ink); font-weight:550; }
.pr-detail{ margin-top:6px; font-size:13.5px; line-height:1.6; color:var(--ink-soft);
  font-family:var(--mono); background:var(--surface2); border-left:2px solid var(--line);
  padding:8px 11px; border-radius:0 6px 6px 0; }
.pr-verify,.pr-ifnot{ margin-top:8px; font-size:13px; line-height:1.55; padding-left:11px;
  border-left:2px solid var(--line); }
.pr-verify{ border-left-color:var(--ok); color:var(--ink-soft); }
.pr-ifnot{ border-left-color:var(--gate); color:var(--ink-soft); }
.pr-vk,.pr-ik{ display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; margin-bottom:2px; }
.pr-vk{ color:var(--ok); } .pr-ik{ color:var(--gate); }
.pr-why{ margin-top:7px; font-size:12.5px; line-height:1.55; color:var(--muted); font-style:italic; }
.pr-est{ display:inline-block; margin-top:8px; font-size:10.5px; color:var(--faint);
  border:1px solid var(--line); border-radius:99px; padding:2px 8px; }
.pr-foot{ display:flex; align-items:center; gap:12px; padding:11px 18px; background:var(--surface2);
  border-top:1px solid var(--hairline); }
.pr-prog{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.procedure.all-done .pr-prog{ color:var(--ok); font-weight:650; }
.pr-reset{ margin-left:auto; font:inherit; font-size:12px; background:none; border:0; padding:0;
  cursor:pointer; color:var(--accent2); text-decoration:underline; text-underline-offset:2px; }

/* ---- snippet ---- */
.comp.snippet{ margin:26px 0; border:1px solid var(--line); border-radius:14px;
  background:var(--surface); overflow:hidden; }
.sn-head{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px;
  border-bottom:1px solid var(--hairline); background:var(--surface2); }
.sn-k{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:var(--accent2); }
.sn-head b{ font-family:var(--serif); font-size:15px; font-weight:640; color:var(--ink); }
.sn-lang{ font:10.5px var(--mono); color:var(--faint); border:1px solid var(--line);
  border-radius:4px; padding:1px 6px; }
.sn-copy{ margin-left:auto; font:inherit; font-size:12px; font-weight:600; cursor:pointer;
  color:var(--accent-ink); background:color-mix(in srgb,var(--accent) 14%,transparent);
  border:1px solid var(--accent); border-radius:99px; padding:4px 13px;
  transition:background .16s,transform .16s; }
.sn-copy:hover{ background:color-mix(in srgb,var(--accent) 26%,transparent); }
.sn-copy:active{ transform:scale(.97); }
.sn-body{ margin:0; padding:14px 16px; overflow-x:auto; background:var(--bg);
  font:13px/1.72 var(--mono); color:var(--ink-soft); white-space:pre-wrap; word-break:break-word; }
mark.sn-t{ background:color-mix(in srgb,var(--accent) 22%,transparent); color:var(--accent-ink);
  border-radius:3px; padding:0 3px; font-weight:600; }
.sn-fill{ padding:11px 16px; border-top:1px solid var(--hairline); }
.sn-fk,.sn-ek{ display:block; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  font-weight:700; color:var(--faint); margin-bottom:6px; }
.sn-fill ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:5px; }
.sn-fill li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:8px; font-size:12.5px; color:var(--muted); }
.sn-fill code{ font:11.5px var(--mono); color:var(--accent2); }
.sn-fill em{ font-style:italic; color:var(--faint); }
.sn-exp{ padding:11px 16px; border-top:1px solid var(--hairline); font-size:13px;
  line-height:1.55; color:var(--ink-soft); border-left:2px solid var(--ok); }
.sn-ek{ color:var(--ok); }
.sn-note{ padding:10px 16px; border-top:1px solid var(--hairline); font-size:12.5px;
  line-height:1.55; color:var(--muted); }

/* ---- decide ---- */
.comp.decide{ margin:26px 0; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.dc-head{ padding:15px 18px 12px; border-bottom:1px solid var(--hairline); }
.dc-k{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--accent2); margin-bottom:6px; }
.dc-head b{ display:block; font-family:var(--serif); font-size:19px; line-height:1.24;
  font-weight:640; color:var(--ink); }
.dc-q{ display:block; margin-top:5px; font-size:13.5px; line-height:1.55; color:var(--muted); }
.dc-list{ list-style:none; margin:0; padding:0; }
.dc-b{ padding:14px 18px; border-bottom:1px solid var(--hairline); }
.dc-b:last-child{ border-bottom:0; }
.dc-b.is-hi{ background:color-mix(in srgb,var(--accent) 5%,transparent); }
.dc-wk,.dc-tk{ display:inline-block; min-width:38px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--faint); }
.dc-tk{ color:var(--accent2); }
.dc-when{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); }
.dc-then{ margin-top:5px; font-size:14.5px; line-height:1.5; }
.dc-then b{ font-weight:600; color:var(--ink); }
.dc-why{ margin-top:5px; padding-left:38px; font-size:12.5px; line-height:1.55; color:var(--muted); }
.dc-warn{ margin-top:7px; margin-left:38px; padding:7px 11px; border-left:2px solid var(--gate);
  font-size:12.5px; line-height:1.5; color:var(--ink-soft);
  background:color-mix(in srgb,var(--gate) 8%,transparent); border-radius:0 6px 6px 0; }
.dc-next{ margin-top:6px; padding-left:38px; font-size:12.5px; color:var(--accent2); font-weight:600; }

/* ---- pitfalls ---- */
.comp.pitfalls{ margin:26px 0; border:1px solid var(--line); border-radius:16px; background:var(--surface); }
.pf-head{ padding:15px 18px 12px; border-bottom:1px solid var(--hairline); }
.pf-k{ display:block; font-size:9.5px; letter-spacing:.2em; text-transform:uppercase;
  font-weight:700; color:var(--gate); margin-bottom:6px; }
.pf-head b{ display:block; font-family:var(--serif); font-size:19px; line-height:1.24;
  font-weight:640; color:var(--ink); }
.pf-list{ list-style:none; margin:0; padding:0; }
.pf-i{ padding:14px 18px 14px 22px; border-bottom:1px solid var(--hairline); position:relative; }
.pf-i:last-child{ border-bottom:0; }
/* severity rail: a second channel on top of the label, never colour alone */
.pf-i::before{ content:""; position:absolute; left:0; top:14px; bottom:14px; width:3px; border-radius:2px; }
.pf-i.cost-high::before{ background:var(--gate); }
.pf-i.cost-medium::before{ background:var(--gold); }
.pf-i.cost-low::before{ background:var(--line); }
.pf-m{ font-size:14.5px; line-height:1.5; font-weight:550; color:var(--ink); }
.pf-l,.pf-f{ margin-top:6px; font-size:13px; line-height:1.55; color:var(--ink-soft); }
.pf-lk,.pf-fk{ display:inline-block; min-width:74px; font-size:9.5px; letter-spacing:.16em;
  text-transform:uppercase; font-weight:700; color:var(--faint); }
.pf-fk{ color:var(--ok); }
.pf-w{ margin-top:5px; font-size:12.5px; line-height:1.55; color:var(--muted); font-style:italic; }

@media (max-width:640px){
  .pr-step{ padding:13px 14px; gap:11px; }
  .pr-head,.dc-head,.pf-head{ padding:13px 14px 11px; }
  .pr-head b,.dc-head b,.pf-head b{ font-size:17px; }
  .dc-b,.pf-i{ padding-left:16px; padding-right:14px; }
  .pf-i{ padding-left:18px; }
  .dc-why,.dc-warn,.dc-next{ padding-left:0; margin-left:0; }
  .pf-lk,.pf-fk{ display:block; min-width:0; margin-bottom:2px; }
  .sn-body{ font-size:12.5px; padding:12px 13px; }
}
@media (prefers-reduced-motion:reduce){
  .pr-tick,.pr-body,.pr-step,.sn-copy{ transition:none; }
}

/* ============================================================================
   V35 · DEPTH, SPRING & SURFACE PASS
   Appended last on purpose: equal specificity, source order decides. Nothing
   here is required for the page to work -- every non-baseline feature sits
   inside @supports with the previous behaviour as the fallback, and every
   motion sits inside prefers-reduced-motion: no-preference.
   ========================================================================== */

/* ---------- 1 · MOTION TOKENS ---------------------------------------------
   One vocabulary instead of a cubic-bezier repeated forty times. The spring is
   declared TWICE on purpose: the cubic-bezier line is the fallback and is
   parsed by everyone; the linear() line only lands where linear() is supported
   (Chrome 113+, Safari 17.2+, Firefox 112+) and simply fails to parse
   everywhere else, leaving the bezier in place. ---------- */
:root{
  --ease-out:cubic-bezier(.22,1,.32,1);
  --ease-spring:cubic-bezier(.34,1.26,.5,1);
  --ease-press:cubic-bezier(.34,1.4,.64,1);
  --dur-fast:.16s; --dur-mid:.34s; --dur-slow:.55s;
}
@supports (transition-timing-function:linear(0,1)){
  :root{
    --ease-spring:linear(0,.318 6.2%,.81 13.9%,1.017 19.6%,1.075 24.3%,1.031 32.5%,.995 43.1%,1);
    --ease-press:linear(0,.6 9%,1.062 22%,.984 40%,1.005 62%,1);
  }
}

/* ---------- 2 · THE CTA, WITH REAL STATES ---------------------------------
   The site's only conversion control used to have exactly one piece of
   feedback: opacity .88 on hover. It now has rest / hover / active / focus /
   busy, all on compositor-friendly properties. ---------- */
.cta{
  position:relative;overflow:hidden;border-radius:11px;padding:12px 22px;
  background:linear-gradient(135deg,var(--accent),var(--accent2));
  box-shadow:0 1px 0 rgba(255,255,255,.24) inset,
             0 2px 5px -2px rgba(0,0,0,.35),
             0 10px 24px -12px color-mix(in srgb,var(--accent) 72%,transparent);
  transition:transform var(--dur-mid) var(--ease-spring),
             box-shadow var(--dur-mid) var(--ease-out),
             filter var(--dur-fast) linear;
}
.cta:hover{
  opacity:1;filter:brightness(1.06) saturate(1.04);transform:translateY(-1.5px);
  box-shadow:0 1px 0 rgba(255,255,255,.3) inset,
             0 3px 7px -2px rgba(0,0,0,.4),
             0 18px 36px -14px color-mix(in srgb,var(--accent) 82%,transparent);
}
.cta:active{transform:translateY(0) scale(.982);transition-duration:.07s;filter:brightness(.97)}
.cta:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.cta[aria-busy="true"]{pointer-events:none;color:transparent}
.cta[aria-busy="true"]::after{
  content:"";position:absolute;inset:0;margin:auto;width:15px;height:15px;border-radius:50%;
  border:2px solid rgba(255,255,255,.35);border-top-color:#fff;animation:ctaSpin .62s linear infinite}
@keyframes ctaSpin{to{transform:rotate(360deg)}}
.cta.ghost{background:transparent;box-shadow:none}
.cta.ghost:hover{filter:none;background:color-mix(in srgb,var(--accent) 8%,transparent);box-shadow:none}
@media (prefers-reduced-motion:reduce){
  .cta,.cta:hover,.cta:active{transition:none;transform:none}
  .cta[aria-busy="true"]::after{animation:none}
}

/* ---------- 3 · STICKY HEADER: A SCROLLED STATE ---------------------------
   Colour, blur and shadow only -- never padding or height, so this can never
   move the page and can never cost CLS. Scroll-driven, so there is no scroll
   listener and no work on the main thread. Chrome 115+, Safari 26+, FF 144+;
   without support the header keeps exactly the look it has today. ---------- */
@supports (animation-timeline:scroll(root block)){
  @media (prefers-reduced-motion:no-preference){
    header.site{
      animation:hdrSettle linear both;
      animation-timeline:scroll(root block);
      animation-range:0 140px;
    }
    @keyframes hdrSettle{
      from{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
        box-shadow:0 0 0 0 rgba(0,0,0,0);border-bottom-color:var(--hairline)}
      to{-webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);
        box-shadow:0 10px 30px -22px rgba(0,0,0,.85);
        border-bottom-color:color-mix(in srgb,var(--accent) 22%,var(--hairline))}
    }
  }
}

/* ---------- 4 · DESIGNED EMPTY STATES -------------------------------------
   A publication that ships daily must never render a hole. companyBrowseHTML
   and the On-the-radar strip used to return "" and leave a blank band, which
   reads as breakage rather than as "nothing here yet". ---------- */
.empty-state{
  display:flex;align-items:center;gap:18px;flex-wrap:wrap;
  border:1px dashed var(--line);border-radius:16px;padding:20px 22px;margin:0 0 8px;
  background:linear-gradient(120deg,color-mix(in srgb,var(--accent) 4%,transparent),transparent 62%);
}
.empty-state .es-mark{
  flex:none;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  font-size:18px;color:var(--accent2);border:1px solid var(--hairline);background:var(--surface)}
.empty-state>div{flex:1;min-width:220px}
.empty-state b{display:block;font-family:var(--serif);font-size:16px;font-weight:640;color:var(--ink);letter-spacing:-.008em}
.empty-state span{display:block;color:var(--muted);font-size:13.5px;line-height:1.55;margin-top:4px;max-width:62ch}
.empty-state .es-go{
  flex:none;font-size:13px;font-weight:650;color:var(--accent2);
  border:1px solid var(--hairline);border-radius:9px;padding:9px 15px;
  transition:border-color var(--dur-fast),color var(--dur-fast)}
.empty-state .es-go:hover{border-color:var(--accent);color:var(--accent-ink)}
@media (max-width:640px){
  .empty-state{padding:16px;gap:13px}
  .empty-state .es-go{width:100%;text-align:center}
}

/* ============================================================================
   5 · THE MAGAZINE STOREFRONT
   ========================================================================== */

/* 5a · The shelf. auto-fit collapses the empty tracks that used to leave a
   347px hole beside a two-issue catalogue, and :has() gives the newest issue a
   wider track so the storefront has a lead object instead of two equal tiles.
   Both rules self-heal as issues accrue: at three or more, auto-fit takes over
   and the :has() branches stop matching. */
.mag-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:30px 26px;margin:6px 0;align-items:stretch;
}
@media (min-width:861px){
  .mag-grid:has(>.mag-cell:nth-child(2):last-child){grid-template-columns:1.22fr 1fr}
  .mag-grid:has(>.mag-cell:only-child){grid-template-columns:minmax(0,440px)}
}
/* Covers stand on a shelf line: slack goes above the cover, the PDF link sits
   on a baseline shared by every cell in the row. */
.mag-cell{display:grid;grid-template-rows:1fr auto;row-gap:10px;perspective:1500px}
/* Row heights are per-cell, so a cell with no PDF link let its cover hang 44px
   lower than one that had it. Reserve the link's row in every cell of a shelf
   that contains one, and the covers land on a single line. */
.mag-grid:has(.mag-dl) .mag-cell{grid-template-rows:1fr minmax(35px,auto)}
.mag-cell>.mag-link{display:block;align-self:end}

/* 5b · The cover as a physical volume. .mag-cover carries overflow:hidden,
   which flattens preserve-3d, so the rotation and the page block live on the
   .mag-vol wrapper and the cover is a flat leaf inside it. */
.mag-vol{
  display:block;position:relative;transform-style:preserve-3d;
  transition:transform var(--dur-slow) var(--ease-spring);
}
.mag-cover{
  padding-left:32px;border-radius:3px 15px 15px 3px;transition:box-shadow var(--dur-slow) var(--ease-out);
  box-shadow:0 1px 2px rgba(0,0,0,.3),
             0 10px 22px -12px rgba(0,0,0,.55),
             0 34px 62px -30px rgba(0,0,0,.75);
}
[data-theme="light"] .mag-cover{
  box-shadow:0 1px 2px rgba(60,50,120,.14),
             0 10px 22px -12px rgba(60,50,120,.24),
             0 34px 62px -30px rgba(60,50,120,.4);
}
/* The spine: a folded edge, always visible, so the cover reads as an object
   even flat and even with no cover art loaded. */
.mag-cover::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:17px;z-index:2;pointer-events:none;
  border-radius:3px 0 0 3px;
  background:linear-gradient(90deg,
    rgba(0,0,0,.5) 0%,rgba(0,0,0,.2) 22%,rgba(255,255,255,.14) 42%,
    rgba(0,0,0,.28) 62%,rgba(0,0,0,0) 100%);
}
/* The page block, hinged at the right edge and folded back into Z. Invisible
   head-on, revealed as the volume turns. */
.mag-vol::after{
  content:"";position:absolute;top:2.5%;bottom:2.5%;right:0;width:20px;z-index:-1;
  transform-origin:100% 50%;transform:rotateY(-90deg);border-radius:0 2px 2px 0;
  background:repeating-linear-gradient(90deg,#f4efe3 0 1.1px,#cfc7b5 1.1px 2px,#faf6ec 2px 3.4px);
  box-shadow:inset -3px 0 7px rgba(0,0,0,.4);
}
/* The specular sweep, same grammar as .card .art::after. */
.mc-sheen{
  position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;
  background:linear-gradient(115deg,transparent 38%,rgba(255,255,255,.13) 50%,transparent 62%);
  transform:translateX(-150%) skewX(-7deg);transition:transform .1s;
}
@media (prefers-reduced-motion:no-preference){
  /* Negative rotateY brings the RIGHT side forward, and that is the only
     direction that reveals a page block hinged on that edge -- turn it the
     other way and the block is occluded by the cover it belongs to. */
  .mag-cell:hover .mag-vol,
  .mag-cell:focus-within .mag-vol{transform:rotateY(-12deg) rotateX(1.5deg) translateZ(30px)}
  .mag-cell:hover .mag-cover,
  .mag-cell:focus-within .mag-cover{
    box-shadow:0 2px 4px rgba(0,0,0,.34),
               0 18px 34px -14px rgba(0,0,0,.6),
               0 52px 86px -36px rgba(0,0,0,.85);
  }
  .mag-cell:hover .mc-sheen,
  .mag-cell:focus-within .mc-sheen{
    transform:translateX(150%) skewX(-7deg);
    transition:transform .85s cubic-bezier(.4,0,.2,1);
  }
}
/* The old flat hover; .mag-cover is no longer a direct child of the anchor so
   it no longer matches, but say so explicitly rather than leave it to luck. */
a:hover>.mag-cover{transform:none}
.mag-cell:hover .mag-cover,.mag-cell:focus-within .mag-cover{border-color:var(--accent)}
.mag-link:focus-visible{outline:none}
.mag-link:focus-visible .mag-cover{outline:2px solid var(--accent);outline-offset:4px}
.mag-dl{align-self:end}

/* 5c · Cover parallax. Zero JS, zero main thread. background-position is given
   for BOTH layers so the scrim stays pinned at 50% and only the artwork drifts
   -- moving a single-value position would slide the scrim off its box and tile
   a seam. Wrapped in @supports because a browser that cannot parse
   animation-timeline would otherwise run these keyframes on the default TIME
   timeline and visibly jump the artwork once on load. */
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .mag-cover.has-img{
      animation:magPara linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
    @keyframes magPara{
      from{background-position:50% 50%,50% 43%}
      to{background-position:50% 50%,50% 57%}
    }
  }
}

/* 5d · The offer panel. Was one grey bar plus two faint "prototype"
   paragraphs, so the loudest supporting copy on the storefront was an apology
   for the product. Now: price, what is in it, what free already gets you, and
   the caveat as one line of fine print under the button. */
.plusbar{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:0;
  align-items:stretch;padding:0;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 42%,var(--line));border-radius:18px;
  background:
    radial-gradient(120% 140% at 0% 0%,color-mix(in srgb,var(--accent) 15%,transparent),transparent 62%),
    var(--surface);
  box-shadow:0 24px 60px -34px color-mix(in srgb,var(--accent) 60%,transparent);
}
.pb-offer{padding:26px 28px;border-right:1px solid var(--hairline);display:flex;flex-direction:column}
.pb-mark{font-family:var(--serif);font-size:13px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);font-weight:650}
.pb-mark b{color:var(--accent2);font-weight:800}
.pb-price{display:flex;align-items:baseline;gap:6px;margin:10px 0 2px}
.pb-price b{font-family:var(--serif);font-size:48px;line-height:1;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums}
.pb-price span{color:var(--muted);font-size:15px;font-weight:600}
.pb-per{color:var(--muted);font-size:13px;line-height:1.5;margin:0 0 18px;max-width:38ch}
.pb-offer .cta{align-self:flex-start;font-size:15px;padding:13px 26px}
.pb-fine{font-size:11px;line-height:1.5;color:var(--faint);margin:12px 0 0;max-width:44ch}
.pb-cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.pb-col{padding:26px 24px}
.pb-col+.pb-col{border-left:1px solid var(--hairline)}
.pb-ct{display:block;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;
  color:var(--muted);margin-bottom:12px}
.pb-plus .pb-ct{color:var(--accent2)}
.pb-dia{font-weight:400}
.pb-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pb-col li{position:relative;padding-left:18px;font-size:13.5px;line-height:1.45;color:var(--ink-soft)}
.pb-col li::before{content:"";position:absolute;left:0;top:.52em;width:6px;height:6px;border-radius:50%;
  background:var(--line)}
.pb-plus li::before{background:var(--accent)}
.pb-plus{background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 7%,transparent),transparent 70%)}
@media (max-width:900px){
  .plusbar{grid-template-columns:1fr}
  .pb-offer{border-right:none;border-bottom:1px solid var(--hairline)}
}
@media (max-width:560px){
  .pb-cols{grid-template-columns:1fr}
  .pb-col+.pb-col{border-left:none;border-top:1px solid var(--hairline)}
  .pb-offer{padding:22px 20px}
  .pb-col{padding:20px}
  .pb-price b{font-size:40px}
  .pb-offer .cta{align-self:stretch;text-align:center}
}

/* 5e · Shared-element route transition: the chosen cover becomes page one.
   Both halves carry view-transition-name:rtfc-issue (assigned in app.js), so
   the browser tweens the one object instead of cutting between two pages.
   The API guard is already in navigate(); this only shapes the tween. */
@media (prefers-reduced-motion:no-preference){
  ::view-transition-group(rtfc-issue){animation-duration:.46s}
  ::view-transition-old(rtfc-issue),
  ::view-transition-new(rtfc-issue){
    animation-duration:.46s;animation-timing-function:var(--ease-out);
    height:100%;overflow:clip;
  }
  ::view-transition-old(rtfc-issue){animation-name:rtfcIssueOut}
  ::view-transition-new(rtfc-issue){animation-name:rtfcIssueIn}
  @keyframes rtfcIssueOut{to{opacity:0}}
  @keyframes rtfcIssueIn{from{opacity:0}}
}

/* ============================================================================
   6 · THE SPREAD READER
   ========================================================================== */

/* 6a · A room, and sheets that sit in it. The reader background was a flat
   #050508 and every sheet carried a black drop shadow against it -- so the
   shadow was invisible and the dark page kinds (cover, opener, quote, ad, back
   cover) dissolved into the chrome with no boundary at all. */
.mreader{
  z-index:3100;
  background:
    radial-gradient(120% 86% at 50% -6%,#171128 0%,#0b0813 46%,#050409 100%),#050409;
}
[data-theme="light"] .mreader{
  background:
    radial-gradient(120% 86% at 50% -6%,#332c40 0%,#221d2c 48%,#151119 100%),#151119;
}
.mtrack .mpage{
  border-radius:3px;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.07),
    0 2px 5px rgba(0,0,0,.55),
    0 14px 26px -12px rgba(0,0,0,.7),
    0 40px 78px -30px rgba(0,0,0,.92);
}
/* Cream sheets get a lit top edge so the paper reads as having thickness. */
.mtrack .mpage.light{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    0 0 0 1px rgba(255,255,255,.1),
    0 2px 5px rgba(0,0,0,.5),
    0 14px 26px -12px rgba(0,0,0,.66),
    0 40px 78px -30px rgba(0,0,0,.9);
}

/* 6b · Grain, at the right polarity. The global html::after grain is WHITE in
   dark mode and paints at z-index 3000 over everything -- including the cream
   sheets, where white noise on paper is exactly backwards. Lifting .mreader
   above 3000 takes the reader out from under it (and, for free, out from under
   the cookie bar at 1400, which was covering the bottom of every sheet), and
   this layer replaces it with NEUTRAL-GREY noise in soft-light: 50% grey is a
   no-op, above lightens, below darkens, so both the dark room and the cream
   paper get grain that runs the correct way. */
.mreader::after{
  content:"";position:absolute;inset:0;z-index:4;pointer-events:none;opacity:.42;
  mix-blend-mode:soft-light;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size:160px 160px;
}

/* 6c · Skip the sheets nobody is looking at. The Primer puts 44 pages and ~49
   background images in the DOM at once; this lets the browser drop layout,
   paint and raster for the ~40 that are off-screen. The box size comes from
   height + aspect-ratio, not from content, so nothing can shift. */
.mtrack .mpage{content-visibility:auto}

/* 6d · Depth of field. The current sheet is lit and full-size; its neighbours
   recede. Driven entirely by the scroll position of the track, so it tracks a
   drag continuously rather than snapping at the end of one.
   Uses the independent `scale` property, NOT transform, so it composes with
   the existing mturnin keyframes instead of replacing them -- and .mturn-in is
   re-declared with both animations for the same reason. */
@supports (animation-timeline:view(inline)){
  @media (prefers-reduced-motion:no-preference){
    .mtrack .mpage{
      animation:sheetFocus linear both;
      animation-timeline:view(inline);
      animation-range:entry 0% exit 100%;
    }
    .mtrack .mpage.mturn-in{
      animation:mturnin .44s cubic-bezier(.22,.68,.2,1) both,sheetFocus linear both;
      animation-timeline:auto,view(inline);
      animation-range:normal,entry 0% exit 100%;
    }
    @keyframes sheetFocus{
      0%{scale:.915;filter:brightness(.42) saturate(.8)}
      22%{scale:.93;filter:brightness(.46) saturate(.84)}
      46%{scale:1;filter:none}
      54%{scale:1;filter:none}
      78%{scale:.93;filter:brightness(.46) saturate(.84)}
      100%{scale:.915;filter:brightness(.42) saturate(.8)}
    }
  }
}

/* 6e · Print typography. Justified runover columns with real hyphenation (the
   code comment already claimed justified columns; nothing was setting it),
   orphan/widow control, old-style figures in running prose and lining tabular
   figures anywhere numbers are compared in a column. */
.mpage.light .mp-body p,
.mpage.light .tp-body p,
.mpage.light .ml-body p,
.mpage.light .tp-ro-cols p{
  hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:7 3 3;
  orphans:2;widows:2;
}
.tp-ro-cols{text-align:justify;text-justify:inter-word}
.tp-ro-cols p:first-of-type{text-indent:0}
.mpage.light .mp-body,
.mpage.light .tp-body,
.mpage.light .mp-intro{font-variant-numeric:oldstyle-nums proportional-nums}
.mfaceoff td,.mfaceoff th,.tp-st b,.tp-fact b,.mr-fact b,.mtoc-p,.ml-n,
.mfolio-bot,.mcov3 .cv-issue{font-variant-numeric:lining-nums tabular-nums}
.mp-title,.tp-title,.mfold-title,.mo-title{text-wrap:balance}
.mp-intro,.mfold-sub,.mo-sub{text-wrap:pretty}

/* 6f · The phone. The sheet was filling 51% of the reading area -- 334px of
   dead space on an 844px screen -- because the track kept 24px side gutters
   and capped the page at 88vw. The sheet keeps its 3:4 proportion (eighteen
   page layouts are composed against it; stretching it would break them) and
   simply takes all the room that proportion allows. */
@media (max-width:820px){
  .mbar{height:46px;padding:0 12px;gap:10px}
  .mtrack{padding:10px 8px;gap:10px}
  .mtrack .mpage{height:min(100%,calc(97vw * 4 / 3));border-radius:2px}
  /* The hint sat dead centre under the bottom-right control cluster. */
  .mhint{left:14px;right:auto;transform:none;bottom:22px;font-size:10px;letter-spacing:.14em;max-width:52vw}
  .mnav-btns{right:12px;bottom:12px;gap:6px}
  .mnav-b{width:38px;height:38px;border-radius:10px;font-size:19px}
}
/* 6g · Cover-line collision. .cv-lines is positioned from the top and capped at
   46% of the page WIDTH, so on a narrow sheet the cover lines wrap three deep
   and ran 33px into .cv-title. .mpage already declares container-type:size, so
   the sheet can answer for its own size: widen the measure to cut the wrapping,
   tighten the leading, and cap the block's height so a collision is impossible
   at any width regardless of how long an editor makes the lines. */
@container mpage (max-width:430px){
  .mcov3 .cv-lines{max-width:64%;top:16.5%;max-height:44%;overflow:hidden}
  .mcov3 .cv-line{margin-bottom:3.4%}
  .mcov3 .cv-line b{font-size:1.25cqh;letter-spacing:.16em}
  .mcov3 .cv-line span{font-size:1.72cqh;line-height:1.14}
  .mcov3 .cv-title{bottom:25.5%;font-size:5.2cqh}
  .mcov3 .cv-sub{bottom:21.5%}
}

/* 5f · Cover text legibility, guaranteed. .mag-cover.has-img hard-sets a near
   white text colour, but the cover scrim starts at rgba(5,5,10,.18) -- so on any
   artwork with a bright top third the masthead simply vanished, in either theme.
   A shadow costs nothing, needs no scrim change, and cannot be defeated by
   whatever art the Issue Desk ships next month. */
.mag-cover.has-img .mc-mast,
.mag-cover.has-img .mc-issue,
.mag-cover.has-img .mc-title,
.mag-cover.has-img .mc-tag,
.mag-cover.has-img .mc-art{text-shadow:0 1px 3px rgba(6,4,13,.55),0 2px 18px rgba(6,4,13,.5)}
.mag-cover.has-img::after{
  content:"";position:absolute;inset:0 0 auto;height:36%;z-index:1;pointer-events:none;
  border-radius:3px 15px 0 0;
  background:linear-gradient(180deg,rgba(6,4,13,.42),rgba(6,4,13,0))}
.mag-cover>*{position:relative;z-index:2}

/* ================= MOBILE KIT · full screen + desktop view ==================
   Shown from a class JS sets ONCE at boot off the input device and the physical
   screen -- never from a max-width query. Desktop view rewrites the layout
   viewport to 1200px, so a width query would stop matching the instant it
   engaged, the controls would disappear, and the reader would be stranded in
   desktop view with no way back. */
#mobkit{ display:none; }
html.has-mobkit #mobkit{
  display:flex; flex-direction:column; gap:9px;
  position:fixed; right:12px; bottom:14px; z-index:160;
}
.mk-btn{
  width:44px; height:44px; border-radius:50%; padding:0; cursor:pointer;
  display:grid; place-items:center; font:inherit;
  color:var(--ink-soft);
  background:color-mix(in srgb,var(--surface) 82%,transparent);
  border:1px solid var(--line);
  -webkit-backdrop-filter:blur(14px) saturate(1.3); backdrop-filter:blur(14px) saturate(1.3);
  box-shadow:0 1px 0 rgba(255,255,255,.05) inset, 0 8px 22px -8px rgba(0,0,0,.55);
  transition:color .16s, border-color .16s, background .16s, transform .16s;
}
.mk-btn svg{ width:19px; height:19px; display:block; }
.mk-btn:hover{ color:var(--ink); border-color:var(--muted); }
.mk-btn:active{ transform:scale(.94); }
.mk-btn.on{
  color:var(--accent-ink); border-color:var(--accent);
  background:color-mix(in srgb,var(--accent) 20%,var(--surface));
}

/* Stay clear of the other fixed furniture rather than sitting under it. The
   mini-player goes full-width under 520px, and the consent bar owns the bottom
   edge outright at z-index 1400. */
/* These are the floor only. mkLift() measures the real heights and writes an
   inline bottom, because both bars reflow with content -- the consent bar wraps
   to three lines at 390px, which a fixed offset cannot anticipate. */
body:has(#miniplayer:not([hidden])) #mobkit{ bottom:88px; }
body:has(#cookiebar) #mobkit{ bottom:104px; }

/* The magazine reader carries its own full-screen control and its own page nav.
   A second floating stack over a magazine sheet is clutter. */
body:has(.mreader) #mobkit{ display:none; }

/* In desktop view the whole page is scaled down to fit the screen, so a 44px
   control would render at roughly 14 physical px. Scale the kit back up and pin
   it to the visual viewport instead of the 1200px layout box. */
html.vp-desktop.has-mobkit #mobkit{
  right:8px; bottom:10px; gap:12px;
  transform:scale(2.1); transform-origin:100% 100%;
}
@media (prefers-reduced-motion:reduce){ .mk-btn{ transition:none; } }

/* ── V-FIX: sources footer must not become a flex item on split pages ──────────
   featureText()'s close() appends <div class="tp-src"> as the LAST CHILD of the
   page element. On splitLeft/splitRight the page is `display:flex; flex-direction:row`,
   so the sources block silently became a THIRD column in that row and crushed the
   text column from ~333px to ~67px — the copy then ran ~2,600px past the page.
   It looked like a copy-length problem and was not: any split page carrying
   `sources` overflowed regardless of how short the body was. (Issue 001 p25 has
   this defect too — it was the only split page there that carried sources.)
   Take it out of the row and pin it across the foot of the text column. */
.mpage.tp-split{ position:relative; }
.mpage.tp-split > .tp-src{
  position:absolute; bottom:3.6cqh; width:52%; margin:0; padding-top:1.2cqh;
  z-index:3; background:transparent;
}
.mpage.tp-split:not(.tp-rev) > .tp-src{ right:6%; }   /* image left  → text column right */
.mpage.tp-split.tp-rev      > .tp-src{ left:6%;  }    /* text left   → image right */
/* give the column room so the pinned footer never lands on top of the fact box */
.mpage.tp-split .tp-col{ padding-bottom:7.5cqh; }

/* ══════════════════════════════════════════════════════════════════════════
   PLUS BILLING — the pricing block, the plan tiles, the code box
   ------------------------------------------------------------------------
   One block (plusPricingHTML() in app.js) renders in three places, so it has
   to survive three very different containers:
     · the account page          — on --bg, full width, alongside .acct-card
     · the magazine storefront   — inside .plusbar > .pb-offer, on --surface
     · the locked-issue upsell   — inside .ipage.ip-lock, centred, .pp-compact
   Nothing here introduces a colour: --accent / --accent2 / --surface* / --line
   only, so it follows the theme switch and the light-mode overrides for free.
   ══════════════════════════════════════════════════════════════════════════ */

/* The storefront .plusbar is a two-column grid (offer | comparison). The tiles
   need the full width, so the plans variant stacks it — border-right becomes a
   border-bottom, exactly as the existing ≤900px breakpoint already does. */
.plusbar.has-plans{ grid-template-columns:1fr; }
.plusbar.has-plans .pb-offer{ border-right:none; border-bottom:1px solid var(--hairline); }
.plusbar.has-plans .pb-per{ max-width:60ch; margin-bottom:14px; }

.plusplans{ margin:14px 0 0; }
.pp-head{ margin-bottom:14px; }
.pp-mark{ font-family:var(--serif);font-size:13px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);font-weight:650; }
.pp-mark b{ color:var(--accent2);font-weight:800; }
.pp-dek{ color:var(--muted);font-size:13.5px;line-height:1.6;margin:8px 0 0;max-width:64ch; }

/* Three tiles that stay side by side while they fit and wrap in whole tiles
   after that — no half-column of price left dangling at 700px. */
.pp-tiers{ display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;align-items:stretch; }
.pp-tier{
  position:relative;display:flex;flex-direction:column;gap:6px;
  border:1px solid var(--line);border-radius:14px;padding:20px 20px 18px;
  background:var(--surface2);
}
/* Annual: the default offer, and the only tile that says so. */
.pp-tier.is-rec{
  border-color:color-mix(in srgb,var(--accent) 62%,var(--line));
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 13%,transparent),transparent 68%),
    var(--surface2);
  box-shadow:0 18px 44px -30px color-mix(in srgb,var(--accent) 75%,transparent);
}
.pp-rec{
  position:absolute;top:-9px;left:18px;
  font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;
  color:var(--on-accent);background:linear-gradient(90deg,var(--accent),var(--accent2));
  border-radius:99px;padding:3px 10px;line-height:1.5;
}
.pp-recl{ background:none;border:1px solid color-mix(in srgb,var(--gold) 65%,var(--line));
  color:var(--gold);background-color:var(--surface); }
.pp-name{ font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:800;color:var(--muted); }
.pp-amt{ display:flex;align-items:baseline;gap:6px;margin:2px 0 0; }
.pp-amt b{ font-family:var(--serif);font-size:38px;line-height:1;font-weight:700;letter-spacing:-.02em;
  color:var(--ink);font-variant-numeric:lining-nums tabular-nums; }
.pp-amt span{ color:var(--muted);font-size:14px;font-weight:600; }
.pp-tier.is-rec .pp-amt b{ font-size:44px; }
.pp-sub{ color:var(--muted);font-size:12.5px;line-height:1.5;min-height:2.6em; }
/* The button sits on the floor of every tile, so three tiles of unequal copy
   still line their CTAs up. */
.pp-tier .cta{ margin-top:auto;width:100%;font-size:14px;padding:12px 16px;align-self:stretch; }
.pp-tier .cta.pp-buy[disabled]{ opacity:.42;cursor:not-allowed;filter:saturate(.5); }
.pp-tier .cta.pp-buy[disabled]:hover{ opacity:.42; }

/* An applied discount code — visible, and removable in one click. */
.pp-applied{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 0;
  border:1px dashed color-mix(in srgb,var(--accent2) 55%,var(--line));border-radius:10px;
  padding:9px 14px;font-size:13px;color:var(--ink-soft);
  background:color-mix(in srgb,var(--accent2) 8%,transparent);
}
.pp-applied b{ color:var(--accent2);font-weight:700;letter-spacing:.06em; }
.pp-clear{ margin-left:auto;border:1px solid var(--line);background:transparent;color:var(--muted);
  border-radius:8px;padding:4px 10px;font:inherit;font-size:12px;font-weight:650;cursor:pointer;
  transition:color .15s,border-color .15s; }
.pp-clear:hover{ color:var(--ink);border-color:var(--muted); }
.pp-fine{ max-width:72ch; }

/* Compact: the locked-issue upsell, inside a centred .ip-lock column. */
.pp-compact{ width:100%;max-width:660px;margin:6px auto 0;text-align:left; }
.pp-compact .pp-tiers{ grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px; }
.pp-compact .pp-tier{ padding:18px 16px 16px; }
.pp-compact .pp-amt b{ font-size:32px; }
.pp-compact .pp-tier.is-rec .pp-amt b{ font-size:36px; }
.pp-compact .pp-fine{ text-align:center;max-width:none; }

/* Account page: the plan row now carries a whole sentence ("Plus · billed
   yearly, renews 12 March 2027"), which must wrap right, not overflow left. */
.acct-row b{ text-align:right;font-weight:650; }
.acct-note{ font-size:13px;line-height:1.6;color:var(--ink-soft);margin:4px 0 0;
  border-left:2px solid color-mix(in srgb,var(--accent) 60%,var(--line));padding-left:12px; }
.acct-card input[autocapitalize="characters"]{ letter-spacing:.08em;text-transform:uppercase; }
.acct-card input[autocapitalize="characters"]::placeholder{ letter-spacing:.02em;text-transform:none; }

@media (max-width:560px){
  .pp-tiers{ grid-template-columns:1fr; }
  .pp-amt b{ font-size:34px; }
  .pp-tier.is-rec .pp-amt b{ font-size:38px; }
  .pp-sub{ min-height:0; }
  .acct-row{ flex-wrap:wrap;gap:2px; }
  .acct-row b{ text-align:left; }
}

/* ── PLUS: voucher-only mode ──────────────────────────────────────────────────
   Shown when /api/billing/config reports enabled:false — i.e. Stripe isn't set up
   yet. Three price tiles with dead buttons look broken; this looks deliberate. */
.plusplans.pp-invite{ text-align:center; }
.plusplans.pp-invite .pp-dek{ max-width:52ch; margin:6px auto 0; }
.pp-soon{
  margin:16px auto 0; max-width:46ch; padding:11px 16px;
  border:1px dashed var(--line); border-radius:10px;
  color:var(--muted); font-size:14px; line-height:1.55;
}
.pp-soon b{ color:var(--accent2); }
.plusplans.pp-invite .pp-buy{ margin-top:16px; display:inline-block; }

/* ===== boot splash (2026-08-13) ===== */
/* ---- Startup splash: official glyph only, fast spin, hard stop ----
   The glyph floats directly on the active appearance's canvas (var(--bg)); no
   tile, frame, wordmark or progress meter. bsSpinFast is a short linear loop so
   it reads as genuinely fast rather than a cinematic ease. .stopped kills the
   animation outright, which snaps the mark upright — the intended hard
   mechanical stop — and .out fades the layer away. transform/opacity only, so
   it stays on the compositor and cannot shift layout. */
#boot-splash{position:fixed;inset:0;z-index:2147483000;background:var(--bg);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  opacity:1;transition:opacity .2s linear}
#boot-splash .bs-glyph{width:104px;height:104px;background:var(--rtfc-glyph) center/contain no-repeat;
  animation:bsSpinFast .16s linear infinite;will-change:transform}
#boot-splash.stopped .bs-glyph{animation:none;transform:rotate(0deg)}
#boot-splash.out{opacity:0}
@keyframes bsSpinFast{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
/* Reduced motion: no rotation at all. The upright mark is shown and dismissed
   as soon as the app is ready, with only the short opacity fade. */
@media (prefers-reduced-motion:reduce){
  #boot-splash .bs-glyph{animation:none;transform:none}
}

/* ===== overflow / scrollbar-jitter guard (2026-08-13) ===== */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){html,body{overflow-x:clip}}
html{scrollbar-gutter:stable}

/* ===== parent company footer line ===== */
.fparent{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#8a8a9c;margin-top:7px}
.fparent b{color:#a89bf5;font-weight:700}


@media (max-width:760px){ .logo-glyph{width:22px;height:22px} }

/* ===== Settings → Appearance (swatch dropdown) =====
   A vertical list behind a dropdown rather than a wall of tiles: eighteen
   appearances is too many to show at once, and a colour swatch is faster to
   scan than a miniature. Each swatch is painted from that skin's own accent. */
.ap-picker{position:relative;max-width:460px;margin:6px 0 18px}
.ap-toggle{display:flex;align-items:center;gap:12px;width:100%;padding:12px 14px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;cursor:pointer;
  font:inherit;color:var(--ink);text-align:left;transition:border-color .15s ease}
.ap-toggle:hover{border-color:var(--accent)}
.ap-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ap-cur{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.ap-cur b{font-size:15px;font-weight:700}
.ap-cur span{font-size:12.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-caret{color:var(--muted);font-size:12px}
/* the swatch: a ring in the skin's canvas with a dot of its accent */
.ap-sw{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  background:var(--bg);border:1px solid var(--line)}
.ap-sw i{display:block;width:13px;height:13px;border-radius:50%}
.ap-menu{position:absolute;z-index:60;top:calc(100% + 6px);left:0;right:0;max-height:340px;overflow:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);padding:5px}
.ap-menu[hidden]{display:none}
.ap-row{display:flex;align-items:center;gap:11px;width:100%;padding:9px 10px;border:0;border-radius:9px;
  background:transparent;cursor:pointer;font:inherit;color:var(--ink);text-align:left}
.ap-row:hover{background:var(--surface2)}
.ap-row:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.ap-row.on{background:var(--surface2)}
.ap-rtext{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.ap-name{font-size:14px;font-weight:650}
.ap-note{font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ap-canvas{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);flex:none}
.ap-check{flex:none;width:18px;text-align:center;color:var(--accent);font-weight:800;opacity:0}
.ap-row.on .ap-check{opacity:1}
.ap-foot{color:var(--muted);font-size:13.5px;line-height:1.6;max-width:70ch;margin:2px 0 22px}
/* Settings entry on the Account page */
.acct-settings{display:flex;align-items:center;gap:12px;padding:13px 15px;margin:18px 0 4px;
  background:var(--surface);border:1px solid var(--line);border-radius:12px;text-decoration:none;
  transition:border-color .15s ease}
.acct-settings:hover{border-color:var(--accent)}
.as-txt{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.as-txt b{font-size:15px;color:var(--ink)}
.as-txt span{font-size:12.5px;color:var(--muted)}
.as-go{color:var(--muted)}
@media (prefers-reduced-motion:reduce){ .ap-toggle,.acct-settings{transition:none} }

/* ===== Homepage editorial modules (spec §12.4, §13, §14) =====
   The point of these is rhythm: a wide opener, a dense rail, one standard trio,
   a text-only wire strip. Nothing here is a new visual language — it is the
   existing card vocabulary dealt into different shapes so the page reads as
   edited rather than tiled. */
.hp-open{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:22px;align-items:start;margin:6px 0 26px}
.grid-3{margin-bottom:26px}

/* Wide feature — art beside the text on desktop. */
.card-wide{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:0;overflow:hidden;align-items:stretch}
/* aspect-ratio:auto is load-bearing. The base .art rule sets aspect-ratio:16/10;
   combined with height:100% the browser derives WIDTH from height and the image
   overflows its grid column straight over the headline. Height drives, ratio off. */
.card-wide .art{margin:0;width:100%;min-width:0;height:100%;min-height:236px;
  aspect-ratio:auto;border-radius:0;background-size:cover;background-position:center}
.card-wide>*{min-width:0}
.card-wide .cw-body{padding:18px 20px 18px 22px;display:flex;flex-direction:column;justify-content:center;min-width:0}
.card-wide .cw-body h3{margin:9px 0 0;font-size:clamp(21px,1.55vw,27px);line-height:1.2}
.card-wide .cw-body .dek{margin:8px 0 0}

/* Thumbnail rows — the density workhorse. */
.thumb-list{display:flex;flex-direction:column;gap:2px}
.thumb-list.thumb-2col{display:grid;grid-template-columns:1fr 1fr;gap:2px 20px}
.card-thumb{position:relative;display:grid;grid-template-columns:118px minmax(0,1fr);gap:13px;
  align-items:start;padding:13px 2px;border-bottom:1px solid var(--hairline);
  color:inherit;text-decoration:none;transition:background .15s ease}
.card-thumb:last-child{border-bottom:0}
.card-thumb:hover{background:var(--surface)}
.card-thumb .ct-art{position:relative;aspect-ratio:4/3;border-radius:9px;overflow:hidden;background-size:cover;background-position:center}
.card-thumb .ct-body{min-width:0}
.card-thumb h4{margin:6px 0 0;font-size:16px;line-height:1.32;font-weight:650;color:var(--ink)}
.card-thumb .savebtns{position:absolute;right:2px;bottom:11px;opacity:0;transition:opacity .15s ease}
.card-thumb:hover .savebtns,.card-thumb:focus-within .savebtns{opacity:1}

/* Wire strip — deliberately art-free. */
.brief-strip{border-top:1px solid var(--line);margin:4px 0 26px}
.brief-row{display:grid;grid-template-columns:112px minmax(0,1fr) auto;gap:16px;align-items:baseline;
  padding:13px 4px;border-bottom:1px solid var(--hairline);text-decoration:none;transition:background .15s ease}
.brief-row:hover{background:var(--surface)}
.brief-row .br-sec{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.brief-row .br-h{font-size:16.5px;line-height:1.34;font-weight:600;color:var(--ink)}
.brief-row .br-meta{font-size:12.5px;color:var(--faint);white-space:nowrap}

@media (max-width:900px){
  .hp-open{grid-template-columns:1fr;gap:8px}
  .card-wide{grid-template-columns:1fr}
  .card-wide .art{min-height:0;aspect-ratio:16/9}
  .card-wide .cw-body{padding:14px 14px 16px}
  .thumb-list.thumb-2col{grid-template-columns:1fr}
}
@media (max-width:560px){
  /* Mobile density: thumbnails, not a column of full-bleed cinema. */
  .card-thumb{grid-template-columns:104px minmax(0,1fr);gap:11px;padding:11px 0}
  .card-thumb h4{font-size:15.5px;margin-top:5px}
  .brief-row{grid-template-columns:1fr auto;gap:4px 10px;padding:11px 0}
  .brief-row .br-sec{grid-column:1;font-size:10px}
  .brief-row .br-meta{grid-column:2;grid-row:1}
  .brief-row .br-h{grid-column:1/-1;font-size:15.5px}
}
/* Touch widths have no hover, so the save row must always be visible — and an
   absolutely-positioned row anchored to the card's bottom edge lands on top of
   the NEXT card's tag pills once the headline wraps to four or five lines.
   Verified failing at 360/390/414/480/560 (buttons over "Brief" pill and over
   the following h4). Below 640 the row rejoins the flow as a right-aligned
   grid item under the byline, so it can never collide with anything. */
@media (max-width:640px){
  .card-thumb .savebtns{
    position:static;opacity:1;grid-column:2;grid-row:2;
    display:flex;gap:8px;justify-content:flex-end;margin-top:7px;
  }
}

/* spec §8 — let the page breathe on large monitors without stretching prose.
   Body copy keeps its own measure; only grids/imagery use the extra width. */
@media (min-width:1440px){ :root{ --maxw:1320px; } }

/* ===== Colour-forward appearances (nine more; eighteen total) =====
   These are not tints of dark/light — each is its own canvas hue. Same
   semantic tokens, same components; contrast verified per skin. ===== */
[data-theme="forest"]{ /* Forest */
  --bg:#08150f;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(60,200,130,.12), transparent 70%);
  --surface:#0e2018; --surface2:#132a20; --surface3:#1a382b;
  --ink:#e6f5ec; --ink-soft:#c0dccd; --muted:#84a894; --faint:#80a390;
  --line:#1c3a2b; --hairline:#152a20;
  --accent:#3fbf7f; --accent2:#6fd9a2; --accent-ink:#7fe0ae;
  --on-accent:#08150f;
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="crimson"]{ /* Crimson */
  --bg:#170a0d;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(230,80,105,.12), transparent 70%);
  --surface:#221115; --surface2:#2c161b; --surface3:#3a1d24;
  --ink:#f7e8eb; --ink-soft:#dcc3c9; --muted:#b0888f; --faint:#ac848c;
  --line:#3a2027; --hairline:#2a161b;
  --accent:#e8536b; --accent2:#f4808f; --accent-ink:#f78e9c;
  --on-accent:#170a0d;
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="ocean"]{ /* Ocean */
  --bg:#061419;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(50,180,215,.12), transparent 70%);
  --surface:#0b2028; --surface2:#0f2a34; --surface3:#153845;
  --ink:#e2f3f8; --ink-soft:#bcd9e2; --muted:#7fa5b1; --faint:#7ba1ad;
  --line:#173846; --hairline:#112a34;
  --accent:#31b6d9; --accent2:#66cfea; --accent-ink:#78d7ef;
  --on-accent:#061419;
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="amethyst"]{ /* Amethyst */
  --bg:#140a1c;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(190,110,240,.13), transparent 70%);
  --surface:#1e1029; --surface2:#271534; --surface3:#331c44;
  --ink:#f3e9fa; --ink-soft:#d7c4e4; --muted:#a487b5; --faint:#a083b2;
  --line:#331f42; --hairline:#241531;
  --accent:#c06ff0; --accent2:#d497f7; --accent-ink:#dba4f8;
  --on-accent:#140a1c;
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="cobalt"]{ /* Cobalt */
  --bg:#070d1f;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(70,120,255,.14), transparent 70%);
  --surface:#0d152e; --surface2:#111c3b; --surface3:#17264e;
  --ink:#e6ecfb; --ink-soft:#c0cbe8; --muted:#8593bb; --faint:#8290b8;
  --line:#17274c; --hairline:#101b38;
  --accent:#4d7cff; --accent2:#80a2ff; --accent-ink:#8fadff;
  --on-accent:#070d1f;
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="ember"]{ /* Ember */
  --bg:#170e07;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(255,140,60,.12), transparent 70%);
  --surface:#22160c; --surface2:#2c1d10; --surface3:#3a2716;
  --ink:#faeee3; --ink-soft:#e0cbb6; --muted:#b39179; --faint:#af8d75;
  --line:#3a2817; --hairline:#291c10;
  --accent:#ff8a3d; --accent2:#ffa96e; --accent-ink:#ffb37c;
  --on-accent:#170e07;
  --rtfc-glyph:url("brand/rtfc-glyph-256.png");
}
[data-theme="sand"]{ /* Sand */
  --bg:#f6efe2;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(190,140,60,.10), transparent 70%);
  --surface:#fffaf0; --surface2:#efe5d3; --surface3:#e4d7bf;
  --ink:#241c10; --ink-soft:#473a26; --muted:#6f5f45; --faint:#736349;
  --line:#e0d2b8; --hairline:#e9dec9;
  --accent:#8a5a12; --accent2:#a8752a; --accent-ink:#774d0e;
  --on-accent:#ffffff;
  --rtfc-glyph:url("brand/rtfc-glyph-ink-256.png");
}
[data-theme="rose"]{ /* Rose */
  --bg:#fdeef3;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(220,80,140,.10), transparent 70%);
  --surface:#fffafc; --surface2:#f7e0e9; --surface3:#f0cfdc;
  --ink:#2a1119; --ink-soft:#4d2833; --muted:#7d5461; --faint:#815866;
  --line:#eed3de; --hairline:#f5e2ea;
  --accent:#b8265f; --accent2:#d4497e; --accent-ink:#9f1f52;
  --on-accent:#ffffff;
  --rtfc-glyph:url("brand/rtfc-glyph-ink-256.png");
}
[data-theme="mint"]{ /* Mint */
  --bg:#ecf7f1;
  --bg-glow:radial-gradient(1200px 500px at 50% -10%, rgba(40,170,125,.10), transparent 70%);
  --surface:#fbfffd; --surface2:#dcefe5; --surface3:#c9e4d6;
  --ink:#0f2119; --ink-soft:#2b4438; --muted:#4f6d5f; --faint:#537163;
  --line:#d3e8dd; --hairline:#e2f0e9;
  --accent:#12795a; --accent2:#1f9b75; --accent-ink:#0f6b50;
  --on-accent:#ffffff;
  --rtfc-glyph:url("brand/rtfc-glyph-ink-256.png");
}

/* ===== Splash eye-candy: velocity ring, motes =====
   The ring reads as rotational energy: wide and bright while the mark is
   spinning flat out, then it collapses onto the glyph's own edge at the hard
   stop and fades with it. Colour is the violet from inside the logo itself
   (#6018f0), not an arbitrary neon. Everything is transform/opacity only. */
#boot-splash .bs-ring{
  position:absolute;top:50%;left:50%;width:104px;height:104px;margin:-52px 0 0 -52px;
  border-radius:50%;pointer-events:none;
  box-shadow:0 0 34px 10px rgba(96,24,240,.42), inset 0 0 20px 2px rgba(96,24,240,.30);
  border:1px solid rgba(150,110,255,.55);
  transform:scale(1.62);opacity:.95;
  animation:bsRingBreathe .42s ease-in-out infinite alternate;
  will-change:transform,opacity}
#boot-splash .bs-ring2{
  box-shadow:0 0 58px 18px rgba(96,24,240,.22);border-color:rgba(150,110,255,.20);
  transform:scale(2.15);animation-duration:.62s;opacity:.7}
@keyframes bsRingBreathe{from{transform:scale(1.52)}to{transform:scale(1.78)}}
/* hard stop: the ring snaps down onto the mark's edge, then leaves with it */
#boot-splash.stopped .bs-ring{
  animation:none;transform:scale(1.06);opacity:.85;
  transition:transform .18s cubic-bezier(.2,.9,.25,1),opacity .3s ease}
#boot-splash.stopped .bs-ring2{transform:scale(1.16);opacity:0}
#boot-splash.out .bs-ring{opacity:0}

/* Motes: a few slow drifting particles so the canvas is not dead space. */
#boot-splash .bs-motes{position:absolute;inset:0;overflow:hidden;pointer-events:none}
#boot-splash .bs-motes i{position:absolute;width:3px;height:3px;border-radius:50%;
  background:rgba(150,110,255,.9);box-shadow:0 0 10px 2px rgba(96,24,240,.55);
  animation:bsDrift linear infinite;will-change:transform,opacity}
#boot-splash .bs-motes i:nth-child(1){left:18%;top:72%;animation-duration:5.5s}
#boot-splash .bs-motes i:nth-child(2){left:34%;top:88%;animation-duration:7s;animation-delay:-2s}
#boot-splash .bs-motes i:nth-child(3){left:58%;top:80%;animation-duration:6.2s;animation-delay:-4s}
#boot-splash .bs-motes i:nth-child(4){left:74%;top:92%;animation-duration:8s;animation-delay:-1s}
#boot-splash .bs-motes i:nth-child(5){left:46%;top:96%;animation-duration:6.8s;animation-delay:-3s}
#boot-splash .bs-motes i:nth-child(6){left:86%;top:76%;animation-duration:7.6s;animation-delay:-5s}
@keyframes bsDrift{
  0%{transform:translateY(0) scale(.7);opacity:0}
  12%{opacity:.85}
  85%{opacity:.5}
  100%{transform:translateY(-60vh) scale(1.15);opacity:0}}

/* ===== Pointer glow =====
   A soft accent-coloured light that follows the cursor. Pointer-events:none so
   it can never intercept a click; hidden entirely on touch (no cursor to track)
   and under reduced motion. */
#rtfc-cursor{position:fixed;top:0;left:0;width:340px;height:340px;margin:-170px 0 0 -170px;
  border-radius:50%;pointer-events:none;z-index:5;opacity:0;
  background:radial-gradient(circle,color-mix(in srgb,var(--accent) 26%,transparent),transparent 62%);
  transition:opacity .35s ease;will-change:transform}
#rtfc-cursor.on{opacity:.75}
/* Touch devices hide the POINTER glow, but the TILT glow (same element, .tilt,
   armed only when the gyro path engages) is allowed through — slightly smaller
   and softer, since phone screens are close to the face. */
@media (hover:none),(pointer:coarse){
  #rtfc-cursor{display:none}
  .tilt-glow #rtfc-cursor.tilt{display:block;width:250px;height:250px;margin:-125px 0 0 -125px;
    background:radial-gradient(circle,color-mix(in srgb,var(--accent) 21%,transparent),transparent 62%)}
  .tilt-glow #rtfc-cursor.tilt.on{opacity:.65}
}

@media (prefers-reduced-motion:reduce){
  #boot-splash .bs-ring{animation:none;transform:scale(1.06)}
  #boot-splash .bs-ring2{display:none}
  #boot-splash .bs-motes{display:none}
  #rtfc-cursor{display:none}
}

/* ================= THE PROMPT LIBRARY (/prompts) =================
   Built to be taken, not admired: a monospace block you can read at a glance,
   a copy button that always does something (clipboard where available, text
   selection where it isn't), and a whole-library .md download. */
.pr-bar{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin:18px 0 6px; }
.pr-dl{ font:inherit; font-size:13px; font-weight:700; cursor:pointer; border:0;
  color:var(--accent-ink,#fff); background:linear-gradient(120deg,var(--accent),var(--accent2));
  border-radius:99px; padding:10px 18px; transition:transform .16s,box-shadow .16s; }
.pr-dl:hover{ transform:translateY(-2px);
  box-shadow:0 14px 30px -14px color-mix(in srgb,var(--accent) 75%,transparent); }
.pr-bar input{ flex:1; min-width:180px; background:var(--surface); border:1px solid var(--line);
  border-radius:12px; padding:11px 15px; font:inherit; font-size:14px; color:var(--ink); outline:none; }
.pr-bar input:focus{ border-color:var(--accent); }
#pr-count{ font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.pr-sec{ margin:0 0 30px; }
.pr-card{ border:1px solid var(--line); border-radius:14px; background:var(--surface);
  padding:16px 18px; margin:0 0 14px; transition:border-color .16s; }
.pr-card:hover{ border-color:color-mix(in srgb,var(--accent) 45%,var(--line)); }
.pr-head{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.pr-head b{ font-family:var(--serif); font-size:17px; font-weight:640; color:var(--ink); line-height:1.25; }
.pr-copy{ flex:none; font:inherit; font-size:11.5px; font-weight:700; cursor:pointer;
  color:var(--accent2); background:none; border:1px solid var(--hairline); border-radius:99px;
  padding:5px 13px; transition:all .15s; }
.pr-copy:hover{ border-color:var(--accent); color:var(--ink); }
.pr-copy.ok{ color:var(--ok,#3fb984); border-color:var(--ok,#3fb984); }
.pr-use{ font-size:13px; color:var(--ink-soft); margin-top:5px; }
.pr-needs{ font-size:11px; letter-spacing:.04em; text-transform:uppercase; font-weight:650;
  color:var(--faint); margin-top:6px; }
.pr-text{ margin:12px 0 0; padding:14px 16px; border-radius:11px; background:var(--surface2);
  border:1px solid var(--hairline); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:12.5px; line-height:1.62; color:var(--ink-soft); white-space:pre-wrap;
  word-break:break-word; max-height:340px; overflow:auto; }
.pr-why{ margin-top:10px; }
.pr-why summary{ cursor:pointer; font-size:12px; font-weight:650; color:var(--accent2); }
.pr-why p{ font-size:12.5px; line-height:1.6; color:var(--muted); margin:8px 0 0; }

/* shared freshness footer (extensions + prompts) */
.ext-foot{ display:flex; flex-direction:column; gap:7px; margin:28px 0 6px; padding:16px 18px;
  border:1px solid var(--hairline); border-radius:14px; background:var(--surface); }
.xf-when{ font-size:12.5px; color:var(--ink-soft); }
.xf-note{ font-size:12px; line-height:1.55; color:var(--muted); }
.ext-foot a{ color:var(--accent2); font-weight:650; text-decoration:none; }
@media (max-width:640px){
  .pr-bar{ flex-direction:column; align-items:stretch; }
  .pr-text{ font-size:12px; padding:12px 13px; }
}

/* extensions: job-based group headings */
.ext-group{ display:flex; align-items:baseline; gap:12px; margin:34px 0 14px; padding-bottom:9px;
  border-bottom:2px solid color-mix(in srgb,var(--accent) 40%,var(--line)); }
.ext-group:first-child{ margin-top:6px; }
.eg-l{ font-family:var(--serif); font-size:21px; font-weight:640; color:var(--ink); }
.eg-n{ font-size:11.5px; color:var(--faint); font-variant-numeric:tabular-nums; margin-left:auto; }
.rn-group{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; font-weight:700;
  color:var(--faint); margin:14px 0 4px; padding-left:10px; }
.rn-group:first-child{ margin-top:2px; }
@media (max-width:900px){ .rn-group{ display:none; } }