/* ==========================================================================
   New Liberal Party of British Columbia — site stylesheet

   Mobile-first. One set of tokens (colour, type, spacing), a handful of
   shared patterns (container, section bands, eyebrow, buttons, numbered
   rows, form controls) and page components built from them.

   Breakpoints (em, so they scale with the user's font size):
     48em  768px  tablet — two-column forms, header CTA appears
     64em 1024px  desktop — side-by-side sections, hero text in a column
     75em 1200px  wide — inline navigation replaces the Menu button
   ========================================================================== */

/* ==========================================================================
   Fonts (self-hosted, latin subset, variable weight)
   ========================================================================== */

@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/source-serif-4-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Public Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/public-sans-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Italic face: only fetched on pages that set italic text (Herb's message). */
@font-face {
  font-family: "Public Sans";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("../fonts/public-sans-italic-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

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

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1, h2, h3, h4, h5, h6,
p,
figure,
blockquote,
dl, dd,
fieldset {
  margin: 0;
}

fieldset {
  padding: 0;
  border: 0;
  min-width: 0;
}

legend {
  padding: 0;
}

/* :where() keeps this reset at zero specificity so components can override it. */
:where(ul[role="list"], ol[role="list"]) {
  list-style: none;
  margin: 0;
  padding: 0;
}

html:focus-within {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1 0 auto;
}

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

img {
  height: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Tokens
   ========================================================================== */

:root {
  /* Brand + surfaces */
  --navy-800: #17252e;   /* hero, principles, get-involved bands */
  --navy-900: #0f1b24;   /* footer */
  --red-600: #d21529;    /* primary buttons, rules, numerals on light */
  --red-700: #b01124;    /* primary button hover */
  --red-on-dark: #f2515f;/* red text/rules on navy (4.5:1) — never #d21529 as text on navy */
  --red-50: #fbd5d9;     /* focus halo on inputs */
  --rose-700: #b23a52;   /* eyebrow text on light grounds */
  --rose-300: #e8b4be;   /* eyebrow text on navy */
  --rose-200: #f0c9d0;   /* hairlines in the issues index */
  --paper: #f5f4f0;      /* warm light band */
  --white: #ffffff;

  /* Text */
  --ink-900: #182b3a;    /* headings, labels */
  --ink-700: #3d4a54;    /* body on light */
  --ink-500: #5c6870;    /* muted on light (5.4:1 on paper) */
  --on-dark: #c5cfd6;    /* body on navy */
  --on-dark-muted: #9aa8b3; /* legal text on deep navy */
  --error: #b91c1c;
  --success: #15803d;

  /* Lines */
  --line: #e3e2de;
  --line-strong: #c4c7cb;
  --line-on-dark: rgba(255, 255, 255, 0.2);

  /* Type */
  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-body: "Public Sans", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --text-h1: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);         /* 40 → 72px */
  --text-h2: clamp(1.875rem, 1.45rem + 1.9vw, 2.75rem);   /* 30 → 44px */
  --text-h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.75rem);     /* 24 → 28px */
  --text-lede: clamp(1.1875rem, 1.05rem + 0.6vw, 1.375rem); /* 19 → 22px */
  --text-body-lg: 1.125rem;
  --text-body: 1.0625rem;
  --text-small: 0.9375rem;
  --text-eyebrow: 0.8125rem;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  --section-pad: 4rem;
  --gutter: 1.25rem;
  --container-max: 80rem;   /* 1280px, includes the gutters */
  --header-height: 4rem;

  --radius: 4px;
  --radius-lg: 8px;
}

@media (min-width: 48em) {
  :root {
    --text-body-lg: 1.25rem;
    --text-body: 1.125rem;
    --section-pad: 5rem;
    --gutter: 2rem;
    --header-height: 4.5rem;
  }
}

@media (min-width: 64em) {
  :root {
    --section-pad: 7rem;
    --gutter: 3rem;
    --header-height: 5rem;
  }
}

@media (min-width: 75em) {
  :root {
    --gutter: 5rem;
  }
}

/* ==========================================================================
   Base
   ========================================================================== */

html {
  scroll-padding-top: calc(var(--header-height) + 1rem);
}

body {
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--ink-700);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: var(--ink-900);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-h1);
  line-height: 1.06;
}

