/* ==========================================================================
   GESDA — Anticipation Games / Simulations landing page · v2
   Surface class A (landing page), light theme with a dark hero; no
   analytical claim, so §3.3, §10.8 and §15 are not binding.
   Tokens live in tokens.css (designv2.1, approved 2026-09-02).
   NOTE: §4.1 requires self-hosted fonts. This build links Google Fonts for
   prototyping only — swap for self-hosted DM Sans + Space Grotesk before
   production (GDPR/nLPD).
   ========================================================================== */

/* --------------------------------------------------------------- reset -- */

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--body);
  font: 400 1rem/1.6 var(--font-body);
  -webkit-font-smoothing: antialiased;
}

/* height:auto neutralises the HTML height attribute, which would otherwise
   pin a definite height and defeat any aspect-ratio set in CSS. */
img { max-width: 100%; height: auto; display: block; }

[hidden] { display: none !important; }

h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }

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

a { color: var(--action); text-decoration: none; }
a:hover { color: var(--action-hover); }

:focus-visible { outline: 2px solid var(--action); outline-offset: 3px; border-radius: var(--radius-sm); }
.hero :focus-visible,
.site-footer :focus-visible { outline-color: var(--purple-300); }

.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: var(--space-4); top: -100px; z-index: 100;
  padding: var(--space-3) var(--space-6); background: var(--action);
  color: var(--on-action); border-radius: var(--radius-pill); font-weight: 600;
}
.skip-link:focus { top: var(--space-4); color: var(--on-action); }

/* The open-item marker: anything still to be supplied is marked rather than
   quietly filled in. Soft tone on dark, per the tone rule. */
.todo {
  border-bottom: 2px dotted var(--color-warning);
  color: var(--color-warning);
  font-weight: 600;
  cursor: help;
}
.hero .todo { color: var(--p4-orange); border-bottom-color: var(--p4-orange); }

/* ----------------------------------------------------------- type roles -- */

.eyebrow {
  font: 600 0.6875rem/1.2 var(--font-accent);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--action);
}
.hero .eyebrow { color: var(--purple-300); }

.display {
  font: 700 clamp(2.5rem, 5vw, 4rem)/1.05 var(--font-display);
  letter-spacing: -0.02em;
}

.h1 { font: 700 clamp(2rem, 3.5vw, 2.75rem)/1.1 var(--font-display); letter-spacing: -0.02em; }
.h2 { font: 600 clamp(1.5rem, 2.5vw, 1.875rem)/1.2 var(--font-display); letter-spacing: -0.015em; }
.h3 { font: 600 clamp(1.25rem, 1.8vw, 1.5rem)/1.3 var(--font-display); letter-spacing: -0.01em; }
.h4 { font: 600 1.125rem/1.4 var(--font-display); }

.lead { font: 400 1.125rem/1.65 var(--font-display); }
.body-sm { font: 400 0.875rem/1.5 var(--font-display); }
.caption { font: 400 0.8125rem/1.45 var(--font-display); color: var(--muted); }
.measure { max-width: 65ch; }

/* ------------------------------------------------------------- buttons -- */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 14px 28px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  font: 600 1rem/1.2 var(--font-display); cursor: pointer;
  transition: background-color var(--motion-fast), color var(--motion-fast), border-color var(--motion-fast);
}
.btn--primary { background: var(--action); color: var(--on-action); }
.btn--primary:hover { background: var(--action-hover); color: var(--on-action); }
.btn--primary:active { background: var(--action-active); }

