/* ---------------------------------------------------------------
   First Justice, then Peace
   System fonts only -- no webfont files, no external requests.
   See PRIVACY.md before adding any @import or url() to a third party.
   --------------------------------------------------------------- */

:root {
  color-scheme: light;

  /* Warm paper, not grey. Deliberately light -- this page is read by
     people deciding whether to show up, not by developers at night. */
  --bg:        #fdfcfa;
  --surface:   #ffffff;
  --sunk:      #f5f2ec;
  --text:      #24211d;
  --muted:     #5f5a53;
  --rule:      #e6e2db;

  --accent:    #b3261e;   /* 6.4:1 on --bg */
  --accent-dk: #8c1c16;
  --accent-fg: #ffffff;
  --alert-bg:  #fdf3f1;
  --alert-rule:#e8b4ae;

  --focus:     #1f5fbf;

  --measure: 34rem;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --serif: Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, serif;
}

/* No dark-mode override. The previous palette (#121211) read as too dark;
   the site is now light in every context. If a dark variant is wanted
   later, add it here as a *soft* dark (#22201d / #ece9e4), not near-black. */

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--serif);
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  line-height: 1.65;
}

.wrap { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }
.wrap-wide { width: min(100% - 2.5rem, 62rem); margin-inline: auto; }

h1, h2, h3, .kicker { font-family: var(--sans); line-height: 1.2; }
h1 { font-size: clamp(2rem, 1.4rem + 3vw, 3.25rem); letter-spacing: -0.02em; margin: 0 0 .5rem; }
h2 { font-size: clamp(1.35rem, 1.15rem + 1vw, 1.75rem); margin: 3rem 0 .75rem; letter-spacing: -0.01em; }
h3 { font-size: 1.05rem; margin: 1.75rem 0 .35rem; }
p, li { max-width: var(--measure); }
p { margin: 0 0 1rem; }

a { color: inherit; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 2px; }

.skip {
  position: absolute; left: -9999px;
  background: var(--surface); color: var(--text);
  padding: .6rem 1rem; z-index: 10;
}
.skip:focus { left: 1rem; top: 1rem; }

/* --- masthead --- */
.masthead { border-bottom: 1px solid var(--rule); padding: 1.25rem 0; background: var(--surface); }
.masthead .wrap-wide { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.wordmark { font-family: var(--sans); font-weight: 700; font-size: 1rem; letter-spacing: -0.01em; text-decoration: none; }
.masthead nav { display: flex; gap: 1.25rem; font-family: var(--sans); font-size: .875rem; flex-wrap: wrap; }

/* --- urgent call to action, sits above everything --- */
.callout {
  background: var(--alert-bg);
  border-bottom: 1px solid var(--alert-rule);
}
.callout .wrap { padding: 1.5rem 0 1.75rem; }
.callout .kicker { color: var(--accent-dk); }
.callout h2 {
  margin: 0 0 .5rem;
  font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
}
.callout p { color: #4a3d3a; }
.callout p:last-child { margin-bottom: 0; }

/* --- buttons --- */
.actions { display: flex; flex-wrap: wrap; gap: .75rem; margin: 1.25rem 0 0; }
.btn {
  display: inline-block;
  font-family: var(--sans); font-size: .9375rem; font-weight: 600;
  padding: .7rem 1.15rem; border-radius: 4px;
  text-decoration: none; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: var(--accent-fg); }
.btn-primary:hover { background: var(--accent-dk); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--rule); }
.btn-secondary:hover { border-color: var(--muted); }

/* --- hero --- */
.hero { padding: clamp(2.5rem, 6vw, 4.5rem) 0 2.5rem; }
.kicker {
  font-size: .75rem; font-weight: 600; letter-spacing: .12em;
  text-transform: uppercase; color: var(--accent); margin: 0 0 1rem;
}
.lede { font-size: 1.2em; color: var(--muted); max-width: var(--measure); }

/* --- the standing detail: when + where --- */
.standing {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--accent);
  border-radius: 4px;
  padding: 1.5rem 1.75rem;
  margin: 2.5rem 0;
  max-width: var(--measure);
}
.standing .kicker { margin-bottom: .5rem; }
.standing .when {
  font-family: var(--sans); font-weight: 700;
  font-size: clamp(1.35rem, 1.1rem + 1.2vw, 1.9rem);
  line-height: 1.15; letter-spacing: -0.02em; margin: 0;
}
.standing .where { font-family: var(--sans); color: var(--muted); margin: .4rem 0 0; font-size: 1rem; }

