/* ══ GLANCE · IDENTITY ═══════════════════════════════════════════════════════════════════════
   Direction D, chosen by Karan 2026-08-10: B's confidence rail inside A's page structure.

   ── HOW THIS IS APPLIED, AND WHY NOT BY EDITING THE PAGES ──────────────────────────────────
   Every one of the 28 pages carries its own copy of the token block inline, with identical values
   (`--accent:#c5311d` in all of them). Editing 28 inline blocks is 28 chances to diverge, and the
   next person to add a page copies whichever one they happened to open.

   So this file REDEFINES the tokens and is linked AFTER the inline <style>, where it wins on
   source order. A page adopts the identity with one line, exactly the way glance-motion.css was
   added, and the identity has one home.

   Nothing here removes a page, a section, or a sentence. It restyles what exists.

   ── THE TYPE DECISION, WHICH IS A PERFORMANCE DECISION ─────────────────────────────────────
   The site currently loads NO webfonts — Georgia and a system stack, which is why it is fast. The
   brief also says "performance is part of the aesthetic … interactive under 2s". Three families
   would be the full drawing and the worst answer.

   So: TWO webfonts, and the third role is a system stack.
     · Newsreader — display and lead copy. This is the voice; without it the direction is gone.
     · Archivo    — furniture: labels, datelines, folios, buttons, small caps. A newspaper does
                    not set its furniture in its headline face, and this is what stops the page
                    reading as "a serif website".
     · Numerals   — ui-monospace / SF Mono / Consolas. System, zero bytes, and every one of them
                    has tabular figures. IBM Plex Mono is more characterful and it is not worth a
                    third download on a page whose job is to load fast.

   Both are variable and subset to latin. If the budget still bites, Archivo is the one to drop —
   the furniture survives in a system sans; the display face does not.                            */

/* ── tokens ──────────────────────────────────────────────────────────────────────────────────
   THREE selectors, not one, and this is not belt-and-braces.

   The inline block defines the light palette in `:root` (0,1,0) AND in `:root:not([data-theme])`
   inside a prefers-color-scheme query AND in `:root[data-theme="light"]` — both (0,2,0). A plain
   `:root` here loses to the last two however late it is loaded, and the symptom is subtle: the
   accent changes and the BACKGROUND does not, so the page looks half-restyled and the cause is
   invisible in the file you are reading.

   Measured, not guessed: with a plain `:root`, --accent became #8C2F1D and --bg stayed #f5f2ea.

   Dark theme is deliberately left alone. This direction is a paper stock; inverting it is a
   separate design question and silently half-answering it is worse than not answering it.

   ── CORRECTION, 2026-08-12: "LEFT ALONE" WAS NOT TRUE, AND IT SHIPPED A 2.22:1 HEADLINE ──────
   Leaving dark alone would have required not setting these tokens where dark can see them. The
   selector list below includes a plain `:root`, which matches on EVERY document — including
   `:root[data-theme="dark"]`. So `--accent:#8C2F1D` applied in dark mode, and the inline dark
   block in index.html overrides `--ink-accent` but never `--accent`.

   `h1 .hl` is (0,1,1) and `.hl` is (0,1,0), so the hero headline takes `--accent` rather than the
   `--ink-accent` the dark theme actually corrected. Oxblood on #17140f is **2.22:1** — measured by
   deploy.sh's own UI check, which failed the deploy with
   `"every morning." 2.22:1 (needs 3) — rgb(140,47,29) on rgb(23,20,15)`.

   A token set on `:root` is set everywhere. "Deliberately left alone" describes an intention; the
   selector describes what happened. The dark override below is the smallest honest repair — it
   takes #ff6a52, the value this site's dark theme ALREADY uses for --ink-accent, so it is a
   consistency fix rather than a new colour decision. 6.50:1 on the ground, 5.94:1 on panel.
   Inverting the paper stock properly is still a separate design question. */
