/*
Theme Name:  Sacrificed
Theme URI:   https://sacrificed.us
Author:      The Duumvirati
Description: The public record behind Sacrificed to the Second Amendment. Flat, factual, built to be read on a phone.
Version:     0.1.0
License:     GPL-2.0-or-later
Text Domain: sacrificed
*/

/* ---------------------------------------------------------------- tokens
   Light is the complete set. Dark redefines tokens only, never components,
   and is declared twice so both the OS default and an explicit toggle win. */
:root {
  --paper:      #E4E6E9;
  --surface:    #F6F7F8;
  --surface-2:  #EDEFF1;
  --ink:        #14181F;
  --ink-2:      #3D444F;
  --muted:      #626B78;
  --rule:       #C6CAD0;
  --rule-soft:  #D6DADF;
  --signal:     #C50008;
  --hurt:       #9E5200;
  /* Bars, not text. A graphic needs 3:1 against the page where text needs
     4.5:1, and the orange dark enough to read as a word on light paper reads
     as brown when it is a bar beside a red one. */
  --hurt-bar:   #C86400;
  --flag:       #7A5C15;
  --focus:      #1B4F8A;

  /* Rules on the strip chart. Pale here because the light theme's bars are a
     dark red and the rules have to be legible ACROSS a bar, which is where
     the counting happens. Defined on bare :root as well as in both dark
     blocks: a value that exists only inside a media query is undefined in the
     other theme, and var() with no fallback invalidates the whole gradient,
     so the gridlines simply vanished in light mode. */
  --strip-rule-minor: rgba(255, 255, 255, 0.32);
  --strip-rule-major: rgba(255, 255, 255, 0.62);

  --measure:    62ch;
  --gap:        16px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --paper:      #0E1116;
    --surface:    #161B22;
    --surface-2:  #1C222B;
    --ink:        #E6E9ED;
    --ink-2:      #B4BBC5;
    --muted:      #7F8896;
    --rule:       #2A313B;
    --rule-soft:  #222831;
    --signal:     #F5333A;
    --hurt:       #E8862E;
    --hurt-bar:   #E8862E;
    --flag:       #C9A227;
    --focus:      #6AA9E9;

    --strip-rule-minor: rgba(6, 8, 11, 0.30);
    --strip-rule-major: rgba(6, 8, 11, 0.58);
  }
}

:root[data-theme="dark"] {
  --paper:      #0E1116;
  --surface:    #161B22;
  --surface-2:  #1C222B;
  --ink:        #E6E9ED;
  --ink-2:      #B4BBC5;
  --muted:      #7F8896;
  --rule:       #2A313B;
  --rule-soft:  #222831;
  --signal:     #F5333A;
  --hurt:       #E8862E;
  --hurt-bar:   #E8862E;
  --flag:       #C9A227;
  --focus:      #6AA9E9;

  --strip-rule-minor: rgba(6, 8, 11, 0.30);
  --strip-rule-major: rgba(6, 8, 11, 0.58);
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: "Archivo", "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

a { color: inherit; }

a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 10px 16px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 20px; }
.wrap-narrow { max-width: 760px; margin: 0 auto; padding: 0 20px; }

section { padding: 32px 0; border-top: 1px solid var(--rule); }
section.first { border-top: 0; }

h2.eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 16px;
}

p { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

.prose {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  line-height: 1.6;
  max-width: var(--measure);
  color: var(--ink-2);
  text-wrap: pretty;
}

.mono {
  font-family: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

.note {
  font-size: 12.5px;
  color: var(--muted);
  margin-top: 12px;
  max-width: 70ch;
  text-wrap: pretty;
}

/* ---------------------------------------------------------------- masthead */
.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 0 14px;
  border-bottom: 2px solid var(--ink);
}

.wordmark {
  margin: 0;
  font-size: 15px;
  line-height: 1.15;
}
.wordmark a {
  text-decoration: none;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 8px;
}
/* The name carries the site's position; the counter below it carries the
   evidence. Weighting the first word lets the lockup hold at any width
   without the qualifier stranding a word on its own line. */
.mark-strong {
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.mark-rest {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}

.masthead nav {
  display: flex;
  gap: 16px;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.masthead nav a { text-decoration: none; }
.masthead nav a:hover { color: var(--signal); }

/* ---------------------------------------------------------------- counter */
.counter { padding: 28px 0; }

.counter-row {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.numeral {
  font-family: "Archivo Black", "Archivo", sans-serif;
  font-size: clamp(140px, 34vw, 300px);
  line-height: 0.78;
  color: var(--signal);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.counter-say { flex: 1 1 260px; min-width: 0; }

.counter-say .lede {
  font-size: clamp(21px, 3.4vw, 30px);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 10px;
  text-wrap: balance;
}

/* The rate, under the lede.
   The counter on its own reads as "it has been a whole day", which is the
   opposite of what the record says. Most people believe mass shootings are
   terrible and rare; the number that corrects them is how often one happens,
   and it belongs next to the counter rather than fifth in a row of boxes. */
.counter-say .rate {
  font-size: 17px;
  line-height: 1.35;
  color: var(--ink-2);
  margin: 10px 0 0;
  max-width: 34ch;
  text-wrap: pretty;
}

.counter-say .sub { font-size: 14px; color: var(--muted); margin: 0; }

.definition {
  margin-top: 22px;
  padding: 14px 16px;
  background: var(--surface);
  border-left: 3px solid var(--signal);
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 68ch;
  text-wrap: pretty;
}
.definition b { color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- strip */
.strip-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.strip-read { font-size: 12px; color: var(--muted); min-height: 18px; }
.strip-read b { color: var(--ink); font-weight: 600; }

.strip {
  position: relative;
  display: flex;
  align-items: flex-end;
  /* Closed up for the trailing-year series. At 365 bars in a 900px column a
     1px gap is wider than the bar beside it, and the chart reads as gaps
     rather than as days. Zero days still separate themselves: they draw as a
     flat grey 2px line at the baseline. */
  gap: var(--strip-gap, 1px);
  /* Height is set inline, from the data. The two halves share one scale, so
     each is its own peak times the same pixels-per-person, and no fixed value
     here could be right. */
  padding: 0;
  margin: 0;
  list-style: none;
  border-bottom: 1px solid var(--rule);
}

/* One hairline per incident, drawn OVER the bars rather than behind them.
   Behind is useless: the bars are opaque and one pixel apart, so there is
   nothing to read a height against. Over them, a bar of five crosses five
   lines and can simply be counted. Every fifth is stronger so the eye can
   group them without counting from the bottom each time. */
.strip::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* Spacing is an absolute length now, not a fraction of the element, because
     the same five people have to measure the same on both halves and the two
     halves are different heights. */
  /* Ten people, and fifty. One rule per person would be a solid block at this
     scale, which is the price of drawing a person as a pixel. */
  --strip-rule-step: 10px;
  --strip-major: calc(var(--strip-rule-step) * 5);
  background-image:
    repeating-linear-gradient(to top,
      var(--strip-rule-major, rgba(128,128,128,.5)) 0, var(--strip-rule-major, rgba(128,128,128,.5)) 1px,
      transparent 1px, transparent var(--strip-major)),
    repeating-linear-gradient(to top,
      var(--strip-rule-minor, rgba(128,128,128,.25)) 0, var(--strip-rule-minor, rgba(128,128,128,.25)) 1px,
      transparent 1px, transparent var(--strip-rule-step));
}
/* A stack, bottom up. Column direction puts the FIRST child on top, which is
   how the deaths come to sit above the injuries; flex-end pins the pair to the
   baseline. */
.strip li {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.tick {
  width: 100%;
  position: relative;
  z-index: 1;
  /* Longhand, not the `background` shorthand. A shorthand whose value comes
     from a custom property does not re-resolve when that property changes, so
     with the shorthand every tick stayed on the dark theme's red after a
     switch to light while the numeral beside it changed correctly. */
  background-color: var(--signal);
  min-height: 0;
  transition: background-color 90ms linear;
}
.tick.dead { background-color: var(--signal); }
.tick.hurt { background-color: var(--hurt-bar); }

/* One pixel, because one pixel is one person everywhere else on this chart and
   a two-pixel mark for a day when nobody was shot would read as two people. */
.tick.zero { background-color: var(--rule); height: 1px; min-height: 1px; }
.strip li:hover .tick,
.strip li:focus-within .tick { background-color: var(--ink); }

.strip-axis {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* ---------------------------------------------------------------- stats */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
}

/* A container, so each figure can be sized against ITS OWN column rather than
   against the viewport. The two rows hold five and six boxes and the columns
   are not the same width, so one px size that fits both does not exist. */
.stat {
  background: var(--surface);
  padding: 14px 16px;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  /* Figures first, aligned across the row. They were pinned to the bottom
     while they were set at different sizes; now they are uniform, and it is
     the LABELS that vary, because "injured in mass shootings" takes two lines
     where "records begin" takes one. Aligning from the top keeps every number
     on one line and lets the labels run on beneath them. */
  justify-content: flex-start;
}

.stat .n {
  font-family: "IBM Plex Mono", monospace;
  /* One size for every figure. Size used to carry magnitude, which put the
     dead in smaller type than the wounded; colour carries the distinction now
     and says the same thing without ranking anybody. The container unit is
     only a guard, so a very narrow column cannot overflow. */
  font-size: min(26px, 24cqi);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  display: block;
}

/* The same red and orange as the register, the incident pages and the chart.
   --hurt, not --hurt-bar: this is text and has to clear 4.5:1, where a bar
   only has to clear 3:1. */
.stat.dead .n { color: var(--signal); }
.stat.hurt .n { color: var(--hurt); }

.stat .k {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 5px;
  display: block;
}

/* ---------------------------------------------------------------- register */
.register { list-style: none; margin: 0; padding: 0; }

.entry {
  display: grid;
  grid-template-columns: 92px 1fr;
  gap: 4px 18px;
  padding: 14px 0;
  border-top: 1px solid var(--rule-soft);
}
.entry:first-child { border-top: 1px solid var(--rule); }

.entry-date {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--muted);
  padding-top: 3px;
  white-space: nowrap;
}

.entry-place { font-size: 18px; font-weight: 600; margin: 0 0 4px; line-height: 1.25; }
.entry-place a { text-decoration: none; }
.entry-place a:hover { color: var(--signal); }
.entry-place .st { color: var(--muted); font-weight: 400; }

.toll {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.toll .killed { color: var(--signal); font-weight: 600; }
.toll .hurt   { color: var(--hurt);   font-weight: 600; }
.toll .where { color: var(--muted); }
.toll .disagree { color: var(--flag); }

.cites { display: flex; flex-wrap: wrap; gap: 6px; }

.cite {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11.5px;
  text-decoration: none;
  color: var(--ink-2);
  background: var(--surface-2);
  border: 1px solid var(--rule-soft);
  padding: 3px 8px;
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cite:hover { border-color: var(--signal); color: var(--signal); }
.cite.arch { color: var(--muted); font-style: italic; }
.cite.none {
  color: var(--muted);
  font-style: italic;
  background: none;
  border-style: dashed;
}

/* ---------------------------------------------------------------- single */
.incident-head { padding: 28px 0 20px; border-bottom: 1px solid var(--rule); }

.incident-head .kicker {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.incident-head h1 {
  font-size: clamp(28px, 5.4vw, 44px);
  line-height: 1.08;
  margin: 0 0 12px;
  text-wrap: balance;
  letter-spacing: -0.015em;
}

.figures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 1px;
  background: var(--rule-soft);
  border: 1px solid var(--rule-soft);
  margin: 20px 0;
}

.figure { background: var(--surface); padding: 14px 16px; }
.figure .n {
  font-family: "IBM Plex Mono", monospace;
  font-size: 30px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  display: block;
}
.figure.dead .n { color: var(--signal); }
.figure.hurt .n { color: var(--hurt); }
.figure .k {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
  display: block;
}

.facts { list-style: none; margin: 0; padding: 0; }
.facts li {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--rule-soft);
  font-size: 14.5px;
}
.facts li:first-child { border-top: 0; }
.facts .label {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 3px;
}

.coverage { list-style: none; margin: 0; padding: 0; }
.coverage li { border-top: 1px solid var(--rule-soft); }
.coverage li:first-child { border-top: 1px solid var(--rule); }
.coverage a {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 14px;
  padding: 12px 0;
  text-decoration: none;
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
}
.coverage a:hover { color: var(--signal); }
.coverage .go { color: var(--muted); font-size: 12px; white-space: nowrap; }
.coverage a:hover .go { color: var(--signal); }

.caution {
  padding: 12px 14px;
  background: var(--surface);
  border-left: 3px solid var(--flag);
  font-size: 14px;
  color: var(--ink-2);
  margin: 16px 0;
  max-width: var(--measure);
  text-wrap: pretty;
}

.pager {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 22px 0;
  border-top: 1px solid var(--rule);
  font-size: 13.5px;
}
.pager a { text-decoration: none; color: var(--ink-2); max-width: 46%; }
.pager a:hover { color: var(--signal); }
.pager .dir {
  display: block;
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 3px;
}

/* ---------------------------------------------------------------- table */
.table-scroll { overflow-x: auto; }

.years { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.years caption { text-align: left; font-size: 12px; color: var(--muted); padding-bottom: 8px; }
.years th, .years td {
  text-align: right;
  padding: 6px 10px;
  border-bottom: 1px solid var(--rule-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
}
.years th {
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--rule);
}
.years th:first-child, .years td:first-child { text-align: left; }
.years .bar-cell { width: 40%; padding-left: 14px; }
.years .bar { height: 8px; background: var(--signal); display: block; min-width: 1px; }

/* ---------------------------------------------------------------- nav */
.pagination {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 24px 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
}
.pagination .page-numbers {
  padding: 5px 10px;
  border: 1px solid var(--rule-soft);
  background: var(--surface);
  text-decoration: none;
}
.pagination .page-numbers.current { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.pagination .page-numbers:hover { border-color: var(--signal); color: var(--signal); }
.pagination .page-numbers.current:hover { color: var(--paper); }

/* ---------------------------------------------------------------- footer */
.site-footer {
  border-top: 2px solid var(--ink);
  padding: 24px 0 48px;
  font-size: 13px;
  color: var(--muted);
  margin-top: 24px;
}
.site-footer h3 {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin: 0 0 8px;
}
.site-footer a { color: var(--ink-2); }

.foot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
}

/* ---------------------------------------------------------------- narrow */
@media (max-width: 560px) {
  .entry { grid-template-columns: 1fr; gap: 6px; }
  .entry-date { padding-top: 0; }
  .facts li { grid-template-columns: 1fr; gap: 2px; }
  .facts .label { padding-top: 0; }
  section { padding: 26px 0; }
  .coverage a { flex-direction: column; gap: 3px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ---------------------------------------------------------------- map */
.map-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 20px;
  margin-bottom: 12px;
}

.map-year {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1 1 280px;
  min-width: 0;
}
.map-year span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  min-width: 15ch;
}
.map-year input[type="range"] { flex: 1 1 auto; min-width: 0; accent-color: var(--signal); }

.map-read {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-2);
  min-height: 18px;
  white-space: nowrap;
}

/* The canvas sits exactly over the outline, so the two must share a box and
   the same aspect ratio. Height comes from the ratio, never from a fixed px. */
.map-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 975 / 610;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
}
.map-frame svg,
.map-frame canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.map-frame canvas { z-index: 1; }

.map-states path {
  fill: var(--surface-2);
  stroke: var(--rule);
  stroke-width: 0.7;
  vector-effect: non-scaling-stroke;
}

/* ---------------------------------------------------------------- prose columns
   Covenant Theme and layout rule 3: prose fills the column it is given.
   Consecutive paragraphs run side by side where the container is wider than
   one comfortable measure, and stack at the mobile breakpoint. The fix for a
   1080px container is two 62ch columns, never one stretched to twice the
   width, because the measure is what makes it readable. */
.prose-cols {
  columns: 2;
  column-gap: 48px;
  max-width: none;
}
.prose-cols > * { break-inside: avoid; }
.prose-cols > *:first-child { margin-top: 0; }

/* One paragraph has nothing to sit beside, so it keeps its measure rather
   than being split down the middle into two half-height columns. */
.prose-cols:has(> :only-child) { columns: 1; max-width: var(--measure); }

@media (max-width: 720px) {
  .prose-cols { columns: 1; max-width: var(--measure); }
}

/* ---------------------------------------------------------------- filters */
.filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 16px;
  padding: 16px;
  background: var(--surface);
  border: 1px solid var(--rule-soft);
  margin-bottom: 16px;
}
.filter { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.filter-wide { grid-column: span 2; }
.filter label {
  font-size: 10.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.filter input,
.filter select,
.filter button {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  padding: 7px 9px;
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  min-width: 0;
  width: 100%;
}
.filter input:focus-visible,
.filter select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.filter select:disabled { color: var(--muted); }
.filter-reset { justify-content: flex-end; }
.filter button { cursor: pointer; background: var(--surface-2); }
.filter button:hover { border-color: var(--signal); color: var(--signal); }

.record-count {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12.5px;
  color: var(--ink-2);
  margin: 0 0 4px;
}

.entry-headline {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15.5px;
  line-height: 1.4;
  color: var(--ink-2);
  margin: 0 0 8px;
  max-width: 68ch;
  text-wrap: pretty;
}

.record-more { padding: 20px 0; }
.record-more button {
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
  padding: 9px 18px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  cursor: pointer;
}
.record-more button:hover { border-color: var(--signal); color: var(--signal); }

@media (max-width: 560px) {
  .filter-wide { grid-column: span 1; }
}

.entry-headline a { text-decoration: none; }
.entry-headline a:hover { color: var(--signal); text-decoration: underline; }
.cite.more { background: none; border-style: dashed; color: var(--muted); }
.cite.more:hover { border-color: var(--signal); color: var(--signal); }

/* ---------------------------------------------------------------- counter split
   The number and the definition that qualifies it belong on one screen: a
   figure this large with its meaning pushed below the fold invites the reader
   to supply their own. Side by side above the mobile breakpoint, stacked below
   it, per Covenant Theme and layout rule on filling the column. */
.counter-split {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 24px 44px;
  align-items: center;
}
.counter-split .definition { margin-top: 0; max-width: none; }
.counter-split .counter-row { gap: 20px; }

@media (max-width: 900px) {
  .counter-split { grid-template-columns: 1fr; }
  .counter-split .definition { max-width: 68ch; }
}

/* ---------------------------------------------------------------- corrections */
.correction-form { display: flex; flex-direction: column; gap: 18px; max-width: 62ch; }
.correction-form .field { display: flex; flex-direction: column; gap: 6px; }
.correction-form label {
  font-size: 11px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.correction-form input,
.correction-form select,
.correction-form textarea {
  font-family: "IBM Plex Mono", monospace;
  font-size: 14px;
  padding: 10px 11px;
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 0;
  width: 100%;
}
.correction-form textarea { resize: vertical; line-height: 1.5; }
.correction-form input:focus-visible,
.correction-form select:focus-visible,
.correction-form textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.correction-form .hint { font-size: 12.5px; color: var(--muted); margin: 0; text-wrap: pretty; }
.correction-form button {
  font-family: "Archivo", sans-serif;
  font-size: 15px;
  font-weight: 600;
  padding: 12px 22px;
  background: var(--signal);
  color: #fff;
  border: 0;
  cursor: pointer;
  align-self: flex-start;
}
.correction-form button:hover { filter: brightness(1.08); }

/* Off-screen rather than display:none, because some bots skip anything with
   display:none and fill in everything else. */
.field-trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.correction-about {
  font-size: 13.5px;
  color: var(--ink-2);
  padding: 10px 12px;
  background: var(--surface);
  border-left: 3px solid var(--signal);
  margin: 0;
}

.notice {
  padding: 12px 14px;
  font-size: 14.5px;
  border-left: 3px solid var(--rule);
  background: var(--surface);
  margin: 0;
  max-width: 62ch;
}
.notice-ok { border-left-color: var(--signal); color: var(--ink); }
.notice-bad { border-left-color: var(--flag); color: var(--ink-2); }

.report-problem {
  font-size: 13px;
  color: var(--muted);
  padding: 14px 0 0;
}
.report-problem a { color: var(--ink-2); }
.report-problem a:hover { color: var(--signal); }