/* ==========================================================================
   Fairford Community Alliance
   Design tokens first, then layout, then components.
   Neutrals are warm (Cotswold limestone). No pure black or white anywhere.
   ========================================================================== */

:root {
  /* --- Colour ------------------------------------------------------------
     Every text/background pair below has been checked against WCAG 2.1.
     Monochrome sage ramp derived from #77815E: --coln-deep carries text on
     light, --coln is graphics-only (3.8:1), --coln-light lives on dark surfaces.
     --rule never carries text; --ink-3 is AA and reserved for meta >= 15px. */
  --paper:      #F7F4EE;
  --paper-2:    #EFEAE0;
  --paper-3:    #E5DED1;
  --ink:        #1A1714;
  --ink-2:      #4A423A;
  --ink-3:      #6E655A;
  --rule:       #D9D1C4;
  --rule-str:   #C3B8A6;

  --coln:       #77815E;   /* brand sage: logo, graphics, decorative accents */
  --coln-deep:  #556042;   /* darker sage, AA on paper: links, text, button surfaces */
  --coln-dark:  #3E4630;   /* hovers */
  --coln-light: #C9D1AF;   /* lighter sage: accents on dark surfaces */
  --coln-wash:  #E9EBDF;   /* lightest sage: pill and notice backgrounds */
  --data-now:   #D2CABA;   /* household grid: existing homes, washed taupe */
  --data-new:   #7E8C5D;   /* household grid: proposed homes, washed sage */
  --alert:      #556042;   /* deadline accents: same deep sage (monochrome site) */
  --alert-wash: #E9EBDF;

  --night:      #1C2013;   /* inverted section, sage-charcoal */
  --night-2:    #272C1C;
  --night-ink:  #F7F4EE;
  --night-mute: #DFE3CF;
  --night-rule: #5C6647;
  --night-alert:#E4E8D2;   /* "demand" bar: the lightest step in the dark charts */
  --night-coln: #9AA57E;

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

  /* --- Type -------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --t-display: clamp(2.75rem, 1.35rem + 5.6vw, 5.75rem);
  --t-h2:      clamp(2rem,    1.35rem + 2.6vw, 3.5rem);
  --t-h3:      clamp(1.375rem,1.19rem + 0.75vw, 1.75rem);
  --t-h4:      clamp(1.125rem,1.06rem + 0.28vw, 1.25rem);
  --t-lede:    clamp(1.1875rem, 1.08rem + 0.45vw, 1.4375rem);
  --t-body:    1.125rem;   /* 18px floor for all running text */
  --t-small:   0.9375rem;  /* 15px floor for meta */

  --measure: 68ch;
  --wrap: 93.75rem;    /* 1500px page wrapper */
  --wrap-wide: 93.75rem;

  /* --- Elevation: hairline borders for structure, shadow only for overlays */
  --shadow-pop: 0 1px 2px rgba(26,23,20,0.06), 0 8px 24px -8px rgba(26,23,20,0.16);

  --ring: 0 0 0 3px var(--paper), 0 0 0 6px var(--coln-deep);
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* ==========================================================================
   Reset / base
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  color-scheme: light;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* The hidden attribute must beat any component's own display value */
[hidden] { display: none !important; }

img, svg, picture { display: block; max-width: 100%; }
img { height: auto; background: var(--paper-2); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  text-wrap: balance;
  font-variation-settings: "SOFT" 0, "WONK" 0;
}
h1 { font-size: var(--t-display); }
h2 { font-size: var(--t-h2); }
h3 { font-size: var(--t-h3); line-height: 1.18; }
h4 { font-size: var(--t-h4); line-height: 1.3; }

p, li { text-wrap: pretty; }
a { color: var(--coln-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--coln-dark); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--coln-deep);
  outline-offset: 3px;
  border-radius: 2px;
}
.night :focus-visible { outline-color: var(--night-coln); }

::selection { background: var(--coln-deep); color: var(--paper); }

.skip {
  position: absolute; left: var(--s-4); top: -4rem; z-index: 100;
  background: var(--coln-deep); color: var(--paper);
  padding: var(--s-3) var(--s-5); font-weight: 600; text-decoration: none;
  transition: top 160ms var(--ease-out);
}
.skip:focus { top: var(--s-4); color: var(--paper); }

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

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.wrap { width: min(100% - var(--s-6), var(--wrap)); margin-inline: auto; }
.wrap-wide { width: min(100% - var(--s-6), var(--wrap-wide)); margin-inline: auto; }
@media (min-width: 48rem) { .wrap, .wrap-wide { width: min(100% - var(--s-8), var(--wrap)); } }

.prose { max-width: var(--measure); }
.prose > * + * { margin-top: var(--s-5); }
.prose h3 { margin-top: var(--s-7); }
.prose strong { font-weight: 650; }

section { padding-block: clamp(3.5rem, 1.5rem + 8vw, 7.5rem); }

/* Numbers always align and never wobble */
.num, .stat-figure, .count-value, table td, table th { font-variant-numeric: tabular-nums; }


.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--ink-2); max-width: 58ch; }
.night .lede { color: var(--night-mute); }

/* ==========================================================================
   Citation markers
   ========================================================================== */

.cite {
  font-family: var(--font-body);
  font-size: 0.7em; font-weight: 700; vertical-align: super;
  line-height: 0; margin-left: 1px; padding: 0 2px;
  text-decoration: none; color: var(--coln-deep);
  border-bottom: none;
}
.cite:hover { background: var(--coln-wash); color: var(--coln-dark); }
.night .cite { color: var(--night-coln); }
.night .cite:hover { background: var(--night-2); }

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--s-2);
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: 600;
  line-height: 1.2;
  padding: var(--s-4) var(--s-5);
  border: 2px solid transparent; border-radius: 2px;
  text-decoration: none; cursor: pointer;
  touch-action: manipulation;
  transition: background-color 150ms var(--ease-out),
              border-color 150ms var(--ease-out),
              color 150ms var(--ease-out),
              transform 120ms var(--ease-out);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--coln); color: var(--paper); border-color: var(--coln); }
.btn-primary:hover { background: var(--coln-deep); border-color: var(--coln-deep); color: var(--paper); }

.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule-str); }
.btn-ghost:hover { background: var(--paper-2); border-color: var(--ink-2); color: var(--ink); }

.btn-onlight-hero { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn-onlight-hero:hover { background: #FDFBF6; border-color: #FDFBF6; color: var(--ink); }

.btn-outline-hero { background: transparent; color: var(--paper); border-color: rgba(247,244,238,0.55); }
.btn-outline-hero:hover { background: rgba(247,244,238,0.12); border-color: var(--paper); color: var(--paper); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.45; cursor: not-allowed; transform: none;
}
.btn-sm { font-size: var(--t-small); padding: var(--s-3) var(--s-4); }

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 20;
  isolation: isolate;
  background: rgba(247,244,238,0.94);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--rule);
}
.site-header:has(+ main > .hero) { border-bottom: 0; }
.header-inner {
  display: flex; align-items: center; gap: var(--s-4);
  min-height: 4.5rem; padding-block: var(--s-3);
}
.brand {
  display: flex; align-items: center; gap: var(--s-3);
  text-decoration: none; color: var(--ink);
  flex: 0 1 auto;   /* shrinks on phones; min-content floor keeps the text inside its box */
}
.brand:hover { color: var(--ink); }
.brand-mark { inline-size: 2.75rem; block-size: 2.75rem; flex: none; color: var(--coln); }
.brand-name {
  font-family: var(--font-display); font-weight: 650;
  font-size: 1.0625rem; line-height: 1.05;
}
.brand-name span { display: none; font-family: var(--font-body); font-size: 0.8125rem;
  font-weight: 550; color: var(--ink-3);
  margin-top: 6px; }
