/* -------------------------------------------------------------------------
   The Ecology Programme — stylesheet
   Design authority: DESIGN_SYSTEM.md (locked) + /reference visual mockups.
   Palette is near-binary: warm off-white light sections, green/blue-black
   dark sections, restrained cool accent. No decorative gradients.
   ---------------------------------------------------------------------- */

/* ---------- Design tokens ---------- */
:root {
  /* colour */
  --bg-light: #faf8f4;
  --bg-light-raised: #f3f1ea;
  --bg-dark: #0b120f;
  --bg-dark-raised: #101a16;
  --ink-on-light: #14181a;
  --ink-on-light-muted: rgba(20, 24, 26, 0.62);
  --ink-on-light-muted-strong: rgba(20, 24, 26, 0.78);
  --ink-on-dark: #f5f3ee;
  --ink-on-dark-muted: rgba(245, 243, 238, 0.66);
  --ink-on-dark-muted-strong: rgba(245, 243, 238, 0.82);
  /* Hero-only accent — the hero composition is locked, so this stays as
     originally set rather than moving to the brand teal below. */
  --accent: #5f9482;
  /* Brand-palette teals (reference/THE_ECOLOGY_PROGRAMME_BRAND_GUIDELINES.png),
     used selectively for hover/focus accents and small decorative
     nodes/lines/motifs — not for backgrounds or body text. Deep Teal clears
     4.57:1 on the light background (passes WCAG 1.4.3 for text); Mist Teal
     clears 10:1 on the dark background. */
  --accent-text-on-light: #2f7d7a;
  --accent-on-dark: #9cc4c1;
  --border-on-light: rgba(20, 24, 26, 0.14);
  --border-on-light-strong: rgba(20, 24, 26, 0.28);
  --border-on-dark: rgba(245, 243, 238, 0.16);
  --border-on-dark-strong: rgba(245, 243, 238, 0.32);
  --focus-ring: #2f7d7a;

  /* type */
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-hero: clamp(2.875rem, 2.05rem + 3.7vw, 5.5rem);      /* 46 -> 88 */
  --fs-statement: clamp(2.25rem, 1.65rem + 2.6vw, 4rem);     /* 36 -> 64 */
  --fs-h2: clamp(2.25rem, 1.7rem + 2.4vw, 3.75rem);          /* 36 -> 60 */
  --fs-h3: clamp(1.5625rem, 1.3rem + 1.1vw, 2.25rem);        /* 25 -> 36 */
  --fs-body: clamp(1.0625rem, 1rem + 0.28vw, 1.3125rem);     /* 17 -> 21 */
  --fs-body-lg: clamp(1.125rem, 1.02rem + 0.45vw, 1.375rem); /* 18 -> 22 */
  --fs-label: clamp(0.6875rem, 0.65rem + 0.08vw, 0.8125rem);/* 11 -> 13 */
  --fs-label-lg: clamp(0.875rem, 0.83rem + 0.15vw, 1rem);    /* 14 -> 16, readable secondary text */
  --fs-declaration: clamp(1.375rem, 1.15rem + 1vw, 2rem);    /* 22 -> 32, editorial "declaration" headline */

  --lh-tight: 1.08;
  --lh-heading: 1.18;
  --lh-body: 1.6;

  /* spacing */
  --gutter: clamp(1.5rem, 4vw, 4rem);
  --section-pad-y: clamp(4.5rem, 9vw, 10rem);
  --max-content: 1280px;
  --measure: 42rem; /* ~670px body copy line width */

  --radius: 2px;
  --transition: 200ms ease;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --transition: 0ms;
  }
}

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

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

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

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--ink-on-light);
  background: var(--bg-light);
  overflow-x: hidden;
}

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

a {
  color: inherit;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4 {
  font-family: var(--font-serif);
  font-weight: 400;
  line-height: var(--lh-heading);
  margin: 0;
}

p {
  margin: 0;
}

button {
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  cursor: pointer;
}

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

/* ---------- Focus states ---------- */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.section--dark :focus-visible {
  outline-color: var(--accent-on-dark);
}

/* ---------- Anchor targets ---------- */
section[id],
#the-corpus,
#top {
  scroll-margin-top: 5.5rem;
}