h2 {
  font-size: var(--text-h2);
}

/* Page titles on the inner pages: larger than a section heading, calmer
   than the homepage hero. */
.page-title {
  font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); /* 36 → 56px */
}

h3 {
  font-size: var(--text-h3);
  line-height: 1.2;
}

p {
  text-wrap: pretty;
}

a {
  color: inherit;
}

strong {
  font-weight: 600;
}

:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
}

/* Rings must stay visible on every ground. */
.on-dark :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--white);
}

.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 100;
  background-color: var(--white);
  color: var(--ink-900);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius);
  text-decoration: none;
  font-weight: 600;
}

.skip-link:focus {
  top: var(--space-2);
}

/* Components set their own display, which would otherwise beat [hidden]. */
[hidden] {
  display: none !important;
}

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

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

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: var(--section-pad);
}

.section--paper {
  background-color: var(--paper);
}

.section--white {
  background-color: var(--white);
}

.section--navy {
  background-color: var(--navy-800);
}

/* Text colours flip on dark bands. */
.on-dark {
  color: var(--on-dark);
}

.on-dark h1,
.on-dark h2,
.on-dark h3 {
  color: var(--white);
}

/* Vertical rhythm inside a section: eyebrow → heading → text → actions. */
.stack > * + * {
  margin-top: var(--space-5);
}

.stack > .eyebrow + * {
  margin-top: var(--space-4);
}

.stack > * + .actions {
  margin-top: var(--space-8);
}

.measure {
  max-width: 38rem;
}

.text-center {
  text-align: center;
}

.text-center .measure {
  margin-inline: auto;
}

.text-center .eyebrow,
.text-center .actions {
  justify-content: center;
}

/* Two-column section layouts: stacked by default, side by side from 64em. */
.split {
  display: grid;
  gap: var(--space-10);
  align-items: center;
}

.split__media {
  order: 1;
}

.split__text {
  order: 0;
}

@media (min-width: 64em) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-16);
  }

  .split--media-first .split__media {
    order: 0;
  }

  .split--media-first .split__text {
    order: 1;
  }

  /* 5/7 split for a portrait or intro beside a wider column. */
  .split--narrow-start {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  }
}

/* Section opener: heading on the left, lede/note on the right at desktop. */
.section-head {
  display: grid;
  gap: var(--space-4);
}

@media (min-width: 64em) {
  .section-head {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-16);
    align-items: end;
  }

  .section-head > p {
    margin-top: 0;
  }

  /* A heading with no note beside it gets the full width, so its forced
     line breaks (.br-wide) are the only breaks. */
  .section-head--solo {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ==========================================================================
   Typography helpers
   ========================================================================== */

.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--rose-700);
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 3px;
  border-radius: 2px;
  background-color: var(--red-600);
}

.on-dark .eyebrow {
  color: var(--rose-300);
}

.on-dark .eyebrow::before {
  background-color: var(--red-on-dark);
}

.lede {
  font-size: var(--text-lede);
  line-height: 1.45;
  font-weight: 500;
  color: var(--ink-900);
}

.on-dark .lede {
  color: var(--white);
}

/* Forced line break, wide screens only; below 64em the line has no width to spare. */
.br-wide {
  display: none;
}

@media (min-width: 64em) {
  .br-wide {
    display: inline;
  }
}

.body-lg {
  font-size: var(--text-body-lg);
}

.small {
  font-size: var(--text-small);
  line-height: 1.55;
}

.muted {
  color: var(--ink-500);
}

