/* Founders' Debate
   Layout: an archivist's reading desk. The document sits in a parchment column; a marginal
   "gloss" column opens beside the passage (debate, biography, source), like marginalia in a
   period edition. On phones the gloss becomes a sheet over the text.
*/
@font-face { font-family: "Caslon Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/libre-caslon-text-latin-400-normal.woff2") format("woff2"); 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: "Caslon Text"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/libre-caslon-text-latin-ext-400-normal.woff2") format("woff2"); 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: "Caslon Text"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/libre-caslon-text-latin-400-italic.woff2") format("woff2"); 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: "Caslon Text"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/libre-caslon-text-latin-ext-400-italic.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }
@font-face { font-family: "Caslon Text"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/libre-caslon-text-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Caslon Text"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("../fonts/libre-caslon-text-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }
@font-face { font-family: "Caslon Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/libre-caslon-display-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Caslon Display"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/libre-caslon-display-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+A720-A7FF; }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/public-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("../fonts/public-sans-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Public Sans"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/public-sans-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Color: parchment, iron-gall ink, faded ink, ruled line, sealing wax */
  --paper: #ebe0c8;
  --paper-deep: #e1d3b4;
  --paper-lift: #f3ead6;
  --ink: #2a2017;
  --ink-soft: #5d4b39;
  --ink-faint: #7a6750;
  --rule: #c6b08a;
  --rule-soft: #d6c5a2;
  --wax: #8a2f1f;
  --wax-soft: rgba(138, 47, 31, 0.10);
  --wax-line: rgba(138, 47, 31, 0.45);
  --mark: rgba(196, 139, 36, 0.30);
  --shadow: 0 1px 0 rgba(255, 250, 238, 0.6) inset, 0 18px 40px -24px rgba(66, 44, 18, 0.45);
  --scrim: rgba(42, 32, 23, 0.38);
  --grain-opacity: 0.55;
  /* Scrollbars: aged-vellum track, a thumb the tone of the ruled lines, darkening toward ink on hover */
  --scroll-track: #e3d6ba;
  --scroll-thumb: #bfa67c;
  --scroll-thumb-hover: #9c8158;

  /* Type: Caslon (the face of the 1776 Dunlap broadside) for text, Public Sans (U.S. federal) for apparatus */
  --display: "Caslon Display", "Libre Caslon Display", "Big Caslon", "Iowan Old Style", Georgia, serif;
  --text: "Caslon Text", "Libre Caslon Text", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --ui: "Public Sans", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  --step--2: 0.74rem;
  --step--1: 0.86rem;
  --step-0: 1.06rem;
  --step-1: 1.28rem;
  --step-2: 1.62rem;
  --step-3: clamp(1.9rem, 1.4rem + 2vw, 2.7rem);
  --step-4: clamp(2.3rem, 1.5rem + 3.4vw, 3.9rem);
  --reader-size: 1.13rem;

  --radius: 3px;
  --gutter: clamp(16px, 4vw, 40px);
  --gloss-w: min(520px, 42vw);
  --header-h: 64px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  color-scheme: light;
}
/* Daylight (parchment) is the default for every visitor. Candlelight applies only when chosen:
   the moon button, or a host page that sets data-theme="dark" explicitly. */
/* Candlelight palette "Walnut" (chosen 2026-09-30 from three lighter browns; all text pairs pass WCAG AA).
   Alternatives kept in tests/tools/palettes.mjs: Saddle Leather (red-brown), Tobacco Leaf (golden-brown). */
:root[data-theme="dark"] {
  --paper: #3b2f25; --paper-deep: #45372b; --paper-lift: #4c3d30;
  --ink: #f3e8d3; --ink-soft: #d8c7aa; --ink-faint: #bca98a;
  --rule: #6d5945; --rule-soft: #574738;
  --wax: #f6b193; --wax-soft: rgba(246, 177, 147, 0.13); --wax-line: rgba(246, 177, 147, 0.55);
  --mark: rgba(226, 178, 90, 0.30);
  --shadow: 0 1px 0 rgba(255, 236, 205, 0.05) inset, 0 18px 40px -24px rgba(10, 6, 2, 0.7);
  --scrim: rgba(18, 12, 7, 0.55); --grain-opacity: 0.25;
  --scroll-track: #33291f; --scroll-thumb: #7a6450; --scroll-thumb-hover: #957b62;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 24px); }
/* Scrollbars in the parchment palette. scrollbar-color is inherited, so this reaches every scrolling
   panel (commentary, contents, portrait strip); the ::-webkit rules cover older Chromium and Safari. */
html { scrollbar-color: var(--scroll-thumb) var(--scroll-track); }
.gloss, .toc, .clause-quote, .faces, .tabs { scrollbar-width: thin; }
.gloss, .clause-quote, .toc { scrollbar-color: var(--scroll-thumb) transparent; }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--scroll-track); }
::-webkit-scrollbar-thumb { background: var(--scroll-thumb); border-radius: var(--radius); border: 3px solid var(--scroll-track); }
::-webkit-scrollbar-thumb:hover { background: var(--scroll-thumb-hover); }
::-webkit-scrollbar-corner { background: var(--scroll-track); }
.gloss::-webkit-scrollbar-track, .clause-quote::-webkit-scrollbar-track { background: transparent; }
.gloss::-webkit-scrollbar-thumb { border-color: var(--paper-lift); }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--text); font-size: var(--step-0); line-height: 1.6;
  font-kerning: normal; font-variant-ligatures: common-ligatures;
  text-rendering: optimizeLegibility; min-height: 100%;
}
/* Parchment grain: fixed, non-interactive layer (never on scrolling containers) */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity: var(--grain-opacity);
  background-image:
    radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(120, 84, 40, 0.10) 100%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .45  0 0 0 0 .33  0 0 0 0 .18  0 0 0 .09 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration-color: var(--wax-line); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--wax); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--wax); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--mark); color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 1.15em; height: 1.15em; flex: none; fill: currentColor; vertical-align: -0.18em; }
sup { font-size: 0.66em; line-height: 0; }

/* ---------- Masthead ---------- */
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; background: var(--ink); color: var(--paper); padding: 8px 12px; font-family: var(--ui); font-size: var(--step--1); border-radius: var(--radius); }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }
.masthead {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(6px); -webkit-backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--rule);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) { .masthead { background: var(--paper); } }
.masthead-inner {
  max-width: 1480px; margin: 0 auto; padding-inline: var(--gutter); min-height: var(--header-h);
  display: flex; align-items: center; gap: 20px;
}
.wordmark { display: flex; align-items: baseline; gap: 10px; text-decoration: none; white-space: nowrap; }
.wordmark-name { font-family: var(--display); font-size: 1.42rem; letter-spacing: 0.01em; line-height: 1; }
.wordmark-name em { font-family: var(--text); font-style: italic; font-size: 0.86em; color: var(--wax); }
.nav { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; min-width: 0; }
.nav::-webkit-scrollbar { display: none; }
.nav a {
  font-family: var(--ui); font-size: var(--step--1); font-weight: 500; text-decoration: none; white-space: nowrap;
  position: relative; padding: 4px 12px 12px; color: var(--ink-soft);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); }