.btn--onDark { background: #FFFFFF; color: var(--purple-900); }
.btn--onDark:hover { background: var(--purple-050); color: var(--purple-900); }

.btn--ghostDark { color: var(--ink-on-dark); border-color: rgba(247, 242, 253, 0.4); }
.btn--ghostDark:hover { color: #FFFFFF; border-color: #FFFFFF; }

.btn--secondary { color: var(--action); border-color: var(--action); }
.btn--secondary:hover { background: var(--purple-050); color: var(--action-hover); }

/* The arrow after a label that says the link leaves the page, after
   experiences-page/v5 (base.css). .btn__end keeps it on the last word's line. */
.btn__offsite {
  width: 10px; height: 10px; margin-left: var(--space-2);
  fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round;
}
.btn__end { white-space: nowrap; }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }

/* -------------------------------------------------------------- header -- */

.site-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h);
  display: flex; align-items: center; gap: var(--space-6);
  /* inline padding tracks the band gutter + centred .container edge */
  padding: 0 max(var(--space-6), calc((100% - var(--container)) / 2));
  background: #FFFFFF;
  border-bottom: 1px solid var(--hairline-soft);
  transition: box-shadow var(--motion-fast);
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }

.logo { display: inline-flex; align-items: center; margin-right: auto; }
.logo__img { height: 34px; width: auto; }
/* header logo matches the experiences v5 topbar */
.site-header .logo__img { height: 52px; }
@media (max-width: 1023px) { .site-header .logo__img { height: 44px; } }

@media (max-width: 767px) {
  .logo__img { height: 28px; }
}

.nav { display: flex; align-items: center; gap: var(--space-8); }
.nav a {
  font: 500 1rem/1.2 var(--font-display); color: var(--purple-900);
  padding: var(--space-2) 0; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--action); }
.nav a[aria-current="true"] { color: var(--action); border-bottom-color: var(--action); }

.header__cta { margin-left: var(--space-6); }

/* The full bar: the links centred in the space between the logo and the
   CTA, as in the experiences v5 topbar. */
@media (min-width: 1024px) {
  .nav { flex: 1; justify-content: center; }
  .header__cta { margin-left: 0; }   /* the bar's own gap, so both sides match */
}

.nav-toggle {
  display: none; width: 44px; height: 44px;
  background: none; border: 1px solid var(--hairline); border-radius: var(--radius-sm);
  color: var(--purple-900); font: 500 1.25rem/1 var(--font-accent); cursor: pointer;
}

@media (max-width: 1023px) {
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .header__cta { display: none; }
  .nav {
    position: absolute; inset: var(--header-h) 0 auto 0;
    flex-direction: column; align-items: stretch; gap: 0;
    padding: var(--space-4) var(--space-6) var(--space-6);
    background: #FFFFFF; border-bottom: 1px solid var(--hairline);
    box-shadow: var(--shadow-md);
  }
  .nav a { padding: var(--space-4) 0; border-bottom: 1px solid var(--hairline-soft); }
  .nav a[aria-current="true"] { border-bottom-color: var(--hairline-soft); }
}

/* --------------------------------------------------------------- bands -- */

.band { padding: var(--space-section) var(--space-6); }

.band--tinted { background: var(--canvas-tinted); }