/* --- ways to help: small card grid --- */
.cards {
  list-style: none; padding: 0;
  margin: 1.5rem 0 0;
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.cards li { max-width: none; }
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  padding: 1.15rem 1.25rem;
  height: 100%;
}
.card h3 { margin: 0 0 .35rem; font-size: 1rem; }
.card p { margin: 0; font-size: .9375rem; color: var(--muted); max-width: none; }

/* --- images -------------------------------------------------------
   Every image is self-hosted and metadata-stripped (scripts/sanitize.sh).
   No identifiable faces without that person's explicit consent.
   ------------------------------------------------------------------ */
figure { margin: 2rem 0; }
figure img { display: block; width: 100%; height: auto; border-radius: 4px; }
figcaption {
  font-family: var(--sans); font-size: .8125rem; color: var(--muted);
  margin-top: .5rem; max-width: var(--measure);
}

/* Full-bleed photograph at the very top, above the call to action.
   Capped at its natural width so it is never upscaled and soft. */
.banner { margin: 0; background: var(--sunk); border-bottom: 1px solid var(--rule); }
.banner img { border-radius: 0; max-width: 1196px; margin-inline: auto; }

/* Honest placeholder: obviously empty, but holds its space so the layout
   does not move when a real photograph replaces it. Delete .photo-slot
   markup entirely once a photo is dropped in -- do not ship these. */
.photo-slot {
  aspect-ratio: 3 / 2;
  background: var(--sunk);
  border: 2px dashed var(--alert-rule);
  border-radius: 4px;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem; text-align: center;
}
.photo-slot span {
  font-family: var(--sans); font-size: .8125rem; line-height: 1.5;
  color: var(--muted); max-width: 24rem;
}
.photo-slot strong { display: block; color: var(--accent-dk); margin-bottom: .25rem; }

/* --- newsletter archive list --- */
.issues { list-style: none; padding: 0; margin: 1.5rem 0 0; max-width: var(--measure); }
.issues li { border-bottom: 1px solid var(--rule); max-width: none; }
.issues a {
  display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
  padding: .85rem 0; text-decoration: none; font-family: var(--sans);
}
.issues a:hover .title { text-decoration: underline; }
.issues .meta { color: var(--muted); font-size: .8125rem; white-space: nowrap; }

/* --- footer --- */
footer { border-top: 1px solid var(--rule); margin-top: 4rem; padding: 2rem 0 3rem; background: var(--surface); }
footer p { font-family: var(--sans); font-size: .8125rem; color: var(--muted); }

/* --- placeholder marker: remove these along with the TODOs --- */
.todo {
  background: #fff3cd; color: #5c4400; border-left: 3px solid #e0a800;
  padding: .5rem .75rem; font-family: var(--sans); font-size: .8125rem;
  display: block; margin: .5rem 0; max-width: var(--measure);
}

