/* 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, .srcnote {
  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, .srcnote 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);
  /* the header and its mega menu sit above everything a page can put on itself: the
     menu panel is trapped in this stacking context, so a page-level sticky bar with a
     higher z-index would paint straight over the open panel. */
  position: relative; z-index: 30;
}
.site-head .wrap {
  /* The panel hangs off the bottom of this box, so its bottom padding is exactly the
     dead strip between a nav item and its panel. The two have to stay the same number,
     which is what the custom property is for — see .panel::before. */
  --head-pad: 1.05rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-top: var(--head-pad); padding-bottom: var(--head-pad); 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); }
/* On a pointer screen the chevron is noise on eight items at once: it marks a panel
   that is already going to open on hover. So it is only drawn on the item that is
   actually open — hovered, focused into, or clicked open — and it fades rather than
   appearing, so the labels never shift.
   It is NOT display:none. On a touch screen there is no hover and the chevron is the
   only way to open a panel at all, so it stays drawn there; and a keyboard user has to
   be able to see it the moment it takes focus, which is the last rule below. */
@media (hover: hover) and (min-width: 901px) {
  .disc { opacity: 0; transition: opacity 0.15s ease; }
  nav.main li.has-panel:hover > .disc,
  nav.main li.has-panel:focus-within > .disc,
  nav.main li.has-panel.open > .disc { opacity: 0.7; }
  .disc:focus-visible { opacity: 1; }
}
.panel {
  display: none; position: absolute; left: 0; top: 100%; z-index: 20;
  min-width: 26rem; max-width: min(46rem, 94vw);
  background: var(--paper); color: var(--ink);
  --panel-border: 3px;
  border-top: var(--panel-border) solid var(--ink); box-shadow: 0 18px 40px rgba(16,16,16,0.14);
  padding: 1.1rem 1.25rem 1.2rem;
}
/* The panel is hung off the header, not off its own item.
   With eight narrow panels, anchoring each one to its item worked. With four wide ones it
   cannot: the nav is a cluster at the right of the header, so a panel anchored left runs
   off the right edge of the window and one anchored right runs off the left. Anchoring to
   the header's own wrap sidesteps the arithmetic — every panel spans the same measure the
   page's content does, which is also the room the third layer needs. */
.panel-claim { font-size: 0.92rem; line-height: 1.5; margin: 0 0 0.9rem; max-width: 30rem; color: var(--ink); }
/* Third layer: the panel holds named groups, each group holds its pages. The group
   heading is the information scent — "The requests", "In their own words" — which is what
   lets four doors carry what eight used to. */
/* Columns are capped rather than stretched: a full-width panel with two groups should be
   two readable columns at the left, not two 600px-wide ones. auto-fit collapses the tracks
   nothing lands in. */
.panel-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 15rem));
                justify-content: start; gap: 1.4rem 2.2rem; }
.panel-group ul { display: block; margin: 0; }
.panel-group-h {
  font-family: var(--data); font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.62;
  margin: 0 0 0.35rem; padding-bottom: 0.3rem; max-width: none;
  border-bottom: 2px solid var(--ink);
}
.panel li { max-width: none; }
/* a page in the panel is its name and nothing else — the line of description that used to
   sit under each one was removed on 2026-09-08 */
.panel a { display: block; text-decoration: none; color: var(--ink); padding: 0.5rem 0.3rem;
           border-bottom: 1px solid var(--rule-light);
           font-family: var(--data); font-weight: 600; font-size: 0.92rem; }
