/*
 * ============================================================
 * site.css — every page of lohost.dev
 * ============================================================
 * WHY THIS EXISTS   2026-09-28. One stylesheet for the static pages, built on
 *                   subtank.dev's (0.0.6), because lohost follows the same
 *                   house rules as the app it describes: one tone per theme,
 *                   no capsules, green, amber and red for state only, mono
 *                   for digits and code, one primary button per view.
 *                   Sections open on subtank's calibrated rule with a
 *                   numbered label in the margin, and each has a form of its
 *                   own: the menu bar at real size with the popover under it,
 *                   AppKit's own renders of the item, an annotated row, a
 *                   spec sheet of who started what, the ladder of signals,
 *                   trouble with its way out, a terminal, the promise.
 * WHAT IT DOES      Declares the three typefaces from /fonts (served by this
 *                   host; OFL notice in /fonts/OFL.txt), the colour tokens
 *                   (dark first, the light set swapped in by the system), and
 *                   every component the pages and site-release.mjs's
 *                   generated blocks use. The accent is loopback cyan
 *                   (resources/brand/render.mjs says why); every text role
 *                   reaches 4.5 : 1 on --ground and --surface in both themes.
 *                   Motion is CSS only: the popover settles on load, sections
 *                   rise as they scroll in where the browser has
 *                   scroll-driven animations, and all of it stops for
 *                   prefers-reduced-motion. On a phone, once there is a
 *                   release, the Download buttons give way to a note (a Mac
 *                   app cannot be installed there), with "Download anyway"
 *                   one tap away.
 * WHAT IT CANNOT DO Load anything from another host. Every page carries a CSP
 *                   of default-src 'none' with style, font and image from
 *                   'self' only (a header from Caddy, and the same policy in
 *                   a meta tag): no script, and no inline style attribute
 *                   either. Content never waits on an animation to be seen.
 *                   The font subsets have no ⌥, ⇧ or ⌘, so the pages draw
 *                   those as inline SVG (.glyph); → comes from the system
 *                   font, which every platform has it in.
 * ============================================================
 */

/* ── typefaces (latin + latin-ext, weight axis) ─────────────── */
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Bricolage Grotesque";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(/fonts/bricolage-grotesque-latin-wght-normal.woff2) format("woff2");
  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 Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/fonts/instrument-sans-latin-wght-normal.woff2) format("woff2");
  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: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-display: swap;
  font-weight: 100 800;
  src: url(/fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2");
  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;
}

/* ── tokens: dark first, light swapped in ─────────────────────
   The neutrals are subtank's "Lamp" tones, value for value: the two apps sit
   side by side in the same menu bar. The accent is lohost's own. Site-only
   roles are marked. --faint does not reach 4.5 : 1, so it is never text. */
:root {
  --ground: #101416;
  --surface: #171c21;
  --raise: #1e252b;
  --raise-2: #283037;
  --ink: #e8ebee;
  --ink-2: #bcc4c9;
  --muted: #8a949b;
  --faint: #6a747a;
  --line: #232a30;
  --line-2: #313a41;
  --ok: #5cc49a;
  --warn: #e9ae3f;
  --crit: #f0736f;
  /* loopback cyan: 9.7 : 1 on --ground; the button carries dark ink (8.4 : 1) */
  --accent: #5cc8f0;
  --accent-fill: #5cc8f0;
  --accent-ink: #062431;
  --mark-tile: #1e252b;
  --mark-edge: rgba(255, 255, 255, 0.12);
  --shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.35);
  /* who started it: one colour per starter, on the neutral tile (.ag) */
  --a-claude: #d9825f;
  --a-codex: #9aa1ff;
  --a-cursor: #b8bdc6;
  --a-docker: #5f9bf8;
  --a-gemini: #7fa8f5;
  --a-you: #bcc4c9;
  --a-launchd: #bcc4c9;
  /* site-only: the slice of a Mac. The menu bar is the colour AppKit's
     renders of the item were captured over, so the images sit in it
     seamlessly: #24262e dark, #e8e8ed light. */
  --desk: #1a2025;
  --menubar: #24262e;
  --menubar-ink: #f2f2f5;
  --mb-press: rgba(255, 255, 255, 0.16);
  --r-tag: 4px;
  --r-control: 6px;
  --r-card: 8px;
  --r-window: 12px;
  --ff-display: "Bricolage Grotesque", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --ff-body: "Instrument Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Apple SD Gothic Neo", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --ff-mac: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "Instrument Sans", "Apple SD Gothic Neo", sans-serif;
  --max: 1180px;
  --gutter: clamp(20px, 4vw, 40px);
  --rail: 200px;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --ground: #f4f6f6;
    --surface: #ffffff;
    --raise: #ebefef;
    --raise-2: #ffffff;
    --ink: #1b2124;
    --ink-2: #3a4447;
    --muted: #5e696c;
    --faint: #7f8a8d;
    --line: #dde3e3;
    --line-2: #cdd5d6;
    --ok: #147a52;
    --warn: #935f00;
    --crit: #bd3a33;
    /* 5.2 : 1 on --ground, white on it 5.6 : 1 */
    --accent: #0a6f96;
    --accent-fill: #0a6f96;
    --accent-ink: #ffffff;
    --mark-tile: #ffffff;
    --mark-edge: rgba(16, 20, 22, 0.14);
    --shadow: 0 24px 56px -24px rgba(16, 20, 22, 0.4), 0 2px 6px rgba(16, 20, 22, 0.12);
    --a-claude: #b8532b;
    --a-codex: #4f55d8;
    --a-cursor: #4d5560;
    --a-docker: #1d63d8;
    --a-gemini: #2f62c8;
    --a-you: #3a4447;
    --a-launchd: #3a4447;
    --desk: #e2e8e8;
    --menubar: #e8e8ed;
    --menubar-ink: #1b1b1e;
    --mb-press: rgba(0, 0, 0, 0.09);
    color-scheme: light;
  }
}