.tools { display: flex; gap: 4px; }
.tool-btn {
  display: inline-grid; place-items: center; width: 38px; height: 38px; position: relative;
  border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--ink-soft);
}
.tool-btn:hover { color: var(--ink); }
.tool-btn:active { transform: translateY(1px); }
@media (max-width: 860px) {
  .masthead-inner { flex-wrap: wrap; row-gap: 0; padding-block: 8px 0; }
  .nav { order: 3; width: 100%; margin: 0 calc(var(--gutter) * -1); padding: 4px var(--gutter) 8px; }
  .tools { margin-left: auto; }
}

/* ---------- Page frames ---------- */
main { position: relative; z-index: 1; }
.view { max-width: 1480px; margin: 0 auto; padding-inline: var(--gutter); padding-block: 36px 96px; }
.view[hidden] { display: none !important; }
.prose { max-width: 66ch; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: 1.12; text-wrap: balance; margin: 0; }
.h-doc { font-size: var(--step-4); letter-spacing: -0.005em; }
.h-sec { font-size: var(--step-3); }
.h-sub { font-size: var(--step-2); }
.lede { font-size: var(--step-1); color: var(--ink-soft); max-width: 58ch; margin: 14px 0 0; }
.meta { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.45; }
.label { font-family: var(--ui); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.rule-orn { display: flex; align-items: center; gap: 14px; color: var(--ink-faint); margin: 30px 0; }
.rule-orn::before, .rule-orn::after { content: ""; height: 1px; background: var(--rule); flex: 1; }
.btn {
  display: inline-flex; align-items: center; gap: 8px; font-family: var(--ui); font-size: var(--step--1); font-weight: 600;
  position: relative; padding: 6px 2px 16px; border: 0; background: transparent; color: var(--ink);
  text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .15s var(--ease), color .2s;
}
.btn:hover { color: var(--wax); }
.btn:active { transform: translateY(1px); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; font-family: var(--ui); font-size: var(--step--2); font-weight: 600;
  letter-spacing: 0.02em; position: relative; padding: 4px 1px; color: var(--ink-soft); white-space: nowrap;
}
.chip.wax { color: var(--wax); }

/* ---------- Home ---------- */
.home-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: end; padding-block: 12px 8px; }
.home-hero h1 { font-size: clamp(2.1rem, 1.3rem + 2.5vw, 3.25rem); line-height: 1.08; max-width: 19ch; padding-bottom: 4px; }
.home-hero h1 em { font-family: var(--text); font-style: italic; color: var(--wax); }
.home-hero .lede { margin-top: 18px; }
.home-cta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 26px; }
.hero-figure { margin: 0; position: relative; }
.hero-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow); filter: sepia(0.12) saturate(0.92); }
.hero-figure figcaption { margin-top: 8px; }
.plates { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 36px); margin-top: 56px; }
.plate {
  display: grid; grid-template-columns: 132px minmax(0, 1fr); gap: 20px; align-items: start; text-decoration: none;
  padding: 18px; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-lift); box-shadow: var(--shadow);
  transition: transform .25s var(--ease), border-color .2s;
}
.plate:hover { transform: translateY(-2px); border-color: var(--wax-line); color: inherit; }
.plate img { width: 132px; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 2px; filter: sepia(0.2); }
.plate h2 { font-size: var(--step-2); }
.plate p { margin: 8px 0 12px; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.5; }
.plate .facts { display: flex; gap: 6px; flex-wrap: wrap; }
.strip { margin-top: 64px; }
.strip-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.faces { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 14px; overflow-x: auto; padding: 18px 2px 12px; scroll-snap-type: x mandatory; scrollbar-width: thin; }
.face { scroll-snap-align: start; text-decoration: none; display: grid; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
.face .portrait { width: 112px; height: 136px; }
.face span { font-family: var(--ui); font-size: var(--step--2); line-height: 1.3; color: var(--ink-soft); }
.face:hover span { color: var(--wax); }
.argued { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px; margin-top: 20px; border-top: 1px solid var(--rule); }
.argued a { display: grid; gap: 4px; padding: 16px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; }
.argued a:hover .t { color: var(--wax); }
.argued .t { font-size: var(--step-1); font-family: var(--display); line-height: 1.2; }
@media (max-width: 900px) {
  .home-hero { grid-template-columns: 1fr; }
  .plates { grid-template-columns: 1fr; }
  .argued { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .plate { grid-template-columns: 88px minmax(0, 1fr); gap: 14px; padding: 14px; }
  .plate img { width: 88px; }
}

/* ---------- Portraits ---------- */
.portrait {
  position: relative; overflow: hidden; border-radius: 2px; background: var(--paper-deep);
  box-shadow: inset 0 0 0 1px var(--rule);
}
.portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; filter: sepia(0.18) saturate(0.9); }
.portrait .mono {
  position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--display); font-size: 2rem; color: var(--ink-faint);
  background: repeating-linear-gradient(135deg, transparent 0 7px, var(--rule-soft) 7px 8px);
}

/* ---------- Document reading layout ---------- */
.doc-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: clamp(20px, 3vw, 48px); align-items: start; }
.doc-layout.has-gloss { grid-template-columns: 200px minmax(0, 1fr) var(--gloss-w); }
.toc { position: sticky; top: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px)); max-height: calc(100vh - var(--header-h) - 48px); overflow: auto; font-family: var(--ui); font-size: var(--step--1); padding-right: 4px; }
.toc a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--rule); text-decoration: none; color: var(--ink-soft); line-height: 1.35; }
.toc a:hover { color: var(--ink); border-left-color: var(--wax); }
.toc a.sub { padding-left: 24px; font-size: var(--step--2); }
.toc .label { display: block; margin: 18px 0 8px; }
.toc .label:first-child { margin-top: 0; }
.doc-head { max-width: 70ch; margin-bottom: 30px; }
.doc-head.wide { max-width: none; }
.doc-head .dateline { font-family: var(--text); font-style: italic; color: var(--ink-soft); margin: 0 0 10px; font-size: var(--step-1); }
.doc-head .meta { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin: 18px 0 0; padding: 12px 14px; border: 1px solid var(--rule-soft); border-radius: var(--radius); font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); }
.legend b { font-weight: 600; color: var(--ink); }
.legend .sample-d { position: relative; padding-left: 9px; }
.legend .sample-d::before { content: ""; position: absolute; left: 0; top: 0.1em; bottom: 0.1em; width: 2px; border-radius: 2px; background: var(--wax-line); } /* same mark as .p.debated::after */
.legend .sample-p { text-decoration: underline dotted var(--wax-line); text-underline-offset: 0.2em; }

