/* ==========================================================================
   Coalition for Community Elevation — site stylesheet
   Design direction: civic poster modernism. Screen-printed campaign-poster
   energy (bold display type, hard rules, generous scale) carrying the logo's
   sunburst, raised hands and green/gold/red band motifs.
   Palette and contrast rules come from the client build brief: gold (#F2B01E)
   is an accent only — never body text on the off-white paper. Where a gold
   label is genuinely needed on a light surface it uses --gold-deep, a darker
   step of the same hue, which is what keeps the page WCAG AA.
   ========================================================================== */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("/assets/fonts/archivo-latin-var.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: "Inter";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/assets/fonts/inter-latin-var.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;
}

/* --------------------------------------------------------------- tokens -- */
:root {
  --ink: #0b0b0b;
  --ink-2: #16161a;
  --ink-3: #23232a;
  --paper: #faf7ef;
  --paper-2: #f3eee1;
  --paper-3: #ffffff;
  --gold: #f2b01e;
  /* Gold is an accent: as a fill, a rule or a mark it is #f2b01e, but as text
     on the off-white paper that value only reaches about 1.6:1. This darker
     step of the same hue carries every gold label and link on a light surface
     at 5.4:1, so gold can stay prominent without becoming unreadable. */
  --gold-deep: #8a5d00;
  --green: #3e8e3e;
  --green-deep: #2c6b2c;
  --red: #c8261e;
  --muted: #5b574f;
  --rule: rgba(11, 11, 11, 0.14);
  --rule-strong: rgba(11, 11, 11, 0.3);
  --rule-invert: rgba(250, 247, 239, 0.22);

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --step--1: clamp(0.82rem, 0.8rem + 0.1vw, 0.9rem);
  --step-0: clamp(1rem, 0.97rem + 0.18vw, 1.09rem);
  --step-1: clamp(1.15rem, 1.08rem + 0.35vw, 1.35rem);
  --step-2: clamp(1.4rem, 1.25rem + 0.7vw, 1.85rem);
  --step-3: clamp(1.75rem, 1.45rem + 1.4vw, 2.6rem);
  --step-4: clamp(2.1rem, 1.6rem + 2.4vw, 3.6rem);
  --step-5: clamp(2.6rem, 1.8rem + 4vw, 5rem);

  --wrap: 1180px;
  --gutter: clamp(1.1rem, 4vw, 2.75rem);
  --radius: 4px;
  --radius-lg: 10px;
  --shadow-hard: 6px 6px 0 rgba(11, 11, 11, 0.9);
  --shadow-soft: 0 18px 40px -24px rgba(11, 11, 11, 0.5);
  --header-h: 68px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background-color: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

a:hover {
  text-decoration-thickness: 3px;
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.018em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 {
  font-size: var(--step-5);
  font-weight: 800;
}

h2 {
  font-size: var(--step-3);
}

h3 {
  font-size: var(--step-2);
}

p {
  margin: 0 0 1.1em;
  text-wrap: pretty;
}

ul,
ol {
  margin: 0 0 1.1em;
  padding-left: 1.15em;
}

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

::selection {
  background: var(--gold);
  color: var(--ink);
}

/* ------------------------------------------------------------- layout ---- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  padding-block: clamp(3rem, 7vw, 6rem);
}

.section--tight {
  padding-block: clamp(2rem, 4vw, 3rem);
}

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

.section--ink h2,
.section--ink h3 {
  color: var(--paper);
}

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

.section__head {
  max-width: 46rem;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}

.section__head--wide {
  max-width: 60rem;
}

.stack > * + * {
  margin-top: 1rem;
}

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--ink);
  padding: 0.7rem 1.1rem;
  font-family: var(--font-display);
  font-weight: 700;
  text-decoration: none;
}

.skip-link:focus {
  left: 1rem;
  top: 1rem;
}

/* --------------------------------------------------------------- bands --- */
.band {
  height: 8px;
  display: block;
}

.band--tri {
  background: linear-gradient(
    to right,
    var(--green) 0 33.33%,
    var(--gold) 33.33% 66.66%,
    var(--red) 66.66% 100%
  );
}

.band--ink {
  background: var(--ink);
}

/* ------------------------------------------------------------ typography - */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.9rem;
}

.section--ink .eyebrow {
  color: var(--gold);
}

.eyebrow__mark {
  width: 28px;
  height: 3px;
  background: var(--gold);
  flex: none;
}

.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-3);
  max-width: 40rem;
}

.section--ink .lede {
  color: rgba(250, 247, 239, 0.86);
}

.section-title {
  margin-bottom: 0.5em;
}

.accent {
  color: var(--gold-deep);
}

.section--ink .accent {
  color: var(--gold);
}

.rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin-block: clamp(1.5rem, 3vw, 2.5rem);
}

.section--ink .rule {
  border-top-color: var(--rule-invert);
}

