/* =========================================================
   UNNORMAL STORIES — SEASON 3
   70s paranormal print + analog / early-web aesthetic
   ========================================================= */

:root{
  --black:#101012;
  --ink:#141419;
  --navy:#172b38;
  --blue:#2c5367;
  --teal:#3a777d;
  --ice:#dfeaec;
  --gray:#777b82;
  --red:#cb2614;
  --white:#f4f4f2;
  --paper:#e7e9e5;

  --header-h:4.2rem;
  --content-w:92rem;
  --page-x:clamp(1.1rem,3vw,3.5rem);
  --line:.12rem solid rgba(223,234,236,.58);
  --dark-line:.12rem solid #101012;
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  font-size:clamp(14px,.55vw + .42rem,18px);
  scroll-behavior:smooth;
  scroll-snap-type:y mandatory;
  scroll-padding-top:var(--header-h);
}

body{
  margin:0;
  overflow-x:hidden;
  background:var(--black);
  color:var(--white);
  font-family:Arial,Helvetica,sans-serif;
}

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

/* ---------- ambient background ---------- */

.ambient-bg{
  position:fixed;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
  background:
    radial-gradient(circle at 80% 32%,rgba(58,119,125,.22),transparent 30%),
    radial-gradient(circle at 16% 76%,rgba(203,38,20,.08),transparent 24%),
    radial-gradient(circle at 55% 95%,rgba(44,83,103,.2),transparent 32%),
    linear-gradient(135deg,#0b0d10 0%,#13242e 46%,#101012 100%);
}

.glow{
  position:absolute;
  width:38vw;
  aspect-ratio:1;
  border-radius:50%;
  filter:blur(4rem);
  opacity:.16;
  mix-blend-mode:screen;
}

.glow-one{
  right:-10vw;
  top:12vh;
  background:var(--teal);
  animation:driftOne 18s ease-in-out infinite;
}

.glow-two{
  left:-14vw;
  bottom:4vh;
  background:var(--red);
  opacity:.07;
  animation:driftTwo 24s ease-in-out infinite;
}

.scanlines{
  position:absolute;
  inset:0;
  opacity:.08;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0,
    rgba(255,255,255,.04) .05rem,
    transparent .05rem,
    transparent .22rem
  );
}

.grain{
  position:absolute;
  inset:0;
  opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.8'/%3E%3C/svg%3E");
}

@keyframes driftOne{50%{transform:translate(-6vw,5vh) scale(1.08)}}
@keyframes driftTwo{50%{transform:translate(7vw,-5vh) scale(.95)}}

/* ---------- header ---------- */

.site-header{
  position:fixed;
  inset:0 0 auto 0;
  z-index:50;
  height:var(--header-h);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2rem;
  padding:0 var(--page-x);
  background:rgba(10,13,16,.86);
  border-bottom:var(--line);
  backdrop-filter:blur(.8rem);
}

.mini-brand{
  display:flex;
  align-items:center;
  gap:.7rem;
  text-decoration:none;
  font-weight:900;
}

.mini-mark{
  width:2.35rem;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:.1rem solid var(--ice);
  border-radius:50%;
  background:var(--red);
  color:var(--white);
  font-family:Georgia,serif;
  font-style:italic;
  font-weight:900;
  font-size:.78rem;
}

.brand-name{
  font-size:.92rem;
  letter-spacing:-.02em;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:clamp(1rem,2vw,1.8rem);
}

.main-nav a{
  text-decoration:none;
  text-transform:uppercase;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.16em;
  color:var(--ice);
}

.main-nav a:hover{color:var(--white)}
.menu-toggle{display:none}

/* ---------- snap structure ---------- */

.snap-container{
  position:relative;
  z-index:2;
  padding-top:var(--header-h);
}

.snap-section{
  width:100%;
  height:calc(100dvh - var(--header-h));
  min-height:calc(100dvh - var(--header-h));
  max-height:calc(100dvh - var(--header-h));
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:clamp(.9rem,1.5vh,1.2rem) var(--page-x);
  scroll-snap-align:start;
  scroll-snap-stop:always;
}

.section-inner{
  width:min(var(--content-w),94vw);
  max-width:100%;
  max-height:100%;
  margin:0 auto;
}

/* ---------- shared text ---------- */

h1,h2,h3,p{margin-top:0}

h1,h2{
  font-family:Arial Black,Arial,Helvetica,sans-serif;
  text-transform:uppercase;
  letter-spacing:-.055em;
}

h1{
  max-width:45rem;
  margin-bottom:.8rem;
  font-size:clamp(2.8rem,4.1vw,4.8rem);
  line-height:.9;
}

h2{
  margin-bottom:.7rem;
  font-size:clamp(2.4rem,3.3vw,3.9rem);
  line-height:.92;
}

h3{
  margin-bottom:.55rem;
  font-size:clamp(1.55rem,2vw,2.25rem);
  line-height:1;
}

p{
  margin-bottom:.75rem;
  line-height:1.5;
}

.lead{
  max-width:42rem;
  font-size:clamp(.95rem,1.05vw,1.2rem);
  color:var(--ice);
}

.eyebrow{
  margin-bottom:.55rem;
  color:#9ac2c7;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.2em;
}

.muted-copy{
  color:#a9b0b4;
  font-size:.82rem;
}

/* ---------- buttons ---------- */

.button-row{
  display:flex;
  flex-wrap:wrap;
  gap:.6rem;
  margin-top:.9rem;
}

