/* ==========================================================================
   site-v2 · the shared design system: tokens, type, buttons, links, the bar, plates (paper / ink / split grounds
   and their dithered joins), the footer, inner-page hero and chapters, tables, code, notes, controls.
   Type: Mona Sans (display), Geist (text), Geist Mono (labels, code), Doto (numerals, sparingly).
   The logo is never recoloured. Signal orange marks only a refusal.
   ========================================================================== */
:root {
  --paper: #F3F0E8;
  --ink: #121110;
  --ink-2: #3A3631;
  --stone: #6E685F;
  --light: #E8E4DB;
  --signal: #FF4D00;     /* the refusal, and nothing else: the focal square on the line, the counter */
  --sig-night: #FF6B2C;
  /* the colour family (site-v3), sampled from the owner's references 9, 10 and 13; the same values as the scene's
     FAM and the plates' FAMHEX. Three tones per hue. */
  --warm: #F0603A; --warm-2: #E5512E; --coral: #EC7D6A;
  --pink: #EA8E9D; --rose: #E9768A; --pink-2: #F2A7B4;
  --magenta: #DE5FA8; --orchid: #E57ABB; --plum: #B83E86;
  --violet: #A464DC; --lilac: #B888E4; --violet-2: #8E55C9;
  --peach: #F3B9A0; --blush: #F6C6D2; --white: #FFFEFB;
  /* roles: accents gather in clumps in a mass (warm and pink lead, magenta follows, violet is rare); highlights
     sit inside a mass; nodes are white on ink and ink on paper; the focal point is the signal square */
  --accent-1: var(--warm); --accent-2: var(--pink); --accent-3: var(--magenta); --accent-4: var(--violet);
  --highlight: var(--peach); --focal: var(--signal);
  --u: 3px;
  --pad: 56px;
  --seam: 930px;       /* set by the scene: where the line is */
  --seam-ch: 930px;    /* the line's place in the chapters */
  --vh: 100vh;         /* a stable viewport height (phones) */
  --gr: 152px;         /* the plates' right gutter, where the fixed index lives */
  --s1: 4px; --s2: 8px; --s3: 16px; --s4: 24px; --s5: 32px; --s6: 48px; --s7: 64px; --s8: 96px;   /* spacing scale */
  --display: 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  --text: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --pixel: 'Doto', var(--mono);
}
* { box-sizing: border-box; }
html { background: var(--paper); scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; color: var(--ink); font-family: var(--text); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
h1, h2, h3, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
code { font-family: var(--mono); font-size: .9em; letter-spacing: -.01em; }
:focus-visible { outline: 1.5px solid var(--ink); outline-offset: 3px; }
.index.is-dark :focus-visible { outline-color: var(--paper); }
[id] { scroll-margin-top: 58px; }   /* without JS, anchors still clear the bar */
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- buttons and links ---------- */
.btn {
  --pc: var(--ink); --pf: transparent;
  display: inline-flex; align-items: center; justify-content: center; height: 46px; padding: 0 22px;
  font-family: var(--text); font-size: 15px; font-weight: 500; color: var(--ink); white-space: nowrap;
  background:
    linear-gradient(var(--pc), var(--pc)) calc(var(--u) * 2) 0 / calc(100% - var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--pc), var(--pc)) calc(var(--u) * 2) 100% / calc(100% - var(--u) * 4) var(--u) no-repeat,
    linear-gradient(var(--pc), var(--pc)) 0 calc(var(--u) * 2) / var(--u) calc(100% - var(--u) * 4) no-repeat,
    linear-gradient(var(--pc), var(--pc)) 100% calc(var(--u) * 2) / var(--u) calc(100% - var(--u) * 4) no-repeat,
    linear-gradient(var(--pc), var(--pc)) var(--u) var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--pc), var(--pc)) calc(100% - var(--u)) var(--u) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--pc), var(--pc)) var(--u) calc(100% - var(--u)) / var(--u) var(--u) no-repeat,
    linear-gradient(var(--pc), var(--pc)) calc(100% - var(--u)) calc(100% - var(--u)) / var(--u) var(--u) no-repeat,
    var(--pf);
  clip-path: polygon(
    calc(var(--u) * 2) 0, calc(100% - var(--u) * 2) 0, calc(100% - var(--u) * 2) var(--u), calc(100% - var(--u)) var(--u),
    calc(100% - var(--u)) calc(var(--u) * 2), 100% calc(var(--u) * 2), 100% calc(100% - var(--u) * 2), calc(100% - var(--u)) calc(100% - var(--u) * 2),
    calc(100% - var(--u)) calc(100% - var(--u)), calc(100% - var(--u) * 2) calc(100% - var(--u)), calc(100% - var(--u) * 2) 100%, calc(var(--u) * 2) 100%,
    calc(var(--u) * 2) calc(100% - var(--u)), var(--u) calc(100% - var(--u)), var(--u) calc(100% - var(--u) * 2), 0 calc(100% - var(--u) * 2),
    0 calc(var(--u) * 2), var(--u) calc(var(--u) * 2), var(--u) var(--u), calc(var(--u) * 2) var(--u));
}
.btn:not(.btn--ink) { --pf: var(--paper); }
.btn--ink { --pf: var(--ink); color: var(--paper); }
.btn:hover { --pf: var(--ink); color: var(--paper); }
.btn--ink:hover { --pf: var(--ink-2); --pc: var(--ink-2); }
.btn--sm { height: 34px; padding: 0 14px; font-size: 13.5px; }
.link { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; text-decoration-color: rgb(var(--ink-rgb) / .35); }
.link:hover { text-decoration-color: var(--ink); }
.link--sm { font-size: 14px; }

