/* ═══════════════════════════════════════════════════════════════════════════
   THE SNUG REPORT — TOKEN LAYER

   This file is the site's entire visual identity. A sibling satellite replaces
   it wholesale and gets a different-looking publication out of the same
   components. Rules:

     1. This file contains NO class selectors. Only :root custom properties and
        @font-face-ish declarations. base.css consumes these and nothing else.
        (styles/sheet.mjs rewrites class selectors to add the per-site prefix —
        it does not touch this file, which is why the rule matters.)
     2. No component may state a literal colour, font, radius or space. If one
        does, a sibling site cannot be restyled by swapping this file, and §9.2's
        "same typography / same margins" signal fires across the network.
     3. Every token is named for its ROLE, not its value. `--ink-quiet`, not
        `--grey-600`. A sibling whose quiet ink is warmer still works.

   Identity brief for The Snug Report: a consumer-testing publication, not a
   store and not a blog. Warm newsprint ground, claret masthead, amber reserved
   exclusively for evidence figures so a number always reads as a number.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour: ground ───────────────────────────────────────────────────── */
  --paper:            #F6F1E8;   /* warm newsprint, not white */
  --paper-raised:     #FFFDF8;   /* cards, tables, the evidence rail */
  --paper-sunk:       #EDE5D7;   /* inset blocks, disabled rows */
  --paper-invert:     #1B1512;   /* masthead + footer slab */

  /* ── Colour: ink ──────────────────────────────────────────────────────── */
  --ink:              #1B1512;
  --ink-quiet:        #5C5148;   /* captions, provenance, secondary rows */
  --ink-faint:        #8C8075;   /* "not stated", placeholder prose */
  --ink-invert:       #F6F1E8;

  /* ── Colour: brand ────────────────────────────────────────────────────── */
  --brand:            #7A2E3C;   /* claret — masthead, links, section rules */
  --brand-deep:       #4E1C26;
  --brand-wash:       #F0E2E2;   /* tinted blocks that must not shout */

  /* ── Colour: evidence ─────────────────────────────────────────────────────
     Amber is load-bearing, not decorative. It marks a figure that came out of
     the dataset. Never use it for a call to action or for chrome, or the reader
     stops being able to tell an evidence number from a button. */
  --evidence:         #B06A22;
  --evidence-wash:    #F7ECDC;

  /* ── Colour: semantic states ──────────────────────────────────────────── */
  --safe:             #2F6B4F;   /* non-porous, sterilisable */
  --safe-wash:        #E4EFE8;
  --caution:          #A33B2A;   /* porous, cannot be sterilised */
  --caution-wash:     #F7E4E0;
  --unknown:          #6E655C;   /* not stated — a THIRD state, never absence */
  --unknown-wash:     #EAE4DA;

  /* ── Colour: lines ────────────────────────────────────────────────────── */
  --rule:             #D9CFBE;
  --rule-strong:      #B9AB94;
  --rule-hair:        #E7DFD1;

  /* ── Type ─────────────────────────────────────────────────────────────── */
  --font-display: 'Fraunces', 'Iowan Old Style', Georgia, 'Times New Roman', serif;
  --font-body:    'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:    ui-monospace, 'SF Mono', 'Cascadia Mono', Menlo, monospace;

  --display-optical: 'opsz' 120;   /* Fraunces axis — big sizes get the display cut */
  --display-weight: 900;
  --display-tracking: -0.022em;
  --body-tracking: 0;

  /* Fluid scale. clamp() so a sibling can shift the whole rhythm by editing
     three numbers rather than every breakpoint in base.css. */
  --t-xs:   0.75rem;
  --t-sm:   0.8125rem;
  --t-base: 1.0625rem;
  --t-lg:   1.1875rem;
  --t-xl:   clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem);
  --t-2xl:  clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
  --t-3xl:  clamp(2.2rem, 1.5rem + 3vw, 3.6rem);
  --t-4xl:  clamp(2.8rem, 1.6rem + 5vw, 5.2rem);

  --leading-tight: 1.08;
  --leading-head:  1.18;
  --leading-body:  1.62;

  /* ── Space ────────────────────────────────────────────────────────────── */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-9: 7rem;

  /* ── Measure and page architecture ────────────────────────────────────── */
  --measure:        66ch;      /* prose column */
  --page-max:       78rem;
  --rail-width:     19rem;     /* the ledger rail; ignored by 'broadsheet' */
  --gutter:         clamp(1.1rem, 4vw, 3rem);

  /* ── Shape ────────────────────────────────────────────────────────────── */
  --radius-none: 0;
  --radius-sm:   2px;
  --radius-md:   3px;
  --radius-lg:   4px;
  --radius-pill: 999px;
  --border-weight: 1px;
  --border-weight-strong: 2px;
  --rule-style: solid;

  /* ── Elevation. Deliberately flat — this is print, not an app. ────────── */
  --shadow-none: none;
  --shadow-card: 0 1px 0 var(--rule);
  --shadow-lift: 0 2px 0 var(--rule-strong);

  /* ── Motion ───────────────────────────────────────────────────────────── */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 140ms;
}

