/* Shared stylesheet for the pages beyond the home page.

   The home page keeps its own inlined CSS on purpose and is NOT touched by this file.
   That is a real duplication of the token block below, and it is the deliberate trade:
   index.html is a single-file page that ships as one request, while nine article pages
   sharing one cached stylesheet is the cheaper shape for nine. If a token changes it has
   to change in BOTH places. There is no generator in this repo to do it for you.

   Every colour pair used for text below is measured, not eyeballed. Numbers are in the
   comments beside the rule that uses them. */

:root{
  --ground:#DCE2E8;
  --panel:#EDF1F5;
  --panel-2:#CFD7DF;
  --night:#0A0E13;
  --ember:#FF6A33;
  --ember-ink:#A83309;   /* ember as TEXT on ground = 5.12:1 */
  --amber:#FFB020;
  --ink:#12171E;
  --paper:#0D1319;       /* body on ground = 14.31:1 */
  --muted:#4A5768;       /* on ground = 5.64:1 */
  --line:rgba(13,19,25,.16);
  --line-dark:rgba(242,235,226,.18);
  --live:#0B6E47;
  --on-dark:#F2EBE2;
  --on-dark-mut:#B3A395;
  --disp:"Barlow Condensed",Impact,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--ground);color:var(--paper);
  font-family:Archivo,system-ui,sans-serif;font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased}
h1,h2,h3,.disp{font-family:var(--disp);font-weight:800;line-height:.95;
  text-transform:uppercase;letter-spacing:-.01em}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
:focus-visible{outline:2px solid var(--ember-ink);outline-offset:4px}
/* The dark bands. This replaces a rule keyed to a `.night` ancestor class that never matched, because
   no element on any page ever carried that class. Measured 2026-08-27: the ring rendered at
   --ember-ink and came to 2.90:1 against --night, under the 3:1 WCAG 1.4.11 asks of a focus
   indicator. --amber on --night is 10.58:1. */
header :focus-visible,.masthead :focus-visible,.disclaimer :focus-visible,
footer :focus-visible{outline-color:var(--amber)}
/* The ember-filled controls need the OPPOSITE fix, and must out-specify the rule above because
   .cta-sm sits inside that header. AMBER DOES NOT RESCUE THESE: on --ember it measures 1.56:1,
   worse than the 2.34:1 they already had. --night on --ember is 6.78:1. .btn.line is deliberately
   included; it is transparent-on-light, where --night is higher contrast still. */
.skip:focus-visible,.cta-sm:focus-visible,.btn:focus-visible{outline-color:var(--night)}

/* Skip link. Visible on focus, which is the whole point of it. */
.skip{position:absolute;left:-999px;top:0;background:var(--ember);color:var(--ink);
  padding:12px 18px;font-weight:700;z-index:200}
.skip:focus{left:0}

/* ---------- header ---------- */
header{background:var(--night);color:var(--on-dark);padding:18px 0}
.bar{display:flex;align-items:center;justify-content:space-between;gap:2rem}
.brand{font-family:var(--disp);font-weight:800;text-transform:uppercase;font-size:1.3rem;
  letter-spacing:.01em;color:#EDF2F7;text-decoration:none;display:flex;align-items:baseline;gap:.1rem}
.brand i{font-style:normal;color:var(--ember)}
nav.top{display:flex;align-items:center;gap:2.4rem;flex-wrap:wrap}
/* #EDF2F7 on --night is 16.6:1. Underline on hover only; these sit on a plain dark bar
   with no competing text, so colour is not the only cue at rest. */
nav.top a{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
  color:#EDF2F7;text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
nav.top a:hover{text-decoration:underline;text-underline-offset:3px}
.cta-sm{background:var(--ember);color:var(--ink)!important;padding:.62rem 1.1rem;
  font-weight:700;letter-spacing:.1em}
.cta-sm:hover{background:var(--amber);text-decoration:none!important}

/* ---------- article ---------- */
.masthead{background:var(--night);color:var(--on-dark);padding:64px 0 72px}
.masthead .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--amber);margin-bottom:18px}
.masthead h1{font-size:clamp(2.6rem,6.2vw,4.6rem);max-width:20ch}
.masthead .standfirst{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--on-dark-mut);
  max-width:56ch;margin-top:1.4rem}
