/* ===========================================================================
   Drops protocol documentation, "sealed record" design system.

   Continues the Drops visual identity: the faceted magenta droplet, the
   high-contrast serif wordmark, and the fine spectrum rule that sits under it.
   The system adds the ceremony a permanence protocol deserves: seal marks,
   ruled documents, and a restrained plum and magenta palette.

   Contents
   01 tokens
   02 base and layout
   03 masthead and navigation
   04 seal marks and rules
   05 hero
   06 typography blocks
   07 cards, grids, panels
   08 tables and code
   09 normative rules, definitions, status chips
   10 diagrams
   11 interactive tools
   12 search
   13 footer
   14 responsive
   =========================================================================== */

/* -- 01 tokens ---------------------------------------------------------- */

:root {
  color-scheme: light dark;

  --paper: #fffaff;
  --paper-2: #fdf1f8;
  --paper-3: #f7ecf6;
  --ink: #1c0718;
  --ink-2: #3d1533;
  --muted: #6b4a5e;
  --seal: #b8006a;
  --seal-deep: #82004b;
  --violet: #5a2fbd;
  --edge: rgba(120, 20, 84, .18);
  --edge-strong: rgba(120, 20, 84, .34);
  --wash: rgba(184, 0, 106, .06);
  --wash-2: rgba(90, 47, 189, .07);
  --shadow: 0 1px 0 rgba(120, 20, 84, .06), 0 14px 34px rgba(90, 6, 62, .07);
  --spectrum: linear-gradient(90deg, #ff3d9e 0%, #ff8bc4 22%, #c9a8ff 46%, #7fd8e6 70%, #ffd08b 100%);

  --ok: #1a6b45;
  --ok-bg: rgba(26, 107, 69, .1);
  --warn: #8a5000;
  --warn-bg: rgba(138, 80, 0, .1);
  --bad: #a51830;
  --bad-bg: rgba(165, 24, 48, .1);

  --serif: Georgia, "Iowan Old Style", "Palatino Linotype", "Times New Roman", serif;
  --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Consolas, "Liberation Mono", monospace;

  --measure: 68ch;
  --gutter: clamp(18px, 4.4vw, 60px);
  --rhythm: clamp(48px, 7vw, 92px);
  --radius: 4px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper: #12060f;
    --paper-2: #1a0918;
    --paper-3: #230d20;
    --ink: #f7ecf4;
    --ink-2: #e2cddb;
    --muted: #c0a6b6;
    --seal: #ff5fb8;
    --seal-deep: #ff8ecd;
    --violet: #c7adff;
    --edge: rgba(255, 190, 226, .18);
    --edge-strong: rgba(255, 190, 226, .34);
    --wash: rgba(255, 95, 184, .09);
    --wash-2: rgba(199, 173, 255, .09);
    --shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 16px 40px rgba(0, 0, 0, .5);
    --ok: #5fd39d;
    --ok-bg: rgba(95, 211, 157, .13);
    --warn: #f0b95c;
    --warn-bg: rgba(240, 185, 92, .13);
    --bad: #ff8496;
    --bad-bg: rgba(255, 132, 150, .13);
  }
}

[data-theme="dark"] {
  --paper: #12060f;
  --paper-2: #1a0918;
  --paper-3: #230d20;
  --ink: #f7ecf4;
  --ink-2: #e2cddb;
  --muted: #c0a6b6;
  --seal: #ff5fb8;
  --seal-deep: #ff8ecd;
  --violet: #c7adff;
  --edge: rgba(255, 190, 226, .18);
  --edge-strong: rgba(255, 190, 226, .34);
  --wash: rgba(255, 95, 184, .09);
  --wash-2: rgba(199, 173, 255, .09);
  --shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 16px 40px rgba(0, 0, 0, .5);
  --ok: #5fd39d;
  --ok-bg: rgba(95, 211, 157, .13);
  --warn: #f0b95c;
  --warn-bg: rgba(240, 185, 92, .13);
  --bad: #ff8496;
  --bad-bg: rgba(255, 132, 150, .13);
}