/* Dark is a real reading mode for this category — a lot of the audience reads at
   night on a phone. Only the ground/ink tokens move; roles stay identical, which
   is why no component needs a dark-mode branch. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper:        #15110F;
    --paper-raised: #1E1815;
    --paper-sunk:   #241D19;
    --paper-invert: #0B0908;

    --ink:          #F1EAE0;
    --ink-quiet:    #B6A99C;
    --ink-faint:    #8A7D71;
    --ink-invert:   #F1EAE0;

    --brand:        #E39AA6;
    --brand-deep:   #C1707E;
    --brand-wash:   #2C1A1E;

    --evidence:     #E5A65C;
    --evidence-wash:#2C2117;

    --safe:         #7CC29C;
    --safe-wash:    #17251E;
    --caution:      #E8917F;
    --caution-wash: #2C1A16;
    --unknown:      #A2968A;
    --unknown-wash: #241E19;

    --rule:         #362C26;
    --rule-strong:  #4C3F36;
    --rule-hair:    #2A221D;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURE LAYER — shared across every satellite in the network.

   Two rules hold the §9.2 fingerprint mitigation together:

   1. NO LITERAL VALUES. Every colour, size, space, radius and font in this file
      is a var() from tokens.css. If a hex code or a px size appears here, the
      sibling-site swap stops working and five properties start sharing a face.

   2. CLASS NAMES ARE AUTHORED `.x-*`. styles/sheet.mjs rewrites `.x-` to the
      per-site prefix from brand.config.mjs on the way out, so this site ships
      `.snug-card` and satellite #2 ships something else. The `.x-` marker exists
      only so the rewrite can be a precise regex instead of a guess — do not use
      `.x-` for anything that is not a class selector.

   Structural variants live at the bottom under [data-structure]. §9.2's
   mitigation is "vary structure, not just colour"; a palette swap alone leaves
   identical margins and identical DOM rhythm, which is most of what the signal
   actually measures.
   ═══════════════════════════════════════════════════════════════════════════ */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-base);
  line-height: var(--leading-body);
  letter-spacing: var(--body-tracking);
  -webkit-font-smoothing: antialiased;
}

/* The age gate locks the scroll. Applied by the inline script, never by default,
   so a JS-less crawler gets an unlocked, fully readable page. */
html[data-gate="open"] body { overflow: hidden; }

img, svg { max-width: 100%; height: auto; display: block; }

a { color: var(--brand); text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
a:hover { color: var(--brand-deep); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-variation-settings: var(--display-optical);
  font-weight: var(--display-weight);
  line-height: var(--leading-head);
  letter-spacing: var(--display-tracking);
  margin: 0;
  text-wrap: balance;
}

table { border-collapse: collapse; width: 100%; }

.snug-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--brand); color: var(--ink-invert);
  padding: var(--s-3) var(--s-4); z-index: 100;
}
.snug-skip:focus { left: 0; }

:where(a, button, summary, input):focus-visible {
  outline: var(--border-weight-strong) solid var(--evidence);
  outline-offset: 2px;
}

