@font-face {
  font-family: "Death Star";
  src: url("assets/fonts/death_star/Death Star.otf") format("opentype");
  font-weight: 100 900;
  font-display: swap;
}

/* ============================================================
   CRAZY RARI — cinematic streaming hub
   ============================================================ */

:root {
  --bg:        #08080a;
  --bg-2:      #0f0f13;
  --panel:     #141419;
  --ink:       #f5f3ef;
  --muted:     #9a978f;
  --line:      rgba(255,255,255,.08);

  /* ---- Crazy Rari color language (used emotionally, not decoratively) ---- */
  --red:        #f40d30;   /* the dust / Devil's Powder / transformation */
  --red-hot:    #ff2b22;
  --gold:       #d8a64a;   /* wealth, the old order, D-Loc, the Venom */
  --gold-bright:#ffcf4a;
  --purple:     #8a2be2;   /* nightlife, the Rolling Fists, the Purple Club */
  --purple-hot: #b14dff;
  --purple-deep:#2a0a3a;
  --neon:       #00e5ff;   /* Dula City traffic + chase sequences */
  --pink:       #ff3d8b;   /* Araki "cherry blossom" clash accent */
  --green-flame:#39ff8b;   /* Lucky / BBL green fire */

  /* slot filled per-section/episode so a single dominant color leads each beat */
  --accent:     var(--red);
  --accent-2:   var(--purple-hot);

  /* ---- Type system (Araki: brutal condensed impact + didone fashion serif) ---- */
  --font-display: "Death Star", "Big Shoulders Display", "Anton", sans-serif;
  --font-serif:   "Bodoni Moda", Georgia, serif;
  --font-ui:      "Jost", "Oswald", sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;

  --maxw:      1240px;
  --r:         14px;
  --ease:      cubic-bezier(.2,.7,.2,1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 { line-height: 1.02; letter-spacing: .01em; }

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

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

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-ui); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  font-size: .92rem;
  padding: .85rem 1.5rem; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .25s var(--ease), background .25s, box-shadow .25s, color .25s;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 30px rgba(244,13,48,.35); }
