/* ai-term.com — the "Manual" design: one stylesheet, no framework, self-hosted fonts, one press
   black and one vermilion on laid paper. */

/* Fonts: self-hosted, SIL Open Font License (see each folder's OFL.txt). No font host is asked. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 500; font-display: swap;
  src: url("../fonts/cormorant-garamond/cormorant-garamond-latin-500-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond/eb-garamond-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/eb-garamond/eb-garamond-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/eb-garamond/eb-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant SC"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/cormorant-sc/cormorant-sc-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/ibm-plex-mono/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

:root {
  --display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --text: "EB Garamond", Garamond, "Iowan Old Style", "Times New Roman", serif;
  --sc: "Cormorant SC", "Cormorant Garamond", Garamond, serif;
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

/* ==========================================================================
   The Manual: tokens, page, grid, ornaments and components.
   Ported from the approved preview and renamed to the build plan's class list.
   One press black, one vermilion, laid paper.
   - Colours: the four tokens, the two paper tints, and white for the mat
     behind a screenshot plate. A lighter ink is the token printed at a lower
     opacity, never a new colour.
   - Weights: only the shipped faces above. Cormorant Garamond 500 and 500
     italic, EB Garamond 400, 400 italic and 500, Cormorant SC 700, and IBM
     Plex Mono 400 and 500.
   - The book grid: each .chapter and the .colophon set their .wrap in 12
     columns. Columns 1-2 are the rubric, which holds hanging numerals. The
     text block is columns 3-8, and the outer margin is columns 10-12.
   ========================================================================== */

:root {
  --paper: #f1eee6; --ink: #1b1a17; --ink-2: #5a554c; --verm: #bd371b;
  --band: #e7e1d3; --rule: #cfc9bb;
  color-scheme: light;
  --edge: clamp(20px, 4.45vw, 64px);
  --gap: 24px;
}

/* ---------- page ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html {
  background: var(--paper);
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
  scroll-behavior: smooth;
  font-synthesis: none; /* never fake a bold or an italic the shipped faces lack */
}
body {
  margin: 0; color: var(--ink); background: var(--paper);
  font: 400 20px/1.55 var(--text);
  overflow-x: clip;
  font-kerning: normal; font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
  /* Laid paper, printed in press black: fibre grain, chain lines, laid lines. */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='f' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .106 0 0 0 0 .102 0 0 0 0 .09 0 0 0 .19 -.068'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E"),
    repeating-linear-gradient(90deg, color-mix(in srgb, var(--ink) 2.65%, transparent) 0 1px, transparent 1px 128px),
    repeating-linear-gradient(180deg, color-mix(in srgb, var(--ink) 1.64%, transparent) 0 1px, transparent 1px 5px);
}
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--verm); outline-offset: 3px; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 2px solid var(--verm); outline-offset: 3px; border-radius: 2px;
}
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 16px; top: 12px; background: var(--ink); color: var(--paper); padding: 8px 12px; z-index: 10; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
pre, code { font-family: var(--mono); }
code { font-size: .8em; font-weight: 500; overflow-wrap: anywhere; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; } /* a long line wraps in its box, never widens the page */
code, kbd, pre { font-style: normal; }
p, figure { margin: 0; }
h1, h2, h3, h4, b, strong, th { font-weight: 500; }
img { max-width: 100%; height: auto; }

/* ---------- layout ---------- */
.wrap { position: relative; width: min(1312px, 100% - 2 * var(--edge)); margin-inline: auto; }
.chapter > .wrap, .colophon > .wrap {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: start;
}
.sc { font-family: var(--sc); font-weight: 700; letter-spacing: .1em; text-transform: lowercase; }
/* Structure is set in lining figures; folios keep the book face's old-style figures. */
.secnum, .step .n, .faq .n, .legend li::before, .sc, .fn, .mk, .price,
.label, .kicker, .eyebrow, .plate-title, .plate .cn { font-variant-numeric: lining-nums; }

/* ---------- top bar ----------
   <header class="topbar"><div class="wrap">
     <a class="wordmark" href="/"><svg aria-hidden="true">(registration mark)</svg><span>AITerm</span></a>
     <nav class="nav" aria-label="Sections">(links)</nav>
     <details class="menu"><summary>Menu</summary><nav aria-label="Sections">(links, then a.btn)</nav></details>
     <a class="btn" href="…">Download free</a>
   </div></header>
   The stylesheet draws the thick-and-thin rule under the bar. From 980px down, .nav gives way
   to .menu; on phones the bar's own .btn hides too, because the menu carries one. The menu is a
   native <details>, so it opens and closes from the keyboard without a script; manual.js only
   closes it after a link is picked, or on Esc.
   Vermilion text must be large (24px, or 18.66px bold): the laid texture takes vermilion under
   AA's 4.5:1 for smaller text. So a hover here keeps the ink and turns the underline vermilion. */
.topbar { padding-top: 26px; }
.topbar > .wrap { display: flex; align-items: center; gap: 36px; padding-bottom: 22px; }
.topbar > .wrap::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px;
  border-top: 2.5px solid var(--ink); border-bottom: 1px solid var(--ink);
}
.wordmark {
  display: inline-flex; align-items: center; gap: 11px; text-decoration: none;
  font: 500 29px/1 var(--display); letter-spacing: .004em;
}
.wordmark svg { width: 21px; height: 21px; flex: none; color: var(--verm); opacity: 1; }
.nav { display: flex; gap: 30px; margin-left: auto; }
.nav a, .menu > summary, .menu a:not(.btn) {
  font-family: var(--sc); font-weight: 700; letter-spacing: .1em; text-transform: lowercase; text-decoration: none;
}
.nav a { font-size: 18.5px; padding-block: 5px; border-bottom: 1px solid transparent; }
.nav a:hover { border-bottom-color: var(--verm); }
.menu { display: none; position: relative; margin-left: auto; }
.menu > summary {
  display: flex; align-items: center; min-height: 40px; padding: 0 14px 2px; font-size: 16px;
  list-style: none; cursor: pointer; border: 1.25px solid var(--ink);
}
.menu > summary::-webkit-details-marker { display: none; }
.menu[open] > summary { color: var(--paper); background: var(--ink); }
.menu > :not(summary) {
  position: absolute; right: 0; top: calc(100% + 12px); z-index: 5;
  display: flex; flex-direction: column; width: min(300px, 100vw - 2 * var(--edge));
  padding: 6px 0 14px; background: var(--paper); border: 1.5px solid var(--ink);
}
.menu a:not(.btn) { padding: 12px 18px; font-size: 18px; }
.menu a:not(.btn) + a:not(.btn) { border-top: 1px solid var(--rule); }
.menu a:not(.btn):hover { text-decoration: underline; text-decoration-color: var(--verm); }
.menu .btn { margin: 8px 14px 0; }

/* ---------- buttons and links that act as buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 0 26px 3px;
  font-family: var(--sc); font-weight: 700; font-size: 20px; letter-spacing: .11em; text-transform: lowercase;
  text-decoration: none; color: var(--paper); background: var(--ink); border: 1.5px solid var(--ink);
  transition: background-color .2s, border-color .2s;
  line-height: 1.2; text-align: center; text-wrap: balance; /* only seen if a label ever wraps */
}
.btn:hover { background: var(--verm); border-color: var(--verm); }
.btn svg { width: 12px; height: 15px; flex: none; }
.topbar .btn { min-height: 42px; padding: 0 18px 2px; font-size: 17.5px; }
.btn-quiet {
  font-style: italic; font-size: 21px; text-decoration: none; white-space: nowrap;
  border-bottom: 1px solid var(--rule); padding-bottom: 1px;
}
.btn-quiet:hover { border-bottom-color: var(--verm); }
.btn-quiet b { margin-left: .25em; font: 500 24px var(--display); color: var(--verm); } /* vermilion, so 24px */