@media print {
  .callout, .masthead nav, .photo-slot, .todo { display: none; }
  body { background: #fff; font-size: 11pt; }
}

/* --- urgent variant of the when/where box, used inside .callout --- */
.standing-urgent { background: var(--surface); border-left-color: var(--accent); }
.standing-urgent .when { font-size: clamp(1.25rem, 1rem + 1.1vw, 1.7rem); }
.standing-urgent time { font-style: normal; }

.callout .forward {
  font-family: var(--sans); font-size: .875rem; font-weight: 600;
  color: var(--accent-dk); margin: 1.25rem 0 0;
}

/* --- know your rights: dense reference list, tighter than body prose --- */
#rights ul { padding-left: 1.15rem; margin: 0 0 1.25rem; }
#rights li { margin-bottom: .4rem; }
#rights h3 { margin-top: 1.5rem; }
#rights a { color: var(--accent-dk); }

/* The site has no contact section on purpose -- see the footer. */
footer .reach { font-size: .9375rem; color: var(--text); max-width: var(--measure); margin-bottom: 1.25rem; }

/* --- who we are: sourced findings, same dense treatment as #rights --- */
#about ul { padding-left: 1.15rem; margin: 0 0 1.25rem; }
#about li { margin-bottom: .5rem; }
#about h3 { margin-top: 1.5rem; }
#about a { color: var(--accent-dk); }
#about code { font-size: .875em; background: var(--sunk); padding: .1em .3em; border-radius: 3px; }

#about ol { padding-left: 1.35rem; margin: 0 0 1.25rem; }
#about ol li { margin-bottom: .75rem; }
#about figure img { border: 1px solid var(--rule); }

.issues .empty { padding: .85rem 0; color: var(--muted); font-family: var(--sans); font-size: .9375rem; border-bottom: none; }
/* .todo is retained for future placeholder work; no page uses it right now. */

/* ---------------------------------------------------------------
   Boycott list. Generated pages -- see scripts/build-boycott.py.

   Master-detail with no JavaScript: every name is a link to a
   fragment, and :target reveals the matching panel. That keeps the
   no-JS rule, works with script disabled, survives the back button,
   and gives every entry a link you can send someone.
   --------------------------------------------------------------- */

.bq h1 { margin-bottom: .75rem; }
/* Inline SVG, so it inherits the heading's size. The hairline keeps the white
   band of either flag from bleeding into the page background. */
/* Takes its colour from the heading, so it stays in the site's palette
   rather than introducing a new one. */
.bq-dead { margin-left: .35em; font-size: .9em; }
.bq-detail h3 .bq-dead { font-size: .8em; }
.bq-deceased {
  font-family: var(--sans);
  font-size: .8125rem;
  color: var(--muted);
  font-style: italic;
  margin: .25rem 0 .75rem;
}

.bq-mark {
  color: var(--accent);
  margin-left: .1em;
  /* Sits high against a cap-height heading otherwise. */
  font-size: .82em;
  line-height: 1;
}

.bq-flag {
  height: .62em;
  width: auto;
  vertical-align: baseline;
  margin-left: .12em;
  border: 1px solid var(--rule);
  border-radius: 2px;
}

.bq-statement {
  font-size: 1.0625rem;
  max-width: var(--measure);
  border-left: 3px solid var(--accent);
  padding-left: 1rem;
  margin-bottom: 2rem;
}

/* One labelled row per filter: Locality, Type, Alignment. */
/* The three filter rows share ONE grid so their pills line up with each
   other. Each row used to be its own flex line, so a row started wherever
   its own label happened to end -- "Locality" and "Type" are different
   lengths, so the three pill groups began at three different places.
   display: contents lets each .bq-row hand its two children straight to
   the shared grid. The pill column is sized to the widest group, every
   group is centred inside it, and the whole block is centred on the page. */
.bq-rows {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  column-gap: .75rem;
  row-gap: .5rem;
  align-items: baseline;
  margin-bottom: 1.75rem;
}
.bq-row { display: contents; }
.bq-row-label {
  font-family: var(--sans);
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
  text-align: right;
  padding-top: .45rem;
}

.bq-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .25rem;
  font-family: var(--sans);
  font-size: .9375rem;
  margin-bottom: 0;
}
.bq-tabs a {
  padding: .4rem .85rem;
  border: 1px solid var(--rule);
  border-radius: 999px;
  text-decoration: none;
  background: var(--surface);
  color: var(--muted);
}
.bq-tabs a:hover { border-color: var(--accent); color: var(--text); }
.bq-tabs a[aria-current="page"] {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-fg);
  font-weight: 600;
}

.bq-split {
  /* One height for both columns, sized to fit the longest common record
     (Aaron Brockett, six entries). Fixing it is what stops the page jumping:
     every detail panel then sits at the same place in the document, so
     :target has nothing to scroll to. */
  --bq-h: 34rem;
  --bq-names-w: 18rem;
  --bq-gap: 2rem;
  position: relative;
  display: grid;
  grid-template-columns: var(--bq-names-w) 1fr;
  gap: var(--bq-gap);
  align-items: start;
}

.bq-names ol {
  list-style: none;
  margin: 0;
  padding: 0;
  height: var(--bq-h);
  overflow-y: auto;
  border: 1px solid var(--rule);
  border-radius: 4px;
  background: var(--surface);
}
.bq-names li { max-width: none; border-bottom: 1px solid var(--rule); }
.bq-names li:last-child { border-bottom: none; }
.bq-names a {
  display: block;
  padding: .5rem .75rem;
  font-family: var(--sans);
  font-size: .9375rem;
  text-decoration: none;
}
.bq-names a:hover { background: var(--sunk); text-decoration: underline; }

/* The selected name. :target is on the <li>, so this actually matches --
   the old `.bq-names a:target` never could, because the fragment pointed at
   the record, not the link. */
.bq-names li:target > a {
  background: var(--sunk);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}

.bq-pane {
  /* Deliberately NOT positioned: it is an empty backdrop, and the record is
     absolutely positioned over it. A positioned pane paints above the record
     -- it comes later in the DOM -- and the box looks empty. */
  height: var(--bq-h);
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
  overflow: hidden;
}

/* The record lives inside its list item but is drawn over the right-hand
   column, exactly covering the empty pane. */
.bq-detail {
  position: absolute;
  top: 0;
  left: calc(var(--bq-names-w) + var(--bq-gap));
  right: 0;
  height: var(--bq-h);
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  margin: 0;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 4px;
}