.band--dark {
  background: var(--canvas-dark);
  background-image:
    linear-gradient(rgba(247, 242, 253, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(247, 242, 253, 0.08) 1px, transparent 1px);
  background-size: 64px 64px;
  color: var(--body-on-dark);
  /* room for the .band--lift overlap of the section below */
  padding-bottom: calc(var(--space-section) + 24px);
}
.band--dark .h1, .band--dark .h2, .band--dark .h3 { color: var(--ink-on-dark); }
.band--dark .eyebrow { color: var(--purple-300); }
.band--dark .todo { color: var(--p4-orange); border-bottom-color: var(--p4-orange); }
.band--dark :focus-visible { outline-color: var(--purple-300); }

/* §6.2 — a light band lifting off a dark one */
.band--lift {
  position: relative;
  margin-top: -24px;
  background: var(--canvas);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

.container { width: 100%; max-width: var(--container); margin-inline: auto; }
@media (min-width: 1440px) { .band, .hero, .site-footer { padding-inline: var(--space-12); } }

.section-head { display: flex; flex-direction: column; gap: var(--space-4); max-width: 760px; }

.split { display: grid; grid-template-columns: 5fr 7fr; gap: var(--space-16); }

@media (max-width: 899px) {
  .split { grid-template-columns: 1fr; gap: var(--space-8); }
}

.stack-4 { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-6 { display: flex; flex-direction: column; gap: var(--space-6); }
.stack-8 { display: flex; flex-direction: column; gap: var(--space-8); }
.stack-12 { display: flex; flex-direction: column; gap: var(--space-12); }

/* ---------------------------------------------------------------- hero -- */

.hero {
  padding: var(--space-16) var(--space-6) calc(var(--space-16) + 24px);
  background: var(--purple-900);
  background-image:
    radial-gradient(ellipse 60% 70% at 15% 20%, rgba(83, 9, 130, 0.9) 0%, rgba(83, 9, 130, 0) 70%),
    radial-gradient(ellipse 50% 60% at 90% 90%, rgba(0, 111, 95, 0.55) 0%, rgba(0, 111, 95, 0) 70%);
  color: var(--body-on-dark);
  position: relative;
  overflow: hidden;
}
.hero__ring {
  position: absolute; right: -120px; top: -60px;
  width: 620px; height: 620px; border-radius: 50%;
  border: 2px dotted rgba(247, 242, 253, 0.18);
  pointer-events: none;
}
.hero .container { position: relative; }
/* v2: the video takes the wider column, a step larger than the Portal's
   (7fr / 6fr there, copy first) */
.hero__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); gap: var(--space-12); align-items: center; }
.hero h1 { color: var(--ink-on-dark); }
.hero .lead { color: var(--purple-100); max-width: 60ch; }
.hero__note { color: var(--purple-300); }

.hero__media { display: flex; flex-direction: column; gap: var(--space-3); }
.hero__caption { font: 400 0.8125rem/1.45 var(--font-display); color: var(--purple-300); text-align: center; }

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: 1fr; gap: var(--space-8); align-items: start; }
  .hero__ring { width: 380px; height: 380px; right: -140px; }
}

/* Click-to-load video, after Portal/: the poster shows first; the trailer
   loads only on request. */
.video {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--radius-md); border: 1px solid var(--hairline-on-dark);
  background: var(--purple-900);
}
.video-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.video-play:focus-visible { outline: 3px solid var(--purple-300); outline-offset: -4px; border-radius: var(--radius-md); }
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0%; }   /* keep the faces in frame */
.video-wash { position: absolute; inset: 0; background: var(--color-photo-wash); transition: opacity var(--motion-fast); }
.video-play:hover .video-wash, .video-play:focus-visible .video-wash { opacity: 0.5; }
.video-play-ring {
  position: absolute; left: 50%; top: 50%; width: 72px; height: 72px; margin: -36px 0 0 -36px;
  display: grid; place-items: center; border-radius: var(--radius-full);
  background: var(--color-white); color: var(--purple-900);
  transition: transform var(--motion-fast);
}
.video-play:hover .video-play-ring, .video-play:focus-visible .video-play-ring { transform: scale(1.06); }
.video-play:active .video-play-ring { transform: scale(0.98); }
.video-play-ring svg { width: 26px; height: 26px; margin-left: 4px; }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: var(--purple-900); }
.video noscript { position: absolute; left: var(--space-4); bottom: var(--space-4); }
.video noscript a { color: var(--purple-050); text-decoration: underline; }

/* --------------------------------------------------------------- proof -- */

.metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
}
.metrics > div { padding: var(--space-8) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); }
.metrics > div + div { border-left: 1px solid var(--hairline); }
.metrics > div:first-child { padding-left: 0; }
.metric__value { font: 600 3rem/1 var(--font-accent); color: var(--ink); }
.metric__label { color: var(--muted); }

/* The numbers band: the Game at a glance (four), then its reach (three).
   The two rows share the hairline between them. */