.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; }
  .site-head .wrap { position: relative; }
  nav.main li.has-panel { position: static; }
  /* var(--gut) on the sides so the panel's first column lines up with the wordmark above
     it and with the page's own text below it, rather than sitting a few pixels adrift. */
  .panel { left: 0; right: 0; top: 100%; min-width: 0; max-width: none;
           padding: 1.4rem var(--gut) 1.6rem; }
  .panel-claim { margin-bottom: 1.2rem; }
  /* The hover bridge. The panel starts at the bottom of the header's wrap, but the nav
     item ends one --head-pad higher, so moving the cursor down from a label crossed a
     17px strip belonging to neither — and the panel, held open by :hover on the item,
     shut in the gap. This is that strip, transparent, and part of the panel, so the
     cursor never actually leaves the item it is pointing at. It spans the full width,
     so the crossing works from any of the four labels, and it exists only while a panel
     is open, so it never sits over anything a reader could otherwise click. */
  .panel::before {
    content: ""; position: absolute; left: 0; right: 0;
    /* An absolutely positioned pseudo-element is placed against its parent's PADDING box,
       so bottom:100% lands under the panel's border-top, not on its outer edge — which
       left a three-pixel sliver of the gap still uncovered. Hence the border in the sum. */
    bottom: 100%; height: calc(var(--head-pad) + var(--panel-border));
  }
}
@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; }
  /* The item's own link and its chevron share a row; the panel spans both underneath. */
  nav.main li.has-panel { display: grid; grid-template-columns: 1fr auto; align-items: center;
                          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; }
  nav.main li.has-panel > .panel { grid-column: 1 / -1; }
  /* Four doors with every page under them is 2,300px of menu on a phone — a scroll nobody
     finishes. So on a small screen the panels collapse and the chevron opens them.
     `collapsible` is added by initMenu(), never by the generator: with JavaScript off
     nothing can open them again, so without it every panel stays open the way it always
     has. Long, but whole. */
  .disc { display: none; opacity: 0.7; }
  nav.main.collapsible .disc { display: inline-flex; min-width: 44px; min-height: 44px;
                               justify-content: center; }
  nav.main.collapsible li.has-panel > .panel { display: none; }
  nav.main.collapsible li.has-panel.open > .panel { display: block; }
  .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; }
  /* One column on a phone: the groups stack, and their headings are what keeps a
     forty-item list readable as a list of four things. */
  .panel-groups { grid-template-columns: 1fr; gap: 1rem; }
  .panel-group-h { opacity: 0.75; }
}

/* ---------- 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; }
.doors.four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .doors.four { grid-template-columns: 1fr 1fr; } }
@media (max-width: 800px) { .doors, .doors.four { 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); }
/* the opening words sit on the film. A scrim carries them, because the film is a moving
   photograph and type on an uncontrolled ground is not legible: paper on ink, 19:1, over a
   gradient dark enough at the type's own height. With the film paused or the poster showing
   it reads the same. */
.film-frame { position: relative; }
.film-video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 66vh; object-fit: cover; background: var(--ink); }
.film-copy {
  position: absolute; inset: 0; display: flex; align-items: center;
  padding: 0;
  /* the copy sits left and centred, so the scrim runs left to right and lets the building
     stay visible on the right, rather than darkening the foot of the frame it no longer uses */
  background: linear-gradient(to right, rgba(16,16,16,0.90) 0%, rgba(16,16,16,0.84) 34%,
                              rgba(16,16,16,0.46) 62%, rgba(16,16,16,0.12) 86%, rgba(16,16,16,0.06) 100%);
  color: var(--paper);
}
/* .wrap is a flex item here, and a flex item shrinks to its content: without this it
   sizes to the longest line and its auto margins centre that, so the copy sits indented
   from the gutter every other block on the site uses. */
.film-copy .wrap { width: 100%; }
.film-copy h1 { color: var(--paper); max-width: 20ch; margin-bottom: 1.05rem; }
/* the verse is the quiet half of the hero: a step down from the headline, not a second one */
.film-verse { color: var(--paper); max-width: 34rem;
              font-size: clamp(1.12rem, 1.35vw, 1.35rem); line-height: 1.45; opacity: 0.94; }
/* the question mark is the door into the musing the verse comes from */
.qmark { position: relative; color: var(--lamp); text-decoration: none; border-bottom: 3px solid var(--lamp);
         padding: 0 0.06em 1px; margin-left: 0.02em; }
