/* Site styles — layout only; all color/type decisions live in tokens.css */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 16.5px; line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 22px; }

/* header / nav — the scarlet band is the one loud note; everything below is quiet */
.top { border-top: 3px solid var(--accent); border-bottom: 1px solid var(--rule); background: var(--bg-2); }
.top .wrap { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-top: 14px; padding-bottom: 14px; }
.brand {
  font-family: var(--sans); font-size: 20px; font-weight: 800;
  letter-spacing: -.02em; text-transform: uppercase;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.brand b { color: var(--accent-ink); font-weight: 800; }
nav.main { display: flex; gap: 0; flex-wrap: wrap; margin-inline-start: auto; }
nav.main a {
  color: var(--ink-2); text-decoration: none; font-size: 13px;
  padding: 6px 9px; border-radius: 3px; letter-spacing: .01em;
}
nav.main a:hover { color: var(--ink); background: var(--card); }
nav.main a[aria-current="page"] { color: var(--ink); background: var(--card); }
.emblem { width: 17px; height: 20px; margin-inline-end: 8px; vertical-align: -3px; }
.langs { display: flex; gap: 2px; }
.langs a {
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-decoration: none;
  color: var(--ink-3); padding: 4px 7px; border-radius: 3px; border: 1px solid transparent;
}
.langs a:hover { color: var(--ink); }
.langs a[aria-current="true"] { color: var(--gold); border-color: var(--gold-soft); background: var(--gold-soft); }

/* masthead */
.mast { padding: 52px 0 34px; border-bottom: 1px solid var(--rule); }
.mast h1 { margin: 0 0 10px; font-family: var(--serif); font-weight: 400; font-size: 38px; line-height: 1.15; letter-spacing: -.01em; }
.mast .lede { color: var(--ink-2); max-width: var(--measure); margin: 0; font-size: 18px; }
.rule-line {
  margin-top: 22px; padding: 12px 16px; border-inline-start: 3px solid var(--accent);
  background: var(--card); max-width: var(--measure); font-size: 15.5px;
}
.dedication { margin-top: 18px; color: var(--gold); font-family: var(--serif); font-style: italic; font-size: 15px; }

section { padding: 40px 0; }
section + section { border-top: 1px solid var(--rule-2); }
h2 { font-family: var(--serif); font-weight: 400; font-size: 25px; margin: 0 0 8px; }
h3 { font-size: 17px; margin: 0 0 6px; }
p { max-width: var(--measure); }
.muted { color: var(--ink-2); }
.small { font-size: 13.5px; }
a { color: var(--ink); }
a:hover { color: var(--gold); }

/* cards / grids */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 18px; }
.card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 4px;
  padding: 18px; text-decoration: none; color: var(--ink); display: block;
}
a.card:hover { border-color: var(--accent); color: var(--ink); }
.card .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-ink); }
.card h3 { margin-top: 6px; }
.card p { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; }

/* source entries */
.src { border: 1px solid var(--rule); border-radius: 4px; background: var(--card); padding: 18px 20px; margin: 14px 0; }
.src .head { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; }
.src .head a { font-weight: 600; text-decoration: none; }
.src .head a:hover { text-decoration: underline; }
.badge {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 2px; background: var(--bg-2); color: var(--ink-2);
  border: 1px solid var(--rule); white-space: nowrap;
}
.badge.type { color: var(--gold); border-color: var(--gold-soft); }
.src blockquote {
  margin: 12px 0 6px; padding: 10px 16px; border-inline-start: 2px solid var(--rule);
  color: var(--ink-2); font-family: var(--serif); font-size: 15.5px;
}
.src .meta { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }
.src .note { margin-top: 8px; font-size: 13.5px; color: var(--gold); }

/* analysis marker (recruitment page & blog) */
.analysis {
  border: 1px dashed var(--gold); background: var(--gold-soft);
  padding: 14px 18px; border-radius: 4px; max-width: var(--measure); margin: 16px 0;
}
.analysis .k { font-family: var(--mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.analysis p { margin: 6px 0 0; }

/* filters */
.filters { display: flex; gap: 10px; flex-wrap: wrap; margin: 18px 0 6px; }
.filters select, .filters button {
  background: var(--card); color: var(--ink); border: 1px solid var(--rule);
  border-radius: 3px; padding: 8px 12px; font: inherit; font-size: 14px;
}
.filters button { cursor: pointer; }
.filters button:hover { border-color: var(--accent); }
.count { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin: 6px 0 0; }

/* article (blog post) */
article.post { max-width: var(--measure); }
article.post h1 { font-family: var(--serif); font-weight: 400; font-size: 32px; line-height: 1.2; margin: 0 0 8px; }
article.post .byline { font-family: var(--mono); font-size: 12.5px; color: var(--ink-3); margin-bottom: 26px; }
article.post blockquote {
  margin: 18px 0; padding: 12px 18px; border-inline-start: 2px solid var(--accent);
  color: var(--ink-2); font-family: var(--serif);
}
article.post .cite { font-family: var(--mono); font-size: 12px; color: var(--ink-3); }

/* hero imagery */
.hero { position: relative; border-bottom: 1px solid var(--rule); overflow: hidden; }
.hero img { display: block; width: 100%; height: 340px; object-fit: cover; opacity: .62; }
.hero .overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg,
    rgba(11,17,22,.20) 0%, rgba(11,17,22,.55) 45%, rgba(11,17,22,.94) 88%, var(--bg) 100%);
}
.page-hero { height: 200px; }
.page-hero img { height: 200px; }

