/* ── FONTS ── */
@font-face { font-family:'PPNeueMontreal'; src:url('fonts/ppneuemontreal-book.otf') format('opentype'); font-weight:400; }
@font-face { font-family:'PPNeueMontreal'; src:url('fonts/ppneuemontreal-thin.otf') format('opentype'); font-weight:200; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}

:root {
  --bg:#0a0907; --warm:#c8b89a; --warm-dim:#8a7e70;
  --text:#ede5d8; --red:#c0392b; --panel-gap:70px;
  --cream:#eee8dd; --gab-h:58px;
}

html,body { width:100%;height:100%;overflow:hidden;font-family:'Times New Roman',Times,serif;font-weight:400;background:var(--bg);color:#fff;-webkit-font-smoothing:antialiased; }
a{color:inherit;text-decoration:none;}

/* ════════════════════════
   LOADING SCREEN
════════════════════════ */
#loading-screen {
  position:fixed;inset:0;z-index:9000;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  opacity:0;visibility:hidden;
  transition:opacity .18s ease,visibility 0s .18s;
  pointer-events:none;
}
#loading-screen.loading-visible {
  opacity:1;visibility:visible;
  transition:opacity .12s ease,visibility 0s 0s;
  pointer-events:all;
}
#loading-spinner {
  width:28px; height:28px;
  border:1.5px solid rgba(237,229,216,.1);
  border-top-color:rgba(237,229,216,.55);
  border-radius:50%;
  animation:spin .75s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg);} }

/* ════════════════════════
   NAV - gallery index, bottom-right, Space Grotesk
════════════════════════ */
#nav {
  position:fixed;top:var(--gab-h);right:0;
  bottom:auto;left:auto;z-index:9400;
  background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 100%);border:none;height:auto;
  padding:0;display:block;pointer-events:none;
}
#nav ul {
  list-style:none;display:flex;flex-direction:row;
  align-items:center;gap:0;
  pointer-events:all;margin:0;
  padding:1.2rem 2rem;
  background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 100%);
}
#nav ul li { position:relative; }
#nav ul li a {
  display:inline-block;padding:.25rem .6rem;
  font-family:'Times New Roman',Times,serif;
  font-size:1.05rem;font-weight:300;
  letter-spacing:.08em;
  color:rgba(237,229,216,.75);
  cursor:pointer;
  background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 100%);
  border:none;
  border-bottom:1px solid transparent;
  border-radius:0;
  transition:color .2s,border-color .2s;
  text-shadow:0 1px 4px rgba(0,0,0,.7);
}
#nav ul li a:hover { color:#fff; }
#nav ul li a.active { color:#fff;border-bottom-color:rgba(237,229,216,.7); }
#nav ul li a:not(.active) { border-left:none; }

/* Nav adapts per section bg */
#nav.nav-light-bg ul li a,
#nav.nav-dark-bg ul li a { color:rgba(237,229,216,.75); }
#nav.nav-light-bg ul li a:hover,
#nav.nav-dark-bg ul li a:hover { color:#fff; }
#nav.nav-dark-bg ul li a.active,
#nav.nav-light-bg ul li a.active { color:#fff;border-bottom-color:rgba(237,229,216,.7); }

/* ════════════════════════
   HOME
════════════════════════ */
.home-hero { position:fixed;top:var(--gab-h);left:0;right:0;bottom:0;z-index:1;overflow:hidden; }
#home-slideshow { position:fixed;top:var(--gab-h);left:0;right:0;bottom:0;z-index:0;background:var(--bg); }
.slide { position:absolute;inset:0;background-color:var(--bg);background-repeat:no-repeat;background-position:center;opacity:0;transition:opacity 1.8s ease;will-change:opacity; }
.slide.active{opacity:1;}
.home-overlay { position:fixed;top:var(--gab-h);left:0;right:0;bottom:0;z-index:0;background:rgba(247,244,240,.88);pointer-events:none; }
.home-scroll { position:absolute;inset:0;z-index:2;overflow-y:scroll;overflow-x:hidden;-webkit-overflow-scrolling:touch; }
.slide-cover{background-size:cover;}
.slide-contain{background-size:contain;}

/* Name - PPNeueMontreal, top-left, solid white */
.home-name {
  position:absolute;left:4%;top:2rem;z-index:10;
  display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.05;pointer-events:all;
  cursor:pointer;text-decoration:none;
}
.home-name-first,.home-name-last {
  font-family:'Times New Roman',Times,serif;
  font-weight:200;
  font-size:clamp(1rem,1.6vw,1.8rem);
  color:#000;
  letter-spacing:.05em;
  display:block;
}

/* Welcome text - centered */
.home-center {
  position:relative;
  text-align:center;pointer-events:none;
  display:flex;flex-direction:column;align-items:center;
  gap:1.5rem;
  height:calc(100vh - var(--gab-h));
  justify-content:center;
  padding:4rem 2rem 3rem;
  box-sizing:border-box;
  flex-shrink:0;
}
.home-photo-wrap {
  display:flex;flex-direction:column;align-items:center;gap:.6rem;
  pointer-events:none;
}
.home-photo {
  width:clamp(200px,24vw,360px);
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:center top;
  display:block;
}
.home-photo-caption {
  font-family:'Times New Roman',Times,serif;
  font-size:.72rem;font-weight:400;
  letter-spacing:.15em;text-transform:uppercase;
  color:#000;
  margin:0;
  position:relative;z-index:10;
}
.home-welcome {
  font-family:'Times New Roman',Times,serif;
  font-size:clamp(1.8rem,3vw,3.2rem);
  font-weight:400;color:rgba(20,18,16,.9);
  letter-spacing:.08em;margin:0;
  text-shadow:none;
}
/* Bio and contacts below home photo */
.home-bio {
  position:relative;
  height:calc(100vh - var(--gab-h));
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  max-width:680px;
  margin:0 auto;
  text-align:center;
  pointer-events:all;
  padding:4rem 2rem;
  box-sizing:border-box;
  flex-shrink:0;
}
.home-bio p {
  font-family:'Times New Roman',Times,serif;
  font-size:clamp(1rem,1.45vw,1.45rem);
  font-weight:200;line-height:1.85;
  color:rgba(20,18,16,.7);
  margin-bottom:1rem;
}
.home-contacts {
  display:flex;flex-direction:column;
  align-items:center;gap:.3rem;
  margin-top:1rem;
}
.home-contacts span {
  font-family:'Times New Roman',Times,serif;
  font-size:clamp(1.64rem,2vw,1.9rem);
  font-weight:400;letter-spacing:.04em;
  color:rgba(20,18,16,.75);
  user-select:text;-webkit-user-select:text;
}
.home-territory {
  font-family:'Times New Roman',Times,serif;
  font-size:clamp(.75rem,.95vw,.9rem);
  font-weight:200;letter-spacing:.1em;
  color:rgba(20,18,16,.45);
  margin:.5rem 0;
}
.home-contact-link {
  font-family:'Times New Roman',Times,serif;
  font-size:clamp(1.64rem,2vw,1.9rem);
  font-weight:400;letter-spacing:.04em;
  color:rgba(20,18,16,.75);
  text-decoration:none;
  transition:color .2s;
}
.home-contact-link:hover { color:rgba(20,18,16,.8); }
/* Discover button inside home — mobile only */
.home-discover {
  display:none; /* hidden on desktop */
  pointer-events:all;
  background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 100%);
  border:1px solid rgba(200,184,154,.35);
  color:rgba(237,229,216,.85);
  font-family:'Times New Roman',Times,serif;
  font-size:.85rem;font-weight:400;
  letter-spacing:.22em;text-transform:uppercase;
  padding:.45rem 1.5rem;
  cursor:pointer;border-radius:1px;
  transition:color .2s,border-color .2s;
  -webkit-tap-highlight-color:transparent;
}

