@font-face {
  font-family: 'Piazzolla Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/piazzolla-latin-ext-opsz-normal.f2618a9735.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Piazzolla Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/piazzolla-latin-opsz-normal.68a923967d.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Piazzolla Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/piazzolla-latin-ext-opsz-italic.8d2558e84e.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Piazzolla Variable';
  font-style: italic;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/piazzolla-latin-opsz-italic.a649826fa4.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Commissioner Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/commissioner-latin-ext-wght-normal.bd6c9bcd8f.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Commissioner Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/assets/fonts/commissioner-latin-wght-normal.e3d539b926.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: 'Libre Bodoni Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/libre-bodoni-latin-ext-wght-normal.b4b962f48e.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: 'Libre Bodoni Variable';
  font-style: normal;
  font-display: swap;
  font-weight: 400 700;
  src: url(/assets/fonts/libre-bodoni-latin-wght-normal.7b06869e6f.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/*
 * site.css
 * The Countersign's stylesheet: a calm, document-like page for long
 * reading. Libre Bodoni for the nameplate and headlines, Piazzolla for
 * text, Commissioner for labels and navigation. Blue-black ink on near-white paper, with signature blue as
 * the one accent; dark mode follows the reader's system setting.
 *
 * Created: 2026-11-04
 * Last modified: 2026-11-05
 */

:root {
  --paper: #fafaf8;
  --panel: #eff0f4;
  --ink: #1a1d2a;
  --ink-soft: #444858;
  --muted: #595d6e;
  --rule: #d7d9e1;
  --rule-strong: #9a9db0;
  --sign: #2b3699;
  --sign-deep: #1c246f;
  --sign-tint: #e5e8f8;
  --mark-first: var(--ink);
  --mark-second: var(--sign);
  --chart-1: #3a48b5;
  --chart-2: #c4562a;
  --chart-context: #8a8d9e;

  --serif: 'Piazzolla Variable', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --display: 'Libre Bodoni Variable', 'Bodoni 72', 'Didot', Georgia, serif;
  --sans: 'Commissioner Variable', 'Segoe UI', system-ui, sans-serif;

  --measure: 38rem;
  --page-width: 74rem;
  --aside-width: 13rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  color-scheme: light dark;
}

/* Dark mode follows the system setting unless the reader has chosen light
   with the header switch, and applies whenever they have chosen dark. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #12141b;
    --panel: #1b1e28;
    --ink: #e8e9ef;
    --ink-soft: #c2c5d2;
    --muted: #a5a9b9;
    --rule: #2f3344;
    --rule-strong: #565b72;
    --sign: #aab4ff;
    --sign-deep: #cfd4ff;
    --sign-tint: #232947;
    --chart-1: #6f7ce8;
    --chart-2: #c9632f;
    --chart-context: #6b6f80;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --paper: #12141b;
  --panel: #1b1e28;
  --ink: #e8e9ef;
  --ink-soft: #c2c5d2;
  --muted: #a5a9b9;
  --rule: #2f3344;
  --rule-strong: #565b72;
  --sign: #aab4ff;
  --sign-deep: #cfd4ff;
  --sign-tint: #232947;
  --chart-1: #6f7ce8;
  --chart-2: #c9632f;
  --chart-context: #6b6f80;
}

:root[data-theme='light'] {
  color-scheme: light;
}

/* Base */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem);
  line-height: 1.6;
  font-optical-sizing: auto;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}

main {
  display: block;
}

main:focus {
  outline: none;
}