@media (min-width: 40rem) { .brand-name span { display: block; } }

.site-nav { margin-left: auto; display: none; }
.site-nav ul { display: flex; gap: var(--s-5); list-style: none; padding: 0; }
.site-nav a {
  font-size: 1rem; font-weight: 550; text-decoration: none; color: var(--ink-2);
  padding-block: var(--s-2);
  transition: color 150ms var(--ease-out);
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="true"] { color: var(--ink); font-weight: 700; }
@media (min-width: 72rem) { .site-nav { display: block; } }

.header-cta { margin-left: auto; display: flex; align-items: center; gap: var(--s-3); flex: none; }
@media (min-width: 72rem) { .header-cta { margin-left: 0; } }

.header-count {
  display: none; text-align: right; line-height: 1.15;
  font-variant-numeric: tabular-nums;
}
.header-count b { display: block; font-size: 1.125rem; font-weight: 700; color: var(--alert); }
.header-count span { font-size: 0.8125rem; color: var(--ink-3); font-weight: 550; }
@media (min-width: 40rem) { .header-count { display: block; } }

/* ==========================================================================
   Hero
   ========================================================================== */

.hero {
  position: relative; isolation: isolate;
  display: flex; align-items: flex-end;
  min-height: min(88svh, 54rem);
  margin-inline: 1rem;
  border-radius: 5px; overflow: hidden;
  padding-block: var(--s-10) var(--s-8);
  color: var(--paper);
  background: var(--night);
}
.hero-media {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%;
}
/* Flat scrim, not a gradient: predictable contrast over any part of the photo */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(25,28,17,0.4);
}
.hero-inner {
  display: flex; flex-direction: column; align-items: center;
  text-align: center;
}
.hero h1 { color: var(--paper); max-width: 18ch; margin-inline: auto; }
.hero h1 em {
  font-style: normal; display: block; color: var(--coln-light);
}
.hero-sub {
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6; color: #E4E0D7;
  max-width: 58ch; margin-top: var(--s-5); margin-inline: auto;
}
.hero-actions {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--s-3); margin-top: var(--s-6);
}


/* ==========================================================================
   Scale section + household dot grid
   ========================================================================== */

.scale { background: var(--paper); }
.scale-head { display: grid; gap: var(--s-5); margin-bottom: var(--s-8); }
/* Narrow enough to wrap to two lines, opening a gap before the lede */
.scale-head h2 { max-width: 15ch; }
@media (min-width: 60rem) {
  .scale-head { grid-template-columns: minmax(0,1fr) minmax(0,0.85fr); gap: var(--s-8); align-items: end; }
}

.figure-frame {
  border: 1px solid var(--rule);
  background: var(--paper-2);
  padding: clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
}
.grid-legend {
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6);
  margin-bottom: var(--s-5);
}
.legend-item { display: flex; align-items: flex-start; gap: var(--s-3); }
.legend-swatch {
  inline-size: 0.875rem; block-size: 0.875rem; flex: none; margin-top: 0.4rem;
  border-radius: 1px;
}
.legend-swatch.is-existing { background: var(--data-now); }
.legend-swatch.is-proposed { background: var(--data-new); }
.legend-text b { display: block; font-size: 1.0625rem; font-weight: 650; line-height: 1.3; }
.legend-text span { font-size: var(--t-small); color: var(--ink-3); }

#household-grid { width: 100%; height: auto; }
#household-grid rect { shape-rendering: crispEdges; }

.grid-caption {
  margin-top: var(--s-5); padding-top: var(--s-4);
  border-top: 1px solid var(--rule);
  font-size: var(--t-small); color: var(--ink-3); max-width: 78ch;
}

.scale-stat { background: var(--paper); padding-top: 0; }
.headline-stat { text-align: center; }
.headline-stat p { margin-inline: auto; }
.headline-stat .stat-figure {
  /* sage, monochrome palette: the scale is data, not an alarm */
  font-family: var(--font-display);
  font-size: clamp(4rem, 2rem + 8vw, 8rem);
  font-weight: 600; line-height: 0.9;
  color: var(--coln);
}
.headline-stat p { font-size: var(--t-lede); line-height: 1.4; margin-top: var(--s-4); max-width: 34ch; }

/* ==========================================================================
   Data table
   ========================================================================== */

.table-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--paper); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; }
caption { text-align: left; padding: var(--s-5) var(--s-5) var(--s-4);
  font-size: var(--t-small); color: var(--ink-3); border-bottom: 1px solid var(--rule); }
th, td { text-align: left; padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule); }
thead th {
  font-family: var(--font-body); font-size: 0.9375rem; font-weight: 650; color: var(--ink-3);
  background: var(--paper-2);
}
td.figure, th.figure { text-align: right; font-weight: 600; white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr.is-emphasis td { background: var(--coln-wash); font-weight: 650; }

/* ==========================================================================
   Night section (the river / sewage arithmetic)
   ========================================================================== */

.night { background: var(--coln); color: var(--night-ink); }
.night h2, .night h3 { color: var(--night-ink); }
.night a { color: var(--night-coln); }
.night a:hover { color: var(--coln-light); }

.arith { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 56rem) { .arith { grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--s-10); } }

.bar-row { margin-bottom: var(--s-6); }
.bar-row:last-child { margin-bottom: 0; }
.bar-label { display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); margin-bottom: var(--s-3); }
.bar-label b { font-size: 1.0625rem; font-weight: 600; }
.bar-label .num { font-family: var(--font-display); font-size: 1.75rem; font-weight: 600; }
.bar-track { block-size: 0.75rem; background: var(--night-2); border: 1px solid var(--night-rule); }
.bar-fill { block-size: 100%; }
.bar-fill.is-capacity { background: var(--night-coln); }
.bar-fill.is-demand { background: var(--night-alert); }
.bar-note { font-size: var(--t-small); color: var(--night-mute); margin-top: var(--s-3); }

.verdict { padding: 0; }
.verdict p { font-size: var(--t-lede); line-height: 1.45; }
.verdict p + p { margin-top: var(--s-4); font-size: var(--t-body); color: var(--night-mute); }

.spill-stats { display: grid; gap: var(--s-6) var(--s-10); margin-top: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(13rem,1fr)); }
.spill-stat { padding-top: 0; }
.spill-stat b {
  display: block; font-family: var(--font-display);
  font-size: clamp(2.25rem,1.6rem + 2vw,3rem); font-weight: 600;
  line-height: 1; color: var(--night-ink);
}
.spill-stat span { display: block; margin-top: var(--s-3); font-size: var(--t-small);
  color: var(--night-mute); }

/* ==========================================================================
   Position / referendum
   ========================================================================== */

