/* ============================================================
   DISTORTION DAILY — punk DIY design system
   Aged paper, black ink, distressed red. Dissent is American.
   ============================================================ */
:root{
  --paper:#f3eee1;
  --card:#faf6ea;
  --ink:#181410;
  --red:#b3232a;
  --blue:#22365c;
  --yellow:#e8a90c;
  --tape:rgba(216,196,150,.82);
  --shadow:7px 7px 0 var(--ink);
  --font-display:'Anton', Impact, sans-serif;
  --font-body:'Archivo', system-ui, -apple-system, sans-serif;
  --font-mono:'Courier Prime', 'Courier New', monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* photocopy grain over everything */
.grain{
  position:fixed;inset:0;z-index:200;pointer-events:none;opacity:.45;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}
img{max-width:100%}
a{color:inherit}
.wrap{max-width:1120px;margin:0 auto;padding:0 1.25rem}

/* ---------- dateline bar ---------- */
.dateline{
  background:var(--ink);color:var(--paper);
  font-family:var(--font-mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;
}
.dateline .wrap{display:flex;justify-content:space-between;gap:1rem;padding-top:.5rem;padding-bottom:.5rem;flex-wrap:wrap}
.dateline .dot{color:var(--red)}

/* ---------- masthead ---------- */
.masthead{text-align:center;padding:2.2rem 1rem 1.4rem;position:relative}
.masthead h1{
  font-family:var(--font-display);
  font-size:clamp(3.2rem, 11vw, 8.5rem);
  line-height:.92;letter-spacing:.01em;text-transform:uppercase;
  transform:rotate(-1.4deg);
}
.masthead h1 .l2{color:var(--red);display:block;margin-top:.02em}
.masthead .star{display:inline-block;width:.72em;height:.72em;vertical-align:-.04em;margin-right:.08em}
.tagline{margin-top:1.1rem}
.stamp{
  display:inline-block;border:3px solid var(--red);color:var(--red);
  font-family:var(--font-mono);font-weight:700;text-transform:uppercase;
  letter-spacing:.18em;padding:.35rem 1rem;transform:rotate(-2deg);font-size:.85rem;
  background:rgba(179,35,42,.06);
}
.stamp.blue{border-color:var(--blue);color:var(--blue);background:rgba(34,54,92,.06)}

/* ---------- nav ---------- */
.mainnav{background:var(--ink);border-top:4px solid var(--red);position:sticky;top:0;z-index:100}
.mainnav .wrap{display:flex;gap:.25rem;align-items:center;overflow-x:auto;padding-top:0;padding-bottom:0}
.mainnav a{
  color:var(--paper);text-decoration:none;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.08em;font-size:.95rem;
  padding:.8rem 1.1rem;white-space:nowrap;
}
.mainnav a:hover{background:var(--red);color:#fff}
.mainnav .home{color:var(--yellow)}

/* ---------- ticker ---------- */
.ticker{background:var(--ink);color:var(--paper);overflow:hidden;white-space:nowrap;border-bottom:4px solid var(--red)}
.ticker-track{display:inline-block;padding:.6rem 0;animation:tick 36s linear infinite;
  font-family:var(--font-mono);font-size:.82rem;letter-spacing:.06em;text-transform:uppercase}
.ticker-track b{color:var(--yellow);font-weight:700}
.ticker-track .sep{color:var(--red);margin:0 1.4rem}
@keyframes tick{to{transform:translateX(-50%)}}
.ticker:hover .ticker-track{animation-play-state:paused}

/* ---------- hero ---------- */
.hero{padding:2.6rem 0 1rem}
.kicker{
  font-family:var(--font-mono);font-size:.75rem;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--paper);background:var(--red);
  display:inline-block;padding:.3rem .8rem;transform:rotate(-1.5deg);margin-bottom:1rem;
}
.kicker.blue{background:var(--blue)}
.hero h2{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(2rem, 6vw, 4.2rem);line-height:1.02;margin-bottom:.9rem;max-width:20ch;
}
.hero h2 a{text-decoration:none}
.hero h2 a:hover{color:var(--red)}
.dek{font-size:1.15rem;max-width:62ch;margin-bottom:1rem}
.meta{font-family:var(--font-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(24,20,16,.65);margin-bottom:1.4rem}
.meta .by{color:var(--red);font-weight:700}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;background:var(--ink);color:var(--paper);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.06em;
  padding:.85rem 1.7rem;text-decoration:none;font-size:1.05rem;
  box-shadow:5px 5px 0 var(--red);transition:transform .12s, box-shadow .12s;
  border:none;cursor:pointer;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red);color:#fff}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--red)}
.btn.red{background:var(--red);box-shadow:5px 5px 0 var(--ink)}
.btn.red:hover{box-shadow:8px 8px 0 var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 3px var(--ink)}
.btn.disabled{display:inline-block;opacity:.45;cursor:not-allowed;box-shadow:5px 5px 0 var(--ink)}

/* ---------- sections ---------- */
section.block{padding:2.4rem 0}
.sec-label{
  font-family:var(--font-display);font-size:clamp(1.7rem, 4.5vw, 2.8rem);
  text-transform:uppercase;margin-bottom:.4rem;text-wrap:balance;
}
.sec-label .n{background:var(--ink);color:var(--paper);padding:.05em .45em;display:inline-block;transform:rotate(-1.5deg);margin-right:.35em}
.sec-sub{font-family:var(--font-mono);font-size:.85rem;letter-spacing:.06em;margin-bottom:1.6rem;color:rgba(24,20,16,.7)}

/* ---------- cards ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1.8rem}
.card{
  background:var(--card);border:2.5px solid var(--ink);box-shadow:var(--shadow);
  padding:1.5rem;position:relative;display:flex;flex-direction:column;
}
.card:nth-child(odd){transform:rotate(-.7deg)}
.card:nth-child(even){transform:rotate(.55deg)}
.card:hover{transform:rotate(0) translate(-2px,-2px)}
.card h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.45rem;line-height:1.1;margin:.7rem 0 .6rem}
.card h3 a{text-decoration:none}
.card h3 a:hover{color:var(--red)}
.card p{font-size:.98rem;margin-bottom:1rem;flex:1}
.card .meta{margin-bottom:.8rem}
.tape::before{
  content:"";position:absolute;top:-15px;left:50%;width:120px;height:30px;
  transform:translateX(-50%) rotate(-4deg);background:var(--tape);
  border-left:2px dashed rgba(0,0,0,.25);border-right:2px dashed rgba(0,0,0,.25);
  box-shadow:0 1px 2px rgba(0,0,0,.15);
}
.card .num{
  font-family:var(--font-display);font-size:2.2rem;color:transparent;
  -webkit-text-stroke:2px var(--red);line-height:1;
}
.pipeline{opacity:.85;border-style:dashed}
.pipeline .stamp{font-size:.7rem}

/* ---------- wire briefs ---------- */
.wire{background:var(--ink);color:var(--paper);border-top:4px solid var(--red);border-bottom:4px solid var(--red)}
.wire .sec-label .n{background:var(--red)}
.brief{border-bottom:2px dashed rgba(243,238,225,.25);padding:1.4rem 0;display:grid;grid-template-columns:auto 1fr;gap:1.2rem;align-items:start}
.brief:last-child{border-bottom:none}
.brief .time{font-family:var(--font-mono);font-size:.75rem;color:var(--yellow);letter-spacing:.1em;white-space:nowrap;padding-top:.25rem}
.brief h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.3rem;letter-spacing:.03em;margin-bottom:.35rem}
.brief h3 .j{color:var(--red)}
.brief p{color:rgba(243,238,225,.85);font-size:.98rem;max-width:70ch}

/* ---------- manifesto strip ---------- */
.manifesto{text-align:center;padding:3.2rem 0}
.manifesto .big{
  font-family:var(--font-display);text-transform:uppercase;
  font-size:clamp(1.9rem, 6vw, 4rem);line-height:1.05;max-width:22ch;margin:0 auto 1.2rem;
}
.manifesto .big em{font-style:normal;color:var(--red)}
.manifesto p{max-width:60ch;margin:0 auto 1rem;font-size:1.05rem}
.halftone{height:26px;margin:2rem auto;max-width:1120px;
  background-image:radial-gradient(circle, rgba(24,20,16,.35) 1.4px, transparent 1.5px);
  background-size:12px 12px;}

/* ---------- autopsy article ---------- */
.article{max-width:760px;margin:0 auto;padding:2.5rem 1.25rem 3rem}
.article h1{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(2.1rem,6vw,3.6rem);line-height:1.02;margin:1rem 0}
.article .dek{font-size:1.2rem;border-left:6px solid var(--red);padding-left:1rem;margin:1.2rem 0 1.6rem;font-style:italic}
.qa{margin:2.2rem 0}
.qa > h2{
  font-family:var(--font-mono);font-weight:700;font-size:.85rem;letter-spacing:.2em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);display:inline-block;padding:.4rem .9rem;margin-bottom:1rem;transform:rotate(-1deg);
}
.qa > h2.alt{background:var(--red)}
.qa p{margin-bottom:1rem;font-size:1.06rem}
.qa p strong{color:var(--red)}
.incentives{
  border:3px solid var(--red);background:rgba(179,35,42,.06);
  padding:1.5rem;margin:2.4rem 0;box-shadow:var(--shadow);transform:rotate(-.5deg);
}
.incentives h3{font-family:var(--font-display);text-transform:uppercase;font-size:1.5rem;margin-bottom:.8rem;color:var(--red)}
.incentives li{margin-bottom:.7rem;margin-left:1.2rem}
.incentives li::marker{content:"★ ";color:var(--red)}
.jabs{background:var(--ink);color:var(--paper);padding:1.5rem;margin:2.4rem 0;transform:rotate(.5deg);box-shadow:var(--shadow)}
.jabs h3{font-family:var(--font-display);text-transform:uppercase;color:var(--yellow);font-size:1.4rem;margin-bottom:.8rem}
.jabs p{margin-bottom:.8rem;color:rgba(243,238,225,.9)}
.verdict{border-top:4px solid var(--ink);border-bottom:4px solid var(--ink);padding:1.4rem 0;margin:2.4rem 0;
  font-family:var(--font-display);text-transform:uppercase;font-size:1.4rem;line-height:1.3}
