/* uncage-rrj.org — design system.
   Palette is locked: paper, ink, lamp, lamp-deep, clay, living, rule-light, rule-dark.
   No other colors exist in this file. */

/* Display / headers: Montserrat Black. Body: Assistant Regular.
   Both self-hosted latin-subset variable woff2 — no external font requests. */
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Montserrat';
  src: url('fonts/Montserrat-italic-var.woff2') format('woff2-variations');
  font-weight: 100 900; font-style: italic; font-display: swap;
}
@font-face {
  font-family: 'Assistant';
  src: url('fonts/Assistant-var.woff2') format('woff2-variations');
  font-weight: 200 800; font-style: normal; font-display: swap;
}

:root {
  --paper: #F4F1EA;
  --ink: #101010;
  --lamp: #FFE26A;
  --lamp-deep: #7A5C00;
  --clay: #7A2E24;
  --living: #3F5D46;
  /* the charges lightened for ink ground, where the paper-ground values go muddy */
  --clay-on-ink: #C4645A;
  --living-on-ink: #7FA88C;
  --rule-light: #CFC9BB;
  --rule-dark: #2A2A2A;

  /* header copy: Montserrat Black (900). body copy: Assistant Regular (400). */
  --display: 'Montserrat', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;
  --data: 'Assistant', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;
  /* Assistant has no tnum feature and proportional digits, so every figure that has
     to line up in a column is set in Montserrat, which does carry real tabular numerals. */
  --ledger: 'Montserrat', ui-sans-serif, system-ui, 'Helvetica Neue', Arial, sans-serif;

  --ground: var(--paper);
  --figure: var(--ink);
  --rule: var(--rule-light);
  --harm: var(--clay);
  --repair: var(--living);

  --measure: 34rem;
  --gut: clamp(1.25rem, 4vw, 3.5rem);
  --band: clamp(3rem, 7vw, 6rem);
  --wide: 76rem;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--data);
  /* floor is 18px: the long-read comfort figure the design brief sets, and Assistant
     runs a touch smaller on the body than the face it replaced */
  font-size: clamp(1.125rem, 0.45vw + 1.02rem, 1.25rem);
  line-height: 1.62;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { max-width: 100%; }
a { color: inherit; }
/* Montserrat Black throughout the heading scale. Geometric black sets tighter than
   the serif it replaced, so tracking is pulled in at display sizes. */
h1, h2, h3, h4 { font-family: var(--display); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 0.5em; text-wrap: balance; }
h1 { font-size: clamp(2.15rem, 5.6vw, 4.05rem); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); letter-spacing: -0.03em; }
h3 { font-size: clamp(1.22rem, 1.9vw, 1.48rem); letter-spacing: -0.02em; }
h4 { font-size: 1.0625rem; letter-spacing: -0.01em; }
p, li { max-width: var(--measure); }
p { margin: 0 0 1.15em; }
hr { border: 0; border-top: 1px solid var(--rule); margin: var(--band) 0; }

/* ---------- ground: the descent ---------- */
.ink {
  --ground: var(--ink);
  --figure: var(--paper);
  --rule: var(--rule-dark);
  --harm: var(--clay-on-ink);
  --repair: var(--living-on-ink);
  background: var(--ink);
  color: var(--paper);
}
.ink a { color: var(--lamp); }
section { padding: var(--band) 0; }
.wrap { max-width: var(--wide); margin: 0 auto; padding: 0 var(--gut); }
.narrow { max-width: 46rem; margin: 0 auto; padding: 0 var(--gut); }

/* ---------- links ---------- */
a.u {
  color: var(--ink); text-decoration: none;
  border-bottom: 3px solid var(--lamp);
  padding-bottom: 1px;
}
a.u:hover, a.u:focus-visible { background: var(--lamp); color: var(--ink); }
.ink a.u { color: var(--lamp); border-bottom-color: var(--lamp); }
.ink a.u:hover, .ink a.u:focus-visible { background: var(--lamp); color: var(--ink); }
:focus-visible { outline: 3px solid var(--lamp-deep); outline-offset: 3px; }
.ink :focus-visible { outline-color: var(--lamp); }

