/* Cornell 7 Archive — shared styles
   A record, not a campaign: paper, ink, hairline rules, and type doing the work.
   Section headings sit in the left margin; records carry reference numbers (C7-…). */

:root {
  color-scheme: light;
  --paper: #f5f0e4;
  --paper-2: #ede6d5;      /* hover rows, empty photo slots */
  --ink: #1a2330;
  --ink-2: #39424f;        /* secondary text */
  --muted: #5a6270;        /* metadata */
  --rule: #d8cfbc;
  --accent: #1f3f66;       /* links and the current page, nothing else */
  --mark: #e8d5a0;         /* highlighter, for records you have jumped to */
  --slot: #ebe4d4;

  --serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "IBM Plex Sans Condensed", "Arial Narrow", system-ui, sans-serif;   /* small metadata: dates, reference numbers */

  --side: 12.5rem;         /* the left margin column */
  --gap: 3rem;
  --sticky-top: 1.5rem;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }   /* controls stay hidden until site.js enables them */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: 1.125rem;
  line-height: 1.6;
  font-variant-numeric: oldstyle-nums proportional-nums;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; }

/* Links: a quiet underline that firms up on hover */
a {
  color: var(--accent);
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgb(31 63 102 / 0.4);
  text-underline-offset: 0.18em;
  transition: text-decoration-color 0.15s, color 0.15s;
}
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; }

.skip {
  position: absolute; left: 1rem; top: -3rem; z-index: 50;
  background: var(--ink); color: var(--paper); padding: 0.5rem 0.9rem;
  font-family: var(--sans); font-size: 0.9rem; text-decoration: none;
}
.skip:focus { top: 1rem; }

.wrap { max-width: 68rem; margin: 0 auto; padding: 0 2rem; }

/* ---------------------------------------------------------------- Header */
.site-header { border-bottom: 1px solid var(--ink); }
.masthead {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem;
  padding-top: 1.5rem; padding-bottom: 1.1rem;
}
.wordmark, .parent-link { display: block; line-height: 0; }
.wordmark img { height: 3.4rem; width: auto; }
.parent-mark { height: 1.3rem; width: auto; }
.navbar {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem 1.5rem;
  flex-wrap: wrap; position: relative;
  padding-top: 0.55rem; padding-bottom: 0.55rem;
}
.navbar::before { content: ""; position: absolute; top: 0; left: 2rem; right: 2rem; border-top: 1px solid var(--rule); }
.site-header nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.3rem 1.4rem;
  font-family: var(--sans); font-size: 0.9rem;
}
.site-header nav a {
  color: var(--ink-2); text-decoration: none; padding-bottom: 3px;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size 0.18s ease-out, color 0.15s;
}
.site-header nav a:hover { color: var(--ink); background-size: 100% 1px; }
.site-header nav a[aria-current="page"] { color: var(--ink); background-size: 100% 2px; background-image: linear-gradient(var(--accent), var(--accent)); }

.search-open {
  font-family: var(--sans); font-size: 0.82rem; color: var(--ink-2);
  background: none; border: 1px solid var(--rule); border-radius: 2px;
  padding: 0.25rem 0.35rem 0.25rem 0.6rem; cursor: pointer;
  display: inline-flex; align-items: center; gap: 0.6rem;
  transition: border-color 0.15s, color 0.15s;
}
.search-open:hover { border-color: var(--ink-2); color: var(--ink); }
kbd {
  font-family: var(--mono); font-size: 0.79rem; line-height: 1;
  border: 1px solid var(--rule); border-bottom-width: 2px; border-radius: 2px;
  padding: 0.15rem 0.35rem; color: var(--ink-2); background: var(--paper);
}

/* ---------------------------------------------------------------- Page grid
   .sect = a row of the page: heading in the margin, content beside it. */
main.page { padding-top: 1.5rem; padding-bottom: 5rem; }
.sect {
  display: grid; grid-template-columns: var(--side) minmax(0, 46rem);
  column-gap: var(--gap); padding: 2.25rem 0;
  border-top: 1px solid var(--rule);
}
.sect-side { min-width: 0; }
.sect-main { min-width: 0; }
.sect-main > :first-child { margin-top: 0; }
@media (min-width: 821px) {
  .sect-side { position: sticky; top: var(--sticky-top); align-self: start; }
}
.page-head { border-top: 0; padding-top: 1.75rem; padding-bottom: 2rem; }

