/* Layout: nachtstudio. Zwarte vloer, posterletters in crème, elke sectie is een spoor met een eigen spoorkleur
   zoals in een DAW. De hero gebruikt de volle breedte. Eén donkere look, net als het logo (wit op zwart). */
:root{
  --ink:#0b0d0f;        /* vloer */
  --panel:#13171a;      /* panelen */
  --raised:#1b2023;     /* knoppen, velden */
  --line:#2c3438;       /* lijnen */
  --paper:#f2ede2;      /* tekst, randen */
  --muted:#a9b2b5;
  --dim:#6f7a7e;
  --c1:#22BABD;         /* turquoise: beats, acties */
  --c2:#226DBD;         /* blauw: workshops */
  --c3:#2522BD;         /* indigo: playground */
  --c3-text:#8f8df5;    /* indigo dat leesbaar is op zwart */
  --err:#ff6b5e;
  --ok:#5fd6a0;
  --f-disp:"Anton",Impact,"Arial Narrow Bold","Helvetica Neue Condensed",sans-serif;
  --f-body:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-cond:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,Menlo,Consolas,monospace;
  --gutter-l:max(16px,env(safe-area-inset-left,0px));
  --gutter-r:max(16px,env(safe-area-inset-right,0px));
  --head-h:64px;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--ink);scroll-padding-top:calc(var(--head-h) + env(safe-area-inset-top,0px) + 12px);-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{margin:0;background:var(--ink);color:var(--paper);font:400 18px/1.6 var(--f-body);-webkit-tap-highlight-color:transparent}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--ink)}
