/* ==========================================================================
   heisse luft! - stylesheet
   Order: fonts → tokens → reset → layout → typography → components → utilities
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts. Self-hosted (SIL Open Font License, see fonts/OFL-NOTICE.txt) because
   the CSP is same-origin only and a campaign site about digital infrastructure
   should not phone home to a font CDN on every page view.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo-black-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: 'Archivo Black';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/archivo-black-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* Colour. The accent bands are not the page ground - a full-bleed #ff0080
     or #ffe600 page is exhausting to read and leaves no room to emphasise
     anything. --pink is the text-safe pink (4.6:1 on paper); --pink-hot is the
     original poster pink, used for the header band and other large fills where
     WCAG text rules do not apply. --yellow accents on top of it. */
  --paper:      #faf7ef;
  --paper-sunk: #f1ebdd;
  --ink:        #14120e;
  --ink-soft:   #4a453c;
  --ink-faint:  #6f685c;
  --line:       #ddd4c2;

  --yellow:      #ffe600;
  --yellow-deep: #f2d600;
  --pink:        #d1005f;
  --pink-hot:    #ff0080;
  --pink-deep:   #a3004a;

  /* Ink used on top of the yellow band. */
  --band-ink:      #14120e;
  --band-ink-soft: #4a3f00;

  /* Ink used on top of the pink header band - the yellow band's soft ink is
     too low-contrast on pink, so the header gets its own. White is the
     highest-contrast choice available against --pink-hot (3.8:1). */
  --header-ink-soft: #fff;

  --ok-bg:   #e3f3e6;
  --ok-line: #2e7d32;
  --ok-ink:  #1f5d23;
  --err-bg:  #fdeaf1;
  --err-ink: #8c0040;

  /* Type */
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-display: 'Archivo Black', 'Inter', system-ui, Impact, sans-serif;

  --text-xs:   0.8125rem;
  --text-sm:   0.9375rem;
  --text-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --text-lead: clamp(1.125rem, 1.05rem + 0.36vw, 1.3125rem);
  --text-h3:   clamp(1.125rem, 1.06rem + 0.32vw, 1.3125rem);
  --text-h2:   clamp(1.5rem, 1.24rem + 1.15vw, 2.125rem);
  --text-h1:   clamp(2rem, 1.5rem + 2.2vw, 3.25rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-body: 1.62;

  /* Space */
  --s0: 0.25rem;
  --s1: 0.5rem;
  --s2: 0.75rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6rem;
  --section-y: clamp(2rem, 4vw, 4.5rem);
  --gutter: clamp(1rem, 4vw, 2rem);

  /* Line length: --measure for prose columns, --container for full-width
     furniture (nav, map, footer). Body text is never --container wide. */
  --measure: 38rem;
  --container: 64rem;
}

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

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

body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

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

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

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
main {
  flex: 1;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--container));
  margin-inline: auto;
}

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

.section + .section {
  border-top: 1px solid var(--line);
}

/* Prose column. Everything inside is capped at --measure so no line runs past
   roughly 75 characters, regardless of how wide the container is. */
.prose {
  width: min(100%, var(--measure));
}

.prose > * + * {
  margin-top: var(--s4);
}

.prose > h2 {
  margin-top: var(--s6);
}

.prose > h3 {
  margin-top: var(--s5);
}

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

.prose--center {
  margin-inline: auto;
  text-align: center;
}

/* Centres the column but leaves the lines flush left. Multi-line body copy set
   centred rags on both edges and the eye loses the line start on every return
   sweep, so --center is for short display blocks only. */
.prose--center-block {
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Typography
   -------------------------------------------------------------------------- */
h1,
h2,
h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

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

h2 {
  font-size: var(--text-h2);
  line-height: var(--leading-snug);
  text-align: center;
}

h3 {
  font-size: var(--text-h3);
  line-height: var(--leading-snug);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
}

.eyebrow {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
}

.lead {
  font-size: var(--text-lead);
  color: var(--ink-soft);
  line-height: 1.5;
}

a {
  color: var(--pink);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--pink-deep);
}

/* --------------------------------------------------------------------------
   Site header (pink band)
   -------------------------------------------------------------------------- */
