/* GENERATED by scripts/build.mjs. Edit tokens/tokens.json or src/*.css. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/SourceSerif4-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/SourceSerif4-MediumItalic.woff2") format("woff2");
}
@font-face {
  font-family: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/SourceSans3-Variable.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
}

:root {
  --bg: #F5F4ED;
  --surface: #FAF9F5;
  --sand: #E8E6DC;
  --ink: #141413;
  --ink-soft: #3D3D3A;
  --olive: #504E49;
  --stone: #6B6A64;
  --line: #D9D6CC;
  --accent: #1C3D32;
  --accent-ink: #FAF9F5;
  --accent-hover: #143028;
  --tag-quiet: #E7EFE9;
  --tag: #D9E6DE;
  --danger: #B53333;
  --dark: #141413;
  --dark-surface: #30302E;
  --accent-on-dark: #8FBFAB;
  --scrim: #141413;
  --serif: "Source Serif 4", "Iowan Old Style", Palatino, "Palatino Linotype", serif;
  --sans: "Source Sans 3", "Avenir Next", "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --text-display: 48px;
  --text-h1: 32px;
  --text-h2: 22px;
  --text-h3: 18px;
  --text-metric: 32px;
  --text-body: 17px;
  --text-control: 16px;
  --text-caption: 14px;
  --text-label: 12px;
  --text-display-mobile: 36px;
  --radius-chip: 2px;
  --radius-control: 4px;
  --radius-card: 8px;
  --space-4: 4px;
  --space-8: 8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-24: 24px;
  --space-32: 32px;
  --space-48: 48px;
  --space-64: 64px;
  --space-96: 96px;
  --shadow-floating: 0 8px 24px rgba(20, 20, 19, 0.08);
  --layout-max-width: 1040px;
  --layout-measure: 66ch;
  --layout-page-padding: 20px;
  --layout-hit-target: 44px;
  --undefined$description: undefined;
  --undefinedemerald: #1C3D32;
  --undefinedgarnet: #6B1E2E;
  --undefinedamethyst: #4B2A63;
  --undefinedpeacock: #134B52;
  --undefinedtopaz: #6E430C;
  --undefined$description: undefined;
  --undefinedslate: undefined;
}

[data-theme="garnet"] {
  --accent: #6B1E2E;
  --accent-hover: #501623;
  --tag: #E7DADC;
  --tag-quiet: #EFE6E8;
  --accent-on-dark: #DB94A3;
}

[data-theme="amethyst"] {
  --accent: #4B2A63;
  --accent-hover: #38204A;
  --tag: #E1DAE7;
  --tag-quiet: #EBE6EF;
  --accent-on-dark: #BC9BD4;
}

[data-theme="peacock"] {
  --accent: #134B52;
  --accent-hover: #0E383E;
  --tag: #DAE6E7;
  --tag-quiet: #E6EEEF;
  --accent-on-dark: #94D3DB;
}

[data-theme="topaz"] {
  --accent: #6E430C;
  --accent-hover: #533209;
  --tag: #E7E1DA;
  --tag-quiet: #EFEBE6;
  --accent-on-dark: #DBBC94;
}

:root { color-scheme: light; }

[data-mode="slate"] {
  color-scheme: dark;
  --bg: #1A1916;
  --surface: #252420;
  --sand: #302E29;
  --ink: #EDEAE1;
  --ink-soft: #D4CFC4;
  --olive: #ACA697;
  --stone: #958F82;
  --line: #38352F;
  --accent-ink: #12110E;
  --danger: #E09A8D;
  --dark: #121110;
  --dark-surface: #201F1C;
  --scrim: #0B0A08;
  --accent: #A0C5B9;
  --accent-hover: #B9D4CB;
  --tag: #253631;
  --tag-quiet: #1F2D29;
  --accent-on-dark: #A6C9BD;
  --shadow-floating: 0 12px 32px rgba(0, 0, 0, 0.55);
}
[data-mode="slate"][data-theme="garnet"] {
  --accent: #D1A3AD;
  --accent-hover: #DFBEC5;
  --tag: #3B2126;
  --tag-quiet: #311C20;
  --accent-on-dark: #D5AAB3;
}

[data-mode="slate"][data-theme="amethyst"] {
  --accent: #BCA8CA;
  --accent-hover: #CFC1D9;
  --tag: #2F2537;
  --tag-quiet: #271F2E;
  --accent-on-dark: #C0AECE;
}

[data-mode="slate"][data-theme="peacock"] {
  --accent: #97C8CE;
  --accent-hover: #B3D7DB;
  --tag: #20393C;
  --tag-quiet: #1B2F32;
  --accent-on-dark: #9ECCD1;
}

[data-mode="slate"][data-theme="topaz"] {
  --accent: #CEB697;
  --accent-hover: #DBC9B3;
  --tag: #3C3020;
  --tag-quiet: #32281B;
  --accent-on-dark: #D1BB9E;
}

@media print {
  :root[data-mode="slate"] {
    color-scheme: light;
    --bg: #F5F4ED;
    --surface: #FAF9F5;
    --sand: #E8E6DC;
    --ink: #141413;
    --ink-soft: #3D3D3A;
    --olive: #504E49;
    --stone: #6B6A64;
    --line: #D9D6CC;
    --accent-ink: #FAF9F5;
    --danger: #B53333;
    --dark: #141413;
    --dark-surface: #30302E;
    --scrim: #141413;
    --accent: #1C3D32;
    --accent-hover: #143028;
    --tag: #D9E6DE;
    --tag-quiet: #E7EFE9;
    --accent-on-dark: #8FBFAB;
    --shadow-floating: 0 8px 24px rgba(20, 20, 19, 0.08);
  }
  :root[data-mode="slate"][data-theme="garnet"] {
    --accent: #6B1E2E;
    --accent-hover: #501623;
    --tag: #E7DADC;
    --tag-quiet: #EFE6E8;
    --accent-on-dark: #DB94A3;
  }
  :root[data-mode="slate"][data-theme="amethyst"] {
    --accent: #4B2A63;
    --accent-hover: #38204A;
    --tag: #E1DAE7;
    --tag-quiet: #EBE6EF;
    --accent-on-dark: #BC9BD4;
  }
  :root[data-mode="slate"][data-theme="peacock"] {
    --accent: #134B52;
    --accent-hover: #0E383E;
    --tag: #DAE6E7;
    --tag-quiet: #E6EEEF;
    --accent-on-dark: #94D3DB;
  }
  :root[data-mode="slate"][data-theme="topaz"] {
    --accent: #6E430C;
    --accent-hover: #533209;
    --tag: #E7E1DA;
    --tag-quiet: #EFEBE6;
    --accent-on-dark: #DBBC94;
  }
}

/* Base: reset, page, type roles, links, focus. Tokens come from tokens.css. */

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