/* ── base ───────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}
body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--ground);
  color: var(--ink);
  font: 400 16px / 1.6 var(--ff-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
main {
  flex: 1;
}
h1,
h2,
h3 {
  margin: 0;
  font-family: var(--ff-display);
  font-weight: 650;
  letter-spacing: -0.028em;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.5rem, 5.6vw, 4.6rem);
  line-height: 0.99;
  letter-spacing: -0.042em;
}
/* the home page's headline is a sentence, not a slogan: a size that keeps
   it to four lines beside the popover, and the buttons above the fold */
.hero h1 {
  font-size: clamp(2.4rem, 4.4vw, 3.7rem);
  line-height: 1.02;
  letter-spacing: -0.038em;
}
h2 {
  font-size: clamp(1.9rem, 3.4vw, 2.9rem);
  line-height: 1.04;
}
h3 {
  font-size: 1.14rem;
  line-height: 1.3;
  letter-spacing: -0.012em;
}
p {
  margin: 0;
}
a {
  color: var(--accent);
  text-decoration: none;
  text-underline-offset: 3px;
}
a:hover {
  text-decoration: underline;
}
code,
kbd,
pre {
  font-family: var(--ff-mono);
  font-size: 0.86em;
}
code {
  padding: 0.1em 0.35em;
  border-radius: var(--r-tag);
  background: var(--surface);
  border: 1px solid var(--line);
  /* a long path wraps rather than widening the page on a phone */
  overflow-wrap: anywhere;
}
kbd {
  display: inline-flex;
  align-items: center;
  gap: 0.15em;
  padding: 0.08em 0.4em;
  border-radius: var(--r-tag);
  border: 1px solid var(--line-2);
  border-bottom-width: 2px;
  background: var(--surface);
  line-height: 1.3;
  vertical-align: 0.05em;
}
pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  border-radius: var(--r-card);
  background: var(--surface);
  border: 1px solid var(--line);
  line-height: 1.6;
}
pre code {
  padding: 0;
  border: 0;
  background: none;
  white-space: pre;
  overflow-wrap: normal;
}
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-tag);
}
::selection {
  background: color-mix(in oklab, var(--accent) 35%, transparent);
}
img {
  max-width: 100%;
}
.num {
  font-variant-numeric: tabular-nums;
}
.lede {
  max-width: 60ch;
  font-size: 1.12rem;
  line-height: 1.6;
  color: var(--ink-2);
}
.muted {
  color: var(--muted);
}
.small {
  font-size: 0.875rem;
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 20;
  padding: 8px 14px;
  border-radius: var(--r-control);
  background: var(--accent-fill);
  color: var(--accent-ink);
}
.skip:focus {
  top: 12px;
}
.dash {
  font-family: var(--ff-mono);
  color: var(--muted);
}
/* A symbol the font subsets do not carry (⌥ ⇧ ⌘, the prompt), drawn as a
   small inline SVG in the text colour. */
