/* =============================================================================
   MAGI MACHINA — Base: reset, self-hosted fonts, foundational typography.
   Quiet grotesque on washi white, sumi ink, one ultramarine.
   The mono is the machine's whisper; the ASCII creatures carry the blue.
   ========================================================================== */

/* --- Self-hosted fonts (RGPD-friendly, works on file://) ----------------- */
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-400.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("../assets/fonts/ibm-plex-mono-500.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
  font-style: normal;
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  font-size: clamp(15px, 0.9rem + 0.2vw, 18px);
  /* every control answers with its own :active state instead */
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
/* Lenis 1.3.26 (js/vendor, MIT) — its own stylesheet, verbatim */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

body {
  font-family: var(--font-sans);
  font-weight: 410;
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

button, input, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

a { color: inherit; text-decoration: none; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--accent); color: #fff; }

[id] { scroll-margin-top: 6rem; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
/* the focus ring doesn't blink on: it closes in on the element */
@media (prefers-reduced-motion: no-preference) {
  :focus-visible { animation: mm-focus var(--dur-s) var(--ease); }
  @keyframes mm-focus { from { outline-offset: 8px; outline-color: transparent; } }
}
/* Windows high-contrast: text-shadow copies vanish, so nothing may roll */
@media (forced-colors: active) {
  .btn__text, .roll__t, .link-arrow__text { transform: none !important; transition: none !important; }
}

/* --- Typographic primitives ----------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-sans);
  font-weight: 560;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: clamp(2rem, 4.6vw, var(--fs-xl)); font-weight: 540; letter-spacing: -0.02em; }
h2 { font-size: clamp(1.6rem, 3.2vw, var(--fs-lg)); font-weight: 550; letter-spacing: -0.018em; }
h3 { font-size: var(--fs-md); font-weight: 540; }
h4 { font-size: var(--fs-base); font-weight: 580; }

p { max-width: var(--measure); text-wrap: pretty; }

strong, b { font-weight: 620; }
em, i { font-style: italic; }

/* The machine register — readouts, labels, meta, dates, tags. */
.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
}

/* Quiet label: small caps tracking, ultramarine. */
.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--accent);
  text-shadow: var(--glow-soft);
}

.display {
  font-family: var(--font-sans);
  font-weight: 540;
  line-height: 1.06;
  letter-spacing: -0.02em;
}

/* ASCII artwork — the blue creatures. Solid ink by default; the fields
   that earn their halo (hero sea, horizon band, solution cards) restore
   it via scoped text-shadow/drop-shadow rules. */
.ascii {
  font-family: var(--font-mono);
  font-weight: 400;
  white-space: pre;
  color: var(--accent);
  user-select: none;
  margin: 0;
}

/* Night: a luminous core lights the character field — near-white heart,
   ultramarine halo, long falloff into the dark, like a glow heatmap drifting
   slowly across the text. Day stays solid colour.
   (background-clip:text — the moving light IS the ink.) */
:root[data-theme="dark"] .ascii {
  background-image:
    radial-gradient(36% 32% at 42% 40%,
      #ffffff,
      #bdc5ff 28%,
      #6f7bff 54%,
      rgba(86, 98, 255, 0.5) 72%,
      transparent 86%),
    radial-gradient(46% 40% at 74% 72%, rgba(64, 220, 255, 0.55), transparent 70%),
    linear-gradient(#3b44c8, #3b44c8);
  background-size: 170% 170%;
  /* frozen (animating background-position re-rasterized every glyph at
     display rate); the water's own JS motion carries the life */
  background-position: 0% 0%, 100% 100%, 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* MAGI easter egg: the ASCII burns phosphor green, white-hot core, with a
   warm amber glow drifting through. */
:root[data-theme="magi"] .ascii {
  background-image:
    radial-gradient(36% 32% at 42% 40%,
      #ffffff,
      #b8ffc9 26%,
      #3dff73 52%,
      rgba(22, 200, 84, 0.5) 72%,
      transparent 86%),
    radial-gradient(46% 40% at 74% 72%, rgba(255, 160, 40, 0.45), transparent 70%),
    linear-gradient(#0f7a33, #0f7a33);
  background-size: 170% 170%;
  background-position: 0% 0%, 100% 100%, 50% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
:root[data-theme="magi"] ::selection { background: var(--accent); color: #000; }

/* Paper grain veil — a static canvas tile injected per section that asks
   for it (js addGrain); multiply on paper, overlay in the dark. */
/* Night-only. In light theme the tile was set in mix-blend-mode: multiply,
   which can only darken: over washi paper it read as dirt rather than grain.
   Overlay works on the dark bands because it lifts as much as it sinks. */
.grain-veil {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-size: 128px 128px;
}
:root[data-theme="dark"] .grain-veil,
:root[data-theme="magi"] .grain-veil {
  display: block;
  mix-blend-mode: overlay;
  opacity: 0.06;
}


/* --- Utilities ---------------------------------------------------------------- */
/* the one content column (--gutter in tokens.css; panels: layout.css) */
.u-shell {
  width: min(100% - 2 * var(--gutter), var(--content-max));
  margin-inline: auto;
}

.u-hidden { display: none !important; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.u-faint { color: var(--ink-faint); }


/* Skip link for accessibility */
.skip-link {
  position: absolute;
  left: var(--sp-3);
  top: -3rem;
  z-index: 999;
  background: var(--accent);
  color: #fff;
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  border-radius: var(--radius-sm);
  transition: top var(--dur-xs) var(--ease);
}
.skip-link:focus { top: var(--sp-3); }

/* Spacing utilities, for one-off gaps between blocks in a section. */
.u-mt-3 { margin-top: var(--sp-3); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-5 { margin-top: var(--sp-5); }
.u-mt-6 { margin-top: var(--sp-6); }

/* Ambient character field: a sheet pinned to the viewport, first child of
   <main> (main.js ambientField), so it is drawn over the panel fills (z -1)
   and under their content (.section > .u-shell, z 1). No .ascii class on
   purpose, so it never inherits the glow filters (a full-screen drop-shadow
   would be ruinous). The hero, the emphasis panels and the footer cover it. */
#mm-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  margin: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 8px;
  line-height: 1.04;
  white-space: pre;
  color: var(--ink);
  opacity: 0.30;
  contain: layout style paint;
}
:root[data-theme="dark"] #mm-field,
:root[data-theme="magi"] #mm-field {
  color: var(--accent);
  opacity: 0.32;
}
@media (prefers-reduced-motion: reduce) { #mm-field { opacity: 0.1; } }

/* main is the stacking context the panels, the field and the content share;
   the footer rides above it */
main, #site-footer { position: relative; z-index: 1; }