/* ==========================================================================
   Telford Ranked — site.css v1
   Production stylesheet. Built against the html-v1 structure contract; every
   region and class name in that contract is styled here.

   Loads nothing external at runtime except the self-hosted fonts under
   /static/fonts/. All illustration is painted by CSS: the SVGs in
   /static/svg/ supply alpha through mask-image, the --color-art-* tokens
   supply the colour, so the whole art system recolours per band.

   Contents
     1  tokens              (mirror of design/tokens.css — keep in sync)
     2  fonts
     3  reset and base
     4  layout primitives
     5  art system
     6  buttons and links
     7  header, nav, breadcrumbs, footer
     8  home
     9  category
    10  trade and ranking
    11  provider
    12  prose, methodology, rubric
    13  forms
    14  thanks and 404
    15  reduced motion and print
   ========================================================================== */

/* == BEGIN tokens (mirror of design/tokens.css) == */
:root {
  /* ---------------------------------------------------------------- ramps --
     iron    — the Iron Bridge's ORIGINAL red-brown, the colour English
               Heritage restored it to in 2018. The brand colour.
     severn  — the grey-blue the bridge wore for most of the 20th century,
               and the colour of the river gorge in poor light. The ink.
     furnace — Coalbrookdale molten amber. Evidence, scores, rank, focus.
     stone   — gorge limestone, desaturated toward severn so the neutrals
               and the ink belong to the same family. The ground.
     moss    — one green, used only for "verified / registered" status.
     plum    — one violet, used only for visited links.
     ------------------------------------------------------------------------ */

  --iron-950: #2e120a;
  --iron-900: #4a1e10;
  --iron-800: #632916;
  --iron-700: #7e3620;
  --iron-600: #9a452b;
  --iron-500: #b25538;
  --iron-300: #dda08a;
  --iron-100: #f7e2d8;
  --iron-050: #fcf1eb;

  --severn-950: #16242b;
  --severn-900: #1e313a;
  --severn-800: #294250;
  --severn-700: #35566a;
  --severn-600: #446b80;
  --severn-500: #5c8497;
  --severn-300: #9db6c2;
  --severn-200: #c3d3db;
  --severn-100: #dde7ec;
  --severn-050: #eff4f6;

  --furnace-800: #7a4a08;
  --furnace-700: #96590a;
  --furnace-600: #b26c10;
  --furnace-500: #ce8418;
  --furnace-300: #edb558;
  --furnace-100: #fbebcc;
  --furnace-050: #fdf6e8;

  --stone-000: #ffffff;
  --stone-050: #f4f6f7;
  --stone-100: #e9edef;
  --stone-200: #dae0e3;
  --stone-300: #c2cbd0;
  --stone-400: #a2aeb4;
  --stone-500: #7c888e;
  --stone-600: #5e696e;
  --stone-700: #454e52;

  --moss-700: #2f6b4f;
  --plum-700: #5a3c56;

  /* --------------------------------------------------------- semantic ink --
     Contrast ratios (measured, sRGB, WCAG 2.x) are in design-notes.md.
     ------------------------------------------------------------------------ */

  --color-canvas: var(--stone-050);
  --color-surface: var(--stone-000);
  --color-surface-sunken: var(--stone-100);
  --color-surface-brand: var(--iron-050);
  --color-surface-accent: var(--furnace-050);

  --color-text: var(--severn-950);          /* 14.66:1 on canvas */
  --color-text-muted: var(--stone-600);     /*  5.21:1 on canvas */
  --color-text-faint: var(--stone-500);     /*  3.36:1 — non-text / icons only */
  --color-text-inverse: var(--stone-050);
  --color-text-inverse-muted: var(--severn-300);

  --color-brand: var(--iron-700);           /*  7.95:1 on canvas */
  --color-brand-strong: var(--iron-800);
  --color-brand-deep: var(--iron-900);

  --color-link: var(--severn-700);          /*  7.20:1 on canvas */
  --color-link-hover: var(--iron-700);
  --color-link-visited: var(--plum-700);    /*  8.74:1 on canvas */
  --color-link-inverse: var(--severn-100);

  --color-accent: var(--furnace-700);       /*  5.19:1 on canvas */
  --color-accent-bright: var(--furnace-500);

  --color-border: var(--stone-200);
  --color-border-strong: var(--stone-300);
  --color-border-input: var(--stone-500);   /*  3.36:1 — meets 1.4.11 */
  --color-border-inverse: rgba(244, 246, 247, 0.22);

  --color-focus: var(--furnace-700);
  --color-focus-inverse: var(--furnace-300);

  --color-ok: var(--moss-700);              /*  5.81:1 on canvas */
  --color-ok-surface: #e6f1ea;
  --color-warn: var(--furnace-800);         /*  6.89:1 on canvas */
  --color-warn-surface: var(--furnace-100);
  --color-danger: var(--iron-800);          /* 10.42:1 on canvas */
  --color-danger-surface: var(--iron-100);
  --color-neutral: var(--stone-600);
  --color-neutral-surface: var(--stone-100);

  --color-score-track: var(--stone-200);
  --color-score-fill: var(--severn-600);
  --color-score-fill-lead: var(--iron-700);
  --color-rank: var(--iron-700);
  --color-rank-lead: var(--iron-800);

  /* ------------------------------------------------------------------ art --
     Every illustration is painted by CSS: the SVG supplies the alpha through
     mask-image, these tokens supply the colour. Redefine them on a band and
     the whole illustration system recolours — see .band--dark / .band--brand.
     ------------------------------------------------------------------------ */

  --color-art: var(--severn-300);
  --color-art-strong: var(--severn-600);
  --color-art-faint: var(--severn-200);
  --color-art-accent: var(--iron-300);
  --art-opacity: 1;

  /* ----------------------------------------------------------------- type -- */

  --font-display: "IBM Plex Serif", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;

  /* Fluid from 360px to 1280px. Static fallback value is the 360px end. */
  --fs-display: clamp(2.25rem, 1.55rem + 3.1vw, 3.75rem);   /* 36 → 60 */
  --fs-h1: clamp(1.875rem, 1.42rem + 2.03vw, 2.875rem);     /* 30 → 46 */
  --fs-h2: clamp(1.5rem, 1.28rem + 0.98vw, 2rem);           /* 24 → 32 */
  --fs-h3: clamp(1.25rem, 1.14rem + 0.49vw, 1.5rem);        /* 20 → 24 */
  --fs-h4: 1.125rem;                                        /* 18 */
  --fs-lede: clamp(1.0625rem, 0.98rem + 0.37vw, 1.25rem);   /* 17 → 20 */
  --fs-body: 1rem;                                          /* 16 */
  --fs-sm: 0.9375rem;                                       /* 15 */
  --fs-xs: 0.8125rem;                                       /* 13 */
  --fs-overline: 0.75rem;                                   /* 12 */

  --lh-tight: 1.08;
  --lh-snug: 1.24;
  --lh-normal: 1.5;
  --lh-relaxed: 1.65;

  --tr-display: -0.018em;
  --tr-heading: -0.011em;
  --tr-body: 0;
  --tr-overline: 0.12em;

  --measure: 68ch;          /* prose line length */
  --measure-narrow: 46ch;   /* ledes, form help */

  /* --------------------------------------------------------------- space --
     4px base. Every value is a multiple of 4; 24 / 48 / 80 / 128 land on the
     24px vertical rhythm. Nothing in site.css uses a raw length for spacing.
     ------------------------------------------------------------------------ */

  --space-1: 0.25rem;   /*   4 */
  --space-2: 0.5rem;    /*   8 */
  --space-3: 0.75rem;   /*  12 */
  --space-4: 1rem;      /*  16 */
  --space-5: 1.5rem;    /*  24  ← rhythm unit */
  --space-6: 2rem;      /*  32 */
  --space-7: 2.5rem;    /*  40 */
  --space-8: 3rem;      /*  48 */
  --space-9: 4rem;      /*  64 */
  --space-10: 5rem;     /*  80 */
  --space-11: 6.5rem;   /* 104 */
  --space-12: 8rem;     /* 128 */

  --rhythm: var(--space-5);                             /* 24px baseline step */
  --gutter: clamp(1rem, 0.5rem + 2.5vw, 2.5rem);        /* 16 → 40 page inset */
  --section-gap: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);   /* 40 → 80 between sections */
  --band-pad: clamp(2.5rem, 1.5rem + 4.4vw, 5rem);      /* 40 → 80 inside dark bands */
  --card-pad: clamp(1rem, 0.65rem + 1.6vw, 1.5rem);     /* 16 → 24 inside cards */
  --stack-gap: var(--space-5);                          /* default block flow */
  --cluster-gap: var(--space-3);                        /* buttons / chips gap */

  /* the skyline SVG is 1200x220, so its rendered height is 18.34% of its
     width; --skyline-h reserves that plus a little, at every viewport. */
  --skyline-h: clamp(4.5rem, 19vw, 15rem);

  --container: 88rem;         /* 1408 — wider desktop content (owner feedback 2026-09-03) */
  --container-prose: 46rem;   /*  736 */
  --container-form: 34rem;    /*  544 */

  /* -------------------------------------------------------------- shape -- */

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 12px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  --border-hair: 1px;
  --border-thick: 2px;
  --rule-accent: 3px;

  --shadow-sm: 0 1px 2px rgba(22, 36, 43, 0.06), 0 1px 1px rgba(22, 36, 43, 0.04);
  --shadow-md: 0 2px 4px rgba(22, 36, 43, 0.05), 0 8px 20px -6px rgba(22, 36, 43, 0.1);
  --shadow-lg: 0 4px 8px rgba(22, 36, 43, 0.05), 0 18px 40px -12px rgba(22, 36, 43, 0.14);
  --shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.6);

  --focus-ring-width: 3px;
  --focus-ring-offset: 2px;

  /* -------------------------------------------------------------- motion -- */

  --ease: cubic-bezier(0.2, 0.6, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 180ms;

  --z-header: 100;
  --z-skip: 200;
}
/* == END tokens == */


