/* ============================================================
   EARTH WORKS AMSTERDAM — vintage · brutalist · industrial · analog
   ============================================================ */

:root{
  --ink:        #0b0a08;
  --coal:       #15120d;
  --coal-2:     #1d1812;
  --paper:      #e7dec9;
  --paper-dim:  #b9ac90;
  --bone:       #f4eede;
  --cream:      #e6d4b2;
  --rust:       #b14a22;
  --rust-deep:  #7e3315;
  --brass:      #cf9b46;
  --olive:      #5c6346;
  --line:       rgba(231,222,201,.16);
  --shadow:     rgba(0,0,0,.55);

  --f-display: 'Anton', 'Arial Narrow', sans-serif;
  --f-groove:  'Caprasimo', Georgia, serif;
  --f-body:    'Space Grotesk', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, monospace;

  --maxw: 1280px;
  --navh: 88px;            /* top-bar height — tall enough to host the centred logo */
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--navh) + 6px); overflow-x:hidden; overflow-x:clip; }
body{
  background:var(--ink);
  color:var(--paper);
  font-family:var(--f-body);
  line-height:1.55;
  overflow-x:clip;   /* clip (not hidden) so position:sticky descendants still work */
  -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
section{ position:relative; }

/* ---------- texture overlays ---------- */
.grain{
  position:fixed; inset:0; z-index:9000; pointer-events:none; opacity:.10; mix-blend-mode:overlay;
  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='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.vignette{
  position:fixed; inset:0; z-index:8999; pointer-events:none;
  background:radial-gradient(120% 90% at 50% 35%, transparent 55%, rgba(0,0,0,.55) 100%);
}
/* faded studio photo behind everything — analog texture instead of flat black */
.bg-texture{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:url("../assets/photos/_selects-IMG_7528.jpg") center/cover no-repeat;
  filter:brightness(.24) saturate(.4) blur(1px);
}

/* ---------- shared bits ---------- */
.section-label{
  font-family:var(--f-mono); font-size:.85rem; font-weight:700; letter-spacing:.26em; text-transform:uppercase;
  color:var(--rust); margin-bottom:1.2rem; display:inline-flex; align-items:center; gap:.65rem;
}
.section-label::before{ content:''; width:28px; height:2px; background:currentColor; display:inline-block; flex:0 0 auto; }
.kicker{
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.36em; text-transform:uppercase;
  color:var(--paper-dim);
}
h2{
  font-family:var(--f-display); font-weight:400; line-height:.95;
  font-size:clamp(2.4rem,6vw,5rem); letter-spacing:.01em; text-transform:uppercase;
}
h2 em{ font-family:var(--f-groove); font-style:normal; color:var(--brass); text-transform:none; letter-spacing:0; }

.btn{
  display:inline-block; font-family:var(--f-mono); font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
  padding:.95em 1.6em; border:1.5px solid var(--paper); transition:.25s; cursor:pointer; background:none; color:var(--paper);
}
.btn--solid{ background:var(--rust); border-color:var(--rust); color:var(--bone); }
.btn--solid:hover{ background:var(--rust-deep); border-color:var(--rust-deep); }
.btn--ghost:hover{ background:var(--paper); color:var(--ink); }

/* diamond-plate industrial pattern (reusable) */
.plate-bg{
  background-color:#171410;
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(-45deg, rgba(0,0,0,.25) 0 2px, transparent 2px 9px);
}

/* reveal-on-scroll */
.reveal{ opacity:0; transform:translateY(30px); transition:opacity .9s cubic-bezier(.42,0,.2,1), transform .9s cubic-bezier(.42,0,.2,1); will-change:opacity, transform; }
.reveal.in{ opacity:1; transform:none; }

/* ============================================================ NAV */
.nav{
  position:fixed; top:0; left:0; right:0; z-index:1000;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  min-height:var(--navh);
  padding:.5rem clamp(.9rem,2.4vw,1.6rem);
  transition:background .35s, padding .35s, border-color .35s;
  border-bottom:1px solid transparent;
}
.nav.scrolled{ background:rgba(11,10,8,.9); backdrop-filter:blur(10px); border-color:var(--line); }
.nav__brand img{ height:67.5px; width:auto; }
.nav__links{ display:flex; gap:1rem; flex:1; justify-content:center; }
.nav__links a{
  font-family:var(--f-mono); font-size:.84rem; letter-spacing:.06em; text-transform:uppercase; color:var(--paper-dim);
  position:relative; padding:.3em 0; transition:color .2s; white-space:nowrap;
}
.nav__brand{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:1; transition:opacity .3s; }
/* on the hero (before scroll) the big hero logo is already showing — hide the duplicate centred top-bar one */
.nav:not(.scrolled) .nav__brand{ opacity:0; pointer-events:none; }
.nav__player{ flex:0 0 auto; }
.nav__player iframe{ width:380px; height:80px; border:0; border-radius:10px; display:block; }
.nav__platforms .pf-ig{ height:22px; }
.nav__links a:hover{ color:var(--paper); }
.nav__links a::after{ content:''; position:absolute; left:0; bottom:-2px; width:0; height:1.5px; background:var(--rust); transition:width .25s; }
.nav__links a:hover::after{ width:100%; }
.nav__platforms{ display:flex; align-items:center; gap:1rem; flex:0 0 auto; margin-left:auto; }
.nav__platforms img{ height:20px; width:auto; }
.nav__platforms a{ display:flex; align-items:center; opacity:.82; transition:opacity .2s, transform .2s; }
.nav__platforms a:hover{ opacity:1; transform:translateY(-2px); }
.nav__platforms a:last-child img{ margin-right:0; }
.nav__burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; cursor:pointer; padding:6px; z-index:1200; position:relative; }
.nav__burger span{ width:26px; height:2px; background:var(--paper); transition:.3s; }

/* ---------- vertical tape-strip menu ---------- */
.tape-menu{ position:fixed; left:0; top:0; bottom:0; width:168px; z-index:880; display:flex; align-items:stretch; pointer-events:none; }
/* full-height strip of magnetic recording tape — dark, glossy, oxide-brown ribbon, flush to the edge */
.tape-menu__strip{ position:relative; pointer-events:auto; width:100%; margin:0; padding:108px 0 2rem; display:flex; flex-direction:column; justify-content:space-evenly;
  background:
    linear-gradient(90deg, rgba(255,255,255,.10) 0%, rgba(255,255,255,.02) 16%, transparent 34%, transparent 66%, rgba(0,0,0,.42) 100%),
    linear-gradient(178deg, #4a3826 0%, #2e2114 45%, #241a10 70%, #19120a 100%);
  box-shadow:6px 0 30px rgba(0,0,0,.55), inset -1px 0 0 rgba(255,255,255,.04); border-right:2px solid #120c06; }
/* vertical oxide grain running the length of the tape + a vertical specular sheen */
.tape-menu__strip::before{ content:''; position:absolute; inset:0; pointer-events:none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.045) 0 1px, transparent 1px 5px),
    linear-gradient(90deg, rgba(212,168,108,.16) 0%, rgba(255,240,210,.22) 7%, rgba(212,168,108,.13) 16%, transparent 36%); }
.tape-menu a{ position:relative; z-index:2; font-family:var(--f-mono); font-size:.82rem; letter-spacing:.06em; text-transform:uppercase; color:#e9dcc0; text-align:center; padding:.72rem .4rem; line-height:1.15; transition:background .18s, color .18s; text-shadow:0 1px 2px rgba(0,0,0,.6); }
.tape-menu .menu-ico{ display:none; }   /* icons are mobile-only (the desktop strip stays text) */
.tape-menu a:hover{ background:var(--rust); color:var(--bone); text-shadow:none; }
/* current section — always visible so you know where you are */
.tape-menu a.active{ background:var(--rust); color:var(--bone); text-shadow:none; font-weight:700; }
.tape-menu a.active::before{ content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--brass); }

/* ============================================================ HERO */
.hero{ position:relative; height:100svh; min-height:620px; display:flex; align-items:center; overflow:hidden; }
.hero .hero__rot{ position:absolute; inset:0; transform:scale(1.06); filter:contrast(1.05) saturate(.9); }
.hero__rot .rotator__layer{ background-position:38% center; }

/* ---------- generic rotating image component ---------- */
.rotator{ position:relative; overflow:hidden; background:#0c0a08; }
.rotator__layer{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:0; transition:opacity 1.4s ease; }
.hero__scrim{
  position:absolute; inset:0;
  background:linear-gradient(100deg, rgba(11,10,8,.9) 0%, rgba(11,10,8,.5) 34%, rgba(11,10,8,.08) 62%, rgba(11,10,8,.12) 100%),
             linear-gradient(180deg, transparent 42%, rgba(11,10,8,.5) 86%, var(--ink) 100%);
}
.hero__plate{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay;
  background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 7px); }
.hero__inner{ position:relative; z-index:3; display:flex; flex-direction:row; align-items:stretch; justify-content:space-between; gap:clamp(1.5rem,4vw,4rem); text-align:left; padding:96px clamp(1.2rem,5vw,4rem) 72px; max-width:none; margin:0; width:100%; }
.hero__text{ display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
.hero__logo{ width:clamp(280px,42vw,560px); height:auto; margin:1.1rem 0 1.4rem; filter:drop-shadow(0 10px 40px rgba(0,0,0,.7)); }
/* sub + buttons grouped at the bottom-right */
.hero__cta{ display:flex; flex-direction:column; align-items:flex-end; justify-content:flex-end; text-align:right; gap:1.4rem; flex:0 0 auto; }
.hero__sub{ font-size:clamp(1rem,1.7vw,1.4rem); line-height:1.35; max-width:42ch; color:var(--paper); margin:0; text-align:left; }
.hero__tags{ display:flex; flex-wrap:wrap; align-items:center; gap:.6rem; margin:1.6rem 0 0; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.22em; color:var(--paper-dim); }
.hero__tags i{ color:var(--rust); font-style:normal; }
.hero__btns{ display:flex; flex-direction:row; gap:1rem; flex:0 0 auto; }
/* Amsterdam XXX accent. Desktop: horizontal row atop the CTA buttons. Mobile: vertical column atop the EARTH WORKS logo. */
.hero__xxx{ display:flex; align-items:center; gap:.5rem; }
.hero__xxx img{ width:32px; height:auto; display:block; filter:drop-shadow(0 2px 5px rgba(0,0,0,.55)); }
.hero__xxx--cta{ flex-direction:row; margin-bottom:.2rem; }   /* desktop only */
.hero__xxx--top{ display:none; }                              /* hidden on desktop; shown + stacked on mobile */
@media(max-width:760px){
  .hero__inner{ flex-direction:column; align-items:center; text-align:center; padding-bottom:48px; }
  .hero__text .kicker{ display:none; }   /* hide 'Het Groene Veld · Amsterdam Noord' on mobile hero */
  .hero__text{ align-items:center; }
  .hero__sub{ text-align:center; }
  .hero__tags{ justify-content:center; }
  .hero__cta{ align-items:center; text-align:center; }
  .hero__xxx--cta{ display:none; }                                                          /* desktop-only placement */
  .hero__xxx--top{ display:flex; flex-direction:row; align-items:center; justify-content:center; gap:.5rem; margin:.2rem 0 .6rem; }   /* horizontal XXX atop the EARTH WORKS logo */
  .hero__btns{ flex-wrap:wrap; justify-content:center; }
  .hero__rotnav{ justify-content:center; }
  /* centre every standalone call-to-action button on phones */
  .ethos__actions .btn, .spotify__copy .btn, .merch__copy .btn, .wiki .btn,
  .doc__more-btn, #docMoreBtnBottom{ display:block; width:fit-content; max-width:100%; margin-left:auto; margin-right:auto; }
  .ethos__actions, .reels__cta{ text-align:center; }
  .feat__info .btn{ align-self:center; }
  .map__btns{ display:flex; flex-direction:column; align-items:center; gap:.8rem; }
}
.hero__scroll{ position:absolute; left:50%; transform:translateX(-50%); bottom:1.4rem; z-index:3; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.3em; text-transform:uppercase; color:var(--paper-dim); animation:bob 2s ease-in-out infinite; }
@keyframes bob{ 50%{ transform:translateY(6px); } }

/* ============================================================ TICKER */
.ticker{ background:var(--rust); color:var(--bone); overflow-x:auto; overflow-y:hidden; cursor:grab; touch-action:pan-x pan-y; padding:.7rem 0; border-top:2px solid var(--ink); border-bottom:2px solid var(--ink); scrollbar-width:none; -ms-overflow-style:none; }
.ticker::-webkit-scrollbar{ display:none; }
.ticker.grabbing{ cursor:grabbing; }
.ticker__track{ display:inline-flex; gap:1.4rem; white-space:nowrap; font-family:var(--f-display); font-size:1.15rem; letter-spacing:.06em; user-select:none; -webkit-user-select:none; }
.ticker__track b{ color:var(--ink); }
@keyframes scrollx{ to{ transform:translateX(-50%); } }

/* ============================================================ ETHOS */
.ethos{ padding:clamp(5rem,12vw,10rem) 0; background:var(--cream); color:var(--ink); overflow:hidden; }
.ethos__paper{
  position:absolute; inset:0; opacity:.5; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)' opacity='0.5'/%3E%3C/svg%3E"),
    radial-gradient(120% 100% at 50% 0%, rgba(177,74,34,.06), transparent 60%);
}
.ethos__inner{ position:relative; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); }
.section-label{ }
.ethos .section-label{ color:var(--rust); }
.ethos__head{
  font-family:var(--f-display); font-weight:400; text-transform:uppercase;
  font-size:clamp(2.6rem,8vw,7rem); line-height:.9; margin-bottom:1rem;
}
.ethos__head em{ font-family:var(--f-groove); font-style:normal; color:var(--rust); text-transform:none; }
.ethos__sub{ font-family:var(--f-groove); font-size:clamp(1.4rem,3.4vw,2.4rem); line-height:1.1; color:var(--rust); margin-bottom:2.5rem; }
.ethos__cols{ max-width:760px; }
.ethos__cols p{ font-size:1.05rem; color:#2a2620; }
.ethos__lead{ font-size:clamp(1.5rem,2.8vw,2rem) !important; line-height:1.4; font-weight:500; color:var(--ink) !important; }
.ethos__actions{ margin:2.2rem 0 .5rem; }
.ethos__cols strong{ color:var(--rust); }
/* editorial layout: left-aligned text, a tall vertical image on the right */
.ethos--editorial .ethos__inner{ display:grid; grid-template-columns:.95fr 1.05fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; text-align:left; }
.ethos--editorial .ethos__editorial{ order:1; }   /* image on the left */
.ethos--editorial .ethos__copy{ order:2; text-align:left; }   /* text on the right */
.ethos--editorial .ethos__actions{ text-align:left; }
.ethos--editorial .ethos__cols{ max-width:none; }
.ethos__editorial{ position:relative; border-radius:4px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.28); }
.ethos__editorial .amb-full{ width:100%; min-height:clamp(420px,58vh,640px); border-radius:4px; }
@media(max-width:880px){
  .ethos--editorial .ethos__inner{ grid-template-columns:1fr; }
  .ethos--editorial .ethos__copy{ text-align:left; }
  .ethos__editorial .amb-full{ min-height:clamp(300px,46vh,420px); }
}