/* -------------------------------------------------------------- buttons -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.85rem 1.4rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper-3);
  color: var(--ink);
  transition: transform 140ms ease-out, box-shadow 140ms ease-out,
    background-color 140ms ease-out, color 140ms ease-out;
}

.btn--sm {
  padding: 0.6rem 1rem;
  font-size: var(--step--1);
}

.btn--gold {
  background: var(--gold);
  border-color: var(--ink);
  color: var(--ink);
}

.btn--ink {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--paper);
}

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

.btn--ghost {
  background: transparent;
  border-color: rgba(250, 247, 239, 0.55);
  color: var(--paper);
}

.btn:hover {
  transform: translate(-2px, -2px);
  box-shadow: var(--shadow-hard);
}

.btn:active {
  transform: translate(0, 0);
  box-shadow: none;
}

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
  margin-top: 1.6rem;
}

.text-link {
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}

.section--ink .text-link {
  color: var(--gold);
}

/* --------------------------------------------------------------- header -- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ink);
  color: var(--paper);
  border-bottom: 1px solid rgba(250, 247, 239, 0.14);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--paper);
  padding-block: 0.5rem;
}

.brand__tile {
  flex: none;
  width: 40px;
  height: 40px;
  display: block;
  border-radius: 9px;
  overflow: hidden;
  background: var(--ink);
}

.brand__tile img {
  width: 100%;
  height: 100%;
}

.brand__text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.brand__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.32rem;
  letter-spacing: 0.02em;
}

.brand__full {
  font-size: 0.7rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: rgba(250, 247, 239, 0.72);
}

.primary-nav ul {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.4vw, 1.15rem);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav a {
  display: inline-block;
  padding: 0.45rem 0.2rem;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 600;
  color: rgba(250, 247, 239, 0.88);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.primary-nav a:hover {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

.primary-nav a[aria-current="page"] {
  color: var(--paper);
  border-bottom-color: var(--gold);
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.nav-donate {
  white-space: nowrap;
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.nav-toggle {
  display: none;
  align-items: center;
  gap: 0.5rem;
  background: transparent;
  border: 1px solid rgba(250, 247, 239, 0.4);
  border-radius: var(--radius);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 18px;
  height: 2px;
  background: currentColor;
  content: "";
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before {
  position: absolute;
  top: -6px;
}

.nav-toggle__bars::after {
  position: absolute;
  top: 6px;
}

/* --------------------------------------------------------------- hero ---- */
.hero {
  position: relative;
  /* A bright San Diego morning: warm cream lifting into a golden glow behind
     the photograph, instead of a black band. Ink text on this keeps contrast
     very high, and gold stays an accent rather than a text colour. */
  background:
    radial-gradient(
      120% 90% at 84% 4%,
      rgba(242, 176, 30, 0.48) 0%,
      rgba(242, 176, 30, 0.18) 34%,
      rgba(242, 176, 30, 0) 66%
    ),
    linear-gradient(180deg, #fffdf6 0%, var(--paper) 48%, var(--paper-2) 100%);
  color: var(--ink);
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--rule);
}
.hero::before {
  /* Sunburst motif from the logo, drawn with rays. On a light hero it reads as
     sunshine rather than a dark disc, so the rays are warmer and softer. */
  content: "";
  position: absolute;
  top: -38%;
  right: -12%;
  width: min(760px, 88vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(242, 176, 30, 0.6) 0deg 3.2deg,
    rgba(242, 176, 30, 0) 3.2deg 9deg
  );
  -webkit-mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  mask-image: radial-gradient(circle, #000 22%, transparent 68%);
  opacity: 0.34;
  z-index: -1;
}

.hero__inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  padding-block: clamp(3rem, 8vw, 6.5rem);
}

.hero__tagline {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--gold-deep);
  margin-bottom: 0.9rem;
  letter-spacing: -0.01em;
}
.hero h1 {
  color: var(--ink);
  margin-bottom: 0.5em;
}
.hero h1 em {
  font-style: normal;
  color: var(--gold-deep);
}
.hero__mission {
  font-size: var(--step-1);
  line-height: 1.55;
  color: #37332c;
  max-width: 38rem;
}

.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.4rem;
  list-style: none;
  padding: 0;
  margin: 1.6rem 0 0;
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.hero__trust li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.hero__trust li::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--gold-deep);
  border-radius: 50%;
  flex: none;
}

.hero__media {
  position: relative;
}
.hero__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  /* On the light hero the photograph needs a printed edge and a soft shadow to
     sit up off the cream, rather than the faint light rim used on black. */
  border: 3px solid var(--paper-3);
  box-shadow: 0 22px 44px -26px rgba(11, 11, 11, 0.55);
}

.hero__media::after {
  content: "";
  position: absolute;
  inset: auto -10px -10px auto;
  width: 46%;
  height: 46%;
  border-right: 4px solid var(--gold);
  border-bottom: 4px solid var(--gold);
  border-radius: 0 0 var(--radius-lg) 0;
  pointer-events: none;
}

/* ----------------------------------------------------- hero brand spot --- */
.hero-video {
  margin: 0;
}
/* The overlay is positioned against the video box alone, never the caption
   below it, which is why the player sits in its own frame. */
.hero-video__frame {
  position: relative;
}
.hero-video__player {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  /* The same printed edge and shadow the hero photograph carried, so the
     thumbnail sits up off the cream rather than floating on it. */
  border: 3px solid var(--paper-3);
  box-shadow: 0 22px 44px -26px rgba(11, 11, 11, 0.55);
  background: var(--ink);
  object-fit: cover;
}
.hero-video__fallback {
  margin: 0;
  padding: 1rem;
  color: var(--ink);
}
/* Injected by site.js. Until a visitor presses it, the video shows only the
   thumbnail, so the hero reads as a photograph with a play control rather than
   as a media player. */
