: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}}


/* 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}
}

/* V15 exact supplied hover assets */
.hotspot{position:absolute;z-index:10;display:block;padding:0!important;margin:0!important;border:0!important;background:transparent!important;border-radius:0!important;box-shadow:none!important;transform:none!important;overflow:visible!important;line-height:0!important}
.hotspot::before,.hotspot::after{display:none!important;content:none!important}
.hover-swap{position:absolute!important;inset:0!important;display:block!important;width:100%!important;height:100%!important;object-fit:fill!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:none!important;filter:none!important;box-shadow:none!important;transition:none!important}
.hotspot:hover .hover-swap,.hotspot:focus-visible .hover-swap,.hotspot:active .hover-swap{opacity:1!important;visibility:visible!important}
.shows-hotspot{left:89.7461%!important;top:58.8889%!important;width:9.1797%!important;height:1.8254%!important}
.instagram-hotspot{left:45.7520%!important;top:93.4921%!important;width:1.7578%!important;height:2.8571%!important}
.youtube-hotspot{left:48.0469%!important;top:93.4921%!important;width:1.7578%!important;height:2.8571%!important}
.music-hotspot{left:50.2441%!important;top:93.4921%!important;width:1.7578%!important;height:2.8571%!important}
.spotify-hotspot{left:52.4902%!important;top:93.4921%!important;width:1.7578%!important;height:2.8571%!important}.passive-hotspot{cursor:default}
.diamond-hotspot{position:absolute;z-index:9;width:6.3965%;height:10.4762%;display:block;line-height:0;cursor:pointer}.diamond-hotspot img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:fill;opacity:0;visibility:hidden;pointer-events:none;transition:none}.diamond-hotspot:hover img{opacity:1;visibility:visible}.diamond-1{left:4.0527%;top:82.9365%}.diamond-2{left:10.0586%;top:82.9365%}.diamond-3{left:1.1719%;top:87.6984%}.diamond-4{left:7.0801%;top:87.6984%}
@media(max-width:700px){.shows-hotspot{left:3.4732%!important;top:70.4590%!important;width:55.4269%!important;height:2.2461%!important}.instagram-hotspot{left:33.1404%!important;top:96.1426%!important;width:6.9465%!important;height:2.3926%!important}.youtube-hotspot{left:42.2576%!important;top:96.1426%!important;width:6.9465%!important;height:2.3926%!important}.music-hotspot{left:51.3748%!important;top:96.1426%!important;width:6.9465%!important;height:2.3926%!important}.spotify-hotspot{left:60.4920%!important;top:96.1426%!important;width:6.9465%!important;height:2.3926%!important}.diamond-hotspot{display:none!important}}

/* V16 — MOBILE ONLY. Desktop V15 is intentionally untouched. */
@media(max-width:700px){
  /* Use the exact supplied replacement artwork on mobile too. */
  .shows-hotspot .hover-swap{content:url('assets/shows-new.png')!important;object-fit:fill!important}
  .instagram-hotspot .hover-swap{content:url('assets/instagram-green-v20.png')!important;object-fit:fill!important}
  .youtube-hotspot .hover-swap{content:url('assets/youtube-new.png')!important;object-fit:fill!important}
  .music-hotspot .hover-swap{content:url('assets/music-new.png')!important;object-fit:fill!important}
  .spotify-hotspot .hover-swap{content:url('assets/spotify-new.png')!important;object-fit:fill!important}
  .hotspot:active .hover-swap,.hotspot:focus .hover-swap{opacity:1!important;visibility:visible!important}
}