/* ── 18+ gate ──────────────────────────────────────────────────────────────
   Content is always in the DOM. The gate is markup that starts [hidden] and is
   revealed by script. An interstitial that gated the HTML itself would hand a
   crawler a single page 267 times, which is the fastest way to make a 267-page
   topical map worth nothing. */
.snug-gate {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center;
  padding: var(--gutter);
  background: color-mix(in srgb, var(--paper-invert) 92%, transparent);
}
.snug-gate[hidden] { display: none; }
.snug-gate__panel {
  background: var(--paper); color: var(--ink);
  max-width: 30rem; width: 100%;
  padding: var(--s-6);
  border: var(--border-weight-strong) var(--rule-style) var(--brand);
  border-radius: var(--radius-md);
}
.snug-gate__title { font-size: var(--t-xl); margin-bottom: var(--s-3); }
.snug-gate__body { color: var(--ink-quiet); font-size: var(--t-sm); margin: 0 0 var(--s-5); }
.snug-gate__actions { display: flex; gap: var(--s-3); flex-wrap: wrap; }

.snug-btn {
  font: inherit; font-weight: 600;
  padding: var(--s-3) var(--s-5);
  border: var(--border-weight) var(--rule-style) var(--brand);
  border-radius: var(--radius-sm);
  background: var(--brand); color: var(--ink-invert);
  cursor: pointer;
  transition: background var(--dur) var(--ease);
}
.snug-btn:hover { background: var(--brand-deep); }
.snug-btn--ghost { background: transparent; color: var(--brand); }
.snug-btn--ghost:hover { background: var(--brand-wash); color: var(--brand-deep); }

/* ── Masthead ──────────────────────────────────────────────────────────── */
.snug-masthead {
  background: var(--paper-invert);
  color: var(--ink-invert);
  border-bottom: var(--border-weight-strong) var(--rule-style) var(--brand);
}
.snug-masthead__inner {
  max-width: var(--page-max); margin-inline: auto;
  padding: var(--s-4) var(--gutter);
  display: flex; align-items: baseline; gap: var(--s-6);
  flex-wrap: wrap;
}
.snug-wordmark {
  font-family: var(--font-display);
  font-variation-settings: var(--display-optical);
  font-weight: var(--display-weight);
  font-size: var(--t-xl);
  letter-spacing: var(--display-tracking);
  color: var(--ink-invert); text-decoration: none;
  line-height: 1;
}
.snug-wordmark em { font-style: normal; color: var(--brand); }
.snug-wordmark:hover { color: var(--ink-invert); }
.snug-masthead__strap {
  font-size: var(--t-xs); color: var(--ink-quiet);
  text-transform: uppercase; letter-spacing: 0.11em;
  flex: 1 1 12rem;
}
.snug-nav { display: flex; gap: var(--s-5); flex-wrap: wrap; margin-left: auto; }
.snug-nav__link {
  color: var(--ink-invert); text-decoration: none;
  font-size: var(--t-sm); font-weight: 500;
  border-bottom: var(--border-weight-strong) var(--rule-style) transparent;
  padding-bottom: var(--s-1);
}
.snug-nav__link:hover { color: var(--ink-invert); border-bottom-color: var(--brand); }

/* Ownership disclosure strip. §12 requires it on every page; putting it in the
   masthead rather than the footer means it is above the fold on every one of the
   267 pages, which is the difference between disclosed and technically present. */
.snug-ownership {
  background: var(--brand-wash); color: var(--brand-deep);
  font-size: var(--t-xs); line-height: 1.5;
  border-bottom: var(--border-weight) var(--rule-style) var(--rule);
}
.snug-ownership__inner { max-width: var(--page-max); margin-inline: auto; padding: var(--s-2) var(--gutter); }
.snug-ownership a { color: inherit; }

/* ── Page shell ────────────────────────────────────────────────────────── */
.snug-shell {
  max-width: var(--page-max);
  margin-inline: auto;
  padding: var(--s-7) var(--gutter) var(--s-8);
  display: grid;
  gap: var(--s-7);
}
.snug-main { min-width: 0; }
.snug-main > * + * { margin-top: var(--s-6); }

