/* trustypetreviews.com · design system v2 · "clean paper and petrol ink"
   Implemented 2026-08-11 from the claude.ai/design spec (TrustyPet Design System v2).
   Fonts self-hosted variable woff2; zero third-party requests. */

/* ---------- fonts ---------- */
@font-face {
  font-family: "Schibsted Grotesk";
  src: url("/assets/fonts/schibsted-grotesk-var.woff2") format("woff2");
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-var.woff2") format("woff2");
  font-weight: 100 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/assets/fonts/ibm-plex-sans-italic-var.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* metric fallbacks so swap does not shift layout */
@font-face {
  font-family: "Schibsted Grotesk Fallback";
  src: local("Arial Bold"), local("Arial");
  size-adjust: 99%;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans Fallback";
  src: local("Arial");
  size-adjust: 100.5%;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  /* primitives: grey */
  --grey-50: #FAFAF8;  --grey-100: #F3F4F2; --grey-200: #E8E9EA;
  --grey-300: #D6D9DB; --grey-400: #AEB3B8; --grey-500: #83898F;
  --grey-600: #6A7076; --grey-700: #555B63; --grey-800: #33373C;
  --grey-900: #17181A; --white: #FFFFFF;
  /* primitives: petrol */
  --petrol-50: #EEF6F8;  --petrol-100: #D7E9EC; --petrol-200: #A9CDD4;
  --petrol-300: #6FAAB5; --petrol-400: #3B8391; --petrol-500: #155E75;
  --petrol-700: #0B3F4F;
  /* primitives: emerald / amber / plum */
  --emerald-100: #E7F6EF; --emerald-300: #A7D9BF; --emerald-500: #047857; --emerald-700: #065F46;
  --amber-100: #FBF0D9;   --amber-300: #E9CD8F;   --amber-500: #8A5A00;   --amber-700: #6F4D00;
  --plum-500: #6D4E8C;

  /* semantic roles */
  --surface-page: var(--grey-50);
  --surface-card: var(--white);
  --surface-alt:  var(--grey-100);
  --ink:          var(--grey-900);
  --ink-body:     var(--grey-800);
  --ink-soft:     var(--grey-700);
  --rule:         var(--grey-200);
  --rule-strong:  var(--grey-300);
  --link:         var(--petrol-500);
  --link-visited: var(--plum-500);
  --focus-ring:   var(--petrol-500);

  /* status */
  --status-verified-text: var(--emerald-700); --status-verified-fill: var(--emerald-100);
  --status-verified-ink: var(--emerald-500);
  --status-claim-text: var(--amber-700); --status-claim-fill: var(--amber-100);
  --status-claim-ink: var(--amber-500);
  --status-absence-text: var(--grey-800); --status-absence-fill: #EFF1F3;
  --status-notread-text: #4B5158; --status-notread-stroke: var(--grey-400);

  /* figures */
  --fig-bg: #F6F7F8; --fig-zebra: #F0F2F3;

  /* space · radii · borders · shadows */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px;
  --radius-1: 8px; --radius-2: 12px; --radius-3: 16px; --radius-pill: 999px;
  --bw-hair: 1px;
  --shadow-1: 0 1px 2px rgba(16,24,32,.04);
  --shadow-2: 0 1px 2px rgba(16,24,32,.04), 0 8px 24px rgba(16,24,32,.06);
  --shadow-3: 0 2px 4px rgba(16,24,32,.05), 0 16px 40px rgba(16,24,32,.09);

  /* legacy aliases: inline style blocks on existing pages reference these */
  --accent: var(--petrol-500);
  --accent-soft: var(--petrol-50);
  --line: var(--rule);
  --bg: var(--surface-page);
  --bg-alt: var(--surface-alt);

  --font-display: "Schibsted Grotesk", "Schibsted Grotesk Fallback", "Helvetica Neue", Arial, sans-serif;
  --font-body: "IBM Plex Sans", "IBM Plex Sans Fallback", "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
html { background: var(--surface-page); }
body {
  max-width: 46rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  line-height: 1.7;
  color: var(--ink-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
strong { color: var(--ink); font-weight: 600; }
p, ul, ol { margin: 0 0 1rem; }
q { font-style: italic; color: var(--ink); }
::selection { background: var(--petrol-100); }

a { color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: #9CC3CD; }
a:visited { color: var(--link-visited); }
a:hover { color: var(--petrol-700); text-decoration-color: var(--petrol-700); }
:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: 2px; }

/* ---------- headings ---------- */
h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 2.7rem);
  line-height: 1.08;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin: 1.6rem 0 0.6rem;
}
h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.7rem);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 2.6rem 0 0.8rem;
  scroll-margin-top: 1.5rem;
}
h3 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.35rem);
  line-height: 1.25;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin: 1.8rem 0 0.5rem;
}

