/* ==========================================================================
   PROTOCOL INDEX — magazine design system
   Styled after the Business Magazine editorial layout: light ground, white
   cards, a red accent used as rules and category labels, a display serif for
   headlines and a tall condensed face for section heads.

   Fonts are self-hosted (latin subsets) — the look depends on them, but no
   request ever leaves this origin.
   ========================================================================== */

/* ---------------------------------------------------------- 0. fonts ---- */
@font-face{
  font-family:'Rakkas';
  src:url('fonts/rakkas-400.woff2') format('woff2');
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Big Shoulders Display';
  src:url('fonts/big-shoulders-var.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Cairo';
  src:url('fonts/cairo-var.woff2') format('woff2');
  font-weight:200 1000; font-style:normal; font-display:swap;
}

/* --------------------------------------------------------- 1. tokens ---- */
:root{
  /* colour — light magazine ground, one red accent                          */
  --paper:     #F6F7F8;  /* page ground                                      */
  --card:      #FFFFFF;  /* card / panel                                     */
  --ink:       #0B0B0B;  /* headlines — 18.4:1 on paper                      */
  --text:      #404040;  /* body      —  9.7:1 on paper                      */
  --muted:     #6A6A6A;  /* dates, meta —  5.0:1 on paper                    */
  --rule:      #E2E4E7;  /* hairline                                         */
  --rule-hvy:  #111111;  /* the heavy black section rule                     */

  /* the accent is used two ways, and they are NOT interchangeable:
     --accent    fills and rules only (3.9:1 — graphic contrast)
     --accent-tx any red TEXT        (5.4:1 — passes at small sizes)         */
  --accent:    #E54A42;
  --accent-tx: #C0392E;

  /* evidence grades — all >= 4.8:1, so the letter itself can carry colour   */
  --g-a: #1E7A46;
  --g-b: #2F6FB5;
  --g-c: #8A5A00;
  --g-d: #B3261E;

  /* type — display serif, condensed display, body sans                      */
  --ff-display: 'Rakkas', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --ff-cond:    'Big Shoulders Display', 'Haettenschweiler', 'Arial Narrow', sans-serif;
  --ff-body:    'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* scale */
  --fs-50:  0.75rem;    /* 12 — dates, category labels */
  --fs-100: 0.8125rem;  /* 13 */
  --fs-200: 0.9375rem;  /* 15 — body                   */
  --fs-300: 1.0625rem;  /* 17 — lede                   */
  --fs-400: 1.375rem;   /* 22 — card headline          */
  --fs-500: 1.875rem;   /* 30 — feature headline       */
  --fs-600: clamp(1.75rem, 1.1rem + 2.7vw, 2.75rem);  /* 44 — lead story    */
  --fs-700: clamp(2.25rem, 1.1rem + 4.6vw, 3.75rem);  /* 60 — section head  */

  /* space — 4px grid */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;

  --wrap: 1280px;
  --wrap-tight: 760px;
  --radius: 2px;
  --ease: cubic-bezier(.22,.61,.36,1);
  --t-fast: 150ms var(--ease);
  --t: 220ms var(--ease);
}

/* --------------------------------------------------------- 2. reset ----- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:var(--ff-body);
  font-size:var(--fs-200);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; }
img{ height:auto; display:block; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}

/* ------------------------------------------------- 3. shared primitives - */
.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:var(--s-5); }
.wrap--tight{ max-width:var(--wrap-tight); }

.vh{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{
  position:fixed; left:var(--s-4); top:-100px; z-index:100;
  background:var(--ink); color:#fff; font-weight:700;
  padding:var(--s-3) var(--s-4); border-radius:var(--radius);
  transition:top var(--t-fast);
}
.skip:focus{ top:var(--s-4); }

:where(a,button,input,select,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent-tx); outline-offset:3px; border-radius:var(--radius);
}

/* the red category label — the template's signature micro-type */
.kicker{
  display:inline-block;
  font-family:var(--ff-body);
  font-size:var(--fs-50);
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-tx);
  text-decoration:none;
}
.dateline{ font-size:var(--fs-50); color:var(--muted); letter-spacing:.02em; }

/* headlines are always the display serif */
.hl{ font-family:var(--ff-display); font-weight:400; color:var(--ink); line-height:1.2; }
.hl a{ text-decoration:none; transition:color var(--t-fast); }
.hl a:hover{ color:var(--accent-tx); }