.split { display: grid; gap: var(--s-7); }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0,0.8fr) minmax(0,1.2fr); gap: var(--s-10); align-items: start; }
}

.big-figure {
  font-family: var(--font-display);
  font-size: clamp(4.5rem, 2rem + 10vw, 9rem);
  font-weight: 600; line-height: 0.86; color: var(--coln);
}
.big-figure + p { margin-top: var(--s-4); font-size: var(--t-lede); line-height: 1.4; color: var(--ink-2); }

.position {
  background: var(--paper-2);
}
.position-card {
  background: var(--paper);
  border: 4px solid var(--coln);
  padding: clamp(1.5rem, 0.75rem + 3vw, 3rem);
}
.position-card h2 { font-size: var(--t-h2); margin-bottom: var(--s-5); }

/* Card, questions and closing prose share one centred column */
.position-block { max-width: 54rem; margin-inline: auto; }
.position-block .prose { max-width: 100%; }
.position-card p + p { margin-top: var(--s-4); }

/* ==========================================================================
   Objection builder
   ========================================================================== */

.builder { background: var(--paper); }
.builder-grid { display: grid; gap: var(--s-7); margin-top: var(--s-8); }
@media (min-width: 66rem) {
  .builder-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: var(--s-8); align-items: start; }
  .builder-output { position: sticky; top: 6rem; }
}

fieldset { border: 0; padding: 0; margin: 0 0 var(--s-7); }
legend { padding: 0; margin: 0; display: block; inline-size: 100%; }
.step-title { display: flex; align-items: center; gap: var(--s-4); }
.step-num {
  font-family: var(--font-mono); font-size: var(--t-small); font-weight: 700;
  color: var(--paper); background: var(--coln);
  inline-size: 2rem; block-size: 2rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
}
.step-title h3 { font-size: var(--t-h3); }
.step-help { font-size: var(--t-small); color: var(--ink-3); margin-top: var(--s-4); max-width: 54ch; }

.checks { display: grid; gap: var(--s-3); margin-top: var(--s-5); list-style: none; padding: 0; }
.check {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: var(--s-4);
  align-items: start;
  border: 1px solid var(--rule); background: var(--paper);
  padding: var(--s-5);
  cursor: pointer;
  transition: border-color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.check:hover { border-color: var(--rule-str); background: var(--paper-2); }
.check:has(input:checked) { border-color: var(--coln); background: var(--coln-wash); }
.check:has(input:focus-visible) { outline: 3px solid var(--coln-deep); outline-offset: 2px; }
.check input {
  inline-size: 1.25rem; block-size: 1.25rem; margin: 0.28rem 0 0;
  accent-color: var(--coln-deep); cursor: pointer; flex: none;
}
.check-body { display: flex; flex-direction: column; block-size: 100%; }
.check-body b { display: block; font-size: 1.0625rem; font-weight: 650; line-height: 1.35; }
.check-body span { display: block; font-size: var(--t-small); color: var(--ink-2); margin-top: var(--s-2); }
.check-test {
  display: block; margin-top: auto; padding-top: var(--s-3);
  font-size: 0.8125rem; font-weight: 500; font-style: italic;
  color: var(--ink-3); background: none; border: 0; padding: 0;
}
.check-test::before { content: "Soundness test: "; font-style: normal; }

label.field-label { display: block; font-weight: 650; font-size: 1.0625rem; margin-bottom: var(--s-2); }
.field-hint { display: block; font-size: var(--t-small); color: var(--ink-3); margin-bottom: var(--s-3); font-weight: 400; }

input[type="text"], input[type="email"], textarea {
  width: 100%; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-str); border-radius: 2px;
  padding: var(--s-3) var(--s-4);
  transition: border-color 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
input::placeholder, textarea::placeholder { color: var(--ink-3); opacity: 1; }
input:hover, textarea:hover { border-color: var(--ink-3); }
input:focus-visible, textarea:focus-visible {
  outline: none; border-color: var(--coln-deep); box-shadow: 0 0 0 3px var(--coln-wash);
}
textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field + .field { margin-top: var(--s-5); }
.field-row .field + .field { margin-top: 0; }
.field-row { display: grid; gap: var(--s-5); }
@media (min-width: 34rem) { .field-row { grid-template-columns: 1fr 1fr; } }

.output-panel {
  border: 1px solid var(--rule-str); background: var(--paper-2);
}
.output-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3);
  padding: var(--s-4) var(--s-5); border-bottom: 1px solid var(--rule-str);
  background: var(--paper);
}
.output-head h3 { font-size: var(--t-h4); }
.output-actions { display: flex; gap: var(--s-2); }
#letter {
  font-family: var(--font-mono); font-size: 0.9375rem; line-height: 1.7;
  white-space: pre-wrap; overflow-wrap: break-word;
  padding: var(--s-5); margin: 0;
  max-height: 34rem; overflow-y: auto;
  color: var(--ink);
}
#letter:empty::before { content: ""; }
.output-empty {
  padding: var(--s-7) var(--s-5); text-align: center; color: var(--ink-3);
  font-size: var(--t-small); max-width: 36ch; margin-inline: auto;
}
.output-foot {
  padding: var(--s-5); border-top: 1px solid var(--rule-str); background: var(--paper);
  display: grid; gap: var(--s-4);
}

.notice {
  border: 1px solid var(--rule-str); border-left: 4px solid var(--alert);
  background: var(--alert-wash);
  padding: var(--s-5);
  font-size: var(--t-small); line-height: 1.6;
}
.notice b { display: block; font-size: 1.0625rem; margin-bottom: var(--s-2); }
.notice p + p { margin-top: var(--s-3); }

.status-msg { font-size: var(--t-small); font-weight: 600; min-height: 1.4em; }
.status-msg[data-state="ok"] { color: var(--coln-deep); }
.status-msg[data-state="error"] { color: var(--alert); }

/* ==========================================================================
   Support
   ========================================================================== */

.support { background: var(--paper-2); }
.support-grid { display: grid; gap: var(--s-6); margin-top: var(--s-8); }
@media (min-width: 56rem) { .support-grid { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); gap: var(--s-8); } }

.card {
  background: #FDFBF6;
  padding: clamp(1.75rem, 0.9rem + 2.8vw, 3rem);
  display: flex; flex-direction: column; gap: var(--s-4);
}
.card h3 { font-size: var(--t-h3); }
.card ul { padding-left: 1.15rem; display: grid; gap: var(--s-2); }
.card .btn { align-self: flex-start; margin-top: var(--s-2); }

/* ==========================================================================
   Sources
   ========================================================================== */

