/* Scythian website (scythian.sh): one stylesheet for every page.

   LOOK     Taken from the founder's style reference (a vase-painting book cover): a saturated golden-yellow ground,
            deep aubergine ink, violet figures, huge high-contrast serif display type. Our own motifs only: the drawn
            bow, the arrow in flight, the quiver, a running border of rings and dots, and a low-contrast ring-and-dot
            field on every plate. Nothing is traced from the reference.
   MARK     A side-on recurve bow: vertical string, the bow in --logo-bow, a horizontal arrow in --logo-arrow pointing
            right. Two masters on the 256 artboard: the full one (fletched arrow, round tips) at 20 px and up, and a
            16 px master (straight flicked tips, plain arrow, pixel-fitted) for window bars, the diagram, the footer
            and the favicon. The bow and string are strokes, so they take `stroke`, not `fill`.
   THEMES   Light is Saffron (yellow ground, aubergine ink), dark is Aubergine (aubergine ground, yellow display type,
            light violet accents). Light tokens on bare :root; dark under prefers-color-scheme on
            :root:not([data-theme="light"]) and again on :root[data-theme="dark"]. js/site.js sets data-theme for this
            page view only. Style by token, never by theme: no [data-theme] selectors outside the theme blocks.
   TOKENS   Same names as duit.sh (--bg --surface --line --text --muted --link --accent --on-accent --focus --win
            --chrome --wline --wtext --wmuted --bubble --ok --warn --bad --shadow --head-bg), plus:
            --display (h1 and section heads), --kicker (letterspaced caps), --figure / --figure-line (the motifs: the
            figure's colour and the fine lines drawn in it, which are the ground showing through, as on a vase),
            --plate / --plate-dot (the patterned slab every product window sits on; --plate-dot is kept faint enough
            that on-plate text clears 4.5:1 even over a ring or dot), --data (the one highlighted
            series), --track (bar tracks), --neutral (other series), --logo-bow / --logo-arrow (the mark only).
   RULES    --accent fills pills only. Status colours (--ok --warn --bad) live inside windows only: on the yellow
            ground they fall under 4.5:1. Colour is always paired with a glyph (.g: ✓ ~ ! –) or a word.
            Every window of made-up data carries the "Example" tag. Contrast for each pair is in README.md.
   TYPE     Instrument Serif (display, section heads, card titles, big figures, kicker caps) and Instrument Sans
            (body and UI), both self-hosted under the SIL Open Font License. Code uses the system mono. */

/* ---------- Fonts ---------- */
@font-face {
  font-family: "Instrument Sans";
  src: url("../fonts/instrument-sans.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: block; /* the hero is set in it: no fallback flash */
}
@font-face {
  font-family: "Instrument Serif";
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
}

/* ---------- Themes ---------- */
:root {
  --sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", system-ui, sans-serif;
  --serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --code: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --head-h: 60px;
  --gutter: clamp(16px, 4vw, 40px);
  --wrap: 1200px;
  --sec-pad: clamp(64px, 8vw, 120px);
  --r-card: 20px; --r-panel: 14px; --r-win: 12px;

  /* Saffron (light) */
  --bg: #f5be2e; --surface: #edb224; --line: #d09e30; --line-strong: #5b3e99;
  --text: #2a0b3a; --muted: #553256; --display: #2a0b3a; --kicker: #4a2c86;
  --accent: #5b3e99; --on-accent: #fff7e3; --accent-hover: #4a2c86;
  --link: #4a2c86; --focus: #2a0b3a; --mark: #e3d6f7;
  --figure: #5b3e99; --figure-line: #f5be2e;
  --plate: #5b3e99; --plate-dot: rgba(245, 190, 46, .28); --on-plate: #fff7e3; --plate-ink: #2a0b3a;
  --win: #fff9ea; --chrome: #fbf0d4; --wline: #ecddb8; --wtext: #2a0b3a; --wmuted: #66506b; --bubble: #f1e9fb;
  --data: #5b3e99; --track: #f2e7cb; --neutral: #8c7b66;
  --ok: #2e6b2e; --warn: #9a4a0a; --bad: #a3271b;
  --code-text: #2a0b3a; --tok-kw: #5b3e99; --tok-str: #8a4b0c; --tok-com: #66506b;
  --logo-bow: #2a0b3a; --logo-arrow: #5b3e99;
  --shadow: 0 1px 2px rgba(42, 11, 58, .14), 0 26px 50px -22px rgba(42, 11, 58, .55);
  --head-bg: rgba(245, 190, 46, .9);
  --w-head: 500;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Aubergine (dark) */
    --bg: #2c0f3c; --surface: #351846; --line: #4a2b5c; --line-strong: #8f73d8;
    --text: #f6ebd5; --muted: #cdbbd6; --display: #f5be2e; --kicker: #c4b0f5;
    --accent: #bba5f3; --on-accent: #2a0b3a; --accent-hover: #d0c0f8;
    --link: #c4b0f5; --focus: #f5be2e; --mark: #5b3e99;
    --figure: #8f73d8; --figure-line: #2c0f3c;
    --plate: #4e3285; --plate-dot: rgba(198, 178, 250, .26); --on-plate: #f6ebd5; --plate-ink: #2a0b3a;
    --win: #3a1c4c; --chrome: #422457; --wline: #57376d; --wtext: #f6ebd5; --wmuted: #cdbbd6; --bubble: #4a2a63;
    --data: #c6b2fa; --track: #4d2e62; --neutral: #9c86ae;
    --ok: #8fd18f; --warn: #f2a86e; --bad: #ff9a8a;
    --code-text: #f6ebd5; --tok-kw: #c6b2fa; --tok-str: #f5c76a; --tok-com: #cdbbd6;
    --logo-bow: #f5be2e; --logo-arrow: #bba5f3;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 26px 50px -22px rgba(0, 0, 0, .7);
    --head-bg: rgba(44, 15, 60, .9);
    --w-head: 460;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #2c0f3c; --surface: #351846; --line: #4a2b5c; --line-strong: #8f73d8;
  --text: #f6ebd5; --muted: #cdbbd6; --display: #f5be2e; --kicker: #c4b0f5;
  --accent: #bba5f3; --on-accent: #2a0b3a; --accent-hover: #d0c0f8;
  --link: #c4b0f5; --focus: #f5be2e; --mark: #5b3e99;
  --figure: #8f73d8; --figure-line: #2c0f3c;
  --plate: #4e3285; --plate-dot: rgba(198, 178, 250, .26); --on-plate: #f6ebd5; --plate-ink: #2a0b3a;
  --win: #3a1c4c; --chrome: #422457; --wline: #57376d; --wtext: #f6ebd5; --wmuted: #cdbbd6; --bubble: #4a2a63;
  --data: #c6b2fa; --track: #4d2e62; --neutral: #9c86ae;
  --ok: #8fd18f; --warn: #f2a86e; --bad: #ff9a8a;
  --code-text: #f6ebd5; --tok-kw: #c6b2fa; --tok-str: #f5c76a; --tok-com: #cdbbd6;
  --logo-bow: #f5be2e; --logo-arrow: #bba5f3;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 26px 50px -22px rgba(0, 0, 0, .7);
  --head-bg: rgba(44, 15, 60, .9);
  --w-head: 460;
  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--bg); scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--bg); color: var(--text);
  font-family: var(--sans); font-size: 16px; font-weight: 400; line-height: 1.55;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, p, figure, blockquote, dl, dd, pre { margin: 0; }