.glyph {
  display: inline-block;
  width: 0.95em;
  height: 0.95em;
  vertical-align: -0.12em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.crit-t {
  color: var(--crit);
}
.warn-t {
  color: var(--warn);
}

/* The mark: the ring (lo0, the loopback) in ink, the bead in the accent.
   resources/brand/mark.svg's geometry, drawn inline wherever it appears. */
.ring {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}
.bead {
  fill: var(--accent);
}

/* ── layout ─────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.wrap.narrow {
  max-width: 900px;
}
.page {
  padding-block: 40px 120px;
}

/* ── buttons: one flat primary, no gradient, no glow ────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 0 20px;
  border-radius: var(--r-control);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink);
  font: 600 0.97rem / 1 var(--ff-body);
  white-space: nowrap;
  transition:
    background 0.15s var(--ease),
    border-color 0.15s var(--ease),
    transform 0.2s var(--ease);
}
a.btn:hover {
  text-decoration: none;
  background: var(--raise);
}
a.btn:active {
  transform: scale(0.98);
}
.btn.pri {
  border-color: transparent;
  color: var(--accent-ink);
  background: var(--accent-fill);
}
a.btn.pri:hover {
  background: color-mix(in oklab, var(--accent-fill) 88%, black);
}
.btn small {
  font: 500 0.78rem / 1 var(--ff-mono);
}
.btn.sm {
  min-height: 36px;
  padding: 0 14px;
  font-size: 0.9rem;
}
/* Before the first release: the place the Download button will be, saying
   so. Not a link, not greyed out (a faded button reads as broken). */
.btn.is-soon {
  cursor: default;
  border: 1px solid var(--line-2);
  background: transparent;
  color: var(--ink);
}
.btn.is-soon .glyph {
  color: var(--accent);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

/* ── header ─────────────────────────────────────────────────── */
.top {
  position: sticky;
  top: 0;
  z-index: 10;
  border-bottom: 1px solid transparent;
  background: var(--ground);
  transition: border-color 0.2s var(--ease);
}
@supports (animation-timeline: scroll()) {
  .top {
    animation: top-edge linear both;
    animation-timeline: scroll();
    animation-range: 0 80px;
  }
  @keyframes top-edge {
    to {
      border-bottom-color: var(--line);
    }
  }
}
.top-in {
  display: flex;
  align-items: center;
  gap: 28px;
  height: 68px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  font: 650 1.24rem / 1 var(--ff-display);
  letter-spacing: -0.03em;
}
.brand:hover {
  text-decoration: none;
}
.brand svg {
  flex: none;
  display: block;
}
.top-in > nav {
  margin-left: auto;
}
.nav {
  display: flex;
  gap: 26px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav a {
  color: var(--muted);
  font-size: 0.93rem;
  font-weight: 500;
  transition: color 0.15s var(--ease);
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}

/* ── the calibrated rule that opens a section ────────────────
   A hairline with ticks hanging from it (minor every 12 px, major every
   120 px), the label in the left margin: subtank's scale, kept. */
.sec {
  padding-block: clamp(80px, 11vw, 140px) 0;
}
.rule {
  position: relative;
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line-2);
}
.rule::before,
.doc-head::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 11px;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, var(--line-2) 0 1px, transparent 1px 120px) 0 0 / 100% 11px no-repeat,
    repeating-linear-gradient(90deg, var(--line) 0 1px, transparent 1px 12px) 0 0 / 100% 6px no-repeat;
}
.idx {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font: 600 0.84rem / 1.4 var(--ff-body);
  color: var(--muted);
}
.idx b {
  font: 600 0.8rem / 1.4 var(--ff-mono);
  color: var(--ink);
}
.rule-body {
  display: grid;
  gap: 18px;
  max-width: 820px;
}

/* ── hero ───────────────────────────────────────────────────── */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
  padding-block: clamp(48px, 7vw, 88px) 0;
}
.hero-copy {
  display: grid;
  gap: 26px;
  align-content: start;
}
.hero .ko {
  margin-top: -10px;
  font-size: 1.02rem;
  color: var(--muted);
}
.hero-cta {
  display: grid;
  gap: 16px;
  margin-top: 6px;
}
.facts-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 0.86rem;
  color: var(--muted);
}
.facts-line a,
a.ver {
  color: var(--ink-2);
}
.facts-line a:hover {
  color: var(--ink);
}

/* The terminal line: one Homebrew command, nothing to click. */
.brew {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  width: 100%;
  max-width: 520px;
  padding: 13px 16px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  background: var(--surface);
  font: 500 0.88rem / 1.2 var(--ff-mono);
  overflow-x: auto;
}
.brew .ps {
  color: var(--muted);
  user-select: none;
}
.brew code {
  white-space: nowrap;
  overflow-wrap: normal;
  padding: 0;
  border: 0;
  background: none;
  font-size: inherit;
  color: var(--ink);
}

/* On a phone, a Mac app's Download button would hand over a disk image the
   phone cannot open. On a touch screen that narrow the buttons step aside
   for a note; "Download anyway" goes to /download/#files, whose :target
   brings the buttons back. No script. (Only once there is a release: before
   it, there is no button to hide.) */
.phone-note {
  display: none;
  gap: 6px;
  max-width: 520px;
  padding: 14px 16px;
  border-radius: var(--r-card);
  border: 1px solid var(--line-2);
  background: var(--surface);
  color: var(--ink-2);
  font-size: 0.95rem;
}
.phone-note b {
  color: var(--ink);
  font-weight: 600;
}
.phone-note a {
  justify-self: start;
  font-size: 0.88rem;
}
@media (hover: none) and (pointer: coarse) and (max-width: 560px) {
  .for-mac {
    display: none !important;
  }
  .phone-note {
    display: grid;
  }
  #files:target .for-mac {
    display: inline-flex !important;
  }
  main:has(#files:target) .phone-note {
    display: none;
  }
}

/* ── the stage: a slice of a Mac, at real size ──────────────── */
.stage {
  margin: 0;
  display: grid;
  gap: 14px;
  min-width: 0;
}
.desk {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--r-window);
  overflow: hidden;
  border: 1px solid var(--line-2);
  background: var(--desk);
}
.menubar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  height: 26px;
  padding: 0 14px;
  background: var(--menubar);
  color: var(--menubar-ink);
  font: 500 13px / 1 var(--ff-mac);
}
.menubar svg,
.menubar img {
  display: block;
}
.mb-clock {
  letter-spacing: 0.01em;
  white-space: nowrap;
}
/* lohost's item: AppKit's own rendering, at a quarter of the capture's size
   (the capture is 2× of a 2× screen), pressed while the popover is open. */
