/* ==========================================================================
   Katakyie Dr. Emmanuel Opoku — Akatakyie USA presidential campaign
   Palette taken from the campaign poster: deep navy + OWASS gold.
   The site commits to a single dark brand look in both OS themes.
   ========================================================================== */

:root {
  /* ── Colour ────────────────────────────────────────────────────────
     Three decisions, and everything else is derived from them:
     one navy, one gold, one neutral. Surfaces are the same navy lifted
     in fixed steps — not new hues — so the page reads as one material. */
  --navy:  #050b1e;   /* primary   */
  --gold:  #f7c249;   /* accent    */
  --paper: #f4f7fd;   /* neutral   */

  --surface-0: var(--navy);
  --surface-1: #08122c;
  --surface-2: #0c1a3d;
  --surface-3: #12234e;
  --surface-4: #1b2f63;

  /* Text is the neutral at three strengths. Gold is never body text. */
  --ink:      var(--paper);
  --ink-soft: rgba(244, 247, 253, 0.76);
  --ink-mute: rgba(244, 247, 253, 0.52);

  /* The accent, shaded only where a gradient needs depth. */
  --on-gold: #21160a;   /* text on the accent */
  --gold-400: var(--gold);
  --gold-500: #eda92c;
  --gold-600: #d08e15;

  --line:      rgba(247, 194, 73, 0.22);
  --line-soft: rgba(244, 247, 253, 0.13);

  /* Legacy aliases, kept so older rules resolve to the same surfaces. */
  --navy-900: var(--surface-0);
  --navy-800: var(--surface-1);
  --navy-700: var(--surface-2);
  --navy-600: var(--surface-3);
  --navy-500: var(--surface-4);

  /* ── Type ──────────────────────────────────────────────────────────
     Serif carries authority and takes every headline. Sans carries the
     reading. Display is held back for the poster voice: the hero
     lockup and the slogan band, nowhere else. */
  --serif:   "Source Serif 4", "Source Serif Pro", Georgia, "Iowan Old Style", "Times New Roman", serif;
  --body:    system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --display: "Helvetica Neue", "Arial Black", Helvetica, Arial, system-ui, sans-serif;

  /* One scale, ~1.25 ratio, fluid between phone and desktop. */
  --t-hero:  clamp(3.4rem, 1rem + 9.4vw, 7rem);
  --t-1:     clamp(2rem, 1.25rem + 3.1vw, 3.5rem);
  --t-2:     clamp(1.6rem, 1.2rem + 1.7vw, 2.3rem);
  --t-3:     clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --t-lede:  clamp(1.08rem, 1rem + 0.45vw, 1.32rem);
  --t-body:  clamp(1rem, 0.96rem + 0.2vw, 1.075rem);
  --t-small: 0.9rem;
  --t-micro: 0.75rem;

  --shell: min(1180px, 100% - 2.5rem);
  --radius: 18px;

  /* ── Material ──────────────────────────────────────────────────────
     One glass, lit from above. A surface is a tint, a hairline edge, a
     specular line along its top, and a shadow in two parts: a tight
     contact shadow that sits it on the page, and a wide ambient one that
     gives it height. Depth comes from those, never from a heavier tint. */
  --glass:        rgba(255, 255, 255, 0.055);
  --glass-raised: rgba(255, 255, 255, 0.085);
  --glass-edge:   rgba(255, 255, 255, 0.12);
  --sheen:        inset 0 1px 0 rgba(255, 255, 255, 0.16);
  --sheen-strong: inset 0 1px 0 rgba(255, 255, 255, 0.24);
  --blur: blur(20px) saturate(160%);

  --lift-1: 0 1px 2px rgba(2, 6, 18, 0.4), 0 10px 24px -14px rgba(2, 6, 18, 0.85);
  --lift-2: 0 2px 5px rgba(2, 6, 18, 0.45), 0 22px 46px -22px rgba(2, 6, 18, 0.95);
  --lift-3: 0 4px 10px rgba(2, 6, 18, 0.5), 0 44px 80px -34px rgba(2, 6, 18, 1);

  --shadow: var(--lift-2);

  color-scheme: dark;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--navy-900);
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Two soft pools of light behind everything, fixed so they do not travel
   with the page. Without them translucent surfaces have nothing to refract
   and glass reads as flat grey. Sections above are tinted, not opaque, so
   this shows faintly through. */
body::before {
  content: "";
  position: fixed;
  inset: -10% -10% 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58% 44% at 14% 4%, rgba(88, 128, 232, 0.20), transparent 66%),
    radial-gradient(52% 40% at 92% 26%, rgba(247, 194, 73, 0.10), transparent 64%),
    radial-gradient(70% 50% at 44% 104%, rgba(27, 47, 99, 0.55), transparent 72%);
}

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

a { color: var(--gold-400); }

h1, h2, h3 {
  font-family: var(--serif);
  color: var(--ink);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h2 { font-size: var(--t-1); font-weight: 600; }
h3 { font-size: var(--t-3); font-weight: 600; letter-spacing: 0; line-height: 1.25; }

p { margin: 0 0 1.1em; }

.wrap { width: var(--shell); margin-inline: auto; }
.narrow { max-width: 66ch; }

.g { color: var(--gold-400); }
.w { color: var(--ink); }

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

.skip:focus {
  position: fixed; inset: 12px auto auto 12px;
  z-index: 100;
  background: var(--gold-400); color: var(--navy-900);
  padding: 0.6rem 1rem; border-radius: 10px; font-weight: 700;
}

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

/* ── Nav ─────────────────────────────────────────────────────────────── */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 11, 30, 0.62);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid transparent;
  box-shadow: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}