:where(ul[class], ol[class], nav ul, .win ul, .win ol) { list-style: none; margin: 0; padding: 0; }
img, svg { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
button { font: inherit; color: inherit; cursor: pointer; }
b, strong { font-weight: 500; }
a { color: inherit; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: .22em; }
[hidden] { display: none !important; }
::selection { background: var(--mark); color: var(--text); }
main:focus { outline: none; }
code { font-family: var(--code); font-size: .9em; }

/* ---------- Type ---------- */
h1, h2, h3, h4 { font-weight: var(--w-head); text-wrap: balance; }
p { text-wrap: pretty; }
.serif { font-family: var(--serif); font-weight: 400; }
.muted { color: var(--muted); }
.link, :where(.prose, .sec-head, .foot-legal, .lede, .note-line) a:not([class]) {
  color: var(--link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .22em;
}
.link:hover { text-decoration-thickness: 2px; }
/* letterspaced serif caps: kicker lines and bylines */
.kicker {
  font-family: var(--serif); font-size: 17px; font-weight: 400; line-height: 1.3;
  letter-spacing: .14em; text-transform: uppercase; color: var(--kicker);
}
.lede { max-width: 40ch; font-size: clamp(18px, .5vw + 15px, 21px); line-height: 1.45; color: var(--text); }

/* the display: huge serif caps, each line fitted to the full width (--w is the line's width in em, measured) */
.display {
  container-type: inline-size; margin: 0;
  font-family: var(--serif); font-weight: 400; color: var(--display);
  text-transform: uppercase; line-height: .8; letter-spacing: -.01em;
}
.display .ln { display: block; white-space: nowrap; font-size: 9vw; font-size: calc(100cqi / var(--w, 8)); }
.display .ln + .ln { margin-top: .02em; }
/* a line that keeps another line's size and ends in the arrow */
.display .ln-fly { display: flex; flex-wrap: wrap; align-items: center; gap: .04em .1em; }
/* the home hero: two lines from 700px ("Know how the work" / "is going" and the arrow), three on phones. --w values
   are each line's measured width in em (Instrument Serif caps, -0.01em tracking), rounded up a hair. */
.hero .display { --w: 8.03; }
@media (max-width: 699px) {
  .hero .display { --w: 4.06; }
  .hero .ln-a > span { display: block; }
  .hero .ln-a > .ln-2 { margin-top: .02em; font-size: 1.078em; } /* 4.08 / 3.785: "the work" fills its own line */
}

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--wrap) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: calc(var(--sec-pad) / 2); }
/* a section head: the kicker across the top, the serif sentence left, its muted follow-on right (stacked < 900px) */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 14px clamp(24px, 4vw, 64px); align-items: end;
  margin-bottom: clamp(28px, 3.6vw, 48px);
}
.sec-head > .kicker { grid-column: 1 / -1; }
.sec-head h2 {
  font-family: var(--serif); font-weight: 400; color: var(--display);
  font-size: clamp(40px, 3.6vw + 22px, 76px); line-height: .95; letter-spacing: -.012em;
}
.sec-head > p { max-width: 42ch; padding-bottom: .35em; font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.45; color: var(--muted); }
.sec-head .kicker { margin-bottom: -2px; }
/* the right-hand column when it holds a line and a status chip */
.sec-aside { display: grid; gap: 12px; justify-items: start; padding-bottom: .35em; }
.sec-aside > p { max-width: 42ch; font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.45; color: var(--muted); }
/* a stacked head: the sentence, then its line underneath (used to break up the run of two-column heads) */
.sec-head.is-stack { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sec-head.is-stack > p { max-width: 52ch; padding-bottom: 0; }
@media (max-width: 899px) { .sec-head { grid-template-columns: minmax(0, 1fr); } .sec-head > p, .sec-aside { padding-bottom: 0; } }
[id] { scroll-margin-top: calc(var(--head-h) + 16px); }

/* ---------- Running border: rings and dots between two rules (pattern #p-band in each page's defs) ---------- */
.band { display: block; width: 100%; height: 18px; }
.band rect { fill: url(#p-band); }
.pat-f { fill: var(--figure); }
.pat-s { fill: none; stroke: var(--figure); }
.pat-l { fill: var(--figure-line); }
.pat-ls { fill: none; stroke: var(--figure-line); }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ---------- Buttons ---------- */
.btn-primary, .btn-ghost {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 22px; border: 1.5px solid transparent; border-radius: 999px;
  font-family: var(--sans); font-size: 16px; font-weight: 500; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, transform .1s;
}
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-ghost { border-color: var(--text); background: transparent; color: var(--text); }
.btn-ghost:hover { background: var(--text); color: var(--bg); }
.btn-primary:active, .btn-ghost:active { transform: translateY(1px); }
.btn-sm { min-height: 36px; padding: 0 16px; font-size: 14px; }
.btn-sm::after { content: ""; position: absolute; inset: -5px -1px; }
.pills { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.btn-primary svg, .btn-ghost svg { width: 18px; height: 18px; }

/* status chips: what is built, what is planned. Text colour, a glyph and a word; never colour alone. */
.status {
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px 2px 8px;
  border: 1px solid currentColor; border-radius: 999px;
  font-family: var(--sans); font-size: 13px; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--text); white-space: nowrap;
}
.status::before { font-size: 12px; line-height: 1; }
.status.is-built::before { content: "\2713"; content: "\2713" / ""; }
.status.is-planned::before { content: "~"; content: "~" / ""; }
.status.is-designed::before { content: "\2013"; content: "\2013" / ""; }

/* status glyphs inside windows */
.g { display: inline-block; flex: none; width: 1.1ch; font-style: normal; font-weight: 600; line-height: 1; text-align: center; }
.g-ok { color: var(--ok); }
.g-wait { color: var(--warn); }
.g-bad { color: var(--bad); }
.g-skip { color: var(--wmuted); }

/* ---------- Accessibility ---------- */
.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; border: 0; }
.skip {
  position: absolute; top: 8px; left: 16px; z-index: 100; transform: translateY(-160%);
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px;
  background: var(--accent); color: var(--on-accent); font-size: 15px; font-weight: 500; text-decoration: none;
}
.skip:focus { transform: none; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn-primary:focus-visible, .btn-ghost:focus-visible, .skip:focus-visible, .theme-btn:focus-visible { outline-offset: 3px; }

/* ---------- Header ---------- */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--head-bg); box-shadow: 0 1px 0 var(--line);
  -webkit-backdrop-filter: saturate(1.1) blur(12px); backdrop-filter: saturate(1.1) blur(12px);
}
.head-row { display: grid; grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr); align-items: center; column-gap: 24px; height: var(--head-h); }
.brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--display); text-decoration: none; justify-self: start; }
.brand .mark { width: 26px; height: 26px; }
.brand-word { font-family: var(--serif); font-size: 28px; line-height: 1; letter-spacing: -.005em; padding-top: 2px; }
.mark .bow, .mark .str { fill: none; stroke: var(--logo-bow); }
.mark .arr { fill: var(--logo-arrow); }
@media (forced-colors: active) { .mark .bow, .mark .str { stroke: CanvasText; } .mark .arr { fill: CanvasText; } }
.nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); }
.nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--text); text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .4em; text-decoration-thickness: 1.5px; }
.head-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; justify-self: end; }
.theme-btn {
  position: relative; display: inline-grid; place-items: center; flex: none; width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--text);
}
.theme-btn::after { content: ""; position: absolute; inset: -5px; border-radius: 999px; }
@media (hover: hover) { .theme-btn:hover { border-color: var(--text); } }
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .ti-moon, .theme-btn[aria-checked="true"] .ti-sun { display: none; }
.theme-btn[aria-checked="true"] .ti-moon { display: block; }
.menu { display: none; }
.menu > summary {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-width: 36px; min-height: 36px; padding: 0 14px 0 12px;
  border: 1px solid var(--text); border-radius: 999px; background: transparent;
  list-style: none; cursor: pointer; user-select: none; -webkit-user-select: none;
  font-size: 14px; font-weight: 500; line-height: 1;
}
.menu > summary::-webkit-details-marker { display: none; }
.menu > summary::after { content: ""; position: absolute; inset: -5px -1px; }
.menu[open] > summary { background: var(--text); color: var(--bg); }
.menu > summary svg { width: 14px; height: 14px; }
.menu .mi-close, .menu[open] .mi-open { display: none; }
.menu[open] .mi-close { display: block; }
.menu-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100svh - var(--head-h)); overflow-y: auto; overscroll-behavior: contain;
  padding: 4px var(--gutter) 12px; background: var(--bg);
  box-shadow: 0 1px 0 var(--line), 0 18px 30px -20px rgba(0, 0, 0, .35);
}
.menu-panel a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px;
  border-bottom: 1px solid var(--line); font-size: 17px; color: var(--text); text-decoration: none;
}
.menu-panel li:last-child a { border-bottom: 0; }
.menu-panel a[aria-current="page"] { text-decoration: underline; text-underline-offset: .3em; }
.menu-panel a::after { content: "\2192"; content: "\2192" / ""; color: var(--muted); font-size: 14px; }
@media (max-width: 899px) {
  .head-row { display: flex; gap: 8px; }
  .head-row > .brand { margin-right: auto; }
  .nav { display: none; }
  .menu { display: block; }
}
@media (max-width: 419px) {
  .menu > summary { width: 36px; padding: 0; }
  .menu > summary::after { inset: -5px; }
  .menu-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .head-cta { padding: 0 12px; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(20px, 3vw, 40px) 0; }
.hero-top {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 24px;
  padding-bottom: 12px; margin-bottom: clamp(18px, 2.6vw, 34px); border-bottom: 1.5px solid var(--display);
}
.hero-top .kicker:last-child { color: var(--muted); }
.hero-foot {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 48px; align-items: end;
  margin-top: clamp(22px, 3vw, 40px);
}
.hero-foot .lede { max-width: 44ch; }
.hero-act { display: grid; gap: 14px; justify-items: start; }
.note-line { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.45; color: var(--muted); }
.note-line svg { width: 16px; height: 16px; margin-top: 2px; color: var(--figure); }
.hero .band { margin-top: clamp(20px, 2.4vw, 30px); }
.hero-plate { margin-top: clamp(28px, 4vw, 48px); }
@media (max-width: 799px) {
  .hero-foot { grid-template-columns: minmax(0, 1fr); }
}

/* the arrow in flight: tail and head are fixed drawings, the shaft stretches between them */
.fly { flex: 1 1 0; min-width: 2.4em; display: flex; align-items: center; height: .3em; margin-top: -.05em; }
.fly svg { height: 100%; width: auto; }
.fly-tail { aspect-ratio: 150 / 48; }
.fly-head { aspect-ratio: 110 / 48; margin-left: -1px; }
.fly-shaft {
  flex: 1; height: 15%; min-width: .2em; margin-left: -1px;
  background-color: var(--figure);
  background-image: radial-gradient(circle, var(--figure-line) 0 .013em, transparent .018em);
  background-size: .14em 100%; background-repeat: repeat-x; background-position: center;
}
.fig { fill: var(--figure); }
.fig-s { fill: none; stroke: var(--figure); }
.fig-l { fill: var(--figure-line); }
.fig-ls { fill: none; stroke: var(--figure-line); }

/* ---------- Plate: the patterned slab product windows sit on ----------
   A faint field of rings and dots in a staggered grid, from the running border's vocabulary (as on a vase limb).
   overflow: hidden keeps each window's shadow on the plate instead of smearing onto the ground below it. */
.plate, .cta-band {
  background-color: var(--plate);
  background-image:
    radial-gradient(circle, transparent 0 3.4px, var(--plate-dot) 3.7px 5px, transparent 5.3px),
    radial-gradient(circle, var(--plate-dot) 0 1.6px, transparent 2.1px);
  background-size: 26px 26px, 26px 26px;
  background-position: 0 0, 13px 13px;
}
.plate {
  position: relative; isolation: isolate; overflow: hidden; border-radius: var(--r-panel);
  padding: clamp(14px, 3.6vw, 52px);
}
.plate > .win + .win { margin-top: 18px; }
@media (max-width: 599.98px) {
  .plate.is-bleed { margin-inline: calc(-1 * var(--gutter)); border-radius: 0; padding: 18px 12px; }
}

/* ---------- Windows: product-grade previews (sizes in em from one knob, --ui) ---------- */
.win {
  --ui: 14px;
  min-width: 0; font-size: var(--ui); line-height: 1.45; text-align: left;
  background: var(--win); color: var(--wtext);
  border: 1px solid var(--wline); border-radius: var(--r-win); box-shadow: var(--shadow); overflow: hidden;
}
@media (max-width: 599.98px) { .win { --ui: 13.5px; } }
.win-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 2.75em; padding: .4em .5em .4em .95em; background: var(--chrome); border-bottom: 1px solid var(--wline);
}
.win-title { display: flex; align-items: center; gap: .55em; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win-title .mark { width: 1.2em; height: 1.2em; }
.win-title .crumb { color: var(--wmuted); font-weight: 400; overflow: hidden; text-overflow: ellipsis; }
.tag {
  flex: none; display: inline-flex; align-items: center; min-height: 24px; padding: 0 9px;
  border: 1px solid var(--data); border-radius: 999px;
  font-size: 12px; font-weight: 500; line-height: 1; color: var(--data); white-space: nowrap;
}
@media (max-width: 479px) { .tag-more { display: none; } }
.win-body { padding: 1.15em 1.25em 1.3em; }
.ui-h { font-size: 1.07em; font-weight: 500; line-height: 1.3; }
.ui-sub { margin-top: .2em; font-size: max(12px, .86em); color: var(--wmuted); }
.ui-k { font-size: max(12px, .86em); color: var(--wmuted); }
.ui-big { font-family: var(--serif); font-size: 2.35em; line-height: 1; letter-spacing: -.01em; }
.ui-btn {
  display: inline-flex; align-items: center; gap: .4em; min-height: 2.3em; padding: 0 .95em;
  border: 1px solid var(--wline); border-radius: 999px; font-size: .93em; font-weight: 500; color: var(--wtext); background: var(--win);
}
.ui-btn.is-primary { background: var(--data); border-color: var(--data); color: var(--win); }
.ui-pill {
  display: inline-flex; align-items: center; gap: .35em; padding: .2em .65em; border-radius: 999px;
  background: var(--bubble); font-size: max(12px, .86em); font-weight: 500; white-space: nowrap;
}
.ui-code { font-family: var(--code); font-size: .9em; }
.ui-banner {
  display: flex; gap: .7em; align-items: flex-start; padding: .75em .9em; border-radius: 10px;
  background: var(--bubble); border-left: 3px solid var(--data);
}
.ui-banner svg { width: 1.15em; height: 1.15em; margin-top: .12em; color: var(--data); }
.ui-banner b { display: block; }
.ui-banner span { display: block; font-size: max(12px, .86em); color: var(--wmuted); }

/* bars */
.bar { display: flex; align-items: center; gap: .6em; min-width: 0; }
.bar-track { flex: 1; min-width: 2.5em; height: .55em; border-radius: 99px; background: var(--track); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 99px; background: var(--data); }
.bar-v { flex: none; min-width: 2.6em; text-align: right; font-variant-numeric: tabular-nums; }

/* sparkline and charts: lines stay 1.5-2px at any size */
.spark { display: block; width: 4.6em; height: 1.5em; overflow: visible; }
.spark polyline, .chart .ln-data { fill: none; stroke: var(--data); stroke-width: 1.75; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.chart { display: block; width: 100%; height: 8.5em; overflow: visible; }
.chart .ln-other { fill: none; stroke: var(--neutral); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.chart .ln-base { fill: none; stroke: var(--wmuted); stroke-width: 1.25; stroke-dasharray: 5 4; vector-effect: non-scaling-stroke; }
.chart .grid { fill: none; stroke: var(--wline); stroke-width: 1; vector-effect: non-scaling-stroke; }
.chart .col { fill: var(--data); }
.key { display: flex; flex-wrap: wrap; gap: .3em 1.1em; margin: .55em 0 .4em; font-size: max(12px, .86em); color: var(--wmuted); }
.key span { display: inline-flex; align-items: center; gap: .45em; }
.key i { display: inline-block; width: 1.4em; height: 0; border-top: 2px solid var(--data); }
.key i.k-base { border-top: 1.5px dashed var(--wmuted); }
.key i.k-other { border-top-color: var(--neutral); }
.key b { color: var(--wtext); }

/* tables inside windows */
.dt { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.dt caption { text-align: left; }
.dt th { padding: .45em .55em; border-bottom: 1px solid var(--wline); text-align: left; font-size: max(12px, .86em); font-weight: 500; color: var(--wmuted); white-space: nowrap; }
.dt td { padding: .6em .55em; border-bottom: 1px solid var(--wline); vertical-align: middle; }
.dt tr:last-child td { border-bottom: 0; }
.dt th:first-child, .dt td:first-child { padding-left: 0; }
.dt th:last-child, .dt td:last-child { padding-right: 0; }
.dt .num { text-align: right; }
.dt .stc { white-space: nowrap; }
.dt .wait { font-size: max(12px, .86em); color: var(--wmuted); }
.dt .wh { color: var(--wmuted); font-size: .93em; }
.dt .wh b { color: var(--wtext); }
.dt .dept { font-weight: 500; white-space: nowrap; }

/* the home hero's dashboard */
.dash-body { display: grid; grid-template-columns: 10.5em minmax(0, 1fr) 15.5em; }
.dash-rail { padding: 1em .6em; border-right: 1px solid var(--wline); }
.dash-rail p { padding: 0 .7em .5em; font-size: max(12px, .86em); color: var(--wmuted); }
.dash-rail li { display: flex; align-items: center; gap: .55em; padding: .5em .7em; border-radius: 8px; color: var(--wmuted); }
.dash-rail li.is-on { background: var(--bubble); color: var(--wtext); font-weight: 500; }
.dash-rail li svg { width: 1.05em; height: 1.05em; }
.dash-main { min-width: 0; padding: 1.15em 1.35em 1.25em; }
.dash-headrow { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .6em 1em; }
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75em; margin: 1.05em 0 1.1em; }
.tile { min-width: 0; padding: .8em .9em .85em; border: 1px solid var(--wline); border-radius: 10px; }
.tile .ui-big { margin: .18em 0 .1em; }
.tile .ui-k + .ui-k { margin-top: 0; }
.basis { padding: 1.15em 1.2em 1.25em; border-left: 1px solid var(--wline); background: var(--chrome); }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .55em .9em; margin-top: .8em; font-size: .93em; }
.kv dt { color: var(--wmuted); }
.kv dd { margin: 0; }
.basis .ui-banner { margin-top: 1.1em; }
@media (max-width: 1099px) { .dash-body { grid-template-columns: minmax(0, 1fr) 14em; } .dash-rail { display: none; } }
@media (max-width: 759px) {
  .dash-body { grid-template-columns: minmax(0, 1fr); }
  .basis { border-left: 0; border-top: 1px solid var(--wline); }
}
@media (max-width: 559px) {
  .col-trend { display: none; }
  .tiles { gap: .5em; }
  .tile { padding: .65em .7em; }
  .tile .ui-big { font-size: 1.9em; }
  .dash-main { padding: 1em .95em 1.1em; }
}

/* ---------- Features: text beside a plate ---------- */
.feature { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.feature.is-flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.feature.is-flip > .feature-text { order: 2; }
.feature-text { display: grid; gap: 14px; align-content: center; }
.feature-text h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 3.4vw + 22px, 72px); line-height: .95; letter-spacing: -.012em; color: var(--display); }
.feature-text > p { max-width: 40ch; font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.45; color: var(--muted); }
.feature-text .points { display: grid; gap: 10px; margin-top: 6px; }
.points li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; font-size: 16px; line-height: 1.45; }
.points li::before { content: ""; width: 9px; height: 9px; margin: 7px 0 0 4px; border: 1.5px solid var(--figure); border-radius: 50%; }
.feature-text .status { justify-self: start; }
@media (max-width: 899px) {
  .feature, .feature.is-flip { grid-template-columns: minmax(0, 1fr); }
  .feature.is-flip > .feature-text { order: 0; }
}

