/* Reset, type, focus, skip link, grain, browser surfaces. */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  scroll-padding-top: calc(var(--nav-h) + 16px);
  background: var(--ink);
}

body {
  min-height: 100svh;
  overflow-x: clip;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-main);
  font-size: var(--step-0);
  line-height: var(--lh-body);
  font-weight: var(--w-body);
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}

img, picture, svg, video, canvas, iframe { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; }
:where(ul, ol)[role="list"] { list-style: none; padding: 0; }
[hidden] { display: none !important; }

/* ---------- Type ----------
   Two faces (tokens.css): MAIN for every heading and all reading, ACCENT on one or two words
   inside a heading. Headings are light (300) MAIN with tight tracking; h3 is MAIN at 480. */
h1, h2, h3, h4 {
  font-weight: var(--w-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}
h1, h2, .display {
  font-family: var(--font-main);
  font-weight: var(--w-display);
  line-height: var(--lh-display);
  letter-spacing: var(--track-display);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}
h3 {
  font-family: var(--font-main);
  font-weight: var(--w-heading);
  font-size: var(--step-2);
  line-height: var(--lh-heading);
  letter-spacing: var(--track-heading);
}
p, li, dd { text-wrap: pretty; }
p { max-width: var(--measure); }
strong, b { font-weight: var(--w-strong); }

/* The accent: one or two words of a heading, for the living subject or the act of care. Its own
   face, size and tracking are tokens (tokens.css), so a new face drops in without touching a
   selector. line-height 1 keeps a larger accent from pushing its line box open. Only headings
   (h1, h2) and the film's lines take the accent face; the same string reused in running text (the
   footer motto shares the Harmony statement's text) stays in the main face. */
em.accent { font-style: normal; }
:is(h1, h2, .beat__head) em.accent {
  font-family: var(--font-accent);
  font-style: var(--accent-style);
  font-weight: var(--accent-weight);
  font-size: var(--accent-size);
  letter-spacing: var(--accent-track);
  /* 0, not 1: at 1.1em the accent's own line box was taller than the heading's tight leading
     and pushed its line apart; the heading's strut sets the leading for every line */
  line-height: 0;
  position: relative;
  top: var(--accent-shift);
}
/* the accent stays on the line of the word before it (accent.js); when the whole phrase cannot,
   only its first word does, and the rest follows as a second em.accent that may wrap */
.accent-keep { white-space: nowrap; }

.mono, time, data, .price {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: normal;
}
.mono-label {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
/* species names: a naming convention, not data, so the main face in italic */
.latin { font-family: var(--font-main); font-style: italic; font-size: var(--step--1); letter-spacing: 0.005em; }

/* Links in running text */
.prose a, .text-link {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  transition: text-decoration-color var(--dur-hover) var(--ease-out), color var(--dur-hover) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
  .prose a:hover, .text-link:hover { text-decoration-color: currentColor; }
}

/* ---------- Browser surfaces ---------- */
::selection { background: var(--granite-fill); color: var(--sand); }
:root { caret-color: var(--granite-line); accent-color: var(--granite-fill); }
/* No scrollbar (Max, 2026-10-08): the depth gauge is the page's progress and position. Only the
   bar is hidden; wheel, touch, keyboard and assistive scrolling are untouched, and so is the
   layout width (no bar means no gutter on any engine). */
html, body, .lenis, .lenis body { scrollbar-width: none; -ms-overflow-style: none; }
html::-webkit-scrollbar, body::-webkit-scrollbar { display: none; width: 0; height: 0; }

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--sand);
  outline-offset: 3px;
  border-radius: 2px;
}
[data-tone="sand"] :focus-visible { outline-color: var(--ink); }

/* A reader who chose French: translated text waits (at most 1.2 s, preboot.js) for French
   instead of painting English first. Layout is kept, so nothing jumps when it shows. */
html.lang-wait [data-i18n] { visibility: hidden; }

/* ---------- Skip link ---------- */
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: var(--z-skip);
  padding: 12px 18px;
  background: var(--sand);
  color: var(--ink);
  border-radius: var(--r-pill);
  font-weight: 560;
  text-decoration: none;
  transform: translateY(-160%);
}
.skip-link:focus-visible { transform: none; outline-color: var(--granite-fill); }

/* ---------- Visually hidden ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Film grain: one fixed layer over the whole world ---------- */
.grain {
  position: fixed;
  inset: -50%;
  z-index: var(--z-grain);
  pointer-events: none;
  opacity: 0.075;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 0 0.5  0 0 0 1.4 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 220px 220px;
}
@media (prefers-reduced-transparency: reduce) { .grain { display: none; } }

/* ---------- Tones: each section declares the light it sits in ----------
   Static backgrounds. When the motion agent drives light from depth and time,
   it adds .depth-driven to <html> and sections fall back to the shared --water / sky values. */
[data-tone] { background: var(--tone-bg); color: var(--tone-fg); --fg: var(--tone-fg); --fg-2: var(--tone-fg-2); }
[data-tone="ink"]   { --tone-bg: var(--ink);   --tone-fg: var(--sand); --tone-fg-2: var(--sand-2); --line: var(--ink-3); }
[data-tone="reef"]  { --tone-bg: var(--reef);  --tone-fg: var(--sand); --tone-fg-2: var(--sand-2); --line: var(--reef-3); }
[data-tone="night"] { --tone-bg: var(--night); --tone-fg: var(--sand); --tone-fg-2: var(--sand-2); --line: var(--ink-3); }
[data-tone="sand"]  { --tone-bg: var(--sand);  --tone-fg: var(--ink);  --tone-fg-2: var(--ink-soft); --line: var(--sand-5); color-scheme: light; }
html.depth-driven [data-tone]:not([data-tone="sand"]) { background: transparent; }
html.depth-driven body { background: var(--water); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.15s !important;
  }
}