/* ---------- the opening spread: frontispiece (left) and title page (right) ----------
   <section class="spread" aria-labelledby="hero-title"><div class="wrap">
     <svg class="regmark top" aria-hidden="true">…</svg><svg class="regmark bottom" aria-hidden="true">…</svg>
     <div class="gutter" aria-hidden="true"></div>
     <div class="page hero"> p.eyebrow, h1.title (second line in <em>), p.lede, div.cta (a.btn, a.btn-quiet),
       p.fine, div.imprint (figure.seal, then a), <span class="folio" aria-hidden="true">iii</span> </div>
     <figure class="page"> p.plate-title (two spans, a space between), div.plate (the drawing),
       <span class="folio" aria-hidden="true">ii</span> (positioned, so it can sit anywhere),
       figcaption.fig-caption last (a p with a .fn lead and a space after it, then ol.legend) </figure>
   </div></section>
   The title page comes first in the source and on phones; the grid sets it on the right.
   The stylesheet draws the four crop marks. A quiet link keeps its marker in its name, after a
   real space: <a class="btn-quiet" href="#demo">Take a look <b>Fig. 1</b></a>. */
.spread { padding-block: 78px 104px; }
.spread > .wrap { display: grid; grid-template-columns: 1fr 1fr; padding: 44px 44px 40px; min-height: 820px; }
.spread > .wrap::before {
  content: ""; position: absolute; inset: -40px; pointer-events: none; opacity: .55;
  background:
    linear-gradient(var(--ink), var(--ink)) left 40px top 0 / 1px 26px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 0 top 40px / 26px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 40px top 0 / 1px 26px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 0 top 40px / 26px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 40px bottom 0 / 1px 26px no-repeat,
    linear-gradient(var(--ink), var(--ink)) left 0 bottom 40px / 26px 1px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 40px bottom 0 / 1px 26px no-repeat,
    linear-gradient(var(--ink), var(--ink)) right 0 bottom 40px / 26px 1px no-repeat;
}
.gutter { position: absolute; top: 0; bottom: 0; left: 50%; width: 140px; margin-left: -70px; pointer-events: none; }
.gutter::before {
  content: ""; position: absolute; inset: 0; opacity: .055;
  background: linear-gradient(90deg, transparent 22%, var(--ink) 50%, transparent 78%);
}
.gutter::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--rule); }
.spread .page { grid-row: 1; position: relative; display: flex; flex-direction: column; margin: 0; }
.spread .page:not(.hero) { grid-column: 1; padding: 0 60px 0 0; }
.spread .hero { grid-column: 2; padding: 6px 0 0 76px; }
.spread .folio { position: absolute; bottom: -4px; font: italic 500 20px/1 var(--display); color: var(--ink-2); }
.spread .page:not(.hero) .folio { left: 0; }
.spread .hero .folio { right: 0; }
.regmark { display: inline-block; width: 26px; height: 26px; color: var(--ink); opacity: .6; }
.spread .regmark { position: absolute; left: 50%; margin-left: -13px; }
.spread .regmark.top { top: -54px; }
.spread .regmark.bottom { bottom: -54px; }

/* the title page */
.eyebrow {
  margin: 0 0 30px; color: var(--verm); font-family: var(--sc); font-weight: 700; font-size: 19.5px;
  letter-spacing: .14em; text-transform: lowercase; text-wrap: balance; /* never a lone "mac" */
}
.title { margin: 0 0 38px; font: 500 clamp(50px, 13.2vw, 112px)/.9 var(--display); letter-spacing: -.012em; text-wrap: balance; }
.title em { display: block; font-style: italic; font-weight: 500; }
.lede { font-size: 22px; line-height: 1.52; max-width: 30em; }
.hero .lede { margin-bottom: 40px; }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 34px; margin: 0 0 30px; }
.fine { font-size: 16.5px; line-height: 1.6; color: var(--ink-2); text-wrap: pretty; } /* no lone last word on a phone */
/* Where the seal and "Made by Vega LLC" do not fit on one line (a 390px phone), the line drops
   under the seal whole instead of wrapping beside it. */
.imprint { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: auto; padding-top: 56px; }
.imprint > :not(.seal) {
  font-family: var(--sc); font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: lowercase;
  text-decoration: none; color: var(--ink-2);
}
.imprint a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--verm); }
.seal { flex: none; width: 176px; margin: 0; }
.seal svg { display: block; width: 100%; height: auto; }

/* the frontispiece: a framed plate, its title line, its caption and its numbered legend */
.plate-title {
  display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 14px;
  font-family: var(--sc); font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: lowercase; color: var(--ink-2);
}
.plate { position: relative; padding: 22px 18px 16px; }
.plate::before, .plate::after { content: ""; position: absolute; border: 1px solid var(--ink); pointer-events: none; }
.plate::before { inset: 0; opacity: .36; }
.plate::after { inset: 5px; opacity: .15; }
/* The drawing's own classes (copy the preview's SVG as it is; these rules finish it). */
.plate svg { display: block; width: 100%; height: auto; overflow: visible; }
.plate text { font-family: var(--mono); font-size: 8.6px; fill: var(--ink); }
.plate .it { font-family: var(--text); font-style: italic; font-size: 11.5px; }
.plate .cn { font-family: var(--display); font-style: italic; font-weight: 500; font-size: 21px; fill: var(--verm); }
.plate .tb { font-size: 6.4px; letter-spacing: .09em; }
.plate .tb-b, .plate [font-weight="600"] { font-weight: 500; }
.plate .ln, .plate .lf, .plate .hl, .plate .leader, .plate .proj, .plate .phantom { stroke: var(--ink); fill: none; }
.plate .ln, .plate .lf { stroke-width: 1; }
.plate .lf, .plate .paper { fill: var(--paper); }
.plate .hl { stroke-width: .55; }
.plate .leader { stroke-width: .7; }
.plate .proj { stroke-width: .6; stroke-dasharray: 3 2.6; }
.plate .phantom { stroke-width: .8; stroke-dasharray: 11 2.5 2 2.5 2 2.5; }
.plate .dot { fill: var(--ink); }
.spread .fig-caption { margin-top: 18px; font-size: 17px; color: var(--ink); }
.legend {
  margin: 12px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 30px;
  font-size: 16px; line-height: 1.35; color: var(--ink-2); counter-reset: legend;
}
.legend li { position: relative; break-inside: avoid; padding: 3px 0 4px 26px; counter-increment: legend; }
.legend li::before {
  content: counter(legend); position: absolute; left: 2px; top: 0;
  font: italic 500 24px/1 var(--display); color: var(--verm); /* vermilion, so 24px */
}

/* ---------- chapters ----------
   <section class="chapter" id="…" aria-labelledby="…"><div class="wrap">
     <header class="chapter-head">
       <p class="secnum" aria-hidden="true"><small>§</small>1</p>
       <p class="kicker">How it works</p> <h2 id="…">…</h2> <p class="lede">…</p>
       <p class="margin-note">…</p> (optional; it sits beside the lede)
     </header>
     … the chapter's content …
     <div class="runfoot"><span>AITerm · How it works</span> <span class="folio">1</span></div> (optional)
   </div></section>
   Placement: a chapter's children sit in the text block (3-8). The head, a .procedure and the
   running foot span the page. A .fig, .options and .pricelist run on into the margin (3-12).
   A .checklist figure and a .writecard figure sit side by side (3-7 and 8-12). A .margin-note
   sits in the outer margin (10-12), level with the element just before it. */
.chapter { padding-top: 132px; }
.chapter > .wrap > * { grid-column: 3 / 9; }
.chapter > .wrap > .chapter-head, .chapter > .wrap > .procedure, .chapter > .wrap > .runfoot { grid-column: 1 / -1; }
.chapter > .wrap > .fig, .chapter > .wrap > .options, .chapter > .wrap > .pricelist { grid-column: 3 / 13; }
.chapter > .wrap > .checklist { grid-column: 3 / 8; }
.chapter > .wrap > .writecard { grid-column: 8 / 13; }
.chapter > .wrap > .margin-note { grid-column: 10 / 13; }
/* Vertical rhythm. A margin note takes the same top margin as the element it sits beside. */
.chapter > .wrap > * + * { margin-top: 24px; }
.chapter > .wrap > :is(.procedure, .fig, .options, .pricelist, .shot-plate, .ruled, .checklist, .writecard, .faq),
.chapter > .wrap > :is(.procedure, .fig, .options, .pricelist, .shot-plate, .ruled, .checklist, .writecard, .faq) + .margin-note { margin-top: 56px; }
.chapter > .wrap > .chapter-head + *, .chapter > .wrap > .chapter-head + * + .margin-note,
.chapter > .wrap > .faq + .faq { margin-top: 0; }
.chapter > .wrap > .writecard { margin-top: 128px; }
.chapter > .wrap > .runfoot { margin-top: 112px; }