/* section head: heavy black rule, then the tall condensed face */
.sechead{ margin-bottom:var(--s-6); border-top:3px solid var(--rule-hvy); padding-top:var(--s-4); }
.sechead h1,.sechead h2,.sechead h3{
  font-family:var(--ff-cond);
  font-weight:600;
  line-height:.94;
  letter-spacing:.005em;
  color:var(--ink);
}
.sechead h1,.sechead h2{ font-size:var(--fs-700); }
/* column-level heads sit inside a narrower measure, so they step down */
.sechead h3{ font-size:1.75rem; }
.sechead p{ margin-top:var(--s-2); color:var(--muted); font-size:var(--fs-200); max-width:62ch; }
.sechead--accent{ border-top-color:var(--accent); }

.section{ padding-block:var(--s-8); }
.section--tight{ padding-block:var(--s-7); }
.section--card{ background:var(--card); }
.rule{ border:0; border-top:1px solid var(--rule); margin:0; }

/* --------------------------------------------------------- 4. buttons --- */
.btn{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-family:var(--ff-body); font-weight:700; font-size:var(--fs-50);
  letter-spacing:.14em; text-transform:uppercase;
  padding:var(--s-3) var(--s-5);
  border:1px solid transparent; border-radius:var(--radius);
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.btn--primary{ background:var(--accent-tx); color:#fff; }
.btn--primary:hover{ background:#A32F26; }
.btn--ghost{ border-color:var(--ink); color:var(--ink); background:transparent; }
.btn--ghost:hover{ background:var(--ink); color:#fff; }
.btn--lg{ padding:var(--s-4) var(--s-6); font-size:var(--fs-100); }

/* ------------------------------------------------------- 5. masthead ---- */
.topbar{ background:var(--card); border-bottom:1px solid var(--rule); font-size:var(--fs-50); }
.topbar__inner{ display:flex; align-items:center; justify-content:space-between; gap:var(--s-4); min-height:40px; }
.topbar__tag{ color:var(--muted); letter-spacing:.1em; text-transform:uppercase; font-weight:600; }
.topbar__links{ display:flex; align-items:center; gap:var(--s-5); }
.topbar__links a{
  text-decoration:none; letter-spacing:.14em; text-transform:uppercase; font-weight:700;
  color:var(--accent-tx); transition:color var(--t-fast);
}
.topbar__links a:hover{ color:var(--ink); }
.topbar__links a.is-plain{ color:var(--muted); }
.topbar__links a.is-plain:hover{ color:var(--ink); }
@media (max-width: 640px){ .topbar__tag{ display:none; } }

.masthead{ background:var(--card); text-align:center; padding-block:var(--s-6) var(--s-5); }
.wordmark{
  display:inline-block; text-decoration:none;
  font-family:var(--ff-display); font-size:2.5rem; line-height:1; color:var(--ink);
}
.wordmark span{ color:var(--accent-tx); }
.masthead p{ margin-top:var(--s-3); font-size:var(--fs-50); letter-spacing:.2em; text-transform:uppercase; color:var(--muted); }

.navbar{ background:var(--card); border-top:1px solid var(--rule); border-bottom:3px solid var(--ink); position:sticky; top:0; z-index:50; }
.navbar__inner{ display:flex; align-items:center; justify-content:center; gap:var(--s-6); min-height:56px; }
.navbar__links{ display:flex; align-items:center; justify-content:center; gap:var(--s-6); flex-wrap:wrap; }
.navbar a{
  font-family:var(--ff-display); font-size:1.25rem; text-decoration:none; color:var(--ink);
  padding-block:var(--s-2); border-bottom:2px solid transparent;
  transition:color var(--t-fast), border-color var(--t-fast);
}
.navbar a:hover{ color:var(--accent-tx); }
.navbar a[aria-current="page"]{ color:var(--accent-tx); border-bottom-color:var(--accent); }

/* mobile-only bar label, so the nav row isn't just a lone burger */
.navbar__label{ display:none; font-family:var(--ff-cond); font-weight:600; font-size:1.25rem;
  color:var(--ink); letter-spacing:.03em; text-transform:uppercase; }
@media (max-width: 900px){ .navbar__label{ display:block; } }

.burger{
  display:none; width:40px; height:40px; margin-left:auto; flex:none;
  background:transparent; border:1px solid var(--rule); border-radius:var(--radius);
  cursor:pointer; padding:10px 9px;
}
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; }
.burger span+span{ margin-top:4px; }
.mobilenav{ display:none; background:var(--card); border-top:1px solid var(--rule); }
.mobilenav[data-open]{ display:block; }
.mobilenav a{
  display:block; padding:var(--s-4) 0; text-decoration:none;
  font-family:var(--ff-display); font-size:1.25rem; color:var(--ink);
  border-bottom:1px solid var(--rule);
}
.mobilenav a:last-child{ border-bottom:0; }

@media (max-width: 900px){
  .navbar__inner{ justify-content:flex-start; }
  .navbar__links{ display:none; }
  .burger{ display:block; }
}

/* ------------------------------------------------------ 6. cover art ---- */
/* Every "photo" slot is generated SVG: editorial texture at zero requests
   and zero licensing. Ground colour is set per card via --cv.              */
.cover{
  position:relative; display:block; overflow:hidden;
  background:#DDE0E4;              /* holds the frame while the photo decodes */
  aspect-ratio:16/10;
}
.cover--wide{ aspect-ratio:21/9; }
.cover img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block;
}
.cover__grade{
  position:absolute; right:var(--s-3); bottom:var(--s-3);
  font-family:var(--ff-cond); font-weight:700; font-size:2.5rem; line-height:1;
  color:#fff; opacity:.92;
}
/* cards only need enough scrim to float the grade letter; the lead story has
   a full headline sitting on the photo and needs considerably more */
.cover__scrim{
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(0,0,0,.55) 0%, rgba(0,0,0,.18) 38%, rgba(0,0,0,0) 62%);
}
.lead .cover__scrim{
  background:linear-gradient(to top, rgba(0,0,0,.82) 0%, rgba(0,0,0,.45) 46%, rgba(0,0,0,.05) 80%);
}

/* standalone photo on an entry page */
.hero-shot{ margin:0; }
.hero-shot img{ width:100%; height:auto; display:block; background:#DDE0E4; }
.hero-shot figcaption{
  margin-top:var(--s-2); font-size:var(--fs-50); color:var(--muted);
  letter-spacing:.1em; text-transform:uppercase;
}

/* --------------------------------------------------- 7. lead story ------ */
.lead{ position:relative; display:block; text-decoration:none; }
.lead .cover{ aspect-ratio:21/9; }
.lead__body{ position:absolute; left:0; right:0; bottom:0; padding:var(--s-6); }
.lead__body .kicker{ color:#fff; background:var(--accent); padding:var(--s-1) var(--s-2); }
.lead h2{
  font-family:var(--ff-display); font-weight:400; color:#fff;
  font-size:var(--fs-600); line-height:1.14; margin-top:var(--s-4); max-width:20ch;
}
.lead__meta{ margin-top:var(--s-4); display:flex; gap:var(--s-4); flex-wrap:wrap; color:rgba(255,255,255,.88); font-size:var(--fs-50); }
@media (max-width: 700px){
  .lead .cover{ aspect-ratio:4/3; }
  .lead__body{ padding:var(--s-4); }
}

/* -------------------------------------------------------- 8. cards ------ */
.grid{ display:grid; gap:var(--s-6); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }
@media (max-width: 1000px){ .grid--4,.grid--3{ grid-template-columns:repeat(2,1fr); } }
@media (max-width: 620px){ .grid--4,.grid--3,.grid--2{ grid-template-columns:1fr; } }

.card{ display:flex; flex-direction:column; }
.card[hidden]{ display:none; }
.card .cover{ margin-bottom:var(--s-4); }
.card .kicker{ margin-bottom:var(--s-2); }
.card h3{ font-family:var(--ff-display); font-weight:400; font-size:var(--fs-400); line-height:1.2; color:var(--ink); }
.card h3 a{ text-decoration:none; transition:color var(--t-fast); }
.card h3 a:hover{ color:var(--accent-tx); }
.card__meta{ margin-top:var(--s-3); display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); }
.card__meta span{ font-size:var(--fs-50); color:var(--muted); }
.card .cover img{ transition:transform var(--t); }
.card:hover .cover img{ transform:scale(1.04); }

/* --------------------------------------------- 9. magazine 3-column ----- */
.mag{ display:grid; grid-template-columns:300px minmax(0,1fr) 300px; gap:var(--s-7); align-items:start; }
@media (max-width: 1100px){ .mag{ grid-template-columns:minmax(0,1fr) 300px; } .mag__left{ grid-column:1 / -1; } }
@media (max-width: 820px){ .mag{ grid-template-columns:1fr; } .mag__left{ grid-column:auto; } }

.stack{ list-style:none; }
.stack li{ padding-block:var(--s-4); border-bottom:1px solid var(--rule); }
.stack li:first-child{ padding-top:0; }
.stack li[hidden]{ display:none; }
.stack__link{ display:grid; grid-template-columns:76px minmax(0,1fr); gap:var(--s-4); text-decoration:none; align-items:start; }
.stack__link .cover{ aspect-ratio:1/1; }
.stack h3{ font-family:var(--ff-display); font-weight:400; font-size:var(--fs-300); line-height:1.25; color:var(--ink); transition:color var(--t-fast); }
.stack__link:hover h3{ color:var(--accent-tx); }
.stack .dateline{ display:block; margin-top:var(--s-2); }

.widget + .widget{ margin-top:var(--s-7); }
.widget__head{ border-top:3px solid var(--rule-hvy); padding-top:var(--s-3); margin-bottom:var(--s-4); }
.widget__head h2,.widget__head h3{
  font-family:var(--ff-cond); font-weight:600; font-size:1.75rem; line-height:1; color:var(--ink);
}
.widget--box{ background:var(--card); border:1px solid var(--rule); padding:var(--s-5); }
.widget--box .widget__head{ border-top:0; padding-top:0; }
.ranklist{ list-style:none; counter-reset:rank; }
.ranklist li{ display:grid; grid-template-columns:34px minmax(0,1fr); gap:var(--s-3); padding-block:var(--s-3); border-bottom:1px solid var(--rule); align-items:baseline; }
.ranklist li:last-child{ border-bottom:0; }
.ranklist li::before{
  counter-increment:rank; content:counter(rank,decimal-leading-zero);
  font-family:var(--ff-cond); font-weight:700; font-size:1.5rem; color:var(--accent); line-height:1;
}
.ranklist a{ font-family:var(--ff-display); font-size:var(--fs-300); line-height:1.25; color:var(--ink); text-decoration:none; }
.ranklist a:hover{ color:var(--accent-tx); }

/* ------------------------------------------------------ 10. controls ---- */
.toolbar{ background:var(--card); border:1px solid var(--rule); padding:var(--s-5); margin-bottom:var(--s-6); }
.search{
  display:flex; align-items:center; gap:var(--s-3);
  background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
  padding:var(--s-2) var(--s-3); transition:border-color var(--t-fast);
}
.search:focus-within{ border-color:var(--accent); }
.search svg{ color:var(--muted); flex:none; }
.search input{ flex:1; min-width:0; background:transparent; border:0; outline:0; padding-block:var(--s-2); font-size:var(--fs-200); }
.search input::placeholder{ color:var(--muted); }
.search__hint{ font-size:var(--fs-50); color:var(--muted); border:1px solid var(--rule); border-radius:var(--radius); padding:2px var(--s-2); flex:none; }
@media (max-width: 560px){ .search__hint{ display:none; } }

.filters{ display:flex; flex-wrap:wrap; gap:var(--s-5); margin-top:var(--s-4); align-items:flex-start; }
.filters__group{ display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap; }
.filters__label{ font-size:var(--fs-50); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); }
.chips{ display:flex; flex-wrap:wrap; gap:var(--s-2); }
.chip{
  font-size:var(--fs-100); font-weight:600;
  background:transparent; border:1px solid var(--rule); color:var(--text);
  border-radius:100px; padding:var(--s-2) var(--s-3); cursor:pointer;
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast);
}
.chip:hover{ border-color:var(--ink); color:var(--ink); }
.chip[aria-pressed="true"]{ background:var(--accent-tx); border-color:var(--accent-tx); color:#fff; }

.resultbar{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-5); }
.resultbar__count{ font-family:var(--ff-cond); font-weight:600; font-size:1.75rem; color:var(--ink); line-height:1; }
.sortbar{ display:flex; align-items:center; gap:var(--s-3); }
.sortbar select{ background:var(--card); border:1px solid var(--rule); border-radius:var(--radius); padding:var(--s-2) var(--s-3); font-size:var(--fs-200); cursor:pointer; }