.sources { background: var(--paper); }
.sources ol { padding-left: 0; list-style: none; counter-reset: src;
  display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.sources li {
  counter-increment: src;
  position: relative; padding-left: 2.5rem;
  font-size: 1.0625rem; line-height: 1.65; color: var(--ink-2);
  padding-bottom: var(--s-4); border-bottom: 1px solid var(--rule);
}
.sources li::before {
  content: counter(src);
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-weight: 700; color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.sources li:target { background: var(--coln-wash); }
.sources a { overflow-wrap: anywhere; }

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
  background: var(--coln); color: var(--paper);
  padding-block: var(--s-8) 0;
  font-size: var(--t-small); line-height: 1.65;
}
.site-footer a { color: var(--paper); text-decoration-thickness: 1px; }
.site-footer a:hover { color: var(--paper); text-decoration-thickness: 2px; }
.footer-grid { display: grid; gap: var(--s-6); }
@media (min-width: 52rem) {
  .footer-grid {
    grid-template-columns: minmax(0,0.7fr) minmax(0,0.7fr) minmax(0,1.1fr);
    gap: var(--s-9);
  }
}
.site-footer h2 { font-size: 1.0625rem; font-family: var(--font-body); font-weight: 700;
  color: var(--paper); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; display: grid; gap: var(--s-2); }

/* Ghost button on the sage footer: light outline, no underline */
.site-footer .btn-ghost {
  color: var(--paper);
  border-color: rgba(247,244,238,0.45);
  background: transparent;
  text-decoration: none;
  max-width: 100%;
}
.site-footer .btn-ghost:hover {
  color: var(--paper);
  background: rgba(247,244,238,0.12);
  border-color: var(--paper);
  text-decoration: none;
}

.footer-donate {
  background: var(--paper); color: var(--ink);
  border-radius: 5px;
  padding: var(--s-6);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  align-self: start;   /* hug the content so top and bottom padding match */
}
.footer-donate h2 { color: var(--ink); font-size: var(--t-h4); font-family: var(--font-display);
  font-weight: 650; margin-bottom: 0; }
.footer-donate a { color: var(--paper); }
.footer-donate a:hover { color: var(--paper); }
.footer-donate .btn { margin-top: var(--s-2); }

.footer-bottom {
  margin-top: var(--s-8);
  border-top: 1px solid rgba(247,244,238,0.3);
  padding-block: var(--s-5);            /* equal above and below */
  display: flex; flex-wrap: wrap; gap: var(--s-4); justify-content: space-between;
  font-size: 0.875rem; color: var(--paper);
}

/* ==========================================================================
   Motion
   ========================================================================== */

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

@media print {
  .site-header, .hero-media, .builder-form, .site-footer { display: none; }
  body { background: #fff; }
}

/* ==========================================================================
   Multi-page additions (Fairford Community Alliance brief)
   ========================================================================== */

/* --- Mobile navigation ---------------------------------------------------- */
.nav-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  inline-size: 2.75rem; block-size: 2.75rem; margin-left: var(--s-2);
  background: transparent; border: 1px solid var(--rule-str); border-radius: 2px;
  color: var(--ink); cursor: pointer;
  transition: background-color 150ms var(--ease-out), border-color 150ms var(--ease-out);
}
.nav-toggle:hover { background: var(--paper-2); border-color: var(--ink-3); }
.nav-toggle svg { inline-size: 1.375rem; block-size: 1.375rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
/* 72rem, not 62rem: below ~1150px the brand, nav and Donate button no longer
   fit on one line and the nav silently dropped to a second row. */
@media (min-width: 72rem) {
  .nav-toggle { display: none; }
  .header-cta .btn-primary { margin-left: var(--s-4); }
}

@media (max-width: 71.99rem) {
  .site-nav {
    display: none;
    position: absolute; inset: 100% 0 auto 0;
    background: var(--paper);
    border-bottom: 1px solid var(--rule-str);
    box-shadow: var(--shadow-pop);
    padding: var(--s-4) var(--s-5) var(--s-5);
  }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav a {
    display: block; padding: var(--s-3) var(--s-2);
    font-size: 1.0625rem; border-bottom: 1px solid var(--rule);
  }
  .site-nav li:last-child a { border-bottom: 0; }
  .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
}
@media (min-width: 72rem) {
  .site-nav a[aria-current="page"] { color: var(--ink); font-weight: 700; }
}

/* --- Deadline pill: floats over the hero, the one deliberately urgent element */
.deadline-block {
  position: absolute; top: var(--s-5); left: 50%; transform: translateX(-50%);
  z-index: 5;
  width: max-content; max-width: calc(100% - 2rem);
  display: flex; flex-direction: column; align-items: center; gap: var(--s-3);
}
.deadline-extra { margin: 0; font-size: var(--t-small); text-align: center; }
.deadline-extra a { color: var(--coln-deep); font-weight: 650; }
.hero .deadline-extra a { color: var(--paper); }

.deadline-pill {
  width: max-content; max-width: min(100%, 64rem);
  background: var(--alert-wash); color: var(--ink);
  border: 1px solid var(--coln);
  border-radius: 999px;
  padding: var(--s-4) var(--s-7);
  font-size: 1.0625rem; line-height: 1.55; text-align: center;
}
.deadline-pill p { margin: 0; }
.deadline-pill b { font-weight: 700; }
.deadline-pill a { color: var(--alert); font-weight: 650; white-space: nowrap; margin-left: var(--s-5); }
.deadline-pill a + a { margin-left: var(--s-4); }
.deadline-pill a:hover { color: var(--coln-dark); }

/* --- Subpage hero ---------------------------------------------------------- */
.page-hero {
  position: relative;
  background: var(--paper-2);
  padding-block: clamp(3rem, 1.5rem + 6vw, 5.5rem);
}
.page-hero:has(.deadline-block) { padding-top: clamp(9.5rem, 7rem + 7vw, 12rem); }
.page-hero h1 { font-size: var(--t-h2); max-width: 22ch; }
.page-hero .updates-head { max-width: none; }
.page-hero .lede { margin-top: var(--s-5); }

/* --- Key number (homepage) ------------------------------------------------- */
.keynum { text-align: center; }
.keynum .stat-figure {
  font-family: var(--font-display);
  font-size: clamp(5rem, 2rem + 12vw, 11rem);
  font-weight: 600; line-height: 0.9;
  color: var(--coln);
}
.keynum .stat-caption {
  font-size: var(--t-lede); color: var(--ink-2); margin-top: var(--s-4);
}
.keynum .stat-detail {
  font-size: var(--t-body); color: var(--ink-3);
  max-width: 52ch; margin: var(--s-5) auto 0;
}

/* --- Why it matters: six icon blocks --------------------------------------- */
.matters-grid {
  display: grid; margin-top: var(--s-8);
  gap: var(--s-8) var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Four per row, blocks keep their width and the slack becomes the gap */
@media (min-width: 60rem) {
  .matters-grid {
    grid-template-columns: repeat(4, 15.5rem);
    justify-content: space-between;
  }
}
.matter { border-top: 2px solid var(--rule-str); padding-top: var(--s-5); }
.matter svg {
  inline-size: 2rem; block-size: 2rem; color: var(--coln);
  margin-bottom: var(--s-4);
}
.matter h3 { font-size: var(--t-h4); font-family: var(--font-body); font-weight: 700; }
.matter p { font-size: var(--t-body); color: var(--ink-2); margin-top: var(--s-2); }

/* --- What we're doing: text boxes alternating with photographs -------------- */
.doing-grid {
  display: grid; gap: var(--s-5); margin-top: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Alternating text / photo, four across. Grid stretch gives every cell in a
   row the same height, so the photographs match their neighbouring box. */
@media (min-width: 60rem) {
  .doing-grid {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-rows: minmax(22rem, auto);
    gap: var(--s-4);
  }
  /* Odd column count: strict text/photo alternation in source order staggers
     each row on its own, so row two opens with a photograph. */
  .doing-card { padding: var(--s-6) var(--s-5); }
}
.doing-card {
  background: var(--paper); border: 1px solid var(--rule-str);
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column; justify-content: center;
}
.doing-photo {
  margin: 0; block-size: 100%; min-block-size: 14rem;
  border-radius: 5px; overflow: hidden; background: var(--paper-2);
}
.doing-photo picture, .doing-photo img {
  display: block; inline-size: 100%; block-size: 100%; object-fit: cover;
}
.doing-card h3 { font-size: var(--t-h4); font-family: var(--font-body); font-weight: 700; }
.doing-card p { font-size: 1.0625rem; color: var(--ink-2); margin-top: var(--s-3); }

/* --- Get involved: three routes --------------------------------------------- */
.cta-trio {
  display: grid; gap: var(--s-5); margin-top: var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.cta-card {
  background: var(--paper);
  padding: var(--s-7) var(--s-6);
  display: flex; flex-direction: column; gap: var(--s-3);
}
.cta-card h3 { font-size: var(--t-h3); }
.cta-card p { color: var(--ink-2); margin-bottom: var(--s-5); }
.cta-card .btn { align-self: flex-start; margin-top: auto; }

/* --- Updates ----------------------------------------------------------------- */
.update-item {
  padding-block: var(--s-6);
  display: grid; gap: var(--s-4);
  text-align: left;
}
@media (min-width: 48rem) {
  .update-item { grid-template-columns: 13rem minmax(0,1fr); gap: var(--s-8); }
}
.update-item time {
  display: flex; align-items: center; gap: var(--s-2);
  align-self: start;
  font-size: var(--t-small); font-weight: 650; color: var(--ink-3);
  white-space: nowrap;
  padding-top: 0.35rem;
}
.update-item time .cal { inline-size: 1.05rem; block-size: 1.05rem; flex: none; }
.update-item h3 { font-size: var(--t-h3); }
.update-item p { margin-top: var(--s-5); color: var(--ink-2); max-width: var(--measure); }

/* --- Contact block ------------------------------------------------------------ */
.contact-email {
  font-family: var(--font-display); font-size: var(--t-h4);
  overflow-wrap: anywhere;
}

/* Very narrow phones (320px): tighten header spacing so all three
   header controls stay on screen */
@media (max-width: 23rem) {
  .header-inner { gap: var(--s-3); }
  .header-cta { gap: var(--s-2); }
  .header-cta .btn-sm { padding-inline: var(--s-3); }
}

/* --- Full-width photographic band ------------------------------------------ */
.band {
  margin: 1rem;
  border-radius: 5px; overflow: hidden;
  background: var(--paper-2);
}
.band img {
  display: block; inline-size: 100%; block-size: 300px;
  object-fit: cover; object-position: center;
}

/* Centred headings, and the space they need before the content below */
.centred { text-align: center; }
/* a heading with its own max-width must be re-centred, or it hugs the left */
.centred h1, .centred h2 { max-width: 30ch; margin-inline: auto; }
.centred .lede { margin-inline: auto; }
h2.centred { margin-bottom: var(--s-8); }
.centred > .btn { margin-top: var(--s-6); }

/* Updates: heading, entry title and button all share the text column's edge.
   The date hangs in the left column beside them. */
.updates-block { max-width: 62rem; margin-inline: auto; }
.updates-block .lede { max-width: 46rem; }
@media (min-width: 48rem) {
  .updates-head, .updates-foot, .updates-block .lede {
    margin-left: calc(13rem + var(--s-8));
  }
}
.updates-head { margin-bottom: var(--s-5); }
.updates-block .lede { margin-top: 0; }
.updates-foot { margin-top: var(--s-6); }

/* Slightly shallower band than the default section rhythm */
.section-tight { padding-block: clamp(2.75rem, 1.25rem + 6vw, 5.5rem); }

/* --- Split page hero: text beside a photograph ------------------------------ */
.hero-split { display: grid; gap: var(--s-7); }
@media (min-width: 62rem) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.8fr);
    gap: var(--s-10);
    align-items: center;
  }
}
.hero-split-text h1 { max-width: 20ch; }
.hero-split-text p {
  font-size: 1.0625rem; line-height: 1.7; color: var(--ink-2);
  max-width: 56ch; margin-top: var(--s-5);
}
.hero-split-media {
  margin: 0; border-radius: 5px; overflow: hidden; background: var(--paper-3);
}
.hero-split-media img {
  display: block; inline-size: 100%; block-size: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
}

/* Prose block centred on the page, text itself still left-aligned */
.prose-centred { margin-inline: auto; }

/* Sources: heading, intro and list share one centred, measure-width column */
.sources-block { max-width: 62rem; margin-inline: auto; }
.sources-block h2 { max-width: 100%; }
.sources-block .lede { max-width: 100%; }

/* Taller photographic band */
.band-tall img { block-size: 450px; }

/* "Ways to help": the heading here is visually hidden, so the grid's usual
   clearance margin would stack on top of the section padding for no reason */
/* +1rem on top so the gap above the boxes reads level with the gap below,
   which carries the band's own 1rem margin */
.ways { padding-block: clamp(4rem, 2.5rem + 5vw, 6rem) clamp(3rem, 1.5rem + 5vw, 5rem); }
.ways .support-grid { margin-top: 0; }

/* ==========================================================================
   Representation builder: one linear column, four numbered steps
   ========================================================================== */

.builder .wrap > * { max-width: 68rem; margin-inline: auto; }

.builder-intro { margin-bottom: var(--s-8); }
.builder-intro h2 { max-width: 100%; margin-bottom: var(--s-5); }
.builder-intro .lede { max-width: 100%; }
.builder-time {
  margin-top: var(--s-4); font-weight: 600; color: var(--ink);
}

/* Rules sit on each step's bottom edge: a border-top would be struck through
   by the fieldset's own legend. */
.step { padding-block: var(--s-7); border-bottom: 1px solid var(--rule); }
.step:first-of-type { padding-top: var(--s-6); }
.step-final { border-bottom: 0; }
.step .step-help { margin-top: var(--s-4); }
.step > .checks, .step > .field, .step > .field-row { margin-top: var(--s-5); }
.field-row > .field { margin-top: 0; }

/* Two columns of grounds so step 1 is not a long scroll of its own.
   align-items: stretch plus a full-height label gives every box the same
   height as its row neighbour. */
@media (min-width: 54rem) {
  .checks {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--s-4);
    align-items: stretch;
  }
  .checks > li { display: flex; }
  .checks > li > .check { flex: 1; }
}


.output-panel { margin-top: var(--s-5); }
.output-cta {
  margin-top: var(--s-6);
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s-4) var(--s-6);
}
.output-cta p {
  font-size: var(--t-small); color: var(--ink-3);
  max-width: 42ch; margin: 0; margin-left: auto; text-align: left;
}
#letter { max-height: 30rem; }