a {
  color: var(--sign);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

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

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

p,
ul,
ol,
dl,
blockquote {
  margin: 0 0 1.1em;
}

ul,
ol {
  padding-left: 1.4em;
}

li {
  margin-bottom: 0.4em;
}

li::marker {
  color: var(--muted);
}

h1,
h2,
h3 {
  font-family: var(--display);
  color: var(--ink);
  text-wrap: balance;
}

h1 {
  font-size: clamp(2.125rem, 1.45rem + 2.8vw, 3.375rem);
  font-weight: 620;
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0 0 1rem;
}

h2 {
  font-size: clamp(1.4375rem, 1.25rem + 0.8vw, 1.75rem);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.008em;
  margin: 2.75rem 0 0.75rem;
}

h3 {
  font-size: 1.1875rem;
  font-weight: 640;
  line-height: 1.3;
  margin: 2rem 0 0.4rem;
}

p,
li {
  text-wrap: pretty;
}

strong {
  font-weight: 650;
}

code {
  font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.85em;
  background: var(--panel);
  padding: 0.1em 0.3em;
  border-radius: 2px;
}

hr {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: 2.5rem 0;
}

sup {
  line-height: 0;
}

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

.skip-link {
  position: absolute;
  left: var(--gutter);
  top: 0.75rem;
  z-index: 10;
  padding: 0.5rem 0.9rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
  color: var(--paper);
}

.separator {
  color: var(--rule-strong);
}

/* The mark */

.mark {
  display: block;
  width: 2.5rem;
  height: auto;
  flex: none;
}

.mark-line {
  stroke: var(--rule-strong);
}

.mark-first {
  stroke: var(--mark-first);
}

.mark-second {
  stroke: var(--mark-second);
}

/* Preview banner (preview builds only) */

.preview-banner {
  margin: 0;
  padding: 0.5rem var(--gutter);
  background: var(--sign);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 600;
  text-align: center;
}

/* Header: a letterhead with a double rule */

.site-header {
  border-bottom: 3px double var(--rule-strong);
}

.site-header-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 1.25rem var(--gutter) 1.1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.9rem 2.5rem;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  color: var(--ink);
  text-decoration: none;
}

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

.wordmark-name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 640;
  letter-spacing: -0.01em;
  line-height: 1;
}

.site-nav ul,
.footer-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.4rem;
}

.site-nav li,
.footer-nav li {
  margin: 0;
}

.site-nav a {
  display: inline-block;
  padding: 0.3rem 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 520;
  color: var(--ink);
  text-decoration: none;
}

.site-nav a:hover {
  color: var(--sign);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.site-nav a[aria-current='page'] {
  color: var(--sign);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.35em;
}

.site-header-end {
  display: flex;
  align-items: center;
  gap: 0.5rem 1.4rem;
  flex-wrap: wrap;
}

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--rule-strong);
  border-radius: 50%;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}

.theme-toggle[hidden] {
  display: none;
}

/* On narrow screens the switch sits beside the name, top right, rather
   than wrapping under the navigation. */
@media (max-width: 40rem) {
  .site-header-inner {
    position: relative;
  }

  .theme-toggle {
    position: absolute;
    top: 1.05rem;
    right: var(--gutter);
  }
}

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

.theme-toggle:focus-visible {
  outline: 2px solid var(--sign);
  outline-offset: 2px;
}