.hero-video__play {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.85rem;
  width: 100%;
  padding: 1rem;
  border: 3px solid var(--paper-3);
  border-radius: var(--radius-lg);
  background: linear-gradient(
    180deg,
    rgba(11, 11, 11, 0.06) 0%,
    rgba(11, 11, 11, 0.28) 62%,
    rgba(11, 11, 11, 0.55) 100%
  );
  color: var(--paper);
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-align: center;
  cursor: pointer;
  transition: background-color 160ms ease-out;
}
.hero-video__play:hover {
  background: linear-gradient(
    180deg,
    rgba(11, 11, 11, 0.2) 0%,
    rgba(11, 11, 11, 0.45) 62%,
    rgba(11, 11, 11, 0.68) 100%
  );
}
.hero-video__play-icon {
  position: relative;
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 10px 24px -12px rgba(11, 11, 11, 0.9);
  flex: none;
}
.hero-video__play-icon::after {
  content: "";
  position: absolute;
  left: 54%;
  top: 50%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 19px;
  border-color: transparent transparent transparent var(--ink);
}
.hero-video__caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.3rem 0.9rem;
  margin-top: 0.9rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.hero-video__meta {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.hero-video__transcript summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--ink);
}
.hero-video__transcript p {
  margin: 0.5rem 0 0;
  max-width: 34rem;
}

/* On a phone the hero stacks, and the photograph used to fall below the fold —
   leaving the whole first screen as one dark block of text. Leading with the
   photograph and easing the type scale gives the first screen some warmth and
   lets the headline breathe. */
@media (max-width: 759px) {
  .hero__inner {
    padding-block: clamp(1.4rem, 5vw, 2.4rem);
    gap: clamp(1.4rem, 5vw, 2rem);
  }
  .hero__media {
    order: -1;
  }
  .hero h1 {
    font-size: var(--step-4);
  }
  .hero__mission {
    font-size: var(--step-0);
  }
  .hero__trust {
    margin-top: 1.2rem;
  }
}

/* --------------------------------------------------------------- cards --- */
.card-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 288px), 1fr));
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 160ms ease-out, box-shadow 160ms ease-out;
}

.card--linked:hover,
.card--linked:focus-within {
  transform: translate(-3px, -3px);
  box-shadow: var(--shadow-hard);
}

.card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card__media {
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}

.card__body {
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.card__eyebrow {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0;
}

.card__title {
  font-size: var(--step-2);
  margin: 0 0 0.3rem;
}

.card__title a {
  text-decoration: none;
}

.card__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.card__text {
  color: var(--ink-3);
}

.card__text > :last-child {
  margin-bottom: 0;
}

.card__footer {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--rule);
}

.status-tag {
  align-self: flex-start;
  display: inline-block;
  font-family: var(--font-display);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--paper-2);
  border: 1px solid var(--rule-strong);
  color: var(--ink);
}

.section--ink .status-tag {
  background: rgba(250, 247, 239, 0.08);
  border-color: rgba(250, 247, 239, 0.35);
  color: var(--paper);
}

/* --------------------------------------------------------------- split --- */
.split {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.split__text > :last-child {
  margin-bottom: 0;
}

.split__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-strong);
}

.figure {
  margin: 0;
}

.figure figcaption {
  margin-top: 0.7rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* --------------------------------------------------------------- lists --- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}

.checklist li {
  position: relative;
  padding-left: 1.7rem;
  margin-bottom: 0.6rem;
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 10px;
  height: 10px;
  background: var(--gold);
  transform: rotate(45deg);
}

.section--ink .checklist li::before {
  background: var(--gold);
}

.principle-list {
  counter-reset: principle;
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0.75rem;
}

.principle-list li {
  counter-increment: principle;
  position: relative;
  padding: 0.95rem 1.1rem 0.95rem 3.6rem;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.3;
}

.principle-list li::before {
  content: counter(principle, decimal-leading-zero);
  position: absolute;
  left: 1.1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--gold-deep);
}

/* ------------------------------------------------------------ photo strip */
.photo-strip {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.photo-strip figure {
  margin: 0;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  aspect-ratio: 4 / 3;
  background: var(--paper-2);
}

.photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 400ms ease-out;
}

.photo-strip figure:hover img {
  transform: scale(1.03);
}

.photo-strip figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 0.9rem 0.7rem;
  background: linear-gradient(to top, rgba(11, 11, 11, 0.86), transparent);
  color: var(--paper);
  font-size: var(--step--1);
  font-weight: 500;
}

/* --------------------------------------------------------- leadership --- */
.board-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.board-card {
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.board-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
}

.board-card__body {
  padding: clamp(1rem, 2.2vw, 1.5rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}

.board-card__name {
  font-size: var(--step-1);
  margin-bottom: 0.15rem;
}

.board-card__title {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin: 0 0 0.8rem;
}

.pending-note {
  font-size: var(--step--1);
  color: var(--muted);
  background: var(--paper-2);
  border-left: 3px solid var(--gold);
  padding: 0.7rem 0.9rem;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0;
}

.pending-note__label {
  display: block;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 0.25rem;
}

/* ---------------------------------------------------------------- forms -- */
.form-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: start;
}

.form-card {
  background: var(--paper-3);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  padding: clamp(1.2rem, 3vw, 2.25rem);
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.15rem;
}

.field label,
.field legend {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.field .hint {
  font-size: var(--step--1);
  color: var(--muted);
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-body);
  font-weight: 400;
}

.field input,
.field select,
.field textarea {
  font: inherit;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius);
  padding: 0.7rem 0.8rem;
  width: 100%;
}

.field textarea {
  min-height: 8rem;
  resize: vertical;
}

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 3px solid var(--gold);
  outline-offset: 1px;
  border-color: var(--ink);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select,
.field[data-invalid="true"] textarea {
  border-color: var(--red);
  border-width: 2px;
}

.field-error {
  font-size: var(--step--1);
  color: #a81610;
  font-weight: 600;
  margin: 0;
}

.fieldset {
  border: 0;
  padding: 0;
  margin: 0 0 1.15rem;
}

.checkbox-grid {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  margin-top: 0.4rem;
}

.checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  font-size: var(--step-0);
}

/* Consent and interest labels are sentences, not field labels: keep them in
   sentence case even inside a .field. */
