/* ==========================================================================
   PawNamer — design system v2
   ---------------------------------------------------------------------------
   Direction: editorial trust.

   The job of this page is to make a visitor believe the names here were chosen
   by people who know something, and to get them filtering within one screen.
   So the visual weight goes to CONTENT and EVIDENCE, not to ornament:

     - One accent colour (clay). Used for actions and nothing else, so an
       action is always unmistakable.
     - Type does the hierarchy work. A serif display face for headings reads as
       edited/published; the body face stays neutral and highly legible.
     - Surfaces are separated by hairlines and background shifts, not shadows.
       Shadows on everything is the "template" tell that cheapens a site.
     - Every number on the page is real and specific (1,240 names, updated
       March 2026). Vague superlatives read as marketing; counts read as a
       database.

   Dark mode is supported throughout: tokens below are redefined under
   prefers-color-scheme, so no component needs its own dark rules.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
  /* Neutrals — warm-tinted greys. A pure grey next to the clay accent reads
     as cold/clinical; a few points of warmth makes the palette cohere. */
  --bg:        #fbfaf8;
  --bg-sunk:   #f4f2ee;
  --surface:   #ffffff;
  --surface-2: #f7f5f2;

  --ink:       #1a1715;
  --ink-2:     #4a4440;
  --ink-3:     #7c7570;

  --line:      #e4e0d9;
  --line-2:    #cfc9bf;

  /* Accent — a muted terracotta. Warm enough to feel pet-adjacent, desaturated
     enough to stay credible next to long-form text. */
  --accent:       #b4522e;
  --accent-hover: #9a4426;
  --accent-soft:  #fbeee8;
  --accent-line:  #eccdbd;

  /* Supporting hues, used only for categorical tinting (species, gender). */
  --sage:      #4a6b52;
  --sage-soft: #e8f0e9;
  --indigo:      #3c4f7a;
  --indigo-soft: #e8ecf5;
  --plum:      #6b4463;
  --plum-soft: #f2e9f0;

  --focus: #1a1715;

  /* Type. Source Serif for display gives an editorial register without the
     stuffiness of a transitional serif; Inter keeps the UI legible at 14px. */
  --font-display: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* A modular scale, fluid between 380px and 1280px viewports. */
  --t--2: clamp(0.72rem, 0.70rem + 0.08vw, 0.76rem);
  --t--1: clamp(0.82rem, 0.80rem + 0.10vw, 0.875rem);
  --t-0:  clamp(0.95rem, 0.92rem + 0.14vw, 1.0rem);
  --t-1:  clamp(1.08rem, 1.02rem + 0.28vw, 1.22rem);
  --t-2:  clamp(1.3rem, 1.18rem + 0.52vw, 1.6rem);
  --t-3:  clamp(1.6rem, 1.38rem + 0.96vw, 2.2rem);
  --t-4:  clamp(2.0rem, 1.62rem + 1.7vw, 3.1rem);
  --t-5:  clamp(2.5rem, 1.9rem + 2.7vw, 4.2rem);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --wrap: 1180px;
  --read: 680px;

  --gut: clamp(20px, 4vw, 32px);
  --section-y: clamp(52px, 7vw, 92px);

  --header-h: 64px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #15130f;
    --bg-sunk:   #100e0b;
    --surface:   #1e1b17;
    --surface-2: #252119;

    --ink:       #f4f1ec;
    --ink-2:     #c4bdb3;
    --ink-3:     #938b81;

    --line:      #322d26;
    --line-2:    #464036;

    --accent:       #e08a62;
    --accent-hover: #ee9e78;
    --accent-soft:  #2c1f18;
    --accent-line:  #4a3327;

    --sage:      #8fb398;
    --sage-soft: #1d2820;
    --indigo:      #93a8d4;
    --indigo-soft: #1c2130;
    --plum:      #c398ba;
    --plum-soft:  #2a1f28;

    --focus: #e08a62;
  }
}

/* --------------------------------------------------------------------------
   2. Reset & base
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-0);
  line-height: 1.6;
  font-feature-settings: "cv05" 1, "ss01" 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
h1 { font-size: var(--t-5); letter-spacing: -0.028em; }
h2 { font-size: var(--t-3); }
h3 { font-size: var(--t-1); letter-spacing: -0.01em; }
h4 { font-size: var(--t-0); }

p { margin: 0 0 1.05em; text-wrap: pretty; }

a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }

small { font-size: var(--t--1); }

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

::selection { background: var(--accent-soft); color: var(--accent-hover); }

.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 200;
  background: var(--ink); color: var(--bg);
  padding: 10px 18px; border-radius: var(--r-sm);
  font-size: var(--t--1); font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   3. Layout primitives
   -------------------------------------------------------------------------- */

.wrap { width: min(100% - (var(--gut) * 2), var(--wrap)); margin-inline: auto; }
.read { width: min(100% - (var(--gut) * 2), var(--read)); margin-inline: auto; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(34px, 4.5vw, 56px); }
.section--sunk { background: var(--bg-sunk); }
.section--surface { background: var(--surface); border-block: 1px solid var(--line); }

/* A section header: eyebrow, title, optional lede and a trailing link.
   The trailing link sits on the baseline of the title on wide screens, which
   keeps "see all" discoverable without a second visual row. */
.sec-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px 24px; flex-wrap: wrap;
  margin-bottom: clamp(24px, 3vw, 40px);
}
/* The trailing link aligns to the TITLE's baseline, not the block's bottom —
   otherwise a two-line lede pushes it far below where the eye expects it. */
.sec-head__text { flex: 1 1 320px; max-width: 60ch; }
.sec-head > .more-link { align-self: flex-start; margin-top: 6px; }
.sec-head h2 { margin-bottom: 0.3em; }
.sec-head p { color: var(--ink-2); font-size: var(--t-1); margin: 0; }

.eyebrow {
  display: block;
  font-family: var(--font-body);
  font-size: var(--t--2); font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.7em;
}

/* "See all →" style link. The arrow shifts on hover — a small affordance that
   signals navigation without needing a button. */
.more-link {
  font-size: var(--t--1); font-weight: 600;
  text-decoration: none; color: var(--ink);
  display: inline-flex; align-items: center; gap: 7px;
  white-space: nowrap;
  border-bottom: 1.5px solid var(--accent);
  padding-bottom: 2px;
}
.more-link svg { width: 15px; height: 15px; transition: transform .18s ease; }
.more-link:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   4. Buttons, chips, pills
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body);
  font-size: var(--t-0); font-weight: 600; line-height: 1;
  padding: 13px 22px;
  border-radius: var(--r);
  border: 1.5px solid transparent;
  background: var(--accent); color: #fff;
  text-decoration: none; cursor: pointer;
  transition: background .16s ease, border-color .16s ease, color .16s ease;
}
.btn:hover { background: var(--accent-hover); }
.btn svg { width: 18px; height: 18px; flex: none; }