.metrics--4 { grid-template-columns: repeat(4, 1fr); }
.metrics + .metrics { border-top: 0; }

@media (max-width: 767px) {
  .metrics { grid-template-columns: 1fr; }
  .metrics > div { padding-inline: 0; }
  .metrics > div + div { border-left: 0; border-top: 1px solid var(--hairline); }
  /* phones show only the reach, centred: the four Game facts drop out
     (they stay in the HTML) */
  .metrics--4 { display: none; }
  .metrics + .metrics { border-top: 1px solid var(--hairline); }
  .metrics > div { align-items: center; text-align: center; }
}

.quote p { font: 600 clamp(1.375rem, 2.6vw, 2rem)/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--ink); }
.quote figcaption { margin-top: var(--space-4); }

/* Voices: a vertical photograph on the left; on the right the quote and its
   author on top, the three takeaways along the bottom, level with the
   photograph's lower edge. Photograph, quote and author change together.

   Recorded exception, requested by the client (as for the Highlights
   slideshow): §8.1 "nothing auto-plays". The voices advance on their own;
   the loop holds on hover, on keyboard focus and while off screen, and
   under reduced motion it never starts. Flagged for the §19 review.

   Static (no JS): the first photograph shows and every quote is listed. */
.voices {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: var(--space-12);
}
.voices__photos {
  /* width pinned so a taller right column stretches the photograph down
     rather than letting the ratio widen it */
  position: relative; align-self: stretch;
  width: 100%; aspect-ratio: 4 / 5; overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--canvas-tinted);
}
.voices__photo {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
}
.voices__photo:first-child { opacity: 1; }
/* §14.2: a purple-ramp wash, deepest towards the lower right */
.voices__photos::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(200deg, transparent 40%, var(--color-photo-tint) 100%);
  pointer-events: none;
}

.voices__side { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-12); }
.voices__quotes { display: grid; gap: var(--space-8); }

/* Live: one quote at a time in a single cell; out, then in. */
.voices.is-live .voices__quotes { gap: 0; }
.voices.is-live .voices__quote {
  grid-area: 1 / 1;
  opacity: 0; visibility: hidden;
  transition: opacity 260ms ease, visibility 0s 260ms;
}
.voices.is-live .voices__quote.is-on {
  opacity: 1; visibility: visible;
  transition: opacity var(--motion-slow) 260ms, visibility 0s 260ms;
}
.voices.is-live .voices__photo { opacity: 0; transition: opacity var(--motion-slow); }
.voices.is-live .voices__photo.is-on { opacity: 1; }

/* The pills, as the Highlights slideshow's: 44px targets, pill drawn inside */
.voices__nav { display: none; }
.voices.is-live .voices__nav { display: block; margin-bottom: var(--space-4); }
.voices__dots { display: flex; align-items: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.voices__dots button {
  position: relative; display: block;
  width: 26px; height: 44px; padding: 0;
  border: 0; background: none; cursor: pointer;
  transition: width var(--motion-medium);
}
.voices__dots button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%;
  height: 6px; margin-top: -3px;
  border-radius: var(--radius-pill);
  background: var(--purple-100);
  transition: background-color var(--motion-fast);
}
.voices__dots button:hover::before  { background: var(--purple-300); }
.voices__dots button:active::before { background: var(--action-active); }
.voices__dots button:focus-visible { outline: 3px solid var(--action); outline-offset: 2px; border-radius: var(--radius-sm); }
.voices__dots li.is-active button { width: 44px; }
.voices__dots li.is-active button::before { background: var(--action); }

/* The three takeaways, narrower than the old full-width row: compact cards
   (§5.4), so one radius step down. */
.cards--compact { gap: var(--space-4); }
.cards--compact .card { padding: var(--space-6); gap: var(--space-3); border-radius: var(--radius-md); }