.draft-note{
  border:2px dashed var(--blue);color:var(--blue);font-family:var(--font-mono);font-size:.8rem;
  letter-spacing:.05em;padding:.9rem 1.1rem;margin-bottom:1.6rem;text-transform:uppercase;
}

/* ---------- ad slots ---------- */
.ad-slot{
  border:2px dashed rgba(24,20,16,.35);min-height:96px;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.3em;color:rgba(24,20,16,.45);
  text-transform:uppercase;margin:2.2rem auto;max-width:970px;
}
.ad-slot.box{min-height:250px;max-width:340px;margin-left:0}

/* ---------- newsletter / support ---------- */
.newsbox{background:var(--blue);color:var(--paper);padding:2.5rem 1.5rem;text-align:center;border-top:4px solid var(--ink);border-bottom:4px solid var(--ink)}
.newsbox h2{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.8rem,5vw,3rem);margin-bottom:.6rem}
.newsbox h2 span{color:var(--yellow)}
.newsbox p{max-width:56ch;margin:0 auto 1.4rem;color:rgba(243,238,225,.85)}
.newsbox form{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.newsbox input{
  font-family:var(--font-mono);font-size:1rem;padding:.8rem 1rem;min-width:260px;
  border:3px solid var(--ink);background:var(--paper);color:var(--ink);
}
.donate-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1.6rem;margin-top:1.6rem}
.donate-card{background:var(--card);border:2.5px solid var(--ink);box-shadow:var(--shadow);padding:1.6rem;text-align:center}
.donate-card:nth-child(odd){transform:rotate(-.6deg)}
.donate-card:nth-child(even){transform:rotate(.6deg)}
.donate-card h2{font-family:var(--font-display);text-transform:uppercase;font-size:1.4rem;margin-bottom:.5rem}
.donate-card p{font-size:.95rem;margin-bottom:1.2rem;color:rgba(24,20,16,.75)}
.donate-split{display:flex;align-items:center;justify-content:center;gap:1.4rem;flex-wrap:wrap}
.donate-split .btn{margin:0}
.qr{margin:0}
.qr img{width:148px;height:auto;display:block;border:2.5px solid var(--ink);box-shadow:4px 4px 0 var(--ink);background:#fff}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--paper);padding:3rem 0 2rem;border-top:6px solid var(--red)}
footer .big{font-family:var(--font-display);text-transform:uppercase;font-size:clamp(1.4rem,4vw,2.4rem);line-height:1.15;margin-bottom:1.4rem;max-width:24ch}
footer .big em{font-style:normal;color:var(--yellow)}
footer nav{display:flex;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.6rem}
footer nav a{color:var(--paper);text-decoration:none;font-family:var(--font-mono);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase}
footer nav a:hover{color:var(--yellow)}
footer .fine{font-family:var(--font-mono);font-size:.72rem;color:rgba(243,238,225,.55);letter-spacing:.05em;line-height:1.8}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .brief{grid-template-columns:1fr}
  .brief .time{padding-top:0}
  .card:nth-child(odd),.card:nth-child(even){transform:none}
  .ad-slot{min-height:72px}
}
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  html{scroll-behavior:auto}
}

