/* =====================================================================
   NEWS — press/insight DETAIL pages, and (from Phase 4) hub.html

   NO COLOUR VALUE APPEARS IN THIS FILE. Every colour refers to a token in
   css/tokens.css, which is the only file on this build permitted to hold
   one. This unit may not edit tokens.css, so a colour that does not exist
   as a token is a STOP-AND-REPORT, never a literal written here. Nothing
   below needed one.

   ONE SHEET SERVES ELEVEN DETAIL PAGES AND THE HUB. That is deliberate:
   the detail pages are clones of one another, and a per-page sheet would
   let eleven copies of the same rule drift apart silently. If a rule here
   needs to differ for one page, it needs a class, not a second file.

   THE PAGE IS A DOCUMENT, NOT A DESIGNED BAND, and it follows
   pages/privacy-policy.css in that: no entry animation, no observers, no
   scroll-position reads, and js/reveal.js is NOT loaded. The .rv class is
   absent from these pages rather than disabled — base.css holds .rv at
   opacity 0 until reveal.js adds .on, so a stray .rv on a page that does
   not load the script renders an invisible element with no error.

   THE DETAIL-PAGE SECTION OF THIS SHEET DECLARES NO MOTION and therefore
   carries no prefers-reduced-motion branch — an empty one would assert a
   control that controls nothing. THE HUB SECTION AT THE FOOT DOES: its
   row titles transition text-decoration-color on hover, and that single
   transition IS stepped down, with its selector restated in full because
   a media query adds no specificity. If you add motion to the detail
   rules, this paragraph stops being true — amend it rather than leaving
   a comment that claims an absence the file no longer has.
   ===================================================================== */

/* ---------------------------------------------------------------------
   THE DOCUMENT SHELL

   TOP PADDING CLEARS A FIXED HEADER AND IS NOT A TASTE VALUE.
   components/header.css sets header{position:fixed;top:0} with .nav at
   height:80px, so any first-child content under 80px of page top is
   painted UNDER the bar. 132px matches pages/privacy-policy.css exactly —
   the same document shape solving the same problem — which keeps the two
   long-form pages gutter-identical instead of near-identical.

   The 34px horizontal padding and the 1180px .in container are inherited
   from base.css unchanged, so this page gutters exactly as the other six
   do. The reading measure is constrained further in, ON THE TEXT ITSELF
   (see .na-meas), never on the container: narrowing .in would also narrow
   anything later added beside the prose.
   --------------------------------------------------------------------- */
.na-doc{
  padding-top:132px;
  padding-bottom:88px;
}

/* THE READING MEASURE IS IN ch AND THAT UNIT CHOICE IS LOAD-BEARING.
   `ch` resolves against the ELEMENT'S OWN font, so a measure set in ch
   tracks the type it is measuring and cannot be desynchronised by a
   later font-size change on this block. It also means a ch cap STOPS
   BINDING once the track is narrower than the cap — at narrow viewports
   the 34px gutters win and this max-width does nothing, which is the
   correct behaviour and not a dead rule.

   85ch, not base.css's 56ch. .body's 56ch is sized for a short standfirst
   beside other content; this is a 5,800-character article that a reader
   works through top to bottom, and 56ch would run it to roughly half
   again as many lines. Set to 68ch when this page was first authored and
   widened to 85ch by director decision at the Phase 1 gate — the value is
   a review outcome, not a default, so do not "restore" it. */
.na-meas{max-width:85ch}

/* ---- back link ----
   COLOUR IS --pill-hover AND THE REASON IS A MEASURED THRESHOLD, not a
   preference. This link is small text, so it is judged at 4.5, and
   --accent (#696FE8) measures 3.9310 on --paper — it PASSES 3.0 and
   FAILS 4.5, so accent is unusable here at any size below the 18.66px
   bold / 24px regular large-text boundary.

   --pill-hover (#585EDC) measures 4.8922 on --paper and clears 4.5 by
   0.3922. IT IS THE DARKER SIBLING OF --accent, NOT A DIFFERENT HUE:
   #585EDC against #696FE8, which is exactly why it clears where accent
   fails — the tint reads as the same blue-violet while carrying the
   luminance the threshold needs.

   SET TO --slate WHEN THIS PAGE WAS FIRST AUTHORED, changed to
   --pill-hover by director decision at the Phase 1 gate. That swap WIDENS
   the margin rather than spending it: --slate measures 4.5994 here, over
   4.5 by 0.0994, so the old value carried roughly a quarter of the
   headroom the new one does. Do not read the change as cosmetic and do
   not revert it to match .kick, which still runs on the 0.0994 budget
   because base.css sets it and this unit may not.

   NOTE --pill-hover'S OTHER MEASUREMENT BEFORE REUSING IT: it is 2.8600
   on --plum, against the 3.0 of SC 1.4.11, which is why a .btn may never
   sit on .band-plum. A token that clears a threshold on paper is not
   thereby cleared everywhere.

   The underline is on by default rather than on hover. This is the only
   in-page navigation on the document and a reader arriving from a search
   result has no other route back into the site. */