@media (max-width: 1023px) {
  .voices { gap: var(--space-8); }
  .voices .cards--compact { grid-template-columns: 1fr; }
}
@media (max-width: 899px) {
  /* one column: the quote and its author first, then the photograph, then
     the takeaways (the side column's two parts join the grid) */
  .voices { grid-template-columns: 1fr; }
  .voices__side { display: contents; }
  .voices__side > :first-child { order: -1; }
  .voices__photos { width: 100%; max-width: 440px; }
  .voices .cards--compact { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 599px) {
  .voices .cards--compact { grid-template-columns: 1fr; }
}

/* -------------------------------------------------------------- payoff -- */

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6); }
.card {
  display: flex; flex-direction: column; gap: var(--space-4);
  padding: var(--space-8);
  background: var(--canvas); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.card__index { font: 500 0.875rem/1.3 var(--font-accent); color: var(--muted); }
@media (max-width: 899px) { .cards { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------- window -- */

.pullquote {
  padding: var(--space-8);
  border-left: 4px solid var(--action);
  background: var(--canvas-tinted);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  font: 500 1.125rem/1.5 var(--font-display); color: var(--ink);
  max-width: 65ch;
}

/* -------------------------------------------------------------- offers -- */

/* Four cards on the dark band. Each card is a subgrid over the same five
   rows (head, three criteria, button), so the criteria line up across the
   cards and read as one comparison. Two by two below 1200px, where four
   across gets too narrow; below 900px the cards stack and each stands on
   its own, labels included. */
/* the title runs on one line across the cards, not the 760px head width,
   centred over them */
#offers .section-head { max-width: none }

.offers {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: auto; column-gap: var(--space-6); row-gap: 0;
}
.offer {
  grid-row: span 5;
  display: grid; grid-template-rows: subgrid; row-gap: 0;
  padding: var(--space-6);
  background: var(--purple-800);
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-lg);
}
.offer--full { border-color: var(--purple-300); }

.offer__head { display: flex; flex-direction: column; gap: var(--space-3); padding-bottom: var(--space-6); }
.offer__kind {
  font: 600 0.6875rem/1.2 var(--font-accent); letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--purple-300);
}
.offer__price { font: 600 1.5rem/1.2 var(--font-accent); color: var(--ink-on-dark); }
.offer__price > span { display: block; margin-top: var(--space-2); font: 400 0.8125rem/1.45 var(--font-display); color: var(--muted-on-dark); }
.offer__lead { color: var(--body-on-dark); }

.offer__terms { grid-row: span 3; display: grid; grid-template-rows: subgrid; row-gap: 0; padding-bottom: var(--space-6); }
.offer__terms > div {
  display: flex; flex-direction: column; gap: var(--space-1);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--hairline-on-dark);
}
.offer__terms dt { font: 600 0.6875rem/1.3 var(--font-accent); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-on-dark); }
.offer__terms dd { font: 400 0.9375rem/1.45 var(--font-display); color: var(--ink-on-dark); }

.offer__note {
  padding: var(--space-4) 0 var(--space-6);
  border-top: 1px solid var(--hairline-on-dark);
  font: 400 0.875rem/1.5 var(--font-display); color: var(--body-on-dark);
}
.offer__cta { align-self: end; justify-self: start; }

@media (max-width: 1199px) {
  /* a margin, not row-gap: the gap would also open between a card's own
     subgrid rows */
  .offers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer { margin-bottom: var(--space-6); padding: var(--space-8); }
}
@media (max-width: 899px) {
  .offers { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .offer { grid-row: auto; display: flex; flex-direction: column; }
  .offer__terms { display: block; }
  .offer__cta { align-self: flex-start; }
}

/* ----------------------------------------------------------------- faq -- */

.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--space-8); border-top: 1px solid var(--hairline); }
.faq details { border-bottom: 1px solid var(--hairline); }
.faq summary {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4);
  padding: var(--space-4) 0; cursor: pointer; list-style: none;
  font: 600 1rem/1.4 var(--font-display); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font: 500 1.25rem/1 var(--font-accent); color: var(--action); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { padding: 0 0 var(--space-4); font: 400 0.875rem/1.55 var(--font-display); max-width: 65ch; }