/* Hidden until its name is clicked. The record is opaque and covers the empty
   pane, so nothing has to hide the prompt -- which is why there is no :has()
   here. That selector had to be re-tested against every record in the list on
   each click, 671 of them on International / Humans, and stalled the page. */
.bq-detail { display: none; }
.bq-names li:target .bq-detail { display: block; }

.bq-detail h3 { margin-top: 0; font-size: 1.25rem; }
.bq-verdict {
  font-family: var(--sans);
  font-size: .9375rem;
  background: var(--sunk);
  padding: .6rem .8rem;
  border-radius: 4px;
}

.bq-entries { margin: 1rem 0 0; }
.bq-entries dt {
  font-family: var(--sans);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--accent-dk);
  margin-top: 1rem;
}
.bq-entries dd { margin: .15rem 0 0; max-width: var(--measure); }
.bq-src { color: var(--muted); font-size: .8125rem; font-family: var(--sans); }

.bq-empty { color: var(--muted); font-family: var(--sans); }

@media (max-width: 40rem) {
  /* Stacked: the record opens under its name instead of beside it. */
  .bq-split { grid-template-columns: 1fr; gap: 1rem; --bq-h: 22rem; }
  .bq-names ol { height: auto; max-height: 26rem; }
  .bq-pane { display: none; }
  .bq-detail {
    position: static;
    height: auto;
    max-height: 18rem;
    border: none;
    border-top: 1px solid var(--rule);
    border-radius: 0;
    padding: .75rem 1rem;
  }
}

.bq-disclaimer,
.cal-disclaimer {
  font-family: var(--sans);
  font-size: .9375rem;
  line-height: 1.55;
  /* Full width of the wrapper, so the right edge lines up with the masthead
     nav. The base rule gives every p and li a reading measure, so the box AND
     everything inside it must opt out or the text stops short of the border. */
  max-width: none;
  width: 100%;
  margin-top: 2.5rem;
  background: var(--alert-bg);
  border: 1px solid var(--alert-rule);
  border-radius: 4px;
  padding: .9rem 1.1rem;
  text-align: center;
}
.bq-disclaimer p,
.bq-disclaimer li,
.cal-disclaimer p { max-width: none; }
.bq-disclaimer p,
.cal-disclaimer p { margin: 0 0 .5rem; }
.bq-disclaimer p:last-child,
.cal-disclaimer p:last-child { margin-bottom: 0; }
/* The closing two lines read as one statement -- no gap between them. */
.bq-disclaimer p.bq-d-tight,
.cal-disclaimer p.cal-d-tight { margin-bottom: 0; }
/* Markers inside, so the numbered lines centre with everything else. */
.bq-disclaimer ol {
  margin: 0 0 .5rem;
  padding-left: 0;
  list-style-position: inside;
}
.bq-disclaimer li { margin-bottom: .15rem; }

.bq-testimony { font-style: italic; }
.bq-entries dd a.bq-src { color: var(--accent-dk); }

/* Under the standing time: the hours are a focal point, not a rule. */
.when-note {
  font-family: var(--sans);
  font-size: .875rem;
  line-height: 1.5;
  color: var(--muted);
  margin: .5rem 0 0;
}

@media (max-width: 34rem) {
  /* Stacked: label on its own line, pills on ONE line under it. The pills
     shrink rather than wrapping, because a filter group broken across two
     lines reads as two groups. "Silence is Complicity" is what sets the
     floor here -- everything is sized so that row fits. */
  .bq-rows {
    grid-template-columns: 1fr;
    row-gap: .15rem;
    justify-content: stretch;
  }
  .bq-row-label { padding-top: .5rem; text-align: center; }
  .bq-tabs {
    flex-wrap: nowrap;
    gap: .2rem;
    /* Scales with the viewport so the widest row -- Alignment, which carries
       "Silence is Complicity" -- fits without wrapping on a normal phone. */
    font-size: clamp(.6875rem, .28rem + 1.55vw, .8125rem);
    /* A grid item will not shrink below its content without this, and the
       row would push the whole page sideways instead of scrolling itself. */
    min-width: 0;
    overflow-x: auto;
    /* Below roughly 340px the row has to scroll. Keep the pills off the
       container edge so a half-cut pill reads as "there is more". */
    scroll-padding-inline: .25rem;
  }
  /* Padding in em, so it shrinks with the font rather than eating the gain. */
  .bq-tabs a { padding: .35em .6em; white-space: nowrap; }
}

/* Who someone is, before the dated acts. */
.bq-blurb {
  font-family: var(--sans);
  font-size: .9375rem;
  color: var(--muted);
  max-width: var(--measure);
  margin: 0 0 .75rem;
}
.bq-site { color: var(--accent-dk); white-space: nowrap; }