.na-back{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--pill-hover);
  text-decoration:underline;
  text-underline-offset:4px;
  display:inline-block;
  margin-bottom:30px;
}
.na-back:hover{color:var(--on-page)}

/* ---- headline and deck ---- */

/* base.css sets h1{font-size:clamp(36px,4.4vw,60px)} for hero headlines.
   An article headline is a document title, not a hero, and 60px on a
   111-character press-release title runs to four lines at 1440. Stepped
   down here and ONLY here.

   THIS IS A CLASS, NOT `.na-doc h1`, AND THE REASON IS A SOURCE FACT
   RATHER THAN A PREFERENCE. Ten of the eleven releases mark their title
   up as an h1; the Moraski release marks it as an h2 and has NO h1
   anywhere — its page was not built on the Elementor single-post
   template. The brief forbids authoring a level the source lacks and
   forbids promoting the h2, so that page's title ships as an h2 and a
   tag-based selector would silently miss it, leaving one page of eleven
   at base.css's 46px h2 while looking deliberate.

   base.css styles h1 and h2 IDENTICALLY for family, weight, letter-
   spacing and line-height, so the two tags already render the same
   before this rule; only font-size and measure are set here, and the
   class carries them to whichever tag the source used. */
.na-title{
  font-size:clamp(30px,3.1vw,44px);
  max-width:26ch;
}

/* THE DECK IS AN h2 BECAUSE THE SOURCE MADE IT ONE, and its size is
   stepped down for the same reason the h1 is: base.css gives
   h2{clamp(28px,3.4vw,46px)}, which would render the deck LARGER than
   the headline it sits under at every width above about 1000px.

   THE ELEMENT KEEPS ITS LEVEL. It is not demoted to a <p> to make it
   look subordinate — the source's heading structure is the client's
   document structure, and size is a visual decision while level is a
   structural one. Same ruling privacy-policy.css records at S8.

   font-family is the SANS, overriding base.css's serif for h1/h2. A deck
   is standfirst copy, not a title. */
.na-deck{
  font-family:var(--sans);
  font-size:clamp(18px,1.5vw,21px);
  font-weight:400;
  line-height:1.5;
  letter-spacing:0;
  color:var(--on-page-body);
  margin-top:18px;
  text-wrap:pretty;
}

/* THE RULE UNDER THE DECK. --rule-hair is a token, not a literal: it is
   color-mix(in srgb, var(--ink) 14%, transparent), so it composites over
   whatever ground it lands on rather than assuming paper.

   NOTE FOR ANY LATER PROBE OF THIS VALUE: --rule-hair serialises through
   getComputedStyle as color(srgb 0.160784 ...) — 0-1 FLOATS, not 0-255
   channels. A parser that assumes 8-bit channels reads it as roughly
   eight times too light. That fault is recorded in the build log at §36
   and it has bitten twice. */
.na-rule{
  border:0;
  border-top:1px solid var(--rule-hair);
  margin:34px 0 0;
  max-width:85ch;
}

/* ---- article prose ---- */

/* SCOPED TO .na-prose, NOT TO .na-doc, AND THAT IS THE POINT. The join
   band sits inside this page and carries its own h2#join-h and its own
   form paragraphs; a rule written as `.na-doc p` would reach into it and
   restyle a shared component from a page sheet. Every prose rule below
   is a CHILD of .na-prose so it can only ever reach this article's own
   copy. */
.na-prose{margin-top:34px}

.na-prose > p{
  margin-top:22px;
  font-size:17px;
  line-height:1.72;
  color:var(--on-page-body);
  max-width:85ch;
}
.na-prose > p:first-child{margin-top:0}

