/* Urfael: the site's design system.
   Black, white and neutral greys, and nothing else. A white page for the hero and the reading sections, and
   full-bleed black bands for the big moments. The page's frame is drawn: hairline guides run down both edges
   of the content column through every band, a crosshair marks each place a band meets them, and grids are
   cells whose borders sit on those guides, so every edge on the page lines up with another.
   The colours are tokens that each band sets for itself (white, wash and night), and every component reads
   the tokens, so a component looks right on any band without a variant of its own.
   Type: Geist for display and text, Geist Mono for labels, read-outs and code (both OFL, see fonts/), served
   from this site, so no visitor's address goes to a third party. Outfit sets the wordmark only.
   Why Geist: one variable family carries the whole scale, from the 84px display, where it holds tight negative
   tracking without its counters closing up, down to 15px text, where its open apertures stay readable. Its
   mono is drawn on the same skeleton, so the labels and read-outs are the same voice in instrument form rather
   than a second typeface. It is the plain, engineered grotesque of the developer-tool register this site
   speaks in, with no hue or ornament to carry. And it is OFL, so it can be served from here.
   Motion touches transform, opacity and colour only, is short, and stops under reduced motion. */

@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin.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: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin.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: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-latin-ext.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-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* the arrows the site writes (← → ↗; ↓ is in the latin cut), which Google's latin cut leaves out: Geist's own
   from the same source, 1.4 and 1.3 kB, so they are drawn in Geist on every system rather than in its UI font */
@font-face {
  font-family: "Geist";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-arrows.woff2) format("woff2");
  unicode-range: U+2190, U+2192, U+2197;
}
@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/geist-mono-arrows.woff2) format("woff2");
  unicode-range: U+2192, U+2197;
}
/* the one rune the site writes, ᚢ, which neither text face carries: a one-glyph font drawn from the mark itself
   (site/fonts/build-rune.py), so every ᚢ in the text is the logo */
@font-face {
  font-family: "Urfael Rune";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/urfael-rune.woff2) format("woff2");
  unicode-range: U+16A2;
}
/* The wordmark: Outfit (OFL, see fonts/OFL-Outfit.txt), a geometric sans whose flat terminals echo the rune's level
   feet. Only the name is set in it. */
@font-face {
  font-family: "Outfit";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/assets/fonts/outfit-latin.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 ----------
   Contrast on white: ink 19.8:1, ink-2 9.7:1, muted 5.3:1. On the night band: ink 19.4:1, ink-2 11.4:1,
   muted 6.6:1. The lines and guides are decoration and carry no meaning on their own. */
:root {
  --paper: #ffffff;
  --wash: #fafafa;
  --ink: #0a0a0a;
  --ink-2: #454545;
  --muted: #6b6b6b;
  --line: #e6e6e6;
  --line-2: #cfcfcf;
  --guide: #e6e6e6;
  --cross: #a6a6a6;
  --fill: #f4f4f4;
  --fill-2: #ebebeb;
  --logo: #0e0e0f; /* the lockup's black: the mark and the name beside it */

  --sans: "Geist", "Urfael Rune", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --word: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* the frame: the content column between the two guides, and the padding inside it */
  --frame-max: 78rem;
  --edge: clamp(0.625rem, -0.2rem + 3.2vw, 2.5rem);
  --frame: min(100% - 2 * var(--edge), var(--frame-max));
  --pad: clamp(1.125rem, 0.4rem + 2.6vw, 3rem);
  /* a first column that ends a third of the way across the frame, inside a grid in the column whose gap is
     2 × --pad: its second column then starts on the same line as text in a cell of a three-cell row. With two
     equal columns and the same gap, the second starts on the half line, as in a two-cell row. */
  --col-third: calc((100% + 2 * var(--pad)) / 3 - 2 * var(--pad));
  --gap: calc(2 * var(--pad));
  --nav-h: 4rem;
  --cut: 14px;
  --radius: 6px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  --fs-display: clamp(2.75rem, 1.35rem + 4.6vw, 5.25rem);
  --fs-h1: clamp(2.4rem, 1.5rem + 3vw, 4.25rem);
  --fs-h2: clamp(2rem, 1.45rem + 1.9vw, 3.25rem);
  --fs-h3: 1.25rem;
  --fs-lede: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);
  --fs-label: 0.71875rem;
}

/* a band sets its own colours: the night band is white linework on black. On paper every band is white, so
   the night band's colours are for screens only: in print it reads the page's own tokens, and so does every
   component on it (plate.css and icons.css hold their night palettes back from print the same way) */
@media not print {
  .band-night {
    --paper: #000000;
    --wash: #0a0a0a;
    --ink: #fafafa;
    --ink-2: #bdbdbd;
    --muted: #949494;
    --line: #262626;
    --line-2: #3d3d3d;
    --guide: #262626;
    --cross: #6b6b6b;
    --fill: #141414;
    --fill-2: #1f1f1f;
    --logo: #fafafa;
    background: var(--paper);
    color: var(--ink);
    color-scheme: dark;
  }
}
.band-wash { --paper: var(--wash); background: var(--wash); }

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--sans);
  font-feature-settings: "liga" 1, "calt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
img { max-width: 100%; height: auto; }
h1, h2, h3 {
  margin: 0;
  font-family: var(--sans);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: inherit;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); line-height: 1; letter-spacing: -0.045em; }