/* ---------- editorial ambiance pairs (2 big images per section) ---------- */
/* editorial ambiance — full-width band OR full-height side, never stacked */
/* landscape ambience = a decorative cinematic strip, not a standalone protagonist */
.amb-band{ width:100%; aspect-ratio:2.7/1; border-radius:2px; margin-top:clamp(2.6rem,5vw,4.5rem);
  box-shadow:0 22px 50px rgba(0,0,0,.45); filter:contrast(1.03) saturate(.82) brightness(.92); }
.amb-band--light{ filter:contrast(1.03) saturate(.86) sepia(.08) brightness(.94); box-shadow:0 22px 50px rgba(0,0,0,.28); }
.amb-full{ width:100%; aspect-ratio:4/5; border-radius:2px;
  box-shadow:0 30px 70px rgba(0,0,0,.55); filter:contrast(1.05) saturate(.9); }
.amb-full::after{ content:''; position:absolute; inset:0; box-shadow:inset 0 0 90px rgba(0,0,0,.4); pointer-events:none; }
/* fade the strip edges into the page so it reads as decoration, plus a vignette */
.amb-band::after{ content:''; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 90px rgba(0,0,0,.5);
  background:linear-gradient(90deg, var(--coal) 0%, transparent 12%, transparent 88%, var(--coal) 100%),
            linear-gradient(180deg, rgba(12,11,9,.35) 0%, transparent 22%, transparent 72%, rgba(12,11,9,.7) 100%); }
.amb-wrap{ max-width:var(--maxw); margin:clamp(3.5rem,7vw,6rem) auto 0; padding:0 clamp(1.2rem,5vw,4rem); }
.amb-wrap .amb-band{ margin-top:0; }
.deck .amb-wrap{ margin-top:clamp(4.5rem,9vw,7.5rem); }
.amb-full--center{ max-width:460px; margin-left:auto; margin-right:auto; }

/* ============================================================ PARALLAX QUOTE BANDS */
.parallax{ position:relative; min-height:80vh; display:flex; align-items:center; justify-content:center;
  text-align:center; padding:clamp(3rem,8vw,7rem) clamp(1.4rem,6vw,5rem);
  background-size:cover; background-position:center; background-attachment:fixed; background-repeat:no-repeat; }
.parallax__scrim{ position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 45%, rgba(11,10,8,.12), rgba(11,10,8,.42)); }
.parallax__quote{ position:relative; z-index:2; max-width:min(92vw,28ch); margin:0; }
.parallax__quote p{ font-family:var(--f-groove); font-weight:400; color:var(--bone);
  font-size:clamp(1.7rem,4.4vw,3.9rem); line-height:1.12; text-shadow:0 8px 40px rgba(0,0,0,.6); }
.parallax__quote cite{ display:block; margin-top:1.6rem; font-family:var(--f-mono); font-style:normal;
  font-size:.8rem; letter-spacing:.28em; text-transform:uppercase; color:var(--brass); }

/* ============================================================ ROOM / POLAROIDS */
.room{ padding:clamp(4.5rem,10vw,8rem) 0 clamp(6rem,12vw,10rem); background:rgba(21,18,13,.74); overflow:hidden; }
.room__head{ max-width:var(--maxw); margin:0 auto 2.5rem; padding:0 clamp(1.2rem,5vw,4rem); }
.room__head .section-label{ color:var(--brass); }
.room__sub{ margin-top:1rem; color:var(--paper-dim); max-width:52ch; }
.room__sub span{ color:var(--rust); font-family:var(--f-mono); }
.polaroids{
  position:relative; max-width:1280px; margin:0 auto; padding:1rem clamp(1rem,4vw,3rem);
  min-height:1180px;
}
.polaroid{
  position:absolute; width:clamp(200px,22vw,310px);
  background:#f3eee2; padding:13px 13px 40px; border-radius:2px;
  box-shadow:0 14px 34px var(--shadow), 0 2px 6px rgba(0,0,0,.4);
  cursor:grab; will-change:transform, opacity; transition:box-shadow .25s, opacity .6s ease;
  touch-action:none; opacity:0;
}
.polaroid.in{ opacity:1; }
.polaroid:active{ cursor:grabbing; }
/* intro: each photo drops + scales up while the card fades in (staggered via JS) */
.polaroid img{ width:100%; aspect-ratio:1/1; object-fit:cover; background:#222; filter:contrast(1.05) saturate(.92);
  transform:translateY(40px) scale(.9); transition:transform .7s cubic-bezier(.2,.85,.2,1); }
.polaroid.in img{ transform:none; }
.polaroid figcaption{ font-family:var(--f-mono); font-size:.74rem; text-align:center; color:#2a2620; padding:.7rem .2rem .85rem; letter-spacing:.02em; }
.polaroid::before{ /* tape */
  content:''; position:absolute; top:-14px; left:50%; width:84px; height:30px; transform:translateX(-50%) rotate(-4deg);
  background:rgba(207,155,70,.42); box-shadow:0 2px 5px rgba(0,0,0,.25);
  mix-blend-mode:multiply;
}
.polaroid.lifted{ box-shadow:0 40px 70px rgba(0,0,0,.65), 0 6px 14px rgba(0,0,0,.5); z-index:50 !important; }
.polaroid figcaption span.zoom{ color:var(--rust); }

/* ============================================================ DECK / TURNTABLE */
.deck{ padding:clamp(5rem,11vw,9rem) 0; --grad:linear-gradient(rgba(11,10,8,.84),rgba(11,10,8,.9));
  background-color:var(--ink); background-image:var(--grad); background-size:cover; background-position:center; background-attachment:fixed; }
.deck.plate-bg{}
.deck__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.deck__copy .section-label{ color:var(--brass); }
.deck__copy h2{ margin:0 0 1.3rem; }
.deck__copy p{ color:var(--paper-dim); max-width:42ch; margin-bottom:1rem; }
.deck__hint{ font-family:var(--f-mono); font-size:.82rem; color:var(--paper-dim); }
.deck__stage{ display:flex; flex-direction:column; align-items:center; gap:1.6rem; }
.deck__transport{ display:flex; align-items:center; justify-content:center; gap:1.6rem; flex-wrap:wrap; }
.deck__controls{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; width:100%; }
/* real record speeds — segmented control */
.deck__speed{ display:flex; align-items:center; gap:.7rem; }
.deck__speed-label,.deck__speed-unit{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); }
.deck__speed-btns{ display:flex; border:1px solid var(--line); border-radius:4px; overflow:hidden; }
.deck__speed-btns button{ font-family:var(--f-mono); font-size:.82rem; color:var(--paper-dim); background:transparent; border:0; border-right:1px solid var(--line); padding:.5em .8em; cursor:pointer; transition:background .18s,color .18s; }
.deck__speed-btns button:last-child{ border-right:0; }
.deck__speed-btns button:hover{ color:var(--paper); }
.deck__speed-btns button.active{ background:var(--rust); color:var(--bone); }
#deckPower{ margin-top:.4rem; }
/* dub desk — echo / reverb / filter / siren */
.dubdesk{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:1rem 1.3rem; width:100%;
  margin-top:.4rem; padding:1rem 1.2rem; border:1px solid var(--line); border-radius:6px; background:rgba(11,10,8,.45); }
.dubdesk__title{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.22em; text-transform:uppercase; color:var(--brass); }
.dubknob{ display:flex; flex-direction:column; gap:.35rem; align-items:center; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); }
.dubknob input[type="range"]{ -webkit-appearance:none; appearance:none; width:96px; height:4px; border-radius:3px; background:var(--line); cursor:pointer; }
.dubknob input[type="range"]::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px; border-radius:50%; background:var(--rust); border:2px solid var(--bone); cursor:grab; }
.dubknob input[type="range"]::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--rust); border:2px solid var(--bone); cursor:grab; }
.dubsiren{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--bone);
  background:transparent; border:1px solid var(--rust); border-radius:4px; padding:.6em 1em; cursor:pointer; transition:background .12s, box-shadow .12s; user-select:none; }
.dubsiren:hover{ background:rgba(177,74,34,.2); }
.dubsiren.on{ background:var(--rust); box-shadow:0 0 18px rgba(177,74,34,.7); }
.deck__tracks{ display:flex; flex-wrap:wrap; gap:clamp(.7rem,2.5vw,1.4rem); justify-content:center; align-items:flex-start; width:100%; }
/* each track is a clickable mini vinyl disc, side by side, with a loader */
.deck__disc{ background:none; border:0; padding:0; cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:.55rem; width:clamp(78px,12vw,104px); }
.deck__disc-vinyl{ position:relative; width:clamp(64px,11vw,92px); aspect-ratio:1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #0b0b0c 0 13%, #e7ddc8 13% 17%, #100a04 17% 20%, #050505 20% 25%, #1b1b1b 25% 58%, #0d0d0d 58% 78%, #1a1a1a 78% 82%, #0b0b0b 82% 100%);
  box-shadow:0 7px 18px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.6); transition:transform .2s, box-shadow .2s, filter .2s; }
