/* Tell The Greens - public site styles. Mobile first. Green and neutral only. */

@font-face {
  font-family: 'Archivo';
  src: url('/fonts/archivo-variable.woff2') format('woff2');
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
}
@font-face {
  font-family: 'Anton';
  src: url('/fonts/anton.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Overridden per campaign by an inline style block. */
  --brand: #6ab023;
  --brand-on-light: #3f7014;
  --brand-on-dark: #6ab023;
  --on-brand: #0f1210;
  --brand-soft: #edf5e4;
  --ink: #0f1210;

  --ink-2: #1b211d;
  --ink-3: #2a312c;
  --paper: #ffffff;
  --paper-2: #f3f5f2;
  --muted-light: #4d564f;
  --muted-dark: #b9c2bb;
  --line-light: #dfe4de;
  --line-dark: #333b35;

  --hero-bg: color-mix(in srgb, var(--brand) 30%, var(--ink));
  --hero-fg: var(--paper);
  --hero-accent: var(--brand-on-dark);
  --hero-muted: var(--muted-dark);

  --radius: 14px;
  --gutter: 16px;
  --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

html[data-mode='light'] {
  --hero-bg: var(--paper);
  --hero-fg: var(--ink);
  --hero-accent: var(--brand-on-light);
  --hero-muted: var(--muted-light);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--brand-on-light); text-underline-offset: 0.18em; }
h1, h2, h3 { line-height: 1.1; margin: 0 0 0.5em; word-spacing: 0.08em; }
.statement p, .wordmark, .footer-mark { word-spacing: 0.08em; }
p { margin: 0 0 1em; }

:focus-visible { outline: 3px solid var(--brand); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 760px; }

.skip-link {
  position: absolute; left: 8px; top: -60px; z-index: 100;
  background: var(--brand); color: var(--on-brand); padding: 10px 14px; border-radius: 8px; font-weight: 700;
}
.skip-link:focus { top: 8px; }

/* ---------- Top bar ---------- */
.topbar { background: var(--hero-bg); color: var(--hero-fg); border-bottom: 1px solid color-mix(in srgb, var(--hero-fg) 10%, transparent); }
.topbar-inner { display: flex; align-items: center; justify-content: space-between; min-height: 56px; gap: 12px; }
.wordmark {
  color: inherit; text-decoration: none; font-weight: 900; font-stretch: 80%;
  text-transform: uppercase; letter-spacing: 0.02em; font-size: 0.95rem;
}
.wordmark::before {
  /* A green Magen David before the site name. */
  content: ''; display: inline-block; width: 1em; height: 1em; margin-right: 0.45em; vertical-align: -0.12em;
  background: var(--brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23000' stroke-width='11' stroke-linejoin='miter' d='M50 8 L87 72 L13 72 Z M50 92 L13 28 L87 28 Z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cpath fill='none' stroke='%23000' stroke-width='11' stroke-linejoin='miter' d='M50 8 L87 72 L13 72 Z M50 92 L13 28 L87 28 Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.topbar-cta {
  color: var(--hero-accent); font-weight: 800; text-decoration: none; text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: 0.06em;
}

/* ---------- Hero ---------- */
.hero {
  background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 22%, var(--ink)) 0%, color-mix(in srgb, var(--brand) 42%, var(--ink)) 55%, color-mix(in srgb, var(--brand) 62%, var(--ink)) 100%);
  color: var(--hero-fg); padding: 44px 0 56px; position: relative; overflow: hidden;
}
.hero::after {
  /* a single bold green slab, nothing decorative beyond it */
  content: ''; position: absolute; right: -12vw; bottom: -14vw; width: 46vw; height: 46vw;
  background: var(--brand); opacity: 0.35; transform: rotate(-12deg); border-radius: 24px; pointer-events: none;
}
.kicker {
  color: var(--hero-accent); text-transform: uppercase; font-weight: 800; letter-spacing: 0.12em;
  font-size: 0.9rem; margin-bottom: 0.75rem;
}
.headline {
  font-weight: 900; font-stretch: 72%; text-transform: uppercase;
  --hl-base: clamp(3.4rem, 15vw, 8.5rem); font-size: min(var(--hl-base), var(--hl-fit, 999rem)); line-height: 0.86; letter-spacing: -0.01em; margin: 0;
}
/* The headline shrinks so its longest unbreakable phrase (the target's name, a highlighted phrase) fits the column. */
.hero-left { container-type: inline-size; }
.headline[style*='--hl-chars'] { --hl-fit: calc(100cqw / (var(--hl-chars) * var(--hl-factor, 0.76))); }
.hero-rule { width: 96px; height: 10px; background: var(--brand); margin: 22px 0 20px; border-radius: 2px; }
.hero-sub { margin: 10px 0 0; font-weight: 900; font-stretch: 72%; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; font-size: clamp(2.2rem, 9vw, 4.6rem); }
.hero-sub span { display: block; color: inherit; }
.hero-sub .hero-sub-alt { color: var(--red-on-green, var(--brand)); }
.hero-sub + .hero-rule { margin-top: 18px; }
.lede { font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.45; max-width: 40ch; position: relative; z-index: 1; }
.hero .lede { color: color-mix(in srgb, var(--hero-fg) 88%, transparent); }
.hero-cta {
  display: inline-flex; align-items: center; gap: 0.5em; margin-top: 12px; position: relative; z-index: 1;
  color: var(--hero-accent); font-weight: 800; text-decoration: none; font-size: 1.05rem;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}

/* ---------- World map ---------- */
.band-map { background: var(--paper-2); border-top: 1px solid var(--line-light); }
.map-views { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; margin: 4px 0 20px; }
.map-views .chip[aria-selected='true'] { background: var(--ink); color: var(--paper); }
.map-grid { display: grid; gap: 28px; }
.map-figure { background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 12px; }
.m-svg { width: 100%; height: auto; display: block; }
.m-land path, .m-svg circle { fill: #d9ded8; stroke: var(--paper); stroke-width: 0.4; }
/* Majority view: one clear colour per religion. Israel is Israel blue in both views. */
[data-view='majority'] .maj-christian { fill: #2a312c; }
[data-view='majority'] .maj-muslim { fill: #6ab023; }
[data-view='majority'] .maj-buddhist { fill: #c9a227; }
[data-view='majority'] .maj-hindu { fill: #e07b2a; }
[data-view='majority'] .maj-other { fill: #d9ded8; }
/* Official state religion view */
[data-view='official'] .off-islam { fill: #6ab023; }
[data-view='official'] .off-christianity { fill: #2a312c; }
[data-view='official'] .off-buddhism { fill: #c9a227; }
[data-view='majority'] .map-official, [data-view='official'] .map-majority { display: none; }
.m-svg .maj-jewish, .m-svg .off-judaism, .m-il { fill: #0038b8; stroke: #ffffff; stroke-width: 0.8; }
.m-halo { fill: none; stroke: #0038b8; stroke-width: 2; }
.m-arrow { stroke: #0038b8; stroke-width: 4.5; stroke-linecap: round; }
.m-arrowhead { fill: #0038b8; }
.m-label { font: 900 26px var(--font); fill: #0038b8; letter-spacing: 0.06em; paint-order: stroke; stroke: #ffffff; stroke-width: 6px; stroke-linejoin: round; }
/* Phones show the map at under half size, so the callout is drawn larger to compensate. */
@media (max-width: 719px) {
  .m-halo { r: 13; stroke-width: 3.5; }
  .m-arrow { stroke-width: 10; }
  .m-label { font-size: 52px; stroke-width: 12px; }
}
.map-legend { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 12px 4px 0; padding: 0; font-size: 0.92rem; font-weight: 600; }
.map-legend li { display: inline-flex; align-items: center; gap: 8px; }
.swatch { width: 16px; height: 16px; border-radius: 4px; border: 1px solid var(--line-light); display: inline-block; background: #d9ded8; }
.swatch.maj-christian, .swatch.off-christianity { background: #2a312c; }
.swatch.maj-muslim, .swatch.off-islam { background: #6ab023; }
.swatch.maj-buddhist, .swatch.off-buddhism { background: #c9a227; }
.swatch.maj-hindu { background: #e07b2a; }
.swatch.maj-jewish, .swatch.off-judaism { background: #0038b8; }
.map-big { font-size: 1.35rem; line-height: 1.3; margin-bottom: 8px; }
.map-big strong { display: block; font-size: clamp(3.5rem, 12vw, 6rem); font-weight: 900; font-stretch: 75%; line-height: 0.9; color: var(--brand-on-light); }
.map-counts { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 1.05rem; }
.map-counts strong { font-weight: 900; font-size: 1.3em; }
.map-intro { font-size: 1.15rem; }
.map-note { font-weight: 800; font-size: 1.15rem; border-left: 6px solid var(--brand); padding-left: 14px; margin-top: 4px; }
.map-list { margin-top: 20px; }
.map-list summary { cursor: pointer; font-weight: 700; }
.map-list-title { font-size: 1.1rem; margin: 18px 0 6px; }
.map-list-cols { display: grid; gap: 12px 24px; }
.map-list-cols h4 { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 0.04em; margin: 0 0 4px; }
.map-list-cols ul { margin: 0; padding-left: 1.1em; font-size: 0.95rem; columns: 2; }
.map-source { font-size: 0.85rem; color: var(--muted-light); margin: 16px 0 0; }
@media (min-width: 900px) {
  .map-grid { grid-template-columns: 1.5fr 1fr; align-items: center; }
  .map-list-cols { grid-template-columns: repeat(3, 1fr); }
  .map-list-cols ul { columns: 1; }
}

/* ---------- Hero extras, facts strip, sticky bar ---------- */
.stamp {
  display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; padding: 6px 14px 6px 6px; border-radius: 999px;
  background: color-mix(in srgb, var(--hero-fg) 10%, transparent); font-weight: 800; font-size: 0.95rem; position: relative; z-index: 1;
}
.stamp span { background: var(--brand); color: var(--on-brand); border-radius: 999px; padding: 3px 10px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 18px; position: relative; z-index: 1; }
.btn-hero { font-size: 1.15rem; padding: 16px 30px; min-height: 60px; text-transform: uppercase; letter-spacing: 0.02em; }
.hero-actions .hero-cta { margin-top: 0; }
.facts { background: var(--brand); color: var(--on-brand); padding: 26px 0; }
.facts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 24px; }
.fact strong { display: block; font-weight: 900; font-stretch: 75%; font-size: clamp(2.4rem, 7vw, 3.6rem); line-height: 0.95; letter-spacing: -0.01em; }
.fact strong em { font-style: normal; font-size: 0.6em; vertical-align: top; }
.fact span { display: block; font-weight: 600; font-size: 0.95rem; line-height: 1.3; margin-top: 4px; max-width: 22ch; }
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--ink); color: var(--paper);
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom)); box-shadow: 0 -10px 30px rgb(0 0 0 / 0.25);
  transform: translateY(100%); transition: transform 0.25s ease;
}
.sticky-cta.is-shown { transform: none; }
.sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.sticky-text { font-weight: 900; font-stretch: 80%; text-transform: uppercase; font-size: 1rem; }
.sticky-cta .btn { min-height: 44px; padding: 10px 18px; white-space: nowrap; }
@media (max-width: 479px) {
  .sticky-text { display: none; }
  .sticky-cta .btn { flex: 1; }
}
@media (prefers-reduced-motion: reduce) { .sticky-cta { transition: none; } }
@media (min-width: 720px) {
  .facts { padding: 34px 0; }
  .facts-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Content bands ---------- */
.band { padding: 64px 0; }
.band-ask { background: var(--paper-2); }
.two-col { display: grid; gap: 8px; }
.section-title {
  font-weight: 900; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.9rem, 5vw, 2.8rem);
}
.prose { font-size: 1.15rem; max-width: 62ch; }
.prose p:last-child { margin-bottom: 0; }
.def-title { font-weight: 900; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.1rem; color: var(--brand-on-light); margin: 0 0 8px; }
.def-title:not(:first-child) { margin-top: 28px; }

.statement { background: var(--brand); color: var(--on-brand); padding: 44px 0; }
.statement p {
  margin: 0; font-weight: 900; font-stretch: 70%; text-transform: uppercase;
  font-size: clamp(2.4rem, 11vw, 7rem); line-height: 0.9; letter-spacing: -0.01em;
}

.steps { counter-reset: step; list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.steps li {
  counter-increment: step; position: relative; padding: 16px 16px 16px 64px; background: var(--paper);
  border: 1px solid var(--line-light); border-radius: var(--radius);
}
.steps li::before {
  content: counter(step); position: absolute; left: 16px; top: 14px; width: 34px; height: 34px;
  display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--paper);
  font-weight: 900;
}

/* ---------- Action ---------- */
.act { background: var(--hero-bg); color: var(--hero-fg); padding: 72px 0 80px; scroll-margin-top: 0; }
.act-inner { text-align: center; }
.act-title {
  font-weight: 900; font-stretch: 75%; text-transform: uppercase;
  font-size: clamp(2.2rem, 8vw, 4.5rem); line-height: 0.95;
}
.act-sub { color: var(--hero-muted); max-width: 52ch; margin: 0 auto 32px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: 48px; padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 800; text-decoration: none; cursor: pointer; line-height: 1.2;
  transition: transform 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--brand); color: var(--on-brand); }
.btn-primary:hover { background: color-mix(in srgb, var(--brand) 88%, var(--paper)); }
.btn-ghost { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost:hover { background: color-mix(in srgb, currentColor 10%, transparent); }
.btn-small { min-height: 40px; padding: 8px 16px; font-size: 0.95rem; }

.btn-giant {
  background: var(--brand); color: var(--on-brand);
  font-size: clamp(1.35rem, 5vw, 2rem); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em;
  padding: 24px 44px; min-height: 76px; width: min(100%, 520px);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 60%, transparent);
}
.btn-giant:hover { transform: translateY(-2px); }
/* Every button that leads to the email being sent pulses: a ring in the brand colour, or in the ink where the brand is the background. */
.btn-giant.is-pulsing, .btn-pulse { --pulse: var(--brand); animation: pulse 2.2s ease-in-out infinite; }
.hero .btn-pulse, .band-the-pledge .btn-pulse, .sticky-cta .btn-pulse { --pulse: var(--ink); }
.send-with .btn-pulse { animation-duration: 2.8s; }
.send-with .btn-pulse:nth-child(2) { animation-delay: 0.3s; }
.send-with .btn-pulse:nth-child(3) { animation-delay: 0.6s; }
.send-with .btn-pulse:nth-child(4) { animation-delay: 0.9s; }
.send-with .btn-pulse:nth-child(5) { animation-delay: 1.2s; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse, var(--brand)) 55%, transparent); transform: scale(1); }
  50% { transform: scale(1.03); }
  70% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--pulse, var(--brand)) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--pulse, var(--brand)) 0%, transparent); transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .btn-giant.is-pulsing, .btn-pulse { animation: none; outline: 3px solid color-mix(in srgb, var(--pulse, var(--brand)) 50%, transparent); outline-offset: 6px; }
}

.email-panel {
  text-align: left; margin: 36px auto 0; max-width: 820px; background: var(--paper); color: var(--ink);
  border-radius: 20px; padding: 22px var(--gutter) 26px; box-shadow: 0 20px 60px rgb(0 0 0 / 0.35);
}
html[data-mode='light'] .email-panel { border: 1px solid var(--line-light); box-shadow: 0 16px 40px rgb(15 18 16 / 0.1); }
.panel-title { font-weight: 900; font-stretch: 80%; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 4px; }
.panel-title:focus { outline: none; }
.open-status { color: var(--muted-light); min-height: 1.6em; font-weight: 600; margin-bottom: 12px; }
.open-status.is-live::before {
  content: ''; display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 8px;
  background: var(--brand); vertical-align: 0.05em;
}

.actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0; }
.actions .btn { flex: 1 1 auto; }

.area-pick { margin: 14px 0 6px; }
.area-selects { display: flex; flex-wrap: wrap; gap: 10px; }
.area-selects select { font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper-2); border: 2px solid var(--line-light); border-radius: 10px; padding: 10px 12px; max-width: 100%; flex: 1 1 260px; }
.area-selects select:focus { border-color: var(--brand-on-light); outline: none; background: var(--paper); }
.councillors-index-email { font-size: 0.85rem; font-weight: 700; color: var(--brand-on-light); text-decoration: none; border-bottom: 2px solid currentColor; margin-left: 8px; white-space: nowrap; }
.councillors-index-cta { margin: 0 0 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.councillors-index-cta .hint { margin: 0; }
.envelope { margin: 18px 0; border-top: 1px solid var(--line-light); }
.env-row { display: grid; grid-template-columns: 52px 1fr; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line-light); }
.env-row dt { font-weight: 800; color: var(--muted-light); text-transform: uppercase; font-size: 0.85rem; padding-top: 2px; }
.env-row dd { margin: 0; overflow-wrap: anywhere; font-size: 0.98rem; }
.cc-details summary { cursor: pointer; font-weight: 600; display: inline; }
.cc-list { margin: 8px 0 0; padding-left: 1.1em; font-size: 0.92rem; color: var(--muted-light); columns: 1; }
.copy-mini {
  font: inherit; font-size: 0.8rem; font-weight: 700; color: var(--brand-on-light); background: none; border: 0;
  padding: 2px 4px; margin-left: 4px; cursor: pointer; text-decoration: underline; text-underline-offset: 0.2em;
}
.hint { font-size: 0.88rem; color: var(--muted-light); margin: 6px 0 0; }

.variant-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0 16px; }
.variant-label { font-weight: 800; font-size: 0.85rem; text-transform: uppercase; color: var(--muted-light); }
.chips { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; }
.chip {
  font: inherit; font-weight: 700; font-size: 0.92rem; border: 0; background: none; color: var(--ink);
  padding: 8px 14px; min-height: 40px; cursor: pointer;
}
.chip + .chip { border-left: 2px solid var(--ink); }
.chip[aria-pressed='true'] { background: var(--ink); color: var(--paper); }

.field { display: block; margin-bottom: 14px; }
.field-label { display: block; font-weight: 800; margin-bottom: 6px; }
.field-note { display: block; font-weight: 500; font-size: 0.88rem; color: var(--muted-light); }
.field input,
.field textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper-2);
  border: 2px solid var(--line-light); border-radius: 10px; padding: 12px 14px;
}
.field textarea { line-height: 1.55; resize: vertical; min-height: 280px; }
.field input:focus,
.field textarea:focus { border-color: var(--brand-on-light); outline: none; background: var(--paper); }

/* ---------- What next ---------- */
.next { padding: 64px 0 80px; background: var(--paper); scroll-margin-top: 0; }
.next .section-title:focus { outline: none; }
.next-lede { font-size: 1.2rem; max-width: 58ch; }
.guidance {
  border-left: 6px solid var(--brand); background: var(--brand-soft); padding: 16px 18px; border-radius: 0 var(--radius) var(--radius) 0;
  margin: 20px 0 28px; font-weight: 600; max-width: 70ch;
}
.guidance p { margin: 0; }
.cards { display: grid; gap: 16px; }
.card {
  border: 2px solid var(--ink); border-radius: 18px; padding: 22px 20px; display: flex; flex-direction: column; gap: 4px;
}
.card h3 { font-weight: 900; font-stretch: 80%; text-transform: uppercase; font-size: 1.45rem; }
.card p { color: var(--muted-light); }
.card .btn { align-self: flex-start; }
.card-result:empty { display: none; }
.card-result { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line-light); }
.card .who { font-weight: 800; font-size: 1.15rem; margin: 0; color: var(--ink); }
.card .where { color: var(--muted-light); margin: 0 0 10px; }
.tel-link { display: inline-block; font-size: 1.35rem; font-weight: 900; color: var(--brand-on-light); margin: 2px 0 8px; }
.card-result textarea {
  width: 100%; font: inherit; font-size: 0.98rem; border: 2px solid var(--line-light); border-radius: 10px; padding: 10px 12px;
  background: var(--paper-2); min-height: 130px; margin: 6px 0 10px; resize: vertical; color: var(--ink);
}
.link-btn {
  font: inherit; background: none; border: 0; color: var(--brand-on-light); text-decoration: underline;
  text-underline-offset: 0.2em; cursor: pointer; padding: 0; font-weight: 700;
}
.share { margin-top: 40px; padding-top: 28px; border-top: 1px solid var(--line-light); }
.share h3 { font-weight: 900; text-transform: uppercase; font-stretch: 80%; }
.share .btn:not(.share-btn) { color: var(--ink); }

.notice { background: var(--brand-soft); color: var(--ink); padding: 12px 16px; border-radius: 10px; margin-top: 20px; }

.toast {
  position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 50;
  background: var(--ink); color: var(--paper); padding: 12px 18px; border-radius: 999px; font-weight: 700;
  box-shadow: 0 10px 30px rgb(0 0 0 / 0.3); max-width: calc(100% - 32px);
}

/* ---------- Spread the word ---------- */
.spread { padding: 64px 0 80px; background: var(--paper-2); }
.social-tabs { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; margin: 8px 0 20px; }
.social-tabs .chip[aria-selected='true'] { background: var(--ink); color: var(--paper); }
.social-panel { display: grid; gap: 20px; background: var(--paper); border: 1px solid var(--line-light); border-radius: 20px; padding: 18px; }
.social-image img { width: 100%; max-width: 420px; height: auto; display: block; border-radius: 10px; box-shadow: 0 10px 30px rgb(15 18 16 / 0.15); }
.social-image-actions { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; margin-top: 12px; }
.social-image-actions .chip.is-on { background: var(--ink); color: var(--paper); }
.social-text .field textarea { min-height: 200px; }
.social-text .actions { margin-top: 10px; }
#card-share .btn { align-self: flex-start; }
@media (min-width: 820px) {
  .social-panel { grid-template-columns: 420px 1fr; padding: 28px; }
  .spread { padding: 96px 0; }
}

/* ---------- Simple pages ---------- */
.page { padding: 56px 0 72px; min-height: 60vh; }
.page-title { font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: clamp(2.4rem, 8vw, 4rem); }

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--muted-dark); padding: 36px 0 44px; font-size: 0.95rem; }
.footer-inner { display: grid; gap: 28px 32px; grid-template-columns: 1fr; }
.footer-mark { color: var(--paper); font-weight: 900; text-transform: uppercase; font-stretch: 80%; margin: 0; }
.footer-note { margin: 0; max-width: 60ch; }
.footer-col { display: flex; flex-direction: column; gap: 10px; align-content: start; }
.footer-col a { text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--paper) 25%, transparent); width: fit-content; line-height: 1.3; }
.footer-col a:hover { border-bottom-color: var(--brand); color: var(--brand); }
.site-footer a { color: var(--paper); }

/* ---------- Larger screens ---------- */
@media (min-width: 720px) {
  :root { --gutter: 28px; }
  .hero { padding: 64px 0 80px; }
  .band { padding: 96px 0; }
  .email-panel { padding: 32px 36px 36px; }
  .env-row { grid-template-columns: 64px 1fr; }
  .cc-list { columns: 2; }
  .cards { grid-template-columns: repeat(2, 1fr); }
  .actions .btn { flex: 0 1 auto; }
}
@media (min-width: 960px) {
  .two-col { grid-template-columns: 320px 1fr; gap: 48px; align-items: start; }
  .cards { grid-template-columns: repeat(4, 1fr); }
}

