/* =============================================================================
   HALO ZONE — public site design system.

   Dark, cinematic, editorial. The target is premium sports media with a
   front-office temperament: something closer to a broadcast graphics package
   than to a blog theme.

   THE PALETTE IS LOCKED. Navy, red, silver, halo gold and white come from the
   brand board and are not adjusted here. What IS derived is the dark end of the
   scale: the mockup's page ground is far darker than brand navy, so --bg and the
   surface ramp are navy pulled down toward black. Deriving depth from the brand
   hue rather than from neutral grey is what keeps the whole page feeling like one
   object instead of a dark theme with blue accents dropped on top.

   RED IS RATIONED. It reads as urgency, so it is spent on section rules, the
   final headline line, category badges, active nav and primary CTAs — and
   nowhere else. A page washed in red stops signalling anything.

   NO EXTERNAL FONTS, NO CDN, NO TRACKING. The origin sits behind a default-deny
   perimeter and the site loads nothing it does not serve itself.
   ============================================================================= */

:root{
  /* Locked brand */
  --navy:#003263;
  --red:#BA0021;
  --silver:#C4CED4;
  --gold:#C89B3C;
  --white:#FFFFFF;

  /* Derived dark ramp — brand navy pulled toward black, never neutral grey. */
  --bg:#070B14;
  --bg-2:#0A1120;
  --surface:#0E1729;
  --surface-2:#122036;
  --line:#1D2B44;
  --line-soft:#16223A;

  --text:#EEF2F7;
  --text-2:#A9B6C7;
  --text-3:#75859B;

  --red-dim:#8C0019;
  --gold-dim:#8A6B26;

  --shell:1520px;
  --gutter:32px;
  --radius:6px;
  color-scheme:dark;

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,"SF Mono",monospace;

  /* One condensed athletic display face is the single biggest remaining upgrade
     here; it needs a self-hosted file rather than a CDN, so the display stack
     leans on the heaviest available system faces and tightened tracking. */
  --display:"Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

img{max-width:100%;height:auto;display:block}
a{color:inherit}

.wrap{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}

/* Visible only to screen readers until focused — the skip link. */
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.skip:focus{
  position:fixed;left:16px;top:12px;z-index:999;width:auto;height:auto;
  clip:auto;margin:0;padding:10px 16px;background:var(--red);color:#fff;
  border-radius:var(--radius);font-weight:700;
}

/* Focus is designed rather than suppressed: the site is dark, so the ring is
   gold for contrast against every surface it can land on. */
:focus-visible{outline:2px solid var(--gold);outline-offset:2px;border-radius:2px}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}

  /* Home's desk needs no carve-out here any more. Its hierarchy is set by CONTENT — an empty
     desk takes less of the row — and that is a static layout fact, not an animation, so there
     is nothing to reduce. The blanket rule above still covers every genuine transition. */
}

/* =============================================================================
   Type scale
   ============================================================================= */

/* Gold, once. This is the only brand-voice line in the page body; the desk's promises and the
   story kickers are editorial function, not brand, and are deliberately not gold. */
.eyebrow{
  margin:0 0 18px;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.28em;color:var(--gold);
}

h1,h2,h3,h4{font-family:var(--display);margin:0;letter-spacing:-.02em;line-height:1.08}

/* =============================================================================
   Header
   ============================================================================= */

