/* Roast My Snack — site tokens */
:root {
  --paper: #F4EFE6;
  --paper-2: #EBE3D4;
  --paper-3: #E5DFCF;
  --ink: #0E0E10;
  --ink-2: #1F1B17;
  --mute: #6B6258;
  --line: rgba(14, 14, 16, 0.12);
  --line-2: rgba(14, 14, 16, 0.06);

  --flame: oklch(0.72 0.17 50);
  --flame-deep: oklch(0.55 0.19 38);
  --mint: oklch(0.82 0.13 165);
  --mint-deep: oklch(0.55 0.13 165);
  --hot: oklch(0.70 0.20 8);
  --plum: oklch(0.40 0.12 330);
  --sun: oklch(0.88 0.16 95);

  --hoodie: #3F6B3A; /* dr hawley hoodie green */

  --r-card: 22px;
  --r-pill: 999px;

  --font-display: 'Archivo Black', 'Helvetica Neue', system-ui, sans-serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--font-body); color: var(--ink); }
body {
  background: var(--paper);
  background-image:
    radial-gradient(rgba(14,14,16,0.035) 1px, transparent 1px),
    radial-gradient(rgba(14,14,16,0.025) 1px, transparent 1px);
  background-size: 6px 6px, 14px 14px;
  background-position: 0 0, 3px 3px;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
button { font-family: inherit; }

/* ---------- type ---------- */
.title-mega {
  font-family: var(--font-display);
  font-size: clamp(56px, 9vw, 148px);
  line-height: 0.86;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.title-xl {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.4vw, 72px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
}
.title-l {
  font-family: var(--font-display);
  font-size: clamp(28px, 3vw, 40px);
  line-height: 0.95;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}
.title-m {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mute);
}
.mono { font-family: var(--font-mono); }
.body { font-size: 17px; line-height: 1.45; color: var(--ink-2); }
.body-sm { font-size: 14px; line-height: 1.5; color: var(--ink-2); }

/* ---------- halftone surfaces ---------- */
.halftone-orange {
  background-color: var(--flame);
  background-image: radial-gradient(rgba(0,0,0,0.22) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.halftone-mint {
  background-color: var(--mint);
  background-image: radial-gradient(rgba(0,0,0,0.18) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.halftone-ink {
  background-color: var(--ink);
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.halftone-sun {
  background-color: var(--sun);
  background-image: radial-gradient(rgba(0,0,0,0.18) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.halftone-hot {
  background-color: var(--hot);
  background-image: radial-gradient(rgba(0,0,0,0.16) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.halftone-plum {
  background-color: var(--plum);
  background-image: radial-gradient(rgba(255,255,255,0.10) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}
.halftone-hoodie {
  background-color: var(--hoodie);
  background-image: radial-gradient(rgba(0,0,0,0.18) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
}

/* ---------- common card ---------- */
.card {
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: var(--r-card);
  box-shadow: 4px 4px 0 var(--ink);
}
.card-flat {
  background: #fff;
  border: 1.5px solid var(--ink);
  border-radius: var(--r-card);
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  border: 2px solid var(--ink);
  border-radius: 14px;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 14px 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  box-shadow: 4px 4px 0 var(--ink);
  transition: transform 80ms ease, box-shadow 80ms ease;
}
.btn:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn:hover { transform: translate(-1px,-1px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active:hover { transform: translate(2px,2px); box-shadow: 2px 2px 0 var(--ink); }
.btn.flame { background: var(--flame); color: var(--ink); }
.btn.mint { background: var(--mint); color: var(--ink); }
.btn.ghost { background: transparent; color: var(--ink); }
.btn.sun { background: var(--sun); color: var(--ink); }
.btn.sm { font-size: 13px; padding: 10px 14px; border-radius: 10px; box-shadow: 3px 3px 0 var(--ink); }
.btn.sm:hover { box-shadow: 4px 4px 0 var(--ink); }
.btn.sm:active { box-shadow: 1px 1px 0 var(--ink); }

/* ---------- chip / pill ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  background: #fff;
  white-space: nowrap;
}
.chip.dark { background: var(--ink); color: var(--paper); }
.chip.flame { background: var(--flame); }
.chip.mint { background: var(--mint); }
.chip.sun { background: var(--sun); }

/* ---------- stamp ---------- */
.stamp {
  font-family: var(--font-display);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 2.5px solid currentColor;
  padding: 4px 10px 3px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  background: rgba(255,255,255,0.55);
  transform: rotate(-3deg);
}

/* ---------- speech bubble ---------- */
.bubble {
  position: relative;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 18px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 13px;
  line-height: 1.25;
  box-shadow: 3px 3px 0 var(--ink);
}
.bubble.bubble-down::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  background: #fff;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  bottom: -10px; left: 28px;
}

/* ---------- risk track ---------- */
.risk-track {
  height: 12px; border-radius: 999px;
  background: linear-gradient(90deg, var(--mint) 0%, var(--sun) 50%, var(--flame) 80%, var(--hot) 100%);
  border: 2px solid var(--ink);
  position: relative;
}
.risk-pin {
  position: absolute; top: -6px; width: 5px; height: 24px;
  background: var(--ink); border-radius: 2px;
  transition: left 400ms cubic-bezier(.5,.1,.3,1.2);
}

/* ---------- dotted divider ---------- */
.dotted {
  background-image: linear-gradient(to right, var(--ink) 50%, transparent 50%);
  background-size: 8px 1.5px;
  background-repeat: repeat-x;
  background-position: 0 50%;
  height: 1.5px;
}

/* ---------- layout helpers ---------- */
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; }
.section { padding: 96px 0; }
.section-tight { padding: 56px 0; }

@media (max-width: 720px) {
  .section { padding: 64px 0; }
  .wrap { padding: 0 18px; }
}

/* utility */
.scroll-hide::-webkit-scrollbar { display: none; }
.scroll-hide { scrollbar-width: none; }

/* small animations */
@keyframes pulse-dot {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(0.6); opacity: 0.6; }
}
@keyframes wobble-tag {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}
@keyframes bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes spin-slow {
  to { transform: rotate(360deg); }
}
@keyframes shout-wobble {
  0%, 100% { transform: rotate(8deg) scale(1); }
  50% { transform: rotate(6deg) scale(1.04); }
}
.bob { animation: bob 3.4s ease-in-out infinite; }

/* sticker badge — rotating star */
.sticker-star {
  width: 110px; height: 110px;
  position: relative;
  display: inline-grid;
  place-items: center;
  color: var(--ink);
}
.sticker-star svg.ring { position: absolute; inset: 0; animation: spin-slow 22s linear infinite; }
.sticker-star .core {
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 0.95;
  text-align: center;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* halftone pseudo overlay for blocks */
.halftone-overlay {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(0,0,0,0.18) 1.2px, transparent 1.4px);
  background-size: 8px 8px;
  pointer-events: none;
}

/* marquee */
.marquee { overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--ink); color: var(--paper); }
.marquee-track {
  display: flex; gap: 40px; padding: 14px 0;
  width: max-content;
  align-items: center;
  animation: marquee 38s linear infinite;
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: 22px;
  white-space: nowrap;
}
.marquee-track span { display: inline-flex; gap: 40px; align-items: center; }
.marquee-track .dot { width: 10px; height: 10px; background: var(--flame); border-radius: 999px; display: inline-block; }