.btn{
  min-height:2.45rem;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 1.05rem;
  border:.1rem solid var(--ice);
  border-radius:.18rem;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.12em;
  transition:background .18s ease,color .18s ease,transform .18s ease;
}

.btn:hover{transform:translateY(-.1rem)}
.btn-red{background:var(--red);border-color:var(--red);color:var(--white)}
.btn-light{background:var(--ice);border-color:var(--ice);color:var(--black)}
.btn-outline{background:transparent;color:var(--white)}

/* ---------- hero ---------- */

.hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1.06fr) minmax(19rem,.74fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}

.hero-copy{min-width:0}

.signal-strip{
  display:flex;
  flex-wrap:wrap;
  gap:.45rem;
  margin-top:1.5rem;
}

.signal-strip span{
  padding:.34rem .5rem;
  border:.08rem solid rgba(223,234,236,.3);
  color:#a9bec2;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.1em;
}

.cover-wrap{
  position:relative;
  display:flex;
  justify-content:center;
}

.cover-card{
  width:min(100%,24rem);
  border:.12rem solid rgba(223,234,236,.45);
  background:#0a0d10;
  box-shadow:1rem 1rem 0 rgba(58,119,125,.16);
}

.cover-card img{
  aspect-ratio:1;
  object-fit:cover;
}

.cover-tag{
  position:absolute;
  right:-.5rem;
  bottom:1rem;
  padding:.55rem .7rem;
  background:var(--red);
  color:var(--white);
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.14em;
}

/* ---------- about ---------- */

.about-section{
  background:linear-gradient(120deg,rgba(44,83,103,.15),rgba(16,16,18,.1));
}

.about-layout{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(0,1.25fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}

.about-copy{
  max-width:31rem;
}

.about-copy p:not(.eyebrow){
  color:var(--ice);
  font-size:clamp(.86rem,.84vw,1rem);
}

.topic-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.7rem;
}

.topic-link{
  min-height:clamp(5.2rem,11vh,7rem);
  display:grid;
  grid-template-columns:2.8rem 1fr;
  align-items:center;
  gap:.7rem;
  padding:.8rem 1rem;
  border:.1rem solid rgba(223,234,236,.38);
  background:#193542;
  color:var(--white);
  text-decoration:none;
  overflow:hidden;
  transition:transform .18s ease,background .18s ease,border-color .18s ease;
}

.topic-link:hover{
  transform:translateY(-.12rem);
  background:#234958;
  border-color:var(--ice);
}

.topic-link span{
  color:#8fb6bb;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.4rem;
}

.topic-link strong{
  text-transform:uppercase;
  font-size:clamp(.88rem,1.15vw,1.35rem);
  letter-spacing:.02em;
}

.light-topic{
  background:#cbdadd;
  color:var(--black);
}