/* ==========================================================================
   2  FONTS — self-hosted IBM Plex, OFL 1.1. See fonts/LICENSE-OFL-1.1.txt.
   No mono family is shipped: numeric columns use font-variant-numeric
   instead, which saves two font files.
   ========================================================================== */

@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/plex-sans-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/plex-sans-500.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Sans";
  src: url("/static/fonts/plex-sans-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/static/fonts/plex-serif-400.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "IBM Plex Serif";
  src: url("/static/fonts/plex-serif-600.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}


/* ==========================================================================
   3  RESET AND BASE
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;          /* decorative art must never scroll the page */
  scroll-behavior: smooth;
  scroll-padding-block-start: var(--space-9);
}

body {
  margin: 0;
  background: var(--color-canvas);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  letter-spacing: var(--tr-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: clip;        /* art bleeds are clipped, never scroll the page */
}

/* One flow rule, one rhythm. Nothing sets a bare top margin anywhere else. */
h1, h2, h3, h4, p, ul, ol, dl, figure, table, blockquote, pre { margin: 0; }
h1 + *, h2 + *, h3 + *, h4 + * { margin-block-start: var(--space-4); }
p + p, p + ul, p + ol, ul + p, ol + p, p + table, p + figure {
  margin-block-start: var(--space-4);
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  letter-spacing: var(--tr-heading);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--tr-display); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); font-family: var(--font-sans); }

a { color: var(--color-link); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:visited { color: var(--color-link-visited); }
a:hover { color: var(--color-link-hover); text-decoration-thickness: 2px; }

strong, b { font-weight: var(--fw-semibold); }
small { font-size: var(--fs-sm); }
abbr[title] { text-decoration: underline dotted; cursor: help; }
img, svg { max-width: 100%; }
img { height: auto; }
hr {
  border: 0; height: var(--border-hair);
  background: var(--color-border);
  margin-block: var(--space-8);
}
ul, ol { padding-inline-start: var(--space-5); }
li + li { margin-block-start: var(--space-2); }
::selection { background: var(--furnace-100); color: var(--severn-950); }

/* One focus treatment for the whole site. */
:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}
.hero :focus-visible,
.band--dark :focus-visible,
.band--brand :focus-visible { outline-color: var(--color-focus-inverse); }

/* PROTOTYPE ONLY: marks a value the template renders from data (e.g.
   {{ editor.name }}). The template slice emits the value and drops .tk. */
.tk {
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--furnace-100);
  color: var(--furnace-800);
  font-family: var(--font-sans);
  font-size: 0.9em;
  font-weight: var(--fw-medium);
  white-space: nowrap;
}

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

.skip-link {
  position: absolute; z-index: var(--z-skip);
  inset-block-start: var(--space-2); inset-inline-start: var(--space-2);
  padding: var(--space-3) var(--space-4);
  background: var(--color-brand); color: var(--stone-000);
  font-weight: var(--fw-semibold); text-decoration: none;
  border-radius: var(--radius-md); box-shadow: var(--shadow-md);
  transform: translateY(calc(-100% - var(--space-4)));
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); color: var(--stone-000); }


/* ==========================================================================
   4  LAYOUT PRIMITIVES
   Every horizontal inset on the site comes from --gutter, so nothing ever
   touches a viewport edge at any width.
   ========================================================================== */

.container,
.site-header > .header-inner,
.site-footer > .footer-inner,
.breadcrumbs > ol,
.page > * > .band-inner {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.page {
  flex: 1 0 auto;
  padding-block-end: var(--space-10);
  position: relative;
  isolation: isolate;
}

/* Vertical rhythm between page sections — the single source of section gaps. */
.page > * { margin-block-start: var(--section-gap); }
.page > .breadcrumbs { margin-block-start: var(--space-5); }
.page > .breadcrumbs + * { margin-block-start: var(--space-6); }
.page > .hero:first-child,
.page > .band:first-child { margin-block-start: 0; }

/* Sections that are not full-bleed bands get the page gutter. */
.page > section:not(.band):not(.hero),
.page > .page-section,
.page > .page-header,
.page > .provider-header,
.page > .form-layout,
.page > .hero > .hero-inner,
.page > nav:not(.breadcrumbs),
.page > .form,
.page > .prose,
.page > .toc,
.page > .sources,
.page > .not-assessed {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.stack > * + * { margin-block-start: var(--stack-gap); }

/* One cluster rule governs every group of buttons, chips and inline links,
   so the gap between two buttons is identical everywhere on the site. */
.cluster,
.hero-actions,
.ranking-card-actions,
.form-actions,
.cta-band-actions,
.cta-change-actions,
.popular-trades-list,
.related-categories-list,
.related-trades-list,
.accreditations,
.provider-contact,
.trade-card-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cluster-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.cluster > li, .popular-trades-list > li, .related-categories-list > li,
.related-trades-list > li, .accreditations > li, .provider-contact > li {
  margin-block-start: 0;
}

.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  margin-block-end: var(--space-5);
}
.section-lede {
  color: var(--color-text-muted);
  max-width: var(--measure);
  margin-block-start: calc(var(--space-5) * -1 + var(--space-2));
  margin-block-end: var(--space-5);
}

.overline {
  display: block;
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-block-end: var(--space-3);
}
.hero .overline, .band--dark .overline, .band--brand .overline { color: var(--furnace-300); }


/* ==========================================================================
   5  ART SYSTEM
   Three mechanisms, one set of tokens.

   (a) MASK  — an SVG in /static/svg/ supplies alpha, --color-art supplies
       paint. Used for the hero skyline band, section-break silhouettes, the
       repeating ironwork texture and category tile art. Because the colour
       comes from a custom property, redefining --color-art on a band
       recolours every illustration inside it.
   (b) INLINE — <svg class="art art--{name}"> from html-v1, for two-tone art
       where the internal opacities matter. Painted by `color`.
   (c) TEXTURE — the same mask, repeated.
   ========================================================================== */

.band {
  position: relative;
  isolation: isolate;
  padding-block: var(--band-pad);
  overflow: hidden;
}
.band > .band-inner { position: relative; z-index: 1; }

.band--sunken { background: var(--color-surface-sunken); }

.band--dark,
.hero {
  background: var(--severn-900);
  color: var(--color-text-inverse);
  --color-art: var(--severn-700);
  --color-art-strong: var(--severn-600);
  --color-art-faint: var(--severn-800);
  --color-art-accent: var(--iron-800);
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--severn-300);
  --color-border: rgba(244, 246, 247, 0.16);
  --color-border-strong: rgba(244, 246, 247, 0.3);
}
.band--brand {
  background: var(--iron-900);
  color: var(--color-text-inverse);
  --color-art: var(--iron-700);
  --color-art-strong: var(--iron-600);
  --color-art-faint: var(--iron-800);
  --color-art-accent: var(--furnace-800);
  --color-text: var(--color-text-inverse);
  --color-text-muted: var(--iron-300);
  --color-border: rgba(252, 241, 235, 0.18);
  --color-border-strong: rgba(252, 241, 235, 0.32);
}
.hero h1, .hero h2, .hero h3, .hero h4,
.band--dark h1, .band--dark h2, .band--dark h3, .band--dark h4,
.band--brand h1, .band--brand h2, .band--brand h3, .band--brand h4 { color: var(--color-text-inverse); }
.hero a:not(.btn),
.band--dark a:not(.btn),
.band--brand a:not(.btn) { color: var(--color-link-inverse); }
.hero a:not(.btn):visited,
.band--dark a:not(.btn):visited,
.band--brand a:not(.btn):visited { color: var(--color-link-inverse); }
.hero a:not(.btn):hover,
.band--dark a:not(.btn):hover,
.band--brand a:not(.btn):hover { color: var(--stone-000); }