/* -- 02 base and layout ------------------------------------------------- */

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: hidden;
  background: var(--paper);
  color: var(--ink);
  font: 400 17px/1.65 var(--sans);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; }
figure { margin: 0; }
hr { height: 1px; border: 0; margin: var(--rhythm) 0; background: var(--edge); }

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

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--violet);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--seal); color: var(--paper); }

.skip-link {
  position: fixed; z-index: 100; top: 10px; left: 10px;
  transform: translateY(-200%);
  padding: 10px 16px;
  background: var(--ink); color: var(--paper);
  font: 600 14px var(--sans); text-decoration: none;
  border-radius: var(--radius);
}
.skip-link:focus { transform: none; }

.wrap { width: 100%; max-width: 1160px; margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 880px; }
.stack > * + * { margin-top: 1em; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  padding: 0; border: 0; clip-path: inset(50%); overflow: hidden; white-space: nowrap;
}

main { display: block; }
section { scroll-margin-top: 84px; }
[id] { scroll-margin-top: 84px; }

.band { padding-block: var(--rhythm); }
.band--tint { background: var(--paper-2); border-block: 1px solid var(--edge); }
.band--deep { background: var(--paper-3); border-block: 1px solid var(--edge); }

/* -- 03 masthead and navigation ----------------------------------------- */

.masthead {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--edge);
  backdrop-filter: blur(14px) saturate(1.3);
}
@supports not (backdrop-filter: blur(1px)) { .masthead { background: var(--paper); } }

.masthead__inner {
  display: flex; align-items: center; gap: 16px;
  min-height: 64px; flex-wrap: wrap;
}

.wordmark {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--ink); text-decoration: none; flex: 0 0 auto;
}
.wordmark__text {
  font: 400 20px/1 var(--serif);
  letter-spacing: .22em; text-transform: uppercase;
}
.wordmark__sub {
  display: block; margin-top: 4px;
  font: 600 9px/1 var(--sans); letter-spacing: .2em;
  text-transform: uppercase; color: var(--muted);
}
.wordmark:hover .wordmark__text { color: var(--seal); }

.nav { display: flex; align-items: center; gap: clamp(10px, 1.7vw, 20px); flex-wrap: wrap; margin-left: auto; }
.nav a {
  color: var(--muted); text-decoration: none;
  font: 600 12px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase;
  padding: 8px 0; border-bottom: 2px solid transparent;
}
.nav a:hover, .nav a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--seal); }

.tools { display: flex; align-items: center; gap: 8px; }

.icon-button {
  display: inline-grid; place-items: center;
  width: 34px; height: 34px; padding: 0;
  border: 1px solid var(--edge); border-radius: 50%;
  background: transparent; color: var(--ink);
  font: 600 12px var(--sans); cursor: pointer;
}
.icon-button:hover { border-color: var(--seal); color: var(--seal); }

/* -- 04 seal marks and rules -------------------------------------------- */

.rule-spectrum { height: 2px; border: 0; margin: 0; background: var(--spectrum); opacity: .85; }

.seal {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #ff7ec2, var(--seal) 62%, var(--seal-deep));
  color: #fff; font: 700 13px/1 var(--sans);
  box-shadow: inset 0 1px 2px rgba(255, 255, 255, .5), 0 2px 8px rgba(130, 0, 75, .3);
}
.seal--lg { width: 46px; height: 46px; font-size: 16px; }

.eyebrow {
  margin: 0 0 12px;
  font: 700 11px/1.4 var(--sans);
  letter-spacing: .2em; text-transform: uppercase; color: var(--seal);
}

.kicker {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0 0 18px; padding: 5px 12px 5px 6px;
  border: 1px solid var(--edge-strong); border-radius: 999px;
  background: var(--wash);
  font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink);
}
.kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--seal); }

/* -- 05 hero ------------------------------------------------------------ */