/* Section names (audio/discography) */
.section-name {
  position:absolute;left:4%;top:2rem;z-index:20;
  display:flex;flex-direction:column;align-items:flex-start;
  line-height:1.05;pointer-events:all;
  cursor:pointer;
}
.sg-name {
  font-family:'Times New Roman',Times,serif;
  font-weight:200;
  font-size:clamp(1rem,1.6vw,1.8rem);
  color:var(--red);
  letter-spacing:.05em;
  display:block;
}
/* Audio dark bg - name stays light */
.audio-section .sg-name { color:var(--red); }
/* Discography light bg - name stays dark */
.discography-section .sg-name { color:var(--red); }

/* ════════════════════════
   PAGE SECTIONS
════════════════════════ */
.page-section { position:fixed;top:var(--gab-h);left:0;right:0;bottom:0;z-index:10;overflow-y:auto;overflow-x:hidden;visibility:hidden;pointer-events:none;background:var(--bg); }
.page-section.section-visible { visibility:visible;pointer-events:all; }

/* ════════════════════════
   WORK
════════════════════════ */
.work-section{background:var(--bg);padding-top:78px;}
.work-videos{display:grid;grid-template-columns:1fr 1fr;width:100%;}
.work-item{display:flex;flex-direction:column;}
.work-title{padding:1.2rem 1.4rem .8rem;font-size:clamp(1.5rem,2.2vw,2.2rem);font-weight:400;letter-spacing:.12em;color:#fff;background:var(--bg);border-bottom:1px solid rgba(200,184,154,.15);}
.work-video-wrap{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--bg);}
.work-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:none;display:block;pointer-events:none;}
.work-overlay{position:absolute;inset:0;z-index:2;cursor:pointer;background:transparent;}

