/* DANIEL DE LOCO · site-v2 · I&I RECORDS — design tokens in DESIGN-BIBLE.md */
@font-face{font-family:"Bodoni Moda";src:url(../assets/fonts/bodoni-moda.woff2) format("woff2");font-weight:400 900;font-display:swap}
@font-face{font-family:"Bodoni Moda";src:url(../assets/fonts/bodoni-moda-italic.woff2) format("woff2");font-style:italic;font-weight:400 900;font-display:swap}
@font-face{font-family:"Frank Ruhl Libre";src:url(../assets/fonts/frank-ruhl-libre.woff2) format("woff2");font-weight:300 900;font-display:swap}
@font-face{font-family:"Plex";src:url(../assets/fonts/plex-hebrew-Light.woff2) format("woff2");font-weight:300;font-display:swap}
@font-face{font-family:"Plex";src:url(../assets/fonts/plex-hebrew-Regular.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Plex";src:url(../assets/fonts/plex-hebrew-Medium.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Plex";src:url(../assets/fonts/plex-hebrew-SemiBold.woff2) format("woff2");font-weight:600;font-display:swap}
:root{
  --noir:#0a0706;--noir2:#130c0a;--oxblood:#3b0b0d;--ember:#d42a1f;--flame:#ff5a2a;
  --gold:#c9a25a;--goldhi:#efd59b;--goldlo:#8a6a32;--cream:#f3e9da;--mute:#a3968a;
  --serif:"Bodoni Moda","Frank Ruhl Libre",Georgia,serif;--heb:"Frank Ruhl Libre","Bodoni Moda",serif;
  --sans:"Plex",system-ui,sans-serif;--gut:clamp(20px,5vw,96px);
  --ease:cubic-bezier(.19,1,.22,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--noir);color:var(--cream);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:var(--sans);font-weight:300;font-size:clamp(15px,1.05vw,18px);line-height:1.7;overflow-x:hidden}
img,video,iframe{display:block;max-width:100%}
picture{display:block}picture img{width:100%;height:auto}
a{color:inherit;text-decoration:none}
/* language switching: both languages live in the DOM */
html[lang=he] [lang=en]:not(html),html[lang=en] [lang=he]:not(html){display:none!important}
html[lang=he] body{font-size:clamp(16px,1.1vw,19px)}
.he-display{font-family:var(--heb);font-weight:500}
/* gold */
.gold-text{background:linear-gradient(100deg,var(--goldlo) 0%,var(--goldhi) 28%,var(--gold) 46%,#fff1c9 56%,var(--gold) 70%,var(--goldlo) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold) 20%,var(--gold) 80%,transparent);opacity:.55}
.eyebrow{font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.42em;text-transform:uppercase;color:var(--gold)}
html[lang=he] .eyebrow{letter-spacing:.18em;font-size:13px}
.tagline{font-family:var(--serif);font-size:clamp(11px,.95vw,15px);letter-spacing:.5em;text-transform:uppercase;color:var(--goldhi);white-space:nowrap}
.tagline i{font-style:normal;color:var(--ember);margin:0 .6em}
/* grain + candle */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.075;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
.candle{position:absolute;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,170,80,.22),rgba(212,42,31,.08) 55%,transparent);mix-blend-mode:screen;animation:flick 3.2s ease-in-out infinite}
@keyframes flick{0%,100%{opacity:.85;transform:scale(1)}23%{opacity:1;transform:scale(1.03)}41%{opacity:.7}57%{opacity:.95;transform:scale(.98)}78%{opacity:.8}}
/* loader (v3, approved by Lokito): all marks fully visible by ~1.15s, hold >=1.2s, 0.4s fade from ~2.4s, gone by 2.8s, hard max 3.0s */
#loader{position:fixed;inset:0;z-index:100;background:var(--noir);display:grid;place-items:center;transition:opacity .3s ease .25s,visibility 0s .55s}
#loader .inner{display:grid;justify-items:center;gap:26px;width:min(72vw,760px)}
#loader .crest{width:84px;opacity:0;animation:fadeUp .55s .05s var(--ease) forwards}
#loader .logo{width:100%;clip-path:inset(0 100% 0 0);animation:wipe .6s .08s var(--ease) forwards}
html[dir=rtl] #loader .logo{clip-path:inset(0 0 0 100%)}
#loader .tagline{opacity:0;animation:fadeUp .45s .2s var(--ease) forwards}
#loader .bar{width:120px;height:1px;background:var(--gold);transform:scaleX(0);animation:bar .65s .08s var(--ease) forwards}
body.loaded #loader{opacity:0;visibility:hidden}
/* v3.2: logos fade first (.25s), then the backdrop (.3s); the hero identity stays hidden until the loader is gone (no doubled DANIEL) */
#loader .inner{transition:opacity .25s ease}body.loaded #loader .inner{opacity:0}
.hero .id-top{opacity:0;transition:opacity .6s ease}body.revealed .hero .id-top{opacity:1}
@keyframes wipe{to{clip-path:inset(0 0 0 0)}}
@keyframes bar{to{transform:scaleX(1)}}
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
/* nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px var(--gut);transition:background .6s,padding .6s}
.nav.solid{background:linear-gradient(rgba(10,7,6,.92),rgba(10,7,6,.75));backdrop-filter:blur(10px);padding-top:14px;padding-bottom:14px;border-bottom:1px solid rgba(201,162,90,.15)}
.nav .mono{width:46px;color:var(--gold)}
.nav ul{display:flex;gap:clamp(18px,2.2vw,40px);list-style:none}
.nav ul a{font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--cream);opacity:.78;transition:opacity .3s,color .3s}
html[lang=he] .nav ul a{letter-spacing:.08em;font-size:14px}
.nav ul a:hover{opacity:1;color:var(--goldhi)}
.lang{display:flex;gap:2px;border:1px solid rgba(201,162,90,.4);border-radius:40px;padding:3px}
.lang button{background:none;border:0;color:var(--cream);font:500 11px/1 var(--sans);letter-spacing:.15em;padding:8px 12px;border-radius:40px;cursor:pointer}
.lang button[aria-pressed=true]{background:var(--gold);color:var(--noir)}
/* hero */
.hero{position:relative;height:100svh;min-height:620px;overflow:hidden;isolation:isolate}
.hero video,.hero .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:18% 40%;z-index:-2}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(10,7,6,.0) 30%,rgba(10,7,6,.35) 60%,rgba(10,7,6,.55)),linear-gradient(0deg,rgba(10,7,6,.95),rgba(10,7,6,0) 32%),linear-gradient(180deg,rgba(10,7,6,.55),transparent 22%)}
.hero .id{position:absolute;right:var(--gut);top:50%;transform:translateY(-46%);width:min(50vw,900px);display:grid;justify-items:center;text-align:center;gap:clamp(12px,1.5vw,22px)}
.hero .logo{width:100%;filter:drop-shadow(0 6px 30px rgba(0,0,0,.55))}
.hero .deloco{display:block;width:34%;height:auto;margin-top:calc(-1 * clamp(4px,.6vw,10px));filter:drop-shadow(0 4px 18px rgba(0,0,0,.5))}
.hero .heb{font-family:var(--heb);font-weight:400;font-size:clamp(20px,1.9vw,34px);color:var(--cream);letter-spacing:.06em}
.cta{display:inline-flex;align-items:center;gap:16px;margin-top:clamp(10px,1.6vw,26px);padding:18px 34px;border:1px solid var(--gold);color:var(--cream);font:500 12px/1 var(--sans);letter-spacing:.32em;text-transform:uppercase;position:relative;overflow:hidden;transition:color .5s var(--ease)}
html[lang=he] .cta{letter-spacing:.06em;font-size:15px}
.cta::before{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--ember),var(--flame));transform:scaleX(0);transform-origin:left;transition:transform .6s var(--ease);z-index:-1}
.cta:hover::before{transform:scaleX(1)}
.cta .play{width:9px;height:11px;background:var(--goldhi);clip-path:polygon(0 0,100% 50%,0 100%)}
html[dir=rtl] .cta .play{transform:scaleX(-1)}
.cta.solid{background:linear-gradient(100deg,var(--ember),#b3170f);border-color:transparent;box-shadow:0 10px 40px rgba(212,42,31,.35)}
.scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);display:grid;justify-items:center;gap:10px;font-size:10px;letter-spacing:.4em;color:var(--mute);text-transform:uppercase}
.scroll-cue span{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:cue 2.4s var(--ease) infinite;transform-origin:top}
@keyframes cue{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.hero .presents{display:flex;align-items:center;gap:14px}
.hero .presents .rule{width:56px}
/* generic section */
section{position:relative}
.wrap{padding:clamp(90px,11vw,200px) var(--gut)}
.sec-head{display:flex;align-items:center;gap:22px;margin-bottom:clamp(40px,5vw,80px)}
.sec-head .num{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:clamp(14px,1.1vw,18px)}
.sec-head .rule{flex:1}
h2.display{font-family:var(--serif);font-weight:400;font-size:clamp(46px,7.4vw,140px);line-height:.92;letter-spacing:-.01em}
html[lang=he] h2.display{font-family:var(--heb);font-weight:500;line-height:1.02;letter-spacing:0}
h2 em,.it{font-style:italic;color:var(--goldhi)}
p.lead{font-size:clamp(17px,1.35vw,23px);color:#e7dccd;max-width:34em}
/* ERA */
.era{background:radial-gradient(80% 60% at 75% 30%,rgba(59,11,13,.55),transparent 70%),var(--noir)}
.era-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(40px,6vw,120px);align-items:center}
.frame{position:relative;padding:14px;border:1px solid rgba(201,162,90,.45)}
.frame::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,90,.18);pointer-events:none}
.frame img{width:100%;height:auto}
.frame .corner{position:absolute;width:44px;height:44px;color:var(--gold)}
.frame .c1{top:-8px;left:-8px}.frame .c2{top:-8px;right:-8px;transform:scaleX(-1)}.frame .c3{bottom:-8px;left:-8px;transform:scaleY(-1)}.frame .c4{bottom:-8px;right:-8px;transform:scale(-1,-1)}
.era .title-he{font-family:var(--heb);font-weight:500;font-size:clamp(54px,6.8vw,124px);line-height:1;color:var(--cream)}
.era .title-en{font-family:var(--serif);font-style:italic;font-size:clamp(22px,2.2vw,38px);color:var(--goldhi);margin-top:10px}
.credits{margin:34px 0;display:grid;grid-template-columns:auto 1fr;gap:10px 28px;font-size:14px;border-top:1px solid rgba(201,162,90,.2);padding-top:24px}
.credits dt{color:var(--gold);letter-spacing:.24em;font-size:10.5px;text-transform:uppercase;padding-top:3px}
html[lang=he] .credits dt{letter-spacing:.06em;font-size:13px}
.credits dd{color:#e9dfd1}
.players{display:grid;grid-template-columns:132px 1fr;gap:18px;align-items:stretch;margin-top:30px}
.players .cover{width:132px;height:132px;object-fit:cover;border:1px solid rgba(201,162,90,.35)}
.spotify{border:0;border-radius:12px;width:100%;height:152px;background:#181212}
/* key art */
.keyart{background:#060404;overflow:hidden}
.keyart .grid{display:grid;grid-template-columns:minmax(0,.85fr) 1fr;gap:clamp(40px,7vw,140px);align-items:center}
.keyart .poster{box-shadow:0 40px 120px rgba(0,0,0,.8),0 0 0 1px rgba(201,162,90,.35)}
.keyart .manifesto{font-family:var(--serif);font-size:clamp(30px,3.4vw,64px);line-height:1.12}
html[lang=he] .keyart .manifesto{font-family:var(--heb)}
.keyart .manifesto span{display:block}
.keyart .manifesto .r{color:var(--ember);font-style:italic}
html[lang=he] .keyart .manifesto .r{font-style:normal}
.keyart small{display:block;margin-top:30px;color:var(--mute);font-size:12px;letter-spacing:.08em}
/* statement full bleed */
.statement{height:110vh;min-height:640px;overflow:hidden;display:grid;align-items:end}
.statement img{position:absolute;inset:-8% 0;width:100%;height:116%;object-fit:cover;object-position:70% 30%;will-change:transform}
.statement::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,var(--noir) 2%,rgba(10,7,6,.2) 45%,rgba(10,7,6,.1)),linear-gradient(90deg,rgba(10,7,6,.75),transparent 55%)}
.statement .txt{position:relative;z-index:2;padding:0 var(--gut) clamp(60px,9vw,140px);justify-self:left;max-width:min(58vw,900px)}
.statement .big{font-family:var(--serif);font-size:clamp(52px,9.5vw,190px);line-height:.88;font-weight:400}
html[lang=he] .statement .big{font-family:var(--heb);font-weight:500;line-height:1}
/* videos */
.videos .strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,1fr);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:var(--gold) transparent}
.vcard{scroll-snap-align:start;cursor:pointer;display:grid;gap:14px}
.vcard .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000;border:1px solid rgba(201,162,90,.25)}
.vcard.short .thumb{aspect-ratio:9/16;max-height:520px}
.vcard img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease),filter 1s;filter:saturate(.85) contrast(1.05)}
.vcard:hover img{transform:scale(1.05);filter:none}
.vcard .pl{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:1px solid var(--goldhi);display:grid;place-items:center;background:rgba(10,7,6,.35);backdrop-filter:blur(4px)}
.vcard .pl::after{content:"";width:14px;height:16px;background:var(--goldhi);clip-path:polygon(0 0,100% 50%,0 100%);margin-left:4px}
.vcard h3{font-family:var(--serif);font-weight:400;font-size:22px}
html[lang=he] .vcard h3{font-family:var(--heb);font-size:24px}
.vcard p{font-size:12px;color:var(--mute);letter-spacing:.1em}
.vcard iframe{width:100%;height:100%;border:0}
.videos .note{margin-top:18px;font-size:12px;color:var(--mute)}
/* story */
.story{background:linear-gradient(var(--noir),#0d0807)}
.story .cols{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(40px,7vw,140px);align-items:start}
.story .facts{list-style:none;display:grid;gap:0;margin-top:40px}
.story .facts li{display:grid;grid-template-columns:110px 1fr;gap:20px;padding:18px 0;border-top:1px solid rgba(201,162,90,.18)}
.story .facts b{font-family:var(--serif);font-weight:400;font-style:italic;color:var(--gold);font-size:18px}
.story .portrait{position:sticky;top:110px}
/* roots */
.roots{background:radial-gradient(60% 50% at 50% 0%,rgba(212,42,31,.18),transparent 70%),#070505;overflow:hidden}
.roots .stripe{height:3px;width:160px;background:linear-gradient(90deg,#1f9d55 0 33%,#f2c230 33% 66%,#0a0706 66%);margin:22px 0 0}
.roots .pair{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,32px);margin-top:clamp(40px,5vw,80px)}
.roots .pair figure{position:relative;overflow:hidden}
.roots .pair figure:nth-child(2){margin-top:clamp(40px,8vw,160px)}
.roots .pair img{width:100%;height:auto;transition:transform 1.4s var(--ease)}
.roots .pair figure:hover img{transform:scale(1.03)}
.roots .huge{position:absolute;font-family:var(--serif);font-style:italic;font-size:clamp(120px,22vw,420px);line-height:.8;color:transparent;-webkit-text-stroke:1px rgba(201,162,90,.18);right:-2vw;top:8%;pointer-events:none;white-space:nowrap}
/* gallery */
.gallery .g{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,24px)}
.gallery figure{overflow:hidden;position:relative;background:#000}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.gallery figure:hover img{transform:scale(1.04)}
.gallery figcaption{position:absolute;left:16px;bottom:12px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--goldhi);opacity:.85}
html[dir=rtl] .gallery figcaption{left:auto;right:16px;letter-spacing:.08em;font-size:12px}
.g .a{grid-column:1/13;aspect-ratio:2.2/1}
.g .b{grid-column:1/6;aspect-ratio:4/5}
.g .c{grid-column:6/13;aspect-ratio:1.12/1}
.g .c img{object-position:41% 30%}
.g .d{grid-column:3/11;aspect-ratio:4/3}
/* bloodline */
.bloodline{background:radial-gradient(70% 70% at 30% 50%,rgba(59,11,13,.6),transparent 70%),var(--noir)}
.bloodline .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,120px);align-items:center}
.family-links{display:grid;gap:0;margin-top:36px}
.family-links a{display:flex;justify-content:space-between;align-items:baseline;padding:22px 0;border-top:1px solid rgba(201,162,90,.22);transition:padding .5s var(--ease),color .3s}
.family-links a:last-child{border-bottom:1px solid rgba(201,162,90,.22)}
.family-links a:hover{padding-inline-start:14px;color:var(--goldhi)}
.family-links .n{font-family:var(--serif);font-size:clamp(26px,2.6vw,44px)}
html[lang=he] .family-links .n{font-family:var(--heb)}
.family-links .r{font-size:11px;letter-spacing:.3em;color:var(--mute);text-transform:uppercase}
/* connect */
.connect{text-align:center;background:linear-gradient(#0d0807,#060404)}
.socials{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin:46px auto 70px;max-width:900px}
.socials a{padding:14px 22px;border:1px solid rgba(201,162,90,.35);font-size:11px;letter-spacing:.3em;text-transform:uppercase;transition:background .4s,color .4s}
.socials a:hover{background:var(--gold);color:var(--noir)}
.booking .mail{font-family:var(--serif);font-style:italic;font-size:clamp(28px,4vw,64px);color:var(--goldhi);display:inline-block;margin-top:14px;border-bottom:1px solid rgba(201,162,90,.4)}
.booking .flag{font-size:11px;color:var(--mute);margin-top:12px}
/* footer */
footer{padding:80px var(--gut) 50px;text-align:center;border-top:1px solid rgba(201,162,90,.15);display:grid;justify-items:center;gap:22px}
footer .crest{width:70px;color:var(--gold)}
.ii{font-family:var(--serif);font-size:13px;letter-spacing:.42em;color:var(--cream);text-transform:uppercase}
.ii b{font-style:italic;font-weight:400;color:var(--gold);letter-spacing:.05em;font-size:1.25em;text-transform:none}
footer small{color:#6f645a;font-size:11px;letter-spacing:.12em}
/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.4s var(--ease),transform 1.4s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv-img{clip-path:inset(12% 0 12% 0);transition:clip-path 1.8s var(--ease)}
.rv-img.in{clip-path:inset(0 0 0 0)}
/* responsive */
@media (max-width:900px),(max-aspect-ratio:4/5){
  .nav ul{display:none}
  .hero video,.hero .poster{object-position:50% 50%}
  .hero::after{background:linear-gradient(180deg,rgba(10,7,6,.55),rgba(10,7,6,0) 30%),linear-gradient(0deg,rgba(10,7,6,.97) 6%,rgba(10,7,6,.35) 34%,transparent 52%)}
  .hero .id{right:0;left:0;margin:auto;top:auto;bottom:clamp(64px,10vh,110px);transform:none;width:88vw}
  .era-grid,.keyart .grid,.story .cols,.bloodline .grid{grid-template-columns:1fr}
  .story .portrait{position:relative;top:0}
  .g .a{grid-column:1/13;aspect-ratio:4/5}.g .a img{object-position:30% 50%}
  .g .b,.g .c,.g .d{grid-column:1/13}
  .players{grid-template-columns:96px 1fr}.players .cover{width:96px;height:96px}
  .tagline{letter-spacing:.32em;font-size:11px}
  .statement{height:90vh}.statement img{object-position:72% 30%}
  .roots .pair{grid-template-columns:1fr}
  .roots .pair figure:nth-child(2){margin-top:0}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #loader{display:none}.hero .id-top{opacity:1}.rv{opacity:1;transform:none}.rv-img{clip-path:none}
  .grain{display:none}
}

html[dir=rtl] .arrow{display:inline-block;transform:scaleX(-1)}
.ltr{direction:ltr;unicode-bidi:isolate}
@media (max-width:900px),(max-aspect-ratio:4/5){.g .c{aspect-ratio:4/5}.statement .txt{max-width:none}}

.hero .id-top,.hero .id-bottom{display:grid;justify-items:center;gap:inherit;width:100%}
.gallery picture{height:100%}
.keyart .poster{position:relative}
.keyart .poster::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(6,4,4,.85),transparent 30%);pointer-events:none}
.keyart .poster .cap{position:absolute;left:0;right:0;bottom:22px;z-index:2;display:grid;justify-items:center;gap:10px}
.keyart .poster .cap svg{width:62%}
@media (max-width:900px),(max-aspect-ratio:4/5){
  .hero video,.hero .poster{object-position:50% 78%!important}
  .hero .id{top:calc(64px + 2vh);bottom:clamp(28px,5vh,56px);display:flex;flex-direction:column;justify-content:space-between;width:90vw}
  .hero .id-top{gap:8px}.hero .id-bottom{gap:14px}
  .hero .deloco{width:46%;margin:-2px 0 4px}
  .hero::after{background:linear-gradient(180deg,rgba(10,7,6,.75),rgba(10,7,6,.2) 26%,transparent 38%),linear-gradient(0deg,rgba(10,7,6,.95) 4%,rgba(10,7,6,.2) 22%,transparent 34%)}
  .hero .presents .rule{width:28px}
  .hero .scroll-cue{display:none}
}
@media (max-width:640px){.streams{display:grid!important;grid-template-columns:repeat(3,1fr);gap:8px!important}.streams .cta{justify-content:center;padding:14px 6px;letter-spacing:.12em;font-size:10px;margin-top:0}html[lang=he] .streams .cta{font-size:12px}}
/* label branding: I&I Records + De Loco Legacy */
.lg-ii,.lg-dl{display:block;height:auto}
#loader .labels{display:flex;align-items:center;gap:26px;opacity:0;animation:fadeUp .45s .25s var(--ease) forwards}
#loader .labels .lg-ii{width:auto;height:46px}#loader .labels .lg-dl{width:auto;height:46px}
.labels .sep,.presented .sep{width:1px;align-self:stretch;background:linear-gradient(transparent,rgba(201,162,90,.55),transparent)}
.brandset{display:flex;align-items:center;gap:18px}
.nav-label{font-family:var(--serif);font-size:10.5px;letter-spacing:.34em;text-transform:uppercase;color:var(--gold);opacity:.9;white-space:nowrap;padding-inline-start:18px;border-inline-start:1px solid rgba(201,162,90,.3);line-height:2.2}
.nav-label i{font-style:normal;margin:0 .7em;color:var(--ember)}
.nav-label:hover{color:var(--goldhi)}
.label-credit{display:flex;align-items:center;gap:14px}
.label-credit .lg-ii{width:auto;height:34px;flex:none}
.label-credit span{display:grid;line-height:1.35}
.label-credit small{font-family:var(--serif);font-size:10px;letter-spacing:.38em;text-transform:uppercase;color:var(--gold)}
.presented{margin-top:42px;display:grid;gap:18px;justify-items:start}
.presented .eyebrow{font-size:10.5px}
.presented .logos{display:flex;align-items:center;gap:30px}
.presented .lg-ii{width:auto;height:64px}.presented .lg-dl{width:auto;height:64px}
.presented a{opacity:.92;transition:opacity .3s,transform .5s var(--ease)}.presented a:hover{opacity:1;transform:translateY(-2px)}
.presented.foot{margin:6px 0 10px;justify-items:center}
.presented.foot .lg-ii,.presented.foot .lg-dl{height:58px}
@media (max-width:1280px) and (min-width:901px){.nav-label{display:none}}
@media (max-width:900px),(max-aspect-ratio:4/5){
  .brandset{gap:12px}.nav-label{display:grid;font-size:8.5px;letter-spacing:.26em;padding-inline-start:12px;line-height:1.7}.nav-label i{display:none}
  .presented .logos{gap:22px}.presented .lg-ii,.presented .lg-dl{height:50px}
  #loader .labels .lg-ii,#loader .labels .lg-dl{height:38px}
  .presented.foot .lg-ii,.presented.foot .lg-dl{height:50px}
}
/* v3 (desktop only): tighten the empty bands above Identity (after the full-bleed statement) and Gallery (after Roots).
   Cause: .wrap's clamp(90px,11vw,200px) top padding stacked on the previous section's bottom space, plus the 12% top clip of the image reveal. */
@media (min-width:901px) and (min-aspect-ratio:4/5){
  .keyart .wrap{padding-top:clamp(56px,4.5vw,96px)}
  /* v3.2 (Lokito): Roots image -> Gallery label 96px@1440 / 120px@1920; label -> image 48px@1440 / 56px@1920 */
  .gallery .wrap{padding-top:0}
  .roots .wrap{padding-bottom:calc(24px + 5vw)}
  .gallery .sec-head{margin-bottom:calc(24px + 1.6667vw)}
  .keyart .rv-img,.gallery .rv-img{clip-path:inset(0 0 16% 0)}
  .keyart .rv-img.in,.gallery .rv-img.in{clip-path:inset(0 0 0 0)}
}
/* v4 ORIGIN chapter (Daniel 2021–2022, before the red) · graphics Lokito origin/HANDOFF-ORIGIN.md · markup src/origin.py */
.origin{background:radial-gradient(70% 40% at 30% 40%,rgba(59,11,13,.35),transparent 70%),var(--noir);overflow:hidden}
.origin .o-open,.origin .o-close{position:relative;isolation:isolate}
.origin .o-open img,.origin .o-close img{width:100%;height:auto}
.origin .o-open::after,.origin .o-close::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,var(--noir),rgba(10,7,6,0) 14%),linear-gradient(0deg,var(--noir),rgba(10,7,6,0) 18%)}
/* desktop title type sits in h02's dark safe zone (x 5–45%); mirrors Lokito's title card (Bodoni Moda + gold, fire in Ember) */
.o-title{position:absolute;z-index:2;filter:drop-shadow(0 4px 22px rgba(0,0,0,.65));left:4.5vw;top:11%;width:27vw;display:grid;gap:clamp(8px,.9vw,16px);text-align:left}
.o-title .eyebrow{font-size:clamp(10px,.75vw,13px);letter-spacing:.42em;color:var(--goldhi);opacity:.85}
.o-title .eyebrow i{font-style:normal;margin:0 .8em;color:var(--gold)}
.o-title .o-word{font-family:var(--serif);font-weight:400;font-size:clamp(50px,5.6vw,120px);line-height:.95;letter-spacing:.06em;margin-right:-.06em;width:fit-content}
.o-title .o-name{font-family:var(--serif);font-size:clamp(13px,1.3vw,26px);letter-spacing:.32em;text-transform:uppercase;color:var(--cream);padding-top:clamp(10px,1vw,18px);border-top:1px solid rgba(201,162,90,.45);width:fit-content}
.o-title .o-tag{font-family:var(--serif);font-style:italic;font-size:clamp(17px,1.6vw,32px);line-height:1.35;color:var(--cream)}
.o-title .o-tag-he{font-family:var(--heb);font-style:normal;font-weight:500;width:fit-content}
.o-title .o-tag-he em{font-style:normal}
.o-title .o-tag em{color:var(--ember)}
.o-title .o-years{font-size:clamp(10px,.75vw,13px);letter-spacing:.4em;color:var(--mute)}
.origin .wrap{padding-top:clamp(40px,4.5vw,88px);padding-bottom:clamp(40px,4.5vw,88px)}
.origin .sec-head{margin-bottom:clamp(20px,2vw,36px)}
.origin .o-lead{margin-bottom:clamp(36px,4vw,72px)}
.og{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.4vw,24px)}
.og figure{position:relative;overflow:hidden;background:#000;aspect-ratio:4/5}
.og picture{height:100%}.og img{width:100%;height:100%;object-fit:cover;transition:transform 1.6s var(--ease)}
.og figure:hover img{transform:scale(1.04)}
.og .og01{grid-column:1/9;grid-row:1/3;aspect-ratio:auto}
.og .og02{grid-column:9/13;grid-row:1}.og .og03{grid-column:9/13;grid-row:2}
.og .og04{grid-column:1/5}.og .og05{grid-column:5/9}.og .og06{grid-column:9/13}
.origin .o-sub{margin-top:clamp(56px,6vw,110px)}
.ostills{display:flex;gap:clamp(8px,1.1vw,18px)}
.ostills figure{flex:1 1 0;min-width:0;max-width:400px;aspect-ratio:9/16;overflow:hidden;background:#000;border:1px solid rgba(201,162,90,.22)}
.ostills picture{height:100%}.ostills img{width:100%;height:100%;object-fit:cover}
.o-close .o-next{position:absolute;z-index:2;right:clamp(40px,6vw,120px);top:50%;transform:translateY(-50%);display:flex;align-items:center;gap:18px;padding:16px 0;border-bottom:1px solid rgba(201,162,90,.4);transition:gap .5s var(--ease)}
.o-close .o-next:hover{gap:28px}
.o-close .o-next .arrow{color:var(--goldhi);font-size:20px}
/* h03 safe zone is on the right (x 45–95%) in both languages */
/* desktop: the chapter is followed by Era I; keep the band after the closing image tight (same fix as Identity in v3) */
@media (min-width:901px) and (min-aspect-ratio:4/5){
  .origin + .era .wrap{padding-top:clamp(56px,4.5vw,96px)}
  .origin .o-open::after{background:linear-gradient(90deg,rgba(10,6,4,.85) 0%,rgba(10,6,4,.5) 35%,transparent 55%),linear-gradient(180deg,var(--noir),rgba(10,7,6,0) 14%),linear-gradient(0deg,var(--noir),rgba(10,7,6,0) 18%)}
  .o-close img{aspect-ratio:2.2/1;object-fit:cover;object-position:50% 88%}  /* trims the empty dark ceiling of h03 */
  .og .rv-img{clip-path:inset(0 0 16% 0)}.og .rv-img.in{clip-path:inset(0 0 0 0)}
}
@media (max-width:900px),(max-aspect-ratio:4/5){
  .o-title{display:none!important}  /* mobile opener is the 9:16 title card; its type is baked in */
  .origin .o-open::after{background:linear-gradient(180deg,var(--noir),rgba(10,7,6,0) 10%),linear-gradient(0deg,var(--noir),rgba(10,7,6,0) 12%)}
  .og{grid-template-columns:1fr 1fr;gap:10px}
  .og .og01{grid-column:1/3;grid-row:auto;aspect-ratio:4/5}
  .og .og02,.og .og03,.og .og04,.og .og05{grid-column:auto;grid-row:auto}
  .og .og06{grid-column:1/3;width:62%;justify-self:center}
  .ostills{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
  .ostills figure{max-width:none}
  .o-close img{aspect-ratio:2/3;object-fit:cover;object-position:50% 0%}  /* s04 9:16: keep the raised hand, trim the floor */
  .origin .o-close::after{background:linear-gradient(180deg,rgba(10,7,6,.35),rgba(10,7,6,0) 6%),linear-gradient(0deg,var(--noir),rgba(10,7,6,0) 16%)}
  .o-close .o-next{display:none}  /* Era I's own label follows directly on mobile */
}
/* ===== v5 · on-site player (one song) + mini-player ===== */
.cta-alt{display:inline-flex;align-items:center;gap:8px;margin-top:2px;font:400 12px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid rgba(201,162,90,.3);padding-bottom:5px;transition:color .4s,border-color .4s}
html[lang=he] .cta-alt{letter-spacing:.04em;font-size:13px}
.cta-alt:hover{color:var(--goldhi);border-color:var(--gold)}.cta-alt i{font-style:normal;font-size:.95em}
.aplayer{position:relative;display:grid;grid-template-columns:168px 1fr;gap:clamp(18px,2vw,30px);align-items:center;margin-top:30px;padding:18px;
  background:linear-gradient(120deg,rgba(59,11,13,.55),rgba(19,12,10,.92) 55%),var(--noir2);border:1px solid rgba(201,162,90,.32);box-shadow:0 30px 80px rgba(0,0,0,.45),inset 0 0 0 1px rgba(239,213,155,.04)}
.aplayer::before{content:"";position:absolute;inset:6px;border:1px solid rgba(201,162,90,.12);pointer-events:none}
.ap-cover{position:relative;width:168px;aspect-ratio:1;isolation:isolate}
.ap-cover img{width:100%;height:100%;object-fit:cover;border:1px solid rgba(201,162,90,.4);box-shadow:0 14px 40px rgba(0,0,0,.6)}
.ap-ring{position:absolute;inset:-7px;border:1px solid rgba(201,162,90,.0);pointer-events:none;transition:border-color .6s,box-shadow .6s}
.aplayer.playing .ap-ring{border-color:rgba(212,42,31,.7);box-shadow:0 0 34px rgba(212,42,31,.35)}
.ap-body{min-width:0;display:grid;gap:6px}
.ap-eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold);font:500 10.5px/1 var(--sans);letter-spacing:.38em;text-transform:uppercase}
html[lang=he] .ap-eyebrow{letter-spacing:.12em;font-size:12.5px}
.ap-eq{display:inline-flex;align-items:flex-end;gap:2px;height:11px}
.ap-eq i{width:2px;height:3px;background:var(--ember);transition:height .3s}
.aplayer.playing .ap-eq i{animation:apeq .9s ease-in-out infinite alternate}
.ap-eq i:nth-child(2){animation-delay:-.3s!important}.ap-eq i:nth-child(3){animation-delay:-.6s!important}.ap-eq i:nth-child(4){animation-delay:-.15s!important}
@keyframes apeq{0%{height:2px}100%{height:11px}}
.ap-title{font-family:var(--heb);font-weight:500;font-size:clamp(26px,2.3vw,38px);line-height:1.1;color:var(--cream);margin-top:4px}
.ap-artist{font-family:var(--serif);font-style:italic;font-size:clamp(14px,1.05vw,17px);color:var(--goldhi);text-align:start}
html[dir=rtl] .ap-artist{text-align:right}
.ap-artist em{color:var(--mute);font-size:.9em}
.ap-ctrl{display:flex;align-items:center;gap:16px;margin-top:10px}
.ap-btn{flex:none;width:58px;height:58px;border-radius:50%;border:1px solid rgba(239,213,155,.55);background:linear-gradient(140deg,var(--ember),#a3140d);display:grid;place-items:center;cursor:pointer;color:var(--cream);
  box-shadow:0 10px 30px rgba(212,42,31,.38);transition:transform .35s var(--ease),box-shadow .35s}
.ap-btn:hover{transform:scale(1.06);box-shadow:0 12px 40px rgba(212,42,31,.55)}
.ap-btn:focus-visible,.ap-seek:focus-visible,.mp-close:focus-visible,.mp-meta:focus-visible{outline:2px solid var(--goldhi);outline-offset:3px}
.ap-ico{position:relative;width:16px;height:18px}
.ap-ico::before{content:"";position:absolute;inset:0;margin-left:3px;background:var(--cream);clip-path:polygon(0 0,100% 50%,0 100%)}
.playing .ap-ico::before,.ap-playing .ap-ico::before{margin-left:0;clip-path:polygon(0 0,34% 0,34% 100%,0 100%,0 0,66% 0,100% 0,100% 100%,66% 100%,66% 0)}
.ap-track{flex:1;min-width:0;display:grid;gap:6px}
.ap-seek{--p:0%;-webkit-appearance:none;appearance:none;width:100%;height:22px;background:transparent;cursor:pointer;margin:0}
.ap-seek::-webkit-slider-runnable-track{height:3px;background:linear-gradient(90deg,var(--goldlo),var(--goldhi) var(--p),rgba(243,233,218,.16) var(--p))}
.ap-seek::-moz-range-track{height:3px;background:rgba(243,233,218,.16)}
.ap-seek::-moz-range-progress{height:3px;background:linear-gradient(90deg,var(--goldlo),var(--goldhi))}
.ap-seek::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;margin-top:-5px;border-radius:50%;background:var(--goldhi);border:2px solid var(--noir);box-shadow:0 0 0 1px var(--gold)}
.ap-seek::-moz-range-thumb{width:11px;height:11px;border-radius:50%;background:var(--goldhi);border:2px solid var(--noir)}
.ap-time{display:flex;justify-content:space-between;font:400 11px/1 var(--sans);letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums}
/* mini-player */
.miniplayer{position:fixed;left:0;right:0;bottom:0;z-index:60;display:grid;grid-template-columns:44px minmax(0,1fr) auto 44px 36px;align-items:center;gap:14px;
  padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom));background:rgba(10,7,6,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-top:1px solid rgba(201,162,90,.28);transform:translateY(110%);transition:transform .5s var(--ease)}
