/* MapleStats MCP website. Tokens first; every colour below comes from them.
   Direction A, "red grid": white ground, black ink and 2px rules, one
   Canadian red; Source Serif 4 headings, Source Sans 3 text, IBM Plex Mono code. */

:root {
  color-scheme: light;
  --ground: #ffffff;
  --ground-2: #f3f3f1;
  --surface: #ffffff;
  --ink: #111111;
  --ink-2: #3d3d3d;
  --ink-3: #5e5e5e;
  --rule: #d9d9d6;
  --rule-2: #111111;
  --accent: #c8221a;
  --accent-hover: #93150f;
  --accent-soft: #fbe4e1;
  --on-accent: #ffffff;
  --amber: #c8221a;
  --mark: #ffddd8;
  --mark-ink: #5c0d08;
  --panel: #111111;
  --panel-2: #1c1c1c;
  --panel-ink: #f2f2f2;
  --panel-mute: #a6a6a6;
  --panel-rule: #2e2e2e;
  --panel-link: #ff8f85;
  --s-key: #ffffff;
  --s-str: #ff9d94;
  --s-num: #ffc7a8;
  --s-lit: #ff9d94;
  --s-com: #8c8c8c;
  --code-key: #111111;
  --code-str: #b01e16;
  --code-num: #b01e16;
  --code-lit: #5e5e5e;
  --c1: #fde2df;
  --c1-ink: #5c0d08;
  --c2: #f5a39a;
  --c2-ink: #3d0805;
  --c3: #df4436;
  --c3-ink: #ffffff;
  --c4: #9c160f;
  --c4-ink: #ffffff;
  --prov: rgba(255, 143, 133, 0.1);
  --shadow: none;

  --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
  --font-text: "Source Sans 3", "Source Sans Pro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --gutter: clamp(16px, 4vw, 64px);
  --max: 1312px;
  --radius: 0;
  --top-h: 72px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --ground: #0f0f0f;
    --ground-2: #181818;
    --surface: #161616;
    --ink: #f2f2f2;
    --ink-2: #c4c4c4;
    --ink-3: #9d9d9d;
    --rule: #2b2b2b;
    --rule-2: #f2f2f2;
    --accent: #ff5a4d;
    --accent-hover: #ff8f85;
    --accent-soft: #3a1310;
    --on-accent: #0f0f0f;
    --amber: #ff6b5e;
    --mark: #5c1a14;
    --mark-ink: #ffe0db;
    --panel: #000000;
    --panel-2: #121212;
    --panel-rule: #2b2b2b;
    --code-key: #f2f2f2;
    --code-str: #ff8f85;
    --code-num: #ff8f85;
    --code-lit: #9d9d9d;
    --c1: #3a1512;
    --c1-ink: #ffd6d1;
    --c2: #7a241c;
    --c2-ink: #ffe7e4;
    --c3: #d83a2d;
    --c3-ink: #ffffff;
    --c4: #ff8a7e;
    --c4-ink: #1a0503;
    --shadow: none;
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --ground: #0f0f0f;
  --ground-2: #181818;
  --surface: #161616;
  --ink: #f2f2f2;
  --ink-2: #c4c4c4;
  --ink-3: #9d9d9d;
  --rule: #2b2b2b;
  --rule-2: #f2f2f2;
  --accent: #ff5a4d;
  --accent-hover: #ff8f85;
  --accent-soft: #3a1310;
  --on-accent: #0f0f0f;
  --amber: #ff6b5e;
  --mark: #5c1a14;
  --mark-ink: #ffe0db;
  --panel: #000000;
  --panel-2: #121212;
  --panel-rule: #2b2b2b;
  --code-key: #f2f2f2;
  --code-str: #ff8f85;
  --code-num: #ff8f85;
  --code-lit: #9d9d9d;
  --c1: #3a1512;
  --c1-ink: #ffd6d1;
  --c2: #7a241c;
  --c2-ink: #ffe7e4;
  --c3: #d83a2d;
  --c3-ink: #ffffff;
  --c4: #ff8a7e;
  --c4-ink: #1a0503;
  --shadow: none;
}

/* ---------- Base ---------- */

/* Author display rules (grid, flex) would otherwise override [hidden]. */
[hidden] {
  display: none !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--top-h) + 24px);
}

body {
  margin: 0;
  /* clip, not hidden: no sideways page scroll, and sticky headers still work. */
  overflow-x: clip;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg {
  max-width: 100%;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  color: var(--accent-hover);
  text-decoration-thickness: 2px;
}

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

h1,
h2,
h3,
p,
figure,
dl,
dd {
  margin: 0;
}

h1,
h2,
h3 {
  text-wrap: balance;
}

p,
li,
dd {
  text-wrap: pretty;
}

code,
pre {
  font-family: var(--font-mono);
}

code {
  font-size: 0.88em;
}

::selection {
  background: var(--mark);
  color: var(--mark-ink);
}

mark {
  background: var(--mark);
  color: var(--mark-ink);
  border-radius: 1px;
  padding: 0 1px;
}

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

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

.skip {
  position: absolute;
  left: 8px;
  top: 8px;
  z-index: 50;
  padding: 8px 12px;
  background: var(--ink);
  color: var(--ground);
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

.label {
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-3);
}

.count {
  font-family: var(--font-mono);
  font-size: 0.75em;
  font-weight: 400;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* ---------- Header ---------- */

.top {
  position: sticky;
  top: env(safe-area-inset-top, 0px);
  z-index: 30;
  background: var(--ground);
  border-bottom: 2px solid var(--ink);
}

.top-row {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  min-height: var(--top-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1875rem;
  letter-spacing: -0.012em;
  white-space: nowrap;
}

.brand:hover {
  color: var(--ink);
}

.brand svg {
  width: 32px;
  height: 32px;
  flex: none;
}

.mark .tile {
  fill: var(--accent);
}

.mark .cell {
  fill: var(--on-accent);
}

.brand-tag {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  background: var(--ink);
  color: var(--ground);
}

.nav {
  display: flex;
  align-items: center;
  gap: clamp(18px, 1.4vw, 26px);
  margin-left: auto;
  font-size: 0.9375rem;
  font-weight: 600;
}

.nav a,
.top-end a {
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
}

.nav a:hover,
.top-end a:hover {
  color: var(--ink);
}

.nav a[aria-current="page"] {
  color: var(--accent);
  box-shadow: inset 0 -3px 0 var(--accent);
  padding-block: 4px;
}

.top-end {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: 0.9375rem;
}

.top-end .lang {
  font-size: 0.875rem;
  padding: 3px 9px;
  border: 1px solid var(--rule-2);
  border-radius: 0;
}

.top-end .lang:hover {
  border-color: var(--ink);
}

/* One row (brand, nav, language, theme, GitHub) needs about 1,250 px of
   content width in French with a wide fallback font (DejaVu Sans, measured
   when Source Sans 3 has not loaded), so the theme switch shows only its
   icon there, and below 1380 px the nav takes a second row of its own.
   Same breakpoint in both languages, so switching language does not
   reflow the header. */
@media (min-width: 1380px) {
  .theme [data-theme-label] {
    display: none;
  }

  .theme {
    padding-inline: 8px;
  }
}

@media (max-width: 1379px) {
  :root {
    --top-h: 100px;
  }

  .top-row {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-block: 10px 0;
    min-height: 0;
  }

  .top-end {
    margin-left: auto;
  }

  /* The nav row runs edge to edge, so on narrow screens its links scroll
     out under the screen edge rather than stopping at the gutter; the
     padding keeps them aligned with the brand above. */
  .nav {
    order: 3;
    flex: 0 0 calc(100% + 2 * var(--gutter));
    min-width: 0;
    margin-inline: calc(-1 * var(--gutter));
    padding: 6px var(--gutter);
    gap: 24px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: var(--gutter);
    scrollbar-width: none;
  }

  .nav::-webkit-scrollbar {
    display: none;
  }

  /* Every link gets the current page's padding, so the row is the same
     height on every page and each link a taller tap target. */
  .nav a,
  .nav a[aria-current="page"] {
    padding-block: 6px;
  }

  /* Where the links overflow, the edge they run past fades out, so the
     row reads as one that scrolls. The header script sets data-more. */
  .nav[data-more="end"] {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 56px), transparent);
  }

  .nav[data-more="start"] {
    -webkit-mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to left, #000 calc(100% - 56px), transparent);
  }

  .nav[data-more="both"] {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 56px, #000 calc(100% - 56px), transparent);
  }
}

@media (max-width: 1000px) {
  .nav {
    gap: 20px;
  }
}

/* Phones: brand and utilities share the first row, so the sticky header
   stays two short rows (about 100 px) rather than three. */
@media (max-width: 480px) {
  .top-row {
    column-gap: 10px;
  }

  .top-end {
    gap: 8px;
  }

  .top-end .lang {
    padding-inline: 6px;
  }

  .brand-tag {
    display: none;
  }
}

@media (max-width: 380px) {
  .brand {
    gap: 7px;
    font-size: 1.0625rem;
  }

  .brand svg {
    width: 28px;
    height: 28px;
  }

  .top-end .lang {
    font-size: 0.8125rem;
    padding-inline: 5px;
  }

  .theme {
    padding-inline: 7px;
  }
}

/* ---------- Hero ---------- */

.hero {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3vw, 40px) clamp(24px, 2.5vw, 32px);
  align-items: start;
  padding-block: clamp(36px, 4.5vw, 56px) clamp(48px, 5.5vw, 80px);
}

