/* ---- tokens : 5 colors total, site-wide ------------------------------- */
:root{
  --white:#FFFFFF;
  --surface:#F1F0EA;
  --ink:#111111;
  --pink:#FF2D78;
  --blue:#2E5BFF;

  --ink-soft:#585552;   /* tint of ink, not a new color */
  --rule:#E4E2D9;       /* tints of surface, not new colors */
  --rule-lo:#D8D5CE;
  --ink-70:#4A4744;     /* tints of ink for chart ramps, not new colors */
  --ink-45:#8C8884;
  --ink-22:#C2BFB9;
  --blue-wash:#EDF0FF;  /* tint of blue, not a new color */
  --blue-deep:#1E3CB0;  /* shade of blue, not a new color */

  --display:'Bricolage Grotesque', system-ui, sans-serif;
  --body:'Work Sans', system-ui, -apple-system, sans-serif;
  --mono:'Space Mono', ui-monospace, Menlo, monospace;

  --radius:14px;
  --wrap:1120px;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  background:var(--white);
  color:var(--ink);
  font-family:var(--body);
  font-size:17px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
img,svg{ max-width:100%; height:auto; display:block; }
a{ color:var(--ink); }
::selection{ background:var(--pink); color:var(--white); }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 clamp(18px,4vw,32px); }

/* ---- masthead / nav ---------------------------------------------------- */
.mast{ border-bottom:2px solid var(--ink); padding:18px 0; }
.mast-row{ display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.wordmark{
  font-family:var(--display); font-weight:800; font-size:1.05rem;
  letter-spacing:-0.01em; text-decoration:none; color:var(--ink); white-space:nowrap;
}
.wordmark .dot{ color:var(--pink); }
.navlinks{ display:flex; flex-wrap:wrap; gap:2px 4px; font-family:var(--mono); font-size:.72rem; }
.navlinks a{ text-decoration:none; color:var(--ink-soft); padding:.4rem .6rem; border-radius:99px; }
.navlinks a:hover{ background:var(--surface); color:var(--ink); }
.navlinks a[aria-current="page"]{ background:var(--ink); color:var(--white); }

/* ---- hero (compact -- the card grid is the star, not this) ------------- */
.hero{ padding:34px 0 30px; }
.hero-word{
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.7rem, 3.4vw, 2.4rem); line-height:1; letter-spacing:-0.01em; margin:0;
}
.hero-word .dot{ color:var(--pink); }
.hero-tag{ font-family:var(--body); font-size:1.02rem; color:var(--ink-soft); margin:.5rem 0 0; }

/* ---- section headers ---------------------------------------------------- */
.lede{ color:var(--ink-soft); font-size:.95rem; max-width:70ch; margin:-6px 0 18px; }
.lede.grid-split{ margin:26px 0 14px; font-family:var(--mono); font-size:.72rem;
  text-transform:uppercase; letter-spacing:.08em; }
.section-head{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px; flex-wrap:wrap;
  margin:38px 0 18px; padding-bottom:10px; border-bottom:2px solid var(--ink);
}
.section-head h2{ font-family:var(--display); font-weight:700; font-size:1.4rem; margin:0; }
.section-head .see-all{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); text-decoration:none; }
.section-head .see-all:hover{ color:var(--pink); }

/* ---- card grid : low-density summary cards ------------------------------ */
/* align-items:start so a text-only record card does not stretch to match an
   illustrated one when both appear in the same grid */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:20px; align-items:start; }

.card-mini{
  display:block; text-decoration:none; color:var(--ink);
  background:var(--surface); border-radius:var(--radius); overflow:hidden;
  border:1.5px solid var(--ink);
  transition:transform .12s ease;
}
.card-mini:hover{ transform:translateY(-3px); }
.card-mini .art{
  position:relative;
  aspect-ratio:1/1; background:var(--white);
  border-bottom:1.5px solid var(--ink); overflow:hidden;
}
.card-mini .art img{ width:100%; height:100%; object-fit:contain; }
.card-mini .body{ padding:16px 18px 20px; }
.card-mini .tag{
  display:block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--pink); margin-bottom:.7rem;
}

/* Both readings, stamped over the graphic. Two lines rather than one letter,
   because averaging them was the defect: a widest-reading failure is a far
   weaker result than a plain-reading one and the card must not hide that. */