.chapter-head { display: grid; grid-template-columns: subgrid; align-items: start; margin-bottom: 64px; }
.secnum {
  grid-column: 1 / 3; grid-row: 1 / span 3; margin: 0; padding-right: 4px; text-align: right;
  font: 400 176px/.72 var(--text); letter-spacing: -.03em; color: var(--verm);
}
.secnum small { margin-right: .1em; font-size: .38em; font-weight: 400; vertical-align: 1.15em; letter-spacing: 0; }
.kicker {
  grid-column: 3 / 10; margin: 2px 0 14px; color: var(--ink-2);
  font-family: var(--sc); font-weight: 700; font-size: 19px; letter-spacing: .13em; text-transform: lowercase;
  text-wrap: balance; /* on a phone, never a line that starts "· pro" */
}
.chapter-head :is(h1, h2) {
  grid-column: 3 / 11; margin: 0 0 28px;
  font: 500 clamp(40px, 4.8vw, 70px)/1 var(--display); letter-spacing: -.012em; text-wrap: balance;
}
.chapter-head .lede { grid-column: 3 / 9; }
.chapter-head .margin-note { grid-column: 10 / 13; grid-row: 3; }

/* margin notes, footnote markers and footnotes */
.margin-note { font-size: 16.5px; line-height: 1.45; font-style: italic; color: var(--ink-2); }
.margin-note p + p, .margin-note p + .status { margin-top: 14px; }
.margin-note b, .margin-note strong { font-style: normal; font-weight: 500; color: var(--ink); }
.mk { font-family: var(--display); font-weight: 500; font-style: normal; color: var(--ink); } /* a marker is small text: ink, not vermilion */
sup.mk { margin-left: 1px; font-size: .78em; line-height: 0; vertical-align: .52em; }
.margin-note .mk { margin-right: .4em; font-size: 1.1em; }
.footnote { position: relative; padding-top: 12px; font-size: 16px; color: var(--ink-2); }
.footnote::before { content: ""; position: absolute; left: 0; top: 0; width: 120px; border-top: 1px solid var(--ink); }
.footnote .mk { margin-right: .35em; }

/* the running foot at a chapter's end; add "verso" to set the folio on the left */
.runfoot {
  position: relative; display: flex; justify-content: space-between; align-items: baseline;
  padding-top: 12px; border-top: 1px solid var(--ink);
}
.runfoot.verso { flex-direction: row-reverse; }
.runfoot > :not(.folio) {
  font-family: var(--sc); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: lowercase; color: var(--ink-2);
}
.runfoot .folio { font: italic 500 22px/1 var(--display); }
.runfoot::before, .runfoot::after { content: ""; position: absolute; top: -1px; width: 26px; border-top: 1px solid var(--ink); opacity: .5; }
.runfoot::before { left: max(-44px, -1 * var(--edge)); } /* never past the page's edge */
.runfoot::after { right: max(-44px, -1 * var(--edge)); }

/* ---------- the procedure: numbered steps with numerals hung in the rubric ----------
   <ol class="procedure" role="list"><li class="step">
     <span class="n" aria-hidden="true">1</span><h3>…</h3><p>…</p>
     <p class="margin-note">…</p> (optional; it sits in the outer margin beside the step)
   </li></ol>
   A <div> may wrap the heading and its paragraphs. A p.label may head that <div>, as a step's
   own kicker; the numeral then hangs level with the label, as the § numeral does with the
   chapter's kicker, and the heading takes a line of its own. */
.procedure { display: grid; grid-template-columns: subgrid; row-gap: 34px; margin: 0; padding: 0; list-style: none; }
.step { position: relative; grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.step > * { grid-column: 3 / 9; }
.step > .n { grid-column: 1 / 3; padding-right: 6px; text-align: right; font: 400 64px/.9 var(--text); color: var(--verm); }
.step > .margin-note { position: absolute; top: 34px; grid-column: 10 / 13; grid-row: 1; } /* level with the step's first line */
/* A note that opens with a terminal status line (mono, 14px) has a shallower first baseline than
   the note's italic; 2.5px more keeps it on the step's first line (measured at 1440). */
.step > .margin-note:has(> .status:first-child) { top: 36.5px; }
.step h3 { display: inline; margin: 0; font: 500 21px/1.5 var(--text); }
.step .label + h3 { display: block; text-wrap: balance; } /* never a lone last word on a phone */
.step h3 + p { margin-top: 2px; }
.step p + p { margin-top: 12px; }
.step q { font-style: italic; }

/* ---------- figures, cards and their parts ----------
   <figure class="fig" aria-labelledby="…">
     <p class="plate-title">…</p>   (optional; the figure's title line, across the top)
     <div class="hatch"><div class="card">(rows)</div></div>   (one or more; they sit side by side when there is room)
     <figcaption class="fig-caption" id="…"><span class="fn">Fig. 1</span> …</figcaption>
   </figure>
   A card is a stack of rows. Keep a real space between the pieces of a row, so copy-and-paste and
   screen readers get "You ask Find…", never "You askFind…":
     <div class="row"><span class="label">You ask</span> <p class="said">…</p></div>
     <div class="row"><span class="label">AITerm suggests</span> <code class="cmd">…</code> <p>…</p></div>
     <div class="row"><span class="label">AITerm explains</span> <p class="answer">…</p> <p>…</p></div>
     <div class="row row-foot"><span class="tier-safe">Safe</span> <span class="keycap">Enter to run <svg aria-hidden="true">…</svg></span></div>
     <div class="row"><span class="label">Example output</span> <pre>…</pre></div> */
.fig { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 34px var(--gap); margin: 0; }
.fig > * { flex: 1 1 290px; min-width: 0; }
.fig > figcaption { flex-basis: 100%; }
.fig > .plate-title { flex-basis: 100%; margin-bottom: -20px; text-wrap: balance; } /* 14px above the cards, as over Plate I */
/* Two or more cards share equal columns. With flex-wrap, a card left on a row of its own (Fig. 1's
   third, from 660 to 1214px) stretched across the figure; in this grid it keeps its column's width. */
.fig:has(> .hatch ~ .hatch) { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); align-items: start; }
.fig:has(> .hatch ~ .hatch) > :is(.plate-title, figcaption) { grid-column: 1 / -1; }
.fig-caption { margin-top: 24px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.fig > .fig-caption { margin-top: -10px; }
/* A caption's lead label: "Fig. 1", "Table 1", "Plate II". Always follow it with a real space in
   the markup. Copy-and-paste, search and screen readers never see this margin, which only tops the
   space up to the design's gap. */
.fn {
  margin-right: .25em; font-family: var(--sc); font-weight: 700; font-size: 17px; letter-spacing: .1em;
  text-transform: lowercase; color: var(--ink);
}
/* .hatch wraps a card and prints a hatched shadow behind it */
.hatch { position: relative; isolation: isolate; }
.hatch::before {
  content: ""; position: absolute; z-index: -1; inset: 10px -10px -10px 10px; opacity: .5;
  background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px);
}
.card { position: relative; background: var(--paper); border: 1.5px solid var(--ink); }
.row { position: relative; padding: 16px 22px 18px; border-top: 1px solid var(--rule); font-size: 19px; line-height: 1.45; }
.row:first-child { border-top: 0; }
.row-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.label {
  display: block; margin: 0 0 6px; font-family: var(--sc); font-weight: 700; font-size: 15.5px;
  letter-spacing: .13em; text-transform: lowercase; color: var(--ink-2);
}
.label b { font-weight: 700; font-size: 19px; color: var(--verm); } /* vermilion, so bold at 19px */
.said { font-style: italic; font-size: 22px; line-height: 1.35; text-wrap: pretty; }
.cmd {
  display: block; padding: 11px 14px 12px; background: var(--band); border-left: 2px solid var(--ink);
  font: 500 15.5px/1.5 var(--mono); white-space: pre-wrap;
}
.cmd span { white-space: nowrap; } /* wrap an argument group in a span to keep it on one line */
.cmd + p { margin-top: 12px; }
/* an answer in words (/explain), set on the band like a command, but in the book face */
.answer {
  padding: 11px 14px 12px; background: var(--band); border-left: 2px solid var(--ink); font-weight: 500; text-wrap: pretty;
}
.answer + p { margin-top: 12px; }
/* sample output, on striped continuous paper with tractor-feed holes */
.fig pre {
  margin: 0; padding: 12px 18px 14px 40px; border: 1px solid var(--rule);
  font: 13.5px/24px var(--mono); white-space: pre-wrap; overflow-wrap: anywhere;
  background:
    radial-gradient(circle at 17px 12px, transparent 3.3px, var(--rule) 3.4px 4.2px, transparent 4.3px) 0 0 / 34px 24px repeat-y,
    repeating-linear-gradient(180deg, var(--band) 0 24px, transparent 24px 48px) 0 12px / 100% 100% no-repeat;
}
.label + pre { margin-top: 4px; }
/* As in a command: a span keeps a file name or phrase on one line, and a <wbr> after a
   directory's slash offers the break, so a narrow card never splits "september.pdf". */