/* The logo on the left, the words on the right. The logo takes the height
   of the text beside it: its top meets the cap line of the kicker and its
   bottom the baseline of the last line. Where the column is too narrow for
   that, the square keeps the column width and sits centred on the text. */
.hero-logo {
  grid-column: 1 / span 4;
  position: relative;
  align-self: stretch;
}

/* Out of flow, so only the text sets the row height; the SVG then fits the
   largest square it can, flush left (preserveAspectRatio="xMinYMid"). */
.hero-logo .logo {
  position: absolute;
  /* Top: the headline's cap line, measured at 0.145 of its size; bottom:
     8px above the text box, where the last line's baseline sits. */
  inset: calc(var(--h1-size, 5rem) * 0.145) 0 8px;
  width: 100%;
  height: calc(100% - var(--h1-size, 5rem) * 0.145 - 8px);
}

.logo-tile {
  fill: var(--accent);
}

.logo-ink {
  fill: var(--on-accent);
}

.hero-text {
  grid-column: 5 / -1;
}

.hero .lede {
  margin-top: 22px;
  padding-top: 22px;
  max-width: 34em;
  border-top: 2px solid var(--ink);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.5rem);
  line-height: 1.4;
  color: var(--ink);
}

/* What it does, and what it hands back: two short points under the lede. */
.points {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px;
}

.points p {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink-2);
}

.points .point-label {
  margin-bottom: 4px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
  color: var(--ink);
}

/* Between the stacked layout and full width, the text steps down a size so
   it stays as tall as the logo column is wide. */
@media (min-width: 1241px) and (max-width: 1360px) {
  .hero .lede {
    font-size: 1.375rem;
  }

  html[lang="fr"] .hero .lede {
    font-size: 1.3rem;
  }

  .points p {
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .points {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }
}

.setup {
  grid-column: 1 / -1;
  padding-top: 22px;
  border-top: 2px solid var(--ink);
}

.setup-lead {
  max-width: 110ch;
  color: var(--ink-2);
}

.setup-lead strong {
  margin-right: 10px;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

.setup-row {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  font-weight: 500;
}

.cmd.prompt code::before {
  content: none;
}

.setup-steps {
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  list-style: none;
  counter-reset: setup;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.setup-steps li {
  counter-increment: setup;
}

.setup-steps li::before {
  content: counter(setup);
  display: inline-grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  margin-right: 8px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--on-accent);
  background: var(--accent);
}

.setup-links {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 26px;
  font-weight: 500;
}

/* The setup prompt beside the Connect page's headline: a column, so the
   prompt wraps inside its box and the three steps stack. */
.page-aside {
  align-self: start;
}

.page-aside .cmd.prompt code {
  white-space: normal;
  overflow-wrap: anywhere;
}

.page-aside .setup-steps {
  flex-direction: column;
}

.by-hand-head {
  padding-top: clamp(16px, 2vw, 28px);
}

@media (max-width: 1240px) {
  .hero-logo,
  .hero-text {
    grid-column: 1 / -1;
  }

  .hero-logo .logo {
    position: static;
    display: block;
    width: 180px;
    height: auto;
  }
}

/* Phones: the header already carries the mark, so the big logo goes, and
   the hero tightens so the setup prompt starts near the first screen. */
@media (max-width: 640px) {
  .hero-logo {
    display: none;
  }

  .hero {
    padding-top: 24px;
    row-gap: 28px;
  }

  .hero .lede {
    margin-top: 16px;
    padding-top: 16px;
    font-size: 1.125rem;
  }

  .points p {
    font-size: 1rem;
  }
}

@media (max-width: 640px) {
  .cmd.prompt code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.hero h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.6rem, 0.9rem + 6.2vw, 5.9rem);
  line-height: 0.92;
  letter-spacing: -0.025em;
}

.hero h1 .alt {
  display: block;
  margin-top: 0.62em;
  max-width: 34ch;
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.05rem, 0.92rem + 0.55vw, 1.35rem);
  line-height: 1.35;
  letter-spacing: 0;
  color: var(--ink-3);
}

.lede {
  margin-top: 0;
  max-width: 56ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.58;
  color: var(--ink-2);
}

.actions {
  margin-top: 32px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  font-weight: 500;
}

.cmd {
  display: inline-flex;
  align-items: stretch;
  max-width: 100%;
  border: 2px solid var(--ink);
  border-radius: var(--radius);
  background: var(--surface);
}

.cmd code {
  padding: 10px 14px;
  font-size: 0.9375rem;
  white-space: nowrap;
  overflow-x: auto;
}

.cmd code::before {
  content: "$ ";
  color: var(--ink-3);
}

.cmd button,
.copy {
  font: 500 0.8125rem/1 var(--font-text);
  cursor: pointer;
}

.cmd button {
  flex: none;
  border: 0;
  border-left: 1px solid var(--ink);
  background: var(--ink);
  color: var(--ground);
  padding: 0 15px;
}

.cmd button:hover {
  background: var(--accent);
  color: var(--on-accent);
}

.fineprint {
  margin-top: 22px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

/* ---------- Sections ---------- */

.section {
  padding-block: clamp(56px, 6.5vw, 92px);
  border-top: 2px solid var(--ink);
}

.section-head {
  display: grid;
  gap: 14px;
  max-width: 780px;
  margin-bottom: clamp(36px, 4.5vw, 60px);
}

.section-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 1.35rem + 1.9vw, 2.95rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.section-head p:not(.label) {
  max-width: 64ch;
  color: var(--ink-2);
}

/* Page and section heads split on wide screens: the label and headline on
   the left half, the lede on the right half, starting at the same line as
   the twelve-column grids below (column 7). Anything else in the head, such
   as the Tools page's pinned tools, runs across both halves underneath. */
@media (min-width: 1000px) {
  .page-head,
  .section-head {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 2.5vw, 32px);
    align-items: start;
  }

  .section-head {
    max-width: none;
  }

  .page-head > *,
  .section-head > * {
    grid-column: 1 / -1;
  }

  .page-head > .label,
  .page-head > h1,
  .section-head > .label,
  .section-head > h2 {
    grid-column: 1;
  }

  .page-head > .lede,
  .section-head > p:not(.label) {
    grid-column: 2;
    grid-row: 2;
    margin-top: 0.35em;
  }

  /* A head with an aside (the setup prompt on the Connect page): the
     label, headline and lede stack on the left, the aside on the right. */
  .page-head.has-aside {
    grid-template-rows: auto auto 1fr;
  }

  .page-head.has-aside > .lede {
    grid-column: 1;
    grid-row: auto;
    margin-top: 4px;
  }

  .page-head.has-aside > .page-aside {
    grid-column: 2;
    grid-row: 1 / span 3;
  }
}

.sub {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--font-text);
  font-size: 1.125rem;
  font-weight: 600;
}

/* ---------- How it works ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(44px, 5.5vw, 72px);
}

.step {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}

@media (max-width: 900px) {
  .step {
    grid-template-columns: minmax(0, 1fr);
  }
}

.step-text {
  position: sticky;
  top: calc(var(--top-h) + 32px);
  display: grid;
  gap: 12px;
}

@media (max-width: 900px) {
  .step-text {
    position: static;
  }
}

.step-n {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.step-n::after {
  content: "";
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: var(--rule-2);
}

.step h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.625rem;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.step h3 code {
  display: block;
  margin-top: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--ink-3);
}

.step-text p {
  max-width: 42ch;
  color: var(--ink-2);
}

/* The example beside each step: one frame for all four, the input in a
   tinted strip at the top, the output below it in plain labels. */

.ex {
  min-width: 0;
  background: var(--surface);
  border: 2px solid var(--rule-2);
  border-radius: var(--radius);
  font-size: 0.9375rem;
}

.ex > * + * {
  border-top: 1px solid var(--rule);
}

.ex-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 2px 16px;
  padding: 10px 18px;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--ink-3);
}