.field label.checkbox,
.checkbox span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--step-0);
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink);
}

.checkbox input {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.28rem;
  accent-color: var(--green-deep);
  flex: none;
}

.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 0.5rem;
}

.form-consent {
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 34rem;
}

.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.notice {
  border-radius: var(--radius);
  padding: 0.85rem 1.1rem;
  margin-bottom: 1.25rem;
  border: 1px solid;
  font-weight: 500;
}

.notice--info {
  background: var(--paper-2);
  border-color: var(--rule-strong);
}

.notice--success {
  background: #eef6ee;
  border-color: var(--green-deep);
  color: #1d4a1d;
}

.notice--error {
  background: #fdecea;
  border-color: var(--red);
  color: #8c130d;
}

.form-success {
  background: var(--paper-3);
  border: 1px solid var(--green-deep);
  border-left: 6px solid var(--green-deep);
  border-radius: var(--radius);
  padding: clamp(1.2rem, 3vw, 2rem);
}

.form-success h2 {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------- ways to give --- */
.give-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}

.give-card {
  background: rgba(250, 247, 239, 0.06);
  border: 1px solid rgba(250, 247, 239, 0.25);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
}

.give-card h3 {
  font-size: var(--step-1);
  color: var(--paper);
  margin-bottom: 0.4rem;
}

.give-card p {
  color: rgba(250, 247, 239, 0.84);
  margin-bottom: 0;
}

.give-card a {
  color: var(--gold);
}

/* -------------------------------------------------------------- contact -- */
.contact-details {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.contact-details > div {
  padding: 0.8rem 0;
  border-bottom: 1px solid var(--rule);
}

.contact-details dd {
  margin: 0.2rem 0 0;
}

.contact-details dt {
  font-family: var(--font-display);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------------------------- prose ----- */
.prose {
  max-width: 46rem;
}

.prose h2 {
  margin-top: 2.2rem;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose ul {
  padding-left: 1.3rem;
}

.prose li {
  margin-bottom: 0.5rem;
}

.updated {
  font-size: var(--step--1);
  color: var(--muted);
}

/* -------------------------------------------------------------- footer --- */
.site-footer {
  background: var(--ink);
  color: rgba(250, 247, 239, 0.8);
  margin-top: clamp(2rem, 6vw, 4rem);
}

.footer-inner {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-block: clamp(2.5rem, 6vw, 4rem);
}

.footer-logo {
  width: 108px;
  height: auto;
  margin-bottom: 1rem;
}

.footer-tagline {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--paper);
  max-width: 22rem;
  margin-bottom: 0.4rem;
}

.footer-area {
  font-size: var(--step--1);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(250, 247, 239, 0.6);
}

.footer-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}

.footer-nav ul,
.footer-legal ul {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
}

.footer-nav li,
.footer-legal li {
  margin-bottom: 0.5rem;
}

.site-footer a {
  color: rgba(250, 247, 239, 0.86);
  text-decoration: none;
}

.site-footer a:hover {
  color: var(--paper);
  text-decoration: underline;
  text-decoration-color: var(--gold);
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.1rem;
}

.footer-fine {
  border-top: 1px solid rgba(250, 247, 239, 0.16);
  padding-block: 1.4rem 2.2rem;
  display: grid;
  gap: 0.5rem;
}

.footer-statement {
  font-size: var(--step--1);
  color: rgba(250, 247, 239, 0.78);
  max-width: 52rem;
  margin: 0;
}

.footer-copy {
  font-size: var(--step--1);
  color: rgba(250, 247, 239, 0.55);
  margin: 0;
}

/* -------------------------------------------------------------- reveal --- */
.reveal-pending {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 520ms ease-out, transform 520ms ease-out;
}

.reveal-pending.is-visible {
  opacity: 1;
  transform: none;
}

/* ------------------------------------------------------------ responsive - */
@media (min-width: 760px) {
  .hero__inner {
    grid-template-columns: 1.08fr 0.92fr;
  }

  .split {
    grid-template-columns: 1fr 1fr;
  }

  .split--reverse .split__text {
    order: 2;
  }

  .footer-inner {
    grid-template-columns: 1.3fr 1fr 1fr 1fr;
  }

  .form-layout {
    grid-template-columns: 1.35fr 1fr;
  }

  .contact-details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
  }
}

/*
 * Staff sign-in. It lives at the bottom of the menu drawer and nowhere else:
 * the desktop header has no room for it, and it is not an invitation to a
 * visitor. Staff on a desktop reach /admin from a bookmark.
 */
/* Two classes, not one: `.primary-nav a` sets `display: block` for the header's
   links and would otherwise win on specificity. */
