/* \u2500\u2500 Typefaces \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   Self-hosted: a font CDN would put a third-party connection on the critical
   path of every page. Latin subsets, weight axis only, swap so text is never
   invisible while they load. */
@font-face {
  font-family: "Inter var";
  src: url("/assets/inter-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Fraunces var";
  src: url("/assets/fraunces-var.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,
    U+2215,U+FEFF,U+FFFD;
}

/* \u2500\u2500 Tokens \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   Taken from the logo: deep navy through brand blue to teal, with the violet
   from the foot of the mark as a secondary. Every colour is defined here on
   :root; the dark block only redefines the same names. */
:root {
  --font-text: "Inter var", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: "Fraunces var", ui-serif, Georgia, Cambria, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --bg: #fafbfd;
  --bg-soft: #eef3f9;
  --surface: #ffffff;
  --ink: #0d1b2e;
  --ink-soft: #3d4d63;
  --muted: #6b7a90;
  --line: #dce5ef;
  --line-soft: #eaf0f7;
  --accent: #0f62b0;
  --accent-ink: #0d5596;
  --accent-soft: #e8f1fb;
  --teal: #0e938d;
  --violet: #503ca0;
  --shadow-sm: 0 1px 2px rgb(13 27 46 / .04), 0 2px 8px rgb(13 27 46 / .05);
  --shadow-md: 0 2px 4px rgb(13 27 46 / .05), 0 12px 28px rgb(13 27 46 / .09);

  /* The logo's gradient, reused for brand moments. */
  --brand-gradient: linear-gradient(115deg, var(--teal) 0%, var(--accent) 52%, var(--violet) 100%);

  --verb-get: #0e7a5f;
  --verb-post: #0f62b0;
  --verb-patch: #8a5a08;
  --verb-delete: #b02a45;

  --w-page: 1140px;
  --w-read: 760px;
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --header-h: 61px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1120;
    --bg-soft: #101b30;
    --surface: #131f36;
    --ink: #eaf1f9;
    --ink-soft: #b6c5d9;
    --muted: #7e8ea7;
    --line: #22314c;
    --line-soft: #1a2742;
    --accent: #4fb0ef;
    --accent-ink: #6dc1f6;
    --accent-soft: #10263f;
    --teal: #2ed3c3;
    --violet: #9179e4;
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .35), 0 2px 8px rgb(0 0 0 / .3);
    --shadow-md: 0 2px 4px rgb(0 0 0 / .35), 0 14px 32px rgb(0 0 0 / .45);

    --verb-get: #43d3a8;
    --verb-post: #4fb0ef;
    --verb-patch: #e8b356;
    --verb-delete: #ff7a95;
  }
}

/* \u2500\u2500 Base \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 24px);
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.65;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "cv05" 1, "cv11" 1, "ss01" 1;
}

::selection { background: var(--accent); color: #fff; }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 3px;
}

img { max-width: 100%; height: auto; display: block; }

.wrap { width: 100%; max-width: var(--w-page); margin-inline: auto; padding-inline: clamp(18px, 5vw, 32px); }

/* Smooth cross-document navigation. Progressive: browsers without it just
   navigate normally, and nothing depends on it. */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
  @view-transition { navigation: none; }
}

/* \u2500\u2500 Type \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }

.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.022em;
  line-height: 1.05;
}

.eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  font-size: clamp(17px, 2.1vw, 20px);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: 62ch;
}

.hash { color: var(--accent); }

/* \u2500\u2500 Brand \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
/* A hairline of the logo's gradient across the top of every page. */
.brand-rule { height: 3px; background: var(--brand-gradient); }

.brand__mark { width: 34px; height: 34px; flex: none; margin-inline-start: -2px; }
.brand__word { font-family: var(--font-display); font-weight: 700; letter-spacing: -.03em; }

.hero-h1 { line-height: 1; margin-bottom: clamp(16px, 2.6vw, 24px); }
.hero-logo { width: min(300px, 66vw); height: auto; }
/* A dark-mode variant of the artwork is swapped in by <picture>; nothing to
   filter here. */