/* ==========================================================================
   Representation builder as a wizard
   Only applies once JS adds .is-wizard, so with no script the four steps
   simply stack and remain usable.
   ========================================================================== */

.wizard-bar {
  position: sticky; top: 4.5rem; z-index: 10;
  scroll-margin-top: 4.5rem;
  isolation: isolate;
  margin-bottom: var(--s-8);
  padding-block: var(--s-4);
  background: var(--paper);
}
/* No full-bleed pseudo-element here: `inset: 0 -100vw` made the document
   374px wider than a 390px viewport and gave the page a horizontal scroll.
   All the content below is inside the same centred column, so a background on
   the bar itself is enough to cover what scrolls under it. */
.wizard-steps {
  list-style: none; padding: 0; margin: 0 0 var(--s-4);
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-3);
}
.wizard-step {
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: transparent; border: 0; padding: var(--s-2) var(--s-3) var(--s-2) var(--s-2);
  border-radius: 999px;
  font: inherit; font-size: 1rem; font-weight: 550; color: var(--ink-3);
  cursor: pointer; touch-action: manipulation;
  transition: color 150ms var(--ease-out), background-color 150ms var(--ease-out);
}
.wizard-step:hover { color: var(--ink); background: var(--paper-2); }
.wizard-num {
  inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-small); font-weight: 700;
  background: var(--paper-2); color: var(--ink-3);
  border: 1px solid var(--rule-str);
  transition: background-color 150ms var(--ease-out), color 150ms var(--ease-out),
              border-color 150ms var(--ease-out);
}
.wizard-step.is-current { color: var(--ink); font-weight: 700; }
.wizard-step.is-current .wizard-num {
  background: var(--coln); border-color: var(--coln); color: var(--paper);
}
.wizard-step.is-done { color: var(--ink-2); }
.wizard-step.is-done .wizard-num {
  background: var(--coln-wash); border-color: var(--coln); color: var(--coln-dark);
}

