/* ==========================================================================
   Ali Rainbow — marketing consultancy
   Accessibility is the product demo. Non-negotiables in this file:
     - body text 19px, never below 17px
     - body copy contrast targets WCAG AAA (7:1); UI chrome AA (4.5:1) minimum
     - interactive targets >= 44x44px
     - visible focus rings on everything focusable
     - nothing conveyed by colour or motion alone
   ========================================================================== */

:root {
  --ink:        #16181d;
  --ink-soft:   #3b4049;  /* measured 9.98:1 on --paper — AAA, safe for body copy */
  --ink-faint:  #5c6270;  /* measured 5.86:1 — captions and meta only, never paragraphs */
  --paper:      #fbfaf7;
  --paper-warm: #f4f1ea;
  --card:       #ffffff;
  --rule:       #ddd8cd;

  --accent:      #0d5c63;  /* deep teal — measured 7.37:1 on --paper */
  /* The label that sits ON --accent. In light mode the accent is dark so the
     label is white; in dark mode the accent is pale cyan and a white label
     measures 1.92:1, so it flips to ink (9.24:1). Never hard-code #fff on a
     filled control: --accent changes per theme and the label must follow. */
  --on-accent:   #ffffff;
  /* Non-text UI boundaries need 3:1, which --rule (1.36:1) does not meet.
     --edge is --rule's accessible sibling for anything that delimits a
     control or carries meaning in a chart. */
  --edge:        #8d8778;
  --accent-deep: #08383d;
  --accent-wash: #e6f0f0;
  --hot:         #b03a2e;  /* placeholder pills only, deleted at launch */
  --hot-wash:    #fbeae7;

  /* Yellow. It can never carry text: marigold on paper measures 2.07:1 and
     lemon 1.34:1, and darkening it far enough to pass turns it olive.
     It works as a SURFACE, where ink on marigold measures 10.58:1 (AAA).
     --num-ink and --sun-mark flip per theme: light mode sets dark numerals on
     a marigold highlight, dark mode makes the numerals marigold and drops the
     highlight, because yellow reads beautifully as text on a dark ground. */
  --sun:       #f2c14e;   /* highlight and warm button fill */
  --sun-deep:  #d99026;   /* statistic underline and rules */
  --sun-wash:  #fdf6e0;   /* band fill. Any paler and it stops separating
                             from --paper (1.02:1) and the band vanishes. */
  --sun-line:  #edd9a4;   /* band edges, so a soft fill is not outlined in a
                             hard amber */
  --sun-edge:  #a8681a;   /* border for a marigold button. Its fill sits only
                             1.55:1 from the band, so the border has to carry
                             the shape: this measures 4.17:1 against it. */
  --num-ink:   #16181d;
  --sun-mark:  #f2c14e;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  /* Karla is variable (wght 200-800), so the 550 and 650 weights used for nav,
     buttons and <strong> resolve exactly rather than snapping to 500 or 700. */
  --sans:  "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  /* Reading measure. NB: rem is root-relative (16px) while body text is 19px,
     so character counts run ~19% shorter than the rem figure suggests.
     Tune --measure and every page follows. */
  /* Tracking. Karla is a touch tighter than Inter by default, so body copy
     gets slight positive tracking and headings lose most of the negative.
     Adjust these two and the whole site follows. */
  --track:         0.004em;   /* body, UI, lists. Karla is generously spaced
                                 by default, so it wants almost none added. */
  --track-display: -0.004em;  /* Newsreader headings and the wordmark */

  --measure:  40rem;   /* ~75 characters at the 19px body size */
  /* The Gap used to run 60rem here, which at 19px is ~111 characters against
     ~93 everywhere else: the longest page on the site had the longest lines.
     Matched to --measure so one reading width governs every page. */
  --readable: 40rem;
  --wide:     80rem;  /* outer container */

  --step: 0.75rem;
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink:        #f2f0ec;
    --ink-soft:   #cdc9c1;
    --ink-faint:  #a5a09a;
    --paper:      #16181d;
    --paper-warm: #1e2128;
    --card:       #1e2128;
    --rule:       #363b45;
    --accent:      #6fc9cf;
    --accent-deep: #a8e0e4;
    --on-accent:   #16181d;
    --edge:        #6a7280;
    --accent-wash: #14313a;
    --hot:         #f0917f;
    --hot-wash:    #3a201c;
    --sun:       #f5cd6b;
    --sun-deep:  #e8a33d;
    --sun-wash:  #2a2318;
    --sun-line:  #4a3d24;
    --sun-edge:  #f5cd6b;
    --num-ink:   #f5cd6b;   /* yellow as text is excellent on a dark ground */
    --sun-mark:  transparent;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* The header is sticky at >=52rem and 77px tall, so without this every
     in-page anchor, the skip link and the scorecard result land underneath it
     (WCAG 2.4.11). Matches the media query that makes the header sticky. */
  scroll-padding-top: 0;
}
@media (min-width: 52rem) { html { scroll-padding-top: 6rem; } }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 19px;          /* deliberate: the audience is 50+ */
  line-height: 1.65;
  letter-spacing: var(--track);
}

