/* ═══════════════════════════════════════════════════════════════════════════
   Ogma OS — company site (ogma-os.com). The ONE stylesheet.

   Deliberately a different REGISTER from ogmaq.com: that site is product-led
   and navy-dominant; this one is light, editorial and typographic. What the
   two share is the shared master palette of the FINAL v2 brand kit
   (2026-08-28) and the family typefaces (Manrope / Inter / JetBrains Mono) —
   enough to read as one company, not enough to read as the same site twice.

   The identity is the tower + three-waves mark and the supplied outlined
   "Ogma OS" wordmark, shipped as the kit SVGs in /brand/ and NEVER recreated
   with live text or CSS (docs/brand/ogma-os.md). Mint is a branded-surface
   colour, not a light-ground one: on light surfaces the interactive accent is
   Brand Blue, and mint appears only on the dark night block.

   Every colour lives on a token below. Behaviour is in assets/ogma-os.js;
   the diagrams animate in CSS only, so they compose correctly with no JS.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Kit colours: Off White #f9fefb · Deep Navy #122d42 · Brand Blue #1d486a ·
     Mint Accent #9df4b9. Every other value below is a DERIVED tint chosen to
     harmonise with them — derived, not kit colours: --paper-2 #eef5f1 ·
     --ink-2 #35485a · --muted #5f7183 · --line #dfe9e3 · --line-2 #c6d4cd ·
     --accent-ink #173a56 (brand-700) · --accent-soft #e2edf4 (brand-100) ·
     --night-2 #0d1f2e (dark-chrome midpoint) · --on-night-2 #a2b6c1. */

  /* Surfaces — the kit Off White, with a cool recessed band */
  --paper: #f9fefb;
  --paper-2: #eef5f1;
  --card: #ffffff;
  /* Ink — the kit Deep Navy, not a neutral near-black. The identity is drawn
     in this colour, so the page is too; the cool hairlines below carry the
     same cast. */
  --ink: #122d42;
  --ink-2: #35485a;
  --muted: #5f7183;
  /* Cool hairlines — the site's main structural device */
  --line: #dfe9e3;
  --line-2: #c6d4cd;
  /* Accent — the kit Brand Blue. The light-surface interactive accent: mint
     is illegible on light grounds and is never used for text or controls
     here. */
  --accent: #1d486a;
  --accent-ink: #173a56;
  --accent-soft: #e2edf4;
  /* Attention — the ONE second meaningful hue (observation / unresolved).
     Semantic: stays amber, never re-toned to a brand colour. */
  --signal: #b45309;
  --signal-soft: #fbf0e0;
  /* Night — the closing statement + footer, one continuous block. The same
     Deep Navy the mark is drawn in, so the identity and the bottom of the
     page are one colour. Mint Accent carries the on-dark accent (~10:1 on
     Deep Navy). */
  --night: #122d42;
  --night-2: #0d1f2e;
  --on-night: #f9fefb;
  --on-night-2: #a2b6c1;
  --accent-night: #9df4b9;

  --display: "Manrope", system-ui, -apple-system, sans-serif;
  --body: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* The one page shell. Prose keeps its own narrower caps so a wide shell
     never lengthens a reading line. */
  --shell: 1240px;
  --prose: 620px;
  --gutter: 32px;
  --radius: 10px;
  /* One cycle length for every diagram animation — everything is phase-locked
     to it, so no delay arithmetic is needed anywhere. */
  --cyc: 14s;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  background: var(--paper);
  /* the sticky header must not cover an anchored section heading */
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink-2);
  font: 400 17px/1.65 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip (not hidden) removes the pannable canvas without breaking position:sticky */
  overflow-x: hidden;
  overflow-x: clip;
}