/* V28 — exact named directional assets + user-marked placement. */
.jhr-dpad{
  position:absolute;
  z-index:10;
  left:3.8%;
  top:67.5%;
  width:14.5%;
  aspect-ratio:1/1;
  line-height:0;
}
.jhr-dpad .dpad-key{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  width:48%;
  height:48%;
  padding:0!important;
  margin:0!important;
  border:0!important;
  outline:0;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
  cursor:pointer;
  line-height:0;
  -webkit-tap-highlight-color:transparent;
}
.jhr-dpad .dpad-key img{
  position:absolute;
  inset:0;
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  margin:0;
  padding:0;
  border:0;
  pointer-events:none;
  transition:none;
}
.jhr-dpad .dpad-green{opacity:0;visibility:hidden}
.jhr-dpad .dpad-white{opacity:1;visibility:visible}
.jhr-dpad .dpad-key:hover .dpad-green,
.jhr-dpad .dpad-key:focus-visible .dpad-green,
.jhr-dpad .dpad-key:active .dpad-green,
.jhr-dpad .dpad-key.is-pressed .dpad-green{opacity:1;visibility:visible}
.jhr-dpad .dpad-key:hover .dpad-white,
.jhr-dpad .dpad-key:focus-visible .dpad-white,
.jhr-dpad .dpad-key:active .dpad-white,
.jhr-dpad .dpad-key.is-pressed .dpad-white{opacity:0;visibility:hidden}
.jhr-dpad .dpad-up{left:26%;top:0}
.jhr-dpad .dpad-right{left:52%;top:26%}
.jhr-dpad .dpad-down{left:26%;top:52%}
.jhr-dpad .dpad-left{left:0;top:26%}
@media(max-width:700px){
  .jhr-dpad{
    left:23.6%;
    top:50.5%;
    width:52.8%;
    aspect-ratio:1/1;
  }
}


/* V32 — SIN SEÑAL: text only. Blur/noise is baked ONLY into the original music panel pixels. */
@import url('https://fonts.googleapis.com/css2?family=Anton&display=swap');

.sin-senal-label{
  position:absolute;
  z-index:8;
  left:64.795vw;
  top:10.840vw;
  width:35.205vw;
  height:25.488vw;
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-weight:400;
  font-size:clamp(44px,5.2vw,92px);
  line-height:1;
  letter-spacing:.025em;
  color:#f7f7f3;
  text-shadow:3px 3px 0 rgba(11,28,19,.72);
  white-space:nowrap;
}
@media(max-width:700px){
  .sin-senal-label{
    left:0;
    top:69.754vw;
    width:100vw;
    height:68.451vw;
    font-size:clamp(56px,15vw,112px);
  }
}


/* V33 — animated analog-TV noise, locked to the exact V32 approved music area. */
.sin-senal-noise{
  position:absolute;
  z-index:7;
  left:64.795vw;
  top:10.840vw;
  width:35.205vw;
  height:25.488vw;
  overflow:hidden;
  pointer-events:none;
  background-image:url('assets/sin-senal-static.png');
  background-size:230px 230px;
  background-repeat:repeat;
  opacity:.29;
  mix-blend-mode:screen;
  animation:jhr-signal-noise .24s steps(2,end) infinite;
}
.sin-senal-noise::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255,255,255,.10) 0,
      rgba(255,255,255,.10) 1px,
      rgba(0,0,0,.12) 2px,
      rgba(0,0,0,.12) 4px
    );
  animation:jhr-scan .38s linear infinite;
}
@keyframes jhr-signal-noise{
  0%   {background-position:0 0; transform:translateX(0)}
  14%  {background-position:-58px 31px; transform:translateX(-2px)}
  29%  {background-position:47px -46px; transform:translateX(2px)}
  43%  {background-position:-35px -72px; transform:translateX(-1px)}
  57%  {background-position:71px 24px; transform:translateX(2px)}
  71%  {background-position:-69px 56px; transform:translateX(-2px)}
  86%  {background-position:34px -61px; transform:translateX(1px)}
  100% {background-position:-21px 45px; transform:translateX(0)}
}
@keyframes jhr-scan{
  from{transform:translateY(-4px)}
  to{transform:translateY(4px)}
}
@media(max-width:700px){
  .sin-senal-noise{
    left:0;
    top:69.754vw;
    width:100vw;
    height:68.451vw;
    background-size:190px 190px;
    opacity:.29;
  }
}
@media(prefers-reduced-motion:reduce){
  .sin-senal-noise,
  .sin-senal-noise::after{animation:none!important}
}