/* Emphasised closing sentence in a prose block. */
.statement {
  font-family: var(--font-heading);
  font-size: clamp(1.3125rem, 1.15rem + 0.7vw, 1.5rem);
  line-height: 1.4;
  font-weight: 600;
  color: var(--ink-900);
  padding-left: var(--space-5);
  border-left: 3px solid var(--red-600);
}

.photo {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  background-color: var(--line);
}

@media (min-width: 48em) and (max-width: 63.999em) {
  .photo {
    aspect-ratio: 16 / 9;
  }
}

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

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem; /* 52px */
  padding: 0.75em 1.75em;
  border: 1.5px solid transparent;
  border-radius: var(--radius);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.button--primary {
  background-color: var(--red-600);
  border-color: var(--red-600);
  color: var(--white);
}

.button--primary:hover {
  background-color: var(--red-700);
  border-color: var(--red-700);
}

.button--outline {
  background-color: transparent;
  border-color: var(--ink-900);
  color: var(--ink-900);
}

.button--outline:hover {
  background-color: rgba(24, 43, 58, 0.08);
}

.on-dark .button--outline {
  border-color: rgba(255, 255, 255, 0.7);
  color: var(--white);
}

.on-dark .button--outline:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.button--sm {
  min-height: 2.75rem; /* 44px */
  padding: 0.6em 1.25em;
  font-size: var(--text-small);
}

.button--block {
  display: flex;
  width: 100%;
  min-height: 3.25rem;
  font-size: var(--text-body);
}

.button:disabled,
.button:disabled:hover {
  background-color: var(--red-600);
  border-color: var(--red-600);
  opacity: 0.6;
  cursor: not-allowed;
}

.actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@media (min-width: 30em) {
  .actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-4);
  }
}

/* ==========================================================================
   Site header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
}

.site-header__row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: var(--header-height);
}

.site-logo {
  display: block;
  flex: none;
  padding-block: var(--space-1);
  margin-right: auto; /* pushes the menu button (and tablet CTA) right */
}

.site-logo img {
  height: 2.25rem; /* 36px */
  width: auto;
}

/* Header CTA: hidden on phones (it lives inside the menu there). */
.site-header__cta {
  display: none;
}

/* Menu button */
.nav-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0 0.875rem;
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--ink-900);
  font-size: var(--text-small);
  font-weight: 600;
  cursor: pointer;
}