h1, h2, h3, p, figure, blockquote { margin: 0; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}
[tabindex="-1"]:focus { outline: none; }
::selection { background: var(--accent); color: #fff; }

.wrap { max-width: var(--shell); margin: 0 auto; padding: 0 var(--gutter); }
.prose { max-width: var(--prose); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 10px 16px; border-radius: 8px; font: 600 14px var(--body);
}
.skip:focus { left: 16px; top: 16px; }

/* Screen-reader-only text — used for diagram equivalents and link context. */
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ── Typography primitives ───────────────────────────────────────────────── */

.label {
  font: 500 11px/1 var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

h1, h2, h3, .display { font-family: var(--display); color: var(--ink); }

.h-hero {
  font-size: clamp(2.55rem, 6.4vw, 4.9rem);
  font-weight: 600;
  line-height: 1.03;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.h-sec {
  font-size: clamp(1.85rem, 3.5vw, 2.85rem);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.028em;
  text-wrap: balance;
}

.h-sub { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.012em; line-height: 1.35; }

.lede {
  font-size: clamp(1.03rem, 1.35vw, 1.22rem);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 34em;
}

.body-2 { color: var(--muted); font-size: 0.9375rem; line-height: 1.6; max-width: 62ch; }

/* A quiet, factual note — never a badge, never a callout box. */
.note {
  font-size: 0.8125rem;
  line-height: 1.55;
  color: var(--muted);
  max-width: 62ch;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 15px var(--body);
  padding: 13px 22px; border: 1px solid transparent; border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}
.btn svg { flex: none; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: var(--accent-ink); }
.btn-quiet { color: var(--ink); border-color: var(--line-2); background: transparent; }
.btn-quiet:hover { border-color: var(--ink); }
.btn-on-night { background: var(--paper); color: var(--ink); }
.btn-on-night:hover { background: #fff; }
.btn-quiet-night { color: var(--on-night); border-color: rgba(255, 255, 255, 0.28); }
.btn-quiet-night:hover { border-color: var(--on-night); }

/* Inline text link with the external-arrow convention. */
.tlink {
  font-weight: 600; color: var(--accent-ink);
  border-bottom: 1px solid rgba(23, 58, 86, 0.28);
  transition: border-color 0.16s ease;
}
.tlink:hover { border-bottom-color: currentColor; }
.ext::after { content: " ↗"; font-size: 0.85em; letter-spacing: 0; }

/* ── Header ──────────────────────────────────────────────────────────────── */

header.top {
  position: sticky; top: 0; z-index: 60;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease, background-color 0.25s ease;
  padding-top: env(safe-area-inset-top, 0px);
}
header.top.solid { border-bottom-color: var(--line); background: color-mix(in srgb, var(--paper) 96%, transparent); }

.nav { display: flex; align-items: center; gap: 28px; padding: 18px 0; }
.nav-links { display: flex; gap: 26px; margin-left: 8px; }
.nav-links a {
  font: 500 14px var(--body); color: var(--muted);
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color 0.16s ease, border-color 0.16s ease;
}
.nav-links a:hover { color: var(--ink); }
.nav-links a[aria-current="true"] { color: var(--ink); border-bottom-color: var(--ink); }
.nav-end { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.nav-out {
  font: 600 14px var(--body); color: var(--ink);
  padding: 9px 15px; border: 1px solid var(--line-2); border-radius: 8px;
  transition: border-color 0.16s ease;
}
.nav-out:hover { border-color: var(--ink); }

/* ── The Ogma OS identity ────────────────────────────────────────────────────
   The tower + three-waves mark and the supplied outlined "Ogma OS" wordmark
   (FINAL v2 kit, 2026-08-28). The lockups ship as the kit SVGs in /brand/ and
   render as <img> — the wordmark is custom outlined artwork and is NEVER
   recreated with live text or CSS. Tone follows the surface: deep navy on
   light, off-white on the night block.

   The horizontal lockup's ratio is 1374.511:460 ≈ 2.988:1, so the heights
   below set the width. Header ≈ 36 px tall (≈108 px wide) fits the existing
   bar; the footer runs larger to match the old lockup's visual weight. */
.wm { display: inline-flex; align-items: center; }
.wm-logo { display: block; height: 36px; width: auto; }
.wm--lg .wm-logo { height: 48px; }

/* Mobile menu — one flat list, no sub-levels. */
.nav-toggle {
  display: none; margin-left: auto;
  width: 40px; height: 40px; padding: 0;
  background: transparent; border: 1px solid var(--line-2); border-radius: 8px;
  cursor: pointer; align-items: center; justify-content: center;
}
.nav-toggle i {
  display: block; width: 16px; height: 1.5px; background: var(--ink);
  margin: 3px auto; transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav-toggle[aria-expanded="true"] i:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] i:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); }

.menu { display: none; border-top: 1px solid var(--line); padding: 10px var(--gutter) 22px; }
.menu.open { display: block; }
.menu a {
  display: block; padding: 13px 0; font: 500 17px var(--body); color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.menu .menu-cta { margin-top: 18px; border: 0; }

/* ── Section rhythm ──────────────────────────────────────────────────────── */

section { position: relative; }
.pad { padding: clamp(80px, 8.5vw, 110px) 0; }
.pad-sm { padding: clamp(64px, 8vw, 104px) 0; }
.rule { border-top: 1px solid var(--line); }
.band { background: var(--paper-2); }

/* Reveal-on-scroll: small, single-axis, never a "cinematic" move. */
/* Hidden ONLY when the script is running (it adds `js` to <html>): with
   JavaScript blocked no rule hides anything and the page reads in full. */
.js .rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1); }
.js .rv.on { opacity: 1; transform: none; }

/* ── Hero ────────────────────────────────────────────────────────────────── */

.hero { padding: clamp(56px, 8vw, 104px) 0 clamp(72px, 9vw, 116px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(40px, 5vw, 78px); align-items: center; }
.hero .lede { margin-top: 26px; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }

/* ═══ The operating-layer diagram (hero) ═════════════════════════════════════
   Systems of record sit on a rail at the top. Operational work appears in the
   GAPS between them, gains context, becomes a decision, and is carried by the
   Ogma OS layer into a product. Nothing is drawn from a system into the layer:
   Ogma OS does not integrate with QMS / MES / ERP, and the diagram must never
   imply that it does. Motion is CSS-only, phase-locked to --cyc.
   ═════════════════════════════════════════════════════════════════════════ */

.ol { font-family: var(--body); }
.ol-in { display: block; }

.ol-cap { margin-bottom: 12px; }

/* five columns: system · gap · system · gap · system.
   Children flow in DOM order (sys · rail · sys · rail · sys), so the columns
   need no explicit placement — and the mobile rule can drop the rails and let
   the three chips reflow on their own. */
.ol-sys { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.2fr 1fr; align-items: center; gap: 0; }
.ol-sys .sys {
  font: 500 12px/1 var(--mono); letter-spacing: 0.14em;
  color: var(--muted); background: var(--paper);
  border: 1px solid var(--line-2); border-radius: 6px;
  padding: 11px 0; text-align: center;
}
/* the hairline the systems sit on — the gaps in it ARE the subject */
.ol-sys .rail { height: 1px; background: var(--line); align-self: center; }

/* the between-zone: event cards land under the gaps */
.ol-between { display: grid; grid-template-columns: 1fr 1.2fr 1fr 1.2fr 1fr; margin-top: 26px; }
.ev {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--card); padding: 12px 13px;
  box-shadow: 0 1px 2px rgba(18, 45, 66, 0.03), 0 10px 24px -18px rgba(18, 45, 66, 0.32);
}
.ev--obs { grid-column: 2 / 4; margin-right: 14px; }
.ev--dec { grid-column: 4 / 6; margin-top: 44px; }
.ev-head { display: flex; align-items: center; gap: 8px; }
.ev-title { font: 600 13.5px var(--body); color: var(--ink); letter-spacing: -0.008em; }
.ev-stamp { margin-left: auto; font: 400 11px var(--mono); color: var(--muted); letter-spacing: 0.04em; }
.ev-sub { margin-top: 5px; font-size: 12.5px; line-height: 1.45; color: var(--muted); }
.ev-ctx {
  margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-2);
  font: 400 11.5px var(--mono); letter-spacing: 0.02em; color: var(--ink-2);
}
.dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dot--signal { background: var(--signal); }
.dot--accent { background: var(--accent); }

/* connectors — a 1px rule that draws downward, plus a chevron */
.rung { position: relative; height: 40px; }
.rung .wire {
  position: absolute; top: 0; width: 1px; height: 100%;
  background: var(--accent); transform: scaleY(0); transform-origin: top center;
}
.rung .wire::after {
  content: ""; position: absolute; left: -3px; bottom: -1px;
  width: 7px; height: 7px; border-right: 1px solid var(--accent); border-bottom: 1px solid var(--accent);
  transform: rotate(45deg);
}
/* the two connectors sit under the CENTRE of the card each one leaves */
.rung--a { height: 34px; }
.rung--a .wire.w1 { left: 38%; }
.rung--a .wire.w2 { left: 79%; }
.rung--b { height: 38px; }
.rung--b .wire.w3 { left: 50%; }

/* the Ogma OS layer */
.ol-layer {
  position: relative;
  border: 1px solid var(--line-2); border-radius: var(--radius);
  background: var(--card); padding: 16px 18px;
  box-shadow: 0 1px 2px rgba(18, 45, 66, 0.04), 0 18px 40px -30px rgba(18, 45, 66, 0.5);
}
/* the layer's name — a plain text label, deliberately NOT a wordmark
   treatment (the brand renders only from the supplied kit SVGs) */
.ol-layer-name {
  display: inline-flex; align-items: baseline; gap: 5px;
  font: 700 13px/1 var(--display); letter-spacing: -0.022em; color: var(--ink);
}
.ol-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.slot {
  font: 500 11.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--line);
  border-radius: 6px; padding: 10px 0; text-align: center;
}