.btn {
  display: inline-block; background: var(--lamp); color: var(--ink);
  font-family: var(--data); font-weight: 600; font-size: 1rem;
  letter-spacing: 0.02em; text-decoration: none;
  padding: 0.85em 1.5em; border: 2px solid var(--ink);
}
.btn:hover, .btn:focus-visible { background: var(--ink); color: var(--lamp); }
.ink .btn { border-color: var(--lamp); }
.ink a.btn { color: var(--ink); }
.ink .btn:hover, .ink .btn:focus-visible { background: var(--ink); color: var(--lamp); border-color: var(--lamp); }
.btn-plain { background: transparent; color: var(--figure); border: 2px solid var(--figure); }
.btn-plain:hover, .btn-plain:focus-visible { background: var(--figure); color: var(--ground); }

/* ---------- labels, type utilities ---------- */
.kicker {
  font-family: var(--data); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--figure);
  margin: 0 0 1.4rem; display: block; max-width: none;
}
.kicker.harm { color: var(--harm); }
.kicker.repair { color: var(--repair); }
.lede { font-size: clamp(1.15rem, 0.5vw + 1.05rem, 1.4rem); max-width: 38rem; }
.swipe { background: var(--lamp); color: var(--ink); padding: 0 0.14em; box-decoration-break: clone; }
.block-lamp { background: var(--lamp); color: var(--ink); padding: 1.4rem 1.6rem; }
.deep { color: var(--lamp-deep); }
.num { font-family: var(--ledger); font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: -0.01em; }
.small { font-size: 0.9rem; }
.tiny { font-size: 0.82rem; line-height: 1.5; }

/* provenance — every figure names its document */
.prov {
  font-size: 0.82rem; line-height: 1.55; color: var(--figure);
  border-top: 1px solid var(--rule); padding-top: 0.7rem; margin-top: 0.9rem;
  max-width: 34rem; opacity: 0.85;
}
.prov strong { font-weight: 600; }
.unaudited {
  font-family: var(--data); font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase;
  border: 1px solid var(--figure); padding: 0.15em 0.5em; display: inline-block;
  white-space: nowrap;
}

/* ---------- staging marker (emitted only when SITE_ENV=staging) ---------- */
.staging-note {
  background: var(--lamp); color: var(--ink);   /* lamp fill with ink type: allowed on paper */
  font-family: var(--data); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.06em;
  text-transform: uppercase; text-align: center; padding: 0.45rem var(--gut);
}
.staging-note a { color: var(--ink); }

/* ---------- header ---------- */
.site-head {
  border-bottom: 1px solid var(--rule-light);
  background: var(--paper);
  position: relative; z-index: 5;
}
.site-head .wrap {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: 1.05rem; padding-bottom: 1.05rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--ink); }
.brand svg { display: block; }
.brand b { font-family: var(--display); font-weight: 900; font-size: 1.02rem; letter-spacing: -0.01em; line-height: 1.1; }
.brand span { display: block; font-family: var(--data); font-weight: 400; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; }
/* ---------- mega menu ----------
   Every top-level item is a real link to its hub, so the menu is usable with no
   JavaScript, no hover, and no pointer. The panel opens on hover and on keyboard
   focus (focus-within) at desktop widths; the small chevron button is for touch,
   and JS keeps its aria-expanded honest. On narrow screens the whole thing folds
   behind one "Menu" button and the panels sit inline, always expanded. */
