/* optweb-mission — the Mission page.
   A static document, not a leg of the Descent: the scroll engine
   (scrollcraft.js/page.js) is deliberately not loaded here. What it borrows
   from the landing page is the token set, the reset and the nav, so the two
   read as one site; what it does NOT borrow is the worldflight layout, since
   this page is meant to be read rather than flown through.

   No inline <style> and no inline <script> anywhere in mission.html — the
   site ships a CSP with neither 'unsafe-inline' in script-src nor in
   style-src, so every rule for this page lives in this file. */

/* ---- page shell --------------------------------------------------------
   The landing page's nav is position: fixed, so a static document has to
   reserve the band itself or the first line sits under the wordmark — the
   same collision --descent-nav-h was introduced (descent.css) to fix. */
.mission-main {
  position: relative;
  z-index: var(--sc-z-copy);
  padding-top: calc(var(--descent-nav-h) + var(--sc-8));
  padding-inline: var(--sc-gutter);
  padding-bottom: var(--sc-9);
  margin-inline: auto;
  max-width: var(--sc-maxw);
}

/* A shared measure for prose, narrower than --sc-measure: this page is read
   top to bottom, and 62ch of 18px text at desktop is a wall. */
.mission-main p { text-wrap: pretty; }

/* ---- the light slit ----------------------------------------------------
   Zumthor's Therme Vals, not a gradient blob: a single hard shaft of cold
   light entering a dark mass from above. Deliberately off-centre and taller
   than it is wide so it reads as architecture rather than as decoration.
   Fixed, behind everything, no motion — the atmosphere of the page. */
.mission-slit {
  position: fixed;
  top: -18vh;
  left: 58%;
  width: min(46rem, 90vw);
  height: 120vh;
  transform: translateX(-50%) rotate(9deg);
  background:
    radial-gradient(
      55% 40% at 50% 22%,
      color-mix(in oklab, var(--sc-accent) 13%, transparent) 0%,
      transparent 70%
    );
  filter: blur(18px);
  pointer-events: none;
  z-index: 0;
}

/* ---- statement ---------------------------------------------------------
   One declaration at the largest step on the ramp. Scale contrast is the
   hierarchy here; there is no card, badge or rule competing with it. */
.statement {
  padding-block: var(--sc-7) var(--sc-10);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
}
.statement__kicker {
  display: block;
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
  margin-bottom: var(--sc-5);
}
.statement__title {
  max-width: 17ch;
  margin-bottom: var(--sc-6);
}
.statement__lede {
  max-width: 52ch;
  font-size: var(--sc-t-lg);
  line-height: 1.5;
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  margin: 0;
}

/* ---- premise: asymmetric, not a two-up card row ------------------------
   A wide prose column and a narrow mono margin note, the proportions of a
   printed page rather than a 50/50 split. The note is set in the mono face
   because it is an annotation on the argument, not part of it. */
.premise {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--sc-8) var(--sc-9);
  padding-block: var(--sc-9);
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
}
/* .sc-display ships margin: 0, so the heading would otherwise sit directly
   on top of the first paragraph. */
.premise__body h2 { margin: 0 0 var(--sc-5); }
.premise__body p {
  max-width: 54ch;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-5);
}
.premise__body p:last-child { margin-bottom: 0; }
.premise__body strong {
  color: var(--sc-ink);
  font-weight: 500;
}
.premise__note {
  align-self: start;
  border-left: 1px solid color-mix(in oklab, var(--sc-accent) 34%, transparent);
  padding-left: var(--sc-5);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  line-height: 1.66;
  color: var(--sc-ink-soft);
}
.premise__note b {
  display: block;
  font-weight: 500;
  color: var(--sc-accent);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  font-size: var(--sc-t-xs);
  margin-bottom: var(--sc-3);
}