/* (a) treatment 1 — hero skyline band ----------------------------------- */
.hero-art {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: 0;
  block-size: var(--skyline-h);
  background-color: var(--color-art);
  -webkit-mask: url("/static/svg/skyline.svg") no-repeat bottom center / 100% auto;
  mask: url("/static/svg/skyline.svg") no-repeat bottom center / 100% auto;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
.hero-art { opacity: 0.55; }

/* (a) treatment 2 — section-break silhouette ---------------------------- */
.art-ridge::before {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline: -5%;
  block-size: clamp(5rem, 12vw, 8.5rem);
  background-color: var(--color-art);
  -webkit-mask: url("/static/svg/wrekin.svg") no-repeat bottom center / 100% 100%;
  mask: url("/static/svg/wrekin.svg") no-repeat bottom center / 100% 100%;
  opacity: 0.4;
  pointer-events: none;
  z-index: 0;
}

/* (c) treatment 3 — repeating ironwork texture -------------------------- */
.art-texture::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color-art);
  -webkit-mask: url("/static/svg/texture-ironwork.svg") repeat top left / 56px 56px;
  mask: url("/static/svg/texture-ironwork.svg") repeat top left / 56px 56px;
  opacity: 0.16;
  pointer-events: none;
  z-index: 0;
}
.band--dark.art-texture::before, .band--brand.art-texture::before { opacity: 0.26; }

/* (a) treatment 4 — low-opacity page watermark -------------------------- */
.page::after {
  content: "";
  position: absolute;
  inset-block-start: clamp(14rem, 30vw, 26rem);
  inset-inline-end: calc(var(--gutter) * -1);
  inline-size: clamp(16rem, 42vw, 34rem);
  aspect-ratio: 320 / 170;
  background-color: var(--color-art-faint);
  -webkit-mask: var(--page-watermark, url("/static/svg/iron-bridge.svg")) no-repeat center / contain;
  mask: var(--page-watermark, url("/static/svg/iron-bridge.svg")) no-repeat center / contain;
  opacity: 0.3;
  pointer-events: none;
  z-index: -1;
}
.page--home::after { --page-watermark: url("/static/svg/tf-postmark.svg"); }
.page--trade::after { --page-watermark: url("/static/svg/furnace.svg"); }
.page--provider::after { --page-watermark: url("/static/svg/tf-postmark.svg"); }
.page--methodology::after { --page-watermark: url("/static/svg/telford-motif.svg"); }
.page--about::after { --page-watermark: url("/static/svg/town-park.svg"); }
.page--category::after { --page-watermark: url("/static/svg/southwater.svg"); }
.page--contact::after,
.page--change-request::after { --page-watermark: url("/static/svg/tram.svg"); }
.page--thanks::after { --page-watermark: url("/static/svg/town-park.svg"); }
.page--notfound::after { --page-watermark: url("/static/svg/wrekin.svg"); }

/* (b) inline art from html-v1 ------------------------------------------ */
.art {
  display: block;
  color: var(--color-art);
  opacity: var(--art-opacity);
  pointer-events: none;
}
/* inline art closing a page header needs the section step, not a zero gap */
.page-header > .art,
.provider-header > .art { margin-block-start: var(--space-6); }
.art--iron-bridge { inline-size: min(100%, 34rem); }
.art--wrekin { inline-size: min(100%, 30rem); }
.art--tf-postmark,
.art--telford-motif { inline-size: clamp(4.5rem, 12vw, 7.5rem); }
.art--tram { inline-size: min(100%, 16rem); }
.art--town-park,
.art--southwater { inline-size: min(100%, 30rem); }

/* a page-closing illustration, centred on the measure */
.page-art { display: flex; justify-content: center; }
.page-art .art { color: var(--color-art-faint); inline-size: min(100%, 26rem); }
.art--furnace,
.art--chimney { inline-size: clamp(4rem, 10vw, 7rem); }


/* ==========================================================================
   6  BUTTONS
   Every button is the same height and the same shape; groups of them are
   spaced by the single --cluster-gap so no two pairs of buttons on the site
   have different gaps.
   ========================================================================== */

.btn {
  --btn-bg: var(--color-brand);
  --btn-fg: var(--stone-000);
  --btn-border: var(--color-brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: 2.875rem;              /* 46px — comfortable tap target */
  padding: var(--space-3) var(--space-5);
  border: var(--border-thick) solid var(--btn-border);
  border-radius: var(--radius-md);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease), transform var(--dur-fast) var(--ease);
}
.btn:visited { color: var(--btn-fg); }
.btn:hover {
  --btn-bg: var(--color-brand-strong);
  --btn-border: var(--color-brand-strong);
  color: var(--btn-fg);
  transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--color-brand);
  --btn-border: var(--color-border-strong);
}
.btn--secondary:hover {
  --btn-bg: var(--color-surface-brand);
  --btn-fg: var(--color-brand-strong);
  --btn-border: var(--color-brand);
}
.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--color-link);
  --btn-border: transparent;
  padding-inline: var(--space-3);
}
.btn--ghost:hover { --btn-bg: var(--color-surface-sunken); --btn-fg: var(--color-link-hover); }
.btn--sm { min-block-size: 2.25rem; padding: var(--space-2) var(--space-4); font-size: var(--fs-xs); }
.btn--block { inline-size: 100%; }

.hero .btn, .band--dark .btn, .band--brand .btn {
  --btn-bg: var(--stone-000);
  --btn-fg: var(--severn-950);
  --btn-border: var(--stone-000);
}
.hero .btn:hover, .band--dark .btn:hover, .band--brand .btn:hover {
  --btn-bg: var(--furnace-100);
  --btn-border: var(--furnace-100);
}
.hero .btn--secondary, .band--dark .btn--secondary, .band--brand .btn--secondary {
  --btn-bg: transparent;
  --btn-fg: var(--stone-050);
  --btn-border: var(--color-border-strong);
}
.hero .btn--secondary:hover, .band--dark .btn--secondary:hover, .band--brand .btn--secondary:hover {
  --btn-bg: rgba(244, 246, 247, 0.12);
  --btn-fg: var(--stone-000);
  --btn-border: var(--stone-050);
}


/* ==========================================================================
   7  HEADER, NAV, BREADCRUMBS, FOOTER
   ========================================================================== */