.mb-item {
  position: relative;
  display: block;
  flex: none;
  height: 26px;
}
.mb-item img {
  width: 44px;
  height: 26px;
}
.mb-item::after {
  content: "";
  position: absolute;
  inset: 2px 1px;
  border-radius: 5px;
  background: var(--mb-press);
  pointer-events: none;
}

/* ── the popover: candidate A, "Projects" ────────────────────
   Trouble on top, each with its way out; then the servers grouped by the
   project they belong to, the branch first on every second line, then who
   started it. One ground, hairlines between groups, a 2 px state edge on a
   row that needs a look (never a tinted wash), the port in mono. */
.pop {
  position: relative;
  align-self: flex-end;
  width: 392px;
  max-width: calc(100% - 24px);
  margin: 8px 58px 32px 0;
  border-radius: var(--r-window);
  border: 1px solid var(--line-2);
  background: var(--ground);
  box-shadow: var(--shadow);
  color: var(--ink);
  font: 400 13px / 1.4 var(--ff-body);
  overflow: hidden;
  transform-origin: 80% 0;
}
.pop-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px 10px;
}
.pop-hd .ttl {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: none;
  font: 650 14px / 1 var(--ff-display);
  letter-spacing: -0.01em;
}
.pop-hd .sum {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  color: var(--muted);
}
.pop-hd .sum b {
  font-weight: 600;
  color: var(--crit);
}
.pop-find {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 10px 8px;
  padding: 6px 10px;
  border-radius: var(--r-control);
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--muted);
  font-size: 12.5px;
}
.pop-find .keys {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  font: 500 11px / 1 var(--ff-mono);
}
.pop-find .keys .glyph {
  width: 11px;
  height: 11px;
  stroke-width: 1.7;
}
/* Projects | Agents: a segmented control, square-cornered like every
   control here (a capsule is for switch tracks and dots only). */
.pop-seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  margin: 0 10px 6px;
  padding: 2px;
  border-radius: var(--r-control);
  background: var(--surface);
  border: 1px solid var(--line);
  font-size: 11.5px;
  text-align: center;
}
.pop-seg span {
  padding: 2px 0;
  border-radius: var(--r-tag);
  color: var(--muted);
}
.pop-seg .on {
  background: var(--raise-2);
  color: var(--ink);
  box-shadow: 0 0 0 1px var(--line-2);
}
.grp {
  padding: 4px 0 4px;
  border-top: 1px solid var(--line);
}
.gh {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 14px 3px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--muted);
}
.gh .n {
  font: 500 11px / 1.5 var(--ff-mono);
}
/* The port, what holds it and how long it has been up on the first line;
   whose it is under them, running on under the time if it needs to; the
   way out, when there is one, last. */
.srow {
  position: relative;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  grid-template-areas:
    "port what up"
    ". whose whose"
    ". acts acts";
  column-gap: 10px;
  align-items: baseline;
  padding: 5px 14px;
}
.srow .port {
  grid-area: port;
}
.srow .what {
  grid-area: what;
}
.srow .up {
  grid-area: up;
}
.srow .whose {
  grid-area: whose;
}
.srow .acts {
  grid-area: acts;
}
.srow::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  bottom: 4px;
  width: 2px;
  border-radius: 0 2px 2px 0;
}
.srow.crit::before {
  background: var(--crit);
}
.srow.warn::before {
  background: var(--warn);
}
.srow .port {
  font: 500 12.5px / 1.45 var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
}
.srow.crit .port {
  color: var(--crit);
}
.srow.warn .port {
  color: var(--warn);
}
.srow .what {
  display: block;
  font-weight: 560;
}
/* Inline flow, not flex: a flex line would trim the spaces around each
   " · " where a tile starts. */
.srow .whose {
  display: block;
  margin-top: 1px;
  font-size: 11.5px;
  color: var(--muted);
}
.srow .whose .ag {
  margin-right: 5px;
  vertical-align: -2px;
}
.srow .whose .b {
  color: var(--ink-2);
}
.srow .up {
  font: 400 11.5px / 1.45 var(--ff-mono);
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  text-align: right;
  white-space: nowrap;
}
.srow .acts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.srow .acts span {
  padding: 3px 9px;
  border-radius: var(--r-control);
  border: 1px solid var(--line-2);
  background: var(--surface);
  font-size: 11.5px;
  font-weight: 560;
  white-space: nowrap;
}
.srow .acts .go {
  border-color: transparent;
  background: var(--accent-fill);
  color: var(--accent-ink);
}
.fold {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.fold .n {
  font: 400 11.5px / 1.5 var(--ff-mono);
  color: var(--muted);
}
.pop-ft {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--ink-2);
}
.pop-ft .kc {
  display: inline-flex;
  align-items: center;
  gap: 1px;
  margin-left: 4px;
  font: 400 11px / 1 var(--ff-mono);
  color: var(--muted);
}
.pop-ft .kc .glyph {
  width: 11px;
  height: 11px;
}
.pop-ft .when {
  margin-left: auto;
  color: var(--muted);
}
.stage figcaption {
  font-size: 0.82rem;
  color: var(--muted);
  text-align: right;
}

/* Who started it: a letter or a glyph in the starter's colour on the
   neutral tile. Letters stand in for the vendors' marks, which stay in the
   app. */