.primary-nav .nav-staff {
  display: none;
}

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex;
  }

  .primary-nav {
    position: absolute;
    top: var(--header-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--ink);
    border-bottom: 4px solid var(--gold);
    padding: 0.5rem var(--gutter) 1.2rem;
    display: none;
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .primary-nav li {
    border-bottom: 1px solid rgba(250, 247, 239, 0.12);
  }

  .primary-nav a {
    display: block;
    padding: 0.85rem 0.2rem;
    font-size: 1.05rem;
  }

  .nav-donate {
    margin-top: 1rem;
    align-self: flex-start;
  }

  .nav-actions {
    flex-wrap: wrap;
    margin-top: 1rem;
  }

  .nav-actions .btn {
    margin-top: 0;
    align-self: auto;
  }

  /* Specificity beats `.primary-nav a`, which sets the drawer's own link
     padding and size. Muted rather than gold so it reads as a footnote to the
     menu, not as another thing to click. */
  .primary-nav .nav-staff {
    display: block;
    margin-top: 1rem;
    padding: 1rem 0.2rem 0.35rem;
    border-top: 1px solid rgba(250, 247, 239, 0.22);
    color: rgba(250, 247, 239, 0.72);
    font-family: var(--font-display);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .primary-nav .nav-staff:hover,
  .primary-nav .nav-staff[aria-current="page"] {
    color: var(--gold);
  }
}

@media (max-width: 520px) {
  /* The full organization name stays visible on a phone. It was previously
     hidden here to save room, which left a first-time visitor looking at three
     unexplained letters. It wraps onto a second line rather than shrinking
     into illegibility, and the header is tall enough to carry both lines. */
  .brand {
    gap: 0.55rem;
  }
  .brand__name {
    font-size: 1.18rem;
  }
  .brand__full {
    font-size: 0.6rem;
    letter-spacing: 0.02em;
    line-height: 1.25;
    max-width: 12rem;
    text-wrap: balance;
  }
  /* The brand spot bakes its own caption into the bottom of every scene. On a
     phone the thumbnail is small enough that stacked icon-and-word would sit on
     top of that caption, so the word goes and the gold play disc carries the
     meaning on its own. */
  .hero-video__play-icon {
    width: 54px;
    height: 54px;
  }
  .hero-video__play-icon::after {
    border-width: 10px 0 10px 16px;
  }
  .hero-video__play-label {
    display: none;
  }
  .hero__media::after {
    display: none;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }

  .reveal-pending {
    opacity: 1;
    transform: none;
  }
}

@media print {
  .site-header,
  .nav-toggle,
  .cta-row,
  .band--tri {
    display: none;
  }

  body {
    background: #fff;
    color: #000;
  }
}

/* ==========================================================================
   Additional components used by the page modules
   ========================================================================== */

/* Leadership teaser list (home page) */
.teaser-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.85rem;
}

.teaser-person {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0.75rem;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}

.teaser-person__photo {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--gold);
}

.teaser-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.teaser-person__text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}

.teaser-person__text strong {
  font-family: var(--font-display);
  font-size: var(--step-1);
}

.teaser-person__text span {
  font-size: var(--step--1);
  color: var(--muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Verified facts list */
.fact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--rule);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}

.fact-list li {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.95rem 0;
  border-bottom: 1px solid var(--rule);
}

.fact-list span {
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.fact-list strong {
  font-weight: 600;
}

.section--paper-2 .fact-list,
.section--paper-2 .fact-list li {
  border-color: rgba(11, 11, 11, 0.12);
}

.fine-print {
  margin-top: 1.5rem;
  font-size: var(--step--1);
  color: var(--muted);
  max-width: 52rem;
}

/* Form extras */
.form-title {
  font-size: var(--step-2);
  margin-bottom: 0.35rem;
}

.form-intro {
  color: var(--muted);
  margin-bottom: 1.4rem;
}

.form-aside {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.form-aside img {
  width: 100%;
  border-radius: var(--radius-lg);
  border: 1px solid var(--rule-strong);
}

.aside-heading {
  font-size: var(--step-1);
  margin: 0;
}

.cta-row--inline {
  margin-top: 0.9rem;
}

.subhead {
  font-size: var(--step-1);
  margin: 1.6rem 0 0.8rem;
  color: var(--ink-2);
}

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

.program-title {
  margin-top: 0.35rem;
}

/* Light variant of the give card, for paper-coloured sections */
.give-card--light {
  background: var(--paper-3);
  border-color: var(--rule-strong);
  list-style: none;
  margin: 0;
}

.give-card--light h3 {
  color: var(--ink);
}

.give-card--light p {
  color: var(--ink-3);
}

.give-grid {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   Service directory, help hub, events and membership
   Appended for the expanded site. Uses the same brand tokens as above.
   ========================================================================== */

.lede--tight {
  margin-bottom: 0.5rem;
}

.breadcrumb {
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.9rem;
}
.breadcrumb a {
  color: var(--muted);
}
.breadcrumb a:hover {
  color: var(--ink);
}

.subhead + .resource-grid,
.subhead + .give-grid {
  margin-top: 0.4rem;
}

/* --- the three numbers --------------------------------------------------- */

.crisis {
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(1.1rem, 3vw, 2rem);
  margin-block: 1.2rem;
}
.crisis__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 3vw, 2.25rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.crisis__item {
  display: grid;
  gap: 0.2rem;
  border-top: 3px solid var(--gold);
  padding-top: 0.9rem;
}
.crisis__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.crisis__number {
  font-family: var(--font-display);
  font-size: var(--step-3);
  font-weight: 800;
  line-height: 1.05;
  color: var(--paper);
  text-decoration: none;
}
.crisis__number:hover {
  color: var(--gold);
}
.crisis__detail {
  font-size: var(--step--1);
  line-height: 1.5;
  color: rgba(250, 247, 239, 0.72);
}
.crisis--compact .crisis__number {
  font-size: var(--step-2);
}

/* --- service area cards -------------------------------------------------- */

.service-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.6rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.service-card {
  margin: 0;
}
.service-card__link {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.service-card__link:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-soft);
  border-color: var(--rule-strong);
}
.service-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
}
.service-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.service-card__body {
  display: grid;
  gap: 0.35rem;
  padding: clamp(0.9rem, 2vw, 1.25rem);
}
.service-card__title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 700;
  color: var(--ink);
}
.service-card__text {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}
.service-card__more {
  font-family: var(--font-display);
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--gold-deep);
}

/* --- resource directory -------------------------------------------------- */