.site-header {
  position: relative;
  z-index: var(--z-header);
  background: var(--color-surface);
  border-block-end: var(--border-hair) solid var(--color-border);
}
.site-header .header-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  padding-block: var(--space-4);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-inline-end: auto;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-heading);
  color: var(--color-text);
  text-decoration: none;
}
.site-brand:visited { color: var(--color-text); }
.site-brand:hover { color: var(--color-brand); }
.site-brand-mark {
  flex: none;
  inline-size: 2.25rem;
  aspect-ratio: 1;
  background-color: var(--color-brand);
  -webkit-mask: url("/static/svg/tf-postmark.svg") no-repeat center / contain;
  mask: url("/static/svg/tf-postmark.svg") no-repeat center / contain;
}
.site-brand-name { display: flex; flex-direction: column; line-height: 1.1; }
.site-brand-name b { font-weight: var(--fw-semibold); }
.site-brand-name span {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: 0; padding: 0; list-style: none;
}
.site-nav li { margin-block-start: 0; }
.site-nav a {
  display: block;
  padding-block: var(--space-2);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  border-block-end: var(--border-thick) solid transparent;
}
.site-nav a:visited { color: var(--color-text); }
.site-nav a:hover { color: var(--color-brand); border-block-end-color: var(--color-brand); }
.site-nav a[aria-current="page"] { color: var(--color-brand); border-block-end-color: var(--color-brand); }

.site-nav-toggle {
  display: none;                       /* only for narrow viewports, with JS */
  order: 3;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.75rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
}
.site-nav-toggle-bars { display: block; inline-size: 1.125rem; block-size: 2px; background: currentColor;
  box-shadow: 0 5px 0 currentColor, 0 -5px 0 currentColor; }
.site-nav-toggle[aria-expanded="true"] { background: var(--color-surface-sunken); }

.breadcrumbs { font-size: var(--fs-sm); color: var(--color-text-muted); }
.breadcrumbs ol {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-1) var(--space-2);
  list-style: none; margin: 0;
}
.breadcrumbs li { display: flex; align-items: center; gap: var(--space-2); margin-block-start: 0; }
.breadcrumbs li + li::before {
  content: "";
  inline-size: 0.4rem; block-size: 0.4rem;
  border-block-start: 1.5px solid var(--color-border-strong);
  border-inline-end: 1.5px solid var(--color-border-strong);
  transform: rotate(45deg);
  flex: none;
}
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs a:visited { color: var(--color-text-muted); }
.breadcrumbs a:hover { color: var(--color-brand); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: var(--fw-medium); }

.site-footer {
  margin-block-start: var(--section-gap);
  background: var(--severn-950);
  color: var(--color-text-inverse);
  --color-art: var(--severn-800);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.site-footer .footer-inner {
  position: relative; z-index: 1;
  display: grid;
  gap: var(--space-8);
  padding-block: var(--space-9) var(--space-8);
}
.site-footer::before {
  content: "";
  position: absolute; inset-block-end: 0; inset-inline: 0;
  block-size: var(--skyline-h);
  background-color: var(--color-art);
  -webkit-mask: url("/static/svg/skyline.svg") no-repeat bottom center / 100% auto;
  mask: url("/static/svg/skyline.svg") no-repeat bottom center / 100% auto;
  opacity: 0.7; z-index: 0; pointer-events: none;
}
.footer-nav ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3) var(--space-5);
  list-style: none; margin: 0; padding: 0;
}
.footer-nav li { margin-block-start: 0; }
.footer-nav h2 {
  font-size: var(--fs-overline);
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--severn-300);
  margin-block-end: var(--space-4);
}
.site-footer a { color: var(--stone-050); font-size: var(--fs-sm); }
.site-footer a:visited { color: var(--stone-050); }
.site-footer a:hover { color: var(--furnace-300); }
.footer-local {
  display: flex; align-items: center; gap: var(--space-4);
  padding-block: var(--space-5);
  border-block: var(--border-hair) solid rgba(244, 246, 247, 0.16);
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  color: var(--stone-050);
  max-width: var(--measure);
}
.footer-local::before {
  content: "";
  flex: none;
  inline-size: 2.5rem; aspect-ratio: 1;
  background-color: var(--furnace-300);
  -webkit-mask: url("/static/svg/telford-motif.svg") no-repeat center / contain;
  mask: url("/static/svg/telford-motif.svg") no-repeat center / contain;
}
.footer-legal {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-2) var(--space-5);
  font-size: var(--fs-xs);
  color: var(--severn-300);
  list-style: none; margin: 0; padding: 0;
}
.footer-legal li { margin-block-start: 0; }


/* ==========================================================================
   8  HOME
   ========================================================================== */

.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--severn-900);
  color: var(--color-text-inverse);
  --color-art: var(--severn-700);
  --color-art-faint: var(--severn-800);
  padding-block: var(--space-10) 0;
}
.hero > .hero-inner {
  position: relative; z-index: 1;
  padding-block-end: calc(var(--skyline-h) + var(--space-6));
  max-width: var(--container);
}
.hero-title {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--color-text-inverse);
  max-width: 22ch;
  text-wrap: balance;
}
.hero-title em { font-style: normal; color: var(--furnace-300); }
.hero-lede {
  margin-block-start: var(--space-5);
  max-width: 52ch;
  font-size: var(--fs-lede);
  color: var(--severn-100);
}
.hero-actions { margin-block-start: var(--space-7); }
.hero-meta {
  margin-block-start: var(--space-6);
  display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6);
  font-size: var(--fs-sm);
  color: var(--severn-300);
  list-style: none; padding: 0;
}
.hero-meta li { margin-block-start: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.hero-meta b { color: var(--furnace-300); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }

/* page-header — every page except home */
.page-header { max-width: var(--container); }
.page-title { font-size: var(--fs-h1); }
.page-lede {
  margin-block-start: var(--space-5);
  max-width: var(--measure);
  font-size: var(--fs-lede);
  color: var(--color-text-muted);
}
.page-meta {
  margin-block-start: var(--space-5);
  display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair) solid var(--color-border);
  border-inline-start: var(--rule-accent) solid var(--color-accent);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  list-style: none;
}
.page-meta li { margin-block-start: 0; display: flex; align-items: baseline; gap: var(--space-2); }
.page-meta b, .page-meta time { color: var(--color-text); font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.meta-checked b, .meta-count b, .meta-editor b { font-weight: var(--fw-semibold); }

/* category grid */
.category-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-5);
  list-style: none; padding-inline: 0; margin: 0;
}
.category-grid > li { margin-block-start: 0; display: flex; }

.category-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  inline-size: 100%;
  padding: var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    transform var(--dur) var(--ease);
}
.category-card:visited { color: inherit; }
.category-card:hover {
  border-color: var(--color-brand);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: inherit;
}
/* Category tile motif repeats the category's data-owned icon. */
.category-card-motif {
  position: absolute;
  inset-block-end: calc(var(--space-5) * -1);
  inset-inline-end: calc(var(--space-5) * -1);
  inline-size: 9.5rem; block-size: 9.5rem;
  color: var(--color-art);
  opacity: 0.16;
  z-index: -1;
  pointer-events: none;
}
.category-card-motif svg { display: block; inline-size: 100%; block-size: 100%; }

.category-card-icon {
  flex: none;
  inline-size: 2.75rem; block-size: 2.75rem;
  padding: var(--space-2);
  border-radius: var(--radius-md);
  background: var(--color-surface-brand);
  color: var(--color-brand);
}
.category-card-icon svg { display: block; inline-size: 100%; block-size: 100%; }
.category-card-icon--inline {
  inline-size: 1.375rem; block-size: 1.375rem;
  padding: 0;
  background: none;
  border-radius: 0;
  color: inherit;
}
.category-card-title {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-heading);
}
.category-card:hover .category-card-title { color: var(--color-brand); }
.category-card-count {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.category-card-trades {
  margin-block-start: auto;
  padding-block-start: var(--space-3);
  border-block-start: var(--border-hair) solid var(--color-border);
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  list-style: none;
  padding-inline: 0;
}
.category-card-trades li { display: inline; margin-block-start: 0; }
.category-card-trades li + li::before { content: " · "; color: var(--color-border-strong); }

/* popular trades */
.trade-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-block-size: 2.25rem;
  padding: var(--space-2) var(--space-4);
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-decoration: none;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.trade-chip:visited { color: var(--color-text); }
.trade-chip:hover {
  background: var(--color-surface-brand);
  border-color: var(--color-brand);
  color: var(--color-brand);
}
.trade-chip-count {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* how it works */
.how-it-works .steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-6);
  list-style: none; padding-inline: 0; margin: 0;
  counter-reset: step;
}
.step {
  margin-block-start: 0;
  padding-block-start: var(--space-5);
  border-block-start: var(--rule-accent) solid var(--color-border-strong);
  counter-increment: step;
}
.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
  margin-block-end: var(--space-2);
}
.step h3 { font-size: var(--fs-h4); font-family: var(--font-sans); }
.step p { margin-block-start: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-sm); }
.band--dark .step { border-block-start-color: var(--severn-600); }