/* ---------- the bar (after the hero): it stops at the line ---------- */
.bar { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 58px; display: flex; align-items: center; gap: 30px; padding: 0 28px 0 var(--pad); background: var(--paper); border-bottom: 1px solid rgb(var(--ink-rgb) / .16); transform: translateY(-100%); transition: transform .35s cubic-bezier(.2, .8, .2, 1); }
.bar.is-on { transform: none; }
.bar__logo img { display: block; height: 21px; width: auto; }
.bar__links { display: flex; gap: 26px; margin-left: auto; font-size: 13.5px; color: var(--ink-2); }
.bar__links a:hover { color: var(--ink); }

.h2 { font-family: var(--display); font-weight: 380; font-stretch: 104%; font-size: clamp(40px, 4.3vw, 66px); line-height: 1.0; letter-spacing: -0.034em; max-width: 13em; }
.h2--quiet { font-size: clamp(30px, 2.8vw, 42px); letter-spacing: -0.026em; }
.h2--big { font-size: clamp(56px, 6.6vw, 104px); line-height: .95; letter-spacing: -0.042em; }
.h3 { font-family: var(--display); font-weight: 420; font-stretch: 104%; font-size: 26px; line-height: 1.12; letter-spacing: -0.02em; }
.body { margin-top: 24px; max-width: 450px; font-size: 17px; line-height: 1.6; color: var(--ink-2); }
.lede { margin-top: 20px; max-width: 420px; font-size: 17px; line-height: 1.55; color: var(--ink-2); }
.note { margin-top: 16px; max-width: 440px; font-size: 14.5px; line-height: 1.55; color: var(--stone); }
.links { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }

/* ---------- shared: the plates (opaque chapters that slide over the scene) ---------- */
.plate { position: relative; }
.plate--paper { background: var(--paper); }
.plate--ink { background: var(--ink); color: var(--paper); }
.plate--split { background: linear-gradient(to right, var(--paper) var(--seam), var(--ink) var(--seam)); }
.plate canvas, canvas.edge { display: block; max-width: 100%; image-rendering: pixelated; }
canvas.edge { position: absolute; left: 0; z-index: 3; pointer-events: none; }
.edge--top { bottom: 100%; }
.edge--bottom { top: 100%; }
.kicker { display: flex; align-items: baseline; gap: 14px; margin-bottom: var(--s4); font-family: var(--mono); font-size: 11px; letter-spacing: .3em; text-transform: uppercase; line-height: 20px; color: var(--ink); }
.kicker b { font-family: var(--pixel); font-weight: 800; font-size: 15px; letter-spacing: .06em; color: var(--stone); }
.plate--ink .kicker, .plate--ink .h2 { color: var(--paper); }
.plate--ink .body { color: rgba(236, 232, 224, .74); }
.plate--ink .kicker b { color: rgba(236, 232, 224, .62); }
.plate--ink .link { color: var(--paper); text-decoration-color: rgba(236, 232, 224, .62); }
.plate--ink .link:hover { text-decoration-color: var(--paper); }
.plate--ink :focus-visible { outline-color: var(--paper); }
.plate--ink code { color: var(--paper); }

.form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; max-width: 470px; }
.form .cf-turnstile-slot { flex: 1 0 100%; order: 3; }
.form .cf-turnstile-slot:empty { display: none; }
.form input[type=email] { flex: 1; min-width: 0; height: 46px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 0; background: var(--paper); font-size: 15px; }
.form input[type=email]::placeholder { color: #8C867C; }
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; }
.form__msg { margin-top: 12px; font-family: var(--mono); font-size: 11.5px; line-height: 1.5; color: var(--stone); }

/* ---------- the bar on the inner pages: always on, full width; the current page is underlined ---------- */
.bar__links a[aria-current] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 6px; }
.bar__logo { flex: none; }

