/* ==========================================================================
   Olsaar v3 "High Water" — base: reset, type, fields, buttons, utilities
   ========================================================================== */

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

/* Page scale. Sizes are in rem, so this works like browser zoom: 100% = original design,
   90% = the page at 90% zoom. Phones keep the original size. */
html {
  font-size: 90%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  --cw: min(var(--container), 100% - 2 * var(--gutter));
}

@media (max-width: 760px) {
  html { font-size: 100%; }
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--fg-2);
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.55;
  font-weight: 400;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
table { border-collapse: collapse; }
::selection { background: var(--flood); color: #fff; }

/* ---------- Typography ----------
   Display = Mona Sans EXPANDED (echoes the logo wordmark). Text = normal width.
   Sentence case. Navy ink on paper, white on flood/deep. */

h1, h2, h3, h4 { color: var(--fg); font-weight: 620; }

.t-display {
  font-stretch: 125%;
  font-weight: 640;
  font-size: clamp(2.5rem, 6.3vw, 6.25rem);
  letter-spacing: -0.035em;
  line-height: 0.97;
  text-wrap: balance;
  color: var(--fg);
}
.t-h1 {
  font-stretch: 125%;
  font-weight: 640;
  font-size: clamp(2.125rem, 5.1vw, 5rem);
  letter-spacing: -0.035em;
  line-height: 0.99;
  text-wrap: balance;
  color: var(--fg);
}
.t-h2 {
  font-stretch: 120%;
  font-weight: 620;
  font-size: clamp(1.625rem, 3vw, 2.875rem);
  letter-spacing: -0.03em;
  line-height: 1.04;
  text-wrap: balance;
  color: var(--fg);
}
.t-h3 {
  font-stretch: 112%;
  font-weight: 600;
  font-size: clamp(1.25rem, 1.7vw, 1.625rem);
  letter-spacing: -0.02em;
  line-height: 1.18;
  text-wrap: balance;
  color: var(--fg);
}
.t-title {
  font-size: 1.125rem;
  font-weight: 620;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--fg);
}
.t-lead {
  font-size: clamp(1.1875rem, 1.55vw, 1.5rem);
  font-weight: 480;
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--fg-2);
  text-wrap: pretty;
}
.t-body { font-size: 1.0625rem; line-height: 1.55; color: var(--fg-2); text-wrap: pretty; }
.t-small { font-size: 0.9375rem; line-height: 1.45; color: var(--fg-2); }

/* Giant chapter numeral */
.t-numeral {
  font-stretch: 125%;
  font-weight: 700;
  font-size: clamp(6rem, 15vw, 14.5rem);
  letter-spacing: -0.05em;
  line-height: 0.8;
  color: var(--accent);
}

/* Eyebrow: sentence case, with the phone-tile glyph. e.g. "▯ 02  The path of a post" */
.t-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 620;
  line-height: 1;
  letter-spacing: 0;
  color: var(--eyebrow-fg);
}
.t-eyebrow .num { color: var(--fg-3); font-weight: 560; }

/* Small caption label (sentence case; NOT mono, NOT uppercase) */
.t-label {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8438rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--fg-3);
}

/* Mono is for data INSIDE diagrams only: timestamps, ids, filenames. */
.t-data,
.t-mono {
  font-family: var(--font-mono);
  font-size: 0.7812rem;
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}
.t-wide { font-stretch: 125%; }
.t-fg { color: var(--fg); }
.t-fg2 { color: var(--fg-2); }
.t-fg3 { color: var(--fg-3); }

/* The phone tile: our unit. A 9:19.5 rounded rect used as glyph, bullet, node. */
.tile {
  display: inline-block;
  flex: none;
  width: 0.56em;
  height: 1.2em;
  border-radius: 0.14em;
  background: var(--accent);
  vertical-align: -0.2em;
}
.tile--line { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
/* Legacy square bullet (v2). Rendered as a small tile now. */
.sq { display: inline-block; flex: none; width: 0.4375rem; height: 0.9375rem; border-radius: 2px; background: var(--accent); }
.sq--blue { background: var(--accent); }

/* ---------- Layout ---------- */

.wrap {
  width: var(--cw);
  margin-inline: auto;
}

.grid-12 {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 1.5rem;
}
@media (max-width: 760px) {
  .grid-12 { gap: 1rem; }
}

.section {
  position: relative;
  padding-block: var(--section-y);
  background-color: var(--bg);
}
/* v2 leftovers: no page rails or seam ticks in v3. */
.no-rails, .seam { }

/* ---------- Wave-crest field edge ----------
   A colour field begins with a crest, never a straight line. Add class="crest" to a
   themed section: its own colour rises over the previous field. Sections that need a
   scroll-animated edge draw their own SVG instead. */
.crest { position: relative; z-index: 1; }
.crest::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% - 1px);
  height: var(--crest-h);
  background: var(--bg);
  -webkit-mask: var(--crest-mask) center / 100% 100% no-repeat;
  mask: var(--crest-mask) center / 100% 100% no-repeat;
  pointer-events: none;
}
:root {
  --crest-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3Cpath d='M0 84V52C150 22 300 6 470 14c190 9 300 58 500 54 170-3 250-50 470-44v60z'/%3E%3C/svg%3E");
  --crest-mask-b: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 84' preserveAspectRatio='none'%3E%3Cpath d='M0 84V30c200-14 330 34 520 36 210 2 330-52 560-50 150 1 270 22 360 38v30z'/%3E%3C/svg%3E");
}
.crest--b::before { -webkit-mask-image: var(--crest-mask-b); mask-image: var(--crest-mask-b); }