.resource-group + .resource-group {
  margin-top: clamp(1.8rem, 4vw, 2.8rem);
}
.resource-grid {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.resource {
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--green);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.2vw, 1.35rem);
}
.resource--featured {
  border-left-color: var(--gold);
  box-shadow: var(--shadow-soft);
}
.resource--urgent {
  border-left-color: var(--red);
}
.resource__name {
  font-size: var(--step-1);
  margin: 0 0 0.4rem;
  color: var(--ink);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}
.resource__flag {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--gold);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
}
.resource__text {
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-3);
  margin: 0 0 0.7rem;
}
.resource__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--rule);
}
.resource__row {
  display: grid;
  grid-template-columns: 5.2rem 1fr;
  gap: 0.6rem;
  padding: 0.42rem 0;
  font-size: var(--step--1);
  border-bottom: 1px solid var(--rule);
}
.resource__row:last-child {
  border-bottom: 0;
}
.resource__key {
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.66rem;
  color: var(--muted);
  padding-top: 0.15rem;
}
.resource__row a {
  color: var(--green-deep);
  word-break: break-word;
}

/* --- help hub index ------------------------------------------------------ */

.help-index {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.9rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
}
.help-index li {
  margin: 0;
}
.help-index a,
.help-index li > span {
  display: grid;
  gap: 0.25rem;
}
.help-index a {
  padding: clamp(0.9rem, 2vw, 1.2rem);
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  border-left: 4px solid var(--gold);
  transition: transform 150ms ease, box-shadow 150ms ease;
}
.help-index a:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.help-index__label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  color: var(--ink);
}
.help-index__text {
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--muted);
}

/* --- event cards --------------------------------------------------------- */

.event-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  margin-top: clamp(1.2rem, 3vw, 2rem);
}
.event-grid--two {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
}
.event-card {
  display: flex;
  flex-direction: column;
  background: var(--paper-3);
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin: 0;
}
.event-card__link {
  display: block;
}
.event-card__media {
  display: block;
  aspect-ratio: 4 / 3;
  background: var(--ink-2);
}
.event-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.event-card__body {
  padding: clamp(1rem, 2.2vw, 1.4rem);
  display: grid;
  gap: 0.45rem;
}
.event-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.8rem;
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-deep);
}
.event-card__place {
  color: var(--muted);
  font-weight: 600;
}
.event-card__title {
  margin: 0;
  font-size: var(--step-1);
}
.event-card__title a {
  color: var(--ink);
  text-decoration: none;
}
.event-card__title a:hover {
  text-decoration: underline;
  text-decoration-color: var(--gold);
  text-decoration-thickness: 3px;
}
.event-card__text {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: var(--ink-3);
}
.event-card--featured .event-card__title {
  font-size: var(--step-2);
}

@media (min-width: 860px) {
  .event-card--featured {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
  }
  .event-card--featured .event-card__media {
    height: 100%;
    aspect-ratio: auto;
  }
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 0.82rem;
  color: var(--gold-deep);
  margin: 0.6rem 0 0;
}
.motto {
  font-family: var(--font-display);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--ink);
  margin: 0.6rem 0 0;
  max-width: 30rem;
}

/* --- curriculum weeks ---------------------------------------------------- */

.week-grid {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
}
.week-card {
  background: rgba(250, 247, 239, 0.06);
  border: 1px solid rgba(250, 247, 239, 0.25);
  border-top: 4px solid var(--gold);
  border-radius: var(--radius);
  padding: clamp(1rem, 2.2vw, 1.3rem);
}
.week-card__week {
  margin: 0 0 0.3rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.week-card h3 {
  margin: 0 0 0.4rem;
  font-size: var(--step-1);
  color: var(--paper);
}
.week-card p:last-child {
  margin: 0;
  font-size: var(--step--1);
  line-height: 1.55;
  color: rgba(250, 247, 239, 0.78);
}

/* --- misc --------------------------------------------------------------- */

.card-grid--three {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
}
.card-grid--four {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.give-grid {
  display: grid;
  gap: clamp(0.9rem, 2.2vw, 1.4rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
}
.card__stat {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.figure--wide {
  margin: 0;
}
.figure--wide img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}
.prose p {
  max-width: 46rem;
}
.field-row {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
}

/* Board card additions: a member may have no photograph yet, and may carry a
   one-line focus stated by staff. */
.board-card__placeholder {
  aspect-ratio: 1 / 1;
  background: var(--ink-2);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.board-card__focus {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--gold-deep);
  margin: 0 0 0.4rem;
}


/* ---------------------------------------------------------------------------
   The visitor's own conversation page (/my-thread). It borrows the site's
   header, footer and type scale so it feels like part of the website rather
   than a system screen.
   --------------------------------------------------------------------------- */
.public-thread {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.75rem;
}
.public-thread__item {
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  padding: 0.8rem 1rem;
  background: var(--paper-3);
  max-width: 46rem;
}
.public-thread__item--mine {
  background: rgba(242, 176, 30, 0.16);
  border-color: var(--gold);
  margin-left: auto;
}
.public-thread__item--system {
  background: var(--paper-2);
  border-style: dashed;
}
.public-thread__meta {
  margin: 0 0 0.3rem;
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--muted);
}
.public-thread__body {
  margin: 0;
  line-height: 1.6;
}

/* Hidden from people, irresistible to scripts. */
.honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------------------------------------------------------------- gear --- */
/* The gear catalogue. Cards are deliberately tall and quiet so the product
   photograph carries the page, and the badge on each piece is the only strong
   colour on it. */
.gear-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: clamp(1.1rem, 2.4vw, 1.8rem);
}
.gear-card {
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  scroll-margin-top: 6rem;
}
.gear-card__media {
  background: var(--paper-2);
  border-bottom: 1px solid var(--line);
}
.gear-card__media img {
  display: block;
  width: 100%;
  height: auto;
}
.gear-card__body {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 1.15rem 1.15rem 1.3rem;
  flex: 1;
}
.gear-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.15;
}
.gear-card__blurb {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  color: var(--gold-ink);
  font-size: var(--step--1);
}
.gear-card__detail,
.gear-card__sizes {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.gear-card__price {
  margin: auto 0 0;
  padding-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-0);
  color: var(--ink);
}
.gear-card__price--ask {
  font-weight: 400;
  font-size: var(--step--1);
  color: var(--muted);
}
.gear-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.35rem;
}
.btn--small {
  padding: 0.55rem 1rem;
  font-size: var(--step--1);
}
.gear-fineprint {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  max-width: 60ch;
}
/* One form, centred, at a width a person can actually read. The other forms sit
   in a two-column layout; this one has no second column to fill. */