.masthead{
  background:linear-gradient(180deg,#050810 0%,var(--bg-2) 100%);
  border-bottom:1px solid var(--line);
  position:sticky;top:0;z-index:50;
}
.masthead .wrap{
  display:flex;align-items:center;gap:28px;
  min-height:88px;
}

.brand{display:flex;align-items:center;gap:14px;text-decoration:none;flex:0 0 auto}
.brand img{height:46px;width:auto}
/* Fallback wordmark, shown when the brand file is not present. It is deliberately
   TYPOGRAPHIC and never an approximation of the shield: a redrawn mark is worse
   than no mark, because it ships a second, wrong logo. */
.brand .wordmark{font-family:var(--display);font-weight:900;font-size:24px;
  letter-spacing:.02em;text-transform:uppercase;color:var(--white);line-height:1}
.brand .wordmark b{color:var(--red);font-weight:900}
.brand .wordmark small{display:block;font-size:9px;letter-spacing:.18em;color:var(--gold);
  font-weight:700;margin-top:3px}

nav.main{display:flex;gap:26px;margin-left:12px;flex-wrap:wrap}
nav.main a{
  font-size:12.5px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  text-decoration:none;color:var(--text-2);padding:6px 0;
  border-bottom:2px solid transparent;transition:color .15s,border-color .15s;
}
nav.main a:hover{color:var(--white)}
nav.main a[aria-current=page]{color:var(--white);border-bottom-color:var(--red)}

.masthead .spacer{flex:1 1 auto}

.ecosystem{
  text-align:right;font-size:10px;font-weight:800;line-height:1.5;
  text-transform:uppercase;letter-spacing:.14em;color:var(--gold);
}

/* Mobile menu button — hidden on desktop, real button semantics. */
.menu-btn{
  display:none;background:transparent;border:1px solid var(--line);color:var(--text);
  width:44px;height:44px;border-radius:var(--radius);cursor:pointer;
  align-items:center;justify-content:center;
}
.menu-btn:hover{border-color:var(--red)}
.menu-btn svg{width:20px;height:20px}


/* =============================================================================
   HOME — the brief, the desk, the footing

   V1 was a five-module dashboard: Featured, You're the GM, Team Context, Latest and Fan
   Voice, each in a bordered panel under its own red-ruled heading, with three of the page's
   four buttons pointing at the same GM page in different words. Ten bordered boxes and five
   competing headings answer "what can I click?" — never "what is the front office dealing
   with?" — and with one live decision and two published pieces behind them, the modules had
   to pad themselves to look full.

   V2 is one narrative with one primary action. Chrome is removed rather than restyled: no
   panel borders, no section rules, no repeated buttons. Hierarchy is carried by scale,
   spacing and a single accent, which is what makes a page with very little on it read as
   confident rather than empty.
   ============================================================================= */

/* ---- Buttons ------------------------------------------------------------
   A shared primitive, not a Home component: the GM ballot, the article CTA and the archive
   all use these. They lived inside the old hero block purely because that is where the first
   button happened to appear, which meant replacing the hero silently took every button on the
   site with it. Kept here, above the page sections, so that cannot happen again. */

.btn{
  display:inline-flex;align-items:center;gap:10px;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;
  padding:15px 26px;border-radius:var(--radius);text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
}
.btn-primary{background:var(--red);color:#fff;border-color:var(--red)}
.btn-primary:hover{background:#d4062a;border-color:#d4062a}
.btn-ghost{background:transparent;color:var(--white);border-color:rgba(255,255,255,.35)}
.btn-ghost:hover{border-color:var(--white);background:rgba(255,255,255,.07)}
.btn-quiet{background:var(--surface-2);color:var(--white);border-color:var(--line)}
.btn-quiet:hover{border-color:var(--red)}

/* ---- The brief ---------------------------------------------------------- */

.brief{
  position:relative;
  background:
    radial-gradient(120% 130% at 12% 0%, rgba(0,50,99,.30), transparent 62%),
    linear-gradient(180deg, var(--bg-2) 0%, var(--bg) 100%);
}
.brief .wrap{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(32px,5vw,76px); align-items:center;
  padding-top:clamp(48px,7vw,84px); padding-bottom:clamp(48px,7vw,84px);
}
/* The question the entrance closes on is the first thing Home opens with. Repeating it is
   the point: it is the product's thesis, and hearing it twice is what stitches the cinematic
   to the publication. Set as two blocks so the payoff line can carry the weight alone. */
.brief h1{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(34px,4.6vw,62px); line-height:1.02; letter-spacing:-.035em;
  color:var(--text);
}
.brief h1 span{display:block}
.brief h1 .accent{color:var(--white)}
.brief .deck{
  margin:22px 0 0; max-width:46ch;
  font-size:clamp(15px,1.25vw,17.5px); line-height:1.6; color:var(--text-2);
}

/* ---- Today's decision --------------------------------------------------- */

/* The live scenario, sitting beside the identity rather than under a heading three screens
   down. It is the only element on the page with a filled button. */
.decision{
  border-left:2px solid var(--red);
  padding:4px 0 4px clamp(18px,2vw,28px);
}
.decision .label{
  display:flex; align-items:center; gap:9px; margin:0 0 14px;
  font-size:11px; font-weight:800; letter-spacing:.2em; text-transform:uppercase;
  color:var(--text-3);
}
/* A quiet mark that something is open right now. Two pixels of red, no pulsing: a dot that
   throbs is a notification badge, and this is a desk, not an inbox. */
.decision .live{
  width:7px; height:7px; border-radius:50%; background:var(--red); flex:0 0 auto;
}
.decision-q{
  margin:0; font-family:var(--display); font-weight:800;
  font-size:clamp(23px,2.5vw,34px); line-height:1.2; letter-spacing:-.022em;
  color:var(--white);
}
/* The hard numbers, lifted from the scenario's own setup — never composed here. They exist so
   the reader can feel the shape of the call before they open it. */
/* Filled grey pills in a mono face read as disabled form controls — close to the opposite of
   the truth, since these numbers are the most persuasive content in the brief and the reason
   the call is hard. A rule-separated stat line with the figure in white reads as a broadcast
   strip, and three more boxes leave the page. */
.stakes{
  display:flex; flex-wrap:wrap; gap:6px 0; margin:20px 0 0; padding:0; list-style:none;
}
.stakes li{
  font-family:var(--mono); font-size:13px; letter-spacing:.01em; color:var(--text-2);
  padding:1px 16px; border-left:1px solid var(--line);
}
.stakes li:first-child{padding-left:0; border-left:0}
.stakes b{font-weight:700; color:var(--white)}
.decision-act{display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:26px}
.decision-meta{
  margin:0; font-size:12px; letter-spacing:.06em; text-transform:uppercase; color:var(--text-3);
}
.decision-sub{margin:10px 0 22px; font-size:14.5px; line-height:1.55; color:var(--text-2)}
.decision-empty{border-left-color:var(--line)}

/* ---- The desk ----------------------------------------------------------- */

main{display:block}

/* Two reading surfaces under their own promises. Putting "What happened" and "What it means"
   next to each other is the entire explanation of why the site has both — no copy required.

   This is the only interactive system on the page, and it is deliberately the smallest one
   that changes HIERARCHY rather than just moving: pointing at or tabbing into one column
   gives it more of the row and lets the other step back. flex-basis and opacity only, driven
   by :focus-within on real anchors so the keyboard gets the same behaviour as the mouse. */
/* align-items:flex-start is the whole fix for the empty desk. Stretched, both columns took
   their height from the taller one, so an empty News desk rendered as a 500px hole with one
   sentence at the top of it. Started, an empty desk is simply a short one. */
.desk{
  display:flex; align-items:flex-start; gap:clamp(28px,4vw,64px);
  padding:clamp(48px,6vw,76px) 0 clamp(56px,7vw,88px);
}
.desk-col{flex:1 1 0; min-width:0}
/* An empty desk recedes and the working one takes the room. Two equal columns where one is
   two lines of text and the other is a full story reads as a layout with a hole in it; this
   reads as a quiet day on one desk. */
/* The only dynamic hierarchy left, and the only one that earned its place: a desk with nothing
   on it takes less of the row. Driven by CONTENT, so it holds for a pointer, a touch screen, a
   keyboard and a screenshot alike, and needs no motion for reduced-motion to undo.
   The hover expansion here is deleted: growing a column to 1.55 and dimming its neighbour to
   52% moved half the page whenever the pointer crossed it on the way to a link, and pointing at
   the EMPTY desk dimmed the one with the work on it. */
.desk-col[data-empty]{flex-grow:.62}

.desk-head{margin:0 0 26px}
/* Silver, not gold. These two lines are the best idea on the page, but their power is in the
   words and the adjacency, not the colour — and three gold objects in one view is a brand
   accent turned into a decoration. Gold is spent once, on the eyebrow. */
.promise{
  margin:0 0 7px; font-size:11px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--silver);
}
.desk-head h2{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(20px,1.9vw,26px); letter-spacing:-.02em; color:var(--white);
}

.stories{display:flex; flex-direction:column}
/* No card, no border, no button. The headline is the link and the whole row is the target. */
.story{
  display:block; text-decoration:none; color:inherit;
  padding:20px 0; border-top:1px solid var(--line-soft);
  transition:border-color .25s ease;
}
.story:first-child{border-top:0; padding-top:0}
.story:hover{border-top-color:var(--red)}
.story:hover h3{color:var(--white)}
/* Article artwork is SQUARE — 2048x2048, with the piece's headline set into the plate. Cropping
   it to a 21:9 band threw away 57% of the image, sliced the baked-in type in half, and put
   158,000px of cream (luma 198, on a ground of 11) where it outweighed the decision above it.
   A 1:1 thumbnail of a 1:1 source crops nothing and cuts the bright area by about 83%. */
/* One dominant plate, the rest supporting — the lead runs about twice the width of the items
   under it. Both sizes share a two-track grid so the column keeps ONE left edge for its
   headlines; without it the lead's text indents past its siblings and the column looks broken.
   Opt-in per column (`data-art`), so a desk with no artwork gets no reserved track rather than
   100px of hanging indent in front of nothing. */
.stories[data-art] .story{
  display:grid; grid-template-columns:84px minmax(0,1fr);
  gap:16px; align-items:start;
}
.stories[data-art] .story-lead{
  grid-template-columns:clamp(116px,12vw,164px) minmax(0,1fr);
  gap:clamp(16px,1.5vw,24px);
}
.stories[data-art] .story-text{grid-column:2}
.story-shot{
  aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius);
  background:var(--surface-2);
  /* A hairline mount. Cream artwork against near-black otherwise ends where nothing catches
     it, and the plate reads as a hole cut in the page rather than something placed on it. */
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);
}
/* contain, not cover: see THE EDITORIAL INDEX above. Identical for a square source, and
   non-destructive for anything else. */