/* "my AI use" and the other small windows */
.profile { display: grid; gap: .65em; margin-top: .9em; }
.profile li { display: grid; grid-template-columns: minmax(0, 10em) minmax(0, 1fr); gap: .4em 1em; align-items: center; }
.row-btns { display: flex; flex-wrap: wrap; gap: .5em; margin-top: 1.05em; }
.receipts { margin-top: 1.15em; padding-top: 1em; border-top: 1px solid var(--wline); }
.receipt { display: flex; align-items: flex-start; gap: .6em; margin-top: .6em; font-size: .93em; }
.receipt svg { width: 1.1em; height: 1.1em; margin-top: .15em; color: var(--data); }
.receipt time { font-variant-numeric: tabular-nums; white-space: nowrap; }
.cansee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1em 1.4em; margin-top: .9em; }
.cansee ul { display: grid; gap: .5em; margin-top: .5em; }
.cansee li { display: flex; gap: .55em; align-items: baseline; font-size: .93em; }
.cansee .ui-k { font-weight: 500; color: var(--wtext); font-size: .93em; }
@media (max-width: 479px) { .cansee { grid-template-columns: minmax(0, 1fr); } .profile li { grid-template-columns: minmax(0, 1fr); gap: .25em; } }
.figrow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6em; margin-top: .9em; }
.figrow > div { padding: .65em .8em; border: 1px solid var(--wline); border-radius: 10px; min-width: 0; }
.figrow .ui-big { font-size: 1.9em; margin-top: .12em; }
.split { margin-top: 1.1em; padding-top: 1em; border-top: 1px solid var(--wline); }
.split > .ui-k + .ui-note { margin-top: .45em; }