img{max-width:100%;height:auto;display:block}
a{color:var(--c1);text-underline-offset:3px}
a:hover{color:var(--paper)}
:focus-visible{outline:3px solid var(--c1);outline-offset:3px}
h1,h2,h3{margin:0;font-weight:400;text-wrap:balance}
p{margin:0}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gutter-l);padding-right:var(--gutter-r)}
.skip{position:absolute;left:-9999px;top:8px;z-index:50;background:var(--paper);color:var(--ink);padding:8px 14px;border-radius:8px;font:600 16px var(--f-cond)}
.skip:focus{left:16px}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Kop ---------- */
.site-head{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:color-mix(in srgb,var(--ink) 92%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 24px;min-height:var(--head-h);padding-block:8px}
.brand{display:flex;align-items:center;gap:10px;color:var(--paper);text-decoration:none}
.brand-logo{height:40px;width:auto}
.brand-name{font:600 12.5px/1.1 var(--f-cond);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.nav{display:flex;flex-wrap:wrap;gap:2px 4px;margin:0;padding:0;list-style:none}
.nav a{display:block;padding:8px 10px;border-radius:8px;color:var(--paper);text-decoration:none;font:600 16px/1 var(--f-cond);letter-spacing:.08em;text-transform:uppercase;
  box-shadow:inset 0 -3px 0 transparent;transition:box-shadow .15s,background .15s}
.nav a:hover{background:var(--raised)}
.nav a[href="#beats"]{--track:var(--c1)} .nav a[href="#workshops"]{--track:var(--c2)} .nav a[href="#playground"]{--track:var(--c3-text)} .nav a[href="#over"]{--track:var(--paper)}
.nav a[aria-current="true"]{box-shadow:inset 0 -3px 0 var(--track,var(--c1))}
.nav .nav-cta a{background:var(--c1);color:var(--ink)}
.nav .nav-cta a:hover{background:var(--paper)}
@media (max-width:640px){
  :root{--head-h:96px}
  .site-head .wrap{gap:2px 12px}
  .nav{width:100%;justify-content:space-between}
  .nav a{padding:8px 6px;font-size:15px;letter-spacing:.05em}
}

/* ---------- Knoppen ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:12px;border:2px solid var(--paper);
  font:600 18px/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;transition:translate .08s,box-shadow .08s,background .15s,color .15s}
.btn-primary{background:var(--paper);color:var(--ink);box-shadow:4px 4px 0 var(--c1)}
.btn-primary:hover{background:var(--c1);color:var(--ink)}
.btn-ghost{background:transparent;color:var(--paper)}
.btn-ghost:hover{background:var(--raised);color:var(--paper)}
.btn:active{translate:2px 2px;box-shadow:2px 2px 0 var(--c1)}
.btn[disabled]{opacity:.55;cursor:progress}
.btn-row{display:flex;flex-wrap:wrap;gap:12px}

/* ---------- Hero ---------- */
.hero .wrap{display:block;padding-block:72px 96px}
.hero-text{min-width:0}
.kicker{font:500 13px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.hero h1{margin-top:14px;font:400 clamp(72px,9.4vw,128px)/.86 var(--f-disp);text-transform:uppercase;letter-spacing:.005em}
.hero h1 .to{color:var(--c1)}
.hero h1 small{display:block;margin-top:14px;font:500 clamp(14px,1.6vw,18px)/1 var(--f-mono);letter-spacing:.42em;color:var(--muted)}
/* "Productions" even breed als de regels erboven: letters over de volle breedte verdeeld */
.hero h1{width:fit-content;max-width:100%}
.hero h1 .h1-sub{display:block;margin-top:.2em;font:600 .235em/1 var(--f-cond);letter-spacing:0;color:var(--paper)}
.hero h1 .spread{display:flex;justify-content:space-between;padding-top:.32em;border-top:.09em solid var(--c1)}
.hero .lead{margin-top:28px;max-width:34em;font-size:20px;color:var(--paper)}
.hero .btn-row{margin-top:32px}
/* Hero: gecentreerd, de kop is even breed als de site (container-eenheden), ook op een telefoon */
.hero .wrap{container-type:inline-size}
.hero-text{text-align:center}
.hero h1{font-size:clamp(72px,9.4vw,128px);margin-inline:auto}
.hero.soon h1{font-size:clamp(64px,9vw,112px)}
.hero .lead{max-width:44em;margin-inline:auto}
.hero .btn-row{justify-content:center}
@media (max-width:900px){.hero .wrap{padding-block:44px 64px}.hero .lead{max-width:none}}
@media (max-width:640px){.hero h1{font-size:clamp(56px,25vw,128px)}@supports (width:1cqw){.hero h1{font-size:calc(100cqw / 3.56)}.hero.soon h1{font-size:calc(100cqw / 4.52)}}.hero .lead{font-size:18px}.hero .btn-row{display:grid;grid-template-columns:1fr}.hero .btn-row .btn{width:100%}}

/* ---------- Secties ---------- */
.sec{padding-block:96px;border-top:1px solid var(--line);--track:var(--c1)}
.sec-beats{--track:var(--c1)} .sec-workshops{--track:var(--c2)} .sec-playground{--track:var(--c3)} .sec-over{--track:var(--paper)} .sec-contact{--track:var(--c1)}
.sec-head{display:grid;gap:14px;max-width:46em;margin-bottom:44px}
.sec h2{display:flex;align-items:center;gap:14px;font:400 clamp(44px,6.4vw,80px)/.95 var(--f-disp);text-transform:uppercase}
.sec h2::before{content:"";flex:none;width:clamp(14px,1.6vw,20px);height:.78em;background:var(--track);border-radius:3px}
.sec-head p{font-size:20px;color:var(--muted);max-width:38em}
@media (max-width:640px){.sec{padding-block:64px}.sec-head{margin-bottom:32px}.sec-head p{font-size:18px}}
.tag{display:inline-flex;align-items:center;min-height:26px;padding:2px 9px;border:1.5px solid var(--line);border-radius:999px;font:600 13px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.label{font:500 12.5px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- Beats ---------- */
.beats-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:40px;align-items:start}
@media (max-width:900px){.beats-grid{grid-template-columns:minmax(0,1fr)}}
.tracks{list-style:none;margin:0;padding:0;border:2px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}
.track{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"play info time" "play bar bar";gap:6px 16px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}
.track:first-child{border-top:0}
.track.is-active{background:var(--raised);box-shadow:inset 4px 0 0 var(--c1)}
.t-play{grid-area:play;width:52px;height:52px;border-radius:50%;border:2px solid var(--paper);background:transparent;color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .15s,color .15s}
.t-play:hover{background:var(--paper);color:var(--ink)}
.t-play[aria-pressed="true"]{background:var(--c1);border-color:var(--c1);color:var(--ink)}
.t-play svg{width:18px;height:18px}
.t-play .i-pause,.t-play[aria-pressed="true"] .i-play{display:none}
.t-play[aria-pressed="true"] .i-pause{display:block}
.t-info{grid-area:info;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;min-width:0}
.t-cat{font:500 13px var(--f-mono);color:var(--dim);font-variant-numeric:tabular-nums}
.t-title{font:600 22px/1.15 var(--f-cond);letter-spacing:.01em}
.t-tags{display:flex;flex-wrap:wrap;gap:6px;width:100%}
.t-time{grid-area:time;font:500 13px var(--f-mono);font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.t-bar{grid-area:bar;width:100%;height:22px;margin:0;-webkit-appearance:none;appearance:none;background:transparent;--p:0%}
.t-bar::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,var(--c1) var(--p),var(--line) var(--p))}
.t-bar::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;margin-top:-6px;border-radius:50%;background:var(--paper);border:3px solid var(--c1)}
.t-bar::-moz-range-track{height:4px;border-radius:2px;background:var(--line)}
.t-bar::-moz-range-progress{height:4px;border-radius:2px;background:var(--c1)}
.t-bar::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--paper);border:3px solid var(--c1)}
.t-bar:disabled{opacity:.35}
.t-msg{grid-column:2/-1;font-size:15px;color:var(--err)}
@media (max-width:520px){.track{padding:12px 14px;gap:4px 12px}.t-play{width:46px;height:46px}.t-title{font-size:20px}}