.miniplayer.on{transform:none}
.miniplayer[hidden]{display:none}
.mp-prog{position:absolute;left:0;right:0;top:-1px;height:2px;background:rgba(243,233,218,.08)}
.mp-prog span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--ember),var(--goldhi))}
html[dir=rtl] .mp-prog span{margin-left:auto;background:linear-gradient(270deg,var(--ember),var(--goldhi))}
.mp-art{width:44px;height:44px;object-fit:cover;border:1px solid rgba(201,162,90,.35)}
.mp-meta{min-width:0;display:grid;gap:2px;line-height:1.2}
.mp-title{font-family:var(--heb);font-size:17px;color:var(--cream);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mp-artist{font-family:var(--serif);font-style:italic;font-size:12px;color:var(--goldhi);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir=rtl] .mp-artist{text-align:right}
.mp-time{font:400 11px/1 var(--sans);letter-spacing:.1em;color:var(--mute);font-variant-numeric:tabular-nums}
.ap-btn.sm{width:44px;height:44px;box-shadow:0 6px 18px rgba(212,42,31,.35)}.ap-btn.sm .ap-ico{width:12px;height:14px}
.mp-close{width:36px;height:36px;border:1px solid rgba(201,162,90,.25);border-radius:50%;background:none;color:var(--mute);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center}
.mp-close:hover{color:var(--cream);border-color:var(--gold)}
body.ap-on footer{padding-bottom:calc(50px + 70px + env(safe-area-inset-bottom))}
@media (max-width:900px),(max-aspect-ratio:4/5){.hero .id{transition:bottom .5s var(--ease)}body.ap-mini .hero .id{bottom:calc(clamp(28px,5vh,56px) + 64px + env(safe-area-inset-bottom))}}
@media (max-width:900px),(max-aspect-ratio:4/5){
  .aplayer{grid-template-columns:104px minmax(0,1fr);column-gap:16px;row-gap:4px;padding:14px;align-items:center}
  .ap-body{display:contents}
  .ap-cover{width:104px;grid-row:1/4;grid-column:1}
  .ap-eyebrow,.ap-title,.ap-artist{grid-column:2}
  .ap-eyebrow{align-self:end}.ap-artist{align-self:start}
  .ap-ctrl{grid-column:1/-1;margin-top:12px}
  .ap-title{font-size:26px}
  .ap-btn{width:52px;height:52px}
}
@media (max-width:640px){
  .aplayer{grid-template-columns:92px minmax(0,1fr)}.ap-cover{width:92px}
  .miniplayer{grid-template-columns:40px minmax(0,1fr) 44px 32px;gap:10px;padding-inline:14px}
  .mp-art{width:40px;height:40px}.mp-time{display:none}.mp-close{width:32px;height:32px}
}
@media (prefers-reduced-motion:reduce){.aplayer.playing .ap-eq i{animation:none;height:8px}.miniplayer{transition:none}}
/* ===== v6 · single via official video + background-music button ===== */
.ap-cta-txt{display:grid;gap:4px;min-width:0}
.ap-cta-txt .t1{font:500 12px/1.3 var(--sans);letter-spacing:.22em;text-transform:uppercase;color:var(--cream)}
html[lang=he] .ap-cta-txt .t1{letter-spacing:.04em;font-size:15px}
.ap-cta-txt .t2{font:400 11px/1 var(--sans);letter-spacing:.14em;color:var(--mute);font-variant-numeric:tabular-nums}
html[dir=rtl] .ap-cta-txt{text-align:left}
.ap-video{grid-column:1/-1;position:relative;aspect-ratio:16/9;background:#000;border:1px solid rgba(201,162,90,.35)}
.ap-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.aplayer.has-video .ap-ctrl{display:none}
.bgm-btn{position:fixed;bottom:calc(18px + env(safe-area-inset-bottom));inset-inline-end:18px;z-index:60;display:inline-flex;align-items:center;gap:10px;height:44px;padding:0 16px 0 14px;
  border-radius:22px;border:1px solid rgba(201,162,90,.55);background:rgba(10,7,6,.78);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--cream);cursor:pointer;
  font:500 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;box-shadow:0 8px 28px rgba(0,0,0,.45);transition:border-color .3s,background .3s}
html[lang=he] .bgm-btn{letter-spacing:.04em;font-size:13px}
.bgm-btn:hover{border-color:var(--goldhi)}
.bgm-btn:focus-visible{outline:2px solid var(--goldhi);outline-offset:3px}
.bgm-ico{position:relative;display:inline-flex;align-items:flex-end;gap:2px;height:14px;width:16px}
.bgm-ico i{width:2px;height:3px;background:var(--gold)}
.bgm-btn.on .bgm-ico i{background:var(--ember);animation:apeq .9s ease-in-out infinite alternate}
.bgm-btn.on .bgm-ico i:nth-child(2){animation-delay:-.3s}.bgm-btn.on .bgm-ico i:nth-child(3){animation-delay:-.6s}.bgm-btn.on .bgm-ico i:nth-child(4){animation-delay:-.15s}
.bgm-btn:not(.on) .bgm-ico::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:1.5px;background:var(--cream);transform:rotate(-38deg)}
.bgm-btn:not(.on) .bgm-txt{color:var(--mute)}
@media (max-width:640px){.bgm-btn{height:40px;padding:0 13px 0 11px;bottom:calc(14px + env(safe-area-inset-bottom));inset-inline-end:14px}}
@media (prefers-reduced-motion:reduce){.bgm-btn.on .bgm-ico i{animation:none;height:9px}}
html[lang=he] .ap-artist [lang=he]{font-family:var(--heb);font-style:normal;font-size:clamp(15px,1.1vw,18px);color:var(--goldhi)}
/* ===== v7 · Era I full-bleed single background (Lokito art, approved 12:19) ===== */
.era.era-bg{position:relative;isolation:isolate;background-color:#070404;
  background-image:url(../assets/img/single-bg-16x9-1920.jpg);
  background-image:-webkit-image-set(url(../assets/img/single-bg-16x9-1920.webp) 1x,url(../assets/img/single-bg-16x9-3840.webp) 2x);
  background-image:image-set(url(../assets/img/single-bg-16x9-1920.webp) 1x,url(../assets/img/single-bg-16x9-3840.webp) 2x);
  background-size:cover;background-position:72% 50%;background-repeat:no-repeat}