.h1--long { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); line-height: 1.04; letter-spacing: -0.04em; }
h3 { font-size: var(--fs-h3); line-height: 1.3; letter-spacing: -0.015em; }
p, ul, ol, dl, figure { margin: 0; }
/* no last line of one word where the browser can avoid it */
p, li, dd, figcaption { text-wrap: pretty; }
strong, b { font-weight: 600; color: var(--ink); }
a {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line-2);
  text-underline-offset: 0.24em;
  transition: text-decoration-color 160ms var(--ease), color 160ms var(--ease);
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
code {
  font-family: var(--mono);
  font-size: 0.84em;
  padding: 0.12em 0.36em;
  border-radius: 4px;
  background: var(--fill);
  box-shadow: inset 0 0 0 1px var(--line);
  overflow-wrap: anywhere;
}
::selection { background: #0a0a0a; color: #ffffff; }
.band-night ::selection { background: #ffffff; color: #0a0a0a; }

.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}
.skip {
  position: absolute;
  z-index: 100;
  left: 1rem;
  top: 0.75rem;
  padding: 0.6rem 1rem;
  border-radius: var(--radius);
  background: #0a0a0a;
  color: #ffffff;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-250%);
}
.skip:focus { transform: none; color: #ffffff; }

.wrap { width: var(--frame); margin-inline: auto; padding-inline: var(--pad); }
.rune { font-family: "Urfael Rune", var(--sans); font-weight: 400; letter-spacing: 0; }

/* the eyebrow: the site's mono voice, as in the table heads, the plates' corners and the footer's headings */
.eyebrow {
  font: 500 var(--fs-label)/1.4 var(--mono);
  text-wrap: balance;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- the frame ----------
   Every band draws its stretch of the two guides, so they run unbroken from the header to the footer, in
   the band's own line colour. A band that starts a new part of the page also draws a hairline across its top
   and a crosshair where that line meets each guide. */

:is(.site-header, .hero, .section, .page-head, .status, .lost, .site-footer, .doc-band) { position: relative; }
:is(.site-header, .hero, .section, .page-head, .status, .lost, .site-footer, .doc-band)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  width: var(--frame);
  margin-inline: auto;
  border-inline: 1px solid var(--guide);
  pointer-events: none;
}
:is(.hero, .section, .page-head, .status, .lost, .site-footer) > * { position: relative; z-index: 1; }
/* the sheet's index: on a page that opens with a hero, each section after it numbers itself, small, in the
   corner where its top meets the left guide, like the zones of a drawing (muted: 5.3:1 on white, 6.6:1 on black).
   Only a <section> is a zone: a coda set as a div.section, like the strip that closes /assistant, keeps the
   section's spacing and guides but no number */
main:has(> .hero) { counter-reset: sheet; }
main:has(> .hero) > section.section { counter-increment: sheet; }
main:has(> .hero) > section.section::before {
  content: counter(sheet, decimal-leading-zero);
  content: counter(sheet, decimal-leading-zero) / "";
  padding: 0.65rem 0.7rem;
  font: 500 var(--fs-label)/1 var(--mono);
  letter-spacing: 0.08em;
  color: var(--muted);
}
.rule-top, .band-night, .band-wash, .site-footer { border-top: 1px solid var(--line); }
/* on screen the black band is its own edge; on paper it keeps the rule, like any other band */
@media not print {
  .band-night { border-top-color: var(--paper); }
  .band-night + :not(.band-night) { border-top-color: transparent; }
}
.rule-top::after, .band-night::after, .band-wash::after, .site-footer::after, .status::after {
  content: "";
  position: absolute;
  z-index: 2;
  top: -6px;
  left: 0;
  right: 0;
  width: calc(var(--frame) + 11px);
  height: 11px;
  margin-inline: auto;
  pointer-events: none;
  background:
    linear-gradient(var(--cross), var(--cross)) 0 5px / 11px 1px no-repeat,
    linear-gradient(var(--cross), var(--cross)) 5px 0 / 1px 11px no-repeat,
    linear-gradient(var(--cross), var(--cross)) 100% 5px / 11px 1px no-repeat,
    linear-gradient(var(--cross), var(--cross)) calc(100% - 5px) 0 / 1px 11px no-repeat;
}

/* cells: a grid that reaches both guides, its borders drawn on them, and padded like the column, so text in a
   cell starts exactly where text outside one does */
.cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  margin-inline: calc(-1 * var(--pad));
}
.cell { min-width: 0; padding: var(--pad); }
.cells > * + * { border-top: 1px solid var(--line); }
@media (min-width: 56rem) {
  .cells--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cells--third { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  :is(.cells--2, .cells--third) > * + * { border-top: 0; border-left: 1px solid var(--line); }
  /* a crosshair where the divider meets the band's edge: below the hero, above every other pair */
  :is(.cells--2, .cells--third) { position: relative; }
  :is(.cells--2, .cells--third)::after {
    content: "";
    position: absolute;
    z-index: 3;
    top: -6px;
    left: calc(50% - 5px);
    width: 11px;
    height: 11px;
    pointer-events: none;
    background:
      linear-gradient(var(--cross), var(--cross)) 0 5px / 11px 1px no-repeat,
      linear-gradient(var(--cross), var(--cross)) 5px 0 / 1px 11px no-repeat;
  }
  .cells--third::after { left: calc(100% / 3 - 5px); }
  .hero__grid::after { top: auto; bottom: -6px; }
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--nav-h);
  background: #ffffff;
  border-bottom: 1px solid #e6e6e6;
}
.site-header__in { position: relative; z-index: 1; height: 100%; display: flex; align-items: center; gap: 1rem; }
/* The lockup: the mark and the name, in one colour, the lockup's own (--logo), so it turns white on a night band.
   Every size is in em of the name. The mark's box is 4/3 em, so its nominal height, y 16 to 112 of 128, is 1 em, and
   it sits on the name's baseline: align on the baseline, then drop the box by its empty bottom, 16 of 128. The gap
   leaves 40 units (0.4167 em) of air from the foot to the U, the width of the mark's own counter at the baseline,
   less the 0.25 em the box holds right of the foot and the U's 0.0625 em side bearing. The box holds a third of an em
   left of the stem too, so the lockup steps back by it and the stem stands on the text line. Keep 0.5 em clear round
   the ink. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.104em;
  margin-left: -0.3333em;
  font: 600 1.3rem/1 var(--word);
  letter-spacing: -0.01em;
  color: var(--logo);
}
/* the box is rounded to whole pixels: a browser draws the box from a whole pixel and the name on a whole-pixel
   baseline, so a box of 27.7 px (the header's) set the feet 0.7 px below the name's in Chromium */
.brand .mark { width: 1.3333em; height: 1.3333em; flex: none; transform: translateY(12.5%); }
@supports (width: round(1em, 1px)) {
  .brand { margin-left: calc(round(4em / 3, 1px) / -4); }
  .brand .mark { width: round(4em / 3, 1px); height: round(4em / 3, 1px); }
}
/* in the header the lockup is the home link: a 2.75rem target with its ink, apex to baseline, centred in it. Its line
   holds 0.292 em above the apex and 0.136 em below the baseline, so the bottom padding evens the two. */
.site-header .brand {
  flex: none;
  flex-wrap: wrap;
  align-content: center;
  min-height: 2.75rem;
  padding-bottom: 0.156em;
  text-decoration: none;
}
.site-nav { margin-left: auto; }
.site-nav ul { display: flex; align-items: center; gap: 0.125rem; list-style: none; margin: 0; padding: 0; }
.site-nav a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.3em;
  min-height: 2.25rem;
  padding: 0 0.8rem;
  border-radius: var(--radius);
  color: #5c5c5c;
  font: 500 0.875rem/1 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  transition: color 160ms var(--ease), background-color 160ms var(--ease);
}
.site-nav a:hover { color: #0a0a0a; }
/* the page you are on: its name in black, and a black rule over the header's own bottom line beneath it */
.site-nav a[aria-current="page"] { color: #0a0a0a; }
.site-nav a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: calc((2.25rem - var(--nav-h)) / 2 - 0.5px);
  height: 1px;
  background: #0a0a0a;
}
.site-nav .ext { font-size: 0.85em; opacity: 0.7; }
/* the last item, GitHub, is the header's one button */
.site-nav li:last-child a { margin-left: 0.5rem; padding-inline: 0.95rem; background: #0a0a0a; color: #ffffff; }
.site-nav li:last-child a:hover { background: #2e2e2e; color: #ffffff; }
.site-nav li:last-child .ext { opacity: 0.8; }
.menu-btn { display: none; }

@media (max-width: 47.99rem) {
  .site-header .brand { font-size: 1.22rem; }
  .site-nav ul { overflow-x: auto; }
  .js .menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    min-height: 2.75rem;
    padding: 0 0.95rem 0 0.85rem;
    border: 1px solid #cfcfcf;
    border-radius: var(--radius);
    background: #ffffff;
    color: #0a0a0a;
    font: 500 0.9375rem/1 var(--sans);
    cursor: pointer;
  }
  .menu-btn__bars, .menu-btn__bars::before, .menu-btn__bars::after {
    display: block;
    width: 0.95rem;
    height: 1.5px;
    background: currentColor;
    transition: transform 200ms var(--ease), opacity 200ms;
  }
  .menu-btn__bars { position: relative; }
  .menu-btn__bars::before, .menu-btn__bars::after { content: ""; position: absolute; left: 0; }
  .menu-btn__bars::before { transform: translateY(-4px); }
  .menu-btn__bars::after { transform: translateY(4px); }
  .site-header[data-open] .menu-btn__bars { background: transparent; }
  .site-header[data-open] .menu-btn__bars::before { transform: rotate(45deg); }
  .site-header[data-open] .menu-btn__bars::after { transform: rotate(-45deg); }
  /* the panel's side borders lie on the guides, so its padding is the column's less that 1px: the links and
     their rules start on the page's text line */
  .js .site-nav {
    display: none;
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    padding: 0.5rem calc(var(--pad) - 1px) 1.25rem;
    background: #ffffff;
    border: 1px solid #e6e6e6;
    border-top: 0;
  }
  .js .site-header[data-open] .site-nav { display: block; }
  .js .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; overflow: visible; }
  .js .site-nav li + li { border-top: 1px solid #ededed; }
  .js .site-nav a { min-height: 3.25rem; padding: 0; border-radius: 0; font-size: 1.0625rem; color: #0a0a0a; background: none; }
  .js .site-nav a[aria-current="page"] { background: none; text-decoration: underline; text-decoration-color: #0a0a0a; text-underline-offset: 0.35em; }
  .js .site-nav a[aria-current="page"]::after { display: none; }
  .js .site-nav li:last-child { border-top: 0; margin-top: 0.75rem; }
  .js .site-nav li:last-child a { justify-content: center; margin: 0; border-radius: var(--radius); }
}

/* ---------- buttons, links, chips ---------- */

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
/* buttons and arrow links lay out their label as text, so a robot-name span inside one sits in the sentence */
.btn {
  display: inline-block;
  min-height: 2.75rem;
  padding: 0.75rem 1.15rem;
  text-align: center;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font: 500 0.9375rem/1.2 var(--sans);
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms var(--ease), border-color 160ms var(--ease), color 160ms var(--ease);
}
.btn--primary { background: var(--ink); color: var(--paper); }
.btn--primary:hover { background: var(--ink-2); color: var(--paper); }
.band-night .btn--primary:hover { background: #d9d9d9; }
.btn--quiet { border-color: var(--line-2); color: var(--ink); background: transparent; }
.btn--quiet:hover { border-color: var(--ink); color: var(--ink); }
.link-arrow {
  display: inline-block;
  /* the inline padding gives the keyboard ring room round the words; the margin puts the words back on the line */
  padding: 0.6rem 0.25rem;
  margin-inline: -0.25rem;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: transparent;
}
.link-arrow:hover { text-decoration-color: currentColor; }
/* the arrow follows its last word with no space between, so an underline ends on the last letter and the arrow
   never wraps alone; its margin is the space it replaces */
.arr { display: inline-block; margin-left: 0.55em; transition: transform 200ms var(--ease); }
a:hover .arr { transform: translateX(3px); }
.micro { font-size: 0.875rem; line-height: 1.55; color: var(--muted); max-width: 34rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  padding: 0.38rem 0.6rem 0.38rem 0.55rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font: 500 var(--fs-label)/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
/* a shape, not a colour: a full dot for what is available now, a ring for research */
.chip::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--ink); }
.chip--research::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--ink); }

/* ---------- sections ---------- */

.section { padding-block: clamp(4rem, 2.6rem + 5vw, 7.5rem); }
.section--flush-top { padding-top: 0; }
.section--tight { padding-block: clamp(3rem, 2rem + 3.5vw, 5.5rem); }
.section--cells { padding-block: 0; }
.head { max-width: 46rem; margin-bottom: clamp(2.25rem, 1.6rem + 2.2vw, 4rem); }
.head__intro { margin-top: 1.25rem; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); max-width: 42rem; }
.head--icon { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 1.5rem; }
.head--icon .head__text { max-width: 48rem; }
.head__icon .icon { display: block; width: clamp(4.5rem, 3.5rem + 3vw, 7rem); height: auto; }
/* on a phone the icon goes above the heading, so the intro gets the full width */
@media (max-width: 47.99rem) {
  .head--icon { grid-template-columns: minmax(0, 1fr); }
  .head--icon .head__icon { order: -1; }
}
.prose { color: var(--ink-2); }
.prose > * + * { margin-top: 1em; }
.big, .prose--big p { font-size: var(--fs-lede); line-height: 1.55; }
.cols { display: grid; gap: 1.25rem var(--gap); margin-top: clamp(1.75rem, 1.5rem + 1vw, 2.5rem); }
@media (min-width: 56rem) { .cols { grid-template-columns: 1fr 1fr; } }
/* an aside and its text: the text starts on the third line */
.split { display: grid; gap: 1.5rem var(--gap); }
@media (min-width: 56rem) {
  .split { grid-template-columns: var(--col-third) minmax(0, 1fr); }
  .split__aside { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; }
}
.split__aside h2 { font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); }
.split__aside .link-arrow { margin-top: 0.9rem; }
.split__icon .icon { display: block; width: clamp(5rem, 4rem + 4vw, 8rem); height: auto; margin-top: 1.5rem; }
.fineprint { margin-top: 2rem; font-size: 0.8125rem; color: var(--muted); max-width: 52rem; }