/* ---- strata: what we actually do --------------------------------------
   Three full-width bands separated by hairlines, echoing the legs of the
   Descent without reproducing them. The band is the unit, not a card: no
   background fill, no radius, no shadow — mass and rule only, which is the
   Svalbard/Giedi Prime register the brief asked for. */
.strata {
  padding-block: var(--sc-9) var(--sc-8);
}
.section-label {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  margin: 0 0 var(--sc-7);
}
.stratum {
  position: relative;
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 1.15fr);
  gap: var(--sc-6);
  align-items: start;
  padding-block: var(--sc-7);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 11%, transparent);
}
.stratum:last-of-type {
  border-bottom: 1px solid color-mix(in oklab, var(--sc-ink) 11%, transparent);
}
/* The accent edge wipes in along the band's top rule on hover/focus.
   transform-only (scaleX), so it composites and never reflows the grid. */
.stratum::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: -1px;
  height: 1px;
  background: var(--sc-accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--sc-d-slow) var(--sc-ease-out);
}
.stratum:hover::before,
.stratum:focus-within::before { transform: scaleX(1); }

.stratum__index {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  color: var(--sc-ink-soft);
  padding-top: 0.55em;
  font-variant-numeric: tabular-nums;
}
.stratum__name {
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-snug);
  color: var(--sc-ink);
  margin: 0;
}
.stratum__body {
  color: var(--sc-ink-soft);
  margin: 0;
  max-width: 48ch;
}

/* ---- ambition: the largest claims, set as a list of declarations -------
   Deliberately not three equal cards. Each line is its own beat at display
   scale, with a hanging mono marker in the gutter. */
.ambition {
  padding-block: var(--sc-9);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
}
.ambition__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sc-7);
}
.ambition__item {
  display: grid;
  grid-template-columns: 6rem minmax(0, 1fr);
  gap: var(--sc-6);
  align-items: baseline;
}
.ambition__marker {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-accent);
}
.ambition__text {
  font-family: var(--sc-font-display);
  font-weight: 500;
  font-size: var(--sc-t-2xl);
  line-height: var(--sc-leading-tight);
  letter-spacing: var(--sc-track-tight);
  color: var(--sc-ink);
  margin: 0;
  max-width: 22ch;
  text-wrap: balance;
}
.ambition__text span {
  display: block;
  font-family: var(--sc-font-text);
  font-weight: 400;
  font-size: var(--sc-t-base);
  line-height: var(--sc-leading-body);
  letter-spacing: var(--sc-track-normal);
  color: var(--sc-ink-soft);
  max-width: 46ch;
  margin-top: var(--sc-4);
}

/* ---- principles: the constraints we hold, set tight and mono ----------
   These are rules the company binds itself to, so they are typeset like
   rules: mono, numbered, no prose padding around them. */
.principles {
  padding-block: var(--sc-9);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
}
.principles__grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sc-6) var(--sc-9);
}
.principle {
  display: grid;
  grid-template-columns: 2.75rem minmax(0, 1fr);
  gap: var(--sc-4);
  padding-top: var(--sc-4);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 11%, transparent);
}
.principle__n {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  color: var(--sc-accent);
  font-variant-numeric: tabular-nums;
  padding-top: 0.15em;
}
.principle__t {
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-sm);
  line-height: 1.6;
  color: var(--sc-ink);
  margin: 0;
}
.principle__t em {
  display: block;
  font-family: var(--sc-font-text);
  font-style: normal;
  font-size: var(--sc-t-sm);
  color: var(--sc-ink-soft);
  margin-top: var(--sc-2);
}

/* ---- close -------------------------------------------------------------
   One ignition point, matching the Surface Key's logic: a single CTA, no
   secondary button competing with it. */
