/* ==========================================================================
   GEN20 — G20 Model Summit

   Structure, spacing and typography follow the "Augen Pro" system in
   DESIGN.md: off-white canvas, hairline borders, weight-350 type, no shadows,
   1200px measure, generous vertical rhythm.

   Colour departs from it deliberately. DESIGN.md specifies a monochrome page
   with one blue accent; the summit's own crest is navy, cream-gold and cyan,
   so those are used as the brand layer. Blue remains the interactive colour.

   Documented departures, each marked in place:
     1. Display type above the 27px ceiling, for the hero.
     2. Photography, which DESIGN.md excludes entirely.
     3. Navy and gold as brand colour, per the crest.
   ========================================================================== */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 600;
  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+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: 300 600;
  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+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Neutrals — from DESIGN.md */
  --color-off-black:   #0f1012;
  --color-pure-black:  #020201;
  --color-off-white:   #f2f2f4;
  --color-pure-white:  #fdfdfd;
  --color-steel-gray:  #5e5e5e;
  --color-ash-gray:    #8f8f8f;
  --color-signal-blue: #0071e3;

  /* Brand — sampled from the summit crest */
  --color-navy:       #222E73;
  --color-navy-deep:  #12173A;
  --color-gold:       #F5E7C4;
  --color-gold-dim:   #D8C28C;
  --color-cyan:       #BFEFF8;

  /* Surfaces */
  --surface-canvas:   #f2f2f4;
  --surface-elevated: #fdfdfd;
  --surface-dark:     #12173A;
  --surface-navy:     #222E73;

  /* Borders — hairlines only */
  --hairline:        0.5px solid rgba(0, 0, 0, 0.06);
  --hairline-strong: 1px solid rgba(0, 0, 0, 0.10);
  --hairline-light:  0.5px solid rgba(253, 253, 253, 0.16);
  --hairline-gold:   0.5px solid rgba(245, 231, 196, 0.34);

  /* Typography — one sans family throughout. Figures that need to carry
     (countdown, stats, rating, step numbers) use weight 600 rather than a
     second typeface, so they read as emphatic rather than decorative. */
  --font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system,
                BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  --text-caption:    10px;
  --text-small:      12px;
  --text-label:      13px;
  --text-body:       16px;
  --text-subheading: 18px;
  --text-heading:    27px;
  /* Departure 1 — the hero has to carry a full viewport, and the summit name
     is the one thing a visitor must register instantly. */
  --text-display:    clamp(54px, 10vw, 132px);
  --text-hero-lede:  clamp(19px, 2.1vw, 27px);
  --text-hero-meta:  clamp(16px, 1.35vw, 19px);
  --text-statement:  clamp(27px, 3.6vw, 46px);

  --weight-book:     350;
  --weight-regular:  400;
  --weight-semibold: 600;
  --tracking:       -0.02em;

  /* Spacing */
  --space-4: 4px;    --space-6: 6px;    --space-10: 10px;
  --space-11: 11px;  --space-16: 16px;  --space-22: 22px;
  --space-30: 30px;  --space-34: 34px;  --space-50: 50px;
  --space-69: 69px;  --space-94: 94px;  --space-130: 130px;

  /* Layout */
  --page-max-width: 1200px;
  --section-gap:    94px;
  --card-padding:   50px;
  --gutter:         30px;

  /* Radii */
  --radius-hairline: 1.8px;
  --radius-nav:      10px;
  --radius-media:    22px;
  --radius-button:   26px;
  --radius-card:     40px;
  --radius-body:     54px;
  --radius-pill:     9999px;
}

/* --------------------------------------------------------------------------
   Reset & base
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 104px;   /* clears the fixed nav pill on anchor jumps */
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--surface-canvas);
  color: var(--color-off-black);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  font-weight: var(--weight-book);
  line-height: 1.2;
  letter-spacing: var(--tracking);
  font-feature-settings: 'ss01' on, 'ss02' on, 'cv01' on, 'cv11' on;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }

/* Never above 400 — bold breaks the whisper-weight system. */
strong, b { font-weight: var(--weight-regular); }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 1px solid var(--color-signal-blue);
  outline-offset: 3px;
  border-radius: var(--radius-hairline);
}

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

.skip-link {
  position: absolute; top: -100px; left: var(--space-22); z-index: 100;
  background: var(--surface-elevated); color: var(--color-off-black);
  padding: var(--space-11) var(--space-22);
  border: var(--hairline-strong); border-radius: var(--radius-nav);
  font-size: var(--text-label);
}
.skip-link:focus { top: var(--space-22); }

/* --------------------------------------------------------------------------
   Layout primitives
   -------------------------------------------------------------------------- */

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

.section { padding-block: var(--section-gap); }
.section--tight { padding-block: calc(var(--section-gap) * 0.6); }
.section--elevated { background: var(--surface-elevated); }
.section--dark { background: var(--surface-dark); color: var(--color-pure-white); }

.section-label {
  font-size: var(--text-small);
  color: var(--color-ash-gray);
  margin-bottom: var(--space-10);
}
.section--dark .section-label { color: var(--color-gold-dim); }

.section-title {
  font-size: var(--text-heading);
  font-weight: var(--weight-book);
  line-height: 1.2;
  max-width: 22ch;
}

.section-head { margin-bottom: var(--space-50); }

.section-head--split {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-30);
  flex-wrap: wrap;
}

.lede {
  font-size: var(--text-subheading);
  color: var(--color-steel-gray);
  line-height: 1.45;
  max-width: 62ch;
}
.section--dark .lede { color: rgba(253, 253, 253, 0.72); }

.prose p { line-height: 1.55; color: var(--color-steel-gray); max-width: 68ch; }
.prose p + p { margin-top: var(--space-22); }

.statement {
  font-size: var(--text-statement);
  font-weight: var(--weight-book);
  line-height: 1.15;
  max-width: 22ch;
}

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

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Without JS, nothing should stay invisible. */
.no-js .reveal { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Interactive elements
   Signal blue stays a wireframe: text and borders only, never a fill.
   -------------------------------------------------------------------------- */

.link {
  color: var(--color-signal-blue);
  border-bottom: 0.5px solid transparent;
  transition: border-color 0.18s ease;
}
.link:hover { border-bottom-color: var(--color-signal-blue); }

.link-ghost { border-bottom: 0.5px solid transparent; }
.link-ghost:hover { border-bottom-color: currentColor; }

.section--dark .link { color: var(--color-cyan); }
.section--dark .link:hover { border-bottom-color: var(--color-cyan); }

.tag {
  display: inline-block;
  border: 0.5px solid var(--color-signal-blue);
  border-radius: var(--radius-pill);
  color: var(--color-signal-blue);
  font-size: var(--text-small);
  padding: 3px var(--space-10);
  white-space: nowrap;
}
.tag--gold { border-color: var(--color-gold-dim); color: var(--color-gold); }
.tag--muted { border-color: rgba(0,0,0,0.14); color: var(--color-steel-gray); }

/* The primary action is a solid fill, not a wash — on a page this long the
   apply button has to be findable at a glance from any scroll position. */
.cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-11);
  background: var(--color-navy);
  color: var(--color-pure-white);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  padding: 17px var(--space-30);
  border-radius: var(--radius-button);
  transition: background-color 0.18s ease, transform 0.18s ease;
}
.cta:hover { background: #2C3A8C; transform: translateY(-1px); }
.cta svg { color: var(--color-gold); flex: none; }

/* On the dark hero the navy fill would disappear, so it inverts to gold. */
.cta--on-dark {
  background: var(--color-gold);
  color: var(--color-navy);
  border: 0;
}
.cta--on-dark:hover { background: #FFF3D6; }
.cta--on-dark svg { color: var(--color-navy); }

/* --------------------------------------------------------------------------
   Navigation
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: var(--space-34);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  width: calc(100% - var(--space-30) * 2);
  max-width: var(--page-max-width);
  display: flex;
  align-items: center;
  gap: var(--space-22);
  padding: var(--space-11) var(--space-22);
  background: rgba(253, 253, 253, 0.86);
  backdrop-filter: saturate(1.6) blur(18px);
  -webkit-backdrop-filter: saturate(1.6) blur(18px);
  border: var(--hairline);
  border-radius: var(--radius-nav);
  transition: opacity 0.3s ease;
}

.nav__brand {
  display: flex;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--text-subheading);
  flex: none;
}
.nav__brand img { display: block; }

.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-22);
  margin-left: auto;
}
.nav__links a { font-size: var(--text-body); }

/* Text toggle, sized for a comfortable tap even though the label is short. */
.nav__toggle {
  display: none;
  margin-left: auto;
  min-width: 44px; min-height: 44px;
  flex: none;
  align-items: center; justify-content: center;
  background: none; border: 0;
  padding: var(--space-11) var(--space-16);
  font: inherit; font-size: var(--text-label); font-weight: var(--weight-semibold);
  color: inherit; cursor: pointer;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  background: var(--surface-dark);
  color: var(--color-pure-white);
  overflow: hidden;
}

.hero__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.6;
}

/* Navy-tinted rather than neutral black, to pick up the crest behind it. */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,
      rgba(18, 23, 58, 0.96) 0%,
      rgba(18, 23, 58, 0.74) 34%,
      rgba(18, 23, 58, 0.30) 64%,
      rgba(18, 23, 58, 0.55) 100%);
}