.theme-icon {
  width: 1.1rem;
  height: 1.1rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.theme-icon--moon {
  fill: currentColor;
  stroke: none;
}

/* The icon shows the theme you would switch to. */
.theme-toggle[aria-pressed='true'] .theme-icon--moon,
.theme-toggle[aria-pressed='false'] .theme-icon--sun {
  display: none;
}

/* Page layout: a text column with a wide left margin on large screens,
   like a document with room for margin notes. */

.page {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: clamp(2.25rem, 6vw, 4.5rem) var(--gutter) clamp(3rem, 7vw, 5.5rem);
}

.prose,
.page-header {
  max-width: var(--measure);
}

.page-header {
  margin-bottom: 2.25rem;
}

.lede,
.dek {
  font-size: clamp(1.1875rem, 1.05rem + 0.55vw, 1.4375rem);
  line-height: 1.45;
  color: var(--ink-soft);
  margin: 0;
}

.prose > :first-child,
.standard > h2:first-child {
  margin-top: 0;
}

@media (min-width: 60rem) {
  .page:not(.home):not(.story) {
    display: grid;
    grid-template-columns: var(--aside-width) minmax(0, var(--measure));
    column-gap: clamp(3rem, 6vw, 5.5rem);
    align-items: start;
  }

  .page:not(.home):not(.story) > .page-header,
  .page:not(.home):not(.story) > .page-content {
    grid-column: 2;
  }

  .page-with-aside .page-aside {
    grid-column: 1;
    grid-row: 1 / span 2;
    position: sticky;
    top: 2rem;
    padding-top: 0.6rem;
  }
}

.aside-title {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 0.75rem;
}

.contents {
  border: 1px solid var(--rule);
  padding: 1rem 1.25rem 0.6rem;
  margin-bottom: 2.25rem;
}

.contents ol {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: contents;
  font-family: var(--sans);
  font-size: 0.9375rem;
  line-height: 1.35;
}

.contents li {
  counter-increment: contents;
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  margin-bottom: 0.55rem;
}

.contents li::before {
  content: counter(contents);
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

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

.contents a:hover {
  color: var(--sign);
  text-decoration: underline;
}

@media (min-width: 60rem) {
  .contents {
    border: 0;
    border-top: 1px solid var(--rule);
    padding: 1rem 0 0;
  }
}

/* Standards: numbered sections */

.standards {
  counter-reset: standard;
}

.standard {
  counter-increment: standard;
  padding-top: 2rem;
  margin-top: 2rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 1.5rem;
}

.standard:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.standard h2 {
  margin-top: 0;
}

.standard h2::before {
  content: counter(standard, decimal-leading-zero);
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  color: var(--sign);
}

.standard:target h2 {
  text-decoration: underline;
  text-decoration-color: var(--sign);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

.never-list li::marker {
  content: '\2715\00a0\00a0';
  color: var(--sign);
  font-family: var(--sans);
}

/* Notices and the "In preparation" stamp */

.notice {
  max-width: var(--measure);
  margin: 2.5rem 0;
  padding: 1.4rem 1.5rem 0.4rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--sign);
}

.notice h2 {
  margin: 0 0 0.6rem;
  font-size: 1.3125rem;
}

.stamp {
  display: inline-block;
  margin: 0 0 0.85rem;
  padding: 0.2rem 0.55rem 0.15rem;
  border: 1.5px solid var(--sign);
  border-radius: 2px;
  color: var(--sign);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.4;
}

.link-list {
  list-style: none;
  padding: 0;
}

.link-list li {
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
  margin: 0;
}

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

/* Home */

/* The front page, laid out like a newspaper: nameplate, banner headline,
   then the lead story's columns beside a rail. One column on phones. */

.nameplate {
  display: grid;
  justify-items: center;
  gap: 0.35rem;
  padding-bottom: 1rem;
  border-bottom: 3px double var(--ink);
  text-align: center;
}

.nameplate-date {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}

.nameplate-name {
  margin: 0;
  font-size: clamp(2.5rem, 1.6rem + 4vw, 4.75rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.025em;
}

.nameplate-tagline {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1rem, 0.95rem + 0.3vw, 1.1875rem);
  color: var(--ink-soft);
}

.front {
  display: grid;
  gap: 2.5rem;
  margin-top: 1.75rem;
}

@media (min-width: 64rem) {
  .front {
    grid-template-columns: minmax(0, 1fr) 17rem;
    gap: 0 2.5rem;
  }

  .front-rail {
    padding-left: 2.5rem;
    border-left: 1px solid var(--rule);
  }
}

.front-banner {
  margin: 0 0 1.5rem;
  font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.25rem);
  font-weight: 640;
  line-height: 1.08;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.front-banner a,
.front-story h3 a,
.front-teaser h3 a {
  color: var(--ink);
  text-decoration: none;
}

.front-banner a:hover,
.front-story h3 a:hover,
.front-teaser h3 a:hover {
  color: var(--sign);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.front-lead {
  display: grid;
  gap: 2rem;
}

/* On phones the chart follows the summary; on wide screens the summary and
   teasers share the left column and the chart takes the right. */
@media (min-width: 52rem) {
  .front-lead {
    grid-template-columns: minmax(15rem, 2fr) minmax(0, 3fr);
    grid-template-rows: auto 1fr;
    gap: 0 2.25rem;
  }

  .front-lead-summary {
    grid-column: 1;
    grid-row: 1;
  }

  .front-lead-teasers {
    grid-column: 1;
    grid-row: 2;
  }

  .front-lead-figure {
    grid-column: 2;
    grid-row: 1 / span 2;
    padding-left: 2.25rem;
    border-left: 1px solid var(--rule);
  }

  /* A lead without a chart: its teasers take the chart's column, two by
     two, so the page has no empty column. */
  .front-lead--teasers .front-lead-teasers {
    grid-column: 2;
    grid-row: 1 / span 2;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
    align-content: start;
    gap: 1.5rem 2rem;
    padding-left: 2.25rem;
    border-left: 1px solid var(--rule);
  }

  .front-lead--teasers .front-teaser {
    margin-top: 0;
  }

  .front-lead--summary {
    grid-template-columns: minmax(0, 1fr);
  }
}

.front-lead-dek {
  margin: 0 0 0.6rem;
  font-size: 1.125rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.front-read {
  margin: 0.75rem 0 0;
  font-family: var(--sans);
  font-size: 0.9375rem;
  font-weight: 650;
}

.front-teaser {
  margin-top: 1.25rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--rule);
}

.front-teaser h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1875rem;
  line-height: 1.25;
}

.front-teaser p {
  margin: 0;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.front-lead-figure .figure {
  margin: 0;
}

.rail-heading {
  margin: 0 0 0.75rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
}

.front-rail > section + section {
  margin-top: 2rem;
}

.front-rail p {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.front-rail .link-list {
  font-family: var(--sans);
  font-size: 0.9375rem;
}

.rail-box {
  padding-top: 0.9rem;
  border-top: 3px solid var(--ink);
}

.front-story {
  padding: 1rem 0;
  border-top: 1px solid var(--rule);
}

.front-story h3 {
  margin: 0 0 0.35rem;
  font-size: 1.1875rem;
  line-height: 1.25;
}

.front-story-dek {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

.front-more {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 3px solid var(--ink);
}

.front-more-grid {
  display: grid;
  gap: 0 2.5rem;
}

@media (min-width: 46rem) {
  .front-more-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.home-intro {
  max-width: 62rem;
  padding-bottom: clamp(2rem, 5vw, 3.5rem);
  border-bottom: 1px solid var(--rule);
}

.home-intro h1 {
  max-width: 50rem;
  font-size: clamp(2.375rem, 1.5rem + 3.6vw, 4.125rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  margin-bottom: 1.25rem;
}

.home-intro .lede {
  max-width: 40rem;
}

.home-section {
  max-width: 62rem;
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

.home-section > h2 {
  margin-top: 0;
}

.home-section > p,
.home-section > .link-list {
  max-width: var(--measure);
}

.steps {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  counter-reset: step;
  display: grid;
  gap: 1.75rem 3rem;
}

@media (min-width: 46rem) {
  .steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.steps li {
  counter-increment: step;
  margin: 0;
  padding-top: 1rem;
  border-top: 1px solid var(--ink);
}

.steps li::before {
  content: counter(step);
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--sign);
  letter-spacing: 0.06em;
}

.steps h3 {
  margin: 0.3rem 0 0.4rem;
}

.steps p {
  margin: 0;
  color: var(--ink-soft);
}

.home .notice {
  margin-top: clamp(2.5rem, 6vw, 4rem);
}

/* Contact */

.contact-list {
  margin: 0 0 1.75rem;
  border-top: 1px solid var(--rule);
}

.contact-list div {
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 1.5rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid var(--rule);
}

.contact-list dt {
  flex: 0 0 9rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--muted);
  padding-top: 0.2rem;
}

.contact-list dd {
  margin: 0;
}

.tips {
  margin-top: 2.75rem;
  padding: 1.4rem 1.5rem 0.5rem;
  border: 1px solid var(--rule-strong);
}

.tips h2 {
  margin-top: 0;
  font-size: 1.3125rem;
}

/* Stories index */

.story-list {
  list-style: none;
  padding: 0;
  margin: 0;
  max-width: 46rem;
}

.story-list li {
  margin: 0;
  padding: 1.5rem 0;
  border-top: 1px solid var(--rule);
}

.story-summary h2 {
  margin: 0 0 0.4rem;
}

.story-summary h2 a {
  color: var(--ink);
  text-decoration: none;
}

.story-summary h2 a:hover {
  color: var(--sign);
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.story-summary .dek {
  font-size: 1.0625rem;
  margin-bottom: 0.5rem;
}

.story-summary-meta {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

/* Article */

.story {
  max-width: 48rem;
}

.story-header {
  margin-bottom: 2.5rem;
}

.story-header h1 {
  font-size: clamp(2.25rem, 1.45rem + 3.2vw, 3.625rem);
  line-height: 1.06;
}

.story-header .dek {
  margin-bottom: 1.5rem;
}

.fixture-label {
  display: inline-block;
  margin: 0 0 1rem;
  padding: 0.2rem 0.55rem;
  background: var(--sign);
  color: var(--paper);
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.byline {
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
  margin: 0 0 0.2rem;
}

.story-dates {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}

/* Reading progress (reading.js): a thin bar along the top of the window
   that fills as the reader moves through the story's text, and is full
   when the last line of the story is on screen. */
.reading-progress {
  position: fixed;
  inset: 0 0 auto 0;
  height: 4px;
  z-index: 50;
  background: var(--sign-tint);
  pointer-events: none;
}

.reading-progress[hidden] {
  display: none;
}

.reading-progress-bar {
  height: 100%;
  background: var(--sign);
  transform: scaleX(0);
  transform-origin: left center;
}

.reading-progress.is-complete .reading-progress-bar {
  background: var(--sign-deep);
}

@media print {
  .reading-progress {
    display: none;
  }
}

.story-body {
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.21875rem);
}

.story-body h2 {
  margin-top: 2.5rem;
}

.story-body blockquote {
  margin: 1.75rem 0;
  padding: 0.1rem 0 0.1rem 1.25rem;
  border-left: 2px solid var(--rule-strong);
  color: var(--ink-soft);
}

.story-body blockquote p:last-child {
  margin-bottom: 0;
}

/* Figures: charts drawn at build time (figures.mjs). The wide and narrow
   layouts are swapped by width; colours follow the theme through classes. */

.figure {
  margin: 2.5rem 0;
  padding-top: 0.9rem;
  border-top: 2px solid var(--ink);
  font-family: var(--sans);
}

.figure-title {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}

.figure-subtitle {
  margin: 0.25rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.4;
  color: var(--ink-soft);
}

.chart {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1rem;
  overflow: visible;
  font-family: var(--sans);
}

.chart--narrow {
  display: none;
}

@media (max-width: 34rem) {
  .chart--wide {
    display: none;
  }

  .chart--narrow {
    display: block;
  }
}

.chart-text {
  fill: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.chart-text--strong {
  fill: var(--ink);
}

.chart-text--muted {
  fill: var(--muted);
}

.chart-grid {
  stroke: var(--rule);
  stroke-width: 1;
}

.chart-axis {
  stroke: var(--rule-strong);
  stroke-width: 1;
}

.chart-mark--1 {
  fill: var(--chart-1);
}

.chart-mark--2 {
  fill: var(--chart-2);
}

.chart-mark--context {
  fill: var(--chart-context);
}

.chart-line,
.chart-interval,
.chart-key-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.chart-stroke--1 {
  stroke: var(--chart-1);
}

.chart-stroke--2 {
  stroke: var(--chart-2);
}

.chart-stroke--context {
  stroke: var(--chart-context);
}

.chart-dot {
  stroke: var(--paper);
  stroke-width: 2;
}

.figure figcaption {
  margin-top: 0.75rem;
}

/* Diagrams: drawn explainers whose colours all come from these classes. */
.diagram-box {
  fill: var(--panel);
  stroke: var(--rule-strong);
  stroke-width: 1.5;
}

.diagram-box--1 {
  stroke: var(--chart-1);
}

.diagram-box--2 {
  stroke: var(--chart-2);
}

/* :where keeps this default below the chart-stroke colour classes. */
:where(.diagram-link) {
  stroke: var(--rule-strong);
}

.diagram-link {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diagram-link--dashed {
  stroke-dasharray: 5 5;
}

.diagram-number {
  fill: var(--ink);
}

.diagram-number-text {
  fill: var(--paper);
  font-weight: 700;
}

.figure-steps {
  margin: 0;
  padding-left: 1.4rem;
  font-family: var(--sans);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ink-soft);
}

.figure-steps li + li {
  margin-top: 0.35rem;
}

.figure-note,
.figure-credit {
  margin: 0.3rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--muted);
}

.figure-data {
  margin-top: 0.6rem;
  font-size: 0.8125rem;
}

.figure-data summary {
  cursor: pointer;
  color: var(--sign);
  font-weight: 600;
}

.figure-table-wrap {
  overflow-x: auto;
  margin-top: 0.5rem;
}

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

.figure-data th,
.figure-data td {
  padding: 0.3rem 0.6rem 0.3rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.figure-data td {
  text-align: right;
}

.figure-data thead th {
  color: var(--muted);
  font-weight: 600;
}

.figure-data thead th:not(:first-child) {
  text-align: right;
}

/* The data and method page */

.kicker {
  margin: 0 0 0.5rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 650;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sign);
}

.downloads {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.875rem;
}

.downloads th,
.downloads td {
  padding: 0.5rem 0.75rem 0.5rem 0;
  border-bottom: 1px solid var(--rule);
  text-align: left;
  vertical-align: top;
}

.downloads thead th {
  color: var(--muted);
  font-weight: 600;
}

.downloads .download-size {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.checksums {
  margin-top: 1rem;
  font-family: var(--sans);
  font-size: 0.8125rem;
}

.checksums summary {
  cursor: pointer;
  color: var(--sign);
  font-weight: 600;
}

.checksums ul {
  padding-left: 0;
  list-style: none;
}

.checksums code {
  word-break: break-all;
}

/* Boxes: a self-contained aside within the story (::: box in body.md) */

.box {
  margin: 2.25rem 0;
  padding: 1.1rem 1.25rem 0.4rem;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sign);
  font-size: 0.9375em;
}

.box h3 {
  margin: 0 0 0.6rem;
  font-family: var(--sans);
  font-size: 1rem;
  font-weight: 650;
}

/* Audio clips (::: audio in body.md; audio-player.js). Without JavaScript
   the browser's own player shows; with it, the site's controls replace it.
   The transcript opens beneath the player, inside the same card. */

.audio-clip {
  margin: 2.25rem 0;
  background: var(--panel);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--sign);
  font-family: var(--sans);
}

.audio-player {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem 1.25rem 0.9rem;
}

.audio-toggle {
  flex: none;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin: 0.1rem 0 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--sign);
  color: var(--paper);
  cursor: pointer;
}

.audio-toggle[hidden] {
  display: none;
}

.audio-toggle:hover {
  background: var(--sign-deep);
}

.audio-toggle:focus-visible {
  outline: 3px solid var(--sign);
  outline-offset: 3px;
}

.audio-icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: currentColor;
}

.audio-icon--pause,
.audio-clip.is-playing .audio-icon--play {
  display: none;
}

.audio-clip.is-playing .audio-icon--pause {
  display: block;
}

.audio-body {
  flex: 1;
  min-width: 0;
}

.prose .audio-heading,
.audio-heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 650;
  line-height: 1.3;
  color: var(--ink);
}

.audio-label {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--sign);
}

.prose .audio-credit,
.audio-credit {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
}

.audio-timeline {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.6rem;
}

.audio-timeline[hidden] {
  display: none;
}

.prose .audio-time,
.audio-time {
  flex: none;
  margin: 0;
  font-size: 0.8125rem;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

.audio-element {
  display: block;
  width: 100%;
  margin-top: 0.6rem;
}

.audio-clip.is-enhanced .audio-element {
  display: none;
}

/* The position bar: a range input drawn as a thin track that fills as the
   clip plays; audio-player.js sets --progress. */
.audio-seek {
  --progress: 0%;
  flex: 1;
  min-width: 0;
  height: 1.5rem;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}

.audio-seek::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--sign) var(--progress), var(--rule-strong) var(--progress));
}

.audio-seek::-webkit-slider-thumb {
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--sign);
  -webkit-appearance: none;
  appearance: none;
}

.audio-seek::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--rule-strong);
}

