html { scroll-behavior: smooth; }
body.reference-main {
  background: #0f0f10;
  color: #fff7e7;
  overflow-x: hidden;
}
body.reference-main::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .08;
  background-image: repeating-linear-gradient(0deg, #fff 0, #fff 1px, transparent 1px, transparent 6px);
  z-index: 0;
}
body.reference-main .topbar,
body.reference-main .protest-hero,
body.reference-main .indictment,
body.reference-main .edu-featured-comments { display: none !important; }
.ref-design { position: relative; z-index: 1; }
.scroll-progress {
  position: fixed;
  left: 0;
  top: 0;
  height: 4px;
  width: 0%;
  background: #ffbd2e;
  z-index: 9999;
  box-shadow: 0 0 16px rgba(255,189,46,.75);
}
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  min-height: 72px;
  padding: 0 clamp(18px, 4vw, 48px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: rgba(15,15,16,.88);
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,247,231,.16);
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff7e7;
  text-decoration: none;
  font-weight: 950;
  letter-spacing: -.04em;
}
.brand-mark {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: #d71920;
  color: white;
  border: 2px solid #fff7e7;
  box-shadow: 6px 6px 0 #000;
  font-weight: 950;
}
.menu-button {
  display: none;
  border: 2px solid #fff7e7;
  background: #ffbd2e;
  color: #111;
  padding: 9px 12px;
  font-weight: 950;
}
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav a {
  color: #fff7e7;
  text-decoration: none;
  border: 1px solid rgba(255,247,231,.28);
  padding: 10px 13px;
  font-weight: 900;
}
.site-nav a:hover { background: #ffbd2e; color: #111; border-color: #ffbd2e; }
.section-pad { padding: clamp(58px, 8vw, 112px) clamp(18px, 5vw, 72px); }
.hero {
  min-height: calc(100vh - 72px);
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .82fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  background:
    radial-gradient(circle at 88% 18%, rgba(215,25,32,.36), transparent 28rem),
    radial-gradient(circle at 18% 88%, rgba(255,189,46,.18), transparent 26rem),
    #11100f;
}
.eyebrow, .label {
  margin: 0 0 14px;
  color: #ffbd2e;
  font-weight: 950;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.hero h1 {
  margin: 0;
  display: grid;
  gap: 4px;
  color: #fff7e7;
  font-size: clamp(54px, 9vw, 124px);
  line-height: .9;
  letter-spacing: -.085em;
  word-break: keep-all;
}
.hero-lead {
  margin: 28px 0 0;
  max-width: 760px;
  color: #e6d6bd;
  font-size: clamp(17px, 2vw, 22px);
  line-height: 1.8;
  font-weight: 700;
  word-break: keep-all;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 18px;
  border: 3px solid #fff7e7;
  text-decoration: none;
  font-weight: 950;
  box-shadow: 5px 5px 0 #000;
}
.button.primary { background: #d71920; color: #fff; }
.button.ghost { background: transparent; color: #fff7e7; }
.poster-stack { position: relative; min-height: 420px; }
.poster {
  border: 4px solid #111;
  background: #fff7e7;
  color: #111;
  box-shadow: 12px 12px 0 rgba(0,0,0,.75);
  font-weight: 950;
}
.poster-main {
  min-height: 300px;
  padding: 34px;
  display: grid;
  align-content: center;
  transform: rotate(-4deg);
}
.poster-main span { color: #d71920; letter-spacing: .14em; font-size: 16px; }
.poster-main strong { display: block; margin-top: 10px; font-size: clamp(54px, 8vw, 96px); line-height: .88; letter-spacing: -.08em; }
.poster-sub {
  position: absolute;
  max-width: 260px;
  padding: 16px 18px;
  background: #ffbd2e;
  color: #111;
  line-height: 1.35;
}
.poster-sub.left { left: -14px; bottom: 42px; transform: rotate(7deg); }
.poster-sub.right { right: -10px; top: 44px; transform: rotate(6deg); background: #d71920; color: #fff; }
.chant-bar {
  display: flex;
  gap: 0;
  overflow: hidden;
  border-top: 4px solid #111;
  border-bottom: 4px solid #111;
  background: #ffbd2e;
  color: #111;
}
.chant-bar span {
  flex: 1;
  min-width: max-content;
  padding: 16px 24px;
  border-right: 3px solid #111;
  font-weight: 950;
  text-align: center;
}
.intro-section, .problem-section, .demands-section, .source-section { background: #fff7e7; color: #111; }
.evidence-section, .chain-section, .quote-section, .closing-section { background: #11100f; color: #fff7e7; }
.intro-card, .closing-card, .quote-wall {
  width: min(980px, 100%);
  margin: 0 auto;
  border: 4px solid #111;
  background: #fff7e7;
  color: #111;
  padding: clamp(24px, 5vw, 54px);
  box-shadow: 12px 12px 0 #d71920;
}
.quote-wall { background: #171312; color: #fff7e7; border-color: #fff7e7; box-shadow: 12px 12px 0 #ffbd2e; }
.intro-card blockquote {
  margin: 0 0 18px;
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -.065em;
  font-weight: 950;
}
.intro-card p, .closing-card p, .quote-wall p { line-height: 1.8; font-weight: 750; }
.section-heading { width: min(980px, 100%); margin: 0 auto 34px; }
.section-heading h2, .closing-card h2, .quote-wall h2 {
  margin: 0;
  color: inherit;
  font-size: clamp(34px, 5vw, 68px);
  line-height: 1.05;
  letter-spacing: -.07em;
  word-break: keep-all;
}
.section-heading p { color: inherit; opacity: .78; line-height: 1.75; font-weight: 750; }
.problem-grid, .demand-grid, .stat-grid {
  width: min(1180px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.problem-card, .demand-card, .ref-stat-card {
  border: 4px solid #111;
  background: #fff;
  color: #111;
  padding: 24px;
  box-shadow: 8px 8px 0 #111;
}
.problem-card .number {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  background: #d71920;
  color: #fff;
  border: 3px solid #111;
  font-weight: 950;
}
.problem-card h3, .demand-card h3 { margin: 18px 0 10px; font-size: 24px; letter-spacing: -.04em; }
.problem-card p, .demand-card p, .ref-stat-card p { line-height: 1.7; font-weight: 700; color: #352a22; }
.ref-stat-card { background: #fff7e7; box-shadow: 8px 8px 0 #ffbd2e; min-width: 0; }
.ref-stat-card strong {
  display: block;
  color: #d71920;
  font-size: clamp(36px, 4.2vw, 68px);
  line-height: 1;
  white-space: nowrap;
  word-break: keep-all;
  letter-spacing: -.055em;
}
.ref-stat-card strong .counter {
  display: inline;
  margin-top: 0;
  white-space: nowrap;
}
.ref-stat-card span { display: block; margin-top: 10px; font-weight: 950; }
.chain-list {
  width: min(1050px, 100%);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}
.chain-list li {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 14px;
  align-items: center;
  border: 3px solid #fff7e7;
  background: #181513;
  padding: 18px;
  box-shadow: 6px 6px 0 #d71920;
}
.chain-list li span { grid-row: span 2; color: #ffbd2e; font-size: 28px; font-weight: 950; }
.chain-list strong { font-size: 22px; }
.chain-list p { margin: 0; color: #d9c6aa; font-weight: 700; line-height: 1.6; }
.source-list {
  width: min(980px, 100%);
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.source-list a {
  display: block;
  color: #111;
  text-decoration: none;
  background: #fff;
  border: 3px solid #111;
  padding: 16px 18px;
  box-shadow: 5px 5px 0 #ffbd2e;
  font-weight: 850;
}
.site-footer {
  position: relative;
  z-index: 1;
  background: #111;
  color: #fff7e7;
  border-top: 4px solid #ffbd2e;
  padding: 34px 18px;
  text-align: center;
  font-weight: 850;
}
.reference-main #write, .reference-main #voices, .reference-main .site-shell.section:not(.ref-design *) {
  position: relative;
  z-index: 2;
}
.reference-main #write { padding-top: 70px; }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.reveal.is-visible { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; min-height: auto; }
  .poster-stack { min-height: 330px; }
  .problem-grid, .demand-grid, .stat-grid { grid-template-columns: 1fr; }
  .site-nav { display: none; position: absolute; right: 18px; top: 72px; padding: 10px; background: #111; border: 2px solid #fff7e7; box-shadow: 6px 6px 0 #000; }
  .site-nav.open { display: grid; }
  .menu-button { display: inline-flex; }
  .chant-bar { overflow-x: auto; }
}