.snug-crumbs {
  font-size: var(--t-xs); color: var(--ink-quiet);
  margin-bottom: var(--s-5);
  display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.snug-crumbs a { color: var(--ink-quiet); }

/* ── Page head ─────────────────────────────────────────────────────────── */
.snug-hero { border-bottom: var(--border-weight-strong) var(--rule-style) var(--ink); padding-bottom: var(--s-5); }
.snug-hero__kicker {
  font-size: var(--t-xs); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.13em;
  color: var(--brand); margin-bottom: var(--s-3);
}
.snug-hero__title { font-size: var(--t-3xl); }
.snug-hero__standfirst {
  font-size: var(--t-lg); color: var(--ink-quiet);
  max-width: var(--measure); margin-top: var(--s-4);
}

/* ── Brief slots ───────────────────────────────────────────────────────────
   One <section> per brief-schema slot, in schema order, id = slot id. The ids
   are the addressable targets §7.5 depends on: moving a question from slot 2 to
   slot 3 across all 110 reviews is a schema edit, not 110 prose edits. Never
   rename one to read better. */
.snug-slot {
  scroll-margin-top: var(--s-6);
  border-top: var(--border-weight) var(--rule-style) var(--rule-hair);
  padding-top: var(--s-5);
}
.snug-slot:first-child { border-top: 0; padding-top: 0; }
.snug-slot__head {
  display: flex; align-items: baseline; gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.snug-slot__num {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-faint);
  min-width: 2ch;
}
.snug-slot__title { font-size: var(--t-xl); }
.snug-slot__body { max-width: var(--measure); }
.snug-slot__body > * + * { margin-top: var(--s-4); }

/* Scaffold affordance. An empty slot stays visible and machine-findable so the
   generator has somewhere to write and a reviewer can check slot ORDER before a
   single word exists. SNUG_SLOT_MODE=production drops these per brief-schema's
   dropIfEmpty instead. */
.snug-slot--empty .snug-slot__title { color: var(--ink-faint); }
.snug-slot__hint {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-faint);
  background: var(--paper-sunk);
  border-left: var(--border-weight-strong) var(--rule-style) var(--rule-strong);
  padding: var(--s-3) var(--s-4);
  white-space: pre-wrap; word-break: break-word;
}
.snug-slot__hint b { color: var(--ink-quiet); font-weight: 600; }

.snug-prose { max-width: var(--measure); }
.snug-prose p { margin: 0 0 var(--s-4); }
.snug-prose p:last-child { margin-bottom: 0; }
.snug-placeholder {
  color: var(--ink-faint); font-style: italic;
  border-left: var(--border-weight-strong) var(--rule-style) var(--rule);
  padding-left: var(--s-4);
}

/* ── Evidence figures ──────────────────────────────────────────────────────
   The factual spine. Aggregated star ratings and review counts live HERE, as
   clearly-sourced visible content, and NOWHERE in the JSON-LD — see lib/schema.mjs. */
.snug-evidence {
  background: var(--paper-raised);
  border: var(--border-weight) var(--rule-style) var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-5);
}
.snug-evidence__grid {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr));
}
.snug-evidence__fig {
  font-family: var(--font-display);
  font-variation-settings: var(--display-optical);
  font-weight: var(--display-weight);
  font-size: var(--t-2xl); line-height: 1;
  color: var(--evidence);
  font-variant-numeric: tabular-nums;
}
.snug-evidence__fig--muted { color: var(--ink-faint); }
.snug-evidence__lab {
  display: block; margin-top: var(--s-2);
  font-size: var(--t-xs); color: var(--ink-quiet);
  text-transform: uppercase; letter-spacing: 0.09em;
}
.snug-evidence__source {
  margin-top: var(--s-4); padding-top: var(--s-3);
  border-top: var(--border-weight) var(--rule-style) var(--rule-hair);
  font-size: var(--t-xs); color: var(--ink-quiet);
}