.btn--outline { background: transparent; color: var(--ink); border-color: var(--line-2); }
.btn--outline:hover { background: var(--surface-2); border-color: var(--ink); }

.btn--ink { background: var(--ink); color: var(--bg); }
.btn--ink:hover { background: var(--ink-2); }

.btn--sm { padding: 9px 15px; font-size: var(--t--1); border-radius: var(--r-sm); }
.btn--block { width: 100%; }

/* Chips: used for themes and filters. aria-pressed carries the selected state
   so the styling and the accessibility tree never disagree. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font-size: var(--t--1); font-weight: 500; line-height: 1;
  text-decoration: none; cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.chip:hover { border-color: var(--ink); background: var(--surface-2); }
.chip[aria-pressed="true"], .chip[aria-current="true"], .chip.is-on {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.chip__n { color: var(--ink-3); font-variant-numeric: tabular-nums; font-size: var(--t--2); }
.chip[aria-pressed="true"] .chip__n { color: inherit; opacity: .7; }

/* Small non-interactive label. */
.pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 9px; border-radius: var(--r-pill);
  font-size: var(--t--2); font-weight: 600; line-height: 1.5;
  background: var(--surface-2); color: var(--ink-2);
  white-space: nowrap;
}
.pill--accent { background: var(--accent-soft); color: var(--accent-hover); }
.pill--sage   { background: var(--sage-soft);   color: var(--sage); }
.pill--indigo { background: var(--indigo-soft); color: var(--indigo); }
.pill--plum   { background: var(--plum-soft);   color: var(--plum); }

/* --------------------------------------------------------------------------
   5. Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(1.6) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; gap: 10px;
  min-height: var(--header-h);
}

.logo {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display);
  font-size: 1.28rem; font-weight: 700; letter-spacing: -0.03em;
  color: var(--ink); text-decoration: none;
  margin-right: 14px;
}
.logo__mark { width: 28px; height: 28px; flex: none; }

.nav { margin-right: auto; }
.nav > ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 8px 12px; border-radius: var(--r-sm);
  font-size: var(--t--1); font-weight: 500;
  text-decoration: none; color: var(--ink-2);
  background: none; border: 0; font-family: inherit; cursor: pointer;
}
.nav__link:hover { color: var(--ink); background: var(--surface-2); }
.nav__link[aria-current="page"] { color: var(--ink); font-weight: 600; }
.nav__link svg { width: 13px; height: 13px; opacity: .6; transition: transform .18s; }
.nav__link[aria-expanded="true"] svg { transform: rotate(180deg); }

/* Dropdown. Opened by click (not hover) so it works on touch and is keyboard
   operable; hover-only menus strand touch users. */
.nav__item { position: relative; }
.nav__panel {
  position: absolute; top: calc(100% + 8px); left: 0;
  min-width: 280px; padding: 10px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: 0 12px 32px -12px rgb(26 23 21 / 0.22);
  display: none; z-index: 10;
}
.nav__panel[data-open="true"] { display: block; }
.nav__panel ul { list-style: none; margin: 0; padding: 0; }
.nav__panel a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 9px 12px; border-radius: var(--r-sm);
  text-decoration: none; font-size: var(--t--1); font-weight: 500;
}
.nav__panel a:hover { background: var(--surface-2); }
.nav__panel a small { color: var(--ink-3); font-variant-numeric: tabular-nums; }

.header__actions { display: flex; align-items: center; gap: 8px; }

/* Header search. On wide screens the field is visible; below 1100px it
   collapses to just the icon button, which links through to /search/ so the
   function is never lost — only its inline affordance. */
.header-search {
  display: flex; align-items: center;
  border: 1px solid var(--line-2); border-radius: var(--r-sm);
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s;
}
.header-search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 15%, transparent);
}
.header-search input {
  width: 160px; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; font-size: var(--t--1); color: var(--ink);
  padding: 8px 0 8px 11px;
}
.header-search input::placeholder { color: var(--ink-3); }
.header-search input::-webkit-search-cancel-button { cursor: pointer; }
.header-search button {
  flex: none;
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 0; background: none; color: var(--ink-3);
  cursor: pointer; border-radius: var(--r-sm);
}
.header-search button:hover { color: var(--accent); }
.header-search svg { width: 17px; height: 17px; }

@media (max-width: 1100px) {
  /* Collapse to the icon only — the input stays in the DOM (and submittable)
     but takes no space. */
  .header-search input {
    width: 0; padding: 0;
    position: absolute; opacity: 0; pointer-events: none;
  }
  .header-search { border-color: transparent; background: none; }
  .header-search:focus-within { box-shadow: none; }
  .header-search button { width: 40px; height: 40px; border: 1px solid var(--line-2); background: var(--surface); }
}

/* Shortlist button. The count badge is the persistent hook that brings people
   back — it only renders when non-zero, so an empty state stays quiet. */
.shortlist-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: inherit; font-size: var(--t--1); font-weight: 600;
  color: var(--ink); cursor: pointer;
}
.shortlist-btn:hover { border-color: var(--ink); }
.shortlist-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.shortlist-btn[data-has-items="true"] svg { fill: var(--accent); stroke: var(--accent); }
.shortlist-btn__count {
  min-width: 19px; height: 19px; padding: 0 5px;
  display: none; place-items: center;
  border-radius: var(--r-pill); background: var(--accent); color: #fff;
  font-size: 0.7rem; font-weight: 700; font-variant-numeric: tabular-nums;
}
.shortlist-btn[data-has-items="true"] .shortlist-btn__count { display: grid; }

.menu-toggle {
  display: none;
  width: 40px; height: 40px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  color: var(--ink); cursor: pointer;
}
.menu-toggle svg { margin: auto; width: 19px; height: 19px; }

@media (max-width: 900px) {
  .menu-toggle { display: grid; }
  .nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 8px var(--gut) 20px;
    display: none; margin: 0;
    max-height: calc(100vh - var(--header-h)); overflow-y: auto;
  }
  .nav[data-open="true"] { display: block; }
  .nav > ul { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__link { padding: 13px 10px; font-size: var(--t-0); justify-content: space-between; }
  .nav__panel {
    position: static; min-width: 0; box-shadow: none;
    border: 0; border-left: 2px solid var(--line); border-radius: 0;
    margin: 0 0 6px 10px; padding: 0 0 0 8px;
  }
  .logo { margin-right: auto; }
}