h1, h2, h3 { font-family: var(--serif); font-weight: 600; color: var(--ink); font-variant-numeric: lining-nums; }
h1 {
  font-size: clamp(2.1rem, 1.5rem + 1.9vw, 2.9rem); line-height: 1.08;
  letter-spacing: -0.018em; margin: 0 0 1rem; max-width: 18em;
}
h2 { font-size: 1.45rem; line-height: 1.25; margin: 2.5rem 0 0.75rem; }
h3 { font-size: 1.15rem; line-height: 1.3; margin: 1.75rem 0 0.4rem; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.28rem; line-height: 1.5; color: var(--ink-2); max-width: 36em; }
.meta { font-family: var(--sans); font-size: 0.875rem; line-height: 1.55; color: var(--muted); }
.side-head { font-size: 1.15rem; line-height: 1.28; margin: 0 0 0.6rem; letter-spacing: -0.005em; }
.side-label { font-family: var(--sans); font-size: 0.85rem; color: var(--muted); margin: 0; }
.folio { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); letter-spacing: 0.02em; margin: 0.9rem 0 0; }
.folio-sub { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); margin: 0; }
.sidenote { font-family: var(--sans); font-size: 0.82rem; line-height: 1.55; color: var(--muted); margin: 0.5rem 0 0; max-width: 24em; }
.todo { font-style: italic; }
strong { font-weight: 600; }

/* Reference numbers, dates and IDs */
.ref { font-family: var(--mono); font-size: 0.83rem; letter-spacing: 0.02em; color: var(--ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* A line of metadata above a record: C7-T-004 · Official statement · Prosecutors      Link */
.record-meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0;
  font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin: 0 0 0.35rem;
}
.record-meta > * + *:not(.permalink)::before { content: "\00b7"; margin: 0 0.5rem; color: var(--rule); }
.record-meta .ref + *::before { color: var(--muted); }

/* Copy-a-permanent-link control: visible on focus, on hover of its record, and always on touch screens */
.permalink {
  margin-left: auto; padding-left: 1rem;
  font-family: var(--sans); font-size: 0.75rem; color: var(--muted);
  text-decoration: none; white-space: nowrap;
}
.permalink::before { content: "\00b6\00a0"; font-family: var(--serif); }
.permalink:hover { color: var(--accent); text-decoration: underline; }
.permalink.copied { color: var(--ink); }
@media (hover: hover) {
  .permalink { opacity: 0; transition: opacity 0.15s; }
  [data-record]:hover .permalink, [data-record]:focus-within .permalink,
  .dir-row[open] .permalink, .permalink:focus-visible, .permalink.copied { opacity: 1; }
}

/* Sources read like footnotes: each citation gets a small reference number */
.sources {
  font-family: var(--sans); font-size: 0.8rem; line-height: 1.6; color: var(--muted);
  margin: 0.75rem 0 0; counter-reset: cite;
}
.sources a[href^="http"] { counter-increment: cite; }
.sources a[href^="http"]::before {
  content: counter(cite); display: inline-block;
  font-family: var(--mono); font-size: 0.73rem; line-height: 1;
  vertical-align: 0.35em; margin-right: 0.2em; color: var(--muted);
}

/* Cross-references */
.related { margin-top: 0.9rem; padding-top: 0.55rem; border-top: 1px dotted var(--rule); }
.related-label { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); margin: 0 0 0.2rem; }
.related ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.15rem 1.25rem; font-family: var(--sans); font-size: 0.82rem; }
.related a { text-decoration: none; color: var(--ink-2); }
.related a:hover { color: var(--accent); text-decoration: underline; }
.related .ref { margin-right: 0.35rem; }

/* ---------------------------------------------------------------- Status marks
   Colorless: a filled, half-filled, open or broken circle, always with its word. */
.st {
  display: inline-flex; align-items: center; gap: 0.45em;
  font-family: var(--sans); font-size: 0.8rem; font-weight: 500; color: var(--ink);
  white-space: nowrap;
}
.st-glyph { width: 0.72em; height: 0.72em; border-radius: 50%; border: 1.5px solid currentColor; flex: none; }
.st--confirmed .st-glyph { background: currentColor; }
.st--disputed .st-glyph { background: linear-gradient(90deg, currentColor 50%, transparent 50%); }
.st--alleged .st-glyph { background: transparent; }
.st--unresolved .st-glyph { border-style: dotted; border-width: 2px; }