/* Not uppercase. impeccable flagged a 60-character all-caps run here and it was right:
   caps are for short labels, not for a sentence. Tracking eased off to match. */
.masthead .meta{font-family:var(--mono);font-size:.8rem;letter-spacing:.04em;
  color:var(--on-dark-mut);margin-top:1.8rem}

article{padding:56px 0 24px}
/* .prose sits on the SAME element as .wrap, so a max-width here would beat .wrap's 1240px and
   then get auto-centred by .wrap's margin, which floats the text column away from the
   left-aligned masthead above it. Constrain the CHILDREN to the reading measure instead and let
   .wrap keep owning the gutter. */
.prose > *{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,3vw,2.4rem);margin:2.6rem 0 .9rem}
.prose h3{font-size:clamp(1.25rem,2vw,1.55rem);margin:2rem 0 .6rem}
.prose p{margin:0 0 1.1rem}
.prose ul,.prose ol{margin:0 0 1.3rem 1.3rem}
.prose li{margin:0 0 .55rem}
.prose strong{font-weight:600}
/* --ember-ink on --ground is 5.12:1, and the underline means colour is not the only cue. */
.prose a{color:var(--ember-ink);font-weight:600;text-decoration:underline;text-underline-offset:2px}
.prose a:hover{color:var(--paper)}
/* A .btn inside .prose. `.prose a` is (0,1,1) and `.btn` is only (0,1,0), so without this the
   link colour above wins and paints --ember-ink text on the button's --ember fill, which
   measures 2.30:1 against a 4.5 bar. Caught by impeccable rather than by eye. */
.prose a.btn{color:var(--ink);text-decoration:none}
.prose a.btn:hover{color:var(--ink)}
.prose a.btn.line{color:var(--paper)}
.prose a.btn.line:hover{color:var(--ground)}

/* A callout. Left rule plus a heading, so it does not rely on the tint alone. */
.note{background:var(--panel);border-left:4px solid var(--ember-ink);
  padding:20px 24px;margin:1.6rem 0;max-width:68ch}
/* Its own darker ember rather than --ember-ink. THE COMPUTED PAIR PASSES AND THE RENDERED ONE
   DID NOT: --ember-ink on --panel computes to 5.89:1, but this label is 12.6px bold mono with
   .14em tracking, and small tracked text antialiases lighter, so a sampler reading actual glyph
   pixels measured 4.20:1 against a 4.5 bar. #7A2506 computes to 8.83:1, which leaves enough head
   room for the same antialiasing to land above 4.5. Measure this one on screen, never on paper. */
.note .lbl{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7A2506;display:block;margin-bottom:.5rem;font-weight:700}
.note p:last-child{margin-bottom:0}

/* The unaffiliated banner. Deliberately loud and at the top of the page body. */
.disclaimer{background:var(--night);color:var(--on-dark);padding:22px 0}
.disclaimer .wrap{max-width:1240px}
.disclaimer p{max-width:78ch;font-size:.98rem}
.disclaimer b{color:var(--amber)}

/* Screen-reader-only. Used for table captions that would be redundant on screen but that a
   screen reader needs to announce what the table is. This is NOT the hidden-text pattern Google
   penalises: their own docs carve out text meant for assistive technology. Never put anything
   here that is not also obvious from the visible page. */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* A plain data table. Scrolls inside itself rather than pushing the page sideways. */