/* <picture> is an inline wrapper with no box of its own, so it has to be told to fill the plate
   the same way the bare <img> used to. Without this the frame keeps its 1:1 box and the image
   sits at its intrinsic size inside it. */
.story-shot picture{display:block; width:100%; height:100%}
.story-shot img{width:100%; height:100%; object-fit:contain; display:block}
/* Scoped to the story, so it stops colliding with the list/article kicker further down — same
   name, later in the file, and therefore the one that actually rendered. Quiet, not red: this
   is provenance, not urgency. Red on Home means "there is a live call", and nothing else. */
.story .kicker{
  margin:0 0 7px; font-size:10.5px; font-weight:800; letter-spacing:.16em;
  text-transform:uppercase; color:var(--text-3);
}
.story h3{
  margin:0; font-family:var(--display); font-weight:800; letter-spacing:-.015em;
  font-size:17px; line-height:1.3; color:var(--text);
  transition:color .2s ease;
}
.story-lead h3{font-size:clamp(19px,1.5vw,22px); line-height:1.26}
.story-sum{
  margin:10px 0 0; max-width:62ch; font-size:14px; line-height:1.55; color:var(--text-2);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.story .when{margin:10px 0 0; font-size:11.5px; letter-spacing:.05em; color:var(--text-3)}

/* A sparse desk still has to say what it is FOR. "Nothing published here yet" under a bare
   word is ambiguous; the same silence under "What happened" reads as a desk waiting. */
.desk-empty{
  margin:0; padding:22px 0; font-size:15px; line-height:1.6; color:var(--text-3);
  border-top:1px solid var(--line-soft); max-width:34ch;
}
.desk-more{
  display:inline-block; margin-top:22px; text-decoration:none;
  font-size:11.5px; font-weight:800; letter-spacing:.16em; text-transform:uppercase;
  color:var(--text-3); transition:color .2s ease;
}
.desk-more:hover{color:var(--white)}

/* ---- Tonal chaptering ----------------------------------------------------
   THE BRIEF -> THE DESK -> THE FOOTING all lived on one flat value and merged into a single
   scroll. One gradient on <main> lifts the ground under the desk by six luminance steps and
   lets it fall away under the closing line. The stops are absolute lengths from the top and
   bottom of <main>, so the ramp lands on the same content whatever the desk's height, and no
   edge is visible — only a change in the room. <main> is already a block at body width, so this
   bleeds edge to edge without the 100vw-versus-scrollbar overflow a pseudo-element would cost.
   Home only; the list and article pages have their own rhythm. */
body[data-page=home] main{
  background:linear-gradient(180deg,
    var(--bg) 0,
    var(--bg-2) 110px,
    var(--bg-2) calc(100% - 300px),
    var(--bg) 100%);
}

/* The same move on the section fronts, because it is the same rule: THE GROUND LIFTS UNDER AN
   INDEX OF THINGS TO READ. On Home that is the desk, with the brief above it and the closing
   line below it on the darker ground; here it is the list, with the section head above it. The
   stops sit just under the standfirst and just above the footer, so the two pages breathe the
   same way without either of them drawing a box.

   The article page is deliberately NOT in this rule. It is one reading surface rather than an
   index, and a flat dark ground is what long-form wants — the same reason Home's brief and
   footing stay down here too. */
body[data-page=news] main,
body[data-page=analysis] main{
  background:linear-gradient(180deg,
    var(--bg) 0,
    var(--bg-2) 150px,
    var(--bg-2) calc(100% - 90px),
    var(--bg) 100%);
}

/* ---- The footing -------------------------------------------------------- */

/* The positioning line, said once, at the end. As a hero slogan it competed with the
   decision; as a closing statement it is the page signing its own work. */
.footing{padding:clamp(40px,5vw,64px) 0 clamp(48px,6vw,76px)}
.footing-line{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(24px,3.1vw,42px); line-height:1.08; letter-spacing:-.03em;
  color:var(--text-3);
}
.footing-line span{display:inline-block; margin-right:.35em}
.footing-line .accent{color:var(--white)}
.footing-sub{
  margin:16px 0 0; font-size:12px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--text-3);
}
/* =============================================================================
   THE EDITORIAL INDEX — one image contract for every reading surface

   THE CONTRACT: Halo Zone's article artwork is a PLATE. It is generated square, with the
   piece's own headline and stat block set into it, so it is not a photograph that can be
   recomposed by a crop — it is a designed object with type in it. Cropping it to a landscape
   band cuts that type in half, which is what the list pages were doing at 16:9.

   So the rule, everywhere: NEVER RE-FRAME THE ARTWORK. The frame is 1:1 and the fit is
   `contain`, which is a no-op for the square images the pipeline produces today and letterboxes
   rather than crops if a non-square variant is ever published (see lib/site.js — the public
   image is whichever variant generated last, and it carries no aspect guarantee).

   What varies between surfaces is SIZE, never shape:

       article hero    a plate under the byline, capped so it stays an illustration
       index lead      the newest piece, about twice its neighbours
       index item      a thumbnail

   And the layout is the same on Home and on the list pages, because they are the same act of
   reading: a row per piece, plate left, headline right, no card and no border. Bordered cards
   with square art would have produced exactly the wall of tiles this system exists to avoid,
   and it is the headline that has to win — the artwork already says the headline once.
   ============================================================================= */

/* News and Analysis each restate their promise under the heading. It matters most when a
   surface is sparse: "Nothing published here yet" under a bare word is ambiguous, while the
   same message under "What it means" reads as a desk waiting for its first piece. */