.snug-score { display: flex; align-items: center; gap: var(--s-3); }
.snug-score__num {
  font-family: var(--font-display);
  font-variation-settings: var(--display-optical);
  font-weight: var(--display-weight);
  font-size: var(--t-2xl); line-height: 1;
  color: var(--brand); font-variant-numeric: tabular-nums;
}
.snug-score__grade {
  font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-quiet);
}
.snug-score--sm .snug-score__num { font-size: var(--t-lg); }

/* ── Tags ──────────────────────────────────────────────────────────────── */
.snug-tag {
  display: inline-block;
  font-size: var(--t-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  padding: var(--s-1) var(--s-2);
  border-radius: var(--radius-sm);
  background: var(--unknown-wash); color: var(--unknown);
  border: var(--border-weight) var(--rule-style) currentColor;
}
.snug-tag--safe    { background: var(--safe-wash);    color: var(--safe); }
.snug-tag--caution { background: var(--caution-wash); color: var(--caution); }
.snug-tag--unknown { background: var(--unknown-wash); color: var(--unknown); }

/* ── Spec / comparable tables ──────────────────────────────────────────────
   Provenance is rendered, always. A row whose provenance is not-in-supplier-data
   renders "Not stated" — it is NEVER dropped. Dropping it reads as "this product
   has no flared base" instead of "we do not know", and flared base is the one
   attribute in this category where that inversion sends someone to an ED. */
.snug-spec { font-size: var(--t-sm); }
.snug-spec th, .snug-spec td {
  text-align: left; vertical-align: top;
  padding: var(--s-3) var(--s-3);
  border-bottom: var(--border-weight) var(--rule-style) var(--rule-hair);
}
.snug-spec thead th {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-quiet); border-bottom-color: var(--rule-strong);
  font-family: var(--font-body); font-weight: 700;
}
.snug-spec tbody th { font-weight: 600; width: 34%; }
.snug-spec td { font-variant-numeric: tabular-nums; }
.snug-spec__val--unknown { color: var(--ink-faint); font-style: italic; }
.snug-spec__prov {
  display: block; margin-top: var(--s-1);
  font-size: var(--t-xs); color: var(--ink-faint);
  font-family: var(--font-mono);
}
.snug-spec caption {
  caption-side: bottom; text-align: left;
  padding-top: var(--s-3);
  font-size: var(--t-xs); color: var(--ink-quiet);
}

/* ── Cards and ranked lists ────────────────────────────────────────────── */
.snug-cards {
  display: grid; gap: var(--s-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  list-style: none; padding: 0; margin: 0;
}
.snug-card {
  background: var(--paper-raised);
  border: var(--border-weight) var(--rule-style) var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  display: flex; flex-direction: column; gap: var(--s-2);
  box-shadow: var(--shadow-card);
}
.snug-card__kicker {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-quiet);
}
.snug-card__title { font-size: var(--t-lg); }
.snug-card__title a { text-decoration: none; color: var(--ink); }
.snug-card__title a:hover { color: var(--brand); text-decoration: underline; }
.snug-card__meta { font-size: var(--t-xs); color: var(--ink-quiet); margin-top: auto; padding-top: var(--s-3); }

.snug-ranked { list-style: none; padding: 0; margin: 0; counter-reset: pick; }
.snug-ranked > li {
  counter-increment: pick;
  display: grid; grid-template-columns: 3rem 1fr; gap: var(--s-4);
  padding: var(--s-5) 0;
  border-bottom: var(--border-weight) var(--rule-style) var(--rule-hair);
}
.snug-ranked > li::before {
  content: counter(pick);
  font-family: var(--font-display);
  font-variation-settings: var(--display-optical);
  font-weight: var(--display-weight);
  font-size: var(--t-2xl); line-height: 1;
  color: var(--rule-strong);
  font-variant-numeric: tabular-nums;
}
.snug-pick__title { font-size: var(--t-lg); margin-bottom: var(--s-2); }
.snug-pick__title a { text-decoration: none; color: var(--ink); }
.snug-pick__title a:hover { color: var(--brand); text-decoration: underline; }
.snug-pick__meta { font-size: var(--t-sm); color: var(--ink-quiet); display: flex; gap: var(--s-4); flex-wrap: wrap; }

