/* ZEISMAN / PHASE — standalone stylesheet, no external requests */
:root{color-scheme:dark;--bg:#0b171a;--panel:#142c33;--ink:#eff5f4;--muted:#a7bfc2;--accent:#65bec3;--line:#2b4850;--space:clamp(22px,5.5vw,88px);--max:1480px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.65 Arial,Helvetica,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}img{display:block;max-width:100%}button,a{-webkit-tap-highlight-color:transparent}button:disabled{opacity:.5;cursor:default}[hidden]{display:none!important}::selection{background:var(--accent);color:var(--bg)}:focus-visible{outline:3px solid var(--accent);outline-offset:5px}button:focus-visible{outline-offset:4px}.shell{max-width:var(--max);margin-inline:auto;padding-inline:var(--space)}.skip-link{position:fixed;top:-100px;left:20px;padding:12px 20px;background:var(--accent);color:var(--bg);z-index:100}.skip-link:focus{top:15px}
.site-header{height:86px;display:flex;align-items:center;justify-content:space-between;padding:18px var(--space);border-bottom:1px solid #8fbcc524;background:#0b171af5;position:sticky;top:0;z-index:30}.header-brand{width:205px;display:block}.header-brand img{width:100%;height:auto}.site-header nav,.site-footer nav{display:flex;gap:34px;align-items:center}.site-header nav{font-size:13px}.site-header a:not(.header-brand):hover{color:var(--accent)}.nav-booking{display:flex;gap:32px;align-items:center;border:1px solid #647e8380;border-radius:3px 18px 3px 18px;padding:8px 17px}
.eyebrow{font-size:10px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;margin:0 0 20px;line-height:1.5}.signal{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--accent);margin-right:9px;box-shadow:0 0 13px #65bec350}.hero{position:relative;isolation:isolate;overflow:hidden;background:#0c1d22}.phase-scene{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden;background:linear-gradient(120deg,#10282e 4%,#0d242b 46%,#21363a90 100%)}.phase-scene::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#0b171a 0%,transparent 55%),linear-gradient(90deg,#0c1d2280,transparent 75%)}.phase-glow{position:absolute;border-radius:50%;filter:blur(45px);opacity:.25;will-change:transform;animation-play-state:paused!important}.glow-a{width:600px;height:280px;right:-130px;top:40px;background:radial-gradient(ellipse,#72bccb,transparent 68%);animation:phase-glow-a 18s ease-in-out infinite}.glow-b{width:480px;height:380px;left:20%;top:220px;background:radial-gradient(ellipse,#66848a,transparent 68%);opacity:.12;animation:phase-glow-b 22s ease-in-out infinite}.phase-orbit{position:absolute;width:1100px;height:360px;right:-370px;top:70px;border-radius:50%;transform:rotate(-32deg);border:1px solid #91cad625;box-shadow:0 1px 0 #65bec315,inset 0 1px 0 #65bec315;animation-play-state:paused!important}.orbit-a{animation:phase-orbit 20s ease-in-out infinite}.orbit-b{right:-420px;top:160px;width:1250px;height:375px;border-color:#86c5d219;animation:phase-orbit 24s ease-in-out infinite reverse}.phase-watermark{position:absolute;width:630px;height:auto;right:-230px;top:265px;opacity:.035;transform:rotate(-18deg)}.motion-running .phase-glow,.motion-running .phase-orbit{animation-play-state:running!important}.hero-meta{display:flex;justify-content:space-between;gap:22px;color:#b2bfc2;padding-top:29px}.hero-heading{padding-top:clamp(65px,7vw,105px)}.hero-intro{color:#b3c2c5;margin-bottom:28px}.hero h1{margin:0;width:100%;max-width:none}.hero h1 img{width:100%;height:auto;filter:drop-shadow(0 10px 35px #0b171a33)}.hero-bottom-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:80px;align-items:end;margin-top:46px}.hero-statement{font-size:clamp(26px,3vw,43px);line-height:1.12;letter-spacing:-.045em;margin:0 0 22px}.hero-statement span{color:#acbdc1}.hero-description{font-size:14px;color:var(--muted);line-height:1.8;margin:0 0 26px}.actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 28px}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:35px;min-height:52px;padding:14px 22px;border:1px solid transparent;border-radius:3px 22px 3px 22px;font-size:13px;font-weight:600;transition:transform .2s,background .2s,box-shadow .2s}.primary{background:var(--accent);color:#0c1c1f}.primary:hover{background:#91d5d7;transform:translate(2px,-2px);box-shadow:-4px 4px 0 #65bec322}.text-link{font-size:13px;text-decoration:underline;text-underline-offset:7px;text-decoration-color:#a2b9be59;transition:color .2s}.text-link:hover{color:var(--accent)}.hero-listen{display:block;max-width:330px;width:100%;justify-self:end;border-top:1px solid #95bbc360;border-bottom:1px solid #95bbc330;padding:25px 0 18px;position:relative}.hero-listen .eyebrow{display:block;color:#b9cdd1;margin-bottom:19px}.hero-listen-title{font-size:clamp(27px,3vw,41px);line-height:1.06;letter-spacing:-.035em}.listen-end{display:flex;justify-content:space-between;align-items:center;margin-top:24px;font-size:11px;color:#abbabd}.round-arrow{font-size:22px;width:46px;height:46px;border:1px solid #7e9ea46b;display:grid;place-items:center;border-radius:50%;color:var(--accent);transition:transform .25s,background .25s}.hero-listen:hover .round-arrow{transform:translate(3px,-3px);background:#65bec315}.hero-foot{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-top:60px;padding:22px 0;border-top:1px solid #7a9fa732;color:#95aaae}.hero-foot .eyebrow{margin:0;font-size:9px}.motion-toggle{border:0;background:none;color:#b0c2c6;font-size:11px;min-height:34px;padding:5px 0}.scroll-link{font-size:11px}.section{padding-block:clamp(70px,8vw,115px)}.section-index{color:var(--accent);margin-bottom:25px}.section-heading{display:flex;justify-content:space-between;align-items:end;gap:25px;margin-bottom:36px}.section-heading h2{font-size:clamp(34px,4.5vw,65px);letter-spacing:-.055em;line-height:1.03;font-weight:500;margin:0}.section-heading h2 span{color:#a0abad}.section-heading>.text-link{margin-bottom:8px}.mix-toolbar{min-height:34px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:21px;font-size:12px;color:var(--muted)}.mix-toolbar p{margin:0}.featured{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);border:1px solid #5a717655;border-radius:4px 42px 4px 42px;overflow:hidden;background:radial-gradient(ellipse at 100% 0%,#25383c2e,transparent 65%),#191f20;margin-bottom:50px}.featured-image-wrap{position:relative;background:#23474e;min-width:0}.image-label{position:absolute;bottom:20px;left:20px;font-size:9px;letter-spacing:.12em;text-transform:uppercase;background:#0b171adb;border:1px solid #aabdc14a;padding:6px 10px;color:#eff5f4;pointer-events:none;z-index:3}.cover{position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1;background:linear-gradient(135deg,#36616a,#1a2223 70%)}.cover::before{content:"";position:absolute;inset:24%;background:url('phase-mark.svg') center/contain no-repeat;opacity:.2}.cover img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;transition:transform .5s}.featured-cover{height:100%;min-height:380px;aspect-ratio:1}.featured-copy{padding:clamp(28px,4vw,64px);display:flex;flex-direction:column;justify-content:center;min-width:0}.featured-copy .eyebrow{color:#b7d0d5;margin-bottom:32px}.featured-copy h3{font-size:clamp(29px,3.7vw,53px);font-weight:500;letter-spacing:-.04em;line-height:1.08;margin:13px 0 18px;overflow-wrap:anywhere}.featured-copy .muted{font-size:12px;margin:0;color:var(--muted)}.artist-credit{font-size:13px;color:var(--muted);margin:0}.featured-copy .actions{margin-top:35px}.mix-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 24px}.mix-card{min-width:0;padding-bottom:20px;border-bottom:1px solid #394a4d4d;transition:border-color .25s}.mix-card:hover{border-color:#65bec380}.card-play{position:relative;display:block;width:100%;margin:0;padding:0;border:0;background:none;color:var(--ink);text-align:left}.card-play .cover{border-radius:3px 23px 3px 23px}.mix-card:hover .cover img{transform:scale(1.035)}.play-badge{position:absolute;z-index:2;right:12px;bottom:12px;width:39px;height:39px;display:grid;place-items:center;background:var(--accent);color:#0b171a;border-radius:50%;font-size:15px;transition:transform .25s}.card-play:hover .play-badge{transform:translate(2px,-2px)}.mix-number{display:block;color:#92b3ba;font:10px/1.4 monospace;letter-spacing:.14em;margin-top:16px}.mix-card h3{font-size:17px;font-weight:500;line-height:1.4;letter-spacing:-.02em;margin:9px 0;overflow-wrap:anywhere}.card-meta{font-size:11px;color:var(--muted);margin:0}.card-source{font-size:10px;color:#95a6aa;margin:12px 0 0}.card-source a{text-decoration:underline;text-underline-offset:4px}.player-panel{scroll-margin-top:110px;margin-top:38px;padding:clamp(24px,4vw,44px);border:1px solid #74b7c4;border-radius:3px 25px 3px 25px;background:#1b2325}.player-heading{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}.player-heading h3{margin:0;font-weight:500;font-size:24px;line-height:1.25;overflow-wrap:anywhere}.player-heading .eyebrow{margin-bottom:12px;color:var(--accent)}#consent{max-width:820px}#consent p{font-size:14px;color:#bbc9cc}#consent .actions{margin-top:24px}#consent a{font-size:12px;text-decoration:underline}.small-button{padding:9px 14px;min-height:38px;border:1px solid #6d8084;color:var(--ink);background:transparent;border-radius:2px 12px 2px 12px;font-size:12px}.small-button:hover{border-color:var(--accent)}#player-frame{width:100%;margin:26px 0;padding:18px 0;border-block:1px solid var(--line)}#player-frame:empty{display:none}#player-frame iframe{display:block;width:100%;height:20px;aspect-ratio:auto;border:0;background:transparent;color-scheme:normal}.player-controls{display:flex;flex-wrap:wrap;align-items:center;gap:20px;margin-top:20px}.about-section{position:relative;overflow:hidden;background:#e2eeee;color:#14343b;padding-block:clamp(65px,8vw,115px)}.about-section::after{content:"";position:absolute;width:800px;height:300px;border:1px solid #6b828624;border-radius:50%;bottom:-200px;left:-200px;transform:rotate(-28deg);pointer-events:none}.about-grid{display:grid;grid-template-columns:1fr 1.25fr;gap:90px;align-items:center}.about-identity{border-right:1px solid #14343b26;padding-right:70px}.about-identity .eyebrow{color:#3a4e52}.about-mark{width:230px;height:auto;margin-block:46px}.identity-caption{display:block;margin:0;font-size:9px!important;letter-spacing:.12em}.about-copy h2{margin:0 0 26px;font-size:clamp(33px,4.5vw,62px);line-height:1.04;letter-spacing:-.05em;font-weight:500}.about-copy p{font-size:17px;line-height:1.8;max-width:510px;color:#485659;margin-bottom:30px}.about-copy .text-link{text-decoration-color:#3a4e5260}.about-copy a:hover{color:#21515b}.about-section :focus-visible{outline-color:#21515b}.contact-top{display:flex;justify-content:space-between;gap:25px}.contact-top>.eyebrow:last-child{color:var(--muted);font-size:9px}.contact-section h2{font-size:clamp(48px,7.7vw,112px);line-height:1.01;font-weight:400;letter-spacing:-.065em;margin:23px 0 0}.contact-section h2 em{font-style:normal;color:var(--accent);position:relative;display:inline-block}.contact-section h2 em::after{content:"";position:absolute;left:1%;right:-3%;height:3px;bottom:-6px;background:var(--accent);transform:skewX(-35deg)}.contact-bottom{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-top:40px}.contact-bottom p{color:var(--muted);font-size:14px;line-height:1.9;margin:0}.site-footer{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:25px;padding-block:31px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}.footer-logo{width:170px}.footer-logo img{width:100%;height:auto}.site-footer nav{flex-wrap:wrap;gap:22px}.footer-button{padding:0;border:0;color:inherit;background:none;font-size:inherit;text-decoration:underline}.legal{max-width:940px;min-height:65vh;padding-block:65px}.legal h1{font-size:clamp(36px,6vw,72px);line-height:1.1;letter-spacing:-.05em;font-weight:500;margin:0 0 35px}.legal-text{white-space:pre-wrap;overflow-wrap:anywhere;color:#bbc8cb}.notice{padding:18px;border:1px solid var(--accent);color:var(--accent);margin-bottom:30px}.brand{display:flex;align-items:center;gap:12px}.preview-note{padding:10px 22px;text-align:center;background:#65bec3;color:#0b171a;font-size:12px}
@keyframes phase-glow-a{0%,100%{transform:translate(0,0) scale(1)}50%{transform:translate(-90px,50px) scale(1.15)}}@keyframes phase-glow-b{0%,100%{transform:translate(0,0)}50%{transform:translate(110px,-20px)}}@keyframes phase-orbit{0%,100%{transform:translate(0,0) rotate(-32deg)}50%{transform:translate(-40px,25px) rotate(-27deg)}}
@media(min-width:1600px){.hero-heading{padding-top:115px}.hero-bottom-grid{margin-top:55px}.hero-foot{margin-top:75px}}
@media(max-width:1100px){.mix-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-bottom-grid{gap:50px}.about-grid{gap:50px}.about-identity{padding-right:35px}.hero-listen{max-width:270px}.featured-copy{padding:35px}.featured-copy .actions{gap:20px}.featured-cover{min-height:360px}}
@media(max-width:760px){html{scroll-padding-top:85px}.site-header{height:72px}.header-brand{width:150px}.site-header nav{gap:20px;font-size:12px}.nav-booking{padding:7px 10px;gap:14px}.hero-meta{font-size:8px;letter-spacing:.1em;padding-top:24px}.hero-meta>span:last-child{display:none}.hero-heading{padding-top:66px}.hero-intro{font-size:8px;margin-bottom:24px;letter-spacing:.12em}.hero-bottom-grid{grid-template-columns:1fr;gap:36px;margin-top:35px}.hero-statement{font-size:34px;line-height:1.13}.hero-description{font-size:13px}.hero-listen{display:none}.hero-foot{margin-top:45px;padding:16px 0;gap:14px}.hero-foot>.eyebrow{display:block}.hero-foot .motion-toggle{font-size:10px}.phase-orbit{right:-650px;top:20px}.orbit-b{right:-750px;top:100px}.phase-watermark{width:460px;right:-220px;top:175px}.phase-glow{filter:blur(25px)}.glow-a{right:-330px}.glow-b{left:-220px}.section-heading{display:block;margin-bottom:26px}.section-heading>.text-link{display:inline-block;margin-top:24px}.section-heading h2{font-size:43px}.section-index{font-size:9px;margin-bottom:22px}.mix-toolbar{font-size:11px}.featured{grid-template-columns:1fr;border-radius:3px 26px 3px 26px;margin-bottom:33px}.featured-cover{width:100%;height:auto;min-height:0;aspect-ratio:1 / 1}.featured-cover img{object-fit:contain}.featured-copy{padding:28px}.featured-copy .eyebrow{margin-bottom:22px}.featured-copy h3{font-size:34px}.featured-copy .actions{margin-top:26px}.mix-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}.mix-card h3{font-size:15px}.card-meta{font-size:10px}.card-source{font-size:9px}.play-badge{width:33px;height:33px;right:9px;bottom:9px}.about-grid{grid-template-columns:1fr;gap:35px}.about-identity{padding:0 0 30px;border-right:0;border-bottom:1px solid #14343b26}.about-mark{width:145px;margin-block:26px}.about-copy h2{font-size:43px}.about-copy p{font-size:16px}.contact-top>.eyebrow:last-child{display:none}.contact-section h2{font-size:clamp(44px,9vw,67px)}.contact-bottom{align-items:start;flex-direction:column;gap:28px}.contact-bottom p{font-size:13px}.site-footer{gap:20px}.site-footer nav{width:100%;gap:20px}.player-heading h3{font-size:21px}.player-heading .small-button{align-self:start;flex-shrink:0}}
@media(max-width:420px){.header-brand{width:126px}.site-header nav{gap:13px}.nav-booking{gap:8px;padding:6px 8px}.hero-statement{font-size:31px}.hero .actions{gap:20px}.hero .text-link{font-size:12px}.hero .button{padding-inline:17px;gap:25px}.mix-grid{gap:28px 14px}.section-heading h2{font-size:38px}.featured-copy h3{font-size:30px}.featured-copy{padding:24px}.button{gap:24px}.contact-section h2{font-size:45px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}.phase-glow,.phase-orbit{animation:none!important}.motion-toggle{display:none!important}}

/* Genre display and filtering */
.genre-toolbar{display:flex;align-items:end;justify-content:space-between;gap:24px;margin:30px 0 22px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.genre-field{display:flex;align-items:center;gap:20px;flex-wrap:wrap}.genre-field label{font-size:12px;color:var(--muted)}
.genre-field select{min-width:240px;max-width:100%;min-height:46px;padding:11px 38px 11px 16px;border:1px solid #59777d6b;border-radius:3px 16px 3px 16px;background:#182022;color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.genre-field select:disabled{opacity:.5;cursor:default}.genre-field select option{background:#182022;color:var(--ink)}
.genre-toolbar>p{font-size:11px;color:var(--muted);margin:0 0 10px}.genre-badge{display:inline-block;align-self:flex-start;max-width:100%;padding:4px 10px;border:1px solid #65bec350;border-radius:2px 10px 2px 10px;color:var(--accent);font-size:10px;line-height:1.5;letter-spacing:.03em;overflow-wrap:anywhere;margin:9px 0 0}
.featured-copy .genre-badge{margin:0 0 17px;font-size:11px}.mix-card .genre-badge{margin-top:13px}
@media(max-width:760px){.genre-toolbar{align-items:start;flex-direction:column;gap:12px}.genre-field{width:100%;gap:10px;align-items:stretch;flex-direction:column}.genre-field select{width:100%;min-width:0}.genre-toolbar>p{margin:0}}

/* Full archive + native modal */
html{scrollbar-gutter:stable}.archive-toolbar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) auto;gap:20px;align-items:end;margin:30px 0 22px;padding:22px 0;border-block:1px solid var(--line)}
.search-field,.archive-toolbar .genre-field{display:flex;flex-direction:column;align-items:stretch;gap:10px;min-width:0}.search-field label{font-size:12px;color:var(--muted)}
.search-field input{width:100%;min-height:46px;padding:11px 16px;border:1px solid #59777d6b;border-radius:3px 16px 3px 16px;background:#182022;color:var(--ink);font:inherit;font-size:13px}.search-field input::placeholder{color:#a7bfc2}.archive-toolbar select{width:100%;min-width:0}.archive-toolbar .small-button{min-height:46px}.load-more-wrap{display:flex;justify-content:center;margin-top:32px}
body.modal-open{overflow:hidden}
dialog.player-panel{position:fixed;inset:0;width:min(860px,calc(100vw - 36px));max-width:none;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);margin:auto;padding:clamp(22px,4vw,42px);overflow-y:auto;overscroll-behavior:contain;color:var(--ink);background:radial-gradient(ellipse at top right,#65bec310,transparent 65%),#102a31;border:1px solid #3f8790;border-radius:3px 30px 3px 30px;box-shadow:0 35px 120px #000a}
dialog.player-panel::backdrop{background:#040606db;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
dialog.player-panel .player-heading{align-items:start;border-bottom:1px solid var(--line);padding-bottom:23px}dialog.player-panel .player-heading h3{font-size:clamp(22px,3.3vw,34px);letter-spacing:-.03em}dialog.player-panel #player-close{flex-shrink:0}dialog.player-panel #consent p{line-height:1.75}
@media(max-width:760px){.archive-toolbar{grid-template-columns:1fr;gap:15px}.archive-toolbar .small-button{justify-self:start}dialog.player-panel{width:calc(100vw - 24px);max-height:calc(100vh - 24px);max-height:calc(100dvh - 24px);padding:22px;border-radius:3px 20px 3px 20px}dialog.player-panel .actions{align-items:stretch;flex-direction:column}dialog.player-panel .actions .button,dialog.player-panel .actions .small-button{justify-content:center;text-align:center}}

/* PHASE: separate artwork and compact SoundCloud Mini Player */
dialog.player-panel{width:min(1000px,calc(100vw - 36px))}
.player-layout{display:grid;grid-template-columns:minmax(180px,300px) minmax(0,1fr);gap:32px;align-items:center}
.player-cover{aspect-ratio:1;background:#0b171a;border:1px solid var(--line);border-radius:3px 18px 3px 18px;overflow:hidden}
.player-cover img{display:block;width:100%;height:100%;object-fit:contain}
.player-detail{min-width:0}
dialog.player-panel .player-heading{padding-bottom:0;border:0;gap:16px}
dialog.player-panel .player-heading h3{font-size:clamp(23px,2.8vw,34px);line-height:1.12;overflow-wrap:anywhere}
dialog.player-panel .player-heading .eyebrow{margin-bottom:12px}
dialog.player-panel .player-controls{gap:16px;margin-top:20px;font-size:12px}
dialog.player-panel #consent{font-size:13px;margin-top:22px}
@media(max-width:700px){.player-layout{grid-template-columns:1fr;gap:22px}.player-cover{width:min(190px,55vw);margin-inline:auto}dialog.player-panel{padding:22px;width:calc(100vw - 24px)}dialog.player-panel .player-heading h3{font-size:25px}}

/* SEO, producer credit, sharing and optional analytics */
.music-credit{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(30px,6vw,90px);border-bottom:1px solid var(--line)}.music-credit h2{font-size:clamp(36px,5vw,64px);line-height:1.05;letter-spacing:-.04em;margin:0}.music-credit h2 svg{color:var(--accent);vertical-align:baseline;width:.7em;height:.7em}.music-credit-copy{color:var(--muted);max-width:640px}.music-credit-copy p:first-child{margin-top:0}.credit-lead{font-size:24px;line-height:1.3;color:var(--ink)}.credit-thanks{color:var(--accent);font-size:22px}.share-section{padding-block:35px;border-top:1px solid var(--line)}.share-links{display:flex;flex-wrap:wrap;align-items:center;gap:12px}.share-links a{display:inline-flex;align-items:center;gap:8px;padding:11px 14px;border:1px solid var(--line);border-radius:3px 14px 3px 14px;font-size:12px}.share-links a:hover{color:var(--accent);border-color:var(--accent)}#share-status{font-size:12px;color:var(--accent)}#share-address{width:100%;padding:12px}.site-footer nav{flex-wrap:wrap}
.analytics-choice{position:fixed;bottom:20px;right:20px;z-index:60;width:min(560px,calc(100vw - 40px));max-height:calc(100dvh - 40px);overflow:auto;background:#171e1f;color:var(--ink);border:1px solid #3f8790;border-radius:3px 24px 3px 24px;padding:26px;box-shadow:0 16px 70px #000a;font-size:13px;line-height:1.65}.analytics-choice h2{font-size:23px;line-height:1.2;margin:0}.analytics-choice .eyebrow{color:var(--accent);margin-bottom:12px}.analytics-choice>a{text-decoration:underline}.analytics-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.analytics-actions .small-button{background:#1f2b2e;color:var(--ink);border:1px solid #3f8790;min-height:48px;text-align:center}.analytics-actions .small-button:hover{background:#2b4044}.analytics-document{max-width:850px;margin:auto;padding:40px 24px}.analytics-document a{text-decoration:underline}.analytics-document h1{font-size:clamp(30px,5vw,48px);line-height:1.1}
@media(max-width:700px){.music-credit{grid-template-columns:1fr}.analytics-choice{padding:20px}.analytics-actions{grid-template-columns:1fr}.share-links a{padding:10px}.site-footer nav{gap:16px}}

/* Persönliche Vorstellung und reine Logo-Buttons */
.about-signature{display:flex;flex-direction:column;gap:7px;margin-top:25px}.about-name{font-size:14px;letter-spacing:.16em;font-weight:700}.about-location{font-size:12px;color:#505c5e;letter-spacing:.04em}.about-copy .about-personal-intro{font-size:clamp(19px,2vw,24px);line-height:1.5;color:#23474e;margin-top:28px}
.share-links{gap:12px}.share-links a,.share-links #share-copy{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;min-height:46px;padding:0;border:1px solid var(--line);border-radius:3px 14px 3px 14px;background:transparent;color:var(--ink)}.share-links a:hover,.share-links #share-copy:hover{color:var(--accent);border-color:var(--accent)}.share-links svg{display:block;flex-shrink:0}

/* 50/50, wechselnde Anordnung zwischen About und Musik-Statement */
.about-grid,.music-credit{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,76px);align-items:start}
.about-section{padding-block:clamp(56px,6vw,88px)}
.about-copy,.music-credit-copy{min-width:0;width:100%;max-width:none}
.about-copy h2{font-size:clamp(34px,3.7vw,54px);line-height:1.08;margin:0 0 26px}
.about-copy p{max-width:none;margin:0 0 20px;font-size:17px;line-height:1.7}
.about-copy .about-personal-intro{font-size:clamp(19px,1.8vw,24px);line-height:1.45;margin:0 0 24px}
.about-copy .text-link{display:inline-block;margin-top:4px}
.about-identity{border:0;padding:0;min-width:0;align-self:center;text-align:center;display:flex;flex-direction:column;align-items:center}
.about-identity .eyebrow{margin:0 0 34px}
.about-mark{width:min(100%,440px);height:auto;margin:0 0 34px}
.about-signature{margin:0;gap:7px}
.music-credit{padding-block:clamp(56px,6vw,88px)}
.music-credit h2{font-size:clamp(34px,3.7vw,54px);line-height:1.08}
.music-credit-copy p{margin:0 0 20px;line-height:1.7}
.music-credit-copy .credit-lead{font-size:clamp(19px,1.8vw,24px);line-height:1.45;margin-bottom:24px}
@media(max-width:760px){
 .about-grid,.music-credit{grid-template-columns:minmax(0,1fr);gap:38px}
 .about-copy p{font-size:16px}
 .about-copy h2{font-size:clamp(33px,8vw,43px)}
 .about-identity{width:100%;padding-top:30px;border-top:1px solid #14343b26}
 .about-mark{width:min(65%,260px);margin-bottom:24px}
 .about-identity .eyebrow{margin-bottom:24px}
}

/* Drei exakt zentrierte Links: gleich breite äußere Grid-Spalten. */
.site-footer{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:24px}
.site-footer .footer-logo{justify-self:start;width:170px;max-width:100%}
.site-footer .footer-legal-nav{display:flex;justify-content:center;align-items:center;flex-wrap:nowrap;width:auto;gap:22px;justify-self:center}
.footer-legal-nav a{white-space:nowrap}
.footer-right{display:flex;align-items:center;justify-content:flex-end;justify-self:end;gap:24px;min-width:0}
.footer-settings{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.footer-settings .footer-button{white-space:nowrap}
.footer-copyright{white-space:nowrap;margin:0}
.back-to-top{position:fixed;right:24px;bottom:24px;z-index:40;display:flex;align-items:center;justify-content:center;width:46px;height:46px;border:1px solid var(--accent);border-radius:3px 16px 3px 16px;background:var(--panel);color:var(--accent);box-shadow:0 6px 22px #0004;transition:background .2s,color .2s}
.back-to-top:hover{background:var(--accent);color:var(--bg)}
@media(max-width:1200px){
 .site-footer{grid-template-columns:minmax(0,1fr) minmax(0,1fr);row-gap:26px}
 .site-footer .footer-legal-nav{grid-column:1 / -1;grid-row:1;justify-self:center;flex-wrap:wrap}
 .site-footer .footer-logo{grid-column:1;grid-row:2}
 .footer-right{grid-column:2;grid-row:2}
}
@media(max-width:600px){
 .site-footer{grid-template-columns:minmax(0,1fr);justify-items:center;padding-bottom:86px;gap:24px}
 .site-footer .footer-legal-nav{grid-column:1;grid-row:1;gap:16px}
 .site-footer .footer-logo{grid-column:1;grid-row:2;justify-self:center;width:150px}
 .footer-right{grid-column:1;grid-row:3;justify-self:center;justify-content:center;flex-wrap:wrap;gap:20px}
 .footer-settings{align-items:center}
 .back-to-top{right:16px;bottom:max(16px,env(safe-area-inset-bottom))}
}
@media(prefers-reduced-motion:reduce){.back-to-top{transition:none}}

/* Bessere Lesbarkeit: größere Fließtexte und Bedienelemente */
body{font-size:18px}
.site-header nav{font-size:15px}
.eyebrow,.hero-meta,.hero-intro,.section-index,.hero-foot .eyebrow,.contact-top>.eyebrow:last-child{font-size:12px}
.hero-description,.contact-bottom p,.about-copy p{font-size:18px;line-height:1.75}
.button,.small-button,.text-link,.hero .text-link{font-size:15px}
.listen-end,.motion-toggle,.hero-foot .motion-toggle,.scroll-link{font-size:13px}
.mix-toolbar,.featured-copy .muted,.artist-credit,.card-meta,.card-source{font-size:14px;line-height:1.6}
.mix-card h3{font-size:19px;line-height:1.45}
.image-label{font-size:11px}
.genre-field label,.search-field label{font-size:14px}
.genre-field select,.search-field input{font-size:16px}
.genre-badge,.featured-copy .genre-badge{font-size:13px}
.about-name{font-size:16px}.about-location{font-size:14px}
#consent p,dialog.player-panel #consent,.analytics-choice{font-size:16px;line-height:1.65}
#consent a,dialog.player-panel .player-controls,#share-status{font-size:14px}
.site-footer{font-size:14px}
.site-footer .footer-button{font-size:14px;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.site-footer .footer-legal-nav a{display:inline-flex;align-items:center;min-height:44px}
.site-footer .footer-button:hover,.site-footer .footer-legal-nav a:hover{color:var(--accent)}
.site-footer .footer-button:focus-visible{outline:3px solid var(--accent);outline-offset:5px;border-radius:3px}
.footer-right{gap:20px}.site-footer .footer-legal-nav{gap:20px}
@media(max-width:760px){
 body{font-size:17px}
 .hero-description,.contact-bottom p,.about-copy p{font-size:17px}
 .site-header nav{font-size:14px;gap:16px}
 .hero-meta{flex-wrap:wrap;gap:10px}
 .hero-foot{flex-wrap:wrap;gap:16px}
 .site-footer{font-size:14px}
}
@media(max-width:480px){
 .site-header{gap:14px;flex-wrap:wrap;height:auto}
 .site-header nav{flex-wrap:wrap;gap:14px}
 .site-footer .footer-legal-nav{gap:14px}
}

/* Gemeinsame Ausrichtung aller Signalpunkte – akzeptierter Basisstand */
.featured-copy > .eyebrow{display:flex;align-items:center;gap:10px}
.featured-copy > .eyebrow .signal{flex:0 0 6px;margin:0}
:where(p, span, div):has(> .signal){display:flex;align-items:center;gap:10px}
.signal{display:block;flex:0 0 6px;width:6px;height:6px;margin:0}

#featured-play {
    justify-content: center;
    gap: 10px;
}

#featured-play svg {
    display: block;
    flex-shrink: 0;
}

/* Gro e Mixkachel: stabile Spalten ohne seitliche Bildr nder */
.featured {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    align-items: start;
    min-width: 0;
}

.featured-image-wrap {
    width: 100%;
    max-width: none;
    min-width: 0;
    overflow: hidden;
    justify-self: stretch;
}

.featured-cover {
    width: 100%;
    max-width: none;
    height: auto;
    min-height: 0;
    aspect-ratio: 1 / 1;
}

.featured-cover img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.featured-copy {
    width: 100%;
    min-width: 0;
    max-width: 100%;
    align-self: center;
}

/* Kompakter Textbereich bei mittleren Bildschirmbreiten */
@media (min-width: 701px) and (max-width: 1100px) {
    .featured-copy {
        padding: 24px;
    }

    .featured-copy h3 {
        font-size: clamp(25px, 3.2vw, 35px);
    }

    .featured-copy .eyebrow {
        margin-bottom: 18px;
    }

    .featured-copy .actions {
        flex-wrap: wrap;
        gap: 16px;
        margin-top: 22px;
    }
}

/* Erst auf schmalen Bildschirmen untereinander */
@media (max-width: 700px) {
    .featured {
        grid-template-columns: minmax(0, 1fr);
    }
}


/* H he anhand des tats chlichen Inhalts pr fen */
.featured.featured-adaptive {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
}

.featured.featured-adaptive .featured-image-wrap {
    width: 100%;
    max-width: none;
    min-width: 0;
}

.featured.featured-adaptive .featured-cover {
    width: 100%;
    height: auto;
    min-height: 0;
    aspect-ratio: 1;
}

.featured.featured-adaptive .featured-copy {
    min-width: 0;
    align-self: center;
    padding: clamp(20px, 3vw, 40px);
}

.featured.featured-adaptive .featured-copy .actions {
    flex-wrap: wrap;
    gap: 14px;
}

.featured.featured-adaptive.featured-stacked {
    grid-template-columns: minmax(0, 1fr);
}


/* PHASE   Plattenspieler im Hero */
.hero .phase-scene {
    background:
        radial-gradient(
            ellipse at 82% 48%,
            #205763 0%,
            #102c34 35%,
            #0b171a 76%
        );
}

/* Sanfter  bergang zum Text und zum folgenden Bereich */
.hero .phase-scene::after {
    background:
        linear-gradient(
            90deg,
            #0b171a 0%,
            #0b171aab 25%,
            #0b171a26 62%,
            transparent 100%
        ),
        linear-gradient(
            0deg,
            #0b171a 0%,
            transparent 32%
        );
}

.hero-turntable {
    position: absolute;
    top: 35px;
    right: -140px;
    width: clamp(660px, 64vw, 1080px);
    height: auto;
    overflow: visible;
    opacity: 0.7;
    pointer-events: none;
}

.platter-shadow {
    fill: #040d11;
    stroke: #02090c;
    stroke-width: 10;
}

.platter-edge {
    fill: #132e36;
    stroke: #79bac2;
    stroke-width: 2;
}

.vinyl-grooves {
    fill: none;
    stroke: #70aab4;
    stroke-width: 1;
    opacity: 0.25;
}

.vinyl-highlight {
    fill: none;
    stroke: #9cdae0;
    stroke-width: 3;
    stroke-linecap: round;
    opacity: 0.35;
}

.vinyl-highlight.secondary {
    stroke-width: 2;
    opacity: 0.18;
}

.vinyl-label {
    fill: #65bec3;
}

.vinyl-label-ring {
    fill: none;
    stroke: #14343b;
    stroke-width: 1;
    opacity: 0.35;
}

.vinyl-label-caption {
    fill: #14343b;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 1px;
}

.vinyl-marker {
    fill: #173c43;
}

.vinyl-spindle {
    fill: #dceeed;
    stroke: #315761;
    stroke-width: 2;
}

.tonearm-base {
    fill: #0b1b21;
    stroke: #588c96;
    stroke-width: 2;
}

.tonearm-pivot {
    fill: #21434d;
    stroke: #8fc3ca;
    stroke-width: 1.5;
}

.tonearm-shadow,
.tonearm-shaft {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.tonearm-shadow {
    stroke: #030c10;
    stroke-width: 15;
}

.tonearm-shaft {
    stroke: url(#tonearm-metal);
    stroke-width: 8;
}

.tonearm-head {
    fill: #83b8bf;
    stroke: #14343b;
    stroke-width: 2;
}

.tonearm-needle {
    fill: none;
    stroke: #d5eeee;
    stroke-width: 2;
}

.tonearm-screw {
    fill: #b1d5d9;
}

/* Langsame Rotation; der bestehende Pause-Button steuert sie mit */
.vinyl-spin {
    transform-box: view-box;
    transform-origin: 360px 450px;
    animation: zeisman-vinyl-turn 42s linear infinite;
    animation-play-state: paused;
}

.motion-running .vinyl-spin {
    animation-play-state: running;
}

@keyframes zeisman-vinyl-turn {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 1000px) {
    .hero-turntable {
        width: 800px;
        top: 110px;
        right: -260px;
        opacity: 0.55;
    }
}

@media (max-width: 600px) {
    .hero-turntable {
        width: 650px;
        top: 155px;
        right: -300px;
        opacity: 0.4;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero .vinyl-spin {
        animation: none;
    }
}


.about-copy .about-music-statement {
    margin: 28px 0 24px;
    padding-top: 22px;
    border-top: 1px solid #14343b26;
    color: #14343b;
    font-size: clamp(21px, 2vw, 27px);
    font-weight: 500;
    line-height: 1.35;
    letter-spacing: -0.02em;
}

/* Alte dekorative Kreise im About-Bereich entfernen */
.about-section::after {
    content: none;
}

/* Mischpult hinter dem Inhalt */
.about-section {
    isolation: isolate;
}

.about-section > .about-grid {
    position: relative;
    z-index: 1;
}

.about-mixer {
    position: absolute;
    left: -150px;
    bottom: -185px;
    width: clamp(440px, 43vw, 660px);
    height: auto;
    z-index: -1;
    pointer-events: none;
    color: #245b65;
    opacity: 0.16;
    transform: rotate(-18deg);
}

.mixer-case {
    fill: #b6d0d2;
    fill-opacity: 0.3;
    stroke: currentColor;
    stroke-width: 2;
}

.mixer-channel-lines {
    fill: none;
    stroke: currentColor;
    stroke-width: 1;
    opacity: 0.5;
}

.mixer-knobs {
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.mixer-indicators {
    fill: none;
    stroke: currentColor;
    stroke-width: 3;
    stroke-linecap: round;
}

.mixer-tracks {
    fill: none;
    stroke: currentColor;
    stroke-width: 5;
    stroke-linecap: round;
    opacity: 0.6;
}

.mixer-caps {
    fill: #e2eeee;
    stroke: currentColor;
    stroke-width: 2;
}

.mixer-meters {
    fill: none;
    stroke: currentColor;
    stroke-width: 4;
    stroke-linecap: round;
}

/* Unter dem Text auf kleinen Displays zurückhaltender */
@media (max-width: 760px) {
    .about-mixer {
        width: 440px;
        left: -160px;
        bottom: -155px;
        opacity: 0.1;
    }
}


/* Einstellungen nebeneinander statt übereinander */
.site-footer .footer-settings {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px 20px;
}

.site-footer .footer-right {
    align-items: center;
    gap: 24px;
}

/* Genügend Platz für beide Einstellungen und Copyright */
@media (min-width: 601px) and (max-width: 1500px) {
    .site-footer {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 16px;
    }

    .site-footer .footer-logo {
        grid-column: 1;
        grid-row: 1;
        justify-self: start;
    }

    .site-footer .footer-legal-nav {
        grid-column: 1;
        grid-row: 2;
        justify-self: center;
    }

    .site-footer .footer-right {
        grid-column: 1;
        grid-row: 3;
        justify-self: end;
    }
}

@media (max-width: 600px) {
    .site-footer .footer-settings {
        justify-content: center;
    }

    .site-footer .footer-right {
        justify-content: center;
        gap: 12px 20px;
    }
}

/* Mix navigation inside the SoundCloud dialog */
#player .player-navigation {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
#player .player-position {
    margin: 0;
    color: var(--muted);
    font-size: 14px;
    line-height: 1.5;
    font-variant-numeric: tabular-nums;
}
#player .player-navigation-buttons { display: flex; gap: 10px; }
#player .player-nav-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 46px;
    padding: 10px 16px;
    border: 1px solid var(--accent);
    border-radius: 3px 15px 3px 15px;
    background: transparent;
    color: var(--accent);
    font: inherit;
    font-size: 15px;
    line-height: 1.2;
    cursor: pointer;
}
#player .player-nav-button svg { display: block; flex-shrink: 0; }
#player .player-nav-button:hover:not(:disabled) { background: var(--accent); color: #0b171a; }
#player .player-nav-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
#player .player-nav-button:disabled { opacity: .35; cursor: default; }
@media (max-width: 480px) {
    #player .player-position { flex-basis: 100%; text-align: right; }
}


/* Public SoundCloud counters */
.mix-stats { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin: 12px 0; color: var(--muted); font-size: 14px; line-height: 1.4; }
.mix-stats[hidden] { display: none !important; }
.mix-stat { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mix-stat svg { display: block; flex: 0 0 16px; color: var(--accent); }
#player-stats { margin: 14px 0 0; }
#featured-stats { margin: 16px 0 0; }


/* Direct listening entry and personal DJ profile */
button.hero-listen {
    appearance: none; border-left: 0; border-right: 0;
    border-radius: 0; background: transparent; color: inherit;
    font: inherit; text-align: left; cursor: pointer;
}
button.hero-listen:disabled { cursor: default; opacity: .65; }
.hero-latest-title { display: block; margin-top: 20px; font-size: 15px; line-height: 1.5; color: var(--muted); overflow-wrap: anywhere; }
.hero-listen .round-arrow { flex-shrink: 0; }
.about-identity .about-mark { width: min(100%, 300px); margin-block: 24px; }
.dj-facts { margin: 28px 0 0; text-align: left; }
.dj-facts > div { display: grid; grid-template-columns: 145px minmax(0,1fr); gap: 12px; padding: 10px 0; border-bottom: 1px solid #14343b20; }
.dj-facts dt { color: #49656b; font-size: 14px; }
.dj-facts dd { margin: 0; font-size: 16px; line-height: 1.5; color: #14343b; }
.dj-attitude { text-align: left; margin-top: 24px; }
.dj-attitude p { font-size: 16px; line-height: 1.6; margin: 0 0 16px; }
.dj-attitude strong { font-weight: 600; }
.dj-attitude .dj-request { font-size: 22px; line-height: 1.35; letter-spacing: -.02em; margin-bottom: 8px; }
.dj-attitude .dj-wink { color: #49656b; font-size: 14px; }
.dj-numbers { display: flex; flex-wrap: wrap; gap: 20px 32px; text-align: left; border-top: 1px solid #14343b30; padding-top: 20px; margin-top: 24px; }
.dj-numbers > span { display: flex; flex-direction: column; gap: 4px; }
.dj-numbers strong { font-size: 28px; font-weight: 500; line-height: 1.2; }
.dj-numbers > span > span { font-size: 13px; color: #49656b; }
.dj-numbers[hidden], .dj-numbers [hidden] { display: none !important; }
@media(max-width: 460px) {
    .dj-facts > div { grid-template-columns: 1fr; gap: 3px; }
}


/* Compact latest mix card */
.hero-bottom-grid { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: clamp(24px,4vw,60px); }
.hero-mix-card {
    width: 100%; max-width: 510px; justify-self: end; min-width: 0;
    display: grid; grid-template-columns: 112px minmax(0,1fr);
    align-items: start; gap: 18px 22px; padding: 24px;
    background: #102a31f5; border: 1px solid #65bec340;
    border-radius: 3px 26px 3px 26px;
}
.hero-mix-cover { aspect-ratio: 1; width: 100%; overflow: hidden; border-radius: 2px 12px 2px 12px; background: #0b171a; }
.hero-mix-cover img { display: block; width: 100%; height: 100%; object-fit: contain; }
.hero-mix-copy { min-width: 0; }
.hero-mix-copy .eyebrow { font-size: 10px; line-height: 1.5; margin: 0 0 10px; color: var(--accent); }
.hero-mix-copy h2 { font-size: clamp(22px,2vw,29px); font-weight: 500; line-height: 1.16; letter-spacing: -.025em; margin: 0 0 18px; overflow-wrap: anywhere; color: var(--ink); }
.hero-mix-play { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 10px 16px; border: 0; border-radius: 3px 17px 3px 17px; background: var(--accent); color: #0b171a; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; }
.hero-mix-play svg { flex-shrink: 0; }
.hero-mix-play:hover:not(:disabled) { background: #91d5d7; }
.hero-mix-play:disabled { opacity: .5; cursor: default; }
.hero-mix-tagline { grid-column: 1 / -1; margin: 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 14px; color: var(--muted); letter-spacing: .02em; }
/* Balanced biography and identity */
.about-grid { grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; }
.about-grid > .about-copy { min-width: 0; }
.about-grid > .about-identity { border: 0; padding: 0; }
.dj-short-profile { width: 100%; max-width: 360px; margin-top: 28px; padding-top: 20px; border-top: 1px solid #14343b26; }
.dj-short-profile p { margin: 0 0 12px; font-size: 16px; line-height: 1.55; color: #49656b; }
.dj-short-profile p:last-child { margin-bottom: 0; }
.about-copy .about-attitude { margin-top: 26px; }
.about-copy .about-attitude p { margin: 0; font-size: 16px; line-height: 1.7; }
.about-attitude strong { color: #14343b; font-weight: 600; }
@media (min-width:761px) and (max-width:1000px) {
    .hero-mix-card { grid-template-columns: 80px minmax(0,1fr); padding: 18px; gap: 16px; }
}
@media (max-width:760px) {
    .hero-bottom-grid { grid-template-columns: minmax(0,1fr); }
    .hero-mix-card { justify-self: start; max-width: none; }
    .about-grid { grid-template-columns: minmax(0,1fr); gap: 38px; }
    .about-grid > .about-identity { grid-row: 1; padding: 0 0 32px; border-bottom: 1px solid #14343b26; }
    .about-grid > .about-copy { grid-row: 2; }
}
@media (max-width:380px) {
    .hero-mix-card { grid-template-columns: 76px minmax(0,1fr); padding: 16px; gap: 14px; }
    .hero-mix-copy h2 { font-size: 21px; }
}


/* Open latest-mix typography */
.hero-open-listen { justify-self: end; align-self: center; width: 100%; max-width: 480px; min-width: 0; padding-block: 18px; }
.hero-open-listen > .eyebrow { color: var(--accent); margin: 0 0 18px; font-size: 11px; }
.hero-open-listen h2 { font-size: clamp(28px,3vw,43px); line-height: 1.12; letter-spacing: -.035em; font-weight: 500; color: var(--ink); margin: 0 0 24px; overflow-wrap: anywhere; text-wrap: balance; }
.hero-open-play { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0; background: none; border: 0; color: var(--accent); font: inherit; font-size: 16px; font-weight: 500; cursor: pointer; }
.hero-open-play svg { display: block; flex-shrink: 0; }
.hero-open-play:hover:not(:disabled) { color: #b6e5e7; }
.hero-open-play:disabled { opacity: .5; cursor: default; }
.hero-open-tagline { margin: 18px 0 0; font-size: 14px; color: var(--muted); }
/* Separate artist dossier */
.dj-dossier { background: #102a31; border-block: 1px solid #65bec326; }
.dossier-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 36px; }
.dossier-heading .eyebrow { color: var(--accent); margin-bottom: 16px; }
.dossier-heading h2 { margin: 0; font-size: clamp(36px,4.5vw,62px); font-weight: 500; line-height: 1.08; letter-spacing: -.045em; }
.dossier-heading > p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.5; }
.dossier-layout { display: grid; grid-template-columns: minmax(0,1.65fr) minmax(0,1fr); gap: clamp(28px,4vw,64px); align-items: start; }
.dossier-facts { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 30px; margin: 0; }
.dossier-facts > div { padding: 24px 0 28px; border-top: 1px solid #65bec340; min-width: 0; }
.dossier-facts dt { color: var(--accent); text-transform: uppercase; letter-spacing: .12em; font-size: 11px; line-height: 1.5; margin-bottom: 12px; }
.dossier-facts dd { margin: 0; font-size: clamp(20px,2vw,26px); line-height: 1.25; letter-spacing: -.02em; overflow-wrap: anywhere; }
.dossier-facts dd span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; letter-spacing: 0; line-height: 1.5; }
.dossier-attitude { padding: clamp(24px,3vw,36px); background: #0b1e23; border: 1px solid #65bec332; border-radius: 3px 24px 3px 24px; }
.dossier-attitude .eyebrow { color: var(--accent); margin-bottom: 14px; font-size: 10px; }
.dossier-attitude h3 { font-size: clamp(26px,2.7vw,36px); line-height: 1.12; letter-spacing: -.03em; font-weight: 500; margin: 0 0 18px; }
.dossier-attitude > p { font-size: 15px; line-height: 1.65; color: var(--muted); margin: 0 0 20px; }
.dossier-attitude strong { color: var(--ink); font-weight: 500; }
.dossier-attitude blockquote { border: 0; border-top: 1px solid #65bec330; padding: 20px 0 0; margin: 22px 0 14px; font-size: 23px; line-height: 1.4; letter-spacing: -.015em; color: var(--accent); }
.dossier-attitude .dossier-wink { margin-bottom: 0; font-size: 13px; }
@media(max-width:760px) {
 .hero-open-listen { justify-self: start; max-width: 560px; padding-block: 8px; }
 .dossier-heading { align-items: start; flex-direction: column; }
 .dossier-layout { grid-template-columns: minmax(0,1fr); }
}
@media(max-width:420px) {
 .dossier-facts { grid-template-columns: minmax(0,1fr); }
 .dossier-facts > div { padding-block: 18px; }
}


/* Editorial listening invitation, aligned with the right content edge */
.hero-open-listen { max-width: 330px; justify-self: end; width: 100%; padding: 24px 0 18px; border-top: 1px solid #95bbc360; }
.hero-open-listen > .eyebrow { margin-bottom: 18px; }
.hero-open-headline { font-size: clamp(32px,3.2vw,43px); line-height: 1.08; letter-spacing: -.035em; margin: 0 0 26px; color: var(--ink); }
.hero-random-label { color: var(--muted); text-transform: uppercase; font-size: 10px; letter-spacing: .12em; margin: 0 0 8px; }
.hero-open-listen h2 { font-size: 19px; line-height: 1.4; letter-spacing: -.01em; margin: 0 0 16px; text-wrap: initial; }
.hero-open-play { gap: 9px; font-size: 15px; }
.hero-open-play svg { width: 32px; height: 32px; }
.dossier-main { min-width: 0; }
.dj-photo-placeholder { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 12px; text-align: center; min-height: 220px; padding: 24px; margin-bottom: 28px; border: 1px dashed #65bec35c; border-radius: 3px 24px 3px 24px; background: linear-gradient(130deg,#0b1e23,#163840); color: var(--accent); }
.dj-photo-placeholder > span { font-size: 14px; letter-spacing: .08em; text-transform: uppercase; }
.dj-photo-placeholder small { font-size: 13px; color: var(--muted); line-height: 1.5; }
.dossier-attitude blockquote { font-size: 21px; line-height: 1.5; }
@media(max-width:760px) {
 .hero-open-listen { justify-self: end; max-width: 330px; }
 .dj-photo-placeholder { min-height: 180px; }
}


/* Transparent invitation: no horizontal rule */
.hero-open-listen {
    max-width: 370px; padding: 26px 28px; border: 0;
    background: rgba(11, 30, 35, .66);
    border-radius: 3px 24px 3px 24px;
}
.about-grid .about-identity .about-mark { width: min(85%, 390px); height: auto; margin-block: 28px; }
.about-grid .about-name { font-size: 19px; letter-spacing: .14em; }
.about-grid .about-location { font-size: 15px; margin-top: 8px; }
/* Sidebar: compact 3 x 2 statistics below the musical statement */
.dossier-sidebar { min-width: 0; }
.dossier-sidebar .dossier-attitude { padding: 26px; }
.dossier-sidebar .dossier-attitude h3 { font-size: clamp(26px,2.4vw,32px); }
.dossier-sidebar .dossier-attitude > p { margin-bottom: 16px; }
.dossier-sidebar .dossier-attitude blockquote { margin-top: 16px; padding-top: 16px; font-size: 20px; }
.dossier-stats { margin-top: 24px; padding-top: 20px; border-top: 1px solid #65bec333; }
.dossier-stats[hidden] { display: none; }
.dossier-stats > .eyebrow { color: var(--accent); margin: 0 0 18px; font-size: 10px; }
.dossier-stats dl { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 20px 14px; margin: 0; }
.dossier-stats dl > div { display: flex; flex-direction: column-reverse; gap: 5px; min-width: 0; }
.dossier-stats dt { font-size: 12px; line-height: 1.4; color: var(--muted); }
.dossier-stats dd { margin: 0; font-size: clamp(18px,1.8vw,26px); line-height: 1.2; letter-spacing: -.035em; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.dossier-stats .dossier-stats-note { margin: 18px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted); }
@media(max-width:760px) {
 .about-grid .about-identity .about-mark { width: min(75%,310px); }
 .hero-open-listen { max-width: 370px; }
}
@media(max-width:380px) {
 .hero-open-listen { padding: 22px; }
 .dossier-stats dl { grid-template-columns: repeat(2,minmax(0,1fr)); }
}


/* Align hero columns at their top edge */
.hero-bottom-grid { align-items: start; }
.hero-open-listen { align-self: start; }
.hero-open-headline { font-size: clamp(30px, 3vw, 39px); }

/* Profile statistics: same width as the statement above */
.dossier-sidebar > .dossier-stats {
    box-sizing: border-box;
    width: 100%;
    margin-top: 20px;
    padding: 26px;
    border: 1px solid #65bec332;
    border-radius: 3px 24px 3px 24px;
    background: linear-gradient(130deg, #0b1e23, #163840);
}
.dossier-sidebar > .dossier-attitude {
    box-sizing: border-box;
    width: 100%;
}
.about-copy .about-personal-intro { max-width: none; }
@media (max-width:380px) {
    .dossier-sidebar > .dossier-stats { padding: 22px; }
}


/* SoundCloud profile link, separated from the share actions */
.share-section { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; column-gap: 30px; }
.share-section > .eyebrow { grid-column: 1; }
.share-section > .share-links { grid-column: 1; }
.share-section > .soundcloud-brand-link { grid-column: 2; grid-row: 1 / 3; justify-self: end; display: flex; align-items: center; justify-content: center; min-width: 96px; min-height: 64px; color: var(--accent); }
.soundcloud-brand-link svg { display: block; width: 96px; height: 64px; }
.soundcloud-brand-link:hover { color: #b6e5e7; }
.share-section > #share-status { grid-column: 1 / -1; }
.dossier-sidebar .dossier-attitude h3 { font-size: clamp(18px,1.65vw,25px); letter-spacing: -.045em; line-height: 1.25; }
@media (max-width:600px) {
 .share-section { grid-template-columns: minmax(0,1fr); }
 .share-section > .soundcloud-brand-link { grid-column: 1; grid-row: auto; justify-self: center; margin-top: 24px; }
}


/* Equal space above and below the sharing content */
.share-section {
    padding-block: 38px;
    align-content: center;
    row-gap: 0;
}
.share-section > .eyebrow { margin: 0 0 18px; }
.share-section > .share-links { margin: 0; }
.share-section > #share-status { margin: 14px 0 0; }
.share-section > #share-status:empty { display: none; }
.share-section > .soundcloud-brand-link { align-self: center; }

/* Stack all footer groups when width or link count requires it */
@media(max-width:1700px) {
    .site-footer {
        display: flex; flex-direction: column; align-items: center;
        justify-content: center; gap: 18px; text-align: center;
        padding-top: 30px; padding-bottom: 40px;
    }
    .site-footer .footer-logo { order: 0; align-self: center; width: 170px; }
    .site-footer .footer-legal-nav {
        order: 1; width: 100%; justify-content: center;
        flex-wrap: wrap; gap: 4px 22px;
    }
    .site-footer .footer-right {
        order: 2; width: 100%; display: flex; flex-direction: column;
        align-items: center; justify-content: center; gap: 12px;
    }
    .site-footer .footer-settings {
        display: flex; flex-direction: column; flex-wrap: nowrap;
        align-items: center; justify-content: center; gap: 0;
    }
    .site-footer .footer-copyright { margin: 0; text-align: center; }
}
.site-footer:has(.footer-legal-nav > :nth-child(4)) {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 18px; text-align: center;
}
.site-footer:has(.footer-legal-nav > :nth-child(4)) .footer-logo { order: 0; align-self: center; }
.site-footer:has(.footer-legal-nav > :nth-child(4)) .footer-legal-nav { order: 1; flex-wrap: wrap; justify-content: center; width: 100%; }
.site-footer:has(.footer-legal-nav > :nth-child(4)) .footer-right { order: 2; flex-direction: column; align-items: center; gap: 12px; }
.site-footer:has(.footer-legal-nav > :nth-child(4)) .footer-settings { flex-direction: column; align-items: center; gap: 0; }
.site-footer:has(.footer-legal-nav > :nth-child(4)) .footer-copyright { margin: 0; }
@media(max-width:600px) {
    .site-footer { padding-bottom: 86px; }
}


/* All archive genres, normalized by the existing genre mapping */
.genre-cloud { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 24px 0 0; }
.genre-cloud[hidden] { display: none; }
.genre-cloud button.genre-badge { margin: 0; min-height: 38px; padding: 8px 12px; font: inherit; font-size: 13px; line-height: 1.3; cursor: pointer; color: var(--accent); background: transparent; border: 1px solid #65bec344; border-radius: 3px 12px 3px 12px; }
.genre-cloud button:hover { border-color: var(--accent); }
.genre-cloud button[aria-pressed="true"] { color: #0b171a; background: var(--accent); border-color: var(--accent); }
.genre-cloud button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
#mix-filters { scroll-margin-top: 110px; }
.load-more-wrap { margin-top: 44px; }


/* Genre selection in the DJ profile, replacing the photo placeholder */
.dj-genre-panel {
    margin-bottom: 28px;
    padding: clamp(22px,3vw,30px);
    border: 1px solid #65bec332;
    border-radius: 3px 24px 3px 24px;
    background: linear-gradient(130deg,#0b1e23,#163840);
}
.dj-genre-panel > .eyebrow { color: var(--accent); margin: 0 0 12px; }
.dj-genre-panel > h3 {
    margin: 0; font-size: clamp(23px,2.3vw,30px);
    font-weight: 500; line-height: 1.2; letter-spacing: -.025em;
}
.dj-genre-panel .genre-cloud { margin-top: 22px; gap: 10px; }


/* One quiet DJ motif, behind the dossier content */
.dj-dossier { position: relative; isolation: isolate; overflow: hidden; }
.dj-dossier > .shell { position: relative; z-index: 1; }
.dossier-headphones {
    position: absolute; z-index: 0; pointer-events: none;
    width: clamp(420px,44vw,650px); height: auto;
    right: -155px; bottom: -195px;
    color: #65bec3; opacity: .10; transform: rotate(-19deg);
}
@media(max-width:760px) {
    .dossier-headphones { width: 430px; right: -175px; bottom: -145px; opacity: .065; }
}


/* Consistent section rhythm */
:root { --section-space: clamp(56px,6vw,88px); --action-gap: 28px; }
main > .section, main > .about-section { padding-block: var(--section-space); }
#mixes { padding-top: clamp(48px,5vw,72px); }
.hero-foot { margin-top: 46px; }
.hero-bottom-grid .actions, .featured.featured-adaptive .featured-copy .actions { column-gap: var(--action-gap); row-gap: 20px; }
.about-grid { row-gap: 28px; }
.about-section-index { grid-column: 1 / -1; grid-row: 1; margin: 0; color: #3a4e52; justify-self: start; }
.about-grid > .about-copy { grid-column: 1; grid-row: 2; }
.about-grid > .about-identity { grid-column: 2; grid-row: 2; }
.about-grid .about-identity .about-mark { width: min(100%,460px); margin: 0 0 28px; }
.about-grid .about-name { font-size: 22px; }
.about-grid .about-location { font-size: 16px; }
.dj-genre-panel > h3 { font-size: clamp(19px,1.8vw,24px); letter-spacing: -.02em; }
.dossier-headphones { width: clamp(400px,43vw,640px); right: -95px; bottom: -115px; opacity: .20; transform: none; }
.dj-dossier .dossier-attitude { background: #0b1e23d9; }
.dj-dossier .dossier-stats { background: linear-gradient(130deg,#0b1e23d9,#163840cc); }
.dj-dossier .dj-genre-panel { background: linear-gradient(130deg,#0b1e23e6,#163840d9); }
.dj-brands { padding-block: 34px; border-bottom: 1px solid var(--line); }
.dj-brand-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 28px 36px; }
.dj-brand { display: flex; flex: 0 1 160px; align-items: center; justify-content: center; opacity: .52; }
.dj-brand img { display: block; max-width: 100%; width: 160px; height: 45px; object-fit: contain; filter: brightness(0) saturate(100%) invert(78%); }
.site-footer.shell { max-width: none; width: calc(100% - 2 * var(--space)); margin-inline: var(--space); padding-inline: 0; }
#player #player-close { display: inline-flex; align-items: center; justify-content: center; width: 40px; min-width: 40px; height: 40px; min-height: 40px; padding: 0; border-radius: 50%; }
#player #consent { margin-top: 16px; }
#player #consent > p { font-size: 14px; line-height: 1.55; margin: 0; }
#player #consent .actions { margin-top: 18px; gap: 12px 18px; }
#player .player-navigation { align-items: end; }
.player-up-next { flex: 1 1 260px; min-width: 0; margin-right: auto; }
.continuous-choice { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); }
.continuous-choice input { accent-color: var(--accent); width: 16px; height: 16px; }
#player-next-title { margin: 8px 0 0; font-size: 14px; color: var(--accent); overflow-wrap: anywhere; line-height: 1.45; }
#player-auto-status { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
#player-auto-status:empty { display: none; }
.tonearm { transform-box: view-box; transform-origin: 700px 180px; animation: tonearm-travel 240s linear infinite; animation-play-state: paused; }
@keyframes tonearm-travel { 0% { transform: rotate(0); } 96%,99% { transform: rotate(25deg); } 100% { transform: rotate(0); } }
.about-mixer .meter-led { stroke: none; animation: meter-level 2.9s steps(3,end) infinite; animation-play-state: paused; }
.about-mixer .led-1 { animation-delay: -.7s; animation-duration: 2.3s; }
.about-mixer .led-2 { animation-delay: -1.4s; animation-duration: 3.7s; }
.about-mixer .led-3 { animation-delay: -.3s; animation-duration: 1.9s; }
@keyframes meter-level { 0%,100% { opacity: .18; } 35%,65% { opacity: 1; } 80% { opacity: .4; } }
.motion-running .tonearm, .motion-running .about-mixer .meter-led { animation-play-state: running; }
@media(max-width:760px) {
 .about-grid > .about-section-index { grid-row: 1; grid-column: 1; }
 .about-grid > .about-identity { grid-row: 2; grid-column: 1; }
 .about-grid > .about-copy { grid-row: 3; grid-column: 1; }
 .about-grid .about-identity .about-mark { width: min(85%,360px); }
 .dj-dossier { padding-bottom: 230px; }
 .dossier-headphones { width: 300px; right: 4%; bottom: -48px; opacity: .28; }
 .dj-brand-row { justify-content: center; gap: 25px; }
 .dj-brand { flex-basis: 125px; }
 .share-section > .eyebrow { text-align: center; justify-self: center; }
 .share-section > .share-links { justify-content: center; }
 #player .player-up-next { flex-basis: 100%; }
}
@media(prefers-reduced-motion:reduce) { .tonearm, .about-mixer .meter-led { animation: none !important; } }
@media(max-width:760px) {
 .share-section { grid-template-columns: minmax(0,1fr); }
 .share-section > .soundcloud-brand-link { grid-column: 1; grid-row: auto; justify-self: center; margin-top: 24px; }
}


/* Footer shares the exact outer boundaries of .share-section.shell. */
.site-footer.shell {
    width: 100%; max-width: var(--max);
    margin-inline: auto; padding-inline: 0;
}
/* Full-width muted brand ribbon; original assets retain their proportions. */
.dj-brands { width: 100%; max-width: none; margin: 0; padding: 32px 0; background: #142b31; border-block: 1px solid #65bec31a; }
.dj-brand-row { width: 100%; }
.dj-brand { flex: 0 1 160px; min-height: 42px; }
.dj-brand img { width: auto; height: 27px; max-width: 160px; object-fit: contain; }
.dj-brand img[alt="Serato"] { height: 23px; }
.dj-genre-panel > h3 {
    font-size: 10px; font-weight: 500; line-height: 1.5;
    letter-spacing: .16em; text-transform: uppercase; color: var(--accent);
}
/* Physical pivot at the bearing: outer groove to inner groove, no backwards reset. */
.tonearm { transform: rotate(-12deg); animation: tonearm-groove 1200s linear 1 forwards; animation-play-state: paused; }
@keyframes tonearm-groove { from { transform: rotate(-12deg); } to { transform: rotate(25deg); } }
.motion-running .tonearm { animation-play-state: running; }
/* Player's control row: align centers instead of lower edges. */
#player .player-navigation { align-items: center; gap: 20px 24px; }
#player .player-position { align-self: center; margin: 0; }
.continuous-choice { display: inline-flex; align-items: center; gap: 9px; line-height: 20px; }
.continuous-choice input { display: block; margin: 0; padding: 0; width: 16px; height: 16px; flex: 0 0 16px; }
.continuous-choice > span { display: block; line-height: 20px; }
.next-track-card { margin-top: 13px; border-left: 2px solid var(--accent); padding: 3px 0 3px 12px; }
.next-track-label { display: block; font-size: 10px; line-height: 1.4; text-transform: uppercase; letter-spacing: .16em; color: var(--accent); }
#player-next-title { margin: 5px 0 0; color: var(--ink); font-size: 15px; line-height: 1.4; }
@media(max-width:760px) {
 .about-grid > .about-copy { grid-column: 1; grid-row: 2; }
 .about-grid > .about-identity { grid-column: 1; grid-row: 3; border-bottom: 0; border-top: 1px solid #14343b26; padding: 32px 0 0; }
 .site-footer.shell { padding-inline: 22px; }
 .dj-brand { flex-basis: 125px; }
 .dj-brand img { max-width: 125px; }
}
@media(prefers-reduced-motion:reduce) { .tonearm { animation: none !important; transform: rotate(-12deg); } }


/* One full-width line above and below the brand ribbon */
main > .music-credit { border-bottom: 0; }
.dj-brands { border-top: 1px solid #33545c; border-bottom: 1px solid #33545c; }
.dj-brand-row { justify-content: center; gap: 26px 34px; }
.dj-brand { flex-basis: 150px; }
/* Up next and navigation share a centered row */
#player .player-navigation { align-items: center; }
#player .player-up-next { flex: 1 1 220px; }
#player .next-track-card { margin: 0; }
#player .player-position { align-self: center; }
#player .player-navigation-buttons { align-self: center; }
/* Slightly enlarge the compact widget including waveform and controls */
#player #player-frame iframe {
    width: 80%; max-width: none; height: 20px;
    transform: scale(1.25); transform-origin: top left;
    margin-bottom: 5px;
}
#player #player-frame { padding-block: 22px; }
/* Contiguous VU-meter segments, fast attack and slower release. */
.about-mixer .mixer-meters { stroke: none; }
.mixer-meters .meter-stack {
    clip-path: inset(62% 0 0 0);
    animation: vu-meter 3.2s linear infinite;
    animation-play-state: paused;
}
.mixer-meters .meter-channel-1 { animation-delay: -.15s; animation-duration: 3.2s; }
.mixer-meters .meter-channel-2 { animation-delay: -1.3s; animation-duration: 3.7s; }
.mixer-meters .meter-channel-3 { animation-delay: -1.45s; animation-duration: 3.7s; }
@keyframes vu-meter {
    0%,100% { clip-path: inset(62% 0 0 0); }
    5% { clip-path: inset(22% 0 0 0); }
    18% { clip-path: inset(48% 0 0 0); }
    23% { clip-path: inset(10% 0 0 0); }
    37% { clip-path: inset(40% 0 0 0); }
    43% { clip-path: inset(0% 0 0 0); }
    46% { clip-path: inset(10% 0 0 0); }
    63% { clip-path: inset(52% 0 0 0); }
    68% { clip-path: inset(23% 0 0 0); }
    84% { clip-path: inset(62% 0 0 0); }
}
.motion-running .mixer-meters .meter-stack { animation-play-state: running; }
@media(max-width:760px) {
 #player .player-up-next { flex: 1 1 200px; }
 #player .player-position { width: auto; flex-basis: auto; text-align: left; }
 .dj-brand { flex-basis: 125px; }
}
@media(max-width:520px) {
 #player .player-up-next { flex-basis: 100%; }
 #player .player-navigation { justify-content: space-between; }
}
@media(prefers-reduced-motion:reduce) {
 .mixer-meters .meter-stack { animation: none !important; clip-path: inset(35% 0 0 0); }
}


/* Equal intervals between six logo cells, across the full content width. */
.dj-brand-row { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 28px; }
.dj-brand { width: 100%; min-width: 0; min-height: 42px; }
.dj-brand img { max-width: 100%; width: auto; height: 26px; }
.dj-brand img[alt="Serato"] { height: 23px; }
.dj-brand img[alt="Sennheiser"] { height: auto; width: 160px; max-height: 26px; }
/* Stretch the right column to at least the square cover height.
   Longer content may grow naturally; the artwork is never cropped. */
@media(min-width:701px) {
 #player .player-layout { align-items: stretch; }
 #player .player-cover { align-self: center; }
 #player .player-detail { display: flex; flex-direction: column; justify-content: space-between; }
 #player .player-controls { margin-bottom: 0; }
}
/* Record input sits behind text and links; only the circular record captures input. */
.hero .phase-scene { z-index: 0; }
.hero .hero-content { position: relative; z-index: 1; pointer-events: none; }
.hero .hero-content a, .hero .hero-content button { pointer-events: auto; }
.hero.scratch-ready .vinyl-spin { animation: none !important; }
#scratch-surface { pointer-events: all; touch-action: none; cursor: grab; }
.is-scratching #scratch-surface { cursor: grabbing; }
#scratch-surface:focus-visible { outline: none; stroke: var(--accent); stroke-width: 3px; }
.hero-foot .scratch-hint { color: var(--muted); font-size: 12px; }
.hero-foot { flex-wrap: wrap; }
@media(max-width:1000px) {
 .dj-brand-row { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px 32px; }
}
@media(max-width:500px) {
 .dj-brand-row { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px 28px; }
 .hero-foot .scratch-hint { width: 100%; }
}


/* Keep the original compact text layout; adjust the square cover instead. */
@media(min-width:701px) {
 #player .player-layout { grid-template-columns: var(--modal-cover-size,300px) minmax(0,1fr); align-items: center; }
 #player .player-detail { display: block; }
 #player .player-cover { width: 100%; align-self: center; aspect-ratio: 1; }
}
.is-scratching .tonearm { animation-play-state: paused !important; }

/* Physical deck switch, positioned relative to the tonearm by vinyl-scratch.js. */
.turntable-start {
 position:absolute;z-index:3;left:auto;right:24px;top:220px;
 display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;
 width:96px;min-height:62px;padding:10px 12px;border:1px solid #7a9fa770;
 border-radius:5px;background:linear-gradient(145deg,#27434a,#10272d);
 color:#c6d7da;box-shadow:0 4px 0 #061317,0 6px 16px #0004;cursor:pointer;
}
.turntable-start[hidden] { display:none; }
.turntable-start:active { transform:translateY(2px);box-shadow:0 2px 0 #061317; }
.turntable-start:focus-visible { outline:2px solid var(--accent);outline-offset:5px; }
.turntable-start-label { font-size:10px;font-weight:600;letter-spacing:.08em;white-space:nowrap; }
.turntable-led { width:20px;height:3px;border-radius:2px;background:#78939770; }
.turntable-start[aria-pressed="true"] .turntable-led { background:var(--accent);box-shadow:0 0 9px #65bec399; }
.turntable-start[aria-busy="true"] { opacity:.6; }
.hero-foot { flex-wrap:nowrap;justify-content:space-between; }
.hero-foot #motion-toggle { display:none!important; }
.hero-foot .scroll-link { margin-left:auto;white-space:nowrap; }
/* Assets are cropped to their visible bounds. Equal space between actual marks. */
.dj-brand-row.shell { display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:32px;width:100%;margin-inline:auto; }
.dj-brand { width:auto;min-width:0;flex:0 0 auto;min-height:36px; }
.dj-brand img,.dj-brand img[alt="Sennheiser"] { display:block;width:160px;height:auto;max-height:none;max-width:none; }
.dj-brand img[alt="Serato"] { width:100px;height:auto; }
@media(max-width:1200px) {
 .dj-brand-row.shell { justify-content:center;gap:30px 40px; }
 .dj-brand img,.dj-brand img[alt="Sennheiser"] { width:140px; }
 .dj-brand img[alt="Serato"] { width:90px; }
}
@media(max-width:600px) {
 .turntable-start { width:84px;min-height:58px; }
 .dj-brand-row.shell { gap:28px 32px; }
 .dj-brand img,.dj-brand img[alt="Sennheiser"] { width:120px; }
 .dj-brand img[alt="Serato"] { width:84px; }
}

/* Deck switch in the normal flow: no overlap with the record or tonearm. */
.hero-foot { display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:20px; }
.hero-foot > .eyebrow { grid-column:1;grid-row:1;justify-self:start; }
.hero-foot > .turntable-start { position:static;inset:auto;grid-column:2;grid-row:1;justify-self:center;width:96px;min-height:62px;margin:0; }
.hero-foot > .scroll-link { grid-column:3;grid-row:1;justify-self:end;margin:0; }
@media(max-width:600px) {
 .hero-foot { grid-template-columns:minmax(0,1fr) auto;gap:22px 16px; }
 .hero-foot > .eyebrow { grid-column:1;grid-row:1; }
 .hero-foot > .scroll-link { grid-column:2;grid-row:1; }
 .hero-foot > .turntable-start { grid-column:1 / -1;grid-row:2; }
}

/* Unobtrusive text control matching the surrounding hero links. */
.hero-foot > .house-loop-link {
 position:static;grid-column:2;grid-row:1;justify-self:center;
 appearance:none;display:inline-flex;align-items:center;justify-content:center;
 width:auto;min-height:44px;margin:0;padding:0;
 border:0;border-radius:0;background:none;box-shadow:none;
 color:inherit;font:inherit;font-size:11px;line-height:1.5;
 letter-spacing:normal;text-transform:none;text-decoration:none;
 white-space:nowrap;cursor:pointer;transition:color .2s;
}
.hero-foot > .house-loop-link[hidden] { display:none; }
.hero-foot > .house-loop-link:hover,
.hero-foot > .house-loop-link[aria-pressed="true"] { color:var(--accent); }
.hero-foot > .house-loop-link:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
.hero-foot > .house-loop-link:disabled { opacity:.6;cursor:wait; }
@media(max-width:600px) {
 .hero-foot > .house-loop-link { grid-column:1 / -1;grid-row:2; }
}

/* Compact loop control, aligned with the existing hero footer links. */
.hero-foot { padding-block:16px; }
.hero-foot > .house-loop-link {
 min-height:34px;padding:6px 13px;
 border:1px solid #65bec359;border-radius:3px 12px 3px 12px;
 background:#65bec30a;color:#b7cdd0;font-size:11px;line-height:20px;
 transition:color .2s,border-color .2s,background .2s;
}
.hero-foot > .house-loop-link:hover {
 color:var(--accent);border-color:#65bec399;background:#65bec31a;
}
.hero-foot > .house-loop-link[aria-pressed="true"] {
 color:var(--accent);border-color:#65bec3b3;background:#65bec322;
}
@media(max-width:600px) {
 .hero-foot { row-gap:12px;padding-block:14px; }
}

/* Mobile hero footer: retain both labels and give the loop its own row. */
@media(max-width:760px) {
 .hero-foot { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:16px;row-gap:12px;padding-block:14px; }
 .hero-foot > .eyebrow { display:block;grid-column:1;grid-row:1;justify-self:start;min-width:0;margin:0;font-size:10px;line-height:1.6;letter-spacing:.1em;white-space:normal;overflow-wrap:normal; }
 .hero-foot > .scroll-link { grid-column:2;grid-row:1;justify-self:end;align-self:center;margin:0;font-size:12px;white-space:nowrap; }
 .hero-foot > .house-loop-link { grid-column:1 / -1;grid-row:2;justify-self:center;margin:0; }
}

#house-loop-status { grid-column:1 / -1;color:var(--muted);font-size:12px;line-height:1.5; }
#house-loop-status[hidden] { display:none; }
@media(max-width:760px) {
 .hero-foot > .house-loop-link { justify-self:start;pointer-events:auto;touch-action:manipulation; }
 #house-loop-status { grid-row:3; }
}

/* Phones: a clean hero footer, with decorative vinyl and no audio control. */
@media(max-width:760px), (pointer:coarse) and (max-width:1000px) {
 .hero-foot > .house-loop-link, #house-loop-status { display:none!important; }
 #scratch-surface { pointer-events:none!important; }
 .hero-foot { grid-template-columns:minmax(0,1fr) auto;row-gap:0; }
 .hero-foot > .eyebrow { display:block;grid-column:1;grid-row:1; }
 .hero-foot > .scroll-link { grid-column:2;grid-row:1; }
}

/* Full-width local transport, backed by the consent-gated SoundCloud Widget API. */
#player-frame { position:relative; }
#player-frame iframe.transport-engine { position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;transform:none!important;clip-path:inset(50%);overflow:hidden;pointer-events:none; }
.zeisman-transport { display:grid;grid-template-columns:44px minmax(0,1fr);align-items:center;gap:12px 14px;width:100%; }
.zeisman-transport[hidden] { display:none; }
.transport-toggle { display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--accent);border-radius:50%;background:#65bec317;color:var(--accent);font-size:18px;cursor:pointer; }
.transport-toggle:disabled { opacity:.5;cursor:wait; }
#player .transport-title { margin:0;min-width:0;font-size:16px;line-height:1.4;font-weight:500;overflow-wrap:anywhere; }
.transport-seek { grid-column:1 / -1;display:block;width:100%;min-width:0;height:28px;margin:0;padding:0;accent-color:var(--accent);cursor:pointer; }
.transport-fallback { grid-column:1 / -1;justify-self:start;border:0;background:none;color:var(--muted);font-size:11px;padding:3px 0;cursor:pointer; }
.transport-toggle:focus-visible,.transport-seek:focus-visible,.transport-fallback:focus-visible { outline:2px solid var(--accent);outline-offset:4px; }
@media(max-width:600px) { #player .transport-title { font-size:15px; } }

/* The view switch stays available outside either player surface. */
#player-frame > .transport-fallback { display:block;width:fit-content;margin-top:9px; }
#player .transport-toggle { display:flex;align-items:center;justify-content:center;flex-shrink:0;line-height:0; }
#player .transport-toggle svg { display:block;width:20px;height:20px;flex:0 0 20px;margin:0;transform:none;pointer-events:none; }