/* ==========================================================================
   FOUR-COLOR VÖID — base.css
   Design tokens, reset, base typography. Extracted verbatim from the root
   mockups (void-comic-homepage-v2.html is the token source of truth).
   ========================================================================== */

:root{
  --newsprint:#F3E9C6;
  --newsprint-lift:#FAF2D6;
  --ink:#1A161B;
  --blue:#2A5CAA;
  --blue-deep:#1F4784;
  --red:#D63426;
  --yellow:#F7C824;
  --shadow-hard:6px 6px 0 var(--ink);
  --border-panel:5px solid var(--ink);
  --font-display:'Bangers',Impact,sans-serif;
  --font-slab:'Alfa Slab One',Impact,serif;
  --font-caption:'Comic Neue',Verdana,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--newsprint);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.55;
  overflow-x:hidden;
}
img,svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px dashed var(--red);outline-offset:3px}

/* halftone utility */
.dots-lite{background-image:radial-gradient(rgba(26,22,27,.16) 1.2px,transparent 1.4px);background-size:8px 8px}

/* CMYK misregistration ghost on big display type */
.misreg{text-shadow:2px 0 0 rgba(214,52,38,.5),-2px 0 0 rgba(42,92,170,.45)}

/* shared shell + section rhythm */
.shell{max-width:1160px;margin:0 auto}
section{padding:64px 20px}

/* section furniture (shared type) */
.sec-caption{
  display:inline-block;background:var(--yellow);border:4px solid var(--ink);
  font:700 14px/1 var(--font-caption);letter-spacing:.1em;text-transform:uppercase;
  padding:9px 14px 8px;box-shadow:4px 4px 0 var(--ink);transform:rotate(-1deg);
  margin-bottom:18px;
}
h2.sec-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(38px,5.5vw,64px);letter-spacing:.02em;line-height:1;
  margin:0 0 12px;
}
.sec-sub{font:700 15px/1.5 var(--font-caption);text-transform:uppercase;letter-spacing:.04em;max-width:640px}

h1.page-title{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(42px,6vw,72px);letter-spacing:.02em;line-height:.95;
  margin:22px 0 8px;
}

/* ============ REDUCED MOTION: everything holds still ============ */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
  .boom{opacity:1;transform:rotate(var(--r,0deg)) scale(1)}
  .card .stamp,.p-art .stamp,.conf-stamp{opacity:1;transform:rotate(-8deg)}
}