.hero { position: relative; padding-block: clamp(44px, 7vw, 84px) clamp(36px, 6vw, 72px); overflow: hidden; }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60% 70% at 8% 0%, var(--wash), transparent 70%),
    radial-gradient(50% 60% at 96% 22%, var(--wash-2), transparent 72%);
}
.hero__grid { display: grid; gap: clamp(28px, 5vw, 56px); align-items: center; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); }
.hero__figure img { display: block; width: 100%; border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); }
.hero__figure figcaption { margin-top: 10px; color: var(--muted); font-size: 13px; }

h1, .h1 {
  margin: 0;
  font: 400 clamp(38px, 6.2vw, 66px)/1.04 var(--serif);
  letter-spacing: -.015em;
}
h1 em, .h1 em { font-style: italic; color: var(--seal); }

.lede { max-width: var(--measure); margin: 22px 0 0; color: var(--ink-2); font-size: clamp(18px, 2.1vw, 21px); line-height: 1.6; }

.hero__rule { width: 132px; height: 2px; margin: 24px 0; background: var(--spectrum); }

.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 20px; border-radius: 999px;
  border: 1px solid var(--seal); background: var(--seal); color: #fff;
  font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer;
}
.btn:hover { background: var(--seal-deep); border-color: var(--seal-deep); color: #fff; }
.btn--quiet { background: transparent; color: var(--ink); border-color: var(--edge-strong); }
.btn--quiet:hover { background: var(--wash); color: var(--ink); border-color: var(--seal); }
[data-theme="dark"] .btn, :root:not([data-theme="light"]) .btn { color: #2a0018; }
[data-theme="dark"] .btn:hover, :root:not([data-theme="light"]) .btn:hover { color: #2a0018; }
[data-theme="dark"] .btn--quiet, :root:not([data-theme="light"]) .btn--quiet { color: var(--ink); }
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) .btn { color: #fff; }
  :root:not([data-theme="dark"]) .btn--quiet { color: var(--ink); }
}

/* -- 06 typography blocks ----------------------------------------------- */

h2 { margin: 0 0 14px; font: 400 clamp(27px, 3.6vw, 38px)/1.18 var(--serif); letter-spacing: -.012em; }
h3 { margin: 34px 0 10px; font: 600 clamp(18px, 2.2vw, 21px)/1.35 var(--sans); letter-spacing: -.005em; }
h4 { margin: 26px 0 8px; font: 600 16px/1.4 var(--sans); color: var(--ink-2); }

p { margin: 0 0 1.05em; max-width: var(--measure); }
ul, ol { max-width: var(--measure); padding-left: 1.25em; }
li + li { margin-top: .45em; }
li::marker { color: var(--seal); }

.section-head { max-width: 760px; margin-bottom: clamp(26px, 3.5vw, 40px); }
.section-head p { color: var(--muted); }

strong { font-weight: 650; }
abbr[title] { text-decoration: underline dotted; cursor: help; }

.note, .caution {
  margin: 24px 0; padding: 16px 18px;
  border-left: 3px solid var(--seal); border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--wash);
}
.note > :last-child, .caution > :last-child { margin-bottom: 0; }
.note__title, .caution__title {
  display: block; margin-bottom: 6px;
  font: 700 11px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--seal);
}
.caution { border-left-color: var(--warn); background: var(--warn-bg); }
.caution .caution__title { color: var(--warn); }

/* -- 07 cards, grids, panels -------------------------------------------- */

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

.card {
  padding: 22px; border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow);
}
.card > :last-child { margin-bottom: 0; }
.card h3 { margin-top: 0; }
.card p { font-size: 15px; color: var(--muted); }

.card--link { text-decoration: none; color: inherit; display: block; }
.card--link:hover { border-color: var(--seal); color: inherit; }
.card--link strong { display: block; font: 600 17px/1.35 var(--sans); color: var(--ink); }
.card--link span { display: block; margin-top: 7px; font-size: 14px; color: var(--muted); }