/* links as a row of small bordered tabs, each with an arrow */
.links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: clamp(1.5rem, 1.25rem + 1vw, 2.25rem); padding: 0; list-style: none; }
.links--tight { margin-top: 1.1rem; }
.links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 2.75rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
}
.links a::after { content: "→"; content: "→" / ""; color: var(--muted); transition: transform 200ms var(--ease), color 160ms var(--ease); }
.links a:hover { border-color: var(--ink); }
.links a:hover::after { transform: translateX(3px); color: var(--ink); }

/* ---------- sheets: a table set between two rules that run from guide to guide ----------
   No box: the guides are its sides, and its first and last columns start and end where the column's text does. */

.sheet { margin-inline: calc(-1 * var(--pad)); border-block: 1px solid var(--line-2); }
.sheet__in--table :is(th, td):first-child { padding-left: var(--pad); }
.sheet__in--table :is(th, td):last-child { padding-right: var(--pad); }
/* on a wide screen the columns are the page's own: every cell pads its left like a grid cell, the first column
   ends on the third line, a three-column table is in thirds and the comparison in quarters, so each column's
   text starts on a line the grids, splits and footer already use. Phones keep the sideways scroll. */
@media (min-width: 56rem) {
  .sheet__in--table table { table-layout: fixed; }
  .sheet__in--table :is(th, td) { padding-left: var(--pad); padding-right: 0; }
  .sheet__in--table :is(th, td):last-child { padding-right: var(--pad); }
  .sheet__in--table :is(th, td):first-child { width: calc(100% / 3); }
  .table--tests :is(th, td):last-child { width: calc(100% / 3); }
  .compare :is(th, td), .compare :is(th, td):first-child { width: 25%; }
}