/* ---------- the footer (every page): the links, then the lockup, dithered, at the foot ---------- */
.foot { position: relative; z-index: 2; padding: var(--s7) var(--gr) 0 var(--pad); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 190px)); gap: var(--s5); padding-bottom: var(--s6); border-bottom: 1px solid rgb(var(--ink-rgb) / .18); }
.foot__logo { display: block; height: 22px; width: auto; }
.foot__meta { margin-top: var(--s3); max-width: 260px; font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--stone); }
.foot__h { margin-bottom: var(--s3); font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); }
.foot__col ul { display: grid; gap: 9px; }
.foot__col a { font-size: 14px; color: var(--ink-2); }
.foot__col a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.foot__mark { margin-top: var(--s7); aspect-ratio: 2249 / 648; }
/* site-v5: the footer's "Use cases:" label, set like the column heads */
.foot__sub { margin-top: var(--s3); font-family: var(--mono); font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--stone); }

/* ---------- inner pages: grid, hero, chapters ---------- */
.sub { --gr: 56px; }
.sub main { position: relative; z-index: 2; }
.phero { position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 64px; min-height: max(820px, 100vh); padding: calc(58px + 12vh) var(--gr) 12vh var(--pad); }
.phero__text { align-self: start; }
.h1p { font-family: var(--display); font-weight: 380; font-stretch: 104%; font-size: clamp(46px, 5vw, 78px); line-height: .98; letter-spacing: -0.038em; max-width: 9.5em; }
.plate--ink .h1p { color: var(--paper); }
.phero .lede { margin-top: var(--s5); max-width: 440px; font-size: 18px; }
.toc { display: grid; gap: 4px; margin-top: var(--s7); padding-left: var(--s3); border-left: 1px solid rgb(var(--ink-rgb) / .4); }
.toc a { display: flex; gap: 14px; align-items: baseline; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2); }
.toc a b { font-family: var(--pixel); font-weight: 800; font-size: 13px; color: var(--stone); }
.toc a:hover span { text-decoration: underline; text-underline-offset: 4px; }
.plate--ink .toc { border-left-color: rgba(236, 232, 224, .62); }
.plate--ink .toc a { color: rgba(236, 232, 224, .78); }
.plate--ink .toc a b { color: rgba(236, 232, 224, .62); }
.plate--ink .lede { color: rgba(236, 232, 224, .74); }

.chap { position: relative; display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; padding: 18vh var(--gr) 18vh var(--pad); }
.chap__head { align-self: start; }
.chap__body, .chap__head { min-width: 0; }
.spec code { overflow-wrap: anywhere; }
.chap--wide { display: block; }
.chap--wide .chap__head { max-width: 640px; margin-bottom: var(--s7); }
.chap .h2 { font-size: clamp(36px, 3.6vw, 56px); }
.chap .body + .body { margin-top: var(--s3); }
.plate--ink .note, .plate--ink .lede { color: rgba(236, 232, 224, .62); }
.plate--halves { background: linear-gradient(to right, var(--paper) 50%, var(--ink) 50%); }
.more { margin-top: var(--s6); }
.mono-l { font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
.plate--ink .mono-l { color: rgba(236, 232, 224, .62); }

/* ---------- tables: hairlines, mono heads, Doto numbers ---------- */
.spec { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.55; }
.spec th { padding: 0 var(--s4) var(--s3) 0; text-align: left; vertical-align: bottom; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); border-bottom: 1px solid var(--ink); }
.spec td { padding: var(--s4) var(--s4) var(--s4) 0; vertical-align: top; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); color: var(--ink-2); }
.spec td:last-child, .spec th:last-child { padding-right: 0; }
.spec .n { width: 64px; font-family: var(--pixel); font-weight: 800; font-size: 15px; color: var(--stone); }
.spec .k { color: var(--ink); }
.spec .t { font-family: var(--display); font-weight: 420; font-stretch: 104%; font-size: 21px; line-height: 1.15; letter-spacing: -0.015em; color: var(--ink); }
.spec .t + p { margin-top: 6px; }
.spec a.link { white-space: nowrap; }
.plate--ink .spec th { color: rgba(236, 232, 224, .62); border-bottom-color: var(--paper); }
.plate--ink .spec td { color: rgba(236, 232, 224, .74); border-bottom-color: rgba(236, 232, 224, .2); }
.plate--ink .spec .k, .plate--ink .spec .t { color: var(--paper); }
.plate--ink .spec .n { color: rgba(236, 232, 224, .62); }
.spec--sm { font-size: 14px; }
.spec--sm td { padding: 14px var(--s4) 14px 0; }