/* ---------- Typography ---------- */

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: var(--track-display);
  color: var(--ink);
  margin: 0 0 var(--step);
  text-wrap: balance;
}

h1 { font-size: clamp(2.35rem, 6vw, 4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin-top: 3rem; }
h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); margin-top: 2rem; }

p, li { color: var(--ink-soft); }
p { margin: 0 0 1.15rem; max-width: var(--measure); }

.lede {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  line-height: 1.5;
  color: var(--ink);
  font-family: var(--serif);
  max-width: var(--measure);
}

a { color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { color: var(--accent-deep); }

strong { color: var(--ink); font-weight: 650; }

small, .meta {
  font-size: .82rem;
  color: var(--ink-faint);
  letter-spacing: .01em;
}

.eyebrow {
  font-family: var(--sans);
  font-size: .8rem;
  font-weight: 650;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 .85rem;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 2px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--accent); color: var(--on-accent);
  padding: .9rem 1.25rem; z-index: 100; border-radius: 0 0 var(--radius) 0;
}
.skip:focus { left: 0; top: 0; }

/* ---------- Layout ---------- */

.wrap { width: 100%; max-width: var(--wide); margin: 0 auto; padding: 0 1.5rem; }
/* The container and the reading width are separate jobs. The container stays
   generous so a text page does not read as a thin ribbon beside the card
   pages; the prose inside centres at --measure so lines stay at ~75
   characters. Anything marked .bleed spans the full container. */
.narrow { max-width: 56rem; }
.wrap.narrow {
  display: grid;
  grid-template-columns: 1fr min(var(--measure), 100%) 1fr;
}
.wrap.narrow > * { grid-column: 2; min-width: 0; }
.wrap.narrow > .bleed,
.wrap.narrow > .grid,
.wrap.narrow > .table-scroll,
.wrap.narrow > .chart-fig { grid-column: 1 / -1; }
.wrap.narrow > p, .wrap.narrow > ul, .wrap.narrow > ol { max-width: none; }

section { padding: 3.5rem 0; }
section.tight { padding: 2rem 0; }

.band { background: var(--paper-warm); border-block: 1px solid var(--rule); }
.band-accent { background: var(--accent-wash); border-block: 1px solid var(--rule); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 3rem 0; }

/* ---------- Header / nav ---------- */

.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
  position: sticky; top: 0; z-index: 50;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 76px; flex-wrap: wrap;
}
/* Narrow screens: the nav wraps to two rows, so a sticky header would eat a
   fifth of the viewport. Let it scroll away instead. */
@media (max-width: 52rem) {
  .site-head { position: static; }
  .site-head .wrap { padding-block: .5rem; }
}

.wordmark {
  font-family: var(--serif);
  font-size: 1.35rem; font-weight: 600;
  color: var(--ink); text-decoration: none;
  letter-spacing: var(--track-display);
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .5rem 0;
}
.wordmark:hover { color: var(--ink); }
.wordmark .arc {
  width: 26px; height: 13px; flex: none;
  border-radius: 26px 26px 0 0;
  border: 3px solid var(--accent);
  border-bottom: 0;
}