/* ---------- Layout helpers ---------- */
.container {
  max-width: var(--max-content);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.section--light {
  background: var(--bg-light);
  color: var(--ink-on-light);
}

.section--dark {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  position: relative;
  overflow: hidden;
}

.section-head {
  display: grid;
  gap: clamp(1rem, 3vw, 2rem);
  margin-bottom: clamp(2.5rem, 6vw, 5rem);
}

.section-num {
  display: block;
  font-family: var(--font-serif);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 3rem);
  color: var(--ink-on-light-muted);
  margin-bottom: 0.25em;
}

.section--dark .section-num {
  color: var(--ink-on-dark-muted);
}

.section-title {
  font-size: var(--fs-h2);
}

.section-lede {
  font-family: var(--font-serif);
  font-size: var(--fs-statement);
  line-height: var(--lh-tight);
  max-width: 20ch;
  margin-top: clamp(1rem, 3vw, 2rem);
}

.measure {
  max-width: var(--measure);
}

.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;
}

.skip-link {
  position: absolute;
  left: 1rem;
  top: 0;
  transform: translateY(-150%);
  background: var(--ink-on-light);
  color: var(--bg-light);
  font-size: var(--fs-label);
  padding: 0.75em 1.25em;
  z-index: 100;
  transition: transform var(--transition);
}

.skip-link:focus {
  transform: translateY(0.75rem);
}

/* ---------- Buttons / links ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.9em 1.6em;
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid var(--ink-on-light);
  color: var(--ink-on-light);
  background: transparent;
  transition: background var(--transition), color var(--transition);
}

.btn:hover {
  background: var(--ink-on-light);
  color: var(--bg-light);
}

.btn--solid {
  background: var(--ink-on-light);
  color: var(--bg-light);
}

.btn--solid:hover {
  opacity: 0.85;
  background: var(--ink-on-light);
}

.section--dark .btn {
  border-color: var(--ink-on-dark);
  color: var(--ink-on-dark);
}

.section--dark .btn:hover {
  background: var(--ink-on-dark);
  color: var(--bg-dark);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  text-decoration: none;
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-on-light);
  border-bottom: 1px solid var(--border-on-light-strong);
  padding-bottom: 0.15em;
  transition: border-color var(--transition), color var(--transition);
}

.text-link:hover {
  color: var(--accent-text-on-light);
  border-color: var(--accent-text-on-light);
}

.section--dark .text-link {
  color: var(--ink-on-dark);
  border-color: var(--border-on-dark-strong);
}

.section--dark .text-link:hover {
  color: var(--accent-on-dark);
  border-color: var(--accent-on-dark);
}

.inline-link {
  text-decoration: underline;
  text-underline-offset: 0.15em;
  text-decoration-color: var(--border-on-light-strong);
}

.inline-link:hover {
  text-decoration-color: currentColor;
}

/* ---------- Header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  /* Deliberately opaque, no backdrop-filter/transform: either would create a
     new containing block for position:fixed descendants (the mobile nav
     panel below), breaking its full-viewport overlay. */
  background: var(--bg-light);
  border-bottom: 1px solid var(--border-on-light);
}

.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block: 0.9rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.brand__logo {
  display: block;
  height: 30px;
  width: auto;
}

.brand__logo--mark {
  display: none;
}

@media (max-width: 767px) {
  /* The full lockup's wordmark becomes illegible at header scale on
     narrow viewports; the standalone mark alone stays crisp and doesn't
     crowd the hamburger toggle. */
  .brand__logo--full {
    display: none;
  }

  .brand__logo--mark {
    display: block;
    height: 30px;
    width: 30px;
  }
}

.nav-toggle {
  display: none;
  width: 2.25rem;
  height: 2.25rem;
  align-items: center;
  justify-content: center;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  width: 1.25rem;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--transition), opacity var(--transition);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  left: 0;
}

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

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

.nav-toggle[aria-expanded="true"] .nav-toggle__bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

.primary-nav__list {
  display: flex;
  gap: clamp(1rem, 2.4vw, 2.25rem);
}

.primary-nav__link {
  font-size: var(--fs-label);
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--ink-on-light-muted);
  transition: color var(--transition);
}

.primary-nav__link:hover,
.primary-nav__link:focus-visible {
  color: var(--ink-on-light);
}

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

  .primary-nav {
    position: fixed;
    inset: 0;
    top: 0;
    background: var(--bg-light);
    padding: 6rem var(--gutter) 2rem;
    transform: translateY(-100%);
    opacity: 0;
    visibility: hidden;
    transition: transform var(--transition), opacity var(--transition), visibility var(--transition);
  }

  .primary-nav.is-open {
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
  }

  .primary-nav__list {
    flex-direction: column;
    gap: 1.75rem;
  }

  .primary-nav__link {
    font-size: var(--fs-h3);
    font-family: var(--font-serif);
    color: var(--ink-on-light);
  }
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background: var(--bg-light);
  overflow: hidden;
}

