@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300&display=swap');

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

/* ── Base ── */
:root {
  --bg:       #0e0e0e;
  --bg2:      #161616;
  --bg3:      #1e1e1e;
  --ink:      #e8e4d9;
  --ink2:     #9a9690;
  --ink3:     #555550;
  --rule:     rgba(232,228,217,0.07);
  --rule2:    rgba(232,228,217,0.14);

  /* Category colors — default palette */
  --c-arrest:       #E24B4A;
  --c-arrest-bg:    rgba(226,75,74,0.12);
  --c-surv:         #378ADD;
  --c-surv-bg:      rgba(55,138,221,0.12);
  --c-raid:         #7F77DD;
  --c-raid-bg:      rgba(127,119,221,0.12);
  --c-question:     #EF9F27;
  --c-question-bg:  rgba(239,159,39,0.12);
  --c-knock:        #1D9E75;
  --c-knock-bg:     rgba(29,158,117,0.12);
  --c-stage:        #BA7517;
  --c-stage-bg:     rgba(186,117,23,0.12);
  --c-pursue:       #D85A30;
  --c-pursue-bg:    rgba(216,90,48,0.12);
  --c-drone:        #888780;
  --c-drone-bg:     rgba(136,135,128,0.12);
  --c-violence:     #A32D2D;
  --c-violence-bg:  rgba(163,45,45,0.12);
  --c-loiter:       #0F6E56;
  --c-loiter-bg:    rgba(15,110,86,0.12);
  --c-check:        #534AB7;
  --c-check-bg:     rgba(83,74,183,0.12);

  /* Wall of actions colors */
  --c-whistles:     #1D9E75;
  --c-escaped:      #378ADD;
  --c-confronted:   #EF9F27;
  --c-noentry:      #7F77DD;
  --c-filmed:       #D85A30;
  --c-honking:      #D4537E;
  --c-noarrests:    #888780;
  --c-crowd:        #639922;
  --c-rapid:        #BA7517;
  --c-activists:    #E24B4A;
  --c-alarms:       #555550;
}

/* ── Deuteranopia (red-green — greens shift to yellow/brown, reds to yellow) ── */
.cb-deut {
  --c-arrest:       #D4A017;
  --c-arrest-bg:    rgba(212,160,23,0.12);
  --c-surv:         #4B8EDB;
  --c-surv-bg:      rgba(75,142,219,0.12);
  --c-raid:         #8B7FE8;
  --c-raid-bg:      rgba(139,127,232,0.12);
  --c-question:     #E8C040;
  --c-question-bg:  rgba(232,192,64,0.12);
  --c-knock:        #C8A020;
  --c-knock-bg:     rgba(200,160,32,0.12);
  --c-stage:        #9E7010;
  --c-stage-bg:     rgba(158,112,16,0.12);
  --c-pursue:       #D88020;
  --c-pursue-bg:    rgba(216,128,32,0.12);
  --c-drone:        #888780;
  --c-drone-bg:     rgba(136,135,128,0.12);
  --c-violence:     #B08010;
  --c-violence-bg:  rgba(176,128,16,0.12);
  --c-loiter:       #906810;
  --c-loiter-bg:    rgba(144,104,16,0.12);
  --c-check:        #6060C0;
  --c-check-bg:     rgba(96,96,192,0.12);
  --c-whistles:     #C8A020;
  --c-escaped:      #4B8EDB;
  --c-confronted:   #E8C040;
  --c-noentry:      #8B7FE8;
  --c-filmed:       #D88020;
  --c-honking:      #A060A0;
  --c-noarrests:    #888780;
  --c-crowd:        #9E7010;
  --c-rapid:        #9E7010;
  --c-activists:    #D4A017;
  --c-alarms:       #555550;
}

