/* ═══════════════════════════════════════════════════════════════════════════
   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 family navy, the family Action Blue 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 "Stemline" mark + the blue-designation wordmark; the
   whole page is drawn in the same navy the mark is (see the wordmark block
   below and docs/brand/ogma-os.md).

   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 {
  /* Surfaces — warm off-white paper, deliberately not the product's navy */
  --paper: #faf9f6;
  --paper-2: #f3f1ec;
  --card: #ffffff;
  /* Ink — the OgmaQ family navy (docs/brand/README.md), not a neutral
     near-black. The identity is drawn in this colour, so the page is too;
     the warm hairlines below are the deliberate counterpoint to it. */
  --ink: #071326;
  --ink-2: #39414f;
  --muted: #646e7d;
  /* Warm hairlines — the site's main structural device */
  --line: #e4e1da;
  --line-2: #cfcbc1;
  /* Accent — the OgmaQ family "Action Blue" (docs/brand/README.md) */
  --accent: #245ff2;
  --accent-ink: #12328e;
  --accent-soft: #e9eefe;
  /* Attention — the ONE second meaningful hue (observation / unresolved) */
  --signal: #b45309;
  --signal-soft: #fbf0e0;
  /* The mark's accent stroke. Follows the surface it is drawn on: Action Blue
     is only ~3.5:1 on the night ground, so the night block re-points it. */
  --mk-accent: var(--accent);
  /* Night — the closing statement + footer, one continuous block. The same
     navy as the mark's ground, so the favicon, the social card and the bottom
     of the page are one colour. */
  --night: #071326;
  --night-2: #0e1f38;
  --on-night: #f2f1ee;
  --on-night-2: #9ba1ac;
  --accent-night: #8fb0ff;

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

/* 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(18, 50, 142, 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 ────────────────────────────────────────────────────
   Mark: "Stemline" — an Ogham stem line crossed by two strokes. Ogham is the
   alphabet Ogma is credited with inventing, and its letter O is exactly two
   strokes crossing the stem, so the parent and the product are two letters in
   one alphabet rather than two logos that resemble each other. Read plainly it
   is marks along a line: events on a timeline, work on a layer.
   Master: brand/ogma-os-mark.svg. NEVER respace the two strokes — the 3-unit
   gap is what makes them read as one letter instead of two elements.

   Wordmark: OgmaQ has a blue Q; Ogma OS has a blue OS. No box, no third
   typeface — the family logic is carried by the one thing the product wordmark
   already does, and it degrades to plain "Ogma OS" in a single colour.

   The mark is sized so its strokes match the wordmark's cap height: the
   strokes are 50% of the 64-unit box and Manrope's cap is ≈0.72em, so the box
   is ≈1.44 × the font size. Keep that ratio if either size changes. */
.wm { display: inline-flex; align-items: center; gap: 11px; font-family: var(--display); }
.wm-mark { width: 29px; height: 29px; flex: none; color: var(--ink); }
.wm-name {
  font-size: 20px; font-weight: 700; letter-spacing: -0.028em;
  color: var(--ink); white-space: nowrap;
}
.wm-os { color: var(--accent); }
.wm--night .wm-mark, .wm--night .wm-name { color: var(--on-night); }
.wm--night .wm-os { color: var(--accent-night); }
.wm--lg { gap: 15px; }
.wm--lg .wm-mark { width: 43px; height: 43px; }
.wm--lg .wm-name { font-size: 30px; }

/* 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 0 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, 11vw, 148px) 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. */
.rv { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.22, 0.7, 0.3, 1); }
.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(7, 19, 38, 0.03), 0 10px 24px -18px rgba(7, 19, 38, 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(7, 19, 38, 0.04), 0 18px 40px -30px rgba(7, 19, 38, 0.5);
}
/* the wordmark treatment, at diagram scale */
.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-layer-name b { font-weight: 700; color: var(--accent); }
.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; }

/* ── The gaps (problem section) ──────────────────────────────────────────── */

.gap-rows { border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 76px); }
.gap-row {
  display: grid; grid-template-columns: 56px minmax(0, 0.6fr) minmax(0, 1.4fr);
  gap: clamp(20px, 3vw, 44px); align-items: baseline;
  padding: clamp(26px, 3vw, 36px) 0; border-bottom: 1px solid var(--line);
}
.gap-num { font: 400 12px var(--mono); letter-spacing: 0.1em; color: var(--muted); }
.gap-name { font-family: var(--display); font-size: clamp(1.15rem, 1.7vw, 1.45rem); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); }
.gap-row p { font-size: 0.9375rem; line-height: 1.6; color: var(--ink-2); }

/* ═══ 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(7, 19, 38, 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(7, 19, 38, 0.03), 0 40px 80px -60px rgba(7, 19, 38, 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); }

/* ── 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); --mk-accent: var(--accent-night); }
/* The company's signature above its closing statement — the one decorative
   placement of the mark on the page, and it is a signature, not an ornament. */
.sig { width: 46px; height: 46px; color: var(--on-night); 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: 92ch; }
footer.site .tlink { color: var(--accent-night); border-bottom-color: rgba(143, 176, 255, 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 { grid-column: 2; }
  .gap-row { grid-template-columns: 40px minmax(0, 1fr); }
  .gap-row p { grid-column: 2; margin-top: 8px; }
}

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

  .field { grid-template-columns: 1fr; }
  .field > * { transform: none !important; }
  .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 { 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, .wm--night .wm-name { color: #000; }
  .rv { opacity: 1; transform: none; }
  .pad, .pad-sm { padding: 18pt 0; }
}