/* Vigil public site, second edition.

   ── surfaces ─────────────────────────────────────────────────────────

   Three, and each one MEANS something. The first attempt at this sheet
   alternated light and dark by chapter, which reads as a pattern rather
   than as an argument: by the fourth flip the reader has learned that
   the background changing does not tell them anything.

     deep    the night the product works in. The page OPENS and CLOSES
             here and nowhere else, so the arc is dark, then daylight,
             then dark again.
     paper   the working ground. Everything in between.
     shelf   a band that exists to hold an object. A capture mounted on
             it sits IN the page rather than floating over it, and the
             surface is the signal that what follows is a photograph of
             the product rather than more prose.

   Dark mode is not the same three values inverted. Under a dark system
   preference the ORDER is preserved rather than the brightness: `deep`
   goes to the darkest value on the page, `paper` sits clearly above it,
   and `shelf` inverts its RELATIONSHIP rather than its colour - it is
   recessed under daylight and raised at night, which is what a real
   surface does when the light source moves. That keeps the hierarchy
   ("the shelf is not the ground") in both schemes instead of trading a
   white page for a brown one.

   ── type ─────────────────────────────────────────────────────────────

   Three registers with three jobs. Source Serif 4 sets display only.
   Recursive Sans sets every sentence a human wrote. Recursive Mono sets
   machine emissions only: timestamps, ids, hostnames, check-type names,
   commands and counts read off the repository.

   ── captures ─────────────────────────────────────────────────────────

   A screenshot is content, never decoration, so it is never scaled to a
   shape somebody wanted. Every window declares an aspect ratio and the
   image inside keeps its own absolutely: width is driven, height stays
   `auto`, and the window shows a REGION. `object-fit` appears nowhere in
   this file, and neither does `filter` - the dark pictures are the
   product's own night scheme, captured, not inverted.

   ── motion ───────────────────────────────────────────────────────────

   Four devices and no others: a masked rise for display type, a
   sequential reveal for records that are read in order, a slow parallax
   on mounted captures, and the header changing state. Everything is
   `transform` and `opacity`, everything is off under
   `prefers-reduced-motion`, and everything is off without scripting. */

/* ── the display face ──────────────────────────────────────────────────
   Source Serif 4, variable 400-600 with an optical-size axis, Latin
   subset as served by Google Fonts (v14), SIL Open Font License 1.1,
   Copyright 2014-2023 Adobe (github.com/adobe-fonts/source-serif).
   Commercial use permitted, no attribution required in the rendered
   page. Downloaded once and served from this origin; nothing here calls
   out to a font host at runtime. Provenance for every third-party file
   on this site is recorded in `landing/assets/PROVENANCE.md`. */
@font-face {
  font-family: "Vigil Serif";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/fonts/vigil-serif.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;
}

:root {
  --serif:
    "Vigil Serif", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    serif;

  /* Six steps, ratio near 1.3, clamped so the top step collapses fastest.
     The deck is deliberately just under half the display size: a deck
     that approaches its heading is the commonest way a page loses its
     hierarchy. */
  --t-d1: clamp(44px, 6.6vw, 104px);
  --t-d2: clamp(29px, 3.4vw, 50px);
  --t-d3: clamp(22px, 2.1vw, 30px);
  --t-lead: clamp(17px, 1.3vw, 21px);
  --t-body: 16.5px;
  --t-small: 14px;
  --t-micro: 12px;

  --rail: 1420px;
  --rail-x: calc(max(0px, (100% - var(--rail)) / 2) + var(--gutter));
  --measure: 62ch;
  --band-pad: clamp(76px, 9.4vh, 128px);

  /* The floating navigation surface, remapped per surface below. */
  --nav-ink: var(--ink);
  --nav-muted: var(--muted);
  --nav-skin: 248, 248, 246;
  --nav-edge: rgba(19, 20, 23, 0.1);

  /* Grain. One tile, printed over a surface at a few percent, so a large
     flat area has the tooth of stock rather than the flatness of a hex
     value. Generated here, not a downloaded texture. */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");

  /* One easing for everything that moves, so the site has one hand. */
  --swift: cubic-bezier(0.22, 0.68, 0.16, 1);
}

/* On a wide monitor the measure grows rather than the margins, so the
   scene keeps its proportions instead of becoming a column with two
   empty fields beside it. */
@media (min-width: 1680px) {
  :root {
    --rail: 1560px;
  }
}
@media (min-width: 2000px) {
  :root {
    --rail: 1680px;
  }
}

/* ── surfaces ────────────────────────────────────────────────────────── */

.mat {
  position: relative;
  isolation: isolate;
  background: var(--paper);
  color: var(--body);
}
.mat::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  opacity: var(--grain-strength, 0.028);
  mix-blend-mode: var(--grain-blend, multiply);
}

/* Recessed under daylight: the well a mounted capture sits in. */
.mat--shelf {
  --paper: #ececea;
  --paper-2: #f6f6f4;
  --raise: #ffffff;
  --line: #dcdcd8;
  --line-2: #cfd0cb;
  --line-strong: #bebeb9;
}

/* The night the product works in. */
.mat--deep {
  --paper: #141413;
  --paper-2: #1b1b19;
  --paper-3: #222220;
  --ink: #f6f6f2;
  --ink-press: #ffffff;
  --body: #c6c6c0;
  --muted: #91918a;
  --faint: #6b6b65;
  --line: #272724;
  --line-2: #33332f;
  --line-strong: #43433d;
  --raise: #1d1d1b;
  --band: #191917;
  --code: #1d1d1b;
  --data-ink: #b4b4ae;
  --crit: #f0524a;
  --grain-strength: 0.05;
  --grain-blend: screen;
  --nav-ink: #f6f6f2;
  --nav-muted: #a5a59e;
  --nav-edge: rgba(255, 255, 255, 0.14);
  --nav-skin: 24, 24, 22;
  --shot-shadow:
    0 2px 4px rgba(0, 0, 0, 0.5), 0 44px 96px -44px rgba(0, 0, 0, 0.85);
  --plate-shadow:
    0 2px 4px rgba(0, 0, 0, 0.45), 0 34px 80px -40px rgba(0, 0, 0, 0.7);
}

/* Night, at night. `deep` drops to the darkest value on the page,
   `paper` sits clearly above it, and the shelf stops being a well and
   becomes a raised surface: the light moved, so the object catches it
   from the other side. Every text token is recomputed against its own
   ground rather than borrowed from the light scheme. */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #191918;
    --paper-2: #201f1e;
    --paper-3: #272625;
    --ink: #f4f4f0;
    --ink-press: #ffffff;
    --body: #cbcbc5;
    --muted: #9a9a93;
    --faint: #74746e;
    --line: #2a2a27;
    --line-2: #34342f;
    --line-strong: #444440;
    --raise: #232321;
    --band: #201f1e;
    --code: #201f1e;
    --data-ink: #b9b9b3;
    --crit: #f0524a;
    --nav-ink: #f4f4f0;
    --nav-muted: #9f9f98;
    --nav-skin: 34, 34, 31;
    --nav-edge: rgba(255, 255, 255, 0.12);
  }
  .mat {
    --grain-strength: 0.035;
    --grain-blend: screen;
  }
  .mat--shelf {
    --paper: #232321;
    --paper-2: #2a2a27;
    --raise: #2e2e2b;
    --line: #333330;
    --line-2: #3d3d39;
    --line-strong: #4b4b46;
  }
  .mat--deep {
    --paper: #0b0b0a;
    --paper-2: #111110;
    --paper-3: #171716;
    --raise: #151514;
    --band: #0f0f0e;
    --line: #1f1f1d;
    --line-2: #292926;
    --line-strong: #373733;
    --nav-skin: 17, 17, 15;
  }
}
/* ── page frame ────────────────────────────────────────────────────────
   Two rails. `rail` is the full measure a capture or a table may use;
   `hold` is the narrower one prose sits in. A page that only ever uses
   one of them has a single interior axis, which is the shape everything
   generated looks like. */