.nav.is-stuck {
  background: rgba(5, 11, 30, 0.78);
  border-bottom-color: var(--line);
  box-shadow: var(--sheen), 0 18px 40px -30px rgba(2, 6, 18, 1);
}

/* Where the backdrop cannot be blurred, the bar earns its legibility with
   opacity instead. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .nav { background: rgba(5, 11, 30, 0.94); }
  .nav.is-stuck { background: rgba(5, 11, 30, 0.98); }
  .tabrail { background: rgba(12, 26, 61, 0.95); }
}

.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; min-height: 72px;
}

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

.brand img {
  width: 40px; height: 42px;
  object-fit: contain;
  mix-blend-mode: screen;
}

.brand strong {
  display: block;
  white-space: nowrap;
  font-family: var(--display);
  font-size: 1.15rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase;
}

.brand em {
  display: block;
  white-space: nowrap;
  font-style: normal; font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-400);
}

.nav-menu { display: flex; align-items: center; flex-wrap: nowrap; gap: 2.15rem; }

/* Nothing in the bar may break mid-label: a wrapped link is what pushed the
   pill's text out past its own edge. Items keep their natural width and the
   gap gives way first — and when even that is not enough, the menu button
   takes over at the breakpoint below. */
.nav-menu a {
  position: relative;
  flex: 0 0 auto;
  white-space: nowrap;
  color: var(--ink-soft); text-decoration: none;
  font-size: 0.82rem; font-weight: 600; letter-spacing: 0.13em;
  text-transform: uppercase;
  padding: 0.45rem 0;
  transition: color 0.2s ease;
}

/* The underline grows from the left rather than blinking on. */
.nav-menu a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.24s ease;
}

.nav-menu a:hover { color: var(--ink); }
.nav-menu a:hover::after { transform: scaleX(1); }
.nav-menu a.is-active { color: var(--gold-400); }
.nav-menu a.is-active::after { transform: scaleX(1); }
.nav-menu a.btn::after { display: none; }

/* .nav-menu a is more specific than .btn-gold, so the pill has to be told
   again that its text is dark — otherwise it inherits the light nav colour
   and lands at about 1.8:1 on gold. The nav's wider tracking is dropped
   here too, which is what pushed the label out past the pill. */
.nav-menu a.btn,
.nav-menu a.btn.is-active {
  color: var(--on-gold);
  letter-spacing: 0.06em;
  /* `.nav-menu a` sets `padding: 0.45rem 0`, and it out-specifies .btn-sm —
     which left the pill with no side padding at all and its label touching
     both ends. The pill states its own padding here, where it wins. */
  padding: 0 1.5rem;
}

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  background: transparent; border: 1px solid var(--line);
  border-radius: 12px; color: var(--ink); cursor: pointer;
  align-items: center; justify-content: center;
}

.bars, .bars::before, .bars::after {
  display: block; width: 20px; height: 2px;
  background: currentColor; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.bars { position: relative; }
.bars::before, .bars::after { content: ""; position: absolute; left: 0; }
.bars::before { top: -6px; }
.bars::after { top: 6px; }

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

/* ── Buttons ─────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 1.6rem;
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--body); font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase; text-decoration: none;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, color 0.18s ease;
}

/* Lit from directly above: a bright edge along the top, the body of the
   gold falling away beneath it, a dark seam at the bottom where it meets
   its own shadow. Pressing it puts the light out and sits it down. */
.btn-gold {
  background: linear-gradient(180deg, #fbd478 0%, var(--gold-400) 42%, var(--gold-600) 100%);
  color: var(--on-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, 0.62),
    inset 0 -1px 0 rgba(94, 60, 6, 0.28),
    0 1px 2px rgba(2, 6, 18, 0.4),
    0 12px 26px -14px rgba(237, 169, 44, 0.85);
}

.btn-gold:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, 0.75),
    inset 0 -1px 0 rgba(94, 60, 6, 0.28),
    0 2px 4px rgba(2, 6, 18, 0.45),
    0 20px 38px -16px rgba(237, 169, 44, 0.95);
}

.btn-gold:active {
  transform: translateY(1px) scale(0.995);
  background: linear-gradient(180deg, var(--gold-500) 0%, var(--gold-600) 100%);
  box-shadow:
    inset 0 2px 5px rgba(94, 60, 6, 0.34),
    0 1px 2px rgba(2, 6, 18, 0.5);
}

.btn-ghost {
  background: var(--glass);
  border-color: var(--glass-edge);
  color: var(--ink);
  box-shadow: var(--sheen), var(--lift-1);
}

.btn-ghost:hover {
  border-color: var(--gold-400);
  color: var(--gold-400);
  transform: translateY(-2px);
  box-shadow: var(--sheen-strong), var(--lift-2);
}

.btn-ghost:active { transform: translateY(1px); box-shadow: var(--lift-1); }

/* The secondary action sits beside the primary without competing with it:
   no pill, no border — a text link with a rule that fills in on hover. */
.btn-quiet {
  min-height: 48px;
  padding: 0 0.15rem;
  background: none;
  border: 0;
  color: var(--ink-soft);
  letter-spacing: 0.12em;
  position: relative;
}