/* Send-with buttons: the email app in brand green, each webmail service in its own colour. */
.send-with .btn-send { color: #fff; border-color: transparent; }
.send-with .btn-send:hover { filter: brightness(1.08); }
.send-app { background: var(--brand); color: var(--on-brand) !important; }
.send-gmail { background: #c5221f; }
.send-outlook { background: #0f6cbd; }
.send-m365 { background: #d83b01; }
.send-yahoo { background: #5f01d1; }
.field-name input { max-width: 420px; }
.hint-warn { color: #8a4b00; background: #fff4e0; border-left: 4px solid #e08a00; padding: 8px 12px; border-radius: 6px; margin: -6px 0 14px; font-weight: 600; }

/* Statement line under the intro */
.pull { background: var(--paper); color: var(--ink); padding: 40px 0; border-top: 6px solid var(--brand); }
.pull-quote {
  margin: 0; font-weight: 900; font-stretch: 80%; line-height: 1.05; letter-spacing: -0.01em;
  font-size: clamp(1.7rem, 5.2vw, 3.4rem); max-width: 22ch;
}
.pull-quote::before { content: '\201C'; color: var(--brand); margin-right: 0.08em; }
.pull-quote::after { content: '\201D'; color: var(--brand); margin-left: 0.08em; }

/* ---------- Hero art: the share image as a tilted card (desktop only) ---------- */
.hero-art { display: none; }
@media (min-width: 980px) {
  .hero { padding: 56px 0 72px; }
  .hero::after { display: none; }
  .hero .wrap { position: relative; z-index: 1; max-width: 1120px; padding-right: 420px; }
  .hero-art {
    display: block; position: absolute; right: max(24px, calc((100% - 1120px) / 2 + 24px)); top: 50%; margin: 0;
    width: 340px; aspect-ratio: 1; transform: translateY(-50%) rotate(-4deg);
    border-radius: 18px; overflow: hidden; box-shadow: 0 30px 60px rgb(0 0 0 / 0.45), 0 0 0 1px rgb(255 255 255 / 0.08);
    background: var(--brand);
  }
  .hero-art img { width: 100%; height: 100%; display: block; object-fit: cover; }
}

/* ---------- The argument: numbered cards with a sticky side nav ---------- */
.band-why { background: var(--paper); }
/* ---------- The Greens' reply, answered ---------- */
.band-reply { background: var(--paper-2); border-top: 1px solid var(--line-light); }
.reply-lede { font-size: 1.1rem; max-width: 68ch; margin: 0 0 28px; }
.reply-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 18px; counter-reset: reply; }
.reply-item { counter-increment: reply; display: grid; gap: 0; background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; }
.reply-quote { margin: 0; padding: 20px 22px 18px; background: var(--ink); color: #fff; border-left: 8px solid var(--red, #b80f24); }
.reply-quote::before { content: 'They say ' counter(reply, decimal-leading-zero); display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: rgb(255 255 255 / 0.7); margin-bottom: 8px; }
.reply-quote p { margin: 0; font-size: 1.12rem; line-height: 1.5; font-weight: 600; }
.reply-quote p::before { content: '\201C'; } .reply-quote p::after { content: '\201D'; }
.reply-quote cite { display: block; margin-top: 10px; font-style: normal; font-size: 0.82rem; color: rgb(255 255 255 / 0.7); }
.reply-answer { padding: 20px 22px 22px; border-left: 8px solid var(--brand); }
.reply-answer::before { content: 'We say'; display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-on-light); margin-bottom: 6px; }
.reply-heading { margin: 0 0 10px; font-size: 1.35rem; line-height: 1.2; font-weight: 900; font-stretch: 85%; }
.reply-answer p { margin: 0 0 10px; max-width: 70ch; line-height: 1.55; }
.reply-cite { font-weight: 700; } .reply-cite a { color: var(--brand-on-light); text-decoration: none; border-bottom: 2px solid currentColor; }
.reply-cta { margin-top: 26px; }
.reply-hint { max-width: 70ch; }
@media (min-width: 900px) { .reply-item { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .reply-quote { border-left: 0; border-top: 0; } .reply-answer { border-left: 0; border-top: 0; } .reply-item { border-left: 8px solid var(--brand); } }

.why-side .section-title { margin-bottom: 18px; }
.why-nav ol { list-style: none; padding: 0; margin: 0 0 20px; counter-reset: why; display: none; }
.why-nav li { counter-increment: why; }
.why-nav a {
  display: flex; gap: 10px; align-items: baseline; padding: 8px 0; color: inherit; text-decoration: none; font-weight: 700;
  border-bottom: 1px solid var(--line-light);
}
.why-nav a::before { content: counter(why, decimal-leading-zero); color: var(--brand-on-light); font-weight: 900; font-size: 0.85rem; }
.why-nav a:hover { color: var(--brand-on-light); }
.why-btn { display: none; }
.argument { display: grid; gap: 18px; }
.arg {
  display: grid; grid-template-columns: auto 1fr; gap: 14px; padding: 22px 20px;
  background: var(--paper-2); border: 1px solid var(--line-light); border-radius: var(--radius);
  scroll-margin-top: 80px;
}
.arg-num { font-weight: 900; font-stretch: 75%; font-size: 2rem; line-height: 1; color: var(--brand-on-light); opacity: 0.9; }
.arg .def-title { margin-top: 2px; }
.arg .def-title:not(:first-child) { margin-top: 2px; }
.arg .prose { font-size: 1.08rem; max-width: 60ch; }
.arg .prose p:first-child { font-weight: 600; }
.arg-law { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.arg-law .def-title, .arg-law .arg-num { color: var(--brand-on-dark); } /* the brand colour tuned to read on ink, so a dark brand (navy) still shows */
.arg-law a { color: var(--brand-on-dark); }
@media (min-width: 900px) {
  .why-side { position: sticky; top: 24px; }
  .why-nav ol { display: block; }
  .why-btn { display: inline-flex; }
  .arg { padding: 28px 28px 28px 24px; gap: 20px; }
  .arg-num { font-size: 2.6rem; }
}

/* ---------- Questions and answers ---------- */
.band-faq { background: var(--paper-2); }
.faq-list { margin-top: 20px; display: grid; gap: 10px; max-width: 820px; }
.faq { background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius); padding: 0 18px; }
.faq summary { list-style: none; cursor: pointer; padding: 16px 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary h3 { margin: 0; font-size: 1.1rem; font-weight: 800; }
.faq summary::after { content: '+'; font-weight: 900; font-size: 1.4rem; color: var(--brand-on-light); flex: none; }
.faq[open] summary::after { content: '\2013'; }
.faq-a { padding: 0 0 18px; font-size: 1.05rem; }

/* ---------- The motion, line by line ---------- */
.motion-page { padding-top: 40px; }
.kicker-dark { color: var(--brand-on-light); }
.motion-lede { max-width: 70ch; font-size: 1.2rem; }
.motion-summary { margin: 28px 0 8px; padding: 24px; background: var(--ink); color: var(--paper); border-radius: var(--radius); }
.motion-summary .section-title { color: var(--brand); font-size: 1.4rem; margin: 0 0 12px; }
.motion-points { margin: 0; padding-left: 1.4em; display: grid; gap: 10px; font-size: 1.05rem; font-weight: 600; max-width: 75ch; }
.motion-points li::marker { color: var(--brand); font-weight: 900; }
.motion-cta { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: center; margin: 20px 0 0; }
.motion-summary .hero-cta { color: var(--paper); }
.backer-search { margin: 22px 0 0; max-width: 56ch; }
.backer-search-label { display: block; margin: 0 0 6px; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-light); }
.backer-search-row { display: flex; gap: 8px; }
.backer-search-row input { flex: 1; min-width: 0; padding: 10px 14px; font-size: 1.05rem; border: 1px solid var(--line-light); border-radius: var(--radius); }
.backer-search-note { margin: 8px 0 0; font-size: 0.95rem; color: var(--muted-light); }
.list-filter { margin: 22px 0 0; }
.list-filter-label { margin: 0 0 6px; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-light); }
.list-filter ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.list-filter a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-light); border-radius: 999px; font-weight: 700; text-decoration: none; color: inherit; }
.list-filter a[aria-current='page'] { background: var(--ink); color: #fff; border-color: var(--ink); }
.list-filter-note { margin: 10px 0 0; max-width: 70ch; color: var(--muted-light); }
.motion-nav ul { list-style: none; padding: 0; margin: 24px 0 8px; display: flex; flex-wrap: wrap; gap: 8px; }
.motion-nav a { display: inline-block; padding: 8px 14px; border: 1px solid var(--line-light); border-radius: 999px; font-weight: 700; text-decoration: none; color: inherit; }
.motion-nav a:hover { border-color: var(--brand-on-light); color: var(--brand-on-light); }
.motion-section { margin-top: 40px; scroll-margin-top: 70px; }
.motion-section .section-title { font-size: clamp(1.5rem, 4vw, 2.1rem); margin-bottom: 8px; }
.clause { display: grid; gap: 0; margin-top: 18px; border: 1px solid var(--line-light); border-radius: var(--radius); overflow: hidden; scroll-margin-top: 70px; }
.clause-quote { background: var(--paper-2); padding: 20px 22px; border-left: 6px solid var(--ink-3); }
.clause-quote blockquote { margin: 0; font-size: 1.02rem; line-height: 1.55; }
.clause-quote blockquote p { margin: 0 0 10px; }
.clause-quote blockquote p:last-child { margin: 0; }
.clause-response { padding: 20px 22px; border-left: 6px solid var(--brand); }
.clause-response .prose { font-size: 1.05rem; max-width: none; }
.clause-label { margin: 0 0 8px; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-light); }
.clause-label-ours { color: var(--brand-on-light); }
/* who proposed the motion: a dark card with the facts up top, the detail below */
.motion-proposer .kicker { margin-bottom: 0.4rem; }
.proposer-card { background: var(--ink); color: var(--paper); border-radius: var(--radius); padding: 28px 28px 24px; margin-top: 18px; border-top: 8px solid var(--brand); }
.proposer-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 20px; }
.proposer-name { margin: 0; font-size: clamp(1.6rem, 3.6vw, 2.2rem); font-weight: 900; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.01em; color: var(--brand); }
.proposer-role { margin: 0; color: var(--muted-dark); max-width: 60ch; font-size: 1rem; line-height: 1.45; }
.proposer-facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.proposer-facts li { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); border-left: 5px solid var(--red-on-dark, #ff6b6b); border-radius: 12px; padding: 14px 16px 12px; display: grid; gap: 4px; }
.proposer-facts strong { display: block; font-size: clamp(1.3rem, 2.8vw, 1.7rem); font-weight: 900; font-stretch: 85%; line-height: 1.1; color: #fff; }
.proposer-facts span { font-size: 0.92rem; color: var(--muted-dark); line-height: 1.4; }
.proposer-pull { margin: 24px 0 0; padding: 0 0 0 20px; border-left: 5px solid var(--brand); }
.proposer-pull p { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 900; font-stretch: 85%; line-height: 1.1; color: #fff; }
.proposer-pull p::before { content: '\201C'; color: var(--brand); } .proposer-pull p::after { content: '\201D'; color: var(--brand); }
.proposer-pull footer { margin-top: 8px; font-size: 0.85rem; color: var(--muted-dark); }
.proposer-body { margin-top: 24px; padding-top: 22px; border-top: 1px solid rgb(255 255 255 / 0.12); font-size: 1.05rem; line-height: 1.55; color: rgb(255 255 255 / 0.9); }
.proposer-body p { margin: 0 0 1em; } .proposer-body p:last-child { margin-bottom: 0; }
.proposer-body .r { color: var(--red-on-dark); }
.proposer-source { margin: 20px 0 0; font-size: 0.85rem; color: var(--muted-dark); }
.proposer-source a { color: var(--paper); }
@media (min-width: 760px) {
  .proposer-facts { grid-template-columns: repeat(3, 1fr); }
  .proposer-body { column-count: 2; column-gap: 36px; }
  .proposer-body p { break-inside: avoid; }
}
.motion-closing { margin-top: 48px; }
/* Arrow links outside the hero sit on the page background, so they take the light-background accent. */
.motion-closing .hero-cta, .page-body .hero-cta, .backers-intro .hero-cta { color: var(--brand-on-light); }
.motion-closing .prose { font-size: 1.15rem; max-width: 70ch; }
.motion-source { font-size: 0.85rem; color: var(--muted-light); margin-top: 24px; max-width: 80ch; }
@media (min-width: 900px) {
  .clause { grid-template-columns: 1fr 1.15fr; }
  .clause-quote { border-left-width: 8px; }
  .clause-response { border-left: 1px solid var(--line-light); border-top: 6px solid var(--brand); }
}

.why-more { margin: 14px 0 0; font-weight: 700; }
.why-more a, .arg-more a { color: var(--brand-on-light); text-decoration: none; border-bottom: 2px solid currentColor; }
.arg-more { margin: 14px 0 0; font-weight: 700; }
.arg-law .arg-more a { color: var(--brand); }

.statement .statement-sub {
  font-size: clamp(1.25rem, 3.6vw, 2.2rem); line-height: 1.15; text-transform: none; font-stretch: 90%;
  font-weight: 800; letter-spacing: 0; margin-top: 18px; max-width: 26ch;
}

.pull-quote + .pull-quote { margin-top: 22px; }

.steps li a { color: inherit; text-decoration: none; }
.steps li a strong { border-bottom: 2px solid var(--brand); }
.steps li a:hover strong { color: var(--brand-on-light); }

.cta-line { font-weight: 900; font-stretch: 85%; font-size: clamp(1.3rem, 3.4vw, 1.9rem); margin: 18px 0 0; color: var(--hero-accent); position: relative; z-index: 1; }

.hero .btn-hero { box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }
.hero .kicker { color: #c6f08f; }
.hero .cta-line { color: #d8ff9c; }
.hero .hero-cta { color: #d8ff9c; }
.topbar { background: var(--ink); }

.hero .btn-hero { box-shadow: 0 10px 30px rgb(0 0 0 / 0.35); }
.hero .kicker, .hero .cta-line, .hero .hero-cta { color: #d8ff9c; }
.topbar { background: var(--ink); }

/* ---------- Polish pass ---------- */
:root { --radius-lg: 18px; }
.section-title { letter-spacing: 0.015em; }
.band { padding: 72px 0; }
.band-why { padding: 80px 0 72px; }
.band-map { padding: 72px 0 64px; border-top: 0; }
.band-ask { padding: 64px 0 72px; background: var(--paper); border-top: 1px solid var(--line-light); }
.band-faq { padding: 64px 0 80px; }

/* hero: fine grain texture and a soft glow behind the card */
.hero::before {
  content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.35;
  background-image: repeating-linear-gradient(135deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 14px);
}
.hero .wrap { position: relative; z-index: 1; }
.stamp { background: rgb(255 255 255 / 0.12); backdrop-filter: blur(4px); }
@media (min-width: 980px) {
  .hero-art { box-shadow: 0 40px 80px rgb(0 0 0 / 0.5), 0 0 0 1px rgb(255 255 255 / 0.1), 0 0 120px rgb(106 176 35 / 0.35); }
}

/* statement under the hero: centred, with a big quotation mark */
.pull { padding: 56px 0 60px; background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); border-top: 0; position: relative; }
.pull .wrap { text-align: center; }
.pull-quote { margin: 0 auto; max-width: 26ch; position: relative; display: inline-block; text-align: left; }
.pull-quote::before { position: absolute; left: -0.55em; top: -0.08em; font-size: 1.4em; line-height: 1; }
.pull-quote::after { font-size: 1.1em; }
.pull::after { content: ''; display: block; width: 72px; height: 6px; background: var(--brand); margin: 28px auto 0; border-radius: 3px; }

/* facts strip: dividers between the numbers */
.facts-grid { gap: 22px 0; }
.fact { padding: 4px 18px 4px 16px; border-left: 3px solid rgb(0 0 0 / 0.22); }
.statement { padding: 52px 0 56px; }
.statement p { text-shadow: 0 2px 0 rgb(0 0 0 / 0.08); }

/* argument cards */
.arg { border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 8px 24px rgb(0 0 0 / 0.04); border-color: color-mix(in srgb, var(--line-light) 70%, transparent); }
.arg-num { opacity: 0.55; }
.arg-law { box-shadow: 0 16px 40px rgb(0 0 0 / 0.25); }
.why-nav a { padding: 10px 0; }
.why-nav a::before { min-width: 1.6em; }
.why-side .section-title::after { content: ''; display: block; width: 56px; height: 6px; background: var(--brand); margin-top: 14px; border-radius: 3px; }

/* map card */
.map-figure { border-radius: var(--radius-lg); box-shadow: 0 8px 28px rgb(0 0 0 / 0.06); }

/* asking steps: green numbers */
.steps { gap: 12px; }
.steps li { border-radius: 14px; box-shadow: 0 1px 2px rgb(0 0 0 / 0.04); }
.steps li::before { background: var(--brand); color: var(--ink); }

/* act band: a lit centre and a rule above the title */
.act {
  background: radial-gradient(ellipse 70% 60% at 50% 0%, color-mix(in srgb, var(--brand) 48%, var(--ink)) 0%, color-mix(in srgb, var(--brand) 22%, var(--ink)) 70%);
  padding: 80px 0 96px;
}
.act-title::before { content: ''; display: block; width: 72px; height: 6px; background: var(--brand); margin: 0 auto 22px; border-radius: 3px; }
.email-panel { border-radius: var(--radius-lg); box-shadow: 0 30px 80px rgb(0 0 0 / 0.35); }

/* next and spread */
.next { padding: 72px 0 80px; }
.card { border-radius: var(--radius-lg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.04), 0 10px 30px rgb(0 0 0 / 0.05); }
.spread { padding: 72px 0 88px; }

/* footer */
.site-footer { padding: 44px 0 52px; border-top: 6px solid var(--brand); }
.footer-mark { font-size: 1.2rem; }

/* FAQ */
.faq { border-radius: 14px; }
.faq[open] { box-shadow: 0 8px 24px rgb(0 0 0 / 0.05); }

/* ---------- The word "racist", in red that suits its background ---------- */
:root { --red-on-light: #b80f24; --red-on-dark: #ff6b6b; --red-on-green: #8a0014; --red-on-deep-green: #ff8585; }
.r { font-style: normal; color: var(--red-on-light); font-weight: inherit; }
.hero .r, .act .r { color: var(--red-on-deep-green); }
.arg-law .r, .motion-summary .r, .site-footer .r { color: var(--red-on-dark); }
.statement .r, .facts .r { color: var(--red-on-green); }
.pull-quote .r { color: var(--red-on-light); }
.statement-sub .r { text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--red-on-green) 55%, transparent); text-underline-offset: 0.12em; text-decoration-thickness: 0.08em; }

/* Head office: open or closed right now */
.hours { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: -4px 0 10px; font-size: 0.95rem; color: var(--ink); }
.hours-dot { width: 10px; height: 10px; border-radius: 50%; background: #9aa39c; flex: none; align-self: center; }
.hours.is-open .hours-dot { background: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 25%, transparent); }
.hours.is-closed .hours-dot { background: #c43b3b; box-shadow: 0 0 0 4px rgb(196 59 59 / 0.2); }
.hours.is-open .hours-status { color: var(--brand-on-light); }
.hours.is-closed .hours-status { color: #a32d2d; }
.hours-when { color: var(--muted-light); }

/* ---------- Phone-width tuning ---------- */
@media (max-width: 719px) {
  .band, .band-why, .band-map, .band-ask, .band-faq, .next, .spread { padding: 52px 0 56px; }
  .pull { padding: 44px 0 48px; }
  .statement { padding: 40px 0 44px; }
  .act { padding: 60px 0 72px; }
  /* argument cards: the number sits beside the title, not in its own column */
  .arg { grid-template-columns: 1fr; gap: 6px; padding: 18px 16px 20px; }
  .arg-num { font-size: 1.1rem; opacity: 0.8; letter-spacing: 0.06em; }
  .arg .def-title { font-size: 1rem; }
  .arg .prose { font-size: 1.02rem; }
  .why-side .section-title::after { margin-bottom: 4px; }
  /* map view toggle fits on one line */
  .map-views { display: flex; width: 100%; }
  .map-views button, .map-views [role="tab"] { flex: 1; font-size: 0.92rem; padding: 10px 8px; line-height: 1.2; }
  /* the sticky bar must not cover the footer links */
  .sticky-cta .btn { min-height: 48px; }
}

/* the sticky bar hides over the footer; this is the fallback for browsers without IntersectionObserver */
.site-footer { padding-bottom: calc(52px + env(safe-area-inset-bottom)); }

/* ---------- The councillors who backed it ---------- */
.backers-note { font-size: 0.95rem; color: var(--muted-light); max-width: 70ch; }
.backers-count { display: inline-block; min-width: 1.6em; padding: 0 6px; margin-left: 4px; border-radius: 999px; background: var(--brand); color: var(--ink); font-size: 0.8rem; text-align: center; }
.backers-council { margin-top: 36px; scroll-margin-top: 70px; }
.backers-council-title { font-size: clamp(1.4rem, 4vw, 1.9rem); margin-bottom: 12px; padding-bottom: 8px; border-bottom: 3px solid var(--brand); }
.backers-grid { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; grid-template-columns: 1fr; }
.backer { display: grid; grid-template-columns: 88px 1fr; gap: 14px; align-items: center; padding: 14px; background: var(--paper-2); border: 1px solid var(--line-light); border-radius: var(--radius-lg); }
.backer-photo { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; background: var(--ink); display: grid; place-items: center; border: 3px solid var(--brand); }
.backer-photo { position: relative; }
/* Fills the circle whatever the photo's shape, so the measured face position (object-position) applies. A grid item would keep its natural height. */
.backer-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.backer-initials { color: var(--paper); font-weight: 900; font-size: 1.6rem; letter-spacing: 0.04em; }
.backer-name { margin: 0 0 2px; font-size: 1.15rem; font-weight: 900; }
.backer-ward { margin: 0; color: var(--ink); }
.backer-printed { margin: 0 0 4px; font-size: 0.92rem; color: var(--muted-light); font-style: italic; }
.backer-printed-page { font-size: 1.02rem; margin: 0 0 10px; }
.backer-version { margin: 0 0 4px; font-size: 0.88rem; color: var(--muted-light); }
.backer-version-page { font-size: 1rem; margin: 0 0 10px; }
.evidence-text-2 { margin-top: 12px; font-size: 0.98rem; }
.backer-link { margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.backer-link .btn-primary { color: var(--ink); }
.backer-link .btn-ghost { color: var(--ink); }
.arg-more a + a { margin-left: 16px; }
@media (min-width: 640px) { .backers-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .backers-grid { grid-template-columns: 1fr 1fr 1fr; } }

/* Contact form */
.contact-form { margin-top: 24px; max-width: 62ch; }
.contact-form .field textarea { min-height: 200px; }
.contact-form .field-note a { color: inherit; }
.form-errors { background: var(--brand-soft); border-left: 4px solid var(--brand-on-light); padding: 10px 14px; border-radius: 6px; margin: 0 0 18px; }
.form-errors p { margin: 0; font-weight: 600; }
.nope { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* One councillor */
.backer-hero { display: grid; grid-template-columns: 120px 1fr; gap: 20px; align-items: center; margin: 12px 0 24px; }
.backer-photo-lg { width: 120px; height: 120px; }
.backer-photo-lg .backer-initials { font-size: 2.2rem; }
.backer-title { font-size: clamp(2rem, 7vw, 3.4rem); margin: 0 0 6px; overflow-wrap: anywhere; }
.backer-where { margin: 0 0 6px; font-size: 1.15rem; }
.backer-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.backer-links .btn-ghost { color: var(--ink); }
.backer-prose { max-width: 70ch; margin-bottom: 32px; }
.backer-act { margin-top: 24px; }
.backer-act .email-panel { max-width: 860px; }
.backer-name a { color: inherit; text-decoration: none; }
.backer-name a:hover { text-decoration: underline; }
.kicker a { color: inherit; }
@media (min-width: 640px) {
  .backer-hero { grid-template-columns: 160px 1fr; gap: 28px; }
  .backer-photo-lg { width: 160px; height: 160px; }
}

/* Hero in the Green Party's own green (#6AB023), with dark text for contrast */
.hero { background: var(--brand); color: var(--on-brand); }
.hero::after { background: color-mix(in srgb, var(--ink) 18%, var(--brand)); opacity: 1; }
.hero .lede { color: var(--on-brand); }
.hero .kicker, .hero .cta-line, .hero .hero-cta { color: var(--on-brand); }
.hero .hero-rule { background: var(--on-brand); }
.hero .hero-cta { border-color: var(--on-brand); }
.hero .stamp { background: var(--ink); color: var(--paper); }
.hero .btn-hero { background: var(--ink); color: var(--paper); box-shadow: 0 10px 30px rgb(0 0 0 / 0.25); }
.hero .btn-hero:hover { background: #262b27; }
.hero .r { color: var(--red-on-green); }
.hero-art { box-shadow: 0 40px 80px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(0 0 0 / 0.1); }
.hero .stamp { background: #b80f24; color: #fff; box-shadow: 0 6px 18px rgb(120 0 10 / 0.35); }
.hero .stamp span { background: #fff; color: #b80f24; }

/* Direct head office contacts under the steps */
.direct { margin-top: 22px; padding: 16px 18px; border: 2px solid var(--line-light); border-left: 6px solid var(--brand); border-radius: var(--radius); background: var(--paper-2); font-size: 1rem; }
.direct-title { margin: 0 0 8px; font-weight: 900; font-stretch: 85%; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.9rem; }
.direct-row { margin: 0 0 6px; overflow-wrap: anywhere; }
.direct-row:last-child { margin-bottom: 0; }
.direct-label { display: inline-block; min-width: 3.6em; font-weight: 800; }
.direct-row a { color: var(--brand-on-light); font-weight: 700; margin-right: 10px; }
.direct-note { color: var(--muted-light); font-weight: 500; }

/* Share one councillor */
.backer-share { margin: 40px 0 8px; }
.backer-share-lede { max-width: 60ch; margin: 0 0 16px; }
.backer-share-grid { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: start; }
.backer-share-img { width: 100%; max-width: 600px; height: auto; display: block; border-radius: 12px; box-shadow: 0 12px 32px rgb(15 18 16 / 0.18); }
.backer-share-actions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (min-width: 900px) { .backer-share-grid { grid-template-columns: 600px 1fr; } }

/* Footer columns */
.footer-brand { max-width: 36ch; }
.footer-tag { color: var(--paper); font-weight: 900; font-stretch: 85%; font-size: 1.5rem; margin: 10px 0 10px; line-height: 1.1; }
.footer-head { color: var(--brand); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 800; margin: 0 0 4px; }
.footer-base { grid-column: 1 / -1; margin: 0; padding-top: 20px; border-top: 1px solid var(--line-dark); font-size: 0.88rem; }
@media (min-width: 760px) { .footer-inner { grid-template-columns: 1.6fr 1fr 1fr 0.7fr; } }

/* Press page */
.press-section { margin-top: 40px; }
.press-facts { padding-left: 1.2em; margin: 0 0 8px; }
.press-facts li { margin-bottom: 8px; }
.press-facts-sub { margin-left: 1.2em; }
.press-more { margin-top: 12px; }
.press-note { color: var(--muted-light); font-size: 0.95rem; }
.press-quotes { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 14px; }
.press-quotes blockquote { margin: 0; padding: 14px 18px; border-left: 5px solid var(--brand); background: var(--paper-2); font-size: 1.08rem; font-weight: 600; border-radius: 0 10px 10px 0; }
.press-resources { padding-left: 1.2em; }
.press-resources li { margin-bottom: 8px; }
.press-sub { margin: 24px 0 4px; font-size: 1.1rem; font-weight: 900; }
.press-images { list-style: none; padding: 0; margin: 12px 0 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.press-images a { display: block; text-decoration: none; color: inherit; }
.press-images img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--line-light); background: var(--ink); }
.press-images span { display: block; margin-top: 6px; font-size: 0.88rem; color: var(--muted-light); }

/* Statement on phones: a big green quote mark above, centred text with room to breathe */
@media (max-width: 640px) {
  .pull { padding: 44px 0 44px; }
  .pull-quote { display: block; max-width: none; text-align: center; padding: 0 8px; font-size: clamp(1.85rem, 8vw, 2.3rem); line-height: 1.14; letter-spacing: 0; font-stretch: 88%; word-spacing: 0.04em; }
  .pull-quote::before { position: static; display: block; font-size: 3.6rem; line-height: 0.55; margin: 0 0 10px; }
  .pull-quote::after { display: none; }
  .pull::after { margin-top: 24px; }
}

/* What to say on the phone */
.call-script { margin-top: 16px; padding: 14px 16px; background: var(--paper-2); border: 1px solid var(--line-light); border-left: 5px solid var(--brand); border-radius: 10px; font-size: 0.95rem; text-align: left; }
.call-script-title { margin: 0 0 8px; font-weight: 900; font-stretch: 85%; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.85rem; }
.call-script ol { margin: 0; padding-left: 1.2em; }
.call-script li { margin-bottom: 8px; line-height: 1.45; }
.call-script li strong { color: var(--brand-on-light); }
.call-script-tips { margin: 10px 0 0; color: var(--muted-light); font-size: 0.9rem; }

/* What next cards */
.cards { grid-template-columns: 1fr; }
@media (min-width: 760px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 980px; } }
.card-next { padding: 26px 24px 24px; gap: 8px; background: var(--paper); }
.card-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--brand); color: var(--ink); display: grid; place-items: center; margin-bottom: 6px; }
.card-next h3 { margin: 0; }
.card-next p { margin: 0 0 4px; }
.card-next .hours { margin: 2px 0 4px; }
.phones { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; }
.btn-phone { font-size: 1.25rem; letter-spacing: 0.02em; padding: 12px 22px; }
.card-next details.call-script { margin-top: 10px; padding: 0; border: 0; border-left: 0; background: transparent; }
.card-next details.call-script summary { cursor: pointer; font-weight: 800; color: var(--brand-on-light); padding: 10px 14px; background: var(--paper-2); border: 1px solid var(--line-light); border-radius: 10px; list-style: none; display: flex; align-items: center; gap: 8px; }
.card-next details.call-script summary::-webkit-details-marker { display: none; }
.card-next details.call-script summary::before { content: '+'; font-weight: 900; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--ink); display: inline-grid; place-items: center; font-size: 0.9rem; }
.card-next details.call-script[open] summary::before { content: '\2013'; }
.card-next details.call-script[open] summary { border-radius: 10px 10px 0 0; }
.card-next details.call-script ol { margin: 0; padding: 14px 14px 4px 32px; background: var(--paper-2); border: 1px solid var(--line-light); border-top: 0; }
.card-next details.call-script .call-script-tips { margin: 0; padding: 8px 14px 14px; background: var(--paper-2); border: 1px solid var(--line-light); border-top: 0; border-radius: 0 0 10px 10px; }
.share-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 6px; }
.share-buttons .btn { min-height: 44px; padding: 10px 16px; }
.btn-wa { background: #25d366; color: var(--ink); border-color: transparent; }
.btn-wa:hover { background: #1fbf5b; }

.direct .phones { margin: 4px 0 8px; }
.direct .hours { margin: 0 0 10px; }
.direct-guide { margin: 0; padding-left: 1.2em; }
.direct-guide li { margin-bottom: 6px; line-height: 1.45; }
.direct-guide strong { color: var(--brand-on-light); }
.direct-note { margin: 8px 0 0; color: var(--muted-light); font-size: 0.9rem; }

.footer-powered { display: inline-block; margin-left: 12px; padding-left: 12px; border-left: 1px solid var(--line-dark); font-weight: 400; }
@media (max-width: 640px) { .footer-powered { display: block; margin: 8px 0 0; padding: 0; border: 0; } }



/* Footer, refined */
.site-footer { background: radial-gradient(120% 100% at 0% 0%, #17231a 0%, var(--ink) 55%); border-top: 8px solid var(--brand); padding: 56px 0 44px; }
.footer-inner { gap: 32px 40px; }
.footer-mark { font-size: 0.85rem; letter-spacing: 0.14em; color: var(--brand); margin-bottom: 4px; }
.footer-tag { font-size: clamp(1.7rem, 3vw, 2.2rem); line-height: 1.05; margin: 6px 0 12px; letter-spacing: -0.01em; }
.footer-note { font-size: 0.95rem; line-height: 1.55; color: #b9c2bb; }
.footer-head { margin-bottom: 10px; }
.footer-col { gap: 9px; }
.footer-col a { border-bottom: 0; color: #e6ebe6; font-size: 0.98rem; padding: 2px 0; transition: color 0.12s ease, transform 0.12s ease; }
.footer-col a::before { content: ''; display: inline-block; width: 0; height: 2px; background: var(--brand); vertical-align: middle; margin-right: 0; transition: width 0.12s ease, margin 0.12s ease; }
.footer-col a:hover { color: var(--brand); }
.footer-col a:hover::before { width: 10px; margin-right: 8px; }
.footer-base { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 8px 0 0; padding-top: 22px; border-top: 1px solid #2a332c; font-size: 0.88rem; color: #9aa39c; }
.footer-base p { margin: 0; }
.footer-base-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.footer-powered { margin: 0; padding: 0; border: 0; color: inherit; font-weight: inherit; }
.footer-powered a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.footer-powered a:hover { color: var(--paper); }
@media (max-width: 640px) { .footer-powered { display: inline; } .site-footer { padding-top: 44px; } }

.fact .fact-approx { display: block; font-size: 0.8rem; font-stretch: 100%; letter-spacing: 0.08em; text-transform: uppercase; line-height: 1; margin-bottom: 4px; }

/* Print a letter */
.letter-controls { max-width: 62ch; margin: 18px 0 32px; }
.letter-controls .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }
.letter-steps { padding-left: 1.2em; margin: 0; }
.letter-steps li { margin-bottom: 6px; }
.letter-sheet-wrap { background: #e9ece8; padding: 28px var(--gutter) 48px; }
.letter-sheet {
  background: #fff; color: #000; width: 210mm; max-width: 100%; min-height: 297mm; margin: 0 auto; padding: 22mm 20mm 20mm;
  box-shadow: 0 20px 60px rgb(0 0 0 / 0.18); font-family: Georgia, 'Times New Roman', Times, serif; font-size: 12pt; line-height: 1.5;
  box-sizing: border-box; position: relative;
}
.letter-sender { text-align: right; margin-bottom: 14mm; }
.letter-sender p { margin: 0; }
.letter-sender-name { font-weight: 700; min-height: 1.5em; }
.letter-sender-line { border-bottom: 1px solid #000; width: 62mm; margin-left: auto !important; height: 7mm; }
.letter-to { font-style: normal; margin-bottom: 8mm; }
.letter-to span { display: block; }
.letter-date { margin: 0 0 6mm; }
.letter-subject { font-weight: 700; margin: 0 0 5mm; }
.letter-body p { margin: 0 0 4mm; text-align: left; }
.letter-sign { margin-top: 10mm; }
.letter-sign-line { width: 70mm; border-bottom: 1px solid #000; height: 14mm; margin: 0 0 2mm; }
.letter-sign-name { margin: 0; font-weight: 700; }
.letter-sign-org { margin: 1mm 0 0; }
/* A long letter still fits one sheet: a little smaller, a little tighter. */
.letter-sheet-long { font-size: 10.5pt; line-height: 1.38; padding: 14mm 18mm 12mm; }
.letter-sheet-long .letter-body p { margin: 0 0 2.6mm; }
.letter-sheet-long .letter-sign { margin-top: 5mm; }
.letter-sheet-long .letter-sign-line { height: 8mm; }
.letter-sheet-long .letter-sender { margin-bottom: 7mm; }
.letter-sheet-long .letter-sender-line { height: 6mm; }
.letter-sheet-long .letter-subject { margin-bottom: 3mm; }
.letter-sheet-long .letter-to { margin-bottom: 5mm; }
.letter-sheet-long .letter-date { margin-bottom: 4mm; }
.letter-sheet-long .letter-recycle { margin-top: 3mm; }
@media (max-width: 640px) { .letter-sheet { padding: 14mm 10mm 16mm; min-height: 0; font-size: 11pt; } .letter-sheet-wrap { padding: 16px 8px 32px; } }
@media print {
  @page { size: A4; margin: 0; }
  html, body { background: #fff !important; color: #000 !important; }
  .no-print, .site-footer, .skip-link, .sticky-cta, .toast { display: none !important; }
  .letter-page { padding: 0 !important; min-height: 0 !important; }
  .letter-sheet-wrap { background: #fff !important; padding: 0 !important; }
  .letter-sheet { box-shadow: none !important; width: 210mm; min-height: 297mm; margin: 0; padding: 22mm 20mm 20mm; page-break-after: avoid; }
  .letter-sheet-long { padding: 12mm 18mm 10mm; }
  .letter-sheet, .letter-sheet * { color: #000 !important; background: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .r { color: #000 !important; }
}

/* Post a letter page sections */
.letter-why { margin: 36px 0 8px; }
.letter-why-grid { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .letter-why-grid { grid-template-columns: repeat(3, 1fr); } }
.letter-why-item { background: var(--paper-2); border: 1px solid var(--line-light); border-left: 5px solid var(--brand); border-radius: var(--radius); padding: 14px 16px; }
.letter-why-item strong { display: block; font-weight: 900; font-size: 1.1rem; margin-bottom: 4px; }
.letter-why-item p { margin: 0; color: var(--muted-light); }
.letter-how { margin: 36px 0 8px; }
.letter-steps-big { font-size: 1.05rem; max-width: 62ch; }
.letter-steps-big li { margin-bottom: 10px; }
.letter-envelope { margin: 20px 0 0; padding: 18px 20px; border: 2px dashed var(--ink); border-radius: var(--radius); max-width: 420px; background: var(--paper); }
.letter-envelope-label { margin: 0 0 8px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 800; color: var(--muted-light); }
.letter-envelope-address { font-style: normal; font-size: 1.15rem; line-height: 1.45; margin: 0 0 14px; font-family: Georgia, 'Times New Roman', serif; }
.letter-envelope-address span { display: block; }
.letter-faq { margin: 36px 0 40px; max-width: 70ch; }
.letter-faq details { border-top: 1px solid var(--line-light); padding: 12px 0; }
.letter-faq details:last-child { border-bottom: 1px solid var(--line-light); }
.letter-faq summary { font-weight: 800; cursor: pointer; }
.letter-faq p { margin: 10px 0 0; color: var(--muted-light); }
.letter-label-sheet { display: none; }
@media print {
  /* Label mode: the letter page itself is removed from the flow, so the label sheet is the one A4 page. */
  body.print-label .letter-page, body.print-label .letter-sheet-wrap { display: none !important; }
  body.print-label .letter-label-sheet { display: flex !important; align-items: center; justify-content: center; width: 210mm; height: 297mm; margin: 0; }
  body.print-label .letter-label { font-family: Georgia, 'Times New Roman', serif; font-style: normal; font-size: 22pt; line-height: 1.4; border: 1px solid #000; padding: 14mm 18mm; }
  body.print-label .letter-label span { display: block; }
}
@media print {
  /* The document is exactly one A4 page tall, so nothing can run on to a second sheet. */
  html, body { width: 210mm; height: 297mm; overflow: hidden !important; margin: 0; }
  .letter-page { height: 297mm; overflow: hidden; }
}

/* Free to send */
.letter-free { margin: 14px 0 0; padding: 12px 16px; background: var(--brand); color: #111; border-radius: var(--radius); font-size: 1.05rem; }
.letter-free strong { font-weight: 900; }
.letter-free-tag { display: inline-block; margin-left: 8px; padding: 2px 9px; border-radius: 999px; background: var(--brand); color: #111; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: middle; }

/* Recycle line, Freepost reminder and handwritten examples */
.letter-recycle { margin: 6mm 0 0; font-style: italic; font-size: 0.92em; }
.letter-freepost-line { margin: -8px 0 0; font-size: 1rem; }
.letter-freepost-line strong { color: #111; background: var(--brand); padding: 1px 8px; border-radius: 999px; font-weight: 900; margin-right: 4px; }
.letter-handwritten { margin: 36px 0 8px; }
.letter-handwritten > p { max-width: 70ch; }
.letter-examples { list-style: none; margin: 16px 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .letter-examples { grid-template-columns: 1fr 1fr; } }
.letter-example { background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.letter-example-text { margin: 0; font-family: Georgia, 'Times New Roman', Times, serif; font-size: 1.05rem; line-height: 1.5; }
.letter-example .btn { align-self: flex-start; }
.letter-free-compact { font-size: 1rem; margin-top: 8px; }
@media print { .letter-recycle { display: block; } }

/* Print bar above the sheet, shortest handwritten option */
.letter-sheet-bar { width: 210mm; max-width: 100%; margin: 0 auto 14px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 18px; }
.letter-sheet-bar p { margin: 0; color: var(--muted-light); }
.letter-sheet-bar .actions { display: flex; align-items: center; gap: 12px; margin: 0; }
.letter-sheet-bar-note strong { color: #111; background: var(--brand); padding: 1px 8px; border-radius: 999px; font-weight: 900; margin-right: 4px; }
.letter-example-short { border-color: var(--brand); border-width: 2px; }
.letter-example-tag { align-self: flex-start; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; background: var(--brand); color: #111; padding: 2px 9px; border-radius: 999px; }
.letter-example-short .letter-example-text { font-size: 1.25rem; font-weight: 700; }

/* Resigned councillors stay on the list, marked, with no email */
.backer-tag-resigned { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: #fff1d6; color: #7a4a00; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.backer-title .backer-tag-resigned { font-size: 0.9rem; vertical-align: middle; }
.backer-resigned .backer-photo { filter: grayscale(1); opacity: 0.75; }
.backer-act-resigned .motion-cta { margin-top: 16px; }

/* Two clear routes: print, or write by hand */
.letter-choice { display: grid; gap: 12px; grid-template-columns: 1fr; margin: 18px 0 8px; }
@media (min-width: 700px) { .letter-choice { grid-template-columns: 1fr 1fr; } }
.letter-choice-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; border: 2px solid var(--ink); border-radius: var(--radius); background: #fff; color: var(--ink); text-decoration: none; }
.letter-choice-card:hover, .letter-choice-card:focus-visible { background: var(--paper-2); text-decoration: none; }
.letter-choice-card strong { font-size: 1.3rem; font-weight: 900; line-height: 1.2; }
.letter-choice-card span:last-child { color: var(--muted-light); }
.letter-choice-kicker { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); }
.letter-choice-hand { background: var(--ink); color: #fff; border-color: var(--ink); }
.letter-choice-hand:hover, .letter-choice-hand:focus-visible { background: #222; }
.letter-choice-hand .letter-choice-kicker { color: var(--brand); }
.letter-choice-hand span:last-child { color: #d6d6d6; }
.btn-dark { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-dark:hover, .btn-dark:focus-visible { background: #222; color: #fff; }
.letter-handwritten { margin: 40px 0 8px; padding: 22px 22px 18px; background: var(--ink); color: #fff; border-radius: var(--radius); }
.letter-handwritten .section-title, .letter-handwritten > p { color: #fff; }
.letter-hand-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 6px; }
.letter-hand-head .section-title { margin: 0; }
.letter-hand-badge { display: inline-block; padding: 4px 12px; border-radius: 999px; background: var(--brand); color: #111; font-size: 0.85rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.letter-handwritten .letter-example { color: var(--ink); }
.letter-handwritten .letter-free-compact { color: #111; }

/* Share row: one button per network, brand colours allowed */
.share-row { margin-top: 10px; }
.share-row-lead { margin: 0 0 8px; }
.share-row-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.share-btn { min-height: 44px; padding: 10px 16px; border-color: transparent; color: #fff; font-weight: 800; }
.share-btn:hover, .share-btn:focus-visible { filter: brightness(0.92); color: #fff; }
.share-row-compact .share-btn { min-height: 38px; padding: 7px 12px; font-size: 0.92rem; }
.sh-wa { background: #25d366; color: #0b2e14; } .sh-wa:hover, .sh-wa:focus-visible { color: #0b2e14; }
.sh-fb { background: #1877f2; }
.sh-x { background: #000; }
.sh-tg { background: #1b8fcb; } /* the network colours, darkened a shade so white bold text reads on them */
.sh-li { background: #0a66c2; }
.sh-bs { background: #0b6fdb; }
.sh-th { background: #101010; }
.sh-rd { background: #e63e00; }
.sh-em { background: var(--ink); }
.sh-sms { background: #34c759; color: #0b2e14; } .sh-sms:hover, .sh-sms:focus-visible { color: #0b2e14; }
.sh-copy { background: transparent; color: var(--ink); border-color: var(--ink); }
.sh-copy:hover, .sh-copy:focus-visible { background: var(--paper-2); color: var(--ink); filter: none; }
.letter-share { margin: 36px 0 8px; padding: 22px; background: var(--paper-2); border: 1px solid var(--line-light); border-radius: var(--radius); }
.letter-share > p { max-width: 70ch; }
@media (max-width: 640px) { .share-row-buttons .share-btn { flex: 1 1 calc(50% - 4px); text-align: center; } }

.share-native-wrap[hidden] { display: none; }

.field-sum input { max-width: 8ch; }
.field-sum #sum-q { font-weight: 900; font-size: 1.1rem; }
#share-native[hidden] { display: none; }

/* Letter as a call to action: hero and What next */
.btn-letter { background: var(--ink); color: #fff; border-color: var(--ink); display: inline-flex; align-items: center; gap: 10px; }
.btn-letter:hover, .btn-letter:focus-visible { background: #222; color: #fff; }
.btn-tag { display: inline-block; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: #111; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.card-letter { border: 2px solid var(--ink); background: #fff; }
.card-letter .card-icon { background: var(--ink); color: var(--brand); }
.card-kicker { margin: 0; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-on-light); }
.card-letter .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.card-letter .hint { margin: 6px 0 0; }
@media (min-width: 760px) { .card-letter { grid-column: 1 / -1; } }
.hero .btn-letter { background: transparent; color: var(--ink); border: 2px solid var(--ink); }
.hero .btn-letter:hover, .hero .btn-letter:focus-visible { background: rgb(0 0 0 / 0.12); color: var(--ink); }
.btn-tag { white-space: nowrap; }
@media (max-width: 640px) { .btn-letter .btn-tag { display: none; } }

/* The poster */
.poster { display: grid; gap: 22px; margin-top: 36px; padding: 22px; background: #fff; border: 1px solid var(--line-light); border-radius: var(--radius); align-items: center; }
@media (min-width: 760px) { .poster { grid-template-columns: 320px 1fr; } }
.poster-img { display: block; }
.poster-img img { width: 100%; height: auto; display: block; border-radius: 8px; box-shadow: 0 10px 30px rgb(0 0 0 / 0.15); }
.poster-body h3 { margin: 0 0 6px; }
.poster-body p { margin: 0 0 10px; }
.poster-body .actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 8px; }

.poster-share { margin-top: 6px; }
.poster-share .share-row { margin-top: 6px; }
#poster-share-image[hidden] { display: none; }

/* Councillors' pledge */
.pledge-lines { margin: 0; padding-left: 1.3em; font-size: 1.2rem; line-height: 1.5; font-weight: 600; }
.pledge-lines li { margin-bottom: 10px; padding-left: 4px; }
.pledge-text { margin: 24px 0 8px; padding: 20px 22px; background: var(--paper-2); border-left: 6px solid var(--brand); border-radius: var(--radius); }
.pledge-signin { margin: 36px 0 8px; padding: 22px; background: var(--ink); color: #fff; border-radius: var(--radius); }
.pledge-signin .section-title, .pledge-signin p { color: #fff; }
.pledge-signin .hint, .pledge-signin .hint a { color: #d6d6d6; }
.pledge-signin .field-label { color: #fff; }
.pledge-form .field input, .pledge-form .field textarea { max-width: 520px; }
.pledge-list { margin: 36px 0 8px; }
.pledge-cards { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pledge-cards { grid-template-columns: 1fr 1fr; } }
.pledge-card { background: #fff; border: 1px solid var(--line-light); border-left: 5px solid var(--brand); border-radius: var(--radius); padding: 14px 16px; }
.pledge-name { margin: 0; font-weight: 900; font-size: 1.1rem; }
.pledge-where { margin: 2px 0 6px; color: var(--muted-light); }
.pledge-quote { margin: 8px 0; padding: 0 0 0 12px; border-left: 3px solid var(--line-light); font-style: italic; }
.pledge-date { margin: 6px 0 0; font-size: 0.82rem; color: var(--muted-light); }
.pledge-share { margin: 36px 0 24px; }
.pledge-tick { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; margin: 0 0 10px; background: var(--paper-2); border: 1px solid var(--line-light); border-radius: var(--radius); font-size: 1.05rem; line-height: 1.45; }
.pledge-tick input { width: 22px; height: 22px; flex: none; margin-top: 3px; accent-color: var(--brand); }
.pledge-sign .actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 16px 0 10px; }
.field-code input { font-size: 1.6rem; letter-spacing: 0.3em; max-width: 12ch; text-align: center; }
.pledge-debug { background: #fff8d6; border: 1px dashed #c9a400; padding: 12px; white-space: pre-wrap; font-size: 0.85rem; }
.inline-form { display: inline; }
.backer-tag-pledged { display: inline-block; vertical-align: middle; margin-left: 6px; padding: 2px 9px; border-radius: 999px; background: var(--brand); color: #111; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.backer-title .backer-tag-pledged { font-size: 0.9rem; }

/* Pledge: two options, and councillors who have left the party */
.pledge-two { margin: 14px 0 0; padding: 12px 16px; background: var(--paper-2); border-left: 5px solid var(--ink); border-radius: var(--radius); }
.pledge-option-title { display: flex; align-items: center; gap: 12px; margin-top: 36px; }
.pledge-option-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--ink); color: var(--brand); font-size: 1.1rem; font-weight: 900; flex: none; }
.pledge-resign-opt { margin-top: 12px; padding: 22px; border: 2px dashed var(--ink); border-radius: var(--radius); }
.pledge-resign-opt p { max-width: 70ch; }
.pledge-status { margin: 20px 0 8px; padding: 20px 22px; background: #fff1d6; border-left: 6px solid #e08a00; border-radius: var(--radius); }
.pledge-card-resigned { border-left-color: #e08a00; }
.pledge-resigned .section-title { margin-top: 36px; }

/* Privacy page */
.privacy-lead { font-size: 1.35rem; font-weight: 700; }
.privacy-summary { list-style: none; margin: 18px 0 8px; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 700px) { .privacy-summary { grid-template-columns: 1fr 1fr; } }
.privacy-summary li { padding: 12px 14px; background: var(--paper-2); border-left: 5px solid var(--brand); border-radius: var(--radius); line-height: 1.45; }
.privacy-summary strong { display: block; font-weight: 900; }
.privacy-toc { margin: 24px 0 8px; }
.privacy-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.privacy-toc a { display: inline-block; padding: 6px 12px; border: 1px solid var(--line-light); border-radius: 999px; text-decoration: none; color: var(--ink); font-size: 0.9rem; font-weight: 600; background: #fff; }
.privacy-toc a:hover { border-color: var(--ink); }
.privacy-sections { margin-top: 24px; }
.privacy-section { padding: 18px 0; border-top: 1px solid var(--line-light); scroll-margin-top: 80px; }
.privacy-section:last-child { border-bottom: 1px solid var(--line-light); }
.privacy-heading { margin: 0 0 6px; font-size: 1.15rem; font-weight: 900; }
.privacy-section p { margin: 0; line-height: 1.6; max-width: 70ch; }
.privacy-updated { margin: 20px 0 40px; color: var(--muted-light); font-size: 0.92rem; }

.pledge-why-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 760px) { .pledge-why-list { grid-template-columns: repeat(3, 1fr); } }
.pledge-why-list li { padding: 12px 14px; background: #fff; border: 1px solid var(--line-light); border-top: 4px solid var(--brand); border-radius: var(--radius); line-height: 1.45; }
.pledge-why-list strong { display: block; font-weight: 900; }

.social-pickers { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin: 8px 0 20px; }
.social-pickers .social-tabs { margin: 0; }

/* The stand: one list, one tally */
.stand-tally { list-style: none; margin: 14px 0 10px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(3, 1fr); }
.stand-tally li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius); background: #fff; border: 1px solid var(--line-light); }
.stand-tally strong { font-size: 1.8rem; font-weight: 900; line-height: 1; letter-spacing: -0.02em; }
.stand-tally span { font-size: 0.82rem; color: var(--muted-light); }
.stand-tally-all { background: var(--ink); border-color: var(--ink); }
.stand-tally-all strong { color: var(--brand); } .stand-tally-all span { color: #d6d6d6; }
.stand-tally-signed { border-top: 4px solid var(--brand); }
.stand-tally-left { border-top: 4px solid #e08a00; }
.stand-tags { margin: 0 0 6px; display: flex; flex-wrap: wrap; gap: 6px; }
.stand-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 0.7rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; }
.stand-tag-signed { background: var(--brand); color: #111; }
.stand-tag-left { background: #fff1d6; color: #7a4a00; }
@media (max-width: 480px) { .stand-tally { grid-template-columns: 1fr; } .stand-tally li { flex-direction: row; align-items: baseline; gap: 10px; } }

.pledge-opt { display: block; margin-top: 4px; font-size: 0.82rem; font-weight: 600; color: var(--muted-light); }
.pledge-tick-opt { border-style: dashed; }

/* Already on the record: the MPs who rejected the motion */
.pledge-mps { margin: 22px 0 0; padding: 18px 22px; background: var(--ink); color: #fff; border-radius: var(--radius); border-left: 8px solid var(--brand); }
.pledge-mps-kicker { margin: 0 0 6px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.pledge-mps-text { margin: 0; font-size: 1.15rem; font-weight: 700; line-height: 1.45; }
.pledge-mps .r { color: #ff6b6b; }
.pledge-mps-inline { font-weight: 700; font-size: 1.05rem; }

.pledge-card { display: flex; gap: 14px; align-items: flex-start; }
.stand-photo { flex: none; width: 72px; height: 72px; border-radius: 50%; overflow: hidden; background: var(--paper-2); border: 2px solid var(--brand); display: grid; place-items: center; font-weight: 900; color: var(--ink); }
.stand-photo { position: relative; }
.stand-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.stand-photo-silhouette { background: #dfe4dd; }
.pledge-card-resigned .stand-photo { border-color: #e08a00; filter: grayscale(0.4); }
.stand-body { min-width: 0; flex: 1 1 auto; }

/* The top bar is always dark, whatever the page mode */
.topbar { background: var(--ink); color: #fff; border-bottom-color: rgb(255 255 255 / 0.08); }
.topbar .wordmark, .topbar a { color: #fff; }
.topbar .topbar-cta, .topbar .cta { color: var(--brand-on-dark); }

/* Admin preview of a campaign that is not live */
.preview-bar { background: #b45309; color: #fff; font-size: 0.9rem; padding: 0.55rem 0; }
.preview-bar .wrap { display: flex; flex-wrap: wrap; gap: 0.35rem 0.75rem; align-items: center; }
.preview-bar a { color: #fff; font-weight: 700; text-decoration: underline; }
.preview-bar a:first-of-type { margin-left: auto; }

/* ---------- Campaign face: Anton (heavy condensed, as Stand Up To Racism sets its own name) ---------- */
html[data-font='anton'] .headline, html[data-font='anton'] .statement p, html[data-font='anton'] .section-title, html[data-font='anton'] .act-title,
html[data-font='anton'] .pull-quote, html[data-font='anton'] .fact strong, html[data-font='anton'] .wordmark, html[data-font='anton'] .footer-mark,
html[data-font='anton'] .cta-line, html[data-font='anton'] .sticky-text, html[data-font='anton'] .card h3, html[data-font='anton'] .def-title, html[data-font='anton'] .next-title {
  font-family: 'Anton', 'Archivo', system-ui, sans-serif; font-weight: 400; font-stretch: normal; letter-spacing: 0.01em; text-transform: uppercase;
}
html[data-font='anton'] .headline { --hl-base: clamp(3.8rem, 16vw, 9.5rem); --hl-factor: 0.52; line-height: 0.92; letter-spacing: 0; }
html[data-font='anton'] .statement p { line-height: 0.95; }
html[data-font='anton'] .section-title { letter-spacing: 0.02em; }
html[data-font='anton'] .pull-quote { font-size: clamp(2rem, 5.2vw, 3.4rem); line-height: 1.02; letter-spacing: 0.01em; max-width: 30ch; }
html[data-font='anton'] .pull-quote::before { font-size: 1.2em; top: -0.02em; }
html[data-font='anton'] .pull { padding: 64px 0 68px; }
html[data-font='anton'] .wordmark { font-size: 1.05rem; letter-spacing: 0.04em; }

/* ---------- Accent campaigns wear their own colours in the top bar and footer: name in the brand colour, star and "act now" in the accent ---------- */
html[data-accent] .topbar .wordmark, html[data-accent] .footer-mark { color: var(--brand-on-dark); }
html[data-accent] .wordmark::before { background: var(--red-on-dark); }
html[data-accent] .topbar .topbar-cta, html[data-accent] .topbar .cta { color: var(--red-on-dark); }
html[data-accent] .site-footer a:hover { color: var(--red-on-dark); }
html[data-font='anton'] .fact strong { letter-spacing: 0; }

/* ---------- Campaign accent (magenta for Stand Up To Racism): numbers, labels and quote marks take it ---------- */
html[data-accent] .arg-num, html[data-accent] .def-title, html[data-accent] .pull-quote::before, html[data-accent] .pull-quote::after,
html[data-accent] .why-nav a::before, html[data-accent] .faq-item summary::after { color: var(--red-on-light); }
html[data-accent] .arg-law .def-title, html[data-accent] .arg-law .arg-num { color: var(--brand-on-dark); }
html[data-accent] .arg-num { opacity: 0.85; }

/* ---------- Light theme: the act band and statement in black and brand, not a muddy mix ---------- */
html[data-mode='light'] .act { background: var(--ink); color: #fff; }
html[data-mode='light'] .act-title { color: var(--brand); }
html[data-accent] .act-title .act-title-b { color: var(--red-on-dark); }
html[data-mode='light'] .act-sub { color: rgb(255 255 255 / 0.78); }
html[data-mode='light'] .hero .kicker, html[data-mode='light'] .hero .cta-line, html[data-mode='light'] .hero .hero-cta { color: var(--ink); }
html[data-mode='light'] .hero .hero-cta { border-color: var(--ink); }
html[data-accent] .hero .kicker { color: var(--red-on-green); }
html[data-mode='light'] .hero .btn-hero { box-shadow: 0 10px 30px rgb(0 0 0 / 0.18); }
html[data-mode='light'] .statement { background: var(--ink); color: var(--brand); }
html[data-mode='light'] .statement .statement-sub { color: #fff; }
html[data-mode='light'] .statement p { text-shadow: none; }
html[data-mode='light'] .site-footer { border-top: 8px solid var(--brand); }
html[data-mode='light'] .facts { border-bottom: 8px solid var(--ink); }

/* statement band: the second line sits clear of the headline, in the text face, not the display face */
.statement .statement-sub { margin-top: 26px; max-width: 30ch; line-height: 1.2; }
html[data-font='anton'] .statement .statement-sub { font-family: var(--font); font-weight: 800; text-transform: none; letter-spacing: 0; font-stretch: 90%; font-size: clamp(1.4rem, 3.6vw, 2.3rem); margin-top: 30px; max-width: 34ch; }
html[data-font='anton'] .statement p:first-child { margin-bottom: 0; }

/* stand-alone campaign hero: no card beside it, a tighter headline, one paragraph */
html[data-font='anton'] .headline { --hl-base: clamp(3.2rem, 11vw, 6.6rem); line-height: 0.94; }
html[data-font='anton'] .hero { padding-bottom: 48px; }
html[data-font='anton'] .hero .lede { max-width: 58ch; font-size: 1.15rem; }
html[data-font='anton'] .hero .cta-line { font-family: var(--font); font-weight: 800; text-transform: none; font-stretch: 90%; font-size: clamp(1.15rem, 2.6vw, 1.5rem); letter-spacing: 0; }
.why-lede { font-size: 1.05rem; line-height: 1.5; margin: 0 0 18px; max-width: 42ch; }
@media (min-width: 980px) {
  html[data-font='anton'] .hero .wrap { padding-right: 24px; }
  html[data-font='anton'] .hero .lede { font-size: 1.25rem; }
}

/* chant: a call and its answer, the way a march does it */
.chant { background: var(--ink); color: #fff; padding: 56px 0 60px; text-align: center; }
.chant p { margin: 0; font-weight: 900; font-stretch: 72%; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; }
.chant-call { font-size: clamp(2.2rem, 8vw, 5.2rem); color: #fff; }
.chant-answer { font-size: clamp(2.8rem, 11vw, 7.4rem); color: var(--brand); margin-top: 6px; }
html[data-accent] .chant-answer { color: var(--red-on-dark); }
html[data-accent] .chant-call { color: var(--brand-on-dark); }
.statement-accent { font-style: normal; }
html[data-accent] .statement p .statement-accent { color: var(--red-on-green); } /* the statement band is the brand colour, so the accent is tuned for that */
html[data-accent][data-mode='light'] .statement p .statement-accent { color: var(--red-on-dark); } /* in light mode the band is ink */
html[data-font='anton'] .chant p { font-family: 'Anton', 'Archivo', system-ui, sans-serif; font-weight: 400; font-stretch: normal; letter-spacing: 0.01em; line-height: 0.98; }

/* the MPs on the record: portrait, name, seat */
.pledge-mp-list { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pledge-mp { display: flex; gap: 12px; align-items: center; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.1); border-radius: 12px; padding: 10px 12px; }
.pledge-mp-photo { width: 60px; height: 80px; object-fit: cover; border-radius: 8px; background: rgb(255 255 255 / 0.1); flex: none; }
.pledge-mp-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pledge-mp-text strong { font-size: 1rem; line-height: 1.2; }
.pledge-mp-text span { font-size: 0.82rem; color: rgb(255 255 255 / 0.75); line-height: 1.3; }
.pledge-mp-credit { margin: 10px 0 0; font-size: 0.72rem; color: rgb(255 255 255 / 0.55); }
@media (min-width: 720px) { .pledge-mp-list { grid-template-columns: repeat(4, 1fr); } .pledge-mp { flex-direction: column; align-items: flex-start; } .pledge-mp-photo { width: 100%; height: auto; aspect-ratio: 3 / 4; } }

/* the fifth MP: check a postcode, give an address, write */
.mp-check { margin: 22px 0 0; padding: 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line-light); border-left: 8px solid var(--stamp, #b80f24); box-shadow: 0 8px 28px rgb(0 0 0 / 0.06); }
.mp-check-head { display: flex; gap: 18px; align-items: flex-start; }
.mp-check-head .pledge-mp-photo { width: 96px; height: 128px; border-radius: 10px; box-shadow: 0 6px 18px rgb(0 0 0 / 0.15); }
.mp-check-head .pledge-mps-kicker { color: var(--stamp, #b80f24); }
.mp-check-name { margin: 0 0 8px; font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.mp-check-name span { display: block; font-size: 0.95rem; font-weight: 600; color: var(--muted-light); margin-top: 2px; }
.mp-check-text { margin: 0; line-height: 1.5; max-width: 60ch; }
.mp-form { margin: 18px 0 0; }
.mp-form label { display: block; font-weight: 700; margin: 0 0 4px; font-size: 0.95rem; }
.mp-form input { width: 100%; padding: 11px 12px; border: 1px solid var(--line-light); border-radius: 10px; font: inherit; background: #fff; }
.mp-form input:focus { outline: 3px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 1px; border-color: var(--brand); }
.mp-form .hint { margin: 8px 0 0; }
.mp-row { display: flex; gap: 8px; }
.mp-row input { flex: 1; min-width: 0; max-width: 240px; text-transform: uppercase; }
.mp-result { margin: 14px 0 0; padding: 12px 16px; border-radius: 10px; font-weight: 600; line-height: 1.45; border: 1px solid transparent; }
.mp-result.is-good { background: var(--brand-soft); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.mp-result.is-other, .mp-result.is-bad { background: #fff1d6; border-color: #f0d9a8; }
.mp-result.is-wait { background: var(--paper-2); color: var(--muted-light); }
.mp-address { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; padding: 16px; border-radius: 12px; background: var(--paper-2); }
.mp-address label { margin: 0; }
.mp-address label:nth-of-type(1), .mp-address label:nth-of-type(2) { grid-column: 1 / -1; }
.mp-address .hint, .mp-actions { grid-column: 1 / -1; margin: 0; }
.mp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.mp-check [hidden] { display: none !important; }
@media (min-width: 720px) {
  .mp-check { display: grid; grid-template-columns: 200px 1fr; gap: 20px 26px; padding: 26px; }
  .mp-check-head { grid-column: 1 / -1; }
  .mp-check-head .pledge-mp-photo { width: 150px; height: 200px; }
  .mp-check > .mp-form, .mp-check > .mp-result, .mp-check > .mp-address { grid-column: 1 / -1; }
}
@media (max-width: 560px) { .mp-address { grid-template-columns: 1fr; } .mp-check-head { flex-direction: column; } }

.pledge-mp-signed { display: inline-block; margin-top: 4px; padding: 2px 8px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.mp-check-signed { border-left-color: var(--brand); }
.mp-check-signed .pledge-mps-kicker { color: var(--brand-on-light); }

/* a stand-alone campaign's hero: no share card, a headline that fits on one or two lines, one short paragraph */
.hero-standalone { padding-bottom: 52px; }
/* a video card under the headline: the target in their own words */
.hero-video { position: relative; display: block; margin-top: 26px; max-width: 420px; border-radius: 14px; overflow: hidden; background: linear-gradient(135deg, var(--ink), color-mix(in srgb, var(--brand) 55%, var(--ink))); box-shadow: 0 16px 40px rgb(0 0 0 / 0.35); color: #fff; text-decoration: none; aspect-ratio: 16 / 9; }
.hero-video img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: transform 0.3s ease, opacity 0.3s ease; }
.hero-video:hover img { transform: scale(1.03); opacity: 1; }
.hero-video-play { position: absolute; left: 50%; top: 42%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--stamp, var(--brand)); box-shadow: 0 8px 24px rgb(0 0 0 / 0.4); }
.hero-video-play::after { content: ''; position: absolute; left: 25px; top: 19px; border-style: solid; border-width: 13px 0 13px 20px; border-color: transparent transparent transparent #fff; }
.hero-video-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 14px 12px; font-size: 0.9rem; line-height: 1.3; background: linear-gradient(to top, rgb(0 0 0 / 0.85), transparent); }
.hero-video-label strong { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; margin-right: 6px; color: var(--red-on-dark, var(--brand-on-dark)); }
html[data-mode='light'] .hero-video { box-shadow: 0 16px 40px rgb(0 0 0 / 0.18); }
.hero-standalone .headline { --hl-base: clamp(3rem, 10vw, 6.4rem); line-height: 0.9; }
.hero-standalone .lede { max-width: 56ch; font-size: 1.15rem; }
.hero-standalone .kicker { letter-spacing: 0.14em; }
@media (min-width: 980px) {
  .hero-standalone .wrap { padding-right: 24px; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 0 56px; align-items: center; }
  .hero-standalone .hero-rule { margin-bottom: 0; }
  .hero-standalone .lede { font-size: 1.2rem; margin-top: 0; }
  .hero-standalone .cta-line { margin-top: 14px; }
  .hero-standalone .hero-actions { margin-top: 18px; }
}

/* on the record: dated quotes with sources */
.record { background: var(--paper-2); border-top: 1px solid var(--line-light); }
.record-lede { margin: -6px 0 26px; color: var(--muted-light); max-width: 60ch; }
.record-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.record-item { position: relative; background: var(--paper); border: 1px solid var(--line-light); border-left: 6px solid var(--stamp, #b80f24); border-radius: 14px; padding: 16px 20px 14px; }
.record-date { display: block; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-on-light, #b80f24); margin-bottom: 6px; }
.record-quote { margin: 0; }
.record-quote p { margin: 0; font-size: 1.1rem; line-height: 1.5; font-weight: 600; }
.record-quote p::before { content: '\201C'; color: var(--red-on-light, #b80f24); margin-right: 0.05em; }
.record-quote p::after { content: '\201D'; color: var(--red-on-light, #b80f24); margin-left: 0.05em; }
.record-source { margin: 8px 0 0; font-size: 0.85rem; color: var(--muted-light); }
.record-source a { color: inherit; }
@media (min-width: 880px) { .record-list { grid-template-columns: 1fr 1fr; } .record-item.is-wide { grid-column: 1 / -1; } }

/* a stand-alone hero's tagline: one sentence per line */
.hero-standalone .cta-line { font-size: clamp(1.2rem, 2.6vw, 1.55rem); line-height: 1.25; }

/* stand-alone hero buttons: the colour that reads on the brand, with the brand as text (black on yellow, white on blue) */
.hero-standalone .btn-primary.btn-hero { background: var(--on-brand); color: var(--brand); border-color: var(--on-brand); }
.hero-standalone .btn-primary.btn-hero:hover { filter: brightness(0.94); }

/* antisemitism timeline: a line down the left, a dot per dated item */
.timeline { list-style: none; margin: 0; padding: 0 0 0 28px; position: relative; display: grid; gap: 18px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 3px; background: color-mix(in srgb, var(--red-on-light, #b80f24) 45%, var(--line-light)); border-radius: 2px; }
.timeline-item { position: relative; }
.timeline-item::before { content: ''; position: absolute; left: -28px; top: 4px; width: 17px; height: 17px; border-radius: 50%; background: var(--red-on-light, #b80f24); box-shadow: 0 0 0 4px var(--paper-2); }
.timeline-date { display: block; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-on-light, #b80f24); margin-bottom: 6px; }
.timeline-item.is-featured .timeline-card { background: var(--ink); color: #fff; border-color: var(--ink); padding: 22px 26px 18px; box-shadow: 0 14px 36px rgb(0 0 0 / 0.18); }
.timeline-item.is-featured .record-quote p { font-size: clamp(1.3rem, 2.6vw, 1.7rem); font-weight: 800; line-height: 1.3; }
.timeline-item.is-featured .record-quote p::before, .timeline-item.is-featured .record-quote p::after { color: var(--red-on-dark, #ff6b6b); }
.timeline-item.is-featured .record-source { color: rgb(255 255 255 / 0.72); font-size: 0.95rem; font-weight: 600; }
.timeline-item.is-featured::before { width: 23px; height: 23px; left: -31px; top: 2px; background: var(--ink); border: 4px solid var(--red-on-light, #b80f24); box-sizing: border-box; }
.timeline-item.is-featured .timeline-date { color: var(--ink); }
.title-accent { font-style: normal; }
html[data-accent] .section-title .title-accent { color: var(--red-on-light); }
html[data-accent] .act .section-title .title-accent, html[data-accent] .statement .title-accent { color: var(--red-on-dark); }
.timeline-card { background: var(--paper); border: 1px solid var(--line-light); border-radius: 14px; padding: 16px 20px 14px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.05); }
@media (min-width: 880px) {
  .timeline { padding-left: 200px; }
  .timeline::before { left: 171px; }
  .timeline-item::before { left: -37px; top: 6px; }
  .timeline-date { position: absolute; left: -200px; width: 150px; text-align: right; top: 6px; margin: 0; }
}

.record-event { margin: 0; font-size: 1.05rem; line-height: 1.5; font-weight: 600; }

/* [[words]] in a headline take the accent colour */
.headline .headline-accent { font-style: normal; color: var(--red-on-green, var(--brand)); }

/* ---------- Secure inbox ---------- */
.inbox-page .crumbs { margin: 0 0 6px; font-size: 0.9rem; }
.inbox-page .crumbs a { color: var(--muted-light); }
.inbox-page .kicker .inline-form { margin-left: 10px; text-transform: none; letter-spacing: 0; font-weight: 600; }
.thread-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.thread-row a { display: block; background: #fff; border: 1px solid var(--line-light); border-left: 5px solid var(--line-light); border-radius: var(--radius); padding: 14px 16px; text-decoration: none; color: var(--ink); }
.thread-row.is-unread a { border-left-color: var(--brand); }
.thread-row a:hover { border-color: var(--brand); border-left-color: var(--brand); }
.thread-subject { display: block; font-weight: 800; font-size: 1.1rem; }
.thread-meta { display: block; margin-top: 4px; font-size: 0.9rem; color: var(--muted-light); }
.thread-meta strong { color: var(--brand-on-light); }
.thread { list-style: none; margin: 18px 0 24px; padding: 0; display: grid; gap: 14px; }
.bubble { max-width: 60ch; border-radius: 16px; padding: 14px 18px 10px; }
.bubble-them { background: #fff; border: 1px solid var(--line-light); border-top-left-radius: 4px; justify-self: start; }
.bubble-me { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); border-top-right-radius: 4px; justify-self: end; }
.bubble-body p { margin: 0 0 10px; line-height: 1.5; overflow-wrap: anywhere; }
.bubble-meta { margin: 0; font-size: 0.8rem; color: var(--muted-light); }
.pledge-form textarea { width: 100%; max-width: 620px; font: inherit; padding: 10px 12px; border: 1px solid var(--line-light); border-radius: 8px; }

/* ---------- The evidence video: plays in place, then follows in a corner ---------- */
.hero-video-dock { position: relative; margin-top: 26px; max-width: 420px; aspect-ratio: 16 / 9; }
.hero-video-dock .hero-video { margin-top: 0; max-width: none; width: 100%; height: 100%; }
.hero-video.is-playing img, .hero-video.is-playing .hero-video-play, .hero-video.is-playing .hero-video-label { display: none; }
.hero-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hero-video-close { position: absolute; top: -12px; right: -12px; width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--ink); color: #fff; font-size: 1.2rem; line-height: 1; cursor: pointer; box-shadow: 0 4px 14px rgb(0 0 0 / 0.35); z-index: 2; }
.hero-video-dock.is-pip .hero-video { position: fixed; right: 16px; bottom: 76px; width: min(380px, 62vw); height: auto; aspect-ratio: 16 / 9; z-index: 70; box-shadow: 0 18px 48px rgb(0 0 0 / 0.45); border-radius: 12px; animation: pip-in 0.25s ease; }
.hero-video-dock.is-pip .hero-video-close { position: fixed; top: auto; right: 8px; bottom: calc(76px + min(380px, 62vw) * 9 / 16 - 12px); z-index: 71; }
@keyframes pip-in { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (max-width: 640px) { .hero-video-dock.is-pip .hero-video { bottom: 84px; right: 10px; } }

/* ---------- Questions and answers: a side column that stays put, numbered questions, the open one lit ---------- */
.faq-grid { display: grid; gap: 28px; }
.faq-side .section-title { margin-bottom: 10px; }
.faq-lede { margin: 0 0 18px; color: var(--muted-light); font-size: 1.05rem; max-width: 34ch; }
.faq-list { margin-top: 0; max-width: none; gap: 12px; }
.faq { padding: 0 20px; border-left: 5px solid var(--line-light); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.faq summary { padding: 18px 0; gap: 14px; justify-content: flex-start; }
.faq summary h3 { font-size: 1.2rem; flex: 1 1 auto; }
.faq-num { flex: none; font-weight: 900; font-size: 0.85rem; letter-spacing: 0.06em; color: var(--brand-on-light); padding: 4px 8px; border-radius: 6px; background: var(--brand-soft); font-variant-numeric: tabular-nums; }
.faq[open] { border-left-color: var(--brand); box-shadow: 0 12px 30px rgb(0 0 0 / 0.07); }
.faq[open] .faq-num { background: var(--brand); color: var(--on-brand); }
.faq-a { padding: 0 0 20px 0; font-size: 1.05rem; line-height: 1.55; }
.faq-a p:first-child { margin-top: 0; }
html[data-accent] .faq-num { color: var(--red-on-light); background: color-mix(in srgb, var(--red-on-light) 10%, #fff); }
html[data-accent] .faq[open] .faq-num { background: var(--red-on-light); color: #fff; }
html[data-accent] .faq[open] { border-left-color: var(--red-on-light); }
@media (min-width: 900px) {
  .faq-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 2fr); gap: 48px; align-items: start; }
  .faq-side { position: sticky; top: 24px; }
}

/* ---------- Copy markup inside argument and FAQ blocks: sub-headings, quotations, source chips ---------- */
.arg-sub { margin: 26px 0 8px; font-weight: 900; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; color: var(--brand-on-light); }
.arg-sub:first-child { margin-top: 0; }
.arg .prose p:first-child { font-weight: 400; }
.arg .prose .arg-sub:first-child + p { font-weight: 600; }
.arg-quote { margin: 18px 0; padding: 14px 18px 12px; border-left: 5px solid var(--brand); background: #fff; border-radius: 0 12px 12px 0; }
.arg-quote p { margin: 0; font-weight: 800; font-size: 1.15rem; line-height: 1.35; }
.arg-quote p::before { content: '\201C'; color: var(--brand-on-light); margin-right: 0.05em; }
.arg-quote p::after { content: '\201D'; color: var(--brand-on-light); margin-left: 0.05em; }
.arg-quote footer { margin-top: 8px; font-size: 0.85rem; color: var(--muted-light); font-weight: 400; }
.arg-law .arg-sub { color: var(--brand); }
.arg-law .arg-quote { background: rgb(255 255 255 / 0.06); border-left-color: var(--brand); }
.arg-law .arg-quote p::before, .arg-law .arg-quote p::after { color: var(--brand); }
.arg-sources { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 0 !important; padding-top: 14px; border-top: 1px solid var(--line-light); font-size: 0.9rem !important; font-weight: 400 !important; }
.arg-sources-label { font-weight: 900; font-stretch: 80%; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.75rem; color: var(--muted-light); margin-right: 2px; }
.arg-sources a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--line-light); color: var(--ink); text-decoration: none; font-weight: 700; font-size: 0.85rem; }
.arg-sources a::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--brand); flex: none; }
.arg-sources a:hover { border-color: var(--brand); }
.arg-law .arg-sources { border-top-color: rgb(255 255 255 / 0.15); }
.arg-law .arg-sources a { background: rgb(255 255 255 / 0.08); border-color: rgb(255 255 255 / 0.15); color: #fff; }
.faq-a .arg-sub { font-size: 0.8rem; }
.faq-a .arg-quote { background: var(--paper-2); }
html[data-accent] .arg-sub, html[data-accent] .arg-quote p::before, html[data-accent] .arg-quote p::after { color: var(--red-on-light); }
html[data-accent] .arg-quote { border-left-color: var(--red-on-light); }
html[data-accent] .arg-sources a::before { background: var(--red-on-light); }

/* the pledge: take a stand, then bring colleagues */
.pledge-stand { margin: 0 0 20px; padding: 16px 18px; background: var(--brand-soft); border-left: 5px solid var(--brand); border-radius: 0 12px 12px 0; }
.pledge-stand p { margin: 0 0 8px; line-height: 1.5; } .pledge-stand p:last-child { margin-bottom: 0; }
.pledge-next { margin: 14px 0 18px; padding-left: 20px; display: grid; gap: 8px; }
.pledge-next li { line-height: 1.5; }
.pledge-final { display: block; width: 100%; font-size: 0.9rem; color: var(--muted-light); margin-top: 4px; }

/* ask your Green councillors */
.ask-cllr { margin: 18px 0 26px; padding: 22px; border-radius: var(--radius); background: var(--paper); border: 1px solid var(--line-light); border-left: 8px solid var(--brand); box-shadow: 0 8px 28px rgb(0 0 0 / 0.06); }
.ask-steps { display: flex; flex-wrap: wrap; gap: 10px 28px; margin: 0 0 14px; font-weight: 800; font-size: 1.05rem; }
.ask-step { display: inline-flex; align-items: center; gap: 10px; }
.ask-num { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 900; }
.ask-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ask-list li { padding: 8px 12px; background: var(--paper-2); border-radius: 8px; }
.ask-list li span { display: block; font-size: 0.9rem; color: var(--muted-light); }
.ask-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; }
.ask-actions .hint { margin: 0; max-width: 46ch; }
.ask-cllr > .hint { margin: 14px 0 0; }
.ask-actions[hidden], .ask-list[hidden], .mp-result[hidden] { display: none; }

/* Homepage hero: the pledge strip, with the live count of councillors on the record. */
/* The ask, as a block of its own: a solid card in the ink, set apart from the headline, the lede and the buttons. */
.hero-pledge { position: relative; z-index: 1; margin: 30px 0 0; padding: 22px 24px 20px; border-radius: 16px; background: var(--ink); color: var(--paper); border: 0; max-width: 44rem; box-shadow: 0 18px 44px rgb(0 0 0 / 0.28); }
.hero-pledge::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 6px; border-radius: 0 4px 4px 0; background: var(--brand); }
.hero-pledge-kicker { margin: 0 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand); }
.hero-pledge .r { color: #ff6b6b; }
.hero-pledge-count strong { color: var(--brand); }
.hero-pledge-links a { color: var(--paper); }
.hero-pledge-faces img { border-color: var(--brand); }
html[data-mode='light'] .hero .hero-pledge { color: var(--paper); }
.hero-pledge-text { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.hero-pledge-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-top: 12px; }
.hero-pledge-count { display: inline-flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
/* The live counter: a tile of its own under the ask, the number at near-headline size. */
.hero-counter { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0 0 24px; max-width: 34ch; padding: 16px 22px 18px; background: var(--brand); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; text-decoration: none; box-shadow: 0 14px 40px rgb(0 0 0 / 0.18); box-sizing: border-box; }
.hero-counter-n { font-size: clamp(2.8rem, 7vw, 4.6rem); font-weight: 900; font-stretch: 72%; line-height: 0.9; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; transition: transform 0.4s ease; display: inline-block; }
.hero-counter.is-bumped .hero-counter-n, .hero-counter.is-rising .hero-counter-n { transform: scale(1.06); }
.hero-counter { transition: box-shadow 0.5s ease, border-color 0.5s ease; }
.hero-counter.is-rising { box-shadow: 0 0 0 6px rgb(255 255 255 / 0.45), 0 14px 40px rgb(0 0 0 / 0.18); border-color: #fff; }
@media (prefers-reduced-motion: reduce) { .hero-counter, .hero-counter-n { transition: none; } .hero-counter.is-rising .hero-counter-n { transform: none; } }
.hero-counter-label { flex: 1 1 12ch; min-width: 0; font-size: 1rem; font-weight: 700; line-height: 1.25; max-width: 20ch; }
.hero-counter-what { display: block; font-size: 1.15rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }
.hero-counter:hover .hero-counter-n { text-decoration: underline; }
@media (max-width: 700px) { .hero-counter { max-width: none; flex-direction: column; align-items: flex-start; gap: 6px; padding: 16px 18px 18px; } .hero-counter-n { font-size: clamp(2.6rem, 13vw, 3.6rem); } .hero-counter-label { max-width: none; flex: none; width: 100%; } .hero-counter-what { display: inline; margin-right: 0.3em; } }
.hero-pledge-count strong { font-size: clamp(2.2rem, 6vw, 3rem); font-weight: 900; font-stretch: 75%; line-height: 0.9; color: inherit; }
.hero-pledge-count span { max-width: 20ch; font-size: 0.92rem; font-weight: 700; line-height: 1.25; }
.hero-pledge-count:hover strong { text-decoration: underline; }
.hero-pledge-latest { margin: 0; font-size: 0.9rem; opacity: 0.9; }
.hero-pledge-latest span { font-weight: 700; }
.hero-pledge-links { margin: 12px 0 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 0.92rem; font-weight: 700; }
.hero-pledge-links a { color: inherit; text-decoration-thickness: 2px; }
.fact a { color: inherit; text-decoration: underline; }
.hero-pledge-faces { display: inline-flex; align-items: center; text-decoration: none; }
.hero-pledge-faces img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--brand); background: #dfe4dd; box-shadow: 0 2px 8px rgb(0 0 0 / 0.25); margin-left: -10px; }
.hero-pledge-faces img:first-child { margin-left: 0; }
.hero-pledge-faces img.is-resigned { border-color: #e08a00; }
.hero-pledge-faces:hover img { border-color: var(--ink); }
.backer-photo img.is-fallback, .stand-photo img.is-fallback { background: #dfe4dd; }
.pledge-any { margin: 10px 0 0; font-size: 0.95rem; }
.pledge-any-note { margin: 0 0 10px; font-size: 0.95rem; color: var(--muted); }
.stand-tag-line { background: var(--paper-2); color: var(--ink); border: 1px solid var(--line-light); }
.band-pledge-ask { background: linear-gradient(180deg, var(--brand-soft) 0%, var(--paper) 100%); color: var(--ink); padding: 56px 0 64px; border-top: 1px solid var(--line-light); }
.pledge-ask { display: grid; gap: 28px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .pledge-ask { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; } .pledge-ask-foot { grid-column: 1 / -1; } }
.pledge-ask-title { font-size: clamp(2.2rem, 6vw, 3.6rem); margin: 6px 0 10px; }
.pledge-ask-main .lede { max-width: 52ch; }
.pledge-ask-main .ask-cllr { margin-top: 22px; box-shadow: 0 14px 40px rgb(0 0 0 / 0.08); }
.pledge-ask-side .pledge-mps { margin: 0; padding: 22px 24px; border-radius: 16px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.18); }
.pledge-ask-side .pledge-mps-text { font-size: 1.05rem; }
.pledge-ask-side .pledge-mp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pledge-ask-foot { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .pledge-ask-foot { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 40px; } }
.pledge-ask-foot .mp-check { margin: 0; border-radius: 16px; }
.pledge-ask-foot .pledge-share { margin: 0; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line-light); border-radius: 16px; }
.pledge-ask-foot .pledge-share .section-title { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0 0 8px; }

/* The pledge page: a hero with the tally, a grid of signatures, the pledge and the sign-in side by side. */
.pledge-page-v2 { padding: 0 0 72px; }
.pledge-hero { background: var(--ink); color: #fff; padding: 56px 0 40px; position: relative; overflow: hidden; }
.pledge-hero::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 55%, transparent), transparent 70%); pointer-events: none; }
.pledge-hero-inner { position: relative; z-index: 1; }
.pledge-hero .kicker { color: var(--brand); }
.pledge-hero .page-title { margin: 6px 0 14px; color: #fff; }
.pledge-hero .page-title em { font-style: normal; color: var(--brand); }
.pledge-hero .lede { color: rgb(255 255 255 / 0.85); max-width: 56ch; }
.pledge-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin: 20px 0 0; }
.pledge-hero .hero-cta { color: var(--brand); border-color: var(--brand); }
.stand-tally-hero { margin: 30px 0 0; gap: 12px; max-width: 720px; }
.stand-tally-hero li { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); padding: 16px 18px; }
.stand-tally-hero strong { font-size: clamp(2.2rem, 6vw, 3.2rem); font-stretch: 75%; color: #fff; }
.stand-tally-hero span { color: rgb(255 255 255 / 0.75); font-size: 0.9rem; }
.stand-tally-hero .stand-tally-all { background: var(--brand); border-color: var(--brand); }
.stand-tally-hero .stand-tally-all strong { color: var(--on-brand); } .stand-tally-hero .stand-tally-all span { color: var(--on-brand); }
.stand-tally-hero .stand-tally-signed { border-top: 4px solid var(--brand); }
.stand-tally-hero .stand-tally-left { border-top: 4px solid #e08a00; }
.pledge-hero-faces { display: flex; margin: 18px 0 0; }
.pledge-hero-faces img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--ink); outline: 2px solid var(--brand); background: #dfe4dd; margin-left: -8px; }
.pledge-hero-faces img:first-child { margin-left: 0; }
.pledge-hero-faces img.is-resigned { outline-color: #e08a00; }
.pledge-page-v2 .pledge-list { margin: 0; padding: 48px 0 8px; }
.pledge-list-hint { max-width: 70ch; }
.pledge-cards-grid { grid-template-columns: 1fr; gap: 14px; margin-top: 18px; }
@media (min-width: 720px) { .pledge-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.pledge-page-v2 .pledge-card { padding: 18px; border-radius: 14px; box-shadow: 0 6px 20px rgb(0 0 0 / 0.05); border-left-width: 6px; }
.pledge-page-v2 .pledge-card .stand-photo { width: 80px; height: 80px; }
.pledge-card-private .pledge-name { color: var(--muted); }
.pledge-page-v2 .pledge-quote { margin: 10px 0; padding: 10px 14px; border-left: 4px solid var(--brand); background: var(--paper-2); border-radius: 0 10px 10px 0; font-size: 1.02rem; }
.pledge-empty { margin: 18px 0 0; padding: 22px; border: 2px dashed var(--line-light); border-radius: 14px; font-weight: 700; color: var(--muted); }
.pledge-panels { padding: 40px 0 0; }
.pledge-panels-inner { display: grid; gap: 20px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .pledge-panels-inner { grid-template-columns: 1fr 1fr; } }
.pledge-panel-kicker { margin: 0 0 4px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-on-light); }
.pledge-signin .pledge-panel-kicker { color: var(--brand); }
.pledge-page-v2 .pledge-text { margin: 0; padding: 26px 26px 22px; border-radius: 14px; border-left-width: 8px; }
.pledge-page-v2 .pledge-text .section-title, .pledge-page-v2 .pledge-signin .section-title { margin-top: 0; }
.pledge-page-v2 .pledge-lines { counter-reset: line; list-style: none; padding: 0; }
.pledge-page-v2 .pledge-lines li { position: relative; padding-left: 44px; margin-bottom: 14px; }
.pledge-page-v2 .pledge-lines li::before { counter-increment: line; content: counter(line); position: absolute; left: 0; top: 0; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 0.95rem; font-weight: 900; }
.pledge-page-v2 .pledge-signin { margin: 0; padding: 26px; border-radius: 14px; }
.pledge-page-v2 .pledge-signin .pledge-two { margin-top: 18px; background: rgb(255 255 255 / 0.08); border-left-color: var(--brand); color: #fff; }
.pledge-page-v2 .pledge-why { padding: 44px 0 0; }
.pledge-page-v2 .pledge-why-list { margin-top: 14px; }
@media (min-width: 720px) { .pledge-page-v2 .pledge-why-list { grid-template-columns: repeat(3, 1fr); } }

/* Homepage: the pledge itself, with the board of who has signed. */
.band-the-pledge { background: var(--ink); color: #fff; padding: 64px 0 72px; position: relative; overflow: hidden; }
.band-the-pledge::before { content: ""; position: absolute; left: -160px; bottom: -200px; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--brand) 45%, transparent), transparent 70%); pointer-events: none; }
.the-pledge { position: relative; z-index: 1; display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .the-pledge { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; } }
.band-the-pledge .kicker { color: var(--brand); }
.band-the-pledge .section-title { color: #fff; margin: 0 0 18px; }
.the-pledge-lines { counter-reset: line; list-style: none; margin: 0; padding: 0; font-size: 1.15rem; line-height: 1.5; font-weight: 600; }
.the-pledge-lines li { position: relative; padding-left: 50px; margin-bottom: 16px; }
.the-pledge-lines li::before { counter-increment: line; content: counter(line); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--brand); color: var(--on-brand); display: grid; place-items: center; font-size: 1rem; font-weight: 900; }
.the-pledge-lines .r { color: #ff6b6b; }
.the-pledge-any { margin: 6px 0 0; color: rgb(255 255 255 / 0.8); line-height: 1.5; max-width: 60ch; }
.the-pledge-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; }
.band-the-pledge .btn-ghost { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.band-the-pledge .btn-ghost:hover { background: rgb(255 255 255 / 0.1); }
.the-pledge-board { background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); border-radius: 16px; padding: 22px; }
.the-pledge-board-kicker { margin: 0 0 12px; font-size: 0.75rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.stand-tally-home { margin: 0; gap: 8px; }
.stand-tally-home li { background: rgb(0 0 0 / 0.3); border-color: rgb(255 255 255 / 0.1); padding: 12px; }
.stand-tally-home strong { color: #fff; font-size: 1.9rem; }
.stand-tally-home span { color: rgb(255 255 255 / 0.7); font-size: 0.8rem; }
.stand-tally-home .stand-tally-all { background: var(--brand); border-color: var(--brand); }
.stand-tally-home .stand-tally-all strong, .stand-tally-home .stand-tally-all span { color: var(--on-brand); }
.stand-tally-home .stand-tally-signed { border-top: 3px solid var(--brand); }
.stand-tally-home .stand-tally-left { border-top: 3px solid #e08a00; }
.the-pledge-recent { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
.the-pledge-recent li { display: flex; gap: 12px; align-items: flex-start; padding: 12px; background: rgb(0 0 0 / 0.25); border-radius: 12px; border-left: 4px solid var(--brand); }
.the-pledge-recent li.is-resigned { border-left-color: #e08a00; }
.the-pledge-recent img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; background: #dfe4dd; border: 2px solid var(--brand); }
.the-pledge-recent li.is-resigned img { border-color: #e08a00; }
.the-pledge-recent-name { margin: 0; font-weight: 900; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.the-pledge-recent-where { margin: 2px 0 0; font-size: 0.88rem; color: rgb(255 255 255 / 0.7); }
.the-pledge-recent-quote { margin: 6px 0 0; font-style: italic; color: rgb(255 255 255 / 0.9); line-height: 1.4; }
.the-pledge-empty { margin: 16px 0 0; padding: 16px; border: 2px dashed rgb(255 255 255 / 0.25); border-radius: 12px; color: rgb(255 255 255 / 0.8); font-weight: 700; }
.the-pledge-board-link { margin: 16px 0 0; font-weight: 800; }
.the-pledge-board-link a { color: var(--brand); }
.card-pledge { border: 2px solid var(--brand); }
.card-again { border: 2px solid var(--ink); }
.btn-again[disabled] { opacity: 0.6; cursor: wait; }

/* After signing: the image with the councillor's name, and a post for each network. */
.pledge-done-share { margin: 28px 0 8px; padding: 24px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line-light); border-left: 8px solid var(--brand); }
.pledge-done-share .section-title { margin-top: 0; }
.pledge-done-figure { margin: 16px 0 0; }
.pledge-done-img { display: block; width: 100%; max-width: 600px; height: auto; border-radius: 12px; box-shadow: 0 12px 32px rgb(0 0 0 / 0.18); }
.pledge-done-figure figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.pledge-done-figlabel { font-weight: 800; font-size: 0.9rem; margin-right: 6px; }
.pledge-done-posts { display: grid; gap: 14px; margin: 22px 0 0; }
@media (min-width: 760px) { .pledge-done-posts { grid-template-columns: 1fr 1fr; } }
.pledge-done-post { display: flex; flex-direction: column; gap: 8px; padding: 14px; background: var(--paper); border: 1px solid var(--line-light); border-radius: 12px; }
.pledge-done-post-label { margin: 0; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-on-light); }
.pledge-done-post textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--line-light); border-radius: 8px; background: #fff; resize: vertical; }
.pledge-done-post .btn { align-self: flex-start; }
.pledge-stay .pledge-done-post { margin-top: 18px; }
.pledge-stay textarea { min-height: 420px; }
.pledge-stay-actions { margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 10px; }
.pledge-done-note { margin: 16px 0 14px; font-size: 0.95rem; color: var(--muted); }

/* A councillor's own photo: picker on the sign form, and the panel on the thank-you page. */
.pledge-photo-row, .pledge-photo-form { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pledge-photo-preview { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 3px solid var(--brand); background: #dfe4dd; flex: none; }
.pledge-photo-field input[type=file], .pledge-photo-pick input[type=file] { font: inherit; font-size: 0.92rem; max-width: 100%; }
.pledge-photo-pick { display: flex; flex-direction: column; gap: 4px; font-weight: 700; }
.pledge-done-photo { margin: 18px 0 0; padding: 14px 16px; background: var(--paper); border: 1px solid var(--line-light); border-radius: 12px; }
.pledge-done-photo .hint { margin: 8px 0 0; }
.pledge-photo-remove { margin: 8px 0 0; }
.form-ok { margin: 0 0 10px; padding: 10px 12px; border-radius: 8px; background: var(--brand-soft); border: 1px solid var(--brand); font-weight: 700; }
/* The photo cropper: a square frame, drag to position, slider to zoom. */
.photo-crop { margin: 12px 0 4px; padding: 14px; background: var(--paper-2); border: 1px solid var(--line-light); border-radius: 12px; max-width: 420px; }
.photo-crop[hidden] { display: none; }
.photo-crop-help { margin: 0 0 10px; font-size: 0.9rem; color: var(--muted); }
.photo-crop-stage { width: 260px; height: 260px; border-radius: 50%; overflow: hidden; border: 3px solid var(--brand); background: #dfe4dd; touch-action: none; box-shadow: 0 8px 24px rgb(0 0 0 / 0.15); }
.photo-crop-canvas { display: block; width: 260px; height: 260px; cursor: grab; }
.photo-crop-canvas:active { cursor: grabbing; }
.photo-crop-zoom { display: flex; align-items: center; gap: 10px; margin: 12px 0 0; font-weight: 700; font-size: 0.9rem; }
.photo-crop-zoom input { flex: 1; accent-color: var(--brand); }
.photo-crop-actions { margin: 10px 0 0; }

/* The letter page: the postal address, big and clear, to copy by hand. */
.letter-address-big { margin: 18px 0 22px; padding: 20px 24px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; max-width: 560px; }
.letter-address-big-label { margin: 0 0 10px; font-size: 0.82rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.letter-address-big-lines { font-style: normal; font-family: Georgia, 'Times New Roman', serif; font-size: clamp(1.35rem, 3.2vw, 1.9rem); line-height: 1.3; }
.letter-address-big-lines span { display: block; }
.letter-address-big-lines .is-freepost { font-weight: 700; font-family: inherit; }
.letter-address-big-actions { margin: 14px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.letter-choice-one { grid-template-columns: 1fr; max-width: 520px; }
.pledge-ask-kicker { font-size: 1.25rem; letter-spacing: 0.1em; margin-bottom: 0.5rem; }
.pledge-ask-foot { display: grid; gap: 24px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 960px) { .pledge-ask-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; grid-column: 1 / -1; } }
.pledge-ask-foot .pledge-mps { margin: 0; border-radius: 16px; box-shadow: 0 16px 40px rgb(0 0 0 / 0.18); }
.pledge-ask-foot .pledge-mp-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pledge-ask-foot .mp-check { margin: 0; border-radius: 16px; }
.pledge-ask-side .pledge-share { margin: 0; padding: 22px 24px; background: var(--paper); border: 1px solid var(--line-light); border-radius: 16px; }
.pledge-ask-side .pledge-share .section-title { font-size: clamp(1.5rem, 3.4vw, 2rem); margin: 0 0 8px; }

/* Resign by email: options on the left, the email itself on the right. */
.pledge-resign-email { margin-top: 28px; padding: 22px; border: 2px solid var(--ink); border-radius: var(--radius); background: var(--paper); }
.resign-grid { display: grid; gap: 20px; grid-template-columns: 1fr; margin-top: 12px; }
@media (min-width: 900px) { .resign-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.resign-options .pledge-tick { font-size: 0.98rem; }
.resign-envelope { margin: 0 0 8px; font-size: 0.9rem; line-height: 1.5; overflow-wrap: anywhere; }
.resign-preview textarea { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; line-height: 1.45; padding: 10px 12px; border: 1px solid var(--line-light); border-radius: 8px; background: #fff; }
/* An admin's preview of the pledge pages: forms and action links are shown but cannot be used. */
.pledge-preview form, .pledge-preview #resign-open, .pledge-preview .pledge-done-posts button, .pledge-preview .pledge-done-figure a { pointer-events: none; }
.pledge-preview form button[type=submit], .pledge-preview #resign-open { opacity: 0.6; }
/* The hero's one-line ask: what the campaign wants, in large type under the headline. */
.hero-ask { position: relative; z-index: 1; margin: 18px 0 22px; max-width: 34ch; padding: 18px 20px 20px; background: var(--ink); color: #fff; border-radius: 16px; box-shadow: 0 14px 40px rgb(0 0 0 / 0.18); }
.hero-ask p { margin: 0; }
.hero-ask-kicker { margin: 0 0 8px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand); }
.hero-ask-line { font-weight: 800; font-stretch: 85%; font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.25; letter-spacing: -0.005em; }
.hero-ask-choice { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 10px; }
.hero-ask-choice em { font-style: normal; font-weight: 900; font-stretch: 80%; font-size: clamp(1.35rem, 2.8vw, 1.8rem); line-height: 1; letter-spacing: -0.01em; background: var(--brand); color: var(--ink); padding: 10px 16px 11px; border-radius: 999px; white-space: nowrap; }
.hero-ask-choice span { font-weight: 800; font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.75; }
.hero-ask-note { font-size: 0.98rem; font-weight: 600; opacity: 0.85; }
/* On a phone the ask is the point of the page, so it reads at near-headline size and uses the full width. */
@media (max-width: 700px) {
  .hero-ask { max-width: none; margin: 22px 0 26px; padding: 18px 18px 20px; }
  .hero-ask-line { font-size: clamp(1.25rem, 5.4vw, 1.6rem); }
  .hero-ask-choice em { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
}

/* Each signature expands to show exactly what was pledged. */
.pledge-detail { margin: 10px 0 0; }
.pledge-detail summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.9rem; color: var(--brand-on-light); padding: 4px 0; }
.pledge-detail summary::-webkit-details-marker { display: none; }
.pledge-detail summary::before { content: '+'; display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 0.85rem; }
.pledge-detail[open] summary::before { content: '\2013'; }
.pledge-detail-body { margin: 8px 0 0; padding: 12px 14px; background: var(--paper-2); border-radius: 10px; font-size: 0.95rem; line-height: 1.5; }
.pledge-detail-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.pledge-detail-lines li { display: flex; gap: 8px; align-items: flex-start; }
.pledge-detail-lines .is-unticked { opacity: 0.55; }
.pledge-detail-mark { flex: none; width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 0.8rem; background: var(--brand); color: var(--on-brand); }
.is-unticked .pledge-detail-mark { background: var(--line-light); color: var(--ink); }
.pledge-detail-state { display: inline-block; margin-left: 6px; font-style: normal; font-size: 0.75rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; color: var(--brand-on-light); }
.is-unticked .pledge-detail-state { color: var(--muted-light); }
.pledge-detail-left, .pledge-detail-words, .pledge-detail-when { margin: 10px 0 0; }
.pledge-detail-when { font-size: 0.85rem; color: var(--muted-light); }
.the-pledge-recent-more { font-size: 0.8rem; font-weight: 700; color: var(--brand); }
.pledge-signin-lede { font-size: 1.05rem; line-height: 1.5; }

/* ---- Pledge lines: bold headline, plain explanation as 1a and 2a ---- */
.pledge-line-head { font-weight: 700; }
.pledge-line-detail { display: block; font-weight: 400; font-size: 0.92em; line-height: 1.5; margin-top: 4px; }
.pledge-side-below { display: none; }
@media (max-width: 899px) { .pledge-side-right { display: none; } .pledge-side-below { display: inline; } }
.pledge-line-choice .pledge-line-head { font-weight: 600; }
.pledge-tick-num { font-weight: 800; }
.pledge-tick > span { font-weight: 500; }

.fit-note { flex-basis: 100%; margin: 4px 0 0; }
.btn-send.is-over { opacity: 0.92; }

/* ---- Explainer and FAQ pages ---- */
.explain-page { padding-top: 40px; }
.explain-answer { max-width: 60ch; }
.explain-answer strong { font-size: 1.4em; font-weight: 900; color: var(--brand-on-light); }
.terms { margin: 0; display: grid; gap: 14px; }
.term { background: var(--paper-2); border-left: 5px solid var(--brand); border-radius: var(--radius); padding: 14px 18px; }
.term dt { font-weight: 900; margin: 0 0 4px; font-size: 1.05rem; }
.term dd { margin: 0; font-size: 1.05rem; line-height: 1.5; }
.faq-question { font-size: clamp(1.3rem, 3vw, 1.7rem); }
div.faq-entry + div.faq-entry { margin-top: 26px; }
h3.faq-question { margin: 0 0 8px; font-size: clamp(1.15rem, 2.6vw, 1.4rem); }

.press-letter { margin: 0; padding: 18px 22px; background: var(--paper-2); border-left: 5px solid var(--brand); border-radius: var(--radius); }
.press-letter .prose { font-size: 1.05rem; }

/* Sits inside the dark email section, so it is a dark panel with light text; the link takes the brand colour. */
.backer-mind { margin: 0 auto 18px; padding: 14px 18px; border-radius: var(--radius); background: rgb(255 255 255 / 0.1); color: #fff; border-left: 5px solid var(--brand); font-size: 1.05rem; max-width: 62ch; text-align: left; }
.backer-mind strong { color: #fff; }
.backer-mind a { font-weight: 700; color: var(--brand-on-dark, var(--brand)); text-decoration-color: currentColor; }

/* Waiting on a code or a reply: the junk-folder reminder, prominent on the code pages and a line elsewhere. */
.check-junk { margin: 14px 0 18px; padding: 12px 16px; border-radius: 10px; background: #fff4e0; border-left: 5px solid #e08a00; color: #4a2e00; font-size: 0.98rem; line-height: 1.45; max-width: 62ch; }
.check-junk strong { color: #3d2500; }
.check-junk a { color: inherit; font-weight: 700; }
.check-junk-line { margin-top: 10px; }

/* The press page's record: public log entries, newest first. */
.press-log { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.press-log-item { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 12px 14px; border-left: 4px solid var(--brand); background: var(--paper-2); border-radius: 8px; }
.press-log-date { grid-column: 1; font-weight: 800; white-space: nowrap; }
.press-log-kind { grid-column: 2; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-on-light); }
.press-log-title { grid-column: 2; font-size: 1.05rem; }
.press-log-outlet { color: var(--muted-light); }
.press-log-body { grid-column: 2; margin-top: 4px; color: var(--ink); }
.press-log-body p { margin: 0 0 6px; }
.press-log-resignation { border-left-color: #e08a00; }
@media (max-width: 600px) { .press-log-item { grid-template-columns: 1fr; } .press-log-kind, .press-log-title, .press-log-body { grid-column: 1; } }

/* Files attached to secure messages. */
.attachments { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.95rem; }
.attachments li::before { content: '\1F4CE'; margin-right: 4px; }
.hint-inline { font-size: 0.85em; color: var(--muted-light); font-weight: 400; }
.pledge-form input[type='file'] { display: block; margin-top: 6px; font: inherit; }

/* The evidence box: the motion itself, as its proposers published it, linked in full. */
.evidence { margin: 18px 0 20px; padding: 18px 20px; border-radius: var(--radius); background: var(--ink); color: #fff; border-left: 6px solid var(--brand); max-width: 76ch; }
.evidence-kicker { margin: 0 0 6px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-on-dark); }
.evidence-text { margin: 0 0 8px; font-size: 1.05rem; }
.evidence-link { margin: 0 0 14px; font-weight: 700; overflow-wrap: anywhere; }
.evidence-link a { color: #fff; text-decoration-color: var(--brand-on-dark); text-underline-offset: 3px; }
.evidence-actions { margin: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.evidence-actions .btn-ghost { color: #fff; border-color: rgb(255 255 255 / 0.5); }
.backer-prose + .evidence { margin-top: 8px; }

/* The motion in its own words: verbatim passages, each linked to its page in the PDF. */
.worst { margin: 26px 0 28px; max-width: 76ch; }
.worst-title { margin: 4px 0 8px; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); line-height: 1.15; }
.worst-intro { margin: 0 0 14px; color: var(--muted-light); font-size: 1rem; }
.worst-list { list-style: none; margin: 0; padding: 0; counter-reset: worst; }
.worst-item { position: relative; margin: 0 0 14px; padding: 14px 16px 12px 18px; border-left: 5px solid var(--brand); background: rgb(0 0 0 / 0.035); border-radius: 0 var(--radius) var(--radius) 0; }
.worst-quote { margin: 0; }
.worst-quote p { margin: 0; font-size: 1.1rem; line-height: 1.5; font-weight: 600; }
.worst-meta { margin: 8px 0 0; font-size: 0.92rem; color: var(--muted-light); }
.worst-meta a { color: var(--brand-on-light); font-weight: 700; }
.worst-note { display: block; margin-top: 4px; }
.worst-why { margin: 10px 0 0; border-top: 1px solid rgb(0 0 0 / 0.08); padding-top: 8px; }
.worst-why summary { cursor: pointer; font-weight: 800; color: var(--brand-on-light); font-size: 0.95rem; list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.worst-why summary::-webkit-details-marker { display: none; }
.worst-why summary::before { content: '+'; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: #fff; font-size: 0.95rem; line-height: 1; }
.worst-why[open] summary::before { content: '\2013'; }
.worst-why p { margin: 8px 0 0; font-size: 1rem; line-height: 1.55; }
.worst-more { margin: 4px 0 0; font-weight: 700; }
.worst-more a { color: var(--brand-on-light); }
.evidence + .worst { margin-top: 22px; }
@media (max-width: 600px) { .worst-item { padding: 12px 12px 10px 14px; } .worst-quote p { font-size: 1.02rem; } }

/* Which way a signer is counted: stay and fight, or resign. One of the two is part of signing. */
.pledge-stand-choice { border: 0; padding: 0; margin: 6px 0 14px; }
.pledge-stand-choice legend { padding: 0; margin-bottom: 8px; }
.pledge-stand-choice .pledge-tick { font-size: 1rem; }
.pledge-stand-choice .field-note { display: block; font-weight: 400; margin-top: 4px; }

/* The Party's Over: the register of every Green councillor's position. */
.po-page { padding-top: 40px; }
.po-title { margin-bottom: 4px; }
.po-sack { margin: 0 0 14px; font-size: clamp(1.6rem, 1.2rem + 2vw, 2.6rem); font-weight: 900; letter-spacing: 0.02em; text-transform: uppercase; color: var(--red-on-light, #b3261e); }
.po-facts { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 8px; }
.po-news { margin: 0; padding: 12px 16px; border-left: 5px solid var(--brand); background: rgb(0 0 0 / 0.035); border-radius: 0 var(--radius) var(--radius) 0; max-width: 70ch; }
.po-news p { margin: 0 0 6px; }
.po-news p:last-child { margin-bottom: 0; }
.po-tally { list-style: none; margin: 14px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 22px; }
.po-tally li strong { font-size: 1.4rem; margin-right: 6px; }
.po-council { margin: 22px 0 0; }
.po-council-title { margin: 0 0 8px; font-size: 1.15rem; }
.po-table-wrap { overflow-x: auto; }
.po-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.po-table th, .po-table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--line-light); }
.po-table thead th { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-light); }
.po-table th[scope="row"] { font-weight: 800; white-space: nowrap; }
.po-row-none { color: var(--muted-light); }
.po-printed, .po-when { font-weight: 400; font-size: 0.85rem; color: var(--muted-light); white-space: normal; }
.reg-yes { color: var(--brand-on-light); }
.reg-no { color: var(--muted-light); }
.po-source a, .po-source q, .po-source span { display: block; margin: 0 0 4px; }
.po-source q { font-style: italic; }
.po-questions li { font-size: 1.05rem; }
.po-slogans { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 14px 0 6px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.po-close { font-size: 1.3rem; }

/* A councillor from the register with no public position, and the facts list on their page */
.backer-tag-none { display: inline-block; vertical-align: middle; margin-left: 8px; padding: 4px 10px; border-radius: 999px; background: var(--paper-2); color: var(--muted-light); border: 1px solid var(--line-light); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; }
.po-facts-compact { margin: 8px 0 0; padding-left: 18px; }
.po-facts-compact li { margin: 0 0 6px; }

/* Every councillor by region and council, and the colleagues list on each councillor's page */
.councillors-index-nav ul { list-style: none; margin: 18px 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.councillors-index-nav a { display: inline-block; padding: 6px 12px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line-light); color: inherit; text-decoration: none; font-weight: 700; font-size: 0.92rem; }
.councillors-index-region { margin: 28px 0 8px; }
.councillors-index-grid { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.councillors-index-council h3 { margin: 10px 0 6px; font-size: 1.05rem; }
.councillors-index-council ul, .colleagues-list { list-style: none; margin: 0; padding: 0; }
.councillors-index-council li, .colleagues-list li { margin: 0 0 4px; font-size: 0.95rem; line-height: 1.35; }
.councillors-index-ward { color: var(--muted-light); }
.councillors-index-tag { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.councillors-index-tag-backed { color: var(--red-on-light, #b80f24); }
.councillors-index-tag-left { color: var(--muted-light); }
.councillors-index-tag-pledged { color: var(--brand-on-light); }
.colleagues { margin: 32px 0 8px; }
.colleagues-list { columns: 2; column-gap: 24px; }
@media (max-width: 640px) { .colleagues-list { columns: 1; } }

/* A reassuring notice on the pledge and inbox pages: signed in to both at once */
.notice-ok { background: var(--paper-2); border-left: 5px solid var(--brand); padding: 10px 14px; border-radius: var(--radius); }
.po-find { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; margin: 0 0 22px; }
.po-region { margin: 30px 0 0; }
.po-region-title { font-size: 1.4rem; margin: 0 0 6px; }
.po-region-title a { color: inherit; text-decoration: none; border-bottom: 3px solid var(--brand); }
.po-council-title .councillors-index-email, .po-region-title .councillors-index-email { font-size: 0.85rem; }
.po-register { width: min(1100px, calc(100vw - 32px)); margin-left: calc(50% - min(1100px, calc(100vw - 32px)) / 2); }
.po-list { list-style: none; margin: 0; padding: 0; }
.po-list li { padding: 8px 0; border-bottom: 1px solid var(--line-light); }
.po-list .po-line { margin: 0; }
.po-list .po-name { font-weight: 800; }
.po-list .po-detail { margin: 2px 0 0; font-size: 0.9rem; color: var(--muted-light); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.po-list .po-detail:empty { display: none; }
.po-list .po-detail q { font-style: italic; }
.po-list .po-detail a { color: var(--brand-on-light); }
.po-row-none .po-name { font-weight: 600; }
.councillors-index-tag-none { color: var(--muted-light); }
.po-council { margin: 18px 0 0; }
@media (min-width: 900px) { .po-region-councils { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 28px; } }

/* The campaign's two lines: a band on the home page, a boxed pair inside articles and the register. */
.pull-lines .pull-quote { font-size: clamp(1.6rem, 1.1rem + 2.4vw, 2.8rem); }
.lines { margin: 22px 0; padding: 16px 20px; border-left: 6px solid var(--brand); background: rgb(0 0 0 / 0.035); border-radius: 0 var(--radius, 10px) var(--radius, 10px) 0; }
.lines-quote { margin: 0; font-weight: 900; font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); line-height: 1.25; }
.lines-quote + .lines-quote { margin-top: 6px; }
.lines-quote::before { content: '\201C'; color: var(--brand-on-light, var(--brand)); }
.lines-quote::after { content: '\201D'; color: var(--brand-on-light, var(--brand)); }

/* Council names link to the council's page of Green councillors. */
.backer-where a, .backer-ward a, .pledge-where a, .po-council-title a, .backers-council-title a, .councillors-index-council h3 a, .colleagues .section-title a, .hero-pledge-latest a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.backer-where a:hover, .backer-ward a:hover, .pledge-where a:hover, .po-council-title a:hover, .backers-council-title a:hover, .councillors-index-council h3 a:hover, .colleagues .section-title a:hover { text-decoration-thickness: 2px; }

/* A council's page: the figures, a card for each Green councillor, the other councils in the region. */
.council-lede { max-width: 70ch; }
.council-tiles { list-style: none; margin: 22px 0 18px; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
.council-tile { padding: 14px 16px; border-radius: var(--radius-lg, 14px); background: var(--paper-2); border: 1px solid var(--line-light); display: flex; flex-direction: column; gap: 2px; }
.council-tile strong { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.5rem); font-weight: 900; line-height: 1; }
.council-tile span { color: var(--muted-light); font-weight: 700; font-size: 0.9rem; }
.council-tile-lead { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.council-tile-lead span { color: var(--brand); }
.council-tile-zero strong { color: var(--muted-light); }
.council-cta { margin: 0 0 26px; }
.council-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* One or two councillors: the cards share the width, with a larger photo, rather than leaving empty columns. */
.council-grid-few .council-card { grid-template-columns: 150px 1fr; padding: 24px; gap: 22px; align-items: center; }
.council-grid-few .council-card-photo { width: 150px; height: 150px; }
.council-grid-few .council-card-name { font-size: 1.5rem; }
.council-grid-one { max-width: 760px; }
/* Search hides rows, cards and their groups; their own display rules must not bring them back. */
[data-search][hidden], [data-search-group][hidden], .backers-council[hidden] { display: none !important; }
.council-card { display: grid; grid-template-columns: 112px 1fr; gap: 16px; align-items: start; padding: 18px; background: var(--paper-2); border: 1px solid var(--line-light); border-radius: var(--radius-lg, 14px); border-top: 5px solid var(--line-light); }
.council-card-backed { border-top-color: #b3261e; }
.council-card-pledged { border-top-color: var(--brand); }
.council-card-left { border-top-color: #e08a00; }
.council-card-photo { position: relative; width: 112px; height: 112px; border-radius: 50%; overflow: hidden; background: var(--ink); display: grid; place-items: center; border: 3px solid var(--brand); text-decoration: none; }
.council-card-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.council-card-backed .council-card-photo { border-color: #b3261e; }
.council-card-left .council-card-photo { border-color: #e08a00; filter: grayscale(0.4); }
.council-card-body { min-width: 0; }
.council-card-name { margin: 2px 0 2px; font-size: 1.2rem; font-weight: 900; line-height: 1.15; }
.council-card-name a { color: inherit; text-decoration: none; }
.council-card-name a:hover { text-decoration: underline; }
.council-card-ward { margin: 0 0 8px; color: var(--muted-light); }
.council-card-stance { display: inline-block; margin: 0 0 10px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; }
.council-stance-backed { background: #fbe3e1; color: #8a1c15; }
.council-stance-pledged { background: var(--brand); color: #111; }
.council-stance-left { background: #fff1d6; color: #7a4a00; }
.council-stance-none { background: var(--paper); color: var(--muted-light); border: 1px solid var(--line-light); }
.council-card-quote { margin: 0 0 10px; padding: 0 0 0 10px; border-left: 3px solid var(--brand); font-style: italic; font-size: 0.95rem; }
.council-card-links { margin: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.council-card-links .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
.council-card-profile { font-size: 0.9rem; color: var(--muted-light); }
.council-nearby { margin-top: 40px; }
.council-nearby-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px 18px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.council-nearby-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.council-nearby-list a { font-weight: 700; }
.council-nearby-note { white-space: nowrap; padding: 1px 8px; border-radius: 999px; background: #fbe3e1; color: #8a1c15; font-size: 0.75rem; font-weight: 800; }
@media (max-width: 520px) {
  .council-card, .council-grid-few .council-card { grid-template-columns: 84px 1fr; gap: 12px; padding: 14px; }
  .council-card-photo, .council-grid-few .council-card-photo { width: 84px; height: 84px; }
  .council-grid-few .council-card-name { font-size: 1.2rem; }
}

/* zionismisracism.co.uk: the councillors who backed the motion, and whether they still stand by it. */
.still-answer-head { margin: 0 0 6px; font-size: 1.3rem; font-weight: 900; }
.still-answer-head strong { color: var(--brand-on-light, var(--brand)); }
.still-printed { margin: -2px 0 4px; font-size: 0.85rem; color: var(--muted-light); }
.still-version { margin: 0 0 10px; font-size: 0.85rem; color: var(--muted-light); }
.still-card-none { border-top-color: #b3261e; }
.still-card-none .council-card-photo { border-color: #b3261e; }
.still-card-changed { border-top-color: var(--brand); }
.still-card-left { border-top-color: #e08a00; }
.still-stance-none { background: #fbe3e1; color: #8a1c15; }
.still-stance-changed { background: var(--brand); color: #111; }
.still-stance-left { background: #fff1d6; color: #7a4a00; }
.still-sources { margin-top: 44px; }
/* Two wide columns on a desktop, so the question button and the status sit on one line each. */
.still-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.still-card .council-card-links .btn { white-space: normal; text-align: center; }

/* zionismisracism.co.uk: "These councillors say Zionism is racism" */
.still-page { padding: 0 0 72px; }
.still-hero { background: radial-gradient(120% 140% at 85% 0%, #2b3a22 0%, var(--ink) 55%); color: var(--paper); padding: 64px 0 56px; position: relative; overflow: hidden; }
.still-hero::after { content: ''; position: absolute; inset: auto 0 0 0; height: 6px; background: linear-gradient(90deg, #b3261e 0 50%, var(--brand) 50% 100%); }
.still-kicker { margin: 0 0 14px; color: var(--brand-on-dark); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.still-title { margin: 0; font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: 0.95; font-size: clamp(2.6rem, 9vw, 5.6rem); max-width: 14ch; letter-spacing: -0.01em; }
.still-title span { display: block; color: #ff5a4e; }
.still-sub { margin: 22px 0 0; font-size: clamp(1.15rem, 2.6vw, 1.6rem); line-height: 1.3; color: var(--muted-dark); max-width: 36ch; }
.still-sub strong { color: var(--paper); }
.still-faces { list-style: none; margin: 30px 0 0; padding: 0 0 0 12px; display: flex; flex-wrap: wrap; row-gap: 8px; }
.still-hero-grid { display: grid; gap: 8px; align-items: center; }

.still-faces li { position: relative; width: 60px; height: 60px; margin-left: -12px; border-radius: 50%; overflow: hidden; border: 3px solid var(--ink); background: var(--ink-3); box-shadow: 0 2px 8px rgb(0 0 0 / 0.35); }
.still-faces img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still-faces-more { display: grid; place-items: center; background: #b3261e !important; color: #fff; font-weight: 900; font-size: 0.95rem; }
.still-hero-cta { margin: 30px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }
.still-btn-light { background: transparent; color: var(--paper); border: 2px solid rgb(255 255 255 / 0.55); }
.still-btn-light:hover { border-color: var(--paper); background: rgb(255 255 255 / 0.08); }
.still-tiles { margin-top: 36px; }
.still-lede { max-width: 68ch; font-size: 1.1rem; line-height: 1.6; margin: 22px 0 0; }

.still-quotes { margin: 44px 0 8px; }
.still-quotes-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 18px; }
.still-quote { position: relative; margin: 0; padding: 92px 32px 34px 32px; border-radius: 22px; overflow: hidden; min-height: 190px; display: flex; align-items: flex-end; box-shadow: 0 18px 40px -22px rgb(0 0 0 / 0.45); }
.still-quote-1 { background: var(--ink); color: var(--paper); }
.still-quote-2 { background: var(--brand); color: var(--on-brand); }
.still-quote-mark { position: absolute; top: 14px; left: 26px; font-family: Georgia, 'Times New Roman', serif; font-size: 8rem; line-height: 0.8; font-weight: 700; opacity: 0.9; pointer-events: none; }
.still-quote-1 .still-quote-mark { color: var(--brand); }
.still-quote-2 .still-quote-mark { color: var(--paper); opacity: 0.75; }
.still-quote blockquote { margin: 0; position: relative; }
.still-quote p { margin: 0; font-weight: 900; font-stretch: 80%; text-transform: uppercase; font-size: clamp(1.7rem, 3.6vw, 2.6rem); line-height: 1.02; letter-spacing: -0.005em; }
.still-quote-1 p::after { content: ''; display: block; width: 56px; height: 5px; margin-top: 16px; background: #ff5a4e; border-radius: 3px; }
.still-quote-2 p::after { content: ''; display: block; width: 56px; height: 5px; margin-top: 16px; background: var(--ink); border-radius: 3px; }

.still-answer { margin: 34px 0 0; max-width: 72ch; padding: 22px 26px; border-radius: 18px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); }
.still-answer p { margin: 0; line-height: 1.6; }
.still-answer-head { margin: 0 0 8px !important; font-size: 1.4rem; font-weight: 900; }
.still-answer-head strong { color: var(--brand-on-light, var(--brand)); }

.still-act { margin-top: 48px; background: var(--ink); color: var(--paper); scroll-margin-top: 0; }
.still-act .act-sub { color: var(--muted-dark); }
.still-picker, .still-act .email-panel { text-align: left; }
.still-picker { display: grid; gap: 16px; margin: 6px 0 22px; padding: 20px; border-radius: 18px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); }
.still-choice { border: 0; margin: 0; padding: 0; min-width: 0; }
.still-choice legend { padding: 0; margin: 0 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-on-dark); }
.still-seg { display: flex; flex-wrap: wrap; gap: 8px; }
.still-seg label { position: relative; cursor: pointer; }
.still-seg input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.still-seg span { display: inline-block; padding: 10px 18px; border-radius: 999px; border: 2px solid rgb(255 255 255 / 0.3); font-weight: 800; line-height: 1.2; transition: background 0.15s, border-color 0.15s, color 0.15s; }
.still-seg input:checked + span { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.still-seg input:focus-visible + span { outline: 3px solid var(--paper); outline-offset: 2px; }
.still-selects select { margin-top: 10px; width: 100%; max-width: 420px; padding: 11px 14px; border-radius: 12px; border: 2px solid rgb(255 255 255 / 0.3); background: var(--ink-2); color: var(--paper); font: inherit; font-weight: 700; }
.still-who { margin: 0; line-height: 1.55; color: var(--muted-dark); }
.still-picker[hidden], .still-step[hidden], .still-selects select[hidden] { display: none !important; }
.still-step { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; font-weight: 800; }
.still-step button[disabled] { opacity: 0.4; cursor: default; }
.still-list-title { margin-top: 52px; }
.still-grid { margin-top: 18px; }
@media (max-width: 560px) {
  .still-hero { padding: 44px 0 40px; }
  .still-faces li { width: 46px; height: 46px; margin-left: -10px; }
  .still-quote { padding: 74px 22px 26px; min-height: 150px; }
  .still-quote-mark { font-size: 6.5rem; left: 18px; top: 12px; }
  .still-picker { padding: 16px; }
  .still-seg span { padding: 9px 14px; }
}
@media (min-width: 980px) {
  .still-hero-grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 48px; }
  .still-faces { margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
  .still-faces li { width: auto; height: auto; aspect-ratio: 1; margin: 0; border: 3px solid #b3261e; }
  .still-faces li:nth-child(even) { transform: translateY(14px); }
  .still-faces-more { font-size: 1.3rem !important; }
}
.still-names { margin: -6px 0 0; }
.still-names summary { cursor: pointer; font-weight: 800; color: var(--brand-on-dark); }
.still-names ul { margin: 10px 0 0; padding: 0; list-style: none; columns: 2 260px; column-gap: 24px; color: var(--muted-dark); font-size: 0.92rem; line-height: 1.45; }
.still-names li { break-inside: avoid; padding: 3px 0; }
.still-seg-3 span, .still-seg-2 span { text-align: center; }
@media (max-width: 979px) {
  .still-face-x, .still-more-d { display: none !important; }
}
@media (min-width: 980px) {
  .still-more-m { display: none !important; }
}
@media (max-width: 600px) {
  body:has(.still-page) .topbar .wordmark { font-size: 0.72rem; white-space: nowrap; letter-spacing: 0.01em; }
  body:has(.still-page) .topbar-cta { display: none; }
  .still-title { font-size: clamp(2.5rem, 12.5vw, 3.4rem); }
  .still-kicker { font-size: 0.74rem; letter-spacing: 0.08em; }
  .still-faces { margin-top: 26px; flex-wrap: nowrap; }
  .still-faces li { width: 46px; height: 46px; flex: 0 0 auto; }
  .still-hero-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .still-hero-cta .btn { width: 100%; text-align: center; justify-content: center; padding-left: 10px; padding-right: 10px; }
  .still-tiles { margin-top: 24px; }
  .still-lede { font-size: 1rem; }
  .still-quotes { margin-top: 32px; }
  .still-quote p { font-size: 1.75rem; }
  .still-answer { padding: 18px; }
  .still-act { margin-top: 36px; padding: 48px 0 56px; }
  .still-act .act-title { font-size: 2rem; }
  .still-seg-3, .still-seg-2 { display: grid; gap: 6px; }
  .still-seg-3 { grid-template-columns: repeat(3, 1fr); }
  .still-seg-2 { grid-template-columns: repeat(2, 1fr); }
  .still-seg span { display: block; padding: 10px 6px; font-size: 0.88rem; height: 100%; display: grid; place-items: center; }
  .still-selects select { max-width: none; }
  .still-step { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; text-align: center; font-size: 0.85rem; }
  .still-step .btn { padding-left: 8px; padding-right: 8px; }
  .still-act .send-with { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .still-act .send-with .btn { margin: 0; width: 100%; font-size: 0.86rem; padding-left: 6px; padding-right: 6px; text-align: center; justify-content: center; }
  .still-act .send-with .send-app, .still-act .send-with .copy-all, .still-act .send-with .fit-note { grid-column: 1 / -1; }
  .still-act .email-panel { padding-left: 16px; padding-right: 16px; }
  .still-act .envelope dd { word-break: break-word; }
  .still-list-title { margin-top: 40px; }
  .still-card { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .still-card .council-card-photo { width: 76px; height: 76px; border-width: 3px; }
  .still-card .council-card-name { font-size: 1.1rem; }
  .still-card .council-card-stance { font-size: 0.7rem; }
}
/* zionismisracism.co.uk: one councillor's page */
.still-back { margin: 0 0 22px; font-weight: 800; }
.still-back a { color: var(--brand-on-dark); text-decoration: none; }
.still-back a:hover { text-decoration: underline; }
/* The photo, large and round with where they stand on a badge across its foot, beside who they are; stacked on a phone. */
.still-person-grid { display: grid; gap: 44px; align-items: center; grid-template-columns: minmax(0, 1fr) auto; }
.still-person-figure { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; align-items: center; }
.still-person-main { grid-column: 1; grid-row: 1; min-width: 0; }
.still-person-photo { position: relative; width: 300px; height: 300px; border-radius: 50%; overflow: hidden; border: 7px solid #b3261e; background: var(--ink-3); display: grid; place-items: center; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.8), 0 0 0 10px rgb(179 38 30 / 0.14); }
.still-person-photo-changed { border-color: var(--brand); box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.8), 0 0 0 10px rgb(106 176 35 / 0.16); }
.still-person-photo-left { border-color: #e08a00; box-shadow: 0 30px 60px -24px rgb(0 0 0 / 0.8), 0 0 0 10px rgb(224 138 0 / 0.16); }
.still-person-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.still-person-photo .backer-initials { font-size: 5rem; font-weight: 900; color: var(--paper); }
.still-person-badge { position: relative; margin: -22px 0 0; padding: 9px 18px; border-radius: 999px; font-weight: 900; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; box-shadow: 0 8px 20px -8px rgb(0 0 0 / 0.7); }
.still-person-badge-none { background: #b3261e; color: #fff; }
.still-person-badge-changed { background: var(--brand); color: #111; }
.still-person-badge-left { background: #e08a00; color: #111; }
.still-person-main .still-kicker { margin-bottom: 8px; }
.still-person-name { margin: 0; font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: 0.95; font-size: clamp(2.6rem, 5.6vw, 4.6rem); overflow-wrap: anywhere; }
.still-person-where { margin: 12px 0 0; font-size: 1.15rem; line-height: 1.45; color: var(--muted-dark); }
.still-person-where a { color: var(--paper); text-underline-offset: 3px; }
.still-person-claim { margin: 28px 0 0; max-width: 22ch; font-weight: 900; font-stretch: 80%; text-transform: uppercase; line-height: 1.02; font-size: clamp(1.8rem, 3.6vw, 2.8rem); }
.still-person-claim span { color: #ff5a4e; }
.still-person-hero .still-person-q { margin-top: 12px; }
.still-person-cta { margin-top: 26px; }
/* The record, in plain lines a phone can read: the name as printed, the lists it is in, and the council's page. */
.still-person-facts { margin: 30px 0 0; padding: 4px 20px; border-radius: 16px; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.12); max-width: 640px; }
.still-person-facts > div { display: grid; grid-template-columns: 7.5em 1fr; gap: 14px; padding: 12px 0; }
.still-person-facts > div + div { border-top: 1px solid rgb(255 255 255 / 0.1); }
.still-person-facts dt { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-on-dark); padding-top: 3px; }
.still-person-facts dd { margin: 0; font-size: 1rem; line-height: 1.45; color: var(--paper); }
.still-person-facts a { color: var(--paper); font-weight: 700; text-underline-offset: 3px; }
.still-record { margin: 40px 0 0; max-width: 72ch; }
.still-record-line { font-size: 1.1rem; line-height: 1.6; }
.still-record .evidence-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.still-wrong { margin: 44px 0 0; }
.still-wrong-kicker { margin: 0 0 4px; font-size: 1.3rem; font-weight: 900; }
.still-wrong-kicker strong { color: var(--brand-on-light, var(--brand)); }
.still-wrong-title { margin: 0 0 22px; font-weight: 900; font-stretch: 75%; text-transform: uppercase; font-size: clamp(2rem, 6vw, 3.2rem); line-height: 1; }
.still-wrong-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; counter-reset: none; }
.still-wrong-list li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding: 20px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line-light); }
.still-wrong-n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--brand); font-weight: 900; font-size: 1.25rem; }
.still-wrong-list h3 { margin: 4px 0 6px; font-size: 1.12rem; font-weight: 900; line-height: 1.2; }
.still-wrong-list p { margin: 0; line-height: 1.55; font-size: 0.98rem; }
.still-wrong-more { margin: 18px 0 0; font-weight: 800; }
.still-person-act { margin-top: 48px; }
.still-person-act .act { background: var(--ink); color: var(--paper); }
.still-person-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 14px; margin: 40px 0 0; padding: 20px 0; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.still-person-nav-link { display: flex; flex-direction: column; font-weight: 800; text-decoration: none; color: inherit; line-height: 1.25; }
.still-person-nav-link span { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); }
.still-person-nav-link:hover { color: var(--brand-on-light); }
.still-person-nav-next { text-align: right; }
.still-person-source { margin: 22px 0 0; font-size: 0.9rem; color: var(--muted-light); max-width: 80ch; }
@media (max-width: 860px) {
  .still-person-grid { grid-template-columns: 1fr; gap: 22px; text-align: center; }
  .still-person-figure, .still-person-main { grid-column: 1; grid-row: auto; }
  .still-person-photo { width: 220px; height: 220px; border-width: 6px; }
  .still-person-claim { margin-left: auto; margin-right: auto; }
  .still-person-hero .still-person-q { margin-left: auto; margin-right: auto; }
  .still-person-cta { justify-content: center; }
  .still-person-facts { text-align: left; margin-left: auto; margin-right: auto; }
}
@media (max-width: 600px) {
  .still-person-hero { padding-top: 26px; }
  .still-person-hero .still-back { margin-bottom: 18px; font-size: 0.95rem; }
  .still-person-photo { width: 200px; height: 200px; }
  .still-person-badge { font-size: 0.8rem; padding: 8px 16px; margin-top: -20px; }
  .still-person-name { font-size: clamp(2.3rem, 11vw, 3rem); }
  .still-person-where { font-size: 1.02rem; }
  .still-person-claim { margin-top: 22px; font-size: clamp(1.6rem, 7.6vw, 2rem); }
  .still-person-hero .still-person-cta { grid-template-columns: 1fr; margin-top: 22px; }
  .still-person-hero .still-person-cta .btn { padding-top: 15px; padding-bottom: 15px; }
  .still-person-facts { margin-top: 24px; padding: 2px 16px; }
  .still-person-facts > div { grid-template-columns: 1fr; gap: 3px; padding: 11px 0; }
  .still-person-facts dt { padding-top: 0; }
  .still-wrong-list li { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px; }
  .still-wrong-n { width: 36px; height: 36px; font-size: 1.05rem; }
  .still-person-nav { grid-template-columns: 1fr 1fr; }
  .still-person-nav .btn { grid-column: 1 / -1; grid-row: 2; }
}
.still-page .evidence-actions .btn-ghost { color: var(--ink); border-color: var(--ink); }
.still-page .evidence-actions { margin-top: 14px; }
@media (max-width: 600px) {
  .still-person-act .send-with { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .still-person-act .send-with .btn { margin: 0; width: 100%; font-size: 0.86rem; padding-left: 6px; padding-right: 6px; text-align: center; justify-content: center; }
  .still-person-act .send-with .send-app, .still-person-act .send-with .copy-all, .still-person-act .send-with .fit-note { grid-column: 1 / -1; }
  .still-person-act .email-panel { padding-left: 16px; padding-right: 16px; }
}
/* zionismisracism.co.uk: questions and answers, and councillors nearby */
.still-faq { margin: 48px 0 0; max-width: 820px; }
.still-faq-item { border-bottom: 1px solid var(--line-light); padding: 4px 0; }
.still-faq-item summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; }
.still-faq-item summary::-webkit-details-marker { display: none; }
.still-faq-item summary::after { content: '+'; flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--brand); font-weight: 900; font-size: 1.3rem; line-height: 1; }
.still-faq-item[open] summary::after { content: '\2212'; }
.still-faq-item h3 { margin: 0; font-size: 1.1rem; font-weight: 900; line-height: 1.3; }
.still-faq-item p { margin: 0 0 16px; line-height: 1.6; max-width: 72ch; }
.still-nearby { margin: 44px 0 0; }
.still-nearby-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.still-nearby-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line-light); text-decoration: none; color: inherit; line-height: 1.3; font-size: 0.92rem; }
.still-nearby-list a:hover { border-color: #b3261e; }
.still-nearby-list img, .still-nearby-i { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid #b3261e; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 900; font-size: 0.85rem; }
/* Open letters from Jewish communities */
.letter-callout { margin: 28px 0; padding: 22px 24px; border-radius: 18px; background: #fff8e6; border: 1px solid #f0d58a; border-left: 6px solid #c99700; color: var(--ink); }
.letter-callout-kicker { margin: 0 0 8px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #7a5a00; }
.letter-callout-quote { margin: 0 0 14px; font-size: 1.15rem; font-weight: 700; line-height: 1.4; max-width: 70ch; }
.letter-callout-links { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.letter-callout-source { font-size: 0.9rem; color: #5c4500; }
.letter-page-title { max-width: 26ch; font-size: clamp(2rem, 6vw, 3.4rem); }
.community-letter { margin: 30px 0; padding: 34px clamp(20px, 5vw, 56px); max-width: 760px; background: #fffdf7; border: 1px solid #ece3c8; border-radius: 6px; box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.35); font-family: Georgia, 'Times New Roman', serif; font-size: 1.08rem; line-height: 1.7; color: #1d1d1b; }
.community-letter p { margin: 0 0 1.1em; }
.community-letter-to { font-weight: 700; }
.community-letter-sign { margin-top: 1.6em !important; font-style: italic; }
.letter-act { margin: 36px 0 0; max-width: 760px; }
.letter-councillors { margin: 16px 0 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.letter-councillors li { font-weight: 700; }
.letter-councillors span { font-weight: 400; color: var(--muted-light); }
/* zionismisracism.co.uk: counties and councils */
.still-councils { margin: 40px 0 0; }
.still-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.still-chips a { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; background: var(--paper-2); border: 1px solid var(--line-light); text-decoration: none; color: inherit; font-weight: 800; font-size: 0.95rem; }
.still-chips a:hover { border-color: #b3261e; }
.still-chips span { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.78rem; }
.still-area-faces { margin-top: 24px; }
.still-area .still-title { font-size: clamp(2.2rem, 7vw, 4.6rem); max-width: 16ch; }
@media (min-width: 980px) { .still-area-faces { display: flex; padding-left: 12px; } .still-area-faces li { width: 64px; height: 64px; margin-left: -12px; aspect-ratio: auto; border-width: 3px; } .still-area-faces li:nth-child(even) { transform: none; } }
.letter-full { margin: 34px 0 36px; padding: 26px clamp(16px, 4vw, 34px) 8px; border-radius: 20px; background: #fff8e6; border: 1px solid #f0d58a; border-top: 6px solid #c99700; }
.letter-full-title { margin: 0 0 8px; max-width: 30ch; }
.letter-full-note { margin: 0; font-size: 0.95rem; color: #5c4500; }
.letter-full .community-letter { margin: 20px 0 24px; max-width: none; }
/* Footer: the brand, then Act, The case and The councillors, then one bar with the site's own pages */
@media (min-width: 760px) { .footer-inner { grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); } }
.footer-inner > .footer-col:nth-last-of-type(1) { grid-column: auto; }
.footer-col a { line-height: 1.35; }
.footer-base { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px 24px; }
.footer-site { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; padding-bottom: 14px; border-bottom: 1px solid #2a332c; }
.footer-site a { color: #e6ebe6; text-decoration: none; font-weight: 700; font-size: 0.95rem; }
.footer-site a:hover { color: var(--brand); }
.footer-site .footer-email { margin-left: auto; font-weight: 400; color: #b9c2bb; }
.footer-base-note { margin: 0; }
@media (max-width: 759px) {
  .footer-inner { grid-template-columns: 1fr 1fr; gap: 28px 18px; }
  .footer-brand { grid-column: 1 / -1; max-width: none; }
  .footer-col a { font-size: 0.92rem; }
  .footer-base { grid-template-columns: 1fr; }
  .footer-site { gap: 8px 16px; }
  .footer-site .footer-email { margin-left: 0; flex-basis: 100%; }
}
.still-quote-by { position: relative; margin-top: 12px; font-size: 0.85rem; font-weight: 700; opacity: 0.85; }
.still-statements { margin-top: 8px; }
.letter-related { margin: 0 0 8px; max-width: 760px; font-weight: 600; }
.letters-group { margin-top: 30px; }
/* The menu: a button in the top bar, a panel from the right */
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.topbar-right { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.menu-btn { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-right: -8px; border-radius: 10px; color: #fff; text-decoration: none; }
.menu-btn:hover, .menu-btn:focus-visible { background: rgb(255 255 255 / 0.1); }
.menu-btn-bars { display: grid; gap: 5px; width: 22px; }
.menu-btn-bars span { display: block; height: 2.5px; border-radius: 2px; background: currentColor; }
.menu-btn-bars span:nth-child(2) { width: 70%; justify-self: end; }
.site-menu { display: none; position: fixed; inset: 0; z-index: 1000; }
.site-menu.is-open, .site-menu:target { display: block; }
html.menu-open { overflow: hidden; }
.site-menu-backdrop { position: absolute; inset: 0; background: rgb(5 8 6 / 0.6); backdrop-filter: blur(2px); animation: menu-fade 0.18s ease; }
.site-menu-panel { position: absolute; top: 0; right: 0; bottom: 0; width: min(400px, 100%); overflow-y: auto; overscroll-behavior: contain; background: radial-gradient(140% 80% at 100% 0%, #1c2a1f 0%, var(--ink) 60%); color: var(--paper); padding: 14px 24px 40px; box-shadow: -20px 0 60px rgb(0 0 0 / 0.45); border-left: 6px solid var(--brand); animation: menu-in 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes menu-in { from { transform: translateX(40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes menu-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .site-menu-panel, .site-menu-backdrop { animation: none; } }
.site-menu-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; margin-bottom: 14px; }
.site-menu-mark { color: var(--brand); font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; text-decoration: none; }
.site-menu-close { display: grid; place-items: center; width: 42px; height: 42px; margin-right: -8px; border-radius: 10px; color: #fff; text-decoration: none; font-size: 2rem; line-height: 1; }
.site-menu-close:hover, .site-menu-close:focus-visible { background: rgb(255 255 255 / 0.1); }
.site-menu-cta { display: flex; justify-content: center; width: 100%; margin: 0 0 20px; }
.site-menu-group { padding: 16px 0; border-top: 1px solid #2a332c; }
.site-menu-head { margin: 0 0 8px; color: var(--brand); font-size: 0.74rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.site-menu-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.site-menu-group a { display: block; padding: 7px 0; color: #eef2ee; text-decoration: none; font-weight: 700; font-size: 1.05rem; line-height: 1.3; }
.site-menu-group a:hover, .site-menu-group a:focus-visible { color: var(--brand); }
.site-menu-site ul { grid-template-columns: 1fr 1fr; column-gap: 16px; }
.site-menu-site a { font-weight: 600; font-size: 0.98rem; }
/* The two lines: full-width bands on the home page, cards elsewhere */
.still-quotes-inline { margin: 30px 0; }
.quote-band { position: relative; overflow: hidden; padding: clamp(56px, 9vw, 110px) 0; }
.quote-band-1 { background: radial-gradient(120% 140% at 100% 0%, #24331f 0%, var(--ink) 60%); color: var(--paper); }
.quote-band-2 { background: linear-gradient(135deg, var(--brand) 0%, color-mix(in srgb, var(--brand) 78%, #0b3d0b) 100%); color: var(--on-brand, #0f1210); }
.quote-band-figure { position: relative; margin: 0; max-width: 18ch; }
.quote-band-2 .quote-band-figure { margin-left: auto; text-align: right; }
.quote-band-mark { position: absolute; top: -0.42em; left: -0.08em; font-family: Georgia, 'Times New Roman', serif; font-weight: 700; font-size: clamp(9rem, 22vw, 18rem); line-height: 1; pointer-events: none; }
.quote-band-1 .quote-band-mark { color: var(--brand); opacity: 0.9; }
.quote-band-2 .quote-band-mark { left: auto; right: -0.04em; color: var(--paper); opacity: 0.55; }
.quote-band blockquote { position: relative; margin: 0; padding-top: clamp(48px, 8vw, 96px); }
.quote-band p { margin: 0; font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: 0.95; letter-spacing: -0.01em; font-size: clamp(2.6rem, 8.5vw, 6.4rem); }
.quote-band-1 p::after { content: ''; display: block; width: 88px; height: 7px; margin-top: 24px; background: #ff5a4e; border-radius: 4px; }
.quote-band-2 p::after { content: ''; display: block; width: 88px; height: 7px; margin: 24px 0 0 auto; background: var(--ink); border-radius: 4px; }
.quote-band-by { position: relative; margin-top: 16px; font-weight: 700; font-size: clamp(0.9rem, 1.6vw, 1.05rem); max-width: 40ch; }
.quote-band-2 .quote-band-by { margin-left: auto; }
@media (max-width: 600px) { .quote-band-figure { max-width: none; } }
.nowrap { white-space: nowrap; }
/* Quote bands and cards: width measured in the quote's own large type; the credit sits under the quote */
.quote-band-figure { max-width: none; }
.quote-band p { max-width: 13ch; }
.quote-band-2 .quote-band-figure { text-align: right; }
.quote-band-2 p { margin-left: auto; }
.quote-band-2 .quote-band-mark { right: 0; }
.still-quote { flex-direction: column; justify-content: flex-end; align-items: stretch; }
.still-quote-by { margin-top: 14px; }
/* Councillors of every party */
.endorse-title span { color: var(--brand); }
.endorse-statement { margin: 18px 0; padding: 22px 24px; border-radius: 16px; background: var(--ink); color: var(--paper); border-left: 6px solid var(--brand); }
.endorse-statement p { margin: 0; font-weight: 900; font-size: clamp(1.15rem, 2.6vw, 1.45rem); line-height: 1.3; }
/* After endorsing: the two next steps, each a card. */
.endorse-next { margin: 30px 0 0; padding: 22px 22px 18px; border-radius: 18px; background: var(--paper-2); border: 1px solid var(--line-light); }
.endorse-next .kicker { margin: 0 0 4px; }
.endorse-next .section-title { margin: 0 0 10px; }
.endorse-next .field { margin-top: 12px; }
.endorse-next textarea { width: 100%; font: inherit; line-height: 1.5; }
.endorse-next input[type="text"] { width: 100%; }
.endorse-share-img { display: block; width: 100%; height: auto; border-radius: 14px; margin: 6px 0 14px; box-shadow: 0 12px 30px -14px rgb(0 0 0 / 0.5); }
.endorse-done-links { margin-top: 26px; }
@media (max-width: 600px) {
  .endorse-next { padding: 18px 16px 14px; }
  .endorse-next .send-with { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .endorse-next .send-with .btn { margin: 0; width: 100%; font-size: 0.86rem; padding-left: 6px; padding-right: 6px; text-align: center; justify-content: center; }
  .endorse-next .send-with .send-app, .endorse-next .send-with .copy-all, .endorse-next .send-with .fit-note { grid-column: 1 / -1; }
}
.endorse-what { margin-top: 36px; }
.endorse-list { margin-top: 44px; }
.endorse-parties { margin-bottom: 18px; }
.endorse-party { margin-top: 22px; }
.endorse-party-title { margin: 0 0 10px; font-size: 1.1rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; }
.endorse-people { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.endorse-person { display: flex; gap: 12px; align-items: flex-start; padding: 12px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line-light); }
.endorse-photo { position: relative; flex: 0 0 auto; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-weight: 900; border: 3px solid var(--brand); }
.endorse-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.endorse-photo-lg { width: 96px; height: 96px; font-size: 1.4rem; }
.endorse-who { display: grid; gap: 2px; min-width: 0; line-height: 1.35; }
.endorse-who span { color: var(--muted-light); font-size: 0.92rem; }
.endorse-who q { margin-top: 4px; font-style: italic; font-size: 0.92rem; }
.endorse-card { display: flex; gap: 18px; align-items: center; margin: 18px 0; padding: 18px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line-light); }
.endorse-card p { margin: 0 0 2px; }
.endorse-card-name { font-weight: 900; font-size: 1.25rem; }
.endorse-card-meta { color: var(--muted-light); }
/* Councillors of every party: the page */
.endorse-page { padding: 0 0 64px; }
.endorse-hero { padding-bottom: 60px; }
.endorse-hero-grid { display: grid; gap: 34px; align-items: center; }
@media (min-width: 980px) { .endorse-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; } }
.endorse-board { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.endorse-board-tile { display: grid; gap: 6px; padding: 12px 14px 12px; border-radius: 14px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.1); border-top: 6px solid var(--party); }
.endorse-board-name { font-weight: 900; font-size: 0.95rem; line-height: 1.15; color: #fff; }
.endorse-board-n { font-size: 0.82rem; color: var(--muted-dark); }
.endorse-board-n strong { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; margin-right: 4px; border-radius: 999px; background: var(--party); color: var(--party-ink); font-size: 0.85rem; }
.endorse-body { display: grid; gap: 30px; margin-top: 44px; }
@media (min-width: 980px) { .endorse-body { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 44px; align-items: start; } .endorse-side { position: sticky; top: 18px; } }
.endorse-signin { margin: 0; }
.endorse-submit { width: 100%; justify-content: center; }
/* The statement as a card to sign: a sheet of paper with the parties' colours along its foot (every party but the
   Greens), the first sentence large, the call to the Green Party after it, and a signature block with blanks to fill. */
.endorse-signcard { position: relative; overflow: hidden; margin: 16px 0 18px; padding: 26px 26px 30px; border-radius: 22px; background: linear-gradient(180deg, #fffefa 0%, #fbf8ef 100%); border: 1px solid #ebe4cf; box-shadow: 0 1px 0 #fff inset, 0 28px 60px -34px rgb(0 0 0 / 0.45); color: #141814; }
.endorse-signcard::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 7px; background: var(--sign-band, var(--brand)); }
.endorse-signcard-kicker { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 0.74rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--brand-on-light); }
.endorse-signcard-kicker::before { content: ''; width: 22px; height: 3px; border-radius: 2px; background: var(--brand); }
.endorse-signcard blockquote { position: relative; margin: 0; padding: 0 0 0 4px; }
.endorse-signcard-mark { position: absolute; top: -0.42em; right: -0.04em; font-family: var(--font); font-weight: 900; font-size: clamp(6rem, 16vw, 9rem); line-height: 1; color: var(--brand); opacity: 0.16; pointer-events: none; }
.endorse-signcard blockquote p { position: relative; margin: 0; font-family: var(--font); color: #141814; text-wrap: balance; }
.endorse-signcard-lead { display: block; margin-bottom: 10px; font-weight: 900; font-stretch: 88%; font-size: clamp(1.9rem, 5.6vw, 2.7rem); line-height: 1.02; letter-spacing: -0.01em; text-transform: uppercase; }
.endorse-signcard-rest { display: block; font-weight: 600; font-size: clamp(1.12rem, 2.5vw, 1.32rem); line-height: 1.4; color: #2b312b; }
.endorse-signcard-sig { display: flex; align-items: center; gap: 14px; margin-top: 24px; padding-top: 18px; border-top: 2px solid #e6dec6; }
.endorse-signcard-pen { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand); color: #0f1210; box-shadow: 0 6px 16px -6px rgb(0 0 0 / 0.35); }
.endorse-signcard-who { display: grid; gap: 4px; min-width: 0; font-stretch: 100%; }
.endorse-signcard-name { font-weight: 900; font-size: 1.15rem; line-height: 1.2; color: #141814; }
.endorse-signcard-where { font-weight: 600; font-size: 0.95rem; color: #4d544d; }
/* A blank to fill in: underlined in green, like a line on a form, in the words it asks for. */
.endorse-signcard-blank { padding: 0 2px; background: linear-gradient(transparent 62%, rgb(106 176 35 / 0.28) 62%); border-bottom: 2px dotted rgb(78 130 26 / 0.7); }
@media (min-width: 700px) { .endorse-signcard { padding: 32px 36px 36px; } }
.endorse-why { line-height: 1.6; }
/* Before you unsubscribe: the case for endorsing, then a plain button. */
.endorse-stop .endorse-signcard { margin: 22px 0 18px; }
.endorse-stop-sofar { font-size: 1.1rem; margin: 0 0 8px; }
.endorse-stop-why { margin: 28px 0 8px; }
.endorse-reasons { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.endorse-reasons li { padding: 14px 16px; background: var(--brand-soft); border-left: 5px solid var(--brand); border-radius: 0 12px 12px 0; line-height: 1.5; color: var(--ink); }
.endorse-reasons strong { display: block; margin-bottom: 2px; }
.endorse-stop-cta { margin: 28px 0; }
.endorse-stop-box { margin: 44px 0 12px; padding: 20px; border: 1px dashed var(--line-light); border-radius: var(--radius); }
.endorse-stop-box .section-title { font-size: 1.3rem; margin-top: 0; }

.endorse-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.endorse-steps li { display: grid; gap: 4px; padding: 16px; border-radius: 16px; background: var(--paper-2); border: 1px solid var(--line-light); }
.endorse-steps span:not(.endorse-step-n) { color: var(--muted-light); font-size: 0.92rem; line-height: 1.4; }
.endorse-step-n { display: grid; place-items: center; width: 34px; height: 34px; margin-bottom: 4px; border-radius: 50%; background: var(--ink); color: var(--brand); font-weight: 900; }
.endorse-list { margin-top: 56px; }
.endorse-party-title { display: flex; align-items: center; gap: 10px; }
.endorse-party-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--party); }
.endorse-party .endorse-photo { border-color: var(--party); }
.endorse-person-ghost { border-style: dashed; background: transparent; opacity: 0.7; }
/* The list newest first: each person in their party's colour, with the party and the day they signed. */
.endorse-people-recent .endorse-person { border-left: 5px solid var(--party); }
.endorse-people-recent .endorse-photo { border-color: var(--party); }
.endorse-who .endorse-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 4px; }
.endorse-who .endorse-party-chip { padding: 1px 9px; border-radius: 999px; background: var(--party); color: var(--party-ink); font-size: 0.78rem; font-weight: 800; }
.endorse-who .endorse-when { font-size: 0.85rem; }
.endorse-parties a[aria-current="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.endorse-person-ghost .endorse-photo { border-style: dashed; border-color: var(--line-light); background: var(--paper-2); color: var(--muted-light); }
.endorse-empty-note { margin-top: 12px; font-weight: 700; }
.endorse-group { margin-top: 28px; }
.endorse-group-title { margin: 0 0 6px; font-size: 1.5rem; font-weight: 900; text-transform: uppercase; font-stretch: 80%; }
/* The way across between the councillors' and the MPs' endorsement pages */
.endorse-switch-wrap { margin-top: 22px; }
.endorse-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; padding: 14px 18px; border-radius: 14px; background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 35%, transparent); color: var(--ink); text-decoration: none; font-weight: 800; }
.endorse-switch strong { margin-left: auto; color: var(--brand-on-light); }
.endorse-switch:hover { border-color: var(--brand); }
/* A banned word in a text box */
.banned-field { border-color: #b3261e !important; box-shadow: 0 0 0 3px rgb(179 38 30 / 0.2) !important; }
.banned-note { margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; background: #fbe3e1; color: #7a1712; font-weight: 700; font-size: 0.95rem; border-left: 5px solid #b3261e; }
/* Home page: councillors and MPs of every party who stand with the campaign */
.allies { background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%); }
.allies-title span { color: var(--brand-on-light); }
.allies-lede { max-width: 70ch; font-size: 1.08rem; line-height: 1.6; }
.allies-parties { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.allies-parties li { display: inline-flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-light); border-left: 5px solid var(--party); font-weight: 800; font-size: 0.9rem; }
.allies-parties strong { display: inline-grid; place-items: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: var(--party); color: var(--party-ink); font-size: 0.8rem; }
.allies-grid { display: grid; gap: 18px; margin-top: 24px; }
@media (min-width: 900px) { .allies-grid { grid-template-columns: 1fr 1fr; } }
.allies-side { display: grid; gap: 14px; align-content: start; padding: 24px; border-radius: 20px; background: var(--ink); color: var(--paper); box-shadow: 0 24px 50px -30px rgb(0 0 0 / 0.5); }
.allies-side-councillor { background: radial-gradient(120% 120% at 100% 0%, #24331f 0%, var(--ink) 60%); }
.allies-count { margin: 0; display: grid; gap: 2px; }
.allies-count strong { font-size: clamp(2.6rem, 6vw, 3.6rem); font-weight: 900; line-height: 1; color: var(--brand); }
.allies-count span { font-weight: 800; font-size: 1.1rem; }
.allies-count em { font-style: normal; color: var(--muted-dark); font-size: 0.92rem; }
.allies-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.allies-people li { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; background: rgb(255 255 255 / 0.05); border-left: 4px solid var(--party); }
.allies-photo { position: relative; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--ink-3); display: grid; place-items: center; font-weight: 900; font-size: 0.85rem; border: 2px solid var(--party); }
.allies-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.allies-who { display: grid; gap: 1px; min-width: 0; line-height: 1.3; }
.allies-who > span { color: var(--muted-dark); font-size: 0.88rem; }
.allies-party { font-style: normal; font-weight: 800; color: #fff; }
.allies-empty { margin: 0; padding: 14px; border-radius: 12px; border: 1px dashed rgb(255 255 255 / 0.25); color: var(--muted-dark); }
.allies-actions { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.allies-more { color: #e6ebe6; font-weight: 700; }

/* Ask your MP and councillors: the postcode form, who represents you, and the email. */
.local-form { margin: 22px 0 6px; max-width: 560px; }
.local-label { display: block; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; font-size: 0.85rem; margin-bottom: 8px; }
.local-row { display: flex; gap: 10px; flex-wrap: wrap; }
.local-row input { flex: 1 1 180px; min-width: 0; font: inherit; font-size: 1.25rem; padding: 14px 16px; border-radius: 999px; border: 2px solid var(--line-light); text-transform: uppercase; background: var(--paper); color: var(--ink); }
.local-status { min-height: 1.4em; margin: 10px 0 0; font-weight: 700; }
.local-status.is-bad { color: #ffb4a8; }
.local-privacy { font-size: 0.85rem; opacity: 0.8; margin: 6px 0 0; }
.local-switch { margin: 10px 0 0; font-weight: 700; }
.local-switch a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 3px; }
.local-tiers { display: flex; flex-wrap: wrap; gap: 10px; margin: -6px 0 18px; }
.local-results { margin: 34px 0 10px; }
.local-place { color: var(--muted-light); margin: -4px 0 18px; }
.local-group { margin: 0 0 22px; }
.local-group-title { font-size: 1.1rem; margin: 0 0 10px; }
.local-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.local-person { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line-light); border-left: 5px solid var(--line-light); }
.local-person-ask { border-left-color: var(--brand); }
.local-person-done { border-left-color: #2f6fb3; }
.local-person-off { opacity: 0.75; }
.local-who { display: flex; flex-direction: column; }
.local-ward { margin-top: 4px; font-size: 0.85rem; color: var(--muted-light); text-underline-offset: 3px; }
.local-ward:hover { color: var(--ink); }
.local-group-title a { color: inherit; text-underline-offset: 3px; }
.local-party { font-size: 0.9rem; color: var(--muted-light); }
.local-badge { font-size: 0.8rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; padding: 4px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-light); }
.local-person-ask .local-badge { background: var(--brand-soft); border-color: var(--brand); }
.local-person-done .local-badge::before { content: '\2713\00a0'; }
.local-missing { font-size: 0.9rem; }
.local-act { margin-top: 10px; }
.local-how { margin: 40px 0 30px; }
.local-how-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin-bottom: 14px; }
.local-how-card { padding: 18px; border-radius: var(--radius); background: var(--paper-2); border: 1px solid var(--line-light); }
.local-how-kicker { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.85rem; margin: 0 0 8px; }
.allies-ask { margin: 26px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.endorse-ask-yours { margin: 14px 0 0; }
.endorse-ask-yours a { color: inherit; font-weight: 700; }
.local-act #address { min-height: 0; height: auto; }

/* ---- The home page hero: the message, the two actions and the scoreboard, all above the fold ---- */
.hero.hero-home { background: radial-gradient(110% 120% at 80% 0%, #2f4a1f 0%, #16200f 45%, var(--ink) 80%); color: var(--paper); padding: clamp(28px, 4.5vw, 64px) 0 clamp(36px, 5vw, 72px); }
.hero.hero-home::after { content: ''; position: absolute; inset: auto 0 0 0; width: auto; height: 6px; right: 0; bottom: 0; transform: none; border-radius: 0; opacity: 1; background: linear-gradient(90deg, #b3261e 0 50%, var(--brand) 50% 100%); }
.hero-home-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; }
.hero-home .stamp { margin: 0 0 18px; }
.hero-home .headline { color: var(--paper); --hl-base: clamp(3.4rem, 8.6vw, 7.6rem); }
.hero-claim { margin: 8px 0 0; font-weight: 900; font-stretch: 72%; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; font-size: clamp(2.1rem, 4.8vw, 4rem); color: var(--brand); }
.hero-claim em { font-style: normal; color: #ff5a4e; }
.hero-home .lede { color: rgb(255 255 255 / 0.86); max-width: 46ch; font-size: clamp(1.08rem, 1.5vw, 1.28rem); margin: 18px 0 0; }
.hero-home .lede + .lede { margin-top: 10px; }
.hero-home .cta-line { color: var(--brand); font-size: clamp(1.15rem, 2vw, 1.45rem); margin: 22px 0 0; text-transform: uppercase; letter-spacing: 0.01em; }
.hero-home .hero-actions { margin-top: 14px; gap: 12px 14px; }
.hero-home .btn-hero.btn-primary { background: var(--brand); color: var(--ink); --pulse: var(--brand); box-shadow: 0 12px 34px rgb(106 176 35 / 0.35); }
.hero-home .btn-hero.btn-primary:hover { background: #7cc72d; }
.hero-home .btn-letter { background: transparent; color: var(--paper); border: 2px solid rgb(255 255 255 / 0.55); box-shadow: none; }
.hero-home .btn-letter:hover, .hero-home .btn-letter:focus-visible { background: rgb(255 255 255 / 0.1); color: var(--paper); }
.hero-home .btn-letter .btn-tag { background: rgb(255 255 255 / 0.14); color: var(--paper); }

/* Your own MP and councillors, straight from the hero. */
.hero-local { margin: 26px 0 0; max-width: 34rem; padding: 18px 18px 18px 20px; border-radius: 18px; background: rgb(255 255 255 / 0.07); border: 1px solid rgb(255 255 255 / 0.16); }
.hero-local-label { display: block; font-weight: 900; font-stretch: 85%; font-size: clamp(1.15rem, 1.9vw, 1.4rem); line-height: 1.2; color: var(--paper); }
.hero-local-sub { margin: 4px 0 12px; color: rgb(255 255 255 / 0.75); font-size: 0.95rem; line-height: 1.4; }
.hero-local-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-local-row input { flex: 1 1 160px; min-width: 0; font: inherit; font-size: 1.15rem; font-weight: 700; padding: 13px 18px; border-radius: 999px; border: 2px solid transparent; background: var(--paper); color: var(--ink); text-transform: uppercase; }
.hero-local-row input::placeholder { text-transform: none; font-weight: 500; color: #6b7369; }
.hero-local-row input:focus-visible { outline: 3px solid var(--brand); outline-offset: 2px; }
.btn-hero-local { background: var(--paper); color: var(--ink); font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; padding: 13px 22px; border-radius: 999px; }
.btn-hero-local:hover { background: #e9efe4; }

/* The scoreboard: emails, the ask, the pledge, and the other parties. */
.hero-home-board { display: grid; gap: 14px; }
.hero-home .hero-counter { margin: 0; max-width: none; background: var(--brand); color: var(--ink); border: 0; border-radius: 18px; padding: 18px 22px; box-shadow: 0 18px 44px rgb(0 0 0 / 0.35); }
.hero-home .hero-counter-label { max-width: none; }
.hero-home .hero-ask { margin: 0; max-width: none; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); box-shadow: none; padding: 18px 20px; }
.hero-home .hero-ask-choice { margin: 12px 0 8px; }
.hero-home .hero-pledge { margin: 0; max-width: none; background: rgb(255 255 255 / 0.06); border: 1px solid rgb(255 255 255 / 0.14); box-shadow: none; padding: 18px 20px; }
.hero-home .hero-pledge::before { display: none; }
.hero-home .hero-pledge-row { margin-top: 4px; }
.hero-home .hero-pledge-count strong { font-size: 2.2rem; font-weight: 900; font-stretch: 72%; line-height: 1; }
.hero-home .hero-pledge-latest { margin-top: 10px; color: rgb(255 255 255 / 0.8); }
.hero-home .hero-pledge-latest a { color: inherit; }
.hero-allies { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 20px 24px; border-radius: 18px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: 0 14px 36px rgb(0 0 0 / 0.3); }
/* Along its foot, the other parties' colours, and not the Greens': Labour, Conservative, Liberal Democrat, Reform UK, Independent, residents' parties. */
.hero-allies::after { content: ''; position: absolute; inset: auto 0 0 0; height: 8px; background: linear-gradient(90deg, #e4003b 0 16.66%, #0087dc 0 33.33%, #faa61a 0 50%, #12b6cf 0 66.66%, #6b7280 0 83.33%, #7c5c9e 0); }
.hero-allies strong { font-size: 2.2rem; font-weight: 900; font-stretch: 72%; line-height: 1; color: var(--brand-on-light); }
.hero-allies span { font-weight: 700; line-height: 1.3; }
.hero-allies:hover span { text-decoration: underline; }

@media (max-width: 900px) {
  .hero-home-grid { grid-template-columns: 1fr; }
  .hero-home .headline { --hl-base: clamp(3.2rem, 17vw, 6rem); }
  .hero-claim { font-size: clamp(2rem, 10vw, 3.4rem); }
  .hero-home .hero-actions .btn-hero { flex: 1 1 100%; justify-content: center; text-align: center; }
  .hero-local { padding: 16px; }
}
/* The old hero kept room on the right for a tilted image; this one fills the width. */
.hero.hero-home .wrap { max-width: 1240px; padding-right: var(--gutter); }
.hero.hero-home::after { display: block; }
.hero-home .r { color: #ff7a6e; }
@media (min-width: 901px) {
  .hero-home .cta-line { font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.3; max-width: 34ch; }
  .hero-home-board { position: sticky; top: 24px; }
}
/* Line up with the top bar, and keep the postcode box above the fold on a laptop screen. */
.hero.hero-home .wrap { max-width: 1120px; }
@media (min-width: 901px) {
  .hero.hero-home { padding-top: 36px; }
  .hero-home .stamp { margin-bottom: 14px; }
  .hero-home .headline { --hl-base: clamp(3.4rem, 7vw, 6.2rem); }
  .hero-claim { font-size: clamp(2rem, 3.6vw, 3.2rem); }
  .hero-home .lede { font-size: 1.1rem; margin-top: 14px; }
  .hero-home .lede + .lede { margin-top: 6px; }
  .hero-home .cta-line { margin-top: 16px; }
  .hero-home .hero-actions { flex-wrap: nowrap; }
  .hero-home .hero-actions .btn-hero { font-size: 1rem; padding: 14px 22px; min-height: 52px; white-space: nowrap; }
  .hero-home .btn-letter .btn-tag { display: none; }
  .hero-local { margin-top: 18px; padding: 14px 16px 16px; }
  .hero-local-sub { margin-bottom: 10px; }
}
/* Who represents you: each in their party's colour, with their photo in a circle. */
.local-person { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; align-items: center; gap: 14px; border-left: 6px solid var(--party, var(--line-light)); }
.local-person-ask, .local-person-done { border-left-color: var(--party, var(--brand)); }
.local-photo { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--party, #3a423c); color: var(--party-ink, #fff); font-weight: 900; font-size: 1.2rem; box-shadow: 0 0 0 3px var(--party, #3a423c); }
.local-photo img { width: 100%; height: 100%; object-fit: cover; display: block; background: #dfe4dd; }
.local-who strong { font-size: 1.05rem; }
.local-party { display: inline-block; width: fit-content; margin-top: 4px; padding: 2px 10px; border-radius: 999px; background: var(--party, #3a423c); color: var(--party-ink, #fff); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.02em; }
@media (max-width: 560px) {
  .local-person { grid-template-columns: 56px minmax(0, 1fr); }
  .local-photo { width: 56px; height: 56px; }
  .local-badge { grid-column: 2; justify-self: start; }
}

/* Here's the plan: three asks, your own councillors, Green councillors and your whole council, with the share row and the MPs beneath. */
@media (min-width: 960px) { .pledge-ask { grid-template-columns: minmax(0, 1fr); } }
.pledge-ask-title span { display: block; color: var(--brand-on-light); }
.pledge-ask-lede { max-width: 60ch; }
.plan-asks { display: grid; gap: 22px; margin-top: 26px; }
@media (min-width: 860px) { .plan-asks { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: stretch; } }
/* The third ask, the whole council: across both columns until there is room for three. */
@media (min-width: 860px) and (max-width: 1179px) { .plan-ask-council { grid-column: 1 / -1; } }
@media (min-width: 1180px) { .plan-asks { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; } }
.plan-ask, .pledge-ask-main .plan-ask.ask-cllr { position: relative; overflow: hidden; display: flex; flex-direction: column; margin: 0; padding: 32px 26px 24px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line-light); box-shadow: 0 18px 44px rgb(0 0 0 / 0.08); }
.plan-ask::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 9px; }
.plan-ask-local::before { background: linear-gradient(90deg, #e4003b 0 16.6%, #0087dc 0 33.3%, #faa61a 0 50%, #12b6cf 0 66.6%, #6b7280 0 83.3%, var(--brand) 0); }
.plan-ask-green::before { background: var(--brand); }
.plan-ask-council::before { background: var(--ink); }
.plan-ask-tag { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); }
.plan-ask-num { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 1rem; letter-spacing: 0; }
.plan-ask-green .plan-ask-num { background: var(--brand); color: var(--on-brand); }
.plan-ask-title { margin: 0 0 6px; font-size: clamp(1.8rem, 3.4vw, 2.5rem); line-height: 1; font-weight: 900; font-stretch: 85%; text-transform: uppercase; letter-spacing: -0.01em; }
.plan-ask-what { margin: 0 0 12px; font-weight: 800; font-size: 1.12rem; line-height: 1.35; color: var(--brand-on-light); }
.plan-ask > p { line-height: 1.55; }
.plan-parties { display: flex; flex-wrap: wrap; gap: 6px 14px; list-style: none; padding: 0; margin: 2px 0 18px; font-size: 0.88rem; font-weight: 700; color: var(--muted-light); }
.plan-parties li { display: inline-flex; align-items: center; gap: 6px; }
.plan-parties span { display: inline-block; width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); }
.plan-local { margin: auto 0 0; padding: 16px; border-radius: 16px; background: var(--brand-soft); }
.plan-local-label { display: block; margin: 0 0 8px; font-weight: 900; }
.plan-local-row { display: flex; flex-wrap: wrap; gap: 10px; }
.plan-local-row input { flex: 1 1 9rem; min-width: 0; padding: 12px 14px; font-size: 1.1rem; border-radius: 12px; border: 2px solid var(--line-light); background: var(--paper); text-transform: uppercase; }
.plan-local-row input::placeholder { text-transform: none; }
.plan-local-row .btn { flex: 0 0 auto; }
.plan-ask .hint { margin: 12px 0 0; }
.plan-ask-green .ask-steps { margin: 2px 0 14px; }
.plan-ask-green .ask-actions { margin: auto 0 0; }
.plan-ask-green .ask-actions .btn-hero { width: 100%; justify-content: center; white-space: normal; text-align: center; }
.plan-ask-more { margin: 16px 0 0; padding-top: 14px; border-top: 1px dashed var(--line-light); font-weight: 800; }
.plan-ask-more a { color: var(--ink); text-decoration-thickness: 2px; text-decoration-color: var(--brand); text-underline-offset: 3px; }
@media (min-width: 960px) {
  .pledge-ask-side .pledge-share { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 4px 32px; align-items: center; }
  .pledge-ask-side .pledge-share > .section-title, .pledge-ask-side .pledge-share > p { grid-column: 1; }
  .pledge-ask-side .pledge-share > :not(.section-title):not(p) { grid-column: 2; grid-row: 1 / span 2; }
}

/* Councillors and MPs of every party: the line under the heading in every party's colours, each as long as its share of the seats. */
.still-hero.endorse-hero::after { height: 8px; background: var(--party-stripe, linear-gradient(90deg, #b3261e 0 50%, var(--brand) 50% 100%)); }

/* The directory: every councillor and MP, every council, county and region. */
.dir-page { padding-bottom: 48px; }
.dir-crumbs { margin: 18px 0 10px; font-size: 0.9rem; color: var(--muted-light); }
.dir-crumbs a { color: inherit; }
.dir-title { margin-top: 4px; }
.dir-lede { max-width: 70ch; }
.dir-search { position: relative; margin: 18px 0 22px; max-width: 46rem; }
.dir-search-label { display: block; margin: 0 0 6px; font-weight: 900; }
.dir-search-row { display: flex; flex-wrap: wrap; gap: 10px; }
.dir-search-row input { flex: 1 1 14rem; min-width: 0; padding: 12px 14px; font-size: 1.05rem; border-radius: 12px; border: 2px solid var(--line-light); background: var(--paper); }
/* The search page: region and party filters under the box, and tabs for the kind of result, each with its count. */
.dir-filters { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 10px; margin-top: 12px; }
.dir-filter { display: grid; gap: 4px; font-weight: 800; font-size: 0.85rem; }
.dir-filter span { letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-light); }
.dir-filter select { padding: 10px 12px; font: inherit; font-size: 1rem; font-weight: 700; border-radius: 12px; border: 2px solid var(--line-light); background: var(--paper); color: var(--ink); }
.dir-tabs { display: flex; gap: 6px; overflow-x: auto; margin: 4px 0 18px; padding-bottom: 2px; border-bottom: 2px solid var(--line-light); scrollbar-width: none; }
.dir-tabs a { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; margin-bottom: -2px; font-weight: 800; text-decoration: none; color: var(--muted-light); border-bottom: 3px solid transparent; }
.dir-tabs a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--brand); }
.dir-tabs a:hover { color: var(--ink); }
.dir-places .dir-places-kind { margin: 14px 0 8px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); }
.dir-places .dir-places-kind:first-of-type { margin-top: 0; }
.dir-search-hint { margin-top: 4px; }
.dir-live { position: absolute; z-index: 20; left: 0; right: 0; top: calc(100% + 6px); max-height: 70vh; overflow: auto; padding: 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-light); box-shadow: 0 18px 44px rgb(0 0 0 / 0.16); }
.dir-live-people { list-style: none; margin: 8px 0 0; padding: 0; }
.dir-live-person { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--line-light); }
.dir-live-person i { width: 10px; height: 10px; border-radius: 50%; grid-row: span 2; }
.dir-live-person a { font-weight: 800; }
.dir-live-seat { grid-column: 2; font-size: 0.85rem; color: var(--muted-light); }
.dir-live-person .dir-badge { grid-column: 3; grid-row: 1 / span 2; }
.dir-live-kind { font-size: 0.75rem; color: var(--muted-light); }
.dir-live-more { display: inline-block; margin-top: 10px; font-weight: 800; }
.dir-live-none { margin: 0; color: var(--muted-light); }
.dir-stats { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; margin: 8px 0 16px; }
.dir-stat { flex: 1 1 9rem; padding: 14px 16px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-light); }
.dir-stat strong { display: block; font-size: 1.8rem; font-weight: 900; line-height: 1; }
.dir-stat span { font-size: 0.88rem; color: var(--muted-light); }
.dir-bar-fig { margin: 0 0 20px; }
.dir-bar { display: flex; height: 14px; border-radius: 999px; overflow: hidden; background: var(--line-light); }
.dir-bar span { display: block; min-width: 2px; }
.dir-key { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 8px; font-size: 0.85rem; color: var(--muted-light); }
.dir-key i { display: inline-block; width: 10px; height: 10px; margin-right: 5px; border-radius: 50%; vertical-align: -1px; }
.dir-key strong { color: var(--ink); }
.dir-links { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.dir-section { margin: 28px 0 0; }
.dir-section .section-title a { color: inherit; }
.dir-count { font-size: 0.85rem; font-weight: 700; color: var(--muted-light); }
.dir-councils { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px 22px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); }
.dir-councils li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3px; padding: 8px 0; border-bottom: 1px solid var(--line-light); }
.dir-councils a { font-weight: 800; }
.dir-mini-bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--line-light); }
.dir-mini-bar i { display: block; min-width: 1px; }
.dir-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 0 0 12px; }
.dir-tags a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line-light); background: var(--paper); font-weight: 700; font-size: 0.92rem; text-decoration: none; color: var(--ink); }
.dir-tags a:hover { border-color: var(--brand); }
.dir-tags-people i { width: 9px; height: 9px; border-radius: 50%; }
.dir-tags-line { margin: 0 0 12px; }
.dir-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); }
.dir-person { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-light); border-left: 6px solid var(--party, var(--line-light)); }
.dir-photo { display: grid; place-items: center; flex: none; border-radius: 50%; overflow: hidden; background: var(--party, #3a423c); color: var(--party-ink, #fff); font-weight: 900; box-shadow: 0 0 0 3px var(--party, #3a423c); }
.dir-photo img { width: 100%; height: 100%; object-fit: cover; display: block; background: #dfe4dd; }
.dir-who { display: grid; gap: 4px; min-width: 0; }
.dir-name { font-weight: 800; line-height: 1.2; }
.dir-meta { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 0.85rem; color: var(--muted-light); }
.dir-meta .dir-ward { color: inherit; text-decoration: underline; text-decoration-color: var(--line-light); text-underline-offset: 3px; }
.dir-meta .dir-ward:hover { color: var(--ink); text-decoration-color: currentColor; }
/* A council's wards: each a link to everyone elected for it, with how many. */
.dir-wards { margin-top: 18px; }
.dir-ward-tags a .dir-count { font-size: 0.78rem; }
.dir-ward-tags a[aria-current="page"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.dir-ward-tags a[aria-current="page"] .dir-count { color: rgb(255 255 255 / 0.7); }
.dir-party { display: inline-block; padding: 1px 9px; border-radius: 999px; background: var(--party, #3a423c); color: var(--party-ink, #fff); font-size: 0.75rem; font-weight: 800; }
.dir-badge { justify-self: end; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--line-light); font-size: 0.75rem; font-weight: 800; color: var(--muted-light); text-align: center; max-width: 9rem; }
.dir-pos-endorsed .dir-badge, .dir-pos-pledged .dir-badge, .dir-pos-rejected .dir-badge { background: var(--brand-soft); border-color: var(--brand); color: var(--ink); }
.dir-pos-endorsed .dir-badge::before, .dir-pos-pledged .dir-badge::before, .dir-pos-rejected .dir-badge::before { content: '\2713\00a0'; }
.dir-pos-backed .dir-badge { background: #fbe9e7; border-color: #b3261e; color: #7a1712; }
.dir-pos-resigned .dir-badge { background: #eef1f5; }
.dir-profile-head { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px; margin: 10px 0 14px; }
.dir-profile-head .page-title { margin: 2px 0 6px; }
.dir-seat { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; margin: 0; font-weight: 700; }
/* Every seat they hold, one to a line: an MP who is also a councillor shows both. */
.dir-seats { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-weight: 700; line-height: 1.35; }
.dir-seats a { color: inherit; text-underline-offset: 3px; }
.dir-also { font-weight: 800; color: var(--ink); background: var(--paper-2); border: 1px solid var(--line-light); border-radius: 999px; padding: 1px 9px; }
.dir-answer { max-width: 62ch; }
.dir-stand { margin: 18px 0 24px; padding: 22px 22px 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-light); border-top: 8px solid var(--line-light); box-shadow: 0 14px 36px rgb(0 0 0 / 0.07); max-width: 52rem; }
.dir-stand-yes { border-top-color: var(--brand); }
.dir-stand-title { margin: 0 0 10px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; text-transform: uppercase; font-stretch: 85%; }
.dir-stand-note { color: var(--muted-light); }
.dir-own-words { margin: 0 0 12px; padding: 10px 14px; border-left: 4px solid var(--brand); background: var(--paper-2); border-radius: 0 10px 10px 0; }
.dir-ask-box { margin: 14px 0 8px; }
.dir-ask-box .btn-hero { white-space: normal; text-align: center; }
.dir-stand-you { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--line-light); font-weight: 700; }
.dir-facts dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 18px; margin: 0; max-width: 46rem; }
.dir-facts dt { font-weight: 800; color: var(--muted-light); }
.dir-facts dd { margin: 0; }
.dir-source { margin-top: 26px; }
.dir-asks { display: grid; gap: 14px; margin: 36px 0 0; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.dir-ask { display: grid; gap: 6px; padding: 18px 20px; border-radius: 16px; background: var(--ink); color: var(--paper); text-decoration: none; border-top: 6px solid #e4003b; border-image: linear-gradient(90deg, #e4003b 0 20%, #0087dc 0 40%, #faa61a 0 60%, #12b6cf 0 80%, var(--brand) 0) 1; }
.dir-ask-green { border-image: none; border-top-color: var(--brand); border-radius: 16px; }
.dir-ask strong { font-size: 1.15rem; font-weight: 900; }
.dir-ask span { color: rgb(255 255 255 / 0.78); font-size: 0.95rem; }

/* The live counter in two: the Green Party's inboxes, then other parties' councillors and MPs beneath. */
.hero-counter.hero-counter-split { flex-direction: column; align-items: stretch; gap: 0; }
.hero-counter-part { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.hero-counter-part[hidden] { display: none; }
.hero-counter-others { margin-top: 14px; padding-top: 14px; border-top: 2px solid rgb(0 0 0 / 0.16); }
.hero-counter-others .hero-counter-n { font-size: clamp(2.2rem, 5vw, 3.4rem); }
@media (max-width: 700px) { .hero-counter-part { flex-direction: column; align-items: flex-start; gap: 6px; } }

/* The pledge page's headings: the title on two lines, "who has signed" in the brand colour beneath, and the section
   headings with an accent bar, balanced lines and the key words picked out. Larger on desktop. */
.pledge-h1 { text-wrap: balance; }
.pledge-h1 em { display: block; }
.pledge-section-title { text-wrap: balance; margin-top: 4px; }
.pledge-section-title::before { content: ''; display: block; width: 64px; height: 8px; margin: 0 0 14px; border-radius: 4px; background: var(--brand); }
.pledge-count { color: var(--brand-on-light); }
.pledge-title-em { color: var(--brand-on-light); }
.pledge-list > .wrap > .pledge-panel-kicker, .pledge-why > .wrap > .pledge-panel-kicker { margin-top: 0; }
@media (min-width: 900px) {
  .pledge-hero { padding: 76px 0 56px; }
  .pledge-hero .page-title.pledge-h1 { font-size: clamp(3.6rem, 5.6vw, 5.6rem); line-height: 0.9; letter-spacing: -0.005em; margin: 10px 0 20px; }
  .pledge-hero .page-title.pledge-h1 em { font-size: 1.12em; }
  .pledge-hero .kicker { font-size: 0.95rem; letter-spacing: 0.14em; }
  .pledge-hero .lede { font-size: 1.3rem; line-height: 1.5; max-width: 52ch; }
  .pledge-page-v2 .section-title { font-size: clamp(2.4rem, 3.4vw, 3.4rem); line-height: 0.98; }
  .pledge-page-v2 .pledge-section-title { font-size: clamp(2.8rem, 4vw, 4rem); }
  .pledge-count { font-size: 1.15em; }
}

/* A councillor named by a link from our emails: greeted by name, one button straight to the pledge form. */
.pledge-known { margin: 22px 0 0; padding: 18px 20px; max-width: 34rem; border-radius: 16px; background: rgb(255 255 255 / 0.07); border: 2px solid var(--brand); }
.pledge-known-hi { margin: 0; font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 900; color: #fff; }
.pledge-known-sub { margin: 2px 0 14px; color: rgb(255 255 255 / 0.8); }
.pledge-known-not { margin: 12px 0 0; font-size: 0.9rem; color: rgb(255 255 255 / 0.75); }
.pledge-known-not a { color: var(--brand); }
.pledge-known-inline { margin: 0 0 18px; padding: 14px 16px; border-radius: 12px; border: 2px solid var(--brand); }

/* The other ask, shown after a send: your own councillors after the Greens, the Greens after your own. */
.next-ask { margin: 22px 0 0; padding: 20px 20px 18px; border-radius: 18px; background: var(--paper); border: 2px solid var(--brand); box-shadow: 0 12px 32px rgb(0 0 0 / 0.08); color: var(--ink); text-align: left; }
.next-ask-kicker { margin: 0 0 4px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand-on-light); }
.next-ask-title { margin: 0 0 8px; font-size: clamp(1.3rem, 2.6vw, 1.7rem); line-height: 1.1; font-weight: 900; }
.next-ask .plan-local { margin: 12px 0 0; }
.next-ask-green { margin: 0; padding: 40px 0; border: 0; border-top: 6px solid var(--brand); border-radius: 0; box-shadow: none; background: var(--brand-soft); }
.next-ask-green .wrap > p { max-width: 62ch; }
.next-ask-green .ask-actions .btn-hero { white-space: normal; text-align: center; }
.card-local .plan-local { margin-top: auto; }
/* "Your name", asked before an email to councillors opens: it signs the email. */
.your-name { display: grid; gap: 6px; margin: 14px 0 6px; max-width: 26rem; }
.your-name input { width: 100%; padding: 12px 14px; font: inherit; font-size: 1.05rem; border-radius: 12px; border: 2px solid var(--line-light); background: var(--paper); color: var(--ink); }
.your-name input:focus { outline: 3px solid var(--brand); outline-offset: 1px; }
.dir-ask-box .your-name { margin-top: 0; }
.dir-ask-need { margin: 8px 0 0; font-weight: 800; color: #b3261e; }
/* A council's page: email its councillors, everyone still to ask, one party, or one person. */
.dir-email { margin: 22px 0 8px; padding: 20px 20px 16px; border-radius: 18px; background: var(--ink); color: var(--paper); }
.dir-email .section-title { margin: 0 0 8px; color: var(--paper); }
.dir-email p { margin: 0 0 10px; line-height: 1.5; }
.dir-email .field-label, .dir-email .your-name .field-label { color: var(--paper); }
.dir-email .field-note { color: rgb(255 255 255 / 0.7); }
.dir-email-done { padding: 10px 12px; border-radius: 12px; background: rgb(255 255 255 / 0.08); font-size: 0.95rem; }
.dir-email-pick { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 4px; }
.dir-email-pick .btn { display: inline-flex; align-items: center; gap: 8px; }
.dir-email-party { background: var(--party); color: var(--party-ink); border: 2px solid var(--party); }
.dir-email-n { padding: 0 8px; border-radius: 999px; background: rgb(0 0 0 / 0.18); font-size: 0.85em; }
.dir-email-compose { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgb(255 255 255 / 0.16); }
.dir-email-status { font-weight: 800; }
.dir-email .envelope, .dir-email .env-row { border-color: rgb(255 255 255 / 0.16); }
.dir-email .env-row dt { color: rgb(255 255 255 / 0.7); }
.dir-email textarea, .dir-email input[type="text"] { width: 100%; font: inherit; color: var(--ink); background: var(--paper); }
.dir-email textarea { line-height: 1.5; }
.dir-email .hint { color: rgb(255 255 255 / 0.75); }
.dir-email .dir-ask-need { color: #ff8a80; }
.dir-email .send-with .btn-ghost { color: var(--paper); border-color: rgb(255 255 255 / 0.55); }
.dir-person:has(.dir-email-one) .dir-photo, .dir-person:has(.dir-email-one) .dir-who { grid-row: span 2; }
.dir-email-one { grid-column: 3; justify-self: end; padding: 4px 14px; font-size: 0.85rem; background: var(--ink); color: var(--paper); border: 0; }
@media (max-width: 600px) {
  .dir-email { padding: 16px 14px 12px; }
  .dir-email .send-with { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .dir-email .send-with .btn { margin: 0; width: 100%; font-size: 0.86rem; padding-left: 6px; padding-right: 6px; text-align: center; justify-content: center; }
  .dir-email .send-with .send-app, .dir-email .send-with .copy-all, .dir-email .send-with .fit-note { grid-column: 1 / -1; }
}

/* An endorser's own words on the thank-you page, and the way to change them. */
.endorse-words { margin: 18px 0 8px; padding: 14px 16px; border: 1px solid var(--line-light); border-radius: 12px; background: var(--paper); }
.endorse-words-label { margin: 0 0 8px; font-weight: 600; }
.endorse-words-edit { margin: 4px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.endorse-words-edit .hint { margin: 0; }
.endorse-edit-yours { margin-top: 14px; }

/* Press: the councillors and MPs of every party who have endorsed, each with their own words. */
.press-endorsers { list-style: none; padding: 0; margin: 14px 0; display: grid; gap: 12px; }
.press-endorsers li { padding: 12px 14px; border: 1px solid var(--line-light); border-radius: 12px; background: var(--paper); }
.press-endorser-words { margin: 8px 0 0; padding: 6px 12px; border-left: 4px solid var(--brand); background: var(--paper-2); border-radius: 0 8px 8px 0; font-style: italic; }

/* Someone new standing with us: they slide in at the top of the board, lit for a moment, and the rest move down. */
@keyframes allies-arrive { from { opacity: 0; transform: translateY(-14px); max-height: 0; } to { opacity: 1; transform: none; max-height: 120px; } }
@keyframes allies-glow { 0%, 60% { background: color-mix(in srgb, var(--brand) 22%, transparent); } 100% { background: transparent; } }
.allies-people li.is-new { animation: allies-arrive 0.7s ease-out both, allies-glow 4s ease-out both; border-radius: 12px; }
@media (prefers-reduced-motion: reduce) { .allies-people li.is-new { animation: none; } }

/* /councillors: those who say Zionism is not racism, Greens who signed and councillors of other parties who endorsed. */
.say-not { margin: 22px 0 26px; padding: 20px 22px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-light); border-top: 8px solid var(--brand); box-shadow: 0 14px 36px rgb(0 0 0 / 0.06); }
.say-not .section-title { margin-top: 0; }
.say-not-lede { margin: 0 0 14px; }
.say-not-grid { display: grid; gap: 18px; }
@media (min-width: 900px) { .say-not-grid { grid-template-columns: 1fr 1fr; } }
.say-not-grid h3 { margin: 0 0 8px; font-size: 1.05rem; }
.say-not-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.say-not-list li { display: grid; gap: 2px; padding: 8px 12px; border-radius: 10px; background: var(--paper-2); border-left: 5px solid var(--party, var(--brand)); }
.say-not-list li a { font-weight: 800; }
.say-not-list li span { font-size: 0.88rem; color: var(--muted-light, #5b6166); }
.say-not-list li i { font-style: normal; font-weight: 700; }
.say-not-more { margin: 14px 0 0; font-size: 0.92rem; }
.councillors-index-allies { list-style: none; margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--line-light); }
.councillors-index-allies li { padding: 2px 0 2px 8px; border-left: 4px solid var(--party, var(--brand)); margin: 3px 0; }
.councillors-index-tag-endorsed { font-weight: 700; color: var(--ink); }

/* zionismisracism.co.uk: councillors of other parties who told the campaign in writing that Zionism is racism. */
.still-written { margin: 48px 0 8px; }
.still-written-lede { max-width: 68ch; font-size: 1.05rem; line-height: 1.6; margin: 0 0 18px; color: var(--muted-light); }
.still-written-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.still-written-card { display: grid; grid-template-columns: 96px 1fr; gap: 16px; align-items: start; padding: 18px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-light); border-top: 8px solid #b3261e; box-shadow: 0 14px 36px rgb(0 0 0 / 0.07); }
.still-written-photo { position: relative; display: grid; place-items: center; width: 96px; height: 96px; border-radius: 50%; overflow: hidden; background: var(--party, var(--ink-3)); border: 3px solid var(--party, var(--ink-3)); text-decoration: none; }
.still-written-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.still-written-body { min-width: 0; }
.still-written-name { margin: 0; font-size: 1.2rem; font-weight: 900; }
.still-written-name a { color: inherit; }
.still-written-seat { margin: 2px 0 10px; font-size: 0.9rem; color: var(--muted-light); }
.still-written-party { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--party, var(--ink-3)); color: var(--party-ink, #fff); font-weight: 800; font-size: 0.8rem; }
.still-written-quote { margin: 0 0 10px; padding: 10px 14px; border-left: 4px solid #b3261e; background: #fbe3e1; border-radius: 0 10px 10px 0; color: #5c130e; font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; font-weight: 700; line-height: 1.35; }
.still-written-quote p { margin: 0; overflow-wrap: anywhere; }
.still-written-when { margin: 0; font-size: 0.88rem; color: var(--muted-light); }
@media (max-width: 480px) { .still-written-card { grid-template-columns: 64px 1fr; gap: 12px; padding: 14px; } .still-written-photo { width: 64px; height: 64px; } .still-written-quote { font-size: 1.1rem; } }

/* A councillor's page: what they told the campaign in writing. */
.dir-stand-said { border-top-color: #b3261e; }
.dir-said-words { border-left-color: #b3261e; background: #fbe3e1; color: #5c130e; font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; font-weight: 700; }

/* A councillor's or MP's own page, recognised from their sign-in: the endorsement form sits where the ask would be. */
.dir-sign-here { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--line-light); }
.dir-sign-here .dir-stand-you { margin-top: 0; padding-top: 0; border-top: 0; }

/* The endorsement page's search: has this councillor or MP signed? If not, one press asks them. */
.endorse-find { margin: 36px auto 0; }
.endorse-find-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 14px; }
.endorse-find-form input[type="search"] { flex: 1 1 240px; min-width: 0; padding: 11px 14px; border: 1px solid var(--line-light); border-radius: 10px; font: inherit; background: var(--paper); color: inherit; }
.endorse-find-results { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }
.endorse-find-row { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 14px; border: 1px solid var(--line-light); border-left: 6px solid var(--party, var(--line-light)); border-radius: 10px; background: var(--paper); }
.endorse-find-row strong a { color: inherit; }
.endorse-find-seat { color: var(--muted-light); font-size: 0.92rem; }
.endorse-find-done { margin-left: auto; font-weight: 800; color: var(--brand-on-light, var(--brand)); }
.endorse-find-row .btn { margin-left: auto; white-space: normal; }
.endorse-find-none { color: var(--muted-light); }
@media (max-width: 480px) { .endorse-find-row .btn, .endorse-find-done { margin-left: 0; flex-basis: 100%; } }

/* Can't sign in? Leave a mobile number and the campaign helps on WhatsApp. */
/* The WhatsApp help box takes its colours from where it sits: on the dark sign-in panel, light text on a faint light
   wash; on a light page, dark text on a faint dark wash. Never a white box on a dark panel. */
.wa-help { margin: 18px 0 0; padding: 12px 14px; border-radius: 12px; color: inherit;
  border: 1px dashed rgb(127 127 127 / 0.45); background: rgb(127 127 127 / 0.08);
  border-color: color-mix(in srgb, currentColor 32%, transparent); background: color-mix(in srgb, currentColor 6%, transparent); }
.wa-help > summary { cursor: pointer; font-weight: 700; color: inherit; }
.wa-help > summary::marker { color: #25d366; }
.wa-help[open] > summary { margin-bottom: 4px; }
.wa-help p, .wa-help .hint { color: inherit; }
.wa-help .hint { opacity: 0.8; }
.wa-help-form { margin-top: 10px; }
.wa-help-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* The endorsement form: one press. Their own words fold away above the button. */
.endorse-words { margin: 12px 0; }
.endorse-words > summary { cursor: pointer; font-weight: 700; }
.endorse-one-press { white-space: normal; text-align: center; }

/* /endorse and /endorse/mps: who has signed, by party, as a tally. Only those who have signed are counted. */
.endorse-tally { padding: 16px 18px; border-radius: 16px; background: rgb(255 255 255 / 0.05); border: 1px solid rgb(255 255 255 / 0.12); align-self: start; }
.endorse-tally-head { margin: 0 0 10px; color: var(--muted-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.endorse-tally-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.endorse-tally-row { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; align-items: baseline; padding-left: 10px; border-left: 4px solid var(--party); }
.endorse-tally-name { color: #fff; font-weight: 900; font-size: 0.98rem; line-height: 1.2; }
.endorse-tally-n { color: #fff; font-size: 1.45rem; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.endorse-tally-row.is-new .endorse-tally-n { animation: tally-pop 1.4s ease-out; }
@keyframes tally-pop { 0% { transform: scale(1.5); color: var(--brand-on-dark, var(--brand)); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .endorse-tally-row.is-new .endorse-tally-n { animation: none; } }

.btn-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }

/* The tally is a card, not the old grid of tiles: one column, a header with the total. */
.endorse-board.endorse-tally { display: block; grid-template-columns: none; padding: 20px 22px 22px; background: linear-gradient(160deg, rgb(255 255 255 / 0.07), rgb(255 255 255 / 0.02)); box-shadow: 0 18px 40px -24px rgb(0 0 0 / 0.6); }
.endorse-tally-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 16px; padding-bottom: 14px; border-bottom: 1px solid rgb(255 255 255 / 0.1); }
.endorse-tally-total { color: var(--brand-on-dark, var(--brand)); font-size: 2.1rem; font-weight: 900; line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.endorse-tally-head span { color: var(--muted-dark); font-size: 0.78rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.endorse-tally-rows { gap: 14px; }
.endorse-tally-row { padding: 2px 0 2px 12px; }

/* The share strip under the total: every party's part of it, in its colour. */
.endorse-tally-strip { display: flex; gap: 3px; height: 12px; margin: -2px 0 20px; border-radius: 999px; overflow: hidden; }
.endorse-tally-strip > span { min-width: 5px; background: var(--party); background-image: linear-gradient(180deg, rgb(255 255 255 / 0.22), rgb(255 255 255 / 0) 70%); }
/* A row: the party, its share and count, and a bar as long as its count against the leader's, scored like tally marks. */
.endorse-tally-figures { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; }
.endorse-tally-share { color: var(--muted-dark); font-size: 0.8rem; font-weight: 800; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.endorse-tally-bar { grid-column: 1 / -1; display: block; height: 16px; border-radius: 999px; background: rgb(255 255 255 / 0.07); overflow: hidden; }
.endorse-tally-fill { display: block; height: 100%; min-width: 6px; border-radius: 999px; background-color: var(--party);
  background-image: linear-gradient(180deg, rgb(255 255 255 / 0.24), rgb(255 255 255 / 0) 65%), repeating-linear-gradient(90deg, rgb(0 0 0 / 0) 0 5px, rgb(0 0 0 / 0.24) 5px 7px);
  box-shadow: 0 0 14px -4px var(--party); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1); transform-origin: left center; animation: tally-grow 1.1s cubic-bezier(0.22, 1, 0.36, 1) both; }
.endorse-tally.is-live .endorse-tally-fill { animation: none; }
.endorse-tally-row.is-new .endorse-tally-fill { animation: tally-glow 1.6s ease-out; }
@keyframes tally-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes tally-glow { 0% { box-shadow: 0 0 22px 2px var(--party); filter: brightness(1.35); } 100% { box-shadow: 0 0 14px -4px var(--party); filter: none; } }
@media (prefers-reduced-motion: reduce) { .endorse-tally-fill { animation: none; transition: none; } .endorse-tally-row.is-new .endorse-tally-fill { animation: none; } }

/* The register's "Look and check": the four lists, each a card to its own page, and one box to find anyone. */
.po-lists { margin: 22px 0 26px; padding: 20px; border-radius: 18px; background: var(--paper-2, #f4f6f2); border: 1px solid var(--line-light); }
.po-lists-title { margin: 0 0 14px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted-light); }
.po-lists-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.po-list-card { position: relative; display: grid; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-light); border-top: 6px solid var(--accent, var(--brand)); box-shadow: 0 10px 24px -18px rgb(0 0 0 / 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.po-list-card:hover, .po-list-card:focus-within { transform: translateY(-2px); box-shadow: 0 16px 30px -18px rgb(0 0 0 / 0.45); }
.po-list-card > a:first-child { display: grid; gap: 6px; padding: 16px 16px 14px; color: inherit; text-decoration: none; }
.po-list-n { font-size: 2.2rem; font-weight: 900; line-height: 1; letter-spacing: -0.01em; color: var(--accent, var(--brand-on-light, var(--brand))); font-variant-numeric: tabular-nums; }
.po-list-name { font-size: 1.1rem; font-weight: 900; line-height: 1.2; }
.po-list-what { font-size: 0.9rem; line-height: 1.45; color: var(--muted-light); }
.po-list-go { margin-top: 4px; font-weight: 800; font-size: 0.9rem; color: var(--accent, var(--brand-on-light, var(--brand))); }
.po-list-also { margin: -6px 16px 14px; font-size: 0.85rem; font-weight: 700; }
.po-list-backed { --accent: #b3261e; }
.po-list-greens { --accent: #2f7d32; }
.po-list-endorsed { --accent: #1d5fb4; }
.po-list-everyone { --accent: #5b4a8b; }
.po-lists-search { margin-top: 16px; }
.po-lists-search label { display: block; margin: 0 0 6px; font-weight: 800; }
@media (prefers-reduced-motion: reduce) { .po-list-card { transition: none; } .po-list-card:hover { transform: none; } }
.po-list-also { color: var(--accent, var(--brand-on-light, var(--brand))); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* A profile: what their local party has published on the motion, in the party's colour, quoted exactly, with the link. */
.dir-party-said { border-top-color: var(--party); }
.dir-party-words { margin: 4px 0 14px; padding: 14px 18px 12px; border-left: 5px solid var(--party); border-radius: 0 12px 12px 0; background: linear-gradient(90deg, color-mix(in srgb, var(--party) 12%, var(--paper-2, #f4f6f2)), var(--paper-2, #f4f6f2)); }
.dir-party-words p { margin: 0 0 10px; font-family: Georgia, 'Times New Roman', serif; font-size: 1.12rem; line-height: 1.5; font-weight: 700; color: var(--ink, #1c211e); }
.dir-party-words footer { font-size: 0.85rem; font-weight: 800; letter-spacing: 0.04em; color: var(--muted-light); }

/* /endorse: Green councillors who signed the pledge, beside those of other parties who endorsed. */
.endorse-tally-note { color: var(--muted-dark); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; }
.endorse-pledge-tag { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.74rem; font-weight: 800; text-decoration: none; color: #0f5132; background: #dcf3e4; border: 1px solid #b6e3c6; }
.endorse-pledge-tag:hover, .endorse-pledge-tag:focus-visible { text-decoration: underline; }

/* Greens for Palestine, answered: the motion page's layout, with where each quotation comes from and their booklet. */
.answered-fair { max-width: 46rem; margin: 0 0 20px; padding: 12px 16px; border-radius: 12px; background: var(--paper-2, #f4f6f2); border: 1px solid var(--line-light); font-size: 0.98rem; }
.answered-source { margin: 8px 0 0; font-size: 0.85rem; font-weight: 700; color: var(--muted-light); }
.answered-links { font-size: 0.9rem; }
.answered-booklet { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start; margin: 22px 0 26px; padding: 18px 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-light); border-left: 6px solid #b3261e; box-shadow: 0 12px 28px -20px rgb(0 0 0 / 0.35); max-width: 52rem; }
.answered-booklet p { margin: 0 0 10px; }
.answered-booklet-title { margin: 0 0 6px; font-size: 1.2rem; font-weight: 900; }
.answered-booklet-icon { display: grid; place-items: center; width: 56px; height: 68px; border-radius: 6px; background: #b3261e; color: #fff; font-weight: 900; font-size: 0.9rem; letter-spacing: 0.06em; box-shadow: inset 0 -10px 0 rgb(0 0 0 / 0.15); }
@media (max-width: 520px) { .answered-booklet { grid-template-columns: 1fr; } .answered-booklet-icon { width: 48px; height: 58px; } }

/* zionismisracism.co.uk: the councillors who wrote to us that Zionism is racism, each with a page of their own. */
.still-written-more { margin: 10px 0 0; font-size: 0.92rem; font-weight: 700; }
.still-written-tag { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #b3261e; color: #fff; font-size: 0.72rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 1px; }
.still-written-big { margin: 6px 0 18px; padding: 16px 20px; font-size: clamp(1.3rem, 3.2vw, 1.8rem); }
.still-written-person .still-person-claim span { color: #ffb4ab; }
.still-written-fair { padding: 10px 14px; border-radius: 10px; background: var(--paper-2, #f4f6f2); border: 1px solid var(--line-light); font-size: 0.95rem; }
.still-written-act { margin: 28px 0 40px; }

/* zionismisracism.co.uk: the motion in numbers, its authors' words, the other parties, and what has happened since. */
.zir-numbers { margin: 40px 0 8px; }
.zir-number-grid { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zir-number-grid > .zir-number-lead, .zir-number-grid > .zir-number:last-child { grid-column: 1 / -1; }
@media (min-width: 760px) { .zir-number-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zir-number-grid > .zir-number-lead, .zir-number-grid > .zir-number:last-child { grid-column: auto; } }
.zir-number { padding: 16px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-light); box-shadow: 0 6px 20px rgb(0 0 0 / 0.05); display: flex; flex-direction: column; gap: 6px; }
.zir-number strong { font-size: clamp(1.9rem, 1.5rem + 1.6vw, 2.6rem); font-weight: 900; line-height: 1; letter-spacing: -0.01em; }
.zir-number strong small { font-size: 0.5em; font-weight: 800; opacity: 0.7; }
.zir-number span { color: var(--muted-light); font-size: 0.92rem; line-height: 1.45; }
.zir-number-lead { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.zir-number-lead span { color: rgb(255 255 255 / 0.78); }
.zir-number-good { border-top: 6px solid var(--brand); }
.zir-number-good strong { color: var(--brand-on-light, var(--brand)); }
.zir-number-source { margin: 10px 0 0; font-size: 0.82rem; color: var(--muted-light); }
.zir-number-source a { color: inherit; }

.zir-authors { margin: 56px 0 8px; }
.zir-authors-kicker { margin: 0 0 4px; font-size: 0.8rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: #b3261e; }
.zir-authors-lede, .zir-others-lede, .zir-since-lede { max-width: 68ch; font-size: 1.05rem; line-height: 1.6; margin: 0 0 18px; color: var(--muted-light); }
.zir-authors-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 440px), 1fr)); }
.zir-author-card { padding: 18px 20px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line-light); border-top: 8px solid #b3261e; box-shadow: 0 14px 36px rgb(0 0 0 / 0.07); display: flex; flex-direction: column; }
.zir-author-quote { margin: 0 0 8px; padding: 10px 14px; border-left: 4px solid #b3261e; background: #fbe3e1; border-radius: 0 10px 10px 0; color: #5c130e; font-family: Georgia, 'Times New Roman', serif; font-size: 1.12rem; font-weight: 700; line-height: 1.4; }
.zir-author-quote p { margin: 0; overflow-wrap: anywhere; }
.zir-author-quote p::before { content: '“'; }
.zir-author-quote p::after { content: '”'; }
.zir-author-source { margin: 0 0 12px; font-size: 0.82rem; color: var(--muted-light); }
.zir-author-answer { margin: 0 0 10px; line-height: 1.55; }
.zir-author-more { margin: auto 0 0; font-weight: 800; }
.zir-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; }

.zir-others { margin: 56px 0 8px; }
.zir-others-lede strong { color: var(--brand-on-light, var(--brand)); font-size: 1.25em; }
.zir-others-lede q { font-weight: 700; color: var(--ink); }
.zir-others-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); }
.zir-other a { display: grid; grid-template-columns: 56px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; align-items: center; padding: 12px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line-light); border-left: 6px solid var(--party, var(--ink-3)); color: inherit; text-decoration: none; height: 100%; box-sizing: border-box; }
.zir-other a:hover { box-shadow: 0 8px 22px rgb(0 0 0 / 0.08); }
.zir-other-photo { grid-row: 1 / 4; position: relative; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--party, var(--ink-3)); }
.zir-other-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; }
.zir-other-photo .backer-initials { font-size: 1.05rem; }
.zir-other-name { font-weight: 900; line-height: 1.2; }
.zir-other-seat { font-size: 0.82rem; color: var(--muted-light); line-height: 1.3; }
.zir-other-party { justify-self: start; margin-top: 4px; padding: 1px 8px; border-radius: 999px; background: var(--party, var(--ink-3)); color: var(--party-ink, #fff); font-size: 0.72rem; font-weight: 800; }

.zir-since { margin: 56px 0 8px; }
.zir-timeline { margin-top: 8px; }
.zir-since-title { margin: 0 0 6px; font-size: 1.1rem; font-weight: 900; line-height: 1.3; }
.zir-since-text { margin: 0; line-height: 1.55; }

/* The first step for Green councillors, short of the pledge: one sentence, one press. */
.stand-tag-first { background: #fff1c2; color: #5a4300; }
.pledge-first { margin: 22px 0 30px; padding: 20px 22px; border-radius: 18px; background: var(--paper); border: 2px solid var(--brand); box-shadow: 0 10px 28px rgb(0 0 0 / 0.06); }
.pledge-first-kicker { margin: 0 0 4px; font-size: 0.78rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-on-light, var(--brand)); }
.pledge-first-title { margin: 0 0 8px; font-size: clamp(1.3rem, 1.1rem + 1vw, 1.7rem); font-weight: 900; line-height: 1.2; }
.pledge-first-title q { quotes: '“' '”'; }
.pledge-first p { line-height: 1.55; }
.pledge-first-line { margin: 12px 0 14px; padding: 12px 16px; border-left: 5px solid var(--brand); background: var(--brand-soft, #eef7e6); border-radius: 0 12px 12px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.3rem; font-weight: 700; line-height: 1.35; }
.pledge-first-line p { margin: 0; }
.pledge-first-done { border-color: var(--line-light); background: var(--paper-2, #f4f6f2); }

/* The endorser's thank-you page: no words yet, so ask for a line in place. */
.endorse-words-ask { margin: 18px 0 8px; padding: 18px 20px; border-radius: 16px; background: var(--paper); border: 2px solid var(--brand); box-shadow: 0 10px 26px rgb(0 0 0 / 0.06); }
.endorse-words-ask-title { margin: 0 0 4px; font-size: 1.2rem; font-weight: 900; }
.endorse-words-ask-why { margin: 0 0 10px; color: var(--muted-light); line-height: 1.5; }
.endorse-by-email { margin-top: 6px; }

/* The home page: what has happened since the vote, the newest few, each with its source. */
.home-news { padding: 44px 0; }
.home-news-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); }
.home-news-item { padding: 16px 18px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-light); border-top: 5px solid var(--red-on-light, #b80f24); display: flex; flex-direction: column; gap: 6px; }
.home-news-date { font-size: 0.78rem; font-weight: 900; letter-spacing: 0.08em; text-transform: uppercase; color: var(--red-on-light, #b80f24); }
.home-news-title { margin: 0; font-weight: 800; line-height: 1.35; }
.home-news-source { margin: auto 0 0; font-size: 0.85rem; color: var(--muted-light); }
.home-news-source a { color: inherit; }
.home-news-more { margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; }

/* The campaign in numbers. */
.numbers-page .zir-numbers { margin: 30px 0 8px; }
.numbers-parties { margin: 12px 0 0; line-height: 1.6; }
.numbers-text { width: 100%; box-sizing: border-box; font: inherit; font-size: 0.95rem; line-height: 1.5; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line-light); background: var(--paper-2, #f4f6f2); resize: vertical; }
.numbers-more { margin: 26px 0 40px; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; }
.endorse-show-all { margin: 16px 0 0; text-align: center; }

/* The footer: the line and the councillors' two asks across the top, then the columns side by side (as many as there
   are, two to a row on a phone), then the site's own links, the note and the credits. */
.site-footer .footer-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 24px; }
@media (min-width: 860px) { .site-footer .footer-inner { grid-template-columns: repeat(var(--footer-cols, 3), minmax(0, 1fr)); gap: 30px 40px; } }
.site-footer .footer-brand { grid-column: 1 / -1; max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px 48px; padding-bottom: 30px; border-bottom: 1px solid #2a332c; }
.footer-brand-text { max-width: 34ch; }
.footer-brand-text .footer-tag { margin-bottom: 0; }
.footer-brand-text .footer-note { margin-top: 12px; }
.footer-ctas { display: flex; flex-direction: column; gap: 10px; width: min(100%, 390px); }
.footer-cta { display: flex; justify-content: center; text-align: center; padding: 13px 18px; font-size: 0.98rem; }
.footer-cta-ghost { background: transparent; color: var(--paper) !important; border: 2px solid rgb(255 255 255 / 0.35); }
.footer-cta-ghost:hover { border-color: var(--brand); color: var(--brand) !important; }
.site-footer .footer-base { grid-template-columns: 1fr; gap: 14px; }
.footer-base-meta { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; color: #8f9a91; }
.footer-credits { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 0; }
.footer-credits .footer-powered + .footer-powered::before { content: '\00b7'; margin: 0 12px; color: #5d675f; }
.footer-credits .footer-powered a { color: #e6ebe6; text-decoration-color: rgb(255 255 255 / 0.35); }
.footer-credits .footer-powered a:hover { color: var(--brand); text-decoration-color: currentColor; }
@media (max-width: 560px) {
  .site-footer .footer-brand { padding-bottom: 24px; }
  .footer-ctas { width: 100%; }
  .footer-base-meta { flex-direction: column; align-items: flex-start; }
  .footer-credits { flex-direction: column; align-items: flex-start; gap: 6px; }
  .footer-credits .footer-powered + .footer-powered::before { content: none; }
}
.endorse-stance-line { margin: 10px 0 16px; padding: 14px 18px; border-left: 5px solid var(--ink); background: var(--paper-2, #f4f6f2); border-radius: 0 12px 12px 0; font-family: Georgia, 'Times New Roman', serif; font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.endorse-stance-line p { margin: 0; }

/* zionismisracism.co.uk's hero: every one of the backers' faces, a small mosaic. */
.still-faces.still-faces-all { flex-wrap: wrap; row-gap: 6px; }
.still-faces-all li { width: 44px; height: 44px; margin-left: -8px; border-width: 2px; }
.still-faces-all li .backer-initials { font-size: 0.85rem; position: absolute; inset: 0; display: grid; place-items: center; }
@media (max-width: 600px) { .still-faces.still-faces-all { flex-wrap: wrap; padding-left: 8px; } .still-faces-all li { width: 38px; height: 38px; margin-left: -8px; } }
@media (min-width: 980px) {
  .still-faces.still-faces-all { grid-template-columns: repeat(8, 1fr); gap: 8px; }
  .still-faces-all li { width: auto; height: auto; margin: 0; border-width: 2px; }
  .still-faces-all li:nth-child(even) { transform: translateY(8px); }
}

/* /your-position: the supporters' letter's two pledges, the chosen one marked, then the sign-in. */
.position-choices { list-style: none; margin: 20px 0 26px; padding: 0; display: grid; gap: 14px; }
@media (min-width: 720px) { .position-choices { grid-template-columns: 1fr 1fr; } }
.position-choice { display: grid; gap: 8px; height: 100%; padding: 18px 20px; border-radius: 14px; background: var(--paper); color: var(--ink); text-decoration: none; border: 2px solid var(--line-light); border-top-width: 6px; box-shadow: 0 10px 24px -18px rgb(0 0 0 / 0.35); transition: transform 0.15s ease, border-color 0.15s ease; }
.position-choice:hover { transform: translateY(-2px); border-color: var(--brand); }
.position-choice.is-chosen { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 8%, var(--paper)); }
.position-choice-kicker { font-size: 0.8rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-light); }
.position-choice.is-chosen .position-choice-kicker { color: var(--brand-on-light, var(--brand)); }
.position-choice-line { font-weight: 900; font-size: 1.12rem; line-height: 1.3; }
.position-choice-what { font-size: 0.92rem; color: var(--muted-light); }

/* Breadcrumbs under the top bar: Home > section > this page. */
.crumbs { background: var(--paper); border-bottom: 1px solid var(--line-light); }
.crumbs-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 0; margin: 0 auto; padding-top: 9px; padding-bottom: 9px; font-size: 0.86rem; color: var(--muted-light); }
.crumbs-list li { display: inline-flex; align-items: center; min-width: 0; }
.crumbs-list li + li::before { content: "\203A"; margin: 0 8px; color: var(--muted-light); opacity: 0.8; }
.crumbs-list a { color: inherit; text-decoration: underline; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: 3px; }
.crumbs-list a:hover { color: var(--ink); }
.crumbs-list [aria-current="page"] { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
/* The sign-in pages' single column starts clear of the breadcrumbs. */
.endorse-page > .wrap.narrow:first-child { padding-top: 32px; }

/* Who made this site: a dark hero, the maker's words as a signed letter, three facts as large numbers, and how to help. */
.maker-page { padding-bottom: 72px; }
.maker-title span { color: var(--brand-on-dark); }
.maker-letter { position: relative; display: grid; gap: 22px; margin: -34px auto 0; max-width: 820px; padding: 34px 28px 30px; border-radius: 22px; background: var(--paper); border: 1px solid var(--line-light); box-shadow: 0 24px 60px -30px rgb(0 0 0 / 0.45); z-index: 1; }
@media (min-width: 720px) { .maker-letter { grid-template-columns: 96px 1fr; padding: 44px 48px 40px; gap: 32px; } }
.maker-mark span { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--ink); color: var(--brand); font-size: 2.6rem; line-height: 1; box-shadow: inset 0 0 0 4px var(--brand); }
.maker-words p { margin: 0 0 16px; font-size: 1.08rem; line-height: 1.65; }
.maker-words .maker-big { margin: 0 0 6px; font-weight: 900; font-size: clamp(1.9rem, 4.6vw, 2.8rem); line-height: 1.05; letter-spacing: -0.01em; }
.maker-words .maker-lead { font-size: clamp(1.15rem, 2.4vw, 1.35rem); color: var(--muted-light); margin-bottom: 22px; }
.maker-quote { margin: 0 0 22px; padding: 18px 22px; border-left: 6px solid var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--paper)); border-radius: 0 14px 14px 0; }
.maker-quote p { margin: 0 !important; font-weight: 800; font-size: clamp(1.15rem, 2.6vw, 1.4rem) !important; line-height: 1.4 !important; }
.maker-words .maker-sign { margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line-light); font-weight: 800; font-style: italic; color: var(--muted-light); }
.maker-facts { list-style: none; margin: 30px auto 0; padding: 0; max-width: 820px; display: grid; gap: 12px; }
@media (min-width: 640px) { .maker-facts { grid-template-columns: repeat(3, 1fr); } }
.maker-facts li { display: grid; align-content: start; gap: 6px; padding: 22px 22px 20px; border-radius: 18px; background: var(--ink); color: var(--paper); text-align: center; }
.maker-facts strong { font-weight: 900; font-stretch: 80%; font-size: clamp(2.8rem, 7vw, 3.6rem); line-height: 1; color: var(--brand-on-dark); }
.maker-facts span { font-weight: 700; line-height: 1.35; color: var(--muted-dark); }
.maker-help { margin: 40px auto 0; max-width: 820px; text-align: center; }
.maker-help .section-title { margin-bottom: 8px; }
.maker-help-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 18px 0; }

/* Questions and answers: a dark opening, a numbered index beside numbered cards, the sources, and the ask. */
.faq-page { padding-bottom: 72px; }
.faq-hero .still-title { max-width: 16ch; }
.faq-hero .still-title span { color: var(--brand-on-dark); }
.faq-hero .still-sub a { color: var(--paper); }
.faq-layout { display: grid; gap: 28px; margin-top: 36px; }
@media (min-width: 900px) { .faq-layout { grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start; } .faq-index { position: sticky; top: 16px; } }
.faq-index { padding: 18px 20px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-light); }
.faq-index-title { margin: 0 0 10px; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 900; color: var(--muted-light); }
.faq-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.faq-index a { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 8px; align-items: start; padding: 7px 8px; border-radius: 10px; text-decoration: none; color: inherit; font-weight: 700; font-size: 0.95rem; line-height: 1.3; }
.faq-index a:hover { background: color-mix(in srgb, var(--brand) 10%, var(--paper)); }
.faq-index a span { color: var(--brand-on-light); font-variant-numeric: tabular-nums; }
@media (max-width: 899px) {
  .faq-index ol { display: flex; flex-wrap: wrap; gap: 8px; }
  .faq-index a { display: inline-flex; gap: 6px; padding: 8px 12px; border: 1px solid var(--line-light); border-radius: 999px; font-size: 0.86rem; }
}
.faq-cards { display: grid; gap: 18px; min-width: 0; }
.faq-card { position: relative; padding: 26px 28px 22px; border-radius: 20px; background: var(--paper); border: 1px solid var(--line-light); box-shadow: 0 16px 40px -30px rgb(0 0 0 / 0.35); scroll-margin-top: 20px; }
.faq-card-head { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 12px; }
.faq-card-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 14px; background: var(--ink); color: var(--brand); font-weight: 900; font-size: 1.3rem; font-variant-numeric: tabular-nums; }
.faq-card .faq-question { margin: 6px 0 0; font-size: clamp(1.3rem, 2.8vw, 1.7rem); line-height: 1.2; }
.faq-card .prose { font-size: 1.08rem; max-width: 66ch; }
.faq-card-top { display: inline-block; margin-top: 16px; font-size: 0.85rem; font-weight: 700; color: var(--muted-light); text-decoration: none; }
.faq-card-top:hover { color: var(--brand-on-light); }
.faq-sources { max-width: 820px; }
.faq-cta { margin: 48px 0 0; padding: 36px 28px; border-radius: 20px; background: var(--ink); color: var(--paper); text-align: center; }
.faq-cta .section-title { margin: 0 0 8px; color: inherit; }
.faq-cta p { margin: 0 0 18px; color: var(--muted-dark); }
.faq-cta .motion-cta { justify-content: center; margin-bottom: 0; }
.faq-cta .btn-ghost { color: var(--paper); border-color: var(--paper); }
@media (max-width: 640px) { .faq-card { padding: 20px 18px 18px; } .faq-card-head { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; } .faq-card-num { width: 42px; height: 42px; font-size: 1.1rem; border-radius: 12px; } }

/* The notice shown to everyone asking for a sign-in code while spam filters are blocking us (views/public/help.jsx). Its own colours, so it reads on the dark sign-in box and on paper alike. */
.signin-notice { margin: 16px 0 20px; padding: 16px 18px 14px; border-radius: 12px; background: #fff4e0; border: 1px solid #f0c26b; border-left: 6px solid #e08a00; color: #3d2500; font-size: 1rem; line-height: 1.5; max-width: 62ch; }
.signin-notice p, .signin-notice li { color: inherit; }
.signin-notice-head { margin: 0 0 8px; }
.signin-notice-head strong { color: #2d1a00; font-size: 1.05em; }
.signin-notice-ways { margin: 0; padding-left: 22px; }
.signin-notice-ways li { margin: 0 0 8px; }
.signin-notice-ways li:last-child { margin-bottom: 0; }
.signin-notice a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.signin-notice a:hover { color: #000; }

/* Who made this site: the record, the story, the words, what it is not, the bill, beyond one email, write to me. */
.maker-why { margin: 0 0 18px; padding: 18px 0 18px; border-top: 1px solid var(--line-light); border-bottom: 1px solid var(--line-light); }
.maker-why p:last-child { margin-bottom: 0 !important; }
.maker-why-head { margin: 0 0 8px !important; font-weight: 900; font-size: 0.85rem !important; letter-spacing: 0.08em; text-transform: uppercase; color: var(--brand); }
.maker-section { margin: 44px auto 0; max-width: 820px; }
.maker-section .section-title { margin-bottom: 10px; }
.maker-section > p { font-size: 1.05rem; line-height: 1.6; }
.maker-live { margin-top: 16px; }
.maker-timeline { list-style: none; margin: 18px 0 0 6px; padding: 4px 0 4px 26px; border-left: 3px solid var(--brand); display: grid; gap: 20px; }
.maker-timeline li { position: relative; }
.maker-timeline li::before { content: ''; position: absolute; left: -36px; top: 4px; width: 11px; height: 11px; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--brand); }
.maker-timeline time { display: block; font-weight: 800; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-light); }
.maker-timeline p { margin: 3px 0 0; font-size: 1.05rem; line-height: 1.55; }
.maker-timeline-now time { color: var(--brand); }
.maker-timeline-now::before { background: var(--ink); box-shadow: 0 0 0 4px var(--paper), 0 0 0 6px var(--ink); }
.maker-said { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 14px; }
.maker-said li { padding: 18px 22px; border-radius: 16px; background: var(--paper); border: 1px solid var(--line-light); border-left: 6px solid var(--brand); }
.maker-said blockquote { margin: 0; }
.maker-said blockquote p { margin: 0; font-weight: 700; font-size: 1.08rem; line-height: 1.5; }
.maker-said-who { margin: 8px 0 0; color: var(--muted-light); font-size: 0.95rem; }
.maker-not { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 640px) { .maker-not { grid-template-columns: 1fr 1fr; } }
.maker-not li { padding: 16px 18px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line-light); line-height: 1.5; }
.maker-not strong { display: block; margin-bottom: 4px; }
.maker-costs { width: 100%; max-width: 520px; border-collapse: collapse; margin: 14px 0 0; font-size: 1.05rem; }
.maker-costs td { padding: 10px 0; border-bottom: 1px solid var(--line-light); }
.maker-costs td:last-child { text-align: right; font-weight: 800; white-space: nowrap; padding-left: 16px; }
.maker-beyond { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 640px) { .maker-beyond { grid-template-columns: 1fr 1fr; } }
.maker-beyond li { display: grid; align-content: start; gap: 8px; padding: 22px 22px 20px; border-radius: 18px; background: var(--ink); color: var(--paper); }
.maker-beyond h3 { margin: 0; font-size: 1.15rem; line-height: 1.25; }
.maker-beyond p { margin: 0; color: var(--muted-dark); line-height: 1.5; }
.maker-beyond .btn-ghost { justify-self: start; margin-top: 6px; color: var(--paper); border-color: var(--paper); }
.maker-write { padding: 24px 26px 20px; border-radius: 18px; background: color-mix(in srgb, var(--brand) 9%, var(--paper)); border: 1px solid var(--line-light); }
.maker-write p:last-child { margin-bottom: 0; }

/* The footer: the "This site" column with the public profiles, and the base that says what the site is and what it keeps. */
.footer-col-site .footer-follow { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #2a332c; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.footer-follow-head { font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #8f9a91; margin-right: 2px; }
.footer-col-site .footer-follow a { padding: 2px 0; }
.site-footer .footer-base { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 8px; padding-top: 22px; border-top: 1px solid #2a332c; }
.footer-base-line { font-size: 0.98rem; line-height: 1.55; color: #e6ebe6; max-width: 70ch; }
.footer-base-line strong { color: var(--brand); }
.footer-base-line a, .footer-base-note a { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgb(255 255 255 / 0.4); }
.footer-base-line a:hover, .footer-base-note a:hover { color: var(--brand); text-decoration-color: currentColor; }
.footer-base-note { font-size: 0.88rem; line-height: 1.55; color: #b9c2bb; max-width: 78ch; }
.site-footer .footer-base-meta { margin-top: 6px; justify-content: flex-start; gap: 8px 22px; }
.footer-email { color: #e6ebe6 !important; }
.footer-top { margin-left: auto; color: #e6ebe6 !important; font-weight: 700; }
.footer-top:hover { color: var(--brand) !important; }
@media (max-width: 560px) { .footer-top { margin-left: 0; } }

/* The press page's contents: numbered chips to each section. */
.press-contents { margin: 18px 0 30px; padding: 16px 18px 14px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line-light); }
.press-contents-head { margin: 0 0 10px; font-size: 0.78rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-light); }
.press-contents ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: pc; }
.press-contents li { counter-increment: pc; }
.press-contents a { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 8px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-light); color: var(--ink); font-weight: 700; font-size: 0.92rem; text-decoration: none; line-height: 1.2; }
.press-contents a::before { content: counter(pc); display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--brand); color: var(--ink); font-size: 0.72rem; font-weight: 900; }
.press-contents a:hover { border-color: var(--brand); }
.press-section { scroll-margin-top: 80px; }

/* Everything wrong with Greens for Palestine: the charge sheet, on the Q&A page's frame. */
.wrong-fair { margin: 24px auto 0; max-width: 72ch; }
.wrong-section { margin: -6px 0 12px; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-light); }
.wrong-quote { margin: 0 0 16px; padding: 14px 18px; border-left: 5px solid var(--line-light); background: var(--paper-2); border-radius: 0 12px 12px 0; }
.wrong-quote p { margin: 0 0 6px; font-style: italic; line-height: 1.5; }
.wrong-quote .answered-source { margin: 0; font-size: 0.85rem; }
.wrong-more { margin: 10px 0 0; font-size: 0.95rem; font-weight: 700; }
.wrong-closing { margin-top: 44px; }

/* "The Greens for Palestine motion is racist because" (views/public/because.jsx): a dark band on zionismisracism.co.uk,
   the one-state verdict first, then every reason numbered. The one-state card also stands alone on the main site. */
.because { background: radial-gradient(110% 80% at 100% 0%, #3a1512 0%, var(--ink) 55%), var(--ink); color: var(--paper); padding: 64px 0 72px; margin: 40px 0 0; }
.because-kicker { margin: 0 0 6px; color: var(--muted-dark); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.12em; text-transform: uppercase; }
.because-title { margin: 0 0 28px; font-weight: 900; font-stretch: 75%; text-transform: uppercase; line-height: 0.92; letter-spacing: -0.01em; font-size: clamp(2.6rem, 9vw, 5.2rem); }
.because-title-a { color: #ff5a4e; }
.because-title-b { color: var(--paper); }
.because-list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.because-item { position: relative; margin: 0; padding: 22px 22px 22px 22px; border-radius: 16px; background: rgb(255 255 255 / 0.045); border: 1px solid rgb(255 255 255 / 0.1); transition: border-color 0.15s ease, background 0.15s ease; }
.because-item:hover { border-color: rgb(255 90 78 / 0.55); background: rgb(255 90 78 / 0.06); }
.because-n { display: block; margin: 0 0 8px; font-weight: 900; font-stretch: 75%; font-size: 2.4rem; line-height: 1; color: #ff5a4e; font-variant-numeric: tabular-nums; }
.because-head { margin: 0 0 8px; font-weight: 800; font-size: 1.15rem; line-height: 1.25; color: var(--paper); }
.because-text { margin: 0; color: rgb(255 255 255 / 0.78); line-height: 1.55; font-size: 0.98rem; }
.because-foot { margin: 34px 0 0; display: flex; flex-wrap: wrap; gap: 12px; }

.one-state { margin: 0; padding: 26px 28px; border-radius: 18px; background: var(--paper); color: var(--ink); border: 1px solid var(--line-light); border-left: 8px solid #d93025; box-shadow: 0 18px 44px rgb(15 18 16 / 0.08); max-width: 78ch; }
.one-state-kicker { margin: 0 0 6px; color: #b3261e; font-weight: 800; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; }
.one-state-head { margin: 0 0 14px; font-weight: 900; font-stretch: 78%; font-size: clamp(1.6rem, 4.6vw, 2.4rem); line-height: 1.02; text-transform: uppercase; letter-spacing: -0.005em; }
.one-state-line { margin: 0 0 10px; line-height: 1.6; font-size: 1.05rem; }
.one-state-verdict { margin: 16px 0 0; padding: 14px 16px; border-radius: 12px; background: #fdecea; color: #5c1410; font-weight: 800; font-size: 1.1rem; line-height: 1.45; }
.one-state-more { margin: 14px 0 0; font-weight: 700; }
.one-state-dark { background: rgb(255 255 255 / 0.06); color: var(--paper); border: 1px solid rgb(255 90 78 / 0.35); border-left: 8px solid #ff5a4e; box-shadow: none; max-width: none; }
.one-state-dark .one-state-kicker { color: #ff8a80; }
.one-state-dark .one-state-line { color: rgb(255 255 255 / 0.86); }
.one-state-dark .one-state-verdict { background: #ff5a4e; color: #1a0605; }
.one-state-dark .one-state-more a { color: var(--paper); }
@media (max-width: 640px) {
  .because { padding: 44px 0 52px; margin-top: 28px; }
  .because-item { padding: 18px; }
  .one-state { padding: 20px 18px; border-left-width: 6px; }
  .one-state-line { font-size: 1rem; }
  .because-foot .btn { flex: 1 1 100%; text-align: center; }
}
.page .one-state, .wrong-page .one-state { margin: 24px 0 30px; }
.home-one-state { padding: 40px 0 8px; }
.home-one-state .one-state { margin: 0 auto; }
.faq-one-state { margin: 28px 0 8px; }
/* The home page, tightened: the party's reply and each argument fold under their headings. */
.reply-more { margin: 18px 0 0; }
.reply-more-summary { cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: 999px; border: 2px solid var(--line-light); font-weight: 800; list-style: none; }
.reply-more-summary::-webkit-details-marker { display: none; }
.reply-more-summary::after { content: '+'; font-weight: 900; }
.reply-more[open] > .reply-more-summary::after { content: '−'; }
.reply-more[open] > .reply-list { margin-top: 18px; }
.arg-summary { cursor: pointer; list-style: none; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.arg-summary::-webkit-details-marker { display: none; }
.arg-summary::after { content: '+'; font-weight: 900; font-size: 1.3rem; line-height: 1; color: var(--brand-on-light); }
.arg-fold[open] > .arg-summary::after { content: '−'; }
.arg-fold[open] > .arg-summary { margin-bottom: 8px; }
.faq-all { margin: 18px 0 0; }