/* recently checked */
.recently-checked ol { list-style: none; padding-inline: 0; margin: 0; }
.update-item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-border);
  margin-block-start: 0;
  font-size: var(--fs-sm);
}
.update-item:first-child { border-block-start: var(--border-hair) solid var(--color-border); }
.update-item time {
  flex: none;
  inline-size: 7rem;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.update-item a { font-weight: var(--fw-medium); }
.update-item span { color: var(--color-text-muted); }

/* CTA band */
.cta-band { text-align: start; }
.cta-band h2 { font-size: var(--fs-h2); max-width: 30ch; }
.cta-band p {
  margin-block-start: var(--space-4);
  max-width: var(--measure-narrow);
  color: var(--color-text-muted);
  font-size: var(--fs-lede);
}
.cta-band-actions { margin-block-start: var(--space-6); }


/* ==========================================================================
   9  CATEGORY
   ========================================================================== */

.trade-list { display: grid; gap: var(--space-9); }
.trade-group { margin-block-start: 0; }
.trade-group-title {
  font-size: var(--fs-h3);
  padding-block-end: var(--space-3);
  border-block-end: var(--border-thick) solid var(--color-brand);
  margin-block-end: var(--space-5);
}
.trade-group ul {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
  list-style: none; padding-inline: 0; margin: 0;
}
.trade-group ul > li { margin-block-start: 0; display: flex; }

.trade-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  inline-size: 100%;
  padding: var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-inline-start: var(--rule-accent) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.trade-card:visited { color: inherit; }
.trade-card:hover {
  border-color: var(--color-border);
  border-inline-start-color: var(--color-brand);
  box-shadow: var(--shadow-sm);
  color: inherit;
}
.trade-card-title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.trade-card:hover .trade-card-title { color: var(--color-brand); }
.trade-card-meta {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  list-style: none; padding-inline: 0; margin: 0;
}
.trade-card-meta li { margin-block-start: 0; }
.trade-card-meta li + li::before { content: "· "; color: var(--color-border-strong); }
.trade-card--pending { border-inline-start-color: var(--color-border); opacity: 0.85; }
.trade-card--pending .trade-card-title { color: var(--color-text-muted); }

.related-categories .section-title,
.related-trades .section-title { font-size: var(--fs-h3); }


/* ==========================================================================
   10  TRADE AND RANKING
   ========================================================================== */

.toc {
  padding: var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-md);
}
.toc h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-3);
}
.toc ol {
  display: flex; flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
  list-style: none; padding-inline: 0; margin: 0;
  font-size: var(--fs-sm);
}
.toc li { margin-block-start: 0; }

.ranking { list-style: none; padding-inline: 0; margin: 0; display: grid; gap: var(--space-6); }
.ranking > li { margin-block-start: 0; }

.ranking-card {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4) var(--space-5);
  padding: var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.ranking-card--lead { border-color: var(--color-brand); box-shadow: var(--shadow-md); }

.ranking-card-rank {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem; block-size: 3.25rem;
  border-radius: var(--radius-md);
  background: var(--color-rank);
  color: var(--stone-000);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.ranking-card--lead .ranking-card-rank { background: var(--color-rank-lead); }
.ranking-card-rank small {
  font-family: var(--font-sans);
  font-size: 0.5625rem;
  font-weight: var(--fw-medium);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  opacity: 0.85;
}
.ranking-card-head { grid-column: 2; grid-row: 1; }
.ranking-card-name { font-size: var(--fs-h3); }
.ranking-card-name a { text-decoration-thickness: 1px; }
.ranking-card-bestfor {
  margin-block-start: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-accent);
}
.ranking-card-body { grid-column: 1 / -1; }
.ranking-card-body > * + * { margin-block-start: var(--space-5); }

.score {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-block: var(--border-hair) solid var(--color-border);
}
.score-value {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}
.score-value small {
  font-family: var(--font-sans);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  color: var(--color-text-muted);
}
/* the bar reads its value from --pct, set inline by the template */
.score-bar {
  position: relative;
  block-size: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-score-track);
  overflow: hidden;
}
.score-bar::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: calc(var(--pct, 0) * 1%);
  background: var(--color-score-fill);
  border-radius: inherit;
}
.ranking-card--lead .score-bar::before { background: var(--color-score-fill-lead); }

.ranking-card-strengths,
.ranking-card-limitations,
.strengths,
.limitations { margin: 0; }
.ranking-card-strengths ul,
.ranking-card-limitations ul,
.strengths ul,
.limitations ul { list-style: none; padding-inline: 0; margin: 0; }
.ranking-card-strengths h4,
.ranking-card-limitations h4,
.strengths h3, .limitations h3 {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-3);
}
.ranking-card-strengths li,
.ranking-card-limitations li,
.strengths li, .limitations li {
  position: relative;
  padding-inline-start: var(--space-6);
  font-size: var(--fs-sm);
  margin-block-start: var(--space-2);
}
.ranking-card-strengths li:first-child,
.ranking-card-limitations li:first-child,
.strengths li:first-child, .limitations li:first-child { margin-block-start: 0; }
.ranking-card-strengths li::before, .strengths li::before {
  content: "";
  position: absolute; inset-inline-start: 0; inset-block-start: 0.45em;
  inline-size: 0.75rem; block-size: 0.4rem;
  border-inline-start: var(--border-thick) solid var(--color-ok);
  border-block-end: var(--border-thick) solid var(--color-ok);
  transform: rotate(-45deg);
}
.ranking-card-limitations li::before, .limitations li::before {
  content: "";
  position: absolute; inset-inline-start: 0.125rem; inset-block-start: 0.62em;
  inline-size: 0.625rem; block-size: 0;
  border-block-start: var(--border-thick) solid var(--color-warn);
}
.ranking-card-detail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: var(--space-5);
}
.ranking-card-actions { margin-block-start: var(--space-5); }

/* also researched */
.also-researched ol, .alternatives ol { list-style: none; padding-inline: 0; margin: 0; }
.provider-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2) var(--space-4);
  padding-block: var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-border);
  margin-block-start: 0;
}
.provider-row:first-child { border-block-start: var(--border-hair) solid var(--color-border); }
.provider-row-name { font-weight: var(--fw-medium); margin-inline-end: auto; }
.provider-row-score {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}
.provider-row-note { font-size: var(--fs-sm); color: var(--color-text-muted); flex-basis: 100%; }

/* researched, not assessed */
.not-assessed {
  padding: var(--card-pad);
  background: var(--color-neutral-surface);
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--radius-md);
}
.not-assessed .section-title { font-size: var(--fs-h3); }
.not-assessed ul { list-style: none; padding-inline: 0; margin: 0; }
.not-assessed li {
  display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-block-end: var(--border-hair) solid var(--color-border-strong);
  font-size: var(--fs-sm);
  margin-block-start: 0;
}
.not-assessed li:last-child { border-block-end: 0; padding-block-end: 0; }
.not-assessed li b { font-weight: var(--fw-medium); }
.not-assessed li span { color: var(--color-text-muted); }

/* guide sections */
.guide { max-width: var(--measure); }
.guide > section + section { margin-block-start: var(--space-8); }
.guide h2 { font-size: var(--fs-h2); }
.guide h3 { font-size: var(--fs-h3); margin-block-start: var(--space-6); }
.guide p, .guide li { font-size: var(--fs-body); }

/* FAQ */
.faq { max-width: var(--measure); }
.faq-item {
  border-block-end: var(--border-hair) solid var(--color-border);
  background: var(--color-surface);
}
.faq-item:first-of-type { border-block-start: var(--border-hair) solid var(--color-border); }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-4) var(--space-4) 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  list-style: none;
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "";
  flex: none;
  margin-inline-start: auto;
  margin-block-start: 0.35em;
  inline-size: 0.55rem; block-size: 0.55rem;
  border-block-end: var(--border-thick) solid var(--color-brand);
  border-inline-end: var(--border-thick) solid var(--color-brand);
  transform: rotate(45deg);
  transition: transform var(--dur) var(--ease);
}
.faq-item[open] > summary::after { transform: rotate(-135deg); }
.faq-item > summary:hover { color: var(--color-brand); }
.faq-item-body { padding-block-end: var(--space-5); padding-inline-end: var(--space-6); }
.faq-item-body > * + * { margin-block-start: var(--space-4); }