/* V35 — DESKTOP ONLY: tighten SIN SEÑAL to the exact music-player card. */
@media(min-width:701px){
  .sin-senal-noise{
    left:66.6015625vw;
    top:11.71875vw;
    width:32.6171875vw;
    height:23.14453125vw;
  }
  .sin-senal-label{
    left:66.6015625vw;
    top:11.71875vw;
    width:32.6171875vw;
    height:23.14453125vw;
  }
}


/* V36 — TRUE CLIPPING MASK. All movement lives inside this viewport. */
.sin-senal-noise,.sin-senal-label{display:none!important}

.signal-mask{
  position:absolute;
  z-index:8;
  overflow:hidden;
  contain:paint;
  clip-path:inset(0);
  isolation:isolate;
  pointer-events:none;
  /* desktop exact music card */
  left:66.6015625vw;
  top:11.71875vw;
  width:32.6171875vw;
  height:23.14453125vw;
}
.signal-blur{
  position:absolute;
  inset:0;
  background-image:url('assets/layout-desktop.png');
  background-size:100vw auto;
  background-position:-66.6015625vw -11.71875vw;
  background-repeat:no-repeat;
  filter:blur(3.6px);
  transform:scale(1.025);
  opacity:.88;
}
.signal-static{
  position:absolute;
  inset:-14%;
  background-image:url('assets/sin-senal-static.png');
  background-size:185px 185px;
  background-repeat:repeat;
  opacity:.27;
  mix-blend-mode:screen;
  animation:signalNoise .18s steps(2,end) infinite;
}
.signal-sweep{
  position:absolute;
  inset:-20% -8%;
  background:
    linear-gradient(to bottom,
      transparent 0%,
      transparent 39%,
      rgba(255,255,255,.18) 43%,
      rgba(255,255,255,.04) 47%,
      transparent 52%,
      transparent 100%),
    repeating-linear-gradient(to bottom,
      rgba(255,255,255,.055) 0,
      rgba(255,255,255,.055) 1px,
      rgba(0,0,0,.075) 2px,
      rgba(0,0,0,.075) 4px);
  opacity:.72;
  animation:signalSweep .9s linear infinite;
}
.signal-text{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-size:clamp(44px,5.2vw,92px);
  font-weight:400;
  line-height:1;
  letter-spacing:.025em;
  color:#f7f7f3;
  text-shadow:3px 3px 0 rgba(11,28,19,.68);
  white-space:nowrap;
}
@keyframes signalNoise{
  0%{transform:translate(0,0) scale(1.08)}
  12%{transform:translate(-7%,4%) scale(1.08)}
  25%{transform:translate(5%,-6%) scale(1.08)}
  37%{transform:translate(-4%,-9%) scale(1.08)}
  50%{transform:translate(8%,3%) scale(1.08)}
  62%{transform:translate(-8%,8%) scale(1.08)}
  75%{transform:translate(4%,-8%) scale(1.08)}
  87%{transform:translate(7%,7%) scale(1.08)}
  100%{transform:translate(-3%,2%) scale(1.08)}
}
@keyframes signalSweep{
  0%{transform:translateY(-42%)}
  100%{transform:translateY(42%)}
}
@media(max-width:700px){
  .signal-mask{
    /* mobile exact approved music card */
    left:0;
    top:69.754vw;
    width:100vw;
    height:68.451vw;
  }
  .signal-blur{
    background-image:url('assets/layout-mobile.png');
    background-size:100vw auto;
    background-position:0 -69.754vw;
    filter:blur(3.6px);
  }
  .signal-static{
    background-size:165px 165px;
    opacity:.27;
  }
  .signal-text{
    font-size:clamp(56px,15vw,112px);
  }
}
@media(prefers-reduced-motion:reduce){
  .signal-static,.signal-sweep{animation:none!important}
}