.btn-quiet::after {
  content: "";
  position: absolute;
  left: 0.15rem; right: 0.15rem; bottom: 12px;
  height: 1px;
  background: currentColor;
  opacity: 0.42;
  transform: scaleX(1);
  transform-origin: left;
  transition: opacity 0.2s ease, background 0.2s ease;
}

.btn-quiet:hover { color: var(--gold-400); transform: none; }
.btn-quiet:hover::after { opacity: 1; }

.btn-lg { min-height: 58px; padding: 0 2.3rem; font-size: 1rem; letter-spacing: 0.08em; }
.btn-sm { min-height: 46px; padding: 0 1.35rem; font-size: 0.82rem; }
.btn-block { width: 100%; }

/* ── Hero ────────────────────────────────────────────────────────────── */

.hero {
  position: relative;
  background:
    radial-gradient(80% 60% at 78% 22%, rgba(27, 47, 99, 0.85), transparent 65%),
    radial-gradient(60% 50% at 10% 10%, rgba(237, 169, 44, 0.12), transparent 70%),
    linear-gradient(180deg, var(--navy-800), var(--navy-900));
  overflow: hidden;
}

.hero::after {
  content: "";
  position: absolute; inset: auto 0 0; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold-500), transparent);
  opacity: 0.6;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3.5rem);
}

.crest {
  width: clamp(80px, 8vw, 112px);
  height: auto;
  margin-bottom: 2rem;
  /* A transparent PNG now, so it needs no blend mode — just a soft gold
     lift off the navy, which reads as a faint emboss at this size. */
  filter:
    drop-shadow(0 1px 0 rgba(255, 255, 255, 0.28))
    drop-shadow(0 10px 22px rgba(0, 0, 0, 0.55))
    drop-shadow(0 0 26px rgba(247, 194, 73, 0.22));
}

/* The eyebrow is a label, not a headline: it names the man and his class
   and then gets out of the way of the one thing that should dominate. */
.eyebrow {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 1.1rem;
}

.hero h1 { margin: 0 0 1.1rem; }

.hero h1 span { display: block; }

.hero h1 .given {
  font-size: clamp(1.35rem, 0.9rem + 1.5vw, 2.05rem);
  font-weight: 400;
  font-style: italic;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-bottom: 0.12em;
}

.hero h1 .family {
  font-family: var(--display);
  font-size: var(--t-hero);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: var(--ink);
}

/* One supporting line. The office is the message; the association is the
   accent, and it is the only gold in the hero besides the button. */
.office {
  margin: 0 0 2.2rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--line-soft);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 0.92rem + 0.6vw, 1.45rem);
  font-weight: 400;
  letter-spacing: 0;
  color: var(--ink-soft);
}

.office strong {
  color: var(--gold);
  font-weight: 600;
}

.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.35rem; }

.cta-note {
  margin: 1.05rem 0 0;
  font-size: var(--t-small);
  font-style: italic;
  font-family: var(--serif);
  color: var(--ink-mute);
}

.hero-photo { justify-self: center; width: 100%; }

/* The portrait is lit into the page rather than pasted onto it: a gold rim
   along the top-left, a wash of presidential blue, and a vignette that
   settles the edges into the navy behind it. */
.photo-frame {
  position: relative;
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(150deg,
    rgba(247, 194, 73, 0.75),
    rgba(247, 194, 73, 0.06) 38%,
    rgba(27, 47, 99, 0.55));
  box-shadow: var(--lift-3);
  isolation: isolate;
}

.photo-frame img {
  border-radius: 21px;
  width: 100%;
  object-fit: cover;
  display: block;
}

.photo-frame::before,
.photo-frame::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 21px;
  pointer-events: none;
}

/* Rim light + blue wash */
.photo-frame::before {
  background:
    linear-gradient(148deg, rgba(255, 232, 176, 0.5) 0%, rgba(255, 232, 176, 0) 22%),
    linear-gradient(200deg, rgba(27, 47, 99, 0.42), rgba(27, 47, 99, 0.05) 55%);
  mix-blend-mode: soft-light;
}

/* Vignette */
.photo-frame::after {
  background: radial-gradient(120% 85% at 50% 38%,
    transparent 42%,
    rgba(5, 11, 30, 0.34) 82%,
    rgba(5, 11, 30, 0.62) 100%);
}

/* Slogan band under the hero */

.slogan-band {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(8, 18, 44, 0.9), rgba(5, 11, 30, 0.95));
  text-align: center;
  padding: clamp(1.4rem, 3vw, 2.2rem) 0;
}

.slogan {
  font-family: var(--display);
  font-size: clamp(1.4rem, 0.7rem + 3.4vw, 3.05rem);
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em;
  margin: 0 0 0.35rem;
}

.values {
  margin: 0;
  font-size: clamp(0.72rem, 0.6rem + 0.55vw, 0.95rem);
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* ── Sections ────────────────────────────────────────────────────────── */

.section { padding: clamp(3.2rem, 8vw, 6.5rem) 0; }

.kicker {
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 0.9rem;
  display: flex; align-items: center; gap: 0.8rem;
}

.kicker::after {
  content: "";
  height: 1px; flex: 1; max-width: 3.5rem;
  background: var(--line);
}

.lede { font-size: var(--t-lede); color: var(--ink); line-height: 1.6; }

.note {
  font-size: 0.85rem; color: var(--ink-mute);
  border-left: 2px solid var(--line); padding-left: 0.9rem;
  margin-top: 2rem;
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.88em;
  background: rgba(255, 255, 255, 0.07);
  padding: 0.1em 0.4em; border-radius: 5px;
}

/* ── Vision ──────────────────────────────────────────────────────────── */

/* Three short beats under the vision prose: why, what, and what is
   different. Numbered rules rather than cards, so they read as one
   statement in three parts instead of three competing boxes. */
.beats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
  margin-top: clamp(2.6rem, 5vw, 3.8rem);
  padding-top: 2.2rem;
  border-top: 1px solid var(--line-soft);
}