.rail {
  width: 100%;
  max-width: var(--rail);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.hold {
  width: 100%;
  max-width: 1080px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
/* A chapter pads at the TOP only. Two chapters that each padded both
   ends put a third of a window of nothing between every heading and the
   paragraph that came before it, which is a gap the reader has to cross
   rather than a rest they are given. */
.band {
  padding-block: var(--band-pad) clamp(12px, 1.6vh, 22px);
}
.band--tight {
  padding-block: clamp(48px, 5.6vh, 78px) clamp(8px, 1vh, 16px);
}
.band:last-child,
.band--tight:last-child {
  padding-bottom: clamp(56px, 7vh, 96px);
}

/* ── type ──────────────────────────────────────────────────────────── */

.d1,
.d2,
.d3 {
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  font-variant-ligatures: common-ligatures;
  text-wrap: balance;
}
.d1 {
  font-size: var(--t-d1);
  line-height: 0.97;
  letter-spacing: -0.021em;
}
.d2 {
  font-size: var(--t-d2);
  line-height: 1.04;
  letter-spacing: -0.017em;
}
.d3 {
  font-size: var(--t-d3);
  line-height: 1.14;
  letter-spacing: -0.012em;
}
.lede {
  max-width: 34ch;
  color: var(--body);
  font-size: var(--t-lead);
  line-height: 1.42;
  text-wrap: pretty;
}
.prose {
  max-width: var(--measure);
  font-size: var(--t-body);
  line-height: 1.66;
}
.prose + .prose {
  margin-top: 1.05em;
}
.prose strong {
  color: var(--ink);
  font-weight: 550;
}
.mach {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 450;
  letter-spacing: 0.06em;
}

/* One label style, used for the standing of a chapter and nowhere else.
   Not a badge and not a pill: a rule and a word, the way a plate is
   captioned. */
.standing {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(24px, 3vw, 40px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.standing::before {
  content: "";
  width: clamp(28px, 4vw, 64px);
  height: 1px;
  translate: 0 -0.32em;
  background: currentColor;
  opacity: 0.5;
  flex: 0 0 auto;
}
.standing--crit {
  color: var(--crit);
}

/* ── links and actions ────────────────────────────────────────────── */

.pull {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55em;
  padding-bottom: 2px;
  border-bottom: 1px solid color-mix(in srgb, currentColor 32%, transparent);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transition:
    border-color 0.2s var(--ease),
    gap 0.2s var(--ease);
}
.pull::after {
  content: "\2192";
  font-family: var(--mono);
  translate: 0 0.02em;
}
.pull:hover {
  gap: 0.85em;
  border-color: currentColor;
}
.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}
.btn--fill {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--paper);
}
.btn--fill:hover {
  border-color: var(--ink-press);
  background: var(--ink-press);
  color: var(--paper);
}
.btn--line {
  border-color: color-mix(in srgb, var(--ink) 34%, transparent);
  color: var(--ink);
}
.btn--line:hover {
  border-color: var(--ink);
}

/* ── the header ────────────────────────────────────────────────────────
   One element with two states. At rest it is set INTO the page: no
   surface of its own, no rule, sitting on whatever material the top of
   the page is made of. Past the first scroll it lifts off and becomes a
   floating rail, translucent over the material moving under it. The
   material itself is reported by `app.js` through `data-over`, so the
   rail is legible over porcelain and over charcoal without either state
   being a separate design. */

body {
  --header-h: 82px;
}
/* The bar floats, so a page that does not deliberately run its first
   material underneath it reserves the space instead. `main--flush` is
   the opt-out, used by the pages whose opening chapter is designed to
   carry the bar. */
body > main {
  padding-top: var(--header-h);
}
body > main.main--flush {
  padding-top: 0;
}
.site-header {
  position: fixed;
  z-index: 90;
  inset: 0 0 auto;
  padding: 12px var(--gutter) 0;
  background: none;
  color: var(--nav-ink);
  transition: padding 0.3s var(--ease);
}
.site-header[data-over="deep"] {
  --nav-ink: #f4f4f0;
  --nav-muted: #a6a69f;
  --nav-skin: 24, 24, 22;
  --nav-edge: rgba(255, 255, 255, 0.14);
}
.site-header__inner {
  position: relative;
  height: 58px;
  max-width: var(--rail);
  padding-inline: clamp(4px, 1vw, 14px);
  gap: clamp(16px, 2vw, 34px);
  border: 1px solid transparent;
  border-radius: 999px;
  transition:
    background-color 0.32s var(--ease),
    border-color 0.32s var(--ease),
    box-shadow 0.32s var(--ease),
    max-width 0.32s var(--ease),
    padding 0.32s var(--ease);
}
.site-header.is-scrolled {
  padding-top: 10px;
}
.site-header.is-scrolled .site-header__inner {
  max-width: 1180px;
  padding-inline: clamp(14px, 1.6vw, 24px);
  border-color: var(--nav-edge);
  background: rgba(var(--nav-skin), 0.72);
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.04),
    0 18px 44px -26px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(18px) saturate(1.5);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
}
@supports not (backdrop-filter: blur(2px)) {
  .site-header.is-scrolled .site-header__inner {
    background: rgba(var(--nav-skin), 0.96);
  }
}
.brand,
.brand__name {
  color: var(--nav-ink);
}
.brand__mark {
  height: 22px;
}
.brand__name {
  font-size: 14.5px;
  letter-spacing: 0.34em;
}
.nav {
  gap: clamp(16px, 1.9vw, 30px);
  color: var(--nav-muted);
  font-size: 13.5px;
}
.nav a:hover,
.nav a[aria-current="page"] {
  color: var(--nav-ink);
}
.nav a[aria-current="page"] {
  border-bottom-color: var(--nav-ink);
}
.site-header__acts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.site-header .btn {
  min-height: 38px;
  padding: 9px 17px;
  border-radius: 999px;
  font-size: 13.5px;
}
.site-header .btn--primary {
  border-color: var(--nav-ink);
  background: var(--nav-ink);
  color: rgb(var(--nav-skin));
}
.site-header .btn--primary:hover {
  border-color: var(--nav-ink);
  background: var(--nav-ink);
  opacity: 0.86;
}
.site-header .btn--quiet {
  border-color: transparent;
  background: none;
  color: var(--nav-muted);
}
.site-header .btn--quiet:hover {
  color: var(--nav-ink);
}
.header-pad {
  height: var(--header-h);
}

/* The one dropdown. A native <details>, so it opens with scripting off
   and answers to the keyboard without anything being wired up. */
.navdrop {
  position: relative;
}
.navdrop > summary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-block: 6px;
  color: inherit;
  cursor: pointer;
  list-style: none;
}
.navdrop > summary::-webkit-details-marker {
  display: none;
}
.navdrop > summary::after {
  content: "";
  width: 5px;
  height: 5px;
  translate: 0 -1px;
  border-right: 1.2px solid currentColor;
  border-bottom: 1.2px solid currentColor;
  rotate: 45deg;
  opacity: 0.55;
  transition: rotate 0.2s var(--ease);
}
.navdrop[open] > summary::after {
  rotate: -135deg;
}
.navdrop > summary:hover,
.navdrop[open] > summary {
  color: var(--nav-ink);
}
.navdrop__panel {
  position: absolute;
  z-index: 60;
  top: calc(100% + 14px);
  left: -18px;
  width: 322px;
  padding: 10px;
  border: 1px solid var(--nav-edge);
  border-radius: 16px;
  background: rgb(var(--nav-skin));
  box-shadow: 0 26px 60px -30px rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.navdrop__panel a {
  display: grid;
  gap: 3px;
  padding: 11px 13px;
  border-radius: 10px;
  color: var(--nav-ink);
  text-decoration: none;
}
.navdrop__panel a:hover {
  background: color-mix(in srgb, var(--nav-ink) 8%, transparent);
}
.navdrop__panel b {
  font: 550 14px/1.2 var(--sans);
}
.navdrop__panel span {
  color: var(--nav-muted);
  font: 400 12.5px/1.35 var(--sans);
}
.navmenu__btn {
  color: var(--nav-ink);
}
.navmenu__panel {
  min-width: 274px;
  border-color: var(--nav-edge);
  border-radius: 16px;
  background: rgb(var(--nav-skin));
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
}
.navmenu__links a {
  border-radius: 9px;
  color: var(--nav-ink);
}
.navmenu__links a:hover,
.navmenu__links a:focus-visible,
.navmenu__links a[aria-current="page"] {
  background: color-mix(in srgb, var(--nav-ink) 10%, transparent);
  color: var(--nav-ink);
}
.navmenu__rule {
  background: var(--nav-edge);
}

@media (max-width: 940px) {
  .nav,
  .site-header .btn--quiet {
    display: none;
  }
  .navmenu {
    display: block;
  }
}
@media (max-width: 560px) {
  .site-header {
    padding-inline: 14px;
  }
  .site-header__inner {
    height: 54px;
  }
  .brand__name {
    letter-spacing: 0.26em;
  }
}

/* ── captures ──────────────────────────────────────────────────────────
   `frame` mounts a whole capture. `window` shows a region of one. In both
   the image keeps its own geometry: the width is driven, the height is
   never touched. */

.frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--raise);
  box-shadow: var(--shot-shadow);
}
/* A <picture> is inline by default, so its width is the natural width of
   the image inside it and a capture escapes its frame entirely. Both the
   wrapper and the image are addressed here rather than the direct child,
   which is the bug that shipped a 2608px screenshot into a 1276px page. */
