@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800&display=swap");

/* ==========================================================================
   Project Neptune
   Media-led layout. One typeface, two brand colours, very little chrome —
   the imagery is meant to carry the page as renders and footage arrive.
   Palette: SpaceU blue #0067B1 / UCF gold #FFC904.
   ========================================================================== */

:root {
  --ink: #050d18;
  --surface: #091524;
  --surface-2: #0e2135;
  --surface-3: #143050;

  --blue: #0067b1;
  --blue-bright: #2bafe5;
  --blue-deep: #01406f;

  --gold: #ffc904;
  --gold-deep: #d9a800;

  --white: #f4f8fb;
  --muted: #93a8bb;
  --muted-dim: #6b8095;

  --line: rgba(148, 184, 214, 0.16);
  --line-bright: rgba(148, 184, 214, 0.3);

  --font: "Archivo", "Helvetica Neue", Arial, sans-serif;

  --pad: clamp(1.25rem, 5vw, 4.5rem);
  --shell: 1360px;
  --gap: clamp(2.5rem, 6vw, 5.5rem);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--ink);
  overflow-x: clip;
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  color: var(--white);
  background: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--ink);
  background: var(--gold);
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  color: inherit;
  font: inherit;
}

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

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

.skip-link {
  position: absolute;
  z-index: 50;
  top: -100%;
  left: 1rem;
  padding: 0.7rem 1rem;
  color: var(--ink);
  background: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
}

.skip-link:focus {
  top: 1rem;
}

.shell {
  width: min(100%, var(--shell));
  margin: 0 auto;
  padding: 0 var(--pad);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  padding: 1.35rem var(--pad);
  transition: background 240ms ease, padding 240ms ease;
}

.site-header.is-scrolled {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
  background: rgba(5, 13, 24, 0.92);
  backdrop-filter: blur(14px);
}

.header-brand {
  display: inline-flex;
  width: clamp(9.5rem, 13vw, 12.5rem);
  align-items: center;
}

.header-brand img,
.footer-brand img {
  width: 100%;
  height: auto;
}

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.4vw, 2.4rem);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

.primary-nav a:not(.nav-cta) {
  color: var(--muted);
  transition: color 160ms ease;
}

.primary-nav a:not(.nav-cta):hover,
.primary-nav a:not(.nav-cta):focus-visible,
.primary-nav a[aria-current]:not(.nav-cta) {
  color: var(--white);
}

.nav-cta {
  padding: 0.6rem 1rem;
  color: var(--ink);
  background: var(--gold);
  transition: background 160ms ease;
}

.nav-cta:hover,
.nav-cta:focus-visible {
  background: var(--white);
}

.nav-toggle {
  display: none;
  width: 2.7rem;
  height: 2.7rem;
  padding: 0.65rem;
  border: 1px solid var(--line-bright);
  background: transparent;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  margin: 0.32rem 0;
  background: var(--white);
  transition: transform 180ms ease;
}

/* --------------------------------------------------------------------------
   Media primitives — every slot on the page uses these
   -------------------------------------------------------------------------- */

.media-fill {
  position: absolute;
  display: grid;
  overflow: hidden;
  inset: 0;
  place-items: center;
  background:
    radial-gradient(120% 90% at 70% 20%, rgba(0, 103, 177, 0.5), transparent 70%),
    linear-gradient(160deg, var(--surface-2), var(--ink));
}

.media-fill img,
.media-fill video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-frame {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}

.media-frame-portrait {
  aspect-ratio: 4 / 5;
}

.media figcaption {
  margin-top: 0.9rem;
  color: var(--muted);
  font-size: 0.85rem;
  line-height: 1.5;
}

.media {
  margin: 0;
}

/* --------------------------------------------------------------------------
   Hero — full-bleed media with copy over it
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  display: flex;
  min-height: 100svh;
  flex-direction: column;
  justify-content: flex-end;
  overflow: hidden;
}

.hero-media {
  position: absolute;
  inset: 0;
}

/* right-anchor the hero video: on narrow screens object-fit crops the sides,
   and a centered crop squeezes the barge and rocket out of frame. Anchoring
   right guarantees the subject survives every aspect ratio; the cropped-away
   left is open water under the headline anyway. */