.beat p:last-child { margin-bottom: 0; color: var(--ink-soft); }

.beat-label {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 0.75rem;
}

@media (max-width: 780px) {
  .beats { grid-template-columns: 1fr; gap: 1.8rem; }
}

/* ── Pillars ─────────────────────────────────────────────────────────── */

.pillars { background: linear-gradient(180deg, rgba(5, 11, 30, 0.82), rgba(8, 18, 44, 0.82)); }

.pillar-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-top: 2.6rem;
}

.pillar {
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  padding: 1.6rem 1.35rem;
  box-shadow: var(--sheen), var(--lift-1);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.25s ease, background 0.25s ease, box-shadow 0.3s ease;
}

.pillar:hover {
  transform: translateY(-5px);
  border-color: var(--line);
  background: var(--glass-raised);
  box-shadow: var(--sheen-strong), var(--lift-3);
}

.pillar .icon { display: block; width: 46px; height: 46px; color: var(--gold-400); margin-bottom: 1rem; }
.pillar .icon svg { width: 100%; height: 100%; }
.pillar h3 { color: var(--ink); letter-spacing: 0; }
.pillar p { margin: 0; font-size: 0.96rem; }

/* ── Pillar letters (tabbed) ─────────────────────────────────────────── */

/* The candidate's own writing, one letter per tab. Two ideas carry the
   section: the tabs sit inside a single track so they read as one control
   rather than five loose pills, and each letter is signed on the left by the
   pillar it belongs to, leaving the text itself at a reading measure. */

.letters { background: rgba(8, 18, 44, 0.82); }

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

/* The track. It stays with the reader while a long letter scrolls, and on a
   narrow screen it scrolls sideways rather than breaking into ragged rows —
   a half-visible pill at the edge is the invitation to swipe. */
.tabrail {
  position: sticky;
  top: 84px;
  z-index: 5;
  /* The side padding has to clear the track's own curve: a pill sitting 4px
     in from a 999px corner gets its edge sliced off by the overflow clip. */
  padding: 0.4rem 1rem;
  border: 1px solid var(--glass-edge);
  border-radius: 999px;
  background: rgba(12, 26, 61, 0.66);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--sheen), var(--lift-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

.tabrail::-webkit-scrollbar { display: none; }

.tablist {
  display: flex;
  justify-content: space-between;
  gap: 0.2rem;
  width: 100%;
  min-width: max-content;
}

.tab {
  position: relative;
  display: inline-flex;
  /* Centred, not baseline-aligned: in a box with a min-height, baseline
     alignment parks the label at the top and leaves the pill hanging below
     it. Matching line-heights keep the numeral and the name on one line. */
  align-items: center;
  gap: 0.55rem;
  flex: 0 0 auto;
  min-height: 48px;
  padding: 0 1.25rem;
  background: none;
  border: 0;
  border-radius: 999px;
  color: var(--ink-soft);
  font-family: var(--body);
  font-size: 0.84rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  scroll-snap-align: center;
  transition: color 0.2s ease, background 0.2s ease;
}

.tab:hover { color: var(--ink); background: rgba(255, 255, 255, 0.05); }

.tab .tab-num {
  font-size: var(--t-micro);
  line-height: 1;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  opacity: 0.65;
}

.tab .tab-name { line-height: 1; }

.tab.is-active {
  background: linear-gradient(180deg, #fbd478 0%, var(--gold-400) 44%, var(--gold-600) 100%);
  color: var(--on-gold);
  box-shadow:
    inset 0 1px 0 rgba(255, 252, 240, 0.6),
    inset 0 -1px 0 rgba(94, 60, 6, 0.26),
    0 1px 2px rgba(2, 6, 18, 0.35),
    0 10px 20px -14px rgba(237, 169, 44, 0.9);
}

.tab.is-active .tab-num { opacity: 0.72; }

/* ── One letter ──────────────────────────────────────────────────────── */

.tabpanel {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  animation: letter-in 0.4s ease both;
}

.tabpanel[hidden] { display: none; }

@keyframes letter-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

/* The pillar signs its own letter: a numeral in outline, the name, and the
   place it holds in the sequence. It rides along on wide screens. */
.letter-mark {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 0.9rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--line-soft);
}

.letter-no {
  font-family: var(--display);
  font-size: clamp(2.6rem, 1.6rem + 3vw, 4.2rem);
  font-weight: 800;
  line-height: 0.85;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(247, 194, 73, 0.62);
}

.letter-title {
  margin: 0;
  font-family: var(--serif);
  font-size: var(--t-2);
  font-weight: 600;
  line-height: 1.1;
  color: var(--ink);
}

.letter-strap {
  grid-column: 2;
  margin: 0.25rem 0 0;
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.letter-body {
  max-width: 64ch;
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1rem + 0.32vw, 1.2rem);
  line-height: 1.75;
}

.letter-body > p:last-child { margin-bottom: 0; }

.salutation { color: var(--ink); font-style: italic; }

.letter-head {
  margin: 2.4rem 0 1.2rem;
  font-family: var(--serif);
  font-size: 1.32em;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.letter-list {
  margin: 0 0 1.1em;
  padding-left: 1.15rem;
  list-style: none;
}

.letter-list li {
  position: relative;
  margin-bottom: 0.55rem;
}

.letter-list li::before {
  content: "";
  position: absolute;
  left: -1.15rem; top: 0.72em;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold-400);
}

/* The two legacy projects are a pair of named commitments, so they are set
   as such rather than as two more paragraphs. */
.projects { margin: 0 0 1.2em; }

.projects dt {
  margin-top: 1.5rem;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-bottom: 0.35rem;
}

.projects dd {
  margin: 0 0 1.4rem;
  padding-left: 1.1rem;
  border-left: 1px solid var(--line);
}

.projects dt:first-child { margin-top: 0; }
.projects dd:last-child { margin-bottom: 0; }

/* The four pillars named in the overview double as a way into them. */
.pillar-list {
  margin: 0 0 1.3em;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line-soft);
}