.doc { max-width: 70ch; counter-reset: grievance; }
.doc .p { position: relative; margin: 0 0 1.05em; font-size: var(--reader-size); line-height: 1.72; hyphens: manual; text-wrap: pretty; }
.doc .art { font-family: var(--display); font-size: var(--step-3); margin: 1.8em 0 0.5em; }
.doc .sec { font-family: var(--ui); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); margin: 1.6em 0 0.5em; }
.doc .amend-h { font-family: var(--display); font-size: var(--step-2); margin: 2em 0 0.3em; }
.doc .amend-dates { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); margin: 0 0 0.9em; }
.doc .amend-note { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); border-left: 2px solid var(--rule); padding-left: 12px; margin: 0 0 1em; }
.doc .preamble { font-size: calc(var(--reader-size) * 1.22); line-height: 1.6; }
.doc .preamble::first-letter { font-family: var(--display); float: left; font-size: 3.4em; line-height: 0.82; padding: 0.06em 0.08em 0 0; color: var(--wax); }
.doc .dateline-p { font-style: italic; text-align: center; color: var(--ink-soft); }
.doc .title-p { font-family: var(--display); font-size: calc(var(--reader-size) * 1.35); line-height: 1.35; }
.doc .grievance { padding-left: 1.6em; }
.doc .grievance::before { content: "\2767"; position: absolute; left: 0; top: 0.05em; color: var(--rule); font-size: 0.9em; }
.doc .attest { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); }

.p.debated { cursor: pointer; border-radius: 2px; transition: background-color .25s var(--ease); }
.p.debated::after {
  content: ""; position: absolute; left: -14px; top: 0.35em; bottom: 0.35em; width: 2px; border-radius: 2px;
  background: var(--wax-line); transform-origin: left center; transition: background-color .2s, transform .2s var(--ease);
}
.p.debated:hover { background-color: var(--wax-soft); }
.p.debated:hover::after, .p.debated.is-open::after { background: var(--wax); transform: scaleX(1.5); }
.p.debated.is-open { background-color: var(--wax-soft); box-shadow: -8px 0 0 var(--wax-soft), 8px 0 0 var(--wax-soft); }
.p .cite {
  position: absolute; right: calc(100% + 16px); top: 0.3em; width: 150px; text-align: right; font-family: var(--ui); font-size: var(--step--2);
  color: var(--ink-faint); line-height: 1.35; font-variant-numeric: tabular-nums;
}
.p .count {
  display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; font-family: var(--ui); font-size: var(--step--2); font-weight: 600;
  color: var(--wax); position: relative; padding: 1px 1px; line-height: 1.6; vertical-align: 0.15em; white-space: nowrap;
}
.p .changed { display: inline-flex; margin-left: 6px; vertical-align: 0.15em; }
.p.superseded .ptext { color: var(--ink-soft); }
.doc-layout .doc .p .cite { display: none; }
@media (min-width: 1180px) { .doc-layout:not(.has-gloss) .doc .p .cite { display: block; } .doc-layout:not(.has-gloss) .doc { margin-left: 150px; } }

.signers { margin-top: 2.2em; border-top: 1px solid var(--rule); padding-top: 1.4em; max-width: 70ch; }
.signers h2 { font-size: var(--step-2); margin-bottom: 0.4em; }
.signer-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 18px 28px; margin-top: 1em; }
.state-group .label { margin-bottom: 6px; display: block; }
.state-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.name-btn {
  background: none; border: 0; padding: 2px 0; cursor: pointer; text-align: left; font-family: var(--text); font-size: var(--step-0);
  text-decoration: underline dotted var(--wax-line); text-underline-offset: 0.22em; color: var(--ink);
}
.name-btn:hover, .name-btn.is-open { color: var(--wax); text-decoration-style: solid; }
.name-btn .as-signed { font-style: italic; }
.name-btn small { display: block; font-family: var(--ui); font-size: var(--step--2); color: var(--ink-faint); text-decoration: none; }
.attest-block { margin-top: 1.4em; font-family: var(--text); font-style: italic; color: var(--ink-soft); }

/* ---------- Gloss (side panel / phone sheet) ---------- */
.gloss {
  position: sticky; top: calc(var(--header-h) + 16px + env(safe-area-inset-top, 0px));
  max-height: calc(100vh - var(--header-h) - 32px - env(safe-area-inset-top, 0px)); overflow: auto; overscroll-behavior: contain;
  background: var(--paper-lift); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  min-width: 0;
}
.gloss[hidden] { display: none !important; }
.gloss:focus, #main:focus { outline: none; }
.gloss-inner { padding: 22px 24px 28px; }
.gloss-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.gloss-close { flex: none; }
.gloss h2 { font-size: var(--step-2); margin-top: 6px; }
.gloss-head { position: relative; }
.grab { display: none; }
/* Beside the text, the passage itself is visible, so the panel does not repeat it; on phones the
   panel covers the text, so the passage folds into a dropdown under the header's label. */
@media (min-width: 1081px) { .gloss .clause-quote, .gloss .quote-toggle { display: none; } }
.quote-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; margin: -8px 0 -8px -8px; padding: 8px;
  border: 0; border-radius: var(--radius); background: transparent; cursor: pointer; text-align: left;
}
.quote-toggle .label { color: var(--ink-soft); }
.quote-toggle .icon { flex: none; color: var(--ink-faint); transition: transform .2s var(--ease); }
.quote-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.gloss .clause-quote[hidden] { display: none; }
.gloss .clause-quote {
  position: absolute; z-index: 4; left: 0; right: 0; top: 100%; margin: 0; padding: 12px 14px;
  background: var(--paper); border: 1px solid var(--rule); border-radius: var(--radius); box-shadow: var(--shadow);
  font-size: var(--step--1); line-height: 1.6; color: var(--ink-soft); max-height: min(14em, 40vh); overflow: auto; overscroll-behavior: contain;
}
.gloss .summary { margin: 16px 0 0; font-size: var(--step-0); line-height: 1.6; }
.gloss .summary-by { display: block; margin-top: 6px; }
.gloss-sub { margin-top: 34px; padding-top: 22px; border-top: 3px double var(--rule); font-size: var(--step-2); }
.filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 20px 0 6px; }
.filter {
  font-family: var(--ui); font-size: var(--step--2); font-weight: 600; padding: 3px 11px 11px; cursor: pointer;
  position: relative; border: 0; background: transparent; color: var(--ink-soft); text-decoration: none;
}
.filter:hover, .filter[aria-pressed="true"] { color: var(--ink); }
.side-group { margin-top: 22px; }
.side-group > h3 { font-family: var(--ui); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); display: flex; gap: 8px; align-items: center; padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.side-group > h3 .n { font-variant-numeric: tabular-nums; }
.entry { padding: 16px 0 18px; border-bottom: 1px solid var(--rule-soft); }
.entry:last-child { border-bottom: 0; }
.entry-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.entry-title { font-family: var(--display); font-size: var(--step-1); line-height: 1.2; }
.entry-by { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); }
.entry blockquote {
  margin: 12px 0 0; padding: 0 0 0 16px; border-left: 2px solid var(--rule); font-size: var(--step-0); line-height: 1.62;
}
.entry.side-antifederalist blockquote { border-left-style: dashed; }
.entry.side-convention blockquote, .entry.side-draft blockquote { border-left-color: var(--wax-line); }
.entry .note { margin: 10px 0 0; font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); line-height: 1.5; }
.entry-foot { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.link-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--ui); font-size: var(--step--1); font-weight: 600; color: var(--wax); text-decoration: none;
}
.link-btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.speaker-btn { font-family: var(--ui); font-size: var(--step--1); font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; color: var(--ink); text-decoration: underline dotted var(--wax-line); text-underline-offset: 0.2em; }
.speaker-btn:hover { color: var(--wax); }