.hero__inner { position: relative; z-index: 1; width: 100%; padding-block: var(--space-94) var(--space-50); }

.hero__eyebrow {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-11);
  font-size: var(--text-small);
  color: rgba(253, 253, 253, 0.68);
  margin-bottom: var(--space-30);
}

.hero__badge {
  border: 0.5px solid var(--color-gold-dim);
  color: var(--color-gold);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-10);
}

.hero__title {
  font-size: var(--text-display);
  font-weight: var(--weight-book);
  line-height: 0.96;
  letter-spacing: -0.035em;
  max-width: 12ch;
}

.hero__tagline {
  font-size: var(--text-hero-lede);
  color: rgba(253, 253, 253, 0.8);
  margin-top: var(--space-22);
}

.hero__meta {
  display: flex; flex-wrap: wrap;
  gap: var(--space-10) var(--space-22);
  margin-top: var(--space-30);
  font-size: var(--text-hero-meta);
  color: rgba(253, 253, 253, 0.9);
}

.hero__actions {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--space-22);
  margin-top: var(--space-34);
}

.hero__deadline { font-size: var(--text-label); color: rgba(253, 253, 253, 0.6); }

/* --------------------------------------------------------------------------
   Countdown
   -------------------------------------------------------------------------- */

.countdown {
  display: flex;
  gap: var(--space-30);
  margin-top: var(--space-50);
  padding-top: var(--space-30);
  border-top: var(--hairline-gold);
}

.countdown__unit { min-width: 62px; }

.countdown__value {
  font-size: 44px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}

.countdown__label {
  font-size: var(--text-caption);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(253, 253, 253, 0.5);
  margin-top: var(--space-6);
}

.countdown__caption {
  align-self: flex-end;
  font-size: var(--text-body);
  line-height: 1.35;
  color: rgba(253, 253, 253, 0.55);
  padding-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Stats
   -------------------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-30);
  border-block: var(--hairline);
  padding-block: var(--space-50);
}

.stat__value {
  font-size: 48px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-navy);
  font-variant-numeric: tabular-nums;
}
.stat__label { font-size: var(--text-small); color: var(--color-ash-gray); margin-top: var(--space-11); }

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */

.card {
  background: var(--surface-elevated);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--card-padding);
}

.card--media { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.card--media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.card__content { padding: var(--space-34); flex: 1; }

.card__index {
  font-size: var(--text-subheading);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-navy);
  margin-bottom: var(--space-16);
}

.card__title { font-size: var(--text-subheading); font-weight: var(--weight-book); margin-bottom: var(--space-11); }
.card__body  { font-size: var(--text-body); color: var(--color-steel-gray); line-height: 1.55; }