.pillar-list li { border-bottom: 1px solid var(--line-soft); }

.pillar-list button {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  min-height: 52px;
  padding: 0.35rem 0.6rem 0.35rem 0;
  background: none;
  border: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-align: left;
  cursor: pointer;
  transition: color 0.2s ease, padding 0.2s ease;
}

.pillar-list button::after {
  content: "";
  width: 8px; height: 8px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-top: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.5;
  transition: opacity 0.2s ease;
}

.pillar-list button:hover { color: var(--gold-400); padding-left: 0.5rem; }
.pillar-list button:hover::after { opacity: 1; }
.pillar-list .n { color: var(--gold-400); font-variant-numeric: tabular-nums; }

.letter-chain,
.letter-close {
  color: var(--ink);
  font-weight: 600;
}

.letter-chain {
  font-style: italic;
  font-size: 1.12em;
  line-height: 1.5;
}

.letter-close {
  margin-top: 1.5rem;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line);
}

/* Reading on: the sequence is the argument, so each letter offers the next. */
.letter-next { margin-top: 2.2rem; }

.jump {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 0.85rem 3rem 0.9rem 1.2rem;
  position: relative;
  background: var(--glass);
  border: 1px solid var(--glass-edge);
  border-radius: 14px;
  box-shadow: var(--sheen), var(--lift-1);
  text-align: left;
  cursor: pointer;
  transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease;
}

.jump::after {
  content: "";
  position: absolute;
  right: 1.2rem; top: 50%;
  width: 9px; height: 9px;
  margin-top: -5px;
  border-right: 1.5px solid var(--gold-400);
  border-top: 1.5px solid var(--gold-400);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

.jump:hover {
  transform: translateY(-2px);
  border-color: var(--line);
  background: rgba(247, 194, 73, 0.07);
  box-shadow: var(--sheen-strong), var(--lift-2);
}

.jump:active { transform: translateY(1px); box-shadow: var(--lift-1); }

.jump:hover::after { transform: rotate(45deg) translate(2px, -2px); }

.jump-label {
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold-400);
}

.jump-name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
}

/* Wide enough for the letter to be signed in the margin. */
@media (min-width: 960px) {
  .tabpanel {
    grid-template-columns: 200px minmax(0, 64ch);
    column-gap: clamp(2.4rem, 5vw, 4rem);
    min-height: 30rem;
  }

  .letter-mark {
    position: sticky;
    top: 160px;
    align-self: start;
    grid-template-columns: 1fr;
    padding-bottom: 1.3rem;
  }

  .letter-strap { grid-column: 1; }
  .letter-title { margin-top: 0.7rem; }
}

@media (max-width: 620px) {
  .tabrail { border-radius: 26px; }
  .tab { padding: 0 1rem; font-size: 0.78rem; }
  .jump { padding-right: 2.6rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tabpanel { animation: none; }
  .jump:hover { transform: none; }
  .pillar-list button:hover { padding-left: 0; }
  .tabrail { scroll-behavior: auto; }

  /* Depth is fine; travel is not. Surfaces still light up on hover, they
     just do not move to do it. */
  .pillar:hover,
  .shot:hover,
  .steps li:hover,
  .btn-gold:hover,
  .btn-ghost:hover,
  .btn-gold:active,
  .btn-ghost:active { transform: none; }
}

/* ── About ───────────────────────────────────────────────────────────── */

.about { background: rgba(8, 18, 44, 0.82); }

/* Held to a reading measure, but anchored to the same left edge as every
   other section rather than floated to the middle of the page. */
.about-copy { max-width: 68ch; }

/* The bio is the one long read on the page, so it gets a serif and a little
   more air than the rest of the site. Headings, the creed and the facts list
   stay on the display/body sans. */
.bio {
  margin-top: 1.6rem;
  font-family: var(--serif);
  font-size: clamp(1.06rem, 1rem + 0.32vw, 1.2rem);
  line-height: 1.75;
}

.bio h3 {
  margin: 2.4rem 0 0.7rem;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ink-mute);
}

.bio .creed {
  margin: 1.4rem 0;
  padding: 0.85rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: clamp(0.78rem, 0.68rem + 0.5vw, 0.98rem);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--ink);
}

/* The life story behind the candidacy, kept one click away so the case for
   it reads first. Same words, same order — only folded. */
