/* Keep the supplied performance scene at the reference size and position.
   Its original 1080px width is the RIGHT HALF of the extended 2160px canvas. */
main{position:relative}
.home-perimeter{position:absolute;inset:0;z-index:4;pointer-events:none;background:url('assets/frame-left.webp') left top / 8px 1350px repeat-y,url('assets/frame-right.webp') right top / 8px 1350px repeat-y}
.hero{
 --scene-width:min(1100px,72vw);
 --header-height:87px;
 min-height:calc(100svh - var(--header-height));
 display:grid;
 grid-template-rows:minmax(min-content,1fr) auto auto;
 gap:16px;
 padding-block:24px 18px;
 background:var(--ink) url('assets/navy-texture.webp') center / 192px 192px;
}
.hero::before{
 background:url('assets/1886-audience-shoulder-corrected.webp') right 48% / calc(var(--scene-width) * 2) auto no-repeat;
}
.hero::after{
 background:linear-gradient(90deg,rgba(9,16,31,.64),rgba(9,16,31,.62) 49%,rgba(9,16,31,.18) 70%,rgba(9,16,31,.1));
}
.hero .wrap{width:calc(100% - 80px)}
.hero-inner{
 display:grid;
 grid-template-columns:clamp(245px,22vw,360px) minmax(0,min(430px,31vw)) minmax(0,1fr);
 grid-template-areas:"visual copy scene";
 column-gap:clamp(24px,2.3vw,42px);
 row-gap:0;
 align-items:center;
}
.hero-visual{grid-area:visual;display:flex;flex-direction:column;gap:12px;min-width:0;align-self:center}
.hero-logo-slot{min-width:0}
.hero-logo-slot .hero-logo{display:block;width:clamp(205px,min(16vw,calc(100svh - 690px)),270px);max-width:100%;height:auto;margin:0}
.hero .hero-media{width:100%;max-width:none;min-width:0;padding:0;align-self:start}
.hero .media-kicker{font-size:1rem;line-height:1.5;letter-spacing:.06em;margin-bottom:8px}
.hero .reel-footnote{padding-top:10px;font-size:1rem;line-height:1.5}
.hero .reel-footnote p{margin-bottom:3px}
.hero .reel-caption{left:22px;right:22px;bottom:22px}
.hero .reel-caption strong{font-size:1.9rem}
.hero .reel-caption>span:last-child{margin-top:6px}
.hero .play-icon{width:64px;height:64px}
.hero-copy{grid-area:copy;min-width:0;max-width:430px;padding:0;text-align:left}
.hero-heading{padding:0;transform:none;max-width:none}
.hero-heading .eyebrow{font-size:1rem;line-height:1.5;margin-bottom:10px}
.hero-heading h1{font-size:clamp(2.25rem,3.3vw,3rem);line-height:1.1}
.hero-heading .hero-description{font-size:clamp(1.125rem,1.85svh,1.375rem);line-height:1.5;margin:12px 0 0;max-width:none}
.hero-heading .instruments{font-size:1rem;line-height:1.6;margin:12px 0 0;max-width:none}
.hero-heading .instruments span{margin-inline:3px}
.hero-booking{max-width:none;min-width:0;margin-top:clamp(18px,2.1svh,26px)}
.hero-booking .hero-summary{font-size:clamp(1.0625rem,1.65svh,1.1875rem);line-height:1.55;margin:0;max-width:none}
.hero-booking .actions{margin-top:14px;gap:10px;justify-content:flex-start}
.hero-booking .hero-contacts{font-size:1rem;line-height:1.5;margin-top:10px;gap:6px 16px;justify-content:flex-start}
.hero-booking .hero-social{font-size:1.125rem;margin-top:16px;padding:11px 15px;max-width:100%;text-align:left}
.hero .button{font-size:1rem}
.hero-booking .social-caption{font-size:1rem}
.hero .venue-line>.small-label{font-size:1rem}
.hero-performance-space{grid-area:scene;min-width:0;min-height:0;align-self:stretch;pointer-events:none}
.hero .home-details{margin-top:0;padding-top:14px;gap:24px;align-items:center}
.hero .home-details>div{max-width:none;min-width:0}
.hero .home-details .small-label{font-size:1rem;line-height:1.5;letter-spacing:.08em}
.hero .home-details p+p{font-size:clamp(1rem,1.6svh,1.125rem);line-height:1.5;margin-top:5px}
.hero .home-details .button{margin-top:0;flex-shrink:0}
.hero .venue-line{padding-block:0;gap:20px;line-height:1.5}
.hero .venue-line p{font-size:1rem;line-height:1.5}
.textured-section{background-size:auto,192px 192px}
.press-preview{transform:none}
/* Desktop rem sizes use the intended 16px baseline across browsers.
   Browser zoom and minimum-font accessibility settings remain available. */