:root,
:root:not([data-theme]),
:root[data-theme="light"]{
  --bg:#FBFAF7;              /* newsprint. Cooler and lighter than the cream it replaces */
  --panel:#FFFFFF;
  --panel2:#F6F5F1;
  --text:#14140F;            /* ink. Nearly black — newspapers do not set body copy in grey */
  --muted:#5F5B4E;
  --line:#D8D4C8;            /* every division is a RULE, not a border */
  --line-firm:#B8B3A3;

  /* Oxblood, not terracotta. The single character that separates this from the generated default. */
  --accent:#8C2F1D;
  --accent2:#B8892B;         /* the mark's gold. Reserved for "verified", and WIRED TO NOTHING
                                yet — see the note below for why that is deliberate. */
  --ink-accent:#8C2F1D;

  /* --ink-accent2 is NOT a second accent. Grep says it is the site's LINK colour: 12 uses, all
     of them links, and the original value #a8321f is a link red. I read the name and gave it the
     mark's gold, which put every link on the page at 3.02:1 — a fail I then screenshotted and
     looked straight past, because gold on paper looks intentional.

     A token's name is not its contract; its call sites are. Links take the accent: 7.92:1. */
  --ink-accent2:#8C2F1D;

  /* RESERVED — "needs you" and nothing else, anywhere, ever.
     Measured rather than eyeballed, and the first two answers were both wrong: the mockup's
     #D98324 gives 2.79:1 on paper, and #B0641A — which I had already "darkened to clear AA" —
     gives 4.30:1 and also fails. #9A5614 is 5.42:1 on paper, 5.18:1 on panel2, 5.65:1 on white,
     so it holds on every surface this token can land on rather than only the one I tested.
     It sits 1.46:1 from --accent, which is close. That is acceptable ONLY because signal never
     carries meaning alone — it always accompanies the words that say what needs you, and the
     rail beside it encodes confidence in texture. Colour is never the channel here. */
  --signal:#9A5614;
  --good:#1F7A5C;

  --shadow:none;             /* a newspaper has no drop shadows. Rules and alignment do the work. */

  --f-display:Newsreader,Georgia,"Times New Roman",serif;
  --f-fur:Archivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-num:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}

/* The dark repair. See the CORRECTION note above: the tokens in the block above are set on a plain
   `:root`, so they reach dark whatever the intention was. Only the two that FAIL there are
   overridden — --accent2 is the mark's gold and is wired to nothing, and the paper-stock question
   stays open. */
:root[data-theme="dark"]{
  --accent:#ff6a52;          /* 6.50:1 on #17140f, 5.94:1 on #211d16 — was 2.22:1 */
  --ink-accent:#ff6a52;
  --ink-accent2:#ff6a52;     /* the LINK colour, per the note above — call sites, not the name */
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme]){
    --accent:#ff6a52;
    --ink-accent:#ff6a52;
    --ink-accent2:#ff6a52;
  }
}

/* ── type ────────────────────────────────────────────────────────────────────────────────────
   `.creed` is the hero heading's class and it declares the display face itself. A class is (0,1,0)
   and beats a bare `h1` (0,0,1) no matter how late this file loads — so the tokens changed, the
   background changed, and the type silently did not.

   Every selector that sets Georgia in the inline block is named here: exactly `.creed`, `h1`, `h2`.
   Grepped rather than guessed, so this list is complete for this page rather than hopeful. */
body{font-family:var(--f-display);color:var(--text);background:var(--bg)}
.creed,h1,h2,h3,h4{font-family:var(--f-display);font-weight:500;letter-spacing:-.02em}
h1{line-height:1.04}
h2{line-height:1.1}

/* Furniture. Anything that labels rather than speaks. */
.eyebrow,.kicker,.pill,.chip,.btn,button,nav,.nav,.footer-col h4,.relv,.relcount,.reldate,
label,th,.lab{font-family:var(--f-fur);letter-spacing:.02em}
.eyebrow,.kicker,.lab{font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}

/* Numerals are the instrument face. Tabular so columns of figures line up, which is most of what
   makes dense data feel calm rather than busy. */
.num,.figure,.price,.stat,.kpi,td.v,.metric{font-family:var(--f-num);font-variant-numeric:tabular-nums}

/* ── the rail ────────────────────────────────────────────────────────────────────────────────
   Weight and TEXTURE, never hue — so it survives greyscale, colour-blindness and a printed page,
   and so the one reserved colour is never spent on it.

   Longhand padding-left ONLY. A shorthand `padding: x y` in a more specific selector silently
   cancels it and the mark renders on top of the first letter — which is exactly what happened in
   the mockup and was invisible until it was screenshotted. */