.more {
  margin: 2.4rem 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.more summary {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  min-height: 60px;
  padding-right: 0.2rem;
  font-family: var(--body);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-400);
  cursor: pointer;
  list-style: none;
  transition: color 0.2s ease;
}

.more summary::-webkit-details-marker { display: none; }
.more summary:hover { color: var(--ink); }

.more summary::after {
  content: "";
  width: 9px; height: 9px;
  margin-left: auto;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 0.25s ease;
}

.more[open] summary::after { transform: translateY(1px) rotate(-135deg); }

.more-body { padding-bottom: 0.8rem; }
.more-body > h3:first-of-type { margin-top: 1.6rem; }

.pull {
  margin: 1.4rem 0 0;
  padding-left: 1.1rem;
  border-left: 3px solid var(--gold-400);
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.02rem + 0.62vw, 1.45rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.4;
  color: var(--ink);
  text-wrap: balance;
}

/* Closing triad and signature: the bio ends on a statement, then signs it. */
.signoff {
  margin: 2.4rem 0 1.6rem;
  padding: 1.3rem 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1rem + 0.6vw, 1.4rem);
  font-weight: 600;
  font-style: italic;
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
}

.signature {
  margin: 0;
  font-family: var(--body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: center;
}

.signature span {
  display: block;
  margin-top: 0.35rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--gold);
}

.facts {
  list-style: none; margin: 2.4rem 0 0; padding: 0;
  display: grid; gap: 0.1rem;
}

.facts li {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem;
  justify-content: space-between; align-items: baseline;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line-soft);
}

.facts span { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-mute); }
.facts strong { color: var(--ink); font-weight: 700; }

/* Placeholder blocks the campaign still has to fill in */

.todo {
  border: 1px dashed rgba(247, 194, 73, 0.5);
  border-radius: 14px;
  background: rgba(247, 194, 73, 0.05);
  padding: 1.15rem 1.25rem;
  margin: 1.6rem 0;
}

.todo p:last-child { margin-bottom: 0; }

.todo-label {
  font-size: 0.7rem; font-weight: 800;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold-400);
  margin: 0 0 0.5rem;
}

/* ── Record ──────────────────────────────────────────────────────────── */

.record { background: linear-gradient(180deg, rgba(8, 18, 44, 0.82), rgba(5, 11, 30, 0.82)); }

/* Only the phone rail announces itself. */
.swipe-hint {
  display: none;
  margin: 0 0 0.8rem;
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.1rem;
  margin-top: 2.8rem;
}

.shot {
  margin: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--sheen), var(--lift-1);
  overflow: hidden;
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1),
              border-color 0.25s ease, box-shadow 0.3s ease;
}

.shot:hover {
  transform: translateY(-5px);
  border-color: var(--line);
  box-shadow: var(--sheen-strong), var(--lift-3);
}

.shot.wide { grid-column: 1 / -1; }

.shot img {
  width: 100%;
  flex: none;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  /* Holds the card's shape in brand colour while the photograph is still
     on its way, rather than a bright empty rectangle. */
  background: var(--surface-2);
}

/* Tall photographs whose subject sits high in the frame: hold the top of
   the picture rather than its middle, so heads survive the 4:3 crop. */
.shot img.hold-top { object-position: 50% 30%; }

.shot.wide img { aspect-ratio: 16 / 9; }

.shot figcaption {
  flex: 1;
  padding: 1rem 1.15rem 1.2rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
  text-wrap: pretty;
}

.shot figcaption strong {
  display: block;
  color: var(--ink);
  font-size: 0.72rem; font-weight: 800;
  letter-spacing: 0.12em; text-transform: uppercase;
  line-height: 1.3;
  margin-bottom: 0.4rem;
  text-wrap: balance;
}

/* ── Plan ────────────────────────────────────────────────────────────── */

.plan { background: linear-gradient(180deg, rgba(8, 18, 44, 0.82), rgba(5, 11, 30, 0.82)); }

.steps {
  list-style: none; padding: 0;
  margin: 2.8rem 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.1rem;
}

.steps li {
  position: relative;
  padding: 1.7rem 1.4rem 1.5rem;
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  background: var(--glass);
  box-shadow: var(--sheen), var(--lift-1);
  transition: transform 0.3s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.3s ease;
}

.steps li:hover { transform: translateY(-4px); box-shadow: var(--sheen-strong), var(--lift-2); }

.steps .num {
  display: block;
  font-family: var(--display);
  font-size: 2.1rem; font-weight: 900;
  color: rgba(247, 194, 73, 0.35);
  line-height: 1; margin-bottom: 0.7rem;
}

.steps h3 { color: var(--ink); }
.steps h3:last-child { margin-bottom: 0; }
.steps p { margin: 0; font-size: 0.96rem; }

/* ── Voices ──────────────────────────────────────────────────────────── */

.voices { background: var(--navy-900); }

.quote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.1rem;
  margin-top: 2.6rem;
}

.quote { margin: 0; }
.quote blockquote { margin: 0 0 0.9rem; color: var(--ink); font-size: 1.02rem; }
.quote blockquote::before { content: "\201C"; color: var(--gold-400); font-size: 1.4em; line-height: 0; }
.quote figcaption { font-size: 0.82rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-mute); }

/* ── Join ────────────────────────────────────────────────────────────── */

.join { background: linear-gradient(180deg, rgba(5, 11, 30, 0.8), rgba(12, 26, 61, 0.8)); }

.join-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.5rem, 5vw, 3.5rem);
  align-items: start;
}

.join-list {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; gap: 0.7rem;
}

