/* Muggsy — design tokens & base
   Palette: self-derived (no verified DB match for thrift/ceramic; labeled fallback).
   Style direction: Brutalism-adjacent, warm newsprint. */
:root{
  --paper:#F6F1E7;
  --paper-2:#EFE7D8;
  --card:#FFFDF8;
  --ink:#1B1714;
  --ink-soft:#4A413A;
  --muted:#7A6E62;
  --sticker:#D8431F;
  --glaze:#2E6E67;
  --highlight:#F2C33D;
  --rule:#1B1714;
  --shadow:4px 4px 0 var(--rule);
  --shadow-lg:8px 8px 0 var(--rule);
  --measure:62ch;
  --sp-1:.5rem; --sp-2:1rem; --sp-3:1.5rem; --sp-4:2rem;
  --sp-5:3rem; --sp-6:4.5rem; --sp-7:7rem;
  --font-display:'Bricolage Grotesque','Helvetica Neue',sans-serif;
  --font-body:'Newsreader',Georgia,serif;
  --font-mono:'JetBrains Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#15120F; --paper-2:#1D1915; --card:#201C17;
    --ink:#F3EDE1; --ink-soft:#C9BFB0; --muted:#9A8E7E;
    --sticker:#FF6B44; --glaze:#5FB3A8; --highlight:#F2C33D;
    --rule:#F3EDE1; --shadow:4px 4px 0 var(--rule); --shadow-lg:8px 8px 0 var(--rule);
  }
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--font-body); font-size:19px; line-height:1.62;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(var(--paper-2) 1px,transparent 1px);
  background-size:22px 22px;
}
img,svg{max-width:100%}
h1,h2,h3,.display{font-family:var(--font-display); line-height:1.02; letter-spacing:-.02em; font-weight:800}
h2{font-size:clamp(1.8rem,4.4vw,3rem); margin:0 0 var(--sp-3)}
h3{font-size:clamp(1.15rem,2.4vw,1.5rem); margin:0 0 var(--sp-2)}
p{margin:0 0 1.15em}
a{color:inherit}
.mono{font-family:var(--font-mono); font-size:.72em; letter-spacing:.1em; text-transform:uppercase}
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--sp-3)}
.col{max-width:var(--measure); margin:0 auto}
section{padding:var(--sp-6) 0}
.lede{font-size:1.22em; color:var(--ink-soft)}
.kicker{display:inline-block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.18em;
  text-transform:uppercase; border:2px solid var(--rule); padding:.3rem .6rem; margin-bottom:var(--sp-3);
  background:var(--highlight); color:#1B1714}
.rule-band{border-top:3px solid var(--rule); border-bottom:3px solid var(--rule); background:var(--paper-2)}
.big-statement{font-family:var(--font-display); font-weight:800; font-size:clamp(2rem,6.5vw,4.4rem);
  line-height:.98; letter-spacing:-.035em; text-wrap:balance}
/* buttons */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:52px; padding:.85rem 1.6rem; font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  background:var(--sticker); color:#FFF8F2; border:3px solid var(--rule); box-shadow:var(--shadow);
  text-decoration:none; cursor:pointer; transition:transform .16s ease, box-shadow .16s ease}
.btn:hover{transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--rule)}
.btn:active{transform:translate(2px,2px); box-shadow:2px 2px 0 var(--rule)}
.btn--ghost{background:var(--card); color:var(--ink)}
:focus-visible{outline:3px solid var(--glaze); outline-offset:3px}
/* cards */
.card{background:var(--card); border:3px solid var(--rule); box-shadow:var(--shadow); padding:var(--sp-3)}
.grid{display:grid; gap:var(--sp-3)}
@media(min-width:640px){.g2{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
 .g4{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* sticker */
.sticker{position:absolute; display:grid; place-items:center; width:78px; height:78px; border-radius:50%;
  background:var(--sticker); color:#FFF8F2; border:3px solid var(--rule); font-family:var(--font-display);
  font-weight:800; font-size:.82rem; text-align:center; line-height:1.05; transform:rotate(-11deg); z-index:3}
/* reveal */
/* Reveal is an enhancement: hidden only when JS confirms it can animate. */
.js .reveal{opacity:0; transform:translateY(18px)}
.reveal.in{opacity:1; transform:none; transition:opacity .5s ease, transform .5s cubic-bezier(.2,.8,.3,1.1)}
@media (prefers-reduced-motion:reduce){.js .reveal{opacity:1; transform:none; transition:none}}