.ag {
  --ac: var(--a-you);
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid var(--mark-edge);
  background: var(--mark-tile);
  color: var(--ac);
  font: 700 8px / 1 var(--ff-mono);
}
.ag .glyph {
  width: 9px;
  height: 9px;
  stroke-width: 2;
}
.ag.claude { --ac: var(--a-claude); }
.ag.codex { --ac: var(--a-codex); }
.ag.cursor { --ac: var(--a-cursor); }
.ag.docker { --ac: var(--a-docker); }
.ag.gemini { --ac: var(--a-gemini); }
.ag.launchd { --ac: var(--a-launchd); }

/* ── 01 · the item in the menu bar, as AppKit drew it ───────── */
.bar-fig {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 20px;
  margin-top: 56px;
}
.bar-fig figure {
  margin: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 8px 26px;
  padding: 22px 16px 16px;
  border-radius: var(--r-window);
  border: 1px solid var(--line-2);
}
.strip.dark {
  background: #24262e;
  color: #c9ccd3;
}
.strip.light {
  background: #e8e8ed;
  color: #4a4d55;
}
.strip span {
  display: grid;
  justify-items: center;
  gap: 8px;
  font: 500 11px / 1.3 var(--ff-body);
}
.strip img {
  display: block;
  height: 52px;
  width: auto;
}
.bar-fig figcaption {
  font-size: 0.9rem;
  color: var(--muted);
}
.bar-fig .wide {
  grid-column: 1 / -1;
}
.states {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 32px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.states li {
  display: grid;
  gap: 8px;
  align-content: start;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.states h3 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.states .dot {
  flex: none;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink);
}
.states .dot.warn {
  background: var(--warn);
}
.states .dot.crit {
  background: var(--crit);
}
.states p {
  color: var(--ink-2);
  max-width: 36ch;
}

/* ── 02 · one row, taken apart ──────────────────────────────── */
.anatomy {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
  margin-top: 56px;
}
.specimen {
  position: relative;
  padding: 56px 60px;
  border-radius: var(--r-window);
  border: 1px solid var(--line);
  background: var(--surface);
}
.specimen .srow {
  grid-template-columns: 66px minmax(0, 1fr) auto;
  gap: 14px;
  padding: 20px 20px 20px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-window);
  background: var(--ground);
  box-shadow: var(--shadow);
}
.specimen .srow .port {
  font-size: 1rem;
}
.specimen .srow .what {
  font-size: 1.08rem;
}
.specimen .srow .whose {
  margin-top: 4px;
  font-size: 0.86rem;
}
.specimen .srow .whose .ag {
  margin-right: 7px;
  vertical-align: -3px;
}
.specimen .srow .up {
  font-size: 0.9rem;
}
.specimen .ag {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  font-size: 10px;
}
/* Numbered markers, each pinned to the part it names: the left ones land
   in the gutter left of the row, the right ones in the gutter right of it. */
.specimen [data-pin] {
  position: relative;
}
.specimen [data-pin]::after {
  content: attr(data-pin);
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border-radius: 50%;
  background: var(--accent-fill);
  color: var(--accent-ink);
  font: 700 0.68rem / 22px var(--ff-mono);
  text-align: center;
}
/* The port starts at the row's padding: its pin sits 54 px left of it, in
   the gutter. The branch starts 66 + 14 px further in, so its pin reaches
   back 134 px to land under the first. The time and the second line both
   end at the row's padding on the right, so their pins share that gutter. */
.specimen .port[data-pin]::after {
  left: -54px;
}
.specimen .b[data-pin]::after {
  left: -134px;
}
.specimen .up[data-pin]::after,
.specimen .whose[data-pin]::after {
  left: auto;
  right: -54px;
}
.legend {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: pin;
}
.legend li {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr);
  gap: 12px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  counter-increment: pin;
}
.legend li:last-child {
  border-bottom: 1px solid var(--line);
}
.legend li::before {
  content: counter(pin);
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--accent);
  color: var(--accent);
  font: 700 0.68rem / 1 var(--ff-mono);
}
.legend b {
  display: block;
  font-weight: 600;
}
.legend p > span {
  display: block;
  margin-top: 2px;
  font-size: 0.93rem;
  color: var(--muted);
}

/* ── the spec sheet: who started it ────────────────────────── */
.spec {
  margin-top: 56px;
  display: grid;
  gap: 40px;
}
.spec-group {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 40px;
}
.spec-group > h3 {
  padding-top: 18px;
  font: 600 0.84rem / 1.4 var(--ff-body);
  letter-spacing: 0;
  color: var(--muted);
}
.spec-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}
.spec-rows li {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.3fr) minmax(0, 1.05fr);
  gap: 24px;
  align-items: baseline;
  padding: 18px 0;
  border-top: 1px solid var(--line);
}
.spec-rows li:last-child {
  border-bottom: 1px solid var(--line);
}
.svc {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 600;
}
.svc .ag {
  width: 22px;
  height: 22px;
  border-radius: var(--r-control);
  font-size: 0.72rem;
  transform: translateY(1px);
}
.svc .ag .glyph {
  width: 12px;
  height: 12px;
}
.reads {
  color: var(--ink-2);
}
.via {
  font-size: 0.9rem;
  color: var(--muted);
}
/* a tag: a small rectangle, 1 px line, sentence case, and rare */
.tag {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 6px;
  vertical-align: 0.12em;
  border-radius: var(--r-tag);
  border: 1px solid var(--line-2);
  font: 500 0.72rem / 1.4 var(--ff-body);
  font-style: normal;
  letter-spacing: 0;
  color: var(--muted);
}