.site-header {
  background: var(--pink-hot);
  color: var(--band-ink);
  border-bottom: 4px solid var(--ink);
  padding-block: var(--s4) var(--s6);
}

.site-header a {
  color: inherit;
}

.site-header--compact {
  padding-block: var(--s4);
}

.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s4);
  justify-content: center;
  margin-bottom: var(--s6);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-header--compact .site-nav {
  margin-bottom: var(--s4);
}

.site-nav a {
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 3px solid transparent;
}

.site-nav a:hover {
  border-bottom-color: var(--band-ink);
}

.site-nav a[aria-current='page'] {
  border-bottom-color: var(--yellow);
}

.site-title {
  display: block;
  width: min(100%, 30rem);
  margin-inline: auto;
}

.site-title img {
  width: 100%;
}

/* The logo is a lockup, not a heading, on every page but the home page. */
.site-header h1 {
  margin: 0;
}

.tagline {
  margin-top: var(--s4);
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  line-height: var(--leading-snug);
  color: var(--yellow);
  text-align: center;
  text-wrap: balance;
}

.site-header .lead {
  color: var(--header-ink-soft);
  margin-top: var(--s5);
  margin-inline: auto;
  text-align: center;
}

/* The site's thesis - promoted out of a bare <b> inside a paragraph. */
/*
.thesis {
  width: min(100%, var(--measure));
  margin: var(--s5) auto 0;
  border-left: 6px solid var(--pink-hot);
  padding: var(--s1) 0 var(--s1) var(--s4);
  font-size: var(--text-lead);
  font-weight: 700;
  line-height: 1.4;
  text-align: left;
}
*/
/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.button {
  display: inline-block;
  background: var(--pink-hot);
  border: 2px solid var(--ink);
  color: #14120e;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.2;
  padding: 0.8em 1.4em;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.button:hover {
  background: var(--ink);
  color: var(--yellow);
}

.button--ghost {
  background: transparent;
  color: var(--ink);
}

.button--ghost:hover {
  background: var(--ink);
  color: var(--yellow);
}

.button--yellow {
  background: var(--yellow);
  color: var(--ink);
}

.button--yellow:hover {
  background: var(--ink);
  color: var(--yellow);
}

/* For use on the yellow band, where a pink or yellow fill would not separate
   from the ground. */
.button--ink {
  background: var(--ink);
  color: var(--yellow);
  box-shadow: 6px 6px 0 var(--pink-hot);
}

.button--ink:hover {
  background: var(--pink-hot);
  color: var(--ink);
}

/* Poster-sized button for the one call to action that carries a whole page.
   The hard ink offset is the same trick the mission cards use; on hover the
   button travels into its own shadow instead of the shadow disappearing. */
.button--big {
  font-family: var(--font-display);
  font-size: var(--text-h3);
  letter-spacing: 0;
  border-width: 3px;
  padding: 0.75em 1.5em;
  box-shadow: 6px 6px 0 var(--ink);
}

.button--big:hover {
  transform: translate(3px, 3px);
  box-shadow: 3px 3px 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .button--big:hover {
    transform: none;
  }
}

.button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.button-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  justify-content: center;
}

.button-row--start {
  justify-content: flex-start;
}

/* --------------------------------------------------------------------------
   Homepage call to action for the scrollytelling
   -------------------------------------------------------------------------- */
/* A full-bleed yellow band, same geometry as .quote-band: the map hands over
   to it without a paper gap, so the story reads as the map's continuation.
   The specificity beats .section + .section, whose hairline would otherwise
   sit on top of the 4px rule. */
.section.story-cta {
  background: var(--yellow);
  color: var(--band-ink);
  border-block: 4px solid var(--ink);
  padding-block: var(--s6);
  text-align: center;
}

.story-cta + .section {
  border-top: 0;
}

.story-cta__title {
  font-size: var(--text-h1);
  line-height: var(--leading-tight);
  margin: var(--s1) 0 var(--s3);
  text-wrap: balance;
}

.story-cta__lead {
  width: min(100%, var(--measure));
  margin: 0 auto var(--s5);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--band-ink-soft);
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   Map
   -------------------------------------------------------------------------- */