.qmark:hover, .qmark:focus-visible { background: var(--lamp); color: var(--ink); }
/* a single glyph is a 21px target; this gives it a thumb-sized one without moving the type */
.qmark::after { content: ""; position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); }
@media (max-width: 700px) {
  /* on a phone the film is short and the words need the room, so they sit under it */
  .film-copy { position: static; background: var(--ink); padding: 1.5rem 0 1.7rem; }
  .film-copy h1 { max-width: none; }
}
/* The bar carried a caption and a control; the caption went on 2026-09-09, so the control
   sits on its own at the right rather than being pushed left by a space-between with
   nothing to space against. */
.film-bar { display: flex; align-items: center; justify-content: flex-end; 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; }
.prompts { position: sticky; top: 1.5rem; border-top: 2px solid var(--ink); padding-top: 1rem; }
.prompts .kicker { display: block; }
.prompts > summary { list-style: none; }
.prompts > summary::-webkit-details-marker { display: none; }
.prompts-n { display: none; }
.toc { list-style: none; margin: 0.7rem 0 0; padding: 0; max-height: 62vh; overflow-y: auto; }

/* On one column the list is above the copy, and a sticky 62vh list there rides over the
   text as you read — which is exactly what it used to do. It becomes a bar instead: stuck
   to the top of the window, open at the start, and folded to its own title the moment the
   copy starts. Tapping the bar opens it again; tapping a prompt folds it back so the list
   is not sitting on top of the thing it just took you to. */
@media (max-width: 980px) {
  .threadgrid { grid-template-columns: 1fr; }
  .prompts {
    order: -1; top: 0; z-index: 12; margin: 0 0 1.6rem;
    background: var(--paper); border-bottom: 2px solid var(--ink); padding: 0.15rem 0 0;
    box-shadow: 0 8px 12px -10px rgba(16, 16, 16, 0.45);
  }
  .prompts > summary {
    cursor: pointer; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; padding: 0.75rem 0;
  }
  .prompts > summary:focus-visible { outline: 3px solid var(--lamp); outline-offset: -3px; }
  /* a caret that turns, so the bar reads as something you can open */
  .prompts-n {
    display: inline-flex; align-items: center; gap: 0.5rem;
    font-family: var(--data); font-size: 0.72rem; font-weight: 600; opacity: 0.7;
  }
  .prompts-n::after {
    content: ""; width: 0.5rem; height: 0.5rem; border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor; transform: rotate(45deg) translate(-0.1em, -0.1em);
    transition: transform 0.15s ease;
  }
  .prompts[open] .prompts-n::after { transform: rotate(-135deg) translate(-0.1em, -0.1em); }
  .toc { max-height: 44vh; padding-bottom: 0.6rem; }
  /* An anchor must not land under the folded bar, which is about 73px tall. Scoped to
     .threadgrid on purpose: the plain `.turn { scroll-margin-top: 1.5rem }` rule is further
     down this file, so at equal specificity it would win on order and this would silently
     do nothing — which is exactly what it did until the computed value was checked. */
  .threadgrid .turn { scroll-margin-top: 5.6rem; }
}
.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; }

/* ---------------------------------------------------------------- home callouts */
/* Two of these: The System, and the newest recording on Testimony. Both are the same
   shape — a block of type beside a picture — so they read as a pair rather than as two
   unrelated bolt-ons, and both collapse to one column early, because a 16:9 still and a
   paragraph share a narrow screen badly. */
.callout-2 {
  display: grid; grid-template-columns: 1fr minmax(0, 0.85fr);
  gap: clamp(1.6rem, 4vw, 3.2rem); align-items: center;
}
.callout-2 h2 { margin-top: 0.35rem; }
.callout-art { margin: 0; }
.callout-art img {
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(244, 241, 234, 0.22);
}
.callout-art figcaption { margin-top: 0.6rem; opacity: 0.72; }

/* The reel card. Picture first on a wide screen — it is the thing being surfaced — and
   the shape comes from the reel's own still, since a third of them are landscape. */
/* the still is capped by its own height, so let its column shrink to it rather than
   reserving a fraction of the row and leaving a gap beside the picture */