.audio-seek::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--sign);
}

.audio-seek::-moz-range-thumb {
  width: 10px;
  height: 10px;
  border: 2px solid var(--panel);
  border-radius: 50%;
  background: var(--sign);
}

.audio-seek:focus-visible {
  outline: 2px solid var(--sign);
  outline-offset: 3px;
}

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

.audio-transcript summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.65rem 1.25rem;
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--sign);
  cursor: pointer;
  list-style: none;
}

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

.audio-transcript summary::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}

.audio-transcript[open] summary::after {
  transform: translateY(0.12rem) rotate(-135deg);
}

.audio-transcript summary:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

.audio-transcript summary:focus-visible {
  outline: 2px solid var(--sign);
  outline-offset: -2px;
}

.audio-transcript[open] .audio-transcript-show,
.audio-transcript:not([open]) .audio-transcript-hide {
  display: none;
}

.prose .transcript,
.transcript {
  margin: 0;
  padding: 0 1.25rem 0.25rem;
  list-style: none;
}

.prose .transcript-line,
.transcript-line {
  display: grid;
  grid-template-columns: 3.25rem minmax(0, 1fr);
  gap: 0.75rem;
  margin: 0 -0.5rem;
  padding: 0.5rem;
  border-radius: 4px;
}

.transcript-line.is-current {
  background: var(--sign-tint);
}