/* ---------- header ---------- */
header.site {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem 1rem;
  padding: 1.1rem 0 1rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
header.site .logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
header.site .logo::before {
  content: "T";
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  background: var(--petrol-500);
  border-radius: 9px;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
}
header.site .logo:visited { color: var(--ink); }
header.site nav { display: flex; flex-wrap: wrap; gap: 4px; }
header.site nav a {
  color: var(--ink-body);
  text-decoration: none;
  font-size: 0.875rem;
  border-radius: var(--radius-pill);
  padding: 8px 14px;
  margin: 0;
}
header.site nav a:visited { color: var(--ink-body); }
header.site nav a:hover { color: var(--ink); background: var(--surface-alt); }

/* ---------- standfirst · meta lines ---------- */
.subtitle {
  color: var(--ink-soft);
  font-size: 1.1875rem;
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.updated {
  color: var(--ink-soft);
  font-size: 0.875rem;
  line-height: 1.5;
  margin-bottom: 1.4rem;
  font-feature-settings: "tnum";
}
.subtitle + .updated::before,
h1 + .updated::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--status-verified-ink);
  margin-right: 8px;
  vertical-align: 0.12em;
}

/* ---------- verdict capsule · verify box ---------- */
.note {
  background: var(--petrol-50);
  border: 1px solid var(--petrol-200);
  border-radius: var(--radius-3);
  padding: 22px 26px;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink-body);
  margin: 1.4rem 0;
  font-feature-settings: "tnum";
}
.note strong { color: var(--ink); }
/* the verify box always directly follows its h2 */
#verify + .note {
  background: var(--surface-card);
  border-color: var(--emerald-300);
}

/* ---------- jump-link TOC ---------- */
nav[aria-label="Contents"] ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0 0 1.6rem;
}
nav[aria-label="Contents"] li { margin: 0; }
nav[aria-label="Contents"] a {
  display: inline-block;
  text-decoration: none;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
  background: var(--surface-alt);
  border-radius: var(--radius-pill);
  padding: 7px 13px;
}
nav[aria-label="Contents"] a:visited { color: var(--ink); }
nav[aria-label="Contents"] a:hover { background: var(--rule); color: var(--ink); }

/* ---------- tables ---------- */
table {
  border-collapse: collapse;
  width: 100%;
  font-size: 0.9375rem;
  line-height: 1.5;
  font-feature-settings: "tnum";
  margin: 1.2rem 0 1.6rem;
  display: block;
  overflow-x: auto;
}
caption {
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  color: var(--ink-soft);
  padding-bottom: 12px;
}
th, td {
  text-align: left;
  vertical-align: top;
  padding: 11px 16px 11px 0;
  border-bottom: 1px solid var(--rule);
}
th {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--ink-soft);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--rule-strong);
  background: none;
}
tr:nth-child(even) td { background: var(--fig-zebra); }
td { color: var(--ink-body); }

/* ---------- quotes ---------- */
blockquote {
  margin: 1.4rem 0;
  background: var(--fig-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: 20px 24px;
  font-size: 1.125rem;
  line-height: 1.55;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
}
blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 0.875rem;
  font-weight: 400;
  font-style: normal;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}

/* ---------- figures ---------- */
body figure.fig {
  margin: 1.4rem 0;
  background: var(--fig-bg);
  border: 1px solid var(--rule);
  border-radius: var(--radius-2);
  padding: 18px;
}
body figure.fig img {
  width: 100%;
  height: auto;
  display: block;
  border: 0;
  border-radius: 0;
}
body figure.fig figcaption {
  font-size: 0.875rem;
  color: var(--ink-soft);
  line-height: 1.6;
  margin-top: 12px;
  font-feature-settings: "tnum";
}