/* V37 — precision clipping correction */
.signal-mask{
  contain:strict;
  overflow:hidden!important;
  clip-path:inset(0 0 0 0);
  -webkit-clip-path:inset(0 0 0 0);
}
.signal-mask > *{
  max-width:none;
}
@media(min-width:701px){
  .signal-mask{
    left:64.795vw;
    top:11.865vw;
    width:35.205vw;
    height:21.973vw;
  }
  .signal-blur{
    background-image:url('assets/layout-desktop.png');
    background-size:100vw auto;
    background-position:-64.795vw -11.865vw;
  }
}
@media(max-width:700px){
  .signal-mask{
    left:0;
    top:69.754vw;
    width:100vw;
    height:68.451vw;
    contain:strict;
    overflow:hidden!important;
    clip-path:inset(0);
    -webkit-clip-path:inset(0);
  }
  .signal-blur{
    background-image:url('assets/layout-mobile.png');
    background-size:100vw auto;
    background-position:0 -69.754vw;
  }
}


/* V38 — DESKTOP ONLY: mask = exact full white ESCUCHA AHORA/player zone */
@media(min-width:701px){
  .signal-mask{
    left:63.3125vw;
    top:10.6875vw;
    width:36.6875vw;
    height:24.6875vw;
    overflow:hidden!important;
    contain:strict;
    clip-path:inset(0);
    -webkit-clip-path:inset(0);
  }
  .signal-blur{
    background-image:url('assets/layout-desktop.png');
    background-size:100vw auto;
    background-position:-63.3125vw -10.6875vw;
  }
}


/* V39 — MOBILE: same full-white-zone masking concept as desktop */
@media(max-width:700px){
  .signal-mask{
    left:0;
    top:69.754vw;
    width:100vw;
    height:83.213vw;
    overflow:hidden!important;
    contain:strict;
    clip-path:inset(0);
    -webkit-clip-path:inset(0);
  }
  .signal-blur{
    background-image:url('assets/layout-mobile.png');
    background-size:100vw auto;
    background-position:0 -69.754vw;
  }
  .signal-static{
    background-size:165px 165px;
    opacity:.27;
  }
  .signal-text{
    font-size:clamp(56px,15vw,112px);
  }
}


/* V42 — exact masks measured from the user's supplied B/W reference images.
   Every underlying element inside the WHITE area is covered by the signal effect. */
@media(min-width:701px){
  .signal-mask{
    left:64.94140625vw;
    top:0.00000000vw;
    width:35.05859375vw;
    height:25.34179688vw;
    overflow:hidden!important;
    contain:strict;
    clip-path:inset(0);
    -webkit-clip-path:inset(0);
  }
  .signal-blur{
    background-image:url('assets/layout-desktop.png');
    background-size:100vw auto;
    background-position:-64.94140625vw -0.00000000vw;
  }
}
@media(max-width:700px){
  .signal-mask{
    left:0.09259259vw;
    top:0.00000000vw;
    width:99.90740741vw;
    height:68.33333333vw;
    overflow:hidden!important;
    contain:strict;
    clip-path:inset(0);
    -webkit-clip-path:inset(0);
  }
  .signal-blur{
    background-image:url('assets/layout-mobile.png');
    background-size:100vw auto;
    background-position:-0.09259259vw -0.00000000vw;
  }
}


/* V43 — exact mask dimensions + correct section anchors */
@media(min-width:701px){
  .signal-mask{
    left:64.94140625vw;
    top:10.6875vw;
    width:35.05859375vw;
    height:25.341796875vw;
    overflow:hidden!important;
    contain:strict;
    clip-path:inset(0);
    -webkit-clip-path:inset(0);
  }
  .signal-blur{
    background-image:url('assets/layout-desktop.png');
    background-size:100vw auto;
    background-position:-64.94140625vw -10.6875vw;
  }
}
@media(max-width:700px){
  .signal-mask{
    left:0.09259259vw;
    top:69.754vw;
    width:99.90740741vw;
    height:68.33333333vw;
    overflow:hidden!important;
    contain:strict;
    clip-path:inset(0);
    -webkit-clip-path:inset(0);
  }
  .signal-blur{
    background-image:url('assets/layout-mobile.png');
    background-size:100vw auto;
    background-position:-0.09259259vw -69.754vw;
  }
}


