/* optweb-descent — page-specific theme + layout.
   Extracted from index.html's inline <style> so the site can ship a CSP with
   no 'unsafe-inline' in style-src. Content is unchanged from the inline
   version; only the <style>/</style> wrapper was removed. */

:root {
  /* Six tokens, two faces — the whole rebrand. Cold obsidian + crystalline
     light, not the neon/AI-purple glow taste.md refuses by default. */
  --sc-canvas:     #050608;
  --sc-surface:    #0d1013;
  --sc-ink:        #eef2f4;
  --sc-ink-soft:   #8b969c;
  --sc-accent:     #bfe9f5;
  --sc-accent-ink: #050608;
  --sc-font-display: "Archivo", system-ui, sans-serif;
  --sc-font-text:    "Geist", system-ui, sans-serif;
  --sc-font-mono:    "Geist Mono", ui-monospace, monospace;

  /* Height of the fixed .descent-nav band, derived from the same inputs the
     nav lays itself out from: its block padding (--sc-3 top and bottom) plus
     the wordmark's line box (--sc-t-lg at the display face's ~1.65 ratio,
     which is also taller than the 1.1em ring beside it). Anything drawn at
     the top of a segment must clear this or it collides with the wordmark. */
  --descent-nav-h: calc(var(--sc-3) * 2 + var(--sc-t-lg) * 1.65);
}

/* ---- nav: a waypoint map, per Continuous World's grammar rules --------- */
.descent-nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--sc-z-chrome);
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sc-3) var(--sc-gutter);
  background: linear-gradient(180deg, color-mix(in oklab, var(--sc-canvas) 88%, transparent), transparent);
  pointer-events: none;
}
.descent-nav > * { pointer-events: auto; }
.descent-mark {
  font-family: var(--sc-font-display); font-weight: 700; font-size: var(--sc-t-lg);
  letter-spacing: var(--sc-track-tight); color: var(--sc-ink); text-decoration: none;
  display: flex; align-items: center; gap: var(--sc-2);
}
.descent-mark__ring { width: 1.1em; height: 1.1em; border-radius: 50%; border: 1.5px solid var(--sc-accent); flex: none; }
.rail { display: flex; gap: var(--sc-6); list-style: none; margin: 0; padding: 0; }
.rail__leg {
  background: none; border: none; cursor: pointer; 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); padding: var(--sc-1) 0; position: relative;
  transition: color var(--sc-d-base) var(--sc-ease-out);
}
.rail__leg::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -3px; height: 1px;
  background: var(--sc-accent); transition: right var(--sc-d-slow) var(--sc-ease-out);
}
.rail__leg[aria-current="true"] { color: var(--sc-ink); }
.rail__leg[aria-current="true"]::after { right: 0; }
.rail__leg:focus-visible { outline: 2px solid var(--sc-accent); outline-offset: 4px; }
.descent-links { display: flex; align-items: center; gap: var(--sc-5); }
.descent-links a {
  font-family: var(--sc-font-text); font-size: var(--sc-t-sm); color: var(--sc-ink-soft);
  text-decoration: none; transition: color var(--sc-d-fast) var(--sc-ease-out);
}
.descent-links a:hover, .descent-links a:focus-visible { color: var(--sc-ink); }
@media (max-width: 780px) { .rail { display: none; } }
/* Below ~560px the wordmark plus four links no longer fit the gutter-to-gutter
   band and the first link collides with "OPTWEB" (seen at 390px once Mission
   was added as a fourth item). Tighten the link row rather than hiding it:
   these are the only navigation on the site once the rail is gone, so they
   have to stay reachable. Kept at --sc-t-xs, which is the same step the rail
   and leg labels use, so it reads as intentional at small sizes. */
@media (max-width: 560px) {
  .descent-links { gap: var(--sc-4); }
  .descent-links a { font-size: var(--sc-t-xs); }
}
@media (max-width: 410px) {
  .descent-links { gap: var(--sc-3); }
}
/* At 320–380px even the tightened row cannot share a line with the wordmark
   (measured: the two touch at exactly 320px), so the links drop to their own
   row and spread across the full width. --descent-nav-h has to grow by that
   second row, or everything keyed to it — the leg labels on the landing page,
   .mission-main's top padding — slides back under the nav. */
