/* Home page on phones and portrait tablets: the desktop's painted hero (the broken heart, the title and both
   album covers, all from hero-plate.webp), zoomed to fill the screen, in place of the older phone hero.
   Linked only by index.html, after endlm-2026.css; screens wider than 760px, unless portrait tablets up to
   1100px, are untouched. The first block repeats, unchanged, the hero's layer rules that endlm-2026.css
   applies from 761px up. The album covers stay the painted ones in the plate, exactly as on desktop.
   The last block gives the phone menu a single, gold close button. */
@media (max-width:760px){

  .live-hero .reference-stage{container-type:inline-size}
  .lh-plate,.lh-plate img{position:absolute;inset:0;width:100%;height:100%;display:block}
  .lh-plate img{object-fit:fill;user-select:none;-webkit-user-drag:none}
  .live-hero a{cursor:pointer}
  .lh-t{position:absolute;margin:0;padding:0;z-index:3;
    left:calc((var(--x) - var(--lsb,0) - var(--ox,0)) * 100% / var(--ow,1536));
    top:calc((var(--y) - var(--fs) * .102 - var(--oy,0)) * 100% / var(--oh,1024));
    font-family:'Cinzel','Trajan Pro','Times New Roman',serif;font-weight:600;font-style:normal;
    font-size:calc(var(--fs) * 100cqw / 1536);letter-spacing:calc(var(--ls) * 100cqw / 1536);
    line-height:1;white-space:nowrap;text-transform:uppercase;text-decoration:none;
    font-kerning:none;font-variant-ligatures:none;-webkit-font-smoothing:antialiased}
  .lh-link{color:#f1ede8;transition:color .35s ease,text-shadow .35s ease}
  .lh-link::after{content:"";position:absolute;inset:-90% -14%}
  .lh-link:hover,.lh-link:focus-visible{color:#f1c29d;text-shadow:0 0 14px rgba(230,150,95,.45)}
  .lh-tagline{color:#f4efe9;font-weight:500;pointer-events:none}
  .lh-icon{position:absolute;z-index:3;display:block;color:#fbf5e7;transition:color .35s ease,filter .35s ease;
    left:calc((var(--cx) - var(--s) / 2) * 100% / 1536);top:calc((var(--cy) - var(--s) / 2) * 100% / 1024);
    width:calc(var(--s) * 100cqw / 1536);height:calc(var(--s) * 100cqw / 1536)}
  .lh-icon svg{width:100%;height:100%;display:block;fill:currentColor}
  .lh-icon .lh-yt-play{fill:#0d0a09}
  .lh-icon.is-dark{color:#130e0b}
  .lh-icon::after{content:"";position:absolute;inset:-45%}
  .lh-icon:hover,.lh-icon:focus-visible{color:#f1c29d;filter:drop-shadow(0 0 8px rgba(230,150,95,.5))}
  .lh-logo{position:absolute;z-index:3;display:block;left:calc(var(--x) * 100% / 1536);top:calc(var(--y) * 100% / 1024);width:calc(var(--w) * 100% / 1536);transition:filter .45s ease}
  .lh-logo img{display:block;width:100%;height:auto}
  .lh-logo:hover{filter:brightness(1.08) drop-shadow(0 0 18px rgba(230,150,95,.25))}
  .lh-cover{position:absolute;z-index:3;display:block;left:calc(var(--x) * 100% / 1536);top:calc(var(--y) * 100% / 1024);width:calc(var(--w) * 100% / 1536);height:calc(var(--h) * 100% / 1024);transition:box-shadow .45s ease,filter .45s ease}
  .lh-cover img{display:block;width:100%;height:100%;object-fit:cover}
  .live-hero.paint-covers .lh-cover img{visibility:hidden}
  .lh-cover:hover{filter:brightness(1.06);box-shadow:0 0 0 1px rgba(255,220,194,.45),0 0 34px rgba(230,150,95,.35)}
  .lh-pill{position:absolute;z-index:3;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:calc(5 * 100cqw / 1536);
    left:calc(var(--x) * 100% / 1536);top:calc(var(--y) * 100% / 1024);width:calc(var(--w) * 100% / 1536);height:calc(var(--h) * 100% / 1024);
    border-radius:calc(9 * 100cqw / 1536);font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:600;
    font-size:calc(10.6 * 100cqw / 1536);letter-spacing:-.01em;line-height:1;text-decoration:none;white-space:nowrap;
    transition:background-color .35s ease,border-color .35s ease,box-shadow .35s ease}
  .lh-pill svg{width:calc(12.5 * 100cqw / 1536);height:calc(12.5 * 100cqw / 1536);flex:none;fill:currentColor}
  .lh-pill.is-dark{background:rgba(3,2,2,.94);border:1px solid rgba(128,121,114,.95);color:#f4eee7}
  .lh-pill.is-dark:hover{border-color:rgba(255,220,194,.85);box-shadow:0 0 18px rgba(230,150,95,.28)}
  .lh-pill.is-light{background:#f3caac;border:1px solid rgba(255,236,218,.55);color:#2f1f17}
  .lh-pill.is-light:hover{background:#f8d8bf;box-shadow:0 0 18px rgba(243,202,172,.45)}
  .lh-box{position:absolute;z-index:3;display:block;text-decoration:none;border-radius:8px;
    left:calc(var(--ox) * 100% / 1536);top:calc(var(--oy) * 100% / 1024);width:calc(var(--ow) * 100% / 1536);height:calc(var(--oh) * 100% / 1024);
    transition:background-color .35s ease,box-shadow .35s ease}
  .lh-box:hover{background:rgba(255,221,197,.045);box-shadow:inset 0 0 0 1px rgba(255,220,194,.12)}
  .lh-box:focus-visible{outline:none;box-shadow:inset 0 0 0 1px rgba(255,220,194,.82),0 0 0 2px rgba(0,0,0,.75),0 0 0 4px rgba(230,157,108,.82)}
  .lh-mouse{position:absolute;box-sizing:border-box;border:calc(1.4 * 100cqw / 1536) solid #d0c7bf;border-radius:calc(11 * 100cqw / 1536);
    left:calc((var(--mx) - var(--ox)) * 100% / var(--ow));top:calc((var(--my) - var(--oy)) * 100% / var(--oh));
    width:calc(var(--mw) * 100% / var(--ow));height:calc(var(--mh) * 100% / var(--oh))}
  .lh-mouse i{position:absolute;left:50%;top:20%;width:calc(1.6 * 100cqw / 1536);height:calc(4.5 * 100cqw / 1536);transform:translateX(-50%);border-radius:2px;background:#d0c7bf;animation:lh-wheel 2.4s ease-in-out infinite}
  .lh-mouse::after{content:"";position:absolute;left:50%;top:46%;width:calc(4 * 100cqw / 1536);height:calc(4 * 100cqw / 1536);border-right:calc(1.2 * 100cqw / 1536) solid #d0c7bf;border-bottom:calc(1.2 * 100cqw / 1536) solid #d0c7bf;transform:translateX(-50%) rotate(45deg)}
  @keyframes lh-wheel{0%,100%{transform:translateX(-50%) translateY(0);opacity:1}60%{transform:translateX(-50%) translateY(calc(5 * 100cqw / 1536));opacity:.25}}
  .lh-scroll-text{color:#e3d9cf}
  .lh-band-title{color:#e4ab80;transition:color .35s ease}
  .lh-band-sub{color:#cfc0ae}
  .lh-band-item:hover .lh-band-title,.lh-band-item:focus-visible .lh-band-title{color:#f1c29d}
  .lh-link:focus-visible,.lh-icon:focus-visible,.lh-logo:focus-visible,.lh-cover:focus-visible,.lh-pill:focus-visible{outline:2px solid rgba(230,157,108,.9);outline-offset:3px}
}

/* ---- phones and portrait tablets: the painted hero, zoomed so the heart, the title and both covers fill the screen ---- */
@media (max-width:760px),(min-width:761px) and (max-width:1100px) and (max-aspect-ratio:5/6){
  .home-page .legacy-mobile-hero{display:none!important}
  .reference-hero{display:block!important;place-items:normal;position:relative;overflow:hidden;isolation:isolate;height:auto;min-height:0;background:#070504;padding-bottom:24px}

  /* the same 1536 x 1024 stage, centred: phones see its middle 600 units, wider screens its middle 764
     (the painted words at the right edge stay fully off-screen) */
  .reference-stage{--zoom:256vw;position:relative;overflow:hidden;width:var(--zoom);height:auto;aspect-ratio:3/2;margin-left:calc((100% - var(--zoom)) / 2);box-shadow:none}

  /* the painted menu row sits outside the screen here; the ☰ button does its job */
  .lh-nav{display:none!important}

  /* the explore band: the same four links, across the screen, over the painted band */
  .lh-band{position:absolute;z-index:3;left:50%;transform:translateX(-50%);width:100vw;top:calc(912 * 100% / 1024);bottom:0;
    display:grid;grid-template-columns:repeat(4,1fr);background:linear-gradient(180deg,#0e0a07,#080503)}
  .lh-band .lh-band-item{position:relative;left:auto;top:auto;width:auto;height:auto;border-radius:0;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:4px 2px;text-align:center}
  .lh-band .lh-band-item+.lh-band-item{box-shadow:inset 1px 0 rgba(228,171,128,.13)}
  .lh-band .lh-t{position:static;white-space:nowrap}
  .lh-band .lh-band-title{font-size:clamp(10px,2.75vw,15px);letter-spacing:.14em;margin:1px 0 2px}
  .lh-band .lh-band-sub{font-size:clamp(7px,1.95vw,11px);letter-spacing:.03em;line-height:1.2}
  .lh-band .lh-band-item::before{content:"";flex:none;width:clamp(17px,5.2vw,30px);height:clamp(17px,5.2vw,30px);margin-bottom:2px;background:center/contain no-repeat}
  .lh-band .lh-band-item:nth-child(1)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2cba8' stroke-width='1.5' stroke-linecap='round'%3E%3Cpath d='M1.5 12h3.5M19 12h3.5M8.5 8.5v7M12 4v16M15.5 8.5v7'/%3E%3C/svg%3E")}
  .lh-band .lh-band-item:nth-child(2)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2cba8' stroke-width='1.4'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M10 8.2l6 3.8-6 3.8z' fill='%23f2cba8' stroke='none'/%3E%3C/svg%3E")}
  .lh-band .lh-band-item:nth-child(3)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2cba8' stroke-width='1.4' stroke-linejoin='round' stroke-linecap='round'%3E%3Cpath d='M7.5 2.5h7l4 4v15h-11z'/%3E%3Cpath d='M14.5 2.5v4h4M10 10h6M10 13h6M10 16h6M10 19h4'/%3E%3C/svg%3E")}
  .lh-band .lh-band-item:nth-child(4)::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23f2cba8' stroke-width='1.2' stroke-linejoin='round'%3E%3Cpath d='M12 1.5l2 8.5 8.5 2-8.5 2-2 8.5-2-8.5-8.5-2 8.5-2z'/%3E%3Cpath d='M12 6.5l1 4.5 4.5 1-4.5 1-1 4.5-1-4.5-4.5-1 4.5-1z' fill='%23f2cba8' stroke='none'/%3E%3C/svg%3E")}

  /* the ☰ bar floats clear over the artwork, and fills in once the hero scrolls away (as the desktop menu returns) */
  .home-page>.nav{transition:background .4s ease,box-shadow .4s ease,border-color .4s ease}
  .home-page:not(.nav-revealed)>.nav{background:none!important;border-bottom-color:transparent!important;box-shadow:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
  .home-page>.nav .nav-logo,.home-page>.nav .nav-cta{transition:opacity .4s ease,visibility .4s}
  .home-page:not(.nav-revealed)>.nav .nav-logo,.home-page:not(.nav-revealed)>.nav .nav-cta{opacity:0;visibility:hidden}
}

/* ---- portrait tablets: the zoom replaces the letterboxed desktop frame; the ☰ bar stays on screen ---- */
@media (min-width:761px) and (max-width:1100px) and (max-aspect-ratio:5/6){
  .reference-hero::before,.reference-hero::after{display:none}
  .reference-stage{--zoom:201vw}
  .home-page>.nav{transform:none;opacity:1;pointer-events:auto}
}

/* ---- phones and small tablets: the phone plate, and streaming buttons that can be read and tapped ---- */
@media (max-width:760px){
  /* hero-plate-m.webp is the middle 784 of the plate's 1536 units */
  .lh-plate img{left:calc(376 * 100% / 1536);right:auto;width:calc(784 * 100% / 1536)}
  .lh-scroll{display:none!important}

  /* stacked under each cover */
  .lh-pill{--w:219!important;--h:44!important;gap:calc(7 * 100cqw / 1536);border-radius:calc(11 * 100cqw / 1536);font-size:min(calc(16.5 * 100cqw / 1536),14px)}
  .lh-pill svg{width:calc(15 * 100cqw / 1536);height:calc(15 * 100cqw / 1536)}
  .lh-pill.is-dark{--x:511.5!important}
  .lh-pill.is-light{--x:810.5!important}
  .lh-pill[href*="spotify"]{--y:756!important}
  .lh-pill[href*="apple"]{--y:805!important}
  .lh-pill[href*="youtube"]{--y:854!important}
}
@media (min-width:481px) and (max-width:760px){
  .reference-stage{--zoom:201vw}
}
/* phones: a slightly smaller logo keeps clear of the ☰ button; the narrowest keep just the band titles */
@media (max-width:480px){
  .lh-logo{--x:603!important;--w:330!important}
}
@media (max-width:359px){
  .lh-band .lh-band-sub{display:none}
}

/* ---- the menu: one close button. While the menu is open the ☰ itself is the X, in gold
   (the menu's own close button sat a few pixels off, just under it) ---- */
.mobile-menu-close{display:none!important}
.nav-burger.open{border-color:var(--ember);background:rgba(228,171,128,.06)}
.nav-burger.open .nav-burger-line{background:var(--ember)}