@media (max-width: 899px) { .faq { grid-template-columns: 1fr; } }

.cta-panel {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--space-6); padding: var(--space-8);
  background: var(--canvas); border: 1px solid var(--hairline-soft);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.cta-panel p { max-width: 52ch; }

/* -------------------------------------------------------------- footer -- */
/* The experiences-page/v5 footer (sections/footer.css), on this page's
   token names. Unlike there, it keeps its top padding: the band above is
   white, not purple-900. */

.site-footer { padding: var(--space-16) var(--space-6); background: var(--canvas-dark); color: var(--body-on-dark); }
.site-footer__grid {
  display: grid; gap: var(--space-12) var(--space-16); align-items: center;
  grid-template-columns: minmax(0, 1fr) auto;
}
.site-footer__brand img { display: block; height: calc(var(--space-12) * 1.3); width: auto; max-width: 100%; }
.site-footer__funders { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6) var(--space-8); margin-left: auto; }
/* Heights are set per mark so the three read at an even visual size: the
   wide Confederation lockup sits lower, the stacked Canton emblem taller. */
.site-footer__funders img { display: block; width: auto; max-width: 100%; }
.site-footer__funders .site-footer__swiss  { height: calc(var(--space-8) + var(--space-2)); }
.site-footer__funders .site-footer__canton { height: var(--space-16); }
.site-footer__funders .site-footer__ville  { height: var(--space-16); }
.site-footer__group h3 { margin: 0 0 var(--space-3); font: 600 var(--type-h4) / 1.4 var(--font-body); color: var(--ink-on-dark); }
.site-footer__group ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--space-2); }
.site-footer__group a,
.site-footer__legal a {
  color: var(--muted-on-dark);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: color var(--motion-fast), background-color var(--motion-fast), border-color var(--motion-fast);
}
.site-footer__group a { font: 400 var(--type-body-sm) / 1.5 var(--font-body); }
.site-footer__group a:hover,
.site-footer__legal a:hover  { color: var(--ink-on-dark); text-decoration: underline; }
.site-footer__group a:active,
.site-footer__legal a:active { color: var(--purple-100); }
.site-footer__group a:focus-visible,
.site-footer__legal a:focus-visible { outline: 3px solid var(--purple-300); outline-offset: 2px; }

.site-footer__group .site-footer__social { flex-direction: row; gap: var(--space-3); }
.site-footer__social a {
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--hairline-on-dark);
  border-radius: var(--radius-full);
}
.site-footer__social svg { fill: currentColor; }
.site-footer__social a:hover { text-decoration: none; border-color: var(--muted-on-dark); background: var(--wash-on-dark); }
.site-footer__social a:active { background: var(--wash-on-dark-strong); }

.site-footer__legal {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-6);
  margin-top: var(--space-12); padding-top: var(--space-6);
  border-top: 1px solid var(--hairline-on-dark);
}
.site-footer__legal p,
.site-footer__legal a { margin: 0; font: 400 var(--type-caption) / 1.45 var(--font-body); color: var(--muted-on-dark); }
.site-footer__legal ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-6); }

/* Stacked, everything centred. */
@media (max-width: 979px) {
  .site-footer__grid { grid-template-columns: 1fr; gap: var(--space-12); justify-items: center; text-align: center; }
  .site-footer__group .site-footer__social { justify-content: center; }
  .site-footer__legal { flex-direction: column; text-align: center; }
  .site-footer__legal ul { justify-content: center; }
  .site-footer__funders { margin-left: 0; justify-content: center; }
}

/* ------------------------------------------------------------- reveal -- */

.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1), transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
  .reveal { opacity: 1; transform: none; }
}