.fig pre span { white-space: nowrap; }
/* a key to press, shown on the page (.keycap) or a real button (.copy) */
.keycap, .copy {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px 9px;
  font: 500 13.5px/1 var(--mono); color: var(--ink); background: var(--paper);
  border: 1px solid var(--ink); border-bottom-width: 3px; border-radius: 2px; white-space: nowrap;
}
.keycap svg { width: 14px; height: 12px; }
.copy { cursor: pointer; transition: transform .08s; }
.copy:hover { background: var(--band); }
.copy:active { transform: translateY(2px); border-bottom-width: 1.5px; }
kbd {
  display: inline-block; padding: 4px 8px 5px; font: 500 .8em/1 var(--mono); white-space: nowrap;
  border: 1px solid var(--ink); border-bottom-width: 2.5px; border-radius: 2px;
}

/* ---------- risk tiers: a swatch whose hatching gets denser as the stakes rise ----------
   The label keeps its context's ink and is never vermilion, so it reads on paper and on the
   band alike; the vermilion lives in the Irreversible swatch. */
.tier-safe, .tier-caution, .tier-destructive, .tier-irreversible {
  display: inline-flex; align-items: center; gap: 9px; white-space: nowrap;
  font-family: var(--sc); font-weight: 700; font-size: 17px; font-style: normal; letter-spacing: .11em; text-transform: lowercase;
}
.tier-safe::before, .tier-caution::before, .tier-destructive::before, .tier-irreversible::before {
  content: ""; flex: none; width: 15px; height: 15px; border: 1px solid var(--ink);
}
.tier-caution::before { background: repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px); }
.tier-destructive::before {
  background:
    repeating-linear-gradient(135deg, var(--ink) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(45deg, var(--ink) 0 1px, transparent 1px 4px);
}
.tier-irreversible::before { background: var(--verm); border-color: var(--verm); }

/* ---------- Fig. 2, the agent's plan ----------
   <figure class="fig checklist" aria-labelledby="…"><div class="hatch"><div class="card">
     <p class="card-head"><b>Tidy up <code>~/project</code></b></p>
     <p class="label">Plan</p>
     <ol role="list">
       <li class="done"><span class="box" aria-hidden="true"></span> <span>… <span class="sr-only">(done)</span></span></li>
       <li class="next"><span class="box" aria-hidden="true"></span> <span>Remove the build caches <span class="sr-only">(in progress)</span></span></li>
       <li><span class="box" aria-hidden="true"></span> <span>… <span class="sr-only">(pending)</span></span></li>
     </ol>
     <div class="card-foot">
       <p>Review the command below, then press Return to run it (Esc to stop).</p>
       <p>Would delete 3 paths.</p>
     </div>
   </div>
   <p class="proposal"><span class="tier-destructive">Destructive</span> <code>rm -rf …</code></p>
   </div><figcaption class="fig-caption" id="…"><span class="fn">Fig. 2</span> …</figcaption></figure>
   Keep a real space between the pieces, as in a card's rows. The grid and flex boxes here never
   draw it, but copied text reads "Destructive rm -rf…", never "Destructiverm -rf…". The sr-only
   states are the app's own spoken ones (done, in progress, pending), since the box and the band
   are drawn.
   The card shows only what the app shows while a step waits, laid out as the app lays it out:
   the task alone in the head; "Plan" over the rows; each row a glyph and one line, with no
   number; the status line, then the scope line under it; and no Undo. The step's command sits
   under the card, where the input bar is, with its risk tier beside it. It is a drawing of the
   bar, not a control: nothing in it can be focused or run. */
.card-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; padding: 14px 20px 13px;
  border-bottom: 1px solid var(--rule);
}
.card-head b { font-weight: 500; }
.card-head code { font-size: 15.5px; }
.card-head .meta { margin-left: auto; font-style: italic; font-size: 16.5px; color: var(--ink-2); }
/* A tier beside a path or a command (Fig. 3's Caution, Fig. 2's Destructive), set a size down.
   Its word sits on the line's baseline: an inline-flex tier otherwise takes its baseline from the
   swatch (2.7px high). */
:is(.card-head, .proposal) :is(.tier-safe, .tier-caution, .tier-destructive, .tier-irreversible) { align-items: baseline; font-size: 15.5px; }
:is(.card-head, .proposal) :is(.tier-safe, .tier-caution, .tier-destructive, .tier-irreversible)::before { align-self: center; }
.checklist .card-head + .label { margin: 0; padding: 14px 20px 0; }
.checklist ol { margin: 0; padding: 2px 0 8px; list-style: none; }
.checklist li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; align-items: baseline;
  padding: 10px 20px 11px; font-size: 18.5px; line-height: 1.35;
}
.checklist .box { position: relative; align-self: start; width: 15px; height: 15px; margin-top: 5px; border: 1.25px solid var(--ink); }
.checklist .done .box::after {
  content: ""; position: absolute; left: 3.5px; top: -1px; width: 5px; height: 10px;
  border: solid var(--ink); border-width: 0 1.75px 1.75px 0; transform: rotate(40deg);
}
.checklist .done { color: var(--ink-2); }
/* The step that waits: the band and a vermilion rule at its edge. Its words stay in press black:
   vermilion text on the band is only 4.3:1 (under AA's 4.5:1); as a rule it needs 3:1. */
.checklist .next { position: relative; background: var(--band); }
.checklist .next::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--verm); }
.card-foot {
  padding: 12px 20px 14px; border-top: 1px solid var(--rule); font-size: 16px; font-style: italic; color: var(--ink-2);
}
.card-foot p + p { margin-top: 4px; }
/* The input bar under the card: the proposed command, docked to the card's foot, its tier first
   as the app's risk badge is. On the band, in the ink. */
.proposal {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin: 0; padding: 12px 20px 13px;
  background: var(--band); border: 1.5px solid var(--ink); border-top: 0;
}
.proposal code { flex: 1 1 250px; min-width: 0; font: 500 15px/1.5 var(--mono); }
/* terminal status lines, e.g. in a margin note:
   <div class="margin-note"><p class="status busy">Waiting — …</p> <p class="status">Paused — …</p></div> */
.status { display: flex; align-items: baseline; gap: 10px; font: 500 14px/1.4 var(--mono); color: var(--ink); }
.status::before { content: ""; flex: none; width: 7px; height: 7px; border: 1.25px solid var(--ink); transform: translateY(-1px); }
.status.busy::before { background: var(--ink); }
.status + .status { margin-top: 8px; }

/* ---------- Fig. 3, the file-write card ----------
   <figure class="fig writecard" aria-labelledby="…"><div class="hatch"><div class="card">
     <p class="card-head"><code>~/project/notes.md</code> <span class="tier-caution">Caution</span> <span class="meta">New file, 3 lines</span></p>
     <ol role="list">
       <li># Notes</li>
       <li>Removed three build caches.</li>
       <li>Nothing else was changed.</li>
     </ol>
     <p class="card-actions"><span>Approve</span> <span>Skip</span></p>
     <p class="card-note">Approve writes this file now. Skip tells the agent you declined.</p>
   </div></div><figcaption class="fig-caption" id="…"><span class="fn">Fig. 3</span> …</figcaption></figure>
   The card shows plain lines, as the app does: no line numbers and no gutter. Put one line in
   each <li>, each on its own source line; the line breaks between the items keep copied text
   from reading "# NotesRemoved…". The card carries only the app's own parts: the path, the risk
   label, the summary, the text, the two buttons and what they do; no title of its own. */
