/* 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(246,241,224,.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(38,22,10,.86) 0%,rgba(38,22,10,.55) 34%,rgba(38,22,10,.12) 62%,rgba(38,22,10,.4) 100%),
  linear-gradient(0deg,var(--bg) 1%,rgba(38,22,10,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(246,241,224,.78);
  letter-spacing:0;margin-bottom:.4rem}
.hero-dek{font-size:clamp(1.05rem,1.7vw,1.35rem);color:rgba(246,241,224,.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(246,241,224,.85);border:1px solid rgba(246,241,224,.28);padding:.34rem .7rem;border-radius:999px;background:rgba(38,22,10,.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:5px;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:5px;
  background:rgba(246,241,224,.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(246,241,224,.3)}
.btn-play svg,.btn-info svg{width:19px;height:19px}