/* ---------- hero ---------- */

.hero { padding-block: 0; }
.hero__grid { align-items: stretch; }
/* on a wide screen the hero fills the first screen but for a sliver, so the night band below says there is more */
@media (min-width: 56rem) { .hero__grid { min-height: min(calc(100svh - var(--nav-h) - 3.5rem), 60rem); } }
.hero__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: clamp(3rem, 2rem + 4vw, 6rem);
}
@media (min-width: 56rem) { .hero__copy { padding-right: clamp(2rem, 1rem + 2vw, 3.5rem); } }
.hero h1 { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.05em; }
.hero .h1--long { font-size: var(--fs-h1); line-height: 1.02; letter-spacing: -0.045em; }
.eyebrow { display: flex; align-items: center; gap: 0.7em; margin-bottom: 1.75rem; }
.eyebrow .rune { font-size: 1.5em; line-height: 1; color: var(--ink); }
.hero .lede { margin-top: 1.75rem; max-width: 33rem; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); letter-spacing: -0.005em; }
.hero__more { margin-top: 1rem; max-width: 33rem; color: var(--muted); }
.hero .actions { margin-top: 2.25rem; }
.hero .micro { margin-top: 1.5rem; }
.hero__plate { width: 100%; }
/* on a phone the hero's buttons share the row, or take one each, edge to edge */
@media (max-width: 30rem) { .hero .actions .btn { flex: 1 1 auto; } }

/* the figure's caption, and the speech bubble that rides in it */
.plate-cap { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1rem; margin-top: 1rem; color: var(--muted); font-size: 0.875rem; }
.bubble {
  position: relative;
  display: inline-block;
  padding: 0.45rem 0.8rem;
  border-radius: var(--radius);
  background: var(--ink);
  color: var(--paper);
  font: 500 0.9375rem/1.3 var(--sans);
  transform-origin: 1.25rem 0;
}
/* the tail points up at the drawing */
.bubble::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: -5px;
  width: 10px;
  height: 10px;
  background: inherit;
  transform: rotate(45deg);
}
@keyframes bubble-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.js .bubble[data-bubble] { opacity: 0; }
.js .bubble[data-bubble].is-said { opacity: 1; animation: bubble-pop 280ms var(--ease) both; }
.bubble.is-popping { animation: bubble-pop 280ms var(--ease) both; }
.hello-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  background: var(--paper);
  color: var(--ink);
  font: 500 0.9375rem/1.2 var(--sans);
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}
.hello-btn:hover { border-color: var(--ink); }
.plate-cap--hello .plate-cap__note { flex-basis: 100%; }

/* ---------- home ---------- */

/* a feature: the copy in one cell, the figure in the other, alternating sides */
.feature__text { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem); }
.feature__text h3 { font-size: clamp(2rem, 1.5rem + 1.6vw, 2.875rem); line-height: 1.04; letter-spacing: -0.04em; margin-top: 0.5rem; }
.feature__text p:not(.chip) { max-width: 30rem; color: var(--ink-2); font-size: 1.0625rem; }
.feature__text .link-arrow { margin-top: 0.25rem; }
@media (min-width: 56rem) {
  .feature--flip > .feature__text { order: 2; border-left: 1px solid var(--line); }
  .feature--flip > .plate { order: 1; border-left: 0; }
  .feature__text { padding-right: clamp(2rem, 1rem + 3vw, 4.5rem); }
}
.shapes { padding-bottom: 0; }
.shapes .head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); }
.shapes .feature { border-top: 1px solid var(--line); }