.verdict-stamp{
  position:absolute; top:14px; right:14px; z-index:2;
  display:grid; gap:2px;
  background:rgba(255,255,255,.94); border:2px solid var(--ink);
  border-radius:8px; padding:7px 9px;
  transform:rotate(-2deg); box-shadow:0 2px 0 rgba(17,17,17,.12);
}
.vs-row{ display:flex; align-items:baseline; gap:8px; justify-content:space-between; }
.vs-k{ font-family:var(--mono); font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--ink-soft); }
.vs-v{ font-family:var(--display); font-weight:800; font-size:.92rem; color:var(--ink); }
.vs-row.vs-fails .vs-v{ color:var(--pink); }
.vs-row.vs-unresolved .vs-v{ color:var(--ink-soft); }
.detail-art .verdict-stamp{ top:18px; right:18px; padding:10px 13px; }
.detail-art .vs-k{ font-size:.68rem; }
.detail-art .vs-v{ font-size:1.15rem; }

/* the same result, in full, in the How We Know zone of a detail page */
.verdicts{ display:grid; gap:2px; margin-top:.3rem; }
.vline{
  display:grid; grid-template-columns:minmax(0,auto) auto; align-items:baseline;
  gap:4px 12px; text-decoration:none; color:var(--ink);
  padding:9px 10px; border-radius:8px; border:1px solid var(--rule);
}
.vline:hover{ background:var(--surface); }
.vline-k{ font-family:var(--mono); font-size:.7rem; letter-spacing:.05em;
  text-transform:uppercase; color:var(--ink-soft); }
.vline-v{ font-family:var(--display); font-weight:800; font-size:1.02rem; text-align:right; }
.vline.vs-fails .vline-v{ color:var(--pink); }
.vline.vs-unresolved .vline-v{ color:var(--ink-soft); }
.vline.vs-unresolved{ border-style:dashed; }
.vline-n{ grid-column:1 / -1; font-size:.86rem; color:var(--ink-soft); }
.vline-note{ font-size:.86rem; color:var(--ink-soft); margin:.6rem 0 0; max-width:64ch; }

.claim-label, .catch-label{
  display:block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; margin:0 0 .3rem;
}
.claim-label{ color:var(--ink-soft); }
.catch-label{ color:var(--pink); margin-top:.9rem; }
.claim-text{ font-family:var(--display); font-weight:700; font-size:1.14rem; line-height:1.24; margin:0; }
.catch-text{ font-size:.9rem; color:var(--ink-soft); margin:0; }

/* legacy mini-card text (still used by cards without a claim/catch pair) */
.card-mini .headline{
  font-family:var(--display); font-weight:700; font-size:1.18rem; line-height:1.2; margin:0 0 .5rem;
}
.card-mini .verdict-line{ font-size:.88rem; color:var(--ink-soft); margin:0; }
.card-mini .verdict-line b{ color:var(--ink); }

/* ---- detail page : full register, same voice ---------------------------- */
.detail-head{ padding:30px 0 0; }
.detail-tag{
  display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--pink); margin-bottom:.7rem;
}
.detail-title{ font-family:var(--display); font-weight:800; font-size:clamp(1.8rem,4vw,2.6rem); line-height:1.08; margin:0 0 20px; }
.detail-art{
  position:relative;
  background:var(--surface); border:1.5px solid var(--ink); border-radius:var(--radius);
  padding:6%; margin-bottom:28px; max-width:420px;
}

.zone{ max-width:64ch; padding:18px 0; border-top:1px solid var(--rule); }
.zone:first-of-type{ border-top:none; padding-top:0; }
.zone-label{
  display:block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; margin-bottom:.5rem;
}
.zone p{ margin:0 0 .8rem; font-size:1.02rem; }
.zone p:last-child{ margin-bottom:0; }
.zone-fact .zone-label{ color:var(--ink-soft); }
.zone-read{ background:var(--blue-wash); margin:0 -22px; padding:18px 22px; border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); max-width:none; }
.zone-read > *{ max-width:64ch; }
.zone-read .zone-label{ color:var(--blue); }
.zone-know .zone-label{ color:var(--ink-soft); }
.zone-know a{ color:var(--ink); font-weight:600; }