.ex-head code {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--accent);
}

.ex-part {
  display: grid;
  align-content: start;
  gap: 8px;
  min-width: 0;
  padding: 16px 18px;
}

.ex-ask {
  background: var(--ground-2);
}

.ex-label {
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-3);
}

.ex-question {
  font-family: var(--font-display);
  font-size: 1.1875rem;
  line-height: 1.35;
  color: var(--ink);
}

.ex-json {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--ink);
}

.ex-json code,
.ex-code code {
  font-size: inherit;
}

.ex .s-key {
  color: var(--code-key);
}

.ex .s-str {
  color: var(--code-str);
}

.ex .s-num {
  color: var(--code-num);
}

.ex .s-lit {
  color: var(--code-lit);
}

.ex .s-com {
  color: var(--ink-3);
}

.ex a {
  color: var(--accent);
}

/* Step 1: the plan, one short list per topic or place. */

.plan {
  columns: 2 280px;
  column-gap: 36px;
  /* Each group's own bottom padding ends the list. */
  margin-bottom: -16px;
}

.plan-group {
  break-inside: avoid;
  padding-bottom: 16px;
}

.plan-group h4 {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.plan-group ol {
  margin: 0;
  padding: 0 0 0 1.7em;
  display: grid;
  gap: 8px;
}

.plan-group li::marker {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
}

.plan-group li a {
  display: block;
  text-decoration: none;
}

.plan-group li code {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--ink);
}

.plan-group li a:hover code {
  color: var(--accent);
  text-decoration: underline;
}

.plan-group li span {
  display: block;
  font-size: 0.875rem;
  line-height: 1.4;
  color: var(--ink-2);
}

.plan-note {
  margin-top: 12px;
  padding-left: 10px;
  border-left: 2px solid var(--accent);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.plan-note b {
  margin-right: 4px;
  font-weight: 600;
  color: var(--ink);
}

/* Step 2: the live search. */

.probe-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--surface);
  border: 1px solid var(--ink-3);
}

.probe-input:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.probe-input .prompt {
  font-family: var(--font-mono);
  color: var(--accent);
  font-weight: 500;
}

.probe-input input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-mono);
}

.probe-input input::-webkit-search-cancel-button {
  filter: grayscale(1);
}

.probe-try {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 8px;
  font-size: 0.8125rem;
  line-height: 1.4;
}

.probe-try span {
  font-weight: 600;
  color: var(--ink-3);
}

.probe-try button {
  padding: 3px 9px;
  border: 1px solid var(--rule);
  background: var(--surface);
  font: 400 0.8125rem/1.4 var(--font-text);
  color: var(--ink-2);
  cursor: pointer;
}

.probe-try button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.results {
  list-style: none;
  margin: 0;
  padding: 6px 0;
  min-height: 120px;
}

.results a {
  display: grid;
  grid-template-columns: 1.6ch minmax(0, 1fr) auto;
  column-gap: 12px;
  row-gap: 2px;
  padding: 9px 18px;
  color: inherit;
  text-decoration: none;
}

.results a:hover {
  background: var(--ground-2);
}

.results a:hover .r-name {
  color: var(--accent);
}

.r-rank {
  grid-row: 1 / span 2;
  padding-top: 1px;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.r-name {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.r-src {
  justify-self: end;
  font-size: 0.8125rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.r-sum {
  grid-column: 2 / span 2;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.results .empty {
  padding: 16px 18px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.probe-status {
  padding: 10px 18px;
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink-3);
}

/* Step 3: the recorded values beside where they came from. The 1px gap
   over a rule-coloured ground draws the line between them, side by side
   or stacked. */

.ex-split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 1px;
  background: var(--rule);
}

.ex-split > * {
  background: var(--surface);
}

.ex-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}

.ex-table caption {
  padding-bottom: 8px;
  caption-side: top;
  text-align: left;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink);
}

.ex-table caption code {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--ink-3);
}

.ex-table th {
  padding: 4px 0;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--ink-3);
}

.ex-table td {
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
  color: var(--ink-2);
}

.ex-table :is(th, td):last-child {
  text-align: right;
}

.ex-table td:last-child {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink);
}

/* The provenance, marked as the step's text says. */
.ex-prov {
  box-shadow: inset 3px 0 0 var(--accent);
}

.ex-prov .ex-label {
  color: var(--accent);
}

.ex-prov dl {
  display: grid;
  gap: 10px;
  margin: 0;
}

.ex-prov dt {
  font-size: 0.75rem;
  color: var(--ink-3);
}

.ex-prov dd {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.ex-prov dd code {
  font-size: 0.8125rem;
}

.ex-raw summary {
  padding: 11px 18px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--accent);
}

.ex-raw summary:hover {
  color: var(--accent-hover);
}

.ex-raw[open] summary {
  border-bottom: 1px solid var(--rule);
}

.ex-code {
  margin: 0;
  padding: 14px 18px;
  overflow-x: auto;
  background: var(--ground-2);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
  color: var(--ink);
}

.ex-wrap {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The provenance lines inside the full JSON response. */
.prov {
  display: block;
  margin-inline: -18px;
  padding-inline: 15px 18px;
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Step 4: the scripts, cut to their first lines until asked. */

.ex .tablist {
  padding-inline: 8px;
}

.ex-more[data-collapsed] .ex-code {
  max-height: 19rem;
  overflow-y: hidden;
}

.ex-toggle {
  position: relative;
  display: block;
  width: 100%;
  padding: 11px 18px;
  border: 0;
  border-top: 1px solid var(--rule);
  background: var(--surface);
  font: 600 0.875rem/1.4 var(--font-text);
  color: var(--accent);
  text-align: left;
  cursor: pointer;
}

.ex-toggle:hover {
  color: var(--accent-hover);
}

/* A fade over the last visible lines says the script goes on. */
.ex-more[data-collapsed] .ex-toggle::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 64px;
  background: linear-gradient(to bottom, transparent, var(--ground-2));
  pointer-events: none;
}

/* Code panels: the same frame as the "How it works" examples, so every
   code box on the site reads alike. A quiet label bar, then the code on the
   light tint, with the theme's code colours. */

.panel {
  min-width: 0;
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--rule-2);
  border-radius: var(--radius);
  overflow: hidden;
}

.panel-bar {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 14px;
  padding: 8px 16px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.6875rem;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.panel-bar + pre,
.panel-body {
  border-bottom: 1px solid var(--rule);
}

.panel > :last-child {
  border-bottom: 0;
}

.panel pre,
.code {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--ground-2);
  font-size: 0.8125rem;
  line-height: 1.62;
  tab-size: 2;
  color: var(--ink);
}

.panel pre code,
.code code {
  font-size: inherit;
}

.panel .code.scroll {
  max-height: 460px;
  overflow: auto;
}

.panel-bar code {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  font-stretch: normal;
  letter-spacing: 0;
  text-transform: none;
  color: var(--accent);
}

.s-key {
  color: var(--code-key);
}

.s-str {
  color: var(--code-str);
}

.s-num {
  color: var(--code-num);
}

.s-lit {
  color: var(--code-lit);
}

.s-com {
  color: var(--ink-3);
  font-style: italic;
}

.s-fn {
  color: var(--ink);
  font-weight: 500;
}

.panel-body {
  padding: 6px 0;
}

.panel a {
  color: var(--accent);
}

/* Tabs, used by the script and client pickers. */

.tablist {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  border-bottom: 1px solid var(--rule);
}

[role="tab"] {
  margin-bottom: -1px;
  padding: 10px 14px 9px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: none;
  font: 500 0.9375rem/1.2 var(--font-text);
  color: var(--ink-2);
  cursor: pointer;
}

[role="tab"]:hover {
  color: var(--ink);
}

[role="tab"][aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--accent);
}

.panel .tablist {
  padding-inline: 6px;
  border-bottom-color: var(--rule);
}

.panel [role="tab"] {
  font-size: 0.8125rem;
  padding: 8px 10px 7px;
  color: var(--ink-3);
}

.panel [role="tab"]:hover,
.panel [role="tab"][aria-selected="true"] {
  color: var(--ink);
}

.panel [role="tab"][aria-selected="true"] {
  border-bottom-color: var(--accent);
}

/* ---------- Sources ---------- */

.domains {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: 28px 40px;
  margin-top: 22px;
}

.dom h3 {
  font-family: var(--font-text);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rule-2);
}

.dom ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.dom li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 7px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.dom li a {
  color: var(--ink);
  text-decoration: none;
}

.dom li a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.dom li .count {
  margin-left: auto;
}

/* The coverage table sits centred on the page, with its heading, note,
   legend and list toggle centred above and below it. */