.nav-toggle svg {
  width: 1.25rem;
  height: 1.25rem;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__open,
.nav-toggle[aria-expanded="false"] .nav-toggle__close {
  display: none;
}

/* Collapsed navigation: a panel that drops down from the sticky header. */
.site-nav {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: calc(100vh - var(--header-height));
  max-height: calc(100dvh - var(--header-height));
  overflow-y: auto;
  padding: var(--space-2) var(--gutter) var(--space-6);
  background-color: var(--white);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(15, 27, 36, 0.18);
}

.site-nav.is-open {
  display: block;
}

.site-nav__list {
  display: flex;
  flex-direction: column;
}

.site-nav__list a {
  display: flex;
  align-items: center;
  min-height: 3.5rem;
  border-top: 1px solid var(--line);
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
}

.site-nav__list a[aria-current="page"] {
  color: var(--red-600);
}

.site-nav__list a:hover {
  color: var(--red-600);
}

.site-nav__cta {
  margin-top: var(--space-5);
  width: 100%;
}

@media (min-width: 48em) {
  .site-logo img {
    height: 2.5rem; /* 40px */
  }

  .site-header__cta {
    display: inline-flex;
  }

  .site-nav__cta {
    display: none;
  }
}

/* Wide: inline navigation, no menu button. */
@media (min-width: 75em) {
  .site-header__row {
    gap: var(--space-8);
  }

  .site-logo {
    margin-right: 0;
  }

  .site-logo img {
    height: 2.75rem; /* 44px */
  }

  .site-header__cta {
    margin-left: 0;
  }

  .nav-toggle {
    display: none;
  }

  .site-nav {
    display: block;
    position: static;
    max-height: none;
    overflow: visible;
    padding: 0;
    margin-left: auto;
    background: none;
    border: 0;
    box-shadow: none;
  }


  .site-nav__list {
    flex-direction: row;
    align-items: center;
    gap: var(--space-6);
  }

  .site-nav__list a {
    min-height: 2.75rem;
    padding: var(--space-3) var(--space-1);
    border-top: 0;
    border-bottom: 2px solid transparent;
    font-size: var(--text-small);
    color: var(--ink-700);
  }

  .site-nav__list a[aria-current="page"] {
    color: var(--ink-900);
    border-bottom-color: var(--red-600);
  }
}

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

/* A full-width photograph under a navy scrim. The scrim is heaviest behind
   the text and clears toward the right so the ridge stays visible. */
.hero {
  position: relative;
  isolation: isolate;
  background-color: var(--navy-800);
  padding-block: var(--space-12) var(--space-10);
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}

.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Holds the whole ridge line in frame at every width. Only the vertical
     value bites on wide viewports (sky above the ridge, trees running off the
     bottom edge) and only the horizontal one on narrow ones, where it favours
     the stand of trees under the crest over the flat mist to its left. */
  object-position: 62% 16%;
  /* Below 64em the text covers the whole photo, so it is dimmed at the source
     and the scrim over it stays light. A scrim heavy enough on its own would
     flatten the ridge to plain navy; dimming keeps the photo's own contrast. */
  filter: brightness(0.38);
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(
    to bottom,
    rgba(23, 37, 46, 0.68),
    rgba(23, 37, 46, 0.62) 45%,
    rgba(23, 37, 46, 0.66)
  );
}

.hero__inner {
  max-width: 38rem;
}

.hero__inner > * + * {
  margin-top: var(--space-6);
}

.hero__inner > .eyebrow + h1 {
  margin-top: var(--space-4);
}

/* The one place on the site where "Liberal" is set in red. */
.hero__accent {
  color: var(--red-on-dark);
}

.hero__body {
  padding-top: var(--space-6);
  border-top: 1px solid var(--line-on-dark);
}

.hero__inner > .actions {
  margin-top: var(--space-8);
}

@media (min-width: 48em) {
  .hero {
    padding-block: var(--space-16) var(--space-12);
  }
}

@media (min-width: 64em) {
  .hero {
    padding-block: 6rem;
  }

  /* The text now sits in a left column, so the photo carries its own tone and
     the scrim does the work: heavy over the text (which ends at roughly 53-64%
     of the viewport, hence the hold to 62%) and open on the right. */
  .hero__photo {
    filter: none;
  }

  .hero::before {
    background: linear-gradient(
      to right,
      rgba(23, 37, 46, 0.95),
      rgba(23, 37, 46, 0.9) 45%,
      rgba(23, 37, 46, 0.86) 62%,
      rgba(23, 37, 46, 0.4) 84%,
      rgba(23, 37, 46, 0.28)
    );
  }
}

/* ==========================================================================
   Numbered rows: principles (on navy) and issues (on light)
   ========================================================================== */

.principles-grid {
  margin-top: var(--space-8);
  border-bottom: 1px solid var(--line-on-dark);
}

.principle {
  display: flex;
  align-items: baseline;
  gap: var(--space-5);
  padding-block: 1.125rem;
  border-top: 1px solid var(--line-on-dark);
}

.principle__number {
  flex: none;
  width: 2.75rem;
  font-family: var(--font-heading);
  font-size: 1.625rem;
  line-height: 1;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  color: var(--red-on-dark);
}

.principle__label {
  font-family: var(--font-heading);
  font-size: 1.3125rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--white);
}