.wizard-track {
  block-size: 4px; background: var(--paper-3); border-radius: 999px; overflow: hidden;
}
.wizard-fill {
  block-size: 100%; inline-size: 0%; background: var(--coln);
  transition: inline-size 260ms var(--ease-out);
}
@media (prefers-reduced-motion: reduce) { .wizard-fill { transition: none; } }

/* In wizard mode the panels are shown one at a time, so the dividers go */
.is-wizard .step {
  border-bottom: 0; padding-block: 0;
  /* clears the sticky header + steps bar when scrolled to; JS keeps the value
     in sync with their real heights */
  scroll-margin-top: var(--wizard-offset, 11rem);
}
.is-wizard .step:first-of-type { padding-top: 0; }
/* focused only so screen readers land on it; it is not interactive */
.is-wizard .step h3:focus, .is-wizard .step h3:focus-visible { outline: none; }

.wizard-nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s-4); margin-top: var(--s-8);
  padding-top: var(--s-6); border-top: 1px solid var(--rule);
}
.wizard-nav .btn-ghost { margin-right: auto; }
.wizard-nav .btn-primary { margin-left: auto; }

@media (max-width: 40rem) {
  .wizard-label { display: none; }
  .wizard-step { padding: var(--s-1); }
}

/* --- Image beside text, image first ---------------------------------------- */
.media-split { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 62rem) {
  .media-split {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
    gap: var(--s-10);
  }
}
.media-split-media {
  margin: 0; border-radius: 5px; overflow: hidden; background: var(--paper-3);
}
.media-split-media img {
  display: block; inline-size: 100%; block-size: 100%;
  aspect-ratio: 4 / 3; object-fit: cover;
}
.media-split .prose { max-width: 54ch; }

/* Equal padding above and below the About body */
.about-body { padding-block: clamp(3.5rem, 1.5rem + 8vw, 7.5rem); }

.centred .hero-actions { justify-content: center; }
.centred .contact-email { margin-inline: auto; }

/* --- Deadline pill on small screens ----------------------------------------
   Absolutely positioned it overlaps the heading once the text wraps to two or
   three lines. On narrow screens let it sit in the flow instead, where its own
   margin guarantees the gap. The photo hero keeps it floating over the image. */
@media (max-width: 48rem) {
  .deadline-pill {
    font-size: 0.9375rem;
    padding: var(--s-3) var(--s-5);
    line-height: 1.5;
  }
  .page-hero .deadline-block {
    position: static; transform: none;
    inline-size: auto; max-inline-size: none;
    margin: 0 var(--s-4) var(--s-7);
  }
  .page-hero .deadline-pill { inline-size: auto; max-inline-size: none; }
  .page-hero:has(.deadline-block) { padding-top: var(--s-6); }
  .deadline-pill a { margin-left: 0; display: inline-block; margin-top: var(--s-2); }
  .deadline-pill a + a { margin-left: var(--s-4); }
  /* the photo hero keeps the pill floating, so it needs room for a 3-line pill */
  .hero { padding-top: 13.5rem; }
}

/* ==========================================================================
   Very narrow phones (320px)
   Grid and flex items default to min-width:auto, so a long unbroken token such
   as the contact email, or a wide button, pushes its whole column past the
   viewport. These let them shrink, and trim the header controls to fit.
   ========================================================================== */

.footer-grid > *, .support-grid > *, .cta-trio > *, .doing-grid > *,
.matters-grid > *, .checks > * { min-inline-size: 0; }

.btn { max-inline-size: 100%; }
.site-footer .btn-ghost,
.card a[href^="mailto:"],
.contact-email a { overflow-wrap: anywhere; }

@media (max-width: 23rem) {
  .brand-mark { inline-size: 2rem; block-size: 2rem; }
  .brand-name { font-size: 0.9375rem; }
  .header-cta .btn-sm { padding-inline: var(--s-2); font-size: 0.875rem; }
  .nav-toggle { inline-size: 2.5rem; block-size: 2.5rem; }
  .footer-donate, .card { padding: var(--s-5); }
}

/* --- Donate page ------------------------------------------------------------ */
.donate-body { padding-block: clamp(3.5rem, 1.5rem + 8vw, 7.5rem); }
.hero-split-cta { margin-top: var(--s-6); }

/* Bulleted list rendered with ticks instead of discs */
.icon-list { list-style: none; padding-left: 0; display: grid; gap: var(--s-3); }
.icon-list li {
  display: grid; grid-template-columns: 1.5rem minmax(0, 1fr);
  gap: var(--s-3); align-items: start;
}
.icon-list svg {
  inline-size: 1.25rem; block-size: 1.25rem; color: var(--coln);
  margin-top: 0.28rem;
}

/* The Donate boxes follow a hero, not a heading, so the grid's clearance
   margin only adds dead space */
.donate-body .support-grid { margin-top: 0; }

/* Where the finished draft actually goes, said before the steps begin */
.builder-route {
  margin-top: var(--s-4);
  color: var(--ink-2);
}

.update-cta { margin-top: var(--s-5); }

/* --- Downloadable guide, top of the respond section --------------------------- */
.guide-card {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s-5);
  align-items: start;
  background: var(--coln-wash);
  border: 1px solid var(--coln);
  border-radius: 5px;
  padding: clamp(1.25rem, 0.6rem + 2.4vw, 2rem);
  margin-top: var(--s-6);
}
.guide-icon { color: var(--coln-deep); }
.guide-icon svg { inline-size: 2.75rem; block-size: 2.75rem; }
.guide-body h3 { font-size: var(--t-h3); }
.guide-body p { margin-top: var(--s-3); color: var(--ink-2); max-width: 56ch; }
.guide-body .btn { margin-top: var(--s-5); }
@media (max-width: 34rem) {
  .guide-card { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
}

/* Lead-in from the downloadable guide to the builder below it */
.builder-or {
  margin-top: var(--s-7);
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink);
  max-width: 40ch;
}