.local {
  margin-top: clamp(56px, 7vw, 88px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  gap: 18px;
  text-align: center;
}

.local > p {
  max-width: 66ch;
  color: var(--ink-2);
}

.local .table-wrap {
  width: max-content;
  margin-top: 8px;
}

.local .legend {
  justify-content: center;
}

.local-list {
  justify-self: stretch;
}

.local-list[open] .local-cols {
  text-align: left;
}

.matrix {
  border-collapse: separate;
  border-spacing: 3px;
  font-variant-numeric: tabular-nums;
  margin-inline: -3px;
}

.matrix thead th {
  padding: 0 0 6px;
  font: 600 0.8125rem/1.15 var(--font-mono);
  text-align: center;
  color: var(--ink);
}

.matrix .sgc {
  display: block;
  font-size: 0.6875rem;
  font-weight: 400;
  color: var(--ink-3);
}

.matrix tbody th,
.matrix tfoot th {
  padding: 0 18px 0 0;
  font-size: 0.875rem;
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
  color: var(--ink-2);
}

.matrix td {
  min-width: 54px;
  height: 48px;
  padding: 0 4px;
  text-align: center;
  font: 500 0.9375rem/1 var(--font-mono);
  border-radius: 0;
}

@media (max-width: 900px) {
  .matrix td {
    min-width: 42px;
    height: 40px;
    font-size: 0.875rem;
  }
}

.matrix tbody td.c0 {
  box-shadow: inset 0 0 0 1px var(--rule);
}

.c1 {
  background: var(--c1);
  color: var(--c1-ink);
}

.c2 {
  background: var(--c2);
  color: var(--c2-ink);
}

.c3 {
  background: var(--c3);
  color: var(--c3-ink);
}

.c4 {
  background: var(--c4);
  color: var(--c4-ink);
}

.matrix tfoot td,
.matrix tfoot th {
  height: 40px;
  border-top: 1px solid var(--rule-2);
}

.matrix tfoot td {
  border-radius: 0;
  font-weight: 600;
  color: var(--ink);
}

.legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 18px;
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.legend .sw {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend .sw i {
  width: 14px;
  height: 14px;
  border-radius: 0;
}

.legend .sw i.c0 {
  box-shadow: inset 0 0 0 1px var(--rule-2);
}

.local-list summary {
  cursor: pointer;
  font-weight: 500;
  color: var(--accent);
}

.local-cols {
  margin-top: 18px;
  columns: 3 250px;
  column-gap: 40px;
}

.local-cols > div {
  break-inside: avoid;
  margin-bottom: 20px;
}

.local-cols ul {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  font-size: 0.875rem;
  color: var(--ink-2);
}

.local-cols li {
  padding: 2px 0;
}

/* ---------- Rules ---------- */


/* ---------- Connect ---------- */

.connect {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(24px, 4vw, 56px);
  align-items: start;
}

@media (max-width: 900px) {
  .connect {
    grid-template-columns: minmax(0, 1fr);
  }
}

.connect-note {
  display: grid;
  gap: 14px;
  color: var(--ink-2);
}

.connect-note h2 {
  color: var(--ink);
}

.install-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.clients [role="tabpanel"] {
  padding-top: 18px;
  display: grid;
  gap: 12px;
}

.clients [role="tabpanel"] > p {
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.snippet {
  position: relative;
}

.snippet .panel-bar {
  align-items: center;
}

.snippet .copy {
  padding: 4px 9px;
  border: 1px solid var(--rule);
  border-radius: 0;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.75rem;
  letter-spacing: 0;
  text-transform: none;
}

.snippet .copy:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.path {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: anywhere;
}

/* ---------- Note from the author ---------- */

/* Two balanced columns: the label and the thanks on the left, the list of
   packages and the closing lines on the right. */
.note {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px clamp(24px, 2.5vw, 32px);
  align-items: start;
}

@media (max-width: 900px) {
  .note {
    grid-template-columns: minmax(0, 1fr);
  }
}



.thanks-body {
  display: grid;
  gap: 16px;
  align-content: start;
  max-width: 68ch;
  color: var(--ink-2);
}

.thanks-body > .label {
  margin-bottom: 4px;
}

.thanks-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.thanks-list li {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--rule);
}

@media (max-width: 560px) {
  .thanks-list li {
    grid-template-columns: minmax(0, 1fr);
    gap: 4px;
  }
}

/* ---------- About ---------- */

.about {
  display: grid;
  padding-bottom: clamp(56px, 7vw, 96px);
}

.about-row {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr);
  gap: 12px clamp(20px, 3.4vw, 52px);
  padding-block: 24px 32px;
  border-top: 2px solid var(--ink);
}

.about-row h2,
.about-block h2,
.about-split h2 {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.2rem + 0.6vw, 1.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.about-text {
  display: grid;
  gap: 14px;
}

.about-text p {
  max-width: 66ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-2);
}

@media (max-width: 800px) {
  .about-row {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Short sections as blocks in two columns, each with its heading on top,
   so a paragraph runs the width of a half (about 65 characters) instead
   of sitting in the right two thirds with the last third empty. */
.about-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(24px, 2.5vw, 32px);
  align-items: start;
}

.about-block {
  display: grid;
  gap: 12px;
  align-content: start;
  padding-block: 24px 32px;
  border-top: 2px solid var(--ink);
}

/* The About page's three short sections side by side, one row of three
   equal columns with their tops on one line; they stack below 1000px. */
.about-trio {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: clamp(24px, 2.5vw, 32px);
  align-items: start;
}

.about-trio .about-text p {
  font-size: 1.0625rem;
}

@media (max-width: 1000px) {
  .about-trio {
    grid-template-columns: minmax(0, 1fr);
  }

  .about-trio .about-block {
    padding-block: 20px 24px;
  }
}

/* A long section: its heading on the left half and its introduction on the
   right half, like the section heads, with the rest below at full width. */
.about-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px clamp(24px, 2.5vw, 32px);
  padding-block: 24px 8px;
  border-top: 2px solid var(--ink);
}

@media (max-width: 800px) {
  .about-grid,
  .about-split {
    grid-template-columns: minmax(0, 1fr);
  }
}

.about-block .cmd.prompt code {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* ---------- Case studies ---------- */

/* Each stanza: the count and its verse line on the left, under the hero's
   logo column, with the case's headline and story below them; the chart,
   its source and the calls behind it on the right, at full chart width. */
.stanza {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 24px clamp(24px, 2.5vw, 32px);
  align-items: start;
  padding-block: clamp(44px, 5.5vw, 72px);
  border-top: 2px solid var(--ink);
}

.stanza-text {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--top-h) + 24px);
  display: grid;
  gap: 14px;
}

.stanza-verse {
  margin-bottom: 10px;
}

.stanza-body {
  grid-column: 5 / -1;
  display: grid;
  gap: 16px;
  min-width: 0;
}

.verse-count {
  font-family: var(--font-display);
  font-size: clamp(3rem, 2rem + 3.6vw, 5.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.verse-line {
  margin-top: 10px;
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1rem + 0.8vw, 1.625rem);
  font-style: italic;
  line-height: 1.3;
  color: var(--ink-2);
}

.stanza-text h2 {
  padding-top: 18px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 0.7vw, 1.9rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.stanza-text > p {
  max-width: 68ch;
  color: var(--ink-2);
}

.chart-wrap {
  margin: 0;
}

.chart-wrap .chart {
  display: block;
  width: 100%;
  height: auto;
}

.chart-wrap figcaption {
  margin-top: 10px;
}

.chart-wrap .case-source {
  font-size: 0.8125rem;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}

.how summary {
  width: max-content;
  cursor: pointer;
  font-weight: 600;
  color: var(--accent);
}

.how-body {
  margin-top: 14px;
  display: grid;
  gap: 12px;
}

/* The finale: a tinted band in the page's own theme, the ring as the
   centrepiece, the argument under it, and what one connection reaches. */
.finale {
  background: var(--ground-2);
  color: var(--ink);
  border-top: 2px solid var(--rule-2);
}

.finale-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px) clamp(24px, 2.5vw, 32px);
  align-items: center;
  padding-block: clamp(64px, 8vw, 112px);
}

/* The closing line, as two lines of verse: each half on its own line,
   the second in the accent, sized so neither wraps on a desktop. */
.verse-finale {
  grid-column: 1 / -1;
  display: grid;
  justify-items: center;
  gap: 0.12em;
  text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 0.9rem + 3vw, 3.5rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  color: var(--ink);
  text-wrap: balance;
}

.verse-finale .vf-1,
.verse-finale .vf-2 {
  display: block;
  text-wrap: balance;
}

.verse-finale .vf-2 {
  color: var(--accent);
}

