:root {
  --paper: #f5ecd8;
  --paper-deep: #ead9b5;
  --ink: #121212;
  --muted: #5f584b;
  --blue: #0647c9;
  --red: #e4472e;
  --green: #1f7a4d;
  --rule: rgba(18, 18, 18, .18);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 30% 10%, rgba(255,255,255,.55), transparent 20rem),
    linear-gradient(90deg, rgba(18,18,18,.025) 1px, transparent 1px),
    var(--paper);
  background-size: auto, 11px 11px, auto;
  font-family: "Arial Narrow", "Roboto Condensed", "Franklin Gothic Medium", Arial, sans-serif;
  line-height: 1.55;
}

a { color: var(--blue); text-underline-offset: .18em; }
img { max-width: 100%; height: auto; }
button, .button-link {
  border: 2px solid var(--ink);
  background: var(--blue);
  color: #fff;
  padding: .75rem 1rem;
  font: 800 .9rem/1 "Arial Narrow", Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 3px 3px 0 var(--ink);
}
button:hover, .button-link:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
button:focus-visible, a:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; }
.button-link { display: inline-flex; text-decoration: none; align-items: center; }
.button-row { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.skip-link { position: absolute; left: -999px; top: 1rem; background: #fff; padding: .5rem; z-index: 20; }
.skip-link:focus { left: 1rem; }

.site-header {
  border-bottom: 4px solid var(--ink);
  background: rgba(245, 236, 216, .96);
  position: sticky;
  top: 0;
  z-index: 10;
}
.nav {
  max-width: 1180px;
  margin: 0 auto;
  padding: .85rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: center;
}
.brand { color: var(--ink); text-decoration: none; display: grid; line-height: 1; }
.brand span, h1, h2, h3 {
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 0;
}
.brand span { font-size: clamp(1.4rem, 4vw, 2.3rem); font-weight: 900; }
.brand small { color: var(--red); font-weight: 900; text-transform: uppercase; }
.nav-links { display: flex; gap: .9rem; flex-wrap: wrap; justify-content: end; }
.nav-links a { color: var(--ink); font-weight: 900; text-transform: uppercase; text-decoration: none; border-bottom: 2px solid transparent; }
.nav-links a:hover { border-color: var(--red); }

.hero, .page-hero {
  border-bottom: 4px solid var(--ink);
  padding: clamp(2rem, 7vw, 5rem) 1rem 2rem;
}
.hero-inner, .wrap { max-width: 1180px; margin: 0 auto; }
.kicker, .stamp {
  display: inline-block;
  border: 2px solid var(--red);
  color: var(--red);
  padding: .25rem .5rem;
  transform: rotate(-1deg);
  font-weight: 900;
  text-transform: uppercase;
  background: rgba(255,255,255,.35);
}
h1 { font-size: clamp(3rem, 13vw, 8rem); line-height: .86; margin: .7rem 0; max-width: 980px; }
.page-hero h1 { font-size: clamp(2.3rem, 8vw, 5.5rem); }
.dek { font: 900 clamp(1.2rem, 3vw, 2rem)/1.2 Georgia, serif; max-width: 780px; }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 2rem; align-items: end; }
.hero-art {
  min-height: 320px;
  border: 4px solid var(--ink);
  background:
    linear-gradient(135deg, transparent 0 46%, var(--red) 46% 48%, transparent 48%),
    radial-gradient(circle at 70% 30%, var(--blue), transparent 12rem),
    radial-gradient(circle at 30% 60%, var(--red), transparent 9rem),
    #f9f3e5;
  position: relative;
  overflow: hidden;
}
.hero-art::before {
  content: "REAL?";
  position: absolute;
  font: 900 4.4rem/1 Georgia, serif;
  color: var(--ink);
  transform: rotate(-10deg);
  left: 1rem;
  top: 2rem;
}
.hero-art::after {
  content: "SOURCE CHECKED";
  position: absolute;
  right: -2rem;
  bottom: 2rem;
  border: 4px solid var(--red);
  color: var(--red);
  padding: .75rem;
  transform: rotate(12deg);
  font-weight: 900;
  font-size: 1.4rem;
}

.section { padding: 2.5rem 1rem; border-bottom: 2px solid var(--rule); }
.section-title { display:flex; justify-content:space-between; gap:1rem; align-items:end; border-bottom: 3px solid var(--ink); margin-bottom: 1rem; }
.section-title h2 { margin: 0 0 .5rem; font-size: clamp(1.8rem, 5vw, 3.4rem); }
.grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 1rem; }
.fact-card {
  border: 2px solid var(--ink);
  background: rgba(255,255,255,.32);
  padding: 1rem;
  min-height: 230px;
  display: grid;
  align-content: space-between;
  box-shadow: 5px 5px 0 rgba(18,18,18,.12);
}
.fact-card h3 { font-size: 1.45rem; line-height: 1.05; margin: .4rem 0; }
.meta { color: var(--muted); font-weight: 800; text-transform: uppercase; font-size: .85rem; }
.answer { font: 700 1.15rem/1.35 Georgia, serif; }
.category-list { display:flex; gap:.5rem; flex-wrap:wrap; }
.category-list a, .pill { border: 2px solid var(--ink); padding: .3rem .55rem; color: var(--ink); text-decoration: none; font-weight: 900; background: #fff8; }

.challenge {
  border: 4px solid var(--ink);
  background: #fff8;
  padding: clamp(1rem, 4vw, 2rem);
  box-shadow: 7px 7px 0 var(--red);
}
.challenge .claim { font: 900 clamp(1.7rem, 5vw, 3.6rem)/1.02 Georgia, serif; margin: .5rem 0 1rem; }
.result { border-top: 3px solid var(--ink); margin-top: 1rem; padding-top: 1rem; }
.source-box { border-left: 5px solid var(--blue); padding-left: 1rem; }
.article { max-width: 850px; margin: 0 auto; padding: 2rem 1rem; }
.article h1 { font-size: clamp(2.3rem, 8vw, 5rem); }
.article p, .article li { font-size: 1.07rem; }
.article-lede { font: 800 1.45rem/1.35 Georgia, serif; }
.fact-image {
  border: 3px solid var(--ink);
  background: var(--paper-deep);
  padding: 1rem;
  margin: 1.5rem 0;
}
.fact-image div { aspect-ratio: 16/9; display:grid; place-items:center; font: 900 clamp(2rem, 8vw, 5rem)/1 Georgia, serif; color: var(--blue); border: 2px dashed var(--ink); text-align:center; padding:1rem; }
.two-col { display:grid; grid-template-columns: minmax(0, 1fr) minmax(260px, 360px); gap: 2rem; align-items:start; }
.sidebar { border-left: 3px solid var(--ink); padding-left: 1rem; }
.consent-panel {
  position: fixed;
  inset: auto 1rem 1rem 1rem;
  z-index: 30;
}
.consent-panel > div {
  max-width: 720px;
  margin: 0 auto;
  border: 4px solid var(--ink);
  background: var(--paper);
  padding: 1rem;
  box-shadow: 8px 8px 0 var(--ink);
}
.choice-row { display:flex; justify-content:space-between; border-top:1px solid var(--rule); padding:.5rem 0; gap: 1rem; }
.privacy-float {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 25;
  padding: .55rem .7rem;
  font-size: .75rem;
  background: var(--ink);
}
.site-footer {
  padding: 2rem 1rem 5rem;
  background: var(--ink);
  color: var(--paper);
  display:grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 1rem;
}
.site-footer a { color: var(--paper); display:inline-block; margin: 0 .7rem .5rem 0; }

@media (max-width: 760px) {
  .nav, .hero-grid, .two-col, .site-footer { grid-template-columns: 1fr; display: grid; }
  .nav-links { justify-content: start; }
  .hero-art { min-height: 220px; }
  .site-footer { padding-bottom: 6rem; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
}