.nav { display: flex; align-items: center; gap: .35rem; flex-wrap: wrap; }
.nav a {
  display: inline-flex; align-items: center;
  min-height: 44px; padding: 0 .8rem;
  font-size: .96rem; font-weight: 550; letter-spacing: var(--track);
  color: var(--ink-soft); text-decoration: none;
  border-radius: var(--radius);
}
.nav a:hover { background: var(--paper-warm); color: var(--ink); }
.nav a[aria-current="page"] {
  color: var(--ink); font-weight: 650;
  box-shadow: inset 0 -3px 0 var(--accent);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  min-height: 52px; padding: .8rem 1.5rem;
  font-family: var(--sans); font-size: 1rem; font-weight: 650;
  letter-spacing: var(--track);
  border-radius: var(--radius); border: 2px solid var(--accent);
  background: var(--accent); color: var(--on-accent);
  text-decoration: none; cursor: pointer;
  transition: background .15s ease;
}
.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }

.btn-ghost { background: transparent; color: var(--accent); }
.btn-ghost:hover { background: var(--accent-wash); color: var(--accent-deep); }

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; margin-top: 1.75rem; }

/* ---------- Hero ---------- */

.hero { padding: 4.5rem 0 3.5rem; }
.hero h1 { max-width: 26ch; }
.hero .lede { margin-top: 1.5rem; }

.hero-figure {
  font-family: var(--serif);
  font-size: clamp(3rem, 9vw, 5.5rem);
  line-height: 1; font-weight: 600;
  color: var(--num-ink);
  display: block;
}

/* ---------- Cards & grids ---------- */

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }

.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 1.6rem;
}
.card h3 { margin-top: 0; }
.card p:last-child { margin-bottom: 0; }

.card-link { text-decoration: none; display: block; }
.card-link:hover { border-color: var(--accent); background: var(--accent-wash); }

.stat { border-left: 5px solid var(--sun-deep); padding-left: 1.15rem; }
.stat .num {
  font-family: var(--serif); font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 600; line-height: 1.05; display: block;
  color: var(--num-ink);
  /* marker-pen highlight: sits behind the lower third of the numeral */
  background: linear-gradient(transparent 58%, var(--sun-mark) 58%, var(--sun-mark) 92%, transparent 92%);
  padding: 0 .12em; width: fit-content;
}
.stat .cap { font-size: .95rem; color: var(--ink-soft); display: block; margin-top: .4rem; }
.stat .src { display: block; margin-top: .6rem; }

/* ---------- Offer blocks ---------- */

.offer { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; align-items: start; }
@media (max-width: 46rem) { .offer { grid-template-columns: 1fr; } }

.price {
  font-family: var(--serif); font-size: 1.35rem; font-weight: 600;
  color: var(--ink); white-space: nowrap;
}
.price small { display: block; font-weight: 400; }

.tag {
  display: inline-block; font-size: .74rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 100px;
  background: var(--accent-wash); color: var(--accent-deep);
  border: 1px solid var(--accent);
  margin-bottom: .75rem;
}
.tag-hot { background: var(--hot-wash); color: var(--hot); border-color: var(--hot); }

ul.ticks { list-style: none; padding: 0; margin: 1rem 0; max-width: var(--measure); }
ul.ticks li { padding-left: 1.75rem; position: relative; margin-bottom: .6rem; }
ul.ticks li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: .75rem; height: .4rem;
  border-left: 2.5px solid var(--accent); border-bottom: 2.5px solid var(--accent);
  transform: rotate(-45deg);
}

/* ---------- Tables ---------- */

.table-scroll { overflow-x: auto; margin: 1.5rem 0; border: 1px solid var(--rule); border-radius: var(--radius); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .95rem; }
caption { text-align: left; padding: 1rem 1rem .5rem; color: var(--ink-faint); font-size: .85rem; }
th, td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--rule); }
th { font-weight: 650; color: var(--ink); background: var(--paper-warm); font-size: .88rem; letter-spacing: .02em; }
td { color: var(--ink-soft); }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- Placeholders Ali must fill in ---------- */

