/* ============================================================
   MISSION PAGE — essay layout, PT Serif body
   ============================================================ */

/* PT Serif token — used only on this page */
:root {
  --font-serif: 'PT Serif', Georgia, 'Times New Roman', serif;
}

/* Body override — keeps main site unaffected, only scopes to .mission-page */
.mission-page {
  background: #ffffff;
}

/* ============================================================
   LAYOUT
   ============================================================ */
.mission-main {
  padding: 96px 0 120px;
}

/* Narrow reading column — 65ch max keeps lines at ~60-68 chars */
.mission-container {
  max-width: 680px;
  margin: 0 auto;
  padding: 0 var(--space-4);
}

/* ============================================================
   OPENING & CLOSING — no heading, cold prose
   ============================================================ */
.mission-opening {
  padding-bottom: 72px;
  border-bottom: 1px solid var(--gray-300);
  margin-bottom: 72px;
}

.mission-opening .mission-prose {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  line-height: 1.75;
  color: var(--gray-900);
  margin-bottom: 0.6em;
}

.mission-opening .mission-prose:last-child {
  margin-bottom: 0;
}

.mission-closing {
  padding-top: 72px;
  border-top: 1px solid var(--gray-300);
  margin-top: 72px;
}

.mission-closing .mission-prose {
  color: var(--gray-700);
}

.mission-closing-last {
  margin-top: 2em;
  color: var(--gray-900) !important;
  font-weight: 700 !important;
}

/* ============================================================
   SECTIONS
   ============================================================ */
.mission-section {
  padding: 56px 0;
  border-bottom: 1px solid var(--gray-100);
}

.mission-section:last-of-type {
  border-bottom: none;
}

/* ============================================================
   EYEBROW — section waypoints, not billboards
   ============================================================ */
.mission-eyebrow {
  display: block;
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gray-400);
  margin-bottom: 28px;
}

/* ============================================================
   PROSE BLOCK
   ============================================================ */
.mission-prose-block {
  /* slight indentation from eyebrow for visual breathing room */
}

.mission-prose {
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  line-height: 1.85;
  color: var(--gray-700);
  margin-bottom: 1.4em;
}

.mission-prose:last-child {
  margin-bottom: 0;
}

/* Emphasis: standalone one-liners feel punchier */
.mission-prose-block .mission-prose:only-child,
.mission-prose-block .mission-prose + .mission-prose:last-child {
  color: var(--gray-900);
}

/* ============================================================
   KARDASHEV TABLE — plain typographic treatment
   ============================================================ */
.mission-kardashev-table {
  margin: 40px 0;
  border-top: 1px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
}

.kd-row {
  display: grid;
  grid-template-columns: 48px 96px 1fr;
  gap: 0;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray-100);
  align-items: baseline;
}

.kd-row:last-child {
  border-bottom: none;
}

.kd-row-header {
  padding: 10px 0;
}

.kd-row-header .kd-type,
.kd-row-header .kd-power,
.kd-row-header .kd-desc {
  font-family: var(--font);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gray-400);
}

.kd-type {
  font-family: var(--font-mono);
  font-size: 1rem;
  font-weight: 500;
  color: var(--gray-900);
  line-height: 1.5;
}

.kd-power {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--gray-500);
  padding-right: 16px;
  line-height: 1.5;
}

.kd-power sup {
  font-size: 0.65em;
}

.kd-desc {
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  color: var(--gray-600);
  line-height: 1.6;
}

/* Marker for where humanity currently sits */
.kd-current {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--orange-500);
  font-style: normal;
  display: inline-block;
  margin-left: 8px;
  white-space: nowrap;
}

/* ============================================================
   PULL QUOTES
   ============================================================ */
.mission-pullquote {
  margin: 0;
  padding: 48px 0;
  border-left: 2px solid var(--orange-400);
  padding-left: 28px;
  margin-left: 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.25rem;
  line-height: 1.65;
  color: var(--gray-700);
}

/* ============================================================
   NAV — mission link styling (subtle, muted)
   ============================================================ */
.nav-link-mission {
  color: var(--gray-400);
  font-size: 0.8125rem;
}

.nav-link-mission:hover {
  color: var(--gray-700);
}

.nav-link-active {
  color: var(--gray-900) !important;
}

.nav-link-active::after {
  transform: scaleX(1) !important;
}

/* ============================================================
   SCROLL ANIMATIONS — same system as main site
   ============================================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 768px) {
  .mission-main {
    padding: 64px 0 96px;
  }

  .mission-opening .mission-prose {
    font-size: 1.1875rem;
  }

  .mission-prose {
    font-size: 1.0625rem;
    line-height: 1.8;
  }

  .mission-pullquote {
    font-size: 1.0625rem;
    padding: 36px 0 36px 20px;
  }

  .mission-opening,
  .mission-closing {
    padding-bottom: 48px;
    margin-bottom: 48px;
  }

  .mission-closing {
    padding-top: 48px;
    margin-top: 48px;
  }

  .mission-section {
    padding: 40px 0;
  }

  .kd-row {
    grid-template-columns: 36px 80px 1fr;
    gap: 0;
  }

  .kd-desc {
    font-size: 0.875rem;
  }
}

@media (max-width: 480px) {
  .kd-row {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 16px 0;
  }

  .kd-row-header {
    display: none;
  }

  .kd-type::before {
    content: 'Type ';
    font-family: var(--font);
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gray-400);
    display: block;
    margin-bottom: 2px;
  }

  .kd-power {
    font-size: 0.75rem;
  }
}