.writecard ol {
  margin: 16px 20px 0; padding: 9px 14px; list-style: none;
  border: 1px solid var(--rule); background: var(--band); font: 14.5px/1.8 var(--mono);
}
.writecard li { overflow-wrap: anywhere; }
.card-actions { display: flex; gap: 12px; padding: 18px 20px 0; }
.card-actions > * {
  display: inline-flex; align-items: center; min-height: 38px; padding: 0 17px 2px; border: 1.25px solid var(--ink);
  font-family: var(--sc); font-weight: 700; font-size: 17px; letter-spacing: .1em; text-transform: lowercase;
}
.card-actions > :first-child { color: var(--paper); background: var(--ink); }
.card-note { padding: 12px 20px 18px; font-size: 16px; font-style: italic; color: var(--ink-2); }

/* ---------- a screenshot, tipped in on a white mat ----------
   <figure class="shot-plate"><img src="…" width="1696" height="1776" loading="lazy" alt="…">
     <figcaption><span class="fn">Plate II</span> …</figcaption></figure>
   A p.plate-title may head the plate, and a link to the full-size file may wrap the image. The
   image's alt names the link (so no aria-label, which would replace it), and a visually hidden
   note says where it goes:
   <a href="….png" target="_blank" rel="noopener"><img … alt="…"><span class="sr-only">(full size, opens in a new tab)</span></a>. */
.shot-plate img {
  display: block; width: 100%; padding: 14px; background: #ffffff;
  border: 1px solid var(--rule); outline: 1px solid var(--rule); outline-offset: 5px;
}
.shot-plate a { display: block; }
.shot-plate a:focus-visible { outline-offset: 9px; } /* outside the mat's own outer rule */
.shot-plate figcaption { margin-top: 20px; font-size: 16.5px; line-height: 1.45; color: var(--ink-2); }
.shot-plate figcaption p + p { margin-top: 4px; }

/* ---------- a ruled table (thick rules above and below, hairlines between rows) ----------
   <table class="ruled"><caption><span class="fn">Table 1</span> …</caption>
     <tbody><tr><th scope="row">New tab</th> <td><kbd>⌘T</kbd></td></tr> …</tbody></table>
   The space between the cells keeps "New tab ⌘T" apart in copied text. */