.tablewrap{overflow-x:auto;margin:1.4rem 0;max-width:68ch}
table.data{border-collapse:collapse;width:100%;font-size:.97rem}
table.data th,table.data td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--line)}
/* Its own darker grey rather than --muted, and for the same reason as .note .lbl above. This is
   12.9px bold tracked mono: --muted computes to 5.64:1 on --ground but rendered between 4.05:1
   and 4.66:1 across the two header cells, so it straddled the 4.5 bar. #333D4B computes to
   8.42:1. Both of these were caught by measuring pixels, and both looked fine on paper. */
table.data th{font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;text-transform:uppercase;
  color:#333D4B;font-weight:700}
table.data tr:last-child td{border-bottom:0}

.btn{display:inline-flex;align-items:center;gap:.6rem;font-family:var(--disp);font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;font-size:1.1rem;padding:.85rem 1.7rem;
  background:var(--ember);color:var(--ink);border:1px solid var(--ember);cursor:pointer;
  text-decoration:none;transition:background .2s}
.btn:hover{background:var(--amber)}
.btn.line{background:transparent;color:var(--paper);border-color:var(--paper)}
.btn.line:hover{background:var(--paper);color:var(--ground)}

.endcap{background:var(--panel);border-top:1px solid var(--line);padding:56px 0;margin-top:56px}
.endcap h2{font-size:clamp(1.8rem,3.4vw,2.6rem);max-width:22ch}
.endcap p{max-width:60ch;margin:1rem 0 1.8rem;color:var(--muted)}
.endcap .btns{display:flex;gap:.9rem;flex-wrap:wrap}

/* ---------- footer ---------- */
footer{background:var(--night);color:var(--on-dark-mut);padding:56px 0 40px}
.foot{display:flex;flex-wrap:wrap;gap:24px;justify-content:space-between;align-items:flex-start}
.foot .fb{font-family:var(--disp);font-weight:800;font-size:1.4rem;color:var(--on-dark);
  text-transform:uppercase}
.foot .fb small{display:block;font-family:Archivo,sans-serif;font-weight:400;font-size:.85rem;
  text-transform:none;color:var(--on-dark-mut);margin-top:6px}
.foot .fc{font-size:.95rem;line-height:2.1}
/* Same reasoning as .prose a: underline so the link is not distinguishable by colour alone.
   --amber on --night measures 10.58:1. */
.foot .fc a{color:var(--amber);text-decoration:underline;text-underline-offset:2px;
  display:inline-block;min-height:24px}
.foot .fc a:hover{color:#fff}
.credit{font-size:.82rem;color:var(--on-dark-mut);margin-top:1.6rem}
.backlink{margin-top:1.2rem;font-size:.95rem}
.backlink a{color:var(--amber);text-decoration:underline;text-underline-offset:2px}

@media (max-width:860px){
  .wrap{padding:0 22px}
  nav.top{gap:1.2rem}
  .masthead{padding:48px 0 54px}
  article{padding:40px 0 16px}
}
/* These pages carry no burger menu, unlike the home page, because three links do not need one.
   Below this width the row cannot fit, and left alone it wraps into a stacked column jammed
   beside the brand. Stack the whole bar instead and let the links run as their own row. */
/* Short phones. The header plus the unaffiliated banner filled the ENTIRE first screen: at
   320x568 the h1 started at 557 and showed 11px of a 237px headline, so a resident landing
   here saw a screen of legal text and no sign of what the page was. NOTHING IS REMOVED AND NO
   WORDING CHANGES; the banner keeps every word, its colour and its position. This tightens
   spacing and type only, which buys back 120px and starts the h1 at 437. Measured 2026-08-27.
   Above 640 none of this applies, and at 390x844 the headline already cleared the fold. */
@media (max-width:640px){
  header{padding:10px 0}
  .bar{flex-direction:column;align-items:flex-start;gap:10px}
  nav.top{width:100%;gap:.85rem;row-gap:.3rem}
  .disclaimer{padding:14px 0}
  .disclaimer p{font-size:.88rem;line-height:1.45}
}
@media (pointer:coarse){ nav.top a,.btn,.prose a{min-height:44px} }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *{transition:none!important} }