.gl-rail{position:relative;padding-left:20px}
.gl-rail::before{content:"";position:absolute;left:0;top:2px;bottom:2px;width:3px}
.gl-rail--verified::before{background:var(--text)}
.gl-rail--partial::before{background:repeating-linear-gradient(180deg,var(--text) 0 6px,transparent 6px 12px)}
.gl-rail--unchecked::before{background:repeating-linear-gradient(180deg,var(--line-firm) 0 2px,transparent 2px 6px)}
.gl-needs{color:var(--signal);font-weight:500;font-family:var(--f-fur)}

/* ── structure ───────────────────────────────────────────────────────────────────────────────
   Cards become columns. The wall of rounded rectangles is the single most template-derived thing
   on the page, and radius is where it lives. */
.card,.panel,.tile,.box{border-radius:0;box-shadow:none;border:1px solid var(--line)}
.u-btop{border-top:1px solid var(--line)}
section{border-radius:0}

/* A masthead rule under the header, the way a publication opens. */
.site-header,header.nav{border-bottom:2px solid var(--text)}

/* The accent is a RULE, not a fill. It appears as a short bar under a lead, never as a background
   behind text — which is where the old identity spent it. */
.gl-leadrule{height:3px;width:88px;background:var(--accent);margin:14px 0 18px}

/* ── reduced motion is handled by glance-motion.css; nothing here animates ─────────────────── */

/* ── the brand token, which was never a token ────────────────────────────────────────────────
   14 places write `var(--gc-brand,#c5311d)`, and `--gc-brand` is defined in glance-charts.css as
   `var(--brand,#c5311d)` — where `--brand` is defined NOWHERE. So every one of those 14 resolved
   through the fallback to the old terracotta, and would have kept doing so however many times
   --accent was changed. This is why the numbered markers and the nav CTA stayed the old colour
   after the palette moved: they never read --accent at all.

   Defining --brand once is the whole fix, and it reaches the chart palette at the same time. */
/* --gc-brand must be set HERE too, not only --brand. glance-charts.css defines --gc-brand, and only
   4 of the 28 pages link that file — so on the other 24 the whole chain was undefined and every
   `var(--gc-brand,#c5311d)` fell through to the literal. Setting --brand alone fixed index.html,
   which links charts, and left 24 pages still terracotta. Fixed both ends of the chain. */
:root,:root:not([data-theme]),:root[data-theme="light"]{--brand:#8C2F1D;--gc-brand:#8C2F1D}

/* ── radius: a decision per object, not a blanket 0 ──────────────────────────────────────────
   The wall of 16–18px rounded rectangles is the most template-derived thing on this page, and
   squaring the CONTAINERS is most of the restyle. But `border-radius:0` applied globally would
   also square the things that are round because the OBJECT is round, and a phone with sharp
   corners or an oval status dot just looks broken.

   Squared — containers that are panels pretending to be cards:            */
.uc,.card,.mock,.kpi,.qcard,.tier,.dstep,.cstep,.step,.ftpromise,.pill,.aud-chips a,
.btn,.nav-cta,.nav-login,.carousel,.carousel figure,.board-slot{border-radius:0}
/*  Left round on purpose: `.mock .dot` and `.cdots button::before` (status lights are round),
    `.phone` and `.phone .notch` (it is a picture of a physical object), `.qcard .av` (avatar). */

/* Cards become columns: the border stays, the fill and the shadow go. A rule does the dividing. */
.card,.uc,.kpi,.dstep,.cstep,.step,.tier,.qcard{background:transparent;box-shadow:none}
.mock{box-shadow:none}

/* ── the accent is a rule and a mark, never a fill behind text ──────────────────────────────── */
/* Primary action is INK, the way a masthead sets its one button. The accent stays reserved so
   that when it does appear the eye has learned it means something. */
.btn{background:var(--text);color:var(--bg);font-family:var(--f-fur);font-weight:500}
.btn.ghost{background:transparent;color:var(--text);box-shadow:inset 0 0 0 1px var(--text);border:0}
/* Hover was `transform:translateY(-2px)` — a lift needs a shadow to land on, and there are no
   shadows here. Ink deepens instead; the feedback survives, the template tell does not. */
.btn:hover{transform:none;background:#000}
.btn.ghost:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--text)}

/* Numerals in a sequence are set as figures, not badges in coloured circles. The sequence is
   real here (see it → click it → read it), so the numbering earns its place; the circle did not. */