/* --------------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------------
   Search-first. The dominant query intent here is "show me names", not "tell
   me about your brand", so the search field is the largest interactive target
   on the screen and the proof strip sits directly under it.
   -------------------------------------------------------------------------- */

.hero { padding-block: clamp(40px, 6.5vw, 86px) clamp(32px, 4vw, 56px); }
.hero__grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(32px, 5vw, 76px);
  /* Top-aligned, with the panel nudged down to sit level with the lede rather
     than the headline — centring it leaves it floating against a tall column. */
  align-items: start;
}
.hero__panel { margin-top: clamp(0px, 1.5vw, 18px); }
@media (max-width: 940px) { .hero__grid { grid-template-columns: 1fr; gap: 40px; } }

.hero h1 { margin-bottom: 0.3em; max-width: 14ch; }
.hero h1 em { font-style: italic; color: var(--accent); }
.hero__lede {
  font-size: var(--t-1); color: var(--ink-2);
  max-width: 46ch; margin-bottom: 26px;
}

/* Search field. Oversized on purpose: it is the primary action. */
.search {
  display: flex; align-items: center; gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--line-2); border-radius: var(--r);
  padding: 6px 6px 6px 16px;
  transition: border-color .15s, box-shadow .15s;
}
.search:focus-within {
  border-color: var(--ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
.search svg { width: 19px; height: 19px; flex: none; color: var(--ink-3); }
.search input {
  flex: 1; min-width: 0;
  border: 0; background: none; outline: none;
  font: inherit; color: var(--ink);
  padding: 11px 0;
}
.search input::placeholder { color: var(--ink-3); }

.hero__suggest {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  margin-top: 14px; font-size: var(--t--1); color: var(--ink-3);
}
.hero__suggest a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.hero__suggest a:hover { color: var(--accent); }

/* Proof strip — the credibility line. Specific numbers, not adjectives. */
.proof {
  display: flex; flex-wrap: wrap; gap: 0 28px;
  margin-top: 30px; padding-top: 22px;
  border-top: 1px solid var(--line);
}
.proof__item { display: grid; gap: 1px; }
.proof__n {
  font-family: var(--font-display);
  font-size: var(--t-2); font-weight: 600; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.proof__l { font-size: var(--t--2); color: var(--ink-3); letter-spacing: 0.02em; }

/* Hero panel: a live sample of the actual product. Showing three real names
   with meanings proves the value immediately — better than an illustration,
   because it IS the thing being sold. */
.hero__panel {
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 22px;
}
.hero__panel-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 4px; padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.hero__panel-head h2 {
  font-family: var(--font-body);
  font-size: var(--t--1); font-weight: 600; letter-spacing: 0.02em;
  margin: 0; color: var(--ink-2);
}
.hero__species { display: flex; gap: 4px; }
.hero__species .chip { padding: 5px 11px; font-size: var(--t--2); }

.sample { list-style: none; margin: 0; padding: 0; }
.sample li { border-bottom: 1px solid var(--line); }
.sample li:last-child { border-bottom: 0; }

.hero__panel-foot { margin-top: 14px; display: flex; gap: 8px; }

/* --------------------------------------------------------------------------
   6b. Page head, breadcrumbs, prose
   -------------------------------------------------------------------------- */

.page-head { padding-block: clamp(22px, 3vw, 34px) clamp(26px, 4vw, 44px); }
.page-head h1 { font-size: var(--t-4); max-width: 18ch; margin-bottom: 0.25em; }
.page-head__lede { font-size: var(--t-1); color: var(--ink-2); max-width: 52ch; margin-bottom: 0; }

/* Article head.
   A headline capped at 18ch inside a 1180px container leaves a large empty
   block to its right. Here the head becomes a two-column grid: headline and
   lede on the left at a readable measure, publishing metadata on the right.
   That fills the space with something useful (the E-E-A-T signals) rather
   than simply stretching the text to an uncomfortable line length. */
.page-head--article { border-bottom: 1px solid var(--line); }
.page-head--article .page-head__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(24px, 4vw, 64px); align-items: start;
}
@media (max-width: 1000px) {
  .page-head--article .page-head__row { grid-template-columns: 1fr; gap: 20px; }
}
/* No max-width: the grid column already constrains these, and a ch cap on top
   of it leaves an obvious empty block to the right of the headline.

   text-wrap is reset to `pretty` as well. The global heading rule uses
   `balance`, which evens out line lengths — good for a short hub title, wrong
   here: on a long article headline it breaks early and leaves the right of
   the line empty, which reads as a layout bug rather than as typography. */
.page-head--article h1 { max-width: none; text-wrap: pretty; }
.page-head--article .page-head__lede { max-width: none; }
/* Breathing room between the head rule and the body/rail below it. */
.page-head--article { padding-bottom: clamp(30px, 4vw, 48px); }
.page-head--article + .article-layout { padding-top: clamp(32px, 4vw, 52px); }

/* Metadata panel: stacked label/value rows, aligned with the rail below. */
.head-meta { margin: 0; display: grid; gap: 12px; }
@media (min-width: 1001px) { .head-meta { padding-top: 8px; } }
.head-meta > div {
  display: grid; gap: 1px;
  padding-bottom: 11px; border-bottom: 1px solid var(--line);
}
.head-meta > div:last-child { border-bottom: 0; padding-bottom: 0; }
.head-meta dt {
  font-size: var(--t--2); font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
}
.head-meta dd { margin: 0; font-size: var(--t--1); color: var(--ink-2); }
.head-meta dd a { color: var(--ink); }
.page-head__grid {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(24px, 4vw, 56px); align-items: end;
}
@media (max-width: 800px) { .page-head__grid { grid-template-columns: 1fr; align-items: start; } }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

.crumbs { font-size: var(--t--1); color: var(--ink-3); margin-bottom: 18px; }
.crumbs ol { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; margin: 0; padding: 0; }
.crumbs li + li::before { content: "/"; margin-right: 6px; color: var(--line-2); }
.crumbs a { color: var(--ink-3); text-decoration-color: var(--line-2); }
.crumbs a:hover { color: var(--accent); }

/* A compact stats block beside a page title. */
.stat-strip { display: flex; gap: 28px; margin: 0; }
.stat-strip div { display: grid; gap: 1px; }
.stat-strip dt {
  font-size: var(--t--2); color: var(--ink-3);
  letter-spacing: 0.06em; text-transform: uppercase; order: 2;
}
.stat-strip dd {
  margin: 0; order: 1;
  font-family: var(--font-display); font-size: var(--t-2); font-weight: 600;
  line-height: 1.1; font-variant-numeric: tabular-nums;
}

/* A–Z grid. Square targets, comfortably above the 44px touch minimum. */
.alpha {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
  list-style: none; margin: 0; padding: 0;
}
.alpha a {
  display: grid; place-items: center;
  aspect-ratio: 1; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  font-family: var(--font-display); font-size: var(--t-1); font-weight: 600;
  text-decoration: none;
}
.alpha a:hover { border-color: var(--ink); background: var(--ink); color: var(--bg); }

/* Long-form text. Narrow measure, generous leading. */
.prose { font-size: var(--t-0); line-height: 1.72; }
.prose > h2 { margin-top: 1.6em; }
.prose > h2:first-child { margin-top: 0; }
.prose > h3 { margin-top: 1.4em; }
.prose p { color: var(--ink-2); }
.prose strong { color: var(--ink); font-weight: 600; }
.prose ul, .prose ol { padding-left: 1.25em; color: var(--ink-2); }
.prose li { margin-bottom: 0.45em; }
.prose a { color: var(--ink); text-decoration-color: var(--accent); }

/* Pull quote. A line worth slowing down for — set in the display face, with a
   rule rather than quote marks so it reads as emphasis, not decoration. */
.pullquote {
  margin: 32px 0; padding: 4px 0 4px 24px;
  border-left: 3px solid var(--accent);
}
.pullquote p {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-2); line-height: 1.32; font-style: italic;
  color: var(--ink); text-wrap: balance;
}

/* Numbered steps. The counter sits in the margin so step text aligns in one
   column — easier to scan than a default <ol> whose text indents vary. */
.steps { list-style: none; margin: 24px 0; padding: 0; counter-reset: step; }
.steps > li {
  position: relative;
  padding: 0 0 18px 48px; margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
}
.steps > li:last-child { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }
.steps > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--accent-soft);
  color: var(--accent); font-size: var(--t--1); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.steps > li strong { display: block; color: var(--ink); margin-bottom: 3px; }