.reel-callout { grid-template-columns: auto minmax(0, 1fr); align-items: center; }
.reel-still {
  position: relative; display: block; overflow: hidden;
  aspect-ratio: var(--ar, 0.5625);
  max-width: min(100%, calc(26rem * var(--ar, 0.5625)));
  background: #0c0c0c; border: 1px solid var(--rule); text-decoration: none;
}
.reel-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-still:hover img, .reel-still:focus-visible img { opacity: 0.84; }
.reel-still:focus-visible { outline: 3px solid var(--lamp); outline-offset: 2px; }
.reel-play {
  position: absolute; inset: 0; margin: auto; width: 3.2rem; height: 3.2rem;
  border-radius: 50%; background: rgba(16, 16, 16, 0.62);
  border: 2px solid var(--paper); box-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
}
.reel-play::after {
  content: ""; position: absolute; inset: 0; margin: auto; width: 0; height: 0;
  border-left: 0.9rem solid var(--paper);
  border-top: 0.56rem solid transparent; border-bottom: 0.56rem solid transparent;
  transform: translateX(0.13rem);
}
.reel-still:hover .reel-play { background: var(--ink); }
.reel-dur {
  position: absolute; right: 0.4rem; bottom: 0.4rem;
  background: rgba(16, 16, 16, 0.78); color: var(--paper);
  font-size: 0.72rem; font-weight: 700; padding: 0.1rem 0.36rem; border-radius: 2px;
}
.reel-meta { letter-spacing: 0.1em; text-transform: uppercase; opacity: 0.7; margin-bottom: 0.9rem; }

@media (max-width: 54rem) {
  .callout-2, .reel-callout { grid-template-columns: 1fr; }
  .reel-still { max-width: min(100%, 14rem); }
  .callout-art { order: 2; }
}

/* ---------- content-audit additions, 2026-09-08 ---------- */

/* The skip link was positioned off-screen with an inline style and no :focus rule,
   which meant a keyboard user could reach it and never see it. It is the first
   interactive element on every page; it has to be visible when it has focus. */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 60;
  background: var(--lamp); color: var(--ink);
  font-family: var(--data); font-weight: 700; font-size: 0.95rem;
  padding: 0.7rem 1.1rem; border: 2px solid var(--ink); text-decoration: none;
}
.skip:focus { left: 0.5rem; top: 0.5rem; }

/* WCAG 2.2 2.5.8: 24x24 CSS px, or 24px of spacing. The dense footer columns and
   the disclosure toggles were the two places measurably under it. */
.site-foot ul a, .toc a, .jumps a { display: inline-block; min-height: 24px; padding: 2px 0; }
.site-foot ul li { margin-bottom: 0.25rem; }

/* /families/ — the jump list at the top, and the postal addresses. */
.jumps { list-style: none; margin: 1.6rem 0 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.5rem 0.7rem; max-width: none; }
.jumps li { margin: 0; max-width: none; }
.jumps a { font-family: var(--data); font-size: 0.92rem; font-weight: 600;
  text-decoration: none; border: 1px solid var(--rule-light); padding: 0.4rem 0.75rem; }
.jumps a:hover, .jumps a:focus-visible { background: var(--lamp); border-color: var(--ink); }
.addr { font-family: var(--ledger); font-weight: 700; line-height: 1.5;
  border-left: 4px solid var(--lamp-deep); padding: 0.5rem 0 0.5rem 1.1rem; margin: 1.1rem 0; }

/* The crisis door: lamp fill, ink type. Lamp is never type on paper — here it is the
   ground and the ink is the type, which is the only direction that rule allows. */
.door-crisis { display: block; background: var(--lamp); color: var(--ink);
  border: 2px solid var(--ink); text-decoration: none;
  padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1.1rem, 3vw, 1.8rem); }
.door-crisis:hover, .door-crisis:focus-visible { background: var(--ink); color: var(--lamp); }
.door-crisis b { font-family: var(--display); font-weight: 900;
  font-size: clamp(1.05rem, 2.2vw, 1.35rem); letter-spacing: -0.015em; display: block; }
.door-crisis span { font-family: var(--data); font-size: 0.95rem; display: block; margin-top: 0.3rem; }