.empty{ padding:var(--s-8) 0; text-align:center; color:var(--muted); }
.empty[hidden]{ display:none; }

.grade{
  display:inline-flex; align-items:center; gap:var(--s-2);
  font-size:var(--fs-50); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--gc,var(--muted));
}
.grade::before{ content:""; width:9px; height:9px; border-radius:50%; background:currentColor; }
.grade[data-grade="A"]{ --gc:var(--g-a); }
.grade[data-grade="B"]{ --gc:var(--g-b); }
.grade[data-grade="C"]{ --gc:var(--g-c); }
.grade[data-grade="D"]{ --gc:var(--g-d); }
.grade--ondark{ color:#fff; }

/* Data-quality marker. Deliberately NOT the .grade chip: grades on this site
   mean "evidence that it works", and this means "evidence about stability". */
.dq{
  display:inline-block; font-size:var(--fs-50); font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; white-space:nowrap;
  padding:2px var(--s-2); border-radius:2px; border:1px solid;
}
.dq[data-q="High"]{     color:#1E7A46; border-color:#1E7A46; background:rgba(30,122,70,.07); }
.dq[data-q="Moderate"]{ color:#8A5A00; border-color:#8A5A00; background:rgba(138,90,0,.07); }
.dq[data-q="Low"]{      color:#B3261E; border-color:#B3261E; background:rgba(179,38,30,.07); }

/* --------------------------------------------------------- 11. doc ----- */
/* the article column is sized to the reading measure itself, so the TOC sits
   at the outer edge instead of leaving a dead gutter mid-page */
.doc{ display:grid; grid-template-columns:minmax(0,68ch) 280px; justify-content:space-between;
      gap:var(--s-7); align-items:start; }

/* For pages carrying wide tables: the column takes the full width so tables can
   breathe, while running text is still capped at a readable measure. */
.doc--wide{ grid-template-columns:minmax(0,1fr) 280px; justify-content:stretch; }
/* grid items default to min-width:auto, which stops a wide table from ever
   shrinking and pushes the whole page sideways on a phone. Let them shrink so
   .table-scroll can do its job. */
.doc > *{ min-width:0; }
.doc--wide .prose > p,
.doc--wide .prose > ul,
.doc--wide .prose > ol{ max-width:68ch; }
@media (max-width: 900px){ .doc{ grid-template-columns:1fr; justify-content:stretch; } }
.toc{ position:sticky; top:calc(56px + var(--s-5)); border-top:3px solid var(--rule-hvy); padding-top:var(--s-3); }
.toc ol{ list-style:none; margin-top:var(--s-3); }
.toc a{ display:block; padding:var(--s-2) 0; text-decoration:none; font-size:var(--fs-200); color:var(--text); border-bottom:1px solid var(--rule); transition:color var(--t-fast); }
.toc a:hover{ color:var(--accent-tx); }
@media (max-width: 900px){ .toc{ position:static; } }

/* long-form runs one step larger than UI text */
.prose{ font-size:var(--fs-300); line-height:1.7; }
.prose > * + *{ margin-top:var(--s-5); }
.prose h2{
  font-family:var(--ff-cond); font-weight:600; font-size:2.25rem; line-height:1;
  color:var(--ink); margin-top:var(--s-8); padding-top:var(--s-4);
  border-top:3px solid var(--rule-hvy); scroll-margin-top:90px;
}
.prose h3{ font-family:var(--ff-display); font-weight:400; font-size:var(--fs-400); color:var(--ink); margin-top:var(--s-6); }
.prose p{ max-width:none; }
.prose ul{ padding-left:var(--s-5); max-width:none; }
.prose li{ margin-top:var(--s-3); }
.prose li::marker{ color:var(--accent); }
.prose a{ color:var(--accent-tx); text-underline-offset:3px; }
/* .prose a outranks .btn--* on specificity, which would paint button labels the
   link colour — dark red on a dark red fill. Restate the button colours here. */
.prose a.btn{ text-decoration:none; }
.prose a.btn--primary{ color:#fff; }
.prose a.btn--primary:hover{ color:#fff; }
.prose a.btn--ghost{ color:var(--ink); }
.prose a.btn--ghost:hover{ color:#fff; }
.prose strong{ color:var(--ink); }
.prose .lede{ font-family:var(--ff-display); font-size:var(--fs-500); line-height:1.3; color:var(--ink); max-width:34ch; }

.spec{ width:100%; border-collapse:collapse; font-size:var(--fs-200); background:var(--card); }
.spec th,.spec td{ text-align:left; padding:var(--s-3) var(--s-4); border-bottom:1px solid var(--rule); vertical-align:top; }
.spec th{ font-size:var(--fs-50); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; width:34%; }
.table-scroll{ overflow-x:auto; }

/* multi-column comparison tables: column headers rather than a 34% row-header,
   and a min-width so they scroll instead of crushing inside the text measure */
.spec--wide{ min-width:560px; }
.spec--wide th{ width:auto; }
.spec--wide thead th{ border-bottom:2px solid var(--rule-hvy); color:var(--ink); }
.spec--wide td{ font-size:var(--fs-200); }
.spec--wide td:last-child{ width:1%; white-space:nowrap; }
/* two-column comparison tables have prose in the last cell, not a chip */
.spec--pair td:last-child{ width:auto; white-space:normal; }
.spec--wide tbody td[rowspan]{ border-right:1px solid var(--rule); }

.phase{ background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--accent); padding:var(--s-5); }
.phase + .phase{ margin-top:var(--s-4); }
.phase__head{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4); margin-bottom:var(--s-3); flex-wrap:wrap; }
.phase h3{ margin-top:0; }
.phase__wk{ font-size:var(--fs-50); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); font-weight:700; }

.callout{ background:var(--card); border:1px solid var(--rule); border-left:3px solid var(--ink); padding:var(--s-5); }
.callout--warn{ border-left-color:var(--g-d); }
.callout .kicker{ display:block; margin-bottom:var(--s-2); }

.faq{ border-top:3px solid var(--rule-hvy); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  cursor:pointer; list-style:none; padding:var(--s-5) 0;
  font-family:var(--ff-display); font-size:var(--fs-400); color:var(--ink);
  display:flex; justify-content:space-between; gap:var(--s-4);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent-tx); flex:none; font-family:var(--ff-body); font-weight:700; }
.faq details[open] summary::after{ content:"\2013"; }
.faq p{ padding-bottom:var(--s-5); max-width:70ch; }

/* ------------------------------------------------- 12. cookie consent --- */
/* Accept and Decline are deliberately the same size and weight: a decline that
   is harder to find than the accept is not a real choice. */
.consent{
  position:fixed; left:0; right:0; bottom:0; z-index:60;
  background:var(--card);
  border-top:3px solid var(--rule-hvy);
  box-shadow:0 -6px 24px rgba(11,11,11,.12);
}
.consent[hidden]{ display:none; }
.consent__inner{
  display:flex; align-items:center; gap:var(--s-6);
  padding-block:var(--s-4); flex-wrap:wrap;
}
.consent__text{
  flex:1 1 34ch; min-width:0;
  font-size:var(--fs-200); color:var(--text); margin:0;
}
.consent__text a{ color:var(--accent-tx); }
.consent__actions{ display:flex; gap:var(--s-3); flex:0 0 auto; }
.consent__actions .btn{ min-width:120px; justify-content:center; }
@media (max-width: 620px){
  .consent__inner{ gap:var(--s-4); }
  .consent__actions{ width:100%; }
  .consent__actions .btn{ flex:1; min-width:0; }
}

/* footer control that has to be a button for behaviour but reads as a link */
.linkbtn{
  background:none; border:0; padding:0; cursor:pointer;
  font-size:var(--fs-200); color:var(--text); font-family:inherit;
  text-align:left;
}
.linkbtn:hover{ color:var(--accent-tx); }

/* -------------------------------------------------------- 13. footer ---- */
.foot{ background:var(--card); padding-block:var(--s-8) var(--s-5); border-top:1px solid var(--rule); }
.foot__grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--s-6); }
@media (max-width: 760px){ .foot__grid{ grid-template-columns:1fr 1fr; } }
.foot h3{ font-family:var(--ff-cond); font-weight:600; font-size:1.5rem; color:var(--ink); margin-bottom:var(--s-3); }
.foot ul{ list-style:none; }
.foot li+li{ margin-top:var(--s-2); }
.foot a{ text-decoration:none; font-size:var(--fs-200); color:var(--text); transition:color var(--t-fast); }
.foot a:hover{ color:var(--accent-tx); }
.foot__note{ margin-top:var(--s-7); padding-top:var(--s-5); border-top:1px solid var(--rule); font-size:var(--fs-100); color:var(--muted); max-width:86ch; }
.foot__bottom{ display:flex; justify-content:space-between; gap:var(--s-4); flex-wrap:wrap; margin-top:var(--s-5); padding-top:var(--s-4); border-top:1px solid var(--rule); font-size:var(--fs-100); color:var(--muted); }