/* ---------------------------------------------------------------- Definitions */
.defs { margin: 1rem 0; }
.defs dt { font-weight: 600; margin-top: 1rem; }
.defs dd { margin: 0.2rem 0 0; }
.defs--table, .defs--ruled { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; margin: 0.25rem 0 1rem; }
.defs--table dt, .defs--ruled dt, .defs--table dd, .defs--ruled dd { margin: 0; padding: 0.7rem 0; border-top: 1px solid var(--rule); }
.defs--table dt, .defs--ruled dt { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--ink-2); padding-top: 0.85rem; }
.defs--table > :nth-child(1), .defs--table > :nth-child(2),
.defs--ruled > :nth-child(1), .defs--ruled > :nth-child(2) { border-top: 0; }
.defs--table dd + dd { border-top: 0; padding-top: 0; grid-column: 2; }

/* Typographic notices: rules above and below, no boxes */
.statement, .notice {
  border-top: 3px double var(--ink); border-bottom: 1px solid var(--ink);
  padding: 0.9rem 0 1rem; margin: 0 0 1.5rem;
}
.statement { font-size: 1.28rem; line-height: 1.5; }
.notice p { margin: 0; }
.notice-label { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin-bottom: 0.35rem !important; }

/* ---------------------------------------------------------------- Photo slots
   Upload a file with the named filename and it fills the slot automatically. */
.media { margin: 0 0 1.5rem; }
.media-frame {
  position: relative; width: 100%;
  background: var(--slot); border: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  text-align: center; overflow: hidden;
}
.media-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media-hint { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); padding: 1rem; max-width: 22rem; }
.media figcaption { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin-top: 0.45rem; }
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 1.25rem; }
.gallery .media { margin: 0 0 1rem; }

/* ---------------------------------------------------------------- Filters (shared) */
.filters { margin-top: 1rem; }
.filter-group { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0 0 0.5rem; }
.filter-label { font-family: var(--sans); font-size: 0.78rem; color: var(--muted); min-width: 5.5rem; }
.filter-group button {
  font: inherit; font-family: var(--sans); font-size: 0.85rem; color: var(--ink-2);
  background: none; border: 0; padding: 0.15rem 0 0.2rem; cursor: pointer;
  border-bottom: 1px solid transparent; transition: border-color 0.15s, color 0.15s;
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.filter-group button:hover { color: var(--ink); border-bottom-color: var(--rule); }
.filter-group button[aria-pressed="true"] { color: var(--ink); border-bottom: 2px solid var(--ink); }
.filter-group .n { font-family: var(--mono); font-size: 0.79rem; color: var(--muted); }
.filter-count { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin: 0.5rem 0 0; min-height: 1.2em; }
[data-record][hidden], .ledger-month[hidden], .chrono-row[hidden] { display: none !important; }

/* Arriving at a record by link: a brief highlighter pass */
@keyframes mark-fade { from { background-color: var(--mark); } to { background-color: transparent; } }
.is-target, [data-record]:target { animation: mark-fade 2.6s ease-out 0.2s both; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .is-target, [data-record]:target { background-color: rgb(232 213 160 / 0.45); }
}

/* ---------------------------------------------------------------- Home */
.home-head h1 { font-size: clamp(2.2rem, 1.4rem + 2.6vw, 3.25rem); max-width: 15em; }
.standing-text { font-size: 1.28rem; line-height: 1.5; }
.asof { font-family: var(--mono); font-size: 0.83rem; color: var(--muted); margin: 0; }
.brief-head { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); margin: 1.5rem 0 0.25rem; }
.brief { list-style: none; margin: 0 0 1.25rem; padding: 0; border-top: 1px solid var(--ink); }
.brief li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); column-gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule); align-items: baseline; }
.brief a { color: var(--ink); text-decoration: none; }
.brief a:hover { color: var(--accent); text-decoration: underline; }
.story-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin: 0 0 0.75rem; }
.story-grid .media { margin: 0; flex: 0 0 calc((100% - 2rem) / 3); }