/* progress diagnostics window */
.charts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4em 2em; margin-top: 1em; }
.chart-box { min-width: 0; }
.chart-axis { display: flex; justify-content: space-between; margin-top: .35em; font-size: max(12px, .8em); color: var(--wmuted); }
.caveat { display: flex; gap: .6em; align-items: flex-start; margin-top: 1.2em; padding: .7em .9em; border-radius: 10px; background: var(--bubble); font-size: .93em; }
.caveat b { white-space: nowrap; }
@media (max-width: 699px) { .charts { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Requirement: Omphalos or Duit, then Scythian ---------- */
.req { display: grid; justify-items: center; }
.req-in { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); align-items: stretch; gap: 0 18px; width: 100%; }
.node {
  position: relative; display: grid; align-content: start; gap: 6px; min-width: 0;
  padding: 22px 24px 20px; border: 1.5px solid var(--display); border-radius: var(--r-card);
  background: var(--bg); color: var(--text); text-decoration: none;
}
a.node:hover { background: var(--surface); }
.node-h { display: flex; align-items: center; gap: 10px; font-family: var(--serif); font-size: clamp(26px, 1.4vw + 18px, 36px); line-height: 1.05; color: var(--display); }
.node-h svg { width: 22px; height: 22px; color: var(--display); }
.node-h svg .bow, .node-h svg .str { fill: none; stroke: currentColor; }
.node p { color: var(--muted); max-width: 36ch; }
.node .go { margin-top: 6px; color: var(--link); font-weight: 500; text-decoration: underline; text-underline-offset: .22em; }
/* ports: a ring on the box edge where a wire meets it */
.port { position: absolute; left: 50%; width: 11px; height: 11px; margin-left: -5.5px; border: 1.5px solid var(--display); border-radius: 50%; background: var(--bg); }
.port.is-b { bottom: -6.5px; }
.port.is-t { top: -6.5px; }
.req-or { align-self: center; justify-self: center; font-family: var(--serif); font-style: italic; font-size: 30px; color: var(--muted); }
/* the wire: a bracket from the two boxes' centres (columns 1fr 48px 1fr, gaps 18px: 84px fixed), then the lit stem */
.req-wire { position: relative; width: 100%; height: 72px; }
.req-wire::before { content: ""; position: absolute; top: 0; height: 36px; left: calc((100% - 84px) / 4); right: calc((100% - 84px) / 4); border: 1.5px solid var(--display); border-top: 0; }
.req-wire::after { content: ""; position: absolute; top: 34.5px; bottom: 0; left: 50%; margin-left: -1.5px; border-left: 3px solid var(--figure); }
.req-wire-m { display: none; }
.node-out { width: min(100%, 560px); background: var(--plate); border-color: var(--plate); color: var(--on-plate); }
.node-out .node-h, .node-out .node-h svg, .node-out p { color: var(--on-plate); }
.node-out .port { border-color: var(--figure); }
.req-note { margin-top: clamp(28px, 3.6vw, 40px); padding-top: 18px; border-top: 1.5px solid var(--display); font-size: 16px; color: var(--muted); }
.req-note b { font-weight: 500; color: var(--text); }
@media (max-width: 759px) {
  .req-in { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .req-or { justify-self: center; font-size: 26px; }
  .req-wire { display: none; }
  .req-wire-m { display: block; width: 2px; height: 48px; margin: 0 auto; background: var(--figure); }
  .req-in .port { display: none; }
}

/* ---------- The rules strip (home) and rule cards ---------- */
.fair { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1.5px solid var(--display); }
.fair li { display: grid; align-content: start; gap: 6px; padding: 22px 24px 26px 0; border-bottom: 1px solid var(--line-strong); }
.fair li:nth-child(3n+2), .fair li:nth-child(3n) { padding-left: 24px; border-left: 1px solid var(--line-strong); }
.numeral { font-family: var(--serif); font-size: 30px; line-height: 1; letter-spacing: .08em; color: var(--kicker); }
.fair h3, .rule h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 1vw + 20px, 32px); line-height: 1.05; letter-spacing: -.005em; color: var(--display); }
.fair p { max-width: 34ch; color: var(--muted); }
.fair-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-top: 28px; }
@media (max-width: 899px) {
  .fair { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fair li:nth-child(3n+2), .fair li:nth-child(3n) { padding-left: 0; border-left: 0; }
  .fair li:nth-child(2n) { padding-left: 20px; border-left: 1px solid var(--line-strong); }
}
@media (max-width: 559px) {
  .fair { grid-template-columns: minmax(0, 1fr); }
  .fair li:nth-child(2n) { padding-left: 0; border-left: 0; }
  .fair li { padding: 18px 0 20px; }
}

/* ---------- Closing call: the drawn bow and "Talk to us" ---------- */
.talk { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); align-items: center; }
.talk-fig { width: 100%; max-width: 440px; justify-self: center; }
.talk-fig svg { width: 100%; height: auto; }
.talk-text { display: grid; gap: 18px; justify-items: start; }
.talk-text h2 { font-family: var(--serif); font-weight: 400; text-transform: uppercase; font-size: clamp(64px, 9vw + 10px, 168px); line-height: .82; letter-spacing: -.01em; color: var(--display); }
.talk-text p { max-width: 40ch; font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.45; color: var(--muted); }
.talk-text .small { font-size: 14px; }
@media (max-width: 799px) {
  .talk { grid-template-columns: minmax(0, 1fr); }
  .talk-fig { max-width: 300px; }
}