.why__text { display: flex; flex-direction: column; justify-content: center; }
.why__text h2 { margin-bottom: 1.75rem; }
.why__text h2 .rune { font-weight: 400; }
.why__text .prose { font-size: var(--fs-lede); line-height: 1.55; max-width: 36rem; }
.why__text .prose p:first-child { color: var(--ink); }
.specimen { display: grid; justify-items: center; align-content: center; gap: 2rem; padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.specimen__mark { position: relative; width: min(100%, 17rem); aspect-ratio: 1; }
.specimen__guides, .specimen__logo { position: absolute; display: block; }
.specimen__guides { inset: 0; width: 100%; height: 100%; overflow: visible; }
.specimen__logo { inset: 15%; width: 70%; height: 70%; color: var(--logo); }
.specimen__cap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  font: 500 var(--fs-label)/1.4 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.specimen__name { color: var(--ink); }
.specimen__name .rune { font-size: 1.4em; vertical-align: -0.12em; }

/* a ledger: an icon beside each entry, hairlines between */
.ledger { list-style: none; margin: 0; padding: 0; }
.ledger > li {
  display: grid;
  grid-template-columns: 4rem minmax(0, 1fr);
  grid-template-areas: "icon title" "icon text";
  align-content: start;
  column-gap: 1.25rem;
  row-gap: 0.4rem;
  padding-block: 1.4rem;
  border-top: 1px solid var(--line);
}
.ledger > li:first-child { border-top: 0; padding-top: 0.2rem; }
.ledger > li:last-child { padding-bottom: 0.2rem; }
.ledger :is(.icon, .u-icon) { grid-area: icon; width: 4rem; height: 4rem; }
.ledger h3 { grid-area: title; align-self: end; font-size: 1.125rem; }
.ledger p { grid-area: text; color: var(--ink-2); }
@media (min-width: 48rem) {
  .ledger > li { grid-template-columns: 5rem minmax(0, 1fr); column-gap: 1.75rem; padding-block: 1.6rem; }
  .ledger :is(.icon, .u-icon) { width: 5rem; height: 5rem; }
}

/* a grid of cells: one line between every pair, drawn by the 1px gaps over the line colour, the outer edges on the guides */
.grid-cells {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1px;
  margin: 0 calc(-1 * var(--pad));
  padding: 0;
  list-style: none;
  background: var(--line);
  border-block: 1px solid var(--line);
}
.grid-cells > li { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.5rem, 1rem + 1.6vw, 2.5rem) var(--pad); background: var(--paper); }
.grid-cells .icon { width: 4.5rem; height: 4.5rem; margin: -0.25rem 0 0.9rem -0.25rem; }
.grid-cells h3 { font-size: 1.125rem; }
.grid-cells p { color: var(--ink-2); font-size: 1rem; }
@media (min-width: 48rem) { .grid-cells { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .grid-cells:not(.grid-cells--2) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* a section whose cells run to the next section's rule, which closes them */
.section--to-rule { padding-bottom: 0; }
.section--to-rule .grid-cells { border-bottom: 0; }

/* the principles: a spec sheet whose rows run guide to guide, its columns on the quarter lines */
.rows { list-style: none; margin: 0 calc(-1 * var(--pad)); padding: 0; border-top: 1px solid var(--line); counter-reset: row; }
.rows > li:last-child { border-bottom: 0; }
.principles { padding-bottom: 0; }
.rows > li {
  counter-increment: row;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-areas: "icon title" "text text";
  align-items: center;
  gap: 0.9rem 1.25rem;
  padding: 1.5rem var(--pad);
  border-bottom: 1px solid var(--line);
}
.rows .icon { grid-area: icon; width: 3.5rem; height: 3.5rem; }
.rows h3 { grid-area: title; font-size: 1.1875rem; }
.rows p { grid-area: text; color: var(--ink-2); max-width: 40rem; }
@media (min-width: 56rem) {
  .rows > li {
    position: relative;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 2fr);
    grid-template-areas: "icon title text";
    gap: 0;
    padding: 0;
  }
  .rows > li > * { padding: 1.75rem var(--pad); }
  .rows .icon { box-sizing: content-box; width: 4.5rem; height: 4.5rem; padding-block: 1.25rem; justify-self: end; }
  .rows h3 { align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--line); }
  .rows p { align-self: stretch; display: flex; align-items: center; border-left: 1px solid var(--line); max-width: none; }
  /* the row's number, in the corner of its first cell */
  .rows > li::before {
    content: counter(row, decimal-leading-zero);
    content: counter(row, decimal-leading-zero) / "";
    position: absolute;
    top: 50%;
    left: var(--pad);
    translate: 0 -50%;
    font: 500 var(--fs-label)/1 var(--mono);
    letter-spacing: 0.08em;
    color: var(--muted);
  }
}