.idx { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.idx-row {
  display: grid; grid-template-columns: 2.75rem minmax(10rem, 15rem) minmax(0, 1fr);
  column-gap: 1.25rem; align-items: baseline;
  padding: 0.95rem 0.25rem; border-bottom: 1px solid var(--rule);
  position: relative; transition: background-color 0.15s;
}
.idx-row:hover { background: var(--paper-2); }
.idx-n { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.idx-title { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; line-height: 1.2; color: var(--ink); text-decoration: none; }
.idx-title::after { content: ""; position: absolute; inset: 0; }   /* whole row is the link target */
.idx-title:hover { color: var(--accent); }
.idx-desc { margin: 0; font-size: 1rem; color: var(--ink-2); }

/* ---------------------------------------------------------------- The Seven: a directory */
.dir-head, .dir-row summary {
  display: grid; grid-template-columns: 2.75rem minmax(0, 1fr) 13.5rem 3.5rem 1.25rem; column-gap: 1rem; align-items: baseline;
}
.dir-head { font-family: var(--mono); font-size: 0.77rem; color: var(--muted); padding: 0 0.25rem 0.4rem; border-bottom: 1px solid var(--ink); }
.dir-head span:nth-child(3), .dir-head span:nth-child(4) { grid-column: auto; }
.directory { list-style: none; margin: 0 0 1rem; padding: 0; }
.directory > li { border-bottom: 1px solid var(--rule); }
.dir-row summary { list-style: none; cursor: pointer; padding: 0.85rem 0.25rem; transition: background-color 0.15s; }
.dir-row summary::-webkit-details-marker { display: none; }
.dir-row summary:hover { background: var(--paper-2); }
.dir-num { font-family: var(--mono); font-size: 0.87rem; color: var(--muted); }
.dir-name { font-size: 1.25rem; font-weight: 600; line-height: 1.25; }
.dir-standing { font-family: var(--sans); font-size: 0.82rem; color: var(--ink-2); }
.dir-year { font-family: var(--mono); font-size: 0.87rem; color: var(--ink-2); }
.dir-toggle::after { content: "+"; font-family: var(--sans); color: var(--muted); font-size: 1.1rem; }
.dir-row[open] .dir-toggle::after { content: "\2212"; }
.dir-record { padding: 0.25rem 0.25rem 1.5rem 3.75rem; }
@media (prefers-reduced-motion: no-preference) {
  .dir-row[open] .dir-record { animation: unfold 0.18s ease-out; }
  @keyframes unfold { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }
}

/* ---------------------------------------------------------------- Evidence: a catalogue */
.cat-controls > summary { display: none; }
.cat-form { display: grid; gap: 0.85rem; margin-top: 0.5rem; }
.field { display: grid; gap: 0.15rem; }
.field span { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); }
.field input, .field select {
  font: inherit; font-family: var(--sans); font-size: 0.88rem; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--ink-2); border-radius: 0;
  padding: 0.3rem 0; width: 100%;
}
.field select { cursor: pointer; }
.field input::placeholder { color: var(--muted); opacity: 0.8; }
.kbd-hint { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); margin: 0; }

.cat-list { border-top: 1px solid var(--ink); }
.cat-row {
  display: grid; grid-template-columns: 6.25rem minmax(0, 1fr) auto; column-gap: 1.25rem;
  padding: 1.1rem 0.35rem 1.2rem; border-bottom: 1px solid var(--rule);
  transition: background-color 0.15s;
}
.cat-row:hover { background: rgb(237 230 213 / 0.55); }
.cat-row:focus { outline: none; }
.cat-row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.cat-ref { display: flex; flex-direction: column; gap: 0.2rem; }
.cat-ref time { font-family: var(--mono); font-size: 0.81rem; color: var(--muted); }
.cat-body .record-meta { margin-bottom: 0.4rem; }
.cat-text { margin: 0; font-size: 1rem; }
.cat-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; }
.cat-actions .permalink { margin-left: 0; padding-left: 0; }
.preview-open {
  font: inherit; font-family: var(--sans); font-size: 0.75rem; color: var(--ink-2);
  background: none; border: 0; border-bottom: 1px solid var(--rule); padding: 0 0 1px; cursor: pointer;
}
.preview-open:hover { color: var(--accent); border-bottom-color: currentColor; }
.quote { margin: 0.2rem 0 0.45rem; padding-left: 1rem; border-left: 2px solid var(--ink); font-size: 1.08rem; line-height: 1.5; }
.attrib { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-2); margin: 0; }
.cat-empty { font-family: var(--sans); font-size: 0.9rem; color: var(--muted); padding: 1.5rem 0; }

/* ---------------------------------------------------------------- Timeline: a case ledger */
.jump { margin: 0; }
.jump ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; font-family: var(--mono); font-size: 0.87rem; }
.jump a { color: var(--ink-2); text-decoration: none; }
.jump a:hover, .jump a.is-current { color: var(--ink); text-decoration: underline; text-underline-offset: 0.3em; }