.join-list li { position: relative; padding-left: 1.6rem; }

.join-list li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 8px; height: 8px; border-radius: 2px;
  background: var(--gold-400); transform: rotate(45deg);
}

.join-form {
  background: rgba(8, 18, 44, 0.5);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border: 1px solid var(--glass-edge);
  border-radius: var(--radius);
  padding: clamp(1.3rem, 3vw, 2rem);
  box-shadow: var(--sheen-strong), var(--lift-3);
  display: grid; gap: 1rem;
}

.field { display: grid; gap: 0.4rem; }

.field label,
.field legend {
  font-size: 0.76rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ink-mute);
}

.field .opt { text-transform: none; letter-spacing: 0.02em; }

.field input[type="text"],
.field input[type="email"],
.field textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.85rem;
  background: rgba(2, 6, 18, 0.32);
  border: 1px solid var(--glass-edge);
  border-radius: 11px;
  box-shadow: inset 0 1px 3px rgba(2, 6, 18, 0.55);
  color: var(--ink);
  font: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.field textarea { min-height: 110px; resize: vertical; }

.field input:focus, .field textarea:focus {
  border-color: var(--gold-400);
  outline: none;
  background: rgba(2, 6, 18, 0.2);
  box-shadow: inset 0 1px 3px rgba(2, 6, 18, 0.4), 0 0 0 3px rgba(247, 194, 73, 0.22);
}

.field input[aria-invalid="true"] { border-color: #ff8b7a; }

.checks {
  border: 0; padding: 0; margin: 0;
  display: grid; gap: 0.55rem;
}

.checks label {
  display: flex; align-items: center; gap: 0.6rem;
  font-size: 0.95rem; font-weight: 400;
  letter-spacing: 0; text-transform: none;
  color: var(--ink-soft);
  min-height: 30px;
  cursor: pointer;
}

.checks input { width: 19px; height: 19px; accent-color: var(--gold-500); }

.form-note { margin: 0; font-size: 0.84rem; color: var(--ink-mute); text-align: center; }
.form-note.is-error { color: #ffb2a6; }
.form-note.is-ok { color: var(--gold-400); }

/* ── Power banner ────────────────────────────────────────────────────── */

.power {
  background: var(--navy-900);
  text-align: center;
  padding: clamp(2.4rem, 6vw, 4rem) 0;
}

.power-band {
  display: inline-block;
  background: linear-gradient(160deg, var(--gold-400), var(--gold-600));
  color: #1d1305;
  font-family: var(--display);
  font-size: clamp(1.5rem, 0.8rem + 3.4vw, 3.2rem);
  font-weight: 900; letter-spacing: -0.01em;
  padding: 0.35em 1em;
  margin: 0 0 1rem;
  border-radius: 8px;
  box-shadow: 0 20px 45px -22px rgba(237, 169, 44, 0.85);
  transform: skewX(-4deg);
}

.power-sub {
  margin: 0;
  font-size: clamp(0.75rem, 0.65rem + 0.6vw, 1rem);
  letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink);
}

/* ── Footer ──────────────────────────────────────────────────────────── */

.footer {
  background: var(--navy-800);
  border-top: 1px solid var(--line);
  padding: clamp(2.2rem, 5vw, 3.4rem) 0 1.6rem;
  font-size: 0.92rem;
}

.footer-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.8rem;
  text-align: center;
}

.footer-brand { display: flex; gap: 0.9rem; align-items: center; text-align: left; }
.footer-brand img { width: 48px; height: 50px; object-fit: contain; mix-blend-mode: screen; flex: none; }
.footer-brand p { margin: 0; }
.footer-brand strong { color: var(--ink); }

.footer-nav {
  display: flex; flex-wrap: wrap;
  justify-content: center;
  gap: 0.35rem 1.6rem;
}

.footer-nav a {
  color: var(--ink-soft); text-decoration: none;
  padding: 0.45rem 0;
  font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase;
}

.footer-nav a:hover { color: var(--gold-400); }

.footer-contact { margin: 0; }
.footer-contact a { font-weight: 600; word-break: break-word; }

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

.footer-base {
  width: var(--shell); margin: 2.4rem auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid var(--line-soft);
  text-align: center;
}

.copyright { margin: 0 0 0.5rem; font-size: 0.78rem; color: var(--ink-mute); }

.credit { margin: 0; font-size: 0.78rem; color: var(--ink-mute); letter-spacing: 0.04em; }
.credit a {
  color: var(--gold-400);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-decoration: none;
  border-bottom: 1px solid rgba(247, 194, 73, 0.32);
  transition: color 0.2s ease, border-color 0.2s ease;
}

.credit a:hover { color: #fbd478; border-bottom-color: var(--gold-400); }

/* ── Video banner ────────────────────────────────────────────────────── */

/* Full-bleed band inside the Record section: the courts, in use, with the
   school around them. Silent and looping — it is scenery, not a message,
   so nothing in it needs sound to be understood. */
.banner {
  position: relative;
  /* Full-bleed without a transform: .reveal animates transform, and would
     otherwise cancel the centring and shunt the band off to the right. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  aspect-ratio: 2.35 / 1;
  max-height: 62vh;
  overflow: hidden;
  background: var(--surface-1);
  margin-top: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: clamp(2.4rem, 5vw, 3.6rem);
}

.banner video,
.banner img.banner-fallback {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

/* Grades the footage into the page: navy at the edges, a gold cast in the
   light, and enough top/bottom fade that the band has no hard seam. */
.banner::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, var(--surface-1) 0%, rgba(8, 18, 44, 0) 16%,
                    rgba(8, 18, 44, 0) 74%, var(--surface-1) 100%),
    radial-gradient(120% 100% at 50% 50%, rgba(5, 11, 30, 0) 45%, rgba(5, 11, 30, 0.55) 100%),
    linear-gradient(200deg, rgba(247, 194, 73, 0.10), rgba(27, 47, 99, 0.30));
}