.hero-media .media-fill video,
.hero-media .media-fill img {
  object-position: right center;
}

.hero-media .media-fill {
  background:
    radial-gradient(90% 70% at 72% 28%, rgba(43, 175, 229, 0.28), transparent 72%),
    radial-gradient(120% 100% at 20% 90%, rgba(0, 103, 177, 0.45), transparent 70%),
    linear-gradient(165deg, #0b2444 0%, #071628 55%, var(--ink) 100%);
}

.hero-scrim {
  position: absolute;
  inset: 0;
  /* dim only where the text lives. The old full-frame wash cost the video
     its sunrise; this keeps a dark gradient under the left-side copy and the
     bottom stat strip, and leaves the launch on the right nearly untouched. */
  background:
    linear-gradient(90deg,
      rgba(5, 13, 24, 0.78) 0%,
      rgba(5, 13, 24, 0.42) 40%,
      rgba(5, 13, 24, 0.08) 66%,
      rgba(5, 13, 24, 0.02) 100%),
    linear-gradient(180deg,
      rgba(5, 13, 24, 0.42) 0%,
      rgba(5, 13, 24, 0) 30%,
      rgba(5, 13, 24, 0) 62%,
      rgba(5, 13, 24, 0.62) 100%);
}

.hero-body {
  position: relative;
  z-index: 2;
  width: min(100%, var(--shell));
  margin: 0 auto;
  padding: 10rem var(--pad) 3.5rem;
}

.kicker {
  margin: 0 0 1.4rem;
  color: var(--gold);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hero-title {
  max-width: 16ch;
  margin: 0;
  font-size: clamp(3rem, 6vw, 5.6rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.02;
}

/* the two-tone headline is used once, in the hero, and nowhere else —
   repeating it on every section heading is what made it read as a template */
.hero-title em {
  color: var(--blue-bright);
  font-style: normal;
}

.hero-deck {
  max-width: 36rem;
  margin: 1.8rem 0 0;
  color: var(--muted);
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  line-height: 1.7;
}

.hero-actions,
.button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem;
  margin-top: 2.2rem;
}

/* stat strip pinned to the bottom of the hero */
.stat-strip {
  position: relative;
  z-index: 2;
  display: grid;
  width: min(100%, var(--shell));
  margin: 0 auto;
  padding: 0 var(--pad) 2.5rem;
  gap: 1px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.stat-strip div {
  padding: 1.15rem 1rem 0 0;
  border-top: 1px solid var(--line-bright);
}

.stat-strip dt {
  margin: 0 0 0.3rem;
  color: var(--muted-dim);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.stat-strip dd {
  margin: 0;
  font-size: clamp(1.3rem, 2vw, 1.75rem);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1;
}

.stat-strip small {
  margin-left: 0.2rem;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Time-boxed notices — recruitment deadlines and similar. Both of these are
   removed by script.js once their data-expires date passes.
   -------------------------------------------------------------------------- */

.notice {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.9rem 1.5rem;
  max-width: 46rem;
  margin-top: 2.2rem;
  padding: 1rem 1.3rem;
  border-left: 3px solid var(--gold);
  background: rgba(9, 21, 36, 0.72);
}

.notice-body {
  flex: 1 1 22rem;
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.6;
}

.notice-body strong {
  display: block;
  color: var(--white);
  font-weight: 600;
}

.notice-link {
  color: var(--gold);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 160ms ease;
}

.notice-link:hover,
.notice-link:focus-visible {
  color: var(--white);
}

.callout {
  margin-top: 2.6rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem);
  border: 1px solid var(--line-bright);
  border-top: 3px solid var(--gold);
  background: rgba(5, 13, 24, 0.5);
}

.callout h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.callout > p {
  margin: 0.6rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.callout .button {
  margin-top: 1.5rem;
}

.deadline-list {
  margin: 1.3rem 0 0;
  border-top: 1px solid var(--line);
}

.deadline-list > div {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 0.3rem 1.5rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--line);
}

.deadline-list dt {
  flex: 1 1 16rem;
  color: var(--white);
  font-size: 0.88rem;
  font-weight: 600;
}

.deadline-list dd {
  margin: 0;
  color: var(--gold);
  font-size: 0.82rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.button {
  display: inline-flex;
  min-height: 3.1rem;
  align-items: center;
  justify-content: center;
  padding: 0.8rem 1.5rem;
  border: 1.5px solid transparent;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}

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

.button-primary:hover,
.button-primary:focus-visible {
  background: var(--white);
}

.button-ghost {
  border-color: var(--line-bright);
  color: var(--white);
}

.button-ghost:hover,
.button-ghost:focus-visible {
  border-color: var(--white);
  background: rgba(244, 248, 251, 0.08);
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.section {
  padding: clamp(4.5rem, 9vw, 8.5rem) 0;
}

.section-alt {
  background: var(--surface);
}

.section-media {
  background: linear-gradient(180deg, var(--ink), var(--surface) 45%, var(--ink));
}

h2 {
  max-width: 20ch;
  margin: 0;
  font-size: clamp(2.1rem, 3.8vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: balance;
}

.section-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 2.5rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.section-aside {
  max-width: 24rem;
  margin: 0 0 0.4rem;
  color: var(--muted);
  font-size: 0.95rem;
  line-height: 1.65;
}

.lead {
  color: var(--white);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem);
  font-weight: 500;
  line-height: 1.5;
}

/* Single column by default, capped to a comfortable measure. The media column
   is added only when a figure is actually present — while the figure sits in a
   <template> it is not matched, so the copy never sits beside an empty gap. */
.split {
  display: grid;
  align-items: center;
  gap: var(--gap);
  grid-template-columns: minmax(0, 68ch);
}

.split:has(.media) {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
}

.split-copy p:not(.kicker):not(.lead) {
  color: var(--muted);
  margin: 1.1rem 0 0;
}

.split-copy .lead {
  margin: 1.6rem 0 0;
}

/* --------------------------------------------------------------------------
   Media section
   -------------------------------------------------------------------------- */

.video {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--surface-2);
}

.video iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  width: 5.5rem;
  height: 5.5rem;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--gold);
  cursor: pointer;
  transform: translate(-50%, -50%);
  transition: transform 180ms ease, background 180ms ease;
}

/* display:grid would otherwise defeat the [hidden] attribute, leaving a play
   button on a slot with no video behind it */
.video-play[hidden] {
  display: none;
}

.video-play:hover,
.video-play:focus-visible {
  background: var(--white);
  transform: translate(-50%, -50%) scale(1.06);
}

.video-play span {
  width: 0;
  height: 0;
  margin-left: 0.35rem;
  border-top: 0.85rem solid transparent;
  border-bottom: 0.85rem solid transparent;
  border-left: 1.35rem solid var(--ink);
}

.video.is-playing .video-play,
.video.is-playing .media-fill {
  display: none;
}

.media-grid {
  display: grid;
  gap: clamp(1.2rem, 2.5vw, 2rem);
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* --------------------------------------------------------------------------
   Schedule
   -------------------------------------------------------------------------- */

.timeline {
  display: grid;
  gap: var(--gap);
  grid-template-columns: minmax(0, 1fr) minmax(19rem, 0.7fr);
  align-items: start;
}

.timeline-list {
  display: grid;
}

.timeline-item {
  display: grid;
  align-items: baseline;
  padding: 1.05rem 0.5rem 1.05rem 0;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  gap: 0 1.3rem;
  grid-template-columns: 2.4rem minmax(0, 1fr) auto;
  text-align: left;
  transition: padding-left 180ms ease;
}

.timeline-item:hover,
.timeline-item:focus-visible {
  padding-left: 0.6rem;
}

.timeline-item.is-active {
  padding-left: 0.9rem;
  box-shadow: inset 3px 0 0 var(--gold);
}

.timeline-num {
  color: var(--muted-dim);
  font-size: 0.75rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.timeline-name {
  font-size: clamp(1.05rem, 1.8vw, 1.35rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.timeline-date {
  color: var(--muted-dim);
  font-size: 0.75rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.timeline-item.is-active .timeline-num,
.timeline-item.is-active .timeline-date {
  color: var(--gold);
}

.timeline-detail {
  position: sticky;
  top: 7rem;
  padding: 2rem;
  background: var(--surface-2);
}

.timeline-detail-index {
  margin: 0 0 1rem;
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.timeline-detail h3 {
  /* two lines are always reserved — the longest phase name wraps, and without
     this the panel jumps as you step through phases */
  min-height: 2.2em;
  margin: 0;
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.timeline-detail time {
  display: block;
  margin-top: 0.7rem;
  color: var(--blue-bright);
  font-size: 0.8rem;
  font-weight: 500;
}

.timeline-detail-body {
  min-height: 7rem;
  margin: 1.1rem 0 0;
  color: var(--muted);
  font-size: 0.92rem;
  line-height: 1.65;
}

.timeline-controls {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.6rem;
}

.timeline-controls button {
  display: grid;
  width: 2.6rem;
  height: 2.6rem;
  place-items: center;
  border: 1px solid var(--line-bright);
  background: transparent;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease;
}

.timeline-controls button:hover,
.timeline-controls button:focus-visible {
  color: var(--ink);
  background: var(--gold);
}

/* --------------------------------------------------------------------------
   Subteams
   -------------------------------------------------------------------------- */

.team-grid,
.support-grid {
  display: grid;
  gap: 1px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  background: var(--line);
}

.team-card,
.support-card {
  padding: clamp(1.6rem, 2.6vw, 2.2rem);
  background: var(--ink);
}

.section-alt .team-card,
.section-alt .support-card {
  background: var(--surface);
}

.team-card h3,
.support-card h3 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.2;
}

.team-scope {
  margin: 0.55rem 0 0;
  color: var(--gold);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.team-card p:not(.team-scope),
.support-card p {
  margin: 1rem 0 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.65;
}

.sponsor-cta {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
}

.sponsor-cta > p {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   Updates page
   -------------------------------------------------------------------------- */

.page-head {
  padding: clamp(9rem, 14vw, 12rem) 0 clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
  background:
    radial-gradient(90% 120% at 15% 0%, rgba(0, 103, 177, 0.35), transparent 70%),
    var(--ink);
}

.page-title {
  max-width: 18ch;
  margin: 0;
  font-size: clamp(2.4rem, 5vw, 4rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.page-deck {
  max-width: 42ch;
  margin: 1.2rem 0 0;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.65;
}

.update-list {
  display: grid;
  gap: clamp(2.5rem, 5vw, 4rem);
}

.update {
  display: grid;
  align-items: start;
  gap: clamp(1rem, 3vw, 3rem);
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}

.update:last-of-type {
  padding-bottom: 0;
  border-bottom: 0;
}

.update-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding-top: 0.4rem;
}

.update-meta time {
  color: var(--muted);
  font-size: 0.8rem;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

.update-tag {
  align-self: start;
  padding: 0.2rem 0.55rem;
  color: var(--gold);
  border: 1px solid rgba(255, 201, 4, 0.4);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Entries collapse with native <details>, so the page stays short as it grows
   and the disclosure still works with JavaScript disabled. */
.update summary {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 1.5rem;
  cursor: pointer;
  list-style: none;
}

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

.update summary::after {
  flex: none;
  width: 0.62rem;
  height: 0.62rem;
  margin-top: 0.55rem;
  border-right: 2px solid var(--muted-dim);
  border-bottom: 2px solid var(--muted-dim);
  content: "";
  transform: rotate(45deg);
  transition: transform 200ms ease, border-color 160ms ease;
}

.update details[open] > summary::after {
  transform: rotate(-135deg);
}

.update summary:hover::after,
.update summary:focus-visible::after {
  border-color: var(--gold);
}

.update-title {
  max-width: 28ch;
  margin: 0;
  font-size: clamp(1.45rem, 2.5vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.15;
  transition: color 160ms ease;
}

.update summary:hover .update-title,
.update summary:focus-visible .update-title {
  color: var(--gold);
}

.update-body {
  max-width: 62ch;
  padding-top: 0.4rem;
}

.update-body h3 {
  margin: 2.2rem 0 0;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}

.update-body p {
  margin: 1.1rem 0 0;
  color: var(--muted);
  line-height: 1.7;
}

.update-body .lead {
  margin-top: 1.4rem;
  color: var(--white);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 500;
  line-height: 1.5;
}

.update-body a:not(.button) {
  color: var(--white);
  border-bottom: 1px solid var(--blue-bright);
  transition: color 160ms ease, border-color 160ms ease;
}

.update-body a:not(.button):hover,
.update-body a:not(.button):focus-visible {
  color: var(--gold);
  border-color: var(--gold);
}

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

.site-footer {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
  border-top: 1px solid var(--line);
}

.footer-inner {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem;
}

.footer-brand {
  width: clamp(8.5rem, 12vw, 11rem);
}

.footer-orgs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.footer-meta {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  color: var(--muted-dim);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.footer-meta a {
  color: var(--white);
  transition: color 160ms ease;
}

.footer-meta a:hover,
.footer-meta a:focus-visible {
  color: var(--gold);
}

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

.reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 700ms ease, transform 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

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

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

@media (max-width: 980px) {
  .nav-toggle {
    display: block;
    order: 2;
  }

  .primary-nav {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 1.25rem var(--pad) 1.75rem;
    background: rgba(5, 13, 24, 0.97);
    backdrop-filter: blur(14px);
    gap: 0;
  }

  .primary-nav.is-open {
    display: flex;
  }

  .primary-nav a:not(.nav-cta) {
    padding: 0.9rem 0;
    border-bottom: 1px solid var(--line);
  }

  .nav-cta {
    margin-top: 1rem;
    text-align: center;
  }

  .nav-toggle[aria-expanded="true"] span:first-child {
    transform: translateY(0.4rem) rotate(45deg);
  }

  .nav-toggle[aria-expanded="true"] span:last-child {
    transform: translateY(-0.4rem) rotate(-45deg);
  }

  .split,
  .timeline,
  .update {
    grid-template-columns: 1fr;
  }

  .update-meta {
    padding-top: 0;
  }

  .timeline-detail {
    position: static;
  }

  .media-grid,
  .team-grid,
  .support-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-head {
    flex-direction: column;
    align-items: start;
    gap: 1.5rem;
  }
}

/* Mobile hero framing: a portrait phone shows roughly a quarter of the
   film's width. 82% centers that slice on the barge and trail instead of
   pinning to the frame edge, and the scrim goes vertical because the text
   sits on the video rather than beside it. */
@media (max-width: 700px) {
  .hero-media .media-fill video,
  .hero-media .media-fill img {
    object-position: 82% center;
  }

  .hero-scrim {
    background: linear-gradient(180deg,
      rgba(5, 13, 24, 0.50) 0%,
      rgba(5, 13, 24, 0.22) 26%,
      rgba(5, 13, 24, 0.46) 54%,
      rgba(5, 13, 24, 0.82) 100%);
  }

  /* text shadow instead of more scrim: the body copy crosses the sun's
     reflection mid-frame, and shadowing the letters protects them without
     dimming the film */
  .hero-title,
  .hero-deck,
  .kicker {
    text-shadow: 0 1px 14px rgba(5, 13, 24, 0.65), 0 0 3px rgba(5, 13, 24, 0.5);
  }
}

@media (max-width: 620px) {
  .hero-body {
    padding-top: 8.5rem;
  }

  .hero-title {
    font-size: clamp(2.6rem, 12vw, 4rem);
  }

  .stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 1rem;
  }

  .media-grid,
  .team-grid,
  .support-grid {
    grid-template-columns: 1fr;
  }

  .timeline-item {
    gap: 0.3rem 1rem;
    grid-template-columns: 2rem minmax(0, 1fr);
  }

  .timeline-date {
    grid-column: 2;
  }

  .timeline-detail {
    padding: 1.5rem;
  }

  /* descriptions wrap to more lines here — hold the panel steady so switching
     phases doesn't shove the page around */
  .timeline-detail-body {
    min-height: 9.5rem;
  }

  .video-play {
    width: 4rem;
    height: 4rem;
  }

  .footer-inner {
    gap: 1.5rem;
  }

  .footer-meta {
    width: 100%;
    justify-content: space-between;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}