/* The scrubber (built by site.js): a proportional axis of time, sticky while reading */
.scrubber {
  position: sticky; top: 0; z-index: 5; background: var(--paper);
  border-bottom: 1px solid var(--ink); margin: 0 0 0; padding: 0.6rem 0 0.4rem;
}
.scrubber-inner { display: grid; grid-template-columns: var(--side) minmax(0, 46rem); column-gap: var(--gap); align-items: end; }
.scrubber-label { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); padding-bottom: 0.15rem; }
.axis { position: relative; height: 2.6rem; }
.axis-line { position: absolute; left: 0; right: 0; bottom: 1.05rem; border-top: 1px solid var(--ink-2); }
.axis-year { position: absolute; bottom: 0; line-height: 1; font-family: var(--mono); font-size: 0.73rem; color: var(--muted); transform: translateX(-50%); }
.axis-year::before { content: ""; position: absolute; left: 50%; bottom: 0.8rem; height: 0.5rem; border-left: 1px solid var(--ink-2); }
.axis-year.first { transform: none; }
.axis-year.first::before { left: 0; }
.axis-tick {
  position: absolute; bottom: 1.05rem; width: 0.9rem; height: 1.4rem; margin-left: -0.45rem;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.axis-tick::before { content: ""; position: absolute; left: 50%; bottom: 0; height: 0.8rem; border-left: 2px solid var(--ink); transform: translateX(-50%); transition: height 0.15s; }
.axis-tick:hover::before, .axis-tick.is-current::before { height: 1.15rem; border-color: var(--accent); }
.axis-now { position: absolute; bottom: 0.45rem; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 6px solid var(--accent); margin-left: -5px; transition: left 0.2s ease-out; }
.p-timeline { --sticky-top: 4.5rem; }

.ledger-month { padding-top: 1.5rem; padding-bottom: 1rem; }
.ledger-month-head { font-size: 1.55rem; line-height: 1.1; margin: 0; }
.ledger-month-head .yr { display: block; font-family: var(--mono); font-size: 0.87rem; font-weight: 400; color: var(--muted); margin-top: 0.35rem; }
.ledger-entry {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); column-gap: 1.25rem;
  padding: 1.35rem 0.35rem 1.5rem; border-top: 1px solid var(--rule); scroll-margin-top: 5rem;
}
.ledger-entry:first-child { border-top: 0; padding-top: 0.35rem; }
.le-date { font-family: var(--serif); font-variant-numeric: lining-nums tabular-nums; line-height: 1; padding-top: 0.2rem; text-align: right; }
.le-day { font-size: 2.2rem; font-weight: 400; letter-spacing: -0.02em; display: block; white-space: nowrap; }
.le-day--nd { font-size: 1.15rem; font-style: italic; color: var(--muted); letter-spacing: 0; padding-top: 0.35rem; }
.le-circa { font-style: italic; font-size: 1rem; color: var(--muted); display: block; margin-bottom: 0.1rem; }
.le-body h3 { font-size: 1.3rem; margin: 0.1rem 0 0.2rem; }
.le-when { font-family: var(--mono); font-size: 0.83rem; color: var(--muted); margin: 0 0 0.6rem; }
.le-when .meta { font-family: var(--mono); font-size: 0.83rem; }
.le-body > p:not([class]) { font-size: 1.05rem; }

/* ---------------------------------------------------------------- Status Tracker */
.legend-list { margin: 0 0 1rem; display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); column-gap: 1.25rem; }
.legend-list dt, .legend-list dd, .legend-row dt, .legend-row dd { margin: 0; padding: 0.5rem 0; border-top: 1px solid var(--rule); }
.legend-row { display: contents; }
.legend-list > :first-child dt, .legend-list > :first-child dd { border-top: 0; }
.legend-list dd { font-size: 1rem; }
.claims .claim { scroll-margin-top: 1rem; }
.claim-ref { display: flex; align-items: baseline; margin: 0 0 0.6rem; }
.claim-status { margin: 0; }
.claim-status .st { font-size: 0.95rem; }
.claim-title { font-size: 1.5rem; margin: 0 0 0.5rem; }
.claim-summary { font-size: 1.15rem; line-height: 1.5; color: var(--ink-2); }
.positions { display: grid; grid-template-columns: 11rem minmax(0, 1fr); column-gap: 1.5rem; margin: 1.25rem 0 0.5rem; border-top: 1px solid var(--ink); }
.positions dt, .positions dd { margin: 0; padding: 0.75rem 0; border-bottom: 1px solid var(--rule); }
.positions dt { font-family: var(--sans); font-size: 0.85rem; font-weight: 500; color: var(--ink-2); padding-top: 0.9rem; }
.positions dd { font-size: 1.02rem; }