/* The standing calendar, and the meeting lists inside it. */
table.cal th[scope="row"] { min-width: 13rem; }
.datelist { list-style: none; margin: 0; padding: 0; max-width: none; }
.datelist li { margin: 0 0 0.5rem; max-width: none;
  font-family: var(--ledger); font-variant-numeric: tabular-nums;
  font-weight: 700; font-size: 0.95rem; line-height: 1.35; }
.datelist li:last-child { margin-bottom: 0; }
/* --harm is remapped inside .ink, where the paper-ground clay goes muddy. Use the
   token, never the raw colour: the calendar sits on ink on Act and on paper on /ask/. */
.datelist .status { color: var(--harm); }

/* The hidden attribute must beat any display rule a class sets on the same element.
   Without this the "This week" badge — display:inline-block — stayed visible on every
   row of the calendar, because the class outranks the user agent's [hidden] rule. */
[hidden] { display: none !important; }

/* Screen-reader-only. An empty calendar cell reads as an em dash to the eye and as
   "no sitting published" to a screen reader; neither reader is guessing. */
.vh { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }

/* The week calendar: weeks down, the five rooms across, this week on top. */
table.weekcal { min-width: 46rem; }
table.weekcal th, table.weekcal td { text-align: left; vertical-align: top; }
table.weekcal thead th { white-space: nowrap; }
/* The week column stays put while the five rooms scroll under it. On a phone the
   table is wider than the screen, and a date with no week against it is no use. */
table.weekcal th[scope="row"] { min-width: 9rem; white-space: nowrap;
  font-family: var(--ledger); font-variant-numeric: tabular-nums; font-weight: 700;
  position: sticky; left: 0; z-index: 1; background: var(--ground);
  box-shadow: 1px 0 0 var(--rule); }
table.weekcal td { font-family: var(--ledger); font-variant-numeric: tabular-nums; font-size: 0.92rem; }
.wk-sit { display: block; margin-bottom: 0.5rem; }
.wk-sit:last-child { margin-bottom: 0; }
.wk-sit b { display: block; font-weight: 700; }
.wk-time { display: block; font-weight: 400; opacity: 0.8; }
.wk-sit .status { display: inline-block; margin-top: 0.15rem; color: var(--harm); }
.wk-none { opacity: 0.35; }
/* "This week" is the whole point of the row order, so it is marked, not implied. */
.wk-now { display: inline-block; margin-left: 0.5rem; background: var(--lamp); color: var(--ink);
  padding: 0.05em 0.4em; }
tbody tr.is-now th[scope="row"] { box-shadow: inset 3px 0 0 var(--lamp), 1px 0 0 var(--rule); padding-left: 0.5rem; }
.wk-foot { margin: 0.2rem 0 0; }
.wk-more { font-family: var(--data); font-size: 0.88rem; font-weight: 700;
  padding: 0.5rem 0.9rem; border: 2px solid currentColor; background: transparent;
  color: inherit; cursor: pointer; min-height: 24px; }
.wk-more:hover, .wk-more:focus-visible { background: var(--lamp); color: var(--ink); border-color: var(--lamp); }
/* A table of prose, not figures: the base right-alignment is for numbers and reads
   as ragged nonsense in a sentence. */
.tprose th, .tprose td { text-align: left; vertical-align: top;
  font-family: inherit; }
.cal.rooms tr { scroll-margin-top: 5rem; }
@media (max-width: 560px) { table.weekcal { min-width: 38rem; font-size: 0.88rem; } }

/* The roster. The Authority's own board members are marked twice over — a lamp ground
   and the word RRJA — because a mark that is only a colour is not a mark for everyone. */
table.roster { min-width: 40rem; }
table.roster th, table.roster td { text-align: left; vertical-align: top; }
table.roster th[scope="row"] { min-width: 12rem; }
table.roster .rcontact { font-family: var(--data); font-size: 0.88rem; word-break: break-word; }
.rrja-mark { display: inline-block; margin-left: 0.5rem; background: var(--lamp); color: var(--ink);
  padding: 0.05em 0.4em; }