.menu-toggle {
  display: none; align-items: center; gap: 0.55rem;
  font-family: var(--data); font-weight: 600; font-size: 0.95rem; color: var(--ink);
  background: transparent; border: 2px solid var(--ink); padding: 0.45em 0.9em; cursor: pointer;
}
.menu-toggle-bars { display: inline-flex; flex-direction: column; gap: 3px; }
.menu-toggle-bars i { display: block; width: 16px; height: 2px; background: currentColor; }
nav.main ul { list-style: none; margin: 0; padding: 0; }
nav.main > ul { display: flex; gap: clamp(0.6rem, 1.6vw, 1.5rem); flex-wrap: wrap; align-items: center; }
nav.main li.has-panel { position: relative; display: flex; align-items: center; gap: 0.15rem; }
nav.main li.has-panel > a {
  font-family: var(--data); font-weight: 600; font-size: 0.95rem;
  text-decoration: none; color: var(--ink); padding: 0.55rem 0 calc(0.55rem - 3px);
  border-bottom: 3px solid transparent;
}
nav.main li.has-panel > a:hover, nav.main li.has-panel > a:focus-visible { border-bottom-color: var(--lamp); }
nav.main li.has-panel > a[aria-current="page"] { border-bottom-color: var(--ink); }
.disc {
  background: transparent; border: 0; color: var(--ink); padding: 0.4rem 0.25rem; cursor: pointer;
  display: inline-flex; align-items: center; opacity: 0.7;
}
.disc svg { transition: transform 0.2s ease; }
.disc[aria-expanded="true"] svg { transform: rotate(180deg); }
.panel {
  display: none; position: absolute; left: 0; top: 100%; z-index: 20;
  min-width: 22rem; max-width: min(34rem, 92vw);
  background: var(--paper); color: var(--ink);
  border-top: 3px solid var(--ink); box-shadow: 0 18px 40px rgba(16,16,16,0.14);
  padding: 1.1rem 1.25rem 1.2rem;
}
nav.main li.has-panel:last-child .panel { left: auto; right: 0; }
.panel-claim { font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.9rem; max-width: 30rem; color: var(--ink); }
.panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0.15rem 1.2rem; }
.panel li { max-width: none; }
.panel a { display: block; text-decoration: none; color: var(--ink); padding: 0.45rem 0.3rem; border-bottom: 1px solid var(--rule-light); }
.panel a b { display: block; font-family: var(--data); font-weight: 600; font-size: 0.92rem; }
.panel a span { display: block; font-size: 0.8rem; line-height: 1.4; opacity: 0.8; }
.panel a:hover, .panel a:focus-visible { background: var(--lamp); border-bottom-color: var(--ink); }
@media (hover: hover) and (min-width: 901px) {
  nav.main li.has-panel:hover .panel { display: block; }
}
@media (min-width: 901px) {
  nav.main li.has-panel:focus-within .panel, nav.main li.has-panel.open .panel { display: block; }
}
@media (max-width: 900px) {
  .menu-toggle { display: inline-flex; }
  nav.main { display: none; flex-basis: 100%; }
  .site-head.menu-open nav.main { display: block; }
  nav.main > ul { flex-direction: column; align-items: stretch; gap: 0; border-top: 1px solid var(--rule-light); margin-top: 0.8rem; padding-top: 0.4rem; }
  nav.main li.has-panel { flex-direction: column; align-items: stretch; gap: 0; border-bottom: 1px solid var(--rule-light); }
  nav.main li.has-panel > a { font-size: 1.05rem; padding: 0.7rem 0; border-bottom: 0; }
  .disc { display: none; }
  .panel { display: block; position: static; min-width: 0; max-width: none; box-shadow: none; border-top: 0; padding: 0 0 0.8rem; }
  .panel-claim { display: none; }
  .panel ul { grid-template-columns: 1fr; }
}

/* ---------- hero / verse ---------- */
.verse {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.34;
  max-width: 30rem; text-align: left;
}
.verse span { display: block; }
.pullquote {
  font-family: var(--display); font-weight: 700; font-style: italic;
  font-size: clamp(1.4rem, 2.6vw, 2rem); line-height: 1.3;
  max-width: 32rem; margin: 0; padding-left: 1.25rem;
  border-left: 4px solid var(--lamp-deep);
}
.pullquote p { max-width: none; margin: 0 0 0.6em; }
blockquote:not(.pullquote) {
  margin: 1.3rem 0; padding: 0.15rem 0 0.15rem 1.15rem;
  border-left: 3px solid var(--lamp-deep);
  max-width: 34rem; line-height: 1.55;
}
blockquote:not(.pullquote) p { max-width: none; margin: 0 0 0.6em; }
.ink blockquote:not(.pullquote) { border-left-color: var(--lamp); }
.pullquote cite {
  display: block; font-family: var(--data); font-style: normal;
  font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em;
  text-transform: uppercase; margin-top: 1.1rem; opacity: 0.75;
}

/* ---------- counters ---------- */
.counters { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule-dark); border: 1px solid var(--rule-dark); }
.counters > div { background: var(--ink); padding: 1.6rem 1.4rem 1.4rem; }
.counters .big { font-family: var(--ledger); font-variant-numeric: tabular-nums; font-weight: 800; font-size: clamp(1.85rem, 3.4vw, 2.75rem); color: var(--lamp); letter-spacing: -0.035em; line-height: 1; display: block; }
.counters .cap { display: block; font-size: 0.9rem; margin-top: 0.6rem; max-width: 15rem; }
.counters .src { display: block; font-size: 0.74rem; margin-top: 0.9rem; opacity: 0.8; line-height: 1.45; }
@media (max-width: 860px) { .counters { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .counters { grid-template-columns: 1fr; } }

/* ---------- grids & cards ---------- */
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 3rem); }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 800px) { .grid2, .grid3 { grid-template-columns: 1fr; } }
.card { border-top: 2px solid var(--figure); padding-top: 1.1rem; }
.card h3 { margin-bottom: 0.45rem; }
.card p { max-width: 30rem; }
.card .figure { font-family: var(--ledger); font-variant-numeric: tabular-nums; font-weight: 800; font-size: 1.85rem; letter-spacing: -0.03em; display: block; margin: 0.2rem 0 0.5rem; }