@media(min-width:1101px){html{font-size:16px}.site-header .header-inner{width:calc(100% - 80px)}}

/* Larger branding and type stay in the existing left/middle columns.
   Promo-card widths and performance-scene sizing/position are unchanged. */

/* A shorter desktop screen keeps normal body type and saves vertical spacing. */
@media(min-width:1101px) and (max-height:800px){
 .header-inner{min-height:72px}
 .hero{--header-height:73px;padding-block:12px;gap:10px}
 .hero-visual{gap:10px}
 .hero-logo-slot .hero-logo{width:clamp(136px,calc(100svh - 620px),168px)}
 .hero .media-kicker,.hero .reel-footnote{font-size:.875rem}
 .hero .home-details .small-label{font-size:.875rem}
 .hero .venue-line>.small-label{font-size:.875rem}
 .hero .hero-media{width:min(100%,285px)}
 .hero-heading h1{font-size:clamp(2.25rem,3vw,2.5rem)}
 .hero-heading .eyebrow{margin-bottom:8px}
 .hero-heading .hero-description{font-size:1.0625rem;line-height:1.5;margin-top:8px}
 .hero-heading .instruments{margin-top:8px}
 .hero-booking{margin-top:10px}
 .hero-booking .hero-summary{line-height:1.5}
 .hero-booking .actions{margin-top:10px}
 .hero-booking .hero-contacts{margin-top:8px}
 .hero-booking .hero-social{margin-top:8px;padding-block:7px}
 .hero .home-details{padding-top:8px}
}

/* Keep the fixed-size promo photograph within particularly short windows. */
@media(min-width:1101px) and (min-height:801px) and (max-height:930px){
 .hero .media-kicker,.hero .reel-footnote{font-size:.875rem}
}
@media(min-width:1101px) and (max-height:720px){
 .hero{padding-block:8px;gap:4px}
 .hero .home-details{padding-top:4px}
}

/* Narrow screens keep the complete scene and comfortable type, using a stack. */
@media(max-width:1100px){
 .hero{display:block;min-height:0;padding-block:28px 24px}
 .hero .wrap{width:calc(100% - 64px)}
 .hero::before{background:url('assets/navy-texture.webp') center / 192px 192px repeat}
 .hero::after{background:rgba(9,16,31,.18)}
 .hero-inner{grid-template-columns:minmax(0,1fr);grid-template-areas:"visual" "copy" "scene";gap:28px;align-items:start}
 .hero-visual{width:100%;max-width:480px;align-self:start;gap:18px}
 .hero-logo-slot .hero-logo{width:190px;max-width:65%;margin:0}
 .hero .hero-media{width:100%;max-width:none}
 .hero-copy{max-width:580px;justify-self:start}
 .hero-heading h1{font-size:clamp(2.2rem,5vw,3rem)}
 .hero-heading .hero-description{font-size:1.125rem}
 .hero-booking .hero-summary{font-size:1.0625rem}
 .hero-booking{margin-top:20px}
 .hero-booking .hero-social{margin-top:16px}
 .hero .reel-caption strong{font-size:2rem}
 .hero-performance-space{aspect-ratio:4/5;width:calc(100% + 64px);margin-inline:-32px;min-height:0;background:url('assets/1886-original-cuff-clean.webp') center / 100% auto no-repeat}
 .hero .home-details{margin-top:26px;padding-top:20px}
 .hero .venue-line{margin-top:22px;display:block}
 .hero .venue-line p{margin-top:8px}
}
@media(max-width:760px){
 .hero .wrap{width:calc(100% - 40px)}
 .hero-performance-space{width:calc(100% + 40px);margin-inline:-20px}
 .hero .home-details{display:block;text-align:left}
 .hero .home-details .button{margin-top:16px}
 .hero .venue-line{text-align:left}
}
@media(max-width:380px){
 .hero .wrap{width:calc(100% - 32px)}
 .hero-performance-space{width:calc(100% + 32px);margin-inline:-16px}
 .hero-heading h1{font-size:2.1rem}
 .hero .reel-caption{left:20px;right:20px;bottom:20px}
 .hero .reel-caption strong{font-size:1.8rem}
}

/* Move only the pictured Home content horizontally, without reflow or resizing. */
#home .hero-visual,#home .hero-copy{transform:translateX(clamp(8px,1.6vw,24px))}
@media(max-width:760px){
 #home .hero-visual,#home .hero-copy{transform:translateX(8px)}
}

/* Use the space already reserved below the Home promo photograph. */
#home .reel-footnote{position:relative}
#home .more-live-link{position:absolute;top:10px;right:0;display:inline-flex;align-items:baseline;gap:8px;min-height:44px;font-size:1.125rem;line-height:1.5;color:var(--amber);text-decoration:none}
#home .more-live-link:hover{color:#ffdcac}