.map-section {
  padding: 0;
  background: var(--ink);
}

.map-frame {
  --map-parallax-travel: 120px;
  height: clamp(340px, 62vh, 720px);
  overflow: hidden;
  position: relative;
}

.map-frame img {
  width: 100%;
  height: calc(100% + var(--map-parallax-travel));
  object-fit: cover;
  object-position: center center;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.map-caption {
  color: var(--paper);
  padding: 0.5em;
  text-align: center;
}

.map-source {
  color: #b3ab9c;
  font-size: var(--text-xs);
}

@media (prefers-reduced-motion: reduce) {
  .map-frame img {
    height: 100%;
    transform: none;
    will-change: auto;
  }
}

/* --------------------------------------------------------------------------
   Story pages
   -------------------------------------------------------------------------- */
.story {
  width: min(100%, var(--measure));
  margin-inline: auto;
}

.story > * + * {
  margin-top: var(--s4);
}

.story h2 {
  margin-top: var(--s6);
  clear: both;
}

.story h3 {
  margin-top: var(--s5);
}

.story > :first-child {
  margin-top: 0;
}

.story ul {
  padding-left: 1.2em;
}

.story li + li {
  margin-top: var(--s2);
}

.story a {
  overflow-wrap: anywhere;
}

.story .img-left,
.story .img-right {
  width: min(100%, 18rem);
  margin-top: var(--s0);
  margin-bottom: var(--s3);
}

@media (min-width: 48rem) {
  .story .img-left {
    float: left;
    margin-right: var(--s4);
  }

  .story .img-right {
    float: right;
    margin-left: var(--s4);
  }
}

/* Wide enough for the illustrations to hang into the margin beside the text
   column, so a float costs the reading measure ~10rem instead of ~18rem. */
@media (min-width: 68rem) {
  .story .img-left {
    margin-left: -8rem;
  }

  .story .img-right {
    margin-right: -8rem;
  }
}

.story::after {
  display: table;
  clear: both;
  content: '';
}

/* The information page is read as a sequence of illustrated chapters. On
   large screens the illustration stays in its own generous left-hand column;
   this makes the visual rhythm explicit instead of letting a small float get
   lost midway through a paragraph. */
.story--scrollytelling {
  width: min(100%, 76rem);
  margin-inline: auto;
}

.story--scrollytelling > h1 {
  width: min(100%, var(--measure));
  margin-inline: auto;
  margin-bottom: var(--s7);
}

.story--scrollytelling > * + * {
  margin-top: var(--s7);
}

.story-step {
  display: grid;
  grid-template-columns: minmax(15rem, 0.78fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(2rem, 6vw, 7rem);
  min-height: 30rem;
}

.story-step__side {
  position: sticky;
  top: var(--s5);
  grid-column: 1;
}

.story-step__visual {
  display: grid;
  place-items: center;
  min-height: 24rem;
  padding: var(--s4);
}

.story-step__visual img {
  width: 100%;
  max-height: none;
  object-fit: contain;
}

.story-step__content {
  width: min(100%, var(--measure));
}

.story-step__content > * + * {
  margin-top: var(--s5);
}

.story-step__content h2 {
  margin-top: 0;
}

.story--scrollytelling .story-step__side h2 {
  margin: 0 0 var(--s4);
}

/* Keep the reading rhythm in motion. Explicit placement lets the source order
   remain image then text for assistive technology. */
@media (min-width: 48rem) {
  .story-step--reverse > .story-step__side {
    grid-column: 2;
  }

  .story-step--reverse > .story-step__content {
    grid-column: 1;
    grid-row: 1;
  }
}

.story-step--text-only {
  display: block;
  min-height: 0;
}

.story-step--text-only .story-step__content {
  margin-left: auto;
}

.story-final {
  width: 100%;
}

.story-final h2 {
  width: 100%;
  margin: 0 0 var(--s5);
}

.story-final__body {
  width: min(100%, var(--measure));
  margin-inline: auto;
}

/* The homepage intro is centered as a section, but its longer call-to-action
   copy follows the readable, left-aligned treatment used on the info page. */
.prose--center .story-final__body {
  text-align: left;
}

.prose--center .action-grid {
  text-align: left;
}

.story-final__body::after {
  display: table;
  clear: both;
  content: '';
}

.story-final .button-row {
  clear: both;
  justify-content: center;
}

.story-final .action-grid + .button-row {
  margin-top: var(--s6);
}

/* The four ways to get involved. They sit outside .story-final__body: the body
   is capped at the reading measure, and a 2x2 grid of cards needs the full
   column. */
.action-grid {
  display: grid;
  grid-template-columns: 1fr;
  align-items: start;
  gap: var(--s4);
  margin-top: var(--s6);
  list-style: none;
  text-align: left;
}

@media (min-width: 52rem) {
  .action-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* The prose rules on this page put a top margin on every sibling and on every
   h3; inside the grid the gap already does that spacing. */
.action-grid > .action-card,
.action-card .action-card__title,
.action-card__body > :first-child {
  margin-top: 0;
}

.action-card {
  background: var(--pink-hot);
  padding: var(--s4);
  color: var(--header-ink-soft);
}

/* Closed by default: the grid reads as four titles until one is opened. An
   open card must not stretch its closed neighbour into a tall empty block,
   hence align-items: start on the grid above. */
.action-details > summary {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  cursor: pointer;
  list-style: none;
}

/* Three lines of title height whether the title needs one line or three, so the
   four closed cards are the same size. em resolves against the title's own
   font-size; --leading-snug is its line-height. */
.action-details > summary > .action-card__title {
  min-height: calc(3 * var(--leading-snug) * 1em);
}

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

.action-details > summary::after {
  content: '+';
  margin-left: auto;
  flex: none;
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1;
}

.action-details[open] > summary::after {
  content: '\2013';
}

.action-card__body {
  margin-top: var(--s3);
}

.action-card__body > * + * {
  margin-top: var(--s3);
}

.action-card__title {
  font-size: var(--text-h3);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--leading-snug);
  text-align: left;
  margin: 0;
}

/* Links remain legible against the bright pink fill. */
.action-card a {
  color: var(--band-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.action-card a:hover {
  color: var(--pink-deep);
}

.action-card a:focus-visible {
  outline-color: var(--band-ink);
}

/* Sits under the grid, back at the reading measure - a closing note, not a
   fifth card. */
.action-contact {
  width: min(100%, var(--measure));
  margin: var(--s6) auto 0;
  text-align: left;
}

.action-contact > * + * {
  margin-top: var(--s3);
}

.action-contact__title {
  font-size: var(--text-h3);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--leading-snug);
  text-align: left;
  margin: 0;
}

.partner-logos h2 {
  margin-bottom: var(--s5);
}

.partner-logos ul {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(0.5rem, 2vw, 2rem);
  align-items: center;
  list-style: none;
}

.partner-logos li {
  display: grid;
  place-items: center;
  aspect-ratio: 2 / 1;
}

.partner-logos img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.story-final__body img {
  width: min(100%, 18rem);
  margin: var(--s0) var(--s4) var(--s3) 0;
}

.story-final__body > * + * {
  margin-top: var(--s4);
}

@media (min-width: 48rem) {
  .story-final__body img {
    float: left;
  }
}

/* Narrow screens: the two columns become one, but the illustration keeps the
   behaviour it has on wide screens - it pins to the top of the viewport while
   the paragraphs scroll over it. The image is fitted to the screen rather than
   cropped: width fills the column, height is capped just under two thirds of the
   viewport, and whichever limit bites first decides the size - so a portrait
   illustration stays inside the screen and a landscape one still fills it. */
@media (max-width: 47.99rem) {
  .story--scrollytelling > h1 {
    margin-bottom: var(--s6);
  }

  .story--scrollytelling > * + * {
    margin-top: var(--s6);
  }

  .story-step {
    display: block;
    isolation: isolate;
    min-height: 0;
  }

  /* Only the illustration pins. The step heading is dropped out of the sticky
     box (display: contents) so it scrolls away like any other heading instead
     of being sliced in half by the first paragraph passing over it. */
  .story-step__side {
    display: contents;
  }

  .story--scrollytelling .story-step__side h2 {
    margin: 0 0 var(--s3);
  }

  .story-step__visual {
    position: sticky;
    top: var(--s3);
    z-index: 0;
    display: block;
    min-height: 0;
    padding: 0;
  }

  .story-step__visual img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 62svh;
    margin-inline: auto;
  }

  .story-step__content {
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: var(--s4);
  }

  /* Each paragraph is its own opaque card, so text passing over the pinned
     illustration stays readable. The box-shadow is the paper colour: it feathers
     the edge of the card instead of cutting the illustration off hard. */
  .story-step__content > * {
    background: var(--paper);
    box-shadow: 0 -6px 5px 10px var(--paper), 0 6px 5px 10px var(--paper);
  }

  /* The gap has to outrun the illustration's own height, or a card is always
     covering it: at 78svh against a 62svh image there is a stretch of scrolling
     between every two paragraphs where the illustration stands alone. */
  .story-step__content > * + * {
    margin-top: clamp(6rem, 78svh, 30rem);
  }

  .story-step--text-only .story-step__content {
    margin-left: 0;
  }

  .story-final__body img {
    margin-right: 0;
  }

}

/* --------------------------------------------------------------------------
   Contact form
   -------------------------------------------------------------------------- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  width: min(100%, var(--measure));
  margin-inline: auto;
  text-align: left;
}

.contact-form label {
  display: block;
  margin-bottom: var(--s1);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.label-optional {
  color: var(--ink-faint);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

.contact-form input[type='text'],
.contact-form input[type='email'],
.contact-form textarea {
  width: 100%;
  background: var(--paper-sunk);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--text-base);
  line-height: 1.4;
  padding: 0.7em 0.85em;
  border-radius: 0;
}

.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  border-color: var(--pink);
  outline: 3px solid var(--pink);
  outline-offset: 1px;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--ink-faint);
}

.contact-form textarea {
  resize: vertical;
  min-height: 9rem;
}

.field-hint {
  display: block;
  margin-top: var(--s1);
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.captcha-status {
  display: inline-block;
  padding: 0.35em 0.75em;
  border: 1px solid var(--line);
  background: var(--paper-sunk);
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.captcha-status.verified {
  border-color: var(--ok-line);
  background: var(--ok-bg);
  color: var(--ok-ink);
  font-weight: 700;
}

.captcha-status.failed {
  border-color: var(--pink);
  background: var(--err-bg);
  color: var(--err-ink);
  font-weight: 700;
}

.contact-form .button {
  align-self: flex-start;
}

.form-status {
  display: none;
  font-size: var(--text-sm);
  font-weight: 700;
  padding: var(--s2) var(--s3);
  border: 2px solid;
}

.form-status.success {
  background: var(--ok-bg);
  border-color: var(--ok-line);
  color: var(--ok-ink);
}

.form-status.error {
  background: var(--err-bg);
  border-color: var(--pink);
  color: var(--err-ink);
}

/* Honeypot - off-screen rather than display:none so bots still fill it in. */
.hp-field {
  position: absolute;
  left: -9999px;
  top: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding-block: var(--s5);
  color: var(--ink-faint);
  font-size: var(--text-xs);
}

.site-footer__nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s3) var(--s5);
  list-style: none;
  margin-top: var(--s5);
}