.ruled { width: 100%; border-collapse: collapse; border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
.ruled caption { caption-side: top; padding: 0 0 14px; text-align: left; font-size: 16.5px; color: var(--ink-2); }
.ruled thead th {
  padding: 14px 20px 12px 0; text-align: left; vertical-align: bottom; border-bottom: 1px solid var(--ink);
  font-family: var(--sc); font-weight: 700; font-size: 16px; letter-spacing: .12em; text-transform: lowercase; color: var(--ink-2);
}
.ruled tbody th { padding: 18px 20px 16px 0; text-align: left; vertical-align: baseline; font: italic 500 31px/1.05 var(--display); }
.ruled td { padding: 18px 20px 16px 0; vertical-align: baseline; font-size: 19px; line-height: 1.45; }
.ruled tbody tr + tr > * { border-top: 1px solid var(--rule); }

/* ---------- § 3: the options, set as a three-column table ----------
   <div class="options">
     <article class="option">
       <p class="label"><b>01</b> · Free</p> <h3>Keep it local.</h3> <p>…</p> <p class="fine">…</p>
     </article> …
   </div>
   Whitespace between the blocks keeps copied text reading "01 · Free Keep it local.". The
   footer lines (p.fine) sit along the table's foot, level across the columns, as a last row. */
.options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
.option { display: flex; flex-direction: column; padding: 20px 24px 26px 0; font-size: 19px; line-height: 1.45; }
.option + .option { padding-left: 24px; border-left: 1px solid var(--rule); }
.option .label { margin-bottom: 12px; }
.option h3 { margin: 0 0 14px; font: italic 500 31px/1.05 var(--display); }
.option p + p { margin-top: 12px; }
.option .fine { margin-top: auto; padding-top: 12px; }

/* ---------- § 5: the price list ----------
   <div class="pricelist">
     <div><h3>Free</h3><p class="price">$0 <span>forever</span></p><p>…</p><a class="btn" …>…</a><ul>…</ul><p class="fine">…</p></div>
     <div><h3>Pro</h3><p class="price">$99 <span>/ year per seat</span></p><p class="fine">…</p><a class="btn" …>…</a> …</div>
   </div>
   In .price the text is the amount and the <span> is the period. */
.pricelist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
.pricelist > * { padding: 22px 32px 30px 0; font-size: 19.5px; line-height: 1.5; }
.pricelist > * + * { padding: 22px 0 30px 32px; border-left: 1px solid var(--rule); }
.pricelist h3 {
  margin: 0 0 10px; font-family: var(--sc); font-weight: 700; font-size: 19px; letter-spacing: .13em; text-transform: lowercase;
}
.price { margin: 0; font: 500 40px/1.15 var(--display); }
.price span { margin-left: .15em; font: italic 500 22px/1 var(--display); color: var(--ink-2); }
.price + p { margin-top: 6px; }
.pricelist .btn { margin: 20px 0 22px; }
.pricelist ul { margin: 18px 0 0; padding: 0; list-style: none; }
.pricelist li { position: relative; padding: 7px 0 7px 24px; border-top: 1px solid var(--rule); }
.pricelist li::before { content: ""; position: absolute; left: 0; top: 1.1em; width: 11px; border-top: 1px solid var(--verm); }
.pricelist .fine { margin-top: 14px; }

/* ---------- § 6: numbered questions ----------
   <details class="faq"><summary>Do I need to know the command line? <span class="n">Q1</span></summary><p>…</p></details>
   The number hangs in the rubric, level with the question's first line. On phones there is no
   rubric: the summary indents its first line and the number is set into that indent, so it can
   never wrap onto a line of its own. */
.faq { border-top: 1px solid var(--rule); }
.faq:last-of-type { border-bottom: 1px solid var(--rule); }
.faq > summary {
  position: relative; display: block; padding: 18px 44px 17px 0; cursor: pointer; list-style: none;
  font: 500 26px/1.25 var(--display);
}
.faq > summary::-webkit-details-marker { display: none; }
.faq > summary::after {
  content: ""; position: absolute; right: 4px; top: 28px; width: 13px; height: 13px;
  background:
    linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1.5px 13px no-repeat;
}
.faq[open] > summary::after { background: linear-gradient(currentColor, currentColor) center / 13px 1.5px no-repeat; }
.faq > summary:hover { color: var(--verm); }
.faq .n { position: absolute; top: 18px; right: calc(100% + var(--gap) + 6px); white-space: nowrap; font: italic 500 26px/1.25 var(--display); color: var(--verm); }
.faq > :not(summary) { max-width: 34em; }
.faq > :last-child:not(summary) { padding-bottom: 22px; }
.faq > p + p { margin-top: 12px; }

/* ---------- the colophon ----------
   <section class="colophon" id="install" aria-labelledby="install-title"><div class="wrap">
     <div> p.eyebrow, h2, p.lede, div.cta, p.fine, div.install, p.colophon-note </div>   (one block, in the text column)
     <nav aria-label="…">(links)</nav>                               (one nav, in the margin)
     <div class="colophon-base"><span>© …</span><details>…</details><a href="#main">Back to top ↑</a>
       <span class="colorbar" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i><i></i><i></i><svg class="regmark">…</svg></span></div>
   </div></section>
   The Homebrew block:
     <div class="install"><div class="copyline"><code>…</code><button type="button" class="copy" data-copy hidden>Copy</button></div>
       <p class="copy-status" role="status" aria-live="polite"></p><p class="fine">…</p></div>
   The button ships hidden and manual.js reveals it, so without the script there is no dead
   control: the command is selectable text and the status line stays empty. Every word of the
   command sits in a no-wrap span; the line breaks only at the spaces between them (never inside
   "brew install --cask", and never before "&&"). Where the command and the button do not fit
   side by side, the button drops under the command.
   A p.label may head the block ("Prefer Homebrew?"). The main block closes with the colophon's own
   line: <p class="colophon-note"><span class="fn">AITerm.</span> A little help for what comes next. …</p> */
.colophon { padding: 132px 0 72px; font-size: 18.5px; }
.colophon > .wrap > * { grid-column: 3 / 9; }
.colophon > .wrap > nav { grid-column: 10 / 13; display: flex; flex-direction: column; gap: 6px; padding-top: 40px; }
.colophon > .wrap > .colophon-base { grid-column: 1 / -1; }
.colophon h2 { margin: 0 0 22px; font: 500 clamp(36px, 3.6vw, 52px)/1.04 var(--display); letter-spacing: -.008em; text-wrap: balance; }
.colophon .lede { margin-bottom: 30px; }
.colophon nav a { align-self: flex-start; text-decoration: none; border-bottom: 1px solid transparent; }
.colophon nav a:hover { border-bottom-color: var(--verm); }
.install { margin-top: 40px; }
.copyline { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 9px 9px 9px 14px; background: var(--band); border-left: 2px solid var(--ink); }
.copyline code { flex: 1 1 18em; min-width: 0; font: 500 15.5px/1.5 var(--mono); text-wrap: balance; }
.copyline code span { white-space: nowrap; }
.copyline .copy { flex: none; margin-left: auto; }
.copy-status { font-size: 16px; font-style: italic; color: var(--ink); } /* small text: ink, not vermilion */
.copy-status:not(:empty) { margin-top: 8px; }
.install .fine { margin-top: 10px; }
.colophon-note { margin-top: 56px; text-wrap: pretty; }
.colophon-base {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 28px;
  margin-top: 72px; padding-top: 14px; border-top: 1px solid var(--ink); font-size: 16px; color: var(--ink-2);
}
.colophon-base details[open] { flex-basis: 100%; }
.colophon-base summary { cursor: pointer; }
.colophon-base details p { margin-top: 8px; }
.colorbar { display: flex; align-items: center; }
.colorbar i { display: block; width: 17px; height: 17px; background: var(--ink); }
.colorbar i:nth-child(n+5) { background: var(--verm); }
.colorbar i:nth-child(4n+2) { opacity: .7; }
.colorbar i:nth-child(4n+3) { opacity: .4; }
.colorbar i:nth-child(4n) { opacity: .15; }
.colorbar .regmark { width: 20px; height: 20px; margin-left: 14px; }

/* ---------- mid widths ---------- */
@media (min-width: 900px) {
  .title { font-size: clamp(62px, 7.3vw, 110px); }
}
@media (max-width: 1180px) {
  .nav { gap: 20px; }
  .nav a { font-size: 17px; }
  .spread > .wrap { padding: 36px 30px; }
  .spread .hero { padding-left: 52px; }
  .spread .page:not(.hero) { padding-right: 44px; }
}
@media (max-width: 1100px) {
  .options { grid-template-columns: minmax(0, 1fr); }
  .option { padding-right: 0; }
  .option + .option { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 1100px) and (min-width: 760px) {
  .chapter > .wrap > *, .step > *, .chapter-head .lede { grid-column: 3 / -1; }
  .chapter > .wrap > .margin-note, .chapter-head .margin-note, .step > .margin-note {
    position: static; grid-column: 3 / -1; grid-row: auto; margin-top: 26px;
  }
  /* Beside a chapter's first element the desktop sets a note level (margin-top 0), and beside a
     figure, table or list it gives the note that element's 56px, both with more weight than the
     rule above; once the note drops below, it needs its own gap back. Same weight, set later. */
  .chapter > .wrap > .chapter-head + * + .margin-note,
  .chapter > .wrap > :is(.procedure, .fig, .options, .pricelist, .shot-plate, .ruled, .checklist, .writecard, .faq) + .margin-note { margin-top: 26px; }
  .chapter > .wrap > .checklist, .chapter > .wrap > .writecard { grid-column: 3 / -1; margin-top: 56px; }
}
@media (max-width: 980px) {
  .spread > .wrap { grid-template-columns: minmax(0, 1fr); padding: 0; min-height: 0; }
  .spread > .wrap::before, .gutter, .spread .regmark, .spread .folio { display: none; }
  .spread .hero { grid-column: 1; grid-row: 1; padding: 0; }
  .spread .page:not(.hero) { grid-column: 1; grid-row: 2; padding: 64px 0 0; }
  .imprint { margin-top: 40px; padding-top: 0; }
  .nav { display: none; }
  .menu { display: block; }
}

/* ---------- phone ---------- */
@media (max-width: 759px) {
  body { font-size: 18.5px; }
  .chapter > .wrap, .colophon > .wrap, .chapter-head, .procedure { grid-template-columns: minmax(0, 1fr); }
  .chapter > .wrap > *, .colophon > .wrap > *, .chapter-head > * { grid-column: 1 / -1 !important; grid-row: auto !important; }
  .topbar { padding-top: 18px; }
  .topbar > .wrap { gap: 14px; padding-bottom: 18px; }
  .topbar > .wrap > .btn { display: none; }
  .wordmark { font-size: 25px; }
  .spread { padding-block: 40px 64px; }
  .spread .page:not(.hero) { padding-top: 56px; }
  .eyebrow { margin-bottom: 20px; font-size: 19px; } /* vermilion, so bold at 19px or more */
  .title { margin-bottom: 28px; }
  .lede { font-size: 19.5px; }
  .btn { min-height: 52px; padding: 0 20px 3px; font-size: 18.5px; }
  .cta { gap: 16px 24px; }
  .btn-quiet { font-size: 19.5px; }
  .plate { padding: 16px 10px 10px; }
  .legend { columns: 1; }
  .chapter { padding-top: 92px; }
  .chapter-head { margin-bottom: 40px; }
  .chapter-head .secnum { order: -1; }
  .secnum { margin-bottom: 18px; padding: 0; text-align: left; font-size: 104px; line-height: .8; }
  .kicker { margin-bottom: 10px; font-size: 17px; }
  .chapter-head :is(h1, h2) { margin-bottom: 20px; font-size: 42px; }
  .margin-note { margin-top: 24px; padding-left: 16px; border-left: 1px solid var(--verm); }
  .chapter > .wrap > .chapter-head + * + .margin-note,
  .chapter > .wrap > :is(.procedure, .fig, .options, .pricelist, .shot-plate, .ruled, .checklist, .writecard, .faq) + .margin-note { margin-top: 24px; } /* see the mid-width note */
  .procedure { row-gap: 26px; }
  .step { display: block; }
  .step > .n { display: block; margin-bottom: 4px; padding: 0; text-align: left; font-size: 46px; }
  .step h3 { display: block; text-wrap: balance; } /* as a labelled step's: no lone last word */
  .step > .margin-note { position: static; }
  .row { padding: 14px 16px 15px; font-size: 18px; }
  .said { font-size: 20px; }
  .cmd { font-size: 13.5px; }
  .fig pre { padding-left: 36px; font-size: 12px; }
  .checklist li { padding: 10px 16px 11px; font-size: 17.5px; }
  .card-head, .checklist .card-head + .label, .card-foot, .proposal, .card-actions, .card-note { padding-inline: 16px; }
  .proposal code { font-size: 13.5px; }
  .card-head .meta { width: 100%; margin-left: 0; }
  .writecard ol { margin-inline: 16px; padding-inline: 12px; font-size: 12.5px; }
  .chapter > .wrap > .writecard { margin-top: 52px; }
  .pricelist { grid-template-columns: minmax(0, 1fr); }
  .pricelist > * { padding-right: 0; }
  .pricelist > * + * { padding-left: 0; border-left: 0; border-top: 1px solid var(--rule); }
  .price { font-size: 32px; }
  .ruled tbody th { font-size: 25px; }
  .faq > summary { padding-right: 32px; font-size: 24px; text-indent: 1.5em; }
  .faq > summary::after { top: 26px; }
  .faq .n { position: absolute; left: 0; right: auto; text-indent: 0; font-size: 24px; } /* in the first line's indent */
  .colophon { padding-top: 96px; }
  .colophon > .wrap > nav { flex-direction: row; flex-wrap: wrap; gap: 6px 22px; padding-top: 28px; }
  .chapter > .wrap > .runfoot { margin-top: 84px; }
  .runfoot::before, .runfoot::after { display: none; }
}

/* the narrowest phones: a button's label keeps to one line down to 320px */
@media (max-width: 379px) {
  .btn { gap: 10px; padding-inline: 16px; letter-spacing: .06em; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* ---------- pages: welcome, changelog, privacy and terms, 404 ----------
   The four pages around the homepage. A small generator stamps the homepage's own frame - skip
   link, sprite, top bar, footer - around a content file and writes each page; every frame link is
   root-absolute, because the 404 page is served at any depth.
   <main id="main">
     <section class="chapter article" aria-labelledby="…"><div class="wrap">
       <header class="chapter-head">
         <p class="secnum" aria-hidden="true"><small>§</small>1</p>   (only where the page has more than one chapter)
         <p class="kicker">…</p> <h1 id="…">…</h1> <p class="lede">…</p>
       </header>
       … the page's matter: h2, h3, p, ul, div.summary, ol.procedure, div.cta, p.fine …
       <div class="runfoot" aria-hidden="true"><span>AITerm · …</span></div>   (last in the last chapter's wrap, as on the homepage)
     </div></section>
   </main>
   An article chapter has no figures: its matter sits in the text block (3-8) and a .procedure spans
   the page, as on the homepage. The page's first heading is its one h1; the chapter head's rule
   above names h1 and h2 alike, so it sets as a chapter's h2 does. The h2s under it are the
   article's sections and the h3s their parts. A .summary is a short passage set on the band, as a
   command is. The running foot is the homepage's, under the chapter rules above. */
main > .chapter:first-child { padding-top: 96px; }
.article > .wrap > h2 {
  margin-top: 56px; font: 500 clamp(30px, 2.6vw, 38px)/1.12 var(--display); letter-spacing: -.008em; text-wrap: balance;
}
.article > .wrap > h3 { margin-top: 36px; font: 500 22px/1.4 var(--text); }
.article > .wrap > :is(h2, h3) + * { margin-top: 12px; }
.article > .wrap > ul, .article > .wrap > ol:not(.procedure) { margin-bottom: 0; padding-left: 1.2em; }
.article ul > li + li, .article ol:not(.procedure) > li + li { margin-top: 8px; }
.article li::marker { color: var(--ink-2); }
.article > .wrap > .procedure + * { margin-top: 44px; }
.article > .wrap > .fine + .fine { margin-top: 10px; }
.summary { padding: 20px 24px 22px; background: var(--band); border-left: 2px solid var(--ink); font-size: 19px; line-height: 1.5; }
/* A mail address is one word: "support@ai-term.com" must not break at its hyphen. */
.article a[href^="mailto:"] { white-space: nowrap; }

/* A release in the revision history (the changelog), newest first:
   <section class="release">
     <h2><span class="version">0.24.2</span> <span class="release-name">Your keys stay put</span></h2>
     <p>…</p> (some releases open with a line)   <ul><li><b>…</b> …</li></ul>
   </section>
   The version hangs in the rubric like a § numeral, the name sets in the display face, the notes in
   the text face; a hairline between releases and the table's thick rule above the first. The
   earliest releases (0.4.x) have no name. The changelog's check reads the first span.version as
   the newest release. */
.chapter > .wrap > .release {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; row-gap: 14px;
  padding-top: 24px; border-top: 1px solid var(--rule);
}
.chapter > .wrap > .chapter-head + .release { border-top: 2.5px solid var(--ink); }
.release > * { grid-column: 3 / 9; margin: 0; }
.release h2 { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline; }
.release .version {
  grid-column: 1 / 3; padding-right: 6px; text-align: right;
  font: 400 clamp(30px, 3.2vw, 40px)/.9 var(--text); font-variant-numeric: lining-nums; color: var(--verm);
}
.release .release-name {
  grid-column: 3 / 9; font: 500 clamp(26px, 2.4vw, 32px)/1.15 var(--display); letter-spacing: -.008em; text-wrap: balance;
}
.release ul { padding-left: 1.1em; }
.release li { font-size: 19px; line-height: 1.5; }
.release li + li { margin-top: 10px; }

/* The errata slip's contents (the 404 page): a short ruled list of links, one to a line.
   <nav class="errata" aria-label="Contents"><p class="label">Contents</p>
     <ul role="list"><li><a href="/">Home</a></li> …</ul></nav> */
.errata .label { margin-bottom: 14px; }
.errata ul { margin: 0; padding: 0; list-style: none; border-top: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); }
.errata li { padding: 14px 0 13px; font: italic 500 26px/1.25 var(--display); }
.errata li + li { margin-top: 0; border-top: 1px solid var(--rule); }
.errata a { text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 1px; }
.errata a:hover { border-bottom-color: var(--verm); }

@media (max-width: 1100px) and (min-width: 760px) {
  .release > *, .release .release-name { grid-column: 3 / -1; }
}
@media (max-width: 759px) {
  main > .chapter:first-child { padding-top: 64px; }
  .article > .wrap > h2 { margin-top: 44px; font-size: 28px; }
  .summary { padding: 16px 16px 18px; font-size: 18px; }
  .release, .release h2 { display: block; }
  .release .version { display: block; margin-bottom: 6px; padding: 0; text-align: left; font-size: 30px; }
  .release .release-name { display: block; font-size: 26px; }
  .release h2 + * { margin-top: 12px; }
  .release li { font-size: 18px; }
  .errata li { font-size: 24px; }
}

/* ---------- handbook: the contents page and the sixteen chapters ----------
   The Handbook is generated. Each chapter wears the homepage's frame (skip link, sprite, top bar)
   and this sheet:
   <main id="main">
     <div class="chapter handbook"><div class="wrap">
       <header class="chapter-head">
         <p class="secnum" aria-hidden="true"><small>§</small>15</p>
         <p class="kicker">Automation</p> <h1>…</h1>
       </header>
       <details class="fold"><summary><span class="wide">In this handbook</span><span class="narrow">Contents</span></summary>
         <nav class="contents" aria-label="In this handbook">
           <div class="find" data-search hidden> label, input[type=search], ul.found, p.find-status </div>
           <p class="label">Basics</p> <ol role="list"><li><a href="…" aria-current="page"><span class="n">1</span> Getting Started</a></li> …</ol> …
         </nav>
       </details>
       <div class="matter"> h2 and h3 with their ids, p, ul, ol, pre > code, code </div>
       <footer class="chapter-foot">
         <nav class="turn" aria-label="Previous and next chapter"> a.prev, a.up, a.next </nav>
         <p class="imprint-line">Made by Vega LLC · <a href="/privacy.html">Privacy &amp; terms</a> · © 2026</p>
       </footer>
     </div></div>
   </main>
   The contents page has no fold: its .find and .toc sit in the text block, and its foot carries
   the imprint alone. On a wide screen the fold sits in the outer margin (10-12), level with the
   article, and where the window is tall enough to hold the whole list it stays in view while the
   reader scrolls; the script opens it there. From 1100px
   down, where this sheet's margin notes also drop below the text, it is a closed "Contents"
   button above the article, as on a phone. The details ships closed, so a phone reader without
   the script is never buried under the list. No vermilion text here is under 24px: the current
   chapter is marked with a vermilion rule, and the contents page's numerals are 26px. */
.handbook > .wrap > .fold { grid-column: 10 / 13; grid-row: 2; align-self: start; margin-top: 0; }
/* the open list is some 813px tall: it stays in view only where the window holds all of it with
   the 24px above; on a shorter screen (a laptop at 780px) it scrolls away with the chapter head
   rather than showing its top with the last chapters cut off */
@media (min-width: 1101px) and (min-height: 880px) {
  .handbook > .wrap > .fold { position: sticky; top: 24px; }
}
.handbook > .wrap > .matter { grid-column: 3 / 9; grid-row: 2; margin-top: 0; min-width: 0; }
.handbook > .wrap > .find, .handbook > .wrap > .toc { grid-column: 3 / 10; }
.handbook > .wrap > .chapter-foot { grid-column: 1 / -1; margin-top: 96px; } /* three classes: beats the chapter's 24px child spacing */

/* the contents in the margin */
.fold > summary {
  display: block; padding: 0 0 8px; list-style: none; cursor: pointer; border-bottom: 1px solid var(--ink);
  font-family: var(--sc); font-weight: 700; font-size: 15.5px; letter-spacing: .13em; text-transform: lowercase; color: var(--ink-2);
}
.fold > summary::-webkit-details-marker { display: none; }
.fold > summary:hover { color: var(--ink); }
.fold .narrow { display: none; }
.contents { padding-top: 14px; font-size: 16.5px; line-height: 1.4; }
.contents .label { margin: 18px 0 6px; }
.contents .find + .label { margin-top: 22px; }
.contents ol { margin: 0; padding: 0; list-style: none; }
.contents li + li { margin-top: 5px; }
.contents li a {
  display: grid; grid-template-columns: 1.6em minmax(0, 1fr); column-gap: 6px; align-items: baseline;
  text-decoration: none; color: var(--ink-2);
}
.contents li a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--verm); }
.contents li a[aria-current="page"] { margin-left: -12px; padding-left: 10px; border-left: 2px solid var(--verm); color: var(--ink); font-weight: 500; }
.contents .n { text-align: right; font-variant-numeric: lining-nums; }

/* the search box: hidden until the script reveals it */
.find label {
  display: block; margin: 0 0 6px; font-family: var(--sc); font-weight: 700; font-size: 15.5px;
  letter-spacing: .13em; text-transform: lowercase; color: var(--ink-2);
}
.find input {
  display: block; width: 100%; margin: 0; padding: 8px 12px 9px; font: 400 17px/1.3 var(--text); color: var(--ink);
  background: var(--paper); border: 1px solid var(--ink); border-radius: 0; appearance: none; -webkit-appearance: none;
}
.find input::-webkit-search-decoration { -webkit-appearance: none; }
.found { margin: 6px 0 0; padding: 0; list-style: none; }
.found li { border-bottom: 1px solid var(--rule); }
.found a { display: block; padding: 7px 0 8px; text-decoration: none; }
/* inside a chapter's contents every "li a" is the numbered two-column grid; a result is one block */
.contents .found li + li { margin-top: 0; }
.contents .found li a { display: block; }
.found a:hover { text-decoration: underline; text-decoration-color: var(--verm); }
.found small { display: block; font-family: var(--sc); font-weight: 700; font-size: 13.5px; letter-spacing: .12em; text-transform: lowercase; color: var(--ink-2); }
.find-status { margin-top: 6px; font-size: 15px; font-style: italic; color: var(--ink-2); }

/* the article */
.matter > * + * { margin-top: 20px; }
.matter h2 { margin-top: 56px; font: 500 clamp(30px, 2.6vw, 38px)/1.12 var(--display); letter-spacing: -.008em; text-wrap: balance; }
.matter h3 { margin-top: 36px; font: 500 22px/1.4 var(--text); }
.matter :is(h2, h3) { scroll-margin-top: 24px; } /* a deep link lands with air above its heading */
.matter :is(h2, h3) + * { margin-top: 12px; }
.matter ul, .matter ol { padding-left: 1.2em; }
.matter li + li { margin-top: 8px; }
.matter li { text-wrap: pretty; }
.matter li::marker { color: var(--ink-2); }
.matter li > strong:first-child { font-family: var(--display); font-weight: 500; font-size: 1.1em; } /* the bold-led bullet: a run-in head */
.matter pre {
  padding: 14px 18px 16px; background: var(--band); border-left: 2px solid var(--ink);
  font: 400 15px/1.55 var(--mono); white-space: pre-wrap; overflow-wrap: anywhere; /* a long line wraps in its box, never widens the page */
}
.matter pre code { font-size: inherit; font-weight: inherit; padding: 0; background: none; }
.matter :not(pre) > code { padding: 1px 5px 2px; background: var(--band); }
.matter a:hover { text-decoration-color: var(--verm); }

/* the running foot */
.chapter-foot { padding-top: 14px; border-top: 1px solid var(--ink); }
.turn { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 14px 28px; }
.turn a { text-decoration: none; font: 500 22px/1.25 var(--display); text-wrap: balance; }
.turn a:hover { text-decoration: underline; text-decoration-color: var(--verm); }
.turn .label { margin-bottom: 2px; }
.turn .prev, .turn .next { max-width: 40%; }
.turn .next { text-align: right; }
.turn .up {
  margin-inline: auto; padding-bottom: 3px; font-family: var(--sc); font-weight: 700; font-size: 16px;
  letter-spacing: .12em; text-transform: lowercase; color: var(--ink-2);
}
.imprint-line {
  margin-top: 28px; font-family: var(--sc); font-weight: 700; font-size: 16px; letter-spacing: .12em;
  text-transform: lowercase; color: var(--ink-2);
}
.imprint-line a { text-decoration: none; }
.imprint-line a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--verm); }