/* ---------- code: real commands and real output only; a hairline frame, no window chrome ---------- */
.code { position: relative; margin-top: var(--s4); border: 1px solid rgb(var(--ink-rgb) / .55); background: var(--code-bg); }
.code__cap { display: flex; justify-content: space-between; gap: var(--s3); padding: 9px 14px 8px; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); font-family: var(--mono); font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--stone); }
.code pre { margin: 0; padding: 16px 14px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13px; line-height: 1.7; color: var(--ink); white-space: pre; tab-size: 2; }
.code pre code { font-size: inherit; letter-spacing: 0; }
.code .p { color: var(--stone); user-select: none; }
.code .c { color: var(--stone); }
.code .w { color: var(--warn); }
.code .ok { color: var(--ink); }
.code .err { background: var(--ink); color: var(--paper); }
.code .k { color: var(--ink); }
.code .v { color: var(--ink-2); }
.plate--ink .code { border-color: rgba(236, 232, 224, .62); background: rgba(255, 255, 255, .025); }
.plate--ink .code__cap { border-bottom-color: rgba(236, 232, 224, .18); color: rgba(236, 232, 224, .62); }
.plate--ink .code pre { color: rgba(236, 232, 224, .86); }
.plate--ink .code .p, .plate--ink .code .c { color: rgba(236, 232, 224, .62); }
.plate--ink .code .k { color: var(--paper); }
.plate--ink .code .v { color: rgba(236, 232, 224, .7); }
.plate--ink .code .err { background: var(--paper); color: var(--ink); }

/* ---------- notes: a hairline rule and a Doto letter ---------- */
.notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5); margin-top: var(--s7); }
.notes > div { padding-top: var(--s3); border-top: 1px solid rgb(var(--ink-rgb) / .5); }
.notes h3 { display: flex; gap: 12px; align-items: baseline; font-family: var(--display); font-weight: 440; font-stretch: 104%; font-size: 18px; line-height: 1.25; letter-spacing: -0.01em; }
.notes h3 b { font-family: var(--pixel); font-weight: 800; font-size: 15px; color: var(--stone); }
.notes p { margin-top: 10px; font-size: 14.5px; line-height: 1.6; color: var(--ink-2); }
.plate--ink .notes > div { border-top-color: rgba(236, 232, 224, .62); }
.plate--ink .notes p { color: rgba(236, 232, 224, .7); }
.callout { margin-top: var(--s6); padding: var(--s4) 0 0; border-top: 1px solid var(--ink); max-width: 640px; }
.callout .mono-l { display: block; margin-bottom: 10px; color: var(--ink); }
.callout p { font-size: 15px; line-height: 1.62; color: var(--ink-2); }
.plate--ink .callout { border-top-color: var(--paper); }
.plate--ink .callout .mono-l { color: var(--paper); }
.plate--ink .callout p { color: rgba(236, 232, 224, .74); }

/* ---------- lists with Doto numbers (no checkmarks) ---------- */
.nlist { display: grid; gap: 0; counter-reset: n; }
.nlist li { position: relative; padding: 14px 0 14px 44px; border-bottom: 1px solid rgb(var(--ink-rgb) / .18); font-size: 15px; line-height: 1.55; color: var(--ink-2); }
.nlist li::before { position: absolute; left: 0; top: 14px; counter-increment: n; content: counter(n, decimal-leading-zero); font-family: var(--pixel); font-weight: 800; font-size: 13px; line-height: 23px; color: var(--stone); }
.plate--ink .nlist li { border-bottom-color: rgba(236, 232, 224, .16); color: rgba(236, 232, 224, .76); }
.plate--ink .nlist li::before { color: rgba(236, 232, 224, .62); }

/* ---------- small interactive controls: pixel-cornered toggles, a hairline select ---------- */
.tog { display: inline-flex; align-items: center; gap: 10px; padding: 7px 10px 7px 8px; border: 1px solid rgb(var(--ink-rgb) / .3); font-family: var(--mono); font-size: 12px; color: var(--ink-2); cursor: pointer; user-select: none; }
.tog input { position: absolute; opacity: 0; pointer-events: none; }
.tog i { width: 9px; height: 9px; border: 1px solid var(--ink); flex: none; }
.tog:has(input:checked) { border-color: var(--ink); color: var(--ink); }
.tog:has(input:checked) i { background: var(--ink); }
.tog:has(input:focus-visible) { outline: 1.5px solid var(--ink); outline-offset: 2px; }
.tog span { margin-left: auto; padding-left: 10px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.sel { position: relative; display: inline-block; }
.sel select { appearance: none; height: 34px; padding: 0 30px 0 10px; border: 1px solid var(--ink); border-radius: 0; background: transparent; font-family: var(--mono); font-size: 12.5px; color: var(--ink); cursor: pointer; }
.sel::after { content: ''; position: absolute; right: 11px; top: 13px; width: 6px; height: 6px; border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink); transform: rotate(45deg); pointer-events: none; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 0; border: 1px solid currentColor; }
.seg button { padding: 6px 12px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; }
.seg button + button { border-left: 1px solid currentColor; }
.seg button[aria-pressed="true"] { background: var(--paper); color: var(--ink); }
.plate--paper .seg button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }


/* ---------- the comparison: four places a rule can live (approaches, never products) ----------
   Each column opens with a small drawing of where its rule sits; each answer carries a lane that reaches the line
   (the rule holds), stops short (in part) or is only a stub (it doesn't). No checkmarks. */
.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; color: rgba(236, 232, 224, .74); }
.cmp th, .cmp td { text-align: left; vertical-align: top; font-weight: 400; }
.cmp thead th { padding: 0 24px 16px 0; border-bottom: 1px solid var(--paper); vertical-align: bottom; }
.cmp thead .cmp__q { width: 210px; }
.cmp__fig { position: relative; display: block; height: 76px; margin-bottom: 14px; }
.cmp__fig canvas, .cmp__fig svg { position: absolute; left: 0; top: 0; overflow: visible; }
.cmp__fig .fr { fill: none; stroke: rgba(236, 232, 224, .35); stroke-width: 1; stroke-dasharray: 1 3; shape-rendering: crispEdges; }
.cmp__fig .bx { fill: none; stroke: rgba(236, 232, 224, .8); stroke-width: 1; shape-rendering: crispEdges; }
.cmp__fig .wall { stroke: var(--paper); stroke-width: 1; shape-rendering: crispEdges; }
.cmp__fig .ld { stroke: rgba(236, 232, 224, .5); stroke-width: 1; stroke-dasharray: 1 3; shape-rendering: crispEdges; }
.cmp__fig .port { fill: var(--ink); stroke: var(--paper); stroke-width: 1; shape-rendering: crispEdges; }
.cmp__fig .fanl { fill: none; stroke: rgba(236, 232, 224, .5); stroke-width: 1; }
.cmp__fig .nd { fill: var(--paper); }
.cmp__name { display: block; font-family: var(--display); font-weight: 420; font-stretch: 104%; font-size: 17px; line-height: 1.22; letter-spacing: -0.01em; color: rgba(236, 232, 224, .82); }
.cmp th[data-k="constle"] .cmp__name { color: var(--paper); }
.cmp__key { display: flex; align-items: center; gap: 8px; margin-top: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: rgba(236, 232, 224, .62); }
.cmp__sw { position: relative; display: inline-block; width: 22px; height: 5px; flex: none; }
.cmp__sw::before { content: ''; position: absolute; left: 0; top: 1px; height: 3px; background: repeating-linear-gradient(90deg, rgba(236, 232, 224, .8) 0 2px, transparent 2px 3px); }
.cmp__sw--full::before { width: 20px; } .cmp__sw--full::after { content: ''; position: absolute; right: 0; top: -2px; width: 1px; height: 9px; background: var(--paper); }
.cmp__sw--part::before { width: 12px; } .cmp__sw--none::before { width: 4px; }
.cmp tbody th { padding: 18px 24px 20px 0; font-family: var(--mono); font-size: 10.5px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: rgba(236, 232, 224, .62); border-bottom: 1px solid rgba(236, 232, 224, .16); }
.cmp tbody td { padding: 18px 24px 20px 0; font-size: 14px; line-height: 1.55; border-bottom: 1px solid rgba(236, 232, 224, .16); }
.cmp td[data-k="constle"] { color: var(--paper); }
.cmp td code { font-size: 12.5px; color: var(--paper); }
.cmp__lane { position: relative; display: block; height: 7px; margin-bottom: 10px; }
.cmp__lane canvas { position: absolute; left: 0; top: 0; }
.cmp-notes { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: 64px; margin-top: var(--s6); }
.cmp-notes .note { margin-top: 0; }
.cmp-notes .body { margin-top: 0; max-width: 640px; }
.cmp-notes .links { grid-column: 2; }


/* ---------- the dark theme: html[data-theme="dark"], set before first paint (see the head script); without JS it follows
   prefers-color-scheme. The ground is the email's dark (#121110), text is paper, hairlines are pale. Chapters and panels
   that are ink in light mode become a raised dark (#1B1A18), so the paper / ink alternation still reads. ---------- */