.deck__disc:hover .deck__disc-vinyl{ transform:scale(1.07) rotate(8deg); }
.deck__disc.active .deck__disc-vinyl{ box-shadow:0 0 0 2px var(--brass), 0 9px 22px rgba(0,0,0,.65); animation:spin 3.2s linear infinite; }
.deck__disc-num{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--f-mono); font-size:.7rem; font-weight:700; color:#3a2c14; }
.deck__disc-spin{ position:absolute; inset:0; margin:auto; width:46%; height:46%; border-radius:50%; border:3px solid rgba(244,238,222,.25); border-top-color:var(--brass); opacity:0; }
.deck__disc.loading .deck__disc-vinyl{ filter:brightness(.55); }
.deck__disc.loading .deck__disc-num{ opacity:0; }
.deck__disc.loading .deck__disc-spin{ opacity:1; animation:spin .7s linear infinite; }
.deck__disc-name{ font-family:var(--f-mono); font-size:.64rem; line-height:1.25; color:var(--paper-dim); text-align:center; max-width:104px; transition:color .2s; }
.deck__disc:hover .deck__disc-name{ color:var(--paper); }
.deck__disc.active .deck__disc-name{ color:var(--brass); }
/* vinyl resurgence chart */
.vinyl-chart{ margin:1.6rem 0 1.2rem; }
.vinyl-chart__bars{ display:flex; align-items:flex-end; gap:clamp(.4rem,1.4vw,1rem); height:160px; border-bottom:1px solid var(--line); padding-bottom:2px; }
.vinyl-bar{ flex:1; display:flex; flex-direction:column; justify-content:flex-end; align-items:center; height:100%; gap:.35rem; }
.vinyl-bar__fill{ width:100%; max-width:34px; background:linear-gradient(180deg,var(--brass),#b8853c); opacity:.5; border-radius:3px 3px 0 0; height:0; transition:height 1.1s cubic-bezier(.2,.8,.2,1); }
.vinyl-bar__val{ font-family:var(--f-mono); font-size:.66rem; color:var(--bone); order:-1; opacity:0; transition:opacity .5s .5s; }
.vinyl-bar__yr{ font-family:var(--f-mono); font-size:.6rem; letter-spacing:.04em; color:var(--paper-dim); }
.reveal.in .vinyl-bar__val{ opacity:1; }
.vinyl-chart figcaption{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.03em; color:var(--paper-dim); margin-top:.7rem; }

.turntable{ display:flex; justify-content:center; perspective:1200px; }
.turntable__plinth{
  position:relative; width:min(92vw,560px); aspect-ratio:1/1; border-radius:14px;
  background:linear-gradient(155deg,#2a241c,#141009 70%);
  box-shadow:0 30px 70px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.05); padding:7%;
}
.platter{
  position:absolute; inset:7%; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #3a332a 0 64%, #2a241d 64% 100%);
  box-shadow:inset 0 0 30px rgba(0,0,0,.7);
  display:flex; align-items:center; justify-content:center;
}
.record{
  position:relative; width:96%; aspect-ratio:1/1; border-radius:50%;
  background:radial-gradient(circle at 50% 50%, #0c0c0d 0 27%, #19181a 27% 28%, #0a0a0b 28% 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.04), 0 14px 30px rgba(0,0,0,.5);
  cursor:grab; touch-action:none; will-change:transform;
}
.record:active{ cursor:grabbing; }
.record__grooves{
  position:absolute; inset:6%; border-radius:50%;
  background:repeating-radial-gradient(circle at 50% 50%, rgba(255,255,255,.045) 0 1px, transparent 1px 3px);
  -webkit-mask:radial-gradient(circle at 50% 50%, transparent 0 26%, #000 26% 99%, transparent 100%);
          mask:radial-gradient(circle at 50% 50%, transparent 0 26%, #000 26% 99%, transparent 100%);
}
.record::after{
  content:''; position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.10), transparent 30%, rgba(255,255,255,.05) 55%, transparent 80%, rgba(255,255,255,.10));
  mix-blend-mode:screen; opacity:.5;
}
.record__label{
  position:absolute; top:50%; left:50%; width:40%; aspect-ratio:1/1; transform:translate(-50%,-50%);
  border-radius:50%; background:radial-gradient(circle,#c0461f,#7e3315);
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
  color:var(--bone); box-shadow:inset 0 0 14px rgba(0,0,0,.4); cursor:pointer;
}
.record__label img{ width:74%; height:auto; display:block; filter:brightness(0) invert(1); opacity:.96; pointer-events:none; }
.record__spindle{ position:absolute; top:50%; left:50%; width:10px; height:10px; transform:translate(-50%,-50%); background:#d8d2c4; border-radius:50%; z-index:3; box-shadow:0 0 0 2px rgba(0,0,0,.4); }
.spinning{ animation:spin 1.8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }

.tonearm{ position:absolute; top:6%; right:5%; width:34%; height:42%; transform-origin:88% 14%; transform:rotate(-22deg); transition:transform .9s cubic-bezier(.6,0,.2,1); z-index:6; cursor:grab; touch-action:none; filter:drop-shadow(0 7px 9px rgba(0,0,0,.6)); }
.tonearm.down{ transform:rotate(2deg); }
.tonearm__base{ position:absolute; top:0; right:0; width:26%; aspect-ratio:1/1; border-radius:50%; background:linear-gradient(#39322a,#1c1812); box-shadow:0 4px 10px rgba(0,0,0,.5); }
.tonearm__arm{ position:absolute; top:13%; right:11%; width:6px; height:88%; background:linear-gradient(#cfc7b6,#8a8276); transform-origin:top center; border-radius:3px; box-shadow:0 2px 6px rgba(0,0,0,.5); }
.tonearm__head{ position:absolute; bottom:-6px; left:-6px; width:18px; height:20px; background:#222; border-radius:2px; transform:rotate(8deg); box-shadow:0 4px 8px rgba(0,0,0,.7); }
.turntable__brand{ position:absolute; bottom:4%; left:8%; font-family:var(--f-mono); font-size:.6rem; letter-spacing:.22em; color:var(--paper-dim); }
.turntable__strobe{ position:absolute; bottom:6%; right:8%; width:34px; height:14px; border-radius:7px;
  background:repeating-linear-gradient(90deg,#cf9b46 0 3px, transparent 3px 6px); opacity:.55; }

/* ============================================================ FEATURED — five of the week */
.featured{ padding:clamp(4.5rem,10vw,8rem) 0; background:rgba(11,10,8,.8); color:var(--paper); overflow:hidden; }
.featured__head{ max-width:1080px; margin:0 auto 2.6rem; padding:0 clamp(1.2rem,5vw,4rem); }
.featured__head .section-label{ color:var(--brass); }
.featured__head h2{ color:var(--bone); }
.featured__sub{ margin-top:1rem; color:var(--paper-dim); max-width:52ch; }
/* compact grid — two rows of 3, smaller boxes, more spaced */
.featured__grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.9rem; }
.featured__grid .feat:nth-child(4){ display:none; }   /* desktop/tablet keep the original 3-across; the 4th card shows only on phones for the 2x2 */
/* ===== DISTRIBUTION (under Music) ===== */
.distro{ padding:clamp(4.5rem,10vw,8rem) 0; background:var(--cream); color:var(--ink); overflow:hidden; }
.distro__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1.05fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.distro__copy .section-label{ color:var(--brass); }
.distro__copy h2{ margin:.4rem 0 1.3rem; }
.distro__copy p{ color:var(--paper-dim); margin-bottom:1rem; max-width:48ch; }
.distro__copy .btn{ margin-top:.6rem; }
.distro__photo{ margin:0; border-radius:4px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.55); }
.distro__photo .amb-full{ width:100%; min-height:clamp(320px,40vw,520px); border-radius:4px; }
@media(max-width:880px){ .distro__inner{ grid-template-columns:1fr; } }
/* centered heading + CTA (the pipeline below is the main element) */
.distro__head{ max-width:780px; margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); text-align:center; }
.distro__head .section-label{ color:var(--rust); }
.distro__head h2{ margin:.4rem 0 1rem; }
.distro__head p{ color:#3a3228; margin:0 auto; max-width:62ch; }
.distro__cta{ text-align:center; margin-top:clamp(2rem,4vw,3rem); }
/* a flip-album flanking the heading on each side */
.distro__top{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1fr minmax(0,2.1fr) 1fr; gap:clamp(1.4rem,3.5vw,3rem); align-items:center; }
.distro__top .distro__head{ max-width:none; padding:0; }
.distro__album{ width:100%; max-width:250px; justify-self:center; }
.distro__album .feat{ background:#f1e7d0; }
.distro__album .feat__no, .distro__album .feat__desc, .distro__album .feat__artist{ display:none; }
@media(max-width:880px){
  .distro__top{ grid-template-columns:1fr 1fr; gap:1.2rem 1.4rem; }
  .distro__top .distro__head{ order:-1; grid-column:1 / -1; margin-bottom:.4rem; }
  .distro__album{ display:block; max-width:220px; }
}
/* distribution pipeline (the path) */
.distro__flow{ max-width:var(--maxw); margin:clamp(2.6rem,5vw,4rem) auto 0; padding:0 clamp(1.2rem,5vw,4rem); }
.flow{ list-style:none; display:flex; align-items:center; justify-content:center; gap:.5rem; flex-wrap:wrap; }
.flow__step{ flex:1 1 150px; max-width:210px; display:flex; flex-direction:column; align-items:center; text-align:center; gap:.55rem; padding:1.4rem 1rem; border:1px solid rgba(11,10,8,.16); border-radius:6px; background:rgba(255,255,255,.5); }
.flow__ico{ color:var(--rust); display:flex; }
.flow__ico svg{ width:34px; height:34px; }
.flow__step b{ font-family:var(--f-groove); font-weight:400; text-transform:none; letter-spacing:0; font-size:1.4rem; line-height:1.08; color:var(--ink); }
.flow__d{ font-family:var(--f-body); font-size:.84rem; line-height:1.45; color:#3a3228; }
.flow__sep{ align-self:center; color:var(--rust); font-size:1.5rem; flex:0 0 auto; }
.flow__platforms{ display:flex; flex-wrap:wrap; gap:.55rem .8rem; align-items:center; justify-content:center; margin-top:.35rem; }
.flow__platforms img{ height:30px; width:auto; opacity:.95; }
.flow__platforms img.flow__plat--mark{ height:34px; }
.flow__step--out{ border-color:var(--ink); background:var(--ink); flex-basis:200px; }
.flow__step--out b{ color:var(--bone); }
@media(max-width:820px){
  /* a grid on phones: 2x2 step cards + the final 'Out everywhere' full-width */
  .flow{ display:grid; grid-template-columns:1fr 1fr; align-items:stretch; gap:.7rem; max-width:520px; margin-inline:auto; }
  .flow__sep{ display:none; }
  .flow__step{ max-width:none; }
  .flow__step--out{ grid-column:1 / -1; }
}
.feat{ display:flex; flex-direction:column; gap:1rem; padding:clamp(1rem,1.8vw,1.4rem); border-radius:5px;
  box-shadow:0 14px 34px rgba(0,0,0,.4); color:var(--ink); }
/* each of the five a different shade of cream */
.feat:nth-child(1){ background:#f1e7d0; }
.feat:nth-child(2){ background:#e8d8b6; }
.feat:nth-child(3){ background:#f3ecdb; }
.feat:nth-child(4){ background:#e2d0a8; }
.feat:nth-child(5){ background:#ede0c3; }
.feat:nth-child(6){ background:#e6d2ad; }
/* flip card with the record peeking up behind the sleeve */
.feat__art{ position:relative; perspective:1200px; }
.feat__disc{ position:absolute; left:50%; top:0; width:78%; aspect-ratio:1/1; transform:translate(-50%,-16%); z-index:0;
  border-radius:50%; background:radial-gradient(circle at 50% 50%, #141414 0 27%, #b14a22 27% 30%, #060606 30% 32%, #161616 32% 62%, #0c0c0c 62% 100%);
  box-shadow:0 14px 26px rgba(0,0,0,.55), inset 0 0 16px rgba(0,0,0,.85); pointer-events:none;
  transition:transform .6s cubic-bezier(.2,.85,.25,1); }
.feat:hover .feat__disc{ transform:translate(-50%,-26%); }
.feat__info{ position:relative; z-index:2; display:flex; flex-direction:column; }
.feat__flip{ position:relative; z-index:1; width:100%; aspect-ratio:1/1; border:0; padding:0; background:none; cursor:pointer;
  transform-style:preserve-3d; transition:transform .5s cubic-bezier(.34,1.3,.5,1); touch-action:pan-y; }
.feat__flip.flipped{ transform:rotateY(180deg); transition:transform .7s cubic-bezier(.4,0,.2,1); }
/* tease the flip on hover — lift a corner so it reads as turnable */
.feat:hover .feat__flip:not(.flipped){ transform:rotateY(-16deg) rotateX(4deg); }
.feat:hover .feat__flip-cue{ opacity:1; background:var(--rust); }
.feat__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; border-radius:3px; overflow:hidden;
  box-shadow:0 16px 34px rgba(0,0,0,.5); }
.feat__face--front img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.04) saturate(.95); -webkit-user-drag:none; user-select:none; pointer-events:none; }
.feat__face--back{ transform:rotateY(180deg); background:linear-gradient(150deg,#26201a,#16120d); color:var(--bone);
  display:flex; flex-direction:column; justify-content:center; gap:.4rem; padding:1.2rem; text-align:center; border:1px solid var(--line); }
.feat__back-mark{ font-family:var(--f-display); font-size:1.15rem; letter-spacing:.04em; color:var(--brass); }
.feat__back-artist{ font-family:var(--f-body); font-size:.92rem; color:var(--paper); }
.feat__back-tag{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--rust); }
.feat__back-hint{ font-family:var(--f-mono); font-size:.56rem; letter-spacing:.1em; color:var(--paper-dim); margin-top:.5rem; }
.feat__flip-cue{ position:absolute; bottom:.5rem; right:.6rem; z-index:2; font-family:var(--f-mono); font-size:.54rem; letter-spacing:.08em;
  text-transform:uppercase; color:var(--bone); background:rgba(0,0,0,.55); padding:.3em .55em; border-radius:3px; pointer-events:none; opacity:.85; }
.feat__flip.flipped + .feat__flip-cue{ opacity:0; }
.feat__no{ font-family:var(--f-mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--rust); }
.feat__title{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; font-size:clamp(1.1rem,2vw,1.4rem); line-height:1.02; margin:.4rem 0 .2rem; color:var(--ink); }
.feat__artist{ font-family:var(--f-mono); font-size:.74rem; color:#6b5d49; margin-bottom:.6rem; }
.feat__desc{ color:#3a3228; font-size:.88rem; margin-bottom:1rem; line-height:1.45; flex:1; }
.feat__info .btn{ align-self:flex-start; }

/* ============================================================ SOUNDS / MARQUEE */
.sounds{ padding:clamp(4.5rem,10vw,8rem) 0; background:rgba(29,24,18,.8); overflow:clip; }
/* title left, the week's top 3 to the right */
.sounds__top{ max-width:var(--maxw); margin:0 auto clamp(2.4rem,5vw,3.6rem); padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:minmax(230px,1fr) 1.7fr; gap:clamp(1.6rem,4vw,3.5rem); align-items:start; }
.sounds__head{ max-width:none; margin:0; padding:0; }
.sounds__head .section-label{ color:var(--brass); }
.sounds__sub{ margin-top:1rem; color:var(--paper-dim); max-width:54ch; }
.sounds__featured .section-label{ color:var(--brass); margin-bottom:1rem; }
.sounds__featured .feat{ padding:.75rem; gap:.65rem; box-shadow:0 10px 26px rgba(0,0,0,.4); }
.sounds__featured .feat__desc, .sounds__featured .feat__no{ display:none; }
.sounds__featured .feat__title{ font-size:clamp(.95rem,1.3vw,1.15rem); }
.sounds__featured .feat__info .btn{ font-size:.6rem; padding:.6em .9em; }
@media(max-width:880px){ .sounds__top{ grid-template-columns:1fr; } }
@media(max-width:520px){
  .sounds__featured{ text-align:center; }
  .sounds__featured .featured__grid{ grid-template-columns:repeat(2,1fr); gap:.7rem; max-width:none; margin-inline:0; }   /* 2x2 grid of the week's picks on phones */
  .sounds__featured .featured__grid .feat:nth-child(4){ display:flex; }   /* show the 4th card on phones to complete the 2x2 */
  .sounds__featured .feat__info .btn{ align-self:center; }   /* centre the buy button (beats the base flex-start) */
}
/* big brand logo accents per section */
.sec-brands{ display:flex; align-items:center; gap:2rem; margin-top:1.8rem; flex-wrap:wrap; }
.sec-brand{ height:54px; width:auto; transition:transform .25s, opacity .25s; }
.sec-brand--lg{ height:84px; }
.sec-brand--block{ display:block; margin:1rem 0 1.3rem; }
.sec-brands a:hover .sec-brand{ transform:translateY(-3px); }
/* scrollable record strip — auto-drifts, but grab / wheel / swipe to scroll left & right */
.marquee{ overflow-x:auto; overflow-y:hidden; padding:3.4rem 0; cursor:grab; touch-action:pan-x pan-y;
  scrollbar-width:none; -ms-overflow-style:none; overscroll-behavior-x:contain;
  -webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent); }
.marquee::-webkit-scrollbar{ display:none; }
.marquee.grabbing{ cursor:grabbing; }
.marquee__track{ display:flex; gap:1.4rem; width:max-content; }
.marquee, .marquee *{ -webkit-user-select:none; user-select:none; -webkit-user-drag:none; }
.release img{ -webkit-user-drag:none; user-select:none; pointer-events:none; }
.release{ position:relative; width:230px; flex:0 0 auto; background:var(--coal); border:1px solid var(--line); transition:transform .4s cubic-bezier(.2,.8,.2,1), border-color .3s, box-shadow .4s; }
.release:hover{ transform:translateY(-12px) scale(1.07); border-color:var(--rust); z-index:6; box-shadow:0 20px 34px rgba(0,0,0,.65), 0 6px 14px rgba(0,0,0,.5); }
.release__art{ position:relative; aspect-ratio:1/1; overflow:visible; background:#000; }
.release__art img{ position:relative; z-index:2; width:100%; height:100%; object-fit:cover; display:block; box-shadow:0 0 0 1px rgba(0,0,0,.5); }
/* the record, tucked behind the sleeve — slides out in 3D on hover */
.release__art::after{ content:''; position:absolute; top:50%; left:50%; width:94%; aspect-ratio:1/1; z-index:1;
  background:radial-gradient(circle at 50% 50%, #0c0c0d 0 3%, #ece2cd 3% 22%, #1a1206 22% 25%, #060606 25% 30%, #161616 30% 62%, #0c0c0c 62% 100%);
  border-radius:50%; box-shadow:0 22px 34px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.85);
  transform:translate(-50%,-50%) scale(.94); transform-origin:center; pointer-events:none;
  transition:transform .6s cubic-bezier(.2,.85,.25,1), box-shadow .6s; }
.release:hover .release__art::after{ transform:translate(24%,-50%) scale(.98);
  box-shadow:-10px 18px 34px rgba(0,0,0,.6), inset 0 0 20px rgba(0,0,0,.85); }
.release__buy{ position:absolute; left:0; bottom:0; z-index:2; background:var(--rust); color:var(--bone);
  font-family:var(--f-mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; padding:.5em .8em; opacity:0; transform:translateY(6px); transition:.25s; }
.release:hover .release__buy{ opacity:1; transform:none; }
.release__info{ padding:.85rem .9rem 1rem; }
.release__title{ font-family:var(--f-display); font-size:1.02rem; line-height:1; text-transform:uppercase; letter-spacing:.01em; }
.release__artist{ font-family:var(--f-mono); font-size:.7rem; color:var(--paper-dim); margin-top:.45rem; line-height:1.3; }
/* music strip controls + full-catalogue grid */
.music-more-wrap{ max-width:var(--maxw); margin:clamp(2rem,4vw,3.2rem) auto 0; padding:0 clamp(1.2rem,5vw,4rem); }
.music-controls{ display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; position:sticky; top:calc(var(--navh, 56px) + .4rem); z-index:20; padding:.7rem 0; background:rgba(20,16,11,.94); -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px); border-radius:12px; }
.music-more{ margin-top:2.2rem; }
.music-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(184px,1fr)); gap:1rem; align-items:start; }
.music-grid .release{ width:auto; }
.music-pager{ position:sticky; bottom:1rem; z-index:5; width:max-content; max-width:100%; margin:2.2rem auto 0; display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:.4rem; padding:.55rem .7rem; background:rgba(18,14,9,.92); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid var(--line); border-radius:30px; }
.music-page{ font-family:var(--f-mono); font-size:.82rem; min-width:2.5em; padding:.5em .6em; border:1px solid var(--line); border-radius:4px; background:transparent; color:var(--paper-dim); cursor:pointer; transition:background .15s, color .15s, border-color .15s; }
.music-page:hover{ color:var(--paper); border-color:var(--rust); }
.music-page.is-active{ background:var(--rust); color:var(--bone); border-color:var(--rust); font-weight:700; }
.music-page[disabled]{ opacity:.35; pointer-events:none; }
.music-ellipsis{ color:var(--paper-dim); padding:0 .15rem; }
@media(max-width:900px){ .music-grid{ grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); } }
@media(max-width:520px){ .music-grid{ grid-template-columns:repeat(2,1fr); } }

.platforms{ max-width:var(--maxw); margin:3.5rem auto 0; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--line); border:1px solid var(--line); }
.platform{ background:var(--coal); padding:1.8rem 1.4rem 1.5rem; display:flex; flex-direction:column; gap:1rem; transition:.25s; min-height:150px; justify-content:space-between; }
.platform:hover{ background:var(--rust); color:var(--bone); }
.platform__logo{ height:30px; width:auto; align-self:flex-start; }
.platform__logo--mark{ height:46px; }
.platform__d{ font-size:.86rem; color:var(--paper-dim); }
.platform:hover .platform__d{ color:rgba(255,255,255,.9); }

/* ============================================================ SPOTIFY */
.spotify{ padding:clamp(4.5rem,10vw,8rem) 0; --grad:linear-gradient(rgba(11,10,8,.86),rgba(11,10,8,.9));
  background-color:var(--ink); background-image:var(--grad); background-size:cover; background-position:center; background-attachment:fixed; }
.spotify__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.spotify__copy .section-label{ color:var(--brass); }
.spotify__copy h2{ margin:0 0 1.1rem; }
.spotify__copy p{ color:var(--paper-dim); max-width:40ch; margin-bottom:1.6rem; }
.spotify__embed{ border:1px solid var(--line); padding:.8rem; background:var(--coal); }
.spotify__note{ font-family:var(--f-mono); font-size:.7rem; color:var(--brass); margin-top:.7rem; opacity:.8; }
/* playlists coverflow */
.spotify__head{ max-width:760px; margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); text-align:center; }
.spotify__head .section-label{ color:var(--brass); }
.spotify__head h2{ margin:.3rem 0 1rem; }
.spotify__head p{ color:var(--paper-dim); margin:0 auto; max-width:48ch; }
.coverflow{ position:relative; margin:0; padding:0 clamp(2rem,4vw,3.2rem); overflow:hidden; }
.cf-stage{ position:relative; height:clamp(320px,38vw,560px); perspective:1700px; cursor:grab; transform-style:preserve-3d; display:flex; align-items:center; justify-content:center; touch-action:pan-y; outline:none; }
.cf-card{ position:absolute; width:clamp(220px,31vw,420px); aspect-ratio:1/1; border:0; padding:0; background:none; cursor:pointer; transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .4s; transform-style:preserve-3d; will-change:transform; }
.cf-card img{ width:100%; height:100%; object-fit:cover; border-radius:8px; box-shadow:0 22px 50px rgba(0,0,0,.6); display:block; -webkit-user-drag:none; user-select:none; }
.cf-card__title{ position:absolute; left:50%; transform:translateX(-50%); bottom:-1.9rem; white-space:nowrap; font-family:var(--f-mono); font-size:.72rem; letter-spacing:.06em; color:var(--paper-dim); opacity:0; transition:opacity .3s; }
.cf-card.is-active{ cursor:pointer; }
.cf-card.is-active img{ box-shadow:0 28px 64px rgba(0,0,0,.7), 0 0 0 2px var(--brass); }
.cf-card.is-active .cf-card__title{ opacity:1; color:var(--paper); }
.cf-arrow{ position:absolute; z-index:200; top:50%; transform:translateY(-50%); background:#fff; border:1px solid #fff; color:#141414; width:58px; height:58px; border-radius:50%; font-size:2.2rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.7); transition:background .2s, border-color .2s, transform .2s; }
.cf-arrow:active{ transform:translateY(-50%) scale(.92); }
.cf-arrow:hover{ background:#fff; border-color:#fff; transform:translateY(-50%) scale(1.06); }
.cf-arrow--prev{ left:clamp(.2rem,2vw,1.5rem); }
.cf-arrow--next{ right:clamp(.2rem,2vw,1.5rem); }
.cf-player{ margin:0; padding:0; text-align:center; }
.spotify__cols{ max-width:var(--maxw); margin:clamp(2.2rem,4vw,3.4rem) auto 0; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1.75fr 1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
@media(max-width:880px){ .spotify__cols{ grid-template-columns:1fr; gap:2.5rem; } }
.cf-player iframe{ border-radius:12px; min-height:352px; }
.cf-player .btn{ margin-top:1.3rem; }

/* ============================================================ WORK */
.work{ padding:clamp(1.6rem,3vw,2.6rem) 0; background:var(--cream); color:var(--ink); }
.work__head{ max-width:var(--maxw); margin:0 auto 2.6rem; padding:0 clamp(1.2rem,5vw,4rem); }
.work__head .section-label{ color:var(--rust); }
.work__head h2{ margin-bottom:.5rem; }
.work__subtitle{ font-family:var(--f-groove); font-size:clamp(1.3rem,3vw,2.1rem); line-height:1.12; color:var(--rust); max-width:30ch; margin:0; }
.work__grid{ max-width:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:2px; }
.work .amb-band{ width:min(var(--maxw), calc(100% - 2*clamp(1.2rem,5vw,4rem))); margin-left:auto; margin-right:auto; }
.card{ position:relative; background-color:#15110b; background-size:cover; background-position:center; color:var(--paper); padding:2.2rem clamp(1.4rem,2.2vw,2.4rem) 2rem; min-height:clamp(380px,46vw,460px); display:flex; flex-direction:column; transition:transform .35s; overflow:hidden; }
/* gradient scrim so the text reads over the photo */
.card::after{ content:''; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg, rgba(10,9,7,.35) 0%, rgba(10,9,7,.55) 45%, rgba(10,9,7,.9) 100%); }
.card::before{ content:''; position:absolute; inset:0; z-index:1; opacity:.05; background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 7px); }
.card > *{ position:relative; z-index:2; }
.card:hover{ transform:translateY(-8px); }
.card:hover::after{ background:linear-gradient(180deg, rgba(10,9,7,.25) 0%, rgba(10,9,7,.5) 45%, rgba(10,9,7,.88) 100%); }
.card__no{ font-family:var(--f-mono); font-size:.72rem; color:var(--rust); letter-spacing:.2em; }
/* minimalist line icons */
.card__icon{ position:relative; z-index:1; display:block; width:68px; height:68px; margin:1.3rem auto .6rem; color:var(--brass); }
.card__icon svg{ width:100%; height:100%; overflow:visible; }
.card__icon .ico-spin{ transform-box:fill-box; transform-origin:center; }
.card:hover .card__icon{ color:var(--rust); }
.card:hover .ico-spin{ animation:icoSpin 3.2s linear infinite; }
.card:hover .ico-arm{ animation:icoArm 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:right top; }
.card:hover .ico-wave{ animation:icoWave 1.6s ease-in-out infinite; }
.card:hover .ico-rec{ animation:icoRec 1.8s ease-in-out infinite; }
.card:hover .ico-rec--2{ animation-delay:.12s; }
.card:hover .ico-rec--3{ animation-delay:.24s; }
.card:hover .ico-rec--4{ animation-delay:.36s; }
.card:hover .ico-shine{ animation:icoShine 2.4s ease-in-out infinite; }
@keyframes icoSpin{ to{ transform:rotate(360deg); } }
@keyframes icoArm{ 0%,100%{ transform:rotate(0deg); } 50%{ transform:rotate(7deg); } }
@keyframes icoWave{ 0%,100%{ opacity:.4; transform:translateY(1px); } 50%{ opacity:1; transform:translateY(-1px); } }
@keyframes icoRec{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } }
@keyframes icoShine{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }
.card h3{ font-family:var(--f-groove); font-weight:400; text-transform:none; font-size:1.55rem; margin:.6rem 0 .9rem; line-height:1.05; }
.card p{ font-size:.92rem; color:var(--paper-dim); flex:1; }
.card__tag{ font-family:var(--f-mono); font-size:.64rem; letter-spacing:.14em; color:var(--brass); margin-top:1rem; }

/* ============================================================ DOC */
.doc{ padding:clamp(5rem,12vw,10rem) 0; background:linear-gradient(180deg,rgba(11,10,8,.82),rgba(20,16,9,.86)); overflow:hidden; }
.doc__plate{ position:absolute; inset:0; opacity:.05; mix-blend-mode:overlay; background:repeating-linear-gradient(45deg,#fff 0 1px,transparent 1px 8px); }
.doc__inner{ position:relative; max-width:1100px; margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); }
.doc__head{ text-align:center; margin-bottom:2.6rem; }
.doc__head .section-label{ color:var(--brass); }
.doc__title{ font-family:var(--f-groove); font-size:clamp(3rem,11vw,8rem); line-height:.95; color:var(--bone); text-transform:none; letter-spacing:.01em; }
.doc__title-logo{ width:clamp(280px,55vw,720px); height:auto; margin:.4rem auto .2rem; filter:drop-shadow(0 8px 30px rgba(0,0,0,.6)); }
.doc__relic{ max-width:40ch; margin:1.4rem auto .3rem; font-family:var(--f-groove); font-size:clamp(1.3rem,2.6vw,2rem); line-height:1.15; color:var(--rust); }
.doc__relic strong{ color:var(--brass); }
.doc__tag{ max-width:46ch; margin:1rem auto 0; color:var(--paper-dim); font-size:1.05rem; }
.doc__intro{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4rem); align-items:center; margin:clamp(2.5rem,5vw,4rem) 0; }
.doc__rej-polaroid{ margin:0 auto; background:#f3eee2; padding:15px 15px 46px; border-radius:2px; box-shadow:0 32px 70px rgba(0,0,0,.6); transform:rotate(-3deg); max-width:360px; cursor:zoom-in; transition:transform .3s, box-shadow .3s; }
.doc__rej-polaroid:hover{ transform:rotate(-1deg) scale(1.02); box-shadow:0 40px 84px rgba(0,0,0,.7); }
.doc__rej-polaroid img{ width:100%; display:block; filter:contrast(1.05) saturate(.95); }
.doc__rej-polaroid figcaption{ font-family:var(--f-mono); text-align:center; color:#2a2620; padding-top:1rem; font-size:.82rem; letter-spacing:.06em; }
.doc__intro-lead{ font-family:var(--f-groove); font-size:clamp(1.7rem,4vw,2.8rem); color:var(--bone); line-height:1.05; margin-bottom:1.2rem; }
.doc__intro-text p{ color:var(--paper-dim); margin-bottom:1rem; }
.doc__intro-text strong{ color:var(--paper); }
.video-frame{ position:relative; aspect-ratio:16/9; overflow:hidden; border:1px solid var(--line); box-shadow:0 30px 70px rgba(0,0,0,.6); cursor:pointer; background:#000; }
.video-frame__poster{ width:100%; height:100%; object-fit:cover; transition:transform .6s, filter .4s; filter:brightness(.8) contrast(1.05); }
.video-frame:hover .video-frame__poster{ transform:scale(1.04); filter:brightness(.62); }
.video-frame__play{ position:absolute; inset:0; margin:auto; width:96px; height:96px; background:none; border:0; cursor:pointer; }
.video-frame__play svg{ width:100%; height:100%; }
.video-frame__play circle{ fill:rgba(177,74,34,.85); transition:.25s; }
.video-frame:hover .video-frame__play circle{ fill:var(--rust); }
.video-frame__play path{ fill:var(--bone); }
.video-frame__badge{ position:absolute; top:1rem; left:1rem; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; background:var(--ink); color:var(--brass); padding:.4em .8em; border:1px solid var(--line); }
.doc__meta{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); margin-top:2.5rem; align-items:center; }
.doc__about p{ color:var(--paper-dim); margin-bottom:1rem; }
.doc__about strong{ color:var(--paper); }
.doc__about a{ color:var(--brass); }
.doc__wiki-line{ display:flex; align-items:center; gap:.7rem; }
.doc__wiki-logo{ height:26px; width:auto; flex:0 0 auto; filter:invert(1) brightness(1.6); transition:transform .2s; }
.doc__wiki-line a:hover .doc__wiki-logo{ transform:translateY(-2px); }
.doc__credit{ font-family:var(--f-mono); font-size:.82rem; letter-spacing:.04em; color:var(--paper-dim) !important; border-top:1px solid var(--line); padding-top:1rem; margin-top:1.4rem; }
.doc__credit a, .livication__credit a{ color:var(--brass); }
.doc__logos{ display:flex; align-items:center; gap:1.6rem; margin-top:1.6rem; }
.doc__lion{ width:78px; opacity:.92; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5)); }
.doc__ampex{ width:130px; opacity:.9; }
.doc__bertha{ margin:0; }
.doc__bertha img{ width:100%; border:1px solid var(--line); border-radius:2px; box-shadow:0 26px 60px rgba(0,0,0,.6); filter:contrast(1.04) saturate(.95); }
.doc__bertha figcaption{ font-family:var(--f-mono); font-size:.74rem; letter-spacing:.04em; color:var(--paper-dim); margin-top:.9rem; text-align:center; }

/* ---------- Read more (expandable) ---------- */
.doc__more-wrap{ text-align:center; margin-top:3rem; }
.doc__more-btn{ cursor:pointer; background:var(--brass); color:var(--ink); border:1px solid var(--brass); font-weight:700; letter-spacing:.06em; box-shadow:0 8px 26px rgba(207,155,70,.4); }
.doc__more-btn:hover{ background:var(--rust); border-color:var(--rust); color:var(--bone); box-shadow:0 8px 26px rgba(177,74,34,.45); }
.doc__more-btn.open{ background:var(--rust); border-color:var(--rust); color:var(--bone); }
.doc-more{ max-width:1000px; margin:2.6rem auto 0; }
.doc-more[hidden]{ display:none; }
.doc-more__block{ padding:clamp(2rem,5vw,3.4rem) 0; border-top:1px solid var(--line); }
.doc-more__block .section-label{ color:var(--brass); }
.doc-more__block h3{ font-family:var(--f-groove); font-weight:400; text-transform:none; font-size:clamp(1.6rem,3.6vw,2.6rem); line-height:1.06; margin:.3rem 0 1.2rem; color:var(--bone); }
.doc-more__block p{ color:var(--paper-dim); margin-bottom:1rem; max-width:68ch; }
.doc-more__block strong{ color:var(--paper); }
.doc-more__intro{ border-top:0; }
.doc-more__lede{ font-size:1.05rem; }
.doc-more__cards{ display:grid; gap:1px; background:var(--line); border:1px solid var(--line); }
.doc-more__cards p{ margin:0; background:var(--coal); padding:1.3rem 1.5rem; font-family:var(--f-groove); font-size:clamp(1rem,2vw,1.35rem); line-height:1.3; color:var(--paper); max-width:none; }
.doc-more__cards strong{ color:var(--brass); }

/* story + tape slider side by side */
.doc-more__row{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.6rem,4vw,3.2rem); align-items:start; }
.doc-more__row > .doc-more__block{ border-top:0; padding-top:clamp(1.2rem,3vw,2rem); }
@media(max-width:820px){ .doc-more__row{ grid-template-columns:1fr; gap:0; } }

/* "A short history of the machine" — scattered paper scraps */
.doc-more__cards.paper-scatter{ display:flex; flex-wrap:wrap; justify-content:center; align-items:flex-start;
  gap:clamp(1rem,2.5vw,2rem) clamp(1.2rem,3vw,2.4rem); background:none; border:0; padding:1rem 0 2rem; }
.paper-scatter p{ flex:0 1 clamp(220px,30%,320px); margin:0; background:#ece3cf; color:#221b10; max-width:none;
  font-family:var(--f-groove); font-size:clamp(1.18rem,2vw,1.46rem); line-height:1.36; padding:1.5rem 1.6rem 1.7rem;
  box-shadow:0 16px 34px rgba(0,0,0,.5); position:relative; border-radius:1px;
  background-image:linear-gradient(180deg, rgba(0,0,0,.02), rgba(0,0,0,.05)); }
.paper-scatter p::before{ content:''; position:absolute; top:-11px; left:50%; width:74px; height:24px; transform:translateX(-50%) rotate(-3deg);
  background:rgba(212,168,108,.5); box-shadow:0 2px 6px rgba(0,0,0,.25);
  clip-path:polygon(2% 12%,98% 0%,100% 86%,1% 100%); }
.paper-scatter p strong{ color:#7a3417; }
.paper-scatter p:nth-child(1){ transform:rotate(-2.4deg); }
.paper-scatter p:nth-child(2){ transform:rotate(1.8deg) translateY(14px); }
.paper-scatter p:nth-child(3){ transform:rotate(-1.2deg) translateY(-8px); }
.paper-scatter p:nth-child(4){ transform:rotate(2.6deg) translateY(10px); }
.paper-scatter p:nth-child(5){ transform:rotate(-1.8deg); }
.paper-scatter p:hover{ transform:rotate(0deg) scale(1.03); z-index:3; box-shadow:0 22px 46px rgba(0,0,0,.6); transition:transform .25s; }
.doc-more__history h3, .doc-more__history .section-label{ text-align:center; }

.doc-more__collapse{ text-align:center; padding:1rem 0 .5rem; }

/* tape/track slider */
.tapeslider{ margin-top:1.6rem; }
.tapeslider__viewport{ position:relative; aspect-ratio:16/9; background:radial-gradient(120% 120% at 50% 20%, #1a1611, #0a0a0b); border:1px solid var(--line); overflow:hidden; border-radius:3px; }
.tapeslider__viewport svg{ width:100%; height:100%; display:block; }
.tapeslider__viewport svg path{ transition:none; }
/* the track waves scroll like running tape */
.tapeslider__viewport svg .tape-tracks{ animation:tapeRun 2.6s linear infinite; will-change:transform; }
@keyframes tapeRun{ from{ transform:translateY(0); } to{ transform:translateY(var(--tape-wl,116.667px)); } }
@media (prefers-reduced-motion:reduce){ .tapeslider__viewport svg .tape-tracks{ animation:none; } }
.tapeslider__readout{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; text-align:center; gap:.25rem; text-shadow:0 2px 14px #000, 0 0 32px #000; pointer-events:none; }
.tapeslider__readout span{ font-family:var(--f-mono); font-size:.9rem; letter-spacing:.1em; color:var(--paper); }
.tapeslider__readout b{ font-family:var(--f-display); font-size:clamp(2.4rem,6vw,3.6rem); color:var(--bone); line-height:1; }
.tapeslider__readout i{ font-family:var(--f-mono); font-style:normal; font-size:.78rem; letter-spacing:.08em; color:var(--rust); opacity:0; transition:opacity .25s; }
.tapeslider__readout i.show{ opacity:1; }
.tapeslider__range{ -webkit-appearance:none; appearance:none; width:100%; height:4px; margin:1.6rem 0 .9rem; background:linear-gradient(90deg,var(--rust),var(--brass)); border-radius:3px; cursor:pointer; }
.tapeslider__range::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; border-radius:50%; background:var(--bone); border:3px solid var(--rust); cursor:grab; box-shadow:0 3px 10px rgba(0,0,0,.5); }
.tapeslider__range::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--bone); border:3px solid var(--rust); cursor:grab; }
.tapeslider__ticks{ display:flex; justify-content:space-between; gap:.5rem; margin-top:.3rem; }
.tapeslider__ticks button{ flex:1; background:rgba(255,255,255,.04); border:1px solid var(--line); border-radius:7px; cursor:pointer;
  font-family:var(--f-mono); font-size:.74rem; letter-spacing:.03em; color:var(--paper-dim); padding:.75em .35em; min-height:42px;
  transition:color .18s, background .18s, border-color .18s, transform .12s, box-shadow .18s; white-space:nowrap; }
.tapeslider__ticks button:hover{ color:var(--paper); border-color:var(--rust); background:rgba(177,74,34,.14); transform:translateY(-2px); }
.tapeslider__ticks button.active{ color:var(--bone); background:var(--rust); border-color:var(--rust); box-shadow:0 4px 14px rgba(177,74,34,.4); }
.tapeslider__ticks button.is-bertha{ color:var(--rust); font-weight:700; }
.tapeslider__ticks button.is-bertha.active{ color:var(--bone); background:var(--rust); box-shadow:0 0 16px rgba(177,74,34,.6); }
.tapeslider__note{ font-family:var(--f-mono); font-size:.84rem; color:var(--paper-dim); margin-top:1rem; min-height:2.4em; }

/* wikipedia block */
.wiki{ display:grid; grid-template-columns:1.2fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.wiki__logo{ height:96px; width:auto; margin-bottom:1.4rem; filter:invert(1) brightness(1.6); }
.wiki blockquote{ border-left:2px solid var(--rust); padding-left:1rem; margin:0 0 1rem; font-family:var(--f-body); font-style:italic; color:var(--paper); max-width:60ch; }
.wiki__fig{ margin:0; }
.wiki__fig img{ width:100%; border:1px solid var(--line); border-radius:2px; box-shadow:0 20px 50px rgba(0,0,0,.5); filter:saturate(.9); }
.wiki__fig figcaption{ font-family:var(--f-mono); font-size:.7rem; line-height:1.5; color:var(--paper-dim); margin-top:.8rem; }
.wiki__fig figcaption span{ display:block; opacity:.6; margin-top:.3rem; }

/* ---------- "in his own words" — 3D page-flip book ---------- */
.rejbook{ margin:1.6rem 0 0; perspective:3000px; }
.rejbook__book{ position:relative; width:100%; aspect-ratio:2 / 1.18; max-height:74vh; transform-style:preserve-3d; }
.rejbook__base{ position:absolute; top:0; width:50%; height:100%; }
.rejbook__base--left{ left:0; z-index:1; }
.rejbook__base--right{ left:50%; z-index:1; }
.rejbook__leaf{ position:absolute; top:0; left:50%; width:50%; height:100%; transform-origin:left center; transform-style:preserve-3d; transition:transform .9s cubic-bezier(.45,0,.2,1); cursor:pointer; }
.rejbook__leaf.flipped{ transform:rotateY(-180deg); }
.rejbook__face{ position:absolute; inset:0; backface-visibility:hidden; -webkit-backface-visibility:hidden; }
.rejbook__face--back{ transform:rotateY(180deg); }
.rejpage{ position:absolute; inset:0; background:#f1e7d0; color:#221b10; padding:clamp(1.6rem,3.2vw,3.4rem) clamp(1.8rem,3.6vw,3.6rem);
  display:flex; flex-direction:column; justify-content:center; overflow:hidden;
  background-image:radial-gradient(rgba(80,55,25,.09) 1px, transparent 1.4px); background-size:7px 7px; }
.rejpage p{ font-family:var(--f-body); font-size:clamp(1.05rem,1.5vw,1.5rem); line-height:1.55; color:#2a2014; }
.rejpage p + p{ margin-top:.85rem; }
.rejpage__num{ position:absolute; bottom:.9rem; left:50%; transform:translateX(-50%); font-family:var(--f-mono); font-size:.68rem; letter-spacing:.12em; color:#9a8866; }
/* spine shading */
.rejbook__face--front .rejpage, .rejbook__base--right .rejpage{ box-shadow:inset 16px 0 34px -20px rgba(0,0,0,.55); border-radius:0 3px 3px 0; }
.rejbook__face--back .rejpage, .rejbook__base--left .rejpage{ box-shadow:inset -16px 0 34px -20px rgba(0,0,0,.55); border-radius:3px 0 0 3px; }
/* cover / closing pages */
.rejpage--title{ background:linear-gradient(150deg,#27211a,#16110b); color:var(--bone); align-items:center; justify-content:center; text-align:center; gap:.6rem; }
.rejpage--title .q{ font-family:var(--f-groove); font-size:clamp(4.5rem,11vw,9rem); color:var(--rust); line-height:.55; }
.rejpage--title b{ font-family:var(--f-groove); font-weight:400; font-size:clamp(1.5rem,3.2vw,2.4rem); color:var(--bone); max-width:18ch; }
.rejpage--title span{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass); }
.rejbook__nav{ display:flex; align-items:center; justify-content:center; gap:1.4rem; margin-top:1.3rem; }
.rejbook__btn{ font-family:var(--f-mono); font-size:1.2rem; line-height:1; color:var(--bone); background:var(--rust); border:0; width:46px; height:46px; border-radius:50%; cursor:pointer; transition:background .2s, color .2s; }
.rejbook__btn:hover{ background:var(--brass); color:var(--ink); }
.rejbook__btn:disabled{ opacity:.32; cursor:default; }
.rejbook__count{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.12em; color:var(--paper-dim); min-width:5ch; text-align:center; }
@media(max-width:720px){ .rejbook__book{ aspect-ratio:1 / 1.3; } .rejpage{ padding:1.3rem 1.4rem; } }

/* transcript (no-JS fallback source) */
.transcript{ columns:2; column-gap:2.5rem; }
.transcript p{ font-size:.92rem; line-height:1.55; color:var(--paper-dim); break-inside:avoid; margin-bottom:1rem; }
.transcript p:first-child{ color:var(--paper); }
/* big decorative quotes wrapping the transcript */
.transcript--quoted{ position:relative; columns:2; column-gap:2.5rem; padding:2.6rem 2.2rem 2.4rem; }
.transcript--quoted::before, .transcript--quoted::after{ position:absolute; font-family:var(--f-groove); color:var(--rust); opacity:.32; line-height:.7; pointer-events:none; z-index:0; }
.transcript--quoted::before{ content:'“'; top:-.2rem; left:-.6rem; font-size:clamp(5rem,10vw,9rem); }
.transcript--quoted::after{ content:'”'; right:-.4rem; bottom:-2.6rem; font-size:clamp(5rem,10vw,9rem); }
.transcript--quoted p{ position:relative; z-index:1; }
@media(max-width:900px){ .transcript--quoted{ columns:1; padding:2.4rem 1.4rem; } }

/* livication */
.livication{ display:grid; grid-template-columns:.7fr 1.3fr; gap:clamp(1.5rem,4vw,3rem); align-items:center; }
.livication__portrait{ margin:0; }
.livication__portrait img{ width:100%; border:1px solid var(--line); border-radius:2px; filter:grayscale(.3) contrast(1.05); box-shadow:0 22px 55px rgba(0,0,0,.6); }
.livication__text h3{ margin-bottom:1rem; }
.livication__text h3 span{ font-family:var(--f-mono); font-size:1rem; letter-spacing:.1em; color:var(--brass); -webkit-text-fill-color:initial; }
.livication__credit{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.03em; border-top:1px solid var(--line); padding-top:1.1rem; margin-top:1.4rem; }

/* ============================================================ VISIT */
.visit{ padding:clamp(5rem,11vw,9rem) 0; --grad:linear-gradient(rgba(26,58,30,.74),rgba(15,38,20,.86));
  background-color:var(--ink); background-image:var(--grad); background-size:cover; background-position:center; background-attachment:fixed; }
.visit__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1fr 1fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.visit__badge{ width:clamp(108px,13vw,150px); height:auto; display:block; margin:0 0 1.4rem; filter:drop-shadow(0 8px 20px rgba(0,0,0,.55)); }
.visit__copy .section-label{ color:var(--brass); }
.visit__copy h2{ margin:0 0 1.3rem; }
.visit__copy p{ color:var(--paper-dim); max-width:42ch; margin-bottom:1.8rem; }
.visit__copy strong{ color:var(--paper); }
.visit__list{ list-style:none; border-top:1px solid var(--line); }
.visit__list li{ display:flex; gap:1.5rem; padding:1rem 0; border-bottom:1px solid var(--line); align-items:baseline; }
.visit__list span{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.18em; text-transform:uppercase; color:var(--paper-dim); width:64px; flex:0 0 auto; }
.visit__list a{ font-family:var(--f-display); font-size:1.25rem; text-transform:uppercase; transition:color .2s; }
.visit__list a:hover{ color:var(--rust); }
.visit__list a[href^="mailto:"]{ font-family:var(--f-body); font-size:1.05rem; text-transform:none; letter-spacing:.005em; word-break:break-all; }
.visit__socials{ display:flex; flex-wrap:wrap; gap:1.2rem; margin-top:1.8rem; font-family:var(--f-mono); font-size:.76rem; letter-spacing:.1em; }
.visit__socials a{ color:var(--paper-dim); transition:.2s; }
.visit__socials a:hover{ color:var(--brass); }
.visit__photo{ position:relative; }
.visit__caption{ font-family:var(--f-mono); font-size:.74rem; color:var(--paper-dim); text-align:center; margin-top:.9rem; letter-spacing:.06em; }

/* ============================================================ FOOTER */
.footer{ background:rgba(11,10,8,.8); text-align:center; padding:clamp(3.5rem,8vw,6rem) 1.5rem; border-top:1px solid var(--line); }
.footer__mark{ height:84px; width:auto; margin:0 auto 1.4rem; }
.footer__tag{ font-family:var(--f-mono); font-size:.78rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); }
.footer__platforms{ display:flex; justify-content:center; gap:1.8rem; margin:1.8rem 0 .4rem; }
.footer__platforms a{ opacity:.7; transition:opacity .2s, transform .2s; }
.footer__platforms a:hover{ opacity:1; transform:translateY(-2px); }
.footer__platforms img{ height:20px; width:auto; }
.footer__small{ margin-top:1.4rem; font-size:.84rem; color:var(--paper-dim); }
.footer__credit{ font-family:var(--f-groove); color:var(--brass); margin-top:.6rem; font-size:1.1rem; }

/* ============================================================ PERSISTENT CREDIT */
.site-credit{ position:fixed; right:14px; bottom:11px; z-index:9400; display:flex; align-items:center; gap:9px;
  opacity:.42; transition:opacity .3s; pointer-events:none; }
.site-credit:hover{ opacity:.95; }
.site-credit a{ pointer-events:auto; display:flex; align-items:center; transition:transform .2s; }
.site-credit a:hover{ transform:translateY(-2px); }
.site-credit__label{ font-family:var(--f-mono); font-size:.58rem; letter-spacing:.16em; text-transform:uppercase; color:var(--paper-dim); }
.site-credit img{ height:38px; width:auto; filter:brightness(1.5) contrast(1.05); }
.site-credit__mats{ height:47px !important; }
@media (max-width:600px){ .site-credit__label{ display:none; } .site-credit img{ height:30px; } .site-credit__mats{ height:37px !important; } }

/* ============================================================ REELS */
/* cream paper band — the Instagram embeds are always white (IG has no dark mode), so they sit on cream */
.reels{ padding:clamp(4.5rem,10vw,8rem) 0; --grad:linear-gradient(rgba(11,10,8,.82),rgba(11,10,8,.9)); background-color:var(--ink); background-image:var(--grad); background-size:cover; background-position:center; background-attachment:fixed; color:var(--paper); overflow:hidden; }
.reels__head{ max-width:var(--maxw); margin:0 auto 2.2rem; padding:0 clamp(1.2rem,5vw,4rem); }
.reels__head .section-label{ color:var(--rust); }
.reels__sub{ margin-top:1rem; color:var(--paper-dim); max-width:54ch; }
.reels__sub a{ color:var(--rust); }
.reels__strip{ display:flex; gap:1rem; overflow-x:auto; padding:.5rem clamp(1.2rem,5vw,4rem) 1rem; scroll-snap-type:x proximity; scrollbar-width:none; -ms-overflow-style:none; touch-action:pan-x pan-y; cursor:grab; }
.reels__strip.dragging{ cursor:grabbing; user-select:none; scroll-snap-type:none; }
.reels__strip .reel-wrap{ -webkit-user-drag:none; user-select:none; }
.reels__strip::-webkit-scrollbar{ display:none; }
/* custom, always-visible scrollbar */
.reels__scrollbar{ position:relative; height:9px; margin:.4rem clamp(1.2rem,5vw,4rem) 0; background:rgba(255,255,255,.14); border-radius:6px; cursor:pointer; }
.reels__scrollthumb{ position:absolute; top:0; left:0; height:100%; min-width:48px; width:30%; background:var(--rust); border-radius:6px; cursor:grab; transition:background .2s; touch-action:none; }
.reels__scrollthumb:hover{ background:var(--brass); }
.reels__scrollbar.grabbing .reels__scrollthumb{ cursor:grabbing; background:var(--brass); }
.reel{ flex:0 0 auto; width:clamp(190px,21vw,270px); aspect-ratio:9/16; position:relative; overflow:hidden;
  border:1px solid var(--line); border-radius:4px; scroll-snap-align:start; background:#000; padding:0; cursor:pointer;
  box-shadow:0 18px 40px rgba(0,0,0,.5); transition:transform .3s, border-color .3s; }
.reel:hover{ transform:translateY(-6px); border-color:var(--rust); }
.reel img{ width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.04) saturate(.95); }
.reel__play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:2.4rem; color:var(--bone);
  text-shadow:0 3px 16px rgba(0,0,0,.8); opacity:.82; transition:.25s; pointer-events:none;
  background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.28), transparent 62%); }
.reel:hover .reel__play{ opacity:1; transform:scale(1.12); color:var(--brass); }
/* Instagram reel embeds */
/* wrapper is the flex item + the tap target; the iframe inside is non-interactive so a finger-drag pans the strip and a tap opens the reel */
/* crop the white Instagram chrome (header + footer) so only the reel media shows, framed in our dark card */
.reel-wrap{ flex:0 0 auto; width:clamp(260px,24vw,320px); aspect-ratio:1 / 1.10; height:auto; display:block; position:relative; overflow:hidden;
  border:1px solid rgba(207,155,70,.32); border-radius:8px; background:#0c0b09; scroll-snap-align:start; box-shadow:0 18px 40px rgba(0,0,0,.6); }
.reel-embed{ position:absolute; top:-66px; left:0; width:100%; height:600px; border:0; background:#0c0b09; display:block; pointer-events:none; }
.reels__cta{ text-align:center; margin-top:2rem; }
/* reel modal */
.reelmodal{ position:fixed; inset:0; z-index:1200; display:none; align-items:center; justify-content:center;
  background:rgba(5,4,3,.94); backdrop-filter:blur(6px); padding:clamp(1rem,4vw,3rem); }
.reelmodal.open{ display:flex; }
.reelmodal__stage{ display:flex; flex-direction:column; align-items:center; gap:1rem; max-height:100%; }
.reelmodal__stage video{ max-height:82vh; max-width:min(440px,92vw); aspect-ratio:9/16; width:auto; background:#000;
  border-radius:6px; box-shadow:0 30px 80px rgba(0,0,0,.7); }
.reelmodal__ig{ font-family:var(--f-mono); font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--brass); }
.reelmodal__close{ position:absolute; top:1.2rem; right:1.4rem; width:48px; height:48px; border-radius:50%; border:1px solid var(--line);
  background:rgba(0,0,0,.5); color:var(--paper); font-size:1.8rem; line-height:1; cursor:pointer; transition:.2s; }
.reelmodal__close:hover{ background:var(--rust); border-color:var(--rust); }

/* ---------- ambiance manual nav (back/forth) ---------- */
.rotator{ position:relative; }
.rot-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:5; width:46px; height:46px; border-radius:50%;
  background:rgba(11,10,8,.55); border:1px solid rgba(255,255,255,.25); color:var(--bone); font-size:1.5rem; cursor:pointer;
  display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .25s, background .2s; backdrop-filter:blur(4px); }
.rotator:hover .rot-nav{ opacity:1; }
.rot-nav:hover{ background:var(--rust); border-color:var(--rust); }
.rot-nav--prev{ left:14px; }
.rot-nav--next{ right:14px; }
@media (hover:none){ .rot-nav{ opacity:.85; } }
/* hero rotator nav: lives on .hero (above scrim/content), visible without hover */
/* hero rotator nav: a small row sitting just below the call-to-action buttons */
.hero__rotnav{ display:flex; gap:.6rem; margin-top:.2rem; }
.rot-nav--hero{ position:static; top:auto; left:auto; right:auto; transform:none; z-index:auto; opacity:.85; }
.hero:hover .rot-nav--hero{ opacity:1; }

/* ============================================================ MAP */
.map{ padding:clamp(4.5rem,10vw,8rem) 0; background:rgba(11,10,8,.78); overflow:hidden; }
.map__head{ max-width:var(--maxw); margin:0 auto 2.4rem; padding:0 clamp(1.2rem,5vw,4rem); }
.map__head .section-label{ color:var(--brass); }
.map__sub{ margin-top:1rem; color:var(--paper-dim); max-width:52ch; }
.map__grid{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1.5fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:stretch; }
.map__canvas{ position:relative; border:1px solid var(--line); border-radius:3px; overflow:hidden; box-shadow:0 24px 60px rgba(0,0,0,.5); min-height:420px; }
#leafletMap{ position:absolute; inset:0; width:100%; height:100%; background:#0c100d; z-index:1; }
.leaflet-container{ background:#0c100d; font-family:var(--f-mono); }
.leaflet-popup-content-wrapper, .leaflet-popup-tip{ background:var(--coal); color:var(--paper); border:1px solid var(--line); }
.leaflet-popup-content{ font-family:var(--f-body); font-size:.85rem; }
.leaflet-control-zoom a{ background:var(--coal) !important; color:var(--paper) !important; border-color:var(--line) !important; }
.leaflet-bar a:hover{ background:var(--rust) !important; }
.ew-pin span{ display:block; width:18px; height:18px; border-radius:50%; background:var(--rust); border:3px solid var(--bone); box-shadow:0 0 0 4px rgba(177,74,34,.4), 0 4px 10px rgba(0,0,0,.6); }
@keyframes mappulse{ 0%{ transform:scale(.6); opacity:.6; } 70%{ transform:scale(2.4); opacity:0; } 100%{ opacity:0; } }
.map__chip{ position:absolute; left:1rem; bottom:1rem; z-index:500; pointer-events:none; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--bone); background:rgba(177,74,34,.92); padding:.5em .9em; border-radius:3px; }
.map__info{ display:flex; flex-direction:column; justify-content:center; }
.map__list{ list-style:none; border-top:1px solid var(--line); margin-bottom:1.6rem; }
.map__list li{ padding:1rem 0; border-bottom:1px solid var(--line); color:var(--paper-dim); font-size:.95rem; line-height:1.5; }
.map__list span{ display:block; font-family:var(--f-mono); font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--brass); margin-bottom:.35rem; }
.map__list strong{ color:var(--paper); font-size:1.05rem; }
.map__btns{ display:flex; flex-wrap:wrap; gap:.8rem; }
.map__qr{ margin-top:1.6rem; display:flex; gap:1rem; align-items:center; border:1px solid var(--line); padding:.9rem; border-radius:3px; background:var(--coal); }
.map__qr[hidden]{ display:none; }
.map__qr img{ width:110px; height:110px; border-radius:3px; flex:0 0 auto; }
.map__qr p{ font-family:var(--f-mono); font-size:.76rem; color:var(--paper-dim); line-height:1.5; margin:0; }

/* ============================================================ FAQ */
.faq{ padding:clamp(4.5rem,10vw,8rem) 0; background:var(--cream); color:var(--ink); }
.faq__head{ max-width:var(--maxw); margin:0 auto 2.2rem; padding:0 clamp(1.2rem,5vw,4rem); }
.faq__head .section-label{ color:var(--rust); }
.faq__layout{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); }
.faq__list{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.4rem,3vw,2.4rem) clamp(2rem,4vw,3.4rem); align-items:start; }
/* always-open: the question + answer show together, no clicking */
.faq__item{ border-top:2px solid rgba(11,10,8,.18); padding-top:1.1rem; }
.faq__item summary{ cursor:default; pointer-events:none; list-style:none; padding:0 0 .55rem; font-family:var(--f-display); font-weight:400; text-transform:uppercase; font-size:clamp(1.05rem,2vw,1.35rem); line-height:1.1; color:var(--ink); }
.faq__item summary::-webkit-details-marker{ display:none; }
.faq__a{ padding:0; }
.faq__a p{ color:#3a3228; font-size:1rem; line-height:1.6; max-width:62ch; }
.faq__a a{ color:var(--rust); text-decoration:underline; }
.faq__a em{ color:var(--rust-deep); }

/* ============================================================ CONTACT MODAL */
.modal{ position:fixed; inset:0; z-index:9600; display:flex; align-items:center; justify-content:center; padding:1.2rem; opacity:0; pointer-events:none; transition:opacity .3s; }
.modal.open{ opacity:1; pointer-events:auto; }
.modal__backdrop{ position:absolute; inset:0; background:rgba(6,5,4,.82); backdrop-filter:blur(6px); }
.modal__panel{ position:relative; z-index:2; width:min(760px,100%); max-height:92vh; overflow-y:auto; background:var(--coal); border:1px solid var(--line); border-radius:4px; padding:clamp(1.8rem,4vw,3rem); box-shadow:0 40px 90px rgba(0,0,0,.7); transform:translateY(16px) scale(.98); transition:transform .35s cubic-bezier(.2,.8,.2,1); }
.modal__pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 1.1rem; }
@media(max-width:520px){ .modal__pair{ grid-template-columns:1fr; } }
.modal.open .modal__panel{ transform:none; }
.modal__close{ position:absolute; top:1rem; right:1rem; background:none; border:0; color:var(--paper); font-size:1.5rem; cursor:pointer; line-height:1; opacity:.7; transition:.2s; }
.modal__close:hover{ opacity:1; transform:rotate(90deg); }
.modal__title{ font-size:clamp(1.8rem,5vw,2.6rem); margin:.2rem 0 .6rem; }
.modal__intro{ color:var(--paper-dim); margin-bottom:1.4rem; font-size:.95rem; }
.modal__form .field{ margin-bottom:1rem; }
.modal__form label{ display:block; font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:.4rem; }
.modal__form input, .modal__form textarea{ width:100%; background:var(--ink); border:1px solid var(--line); border-radius:3px; padding:.8em .9em; color:var(--paper); font-family:var(--f-body); font-size:.95rem; }
.modal__form input:focus, .modal__form textarea:focus{ outline:none; border-color:var(--rust); }
.modal__form .field__select{ width:100%; background:var(--ink); border:1px solid var(--line); border-radius:3px; padding:.8em .9em; color:var(--paper); font-family:var(--f-body); font-size:.95rem; cursor:pointer; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23cf9b46' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right .9em center; padding-right:2.4em; }
.modal__form .field__select:focus{ outline:none; border-color:var(--rust); }
.modal__form .field__opt{ text-transform:none; letter-spacing:0; color:var(--brass); font-size:.66rem; }
.modal__form textarea{ resize:vertical; }
.checks{ border:0; padding:0; margin:0 0 1.2rem; }
.checks legend{ font-family:var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:var(--paper-dim); margin-bottom:.7rem; padding:0; }
.checks__grid{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; }
@media(max-width:520px){ .checks__grid{ grid-template-columns:1fr; } }
.modal__form .check{ display:flex; align-items:center; gap:.75rem; text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:.92rem; color:var(--paper); margin:0; padding:.75rem .9rem; border:1px solid var(--line); border-radius:5px; cursor:pointer; transition:border-color .18s, background .18s; }
.modal__form .check input{ position:absolute; opacity:0; width:0; height:0; margin:0; }
.modal__form .check__ico{ display:block; width:28px; height:28px; min-width:28px; flex:0 0 28px; color:var(--brass); margin:0; transition:color .18s; }
.modal__form .check__ico svg{ width:28px; height:28px; display:block; }
.modal__form .check__txt{ line-height:1.2; }
.modal__form .check:hover{ border-color:var(--rust); }
.modal__form .check:has(input:checked){ border-color:var(--rust); background:rgba(177,74,34,.16); }
.modal__form .check:has(input:checked) .check__ico{ color:var(--rust); }
.ack input{ width:auto; accent-color:var(--rust); flex:0 0 auto; }
.ack{ display:flex; align-items:flex-start; gap:.7rem; text-transform:none; letter-spacing:0; font-family:var(--f-body); font-size:.95rem; color:var(--paper); line-height:1.55; margin:.4rem 0 1.4rem; cursor:pointer; background:rgba(177,74,34,.12); border-left:3px solid var(--rust); padding:.9rem 1rem; border-radius:0 3px 3px 0; }
.ack[hidden]{ display:none; }
.ack input{ margin-top:.2rem; }
.ack strong{ color:var(--brass); }
.modal__send{ width:100%; cursor:pointer; }
.modal__socials{ display:flex; flex-wrap:wrap; gap:.7rem 1rem; align-items:center; margin-top:1.4rem; padding-top:1.2rem; border-top:1px solid var(--line); font-family:var(--f-mono); font-size:.78rem; }
.modal__socials span{ color:var(--paper-dim); }
.modal__social{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; border:1px solid var(--line); border-radius:50%; color:var(--bone); transition:background .18s, border-color .18s, color .18s; }
.modal__social img, .modal__social svg{ width:20px; height:20px; display:block; }
.modal__social:hover{ background:var(--rust); border-color:var(--rust); color:var(--bone); }
body.modal-open{ overflow:hidden; }

/* inline contact section (below the FAQ) — same form on a coal panel, over the studio rug */
.contact{ padding:clamp(3.5rem,8vw,7rem) 1.5rem; --grad:linear-gradient(rgba(11,10,8,.86),rgba(11,10,8,.9));
  background-color:var(--ink); background-image:var(--grad); background-size:cover; background-position:center; background-attachment:fixed; }
.contact__panel{ width:min(760px,100%); margin:0 auto; background:var(--coal); border:1px solid var(--line); border-radius:4px; padding:clamp(1.8rem,4vw,3rem); box-shadow:0 30px 70px rgba(0,0,0,.5); }
.contact .modal__title{ margin-top:.2rem; }

/* ============================================================ MERCH */
.merch{ padding:clamp(4.5rem,10vw,8rem) 0; background:rgba(11,10,8,.78); overflow:hidden; }
.merch__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1fr 1.35fr; gap:clamp(2rem,5vw,4rem); align-items:center; }
.merch__copy .section-label{ color:var(--brass); }
.merch__copy h2{ margin:0 0 1.1rem; }
.merch__copy p{ color:var(--paper-dim); max-width:42ch; margin-bottom:1.6rem; }
.merch__photo{ margin:0; }
.merch__photo img{ width:100%; border:1px solid var(--line); border-radius:2px; box-shadow:0 26px 60px rgba(0,0,0,.55); filter:contrast(1.04) saturate(.95); }
.merch__photo figcaption{ font-family:var(--f-mono); font-size:.72rem; color:var(--paper-dim); margin-top:.8rem; text-align:center; }

/* ============================================================ PATREON */
.patreon{ padding:clamp(4.5rem,10vw,8rem) 0; background:var(--cream); color:var(--ink); }
/* slight paper grain on the cream sections (keeps the cream colour, adds texture) */
/* subtle repeating paper pattern on the cream sections */
.ethos, .work, .faq, .patreon, .distro{
  background-image:
    radial-gradient(rgba(60,40,20,.10) 1px, transparent 1.4px),
    radial-gradient(rgba(60,40,20,.07) 1px, transparent 1.4px);
  background-size:8px 8px, 8px 8px;
  background-position:0 0, 4px 4px;
}
.patreon__head{ max-width:760px; margin:0 auto 3rem; padding:0 clamp(1.2rem,5vw,4rem); text-align:center; }
.patreon__cta-row{ display:flex; align-items:center; justify-content:center; gap:1.2rem; flex-wrap:wrap; margin-top:.4rem; }
.patreon__logo{ height:40px; width:auto; margin:0; }
.tier__link{ display:inline-block; margin-top:1.3rem; font-family:var(--f-mono); font-size:.74rem; letter-spacing:.12em; text-transform:uppercase; color:var(--brass); border-bottom:1px solid currentColor; padding-bottom:2px; transition:color .2s; }
.tier--feature .tier__link{ color:var(--bone); }
.tier__link:hover{ color:var(--rust); }
.tier--feature .tier__link:hover{ color:var(--ink); }
.patreon__head .section-label{ color:var(--rust); }
.patreon__head h2{ margin:.2rem 0 .6rem; }
.patreon__subtitle{ font-family:var(--f-groove); font-size:clamp(1.3rem,3vw,2rem); line-height:1.12; color:var(--rust); max-width:32ch; margin:0 auto 1.3rem; }
.patreon__intro{ color:#3a3228; max-width:54ch; margin:0 auto 1.6rem; font-size:1.02rem; }
.patreon__tiers{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; align-items:start; }
.tier{ background:var(--ink); color:var(--paper); border-radius:4px; padding:2.2rem 1.7rem; position:relative; }
.tier--feature{ background:var(--rust); color:var(--bone); transform:scale(1.04); box-shadow:0 26px 55px rgba(0,0,0,.4); z-index:2; }
.tier__badge{ position:absolute; top:-12px; left:50%; transform:translateX(-50%); background:var(--brass); color:var(--ink); font-family:var(--f-mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; padding:.4em .9em; border-radius:3px; white-space:nowrap; }
/* tier icons — minimalist line marks, animate on hover */
.tier__icon{ display:block; width:62px; height:62px; margin:0 auto 1.1rem; color:var(--brass); }
.tier--feature .tier__icon{ color:var(--bone); }
.tier__icon svg{ width:100%; height:100%; overflow:visible; }
.tier__icon .tico-spin{ transform-box:fill-box; transform-origin:center; }
.tier__icon .tico-star{ transform-box:fill-box; transform-origin:center; }
.tier__icon .tico-dig{ transform-box:fill-box; transform-origin:24px 13px; }
.tier__icon .tico-buddy-a, .tier__icon .tico-buddy-b{ transform-box:fill-box; transform-origin:center; }
.tier:hover .tico-spin{ animation:icoSpin 3.4s linear infinite; }
.tier:hover .tico-star{ animation:icoShine 2s ease-in-out infinite; }
.tier:hover .tico-dig{ animation:ticoDig 1.6s ease-in-out infinite; }
.tier:hover .tico-buddy-a{ animation:ticoBuddyA 2.2s ease-in-out infinite; }
.tier:hover .tico-buddy-b{ animation:ticoBuddyB 2.2s ease-in-out infinite; }
@keyframes ticoDig{ 0%,100%{ transform:translateY(0) rotate(0); } 50%{ transform:translateY(-3px) rotate(-8deg); } }
@keyframes ticoBuddyA{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(-2.5px); } }
@keyframes ticoBuddyB{ 0%,100%{ transform:translateX(0); } 50%{ transform:translateX(2.5px); } }
.tier__price{ font-family:var(--f-display); font-size:2.8rem; line-height:1; display:block; margin-bottom:.5rem; }
.tier__price small{ font-family:var(--f-mono); font-size:.82rem; opacity:.7; }
.tier h3{ font-family:var(--f-display); font-weight:400; text-transform:uppercase; font-size:1.35rem; margin:0 0 1.1rem; letter-spacing:.01em; }
.tier ul{ list-style:none; }
.tier li{ font-size:.92rem; line-height:1.4; padding:.6rem 0; border-top:1px solid rgba(255,255,255,.12); }
.tier--feature li{ border-top-color:rgba(255,255,255,.25); }

/* ============================================================ LIGHTBOX */
.lightbox{ position:fixed; inset:0; z-index:9500; display:flex; align-items:center; justify-content:center;
  background:rgba(6,5,4,.94); backdrop-filter:blur(6px); opacity:0; pointer-events:none; transition:opacity .35s; }
.lightbox.open{ opacity:1; pointer-events:auto; }
.lightbox__stage{ max-width:88vw; max-height:86vh; display:flex; align-items:center; justify-content:center; will-change:transform, opacity; }
.lightbox__card{ background:#f3eee2; padding:16px 16px 48px; border-radius:2px; box-shadow:0 40px 90px rgba(0,0,0,.75); will-change:transform, opacity; }
.lightbox__card img{ max-width:80vw; max-height:72vh; width:auto; height:auto; object-fit:contain; display:block; }
.lightbox__close{ position:absolute; top:1.4rem; right:1.6rem; background:none; border:0; color:var(--paper); font-size:2rem; cursor:pointer; line-height:1; opacity:.8; transition:.2s; }
.lightbox__close:hover{ opacity:1; transform:rotate(90deg); }
.lightbox__nav{ position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,.4); border:1px solid var(--line); color:var(--paper); width:54px; height:54px; border-radius:50%; font-size:2rem; cursor:pointer; transition:.2s; display:flex; align-items:center; justify-content:center; }
.lightbox__nav:hover{ background:var(--rust); border-color:var(--rust); }
.lightbox__nav--prev{ left:clamp(1rem,3vw,3rem); }
.lightbox__nav--next{ right:clamp(1rem,3vw,3rem); }
.lightbox__count{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); font-family:var(--f-mono); font-size:.78rem; letter-spacing:.18em; color:var(--paper-dim); }
.lightbox.lb--single .lightbox__nav{ display:none; }

/* ============================================================ RESPONSIVE */
@media (min-width:1024px){
  body{ padding-left:168px; }
}
@media (max-width:1023px){
  .nav__burger{ display:flex; }
  /* full-height overlay (below the top bar) — a 3-column icon grid */
  .tape-menu{ top:var(--navh); left:0; right:0; bottom:0; width:auto; display:block; z-index:1100;
    background:rgba(8,6,4,.94); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
    opacity:0; pointer-events:none; transition:opacity .3s; transform:none; }
  .tape-menu.open{ opacity:1; pointer-events:auto; }
  .tape-menu__strip{ width:100%; max-width:none; height:100%; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:1px; overflow-y:auto;
    border-right:0; border-radius:0; clip-path:none; box-shadow:none; background:var(--line);
    pointer-events:none;   /* closed menu must NOT capture taps */
    transform:none; }
  .tape-menu.open .tape-menu__strip{ pointer-events:auto; }
  .tape-menu a{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.55rem; text-align:center;
    background:rgba(11,10,8,.97); padding:1rem .35rem; min-height:0; font-size:.72rem; letter-spacing:.1em; line-height:1.15; }
  .tape-menu a .menu-ico{ display:block; width:26px; height:26px; }
  .tape-menu a span{ font-family:var(--f-groove); text-transform:none; letter-spacing:.01em; font-size:1.02rem; line-height:1.05; }
  .tape-menu a.active{ background:var(--rust); color:var(--bone); }
}
@media (max-width:1120px){
  .nav__player{ display:none; }
}
@media (max-width:900px){
  .nav__platforms img{ height:20px; }
  .nav__platforms{ gap:1rem; }
  .ethos__cols{ grid-template-columns:1fr; gap:1.4rem; }
  .deck__inner, .spotify__inner, .visit__inner, .merch__inner{ grid-template-columns:1fr; }
  .doc__meta{ grid-template-columns:1fr; }
  .doc__logos{ flex-direction:row; justify-content:center; }
  .wiki, .livication{ grid-template-columns:1fr; }
  .map__grid{ grid-template-columns:1fr; }
  .transcript{ columns:1; }
  .doc-more__cards p{ font-size:1.05rem; }
  /* 'A short history of the machine': clean 2-col grid on phones instead of the scattered pile */
  .doc-more__cards.paper-scatter{ display:grid; grid-template-columns:1fr 1fr; gap:.8rem; padding:.8rem 0 1.4rem; }
  .paper-scatter p{ flex:none; transform:none !important; padding:1.1rem 1rem 1.2rem; font-size:.92rem; }
  .paper-scatter p::before{ display:none; }
  .work__grid{ grid-template-columns:repeat(2,1fr); }
  .platforms{ grid-template-columns:repeat(2,1fr); }
  .polaroids{ min-height:1000px; }   /* tighter so the rows overlap into a pile, not spread out */
  .amb-band{ aspect-ratio:16/9; }
  .amb-full{ min-height:clamp(320px,52vh,520px); }
  .parallax{ background-attachment:scroll; min-height:62vh; }
}
@media (max-width:560px){
  :root{ --navh:74px; }                      /* shorter bar on phones (logo is 55px here) */
  .work__grid{ grid-template-columns:1fr; }
  .platforms{ grid-template-columns:1fr 1fr; }   /* 2x2 grid on phones (was stacked) */
  .polaroid{ width:160px; }
  /* phones: bunch into an overlapping pile AND shift it right, leaving a ~60px empty gutter on the left so a finger-drag there scrolls the page (the polaroids themselves are touch-action:none for dragging) */
  .polaroids{ min-height:640px; margin:0 0 0 16vw; width:54vw; max-width:none; padding:1rem 0; }
  .lightbox__nav{ width:42px; height:42px; font-size:1.5rem; }
  .nav__platforms{ display:none; }          /* declutter the phone top bar — platforms live in the footer + menu */
  .nav__burger{ margin-left:auto; }         /* keep the burger pinned right once platforms are gone */
  .nav__brand img{ height:55px; }
  .faq__layout{ grid-template-columns:1fr; }   /* questions: single column on phones */
  .faq__list{ grid-template-columns:1fr; }
  /* tighter section tops so a tapped section's title sits near the top, not pushed mid-screen
     (placed after the base section rules so it actually wins) */
  .sounds, .work, .deck, .spotify, .reels, .merch, .visit, .map, .faq, .ethos, .room{ padding-top:2.8rem; padding-bottom:3.2rem; }
}
/* desktop/tablet: trim the generous section top padding so anchor jumps land the title near the top, not ~30% down */
@media (min-width:561px){
  .sounds, .deck, .spotify, .reels, .merch, .visit, .map, .faq, .ethos{ padding-top:clamp(3.5rem,5vw,4.75rem); }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition-duration:.001s !important; }
  .reveal{ opacity:1; transform:none; }
}

/* ============================================================ IN-PLACE COPY EDITOR */
#ewEditBar{ position:fixed; left:50%; bottom:14px; transform:translateX(-50%); z-index:9000;
  display:flex; gap:.4rem; align-items:center; background:rgba(20,16,11,.96); border:1px solid var(--line);
  border-radius:30px; padding:.4rem .6rem; box-shadow:0 12px 34px rgba(0,0,0,.65); }
#ewEditBar[hidden], #ewEditBar [hidden]{ display:none !important; }
#ewEditBar .ew-label{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase; color:var(--paper-dim); padding:0 .4rem; }
#ewEditBar button{ font-family:var(--f-mono); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase;
  color:var(--bone); background:transparent; border:0; padding:.55em 1em; border-radius:20px; cursor:pointer; transition:background .15s, color .15s; }
#ewEditBar #ewSave{ background:var(--rust); }
#ewEditBar button:hover{ background:var(--brass); color:var(--ink); }
#ewToast{ font-family:var(--f-mono); font-size:.72rem; color:var(--brass); padding:0 .7rem; white-space:nowrap; }
.ew-editing [contenteditable]{ outline:1px dashed rgba(207,155,70,.55); outline-offset:3px; cursor:text; border-radius:2px; }
.ew-editing [contenteditable]:hover{ outline-color:var(--rust); background:rgba(207,155,70,.07); }
.ew-editing [contenteditable]:focus{ outline:2px solid var(--rust); background:rgba(207,155,70,.1); }

/* ---------- paper-history clickable zoom ---------- */
.paper-scatter p{ cursor:zoom-in; }
.paperzoom{ position:fixed; inset:0; z-index:9500; display:none; align-items:center; justify-content:center; background:rgba(6,5,4,.86); backdrop-filter:blur(5px); padding:clamp(1.4rem,5vw,4rem); }
.paperzoom.open{ display:flex; }
.paperzoom__card{ position:relative; background:#ece3cf; color:#221b10; font-family:var(--f-groove,serif); font-size:clamp(1.35rem,3.6vw,2.3rem); line-height:1.42; padding:clamp(2rem,5vw,3.6rem); max-width:660px; border-radius:2px; box-shadow:0 30px 80px rgba(0,0,0,.7); transform:rotate(-1.2deg); }
.paperzoom__card strong{ color:#7a3417; }
.paperzoom__close{ position:absolute; top:1.3rem; right:1.5rem; background:none; border:0; color:var(--paper,#f4eede); font-size:2rem; line-height:1; cursor:pointer; z-index:2; }
.paperzoom__nav{ position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid #fff; color:#141414; width:56px; height:56px; border-radius:50%; font-size:2.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.7); transition:transform .18s; }
.paperzoom__nav:hover{ transform:translateY(-50%) scale(1.07); }
.paperzoom__nav--prev{ left:clamp(.5rem,3vw,2.5rem); }
.paperzoom__nav--next{ right:clamp(.5rem,3vw,2.5rem); }
.paperzoom__count{ position:absolute; bottom:1.4rem; left:50%; transform:translateX(-50%); font-family:var(--f-mono,monospace); font-size:.74rem; letter-spacing:.12em; color:var(--paper-dim,#b8b0a0); }

/* ---------- brand-coloured service CTAs ---------- */
a.btn[href*="spotify"]{ background:#1db954; border-color:#1db954; color:#03130a; }
a.btn[href*="spotify"]:hover{ background:#1ed760; border-color:#1ed760; color:#03130a; }
a.btn[href*="bandcamp"]{ background:#1da0c3; border-color:#1da0c3; color:#04141a; }
a.btn[href*="bandcamp"]:hover{ background:#33b4d6; border-color:#33b4d6; color:#04141a; }
a.btn[href*="instagram"]{ background:linear-gradient(95deg,#f58529,#dd2a7b 48%,#8134af); border:0; color:#fff; }
a.btn[href*="instagram"]:hover{ filter:brightness(1.08); color:#fff; }
a.btn[href*="myshopify"],a.btn[href*="shopify"]{ background:#5e8e3e; border-color:#5e8e3e; color:#fff; }
a.btn[href*="myshopify"]:hover,a.btn[href*="shopify"]:hover{ background:#6da349; border-color:#6da349; color:#fff; }
a.btn[href*="patreon"]{ background:#ff424d; border-color:#ff424d; color:#fff; }
a.btn[href*="patreon"]:hover{ background:#ff5963; border-color:#ff5963; color:#fff; }
a.btn[href*="discogs"]{ background:#333; border-color:#333; color:#fff; }
a.btn[href*="discogs"]:hover{ background:#444; border-color:#444; color:#fff; }

/* ---------- visible address label on the map ---------- */
.map__addr{ position:absolute; left:14px; bottom:14px; right:14px; z-index:450; display:block; background:rgba(10,9,8,.82); backdrop-filter:blur(3px); border:1px solid rgba(207,155,70,.4); border-radius:6px; padding:.7rem .9rem; font-family:var(--f-mono,monospace); font-size:.8rem; line-height:1.35; color:var(--paper,#f4eede); text-decoration:none; box-shadow:0 8px 24px rgba(0,0,0,.5); transition:border-color .2s, background .2s; }
.map__addr:hover{ border-color:var(--rust,#b14a22); background:rgba(14,12,10,.9); }
.map__addr span{ display:block; font-family:var(--f-mono,monospace); font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass,#cf9b46); margin-bottom:.18rem; }

/* ---------- CREW (hero + interactive polaroids) ---------- */
.crew{ padding:clamp(4.5rem,10vw,8rem) 0 clamp(6rem,12vw,10rem); background:rgba(21,18,13,.8); overflow:hidden; }
.crew__hero{ position:relative; max-width:1180px; margin:0 auto clamp(2.4rem,6vw,4.2rem); padding:0 clamp(1.2rem,5vw,4rem); }
.crew__hero img{ width:100%; height:clamp(320px,54vh,650px); object-fit:cover; border-radius:4px; display:block; box-shadow:0 30px 70px rgba(0,0,0,.6); }
.crew__hero figcaption{ position:absolute; left:clamp(1.2rem,5vw,4rem); right:clamp(1.2rem,5vw,4rem); bottom:0; padding:3rem 1.7rem 1.4rem; color:var(--paper); font-family:var(--f-mono); font-size:.82rem; line-height:1.4; background:linear-gradient(transparent, rgba(8,7,5,.88)); border-radius:0 0 4px 4px; }
.crew__hero figcaption span{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--brass); margin-bottom:.3rem; }
.crew__head{ max-width:var(--maxw); margin:0 auto 2.5rem; padding:0 clamp(1.2rem,5vw,4rem); }
.crew__head .section-label{ color:var(--brass); }
.crew__sub{ margin-top:1rem; color:var(--paper-dim); max-width:52ch; }

/* ---------- contact form status line ---------- */
.form-status{ margin:.9rem 0 0; font-family:var(--f-mono); font-size:.82rem; line-height:1.4; padding:.7rem .9rem; border-radius:4px; border:1px solid var(--line); }
.form-status--ok{ color:#bfe9c7; border-color:rgba(120,200,140,.5); background:rgba(60,140,80,.16); }
.form-status--err{ color:#f0c9bd; border-color:rgba(177,74,34,.55); background:rgba(177,74,34,.16); }

/* ---------- CREW editorial (left / right large frames) ---------- */
.crew__editorial{ position:relative; max-width:1180px; margin:0 auto clamp(2rem,5vw,3.5rem); padding:0 clamp(1.2rem,5vw,4rem); }
.crew__ed-viewport{ overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; -ms-overflow-style:none; cursor:grab; touch-action:pan-x pan-y; }
.crew__ed-viewport::-webkit-scrollbar{ display:none; }
.crew__ed-viewport.dragging{ cursor:grabbing; scroll-snap-type:none; user-select:none; }
.crew__ed-track{ display:flex; gap:clamp(1rem,3vw,2rem); }
.crew__ed{ flex:0 0 auto; width:min(82%,640px); margin:0; position:relative; overflow:hidden; border-radius:4px; box-shadow:0 22px 50px rgba(0,0,0,.55); scroll-snap-align:center; }
.crew__ed img{ width:100%; display:block; object-fit:cover; height:clamp(300px,52vh,540px); -webkit-user-drag:none; }
.crew__ed-nav{ position:absolute; z-index:6; top:50%; transform:translateY(-50%); background:#fff; border:1px solid #fff; color:#141414; width:54px; height:54px; border-radius:50%; font-size:2.1rem; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px rgba(0,0,0,.7); transition:transform .18s; }
.crew__ed-nav:hover{ transform:translateY(-50%) scale(1.07); }
.crew__ed-nav--prev{ left:clamp(.4rem,3vw,2.2rem); }
.crew__ed-nav--next{ right:clamp(.4rem,3vw,2.2rem); }
@media (max-width:760px){ .crew__ed{ width:88%; } .crew__ed-nav{ width:46px; height:46px; font-size:1.7rem; } }

/* ---------- CREDITS / colophon ---------- */
.credits{ padding:clamp(4.5rem,10vw,7.5rem) 0; background:rgba(15,13,10,.9); border-top:1px solid var(--line); }
.credits__inner{ max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.2rem,5vw,4rem); display:grid; grid-template-columns:1fr; gap:clamp(2rem,5vw,3.2rem); align-items:start; }
.credits__logos{ display:flex; flex-direction:row; flex-wrap:nowrap; gap:clamp(1.6rem,4vw,3rem); align-items:center; justify-content:flex-start; }
.credits__logos a{ display:block; transition:transform .2s; min-width:0; }
.credits__logos a:hover{ transform:translateY(-3px); }
.credits__logos img{ width:auto; height:clamp(92px,10vw,126px); max-width:none; filter:brightness(1.5) contrast(1.05); }
.credits__logos .credits__mats{ height:clamp(116px,12.5vw,156px); }
.credits__text{ max-width:62ch; }
.credits__text .section-label{ color:var(--brass); }
.credits__text h2{ margin:0 0 1.3rem; }
.credits__text p{ color:var(--paper-dim); max-width:52ch; margin-bottom:1rem; }
.credits__text p strong{ color:var(--paper); }
.credits__text a{ color:var(--rust); }
.credits__links{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.6rem; }
.credits__links a{ color:var(--paper); }
@media (max-width:820px){ .credits__inner{ grid-template-columns:1fr; gap:2.2rem; } .credits__logos{ flex-direction:row; align-items:center; gap:2rem; } }

/* crew polaroid scatter grows with the number of photos */
#crewPolaroids{ min-height:calc(var(--rows, 8) * 300px); }
@media (max-width:1023px){ #crewPolaroids{ min-height:calc(var(--rows, 8) * 215px) !important; margin:0 0 0 15vw !important; width:64vw !important; max-width:none; } }
@media (max-width:760px){ #crewPolaroids{ min-height:calc(var(--rows, 8) * 200px) !important; margin:0 0 0 16vw !important; width:60vw !important; } }

/* mobile: put the track discs on top of the turntable, not below it */
@media (max-width:760px){
  .deck__stage{ display:flex; flex-direction:column; }
  #deckTracks{ order:1; margin-bottom:.4rem; }
  .deck__transport{ order:2; }
  .turntable{ order:3; }
  .deck__controls{ order:4; }
}

/* mobile: bigger, touch-friendly dub-desk sliders */
@media (max-width:760px){
  .dubdesk{ gap:1.4rem 1.6rem; }
  .dubknob{ font-size:.66rem; gap:.55rem; }
  .dubknob input[type="range"]{ width:min(64vw,200px); height:9px; }
  .dubknob input[type="range"]::-webkit-slider-thumb{ width:32px; height:32px; border-width:3px; }
  .dubknob input[type="range"]::-moz-range-thumb{ width:32px; height:32px; border-width:3px; }
  .dubsiren{ padding:.7em 1.1em; font-size:.8rem; }
}

/* music "see more" → horizontal auto-drifting / draggable strips (not a paged grid) */
.music-grid--strips{ display:block !important; grid-template-columns:none !important; }
.music-strip{ padding:.7rem 0 !important; margin:0 !important; }
.music-strip + .music-strip{ border-top:1px solid rgba(255,255,255,.05); }
.music-grid--strips .marquee__track{ gap:1rem; }
.music-grid--strips .marquee__track .release{ width:172px !important; flex:0 0 auto; }