/* Paired names. Two or three columns so forty pairs stay scannable instead of
   becoming a very long single column. */
.pair-list {
  list-style: none; margin: 0 0 1.5em; padding: 0;
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
/* A bordered chip per pair. Zebra striping was tried here and reads as noise:
   in a wrapping grid the stripes zigzag instead of forming columns. */
.pair-list li {
  padding: 10px 13px; border-radius: var(--r-sm);
  border: 1px solid var(--line); background: var(--surface);
  font-size: var(--t--1); color: var(--ink-3);
}
.pair-list strong { color: var(--ink); font-weight: 600; }

/* Table of contents. */
.toc {
  border: 1px solid var(--line); background: var(--surface);
  border-radius: var(--r); padding: 16px 20px; margin: 0 0 30px;
}
.toc strong {
  display: block; margin-bottom: 8px;
  font-family: var(--font-body); font-size: var(--t--2);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3);
}
.toc ol { margin: 0; padding-left: 1.1em; font-size: var(--t--1); }
.toc li { margin-bottom: 4px; }
.toc a { text-decoration: none; color: var(--ink-2); }
.toc a:hover { color: var(--accent); text-decoration: underline; }

.byline {
  font-size: var(--t--1); color: var(--ink-3);
  margin-bottom: 20px; padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.byline a { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   6c. Article layout with sidebar
   --------------------------------------------------------------------------
   Full container width, split into a reading column and a sticky rail.

   The rail is a crawl-depth device as much as a reading aid. A visitor (or a
   bot) arriving on one article from search finds the TOC, every category, and
   a stack of other articles without scrolling to the footer — so each article
   becomes an entry point to the rest of the site rather than a dead end.

   The reading column keeps a ~68ch measure even though the page is wide:
   long-form text set across a full 1180px container is genuinely harder to
   read, and width here is for the rail, not for longer lines.
   -------------------------------------------------------------------------- */

.article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
@media (max-width: 1000px) {
  .article-layout { grid-template-columns: 1fr; gap: 40px; }
}

/* The body column. max-width keeps the measure comfortable; it sits left
   rather than centred so it stays visually tied to the rail. */
.article-main { min-width: 0; max-width: 94ch; }

.article-rail { min-width: 0; }
@media (min-width: 1001px) {
  /* Sticky, and scrollable internally when the rail is taller than the
     viewport — otherwise the lower blocks become unreachable. */
  .article-rail {
    position: sticky; top: calc(var(--header-h) + 20px);
    max-height: calc(100vh - var(--header-h) - 40px);
    overflow-y: auto;
    scrollbar-width: thin;
    padding-right: 4px;
  }
  .article-rail::-webkit-scrollbar { width: 6px; }
  .article-rail::-webkit-scrollbar-thumb { background: var(--line-2); border-radius: 3px; }
}

.rail-block { margin-bottom: 22px; }
.rail-block:last-child { margin-bottom: 0; }

.rail-block__title {
  font-family: var(--font-body);
  font-size: var(--t--2); font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px; padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
}

/* ---- Rail: table of contents ---- */

.rail-toc { list-style: none; margin: 0; padding: 0; }
.rail-toc li { margin-bottom: 1px; }

/* Top level (h2): darker, heavier, flush left. */
.rail-toc a {
  display: block; padding: 8px 11px;
  border-left: 2px solid var(--line);
  font-size: var(--t--1); line-height: 1.4; font-weight: 600;
  color: var(--ink); text-decoration: none;
  transition: color .14s, border-color .14s, background .14s;
}
.rail-toc a:hover { color: var(--accent); border-left-color: var(--line-2); background: var(--surface-2); }

/* Set by the scroll-spy in main.js as each section passes the header. */
.rail-toc a[aria-current="true"] {
  color: var(--accent); border-left-color: var(--accent);
  background: var(--accent-soft);
}

/* Child level (h3): indented, lighter and smaller, with a tick marking it as
   subordinate. Three separate signals — position, weight and the marker — so
   the parent/child relationship is unmistakable at a glance. */
.rail-toc .is-sub a {
  position: relative;
  padding-left: 30px; padding-top: 6px; padding-bottom: 6px;
  font-size: var(--t--2); font-weight: 400;
  color: var(--ink-2);
}
.rail-toc .is-sub a::before {
  content: ""; position: absolute;
  left: 14px; top: 50%; width: 8px;
  border-top: 1px solid var(--line-2);
}
.rail-toc .is-sub a[aria-current="true"] { font-weight: 600; }
.rail-toc .is-sub a[aria-current="true"]::before { border-top-color: var(--accent); }

/* A little air before each new top-level section that follows children. */
.rail-toc .is-sub + li:not(.is-sub) { margin-top: 7px; }

/* ---- Rail: category list ---- */

.rail-cats { list-style: none; margin: 0; padding: 0; }
.rail-cats li { border-bottom: 1px solid var(--line); }
.rail-cats li:last-child { border-bottom: 0; }
.rail-cats a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  padding: 9px 2px; font-size: var(--t--1); font-weight: 500;
  text-decoration: none; color: var(--ink-2);
}
.rail-cats a:hover { color: var(--accent); }
.rail-cats small { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; }

/* ---- Rail: post list ---- */

.rail-posts { list-style: none; margin: 0; padding: 0; }
.rail-posts li { padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid var(--line); }
.rail-posts li:last-child { padding-bottom: 0; margin-bottom: 0; border-bottom: 0; }
.rail-posts a {
  display: grid; grid-template-columns: 62px 1fr; gap: 11px; align-items: start;
  text-decoration: none;
}
.rail-posts img {
  width: 62px; aspect-ratio: 1; object-fit: cover;
  border-radius: var(--r-sm); border: 1px solid var(--line);
}
.rail-posts__t {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--t--1); line-height: 1.32; color: var(--ink);
}
.rail-posts a:hover .rail-posts__t { color: var(--accent); }
.rail-posts__m { display: block; margin-top: 3px; font-size: var(--t--2); color: var(--ink-3); }