:root { --ink-rgb: 18 17 16; --node: #F6F4EE; --code-bg: rgba(255, 254, 251, .45); --warn: #9A4A2C; --raised: #121110; color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; --paper: #121110; --ink: #F3F0E8; --ink-rgb: 243 240 232; --ink-2: #CFC9BF; --stone: #9A948A; --node: #121110; --code-bg: rgba(255, 255, 255, .03); --warn: #E8A086; --raised: #1B1A18; }
:root[data-theme="dark"] :is(.plate--ink, .cap__panel, .tm__col--edge, .hud, .ln--light, .index.is-dark) { --paper: #F3F0E8; --ink: #1B1A18; --ink-rgb: 27 26 24; --ink-2: #3A3631; --node: #F6F4EE; }
:root[data-theme="dark"] .plate--split { background: linear-gradient(to right, var(--paper) var(--seam), var(--raised) var(--seam)); }
:root[data-theme="dark"] .plate--halves { background: linear-gradient(to right, var(--paper) 50%, var(--raised) 50%); }
:root[data-theme="dark"] img[src*="constle-lockup-ink"] { filter: invert(1) brightness(1.03); }
@media (min-width: 760px) { :root[data-theme="dark"] :is(.be__t td:nth-child(3), .be__t thead th:nth-child(3)) { --paper: #F3F0E8; --ink: #1B1A18; --ink-rgb: 27 26 24; } }
@media (max-width: 759px) { :root[data-theme="dark"] .plate--halves { background: var(--paper); } }

.foot__legal { display: flex; gap: 18px; margin-top: var(--s3); font-size: 13px; }
.foot__legal a { color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: rgb(var(--ink-rgb) / .3); }
.foot__legal a:hover { color: var(--ink); text-decoration-color: currentColor; }
/* the theme switch, in the footer */
.theme-t { display: inline-flex; margin-top: var(--s4); border: 1px solid rgb(var(--ink-rgb) / .35); }
.theme-t button { padding: 5px 10px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--stone); }
.theme-t button + button { border-left: 1px solid rgb(var(--ink-rgb) / .35); }
.theme-t button:hover { color: var(--ink); }
.theme-t button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
@media (prefers-color-scheme: dark) {
:root:not([data-theme]) { color-scheme: dark; --paper: #121110; --ink: #F3F0E8; --ink-rgb: 243 240 232; --ink-2: #CFC9BF; --stone: #9A948A; --node: #121110; --code-bg: rgba(255, 255, 255, .03); --warn: #E8A086; --raised: #1B1A18; }
:root:not([data-theme]) :is(.plate--ink, .cap__panel, .tm__col--edge, .hud, .ln--light, .index.is-dark) { --paper: #F3F0E8; --ink: #1B1A18; --ink-rgb: 27 26 24; --ink-2: #3A3631; --node: #F6F4EE; }
:root:not([data-theme]) .plate--split { background: linear-gradient(to right, var(--paper) var(--seam), var(--raised) var(--seam)); }
:root:not([data-theme]) .plate--halves { background: linear-gradient(to right, var(--paper) 50%, var(--raised) 50%); }
:root:not([data-theme]) img[src*="constle-lockup-ink"] { filter: invert(1) brightness(1.03); }
}

/* ---------- phones ---------- */
@media (max-width: 759px) {
  [id] { scroll-margin-top: 54px; }
  .bar__links { display: flex; gap: 14px; font-size: 12.5px; margin-left: auto; }
  .bar .btn { display: none; }
  .bar { gap: 12px; }
  .foot { padding: var(--s6) 16px 0; }
  .foot__grid { grid-template-columns: 1fr 1fr; gap: var(--s5) var(--s4); }
  .foot__id { grid-column: 1 / -1; }
  .sub { --gr: 16px; }
  .phero { display: block; min-height: 0; padding: calc(54px + 8vh) 16px 10vh; }
  .h1p { font-size: clamp(40px, 11.6vw, 52px); }
  .phero .lede { font-size: 16.5px; }
  .toc { margin-top: var(--s6); }
  .chap { display: block; padding: 12vh 16px; }
  .chap__body { margin-top: var(--s6); }
  .chap .h2 { font-size: clamp(32px, 9vw, 40px); }
  .spec { font-size: 14.5px; }
  .spec thead { display: none; }
  .spec, .spec tbody, .spec tr, .spec td { display: block; width: 100%; }
  .spec tr { padding: var(--s4) 0; border-bottom: 1px solid rgb(var(--ink-rgb) / .22); }
  .plate--ink .spec tr { border-bottom-color: rgba(236, 232, 224, .2); }
  .spec td { padding: 4px 0; border: 0; }
  .spec td[data-l]::before { content: attr(data-l); display: block; margin: 8px 0 2px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .2em; text-transform: uppercase; color: var(--stone); }
  .plate--ink .spec td[data-l]::before { color: rgba(236, 232, 224, .62); }
  .code pre { font-size: 11.5px; padding: 14px 12px; }
  .notes { grid-template-columns: 1fr; }
  .plate--halves { background: var(--paper); }
  .cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100% !important; }
  .cmp thead tr { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 16px; }
  .cmp thead th { padding: 0 0 12px; border-bottom: 0; }
  .cmp thead .cmp__q { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 16px; padding-bottom: 6px; }
  .cmp thead .cmp__q .cmp__key { margin-top: 0; }
  .cmp__fig { height: 56px; margin-bottom: 8px; }
  .cmp__name { font-size: 14.5px; }
  .cmp tbody tr { padding: 22px 0 6px; border-top: 1px solid var(--paper); }
  .cmp tbody th { padding: 0 0 6px; border: 0; color: var(--paper); }
  .cmp tbody td { padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(236, 232, 224, .12); }
  .cmp td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(236, 232, 224, .62); }
  .cmp-notes { display: block; }
  .cmp-notes .body { margin-top: var(--s4); }
}

/* the consent line under the forms: its privacy link keeps the line's small mono type, underlined */
.form__msg a { color: inherit; font: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* an empty status line (every form, at idle) takes no room until the form writes to it */
.form__msg:empty { margin-top: 0; }

/* ==========================================================================
   phones (site-v5-live): the site designed for the phone, not squeezed from the desktop. Every page. ≤ 759px.
   One text column with 20px sides and a fixed vertical rhythm; headings balance their lines; body text 16.5px;
   every tap target 44px; the signup forms stacked full width; no label under 11px. The desktop is untouched: every
   rule is inside this query.
   ========================================================================== */
@media (max-width: 759px) {
  :root { --pad: 20px; --gr: 20px; }

  /* the bar: the logo and three links, each a 44px target */
  .bar { gap: 8px; padding: 0 10px 0 20px; }
  .bar__logo { display: inline-flex; align-items: center; min-height: 44px; }
  .bar__links { gap: 2px; font-size: 13px; }
  .bar__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; }

  /* the inner pages: hero and chapters at one rhythm, no viewport-sized gaps */
  .phero { padding: 108px 20px 64px; }
  .chap { padding: 64px 20px; }
  .chap__body { margin-top: var(--s5); }
  .toc { gap: 0; margin-top: var(--s5); }
  .toc a { min-height: 44px; align-items: center; }

  /* type */
  h1, h2, h3, .h1p, .h2 { text-wrap: balance; }
  p, li, dd { text-wrap: pretty; }
  .body, .lede { font-size: 16.5px; line-height: 1.6; }
  .note { font-size: 14.5px; }
  .kicker, .mono-l { font-size: 11px; }
  .mono-l code { font-size: 1em; }
  .spec th { font-size: 11px; }

  /* links that stand alone: a 44px target, the line where it was */
  a.link { display: inline-block; padding: 11px 0; margin: -11px 0; }
  .links { gap: 18px 28px; }
  .chap > .links:first-child { margin-top: 0; }   /* a closing row of links: no extra gap above */

  /* every signup form like the hero's: field and button stacked full width, 48px, 16px text (no zoom on focus) */
  form.form { flex-direction: column; flex-wrap: nowrap; gap: 10px; max-width: none; }
  form.form input[type=email] { flex: none; width: 100%; height: 48px; font-size: 16px; }
  form.form .btn { align-self: stretch; height: 48px; font-size: 15px; }
  form.form .cf-turnstile-slot { position: static; flex: none; }
  form.form .cf-turnstile-slot:empty { display: block; }   /* the row is there from the start: the widget moves nothing */
  .form__msg { margin-top: 4px; font-size: 11.5px; line-height: 1.55; text-wrap: balance; }
  .form__msg:empty { margin-top: 0; }
  .form__msg:not(:empty) + .form__msg { margin-top: 2px; }

  /* the footer: room to tap */
  .foot { padding: var(--s6) 20px 0; }
  .foot__id > a { display: inline-flex; align-items: center; min-height: 44px; }
  .foot__col ul { gap: 0; }
  .foot__col li { display: flex; align-items: center; min-height: 44px; }
  .foot__col a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }
  .foot__h, .foot__sub { font-size: 11px; }
  .foot__sub { margin-top: var(--s2); }
  .foot__legal a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
  .theme-t button { min-height: 44px; padding: 0 16px; font-size: 11px; }

  /* tables and code: labels no smaller than 11px */
  .spec td[data-l]::before, .cmp td[data-l]::before { font-size: 11px; }
  .cmp__key, .cmp__q, .cmp tbody th { font-size: 11px; }
  .code__cap { font-size: 11px; }
  .code pre { font-size: 12px; }
}

/* ==========================================================================
   phone-design, Round 2 (prototype): the shared phone parts (js/phone.js). Every rule is inside the phone query,
   except the first line, which keeps the phone-only pager boxes off the desktop.
   ========================================================================== */
.pager { display: none; }
@media (max-width: 759px) {
  /* a strip: one item to a screen, the next one's edge showing; it scrolls inside itself, never the page */
  [data-strip] { display: flex !important; gap: 16px; width: auto !important; margin-left: -20px; margin-right: -20px; padding: 0 20px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 20px; scrollbar-width: none; }
  [data-strip]::-webkit-scrollbar { display: none; }
  [data-strip]::after { content: ''; flex: 0 0 14px; }   /* room for the last item to sit on the page's margin too */
  [data-strip] > * { flex: 0 0 calc(100% - 30px); min-width: 0; scroll-snap-align: start; }
  [data-strip] > * > * { transition: opacity .3s; }
  [data-strip].is-live > :not(.is-on) > * { opacity: .14; }   /* the next item shows its edge; its text comes with it */
  /* each item opens on a hairline that ends in a node (the desktop rows' line to the globe) */
  [data-strip] > * { position: relative; border-top: 1px solid var(--ink); }
  [data-strip] > *::before { content: ''; position: absolute; right: -4px; top: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--node); box-shadow: 0 0 0 1px var(--ink); }
  .plate--ink [data-strip] > * { border-top-color: var(--paper); }
  .plate--ink [data-strip] > *::before { background: var(--ink); box-shadow: 0 0 0 1px var(--paper); }
  /* the pager: the items' numbers, the current one inverted (the desktop index); or short marks when they have none */
  .pager { display: flex; flex-wrap: wrap; gap: 2px; margin-top: 12px; margin-left: -10px; }
  .pager button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: var(--ink-2); }
  .pager span { padding: 0 3px; line-height: 17px; }
  .pager [aria-current="true"] span { background: var(--ink); color: var(--paper); }
  .pager--marks { gap: 0; margin-left: -6px; }
  .pager--marks button { min-width: 36px; }
  .pager--marks span { width: 24px; height: 2px; padding: 0; background: rgb(var(--ink-rgb) / .25); }
  .pager--marks [aria-current="true"] span { background: var(--ink); }
  .plate--ink .pager button { color: rgba(236, 232, 224, .78); }
  .plate--ink .pager [aria-current="true"] span { background: var(--paper); color: var(--ink); }
  .plate--ink .pager--marks span { background: rgba(236, 232, 224, .3); }
  .plate--ink .pager--marks [aria-current="true"] span { background: var(--paper); }

  /* the chip: a long page's chapter index, at the thumb (js/phone.js builds it from the page's own .toc) */
  .chip { position: fixed; z-index: 6; right: 12px; bottom: 12px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .25s; }
  .chip.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .chip.is-on.is-moving:not(.is-open) { opacity: 0; pointer-events: none; }
  .chip__btn { display: grid; place-items: center; width: 46px; height: 46px; background: var(--paper); border: 1px solid var(--ink); font-family: var(--mono); font-size: 12px; letter-spacing: .08em; color: var(--ink); }
  .chip.is-open .chip__btn { background: var(--ink); color: var(--paper); }
  .chip__list { display: grid; min-width: 250px; max-width: calc(100vw - 24px); padding: 4px 0; background: var(--paper); border: 1px solid var(--ink); }
  .chip__list[hidden] { display: none; }
  .chip__list a { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 0 16px 0 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: var(--ink-2); }
  .chip__list a b { min-width: 24px; padding: 0 3px; font-family: var(--pixel); font-weight: 800; font-size: 13px; color: var(--stone); }
  .chip__list a[aria-current] { color: var(--ink); }
  .chip__list a[aria-current] b { background: var(--ink); color: var(--paper); }
}
@media (max-width: 759px) {
  /* the comparison, one approach at a time (the home's rules, now shared: /architecture 08 uses them too) */
  .cmp thead .cmp__col { position: relative; padding: 14px 0 12px; border-top: 1px solid rgba(236, 232, 224, .3); -webkit-tap-highlight-color: transparent; transition: opacity .2s; }
  .cmp[data-sel] thead .cmp__col { cursor: pointer; }
  .cmp[data-sel] thead .cmp__col[aria-pressed="false"] { opacity: .42; }
  .cmp[data-sel] thead .cmp__col[aria-pressed="true"] { border-top: 2px solid var(--paper); padding-top: 13px; }
  .cmp[data-sel] thead .cmp__col[aria-pressed="true"] .cmp__name { color: var(--paper); }
  .cmp[data-sel="prompt"] tbody td:not([data-k="prompt"]), .cmp[data-sel="library"] tbody td:not([data-k="library"]),
  .cmp[data-sel="gateway"] tbody td:not([data-k="gateway"]), .cmp[data-sel="constle"] tbody td:not([data-k="constle"]) { display: none; }
  .cmp[data-sel] td[data-l]::before { content: none; }
  .cmp[data-sel] tbody tr { padding: 22px 0 6px; border-top: 1px solid rgba(236, 232, 224, .22); }
  .cmp[data-sel] tbody tr:first-child { margin-top: 18px; border-top-color: var(--paper); }
  .cmp[data-sel] tbody th { padding-bottom: 12px; }
  .cmp[data-sel] tbody td { padding: 0 0 18px; border-bottom: 0; font-size: 15.5px; line-height: 1.55; }
  .cmp[data-sel] .cmp__lane { height: 7px; margin-bottom: 12px; }
}