.person-card { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 8px; }
.person-card .portrait { width: 116px; height: 146px; }
.person-card h2 { margin-top: 2px; }
.person-card .life { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); margin-top: 6px; }
.roles { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.portrait-note { margin-top: 12px; max-width: 46ch; font-family: var(--ui); font-size: var(--step--2); line-height: 1.45; color: var(--ink-faint); }
.bio { margin-top: 20px; max-width: 70ch; }
.writings { max-width: 76ch; }
.bio p { margin: 0 0 0.9em; line-height: 1.66; }
.bio .source-line { font-family: var(--ui); font-size: var(--step--2); color: var(--ink-faint); margin: 0 0 12px; }
.bio.clamped .bio-text { max-height: 13.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.tabs { display: flex; gap: 2px; margin-top: 26px; border-bottom: 1px solid var(--rule); overflow-x: auto; scrollbar-width: none; }
.tab { font-family: var(--ui); font-size: var(--step--1); font-weight: 600; background: none; border: 0; padding: 10px 12px; cursor: pointer; color: var(--ink-soft); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tab[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--wax); }
.tab .n { font-variant-numeric: tabular-nums; color: var(--ink-faint); font-weight: 500; margin-left: 4px; }
.work-list { list-style: none; margin: 0; padding: 0; }
.work-list li { border-bottom: 1px solid var(--rule-soft); }
.work-row {
  display: grid; grid-template-columns: 7.6em minmax(0, 1fr); gap: 12px; width: 100%; padding: 11px 2px; background: none; border: 0; cursor: pointer; text-align: left;
  font-family: var(--text); font-size: var(--step--1); line-height: 1.4; color: var(--ink);
}
.work-row:hover .wt { color: var(--wax); }
.work-row .wd { font-family: var(--ui); font-size: var(--step--2); color: var(--ink-faint); font-variant-numeric: tabular-nums; padding-top: 2px; }
.work-row .wt { font-size: var(--step-0); }
.work-row .ws { display: block; font-family: var(--ui); font-size: var(--step--2); color: var(--ink-faint); margin-top: 2px; }
.list-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 14px 0 6px; }
.input {
  font-family: var(--ui); font-size: var(--step--1); padding: 9px 12px; border-radius: var(--radius); border: 1px solid var(--rule); background: var(--paper);
  color: var(--ink); min-width: 0; flex: 1 1 200px;
}
.input::placeholder { color: var(--ink-faint); }
.more-btn { margin: 14px 0 0; }
.empty { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); padding: 16px 0; }

/* ---------- Full reader ---------- */
.reader { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: clamp(24px, 4vw, 64px); align-items: start; }
.reader-main { min-width: 0; }
.reader-back { margin-bottom: 18px; }
.reader h1 { font-size: var(--step-3); max-width: 24ch; }
.reader .subtitle { font-style: italic; color: var(--ink-soft); font-size: var(--step-1); margin: 8px 0 0; max-width: 50ch; }
.reader .byline { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); margin-top: 14px; display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.text { max-width: 68ch; margin-top: 30px; font-size: var(--reader-size); }
.text p { margin: 0 0 1em; line-height: 1.72; hyphens: manual; text-wrap: pretty; }
.text .q { margin: 0 0 1em; padding-left: 2em; } /* indented, as the printed edition sets quoted matter */
.text .n { font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); background: var(--paper-deep); padding: 10px 12px; border-radius: var(--radius); line-height: 1.5; }
.text .n::before { content: "Editor's Note in This Edition. "; font-weight: 600; }
.text .h { font-family: var(--display); font-size: var(--step-1); margin: 1.4em 0 0.6em; text-align: left; }
.text .spk { font-weight: 700; }
.text p.focus-person { background: var(--wax-soft); box-shadow: -10px 0 0 var(--wax-soft), 10px 0 0 var(--wax-soft); }
.text .pg { font-family: var(--ui); font-size: 0.62em; color: var(--ink-faint); vertical-align: 0.4em; padding: 0 2px; }
mark { background: var(--mark); color: inherit; border-radius: 2px; box-shadow: 0 0 0 2px var(--mark); }
.aside { position: sticky; top: calc(var(--header-h) + 24px + env(safe-area-inset-top, 0px)); font-family: var(--ui); font-size: var(--step--1); line-height: 1.5; display: grid; gap: 18px; }
.aside dl { margin: 0; display: grid; gap: 12px; }
.aside dt { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.aside dd { margin: 2px 0 0; color: var(--ink); overflow-wrap: anywhere; }
.status-box { padding: 12px 14px; border-radius: var(--radius); border: 1px dashed var(--rule); color: var(--ink-soft); }
.status-box.ok { border-style: solid; }
.series-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 18px; border-top: 1px solid var(--rule); max-width: 68ch; flex-wrap: wrap; }
.skeleton { display: grid; gap: 12px; max-width: 68ch; margin-top: 30px; }
.skeleton span { height: 0.9em; border-radius: 2px; background: linear-gradient(90deg, var(--paper-deep), var(--rule-soft), var(--paper-deep)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.skeleton span:nth-child(3n) { width: 82%; }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (max-width: 1000px) {
  .reader { grid-template-columns: 1fr; }
  .aside { position: static; order: -1; }
  .aside dl { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
}

/* ---------- Signers directory ---------- */
.dir-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 22px 0 8px; }
.dir-state { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 12px 28px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule-soft); }
.dir-state h2 { font-size: var(--step-2); display: flex; flex-direction: column; gap: 4px; }
.dir-state h2 .meta { font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; }
.dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 22px 18px; }
@media (max-width: 700px) { .dir-state { grid-template-columns: 1fr; } .dir-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 16px 12px; } }
.card { display: grid; gap: 10px; text-decoration: none; }
.card .portrait { width: 100%; aspect-ratio: 4 / 5; }
.card .nm { font-family: var(--display); font-size: var(--step-1); line-height: 1.15; }
.card .sub { font-family: var(--ui); font-size: var(--step--2); color: var(--ink-faint); line-height: 1.4; }
.card:hover .nm { color: var(--wax); }
.card .portrait img { transition: transform .5s var(--ease); }
.card:hover .portrait img { transform: scale(1.03); }