/* how to read */
.howto { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 16px; }
.howto .step { border: 1px solid var(--rule); background: var(--card); border-radius: 4px; padding: 16px 18px; }
.howto .n {
  font-family: var(--mono); font-size: 12px; color: var(--paper, #0c0d10);
  background: var(--gold); width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; margin-bottom: 10px;
}
.howto h3 { font-size: 15.5px; }
.howto p { color: var(--ink-2); font-size: 14px; margin: 4px 0 0; }

/* stat tiles */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-top: 18px; }
a.stat {
  display: block; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule); background: var(--card); border-radius: 4px; padding: 18px;
  border-top: 2px solid var(--accent);
}
a.stat:hover { border-color: var(--accent); }
.stat-n { display: block; font-family: var(--serif); font-size: 44px; line-height: 1.05; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.stat-l { display: block; margin-top: 8px; font-size: 13.5px; color: var(--ink-2); line-height: 1.45; }
.stat-src { display: block; margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }

/* split bars (two-category, direct-labeled, 2px gaps) */
.split-wrap { margin-top: 20px; display: grid; gap: 18px; }
.split { border: 1px solid var(--rule); background: var(--card); border-radius: 4px; padding: 16px 18px; }
.split .t { font-size: 14px; color: var(--ink-2); margin-bottom: 10px; display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.split .t b { color: var(--ink); font-family: var(--serif); font-size: 18px; }
.bar { display: flex; gap: 2px; height: 26px; border-radius: 3px; overflow: hidden; background: var(--bg-2); }
.seg { height: 100%; }
.seg.j { background: var(--chart-1); }
.seg.o { background: var(--chart-2); }
.bar-labels { display: flex; justify-content: space-between; margin-top: 7px; font-family: var(--mono); font-size: 12px; color: var(--ink-2); }
.legend { display: flex; gap: 16px; margin-top: 10px; font-size: 12.5px; color: var(--ink-2); }
.legend .sw { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-inline-end: 6px; vertical-align: -1px; }
.split .src-line { margin-top: 10px; font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.split .src-line a { color: var(--ink-3); }

footer { border-top: 1px solid var(--rule); margin-top: 40px; padding: 24px 0 48px; color: var(--ink-3); font-size: 13px; }
footer .wrap { display: flex; gap: 18px; flex-wrap: wrap; justify-content: space-between; }

@media (max-width: 640px) {
  .mast h1 { font-size: 28px; }
  .top .wrap { gap: 10px; }
}

/* Summary vs verbatim — the distinction must be visible, not inferred from a missing badge. */
.badge.verbatim { border-color: var(--ok); color: var(--ok); }
.badge.summary  { border-color: var(--open); color: var(--open); }
blockquote.is-summary {
  border-inline-start-style: dashed;
  border-inline-start-color: var(--open);
  font-style: normal;
}
blockquote.is-summary .qnote {
  display: block; margin-top: 8px;
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .02em;
  color: var(--open);
}
.imgcredit {
  margin: 26px 0 0; padding-top: 14px; border-top: 1px solid var(--rule-2);
  font-family: var(--mono); font-size: 11.5px; color: var(--ink-3); max-width: var(--measure);
}
.imgcredit a { color: var(--ink-3); }

/* Footer disclaimer — dense small type, deliberately readable rather than hidden.
   A disclaimer nobody can read is not a disclaimer. */
footer .disclaimer {
  flex-basis: 100%;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule-2);
  font-size: 12px; line-height: 1.65; color: var(--ink-3); max-width: 78ch;
}
footer .disclaimer b { color: var(--ink-2); }

/* Moved out of inline style= attributes: the tightened CSP (style-src 'self',
   no 'unsafe-inline') drops inline styles, which would have silently emptied the
   split bars and blanked the legend swatches. Keeping the CSP strict and putting
   the rules here is the right side of that trade. */
.mast.over-hero { margin-top: -150px; position: relative; }
.blog-list .src p.muted { margin: 8px 0 0; }
.meth-note { margin-top: 14px; }
.legend .sw.sw-1 { background: var(--chart-1); }
.legend .sw.sw-2 { background: var(--chart-2); }
/* The four bar widths are data, but they are FIXED data from a published source,
   so they belong in the stylesheet rather than in an attribute the CSP removes.
   stats.js still animates from data-w; these are the pre-script and no-script state. */
.seg.w-attacks-j  { width: 53.3%; }
.seg.w-attacks-o  { width: 46.7%; }
.seg.w-arrests-j  { width: 71.4%; }
.seg.w-arrests-o  { width: 28.6%; }