/* ── Protanopia (red-green — reds appear dark yellow/brown) ── */
.cb-prot {
  --c-arrest:       #C09010;
  --c-arrest-bg:    rgba(192,144,16,0.12);
  --c-surv:         #5090E0;
  --c-surv-bg:      rgba(80,144,224,0.12);
  --c-raid:         #9080E8;
  --c-raid-bg:      rgba(144,128,232,0.12);
  --c-question:     #D8B030;
  --c-question-bg:  rgba(216,176,48,0.12);
  --c-knock:        #B09018;
  --c-knock-bg:     rgba(176,144,24,0.12);
  --c-stage:        #806808;
  --c-stage-bg:     rgba(128,104,8,0.12);
  --c-pursue:       #C07018;
  --c-pursue-bg:    rgba(192,112,24,0.12);
  --c-drone:        #888780;
  --c-drone-bg:     rgba(136,135,128,0.12);
  --c-violence:     #906008;
  --c-violence-bg:  rgba(144,96,8,0.12);
  --c-loiter:       #787008;
  --c-loiter-bg:    rgba(120,112,8,0.12);
  --c-check:        #5858C8;
  --c-check-bg:     rgba(88,88,200,0.12);
  --c-whistles:     #B09018;
  --c-escaped:      #5090E0;
  --c-confronted:   #D8B030;
  --c-noentry:      #9080E8;
  --c-filmed:       #C07018;
  --c-honking:      #9858A0;
  --c-noarrests:    #888780;
  --c-crowd:        #806808;
  --c-rapid:        #806808;
  --c-activists:    #C09010;
  --c-alarms:       #555550;
}

/* ── Tritanopia (blue-yellow — blues appear green, yellows appear pink) ── */
.cb-trit {
  --c-arrest:       #E24B4A;
  --c-arrest-bg:    rgba(226,75,74,0.12);
  --c-surv:         #2AAA80;
  --c-surv-bg:      rgba(42,170,128,0.12);
  --c-raid:         #C060A0;
  --c-raid-bg:      rgba(192,96,160,0.12);
  --c-question:     #E06080;
  --c-question-bg:  rgba(224,96,128,0.12);
  --c-knock:        #20A870;
  --c-knock-bg:     rgba(32,168,112,0.12);
  --c-stage:        #D05060;
  --c-stage-bg:     rgba(208,80,96,0.12);
  --c-pursue:       #D04040;
  --c-pursue-bg:    rgba(208,64,64,0.12);
  --c-drone:        #888780;
  --c-drone-bg:     rgba(136,135,128,0.12);
  --c-violence:     #A02828;
  --c-violence-bg:  rgba(160,40,40,0.12);
  --c-loiter:       #188858;
  --c-loiter-bg:    rgba(24,136,88,0.12);
  --c-check:        #A840A8;
  --c-check-bg:     rgba(168,64,168,0.12);
  --c-whistles:     #20A870;
  --c-escaped:      #2AAA80;
  --c-confronted:   #E06080;
  --c-noentry:      #C060A0;
  --c-filmed:       #D04040;
  --c-honking:      #C040C0;
  --c-noarrests:    #888780;
  --c-crowd:        #188858;
  --c-rapid:        #D05060;
  --c-activists:    #E24B4A;
  --c-alarms:       #555550;
}

/* ── Achromatopsia (full grayscale) ── */
.cb-achro {
  --c-arrest:       #e0e0e0;
  --c-arrest-bg:    rgba(224,224,224,0.12);
  --c-surv:         #b0b0b0;
  --c-surv-bg:      rgba(176,176,176,0.12);
  --c-raid:         #c8c8c8;
  --c-raid-bg:      rgba(200,200,200,0.12);
  --c-question:     #d8d8d8;
  --c-question-bg:  rgba(216,216,216,0.12);
  --c-knock:        #a0a0a0;
  --c-knock-bg:     rgba(160,160,160,0.12);
  --c-stage:        #909090;
  --c-stage-bg:     rgba(144,144,144,0.12);
  --c-pursue:       #e8e8e8;
  --c-pursue-bg:    rgba(232,232,232,0.12);
  --c-drone:        #787878;
  --c-drone-bg:     rgba(120,120,120,0.12);
  --c-violence:     #f0f0f0;
  --c-violence-bg:  rgba(240,240,240,0.12);
  --c-loiter:       #686868;
  --c-loiter-bg:    rgba(104,104,104,0.12);
  --c-check:        #585858;
  --c-check-bg:     rgba(88,88,88,0.12);
  --c-whistles:     #a0a0a0;
  --c-escaped:      #b0b0b0;
  --c-confronted:   #d8d8d8;
  --c-noentry:      #c8c8c8;
  --c-filmed:       #e8e8e8;
  --c-honking:      #909090;
  --c-noarrests:    #787878;
  --c-crowd:        #686868;
  --c-rapid:        #585858;
  --c-activists:    #e0e0e0;
  --c-alarms:       #505050;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'DM Sans', sans-serif;
  background: var(--bg);
  color: var(--ink);
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { color: var(--ink); opacity: 0.75; }

/* ── Nav ── */
.nav {
  background: var(--bg);
  border-bottom: 1px solid var(--rule2);
  padding: 0 2rem;
  display: flex;
  align-items: stretch;
  gap: 0;
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-brand {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink);
  padding: 14px 20px 14px 0;
  border-right: 1px solid var(--rule2);
  margin-right: 8px;
  white-space: nowrap;
  display: flex;
  align-items: center;
}

.nav-brand span {
  color: var(--c-arrest);
  margin-right: 6px;
  font-size: 14px;
}

.nav-links {
  display: flex;
  align-items: stretch;
  gap: 0;
  flex: 1;
}

.nav-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--ink3);
  padding: 0 12px;
  display: flex;
  align-items: center;
  border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.nav-link:hover { color: var(--ink); opacity: 1; }