/* the product */
.ol-prod { border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); padding: 14px 16px; }
.ol-prod-head { display: flex; align-items: baseline; gap: 8px; }
.ol-prod-name { font: 700 15px var(--display); letter-spacing: -0.02em; color: var(--ink); }
.ol-prod-role { font: 400 11.5px var(--mono); letter-spacing: 0.06em; color: var(--muted); }
/* The row is ALWAYS present — the product card must never sit empty while the
   cycle is elsewhere. Arrival is signalled by the wire drawing into it plus a
   brief highlight, not by the row appearing from nothing. */
.ol-row {
  display: flex; align-items: center; gap: 10px;
  margin: 10px -18px 0; padding: 11px 18px 3px;
  border-top: 1px solid var(--line);
  font-size: 12.5px; color: var(--ink-2);
}
.ol-row code { font: 400 11.5px var(--mono); color: var(--muted); letter-spacing: 0.03em; }

/* ── Diagram motion (one 14s cycle, everything phase-locked) ─────────────── */

@keyframes ol-obs {
  0%, 3% { opacity: 0; transform: translateY(10px); }
  9%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ol-ctx {
  0%, 13% { opacity: 0; }
  19%, 88% { opacity: 1; }
  95%, 100% { opacity: 0; }
}
@keyframes ol-dec {
  0%, 30% { opacity: 0; transform: translateY(10px); }
  36%, 88% { opacity: 1; transform: none; }
  95%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes ol-w1 {
  0%, 20% { transform: scaleY(0); opacity: 0; }
  21% { opacity: 1; }
  27%, 88% { transform: scaleY(1); opacity: 1; }
  95%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes ol-w2 {
  0%, 38% { transform: scaleY(0); opacity: 0; }
  39% { opacity: 1; }
  45%, 88% { transform: scaleY(1); opacity: 1; }
  95%, 100% { transform: scaleY(1); opacity: 0; }
}
@keyframes ol-w3 {
  0%, 63% { transform: scaleY(0); opacity: 0; }
  64% { opacity: 1; }
  72%, 88% { transform: scaleY(1); opacity: 1; }
  95%, 100% { transform: scaleY(1); opacity: 0; }
}
/* Three slots, three keyframes — all on the SAME 14s cycle. (A shorter
   animation staggered by negative delays would drift out of phase with the
   story it is meant to be telling.) */
@keyframes ol-slot1 {
  0%, 44% { color: var(--muted); border-color: var(--line); background-color: transparent; }
  50%, 88% { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background-color: var(--accent-soft); }
  95%, 100% { color: var(--muted); border-color: var(--line); background-color: transparent; }
}
@keyframes ol-slot2 {
  0%, 50% { color: var(--muted); border-color: var(--line); background-color: transparent; }
  56%, 88% { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background-color: var(--accent-soft); }
  95%, 100% { color: var(--muted); border-color: var(--line); background-color: transparent; }
}
@keyframes ol-slot3 {
  0%, 56% { color: var(--muted); border-color: var(--line); background-color: transparent; }
  62%, 88% { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 42%, transparent); background-color: var(--accent-soft); }
  95%, 100% { color: var(--muted); border-color: var(--line); background-color: transparent; }
}
@keyframes ol-prodrow {
  0%, 66% { background-color: transparent; box-shadow: inset 2px 0 0 transparent; }
  73%, 88% { background-color: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
  96%, 100% { background-color: transparent; box-shadow: inset 2px 0 0 transparent; }
}

.ol-anim .ev--obs { animation: ol-obs var(--cyc) linear infinite; }
.ol-anim .ev--obs .ev-ctx { animation: ol-ctx var(--cyc) linear infinite; }
.ol-anim .ev--dec { animation: ol-dec var(--cyc) linear infinite; }
.ol-anim .rung--a .w1 { animation: ol-w1 var(--cyc) linear infinite; }
.ol-anim .rung--a .w2 { animation: ol-w2 var(--cyc) linear infinite; }
.ol-anim .rung--b .w3 { animation: ol-w3 var(--cyc) linear infinite; }
.ol-anim .slot:nth-child(1) { animation: ol-slot1 var(--cyc) linear infinite; }
.ol-anim .slot:nth-child(2) { animation: ol-slot2 var(--cyc) linear infinite; }
.ol-anim .slot:nth-child(3) { animation: ol-slot3 var(--cyc) linear infinite; }
.ol-anim .ol-row { animation: ol-prodrow var(--cyc) linear infinite; }

/* Paused while the diagram is off-screen or the tab is hidden — it costs
   nothing when nobody can see it. */
.ol-paused * { animation-play-state: paused !important; }

/* ── One excursion's context trail (problem section) ─────────────────────
   A single reconstructed story replaces the four abstract gap categories:
   the loss (the last row) is the argument, so its text carries full ink. */

.trace { border-top: 1px solid var(--line); margin-top: clamp(44px, 5.5vw, 68px); }
.trace-cap { font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding: 20px 0 6px; }
.trace-row {
  display: grid; grid-template-columns: 64px 118px minmax(0, 1fr);
  gap: clamp(16px, 2.5vw, 36px); align-items: baseline;
  padding: 16px 0; border-bottom: 1px solid var(--line);
}
.trace-row time { font: 400 12px var(--mono); letter-spacing: 0.06em; color: var(--muted); }
.trace-ch { font-family: var(--display); font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.trace-row p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); max-width: 62ch; }
.trace-row-loss p { color: var(--ink); }

/* ═══ Scattered → ordered (the fragment field) ═══════════════════════════════
   The SAME eight operational objects appear twice on the page: unaligned in
   the problem section, aligned inside the layer in the thesis section. The
   rhyme is the argument, so both use one card component.
   ═════════════════════════════════════════════════════════════════════════ */

.frag {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line-2); border-radius: 8px; background: var(--card);
  padding: 9px 12px; font-size: 13px; color: var(--ink);
  box-shadow: 0 1px 2px rgba(18, 45, 66, 0.03);
}
.frag time { font: 400 11px var(--mono); color: var(--muted); letter-spacing: 0.04em; margin-left: auto; padding-left: 12px; }

/* Scattered state. The offsets are hand-set per item (not a modulo pattern —
   that produced pairs that touched and read as a layout bug) and the row gap
   stays larger than twice the maximum offset at every column count, so nothing
   ever collides. The slight rotation is what makes the disorder read as
   deliberate rather than broken. */
.field {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
  gap: 36px 20px; margin-top: clamp(34px, 4vw, 52px);
}
.field .frag { width: 100%; }
.field > *:nth-child(1) { transform: translateY(8px) rotate(-0.6deg); }
.field > *:nth-child(2) { transform: translateY(-6px) rotate(0.4deg); }
.field > *:nth-child(3) { transform: translateY(12px) rotate(0.5deg); }
.field > *:nth-child(4) { transform: rotate(-0.35deg); }
.field > *:nth-child(5) { transform: translateY(-8px) rotate(0.55deg); }
.field > *:nth-child(6) { transform: translateY(10px) rotate(-0.45deg); }
.field > *:nth-child(7) { transform: translateY(4px) rotate(0.3deg); }
.field > *:nth-child(8) { transform: translateY(-4px) rotate(-0.5deg); }

/* ordered state: the same objects, aligned, each with an owner and a next step */
.stack { display: grid; gap: 0; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.stack-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--line); background: var(--paper);
}
.stack-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 16px; align-items: center; padding: 13px 16px;
  border-bottom: 1px solid var(--line); font-size: 13.5px; color: var(--ink);
}
.stack-row:last-child { border-bottom: 0; }
.stack-row .who { font: 400 11.5px var(--mono); letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; }
.stack-row .next { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.stack-row .next b { font-weight: 600; color: var(--accent-ink); }

/* ── Thesis ──────────────────────────────────────────────────────────────── */

.thesis-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: clamp(40px, 5vw, 80px); align-items: start; }
.thesis-grid p + p { margin-top: 1.1em; }