/* ---------- Buttons ---------- */

.btn {
  --btn-h: 3rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: var(--btn-h);
  padding: 0 1.375rem;
  border-radius: var(--r-pill);
  font-size: 1rem;
  font-weight: 620;
  letter-spacing: -0.005em;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition:
    background-color var(--dur-1) ease,
    box-shadow var(--dur-1) ease,
    color var(--dur-1) ease,
    transform var(--dur-1) ease;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(0.97); }
.btn .i { width: 1.0625rem; height: 1.0625rem; }
.btn-lg { --btn-h: 3.5rem; padding: 0 1.75rem; font-size: 1.0625rem; }
.btn-sm { --btn-h: 2.375rem; padding: 0 1rem; font-size: 0.9062rem; }

/* Primary: ink pill on paper, white on the pink field, pink on the dark ones. Colours and the
   four-layer shadow come from the nearest theme's tokens (--btn-sh), so a themed island nested in
   another field just works. A faint top sheen (a gradient, not a shadow) gives the pill some light.
   Hover lifts it a pixel and opens the shadow out; pressing settles it back down. */
.btn-primary {
  background-color: var(--btn-bg);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0) 60%);
  color: var(--btn-fg);
  box-shadow: var(--btn-sh);
}
.btn-primary:hover {
  background-color: var(--btn-bg-hover);
  box-shadow: var(--btn-sh-hover);
  transform: translateY(-1px);
}

/* Ghost: the secondary pill. Filled (white on paper, a faint lift on dark, solid ink on the pink
   field, where white-on-pink text fails AA), with a hairline ring and three soft shadows. */
.btn-ghost {
  background: var(--ghost-bg);
  color: var(--ghost-fg);
  box-shadow: var(--ghost-sh);
}
.btn-ghost:hover {
  background: var(--ghost-bg-hover);
  box-shadow: var(--ghost-sh-hover);
  transform: translateY(-1px);
}
.btn-primary:active,
.btn-ghost:active { transform: translateY(0) scale(0.98); box-shadow: var(--btn-sh); }
.btn-ghost:active { box-shadow: var(--ghost-sh); }

/* Blue: flood fill with abyss text (5.7:1). The recommended action on paper/deep. */
.btn-blue { background: var(--flood); color: #0b0d10; }
.btn-blue:hover { background: #ff6890; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--fg);
  font-weight: 620;
  font-size: 1rem;
}
.link-arrow .i { width: 1.0625rem; height: 1.0625rem; transition: transform var(--dur-2) var(--ease-out); }
.link-arrow:hover .i { transform: translateX(0.1875rem); }

/* ---------- Icons ---------- */

.i {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.g {
  width: 1.125rem;
  height: 1.125rem;
  flex: none;
  fill: currentColor;
}
.glyphs {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  color: var(--fg);
}

/* ---------- Surfaces ---------- */

/* A figure panel: where diagrams live. Graph paper belongs INSIDE figures only. */
.figure {
  position: relative;
  background: var(--surface);
  border-radius: var(--r-4);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow: hidden;
}
.figure--grid {
  background-image: radial-gradient(circle, var(--line-2) 1px, transparent 1.4px);
  background-size: 1.375rem 1.375rem;
  background-position: 0.6875rem 0.6875rem;
}
.panel {
  background: var(--surface);
  border-radius: var(--r-3);
  box-shadow: inset 0 0 0 1px var(--line);
}
.window {
  background: var(--surface);
  border-radius: var(--r-3);
  box-shadow: inset 0 0 0 1px var(--line), var(--shadow);
  overflow: hidden;
}
.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }

.dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--fg-3);
  display: inline-block;
  flex: none;
}
.dot--ok { background: var(--ok); }
.dot--warn { background: var(--warn); }
.dot--err { background: var(--err); }
.dot--blue { background: var(--flood); }
.dot--buoy { background: var(--buoy); }

/* ---------- Accessibility ---------- */

:focus-visible {
  outline: 0.1562rem solid var(--link);
  outline-offset: 0.1875rem;
  border-radius: 0.25rem;
}
.btn:focus-visible { border-radius: var(--r-pill); }

.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;
}

.skip-link {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 200;
  padding: 0.625rem 1rem;
  border-radius: var(--r-pill);
  background: #0a0a0b;
  color: #f6f6f7;
  font-weight: 620;
  transform: translateY(-160%);
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Reveal initial states (only while motion is enabled) ---------- */

.mf-motion [data-reveal]:not([data-reveal="lines"]) { opacity: 0; transform: translateY(1.5rem); }
.mf-motion [data-reveal-stagger] > * { opacity: 0; transform: translateY(1.5rem); }
.mf-motion [data-reveal="lines"] { visibility: hidden; }
.mf-motion [data-reveal="lines"].is-split { visibility: visible; }
.line-mask { display: block; overflow: clip; overflow-clip-margin: 0.12em; padding-bottom: 0.04em; margin-bottom: -0.04em; }

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