.light-topic span{color:#315968}
.light-topic:hover{background:#e1ebed}

.red-topic{
  background:#8f2017;
}

.red-topic:hover{background:var(--red)}

/* ---------- season 3 ---------- */

.season-section{
  background:
    linear-gradient(rgba(16,16,18,.36),rgba(16,16,18,.36)),
    radial-gradient(circle at 82% 45%,rgba(58,119,125,.18),transparent 32%);
}

.season-layout{
  display:grid;
  grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:center;
}

.season-heading{
  max-width:30rem;
}

.episode-card{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(16rem,.95fr);
  min-height:clamp(18rem,50vh,28rem);
  overflow:hidden;
  border:.1rem solid rgba(223,234,236,.45);
  background:rgba(15,22,27,.92);
}

.episode-art{
  position:relative;
  overflow:hidden;
  border-right:.1rem solid rgba(223,234,236,.25);
}

.episode-art img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.episode-chip{
  position:absolute;
  left:.8rem;
  bottom:.8rem;
  padding:.48rem .62rem;
  background:var(--red);
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.12em;
}

.episode-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(1.2rem,2.4vw,2.2rem);
}

.episode-copy p:not(.eyebrow){
  max-width:22rem;
  color:#c7d5d7;
  font-size:.88rem;
}

/* ---------- submit ---------- */

.submit-section{
  background:
    radial-gradient(circle at 20% 50%,rgba(203,38,20,.11),transparent 30%),
    linear-gradient(140deg,#11161a,#132d36);
}

.submit-layout{
  display:grid;
  grid-template-columns:minmax(18rem,.78fr) minmax(0,1.22fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}

.submit-poster{
  min-width:0;
  overflow:hidden;
  padding:clamp(1.4rem,2.6vw,2.4rem);
  border:.1rem solid rgba(223,234,236,.45);
  background:#0e1519;
  text-align:center;
  box-shadow:.8rem .8rem 0 rgba(203,38,20,.16);
}

.poster-small{
  margin-bottom:.4rem;
  color:#8fb6bb;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.18em;
}

.submit-poster h2{
  margin-bottom:.7rem;
  color:var(--white);
  font-size:clamp(2.2rem,3.4vw,3.7rem);
}

.submit-poster > p:last-child{
  margin:0 auto;
  max-width:22rem;
  color:#9fb2b6;
  font-size:.7rem;
}

.eye-symbol{
  width:8rem;
  height:4rem;
  display:grid;
  place-items:center;
  margin:0 auto 1rem;
  border:.18rem solid var(--ice);
  border-radius:55% 45% 55% 45% / 65% 65% 35% 35%;
  transform:rotate(2deg);
}

.eye-symbol span{
  width:2.7rem;
  aspect-ratio:1;
  border:.15rem solid var(--ice);
  border-radius:50%;
  background:var(--red);
}

.submit-copy{
  max-width:38rem;
}

.submit-copy p:not(.eyebrow){
  color:var(--ice);
  font-size:clamp(.86rem,.84vw,1rem);
}

/* ---------- archive ---------- */

.archive-section{
  background:linear-gradient(125deg,#111317,#172b38 70%,#101012);
}

.archive-layout{
  display:grid;
  grid-template-columns:minmax(0,.75fr) minmax(18rem,.72fr);
  gap:clamp(2rem,6vw,6rem);
  align-items:center;
}

.archive-copy{
  max-width:34rem;
}

.archive-copy p:not(.eyebrow){
  color:#b7c6c8;
}

.archive-card{
  position:relative;
  width:min(100%,25rem);
  justify-self:center;
  border:.1rem solid rgba(223,234,236,.42);
  background:#07090b;
  box-shadow:.8rem .8rem 0 rgba(44,83,103,.2);
}

.archive-card img{
  aspect-ratio:1;
  object-fit:cover;
  filter:saturate(.86) contrast(1.05);
}

.archive-label{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  padding:.65rem .8rem;
  background:rgba(8,11,13,.86);
  border-top:.08rem solid rgba(223,234,236,.28);
}

.archive-label span{
  color:#8fb6bb;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.12em;
}

.archive-label strong{
  font-size:.58rem;
  letter-spacing:.08em;
}

/* ---------- links ---------- */

.links-section{
  background:#0b0e10;
}

.links-layout{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,.7fr) minmax(20rem,1.3fr);
  grid-template-rows:1fr auto;
  gap:1.2rem clamp(2rem,5vw,4rem);
  align-items:center;
}

.links-copy{
  max-width:32rem;
}

.links-copy p:not(.eyebrow){
  color:#aebfc2;
  font-size:.86rem;
}

.link-board{
  overflow:hidden;
  border:.1rem solid rgba(223,234,236,.38);
}

.platform-link{
  min-height:clamp(3.1rem,7vh,4rem);
  display:grid;
  grid-template-columns:2.7rem 1fr auto;
  align-items:center;
  gap:.8rem;
  padding:.5rem .8rem;
  border-bottom:.08rem solid rgba(223,234,236,.18);
  color:var(--white);
  text-decoration:none;
  transition:background .18s ease,color .18s ease;
}

.platform-link:last-child{border-bottom:0}
.platform-link:hover{background:var(--ice);color:var(--black)}

.platform-link span{
  color:#76a3a9;
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.25rem;
}

.platform-link strong{
  font-size:.9rem;
}

.platform-link em{
  font-style:normal;
  font-size:.52rem;
  font-weight:900;
  letter-spacing:.08em;
}

.site-footer{
  grid-column:1/-1;
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  padding-top:.7rem;
  border-top:.08rem solid rgba(223,234,236,.18);
  color:#8ea1a4;
  font-size:.48rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.site-footer a{
  color:var(--ice);
}

/* ---------- side dots ---------- */

.section-dots{
  position:fixed;
  z-index:45;
  right:.85rem;
  top:50%;
  transform:translateY(-50%);
  display:grid;
  gap:.48rem;
}

.dot{
  width:.55rem;
  aspect-ratio:1;
  display:block;
  border:.1rem solid #a9bec2;
  border-radius:50%;
  background:#111417;
  transition:transform .16s ease,background .16s ease;
}

.dot.active{
  background:var(--red);
  transform:scale(1.28);
}

/* ---------- topic pages ---------- */

.topic-page{
  position:relative;
  z-index:2;
  min-height:100dvh;
  padding:calc(var(--header-h) + 2.5rem) var(--page-x) 3rem;
}

.topic-page-inner{
  width:min(74rem,92vw);
  margin:0 auto;
}

.topic-page-back{
  display:inline-block;
  margin-bottom:1.5rem;
  color:#9ac2c7;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.58rem;
  font-weight:900;
  letter-spacing:.12em;
}

.topic-hero{
  display:grid;
  grid-template-columns:minmax(0,1.1fr) minmax(14rem,.6fr);
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
  margin-bottom:2rem;
}

.topic-hero-copy p:not(.eyebrow){
  max-width:42rem;
  color:var(--ice);
  font-size:.92rem;
}

.topic-hero-art{
  min-height:15rem;
  display:grid;
  place-items:center;
  border:.1rem solid rgba(223,234,236,.38);
  background:#12242d;
}

.topic-hero-mark{
  width:70%;
  aspect-ratio:1;
  display:grid;
  place-items:center;
  border:.12rem solid var(--ice);
  border-radius:50%;
  background:#0c1114;
  color:var(--white);
  text-align:center;
  font-family:Arial Black,Arial,sans-serif;
  font-size:clamp(1.2rem,2vw,2rem);
  text-transform:uppercase;
}

.topic-content{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.8rem;
}

.topic-info-card{
  padding:1rem;
  border:.08rem solid rgba(223,234,236,.3);
  background:rgba(18,36,45,.7);
}

.topic-info-card h2{
  font-size:clamp(1.15rem,1.4vw,1.55rem);
}

.topic-info-card p,
.topic-info-card li{
  color:#c4d1d3;
  font-size:.78rem;
  line-height:1.5;
}

.topic-info-card ul{
  padding-left:1rem;
}

.topic-footer{
  margin-top:2rem;
  padding-top:.8rem;
  border-top:.08rem solid rgba(223,234,236,.18);
  display:flex;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  color:#8ea1a4;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.topic-footer a{color:var(--ice)}

/* ---------- reveal ---------- */

.reveal{opacity:1;transform:none}
.js .reveal{
  opacity:0;
  transform:translateY(.7rem);
  transition:opacity .55s ease,transform .55s ease;
}
.js .reveal.visible{opacity:1;transform:none}

/* ---------- smaller desktop ---------- */

@media (min-width:62rem) and (max-height:48rem){
  :root{
    --header-h:3.7rem;
    --content-w:84rem;
  }

  html{font-size:14px}

  h1{font-size:3.5rem}
  h2{font-size:2.9rem}

  .cover-card{width:min(100%,20rem)}

  .topic-link{
    min-height:4.7rem;
  }

  .episode-card{
    min-height:19rem;
  }

  .archive-card{
    width:min(100%,21rem);
  }

  .platform-link{
    min-height:2.8rem;
  }
}

/* ---------- tablet ---------- */

@media (max-width:61.99rem){
  html{scroll-snap-type:y proximity}

  .snap-section{
    height:auto;
    min-height:calc(100dvh - var(--header-h));
    max-height:none;
    overflow:visible;
    padding-block:1.2rem;
  }

  .hero-grid,
  .about-layout,
  .season-layout,
  .submit-layout,
  .archive-layout,
  .links-layout,
  .topic-hero{
    grid-template-columns:1fr;
  }

  .cover-card,
  .archive-card{
    width:min(62vw,20rem);
  }

  .topic-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .episode-card{
    grid-template-columns:.9fr 1.1fr;
  }

  .links-layout{
    height:auto;
  }

  .topic-content{
    grid-template-columns:1fr;
  }
}

/* ---------- phone ---------- */

@media (max-width:47.5rem){
  :root{
    --header-h:3.6rem;
    --page-x:.9rem;
  }

  html{font-size:14px}

  .brand-name{font-size:.78rem}

  .main-nav{
    position:absolute;
    top:100%;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:0;
    background:#0b0e10;
    border-bottom:var(--line);
  }

  .main-nav.open{display:flex}
  .main-nav a{padding:.8rem 1rem}

  .menu-toggle{
    display:block;
    padding:.35rem;
    border:.08rem solid var(--ice);
    background:#0b0e10;
  }

  .menu-toggle span{
    display:block;
    width:1.25rem;
    height:.1rem;
    margin:.2rem 0;
    background:var(--ice);
  }

  h1{font-size:clamp(2.3rem,10vw,3.3rem)}
  h2{font-size:clamp(2rem,8.5vw,3rem)}

  .topic-grid{
    grid-template-columns:1fr;
  }

  .topic-link{
    min-height:4.4rem;
  }

  .episode-card{
    grid-template-columns:1fr;
  }

  .episode-art{
    min-height:14rem;
    border-right:0;
    border-bottom:.08rem solid rgba(223,234,236,.25);
  }

  .submit-poster h2{
    font-size:2.6rem;
  }

  .platform-link{
    grid-template-columns:2rem 1fr;
  }

  .platform-link em{
    grid-column:2;
  }

  .site-footer{
    display:grid;
    grid-template-columns:1fr;
  }

  .section-dots{display:none}
}

/* ---------- reduced motion ---------- */

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


/* ---------- accessibility ---------- */
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  border:0;
}

/* ---------- header wordmark ---------- */
.main-wordmark{
  display:flex;
  align-items:center;
  min-width:0;
  text-decoration:none;
}

.main-wordmark img{
  display:block;
  width:auto;
  height:clamp(1.8rem,3.2vw,2.4rem);
  max-width:min(55vw,23rem);
}

@media (max-width:47.5rem){
  .main-wordmark img{
    height:1.55rem;
    max-width:60vw;
  }
}

.mini-brand,
.mini-mark,
.brand-name{}

/* ---------- seasons switcher section ---------- */
.seasons-section{
  background:linear-gradient(120deg,rgba(28,44,56,.6),rgba(11,14,16,.35));
}

.seasons-layout{
  display:grid;
  grid-template-columns:minmax(0,.68fr) minmax(0,1.32fr);
  gap:clamp(1.6rem,4vw,4rem);
  align-items:center;
}

.seasons-copy{
  max-width:28rem;
}

.season-switcher{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-top:1rem;
}

.season-tab{
  min-height:2.4rem;
  padding:0 .9rem;
  border:.08rem solid rgba(223,234,236,.3);
  background:rgba(15,22,27,.85);
  color:var(--ice);
  text-transform:uppercase;
  font-size:.56rem;
  font-weight:900;
  letter-spacing:.1em;
  cursor:pointer;
  transition:background .18s ease,border-color .18s ease,transform .18s ease;
}

.season-tab:hover,
.season-tab.active{
  background:var(--red);
  border-color:var(--red);
  color:var(--white);
  transform:translateY(-.05rem);
}

.switcher-note{
  margin-top:.9rem;
  color:#9bb1b5;
  font-size:.72rem;
}

.season-showcase{
  min-width:0;
  overflow:hidden;
  border:.1rem solid rgba(223,234,236,.38);
  background:rgba(11,15,18,.9);
}

.season-showcase-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.8rem 1rem;
  border-bottom:.08rem solid rgba(223,234,236,.2);
  background:rgba(20,27,34,.8);
}

.season-showcase-badge{
  flex:0 0 auto;
  padding:.42rem .62rem;
  background:var(--red);
  color:var(--white);
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.12em;
}

.season-showcase-logo{
  width:auto;
  height:clamp(1.2rem,1.8vw,1.55rem);
  max-width:min(100%,20rem);
  object-fit:contain;
}

.season-showcase-body{
  display:grid;
  grid-template-columns:minmax(14rem,.92fr) minmax(0,1.08fr);
  align-items:stretch;
}

.season-showcase-cover{
  min-width:0;
  background:#0a0d10;
}

.season-showcase-cover img{
  width:100%;
  height:100%;
  min-height:clamp(16rem,42vh,24rem);
  object-fit:cover;
}

.season-showcase-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:clamp(1rem,2vw,1.8rem);
}

.season-showcase-copy p:not(.eyebrow){
  color:#c7d5d7;
  font-size:.88rem;
  max-width:20rem;
}

.season-showcase-copy h3{
  text-transform:uppercase;
  font-family:Arial Black,Arial,Helvetica,sans-serif;
  letter-spacing:-.03em;
}

@media (max-width:61.99rem){
  .seasons-layout{
    grid-template-columns:1fr;
  }

  .season-showcase-body{
    grid-template-columns:1fr;
  }

  .season-showcase-cover img{
    min-height:13rem;
    max-height:36vh;
  }
}

.site-header{
  padding:0 clamp(.9rem,2.4vw,2.2rem);
}
.main-nav{
  gap:clamp(.8rem,1.7vw,1.5rem);
}
.main-nav a{
  font-size:.58rem;
}
@media (max-width:47.5rem){
  .main-nav{
    background:#0b0e10;
  }
}


/* =========================================================
   V9 — SPLIT LOGO + STARTUP ANIMATION
   ========================================================= */

body.intro-running{
  overflow:hidden;
}

/* Header uses the two actual transparent logo files */
.split-wordmark{
  display:grid;
  grid-template-rows:auto auto;
  align-content:center;
  gap:.06rem;
  width:clamp(9rem,14vw,13rem);
  min-width:0;
}

.split-wordmark img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.split-wordmark .wordmark-unnormal{
  width:100%;
}

.split-wordmark .wordmark-stories{
  width:72%;
  justify-self:start;
}

/* Hero repeats the real split logo at a larger scale */
.hero-split-logo{
  width:min(31rem,78%);
  display:grid;
  grid-template-rows:auto auto;
  gap:.12rem;
  margin-bottom:1rem;
}

.hero-split-logo img{
  display:block;
  width:100%;
  height:auto;
}

.hero-split-logo img:last-child{
  width:70%;
}

/* Fullscreen startup logo animation */
.logo-intro{
  position:fixed;
  inset:0;
  z-index:9999;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 54% 44%,rgba(58,119,125,.18),transparent 32%),
    linear-gradient(135deg,#090b0d,#12252e 58%,#090b0d);
  overflow:hidden;
  opacity:1;
  visibility:visible;
  transition:opacity .32s ease,visibility .32s ease;
}

.logo-intro::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.08;
  background:repeating-linear-gradient(
    to bottom,
    rgba(255,255,255,.04) 0,
    rgba(255,255,255,.04) .05rem,
    transparent .05rem,
    transparent .22rem
  );
}

.logo-intro.is-finished{
  opacity:0;
  visibility:hidden;
  pointer-events:none;
}

.logo-intro-lockup{
  position:relative;
  z-index:1;
  width:min(76vw,58rem);
  display:grid;
  grid-template-rows:auto auto;
  gap:clamp(.15rem,.6vh,.45rem);
}

.logo-intro-lockup img{
  display:block;
  height:auto;
  will-change:transform,opacity,filter;
}

.intro-unnormal{
  width:100%;
  opacity:0;
  transform:translateX(-12vw) scale(.96);
  filter:blur(.35rem);
  animation:introUnnormal .62s cubic-bezier(.2,.75,.25,1) .06s forwards;
}

.intro-stories{
  width:70%;
  opacity:0;
  transform:translateX(12vw) translateY(1.4rem) scale(.96);
  filter:blur(.35rem);
  animation:introStories .62s cubic-bezier(.2,.75,.25,1) .28s forwards;
}

.intro-kicker{
  position:absolute;
  left:50%;
  bottom:8vh;
  transform:translateX(-50%);
  z-index:1;
  width:max-content;
  max-width:88vw;
  color:#9ac2c7;
  font-size:clamp(.48rem,.65vw,.7rem);
  font-weight:900;
  letter-spacing:.22em;
  text-align:center;
  opacity:0;
  animation:introKicker .36s ease .78s forwards;
}

.logo-intro-lockup::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1rem;
  width:0;
  height:.12rem;
  background:var(--red);
  animation:introLine .48s ease .68s forwards;
}

