/* BRUMARENA — shared styles for every page */
/* ============ FONTS (self-hosted Inter) ============ */
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-normal.woff2?v=260c81a4) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:normal;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext-wght-normal.woff2?v=1ad231aa) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-wght-italic.woff2?v=0a81fe19) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:Inter;font-style:italic;font-weight:100 900;font-display:swap;src:url(/assets/fonts/inter-latin-ext-wght-italic.woff2?v=f877664b) format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ============ TOKENS ============ */
:root{
  --font: Inter, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --light: #f1f1f3;
  --ink: #2b2b2f;
  --pad: clamp(20px, 5.6vw, 80px);
  --nav-h: 64px;
  --fs-body: clamp(15px, 1.12vw, 17px);
  --fs-small: clamp(13.5px, 1vw, 15.5px);
  --fs-h: clamp(24px, 2.1vw, 30px);
  box-sizing:border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:env(safe-area-inset-top,0px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
body{margin:0;background:#5f6e8c;color:var(--light);font-family:var(--font);font-size:var(--fs-body);line-height:1.38;font-feature-settings:"ss01" 0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
a:focus-visible,button:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:2px}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
strong,b{font-weight:700}

/* ============ SECTIONS + TEXTURE ============ */
.sec{position:relative;min-height:100vh;min-height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.sec .bg{position:absolute;inset:0;z-index:-3;background-size:cover;background-position:center;background-repeat:no-repeat}
.sec::before{content:"";position:absolute;inset:0;z-index:-2;background:var(--tint,transparent)}
.sec::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:url(/assets/img/grain.webp?v=3cf7148b) repeat;background-size:220px;mix-blend-mode:overlay;opacity:var(--grain,.32)}
.inner{position:relative;width:100%;max-width:1440px;margin:0 auto;padding:calc(var(--nav-h) + 56px) var(--pad) 64px;flex:1;display:flex;flex-direction:column}
.dark-text{color:var(--ink)}

/* ============ NAV ============ */
.nav{position:fixed;min-height:calc(var(--nav-h) + env(safe-area-inset-top,0px));top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--light);background:transparent;transition:background-color .25s ease, color .3s ease}
.nav.scrolled{background:var(--nav-solid,#5b6680)}
.nav.open{background:transparent}
/* Solid colour of the menu bar once you scroll, per page */
body[data-page="home"]{--nav-solid:#6f7f9f}
body[data-page="about"]{--nav-solid:#747475}
body[data-page="live"]{--nav-solid:#0b0f15}
body[data-page="espejismos"]{--nav-solid:#2b0c0d}
body[data-page="ignwr"]{--nav-solid:#5c5c5d}
body[data-page="releases"]{--nav-solid:#977467}
body[data-page="discography"]{--nav-solid:#d8d7dc}
body[data-page="contact"]{--nav-solid:#2b313b}
.nav[data-theme="dark"]{color:var(--ink)}
.nav-bar{max-width:1440px;margin:0 auto;height:var(--nav-h);padding:0 var(--pad);display:flex;align-items:center}
.nav-list{list-style:none;margin:0;padding:0;display:flex;justify-content:space-between;align-items:center;width:100%;max-width:1220px;margin-inline:auto}
.nav-list a{display:block;text-decoration:none;text-transform:uppercase;font-size:clamp(11.5px,1vw,14.5px);line-height:1.15;text-align:center;font-weight:400;letter-spacing:.01em;padding:6px 4px}
.nav-list a[aria-current="page"]{font-weight:800}
.nav-list a:hover{opacity:.75}
.nav-brand,.nav-toggle{display:none}

@media (max-width: 900px){
  :root{--nav-h:56px}
  .nav-brand{display:block;font-weight:500;letter-spacing:.06em;text-decoration:none;font-size:15px}
  .nav-toggle{display:block;margin-left:auto;background:none;border:0;color:inherit;font:inherit;font-size:13px;letter-spacing:.08em;text-transform:uppercase;padding:10px 0 10px 16px;cursor:pointer}
  .nav-list{position:fixed;inset:0;z-index:-1;flex-direction:column;justify-content:center;gap:6px;max-width:none;
    background:#6f7a97;color:var(--light);
    padding:calc(env(safe-area-inset-top,0px) + 70px) 24px calc(env(safe-area-inset-bottom,0px) + 40px);
    opacity:0;visibility:hidden;transition:opacity .25s ease, visibility 0s linear .25s}
  .nav.open .nav-list{opacity:1;visibility:visible;transition:opacity .25s ease}
  .nav.open{color:var(--light)}
  .nav-list a{font-size:21px;padding:9px 8px}
  .nav-list a br{display:none}
}


/* ============ SUB-MENU (Live, ESPEJISMOS, Release selection) ============ */
:root{--sub-h:0px}
body.has-sub{--sub-h:34px}
.subnav{display:none}
body.has-sub .subnav{display:block}
.subnav ul{list-style:none;margin:0 auto;padding:0 var(--pad);height:var(--sub-h);max-width:1220px;display:flex;justify-content:center;align-items:center;gap:clamp(22px,3vw,46px);overflow-x:auto;scrollbar-width:none}
.subnav ul::-webkit-scrollbar{display:none}
.subnav a{display:block;white-space:nowrap;text-decoration:none;font-size:clamp(12px,.92vw,13.5px);font-weight:300;letter-spacing:.03em;opacity:.72;padding:4px 0;border-bottom:1px solid transparent;transition:opacity .25s, border-color .25s}
.subnav a:hover{opacity:1}
.subnav a.on{opacity:1;font-weight:400;border-bottom-color:currentColor}
.nav.open .subnav{visibility:hidden}
body.has-sub .nav{min-height:calc(var(--nav-h) + var(--sub-h) + env(safe-area-inset-top,0px))}
html:has(body.has-sub){scroll-padding-top:calc(var(--nav-h) + 34px + env(safe-area-inset-top,0px))}
body.has-sub .inner{padding-top:calc(var(--nav-h) + var(--sub-h) + 48px)}
body.has-sub #espejismos-dialogos .inner,body.has-sub #espejismos-live .inner{padding-top:var(--tg)}
body.has-sub .seq .rel-detail{--F:min(calc(100vh - var(--nav-h) - var(--sub-h) - 120px), 52vw);--F:min(calc(100svh - var(--nav-h) - var(--sub-h) - 120px), 52vw)}
body.has-sub .seq .inner{padding-top:calc(var(--nav-h) + var(--sub-h) + 20px)}
body.has-sub .seq-final{--B:min(calc((100vw - 2 * var(--pad) - 2 * var(--G)) / 2.64), calc(100svh - var(--nav-h) - var(--sub-h) - 150px));top:calc(50% + var(--sub-h) / 2)}
@media (max-width:900px){
  body.has-sub{--sub-h:36px}
  .subnav ul{justify-content:flex-start;padding:0 var(--pad);gap:22px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .subnav a{font-size:12.5px}
  html:has(body.has-sub){scroll-padding-top:calc(var(--nav-h) + 36px + env(safe-area-inset-top,0px))}
  body.has-sub .inner{padding-top:calc(var(--nav-h) + var(--sub-h) + 28px)}
  body.has-sub .seq-frame{max-width:min(88vw, calc(100svh - var(--nav-h) - var(--sub-h) - 330px))}
  .seq .inner{justify-content:center}
  .seq-hint{position:static;transform:none;margin-top:16px;align-self:flex-start}
  .seq-list{font-size:19px;line-height:1.3}
  body.has-sub .seq-final{--s2:min(calc((100vw - 2 * var(--pad) - 10px) / 2), calc((100svh - var(--nav-h) - var(--sub-h) - 160px) / 3))}
}


/* ===== "Keep scrolling" hint on pages with sub-sections (shown by nav.js) ===== */
.page-hint{position:fixed;left:50%;bottom:calc(clamp(18px,3.2vh,40px) + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:40;display:flex;align-items:center;gap:8px;
  font:300 12px/1 var(--font);letter-spacing:.08em;text-transform:uppercase;color:var(--light);background:none;border:0;padding:6px 4px;cursor:pointer;
  opacity:0;visibility:hidden;transition:opacity .5s ease, visibility 0s linear .5s;text-shadow:0 1px 8px rgba(0,0,0,.35)}
.page-hint.show{opacity:.62;visibility:visible;transition:opacity .5s ease}
.page-hint.show:hover{opacity:.95}
.page-hint svg{animation:shbob 2.4s ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.page-hint svg{animation:none}}
@media (max-width:900px){.page-hint{left:var(--pad);transform:none;font-size:11px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* ============ HOME ============ */
#home{--tint:rgba(70,90,135,.10)}
#home .bg{background-image:url(/assets/img/bg-home.webp?v=45d6a358);background-position:center 26%}
#home .inner{justify-content:flex-end;padding-bottom:0}
.home-meta{position:relative;flex:1;min-height:40vh;margin:6vh 0 5vh;font-size:clamp(14px,1.32vw,19px);line-height:1.02;text-transform:uppercase}
.home-meta span{position:absolute;left:var(--x);top:var(--y);white-space:nowrap}
.wordmark{font-weight:300;font-size:15.9vw;line-height:.8;letter-spacing:-.02em;margin:0 0 0 calc(50% - 50vw + 1.3vw);white-space:nowrap;color:rgba(232,232,236,.96)}
#home .wordmark{margin-bottom:clamp(14px,3.2vh,36px)}

/* ============ ABOUT ============ */
#about{--tint:rgba(72,72,74,.38)}
#about .bg{background-image:url(/assets/img/bg-about.webp?v=7a00af60);filter:grayscale(1)}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);max-width:1190px;margin:0 auto;width:100%}
.just{text-align:justify;hyphens:auto;-webkit-hyphens:auto}
#about .cols{padding-bottom:15.5vw}
#about .wordmark{position:absolute;bottom:clamp(14px,3.2vh,36px);left:calc(50% - 50vw + 1.3vw);right:auto;margin:0;color:rgba(220,220,224,.55);pointer-events:none;z-index:0}
#about .cols{position:relative;z-index:1}
/* Desktop: pin About's BRUMARENA to the bottom of the first screen, exactly like Home, whatever the window height */
@media (min-width:901px){#about .wordmark{bottom:auto;top:calc(100vh - 12.72vw - clamp(14px,3.2vh,36px));top:calc(100svh - 12.72vw - clamp(14px,3.2vh,36px))}}


/* ============ BERLIN IN PHOTOS (About page) ============ */
#berlin{--tint:rgba(40,40,42,.55)}
#berlin .bg{background-image:url(/assets/img/bg-about.webp?v=7a00af60);filter:grayscale(1)}
.berlin-title{margin-bottom:clamp(30px,3.6vw,52px)}
.berlin-title span{display:block;text-transform:none;letter-spacing:.03em;font-size:.68em;margin-top:.7em;opacity:.85}
.bgrid{display:flex;flex-direction:column;gap:clamp(10px,1.2vw,18px);max-width:1240px;width:100%;margin:0 auto}
/* justified rows: every photo keeps its shape, each row shares one height */
.brow{display:flex;gap:clamp(10px,1.2vw,18px)}
.bp{flex:var(--a) 1 0;aspect-ratio:var(--a);min-width:0;padding:0;border:0;background:#111;cursor:zoom-in;overflow:hidden;display:block}
.bp img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.bp:hover img{transform:scale(1.02)}
.bcredit{text-align:right;font-size:12px;font-weight:300;letter-spacing:.03em;opacity:.65;margin:14px auto 0;max-width:1240px;width:100%}
.blb{position:fixed;inset:0;z-index:90;background:rgba(10,8,8,.94);display:flex;align-items:center;justify-content:center;padding:4vmin;opacity:0;visibility:hidden;transition:opacity .25s, visibility 0s linear .25s;cursor:zoom-out}
.blb.open{opacity:1;visibility:visible;transition:opacity .25s}
.blb img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:900px){
  .bgrid{gap:8px}
  .bgrid{display:grid;grid-template-columns:1fr 1fr}
  .brow{display:contents}
  .bp{aspect-ratio:2/3}
  .bp.land{grid-column:span 2;aspect-ratio:var(--a)}
  .bp.mwide{grid-column:span 2;aspect-ratio:var(--a)}
  .bcredit{text-align:left}
}

/* ============ LIVE ============ */
#live-1{--tint:linear-gradient(90deg, rgba(60,75,100,.55) 0%, rgba(60,75,100,.35) 45%, rgba(60,75,100,.12) 100%)}
#live-1 .bg{background-image:url(/assets/img/bg-live.webp?v=67781c98);background-position:62% center}
#live-2{--tint:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.25) 50%, rgba(0,0,0,.15) 100%)}
#live-2 .bg{background-image:url(/assets/img/bg-veem.webp?v=421ead2d)}
.live-grid{display:grid;grid-template-columns:minmax(0,500px) 1fr;gap:40px;flex:1;align-items:start;padding-left:clamp(0px,1vw,10px)}
.h{font-size:var(--fs-h);font-weight:700;line-height:1.18;letter-spacing:-.01em;margin:0 0 1.35em}
.live-text{font-size:clamp(15px,1.3vw,19px);line-height:1.3}
.live-text ul{margin:0;padding-left:1.4em}
.live-text li{margin:0}
.big-link{font-weight:700;font-style:italic;font-size:clamp(17px,1.75vw,25px);letter-spacing:-.01em;text-underline-offset:.14em;text-decoration-thickness:2px}
.big-link:hover{opacity:.8}
.links-br{align-self:end;justify-self:end;display:flex;flex-direction:column;gap:1.2em;text-align:left}
#live-2 .links-br{justify-self:start;margin-left:18%;padding-bottom:3vh}


/* ============ NARRATIVES IN BERLIN (Live page) ============ */
#narratives-berlin{--tint:rgba(24,16,12,.80)}
#narratives-berlin .bg{background-image:url(/assets/img/bg-live.webp?v=67781c98);background-position:62% center}
.nb-text{max-width:820px;margin:0 auto clamp(30px,3.6vw,52px);text-align:center}
#narratives-berlin .bgrid{max-width:1180px}
#narratives-berlin .bcredit{max-width:1180px}
/* continuation of Narratives: less space above the text */
body.has-sub #narratives-berlin .inner{padding-top:clamp(36px,4vw,60px)}
@media (max-width:900px){body.has-sub #narratives-berlin .inner{padding-top:28px}}

/* ============ ESPEJISMOS ============ */
.espe{--tint:rgba(52,52,54,.44)}
.espe .bg{background-image:url(/assets/img/bg-espejismos.webp?v=4474a05d);filter:grayscale(1);background-position:center 55%}
#espejismos{--tint:linear-gradient(rgba(125,22,24,.30),rgba(125,22,24,.30)),rgba(14,10,10,.44)}
#espejismos .bg{background-image:url(/assets/img/bg-espejismos-main.webp?v=b68259de);filter:none;background-position:center 40%}
#espejismos .cols{font-size:clamp(15px,1.15vw,16.5px);line-height:1.34}
.espe-foot{display:grid;grid-template-columns:1.1fr .5fr 1fr;gap:32px;align-items:end;max-width:1200px;margin:48px auto 0;width:100%}
.espe-logo{justify-self:end;text-align:center;font-weight:700;font-size:clamp(15px,1.3vw,19px);line-height:1.2}
.espe-logo img{width:min(280px,100%);margin:0 auto 18px}
.espe-logo a{text-underline-offset:.15em}
.espe-circle{width:min(170px,100%);justify-self:center;border-radius:14px}
.vols h3{font-size:clamp(16px,1.35vw,19px);margin:0 0 1em;font-weight:700}
.vols ol{list-style:none;margin:0;padding:0;font-size:clamp(15px,1.35vw,19px);line-height:1.18}
.vols b{font-weight:700}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,2vw,28px);width:100%;margin:auto}
.photo-grid img,.stream-grid img{width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:12px;background:#111}
.stream-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3.4vw,48px) clamp(12px,3.4vw,48px);width:100%;max-width:1160px;margin:auto}
.stream-grid img{aspect-ratio:16/9;border-radius:18px}
.stream-grid a:hover img,.photo-grid img{transition:filter .25s}
.stream-grid a:hover img{filter:brightness(1.12)}

/* small section titles */
.sec-title{text-align:center;text-transform:uppercase;font-weight:300;letter-spacing:.14em;font-size:clamp(17px,1.5vw,22px);line-height:1.25;opacity:.88;margin:0 0 var(--tg,clamp(48px,6.5vw,96px))}
/* title sits centred between the top of the section and the photos */
#espejismos-dialogos,#espejismos-live{--tg:clamp(48px,6.5vw,96px)}
#espejismos-dialogos .inner,#espejismos-live .inner{padding-top:var(--tg)}
#espejismos-dialogos .stream-grid,#espejismos-live .photo-grid{margin:0 auto}
/* ============ IGNWR ============ */
#ignwr{--tint:rgba(80,80,84,.42)}
#ignwr .bg{background-image:url(/assets/img/bg-ignwr.webp?v=4c633598);filter:grayscale(1);background-position:center 40%}
#ignwr .cols{max-width:1240px;gap:clamp(40px,12vw,170px);font-size:clamp(15px,1.4vw,20px);line-height:1.4}
.ignwr-foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:auto;padding-top:48px;max-width:1300px;width:100%;margin-inline:auto}
.ignwr-logo{width:clamp(140px,13.5vw,196px)}

/* ============ RELEASES ============ */
.rel{--grain:.28}
.rel .bg{background-image:url(/assets/img/bg-releases.webp?v=4aa04e20);background-position:center 55%}
/* Fixed background on this page: photo + grain stay still, content scrolls over it */
.rel{clip-path:inset(0)}
.rel .bg{position:fixed;inset:0;height:100vh;height:100lvh}
.rel::after{position:fixed;inset:0}
#releases,#release-1{--tint:rgba(118,70,52,.74)}
#release-2{--tint:rgba(52,70,50,.74)}
#release-3{--tint:rgba(222,212,190,.82)}
.rel-intro{font-style:italic;font-size:clamp(16px,1.6vw,23px);line-height:1.38;max-width:1300px;margin:0 0 clamp(36px,4.5vw,64px)}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,4.6vw,66px);max-width:1300px;width:100%}
.rel-grid a{text-decoration:none;text-align:center;display:block}
.rel-grid img{width:100%;aspect-ratio:1;object-fit:cover;box-shadow:0 12px 40px rgba(0,0,0,.18);transition:transform .35s ease}
.rel-grid a:hover img{transform:translateY(-4px)}
.rel-grid span{display:block;margin-top:.9em;font-weight:700;font-size:clamp(24px,2.6vw,38px)}
.rel-detail{display:grid;grid-template-columns:minmax(0,446px) 1fr;gap:clamp(28px,3.4vw,50px);align-items:start;max-width:1400px;width:100%;margin:auto;margin-left:calc(var(--pad) * -1 + clamp(16px,2.6vw,37px))}
.rel-detail .cover{width:100%;aspect-ratio:1;object-fit:cover}
.rel-detail .h{margin-bottom:1.1em}
.rel-detail .h small{display:block;font-size:inherit}
.rel-body{font-size:clamp(15px,1.24vw,18px);line-height:1.32;max-width:870px}
.rel-links{display:flex;gap:clamp(24px,4vw,60px);justify-content:flex-end;margin-top:clamp(36px,5vw,72px);flex-wrap:wrap}


/* ===== #1 dramática/insostenible: scroll sequence ===== */
#release-1{--tint:transparent;display:block;overflow:visible}
.seq-track{height:calc(100vh * 5.6);height:calc(100svh * 5.6)}
.seq-mtext{display:none}
.seq-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;isolation:isolate}
/* #1 keeps its own background layers inside the pinned screen (avoids a Safari bug with clipped fixed layers) */
#release-1{clip-path:none}
#release-1 .bg{position:absolute;inset:0;height:auto}
#release-1::after{display:none}
#release-1::before{background:rgba(118,70,52,.74)}
.seq-bg,.seq-tint,.seq-grain{position:absolute;inset:0;pointer-events:none}
.seq-bg{z-index:-3;background:url(/assets/img/bg-releases.webp?v=4aa04e20) center 55%/cover no-repeat}
.seq-tint{z-index:-2;background-color:rgba(118,70,52,.74);transition:background-color .9s ease}
.seq-grain{z-index:-1;background:url(/assets/img/grain.webp?v=3cf7148b) repeat;background-size:220px;mix-blend-mode:overlay;opacity:.28}
/* on computers the photo stays perfectly still, matching the rest of the page */
@media (min-width:901px){#release-1 .bg,.seq-bg{background-attachment:fixed;background-size:cover;background-position:center 55%}}
.seq .inner{justify-content:center;position:relative}
.seq .rel-detail{--F:min(calc(100vh - var(--nav-h) - 130px), 52vw);--F:min(calc(100svh - var(--nav-h) - 130px), 52vw);grid-template-columns:var(--F) minmax(0,1fr);align-items:center;margin:auto 0;margin-left:calc(var(--pad) * -1 + clamp(16px,2.6vw,37px));transition:opacity .5s ease}
.seq-frame{position:relative;display:block;width:100%;aspect-ratio:1;padding:0;border:0;background:#111;cursor:zoom-in}
.seq-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .55s ease}
.seq-img.on{opacity:1}
.seq-right{position:relative}
.seq-text{transition:opacity .45s ease, transform .45s ease}
.seq-text .rel-body{font-size:clamp(14px,1.02vw,16px);line-height:1.3}
.seq-text .h{font-size:clamp(20px,1.8vw,28px);margin-bottom:.9em}
.seq.step .seq-text,.seq.final .seq-text{opacity:0;transform:translateY(-12px);pointer-events:none}
.seq-cap{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .45s ease .1s;pointer-events:none}
.seq.step .seq-cap{opacity:1}
.seq-count{font-size:clamp(14px,1.1vw,16px);opacity:.75;margin:0 0 1.4em;letter-spacing:.04em}
.seq-list{list-style:none;margin:0;padding:0;font-size:clamp(22px,2.6vw,38px);font-weight:300;line-height:1.35}
.seq-list li{opacity:.32;transition:opacity .35s}
.seq-list li:hover{opacity:.7}
.seq-go{all:unset;cursor:pointer;display:inline-block}
.seq-go:focus-visible{outline:2px solid currentColor;outline-offset:4px;border-radius:2px}
.seq.step .seq-cap{pointer-events:auto}
.seq-list li.on{opacity:1}
.seq-list .n{display:inline-block;min-width:3.3em;font-size:.5em;letter-spacing:.06em;vertical-align:middle}
.seq.final .rel-detail{opacity:0;pointer-events:none}
/* final view: FRONT | tracks 2x2 | BACK */
.seq-final{--g:12px;--G:clamp(20px,2.8vw,40px);
  --B:min(calc((100vw - 2 * var(--pad) - 2 * var(--G)) / 2.64), calc(100svh - var(--nav-h) - 170px));
  --s2:calc((var(--B) - var(--g)) / 2);
  --s1:calc(var(--B) * .82);
  position:absolute;left:50%;top:50%;transform:translate(-50%,-52%);display:flex;align-items:center;gap:var(--G);opacity:0;pointer-events:none;transition:opacity .6s ease}
.seq.final .seq-final{opacity:1;pointer-events:auto}
.sf-covers{display:contents}
.sf-covers .seq-tile{width:var(--s1);height:var(--s1)}
.sf-covers .seq-tile:first-child{order:1}
.sf-tracks{order:2;display:grid;grid-template-columns:var(--s2) var(--s2);grid-template-rows:var(--s2) var(--s2);gap:var(--g)}
.sf-covers .seq-tile:last-child{order:3}

/* subtle scroll hint */
.seq-hint{position:absolute;left:50%;bottom:clamp(18px,3.2vh,40px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;font-size:12px;font-weight:300;letter-spacing:.08em;text-transform:uppercase;opacity:.62;transition:opacity .5s ease;pointer-events:none;z-index:2}
.seq-hint .sh-b{display:none}
.seq.step .seq-hint .sh-a{display:none}
.seq.step .seq-hint .sh-b{display:inline}
.seq.final .seq-hint .sh-a{display:none}
.seq.final .seq-hint .sh-b{display:inline}
.seq-hint svg{animation:shbob 2.4s ease-in-out infinite}
@keyframes shbob{0%,100%{transform:translateY(-2px);opacity:.75}50%{transform:translateY(3px);opacity:1}}
@media (prefers-reduced-motion:reduce){.seq-hint svg{animation:none}}
/* Spotify / Bandcamp links stay visible through the whole sequence */
.seq-links{position:absolute;right:var(--pad);bottom:clamp(18px,3.2vh,40px);z-index:2}
.seq-links .rel-links{margin:0}
.seq-links .big-link{transition:font-size .4s ease, font-weight .4s ease, opacity .4s ease}
.seq.step .seq-links .big-link,.seq.final .seq-links .big-link{font-size:clamp(13px,1.05vw,15px);font-weight:400;opacity:.9}
.seq.step .seq-links .rel-links,.seq.final .seq-links .rel-links{gap:clamp(18px,2.4vw,34px)}
.seq-tile{border:0;padding:0;background:#111;cursor:zoom-in;display:block}
.seq-tile img{width:100%;height:100%;object-fit:cover;transition:transform .35s}
.seq-tile:hover img{transform:scale(1.015)}
.seq-lb{position:fixed;inset:0;z-index:90;background:rgba(10,8,8,.92);display:flex;align-items:center;justify-content:center;padding:4vmin;opacity:0;visibility:hidden;transition:opacity .25s, visibility 0s linear .25s;cursor:zoom-out}
.seq-lb.open{opacity:1;visibility:visible;transition:opacity .25s}
.seq-lb img{max-width:100%;max-height:100%;object-fit:contain}
@media (max-width:900px){
  .seq .rel-detail{grid-template-columns:1fr;gap:18px;margin-left:0}
  .seq-frame{max-width:min(88vw, calc(100svh - var(--nav-h) - 300px))}
  .seq-mtext{display:block;padding-bottom:8px}
  .seq-mtext .h small{display:block;font-size:inherit}
  .seq-text{display:none}
  .seq-cap{position:static;opacity:1;justify-content:flex-start}
  .seq.final .seq-cap{opacity:0}
  .seq-track{height:calc(100svh * 4.6)}
  .seq-list{font-size:21px}
  .seq-final{--g:10px;--s2:min(calc((100vw - 2 * var(--pad) - 10px) / 2), calc((100svh - var(--nav-h) - 160px) / 3));--s1:var(--s2);flex-direction:column;gap:10px;transform:translate(-50%,-55%)}
  .sf-covers{display:grid;grid-template-columns:var(--s2) var(--s2);gap:10px;order:0}
  .sf-covers .seq-tile{width:var(--s2);height:var(--s2)}
  .sf-tracks{order:1}
  .seq-links{left:var(--pad);right:var(--pad);bottom:calc(18px + env(safe-area-inset-bottom,0px))}
  .seq-hint{left:var(--pad);transform:none;bottom:calc(50px + env(safe-area-inset-bottom,0px));font-size:11px}
  .seq.final .seq-hint{position:absolute;margin:0}
  .seq-links .rel-links{justify-content:flex-end;gap:22px}
  .seq-links .big-link,.seq.step .seq-links .big-link,.seq.final .seq-links .big-link{font-size:13px}
}


/* ===== Release selection: every view fits the screen when reached from the overview / sub-bar ===== */
/* land with the section top at the very top: the inner spacing already makes room for both bars */
.rel{scroll-margin-top:calc(-1 * (var(--nav-h) + var(--sub-h)))}
@media (min-width:901px){
  /* centred content, equal side margins */
  .rel-detail,.seq .rel-detail{margin-left:auto;margin-right:auto;max-width:1240px}
  .seq .rel-detail{margin-top:auto;margin-bottom:auto}
  /* #2 and #3: one screen tall, content centred and sized to fit */
  #release-2,#release-3{height:100vh;height:100svh;min-height:560px}
  #release-2 .inner,#release-3 .inner{justify-content:center;padding-top:calc(var(--nav-h) + var(--sub-h) + 24px);padding-bottom:28px}
  #release-2 .rel-detail,#release-3 .rel-detail{--C:min(calc(100svh - var(--nav-h) - var(--sub-h) - 120px), 44vw);grid-template-columns:var(--C) minmax(0,1fr);align-items:center;margin-top:0;margin-bottom:0}
  #release-2 .rel-body,#release-3 .rel-body{font-size:clamp(14px,1.02vw,16px);line-height:1.3}
  #release-2 .h,#release-3 .h{font-size:clamp(20px,1.8vw,28px);margin-bottom:.9em}
  #release-2 .rel-links,#release-3 .rel-links{margin-top:clamp(18px,3vh,40px)}
  /* overview fits too */
  #releases{height:100vh;height:100svh;min-height:560px}
  #releases .inner{padding-top:calc(var(--nav-h) + var(--sub-h) + 24px);padding-bottom:28px}
  #releases .rel-grid{max-width:min(1300px, calc((100svh - var(--nav-h) - var(--sub-h) - 260px) * 3 + 2 * clamp(20px,4.6vw,66px)))}
}



/* ============ DISCOGRAPHY ============ */
#discography{--tint:#d8d7dc;--grain:.45}
.disco{--c:clamp(130px,14.5vw,230px);display:grid;grid-template-columns:1fr 1fr;gap:clamp(26px,2.8vw,40px) clamp(32px,4.6vw,70px);max-width:1300px;width:100%;margin:0 auto}
.disco article{display:grid;grid-template-columns:var(--c) 1fr;gap:clamp(14px,1.5vw,22px);align-items:start;font-size:clamp(11.5px,calc(var(--c) * .062),14.5px);line-height:1.34}
/* text block never taller than its cover */
.disco article>div{height:var(--c);display:flex;flex-direction:column;overflow:hidden}
.disco article>div p{margin:0 0 .6em}
.disco article>div p:last-child{margin:auto 0 0}
/* same gap above 'Artwork by' as between genre and credits */
.disco article>div p.art{margin:.15em 0 .6em}
.disco img{width:100%;aspect-ratio:1;object-fit:cover;transition:transform .3s}
.disco a:hover img{transform:scale(1.03)}
.disco h3{font-size:inherit;font-weight:400;margin:0}
.disco .genre{font-style:italic;margin:0 0 .75em!important}
.disco-note{text-align:center;font-style:italic;font-weight:300;letter-spacing:.02em;margin:0 0 clamp(28px,3vw,44px);font-size:clamp(13px,1.05vw,15px)}

@media (max-width:385px){.disco article{grid-template-columns:1fr}.disco article>a{width:62vw}.disco article>div{height:auto}}
@media (min-width:901px) and (max-width:1060px){.disco{grid-template-columns:1fr;--c:min(28vw,220px);max-width:760px}}
/* ============ CONTACT ============ */
#contact{--tint:rgba(62,74,98,.52)}
#contact .bg{background-image:url(/assets/img/bg-contact.webp?v=967ba68c);background-position:54% 45%}
#contact .inner{justify-content:flex-end;padding-bottom:clamp(48px,8vh,90px)}
.contact{font-size:clamp(16px,1.4vw,20px);line-height:1.45}
.contact ul{margin:.1em 0 1.4em;padding-left:1.45em}
.contact .em{font-weight:700;font-style:italic;text-underline-offset:.15em}
.contact p{margin-bottom:1.6em}
footer.copy{font-size:12px;opacity:.65;margin-top:2em}

/* ============ RESPONSIVE ============ */
@media (max-width: 900px){
  .inner{padding-top:calc(var(--nav-h) + 36px);padding-bottom:56px}
  .sec{min-height:auto}
  #home,#contact{min-height:100vh;min-height:100svh}
  .cols,.live-grid,.espe-foot,.rel-detail{grid-template-columns:1fr}
  .just{text-align:left;hyphens:manual}
  .home-meta{margin:5vh 0 4vh;min-height:46vh}
  .home-meta span{left:var(--mx);top:var(--my)}
  #home .bg{background-position:center 30%}
  #about .cols{padding-bottom:24vw}
  .links-br,#live-2 .links-br{justify-self:start;margin:12px 0 0;padding:0}
  .espe-foot{gap:36px;justify-items:start}
  .espe-logo{justify-self:start;text-align:left}
  .espe-logo img{margin:0 0 16px}
  .espe-circle{justify-self:start;width:130px}
  .photo-grid{grid-template-columns:1fr 1fr}
  .stream-grid{grid-template-columns:1fr}
  .ignwr-foot{flex-direction:column;align-items:flex-start;gap:28px}
  .rel-grid{gap:14px}
  .rel-grid span{font-size:20px}
  .rel-detail{margin-left:0}
  .rel-detail .cover{max-width:420px}
  .rel-links{justify-content:flex-start}
  .disco{grid-template-columns:1fr;--c:min(30vw,210px)}
  .live-text{font-size:16px}
  #espejismos-live .inner{padding-bottom:40px}
  #espejismos-dialogos,#espejismos-live{--tg:34px}
  #espejismos-dialogos .inner{padding-bottom:40px}
  .photo-grid,.stream-grid{margin:0}
  #espejismos .inner{padding-bottom:40px !important}
}
@media (max-width: 520px){
  .photo-grid img,.stream-grid img{border-radius:10px}
  .disco{--c:45vw}
  .disco article{font-size:10.5px;gap:11px;line-height:1.27}
  .disco article>div p{margin-bottom:.45em}
  .disco article>div p.art{margin-top:.05em}
  .disco .genre{margin-bottom:.5em!important}
}

/* Lighter background images on phones and small tablets */
@media (max-width:900px){
#home .bg{background-image:url(/assets/img/bg-home-800.webp?v=5a1525fd)}
#about .bg{background-image:url(/assets/img/bg-about-800.webp?v=acefc7b0)}
#berlin .bg{background-image:url(/assets/img/bg-about-800.webp?v=acefc7b0)}
#live-1 .bg{background-image:url(/assets/img/bg-live-800.webp?v=dcbbe60c)}
#live-2 .bg{background-image:url(/assets/img/bg-veem-800.webp?v=42a09f8b)}
#narratives-berlin .bg{background-image:url(/assets/img/bg-live-800.webp?v=dcbbe60c)}
.espe .bg{background-image:url(/assets/img/bg-espejismos-800.webp?v=7912e181)}
#espejismos .bg{background-image:url(/assets/img/bg-espejismos-main-800.webp?v=34c5f014)}
#ignwr .bg{background-image:url(/assets/img/bg-ignwr-800.webp?v=42453deb)}
.rel .bg{background-image:url(/assets/img/bg-releases-800.webp?v=6d953284)}
.seq-bg{background-image:url(/assets/img/bg-releases-800.webp?v=6d953284)}
#contact .bg{background-image:url(/assets/img/bg-contact-800.webp?v=067996d1)}
}