.snug-linklist { list-style: none; padding: 0; margin: 0; }
.snug-linklist li { padding: var(--s-3) 0; border-bottom: var(--border-weight) var(--rule-style) var(--rule-hair); }
.snug-linklist__meta { display: block; font-size: var(--t-xs); color: var(--ink-quiet); }

/* ── Notes ─────────────────────────────────────────────────────────────── */
.snug-note {
  background: var(--paper-sunk);
  border-left: var(--border-weight-strong) var(--rule-style) var(--rule-strong);
  padding: var(--s-4);
  font-size: var(--t-sm);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.snug-note--caution { background: var(--caution-wash); border-left-color: var(--caution); color: var(--caution); }
.snug-note--safe { background: var(--safe-wash); border-left-color: var(--safe); color: var(--safe); }
.snug-note--evidence { background: var(--evidence-wash); border-left-color: var(--evidence); }
.snug-note strong { font-weight: 700; }

/* Marks an internal link target that the topical map references but does not
   contain. Rendered as text, never as an <a> — a link to a page that was never
   planned is a 404 in the crawl budget. */
.snug-todo {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--caution); background: var(--caution-wash);
  padding: 0 var(--s-2); border-radius: var(--radius-sm);
}

/* ── Where to buy — ANOTHER AGENT'S COMPONENT ──────────────────────────── */
.snug-buy {
  border: var(--border-weight-strong) var(--rule-style) var(--rule-strong);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  background: var(--paper-raised);
}
.snug-buy__stub {
  font-family: var(--font-mono); font-size: var(--t-xs);
  color: var(--ink-faint);
}

/* ── Furniture: byline, disclosure, updated ────────────────────────────── */
.snug-byline {
  border-top: var(--border-weight) var(--rule-style) var(--rule);
  border-bottom: var(--border-weight) var(--rule-style) var(--rule);
  padding: var(--s-4) 0;
  font-size: var(--t-sm);
}
.snug-byline__who { font-weight: 700; }
.snug-byline__bio { color: var(--ink-quiet); margin-top: var(--s-2); max-width: var(--measure); }
.snug-byline__review { color: var(--caution); margin-top: var(--s-2); font-size: var(--t-xs); }

.snug-updated {
  font-size: var(--t-xs); color: var(--ink-quiet);
  display: flex; gap: var(--s-4); flex-wrap: wrap;
  font-variant-numeric: tabular-nums;
}

.snug-disclosure {
  background: var(--paper-sunk);
  border: var(--border-weight) var(--rule-style) var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-5);
  font-size: var(--t-sm); color: var(--ink-quiet);
}
.snug-disclosure strong { color: var(--ink); }

/* ── Rail (ledger structure only) ──────────────────────────────────────── */
.snug-rail { min-width: 0; font-size: var(--t-sm); }
.snug-rail > * + * { margin-top: var(--s-5); }
.snug-rail__box {
  border: var(--border-weight) var(--rule-style) var(--rule);
  border-radius: var(--radius-md);
  padding: var(--s-4);
  background: var(--paper-raised);
}
.snug-rail__title {
  font-size: var(--t-xs); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--ink-quiet); margin-bottom: var(--s-3);
  font-family: var(--font-body); font-weight: 700;
}
.snug-rail__toc { list-style: none; padding: 0; margin: 0; font-size: var(--t-xs); }
.snug-rail__toc li { padding: var(--s-1) 0; }
.snug-rail__toc a { color: var(--ink-quiet); text-decoration: none; }
.snug-rail__toc a:hover { color: var(--brand); text-decoration: underline; }