.frame picture,
.mount picture,
.onshelf picture {
  display: block;
}
.frame img {
  display: block;
  width: 100%;
  height: auto;
}
.frame__cap,
.window__cap {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.045em;
}
.frame__cap b,
.window__cap b {
  color: var(--muted);
  font-weight: 450;
}

.window {
  position: relative;
  overflow: hidden;
  aspect-ratio: var(--win, 16 / 10);
  border: 1px solid var(--line-2);
  border-radius: 6px;
  background: var(--raise);
  box-shadow: var(--shot-shadow);
}
/* `--zoom`, `--px` and `--py` are unitless. A window showing the source
   region (x, y, w, h) of an image `sw` wide is written as

     --win: w / h;  --zoom: sw/w;  --px: x/w*100;  --py: y/w*100;

   because a percentage MARGIN resolves against the container's width on
   both axes, which is the only offset that stays true when the window
   changes size. The image's height is never named, so it cannot be
   squashed by a container that wanted a different shape. */
.window > img {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% * var(--zoom, 1));
  max-width: none;
  height: auto;
  margin-top: calc(var(--py, 0) * -1%);
  margin-left: calc(var(--px, 0) * -1%);
}

/* A capture set into the page rather than floating over it: the mount is
   part of the material, so the screen reads as an object on a surface. */
.mount {
  position: relative;
  padding: clamp(14px, 2vw, 30px);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: linear-gradient(
    var(--band),
    color-mix(in srgb, var(--band) 60%, var(--paper))
  );
}

/* ── typeset registries ────────────────────────────────────────────────
   The check types, the providers and the sources are LISTS, and the page
   sets them as lists: a printed register in the machine face, wrapping
   into columns. Turning forty-two names into forty-two cards is how a
   page stops being readable and starts being a grid. */

.registry {
  columns: 4 132px;
  column-gap: clamp(20px, 2.4vw, 42px);
  margin: 0;
  padding: 0;
  color: var(--data-ink);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 2.05;
  list-style: none;
}
.registry li {
  border-bottom: 1px solid var(--line);
  break-inside: avoid;
}
.registry--wide {
  columns: 3 190px;
}
.registry--sans {
  font-family: var(--sans);
  font-size: 13.5px;
}

/* ── the ledger ────────────────────────────────────────────────────────
   Rows of claim and evidence. Used where a page owes the reader a list
   of facts rather than a paragraph about them. */