/* ---------- How it works: the diagram (boxes on window tokens, 1.5px wires, ring ports, violet only where figures
   move, dashed for anything planned). Under 1000px the two callers sit side by side, each with its own wire down to
   the gateway; from 1000px the boxes run left to right. ---------- */
.dia-wrap { position: relative; margin: 0; padding: clamp(22px, 3vw, 40px) clamp(14px, 3vw, 36px) clamp(18px, 2.4vw, 28px); border: 1.5px dashed var(--display); border-radius: var(--r-card); }
.dia-label { position: absolute; top: -11px; left: 18px; padding: 0 10px; background: var(--bg); line-height: 20px; }
.dia { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 10px; }
.box {
  position: relative; z-index: 0; display: grid; align-content: start; gap: 6px; min-width: 0;
  padding: 16px 18px 18px; border: 1px solid var(--wline); border-radius: var(--r-win);
  background: var(--win); color: var(--wtext); box-shadow: 0 1px 2px rgba(42, 11, 58, .1);
}
.box.is-planned { border: 1.5px dashed var(--wmuted); box-shadow: none; }
.box-h { display: flex; align-items: center; gap: 8px; font-weight: 500; font-size: 16px; line-height: 1.3; }
.box-h .mark { width: 18px; height: 18px; }
.box > p:not(.box-h) { font-size: 14px; line-height: 1.45; color: var(--wmuted); }
.box .ui-code { color: var(--wtext); }
.box .tagline { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.st { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: var(--bubble); font-size: 12px; font-weight: 500; line-height: 1.3; color: var(--wtext); white-space: nowrap; }
.doors { display: grid; gap: 6px; margin-top: 6px; }
.doors li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 8px 7px 10px; border: 1px solid var(--wline); border-radius: 8px; font-size: 13.5px; }
.doors li.is-planned { border-style: dashed; border-color: var(--wmuted); }
/* a wire: a line between two boxes with a ring where it meets each box */
.wire { --bw: 1.5px; --wc: var(--display); position: relative; z-index: 1; justify-self: center; width: 0; height: 44px; margin: 8px 0; border-left: var(--bw) solid var(--wc); }
.wire.is-lit { --bw: 3px; --wc: var(--figure); }
.wire.is-planned { border-left-style: dashed; }
.wire::before, .wire::after {
  content: ""; position: absolute; left: calc(var(--bw) / -2); width: 11px; height: 11px; transform: translateX(-50%);
  border: 1.5px solid var(--wc); border-radius: 50%; background: var(--bg);
}
.wire::before { top: -14px; }
.wire::after { bottom: -14px; }
.wire-label { position: absolute; top: 50%; left: 14px; transform: translateY(-50%); font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.d-app { grid-column: 1; grid-row: 1; }
.d-w1 { grid-column: 1; grid-row: 2; }
.d-rep { grid-column: 2; grid-row: 1; }
.d-w2 { grid-column: 2; grid-row: 2; }
.d-gw { grid-column: 1 / -1; grid-row: 3; }
.d-w3 { grid-column: 1 / -1; grid-row: 4; }
.d-law { grid-column: 1 / -1; grid-row: 5; }
.d-w5 { grid-column: 1 / -1; grid-row: 6; }
.d-rec { grid-column: 1 / -1; grid-row: 7; }
@media (max-width: 599px) {
  .d-app, .d-rep { padding: 13px 12px 14px; }
  .d-app .box-h, .d-rep .box-h { font-size: 15px; }
  .d-app .st, .d-rep .st { white-space: normal; border-radius: 10px; }
}
@media (min-width: 1000px) {
  .dia { grid-template-columns: minmax(0, 1fr) 72px minmax(0, 1fr) 72px minmax(0, 1fr); grid-template-rows: auto auto; row-gap: 22px; column-gap: 0; align-items: stretch; }
  .d-app { grid-column: 1; grid-row: 1; }
  .d-rep { grid-column: 1; grid-row: 2; }
  .d-w1 { grid-column: 2; grid-row: 1; }
  .d-w2 { grid-column: 2; grid-row: 2; }
  .d-gw { grid-column: 3; grid-row: 1 / span 2; display: flex; flex-direction: column; }
  .d-gw .doors { flex: 1; display: flex; flex-direction: column; justify-content: space-between; margin-top: 12px; }
  .d-w3 { grid-column: 4; grid-row: 1; }
  .d-law { grid-column: 5; grid-row: 1; }
  .d-rec { grid-column: 5; grid-row: 2; }
  .d-w5 { display: none; }
  .d-rec::before { content: ""; position: absolute; left: 50%; top: -23px; height: 22px; margin-left: -.75px; border-left: 1.5px solid var(--display); }
  .wire { justify-self: stretch; align-self: center; width: auto; height: 0; margin: 0 8px; border-left: 0; border-top: var(--bw) solid var(--wc); }
  .wire.is-planned { border-top-style: dashed; }
  .wire::before, .wire::after { left: auto; top: calc(var(--bw) / -2); transform: translateY(-50%); }
  .wire::before { left: -14px; }
  .wire::after { bottom: auto; right: -14px; }
  .wire-label { top: auto; bottom: 8px; left: 50%; transform: translateX(-50%); }
}
.dia-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line-strong); font-size: 15px; }
.dia-foot b { font-weight: 500; }
.dia-key { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 16px; font-size: 14px; color: var(--muted); }
.dia-key span { display: inline-flex; align-items: center; gap: 8px; }
.dia-key i { display: inline-block; width: 28px; border-top: 1.5px solid var(--display); }
.dia-key i.k-fig { border-top: 3px dashed var(--figure); }
.dia-key i.k-plan { border-top-style: dashed; }