.verdict{
  display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase; padding:.34rem .65rem; border-radius:99px;
  background:var(--surface); border:1px solid var(--ink); color:var(--ink);
}

/* ---- evidence : mirrored sources, not just an outbound link ------------- */
.evidence{ margin-top:10px; }
.evidence h3{ font-family:var(--display); font-size:1.15rem; margin:0 0 4px; }
.evidence .evidence-note{ color:var(--ink-soft); font-size:.92rem; margin:0 0 18px; max-width:64ch; }
.evidence-item{ border-top:1px solid var(--rule); padding:16px 0; }
.evidence-item:last-child{ border-bottom:1px solid var(--rule); }
.evidence-head{ display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:.3rem; }
.evidence-who{ font-weight:700; font-size:.95rem; margin:0; }
.evidence-quote{ font-size:1rem; margin:0 0 .5rem; }
.evidence-quote.not-verbatim{ color:var(--ink-soft); font-style:italic; margin-bottom:.15rem; }
.evidence-meta{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); }
.evidence-meta a{ color:var(--blue); }

.score-row{ display:flex; flex-wrap:wrap; gap:8px; margin:10px 0 16px; }
.score-chip{
  font-family:var(--mono); font-size:.72rem; font-weight:700;
  background:var(--surface); border:1px solid var(--ink); border-radius:99px; padding:.3rem .65rem;
}
.score-chip.stage{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.recur-list{ margin:.3rem 0 0; padding-left:1.2rem; }
.recur-list li{ margin-bottom:.3rem; font-size:.92rem; }

/* ---- the grade, with its arithmetic shown ------------------------------- */
.grade-line{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.grade-chip{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.grade-tally{ font-size:.86rem; color:var(--ink-soft); }
.grade-tally a{ color:var(--ink); }
.verdict.nt{ background:transparent; border-style:dashed; color:var(--ink-soft); }
.nt-note{ font-size:.82rem; color:var(--ink-soft); font-style:italic; margin:.4rem 0 0; }

/* ---- record cards : documented statements, not tested claims ------------ */
/* Deliberately sober. No illustration, no grade, no pink. A drawing or a
   letter beside documented hate reads as a joke about it. */
.card-mini.record .rec-band{
  display:flex; justify-content:space-between; align-items:baseline; gap:10px; flex-wrap:wrap;
  padding:12px 18px; border-bottom:1.5px solid var(--ink); background:var(--white);
}
.card-mini.record .rec-sev{
  font-family:var(--mono); font-size:.68rem; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase;
}
.card-mini.record .rec-track{
  font-family:var(--mono); font-size:.66rem; color:var(--ink-soft);
}
/* Severity stays inside the five colors: the top tier is filled, the next is
   pink, then ink, then a tint of ink. Four steps, no new hues. */
.card-mini.sev-violence .rec-sev{ background:var(--pink); color:var(--white); padding:.16rem .42rem; border-radius:3px; }
.card-mini.sev-threatening .rec-sev{ color:var(--pink); }
.card-mini.sev-hateful .rec-sev{ color:var(--ink); }
.card-mini.sev-stigmatizing .rec-sev{ color:var(--ink-soft); }
.card-mini.record .claim-text{ font-size:1.06rem; }
.card-mini.record .catch-label{ color:var(--ink-soft); }

.rec-facts{ border-top:2px solid var(--ink); border-bottom:1px solid var(--rule); margin:0 0 6px; }
.rec-fact{ display:grid; grid-template-columns:150px 1fr; gap:4px 16px; padding:12px 0; border-bottom:1px solid var(--rule); }
.rec-fact:last-child{ border-bottom:none; }
.rec-k{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); padding-top:.2rem;
}
.rec-v{ font-weight:600; font-size:1rem; }
.rec-v.sev-violence{ background:var(--pink); color:var(--white); padding:.1rem .4rem; border-radius:3px; align-self:flex-start; }
.rec-v.sev-threatening{ color:var(--pink); }
.rec-v.sev-hateful{ color:var(--ink); }
.rec-v.sev-stigmatizing{ color:var(--ink-soft); }
.rec-d{ grid-column:2; font-size:.86rem; color:var(--ink-soft); }
@media (max-width:560px){
  .rec-fact{ grid-template-columns:1fr; }
  .rec-d{ grid-column:1; }
}

/* which reading a check is testing */
.reading-tag{
  display:inline-block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.16rem .45rem; border-radius:4px;
  margin:0 0 .45rem; background:var(--surface); color:var(--ink-soft);
}
.reading-tag.rd-widest{ background:var(--blue-wash); color:var(--blue-deep); }
.reading-tag.rd-core{ background:var(--ink); color:var(--white); }
.reading-tag.rd-sup{ background:transparent; color:var(--ink-soft); border:1px solid var(--rule); }
.reading-split{
  font-size:.9rem; color:var(--ink); margin:.7rem 0 0; padding:.7rem .9rem;
  background:var(--surface); border-left:3px solid var(--ink); border-radius:0 8px 8px 0;
}

.archive-list{ margin:.4rem 0 0; padding-left:1.1rem; }
.archive-list li{ margin-bottom:.35rem; font-size:.95rem; }

.research{
  margin:30px 0 0; padding:20px 22px;
  background:var(--ink); color:var(--white); border-radius:var(--radius);
}
.research-k{
  display:block; font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.11em; text-transform:uppercase; color:var(--pink); margin-bottom:.5rem;
}
.research-h{ font-family:var(--display); font-weight:700; font-size:1.14rem; margin:0 0 .45rem; }
.research-h a{ color:var(--white); text-decoration-color:var(--pink); text-underline-offset:3px; }
.research-p{ font-size:.92rem; color:var(--rule-lo); margin:0; max-width:64ch; }
.research-p a{ color:var(--white); }

.kids{ margin-top:44px; }
.kids .section-head{ margin-bottom:12px; }
.kids .see-all{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); }
.kids-note{ color:var(--ink-soft); font-size:.92rem; max-width:64ch; margin:0 0 20px; }

.deeper-list{ margin:.6rem 0 0; padding-left:1.1rem; }
.deeper-list li{ margin-bottom:.5rem; font-size:.98rem; }
.deeper-list a{ font-weight:600; }

.archive-n{ font-family:var(--mono); font-size:.7rem; color:var(--ink-soft); }

/* ---- charts : SVG, no library, every shape is a link -------------------- */
.browse .hero{ padding:26px 0 6px; }
.chart-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(290px,1fr));
  gap:12px; margin:22px 0 10px; align-items:start;
}
.cchart{
  border:1.5px solid var(--ink); border-radius:var(--radius);
  padding:15px 17px 13px; background:var(--white);
}
.cchart-h{ font-family:var(--display); font-weight:700; font-size:1.06rem; margin:0 0 .3rem; }
.cchart-p{ font-size:.8rem; line-height:1.42; color:var(--ink-soft); margin:0 0 13px; }
.cchart-f{ font-family:var(--mono); font-size:.66rem; color:var(--ink-soft); margin:11px 0 0; }