/* the door: three equal doors on paper */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule-light); border: 1px solid var(--rule-light); }
.doors a { background: var(--paper); padding: 1.8rem 1.5rem 1.6rem; text-decoration: none; display: block; }
.doors a:hover, .doors a:focus-visible { background: var(--lamp); }
.doors h3 { margin-bottom: 0.4rem; }
.doors p { font-size: 0.95rem; margin: 0; }
@media (max-width: 800px) { .doors { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; margin: 1.6rem 0 0.4rem; }
table { border-collapse: collapse; width: 100%; font-size: 0.95rem; min-width: 34rem; }
caption { text-align: left; font-family: var(--data); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding-bottom: 0.8rem; }
th, td { text-align: right; padding: 0.62rem 0.7rem; border-bottom: 1px solid var(--rule); font-variant-numeric: tabular-nums; }
/* the data columns carry real tabular numerals; the label column stays in body type */
th:not(:first-child), td:not(:first-child) { font-family: var(--ledger); font-variant-numeric: tabular-nums; }
th:first-child, td:first-child { text-align: left; padding-left: 0; }
thead th { border-bottom: 2px solid var(--figure); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
tfoot td, tfoot th { border-top: 2px solid var(--figure); border-bottom: 0; font-weight: 600; }
tbody tr:hover { background: rgba(16,16,16,0.035); }
.ink tbody tr:hover { background: rgba(244,241,234,0.06); }
.dl {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: var(--data); font-size: 0.82rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none;
  color: var(--figure); border-bottom: 3px solid var(--lamp); padding-bottom: 2px;
}
.dl:hover, .dl:focus-visible { background: var(--lamp); color: var(--ink); }

/* ---------- charts (bars in the cage motif) ---------- */
figure.chart { margin: 1.8rem 0 0; }
figure.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
figure.chart figcaption { font-size: 0.85rem; margin-top: 1rem; max-width: 34rem; opacity: 0.9; }
.bar { fill: var(--figure); }
.ink .bar { fill: var(--paper); }
.bar-hi { fill: var(--lamp); }
.ink .bar-hi { fill: var(--lamp); }
.axis { stroke: var(--rule); stroke-width: 1; }
.axis-strong { stroke: var(--figure); stroke-width: 2; }
.tick { font-family: var(--ledger); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; fill: var(--figure); }
.ink .tick { fill: var(--paper); }
.tick.dim { opacity: 0.65; }

/* ---------- what is owed ---------- */
.owed { border: 2px solid var(--ink); padding: clamp(1.4rem, 3vw, 2.2rem); max-width: 46rem; }
.owed h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); }
.owed dl { margin: 0; }
.owed dt { font-family: var(--data); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; margin-top: 1.2rem; }
.owed dd { margin: 0.35rem 0 0; max-width: 34rem; }

/* ---------- foia docket ---------- */
.status { font-family: var(--data); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.clock {
  font-family: var(--ledger); font-weight: 700; font-variant-numeric: tabular-nums;
  background: var(--lamp); color: var(--ink); padding: 0.1em 0.45em; white-space: nowrap;
}
.ink .clock { background: var(--lamp); color: var(--ink); }
.docket-entry { border-top: 2px solid var(--rule); padding: 1.8rem 0; }
.docket-entry:last-child { border-bottom: 2px solid var(--rule); }
.docket-head { display: flex; flex-wrap: wrap; gap: 0.8rem 1.4rem; align-items: baseline; justify-content: space-between; }
.docket-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.9rem 1.4rem; margin: 1.2rem 0; }
.docket-meta div { font-size: 0.85rem; }
.docket-meta dt, .docket-meta .k { display: block; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.2rem; }
details { border-top: 1px solid var(--rule); padding-top: 0.9rem; }
summary { cursor: pointer; font-family: var(--data); font-weight: 600; font-size: 0.9rem; }
details[open] summary { margin-bottom: 0.9rem; }
.reqtext { font-size: 0.95rem; }
.reqtext ol { padding-left: 1.2rem; }