/* V44 — First JHR Easter egg video. Hidden until the secret D-pad sequence is entered. */
.easter-video{
  position:fixed;
  inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .18s ease;
}
.easter-video.is-active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
.easter-video video{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  background:#000;
}


/* V45 — mobile Easter egg full-screen only */
@media(max-width:700px){
  .easter-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
  }
}

/* V48 — hidden instrument-build Easter egg. */
.instrument-easter-trigger{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  z-index:15;
  left:0;
  top:6.55%;
  width:4.75%;
  height:6.8%;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  cursor:default;
  -webkit-tap-highlight-color:transparent;
}
.instrument-easter-trigger:focus-visible{
  outline:1px solid rgba(255,255,255,.35);
  outline-offset:-2px;
}
.instrument-easter{
  position:fixed;
  inset:0;
  z-index:1100;
  visibility:hidden;
  pointer-events:none;
}
.instrument-easter.is-active{
  visibility:visible;
  pointer-events:auto;
}
.instrument-easter-scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.72);
  opacity:0;
  transition:opacity .42s ease;
}
.instrument-easter-card{
  position:absolute;
  left:0;
  top:0;
  width:min(68vw,920px);
  height:100dvh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:28px;
  background:#0b1c13;
  box-shadow:22px 0 70px rgba(0,0,0,.34);
  transform:translateX(-105%);
  transition:transform .64s cubic-bezier(.22,.82,.2,1);
  overflow:hidden;
}
.instrument-easter-card img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center;
}
.instrument-easter-close{
  position:absolute;
  z-index:2;
  top:max(14px,env(safe-area-inset-top));
  right:18px;
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(11,28,19,.78);
  color:#f7f7f3;
  font:300 35px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.instrument-easter.is-active .instrument-easter-scrim{opacity:1}
.instrument-easter.is-active .instrument-easter-card{transform:translateX(0)}
@media(max-width:700px){
  .instrument-easter-trigger{
    left:0;
    top:0;
    width:12.5%;
    height:4.4%;
    min-width:52px;
    min-height:52px;
  }
  .instrument-easter-card{
    width:100vw;
    height:100dvh;
    padding:0;
    background:#0b1c13;
    box-shadow:none;
  }
  .instrument-easter-card img{
    width:100%;
    height:100%;
    object-fit:contain;
  }
  .instrument-easter-close{
    top:max(14px,env(safe-area-inset-top));
    right:max(14px,env(safe-area-inset-right));
    background:rgba(0,0,0,.58);
  }
}
@media(prefers-reduced-motion:reduce){
  .instrument-easter-scrim,
  .instrument-easter-card{transition:none!important}
}

/* V49 — move instrument Easter egg trigger from the J to the U in HUIRÉ.
   Visual artwork and Easter-egg behavior remain unchanged. */
@media(min-width:701px){
  .instrument-easter-trigger{
    left:41.3%;
    top:0;
    width:7.6%;
    height:17.85%;
  }
}
@media(max-width:700px){
  .instrument-easter-trigger{
    left:41.4%;
    top:0;
    width:7.8%;
    height:3.75%;
    min-width:0;
    min-height:0;
  }
}


/* V50 — J → H → R banner-sequence biography Easter egg. */
.bio-sequence{
  position:absolute;
  inset:0;
  z-index:16;
  pointer-events:none;
}
.bio-sequence-key{
  -webkit-appearance:none;
  appearance:none;
  position:absolute;
  top:0;
  height:17.85%;
  margin:0;
  padding:0;
  border:0;
  outline:0;
  background:transparent;
  box-shadow:none;
  cursor:default;
  pointer-events:auto;
  -webkit-tap-highlight-color:transparent;
}
/* Desktop: J of JAMÁS, H of HUIRÉ, R of RUMBO. */
.bio-key-j{left:0%;width:6.2%}
.bio-key-h{left:34.0%;width:6.8%}
.bio-key-r{left:62.5%;width:9.0%}

.bio-easter{
  position:fixed;
  inset:0;
  z-index:1120;
  visibility:hidden;
  pointer-events:none;
}
.bio-easter.is-active{
  visibility:visible;
  pointer-events:auto;
}
.bio-easter-scrim{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.76);
  opacity:0;
  transition:opacity .42s ease;
}
.bio-easter-card{
  position:absolute;
  right:0;
  top:0;
  width:min(58vw,820px);
  height:100dvh;
  background:#0b1c13;
  color:#f7f7f3;
  box-shadow:-22px 0 70px rgba(0,0,0,.36);
  transform:translateX(105%);
  transition:transform .64s cubic-bezier(.22,.82,.2,1);
  overflow:auto;
  line-height:1.55;
  -webkit-overflow-scrolling:touch;
}
.bio-easter-inner{
  width:min(100%,760px);
  margin:0 auto;
  padding:clamp(54px,7vh,88px) clamp(30px,5vw,74px) 70px;
}
.bio-easter-logo{
  display:block;
  width:76px;
  height:76px;
  object-fit:contain;
  margin:0 0 30px;
}
.bio-easter-kicker{
  margin:0 0 14px;
  color:#8faa9a;
  font-size:11px;
  font-weight:700;
  letter-spacing:.24em;
  text-transform:uppercase;
}
.bio-easter h1{
  margin:0 0 34px;
  max-width:650px;
  color:#f7f7f3;
  font-family:'Anton',Impact,'Arial Narrow',sans-serif;
  font-size:clamp(38px,4.2vw,70px);
  font-weight:400;
  line-height:.96;
  letter-spacing:.005em;
}
.bio-easter-copy{
  max-width:660px;
  font-size:clamp(15px,1.15vw,18px);
  line-height:1.68;
  color:#dbe5df;
}
.bio-easter-copy p{margin:0 0 24px}
.bio-easter-copy strong{color:#f7f7f3}
.bio-easter-closing{
  margin-top:38px!important;
  padding-top:30px;
  border-top:1px solid rgba(247,247,243,.22);
  color:#f7f7f3;
  font-size:1.08em;
  font-weight:700;
}
.bio-easter-close{
  position:fixed;
  z-index:2;
  top:max(14px,env(safe-area-inset-top));
  right:max(18px,env(safe-area-inset-right));
  width:46px;
  height:46px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:rgba(0,0,0,.48);
  color:#f7f7f3;
  font:300 35px/1 Arial,Helvetica,sans-serif;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.bio-easter.is-active .bio-easter-scrim{opacity:1}
.bio-easter.is-active .bio-easter-card{transform:translateX(0)}

@media(max-width:700px){
  .bio-sequence-key{height:3.75%}
  .bio-key-j{left:0%;width:7.6%}
  .bio-key-h{left:34.2%;width:6.8%}
  .bio-key-r{left:62.0%;width:10.0%}
  .bio-easter-card{
    width:100vw;
    height:100dvh;
    box-shadow:none;
  }
  .bio-easter-inner{
    width:100%;
    padding:max(70px,calc(env(safe-area-inset-top) + 54px)) 25px max(54px,env(safe-area-inset-bottom));
  }
  .bio-easter-logo{width:64px;height:64px;margin-bottom:24px}
  .bio-easter h1{font-size:clamp(40px,12vw,62px);margin-bottom:30px}
  .bio-easter-copy{font-size:16px;line-height:1.62}
  .bio-easter-copy p{margin-bottom:22px}
}
@media(prefers-reduced-motion:reduce){
  .bio-easter-scrim,
  .bio-easter-card{transition:none!important}
}