.ph {
  background: var(--hot-wash);
  color: var(--hot);
  border: 1px dashed var(--hot);
  border-radius: 3px;
  padding: .1em .45em;
  font-family: var(--sans);
  font-size: .92em;
  font-weight: 600;
  font-style: normal;
}
.ph::before { content: "✎ "; }

.ph-note {
  border: 1px dashed var(--hot);
  background: var(--hot-wash);
  border-radius: var(--radius);
  padding: 1.1rem 1.35rem;
  margin: 1.5rem 0;
  max-width: var(--measure);
}
.ph-note p { color: var(--hot); margin: 0; font-size: .95rem; }
.ph-note strong { color: var(--hot); }

/* ---------- Forms ---------- */

.field { margin-bottom: 1.5rem; max-width: 32rem; }
label { display: block; font-weight: 650; color: var(--ink); margin-bottom: .45rem; font-size: 1rem; }
.hint { display: block; font-weight: 400; color: var(--ink-faint); font-size: .88rem; margin-top: .2rem; }

input[type="text"], input[type="email"], select, textarea {
  width: 100%; min-height: 52px; padding: .75rem .9rem;
  font-family: var(--sans); font-size: 1rem; color: var(--ink);
  background: var(--card); border: 2px solid var(--edge); border-radius: var(--radius);
}
textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
input:focus, select:focus, textarea:focus { border-color: var(--accent); }

fieldset { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1.35rem; margin: 0 0 1.5rem; }
legend { font-family: var(--serif); font-size: 1.15rem; font-weight: 600; color: var(--ink); padding: 0 .5rem; }

.radio-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.radio-row label {
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 44px; padding: .5rem 1rem; margin: 0;
  border: 2px solid var(--edge); border-radius: var(--radius);
  font-weight: 500; cursor: pointer; background: var(--card);
}
.radio-row label:hover { border-color: var(--accent); background: var(--accent-wash); }
.radio-row input { width: 20px; height: 20px; accent-color: var(--accent); margin: 0; flex: none; }
.radio-row input:checked + span { font-weight: 700; color: var(--ink); }
.radio-row label:has(input:checked),
label.radio-row:has(input:checked) { border-color: var(--accent); background: var(--accent-wash); }

/* ---------- Scorecard result ---------- */

.result {
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--card);
  padding: 1.85rem;
  margin-top: 2rem;
}
.result .score {
  font-family: var(--serif); font-size: 3.25rem; font-weight: 600;
  line-height: 1; color: var(--accent); display: block;
}
.bar { height: 14px; background: var(--paper-warm); border: 1px solid var(--rule); border-radius: 100px; overflow: hidden; margin: 1.15rem 0; }
.bar > i { display: block; height: 100%; background: var(--accent); }

/* ---------- Footer ---------- */

.site-foot {
  border-top: 1px solid var(--rule);
  background: var(--paper-warm);
  padding: 3rem 0 2.5rem;
  margin-top: 3rem;
}
.site-foot .cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.site-foot h4 { font-family: var(--sans); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .85rem; }
.site-foot ul { list-style: none; padding: 0; margin: 0; }
.site-foot li { margin-bottom: .3rem; }
.site-foot a { display: inline-flex; align-items: center; min-height: 40px; color: var(--ink-soft); text-decoration: none; }
.site-foot a:hover { color: var(--accent); text-decoration: underline; }
.a11y-note { margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.a11y-note p { font-size: .9rem; max-width: 46rem; }

/* ---------- Utilities ---------- */

.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.center { text-align: center; }
.center p, .center .lede { margin-inline: auto; }
[hidden] { display: none !important; }

/* ---------- Article pages ---------- */

.article { padding-top: 3rem; }
.article-head { border-bottom: 1px solid var(--rule); padding-bottom: 2rem; margin-bottom: 2.5rem; }
.article-head h1 { max-width: 20ch; }
.byline { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: baseline; margin-top: 1.25rem; }
.byline .who { font-weight: 650; color: var(--ink); font-size: .95rem; }

.prose { max-width: var(--measure); }
.prose > p:first-of-type { font-size: 1.12rem; }
.prose h2 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); margin-top: 2.75rem; }
.prose ol, .prose ul { max-width: var(--measure); padding-left: 1.4rem; }
.prose li { margin-bottom: .7rem; }
.prose ol li::marker { font-weight: 700; color: var(--accent); }