.grid { display: grid; gap: var(--space-30); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* --------------------------------------------------------------------------
   Feature rows — image beside text, alternating
   -------------------------------------------------------------------------- */

.feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-69);
  align-items: center;
}
.feature + .feature { margin-top: var(--space-94); }
.feature--flip .feature__media { order: 2; }

.feature__media {
  border-radius: var(--radius-body);
  overflow: hidden;
  background: rgba(0, 0, 0, 0.04);
}
.feature__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.feature__title { font-size: var(--text-heading); font-weight: var(--weight-book); margin-bottom: var(--space-22); }

/* --------------------------------------------------------------------------
   Timeline
   -------------------------------------------------------------------------- */

.timeline { border-top: var(--hairline); }

.moment {
  display: grid;
  grid-template-columns: 130px minmax(0, 1fr);
  gap: var(--space-30);
  padding-block: var(--space-30);
  border-bottom: var(--hairline);
}

.moment__phase {
  font-size: var(--text-small);
  color: var(--color-navy);
  padding-top: 3px;
}
.moment__title { font-size: var(--text-subheading); margin-bottom: var(--space-10); }
.moment__body  { font-size: var(--text-body); color: var(--color-steel-gray); line-height: 1.55; max-width: 64ch; }

/* --------------------------------------------------------------------------
   Committees
   -------------------------------------------------------------------------- */

/* Each committee is a photograph of its subject under a navy wash, so the
   agenda reads as seven distinct places rather than seven paragraphs. */
.committees {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-22);
}

.panel {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 360px;
  overflow: hidden;
  border-radius: var(--radius-card);
  background: var(--surface-dark);
  color: var(--color-pure-white);
}

/* The seventh has no partner, so it runs the full width. */
.panel--wide { grid-column: 1 / -1; min-height: 300px; }

.panel__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.72;
  transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
}
.panel:hover .panel__media { transform: scale(1.05); opacity: 0.85; }

/* Dense behind the copy, near-clear at the top so the photograph reads. */
.panel::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(18, 23, 58, 0.95) 0%,
    rgba(18, 23, 58, 0.86) 34%,
    rgba(18, 23, 58, 0.42) 72%,
    rgba(18, 23, 58, 0.18) 100%);
}

.panel__body { position: relative; z-index: 1; padding: var(--space-34); width: 100%; }

.panel__num {
  font-size: var(--text-subheading);
  font-weight: var(--weight-semibold);
  letter-spacing: -0.02em;
  color: var(--color-gold);
  margin-bottom: var(--space-11);
}
.panel__name { font-size: var(--text-heading); font-weight: var(--weight-book); line-height: 1.15; margin-bottom: var(--space-11); }
.panel__desc { font-size: var(--text-body); color: rgba(253, 253, 253, 0.74); line-height: 1.5; max-width: 52ch; }
.panel__seats { margin-top: var(--space-22); }

/* --------------------------------------------------------------------------
   Lists
   -------------------------------------------------------------------------- */

.marker-list li {
  position: relative;
  padding-left: var(--space-22);
  color: var(--color-steel-gray);
  line-height: 1.55;
}
.marker-list li + li { margin-top: var(--space-16); }
.marker-list li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 6px; height: 6px;
  border: 0.5px solid var(--color-signal-blue);
  border-radius: var(--radius-pill);
}

.numbered { counter-reset: item; }
.numbered li { counter-increment: item; padding-left: var(--space-34); }
.numbered li::before {
  content: counter(item, decimal-leading-zero);
  border: 0; width: auto; height: auto; top: 0;
  font-size: var(--text-small);
  color: var(--color-signal-blue);
}

/* --------------------------------------------------------------------------
   Full-bleed photographic bands (departure 2)
   -------------------------------------------------------------------------- */

.band {
  position: relative;
  min-height: 62svh;
  display: flex;
  align-items: center;
  background: var(--surface-dark);
  color: var(--color-pure-white);
  overflow: hidden;
}
.band__media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0.5;
}
/* The photographs behind these bands are bright, so the copy needs its own
   gradient — heaviest on the left, where the type sits. */
