/* ============================================================================
   index7.css — direction G, the scrollcraft build.
   ----------------------------------------------------------------------------
   scrollcraft.css is the mechanism and is never edited. This file is the theme
   and the page's own classes, and nothing in it restyles a [data-sc-*] selector.

   THE SIX TOKENS ARE OUR PALETTE, NOT A NEW ONE. Every value below is lifted
   from tokens.css. The skill's system replaces ours on this page — two token
   systems in one build is two design systems in one build — but the colours
   underneath are the same colours. If a value here ever stops matching
   tokens.css, this page has quietly become a different brand, and that is the
   thing to check first when it looks wrong.
   ========================================================================== */

:root {
  --sc-canvas:     #14171a;   /* --graphite-900 */
  --sc-surface:    #1a1d21;   /* --graphite-800 */
  --sc-ink:        #eef0f2;   /* --bone-050 */
  --sc-ink-soft:   #9aa0a6;   /* --bone-300, the muted rank */
  --sc-accent:     #820007;   /* --oxblood, and it is measured, not chosen */
  --sc-accent-ink: #eef0f2;

  /* TWO FACES. Mono is deliberately not loaded — see the note at the top of
     index7.html. Familjen carries voice, Source Sans carries prose. */
  --sc-font-display: "Familjen Grotesk", system-ui, sans-serif;
  --sc-font-text:    "Source Sans 3", system-ui, sans-serif;
}

/* ── the live surface ────────────────────────────────────────────────────────
   Fixed, full-viewport, behind everything, and shared by both pinned acts. It
   fades where no act wants it rather than being torn down and rebuilt: a WebGL
   context is expensive to make and the model behind it is 3.8 MB. */
.g-surface {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* The canvas takes the pointer back only while an act is using it, so the drag
   never fights the scroll on a section that has nothing to turn. */
[data-g-act='arrival'] .g-surface,
[data-g-act='signature'] .g-surface { opacity: 1; }
[data-g-act='arrival'] .g-surface { pointer-events: auto; }

.g-surface__canvas {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  cursor: grab;
}
.g-surface__canvas:active { cursor: grabbing; }

/* Acts sit above the surface; the stages themselves stay transparent so the one
   scene shows through all of them. */
.g-act { position: relative; z-index: 1; }

.g-stage {
  display: grid;
  align-items: center;
  block-size: 100svh;
  padding-inline: var(--sc-gutter);
}

.g-lead { max-inline-size: 34rem; }

.g-lead--right {
  justify-self: end;
  text-align: end;
  max-inline-size: 26rem;
}

/* Multi-line headings keep their authored breaks: the kinetic device splits on
   lines, and a heading that rewraps at a different width gets a different
   stagger, which is a composition changing under the reader. */
.sc-display--xl,
.sc-display--l { white-space: pre-line; }

/* ── 2 · the record ──────────────────────────────────────────────────────────
   The figures have no mono to carry them on this page, so weight and tracking
   do it: the number is heavy and tight, the unit is light and open, and the
   rank between them is unambiguous before either is read. */
.g-record { padding-block: var(--sc-section); }

.g-record__inner {
  max-inline-size: 62rem;
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
}

.g-record__kicker {
  color: var(--sc-ink-soft);
  margin-block-end: var(--sc-8);
}

.g-figures {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sc-9);
}

.g-figures li {
  display: grid;
  gap: var(--sc-2);
  border-block-start: 1px solid rgb(255 255 255 / 0.10);
  padding-block-start: var(--sc-5);
}

.g-figures__n {
  font-family: var(--sc-font-display);
  font-weight: 700;
  font-size: clamp(3rem, 8vw, 5.5rem);
  line-height: 0.96;
  letter-spacing: -0.03em;
  color: var(--sc-ink);
}

.g-figures__u {
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--sc-ink);
}

.g-figures__l { color: var(--sc-ink-soft); max-inline-size: 46ch; }

/* ── 3 · the walk ────────────────────────────────────────────────────────────
   Lateral travel under vertical scroll. The rail is wider than the viewport by
   design; the engine drives it from the act's progress. */
.g-walk__stage {
  block-size: 100svh;
  display: grid;
  align-content: center;
  overflow: clip;
}

.g-walk__rail {
  display: flex;
  gap: var(--sc-7);
  padding-inline: var(--sc-gutter);
  inline-size: max-content;
  will-change: transform;
}

.g-walk__card {
  margin: 0;
  inline-size: min(38rem, 78vw);
  display: grid;
  gap: var(--sc-4);
}

.g-walk__card img {
  inline-size: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 2px;
}

.g-walk__card figcaption { color: var(--sc-ink-soft); max-inline-size: 40ch; }

/* ── 5 · the close ───────────────────────────────────────────────────────── */
.g-close {
  padding-block: var(--sc-section);
  min-block-size: 70svh;
  display: grid;
  align-content: center;
}

.g-close__inner {
  max-inline-size: 46rem;
  margin-inline: auto;
  padding-inline: var(--sc-gutter);
  display: grid;
  gap: var(--sc-5);
  justify-items: start;
}

.g-cta {
  display: inline-block;
  margin-block-start: var(--sc-4);
  padding: var(--sc-4) var(--sc-6);
  background: var(--sc-accent);
  color: var(--sc-accent-ink);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.01em;
  border-radius: 2px;
}

.g-cta:focus-visible {
  outline: 2px solid var(--sc-ink);
  outline-offset: 3px;
}

/* Narrow is authored, not inherited. The right-aligned signature copy has no
   right to align against on a phone, and the walk's cards stop being a rail and
   become a single readable column width. */
@media (max-width: 55.99rem) {
  .g-lead--right { justify-self: start; text-align: start; max-inline-size: none; }
  .g-walk__card { inline-size: 86vw; }
  .sc-display--xl, .sc-display--l { white-space: normal; }
}

/* Under reduced motion the surface is still shown — the car is content, not
   decoration — but it holds the arrival pose and never explodes. The signature
   act's copy still says what happens, which is the static equivalent. */
@media (prefers-reduced-motion: reduce) {
  .g-surface { transition: none; }
}