.hero__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(3.5rem, 9vw, 7rem);
  padding-bottom: clamp(3.5rem, 9vw, 7rem);
  align-items: center;
}

/* Mobile only: the hero -> 01 About seam reads as an oversized dead gap
   at narrow widths (hero bottom padding + About top padding stack up).
   Desktop/tablet hero padding and grid are untouched. */
@media (max-width: 767px) {
  .hero__inner {
    padding-bottom: 2.25rem;
  }

  #about.section {
    padding-top: 3.25rem;
  }
}

.hero__content {
  max-width: 40rem;
}

.hero__eyebrow {
  font-size: var(--fs-label);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-on-light-muted);
  margin-bottom: 1.25rem;
}

.hero__title {
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  max-width: 14ch;
}

.hero__tagline {
  font-size: var(--fs-body-lg);
  color: var(--ink-on-light-muted);
  margin-top: 1.5rem;
}

.hero__lead {
  margin-top: clamp(1.5rem, 3vw, 2rem);
  font-size: var(--fs-body);
  max-width: 34rem;
}

.hero__question-intro {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
  font-size: var(--fs-body);
  color: var(--ink-on-light-muted);
}

.hero__question {
  margin-top: 0.6rem;
  font-family: var(--font-serif);
  font-size: clamp(1.5rem, 1.2rem + 1.4vw, 2.25rem);
  line-height: 1.25;
  max-width: 26ch;
}

.hero__cta {
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.hero__visual {
  /* Outer wrapper: stacks the circular image frame above the decorative
     label stack in normal document flow, so the labels sit cleanly below
     the circle instead of overlapping it, and never risk being clipped —
     no absolute positioning/overflow trick needed. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: 640px;
  width: 100%;
  justify-self: center;
}

.hero__globe-frame {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
}

.hero__globe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* The source photograph is landscape with the globe sitting right-of-
     centre; bias the crop right so the circular frame captures the globe
     rather than the blank space beside it. Framing only — the container's
     size/shape is unchanged. */
  object-position: right center;
  border-radius: 50%;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--accent);
  pointer-events: none;
}

.hero__overlay circle {
  fill: currentColor;
}

.hero__overlay line {
  stroke: currentColor;
  stroke-width: 1;
  opacity: 0.55;
}

.hero__labels {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35em;
  text-align: right;
  font-size: var(--fs-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-on-light-muted);
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  }

  .hero__visual {
    justify-self: end;
  }
}

/* ---------- Accordion rows ---------- */
.rows {
  border-top: 1px solid var(--border-on-light);
}

.section--dark .rows {
  border-color: var(--border-on-dark);
}

.row {
  border-bottom: 1px solid var(--border-on-light);
}

.section--dark .row {
  border-color: var(--border-on-dark);
}

.row > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
}

.row > summary::-webkit-details-marker {
  display: none;
}

.row__heading {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex: 1;
}

.row__index {
  font-family: var(--font-serif);
  color: var(--ink-on-light-muted);
  font-size: var(--fs-body);
  min-width: 1.6em;
}

.section--dark .row__index {
  color: var(--ink-on-dark-muted);
}

.row__title-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.row__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
}

.row__dek {
  font-size: var(--fs-label-lg);
  color: var(--ink-on-light-muted-strong);
  text-transform: none;
  letter-spacing: 0;
}

.section--dark .row__dek {
  color: var(--ink-on-dark-muted-strong);
}

.row__icon {
  position: relative;
  width: 1.1rem;
  height: 1.1rem;
  flex-shrink: 0;
  margin-top: 0.4em;
}

.row__icon::before,
.row__icon::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: transform var(--transition);
}

.row__icon::before {
  left: 0;
  top: 50%;
  width: 100%;
  height: 1.5px;
  transform: translateY(-50%);
}

.row__icon::after {
  top: 0;
  left: 50%;
  width: 1.5px;
  height: 100%;
  transform: translateX(-50%);
}

.row[open] > summary .row__icon::after {
  transform: translateX(-50%) rotate(90deg) scale(0);
}

.row__content {
  padding-bottom: clamp(1.5rem, 3vw, 2rem);
  padding-right: clamp(0, 4vw, 3rem);
}