.dstep .n,.step::before{background:transparent;color:var(--accent);border-radius:0;
  font-family:var(--f-num);font-weight:500;font-size:19px;place-items:start;
  border-top:2px solid var(--accent);padding-top:6px;width:auto;height:auto;display:block}
.dstep .n{width:28px}

/* A short accent rule under every section head — the one place the colour is spent, and it is a
   rule rather than a background. Done with ::after so no markup and no strings change. */
section h2::after{content:"";display:block;height:3px;width:88px;background:var(--accent);
  margin:14px 0 4px}
.u-tc h2::after,h2.u-tc::after{margin-left:auto;margin-right:auto}

/* Bars were an accent gradient fading to transparent — decoration reading as data. Flat ink,
   square top: the height is the only variable, which is what a scale means. */
.bars span{background:var(--text);border-radius:0;opacity:1}

/* Furniture that the type block could not know about by tag alone. */
.uch,.dstep b,.card h3,.step h3,.kpi .l{font-family:var(--f-fur)}
.kpi .v,.num,.kpi .d{font-family:var(--f-num);font-variant-numeric:tabular-nums}

/* ── the glow, the gradients, and the centred hero ───────────────────────────────────────────
   Three things survived the token change because none of them read a token.

   1. `header::before` is a 160px radial wash of rgba(197,49,29,.10) — the old terracotta, hard-
      coded. On newsprint it renders as a pink cloud behind the masthead, which is the single most
      "generated landing page" object on the screen. A newspaper has no glow. */
header::before{display:none}

/* 2. Diagonal 135° gradients on the audience toggle and the avatars, all hardcoded terracotta.
      Flat ink and flat accent instead — a gradient is a light source, and there isn't one. */
.aud-toggle button.on{background:var(--text);color:var(--bg)}
.qcard .av.a{background:var(--accent)}
.qcard .av.b{background:var(--text)}
.qcard .av.c{background:var(--accent2)}

/* 3. The hero is centred. Centred display type is the layout a template picks when it has no
      opinion about where the eye should start; a publication starts every column at the same
      left edge, and that shared edge is what makes a page feel set rather than assembled.
      The proof line and chips move with it or the alignment reads as an accident. */
header{text-align:left}
header .creed{max-width:16ch;margin-left:0}
header .sub{margin-left:0;max-width:52ch}
.cta-row{justify-content:flex-start}
.hero-proof,.hero-taxline,.aud-chips{text-align:left!important;justify-content:flex-start}
.hero-taxline{margin-left:0}

/* ── one left edge ───────────────────────────────────────────────────────────────────────────
   Measured before changing anything: seven of the ten section heads are centred and two start at
   the left, which is not a rhythm, it is drift. Centred display type is what a layout picks when
   it has no opinion about where the eye should start — and a page's authority comes from every
   column beginning at the same edge.

   Scoped to section HEADS, not to `.u-tc` globally: that utility is used on other pages for
   things that genuinely are centred lines, and this file will be linked from those pages next. */
section > .wrap > .u-tc,section h2.u-tc,section > .wrap > .u-tc .lead{text-align:left}
section > .wrap > .u-tc .lead.u-m0a{margin-left:0}
.u-tc h2::after,h2.u-tc::after{margin-left:0;margin-right:0}

/* ── the footer's green is no longer needed, and is now off-palette ──────────────────────────
   `footer a:not(.ftcta){color:#0c6349}` was a real fix: the OLD accent hit only 4.23:1 against
   the OLD footer surface. Both sides of that relationship have since moved. Measured against the
   new pair — #8C2F1D on #F6F5F1 — the accent gives 7.58:1, comfortably past AA, so the workaround
   can go and the footer stops being the one place on the site that is quietly green. */
footer a:not(.ftcta),footer .ftmail{color:var(--accent)}
footer{background:var(--panel2);border-top:1px solid var(--line-firm)}

/* ── section rhythm: deliberately NOT adding anything ────────────────────────────────────────
   `section{border-top:1px solid var(--line)}` already divides every section, so the top rules I
   was about to add would have been a second horizontal line a few pixels from the first, in every
   section, all the way down. The accent rule under each head is the section marker; the divider
   is the divider. One accessory removed before leaving the house. */