@keyframes introUnnormal{
  0%{
    opacity:0;
    transform:translateX(-12vw) scale(.96);
    filter:blur(.35rem);
  }
  72%{
    opacity:1;
    transform:translateX(.5rem) scale(1.01);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateX(0) scale(1);
    filter:blur(0);
  }
}

@keyframes introStories{
  0%{
    opacity:0;
    transform:translateX(12vw) translateY(1.4rem) scale(.96);
    filter:blur(.35rem);
  }
  72%{
    opacity:1;
    transform:translateX(-.4rem) translateY(0) scale(1.01);
    filter:blur(0);
  }
  100%{
    opacity:1;
    transform:translateX(0) translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes introKicker{
  to{opacity:1}
}

@keyframes introLine{
  to{width:100%}
}

/* Let the header logo gently settle in after intro */
.intro-complete .split-wordmark{
  animation:headerLogoSettle .55s ease both;
}

@keyframes headerLogoSettle{
  from{
    opacity:0;
    transform:translateY(-.5rem);
  }
  to{
    opacity:1;
    transform:none;
  }
}

/* Smaller desktop */
@media (max-height:48rem) and (min-width:62rem){
  .split-wordmark{
    width:clamp(8rem,12vw,11rem);
  }

  .hero-split-logo{
    width:min(25rem,72%);
    margin-bottom:.65rem;
  }

  .logo-intro-lockup{
    width:min(68vw,48rem);
  }
}

/* Mobile */
@media (max-width:47.5rem){
  .split-wordmark{
    width:8.2rem;
  }

  .hero-split-logo{
    width:min(21rem,92%);
  }

  .logo-intro-lockup{
    width:min(88vw,28rem);
  }

  .intro-stories{
    width:72%;
  }

  .intro-kicker{
    bottom:6vh;
    font-size:.45rem;
    letter-spacing:.13em;
  }
}

@media (prefers-reduced-motion:reduce){
  .intro-unnormal,
  .intro-stories,
  .intro-kicker,
  .logo-intro-lockup::after{
    animation:none!important;
    opacity:1;
    transform:none;
    filter:none;
  }

  .logo-intro{
    display:none;
  }
}


/* =========================================================
   V10 — REMOVE SWITCHER, ADD COVER STACK, PURPLE HINTS
   ========================================================= */

:root{
  --plum:#2a1934;
  --purple-glow:#4a2a67;
  --violet-ink:#7e64aa;
}

/* subtle dark purple hints in the atmosphere */
.ambient-bg{
  background:
    radial-gradient(circle at 82% 30%, rgba(58,119,125,.18), transparent 28%),
    radial-gradient(circle at 24% 18%, rgba(74,42,103,.16), transparent 24%),
    radial-gradient(circle at 72% 88%, rgba(42,25,52,.24), transparent 26%),
    radial-gradient(circle at 16% 76%, rgba(203,38,20,.07), transparent 22%),
    linear-gradient(135deg,#090b0d 0%, #12202b 42%, #171120 72%, #090b0d 100%);
}

.glow-one{
  background:var(--teal);
  opacity:.14;
}

.glow-two{
  background:var(--purple-glow);
  opacity:.11;
}

.eyebrow{
  color:#ab9ed2;
}

.signal-strip span{
  border-color:rgba(171,158,210,.24);
  color:#bfafdd;
}

.btn-outline{
  border-color:rgba(171,158,210,.55);
}

.btn-outline:hover{
  background:rgba(74,42,103,.28);
}

.cover-card{
  box-shadow:1rem 1rem 0 rgba(74,42,103,.18);
}

.cover-tag,
.season-showcase-badge,
.episode-chip{
  box-shadow:.25rem .25rem 0 rgba(42,25,52,.35);
}

.archive-section{
  background:linear-gradient(125deg,#101116,#1a2130 48%, #20142c 100%);
}

.links-section{
  background:
    linear-gradient(145deg, #090b0d, #111720 54%, #181121 100%);
}

/* ---------- static seasons section ---------- */
.static-seasons-layout{
  grid-template-columns:minmax(0,.82fr) minmax(16rem,1.18fr);
  gap:clamp(1.8rem,4vw,4rem);
}

.season-notes{
  display:grid;
  gap:.75rem;
  margin-top:1.1rem;
}

.season-note{
  display:grid;
  grid-template-columns:2.8rem 1fr;
  align-items:start;
  gap:.8rem;
  padding:.9rem 1rem;
  border:.08rem solid rgba(171,158,210,.22);
  background:rgba(20,25,32,.62);
}

.season-note span{
  color:var(--violet-ink);
  font-family:Georgia,serif;
  font-style:italic;
  font-size:1.45rem;
  line-height:1;
}

.season-note strong{
  display:block;
  margin-bottom:.22rem;
  color:var(--white);
  text-transform:uppercase;
  font-size:.88rem;
  letter-spacing:.06em;
}

.season-note p{
  margin:0;
  color:#c7d2d8;
  font-size:.78rem;
  line-height:1.5;
}

.season-evolution-card{
  min-width:0;
  display:flex;
  align-items:center;
}

.season-evolution-inner{
  width:100%;
  padding:clamp(1.2rem,2.2vw,1.9rem);
  border:.1rem solid rgba(171,158,210,.28);
  background:
    linear-gradient(145deg, rgba(18,24,31,.94), rgba(35,22,47,.88));
  box-shadow:.9rem .9rem 0 rgba(74,42,103,.16);
}

.season-evolution-inner h3{
  margin-bottom:.55rem;
  text-transform:uppercase;
  font-family:Arial Black,Arial,Helvetica,sans-serif;
  letter-spacing:-.03em;
}

.season-evolution-inner p{
  color:#c7d5d7;
  font-size:.88rem;
  max-width:22rem;
}

/* ---------- links slide with overlapping cover stack ---------- */
.links-layout-covers{
  grid-template-columns:minmax(0,.62fr) minmax(19rem,.92fr) minmax(16rem,.86fr);
  grid-template-rows:1fr auto;
  gap:1.2rem clamp(1.4rem,3vw,2.6rem);
  align-items:center;
}

.cover-stack-wrap{
  display:flex;
  justify-content:center;
  align-items:center;
  min-width:0;
}

.cover-stack{
  position:relative;
  width:min(100%,22rem);
  height:clamp(16rem,46vh,24rem);
}

.stack-cover{
  position:absolute;
  top:50%;
  left:50%;
  width:min(100%,12rem);
  aspect-ratio:1;
  object-fit:cover;
  border:.1rem solid rgba(223,234,236,.4);
  background:#07090b;
  box-shadow:.7rem .7rem 0 rgba(42,25,52,.18);
  transition:transform .22s ease;
}

.stack-one{
  transform:translate(-60%,-50%) rotate(-10deg);
  z-index:1;
  filter:saturate(.88) brightness(.9);
}

.stack-two{
  transform:translate(-46%,-50%) rotate(-1deg);
  z-index:2;
  filter:saturate(.94) brightness(.95);
}

.stack-three{
  transform:translate(-28%,-49%) rotate(9deg);
  z-index:3;
}

.cover-stack:hover .stack-one{
  transform:translate(-63%,-52%) rotate(-12deg);
}
.cover-stack:hover .stack-two{
  transform:translate(-46%,-50%) rotate(-1deg) scale(1.02);
}
.cover-stack:hover .stack-three{
  transform:translate(-24%,-48%) rotate(11deg);
}

.link-board{
  border-color:rgba(171,158,210,.22);
  background:rgba(13,17,22,.62);
}

.platform-link{
  border-bottom-color:rgba(171,158,210,.14);
}

.platform-link span{
  color:#aa9bcf;
}

.platform-link:hover{
  background:#deddec;
  color:var(--black);
}

.site-footer{
  border-top-color:rgba(171,158,210,.14);
  color:#ae9fd4;
}

.site-footer a{
  color:var(--ice);
}

@media (max-width:61.99rem){
  .static-seasons-layout{
    grid-template-columns:1fr;
  }

  .links-layout-covers{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    height:auto;
  }

  .cover-stack{
    width:min(78vw,18rem);
    height:16rem;
    margin-top:.4rem;
  }

  .stack-cover{
    width:min(100%,9.6rem);
  }
}

@media (max-width:47.5rem){
  .season-note{
    grid-template-columns:2.25rem 1fr;
    padding:.8rem;
  }

  .season-note span{
    font-size:1.2rem;
  }

  .cover-stack{
    width:min(88vw,17rem);
    height:14.5rem;
  }

  .stack-cover{
    width:min(100%,8.9rem);
  }
}


/* V10.1 intro fail-safe:
   If JS ever fails after page load, the intro still cannot remain forever. */
.js .logo-intro{
  animation:introFailSafe 1.75s ease forwards;
}

.js .logo-intro.is-finished{
  animation:none;
}

@keyframes introFailSafe{
  0%,78%{
    opacity:1;
    visibility:visible;
  }
  100%{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
  }
}


/* V10.2 — archive snap removed */
.links-layout-covers{
  max-height:100%;
}


/* =========================================================
   V10.3 — SPREAD COVER ART + HOVER SHUFFLE
   HTML intentionally unchanged.
   ========================================================= */

.cover-stack-wrap{
  width:100%;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:visible;
}

.cover-stack{
  position:relative;
  width:min(100%,27rem);
  height:clamp(18rem,50vh,27rem);
  overflow:visible;
  perspective:60rem;
}

/* Each cover is assigned a position class by JavaScript. */
.stack-cover{
  --cover-x:-50%;
  --cover-y:-50%;
  --cover-r:0deg;
  --cover-s:1;

  position:absolute;
  top:50%;
  left:50%;
  width:clamp(9rem,13vw,13rem);
  aspect-ratio:1;
  object-fit:cover;
  border:.1rem solid rgba(223,234,236,.45);
  background:#07090b;
  box-shadow:
    .65rem .8rem 0 rgba(42,25,52,.24),
    0 1.2rem 2.5rem rgba(0,0,0,.22);

  transform:
    translate(var(--cover-x),var(--cover-y))
    rotate(var(--cover-r))
    scale(var(--cover-s));

  transition:
    transform .48s cubic-bezier(.2,.8,.25,1),
    filter .32s ease,
    opacity .32s ease;
  will-change:transform;
}

/* Wide, loose fan instead of the old tight overlap. */
.stack-cover.stack-pos-a{
  --cover-x:-108%;
  --cover-y:-62%;
  --cover-r:-13deg;
  --cover-s:.94;
  z-index:1;
  filter:saturate(.84) brightness(.9);
}

.stack-cover.stack-pos-b{
  --cover-x:-52%;
  --cover-y:-46%;
  --cover-r:2deg;
  --cover-s:1;
  z-index:2;
  filter:saturate(.94) brightness(.96);
}

.stack-cover.stack-pos-c{
  --cover-x:7%;
  --cover-y:-58%;
  --cover-r:14deg;
  --cover-s:.97;
  z-index:3;
  filter:none;
}

/* Remove the old fixed transforms so JS-controlled positions win. */
.stack-one,
.stack-two,
.stack-three,
.cover-stack:hover .stack-one,
.cover-stack:hover .stack-two,
.cover-stack:hover .stack-three{
  transform:
    translate(var(--cover-x),var(--cover-y))
    rotate(var(--cover-r))
    scale(var(--cover-s));
}

/* Small lift while actively shuffling. */
.cover-stack.is-shuffling .stack-cover{
  filter:saturate(1.02) brightness(1.02);
}

@media (max-width:61.99rem){
  .cover-stack{
    width:min(92vw,23rem);
    height:17rem;
  }

  .stack-cover{
    width:clamp(8rem,27vw,10.5rem);
  }

  .stack-cover.stack-pos-a{
    --cover-x:-104%;
    --cover-y:-57%;
    --cover-r:-11deg;
  }

  .stack-cover.stack-pos-b{
    --cover-x:-51%;
    --cover-y:-44%;
    --cover-r:1deg;
  }

  .stack-cover.stack-pos-c{
    --cover-x:2%;
    --cover-y:-55%;
    --cover-r:11deg;
  }
}

@media (max-width:47.5rem){
  .cover-stack{
    width:min(94vw,19rem);
    height:14rem;
  }

  .stack-cover{
    width:8.2rem;
  }

  .stack-cover.stack-pos-a{
    --cover-x:-96%;
    --cover-y:-55%;
    --cover-r:-10deg;
  }

  .stack-cover.stack-pos-b{
    --cover-x:-51%;
    --cover-y:-43%;
    --cover-r:0deg;
  }

  .stack-cover.stack-pos-c{
    --cover-x:-5%;
    --cover-y:-54%;
    --cover-r:10deg;
  }
}

@media (prefers-reduced-motion:reduce){
  .stack-cover{
    transition:none;
  }
}


/* =========================================================
   V10.4 — CONTACT EMAIL + STORY SUBMISSION FORM
   ========================================================= */

.contact-email{
  margin-top:1rem;
  color:#bfcbd0;
  font-size:.78rem;
  font-weight:700;
}

.contact-email a{
  color:#d8caee;
  text-decoration:none;
  border-bottom:.08rem solid rgba(216,202,238,.42);
}

.contact-email a:hover{
  color:var(--white);
  border-bottom-color:var(--red);
}

.form-page{
  position:relative;
  z-index:2;
  min-height:100dvh;
  padding:calc(var(--header-h) + 2.2rem) var(--page-x) 3rem;
}

.form-shell{
  width:min(72rem,94vw);
  margin:0 auto;
  display:grid;
  grid-template-columns:minmax(0,.72fr) minmax(20rem,1.28fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:start;
}

.form-intro{
  position:sticky;
  top:calc(var(--header-h) + 1.2rem);
}

.form-intro h1{
  font-size:clamp(2.4rem,4vw,4.2rem);
}

.form-intro p:not(.eyebrow){
  color:#c2cfd2;
  font-size:.9rem;
  max-width:30rem;
}

.form-email-box{
  margin-top:1rem;
  padding:.9rem 1rem;
  border:.08rem solid rgba(171,158,210,.25);
  background:rgba(31,20,43,.44);
}

.form-email-box span{
  display:block;
  margin-bottom:.28rem;
  color:#aa9bcf;
  font-size:.5rem;
  font-weight:900;
  letter-spacing:.13em;
  text-transform:uppercase;
}

.form-email-box a{
  color:var(--white);
  text-decoration:none;
  font-weight:800;
  word-break:break-word;
}

.story-form{
  padding:clamp(1rem,2vw,1.8rem);
  border:.1rem solid rgba(223,234,236,.3);
  background:rgba(11,15,18,.88);
  box-shadow:.8rem .8rem 0 rgba(74,42,103,.14);
}

.form-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:.9rem;
}

.form-field{
  min-width:0;
}

.form-field.full{
  grid-column:1/-1;
}

.form-field label{
  display:block;
  margin-bottom:.35rem;
  color:#cbbfe0;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.form-field input,
.form-field select,
.form-field textarea{
  width:100%;
  min-width:0;
  border:.08rem solid rgba(223,234,236,.25);
  border-radius:0;
  background:#111821;
  color:var(--white);
  font:inherit;
  font-size:.82rem;
  padding:.72rem .78rem;
  outline:none;
}

.form-field textarea{
  min-height:10rem;
  resize:vertical;
  line-height:1.5;
}

.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus{
  border-color:#aa9bcf;
  box-shadow:0 0 0 .12rem rgba(126,100,170,.14);
}

.form-help{
  margin:.35rem 0 0;
  color:#879ba0;
  font-size:.64rem;
  line-height:1.45;
}

.check-row{
  display:flex;
  align-items:flex-start;
  gap:.6rem;
  padding:.75rem 0;
}

.check-row input{
  width:1rem;
  height:1rem;
  margin-top:.12rem;
  accent-color:var(--red);
}

.check-row label{
  color:#c4d0d3;
  font-size:.74rem;
  line-height:1.45;
}

.form-actions{
  display:flex;
  flex-wrap:wrap;
  gap:.65rem;
  margin-top:1rem;
}

.form-status{
  min-height:1.4rem;
  margin-top:.75rem;
  color:#b9a8d8;
  font-size:.7rem;
}

.back-link{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  margin-bottom:1.2rem;
  color:#ab9ed2;
  text-decoration:none;
  text-transform:uppercase;
  font-size:.55rem;
  font-weight:900;
  letter-spacing:.12em;
}

.back-link:hover{
  color:var(--white);
}

@media (max-width:61.99rem){
  .form-shell{
    grid-template-columns:1fr;
  }

  .form-intro{
    position:static;
  }
}

@media (max-width:47.5rem){
  .form-grid{
    grid-template-columns:1fr;
  }

  .form-field.full{
    grid-column:auto;
  }

  .story-form{
    padding:.9rem;
  }
}