/* sources */
.sources {
  padding-block-start: var(--space-6);
  border-block-start: var(--border-thick) solid var(--color-border-strong);
  max-width: var(--measure);
}
.sources .section-title { font-size: var(--fs-h3); }
.sources ol { padding-inline-start: var(--space-6); font-size: var(--fs-sm); }
.sources li { margin-block-start: var(--space-3); color: var(--color-text-muted); }
.sources li a { overflow-wrap: anywhere; }
.sources-retrieved { color: var(--color-text-faint); font-variant-numeric: tabular-nums; }

/* corrections / claims */
.cta-change {
  padding: var(--space-6) var(--card-pad);
  background: var(--color-surface-accent);
  border: var(--border-hair) solid var(--furnace-300);
  border-radius: var(--radius-lg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.cta-change h2 { font-size: var(--fs-h3); }
.cta-change p {
  margin-block-start: var(--space-3);
  max-width: var(--measure);
  font-size: var(--fs-sm);
  color: var(--severn-800);
}
.cta-change-actions { margin-block-start: var(--space-5); }
.cta-change.art-texture::before { --color-art: var(--furnace-600); opacity: 0.14; }


/* ==========================================================================
   11  PROVIDER
   ========================================================================== */

.provider-header {
  display: grid;
  gap: var(--space-4);
  max-width: var(--container);
}
.provider-name { font-size: var(--fs-h1); }
.provider-trade {
  font-size: var(--fs-lede);
  color: var(--color-text-muted);
}
.provider-trade a { font-weight: var(--fw-medium); }
.provider-status {
  display: inline-flex; align-items: center; gap: var(--space-2);
  align-self: start;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-ok-surface);
  color: var(--color-ok);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
}
.provider-status::before {
  content: ""; inline-size: 0.5rem; block-size: 0.5rem;
  border-radius: 50%; background: currentColor;
}
.provider-status--unknown { background: var(--color-neutral-surface); color: var(--color-neutral); }
.provider-status--closed { background: var(--color-danger-surface); color: var(--color-danger); }
.provider-contact { font-size: var(--fs-sm); }
.provider-contact li { display: flex; align-items: center; gap: var(--space-2); }
.provider-contact li + li::before {
  content: ""; inline-size: 1px; block-size: 1rem; background: var(--color-border-strong);
  margin-inline-end: var(--space-2);
}
.provider-area { font-size: var(--fs-sm); color: var(--color-text-muted); }
.provider-area b { color: var(--color-text); font-weight: var(--fw-medium); }

.verdict {
  padding: var(--space-6) var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-inline-start: var(--rule-accent) solid var(--color-brand);
  border-radius: var(--radius-md);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.verdict h2 {
  font-family: var(--font-sans);
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-block-end: var(--space-4);
}
.verdict p {
  font-family: var(--font-display);
  font-size: var(--fs-lede);
  line-height: var(--lh-normal);
  max-width: var(--measure);
}

/* score summary */
.score-summary { max-width: var(--container); }
.score-summary-composite {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-4);
  padding: var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  border-block-end: 0;
}
.score-summary-composite dt {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-inline-end: auto;
}
.score-summary-composite dd {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}
.score-summary-composite dd small {
  font-family: var(--font-sans); font-size: var(--fs-sm);
  font-weight: var(--fw-regular); color: var(--color-text-muted);
}
.score-summary-rows {
  border: var(--border-hair) solid var(--color-border);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}
.score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2) var(--space-4);
  padding: var(--space-4) var(--card-pad);
  border-block-start: var(--border-hair) solid var(--color-border);
}
.score-row:first-child { border-block-start: 0; }
.score-row-name { font-weight: var(--fw-medium); font-size: var(--fs-sm); }
.score-row-name small {
  display: block;
  font-weight: var(--fw-regular);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}
.score-row-value {
  grid-column: 2; grid-row: 1;
  display: flex; align-items: center; gap: var(--space-3);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.score-row-value .score-bar { inline-size: 6rem; }
.score-row-note {
  grid-column: 1 / -1;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  max-width: var(--measure);
}
/* insufficient evidence is a state of its own — never a low mark */
.score-row--insufficient { background: var(--color-neutral-surface); }
.score-row--insufficient .score-row-value {
  color: var(--color-neutral);
  font-weight: var(--fw-medium);
  font-style: italic;
}
.score-row--insufficient .score-row-value .score-bar { display: none; }
.score-row--insufficient .score-row-name::after {
  content: "";
  display: inline-block;
  inline-size: 1.5rem;
  margin-inline-start: var(--space-2);
  border-block-start: var(--border-thick) dashed var(--color-neutral);
  vertical-align: 0.25em;
}
.score-row--insufficient .score-row-note { color: var(--color-neutral); }

/* evidence table */
/* Wide tables scroll inside their own box rather than the page. The
   prototypes put tabindex="0" on these wrappers so the scroll region is
   keyboard-reachable; the template slice must keep that attribute. */
.evidence-table { max-width: var(--container); overflow-x: auto; }
.evidence-table table {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--color-surface);
}
.evidence-table caption,
.rubric-table caption {
  text-align: start;
  font-size: var(--fs-sm);
  color: var(--color-text-muted);
  padding-block-end: var(--space-3);
}
.evidence-table th, .evidence-table td,
.rubric-table th, .rubric-table td {
  text-align: start;
  padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-border);
  vertical-align: top;
}
.evidence-table thead th, .rubric-table thead th {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-surface-sunken);
  border-block-end: var(--border-thick) solid var(--color-border-strong);
  white-space: nowrap;
}
.evidence-table tbody th { font-weight: var(--fw-medium); }
.evidence-table td time, .rubric-table td { font-variant-numeric: tabular-nums; }
.evidence-table tbody tr:last-child th,
.evidence-table tbody tr:last-child td { border-block-end: 0; }
.evidence-basis {
  display: inline-block;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  white-space: nowrap;
}

/* accreditations */
.accreditation {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair) solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  font-size: var(--fs-sm);
}
.accreditation-scheme { font-weight: var(--fw-semibold); }
.accreditation-state {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  background: var(--color-ok-surface);
  color: var(--color-ok);
}
.accreditation--registered .accreditation-state { background: var(--color-ok-surface); color: var(--color-ok); }
.accreditation--lapsed .accreditation-state { background: var(--color-warn-surface); color: var(--color-warn); }
.accreditation--not-found .accreditation-state { background: var(--color-neutral-surface); color: var(--color-neutral); }
.accreditation-checked {
  color: var(--color-text-muted);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}

/* external ratings — attributed, never aggregated into our own score */
.external-ratings { max-width: var(--measure); }
.external-ratings ul { list-style: none; padding-inline: 0; margin: 0; }
.external-rating {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2) var(--space-3);
  padding-block: var(--space-3);
  border-block-end: var(--border-hair) solid var(--color-border);
  font-size: var(--fs-sm);
  margin-block-start: 0;
}
.external-rating:first-child { border-block-start: var(--border-hair) solid var(--color-border); }
.external-rating-source { font-weight: var(--fw-medium); min-inline-size: 7rem; }
.external-rating-value {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--color-accent);
}
.external-rating-scale, .external-rating-date { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.external-rating-note {
  flex-basis: 100%;
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
}

.first-hand, .right-of-reply {
  padding: var(--space-6) var(--card-pad);
  border-radius: var(--radius-md);
  border: var(--border-hair) solid var(--color-border);
  background: var(--color-surface);
  max-width: var(--container);
}
.first-hand { border-inline-start: var(--rule-accent) solid var(--color-accent); }
.right-of-reply { border-inline-start: var(--rule-accent) solid var(--severn-500); background: var(--color-surface-sunken); }
.first-hand h2, .right-of-reply h2 { font-size: var(--fs-h3); }
.first-hand dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-4);
  margin-block-start: var(--space-5);
}
.first-hand dt {
  font-size: var(--fs-overline);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tr-overline);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.first-hand dd {
  margin: var(--space-2) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  font-variant-numeric: tabular-nums;
}
.right-of-reply blockquote {
  margin-block-start: var(--space-4);
  padding-inline-start: var(--space-5);
  border-inline-start: var(--border-thick) solid var(--color-border-strong);
  font-family: var(--font-display);
  color: var(--color-text);
  max-width: var(--measure);
}
.right-of-reply cite {
  display: block;
  margin-block-start: var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--fs-sm);
  font-style: normal;
  color: var(--color-text-muted);
}