/* ── the emphasised step ─────────────────────────────────────────────────────────────────────
   `.cstep.on` marked the third step — the moment the product compounds — with a coloured border
   and `box-shadow:0 12px 34px rgba(197,49,29,.14)`. A 34px coloured glow is the most template-
   derived object left on the page, and it is doing a job the copy already does.

   A publication marks its lead item by giving it more RULE, not more glow: a heavy ink rule above
   it, the accent spent only on the dateline. Emphasis survives greyscale and print. */
.cstep.on{border-color:var(--line);box-shadow:none;border-top:3px solid var(--text)}
.cstep.on .n{color:var(--accent)}
.cstep .n,.cards.audience .card .go{font-family:var(--f-fur)}

/* ── hover: the lift goes, the feedback stays ────────────────────────────────────────────────
   Same reasoning as the buttons — `translateY(-3px)` needs a shadow to lift away from, and there
   are none here. The rule firms up instead, which is the gesture a rule can actually make. */
.cards.audience .card:hover{transform:none;border-color:var(--text)}

/* Standing-head furniture: the eyebrow is a dateline, so it takes the muted ink rather than the
   gold. The gold is reserved for "verified" and spending it on decoration empties the word. */
.eyebrow{color:var(--muted)}

/* ── the leads that stayed centred ───────────────────────────────────────────────────────────
   Left-aligning the section HEADS moved the heads and left their standfirsts behind, so a lead
   paragraph began 140px to the right of the headline it belonged to. Worse than centred: it reads
   as a broken indent rather than a choice. These are the `.u-tc` leads that sit as siblings of a
   head rather than inside the wrapper the earlier rule caught. */
section .lead.u-tc,section .wrap.u-tc,section .wrap.u-tc .lead{text-align:left}
section .lead.u-tc,section .wrap.u-tc .lead.u-m0a{margin-left:0;margin-right:0}

/* ── the recommended tier ────────────────────────────────────────────────────────────────────
   `.tier .badge` writes `background:#c5311d` as a LITERAL — not through --accent, not even through
   the --gc-brand fallback — so it was the last object on the page still wearing the old terracotta
   after every token had moved. Grepped the whole file for the literal to be sure it is the last.

   Marked the same way the compounding step is marked, because it is the same kind of statement:
   a heavy ink rule above, and the label set as furniture rather than a filled capsule. */
.tier.pop{border-color:var(--line);border-top:3px solid var(--text)}
.tier .badge{background:var(--text);color:var(--bg);border-radius:0;font-family:var(--f-fur);
  font-size:10px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;padding:4px 10px}

/* Footer column heads are furniture, not headlines — they label the columns beneath them. */
.ftcol h4,.ftcol .fth,footer h4{font-family:var(--f-fur);font-size:10px;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase}

/* Feature ticks were --good green. Green is a fourth colour on a page whose whole argument is that
   colour is reserved, and "included in this plan" is not a status — the list is already only the
   things you get. Ink, so the reservations on accent, gold and signal keep meaning something. */
.tier li::before,.tier .tick,.tier li svg{color:var(--text);fill:var(--text)}

/* The last capsules: the plan switcher and the country select. */
.aud-toggle,.aud-toggle button,select,.ccy select,input[type=email],input[type=text]{border-radius:0}

/* ══ SITE-WIDE CLEANUP ═══════════════════════════════════════════════════════════════════════
   Found by auditing all 28 pages in a browser rather than by reading files. Everything below was
   invisible to a grep of index.html, because every one of these lives on a page I had not opened.

   ── the blind spot that produced most of them ──────────────────────────────────────────────
   Every item in the first group is a `linear-gradient(135deg, <old red>, <old red>)`. They kept
   escaping both of my automated checks for the same reason: a gradient lives in background-IMAGE,
   and both the palette sweep and the contrast checker read background-COLOR. So an element with
   white text on a red gradient reports "transparent background" and gets compared against the
   paper behind it — which is why the audit claimed 1.00:1 ratios that are actually fine.

   Flattening them fixes the design AND makes the elements measurable, which is why this is the
   right fix rather than teaching the checker about gradients. */
button.primary,.seg button.on,.gc-byiris,.aud-toggle button.on{
  background-image:none;background-color:var(--text);color:var(--bg)}
.gc-byiris{border-radius:0;font-family:var(--f-fur);letter-spacing:.06em}
.honest,.rd-appicon{background-image:none;background-color:var(--panel)}

/* Tinted "this is us" table columns, both at rgba(197,49,29,.05–.07) — the old red at 5% reads as
   a faint pink stain on newsprint. A column is emphasised with a rule and a ground, not a wash. */