/* ---------- status chips (phase-2 ready) ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1;
  padding: 5px 11px;
  border-radius: var(--radius-pill);
}
.chip::before { content: ""; width: 6px; height: 6px; border-radius: var(--radius-pill); }
.chip-verified { background: var(--status-verified-fill); color: var(--status-verified-text); }
.chip-verified::before { background: var(--status-verified-ink); }
.chip-claim { background: var(--status-claim-fill); color: var(--status-claim-text); }
.chip-claim::before { background: var(--status-claim-ink); }
.chip-absence { background: var(--status-absence-fill); color: var(--status-absence-text); }
.chip-absence::before { background: var(--grey-600); }
.chip-notread { background: var(--surface-card); color: var(--status-notread-text); border: 1.5px dashed var(--status-notread-stroke); padding: 4px 10px; }
.chip-notread::before { background: none; border: 1.5px solid var(--grey-500); box-sizing: border-box; }

/* ---------- sources ---------- */
.sources {
  font-size: 0.875rem;
  line-height: 1.75;
  color: var(--ink-soft);
  border-top: 1px solid var(--rule);
  margin-top: 2.6rem;
  padding-top: 1.1rem;
  font-feature-settings: "tnum";
}
.sources > p:first-child strong {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.sources ol { padding-left: 1.25rem; }
.sources a { overflow-wrap: anywhere; }

/* ---------- hub cards ---------- */
.card-list { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.card-list li {
  background: var(--surface-card);
  border: 1px solid var(--rule);
  border-radius: var(--radius-3);
  padding: 20px 24px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-1);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.card-list li:hover { border-color: var(--petrol-200); box-shadow: var(--shadow-2); }
.card-list li a {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--link);
  text-decoration: none;
}
.card-list li a:visited { color: var(--link); }
.card-list li a:hover { color: var(--petrol-700); text-decoration: underline; text-decoration-color: #9CC3CD; }
.card-list li p { margin: 0.35rem 0 0; font-size: 0.9375rem; line-height: 1.6; color: var(--ink-body); }

/* ---------- footer ---------- */
footer.site {
  border-top: 1px solid var(--rule-strong);
  margin-top: 3.2rem;
  padding: 1.4rem 0 2.2rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--ink-soft);
}

/* ---------- disclosure banner (dormant · gate 8) ---------- */
.disclosure {
  background: var(--amber-100);
  border: 1px solid var(--amber-300);
  border-radius: var(--radius-2);
  padding: 16px 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
  margin: 1.2rem 0;
}


/* ============ layout.css · phase 2 · grid & page templates ============
   Implemented 2026-08-11 from the claude.ai/design spec
   (TrustyPet Grid and Pages). One grid, five templates, zero JS.
   Pages opt in by carrying main.l-page; body/header/footer rules are
   :has()-scoped so pages not yet migrated keep the phase-1 rendering.
   Deviations from the spec text, by intent: the one TOC nav is targeted
   as nav[aria-label="Contents"] (the nav element is untouched per the
   migration map, so no .toc class exists); wide-end sits at prose-end in
   the 64rem template so a breakout can never run under the rail. */

/* ---------- page frame ---------- */
body:has(> main.l-page),
body:has(> main.l-home) { max-width: none; padding: 0; }

main.l-page {
  display: grid;
  grid-template-columns:
    [full-start] minmax(1.25rem, 1fr)
    [wide-start prose-start] minmax(0, 46rem)
    [prose-end wide-end] minmax(1.25rem, 1fr)
    [full-end];
  row-gap: 0;                      /* blocks keep their own margins */
  padding-top: 2rem;
}
main.l-page > * { grid-column: prose; min-width: 0; }
main.l-page > .l-full { grid-column: full; }      /* FTC banner when active */
main.l-page > .l-breakout { grid-column: wide; }  /* = prose until 80rem */
main.l-page > h1 { margin-top: 0; }

/* Tables never force horizontal page scroll: they scroll inside
   their own frame below 46rem. No edit to the table needed.       */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1.2rem 0 1.6rem; }
.tablewrap > table { display: table; width: 100%; overflow-x: visible; margin: 0; }
th.num, td.num { text-align: right; font-feature-settings: "tnum"; }
.chip { white-space: nowrap; }

/* The ONE nav. In flow (pill row, after the fact line) by default. */
main.l-page > nav[aria-label="Contents"] .rail-facts { display: none; }

/* fact line directly after the TOC: tnum, open leading */
main.l-page > nav[aria-label="Contents"] + p {
  font-size: 0.9375rem;
  line-height: 1.8;
  font-feature-settings: "tnum";
}