.row__content > * + * {
  margin-top: 1.1em;
}

.row__content p {
  max-width: var(--measure);
}

/* ---------- Visible (non-accordion) blocks ---------- */
.visible-block {
  padding-block: clamp(1.25rem, 2.4vw, 1.75rem);
  border-bottom: 1px solid var(--border-on-light);
}

.section--dark .visible-block {
  border-color: var(--border-on-dark);
}

.visible-block__title {
  font-family: var(--font-serif);
  font-size: var(--fs-h3);
  margin-bottom: 0.75rem;
}

/* A single, restrained brand marker beside "The Corpus" — the "Corpus
   Markers" motif family's namesake heading — not one per entry below. */
.corpus-heading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.corpus-heading__marker {
  display: block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.visible-block__content > * + * {
  margin-top: 1.1em;
}

.key-question {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
}

/* Mobile: the four questions were reading as one continuous paragraph.
   Give each its own clear beat, distinct from ordinary paragraph rhythm. */
@media (max-width: 767px) {
  .key-question + .key-question {
    margin-top: 1.85em;
  }
}

/* ---------- About ---------- */
.about__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 1024px) {
  .about__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.about__intro {
  max-width: 30rem;
}

.about__feature {
  margin-top: clamp(3rem, 6vw, 5rem);
  display: grid;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: end;
}

@media (min-width: 768px) {
  .about__feature {
    grid-template-columns: 1.4fr 1fr;
  }
}

/* Desktop-only compositional refinement: a larger image, closer caption.
   768px and below are untouched by this rule (min-width: 1024px). */
@media (min-width: 1024px) {
  .about__feature {
    grid-template-columns: 2.3fr 1fr;
    gap: 1.5rem;
  }
}

.about__feature-image {
  width: 100%;
  height: auto;
  aspect-ratio: 2 / 1;
  object-fit: cover;
  background: var(--bg-light-raised);
}

.about__feature-caption {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  color: var(--ink-on-light-muted);
  max-width: 20ch;
  position: relative;
  padding-top: 1.25rem;
}

.about__feature-caption::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 1px;
  background: var(--border-on-light-strong);
}

/* ---------- Research ---------- */
.research__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 1024px) {
  .research__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.research__intro p + p {
  margin-top: 1.1em;
}

.corpus-list {
  margin-top: clamp(2rem, 4vw, 3rem);
}

.corpus-cta {
  margin-top: clamp(2rem, 4vw, 2.5rem);
}

.papers-block {
  margin-top: clamp(3rem, 6vw, 4.5rem);
}

.papers-themes {
  margin-top: 1rem;
  font-size: var(--fs-body);
  color: var(--ink-on-dark-muted);
}

/* Research Principles: an editorial pause in the section, not another
   information grid — declarations, generously spaced, not cards. */
.principles {
  margin-top: clamp(6rem, 11vw, 9.5rem);
}

.principles__grid {
  display: grid;
  gap: clamp(2.75rem, 5vw, 4rem) clamp(2rem, 4vw, 3.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 768px) {
  .principles__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .principles__item--full {
    grid-column: 1 / -1;
    max-width: 46rem;
  }
}

.principles__item h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-declaration);
  line-height: 1.2;
  text-wrap: balance;
  margin-bottom: 0.55em;
  max-width: 16ch;
}

.principles__item p {
  color: var(--ink-on-dark-muted);
  max-width: 32ch;
}

.next-phase {
  margin-top: clamp(6rem, 11vw, 9.5rem);
  position: relative;
}

.next-phase__statement {
  font-family: var(--font-serif);
  font-size: var(--fs-statement);
  line-height: var(--lh-tight);
  max-width: 22ch;
}

.next-phase__lede {
  margin-top: 1rem;
  font-size: var(--fs-body-lg);
  color: var(--ink-on-dark-muted);
  max-width: 40ch;
}