.open > .cell { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.open__title { display: flex; flex-direction: column; align-items: flex-start; gap: 2rem; }
.open__title .icon { display: block; width: 5rem; height: 5rem; margin-left: -0.25rem; }
.open__body { display: flex; flex-direction: column; gap: 1.75rem; }
.open__body p { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 36rem; }
/* stacked on a phone, the two cells read as one block: the icon goes above the heading, as in Install, and the
   text follows the heading with no rule between */
@media (max-width: 55.99rem) {
  .open__title { gap: 1.5rem; }
  .open__title .icon { order: -1; }
  .open > .cell:first-child { padding-bottom: 1.25rem; }
  .open > .cell + .cell { border-top: 0; padding-top: 0; }
}

/* the closing call: the page's last word, on the night band */
.cta { padding-block: clamp(5rem, 3rem + 7vw, 10rem); }
.cta__in { display: grid; gap: 2.5rem var(--gap); align-items: end; }
.cta h2 { font-size: var(--fs-display); line-height: 0.98; letter-spacing: -0.05em; max-width: 14ch; }
.cta__copy { display: grid; gap: 2rem; justify-items: start; }
.cta__head { display: grid; gap: 2rem; justify-items: start; }
.cta__icon svg { display: block; width: clamp(5rem, 4rem + 3vw, 7rem); height: auto; }
.cta__copy > p:first-child { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 32rem; }
.cta .micro { max-width: 30rem; }
@media (min-width: 64rem) { .cta__in { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

/* ---------- assistant ---------- */

.shot { display: grid; gap: 1rem var(--gap); align-items: end; margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.75rem); }
.shot img { display: block; width: 100%; height: auto; border-radius: 8px; border: 1px solid var(--line-2); background: #0a0a0a; }
.shot figcaption { font-size: 0.9375rem; color: var(--muted); max-width: 26rem; }
.shot__title { display: block; margin-bottom: 0.4rem; font: 600 1.25rem/1.3 var(--sans); letter-spacing: -0.02em; color: var(--ink); }
@media (min-width: 60rem) { .shot { grid-template-columns: minmax(0, 1fr) var(--col-third); } }

.table-wrap { overflow-x: auto; overscroll-behavior-x: contain; }
.table-wrap:focus-visible { outline-offset: -3px; }
table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
th, td { padding: 0.95rem 0.9rem; text-align: left; vertical-align: top; }
thead th {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line-2);
  font: 500 var(--fs-label)/1.35 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
thead th code { text-transform: none; letter-spacing: 0; font-size: 1em; }
tbody tr + tr > * { border-top: 1px solid var(--line); }
tbody th { font-weight: 600; min-width: 10rem; }
td { color: var(--ink-2); }
.table--tests { min-width: 34rem; }
.table--tests code { white-space: nowrap; }
/* on a phone the wide tables scroll sideways, and iOS hides the scrollbar: say so above them (silent to screen readers, whose table is whole) */
@media (max-width: 47.99rem) {
  .sheet__in--table:has(> .table-wrap > :is(.compare, .table--tests))::before {
    content: "Scroll sideways for every column \2192";
    content: "Scroll sideways for every column \2192" / "";
    display: block;
    padding: 0.85rem var(--pad) 0.2rem;
    font: 500 0.6875rem/1.3 var(--mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
  }
}

.tilde-list, .check-list { list-style: none; margin: 0; padding: 0; }
.tilde-list li, .check-list li { position: relative; padding: 1.05rem 0 1.05rem 2.25rem; border-top: 1px solid var(--line); color: var(--ink-2); }
.tilde-list li:first-child, .check-list li:first-child { border-top: 0; padding-top: 0.25rem; }
.tilde-list li strong, .tilde-list li b, .check-list li b { color: var(--ink); }
/* "lightly tested": a short dash, open; "solid": a filled square with a tick */
.tilde-list li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 1.85rem;
  width: 1rem;
  height: 1px;
  background: var(--ink);
}
.tilde-list li:first-child::before { top: 1.05rem; }
.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.3rem;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 3px;
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 80% no-repeat;
}
.check-list li:first-child::before { top: 0.5rem; }

.more { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.more a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  /* the label is one span, so the arrow is the only other item */
  min-height: 3.5rem;
  padding: 1.05rem 0.25rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 1.0625rem;
  text-decoration: none;
}
.more a strong { color: var(--ink); }
.more a::after { content: "→"; content: "→" / ""; flex: none; color: var(--ink); transition: transform 200ms var(--ease); }
.more a:hover { color: var(--ink); }
.more a:hover::after { transform: translateX(4px); }

.band-night code { background: var(--fill); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); }
.band-night .micro, .band-night .prose { color: var(--ink-2); }
.band-night .micro { color: var(--muted); }
.install { display: grid; gap: 2.5rem; }
.install > * { min-width: 0; }
@media (min-width: 60rem) { .install { grid-template-columns: var(--col-third) minmax(0, 1fr); gap: 2.5rem var(--gap); } }
/* a short command in a sentence stays on one line */
.install__steps p code { white-space: nowrap; }
.install__icon svg { display: block; width: clamp(5rem, 4.25rem + 2.5vw, 7rem); height: auto; margin-bottom: 1.5rem; }
.install__text h2 { margin-bottom: 1.25rem; }
.install__steps { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.1rem; align-content: start; color: var(--ink-2); }
.install__steps .actions { margin-top: 0.75rem; }
/* a code block: its Copy button sits above the commands, so a long line never runs under it */
.code { display: flex; flex-direction: column; border: 1px solid var(--line-2); border-radius: 8px; background: var(--wash); }
.code pre:focus-visible { outline-offset: -3px; border-radius: 6px; }
.code pre { margin: 0; padding: 0.5rem 1.25rem 1.15rem; overflow-x: auto; font: 400 0.875rem/1.75 var(--mono); color: var(--ink); }
.code pre code { padding: 0; background: none; box-shadow: none; font-size: inherit; overflow-wrap: normal; }
.code .c { color: var(--muted); }
.copy {
  align-self: flex-end;
  margin: 0.5rem 0.5rem 0 0;
  min-height: 2.25rem;
  min-width: 4.5rem;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
  font: 500 var(--fs-label)/1.2 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}
.copy:hover { border-color: var(--ink); }

/* the last word on /assistant: a strip between two rules that run guide to guide, Uru peeking in past the left guide */
.section--peek { padding-block: 0 clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.peek {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 1.5rem;
  margin-inline: calc(-1 * var(--pad));
  padding: 1.5rem var(--pad) 1.5rem 0;
  border-bottom: 1px solid var(--line);
}
.peek__uru { grid-row: span 2; align-self: end; margin: 0 0 -2.4rem -1.3rem; }
.peek__uru .icon { display: block; width: 7.5rem; height: 7.5rem; transform: rotate(9deg); }
.peek__text { font-size: 1.0625rem; color: var(--ink-2); }
@media (min-width: 48rem) {
  .peek { grid-template-columns: auto minmax(0, 1fr) auto; }
  .peek__uru { grid-row: auto; }
}

/* ---------- Uru ---------- */

/* the status: a spec strip of mono keys and plain values, its cells on the guides */
.status { padding-block: 0; border-block: 1px solid var(--line); }
.tag { margin-inline: calc(-1 * var(--pad)); }
.tag__in { display: grid; }
.tag__hole { display: none; }
.tag__head { display: flex; align-items: center; gap: 0.9rem; padding: 1.5rem var(--pad); border-bottom: 1px solid var(--line); }
.tag__head .icon { width: 2.5rem; height: 2.5rem; flex: none; }
.h-small { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.015em; }
.tag__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; }
.tag__list > div { padding: 1.25rem var(--pad); border-bottom: 1px solid var(--line); }
.tag__list > div:nth-child(odd):not(.tag__wide) { border-right: 1px solid var(--line); }
.tag__list dt { font: 500 var(--fs-label)/1.35 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; }
.tag__list dd { margin: 0.45rem 0 0; font: 500 1.0625rem/1.3 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.tag__wide { grid-column: 1 / -1; border-bottom: 0 !important; }
@media (min-width: 60rem) {
  .tag__in { grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); }
  .tag__head { border-bottom: 0; border-right: 1px solid var(--line); }
  .tag__list { grid-template-columns: repeat(4, minmax(0, 1fr)) minmax(0, 1.75fr); }
  .tag__list > div { border-bottom: 0; border-right: 1px solid var(--line); padding: 1.5rem 1.4rem; }
  .tag__list > div:last-child { padding-right: var(--pad); }
  .tag__list > div:last-child { border-right: 0; }
  .tag__wide { grid-column: auto; }
}

/* the goals: the study in a third, the five goals in two thirds, rows ruled from the divider to the guide */
.goals-band { padding-bottom: 0; }
.goals { border-top: 1px solid var(--line); }
.goals__list { padding: 0; }
.goals__list .ledger > li { padding: 1.6rem var(--pad); }
/* beside the study the five rows share its height */
@media (min-width: 56rem) {
  .goals__list .ledger { height: 100%; display: grid; grid-auto-rows: 1fr; }
  .goals__list .ledger > li { align-content: center; }
}
.goals__list .ledger p { max-width: 36rem; }

.wont { list-style: none; margin: 0; padding: 0; }
.wont li { position: relative; padding: 1rem 0 1rem 2.4rem; border-top: 1px solid var(--line); font-size: 1.0625rem; color: var(--ink-2); }
.wont li:first-child { border-top: 0; padding-top: 0.2rem; }
/* a quiet "no": a ring with a slash, in ink */
.wont li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 1.35rem;
  height: 1.35rem;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9.5' fill='none' stroke='%230a0a0a' stroke-width='1.5'/%3E%3Cpath d='M5.6 18.4L18.4 5.6' stroke='%230a0a0a' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.wont li:first-child::before { top: 0.35rem; }
.callout {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 1.25rem;
  margin-top: 2rem;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--ink);
  border-radius: var(--radius);
  background: var(--paper);
  font-size: 1.0625rem;
}
.callout__icon .icon { display: block; width: 4.5rem; height: 4.5rem; }
@media (max-width: 30rem) { .callout { grid-template-columns: minmax(0, 1fr); justify-items: start; } }