/* ── 03 · how it knows: steps on one scale ──────────────────── */
.steps {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.steps::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 7px;
  height: 1px;
  background: var(--line-2);
}
.steps li {
  position: relative;
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 36px 28px 0 0;
}
.steps li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--ground);
  border: 2px solid var(--ink-2);
  box-shadow: 0 0 0 5px var(--ground);
}
.steps .n {
  font: 600 0.84rem / 1 var(--ff-body);
  color: var(--muted);
}
.steps p {
  color: var(--ink-2);
  max-width: 34ch;
}
.honest {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 40px;
  margin-top: 48px;
}
.honest .box {
  max-width: 70ch;
  padding: 16px 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);
  background: var(--surface);
  color: var(--ink-2);
}
.honest .big {
  font-family: var(--ff-mono);
  color: var(--ink);
}

/* ── 04 · trouble, each with its way out ────────────────────── */
.trouble {
  margin: 56px 0 0;
  padding: 0;
  list-style: none;
}
.trouble > li {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
  gap: 24px clamp(24px, 5vw, 72px);
  align-items: start;
  padding: 36px 0;
  border-top: 1px solid var(--line);
}
.trouble > li:last-child {
  border-bottom: 1px solid var(--line);
}
.trouble h3 {
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  line-height: 1.15;
  letter-spacing: -0.03em;
}
.trouble .say {
  display: grid;
  gap: 12px;
  align-content: start;
}
.trouble .say p {
  color: var(--ink-2);
}
.trouble .say .out {
  color: var(--muted);
  font-size: 0.93rem;
}
.trouble .say .out b {
  color: var(--ink);
  font-weight: 600;
}
.mini {
  padding: 8px 0;
  border-radius: var(--r-window);
  border: 1px solid var(--line-2);
  background: var(--ground);
  box-shadow: var(--shadow);
  font: 400 13px / 1.4 var(--ff-body);
}
.mini .srow {
  padding: 8px 16px;
}
.stop-rules {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  gap: 0 40px;
  margin-top: 40px;
}
.stop-rules ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 40px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.stop-rules li {
  color: var(--ink-2);
  font-size: 0.95rem;
}
.stop-rules b {
  display: block;
  color: var(--ink);
  font-weight: 600;
}

/* ── 05 · for agents: the terminal ──────────────────────────── */
.term {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: 56px;
}
.term figure {
  margin: 0;
  display: grid;
  gap: 12px;
  min-width: 0;
}
.term .wide {
  grid-column: 1 / -1;
}
.shell {
  border-radius: var(--r-window);
  border: 1px solid var(--line-2);
  background: var(--surface);
  overflow: hidden;
}
.shell-hd {
  padding: 9px 16px;
  border-bottom: 1px solid var(--line);
  font-size: 0.8rem;
  color: var(--muted);
}
.shell pre {
  border: 0;
  border-radius: 0;
  background: none;
  padding: 16px 18px 18px;
  font-size: 0.84rem;
  line-height: 1.75;
}
.shell .ps,
.shell .cm {
  color: var(--muted);
  user-select: none;
}
.shell .cm {
  user-select: text;
}
.shell .out {
  color: var(--ink);
}
.shell .dim {
  color: var(--muted);
}
.shell .cr {
  color: var(--crit);
}
.shell .wa {
  color: var(--warn);
}
.term figcaption {
  font-size: 0.93rem;
  color: var(--muted);
  max-width: 60ch;
}
.term figcaption b {
  color: var(--ink-2);
  font-weight: 600;
}