/* ---------- ≥ 64rem: the rail docks right ---------- */
@media (min-width: 64rem) {
  main.l-page {
    grid-template-columns:
      [full-start] minmax(2rem, 1fr)
      [wide-start prose-start] minmax(0, 46rem)
      [prose-end wide-end] 3rem
      [rail-start] 16rem
      [rail-end] minmax(2rem, 1fr)
      [full-end];
  }
  /* no TOC → no rail: the reading column simply centers (home, prose, link hubs) */
  main.l-page:not(:has(> nav[aria-label="Contents"])) {
    grid-template-columns:
      [full-start] minmax(2rem, 1fr)
      [wide-start prose-start] minmax(0, 46rem)
      [prose-end wide-end rail-start rail-end] minmax(2rem, 1fr)
      [full-end];
  }
  /* The SAME element leaves the flow and becomes the rail.
     `auto / span 99` starts at its natural row and rides across
     every later content row; surplus implicit rows are 0px tall,
     so the sticky card can travel the whole article. One nav in
     the DOM, two renderings. */
  main.l-page > nav[aria-label="Contents"] {
    grid-column: rail;
    grid-row: auto / span 99;
    align-self: start;
    position: sticky;
    top: 1.5rem;
    background: var(--surface-card);
    border: var(--bw-hair) solid var(--rule);
    border-radius: var(--radius-3);
    padding: 20px 22px;
    box-shadow: var(--shadow-3);          /* sh-3: floating rail only */
  }
  main.l-page > nav[aria-label="Contents"]::before {
    content: "On this page";
    display: block;
    font-family: var(--font-body);
    font-size: 0.7rem; font-weight: 600; line-height: 1;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--ink-soft);
    margin-bottom: 12px;
  }
  main.l-page > nav[aria-label="Contents"] ul { display: grid; gap: 4px; margin: 0; }
  main.l-page > nav[aria-label="Contents"] a {
    display: block;
    background: none;
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--ink-body);
    padding: 7px 12px;
  }
  main.l-page > nav[aria-label="Contents"] a:visited { color: var(--ink-body); }
  main.l-page > nav[aria-label="Contents"] a:hover { background: var(--surface-alt); color: var(--ink); }
  main.l-page > nav[aria-label="Contents"] .rail-facts {  /* fact digest under the links */
    display: block;
    border-top: var(--bw-hair) solid var(--rule);
    margin-top: 14px; padding-top: 14px;
    font-size: 0.8125rem; line-height: 1.75; color: var(--ink-soft);
    font-feature-settings: "tnum";
  }
}

/* ---------- ≥ 80rem: tables & figures break out to 62rem ---------- */
/* The extra 13rem opens LEFT of prose. Prose stays 46rem, the rail
   does not move, breakout rows own their width: no collision with
   the rail, no horizontal scroll, no shift of neighbouring rows.   */
@media (min-width: 80rem) {
  main.l-page {
    grid-template-columns:
      [full-start] minmax(1rem, 1fr)
      [wide-start] minmax(0, 13rem)
      [prose-start] minmax(0, 46rem)
      [prose-end] 3rem
      [rail-start] 16rem
      [rail-end] minmax(1rem, 1fr)
      [full-end];
  }
  main.l-page:not(:has(> nav[aria-label="Contents"])) {
    grid-template-columns:
      [full-start] minmax(1rem, 1fr)
      [wide-start prose-start] minmax(0, 46rem)
      [prose-end wide-end rail-start rail-end] minmax(1rem, 1fr)
      [full-end];
  }
  main.l-page > .l-breakout { grid-column: wide-start / rail-start; } /* 62rem */
  main.l-page:not(:has(> nav[aria-label="Contents"])) > .l-breakout { grid-column: wide; }
}

/* ---------- current section, CSS only ---------- */
/* The rule list is fixed site-wide, generated from every id a TOC
   links to (71 ids, 2026-08-11); no scroll-spy. Degrades silently
   without :has(). */
