/* The story page, as a rave lineup flyer. Builds on buy.css (header, buttons, footer). */
.flyer-hero { position: relative; margin-top: 34px; border: 3px solid var(--acid); box-shadow: 10px 10px 0 var(--pink); overflow: hidden; }
.flyer-hero img { display: block; width: 100%; height: auto; }
.flyer-hero h1 { position: absolute; left: 0; right: 0; bottom: 0; padding: 110px 32px 28px; background: linear-gradient(180deg, #08090b00, #08090bee 70%); font: clamp(44px, 7vw, 104px)/.86 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: -.035em; color: var(--paper); text-shadow: 5px 5px var(--pink); }
.flyer-hero h1 span { color: var(--acid); }

.premise { display: grid; grid-template-columns: 1fr 1.3fr; gap: 40px; align-items: center; padding-top: 90px; }
.premise-lines { font: clamp(40px, 5.4vw, 76px)/1 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-style: italic; letter-spacing: -.02em; color: var(--paper); }
.premise-lines span { color: var(--acid); text-shadow: 4px 4px 0 var(--pink); }
.premise-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.premise-pair figure { position: relative; margin: 0; border: 1px solid var(--line); }
.premise-pair img { display: block; width: 100%; height: auto; }
.premise-pair figcaption { position: absolute; left: 10px; top: 10px; padding: 6px 10px; background: var(--black); border: 2px solid var(--acid); color: var(--acid); font-size: 12px; font-weight: 900; letter-spacing: .1em; }

.lineup { padding-top: 100px; }
.lineup h2 { margin-bottom: 26px; font: clamp(64px, 10vw, 150px)/.82 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: -.03em; color: var(--pink); text-shadow: 6px 6px 0 var(--acid); }
.acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.act { position: relative; overflow: hidden; border: 3px solid currentColor; scroll-margin-top: 90px; }
.act img { display: block; width: 100%; height: auto; }
.act-copy { position: absolute; left: 0; right: 0; bottom: 0; display: grid; gap: 8px; justify-items: start; padding: 90px 18px 18px; background: linear-gradient(180deg, #08090b00, #08090bf2 55%); }
.act-role { padding: 5px 9px; background: currentColor; font-size: 11px; font-weight: 900; letter-spacing: .12em; }
.act-role { color: inherit; }
.act h3 { font: clamp(48px, 5.4vw, 76px)/.86 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-style: italic; letter-spacing: -.02em; color: currentColor; text-shadow: 4px 4px 0 var(--pink); }
.act q { quotes: none; color: var(--paper); font-size: 13px; font-weight: 900; }
.act-sheet { color: var(--muted); font-size: 11px; text-decoration: none; border-bottom: 1px solid currentColor; }
.act-sheet:hover { color: var(--paper); }
.act-acid { color: var(--acid); }
.act-cyan { color: var(--cyan); }
.act-pink { color: var(--pink); }
.act-pink h3 { text-shadow: 4px 4px 0 var(--acid); }
.act-acid .act-role, .act-cyan .act-role, .act-pink .act-role { color: var(--black); background: currentColor; }
.act-acid .act-role { background: var(--acid); }
.act-cyan .act-role { background: var(--cyan); }
.act-pink .act-role { background: var(--pink); }
.act-dj { max-width: 380px; margin: 18px auto 0; color: var(--line); }
.act-dj .act-role { background: var(--paper); color: var(--black); }
.act-dj h3 { color: var(--paper); }

.house { display: grid; justify-items: center; gap: 16px; padding: 110px 0 100px; text-align: center; }
.house h2 { font: clamp(40px, 6vw, 84px)/.95 Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; letter-spacing: -.02em; color: var(--paper); }
.house h2 a { color: var(--acid); text-decoration: none; text-shadow: 4px 4px 0 var(--pink); }
.house p { color: var(--muted); font-size: 14px; }
.house .action-button { min-width: 280px; }

@media (max-width: 860px) {
  .premise { grid-template-columns: 1fr; gap: 26px; }
  .acts { grid-template-columns: 1fr; max-width: 520px; margin: 0 auto; }
  .flyer-hero h1 { position: static; padding: 20px; background: var(--black); }
}
@media (max-width: 520px) { .house .action-button { min-width: 0; width: 100%; } }