/* IN-BODY LINKS ARE UNDERLINED AND INHERIT THEIR COLOUR.
   base.css sets a{color:inherit;text-decoration:none} site-wide, so an
   unstyled link inside this prose would be INDISTINGUISHABLE from the
   text around it — same colour, no underline, no other cue. The underline
   is therefore the entire affordance and is not decorative.

   Colour is inherited from the paragraph (--on-page-body) rather than set
   to --accent: at 17px this is small text, judged at 4.5, and accent
   measures 3.9310 on paper. An accent link here would fail. */
.na-prose a{
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
}
.na-prose a:hover{color:var(--on-page)}

.na-prose ul{
  margin:22px 0 0;
  padding-left:22px;
  max-width:85ch;
}
.na-prose li{
  margin-top:12px;
  font-size:17px;
  line-height:1.72;
  color:var(--on-page-body);
}
/* THE BULLET TAKES --on-page-soft, NOT --on-page-muted, for the same
   measured reason as the hub's date and count: --on-page-muted is 3.3306
   on --paper. A marker is arguably a non-text glyph judged at 3.0 rather
   than 4.5, so this one was not strictly failing — but it sat on the
   wrong side of the text threshold beside 8.0825 copy, and there is no
   reason to hold a third element at the only ratio in this sheet that
   could not survive being reclassified as text. --on-page-soft: 4.9579. */
.na-prose li::marker{color:var(--on-page-soft)}

/* strong inside prose takes the full-strength ink rather than the body
   ink, so a run-in bold lead reads as a lead. Both are tokens. */
.na-prose strong{color:var(--on-page);font-weight:700}

/* ---------------------------------------------------------------------
   THE BOILERPLATE BLOCK

   THIS IS THE "ABOUT ..." MATTER AT THE FOOT OF EVERY RELEASE, and it is
   separated from the article body because it is a different KIND of text:
   standing corporate description that repeats near-verbatim across all
   eleven releases, not the news the reader came for.

   THE SPLIT POINT IS NOT INFERRED. It is recorded by a harvest-time
   marker in the extracted .md, stripped at authoring time and never
   shipped. Nine of twelve extracted files carry it. Where a file has no
   marker there is no boilerplate section on the page — the block is
   omitted, not faked.

   GROUND IS --ground-alt (cream) VIA .band-cream FROM components/bands.css
   rather than a background declared here. bands.css pairs every ground
   with its matching foreground — .band-cream sets both background and
   color — so a future split of --cream into separate ground and
   foreground values lands in one place instead of here.

   THE HEADINGS INSIDE THIS BLOCK ARE <strong> INSIDE <p>, NOT HEADINGS,
   because that is what the source is. No file in the harvested set
   contains an h3 at all, and authoring one here to make the block look
   structured would invent a level the client's document does not have.
   --------------------------------------------------------------------- */
.na-boiler{padding-top:64px;padding-bottom:72px}

.na-boiler > .in > .na-meas > p{
  margin-top:16px;
  font-size:15px;
  line-height:1.68;
  /* --on-page-body, NOT an --on-alt-body: THERE IS NO SUCH TOKEN. It was
     written here first as var(--on-alt-body,var(--on-page-body)) and
     removed — the fallback would have worked silently while leaving an
     invented token name in this file for the next grep to trust. Checked
     against tokens.css: 0 definitions. --ground-alt/--on-alt exist; the
     body-weight partner of --on-alt does not. */
  color:var(--on-page-body);
  /* 85ch, MATCHING THE ARTICLE MEASURE ABOVE. Authored at 72ch on the
     reasoning that boilerplate is secondary matter and wants a tighter
     column; taken to 85ch by director decision after the Phase 2 gate so
     the two blocks share ONE measure. They now agree by value, not by
     coincidence — if the measure moves again it must move in both, or
     the page steps in the middle for no reason a reader can see. Note
     this text is 15px against the article's 17px, so the SAME 85ch
     resolves NARROWER here: ch tracks the element's own font. */
  max-width:85ch;
}
.na-boiler > .in > .na-meas > p:first-child{margin-top:0}
.na-boiler strong{color:var(--on-alt);font-weight:700}
.na-boiler a{
  text-decoration:underline;
  text-underline-offset:3px;
}

/* ---------------------------------------------------------------------
   NARROW WIDTHS

   Only the shell padding moves. The measures above are in ch and stop
   binding on their own once the 34px gutters are narrower than the cap,
   so there is nothing to restate for them here.
   --------------------------------------------------------------------- */