.transcript-time {
  justify-self: start;
  align-self: start;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.8125rem;
  line-height: 1.75;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
}

button.transcript-time {
  color: var(--sign);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

button.transcript-time:focus-visible {
  outline: 2px solid var(--sign);
  outline-offset: 2px;
}

.prose .transcript-words,
.transcript-words {
  margin: 0;
  font-family: var(--serif);
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--ink);
}

.transcript-speaker {
  display: block;
  font-family: var(--sans);
  font-size: 0.8125rem;
  font-weight: 650;
  color: var(--ink-soft);
}

.prose .transcript-note,
.transcript-note {
  margin: 0;
  padding: 0.4rem 1.25rem 0.9rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.transcript-unchecked {
  color: var(--chart-2);
}

@media (max-width: 30rem) {
  .audio-player {
    gap: 0.75rem;
    padding: 0.9rem 1rem;
  }

  .audio-transcript summary,
  .prose .transcript,
  .transcript,
  .prose .transcript-note,
  .transcript-note {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

@media (forced-colors: active) {
  .audio-toggle {
    border: 2px solid ButtonText;
  }

  .transcript-line.is-current {
    outline: 2px solid Highlight;
  }
}

@media print {
  .audio-player,
  .audio-transcript summary {
    display: none;
  }
}

@media (forced-colors: active) {
  .chart-mark--1,
  .chart-mark--2,
  .chart-mark--context {
    fill: CanvasText;
  }

  .chart-line,
  .chart-interval,
  .chart-key-line {
    stroke: CanvasText;
  }

  .chart-text {
    fill: CanvasText;
  }

  .diagram-box {
    fill: Canvas;
    stroke: CanvasText;
  }

  .diagram-link {
    stroke: CanvasText;
  }

  .diagram-number {
    fill: CanvasText;
  }

  .diagram-number-text {
    fill: Canvas;
  }
}

.cite a {
  font-family: var(--sans);
  font-size: 0.75em;
  font-weight: 650;
  padding: 0 0.12em;
  text-decoration: none;
}

.cite a:hover {
  text-decoration: underline;
}

.cite-separator {
  font-family: var(--sans);
  font-size: 0.75em;
  color: var(--muted);
}

.story-footer {
  max-width: var(--measure);
  margin-top: 3.5rem;
}

.story-footer section {
  border-top: 3px double var(--rule-strong);
  padding-top: 1.75rem;
  margin-bottom: 3rem;
}

.story-footer h2 {
  margin: 0 0 0.5rem;
}

.section-note {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}

/* The sources list is collapsed under its heading, so the corrections that
   follow it aren't buried; a footnote link opens it (reading.js). */
.source-details summary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.9rem;
  border: 1px solid var(--rule-strong);
  border-radius: 999px;
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--sign);
  cursor: pointer;
  list-style: none;
}

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

.source-details summary::after {
  content: '';
  width: 0.4rem;
  height: 0.4rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-0.12rem) rotate(45deg);
}