@media (min-width: 48em) {
  .principles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6) var(--space-6);
    margin-top: var(--space-12);
    border-bottom: 0;
  }

  .principle {
    flex-direction: column;
    align-items: stretch;
    justify-content: space-between;
    gap: var(--space-8);
    min-height: 10.75rem;
    padding-block: var(--space-6) 0;
  }

  .principle__number {
    width: auto;
    font-size: 2.75rem;
  }

  .principle__label {
    font-size: 1.5rem;
  }
}

@media (min-width: 64em) {
  .principles-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-8);
    margin-top: var(--space-16);
  }
}

.issues-grid {
  margin-top: var(--space-8);
  border-bottom: 1px solid var(--rose-200);
}

.issue {
  display: flex;
  align-items: baseline;
  gap: var(--space-4);
  padding-block: var(--space-4);
  border-top: 1px solid var(--rose-200);
}

.issue__number {
  flex: none;
  width: 1.75rem;
  font-size: 1rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--red-600);
}

.issue__label {
  font-size: var(--text-body);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
}

@media (min-width: 48em) {
  .issues-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-6);
    margin-top: var(--space-10);
  }

  .issue {
    padding-block: var(--space-5);
  }
}

@media (min-width: 64em) {
  .issues-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    column-gap: var(--space-8);
    margin-top: var(--space-12);
  }
}

/* ==========================================================================
   Leader (Herb Dhaliwal)
   ========================================================================== */

.leader__media {
  max-width: 15rem;
}

.leader__photo {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--radius-lg);
  background-color: var(--navy-900);
}

.leader__message {
  font-style: italic;
}

.signature {
  padding-left: var(--space-4);
  border-left: 3px solid var(--red-600);
}

.signature__name {
  display: block;
  font-family: var(--font-heading);
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 600;
  color: var(--ink-900);
}

.signature__title {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-500);
}

@media (min-width: 48em) {
  .leader {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-10);
    align-items: center;
  }

  .leader__media {
    max-width: none;
  }
}

@media (min-width: 64em) {
  .leader {
    gap: var(--space-16);
  }
}

/* ==========================================================================
   Get involved: intro + supporter form card
   ========================================================================== */

.get-involved {
  display: grid;
  gap: var(--space-8);
}

/* Opener: eyebrow + heading, then paragraph + buttons. Side by side at
   desktop so the card below can run the full container width. */
.get-involved__intro {
  display: grid;
  gap: var(--space-5);
}

@media (min-width: 64em) {
  .get-involved {
    gap: var(--space-10);
  }

  .get-involved__intro {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: var(--space-16);
    align-items: start;
  }

  /* Line the paragraph up with the heading: one eyebrow line plus the
     stack gap between eyebrow and heading. */
  .get-involved__aside {
    padding-top: calc(var(--text-eyebrow) * 1.3 + var(--space-4));
  }
}

.signup-card {
  padding: var(--space-6) var(--space-5);
  background-color: var(--white);
  color: var(--ink-700);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.28);
}

/* The card is a light island inside a dark band. */
.signup-card h2,
.signup-card h3 {
  color: var(--ink-900);
}

.signup-card .eyebrow {
  color: var(--rose-700);
}

.signup-card .eyebrow::before {
  background-color: var(--red-600);
}

.signup-card :focus-visible {
  outline-color: var(--ink-900);
}

.signup-card__title {
  margin-top: var(--space-2);
  font-size: var(--text-h3); /* an h2 on get-involved.html, but never page-title sized */
  line-height: 1.2;
}

.signup-card form {
  margin-top: var(--space-2);
}

@media (min-width: 48em) {
  .signup-card {
    padding: var(--space-8);
  }
}

@media (min-width: 64em) {
  .signup-card {
    padding: var(--space-10);
  }
}

/* ==========================================================================
   Forms

   Vertical scale: 48px inputs, 16px between fields, 6px label gap, survey
   questions as ruled 16px rows. Field order never changes; rows only decide
   how many adjacent fields share a line at a given width.
   ========================================================================== */

.form-field {
  margin-top: var(--space-4);
}

.form-row {
  display: grid;
  gap: 0 var(--space-5);
}