.services{display:grid;gap:14px}
.service{border:2px solid var(--line);border-radius:16px;padding:20px 20px 18px;display:grid;gap:8px;background:var(--ink)}
.service h3{font:400 26px/1.05 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.service p{color:var(--muted);font-size:17px}
.service a{font:600 16px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;justify-self:start}
.service.featured{border-color:var(--c1);background:var(--panel)}
.service.featured h3{color:var(--c1)}

/* ---------- Workshops ---------- */
.cards{display:grid;gap:16px;margin-bottom:48px}
.cards-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cards-3{grid-template-columns:minmax(0,1fr)}}
.card{display:flex;flex-direction:column;gap:12px;padding:22px 22px 20px;border:2px solid var(--line);border-radius:16px;background:var(--panel);min-width:0}
.card h3{display:flex;align-items:center;gap:10px;font:400 30px/1 var(--f-disp);text-transform:uppercase;letter-spacing:.01em}
.card h3::before{content:"";width:12px;height:12px;border-radius:50%;background:var(--c2);border:1.5px solid var(--paper);flex:none}
.card p{color:var(--muted);font-size:17px}

.school{display:grid;gap:28px;padding:30px 30px 28px;border:3px solid var(--paper);border-radius:18px 24px 20px 26px;background:var(--panel);
  box-shadow:8px 8px 0 0 var(--ink),8px 8px 0 3px var(--c2);margin:0 11px 11px 0}
.school-head{display:grid;gap:10px;max-width:44em}
.badge{justify-self:start;font:400 15px/1 var(--f-disp);letter-spacing:.06em;text-transform:uppercase;padding:6px 9px 5px;border-radius:5px;background:var(--c1);color:var(--ink);transform:rotate(-2deg)}
.school h3{font:400 clamp(34px,4.4vw,52px)/1 var(--f-disp);text-transform:uppercase}
.school-head p{font-size:19px}
.school-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.school-col{display:grid;gap:8px;align-content:start;padding:20px 22px;border-radius:14px;background:var(--raised);border:2px solid var(--line);min-width:0}
.school-col .label{color:var(--c1)}
.school-col h4{margin:0;font:600 25px/1.15 var(--f-cond);letter-spacing:.01em}
.school-col p{color:var(--muted);font-size:17px}
.school-points{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px 24px;margin:0;padding:0;list-style:none}
.school-points li{display:grid;gap:4px;align-content:start;padding-left:14px;border-left:3px solid var(--c2)}
.school-points b{font:600 17px var(--f-cond);letter-spacing:.08em;text-transform:uppercase}
.school-points span{font-size:16px;color:var(--muted)}
.school-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.school-foot p{font-size:16px;color:var(--muted);max-width:30em}
@media (max-width:900px){.school-points{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.school-cols{grid-template-columns:minmax(0,1fr)}.school{padding:22px 18px 20px}}

/* ---------- Playground ---------- */
.pg{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center}
@media (max-width:900px){.pg{grid-template-columns:minmax(0,1fr);gap:32px}}
.pg-art{position:relative;background:var(--ink);border:3px solid var(--paper);border-radius:22px 28px 20px 30px;
  box-shadow:8px 8px 0 0 var(--ink),8px 8px 0 3px var(--c3);margin:0 11px 11px 0}
.pg-visual{width:100%;border-radius:19px 25px 17px 27px}
.pg-art .sticker{position:absolute;right:-6px;top:18px;font:400 16px/1 var(--f-disp);letter-spacing:.05em;text-transform:uppercase;background:var(--c1);color:var(--ink);padding:7px 10px 6px;border-radius:6px;transform:rotate(5deg);box-shadow:3px 3px 0 var(--ink)}
.pg-text{display:grid;gap:18px;min-width:0}
.pg-text h3{font:400 clamp(34px,4.4vw,52px)/1 var(--f-disp);text-transform:uppercase}
.pg-text h3 span{color:var(--c3-text)}
.pg-text > p{font-size:19px}
.feat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 24px;margin:0;padding:0;list-style:none}
.feat li{display:grid;gap:2px;padding-left:14px;border-left:3px solid var(--c3)}
.feat b{font:500 13px var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--c3-text)}
.feat span{font-size:16px;color:var(--muted)}
@media (max-width:520px){.feat{grid-template-columns:minmax(0,1fr)}}
.pg-note{font-size:15px;color:var(--muted)}