/* \u2500\u2500 Header \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--line-soft);
}
@supports not (backdrop-filter: blur(1px)) {
  .site-header { background: var(--bg); }
}
.site-header .wrap {
  display: flex;
  align-items: center;
  gap: 24px;
  height: var(--header-h);
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -.03em;
  color: var(--ink);
  text-decoration: none;
}
.brand:hover { color: var(--ink); }
.brand .hash { transition: transform .25s cubic-bezier(.34,1.56,.64,1); display: inline-block; }
.brand:hover .hash { transform: rotate(-12deg) scale(1.12); }

.site-nav { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.site-nav a {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 7px 12px;
  border-radius: 999px;
  transition: color .15s, background-color .15s;
}
.site-nav a:hover { color: var(--ink); background: var(--bg-soft); }

/* \u2500\u2500 Search \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.search { display: flex; align-items: center; gap: 6px; }
.search__input {
  font: inherit;
  font-size: 14.5px;
  color: var(--ink);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 7px 14px;
  width: 190px;
  transition: width .22s ease, border-color .15s, background-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.search__input::placeholder { color: var(--muted); }
.search__input:focus {
  outline: none;
  width: 240px;
  background: var(--surface);
  border-color: var(--accent);
}
.search__go {
  font: inherit; font-size: 14px; font-weight: 500;
  color: var(--muted); background: none; border: 0; cursor: pointer;
  padding: 7px 10px; border-radius: 999px;
}
.search__go:hover { color: var(--accent); background: var(--bg-soft); }

/* In the header the button is redundant \u2014 Enter submits \u2014 so it only appears
   for keyboard focus and on the search page itself. */
.search--header .search__go {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0);
}
.search--header .search__go:focus {
  position: static; width: auto; height: auto; clip: auto;
}
.search--search-page { max-width: 520px; margin-top: 4px; }
.search--search-page .search__input { flex: 1; width: auto; font-size: 16px; padding: 11px 18px; }
.search--search-page .search__input:focus { width: auto; }
.search--search-page .search__go {
  color: #fff; background: var(--accent); padding: 11px 20px; font-weight: 600;
}
.search--search-page .search__go:hover { background: var(--accent-ink); color: #fff; }

@media (max-width: 720px) {
  .search--header { display: none; }
}

/* \u2500\u2500 Page furniture \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
main { padding-block: clamp(36px, 6vw, 68px) clamp(56px, 9vw, 96px); }

/* Reading measure is set on the blocks, not the wrapper, so everything on the
   page hangs off the same left edge as the header and footer. */
.page-head { margin-bottom: clamp(28px, 4vw, 44px); max-width: var(--w-read); }
.page-head h1 {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -.03em;
  line-height: 1.02;
  font-size: clamp(38px, 7.5vw, 72px);
  margin-block: 10px 14px;
  overflow-wrap: anywhere;
}
.page-head .lede { margin-top: 4px; }

.stat-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  margin-top: 18px;
  font-size: 14px;
  color: var(--muted);
}
.stat-row .dot { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: .5; }

.section-head {
  max-width: 840px;
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: clamp(44px, 6vw, 72px) 0 22px;
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.section-head h2 {
  font-family: var(--font-display);
  font-size: clamp(21px, 3vw, 27px);
  font-weight: 600;
  letter-spacing: -.02em;
}
.section-head .more { margin-left: auto; font-size: 14.5px; text-decoration: none; font-weight: 500; }
.section-head .more:hover { text-decoration: underline; }

/* \u2500\u2500 Story list \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500
   The core component: an index entry. Every one links OUT to the source; the
   body is never reproduced here. */
/* Capped independently of the page width: on the wide home layout an
   uncapped index row would run to a punishing line length. */
.stories { list-style: none; padding: 0; max-width: 840px; }
.stories > li { border-top: 1px solid var(--line); }
.stories > li:first-child { border-top: 0; }

.story {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 190px;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 32px);
}
/* Only the media-less variant collapses to a single column. (Not :only-child \u2014
   every .story is the only child of its <li>, which would collapse them all.) */
.story--no-media { grid-template-columns: minmax(0, 1fr); }

.story__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 9px;
}
.story__source { color: var(--accent-ink); font-weight: 600; text-decoration: none; }
a.story__source:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }
.story__meta .sep { opacity: .4; }