/* ════════════════════════
   REEL
════════════════════════ */
.reel-section{background:var(--bg) url('images/sfondo_v12_reel.png') center/cover no-repeat;display:flex;align-items:center;justify-content:center;min-height:100%;padding:3rem 2.5rem 5rem;}
.reel-section::before{content:'';position:absolute;inset:0;background:rgba(10,9,7,.7);z-index:0;}
.reel-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:1.5rem;width:100%;}
.section-label{font-size:clamp(1.2rem,2.2vw,2.5rem);font-weight:200;letter-spacing:.18em;text-transform:uppercase;color:#fff;align-self:flex-start;padding-top:.2rem;}
.reel-video{width:85vw;max-width:1300px;aspect-ratio:16/9;max-height:75vh;}
.reel-video video{width:100%;height:100%;display:block;object-fit:cover;}

/* ════════════════════════
   AUDIO
════════════════════════ */
.audio-section{background:var(--bg);}
.audio-section .section-name,
.audio-section .audio-inner { position:relative;z-index:1; }
.audio-inner{width:100%;max-width:1100px;margin:0 auto;padding:9rem 5rem 7rem;}

/* Album block */
.audio-album{margin-bottom:3rem;padding-bottom:2.5rem;border-bottom:1.5px solid rgba(255,255,255,.18);}
.audio-album:last-child{border-bottom:none;}
.audio-album:last-child{border-bottom:none;}

/* Album header: title left, image right */
.audio-album-header{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:1rem;}
.audio-album-header-left{flex:1;}
.audio-album-title{
  font-size:clamp(.9rem,1.2vw,1.1rem);font-weight:400;
  letter-spacing:.06em;color:#fff;text-transform:none;
  padding-bottom:.45rem;
  margin-bottom:.5rem;
  transition:color .25s;
}
.audio-album-title.albtitle--playing{color:var(--red);}

/* Album image field */
.audio-album-image--clickable{cursor:pointer;}
.audio-album-image--clickable img{transition:filter .3s,opacity .3s;}
.audio-album-image--clickable:hover img{filter:grayscale(0%)!important;opacity:.85;}
.audio-album-image{flex-shrink:0;width:clamp(85px,11vw,120px);height:clamp(85px,11vw,120px);border:1px solid rgba(255,255,255,.08);overflow:hidden;}
.audio-album-image-placeholder{width:100%;height:100%;background:rgba(26,22,18,.04);}
.audio-album-image img{width:100%;height:100%;object-fit:cover;filter:grayscale(0%);transition:filter .4s;}
.audio-album-image--clickable:hover img{filter:grayscale(40%)!important;opacity:.75;}

/* Album about toggle */
.album-more-toggle{display:inline-block;margin-bottom:.3rem;font-size:.65rem;font-weight:200;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.6);cursor:pointer;border:none;background:none;border-bottom:1px solid rgba(255,255,255,.3);padding:0;font-family:'Times New Roman',Times,serif;transition:color .2s;}
.album-more-toggle:hover{color:rgba(237,229,216,.8);}
.album-more-body{margin-bottom:.6rem;padding:.5rem 0;}
.album-more-body p{font-size:clamp(.78rem,1vw,.92rem);font-weight:200;color:#fff;line-height:1.78;letter-spacing:.03em;}

/* Tracklist */
.audio-tracklist{width:100%;border-collapse:collapse;}
.audio-tracklist tr{border-bottom:none;}
.audio-tracklist tr:hover{background:rgba(255,255,255,.03);}
.audio-tracklist td{padding:.65rem .45rem;font-size:clamp(.78rem,1vw,.95rem);font-weight:200;color:#fff;letter-spacing:.04em;vertical-align:middle;}
.track-num{width:2.5rem;color:#fff;font-variant-numeric:tabular-nums;transition:color .25s;}
.track-name{width:100%;}
.track-dur{width:4rem;text-align:right;color:#fff;font-variant-numeric:tabular-nums;}
.track-play{width:2.8rem;text-align:center;}

/* Track playing states - red */
.track-title-main{transition:color .25s;color:#fff;}
.track-title-main.name--playing{color:var(--red)!important;}
.track-num.num--playing{color:var(--red)!important;}

/* TAPE BUTTON */
.ap-btn {
  background: none;
  border: none;
  border-radius: 50%;
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: #fff;
  transition: background .2s;
  padding: 0;
  font-family: inherit;
  line-height: 1;
}
.ap-btn:hover { opacity: .75; }
.ap-btn.playing {
  background: var(--red);
  color: transparent; /* hide pause icon — just red circle */
}
.ap-btn.played {
  background: none;
  color: var(--red); /* red triangle after stop */
}
.tape-icon{width:100%;height:100%;}
/* Spin the tape reels when playing */

@keyframes tape-spin{to{transform:rotate(360deg);}}

/* PROGRESS BAR - smooth, red when playing */
.audio-track--progress td{padding:0;}
.track-progress-cell{padding:.3rem 0 .7rem 0 !important;}
.ap-progress-bar{position:relative;width:100%;height:1px;background:rgba(200,184,154,.1);cursor:pointer;margin-top:2px;}
.ap-progress-bar:hover{background:rgba(255,255,255,.22);}
.ap-progress-fill{position:absolute;left:0;top:0;height:100%;background:rgba(26,24,22,.5);width:0%;pointer-events:none;transition:none;}
.ap-progress-fill.fill--playing{background:var(--red);}
/* Red playhead marker */
.ap-progress-head{position:absolute;top:50%;transform:translate(-50%,-50%);width:2px;height:7px;background:#1a1612;left:0%;pointer-events:none;opacity:0;transition:none;}
.ap-progress-head.head--playing{background:var(--red);opacity:1;}
.ap-progress-time{position:absolute;right:0;top:4px;font-size:.52rem;font-weight:200;letter-spacing:.1em;color:#fff;white-space:nowrap;pointer-events:none;}

/* ════════════════════════
   DISCOGRAPHY
════════════════════════ */
.discography-section{background:#100f0d;}
.discography-inner{position:relative;z-index:1;width:100%;max-width:1400px;margin:0 auto;padding:9rem 5rem 7rem;min-height:100vh;}
.disc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4rem 3.5rem;}
.disc-item{display:flex;flex-direction:column;gap:1rem;text-decoration:none;color:#1a1612;cursor:pointer;}
.disc-item-img{position:relative;width:100%;aspect-ratio:1/1;overflow:hidden;background:#1a1814;}
.disc-item-img img{width:100%;height:100%;object-fit:cover;display:block;filter:grayscale(0%);transition:transform .6s cubic-bezier(.22,1,.36,1),filter .4s;}
.disc-item-img:hover img{transform:scale(1.02);filter:grayscale(30%);}
.disc-item-overlay{position:absolute;inset:0;background:transparent;transition:background .4s;pointer-events:none;}
.disc-item-img:hover .disc-item-overlay{background:rgba(10,9,7,.6);}
.disc-item-img--wip{background:#1a1814;border:1px solid rgba(255,255,255,.05);display:flex;align-items:center;justify-content:center;}
.disc-wip-text{font-size:clamp(.7rem,.85vw,.85rem);font-weight:200;letter-spacing:.3em;text-transform:uppercase;color:rgba(237,229,216,.4);}
.disc-item-info{display:flex;flex-direction:column;gap:.3rem;}
.disc-item-title{font-size:clamp(.9rem,1.2vw,1.1rem);font-weight:400;letter-spacing:.1em;text-transform:uppercase;color:#fff;}
.disc-title-link{text-decoration:none;color:#fff;transition:opacity .2s;cursor:pointer;}
.disc-title-link:hover{opacity:.55;}
.disc-item-meta{font-size:clamp(.72rem,.9vw,.88rem);font-weight:200;letter-spacing:.06em;color:#fff;}

/* Disc clickable artwork */
.disc-item-img--clickable{cursor:pointer;}
.disc-item-expand-hint{position:absolute;top:.5rem;right:.5rem;font-size:.75rem;color:rgba(237,229,216,.5);opacity:0;transition:opacity .2s;pointer-events:none;}
.disc-item-img--clickable:hover .disc-item-expand-hint{opacity:1;}
.disc-item-img-link{display:block;}

/* Disc play button */
.disc-play-btn{display:inline-flex;align-items:center;gap:.4rem;margin-top:.5rem;background:none;border:1px solid rgba(26,22,18,.22);padding:.22rem .65rem;font-family:'Times New Roman',Times,serif;font-size:.62rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:#1a1612;cursor:pointer;transition:background .2s,border-color .2s;}
.disc-play-btn:hover{background:rgba(26,22,18,.06);border-color:rgba(26,22,18,.5);}
.disc-play-btn.playing{border-color:#1a1612;background:rgba(26,22,18,.08);}
.disc-play-icon{width:22px;height:22px;display:flex;align-items:center;}
.disc-player-wrap{margin-top:.8rem;width:100%;}
.disc-bc-player{border:0;width:100%;height:120px;display:block;}

/* ════════════════════════
   PRODUCTION CATALOG
════════════════════════ */
.catalog-section { background: var(--bg); }
.catalog-inner { width:100%;max-width:1100px;margin:0 auto;padding:5.5rem 5rem 8rem; }
.catalog-header { display:flex;align-items:baseline;justify-content:space-between;gap:2rem;margin-bottom:2.8rem;border-bottom:1px solid rgba(200,184,154,.15);padding-bottom:1.2rem; }
.catalog-heading { font-size:clamp(.75rem,1vw,.85rem);font-weight:200;letter-spacing:.28em;text-transform:uppercase;color:rgba(237,229,216,.35); }
.catalog-filters { display:flex;gap:.6rem;flex-wrap:wrap; }
.cat-filter { font-family:'Times New Roman',Times,serif;font-size:.65rem;font-weight:200;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,229,216,.45);background:none;border:1px solid rgba(200,184,154,.18);border-radius:1px;padding:.25rem .75rem;cursor:pointer;transition:color .2s,border-color .2s,background .2s; }
.cat-filter:hover { color:rgba(237,229,216,.85);border-color:rgba(237,229,216,.3); }
.cat-filter--active { color:#fff;border-color:rgba(237,229,216,.35);background:rgba(200,184,154,.07); }
.catalog-table { width:100%;border-collapse:collapse; }
.catalog-thead-row { border-bottom:1px solid rgba(200,184,154,.09); }
.cat-th { font-size:.6rem;font-weight:200;letter-spacing:.25em;text-transform:uppercase;color:rgba(237,229,216,.28);padding:.5rem .5rem .7rem;text-align:left; }
.cat-th--year{width:5rem;} .cat-th--title{width:auto;} .cat-th--role{width:16rem;} .cat-th--loc{width:12rem;} .cat-th--cat{width:6.5rem;text-align:right;}
.cat-row { border-bottom:1px solid rgba(200,184,154,.07);transition:background .18s; }
.cat-row:hover { background:rgba(200,184,154,.04); }
.cat-row.cat-hidden { display:none; }
.cat-year { padding:.85rem .5rem;font-size:clamp(.72rem,.9vw,.82rem);font-weight:200;letter-spacing:.08em;color:rgba(237,229,216,.3);font-variant-numeric:tabular-nums;vertical-align:top;white-space:nowrap; }
.cat-title { padding:.85rem .5rem;font-size:clamp(.9rem,1.2vw,1.05rem);font-weight:400;letter-spacing:.04em;color:rgba(237,229,216,.9);vertical-align:top; }
.cat-alias { display:inline-block;margin-left:.5em;font-size:.7em;font-weight:200;letter-spacing:.1em;color:rgba(200,184,154,.5); }
.cat-role { padding:.85rem .5rem;font-size:clamp(.72rem,.9vw,.82rem);font-weight:200;letter-spacing:.06em;color:rgba(237,229,216,.5);vertical-align:top; }
.cat-loc { padding:.85rem .5rem;font-size:clamp(.66rem,.85vw,.76rem);font-weight:200;letter-spacing:.06em;color:rgba(237,229,216,.35);vertical-align:top;font-style:italic; }
.cat-tag { padding:.85rem .5rem;text-align:right;vertical-align:top; }
.cat-pill { display:inline-block;font-size:.56rem;font-weight:200;letter-spacing:.2em;text-transform:uppercase;padding:.2rem .55rem;border-radius:1px;border:1px solid; }
.cat-pill--film  { color:rgba(192,57,43,.75); border-color:rgba(192,57,43,.35); }
.cat-pill--sound { color:rgba(200,184,154,.75);border-color:rgba(200,184,154,.3); }
.cat-pill--music { color:rgba(120,160,200,.75);border-color:rgba(120,160,200,.3); }

/* ════════════════════════
   ABOUT
════════════════════════ */
.about-section{background:var(--bg) url('images/Front_12_image.png') center/cover no-repeat;}
.about-inner{position:relative;z-index:2;width:100%;max-width:1200px;margin:0 auto;padding:calc(var(--gab-h) + 2rem) 4rem 4rem;display:flex;flex-direction:column;box-sizing:border-box;}
.about-text-block{display:flex;flex-direction:column;justify-content:flex-start;gap:1.8rem;padding-bottom:2rem;box-sizing:border-box;}
.about-heading{text-align:center;font-family:'Times New Roman',Times,serif;font-weight:300;font-size:clamp(1.1rem,2.2vw,2.4rem);letter-spacing:.03em;line-height:1.4;color:#fff;text-transform:none;}
.about-cols{display:grid;grid-template-columns:1.4fr 1fr;gap:4rem;align-items:center;}
.about-text{text-align:left;}
.about-text p{font-size:clamp(1rem,1.5vw,1.5rem);font-weight:200;line-height:1.7;color:#fff;margin-bottom:0;}
.about-note{font-size:clamp(1rem,1.5vw,1.5rem)!important;font-weight:200!important;color:#fff!important;}
.about-contacts{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;height:100%;}
.about-contact-plain{font-size:clamp(1rem,1.5vw,1.5rem);font-weight:400;letter-spacing:.04em;color:#fff;user-select:text;-webkit-user-select:text;}
.about-contacts a{font-size:clamp(1rem,1.5vw,1.5rem);font-weight:400;letter-spacing:.04em;color:#fff;transition:opacity .2s;}
.about-contacts a:hover{opacity:.65;}
.about-center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;}
.about-territory{font-size:clamp(1rem,1.5vw,1.5rem);font-weight:200;letter-spacing:.08em;color:#fff;line-height:1.8;}
.about-photo{display:flex;justify-content:center;}
.about-photo img{width:45%;max-width:480px;aspect-ratio:3/4;object-fit:cover;filter:none;opacity:1;}

/* ════════════════════════
   VIDEO PANEL
════════════════════════ */
@keyframes panelIn{from{transform:translateX(100%);}to{transform:translateX(0);}}
@keyframes panelOut{from{transform:translateX(0);}to{transform:translateX(100%);}}
#video-panel{position:fixed;top:0;left:var(--panel-gap);right:0;height:100%;background:var(--bg);z-index:5000;display:flex;flex-direction:row;transform:translateX(100%);visibility:hidden;pointer-events:none;}
#video-panel.panel-opening{visibility:visible;pointer-events:all;animation:panelIn .6s cubic-bezier(.22,1,.36,1) forwards;}
#video-panel.panel-open{visibility:visible;pointer-events:all;transform:translateX(0);}
#video-panel.panel-closing{visibility:visible;pointer-events:none;animation:panelOut .45s cubic-bezier(.4,0,1,1) forwards;}
#panel-close{position:absolute;top:1.6rem;right:2rem;z-index:10;background:none;border:none;color:#fff;font-size:1.05rem;font-family:'Times New Roman',Times,serif;font-weight:400;letter-spacing:.18em;text-transform:uppercase;cursor:pointer;padding:4px 0;transition:opacity .2s;}
#panel-close:hover{opacity:.6;}
#panel-video-col{width:75%;height:100%;display:flex;align-items:center;justify-content:center;padding:3.5rem 2rem 3.5rem 3rem;flex-shrink:0;}
#panel-video-wrap{width:100%;aspect-ratio:16/9;position:relative;background:var(--bg);}
#panel-iframe{position:absolute;inset:0;width:100%;height:100%;border:none;}
#panel-info-col{width:25%;height:100%;display:flex;align-items:center;padding:3.5rem 2.5rem 3.5rem 1rem;}
#panel-info{display:flex;flex-direction:column;gap:1.8rem;}
#panel-title{font-size:clamp(3rem,5.5vw,6rem);font-weight:200;line-height:1;color:#000;-webkit-text-stroke:1.5px #fff;letter-spacing:-.01em;}
#panel-credits{display:flex;flex-direction:column;gap:.6rem;}
#panel-credits p{font-size:clamp(1.15rem,1.5vw,1.4rem);font-weight:500;letter-spacing:.06em;color:#fff;line-height:1.65;}
#panel-backdrop{position:fixed;inset:0;z-index:4999;background:rgba(0,0,0,.5);opacity:0;visibility:hidden;transition:opacity .4s;pointer-events:none;}
#panel-backdrop.backdrop-visible{opacity:1;visibility:visible;pointer-events:all;}

/* ════════════════════════
   RELEASE PANEL
════════════════════════ */
.release-panel{position:fixed;top:0;left:0;right:0;bottom:0;z-index:5500;background:transparent;display:flex;flex-direction:column;visibility:hidden;transform:translateX(100%);transition:transform .75s cubic-bezier(.16,1,.3,1),visibility 0s .75s;overflow-y:hidden;cursor:pointer;}
.release-panel-body{position:absolute;top:0;left:100px;right:0;bottom:0;background:#100f0d;overflow-y:auto;cursor:default;display:flex;flex-direction:column;}
.release-panel--open{visibility:visible;transform:translateX(0);transition:transform .75s cubic-bezier(.16,1,.3,1),visibility 0s 0s;}
.panel-close-btn{position:sticky;top:1.6rem;align-self:flex-end;margin:1.6rem 2rem 0 0;background:none;border:none;font-size:.78rem;font-family:'Times New Roman',Times,serif;font-weight:400;letter-spacing:.22em;text-transform:uppercase;color:rgba(237,229,216,.35);cursor:pointer;transition:color .2s;z-index:2;}
.panel-close-btn:hover{color:rgba(237,229,216,.9);}
.release-panel-inner{display:grid;grid-template-columns:1fr 1.4fr;gap:4rem;padding:3rem 5rem 6rem;width:100%;max-width:1200px;margin:0 auto;}
.release-artwork-col img{width:100%;aspect-ratio:1/1;object-fit:cover;filter:none;}
.release-info-col{display:flex;flex-direction:column;gap:2rem;padding-top:.5rem;}
#release-title{font-family:'Times New Roman',Times,serif;font-size:clamp(2rem,4vw,4.5rem);font-weight:200;letter-spacing:.02em;color:#fff;line-height:1;}
#release-meta{font-size:clamp(.75rem,.9vw,.9rem);font-weight:400;letter-spacing:.08em;color:#fff;}
#release-description p,#release-credits p{font-size:clamp(.8rem,1vw,.95rem);font-weight:200;line-height:1.85;color:#fff;letter-spacing:.02em;margin-bottom:.8rem;}

/* ════════════════════════
   RESPONSIVE
════════════════════════ */
@media (max-width:900px) {
  :root{--panel-gap:0px;}
  #nav ul li a{padding:.18rem .42rem;font-size:.9rem;}
  .work-videos{grid-template-columns:1fr;}
  .reel-section{padding:2rem 1.5rem 4rem;}
  .disc-grid{grid-template-columns:1fr;gap:2rem;}
  .discography-inner,.audio-inner{padding:2rem 1.5rem 5rem;}
  .about-cols{grid-template-columns:1fr;gap:2.5rem;}
  .about-photo img{aspect-ratio:4/3;width:80%;}
  #panel-video-col{width:100%;padding:5rem 1rem 1rem;}
  #panel-info-col{display:none;}
}

/* ── Audio section Bandcamp stream button ── */
.audio-bc-wrap { margin-top:.8rem; }
.audio-bc-btn {
  display:inline-flex;align-items:center;gap:.5rem;
  background:linear-gradient(to bottom,rgba(0,0,0,.35) 0%,transparent 100%);border:1px solid rgba(26,22,18,.22);
  padding:.25rem .7rem;
  font-family:'Times New Roman',Times,serif;
  font-size:.6rem;font-weight:400;letter-spacing:.22em;text-transform:uppercase;
  color:#1a1612;cursor:pointer;
  transition:background .2s,border-color .2s;
}
.audio-bc-btn:hover{background:rgba(26,22,18,.06);border-color:rgba(26,22,18,.5);}
.audio-bc-btn .tape-icon{width:18px;height:18px;}
.audio-bc-player-wrap{margin-top:.6rem;}
.audio-bc-player-wrap .disc-bc-player{height:120px;}

/* Release panel Bandcamp link */
.release-bandcamp-link {
  display: inline-block;
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(.72rem, .9vw, .85rem);
  font-weight: 400;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #ffffff;
  border-bottom: 1px solid rgba(255,255,255,.5);
  padding-bottom: 2px;
  transition: opacity .2s;
  text-decoration: none;
}
.release-bandcamp-link:hover { opacity: .9; }

/* ── COMPACT audio players ── */
/* ── COMPACT audio players (legacy overrides removed) ── */
.audio-inner { max-width:900px; }
.audio-album { padding-left:1rem; }
.audio-album-header { gap:1.2rem; }
.ap-progress-bar { margin-top:1px; }
.track-progress-cell { padding:.3rem 0 .65rem 0!important; }
.ap-btn { width:26px!important; height:26px!important; }

/* ── Release panel audio tracklist - light on cream ── */
.release-audio-player { margin-top:1.5rem; }
.release-tracklist tr { border-bottom:none; }
.release-tracklist td { padding:.4rem .3rem; font-size:clamp(.66rem,.85vw,.8rem); font-weight:200; color:#fff; letter-spacing:.04em; vertical-align:middle; }
.release-tracklist .track-num { color:#fff; }
.release-tracklist .track-dur { color:#fff; text-align:right; }
.release-tracklist .ap-btn { font-size:.7rem; }
.release-tracklist .ap-btn:hover { background:rgba(255,255,255,.06); }
.release-tracklist .ap-progress-bar { background:rgba(255,255,255,.08); }
.release-tracklist .ap-progress-fill { background:rgba(26,24,22,.35); }
.release-tracklist .ap-progress-fill.fill--playing { background:var(--red); }
.release-tracklist .ap-progress-head.head--playing { background:var(--red); }
.release-tracklist .ap-progress-time { color:#fff; }

/* ════════════════════════
   GLOBAL AUDIO BAR - bottom left, always visible
   Matches audio player dark style + reel
════════════════════════ */
#global-audio-bar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 4500;
  height: auto;
  overflow: visible;
  pointer-events: none;
  transition: transform .4s cubic-bezier(.22,1,.36,1);
}
#global-audio-bar.gab-collapsed {
  transform: translateY(calc(-100% + 14px));
}

/* INFO PANEL — always visible, no hover needed */
.gab-top {
  position: relative;
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--bg);
  border-bottom: 1px solid rgba(200,184,154,.1);
  padding: 10px 28px 12px 28px;
  pointer-events: all;
  white-space: nowrap;
  opacity: 1;
}

/* PROGRESS LINE — at very bottom of panel */
#gab-progress {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: rgba(200,184,154,.1);
  cursor: pointer;
  pointer-events: all;
}
.gab-progress-fill {
  position: absolute; left:0; top:0; height:100%;
  background: var(--red);
  width: 0%;
  pointer-events: none;
}
.gab-progress-fill.fill--playing { background: var(--red); }
.gab-progress-head {
  position: absolute; top: 50%;
  transform: translate(-50%,-50%);
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--red);
  left: 0%; opacity: 0;
  pointer-events: none;
}
.gab-progress-head.head--playing { opacity: 1; }

/* TOGGLE — full-width strip below panel, subtle but recognizable */
#gab-toggle {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 14px;
  background: var(--bg);
  border-bottom: 1px solid rgba(200,184,154,.1);
  cursor: pointer;
  pointer-events: all;
  color: rgba(26,24,22,.22);
  transition: color .2s, background .2s;
  z-index: 2;
  font-size: 0;
  padding: 0; margin: 0;
}
#gab-toggle:hover { color: rgba(26,24,22,.55); background: rgba(200,184,154,.04); }
.gab-toggle-icon { width: 14px; height: 7px; display: block; }
.icon-hide { display: block; }
.icon-show { display: none; }
#global-audio-bar.gab-collapsed .icon-hide { display: none; }
#global-audio-bar.gab-collapsed .icon-show { display: block; }
.gab-info { display: flex; flex-direction: column; gap: 2px; }
.gab-title {
  font-family: 'Times New Roman', Times, serif;
  font-size: .92rem; font-weight: 400; letter-spacing: .03em;
  color:#fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 200px;
}
.gab-album-name {
  font-family: 'Times New Roman', Times, serif;
  font-size: .72rem; font-weight: 400;
  color: rgba(255,255,255,.38);
  white-space: nowrap;
}
.gab-artist { display: none; }
.gab-time {
  font-family: 'Times New Roman', Times, serif;
  font-size: .72rem; font-weight: 400; letter-spacing: .05em;
  color: rgba(255,255,255,.38);
  white-space: nowrap; flex-shrink: 0;
}
.gab-play-btn {
  flex-shrink: 0;
  width: 26px !important; height: 26px !important;
  border: none !important;
  border-radius: 50% !important;
  background: none !important;
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 0;
  transition: background .2s;
}
.gab-play-btn.playing {
  background: var(--red) !important;
  color: transparent !important;
}
.gab-play-btn.played {
  background: none !important;
  color: var(--red) !important;
}

/* Track inline cover thumbnail (Frostschichten) */
.track-cover-thumb {
  display: inline-block;
  width: 28px; height: 28px;
  object-fit: cover;
  vertical-align: middle;
  margin-left: .6rem;
  opacity: .75;
  border: 1px solid rgba(255,255,255,.08);
}

/* Track title clickable - opens detail panel */
.track-title-main {
  cursor: pointer;
}
.track-title-main:hover {
  opacity: .7;
}


/* ════════════════════════
   ABOUT - photos side by side + credits sub-section
════════════════════════ */
.about-photos {
  display: flex;
  gap: 2.5rem;
  justify-content: center;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 2rem;
}
.about-photo {
  flex: 1;
  max-width: 380px;
}
.about-photo img {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: grayscale(20%);
}
.about-photo--drums img { filter: grayscale(40%); }

/* Credits sub-section */
.about-credits {
  width: 100%;
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(238,238,238,.15);
  text-align: center;
}
.about-credits-heading {
  font-family: 'Times New Roman', Times, serif;
  font-size: clamp(1rem, 1.4vw, 1.4rem);
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(238,238,238,.55);
  margin-bottom: 1.5rem;
}
.about-credits-body {
  max-width: 800px;
  margin: 0 auto;
}
.about-credits-body p {
  font-size: clamp(.85rem, 1.05vw, 1.05rem);
  font-weight: 200;
  line-height: 1.85;
  color: rgba(238,238,238,.65);
  letter-spacing: .03em;
  margin-bottom: .75rem;
}

/* Hide old single-photo block if any leftover */
.about-section .about-inner > .about-photo:not(.about-photo--drums):not(.about-photo--portrait) {
  display: none;
}

@media (max-width: 700px) {
  .about-photos { flex-direction: column; align-items: center; }
  .about-photo { max-width: 100%; width: 90%; }
}


/* ════════════════════════
   GAB hover effects
════════════════════════ */
.gab-cover, .gab-title {
  cursor: pointer;
  transition: opacity .25s, filter .25s;
}
.gab-cover:hover, .gab-title:hover {
  opacity: .75;
  filter: brightness(1.2);
}

/* Track number + duration: not selectable by mouse, but layout-clickable */
.track-num, .track-dur, .ap-progress-time, .gab-time {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  cursor: default;
}

/* Album title hover brightness */
.audio-album-title {
  transition: color .25s, opacity .25s;
}
.audio-album-title:hover {
  color: #ffffff !important;
  opacity: 1;
}

/* Inline video (Usbef local file) in Film grid */
.work-video-wrap video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Local video in detail panel */
#panel-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
  background:var(--bg);
}

/* Make Film grid responsive - 2 columns on wide, 1 on mobile */
@media (min-width: 901px) {
  .work-videos { grid-template-columns: 1fr 1fr; }
}

/* YouTube external-link card (embedding disabled by channel) */
.work-yt-link {
  display: block;
  position: absolute; inset: 0;
  background:var(--bg);
  text-decoration: none;
  cursor: pointer;
}
.work-yt-link img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(20%);
  transition: filter .35s, transform .6s cubic-bezier(.22,1,.36,1);
}
.work-yt-link:hover img {
  filter: grayscale(0%);
  transform: scale(1.02);
}
.work-yt-overlay {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .8rem;
  background: rgba(10,9,7,.35);
  transition: background .25s;
}
.work-yt-link:hover .work-yt-overlay {
  background: rgba(10,9,7,.55);
}
.work-yt-play {
  font-size: 2.4rem;
  color: rgba(255,255,255,.9);
  line-height: 1;
}
.work-yt-label {
  font-size: .65rem;
  font-weight: 400;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: rgba(255,255,255,.85);
  border-bottom: 1px solid rgba(200,184,154,.35);
  padding-bottom: .2rem;
}

@media (max-width: 900px) {
  .disc-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
}
@media (max-width: 600px) {
  .disc-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════════
   SVG ICONS — sized to match desktop
   ════════════════════════════════════════════════════════════════ */
.ap-btn .play-icon,
.ap-btn .pause-icon {
  width: 11px;
  height: 13px;
  display: block;
}
.work-yt-play .play-icon {
  width: 28px;
  height: 32px;
  display: block;
  color: rgba(255,255,255,.9);
}
#gab-toggle .gab-toggle-icon {
  width: 14px;
  height: 14px;
  display: block;
}
#gab-toggle { font-size: 0; }  /* hide any leftover text */

/* ════════════════════════════════════════════════════════════════
   MOBILE MENU TOGGLE BUTTON — circular sphere, only visible on mobile
   ════════════════════════════════════════════════════════════════ */
#mobile-menu-toggle {
  display: none;     /* desktop: hidden */
  position: fixed;
  bottom: 1.6rem;
  left: 50%;
  transform: translateX(-50%);
  top: auto; right: auto;
  background: rgba(10,9,7,.55);
  border: 1px solid rgba(255,255,255,.3);
  color: rgba(255,255,255,.8);
  font-family: 'Times New Roman', Times, serif;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
  padding: .4rem 1.3rem;
  cursor: pointer;
  z-index: 5200;
  border-radius: 1px;
  transition: color .2s, border-color .2s, background .2s;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  max-width: calc(100vw - 3rem);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
#mobile-menu-toggle:hover {
  color:#fff;
  border-color: rgba(255,255,255,.65);
}

/* Close button — top-right inside the nav panel */
#mobile-menu-close {
  display: none; /* shown only in mobile via media query */
  position: absolute;
  top: 1.4rem;
  right: 1.6rem;
  background: none;
  border: none;
  color: rgba(255,255,255,.45);
  font-family: 'Times New Roman', Times, serif;
  font-size: .78rem;
  font-weight: 400;
  letter-spacing: .2em;
  text-transform: uppercase;
  cursor: pointer;
  padding: .3rem 0;
  transition: color .2s;
  -webkit-tap-highlight-color: transparent;
}
#mobile-menu-close:hover { color:#fff; }

.mobile-menu-dot { display: none; }

/* ════════════════════════════════════════════════════════════════
   MOBILE LAYOUT — applies to phones
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Discover button — bottom center, fixed, always visible */
  #mobile-menu-toggle { display: block; }

  /* On home, hide fixed discover — inline one is used */
  body.on-home #mobile-menu-toggle { display: none; }

  /* Show inline discover button on home */
  .home-discover { display: block; }

  /* Close button — show inside nav panel */
  #mobile-menu-close { display: block; }

  /* Catalog: horizontal scroll on mobile */
  .catalog-inner { padding: 4rem 0 4rem; overflow-x: auto; }
  .catalog-table { min-width: 600px; }
  .catalog-header { padding: 0 1.2rem 1rem; margin-bottom: 1.5rem; }
  .catalog-filters { padding: 0 1.2rem; }

  /* Nav: hidden by default on mobile, slides in when menu is open */
  #nav {
    position: fixed;
    top: var(--gab-h);
    right: 0;
    bottom: 0;
    left: auto;
    width: 70vw;
    max-width: 280px;
    height: 100vh;
    background: rgba(10,9,7,.96);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 4.5rem 2rem 2rem;  /* top clears the close button */
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.22,1,.36,1);
    z-index: 5100;
    pointer-events: none;
  }
  #nav.mobile-nav-open {
    transform: translateX(0);
    pointer-events: all;
  }
  #nav ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.4rem;
    padding: 0;
    margin: 0;
  }
  #nav ul li a {
    font-size: 1.1rem;
    padding: .5rem 0;
    color: rgba(255,255,255,.55);
    letter-spacing: .15em;
    border: none;
  }
  #nav ul li a.active,
  #nav ul li a.section-active {
    color: #ffffff !important;        /* selected: bright */
    font-weight: 400;
    border-bottom: 1px solid #fff;
    padding-bottom: .4rem;
  }

  /* GAB mobile: identical to desktop, always visible when playing */
  #global-audio-bar {
    top: 0; left: 0; right: 0; width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease;
  }
  #global-audio-bar.gab-playing {
    opacity: 1;
    pointer-events: all;
    transform: translateY(0);
  }
  #global-audio-bar.gab-scroll-hidden {
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
  }
  #global-audio-bar.gab-collapsed {
    transform: translateY(calc(-100% + 14px));
    opacity: 1;
  }

  /* Mobile: sections start below GAB, names and content use normal spacing */
  :root { --gab-h: 58px; }
  .home-name    { top: 2rem; }
  .section-name { top: 2rem; }

  /* On mobile: panel always visible when gab-playing */
  .gab-top {
    opacity: 1;
    pointer-events: all;
  }
  .gab-top { justify-content: center; }
  .gab-title { max-width: 45vw; }

  /* ========== ABOUT SECTION ========== */
  .about-section { padding: 0; }
  .about-inner {
    padding: 5rem 1.5rem 4rem !important;
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 0;
  }
  .about-text {
    text-align: center;
    margin: 0 auto;
  }
  .about-text p {
    font-size: clamp(1.4rem, 5vw, 2rem) !important;
    line-height: 1.45 !important;
    margin-bottom: 1.5rem;
  }
  .about-cols {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 2rem !important;
    margin: 1.5rem 0 !important;
  }
  .about-note {
    font-size: clamp(1rem, 3.5vw, 1.4rem) !important;
    text-align: center;
    line-height: 1.5 !important;
  }

  /* About contacts: visible, properly stacked */
  .about-contacts,
  .about-contact {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: .6rem !important;
    width: 100%;
  }
  .about-contacts a,
  .about-contact-plain {
    font-size: 1rem !important;
    color: #ffffff !important;
    text-align: center;
    word-break: break-word;
  }

  /* About photos — tighter gap to text now that contacts show */
  .about-photos {
    margin: 1.5rem 0 0 !important;
    gap: 1rem !important;
  }
  .about-photo { max-width: 100% !important; width: 100% !important; }
  .about-photo img { aspect-ratio: 4/3; width: 100% !important; }

  /* ========== FILM DETAIL PANEL — show video + info stacked ========== */
  #video-panel {
    left: 0 !important;
  }
  #panel-video-col {
    width: 100% !important;
    height: auto !important;
    padding: 4rem 1rem 1rem !important;
  }
  #panel-info-col {
    display: flex !important;     /* SHOW it on mobile */
    width: 100% !important;
    height: auto !important;
    padding: 1rem 1.5rem 3rem !important;
  }
  #panel-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  #panel-title {
    font-size: 1.6rem !important;
    color: #ffffff;
  }
  #panel-credits p {
    font-size: .85rem !important;
    color: rgba(255,255,255,.85);
    line-height: 1.6;
  }
  #video-panel {
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  /* ========== AUDIO + DISCOGRAPHY: clear nav-name from GAB ========== */
  .audio-inner,
  .discography-inner {
    padding-top: 11rem !important;     /* clear name top + GAB area */
  }
  .audio-section .sg-name,
  .discography-section .sg-name {
    /* keep at top-left, smaller, doesn't overlap GAB on right */
    font-size: clamp(1.2rem, 4vw, 1.5rem) !important;
  }

  /* Audio album header: prevent overlap of title and GAB */
  .audio-album-header {
    flex-direction: column !important;
    gap: 1rem !important;
    align-items: flex-start !important;
  }
  .audio-album-image {
    width: clamp(140px, 50vw, 200px) !important;
    height: clamp(140px, 50vw, 200px) !important;
    align-self: center;
  }
  .audio-album-title {
    font-size: 1rem !important;
  }
  .audio-tracklist td {
    font-size: .85rem !important;
    padding: .55rem .3rem !important;
  }

  /* ========== DISCOGRAPHY DETAIL PANEL — full screen ========== */
  .release-panel {
    left: 0 !important;       /* full width on mobile */
  }
  .release-panel-body {
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 4rem 1.2rem 3rem !important;
  }
  .release-artwork-col,
  .release-info-col {
    width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }
  .release-artwork-col {
    margin-bottom: 1.5rem;
  }
  .release-artwork-col img {
    width: 70% !important;
    max-width: 280px !important;
    margin: 0 auto;
    display: block;
  }
  .release-info-col {
    align-items: flex-start;
  }
  #release-title,
  #audio-release-title {
    font-size: 1.8rem !important;
    line-height: 1.1 !important;
    margin-bottom: .5rem;
  }
  #release-meta,
  #audio-release-meta {
    font-size: .8rem !important;
    margin-bottom: 1rem;
  }
  #release-description p,
  #release-credits p,
  #audio-release-description p,
  #audio-release-credits p {
    font-size: .9rem !important;
    line-height: 1.7 !important;
  }
  .panel-close-btn {
    top: 1rem !important;
    right: 1rem !important;
  }

  /* Disco grid: 1 column already from existing rule */
  .disc-item-img img {
    width: 100% !important;
  }
  .disc-item-title { font-size: 1rem !important; }
  .disc-item-meta { font-size: .8rem !important; }

  /* Hide the section-name overlap in audio/discography:
     keep position but don't clash with GAB by making it inline-top-left */
  .audio-section .sg-name,
  .discography-section .sg-name {
    z-index: 5;
  }
}