html { background: var(--bg); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 400;
  font-style: normal;
  font-synthesis: none;
  line-height: 1.6;
}

h1, h2, h3, .display, .metric, .quote {
  font-family: var(--serif);
  font-weight: 500;
  font-style: normal;
}

.display { margin: 0; font-size: var(--text-display); line-height: 1.1; }
h1 { margin: 0; font-size: var(--text-h1); line-height: 1.2; }
h2 { margin: 0; font-size: var(--text-h2); line-height: 1.25; }
h3 { margin: 0; font-size: var(--text-h3); line-height: 1.3; }

p, figure { margin: 0; }

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

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

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

.caption, figcaption {
  margin-top: var(--space-8);
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--olive);
}

.lede, .prose { max-width: var(--layout-measure); }
.lede { margin-top: var(--space-16); }

hr {
  border: 0;
  border-top: 1px solid var(--line);
  margin: var(--space-32) 0;
}

@media (max-width: 767px) {
  .display { font-size: var(--text-display-mobile); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Components and page chrome. No outer margins except where a component owns its rhythm. */

/* Page chrome */
.skip {
  position: absolute;
  left: var(--layout-page-padding);
  top: 0;
  transform: translateY(-120%);
  background: var(--surface);
  color: var(--ink);
  padding: var(--space-12) var(--space-16);
  border-radius: var(--radius-control);
}

.skip:focus { transform: none; top: var(--space-12); }

.inner {
  width: min(var(--layout-max-width), 100%);
  margin-inline: auto;
  padding: var(--space-32) var(--space-32) 0;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12) var(--space-24);
  margin-bottom: var(--space-48);
}

.site-header nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-16);
}