/* The ring is the centrepiece: centred and as wide as the inscription needs
   to stay legible, with the argument in two columns underneath. */
.finale-ring {
  grid-column: 1 / -1;
  margin: 0;
}

.finale-ring .chart {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

.finale-ring figcaption {
  max-width: 60ch;
  margin: 18px auto 0;
  font-size: 0.875rem;
  line-height: 1.5;
  text-align: center;
  color: var(--ink-2);
}

.finale-body {
  grid-column: 1 / -1;
  display: grid;
  gap: 22px;
  justify-items: center;
  text-align: center;
}

.finale-cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px clamp(28px, 4vw, 64px);
  max-width: 1080px;
  text-align: left;
}

@media (max-width: 860px) {
  .finale-cols {
    grid-template-columns: minmax(0, 1fr);
  }
}

.finale-body p {
  max-width: 62ch;
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  color: var(--ink-2);
}

.finale-body .finale-lead {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.4rem);
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.finale-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  margin-top: 6px;
  font-weight: 600;
}

.finale-links a {
  color: var(--accent);
}

.finale-reach {
  grid-column: 1 / -1;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  text-align: center;
}

.finale-reach .label {
  color: var(--accent);
}

.counters {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px clamp(24px, 2.5vw, 32px);
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.counters li {
  display: grid;
  gap: 4px;
}

.counter-n {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.4rem + 2vw, 3.25rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--ink);
}