/* ════════════════════════════════════════════════════════════════
   MOBILE — ROUND 2 FIXES (this overrides earlier mobile rules)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Nav drawer */
  #nav {
    left: auto !important;
    right: 0 !important;
    transform: translateX(100%) !important;
    width: 70vw !important;
    max-width: 280px !important;
    padding: 4.5rem 2rem 5rem !important;
  }
  #nav.mobile-nav-open {
    transform: translateX(0) !important;
  }

  /* GAB toggle position on mobile */
  #gab-toggle { position: relative; width: 100%; height: 14px; left: auto; top: auto; transform: none; border-radius: 0; }
  #global-audio-bar.gab-collapsed #gab-toggle { transform: none !important; }

  /* ─── Film section: clear GAB, keep grid clean ─── */
  .work-section { padding-top: 0 !important; }
  .work-videos {
    grid-template-columns: 1fr !important;
    padding-top: 4rem;  /* clear GAB on top */
  }

  /* ─── ALL detail panels: full screen on mobile ─── */
  /* Video panel (Film) */
  #video-panel {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }

  /* Release panel (Discography + Audio) */
  .release-panel {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
  }
  .release-panel-body {
    width: 100% !important;
    height: 100% !important;
    flex-direction: column !important;
    overflow-y: auto !important;
    padding: 4rem 1.2rem 5rem !important;
    box-sizing: border-box !important;
  }
  .release-artwork-col,
  .release-info-col {
    width: 100% !important;
    flex: none !important;
    padding: 0 !important;
  }
  .release-artwork-col {
    margin-bottom: 1.5rem;
    text-align: center;
  }
  .release-artwork-col img {
    width: 70% !important;
    max-width: 280px !important;
    margin: 0 auto;
    display: block;
    height: auto !important;
  }

  /* Detail text: keep size moderate, fill screen width */
  #release-title, #audio-release-title {
    font-size: 1.5rem !important;
    line-height: 1.2 !important;
    word-break: break-word;
  }
  #release-meta, #audio-release-meta {
    font-size: .75rem !important;
  }
  #release-description p,
  #release-credits p,
  #audio-release-description p,
  #audio-release-credits p {
    font-size: .82rem !important;
    line-height: 1.65 !important;
    width: 100%;
    max-width: 100%;
  }
  /* Make sure the detail panel info column uses ALL horizontal space */
  .release-info-col {
    width: 100% !important;
    padding: 0 .25rem !important;
  }
  /* Film panel info too */
  #panel-info {
    width: 100% !important;
  }
  #panel-credits p {
    font-size: .82rem !important;
    line-height: 1.65 !important;
  }
}