.next-phase__grid {
  display: grid;
  gap: clamp(2rem, 4vw, 2.5rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

@media (min-width: 768px) {
  .next-phase__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.next-phase__icon {
  display: block;
  width: 26px;
  height: 26px;
  margin-bottom: 0.65rem;
}

@media (min-width: 768px) {
  .next-phase__icon {
    width: 32px;
    height: 32px;
  }
}

.next-phase__item h4 {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
  margin-bottom: 0.5rem;
}

.next-phase__item p {
  color: var(--ink-on-dark-muted);
  max-width: 30ch;
}

.next-phase__close {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
}

.research__mesh {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(180px, 26vw, 360px);
  color: var(--accent-on-dark);
  opacity: 0.35;
  pointer-events: none;
}

/* ---------- Participate ---------- */
.participate__intro {
  max-width: 34rem;
}

.participate__statement {
  font-family: var(--font-serif);
  font-size: var(--fs-statement);
  line-height: var(--lh-tight);
  max-width: 22ch;
  margin-top: clamp(1rem, 3vw, 1.5rem);
}

/* This line is the section's thesis, not another body paragraph — give it
   the weight and isolation of a declaration. */
.participate__pullquote {
  font-family: var(--font-serif);
  font-size: var(--fs-declaration);
  line-height: 1.25;
  max-width: 22ch;
  margin-top: 2em;
  padding-top: 1.25em;
  border-top: 1px solid var(--border-on-light-strong);
}

.participate__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
  /* Tightened so the intro and the accordion list read as one composition
     rather than two separately-spaced blocks. */
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

@media (min-width: 1024px) {
  .participate__grid {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.row__content .text-link {
  margin-top: 0.5rem;
}

/* ---------- Contact ---------- */
.contact__grid {
  display: grid;
  gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 1024px) {
  .contact__grid {
    grid-template-columns: 0.8fr 1.2fr;
  }
}

.contact__intro {
  max-width: 28rem;
}

.contact__email {
  margin-top: clamp(2rem, 4vw, 3rem);
  font-size: var(--fs-body);
}

.contact__email a {
  font-family: var(--font-serif);
  font-size: var(--fs-body-lg);
}

.contact-form {
  display: grid;
  gap: 1.75rem;
}

@media (min-width: 640px) {
  .contact-form {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }

  .form-field--full {
    grid-column: 1 / -1;
  }
}

.form-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-field label {
  font-size: var(--fs-label-lg);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-on-dark-muted-strong);
}

.form-field input,
.form-field select,
.form-field textarea {
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--border-on-dark-strong);
  color: var(--ink-on-dark);
  padding-block: 0.65rem;
  transition: border-color var(--transition);
}

.form-field select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 4px) 55%, calc(100% - 0px) 55%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 1.25rem;
}

.form-field select option {
  color: var(--ink-on-light);
  background: var(--bg-light);
}

.form-field textarea {
  resize: vertical;
  min-height: 8rem;
  border: 1px solid var(--border-on-dark-strong);
  border-radius: var(--radius);
  padding: 0.75rem;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  border-color: var(--accent-on-dark);
}

.form-field--optional label::after {
  content: " (optional)";
  text-transform: none;
  letter-spacing: 0;
  opacity: 0.7;
}

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

.contact-form__status {
  font-size: var(--fs-label);
  color: var(--ink-on-dark-muted);
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--bg-dark);
  color: var(--ink-on-dark);
  padding-block: clamp(3rem, 6vw, 5rem);
  position: relative;
  overflow: hidden;
}

.site-footer__top {
  display: grid;
  gap: clamp(2rem, 5vw, 3rem);
}

.site-footer__brand {
  display: block;
  height: 26px;
  width: auto;
}

.site-footer__statement {
  margin-top: 1rem;
  font-family: var(--font-serif);
  font-size: var(--fs-statement);
  line-height: var(--lh-tight);
  max-width: 20ch;
}

.site-footer__statement p + p {
  margin-top: 0.15em;
}

.site-footer__bottom {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2rem);
  border-top: 1px solid var(--border-on-dark);
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  align-items: center;
  justify-content: space-between;
}

.footer-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.75rem;
}

.footer-nav__link {
  font-size: var(--fs-label);
  letter-spacing: 0.04em;
  text-decoration: none;
  color: var(--ink-on-dark-muted);
  transition: color var(--transition);
}

.footer-nav__link:hover {
  color: var(--ink-on-dark);
}

.site-footer__meta {
  margin-top: clamp(2rem, 4vw, 3rem);
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 2rem;
  justify-content: space-between;
  align-items: baseline;
  font-size: var(--fs-label);
  color: var(--ink-on-dark-muted);
}

.site-footer__flourish {
  font-family: var(--font-serif);
  font-style: normal;
  max-width: 24ch;
  text-align: right;
}

@media (max-width: 639px) {
  .site-footer__meta {
    flex-direction: column;
  }

  .site-footer__flourish {
    text-align: left;
  }
}

/* ---------- Utility: no horizontal overflow guard ---------- */
html, body {
  max-width: 100%;
}