:root {
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --ink-faint: #767676;
  --paper: #faf9f7;
  --paper-raised: #ffffff;
  --rule: #d9d5cf;
  --red: #8b1a1a;
  --red-bright: #a82020;
  --black: #111111;
  --serif: Georgia, "Times New Roman", Times, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
}
.wrap { max-width: 980px; margin: 0 auto; padding: 0 20px; }
a { color: var(--red); }
a:hover { color: var(--red-bright); }

/* Masthead */
.masthead { background: var(--black); color: #fff; padding: 34px 0 26px; }
.masthead-name {
  font-family: var(--serif);
  font-size: clamp(34px, 6vw, 54px);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: inline-block;
  line-height: 1;
}
.masthead-name:hover { color: #fff; }
.masthead-tagline {
  margin: 12px 0 0;
  color: #b5b5b5;
  font-size: 15px;
  max-width: 640px;
  line-height: 1.5;
}

/* Nav */
.mainnav { background: var(--black); border-top: 1px solid #2c2c2c; padding: 0; }
.mainnav .wrap { display: flex; gap: 24px; flex-wrap: wrap; }
.mainnav a {
  color: #d8d8d8;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 0;
}
.mainnav a:hover { color: #fff; }

main { padding: 40px 20px 64px; }

/* Stats band */
.stats-band {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  margin-bottom: 36px;
}
.stat { background: var(--paper-raised); padding: 22px 20px; }
.stat-n {
  display: block;
  font-family: var(--serif);
  font-size: 42px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
}
.stat-red { color: var(--red); }
.stat-label {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--ink-soft);
  line-height: 1.45;
}

.standfirst {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.55;
  max-width: 760px;
  margin: 0 0 48px;
}

/* Teasers */
.section-head {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  border-bottom: 2px solid var(--black);
  padding-bottom: 8px;
  margin: 0 0 4px;
}
.teaser { padding: 22px 0; border-bottom: 1px solid var(--rule); }
.teaser h3 {
  font-family: var(--serif);
  font-size: 25px;
  line-height: 1.25;
  margin: 6px 0 8px;
}
.teaser h3 a { color: var(--ink); text-decoration: none; }
.teaser h3 a:hover { color: var(--red); }
.teaser-dek { margin: 0; color: var(--ink-soft); max-width: 720px; }
.kicker {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0;
  font-weight: 600;
}
.more-link { padding-top: 24px; font-weight: 600; }

/* Article */
.article h1, .page h1 {
  font-family: var(--serif);
  font-size: clamp(30px, 5vw, 44px);
  line-height: 1.15;
  margin: 10px 0 14px;
  max-width: 820px;
}
.dek {
  font-family: var(--serif);
  font-size: 21px;
  line-height: 1.5;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 0 30px;
}
.article-body {
  max-width: 680px;
  font-size: 18px;
  line-height: 1.75;
}
.article-body h2 {
  font-family: var(--serif);
  font-size: 26px;
  margin: 40px 0 12px;
  line-height: 1.25;
}
.article-body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--red);
  color: var(--ink-soft);
  font-style: italic;
}

/* Record box */
.record-box {
  background: var(--paper-raised);
  border: 1px solid var(--rule);
  border-top: 4px solid var(--black);
  padding: 20px 24px;
  margin: 0 0 34px;
  max-width: 680px;
}
.record-box h2 {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 12px;
}
.record-box dl { margin: 0; display: grid; gap: 8px; }
.record-box dl > div { display: grid; grid-template-columns: 130px 1fr; gap: 12px; }
.record-box dt { font-weight: 700; font-size: 14px; padding-top: 1px; }
.record-box dd { margin: 0; font-size: 15px; color: var(--ink-soft); }
.accountability-none { color: var(--red); font-weight: 600; }
/* Sourcing caveat on a name — deliberately visible, not a footnote. */
.record-note { color: var(--ink-faint); font-style: italic; font-size: 13.5px; }

/* Sources */
.sources {
  max-width: 680px;
  margin-top: 44px;
  border-top: 2px solid var(--black);
  padding-top: 16px;
}
.sources h2 {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 10px;
}
.sources ul { margin: 0 0 14px; padding-left: 20px; }
.sources li { margin-bottom: 6px; font-size: 15px; }
.sources-note { font-size: 14px; color: var(--ink-faint); }

/* Database */
.db-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  margin: 26px 0 18px;
}
.db-filters input[type="search"] {
  flex: 1 1 240px;
  padding: 9px 12px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: 15px;
}
.db-filters select {
  padding: 9px 8px;
  border: 1px solid var(--rule);
  background: var(--paper-raised);
  font-size: 15px;
}
.db-count { font-size: 13px; color: var(--ink-faint); margin-left: auto; }
.db-table-wrap { overflow-x: auto; border: 1px solid var(--rule); background: var(--paper-raised); }
.db-table { border-collapse: collapse; width: 100%; font-size: 14px; }
.db-table th {
  text-align: left;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--black);
  color: #fff;
  padding: 10px 12px;
  position: sticky;
  top: 0;
}
.db-table td {
  padding: 10px 12px;
  border-top: 1px solid var(--rule);
  vertical-align: top;
  line-height: 1.45;
}
.db-table tr:hover td { background: #f3f0ea; }
.nowrap { white-space: nowrap; }

/* Page */
.page .article-body { font-size: 17px; }

/* Footer */
.footer {
  background: var(--black);
  color: #a9a9a9;
  margin-top: 40px;
  padding: 34px 0;
  font-size: 14px;
  line-height: 1.6;
}
.footer a { color: #d8d8d8; }
.footer p { max-width: 760px; }
.footer-legal { color: #6d6d6d; font-size: 13px; }

@media (max-width: 640px) {
  .record-box dl > div { grid-template-columns: 1fr; gap: 2px; }
  .stat-n { font-size: 34px; }
}

/* ============================================================
   VISUAL SYSTEM — stencil illustration, memorial wall, stamps
   ============================================================ */

:root {
  --red-deep: #8b1a1a;
  --red-hot: #c62828;
  --bone: #f4f1ea;
}

/* --- Masthead: shield mark + hazard strip --- */
.masthead-inner { display: flex; align-items: center; gap: 20px; }
.masthead-mark { color: var(--red-hot); display: block; flex: none; line-height: 0; }
.masthead-mark:hover { color: #fff; }
.site-shield { display: block; }
.masthead-strip {
  height: 6px;
  background: repeating-linear-gradient(
    135deg, var(--red-deep) 0 14px, #111 14px 28px
  );
}

/* --- Hero: text panel + art, side by side (no overlap) --- */
.hero {
  display: grid;
  grid-template-columns: minmax(280px, 42%) 1fr;
  background: #0a0a0a;
  margin: 0 0 34px;
  align-items: stretch;
}
.hero-text { padding: 40px 34px; display: flex; flex-direction: column; justify-content: center; }
.hero-kicker {
  color: var(--red-hot);
  font-size: 11.5px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700; margin: 0 0 12px;
}
.hero-head {
  font-family: var(--serif);
  color: var(--bone);
  font-size: clamp(26px, 3.1vw, 42px);
  line-height: 1.1;
  margin: 0;
  letter-spacing: -0.01em;
}
.hero-sub { color: #9a948c; font-size: 14.5px; margin: 16px 0 0; }
.hero-figure { margin: 0; position: relative; display: flex; }
.hero-art { display: block; width: 100%; height: 100%; object-fit: cover; }
.hero-credit {
  position: absolute; right: 10px; bottom: 7px;
  font-size: 10.5px; letter-spacing: .03em;
  color: rgba(255,255,255,.4);
  text-align: right; max-width: 78%;
}

/* --- Section heads with crosshair --- */
.section-head { display: flex; align-items: center; gap: 9px; }
.section-head svg { color: var(--red-deep); flex: none; }

/* --- The wall --- */
.wall-section { margin: 46px 0; }
.wall-intro { color: var(--ink-soft); font-size: 15px; margin: 14px 0 18px; }
.key { display: inline-flex; align-items: center; gap: 5px; margin-left: 12px; font-size: 13.5px; }
.key-swatch { width: 13px; height: 13px; display: inline-block; border: 1px solid var(--rule); }
.key-killed { background: var(--red-deep); border-color: var(--red-deep); }
.key-lived { background: transparent; border-color: #9a938a; }

.wall {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 2px;
  background: var(--rule);
  border: 1px solid var(--rule);
}
.wall-dog {
  position: relative;
  background: var(--paper-raised);
  padding: 10px 6px 4px;
  text-decoration: none;
  display: flex; flex-direction: column; align-items: center;
  transition: background .12s ease, transform .12s ease;
}
.wall-dog .dog-sil { width: 100%; height: auto; display: block; }
.wall-dog.is-killed { color: var(--red-deep); }
.wall-dog.is-lived  { color: #b4aca1; }
.wall-name {
  font-size: 10px; letter-spacing: .02em; color: var(--ink-faint);
  margin-top: 3px; max-width: 100%;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wall-dog:hover { background: #111; transform: translateY(-2px); z-index: 2; }
.wall-dog:hover.is-killed { color: #e23b3b; }
.wall-dog:hover.is-lived  { color: var(--bone); }
.wall-dog:hover .wall-name { color: var(--bone); }
.wall-footnote { font-size: 14px; color: var(--ink-faint); margin-top: 14px; }

/* --- Accountability grid --- */
.accountability { margin: 46px 0; }
.acct-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(22px, 1fr));
  gap: 4px; margin: 18px 0 16px;
}
.acct-cell {
  display: inline-block;
  aspect-ratio: 1; width: 100%;
  border: 1px solid rgba(0,0,0,.18);
}
.acct-no    { background: #ded8d0; }
.acct-leave { background: #b0a89c; }
.acct-yes   { background: var(--red-deep); border-color: var(--red-deep); }
.acct-legend { list-style: none; padding: 0; margin: 0 0 22px; font-size: 14px; }
.acct-legend li { display: flex; align-items: center; gap: 9px; margin-bottom: 5px; }
.acct-legend .acct-cell { width: 15px; height: 15px; aspect-ratio: auto; flex: none; }

/* --- Rubber stamp --- */
.stamp {
  color: var(--red-deep);
  max-width: 320px;
  transform: rotate(-6deg);
  opacity: .82;
  margin: 8px 0 4px;
}
.stamp svg { width: 100%; height: auto; display: block; }

/* Stamp inside an article, floated beside the record box */
.article .stamp { max-width: 260px; margin: 0 0 26px auto; }

@media (max-width: 720px) {
  .hero { grid-template-columns: 1fr; }
  .hero-text { padding: 26px 20px 18px; }
  .hero-credit { position: static; text-align: left; padding: 8px 20px 12px; max-width: none; background: #0a0a0a; }
  .wall { grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); }
  .wall-name { font-size: 9px; }
  .masthead-inner { gap: 14px; }
}

/* Breed silhouette in the article record box */
.record-box { position: relative; }
.record-dog {
  position: absolute; right: 18px; top: 14px;
  width: 92px; color: var(--rule); pointer-events: none;
}
.record-dog svg { width: 100%; height: auto; display: block; }
@media (max-width: 640px) { .record-dog { display: none; } }

/* Sourcing caveat on entries that don't yet meet the published standard */
.sourcing-caveat {
  border-left: 3px solid var(--red-deep);
  background: #f6f1ea;
  padding: 12px 16px;
  font-size: 14.5px;
  line-height: 1.55;
  margin: 0 0 14px;
  color: var(--ink-soft);
}
.sourcing-caveat strong { color: var(--ink); }