.card--sealed { position: relative; padding-top: 30px; }
.card--sealed .seal { position: absolute; top: -17px; left: 22px; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--edge); border-radius: var(--radius); overflow: hidden; }
.stat-row > div { padding: 20px; border-right: 1px solid var(--edge); background: var(--paper); }
.stat-row > div:last-child { border-right: 0; }
.stat-row b { display: block; font: 400 clamp(22px, 3vw, 30px)/1.1 var(--serif); color: var(--ink); }
.stat-row span { display: block; margin-top: 6px; font-size: 12.5px; color: var(--muted); letter-spacing: .02em; }

.split { display: grid; gap: clamp(26px, 5vw, 54px); align-items: center; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.split--wide-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); }
.split img { display: block; width: 100%; border: 1px solid var(--edge); border-radius: var(--radius); box-shadow: var(--shadow); }
.split figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

.steps { counter-reset: step; list-style: none; padding: 0; max-width: none; display: grid; gap: 14px; }
.steps > li {
  counter-increment: step; position: relative;
  padding: 18px 20px 18px 62px;
  border: 1px solid var(--edge); border-radius: var(--radius); background: var(--paper);
  margin-top: 0;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 18px; top: 17px;
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--wash); border: 1px solid var(--edge-strong);
  color: var(--seal); font: 700 12px/1 var(--mono);
}
.steps b { display: block; font: 600 16px/1.4 var(--sans); }
.steps p { margin: 5px 0 0; font-size: 15px; color: var(--muted); }

/* -- 08 tables and code ------------------------------------------------- */

.table-scroll { overflow-x: auto; margin: 22px 0; border: 1px solid var(--edge); border-radius: var(--radius); }
table { width: 100%; min-width: 540px; border-collapse: collapse; font-size: 14.5px; }
caption { padding: 12px 14px; text-align: left; font: 600 12px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--edge); }
th, td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--edge); }
thead th { background: var(--paper-2); font: 700 11.5px/1.4 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--wash); }
td code, th code { white-space: nowrap; }

code {
  font: 500 .89em/1.5 var(--mono);
  padding: .1em .34em; border-radius: 3px;
  background: var(--wash); color: var(--ink);
  overflow-wrap: anywhere;
}

pre {
  margin: 20px 0; padding: 18px 20px; overflow-x: auto;
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--paper-3);
  font: 400 13.5px/1.7 var(--mono);
  tab-size: 2;
}
pre code { padding: 0; background: none; font-size: inherit; white-space: pre; }

.code-block { position: relative; }
.code-block .copy {
  position: absolute; top: 26px; right: 12px;
  padding: 5px 10px; border: 1px solid var(--edge-strong); border-radius: 999px;
  background: var(--paper); color: var(--muted);
  font: 600 11px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.code-block .copy:hover { color: var(--seal); border-color: var(--seal); }

/* -- 09 normative rules, definitions, status ---------------------------- */

.rules { list-style: none; padding: 0; max-width: none; margin: 0; }
.rules > li {
  display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--edge); margin-top: 0;
}
.rules > li:first-child { border-top: 1px solid var(--edge); }
.rules .rid { font: 700 12px/1.7 var(--mono); color: var(--seal); letter-spacing: .04em; }
.rules .rbody > :last-child { margin-bottom: 0; }
.rules .rbody p { max-width: none; }

.must, .should, .may {
  display: inline-block; padding: 1px 7px; border-radius: 3px;
  font: 700 10.5px/1.7 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  vertical-align: 1px;
}
.must { background: var(--bad-bg); color: var(--bad); }
.should { background: var(--warn-bg); color: var(--warn); }
.may { background: var(--wash-2); color: var(--violet); }

dl.defs { margin: 0; }
dl.defs > div { padding: 14px 0; border-bottom: 1px solid var(--edge); }
dl.defs dt { font: 600 16px/1.4 var(--sans); }
dl.defs dd { margin: 6px 0 0; color: var(--muted); font-size: 15px; max-width: var(--measure); }