.story__title {
  font-size: clamp(20px, 2.6vw, 25px);
  font-weight: 600;
  letter-spacing: -.021em;
  line-height: 1.24;
  margin-bottom: 8px;
}
.story__title a {
  color: var(--ink);
  text-decoration: none;
  background-image: linear-gradient(var(--accent), var(--accent));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .35s cubic-bezier(.22,.61,.36,1), color .2s;
}
.story:hover .story__title a, .story__title a:focus-visible {
  color: var(--accent-ink);
  background-size: 100% 1.5px;
}

.story__summary { color: var(--ink-soft); font-size: 16px; line-height: 1.6; max-width: 62ch; }

.story__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.chip {
  display: inline-flex;
  align-items: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 3px 11px;
  text-decoration: none;
  transition: color .15s, background-color .15s, border-color .15s;
}
.chip:hover { color: var(--accent-ink); background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 25%, transparent); }

.story__watch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  text-decoration: none;
  padding: 3px 4px;
  transition: color .15s;
}
.story__watch:hover { color: var(--accent); }
.story__watch svg { width: 13px; height: 13px; flex: none; }

.story__media {
  display: block;
  overflow: hidden;
  border-radius: var(--r-md);
  background: var(--bg-soft);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.story__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.story:hover .story__media img { transform: scale(1.045); }

@media (max-width: 700px) {
  .story { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .story__media { order: -1; aspect-ratio: 16 / 9; }
  .story__title { font-size: 20px; }
}

/* \u2500\u2500 Tag grid \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.tag-grid {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
}
.tag-card {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 13px 15px;
  text-decoration: none;
  color: var(--ink);
  transition: border-color .18s, transform .18s, box-shadow .18s, color .18s;
}
.tag-card:hover {
  color: var(--accent-ink);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tag-card__name {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
}
.tag-card__n {
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  background: var(--bg-soft);
  border-radius: 999px;
  padding: 1px 8px;
  flex: none;
}

/* \u2500\u2500 Empty / notices \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.empty {
  max-width: 840px;
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  padding: clamp(26px, 5vw, 44px);
  color: var(--muted);
  text-align: center;
}

/* \u2500\u2500 Pagination \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.pager {
  max-width: 840px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  flex-wrap: wrap;
}
.pager__step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  font-weight: 500;
  text-decoration: none;
  padding: 9px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  transition: border-color .18s, color .18s, background-color .18s;
}
a.pager__step:hover { color: var(--accent-ink); border-color: var(--accent); background: var(--accent-soft); }
.pager__step--off { opacity: .35; }

.pager__numbers { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; justify-content: center; }
.pager__n {
  min-width: 34px;
  padding: 7px 6px;
  text-align: center;
  font-size: 14.5px;
  font-variant-numeric: tabular-nums;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .15s, background-color .15s;
}
a.pager__n:hover { color: var(--accent-ink); background: var(--bg-soft); }
.pager__n--current { color: #fff; background: var(--accent); font-weight: 600; }
.pager__gap { color: var(--muted); padding: 0 2px; }

@media (max-width: 620px) {
  .pager { justify-content: center; }
  .pager__numbers { order: -1; width: 100%; }
}

/* \u2500\u2500 Related tags \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.related {
  max-width: 840px;
  margin-top: clamp(40px, 6vw, 64px);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}
.related__label {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.related__list {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  font-family: var(--font-display);
  font-size: clamp(17px, 2.2vw, 20px);
  letter-spacing: -.015em;
}
.related__list a { color: var(--ink); text-decoration: none; font-weight: 600; }
.related__list a:hover { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.related__sep { color: var(--muted); opacity: .55; }

/* \u2500\u2500 Footer \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg-soft);
  padding-block: 40px 56px;
  color: var(--muted);
  font-size: 14.5px;
}
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: baseline; }
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--accent); }
.site-footer .spacer { margin-left: auto; }
.site-footer__brand { font-family: var(--font-display); font-weight: 600; color: var(--ink-soft); }
/* Colophon: quieter than the nav row above it, and never pushed to the right
   by .spacer, since it is its own row. */
.site-footer__colophon { margin-top: 20px; font-size: 13px; }

/* \u2500\u2500 Docs \u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500\u2500*/
.docs-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px; }
/* Widen the page for the reference specifically. */
body:has(.docs-layout) { --w-page: 1280px; }

/* Base state: no contents rail, one column. This MUST precede the media query
   below \u2014 same specificity, so whichever comes last wins, and putting it after
   would hide the rail at every width while the grid still reserved its column,
   crushing the prose into 200px. */
.docs-toc { display: none; }
.docs { grid-column: 1 / -1; }

@media (min-width: 1000px) {
  .docs-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 48px; }
  .docs-toc { display: block; }
  /* Pin the prose to the second track explicitly, so it can never land in the
     rail's column even if the rail is absent. */
  .docs { grid-column: 2; }
}
.docs-toc nav {
  position: sticky;
  top: calc(var(--header-h) + 28px);
  max-height: calc(100vh - var(--header-h) - 56px);
  overflow-y: auto;
}
.docs-toc ol { list-style: none; padding: 0; display: grid; gap: 2px; }
.docs-toc a {
  display: block;
  font-size: 14px;
  color: var(--muted);
  text-decoration: none;
  padding: 5px 11px;
  border-radius: 7px;
  border-left: 2px solid transparent;
  transition: color .15s, background-color .15s, border-color .15s;
}
.docs-toc a:hover { color: var(--ink); background: var(--bg-soft); border-left-color: var(--accent); }