/* ---- Rail: tag cloud ---- */

.rail-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.rail-tags a {
  display: inline-block; padding: 5px 10px;
  border: 1px solid var(--line); border-radius: var(--r-pill);
  background: var(--surface);
  font-size: var(--t--2); color: var(--ink-2); text-decoration: none;
}
.rail-tags a:hover { border-color: var(--accent); color: var(--accent); }

/* ---- Rail: inline CTA ---- */

.rail-cta {
  padding: 18px; border-radius: var(--r);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
}
.rail-cta h3 { font-size: var(--t-0); margin-bottom: 5px; }
.rail-cta p { font-size: var(--t--2); color: var(--ink-2); margin: 0 0 12px; }

/* --------------------------------------------------------------------------
   7. Name row — the atom of this site
   --------------------------------------------------------------------------
   Semantics first: name, then meaning, then origin. Actions sit right so the
   scanning eye runs down the names column uninterrupted. Actions fade in on
   hover for pointer users but remain permanently visible on touch, where
   there is no hover to reveal them.
   -------------------------------------------------------------------------- */

.name-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 4px 14px;
  padding: 13px 4px; margin-inline: -4px;
  border-radius: var(--r-sm);
}
.name-row:hover { background: var(--surface-2); }
.name-row[hidden] { display: none; }

.name-row__name {
  grid-column: 1; margin: 0;
  font-family: var(--font-display);
  font-size: var(--t-1); font-weight: 600; letter-spacing: -0.01em;
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
}
.name-row__name a { text-decoration: none; }
.name-row__name a:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.name-row__meta {
  grid-column: 1; margin: 0;
  font-size: var(--t--1); color: var(--ink-2); line-height: 1.45;
}
.name-row__origin { color: var(--ink-3); }
.name-row__origin::before { content: "·"; margin: 0 6px; }

.name-row__actions {
  grid-column: 2; grid-row: 1 / span 2;
  display: flex; gap: 3px;
  opacity: 0; transition: opacity .14s;
}
.name-row:hover .name-row__actions,
.name-row:focus-within .name-row__actions { opacity: 1; }
@media (hover: none) { .name-row__actions { opacity: 1; } }

.icon-btn {
  width: 34px; height: 34px; border-radius: var(--r-sm);
  border: 1px solid transparent; background: none;
  color: var(--ink-3); cursor: pointer;
  display: grid; place-items: center;
  transition: color .14s, background .14s, border-color .14s;
}
.icon-btn:hover { color: var(--ink); background: var(--surface); border-color: var(--line); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.icon-btn[aria-pressed="true"] { color: var(--accent); }
.icon-btn[aria-pressed="true"] svg { fill: currentColor; }

.names { list-style: none; margin: 0; padding: 0; }
.names > li { border-bottom: 1px solid var(--line); }
.names > li:first-child { border-top: 1px solid var(--line); }
.names > li[hidden] { display: none; }

.empty { padding: 28px 0; color: var(--ink-3); font-size: var(--t--1); }

/* Sticky filter bar. Offset by the header height so it never hides behind it. */
.filterbar {
  position: sticky; top: var(--header-h); z-index: 30;
  background: color-mix(in srgb, var(--bg) 94%, transparent);
  backdrop-filter: blur(8px);
  padding: 12px 0; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.filterbar__row {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 12px;
}
.filterbar__end { display: flex; align-items: center; gap: 12px; }
.filterbar__count {
  font-size: var(--t--2); color: var(--ink-3);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Form controls. */
.select, .input {
  font: inherit; font-size: var(--t--1); color: var(--ink);
  padding: 8px 12px; border-radius: var(--r-sm);
  border: 1px solid var(--line-2); background: var(--surface);
  max-width: 100%;
}
.select { cursor: pointer; }
.input { width: 100%; }
.select:focus-visible, .input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.updated-note {
  font-size: var(--t--2); color: var(--ink-3);
  border-top: 1px solid var(--line); padding-top: 16px; margin-top: 28px;
}

/* --------------------------------------------------------------------------
   8. Species cards
   -------------------------------------------------------------------------- */

.species-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 860px) { .species-grid { grid-template-columns: 1fr; } }

.species-card {
  display: flex; flex-direction: column;
  padding: 22px 22px 20px;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .18s ease;
}
.species-card:hover { border-color: var(--ink); transform: translateY(-2px); }
.species-card__icon {
  width: 52px; height: 52px; margin-bottom: 16px;
  display: grid; place-items: center; border-radius: var(--r);
  background: var(--accent-soft); color: var(--accent);
}
.species-card--sage   .species-card__icon { background: var(--sage-soft);   color: var(--sage); }
.species-card--indigo .species-card__icon { background: var(--indigo-soft); color: var(--indigo); }
.species-card__icon svg { width: 29px; height: 29px; }
.species-card h3 { margin-bottom: 5px; }
.species-card p { font-size: var(--t--1); color: var(--ink-2); margin: 0 0 16px; }
.species-card__foot {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--t--2); color: var(--ink-3);
}
.species-card__n { font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* --------------------------------------------------------------------------
   9. Two-column lists
   -------------------------------------------------------------------------- */

.cols-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); }
@media (max-width: 860px) { .cols-2 { grid-template-columns: 1fr; gap: 44px; } }