/* Superseded by .page-head/.standfirst, kept because renderList still emits it for any caller
   that has not moved over. */
.list-standfirst{margin:10px 0 0;max-width:62ch;font-size:17px;color:var(--text-2);line-height:1.55}

/* A section front is a reading surface, so it holds a measure instead of spreading to fill a
   1920 viewport. Wider than the article's 760px because these rows carry a plate as well. */
.index{max-width:880px;margin-top:26px}

/* =============================================================================
   You're the GM — the flagship module. Deliberately unlike an article card.
   ============================================================================= */


/* =============================================================================
   Team context
   ============================================================================= */


.context-note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:11.5px;color:var(--text-3);letter-spacing:.03em;
}

/* =============================================================================
   Empty states — branded, never a hole in the page
   ============================================================================= */

/* A dashed box with centred text is the visual language of a DROP ZONE — an upload target, a
   placeholder, a template someone has not filled in. It was the one thing on the site that made
   an honest empty desk look like a broken one. The same silence in the same treatment Home uses
   for its empty News desk — a hairline and a quiet line — reads as a surface waiting rather
   than a surface that failed. */
.empty{
  /* The top margin matters: flush against the standfirst, the hairline read as an underline on
     it rather than as the rule above the message. The bottom padding gives a genuinely empty
     section front a shape instead of dropping straight into the footer. */
  margin:30px 0 0; padding:24px 0 56px; max-width:44ch;
  border-top:1px solid var(--line-soft);
  font-size:15px; line-height:1.6; color:var(--text-3);
}
.empty .mark{width:52px;height:52px;margin:0 auto 16px;opacity:.75}
.empty h3{font-size:17px;font-weight:900;text-transform:uppercase;letter-spacing:.1em;
  color:var(--white);margin-bottom:8px}
.empty p{margin:0 auto;max-width:460px;color:var(--text-2);font-size:14.5px}

/* =============================================================================
   Article page
   ============================================================================= */

.article-hero{border-bottom:1px solid var(--line);background:var(--bg-2);padding:52px 0 42px}
.article-hero h1{font-size:clamp(30px,4vw,54px);font-weight:900;line-height:1.06;
  max-width:20ch;margin:16px 0 0}
.article-hero .deck{margin:20px 0 0;max-width:62ch;font-size:19px;color:var(--text-2);line-height:1.55}
.article-hero .byline{margin-top:22px;font-size:12.5px;color:var(--text-3);letter-spacing:.05em}

/* ---- About — the methodology page ---------------------------------------
   About holds the most valuable copy on the site: every reason a reader has to believe anything
   published here. It was rendered as one undifferentiated 70ch column of h2/h3/p — the substance
   of a masthead statement in the shape of a README, which is the single biggest reason the
   secondary pages read as a different product from Home.
   Same words, given structure: a labelled section, then one claim per rule-separated row. No
   cards — Home removed those, and a grid of boxes would make a set of editorial commitments look
   like a feature list. */
.about-sec{padding:clamp(36px,4.2vw,56px) 0 0}
/* 880px is the same measure the section fronts use for their index, so About's rules line up
   with News and Analysis rather than sitting in a narrower column of their own. The READING
   width stays tighter — the rule can be wide, the sentence should not be. */
.about-list{display:flex;flex-direction:column;max-width:880px}
.about-item{padding:22px 0;border-top:1px solid var(--line-soft)}
.about-item h3{
  margin:0 0 9px; font-family:var(--display); font-weight:800;
  font-size:clamp(17px,1.5vw,20.5px); line-height:1.25; letter-spacing:-.012em; color:var(--white);
}
.about-item p{margin:0; max-width:68ch; font-size:15.5px; line-height:1.65; color:var(--text-2)}
/* Set in the body face at body weight, so it reads as an aside rather than as part of the name. */
.about-tag{
  display:inline-block; margin-left:.6em;
  font-family:var(--sans); font-size:12.5px; font-weight:400; letter-spacing:0;
  color:var(--text-3); white-space:nowrap;
}
/* The one place About spends red: a hairline down the side of the piece that says a human
   signs off. It is the same mark the live decision carries on Home — "this is the part that
   matters" — and it appears once. */
.about-item.is-key{border-top-color:var(--line); padding-left:clamp(16px,1.6vw,22px);
  border-left:2px solid var(--red)}
.about-close{padding:clamp(46px,5.5vw,72px) 0 clamp(44px,5vw,64px)}

/* THE CLOSING CHAPTERS. Editorial Standards and Independent by Design are where About stops
   describing the product and starts making commitments, and at the shared section rhythm they
   read as two more entries in a list of six. Roughly double the approach gives each one the
   pause a chapter break needs — spacing only: no rule, no panel, no background, nothing that
   would turn a statement of position into a callout box. */
.about-sec.chapter{padding-top:clamp(64px,8vw,108px)}

/* The opening carries more weight than a section front's: this is the page where the product
   explains itself, so the headline is allowed to be nearly as large as Home's. */
.about-head h1{font-size:clamp(32px,4.4vw,56px);letter-spacing:-.035em}
.about-head .standfirst{max-width:60ch;font-size:clamp(16px,1.4vw,19px)}

/* THE THREE SURFACES. Not cards — a card would make News, Analysis and You're the GM look like
   three plan tiers. Rule-separated rows carrying the same label/name/line the pages themselves
   use, so a reader meets the promise here in the words they will meet again there. */
.surfaces{display:flex;flex-direction:column;max-width:880px}
.surface{padding:24px 0;border-top:1px solid var(--line-soft)}
.surface .promise{margin:0 0 7px}
.surface h3{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(22px,2.2vw,30px); line-height:1.15; letter-spacing:-.025em; color:var(--white);
}
.surface-line{margin:10px 0 0;max-width:62ch;font-size:15.5px;line-height:1.6;color:var(--text-2)}

/* WHY IT EXISTS. The argument is a sequence, so it is set as one: four questions that narrow,
   with the last one — the question the whole product is named after — arriving in white with the
   brand's one red mark beside it. */