/* the contents page: six ruled groups, "N · Title" with a one-line description */
.toc h2 {
  margin: 44px 0 0; padding-bottom: 8px; border-bottom: 2.5px solid var(--ink);
  font-family: var(--sc); font-weight: 700; font-size: 17px; letter-spacing: .13em; text-transform: lowercase; color: var(--ink-2);
}
.toc h2:first-child { margin-top: 0; }
.toc ol { margin: 0; padding: 0; list-style: none; }
.toc li { display: grid; grid-template-columns: 2.2em minmax(0, 1fr); column-gap: 10px; align-items: baseline; padding: 14px 0 13px; }
.toc li + li { border-top: 1px solid var(--rule); }
.toc li a {
  grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; align-items: baseline;
  font: 500 26px/1.2 var(--display); text-decoration: none;
}
.toc li a:hover { text-decoration: underline; text-decoration-color: var(--verm); }
.toc .n { grid-column: 1; text-align: right; font: italic 500 26px/1.2 var(--display); color: var(--verm); }
.toc li p { grid-column: 2; margin-top: 4px; font-size: 17px; line-height: 1.45; color: var(--ink-2); }

/* the numeral: from chapter 10 it has two digits, and at 176px they fill the rubric only when the
   page is at its full width. Below that the rubric narrows with the page, so the numeral narrows
   with it and never runs into the kicker; on a phone the left-set size above stands. */