.rank-list { list-style: none; margin: 0; padding: 0; counter-reset: rank; }
.rank-list li { border-bottom: 1px solid var(--line); }
.rank-list li:first-child { border-top: 1px solid var(--line); }
.rank-list a {
  display: grid; grid-template-columns: 26px 1fr auto;
  align-items: baseline; gap: 14px;
  padding: 13px 4px; margin-inline: -4px; border-radius: var(--r-sm);
  text-decoration: none; font-weight: 500;
}
.rank-list a:hover { background: var(--surface-2); color: var(--accent); }
.rank-list a::before {
  counter-increment: rank; content: counter(rank, decimal-leading-zero);
  font-family: var(--font-mono); font-size: var(--t--2);
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.rank-list small { color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* Callout — a secondary CTA block. Tinted rather than outlined so it reads as
   an offer inside the column, not as another list item. */
.callout {
  margin-top: 32px; padding: 22px;
  background: var(--accent-soft);
  border: 1px solid var(--accent-line);
  border-radius: var(--r-lg);
}
.callout h3 { font-size: var(--t-1); margin-bottom: 5px; }
.callout p { font-size: var(--t--1); color: var(--ink-2); margin: 0 0 16px; max-width: 46ch; }
.callout__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.callout__actions .btn--outline { background: var(--surface); }

/* --------------------------------------------------------------------------
   10. Guides
   -------------------------------------------------------------------------- */

.guide-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 34px); }
@media (max-width: 860px) { .guide-grid { grid-template-columns: 1fr; } }

.guide { display: flex; flex-direction: column; }
.guide__kicker {
  font-size: var(--t--2); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 10px;
  padding-top: 14px; border-top: 2px solid var(--ink);
}
.guide h3 { margin-bottom: 8px; }
.guide h3 a { text-decoration: none; }
.guide h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.guide p { font-size: var(--t--1); color: var(--ink-2); margin: 0 0 12px; }
.guide__meta { margin-top: auto; font-size: var(--t--2); color: var(--ink-3); }

/* --------------------------------------------------------------------------
   10b. Blog / latest posts
   --------------------------------------------------------------------------
   One lead post plus a stack of three. The asymmetry gives the newest article
   real weight instead of flattening everything into an identical grid, which
   is what makes most "latest posts" rows forgettable.
   -------------------------------------------------------------------------- */

.post-grid {
  display: grid; grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 52px);
}
@media (max-width: 900px) { .post-grid { grid-template-columns: 1fr; gap: 34px; } }

.post { display: flex; flex-direction: column; min-width: 0; }

.post__media {
  display: block; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--line);
  background: var(--surface-2);
  margin-bottom: 14px;
}
/* height:100% + a ratio on the BOX, rather than `height:auto` on the image.
   With an SVG source, `height:auto` lets the file's own viewBox win and the
   aspect-ratio here is ignored — so the box owns the ratio and the image
   simply fills it. Works identically once these become raster thumbnails. */
.post__media { aspect-ratio: 16 / 9; }
.post__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.post:hover .post__media img { transform: scale(1.03); }

.post__kicker { margin: 0 0 9px; }
.post h3 { font-size: var(--t-1); margin-bottom: 7px; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.post__excerpt { font-size: var(--t--1); color: var(--ink-2); margin: 0 0 10px; }
.post__meta { font-size: var(--t--2); color: var(--ink-3); margin: 0; }

/* The lead gets a larger headline and keeps its excerpt. A wider crop stops
   the image dominating the column — 16:9 is too tall at this width. */
.post--lead h3 { font-size: var(--t-2); }
.post--lead .post__media { margin-bottom: 18px; aspect-ratio: 2 / 1; }

/* The secondary posts: thumbnail left, text right. With three items the list
   naturally matches the lead's height; with fewer, spacing them out beats
   leaving a tall gap under a short stack. */
.post-list { display: grid; gap: 20px; align-content: start; }
.post-list:has(.post:nth-child(2):last-child) { align-content: space-between; gap: 28px; }
.post-list .post {
  display: grid; grid-template-columns: 132px 1fr; gap: 16px; align-items: start;
  padding-bottom: 20px; border-bottom: 1px solid var(--line);
}
.post-list .post:last-child { padding-bottom: 0; border-bottom: 0; }
.post-list .post__media { margin-bottom: 0; }
.post-list .post h3 { font-size: var(--t-0); font-weight: 600; }
.post-list .post__kicker { margin-bottom: 6px; }

@media (max-width: 480px) {
  .post-list .post { grid-template-columns: 96px 1fr; gap: 12px; }
}

/* --------------------------------------------------------------------------
   10c. Generator tool
   -------------------------------------------------------------------------- */

.tool-layout {
  display: grid; grid-template-columns: 310px minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px); align-items: start;
}
@media (max-width: 900px) { .tool-layout { grid-template-columns: 1fr; } }

/* The tool follows its page head directly — the default section padding would
   leave a dead band between the lede and the controls. */
.page-head + .section .tool-layout { margin-top: -12px; }

/* The controls stay in view while the results scroll — on a filtering tool,
   having to scroll back up to change a filter is the main friction point. */
.tool-side { position: sticky; top: calc(var(--header-h) + 16px); }
@media (max-width: 900px) { .tool-side { position: static; } }

.tool-form {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 20px;
}
.tool-form .field { margin-bottom: 16px; }
.tool-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field label, .field legend {
  display: block; padding: 0; margin-bottom: 7px;
  font-size: var(--t--1); font-weight: 600;
}
fieldset.field { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }

.radio-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.radio-chips label { margin: 0; }
.radio-chips input { position: absolute; opacity: 0; width: 0; height: 0; }
.radio-chips span {
  display: inline-flex; align-items: center;
  padding: 7px 13px; border-radius: var(--r-pill);
  border: 1px solid var(--line-2); background: var(--bg);
  font-size: var(--t--1); font-weight: 500; cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
}
.radio-chips label:hover span { border-color: var(--ink); }
.radio-chips input:checked + span {
  background: var(--ink); border-color: var(--ink); color: var(--bg);
}
.radio-chips input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 2px; }