.banner-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  width: var(--shell);
  margin-inline: auto;
  padding-bottom: clamp(1rem, 3vw, 2rem);
  z-index: 1;
}

.banner-caption p {
  margin: 0;
  font-family: var(--body);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 2px 14px rgba(5, 11, 30, 0.9);
}

@media (max-width: 620px) {
  .banner { aspect-ratio: 16 / 10; }
}

/* ── Motion ──────────────────────────────────────────────────────────── */

/* A gold rule that draws itself under each section title as the title
   arrives. It is the same accent as the kicker above it, so the heading
   reads as one unit rather than a line stuck on afterwards. */
.section h2 {
  position: relative;
  padding-bottom: 0.42em;
}

.section h2::after {
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: clamp(64px, 7vw, 96px);
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--gold), rgba(247, 194, 73, 0));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.85s cubic-bezier(0.2, 0.7, 0.2, 1) 0.18s;
}

.section h2.is-visible::after { transform: scaleX(1); }

/* The crest drifts a little slower than the page. The offset is written by
   script; the property is declared here so it is always a known quantity. */
.crest {
  --crest-shift: 0px;
  transform: translate3d(0, var(--crest-shift), 0);
  will-change: transform;
}



.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.3, 1);
}

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

/* Grid children arrive in sequence — enough to read as deliberate, not
   enough to make anyone wait for the page. */
.pillar-grid > .reveal:nth-child(2),
.beats > .reveal:nth-child(2),
.steps > .reveal:nth-child(2),
.quote-grid > .reveal:nth-child(2) { transition-delay: 0.07s; }

.pillar-grid > .reveal:nth-child(3),
.beats > .reveal:nth-child(3),
.steps > .reveal:nth-child(3),
.quote-grid > .reveal:nth-child(3) { transition-delay: 0.14s; }

.pillar-grid > .reveal:nth-child(4),
.steps > .reveal:nth-child(4) { transition-delay: 0.21s; }

.pillar-grid > .reveal:nth-child(5),
.steps > .reveal:nth-child(5) { transition-delay: 0.28s; }

.steps > .reveal:nth-child(6) { transition-delay: 0.35s; }


@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  /* :nth-child(n) matches the specificity of the stagger rules above, which
     would otherwise keep their delays even with motion turned down. */
  .reveal,
  .pillar-grid > .reveal:nth-child(n),
  .beats > .reveal:nth-child(n),
  .steps > .reveal:nth-child(n),
  .quote-grid > .reveal:nth-child(n) { transition-delay: 0s; }
  .section h2::after { transform: scaleX(1); transition: none; }
  .crest { --crest-shift: 0px; transform: none; will-change: auto; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── Responsive ──────────────────────────────────────────────────────── */

/* Six items, a brand lockup and a pill: between the full bar and the menu
   button there is a band where it all only just fits. The gap closes up
   there rather than letting anything crowd the pill. */
@media (max-width: 1040px) {
  .nav-menu { gap: 1.35rem; }
  .nav-menu a { font-size: 0.78rem; letter-spacing: 0.1em; }
  .nav-menu a.btn-sm { padding: 0 1.2rem; }
}

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-photo { order: -1; max-width: 380px; }
  .join-grid { grid-template-columns: 1fr; }
  .gallery { grid-template-columns: repeat(2, 1fr); }
  .shot.wide { grid-column: span 2; }
}

@media (max-width: 900px) {
  html { scroll-padding-top: 76px; }

  .nav-toggle { display: inline-flex; }

  .nav-menu {
    position: absolute; inset: 100% 0 auto;
    display: grid; gap: 0.25rem;
    padding: 1rem 1.25rem 1.5rem;
    background: rgba(5, 11, 30, 0.98);
    border-bottom: 1px solid var(--line);
    transform-origin: top;
    transform: scaleY(0);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-menu.is-open { transform: none; opacity: 1; pointer-events: auto; }

  .nav-menu a {
    padding: 0.85rem 0;
    border-bottom: 1px solid var(--line-soft);
    font-size: 1rem;
  }

  .nav-menu a.btn { margin-top: 0.8rem; justify-content: center; }

  .footer-brand { flex-direction: column; text-align: center; gap: 0.6rem; }
  .footer-nav { gap: 0.2rem 1.2rem; }
}

@media (max-width: 560px) {
  /* Thirteen photographs stacked one per row ran to nearly six screens —
     a third of the whole page. On a phone they become a rail you swipe
     instead, the same gesture the pillar tabs use, with the next card
     peeking in as the invitation. */
  .swipe-hint { display: block; }

  .gallery {
    display: flex;
    gap: 0.8rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }

  .gallery::-webkit-scrollbar { display: none; }

  .shot,
  .shot.wide {
    flex: 0 0 84%;
    grid-column: auto;
    scroll-snap-align: center;
  }

  .shot:hover { transform: none; }
  .shot img,
  .shot.wide img { aspect-ratio: 4 / 3; }
}