:root{--green:#527d65;--dark:#0b1c13;--white:#f7f7f3}*{box-sizing:border-box}html,body{margin:0;background:var(--green);font-family:Arial,Helvetica,sans-serif;color:var(--white)}body{overflow-x:hidden}.site{position:relative;width:100%;line-height:0}.artwork{display:block;width:100%}.artwork img{display:block;width:100%;height:auto}.hotspot{position:absolute;display:block;border:0;background:transparent;cursor:pointer;padding:0;z-index:5}.shows-hotspot{left:.7%;top:54.2%;width:12%;height:2.5%}.instagram-hotspot{left:45.55%;top:93.45%;width:2.2%;height:3.25%}.youtube-hotspot{left:47.8%;top:93.45%;width:2.2%;height:3.25%}.hotspot{transition:background-color .18s ease;border-radius:999px}
.hotspot:hover,.hotspot:focus-visible{background:rgba(0,0,0,.38);outline:none}
.shows-hotspot{border-radius:4px}
.shows-hotspot:hover,.shows-hotspot:focus-visible{background:rgba(0,0,0,.32)}
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.58);opacity:0;pointer-events:none;transition:.35s;z-index:20}.side-panel{position:fixed;z-index:21;right:0;top:0;width:min(520px,42vw);height:100dvh;background:var(--dark);padding:54px 42px;transform:translateX(102%);transition:transform .45s cubic-bezier(.22,.8,.2,1);box-shadow:-20px 0 60px rgba(0,0,0,.25);overflow:auto;line-height:1.2}.side-panel.open{transform:none}.scrim.open{opacity:1;pointer-events:auto}.close{position:absolute;right:24px;top:18px;background:none;border:0;color:white;font-size:44px;cursor:pointer}.panel-logo{width:105px;margin-bottom:35px}.panel-logo img{width:100%;display:block}.eyebrow{letter-spacing:.18em;font-size:12px;color:#a9c0b3}.side-panel h2{font-size:clamp(30px,4vw,58px);margin:15px 0 4px;line-height:.9}.soon{font-size:18px;letter-spacing:.15em;color:#a9c0b3}.rule{height:1px;background:#527d65;margin:38px 0}.side-panel>a{display:block;color:white;text-decoration:none;font-size:18px;margin:14px 0;overflow-wrap:anywhere}.panel-social{display:flex;gap:24px;margin-top:40px}.panel-social a{color:#a9c0b3;font-weight:bold;text-decoration:none;font-size:13px}
@media(max-width:700px){.shows-hotspot{left:2%;top:70.2%;width:59%;height:4.7%}.instagram-hotspot{left:32.5%;top:96.2%;width:8%;height:3.2%}.youtube-hotspot{left:42.2%;top:96.2%;width:8%;height:3.2%}.side-panel{width:92vw;padding:52px 28px}.panel-logo{width:86px}.side-panel h2{font-size:42px}.panel-social{flex-direction:column;gap:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* JHR footer */
.site-footer{background:var(--dark);color:var(--white);min-height:118px;padding:32px 4vw 30px;display:flex;align-items:center;justify-content:space-between;gap:28px;line-height:1.3;border-top:1px solid rgba(255,255,255,.12);font-size:12px;font-weight:700;letter-spacing:.19em;text-transform:uppercase}
.footer-brand{white-space:nowrap}.footer-links{display:flex;align-items:center;justify-content:flex-end;gap:14px;flex-wrap:wrap}.footer-links a{color:var(--white);text-decoration:none;transition:opacity .18s ease,background-color .18s ease;padding:7px 9px;border-radius:4px}.footer-links a:hover,.footer-links a:focus-visible{background:rgba(0,0,0,.32);opacity:.72;outline:none}
.legal-page{min-height:100dvh;background:var(--dark);color:var(--white);padding:64px max(24px,7vw);line-height:1.6}.legal-page .legal-wrap{max-width:850px;margin:auto}.legal-page a{color:var(--white)}.legal-page h1{font-size:clamp(38px,7vw,78px);line-height:.95;margin:50px 0 36px}.legal-page h2{margin-top:34px}.legal-page p,.legal-page li{color:#d9e2dc}.legal-back{font-size:12px;letter-spacing:.16em;text-transform:uppercase;text-decoration:none;font-weight:700}
@media(max-width:700px){.site-footer{min-height:150px;padding:28px 22px;flex-direction:column;justify-content:center;text-align:center;gap:17px;font-size:10px;letter-spacing:.14em}.footer-brand{white-space:normal}.footer-links{justify-content:center;gap:10px}}

\n/* V12 — exact image-swap hover; geometry never changes */
.hotspot{position:absolute;display:flex;align-items:center;justify-content:center;border:0;background:transparent!important;cursor:pointer;padding:0;z-index:5;border-radius:0!important;overflow:visible;line-height:0}
.hotspot:hover,.hotspot:focus-visible,.hotspot:active{background:transparent!important;outline:none!important}
.hover-swap{display:block;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;transition:opacity .08s linear}
.hotspot:hover .hover-swap,.hotspot:focus-visible .hover-swap,.hotspot:active .hover-swap{opacity:1}
/* Desktop positions match the supplied 2048×1260 composition */
.shows-hotspot{left:89.89%;top:61.43%;width:9.18%;height:1.83%}
.instagram-hotspot{left:45.75%;top:93.49%;width:1.76%;height:2.86%}
.youtube-hotspot{left:48.05%;top:93.49%;width:1.76%;height:2.86%}
/* The supplied SHOWS hover art has its own aspect ratio. */
.shows-hotspot .shows-swap{width:100%;height:100%;object-fit:fill}
@media(max-width:700px){
  .shows-hotspot{left:2%;top:70.2%;width:59%;height:4.7%}
  .instagram-hotspot{left:32.5%;top:96.2%;width:8%;height:3.2%}
  .youtube-hotspot{left:42.2%;top:96.2%;width:8%;height:3.2%}
  .shows-hotspot .shows-swap{width:100%;height:100%;object-fit:contain;object-position:left center}
}

/* V13 — exact button-image replacement. No shadows, filters, masks or extra geometry. */
.hotspot{background:transparent!important;overflow:visible!important}
.hover-swap{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:fill;opacity:0;pointer-events:none;transition:none!important}
/* exact pixel geometry of the artwork, expressed as percentages */
.shows-hotspot{left:89.7461%;top:58.8889%;width:9.1797%;height:1.8254%}
.instagram-hotspot{left:45.7520%;top:93.4921%;width:1.7578%;height:2.8571%}
.youtube-hotspot{left:48.0469%;top:93.4921%;width:1.7578%;height:2.8571%}
.shows-hotspot .shows-swap{content:url('assets/shows-mobile.png')}
@media (hover:hover) and (pointer:fine){
  .hotspot:hover .hover-swap,.hotspot:focus-visible .hover-swap{opacity:1}
}
@media(max-width:700px){
  .shows-hotspot{left:3.4732%;top:70.4590%;width:55.4269%;height:2.2461%}
  .instagram-hotspot{left:33.1404%;top:96.1426%;width:6.9465%;height:2.3926%}
  .youtube-hotspot{left:42.2576%;top:96.1426%;width:6.9465%;height:2.3926%}
  .shows-hotspot .shows-swap{content:url('assets/shows-hover.png');object-fit:fill}
  .instagram-hotspot .hover-swap,.youtube-hotspot .hover-swap{object-fit:fill}
  .hotspot:active .hover-swap{opacity:1}
}