/* The plan reference the council's form demands for each issue */
.check-ref {
  display: block; margin-top: var(--s-3);
  font-size: 0.8125rem; line-height: 1.5; color: var(--ink-2);
  background: var(--paper-2); border-radius: 3px;
  padding: var(--s-2) var(--s-3);
}
.check:hover .check-ref { background: var(--paper-3); }
.check:has(input:checked) .check-ref { background: var(--paper); }
.check:has(input:checked):hover .check-ref { background: var(--paper); }
.check-ref b { font-weight: 650; }

/* Postal alternative, below the builder */
.guide-card-post { margin-top: var(--s-8); }

/* --- Momentum counters ------------------------------------------------------ */
.stats-band { margin-top: 1rem; padding-block: clamp(1.75rem, 1rem + 2vw, 2.75rem); background: var(--paper-2); }
.stats-strip {
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  text-align: center;
}
.stats-strip .stat b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 1.6rem + 3vw, 4rem);
  font-weight: 600; line-height: 1; color: var(--coln);
  font-variant-numeric: tabular-nums;
}
.stats-strip .stat span {
  display: block; margin-top: var(--s-3);
  font-size: var(--t-small); color: var(--ink-2);
}

/* Download tally beside the guide heading */
.guide-count {
  font-family: var(--font-body);
  font-size: var(--t-small); font-weight: 600;
  color: var(--coln-deep); white-space: nowrap;
}
.guide-count::before { content: "\00b7\00a0"; color: var(--ink-3); }

/* --- How to respond: three routes ------------------------------------------- */
.respond-h { font-size: var(--t-h3); margin-top: var(--s-7); }
.respond-options {
  list-style: none; padding: 0; margin: var(--s-5) 0 0;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
}
.respond-option {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
  background: #FDFBF6;
  border-radius: 5px;
  padding: var(--s-6) var(--s-5) var(--s-5);
}
.respond-option.is-primary { background: var(--coln-wash); }
.respond-num {
  position: absolute; top: var(--s-4); right: var(--s-4);
  inline-size: 1.75rem; block-size: 1.75rem; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 0.8125rem; font-weight: 700;
  background: var(--paper-2); color: var(--ink-2);
}
.respond-option.is-primary .respond-num { background: var(--coln); color: var(--paper); }
.respond-icon { color: var(--coln-deep); }
.respond-icon svg { inline-size: 2.25rem; block-size: 2.25rem; }
.respond-option h4 { font-family: var(--font-display); font-size: var(--t-h4); padding-right: 2rem; }
.respond-option p { font-size: var(--t-small); color: var(--ink-2); }
/* One line each, so the three sit at identical heights along the bottom */
.respond-option .btn { margin-top: auto; white-space: nowrap; }
.respond-option a[href^="mailto:"] { overflow-wrap: anywhere; }

.respond-help {
  margin-top: var(--s-7);
  border-top: 1px solid var(--rule);
  padding-top: var(--s-6);
}
.respond-help p { max-width: 62ch; }
.respond-tip {
  margin-top: var(--s-4);
  font-size: var(--t-small); color: var(--ink-2);
  background: var(--paper-2); border-radius: 4px;
  padding: var(--s-3) var(--s-4);
}
.respond-help .btn { margin-top: var(--s-5); }
.builder-time { margin-top: var(--s-7); }

/* ==========================================================================
   Response wording: eight issues, each ready to copy
   Replaces the earlier step-by-step wizard, which hid the wording behind
   navigation people had to learn before they could use it.
   ========================================================================== */

.issues-h { font-size: var(--t-h3); margin-top: var(--s-7); }
.issues-help { margin-top: var(--s-4); max-width: 62ch; }

.issues { max-width: 68rem; margin: var(--s-6) auto 0; display: grid; gap: var(--s-3); }

.issue { background: #FDFBF6; border-radius: 5px; }
.issue[open] { background: var(--paper-2); }

.issue summary {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-5);
  cursor: pointer; list-style: none;
  border-radius: 5px;
}
.issue summary::-webkit-details-marker { display: none; }
.issue summary:hover { background: var(--paper-2); }
.issue summary:focus-visible { outline: 3px solid var(--coln-deep); outline-offset: 2px; }

.issue-num {
  inline-size: 2rem; block-size: 2rem; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: var(--t-small); font-weight: 700;
  background: var(--coln); color: var(--paper);
}
.issue-title {
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 650;
  line-height: 1.25; flex: 1;
}
.issue-open {
  font-size: var(--t-small); font-weight: 600; color: var(--coln-deep); white-space: nowrap;
}
.issue[open] .issue-open::after { content: "\00a0\2191"; }
.issue:not([open]) .issue-open::after { content: "\00a0\2193"; }

.issue-body { padding: 0 var(--s-5) var(--s-5); }
.issue-ref {
  font-size: var(--t-small); line-height: 1.6;
  background: var(--paper); border-radius: 4px; padding: var(--s-4);
}
.issue-ref-text { display: inline-block; margin: var(--s-2) 0; font-weight: 650; color: var(--ink); }
.issue-ref .btn { margin-left: var(--s-3); vertical-align: middle; }
.issue-tests { font-size: var(--t-small); color: var(--ink-3); margin-top: var(--s-3); }
.issue-body h4 {
  font-family: var(--font-body); font-size: var(--t-small); font-weight: 700;
  color: var(--ink-3); margin-top: var(--s-5);
}
.issue-text {
  margin: var(--s-3) 0 0;
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.65;
  white-space: pre-wrap; overflow-wrap: break-word;
  background: var(--paper); border-radius: 4px; padding: var(--s-4);
  color: var(--ink);
}
.issue-own { margin-top: var(--s-5); }
.issue-actions {
  margin-top: var(--s-5);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4);
}

/* Heading row with its own copy button */
.issue-head {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--s-3); margin-top: var(--s-5);
}
.issue-head h4 { margin: 0; }
.issue-note {
  font-family: var(--font-body); font-size: var(--t-small);
  font-weight: 500; font-style: italic; color: var(--ink-3);
  text-transform: none; letter-spacing: 0;
}
.issue-note::before { content: "\00b7\00a0"; font-style: normal; }
.issue-body .status-msg { margin-top: var(--s-4); }

.respond-steps { margin-top: var(--s-4); }
.respond-steps b { color: var(--coln-deep); }
.issues { margin-top: var(--s-7); }

/* The opening line carries the section, so it is set larger */
.respond-lead {
  font-size: var(--t-lede); line-height: 1.5; color: var(--ink);
  font-weight: 550; max-width: 58ch;
}
.respond-note { margin-top: var(--s-4); font-size: var(--t-small); color: var(--ink-2); }

.respond-lead strong { font-weight: 700; }

/* ==========================================================================
   Respond now: the one deliberately loud element on the site
   A single warm red, used only for the call to action. It is the exception to
   the monochrome sage palette, chosen because responding is what the site is
   for. White on it is 6.4:1, so it clears AA comfortably.
   ========================================================================== */