.source-details[open] summary::after {
  transform: translateY(0.12rem) rotate(-135deg);
}

.source-details summary:hover {
  border-color: var(--sign);
}

.source-details summary:focus-visible {
  outline: 2px solid var(--sign);
  outline-offset: 2px;
}

.source-details[open] .source-details-show,
.source-details:not([open]) .source-details-hide {
  display: none;
}

.source-list {
  list-style: none;
  padding: 0;
  margin: 1.5rem 0 0;
  counter-reset: source;
}

.source {
  counter-increment: source;
  display: grid;
  grid-template-columns: 2.25rem minmax(0, 1fr);
  padding: 1.1rem 0 0.9rem;
  border-top: 1px solid var(--rule);
  margin: 0;
  scroll-margin-top: 1rem;
}

.source::before {
  content: counter(source);
  font-family: var(--sans);
  font-weight: 700;
  font-size: 0.9375rem;
  color: var(--sign);
  padding-top: 0.15rem;
}

.source > * {
  grid-column: 2;
  margin: 0 0 0.35rem;
}

.source:target {
  background: var(--sign-tint);
  outline: 1px solid var(--sign);
  outline-offset: 0;
}

.source-title {
  font-weight: 620;
  line-height: 1.35;
}

.source-title cite {
  font-style: normal;
}