/* inner page heads: the h1 on one line from 700px, two lines on phones. --w-all, --w-1 (em widths, measured) and --k2
   (the second line's size relative to the first) are set on each h1. */
.display.is-split .ln { --w: var(--w-all); }
@media (max-width: 699px) {
  .display.is-split .ln { --w: var(--w-1); }
  .display.is-split .ln > span { display: block; }
  .display.is-split .ln-2 { margin-top: .02em; font-size: var(--k2, 1em); }
}
.page-head .band { margin-top: clamp(28px, 3.4vw, 44px); }

/* a closing call on a plate */
.cta-band {
  --figure: var(--on-plate); --figure-line: var(--plate);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 24px clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(28px, 4.4vw, 64px); border-radius: var(--r-card); color: var(--on-plate);
}
.cta-band h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(44px, 4vw + 24px, 92px); line-height: .95; letter-spacing: -.012em; color: var(--on-plate); }
.cta-text { display: grid; gap: 16px; justify-items: start; }
.cta-fig { width: clamp(150px, 17vw, 230px); }
.cta-fig.is-wide { width: clamp(180px, 24vw, 320px); } /* the arrow in flight */
.cta-fig.is-tall { width: clamp(110px, 12vw, 160px); } /* the quiver */
.cta-fig svg { width: 100%; height: auto; }
@media (max-width: 699px) { .cta-band { grid-template-columns: minmax(0, 1fr); } .cta-fig { display: none; } }
.cta-band p { max-width: 46ch; font-size: clamp(17px, .4vw + 15px, 20px); line-height: 1.45; }
.on-plate .btn-primary { background: var(--on-plate); color: var(--plate-ink); }
.on-plate .btn-primary:hover { background: #fff; }
.on-plate .btn-ghost { border-color: var(--on-plate); color: var(--on-plate); }
.on-plate .btn-ghost:hover { background: var(--on-plate); color: var(--plate-ink); }
.on-plate :focus-visible { outline-color: var(--on-plate); }
.code-note { font-size: 16px; line-height: 1.5; color: var(--on-plate); max-width: 44ch; }
.win > .code-note { padding: 0 1.25em 1.1em; font-size: 14px; color: var(--wmuted); max-width: none; }
.ui-note { padding: .55em .75em; border-radius: 8px; background: var(--bubble); font-size: .93em; }

/* two columns of plain points */
.cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px clamp(28px, 5vw, 72px); }
.cols.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.col h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 1vw + 20px, 32px); line-height: 1.05; color: var(--display); }
.col > p { margin-top: 10px; max-width: 46ch; color: var(--muted); }
.col .points { display: grid; gap: 10px; margin-top: 14px; }
.col .status { margin-top: 12px; }
@media (max-width: 899px) { .cols.is-3 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) { .cols { grid-template-columns: minmax(0, 1fr); } }