/* ---------- forms ---------- */
form.intake { max-width: 40rem; }
label { display: block; font-family: var(--data); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.04em; margin: 1.3rem 0 0.4rem; }
input[type=text], input[type=email], select, textarea {
  width: 100%; font-family: var(--data); font-size: 1rem; color: var(--ink);
  background: var(--paper); border: 2px solid var(--ink); padding: 0.7rem 0.8rem;
  border-radius: 0;
}
textarea { min-height: 8rem; resize: vertical; }
fieldset { border: 1px solid var(--rule); padding: 1.2rem 1.3rem; margin: 1.6rem 0 0; }
legend { font-family: var(--data); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; padding: 0 0.4rem; }
.tier { display: flex; gap: 0.7rem; align-items: flex-start; margin: 0.9rem 0; }
.tier input { margin-top: 0.45rem; }
.tier label { margin: 0; font-weight: 400; font-size: 0.95rem; letter-spacing: 0; }
.tier label b { display: block; font-size: 0.85rem; letter-spacing: 0.04em; text-transform: uppercase; }
.formnote { font-size: 0.85rem; opacity: 0.85; max-width: 34rem; }
button[type=submit] { cursor: pointer; margin-top: 1.6rem; font-family: var(--data); }
.formstatus { margin-top: 1.2rem; font-weight: 600; max-width: 36rem; }

/* ---------- blog ---------- */
.postlist { list-style: none; padding: 0; margin: 0; }
.postlist li { border-top: 2px solid var(--rule); padding: 1.6rem 0; max-width: none; }
.postlist h3 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-bottom: 0.3rem; }
.postlist a { text-decoration: none; }
.postlist a:hover h3, .postlist a:focus-visible h3 { text-decoration: underline; text-decoration-color: var(--lamp); text-decoration-thickness: 4px; text-underline-offset: 4px; }
.meta { font-family: var(--data); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.7; }
article.post { max-width: 42rem; margin: 0 auto; }
article.post h2 { margin-top: 2.4rem; }
article.post .verse { margin: 2rem 0; }
.pin {
  display: block; border-left: 4px solid var(--lamp); background: rgba(16,16,16,0.04);
  padding: 0.9rem 1.1rem; font-size: 0.9rem; margin: 1.6rem 0; max-width: none;
}
.pin b { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; display: block; margin-bottom: 0.25rem; }

/* ---------- footer ---------- */
.site-foot { border-top: 2px solid var(--ink); margin-top: var(--band); padding: var(--band) 0 3rem; }
.site-foot .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2rem; }
@media (max-width: 800px) { .site-foot .cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 460px) { .site-foot .cols { grid-template-columns: 1fr; } }
/* footer column headings are h2 (they are the top sections of the footer landmark,
   and stepping straight from an h2 in main to an h4 here broke the outline on every
   page). They keep the small uppercase label look. */
.site-foot h2 { font-family: var(--data); font-weight: 600; font-size: 0.74rem; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; margin-bottom: 0.8rem; }
.site-foot ul { list-style: none; margin: 0; padding: 0; }
.site-foot li { margin-bottom: 0.5rem; font-size: 0.92rem; max-width: none; }
.site-foot a { text-decoration: none; border-bottom: 1px solid var(--rule-light); }
.site-foot a:hover, .site-foot a:focus-visible { border-bottom: 3px solid var(--lamp); }
.site-foot .fine { margin-top: 2.6rem; font-size: 0.82rem; max-width: 46rem; opacity: 0.8; }

/* ---------- cage motif (one per page, home only animates) ---------- */
.cage { display: block; width: 100%; height: auto; }
.cage rect { fill: var(--figure); }
.cage .lit { fill: var(--lamp); }

/* ---------- reveal ---------- */
.rise { opacity: 0; transform: translateY(14px); transition: opacity 0.7s ease, transform 0.7s ease; }
.rise.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rise { opacity: 1 !important; transform: none !important; transition: none !important; }
  * { animation: none !important; transition: none !important; }
}

/* ---------- privacy & source-protection policy (/privacy/) ----------
   The policy body is migrated markup from the previous site, kept verbatim in
   site/data/privacy_body.html. These rules dress its classes in the site's tokens. */