/* ---- autopsy chart: pattern map, not a lab report ---- */
.chart-block{margin:2.6rem 0}
.chart-block h2{font-family:var(--font-display);font-size:1.6rem;letter-spacing:.01em;margin-bottom:.4rem}
.chart-note{font-size:.95rem;margin:.6rem 0 1.1rem;max-width:60ch}
.matrix-wrap{overflow-x:auto;border:3px solid var(--ink);box-shadow:var(--shadow);background:var(--card);margin-bottom:2.4rem}
.matrix{border-collapse:collapse;width:100%;min-width:780px;font-size:.78rem}
.matrix th,.matrix td{border:1px solid rgba(24,20,16,.25);padding:.42rem .3rem;text-align:center}
.matrix thead th{background:var(--ink);color:var(--paper);font-family:var(--font-display);font-weight:400;font-size:.7rem;letter-spacing:.02em}
.matrix tbody th{text-align:left;font-size:.8rem;padding-left:.6rem;background:var(--card);position:sticky;left:0;box-shadow:1px 0 0 rgba(24,20,16,.25)}
.matrix td.hit{color:var(--red);font-size:1.05rem;line-height:1}
.matrix tr.totals th,.matrix tr.totals td{background:rgba(179,35,42,.09);font-weight:800}
.matrix tr.totals td{color:var(--red)}
.aftermath{border-collapse:collapse;width:100%;font-size:.86rem;border:3px solid var(--ink);box-shadow:var(--shadow);background:var(--card)}
.aftermath th,.aftermath td{border:1px solid rgba(24,20,16,.25);padding:.55rem .65rem;text-align:left;vertical-align:top}
.aftermath thead th{background:var(--ink);color:var(--paper);font-family:var(--font-display);font-weight:400;letter-spacing:.02em}
.aftermath tbody th{text-align:left;font-size:.88rem}