tbody tr.is-rrja, tbody tr.is-rrja:hover { background: rgba(255, 226, 106, 0.22); }
.ink tbody tr.is-rrja, .ink tbody tr.is-rrja:hover { background: rgba(255, 226, 106, 0.14); }
.appt { font-family: var(--data); font-size: 0.85rem; }
.rlegend { border: 2px solid var(--ink); padding: clamp(1.1rem, 2.6vw, 1.6rem); max-width: 46rem; margin: 1.6rem 0 2.4rem; }
.rlegend h3 { margin-top: 0; }
.rlegend dl { margin: 0; }
.rlegend dt { font-family: var(--data); font-size: 0.76rem; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; margin-top: 1rem; }
.rlegend dd { margin: 0.25rem 0 0; max-width: 34rem; }
.rlegend p { margin: 1.4rem 0 0; }

/* The script builder's output controls. */
.scriptbar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.scriptbar button, .scriptbar a.btn-plain { font-family: var(--data); font-size: 0.88rem;
  font-weight: 700; padding: 0.5rem 0.9rem; border: 2px solid var(--ink);
  background: var(--paper); color: var(--ink); cursor: pointer; text-decoration: none;
  min-height: 24px; }
.scriptbar button:hover, .scriptbar button:focus-visible,
.scriptbar a.btn-plain:hover, .scriptbar a.btn-plain:focus-visible { background: var(--lamp); }
.scriptbar button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* Print. The two pages most likely to be printed and posted in are /families/ and the
   FOIA template; the brief is meant to go to an official on one sheet. */
@media print {
  .site-head, .site-foot, .staging-note, .skip, .film-bar, .scriptbar, .wk-more,
  .jumps, .hero-film video, .menu-toggle { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  section { padding: 0 0 0.6rem !important; }
  .wrap { max-width: none; padding: 0; }
  .ink { background: #fff !important; color: #000 !important; }
  .ink * { color: #000 !important; }
  .block-lamp { background: #fff; border: 2px solid #000; }
  a { color: #000; text-decoration: underline; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; word-break: break-all; }
  h1, h2, h3 { break-after: avoid; }
  .prov, .tiny { font-size: 8pt; }
  .addr, .datelist li, blockquote, table { break-inside: avoid; }
}

/* /ask/ and /plan/ */
dl.askfacts { margin: 1rem 0 0; }
dl.askfacts dt { font-family: var(--data); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; margin-top: 0.9rem; }
dl.askfacts dd { margin: 0.2rem 0 0; max-width: 34rem; }
ol.brief-asks { padding-left: 1.2rem; max-width: 46rem; }
ol.brief-asks li { margin-bottom: 1rem; }
ol.plan { list-style: none; margin: 0; padding: 0; max-width: none; counter-reset: plan; }
.planstep { max-width: none; border-top: 2px solid var(--figure);
  padding-top: 1.1rem; margin: 0 0 2.6rem; }
.planstep h3 { display: flex; gap: 0.7rem; align-items: baseline; margin-bottom: 0.5rem; }
.planstep > p { max-width: 40rem; }
.card .figure { display: block; }

/* /search/ — the results and the A–Z index */
.azlist { list-style: none; margin: 1.4rem 0 0; padding: 0; max-width: none;
  columns: 2; column-gap: 2.4rem; }
.azlist li { margin: 0 0 0.9rem; max-width: none; break-inside: avoid; }
.azlist a { font-family: var(--data); font-weight: 600; }
@media (max-width: 46rem) { .azlist { columns: 1; } }
.fine.currency { margin-top: 0.9rem; border-top: 1px solid var(--rule-dark); padding-top: 0.9rem; }

/* The rounding note. Small, early, and on every page that cites a figure — a reader who
   meets ≈ in a sentence should not have to hunt for what it means. */
.roundnote { font-size: 0.86rem; line-height: 1.5; max-width: 44rem;
  border-left: 3px solid var(--lamp-deep); padding: 0.15rem 0 0.15rem 0.9rem; margin: 1.4rem 0 0; }
.ink .roundnote { border-left-color: var(--lamp); }
.roundnote-big { max-width: 46rem; margin-top: 2rem; }