.nav-link.active { color: var(--ink); border-bottom-color: var(--ink); }

/* ── Colorblind toggle ── */
.cb-toggle {
  position: fixed;
  bottom: 1.5rem;
  left: 1.5rem;
  z-index: 999;
  background: var(--bg2);
  border: 1px solid var(--rule2);
  border-radius: 6px;
  padding: 8px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.05em;
  color: var(--ink3);
  cursor: pointer;
  user-select: none;
}

.cb-toggle-label {
  text-transform: uppercase;
  margin-bottom: 6px;
  color: var(--ink3);
}

.cb-modes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cb-mode {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 3px 4px;
  border-radius: 3px;
  transition: background 0.1s;
}

.cb-mode:hover { background: var(--rule); }
.cb-mode.active { color: var(--ink); }

.cb-swatches {
  display: flex;
  gap: 2px;
}

.cb-pip {
  width: 6px;
  height: 6px;
  border-radius: 1px;
  flex-shrink: 0;
}

/* ── Shared layout ── */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 2rem;
}

.page-hero {
  padding: 3rem 0 2rem;
  border-bottom: 1px solid var(--rule);
}

.eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 0.75rem;
}

.page-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.page-title strong { font-weight: 500; }

.page-desc {
  font-size: 14px;
  color: var(--ink2);
  max-width: 600px;
  line-height: 1.7;
}

/* ── Stat row ── */
.stat-row {
  display: flex;
  gap: 1px;
  background: var(--rule);
  margin: 2rem 0 0;
}

.stat {
  flex: 1;
  background: var(--bg);
  padding: 1rem 1.25rem;
}

.stat-n {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  margin-bottom: 4px;
}

.stat-l {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink3);
}

/* ── Section ── */
.section {
  padding: 2rem 0;
  border-bottom: 1px solid var(--rule);
}

.section-title {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink3);
  margin-bottom: 1.25rem;
}

/* ── Card grid ── */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1px;
  background: var(--rule);
}

.card {
  background: var(--bg2);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  text-decoration: none;
  color: inherit;
  transition: background 0.15s;
  border-top: 2px solid transparent;
}

.card:hover { background: var(--bg3); }

.card-tag {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink3);
}

.card-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  line-height: 1.3;
}

.card-desc {
  font-size: 12px;
  color: var(--ink2);
  line-height: 1.55;
  flex: 1;
}

.card-arrow {
  font-size: 11px;
  color: var(--ink3);
  margin-top: 0.25rem;
}

/* ── Footer ── */
.footer {
  padding: 2rem 0 0;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  color: var(--ink3);
  line-height: 1.8;
  letter-spacing: 0.02em;
}

.footer-credit {
  margin-top: 1.5rem;
  padding: 1rem 0 3rem;
  border-top: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 9px;
  color: var(--ink3);
  letter-spacing: 0.04em;
}

.footer-credit a {
  color: var(--ink2);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-credit a:hover {
  color: var(--ink);
  opacity: 1;
}

.footer-credit-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}

.footer-disclaimer {
  font-size: 8px;
  color: var(--ink3);
  line-height: 1.6;
  max-width: 640px;
}

.footer-disclaimer a {
  color: var(--ink3);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.footer-disclaimer a:hover {
  color: var(--ink2);
}

@media (max-width: 600px) {
  .nav { padding: 0 1rem; }
  .container { padding: 0 1rem; }
  .stat-row { flex-wrap: wrap; }
  .stat { min-width: 50%; }
  .nav-links { overflow-x: auto; }
}