/* =============================================================================
   Home page only. (Framework, buttons, and the show-list rows are in site.css.)
   ============================================================================= */

/* home only: let the header float over the hero (photo runs to the very top);
   a soft top gradient keeps the nav legible instead of a solid bar. */
body.home header.site{position:fixed;left:0;right:0;top:0;
  background:linear-gradient(180deg,rgba(10,10,10,.5) 0%,rgba(10,10,10,0) 100%);
  backdrop-filter:none;border-bottom:0}

/* ---------------------------------------- hero (full-bleed, EPK poster style)
   Sticky so the photo stays put while the page scrolls up over it (Lovano fold).
   The photo lives in .hero-bg and eases up a touch on scroll (parallax). */
.hero{position:sticky;top:0;z-index:0;overflow:hidden;height:100vh;min-height:560px;background:#0e0e0e}
.hero-bg{position:absolute;inset:-10% 0;z-index:0;
  background:url("../assets/dw-hero.jpg") 50% 38%/cover no-repeat}
@supports (animation-timeline:scroll()){
  .hero-bg{animation:heroPar linear both;animation-timeline:scroll(root);animation-range:0 100vh}
  @keyframes heroPar{to{transform:translateY(-8%)}}
}
/* scrim: light wash up top (nav legibility, faces stay clear) building to a
   solid dark band across the bottom third, where all the text sits */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:linear-gradient(180deg,rgba(12,12,12,.55) 0%,rgba(12,12,12,.1) 15%,rgba(12,12,12,0) 38%,rgba(12,12,12,.5) 60%,rgba(12,12,12,.86) 80%,rgba(12,12,12,.97) 100%)}
/* atmosphere: warm glow near the string lights, breathing slowly */
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(46% 30% at 56% 12%,rgba(255,201,120,.18),transparent 62%);
  mix-blend-mode:screen;animation:heroGlow 7s ease-in-out infinite}
@keyframes heroGlow{0%,100%{opacity:.4}50%{opacity:.85}}
/* full-height inner; everything grouped at the bottom (EPK masthead) so the
   players' faces stay clear up top and the text rides the dark band below */
.hero-inner{position:absolute;left:0;right:0;bottom:0;margin-inline:auto;z-index:2;width:100%;max-width:1040px;
  padding:clamp(80px,12vh,140px) clamp(22px,5vw,44px) clamp(84px,9vh,112px);
  display:flex;flex-direction:column}
.hero h1{font-family:var(--serif);font-weight:300;font-size:clamp(2.6rem,7.6vw,5.8rem);line-height:.9;
  letter-spacing:-.01em;color:#fff;margin-bottom:18px;text-shadow:0 2px 6px rgba(0,0,0,.6),0 2px 40px rgba(0,0,0,.5)}
.hero h1 .surname{font-style:italic;font-weight:300;color:var(--brass-lt)}
/* tagline on the left, eyebrow moved down to its right (calmer, over the scrim,
   away from the busy brick up top) with a hairline divider between them */
.hero-sub{display:flex;align-items:flex-end;justify-content:space-between;gap:clamp(18px,3vw,44px);
  margin-bottom:clamp(26px,3vh,32px)}
.hero .lede{flex:1 1 auto;min-width:0;max-width:42ch;font-size:clamp(1rem,1.8vw,1.24rem);color:var(--text);
  font-weight:300;margin-bottom:0;text-shadow:0 1px 12px rgba(0,0,0,.9)}
.hero .lede em{color:#fff;font-style:italic}
.hero-eyebrow{flex:0 0 auto;display:flex;flex-direction:column;align-items:flex-end;gap:6px;text-align:right;
  border-left:1px solid rgba(255,255,255,.2);padding-left:clamp(16px,2vw,26px)}
.hero .kicker{color:var(--brass-lt);text-shadow:0 1px 4px rgba(0,0,0,.9)}
.hero-est{font-size:.68rem;letter-spacing:.24em;text-transform:uppercase;color:rgba(245,245,245,.82);text-shadow:0 1px 4px rgba(0,0,0,.9)}
.hero-cta{display:flex;gap:16px;flex-wrap:wrap}
@media(max-width:720px){
  .hero-sub{display:block;margin-bottom:24px}
  .hero .lede{max-width:none}
  .hero-eyebrow{align-items:flex-start;text-align:left;border-left:0;padding-left:0;margin-top:15px}
}
@media(prefers-reduced-motion:reduce){.hero::after{animation:none;opacity:.5}.hero-bg{animation:none}}

/* Portrait-ish screens: `cover` crops one player out of the wide, side-by-side
   photo. Fit the whole image by width (both players) and stack the masthead
   beneath it — the layer is sized to the photo's own 2000x1452 ratio, so there
   are no letterbox bars, and its lower edge fades into the page. */
@media (max-aspect-ratio: 5/4){
  .hero{position:relative;height:auto;min-height:0}
  .hero-bg{position:relative;inset:auto;width:100%;aspect-ratio:2000/1452;
    background-position:50% 30%;transform:none;animation:none}
  .hero-bg::after{content:"";position:absolute;left:0;right:0;bottom:0;height:32%;
    background:linear-gradient(180deg,transparent,#0e0e0e)}
  .hero::before,.hero::after{display:none}
  .hero-inner{position:relative;left:auto;right:auto;bottom:auto;
    padding:clamp(8px,2vw,16px) clamp(22px,5vw,40px) clamp(30px,7vw,46px)}
  .site-body{-webkit-mask-image:none;mask-image:none}
  .shows{padding-top:clamp(46px,9vw,70px)}
}

/* content scrolls up over the sticky hero; the top edge is feathered so the
   first section dissolves into the photo instead of meeting it at a hard line */
.site-body{position:relative;z-index:1;background:var(--ink);
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 140px);
  mask-image:linear-gradient(180deg,transparent 0,#000 140px)}

/* ------------------------------------------------------ shows teaser section
   Extra top padding gives the .site-body fade room to breathe — the feather
   plays out over empty space before the heading scrolls into view. */
.shows{background:var(--ink-2);padding-top:clamp(150px,24vh,260px)}
.shows-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:14px}
.shows-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,4.4vw,2.9rem)}
.shows-head .see-all{margin-top:0}
.sync-row{margin-bottom:26px}

.see-all{display:inline-block;margin-top:28px;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass-lt);border-bottom:1px solid transparent;padding-bottom:2px}
.see-all:hover{color:#fff;border-color:var(--brass)}

/* -------------------------------------------------------- meet the artists */
.meet{background:var(--ink-2)}
.meet-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,40px);max-width:640px}
.meet-card{display:block;color:inherit}
.meet-card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border:1px solid var(--line-soft);margin-bottom:16px;transition:border-color .18s ease}
.meet-card:hover img{border-color:var(--brass)}
.meet-name{font-size:1.15rem;color:#fff;font-weight:400}
.meet-card:hover .meet-name{color:var(--brass-lt)}
.meet-role{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-top:4px}

/* ------------------------------------------------------------------ booking */
.booking{background:radial-gradient(120% 120% at 20% 0%,#242020,#141212);text-align:center}
.booking h2{font-size:clamp(2rem,5vw,3.2rem);margin-bottom:18px}
.booking p{color:var(--dim);max-width:48ch;margin:0 auto 34px;font-size:1.05rem}
.booking .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}