.questions { list-style: none; padding: 0; display: grid; gap: 0; border-top: 1px solid var(--line); }
.questions li { position: relative; padding: 1rem 0 1rem 2.5rem; border-bottom: 1px solid var(--line); font: 500 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.4 var(--sans); letter-spacing: -0.01em; color: var(--ink); }
.questions li::before {
  content: "?";
  content: "?" / "";
  position: absolute;
  left: 0;
  top: 1.05rem;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  font: 500 0.8125rem/1.4rem var(--mono);
  text-align: center;
  color: var(--ink);
}

/* same rune, same rules: the two marks in a third, the words in two thirds */
.same > .cell { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.same__icons { display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
.same__icons .icon { display: block; width: clamp(5rem, 4rem + 3.5vw, 7.5rem); height: auto; }
.same__amp { font: 400 1.75rem/1 var(--mono); color: var(--muted); }
.same__text h2 { margin-bottom: 1.25rem; }
.same__text p { color: var(--ink-2); max-width: 42rem; }
.same__text .link-arrow { margin-top: 0.5rem; }


/* questions and answers that open in place */
.qa { border-top: 1px solid var(--line-2); }
.qa details { border-bottom: 1px solid var(--line-2); }
.qa summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  min-height: 3.5rem;
  padding: 1.15rem 0.1rem;
  cursor: pointer;
  list-style: none;
  font: 500 clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem)/1.35 var(--sans);
  letter-spacing: -0.01em;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 0.7rem 1.5px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 1.5px 0.7rem no-repeat;
  transition: transform 200ms var(--ease), border-color 160ms var(--ease);
}
.qa details[open] summary::after { background: linear-gradient(var(--ink), var(--ink)) center / 0.7rem 1.5px no-repeat; transform: rotate(180deg); }
.qa summary:hover::after { border-color: var(--ink); }
.qa .ans { max-width: 48rem; padding: 0 0 1.5rem; color: var(--ink-2); }
.qa .ans > * + * { margin-top: 0.8em; }
.qa--page .ans { max-width: 52rem; }

/* ---------- content pages: FAQ, compare, what's tested ---------- */

.page-head { padding-block: clamp(3rem, 2rem + 4vw, 6rem) clamp(2.25rem, 1.5rem + 2.5vw, 3.5rem); }
.page-head h1 { font-size: var(--fs-h1); max-width: 18ch; }
.page-head .lede { margin-top: 1.5rem; max-width: 46rem; font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-2); }
.compare { min-width: 40rem; }
.compare tbody th { min-width: 12rem; }
.compare td.y { color: var(--ink); font-weight: 600; }
.compare td.w { color: var(--ink-2); }
.compare td.n { color: var(--muted); }
/* a shape, not a colour: full, half and empty */
.compare td::before { content: ""; display: inline-block; width: 0.6em; height: 0.6em; margin-right: 0.5em; border-radius: 50%; vertical-align: 0.02em; }
.compare td.y::before { background: var(--ink); }
.compare td.w::before { background: linear-gradient(90deg, var(--ink-2) 50%, transparent 50%); box-shadow: inset 0 0 0 1.5px var(--ink-2); }
.compare td.n::before { box-shadow: inset 0 0 0 1.5px var(--muted); }
.mono { font-family: var(--mono); font-size: 0.875em; }
.table-note { margin-top: 1.25rem; max-width: 48rem; font-size: 0.875rem; color: var(--muted); }
.xlink { margin-top: 1.75rem; font-weight: 500; }
/* the columns are the wrap's own: it gives up its padding so they reach the guides, and pad themselves like cells */
.maturity { display: grid; gap: 2.5rem 0; padding-inline: 0; }
.maturity__col { padding: 1.5rem var(--pad) 0; border-top: 1px solid var(--ink); }
/* the maturity line, drawn down the middle: a hairline on the half line between the two columns */
@media (min-width: 60rem) {
  .maturity { grid-template-columns: 1fr 1fr; }
  .maturity__col + .maturity__col { border-left: 1px solid var(--line); }
}
.maturity__h { margin-bottom: 1.25rem; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.75rem); }
.closing { margin-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); max-width: 48rem; font-size: var(--fs-lede); line-height: 1.55; }

/* ---------- 404 ---------- */

.lost { padding-block: clamp(4rem, 2.5rem + 6vw, 8rem); }
.lost__in { display: grid; gap: 2rem 4rem; align-items: center; }
@media (min-width: 52rem) { .lost__in { grid-template-columns: var(--col-third) minmax(0, 1fr); gap: 2rem var(--gap); } .lost__uru { justify-self: center; } }
.lost__uru .icon { display: block; width: clamp(8rem, 6rem + 8vw, 12rem); height: auto; transform: rotate(-10deg); }
.lost .lede { margin-top: 1.25rem; font-size: var(--fs-lede); color: var(--ink-2); }
.lost .actions { margin-top: 2rem; }