.why-lede{
  margin:0; max-width:34ch; font-family:var(--display); font-weight:900;
  font-size:clamp(21px,2.1vw,28px); line-height:1.2; letter-spacing:-.02em; color:var(--text-2);
}
.why-steps{
  list-style:none; margin:26px 0 0; padding:0; max-width:760px;
  counter-reset:why;
}
.why-steps li{
  counter-increment:why; position:relative;
  padding:13px 0 13px 46px; border-top:1px solid var(--line-soft);
  font-family:var(--display); font-weight:800; letter-spacing:-.015em;
  font-size:clamp(17px,1.7vw,22px); line-height:1.3; color:var(--text-2);
}
.why-steps li::before{
  content:counter(why); position:absolute; left:0; top:16px;
  font-family:var(--mono); font-size:12px; font-weight:400; letter-spacing:.06em;
  color:var(--text-3);
}
.why-steps li.last{color:var(--white); border-top-color:var(--red)}
.why-steps li.last::before{color:var(--red)}
.why-close{margin:26px 0 0;max-width:62ch;font-size:15.5px;line-height:1.65;color:var(--text-2)}

/* FOUR PROMISES, read as a set. Two columns at desktop so they are taken in together rather than
   scrolled through one at a time, which is what made the old methodology list feel long. */
.principles{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:4px clamp(28px,4vw,56px); max-width:880px;
}
.principle{padding:22px 0;border-top:1px solid var(--line-soft)}
.principle h3{
  margin:0 0 8px; font-size:11.5px; font-weight:800; letter-spacing:.2em;
  text-transform:uppercase; color:var(--silver);
}
.principle p{margin:0;font-size:15px;line-height:1.62;color:var(--text-2)}

/* The fuller disclosure, one native control away. <details> because it is keyboard-operable and
   findable by the browser's own search — collapsed is subordinate, not hidden. */
.more{margin:14px 0 0}
/* 11.5px of uppercase text is a 19px control. The label keeps its size; the hit area does not. */
.more summary{
  cursor:pointer; width:fit-content;
  display:flex; align-items:center; min-height:44px;
  font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-3); transition:color .2s ease;
}
.more summary:hover{color:var(--white)}
.more p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--text-3)}
/* The ecosystem relationship is a separate thought from the non-affiliation statement above it,
   and at 14px of separation the two read as one paragraph that changed subject mid-way. */
.eco-note{margin:22px 0 0;font-size:14px;line-height:1.6;color:var(--text-3);max-width:64ch}

/* Left-aligned, not centred. Every other surface on the site starts at the same left edge —
   Home's brief, the section fronts, About — and a centred column was the one thing that made the
   legal pages feel like they had been dropped in from somewhere else. The measure is unchanged. */
.prose{max-width:70ch;margin:0;padding:clamp(40px,5.5vw,68px) 0 20px;font-size:17px;line-height:1.72;color:var(--text)}
/* The static pages carry their h1 inside .prose in the markup rather than through a renderer, so
   it never matched the list pages' rule and was sized by the browser — the same drift that made
   About look unstyled. Same scale as .page-head, so Terms opens like every other page. */
.prose h1{
  margin:0 0 28px; font-family:var(--display); font-weight:900;
  font-size:clamp(30px,3.6vw,46px); line-height:1.04; letter-spacing:-.03em; color:var(--white);
}
.prose p{margin:0 0 1.25em}
.prose h2{font-family:var(--display);font-size:22px;font-weight:900;letter-spacing:-.015em;
  margin:2em 0 .5em;color:var(--white)}
.prose h3{font-family:var(--display);font-size:18px;font-weight:800;margin:1.7em 0 .4em;
  color:var(--white)}
/* Was #7FB2E8 — default hyperlink blue, and the only colour on the public site that belonged to
   no part of the palette. An underlined link in the body colour reads as a link without
   introducing a sixth hue into a five-colour system. */
.prose a{color:var(--white); text-decoration:underline; text-decoration-color:var(--red-dim);
  text-underline-offset:3px; transition:text-decoration-color .2s ease}
.prose a:hover{text-decoration-color:var(--red)}

.sources{
  max-width:70ch;margin:34px auto 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:22px 24px;
}
.sources h2{font-size:13px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;
  color:var(--gold);margin-bottom:14px}
