/* Tokens come from styles.css (shared, theme-aware). */

html {
  scroll-snap-type: y mandatory;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.deck {
  width: 100%;
}

.slide {
  display: grid;
  align-content: center;
  min-height: 100vh;
  padding: clamp(28px, 6vw, 72px);
  scroll-snap-align: start;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
}

.slide:nth-child(even) {
  background: color-mix(in srgb, var(--water2) 7%, var(--paper));
}

.title,
.final {
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(23, 32, 28, 0.9), rgba(23, 32, 28, 0.55)),
    url("https://assets.science.nasa.gov/content/dam/science/esd/eo/images/imagerecords/76000/76127/lakeerie_tm5_2011278_lrg.jpg");
  background-position: center;
  background-size: cover;
}

.kicker {
  margin: 0 0 14px;
  color: var(--blue);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0;
  text-transform: uppercase;
}

.title .kicker,
.final .kicker {
  color: #dfeee7;
}

h1,
h2,
p,
ul,
ol {
  max-width: 980px;
  margin-top: 0;
}

h1 {
  margin-bottom: 16px;
  font-size: clamp(54px, 10vw, 118px);
  line-height: 0.92;
}

h2 {
  margin-bottom: 22px;
  font-size: clamp(34px, 6vw, 76px);
  line-height: 0.98;
}

p,
li {
  color: var(--muted);
  font-size: clamp(20px, 2.2vw, 31px);
  line-height: 1.32;
}

.title p,
.final p {
  color: #eef7f2;
}

.split {
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.75fr);
  align-items: center;
  gap: clamp(26px, 5vw, 70px);
}

ul,
ol {
  margin-bottom: 0;
  padding-left: 1.2em;
}

li + li {
  margin-top: 14px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 980px;
}

.metric-row article {
  display: grid;
  gap: 12px;
  min-height: 150px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.metric-row span {
  color: var(--muted);
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
}

.metric-row strong {
  color: var(--green);
  font-size: clamp(42px, 7vw, 76px);
  line-height: 0.95;
}

.timeline {
  display: grid;
  gap: 16px;
  padding-left: 0;
  list-style: none;
}

.timeline li {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 18px;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}

.timeline strong {
  color: var(--green);
  font-size: 18px;
}

.timeline span {
  color: var(--muted);
}

@media (max-width: 820px) {
  .split,
  .metric-row,
  .timeline li {
    grid-template-columns: 1fr;
  }

  .slide {
    min-height: auto;
    padding-top: 54px;
    padding-bottom: 54px;
  }
}

/* Deck body typography wins over styles.css base sizes below this line. */
.deck h2 { margin-bottom: 22px; font-size: clamp(34px, 6vw, 76px); line-height: 0.98; }

/* Deck slides snap to the viewport top; a sticky header would cover each
   snapped slide, so the shared header scrolls away on this page only. */
.nav { position: sticky; top: 0; z-index: 40; }
/* The snap container must reserve the header's height, or every snapped slide slides its top
   under the sticky bar (the original 'hidden under header' bug that led to the static hack —
   which then made the tabs vanish entirely once you scrolled: Ryan's 'erases top tabs'). */
html { scroll-padding-top: 148px; }
section, .slide { scroll-margin-top: 148px; }