.facts {
  border-top: 1px solid var(--line-2);
}
.facts > div {
  display: grid;
  grid-template-columns: minmax(0, 7.5rem) minmax(0, 1fr);
  gap: clamp(12px, 3vw, 44px);
  padding: clamp(18px, 2vw, 26px) 0;
  border-bottom: 1px solid var(--line);
}
.facts dt,
.facts > div > b {
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 450;
  line-height: 1.7;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.facts dd,
.facts > div > p {
  margin: 0;
  font-size: var(--t-body);
  line-height: 1.6;
}
.facts dd strong,
.facts > div > p strong {
  color: var(--ink);
  font-weight: 550;
}
@media (max-width: 700px) {
  .facts > div {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ── the footer ────────────────────────────────────────────────────── */

.site-footer {
  border-top: 1px solid var(--line);
}
.foot {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) repeat(3, minmax(0, 1fr));
  gap: clamp(30px, 4vw, 64px);
  padding-block: clamp(56px, 7vw, 88px) 40px;
}
.foot h2 {
  margin: 0 0 18px;
  color: var(--muted);
  font: 450 var(--t-micro) / 1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.foot nav {
  display: grid;
  align-content: start;
  gap: 11px;
}
.foot a {
  color: var(--body);
  font-size: var(--t-small);
  text-decoration: none;
}
.foot a:hover {
  color: var(--ink);
}
.foot__say {
  max-width: 34ch;
  margin-top: 20px;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.6;
}
.foot__rule {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px 28px;
  padding-block: 22px 34px;
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.04em;
}
.foot__rule a {
  color: inherit;
}
@media (max-width: 860px) {
  .foot {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .foot__intro {
    grid-column: 1 / -1;
  }
}
@media (max-width: 480px) {
  .foot {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ the opening ═══════════════════════════════════════════════════════
   One scene, not a stack of blocks.

   The failure the first attempt had was structural rather than
   decorative: a band of type, a rule, and then a picture starting
   underneath it. Three pieces that happened to be adjacent. What makes a
   composition read as authored is that its parts occupy the same space,
   so this one is built around a single overlap and a single light.

     · the type sits on the left at the weight the page can carry once;
     · the facts stand on the right as a plate, so the band has two
       masses instead of one mass and a gap;
     · a hairline runs the width of the rail beneath both;
     · and the machine rises THROUGH that hairline, its top edge in
       front of the rule, running off the right edge of the window and
       past the fold.

   The light is one soft fall from the upper left, and the tonal ladder
   under it is deliberate: the page ground is darker than the plinth, the
   plinth is darker than the captured screen, so the screen reads as lit
   rather than as a lighter rectangle somebody pasted down. */

.watch {
  /* The masthead carries the largest setting on the site: three words,
     one per line, at a size the rest of the page never uses. */
  --t-d1: clamp(46px, 7.7vw, 126px);
  --plinth: color-mix(in srgb, var(--ink) 4%, var(--paper));
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding-top: calc(var(--header-h) + clamp(22px, 4.5vh, 58px));
  overflow: hidden;
}

/* One fall of light from the upper left, and a floor under it. No hue,
   no bloom, no blur radius: the ground is simply brighter where the
   light comes from and settles into shadow away from it. */
.watch__field {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      90% 70% at 18% -10%,
      color-mix(in srgb, var(--ink) 8%, transparent),
      transparent 58%
    ),
    linear-gradient(
      to bottom,
      transparent 52%,
      color-mix(in srgb, #000 22%, transparent)
    );
}

/* ── the masthead rule ─────────────────────────────────────────────── */
.watch__slug {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 28px);
  padding-bottom: clamp(26px, 4vw, 52px);
  color: var(--faint);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.watch__slug hr {
  flex: 1 1 auto;
  height: 0;
  margin: 0;
  border: 0;
  border-top: 1px solid var(--line-2);
}
.watch__slug b {
  color: var(--muted);
  font-weight: 450;
}
.watch__slug .is-crit {
  color: var(--crit);
}

/* ── the masthead ──────────────────────────────────────────────────── */
.watch__head {
  align-items: stretch;
  display: grid;
  /* Fractions, not `auto`. A masthead whose title is a sentence rather
     than three words takes the whole row under `auto` and squeezes the
     sentence beside it into one word per line. */
  grid-template-columns: minmax(0, var(--title-col, 1.55fr)) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 84px);
  padding-bottom: clamp(24px, 3.4vh, 44px);
}
.watch__head > :first-child {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
/* The severity rail the product draws beside a critical record, at page
   scale, and running the whole height of the scene: it starts beside the
   headline and continues down the left edge of the machine. One element
   crossing both halves is what makes them one composition rather than
   two blocks that happen to be adjacent. */
.watch__spine {
  position: absolute;
  z-index: 3;
  top: calc(var(--header-h) + clamp(74px, 11vh, 130px));
  bottom: 0;
  left: calc(var(--rail-x) - 4px);
  width: 2px;
  pointer-events: none;
  background: linear-gradient(
    var(--crit) 0%,
    color-mix(in srgb, var(--crit) 78%, transparent) 46%,
    color-mix(in srgb, var(--crit) 42%, transparent) 74%,
    color-mix(in srgb, var(--crit) 0%, transparent) 100%
  );
}
.watch__title {
  position: relative;
  padding-left: clamp(18px, 2vw, 30px);
}
/* The severity rail from the incident timeline, at page scale. The only
   place on the site where the accent is used as furniture, and it is
   used because the product draws exactly this line beside a critical
   record. */
.watch__title::before {
  content: "";
  position: absolute;
  inset: 0.14em auto 0.2em 0;
  width: 2px;
  background: linear-gradient(
    var(--crit),
    color-mix(in srgb, var(--crit) 22%, transparent)
  );
}
.watch:has(.watch__spine) .watch__title::before {
  display: none;
}
.watch__title--quiet::before {
  background: linear-gradient(
    var(--line-strong),
    color-mix(in srgb, var(--line-strong) 20%, transparent)
  );
}
.watch__title .d1 {
  margin: 0;
  font-size: var(--t-d1);
  line-height: 0.9;
  letter-spacing: -0.028em;
}
.watch__title .d1 span {
  display: block;
}
.watch__say {
  margin-top: clamp(22px, 2.6vw, 34px);
  padding-left: clamp(18px, 2vw, 30px);
}
.watch__say .lede {
  max-width: 46ch;
  margin-bottom: clamp(22px, 2.6vw, 32px);
  font-size: clamp(17px, 1.32vw, 21px);
  line-height: 1.45;
}

/* ── the plate ─────────────────────────────────────────────────────────
   The facts stand as a column on the right rather than as a rule under
   everything, so the band has a second mass and the window does not end
   in a quarter of nothing. Set as a spec plate: a machine-face figure,
   the sentence that qualifies it, a hairline between. */
.watch__plate {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-self: stretch;
  height: 100%;
  border-top: 1px solid var(--line-2);
}
.watch__plate > div {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  padding: clamp(9px, 1.05vw, 13px) 0;
  border-bottom: 1px solid var(--line);
}
.watch__plate b {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.01em;
}
.watch__plate span {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}

/* ── the machine ───────────────────────────────────────────────────────
   Rises through the rule above it, runs off the right edge of the
   window, and is cut by the fold rather than by a margin. The top edge
   carries a single inner highlight, which is what the lit edge of a
   mounted panel looks like and the only reason it does not need a
   border. */
.watch__plinth {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: clamp(190px, 30vh, 400px);
  margin-top: auto;
}
.machine {
  position: relative;
  z-index: 1;
  /* The ground above the panel darkens where the panel's own body blocks
     the light, which is the whole reason it reads as an object standing
     in the scene rather than a rectangle laid on top of it. */
  /* From the rail's left edge to the edge of the window. */
  width: calc(100% + var(--gutter) + max(0px, (100vw - var(--rail)) / 2));
  margin-top: -14px;
  border-radius: 12px 0 0 0;
  box-shadow:
    inset 0 1px 0 0 color-mix(in srgb, var(--ink) 26%, transparent),
    inset 1px 0 0 0 color-mix(in srgb, var(--ink) 12%, transparent),
    0 -30px 60px -26px rgba(0, 0, 0, 0.95),
    0 -2px 0 0 rgba(0, 0, 0, 0.55);
  overflow: hidden;
}
.machine picture,
.machine img {
  display: block;
  width: 100%;
  height: auto;
}
.machine--incident {
  width: 100%;
  border: 1px solid color-mix(in srgb, var(--ink) 16%, transparent);
  border-radius: 12px;
  box-shadow:
    inset 0 1px 0 color-mix(in srgb, var(--ink) 22%, transparent),
    0 -28px 54px -34px rgba(0, 0, 0, 0.92),
    0 26px 60px -46px rgba(0, 0, 0, 0.76);
}

@media (max-width: 1180px) {
  .watch__head {
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(26px, 4vw, 40px);
  }
  .watch__plate {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(20px, 4vw, 44px);
    align-self: auto;
  }
}
@media (max-width: 640px) {
  .watch {
    min-height: 0;
    padding-bottom: 0;
  }
  .watch__plate {
    grid-template-columns: minmax(0, 1fr);
  }
  .watch__slug span:last-of-type {
    display: none;
  }
  .machine {
    width: calc(100% + var(--gutter));
    margin-top: -18px;
    border-radius: 10px 0 0 0;
  }
}

/* ── the same masthead on a dedicated page ─────────────────────────────
   Smaller, without the full-window height, and without a machine under
   it unless the page has one. */
.watch.watch--page {
  --t-d1: clamp(36px, 4.4vw, 70px);
  --title-col: 1.12fr;
  min-height: 0;
  padding-bottom: clamp(30px, 4vh, 56px);
}
.watch--page .watch__head {
  align-items: end;
  gap: clamp(26px, 4vw, 66px);
  padding-bottom: 0;
}
.watch--page .watch__say .lede {
  max-width: 42ch;
}
.watch--page .watch__plinth {
  min-height: 0;
  margin-top: clamp(30px, 4vw, 54px);
}
.watch--page .machine {
  width: 100%;
  margin-top: 0;
  border-radius: 12px;
  mask-image: none;
}

/* The dedicated stories all carry four claims under the opening. They are
   a compact evidence strip, not body copy: each claim gets its own measure
   and the value is separated from the sentence it qualifies. */
.watch__facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(22px, 2.8vw, 38px);
  border-top: 1px solid var(--line-2);
}
.watch__facts > div {
  display: grid;
  align-content: start;
  gap: 5px;
  min-width: 0;
  padding: 15px clamp(12px, 1.6vw, 22px) 0 0;
}
.watch__facts > div + div {
  padding-left: clamp(12px, 1.6vw, 22px);
  border-left: 1px solid var(--line);
}
.watch__facts b,
.watch__facts span {
  display: block;
}
.watch__facts b {
  color: var(--ink);
  font: 500 12.5px/1.35 var(--mono);
  letter-spacing: 0.01em;
}
.watch__facts span {
  max-width: 24ch;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
@media (max-width: 820px) {
  .watch__facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .watch__facts > div:nth-child(odd) {
    padding-left: 0;
    border-left: 0;
  }
  .watch__facts > div:nth-child(n + 3) {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--line);
  }
}
@media (max-width: 480px) {
  .watch__facts {
    grid-template-columns: minmax(0, 1fr);
  }
  .watch__facts > div,
  .watch__facts > div + div,
  .watch__facts > div:nth-child(n + 3) {
    margin-top: 0;
    padding: 13px 0;
    border-top: 0;
    border-left: 0;
    border-bottom: 1px solid var(--line);
  }
  .watch__facts span {
    max-width: none;
  }
}
/* ══ motion ════════════════════════════════════════════════════════════
   Four devices. Each one is the same idea: something that is READ in an
   order arrives in that order, and nothing else moves.

   Everything below is inert until `app.js` adds `.js` to the document,
   so a page with scripting off is simply present, and everything is
   switched off entirely under `prefers-reduced-motion`. */

.js .rise > span,
.js [data-rise-line] {
  display: block;
  clip-path: inset(115% 0 -20% 0);
  transform: translateY(0.18em);
  transition:
    clip-path 0.86s var(--swift),
    transform 0.86s var(--swift);
}
.js .rise.is-in > span,
.js [data-rise-line].is-in {
  clip-path: inset(-25% 0 -20% 0);
  transform: translateY(0);
}
.js .rise > span:nth-child(2) {
  transition-delay: 0.08s;
}
.js .rise > span:nth-child(3) {
  transition-delay: 0.16s;
}

/* A record that is read in order arrives in order. Used on the timeline,
   the numbered evidence list and the staged sequences, and nowhere that
   is not itself a sequence. */
.js [data-seq] > * {
  opacity: 0;
  transform: translateY(14px);
  transition:
    opacity 0.62s var(--swift),
    transform 0.62s var(--swift);
}
.js [data-seq].is-in > * {
  opacity: 1;
  transform: none;
}
.js [data-seq].is-in > *:nth-child(1) {
  transition-delay: 0.02s;
}
.js [data-seq].is-in > *:nth-child(2) {
  transition-delay: 0.1s;
}
.js [data-seq].is-in > *:nth-child(3) {
  transition-delay: 0.18s;
}
.js [data-seq].is-in > *:nth-child(4) {
  transition-delay: 0.26s;
}
.js [data-seq].is-in > *:nth-child(5) {
  transition-delay: 0.34s;
}
.js [data-seq].is-in > *:nth-child(n + 6) {
  transition-delay: 0.42s;
}

/* A block that simply arrives. One distance, one duration, used sparingly
   so that the page is not a procession. */
.js [data-lift] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s var(--swift),
    transform 0.7s var(--swift);
}
.js [data-lift].is-in {
  opacity: 1;
  transform: none;
}

/* A rule that draws itself, used only where the rule is the beginning of
   a chapter. */
.js [data-draw] {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform 0.9s var(--swift);
}
.js [data-draw].is-in {
  transform: none;
}

/* Parallax. `--shift` is written by `app.js` from the element's distance
   through the viewport; the factor lives in the markup so a mounted
   capture and the ground it stands on can move at different rates
   without the script knowing anything about either. */
.js [data-parallax] {
  will-change: transform;
  transform: translate3d(0, var(--shift, 0px), 0);
}

@media (prefers-reduced-motion: reduce) {
  .js .rise > span,
  .js [data-rise-line],
  .js [data-seq] > *,
  .js [data-lift],
  .js [data-draw] {
    opacity: 1;
    clip-path: none;
    transform: none;
    transition: none;
  }
  .js [data-parallax] {
    transform: none;
  }
}

/* ══ the record ════════════════════════════════════════════════════════
   Five lines of one night, set the way the incident itself is stored:
   the clock in the machine face on its own axis, the sentence in the
   sans beside it, a hairline between events. No icons. */

.log {
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-2);
  list-style: none;
}
.log > li {
  display: grid;
  grid-template-columns: minmax(0, 8.5rem) minmax(0, 1fr);
  gap: clamp(14px, 3vw, 48px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
}
.log time {
  color: var(--data-ink);
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.03em;
  font-variant-numeric: tabular-nums;
}
.log p {
  max-width: 56ch;
  font-size: clamp(16.5px, 1.15vw, 18.5px);
  line-height: 1.55;
}
.log code {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.88em;
}
.log--last {
  color: var(--ink);
}
.log__close {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 32px;
  padding-top: clamp(22px, 2.6vw, 34px);
}
.log__close b {
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-d3);
  font-weight: 400;
  letter-spacing: -0.012em;
}
@media (max-width: 620px) {
  .log > li {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}

/* ══ the two-column chapter ════════════════════════════════════════════
   Used where a claim and its evidence sit side by side. `--copy` moves
   the split so no two chapters on a page share an axis, which is the
   difference between a composed page and one template repeated. */

.spread {
  display: grid;
  grid-template-columns: minmax(0, var(--copy, 0.82fr)) minmax(0, 1fr);
  align-items: start;
  gap: clamp(34px, 5vw, 88px);
}
.spread--flip > :first-child {
  order: 2;
}
.spread__copy .d2 {
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.spread__copy .prose {
  margin-bottom: 22px;
}
.spread__evidence {
  position: relative;
}
@media (max-width: 980px) {
  .spread {
    grid-template-columns: minmax(0, 1fr);
  }
  .spread--flip > :first-child {
    order: 0;
  }
}

/* ══ the inventory ═════════════════════════════════════════════════════
   The one chapter on the page that changes density. Three registers,
   full width, no cards, no icons: this is a parts list and it is set as
   one. */

.inv {
  display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr);
  gap: clamp(18px, 3vw, 56px);
  padding-block: clamp(30px, 3.6vw, 46px);
  border-top: 1px solid var(--line-2);
}
.inv:last-of-type {
  border-bottom: 1px solid var(--line-2);
}
.inv__head h3 {
  margin: 0 0 10px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: var(--t-d3);
  font-weight: 400;
  letter-spacing: -0.012em;
}
.inv__head p {
  max-width: 30ch;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.55;
}
.inv__head .pull {
  margin-top: 16px;
}
.inv__body > p {
  max-width: 68ch;
  margin-bottom: 20px;
  font-size: var(--t-body);
  line-height: 1.62;
}
@media (max-width: 860px) {
  .inv {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ the verdicts ══════════════════════════════════════════════════════
   Where the page argues against itself. Three columns of prose, rules
   between them, nothing dressed up: the only thing that makes this
   credible is that it is written plainly. */

.verdicts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 54px);
  margin-top: clamp(36px, 4vw, 56px);
}
.verdicts > div {
  padding-top: 22px;
  border-top: 1px solid var(--line-strong);
}
.verdicts h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
  line-height: 1.35;
}
.verdicts p {
  font-size: 15px;
  line-height: 1.6;
}
.verdicts p + p {
  margin-top: 0.9em;
}
@media (max-width: 900px) {
  .verdicts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ ownership and price ═══════════════════════════════════════════════ */

.tree {
  margin: 0;
  padding: clamp(20px, 2.4vw, 30px);
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--code);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.95;
}
.tree > div {
  display: grid;
  grid-template-columns: minmax(0, 12rem) minmax(0, 1fr);
  gap: 8px 20px;
}
.tree dt {
  color: var(--ink);
}
.tree dd {
  margin: 0;
  color: var(--muted);
}
@media (max-width: 620px) {
  .tree > div {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
  }
  .tree dd {
    margin-bottom: 10px;
  }
}

.price {
  display: flex;
  align-items: baseline;
  gap: 6px;
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 400;
  line-height: 0.86;
  letter-spacing: -0.03em;
}
.price__num {
  font-size: clamp(76px, 12vw, 168px);
}
.price__cur {
  font-size: clamp(30px, 4vw, 58px);
  translate: 0 -0.12em;
}
.price__unit {
  margin-left: 14px;
  color: var(--muted);
  font-family: var(--sans);
  font-size: var(--t-small);
  letter-spacing: 0;
  line-height: 1.5;
  translate: 0 -0.4em;
}

/* Two evidence columns of unequal weight: a tall record beside a wide
   one, so the pair reads as two different documents rather than as a
   grid of two identical tiles. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 64px);
  margin-top: clamp(40px, 5vw, 72px);
}
@media (max-width: 900px) {
  .duo {
    grid-template-columns: minmax(0, 1fr);
  }
}

.agency__switch {
  max-width: 340px;
  margin-top: 34px;
}

/* The closing line of a page: the number on the left, the two things a
   reader can do on the right, one rule above both. */
.close {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-top: clamp(44px, 5.4vw, 74px);
  padding-top: clamp(30px, 3.4vw, 46px);
  border-top: 1px solid var(--line-strong);
}

/* ══ evidence at a legible size ════════════════════════════════════════
   A 1440-wide application screen rendered into a 380px column is not
   evidence, it is a texture. Two sizes are allowed and no others: the
   whole screen across the full rail, where the application's own type
   lands near its native size, or a WINDOW zoomed far enough that the
   region inside it does. Anything between the two is unreadable, and an
   unreadable screenshot is decoration. */

/* A display line and a paragraph want different measures, so the block
   carries none and each register carries its own. */
.head > p,
.head > div,
.head > ul,
.head > ol {
  max-width: 58ch;
}
.head .d1 {
  max-width: 13em;
}
.head .d2 {
  max-width: 17em;
}
.head .d1 {
  margin-bottom: clamp(20px, 2.2vw, 30px);
}
.head .d2 {
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.head .lede {
  margin-bottom: clamp(24px, 2.6vw, 34px);
}
.head .lede:last-child,
.head .prose:last-child {
  margin-bottom: 0;
}
.strip {
  margin-top: clamp(34px, 4vw, 58px);
}
.frame__cap,
.window__cap {
  align-items: baseline;
}
.frame__cap b,
.window__cap b {
  flex: 0 0 auto;
  white-space: nowrap;
}
.frame__cap span,
.window__cap span {
  min-width: 0;
}

/* A capture standing on a night material needs an edge, or it dissolves
   into the ground it is meant to be lit against. */
.mat--deep .frame,
.mat--deep .window {
  border-color: #3a3a35;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.04),
    0 40px 90px -44px rgba(0, 0, 0, 0.9);
}

/* The agency chapter's pair: a tall printed report beside the switcher
   that made it, at the size each was captured. */
.agency {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  align-items: start;
  gap: clamp(28px, 4vw, 66px);
}
@media (max-width: 900px) {
  .agency {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ══ page-specific structures ══════════════════════════════════════════
   Deliberately not interchangeable. A migration is a sequence, an
   edition is a pair of columns, a refusal is a list of sentences, and a
   bounded process is a specification. Setting all four as the same
   three-card grid is how eight pages become one page eight times. */

/* A staged process, read left to right, with the rule carrying the eye
   rather than an arrow glyph doing it. */
.sequence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--line-strong);
}
.sequence > div {
  padding: 24px clamp(16px, 2vw, 34px) 26px 0;
  border-right: 1px solid var(--line);
}
.sequence > div:last-child {
  border-right: 0;
}
.sequence b {
  display: block;
  margin-bottom: 10px;
  color: var(--faint);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 450;
  letter-spacing: 0.1em;
}
.sequence h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 21px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.sequence p {
  font-size: 14.5px;
  line-height: 1.55;
}
@media (max-width: 860px) {
  .sequence {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .sequence > div:nth-child(2n) {
    border-right: 0;
  }
  .sequence > div:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }
}
@media (max-width: 520px) {
  .sequence {
    grid-template-columns: minmax(0, 1fr);
  }
  .sequence > div {
    border-right: 0;
    border-bottom: 1px solid var(--line);
    padding-right: 0;
  }
}

/* Two columns that answer the same question differently: what an
   edition has, and what it does not. */
.pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(28px, 4vw, 72px);
  margin-top: clamp(36px, 4vw, 56px);
}
.pair > section {
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}
.pair--soft > section + section {
  border-top-color: var(--line-strong);
}
.pair h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 550;
}
.pair > section > p {
  max-width: 40ch;
  margin-bottom: 20px;
  color: var(--muted);
  font-size: var(--t-small);
  line-height: 1.55;
}
@media (max-width: 760px) {
  .pair {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* A specification: the name of a bound in the machine face, the number
   it is set to, and why it is set there. */
.spec {
  margin: clamp(34px, 4vw, 52px) 0 0;
  border-top: 1px solid var(--line-2);
}
.spec > div {
  display: grid;
  grid-template-columns: minmax(0, 13rem) minmax(0, 7rem) minmax(0, 1fr);
  gap: clamp(10px, 2vw, 34px);
  padding: 15px 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.spec dt {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}
.spec dd {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
}
.spec dd:first-of-type {
  color: var(--data-ink);
  font-family: var(--mono);
  font-size: 12.5px;
}
@media (max-width: 720px) {
  .spec > div {
    grid-template-columns: minmax(0, 1fr) minmax(0, 7rem);
    gap: 4px 16px;
  }
  .spec dd:last-of-type {
    grid-column: 1 / -1;
  }
}

/* A list of things the product will not say. Set as sentences with a
   rule apiece, because the only thing that makes a refusal convincing
   is that it is stated flatly. */
.refusals {
  margin: clamp(36px, 4vw, 54px) 0 0;
  padding: 0;
  list-style: none;
  columns: 2 300px;
  column-gap: clamp(28px, 4vw, 72px);
}
.refusals li {
  break-inside: avoid;
  margin-bottom: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--line-strong);
  font-size: 15.5px;
  line-height: 1.55;
}
.refusals b {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-weight: 550;
}
.refusals code {
  font-family: var(--mono);
  font-size: 0.88em;
  color: var(--ink);
}

/* A numbered register: five things, in order, that a record contains. */
.enum {
  margin: clamp(38px, 4.5vw, 60px) 0 0;
  padding: 0;
  list-style: none;
  counter-reset: enum;
  border-top: 1px solid var(--line-2);
}
.enum > li {
  display: grid;
  grid-template-columns: minmax(0, 3.5rem) minmax(0, 20rem) minmax(0, 1fr);
  gap: clamp(12px, 2.6vw, 40px);
  padding: clamp(20px, 2.4vw, 30px) 0;
  border-bottom: 1px solid var(--line);
  counter-increment: enum;
}
.enum > li::before {
  content: counter(enum, decimal-leading-zero);
  color: var(--faint);
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: 0.06em;
}
.enum h3 {
  margin: 0;
  color: var(--ink);
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.012em;
}
.enum p {
  font-size: 15.5px;
  line-height: 1.6;
}
.enum p + p {
  margin-top: 0.8em;
}
.enum code {
  color: var(--ink);
  font-family: var(--mono);
  font-size: 0.87em;
}
@media (max-width: 820px) {
  .enum > li {
    grid-template-columns: minmax(0, 3rem) minmax(0, 1fr);
    gap: 8px 18px;
  }
  .enum p {
    grid-column: 2;
  }
}

/* A quiet closing invitation, used at the foot of a dedicated page. */
.next {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px 40px;
  margin-top: clamp(34px, 4.2vw, 58px);
  padding-block: clamp(26px, 3.2vw, 40px) 0;
  border-top: 1px solid var(--line-strong);
}
.next .d3 {
  max-width: 22ch;
}

/* The price standing beside what it buys, rather than centred over it. */
.tally {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: center;
  gap: clamp(24px, 5vw, 80px);
  margin-top: clamp(20px, 3vw, 34px);
}
@media (max-width: 820px) {
  .tally {
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
  }
}

/* ══ the bridge ════════════════════════════════════════════════════════
   Twenty-odd pages were written against the first edition's classes.
   Rewriting every one of them would be a large diff for a small gain and
   a real chance of quietly changing a sentence that a test is watching,
   so instead the second edition's type is applied THROUGH the first
   edition's class names, wherever a page has been wrapped in a material.

   That is the whole retrofit: a page becomes part of this system by
   declaring what its sections are made of. Nothing else about it has to
   change, and no page is left rendering the old headline face beside a
   new one. The selectors are one step more specific than the originals
   because the originals are scoped to their own sections. */

.mat h1.display,
.mat h2.h2,
.mat h3.h3 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.mat h1.display {
  /* In ems, so a page that chose a smaller size for a long headline
     keeps a measure proportional to it rather than to the viewport. */
  max-width: 13em;
  font-size: var(--t-d1);
  line-height: 0.99;
  letter-spacing: -0.021em;
}
.mat h2.h2 {
  max-width: 17em;
}
.mat h2.h2 {
  font-size: var(--t-d2);
  line-height: 1.06;
}
.mat h3.h3 {
  font-size: var(--t-d3);
  line-height: 1.16;
}
.mat .eyebrow,
.mat .kicker {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: clamp(20px, 2.4vw, 32px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  font-weight: 450;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mat .eyebrow::before,
.mat .kicker::before {
  content: "";
  width: clamp(28px, 4vw, 64px);
  height: 1px;
  flex: 0 0 auto;
  translate: 0 -0.32em;
  background: currentColor;
  opacity: 0.5;
}
.mat .deck {
  max-width: 46ch;
  color: var(--body);
  font-size: var(--t-lead);
  line-height: 1.42;
}
.mat .lead {
  font-size: var(--t-body);
  line-height: 1.66;
}
/* The wrapper the retrofit adds already carries the rail, so the inner
   one must not add a second set of gutters. */
.mat > .rail > .wrap {
  padding-block: 0;
  padding-inline: 0;
}
.mat > .rail > .wrap:not(.watch__title):not(.watch__say) {
  max-width: none;
}

/* ── the comparison table ──────────────────────────────────────────────
   Restyled rather than rebuilt: every figure in it is asserted by
   `public-facts.mjs` and by the surface tests, and rewriting the markup
   to change how it looks would put those assertions at risk for nothing.
   What changes is the material it is set on. */
.mat .cmp {
  font-size: 13.5px;
}
.mat .cmp th,
.mat .cmp td {
  border-color: var(--line);
}
.mat .cmp thead th {
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 550;
}
.mat .cmp-scroll {
  border-color: var(--line-2);
}

/* ══ captures on a phone ═══════════════════════════════════════════════
   A 1440-wide application screen is 390 pixels wide on a phone, which is
   a picture of a screenshot rather than a screenshot. The window keeps
   its geometry rule and simply takes a TIGHTER region: `--m-win`,
   `--m-zoom`, `--m-px` and `--m-py`, falling back to the desktop values
   so a window without them is unaffected. The image is still never
   scaled to a shape it does not have. */
@media (max-width: 760px) {
  .window {
    aspect-ratio: var(--m-win, var(--win, 16 / 10));
  }
  .window > img {
    width: calc(100% * var(--m-zoom, var(--zoom, 1)));
    margin-top: calc(var(--m-py, var(--py, 0)) * -1%);
    margin-left: calc(var(--m-px, var(--px, 0)) * -1%);
  }
  /* Every capture a phone is shown was TAKEN on a phone, so nothing here
     needs panning and nothing is shrunk into illegibility. */
  .machine picture,
  .machine img {
    display: block;
    width: 100%;
    height: auto;
  }
}

@media (max-width: 620px) {
  /* A caption whose label and sentence sit on one line reads as an
     indent once the sentence wraps three times. */
  .frame__cap,
  .window__cap {
    flex-direction: column;
    gap: 3px;
  }
}

/* ══ chapters on one ground ════════════════════════════════════════════
   The body of a page does not change colour to tell you a chapter began.
   A rule does, with the chapter's name on it, and the rule draws itself
   when the chapter arrives. */

.chapmark {
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 26px);
  margin-bottom: clamp(30px, 4vw, 52px);
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.chapmark i {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  background: var(--line-2);
}

/* A band whose only job is to hold a picture. Recessed under daylight,
   raised at night, and always separated from the prose by a hairline so
   the reader knows an object is being presented rather than a paragraph
   continuing. */
.shelfband {
  margin-block: clamp(36px, 4.4vw, 62px);
  padding-block: clamp(38px, 4.6vw, 68px);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.shelfband:last-child {
  margin-bottom: 0;
}
/* A shelf that follows a masthead butts against it: the strip of paper
   between two grounds reads as a mistake rather than as a margin. */
.watch + .shelfband {
  margin-top: 0;
}

/* The same well, sized to one column rather than to the page. */
.onshelf {
  padding: clamp(10px, 1.2vw, 18px);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: none;
}
.onshelf > picture,
.onshelf > img {
  display: block;
  overflow: hidden;
  border-radius: 6px;
}
.onshelf img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
}

/* Three operating models, set as three columns of prose under a heading
   apiece. Not a pricing table: the point is that they are different ways
   to run monitoring, not three tiers of one thing. */
.models {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(26px, 3.4vw, 60px);
  margin-top: clamp(38px, 4.5vw, 58px);
}
.models > div {
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.models > div:last-child {
  border-top-color: var(--line-strong);
}
.models__tag {
  margin-bottom: 8px;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.models h3 {
  margin: 0 0 14px;
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(23px, 1.9vw, 29px);
  font-weight: 400;
  letter-spacing: -0.014em;
}
.models p {
  font-size: 15px;
  line-height: 1.6;
}
.models p + p {
  margin-top: 0.85em;
}
.models .pull {
  margin-top: 18px;
}
@media (max-width: 900px) {
  .models {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* One object on the page meets the reader at the width of their window,
   because a monitor list is a wide thing and cropping it to a column is
   a decision about the picture rather than about the product. */
.shelfband--bleed {
  padding-inline: 0;
}
.bleed {
  width: 100%;
  padding-inline: clamp(12px, 2vw, 28px);
}
.frame--bleed {
  border-radius: 8px;
}

/* A capture of the product on a phone, shown at the size a phone shows
   it. Used where a column is too narrow for a desktop screen to be read,
   which is most columns: the alternative is a picture of a screenshot. */
.handheld .frame {
  width: min(100%, 430px);
  margin-inline: auto;
}
.handheld img {
  display: block;
  width: 100%;
  height: auto;
}
.handheld .frame__cap {
  justify-content: center;
  width: min(100%, 430px);
  margin-inline: auto;
}
@media (max-width: 980px) {
  .handheld .frame,
  .handheld .frame__cap {
    margin-inline: 0;
  }
}

/* A chapter head followed by a spread needs air between them, or the
   link at the foot of the head runs straight into the first paragraph of
   the spread. */
.head + .spread,
.head + .duo,
.head + .agency {
  margin-top: clamp(38px, 4.6vw, 66px);
}

/* ══ the ending ════════════════════════════════════════════════════════
   The page closes where it opened. The footer is the same night the
   masthead was set in, and it begins with the mark at a size it is never
   otherwise given, so the last thing on the page is the name of the
   thing rather than a column of links. */

.site-footer {
  border-top: 1px solid var(--line);
}
.foot__crown {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: start;
  gap: clamp(24px, 5vw, 76px);
  padding-block: clamp(56px, 7.5vw, 104px) clamp(44px, 5.5vw, 68px);
}
.foot__crown .brand {
  gap: clamp(14px, 1.6vw, 24px);
}
.foot__crown .brand__mark {
  height: clamp(46px, 6vw, 86px);
}
.foot__crown .brand__name {
  font-size: clamp(30px, 4.2vw, 62px);
  font-weight: 400;
  letter-spacing: 0.26em;
}
.foot__crown p {
  max-width: 44ch;
  color: var(--muted);
  font-size: var(--t-lead);
  line-height: 1.45;
}
.foot__crown .actions {
  grid-column: 2 / -1;
  margin-top: clamp(18px, 2vw, 26px);
}
.foot {
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) {
  .foot__crown {
    grid-template-columns: minmax(0, 1fr);
    gap: 22px;
  }
  .foot__crown .actions {
    grid-column: 1 / -1;
  }
}

/* A dedicated page's masthead sets one line, not three, so the rail that
   marks a critical record would be claiming something. It is kept for
   the pages that are about a failure and dropped everywhere else. */
.watch__title--quiet::before {
  background: var(--line-strong);
}
.watch__slug .is-crit {
  color: var(--crit);
}
.watch--page .watch__title .d1 {
  line-height: 1;
}

/* The numbered record. Two columns, not three: the third column was a
   twenty-rem middle that collapsed into one word per line as soon as the
   window narrowed, which is the defect this replaces. */
.enum > li {
  grid-template-columns: minmax(0, 3.2rem) minmax(0, 1fr);
  gap: 0 clamp(14px, 2.2vw, 34px);
}
.enum h3 {
  grid-column: 2;
  margin-bottom: 10px;
}
/* Every child after the counter shares the second column. Without this
   the paragraph lands in an implicit third track a few characters wide,
   which is the one-word-per-line column this rule exists to prevent. */
.enum > li > * {
  grid-column: 2;
}
.enum > li::before {
  grid-column: 1;
}
.enum p {
  max-width: 68ch;
}
@media (max-width: 820px) {
  .enum > li {
    grid-template-columns: minmax(0, 2.6rem) minmax(0, 1fr);
  }
  .enum p {
    grid-column: 2;
  }
}

/* No capture is ever drawn larger than it was taken. `--shot-w` is the
   image's own CSS width (its pixel width at the capture's device ratio),
   written into the markup beside it; above that the picture would be
   upscaled, and an upscaled screenshot of an interface looks like a
   photograph of a screen rather than the screen. */
.frame {
  max-width: min(100%, var(--shot-w, 100%));
  margin-inline: auto;
}

/* The objections read as prose, so they keep a prose measure even though
   the rail around them is the full width of the page. */
.faq {
  max-width: 920px;
}

/* ══ detail ════════════════════════════════════════════════════════════
   Two hovers and one focus ring, and nothing else moves on contact.
   Both hovers do a job: a long register is easier to keep your place in
   when the row under the pointer resolves, and a model column tells you
   it is a link before you find the link. */

.registry li {
  transition: color 0.16s var(--swift);
}
.registry li:hover {
  color: var(--ink);
}
.models > div {
  transition: border-top-color 0.24s var(--swift);
}
.models > div:hover {
  border-top-color: var(--crit);
}

/* One ring, on the surface it lands on, so a keyboard reader is never
   guessing where they are on a charcoal chapter. */
.mat a:focus-visible,
.mat summary:focus-visible,
.mat button:focus-visible {
  outline: 2px solid var(--crit);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ══ documentation ═════════════════════════════════════════════════════
   The reference rails on the documentation and architecture pages were
   written against a header that scrolled away with the page. This one
   floats, so a rail pinned at 28px scrolls up INTO it and the two render
   through each other. Both the rail and the page's own top offset now
   clear the bar by name rather than by a number somebody measured once. */

.docs-nav {
  top: calc(var(--header-h) + 30px);
}
/* `main.wrap:has(.doc-prose)` in the first edition's sheet outranks a
   child selector, so the override is written against the same selector
   rather than against a more specific one nobody would find later. */
main.wrap:has(.doc-prose),
body > main.wrap {
  padding-top: calc(var(--header-h) + clamp(28px, 4vh, 52px));
}
@media (max-width: 760px) {
  main.wrap:has(.doc-prose),
  body > main.wrap {
    padding-top: calc(var(--header-h) + 20px);
  }
}
/* A documentation page is a document. Its first line is a heading, not a
   campaign, so the space above it is measured rather than cinematic. */
body > main.wrap > .doc-layout {
  padding-bottom: clamp(64px, 8vh, 110px);
}
.docs-nav__label,
.doc-layout .kicker {
  margin-top: 0;
}
@media (max-width: 1024px) {
  .docs-nav {
    margin-inline: calc(var(--gutter) * -1);
    padding: 12px var(--gutter);
    display: flex;
    overflow-x: auto;
    gap: 8px;
    border-bottom: 1px solid var(--line);
    scrollbar-width: none;
  }
  .docs-nav::-webkit-scrollbar {
    display: none;
  }
  .docs-nav__label {
    display: none;
  }
  .docs-nav a,
  .docs-nav a[aria-current="page"] {
    flex: 0 0 auto;
    padding: 10px 13px;
    border: 1px solid var(--line-strong);
    border-radius: 2px;
    font-size: 13px;
    line-height: 1.2;
    white-space: nowrap;
  }
  .docs-nav a[aria-current="page"] {
    border-color: var(--ink);
    background: var(--ink);
    color: var(--paper);
  }
}

/* Below the two-column masthead the spine would run down through the
   spec plate rather than beside it, so the rail goes back to being the
   headline's own mark. */
@media (max-width: 1023px) {
  .watch__spine {
    display: none;
  }
  .watch:has(.watch__spine) .watch__title::before {
    display: block;
  }
}

/* ══ a specimen ════════════════════════════════════════════════════════
   A macro crop of one control, presented on the page's own ground rather
   than on a shelf: a shelf says "here is the product", a specimen says
   "here is the one setting this paragraph is about". Two rules and a
   caption, no surface change, so the page does not read as a run of
   identical grey bands. */

.specimen {
  margin-top: clamp(28px, 3.4vw, 46px);
  padding-block: clamp(18px, 2.2vw, 30px);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line);
}
.specimen figure {
  margin: 0;
  overflow: hidden;
  border-radius: 4px;
}
.specimen picture,
.specimen img {
  display: block;
  width: 100%;
  height: auto;
}
.specimen .frame__cap {
  margin-top: 14px;
}

/* Three counts under a register: what the page did not print in full,
   with the number and the route to the whole list. */
.counts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 54px);
  margin-top: clamp(30px, 3.6vw, 48px);
  padding-top: clamp(22px, 2.6vw, 32px);
  border-top: 1px solid var(--line-strong);
}
.counts h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 450;
  letter-spacing: 0.01em;
}
.counts p {
  margin-bottom: 14px;
  font-size: 14.5px;
  line-height: 1.55;
}
@media (max-width: 820px) {
  .counts {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

/* ══ one register, three subjects ══════════════════════════════════════
   The numbered list is the same component on three pages, and it should
   not look the same on all three. Operations reads it as a timeline, so
   it gets a rule joining the steps and an accent on the two that involve
   a person. Evidence reads it as an exhibit list, so its numbers are
   stamped rather than sequential furniture. */

.enum--time {
  position: relative;
}
.enum--time > li {
  position: relative;
}
/* The rule the steps hang from, drawn between the counters rather than
   through them. */
.enum--time > li::after {
  content: "";
  position: absolute;
  top: 2.6em;
  bottom: -0.4em;
  left: calc(1.6rem - 1px);
  width: 1px;
  background: var(--line-2);
}
.enum--time > li:last-child::after {
  display: none;
}
.enum--time > li::before {
  position: relative;
  z-index: 1;
  display: inline-block;
  width: 3.2rem;
  padding-block: 2px;
  background: var(--paper);
  text-align: left;
}
/* The two moves that hand work to a person. */
.enum--time > li[data-human]::before {
  color: var(--crit);
}
.enum--time > li[data-human] h3 {
  color: var(--ink);
}

/* An exhibit: the counter is set as a stamp on the record rather than as
   a number in a list. */
.enum--exhibit > li::before {
  padding: 3px 7px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.1em;
  justify-self: start;
  height: fit-content;
}

/* A provenance stamp: a machine-face line that says where a thing came
   from, set as a bordered plate rather than as another paragraph. */
.stamp {
  display: grid;
  grid-template-columns: minmax(0, 7rem) minmax(0, 1fr);
  gap: 6px clamp(12px, 1.6vw, 22px);
  margin-top: clamp(26px, 3vw, 40px);
  padding: clamp(16px, 1.8vw, 24px);
  border: 1px solid var(--line-2);
  border-radius: 4px;
  background: var(--code);
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.7;
}
.stamp dt {
  color: var(--muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.stamp dd {
  margin: 0;
  color: var(--ink);
  overflow-wrap: anywhere;
}
@media (max-width: 620px) {
  .stamp {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .stamp dd {
    margin-bottom: 8px;
  }
}