.gear-order {
  max-width: 40rem;
  margin-inline: auto;
}

/* ------------------------------------------------------------ the store --- */
/* The gear cards gained a buy form when the Shopify store arrived. It sits in
   the action row rather than below it, so a card still reads as one line of
   choices: buy it, or ask about it. */
.gear-card__buy {
  display: inline-flex;
  margin: 0;
}
.nav-cart__count {
  display: inline-block;
  min-width: 1.35em;
  margin-left: 0.4em;
  padding: 0 0.35em;
  border-radius: 999px;
  background: var(--gold);
  color: var(--ink);
  font-size: 0.8em;
  font-weight: 700;
  line-height: 1.5;
  text-align: center;
}
.nav-cart__count[hidden] {
  display: none;
}

/* --------------------------------------------------------------- cart --- */
.cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(1.4rem, 3vw, 2.4rem);
}
.cart-lines {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.cart-line {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cart-line__media img {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--paper-2);
}
.cart-line__title {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-0);
  line-height: 1.2;
}
.cart-line__variant,
.cart-line__unit {
  margin: 0 0 0.25rem;
  font-size: var(--step--1);
  color: var(--muted);
}
.cart-line__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.cart-line__qty {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0;
}
.cart-line__qty label {
  font-size: var(--step--1);
  color: var(--muted);
}
.cart-line__qty input {
  width: 4.5rem;
}
.cart-line__total {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  white-space: nowrap;
}
.link-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--ink);
  font: inherit;
  font-size: var(--step--1);
  text-decoration: underline;
  cursor: pointer;
}
.cart-summary {
  align-self: start;
  padding: 1.25rem;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
}
.cart-summary h2 {
  margin: 0 0 0.75rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
}
.cart-totals {
  margin: 0 0 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.cart-totals > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
}
.cart-totals dt {
  color: var(--muted);
}
.cart-totals dd {
  margin: 0;
  font-weight: 700;
}
.cart-note {
  margin: 0.5rem 0 0;
  font-size: var(--step--1);
  color: var(--muted);
}
.btn--block {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
}
.cart-empty {
  padding: 1.5rem 0;
}
.cart-flash {
  margin: 0 0 1rem;
  padding: 0.75rem 1rem;
  border-left: 4px solid var(--green);
  background: var(--paper-2);
  border-radius: var(--radius);
}
.cart-flash[data-tone="warn"] {
  border-left-color: var(--gold-ink);
}
.cart-flash[hidden] {
  display: none;
}
@media (min-width: 860px) {
  .cart-layout {
    grid-template-columns: minmax(0, 1fr) 20rem;
  }
}
@media (max-width: 520px) {
  .cart-line {
    grid-template-columns: 72px minmax(0, 1fr);
  }
  .cart-line__media img {
    width: 72px;
    height: 72px;
  }
  .cart-line__total {
    grid-column: 2;
  }
}

/* ------------------------------------------------------------------
   Production shop — the in-house print and design service on /gear.
   The band sits on ink so it reads as a separate offer from the range
   above it, and the four capability cards use the same gold leftbar
   language as the rest of the site.
   ------------------------------------------------------------------ */
.shop-list {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
.shop-list__item {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 16px;
  padding: 22px 24px;
  border: 1px solid var(--rule-invert);
  border-left: 4px solid var(--gold);
  background: rgba(250, 247, 239, 0.04);
}
.shop-list__n {
  grid-row: 1 / span 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 30px;
  line-height: 1;
  color: var(--gold);
}
.shop-list__t {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 23px;
  line-height: 1.15;
  color: var(--paper);
}
.shop-list__d {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.45;
  color: rgba(250, 247, 239, 0.74);
}
.section--ink .btn--outline {
  border-color: rgba(250, 247, 239, 0.5);
  color: var(--paper);
}
.section--ink .btn--outline:hover,
.section--ink .btn--outline:focus-visible {
  background: var(--paper);
  color: var(--ink);
}
.section--ink .shop-list + .cta-row {
  margin-top: 34px;
}
@media (max-width: 760px) {
  .shop-list {
    grid-template-columns: minmax(0, 1fr);
  }
  .shop-list__item {
    grid-template-columns: 44px minmax(0, 1fr);
    padding: 18px 18px;
  }
  .shop-list__n {
    font-size: 24px;
  }
  .shop-list__t {
    font-size: 20px;
  }
}

/* --- Social tiles: clickable cards for CCE's own accounts ------------- */
.social-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 26px;
}

.social-tile {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--paper);
  border: 2px solid var(--ink);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.social-tile:hover,
.social-tile:focus-visible {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hard);
}

.social-tile__media {
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--ink);
}

.social-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.social-tile__body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 22px 24px;
  flex: 1;
}

.social-tile__platform {
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

.social-tile__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-1);
  line-height: 1.14;
  text-transform: uppercase;
  color: var(--ink);
}