table.cmp .pop-col,.cmp-table .us{background:var(--panel2)}
.cmp-table thead th.us{color:var(--accent)}
.aicard.us{border-color:var(--text);box-shadow:none}

/* ── contrast failures that predate this work but are mine to fix while I am here ────────────
   `.kpi .d.down` is #ff7b7b — a light red picked for a DARK background and never re-picked for
   the light one, where it measures 2.30:1. It marks a falling number, so it must be legible.
   `.rd-baction` is #a86616 at 4.40:1 — close enough to pass a glance and not close enough to pass.
   Both take the same darkened amber/red the signal token already had to be corrected to. */
.kpi .d.down,.gl-down{color:#B3261E}
.rd-baction{color:var(--signal);border-color:var(--line-firm);border-radius:0}

/* ── tokens the audit found by rendering, not by reading ─────────────────────────────────────
   --bad and --teal are defined per-page and were never in the palette I redefined. --bad (#ff7b7b)
   is a light red chosen for a dark ground and never re-picked for the light one: 2.40:1 wherever it
   marks an error, which is the single worst contrast on the site and it is on the word "error".
   --teal is #c08a2e, a gold, used for links on two pages at 2.91–3.04:1. */
:root,:root:not([data-theme]),:root[data-theme="light"]{--bad:#B3261E;--teal:#8C2F1D}

/* ── the demo and chart NEUTRALS ─────────────────────────────────────────────────────────────
   glance-demos.css and glance-charts.css carry a whole second palette: periwinkle bars (#c9d4ea)
   on cool blue-grey panels (#eef2f8, #f6f8fc). On newsprint that ground reads as a screen pasted
   onto paper, and it is the reason the demo blocks look imported rather than drawn.

   Only the NEUTRALS are moved here — the unfilled bar, the panel tints, the rules. The SERIES
   colours (the greens and ambers that distinguish one line from another) are deliberately left
   alone: recolouring those is a distinguishability problem, not a palette problem, and it belongs
   with the walkthrough work where the charts are being reconsidered anyway. Half-doing it now
   would leave series that no longer separate. */
.rd-bars span,.gc-dbar .col i{background:var(--line);border-radius:0}
.gc-mini rect[fill="#c9d4ea"]{fill:var(--line)}

/* dashboard-header.html carries its own pair, --gl-blue/--gl-teal, both still the old values. The
   teal is a gold used for footer links at 2.91:1. Same shape of bug as --ink-accent2: a token whose
   name describes a colour it stopped being. */
:root,:root:not([data-theme]),:root[data-theme="light"]{--gl-blue:#8C2F1D;--gl-teal:#8C2F1D}

/* ── NOT CHANGED, and both are decisions rather than oversights ──────────────────────────────
   `.gc-row i` legend swatches and the SVG logo mark still carry the old red.

   The swatches take their colour from glance-charts.js per series, so they are the series palette
   again — same reasoning as the demo neutrals above: recolouring a legend halfway leaves series
   that no longer separate from one another.

   The logo mark is a brand asset, not a stylesheet. Restyling a page is one thing; changing the
   mark is Karan's decision and it needs to happen in the SVG, the favicon, the OG image and the
   app together, or it is worse than leaving it. */

/* ── skip link — WCAG 2.4.1 Bypass Blocks ────────────────────────────────────────────────────
   2026-08-14: the 2026-08-09 audit's A11Y-01 named 4 pages as already having this ("grep -l
   skip" — index.html, how-it-works.html, releases.html, solutions.html). Re-checked before
   building anything, per this repo's "verify before working the item" rule: all 4 hits are the
   word "skip" inside prose/CSS comments, not a real element — none of the 28 pages has ever
   shipped a working skip link. Defined once, here, so every page that adopts
   `<a class="skip-link" href="#main">` gets identical behaviour instead of 28 hand-copied
   versions (the drift CODE-01 already warns about). Deliberately text/bg only — no --accent —
   to stay clear of the gradient-contrast question that's out of scope for this fix. */
.skip-link{
  position:absolute;top:-1000px;left:0;z-index:999;
  background:var(--text);color:var(--bg);
  padding:12px 20px;font-family:var(--f-fur);font-weight:650;font-size:14px;
  text-decoration:none;border-radius:0 0 8px 0;
}
.skip-link:focus{top:0}