/* ---------------------------------------------------------------- Institutional Response: a multi-track chronology */
.track-toggles { border: 0; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.35rem; }
.track-toggles legend { font-family: var(--sans); font-size: 0.75rem; color: var(--muted); padding: 0; margin-bottom: 0.3rem; }
.track-toggle { font-family: var(--sans); font-size: 0.85rem; color: var(--ink-2); display: flex; align-items: center; gap: 0.5rem; cursor: pointer; }
.track-toggle input { accent-color: var(--ink); margin: 0; }
.lane-key { display: inline-block; width: 0.6rem; height: 0.6rem; border: 1.5px solid var(--ink); }
.lane-key--cornell { background: var(--ink); }
.lane-key--police { background: linear-gradient(135deg, var(--ink) 50%, transparent 50%); }
.lane-key--da { background: transparent; }
.lane-heads, .lanes { display: grid; grid-template-columns: repeat(3, 1.1rem); }
.lane-heads {
  font-family: var(--mono); font-size: 0.71rem; color: var(--muted);
  height: 3.6rem; align-items: end; padding-bottom: 0.3rem; border-bottom: 1px solid var(--ink);
}
.lane-heads span { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; justify-self: center; }
.chrono { list-style: none; margin: 0; padding: 0; }
.chrono-row {
  display: grid; grid-template-columns: 3.3rem 7.75rem minmax(0, 1fr); column-gap: 1rem;
  border-bottom: 1px solid var(--rule);
}
.lanes { align-self: stretch; }
.lane { border-left: 1px solid var(--rule); position: relative; }
.lane.on::after { content: ""; position: absolute; left: 50%; top: 1.3rem; width: 0.6rem; height: 0.6rem; transform: translateX(-60%); border: 1.5px solid var(--ink); background: var(--paper); }
.chrono-row[data-track="cornell"] .lane.on::after { background: var(--ink); }
.chrono-row[data-track="police"] .lane.on::after { background: linear-gradient(135deg, var(--ink) 50%, var(--paper) 50%); }
.chrono-date { font-family: var(--mono); font-size: 0.83rem; line-height: 1.45; color: var(--ink-2); padding: 1.1rem 0; }
.chrono-date .meta { font-family: var(--mono); font-size: 0.79rem; display: block; }
.chrono-body { padding: 1rem 0 1.1rem; }
.chrono-body > p:not([class]) { font-size: 1.02rem; margin-bottom: 0.5rem; }
.track-name { color: var(--ink); font-weight: 500; }
.institution h3:first-child { margin-top: 0; }
.explainer .defs--table dt { font-size: 0.9rem; }

/* ---------------------------------------------------------------- Methodology */
.toc { margin-top: 1.75rem; border-top: 1px solid var(--ink); padding-top: 0.75rem; }
.toc ol { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; font-family: var(--sans); font-size: 0.9rem; }
.toc li { break-inside: avoid; padding: 0.2rem 0; }
.toc a { color: var(--ink-2); text-decoration: none; }
.toc a:hover { color: var(--accent); text-decoration: underline; }
.toc-n { font-family: var(--mono); font-size: 0.81rem; color: var(--muted); display: inline-block; width: 1.6rem; }
.std-n { font-family: var(--mono); font-size: 0.83rem; color: var(--muted); margin: 0 0 0.35rem; }
.std { scroll-margin-top: 1rem; }
.std .sect-main > p { max-width: 38em; }

/* ---------------------------------------------------------------- Contact */
.contact-email { font-family: var(--mono); font-size: 1.17rem; margin-top: 1.5rem; }

/* ---------------------------------------------------------------- Footer */
.site-footer { border-top: 1px solid var(--ink); padding: 2.25rem 0 3rem; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; margin-bottom: 1.5rem; }
.sitemap ul {
  list-style: none; padding: 0; margin: 0.5rem 0 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 12rem)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 0.35rem 1.5rem;
  font-family: var(--sans); font-size: 0.9rem;
}
.sitemap a { color: var(--ink); text-decoration: none; }
.sitemap a:hover { text-decoration: underline; }
.sitemap .meta { margin: 0; }
.footer-mark { display: block; line-height: 0; flex: none; }
.footer-mark img { height: 2.5rem; width: auto; }
.site-footer .meta p { margin: 0.3rem 0; }