/* ---------- legal pages: the documents as written, set on a reading column ---------- */

.legal-doc {
  /* inside the frame on a phone too, so the text starts where every other page's does */
  width: var(--frame);
  max-width: calc(46rem + 2 * var(--pad));
  margin-inline: auto;
  padding: clamp(3rem, 2rem + 3vw, 5rem) var(--pad) clamp(4rem, 3rem + 3vw, 6rem);
  color: var(--ink-2);
}
.legal-doc h1 { margin: 0.4rem 0 1rem; font-size: clamp(2.25rem, 1.7rem + 2vw, 3.25rem); color: var(--ink); }
.legal-doc h2 { margin: 2.6rem 0 0.8rem; font-size: clamp(1.35rem, 1.2rem + 0.6vw, 1.65rem); letter-spacing: -0.025em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 1rem); }
.legal-doc h3 { margin: 1.6rem 0 0.5rem; font-size: 1.0625rem; color: var(--ink); }
.legal-doc p, .legal-doc ul, .legal-doc ol { margin: 0 0 1rem; }
.legal-doc ul, .legal-doc ol { padding-left: 1.35rem; }
.legal-doc li { margin: 0.4rem 0; }
.legal-doc hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--line-2); }
.legal-doc :is(.updated, .meta) { font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 1rem; }
.legal-doc :is(.lead, .lede) { font-size: 1.125rem; line-height: 1.6; color: var(--ink); }
.legal-doc .legal, .legal-doc .note { font-size: 0.875rem; color: var(--muted); }
.legal-doc .note { font-family: var(--mono); font-size: 0.78rem; }
.legal-doc .ph, .legal-doc .tag {
  font-family: var(--mono);
  font-size: 0.8em;
  padding: 0.1em 0.45em;
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--paper);
  color: var(--ink);
}
.legal-doc .tag { display: inline-block; margin: 0.15rem 0.25rem 0.15rem 0; padding: 0.15em 0.6em; color: var(--muted); }
.legal-doc .card { margin: 1.25rem 0 1.5rem; padding: 1.25rem 1.4rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); }
.legal-doc .card.hi { border-color: var(--ink); background: var(--wash); }
.legal-doc .card .row { display: flex; flex-wrap: wrap; gap: 0.25rem 1rem; padding-block: 0.55rem; border-top: 1px solid var(--line); }
.legal-doc .card .row:first-child { border-top: 0; }
.legal-doc .card .k { min-width: 12rem; font: 500 var(--fs-label)/1.6 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legal-doc .card .v { flex: 1; min-width: 12rem; color: var(--ink); }
.legal-doc .toc { margin: 1.75rem 0 1rem; padding: 1.25rem 1.5rem; border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--paper); }
.legal-doc .toc h2 { margin: 0 0 0.6rem; font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.legal-doc .toc ol { margin: 0; columns: 2; column-gap: 2rem; }
.legal-doc .toc li { margin: 0 0 0.3rem; break-inside: avoid; }
.legal-doc table { margin: 1rem 0 1.5rem; font-size: 0.9375rem; background: var(--paper); border: 1px solid var(--line-2); }
.legal-doc th, .legal-doc td { padding: 0.75rem 0.85rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.legal-doc th { font: 500 var(--fs-label)/1.5 var(--mono); letter-spacing: 0.06em; color: var(--muted); text-transform: uppercase; }
@media (max-width: 40rem) {
  .legal-doc .toc ol { columns: 1; }
  .legal-doc .card .k { min-width: 0; }
  /* the documents' own tables, which this page may not wrap: their columns share the width and their words break */
  .legal-doc table { table-layout: fixed; }
  .legal-doc th, .legal-doc td { padding: 0.6rem 0.5rem; hyphens: auto; }
}

/* ---------- footer ---------- */

.site-footer { padding-block: clamp(3.5rem, 2.5rem + 3vw, 5.5rem) 2.5rem; background: var(--wash); }
.footer__mast { display: grid; gap: 1.25rem; max-width: 46rem; }
.footer__lockup {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.75rem;
  font: 500 clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem)/1.2 var(--sans);
  letter-spacing: -0.025em;
}
.footer__lockup .brand { font-size: 1em; }
.footer__dot { color: var(--muted); }
.footer__tag { color: var(--ink-2); }
/* on a phone the tagline wraps under the name, as far below it as the dot's gaps, and the dot goes */
@media (max-width: 47.99rem) { .footer__lockup { row-gap: 0.75rem; } .footer__dot { display: none; } .footer__tag { flex-basis: 100%; } }
.footer__about { color: var(--muted); max-width: 40rem; font-size: 0.9375rem; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem var(--gap); margin-top: 3rem; padding-top: 2.25rem; border-top: 1px solid var(--line); }
/* four columns on the quarter lines: the third starts on the half line, like every second cell */
@media (min-width: 48rem) { .footer__cols { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.footer__h { margin-bottom: 0.9rem; font: 500 var(--fs-label)/1.35 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.footer__group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; }
.footer__group a { display: inline-block; padding-block: 0.3rem; color: var(--ink-2); font-size: 0.9375rem; text-decoration: none; }
.footer__group a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: currentColor; }
.footer__small { display: grid; gap: 0.4rem; margin-top: 3rem; padding-top: 1.75rem; border-top: 1px solid var(--line); font-size: 0.8125rem; color: var(--muted); }
.footer__small p { max-width: 62rem; }

/* ---------- motion and other modes ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .js .bubble[data-bubble] { opacity: 1; }
  .arr, a:hover .arr { transform: none; }
}
@media (forced-colors: active) {
  .callout, .bubble, .chip { border: 1px solid CanvasText; }
  .chip::before { background: CanvasText; }
}
/* on paper: every band is white (the night band's colours are screen-only, above), and the marks drawn as
   backgrounds, which print drops by default, print as drawn, so a primary button's white label stays on its black */
@media print {
  .site-header, .skip, .menu-btn, .copy, .hello-btn { display: none !important; }
  body { background: #fff; color: #000; }
  .btn--primary, .bubble, .chip::before, .check-list li::before, .tilde-list li::before, .compare td::before {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}