.close {
  padding-block: var(--sc-9);
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
  text-align: center;
}
.close__title {
  max-width: 20ch;
  margin: 0 auto var(--sc-6);
}
.close__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--sc-2);
  font-family: var(--sc-font-display);
  font-weight: 600;
  font-size: var(--sc-t-base);
  color: var(--sc-accent-ink);
  background: linear-gradient(180deg, #ffffff, var(--sc-ink));
  border: 1.5px solid color-mix(in oklab, var(--sc-accent) 70%, transparent);
  padding: var(--sc-3) var(--sc-6);
  border-radius: var(--sc-r-pill);
  text-decoration: none;
  box-shadow:
    0 30px 60px -16px rgba(0, 0, 0, 0.95),
    0 0 60px -2px color-mix(in oklab, var(--sc-accent) 55%, transparent);
  transition:
    transform var(--sc-d-fast) var(--sc-ease-out),
    background var(--sc-d-base) var(--sc-ease-out),
    border-color var(--sc-d-base) var(--sc-ease-out),
    box-shadow var(--sc-d-base) var(--sc-ease-out);
}
.close__cta:hover {
  transform: scale(1.045);
  background: #ffffff;
  border-color: var(--sc-accent);
  box-shadow:
    0 34px 68px -16px rgba(0, 0, 0, 1),
    0 0 84px 4px color-mix(in oklab, var(--sc-accent) 80%, transparent);
}
.close__cta:active { transform: scale(0.97); }
.close__back {
  display: block;
  margin-top: var(--sc-6);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.close__back:hover { color: var(--sc-ink); }

/* ---- footer ------------------------------------------------------------ */
.mission-foot {
  position: relative;
  z-index: var(--sc-z-copy);
  padding: var(--sc-6) var(--sc-gutter) var(--sc-8);
  margin-inline: auto;
  max-width: var(--sc-maxw);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sc-4) var(--sc-6);
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid color-mix(in oklab, var(--sc-ink) 9%, transparent);
  font-family: var(--sc-font-mono);
  font-size: var(--sc-t-xs);
  letter-spacing: var(--sc-track-wide);
  text-transform: uppercase;
  color: var(--sc-ink-soft);
}
.mission-foot a {
  color: var(--sc-ink-soft);
  text-decoration: none;
  transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.mission-foot a:hover { color: var(--sc-ink); }

/* ---- nav: this page has no leg rail, so the wordmark and the links are
   the only two children and space-between already places them correctly.
   The current page gets a persistent accent underline, the same signal the
   rail uses for the active leg. ---------------------------------------- */
.descent-links a[aria-current="page"] {
  color: var(--sc-ink);
  box-shadow: 0 1px 0 var(--sc-accent);
}

/* ---- responsive --------------------------------------------------------
   Every multi-column grid collapses to one column; the hanging mono markers
   move above their content rather than shrinking into an unreadable gutter. */
@media (max-width: 900px) {
  .premise { grid-template-columns: minmax(0, 1fr); gap: var(--sc-7); }
  .principles__grid { grid-template-columns: minmax(0, 1fr); }
  .stratum { grid-template-columns: 4rem minmax(0, 1fr); }
  .stratum__body { grid-column: 2; max-width: none; }
}
@media (max-width: 620px) {
  .mission-main { padding-top: calc(var(--descent-nav-h) + var(--sc-6)); }
  .stratum,
  .ambition__item { grid-template-columns: minmax(0, 1fr); gap: var(--sc-3); }
  .stratum__body { grid-column: auto; }
  .stratum__index { padding-top: 0; }
  .mission-slit { left: 50%; width: 130vw; filter: blur(26px); }
}

/* ---- reduced motion ----------------------------------------------------
   Matching scrollcraft.css's stance: fewer and gentler, not zero. The
   hairline wipe is a position change, so it is dropped to a plain state
   change; colour transitions on links and the CTA stay. */
@media (prefers-reduced-motion: reduce) {
  .stratum::before { transition: none; }
  .close__cta { transition: background var(--sc-d-base) linear, border-color var(--sc-d-base) linear; }
  .close__cta:hover,
  .close__cta:active { transform: none; }
}