/* ---------------------------------------------------------------- Overlays (built by site.js) */
.overlay {
  border: 1px solid var(--ink); border-radius: 2px; padding: 0;
  background: var(--paper); color: var(--ink);
  width: min(42rem, calc(100vw - 2rem)); max-height: min(80vh, 44rem);
  box-shadow: 0 18px 40px -12px rgb(26 35 48 / 0.35);
}
.overlay::backdrop { background: rgb(26 35 48 / 0.32); }
.overlay-head { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--rule); }
.overlay-close {
  margin-left: auto; font: inherit; font-family: var(--sans); font-size: 0.8rem; color: var(--ink-2);
  background: none; border: 0; cursor: pointer; display: inline-flex; gap: 0.4rem; align-items: center;
}
.search-dialog { margin-top: 12vh; }
.search-input {
  flex: 1; font: inherit; font-family: var(--serif); font-size: 1.25rem; color: var(--ink);
  background: transparent; border: 0; padding: 0.2rem 0; min-width: 0;
}
.search-input:focus { outline: none; }
.search-input::-webkit-search-cancel-button, .search-input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.search-results { list-style: none; margin: 0; padding: 0.35rem 0; overflow-y: auto; max-height: calc(min(80vh, 44rem) - 7rem); }
.search-results li a {
  display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) auto; column-gap: 0.9rem; align-items: baseline;
  padding: 0.55rem 1rem; color: var(--ink); text-decoration: none;
}
.search-results li a[aria-selected="true"], .search-results li a:hover { background: var(--paper-2); }
.sr-kind { font-family: var(--mono); font-size: 0.77rem; color: var(--muted); }
.sr-title { font-size: 1rem; line-height: 1.35; }
.sr-title mark { background: var(--mark); color: inherit; padding: 0 1px; }
.sr-date { font-family: var(--mono); font-size: 0.77rem; color: var(--muted); white-space: nowrap; }
.sr-ref { display: block; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.search-foot { border-top: 1px solid var(--rule); padding: 0.5rem 1rem; font-family: var(--sans); font-size: 0.75rem; color: var(--muted); display: flex; gap: 1rem; flex-wrap: wrap; }
.search-empty { padding: 1rem; font-family: var(--sans); font-size: 0.9rem; color: var(--muted); }

.preview-body { padding: 1.1rem 1.25rem 1.25rem; overflow-y: auto; max-height: calc(min(80vh, 44rem) - 3.2rem); }
.preview-body h2 { font-size: 1.4rem; margin: 0.2rem 0 0.75rem; }
.preview-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.button {
  font: inherit; font-family: var(--sans); font-size: 0.85rem; text-decoration: none; cursor: pointer;
  background: var(--ink); color: var(--paper); border: 1px solid var(--ink); border-radius: 2px; padding: 0.45rem 0.9rem;
}
.button:hover { background: var(--accent); border-color: var(--accent); color: var(--paper); }
.button--quiet { background: transparent; color: var(--ink); }
.button--quiet:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); }

/* Source preview on hover or keyboard focus (pointer devices) */
.cite-pop {
  position: absolute; z-index: 60; max-width: 21rem;
  background: var(--paper); border: 1px solid var(--ink); border-radius: 2px;
  padding: 0.6rem 0.75rem 0.65rem; box-shadow: 0 10px 24px -10px rgb(26 35 48 / 0.35);
  font-family: var(--sans); font-size: 0.8rem; line-height: 1.45; color: var(--ink);
}
.cite-pop .cp-pub { font-weight: 500; }
.cite-pop .cp-title { font-family: var(--serif); font-size: 0.95rem; margin: 0.15rem 0 0.25rem; }
.cite-pop .cp-meta { font-family: var(--mono); font-size: 0.77rem; color: var(--muted); }