/* The column is full width; only running prose is held to a readable measure.
   Code samples, tables and endpoint headers need the room. */
.docs { max-width: none; }
.docs > p, .docs > ul, .docs h2, .docs h3:not(.endpoint) { max-width: 68ch; }
.docs pre, .docs table, .docs .endpoint, .docs .note { max-width: none; }
.docs h2 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.2vw, 31px);
  font-weight: 600;
  letter-spacing: -.024em;
  margin: 52px 0 16px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}
.docs h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 34px; }
.docs h3 { font-size: 18px; font-weight: 600; letter-spacing: -.012em; margin: 34px 0 10px; }
.docs p, .docs ul { margin-bottom: 14px; color: var(--ink-soft); }
.docs p + p { margin-top: -2px; }
.docs strong { color: var(--ink); font-weight: 600; }

.docs code {
  font-family: var(--font-mono);
  font-size: .855em;
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  padding: 1.5px 5px;
  color: var(--ink);
  white-space: nowrap;
}
.docs pre {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  overflow-x: auto;
  margin-bottom: 18px;
  box-shadow: var(--shadow-sm);
  font-size: 13.5px;
  line-height: 1.62;
  -webkit-overflow-scrolling: touch;
}
.docs pre code {
  background: none;
  border: 0;
  padding: 0;
  font-size: inherit;
  white-space: pre;
  color: var(--ink-soft);
}

.endpoint {
  display: flex;
  align-items: center;
  gap: 11px;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -.01em;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 11px 14px;
  margin: 36px 0 12px;
  overflow-x: auto;
}
.method {
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 3px 8px;
  border-radius: 5px;
  flex: none;
  color: #fff;
  background: var(--verb-post);
}
.method--get { background: var(--verb-get); }
.method--post { background: var(--verb-post); }
.method--patch { background: var(--verb-patch); }
.method--delete { background: var(--verb-delete); }

.docs table {
  width: 100%;
  border-collapse: collapse;
  margin: 16px 0 22px;
  font-size: 14.5px;
  display: block;
  overflow-x: auto;
  white-space: normal;
}
.docs th, .docs td {
  text-align: left;
  padding: 10px 14px 10px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
  color: var(--ink-soft);
}
.docs th {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  border-bottom-color: var(--line);
  white-space: nowrap;
}
.docs tbody tr:last-child td { border-bottom: 0; }

.note {
  display: flex;
  gap: 13px;
  background: var(--accent-soft);
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  border-radius: var(--r-md);
  padding: 15px 18px;
  margin: 20px 0;
  font-size: 15px;
  color: var(--ink-soft);
}
.note::before {
  content: "";
  flex: none;
  width: 3px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .75;
}
.note strong { color: var(--ink); }