/* Ronde 9: (1) de grote koppen (h1, h2) in Inter vet; (2) de vaste Spotify-speler onderaan.
   Alleen home.html laadt dit bestand. Beweging staat stil bij prefers-reduced-motion en ?still=1 (.calm). */

/* ---------------------------------------------------------------- 1. KOPPEN IN INTER */
/* Inter lokaal (SIL OFL 1.1), variabel gewicht. Alleen lettertype, gewicht en letterafstand veranderen;
   de gele highlight (.y), de harde schaduw en de gelaagde kop in de header blijven zoals ze waren. */
@font-face{font-family:"Inter";font-weight:100 900;font-style:normal;font-display:swap;src:url(../fonts/inter-variable.woff2) format("woff2")}
:root{--f-head:"Inter","DM Sans",system-ui,sans-serif}
h1,h2{font-family:var(--f-head);font-weight:800;letter-spacing:-.012em}
/* Inter is smaller dan Archivo Black en de hoofdletters staan dicht op elkaar bij 800: de gelaagde kop krijgt een fractie lucht,
   de kleine bovenregel houdt zijn eigen ruime letterafstand uit ronde 6 */
.h4 .h6 h1 .h6-b{letter-spacing:-.008em;font-weight:800}
.h4 .h6 h1 .h6-a{font-weight:700}

/* ---------------------------------------------------------------- 2. VASTE SPELER */
:root{--pw-h:60px}
body.pw-on{padding-bottom:calc(var(--pw-h) + env(safe-area-inset-bottom,0px))}
/* een focus of een anker dat naar een veld scrolt, belandt boven de balk */
html{scroll-padding-bottom:calc(var(--pw-h) + 24px)}
.pw{position:fixed;left:0;right:0;bottom:0;z-index:70;background:var(--ma-ink);border-top:3px solid var(--ma-yellow);box-shadow:0 -10px 30px rgba(8,2,20,.55)}
.pw-in{display:flex;align-items:center;gap:14px;max-width:calc(1240px + 2*var(--gut));margin-inline:auto;padding:0 var(--gut)}
.pw-bar{padding-bottom:env(safe-area-inset-bottom,0px)}
.pw-bar .pw-in{height:calc(var(--pw-h) - 3px)}
.pw-name{flex:1;min-width:0;font:700 .8125rem/1.2 var(--f-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ma-white);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pw-name i{font-style:normal;color:var(--ma-lilac);font-weight:600}
.pw-btn{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;cursor:pointer;color:var(--ma-ink);background:var(--ma-yellow);border-radius:50%;box-shadow:3px 3px 0 var(--ma-magenta);transition:transform 140ms var(--ease)}
.pw-btn svg{width:20px;height:20px;fill:currentColor}
.pw-play svg{margin-left:2px}
.pw-tog{background:transparent;color:var(--ma-white);border:2px solid var(--ma-white);box-shadow:none}
.pw-tog svg{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .28s var(--ease)}
.pw[data-open] .pw-tog svg{transform:rotate(180deg)}
.pw-btn:hover{transform:scale(1.07)}
.pw-tog:hover{background:var(--ma-yellow);color:var(--ma-ink);border-color:var(--ma-yellow)}
.pw-btn:focus-visible{outline:3px solid var(--ma-white);outline-offset:3px;box-shadow:0 0 0 6px var(--ma-magenta)}
/* de lade: hoogte 0 en onzichtbaar tot hij open staat, zodat een verborgen speler niet met Tab bereikbaar is maar wel blijft spelen */
.pw-panel{height:0;overflow:hidden;visibility:hidden;transition:height .3s var(--ease),visibility 0s .3s}
.pw[data-open] .pw-panel{height:min(352px,58dvh,58vh);visibility:visible;transition:height .3s var(--ease),visibility 0s}
.pw-stage{height:min(352px,58dvh,58vh);width:min(100%,560px);padding:10px 0 12px;box-sizing:border-box}
.pw-panel .pw-in{align-items:flex-start}
.pw-stage iframe{display:block;width:100%;height:100%;border:0;background:var(--ma-ink);border-radius:12px}
.pw-wait{display:grid;place-items:center;height:100%;font:600 .875rem/1.3 var(--f-body);color:var(--ma-lilac)}
@media(max-width:700px){
 .pw-name{letter-spacing:.08em}
 .pw-stage{width:100%}
}
.calm .pw-panel,.calm .pw[data-open] .pw-panel,.calm .pw-btn,.calm .pw-tog svg{transition:none}
@media(prefers-reduced-motion:reduce){.pw-panel,.pw[data-open] .pw-panel,.pw-btn,.pw-tog svg{transition:none}.pw-btn:hover{transform:none}}
@media(print){.pw{display:none}}
.no-js .pw{display:none}