/* ── Product ─────────────────────────────────────────────────────────────── */

.prod-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: end; }
.prod-name { font-family: var(--display); font-size: clamp(2.4rem, 5vw, 3.6rem); font-weight: 700; letter-spacing: -0.035em; line-height: 1; color: var(--ink); }

.shot {
  position: relative;
  margin-top: clamp(38px, 4.5vw, 62px);
  border: 1px solid var(--line-2); border-radius: 12px; overflow: hidden;
  background: var(--card);
  box-shadow: 0 2px 4px rgba(18, 45, 66, 0.03), 0 40px 80px -60px rgba(18, 45, 66, 0.6);
}
.shot img { width: 100%; display: block; }
/* The capture ends mid-row; the fade says "the list continues" instead of
   reading as a mis-cropped image. */
.shot::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 76px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
  pointer-events: none;
}
.shot-cap { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-top: 14px; }

/* the canonical lifecycle, as a quiet mono row */
.flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: clamp(26px, 3vw, 38px); }
.flow span { font: 500 11.5px/1 var(--mono); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--line-2); border-radius: 6px; padding: 9px 12px; }
.flow i { width: 14px; height: 1px; background: var(--line-2); flex: none; }

.next-card { margin-top: clamp(44px, 5vw, 68px); border-top: 1px solid var(--line); padding-top: clamp(28px, 3vw, 40px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(20px, 3vw, 56px); }

/* ── Principles ──────────────────────────────────────────────────────────── */

.principle {
  display: grid; grid-template-columns: 88px minmax(0, 1fr) minmax(0, 1.2fr);
  gap: clamp(20px, 3vw, 44px); align-items: start;
  padding: clamp(34px, 4vw, 52px) 0; border-top: 1px solid var(--line);
}
.principle:last-of-type { border-bottom: 1px solid var(--line); }
.principle .n { font: 400 clamp(1.6rem, 2.4vw, 2.1rem)/1 var(--display); font-weight: 300; color: var(--line-2); letter-spacing: -0.02em; }
.principle h3 { font-size: clamp(1.2rem, 1.9vw, 1.6rem); font-weight: 600; letter-spacing: -0.024em; line-height: 1.2; }
.principle p { font-size: 0.9375rem; line-height: 1.62; color: var(--ink-2); }
.principle-rec { margin-top: 12px; font-size: 0.875rem; line-height: 1.6; color: var(--muted); max-width: 58ch; }
.principle-rec b { font-weight: 600; color: var(--ink-2); }

/* ── Company ─────────────────────────────────────────────────────────────── */

.co-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(36px, 5vw, 80px); align-items: start; }
.co-grid p + p { margin-top: 1.1em; }
.co-meta { margin-top: 30px; display: grid; gap: 12px; border-top: 1px solid var(--line); padding-top: 22px; }
.co-meta div { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 16px; align-items: baseline; font-size: 0.9375rem; }