/* ── the promise ────────────────────────────────────────────── */
.promise {
  margin: 56px 0 0;
  display: grid;
  gap: 28px;
}
.promise blockquote {
  margin: 0;
}
.promise blockquote p {
  font: 600 clamp(1.8rem, 3.9vw, 3.2rem) / 1.1 var(--ff-display);
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.promise blockquote p::before {
  content: "“";
  margin-left: -0.5em;
  color: var(--muted);
}
.promise blockquote p::after {
  content: "”";
  color: var(--muted);
}
.promise .after {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: baseline;
  color: var(--muted);
  max-width: 900px;
}

/* ── get it ─────────────────────────────────────────────────── */
.get {
  margin-top: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 40px;
  align-items: end;
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--r-window);
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.get h2 {
  max-width: 16ch;
  margin-bottom: 22px;
}
.get .side {
  display: grid;
  gap: 14px;
  justify-items: start;
  min-width: 0;
}
.get .get-note {
  font-size: 0.9rem;
  color: var(--muted);
}
.reqs {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 6px 18px;
  margin: 0;
  font-size: 0.93rem;
}
.reqs dt {
  color: var(--muted);
  font-weight: 600;
  font-size: 0.86rem;
  line-height: 1.75;
}
.reqs dd {
  margin: 0;
  color: var(--ink-2);
}

/* ── document pages ─────────────────────────────────────────── */
.doc-head {
  display: grid;
  gap: 18px;
  padding: 26px 0 40px;
  border-top: 1px solid var(--line-2);
  position: relative;
}
.doc-head h1 {
  font-size: clamp(2.3rem, 5vw, 3.8rem);
}
.eyebrow {
  font: 600 0.84rem / 1.4 var(--ff-body);
  color: var(--muted);
}
.toc {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0 0 48px;
  padding: 0 0 22px;
  list-style: none;
  border-bottom: 1px solid var(--line);
  font-size: 0.92rem;
}
.toc a {
  color: var(--muted);
}
.toc a:hover {
  color: var(--ink);
}
.prose > * {
  min-width: 0;
}
.prose {
  display: grid;
  gap: 16px;
  max-width: 72ch;
  color: var(--ink-2);
}
.prose h2 {
  margin-top: 36px;
  font-size: 1.6rem;
  line-height: 1.15;
  color: var(--ink);
  scroll-margin-top: 90px;
}
.prose h2:first-child {
  margin-top: 0;
}
/* a section that follows a table, a Q&A list or a code block still opens
   with the space every other section gets */
:is(.tbl, .qa, pre) + .prose > h2:first-child {
  margin-top: 52px;
}
.prose h3 {
  margin-top: 12px;
  color: var(--ink);
}
.prose ul,
.prose ol {
  margin: 0;
  padding-left: 1.3em;
  display: grid;
  gap: 8px;
}
.prose strong {
  color: var(--ink);
}
.page > section > pre,
.prose + pre,
pre + .prose,
pre + pre {
  margin-block: 16px;
}
.page pre {
  max-width: 72ch;
}
.callout,
.note {
  padding: 14px 18px;
  border-radius: var(--r-card);
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-2);
  background: var(--surface);
}
.callout strong {
  display: block;
  margin-bottom: 4px;
}
.note {
  border-left-color: var(--warn);
}
.tbl {
  overflow-x: auto;
  margin-block: 8px;
}
.tbl table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.93rem;
}
.tbl th,
.tbl td {
  padding: 12px 14px 12px 0;
  text-align: left;
  vertical-align: top;
  border-top: 1px solid var(--line);
}
.tbl th {
  font: 600 0.82rem / 1.4 var(--ff-body);
  color: var(--muted);
  border-top-color: var(--line-2);
}
.tbl td:first-child {
  color: var(--ink);
  font-weight: 600;
  white-space: nowrap;
}
.licence {
  padding: clamp(22px, 4vw, 36px);
  border-radius: var(--r-window);
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: 20px;
}
.lic-title {
  font: 600 0.86rem / 1.4 var(--ff-body);
  color: var(--muted);
}

/* The download page: one row per chip, generated by site-release.mjs. */
.dl-ver {
  margin-bottom: 22px;
  font-size: 0.9rem;
  color: var(--muted);
}
.dl-list {
  display: grid;
  border-top: 1px solid var(--line-2);
  scroll-margin-top: 90px;
}
.dl-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr) auto;
  gap: 16px 32px;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid var(--line);
}
.dl-row h2 {
  font-size: 1.5rem;
}
.dl-row .for {
  margin-top: 4px;
  font-size: 0.92rem;
  color: var(--muted);
}
.facts {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 4px 16px;
  margin: 0;
  font-size: 0.86rem;
}
.facts dt {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.8;
  color: var(--muted);
}
.facts dd {
  margin: 0;
  color: var(--ink-2);
  min-width: 0;
}
.facts .sha {
  font: 500 0.74rem / 1.6 var(--ff-mono);
  word-break: break-all;
  color: var(--muted);
}
.dl-list + .phone-note,
.page .phone-note {
  margin-bottom: 22px;
}
/* Before the first release: what the page will hold, and where to watch. */
.soon {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 24px 40px;
  align-items: start;
  padding: clamp(24px, 4vw, 40px);
  border-radius: var(--r-window);
  border: 1px solid var(--line-2);
  background: var(--surface);
}
.soon h2 {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
}
.soon .body {
  display: grid;
  gap: 12px;
  color: var(--ink-2);
}
.soon .side {
  display: grid;
  gap: 12px;
  justify-items: start;
}
.soon .side p {
  font-size: 0.9rem;
  color: var(--muted);
}
.qa {
  display: grid;
  margin-top: 8px;
}
.qa > div {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 12px 32px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.qa > div:last-child {
  border-bottom: 1px solid var(--line);
}
.qa p {
  color: var(--ink-2);
}
.req {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 72ch;
}
.block {
  display: grid;
  gap: 18px;
  margin-top: 64px;
}
.block > h2 {
  font-size: 1.6rem;
}

/* The changelog: the version in the margin, its notes beside it. */
.log {
  margin: 0;
  padding: 0;
  list-style: none;
}
.log-item {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px 40px;
  padding: 32px 0;
  border-top: 1px solid var(--line-2);
  scroll-margin-top: 90px;
}
.log-meta {
  display: grid;
  gap: 6px;
  align-content: start;
}
.log-meta h2 {
  font: 600 1.7rem / 1 var(--ff-mono);
  letter-spacing: -0.03em;
}
.log-meta time {
  font-size: 0.88rem;
  color: var(--muted);
}
/* the channel: a word, not a colour (green, amber and red are states) */
.chan {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-2);
}
.log-body {
  display: grid;
  gap: 14px;
  color: var(--ink-2);
}
.log-body ul {
  margin: 0;
  padding-left: 1.2em;
  display: grid;
  gap: 10px;
}
.log-empty {
  display: grid;
  gap: 10px;
  padding: 32px 0;
  border-top: 1px solid var(--line-2);
  border-bottom: 1px solid var(--line);
}
.log-empty h2 {
  font-size: 1.5rem;
}
.log-empty p {
  color: var(--muted);
  max-width: 62ch;
}