/* the families table on the page itself */
.ft { width: 100%; border-collapse: collapse; border-top: 1.5px solid var(--display); }
.ft th, .ft td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line-strong); text-align: left; vertical-align: top; }
.ft th { font-weight: 500; font-size: 14px; color: var(--muted); }
.ft td:first-child { font-family: var(--serif); font-size: 24px; line-height: 1.1; color: var(--display); white-space: nowrap; }
.ft td:last-child { padding-right: 0; }
@media (max-width: 699px) {
  .ft thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ft tr { display: grid; gap: 6px; padding: 14px 0; border-bottom: 1px solid var(--line-strong); }
  .ft td { padding: 0; border: 0; }
  .ft td:first-child { white-space: normal; }
}

/* code windows: real repo code, trimmed, never invented */
.code-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
.code-grid > .stack { display: grid; gap: 18px; min-width: 0; }
.code { margin: 0; padding: 1.1em 1.25em 1.2em; overflow-x: auto; font-family: var(--code); font-size: 13.5px; line-height: 1.6; color: var(--code-text); tab-size: 2; white-space: pre; font-variant-ligatures: none; font-feature-settings: "liga" 0, "calt" 0; }
.code .k { color: var(--tok-kw); }
.code .s { color: var(--tok-str); }
.code .c { color: var(--tok-com); }
.code:focus-visible { outline-offset: -3px; } /* drawn inside the block: .win clips anything outside it */
.path { font-family: var(--code); font-size: 12.5px; font-weight: 400; }
@media (max-width: 599.98px) { .code { font-size: 12.5px; } }