/* ════════════════════════════════════════════════════════════════
   MOBILE — FINAL DEFINITIVE FIX (overrides all earlier rules)
   ════════════════════════════════════════════════════════════════ */
@media (max-width: 700px) {

  /* Release panel: kill the 100px desktop left gap */
  .release-panel-body {
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
  }

  /* Release panel inner is a GRID — switch to single column on mobile */
  .release-panel-inner {
    grid-template-columns: 1fr !important;
    gap: 1.5rem !important;
    padding: 4rem 1rem 4rem !important;
    max-width: 100% !important;
  }

  /* Artwork: full width, no 70% constraint */
  .release-artwork-col {
    width: 100% !important;
    text-align: center;
  }
  .release-artwork-col img {
    width: 70% !important;
    max-width: 280px !important;
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
  }

  /* Info column: take full width */
  .release-info-col {
    width: 100% !important;
    padding: 0 .25rem !important;
    align-items: flex-start;
  }

  /* Video panel: same fix - gets full width */
  #video-panel {
    left: 0 !important;
  }

  /* GAB toggle: full height, no rotation animation, two static SVGs */
  #global-audio-bar #gab-toggle {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -22px !important;
    right: auto !important;
    width: 22px !important;
    height: auto !important;
    transform: none !important;
    background: #0f0e0c !important;
    border: 1px solid rgba(237,229,216,.18) !important;
    border-right: none !important;
    border-radius: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: background .2s !important;
  }
  #gab-toggle .gab-toggle-icon {
    width: 12px !important;
    height: 12px !important;
    transform: none !important;
    transition: none !important;
    color: rgba(26,24,22,.7);
  }
  #gab-toggle .icon-hide { display: block !important; }
  #gab-toggle .icon-show { display: none !important; }
  #global-audio-bar.gab-collapsed #gab-toggle {
    transform: none !important;  /* NO rotation animation */
  }
  #global-audio-bar.gab-collapsed #gab-toggle .icon-hide { display: none !important; }
  #global-audio-bar.gab-collapsed #gab-toggle .icon-show { display: block !important; }
}

/* ── Page Signature — bottom of every section, uniform ── */
.page-sig {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.5rem 0;
  margin-top: 4rem;
}
.page-sig-img {
  width: clamp(80px, 9vw, 130px);
  display: block;
  filter: none;
}
.audio-section .page-sig { margin-top: 8rem; }
.catalog-section .page-sig { margin-top: 8rem; }
/* Home signature — black on white background */
.home-sig {
  display: block;
  width: clamp(80px, 9vw, 130px);
  margin: 4rem auto 0;
  filter: invert(1);
  opacity: .65;
}