.site-footer a {
  color: inherit;
  text-decoration-color: var(--line);
}

.site-footer a:hover {
  color: var(--pink);
}

/* --------------------------------------------------------------------------
   Narrow screens
   -------------------------------------------------------------------------- */
@media (max-width: 34rem) {
  .site-nav {
    gap: var(--s3);
  }

  .contact-form .button {
    align-self: stretch;
  }

  .map-caption .wrap {
    display: block;
  }

  .map-source {
    margin-top: var(--s2);
  }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */
@media print {
  :root {
    --paper: #fff;
    --ink: #000;
    --ink-soft: #333;
    --pink: #000;
  }

  .site-header {
    background: none;
    border-bottom: 1px solid #000;
  }

  /* Tagline and lead are yellow/white on pink on screen; the pink background
     is dropped for print, so both need ink. Same for the ink CTA band. */
  .site-header .tagline,
  .site-header .lead,
  .cta-band,
  .cta-band .lead {
    color: #000;
  }

  .site-nav,
  .contact-form,
  .map-frame {
    display: none;
  }

  .story,
  .prose {
    width: 100%;
  }

  a::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    word-break: break-all;
  }
}

/* --------------------------------------------------------------------------
   FAQ accordion

   The FAQ closes out the info story. Questions are <h4> there, which carries no
   type of its own, so .faq-q sets it.
   -------------------------------------------------------------------------- */