.site-header a,
.menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--layout-hit-target);
}

.wordmark {
  margin: 0;
  font-size: var(--text-body);
  line-height: 1.6;
}

a.wordmark,
nav a[aria-current="page"] {
  color: var(--ink);
  text-decoration: none;
}

.site-footer {
  padding-top: var(--space-48);
  padding-bottom: var(--space-64);
}

.section + .section { margin-top: var(--space-96); }
.section-head { margin-bottom: var(--space-48); }

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-12);
}

.stack { display: grid; gap: var(--space-24); }

/* Type components */
.overline {
  margin: 0 0 var(--space-8);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.06em;
  color: var(--accent);
}

.quote {
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 28em;
  font-style: italic;
  font-size: var(--text-h2);
  line-height: 1.25;
  color: var(--olive);
}

.metrics {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-32) var(--space-48);
}

.metric {
  margin: 0;
  font-size: var(--text-metric);
  line-height: 1.1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

/* Button */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--layout-hit-target);
  padding: var(--space-12) var(--space-16);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-control);
  font-weight: 400;
  font-synthesis: none;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
}

.btn.primary { background: var(--accent); color: var(--accent-ink); }
.btn.primary:hover { background: var(--accent-hover); color: var(--accent-ink); }
.btn.secondary { background: var(--sand); }
.btn.ghost { border-color: var(--ink); }
.btn:disabled { opacity: 0.4; cursor: default; }

/* Tag */
.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-4) var(--space-8);
  border-radius: var(--radius-chip);
  background: var(--tag);
  color: var(--ink);
  font-size: var(--text-caption);
  line-height: 1.45;
}

.tag.quiet { background: var(--tag-quiet); }

/* Form */
.field { display: grid; gap: var(--space-8); }

label {
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.06em;
}

input,
select,
textarea {
  width: 100%;
  min-height: var(--layout-hit-target);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.6;
}

.error {
  margin-top: var(--space-8);
  color: var(--danger);
  font-size: var(--text-caption);
  line-height: 1.45;
}

/* List */
.plain { list-style: none; margin: 0; padding: 0; }
.plain li + li { margin-top: var(--space-12); }

/* Code */
pre {
  margin: 0;
  padding: var(--space-16);
  overflow-x: auto;
  border-radius: var(--radius-control);
  background: var(--surface);
}

code {
  font-family: var(--mono);
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--ink);
}

/* Card */
.card {
  padding: var(--space-24);
  border-radius: var(--radius-card);
  background: var(--surface);
}

/* Textarea, checkbox, radio */
textarea {
  min-height: 120px;
  resize: vertical;
}

input[type="checkbox"],
input[type="radio"] {
  width: 20px;
  min-height: 20px;
  padding: 0;
  flex: none;
  accent-color: var(--accent);
}

.check {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  min-height: var(--layout-hit-target);
  font-size: var(--text-body);
  font-weight: 400;
  letter-spacing: normal;
  line-height: 1.6;
}

input:disabled,
select:disabled,
textarea:disabled { opacity: 0.4; cursor: default; }

.hint {
  font-size: var(--text-caption);
  line-height: 1.45;
  color: var(--olive);
}

/* Notice: inline message. Default is quiet green; .error is for failures. */
.notice {
  padding: var(--space-16) var(--space-24);
  border-radius: var(--radius-card);
  background: var(--tag-quiet);
  color: var(--ink);
}