.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font: 600 11.5px/1.6 var(--sans); letter-spacing: .04em;
  border: 1px solid currentColor;
}
.chip--ok { color: var(--ok); background: var(--ok-bg); }
.chip--warn { color: var(--warn); background: var(--warn-bg); }
.chip--bad { color: var(--bad); background: var(--bad-bg); }
.chip--info { color: var(--violet); background: var(--wash-2); }

.gate-banner {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 20px 22px; margin: 26px 0;
  border: 1px solid var(--edge-strong); border-radius: var(--radius);
  background: var(--wash);
}
.gate-banner h2, .gate-banner h3 { margin-top: 0; }
.gate-banner > div > :last-child { margin-bottom: 0; }

/* -- 10 diagrams -------------------------------------------------------- */

.diagram { margin: 26px 0; }
.diagram svg { display: block; width: 100%; height: auto; }
.diagram figcaption { margin-top: 12px; font-size: 13.5px; color: var(--muted); max-width: var(--measure); }

svg .d-fill { fill: var(--paper); }
svg .d-fill-2 { fill: var(--paper-2); }
svg .d-fill-3 { fill: var(--paper-3); }
svg .d-seal { fill: var(--seal); }
svg .d-seal-soft { fill: var(--wash); }
svg .d-stroke { stroke: var(--edge-strong); fill: none; stroke-width: 1.25; }
svg .d-stroke-seal { stroke: var(--seal); fill: none; stroke-width: 1.5; }
svg .d-text { fill: var(--ink); font: 600 13px var(--sans); }
svg .d-text-sm { fill: var(--muted); font: 500 11px var(--sans); }
svg .d-text-mono { fill: var(--ink-2); font: 500 11px var(--mono); }
svg .d-label { fill: var(--seal); font: 700 10px var(--sans); letter-spacing: .12em; }

/* -- 11 interactive tools ----------------------------------------------- */

.tool {
  border: 1px solid var(--edge); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow);
  padding: clamp(18px, 3vw, 28px); margin: 26px 0;
}
.tool label { display: block; margin-bottom: 8px; font: 600 13px/1.4 var(--sans); }
.tool .hint { margin: 0 0 14px; font-size: 13.5px; color: var(--muted); max-width: none; }

textarea, input[type="text"], select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--edge-strong); border-radius: var(--radius);
  background: var(--paper-2); color: var(--ink);
  font: 400 13.5px/1.6 var(--mono);
}
textarea { min-height: 132px; resize: vertical; }
select { font-family: var(--sans); font-size: 14px; }

.tool__controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: end; margin-top: 14px; }
.tool__controls .field { flex: 1 1 190px; min-width: 0; }
.tool__controls .field label { margin-bottom: 6px; }

.result { margin-top: 22px; }
.result:empty { display: none; }
.result__verdict {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border-radius: var(--radius); border: 1px solid currentColor;
  font: 600 15px/1.4 var(--sans);
}
.result__verdict.is-ok { color: var(--ok); background: var(--ok-bg); }
.result__verdict.is-bad { color: var(--bad); background: var(--bad-bg); }
.result__verdict.is-warn { color: var(--warn); background: var(--warn-bg); }

.field-list { list-style: none; padding: 0; margin: 18px 0 0; max-width: none; border-top: 1px solid var(--edge); }
.field-list > li { margin-top: 0; padding: 13px 0; border-bottom: 1px solid var(--edge); display: grid; gap: 4px 16px; grid-template-columns: 168px minmax(0, 1fr); }
.field-list .fname { font: 700 12px/1.6 var(--mono); color: var(--seal); }
.field-list .fval { font: 400 13px/1.6 var(--mono); overflow-wrap: anywhere; color: var(--ink); }
.field-list .fnote { grid-column: 2; font-size: 13px; color: var(--muted); }

.js-only { display: none; }
.js .js-only { display: block; }
.js .no-js-note { display: none; }
.no-js-note { margin: 20px 0; padding: 14px 16px; border: 1px dashed var(--edge-strong); border-radius: var(--radius); color: var(--muted); font-size: 14px; }