/* ---------- Debates index ---------- */
.debate-index { margin-top: 20px; display: grid; gap: 34px; }
.debate-index section h2 { font-size: var(--step-2); padding-bottom: 8px; border-bottom: 1px solid var(--rule); }
.debate-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 36px; }
.debate-row { display: grid; grid-template-columns: 8.5em minmax(0, 1fr); gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--rule-soft); text-decoration: none; }
.debate-row .where { font-family: var(--ui); font-size: var(--step--2); color: var(--ink-faint); padding-top: 4px; }
.debate-row .t { font-family: var(--display); font-size: var(--step-1); line-height: 1.2; }
.debate-row .c { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.debate-row:hover .t { color: var(--wax); }
@media (max-width: 860px) { .debate-rows { grid-template-columns: 1fr; } }

/* ---------- Sources page ---------- */
/* ---------- Library ---------- */
.library { display: grid; gap: 0; max-width: 72ch; }
.lib-item { padding: 26px 0 28px; border-top: 1px solid var(--rule); }
.lib-item:last-child { border-bottom: 1px solid var(--rule); }
.lib-title { font-size: var(--step-2); line-height: 1.15; }
.lib-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 8px 0 0; font-family: var(--ui); font-size: var(--step--1); color: var(--ink-soft); }
.lib-blurb { margin: 12px 0 0; font-size: var(--step-0); line-height: 1.6; }
.lib-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 16px; }
.lib-toggle .icon { transition: transform .2s var(--ease); }
.lib-toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
.lib-parts { margin: 14px 0 0; padding-left: 1.6em; display: grid; gap: 6px; font-size: var(--step--1); line-height: 1.45; columns: 1; }
.lib-parts[hidden] { display: none; }
.lib-parts a { text-decoration-color: var(--rule); }
.lib-parts a:hover { color: var(--wax); }