/* Standfirst — the line under the headline */
.standfirst {
  font-family: var(--serif); font-size: clamp(1.15rem, 2.2vw, 1.4rem);
  line-height: 1.45; color: var(--ink); max-width: var(--measure); margin: 1.25rem 0 0;
}

/* Pull quote. Not a blockquote — this is emphasis, not attribution. */
.pull {
  font-family: var(--serif); font-size: clamp(1.3rem, 3vw, 1.75rem);
  line-height: 1.3; color: var(--ink);
  border-left: 5px solid var(--sun-deep);
  padding: .25rem 0 .25rem 1.5rem;
  margin: 2.5rem 0; max-width: 38rem;
}

.figure-callout {
  background: var(--paper-warm); border: 1px solid var(--rule);
  border-radius: var(--radius); padding: 1.5rem; margin: 2rem 0;
  max-width: var(--measure);
}
.figure-callout p:last-child { margin-bottom: 0; }
.figure-callout .big {
  font-family: var(--serif); font-size: 2.4rem; font-weight: 600;
  line-height: 1; color: var(--num-ink); display: block; margin-bottom: .5rem;
  background: linear-gradient(transparent 58%, var(--sun-mark) 58%, var(--sun-mark) 92%, transparent 92%);
  padding: 0 .12em; width: fit-content;
}

.article-foot { border-top: 1px solid var(--rule); margin-top: 3.5rem; padding-top: 2rem; max-width: var(--measure); }
.article-foot h3 { margin-top: 0; }

.refs { font-size: .9rem; }
.refs li { margin-bottom: .45rem; color: var(--ink-faint); }

/* ---------- Icons ----------
   <svg class="icon" aria-hidden="true"><use href="assets/icons.svg#audit"></use></svg>
   Stroke icons inherit colour from text. Never used as the sole content of a
   control without a visually hidden label. No emoji anywhere on this site:
   emoji render differently on every platform and read as informal. */

.icon {
  width: 1.5rem; height: 1.5rem;
  flex: none; display: inline-block;
  stroke: currentColor; fill: none;
  vertical-align: -0.28em;
}
.icon-lg { width: 2.25rem; height: 2.25rem; }
.icon-sm { width: 1.15rem; height: 1.15rem; }

/* Icon sitting above a card heading */
.card-icon { color: var(--accent); margin-bottom: .9rem; display: block; }

/* Replaces the CSS-drawn tick in ul.ticks where an icon reads better */
ul.icon-list { list-style: none; padding: 0; margin: 1rem 0; max-width: var(--measure); }
ul.icon-list li { display: flex; gap: .75rem; align-items: flex-start; margin-bottom: .8rem; }
ul.icon-list .icon { color: var(--accent); margin-top: .18em; }

/* ---------- Media placeholders ----------
   Every slot below is a brief, not a design. Replace the whole .slot element
   with the real <img>/<figure>/<video>. Find them all with:
     grep -rn 'class="slot' --include='*.html' .
*/

.slot {
  border: 2px dashed var(--rule);
  border-radius: var(--radius);
  background: var(--paper-warm);
  padding: 1.5rem;
  display: flex; flex-direction: column; gap: .6rem;
  align-items: flex-start; justify-content: center;
  margin: 2rem 0;
  min-height: 12rem;
}
.slot .slot-kind {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .74rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--accent-deep); background: var(--accent-wash);
  border: 1px solid var(--accent); border-radius: 100px; padding: .3rem .7rem;
}
.slot h4 { font-family: var(--serif); font-size: 1.1rem; margin: .2rem 0 0; }
.slot p { font-size: .93rem; margin: 0; max-width: 46ch; }
.slot p + p { margin-top: .5rem; }
.slot .spec { color: var(--ink-faint); font-size: .85rem; }