/* ---------- Over ---------- */
.over{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:start}
@media (max-width:900px){.over{grid-template-columns:minmax(0,1fr);gap:36px}}
.mottos{display:grid;gap:8px}
.motto{font:400 clamp(52px,7.6vw,104px)/.9 var(--f-disp);text-transform:uppercase}
.motto em{font-style:normal;color:var(--c1)}
.motto.second em{color:var(--c2)}
.over-text{display:grid;gap:18px}
.over-text p{max-width:36em}
.credo{display:grid;gap:8px;padding:18px 20px;border:2px solid var(--line);border-radius:14px;background:var(--panel)}
.credo ol,.credo ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0;padding:0;list-style:none}
.credo li{font:600 19px/1 var(--f-cond);letter-spacing:.06em;text-transform:uppercase;padding:8px 12px;border-radius:9px;background:var(--raised)}
.credo ol li + li::before{content:"→";margin-right:10px;color:var(--c2)}

/* ---------- Contact ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:48px;align-items:start}
@media (max-width:900px){.contact{grid-template-columns:minmax(0,1fr)}}
.form{display:grid;gap:18px;padding:26px;border:2px solid var(--line);border-radius:18px;background:var(--panel)}
.row2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media (max-width:640px){.row2{grid-template-columns:minmax(0,1fr)}.form{padding:20px 16px}}
.field{display:grid;gap:6px;min-width:0}
.field label{font:600 14px/1.2 var(--f-cond);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field label .opt{text-transform:none;letter-spacing:.02em;font-weight:500;color:var(--dim)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;border-radius:12px;border:2px solid var(--line);background:var(--ink);color:var(--paper);font:400 18px/1.4 var(--f-body)}
.field textarea{min-height:170px;resize:vertical}
.field select{appearance:none;-webkit-appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 22px) 52%,calc(100% - 16px) 52%;background-size:6px 6px;background-repeat:no-repeat;padding-right:40px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--c1);box-shadow:0 0 0 3px color-mix(in srgb,var(--c1) 35%,transparent)}
.field [aria-invalid="true"]{border-color:var(--err)}
.err{font-size:15px;color:var(--err)}
.hp{position:absolute!important;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px}
.form-note{font-size:15px;color:var(--muted);max-width:34em}
.status{padding:14px 16px;border-radius:12px;font-size:17px;border:2px solid currentColor}
.status.ok{color:var(--ok);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.status.bad{color:var(--err);background:color-mix(in srgb,var(--err) 10%,transparent)}
.status-target{display:none}
.status-target:target{display:block}
.contact-side{display:grid;gap:20px}
.contact-side h3{font:400 30px/1.05 var(--f-disp);text-transform:uppercase}
.contact-side dl{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 18px;margin:0}
.contact-side dt{font:500 12.5px/1.9 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.contact-side dd{margin:0;font-variant-numeric:tabular-nums}
.contact-side p{color:var(--muted);font-size:17px}

/* ---------- Voet ---------- */
.site-foot{border-top:1px solid var(--line);background:var(--panel)}
.site-foot .wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;padding-block:40px calc(40px + env(safe-area-inset-bottom,0px))}
.foot-brand{display:grid;gap:6px}
.foot-logo{width:84px;height:auto}
.foot-legal{font:500 13px/1.8 var(--f-mono);color:var(--muted);font-variant-numeric:tabular-nums}
.foot-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin:0;padding:0;list-style:none;align-self:start}
.foot-nav a{font:600 16px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.foot-nav a:hover{color:var(--c1)}
.privacy{grid-column:1/-1;border-top:1px dashed var(--line);padding-top:18px}
.privacy summary{cursor:pointer;font:600 17px var(--f-cond);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.privacy-body{display:grid;gap:12px;margin-top:14px;max-width:46em;font-size:16px;color:var(--muted)}
.privacy-body h3{font:600 17px var(--f-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--paper);margin-top:6px}
@media (max-width:640px){.site-foot .wrap{grid-template-columns:minmax(0,1fr)}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important}}

/* ---------- Speler onderin ---------- */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:25;background:color-mix(in srgb,var(--panel) 95%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:2px solid var(--paper);box-shadow:0 -6px 0 0 color-mix(in srgb,var(--c1) 55%,transparent);padding-bottom:env(safe-area-inset-bottom,0px)}
.dock-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;grid-template-areas:"ctl info time close" "ctl seek seek close";gap:0 18px;align-items:center;padding-block:10px 8px}
.dock-ctl{grid-area:ctl;display:flex;align-items:center;gap:8px}
.dock-btn{width:42px;height:42px;border-radius:50%;border:2px solid var(--line);background:transparent;color:var(--paper);display:grid;place-items:center;cursor:pointer;transition:background .15s,border-color .15s}
.dock-btn:hover{background:var(--raised);border-color:var(--paper)}
.dock-btn svg{width:16px;height:16px}
.dock-btn:disabled{opacity:.35;cursor:default}
.dock-play{width:54px;height:48px;border-radius:12px 16px 11px 15px;background:var(--paper);color:var(--ink);border:3px solid var(--ink);box-shadow:4px 4px 0 var(--c1);display:grid;place-items:center;cursor:pointer}
.dock-play:active{translate:2px 2px;box-shadow:2px 2px 0 var(--c1)}
.dock-play[aria-pressed="true"]{background:var(--c1)}
.dock-play svg{width:20px;height:20px}
.dock-play .i-pause,.dock-play[aria-pressed="true"] .i-play{display:none}
.dock-play[aria-pressed="true"] .i-pause{display:block}
.dock-info{grid-area:info;display:flex;align-items:baseline;gap:4px 10px;min-width:0;color:var(--paper);text-decoration:none;white-space:nowrap;overflow:hidden}
.dock-info:hover .dock-title{color:var(--c1)}
.dock-title{font:600 21px/1.2 var(--f-cond);letter-spacing:.01em;overflow:hidden;text-overflow:ellipsis}
.dock-tags{font:600 13px/1 var(--f-cond);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);overflow:hidden;text-overflow:ellipsis}
.dock-time{grid-area:time}
.dock-close{grid-area:close}
.dock-seek{grid-area:seek;height:18px}
body.has-dock{padding-bottom:calc(84px + env(safe-area-inset-bottom,0px))}
@media (max-width:640px){
  .dock-in{gap:0 10px;padding-block:8px 6px}
  .dock-btn{width:36px;height:36px}
  .dock-play{width:48px;height:42px}
  .dock-ctl{gap:6px}
  .dock-info .t-cat{display:none}
  .dock-tags{font-size:11px}
  .dock-title{font-size:18px}
  .dock-time{font-size:12px}
}
@media (max-width:380px){.dock-time{display:none}.dock-in{grid-template-areas:"ctl info close close" "ctl seek seek seek"}}

/* ---------- Binnenkort-pagina: alles gecentreerd ---------- */
.soon-page .site-head .wrap{justify-content:center}
.soon-page .sec-head{justify-items:center;text-align:center;margin-inline:auto}
.soon-page .sec h2{justify-content:center}
.soon-page .sec-head p{margin-inline:auto}
.soon-page .beats-grid{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto}
.soon-page .contact{grid-template-columns:minmax(0,1fr);max-width:760px;margin-inline:auto;justify-items:stretch}
.soon-page .form-foot{justify-content:center;text-align:center}
.soon-page .form-foot .form-note{flex-basis:100%}
.soon-page .contact-side{justify-items:center;text-align:center}
.soon-page .contact-side dl{grid-template-columns:minmax(0,1fr);justify-items:center;gap:2px}
.soon-page .contact-side dd{margin-bottom:12px}
.soon-page .site-foot .wrap{grid-template-columns:minmax(0,1fr);justify-items:center;text-align:center}
.soon-page .foot-brand{justify-items:center}
.soon-page .privacy{width:100%}
.soon-page .privacy summary{text-align:center;list-style-position:inside}
.soon-page .privacy-body{margin-inline:auto;text-align:center}