/* -- 12 search ---------------------------------------------------------- */

.search { position: relative; flex: 0 1 240px; min-width: 150px; }
.search input {
  width: 100%; padding: 8px 12px 8px 32px;
  border: 1px solid var(--edge-strong); border-radius: 999px;
  background: var(--paper-2); color: var(--ink);
  font: 400 13.5px/1.4 var(--sans);
}
.search::before {
  content: "/"; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  color: var(--muted); font: 700 12px var(--mono); pointer-events: none;
}
.search input:focus::placeholder { color: transparent; }

.search__results {
  position: absolute; z-index: 60; top: calc(100% + 8px); right: 0;
  width: min(420px, 88vw); max-height: 62vh; overflow-y: auto;
  margin: 0; padding: 6px; list-style: none;
  border: 1px solid var(--edge-strong); border-radius: var(--radius);
  background: var(--paper); box-shadow: var(--shadow);
}
.search__results:empty { display: none; }
.search__results li { margin: 0; }
.search__results a { display: block; padding: 9px 11px; border-radius: 3px; text-decoration: none; color: var(--ink); }
.search__results a:hover, .search__results a:focus { background: var(--wash); }
.search__results b { display: block; font: 600 14px/1.35 var(--sans); }
.search__results span { display: block; margin-top: 3px; font-size: 12.5px; color: var(--muted); }
.search__results em { display: block; margin-top: 2px; font: 500 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--seal); font-style: normal; }
.search__empty { padding: 14px 12px; color: var(--muted); font-size: 13.5px; }

/* -- 13 footer ---------------------------------------------------------- */

.pagefoot { border-top: 1px solid var(--edge); background: var(--paper-2); padding-block: 40px 32px; margin-top: var(--rhythm); }
.pagefoot__grid { display: grid; gap: 26px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pagefoot h2 { font: 700 11px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.pagefoot ul { list-style: none; padding: 0; margin: 0; }
.pagefoot li { margin-top: 6px; }
.pagefoot a { color: var(--ink-2); text-decoration: none; font-size: 14px; }
.pagefoot a:hover { color: var(--seal); text-decoration: underline; }

.provenance {
  margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--edge);
  display: grid; gap: 6px 26px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  font-size: 12.5px; color: var(--muted);
}
.provenance b { color: var(--ink-2); font-weight: 600; }
.provenance p { max-width: none; margin: 0; }
.colophon { margin-top: 22px; font-size: 12.5px; color: var(--muted); }

/* -- 14 responsive ------------------------------------------------------ */

@media (max-width: 960px) {
  .hero__grid, .split, .split--wide-left { grid-template-columns: minmax(0, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-row > div:nth-child(2n) { border-right: 0; }
  .stat-row > div:nth-child(-n+2) { border-bottom: 1px solid var(--edge); }
}

@media (max-width: 760px) {
  body { font-size: 16.5px; }
  .grid--3 { grid-template-columns: minmax(0, 1fr); }
  .nav { order: 3; width: 100%; margin-left: 0; gap: 14px; padding-bottom: 8px; overflow-x: auto; }
  .nav a { white-space: nowrap; }
  .search { flex: 1 1 auto; }
  .masthead__inner { padding-block: 10px; }
  .rules > li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .field-list > li { grid-template-columns: minmax(0, 1fr); }
  .field-list .fnote { grid-column: 1; }
  .gate-banner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 520px) {
  .grid--2, .grid--4 { grid-template-columns: minmax(0, 1fr); }
  .stat-row { grid-template-columns: minmax(0, 1fr); }
  .stat-row > div { border-right: 0; border-bottom: 1px solid var(--edge); }
  .stat-row > div:last-child { border-bottom: 0; }
  .code-block .copy { position: static; display: block; margin: 0 0 8px auto; }
}

@media print {
  .masthead, .search, .tools, .skip-link { display: none; }
  body { background: #fff; color: #000; font-size: 11pt; }
  a::after { content: " (" attr(href) ")"; font-size: 9pt; color: #444; }
}