/* ==========================================================================
   WUATEVAR GAMES — stylesheet
   Design plan:
   - Color: paper off-white ground, true-ink black structure, poppy red accent
     pulled directly from the brand mark (#E03131 fill / #000 stroke).
   - Type: Permanent Marker (hand-lettered, echoes the wordmark) for headings,
     used deliberately/sparingly; Work Sans for body + UI, for readability
     and credibility.
   - Layout: centered "stage" hero built around the flower-shower reveal;
     left-aligned, working-studio layout everywhere else. Numbered steps only
     where content is truly a sequence (Pitch → Vet → Publish).
   - Motion: one orchestrated hero entrance; a single ink-stroke underline
     reveal per section heading; hover wiggle reserved for buttons only;
     a few slow drifting petals in the hero. Reduced-motion respected.
   ========================================================================== */

/* ---------- Fonts ----------
   Served from our own folder rather than Google's, so visitors' IP addresses are not
   sent to Google on every page load (an EU privacy requirement). Latin subset only:
   covers accented letters, curly quotes and dashes. Work Sans is one variable file
   for every weight. */
@font-face{
  font-family: "Permanent Marker";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../assets/fonts/permanent-marker-latin.woff2") format("woff2");
}
@font-face{
  font-family: "Work Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("../assets/fonts/work-sans-latin.woff2") format("woff2");
}

/* ---------- Tokens ---------- */
:root{
  --paper: #FAF3E6;
  --paper-soft: #F1E7D3;
  --paper-edge: #E7D9BE;
  /* One black, matching the black in the logo and the footer banner artwork. */
  --ink: #000000;
  --ink-black: #000000;
  --ink-soft: rgba(0,0,0,0.66);
  --ink-faint: rgba(0,0,0,0.42);
  --poppy: #E03131;
  --poppy-dark: #A31F1F;
  --poppy-deep: #7A1616;
  --poppy-soft: #F7D9D2;
  --poppy-wash: #FBEAE5;

  --go-soft: #C7EFCF;
  --wip-soft: #FBEDA6;

  --font-display: "Permanent Marker", cursive;
  --font-body: "Work Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --container: 1180px;
  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;

  --shadow-card: 0 1px 0 rgba(0,0,0,0.05);
  --ease-out: cubic-bezier(.22,1,.36,1);
}

@media (prefers-color-scheme: dark){
  :root{
    --paper: #16120D;
    --paper-soft: #201A13;
    --paper-edge: #362C1F;
    --ink: #FAF3E6;
    --ink-black: #FAF3E6;
    --ink-soft: rgba(250,243,230,0.72);
    --ink-faint: rgba(250,243,230,0.48);
    --poppy: #FF5B4E;
    --poppy-dark: #FF8073;
    --poppy-deep: #FFA79C;
    --poppy-soft: #3A1A17;
    --poppy-wash: #2A1613;

    --go-soft: #1C3B24;
    --wip-soft: #3E3110;
  }
  img.ink-flip{ filter: invert(1) hue-rotate(180deg); }
}

/* ---------- Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
body{ margin: 0; }
img{ max-width: 100%; display: block; }
a{ color: inherit; }
button{ font: inherit; }
ul{ margin: 0; padding: 0; list-style: none; }
h1,h2,h3,h4,p,figure{ margin: 0; }
input, textarea, select{ font: inherit; color: inherit; }

/* ---------- Base ---------- */
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .25s var(--ease-out), color .25s var(--ease-out);
}

::selection{ background: var(--poppy); color: var(--paper); }

:focus-visible{
  outline: 3px solid var(--poppy);
  outline-offset: 3px;
  border-radius: 4px;
}

.container{
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

section{ padding-block: clamp(56px, 9vw, 108px); }
.section-tight{ padding-block: clamp(40px, 6vw, 64px); }

.section-edge{ border-top: 3px solid var(--ink); }

/* ---------- Typography ---------- */
h1, h2, h3, .display{
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.2px;
  line-height: 1.08;
  color: var(--ink);
}

h1{ font-size: clamp(2.5rem, 3.4vw + 1.6rem, 4.6rem); }
h2{ font-size: clamp(1.9rem, 1.6vw + 1.4rem, 2.8rem); }
h3{ font-size: clamp(1.25rem, 0.6vw + 1.05rem, 1.6rem); }

p{ max-width: 62ch; }
p.lede{
  font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
  color: var(--ink-soft);
}

.eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--poppy-dark);
}
.eyebrow .petal-dot{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--poppy);
  display: inline-block;
}

/* No width cap: a heading uses the full container, so short titles stay on one line on
   desktop and only wrap when the screen is genuinely too narrow. */