@media (max-width: 380px) {
  :root {
    --descent-nav-h: calc(var(--sc-3) * 2 + var(--sc-t-lg) * 1.65 + var(--sc-t-xs) * 2.1 + var(--sc-2));
  }
  .descent-nav { flex-wrap: wrap; row-gap: var(--sc-2); }
  .descent-links { width: 100%; justify-content: space-between; gap: var(--sc-2); }
}

/* ---- world segments: canvas only, no image/video ----------------------- */
.sc-world__seg canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.leg-label {
  /* Was top: var(--sc-6) (2rem) — that put every leg label at the same origin
     as the OPTWEB wordmark, which is 12–51px down the same gutter, so all five
     labels rendered on top of the mark through the nav's translucent scrim.
     Clear the nav band instead. */
  position: absolute; left: var(--sc-gutter); top: calc(var(--descent-nav-h) + var(--sc-4));
  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); opacity: 0.6;
}

/* ---- copy typography ---------------------------------------------------- */
.descent-copy h1 { max-width: 15ch; }
.descent-copy h2 { max-width: 13ch; }
.descent-copy p.sc-body { max-width: var(--sc-measure); }
.descent-copy .kicker {
  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); display: block; margin-bottom: var(--sc-3);
}

/* ---- finale scrim: opacity driven by page.js, matching the copy window - */
.finale-scrim {
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  width: min(70vw, 60rem); height: min(70vw, 40rem); border-radius: 50%;
  background: radial-gradient(circle, color-mix(in oklab, var(--sc-canvas) 82%, transparent) 0%, transparent 72%);
  opacity: 0; pointer-events: none;
}

/* ---- the surface key CTA, an object in the scene, not a floating button -
   Opacity/pointer-events are driven by page.js (updateKeyCta), timed to
   arrive only after the closing line has faded back out — see LEG_KEY_CTA
   there. Starts hidden so there is no flash-of-visible before JS runs. */
.key-cta {
  /* top must match drawKey's cy = h * 0.42 in page.js exactly — canvas and
     button share the same box (.sc-world__seg { inset: 0 }), so any
     mismatch here is the button sitting off-center from the ring itself,
     not a layout accident. */
  position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%);
  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);
  /* Fill is the same white used for headline/nav text elsewhere on the
     page (var(--sc-ink)), so the button reads as made of the same "ink" as
     everything else, not a random borrowed color. Text goes dark for
     contrast against it, same pairing var(--sc-accent) already uses. */
  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;
  /* Drop shadow lifts it off the ring/canvas behind it; the outer glow in
     the accent color is what separates a light pill from the dark scene
     around it — the previous flat fill + var(--sc-e2) had neither, which
     is exactly the "low visibility, no depth" flagged. */
  box-shadow:
    0 30px 60px -16px rgba(0, 0, 0, 0.95),
    0 0 60px -2px color-mix(in oklab, var(--sc-accent) 75%, transparent);
  opacity: 0; pointer-events: none;
  transition: transform 160ms var(--sc-ease-out), background 200ms var(--sc-ease-out),
    border-color 200ms var(--sc-ease-out), box-shadow 200ms var(--sc-ease-out);
}
.key-cta:hover {
  transform: translate(-50%, -50%) 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) 90%, transparent);
}
.key-cta:active { transform: translate(-50%, -50%) scale(0.97); }
.key-cta:focus-visible {
  outline: none;
  box-shadow:
    inset 0 0 0 3px color-mix(in oklab, var(--sc-accent) 60%, transparent),
    0 30px 60px -16px rgba(0, 0, 0, 0.95),
    0 0 60px -2px color-mix(in oklab, var(--sc-accent) 75%, transparent);
}
.key-foot {
  position: absolute; left: 0; right: 0; bottom: var(--sc-7); text-align: center;
  font-family: var(--sc-font-mono); font-size: var(--sc-t-xs); color: var(--sc-ink-soft);
  letter-spacing: var(--sc-track-wide); text-transform: uppercase;
}

/* ---- progress + grain already themed by scrollcraft.css ----------------- */
/* The X-Ray Refinery Lens signature move now renders directly on
   #cv-trench (see page.js: drawTrench's `lens` branch) rather than as a
   floating overlay element — press and hold over the drifting fragments. */