/* Tablet: adjacent pairs share a row (the four name-row fields make a 2 x 2);
   the "wide" field in a three-field row (Address) keeps a row to itself. */
@media (min-width: 48em) {
  .form-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .form-row--3 .form-field--wide {
    grid-column: 1 / -1;
  }
}

/* Desktop: the card is full width, so the four name-row fields share one row
   and the three contact fields the next. Both rows use the same four tracks,
   with the wide field spanning the last two, so their columns line up. */
@media (min-width: 64em) {
  /* Tracks sized so every label stays on one line at 64em; a wrapped label
     would push its input below its neighbours. */
  .form-row--name,
  .form-row--3 {
    grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) repeat(2, minmax(0, 3fr));
  }

  .form-row--3 .form-field--wide {
    grid-column: span 2;
  }
}

.form-field label,
.form-field--choice legend {
  display: block;
  margin-bottom: 0.375rem;
  font-size: var(--text-small);
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-900);
}

.form-optional {
  font-weight: 400;
  color: var(--ink-500);
}

/* :where() keeps this rule's specificity below the hover, focus and invalid
   rules further down, so their border colours apply to text inputs too. */
.form-field input:where(:not([type="checkbox"]):not([type="radio"])),
.form-field select,
.form-field textarea {
  width: 100%;
  min-height: 3rem; /* 48px */
  padding: 0.5em 0.875em;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--white);
  color: var(--ink-900);
  font-size: var(--text-body);
}

/* Browsers ignore line-height on a native select, so it would sit 2px shorter
   than the inputs beside it: give it their height (1.6 line + 1em padding +
   borders). */
.form-field select {
  min-height: max(3rem, calc(2.6em + 3px));
  padding-right: 2.5em;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%23182b3a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1 1.5l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.875em center;
  background-size: 0.75em auto;
}

/* An unanswered select shows its "Select…" prompt in muted ink, like an empty
   field; the options in the open list stay full strength. */
.form-field select:has(option[value=""]:checked) {
  color: var(--ink-500);
}

.form-field select option {
  color: var(--ink-900);
}

/* Forced colours replace the control's background, which could hide the drawn
   chevron: hand the arrow back to the browser. */
@media (forced-colors: active) {
  .form-field select {
    -webkit-appearance: auto;
    appearance: auto;
    background-image: none;
  }
}

/* Phone mask: the blanks of (___) ___-____ are drawn over the input by an
   aria-hidden element, so they are never part of the field's value. It repeats
   the input's border, padding and type size so the two line up (a real border,
   not extra padding: browsers snap border widths to device pixels); its hidden
   span is a copy of what has been typed, which pushes the blanks into place. */
.phone-mask {
  position: relative;
}

.phone-mask input {
  display: block; /* no inline descender gap: the overlay matches the input's box */
}

.phone-mask__blanks {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  padding-inline: 0.875em;
  border: 1.5px solid transparent;
  font-size: var(--text-body);
  color: var(--ink-500);
  white-space: pre;
  pointer-events: none;
}

.phone-mask__blanks span {
  visibility: hidden;
}

.form-field input:hover,
.form-field select:hover,
.form-field textarea:hover {
  border-color: var(--ink-500);
}

.form-field input:focus-visible,
.form-field select:focus-visible,
.form-field textarea:focus-visible {
  outline: none;
  border-color: var(--red-600);
  box-shadow: 0 0 0 3px var(--red-50);
}

.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] {
  border-color: var(--error);
}

.form-field__error {
  display: block;
  margin-top: var(--space-1);
  font-size: var(--text-small);
  color: var(--error);
}

.form-field__error:empty {
  display: none;
}

/* Survey questions: a block of ruled rows under the contact fields. */
.form-survey {
  margin-top: var(--space-6);
  border-top: 1px solid var(--line);
}

.form-field--choice {
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--line);
}

