/* Base: reset, Lenis, the shared canvas, scene grounds, stubs. Scene-specific styles live in
   scenes/<id>.css (loaded by the engine when the scene's meta.css is true). */

/* Lenis 1.3.4 (inlined: artifact pages may load stylesheets from Google Fonts only) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ink);
  color: var(--on-ink);
  -webkit-text-size-adjust: 100%;
  overflow-x: clip;
  color-scheme: dark;
}
html.is-scroll-locked { overflow: hidden; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--on-ink);
  font-family: var(--f-body);
  font-weight: var(--fw-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, video, canvas, svg { display: block; max-width: 100%; }
img, video { height: auto; }
a { color: inherit; }
p, h1, h2, h3, h4, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

/* focus ring (v16 core): two-tone, keyboard focus only. A 3px accent ring (7.2:1 on paper) sandwiched in a
   paper halo (2px inside, 2px outside; 18:1 on ink): the outer edge clears 3:1 on either ground and on
   footage, and the accent clears 7:1 against a white control. The outline paints over the box-shadow. */
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 7px var(--paper); }
[tabindex="-1"]:focus-visible { outline: none; box-shadow: none; }   /* skip-link target (main), not a control */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.skip { position: fixed; left: var(--gut); top: var(--s-4); z-index: var(--z-cover); display: inline-flex; align-items: center; min-height: 44px; padding: var(--s-2) var(--s-4); background: var(--paper); color: var(--ink); transform: translateY(-200%); }
.skip:focus { transform: none; }

/* the one shared WebGL canvas: fixed, behind content, never takes pointer events */
.gl {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: var(--z-gl);
  pointer-events: none;
}
.no-gl .gl { display: none; }

main, .route-view { position: relative; z-index: var(--z-content); }
.route-view[hidden], main[hidden] { display: none; }

/* scene roots. The engine sets data-theme from meta.theme and data-gl when meta.gl is true.
   A GL scene's root is transparent so the canvas behind shows through; the page ground under it is ink. */
.scene { position: relative; }
.scene[data-theme="ink"] { background: var(--ink); color: var(--on-ink); }
.scene[data-theme="paper"] { background: var(--paper); color: var(--on-paper); }
.scene[data-gl] { background: transparent; }

/* v28 structure: THE chapter kicker ("02 · The years" in s04, "03 · The belief" in s06, "04 · On stage" in s07,
   "05 · Learn with her" in s085b). One rule set for all four; a scene only places it (position, margins), never
   restyles it. Akt 700 caps, 14 px (phones 12 px), .1em tracking, the ground's own text colour at full strength
   (currentColor: paper on ink, ink on paper), then a 1 px hairline of one fixed length (36 px; phones 28 px).
   The hairline is an inline block (not a flex gap or ::after), so it sits the same inside a scene's mask wrapper.
   Markup: <p class="chk"><span class="chk__n">02</span><span class="chk__s" aria-hidden="true"> · </span>
   <span class="chk__t">The years</span><span class="chk__hl" aria-hidden="true"></span></p> */
.chk {
  font-family: var(--f-display);
  font-size: 14px;
  font-weight: 700;
  font-style: normal;
  line-height: 1.2;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: currentColor;
}
.chk__n { font-variant-numeric: tabular-nums; }
.chk__s { white-space: pre; }
.chk__hl {
  display: inline-block;
  width: 36px;
  height: 1px;
  margin-left: .75em;
  vertical-align: .34em;          /* the middle of the caps (Akt cap height ~.69em) */
  background: currentColor;
  opacity: .6;
}
@media (max-width: 767px) {
  .chk { font-size: 12px; }
  .chk__hl { width: 28px; }
}

/* SplitText helpers: lines ride inside a clipping mask */
.u-mask { overflow: clip; }
.u-display {
  font-family: var(--f-display);
  font-weight: var(--fw-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
}

/* stubs (delete with the last stub) */
.stub {
  min-height: 100vh;
  min-height: 100svh;
  padding: var(--s-9) var(--gut);
  display: grid;
  align-content: end;
  gap: var(--s-4);
  border-top: 1px solid var(--line-ink);
}
.scene[data-theme="paper"] .stub { border-top-color: var(--line-paper); }
.stub__id { font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; opacity: .6; }
.stub__title { font-family: var(--f-display); font-weight: var(--fw-display); font-size: var(--t-d2); line-height: var(--lh-display); letter-spacing: var(--track-display); }
.stub__brief { max-width: var(--max-read); opacity: .7; font-size: var(--t-small); }
.stub__links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.stub__links a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; font-weight: 600; text-underline-offset: .2em; }

/* boot failed (js/main.js sets html.boot-failed only when there is no film to show: the libraries did not
   load, or no home scene built anything; a later error leaves the working scenes alone): the noscript stub
   instead of a blank page. The fallback markup sits in index.html, hidden until this class is set. */
.boot-fallback { display: none; }   /* .stub sets display: grid, which would beat the [hidden] attribute */
html.boot-failed .boot-fallback { display: grid; border-top: 0; }
html.boot-failed main, html.boot-failed .gl, html.boot-failed .skip, html.boot-failed .rx-nav { display: none; }

/* reduced motion: authored static layout. Scenes skip pins/scrubs themselves; this is the safety net. */
html.is-reduced *, html.is-reduced *::before, html.is-reduced *::after {
  scroll-behavior: auto !important;
  transition-duration: .01ms !important;
  transition-property: none !important;   /* integrator: a .01ms transition on 'all' made same-frame measurements read stale values */
  animation-duration: .01ms !important;
  animation-iteration-count: 1 !important;
}

/* perf r1 #3 (js/engine.js boot): while the scenes below the hero are being built, the page ends at the hero's
   last pixel (--boot-fence, set by the engine), so nothing half-built can be scrolled into. Children keep their
   real layout (their inits measure true sizes); only main's box, and so the page's scroll height, is cut. */
html.is-fenced main { height: var(--boot-fence, auto); overflow: clip; }

/* perf r1 #6: the intro's opening frame, painted with no JS (index.html .i0-pre: the same markup s00-intro.js
   builds, styled by scenes/s00-intro.css, which the head links). MARIFAT rises as s00 raises it (0.78 s at
   timeScale 1.55, osmo, from 4deg); every other word waits below its mask for s00. js/engine.js removes it in
   the frame s00's own MARIFAT is at rest (identical pixels), or fades it when the intro is skipped.
   'Akt Pre' is the same file as Akt with font-display: block: the fallback face never flashes. */
@font-face {
  font-family: 'Akt Pre';
  font-style: normal;
  font-weight: 900;
  font-display: block;
  src: url(../fonts/akt-latin.woff2) format('woff2');
}
html .i0-pre[data-scene] .i0 { background: transparent; cursor: auto; pointer-events: none; }
html .i0-pre[data-scene] .i0__line { font-family: 'Akt Pre', var(--f-display); }
.i0-pre .i0__word, .i0-pre .i0__exit { transform: translateY(110%); }
.i0-pre .i0__line--a .i0__word { animation: i0-pre-rise .503s cubic-bezier(.625, .05, 0, 1) both; }
@keyframes i0-pre-rise { from { transform: translateY(110%) rotate(4deg); } to { transform: none; } }
.i0-pre ~ main [data-scene="s00-intro"] .i0__line--a { visibility: hidden; }   /* s00's own MARIFAT, under ours */
html.boot-failed .i0-pre, html.is-reduced .i0-pre { display: none; }
@media (prefers-reduced-motion: reduce) { .i0-pre { display: none; } }