/* setup paths */
.paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.path-card { display: grid; align-content: start; gap: 12px; padding: clamp(20px, 2.4vw, 32px); border: 1.5px solid var(--display); border-radius: var(--r-card); }
.path-card h3 { font-family: var(--serif); font-weight: 400; font-size: clamp(30px, 1.6vw + 20px, 42px); line-height: 1; color: var(--display); }
.path-card > p { color: var(--muted); }
.steps { display: grid; gap: 14px; margin-top: 6px; counter-reset: step; }
.steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; counter-increment: step; }
.steps li::before {
  content: counter(step); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--figure); color: var(--bg); font-family: var(--serif); font-size: 18px; line-height: 1;
}
.steps .status { margin-top: 6px; }
.steps p { color: var(--text); }
.not-for { display: flex; gap: 12px; align-items: flex-start; margin-top: 18px; padding: 16px 18px; border: 1px dashed var(--display); border-radius: var(--r-panel); }
.not-for b { font-weight: 500; }
@media (max-width: 799px) { .paths { grid-template-columns: minmax(0, 1fr); } }

/* ---------- The rules page ---------- */
.purpose { padding: clamp(22px, 3vw, 36px); border-radius: var(--r-card); background: var(--plate); color: var(--on-plate); }
.purpose p.big { max-width: 30ch; font-family: var(--serif); font-size: clamp(28px, 2vw + 18px, 44px); line-height: 1.08; }
.purpose p.small { font-size: 15px; line-height: 1.5; margin-top: 10px; color: var(--on-plate); }
.notice { display: flex; gap: 14px; align-items: flex-start; margin-top: 18px; padding: 16px 0; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); }
.notice p { max-width: 80ch; }
.notice q { font-family: var(--code); font-size: .92em; quotes: "\201C" "\201D"; }
.rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); border-top: 1.5px solid var(--display); }
.rule { display: grid; align-content: start; gap: 10px; padding: 24px 0 28px; border-bottom: 1px solid var(--line-strong); }
.rule-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.rule > p { max-width: 50ch; }
.sides { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; margin-top: 6px; }
.sides div { padding-top: 10px; border-top: 1px dashed var(--line-strong); }
.sides dt { font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--kicker); }
.sides dd { margin: 4px 0 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
@media (min-width: 900px) {
  /* an odd last rule spans both columns: its text left, its two sides right, so no empty ruled cell is left over */
  .rule:last-child:nth-child(odd) { grid-column: 1 / -1; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(28px, 4vw, 56px); }
  .rule:last-child:nth-child(odd) > * { grid-column: 1; }
  .rule:last-child:nth-child(odd) > .sides { grid-column: 2; grid-row: 1 / span 3; align-self: start; margin-top: 0; }
}
@media (max-width: 899px) { .rules { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 459px) { .sides { grid-template-columns: minmax(0, 1fr); } }
.looks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: start; }
/* captions on a solid strip of the plate colour, so the texture never sits under the text */
.looks figcaption { margin-top: 12px; padding: 8px 12px; border-radius: 8px; background: var(--plate); font-size: 15px; line-height: 1.45; color: var(--on-plate); }
@media (max-width: 1099px) { .looks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .looks { grid-template-columns: minmax(0, 1fr); } }
.person-view { position: relative; }
.watermark {
  position: absolute; inset: 2.75em 0 0; display: grid; place-items: center; pointer-events: none; overflow: hidden;
  font-family: var(--serif); font-size: 1.5em; color: var(--wtext); opacity: .1; transform: rotate(-18deg); white-space: nowrap;
}
.approvers { display: grid; gap: .55em; margin-top: .9em; }
.approvers li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: .6em; align-items: center; padding: .6em .75em; border: 1px solid var(--wline); border-radius: 10px; }
.approvers .who { min-width: 0; }
.approvers .who span { display: block; font-size: max(12px, .86em); color: var(--wmuted); }
.approvers .state { font-size: max(12px, .86em); font-weight: 500; white-space: nowrap; }
.approvers svg { width: 1.2em; height: 1.2em; color: var(--data); }

/* ---------- Page heads (inner pages) ---------- */
.page-head { padding-block: clamp(20px, 3vw, 40px) 0; }
.page-head .lede { margin-top: clamp(20px, 2.6vw, 34px); max-width: 52ch; }

/* ---------- Footer ---------- */
.site-foot { margin-top: calc(var(--sec-pad) / 2); padding-block: 0 40px; background: var(--surface); font-size: 15px; }
.site-foot .band { margin-bottom: clamp(40px, 5vw, 64px); }
.foot-top { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr); gap: 32px clamp(32px, 5vw, 80px); align-items: start; }
.foot-about { max-width: 36ch; margin-top: 12px; color: var(--muted); }
.foot-founder { margin-top: 8px; color: var(--muted); }
.foot-founder a { color: var(--text); }
.foot-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.foot-h { margin-bottom: 4px; font-family: var(--sans); font-size: 12.5px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--kicker); }
.foot-col a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text); text-decoration: none; }
.foot-col a:hover, .foot-col a[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.foot-products { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; margin-top: clamp(28px, 4vw, 40px); padding-top: 20px; border-top: 1px solid var(--line); }
.foot-products .foot-h { margin: 0; }
.foot-products ul { display: flex; flex-wrap: wrap; gap: 0 28px; }
.foot-products a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--text); text-decoration: none; }
.foot-products a:hover, .foot-products a[aria-current] { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: .3em; }
.foot-products .pm { width: 16px; height: 16px; fill: currentColor; }
.foot-products .pm .str, .foot-products .pm .bow { fill: none; stroke: currentColor; }
.foot-products .pm-what { color: var(--muted); font-size: 13px; }
.foot-legal { display: grid; gap: 6px; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 13px; line-height: 1.6; color: var(--muted); }
.foot-legal > p:first-child { color: var(--text); }
@media (max-width: 899px) { .foot-top { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 559px) { .foot-col a { min-height: 44px; } }

/* ---------- Motion: only hover and press transitions; reduced motion stops them ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}