.social-tile__handle {
  margin-top: auto;
  font-family: ui-monospace, "DejaVu Sans Mono", Menlo, Consolas, monospace;
  font-size: var(--step--1);
  color: var(--muted);
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .social-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Event schedule ------------------------------------------------------ */
.schedule {
  list-style: none;
  margin: 1.5rem 0 1.75rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.schedule__item {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}

.schedule__date {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--step--1);
}

.schedule__note {
  font-size: 0.74rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}

/* The CCE + CHW program mark. It is a rounded badge with transparent corners,
   so it sits on the paper without a box behind it. */
.schedule__mark {
  display: block;
  width: clamp(96px, 15vw, 144px);
  height: auto;
  margin: 0 0 1rem;
}

/* --- Project status ------------------------------------------------------
   Every project states where it stands before it says anything else. The dot
   is decoration; the label carries the meaning, so the chip still works for a
   reader who cannot separate the colours. */
.status-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.85rem;
  padding: 0.3rem 0.8rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  background: var(--paper-3);
  font-family: var(--font-display);
  font-size: 0.76rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}

.status-chip__dot {
  flex: none;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--muted);
}

.status-chip--active {
  border-color: var(--green-deep);
}
.status-chip--active .status-chip__dot {
  background: var(--green-deep);
}
.status-chip--proposed {
  border-color: var(--gold-deep);
}
.status-chip--proposed .status-chip__dot {
  background: var(--gold-deep);
}
.status-chip--hold {
  border-color: var(--red);
}
.status-chip--hold .status-chip__dot {
  background: var(--red);
}

/* The honesty band: a rule, not a coloured panel, so it reads as a statement
   of fact rather than an alert. */
.status-note {
  max-width: 64ch;
  padding: 0.35rem 0 0.35rem 1.25rem;
  border-left: 4px solid var(--rule-strong);
}

.status-note--active {
  border-left-color: var(--green-deep);
}
.status-note--proposed {
  border-left-color: var(--gold-deep);
}
.status-note--on-hold {
  border-left-color: var(--red);
}

.status-note__heading {
  margin: 0 0 0.35rem;
  font-size: var(--step-1);
}

.status-note p {
  margin: 0;
  color: var(--muted);
}

/* --- Project cards ------------------------------------------------------- */
.project-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.project-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--radius-lg);
  background: var(--paper-3);
}

.project-card--compact {
  padding: 1.35rem;
}

.project-card__media img {
  display: block;
  width: 100%;
  height: auto;
}

.project-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.35rem;
}

.project-card__name {
  margin: 0;
  font-size: var(--step-2);
}

.project-card__name a {
  color: inherit;
  text-decoration: none;
}

.project-card__name a:hover {
  text-decoration: underline;
}

.project-card__summary {
  margin: 0;
}

.project-card__status {
  margin: 0;
  font-size: var(--step--1);
  color: var(--muted);
}

.project-card__action {
  margin: auto 0 0;
  padding-top: 0.6rem;
}

/* --- The work, and what is needed ---------------------------------------- */
.work-groups,
.needs-list {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: 1.5rem 0 0;
  padding: 0;
}

.work-group__heading {
  margin: 0 0 0.6rem;
  font-size: var(--step-1);
}

.needs-list {
  list-style: none;
}

.need {
  padding-top: 0.85rem;
  border-top: 3px solid var(--gold);
}

.need__label {
  margin: 0 0 0.25rem;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-weight: 600;
}

.need__detail {
  margin: 0;
  opacity: 0.82;
}

/* --- Project page helpers ------------------------------------------------ */
.wrap--narrow {
  max-width: 820px;
}

.project-about {
  max-width: 68ch;
}

.project-meta {
  margin: 0 0 1rem;
  font-family: var(--font-display);
  font-size: var(--step--1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}

.form-card--wide {
  max-width: 720px;
}

.checkbox-grid--wide {
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.field__hint {
  margin: 0 0 0.6rem;
  font-size: var(--step--1);
  color: var(--muted);
}

/* ---------------------------------------------------------- project marks */
/*
 * The drawn mark used when a project has no photograph of its own.
 *
 * It fills the same box as a card image, so the hub grid stays even whether a
 * project has photography or not. Drawn in the brand palette rather than
 * generated, so a plan is never illustrated with a picture of something that
 * did not happen.
 */
.project-mark {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background:
    radial-gradient(circle at 30% 22%, rgba(242, 176, 30, 0.42), transparent 58%),
    linear-gradient(160deg, var(--ink) 0%, var(--ink-3) 100%);
  color: var(--gold);
  overflow: hidden;
}

.project-mark svg {
  width: 44%;
  height: 44%;
  max-width: 140px;
  max-height: 140px;
}

/* On the project page the mark stands in for the wide lead photograph. */
.project-hero-mark {
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.project-mark--hero {
  aspect-ratio: 16 / 9;
}

.project-mark--hero svg {
  /* Sized to hold its own against a full-width photograph on the two projects
     that have one, so a drawn mark never reads as a missing image. */
  width: clamp(160px, 20vw, 280px);
  height: clamp(160px, 20vw, 280px);
}

/* ------------------------------------------------------------ budget list */
/*
 * The money. Published because a grant funder reads this first, and because
 * "not assigned" is more useful to them than silence.
 */
.budget-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}

.budget-list li {
  padding: 0.7rem 0.95rem;
  border-left: 3px solid var(--gold);
  background: var(--paper-2);
  font-size: var(--step--1);
}

.budget-list li:first-child {
  font-weight: 600;
}

@media (max-width: 700px) {
  .project-mark--hero svg {
    width: 132px;
    height: 132px;
  }
}