.source-meta,
.source-links {
  font-family: var(--sans);
  font-size: 0.875rem;
  color: var(--muted);
}

.source-supports {
  font-size: 0.96875rem;
  line-height: 1.5;
}

.source-label {
  display: block;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 650;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.correction-list,
.correction-index {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 1.5rem;
}

.correction-list li,
.correction-index li {
  padding: 0.9rem 0 0.2rem;
  border-top: 1px solid var(--rule);
  margin: 0;
}

.correction-date {
  font-family: var(--sans);
  font-size: 0.875rem;
  font-weight: 650;
  color: var(--sign);
  margin: 0 0 0.25rem;
}

.correction-story {
  font-weight: 620;
  margin-bottom: 0.25rem;
}

/* Footer */

.site-footer {
  border-top: 3px double var(--rule-strong);
  background: var(--panel);
}

.site-footer-inner {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 2.25rem var(--gutter) 2.75rem;
  font-family: var(--sans);
  font-size: 0.9375rem;
  color: var(--ink-soft);
}

.footer-name {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0 0 0.75rem;
  font-family: var(--serif);
  font-size: 1.1875rem;
  font-weight: 640;
  color: var(--ink);
}

.mark-small {
  width: 1.9rem;
}

.footer-statement {
  max-width: 34rem;
}

.footer-nav {
  margin: 1.25rem 0;
}

.footer-nav a {
  font-weight: 560;
}

.footer-privacy {
  margin: 0;
  font-size: 0.875rem;
  color: var(--muted);
}

/* Print: the text and its sources, without the site furniture */

@media print {
  :root,
  :root[data-theme='dark'] {
    --paper: #ffffff;
    --panel: #ffffff;
    --ink: #000000;
    --sign: #000000;
    --chart-1: #3a48b5;
    --chart-2: #c4562a;
    --chart-context: #8a8d9e;
  }

  .figure-data[open] summary,
  .figure-data:not([open]) {
    display: none;
  }

  .skip-link,
  .site-nav,
  .theme-toggle,
  .site-footer,
  .page-aside {
    display: none;
  }

  .source-title a::after,
  .source-links a::after {
    content: ' (' attr(href) ')';
    font-family: var(--sans);
    font-size: 0.8em;
    font-weight: 400;
    word-break: break-all;
  }
}