.btn--primary:hover { background: var(--red-hot); box-shadow: 0 12px 40px rgba(255,43,34,.5); }
.btn--ghost { border-color: rgba(255,255,255,.25); color: var(--ink); backdrop-filter: blur(4px); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,.06); }
.btn--patreon { background: #ff424d; color: #fff; }
.btn--kofi { background: var(--gold); color: #14110a; }

/* ---------- Nav ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem clamp(1rem, 4vw, 3rem);
  transition: background .35s, backdrop-filter .35s, padding .35s, border-color .35s;
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled, .nav--solid {
  background: rgba(8,8,10,.82);
  backdrop-filter: blur(12px) saturate(120%);
  border-bottom: 1px solid var(--line);
  padding-top: .8rem; padding-bottom: .8rem;
}
.nav__logo { height: 38px; width: auto; }
.nav__wordmark {
  font-family: var(--font-display); font-size: 1.5rem; letter-spacing: .04em;
  color: #fff; text-transform: uppercase;
}
.nav__wordmark::first-letter { color: var(--red); }
.nav__links { display: flex; align-items: center; gap: 1.8rem; }
.nav__links a {
  font-family: var(--font-ui); font-weight: 500;
  text-transform: uppercase; letter-spacing: .08em; font-size: .85rem;
  color: var(--muted); transition: color .2s;
}
.nav__links a:hover, .nav__links a.is-active { color: var(--ink); }
.nav__cta {
  border: 1px solid var(--red); color: #fff !important;
  padding: .45rem 1rem; border-radius: 999px; transition: background .2s;
}
.nav__cta:hover { background: var(--red); }
.nav__burger { display: none; flex-direction: column; gap: 5px; background: none; border: 0; cursor: pointer; }
.nav__burger span { width: 26px; height: 2px; background: var(--ink); transition: .3s; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100vh; display: flex; align-items: center; overflow: hidden; }
.hero__media { position: absolute; inset: 0; z-index: 0; background:
  radial-gradient(120% 90% at 70% 10%, #2a0d0d 0%, #0a0a0c 55%, #000 100%); }
.hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.hero__scrim { position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8,8,10,.35) 0%, rgba(8,8,10,.2) 40%, rgba(8,8,10,.95) 100%); }
.hero__grain, .subhero__grain {
  position: absolute; inset: 0; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__inner { position: relative; z-index: 2; max-width: var(--maxw); width: 100%;
  margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.hero__eyebrow {
  font-family: var(--font-ui); letter-spacing: .35em; text-transform: uppercase;
  font-size: .8rem; color: var(--red-hot); margin-bottom: 1rem;
}
.hero__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(3.5rem, 13vw, 11rem); color: #fff; letter-spacing: .01em;
  text-shadow: 0 6px 40px rgba(0,0,0,.6);
}
.hero__title span { display: block; color: var(--red); -webkit-text-stroke: 1px rgba(255,255,255,.0); }
.hero__tag { max-width: 46ch; margin-top: 1.2rem; font-size: clamp(1rem,1.4vw,1.25rem); color: #d7d4cd; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }
.hero__scroll {
  position: absolute; bottom: 1.8rem; left: 50%; transform: translateX(-50%);
  z-index: 2; font-size: 1.4rem; color: var(--muted); animation: bob 1.8s var(--ease) infinite;
}
@keyframes bob { 0%,100%{ transform: translate(-50%,0);} 50%{ transform: translate(-50%,8px);} }

/* ---------- Sections ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding: clamp(4rem, 9vw, 8rem) clamp(1rem,4vw,3rem); }
.section__head { margin-bottom: 2.8rem; }
.section__title {
  font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2rem, 5vw, 3.6rem); color: #fff;
}
.section__sub {
  font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: .25em; font-size: .82rem; color: var(--red-hot); margin-bottom: .6rem;
}

/* ---------- Episode grid ---------- */
.ep-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 1.6rem; }
.ep-grid--micro { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.ep-card {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r);
  overflow: hidden; transition: transform .35s var(--ease), border-color .35s, box-shadow .35s;
}
.ep-card:hover { transform: translateY(-6px); border-color: rgba(244,13,48,.5);
  box-shadow: 0 18px 50px rgba(0,0,0,.55); }
.ep-card__thumb { position: relative; aspect-ratio: 16/9; overflow: hidden;
  background: linear-gradient(135deg,#1b1b22,#0e0e12); }
.ep-card__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.ep-card:hover .ep-card__thumb img { transform: scale(1.06); }
.ep-card__thumb.noimg::after {
  content: "CRAZY RARI"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); letter-spacing: .15em; font-size: 1.1rem;
  color: rgba(255,255,255,.18);
}
.ep-card__play {
  position: absolute; inset: 0; margin: auto; width: 58px; height: 58px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(244,13,48,.92); color: #fff; font-size: 1.1rem;
  opacity: 0; transform: scale(.8); transition: .3s var(--ease); z-index: 2;
}
.ep-card:hover .ep-card__play { opacity: 1; transform: scale(1); }
.ep-card__num {
  position: absolute; top: .7rem; left: .7rem; z-index: 2;
  font-family: var(--font-display); font-size: 1.1rem; color: #fff;
  background: rgba(0,0,0,.55); padding: .15rem .55rem; border-radius: 6px; letter-spacing: .05em;
}
.ep-card__body { padding: 1.1rem 1.2rem 1.4rem; }
.ep-card__body h3 { font-family: var(--font-display); text-transform: uppercase;
  font-size: 1.5rem; color: #fff; margin-bottom: .4rem; letter-spacing: .02em; }
.ep-card__body p { color: var(--muted); font-size: .95rem; }
.ep-card--soon { opacity: .55; pointer-events: none; }

/* ---------- Micro teaser ---------- */
.micro-teaser { position: relative; padding: clamp(4rem,9vw,7rem) clamp(1rem,4vw,3rem);
  background:
    linear-gradient(180deg, rgba(8,8,10,.6), rgba(8,8,10,.92)),
    radial-gradient(80% 120% at 0% 0%, rgba(244,13,48,.22), transparent 60%),
    var(--bg-2);
  border-block: 1px solid var(--line); }
.micro-teaser__inner { max-width: var(--maxw); margin: 0 auto; text-align: center; }
.micro-teaser__copy { max-width: 52ch; margin: 1rem auto 2rem; color: #cfccc5; }

/* ---------- Behind the scenes ---------- */
.bts-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 1.6rem; }
.bts-step { position: relative; background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--r); padding: 1.6rem; overflow: hidden; }
.bts-step__no { font-family: var(--font-display); font-size: 3rem; color: rgba(244,13,48,.55);
  display: block; line-height: 1; }
.bts-step__img { margin: 1rem 0; aspect-ratio: 4/3; border-radius: 10px; overflow: hidden;
  background: linear-gradient(135deg,#1b1b22,#0e0e12); }
.bts-step__img img { width: 100%; height: 100%; object-fit: cover; }
.bts-step__img.noimg::after { content: "PROCESS"; position: absolute; }
.bts-step__img.noimg { display: grid; place-items: center; color: rgba(255,255,255,.16);
  font-family: var(--font-display); letter-spacing: .2em; }
.bts-step h3 { font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: .05em; font-size: 1.25rem; color: #fff; margin-bottom: .4rem; }
.bts-step p { color: var(--muted); font-size: .95rem; }

/* ---------- Support ---------- */
.support { padding: clamp(4rem,9vw,8rem) clamp(1rem,4vw,3rem);
  background: radial-gradient(80% 120% at 50% 0%, rgba(216,166,74,.14), transparent 60%), var(--bg-2);
  border-top: 1px solid var(--line); text-align: center; }
.support__inner { max-width: 720px; margin: 0 auto; }
.support__copy { color: #cfccc5; margin: 1rem 0 2rem; }
.support__btns { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
.support__note { margin-top: 1.4rem; font-size: .8rem; color: var(--muted); }

/* ---------- Subpage hero ---------- */
.page--sub { padding-top: 0; }
.subhero { position: relative; padding: clamp(8rem,16vh,11rem) clamp(1rem,4vw,3rem) clamp(3rem,6vw,4rem);
  background: radial-gradient(110% 90% at 80% 0%, #2a0d0d, #0a0a0c 60%, #000);
  border-bottom: 1px solid var(--line); overflow: hidden; }
.subhero__inner { max-width: var(--maxw); margin: 0 auto; position: relative; z-index: 2; }
.subhero__title { font-family: var(--font-display); text-transform: uppercase;
  font-size: clamp(2.6rem, 8vw, 6rem); color: #fff; }
.backhome { text-align: center; margin-top: 3rem; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); padding: 3rem clamp(1rem,4vw,3rem);
  display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.footer__brand { font-family: var(--font-display); font-size: 1.6rem; letter-spacing: .1em; color: #fff; }
.footer__social { display: flex; gap: 1.6rem; }
.footer__social a { font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: .1em; font-size: .85rem; color: var(--muted); transition: color .2s; }
.footer__social a:hover { color: var(--red); }
.footer__copy { color: var(--muted); font-size: .82rem; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .nav__links {
    position: fixed; inset: 0 0 0 auto; width: min(78vw, 320px);
    flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.6rem;
    background: rgba(8,8,10,.97); backdrop-filter: blur(14px);
    padding: 2rem; transform: translateX(100%); transition: transform .35s var(--ease);
    border-left: 1px solid var(--line);
  }
  .nav__links.is-open { transform: none; }
  .nav__links a { font-size: 1.1rem; }
  .nav__burger { display: flex; z-index: 110; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ===================
/* ============================================================
   LANDING DECK — horizontal episode slideshow
   ============================================================ */

.page--deck { height: 100%; overflow: hidden; }

button.nav__cta { font-family: var(--font-ui); font-weight: 500; text-transform: uppercase;
  letter-spacing: .08em; font-size: .85rem; background: transparent; }
.nav--over { background: transparent; border-bottom: 1px solid transparent; }
.nav--over .nav__links a, .nav--over .nav__brand { color: #fff; }
.nav--over .nav__links a { color: rgba(255,255,255,.82); text-shadow: 0 1px 10px rgba(0,0,0,.55); }
.nav--over .nav__links a:hover { color: #fff; }
.nav--over .nav__wordmark, .nav--over .nav__burger span { filter: drop-shadow(0 1px 8px rgba(0,0,0,.6)); }

.deck {
  position: fixed; inset: 0; z-index: 1;
  display: flex; flex-wrap: nowrap;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  outline: none;
}
.deck::-webkit-scrollbar { display: none; }

.slide {
  position: relative; flex: 0 0 100vw; width: 100vw; height: 100vh; height: 100dvh;
  scroll-snap-align: start; scroll-snap-stop: always;
  overflow: hidden; cursor: pointer;
  background: linear-gradient(135deg, #18181f, #0a0a0c);
}
.slide__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.04); transition: transform 6s var(--ease); }
.slide:hover .slide__img { transform: scale(1.09); }
.slide.noimg .slide__img { display: none; }
.slide.noimg::before {
  content: "CRAZY RARI"; position: absolute; inset: 0; display: grid; place-items: center;
  font-family: var(--font-display); letter-spacing: .25em; font-size: clamp(1.5rem,5vw,3rem);
  color: rgba(255,255,255,.12);
}
.slide__scrim { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8,8,10,.82) 0%, rgba(8,8,10,.25) 38%, rgba(8,8,10,0) 60%),
    linear-gradient(0deg, rgba(8,8,10,.7) 0%, rgba(8,8,10,0) 45%); }

.slide__cue {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  z-index: 3; pointer-events: none; display: inline-flex; align-items: center; gap: .6rem;
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .18em;
  font-size: .85rem; color: #fff; padding: .7rem 1.3rem; border-radius: 999px;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(4px); opacity: 0; transition: opacity .35s var(--ease);
}
.slide:hover .slide__cue { opacity: 1; }
.slide__cue-icon { color: var(--red-hot); }
.slide__cue--soon { opacity: 1; background: rgba(0,0,0,.5); border-color: rgba(255,255,255,.2);
  color: rgba(255,255,255,.8); }
.slide--soon { cursor: default; }
.slide--soon .slide__img { filter: grayscale(.4) brightness(.7); }

.slide__meta { position: absolute; left: clamp(1.2rem,4vw,4rem); bottom: clamp(1.4rem,5vh,3.4rem);
  z-index: 4; max-width: min(46ch, 80vw); }
.slide__eyebrow { font-family: var(--font-ui); letter-spacing: .3em; text-transform: uppercase;
  font-size: .78rem; color: var(--red-hot); margin-bottom: .5rem; text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.slide__title { font-family: var(--font-display); text-transform: uppercase; color: #fff;
  font-size: clamp(2.6rem, 8vw, 6.5rem); line-height: .92; text-shadow: 0 6px 40px rgba(0,0,0,.55); }
.slide__synopsis { margin-top: .8rem; color: #ddd9d1; font-size: clamp(.95rem,1.2vw,1.1rem);
  text-shadow: 0 1px 12px rgba(0,0,0,.7); }

.support-box {
  margin-top: 1.4rem; display: inline-flex; align-items: center; gap: .8rem; cursor: pointer;
  padding: .8rem 1.2rem; border-radius: 12px; text-align: left;
  background: rgba(12,12,15,.55); border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(8px); color: #fff;
  transition: transform .25s var(--ease), border-color .25s, background .25s;
}
.support-box:hover { transform: translateY(-2px); border-color: var(--red); background: rgba(20,12,12,.7); }
.support-box__heart { color: var(--red-hot); font-size: 1.2rem; }
.support-box strong { display: block; font-family: var(--font-ui); text-transform: uppercase;
  letter-spacing: .08em; font-size: .95rem; }
.support-box em { font-style: normal; font-size: .78rem; color: var(--muted); letter-spacing: .04em; }

.deck-arrow {
  position: fixed; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 52px; height: 52px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.25); color: #fff;
  font-size: 1.8rem; line-height: 1; display: grid; place-items: center;
  backdrop-filter: blur(4px); transition: background .25s, border-color .25s, opacity .25s;
}
.deck-arrow:hover { background: var(--red); border-color: var(--red); }
.deck-arrow--prev { left: clamp(.6rem,2vw,1.6rem); }
.deck-arrow--next { right: clamp(.6rem,2vw,1.6rem); }
.deck-arrow.is-hidden { opacity: 0; pointer-events: none; }

.deck-counter { position: fixed; right: clamp(1rem,4vw,3rem); bottom: clamp(1.2rem,4vh,2.4rem);
  z-index: 6; font-family: var(--font-display); letter-spacing: .12em; font-size: clamp(1.9rem, 4vw, 3.2rem); color: #fff;
  text-shadow: 0 1px 10px rgba(0,0,0,.6); }
.deck-counter #deckIndex { color: var(--red-hot); }

.deck-dots { position: fixed; left: 50%; bottom: clamp(1.1rem,3.5vh,2rem); transform: translateX(-50%);
  z-index: 6; display: flex; gap: .6rem; }
.deck-dots button { width: 10px; height: 10px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.35); border: 0; padding: 0; transition: background .25s, transform .25s; }
.deck-dots button.is-active { background: var(--red); transform: scale(1.3); }

.support-pop { position: fixed; left: clamp(1.2rem,4vw,4rem); bottom: clamp(1.4rem,5vh,3.4rem);
  z-index: 40; width: min(320px, 84vw); padding: 1.4rem 1.4rem 1.5rem;
  background: rgba(15,15,19,.96); border: 1px solid var(--line); border-radius: 14px;
  backdrop-filter: blur(14px); box-shadow: 0 24px 60px rgba(0,0,0,.6);
  animation: popIn .3s var(--ease); }
@keyframes popIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.support-pop h3 { font-family: var(--font-display); text-transform: uppercase; color: #fff;
  font-size: 1.5rem; margin-bottom: .4rem; }
.support-pop p { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.support-pop__btns { display: flex; gap: .7rem; }
.support-pop__btns .btn { flex: 1; justify-content: center; padding: .7rem 1rem; }
.support-pop__close { position: absolute; top: .5rem; right: .7rem; background: none; border: 0;
  color: var(--muted); font-size: 1.6rem; cursor: pointer; line-height: 1; }
.support-pop__close:hover { color: #fff; }

/* ---------- Cinema ---------- */
.cinema { position: fixed; inset: 0; z-index: 200; background: #000;
  display: flex; flex-direction: column; align-items: center; justify-content: center; }
.cinema__stage { width: 100%; flex: 1; display: grid; place-items: center; padding: 4vh 4vw; }
.cinema__frame { width: min(92vw, 1500px); aspect-ratio: 16/9; max-height: 84vh;
  background: #000; border-radius: 8px; overflow: hidden; box-shadow: 0 0 80px rgba(0,0,0,.8); }
.cinema__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.cinema__back { position: fixed; top: clamp(1rem,3vh,1.8rem); right: clamp(1rem,3vw,2rem); z-index: 210;
  font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .1em; font-size: .9rem;
  color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3);
  padding: .6rem 1.2rem; border-radius: 999px; cursor: pointer; transition: background .25s, border-color .25s; }
.cinema__back:hover { background: var(--red); border-color: var(--red); }
.cinema__hint { position: fixed; bottom: clamp(1rem,3vh,2rem); left: 50%; transform: translateX(-50%);
  z-index: 210; color: rgba(255,255,255,.55); font-size: .8rem; letter-spacing: .05em; }
body.cinema-open .nav { opacity: 0; pointer-events: none; }
body.cinema-open .deck-arrow, body.cinema-open .deck-counter, body.cinema-open .deck-dots { opacity: 0; pointer-events: none; }

/* ---------- Theatre blinds ---------- */
.blinds { position: fixed; inset: 0; z-index: 300; display: flex; flex-direction: column;
  pointer-events: none; visibility: hidden; }
.blinds.active { visibility: visible; }
.blind { flex: 1 1 0; background: #050505; transform: scaleY(0); transform-origin: top;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.04); transition: transform .5s cubic-bezier(.7,0,.3,1); }
.blind:nth-child(even) { transform-origin: bottom; }
.blinds.closed .blind { transform: scaleY(1); }

@media (max-width: 820px) {
  .deck-arrow { display: none; }
  .slide__title { font-size: clamp(2.2rem, 12vw, 4rem); }
  .nav--over .nav__links { background: rgba(8,8,10,.97); }
  .nav--over .nav__links a { color: rgba(255,255,255,.9); }
}

/* ---------- Cinema bar + fallback (overrides) ---------- */
.cinema__bar { position: fixed; top: 0; left: 0; right: 0; height: 70px; z-index: 240;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 clamp(1rem, 4vw, 2.4rem); pointer-events: none; }
.cinema__bar .cinema__back, .cinema__bar .cinema__yt { pointer-events: auto; }
.cinema__back { position: static; }
.cinema__yt { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .08em;
  font-size: .82rem; color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.2);
  padding: .55rem 1rem; border-radius: 999px; transition: color .2s, border-color .2s; }
.cinema__yt:hover { color: #fff; border-color: #fff; }
.cinema__stage { cursor: zoom-out; }
.cinema__frame { cursor: auto; }
.cinema__hint { pointer-events: none; }

/* ============================================================
   IN-PAGE PLAYER (expand thumbnail -> fullscreen)
   ============================================================ */
.player { position: fixed; inset: 0; z-index: 300; background: #000;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .35s var(--ease); }
.player[hidden] { display: none; }
.player.is-open { opacity: 1; }
.player__frame {
  position: relative; width: min(92vw, 1400px); aspect-ratio: 16/9; max-height: 86vh;
  background-color: #000; background-size: cover; background-position: center;
  border-radius: 8px; overflow: hidden; box-shadow: 0 0 90px rgba(0,0,0,.8);
  transform: scale(.82); opacity: .6;
  transition: transform .4s var(--ease), opacity .4s var(--ease); cursor: auto;
}
.player.is-open .player__frame { transform: scale(1); opacity: 1; }
.player__frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.player__close {
  position: fixed; top: clamp(1rem,3vh,1.6rem); right: clamp(1rem,3vw,2rem); z-index: 320;
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer; line-height: 1;
  font-size: 1.8rem; color: #fff; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.3); transition: background .25s, border-color .25s; }
.player__close:hover { background: var(--red); border-color: var(--red); }
.player__hint { position: fixed; bottom: clamp(1rem,3vh,2rem); left: 50%; transform: translateX(-50%);
  z-index: 320; color: rgba(255,255,255,.55); font-size: .8rem; letter-spacing: .04em; pointer-events: none; }
body.player-open .nav, body.player-open .deck-arrow,
body.player-open .deck-counter, body.player-open .deck-dots { opacity: 0; pointer-events: none; }

/* ============================================================
   MAXIMUM BIZARRE — Araki overlay layer
   "Conventional approaches produce ordinary results."
   Color serves emotion. Type hits like a fist. Texture is wealth & rot.
   ============================================================ */

/* --- 0. Variable display face needs real weight to read as brutal --- */
.nav__wordmark, .footer__brand, .ep-card__num, .ep-card__body h3,
.bts-step__no, .support-pop h3, .deck-counter { font-weight: 800; }
.hero__title, .slide__title, .subhero__title, .section__title {
  font-weight: 900; letter-spacing: -.015em;
}

/* --- 1. Global grain + halftone wash (sits under nav & modals) --- */
body::after {
  content: ""; position: fixed; inset: 0; z-index: 95; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.5px);
  background-size: 4px 4px; mix-blend-mode: overlay; opacity: .5;
}

/* --- 2. Per-episode dominant color (Araki: no two share a dominant) --- */
.slide--dust  { --accent: var(--red);         --accent-2: var(--purple-hot); }
.slide--devil { --accent: var(--purple-hot);  --accent-2: var(--gold-bright); }
.slide--noir  { --accent: var(--gold-bright); --accent-2: var(--neon); }
.slide--soon  { --accent: var(--green-flame); --accent-2: var(--purple-hot); }

/* --- 3. ゴゴゴゴ menacing ideophone as background architecture --- */
.slide::after {
  content: attr(data-sfx);
  position: absolute; z-index: 2; pointer-events: none;
  top: 50%; right: clamp(-.4rem, 1.5vw, 2rem); transform: translateY(-50%) rotate(6deg);
  writing-mode: vertical-rl; text-orientation: upright;
  font-family: var(--font-display); font-weight: 900; letter-spacing: -.05em;
  font-size: clamp(4rem, 17vh, 12rem); line-height: .78;
  color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--accent, var(--red)) 60%, transparent);
  text-shadow: 0 0 50px color-mix(in srgb, var(--accent, var(--red)) 30%, transparent);
  opacity: .42; transition: opacity .55s var(--ease), transform .7s var(--ease);
}
.slide:hover::after { opacity: .62; transform: translateY(-50%) rotate(3deg); }

/* --- 4. Halftone dot texture, tinted by the episode's color --- */
.slide__scrim::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(color-mix(in srgb, var(--accent, var(--red)) 45%, transparent) 1px, transparent 1.7px);
  background-size: 6px 6px;
  -webkit-mask-image: linear-gradient(55deg, #000, transparent 55%);
          mask-image: linear-gradient(55deg, #000, transparent 55%);
  opacity: .55; mix-blend-mode: screen;
}

/* --- 5. Speed lines erupting from the title corner on hover --- */
.slide:not(.noimg)::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(118deg,
    transparent 0 13px,
    color-mix(in srgb, var(--accent, var(--red)) 24%, transparent) 13px 15px);
  -webkit-mask-image: radial-gradient(130% 85% at 0% 100%, #000, transparent 58%);
          mask-image: radial-gradient(130% 85% at 0% 100%, #000, transparent 58%);
  opacity: 0; transition: opacity .4s var(--ease);
}
.slide:hover:not(.noimg)::before { opacity: .6; }

/* --- 6. Chromatic-aberration glitch on episode titles --- */
.slide__title {
  position: relative; color: #fff;
  text-shadow: 0 6px 40px rgba(0,0,0,.55),
               0 0 32px color-mix(in srgb, var(--accent, var(--red)) 28%, transparent);
}
.slide__title::before, .slide__title::after {
  content: attr(data-text); position: absolute; inset: 0; pointer-events: none;
  opacity: 0; transition: opacity .25s var(--ease), transform .25s var(--ease);
  mix-blend-mode: screen;
}
.slide:hover .slide__title::before { opacity: .9; transform: translate(-3px, 2px); color: var(--neon); }
.slide:hover .slide__title::after  { opacity: .9; transform: translate(3px, -2px); color: var(--red-hot); }

/* --- 7. Eyebrow becomes a Bodoni fashion-editorial accent --- */
.slide__eyebrow {
  font-family: var(--font-serif); font-style: italic; font-weight: 500;
  letter-spacing: .14em; color: var(--accent, var(--red-hot));
}

/* --- 8. Push the episode color through every interactive accent --- */
.slide__cue { transform: translate(-50%, -50%) rotate(-4deg);
  border-color: color-mix(in srgb, var(--accent, #fff) 55%, #fff); }
.slide:hover .slide__cue { transform: translate(-50%, -50%) rotate(0deg); }
.slide__cue-icon { color: var(--accent, var(--red-hot)); }
.deck-dots button.is-active { background: var(--accent, var(--red));
  box-shadow: 0 0 12px color-mix(in srgb, var(--accent, var(--red)) 70%, transparent); }
.deck-arrow:hover { background: var(--accent, var(--red)); border-color: var(--accent, var(--red));
  box-shadow: 0 0 26px color-mix(in srgb, var(--accent, var(--red)) 55%, transparent); }
.support-box__heart { color: var(--accent, var(--red-hot)); }
.support-box:hover { border-color: var(--accent, var(--red)); }

/* --- 9. "TO BE CONTINUED" arrow motif on the Coming Soon slide --- */
.slide--soon .slide__img { filter: grayscale(.55) brightness(.6) sepia(.3) hue-rotate(70deg); }
.slide--soon .slide__meta::after {
  content: "つづく  \2794  TO BE CONTINUED"; display: inline-block; margin-top: 1.1rem;
  font-family: var(--font-serif); font-style: italic; letter-spacing: .1em; font-size: .95rem;
  color: var(--accent); transform: rotate(-3deg);
  text-shadow: 0 0 18px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* --- 10. Wordmark + footer brand: red→gold→purple power gradient --- */
.nav__wordmark, .footer__brand {
  background: linear-gradient(100deg, var(--red) 0%, var(--gold-bright) 52%, var(--purple-hot) 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.nav__wordmark::first-letter { -webkit-text-fill-color: var(--red); color: var(--red); }
.footer__social a:hover { color: var(--purple-hot); }

/* ============================================================
   MICROSERIES / card pages — same language applied
   ============================================================ */
.subhero { --accent: var(--purple-hot);
  background: radial-gradient(115% 95% at 80% 0%, var(--purple-deep), #0a0a0c 60%, #000); }
.subhero .hero__eyebrow { font-family: var(--font-serif); font-style: italic;
  letter-spacing: .14em; color: var(--accent); }
.subhero__title { position: relative;
  text-shadow: 0 0 40px color-mix(in srgb, var(--accent) 30%, transparent); }
.subhero::after {
  content: "ゴゴゴゴ"; position: absolute; z-index: 0; pointer-events: none;
  top: 50%; right: clamp(-.5rem, 2vw, 3rem); transform: translateY(-50%) rotate(6deg);
  writing-mode: vertical-rl; font-family: var(--font-display); font-weight: 900;
  font-size: clamp(4rem, 16vh, 11rem); line-height: .78; color: transparent;
  -webkit-text-stroke: 2px color-mix(in srgb, var(--accent) 55%, transparent); opacity: .38;
}

/* episode/micro cards — rotate the color per card, clash on hover */
.ep-card:nth-child(3n+1) { --accent: var(--red); }
.ep-card:nth-child(3n+2) { --accent: var(--purple-hot); }
.ep-card:nth-child(3n)   { --accent: var(--gold-bright); }
.ep-card:hover { border-color: var(--accent);
  box-shadow: 0 18px 50px rgba(0,0,0,.55),
              0 0 0 1px var(--accent),
              0 0 34px color-mix(in srgb, var(--accent) 35%, transparent); }
.ep-card__num { background: color-mix(in srgb, var(--accent) 80%, #000); color: #fff;
  transform: rotate(-3deg); }
.ep-card__play { background: color-mix(in srgb, var(--accent) 88%, #000);
  box-shadow: 0 0 24px color-mix(in srgb, var(--accent) 60%, transparent); }
.section__sub { font-family: var(--font-serif); font-style: italic;
  color: var(--accent, var(--red-hot)); }

/* ============================================================
   Mobile + reduced-motion guards for the bizarre layer
   ============================================================ */
@media (max-width: 820px) {
  .slide::after, .subhero::after { font-size: clamp(3rem, 12vh, 7rem); opacity: .3; }
  body::after { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
  .slide:hover .slide__title::before,
  .slide:hover .slide__title::after { opacity: 0; }
  .slide:hover:not(.noimg)::before { opacity: .3; }
  .slide::after, .slide:hover::after { transition: none; }
}

/* ============================================================
   VIZ-STYLE HEADER (menu left, red logo block flush right)
   ============================================================ */
.nav { padding: 0 0 0 clamp(1rem, 4vw, 3rem); height: 68px; align-items: stretch; }
.nav.is-scrolled { padding-top: 0; padding-bottom: 0; }

/* dark gradient keeps the menu legible over key art */
.nav--over { background: linear-gradient(180deg, rgba(4,4,6,.85) 0%, rgba(4,4,6,.35) 60%, rgba(4,4,6,0) 100%); }
.nav--over.is-scrolled { background: rgba(8,8,10,.9); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav--solid { background: #0b0b0f; border-bottom: 1px solid var(--line); }

.nav .nav__links { align-self: center; gap: clamp(.9rem, 2.3vw, 2.1rem); }
.nav .nav__links a,
.nav .nav__cta {
  font-family: var(--font-ui);
  font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  font-size: clamp(.95rem, 1.25vw, 1.18rem); color: #fff;
  transition: color .2s;
}
.nav .nav__links a:hover { color: var(--red-hot); }
.nav .nav__links a.is-active { color: var(--red-hot); }

/* Support sits inline like a menu item (still toggles the popover) */
.nav .nav__cta { border: 0; background: transparent; padding: 0; border-radius: 0; color: #fff !important; }
.nav .nav__cta:hover { background: transparent; color: var(--red-hot) !important; }

/* the red logo block, flush to the right edge, full header height */
.nav .nav__brand {
  margin-left: auto; order: 3; display: flex; align-items: center; justify-content: center;
  height: 100%; padding: 0 clamp(1.1rem, 2.4vw, 2.2rem);
  background: var(--red); box-shadow: -6px 0 24px rgba(0,0,0,.35);
}
.nav .nav__brand:hover { background: var(--red-hot); }
.nav .nav__brand .nav__logo { height: 44px; width: auto; display: block; }
.nav .nav__brand .nav__wordmark { color: #fff; }
.nav .nav__brand .nav__wordmark::first-letter { color: #fff; }

@media (max-width: 820px) {
  .nav { height: 60px; }
  .nav .nav__brand .nav__logo { height: 36px; }
  .nav__burger { order: 1; align-self: center; }
  .nav .nav__brand { order: 3; }
}

/* ---------- VIZ header: go LARGE (overrides) ---------- */
.nav { height: clamp(88px, 9vw, 124px); padding-left: clamp(1.4rem, 4vw, 3.5rem); }
.nav .nav__links { gap: clamp(1.1rem, 2.8vw, 2.8rem); }
.nav .nav__links a,
.nav .nav__cta {
  font-size: clamp(1.05rem, 1.55vw, 1.55rem);
  font-weight: 700; letter-spacing: .04em;
}
.nav .nav__brand { padding: 0 clamp(1.6rem, 3.2vw, 3.2rem); }
.nav .nav__brand .nav__logo { height: clamp(60px, 8.5vw, 96px); }
.nav .nav__brand .nav__wordmark { font-size: clamp(1.6rem, 3vw, 2.6rem); }

@media (max-width: 820px) {
  .nav { height: 72px; }
  .nav .nav__brand .nav__logo { height: 48px; }
  .nav .nav__brand { padding: 0 1rem; }
}

/* ---------- Logo block: black so the red/pink logo pops ---------- */
.nav .nav__brand { background: #0a0a0c; box-shadow: -8px 0 28px rgba(0,0,0,.5); border-left: 3px solid var(--red); }
.nav .nav__brand:hover { background: #141418; }

/* ---------- Make the header fully transparent (no box, no line, no logo block) ---------- */
.nav--over { background: transparent; border-bottom: 0; box-shadow: none; }
.nav, .nav.is-scrolled, .nav--over.is-scrolled { border-bottom: 0; box-shadow: none; }
/* keep menu legible over bright art now that the gradient is gone */
.nav--over .nav__links a, .nav--over .nav__cta { text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.nav--over .nav__brand .nav__logo { filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)); }
/* no block / no red line behind the logo */
.nav .nav__brand { background: transparent; box-shadow: none; border-left: 0; }
.nav .nav__brand:hover { background: transparent; }

/* ============================================================
   MICRO SERIES v1 — phone (left) + episode rail (right)
   ============================================================ */
.page--micro { background: #0b0b0f; overflow: hidden; height: 100%; }
.nav--micro { background: transparent; }
.nav--micro .nav__links a, .nav--micro .nav__cta { text-shadow: 0 2px 10px rgba(0,0,0,.6); }

.micro-stage {
  position: fixed; inset: 0; z-index: 1; display: flex;
  padding-top: clamp(88px, 9vw, 124px);
  background:
    radial-gradient(70% 60% at 22% 30%, rgba(244,13,48,.20), transparent 60%),
    radial-gradient(60% 60% at 90% 80%, rgba(138,43,226,.18), transparent 60%),
    #0b0b0f;
}
/* Persona-5 angular wash */
.micro-stage::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px);
  background-size: 5px 5px; mix-blend-mode: overlay;
}

/* ---- LEFT: viewer + phone ---- */
.micro-viewer { position: relative; z-index: 1; flex: 1 1 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; padding: 2vh 2vw 4vh; }
.micro-eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .3em;
  font-size: .72rem; color: var(--bg); }

.phone {
  position: relative; height: min(74vh, 620px); aspect-ratio: 9 / 19;
  background: linear-gradient(160deg, #1a1a1f, #050506);
  border-radius: 38px; padding: 14px;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.06),
              0 0 0 2px #000, 0 0 60px rgba(244,13,48,.12);
}
.phone__cam { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); z-index: 3;
  width: 54px; height: 7px; background: #000; border-radius: 99px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.phone__home { position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 34%; height: 4px; border-radius: 99px; background: rgba(255,255,255,.5); }
.phone__screen { position: relative; width: 100%; height: 100%; border-radius: 26px; overflow: hidden;
  background: #000; }
.phone__screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.phone__placeholder { position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: .4rem; color: #fff;
  background: radial-gradient(120% 80% at 50% 30%, #211016, #0a0a0c); }
.phone__placeholder-no { font-family: var(--font-display); font-weight: 900; font-size: clamp(4rem,18vh,9rem);
  line-height: .8; color: #fff; text-shadow: 0 0 40px rgba(244,13,48,.6); }
.phone__placeholder-txt { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .2em;
  font-size: .8rem; color: var(--muted); }
.phone__fs { position: absolute; right: 10px; bottom: 14px; z-index: 4; cursor: pointer;
  width: 40px; height: 40px; border-radius: 50%; font-size: 1.1rem; line-height: 1;
  background: rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.35); color: #fff;
  display: grid; place-items: center; backdrop-filter: blur(4px); transition: background .2s, border-color .2s, transform .2s; }
.phone__fs:hover { background: var(--red); border-color: var(--red); transform: scale(1.08); }

/* ---- RIGHT: episode rail ---- */
.micro-rail { position: relative; z-index: 1; flex: 0 0 clamp(280px, 26vw, 380px);
  display: flex; flex-direction: column; border-left: 1px solid rgba(255,255,255,.12);
  background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); }
.micro-rail__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  letter-spacing: .04em; color: #fff; font-size: 1.6rem; padding: 1.2rem clamp(1rem,2vw,1.6rem) .6rem; }
.micro-rail__list { flex: 1 1 auto; overflow-y: auto; display: grid;
  grid-template-columns: 1fr 1fr; gap: .9rem; padding: .4rem clamp(1rem,2vw,1.6rem) 1rem;
  scrollbar-width: thin; scrollbar-color: var(--red) transparent; }
.micro-rail__list::-webkit-scrollbar { width: 8px; }
.micro-rail__list::-webkit-scrollbar-thumb { background: var(--red); border-radius: 99px; }

.micro-tile {
  position: relative; aspect-ratio: 3/4; cursor: pointer; overflow: hidden;
  background: linear-gradient(160deg, #17171d, #0d0d11);
  border: 2px solid rgba(255,255,255,.16); color: #fff;
  clip-path: polygon(0 0, 100% 0, 100% 88%, 88% 100%, 0 100%);  /* P5 angular corner */
  transition: transform .18s var(--ease), border-color .18s, background .18s, box-shadow .18s;
}
.micro-tile:hover { transform: translateY(-3px) skewX(-1deg); border-color: var(--red); }
.micro-tile.is-active { border-color: var(--red); background: linear-gradient(160deg, #2a0c0c, #120708);
  box-shadow: 0 12px 30px rgba(244,13,48,.35), inset 0 0 0 1px rgba(255,43,34,.5); }
.micro-tile__no { position: absolute; top: 6px; left: 12px; font-family: var(--font-display);
  font-weight: 900; font-size: 2.4rem; line-height: 1; color: #fff; }
.micro-tile.is-active .micro-tile__no { color: var(--red-hot); }
.micro-tile__t { position: absolute; left: 12px; bottom: 10px; font-family: var(--font-ui);
  text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; color: var(--muted); }
.micro-tile--soon { opacity: .45; cursor: not-allowed; }
.micro-tile--soon:hover { transform: none; border-color: rgba(255,255,255,.16); }

.micro-confirm { align-self: center; margin: 0 0 1.4rem; cursor: pointer;
  width: 56px; height: 56px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  background: var(--red); color: #fff; border: 0; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(244,13,48,.45); transition: transform .18s var(--ease), background .2s; }
.micro-confirm:hover { transform: scale(1.1) rotate(-6deg); background: var(--red-hot); }

/* portrait fullscreen player */
.player--portrait .player__frame { width: auto; height: min(92vh, 900px); aspect-ratio: 9/16; max-height: 92vh; }

/* ---- responsive: stack ---- */
@media (max-width: 820px) {
  .micro-stage { flex-direction: column; padding-top: 72px; }
  .micro-viewer { flex: 0 0 auto; padding: 1.4rem 1rem; }
  .phone { height: min(52vh, 440px); }
  .micro-rail { flex: 1 1 auto; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); }
  .micro-rail__list { grid-template-columns: repeat(3, 1fr); }
  .micro-confirm { margin: .8rem auto 1.2rem; }
}

/* ---------- Micro rail: 3 per row + count + scroll arrow ---------- */
.micro-rail { flex: 0 0 clamp(330px, 32vw, 480px); }
.micro-rail__list { grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.micro-rail__count { font-family: var(--font-ui); font-weight: 600; font-size: .9rem;
  color: #fff; vertical-align: middle; margin-left: .4rem;
  border: 1px solid rgba(187, 187, 187, 0.5); border-radius: 99px; padding: .1rem .55rem; }
.micro-tile__no { font-size: 1.9rem; top: 4px; left: 9px; }
.micro-tile__t { left: 9px; bottom: 7px; font-size: .62rem; letter-spacing: .06em; }

.micro-scroll { align-self: center; margin: .4rem 0 1.3rem; cursor: pointer;
  width: 52px; height: 52px; border-radius: 50%; font-size: 1.5rem; line-height: 1;
  background: var(--red); color: #fff; border: 0; display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(244,13,48,.45); transition: transform .18s var(--ease), background .2s; }
.micro-scroll:hover { transform: translateY(3px); background: var(--red-hot); }

@media (max-width: 820px) {
  .micro-rail { flex: 1 1 auto; }
  .micro-rail__list { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- Micro rail FIX: real scroll + 9:16 tiles, 2 per row ---------- */
.micro-rail__list {
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  align-content: start;       /* keep rows their natural height */
  grid-auto-rows: auto;
  flex: 1 1 0; min-height: 0;  /* <- lets the list actually scroll */
  overflow-y: auto;
  padding: .6rem clamp(1rem,2vw,1.6rem) 1.2rem;
}
.micro-tile { aspect-ratio: 9 / 16; }   /* portrait, like the clips */
.micro-tile__no { font-size: clamp(1.8rem, 2.6vw, 2.8rem); top: 8px; left: 12px; }
.micro-tile__t { left: 12px; bottom: 10px; font-size: .72rem; letter-spacing: .08em; }

@media (max-width: 820px) {
  .micro-rail__list { grid-template-columns: repeat(3, 1fr); }
}

/* ============================================================
   Micro tiles v2 — short bars that expand to a portrait preview
   ============================================================ */
.micro-rail__list {
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 44px;          /* collapsed bar height (fixed -> no collapse bug) */
  gap: .55rem;
  align-content: start;
  flex: 1 1 0; min-height: 0; overflow-y: auto;
  padding: .6rem clamp(1rem,2vw,1.6rem) 1.2rem;
}

.micro-tile {
  aspect-ratio: auto;            /* cancel the old 9/16 */
  position: relative; display: block; overflow: hidden;
  clip-path: none; border-radius: 6px;
  transition: grid-row 0s, border-color .2s, background .25s, box-shadow .25s;
}
.micro-tile__t { display: none; }                         /* hidden on the bar */
.micro-tile__no {
  position: absolute; top: 50%; right: .8rem; left: auto; bottom: auto;
  transform: translateY(-50%); font-size: 1.4rem; line-height: 1;
  transition: font-size .2s var(--ease), top .2s, bottom .2s, right .2s;
}

/* expanded: hovered OR the currently-selected clip */
.micro-tile:not(.micro-tile--soon):hover,
.micro-tile.is-active {
  grid-row: span 6;                                       /* grow into a tall portrait box */
  border-color: var(--red);
  background: linear-gradient(160deg, #240b0b, #100708);
  box-shadow: 0 14px 34px rgba(244,13,48,.35), inset 0 0 0 1px rgba(255,43,34,.45);
  z-index: 2;
}
.micro-tile:not(.micro-tile--soon):hover .micro-tile__no,
.micro-tile.is-active .micro-tile__no {
  top: auto; bottom: .7rem; right: .9rem; transform: none;
  font-size: 2.8rem; color: var(--red-hot);
}
.micro-tile:not(.micro-tile--soon):hover .micro-tile__t,
.micro-tile.is-active .micro-tile__t {
  display: block; position: absolute; top: .6rem; left: .8rem; bottom: auto;
}
/* play glyph appears in the expanded preview */
.micro-tile:not(.micro-tile--soon):hover::after,
.micro-tile.is-active::after {
  content: "\25B6"; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em;
  display: grid; place-items: center; font-size: 1.6rem; color: rgba(255,255,255,.85);
  pointer-events: none; z-index: 2;
}

/* ============================================================
   Micro tiles v3 — thumbnail + summary on the expanded preview
   ============================================================ */
/* collapsed bar: image / scrim / summary all hidden */
.micro-tile__thumb,
.micro-tile__scrim,
.micro-tile__sum { display: none; }

/* expanded (hover or selected): show the 9:16 thumbnail */
.micro-tile:not(.micro-tile--soon):hover .micro-tile__thumb,
.micro-tile.is-active .micro-tile__thumb {
  display: block; position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.micro-tile__thumb.is-empty { display: none !important; }   /* no image -> keep dark bg */

/* readability scrim over the image */
.micro-tile:not(.micro-tile--soon):hover .micro-tile__scrim,
.micro-tile.is-active .micro-tile__scrim {
  display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 28%,
                                       rgba(0,0,0,0) 42%, rgba(0,0,0,.88) 100%);
}

/* keep number / title / play glyph above the image */
.micro-tile__no, .micro-tile__t { z-index: 3; }

/* number -> top-right when expanded, freeing the bottom for the summary */
.micro-tile:not(.micro-tile--soon):hover .micro-tile__no,
.micro-tile.is-active .micro-tile__no {
  top: .4rem; bottom: auto; right: .7rem; left: auto; transform: none;
  font-size: 2rem; color: var(--red-hot);
}
.micro-tile:not(.micro-tile--soon):hover .micro-tile__t,
.micro-tile.is-active .micro-tile__t {
  color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.9);
}

/* the episode summary at the bottom of the expanded tile */
.micro-tile:not(.micro-tile--soon):hover .micro-tile__sum,
.micro-tile.is-active .micro-tile__sum {
  display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden;
  position: absolute; left: .8rem; right: .8rem; bottom: .7rem; z-index: 3; margin: 0;
  font-family: var(--font-ui); font-size: .72rem; line-height: 1.35;
  color: #f3f1ea; text-shadow: 0 1px 6px rgba(0,0,0,.95);
}

/* ============================================================
   SUPPORT PAGE — Ko-fi / Patreon split + message form
   ============================================================ */
.page--support { background: #0b0b0f; }
.nav--over .nav__links a.is-active { color: var(--red-hot); }

.support-split { display: flex; min-height: 100vh; }
.shalf {
  position: relative; flex: 1 1 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fff; cursor: pointer;
  transition: flex-grow .45s var(--ease), filter .35s;
}
.shalf--kofi    { background: linear-gradient(150deg, #12455c 0%, #0a2733 55%, #07171f 100%); }
.shalf--patreon { background: linear-gradient(150deg, #5c1a1c 0%, #330d10 55%, #1c070a 100%); }
.support-split:hover .shalf { flex-grow: .85; filter: saturate(.85) brightness(.7); }
.support-split:hover .shalf:hover { flex-grow: 1.5; filter: none; }
.shalf__scrim { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(60% 60% at 50% 38%, rgba(255,255,255,.10), transparent 70%),
              linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 30%); }
.shalf__inner { position: relative; z-index: 1; padding: 2rem; display: flex; flex-direction: column;
  align-items: center; gap: .5rem; transform: translateY(0); transition: transform .35s var(--ease); }
.shalf:hover .shalf__inner { transform: translateY(-6px); }
.shalf__icon { font-size: clamp(3rem, 7vw, 6rem); line-height: 1; filter: drop-shadow(0 6px 20px rgba(0,0,0,.5)); }
.shalf--kofi .shalf__icon { color: #ffd9a8; }
.shalf--patreon .shalf__icon { color: var(--gold-bright); }
.shalf__name { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  font-size: clamp(3rem, 8vw, 7rem); line-height: .9; letter-spacing: .01em;
  text-shadow: 0 6px 36px rgba(0,0,0,.55); }
.shalf__tag { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .12em;
  font-size: clamp(.78rem, 1.1vw, 1rem); color: rgba(255,255,255,.78); max-width: 26ch; margin-top: .3rem; }
.shalf__cta { margin-top: 1.4rem; font-family: var(--font-ui); font-weight: 600; text-transform: uppercase;
  letter-spacing: .08em; font-size: .92rem; padding: .8rem 1.6rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.4); transition: background .25s, border-color .25s, transform .25s; }
.shalf--kofi .shalf__cta:hover    { background: #29abe0; border-color: #29abe0; }
.shalf--patreon .shalf__cta:hover { background: var(--red); border-color: var(--red); }
.shalf:hover .shalf__cta { transform: scale(1.04); }
/* center seam */
.shalf--kofi { box-shadow: inset -2px 0 0 rgba(255,255,255,.08); }

/* ---- message the creator ---- */
.msg { background:
  radial-gradient(70% 80% at 50% 0%, rgba(244,13,48,.12), transparent 60%), #0b0b0f;
  border-top: 1px solid var(--line); padding: clamp(3.5rem,8vw,6rem) clamp(1rem,4vw,3rem); }
.msg__inner { max-width: 680px; margin: 0 auto; text-align: center; }
.msg__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  color: #fff; font-size: clamp(2rem,5vw,3.4rem); }
.msg__lead { color: var(--muted); margin: .6rem 0 2rem; }
.msg__form { display: flex; flex-direction: column; gap: .9rem; text-align: left; }
.msg__row { display: flex; gap: .9rem; }
.msg__row input { flex: 1 1 0; }
.msg__form input, .msg__form textarea {
  width: 100%; background: #141419; border: 1px solid var(--line); border-radius: 10px;
  color: var(--ink); font-family: var(--font-body); font-size: 1rem; padding: .9rem 1rem;
  transition: border-color .2s, box-shadow .2s; }
.msg__form input:focus, .msg__form textarea:focus {
  outline: none; border-color: var(--red); box-shadow: 0 0 0 3px rgba(244,13,48,.2); }
.msg__form textarea { resize: vertical; min-height: 120px; }
.msg__send { align-self: center; margin-top: .4rem; }
.msg__note { text-align: center; color: var(--gold-bright); font-size: .9rem; margin-top: .4rem; }

@media (max-width: 820px) {
  .support-split { flex-direction: column; min-height: auto; }
  .shalf { min-height: 46vh; }
  .support-split:hover .shalf, .support-split:hover .shalf:hover { flex-grow: 1; filter: none; }
  .msg__row { flex-direction: column; }
}

/* ============================================================
   STORE PAGE — centered "coming soon"
   ============================================================ */
.page--store { background: #0b0b0f; height: 100%; }
.store-stage { position: fixed; inset: 0; display: grid; place-items: center; padding: 6rem 1.5rem 2rem;
  background:
    radial-gradient(60% 60% at 50% 35%, rgba(244,13,48,.18), transparent 65%),
    radial-gradient(50% 50% at 80% 85%, rgba(138,43,226,.16), transparent 60%),
    #0b0b0f; }
.store-stage::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.6px); background-size: 5px 5px;
  mix-blend-mode: overlay; }
.store-card { position: relative; z-index: 1; text-align: center; max-width: 640px; }
.store-eyebrow { font-family: var(--font-ui); text-transform: uppercase; letter-spacing: .35em;
  font-size: .8rem; color: var(--red-hot); margin-bottom: 1rem; }
.store-title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase;
  color: #fff; font-size: clamp(3rem, 11vw, 8rem); line-height: .9; text-shadow: 0 6px 40px rgba(0,0,0,.55); }
.store-msg { color: #cfccc5; font-size: clamp(1rem,1.4vw,1.2rem); margin: 1.1rem auto 2rem; max-width: 44ch; }

/* ---------- Micro viewer parallax scene ---------- */
.micro-viewer { position: relative; overflow: hidden; }
.scene-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.scene-bg img { width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0,0,0) scale(1.14);   /* marginal zoom = overscan headroom */
  will-change: transform; }
.scene-bg.is-missing { background:
  radial-gradient(60% 60% at 30% 30%, rgba(244,13,48,.18), transparent 60%), #0c0c10; }
.micro-viewer > .micro-eyebrow,
.micro-viewer > .phone { position: relative; z-index: 1; }

/* ---------- Parallax bg = full-page layer (override) ---------- */
.scene-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.scene-bg img { width: 100%; height: 100%; object-fit: cover;
  transform: translate3d(0,0,0) scale(1.14); will-change: transform; }
.micro-viewer, .micro-rail { position: relative; z-index: 1; }
.micro-viewer { overflow: visible; }   /* bg is full-page now, no clipping here */

/* ---------- Support halves: photo backdrops (gradient = fallback) ---------- */
.shalf__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  object-fit: cover; }
.shalf__scrim { z-index: 1; }   /* dark overlay sits above the photo for legibility */
.shalf__inner { z-index: 2; }   /* text/buttons above everything */

/* ---------- Support halves: BLACK text + lighter veil + parallax overscan ---------- */
.shalf__name { color: #0b0b0c; text-shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4); }

/* ============================================================
   Store / Micro: let the page scroll so the footer shows below
   the stage (this override was reverted — restored). Support flows already.
   ============================================================ */
.page--store, .page--micro { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
.store-stage, .micro-stage { position: static; min-height: 100vh; }
.footer { position: relative; z-index: 2; }

/* footer wordmark is a link home */
.footer__brand { text-decoration: none; display: inline-block; cursor: pointer; }

/* Micro footer: translucent dark panel so it isn't see-through but still
   blends with the page (the fixed parallax bg was showing through). */
.page--micro .footer {
  background: rgba(10, 10, 14, .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .10);
}
.page--micro .footer__social a,
.page--micro .footer__copy { color: #e8e6e0; }
.page--micro .footer__social a:hover { color: var(--red); }
.shalf__tag  { color: #141414; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.shalf__cta  { color: #0b0b0c; border-color: rgba(0,0,0,.5); text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.shalf--kofi .shalf__icon, .shalf--patreon .shalf__icon { color: #0b0b0c; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }
/* softer overlay so black text reads on the photo */
.shalf__scrim { background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,0) 45%); }
/* overscan headroom for the parallax drift */
.shalf__bg { transform: scale(1.14); will-change: transform; }


/* ---------- Support halves: per-side text treatment ---------- */
/* Ko-fi = BLACK text on a light veil */
.shalf--kofi .shalf__scrim { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0) 45%); }
.shalf--kofi .shalf__name { color: #0b0b0c; text-shadow: 0 2px 12px rgba(0,0,0,.45), 0 1px 2px rgba(0,0,0,.4); }
.shalf--kofi .shalf__tag  { color: #141414; text-shadow: 0 1px 6px rgba(0,0,0,.4); }
.shalf--kofi .shalf__cta  { color: #0b0b0c; border-color: rgba(0,0,0,.5); text-shadow: 0 1px 5px rgba(0,0,0,.4); }
.shalf--kofi .shalf__icon { color: #0b0b0c; filter: drop-shadow(0 2px 8px rgba(0,0,0,.4)); }

/* Patreon = WHITE text + gold icon on a dark veil (like before) */
.shalf--patreon .shalf__scrim { background: linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.12) 45%, rgba(0,0,0,.38)); }
.shalf--patreon .shalf__name { color: #fff; text-shadow: 0 3px 20px rgba(0,0,0,.65), 0 1px 3px rgba(0,0,0,.6); }
.shalf--patreon .shalf__tag  { color: rgba(255,255,255,.86); text-shadow: 0 1px 12px rgba(0,0,0,.7); }
.shalf--patreon .shalf__cta  { color: #fff; border-color: rgba(255,255,255,.5); text-shadow: 0 1px 8px rgba(0,0,0,.6); }
.shalf--patreon .shalf__icon { color: var(--gold-bright); filter: drop-shadow(0 2px 12px rgba(0,0,0,.55)); }

/* ---------- Micro page: fixed Support box (bottom-left) ---------- */
.micro-support { position: fixed; left: clamp(1.2rem, 4vw, 4rem); bottom: clamp(1.4rem, 5vh, 3.4rem); z-index: 30; }

/* ---------- Store: space the button below the title (msg removed) ---------- */
.store-card .btn { margin-top: 2rem; }