.sources ol{margin:0;padding-left:20px}
.sources li{margin:0 0 12px;font-size:14px;color:var(--text-2);line-height:1.5}
.sources .outlet{color:var(--white);font-weight:700}
.sources .kind{
  display:inline-block;margin-left:8px;font-size:9.5px;font-weight:800;
  text-transform:uppercase;letter-spacing:.11em;padding:2px 7px;border-radius:3px;
  border:1px solid var(--line);color:var(--text-3);
}
.sources .kind.rumor{color:var(--gold);border-color:var(--gold-dim)}
.sources .kind.confirmed{color:#6FCF8C;border-color:#2C5A38}

.handoff{
  max-width:70ch;margin:34px auto 0;border:1px solid var(--red-dim);border-radius:var(--radius);
  background:linear-gradient(160deg,rgba(186,0,33,.12),transparent);padding:26px 24px;text-align:center;
}
.handoff h2{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.08em;color:var(--white)}
.handoff p{margin:10px 0 18px;color:var(--text-2)}

/* =============================================================================
   GM scenario page — the decision room
   ============================================================================= */

/* Scoped. `.decision` also names the Home brief's live-decision column, which is a grid track,
   not a centred measure — unscoped, this rule reached across and constrained it. */
body[data-page=gm] .decision{max-width:900px;margin:0 auto}
.decision .setup{font-size:17px;line-height:1.7;color:var(--text-2);margin:0 0 26px}
.decision .question{
  font-family:var(--display);font-size:clamp(22px,2.6vw,32px);font-weight:900;
  line-height:1.2;color:var(--white);margin:0 0 26px;
}
.options{display:flex;flex-direction:column;gap:14px}
.option{
  width:100%;text-align:left;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:18px 20px;cursor:pointer;color:inherit;
  font:inherit;transition:border-color .15s,background .15s;
}
.option:hover{border-color:var(--red);background:var(--surface-2)}
.option .label{font-weight:800;font-size:16px;color:var(--white);display:block;margin-bottom:5px}
.option .detail{font-size:14px;color:var(--text-2);line-height:1.5}

.result{margin:0 0 14px}
.result .row{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.result .label{color:var(--white);font-weight:700}
.result .pct{color:var(--text-2);font-variant-numeric:tabular-nums}
.result .track{height:9px;background:var(--surface-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}
.result .fill{height:100%;background:var(--red);border-radius:99px}
.result.winning .fill{background:var(--gold)}

/* =============================================================================
   Footer
   ============================================================================= */

.foot{background:#050810;border-top:1px solid var(--line);padding:40px 0 30px;margin-top:10px}
.foot .top{display:flex;gap:36px;align-items:center;flex-wrap:wrap}
.foot .brand img{height:40px}
.foot nav{display:flex;gap:24px;flex-wrap:wrap}
/* 12px of uppercase text is a 20px target at every width. The mobile block already raises this
   to 44px; 24px is the minimum everywhere else, and costs the footer four pixels of height. */
.foot nav a{display:inline-flex;align-items:center;min-height:24px;
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;
  color:var(--text-2);text-decoration:none}
.foot nav a:hover{color:var(--white)}
.foot .spacer{flex:1 1 auto}
.foot .independence{
  max-width:560px;font-size:12px;line-height:1.6;color:var(--text-3);
}
.foot .bottom{
  display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;
  margin-top:28px;padding-top:20px;border-top:1px solid var(--line-soft);
  font-size:11.5px;color:var(--text-3);
}
.foot .eco{color:var(--gold);font-weight:800;text-transform:uppercase;letter-spacing:.13em}

/* =============================================================================
   Responsive
   ============================================================================= */

@media (max-width:1200px){
  .brief .wrap{gap:44px}
}

@media (max-width:980px){
  :root{--gutter:22px}
  .masthead .wrap{min-height:66px;gap:14px}
  .menu-btn{display:inline-flex}
  .ecosystem{display:none}
  nav.main{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;gap:0;background:var(--bg-2);
    border-bottom:1px solid var(--line);padding:8px var(--gutter) 18px;margin:0;
  }
  nav.main.open{display:flex}
  nav.main a{padding:14px 0;border-bottom:1px solid var(--line-soft);border-left:2px solid transparent}
  nav.main a[aria-current=page]{border-bottom-color:var(--line-soft);border-left-color:var(--red);padding-left:12px}
  /* `relative`, not `static`. The header is deliberately not sticky at this width, but the
     drawer above is `position:absolute; top:100%`, and static removes the containing block
     that `position:sticky` provides at desktop. With static, `top:100%` resolved against the
     document: the menu opened correctly — class, display and aria all flipped — and rendered
     844px down, exactly one viewport below the fold, so tapping the button appeared to do
     nothing. `relative` restores the containing block without restoring stickiness. */
  .masthead{position:relative}

  /* The brief stacks: identity first, then today's decision directly under it. The decision
     keeps its red rule, which is what stops it reading as a second paragraph. */
  .brief .wrap{grid-template-columns:1fr;padding-top:40px;padding-bottom:44px;gap:34px}
  .decision{padding-left:18px}

  /* The desk stops being a row. Two columns on a phone would give each surface half of a
     narrow screen, so the desks become full-width sections in reading order, News first. */
  .desk{flex-direction:column; gap:46px; padding:44px 0 52px}
  .desk-col[data-empty]{flex-grow:1}

  .hero-media::after{
    background:linear-gradient(180deg, rgba(7,11,20,.82) 0%, rgba(7,11,20,.9) 100%);
  }

  /* 11.5px of uppercase text is a 19px-tall tap target, which is less than half the 44px
     minimum. The link's SIZE does not need to change — its hit area does. */
  /* inline-flex, so the label and the arrow become flex items and the space between them in
     the markup collapses — hence the explicit gap. */
  .desk-more{display:inline-flex; align-items:center; gap:.45em; min-height:44px; margin-top:10px}

  .footing{padding:34px 0 44px}
}

@media (max-width:620px){
  body{font-size:15.5px}
  .brief h1{font-size:clamp(30px,9vw,42px)}
  .brief .deck{font-size:16px}
  .btn{width:100%;justify-content:center}
  .decision-act{flex-direction:column; align-items:stretch; gap:12px}
  .decision-meta{text-align:center}
  .footing-line{font-size:clamp(22px,7.5vw,32px)}
  /* A narrower plate on a phone: the headline beside it needs the measure more than the
     artwork needs the size. */
  /* 64px was too small to be an image: a dark, detail-dense plate at that size reads as a
     grey swatch rather than as artwork, and costs the headline only 12px to fix. */
  .stories[data-art] .story{grid-template-columns:76px minmax(0,1fr); gap:13px}
  .stories[data-art] .story-lead{grid-template-columns:96px minmax(0,1fr); gap:14px}
  .prose{font-size:17px}
  .foot .top{flex-direction:column;align-items:flex-start;gap:20px}
  /* 12px of uppercase text is a 20px tap target — under even the 24px minimum, and these are
     the links to the privacy and terms pages, which are exactly the ones someone reaches for
     deliberately. The type stays the same size; the hit area grows around it. */
  .foot nav{gap:6px 24px}
  .foot nav a{display:inline-flex;align-items:center;min-height:44px}
  /* Touch targets, not just smaller text. */
  nav.main a{padding:16px 0}
}

/* =============================================================================
   GM scenario page — the decision room.

   Reinstated after the design-system rewrite dropped the old class names and left
   this page rendering as raw unstyled HTML. Caught by screenshot QA, not by the
   test suite: nothing asserts that a stylesheet still covers the markup a page
   emits, which is exactly the kind of defect only a rendered page reveals.
   ============================================================================= */

.gm-card{
  background:linear-gradient(160deg,var(--surface-2) 0%,var(--surface) 55%);
  border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 34px 30px;margin:34px auto 0;max-width:920px;
}
.gm-card.compact{padding:24px 26px;margin-top:20px}

.gm-kicker{
  font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.18em;
  color:var(--red);margin-bottom:14px;
}
.gm-title{
  font-size:clamp(23px,2.7vw,34px);font-weight:900;line-height:1.18;color:var(--white);
}
.gm-card.compact .gm-title{font-size:20px}
.gm-title a{text-decoration:none;color:inherit}
.gm-title a:hover{color:var(--silver)}
.gm-setup{margin:18px 0 0;font-size:16.5px;line-height:1.7;color:var(--text-2)}
.gm-question{
  margin:20px 0 0;font-family:var(--display);font-weight:800;
  font-size:clamp(17px,1.7vw,21px);line-height:1.4;color:var(--white);
}
.gm-body{margin-top:26px}

/* Ballot */
.ballot{display:flex;flex-direction:column;gap:12px}
.ballot-option{
  display:block;width:100%;text-align:left;font:inherit;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:17px 20px;color:inherit;transition:border-color .15s,background .15s;
}
.ballot-option:hover{border-color:var(--red);background:var(--surface-2)}
.ballot-option:disabled{opacity:.55;cursor:default}
.ballot-label{display:block;font-weight:800;font-size:16px;color:var(--white);margin-bottom:4px}
.ballot-detail{display:block;font-size:14px;line-height:1.55;color:var(--text-2)}

/* Results */
.vote-result{display:flex;flex-direction:column;gap:16px}
.vote-row-head{display:flex;justify-content:space-between;gap:14px;margin-bottom:7px}
.vote-label{font-weight:700;font-size:14.5px;color:var(--white)}
.vote-pct{font-variant-numeric:tabular-nums;color:var(--text-2);font-weight:700}
.vote-track{height:10px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:99px;overflow:hidden}
.vote-fill{height:100%;background:var(--red);border-radius:99px;transition:width .5s ease}
.vote-count{margin-top:6px;font-size:12px;color:var(--text-3)}
.vote-thanks{margin:0;font-size:14.5px;color:var(--gold);font-weight:700}
.vote-total,.vote-closed{margin:0;font-size:12.5px;color:var(--text-3)}

.gm-between{
  max-width:920px;margin:34px auto 0;padding:30px 32px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
}
.gm-between h2{font-size:24px;font-weight:900;color:var(--white)}
.gm-between p{margin:10px 0 0;color:var(--text-2)}
.gm-archive{display:flex;flex-direction:column;gap:16px}
.section-head{
  max-width:920px;margin:44px auto 18px;font-size:15px;font-weight:900;
  text-transform:uppercase;letter-spacing:.14em;color:var(--text-3);
}

/* Simple list/article page headings */
/* THE PAGE HEAD — one opening for every page that is not Home.
   News and Analysis had `#content > h1` plus a standfirst; About, Contact, Privacy and Terms had
   a bare `.prose h1`, which matched no rule in the design system at all and was therefore sized
   by the browser. Two different openings, one of them unstyled, is most of why the secondary
   pages read as a different product.
   Label, headline, standfirst — the same three-part opening Home uses, at the same rhythm. */
.page-head{padding:clamp(40px,5.5vw,68px) 0 0}
.page-head h1{
  margin:0; font-family:var(--display); font-weight:900;
  font-size:clamp(30px,3.6vw,46px); line-height:1.04; letter-spacing:-.03em; color:var(--white);
}
/* Silver, not gold: this names the page's editorial ROLE, and it is the same label Home puts
   over each desk. Gold stays reserved for brand voice, which on these pages is the eyebrow. */
.page-label{
  margin:0 0 10px; font-size:11px; font-weight:800; letter-spacing:.22em;
  text-transform:uppercase; color:var(--silver);
}
.page-head .standfirst{
  margin:16px 0 0; max-width:58ch;
  font-size:clamp(15.5px,1.3vw,17.5px); line-height:1.6; color:var(--text-2);
}

#content > h1{font-size:clamp(30px,3.6vw,44px);font-weight:900;margin:44px 0 8px}
#content > h2{font-size:24px;font-weight:900;margin:34px 0 14px}
.kicker{font-size:11px;font-weight:900;text-transform:uppercase;letter-spacing:.16em;
  color:var(--red);margin-bottom:8px}
.lead{margin:34px 0 0}
.lead h1{font-size:clamp(28px,3.4vw,44px);font-weight:900;line-height:1.1;margin:8px 0 0}
.lead .summary{margin:16px 0 0;font-size:18px;color:var(--text-2);line-height:1.6}
.lead .meta{margin-top:14px;font-size:12.5px;color:var(--text-3)}
.meta{font-size:12.5px;color:var(--text-3)}

/* Static prose pages (about / privacy / terms / contact) */
/* :where() on purpose. These are FALLBACKS for markup no component styles — every static page
   wraps itself in .prose and sets its own. As bare `#content p` they carried an ID's
   specificity and silently outranked the whole component layer: the Home desk's kicker, dates,
   empty state, positioning line and archive link all rendered in colours nothing chose. */
:where(#content) p{color:var(--text-2)}
:where(#content) ul,:where(#content) ol{color:var(--text-2)}
:where(#content) a{color:#7FB2E8}

/* =============================================================================
   Article page.

   The reading column is narrow inside the wide shell — a 1520px measure is
   unreadable, and the point of the wide canvas is the dashboard, not the prose.
   ============================================================================= */

.piece{max-width:760px;margin:0 auto;padding:46px 0 20px}
.piece > .kicker{margin-bottom:12px}
.piece h1{font-size:clamp(30px,3.8vw,50px);font-weight:900;line-height:1.08;
  letter-spacing:-.025em;color:var(--white)}
.piece .byline{display:flex;gap:10px;flex-wrap:wrap;align-items:center;
  margin-top:18px;padding-bottom:22px;border-bottom:1px solid var(--line)}

/* Editorial artwork sits full-column with a frame, not bleeding edge to edge:
   these are text-heavy graphics and cropping them loses the point. */
/* The only surface where the artwork is the piece's OWN plate rather than a pointer to it, so
   it is the largest the system goes — but capped. At the full 760px measure a square image is a
   760px tile that pushes the opening paragraph off the screen, which is the article page's
   version of letting the artwork outrank the writing. Same 1:1 contract as everywhere else. */
.piece picture{display:block}
.piece img.hero{
  width:100%;max-width:440px;margin:28px 0 6px;
  /* Reserves the box before the image decodes — without it the body copy below shifted down
     when the plate arrived. `contain` keeps the never-crop contract if a non-square variant is
     ever published; for the square artwork the pipeline makes today it changes nothing. */
  aspect-ratio:1/1;object-fit:contain;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--radius);
}

/* THE READING MEASURE. 760px at 18px is around 95 characters a line — well past the 60-75 that
   long-form reading wants, and the article is the one page whose entire job is to be read. The
   column keeps its width for the hero and the source block; the PROSE inside it is narrowed. */
.piece .body{font-size:18px;line-height:1.75;color:#DDE5EF;margin-top:26px;max-width:68ch}
.piece .body p{margin:0 0 1.3em}
/* Long-form needs headings that separate without shouting, lists that stay in the measure, and a
   quote that reads as a held breath rather than a decorated box. */
.piece .body ul,.piece .body ol{margin:0 0 1.3em;padding-left:1.2em}
.piece .body li{margin:0 0 .5em}
.piece .body blockquote{
  margin:1.6em 0; padding:2px 0 2px clamp(16px,1.8vw,24px);
  border-left:2px solid var(--red-dim);
  font-size:19.5px; line-height:1.6; color:var(--white);
}
.piece .body blockquote p:last-child{margin:0}
/* In the body colour with a red underline, matching .prose — not a sixth hue. */
.piece .body a{color:var(--white);text-decoration:underline;
  text-decoration-color:var(--red-dim);text-underline-offset:3px;
  transition:text-decoration-color .2s ease}
.piece .body a:hover{text-decoration-color:var(--red)}
.piece .body h2{font-size:25px;font-weight:900;margin:1.8em 0 .5em;color:var(--white)}
.piece .body h3{font-size:20px;font-weight:800;margin:1.5em 0 .4em;color:var(--white)}

/* Rumour is labelled at the top of the piece, not buried. */
.rumor-note{
  margin-top:20px;padding:12px 16px;border-left:3px solid var(--gold);
  background:rgba(200,155,60,.09);font-size:14.5px;color:var(--text-2);border-radius:0 3px 3px 0;
}
.rumor{
  display:inline-block;margin-left:8px;font-size:9.5px;font-weight:800;text-transform:uppercase;
  letter-spacing:.12em;padding:2px 7px;border-radius:3px;color:var(--gold);
  border:1px solid var(--gold-dim);
}

/* Sources — the credibility surface. Gold heading because this is the part of the
   page that says the reporting is real. */
.piece .sources{
  margin:38px 0 0;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--surface);padding:22px 24px;max-width:none;
}
.piece .sources h2{font-size:12.5px;font-weight:900;text-transform:uppercase;
  letter-spacing:.16em;color:var(--gold);margin-bottom:14px}
.piece .sources ul,.piece .sources ol{margin:0;padding-left:18px}
.piece .sources li{margin:0 0 11px;font-size:14px;line-height:1.55;color:var(--text-2)}
.piece .sources a{color:#7FB2E8}

/* The audience handoff — "what would you do?" */
.piece .cta{
  margin:34px 0 0;padding:26px 24px;text-align:center;border-radius:var(--radius);
  border:1px solid var(--red-dim);background:linear-gradient(160deg,rgba(186,0,33,.14),transparent);
}
.piece .cta h2{font-size:20px;font-weight:900;text-transform:uppercase;letter-spacing:.07em;
  color:var(--white);margin-bottom:10px}
.piece .cta p{color:var(--text-2);margin:0 0 16px}
.piece .cta a{
  display:inline-flex;align-items:center;gap:10px;background:var(--red);color:#fff;
  font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.11em;
  padding:14px 24px;border-radius:var(--radius);text-decoration:none;
}
.piece .cta a:hover{background:#d4062a}

.piece .share{display:flex;gap:12px;align-items:center;flex-wrap:wrap;
  margin:34px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.piece .share a,.linkbtn{
  font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;
  color:var(--text-2);text-decoration:none;background:transparent;
  border:1px solid var(--line);border-radius:var(--radius);padding:9px 14px;cursor:pointer;
  font-family:inherit;
}
.piece .share a:hover,.linkbtn:hover{border-color:var(--red);color:var(--white)}

.piece .related{margin:46px 0 0}
.piece .related h2{font-size:14px;font-weight:900;text-transform:uppercase;letter-spacing:.14em;
  color:var(--text-3);margin-bottom:18px}

@media (max-width:620px){
  .piece{padding:30px 0 10px}
  .piece .body{font-size:17px}
}

/* =============================================================================
   Disclosure and legal.

   The AI-assistance notice is a standing obligation, not a design element. The
   redesign briefly moved it into the footer, which a launch guard correctly
   caught: a disclaimer competing with nothing at the bottom of the page is not
   the same as one a reader passes on the way in. It is back at the top of every
   page — restyled as a thin gold-ruled strip so it reads as a standing notice
   rather than an alert, but present and visible.
   ============================================================================= */

/* THE FOOTER. Restrained on purpose — four links, the independence statement, the ecosystem
   line. The non-affiliation sentence lives here on every page, which is what lets the bar at the
   top of the page be a credit line rather than a legal notice: the full statement is always one
   scroll away, in the place a reader already looks for it. */
.foot .fine{max-width:74ch;font-size:12px;line-height:1.65;color:var(--text-3);margin:0}
/* The legal line is where the AI statement lives now, so its link has to be findable without
   turning the footer into a call to action. */
/* inline-block with vertical padding, so a 12px link still clears the 24px minimum target
   without adding a line break to the legal sentence it sits inside. */
.foot .fine a{display:inline-block;padding:6px 0;color:var(--text-2);text-decoration:underline;
  text-decoration-color:var(--line);text-underline-offset:2px;transition:color .2s ease}
.foot .fine a:hover{color:var(--white)}

.signup-note{
  margin:34px 0 0;padding:16px 20px;border:1px dashed var(--line);border-radius:var(--radius);
  color:var(--text-3);font-size:13.5px;text-align:center;
}

/* =============================================================================
   Theme.

   This site is dark by design — it is a brand decision, not a default, and it
   does not invert for a light-scheme preference. What it MUST do is tell the
   browser so: color-scheme makes native scrollbars, form controls and focus
   affordances render for a dark surface instead of light widgets on a black
   page. The dark block below deepens the ground for viewers whose system says
   they want dark, which is a real adjustment rather than a token declaration.
   ============================================================================= */

@media (prefers-color-scheme: dark){
  :root{
    --bg:#04070E;
    --bg-2:#070D19;
    --surface:#0B1322;
    --surface-2:#0F1B2E;
  }
}

/* The brand file and the fallback wordmark are siblings. When the image loads it hides the
   wordmark; when it is absent onerror removes it and the wordmark stands alone. Dropping the
   asset in therefore needs no code change, and a missing file never renders a broken image. */
.brand img + .wordmark{display:none}

/* =============================================================================
   Production brand marks.

   Two files ship and CSS picks: the horizontal lockup reads at desktop widths,
   and below the nav breakpoint it would have to shrink past legibility, so the
   shield takes over. That is what the icon asset is for — squeezing a 4:1
   wordmark into a 390px header until nobody can read it is not "responsive".

   Intrinsic width/height are on every <img> so the header reserves its space
   before the file decodes and does not jump. Nothing here filters, tints or
   otherwise alters the artwork.
   ============================================================================= */

.brand img{width:auto;display:block}
/* Heights are x1.137 (lockup) and x1.185 (shield) on the originals. The corrected brand
   exports carry transparent safe area, so an unchanged box renders a visibly smaller mark;
   this holds the masthead and footer hierarchy where it was. The artwork is unchanged. */
.brand .mark-wide{height:61px}
.brand .mark-icon{display:none;height:47px}
.foot .brand .mark-wide{height:43px}

@media (max-width:980px){
  .brand .mark-wide{display:none}
  .brand .mark-icon{display:block}
  /* The footer keeps the full lockup: there is room for it there, and the
     wordmark is what signs the page off. */
  .foot .brand .mark-wide{display:block;height:39px}
  .foot .brand .mark-icon{display:none}
}