/* Aspect variants so the placeholder occupies the real footprint */
.slot-portrait  { min-height: 26rem; max-width: 22rem; }
.slot-wide      { min-height: 15rem; }
.slot-video     { min-height: 20rem; }
.slot-inline    { min-height: 9rem; }

/* Two-column hero: copy beside a portrait */
.hero-split { display: grid; grid-template-columns: 1.35fr 1fr; gap: 3rem; align-items: center; }
@media (max-width: 60rem) { .hero-split { grid-template-columns: 1fr; gap: 1.5rem; } }

/* ---------- Readable column with full-width breakouts ----------
   For research pages that mix long prose with wide tables and stat grids.
   Prose sits in a centred reading column; anything marked .bleed spans the
   full container. Without this, narrow paragraphs sit left-aligned in a 72rem
   box and half the width reads as broken rather than deliberate. */

.wrap.readable {
  display: grid;
  grid-template-columns: 1fr min(var(--readable), 100%) 1fr;
}
.wrap.readable > * { grid-column: 2; min-width: 0; }
.wrap.readable > .bleed { grid-column: 1 / -1; }
/* the grid column already sets the measure */
.wrap.readable > p, .wrap.readable > ul, .wrap.readable > ol { max-width: none; }
.wrap.readable > .figure-callout, .wrap.readable > .ph-note { max-width: none; }

/* ---------- Yellow accents ----------
   Yellow only ever appears as a surface with ink on top, never as text on a
   light ground. See the token block for the measured reason. */