/* Reading progress: a 2px line along the top edge */
.progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 40; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* ---------------------------------------------------------------- Tablet and phone */
@media (max-width: 1080px) {
  :root { --side: 10.5rem; --gap: 2rem; }
}
@media (max-width: 820px) {
  body { font-size: 1.0625rem; }
  .wrap { padding: 0 1.25rem; }
  .navbar::before { left: 1.25rem; right: 1.25rem; }
  .sect { grid-template-columns: minmax(0, 1fr); row-gap: 0.6rem; padding: 1.75rem 0; }
  .sect-side:empty { display: none; }
  .page-head { padding-top: 1.25rem; }
  .folio { margin-top: 0; }
  .lede, .statement, .standing-text { font-size: 1.15rem; }
  .masthead { padding-top: 1.1rem; padding-bottom: 0.9rem; }
  .wordmark img { height: 2.5rem; }
  .parent-mark { height: 1rem; }
  .site-header nav ul { gap: 0.25rem 1rem; }
  .search-open { width: 100%; justify-content: space-between; }

  .defs--table, .defs--ruled, .positions, .legend-list { grid-template-columns: minmax(0, 1fr); }
  .defs--table dd, .defs--ruled dd, .positions dd { border-top: 0; padding-top: 0.1rem; }
  .defs--table dd + dd { grid-column: 1; }
  .positions dt { border-bottom: 0; padding-bottom: 0; }
  .legend-list dd { border-top: 0; padding-top: 0; }

  .idx-row { grid-template-columns: 2.25rem minmax(0, 1fr); row-gap: 0.2rem; }
  .idx-desc { grid-column: 2; }
  .brief li { grid-template-columns: minmax(0, 1fr); row-gap: 0.1rem; }

  .dir-head { display: none; }
  .dir-row summary { grid-template-columns: 2.25rem minmax(0, 1fr) 1.25rem; row-gap: 0.15rem; }
  .dir-standing, .dir-year { grid-column: 2; }
  .dir-year::before { content: "Class of "; font-family: var(--sans); }
  .filter-label { width: 100%; min-width: 0; margin-bottom: -0.1rem; }
  .dir-toggle { grid-column: 3; grid-row: 1; }
  .dir-record { padding-left: 0.25rem; }

  .cat-controls > summary {
    display: flex; justify-content: space-between; align-items: center; cursor: pointer;
    font-family: var(--sans); font-size: 0.9rem; padding: 0.55rem 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--rule);
    list-style: none;
  }
  .cat-controls > summary::-webkit-details-marker { display: none; }
  .cat-controls > summary::after { content: "+"; color: var(--muted); }
  .cat-controls[open] > summary::after { content: "\2212"; }
  .cat-form { padding-bottom: 0.5rem; }
  .cat-row { grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.4rem; }
  .cat-ref { flex-direction: row; gap: 0.75rem; align-items: baseline; }
  .cat-body { grid-column: 1 / -1; grid-row: 2; }
  .cat-actions { grid-column: 2; grid-row: 1; flex-direction: row; gap: 1rem; }
  .kbd-hint { display: none; }

  .scrubber-inner { grid-template-columns: minmax(0, 1fr); }
  .scrubber-label { display: none; }
  .p-timeline { --sticky-top: 0; }
  .ledger-month .sect-side { position: sticky; top: 3.1rem; z-index: 3; background: var(--paper); padding: 0.35rem 0; margin: -0.35rem 0 0; }
  .ledger-month-head { font-size: 1.3rem; }
  .ledger-month-head .yr { display: inline; margin-left: 0.4rem; }
  .ledger-entry { grid-template-columns: 3.9rem minmax(0, 1fr); column-gap: 0.8rem; padding-left: 0; padding-right: 0; }
  .le-day { font-size: 1.45rem; }
  .le-day--nd { font-size: 1rem; }

  .chrono-row { grid-template-columns: 3.3rem minmax(0, 1fr); }
  .chrono-date { grid-column: 2; padding: 0.9rem 0 0; }
  .chrono-body { grid-column: 2; padding-top: 0.2rem; }
  .lanes { grid-row: 1 / span 2; }
  .track-toggles { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; }
  .track-toggles legend { width: 100%; }

  .toc ol { columns: 1; }
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .story-grid .media { flex-basis: calc((100% - 1rem) / 2); }
  .footer-top { flex-direction: column; }
  .footer-mark img { height: 2rem; }
  .search-dialog { margin-top: 1rem; }
  .search-results li a { grid-template-columns: minmax(0, 1fr) auto; }
  .sr-kind { grid-column: 1 / -1; }
}

@media print {
  .site-header nav, .search-open, .filters, .cat-controls, .scrubber, .permalink, .preview-open, .track-toggles, .progress { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  .sect { grid-template-columns: 9rem 1fr; }
  a { color: inherit; }
}