.chart{ display:block; width:100%; overflow:visible; }
.chart.split{ height:26px; }
.chart a{ cursor:pointer; }

/* fills : the five colors and declared tints of ink, nothing new */
.f-p{ fill:var(--pink); }
.f-4{ fill:var(--ink); }
.f-3{ fill:var(--ink-70); }
.f-2{ fill:var(--ink-45); }
.f-1{ fill:var(--ink-22); }
.chart a:hover .seg, .chart a:hover .col, .chart a:focus-visible .col{ fill:var(--pink); }
.chart a:focus-visible{ outline:2px solid var(--blue); outline-offset:2px; }

.col-n{ font-family:var(--mono); font-size:8px; font-weight:700; fill:var(--ink); }
.col-k{ font-family:var(--mono); font-size:7px; fill:var(--ink-soft); }
.chart a:hover .col-n, .chart a:hover .col-k{ fill:var(--pink); }

/* the legend under a split bar : the numbers, still clickable */
.ckeys{ display:grid; gap:0; margin-top:11px; }
.ckey{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:9px;
  text-decoration:none; color:var(--ink); padding:3px 6px; border-radius:6px;
}
.ckey:hover{ background:var(--surface); }
.sw{ width:11px; height:11px; border-radius:2px; display:block; }
.sw.f-p{ background:var(--pink); }
.sw.f-4{ background:var(--ink); }
.sw.f-3{ background:var(--ink-70); }
.sw.f-2{ background:var(--ink-45); }
.sw.f-1{ background:var(--ink-22); }
.ckey-n{ font-family:var(--mono); font-size:.72rem; }
.ckey-v{ font-family:var(--mono); font-size:.8rem; font-weight:700; }
.ckey:hover .ckey-v{ color:var(--pink); }