.policy-dates { font-family: var(--data); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.75; margin: 1.2rem 0 0; }
.policy-body { max-width: 46rem; margin-top: var(--band); }
.policy-body section { padding: 0; margin: 0 0 3rem; }
.policy-body h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); margin-top: 2.6rem; scroll-margin-top: 1.5rem; }
.policy-body h3 { font-size: 1.15rem; margin-top: 1.8rem; }
.policy-body h4 { font-size: 1rem; margin-top: 1.4rem; }
.policy-body p, .policy-body li { max-width: 40rem; }
.policy-body ul, .policy-body ol { padding-left: 1.3rem; }
.policy-body li { margin-bottom: 0.45rem; }
/* section numbers set in the ledger face so they align down the margin */
.pnum { font-family: var(--ledger); font-variant-numeric: tabular-nums; font-weight: 800; margin-right: 0.35em; }
/* the policy's contents list is a plain numbered list, not the sticky thread column */
.policy-body nav.toc { position: static; border-top: 2px solid var(--ink); padding-top: 1rem; margin: 0 0 2.5rem; }
.policy-body nav.toc h2 { font-family: var(--data); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; margin: 0 0 0.8rem; }
.policy-body nav.toc ol { max-height: none; overflow: visible; columns: 2; column-gap: 2rem; padding-left: 1.4rem; }
.policy-body nav.toc li { border: 0; break-inside: avoid; margin-bottom: 0.3rem; }
.policy-body nav.toc a { display: inline; padding: 0; font-size: 0.92rem; border-bottom: 1px solid var(--rule-light); text-decoration: none; }
.policy-body nav.toc a:hover, .policy-body nav.toc a:focus-visible { background: transparent; border-bottom: 3px solid var(--lamp); }
@media (max-width: 640px) { .policy-body nav.toc ol { columns: 1; } }
.tldr { border: 2px solid var(--ink); padding: clamp(1.2rem, 3vw, 1.8rem); margin: 0 0 2.5rem; }
.tldr h2 { margin-top: 0; }
.callout { border-left: 4px solid var(--lamp-deep); padding: 0.2rem 0 0.2rem 1.15rem; margin: 1.4rem 0; }
.callout.warn { border-left-color: var(--clay); }
.callout.good { border-left-color: var(--living); }
.callout > :first-child { margin-top: 0; }
.callout > :last-child { margin-bottom: 0; }
.contact-card { border: 1px solid var(--rule-light); padding: 1rem 1.2rem; margin: 1rem 0; max-width: 40rem; }
.contact-card > :first-child { margin-top: 0; }
.contact-card > :last-child { margin-bottom: 0; }
.table-scroll { overflow-x: auto; margin: 1.4rem 0; }
.table-scroll table { min-width: 28rem; }
.policy-body table th, .policy-body table td { text-align: left; vertical-align: top; font-family: var(--data); }
.policy-body table th:first-child, .policy-body table td:first-child { padding-left: 0; }
.no { color: var(--clay); font-weight: 600; }

/* ---------- reveal: every block fades up once as it enters the viewport ----------
   JS tags candidates with .rv and adds .in when they intersect; with JS off
   nothing is ever hidden, and with reduced motion nothing moves. --d staggers
   siblings by a few tens of milliseconds so a row of cards arrives as a row. */
.rv { opacity: 0; transform: translateY(14px);
      transition: opacity 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s),
                  transform 0.75s cubic-bezier(0.2, 0.7, 0.2, 1) var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---------- the opening shot: a short, silent, self-hosted film -------------------
   Full-bleed, no text over it (paper and ink stay paper and ink), a caption line
   below on paper carrying the provenance, and a pause control because a loop that
   cannot be stopped is a WCAG failure. Autoplay is added by JS only when the visitor
   has not asked for reduced motion; otherwise the poster stands still. */
.hero-film { padding: 0; background: var(--ink); }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 66vh; object-fit: cover; background: var(--ink); }
.film-bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
            padding: 0.7rem var(--gut); background: var(--paper); color: var(--ink); border-bottom: 1px solid var(--rule-light); }
.film-cap { font-size: 0.82rem; line-height: 1.45; max-width: 46rem; margin: 0; }
.film-toggle { font-family: var(--data); font-weight: 600; font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase;
               background: transparent; color: var(--ink); border: 2px solid var(--ink); padding: 0.4em 0.9em; cursor: pointer; white-space: nowrap; }
.film-toggle:hover, .film-toggle:focus-visible { background: var(--lamp); }

/* ---------- photographs and clips in the record ---------- */
figure.photo { margin: 2.2rem 0 0; max-width: 46rem; }
figure.photo img, figure.photo video { display: block; width: 100%; height: auto; background: var(--ink); }
figure.photo video { aspect-ratio: 16 / 9; object-fit: cover; }
figure.photo figcaption { font-size: 0.82rem; line-height: 1.5; margin-top: 0.7rem; color: var(--figure); opacity: 0.85; max-width: 40rem; }
figure.photo.wide { max-width: none; }
.ink figure.photo img, .ink figure.photo video { outline: 1px solid var(--rule-dark); }