.band::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(18, 23, 58, 0.94) 0%,
    rgba(18, 23, 58, 0.80) 34%,
    rgba(18, 23, 58, 0.44) 68%,
    rgba(18, 23, 58, 0.30) 100%);
}
.band__inner { position: relative; z-index: 1; width: 100%; padding-block: var(--space-94); }
.band__attribution { font-size: var(--text-small); color: rgba(253, 253, 253, 0.6); margin-top: var(--space-30); }

/* Carrying two columns of copy rather than one line, so the wash is even
   across the full width instead of weighted to the left. Kept light enough
   that the plenary photograph still reads behind the text. */
.band--content::after {
  background: linear-gradient(180deg,
    rgba(18, 23, 58, 0.84) 0%,
    rgba(18, 23, 58, 0.78) 50%,
    rgba(18, 23, 58, 0.84) 100%);
}
.band--content { align-items: stretch; min-height: 0; }
.band--content .band__media { opacity: 0.66; }

.band__title {
  font-size: var(--text-heading);
  font-weight: var(--weight-book);
  line-height: 1.2;
  margin-bottom: var(--space-30);
}

.band .section-label { color: var(--color-gold-dim); }
.band .marker-list li { color: rgba(253, 253, 253, 0.82); }
.band .marker-list li::before { border-color: var(--color-gold); }
.band .marker-list strong { color: var(--color-pure-white); }

/* --------------------------------------------------------------------------
   Quote
   -------------------------------------------------------------------------- */

.quote { display: grid; grid-template-columns: auto 1fr; gap: var(--space-34); align-items: start; }

.quote__score {
  font-size: 66px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--color-gold);
  font-variant-numeric: tabular-nums;
}
.quote__stars { font-size: var(--text-label); color: var(--color-gold-dim); margin-top: var(--space-10); letter-spacing: 0.14em; }
.quote__text { font-size: var(--text-statement); font-weight: var(--weight-book); line-height: 1.2; }
.quote__source { font-size: var(--text-small); color: rgba(253, 253, 253, 0.55); margin-top: var(--space-22); }

/* --------------------------------------------------------------------------
   Team
   -------------------------------------------------------------------------- */

.team-group + .team-group { margin-top: var(--space-69); }

.team-group__label {
  font-size: var(--text-small);
  color: var(--color-ash-gray);
  padding-bottom: var(--space-22);
  border-bottom: var(--hairline);
  margin-bottom: var(--space-30);
}

.team-grid { display: grid; gap: var(--space-30); grid-template-columns: repeat(3, 1fr); }
.team-grid--founders { grid-template-columns: repeat(2, 1fr); }

.person {
  background: var(--surface-elevated);
  border: var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--space-34);
}

.person__photo {
  width: 92px; height: 92px;
  border-radius: var(--radius-pill);
  object-fit: cover;
  margin-bottom: var(--space-22);
}

.person__name { font-size: var(--text-subheading); margin-bottom: var(--space-10); }
.person__role { font-size: var(--text-body); color: var(--color-steel-gray); line-height: 1.5; }
.person__note { font-size: var(--text-small); color: var(--color-ash-gray); margin-top: var(--space-11); }

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

.faq { border-top: var(--hairline); }

.faq__item { border-bottom: var(--hairline); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-22);
  padding-block: var(--space-30);
  font-size: var(--text-subheading);
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }

.faq__q::after {
  content: '+';
  flex: none;
  font-size: var(--text-heading);
  line-height: 1;
  color: var(--color-signal-blue);
  transition: transform 0.2s ease;
}
.faq__item[open] .faq__q::after { transform: rotate(45deg); }

.faq__a {
  font-size: var(--text-body);
  color: var(--color-steel-gray);
  line-height: 1.6;
  max-width: 72ch;
  padding-bottom: var(--space-30);
}

/* --------------------------------------------------------------------------
   Legal (Privacy / Cookie policy)
   -------------------------------------------------------------------------- */