.sources { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 56px; margin-top: 30px; }
.sources section h2 { font-size: var(--step-2); margin-bottom: 10px; }
.sources p, .sources li { font-size: var(--step--1); line-height: 1.6; }
.sources ul { padding-left: 1.1em; margin: 0; display: grid; gap: 8px; }
.stat-line { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; font-family: var(--ui); }
.stat-line div { display: grid; }
.stat-line b { font-family: var(--display); font-weight: 400; font-size: var(--step-3); line-height: 1; font-variant-numeric: tabular-nums; }
.stat-line span { font-size: var(--step--2); color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; }
.credits { columns: 2 280px; column-gap: 32px; font-family: var(--ui); font-size: var(--step--2); color: var(--ink-soft); }
.credits p { break-inside: avoid; margin: 0 0 8px; }
@media (max-width: 860px) { .sources { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */
.foot { position: relative; z-index: 1; border-top: 1px solid var(--rule); }
.foot-inner { max-width: 1480px; margin: 0 auto; padding: 22px var(--gutter) 40px; font-family: var(--ui); font-size: var(--step--2); color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: space-between; }

/* ---------- Ink strokes (ink-stroke): the quill underline that replaces every pill shape ----------
   Clickable things draw a stroke left to right on hover or keyboard focus and, when the pointer leaves,
   lift it off in the same direction. app.js picks one of the four strokes at random for each hover
   (data-ink). Whatever is already selected keeps a finished stroke in ink and does not redraw.
   Labels (chips, passage counts) carry a quiet, permanent stroke. */
:root {
  --ink-1: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M3.1%2016.29L4.9%2015.86%206.6%2015.45%208.4%2015.06%2010.2%2014.69%2012.1%2014.35%2013.9%2014.02%2015.8%2013.72%2017.7%2013.44%2019.6%2013.18%2021.5%2012.94%2023.4%2012.72%2025.3%2012.51%2027.3%2012.33%2029.3%2012.16%2031.3%2012.01%2033.3%2011.87%2035.3%2011.75%2037.3%2011.64%2039.3%2011.55%2041.4%2011.47%2043.5%2011.40%2045.6%2011.35%2047.6%2011.30%2049.8%2011.27%2051.9%2011.25%2054.0%2011.23%2056.1%2011.23%2058.3%2011.23%2060.5%2011.25%2062.6%2011.26%2064.8%2011.29%2067.0%2011.32%2069.2%2011.35%2071.4%2011.39%2073.6%2011.44%2075.9%2011.48%2078.1%2011.53%2080.3%2011.58%2082.6%2011.64%2084.8%2011.69%2087.1%2011.74%2089.4%2011.80%2091.6%2011.85%2093.9%2011.91%2096.2%2011.96%2098.5%2012.01%20100.8%2012.06%20103.1%2012.10%20105.4%2012.14%20107.7%2012.18%20110.0%2012.21%20112.3%2012.23%20114.6%2012.25%20116.9%2012.26%20119.2%2012.27%20121.5%2012.27%20123.8%2012.26%20126.1%2012.24%20128.4%2012.21%20130.7%2012.17%20133.0%2012.12%20135.3%2012.05%20137.6%2011.98%20139.9%2011.89%20142.2%2011.79%20144.5%2011.68%20146.8%2011.55%20149.1%2011.41%20151.3%2011.25%20153.6%2011.07%20155.9%2010.88%20158.1%2010.68%20160.4%2010.45%20162.6%2010.20%20164.8%209.94%20167.1%209.66%20169.3%209.35%20171.5%209.03%20173.7%208.68%20175.9%208.32%20178.0%207.93%20180.2%207.52%20182.4%207.08%20184.5%206.62%20186.6%206.13%20188.8%205.62%20190.9%205.08%20192.9%204.52%20195.0%203.92%20197.1%203.29%20196.9%202.71%20194.8%203.18%20192.7%203.64%20190.6%204.08%20188.5%204.49%20186.4%204.87%20184.2%205.24%20182.1%205.58%20179.9%205.90%20177.8%206.20%20175.6%206.48%20173.4%206.73%20171.2%206.97%20169.0%207.19%20166.8%207.39%20164.6%207.57%20162.4%207.73%20160.1%207.88%20157.9%208.01%20155.7%208.13%20153.4%208.23%20151.2%208.32%20148.9%208.39%20146.6%208.45%20144.4%208.50%20142.1%208.54%20139.8%208.57%20137.5%208.58%20135.3%208.59%20133.0%208.59%20130.7%208.57%20128.4%208.55%20126.1%208.53%20123.8%208.49%20121.5%208.45%20119.2%208.41%20116.9%208.36%20114.6%208.31%20112.3%208.25%20110.0%208.19%20107.7%208.12%20105.5%208.06%20103.2%207.99%20100.9%207.93%2098.6%207.86%2096.3%207.79%2094.0%207.73%2091.7%207.66%2089.5%207.60%2087.2%207.55%2084.9%207.49%2082.7%207.44%2080.4%207.40%2078.2%207.36%2075.9%207.33%2073.7%207.31%2071.5%207.30%2069.2%207.29%2067.0%207.29%2064.8%207.31%2062.6%207.33%2060.4%207.36%2058.3%207.41%2056.1%207.47%2053.9%207.54%2051.8%207.62%2049.6%207.72%2047.5%207.83%2045.4%207.96%2043.3%208.10%2041.2%208.26%2039.1%208.44%2037.1%208.63%2035.0%208.84%2033.0%209.07%2031.0%209.32%2029.0%209.59%2027.0%209.87%2025.0%2010.18%2023.1%2010.51%2021.1%2010.86%2019.2%2011.24%2017.3%2011.63%2015.5%2012.05%2013.6%2012.49%2011.8%2012.96%209.9%2013.46%208.2%2013.98%206.4%2014.52%204.6%2015.10%202.9%2015.71Z%27%2F%3E%3C%2Fsvg%3E");
  --ink-2: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M3.1%2011.39L4.5%2011.15%205.9%2010.92%207.3%2010.71%208.7%2010.52%2010.0%2010.34%2011.4%2010.18%2012.7%2010.03%2014.1%209.90%2015.4%209.79%2016.7%209.69%2018.0%209.61%2019.3%209.54%2020.6%209.48%2021.9%209.44%2023.2%209.41%2024.5%209.38%2025.9%209.37%2027.2%209.37%2028.5%209.38%2029.8%209.40%2031.1%209.43%2032.5%209.46%2033.8%209.50%2035.2%209.55%2036.5%209.61%2037.9%209.67%2039.3%209.74%2040.7%209.81%2042.2%209.90%2043.6%209.99%2045.1%2010.07%2046.9%2010.02%2049.1%209.42%2051.1%208.04%2052.5%206.71%2052.7%206.50%2053.1%206.87%2054.7%208.50%2056.7%2010.15%2058.9%2011.05%2060.8%2011.40%2062.6%2011.60%2064.3%2011.76%2066.1%2011.93%2067.9%2012.10%2069.8%2012.27%2071.7%2012.44%2073.6%2012.61%2075.5%2012.78%2077.5%2012.94%2079.5%2013.11%2081.6%2013.28%2083.7%2013.45%2085.8%2013.61%2088.0%2013.77%2090.2%2013.93%2092.4%2014.09%2094.7%2014.24%2097.1%2014.39%2099.5%2014.53%20101.9%2014.66%20104.4%2014.80%20106.9%2014.92%20109.5%2015.04%20112.2%2015.15%20114.8%2015.26%20117.6%2015.35%20120.4%2015.44%20123.2%2015.52%20126.1%2015.59%20129.0%2015.65%20132.1%2015.71%20135.1%2015.75%20138.2%2015.78%20141.4%2015.80%20144.7%2015.80%20148.0%2015.80%20151.4%2015.78%20154.8%2015.75%20158.3%2015.71%20161.8%2015.65%20165.5%2015.58%20169.2%2015.49%20172.9%2015.38%20176.8%2015.27%20180.7%2015.13%20184.7%2014.98%20188.7%2014.81%20192.8%2014.62%20197.0%2014.40%20197.0%2013.60%20192.8%2013.70%20188.7%2013.79%20184.6%2013.87%20180.6%2013.93%20176.7%2013.98%20172.9%2014.01%20169.2%2014.03%20165.5%2014.03%20161.8%2014.02%20158.3%2014.00%20154.8%2013.96%20151.4%2013.92%20148.0%2013.86%20144.7%2013.79%20141.5%2013.70%20138.3%2013.61%20135.2%2013.51%20132.1%2013.40%20129.1%2013.28%20126.2%2013.15%20123.3%2013.01%20120.5%2012.86%20117.7%2012.71%20115.0%2012.55%20112.3%2012.38%20109.7%2012.21%20107.1%2012.03%20104.6%2011.85%20102.1%2011.66%2099.7%2011.47%2097.3%2011.28%2095.0%2011.08%2092.7%2010.88%2090.5%2010.67%2088.3%2010.47%2086.1%2010.26%2084.0%2010.05%2081.9%209.84%2079.8%209.63%2077.8%209.43%2075.9%209.22%2073.9%209.01%2072.0%208.81%2070.1%208.60%2068.3%208.40%2066.5%208.21%2064.7%208.01%2063.0%207.82%2061.3%207.61%2059.9%207.33%2058.7%206.84%2057.5%205.78%2055.8%204.02%2053.0%202.59%2050.1%203.60%2048.4%205.08%2047.4%205.83%2046.5%206.06%2045.3%206.08%2043.9%206.00%2042.4%205.91%2041.0%205.82%2039.5%205.74%2038.1%205.68%2036.7%205.63%2035.3%205.60%2033.9%205.58%2032.5%205.58%2031.1%205.60%2029.8%205.64%2028.4%205.69%2027.1%205.76%2025.7%205.85%2024.4%205.96%2023.0%206.09%2021.7%206.24%2020.4%206.41%2019.0%206.60%2017.7%206.82%2016.4%207.05%2015.0%207.30%2013.7%207.58%2012.4%207.87%2011.0%208.19%209.7%208.53%208.3%208.90%207.0%209.28%205.6%209.70%204.3%2010.14%202.9%2010.61Z%27%2F%3E%3C%2Fsvg%3E");
  --ink-3: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M2.9%207.24L4.8%207.79%206.7%208.31%208.7%208.81%2010.6%209.30%2012.6%209.78%2014.5%2010.24%2016.5%2010.69%2018.5%2011.13%2020.6%2011.56%2022.6%2011.98%2024.7%2012.38%2026.7%2012.77%2028.8%2013.15%2030.9%2013.52%2033.0%2013.88%2035.1%2014.22%2037.2%2014.55%2039.4%2014.87%2041.5%2015.18%2043.7%2015.48%2045.9%2015.76%2048.1%2016.03%2050.3%2016.29%2052.5%2016.53%2054.7%2016.77%2056.9%2016.99%2059.1%2017.20%2061.3%2017.39%2063.6%2017.58%2065.8%2017.75%2068.1%2017.90%2070.3%2018.05%2072.6%2018.18%2074.9%2018.30%2077.2%2018.41%2079.4%2018.50%2081.7%2018.58%2084.0%2018.65%2086.3%2018.70%2088.6%2018.74%2090.9%2018.77%2093.2%2018.78%2095.5%2018.79%2097.8%2018.77%20100.1%2018.75%20102.3%2018.71%20104.6%2018.66%20106.9%2018.60%20109.2%2018.52%20111.5%2018.43%20113.8%2018.32%20116.1%2018.20%20118.4%2018.07%20120.7%2017.92%20123.0%2017.76%20125.2%2017.58%20127.5%2017.39%20129.8%2017.18%20132.0%2016.96%20134.3%2016.73%20136.5%2016.48%20138.8%2016.22%20141.0%2015.94%20143.2%2015.65%20145.4%2015.34%20147.7%2015.02%20149.9%2014.69%20152.1%2014.34%20154.2%2013.98%20156.4%2013.61%20158.6%2013.22%20160.7%2012.81%20162.9%2012.40%20165.0%2011.97%20167.1%2011.52%20169.2%2011.07%20171.3%2010.60%20173.4%2010.11%20175.4%209.62%20177.5%209.11%20179.5%208.58%20181.5%208.05%20183.5%207.50%20185.5%206.93%20187.5%206.36%20189.4%205.77%20191.4%205.16%20193.3%204.54%20195.2%203.91%20197.1%203.24%20196.9%202.76%20195.0%203.15%20193.0%203.55%20191.1%203.94%20189.1%204.32%20187.1%204.70%20185.1%205.07%20183.1%205.43%20181.0%205.78%20179.0%206.12%20176.9%206.45%20174.9%206.78%20172.8%207.09%20170.7%207.40%20168.6%207.70%20166.5%207.99%20164.4%208.27%20162.2%208.54%20160.1%208.80%20157.9%209.06%20155.8%209.30%20153.6%209.54%20151.4%209.78%20149.3%2010.00%20147.1%2010.21%20144.9%2010.42%20142.7%2010.62%20140.5%2010.81%20138.2%2011.00%20136.0%2011.17%20133.8%2011.34%20131.6%2011.51%20129.3%2011.66%20127.1%2011.81%20124.8%2011.95%20122.6%2012.08%20120.3%2012.21%20118.1%2012.32%20115.8%2012.43%20113.6%2012.54%20111.3%2012.64%20109.0%2012.72%20106.8%2012.81%20104.5%2012.88%20102.2%2012.94%2099.9%2013.00%2097.7%2013.05%2095.4%2013.09%2093.1%2013.12%2090.9%2013.14%2088.6%2013.16%2086.3%2013.16%2084.1%2013.16%2081.8%2013.15%2079.6%2013.13%2077.3%2013.11%2075.1%2013.07%2072.8%2013.03%2070.6%2012.98%2068.3%2012.92%2066.1%2012.85%2063.9%2012.77%2061.6%2012.68%2059.4%2012.59%2057.2%2012.49%2055.0%2012.37%2052.8%2012.25%2050.6%2012.13%2048.4%2011.99%2046.3%2011.84%2044.1%2011.69%2041.9%2011.52%2039.8%2011.35%2037.7%2011.17%2035.5%2010.98%2033.4%2010.78%2031.3%2010.57%2029.2%2010.35%2027.1%2010.13%2025.0%209.89%2023.0%209.65%2020.9%209.40%2018.9%209.13%2016.9%208.86%2014.8%208.58%2012.8%208.30%2010.9%208.00%208.9%207.70%206.9%207.38%205.0%207.07%203.1%206.76Z%27%2F%3E%3C%2Fsvg%3E");
  --ink-4: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20200%2020%27%20preserveAspectRatio%3D%27none%27%3E%3Cpath%20d%3D%27M3.1%208.32L5.2%208.11%207.4%207.90%209.6%207.71%2011.7%207.52%2013.9%207.35%2016.0%207.20%2018.2%207.06%2020.3%206.94%2022.5%206.85%2024.6%206.77%2026.8%206.71%2028.9%206.68%2031.1%206.66%2033.2%206.67%2035.3%206.70%2037.5%206.74%2039.6%206.81%2041.7%206.90%2043.9%207.01%2046.0%207.13%2048.1%207.28%2050.3%207.44%2052.4%207.61%2054.6%207.81%2056.7%208.03%2058.8%208.26%2061.0%208.51%2063.1%208.78%2065.3%209.06%2067.4%209.35%2069.6%209.65%2071.7%209.96%2073.9%2010.27%2076.0%2010.60%2078.2%2010.92%2080.3%2011.25%2082.5%2011.57%2084.7%2011.90%2086.8%2012.21%2089.0%2012.53%2091.1%2012.83%2093.3%2013.13%2095.5%2013.42%2097.6%2013.69%2099.8%2013.95%20102.0%2014.19%20104.1%2014.42%20106.3%2014.63%20108.5%2014.82%20110.7%2014.99%20112.8%2015.14%20115.0%2015.27%20117.2%2015.37%20119.3%2015.46%20121.5%2015.51%20123.8%2015.47%20126.3%2014.99%20128.8%2013.70%20130.6%2012.60%20131.8%2012.67%20133.8%2013.85%20136.4%2014.88%20138.8%2015.11%20141.0%2015.02%20143.2%2014.86%20145.4%2014.67%20147.5%2014.47%20149.7%2014.25%20151.8%2014.02%20154.0%2013.77%20156.2%2013.51%20158.3%2013.24%20160.5%2012.95%20162.6%2012.66%20164.8%2012.36%20166.9%2012.06%20169.1%2011.74%20171.2%2011.43%20173.4%2011.12%20175.5%2010.80%20177.7%2010.49%20179.8%2010.18%20182.0%209.88%20184.1%209.58%20186.3%209.29%20188.4%209.00%20190.6%208.73%20192.7%208.46%20194.9%208.21%20197.0%207.96%20197.0%207.27%20194.8%207.42%20192.6%207.59%20190.5%207.77%20188.3%207.97%20186.2%208.18%20184.0%208.39%20181.8%208.62%20179.7%208.86%20177.5%209.10%20175.3%209.34%20173.2%209.59%20171.0%209.84%20168.9%2010.08%20166.7%2010.33%20164.6%2010.57%20162.4%2010.81%20160.2%2011.04%20158.1%2011.26%20155.9%2011.47%20153.8%2011.67%20151.6%2011.86%20149.5%2012.04%20147.3%2012.20%20145.2%2012.34%20143.0%2012.47%20140.9%2012.58%20138.8%2012.61%20136.9%2012.40%20135.2%2011.61%20132.9%2010.25%20129.7%2010.04%20127.3%2011.40%20125.4%2012.35%20123.6%2012.64%20121.6%2012.63%20119.5%2012.54%20117.3%2012.42%20115.2%2012.27%20113.0%2012.11%20110.9%2011.92%20108.8%2011.72%20106.6%2011.50%20104.5%2011.25%20102.3%2011.00%20100.2%2010.73%2098.1%2010.44%2095.9%2010.14%2093.8%209.83%2091.6%209.51%2089.5%209.18%2087.3%208.84%2085.2%208.50%2083.0%208.16%2080.9%207.82%2078.7%207.47%2076.6%207.13%2074.4%206.79%2072.2%206.46%2070.1%206.14%2067.9%205.82%2065.8%205.52%2063.6%205.23%2061.4%204.95%2059.2%204.69%2057.1%204.45%2054.9%204.23%2052.7%204.03%2050.6%203.85%2048.4%203.70%2046.2%203.58%2044.0%203.49%2041.9%203.43%2039.7%203.40%2037.5%203.41%2035.3%203.45%2033.2%203.52%2031.0%203.62%2028.8%203.76%2026.6%203.93%2024.5%204.13%2022.3%204.36%2020.1%204.61%2018.0%204.90%2015.8%205.22%2013.7%205.56%2011.5%205.92%209.4%206.31%207.2%206.73%205.1%207.16%202.9%207.63Z%27%2F%3E%3C%2Fsvg%3E");
}
.nav a::after, .btn::after, .filter::after, .tool-btn::after, .chip::after, .p .count::after {
  content: ""; position: absolute; left: 6px; right: 6px; bottom: 0; height: 14px; pointer-events: none; background: var(--wax);
  -webkit-mask: var(--ink-1) 0 0 / 100% 100% no-repeat; mask: var(--ink-1) 0 0 / 100% 100% no-repeat;
  clip-path: inset(0 0 0 100%); transition: clip-path .4s cubic-bezier(.55,0,.25,1);
}
[data-ink="2"]::after { -webkit-mask-image: var(--ink-2); mask-image: var(--ink-2); }
[data-ink="3"]::after { -webkit-mask-image: var(--ink-3); mask-image: var(--ink-3); }
[data-ink="4"]::after { -webkit-mask-image: var(--ink-4); mask-image: var(--ink-4); }
.btn::after { left: -2px; right: -2px; }
.tool-btn::after { left: 7px; right: 7px; bottom: 1px; height: 10px; }
.nav a:not([aria-current="page"]):hover::after, .nav a:not([aria-current="page"]):focus-visible::after,
.btn.ghost:hover::after, .btn.ghost:focus-visible::after,
.filter:not([aria-pressed="true"]):hover::after, .filter:not([aria-pressed="true"]):focus-visible::after,
.tool-btn:hover::after, .tool-btn:focus-visible::after { clip-path: inset(0); animation: ink-draw .4s cubic-bezier(.55,0,.25,1); }
@keyframes ink-draw { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
.nav a[aria-current="page"]::after, .filter[aria-pressed="true"]::after, .btn:not(.ghost)::after {
  clip-path: inset(0); background: var(--ink); animation: none;
}
.btn:not(.ghost)::after { -webkit-mask-image: var(--ink-3); mask-image: var(--ink-3); }
.chip::after, .p .count::after { left: 0; right: 0; bottom: -4px; height: 8px; clip-path: inset(0); transition: none; background: var(--ink-faint); }
.chip.wax::after, .p .count::after { background: var(--wax-line); }
.chip:nth-child(even)::after { -webkit-mask-image: var(--ink-3); mask-image: var(--ink-3); }
.p .count::after { bottom: -3px; height: 6px; }
.chip.ocr::after { /* OCR text: the stroke is broken, as the dashed border was */
  -webkit-mask: var(--ink-1) 0 0 / 100% 100% no-repeat, repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
  mask: var(--ink-1) 0 0 / 100% 100% no-repeat, repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 8px);
  -webkit-mask-composite: source-in; mask-composite: intersect;
}
@media (prefers-reduced-motion: reduce) {
  .nav a::after, .btn::after, .filter::after, .tool-btn::after { transition: none; animation: none !important; }
}

/* ---------- Toast / errors ---------- */
.toast { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translate(-50%, 20px); opacity: 0; z-index: 60;
  background: var(--ink); color: var(--paper); font-family: var(--ui); font-size: var(--step--1); padding: 10px 16px; border-radius: var(--radius); transition: .3s var(--ease); pointer-events: none; max-width: calc(100vw - 32px); }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.error-box { max-width: 60ch; padding: 16px 18px; border: 1px solid var(--wax-line); background: var(--wax-soft); border-radius: var(--radius); font-family: var(--ui); font-size: var(--step--1); }

/* ---------- Phone: gloss becomes a sheet ---------- */
@media (max-width: 1080px) {
  .doc-layout, .doc-layout.has-gloss { grid-template-columns: minmax(0, 1fr); }
  .toc { display: none; }
  .gloss {
    position: fixed; z-index: 40; left: 0; right: 0; bottom: 0; top: auto; height: auto;
    max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); /* leaves a band of scrim to tap closed */
    border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px); animation: sheet-in .35s var(--ease);
  }
  .gloss.sized { height: var(--sheet-h); max-height: calc(100vh - var(--header-h) - 24px); max-height: calc(100dvh - var(--header-h) - 24px); }
  .gloss-inner { padding: 0 18px 28px; }
  /* the header stays pinned to the top of the sheet while its body scrolls */
  .gloss-head { position: sticky; top: 0; z-index: 3; margin: 0 -18px; padding: 0 18px 10px; background: var(--paper-lift); border-bottom: 1px solid var(--rule); }
  .gloss-head + h2, .gloss-head + .person-card { margin-top: 14px; }
  .gloss .clause-quote { left: 12px; right: 12px; }
  .gloss-top.has-quote > .label { display: none; }
  .grab { display: block; width: 100%; height: 26px; margin: 0; padding: 0; border: 0; background: transparent; cursor: ns-resize; touch-action: none; }
  .grab::before { content: ""; display: block; width: 44px; height: 4px; border-radius: 4px; background: var(--rule); margin: 10px auto 0; }
  .grab:focus-visible::before { background: var(--ink-soft); }
  .scrim { position: fixed; inset: 0; background: var(--scrim); z-index: 35; animation: fade-in .25s ease; }
  body.sheet-open { overflow: hidden; }
}
@media (min-width: 1081px) { .scrim { display: none; } .gloss { animation: gloss-in .35s var(--ease); } }
/* Entrance motion moves elements only; nothing starts invisible, so a paused or skipped animation still shows the content. */
@keyframes sheet-in { from { transform: translateY(28px); } to { transform: none; } }
@keyframes gloss-in { from { transform: translateX(12px); } to { transform: none; } }
@keyframes fade-in { from { opacity: 0.4; } to { opacity: 1; } }
/* No transform on .view: a transformed ancestor would become the containing block of the fixed phone sheet. */
.view.enter > * { animation: view-in .4s var(--ease); }
.view.enter > .doc-layout { animation: none; }
@keyframes view-in { from { transform: translateY(6px); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}
@media print {
  .masthead, .gloss, .toc, .foot, .tools, .scrim { display: none !important; }
  body::before { display: none; }
}