/* ---------- print ---------- */
@media print {
  body { background: white; color: black; font-size: 11pt; }
  .site-head nav, .btn, .dl { display: none; }
  .ink { background: white !important; color: black !important; }
  .ink .counters > div { background: white !important; }
  .counters .big { color: black !important; }
  a { color: black; }
}

/* ---------- narrow screens: tables scroll, badges wrap ---------- */
.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; margin: 1.6rem 0; }
.tablewrap table { margin: 0; }
@media (max-width: 820px) {
  /* no-JS fallback: an unwrapped table still scrolls instead of pushing the page sideways */
  table { display: block; overflow-x: auto; max-width: 100%; }
  .tablewrap table { display: table; }
  table caption { white-space: normal; }
  .status { white-space: normal; }
  .clock { white-space: normal; }
  .unaudited { white-space: normal; display: inline-block; max-width: 100%; }
}

/* ---------- migrated research threads (musings) ---------- */
.crumb { font-family: var(--data); font-size: 0.84rem; font-weight: 600; margin: 0 0 1.1rem; }
.threadgrid { display: grid; grid-template-columns: minmax(0,1fr) 17rem; gap: clamp(2rem,4vw,4rem); margin-top: 2.6rem; align-items: start; }
.threadmain { min-width: 0; }
@media (max-width: 980px) { .threadgrid { grid-template-columns: 1fr; } .prompts { order: -1; } }