@media(max-width:760px){
  .na-doc{padding-top:112px;padding-bottom:64px}
  .na-boiler{padding-top:48px;padding-bottom:56px}
  .na-prose > p,
  .na-prose li{font-size:16.5px}
}

/* =====================================================================
   HUB — hub.html only. Same sheet as the detail pages by design: the two
   share .na-meas, the 85ch measure and --pill-hover on interactive text,
   and splitting them would let those drift.

   SINGLE COLUMN, THREE STACKED BANDS, NO CARD GRID. Nothing below
   introduces a component; the bands are <section> + .in from base.css and
   the rows are a list.
   ===================================================================== */

/* ---- hero ----
   THE EYEBROW USES .kick UNCHANGED, and that is a hard constraint rather
   than reuse for tidiness. base.css records --slate on --paper at 4.5994
   against a 4.5 threshold — a margin of 0.0994, the tightest on the site.
   Its 11px is also a measured CEILING, not a preference: the copy is
   letterspaced uppercase mono and 11.5px wraps at exactly 414px. NOTHING
   HERE TOUCHES ITS SIZE, WEIGHT, COLOUR OR SPACING. */
.hub-hero{
  padding-top:132px;
  padding-bottom:56px;
}
.hub-hero h1{max-width:18ch}
.hub-hero .hub-lede{
  margin-top:22px;
  font-size:19px;
  line-height:1.6;
  color:var(--on-page-body);
  max-width:85ch;
}

/* ---- bands ---- */
.hub-band{padding-top:64px;padding-bottom:64px}
.hub-band h2{font-size:clamp(24px,2.2vw,32px)}
/* THE RECORD COUNT, so the page states its own size.

   COLOUR IS --on-page-soft, AND THE FIRST VALUE HERE FAILED. Authored as
   --on-page-muted and MEASURED at 3.3306 on --paper against the 4.5 small
   -text threshold — short by 1.1694, at 13px where no size relaxes the
   requirement. tokens.css marks --ink-muted "NO LIVE CONSUMER"; this rule
   would have been its first, and would have shipped a 1.4.3 failure on
   45 rows. --on-page-soft (--ink-soft #6E6A78) measures 4.9579, clearing
   by 0.4579, and is already the site's de-emphasis ink. --slate was the
   other candidate at 4.5994 and was rejected: it passes on 0.0994, and
   .kick already spends that budget on this page. */
.hub-band .hub-count{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.1em;
  color:var(--on-page-soft);
  margin-left:12px;
}

/* ---- the row list ----
   ROWS ARE <li><a>, AND THE WHOLE ROW IS THE LINK. A row whose date and
   outlet sit outside the anchor gives a reader two targets for one
   destination and a screen reader an anchor whose name is the title only.
   The grid lives ON the anchor so the entire block is one hit area. */
.hub-list{list-style:none;padding:0;margin:34px 0 0}
.hub-list li{border-top:1px solid var(--rule-hair)}
.hub-list li:last-child{border-bottom:1px solid var(--rule-hair)}

.hub-row{
  display:grid;
  grid-template-columns:104px 1fr;
  gap:4px 22px;
  align-items:baseline;
  padding:20px 0;
}
.hub-row--news{grid-template-columns:104px 232px 1fr}

/* --on-page-soft for the same measured reason as .hub-count above:
   --on-page-muted reads 3.3306 here against 4.5. The date stays QUIETER
   than the outlet beside it (4.9579 against --on-page-body's 8.0825) so
   the row hierarchy survives the correction — the fix is a legibility
   floor, not a flattening. */
.hub-date{
  font-family:var(--mono);
  font-size:13px;
  letter-spacing:.06em;
  color:var(--on-page-soft);
  white-space:nowrap;
}
.hub-outlet{
  font-size:15px;
  color:var(--on-page-body);
}
/* --pill-hover, CARRIED FORWARD FROM THE DETAIL PAGES' BACK LINK. It
   measures 4.8922 on --paper and clears the 4.5 small-text threshold by
   0.3922, where --accent would fail at 3.9310. The title is the only
   coloured element in the row: date and outlet stay in the neutral inks
   so a 34-row list does not read as 34 lines of purple. */
.hub-title{
  font-size:17px;
  line-height:1.5;
  color:var(--pill-hover);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:transparent;
  transition:text-decoration-color .18s ease;
}
.hub-row:hover .hub-title,
.hub-row:focus-visible .hub-title{text-decoration-color:currentColor}