/* ── Homepage ──────────────────────────────────────────────────────────── */
.snug-lede {
  padding: var(--s-8) var(--gutter);
  max-width: var(--page-max); margin-inline: auto;
}
.snug-lede__title { font-size: var(--t-4xl); max-width: 18ch; }
.snug-lede__sub { font-size: var(--t-lg); color: var(--ink-quiet); max-width: var(--measure); margin-top: var(--s-5); }
.snug-lede__figures {
  display: flex; gap: var(--s-7); flex-wrap: wrap;
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: var(--border-weight-strong) var(--rule-style) var(--ink);
}
.snug-band { border-top: var(--border-weight) var(--rule-style) var(--rule); }
.snug-band__inner { max-width: var(--page-max); margin-inline: auto; padding: var(--s-7) var(--gutter); }
.snug-band--invert { background: var(--paper-invert); color: var(--ink-invert); }
.snug-band--invert .snug-band__title, .snug-band--invert a { color: var(--ink-invert); }
.snug-band--invert .snug-band__standfirst { color: var(--ink-quiet); }
.snug-band__title { font-size: var(--t-2xl); }
.snug-band__standfirst { color: var(--ink-quiet); max-width: var(--measure); margin-top: var(--s-3); }
.snug-band__body { margin-top: var(--s-6); }

.snug-splitfigs { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }

/* ── Footer ────────────────────────────────────────────────────────────── */
.snug-footer {
  background: var(--paper-invert); color: var(--ink-invert);
  border-top: var(--border-weight-strong) var(--rule-style) var(--brand);
  margin-top: var(--s-8);
}
.snug-footer__inner { max-width: var(--page-max); margin-inline: auto; padding: var(--s-7) var(--gutter); }
.snug-footer__cols { display: grid; gap: var(--s-6); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.snug-footer a { color: var(--ink-invert); }
.snug-footer__legal {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: var(--border-weight) var(--rule-style) var(--rule);
  font-size: var(--t-xs); color: var(--ink-quiet);
  display: grid; gap: var(--s-3);
}
.snug-footer__legal p { margin: 0; max-width: 62ch; }
.snug-agemark {
  display: inline-block; border: var(--border-weight-strong) var(--rule-style) currentColor;
  border-radius: var(--radius-pill); padding: 0 var(--s-2);
  font-weight: 700; font-size: var(--t-xs);
}

.snug-quiet { color: var(--ink-quiet); }
.snug-faint { color: var(--ink-faint); }
.snug-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   STRUCTURAL VARIANTS — the §9.2 lever.
   brand.config.mjs sets `structure`; BaseLayout stamps it on <html>. Changing
   the one value gives a sibling site different columns, different rhythm and a
   different reading order, not a recoloured clone.
   ═══════════════════════════════════════════════════════════════════════════ */

/* LEDGER — asymmetric measure, sticky evidence rail on the right, numerals in
   the margin of every slot. The evidence count is the point of this site, so it
   sits in the furniture rather than buried in prose. */
[data-structure="ledger"] .snug-shell { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 60rem) {
  [data-structure="ledger"] .snug-shell {
    grid-template-columns: minmax(0, 1fr) var(--rail-width);
    gap: var(--s-8);
  }
  [data-structure="ledger"] .snug-rail { position: sticky; top: var(--s-5); align-self: start; }
}
[data-structure="ledger"] .snug-hero__title { font-size: var(--t-3xl); }

/* BROADSHEET — single centred measure, no rail, drop cap on the opening slot,
   heavier heads. Reserved for a sibling satellite; kept here so the switch is
   real and tested rather than aspirational. */
[data-structure="broadsheet"] .snug-shell {
  grid-template-columns: minmax(0, 1fr);
  max-width: calc(var(--measure) + var(--gutter) * 2);
}
[data-structure="broadsheet"] .snug-rail {
  border-top: var(--border-weight-strong) var(--rule-style) var(--ink);
  padding-top: var(--s-5);
}
[data-structure="broadsheet"] .snug-rail__toc { columns: 2; }
[data-structure="broadsheet"] .snug-slot { border-top: 0; padding-top: var(--s-6); }
[data-structure="broadsheet"] .snug-slot__num { display: none; }
[data-structure="broadsheet"] .snug-slot__title { font-size: var(--t-2xl); }
[data-structure="broadsheet"] .snug-hero { border-bottom-width: var(--border-weight); }
[data-structure="broadsheet"] .snug-slot:first-of-type .snug-prose > p:first-child::first-letter {
  float: left; font-family: var(--font-display); font-size: 3.4em;
  line-height: 0.82; padding-right: var(--s-2); color: var(--brand);
}