/* Layout: one long scrolling "mission log". Full-bleed sepia artwork sections alternate with
   dark starfield panels. Every section maps 1:1 to an Elementor container for later editing. */
:root{
  --void:#0d0b09;          /* warm near-black, the space between sections */
  --hull:#17140f;          /* raised panels */
  --sepia:#d8c3a0;         /* primary text on dark, matches the cover art */
  --dust:#8f8170;          /* secondary text, captions */
  --amber:#e7b462;         /* the one accent: signal light */
  --line:rgba(216,195,160,.16);
  --f-display:"Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
  --f-body:"Spectral",Georgia,"Times New Roman",serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --wrap:1180px;
  --gutter:clamp(16px,4vw,40px);
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--void);color:var(--sepia);font:300 1.125rem/1.7 var(--f-body);-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:2px solid var(--amber);outline-offset:3px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gutter)}
.eyebrow{font:500 .75rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--amber);display:flex;gap:.8em;align-items:center}
.eyebrow::before{content:"";width:28px;height:1px;background:currentColor}
h1,h2,h3{font-family:var(--f-display);text-transform:uppercase;letter-spacing:.06em;line-height:.95;margin:0;text-wrap:balance;color:#efe2c8}
h2,h1.h2{font-size:clamp(2.6rem,6vw,4.6rem);font-weight:800}
h3{font-size:1.5rem;font-weight:700;letter-spacing:.08em}
.btn{display:inline-flex;align-items:center;gap:.6em;font:500 .8rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;text-decoration:none;padding:1em 1.6em;border:1px solid var(--sepia);color:var(--sepia);transition:background .25s,color .25s}
.btn:hover{background:var(--sepia);color:var(--void)}
.btn.primary{background:var(--amber);border-color:var(--amber);color:var(--void)}
.btn.primary:hover{background:#f3cd8a}
section{padding-block:clamp(72px,10vw,128px);position:relative;scroll-margin-top:72px}
html,body{overflow-x:clip}
.sec-head{display:grid;gap:18px;margin-bottom:clamp(36px,5vw,56px)}
.sec-head p{max-width:58ch;margin:0;color:var(--dust)}

/* NAV */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;padding-top:env(safe-area-inset-top,0px);transition:background .3s}
.nav.solid{background:rgba(13,11,9,.88);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:72px;gap:24px}
.nav .mark{display:flex;align-items:center;gap:12px;text-decoration:none;font:700 1.1rem/1 var(--f-display);letter-spacing:.18em;text-transform:uppercase}
.nav .mark img{width:38px;height:38px}
.nav ul{list-style:none;display:flex;gap:28px;margin:0;padding:0;font:500 .74rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase}
.nav ul a{text-decoration:none;color:#cbb895;padding-block:6px;border-bottom:1px solid transparent;transition:color .2s,border-color .2s}
.nav ul a:hover{color:var(--sepia)}
.nav ul a.active{color:var(--amber);border-bottom-color:var(--amber)}
.nav-end{display:flex;align-items:center;gap:12px}
.menu-btn{display:none;width:44px;height:44px;background:none;border:1px solid var(--line);cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:6px}
.menu-btn span{width:18px;height:1.5px;background:var(--sepia);transition:transform .25s}
.menu-open .menu-btn span:first-child{transform:translateY(3.75px) rotate(45deg)}
.menu-open .menu-btn span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
@media(max-width:1020px){
  .menu-btn{display:flex}
  .nav ul{position:fixed;inset:72px 0 auto 0;margin-top:env(safe-area-inset-top,0px);flex-direction:column;gap:0;background:rgba(13,11,9,.97);border-bottom:1px solid var(--line);padding:8px var(--gutter) 20px;display:none}
  .nav ul a{display:block;padding:14px 0;font-size:.85rem}
  .menu-open .nav ul{display:flex}
  .menu-open .nav{background:rgba(13,11,9,.97)}
}
@media(max-width:480px){.nav-bc{display:none}.nav .mark{font-size:1rem;letter-spacing:.14em}}

/* HERO */
.hero{position:relative;min-height:min(100svh,980px);display:grid;align-items:end;padding:0;overflow:hidden;isolation:isolate}
.hero .art{position:absolute;inset:0 0 18% 0;background:url(../images/hero-astronaut.jpg) center 30%/cover;z-index:-3;transform:scale(1.04);animation:drift 30s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(180deg,rgba(13,11,9,.5) 0%,rgba(13,11,9,0) 22%,rgba(13,11,9,.15) 48%,rgba(13,11,9,.82) 72%,var(--void) 100%)}
.hero canvas{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.hero .wrap{width:100%;padding-block:0 clamp(40px,6vw,72px);display:grid;gap:22px}
.hero .split{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:24px}
.hero h1{font-size:clamp(3.2rem,9.5vw,8.6rem);font-weight:800;letter-spacing:.05em;line-height:.85;color:#f3e7cf;text-shadow:0 2px 40px rgba(0,0,0,.6)}
.hero h1 span{color:var(--amber)}
.hero .lede{font-size:clamp(1.15rem,2vw,1.45rem);font-style:italic;max-width:34ch;margin:0}
.hero .row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.telemetry{display:flex;flex-wrap:wrap;gap:8px 28px;font:400 .72rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust);border-top:1px solid var(--line);padding-top:18px}
.telemetry b{color:var(--sepia);font-weight:500}
@keyframes drift{to{transform:scale(1.1) translate(-1%,-1%)}}

/* PROMO */
.promo{background:var(--void);padding-top:clamp(40px,6vw,72px)}
.promo-grid{display:grid;gap:24px}
.feature{position:relative;display:grid;grid-template-columns:1.5fr 1fr;align-items:stretch;background:var(--hull);border:1px solid var(--line);min-width:0}
.feature .cover{aspect-ratio:16/9;background:#000 center/cover}
.feature .body{padding:clamp(24px,3vw,40px);display:grid;align-content:space-between;gap:20px;min-width:0}
.feature .tag{font:500 .7rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--void);background:var(--amber);padding:.5em .8em;justify-self:start}
.feature h3{font-size:clamp(2rem,3.4vw,3rem);font-weight:800}
.feature p{margin:0;color:var(--dust)}
.stack{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.card{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;padding:20px;border:1px solid var(--line);text-decoration:none;transition:border-color .25s,background .25s}
.card:hover{border-color:var(--amber);background:var(--hull)}
.card img{aspect-ratio:1;object-fit:cover;width:120px}
.card .k{font:500 .68rem/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:8px}
.card h3{font-size:1.4rem}
.card p{margin:.4em 0 0;font-size:.95rem;color:var(--dust);line-height:1.5}
@media(max-width:760px){.stack{grid-template-columns:1fr}}
@media(max-width:900px){.feature{grid-template-columns:1fr}}
@media(max-width:620px){.card{grid-template-columns:84px 1fr}.card img{width:84px}}

/* MUSIC */
.music{background:transparent}
.music-grid{display:grid;grid-template-columns:minmax(0,420px) 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.player{border:1px solid var(--line);background:var(--void);container-type:inline-size;position:sticky;top:96px}
.player iframe{border:0;width:100%;height:120px;display:block}
.np-art,.track .thumb{position:relative;overflow:hidden;background:#000}
.np-art{aspect-ratio:16/10}
/* whole cover shown (contain) over a blurred, darkened fill of itself, so no artwork gets cropped */
.np-art::before,.track .thumb::before{content:"";position:absolute;inset:-12%;background:var(--art) center/cover;filter:blur(14px) brightness(.45)}
.np-art::after,.track .thumb::after{content:"";position:absolute;inset:0;background:var(--art) center/contain no-repeat}
.tracks{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:18px}
.track{all:unset;cursor:pointer;display:grid;gap:10px;align-content:start}
.track:focus-visible{outline:2px solid var(--amber)}
.track.on .thumb{filter:none;border-color:var(--amber)}
.track.on b{color:var(--amber)}
.track .thumb{aspect-ratio:16/10;filter:sepia(.25) saturate(.85);transition:filter .3s,transform .3s;border:1px solid var(--line)}
.track:hover .thumb{filter:none;transform:translateY(-3px)}
.track b{font:700 1.05rem/1.1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.track small{font:400 .7rem/1 var(--f-mono);letter-spacing:.14em;color:var(--dust);text-transform:uppercase}
@media(max-width:900px){.music-grid{grid-template-columns:1fr}.player{position:static;max-width:460px}}

/* VIDEO */
.video{background:transparent}
.screen{aspect-ratio:16/9;width:100%;border:1px solid var(--line);background:#000}
.screen iframe{width:100%;height:100%;border:0;display:block}
.vid-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:20px}
.vid{all:unset;cursor:pointer;display:grid;gap:8px}
.vid .t{aspect-ratio:16/9;background:#000 center/cover;border:1px solid var(--line);position:relative}
.vid .t::after{content:"";position:absolute;inset:0;margin:auto;width:0;height:0;border-left:16px solid var(--sepia);border-block:10px solid transparent;opacity:.85}
.vid.on .t{border-color:var(--amber)}
.vid span{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--dust)}
.vid:focus-visible{outline:2px solid var(--amber)}

/* STORY */
.story{background:linear-gradient(180deg,var(--void),#14110c)}
.story-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,6vw,88px);align-items:start}
.story .polaroid{position:sticky;top:120px}
.polaroid{background:#e9dcc3;padding:14px 14px 56px;transform:rotate(-2.2deg);box-shadow:0 30px 60px rgba(0,0,0,.55);position:relative}
.polaroid img{filter:sepia(.35) contrast(1.05)}
.polaroid figcaption{position:absolute;bottom:16px;left:0;right:0;text-align:center;font:italic 400 1.05rem var(--f-body);color:#3b2f22}
.story .text{display:grid;gap:22px;min-width:0}
.story .text p{margin:0;max-width:60ch}
.story .text p.big{font-size:1.45rem;line-height:1.5;color:#efe2c8}
.pod{display:grid;gap:10px;border-left:2px solid var(--amber);padding:6px 0 6px 20px}
.pod iframe{border:0;width:100%;height:120px}
.lineup{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.lineup div{background:var(--void);padding:16px}
.lineup b{display:block;font:700 1.15rem/1.1 var(--f-display);letter-spacing:.08em;text-transform:uppercase}
.lineup span{font:400 .7rem/1 var(--f-mono);letter-spacing:.16em;color:var(--dust);text-transform:uppercase}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}.story .polaroid{position:static;max-width:440px}}

/* PORTS OF CALL (venues) */
.ports{background:linear-gradient(180deg,#14110c 0%,#14110c 75%,var(--void) 100%);padding-block:clamp(56px,8vw,96px)}
.port-strip{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(220px,1fr);gap:14px;overflow-x:auto;padding-bottom:12px;scroll-snap-type:x mandatory}
.port{scroll-snap-align:start;margin:0;display:grid;gap:10px}
.port img{aspect-ratio:4/5;object-fit:cover;width:100%;filter:grayscale(1) sepia(.4) contrast(1.05);transition:filter .4s}
.port:hover img{filter:none}
.port figcaption{font:500 .72rem/1.3 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
.port figcaption b{display:block;color:var(--sepia);font:700 1.15rem/1.1 var(--f-display);letter-spacing:.08em}

/* LIVE GALLERY */
.gallery{columns:3 280px;column-gap:14px}
.gallery img{width:100%;margin-bottom:14px;break-inside:avoid;border:1px solid var(--line)}

/* FACEBOOK */
.social{background:var(--void)}
.social-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:start}
.fb-frame{border:1px solid var(--line);background:#fff;width:100%;max-width:500px}
.fb-frame iframe{display:block;border:0;width:100%;height:560px}
.links{display:grid;gap:12px}
.link{display:flex;justify-content:space-between;align-items:center;gap:16px;text-decoration:none;padding:20px 22px;border:1px solid var(--line);font:700 1.4rem/1 var(--f-display);letter-spacing:.1em;text-transform:uppercase;transition:border-color .25s,padding .25s}
.link small{font:400 .72rem/1 var(--f-mono);letter-spacing:.14em;color:var(--dust)}
.link:hover{border-color:var(--amber);padding-left:30px}
@media(max-width:900px){.social-grid{grid-template-columns:1fr}}

/* CONTACT */
.contact{background:linear-gradient(180deg,var(--void) 0%,rgba(13,11,9,.72) 24%,rgba(13,11,9,.68) 60%,rgba(13,11,9,.85) 100%),url(../images/jupiter-sea.jpg) center/cover}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(28px,5vw,72px)}
form{display:grid;grid-template-columns:1fr 1fr;gap:16px}
form .full{grid-column:1/-1}
label{display:grid;gap:8px;font:500 .7rem/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;color:var(--dust)}
input,select,textarea{font:400 1rem/1.4 var(--f-body);color:var(--sepia);background:rgba(23,20,15,.8);border:1px solid var(--line);padding:14px;border-radius:0}
input:focus,select:focus,textarea:focus{border-color:var(--amber);outline:none}
textarea{min-height:150px;resize:vertical}
.direct{display:grid;gap:22px;align-content:start}
.direct p{margin:0;color:var(--sepia)}
@media(max-width:900px){.contact-grid{grid-template-columns:1fr}}
@media(max-width:560px){form{grid-template-columns:1fr}}

footer{padding-block:48px;border-top:1px solid var(--line);font:400 .72rem/1.6 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust)}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:20px;align-items:center}
footer img{width:44px;opacity:.8}

/* LIGHTBOX */
[data-full]{cursor:zoom-in;transition:opacity .25s,border-color .25s}
[data-full]:hover{opacity:.85;border-color:var(--amber)}
.lb{border:0;padding:0;margin:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;background:transparent;color:var(--sepia);overflow:hidden}
.lb::backdrop{background:rgba(8,7,5,.94);backdrop-filter:blur(4px)}
.lb[open]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px}
.lb figure{margin:0;display:flex;align-items:center;justify-content:center}
/* 80px each side leaves room for the arrows; 150px of height covers close button + caption */
.lb img{display:block;width:auto;height:auto;max-width:calc(100vw - 160px);max-height:calc(100dvh - 150px);object-fit:contain;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.6);animation:lbIn .25s ease}
.lb .bar{display:flex;align-items:center;justify-content:center;gap:20px;max-width:calc(100vw - 32px);font:400 .72rem/1.4 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust);text-align:center}
.lb .bar b{color:var(--amber);font-weight:500}
.lb button{position:fixed;background:rgba(13,11,9,.7);border:1px solid var(--line);color:var(--sepia);width:48px;height:48px;cursor:pointer;font:400 1.4rem/1 var(--f-mono);display:grid;place-items:center;transition:border-color .2s,color .2s;z-index:1}
.lb button:hover{border-color:var(--amber);color:var(--amber)}
.lb .close{top:calc(12px + env(safe-area-inset-top,0px));right:16px}
.lb .prev{left:16px;top:50%;translate:0 -50%}
.lb .next{right:16px;top:50%;translate:0 -50%}
@media(max-width:600px){
  .lb img{max-width:calc(100vw - 24px);max-height:calc(100dvh - 210px)}
  .lb .prev,.lb .next{top:auto;bottom:calc(16px + env(safe-area-inset-bottom,0px));translate:none}
  .lb .prev{left:calc(50% - 60px)}.lb .next{right:calc(50% - 60px)}
}
@keyframes lbIn{from{opacity:0;transform:scale(.97)}}
@media(prefers-reduced-motion:reduce){.lb img{animation:none}}

@media(max-width:700px){.hero .art{background-position:36% 30%}}
@media(prefers-reduced-motion:reduce){.hero .art{animation:none}html{scroll-behavior:auto}}

/* MORE PHOTOS + FORM STATES */
.more-photos{display:flex;justify-content:center;margin-top:36px}
.trap{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-end{display:flex;flex-wrap:wrap;align-items:center;gap:16px}
.form-status{margin:0;font-size:.95rem;color:var(--dust);min-width:0}
.form-status[data-kind="ok"]{color:var(--amber)}
.form-status[data-kind="error"]{color:#e58a6f}
button:disabled{opacity:.55;cursor:wait}
.foot-links a{color:var(--dust);text-decoration:none}.foot-links a:hover{color:var(--amber)}
.gallery img,.port img{height:auto}

/* GALLERY PAGE */
.archive{padding-top:calc(72px + clamp(40px,6vw,72px))}
.back{display:inline-block;margin-bottom:28px;font:500 .74rem/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dust);text-decoration:none}
.back:hover{color:var(--amber)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:32px}
.chip{font:500 .72rem/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dust);background:none;border:1px solid var(--line);padding:.85em 1.1em;cursor:pointer;transition:color .2s,border-color .2s,background .2s}
.chip span{color:var(--dust);opacity:.7;margin-left:.4em}
.chip:hover{color:var(--sepia);border-color:var(--sepia)}
.chip.on{background:var(--amber);border-color:var(--amber);color:var(--void)}
.chip.on span{color:var(--void)}
.archive-grid{columns:4 240px}
@media(max-width:600px){.archive-grid{columns:2;column-gap:8px}.archive-grid img{margin-bottom:8px}}

/* INTRO LOADER (assets/loader.js) */
.ar-loader{display:none}
.ar-loading .ar-loader{display:grid;position:fixed;inset:0;z-index:100;place-items:center;pointer-events:all}
.ar-loading body{overflow:hidden}
.ar-loader .half{position:absolute;left:0;right:0;height:50.5%;background:var(--void);transition:transform 1s cubic-bezier(.77,0,.18,1)}
.ar-loader .half.top{top:0;border-bottom:1px solid transparent}
.ar-loader .half.bot{bottom:0}
.ar-loader .core{position:relative;display:grid;justify-items:center;gap:26px;transition:opacity .45s ease,transform .6s ease}
.ar-loader .emblem{position:relative;width:clamp(96px,18vw,140px);aspect-ratio:1}
.ar-loader .emblem img{width:100%;height:100%;animation:arFloat 3.2s ease-in-out infinite}
.ar-loader .emblem::before{content:"";position:absolute;inset:-22%;border-radius:50%;
  background:radial-gradient(circle,rgba(231,180,98,.22) 0%,rgba(231,180,98,0) 65%);animation:arGlow 2.4s ease-in-out infinite}
.ar-loader .meter{width:min(240px,60vw);display:grid;gap:12px}
.ar-loader .track{height:1px;background:var(--line);overflow:hidden}
.ar-loader .track i{display:block;height:100%;background:var(--amber);transform:scaleX(0);transform-origin:left}
.ar-loader .read{display:flex;justify-content:space-between;font:500 .68rem/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--dust)}
.ar-loader .read b{color:var(--amber);font-weight:500;font-variant-numeric:tabular-nums}
.ar-reveal .ar-loader{pointer-events:none}
.ar-reveal .ar-loader .core{opacity:0;transform:scale(1.08)}
.ar-reveal .ar-loader .half.top{transform:translateY(-100%);transition-delay:.25s}
.ar-reveal .ar-loader .half.bot{transform:translateY(100%);transition-delay:.25s}
@keyframes arFloat{50%{transform:translateY(-6px)}}
@keyframes arGlow{50%{opacity:.45;transform:scale(1.12)}}
@media(prefers-reduced-motion:reduce){
  .ar-loader .emblem img,.ar-loader .emblem::before{animation:none}
  .ar-loader .half{transition:opacity .4s ease}
  .ar-reveal .ar-loader .half.top,.ar-reveal .ar-loader .half.bot{transform:none;opacity:0}
}
/* venue strip: one full row on desktop; on smaller screens it scrolls, with a fade so the edge reads as "more", not "cut off" */
@media(min-width:1000px){
  .port-strip{grid-auto-flow:row;grid-template-columns:repeat(7,minmax(0,1fr));overflow:visible;padding-bottom:0}
}
@media(max-width:999px){
  .port-strip{grid-auto-columns:minmax(180px,42%);-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent);padding-right:15%}
}

/* STARFIELD on dark sections (assets/stars.js) */
.starry{isolation:isolate}
.starry > .stars{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* BACK TO TOP */
.to-top{position:fixed;right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;
  width:48px;height:48px;display:grid;place-items:center;background:rgba(13,11,9,.82);backdrop-filter:blur(6px);
  border:1px solid var(--amber);color:var(--amber);font:500 1.2rem/1 var(--f-mono);cursor:pointer;
  opacity:0;translate:0 12px;pointer-events:none;transition:opacity .3s,translate .3s,background .2s,color .2s}
.to-top.show{opacity:1;translate:0 0;pointer-events:auto}
.to-top:hover{background:var(--amber);color:var(--void)}
@media(max-width:600px){.to-top{width:44px;height:44px;right:16px;bottom:16px}}

/* NEBULA BAND: one rust cloud bank behind Transmissions + Visual Record, densest where they meet (--seam) */
.nebula-band{--seam:50%;position:relative;isolation:isolate;
  background:radial-gradient(ellipse 60% 22% at 22% calc(var(--seam) + 4%),rgba(58,34,20,.65) 0%,transparent 80%),
             radial-gradient(ellipse 100% 38% at 80% var(--seam),#45281a 0%,#2b1a11 38%,var(--void) 78%),var(--void)}
.nebula-band::before,.nebula-band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none}
/* clouds sit on an oversized layer so the scroll drift never shows an edge */
.nebula-band::before{inset:-90px 0;transform:translate3d(0,var(--drift,0px),0);will-change:transform}
.nebula-band::before{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='2600' viewBox='0 0 1400 2600'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0055 .0045' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .66 0 0 0 0 .33 0 0 0 0 .15 2.2 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") center/cover no-repeat;opacity:.37;mix-blend-mode:screen;
  -webkit-mask-image:radial-gradient(ellipse 65% 18% at 26% calc(var(--seam) + 5%),rgba(0,0,0,.7) 0%,transparent 78%),radial-gradient(ellipse 95% 34% at 78% var(--seam),#000 0%,rgba(0,0,0,.55) 45%,transparent 82%);
          mask-image:radial-gradient(ellipse 65% 18% at 26% calc(var(--seam) + 5%),rgba(0,0,0,.7) 0%,transparent 78%),radial-gradient(ellipse 95% 34% at 78% var(--seam),#000 0%,rgba(0,0,0,.55) 45%,transparent 82%)}
.nebula-band::after{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 0 0 0 .55 -.18'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/220px 220px;opacity:.22;mix-blend-mode:overlay}
.nebula-band > section{z-index:1}

/* LATEST SINGLE: an amber laser tracing the card border (one lap every 7s) */
@property --laser{syntax:"<angle>";initial-value:0deg;inherits:false}
.feature::before,.feature::after{content:"";position:absolute;inset:-1px;padding:2px;pointer-events:none;z-index:2;
  background:conic-gradient(from var(--laser),transparent 0 68%,rgba(231,180,98,.3) 82%,var(--amber) 93%,#fff1d2 97%,transparent 97.6%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);
  animation:laser 7s linear infinite}
.feature::after{padding:3px;filter:blur(8px)}            /* soft glow around the beam */
@keyframes laser{to{--laser:360deg}}
@media(prefers-reduced-motion:reduce){.feature::before,.feature::after{animation:none}}
/* LATEST FROM THE BAND: brighter supporting text */
.social .sec-head p{color:var(--sepia)}
.social .link small{color:#bfae8e}
/* plain song/video links written into the HTML for crawlers; the page script swaps in the tiles */
.track-link{display:block;font:500 .8rem/1.4 var(--f-mono);letter-spacing:.08em;color:var(--dust);text-decoration:none;padding:6px 0}