/* The large featured show at the top of the page
   Lines 107-146 of the original index.html. */

/* ---------------- hero ---------------- */
#hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;z-index:2;isolation:isolate}
#hero .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center 50%;filter:saturate(.95) contrast(1.02)}
#hero .hero-video{position:absolute;inset:0;z-index:-2;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1.4s ease}
#hero .hero-video.on{opacity:1}
#hero .hero-video iframe{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;border:0;pointer-events:none;filter:saturate(.95) contrast(1.02)}
#hero .hero-sound{position:absolute;right:clamp(1.2rem,3vw,2.8rem);bottom:clamp(1.4rem,4vh,2.4rem);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid rgba(253,247,247,.4);background:rgba(16,11,8,.5);color:var(--light);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;transform:translateY(6px);transition:opacity .5s ease,transform .5s ease,background .2s,border-color .2s,color .2s;backdrop-filter:blur(6px);pointer-events:none;padding:0}
#hero .hero-sound.show{opacity:1;transform:none;pointer-events:auto}
#hero .hero-sound:hover{border-color:var(--accent-hi);color:var(--accent-hi)}
#hero .hero-sound svg{width:19px;height:19px}
#hero .hero-sound .snd-on{display:none}
#hero .hero-sound.on .snd-off{display:none}
#hero .hero-sound.on .snd-on{display:block}
#hero .scrim{position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.4) 100%),
  linear-gradient(0deg,var(--bg) 1%,rgba(0,0,0,0) 44%)}
.hero-inner{padding:0 var(--gut) clamp(2.6rem,7vh,5rem);max-width:calc(720px + 2 * var(--gut))}
.hero-house{color:var(--accent-hi);letter-spacing:.3em}
.hero-title{font-family:var(--font);font-weight:800;line-height:.98;margin:.5rem 0 .2rem;letter-spacing:-.02em;
  font-size:clamp(2.6rem,6.4vw,5rem);color:var(--light);text-shadow:0 4px 30px rgba(0,0,0,.45)}
.hero-title .yr{display:block;font-size:.32em;font-weight:600;font-style:normal;color:rgba(253,247,247,.78);
  letter-spacing:0;margin-bottom:.4rem}
.hero-dek{font-size:clamp(1.05rem,1.7vw,1.35rem);color:rgba(253,247,247,.9);font-style:normal;max-width:38ch;
  margin:.7rem 0 1.2rem;text-shadow:0 2px 16px rgba(0,0,0,.5)}
.hero-meta{display:flex;gap:.55rem;flex-wrap:wrap;margin-bottom:1.5rem}
.chip{font-family:var(--font);text-transform:uppercase;letter-spacing:.12em;font-size:.6rem;font-weight:600;
  color:rgba(253,247,247,.85);border:1px solid rgba(253,247,247,.28);padding:.34rem .7rem;border-radius:999px;background:rgba(0,0,0,.32)}
.chip.gold{color:var(--accent-hi);border-color:rgba(228,183,163,.5)}
.chiplink{cursor:pointer;transition:.2s}
.chiplink:hover{color:var(--accent-hi);border-color:var(--accent-hi)}
.hero-actions{display:flex;gap:.8rem;flex-wrap:wrap}
.btn-play{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;border:0;border-radius:999px;background:var(--accent);
  color:var(--on-accent);font-family:var(--font);font-weight:700;letter-spacing:0;font-size:1.05rem;padding:.72rem 1.7rem;transition:.2s}
.btn-play:hover{background:var(--accent-deep);transform:translateY(-1px)}
.btn-info{display:inline-flex;align-items:center;gap:.6rem;cursor:pointer;border:0;border-radius:999px;
  background:rgba(253,247,247,.16);color:var(--light);font-family:var(--font);font-weight:600;letter-spacing:0;
  font-size:1.05rem;padding:.72rem 1.5rem;transition:.2s;backdrop-filter:blur(3px)}
.btn-info:hover{background:rgba(253,247,247,.3)}
/* sized to the drawing, not to a 24-square box around it, so the padding on
   each side of the lockup is the padding you actually see */
.btn-play svg{width:11.6px;height:13.5px}
.btn-info svg{width:16px;height:16px}

/* ---- the hero as a card ------------------------------------------------
   The featured show sits in the page rather than behind it: inset to the
   content column, rounded, and lifted off the ground by a shadow, the way
   the Netflix billboard now sits under its bar. The video and the scrim
   are clipped to the corners, and the bottom of the card settles a shade
   below the page ground so the rounding still reads where it meets it. */
#hero{
  --barh:75px;
  margin:calc(var(--barh) + .5rem) var(--gut) clamp(1.2rem,3vh,2.4rem);
  min-height:min(80vh,780px);
  border-radius:14px;
  overflow:hidden;
  box-shadow:
    0 2px 6px -2px rgba(0,0,0,.5),
    0 20px 48px -18px rgba(0,0,0,.78),
    inset 0 0 0 1px rgba(253,247,247,.07);
}
/* the copy keeps its own margin inside the card instead of borrowing the
   page gutter, which is now spent on the card's own inset */
#hero .hero-inner{padding-left:clamp(1.5rem,2.8vw,2.7rem);padding-right:clamp(1.5rem,2.8vw,2.7rem);
  max-width:calc(720px + 2 * 2.7rem)}
#hero .scrim{background:
  linear-gradient(90deg,rgba(0,0,0,.86) 0%,rgba(0,0,0,.55) 34%,rgba(0,0,0,.12) 62%,rgba(0,0,0,.4) 100%),
  linear-gradient(0deg,var(--panel) 1%,rgba(0,0,0,0) 44%)}

@media(max-width:720px){
  #hero{--barh:62px;margin-left:clamp(.6rem,2.4vw,1rem);margin-right:clamp(.6rem,2.4vw,1rem);
    border-radius:11px;min-height:70vh}
}