:root {
  --bg: #f6f0eb;
  --bg-soft: #efe6e2;
  --paper: #fffaf6;
  --ink: #241922;
  --text: #241922;
  --muted: #756a70;
  --line: rgba(36,25,34,.16);
  --yellow: #f4c430;
  --yellow-soft: #fff0ad;
  --yellow-deep: #8d6500;
  --acid: #ff6a57;
  --pink: #ff4f9a;
  --pink-soft: #ffd8e8;
  --violet: #6c5cff;
  --cyan: #38b9c7;
  --max: 1440px;
  --pad: clamp(20px,4vw,68px);
  --radius: 24px;
}

* { box-sizing:border-box; }
html { scroll-behavior:smooth; background:var(--bg); }
body { margin:0; font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; background:var(--bg); color:var(--text); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button,input,textarea { font:inherit; }
button { color:inherit; }
::selection { background:var(--pink); color:#fff; }

.skip-link { position:fixed; left:16px; top:16px; z-index:999; background:var(--pink); color:#fff; padding:10px 14px; transform:translateY(-160%); transition:transform .2s; }
.skip-link:focus { transform:translateY(0); }
.scroll-progress { position:fixed; z-index:120; left:0; top:0; width:0; height:4px; background:linear-gradient(90deg,var(--pink),var(--yellow),var(--pink)); }

.site-header { position:fixed; z-index:100; inset:0 0 auto 0; height:82px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--pad); color:#fff; transition:background .3s,backdrop-filter .3s,border-color .3s,color .3s; border-bottom:1px solid transparent; }
.site-header.scrolled { background:rgba(255,250,246,.90); backdrop-filter:blur(18px); border-color:var(--line); color:var(--ink); box-shadow:0 8px 30px rgba(48,24,40,.05); }
.brand { display:inline-flex; align-items:baseline; gap:12px; }
.brand-mark { font-size:30px; line-height:1; font-weight:1000; letter-spacing:-2px; }
.brand-sub { font-size:12px; text-transform:uppercase; letter-spacing:.17em; color:rgba(255,255,255,.76); }
.site-header.scrolled .brand-sub { color:#766b70; }
.main-nav { display:flex; align-items:center; gap:clamp(24px,3vw,52px); font-size:18px; font-weight:950; letter-spacing:.075em; text-transform:uppercase; }
.main-nav a { position:relative; padding:28px 0; color:rgba(255,255,255,.92); }
.site-header.scrolled .main-nav a { color:#33252f; }
.main-nav a::after { content:""; position:absolute; left:0; bottom:15px; width:100%; height:5px; background:var(--yellow); transform:scaleX(1); transform-origin:left; opacity:.92; transition:height .2s,transform .25s,background .25s; }
.main-nav a:hover::after,.main-nav a.active::after { height:8px; background:var(--yellow); transform:scaleX(1.08); }
.menu-toggle { display:none; border:0; background:transparent; width:46px; height:46px; padding:12px; cursor:pointer; }
.menu-toggle span { display:block; height:2px; background:currentColor; margin:7px 0; transition:.25s; }

.hero { min-height:100svh; position:relative; display:grid; align-items:end; overflow:hidden; padding:124px var(--pad) 76px; color:#fff; }
.hero-media { position:absolute; inset:0; background:#22151e; }
.hero-media::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(32,17,28,.78) 0%,rgba(32,17,28,.34) 48%,rgba(32,17,28,.14) 75%,rgba(32,17,28,.38) 100%),linear-gradient(0deg,rgba(24,12,21,.68) 0%,transparent 55%); }
.hero-media img { width:100%; height:100%; object-fit:cover; object-position:center 42%; transform:scale(1.03); filter:saturate(1.08) contrast(1.02) brightness(1.08); }
.hero-noise { position:absolute; inset:0; opacity:.08; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); mix-blend-mode:soft-light; }
.hero-content { position:relative; z-index:2; width:min(950px,80vw); }
.eyebrow { margin:0 0 20px; color:var(--pink); font-size:13px; font-weight:950; letter-spacing:.21em; text-transform:uppercase; }
.hero .eyebrow { color:#ff98c3; }
.hero-title { margin:0; font-size:clamp(68px,11vw,174px); line-height:.74; letter-spacing:-.075em; font-weight:1000; text-transform:uppercase; }
.hero-title span { display:block; }
.hero-title .accent { color:transparent; -webkit-text-stroke:2px #fff; transform:translateX(clamp(18px,5vw,78px)); }
.hero-lead { margin:34px 0 0; max-width:650px; font-size:clamp(20px,2.2vw,34px); line-height:1.15; letter-spacing:-.035em; }
.hero-lead strong { color:#ff93be; font-weight:950; }
.hero-actions { display:flex; gap:12px; margin-top:32px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:54px; padding:0 24px; border:1px solid currentColor; font-size:12px; font-weight:950; letter-spacing:.11em; text-transform:uppercase; transition:transform .2s,background .2s,color .2s,border-color .2s; cursor:pointer; }
.btn:hover { transform:translateY(-3px); }
.btn-primary { background:var(--pink); color:#fff; border-color:var(--pink); box-shadow:0 10px 30px rgba(255,79,154,.20); }
.btn-primary:hover { background:var(--acid); border-color:var(--acid); color:#2b1820; }
.btn-ghost { background:rgba(255,255,255,.10); color:#fff; border-color:rgba(255,255,255,.40); backdrop-filter:blur(8px); }
.btn-ghost:hover { background:#fff; color:#271923; border-color:#fff; }
.next-show-card { position:absolute; z-index:3; right:var(--pad); bottom:74px; width:min(320px,27vw); border:1px solid rgba(255,255,255,.35); background:rgba(255,244,249,.88); color:var(--ink); backdrop-filter:blur(18px); padding:22px; display:grid; gap:6px; box-shadow:0 24px 70px rgba(20,7,15,.20); }
.next-show-card .kicker { font-size:10px; color:var(--pink); letter-spacing:.2em; text-transform:uppercase; font-weight:950; }
.next-show-card strong { font-size:38px; letter-spacing:-.05em; }
.next-show-card > span:not(.kicker) { color:#62565d; font-size:14px; }
.next-show-card a { margin-top:8px; color:var(--violet); font-weight:950; font-size:12px; text-transform:uppercase; letter-spacing:.12em; }
.scroll-cue { position:absolute; z-index:4; right:var(--pad); bottom:18px; display:flex; align-items:center; gap:10px; color:rgba(255,255,255,.75); text-transform:uppercase; letter-spacing:.18em; font-size:9px; }
.scroll-cue i { width:42px; height:1px; background:currentColor; display:block; }

.marquee { overflow:hidden; border-top:1px solid rgba(36,25,34,.12); border-bottom:1px solid rgba(36,25,34,.12); background:var(--yellow); color:#2b1c28; }
.marquee-track { display:flex; align-items:center; gap:30px; min-width:max-content; padding:15px 0; animation:marquee 25s linear infinite; font-size:14px; font-weight:1000; letter-spacing:.18em; }
.marquee-track i { font-style:normal; color:var(--pink); font-size:19px; }
@keyframes marquee { to { transform:translateX(-50%); } }

.section { width:min(var(--max),100%); margin:0 auto; padding:clamp(96px,12vw,180px) var(--pad); }
.section-number { display:none; }
.split-layout { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(320px,.95fr); gap:clamp(50px,9vw,150px); align-items:start; }
.section-title { margin:0; font-size:clamp(58px,8vw,128px); line-height:.82; letter-spacing:-.065em; font-weight:1000; text-transform:uppercase; }
.stroke { color:transparent; -webkit-text-stroke:1.8px currentColor; }
.band-section .stroke,.minds-section .stroke,.shows-section .stroke { -webkit-text-stroke-color:#352630; }
.band-section { background:var(--bg); }
.band-copy { padding-top:10px; }
.band-copy p { max-width:680px; color:#6f6369; font-size:clamp(16px,1.45vw,21px); line-height:1.62; }
.band-copy .lead { color:var(--ink); font-size:clamp(22px,2.5vw,35px); line-height:1.25; letter-spacing:-.035em; margin-top:0; }
.band-copy strong { color:var(--pink); }
.stat-row { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:50px; }
.stat-row div { border-top:1px solid var(--line); padding-top:16px; }
.stat-row strong { display:block; color:var(--ink); font-size:clamp(30px,4vw,58px); letter-spacing:-.06em; }
.stat-row span { font-size:11px; text-transform:uppercase; letter-spacing:.14em; color:#8d8086; }
.logo-sticker { width:155px; height:auto; margin-top:42px; transform:rotate(-2deg); box-shadow:0 18px 50px rgba(70,31,53,.16); border:7px solid #fff; }

.sound-section { position:relative; overflow:hidden; background:linear-gradient(135deg,#ffe5f0 0%,#fffaf2 50%,#fff0bd 100%); color:var(--ink); padding:clamp(96px,12vw,180px) max(var(--pad),calc((100vw - var(--max))/2 + var(--pad))); }
.sound-section .section-number { border-color:rgba(36,25,34,.16); color:#7b6e74; position:relative; z-index:2; }
.sound-section .eyebrow { color:#d72d74; }
.sound-grid { position:relative; z-index:2; display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,10vw,150px); align-items:end; }
.sound-grid .hot,.downloads-section .hot { color:var(--pink); }
.sound-panel { border:1px solid rgba(36,25,34,.16); padding:clamp(26px,4vw,48px); background:rgba(255,255,255,.64); backdrop-filter:blur(12px); box-shadow:0 24px 80px rgba(86,38,66,.08); }
.sound-panel > p { font-size:clamp(18px,1.55vw,23px); line-height:1.55; margin:30px 0; }
.equalizer { height:92px; display:flex; align-items:flex-end; gap:7px; }
.equalizer span { width:calc((100% - 77px)/12); min-width:8px; background:linear-gradient(180deg,var(--pink),var(--yellow)); transform-origin:bottom; animation:eq 1.5s ease-in-out infinite alternate; border-radius:999px 999px 0 0; }
.equalizer span:nth-child(1){height:30%;animation-delay:-.2s}.equalizer span:nth-child(2){height:75%;animation-delay:-.9s}.equalizer span:nth-child(3){height:45%;animation-delay:-.5s}.equalizer span:nth-child(4){height:95%;animation-delay:-1.2s}.equalizer span:nth-child(5){height:58%;animation-delay:-.3s}.equalizer span:nth-child(6){height:84%;animation-delay:-1s}.equalizer span:nth-child(7){height:35%;animation-delay:-.7s}.equalizer span:nth-child(8){height:68%;animation-delay:-.1s}.equalizer span:nth-child(9){height:100%;animation-delay:-1.4s}.equalizer span:nth-child(10){height:50%;animation-delay:-.6s}.equalizer span:nth-child(11){height:78%;animation-delay:-1.1s}.equalizer span:nth-child(12){height:42%;animation-delay:-.4s}
@keyframes eq { to { transform:scaleY(.35); } }
.sound-tags { display:flex; flex-wrap:wrap; gap:8px; }
.sound-tags span { border:1px solid rgba(36,25,34,.24); border-radius:99px; padding:8px 12px; font-size:10px; font-weight:950; text-transform:uppercase; letter-spacing:.1em; background:#fff; }
.sound-panel .micro-note { margin:24px 0 0; font-size:11px; color:#756970; line-height:1.5; }
.sound-panel .micro-note strong { color:#3e2d38; }
.sound-backdrop { position:absolute; inset:0; pointer-events:none; overflow:hidden; }
.orb { position:absolute; border-radius:50%; filter:blur(70px); opacity:.38; }
.orb-a { width:460px; height:460px; background:#ff65a7; right:-100px; top:-120px; }
.orb-b { width:380px; height:380px; background:var(--yellow); left:30%; bottom:-180px; }

.demo-player { margin:26px 0 28px; border:1px solid rgba(36,25,34,.18); background:#261822; color:#fff; padding:20px; box-shadow:10px 10px 0 rgba(255,79,154,.22); }
.player-topline { display:flex; justify-content:space-between; gap:20px; align-items:center; padding-bottom:14px; border-bottom:1px solid rgba(255,255,255,.15); }
.player-label { font-size:11px; font-weight:1000; letter-spacing:.16em; text-transform:uppercase; color:#ff9ac4; }
.player-status { font-size:10px; text-transform:uppercase; letter-spacing:.1em; color:#b7aab2; text-align:right; }
.player-display { display:block; padding:20px 0 14px; }
.player-play { width:64px; height:64px; border-radius:50%; border:0; background:var(--pink); color:#fff; font-size:22px; display:grid; place-items:center; cursor:not-allowed; opacity:.85; }
.player-display strong { display:block; font-size:clamp(22px,2.2vw,32px); letter-spacing:-.04em; }
.player-display span { display:block; margin-top:6px; color:#c4b7bf; font-size:12px; line-height:1.45; }
.player-wave { height:38px; display:flex; align-items:center; gap:4px; overflow:hidden; }
.player-wave i { display:block; flex:1; min-width:3px; height:var(--h,50%); background:linear-gradient(180deg,#ff8cbb,var(--pink)); opacity:.85; }
.player-wave i:nth-child(3n+1){--h:30%}.player-wave i:nth-child(3n+2){--h:76%}.player-wave i:nth-child(3n){--h:48%}
#audio-player { width:100%; margin:4px 0 16px; accent-color:var(--pink); }
.track-list { display:grid; grid-template-columns:1fr 1fr; gap:7px; margin:4px 0 18px; }
.track-button { min-height:50px; border:1px solid rgba(255,255,255,.16); background:rgba(255,255,255,.06); color:#fff; padding:11px 13px; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; cursor:pointer; transition:background .2s,border-color .2s,transform .2s; }
.track-button span { font-size:12px; font-weight:900; letter-spacing:.01em; }
.track-button:hover { transform:translateY(-2px); border-color:var(--yellow); }
.track-button.active { background:var(--yellow); border-color:var(--yellow); color:#2b1c28; }
.video-feature { position:relative; z-index:2; width:min(var(--max),100%); margin:clamp(70px,9vw,125px) auto 0; display:grid; grid-template-columns:.45fr 1.55fr; gap:clamp(28px,5vw,70px); align-items:end; }
.video-copy h3 { margin:0; font-size:clamp(44px,5.5vw,88px); line-height:.87; letter-spacing:-.06em; text-transform:uppercase; }
.video-copy h3 span { color:var(--pink); }
.video-frame { position:relative; background:#21141d; box-shadow:14px 14px 0 var(--yellow); overflow:hidden; }
.video-frame video { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; background:#21141d; }

.section-heading-row { display:grid; grid-template-columns:1fr minmax(280px,.42fr); gap:70px; align-items:end; margin-bottom:56px; }
.section-intro { color:#72666c; font-size:clamp(17px,1.5vw,21px); line-height:1.5; }
.minds-section { background:#fffaf6; }
.members-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; align-items:start; }
.member-card { --tilt:0deg; position:relative; aspect-ratio:.79; overflow:hidden; background:#21141d; isolation:isolate; box-shadow:0 18px 50px rgba(61,27,46,.12); transform-origin:center; }
.member-card:nth-child(1){--tilt:-1.4deg}.member-card:nth-child(2){--tilt:1.2deg}.member-card:nth-child(3){--tilt:-.7deg}.member-card:nth-child(4){--tilt:1.5deg}.member-card:nth-child(5){--tilt:1deg}.member-card:nth-child(6){--tilt:-1.4deg}.member-card:nth-child(7){--tilt:.8deg}
.member-card.reveal { opacity:0; transform:translateY(42px) rotate(var(--tilt)) scale(.96); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.16,.8,.2,1),box-shadow .3s; }
.member-card.reveal.in-view { opacity:1; transform:translateY(0) rotate(var(--tilt)) scale(1); }
.member-card.reveal.in-view:hover { transform:translateY(-12px) rotate(0deg) scale(1.015); box-shadow:0 30px 65px rgba(61,27,46,.20); z-index:5; }
.member-card img { width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .7s cubic-bezier(.2,.8,.2,1),filter .45s; filter:saturate(.78) contrast(1.03); }
.member-shade { position:absolute; inset:0; background:linear-gradient(0deg,rgba(21,9,17,.92) 0%,rgba(21,9,17,.14) 56%,transparent 75%); z-index:1; }
.member-card::before { content:""; position:absolute; z-index:3; inset:0 auto 0 0; width:5px; background:var(--yellow); transform:scaleY(0); transform-origin:bottom; transition:transform .35s; }
.member-card::after { content:""; position:absolute; inset:0; z-index:2; border:1px solid rgba(255,255,255,.12); transition:border-color .25s; pointer-events:none; }
.member-card:hover::before { transform:scaleY(1); }
.member-card:hover::after { border-color:var(--pink); }
.member-card:hover img { transform:scale(1.075) translateY(-1.5%); filter:saturate(1.08) contrast(1.01); }
.member-meta { position:absolute; z-index:4; left:0; right:0; bottom:0; display:block; padding:20px; color:#fff; }
.member-meta h3 { margin:0; font-size:clamp(19px,1.7vw,28px); line-height:1; letter-spacing:-.04em; }
.member-meta p { margin:7px 0 0; color:#c9bac3; font-size:9px; text-transform:uppercase; letter-spacing:.12em; }

.live-strip { width:min(1600px,100%); margin:0 auto; min-height:72svh; display:grid; grid-template-columns:1.45fr .55fr; background:#251720; }
.live-image { overflow:hidden; min-height:520px; }
.live-image img { width:100%; height:100%; object-fit:cover; filter:saturate(1.05) contrast(1.02) brightness(1.05); }
.live-quote { display:flex; align-items:flex-end; padding:clamp(30px,5vw,72px); background:var(--pink); color:#2a1821; }
.live-quote p { margin:0; font-size:clamp(42px,5vw,82px); font-weight:1000; line-height:.88; letter-spacing:-.06em; text-transform:uppercase; }
.live-quote strong { color:#fff; }

.shows-section { background:var(--bg); }
.shows-list { margin-top:40px; border-top:1px solid var(--line); }
.show-row { display:grid; grid-template-columns:160px 1fr 150px 110px; gap:24px; align-items:center; min-height:190px; border-bottom:1px solid var(--line); transition:background .25s,padding .25s,transform .25s; }
.show-row:hover { background:#fff; padding-inline:20px; transform:translateX(4px); }
.show-date { display:flex; align-items:center; gap:14px; }
.show-date strong { font-size:72px; line-height:1; letter-spacing:-.07em; color:var(--pink); }
.show-date span { font-size:10px; line-height:1.35; letter-spacing:.13em; color:#857980; font-weight:950; }
.show-main p { margin:0 0 5px; color:var(--violet); font-size:10px; text-transform:uppercase; letter-spacing:.14em; font-weight:950; }
.show-main h3 { margin:0; font-size:clamp(25px,3vw,44px); letter-spacing:-.045em; }
.show-main span { display:block; margin-top:8px; color:#776b71; font-size:13px; }
.show-type { color:#81757b; font-size:11px; text-transform:uppercase; letter-spacing:.12em; }
.round-link { width:82px; height:82px; border:1px solid rgba(36,25,34,.25); border-radius:50%; display:grid; place-items:center; font-size:10px; font-weight:950; text-transform:uppercase; letter-spacing:.08em; transition:.25s; background:#fffaf6; }
.round-link:hover { background:var(--pink); color:#fff; border-color:var(--pink); transform:rotate(-7deg) scale(1.04); }
.past-show { margin-top:30px; color:#80747a; border-bottom:1px solid var(--line); padding-bottom:20px; }
.past-show summary { cursor:pointer; font-size:11px; text-transform:uppercase; letter-spacing:.13em; font-weight:850; }
.past-show p { font-size:13px; }

.downloads-section { width:min(var(--max),100%); margin:0 auto; padding:clamp(80px,10vw,150px) var(--pad); display:grid; grid-template-columns:.75fr 1.25fr; gap:clamp(50px,10vw,160px); align-items:end; background:#fff; color:var(--ink); }
.downloads-section .eyebrow { color:#d72d74; }
.downloads-section .section-title { font-size:clamp(50px,6vw,94px); }
.download-cards { display:grid; gap:10px; }
.download-card { display:grid; grid-template-columns:1fr auto; align-items:end; min-height:150px; padding:24px; border:1px solid rgba(36,25,34,.18); position:relative; transition:.25s; background:#fffaf6; }
.download-card span { grid-column:1; font-size:9px; text-transform:uppercase; letter-spacing:.14em; color:#776b71; align-self:start; }
.download-card strong { grid-column:1; font-size:clamp(22px,2.4vw,36px); letter-spacing:-.04em; }
.download-card i { grid-column:2; grid-row:1 / span 2; align-self:center; font-style:normal; font-size:34px; }
.download-card:hover { background:var(--pink-soft); transform:translateX(7px); border-color:var(--pink); }

.contact-section { position:relative; overflow:hidden; width:min(var(--max),100%); margin:0 auto; padding:clamp(100px,12vw,180px) var(--pad); display:grid; grid-template-columns:1fr 1fr; gap:clamp(50px,10vw,160px); background:linear-gradient(145deg,#fff0f6,#f7eeff 70%,#fff8f2); }
.contact-blur { position:absolute; width:600px; height:600px; border-radius:50%; background:#ff95bf; filter:blur(125px); opacity:.18; right:-200px; top:80px; pointer-events:none; }
.contact-copy,.contact-form { position:relative; z-index:1; }
.contact-title { margin:0; font-size:clamp(64px,9vw,144px); line-height:.75; letter-spacing:-.075em; text-transform:uppercase; }
.contact-title span { color:var(--pink); }
.contact-copy > p:not(.eyebrow) { max-width:520px; color:#6f6369; font-size:18px; line-height:1.55; margin-top:38px; }
.contact-direct { margin-top:36px; display:flex; flex-direction:column; align-items:flex-start; gap:8px; }
.contact-direct a { font-size:clamp(18px,2vw,28px); letter-spacing:-.03em; border-bottom:1px solid rgba(36,25,34,.2); padding-bottom:3px; }
.contact-direct a:hover { color:var(--pink); }
.contact-form { padding-top:38px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.contact-form label { display:block; margin-bottom:18px; color:#6f6369; font-size:10px; font-weight:950; text-transform:uppercase; letter-spacing:.14em; }
.contact-form label span { color:#9a8d93; }
.contact-form input,.contact-form textarea { width:100%; margin-top:9px; border:1px solid rgba(36,25,34,.18); border-radius:0; background:rgba(255,255,255,.8); color:var(--ink); padding:16px; outline:none; transition:border-color .2s,background .2s,box-shadow .2s; }
.contact-form input { height:54px; }
.contact-form textarea { resize:vertical; min-height:150px; }
.contact-form input:focus,.contact-form textarea:focus { border-color:var(--pink); background:#fff; box-shadow:0 0 0 3px rgba(255,79,154,.10); }
.contact-form .btn { border:none; }
.form-note { color:#81747b; font-size:10px; line-height:1.5; max-width:500px; }

.site-footer { min-height:120px; padding:28px var(--pad); border-top:1px solid var(--line); display:grid; grid-template-columns:1fr 1fr 1fr; align-items:center; gap:20px; color:#7d7177; font-size:10px; text-transform:uppercase; letter-spacing:.12em; background:#fffaf6; }
.footer-brand { display:inline-flex; align-items:baseline; gap:10px; color:var(--ink); }
.footer-brand span { font-size:30px; font-weight:1000; letter-spacing:-.08em; }
.footer-brand small { font-size:8px; letter-spacing:.14em; color:#84787e; }
.footer-center { text-align:center; }
.footer-right { display:flex; justify-content:flex-end; gap:20px; }
.footer-right a { color:var(--pink); }
.noscript { position:fixed; bottom:0; left:0; right:0; background:#fff; color:#000; padding:10px 20px; z-index:1000; font-size:12px; }

.reveal { opacity:0; transform:translateY(26px); transition:opacity .8s cubic-bezier(.2,.7,.2,1),transform .8s cubic-bezier(.2,.7,.2,1); }
.reveal.in-view { opacity:1; transform:none; }

@media (max-width:1050px) {
  .main-nav { gap:22px; font-size:16px; }
  .hero-content { width:85vw; }
  .next-show-card { width:310px; }
  .members-grid { grid-template-columns:repeat(3,1fr); }
  .show-row { grid-template-columns:135px 1fr 90px; }
  .show-type { display:none; }
}

@media (max-width:780px) {
  :root { --pad:20px; }
  .site-header { height:68px; }
  .brand-sub { display:none; }
  .menu-toggle { display:block; z-index:102; }
  .main-nav { position:fixed; inset:0; z-index:101; background:#fff2f7; color:var(--ink); flex-direction:column; align-items:flex-start; justify-content:center; padding:80px 28px; gap:0; transform:translateX(100%); transition:transform .35s cubic-bezier(.2,.7,.2,1); }
  .main-nav.open { transform:none; }
  .main-nav a,.site-header.scrolled .main-nav a { width:100%; padding:13px 0; color:var(--ink); font-size:clamp(38px,12vw,70px); font-weight:1000; line-height:1; letter-spacing:-.05em; text-transform:uppercase; border-bottom:1px solid var(--line); }
  .main-nav a::after { bottom:7px; height:5px; width:64px; opacity:1; }
  .menu-toggle[aria-expanded="true"] { color:var(--ink); }
  .menu-toggle[aria-expanded="true"] span:first-child { transform:translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform:translateY(-4.5px) rotate(-45deg); }
  body.menu-open { overflow:hidden; }

  .hero { padding-top:100px; padding-bottom:138px; align-items:center; }
  .hero-media::after { background:linear-gradient(0deg,rgba(32,17,28,.72),rgba(32,17,28,.12) 63%,rgba(32,17,28,.38)); }
  .hero-media img { object-position:55% center; }
  .hero-content { width:100%; align-self:end; }
  .hero-title { font-size:clamp(62px,22vw,106px); }
  .hero-title .accent { transform:translateX(18px); }
  .hero-lead { font-size:22px; max-width:90%; }
  .next-show-card { left:20px; right:20px; bottom:22px; width:auto; padding:14px 16px; grid-template-columns:auto 1fr auto; align-items:center; gap:8px 14px; }
  .next-show-card .kicker { grid-column:1/-1; }
  .next-show-card strong { font-size:23px; }
  .next-show-card a { margin:0; text-align:right; }
  .scroll-cue { display:none; }

  .section { padding-block:90px; }
  .split-layout,.sound-grid,.section-heading-row,.downloads-section,.contact-section,.video-feature { grid-template-columns:1fr; }
  .section-title { font-size:clamp(55px,17vw,92px); }
  .split-layout { gap:44px; }
  .stat-row { margin-top:34px; }
  .stat-row strong { font-size:38px; }
  .sound-section { padding:90px 20px; }
  .sound-grid { gap:46px; }
  .sound-panel { padding:24px; }
  .player-topline { align-items:flex-start; flex-direction:column; gap:7px; }
  .player-status { text-align:left; }
  .video-feature { margin-top:70px; }
  .video-frame { box-shadow:8px 8px 0 var(--yellow); }
  .section-heading-row { gap:26px; }
  .members-grid { grid-template-columns:repeat(2,1fr); gap:10px; }
  .member-card { aspect-ratio:.75; }
  .member-meta { padding:14px; gap:8px; }
  .member-meta h3 { font-size:18px; }
  .member-meta p { font-size:8px; }
  .live-strip { grid-template-columns:1fr; min-height:auto; }
  .live-image { min-height:52vh; }
  .live-quote { min-height:300px; }
  .show-row { grid-template-columns:94px 1fr auto; min-height:150px; gap:12px; }
  .show-row:hover { padding-inline:0; background:#fff; transform:none; }
  .show-date { gap:7px; }
  .show-date strong { font-size:48px; }
  .show-main h3 { font-size:24px; }
  .show-main span { font-size:11px; }
  .round-link { width:58px; height:58px; font-size:8px; }
  .downloads-section { padding:90px 20px; }
  .contact-section { padding:90px 20px; gap:44px; }
  .contact-form { padding-top:0; }
  .site-footer { grid-template-columns:1fr; text-align:left; }
  .footer-center { text-align:left; }
  .footer-right { justify-content:flex-start; }
}

@media (max-width:480px) {
  .track-list { grid-template-columns:1fr; }
  .members-grid { grid-template-columns:1fr; }
  .member-card { aspect-ratio:.86; }
  .member-card img { object-position:center 18%; }
  .stat-row { gap:8px; }
  .stat-row strong { font-size:30px; }
  .stat-row span { font-size:8px; }
  .player-display { grid-template-columns:56px 1fr; gap:14px; }
  .player-play { width:54px; height:54px; }
  .show-row { grid-template-columns:78px 1fr; padding:18px 0; }
  .show-date strong { font-size:42px; }
  .round-link { grid-column:2; justify-self:start; margin-top:4px; width:auto; height:auto; border-radius:0; border:0; color:var(--pink); background:transparent; }
  .form-row { grid-template-columns:1fr; gap:0; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal,.member-card.reveal { opacity:1; transform:none; }
}

/* =========================================================
   7FM v4 refinements
   ========================================================= */
:root {
  --yellow: #f4c430;
  --yellow-soft: #fff0ad;
  --yellow-deep: #8d6500;
}

/* Navigation: larger, yellow underline only on interaction */
.main-nav {
  font-size: 20px;
  gap: clamp(25px,3.1vw,54px);
}
.main-nav a::after {
  height: 5px;
  transform: scaleX(0);
  opacity: 0;
  transform-origin: left center;
}
.main-nav a:hover::after,
.main-nav a:focus-visible::after {
  height: 5px;
  transform: scaleX(1);
  opacity: 1;
  background: var(--yellow);
}
.main-nav a.active::after {
  transform: scaleX(0);
  opacity: 0;
}

/* Hero: colour accents switch from pink to the warmer yellow */
.hero .eyebrow,
.hero-lead strong {
  color: var(--yellow);
}
.hero .btn-primary {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #241922;
  box-shadow: 0 12px 34px rgba(244,196,48,.26);
}
.hero .btn-primary:hover {
  background: #ffd656;
  border-color: #ffd656;
  color: #241922;
}

/* Let NEXT UP pop a little more without overpowering the hero */
.next-show-card {
  border: 2px solid var(--yellow);
  border-left-width: 8px;
  background: rgba(255,250,246,.94);
  box-shadow: 0 25px 80px rgba(20,7,15,.28), 0 0 0 4px rgba(244,196,48,.10);
  transform: rotate(-.7deg);
}
.next-show-card .kicker {
  color: var(--yellow-deep);
  font-size: 11px;
}
.next-show-card strong {
  color: #241922;
  font-size: 41px;
}
.next-show-card a {
  color: #241922;
  text-decoration: underline;
  text-decoration-color: var(--yellow);
  text-decoration-thickness: 4px;
  text-underline-offset: 4px;
}

/* Slightly tighter vertical rhythm between major sections */
.section {
  padding-block: clamp(78px,9vw,142px);
}
.sound-section {
  padding-top: clamp(78px,9vw,142px);
  padding-bottom: clamp(78px,9vw,142px);
}
.video-feature {
  margin-top: clamp(52px,6vw,88px);
}
.section-heading-row {
  margin-bottom: 44px;
}
.downloads-section {
  padding-top: clamp(68px,8vw,118px);
  padding-bottom: clamp(68px,8vw,118px);
}
.contact-section {
  padding-top: clamp(78px,9vw,142px);
  padding-bottom: clamp(78px,9vw,142px);
}

/* Next Stops: restore warmer yellow accents */
.show-row {
  position: relative;
}
.show-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 5px;
  background: var(--yellow);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform .25s;
}
.show-row:hover::before {
  transform: scaleY(1);
}
.show-date strong {
  color: var(--yellow-deep);
}
.show-main p {
  color: var(--yellow-deep);
}
.round-link {
  border-color: rgba(244,196,48,.95);
  box-shadow: inset 0 0 0 3px rgba(244,196,48,.10);
}
.round-link:hover {
  background: var(--yellow);
  color: #241922;
  border-color: var(--yellow);
}
.past-show summary::marker {
  color: var(--yellow-deep);
}

/* Contact form: larger, friendlier typography */
.contact-form label {
  font-size: 13px;
  letter-spacing: .11em;
}
.contact-form input,
.contact-form textarea {
  font-size: 17px;
  line-height: 1.45;
  padding: 17px 18px;
}
.contact-form input {
  height: 60px;
}
.contact-form textarea {
  min-height: 170px;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #93858d;
  opacity: 1;
}
.contact-form .btn {
  font-size: 13px;
  min-height: 58px;
}
.form-note {
  font-size: 12px;
  line-height: 1.55;
}
.form-status {
  min-height: 24px;
  margin: 12px 0 0;
  font-size: 14px;
  line-height: 1.45;
  font-weight: 750;
}
.form-status.success { color: #315f37; }
.form-status.error { color: #a4224a; }
.hp-field {
  position: absolute !important;
  left: -10000px !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}

@media (max-width: 1050px) {
  .main-nav { font-size: 18px; }
}

@media (max-width: 780px) {
  .section { padding-block: 72px; }
  .sound-section,
  .downloads-section,
  .contact-section { padding-top: 72px; padding-bottom: 72px; }
  .main-nav a::after,
  .main-nav a.active::after { display: none; }
  .next-show-card { transform: none; }
  .contact-form label { font-size: 12px; }
  .contact-form input,
  .contact-form textarea { font-size: 16px; }
}

/* =========================================================
   7FM v5 refinements
   User feedback: punchier yellow + more motion
   ========================================================= */
:root {
  --yellow: #ffd21f;
  --yellow-soft: #fff2a1;
  --yellow-deep: #a87500;
}

/* A touch more punch, without returning to neon-yellow */
.hero .btn-primary {
  box-shadow: 0 12px 34px rgba(255,210,31,.30);
}
.hero .btn-primary:hover {
  background: #ffdc49;
  border-color: #ffdc49;
}

/* NEXT STOPS: stronger yellow date treatment and buttons */
.show-date strong,
.show-date span {
  color: var(--yellow);
}
.show-date span {
  font-size: 13px;
  line-height: 1.15;
  letter-spacing: .11em;
}
.show-main p {
  color: var(--yellow-deep);
}
.round-link {
  background: var(--yellow);
  border-color: var(--yellow);
  color: #241922;
  box-shadow: 0 8px 22px rgba(255,210,31,.22);
}
.round-link:hover {
  background: var(--pink);
  color: #fff;
  border-color: var(--pink);
  transform: rotate(-7deg) scale(1.07);
}
.show-row::before {
  background: var(--yellow);
}

/* More motion: same slightly tilted, energetic language as the band portraits */
.section-title.reveal {
  opacity: 0;
  transform: translateY(42px) rotate(-1.1deg) scale(.97);
  transform-origin: left bottom;
  transition: opacity .78s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.16,.8,.2,1);
}
.section-title.reveal.in-view {
  opacity: 1;
  transform: translateY(0) rotate(0deg) scale(1);
}

.band-copy.reveal {
  opacity: 0;
  transform: translateX(34px) rotate(.8deg) scale(.985);
  transition: opacity .8s cubic-bezier(.2,.7,.2,1), transform .88s cubic-bezier(.16,.8,.2,1);
}
.band-copy.reveal.in-view {
  opacity: 1;
  transform: translateX(0) rotate(0) scale(1);
}

.sound-panel.reveal {
  opacity: 0;
  transform: translateY(34px) translateX(20px) rotate(1.2deg) scale(.975);
  transform-origin: right bottom;
  transition: opacity .78s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.16,.8,.2,1), box-shadow .3s;
}
.sound-panel.reveal.in-view {
  opacity: 1;
  transform: translate(0,0) rotate(0) scale(1);
}
.sound-panel.reveal.in-view:hover {
  transform: translateY(-5px) rotate(-.25deg);
  box-shadow: 0 30px 90px rgba(86,38,66,.13);
}

.video-feature.reveal {
  opacity: 0;
  transform: translateY(46px) rotate(-.7deg) scale(.98);
  transform-origin: center;
  transition: opacity .82s cubic-bezier(.2,.7,.2,1), transform .92s cubic-bezier(.16,.8,.2,1);
}
.video-feature.reveal.in-view {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.video-frame {
  transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
}
.video-frame:hover {
  transform: translateY(-7px) rotate(.35deg);
  box-shadow: 18px 18px 0 var(--yellow);
}

.show-row.reveal {
  opacity: 0;
  transform: translateX(-42px) rotate(-.7deg) scale(.99);
  transform-origin: left center;
  transition: opacity .72s cubic-bezier(.2,.7,.2,1), transform .82s cubic-bezier(.16,.8,.2,1), background .25s, padding .25s;
}
.show-row.reveal:nth-child(even) {
  transform: translateX(42px) rotate(.7deg) scale(.99);
  transform-origin: right center;
  transition-delay: .10s;
}
.show-row.reveal.in-view {
  opacity: 1;
  transform: translateX(0) rotate(0) scale(1);
}
.show-row.reveal.in-view:hover {
  transform: translateX(4px) rotate(-.18deg) scale(1.004);
}

.download-card.reveal {
  opacity: 0;
  transform: translateY(30px) rotate(-.9deg) scale(.985);
  transition: opacity .72s cubic-bezier(.2,.7,.2,1), transform .82s cubic-bezier(.16,.8,.2,1), background .25s, border-color .25s;
}
.download-card.reveal:nth-child(even) {
  transform: translateY(30px) rotate(.9deg) scale(.985);
  transition-delay: .10s;
}
.download-card.reveal.in-view {
  opacity: 1;
  transform: translateY(0) rotate(0) scale(1);
}
.download-card.reveal.in-view:hover {
  transform: translateX(7px) rotate(-.25deg) scale(1.006);
}

.contact-form.reveal {
  opacity: 0;
  transform: translateX(34px) rotate(.65deg) scale(.985);
  transform-origin: right center;
  transition: opacity .78s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.16,.8,.2,1);
}
.contact-form.reveal.in-view {
  opacity: 1;
  transform: translateX(0) rotate(0) scale(1);
}

/* Subtle continuous movement where it supports the live feel */
.next-show-card.reveal.in-view {
  animation: nextUpFloat 5s ease-in-out 1s infinite;
}
@keyframes nextUpFloat {
  0%,100% { transform: rotate(-.7deg) translateY(0); }
  50% { transform: rotate(-.25deg) translateY(-7px); }
}

.orb-a { animation: orbDriftA 12s ease-in-out infinite alternate; }
.orb-b { animation: orbDriftB 14s ease-in-out infinite alternate; }
@keyframes orbDriftA { to { transform: translate(-34px,28px) scale(1.08); } }
@keyframes orbDriftB { to { transform: translate(42px,-24px) scale(.94); } }

.live-image.reveal.in-view img {
  animation: liveBreath 10s ease-in-out .5s infinite alternate;
  transform-origin: center;
}
@keyframes liveBreath {
  from { transform: scale(1); }
  to { transform: scale(1.035); }
}

@media (max-width:780px) {
  .show-date span { font-size: 11px; }
  .show-row.reveal,
  .show-row.reveal:nth-child(even),
  .show-row.reveal.in-view,
  .show-row.reveal.in-view:hover {
    transform: none;
  }
  .video-frame:hover,
  .sound-panel.reveal.in-view:hover,
  .download-card.reveal.in-view:hover {
    transform: none;
  }
}

@media (prefers-reduced-motion:reduce) {
  .section-title.reveal,
  .band-copy.reveal,
  .sound-panel.reveal,
  .video-feature.reveal,
  .show-row.reveal,
  .show-row.reveal:nth-child(even),
  .download-card.reveal,
  .download-card.reveal:nth-child(even),
  .contact-form.reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .next-show-card.reveal.in-view,
  .orb-a,
  .orb-b,
  .live-image.reveal.in-view img {
    animation: none !important;
  }
}


/* =========================================================
   7FM v6 refinements
   Mobile hero balance + Samsung outline rendering fix
   ========================================================= */

/*
   On phones the hero crop puts the singer slightly farther to the right,
   giving the title its own visual space instead of covering her face.
   Desktop/tablet layout stays exactly as in v5.
*/
@media (max-width: 600px) {
  .hero {
    padding-top: 106px;
    padding-bottom: 148px;
  }

  .hero-media img {
    object-position: 47% center;
  }

  .hero-content {
    width: 100%;
  }

  .hero-title {
    width: min(78vw, 320px);
    font-size: clamp(54px, 16.5vw, 74px);
    line-height: .78;
    letter-spacing: -.07em;
  }

  .hero-title .accent {
    transform: translateX(8px);
    -webkit-text-stroke-width: 1.7px;
  }

  .hero-lead {
    max-width: 88%;
    margin-top: 28px;
  }

  /*
     Samsung Internet can leave ghosted text-stroke fragments when an
     outlined heading is composited while its parent is transformed.
     The band heading therefore keeps the exact look but does not use the
     rotate/scale reveal on small screens. Filling the letters with the
     section background instead of transparency makes the outline stable.
  */
  .band-section .section-title.reveal,
  .band-section .section-title.reveal.in-view {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .band-section .section-title .stroke {
    color: var(--bg);
    -webkit-text-fill-color: var(--bg);
    -webkit-text-stroke: 1.8px #352630;
    paint-order: stroke fill;
    text-shadow: none;
    transform: none;
    backface-visibility: visible;
    -webkit-backface-visibility: visible;
  }
}

@media (max-width: 390px) {
  .hero-title {
    width: min(80vw, 290px);
    font-size: clamp(52px, 16.2vw, 65px);
  }
}


/* =========================================================
   7FM v7 refinements
   Robust SVG outline lettering + smaller mobile hero + footer sizing
   ========================================================= */

/*
   Outline lettering is now made from real SVG vector paths rather than
   -webkit-text-stroke. This avoids the broken/ghosted contours seen in
   Samsung Internet while preserving the same transparent visual language.
*/
.outline-svg {
  display: block;
  overflow: visible;
  color: #352630;
  fill: none;
}
.outline-svg path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8px;
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
  stroke-linecap: round;
}

.hero-title .outline-hero {
  color: #fff;
  height: .75em;
  width: auto;
  max-width: 100%;
  margin-left: clamp(18px,5vw,78px);
}
.hero-title .outline-hero path {
  stroke-width: 2px;
}

.section-title .outline-section {
  height: .75em;
  width: auto;
  max-width: 100%;
  color: #352630;
  margin-top: .015em;
}
.outline-wordline {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .02em .13em;
  width: 100%;
  margin-top: .015em;
}
.outline-wordline .outline-section {
  margin-top: 0;
  flex: 0 0 auto;
}

/* The old CSS text-stroke helpers are no longer used for visible lettering. */
.hero-title .accent,
.stroke {
  -webkit-text-stroke: 0;
}

/* Footer text groups now match the 12px "Seven Fancy Minds" header label. */
.site-footer {
  font-size: 12px;
  letter-spacing: .17em;
}
.footer-brand small {
  font-size: 12px;
  letter-spacing: .17em;
}

/*
   Give the singer more room on phones: same typography and composition,
   but the three-line title is materially smaller than in v6.
*/
@media (max-width: 600px) {
  .hero-title {
    width: min(68vw, 280px);
    font-size: clamp(46px, 13.8vw, 60px);
    line-height: .78;
  }

  .hero-title .outline-hero {
    height: .75em;
    margin-left: 6px;
  }

  .hero-title .outline-hero path {
    stroke-width: 1.7px;
  }

  /* Undo the v6 band-only text-stroke workaround; SVG paths are stable. */
  .band-section .section-title.reveal {
    opacity: 0;
    transform: translateY(42px) rotate(-1.1deg) scale(.97);
    transform-origin: left bottom;
    transition: opacity .78s cubic-bezier(.2,.7,.2,1), transform .9s cubic-bezier(.16,.8,.2,1);
    will-change: auto;
  }
  .band-section .section-title.reveal.in-view {
    opacity: 1;
    transform: translateY(0) rotate(0deg) scale(1);
  }
}

@media (max-width: 390px) {
  .hero-title {
    width: min(70vw, 255px);
    font-size: clamp(44px, 13.4vw, 54px);
  }
}

@media (max-width: 780px) {
  .site-footer,
  .footer-brand small {
    font-size: 12px;
  }
}

/* =========================================================
   7FM v8 refinements
   Tighter section rhythm + robust collapsed navigation
   ========================================================= */

/* Keep the hero focused on one action. */
.hero-actions {
  margin-top: 28px;
}

/* Pull the major sections closer together without making them cramped. */
.section {
  padding-block: clamp(62px, 7.2vw, 112px);
}
.sound-section {
  padding-top: clamp(62px, 7.2vw, 112px);
  padding-bottom: clamp(62px, 7.2vw, 112px);
}
.downloads-section {
  padding-top: clamp(58px, 6.6vw, 98px);
  padding-bottom: clamp(58px, 6.6vw, 98px);
}
.contact-section {
  padding-top: clamp(62px, 7.2vw, 112px);
  padding-bottom: clamp(62px, 7.2vw, 112px);
}
.section-heading-row {
  margin-bottom: 36px;
}
.video-feature {
  margin-top: clamp(44px, 5vw, 70px);
}

@media (max-width: 780px) {
  /* The NEXT UP teaser belongs to the wide hero only. */
  .next-show-card {
    display: none !important;
  }

  /* No empty mobile space is reserved for the hidden NEXT UP card. */
  .hero {
    padding-bottom: 72px;
  }

  /*
     Collapsed navigation is a self-contained full-viewport layer.
     Its layout depends neither on scroll position nor on the section behind it.
  */
  .main-nav {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100dvh;
    min-height: 100svh;
    z-index: 101;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(4px, 1.2vh, 12px);
    padding: max(82px, env(safe-area-inset-top)) 28px max(30px, env(safe-area-inset-bottom));
    background: rgba(255, 250, 246, .965);
    color: var(--ink);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    overflow: hidden;
    transform: translateX(100%);
    transition: transform .35s cubic-bezier(.2,.7,.2,1);
  }
  .main-nav.open {
    transform: translateX(0);
  }

  /* All five entries remain in the viewport, even on short landscape screens. */
  .main-nav a,
  .site-header.scrolled .main-nav a {
    flex: 0 0 auto;
    width: 100%;
    padding: clamp(7px, 1.45vh, 14px) 0;
    border-bottom: 0;
    color: var(--ink);
    font-size: clamp(29px, 7.2vh, 58px);
    font-weight: 1000;
    line-height: .92;
    letter-spacing: -.045em;
    text-transform: uppercase;
  }

  /* Restore the warm-yellow hover/focus underline inside the collapsed menu. */
  .main-nav a::after,
  .main-nav a.active::after {
    display: block;
    left: 0;
    bottom: 2px;
    width: clamp(54px, 15vw, 88px);
    height: 5px;
    opacity: 0;
    background: var(--yellow);
    transform: scaleX(0);
    transform-origin: left center;
  }
  .main-nav a:hover::after,
  .main-nav a:focus-visible::after {
    display: block;
    height: 5px;
    opacity: 1;
    background: var(--yellow);
    transform: scaleX(1);
  }

  /* Keep logo and close control readable above the light menu layer. */
  .brand,
  .menu-toggle {
    position: relative;
    z-index: 102;
  }
  body.menu-open .site-header {
    color: var(--ink);
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  body.menu-open .brand-sub {
    color: #766b70;
  }

  .section {
    padding-block: 56px;
  }
  .sound-section,
  .downloads-section,
  .contact-section {
    padding-top: 56px;
    padding-bottom: 56px;
  }
  .section-heading-row {
    margin-bottom: 28px;
  }
  .video-feature {
    margin-top: 46px;
  }
}

/* Short landscape phones: prioritise fitting every navigation entry at once. */
@media (max-width: 780px) and (max-height: 560px) {
  .main-nav {
    justify-content: center;
    gap: 2px;
    padding-top: 64px;
    padding-bottom: 18px;
  }
  .main-nav a,
  .site-header.scrolled .main-nav a {
    padding: 5px 0;
    font-size: clamp(26px, 6.8vh, 38px);
    line-height: .9;
  }
}



/* =========================================================
   7FM v9 refinements
   More translucent collapsed navigation + reordered final sections
   + "Stillstehen ist optional" groove animation
   ========================================================= */

@media (max-width: 780px) {
  /* Make the collapsed menu much more transparent while preserving readability. */
  .main-nav {
    background: rgba(255, 250, 246, .58);
    backdrop-filter: blur(16px) saturate(1.08);
    -webkit-backdrop-filter: blur(16px) saturate(1.08);
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.16);
  }
}

/* The live image literally refuses to stand still: calm phases interrupted by short groove pulses. */
.live-image.reveal.in-view img {
  animation: liveGrooveV9 8.4s cubic-bezier(.45,.05,.2,1) .6s infinite;
  transform-origin: 50% 52%;
  will-change: transform;
}

@keyframes liveGrooveV9 {
  0%, 8%   { transform: scale(1.025) translate3d(0,0,0) rotate(0deg); }
  12%      { transform: scale(1.045) translate3d(-.7%,-.25%,0) rotate(-.32deg); }
  16%      { transform: scale(1.052) translate3d(.6%,-.55%,0) rotate(.38deg); }
  20%      { transform: scale(1.044) translate3d(-.35%,.20%,0) rotate(-.20deg); }
  25%, 48% { transform: scale(1.032) translate3d(0,0,0) rotate(0deg); }
  53%      { transform: scale(1.045) translate3d(.45%,-.30%,0) rotate(.24deg); }
  57%      { transform: scale(1.050) translate3d(-.5%,-.55%,0) rotate(-.30deg); }
  61%      { transform: scale(1.042) translate3d(.25%,.15%,0) rotate(.16deg); }
  67%,100% { transform: scale(1.025) translate3d(0,0,0) rotate(0deg); }
}

/* Hover: the groove gets a little more impatient, like the band just hit the chorus. */
@media (hover:hover) and (pointer:fine) {
  .live-image.reveal.in-view:hover img {
    animation-duration: 4.8s;
  }
}

/* Smaller screens get the same gag with gentler travel to avoid edge exposure. */
@media (max-width: 780px) {
  .live-image.reveal.in-view img {
    animation-name: liveGrooveMobileV9;
  }
  @keyframes liveGrooveMobileV9 {
    0%, 9%   { transform: scale(1.035) translate3d(0,0,0) rotate(0deg); }
    14%      { transform: scale(1.050) translate3d(-.35%,-.18%,0) rotate(-.18deg); }
    18%      { transform: scale(1.054) translate3d(.32%,-.30%,0) rotate(.20deg); }
    23%, 50% { transform: scale(1.040) translate3d(0,0,0) rotate(0deg); }
    56%      { transform: scale(1.050) translate3d(.28%,-.20%,0) rotate(.14deg); }
    61%      { transform: scale(1.054) translate3d(-.30%,-.28%,0) rotate(-.17deg); }
    68%,100% { transform: scale(1.035) translate3d(0,0,0) rotate(0deg); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .live-image.reveal.in-view img {
    animation: none !important;
    transform: none !important;
  }
}


/* =========================================================
   7FM v11 refinements
   New band story layout based on the approved reference
   ========================================================= */
.band-copy {
  padding-top: 8px;
}
.band-copy .lead {
  max-width: 720px;
  margin: 0 0 clamp(34px, 3.4vw, 52px);
  color: var(--ink);
  font-size: clamp(27px, 2.25vw, 35px);
  font-weight: 430;
  line-height: 1.27;
  letter-spacing: -.035em;
}
.band-copy .lead .lead-brand {
  color: var(--pink);
  font-weight: inherit;
}
.band-copy > p:not(.lead) {
  max-width: 720px;
  margin: 0 0 clamp(24px, 2.2vw, 34px);
  color: #766b70;
  font-size: clamp(16px, 1.28vw, 20px);
  line-height: 1.68;
  letter-spacing: -.008em;
}
.band-copy > p:last-child {
  margin-bottom: 0;
}

@media (max-width: 780px) {
  .band-copy .lead {
    margin-bottom: 34px;
    font-size: clamp(25px, 6.4vw, 32px);
    line-height: 1.3;
  }
  .band-copy > p:not(.lead) {
    margin-bottom: 27px;
    font-size: clamp(16px, 4.3vw, 19px);
    line-height: 1.7;
  }
}


/* =========================================================
   7FM v12 refinements
   Regular-weight band name + direct bandinfo download link
   ========================================================= */
.bandinfo-download {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 8px 0 9px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.bandinfo-download::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--yellow);
  transform: scaleX(.38);
  transform-origin: left center;
  transition: transform .24s ease, background .24s ease;
}
.bandinfo-download:hover::after,
.bandinfo-download:focus-visible::after {
  transform: scaleX(1);
  background: var(--pink);
}
.bandinfo-download span {
  font-size: 18px;
  line-height: 1;
  transition: transform .2s ease;
}
.bandinfo-download:hover span,
.bandinfo-download:focus-visible span {
  transform: translateY(3px);
}
@media (max-width: 780px) {
  .bandinfo-download {
    margin-top: 4px;
    font-size: 12px;
  }
}


/* =========================================================
   7FM v13 refinements
   Restore v10-style band-name weight + rebalance Sound section
   ========================================================= */

/* In v10 the pink band name had a clear medium/semibold emphasis:
   stronger than the sentence, but not the heavy display weight. */
.band-copy .lead .lead-brand {
  font-weight: 700;
}

/* Give the Sound section a more immediate entry:
   headline higher and slightly smaller, player column slightly wider. */
.sound-grid {
  grid-template-columns: minmax(0, .84fr) minmax(0, 1.16fr);
  gap: clamp(40px, 6.5vw, 96px);
  align-items: start;
}

.sound-section {
  padding-top: clamp(48px, 5.4vw, 82px);
}

.sound-section .section-title {
  font-size: clamp(52px, 7.1vw, 112px);
}

.sound-panel {
  padding-left: clamp(24px, 3vw, 40px);
  padding-right: clamp(24px, 3vw, 40px);
}

@media (max-width: 780px) {
  .sound-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .sound-section {
    padding-top: 48px;
  }

  .sound-section .section-title {
    font-size: clamp(50px, 15vw, 82px);
  }
}

/* =========================================================
   7FM v14 refinement
   Keep Sound title exactly as V13; make player column narrower
   to create more breathing room between title and player.
   ========================================================= */
.sound-grid {
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: clamp(54px, 8vw, 118px);
}

@media (max-width: 780px) {
  .sound-grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }
}


/* =========================================================
   7FM v15 refinement
   Keep the existing live-image effects while framing the new portrait photo.
   ========================================================= */
.live-image img.live-still-photo {
  object-position: 50% 8%;
}
@media (max-width: 780px) {
  .live-image img.live-still-photo {
    object-position: 50% 10%;
  }
}


/* =========================================================
   7FM Booking-Integration
   ========================================================= */
.contact-section { scroll-margin-top:82px; }
.contact-anchor-alias { position:absolute; top:-82px; left:0; width:1px; height:1px; pointer-events:none; }
.booking-context { margin:0 0 22px; padding:20px 22px; border:1px solid rgba(36,25,34,.16); border-left:7px solid var(--yellow); background:rgba(255,255,255,.78); box-shadow:0 16px 42px rgba(72,35,57,.08); }
.booking-context-kicker { display:block; margin-bottom:7px; color:var(--pink); font-size:11px; font-weight:950; letter-spacing:.16em; text-transform:uppercase; }
.booking-context strong { display:block; color:var(--ink); font-size:clamp(22px,2.2vw,32px); line-height:1.08; letter-spacing:-.035em; }
.booking-context > span:last-of-type { display:block; margin-top:6px; color:#6f6369; font-size:14px; font-weight:750; }
.booking-context p { margin:14px 0 0; color:#756a70; font-size:13px; line-height:1.55; }
.booking-fields[hidden], .booking-context[hidden] { display:none !important; }
.contact-form.booking-mode .booking-fields { display:grid; }
.contact-form.booking-mode .btn-primary { background:var(--yellow); border-color:var(--yellow); color:#241922; box-shadow:0 10px 30px rgba(255,210,31,.22); }
.contact-form.booking-mode .btn-primary:hover { background:var(--pink); border-color:var(--pink); color:#fff; }
@media (max-width:780px) { .contact-section { scroll-margin-top:68px; } .contact-anchor-alias { top:-68px; } .booking-context { padding:18px; } }