.era.era-bg::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.55) 30%,rgba(0,0,0,.18) 46%,transparent 56%),
             linear-gradient(180deg,var(--noir) 0%,rgba(10,7,6,0) 14%,rgba(10,7,6,0) 86%,var(--noir) 100%)}
.era.era-bg .era-grid{display:block}
.era.era-bg .era-copy{width:min(44%,660px);margin-left:0;margin-right:auto}
.ap-cover .ap-ring{border-color:transparent}
.aplayer.playing .ap-ring{border-color:rgba(201,162,90,.7);box-shadow:none}
.bgm-btn{opacity:.6;transition:opacity .3s,border-color .3s,background .3s}
.bgm-btn:hover,.bgm-btn:focus-visible,.bgm-btn:active{opacity:1}
@media (max-width:900px),(max-aspect-ratio:4/5){
  .era.era-bg{background-image:url(../assets/img/single-bg-9x16-1080.jpg);
    background-image:-webkit-image-set(url(../assets/img/single-bg-9x16-1080.webp) 1x,url(../assets/img/single-bg-9x16-2160.webp) 2x);
    background-image:image-set(url(../assets/img/single-bg-9x16-1080.webp) 1x,url(../assets/img/single-bg-9x16-2160.webp) 2x);
    background-size:100% auto;background-position:center bottom}
  .era.era-bg::before{background:linear-gradient(180deg,var(--noir) 0%,rgba(7,4,4,.92) 30%,rgba(7,4,4,.8) calc(100% - 92vw),rgba(7,4,4,0) calc(100% - 60vw))}
  .era.era-bg .era-copy{width:auto}
  .era.era-bg .wrap{padding-bottom:calc(var(--era-face-room,96vw))}
}
/* ===== v8 ===== */
/* Music toggle lives in the nav next to the language switch: never overlaps page content (1280-1920 and mobile) */
.nav-tools{display:flex;align-items:center;gap:12px}
.nav .bgm-btn{position:static;inset:auto;height:36px;padding:0 14px 0 12px;box-shadow:none;background:rgba(10,7,6,.35)}
@media (max-width:640px){.nav .bgm-btn{height:34px;width:38px;padding:0;justify-content:center}.nav .bgm-btn .bgm-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.nav-tools{gap:8px}}
/* transliteration under the Hebrew title (not a song name) */
.era .title-en .translit{font-family:var(--sans);font-style:normal;font-weight:400;font-size:.52em;letter-spacing:.32em;text-transform:uppercase;color:var(--goldhi);opacity:.9}
.era .title-en .ft{color:#a3968a;font-size:.6em}
/* mobile single background: fade to noir over the bottom ~14% (the art itself ends at the hips) */
@media (max-width:900px),(max-aspect-ratio:4/5){
  .era.era-bg::before{background:linear-gradient(0deg,var(--noir) 0%,rgba(10,7,6,.55) 7%,rgba(10,7,6,0) 14%),
    linear-gradient(180deg,var(--noir) 0%,rgba(7,4,4,.92) 30%,rgba(7,4,4,.8) calc(100% - 92vw),rgba(7,4,4,0) calc(100% - 60vw))}
  .era.era-bg .wrap{padding-bottom:104vw}
  .era.era-bg{background-position:center calc(100% - 6vw)}
}