.counter-l {
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.how-more {
  padding: 10px 16px 14px;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.how-note {
  max-width: 68ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

@media (max-width: 1240px) {
  .stanza-text,
  .stanza-body {
    grid-column: 1 / -1;
  }

  .stanza-text {
    position: static;
  }

  /* Stacked, the chart sits under the story again, on the rule that used
     to separate them. */
  .chart-wrap {
    padding-top: 18px;
    border-top: 1px solid var(--rule);
  }
}

/* Between phone and full width, the verse sits beside the headline and
   story instead of above them. */
@media (min-width: 861px) and (max-width: 1240px) {
  .stanza-text {
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    column-gap: clamp(24px, 2.5vw, 32px);
  }

  .stanza-verse {
    grid-row: 1 / span 2;
    margin-bottom: 0;
  }

  .stanza-text h2 {
    padding-top: 0;
    border-top: 0;
  }
}

@media (max-width: 760px) {
  .counters {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Footer ---------- */

.foot {
  background: var(--panel);
  padding-block: 48px 64px;
  font-size: 0.875rem;
  color: var(--panel-mute);
}

.foot a {
  color: var(--panel-ink);
}

.foot a:hover {
  color: var(--panel-link);
}

.foot .label {
  color: var(--panel-mute);
}

.foot-grid {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 32px 48px;
}

@media (max-width: 800px) {
  .foot-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.foot-grid > div {
  display: grid;
  gap: 10px;
  align-content: start;
}

.foot b {
  color: var(--panel-ink);
  font-weight: 800;
}

.foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 4px;
}

/* ---------- Tool atlas ---------- */

.page-head {
  padding-block: clamp(40px, 5vw, 72px) clamp(28px, 3vw, 40px);
  display: grid;
  gap: 16px;
  align-content: start;
}

.page-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 20ch;
}

.page-head .lede {
  margin-top: 4px;
}

.pinned-tools {
  margin-top: 18px;
  display: grid;
  gap: 10px;
}

.pinned-tools dl {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: 12px 32px;
}

.pinned-tools dl > div {
  padding-top: 10px;
  border-top: 1px solid var(--rule-2);
}

.pinned-tools dt code {
  font-size: 0.875rem;
  font-weight: 500;
}

.pinned-tools dd {
  margin-top: 4px;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.atlas-controls {
  position: sticky;
  top: calc(env(safe-area-inset-top, 0px) + var(--top-h));
  z-index: 20;
  background: var(--ground);
  border-block: 1px solid var(--rule);
  padding-block: 12px;
}

@media (max-width: 760px) {
  .atlas-controls {
    position: static;
  }
}

.atlas-search {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: var(--surface);
  border: 1px solid var(--rule-2);
  border-radius: var(--radius);
}

.atlas-search:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}

.atlas-search input {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1rem/1.4 var(--font-mono);
}

.atlas-status {
  flex: none;
  font-size: 0.8125rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.chip {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 5px 10px;
  border: 1px solid var(--rule-2);
  border-radius: 0;
  background: transparent;
  color: var(--ink-2);
  font: 500 0.8125rem/1.3 var(--font-text);
  cursor: pointer;
}

.chip:hover {
  border-color: var(--ink);
  color: var(--ink);
}

.chip[aria-pressed="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--ground);
}

.chip[aria-pressed="true"] .count {
  color: inherit;
  opacity: 0.75;
}

.atlas-body {
  display: grid;
  grid-template-columns: 210px minmax(0, 1fr);
  gap: 56px;
  padding-block: 12px 96px;
}

.atlas-index {
  position: sticky;
  top: calc(var(--top-h) + 128px);
  align-self: start;
  max-height: calc(100vh - var(--top-h) - 150px);
  overflow-y: auto;
  padding-top: 32px;
  display: grid;
  gap: 22px;
  font-size: 0.875rem;
}

.atlas-index ul {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}

.atlas-index a {
  display: flex;
  gap: 8px;
  padding: 3px 0;
  color: var(--ink-2);
  text-decoration: none;
  line-height: 1.35;
}

.atlas-index a:hover {
  color: var(--accent);
}

.atlas-index .count {
  margin-left: auto;
}

/* One column: the index would sit sticky over the tool list, so it goes;
   the search and the source chips above do its job. After the base rule,
   which would otherwise win. */
@media (max-width: 900px) {
  .atlas-body {
    grid-template-columns: minmax(0, 1fr);
  }

  .atlas-index {
    display: none;
  }
}

.mod,
.tool {
  scroll-margin-top: calc(var(--top-h) + 132px);
}

@media (max-width: 760px) {
  .mod,
  .tool {
    scroll-margin-top: calc(var(--top-h) + 16px);
  }
}

.mod {
  padding-block: 32px 12px;
  border-top: 1px solid var(--rule-2);
}

.mod:first-child {
  border-top: 0;
}

.mod-head {
  display: grid;
  gap: 8px;
  margin-bottom: 14px;
}

.mod-head h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.75rem;
  line-height: 1.12;
  letter-spacing: -0.015em;
}

.mod-prefix {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.mod-prefix code {
  font-size: 0.75rem;
  padding: 1px 6px;
  border: 1px solid var(--rule-2);
  border-radius: 0;
  color: var(--ink-2);
}

.mod-desc {
  max-width: 76ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.mod-more summary {
  width: max-content;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
}

.mod-more[open] summary {
  margin-bottom: 8px;
}

.mod-meta,
.pinned {
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.mod-meta code {
  font-size: 0.75rem;
}

.fam {
  margin: 26px 0 4px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}

.tool {
  border-top: 1px solid var(--rule);
}

.tool:last-child {
  border-bottom: 1px solid var(--rule);
}

.tool summary {
  display: grid;
  grid-template-columns: minmax(0, 21rem) minmax(0, 1fr) 16px;
  gap: 2px 22px;
  align-items: baseline;
  padding: 11px 0;
  cursor: pointer;
  list-style: none;
}

.tool summary::-webkit-details-marker {
  display: none;
}

.tool summary::after {
  content: "+";
  justify-self: end;
  font-family: var(--font-mono);
  color: var(--ink-3);
}

.tool[open] summary::after {
  content: "−";
}

.tool summary:hover .t-name {
  color: var(--accent);
}

.t-rank {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--amber);
  margin-right: 8px;
}

.t-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--ink);
  overflow-wrap: anywhere;
}

.t-sum {
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-2);
}

@media (max-width: 700px) {
  .tool summary {
    grid-template-columns: minmax(0, 1fr) 16px;
  }

  .t-sum {
    grid-column: 1;
    grid-row: 2;
  }
}

/* An open tool: what it is for and its keywords, then its parameters and
   an example call. In a narrow row these stack in that order (the two
   wrappers step aside); where the row is wide, they are two columns, so
   the text keeps a readable measure and the right half is not left empty.
   The row, not the viewport, decides: the atlas column is narrower than
   the page beside its index. */
.tool {
  container-type: inline-size;
}

.t-body {
  display: grid;
  gap: 14px;
  max-width: 900px;
  padding: 2px 0 22px;
}

.t-main,
.t-side {
  display: contents;
}

.t-side .table-wrap {
  order: 1;
}

.t-kw {
  order: 2;
}

.t-side .call {
  order: 3;
}

@container (min-width: 860px) {
  .t-body {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 2.5vw, 36px);
    align-items: start;
  }

  .t-main,
  .t-side {
    display: grid;
    gap: 14px;
    align-content: start;
    min-width: 0;
  }

  .t-main > *,
  .t-side > * {
    order: 0;
  }

  .t-use {
    max-width: 72ch;
  }

  /* A long call wraps in its half rather than scrolling sideways. */
  .t-side .call {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

.t-use {
  max-width: 78ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.t-use b {
  margin-right: 6px;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}

.params {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}

.params th {
  padding: 6px 14px 6px 0;
  border-bottom: 1px solid var(--rule-2);
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.params td {
  padding: 7px 14px 7px 0;
  border-bottom: 1px solid var(--rule);
  vertical-align: top;
}

.params td:first-child {
  white-space: nowrap;
}

.params .type {
  color: var(--ink-2);
  overflow-wrap: anywhere;
}

.req {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--amber);
}

.t-kw {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 28px;
  font-size: 0.8125rem;
}

@media (max-width: 700px) {
  .t-kw {
    grid-template-columns: minmax(0, 1fr);
  }
}

.t-kw dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.t-kw dd {
  margin-top: 3px;
  color: var(--ink-2);
}

.call {
  margin: 0;
  padding: 10px 12px;
  overflow-x: auto;
  background: var(--ground-2);
  border-radius: var(--radius);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--ink);
}

.call code {
  font-size: inherit;
}

.call .s-key {
  color: var(--code-key);
}

.call .s-str {
  color: var(--code-str);
}

.call .s-num {
  color: var(--code-num);
}

.call .s-lit {
  color: var(--code-lit);
}

.atlas-results .top-cut {
  margin: 18px 0 6px;
}

.atlas-results .none {
  padding: 28px 0;
  color: var(--ink-2);
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  .results li {
    animation: rise 0.18s ease-out both;
  }

  @keyframes rise {
    from {
      transform: translateY(3px);
    }
    to {
      transform: none;
    }
  }
}

/* ---------- Connect page ---------- */

.connect-note h2,
.guide h2,
.guide-grid h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.6rem, 1.25rem + 1.2vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.connect-note h2 {
  font-size: clamp(1.95rem, 1.35rem + 1.9vw, 2.95rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.guide {
  display: grid;
  gap: clamp(48px, 6vw, 80px);
  padding-block: 8px clamp(64px, 8vw, 104px);
}

.section .guide {
  padding-block: 0;
}

.guide-step {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.62fr);
  gap: clamp(20px, 3.4vw, 52px);
  align-items: start;
}

@media (max-width: 900px) {
  .guide-step {
    grid-template-columns: minmax(0, 1fr);
  }
}

.guide-body {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.notice {
  padding: 12px 16px;
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 0.9375rem;
  color: var(--ink-2);
}

.notice b {
  color: var(--ink);
}

.notice code {
  overflow-wrap: anywhere;
}

.prompts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.prompts li {
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  font-size: 1rem;
  line-height: 1.5;
}

.prompts li::before {
  content: "›";
  margin-right: 10px;
  font-family: var(--font-mono);
  color: var(--accent);
}

.env td:first-child {
  white-space: normal;
}

.env td:first-child code {
  white-space: nowrap;
}

.faq {
  display: grid;
  gap: 18px;
}

.faq > div {
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}

.faq dt {
  font-weight: 600;
}

.faq dd {
  margin-top: 6px;
  max-width: 70ch;
  color: var(--ink-2);
}

/* Wide enough, each question sits beside its answer, so the list fills the
   column instead of leaving its right third empty. */
@media (min-width: 1100px) {
  .faq > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: 6px clamp(20px, 2vw, 28px);
  }

  .faq dd {
    margin-top: 0;
  }
}

/* ---------- One MCP to rule them all ---------- */

.kicker {
  grid-column: 1 / -1;
  margin-bottom: -8px;
  font-size: 0.875rem;
  font-weight: 800;
  font-stretch: 110%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}

/* Same columns as the hero: the verse under the logo, the argument under
   the hero text, with the paragraph and the three claims side by side
   below the headline, so the block is about as tall as the verse. */
.thesis .wrap {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(28px, 3.5vw, 48px) clamp(24px, 2.5vw, 32px);
  align-items: start;
}

.thesis .verse {
  grid-column: 1 / span 4;
}

.thesis-body {
  grid-column: 5 / -1;
}

@media (max-width: 1240px) {
  .thesis .verse,
  .thesis-body {
    grid-column: 1 / -1;
  }
}

/* The home page's verse uses the case-study stanzas' count and line
   styles, smaller, so the three counts stack in the logo column. */
.verse .verse-count {
  font-size: clamp(2.4rem, 1.8rem + 2vw, 3.5rem);
}

.verse .verse-count:not(:first-child) {
  margin-top: 18px;
}

.verse .verse-line {
  margin-top: 6px;
  font-size: clamp(1.15rem, 1rem + 0.5vw, 1.375rem);
}

/* Stacked above the argument, the three counts run across in a row. */
@media (min-width: 861px) and (max-width: 1240px) {
  .thesis .verse {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto;
    grid-auto-flow: column;
    column-gap: clamp(24px, 2.5vw, 32px);
  }

  .verse .verse-count:not(:first-child) {
    margin-top: 0;
  }

  .thesis .verse-aside {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

.verse-aside {
  margin-top: 18px;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--accent);
}

.thesis-body {
  display: grid;
  gap: 22px;
}

/* The three claims run as one row across the full width, under the verse
   and the argument. */
.thesis .claims {
  grid-column: 1 / -1;
}

.thesis-body h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.95rem, 1.35rem + 1.9vw, 2.95rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
}

.thesis-body p {
  max-width: 66ch;
  color: var(--ink-2);
}

.claims {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 32px;
}

@media (max-width: 860px) {
  .claims {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }
}

.claims > div {
  display: grid;
  gap: 10px;
  align-content: start;
  padding-top: 16px;
  border-top: 2px solid var(--ink);
}

.claims h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.claims p {
  color: var(--ink-2);
}


/* The headline is one line beside the logo; French runs longer, so smaller.
   Measured in Source Serif 4 at 700: the English line is 10.2 em wide, the
   French 13.1 em; both fit the eight-column text block. */
@media (min-width: 1241px) {
  .hero {
    --h1-size: min(5.5vw, 5.1rem);
  }

  html[lang="fr"] .hero {
    --h1-size: min(4.3vw, 4rem);
  }

  .hero h1 {
    font-size: var(--h1-size);
    white-space: nowrap;
  }
}

/* ---------- Light / dark switch ---------- */

.theme {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 10px;
  border: 1px solid var(--rule-2);
  background: transparent;
  color: var(--ink);
  font: 600 0.875rem/1.2 var(--font-text);
  cursor: pointer;
}

.theme:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.theme svg {
  width: 16px;
  height: 16px;
  flex: none;
}

.theme .sun,
:root[data-theme="dark"] .theme .moon {
  display: none;
}

:root[data-theme="dark"] .theme .sun {
  display: block;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .moon {
    display: none;
  }

  :root:not([data-theme="light"]) .theme .sun {
    display: block;
  }
}

@media (max-width: 560px) {
  .theme [data-theme-label] {
    display: none;
  }
}

/* ---------- Contributing ---------- */

.contrib-h {
  margin-bottom: 24px;
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.contrib-ways {
  padding-bottom: clamp(40px, 5vw, 64px);
}

.contrib-ways .claims p + p {
  margin-top: 10px;
  font-weight: 600;
}

.contrib-note {
  margin-top: 28px;
  max-width: 72ch;
  color: var(--ink-2);
}

.contrib-more .cmd.prompt {
  margin-top: 14px;
}

/* The process for code: the seven steps in two balanced columns, read
   down the first and then the second (the numbers keep the order), each
   with its terminal panel, if any, under its text. Columns rather than
   rows, so a short step next to a long one leaves no hole. */
.guide-grid {
  display: grid;
  gap: clamp(28px, 3vw, 40px);
}

.guide-grid > .contrib-h {
  margin-bottom: 0;
}

.step-grid {
  columns: 2;
  column-gap: clamp(32px, 4vw, 64px);
}

.step-grid .guide-step {
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  break-inside: avoid;
  padding-bottom: clamp(32px, 3.5vw, 48px);
}

.step-grid .guide-step h2 {
  font-size: clamp(1.5rem, 1.25rem + 0.8vw, 1.875rem);
}

.step-grid .step-text {
  position: static;
}

.step-grid .step-text p {
  max-width: 66ch;
}

@media (max-width: 900px) {
  .step-grid {
    columns: 1;
  }
}

.contrib-rules {
  margin: 0;
  padding-left: 1.1em;
  display: grid;
  gap: 8px;
  color: var(--ink-2);
}

/* ---------- Home: the Statistics Canada feature link ---------- */

.sources-feature {
  margin-top: 28px;
}

/* Across the full width: the title on the left half, the description on
   the right half, on the same line as the section heads above. */
.sources-feature a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 6px clamp(24px, 2.5vw, 32px);
  align-items: baseline;
  padding: 18px 22px;
  border: 2px solid var(--ink);
  color: var(--ink-2);
  text-decoration: none;
}

.sources-feature a:hover {
  border-color: var(--accent);
}

.sources-feature strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--accent);
}


@media (max-width: 900px) {
  .sources-feature a {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- About: alternatives ---------- */

/* Other ways to reach Canadian data, grouped by kind. Each group is a
   subheading with a one-sentence note, then its entries. Every entry has the
   same two lines: the name with its owner and language, then one line of
   description. From 900px the entries run in two columns, row by row, so
   the list uses the width without long empty lines. */
.alt-groups {
  gap: 0;
  padding-bottom: 8px;
}

.alt-group {
  display: grid;
  gap: 14px;
  margin-top: 36px;
}

.alt-head {
  display: grid;
  gap: 4px;
}

.alt-group h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.2;
}

.about-text .alt-note {
  max-width: none;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-3);
}

.alt-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

@media (min-width: 900px) {
  .alt-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: clamp(24px, 2.5vw, 32px);
    border-bottom: 0;
  }

  /* Each column ends on its own rule; with an odd count the right column
     ends a row earlier than the left. */
  .alt-list li:nth-last-child(-n + 2) {
    border-bottom: 1px solid var(--rule);
  }
}

.alt-list li {
  display: grid;
  gap: 2px;
  align-content: start;
  padding-block: 12px 13px;
  border-top: 1px solid var(--rule);
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.alt-top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 2px 12px;
  min-width: 0;
}

.alt-name {
  display: flex;
  flex-wrap: wrap;
  gap: 0 12px;
  min-width: 0;
}

.alt-name a {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.alt-meta {
  font-size: 0.875rem;
  color: var(--ink-3);
}

.alt-group > .alt-note {
  margin-top: -2px;
}

.alt-groups > p:last-child {
  margin-top: 36px;
}

/* The home page links here. On phones the wrapped header is about 158px
   tall (measured at 390px), more than html's scroll-padding-top allows,
   so without this the jump lands with the heading under the header. */
@media (max-width: 560px) {
  #alternatives {
    scroll-margin-top: 48px;
  }
}

/* ---------- Statistics Canada page ---------- */

/* A technical post: the contents list in a sticky column on the left, a
   reading column of about 70 characters, margin notes in the space to its
   right, and code boxes and tables that break out across both. Everything
   is scoped to .post. */

.post {
  --measure: 34.5rem;
  --note-gap: 3.5rem;
  --note-max: 24rem;
}

.post-shell {
  display: grid;
  grid-template-columns: 13.5rem minmax(0, 1fr);
  grid-template-areas:
    "toc head"
    "toc body";
  column-gap: clamp(40px, 4.4vw, 72px);
  padding-block: clamp(40px, 5vw, 72px) clamp(64px, 7vw, 104px);
}

.post-head {
  grid-area: head;
  display: grid;
  gap: 18px;
  padding-bottom: clamp(28px, 3vw, 40px);
  margin-bottom: clamp(32px, 3.4vw, 48px);
  border-bottom: 2px solid var(--ink);
}

.post-head h1 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(2.3rem, 1.5rem + 2.8vw, 3.9rem);
  line-height: 1.02;
  letter-spacing: -0.028em;
  max-width: 17ch;
}

.post-dek {
  max-width: 44rem;
  font-size: clamp(1.1875rem, 1.1rem + 0.35vw, 1.375rem);
  line-height: 1.5;
  color: var(--ink-2);
}

.post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 10px;
  font-size: 0.9375rem;
  color: var(--ink-3);
}