/* The legend is floated so it takes part in normal flow (a fieldset's rendered
   legend otherwise sits outside its content box, which put the row's padding
   between the question and its answers instead of above the question). */
.form-field--choice legend {
  float: left;
  width: 100%;
  margin-bottom: var(--space-3);
  font-size: 1rem;
}

.form-field--choice .choice-group,
.form-field--choice .choice-clear,
.form-field--choice .form-field__error {
  clear: both;
}

.form-field--choice::after {
  content: "";
  display: block;
  clear: both;
}

/* Answers: a 2-up grid on phones (reads like a radio list, no ragged 3 + 1
   wrap); natural-width chips in a row once four options fit (~544px). */
.choice-group {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-2);
}

@media (min-width: 36em) {
  .choice-group {
    display: flex;
    flex-wrap: wrap;
  }
}

/* Desktop: question on the left, answers on the right, one row each. The
   legend's top padding centres its first line on the 44px answer chips. */
@media (min-width: 64em) {
  .form-field--choice legend {
    width: 38%;
    margin-bottom: 0;
    padding-top: 0.6875rem;
    padding-right: var(--space-6);
  }

  .form-field--choice .choice-group {
    clear: none;
    float: left;
    width: 62%;
  }

  .form-field--choice .choice-clear,
  .form-field--choice .form-field__error {
    margin-left: 38%;
  }

  .form-field--choice .form-field__error {
    padding-top: var(--space-2);
  }
}

/* Each choice is a label wrapping a real radio, styled as a chip. */
.choice-group label {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  min-height: 2.75rem; /* 44px tap target */
  padding: 0.5rem 0.875rem;
  border: 1.5px solid var(--line-strong);
  border-radius: var(--radius);
  background-color: var(--white);
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--ink-900);
  cursor: pointer;
}

.choice-group label:hover {
  border-color: var(--ink-500);
}

.choice-group label:has(input:checked) {
  border-color: var(--navy-800);
  background-color: var(--navy-800);
  color: var(--white);
}

.choice-group label:has(input:focus-visible) {
  outline: 2px solid var(--ink-900);
  outline-offset: 3px;
}

.choice-group input:focus-visible {
  outline: none;
}

.choice-group input {
  width: 1.125rem;
  height: 1.125rem;
  margin: 0;
  flex: none;
  accent-color: var(--red-600);
}

.choice-group label:has(input:checked) input {
  accent-color: var(--white);
}

/* An unanswered required question, after a submit. */
.form-field--choice[aria-invalid="true"] .choice-group label:not(:has(input:checked)) {
  border-color: var(--error);
}

/* "Clear answer" under the optional question (added by js/main.js while an
   answer is selected): a plain text button, so it cannot pass for an answer. */
.choice-clear {
  display: block;
  padding: var(--space-2) 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--text-small);
  color: var(--ink-500);
  text-decoration: underline;
  cursor: pointer;
}

.choice-clear:hover {
  color: var(--ink-900);
}

.choice-clear[hidden] {
  display: none;
}

.form-field--checkbox {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  margin-top: var(--space-3);
}

.form-field--checkbox input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.8125rem 0 0; /* sits on the label's first line */
  accent-color: var(--red-600);
}

/* The label is the click target: padding keeps it 44px tall even when the
   sentence fits on one line. */
.form-field--checkbox label {
  margin-bottom: 0;
  padding-block: 0.6875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink-700);
}

/* Off-screen honeypot: real visitors never see it. */
.form-field--honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Verification, submit and status. Stacked on phones; from desktop the
   Turnstile widget and the submit button share one row. The survey's last
   rule already closes the questions, so this block adds none of its own. */
.form-footer {
  margin-top: var(--space-3);
}

/* data-size="flexible" makes the widget fill its container (min 300px). */
.cf-turnstile-wrapper .cf-turnstile {
  min-height: 65px;
}

.signup-card .button--block {
  margin-top: var(--space-4);
}