.check {
  display: flex; gap: 10px; align-items: center;
  font-size: var(--t--1); margin-bottom: 18px; cursor: pointer;
}
.check input { width: 17px; height: 17px; flex: none; accent-color: var(--accent); }

.tool-form__actions { display: grid; gap: 8px; }

.tool-bar {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
  margin-bottom: 10px; min-height: 34px;
}
.tool-bar__count { margin: 0; font-size: var(--t--1); color: var(--ink-3); }
.tool-bar__btns { display: flex; flex-wrap: wrap; gap: 7px; }
.tool-bar__btns svg { width: 15px; height: 15px; }

/* --------------------------------------------------------------------------
   11. Trust band
   --------------------------------------------------------------------------
   This is the E-E-A-T surface. Google's quality raters and AI answer engines
   both look for who made this and how. Making it a visible section — not a
   footer link — is a deliberate ranking and citation play.
   -------------------------------------------------------------------------- */

.trust { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(32px, 5vw, 72px); align-items: start; }
@media (max-width: 860px) { .trust { grid-template-columns: 1fr; gap: 36px; } }

.trust__points { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.trust__points li { display: grid; grid-template-columns: 26px 1fr; gap: 14px; align-items: start; }
.trust__points svg { width: 20px; height: 20px; color: var(--accent); margin-top: 3px; }
.trust__points h3 { font-size: var(--t-0); font-family: var(--font-body); font-weight: 600; margin-bottom: 3px; }
.trust__points p { font-size: var(--t--1); color: var(--ink-2); margin: 0; }

.byline-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 22px;
}
.byline-card dl { margin: 0; display: grid; gap: 14px; }
.byline-card dt {
  font-size: var(--t--2); font-weight: 600; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 2px;
}
.byline-card dd { margin: 0; font-size: var(--t--1); color: var(--ink-2); }
.byline-card dd a { color: var(--ink); }

/* --------------------------------------------------------------------------
   12. FAQ
   --------------------------------------------------------------------------
   Native <details> so the answer text is in the DOM on load — collapsed-but-
   present content is indexable and quotable by AI answer engines, which a
   JS-built accordion is not.
   -------------------------------------------------------------------------- */

/* The FAQ block is REQUIRED on every article and list page. It is the single
   highest-value block for AI answer engines and for Google's "People also
   ask": five questions, each answered in a self-contained paragraph that can
   be quoted without the surrounding article.

   <details> is deliberate — the answer text is in the DOM on load, so it is
   indexable even while collapsed. A JS-built accordion is not. */
.faq { max-width: 100%; }
.faq__intro { font-size: var(--t--1); color: var(--ink-3); margin: 0 0 16px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq details:first-of-type { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 18px 2px; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-size: var(--t-1); font-weight: 600;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none;
  width: 11px; height: 11px;
  border-right: 1.8px solid var(--ink-3); border-bottom: 1.8px solid var(--ink-3);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }
.faq summary:hover { color: var(--accent); }
.faq__body { padding: 0 2px 20px; max-width: 68ch; }
.faq__body p { font-size: var(--t-0); color: var(--ink-2); margin: 0 0 0.8em; }
.faq__body p:last-child { margin: 0; }

/* --------------------------------------------------------------------------
   13. Shortlist drawer
   -------------------------------------------------------------------------- */

.drawer-backdrop {
  position: fixed; inset: 0; z-index: 90;
  background: rgb(26 23 21 / 0.42);
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
.drawer-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
  width: min(100%, 380px);
  background: var(--bg); border-left: 1px solid var(--line);
  transform: translateX(101%); transition: transform .26s cubic-bezier(.4, 0, .2, 1);
  display: flex; flex-direction: column;
}
.drawer[data-open="true"] { transform: none; }
.drawer__head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 20px; border-bottom: 1px solid var(--line);
}
.drawer__head h2 { font-size: var(--t-1); margin: 0; }
.drawer__body { flex: 1; overflow-y: auto; padding: 4px 20px; }
.drawer__list { list-style: none; margin: 0; padding: 0; }
.drawer__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 0; border-bottom: 1px solid var(--line);
}
.drawer__list span { font-family: var(--font-display); font-size: var(--t-1); font-weight: 600; }
.drawer__foot { padding: 14px 20px; border-top: 1px solid var(--line); display: flex; gap: 8px; }
.drawer__empty { padding: 28px 0; color: var(--ink-3); font-size: var(--t--1); }

/* --------------------------------------------------------------------------
   14. Toast
   -------------------------------------------------------------------------- */

.toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 130;
  transform: translate(-50%, 16px);
  background: var(--ink); color: var(--bg);
  padding: 11px 20px; border-radius: var(--r);
  font-size: var(--t--1); font-weight: 500;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s;
  box-shadow: 0 10px 30px -10px rgb(26 23 21 / 0.4);
}
.toast[data-show="true"] { opacity: 1; transform: translate(-50%, 0); }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */

.site-footer {
  background: var(--bg-sunk);
  border-top: 1px solid var(--line);
  padding-block: clamp(44px, 6vw, 68px) 26px;
  margin-top: clamp(40px, 6vw, 80px);
}
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 36px 28px; }
@media (max-width: 860px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer__grid { grid-template-columns: 1fr; gap: 28px; } }

.footer__about { max-width: 34ch; font-size: var(--t--1); color: var(--ink-2); margin: 14px 0 0; }
.site-footer h4 {
  font-family: var(--font-body);
  font-size: var(--t--2); font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px;
}
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: 9px; }
.site-footer li a { font-size: var(--t--1); color: var(--ink-2); text-decoration: none; }
.site-footer li a:hover { color: var(--accent); text-decoration: underline; }

.footer__base {
  margin-top: 40px; padding-top: 22px;
  border-top: 1px solid var(--line);
  display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between;
  font-size: var(--t--2); color: var(--ink-3);
}
.footer__base p { margin: 0; max-width: 72ch; }

/* --------------------------------------------------------------------------
   16. Ad slots — reserve height so filling them causes no layout shift (CLS)
   -------------------------------------------------------------------------- */

.ad-slot { min-height: 280px; margin-block: 36px; display: grid; place-items: center; }
.ad-slot:empty { display: none; }

/* --------------------------------------------------------------------------
   17. Motion & print
   -------------------------------------------------------------------------- */

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