.notice.danger {
  border: 1px solid var(--danger);
  background: var(--surface);
}

.notice-title { font-weight: 500; }
.notice.danger .notice-title { color: var(--danger); }

/* Table */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-caption);
  line-height: 1.45;
}

.table th {
  text-align: left;
  font-weight: 500;
  color: var(--olive);
}

.table th,
.table td {
  padding: var(--space-12) var(--space-16) var(--space-12) 0;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table .num { text-align: right; font-variant-numeric: tabular-nums; }

/* Breadcrumb */
.crumbs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4) var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-caption);
  line-height: 1.45;
}

.crumbs li + li::before {
  content: "/";
  margin-right: var(--space-8);
  color: var(--stone);
}

.crumbs [aria-current="page"] { color: var(--olive); text-decoration: none; }

/* Pagination */
.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.pagination .btn[aria-current="page"] { border-color: var(--ink); }

/* Accordion: native <details> */
.accordion details + details { border-top: 1px solid var(--line); }

.accordion summary {
  display: flex;
  align-items: center;
  min-height: var(--layout-hit-target);
  cursor: pointer;
}

.accordion summary::after { content: "+"; margin-left: auto; color: var(--olive); }
.accordion details[open] summary::after { content: "\2212"; }

.accordion details > :not(summary) { padding-bottom: var(--space-16); max-width: var(--layout-measure); }

/* Progress */
progress {
  display: block;
  width: 100%;
  height: var(--space-8);
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--sand);
  appearance: none;
  accent-color: var(--accent);
}

progress::-webkit-progress-bar { border-radius: var(--radius-chip); background: var(--sand); }
progress::-webkit-progress-value { border-radius: var(--radius-chip); background: var(--accent); }
progress::-moz-progress-bar { border-radius: var(--radius-chip); background: var(--accent); }

/* Dialog: a floating layer, so it takes the shadow */
dialog {
  width: min(480px, calc(100% - var(--space-32)));
  padding: var(--space-24);
  border: 0;
  border-radius: var(--radius-card);
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-floating);
}

dialog > * + * { margin-top: var(--space-16); }

/* The scrim, not --ink: --ink is chalk on slate and would veil the page white. */
dialog::backdrop { background: var(--scrim); opacity: 0.4; }

/* Menu: a floating layer, so it takes the shadow */
.menu {
  display: inline-flex;
  flex-direction: column;
  padding: var(--space-8);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-floating);
}

.menu a { padding-inline: var(--space-16); }

/* Dark band: only when a brief asks */
.dark {
  padding: var(--space-64) 0;
  background: var(--dark);
  color: var(--accent-ink);
}

.dark .overline,
.dark a { color: var(--accent-on-dark); }

.dark h2,
.dark .lede { color: var(--accent-ink); }

.dark :focus-visible { outline-color: var(--accent-ink); }

@media (max-width: 767px) {
  .inner { padding-inline: var(--layout-page-padding); }
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
  }
}

/* Slate: the mode changes the light, not the layout. Only rules that lean on
   "lighter means nearer" or on a dark ground need a second value. */

/* A band cannot go darker than a dark page, so on slate it is a raised sheet. */
[data-mode="slate"] .dark { background: var(--surface); color: var(--ink); }
[data-mode="slate"] .dark h2,
[data-mode="slate"] .dark .lede { color: var(--ink); }
[data-mode="slate"] .dark .overline,
[data-mode="slate"] .dark a { color: var(--accent); }
[data-mode="slate"] .dark :focus-visible { outline-color: var(--ink); }

/* A paper shadow is invisible on stone, so floating layers take the hairline. */
[data-mode="slate"] .menu,
[data-mode="slate"] dialog { border: 1px solid var(--line); }

/* A light screenshot on a dark page has no edge of its own. */
[data-mode="slate"] figure img { border: 1px solid var(--line); }