:root {
  --urgent: #BE3B26; --urgent-dark: #9E3220;
  /* pumpkin, for the video box only: warm enough to separate from the
     deadline red, light enough to carry dark text */
  --pumpkin: #A85D14; --pumpkin-dark: #8F4E10; --pumpkin-mute: #F0DCC9;
}

.btn-urgent {
  background: var(--urgent); color: #fff; border-color: var(--urgent);
  font-weight: 700;
}
.btn-urgent:hover {
  background: var(--urgent-dark); border-color: var(--urgent-dark); color: #fff;
}
.btn-big {
  font-size: 1.25rem;
  padding: var(--s-5) var(--s-7);
  border-radius: 3px;
}

/* The pill's link, so the deadline notice leads somewhere obvious */
.pill-cta {
  background: var(--urgent); color: #fff !important;
  padding: var(--s-2) var(--s-4);
  border-radius: 999px;
  font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.pill-cta:hover { background: var(--urgent-dark); color: #fff !important; }

/* ==========================================================================
   Read this first: three steps, left to right
   ========================================================================== */

.howto-h { font-size: var(--t-h3); margin-top: var(--s-8); }
.howto-h span {
  display: block; margin-top: var(--s-2);
  font-family: var(--font-body); font-size: var(--t-small);
  font-weight: 650; color: var(--urgent);
}

.howto {
  list-style: none; padding: 0; margin: var(--s-6) 0 0;
  display: grid; gap: var(--s-6);
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.howto-step {
  position: relative;
  background: #FDFBF6; border-radius: 5px;
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-3);
}
/* the arrow between steps, on wide screens only */
@media (min-width: 52rem) {
  /* widen the gap so the arrow disc sits in clear space between two cards */
  .howto { column-gap: var(--s-7); }
  .howto-step:not(:last-child)::after {
    content: "";
    position: absolute; top: 50%; right: calc(var(--s-7) / -2);
    transform: translate(50%, -50%);
    inline-size: 2.5rem; block-size: 2.5rem; border-radius: 999px;
    background: var(--coln-wash) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23556042' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14M13 6.5l5.5 5.5L13 17.5'/%3E%3C/svg%3E") center / 1.375rem 1.375rem no-repeat;
  }
}
.howto-num {
  inline-size: 2.5rem; block-size: 2.5rem; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 1.25rem; font-weight: 650;
  background: var(--coln); color: var(--paper);
}
.howto-step h4 { font-family: var(--font-display); font-size: var(--t-h4); }
.howto-step p { font-size: var(--t-small); color: var(--ink-2); }
.howto-step .btn { margin-top: auto; }

/* an icon carried in its own disc inside a button */
.btn-ico {
  inline-size: 1.75rem; block-size: 1.75rem; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
}
.btn-ico svg { inline-size: 1rem; block-size: 1rem; }

.howto-after { margin-top: var(--s-6); }
.howto-deadline {
  margin-top: var(--s-4);
  background: var(--coln-wash); border-radius: 4px;
  padding: var(--s-4) var(--s-5);
}

/* ==========================================================================
   Fallback routes, below the topics
   ========================================================================== */

.fallback { max-width: 68rem; margin: var(--s-9) auto 0; padding-top: var(--s-7); border-top: 1px solid var(--rule); }
.fallback h3 { font-size: var(--t-h3); }
.fallback-options {
  list-style: none; padding: 0; margin: var(--s-5) 0 0;
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.fallback-options .respond-option { position: static; }

/* breathing room between the framing paragraphs */
.builder-intro > p + p { margin-top: var(--s-4); }
.builder-intro .lede + p { margin-top: var(--s-5); }

/* --- The sweep on the main call to action -----------------------------------
   A band of light travelling across the button every few seconds, then a pause.
   Not a blink: the button never moves, never changes colour, and the sweep
   itself is a single pass under a second long, nowhere near the three-per-second
   flash threshold. It stops the moment someone points at it. */

@media (prefers-reduced-motion: no-preference) {
  .btn-urgent.btn-big { position: relative; overflow: hidden; }
  .btn-urgent.btn-big::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -45%;
    inline-size: 45%;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.55) 50%,
      rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    animation: respond-sweep 3.4s ease-in-out infinite;
  }

  /* stop once someone is actually interacting with it */
  .btn-urgent.btn-big:hover::after,
  .btn-urgent.btn-big:focus-visible::after { animation: none; opacity: 0; }

  @keyframes respond-sweep {
    0%   { transform: translateX(0) skewX(-18deg); }
    30%  { transform: translateX(400%) skewX(-18deg); }
    100% { transform: translateX(400%) skewX(-18deg); }
  }
}


/* --- Video guide band, directly under the hero ------------------------------
   One line, flat, and quieter than the hero buttons so it supports "Respond
   now" rather than competing with it. */

.watch-band { padding-block: var(--s-6); }
.watch-link {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: var(--s-5);
  max-inline-size: 46rem; margin-inline: auto;
  padding: var(--s-5);
  background: var(--pumpkin); border-radius: 5px;
  color: #fff; text-decoration: none;
  transition: background-color 150ms var(--ease-out);
}
.watch-link:hover { background: var(--pumpkin-dark); color: #fff; }
.watch-play {
  inline-size: 3rem; block-size: 3rem; flex: none; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--paper); color: var(--pumpkin);
}
.watch-play svg { inline-size: 1.2rem; block-size: 1.2rem; margin-inline-start: 3px; }
.watch-copy b {
  display: block;
  font-family: var(--font-display); font-size: var(--t-h4); font-weight: 650;
  line-height: 1.25;
}
.watch-copy > span {
  display: block; margin-top: var(--s-1);
  font-size: var(--t-small); color: #fff;
}

/* The glisten Adam asked for: a band of light crossing the box every few
   seconds, then a pause. Same mechanism as the Respond now button, so the two
   feel related without the video box borrowing the red that belongs to it. */
@media (prefers-reduced-motion: no-preference) {
  .watch-link::after {
    content: "";
    position: absolute; top: 0; bottom: 0; left: -45%;
    inline-size: 45%;
    background: linear-gradient(90deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.4) 50%,
      rgba(255, 255, 255, 0) 100%);
    pointer-events: none;
    animation: respond-sweep 3.4s ease-in-out infinite;
    animation-delay: 1.7s;   /* offset from the hero button, so they alternate */
  }
  .watch-link:hover::after,
  .watch-link:focus-visible::after { animation: none; opacity: 0; }
}

/* the same video box, sitting opposite the "Here's how to do it" heading */
.howto-top { display: grid; gap: var(--s-5); margin-top: var(--s-8); }
.howto-top .howto-h { margin-top: 0; }
@media (min-width: 62rem) {
  .howto-top {
    /* scales with the viewport so the heading never gets crushed at the
       narrow end, and the box stops growing once it is comfortably wide */
    grid-template-columns: minmax(0, 1fr) minmax(0, clamp(24rem, 42vw, 40rem));
    gap: var(--s-7); align-items: center;
  }
}
/* inside the grid cell it fills the column instead of centring itself */
.watch-link-inline { max-inline-size: none; margin-inline: 0; }