/* ── Closing statement + footer: one continuous night block ──────────────── */

.night { background: var(--night); color: var(--on-night); }
/* The company's signature above its closing statement — the one decorative
   placement of the bare mark on the page, and it is a signature, not an
   ornament. The mark is portrait (1391:1979), so width sets the height. */
.sig { width: 44px; height: auto; display: block; margin-bottom: clamp(30px, 3.4vw, 46px); }
.closing { padding: clamp(96px, 13vw, 176px) 0 clamp(72px, 9vw, 112px); }
.closing-words {
  font-family: var(--display);
  font-size: clamp(2.6rem, 8.4vw, 6.4rem);
  font-weight: 600; line-height: 0.98; letter-spacing: -0.04em;
  color: var(--on-night); margin: 0;
}
/* Four equal words — no tonal ranking between them. */
.closing-words span { display: block; }
.closing-sub { margin-top: clamp(28px, 3vw, 40px); font-size: clamp(1.02rem, 1.5vw, 1.2rem); color: var(--on-night-2); }
.closing-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

footer.site { padding: clamp(48px, 6vw, 72px) 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.1); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
.foot-about p { margin-top: 16px; font-size: 0.875rem; line-height: 1.6; color: var(--on-night-2); max-width: 30ch; }
.foot-col .h { font: 500 11px var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--on-night-2); margin-bottom: 14px; }
.foot-col a { display: block; padding: 6px 0; font-size: 0.9375rem; color: var(--on-night); }
.foot-col a:hover { color: var(--accent-night); }
.foot-bar {
  margin-top: clamp(40px, 5vw, 64px); padding-top: 26px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: grid; gap: 14px;
}
.foot-bar .row { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 0.8125rem; color: var(--on-night-2); }
.foot-bar .boundary { font-size: 0.8125rem; line-height: 1.6; color: var(--on-night-2); max-width: 78ch; }
footer.site .tlink { color: var(--accent-night); border-bottom-color: rgba(157, 244, 185, 0.35); }