@media (min-width: 64em) {
  /* Top-aligned so the button stays level with the widget when an error
     message appears under it. */
  .form-footer {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: var(--space-4) var(--space-6);
  }

  .form-footer .cf-turnstile-wrapper {
    flex: 0 0 300px;
  }

  .signup-card .form-footer .button--block {
    flex: 1 1 16rem;
    width: auto;
    min-height: 65px; /* the widget's height */
    margin-top: 0;
  }

  .form-footer .form-status {
    flex-basis: 100%;
    margin-top: 0;
  }
}

.form-status {
  margin-top: var(--space-4);
  font-size: var(--text-small);
  font-weight: 600;
  color: var(--ink-700);
}

.form-status:empty {
  display: none;
}

.form-status--success {
  color: var(--success);
}

.form-status--error {
  color: var(--error);
}

/* Narrow phones: the Turnstile widget needs 300px. Trim the card padding,
   then let the card bleed to the screen edges. */
@media (max-width: 23.4375em) {
  .signup-card {
    padding-inline: var(--space-4);
  }
}

@media (max-width: 22.5em) {
  .signup-card {
    margin-inline: calc(-1 * var(--gutter));
    border-radius: 0;
  }
}

@media (max-width: 20.625em) {
  .signup-card {
    padding-inline: 0.625rem;
  }
}

/* ==========================================================================
   Simple pages (contact, 404)
   ========================================================================== */

.page-intro {
  padding-block: var(--section-pad);
}

.contact-email,
.contact-phone {
  display: inline-block;
  padding-block: 0.625rem; /* 44px tap target */
  font-family: var(--font-heading);
  /* The column this sits in is .container.measure, whose 38rem cap includes
     the gutters — so it narrows to 448px once --gutter reaches 5rem. Capped
     so a 30-character address still sits on one line there. */
  font-size: clamp(1.125rem, 0.9rem + 1.2vw, 1.625rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink-900);
  overflow-wrap: anywhere;
}

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

.site-footer {
  padding-block: var(--space-12) var(--space-8);
  background-color: var(--navy-900);
  color: var(--on-dark);
}

.site-footer__top {
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.site-footer__brand {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  max-width: 24rem;
}

.site-footer__icon {
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
}

.site-footer h2 {
  font-size: 1.375rem;
  line-height: 1.2;
  color: var(--white);
}

.site-footer__contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.site-footer__email,
.site-footer__phone {
  display: inline-block;
  margin-top: var(--space-3);
  padding-block: 0.6rem;
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

/* The display serif's parentheses and hyphen dip through the underline, and
   skip-ink then chops it into pieces. Draw it straight through instead. */
.contact-phone,
.site-footer__phone {
  text-decoration-skip-ink: none;
}

.site-footer__email:hover,
.site-footer__phone:hover {
  color: var(--white);
}

.site-footer__social {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-4);
}

.site-footer__social-label {
  font-size: var(--text-eyebrow);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--white);
}

.site-footer__social-links {
  display: flex;
  gap: var(--space-4);
}

.site-footer__social-links a {
  display: inline-block;
  padding-block: 0.6rem;
  color: var(--on-dark);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-footer__nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-4);
}

.site-footer__nav a {
  display: inline-block;
  padding-block: 0.65rem; /* 44px tap target */
  font-size: var(--text-small);
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
}

.site-footer__nav a:hover,
.site-footer__nav a:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.site-footer__legal {
  margin-top: var(--space-10);
  padding-top: var(--space-6);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--on-dark-muted);
  max-width: 60rem;
}

.site-footer__legal--solo {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media (min-width: 48em) {
  .site-footer {
    padding-block: var(--space-16) var(--space-10);
  }

  .site-footer__top {
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-12);
  }

  .site-footer__nav {
    gap: var(--space-1) var(--space-8);
  }
}

@media (min-width: 64em) {
  .site-footer__nav {
    grid-template-columns: repeat(3, auto);
    gap: var(--space-1) var(--space-12);
  }
}