main.l-page:has(#adequacy:target) nav[aria-label="Contents"] a[href="#adequacy"],
main.l-page:has(#battery:target) nav[aria-label="Contents"] a[href="#battery"],
main.l-page:has(#box:target) nav[aria-label="Contents"] a[href="#box"],
main.l-page:has(#build:target) nav[aria-label="Contents"] a[href="#build"],
main.l-page:has(#buying:target) nav[aria-label="Contents"] a[href="#buying"],
main.l-page:has(#cats:target) nav[aria-label="Contents"] a[href="#cats"],
main.l-page:has(#cautions:target) nav[aria-label="Contents"] a[href="#cautions"],
main.l-page:has(#claim:target) nav[aria-label="Contents"] a[href="#claim"],
main.l-page:has(#claims:target) nav[aria-label="Contents"] a[href="#claims"],
main.l-page:has(#clippers:target) nav[aria-label="Contents"] a[href="#clippers"],
main.l-page:has(#compare:target) nav[aria-label="Contents"] a[href="#compare"],
main.l-page:has(#dcm:target) nav[aria-label="Contents"] a[href="#dcm"],
main.l-page:has(#deshed:target) nav[aria-label="Contents"] a[href="#deshed"],
main.l-page:has(#discrepancy:target) nav[aria-label="Contents"] a[href="#discrepancy"],
main.l-page:has(#electrical:target) nav[aria-label="Contents"] a[href="#electrical"],
main.l-page:has(#extreme:target) nav[aria-label="Contents"] a[href="#extreme"],
main.l-page:has(#faq:target) nav[aria-label="Contents"] a[href="#faq"],
main.l-page:has(#foam:target) nav[aria-label="Contents"] a[href="#foam"],
main.l-page:has(#ga:target) nav[aria-label="Contents"] a[href="#ga"],
main.l-page:has(#grains:target) nav[aria-label="Contents"] a[href="#grains"],
main.l-page:has(#groomer:target) nav[aria-label="Contents"] a[href="#groomer"],
main.l-page:has(#guarantee:target) nav[aria-label="Contents"] a[href="#guarantee"],
main.l-page:has(#inception:target) nav[aria-label="Contents"] a[href="#inception"],
main.l-page:has(#ingredients:target) nav[aria-label="Contents"] a[href="#ingredients"],
main.l-page:has(#label:target) nav[aria-label="Contents"] a[href="#label"],
main.l-page:has(#lifesource:target) nav[aria-label="Contents"] a[href="#lifesource"],
main.l-page:has(#maker:target) nav[aria-label="Contents"] a[href="#maker"],
main.l-page:has(#making:target) nav[aria-label="Contents"] a[href="#making"],
main.l-page:has(#materials:target) nav[aria-label="Contents"] a[href="#materials"],
main.l-page:has(#missing:target) nav[aria-label="Contents"] a[href="#missing"],
main.l-page:has(#modes:target) nav[aria-label="Contents"] a[href="#modes"],
main.l-page:has(#nails:target) nav[aria-label="Contents"] a[href="#nails"],
main.l-page:has(#numbers:target) nav[aria-label="Contents"] a[href="#numbers"],
main.l-page:has(#nutro:target) nav[aria-label="Contents"] a[href="#nutro"],
main.l-page:has(#owners:target) nav[aria-label="Contents"] a[href="#owners"],
main.l-page:has(#pads:target) nav[aria-label="Contents"] a[href="#pads"],
main.l-page:has(#papers:target) nav[aria-label="Contents"] a[href="#papers"],
main.l-page:has(#pounce:target) nav[aria-label="Contents"] a[href="#pounce"],
main.l-page:has(#price:target) nav[aria-label="Contents"] a[href="#price"],
main.l-page:has(#puzzles:target) nav[aria-label="Contents"] a[href="#puzzles"],
main.l-page:has(#readable:target) nav[aria-label="Contents"] a[href="#readable"],
main.l-page:has(#recall:target) nav[aria-label="Contents"] a[href="#recall"],
main.l-page:has(#recalls:target) nav[aria-label="Contents"] a[href="#recalls"],
main.l-page:has(#recipes:target) nav[aria-label="Contents"] a[href="#recipes"],
main.l-page:has(#reformulation:target) nav[aria-label="Contents"] a[href="#reformulation"],
main.l-page:has(#replace:target) nav[aria-label="Contents"] a[href="#replace"],
main.l-page:has(#returns:target) nav[aria-label="Contents"] a[href="#returns"],
main.l-page:has(#reviews:target) nav[aria-label="Contents"] a[href="#reviews"],
main.l-page:has(#rule:target) nav[aria-label="Contents"] a[href="#rule"],
main.l-page:has(#running:target) nav[aria-label="Contents"] a[href="#running"],
main.l-page:has(#safety:target) nav[aria-label="Contents"] a[href="#safety"],
main.l-page:has(#size:target) nav[aria-label="Contents"] a[href="#size"],
main.l-page:has(#sizes:target) nav[aria-label="Contents"] a[href="#sizes"],
main.l-page:has(#sizing:target) nav[aria-label="Contents"] a[href="#sizing"],
main.l-page:has(#slickers:target) nav[aria-label="Contents"] a[href="#slickers"],
main.l-page:has(#specs:target) nav[aria-label="Contents"] a[href="#specs"],
main.l-page:has(#study:target) nav[aria-label="Contents"] a[href="#study"],
main.l-page:has(#stuffing:target) nav[aria-label="Contents"] a[href="#stuffing"],
main.l-page:has(#table:target) nav[aria-label="Contents"] a[href="#table"],
main.l-page:has(#totw:target) nav[aria-label="Contents"] a[href="#totw"],
main.l-page:has(#track:target) nav[aria-label="Contents"] a[href="#track"],
main.l-page:has(#trial:target) nav[aria-label="Contents"] a[href="#trial"],
main.l-page:has(#twisty:target) nav[aria-label="Contents"] a[href="#twisty"],
main.l-page:has(#use:target) nav[aria-label="Contents"] a[href="#use"],
main.l-page:has(#variants:target) nav[aria-label="Contents"] a[href="#variants"],
main.l-page:has(#verify:target) nav[aria-label="Contents"] a[href="#verify"],
main.l-page:has(#verus:target) nav[aria-label="Contents"] a[href="#verus"],
main.l-page:has(#vsclassic:target) nav[aria-label="Contents"] a[href="#vsclassic"],
main.l-page:has(#warnings:target) nav[aria-label="Contents"] a[href="#warnings"],
main.l-page:has(#warranty:target) nav[aria-label="Contents"] a[href="#warranty"],
main.l-page:has(#what:target) nav[aria-label="Contents"] a[href="#what"] {
  background: var(--petrol-50);
  font-weight: 600;
  color: var(--ink);
  border-radius: var(--radius-pill);
}

/* ---------- header · tagline (migrated header carries .bar) ---------- */
header.site:has(> .bar) {
  display: block;
  padding: 0;
  gap: 0;
  margin-bottom: 0;
  background: var(--surface-card);
  border-bottom: var(--bw-hair) solid var(--rule);
}
header.site .bar {
  max-width: 84rem; margin-inline: auto; box-sizing: border-box;
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: 8px 24px; padding: 12px 1.25rem;
}
header.site .bar .logo { margin-right: 0; }
header.site nav a[aria-current="page"] {
  background: var(--petrol-50);
  color: var(--ink);
  font-weight: 600;
}
header.site nav a[aria-current="page"]:visited { color: var(--ink); }
.tagline {
  background: var(--surface-page);
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--ink-soft);
  padding: 10px 1.25rem;
  text-align: center;
}

/* ---------- breadcrumb strip ---------- */
nav.crumbs {
  font-size: 0.8125rem;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
  line-height: 1.7;
  margin: 0 0 1.4rem;
}
nav.crumbs ol { list-style: none; margin: 0; padding: 0; }
nav.crumbs li { display: inline; margin: 0; }
nav.crumbs li + li::before { content: "·"; color: var(--grey-500); margin: 0 7px 0 3px; }
nav.crumbs li[aria-current="page"] { color: var(--ink-body); }

/* ---------- kicker (above the h1) ---------- */
main.l-page > p.kicker {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600; line-height: 1.5;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--petrol-500);
  margin: 0 0 14px;
}

/* ---------- capsule inner structure (p.k kicker row + p.lead) ---------- */
.note p.k {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600; line-height: 1;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--petrol-500);
  margin: 0 0 10px;
}
.note p.k span {
  font-size: 0.8125rem; font-weight: 400; line-height: 1.4;
  letter-spacing: normal; text-transform: none;
  color: var(--ink-soft);
  font-feature-settings: "tnum";
}
.note p.lead {
  font-family: var(--font-display);
  font-feature-settings: normal;  /* Schibsted's tnum widens . , : to digit width */
  font-size: 1.35rem; font-weight: 600;
  line-height: 1.3; letter-spacing: -0.015em;
  color: var(--ink);
  margin: 0 0 10px;
}
.note > p:last-child { margin-bottom: 0; }
#verify + .note p.k { color: var(--emerald-700); }

/* ---------- cards: whole-card click · 2-up directories ---------- */
.card-list li { position: relative; }
.card-list li > a::after { content: ""; position: absolute; inset: 0; }
@media (min-width: 46rem) {
  ul.card-list.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  ul.card-list.two-up li { margin-bottom: 0; }
}

/* ---------- investigation furniture ---------- */
ul.status-list { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: 8px; }
ul.status-list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap;
  border: var(--bw-hair) solid var(--rule);
  border-radius: var(--radius-2);
  padding: 12px 16px;
  background: var(--surface-card);
  font-size: 0.9375rem;
  font-feature-settings: "tnum";
  margin: 0;
}
.note.note--correction {
  background: var(--surface-card);
  border-color: var(--rule);
  border-radius: var(--radius-2);
  font-size: 0.875rem;
  padding: 16px 22px;
}

/* ---------- homepage furniture (T5) ---------- */
ul.legend { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; margin: 0 0 8px; }
ul.legend li { margin: 0; }
p.legend-caption { font-size: 0.8125rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 2rem; }
ul.date-list {
  list-style: none; padding: 0; margin: 0 0 1.6rem;
  border-top: var(--bw-hair) solid var(--rule);
  font-feature-settings: "tnum";
}
ul.date-list li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 12px 0; margin: 0;
  border-bottom: var(--bw-hair) solid var(--rule);
  font-size: 0.9375rem;
}
ul.date-list time { color: var(--ink-soft); font-size: 0.8125rem; white-space: nowrap; }

/* ---------- footer aligns to the prose measure ---------- */
body:has(> main.l-page) footer.site { padding: 1.4rem 1.25rem 2.2rem; }
body:has(> main.l-home) footer.site { padding: 2rem 1.25rem 2.2rem; margin-top: 0; border-top: 0; }
footer.site > * { max-width: 46rem; margin-inline: auto; }

/* ---------- print ---------- */
@media print {
  header.site nav, .tagline, main.l-page > nav[aria-label="Contents"], nav.crumbs, .l-full { display: none; }
  main.l-page { display: block; }
  main.l-page > * { max-width: 46rem; margin-inline: auto; }
  a { color: inherit; text-decoration: none; }
  a[href]::after { content: none; }       /* URLs are not printed */
  table, figure, blockquote, .note { break-inside: avoid; }
}


/* ============ phase 2.1 · refinement layer · 2026-08-11 ============
   Owner order: "modern ... in trend with the last UI/UX wave · review
   and refine". Stays inside "clean paper and petrol ink": no dark mode,
   no JS, no new claims. Everything below is progressive enhancement and
   guarded for prefers-reduced-motion. Shipped as site-v3.css: versioned
   filenames replace CF purges for stylesheets from now on. */

/* --- modern text handling --- */
html { scroll-behavior: smooth; }
h1, h2, h3, .note p.lead { text-wrap: balance; }
p, figcaption, caption { text-wrap: pretty; }
:root { accent-color: var(--petrol-500); }
.sources li::marker { color: var(--grey-500); }

/* --- cross-document view transitions (same-origin crossfade) --- */
@view-transition { navigation: auto; }

/* --- type scale: more display contrast --- */
h1 { font-size: clamp(2.1rem, 1.3rem + 2.8vw, 3.05rem); }
main.l-page > h1 { margin-bottom: 0.75rem; }
main.l-page > p.kicker + h1 { margin-top: 0; }

/* --- homepage hero (the one l-page without a breadcrumb) --- */
ul.legend .chip, ul.legend li.chip { font-size: 0.8125rem; padding: 6px 12px; }
ul.legend li.chip-notread { padding: 5px 11px; }

/* --- micro-motion: pills, cards, rows (hover-capable pointers) --- */
header.site nav a,
nav[aria-label="Contents"] a {
  transition: background-color .15s ease, color .15s ease;
}
.card-list li {
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
@media (hover: hover) {
  .card-list li:hover { transform: translateY(-2px); }
  .card-list li:active { transform: translateY(0); }
  tbody tr { transition: background-color .12s ease; }
  tbody tr:hover td { background: var(--petrol-50); }
}
.card-list li:has(> a:focus-visible) {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
}
.card-list li:has(> a:focus-visible) > a:focus-visible { outline: none; }

/* --- date-list rows echo the card hover language --- */
ul.date-list li { transition: background-color .12s ease; }
@media (hover: hover) {
  ul.date-list li:hover { background: var(--petrol-50); }
}
ul.date-list a { text-decoration-color: transparent; }
ul.date-list a:hover { text-decoration-color: var(--petrol-700); }

/* --- capsule: a touch more presence on wide screens --- */
@media (min-width: 64rem) {
  main.l-page > .note:first-of-type { padding: 24px 28px; }
}

/* --- reduced motion: honor it completely --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .card-list li, header.site nav a, nav[aria-label="Contents"] a,
  tbody tr, ul.date-list li { transition: none; }
  .card-list li:hover { transform: none; }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* --- narrow screens: denser nav pills, calmer wrap --- */
@media (max-width: 30rem) {
  header.site .bar { padding: 10px 1rem; gap: 6px 16px; }
  header.site nav { gap: 3px; }
  header.site nav a { padding: 6px 10px; font-size: 0.8125rem; }
  .tagline { padding: 8px 1rem; }
}


/* ============ phase 2.2 · landing homepage ============
   Owner order: homepage as standard landing sections. Full-width
   alternating bands with contained inner wraps; same tokens, zero JS. */

main.l-home { display: block; }
.band { padding: 3.25rem 1.25rem; }
@media (min-width: 64rem) { .band { padding: 4.5rem 1.25rem; } }
.band > .wrap { max-width: 72rem; margin-inline: auto; }
.band > .wrap--narrow { max-width: 46rem; }
.band--alt { background: var(--surface-card); border-block: var(--bw-hair) solid var(--rule); }
.band h2 { margin-top: 0; }
.band p.kicker {
  font-family: var(--font-body);
  font-size: 0.72rem; font-weight: 600; line-height: 1.5;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--petrol-500);
  margin: 0 0 10px;
}

/* hero */
.band--hero {
  text-align: center;
  padding: 4rem 1.25rem 3.5rem;
  background:
    radial-gradient(70rem 30rem at 50% -10rem,
      #DEEDF0 0%, rgba(222, 237, 240, 0) 75%),
    var(--surface-page);
}
@media (min-width: 64rem) { .band--hero { padding: 5.25rem 1.25rem 4.5rem; } }
.band--hero > .wrap { max-width: 50rem; }
.band--hero h1 {
  font-size: clamp(2.5rem, 1.6rem + 3.8vw, 3.7rem);
  line-height: 1.03;
  letter-spacing: -0.03em;
  margin: 0 0 1.1rem;
}
.band--hero .subtitle {
  font-size: clamp(1.0625rem, 1rem + 0.45vw, 1.25rem);
  line-height: 1.7;
  max-width: 42rem;
  margin: 0 auto 0.4rem;
}
.band--hero .btn-row { justify-content: center; margin-top: 1.8rem; }
.band--hero ul.legend { justify-content: center; margin-top: 2.2rem; }
.band--hero p.legend-caption { margin: 10px 0 0; }

/* buttons */
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--petrol-500); color: var(--white);
  font-weight: 600; font-size: 0.9375rem; line-height: 1;
  padding: 13px 24px; border-radius: var(--radius-pill);
  text-decoration: none;
  box-shadow: var(--shadow-1);
  transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.btn:visited { color: var(--white); }
.btn:hover { background: var(--petrol-700); color: var(--white); transform: translateY(-1px); box-shadow: var(--shadow-2); }
.btn--ghost { background: var(--surface-card); color: var(--ink); border: var(--bw-hair) solid var(--rule-strong); box-shadow: none; }
.btn--ghost:visited { color: var(--ink); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--ink); border-color: var(--grey-400); }

/* method steps */
ul.steps { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: 14px; }
@media (min-width: 46rem) { ul.steps { grid-template-columns: repeat(3, 1fr); } }
ul.steps li {
  margin: 0;
  background: var(--surface-page);
  border: var(--bw-hair) solid var(--rule);
  border-radius: var(--radius-3);
  padding: 22px 24px;
}
ul.steps .n {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--petrol-50); color: var(--petrol-500);
  font-family: var(--font-display); font-weight: 700; font-size: 1.05rem;
  margin-bottom: 12px;
}
ul.steps h3 { margin: 0 0 6px; font-size: 1.1rem; }
ul.steps p { margin: 0; font-size: 0.9375rem; line-height: 1.65; color: var(--ink-soft); }

/* three-up card grids */
@media (min-width: 46rem) {
  ul.card-list.three-up { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  ul.card-list.three-up li { margin-bottom: 0; }
}
@media (min-width: 64rem) {
  ul.card-list.three-up { grid-template-columns: repeat(3, 1fr); }
}

/* promise band */
.band--ink {
  background: linear-gradient(180deg, #0E4557 0%, var(--petrol-700) 100%);
  color: #DCEBEF;
  text-align: center;
}
.band--ink h2 { color: var(--white); }
.band--ink p.kicker { color: var(--petrol-200); }
.band--ink p { font-size: 1.0625rem; line-height: 1.75; }
.band--ink a { color: var(--white); text-decoration-color: rgba(255, 255, 255, .45); }
.band--ink a:visited { color: var(--white); }
.band--ink a:hover { color: var(--white); text-decoration-color: var(--white); }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
  .btn:hover { transform: none; }
}