.post-byline a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.post-byline a:hover {
  color: var(--accent);
  text-decoration: underline;
}

/* The contents list. */
.post-toc {
  grid-area: toc;
  align-self: start;
  position: sticky;
  top: calc(var(--top-h) + 28px);
  max-height: calc(100vh - var(--top-h) - 56px);
  overflow-y: auto;
  font-size: 0.9375rem;
  line-height: 1.35;
}

.post-toc summary {
  display: block;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--ink);
  list-style: none;
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.post-toc summary::-webkit-details-marker {
  display: none;
}

.post-toc ol {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: post-toc;
}

.post-toc li {
  counter-increment: post-toc;
}

.post-toc a {
  display: grid;
  grid-template-columns: 1.75rem minmax(0, 1fr);
  align-items: baseline;
  padding: 8px 0 8px 10px;
  border-bottom: 1px solid var(--rule);
  border-left: 2px solid transparent;
  color: var(--ink-2);
  text-decoration: none;
}

.post-toc a::before {
  content: counter(post-toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}

.post-toc a:hover {
  color: var(--accent);
}

.post-toc a[aria-current] {
  border-left-color: var(--accent);
  color: var(--ink);
  font-weight: 600;
}

.post-toc a[aria-current]::before {
  color: var(--accent);
}

/* The article. Prose keeps to the measure; notes float into the space on
   its right; .post-wide spans both. */
.post-body {
  grid-area: body;
  min-width: 0;
  font-size: 1.125rem;
  line-height: 1.65;
}

.post-sec {
  display: flow-root;
}

.post-sec + .post-sec {
  margin-top: clamp(52px, 5.5vw, 80px);
  padding-top: clamp(28px, 3vw, 40px);
  border-top: 1px solid var(--rule);
}

.post-sec > * + * {
  margin-top: 1.1em;
}

.post-sec > h2,
.post-sec > h3,
.post-sec > p,
.post-sec > ul,
.post-sec > dl,
.post-story {
  max-width: var(--measure);
}

.post-sec > h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(1.75rem, 1.35rem + 1.3vw, 2.4rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}

.post-sec > h2 + * {
  margin-top: 0.9em;
}

.post-sec > h3,
.post-story h3 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.3125rem;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.post-sec > h3 {
  margin-top: 1.6em;
}

.post-sec > h3 + p {
  margin-top: 0.4em;
}

.post-body :not(pre) > code {
  overflow-wrap: anywhere;
}

.post-body p a code,
.post-body dd a code {
  color: inherit;
}

.post-note {
  float: right;
  clear: right;
  width: calc(100% - var(--measure) - var(--note-gap));
  max-width: var(--note-max);
  margin: 0.3em 0 1.4em;
  padding-top: 12px;
  border-top: 2px solid var(--ink);
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-2);
}

.post-sec > .post-note {
  margin-top: 0.3em;
}

.post-note p + p {
  margin-top: 6px;
}

.post-note .fig {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.6rem + 1.1vw, 2.7rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
  overflow-wrap: anywhere;
}

.post-wide,
.post-sec > .post-wide {
  clear: both;
  width: 100%;
  max-width: none;
}

.post-sec > .post-wide,
.post-sec > .post-call {
  margin-block: 1.5em 1.6em;
}

.post-call {
  max-width: var(--measure);
}

.post-call.post-wide {
  max-width: none;
}

.post-body .panel pre {
  font-size: 0.8125rem;
  line-height: 1.6;
}

/* The fields of an observation, two by two across the wide column. */
.post-sec > .post-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 clamp(28px, 3.4vw, 48px);
  margin-block: 1.2em 1.5em;
}

.post-fields > div {
  display: grid;
  align-content: start;
  gap: 4px;
  padding-block: 12px 16px;
  border-top: 1px solid var(--rule-2);
}

.post-fields dt code {
  font-size: 0.875rem;
  font-weight: 500;
}

.post-fields dd {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--ink-2);
}

/* War stories: the file the fix lives in, then the story. */
.post-sec > .post-story {
  margin-top: 2em;
}

.post-where .tag {
  font-size: 0.75rem;
  color: var(--accent);
}

.post-story h3 {
  margin-top: 4px;
}

.post-story h3 + p {
  margin-top: 0.4em;
}

/* Prose tables: the variance methods and the script routes. */
.post-table {
  font-size: 0.9375rem;
}

.post-table td {
  line-height: 1.5;
}

.post-table td:first-child {
  white-space: normal;
}

.post-variance td:nth-child(2),
.post-variance td:nth-child(3) {
  white-space: nowrap;
}

.post-variance .count {
  margin-left: 2px;
}

.post-scripts-table td:first-child {
  width: 34%;
}

.post-cells caption {
  padding-bottom: 8px;
  caption-side: top;
  text-align: left;
  font-size: 0.875rem;
  color: var(--ink-3);
}