.section-head{
  margin-bottom: clamp(32px, 4vw, 52px);
}
.section-head h2{
  position: relative;
  display: inline-block;
  margin-top: 10px;
}
.section-head .ink-underline{
  display: block;
  width: min(360px, 100%);
  height: 14px;
  margin-top: 6px;
}
.section-head .ink-underline path{
  fill: none;
  stroke: var(--poppy);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
}
.section-head.in-view .ink-underline path{
  animation: draw-underline 0.9s var(--ease-out) forwards;
}
@keyframes draw-underline{ to{ stroke-dashoffset: 0; } }

.text-poppy{ color: var(--poppy); }
.text-soft{ color: var(--ink-soft); }
.text-center{ text-align: center; }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  padding: 14px 26px;
  border-radius: 999px;
  border: 2.5px solid var(--ink);
  background: var(--btn-bg);
  color: var(--btn-fg);
  text-decoration: none;
  cursor: pointer;
  transform: rotate(0deg);
  transition: transform .22s var(--ease-out), box-shadow .22s var(--ease-out), background .2s, color .2s;
  white-space: nowrap;
}
.btn:hover{ transform: rotate(-1.5deg) translateY(-2px); }
.btn:active{ transform: rotate(0deg) translateY(0); }

.btn-primary{ --btn-bg: var(--poppy); --btn-fg: #FFF8F1; border-color: var(--ink); }
.btn-primary:hover{ background: var(--poppy-dark); }

.btn-outline{ --btn-bg: transparent; --btn-fg: var(--ink); }
.btn-outline:hover{ background: var(--ink); --btn-fg: var(--paper); color: var(--paper); }

.btn-ghost{
  --btn-bg: transparent; --btn-fg: var(--ink);
  border-color: transparent;
  padding-inline: 6px;
  border-radius: 6px;
}
.btn-ghost:hover{ transform: none; color: var(--poppy); }

/* A button that leads to a platform wears that platform's mark and colour. */
.btn-brand{
  display: inline-flex;
  width: 19px;
  height: 19px;
  flex-shrink: 0;
}
.btn-brand svg{ width: 100%; height: 100%; fill: currentColor; }
.btn-primary.is-discord{ --btn-bg: #5865F2; --btn-fg: #FFFFFF; }
.btn-primary.is-discord:hover{ background: #4752C4; }
.btn-primary.is-twitch{ --btn-bg: #9146FF; --btn-fg: #FFFFFF; }
.btn-primary.is-twitch:hover{ background: #7A2FE0; }
.btn-primary.is-youtube{ --btn-bg: #E62117; --btn-fg: #FFFFFF; }
.btn-primary.is-youtube:hover{ background: #C31C13; }

.btn.is-disabled{ opacity: .5; cursor: not-allowed; }
.btn.is-disabled:hover{ transform: none; background: var(--btn-bg); }

.btn-block{ width: 100%; }
.btn[disabled]{ opacity: .55; cursor: not-allowed; }

.btn-row{
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}

/* ---------- Header ---------- */
.site-header{
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--paper) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 3px solid var(--ink);
}
.site-header .container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-block: 12px;
}
.brand{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
}
.brand img{ height: 34px; width: auto; }
.brand .brand-symbol{ height: 30px; }

.main-nav{
  display: flex;
  align-items: center;
  gap: clamp(14px, 2vw, 30px);
}
.main-nav a{
  text-decoration: none;
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink-soft);
  position: relative;
  padding-block: 4px;
}
.main-nav a:hover{ color: var(--ink); }
.main-nav a[aria-current="page"]{ color: var(--ink); }
.main-nav a[aria-current="page"]::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -3px;
  height: 3px;
  background: var(--poppy);
  border-radius: 3px;
}

.header-actions{ display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.nav-toggle{
  display: none;
  background: none;
  border: 2.5px solid var(--ink);
  border-radius: 10px;
  width: 44px; height: 40px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content: "";
  display: block;
  width: 20px; height: 2.5px;
  background: var(--ink);
  border-radius: 2px;
  position: relative;
  transition: transform .25s var(--ease-out), opacity .2s;
}
.nav-toggle span::before{ position: absolute; top: -7px; }
.nav-toggle span::after{ position: absolute; top: 7px; }
.nav-toggle[aria-expanded="true"] span{ background: transparent; }
.nav-toggle[aria-expanded="true"] span::before{ top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after{ top: 0; transform: rotate(-45deg); }

@media (max-width: 880px){
  .main-nav{
    position: fixed;
    inset: 68px 16px auto 16px;
    background: var(--paper);
    border: 3px solid var(--ink);
    border-radius: var(--radius-md);
    flex-direction: column;
    align-items: stretch;
    padding: 18px;
    gap: 4px;
    box-shadow: 6px 6px 0 rgba(0,0,0,0.12);
    transform: translateY(-12px) scale(.98);
    opacity: 0;
    pointer-events: none;
    transition: transform .22s var(--ease-out), opacity .2s;
  }
  .main-nav.is-open{ transform: translateY(0) scale(1); opacity: 1; pointer-events: auto; }
  .main-nav a{ padding: 12px 8px; border-radius: 8px; }
  .main-nav a:hover{ background: var(--paper-soft); }
  .main-nav .nav-cta-row{
    display: flex; flex-direction: column; gap: 10px;
    margin-top: 8px; padding-top: 12px; border-top: 2px solid var(--paper-edge);
  }
  .header-actions .btn-outline{ display: none; }
  .nav-toggle{ display: inline-flex; }
}
@media (min-width: 881px){
  .main-nav .nav-cta-row{ display: none; }
}

/* ---------- Hero ---------- */
/* The brand video carries its own white background, so the whole hero band is
   white and the copy under it reads as one panel with the film. */
.hero{
  position: relative;
  overflow: hidden;
  background: #FFFFFF;
  padding-block: 0 clamp(56px, 8vw, 96px);
}
/* The film cannot invert, so inside the hero the ink tokens stay light-mode. */
@media (prefers-color-scheme: dark){
  .hero{
    --paper: #FAF3E6;
    --paper-soft: #F1E7D3;
    --paper-edge: #E7D9BE;
    --ink: #18130E;
    --ink-black: #000000;
    --ink-soft: rgba(0,0,0,0.66);
    --ink-faint: rgba(0,0,0,0.42);
    --poppy: #E03131;
    --poppy-dark: #A31F1F;
    --poppy-soft: #F7D9D2;
    --poppy-wash: #FBEAE5;
  }
}
.hero .container{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 26px;
  position: relative;
  z-index: 2;
  padding-top: clamp(32px, 4.5vw, 56px);
}
/* Full-bleed: the video is the top edge of the page, no frame around it. */
.hero-stage{
  width: 100%;
  background: #FFFFFF;
  line-height: 0;
}
.hero-stage video, .hero-stage img{
  width: 100%;
  height: auto;
  max-height: 78vh;
  object-fit: cover;
  display: block;
}

.hero h1{ max-width: 16ch; }
.hero .lede{ max-width: 52ch; }

.hero-petals{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}
.petal{
  position: absolute;
  width: 22px; height: 22px;
  background: url("../assets/poppy-260.png") center/contain no-repeat;
  opacity: 0.16;
  animation: petal-fall linear infinite;
}
@keyframes petal-fall{
  0%{ transform: translateY(-10%) rotate(0deg); }
  100%{ transform: translateY(115vh) rotate(50deg); }
}
@media (prefers-reduced-motion: reduce){
  .petal{ animation: none; display: none; }
}

/* ---------- Flow / Steps (genuine sequence) ---------- */
.flow{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  align-items: start;
}
.flow-step{
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 4px 18px;
  text-align: left;
}
.flow-num{
  width: 52px; height: 52px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--ink);
  background: var(--poppy-soft);
  flex-shrink: 0;
}
.flow-arrow{
  align-self: center;
  margin-top: 18px;
  opacity: .8;
}
.flow-arrow svg{ width: 44px; height: 24px; }
.flow-arrow path{ stroke: var(--ink); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.flow-step h3{ margin-top: 2px; }
.flow-step p{ color: var(--ink-soft); font-size: 0.98rem; }

@media (max-width: 820px){
  .flow{ grid-template-columns: 1fr; gap: 22px; }
  .flow-arrow{ transform: rotate(90deg); margin: 0; }
}

/* ---------- Cards ---------- */
.card-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
@media (max-width: 980px){ .card-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px){ .card-grid{ grid-template-columns: 1fr; } }

/* Two games shouldn't leave a hole where the third column would be.
   Phones keep the single column from the rule above. */
@media (min-width: 621px){
  .card-grid:has(> .game-card:nth-child(2):last-child){
    grid-template-columns: repeat(2, 1fr);
    max-width: 760px;
    margin-inline: auto;
  }
}

.game-card{
  background: #FFFFFF10;
  background-color: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.08);
}
.game-card:nth-child(3n+2){ transform: rotate(-0.6deg); }
.game-card:nth-child(3n+3){ transform: rotate(0.6deg); }
.game-card:hover{ transform: translateY(-4px) rotate(0deg); box-shadow: 7px 9px 0 rgba(0,0,0,0.12); }

.game-card-art{
  aspect-ratio: 16/10;
  background:
    radial-gradient(circle at 22% 30%, var(--poppy-soft), transparent 60%),
    repeating-linear-gradient(135deg, var(--paper-soft) 0 26px, var(--paper) 26px 52px);
  border-bottom: 3px solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  position: relative;
}
.game-card-art img{ width: 54px; opacity: .9; }
.game-status{
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  color: var(--ink);
  box-shadow: 2px 2px 0 rgba(0,0,0,0.12);
}
.game-status.is-ready{ background: var(--go-soft); }
.game-status.is-wip{ background: var(--wip-soft); }
.game-card-body{ padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.game-card-body h3{ font-size: 1.25rem; }
.game-card-body p{ font-size: 0.96rem; color: var(--ink-soft); }
.tag-row{ display: flex; flex-wrap: wrap; gap: 8px; }
.tag{
  font-size: 0.8rem;
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1.6px solid var(--ink);
  color: var(--ink-soft);
}
.game-card-actions{ margin-top: auto; padding-top: 6px; gap: 10px; }
.game-card-actions .btn{ padding: 11px 18px; font-size: 0.92rem; }
.btn-icon{ width: 17px; height: 17px; fill: currentColor; flex-shrink: 0; }

/* Improve -> Spotlight -> Publish is the order the work happens in, so each card carries its step. */
.trio-grid{ counter-reset: trio; }
.feature-card{
  counter-increment: trio;
  position: relative;
  overflow: hidden;
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  padding: 26px 24px;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 6px 8px 0 var(--ink);
  transform: rotate(-0.8deg);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
}
.feature-card:nth-child(2){ transform: rotate(0.6deg); }
.feature-card:nth-child(3){ transform: rotate(-0.4deg); }
.feature-card:hover{ transform: translateY(-6px) rotate(0deg); box-shadow: 10px 13px 0 var(--poppy); }
.feature-card::after{
  content: counter(trio, decimal-leading-zero);
  position: absolute;
  top: -6px;
  right: 14px;
  font-family: var(--font-display);
  font-size: 4.6rem;
  line-height: 1;
  color: var(--poppy-soft);
  pointer-events: none;
  transition: transform .3s var(--ease-out), color .3s;
}
.feature-card:hover::after{ transform: translateY(6px) rotate(-6deg); color: var(--poppy); }
.feature-card > *{ position: relative; z-index: 1; }
.feature-card .icon-badge{
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--poppy);
  border: 3px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
  transition: transform .35s var(--ease-out);
}
.feature-card:hover .icon-badge{ transform: rotate(-14deg) scale(1.1); }
.feature-card .icon-badge svg{ width: 26px; height: 26px; stroke: #FFF8F1; fill: none; stroke-width: 2.2; }
.feature-card p{ color: var(--ink-soft); font-size: 0.98rem; }

/* ---------- Bands / CTA ---------- */
.band{
  background: var(--ink);
  color: var(--paper);
  border-top: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.band h2, .band .display{ color: var(--paper); }
.band p{ color: color-mix(in srgb, var(--paper) 78%, transparent); }
.band .btn-outline{ --btn-fg: var(--paper); border-color: var(--paper); }
.band .btn-outline:hover{ background: var(--paper); color: var(--ink); }
.band .btn-primary{ border-color: var(--paper); }

.cta-split{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  flex-wrap: wrap;
}
.cta-split h2{ max-width: 14ch; }

/* ---------- Quote / pull ---------- */
.pull-quote{
  border-left: 5px solid var(--poppy);
  padding-left: 22px;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.4vw + 1rem, 1.9rem);
  line-height: 1.35;
  max-width: 46ch;
}
.pull-quote cite{ display: block; margin-top: 14px; font-family: var(--font-body); font-style: normal; font-size: 0.95rem; color: var(--ink-soft); }

/* ---------- Two column ---------- */
.split{
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}
.split.reverse{ grid-template-columns: 0.9fr 1.1fr; }
.split.reverse .split-media{ order: 2; }
@media (max-width: 860px){
  .split, .split.reverse{ grid-template-columns: 1fr; }
  .split.reverse .split-media{ order: 0; }
}
.split-media{
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--paper-soft);
  padding: 36px;
  display: flex; align-items: center; justify-content: center;
}
.split-media img{ width: min(240px, 70%); }

.stat-row{ display: flex; gap: clamp(20px, 4vw, 48px); flex-wrap: wrap; margin-top: 26px; }
.stat b{ display: block; font-family: var(--font-display); font-size: 2.1rem; color: var(--poppy); }
.stat span{ font-size: 0.9rem; color: var(--ink-soft); }

/* ---------- Timeline (About) ---------- */
.timeline{ display: flex; flex-direction: column; gap: 0; border-left: 3px solid var(--ink); margin-left: 8px; }
.timeline-item{ position: relative; padding: 0 0 40px 32px; }
.timeline-item:last-child{ padding-bottom: 4px; }
.timeline-item::before{
  content: "";
  position: absolute; left: -9.5px; top: 4px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--poppy); border: 3px solid var(--ink);
}
.timeline-item h3{ font-size: 1.15rem; }
.timeline-item p{ color: var(--ink-soft); font-size: 0.96rem; margin-top: 6px; }

/* ---------- Values grid ---------- */
.value-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 34px; }
@media (max-width: 700px){ .value-grid{ grid-template-columns: 1fr; } }
.value-item h3{ font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.value-item h3 img{ height: 22px; width: auto; }
.value-item p{ color: var(--ink-soft); font-size: 0.96rem; margin-top: 8px; }

/* ---------- Social / streaming ---------- */
.stream-panel{
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--ink);
  color: var(--paper);
}
.stream-panel-top{ padding: 30px clamp(22px, 4vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.stream-panel-top .eyebrow{ color: var(--poppy-deep, var(--poppy)); }
.live-dot{ width: 10px; height: 10px; border-radius: 50%; background: var(--poppy); display: inline-block; box-shadow: 0 0 0 0 rgba(224,49,49,.6); animation: pulse 1.8s infinite; }
@keyframes pulse{
  0%{ box-shadow: 0 0 0 0 rgba(224,49,49,.55); }
  70%{ box-shadow: 0 0 0 10px rgba(224,49,49,0); }
  100%{ box-shadow: 0 0 0 0 rgba(224,49,49,0); }
}
.stream-embed{
  aspect-ratio: 16/9;
  background: repeating-linear-gradient(135deg, #241d15 0 26px, #16120D 26px 52px);
  display: flex; align-items: center; justify-content: center;
  border-top: 3px solid var(--ink);
}
.stream-embed .placeholder-note{
  text-align: center; max-width: 340px; color: color-mix(in srgb, var(--paper) 70%, transparent); font-size: 0.92rem;
}
.stream-embed .placeholder-note strong{ display: block; color: var(--paper); font-family: var(--font-display); font-size: 1.2rem; margin-bottom: 8px; font-weight: 400; }

.social-strip{ display: flex; gap: 16px; flex-wrap: wrap; }
.social-pill{
  display: inline-flex; align-items: center; gap: 10px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 12px 20px;
  text-decoration: none;
  font-weight: 600;
  background: var(--paper);
}
.social-pill:hover{ background: var(--poppy-soft); }
.social-pill svg{ width: 20px; height: 20px; fill: var(--ink); }

.show-schedule{ display: flex; flex-direction: column; gap: 14px; }
.show-schedule-item{
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 16px 0; border-bottom: 2px solid var(--paper-edge);
  gap: 12px; flex-wrap: wrap;
}
.show-schedule-item .day{ font-family: var(--font-display); font-size: 1.15rem; }
.show-schedule-item .desc{ color: var(--ink-soft); font-size: 0.95rem; }

/* ---------- Forms ---------- */
.form-shell{
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 4vw, 44px);
  background: var(--paper-soft);
}
.field{ margin-bottom: 22px; }
.field label{
  display: block;
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 8px;
}
.field .hint{ font-weight: 400; color: var(--ink-faint); font-size: 0.85rem; }
.field input[type=text],
.field input[type=email],
.field input[type=url],
.field select,
.field textarea{
  width: 100%;
  background: var(--paper);
  border: none;
  border-bottom: 2.5px solid var(--ink);
  border-radius: 4px 4px 0 0;
  padding: 12px 14px;
  transition: border-color .18s, background .18s;
}
.field input:hover, .field textarea:hover, .field select:hover{ background: var(--paper-edge); }
.field input:focus, .field textarea:focus, .field select:focus{
  border-color: var(--poppy);
  background: var(--paper);
}
.field textarea{ resize: vertical; min-height: 120px; }
.field-row{ display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 620px){ .field-row{ grid-template-columns: 1fr; } }

.radio-group{ display: flex; flex-wrap: wrap; gap: 10px; }
.radio-chip{ position: relative; }
.radio-chip input{ position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.radio-chip span{
  display: inline-flex; align-items: center;
  padding: 9px 16px;
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.radio-chip input:checked + span{ background: var(--poppy); color: #FFF8F1; }
.radio-chip input:focus-visible + span{ outline: 3px solid var(--poppy); outline-offset: 2px; }

.form-note{
  display: flex; gap: 10px;
  align-items: flex-start;
  font-size: 0.88rem;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1.6px dashed var(--ink-faint);
  border-radius: var(--radius-sm);
  padding: 14px 16px;
  margin-top: 20px;
}

.form-success{
  display: none;
  border: 3px solid var(--ink);
  background: var(--poppy-soft);
  border-radius: var(--radius-md);
  padding: 28px;
  text-align: center;
}
.form-success h3{ margin-bottom: 8px; }
.form-success.is-visible{ display: block; }
.form-shell.is-submitted form{ display: none; }

/* ---------- Sidebar info card (contact/pitch pages) ---------- */
.info-card{
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  padding: 28px;
  background: var(--ink);
  color: var(--paper);
}
.info-card h3{ color: var(--paper); }
.info-card p{ color: color-mix(in srgb, var(--paper) 78%, transparent); font-size: 0.96rem; }
.info-list{ display: flex; flex-direction: column; gap: 18px; margin-top: 18px; }
.info-list-item{ display: flex; gap: 12px; }
.info-list-item .dot{ width: 8px; height: 8px; border-radius: 50%; background: var(--poppy); margin-top: 9px; flex-shrink: 0; }
.info-list-item p{ margin: 0; color: color-mix(in srgb, var(--paper) 82%, transparent); font-size: 0.93rem; }

/* ---------- Divider motif ---------- */
.motif-divider{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding-block: 6px;
}
.motif-divider img{ height: 28px; width: auto; opacity: .85; animation: bob 3.4s ease-in-out infinite; }
.motif-divider .line{ height: 2px; flex: 1; max-width: 220px; background: var(--paper-edge); }
@keyframes bob{
  0%, 100%{ transform: translateY(0) rotate(-2deg); }
  50%{ transform: translateY(-6px) rotate(2deg); }
}

/* ---------- Footer ---------- */
/* Pinned to the same black as the banner artwork directly above it, so the
   painted ground runs into the footer with no seam — in either theme. */
.site-footer{
  background: #000000;
  color: var(--paper);
  border-top: 3px solid #000000;
  padding-block: 56px 28px;
}
@media (prefers-color-scheme: dark){
  .site-footer{ --paper: #FAF3E6; --ink: #000000; }
}
.site-footer .brand img{ height: 40px; }
.footer-grid{
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr;
  gap: 36px;
  padding-bottom: 40px;
}
@media (max-width: 760px){ .footer-grid{ grid-template-columns: 1fr; gap: 30px; } }
.footer-grid h4{
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: .02em;
  color: color-mix(in srgb, var(--paper) 60%, transparent);
  margin-bottom: 14px;
}
.footer-grid ul{ display: flex; flex-direction: column; gap: 10px; }
.footer-grid a{ text-decoration: none; color: color-mix(in srgb, var(--paper) 88%, transparent); font-size: 0.96rem; }
.footer-grid a:hover{ color: var(--poppy); }
.footer-tagline{ color: color-mix(in srgb, var(--paper) 72%, transparent); max-width: 34ch; margin-top: 14px; font-size: 0.96rem; }
.footer-bottom{
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
  padding-top: 24px;
  border-top: 2px solid rgba(250,243,230,0.16);
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--paper) 55%, transparent);
}
/* Brand strip that closes every page; its black ground meets the dark footer. */
.footer-banner{ background: #FFFFFF; line-height: 0; }
.footer-banner img{ display: block; width: 100%; height: auto; }

.footer-socials{ display: flex; gap: 14px; }
.footer-socials a{ color: color-mix(in srgb, var(--paper) 80%, transparent); }
.footer-socials a:hover{ color: var(--poppy); }
.footer-socials svg{ width: 19px; height: 19px; fill: currentColor; }

/* ---------- Two sides of the show: Twitch live, YouTube on demand ---------- */
.channel-split{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.2vw, 26px);
}
@media (max-width: 780px){ .channel-split{ grid-template-columns: 1fr; } }

.channel-pane{
  --net: var(--poppy);
  /* The pane is a saturated colour carrying white chips (icon, LIVE flag,
     button) in both themes, so its ink stays dark. The dark theme's cream ink
     would leave the button's label and border invisible on their white pill. */
  --ink: #000000;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(22px, 2.6vw, 34px);
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  background: var(--net);
  color: #FFFFFF;
  box-shadow: 7px 9px 0 rgba(0,0,0,0.14);
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
/* a light sheen that sweeps across the pane on hover */
.channel-pane::before{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.24) 48%, transparent 66%);
  transform: translateX(-120%);
  transition: transform .8s var(--ease-out);
}
.channel-pane > *{ position: relative; }
.channel-pane:hover{ transform: translateY(-6px) rotate(-0.8deg); box-shadow: 11px 14px 0 #000000; }
.channel-pane.is-youtube:hover{ transform: translateY(-6px) rotate(0.8deg); }
.channel-pane:hover::before{ transform: translateX(120%); }
.channel-pane.is-twitch{ --net: #9146FF; }
.channel-pane.is-youtube{ --net: #E62117; }
.channel-pane h3{ color: #FFFFFF; }
.channel-pane p{ color: rgba(255,255,255,0.90); font-size: 0.97rem; }
.channel-icon{
  width: 58px;
  height: 58px;
  border-radius: 50%;
  border: 3px solid var(--ink);
  background: #FFFFFF;
  color: var(--net);
  display: flex;
  align-items: center;
  justify-content: center;
  /* bob uses `translate`, hover uses `transform`, so the two combine instead of fighting */
  animation: channel-bob 3.2s ease-in-out infinite;
  transition: transform .35s var(--ease-out);
}
.channel-pane.is-youtube .channel-icon{ animation-delay: -1.6s; }
.channel-pane:hover .channel-icon{ transform: rotate(-12deg) scale(1.12); }
.channel-icon svg{ width: 31px; height: 31px; fill: currentColor; }
@keyframes channel-bob{
  0%, 100%{ translate: 0 0; }
  50%{ translate: 0 -6px; }
}
.channel-flag{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: #FFFFFF;
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 999px;
  padding: 4px 12px;
}
.channel-flag .live-dot{ width: 8px; height: 8px; }
.channel-btn{
  margin-top: auto;
  background: #FFFFFF;
  color: var(--ink);
  border-color: var(--ink);
}
.channel-btn:hover{ background: var(--ink); color: #FFFFFF; }

/* ---------- Illustration on its own plate ---------- */
.creators-split .info-card{ margin-top: 26px; }
.creators-aside .art-plate{ margin-bottom: 0; }
.art-plate{
  margin: 0 0 20px;
  background: #FFFFFF;
  border: 3px solid var(--ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: 7px 9px 0 rgba(0,0,0,0.14);
}
.art-plate img{ width: 100%; height: auto; display: block; }

/* ---------- The show, framed like a live stream ---------- */
.show-split.is-stream{ grid-template-columns: 1fr 1fr; }
@media (max-width: 880px){ .show-split.is-stream{ grid-template-columns: 1fr; } }

.stream-card{
  position: relative;
  border: 3px solid #000000;
  border-radius: var(--radius-lg);
  background: #000000;
  box-shadow: 9px 11px 0 var(--poppy);
  transform: rotate(-1.2deg);
  margin: 0 22px 40px 0;
  transition: transform .3s var(--ease-out);
}
.stream-card:hover{ transform: rotate(0deg); }
a.stream-card{ display: block; color: inherit; text-decoration: none; cursor: pointer; }
a.stream-card:focus-visible{ outline: 3px solid var(--poppy); outline-offset: 6px; }
.stream-bar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  color: #FFFFFF;
  border-bottom: 3px solid #000000;
  border-radius: calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px) 0 0;
  background: #111111;
}
.stream-live{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: #E03131;
  color: #FFFFFF;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
}
.stream-live .live-dot{ width: 7px; height: 7px; background: #FFFFFF; }
.stream-title{ font-family: var(--font-display); font-size: 1rem; line-height: 1; }
.stream-dots{ margin-left: auto; display: inline-flex; gap: 6px; }
.stream-dots i{ width: 10px; height: 10px; border-radius: 50%; background: #FFFFFF; opacity: .35; }
.stream-dots i:first-child{ background: #E03131; opacity: 1; }
.stream-screen{
  position: relative;
  overflow: hidden;
  line-height: 0;
  border-radius: 0 0 calc(var(--radius-lg) - 3px) calc(var(--radius-lg) - 3px);
}
.stream-photo{ width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
/* faint scanlines, so the photo reads as a broadcast rather than a snapshot */
.stream-screen::after{
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.10) 0 2px, transparent 2px 4px);
}
.stream-tag{
  position: absolute;
  left: 14px;
  bottom: 14px;
  z-index: 1;
  line-height: 1.1;
  font-family: var(--font-display);
  font-size: 1.05rem;
  color: #000000;
  background: #FFFFFF;
  border: 2.5px solid #000000;
  border-radius: 10px;
  padding: 5px 12px;
  box-shadow: 3px 3px 0 #000000;
  transform: rotate(-2deg);
}
.stream-sticker{
  position: absolute;
  right: -22px;
  bottom: -38px;
  z-index: 2;
  width: 46%;
  max-width: 240px;
  background: #FFFFFF;
  border: 3px solid #000000;
  border-radius: 18px;
  padding: 8px 12px;
  box-shadow: 5px 6px 0 rgba(0,0,0,0.28);
  transform: rotate(7deg);
  transition: transform .3s var(--ease-out);
}
.stream-card:hover .stream-sticker{ transform: rotate(-3deg) scale(1.05); }
@media (max-width: 520px){
  .stream-card{ margin-right: 10px; }
  .stream-sticker{ right: -8px; width: 52%; }
  /* the sticker owns the bottom corner on a phone, so the name tag moves up */
  .stream-tag{ top: 12px; bottom: auto; left: 12px; font-size: 0.95rem; }
}

/* ---------- Social links ---------- */
.socials-lede{
  max-width: 56ch;
  color: var(--ink-soft);
  margin: -14px 0 30px;
}
.social-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 18px;
}
.social-card{
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  text-decoration: none;
  color: var(--ink);
  background: var(--paper);
  border: 3px solid var(--ink);
  border-radius: var(--radius-md);
  box-shadow: 5px 5px 0 rgba(0,0,0,0.08);
  transition: transform .2s var(--ease-out), box-shadow .2s var(--ease-out);
}
.social-card:hover{
  transform: translateY(-4px);
  box-shadow: 7px 9px 0 rgba(0,0,0,0.14);
}
.social-icon{
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2.5px solid var(--ink);
  background: var(--net, var(--poppy));
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.social-icon svg{ width: 25px; height: 25px; fill: currentColor; }
.social-text{ display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.social-name{ font-family: var(--font-display); font-size: 1.12rem; line-height: 1.1; }
.social-line{ font-size: 0.9rem; color: var(--ink-soft); }
.social-go{
  margin-left: auto;
  flex-shrink: 0;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 6px 13px;
  border-radius: 999px;
  border: 2px solid var(--ink);
  background: var(--paper-soft);
}
.social-card:hover .social-go{ background: var(--poppy); color: #FFFFFF; }

.social-card.is-twitch{ --net: #9146FF; }
.social-card.is-discord{ --net: #5865F2; }
.social-card.is-youtube{ --net: #FF0000; }
.social-card.is-instagram{ --net: #D6249F; }
.social-card.is-tiktok{ --net: #111111; }

@media (max-width: 420px){
  .social-card{ padding: 14px; gap: 11px; }
  .social-icon{ width: 42px; height: 42px; }
  .social-icon svg{ width: 22px; height: 22px; }
  .social-go{ padding: 5px 10px; }
}

/* ---------- Misc pages ---------- */
.page-hero{
  padding-block: clamp(52px, 8vw, 88px) clamp(30px, 5vw, 50px);
  border-bottom: 3px solid var(--ink);
}
.page-hero .eyebrow{ margin-bottom: 14px; }
.page-hero p.lede{ margin-top: 18px; }

.breadcrumb-link{
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; font-weight: 600; font-size: 0.92rem; color: var(--ink-soft);
  margin-bottom: 18px;
}
.breadcrumb-link:hover{ color: var(--poppy); }

.filter-row{ display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 34px; }
.filter-chip{
  border: 2.5px solid var(--ink);
  border-radius: 999px;
  padding: 9px 18px;
  background: none;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--ink);
}
.filter-chip[aria-pressed="true"]{ background: var(--ink); color: var(--paper); }

.faq-list{ display: flex; flex-direction: column; gap: 2px; }
.faq-item{ border-bottom: 2px solid var(--paper-edge); }
.faq-item summary{
  cursor: pointer;
  list-style: none;
  padding: 20px 4px;
  font-family: var(--font-display);
  font-size: 1.15rem;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
}
.faq-item summary::-webkit-details-marker{ display: none; }
.faq-item summary .plus{
  width: 26px; height: 26px; flex-shrink: 0;
  border: 2.5px solid var(--ink); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: 700;
  transition: transform .2s;
}
.faq-item[open] summary .plus{ transform: rotate(45deg); }
.faq-item .faq-a{ padding: 0 4px 22px; color: var(--ink-soft); max-width: 66ch; }

.skip-link{
  position: absolute; left: -999px; top: 0;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; border-radius: 0 0 10px 0;
  z-index: 100; text-decoration: none; font-weight: 600;
}
.skip-link:focus{ left: 0; }

.reveal{ opacity: 1; }