/* ============================================================
   STREAM WITH LIEN — Design System
   Warm cream + warm black, coral accent, "sticker" outline motif
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,500;12..96,600;12..96,700;12..96,800&family=Hanken+Grotesk:wght@400;500;600;700&family=Caveat:wght@600;700&display=swap');

:root {
  /* --- Paper / ink (warm) --- */
  --paper:        #F3E7CF;   /* main warm cream */
  --paper-2:      #EEDFC2;   /* slightly deeper cream (alt sections) */
  --card:         #FBF5E9;   /* light cream card surface */
  --card-2:       #FFFCF5;   /* near-white card */
  --ink:          #211B14;   /* warm near-black */
  --ink-soft:     #4A3F31;   /* secondary text */
  --ink-mute:     #8A7A64;   /* muted / captions */
  --line:         #211B14;   /* outline color (the logo motif) */

  /* --- Accent (single warm coral) --- */
  --coral:        #E66A38;
  --coral-deep:   #C9542A;
  --coral-soft:   #F6C9AE;

  /* --- Utility brand colors (used ONLY for their literal brands) --- */
  --twitch:       #9146FF;
  --discord:      #5865F2;

  /* --- Geometry --- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-xl: 34px;
  --r-pill: 999px;

  /* --- Sticker shadow motif (hard offset, like the logo drop shadow) --- */
  --bw: 2.5px;                                   /* outline weight */
  --shadow-sticker: 5px 6px 0 var(--ink);
  --shadow-sticker-sm: 3px 4px 0 var(--ink);
  --shadow-soft: 0 18px 40px -22px rgba(33,27,20,0.55);

  --maxw: 1180px;
  --nav-h: 74px;

  --font-display: 'Bricolage Grotesque', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;
  --font-hand: 'Caveat', cursive;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* subtle warm paper texture via layered dot grid */
.app-bg::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: radial-gradient(rgba(33,27,20,0.045) 1px, transparent 1.4px);
  background-size: 22px 22px;
  background-position: -8px -8px;
}

::selection { background: var(--coral); color: var(--card-2); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 800;
  line-height: 1.02;
  margin: 0;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

p { line-height: 1.55; text-wrap: pretty; }

a { color: inherit; text-decoration: none; }

img { display: block; max-width: 100%; }

/* ---------- Layout helpers ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 24px; position: relative; z-index: 1; }
.section { padding: clamp(56px, 8vw, 110px) 0; position: relative; z-index: 1; }

.eyebrow {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--coral-deep);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.eyebrow::before {
  content: "";
  width: 22px; height: 2.5px; border-radius: 2px;
  background: var(--coral);
}

/* ---------- Buttons ---------- */
.btn {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  border: var(--bw) solid var(--line);
  border-radius: var(--r-pill);
  padding: 14px 26px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: var(--card-2);
  color: var(--ink);
  box-shadow: var(--shadow-sticker-sm);
  transition: transform .14s cubic-bezier(.2,.8,.2,1), box-shadow .14s ease, background .14s ease;
  white-space: nowrap;
  text-align: center;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 5px 6px 0 var(--ink); }
.btn:active { transform: translate(2px,3px); box-shadow: 1px 1px 0 var(--ink); }
.btn--primary { background: var(--coral); color: #fff; }
.btn--ink { background: var(--ink); color: var(--paper); }
.btn--ghost { background: transparent; box-shadow: none; }
.btn--ghost:hover { background: rgba(33,27,20,0.06); box-shadow: none; transform: none; }
.btn--sm { padding: 10px 18px; font-size: 14px; }
.btn--lg { padding: 17px 32px; font-size: 18px; }

/* ---------- Sticker card ---------- */
.sticker {
  background: var(--card);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sticker);
}

/* ---------- Live badge ---------- */
.live {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--ink); color: var(--card-2);
  border-radius: var(--r-pill); padding: 7px 14px 7px 12px;
}
.live .dot { width: 9px; height: 9px; border-radius: 50%; background: #ff4d4d; box-shadow: 0 0 0 0 rgba(255,77,77,.7); animation: pulse 1.8s infinite; }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,77,77,.6); }
  70% { box-shadow: 0 0 0 9px rgba(255,77,77,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,77,77,0); }
}

/* ---------- Image placeholder ---------- */
.ph {
  position: relative;
  background-color: var(--paper-2);
  background-image: repeating-linear-gradient(45deg, rgba(33,27,20,0.05) 0 12px, rgba(33,27,20,0.0) 12px 24px);
  border: var(--bw) solid var(--line);
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  color: var(--ink-soft);
}
.ph span {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 12px; letter-spacing: 0.04em;
  background: var(--card-2);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 2px 2px 0 var(--ink);
}

/* ---------- Tag / chip ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; font-size: 13px;
  background: var(--card-2); color: var(--ink);
  border: 2px solid var(--line); border-radius: var(--r-pill);
  padding: 6px 13px;
}

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1); }
.reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---------- Marquee ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__inner { display: inline-flex; gap: 0; will-change: transform; animation: scroll-x 26s linear infinite; }
@keyframes scroll-x { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee:hover .marquee__inner { animation-play-state: paused; }

/* ---------- Utility ---------- */
.grid { display: grid; gap: 22px; }
.flex { display: flex; }
.center { display: flex; align-items: center; justify-content: center; }
.stack { display: flex; flex-direction: column; }
.muted { color: var(--ink-mute); }
.soft { color: var(--ink-soft); }