.legal { max-width: 72ch; }
.legal h2 { font-size: var(--text-subheading); margin-top: var(--space-50); margin-bottom: var(--space-16); }
.legal p { font-size: var(--text-body); color: var(--color-steel-gray); line-height: 1.6; margin-bottom: var(--space-16); }
.legal ul { margin-bottom: var(--space-16); }
.legal li { font-size: var(--text-body); color: var(--color-steel-gray); line-height: 1.6; padding-left: var(--space-16); position: relative; margin-bottom: var(--space-6); }
.legal li::before { content: '\2013'; position: absolute; left: 0; }
.legal a.link { color: var(--color-signal-blue); }

/* --------------------------------------------------------------------------
   Gallery
   -------------------------------------------------------------------------- */

.gallery-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-11); margin-top: var(--space-50); }

.shot {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius-media);
  background: rgba(0, 0, 0, 0.04);
  aspect-ratio: 3 / 2;
  cursor: zoom-in;
}
.shot--tall { aspect-ratio: 2 / 3; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.shot:hover img { transform: scale(1.03); }

/* The archive mixes portrait and landscape frames. A uniform grid sizes every
   row to its tallest item and leaves large holes, so the gallery page uses
   columns instead — each photo keeps its own proportions and nothing is
   cropped. Column order runs top-to-bottom, which matches DOM order, so the
   lightbox's next/previous still follows what the eye reads. */
.gallery-grid {
  column-count: 3;
  column-gap: var(--space-11);
}
.gallery-grid .shot {
  aspect-ratio: auto;
  width: 100%;
  margin-bottom: var(--space-11);
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.gallery-grid .shot img { height: auto; }

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */

.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  background: rgba(18, 23, 58, 0.97);
  padding: var(--space-50) var(--space-30);
}
.lightbox.is-open { display: flex; }

/* The nav pill would otherwise ghost through the overlay. */
body.is-viewing .nav { opacity: 0; pointer-events: none; }

.lightbox__img {
  max-width: min(1400px, 100%);
  max-height: 78svh;
  object-fit: contain;
  border-radius: var(--radius-media);
}

.lightbox__bar {
  position: absolute; left: 0; right: 0; bottom: var(--space-22);
  display: flex; align-items: center; justify-content: center;
  gap: var(--space-16);
  color: rgba(253, 253, 253, 0.7);
  font-size: var(--text-label);
  flex-wrap: wrap;
  padding-inline: var(--space-22);
}

.lightbox__btn {
  background: rgba(253, 253, 253, 0.10);
  border: var(--hairline-light);
  border-radius: var(--radius-pill);
  color: var(--color-pure-white);
  font: inherit; font-size: var(--text-label);
  padding: var(--space-10) var(--space-22);
  cursor: pointer;
}
.lightbox__btn:hover { background: rgba(253, 253, 253, 0.18); }
.lightbox__close { position: absolute; top: var(--space-30); right: var(--space-30); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  background: var(--surface-dark);
  color: var(--color-pure-white);
  padding-block: var(--space-94) var(--space-50);
}

.footer__top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: var(--space-50);
  padding-bottom: var(--space-69);
  border-bottom: var(--hairline-light);
}

.footer__brand { display: flex; align-items: center; gap: var(--space-16); }
.footer__brand img { display: block; }
.footer__brand span { font-size: var(--text-heading); }
.footer__tagline {
  font-size: var(--text-body);
  color: rgba(253, 253, 253, 0.6);
  margin-top: var(--space-22);
  max-width: 36ch; line-height: 1.5;
}

.footer__heading { font-size: var(--text-small); color: var(--color-gold-dim); margin-bottom: var(--space-22); }
.footer__list li + li { margin-top: var(--space-11); }
.footer__list a { color: rgba(253, 253, 253, 0.86); display: inline-flex; align-items: center; gap: var(--space-10); }
.footer__list a:hover { color: var(--color-pure-white); }
.footer__list svg { flex: none; }

.footer__wordmark {
  font-size: var(--text-heading);
  letter-spacing: 0.02em;
}