.prompts { position: sticky; top: 1.5rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.prompts .kicker { display: block; margin-bottom: 0.7rem; }
.toc { list-style: none; margin: 0; padding: 0; max-height: 62vh; overflow-y: auto; }
.toc li { margin: 0; max-width: none; border-bottom: 1px solid var(--rule-light); }
.toc li:last-child { border-bottom: 0; }
.toc a { display: flex; gap: 0.55rem; text-decoration: none; font-size: 0.86rem; line-height: 1.4; padding: 0.5rem 0; }
.toc a:hover, .toc a:focus-visible { background: var(--lamp); }
.toc .n { font-family: var(--data); font-weight: 600; font-size: 0.72rem; letter-spacing: 0.06em; opacity: 0.65; padding-top: 0.15em; }

.turn { border-top: 2px solid var(--rule); padding: 2.4rem 0 0.6rem; scroll-margin-top: 1.5rem; }
.turn:first-child { border-top: 0; padding-top: 0; }
.ask { border-left: 3px solid var(--lamp-deep); padding-left: 1.15rem; margin-bottom: 1.8rem; }
.askmeta { font-family: var(--data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.72; margin: 0 0 0.55rem; max-width: none; }
.askmeta .n { background: var(--ink); color: var(--paper); padding: 0.1em 0.42em; margin-right: 0.3rem; }
.askmeta .dt { letter-spacing: 0.1em; opacity: 0.8; }
.askmeta .dt::before { content: "\00b7"; margin: 0 0.45rem; }
.askbig { font-family: var(--display); font-weight: 900; font-size: clamp(1.18rem, 1.9vw, 1.5rem); line-height: 1.24; letter-spacing: -0.015em; }
.askbig p { max-width: 30ch; margin: 0 0 0.5em; }
.askbig p:last-child { margin-bottom: 0; }
.askbig a { border-bottom-width: 2px; }
.askdoc { margin-top: 1.2rem; font-size: 0.95rem; max-width: 34rem; }
.askbig + .askdoc { border-top: 1px solid var(--rule-light); padding-top: 1.1rem; }
.askdoc > :first-child { margin-top: 0; }
.askdoc h3, .askdoc h4 { font-family: var(--data); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 1.4rem 0 0.4rem; }
.askdoc ul, .askdoc ol { padding-left: 1.2rem; }
.askdoc li { margin-bottom: 0.35rem; max-width: none; }
.askdoc .tablewrap table { font-size: 0.88rem; }
.askdoc .cite { opacity: 0.45; }

.responds { font-family: var(--data); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.72; display: flex; align-items: center; gap: 0.5rem; margin: 0 0 1.1rem; max-width: none; }
.responds .dot { width: 0.5rem; height: 0.5rem; background: var(--lamp-deep); flex: 0 0 auto; }
.answer { max-width: 38rem; }
.answer > :first-child { margin-top: 0; }
.answer h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin: 2.1rem 0 0.6rem; }
.answer h3 { font-size: clamp(1.1rem, 1.7vw, 1.28rem); margin: 1.7rem 0 0.5rem; }
.answer h4 { font-family: var(--data); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 1.5rem 0 0.4rem; }
.answer ul, .answer ol { padding-left: 1.25rem; }
.answer li { margin-bottom: 0.45rem; max-width: 36rem; }
.answer li > ul, .answer li > ol { margin-top: 0.45rem; }
.answer b { background: linear-gradient(transparent 62%, var(--lamp) 62%); }
.answer code { font-family: var(--data); font-size: 0.9em; background: rgba(16,16,16,0.06); padding: 0.08em 0.32em; }
.answer pre { overflow-x: auto; background: rgba(16,16,16,0.05); padding: 1rem 1.1rem; margin: 1.4rem 0; }
.answer pre code { background: none; padding: 0; font-size: 0.86rem; line-height: 1.55; }
.answer .tablewrap table { font-size: 0.92rem; }
hr.turnrule { border: 0; border-top: 1px solid var(--rule-light); margin: 1.9rem 0; max-width: 12rem; }
.formula { font-family: var(--data); font-size: 0.95rem; line-height: 1.5; background: var(--lamp); color: var(--ink); padding: 0.9rem 1.1rem; margin: 1.5rem 0; max-width: none; overflow-wrap: anywhere; }
.ph { font-family: var(--data); font-size: 0.9em; opacity: 0.75; }
a.cite, span.cite {
  font-family: var(--data); font-size: 0.62rem; font-weight: 600; line-height: 1;
  background: var(--lamp); color: var(--ink); border: 0; text-decoration: none;
  padding: 0.18em 0.34em; margin-left: 0.12em; border-radius: 2px;
  vertical-align: super; white-space: nowrap;
}
a.cite:hover, a.cite:focus-visible { background: var(--ink); color: var(--lamp); }
/* A citation with no link behind it reads as inert by SHAPE (hollow, ruled) rather
   than by dimming. Dimming it to 0.5 washed ink toward lamp and landed at 3.38:1,
   under the 4.5:1 floor for 10px type — and colour alone was carrying the meaning. */
span.cite { background: transparent; color: var(--figure); border: 1px solid var(--rule-light); opacity: 1; }
.ink span.cite { border-color: var(--rule-dark); }

details.srcs { margin: 1.6rem 0 0; max-width: 38rem; }
details.srcs summary { letter-spacing: 0.06em; opacity: 0.8; }
.srclist { padding-left: 1.4rem; margin: 0.4rem 0 0; }
.srclist li { font-size: 0.86rem; margin-bottom: 0.4rem; max-width: none; overflow-wrap: anywhere; }
.srclist .host { font-family: var(--data); font-size: 0.74rem; opacity: 0.6; margin-left: 0.35rem; }
.draft { border-left: 3px solid var(--rule); padding: 0.2rem 0 0.2rem 1.15rem; margin: 1.6rem 0; font-size: 0.95rem; }
.draft > :first-child { margin-top: 0; }
.draft h2, .draft h3, .draft h4 { font-family: var(--data); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 1.4rem 0 0.4rem; }
.draft li { max-width: none; }
.draft { border-left: 3px solid var(--rule); padding: 0.2rem 0 0.2rem 1.15rem; margin: 1.6rem 0; font-size: 0.95rem; }
.draft > :first-child { margin-top: 0; }
.draft h2, .draft h3, .draft h4 { font-family: var(--data); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin: 1.4rem 0 0.4rem; }
.draft li { max-width: none; }
.figcap { font-family: var(--data); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.04em; border-top: 1px solid var(--rule-light); border-bottom: 1px solid var(--rule-light); padding: 0.6rem 0; margin: 1.4rem 0; opacity: 0.85; }

/* migrated threads: prose tables read left-to-right; only true numbers align right */
.answer table th, .answer table td,
.askdoc table th, .askdoc table td { text-align: left; vertical-align: top; }
.answer table th.num, .answer table td.num,
.askdoc table th.num, .askdoc table td.num { text-align: right; white-space: nowrap; }
.answer table thead th, .askdoc table thead th { text-align: left; }
.answer table thead th.num, .askdoc table thead th.num { text-align: right; }

.toc a { overflow-wrap: normal; }
.toc .n { white-space: nowrap; flex: 0 0 auto; }