/* ══ Responsive ════════════════════════════════════════════════════════════
   Each breakpoint is a RESHAPE, not a stack: the diagrams change composition
   so their labels stay full size (never shrunk to fit).
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: clamp(44px, 6vw, 64px); }
  .hero .lede { max-width: 46em; }
  .ol { max-width: 700px; }
  .thesis-grid, .co-grid, .prod-head, .next-card { grid-template-columns: 1fr; }
  .prod-head { align-items: start; }
  .foot-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .foot-about { grid-column: 1 / -1; }
}

@media (max-width: 860px) {
  .nav-links, .nav-end { display: none; }
  .nav-toggle { display: inline-flex; }
  .principle { grid-template-columns: 56px minmax(0, 1fr); }
  .principle p, .principle > div { grid-column: 2; }
  .trace-row { grid-template-columns: 64px minmax(0, 1fr); }
  .trace-row p { grid-column: 1 / -1; margin-top: 6px; }
}

@media (max-width: 680px) {
  :root { --gutter: 22px; }
  body { font-size: 16px; }
  html { scroll-padding-top: 80px; }

  /* Hero diagram becomes a vertical flow (the concept, not a shrunk desktop
     composition): systems rail → observation → context → decision →
     Ogma OS → OgmaQ. Labels keep full size. */
  .ol-sys { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .ol-sys .rail { display: none; }
  .ol-between { grid-template-columns: 1fr; margin-top: 20px; gap: 14px; }
  .ev--obs, .ev--dec { grid-column: 1; margin: 0; }
  .rung--a .wire.w2 { display: none; }
  .rung--a .wire.w1 { left: 50%; }

  /* The product screenshot is CROPPED on a phone, not shrunk: scaled to fit
     the full 1360px-wide capture would put the app's own labels at ~4 px.
     Cover + left/top origin keeps the columns that carry the point — the
     record id and the linked QMS RECORD — at roughly double that size. */
  .shot img { aspect-ratio: 3 / 4; object-fit: cover; object-position: left top; }
  .shot::after { height: 48px; }

  /* One column, but still scattered: the chips shrink to their content and
     take hand-set x-offsets (not a modulo pattern) with the same slight
     rotations, so the disorder→order rhyme survives the phone reshape
     instead of collapsing into a tidy list. */
  .field { grid-template-columns: 1fr; gap: 13px; }
  .field .frag { width: auto; max-width: 94%; }
  .field > *:nth-child(1) { transform: rotate(-0.5deg); }
  .field > *:nth-child(2) { transform: rotate(0.4deg); justify-self: end; }
  .field > *:nth-child(3) { transform: rotate(0.45deg); margin-left: 8%; }
  .field > *:nth-child(4) { transform: rotate(-0.35deg); justify-self: end; margin-right: 6%; }
  .field > *:nth-child(5) { transform: rotate(0.5deg); }
  .field > *:nth-child(6) { transform: rotate(-0.4deg); margin-left: 13%; }
  .field > *:nth-child(7) { transform: rotate(0.3deg); justify-self: end; }
  .field > *:nth-child(8) { transform: rotate(-0.45deg); margin-left: 5%; }
  .flow i { display: none; }
  .co-meta div { grid-template-columns: 1fr; gap: 2px; }
  .foot-grid { grid-template-columns: 1fr; gap: 30px; }
  .btn { width: 100%; justify-content: center; }
  .closing-ctas .btn, .hero-ctas .btn { width: 100%; }
}

/* ── Reduced motion: a DESIGNED settled state, never a blank diagram ─────── */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .rv, .js .rv { opacity: 1; transform: none; }
  .ol-anim .ev--obs,
  .ol-anim .ev--dec,
  .ol-anim .ev--obs .ev-ctx { opacity: 1; transform: none; animation: none !important; }
  .ol-anim .ol-row {
    animation: none !important;
    background-color: var(--accent-soft);
    box-shadow: inset 2px 0 0 var(--accent);
  }
  .ol-anim .rung .wire { transform: scaleY(1); opacity: 1; animation: none !important; }
  .ol-anim .slot {
    animation: none !important;
    color: var(--ink);
    border-color: color-mix(in srgb, var(--accent) 42%, transparent);
    background-color: var(--accent-soft);
  }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
  header.top, .nav-toggle, .menu, .hero-ctas, .closing-ctas { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .night { background: #fff; color: #000; }
  .closing-words { color: #000; }
  /* the off-white lockup and mark would vanish on white paper */
  .night .wm-logo, .sig { display: none; }
  .rv, .js .rv { opacity: 1; transform: none; }
  .pad, .pad-sm { padding: 18pt 0; }
}