@media (min-width: 760px) {
  .handbook .secnum { font-size: min(176px, 13.8vw - 22px); }
}

@media (max-width: 1100px) {
  .handbook > .wrap > .fold, .handbook > .wrap > .matter, .handbook > .wrap > .find, .handbook > .wrap > .toc {
    grid-column: 3 / -1; grid-row: auto; position: static;
  }
  .handbook > .wrap > .matter { margin-top: 32px; }
  .fold > summary {
    display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px 2px; border: 1.25px solid var(--ink);
    font-size: 16px; color: var(--ink);
  }
  .fold[open] > summary { color: var(--paper); background: var(--ink); }
  .fold .wide { display: none; }
  .fold .narrow { display: inline; }
  .fold[open] > .contents { padding: 18px 0 8px; border-bottom: 1px solid var(--rule); }
}
@media (max-width: 759px) {
  .matter h2 { margin-top: 44px; font-size: 28px; }
  .matter pre { padding: 12px 14px 13px; font-size: 13.5px; }
  .handbook > .wrap > .chapter-foot { margin-top: 72px; }
  .turn .prev, .turn .next { max-width: none; flex-basis: 100%; text-align: left; }
  .turn .up { margin-inline: 0; }
  .toc li a, .toc .n { font-size: 24px; }
}

/* ---------- load-time anchors ----------
   The base sheet asks for smooth scrolling on the root, and in Chromium that cancels the jump to a
   #fragment on a fresh page load: a link into the middle of a page arrived at its top. Smooth
   scrolling now applies only once the reader has interacted with the page (a focused link, the
   search box), which is when it is wanted; a fresh load with a fragment jumps straight to it. The
   reduced-motion rule above still says auto with !important, so it keeps winning here. */
html { scroll-behavior: auto; }
html:focus-within { scroll-behavior: smooth; }