/* ===========================================================
   Still Here Still Queer — shared design system
   Locked from the homepage concept.
   Palette: "Color Example.jpeg"  ·  Type: "Typography Example.jpeg"
   =========================================================== */
:root{
  --pink:      #F35FA7;   /* iconic pink triangle (bright) */
  --pink-deep: #D6437E;   /* deep rose */
  --ink:       #141016;   /* near-black, archival B&W */
  --slate:     #3A4247;   /* cool gray from B&W photography */
  --cream:     #FBF3E4;   /* muted paper */
  --tan:       #EFC99A;   /* aged paper */
  --yellow:    #F5D23F;   /* pop */
  --sky:       #A9CFE3;   /* pop */
  --orange:    #F04E23;   /* pop / accent dot */
  --nav-h: 68px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:'EB Garamond',Georgia,serif;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
.display{font-family:'Anton',Impact,sans-serif;letter-spacing:.5px;text-transform:uppercase;line-height:.92}
.hand{font-family:'Caveat',cursive}
.label{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.28em;font-weight:500}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- NAV ---------- */
nav{
  position:fixed;top:0;left:0;right:0;height:var(--nav-h);z-index:50;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,48px);
  background:rgba(20,16,22,.55);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(251,243,228,.12);
}
.brand{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:clamp(15px,1.8vw,20px);letter-spacing:1px;color:var(--cream);display:flex;align-items:center}
.brand b{color:var(--pink)}
.brand img{height:40px;width:auto;display:block}
/* actual SHSQ logo — cream+pink variant for dark backgrounds */
.hero-logo{width:min(680px,84vw);margin:0 auto}
.foot-logo{height:clamp(52px,7vw,68px);width:auto;margin-bottom:22px}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2vw,30px)}
.nav-links a{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.14em;font-size:13px;font-weight:500;color:var(--cream);opacity:.82;transition:.2s;white-space:nowrap}
.nav-links a:hover,.nav-links a.active{opacity:1;color:var(--pink)}
.ig{width:30px;height:30px;display:grid;place-items:center;color:var(--cream);opacity:.85;transition:.2s}
.ig svg{width:22px;height:22px;display:block}
.ig:hover{color:var(--pink);opacity:1}
.menu-btn{display:none;background:none;border:0;color:var(--cream);font-size:26px;cursor:pointer}
@media(max-width:860px){
  .nav-links{position:fixed;inset:var(--nav-h) 0 auto 0;flex-direction:column;gap:0;background:rgba(20,16,22,.97);padding:8px 0;transform:translateY(-140%);transition:.35s}
  .nav-links.open{transform:translateY(0)}
  .nav-links a{padding:14px 24px;width:100%;font-size:16px}
  .ig{margin:10px 24px}
  .menu-btn{display:block}
}

/* ---------- SHARED PIECES ---------- */
section{padding:clamp(60px,9vw,120px) clamp(20px,6vw,90px);position:relative}
.eyebrow{color:var(--pink);font-size:12px;margin-bottom:18px}
.eyebrow::before{content:"◆ ";color:var(--orange)}
.btn{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.16em;font-size:13px;font-weight:600;
  padding:14px 30px;border-radius:2px;border:1.5px solid var(--pink);cursor:pointer;transition:.22s;display:inline-block}
.btn.solid{background:var(--pink);color:var(--ink)}
.btn.solid:hover{background:var(--pink-deep);border-color:var(--pink-deep);color:var(--cream)}
.btn.ghost{background:transparent;color:var(--cream)}
.btn.ghost:hover{background:var(--cream);color:var(--ink);border-color:var(--cream)}

/* page header used by inner pages */
.page-head{padding:calc(var(--nav-h) + clamp(40px,7vw,80px)) clamp(20px,6vw,90px) clamp(24px,4vw,44px)}
.page-head h1{font-size:clamp(44px,8vw,104px);color:var(--cream)}
.page-head h1 em{font-style:normal;color:var(--pink)}
.page-head .sub{color:var(--tan);font-style:italic;font-size:clamp(16px,2vw,22px);margin-top:10px}

/* ---------- FOOTER ---------- */
footer{background:#0d0a0f;padding:clamp(50px,7vw,90px) clamp(20px,6vw,90px) 40px;display:grid;grid-template-columns:auto 1fr;gap:clamp(30px,6vw,70px);align-items:start}
@media(max-width:820px){footer{grid-template-columns:1fr}}
.poster{width:min(280px,60vw);border-radius:4px;overflow:hidden;border:1px solid rgba(251,243,228,.15);box-shadow:0 20px 60px rgba(0,0,0,.6);background:#241a22;aspect-ratio:2/3}
.poster img{width:100%;height:100%;object-fit:cover}
.credits h4{font-family:'Anton',sans-serif;text-transform:uppercase;font-size:22px;color:var(--cream);margin-bottom:20px}
.credits h4 em{font-style:normal;color:var(--pink)}
.cgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:26px 30px;max-width:1000px;align-items:start}
@media(max-width:900px){.cgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:470px){.cgrid{grid-template-columns:1fr}}
.cgrid .col{display:flex;flex-direction:column;gap:13px;min-width:0}
.cgrid .ch{font-family:'Oswald',sans-serif;font-weight:600;text-transform:uppercase;letter-spacing:.12em;
  font-size:11px;color:var(--cream);opacity:.92;padding-bottom:9px;border-bottom:1px solid rgba(251,243,228,.17)}
.cgrid .c .k{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.18em;font-size:10px;color:var(--pink)}
.cgrid .c .v{font-size:15px;color:var(--cream);margin-top:3px}
.fine{grid-column:1/-1;margin-top:40px;padding-top:22px;border-top:1px solid rgba(251,243,228,.1);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:'Oswald',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(251,243,228,.55)}
.fine .noai{color:var(--pink);opacity:.85}

/* ---------- DIRECTOR'S STATEMENTS (episode pages) ----------
   Per 2026-07-23 meeting: director statements live on individual
   episode pages; only the showrunner statement stays on About. */
.statement{max-width:70ch;font-size:clamp(16px,1.5vw,19px);line-height:1.78;color:#cfc4b6}
.statement p{margin-top:18px}
.statement p:first-child{margin-top:0}
.alt .statement{color:#4a4048}
.pinkbg .statement{color:var(--ink)}
.attrib{font-family:'Caveat',cursive;font-size:clamp(24px,2.6vw,32px);color:var(--pink);margin-top:24px}
.alt .attrib{color:var(--pink-deep)}
.pinkbg .attrib{color:#fff}
/* runtime / credit line under the episode title */
.runtime{font-family:'Oswald',sans-serif;text-transform:uppercase;letter-spacing:.18em;
  font-size:11px;color:var(--tan);opacity:.9;margin-top:6px}