.post-cells td:not(:first-child),
.post-cells th:not(:first-child) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.post-cells th code {
  font-size: 0.75rem;
  text-transform: none;
  letter-spacing: 0;
}

/* Every family, grouped, as a compact index. */
.post-families {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px clamp(24px, 3vw, 40px);
}

.post-family h3 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--ink);
  font-size: 0.75rem;
  font-weight: 600;
  font-stretch: 87.5%;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--ink-3);
}

.post-family ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.post-family li {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 12px;
  padding-block: 8px;
  border-bottom: 1px solid var(--rule);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.post-family a {
  color: var(--ink);
  font-weight: 600;
  text-decoration: none;
}

.post-family a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.post-family .tag {
  grid-column: 1;
  font-size: 0.75rem;
  color: var(--ink-3);
}

.post-family .count {
  grid-column: 2;
  grid-row: 1;
  font-size: 0.8125rem;
}

/* Where to go next. */
.post-next {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rule);
}

.post-next li {
  display: grid;
  gap: 2px;
  padding-block: 14px;
  border-bottom: 1px solid var(--rule);
}

.post-next a {
  font-family: var(--font-display);
  font-size: 1.3125rem;
  font-weight: 700;
  line-height: 1.25;
}

.post-next span {
  font-size: 1rem;
  color: var(--ink-2);
}

/* 1240 px and below: the contents list moves above the article and folds
   up; the post centres in the width it needs. */
@media (max-width: 1240px) {
  .post-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "head"
      "toc"
      "body";
    max-width: calc(var(--measure) + var(--note-gap) + var(--note-max) + 2 * var(--gutter));
  }

  .post-toc {
    position: static;
    max-height: none;
    overflow: visible;
    margin-bottom: clamp(32px, 4vw, 48px);
  }

  .post-toc summary {
    display: flex;
    justify-content: space-between;
    cursor: pointer;
  }

  .post-toc summary::after {
    content: "+";
    font-family: var(--font-mono);
    font-size: 1rem;
    line-height: 1;
    letter-spacing: 0;
    color: var(--ink);
  }

  .post-toc details[open] summary::after {
    content: "−";
  }

  .post-toc ol {
    columns: 2;
    column-gap: 32px;
  }

  .post-toc li {
    break-inside: avoid;
  }
}

/* Too narrow for notes beside the text: they join the column as asides. */
@media (max-width: 1000px) {
  .post-note,
  .post-sec > .post-note {
    float: none;
    width: auto;
    max-width: var(--measure);
    margin: 1.3em 0;
    padding: 12px 16px 14px;
    border-top: 0;
    border-left: 3px solid var(--accent);
    background: var(--ground-2);
  }

  .post-note .fig {
    font-size: 1.75rem;
  }

  .post-families {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .post-body {
    font-size: 1.0625rem;
  }

  .post-toc ol {
    columns: 1;
  }

  .post-sec > .post-fields {
    grid-template-columns: minmax(0, 1fr);
  }

  .post-families {
    grid-template-columns: minmax(0, 1fr);
  }

  /* The prose tables stack: one block per row, header cells hidden and, in
     the variance table, named by each cell's data-label. */
  .post-table thead {
    display: none;
  }

  .post-table tr,
  .post-table td {
    display: block;
    width: auto;
  }

  .post-table tr {
    padding-block: 12px;
    border-bottom: 1px solid var(--rule);
  }

  .post-table td {
    padding: 0;
    border: 0;
  }

  .post-table td:first-child,
  .post-scripts-table td:first-child {
    width: auto;
    margin-bottom: 4px;
    font-weight: 600;
  }

  .post-variance td:nth-child(2),
  .post-variance td:nth-child(3) {
    white-space: normal;
  }

  .post-cells td:not(:first-child) {
    text-align: left;
  }

  .post-table td[data-label]::before {
    content: attr(data-label) " ";
    margin-right: 6px;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
  }
}

/* ---------- Sources: the short home summary and the full page ---------- */

.source-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px clamp(24px, 2.5vw, 32px);
  margin: 8px 0 0;
  padding-top: 22px;
  border-top: 1px solid var(--rule);
}

.source-stats dt {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 1.6vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--accent);
  font-variant-numeric: lining-nums;
}

.source-stats dd {
  margin: 6px 0 0;
  max-width: 24ch;
  font-size: 0.9375rem;
  color: var(--ink-2);
}

@media (max-width: 760px) {
  .source-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.source-links {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  font-weight: 600;
}

.sources-note {
  margin: 6px 0 18px;
  color: var(--ink-3);
  font-size: 0.9375rem;
}

h2.sub {
  margin-bottom: 0;
}

/* ---------- Home: what you can do with it ---------- */

/* One case shown in full (the text beside its chart), then the other
   seven as a compact list of links. */
.feature-case {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
  gap: 24px clamp(24px, 3vw, 48px);
  align-items: start;
  padding-top: 24px;
  border-top: 2px solid var(--rule-2);
}

.feature-text {
  display: grid;
  gap: 14px;
}

.feature-text h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.015em;
}

.feature-text p {
  color: var(--ink-2);
}

.feature-case .chart-wrap {
  margin: 0;
  padding-top: 0;
  border-top: 0;
}

.use-who {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.feature-text .source-links {
  margin-top: 4px;
}

.uses-more-label {
  margin-top: clamp(32px, 4vw, 48px);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.uses-more {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: 0 clamp(24px, 3vw, 40px);
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.uses-more a {
  display: block;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  color: var(--ink-2);
  text-decoration: none;
}

.uses-more a:hover span {
  color: var(--accent);
  text-decoration: underline;
}

.uses-more b {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--accent);
}

.uses-more span {
  font-family: var(--font-display);
  font-size: 1.0625rem;
  color: var(--ink);
}

@media (max-width: 1000px) {
  .feature-case {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---------- Home: the ring, the same size as on the case studies ---------- */

.home-ring .wrap {
  display: grid;
  justify-items: center;
  gap: 24px;
  text-align: center;
}

.home-ring .verse-finale {
  font-size: clamp(1.6rem, 0.9rem + 2.4vw, 3rem);
}

.home-ring-fig {
  width: 100%;
  max-width: 680px;
  margin: 0;
}

.home-ring-fig .chart {
  width: 100%;
  height: auto;
}

.home-ring .source-links {
  justify-content: center;
  margin-top: 0;
}


/* ---------- Print ----------
   The header keeps only the brand, and controls that do nothing on paper
   (nav, language and theme switches, copy buttons) go. Charts are handled
   in charts.css. */
@media print {
  .top {
    position: static;
  }

  .skip,
  .nav,
  .top-end,
  .theme,
  [data-copy-target],
  .copy {
    display: none !important;
  }

  .step-text,
  .stanza-text,
  .atlas-index {
    position: static;
  }

  figure,
  pre,
  .panel {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ---------- Accessibility: focus, no-JS fallbacks, chart data ---------- */

/* Boxes that scroll sideways take keyboard focus (build_site.py gives them
   tabindex="0"). The ring is drawn inside, where a panel's rounded,
   clipped edge cannot hide it. */
pre[tabindex]:focus-visible,
.table-wrap[tabindex]:focus-visible,
.cmd code[tabindex]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

/* Without JavaScript every tab panel shows, each under its tab's name, and
   the controls that only work with scripts are not offered. */
.tab-name {
  margin: 18px 0 8px;
  font-weight: 600;
}

.js .tab-name,
html:not(.js) [role="tablist"],
html:not(.js) [data-copy-target],
html:not(.js) .probe-input,
html:not(.js) .probe-try,
html:not(.js) label[for="search-q"],
html:not(.js) .atlas-search input,
html:not(.js) .chips {
  display: none;
}

/* The numbers behind each chart (site_charts.with_table). */
.chart-data {
  margin-top: 12px;
  font-size: 0.8125rem;
}

.chart-data summary {
  cursor: pointer;
  width: fit-content;
  font-weight: 600;
  color: var(--accent);
}

.chart-data .table-wrap {
  margin-top: 8px;
}

.chart-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.chart-table caption {
  padding-bottom: 6px;
  text-align: left;
  color: var(--ink-2);
}

.chart-table th,
.chart-table td {
  padding: 5px 12px 5px 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  font-weight: 400;
}

.chart-table thead th {
  border-bottom-color: var(--rule-2);
  font-weight: 600;
  color: var(--ink-3);
}

.chart-table .num {
  text-align: right;
  white-space: nowrap;
}

.finale-ring .chart-data,
.home-ring-fig .chart-data {
  max-width: 680px;
  margin-inline: auto;
  text-align: left;
}

/* 404.html */
.not-found {
  display: grid;
  gap: 28px;
  padding-block: 64px;
}