.week-now{ font-family:var(--display); font-weight:700; font-size:1rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:10px;
  margin:0 0 6px; padding-bottom:8px; border-bottom:1.5px solid var(--ink); }
.week-n{ font-family:var(--mono); font-size:1.5rem; font-weight:700; }

/* ---- clickable counts ---------------------------------------------------- */
.rec-v[href]{ text-decoration-color:var(--pink); text-underline-offset:3px; }
a.verdict.grade-chip{ text-decoration:none; }
a.verdict.grade-chip:hover{ background:var(--pink); border-color:var(--pink); }
.score-chip.link{ text-decoration:none; cursor:pointer; transition:background .12s ease, color .12s ease; }
.score-chip.link:hover{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.score-chip.link.on{ background:var(--ink); color:var(--white); border-color:var(--ink); }
.score-chip .delta{ font-size:.66rem; color:var(--ink-soft); margin-left:.15rem; }
.score-chip.link:hover .delta, .score-chip.link.on .delta{ color:var(--rule); }

.facet-row{ margin:0 0 26px; padding-bottom:20px; border-bottom:2px solid var(--ink); }
.facet-eyebrow{ font-family:var(--mono); font-size:.72rem; color:var(--ink-soft); margin:0 0 .5rem; }
.facet-eyebrow a{ color:var(--ink-soft); }
.facet-cross-k{ font-family:var(--mono); font-size:.66rem; font-weight:700; letter-spacing:.09em;
  text-transform:uppercase; color:var(--ink-soft); margin:18px 0 8px; }

/* ---- bars : a distribution you can open ---------------------------------- */
.bars{ display:grid; gap:6px; margin:6px 0 4px; }
.bar{
  display:grid; grid-template-columns:minmax(120px,1.1fr) 3fr auto; align-items:center; gap:14px;
  text-decoration:none; color:var(--ink); padding:7px 10px; border-radius:8px;
}
.bar:hover{ background:var(--surface); }
.bar-k{ font-family:var(--mono); font-size:.72rem; letter-spacing:.04em; }
.bar-t{ display:block; height:14px; background:var(--surface); border-radius:3px; overflow:hidden; }
.bar-f{ display:block; height:100%; background:var(--ink); }
.bar:hover .bar-f{ background:var(--pink); }
.bar-n{ font-family:var(--mono); font-size:.82rem; font-weight:700; min-width:2.4ch; text-align:right; }
@media (max-width:560px){
  .bar{ grid-template-columns:1fr auto; gap:4px 10px; }
  .bar-t{ grid-column:1 / -1; }
}

/* ---- share row ----------------------------------------------------------- */
.sharerow{
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  margin-top:34px; padding-top:20px; border-top:1px solid var(--rule);
}
.share-label{
  font-family:var(--mono); font-size:.66rem; font-weight:700;
  letter-spacing:.09em; text-transform:uppercase; color:var(--ink-soft); margin-right:.3rem;
}
.share-btn{
  font-family:var(--mono); font-size:.7rem; font-weight:700;
  text-decoration:none; color:var(--ink); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--ink); border-radius:99px;
  padding:.4rem .8rem;
}
.share-btn:hover{ background:var(--ink); color:var(--white); }

/* ---- footer -------------------------------------------------------------- */
.foot{
  margin-top:60px; border-top:2px solid var(--ink); padding:22px 0 40px;
  font-family:var(--mono); font-size:.72rem; color:var(--ink-soft);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
}
.foot a{ color:var(--ink-soft); }
.foot a:hover{ color:var(--pink); }
.footlinks{ display:flex; gap:1.2em; flex-wrap:wrap; }

@media (max-width:560px){
  .zone-read{ margin:0 -18px; padding:16px 18px; }
}