.review-list {
  display: grid;
  gap: var(--space-5);
}
.review-card {
  display: grid;
  gap: var(--space-3);
  padding: var(--card-pad);
  border: var(--border-hair) solid var(--color-border);
  border-inline-start: var(--rule-accent) solid var(--iron-700);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
.review-card > * { margin-block-start: 0; }
.review-card h3 { font-size: var(--fs-h4); }
.review-card blockquote { margin: 0; max-width: var(--measure); }
.review-rating {
  display: flex;
  gap: var(--space-1);
  color: var(--color-accent);
  font-size: var(--fs-h4);
  line-height: 1;
}
.review-rating-empty { color: var(--color-text-faint); }
.review-work-date, .review-byline { color: var(--color-text-muted); font-size: var(--fs-sm); }
.review-byline { font-weight: var(--fw-semibold); color: var(--color-text); }
.review-verified {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--color-ok);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}
.review-verified::before { content: "\2713"; }
.reviews-empty {
  padding: var(--space-5) var(--card-pad);
  border-inline-start: var(--rule-accent) solid var(--severn-500);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  color: var(--color-text-muted);
}
.review-form .form { margin-inline: 0; }


/* ==========================================================================
   12  PROSE, METHODOLOGY, RUBRIC
   ========================================================================== */

.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--space-5); }
.prose h2 { font-size: var(--fs-h2); margin-block-start: var(--space-8); }
.prose h3 { font-size: var(--fs-h3); margin-block-start: var(--space-6); }
.prose > *:first-child { margin-block-start: 0; }
.prose ul, .prose ol { padding-inline-start: var(--space-6); }
.prose blockquote {
  padding: var(--space-4) var(--space-5);
  border-inline-start: var(--rule-accent) solid var(--color-accent);
  background: var(--color-surface-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font-family: var(--font-display);
}
.prose table { inline-size: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.prose th, .prose td {
  text-align: start; padding: var(--space-3) var(--space-4);
  border-block-end: var(--border-hair) solid var(--color-border);
}
.prose figure { padding: 0; }
.prose figcaption { margin-block-start: var(--space-3); font-size: var(--fs-sm); color: var(--color-text-muted); }

.rubric-table { max-width: var(--container); overflow-x: auto; }
.rubric-table table {
  inline-size: 100%; border-collapse: collapse;
  font-size: var(--fs-sm); background: var(--color-surface);
}
.rubric-table td:last-child, .rubric-table th:last-child { text-align: end; white-space: nowrap; }
.rubric-table tfoot th, .rubric-table tfoot td {
  font-weight: var(--fw-semibold);
  border-block-start: var(--border-thick) solid var(--color-border-strong);
  border-block-end: 0;
}
.rubric-version {
  display: inline-flex; align-items: center; gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-surface-sunken);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.editor-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5);
  padding: var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  max-width: var(--measure);
}
.editor-card-mark {
  flex: none;
  inline-size: 4.5rem; aspect-ratio: 1;
  background-color: var(--color-brand);
  -webkit-mask: url("/static/svg/telford-motif.svg") no-repeat center / contain;
  mask: url("/static/svg/telford-motif.svg") no-repeat center / contain;
}
.editor-card-body { flex: 1 1 16rem; }
.editor-card-body h3 { font-size: var(--fs-h4); }
.editor-card-body p { margin-block-start: var(--space-2); font-size: var(--fs-sm); color: var(--color-text-muted); }


/* ==========================================================================
   13  FORMS
   ========================================================================== */

.form {
  max-width: var(--container-form);
  padding: var(--space-6) var(--card-pad) var(--space-7);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.form > * + * { margin-block-start: var(--space-5); }
.form fieldset { border: 0; padding: 0; margin: 0; }
/* fieldsets carry their own flow: without this, consecutive .form-field
   siblings inside a fieldset get no gap at all. */
.form fieldset > * + * { margin-block-start: var(--space-5); }
.form legend {
  padding: 0;
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  /* no margin of its own: `.form fieldset > * + *` already supplies the
     24px step, and adding to it made legend->field 40px against a 24px
     field-to-field rhythm. */
}

.form-field { display: grid; gap: var(--space-2); }
.form-field > label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}
.form-field > label .req { color: var(--color-brand); }
.form-field-help {
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  max-width: var(--measure-narrow);
}
.form-field input[type="text"],
.form-field input[type="email"],
.form-field input[type="tel"],
.form-field input[type="url"],
.form-field input[type="number"],
.form-field input[type="month"],
.form-field input[type="file"],
.form-field select,
.form-field textarea {
  inline-size: 100%;
  min-block-size: 2.875rem;
  padding: var(--space-3) var(--space-4);
  border: var(--border-hair) solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: var(--fs-body);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.form-field textarea { min-block-size: 9rem; resize: vertical; line-height: var(--lh-normal); }
.form-field select {
  appearance: none;
  padding-inline-end: var(--space-8);
  background-image: linear-gradient(45deg, transparent 49%, var(--color-text-muted) 50%),
    linear-gradient(-45deg, transparent 49%, var(--color-text-muted) 50%);
  background-size: 0.4rem 0.4rem, 0.4rem 0.4rem;
  background-position: right var(--space-5) center, right calc(var(--space-5) + 0.35rem) center;
  background-repeat: no-repeat;
}
.form-field :is(input, select, textarea):hover { border-color: var(--color-text-muted); }
.form-field :is(input, select, textarea):focus {
  border-color: var(--color-brand);
  box-shadow: 0 0 0 1px var(--color-brand);
  outline-offset: var(--focus-ring-offset);
}
.form-field :is(input, textarea)::placeholder { color: var(--color-text-faint); }
.form-field input[type="file"] { padding: var(--space-2) var(--space-3); }
.review-consent > label {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-weight: var(--fw-regular);
}
.review-consent input { flex: none; inline-size: 1.125rem; block-size: 1.125rem; margin-block-start: var(--space-1); }

/* honeypot — off-screen, never display:none, so bots still see it */
.form-field--hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.form-field--invalid > label { color: var(--color-danger); }
.form-field--invalid :is(input, select, textarea) {
  border-color: var(--color-danger);
  box-shadow: 0 0 0 1px var(--color-danger);
}
.form-field-error {
  display: flex; align-items: flex-start; gap: var(--space-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--color-danger);
}
.form-field-error[hidden] { display: none; }
.form-field-error::before { content: "\2717"; font-weight: var(--fw-semibold); }

.form-error {
  display: flex; gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-danger-surface);
  border: var(--border-hair) solid var(--iron-300);
  border-inline-start: var(--rule-accent) solid var(--color-danger);
  border-radius: var(--radius-md);
  color: var(--iron-950);
  font-size: var(--fs-sm);
}
.form-error[hidden] { display: none; }
.review-form:target .form-error[hidden] { display: flex; }
.form-error h2 { font-size: var(--fs-h4); font-family: var(--font-sans); color: var(--color-danger); }
.form-error ul { margin-block-start: var(--space-2); padding-inline-start: var(--space-5); }