#faq h3 {
  color: var(--pink);
  text-align: center;
}

.faq-item {
  border-bottom: 1px solid var(--line);
}

.story .faq-item + .faq-item {
  margin-top: 0;
}

.faq-item > summary {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s2) 0;
  cursor: pointer;
  list-style: none;
}

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

.faq-item > summary::after {
  content: '+';
  margin-left: auto;
  flex: none;
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1;
  color: var(--pink);
}

.faq-item[open] > summary::after {
  content: '\2013';
}

.faq-item > summary:hover .faq-q,
.faq-item > summary:focus-visible .faq-q {
  color: var(--pink);
}

.faq-q {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: 0;
  text-wrap: balance;
}

.story .faq-q {
  margin-top: 0;
}

.faq-answer {
  padding-bottom: var(--s3);
}

.faq-answer > * + * {
  margin-top: var(--s3);
}

@media print {
  .faq-item > summary::after,
  .action-details > summary::after {
    content: none;
  }

  .faq-item > .faq-answer,
  .action-details > .action-card__body {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   About and donation pages

   Neither page has photographs to carry it, so the visual interest comes from
   the poster vocabulary the rest of the site already uses: hard 2px ink rules,
   offset colour shadows instead of blur, and Archivo Black at display sizes.
   -------------------------------------------------------------------------- */
/* The Kollektiv's own mark, used on the About page as the page's identity — it
   is the subject of the page, not site furniture, so it is sized to read as an
   image rather than as a second header logo. */
.about-mark {
  display: block;
  width: min(100%, 20rem);
  height: auto;
  margin: var(--s5) auto var(--s4);
}

/* Explicit 1-up / 3-up rather than auto-fit: with exactly three cards, auto-fit
   spends the 52rem-and-below range on a 2+1 layout that strands the last card
   across the full width. */
.mission-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s4);
  margin-top: var(--s6);
  list-style: none;
}