/* Marker-pen highlight for a key phrase in running copy. */
.hl {
  background: linear-gradient(transparent 12%, var(--sun) 12%, var(--sun) 88%, transparent 88%);
  padding: 0 .18em;
  color: var(--ink);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hl { color: #16181d; background: linear-gradient(transparent 12%, var(--sun) 12%, var(--sun) 88%, transparent 88%); }
}

/* A full-width warm band. Ink on marigold wash measures ~16:1. */
.band-sun { background: var(--sun-wash); border-block: 1px solid var(--sun-line); }

/* Warm button: ink label on marigold, 10.58:1. Border matches the fill, so the
   button reads as one solid marigold block. Against the pale yellow band that
   edge is soft (1.55:1); the ink label and the padding carry the affordance.
   --sun-edge is kept for the focus ring, which does need to be visible. */
.btn-sun { background: var(--sun); border-color: var(--sun); color: #16181d; }
.btn-sun:hover { background: var(--sun-deep); border-color: var(--sun-deep); color: #16181d; }
.btn-sun:focus-visible { outline-color: var(--sun-edge); }

/* Scorecard progress fill reads warmer than a flat teal bar. */
.bar > i { background: linear-gradient(90deg, var(--sun-deep), var(--accent)); }

/* ---------- Charts ----------
   Inline SVG so it stays sharp, follows the theme, and can be read aloud.
   Every chart carries role="img" and a <title>/<desc>, and every value is
   labelled on its own bar, so no legend is needed and no meaning rests on
   colour alone. */

.chart { display: block; width: 100%; height: auto; margin: 2rem 0; overflow: visible; }
.chart text { font-family: var(--sans); letter-spacing: var(--track); }
.chart .c-lbl  { font-size: 15px; fill: var(--ink-soft); }
.chart .c-val  { font-size: 19px; font-weight: 700; fill: var(--ink); }
.chart .c-note { font-size: 13px; fill: var(--ink-faint); }
.chart .c-track { fill: var(--paper-warm); }
.chart .c-bar   { fill: var(--accent); }
.chart .c-bar-2 { fill: var(--sun-deep); }
.chart .c-bar-mute { fill: var(--edge); }
.chart .c-ref { stroke: var(--ink-faint); stroke-width: 2; stroke-dasharray: 5 4; }
.chart figcaption { font-size: .88rem; color: var(--ink-faint); }

figure.chart-fig { margin: 2rem 0; }
figure.chart-fig .chart { margin: 0 0 .7rem; }
figure.chart-fig figcaption { font-size: .88rem; color: var(--ink-faint); max-width: var(--measure); }

/* Primary buttons inside a soft yellow band take the marigold fill, so a warm
   section never has a cold call to action sitting in it. Ghost buttons keep
   the teal outline: a marigold outline would sit 1.55:1 against the band and
   effectively disappear, and the teal also preserves primary/secondary rank. */
.band-sun .btn:not(.btn-ghost) {
  background: var(--sun); border-color: var(--sun); color: #16181d;
}
.band-sun .btn:not(.btn-ghost):hover {
  background: var(--sun-deep); border-color: var(--sun-deep); color: #16181d;
}
.band-sun .btn:not(.btn-ghost):focus-visible { outline-color: var(--sun-edge); }

/* ---------- Newsletter signup ----------
   Warm block so it reads as an offer rather than a form. Ink on --sun-wash
   measures ~16:1. The input and button share a row and wrap on narrow
   screens rather than shrinking below a usable width. */

.signup {
  border: 2px solid var(--sun-deep);
  border-radius: var(--radius);
  background: var(--sun-wash);
  padding: 1.6rem 1.75rem;
  margin: 2.75rem 0;
  max-width: var(--measure);
}
.signup h3 { margin: 0 0 .5rem; }
.signup > p { margin-bottom: 0; }
.signup-form { display: flex; gap: .7rem; flex-wrap: wrap; margin: 1.15rem 0 .75rem; }
.signup-form input[type="email"] { flex: 1 1 15rem; min-width: 0; margin: 0; }
.signup-form .btn { flex: 0 0 auto; }
.signup .meta { display: block; }

/* A heading that opens its container should not add margin on top of the
   section's own padding. h2 carries margin-top: 3rem to separate it from the
   text above it, which is right mid-section and wrong as the first element:
   there it stacked with padding-top for a 104px gap. */
.wrap > h2:first-child,
.wrap > h3:first-child,
.wrap > h4:first-child,
.sec-intro > h2:first-child,
.card > h2:first-child { margin-top: 0; }

/* A plain section straight after the hero continues the same background, so it
   does not need a full section's padding on top: the hero's own 3.5rem bottom
   padding already separates them. Without this the two paddings stack and the
   first heading sits ~178px below the lede. Banded sections are excluded, since
   a change of background colour does want the breathing room. */
.hero + section:not([class*="band"]):not(.tight) { padding-top: 0.5rem; }

/* Pages built from cards and forms rather than running prose can take a wider
   container than the reading measure allows: the constraint there is comfort
   of the eye tracking a line of text, which cards and fields do not have. */
.narrow-wide { max-width: 66rem; }
.narrow-wide p, .narrow-wide li { max-width: var(--measure); }

/* ---------- Unanswered scorecard questions ----------
   The error message used to promise marking that did not exist. Marked state
   carries a border change and an explicit line of text, never colour alone. */
fieldset.unanswered {
  border-color: var(--hot);
  border-width: 2px;
  background: var(--hot-wash);
}
fieldset.unanswered legend { color: var(--hot); }
.missing {
  margin: .75rem 0 0;
  font-weight: 650;
  color: var(--hot);
  font-size: .95rem;
}

/* A horizontally scrollable region is keyboard-reachable only if it can take
   focus; without this the right-hand columns of the evidence tables cannot be
   reached without a mouse (WCAG 2.1.1). */
.table-scroll:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Browser surfaces inherit the palette rather than shipping defaults. */
::selection { background: var(--sun); color: #16181d; }
:root { accent-color: var(--accent); color-scheme: light dark; }
table { font-variant-numeric: tabular-nums; }

/* Charts use a fixed 640-unit viewBox at width:100%, so their type scales with
   the container: at 375px the chart renders at 327px and a 15-unit label lands
   at 7.7px, far under the 17px floor this site holds itself to. Below 40rem the
   units are scaled up to compensate, which keeps effective size legible without
   changing the geometry. */
@media (max-width: 40rem) {
  .chart .c-lbl  { font-size: 26px; }
  .chart .c-val  { font-size: 32px; }
  .chart .c-note { font-size: 24px; }
}