@media print {
  .site-header, .site-footer, .drawer, .drawer-backdrop, .ad-slot,
  .name-row__actions, .toast { display: none !important; }
  body { background: #fff; color: #000; }
}

/* --------------------------------------------------------------------------
   18. Additions for the PHP templates
   -------------------------------------------------------------------------- */

/* Article hero image. */
.article-hero { margin: 0 0 28px; }
.article-hero img {
  width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--r); border: 1px solid var(--line);
}

/* Prev/next article navigation. */
.post-nav {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
  margin-top: 40px; padding-top: 26px; border-top: 1px solid var(--line);
}
@media (max-width: 640px) { .post-nav { grid-template-columns: 1fr; } }
.post-nav__link {
  display: grid; gap: 4px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface); text-decoration: none;
}
.post-nav__link:hover { border-color: var(--ink); }
.post-nav__link span {
  font-size: var(--t--2); color: var(--ink-3);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.post-nav__link strong {
  font-family: var(--font-display); font-size: var(--t-0);
  font-weight: 600; line-height: 1.3; color: var(--ink);
}
.post-nav__link--next { text-align: right; }

/* Pagination. */
.pager {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; margin-top: 40px;
}
.pager__state { font-size: var(--t--1); color: var(--ink-3); font-variant-numeric: tabular-nums; }

/* A–Z strip under a letter listing. */
.alpha-nav { margin-top: 36px; padding-top: 26px; border-top: 1px solid var(--line); }
.alpha a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }

/* Textarea shares the .input look. */
textarea.input { min-height: 160px; resize: vertical; font: inherit; line-height: 1.6; }

/* Nav item for the current section. */
.nav__link.is-current { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   19. List cards (sub-hub child lists)
   --------------------------------------------------------------------------
   Why cards and not a ranked list: a sub-hub has 3–12 children with long
   editorial titles. A full-width row puts a 60-character title on a 1180px
   rule, leaving two thirds of the line empty — the page reads as unfinished.

   auto-fill with a minimum track means the same markup handles one child and
   thirty: with three items the grid fills three columns, with one it fills
   one, and no row is ever mostly whitespace.
   -------------------------------------------------------------------------- */

.list-grid {
  display: grid; gap: 12px;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  list-style: none; margin: 0; padding: 0;
}

.list-card {
  display: flex; flex-direction: column;
  height: 100%; overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--r);
  text-decoration: none; color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.list-card:hover { border-color: var(--ink); transform: translateY(-2px); }

/* Thumbnail. The box owns the ratio so an SVG placeholder and a raster
   thumbnail crop identically — with `height:auto` an SVG's own viewBox wins
   and the grid loses its rhythm. */
.list-card__media {
  display: block; aspect-ratio: 16 / 9;
  background: var(--surface-2); border-bottom: 1px solid var(--line);
  overflow: hidden;
}
.list-card__media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .4s ease;
}
.list-card:hover .list-card__media img { transform: scale(1.04); }

.list-card__body {
  display: flex; flex-direction: column; gap: 7px;
  padding: 16px 18px 14px; flex: 1;
}

.list-card__title {
  font-family: var(--font-display);
  font-size: var(--t-1); font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink);
  /* Clamp so one very long title cannot tower over its neighbours. */
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.list-card:hover .list-card__title { color: var(--accent); }

.list-card__excerpt {
  font-size: var(--t--1); line-height: 1.5; color: var(--ink-2);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

.list-card__go {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 18px; padding: 13px 0;
  border-top: 1px solid var(--line);
  font-size: var(--t--2); color: var(--ink-3);
}
.list-card__n { font-variant-numeric: tabular-nums; }
.list-card__go svg { width: 15px; height: 15px; flex: none; transition: transform .18s ease; }
.list-card:hover .list-card__go { color: var(--accent); }
.list-card:hover .list-card__go svg { transform: translateX(3px); }

/* The closing prose block on hub/sub-hub pages shares the page's left edge
   rather than centring. A centred column under a left-aligned header reads as
   two different pages stitched together. */
.section > .read.prose {
  margin-inline: 0;
  padding-inline: var(--gut);
  width: min(100% - (var(--gut) * 2), var(--read));
}
@media (min-width: 1240px) {
  .section > .read.prose {
    padding-inline: 0;
    margin-left: max(var(--gut), calc((100vw - var(--wrap)) / 2));
  }
}

/* --------------------------------------------------------------------------
   20. Closing block (prose + side column)
   --------------------------------------------------------------------------
   The question this answers: should a closing text block run the full
   container width, or leave the right side empty for an ad?

   Neither. Body text at 1180px is hard to read — the eye has to track too far
   and loses the next line — so the prose column stays at a ~68ch measure. But
   leaving the remainder blank wastes the most valuable space on the page.

   So the leftover width carries real content (more internal links, which is
   what this site needs most) with the ad slot BELOW it rather than above:
   content first, advertising second.
   -------------------------------------------------------------------------- */

.closing {
  display: grid;
  grid-template-columns: minmax(0, var(--read)) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}
@media (max-width: 980px) {
  .closing { grid-template-columns: 1fr; gap: 40px; }
}

.closing__main { min-width: 0; }
.closing__main > h2:first-child { margin-top: 0; }

.closing__side { min-width: 0; display: grid; gap: 24px; }
/* Narrower than the prose column, so the page keeps a clear primary axis
   instead of reading as two competing columns. */
@media (min-width: 981px) { .closing__side { max-width: 340px; } }

/* Ad slot in a side column: reserve the standard 300x250 footprint so the
   page does not jump when it fills. */
.ad-slot--rail {
  min-height: 250px; margin: 0;
  border: 1px dashed var(--line-2); border-radius: var(--r);
  background: var(--surface-2);
}
.ad-slot--rail:empty { display: grid; }
.ad-slot--rail:empty::after {
  content: "Advertisement";
  font-size: var(--t--2); color: var(--ink-3);
  letter-spacing: 0.08em; text-transform: uppercase;
}

/* Current page inside a rail link list — so a policy page shows where you are
   rather than looking like every other link in the list. */
.rail-cats a[aria-current="page"] {
  color: var(--accent); font-weight: 600;
}
.rail-cats a[aria-current="page"]::before {
  content: ""; display: inline-block;
  width: 3px; height: 13px; margin-right: 8px;
  background: var(--accent); border-radius: 2px;
  vertical-align: -2px;
}

/* Footer disclaimer. Deliberately quiet but legible — a disclaimer set in
   6px grey is arguably not disclosed at all, which defeats the purpose. */
.footer__disclaimer { max-width: 86ch; line-height: 1.6; }
.footer__disclaimer a { color: var(--ink-2); text-decoration-color: var(--line-2); }
.footer__disclaimer a:hover { color: var(--accent); }