@media (min-width: 52rem) {
  .mission-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* The offset sits inside the grid gap, so the shadow never overlaps the
   neighbouring card. */
.mission-card {
  background: var(--paper-sunk);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--yellow);
  padding: var(--s4);
}

.mission-card > * + * {
  margin-top: var(--s2);
}

.mission-card__num {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2vw, 3rem);
  line-height: 1;
  color: var(--pink-hot);
}

.mission-card__title {
  font-size: var(--text-h3);
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: 0;
  line-height: var(--leading-snug);
  text-align: left;
  margin: 0;
}

/* Full-bleed bands. Shared geometry; the colour is set per band so two of them
   on one page do not read as the same object. */
.quote-band,
.cta-band {
  border-block: 4px solid var(--ink);
  padding-block: var(--s6);
}

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

.pull-quote {
  width: min(100%, 44rem);
  margin-inline: auto;
  text-align: center;
}

.pull-quote p {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.15rem + 1.9vw, 2.85rem);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.pull-quote cite {
  display: block;
  margin-top: var(--s4);
  font-style: normal;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--band-ink-soft);
}

/* Ink, not a second yellow: the ask is the end of the page and should not look
   like the pull quote it follows. Pink rules tie it back to the header. */
.cta-band {
  background: var(--ink);
  color: var(--paper);
  border-block-color: var(--pink-hot);
  text-align: center;
}

.cta-band .lead {
  color: #d8d2c6;
}

/* The default hover swaps the button to ink, which would vanish here. */
.cta-band .button:hover {
  background: var(--paper);
  color: var(--ink);
}