.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--space-22);
  padding-top: var(--space-30);
  font-size: var(--text-caption);
  color: rgba(253, 253, 253, 0.45);
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  :root { --section-gap: 72px; --card-padding: 34px; --gutter: 22px; }

  .grid--3, .grid--2, .grid--4 { grid-template-columns: 1fr; }
  .team-grid, .team-grid--founders { grid-template-columns: repeat(2, 1fr); }
  .footer__top { grid-template-columns: 1fr 1fr; }

  .feature { grid-template-columns: 1fr; gap: var(--space-34); }
  .feature--flip .feature__media { order: 0; }
  .feature + .feature { margin-top: var(--space-69); }

  .committees { grid-template-columns: 1fr; }
  .panel, .panel--wide { min-height: 300px; }

  .moment { grid-template-columns: 1fr; gap: var(--space-10); }

  /* The drawer stays in the layout and animates opacity/transform instead
     of toggling display, so opening and closing it is a motion, not a snap
     — easier to track on a small screen where the eye has less to work with. */
  .nav__links {
    position: absolute;
    top: calc(100% + var(--space-10));
    left: 0; right: 0;
    flex-direction: column; align-items: stretch;
    gap: 0;
    background: var(--surface-elevated);
    border: var(--hairline);
    border-radius: var(--radius-nav);
    padding: var(--space-10);
    box-shadow: 0 16px 40px rgba(18, 23, 58, 0.14);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  }
  .nav__links.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__toggle { display: flex; }

  /* The 44px tap-target toggle makes the pill taller than on desktop, so the
     hero needs extra clearance below it to avoid overlapping the eyebrow row. */
  .hero__inner { padding-top: var(--space-130); }

  /* Each row is a full-width, thumb-height tap target with its own divider,
     rather than a tight inline list — the thing this pass exists to fix. */
  .nav__links li { width: 100%; }
  .nav__links li + li { border-top: var(--hairline); }
  .nav__links a {
    display: block;
    padding: 15px var(--space-16);
    font-size: var(--text-subheading);
    border-radius: var(--radius-hairline);
  }
  .nav__links a:active { background: var(--surface-canvas); }

  /* Apply is the one action that matters most; it gets the same solid
     treatment as the page's other primary buttons instead of blending
     into the list of ordinary links. */
  .nav__links li:last-child { margin-top: var(--space-6); padding-top: var(--space-6); }
  .nav__links li:last-child a {
    background: var(--color-navy);
    color: var(--color-pure-white);
    font-weight: var(--weight-semibold);
    text-align: center;
    padding: 15px var(--space-16);
  }
  .nav__links li:last-child a:active { background: #2C3A8C; }

  /* Dims the page behind the open drawer and gives the thumb a large,
     obvious area to tap closed. */
  .nav-scrim {
    position: fixed; inset: 0;
    z-index: 45;
    background: rgba(18, 23, 58, 0.28);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s;
  }
  .nav-scrim.is-open { opacity: 1; visibility: visible; }
}

@media (min-width: 1001px) {
  .nav-scrim { display: none; }
}

@media (max-width: 1000px) {
  /* 38px was a little tight for a thumb; bring the gallery lightbox's
     controls up to a comfortable tap height. */
  .lightbox__btn { padding: 13px var(--space-22); }
  .lightbox__close { top: var(--space-22); right: var(--space-22); }
  .lightbox__bar { bottom: var(--space-22); }
}

@media (max-width: 680px) {
  :root { --section-gap: 58px; --card-padding: 26px; --radius-card: 28px; --radius-body: 28px; }

  /* Stacked, the interpuncts would dangle at the end of each line. */
  .hero__meta { flex-direction: column; gap: var(--space-6); }
  .hero__meta .sep { display: none; }

  .stats { grid-template-columns: repeat(2, 1fr); gap: var(--space-30) var(--space-22); }
  .stat__value { font-size: 34px; }

  .countdown { gap: var(--space-16); flex-wrap: wrap; }
  .countdown__value { font-size: 30px; }
  .countdown__unit { min-width: 54px; }

  .team-grid, .team-grid--founders, .footer__top { grid-template-columns: 1fr; }
  .gallery-strip { grid-template-columns: repeat(2, 1fr); }
  .gallery-grid  { column-count: 2; }
  .quote { grid-template-columns: 1fr; gap: var(--space-16); }
}

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