/* THE UNDERLINE IS NOT THE AFFORDANCE HERE and that differs deliberately
   from .na-prose a, where it is. A prose link is indistinguishable from
   the sentence around it without one; a hub row is a dated, ruled, single
   -destination row in a list of identical rows, and its colour plus its
   structure already say it is a target. The underline is reserved for
   hover/focus so the list does not read as 34 underlined lines.

   THE TRANSITION IS THE ONLY MOTION ON THIS PAGE, so unlike the detail
   sheet this one DOES need a reduced-motion branch, and the selectors are
   restated IN FULL below — a media query adds no specificity, so a
   step-down written at equal specificity would lose on source order and
   silently do nothing. */

/* 3px, MATCHING THE SITE. Every other focus ring on this build is
   `outline:3px solid var(--focus)` — join-form.css, accordion.css,
   header.css and why-longitude.css all agree. Authored 2px here and
   corrected: a focus indicator that is thinner on one page than every
   other is a defect a reviewer will read as intentional. */
.hub-row:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
}

/* ---- year groups ---- */
.hub-year{margin-top:44px}
.hub-year:first-of-type{margin-top:0}
.hub-year .hub-list{margin-top:16px}

/* ---- the year label ----
   THIS IS NOT .kick, AND THE SPLIT IS A MEASURED NECESSITY RATHER THAN A
   STYLE PREFERENCE.

   The year labels sit in the In the News band, which is --ground-alt
   (cream) from 2026-08-11. --slate — the colour base.css gives .kick —
   measures 4.5994 on --paper but only 4.3009 on cream, against a 4.5
   threshold at 11px. It FAILS on this ground by 0.1991, and no size
   change rescues it: 11px is nowhere near the 18.66px bold / 24px regular
   large-text boundary, and .kick's 11px is itself a measured wrap ceiling
   recorded in base.css, not a preference.

   .kick IS NOT TOUCHED. It keeps every declaration base.css gives it and
   still carries the hero eyebrow on --paper, where 4.5994 clears. The hub
   simply stops using it for the year labels. Restyling .kick would have
   been the wrong repair twice over: base.css is not this unit's file, and
   the eyebrow's 0.0994 margin is the site's binding contrast case.

   EVERY OTHER DECLARATION IS .kick's, COPIED DELIBERATELY so the two
   render identically apart from ink — mono, 11px, .26em, uppercase,
   block. margin-bottom is 0 rather than .kick's 18px because the year
   group already spaces itself; that matches what this page rendered
   before the split, so the change is colour and ground only.

   --on-page-soft measures 4.6361 on cream, clearing 4.5 by 0.1361. */
.hub-yr{
  font-family:var(--mono);
  font-size:11px;
  letter-spacing:.26em;
  text-transform:uppercase;
  display:block;
  margin-bottom:0;
  color:var(--on-page-soft);
}

/* ---- the alternating band ground ----
   THE TOKEN PAIR IS components/bands.css's .band-cream MECHANISM, written
   here rather than by linking that sheet. `.band-cream` is a CLASS, not a
   token — there is no --band-cream — and it is exactly
   `background:var(--ground-alt);color:var(--on-alt)`. Linking bands.css
   to hub.html to reach one declaration pair would add a stylesheet to a
   page for a single rule, and that is a director decision rather than a
   side effect, so the pair is restated instead.

   THE SEMANTIC PAIR IS USED, NOT THE RAW PALETTE. --ground-alt with its
   matching --on-alt, never --cream with --ink, which is the invariant
   bands.css exists to hold: a future split of --cream into separate
   ground and foreground values still lands correctly here.

   THE TRADE-OFF, STATED SO IT IS NOT DISCOVERED: this rule DUPLICATES
   .band-cream. If bands.css ever changes which tokens that class pairs,
   this rule will not follow it. The alternative — linking bands.css and
   using .band-cream directly — is one line and is the better answer if
   the hub ever needs a second band treatment. Flagged, not decided. */
.hub-band--alt{
  background:var(--ground-alt);
  color:var(--on-alt);
}

/* ---- narrow ---- */
@media(max-width:760px){
  .hub-hero{padding-top:112px;padding-bottom:40px}
  .hub-band{padding-top:48px;padding-bottom:48px}
  .hub-row,
  .hub-row--news{grid-template-columns:1fr;gap:6px}
  .hub-title{font-size:16.5px}
}

@media(prefers-reduced-motion:reduce){
  .hub-title{transition:none}
}