/* 404: nothing is listening here */
.empty {
  display: grid;
  place-items: center;
  padding: 120px var(--gutter);
  text-align: center;
}
.empty > div {
  display: grid;
  gap: 18px;
  justify-items: center;
}
.empty .lost {
  color: var(--muted);
}
.empty .lost .bead {
  fill: none;
  stroke: var(--muted);
  stroke-dasharray: 1.2 1.4;
}

/* ── footer ─────────────────────────────────────────────────── */
.foot {
  margin-top: 120px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--muted);
}
.foot-in {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 0.6fr));
  gap: 32px;
  padding-block: 48px 36px;
}
.foot-brand {
  display: grid;
  gap: 12px;
  align-content: start;
}
.foot-brand p {
  max-width: 40ch;
}
.foot-col h2 {
  margin-bottom: 12px;
  font: 600 0.84rem / 1.4 var(--ff-body);
  letter-spacing: 0;
  color: var(--muted);
}
.foot-col ul {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.foot-col a {
  color: var(--ink-2);
}
.foot-legal {
  padding-block: 0 40px;
  font-size: 0.8rem;
  color: var(--muted);
}
.foot-legal p {
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

/* ── motion ─────────────────────────────────────────────────── */
/* The stage settles once, on load: the item is pressed, the popover drops. */
.desk .pop {
  animation: drop 0.6s var(--ease) 0.25s both;
}
.desk .mb-item::after {
  animation: press 0.4s var(--ease) 0.1s both;
}
@keyframes drop {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
}
@keyframes press {
  from {
    opacity: 0;
  }
}
/* Sections rise as they come into view, where the browser can tie an
   animation to scrolling; elsewhere they are simply there. Never from
   invisible: a screenshot mid-scroll still shows the words. */
@supports (animation-timeline: view()) {
  .reveal {
    animation: rise linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 55%;
  }
  @keyframes rise {
    from {
      opacity: 0.35;
      transform: translateY(28px);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ── narrow screens ─────────────────────────────────────────── */
@media (max-width: 1020px) {
  .hero {
    grid-template-columns: minmax(0, 1fr);
  }
  .anatomy,
  .term,
  .trouble > li {
    grid-template-columns: minmax(0, 1fr);
  }
  .get,
  .soon {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 40px;
  }
  .steps::before {
    display: none;
  }
}
@media (max-width: 820px) {
  :root {
    --rail: 1fr;
  }
  .rule,
  .spec-group,
  .honest,
  .stop-rules {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
  .spec-group > h3 {
    padding-top: 0;
  }
  .nav .hash {
    display: none;
  }
  .steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 28px;
  }
  .steps::before {
    display: block;
    top: 0;
    bottom: 0;
    left: 7px;
    right: auto;
    width: 1px;
    height: auto;
  }
  .steps li {
    padding: 0 0 0 36px;
  }
  .spec-rows li {
    grid-template-columns: minmax(0, 1fr);
    gap: 6px;
  }
  .states,
  .stop-rules ul,
  .bar-fig {
    grid-template-columns: minmax(0, 1fr);
  }
  .states {
    gap: 24px;
  }
  .log-item,
  .dl-row,
  .qa > div {
    grid-template-columns: minmax(0, 1fr);
  }
  .foot-in {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
  .foot-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 560px) {
  .top-in {
    gap: 14px;
  }
  .nav {
    gap: 14px;
  }
  .nav li:not(.keep) {
    display: none;
  }
  .brand {
    gap: 8px;
  }
  /* the Homebrew line wraps at its spaces rather than scrolling sideways */
  .brew {
    align-items: flex-start;
    overflow-x: visible;
  }
  .brew code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .menubar {
    gap: 12px;
    padding: 0 10px;
  }
  .mb-other {
    display: none;
  }
  .pop {
    align-self: stretch;
    width: auto;
    max-width: none;
    margin: 8px 8px 14px;
  }
  .srow {
    grid-template-columns: 50px minmax(0, 1fr) auto;
    gap: 8px;
    padding-inline: 12px;
  }
  .stage figcaption {
    text-align: left;
  }
  .specimen {
    padding: 20px 12px;
  }
  .specimen .srow {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    padding: 16px 14px;
    gap: 10px;
  }
  .specimen [data-pin]::after {
    display: none;
  }
  .strip {
    gap: 8px 16px;
    padding: 18px 10px 12px;
  }
  .strip img {
    height: 44px;
  }
}
@media (max-width: 400px) {
  .top .btn.sm {
    display: none;
  }
}