/* No overscroll bounce or scroll chaining anywhere (page or inner scroll areas). */
html,body,.q-main{overscroll-behavior:none}  /* real scroll areas only: on every element it would block wheel scrolling over overflow:hidden boxes (e.g. an open accordion) */
/* =====================================================================
   Design 2 · Quiet — editorial, flat, printed. (designs/quiet)
   Shell runtime contract: data-* attributes only; this file styles them.
   ===================================================================== */
@font-face{font-family:"Basier Circle";src:url(/fonts/BasierCircle-Regular.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#f3f1ec;--ink:#1b1b1a;--accent:#1d4a68;--accent-ink:#1d4a68;--accent-dk:#163a52;--pop:#e59c98;--dark:#141414;
  --bg:var(--paper);--fg:var(--ink);--soft:#6d6b66;--rule:rgba(27,27,26,.16);
  --ease:cubic-bezier(.16,1,.3,1);--ease-in:cubic-bezier(.4,0,1,1);
  --g:clamp(22px,4.2vw,80px);           /* page gutter: 22 (phone) → 80 (1920) */
  --bar:96px;--now:92px;
  --display:"Basier Circle","Helvetica Neue",Helvetica,Arial,sans-serif;
  --body:"Helvetica Neue",Helvetica,Arial,sans-serif;
  color-scheme:light;
}
html[data-dark]{--bg:var(--dark);--fg:var(--paper);--soft:rgba(243,241,236,.6);--rule:rgba(243,241,236,.16);color-scheme:dark}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{background:var(--bg);color:var(--fg);font-family:var(--display);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;transition:background-color .8s var(--ease),color .8s var(--ease)}
a,button{color:inherit;text-decoration:none;font:inherit;background:none;border:0;cursor:pointer;padding:0;text-align:inherit;-webkit-tap-highlight-color:transparent}
p,.q-body,input,small{font-family:var(--body)}
img{display:block;max-width:100%}
h1,h2,h3{font-weight:400;margin:0}
:focus-visible{outline:1px solid currentColor;outline-offset:4px}
.q-skip{position:absolute;left:12px;top:-60px;z-index:100;padding:10px 14px;background:var(--fg);color:var(--bg);font-family:var(--body);font-size:14px}
.q-skip:focus{top:12px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* type helpers */
.lbl{font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.ph{font-family:var(--body);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--soft);opacity:.8}
.ul{background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%;padding-bottom:3px;transition:background-size .45s var(--ease)}
@media (hover:hover) and (pointer:fine){.ul:hover{background-size:0 1px;background-position:100% 100%}}
.arw{display:inline-flex;align-items:center;gap:10px}
.arw svg{flex:none;transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){.arw:hover svg{transform:translateX(4px)}}
/* ↗ (external) nudges up-right instead of right */
@media (hover:hover) and (pointer:fine){.arw:hover svg.q-ext,.q-btn:hover svg.q-ext{transform:translate(2px,-2px)}}
.scroll{overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;overscroll-behavior:contain}
.q-h1{font-size:clamp(40px,3.2vw,56px);line-height:1;letter-spacing:-.02em}
.q-ico{width:16px;height:16px;flex:none}

/* ---------------------------------------------------------------- shell */
.q-shell{position:relative;height:100vh;height:100dvh;min-height:560px;display:flex;flex-direction:column;padding:0 var(--g);overflow:hidden}
.q-bar{position:relative;z-index:30;flex:none;height:var(--bar);display:grid;grid-template-columns:minmax(160px,320px) 1fr minmax(160px,320px);align-items:center;border-bottom:1px solid var(--rule);transition:border-color .8s var(--ease)}
.q-logo{position:relative;display:block;width:clamp(170px,11.5vw,220px);aspect-ratio:220/18}
.q-logo img{position:absolute;inset:0;width:100%;height:auto;transition:opacity .6s ease}
.q-logo .on-dark{opacity:0}
html[data-dark] .q-logo .on-light{opacity:0}
html[data-dark] .q-logo .on-dark{opacity:1}
.q-nav{position:relative;justify-self:center;display:flex}
.q-nav a{display:flex;align-items:center;justify-content:center;height:40px;padding:0 clamp(14px,1.25vw,24px);font-size:16px;color:var(--soft);white-space:nowrap;transition:color .4s}
.q-nav a[aria-current="page"]{color:var(--fg)}
@media (hover:hover) and (pointer:fine){.q-nav a:hover{color:var(--fg)}}
.q-ind{position:absolute;left:0;bottom:2px;height:1px;width:48px;background:currentColor;opacity:0;transform:translateX(0);transition:transform .6s var(--ease),width .6s var(--ease),opacity .3s}
.q-ind[data-on]{opacity:1}
.q-menu-btn{justify-self:end;display:flex;align-items:center;gap:10px;height:44px;font-size:16px}
.q-menu-btn svg{transition:transform .45s var(--ease)}
html[data-menu] .q-menu-btn svg{transform:rotate(45deg)}
.q-menu-btn .w-close{display:none}
html[data-menu] .q-menu-btn .w-open{display:none}
html[data-menu] .q-menu-btn .w-close{display:inline}

.q-main{scroll-padding-top:12px;position:relative;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;outline:0}
.q-main > .q-route{height:100%}

/* "Now" line: desktop sits at the bottom, phones get the strip under the bar. Home only. */
.q-now{flex:none;display:flex;align-items:center;gap:clamp(24px,2.9vw,56px);overflow:hidden;white-space:nowrap;font-size:15px;transition:height .5s var(--ease),opacity .35s ease,border-color .8s}
.q-now-foot{height:0;opacity:0;border-top:1px solid transparent}
html[data-route="home"] .q-now-foot{height:var(--now);opacity:1;border-top-color:var(--rule)}
.q-now a,.q-now span{flex:none}
.q-now .q-now-end{margin-left:auto;align-self:stretch;display:flex;align-items:center;padding-left:clamp(20px,2vw,32px);border-left:1px solid var(--rule)}
.q-now-top{display:none}
/* Home marquee (Admin → Marquee): a big type band, items joined by the S+S "+" */
.q-mq{flex:1 1 auto;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
.q-mq-track{--mqg:clamp(18px,1.7vw,32px);display:inline-flex;align-items:center;gap:0;will-change:transform;font-family:var(--display);font-size:clamp(24px,2.3vw,42px);letter-spacing:-.025em;line-height:1}
.q-mq-item a{transition:color .2s var(--ease)}
@media (hover:hover) and (pointer:fine){.q-mq-item a:hover{color:var(--accent)}}
.q-mq-sep{color:var(--accent);font-weight:300;transform:translateY(-.04em);margin-inline:var(--g,var(--mqg))}
.q-mq-item .q-xo .q-ico{width:.62em;height:.62em}
html[data-dark] .q-mq-sep{color:var(--pop)}
@media (prefers-reduced-motion:reduce){.q-mq{-webkit-mask-image:none;mask-image:none}}
/* Admin → Marquee text size (when set) overrides the theme's sizes; phones get the smaller --mq-fs-sm */
.q-mq-sized .q-mq-track{font-size:var(--mq-fs)!important}
@media (max-width:820px){.q-mq-sized .q-mq-track{font-size:var(--mq-fs-sm)!important}}

/* Menu: calm full-width drop panel + blurred scrim */
.q-scrim{position:absolute;left:0;right:0;bottom:0;top:var(--bar);z-index:20;background:rgba(243,241,236,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;pointer-events:none;transition:opacity .45s ease}
html[data-dark] .q-scrim{background:rgba(20,20,20,.45)}
html[data-menu] .q-scrim{opacity:1;pointer-events:auto}
.q-menu{position:absolute;top:var(--bar);left:0;right:0;z-index:25;padding:40px var(--g) 56px;background:var(--bg);border-bottom:1px solid var(--rule);display:grid;grid-template-columns:minmax(160px,320px) minmax(0,1fr) minmax(160px,320px);gap:clamp(32px,4.2vw,80px);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s .6s,background-color .8s var(--ease)}
html[data-menu] .q-menu{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .6s var(--ease),visibility 0s 0s,background-color .8s var(--ease)}
.q-menu-items,.q-menu-side{opacity:0;transform:translateY(-12px);transition:opacity .4s ease .08s,transform .6s var(--ease) .04s}
html[data-menu] .q-menu-items,html[data-menu] .q-menu-side{opacity:1;transform:none}
.q-mi{display:flex;align-items:baseline;justify-content:space-between;width:100%;padding:16px 0;font-size:clamp(28px,2.1vw,40px);letter-spacing:-.02em;line-height:1.1;border-bottom:1px solid var(--rule);transition:color .3s}
.q-mi[aria-current="page"]{color:var(--accent)}
.q-mi.q-mob-only{display:none}
@media (hover:hover) and (pointer:fine){.q-mi:hover{color:var(--accent)}}
html[data-dark] .q-mi[aria-current="page"]{color:var(--pop)}
@media (hover:hover) and (pointer:fine){html[data-dark] .q-mi:hover{color:var(--pop)}}
.q-menu-side{padding-top:22px;display:flex;flex-direction:column;gap:14px;font-size:17px}
.q-legal{display:flex;gap:18px;flex-wrap:wrap;margin-top:6px;font-family:var(--body);font-size:13px;color:var(--soft)}
.q-copy{margin-top:18px;font-family:var(--body);font-size:13px;color:var(--soft)}
/* Narrower desktops: the "Menu" label column shrinks to its text so the links never collide */
@media (min-width:821px) and (max-width:1280px){.q-menu{grid-template-columns:auto minmax(0,1fr) minmax(220px,320px)}}

/* Mobile bottom text nav */
.q-tabs{display:none}

/* ---------------------------------------------------------------- motion: leave → swap → enter */
@keyframes q-in{from{opacity:0;transform:translateY(22px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes q-out{to{opacity:0;transform:translateY(-14px);filter:blur(8px)}}
.in{animation:q-in .8s var(--ease) both;animation-delay:var(--d,0ms)}
[data-main][data-leaving]{animation:q-out .28s var(--ease-in) both}
@keyframes q-kb{from{transform:scale(1.06)}to{transform:scale(1)}}
.kb{animation:q-kb 2.4s var(--ease) both}
@keyframes q-pulse{0%{box-shadow:0 0 0 0 rgba(229,156,152,.7)}70%{box-shadow:0 0 0 10px rgba(229,156,152,0)}100%{box-shadow:0 0 0 0 rgba(229,156,152,0)}}
.q-dot{display:inline-block;width:9px;height:9px;border-radius:999px;background:var(--pop);animation:q-pulse 2s ease-out infinite}

/* ---------------------------------------------------------------- modals: quiet paper panels (sheets on phones) */
.q-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4.2vw,80px)}
.q-modal[hidden]{display:none}
.q-modal-scrim{position:absolute;inset:0;background:rgba(27,27,26,.4);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.q-panel{position:relative;width:min(1280px,100%);max-height:100%;overflow:auto;padding:clamp(28px,2.9vw,56px);background:var(--paper);color:var(--ink);--soft:#6d6b66;--rule:rgba(27,27,26,.16);--accent:var(--accent-ink);box-shadow:0 40px 80px -40px rgba(0,0,0,.45)}
.q-panel.narrow{width:min(760px,100%);border-top:2px solid var(--ink);display:flex;flex-direction:column;gap:22px}
.q-panel.split{display:grid;grid-template-columns:minmax(0,520px) minmax(0,1fr);gap:clamp(32px,3.75vw,72px)}
.q-panel h2{font-size:clamp(34px,2.7vw,52px);line-height:1.06;letter-spacing:-.02em}
.q-panel p{margin:0;font-size:19px;line-height:1.65;color:var(--soft)}
.q-close{position:absolute;top:22px;right:26px;display:flex;align-items:center;gap:8px;font-size:15px}
@keyframes q-fade{from{opacity:0}}
@keyframes q-pop{from{opacity:0;transform:translateY(24px);filter:blur(6px)}}
@keyframes q-fadeout{to{opacity:0}}
@keyframes q-popout{to{opacity:0;transform:translateY(18px);filter:blur(6px)}}
.q-modal[data-state="open"] .q-modal-scrim{animation:q-fade .4s ease both}
.q-modal[data-state="open"] .q-panel{animation:q-pop .6s var(--ease) both}
.q-modal[data-state="closing"] .q-modal-scrim{animation:q-fadeout .34s ease both}
.q-modal[data-state="closing"] .q-panel{animation:q-popout .34s var(--ease-in) both}

/* ---------------------------------------------------------------- home: immersive */
.q-home{position:relative;height:100%;margin-right:calc(-1 * var(--g));display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch}
.q-home-copy{display:flex;flex-direction:column;justify-content:center;padding-right:clamp(32px,5vw,96px);min-width:0;padding-block:24px}
.q-home h1{margin-top:22px;font-size:clamp(56px,6.67vw,128px);line-height:.98;letter-spacing:-.035em;max-width:9ch}
.q-home-intro{margin:36px 0 0;font-size:clamp(18px,1.15vw,22px);line-height:1.55;color:var(--soft);max-width:38ch}
.q-actions{display:flex;align-items:center;gap:16px;margin-top:clamp(32px,2.7vw,52px);flex-wrap:wrap}
.q-btn{display:inline-flex;align-items:center;gap:12px;height:60px;padding:0 28px;font-size:18px;border:1px solid currentColor;transition:background-color .35s var(--ease),color .35s var(--ease),border-color .35s}
.q-btn svg{transition:transform .35s var(--ease)}
@media (hover:hover) and (pointer:fine){.q-btn:hover svg{transform:translateX(4px)}}
@media (hover:hover) and (pointer:fine){.q-btn:hover{background:var(--fg);color:var(--bg)}}
.q-btn.fill{background:var(--accent);border-color:var(--accent);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.q-btn.fill:hover{background:var(--accent-dk);border-color:var(--accent-dk)}}
.q-btn.text{border-color:transparent;padding:0 8px;background-image:linear-gradient(currentColor,currentColor);background-size:calc(100% - 16px) 1px;background-position:8px 70%;background-repeat:no-repeat}
@media (hover:hover) and (pointer:fine){.q-btn.text:hover{background-color:transparent;color:var(--accent)}}
.q-home-art{margin:0;height:100%;aspect-ratio:1;position:relative;overflow:hidden;max-width:52vw;background:#e4e0d8}
.q-home-art img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- music */
/* Music: one scrolling column (title, intro, every release) that starts partway down; artwork fixed on the right */
.q-music{height:100%;display:grid;grid-template-columns:minmax(0,1fr) clamp(300px,29vw,560px);gap:0 clamp(48px,6.25vw,120px);align-items:center}
.q-mcol{height:100%;min-height:0;overflow-y:auto;padding:clamp(72px,16vh,180px) 8px 72px 0}
.q-mhead{display:grid;grid-template-columns:minmax(0,auto) minmax(0,1fr);align-items:baseline;gap:20px 48px;margin-bottom:32px}
.q-mhead h1{margin:0;font-size:clamp(48px,3.75vw,72px);line-height:1.04;letter-spacing:-.02em}
.q-mhead p{margin:0;font-size:17px;line-height:1.6;color:var(--soft);max-width:44ch}
.q-aside{align-self:stretch;display:flex;flex-direction:column;justify-content:center;gap:28px}
.q-aside p{margin:0;font-size:17px;line-height:1.6;color:var(--soft);max-width:28ch}
.q-rl{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.q-rl > li{border-bottom:1px solid var(--rule);transition:opacity .3s var(--ease)}
.q-rrow{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:baseline;gap:16px}
/* Title, subtitle and tag are flex items: they wrap whole (the subtitle drops to its own line rather than splitting) and the gap keeps wrapped lines flush left */
.q-rrow > a{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;padding:14px 0;min-width:0}
.q-rrow .ty{white-space:nowrap}
.q-rcell{align-self:center;display:flex;justify-content:flex-end;align-items:center;gap:12px}
.q-rl-ext{display:grid;place-items:center;width:24px;height:24px;color:var(--soft);transition:color .2s var(--ease)}
/* Preview play / pause (outlined circle); only one plays at a time */
.q-play{display:inline-grid;place-items:center;width:28px;height:28px;padding:0;border:0;background:none;color:var(--soft);cursor:pointer;transition:color .2s var(--ease),opacity .2s}
.q-play .i-pause{display:none}
.q-play[aria-pressed="true"]{color:var(--accent)}
.q-play[aria-pressed="true"] .i-play{display:none}
.q-play[aria-pressed="true"] .i-pause{display:grid}
/* The icon wrappers are boxes the size of the icon (not text lines), so the icon sits dead centre in the button */
.q-play .i-play{display:grid}
.q-play .i-play,.q-play .i-pause{place-items:center;line-height:0;font-size:0}
.q-play .i-play > svg,.q-play .i-pause > svg{display:block}
.q-play:focus-visible{color:var(--accent)}
.q-play:disabled{opacity:.3;cursor:default}
.q-play[data-loading] .q-ico{animation:q-pulse 1s ease-in-out infinite}
@keyframes q-pulse{50%{opacity:.35}}
@media (hover:hover) and (pointer:fine){.q-play:not(:disabled):hover{color:var(--accent)}}
.q-tl .q-play{width:20px;height:20px;margin-left:8px;vertical-align:-4px}
/* Bigger play targets: the icon scales with the button (negative margins keep rows the same height and edges aligned) */
/* Row icons share one size: play, + (tracklist) and ↗ (link) */
.q-rcell{--ri:22px}
.q-rcell .q-play{width:34px;height:34px;margin:-6px}
.q-rcell .q-play .q-ico,.q-rcell .q-rl-ext .q-ico,.q-rcell .q-rl-tog .q-ico,.q-rcell .q-m-ind .q-ico{width:var(--ri);height:var(--ri)}
.q-rcell .q-rl-ext,.q-rcell .q-rl-tog{width:34px;height:34px;margin:-6px}
.q-tl .q-play{flex:none;width:28px;height:28px;margin:-6px 0 -6px 6px}
/* Track rows: number, title, play button centred on the text line */
.q-tl li:not(.sec){display:flex;align-items:center}
.q-tl li:not(.sec)::before{flex:none;content:counter(tl) ".";margin-right:.3em}
.q-tl .q-play .q-ico{width:20px;height:20px}
@media (max-width:820px){
  .q-rcell{--ri:20px}
  .q-rcell .q-play,.q-rcell .q-rl-ext,.q-rcell .q-rl-tog{width:36px;height:36px;margin:-8px}
  .q-tl .q-play .q-ico{width:19px;height:19px}
}
/* Pre-release: Presave next to the +; hidden from the row while its tracklist is open (the full-width button shows) */
.q-presave{display:inline-flex;align-items:center;height:26px;padding:0 9px;border:1px solid var(--accent);font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);white-space:nowrap;transition:background-color .2s,color .2s}
@media (hover:hover) and (pointer:fine){.q-presave:hover{background:var(--accent);color:var(--paper)}}
.q-rl li[data-open] .q-presave.has-tl{display:none}
.q-presave-now{display:flex;justify-content:center;width:calc(100% - 88px);margin:4px 0 16px 88px}
.q-rl-ext:focus-visible{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.q-rl-ext:hover{color:var(--accent)}}
@media (min-width:821px){.q-rrow > a{cursor:pointer}}
.q-m-ind,.q-mpanel{display:none}
.q-rl-tog{align-self:center;display:grid;place-items:center;width:24px;height:24px;padding:0;border:0;background:none;color:var(--soft);cursor:pointer;transition:color .2s var(--ease)}
.q-rl-tog:focus-visible{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.q-rl-tog:hover{color:var(--accent)}}
.q-rl-tog .q-ico{transition:transform .4s var(--ease)}
.q-rl li[data-open] .q-rl-tog .q-ico{transform:rotate(45deg)}
.q-rl li[data-open] .q-acc{grid-template-rows:1fr}
.q-rl li[data-open] .q-acc > div{visibility:visible;transition:visibility 0s 0s}
.q-tl{margin:0;padding:0 0 18px 88px;list-style:none;counter-reset:tl;font-family:var(--body);font-size:16px;line-height:1.85;color:var(--soft)}
.q-tl li{counter-increment:tl;border:0}
.q-tl li::before{content:counter(tl) ". ";font-variant-numeric:tabular-nums}
.q-tl li.sec{counter-increment:none;margin:12px 0 2px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.q-tl li.sec:first-child{margin-top:0}
.q-tl li.sec::before{content:none}
.q-rl .t{font-size:clamp(26px,1.9vw,36px);letter-spacing:-.02em;line-height:1.15;transition:color .3s var(--ease)}
.q-rl .s{font-family:var(--body);font-size:18px;color:var(--soft)}
.q-tag{display:inline-block;align-self:center;padding:3px 6px 2px;border:1px solid currentColor;font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.14em;line-height:1.2;text-transform:uppercase;white-space:nowrap;color:var(--soft)}
.q-tag.is-presave{color:var(--accent)}
/* Desktop: the selected release (click) is in accent; hovering only hints, it doesn't select. */
.q-rl li[data-active] .t{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.q-rl li:not([data-active]) .q-rrow > a:hover .t{opacity:.72}}
.q-feat{margin:0}
.q-feat-art{position:relative;width:100%;aspect-ratio:1;background:#e4e0d8;overflow:hidden}
.q-feat-art img[hidden]{display:none}
.q-feat-art img{width:100%;height:100%;object-fit:cover;transition:opacity .25s ease}
.q-feat figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin-top:16px}
.q-feat .q-feat-title{font-size:20px}
.q-feat-head{display:flex;flex-direction:column;gap:6px;min-width:0}
.q-feat-date[hidden]{display:none}
.q-plat{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:0 20px;margin:18px 0 0;border-top:1px solid var(--rule)}
.q-plat a{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--rule);font-family:var(--body);font-size:15px;color:var(--soft);transition:color .2s var(--ease)}
.q-plat a:focus-visible{color:var(--accent)}
@media (hover:hover) and (pointer:fine){.q-plat a:hover{color:var(--accent)}}
.q-plat .q-ico{flex:none;width:16px;height:16px}
.q-plat a.q-xl{gap:10px}
.q-plat a .q-xo{margin-left:auto}
.q-plat a .q-xo .q-ico{width:12px;height:12px}
.q-plat[hidden]{display:none}

/* ---------------------------------------------------------------- Dialekt (dark) */
/* three columns: info · artwork (centred) · episode list; info and list share the same top line, the list column scrolls */
.q-radio{--q-top:clamp(72px,16vh,180px);height:100%;display:grid;grid-template-columns:minmax(0,.95fr) minmax(220px,.8fr) minmax(0,1.35fr);gap:0 clamp(40px,4.2vw,88px);align-items:stretch}
.q-radio-art{margin:0;align-self:center;width:100%;aspect-ratio:1;background:rgba(255,255,255,.04);overflow:hidden}
.q-radio-art img{width:100%;height:100%;object-fit:cover;display:block;transition:opacity .3s var(--ease)}
/* Schedule lines under the description */
.q-sched{margin:24px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px 24px}
.q-sched > div{display:grid;gap:4px;padding-left:14px;border-left:1px solid var(--pop)}
.q-sched dd{margin:0;font-size:clamp(16px,1vw,19px);line-height:1.4;color:var(--fg)}
/* Two layouts. Desktop (>820): info with the artwork under the schedule | episodes. Phones: see the phone block. */
.q-art-inline{display:none}
@media (min-width:821px){
  .q-radio{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .q-radio > .q-radio-art{display:none}
  /* Size set by the page script (fitRadio) to keep the column inside the window; this is the no-script fallback */
  .q-art-inline{display:block;flex:none;align-self:flex-start;margin-top:28px;width:min(100%,max(160px,calc(100svh - 600px)),420px)}
  .q-art-inline[hidden]{display:none}
}
.q-radio-info{display:flex;flex-direction:column;justify-content:flex-start;padding:var(--q-top) 0 48px;min-height:0}
.q-radio-info h1{margin-top:14px;font-size:clamp(48px,3.75vw,72px);line-height:1.04;letter-spacing:-.02em}
.q-radio-info p{margin:24px 0 0;font-size:clamp(17px,1.05vw,20px);line-height:1.6;color:var(--soft)}
.q-listen{display:flex;flex-direction:column;gap:12px;margin-top:12px;font-size:18px}
.q-listen a{align-self:flex-start}
/* ↗ after external text links (Listen on, schedule): marks a new tab; nudges up-right on hover */
.q-xl{display:inline-flex;align-items:center;gap:10px}
.q-xo{display:inline-grid;place-items:center;margin-left:-4px;color:var(--soft);opacity:.85}
.q-xo .q-ico{transition:transform .3s var(--ease)}
.q-listen .arw:hover svg{transform:none}
@media (hover:hover) and (pointer:fine){.q-xl:hover .q-xo{color:inherit;opacity:1}.q-xl:hover .q-xo .q-ico{transform:translate(2px,-2px)}}
@media (hover:hover) and (pointer:fine){.q-xl-in:hover .q-xo .q-ico{transform:translateX(3px)}}
.q-eps{scroll-padding-top:44px;min-height:0;height:100%;padding:var(--q-top) 8px 72px 0;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 40px,#000 calc(100% - 40px),transparent 100%)}
.q-radio .q-acc-body{grid-template-columns:1fr;gap:22px}
.q-ep-art{display:none;width:120px;aspect-ratio:1;object-fit:cover;background:rgba(255,255,255,.04)}
.q-more[data-auto]{display:inline-block;margin-top:24px}
.q-more[data-auto][aria-busy]{opacity:.6;pointer-events:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.q-eps-head{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;padding-bottom:12px;border-bottom:1px solid currentColor}
.q-filt{display:flex;gap:18px;flex-wrap:wrap;margin:0;padding:0;border:0}
.q-filt label{display:inline-flex;align-items:center;gap:7px;font-family:var(--body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--soft);cursor:pointer}
.q-filt input{appearance:none;-webkit-appearance:none;width:12px;height:12px;margin:0;border:1px solid currentColor;display:grid;place-items:center;cursor:pointer}
.q-filt input:checked{background:var(--fg);border-color:var(--fg)}
.q-filt input:checked::after{content:"";width:6px;height:3px;border:solid var(--bg);border-width:0 0 1.5px 1.5px;transform:translateY(-1px) rotate(-45deg)}
.q-filt input:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.q-filt input:checked + span{color:var(--fg)}
/* Music filters stick under the bar while the list scrolls (like the Dialekt episode filters) */
.q-mfilt{margin:0;padding:12px 0 16px;position:sticky;top:0;z-index:3;background:var(--bg)}
html[data-route=music] .q-main{scroll-padding-top:56px}
.q-rl > li[hidden]{display:none}
[data-ep-results][aria-busy="true"]{opacity:.5;transition:opacity .2s}
.q-eplist{list-style:none;margin:0;padding:0}
.q-ep{border-bottom:1px solid var(--rule)}
.q-ep-btn .d{white-space:nowrap}
.q-ep-btn{width:100%;display:grid;grid-template-columns:128px minmax(0,1fr) 20px;align-items:baseline;gap:16px;padding:18px 0;text-align:left}
.q-ep-btn .t{font-size:19px;transition:transform .4s var(--ease),color .3s}
@media (hover:hover) and (pointer:fine){.q-ep-btn:hover .t{transform:translateX(8px)}}
.q-ep-btn[aria-expanded="true"] .t{color:var(--pop)}
.q-ep-btn .t .st{display:block;margin-top:3px;font-family:var(--body);font-size:14px;line-height:1.35;color:var(--soft)}
.q-ep-btn svg{align-self:center;transition:transform .4s var(--ease)}
.q-ep-btn[aria-expanded="true"] svg{transform:rotate(45deg)}
.q-acc{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.q-acc > div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .5s}
.q-ep[data-open] .q-acc{grid-template-rows:1fr}
.q-ep[data-open] .q-acc > div{visibility:visible;transition:visibility 0s 0s}
.q-acc-body{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:40px;padding:4px 0 28px 144px}
.q-acc-body p{margin:10px 0 0;font-size:16px;line-height:1.6;color:var(--soft);white-space:pre-line}
.q-acc-body ol{margin:10px 0 0;padding:0;list-style:none;counter-reset:trk;font-family:var(--body);font-size:15px;line-height:1.75;color:var(--soft)}
/* Numbers drawn inside the box (a normal list puts them in the left margin, where the accordion clips them) */
.q-acc-body ol:not(.ts) li{counter-increment:trk;display:grid;grid-template-columns:2.4em minmax(0,1fr);column-gap:6px}
.q-acc-body ol:not(.ts) li::before{content:counter(trk) ".";font-variant-numeric:tabular-nums;text-align:right;opacity:.75}
/* timestamped tracklists: the time is the marker, no numbers */
.q-acc-body ol.ts{list-style:none;padding:0}
.q-acc-body ol.ts li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:12px}
.q-acc-body .tm{font-family:var(--mono,"Geist Mono",ui-monospace,monospace);font-size:12px;letter-spacing:.04em;color:var(--soft);opacity:.8;padding-top:2px}
.q-ep-links{display:flex;gap:24px;flex-wrap:wrap;margin-top:10px;font-size:16px}
.q-more{margin-top:24px;font-size:16px}

/* ---------------------------------------------------------------- merch */
.q-merch{height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(32px,2.9vw,56px);padding-block:32px}
.q-head3{display:grid;grid-template-columns:clamp(200px,16.7vw,320px) minmax(0,1fr) auto;gap:clamp(32px,4.2vw,80px);align-items:baseline}
.q-head3 p{margin:0;font-size:17px;line-height:1.6;color:var(--soft)}
.q-grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.1vw,40px)}
.q-hrow{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:clamp(150px,calc((100svh - 370px) / 2 * .72),300px);gap:clamp(20px,2.4vh,32px) clamp(20px,2.1vw,40px);overflow-x:auto;overflow-y:hidden;overscroll-behavior:none;scrollbar-width:thin;scrollbar-color:var(--rule) transparent;padding-bottom:14px;outline:none}
.q-hrow::-webkit-scrollbar{height:4px}.q-hrow::-webkit-scrollbar-thumb{background:var(--rule)}
.q-card{display:flex;flex-direction:column;gap:14px}
.q-stock{position:absolute;top:12px;right:12px;padding:5px 9px 4px;border-radius:999px;background:rgba(241,239,234,.92);color:var(--ink,#141414);font-family:var(--body);font-size:10px;font-weight:500;letter-spacing:.12em;line-height:1.2;text-transform:uppercase;white-space:nowrap}
.q-stock.is-preorder{background:var(--accent);color:#f1efea}
.q-stock.is-limited{background:var(--pop,#e59c98);color:#141414}
.q-stock.is-sold_out{background:rgba(20,20,20,.72);color:#f1efea}
.q-card .im{position:relative;display:block;aspect-ratio:4/5;background:#e4e0d8;overflow:hidden;transition:opacity .4s}
.q-card .im img{width:100%;height:100%;object-fit:cover}
@media (hover:hover) and (pointer:fine){.q-card:hover .im{opacity:.86}}
.q-card .cap{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-top:12px;border-top:1px solid var(--rule)}
.q-card .cap .n{font-size:19px}
.q-empty{padding:40px 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);font-family:var(--body);font-size:17px;color:var(--soft)}

/* ---------------------------------------------------------------- links */
.q-links{height:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 clamp(40px,5vw,96px);padding:56px 0 48px}
.q-links-left{display:flex;flex-direction:column;gap:36px;min-height:0}
.q-fcard{display:grid;grid-template-columns:clamp(160px,14.6vw,280px) minmax(0,1fr);gap:36px;align-items:end;padding-bottom:36px;border-bottom:1px solid var(--rule)}
.q-fcard:last-child{border-bottom:0}
.q-fcard .im{display:block;aspect-ratio:1;background:#e4e0d8;overflow:hidden}
.q-fcard .im img{width:100%;height:100%;object-fit:cover}
.q-fcard .tx{display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.q-fcard .n{font-size:clamp(28px,2vw,38px);line-height:1.08;letter-spacing:-.02em}
.q-fcard .s{font-family:var(--body);font-size:17px;color:var(--soft)}
.q-fcard .c{margin-top:10px;font-size:17px;color:var(--accent)}
.q-llist{min-height:0;padding-right:12px;border-top:1px solid var(--rule)}
.q-lk{display:grid;grid-template-columns:96px minmax(0,1fr) auto;align-items:center;gap:24px;padding:18px 0;border-bottom:1px solid var(--rule)}
.q-lk .th{width:96px;height:96px;background:#e4e0d8;overflow:hidden}
.q-lk .th img{width:100%;height:100%;object-fit:cover}
.q-lk .tl{transition:transform .4s var(--ease);min-width:0}
@media (hover:hover) and (pointer:fine){.q-lk:hover .tl{transform:translateX(8px)}}
.q-lk .n{display:block;font-size:clamp(19px,1.25vw,24px)}
.q-lk .s{font-family:var(--body);font-size:15px;color:var(--soft)}
.q-lk .c{font-size:15px;white-space:nowrap}

/* ---------------------------------------------------------------- tour */
.q-tour{height:100%;display:flex;flex-direction:column;justify-content:center;gap:clamp(24px,2.1vw,40px);padding-block:32px}
.q-lead{display:grid;grid-template-columns:clamp(200px,16.7vw,320px) minmax(0,1fr) auto;gap:clamp(32px,4.2vw,80px);align-items:center;width:100%;padding:40px 0;border-top:2px solid currentColor;border-bottom:1px solid var(--rule);text-align:left}
.q-lead .k{display:inline-flex;align-items:center;gap:12px;color:var(--accent)}
.q-lead .h{font-size:clamp(40px,3.1vw,60px);line-height:1.02;letter-spacing:-.02em}
.q-lead .b{font-family:var(--body);font-size:19px;line-height:1.55;color:var(--soft);max-width:64ch}
.q-lead .r{font-size:20px;color:var(--accent)}
.q-dates{list-style:none;margin:0;padding:0}
.q-tr{display:grid;grid-template-columns:clamp(140px,10.4vw,200px) minmax(0,1fr) minmax(0,1fr) auto;align-items:baseline;gap:32px;padding:22px 0;border-bottom:1px solid var(--rule)}
.q-tr:last-child{border-bottom:0}
.q-tr .city{font-size:clamp(26px,1.8vw,34px);letter-spacing:-.02em;transition:transform .4s var(--ease)}
@media (hover:hover) and (pointer:fine){.q-tr:hover .city{transform:translateX(10px)}}
.q-tr .venue{font-family:var(--body);font-size:20px;color:var(--soft)}
.q-tr .tk{font-size:17px}

/* ---------------------------------------------------------------- join / contact / legal / 404 */
.q-join{height:100%;display:grid;grid-template-columns:clamp(200px,16.7vw,320px) minmax(0,1fr);gap:clamp(32px,4.2vw,80px);align-items:center}
.q-join h1{font-size:clamp(36px,3.3vw,64px);line-height:1.08;letter-spacing:-.02em;max-width:22ch}
.q-form{margin-top:56px;max-width:720px}
.q-field{display:flex;align-items:baseline;gap:32px;margin-top:10px;border-bottom:1px solid currentColor}
.q-field input{flex:1;min-width:0;height:64px;padding:0;background:none;border:0;outline:0;color:inherit;font-size:24px}
.q-field input::placeholder{color:var(--soft)}
.q-field button{font-size:20px;color:var(--accent)}
.q-form small{display:block;margin-top:14px;font-size:12px;line-height:1.55;color:var(--soft);max-width:72ch}
.q-field .q-jf-cc{font-size:20px}
.q-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.q-jf [hidden]{display:none!important}
.q-jf-cc{flex:none;align-self:stretch;max-width:96px;padding:0 18px 0 0;border:0;background:transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236d6b66' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right center;color:inherit;font:inherit;-webkit-appearance:none;appearance:none;cursor:pointer;outline-offset:4px}
.q-jf-switch{display:inline-block;margin-top:14px;padding:0;border:0;background:none;color:var(--fg);font-family:var(--body);font-size:14px;cursor:pointer}
.q-jf-msg{margin:10px 0 0;min-height:1.4em;font-family:var(--body);font-size:15px;color:var(--soft)}
.q-jf-msg[data-state="ok"]{color:var(--accent)}
.q-jf-msg[data-state="err"]{color:#a33c35}
.q-jf[aria-busy="true"] button[type=submit]{opacity:.5;pointer-events:none}

.q-contact{height:100%;display:grid;grid-template-columns:clamp(200px,16.7vw,320px) repeat(3,minmax(0,1fr));gap:clamp(32px,4.2vw,80px);align-content:center;padding-block:32px}
.q-contact .col{font-size:19px}
.q-contact h2{margin:0 0 20px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.q-contact p{margin:0 0 22px;display:flex;flex-direction:column;gap:2px;font-family:var(--display)}
.q-contact .org{font-family:var(--body);font-size:15px;color:var(--soft)}
.q-contact .ul{align-self:flex-start}
.q-legalpage{max-width:760px;padding:56px 0 80px}
.q-legalpage h1{font-size:clamp(40px,3.2vw,56px);line-height:1.04;letter-spacing:-.02em}
.q-legalpage .upd{margin:10px 0 36px}
.q-legalpage h2{font-size:24px;margin:36px 0 10px}
.q-legalpage p,.q-legalpage li{font-family:var(--body);font-size:17px;line-height:1.65}
.q-legalpage a{background-image:linear-gradient(currentColor,currentColor);background-size:100% 1px;background-repeat:no-repeat;background-position:0 100%}
.q-404{height:100%;display:flex;flex-direction:column;justify-content:center;gap:24px}
.q-404 h1{font-size:clamp(48px,5vw,96px);letter-spacing:-.03em}

/* ---------------------------------------------------------------- consent banner (shared runtime, styled here) */
.q-consent{position:fixed;left:var(--g);bottom:24px;z-index:70;width:min(460px,calc(100% - 2 * var(--g)));padding:24px;background:var(--paper);color:var(--ink);--soft:#6d6b66;border-top:2px solid var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.4);font-family:var(--body)}
.q-consent[hidden]{display:none}
.q-consent h2{font-family:var(--display);font-size:20px;margin-bottom:8px}
.q-consent p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--soft)}
.q-consent .row{display:flex;gap:10px;flex-wrap:wrap}
/* Controls are fully reset: native buttons and checkboxes otherwise render differently in every browser. */
.q-consent button{-webkit-appearance:none;appearance:none;margin:0;padding:0;border:0;border-radius:0;background:none;color:inherit;font:inherit;line-height:1.2;cursor:pointer}
.q-consent .row button{flex:1;min-width:120px;height:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 16px;border:1px solid var(--ink);background:transparent;color:var(--ink);font-family:var(--display);font-size:15px;letter-spacing:.01em;transition:background .2s,color .2s}
.q-consent .row button.fill{background:var(--ink);color:var(--paper)}
@media (hover:hover) and (pointer:fine){.q-consent .row button:not(.fill):hover{background:var(--ink);color:var(--paper)}.q-consent .row button.fill:hover{opacity:.88}}
.q-consent button.ul{font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px;padding:4px 0}
.q-consent button.ul + button.ul{margin-left:16px}
.q-consent fieldset{border:0;margin:0 0 16px;padding:0;min-width:0;display:grid;gap:2px;font-size:14px}
.q-consent label{display:flex;gap:12px;align-items:center;min-height:32px;cursor:pointer;color:var(--ink)}
.q-consent input[type=checkbox]{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid var(--ink);border-radius:0;background:transparent;display:inline-grid;place-content:center;cursor:pointer}
.q-consent input[type=checkbox]::before{content:"";width:10px;height:10px;background:var(--paper);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);transform:scale(0);transition:transform .15s}
.q-consent input[type=checkbox]:checked{background:var(--ink)}
.q-consent input[type=checkbox]:checked::before{transform:scale(1)}
.q-consent button:focus-visible,.q-consent input:focus-visible,.q-consent a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* ---------------------------------------------------------------- tablet */
@media (max-width:1280px){
  .q-music{grid-template-columns:minmax(0,1fr) clamp(280px,34vw,440px)}
  .q-mhead{grid-template-columns:1fr}
  .q-tr{grid-template-columns:120px minmax(0,1fr) auto}
  .q-tr .venue{grid-column:2;grid-row:2;font-size:16px}
  .q-tr .tk{grid-row:1/3;grid-column:3;align-self:center}
  .q-contact{grid-template-columns:repeat(3,minmax(0,1fr))}
  .q-contact > h1{grid-column:1/-1}
  .q-acc-body{padding-left:0}
  .q-radio .q-acc-body{padding-left:0}
}
@media (max-width:1100px){
  .q-grid4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-merch{justify-content:flex-start}
  .q-links{grid-template-columns:1fr;padding-top:32px;height:auto}
  .q-llist{border-top:0}
  .q-head3,.q-lead{grid-template-columns:1fr auto}
  .q-head3 p{grid-column:1/-1;grid-row:2}
  .q-lead .k{grid-column:1/-1}
}

/* ---------------------------------------------------------------- phones (S2-App-Mobile) */
@media (max-width:820px){
  :root{--bar:68px}
  .q-bar{grid-template-columns:1fr auto}
  .q-bar .q-nav{display:none}
  .q-logo{width:170px}
  .q-menu-btn{font-size:15px;gap:8px}
  .q-now-foot{display:none}
  .q-now-top{display:flex;height:0;opacity:0;gap:14px;border-bottom:1px solid transparent}
  html[data-route="home"] .q-now-top{height:56px;opacity:1;border-bottom-color:var(--rule)}
  .q-now-top .q-mq-track{font-size:22px;--mqg:14px}
  .q-tabs{position:relative;z-index:15;flex:none;height:64px;display:flex;justify-content:space-between;align-items:center;margin:0 -10px;padding-bottom:6px;border-top:1px solid var(--rule)}
  .q-tabs a{width:80px;height:44px;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--soft);transition:color .4s}
  .q-tabs a[aria-current="page"]{color:var(--fg)}
  .q-tabs .q-ind{top:44px;bottom:auto}
  .q-menu{grid-template-columns:1fr;padding:8px var(--g) 26px;gap:0}
  .q-menu > .lbl{display:none}
  .q-mi{padding:14px 0;font-size:30px}
  .q-mi.q-mob-only{display:flex}
  .q-mi.q-mi-sm{padding:14px 0;font-size:19px;letter-spacing:-.01em}  /* same spacing as the big links */
  /* Socials: icons only on phones */
  .q-menu-side .q-soc-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .q-menu-side{flex-direction:row;flex-wrap:wrap;gap:18px;padding-top:20px;font-size:14px}
  .q-menu-side > .lbl{display:none}
  .q-menu-side .q-soc{min-width:40px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
  .q-menu-side .q-soc .q-ico{width:20px;height:20px}
  .q-menu-side .q-legal,.q-menu-side .q-copy{flex-basis:100%}
  .q-menu-side .q-copy{margin-top:4px}
  .q-menu-side .q-legal{margin-top:-8px}
  .q-modal{align-items:flex-end;padding:0}
  .q-panel,.q-panel.narrow,.q-panel.split{width:100%;max-height:90%;padding:22px 22px 32px;display:flex;flex-direction:column;gap:18px;border-top:1px solid var(--ink)}
  .q-panel.split figure{display:none}
  .q-panel p{font-size:16px}
  @keyframes q-sheet{from{transform:translateY(100%)}}
  @keyframes q-sheetout{to{transform:translateY(100%)}}
  .q-modal[data-state="open"] .q-panel{animation:q-sheet .55s var(--ease) both}
  .q-modal[data-state="closing"] .q-panel{animation:q-sheetout .34s var(--ease-in) both}
  .q-close{top:16px;right:18px}

  .q-main > .q-route{height:auto;min-height:100%}
  .q-h1{font-size:40px}
  .q-home{margin-right:0;display:flex;flex-direction:column;justify-content:center;gap:18px;padding:18px 0;height:auto;min-height:100%}
  .q-home-art{order:-1;height:auto;width:100%;max-width:none;aspect-ratio:1}
  .q-home-copy{padding:0}
  .q-home h1{margin-top:12px;font-size:36px;line-height:1.08;letter-spacing:-.02em;max-width:none}
  .q-home-intro{margin-top:14px;font-size:16px}
  .q-actions{margin-top:20px;gap:10px}
  .q-btn{height:48px;padding:0 18px;font-size:16px}
  .q-music,.q-radio,.q-links,.q-merch,.q-tour,.q-contact,.q-join{display:block;height:auto;padding:20px 0}
  .q-mcol{height:auto;overflow:visible;padding:0}
  .q-mhead{grid-template-columns:1fr;gap:8px;margin-bottom:8px}
  .q-mhead h1{font-size:40px}
  .q-mhead p{display:none}
  .q-music .q-feat{display:grid;grid-template-columns:132px minmax(0,1fr);gap:16px;align-items:end;margin:18px 0}
  .q-music .q-feat figcaption{flex-direction:column;align-items:flex-start;margin:0}
  .q-music .q-plat{grid-column:1/-1;margin-top:0}
  .q-rl{padding:0}
  .q-rrow{grid-template-columns:48px minmax(0,1fr) auto;gap:10px}
  .q-rcell{gap:8px}
  .q-rl li[data-m-open] .q-presave.has-tl{display:none}
  .q-rl li[data-open]:not([data-m-open]) .q-presave.has-tl{display:inline-flex}
  .q-acc .q-presave-now{width:calc(100% - 58px);margin-left:58px}
  .q-mp-sec .q-presave-now{width:100%;margin:0 0 16px}
  /* Phones: tap a release to open it in place; the first starts open. Desktop's tracklist + and side viewer are hidden. */
  .q-music .q-feat,.q-rl .q-rl-tog,.q-rl .q-acc{display:none}
  .q-m-ind{display:grid;place-items:center;color:var(--soft)}
  .q-m-ind .q-ico{transition:transform .4s var(--ease)}
  .q-rl > li[data-m-open] .q-m-ind .q-ico{transform:rotate(45deg)}
  .q-mpanel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
  .q-mpanel > div{min-height:0;overflow:hidden;visibility:hidden;transition:visibility 0s .45s}
  .q-rl > li[data-m-open] .q-mpanel{grid-template-rows:1fr}
  .q-rl > li[data-m-open] .q-mpanel > div{visibility:visible;transition:visibility 0s 0s}
  .q-rl > li.no-anim .q-mpanel,.q-rl > li.no-anim .q-mpanel > div,.q-rl > li.no-anim .q-m-ind .q-ico{transition:none}
  .q-mp-in{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px 16px;padding:4px 0 20px 58px}
  .q-mp-art{width:120px;aspect-ratio:1;object-fit:cover;background:#e4e0d8;display:block}
  .q-mp-meta{display:flex;flex-direction:column;justify-content:flex-end;gap:10px;min-width:0}
  .q-mp-cta{align-self:flex-start;font-size:16px;color:var(--accent)}
  .q-mp-sec{grid-column:1/-1}
  .q-mp-sec .q-tl{padding:6px 0 0}
  .q-mp-in .q-plat{margin:0;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}
  .q-mp-in .q-plat a{font-size:14px;padding:9px 0}
  .q-rrow > a{padding:12px 0}
  .q-rrow .ty{font-size:9px}
  .q-tl{padding:0 0 14px 58px;font-size:14px}
  .q-rl .t{font-size:24px}
  .q-tag{font-size:9px;order:1}
  .q-rrow > a{column-gap:8px}
  .q-rl .s{flex-basis:100%;font-size:14px;order:2}
  .q-music{display:flex;flex-direction:column}
  .q-music .q-mcol{display:contents}
  .q-music .q-mhead{order:0}
  .q-music .q-feat{order:1}
  .q-music .q-rl{order:2}
  .q-radio-info{padding:0}
  .q-radio-info h1{font-size:40px;margin-top:8px}
  .q-radio-info p{margin-top:14px;font-size:15px}
  .q-listen{flex-direction:row;flex-wrap:wrap;gap:16px;font-size:15px}
  .q-eps{padding:24px 0 12px;height:auto;overflow:visible;-webkit-mask-image:none;mask-image:none}
  .q-radio-art{display:none}
  /* Phones: title + description on the left, the show artwork on the right (it stays put; each episode shows its own art inside) */
  .q-radio-info{display:grid;grid-template-columns:minmax(0,1fr) 112px;column-gap:18px;align-items:start}
  .q-radio-info > *{grid-column:1/-1}
  .q-radio-info > .lbl:first-child,.q-radio-info > h1,.q-radio-info > p{grid-column:1}
  .q-radio-info > .q-art-inline{display:block;grid-column:2;grid-row:1/span 3;width:112px;margin:2px 0 0;align-self:start}
  .q-radio .q-ep-art{display:block}
  .q-ep-btn{grid-template-columns:92px minmax(0,1fr) 20px;gap:10px;padding:14px 0}
  .q-ep-btn .d{font-size:10px;letter-spacing:.08em}
  .q-eps-head{flex-wrap:wrap;row-gap:10px}
  .q-filt{flex-basis:100%;gap:20px}
  .q-mfilt{gap:10px 16px;padding:10px 0 12px}
  html[data-route=music] .q-main{scroll-padding-top:84px}
  .q-ep-btn .t{font-size:16px}
  .q-ep-btn .t .st{font-size:12.5px}
  .q-acc-body{grid-template-columns:1fr;gap:18px;padding:0 0 20px}
  .q-head3{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:20px}
  .q-head3 p{display:none}
  .q-grid4{gap:24px 14px}
  .q-hrow{grid-auto-flow:row;grid-template-rows:none;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-columns:auto;overflow:visible;gap:24px 14px;padding-bottom:0}
  .q-stock{top:8px;right:8px;font-size:9px;padding:4px 7px 3px}
  .q-card .cap{flex-direction:column;gap:2px;padding-top:8px}
  .q-card .cap .n{font-size:15px}
  .q-links-left{gap:18px;margin-bottom:24px}
  .q-fcard{grid-template-columns:120px minmax(0,1fr);gap:16px;padding-bottom:18px}
  .q-fcard .n{font-size:22px}
  .q-fcard .s{font-size:14px}
  .q-lk{grid-template-columns:52px minmax(0,1fr) auto;gap:14px;padding:12px 0}
  .q-lk > .lbl{display:none}
  .q-lk .th{width:52px;height:52px}
  .q-lk .n{font-size:17px}
  .q-lk .s{font-size:13px}
  .q-lk .c{font-size:13px}
  .q-lead{display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:20px 0 22px;margin:18px 0 10px}
  .q-lead .h{font-size:32px}
  .q-lead .b{font-size:14px}
  .q-lead .r{font-size:16px}
  .q-tr{grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0}
  .q-tr .city{grid-column:1;font-size:22px}
  .q-tr .venue{grid-column:1;grid-row:auto;font-size:14px}
  .q-tr .tk{grid-row:1/4;grid-column:2}
  .q-join{display:flex;flex-direction:column;justify-content:center;gap:32px;min-height:100%}
  .q-join h1{font-size:32px}
  .q-form{margin-top:0}
  .q-field input{font-size:20px;height:56px}
  .q-contact h2{margin:28px 0 12px;padding-bottom:8px}
  .q-contact .col{font-size:16px}
  .q-contact p{margin-bottom:14px}
  .q-legalpage{padding:24px 0 48px}
  .q-consent{left:12px;right:12px;bottom:76px;width:auto}
}
@media (max-height:760px) and (min-width:821px){
  :root{--bar:80px;--now:56px}
  .q-home h1{font-size:clamp(48px,5.5vw,104px)}
  .q-lead{padding:24px 0}
}

/* ---------------------------------------------------------------- desktop: one scrollbar, at the window's edge
   The page area (.q-main) is the only vertical scroller and runs edge to edge; columns that used to scroll on their own
   now flow with it, and the columns beside them stay put (sticky). The bar stays fixed above. */
@media (min-width:821px){
  .q-main{margin:0 calc(var(--g) * -1);padding:0 var(--g);scrollbar-width:thin;scrollbar-color:var(--rule) transparent}
  .q-main::-webkit-scrollbar{width:8px}.q-main::-webkit-scrollbar-thumb{background:var(--rule)}
  html:is([data-route=music],[data-route=radio],[data-route=links]) .q-main > .q-route{height:auto;min-height:100%}
  /* Music: the list flows; the artwork + links panel stays centred beside it */
  .q-music{height:auto;min-height:100%;align-items:start}
  .q-mcol{height:auto;overflow:visible;padding-right:0}
  /* Artwork, title and links stay in view, vertically centred with a little room top and bottom. shell.js (fitFeat)
     sets --fw: the square artwork's size, shrunk from the column width so everything fits the window height; the
     caption and links take the same width. Below 250px the artwork hides. */
  .q-music .q-feat{position:sticky;top:0;height:calc(100dvh - var(--bar));min-height:calc(400px - var(--bar));display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:24px 0}
  .q-music .q-feat > *{width:var(--fw,100%);max-width:100%;flex:none}
  .q-music .q-feat[data-noart] .q-feat-art{display:none}
  .q-music .q-feat[data-noart] figcaption{margin-top:0}
  /* Dialekt: the episode list flows; info (and the centre artwork) stay */
  .q-radio{height:auto;min-height:100%;align-items:start}
  .q-radio-info{position:sticky;top:0;max-height:calc(100dvh - var(--bar))}
  .q-radio > .q-radio-art{position:sticky;top:50%;translate:0 -50%;align-self:start}
  .q-eps{height:auto;overflow:visible;padding-right:0;-webkit-mask-image:none;mask-image:none}
  .q-eps-head{position:sticky;top:0;z-index:2;background:var(--bg);padding-top:12px}
  .q-radio .q-eps{padding-top:calc(var(--q-top) - 12px)}
  html[data-route=radio] .q-main{scroll-padding-top:56px}
  /* Links: the list flows; featured cards stay */
  .q-links{height:auto;min-height:100%;align-items:start}
  .q-llist{overflow:visible;padding-right:0}
}
@media (min-width:1101px){
  .q-links-left{position:sticky;top:56px}
  /* Links: both featured cards always fit the window height. The artwork size comes from the space below the title
     (shared by the two cards), and the featured column takes just the width it needs; the list gets the rest. */
  html[data-route=links] .q-main{container-type:size}
  .q-links{grid-template-columns:auto minmax(0,1fr)}
  .q-links-left{--fim:240px;--fim:clamp(120px,calc((100cqh - 56px - 48px - clamp(40px,3.2vw,56px) - 36px - 2 * 36px - 2 * 36px - 2px) / 2),360px)}
  .q-links-left:not(:has(.q-fcard + .q-fcard)){--fim:clamp(120px,calc(100cqh - 56px - 48px - clamp(40px,3.2vw,56px) - 72px - 1px),360px)}
  .q-fcard{grid-template-columns:var(--fim) clamp(220px,17vw,340px)}
}

/* ---------------------------------------------------------------- home: background video
   Full bleed behind the bar and footer (both turn white), info box low and centred, sound + restart beside it. */
html[data-route="home"]:has(.q-vhero){--bg:#141311;--fg:#fff;--soft:rgba(255,255,255,.78);--rule:rgba(255,255,255,.32);--accent:#fff}
html:has(.q-vhero) .q-mq-sep{color:rgba(255,255,255,.6)}
html:has(.q-vhero) .q-now-foot .q-mq-track{font-size:20px;letter-spacing:0}
.q-vhero{position:relative;height:100%;min-height:100%}
.q-vbg{position:fixed;inset:0;z-index:-1;background:#141311 center/cover no-repeat;overflow:hidden;pointer-events:none}
.q-vbg::before{content:"";position:absolute;inset:-20px;background:inherit;filter:blur(18px)}
.q-vbg img,.q-vbg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.q-vbg video{opacity:0;transition:opacity .6s ease}
.q-vbg.is-playing video{opacity:1}
.q-vshade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(0,0,0,.38),rgba(0,0,0,0) 220px),linear-gradient(to top,rgba(0,0,0,.5),rgba(0,0,0,0) 320px)}
.q-vbox{position:absolute;left:0;right:0;bottom:44px;margin-inline:auto;width:max-content;max-width:100%;box-sizing:border-box;padding:30px 36px 28px;background:rgba(14,13,12,.42);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid rgba(255,255,255,.16);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;color:#fff}
.q-vlbl{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.78)}
.q-vbox h1{margin:0;font-size:40px;font-weight:400;line-height:1.05;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;outline:0}
.q-vact{display:flex;gap:10px;margin-top:8px}
.q-vbtn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 22px;border:1px solid #fff;background:transparent;color:#fff;font:inherit;font-size:15px;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.q-vbtn.solid{background:#fff;color:#141413}
.q-vbtn.dim{border-color:rgba(255,255,255,.5)}
.q-vbtn:focus-visible,.q-vic:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .q-vbtn:hover{background:rgba(255,255,255,.14)}
  .q-vbtn.solid:hover{background:rgba(255,255,255,.86)}
  .q-vbtn.dim:hover{border-color:#fff}
  .q-vbtn:hover svg.q-ext{transform:translate(2px,-2px)}
}
.q-vbtn svg{transition:transform .3s var(--ease)}
.q-vctl{position:absolute;right:0;bottom:24px;display:flex;gap:8px}
.q-vic{display:inline-grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid rgba(255,255,255,.4);background:rgba(14,13,12,.3);color:#fff;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s}
.q-vic .on{display:none}
.q-vic[aria-pressed="true"]{background:#fff;color:#141413;border-color:#fff}
.q-vic[aria-pressed="true"] .on{display:grid}
.q-vic[aria-pressed="true"] .off{display:none}
.q-vic > span{display:grid;place-items:center;line-height:0}
.q-vic .q-ico{display:block}
.q-vic .q-ico{width:18px;height:18px}
@media (hover:hover) and (pointer:fine){.q-vic:not([aria-pressed="true"]):hover{border-color:#fff}}
@media (max-width:1100px){.q-vbox h1{font-size:32px}}
@media (max-width:820px){
  html:has(.q-vhero) .q-now-top{display:none}
  .q-vhero{min-height:100%;height:100%}
  html:has(.q-vhero) .q-main > .q-route{height:100%}
  .q-vbox{left:-6px;right:-6px;bottom:28px;width:auto;padding:22px 20px 20px;gap:10px}
  .q-vlbl{font-size:10px}
  .q-vbox h1{font-size:26px;line-height:1.1;white-space:normal}
  .q-vact{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;margin-top:6px}
  .q-vbtn{height:44px;padding:0 10px;font-size:14px}
  /* Phones: Presave leads, full width */
  /* Phones: About The Album leads, full width and solid; Presave and Vinyl share the row below */
  .q-vact > .q-vbtn.solid{grid-column:1/-1;height:46px;font-size:15px}
  .q-vctl{top:16px;bottom:auto;right:0}
  .q-vic{width:44px;height:44px}
}

/* ---------------------------------------------------------------- Quiet, all widths: with the menu open, the bar behind the
   logo / nav / Close takes the menu's colour, so the page (e.g. the home video) doesn't show through. */
html[data-design="quiet"] .q-shell::before{content:"";position:absolute;left:0;right:0;top:0;height:var(--bar);z-index:29;background:var(--bg);opacity:0;pointer-events:none;transition:opacity .3s ease}
html[data-design="quiet"][data-menu] .q-shell::before{opacity:1}

/* ---------------------------------------------------------------- Quiet, phones: the open menu is a solid full-height panel
   The bar behind the logo / Close takes the menu's colour too (nothing shows through, e.g. the home video), and the
   footer line sits at the bottom: copyright left, Privacy · Terms · Cookie settings right. */
@media (max-width:820px){
  html[data-design="quiet"] .q-menu{bottom:0;display:flex;flex-direction:column;overflow-y:auto;padding-bottom:max(22px,env(safe-area-inset-bottom));border-bottom:0}
  html[data-design="quiet"] .q-menu-side{margin-top:auto;padding-top:28px}
  html[data-design="quiet"] .q-menu-foot{flex-basis:100%;display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:6px 10px;margin-top:6px;font-size:11.5px}
  html[data-design="quiet"] .q-menu-foot .q-copy,html[data-design="quiet"] .q-menu-foot .q-legal{margin:0;flex-basis:auto;font-size:11.5px;white-space:nowrap}
  html[data-design="quiet"] .q-menu-foot .q-legal{gap:10px;flex-wrap:nowrap;justify-content:flex-end;margin-left:auto}
}

/* ---------------------------------------------------------------- pop-up tabs (About): a tab bar, then panes side by side
   that swipe / scroll sideways (snapping), each with its own vertical scroll. */
.q-panel.split:has(.q-mtabbed){height:min(820px,100%);grid-template-rows:minmax(0,1fr)}
.q-mtabbed{min-height:0;height:100%;overflow:hidden}
.q-mtabs{flex:none;display:flex;gap:clamp(18px,1.8vw,28px);border-bottom:1px solid var(--rule);overflow-x:auto;scrollbar-width:none;margin-bottom:-6px}
.q-mtabs::-webkit-scrollbar{display:none}
.q-mtabs button{position:relative;flex:none;padding:0 0 12px;font-size:16px;color:var(--soft);white-space:nowrap;transition:color .3s}
.q-mtabs button::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.q-mtabs button[aria-selected="true"]{color:var(--ink)}
.q-mtabs button[aria-selected="true"]::after{transform:none}
@media (hover:hover) and (pointer:fine){.q-mtabs button:hover{color:var(--ink)}}
.q-mpanes{flex:1 1 auto;min-height:0;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;scroll-behavior:smooth}
.q-mpanes::-webkit-scrollbar{display:none}
.q-mpane{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always;overflow-y:auto;display:flex;flex-direction:column;gap:22px;padding-right:0;outline:0}
.q-mpanes[data-dragging]{scroll-snap-type:none;scroll-behavior:auto;cursor:grabbing;user-select:none}
@media (hover:hover) and (pointer:fine){.q-mpanes{cursor:grab}}
/* Dots under the panes: where you are, and that there's more sideways */
.q-mdots{flex:none;display:flex;justify-content:center;gap:4px;margin-top:-6px}
.q-mdots button{display:grid;place-items:center;width:22px;height:22px;padding:0}
.q-mdots span{width:7px;height:7px;border-radius:50%;border:1px solid var(--ink);opacity:.45;transition:background-color .3s,opacity .3s}
.q-mdots [aria-current="true"] span{background:var(--ink);opacity:1}
/* Pop-up links (Presave …): under the artwork on desktop, after the text on phones */
.q-mact{display:flex;gap:40px;flex-wrap:wrap;font-size:19px}
.q-mact-fig{margin-top:22px}
@media (min-width:821px){.q-mact-body{display:none}}
@media (max-width:820px){.q-mact-fig{display:none}}
.q-mpane > h2{flex:none}
@media (max-width:820px){
  .q-panel.split:has(.q-mtabbed){height:90dvh;max-height:90dvh}
  .q-mtabbed{flex:1 1 auto;gap:16px!important}
  .q-mtabs button{font-size:15px}
}
@media (prefers-reduced-motion:reduce){.q-mpanes{scroll-behavior:auto}}

/* ---------------------------------------------------------------- ffm.to links open in an overlay (shell.js builds it)
   A framed smart-link page with a slim bar: title, "Open in new tab" (the fallback) and Close. */
.q-fpanel.q-panel{width:min(480px,100%);height:min(860px,100%);max-height:none;padding:0;display:flex;flex-direction:column;overflow:hidden;border-top:0}
.q-fbar{flex:none;display:flex;align-items:center;justify-content:space-between;gap:16px;height:52px;padding:0 10px 0 18px;border-bottom:1px solid var(--rule);font-size:14px}
.q-fbar .q-ftitle{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:15px}
.q-fbar .q-fopen{display:inline-flex;align-items:center;gap:6px;color:var(--soft);white-space:nowrap}
.q-fbar .q-close{position:static;display:grid;place-items:center;width:36px;height:36px}
.q-fframe{position:relative;flex:1 1 auto;min-height:0;background:#111}
.q-fframe iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .3s ease}
.q-fframe[data-loaded] iframe{opacity:1}
.q-fframe .q-fwait{position:absolute;inset:0;display:grid;place-items:center;align-content:center;gap:14px;padding:24px;text-align:center;color:rgba(255,255,255,.7);font-size:15px}
.q-fframe .q-fwait a{color:#fff}
.q-fframe .q-fwait .slow{opacity:0;transition:opacity .4s}
.q-fframe[data-slow] .q-fwait .slow{opacity:1}
.q-fframe[data-loaded] .q-fwait{display:none}
@media (max-width:820px){
  .q-fmodal.q-modal{padding:0;align-items:stretch}
  .q-fpanel.q-panel{width:100%;height:100dvh;max-height:100dvh;padding:0;gap:0;border-top:0;box-shadow:none}
  .q-fbar{height:calc(52px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
}

/* ---------------------------------------------------------------- reduced motion: cross-fades only */
@media (prefers-reduced-motion:reduce){
  .in,.kb,.q-dot,[data-main][data-leaving]{animation-duration:.2s!important;animation-delay:0s!important}
  @keyframes q-in{from{opacity:0}to{opacity:1}}
  @keyframes q-out{to{opacity:0}}
  .q-modal .q-panel,.q-modal .q-modal-scrim{animation:none!important}
  *{transition-duration:.01ms!important}
}

/* Dialekt Radio: section labels and tracklist notes ([Dialekt Track of the Week]) in the pop colour */
.q-radio .lbl:not(.d){color:var(--pop)}
.q-note{color:var(--pop)}

/* ---------------------------------------------------------------- admin bar (shell.js, signed-in admins only)
   A slim strip above everything; the page below gives up its height. Pop-ups still cover it. */
.q-adminbar{position:fixed;top:0;left:0;right:0;z-index:58;height:32px;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 max(16px,env(safe-area-inset-left)) 0 max(16px,env(safe-area-inset-left));background:var(--pop);color:var(--dark);font-family:var(--body,system-ui,sans-serif);font-size:12px;letter-spacing:.02em}
.q-adminbar a{display:inline-flex;align-items:center;gap:6px;color:inherit;text-decoration:none}
.q-adminbar .q-ab-l{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase}
.q-adminbar .q-ab-r{display:flex;align-items:center;gap:16px}
.q-adminbar .q-ab-r > a:not(.q-ab-btn){opacity:.85}
.q-adminbar .q-ab-btn{height:22px;padding:0 10px;background:var(--dark);color:var(--paper);border-radius:2px}
.q-adminbar a[hidden]{display:none}
@media (hover:hover) and (pointer:fine){.q-adminbar .q-ab-r > a:not(.q-ab-btn):hover{opacity:1;text-decoration:underline}.q-adminbar .q-ab-btn:hover{background:#000}}
html.has-adminbar body{padding-top:32px}
html.has-adminbar .q-shell{height:calc(100dvh - 32px);min-height:calc(560px - 32px)}
html.has-adminbar .ql-page{min-height:calc(100vh - 32px)}
html.has-adminbar .q-music .q-feat{height:calc(100dvh - var(--bar) - 32px)}
html.has-adminbar .q-radio-info{max-height:calc(100dvh - var(--bar) - 32px)}
/* Sign-up fallback (Laylo couldn't be reached from the server): a clear button, not a faint link */
.q-jf-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;padding:0 22px;white-space:nowrap;background:var(--accent);color:#fff!important;font-size:15px;text-decoration:none;border:0}
html[data-dark] .q-jf-go,.ql .q-jf-go{background:var(--pop);color:#141413!important}
@media (hover:hover) and (pointer:fine){.q-jf-go:hover{filter:brightness(1.08)}}

/* Links page: sections from the link builder (Admin → Links → Page) */
.q-llist:has(> .q-lgrp:first-child > .q-lgh){border-top:0}
.q-lgrp + .q-lgrp{margin-top:34px}
.q-lgh{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:0 0 12px;border-bottom:1px solid var(--rule)}
.q-lgh h2{margin:0;font-weight:400}
.q-lk.noim{grid-template-columns:minmax(0,1fr) auto}
@media (max-width:820px){.q-lk.noim{grid-template-columns:minmax(0,1fr) auto}.q-lgrp + .q-lgrp{margin-top:24px}}
.q-lk.xm{display:none}.q-lgrp.open > .q-lk.xm{display:grid}
.q-lgrp .xmore{display:inline-flex;margin-top:16px;font-size:15px;background:none;border:0;padding:0 0 1px;color:inherit;cursor:pointer}
.q-lgrp .xmore .c,.q-lgrp.open > .xmore .o{display:none}.q-lgrp.open > .xmore .c{display:inline}
.q-lk .tg{display:table;margin:0 0 6px;padding:3px 7px 2px;font-family:var(--mono,monospace);font-size:10px;letter-spacing:.1em;text-transform:uppercase;line-height:1;background:var(--pop);color:#141414}
.q-lgrp.land .q-lk{grid-template-columns:170px minmax(0,1fr) auto}
.q-lgrp.land .q-lk .th{width:170px;height:96px}
@media (max-width:820px){.q-lgrp.land .q-lk{grid-template-columns:92px minmax(0,1fr) auto}.q-lgrp.land .q-lk .th{width:92px;height:52px}}

/* Tracklist: number (and play button) on the first line when a title wraps */
.q-tl li:not(.sec){align-items:flex-start}
.q-tl li:not(.sec) > .q-play{align-self:flex-start;font-size:inherit;margin:calc((1.85em - 28px) / 2) 0 0 6px}  /* centred on the first line (line-height 1.85) */

/* Home hero: video first, the card after (shell.js adds .shown; no JS = always visible) */
html.js .q-vbox[data-after-video]:not(.shown){opacity:0;transform:translateY(12px);pointer-events:none;animation:none}
.q-vbox[data-after-video].shown{opacity:1;transform:none;animation:none;transition:opacity 1.2s var(--ease),transform 1.2s var(--ease)}

/* Focus rings for keyboard use only (shell.js sets html.kb); no ring after a tap or click */
html.js:not(.kb) :focus-visible{outline:none}