.turnstile {
  min-block-size: 4.125rem;
  display: flex; align-items: center; justify-content: center;
  padding: var(--space-4);
  border: var(--border-hair) dashed var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface-sunken);
  font-size: var(--fs-xs);
  color: var(--color-text-muted);
  text-align: center;
}
.form-actions {
  margin-block-start: var(--space-6);
  padding-block-start: var(--space-5);
  border-block-start: var(--border-hair) solid var(--color-border);
}
.form-note { font-size: var(--fs-xs); color: var(--color-text-muted); max-width: var(--measure-narrow); }
.form-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--space-8);
  align-items: start;
  max-width: var(--container);
}
.form-aside {
  padding: var(--card-pad);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-lg);
  font-size: var(--fs-sm);
}
.form-aside h2 { font-size: var(--fs-h4); font-family: var(--font-sans); }
.form-aside > * + * { margin-block-start: var(--space-4); }
.form-aside ul { padding-inline-start: var(--space-5); color: var(--color-text-muted); }
.form-aside h2:not(:first-child) { margin-block-start: var(--space-5); }
.form-aside p { color: var(--color-text-muted); }
.form-aside ol { padding-inline-start: var(--space-5); color: var(--color-text-muted); }
.form-aside ol li { margin-block-start: var(--space-3); }
.form-aside ol li strong { color: var(--color-text); }


/* ==========================================================================
   14  THANKS AND 404
   ========================================================================== */

.notice {
  display: grid;
  gap: var(--space-5);
  justify-items: start;
  max-width: var(--measure);
  padding: var(--space-8) var(--card-pad);
  background: var(--color-surface);
  border: var(--border-hair) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.notice-mark {
  inline-size: 4rem; aspect-ratio: 1;
  background-color: var(--color-ok);
  -webkit-mask: url("/static/svg/tf-postmark.svg") no-repeat center / contain;
  mask: url("/static/svg/tf-postmark.svg") no-repeat center / contain;
}
.notice h1 { font-size: var(--fs-h2); }
.notice p { color: var(--color-text-muted); }
.notice p:first-of-type { color: var(--color-text); font-size: var(--fs-lede); }
.notice-code {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--color-brand);
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   15  RESPONSIVE
   Breakpoints match the review widths: 360 / 768 / 1280.
   ========================================================================== */

/* ≥ 768px */
@media (min-width: 48em) {
  .site-header .header-inner { padding-block: var(--space-5); }
  .site-brand { font-size: 1.375rem; }
  .hero > .hero-inner { padding-block: var(--space-5) calc(var(--skyline-h) + var(--space-8)); }
  .ranking-card { grid-template-columns: 4rem 1fr; padding: var(--space-6); }
  .ranking-card-rank { inline-size: 4rem; block-size: 4rem; font-size: 1.625rem; }
  .ranking-card-body { grid-column: 2; }
  .score { grid-template-columns: 8rem 1fr; }
  .cta-band .band-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; }
  .cta-band-actions { margin-block-start: 0; }
  .notice { padding: var(--space-9) var(--space-8); }
  .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* < 768px */
@media (max-width: 47.99em) {
  /* mobile disclosure nav — only offered when the toggle can be scripted */
  html.js .site-nav-toggle { display: inline-flex; }
  html.js .site-header .header-inner { flex-wrap: wrap; }
  html.js .site-nav {
    order: 4;
    flex-basis: 100%;
    display: none;
    margin-block-start: var(--space-4);
    padding-block-start: var(--space-4);
    border-block-start: var(--border-hair) solid var(--color-border);
  }
  html.js .site-nav-toggle[aria-expanded="true"] ~ .site-nav { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav li + li { border-block-start: var(--border-hair) solid var(--color-border); }
  .site-nav a { padding-block: var(--space-4); border-block-end: 0; border-inline-start: var(--rule-accent) solid transparent; padding-inline-start: var(--space-3); }
  .site-nav a:hover, .site-nav a[aria-current="page"] { border-inline-start-color: var(--color-brand); background: var(--color-surface-sunken); }

  .form-layout { grid-template-columns: minmax(0, 1fr); }
  .form { padding-inline: var(--space-4); }
  .update-item time { inline-size: auto; }
  .hero-actions .btn, .cta-band-actions .btn, .form-actions .btn { flex: 1 1 12rem; }
  .page::after { opacity: 0.18; }
}

/* ≥ 1280px */
@media (min-width: 80em) {
  .page > * { margin-block-start: var(--space-10); }
  .trade-list { gap: var(--space-10); }
  .ranking { gap: var(--space-7); }
  .ranking-card-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ==========================================================================
   16  REDUCED MOTION AND PRINT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .category-card:hover { transform: none; }
}

@media print {
  :root {
    --color-canvas: #fff;
    --color-surface: #fff;
    --color-surface-sunken: #fff;
    --color-text: #000;
    --color-text-muted: #333;
    --gutter: 0;
    --section-gap: 1.25rem;
    --band-pad: 1rem;
  }
  body { background: #fff; color: #000; font-size: 11pt; }
  .skip-link, .site-nav, .site-nav-toggle, .toc,
  .hero-art, .cta-band, .cta-change, .site-footer::before { display: none !important; }
  .page::after, .art-ridge::before, .art-texture::before,
  .category-card-motif, .site-brand-mark, .footer-local::before { display: none !important; }
  .hero, .band--dark, .band--brand, .site-footer {
    background: #fff !important; color: #000 !important; padding-block: 1rem;
  }
  .hero-title, .band--dark h2, .band--brand h2, .site-footer a { color: #000 !important; }
  .hero > .hero-inner { padding-block-end: 0; }
  a { color: #000; text-decoration: underline; }
  .sources a::after, .external-rating a::after { content: " (" attr(href) ")"; font-size: 9pt; word-break: break-all; }
  .ranking-card, .category-card, .trade-card, .verdict, .first-hand, .right-of-reply, .review-card,
  .faq-item, .notice, .form { break-inside: avoid; box-shadow: none; border: 1px solid #999; }
  h1, h2, h3 { break-after: avoid; }
  .faq-item > summary::after { display: none; }
  .faq-item-body { display: block !important; }
  .score-bar { border: 1px solid #000; }
  .score-bar::before { background: #000 !important; }
}

/* ==========================================================================
   Hero and page-header art: sit the illustration beside the text on wide
   viewports instead of under it, so the band is no taller than its copy.
   (Owner feedback 2026-09-03.)
   ========================================================================== */
@media (min-width: 48em) {
  .hero > .hero-inner {
    padding-block-end: var(--space-10);
    padding-inline-end: calc(46% + var(--gutter));
  }
  /* wide: the Iron Bridge sits beside the copy, filling the right column */
  .hero-art {
    inset-inline: auto var(--gutter);
    inset-block: var(--space-8) var(--space-8);
    inline-size: 38%;
    block-size: auto;
    -webkit-mask: url("/static/svg/iron-bridge.svg") no-repeat right center / contain;
    mask: url("/static/svg/iron-bridge.svg") no-repeat right center / contain;
    background-color: var(--color-art-strong);
    opacity: 0.7;
  }
  .page-header,
  .provider-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
    column-gap: var(--space-8);
    align-items: end;
  }
  .page-header > *:not(.art),
  .provider-header > *:not(.art) { grid-column: 1; }
  .page-header > .art,
  .provider-header > .art {
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: end;
    justify-self: end;
    margin-block-start: 0;
    inline-size: 100%;
  }
}

/* ==========================================================================
   Hero and page-header art: sit the illustration beside the text on wide
   viewports instead of under it, so the band is no taller than its copy.
   (Owner feedback 2026-09-03.)
   ========================================================================== */
@media (min-width: 48em) {
  .hero > .hero-inner {
    padding-block-end: var(--space-10);
    padding-inline-end: calc(46% + var(--gutter));
  }
  /* wide: the Iron Bridge sits beside the copy, filling the right column */
  .hero-art {
    inset-inline: auto var(--gutter);
    inset-block: var(--space-8) var(--space-8);
    inline-size: 38%;
    block-size: auto;
    -webkit-mask: url("/static/svg/iron-bridge.svg") no-repeat right center / contain;
    mask: url("/static/svg/iron-bridge.svg") no-repeat right center / contain;
    background-color: var(--color-art-strong);
    opacity: 0.7;
  }
  .page-header,
  .provider-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(14rem, 22rem);
    column-gap: var(--space-8);
    align-items: end;
  }
  .page-header > *:not(.art),
  .provider-header > *:not(.art) { grid-column: 1; }
  .page-header > .art,
  .provider-header > .art {
    grid-column: 2;
    grid-row: 1 / span 8;
    align-self: end;
    justify-self: end;
    margin-block-start: 0;
    inline-size: 100%;
  }
}