/* =====================================================================
   emno.nl en guiljam.nl — gedeeld designsysteem "Pressing" (2026), geleverd door www.1mg.nl
   Naar het persen van platen: volle vlakken in plaats van haarlijnen, de
   hoes als squircle, grote cijfers als matrixnummers in de uitloopgroef,
   een stempel-oranje accent. Altijd donker (pruim-grafiet, geen zwart).
   Letters: Instrument Serif (koppen, licht en smal), Instrument Sans
   (lopende tekst), Geist Mono (cijfers en labels). Zelf gehost.
   2026-technieken: @layer + nesting, oklch/color-mix,
   corner-shape (squircle), text-box (trim), scroll-state() container
   queries, view transitions, anchor positioning, scroll-driven animaties,
   @starting-style, sibling-index(), interpolate-size, field-sizing,
   ::scroll-button, linear() easing. Alles met terugval.
   ===================================================================== */
@layer reset, tokens, base, layout, components, pages, motion;

/* ---------- fonts (zelf gehost, alleen latin; geen verzoek naar Google) ---------- */
@font-face { font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/instrument-serif-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/instrument-sans-italic-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/geist-mono-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Terugvalletters met dezelfde maat, zodat de tekst niet verspringt zodra de echte fonts binnen zijn. */
@font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia"); size-adjust: 92%; ascent-override: 88%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans Fallback"; src: local("Arial"); size-adjust: 99%; ascent-override: 93%; descent-override: 24%; line-gap-override: 0%; }

@property --shine { syntax: "<percentage>"; inherits: false; initial-value: -40%; }
@property --slide { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }

/* Zachte paginawissel: <main> schuift en vervaagt, de balk en de speler blijven staan (zie de PJAX-code in nav.php). */
@view-transition { navigation: auto; }

/* ---------- reset ---------- */
@layer reset {
    *, *::before, *::after { box-sizing: border-box; }
    [hidden] { display: none !important; }   /* hidden wint altijd, ook van een eigen display */
    html { -webkit-text-size-adjust: 100%; scrollbar-gutter: stable; overflow-x: clip; interpolate-size: allow-keywords; }
    body { margin: 0; min-block-size: 100dvh; }
    /* Niet selecteerbaar of sleepbaar: hoezen, kaarten, de platenkast en knoppen. Tekst blijft selecteerbaar. */
    img, svg, .card, .shelf, .track-play, .btn, button { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
    img, svg { -webkit-user-drag: none; user-drag: none; display: block; max-inline-size: 100%; }
    h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
    ol, ul { padding: 0; list-style: none; }
    a { color: inherit; text-decoration: none; }
    button, select, input { font: inherit; color: inherit; }
    button { background: none; border: 0; padding: 0; cursor: pointer; }
}

/* ---------- tokens ---------- */
@layer tokens {
    :root {
        color-scheme: dark;

        /* Diep pruim-grafiet (geen zwart). */
        --paper:   oklch(18% 0.025 320);
        --paper-2: oklch(22.5% 0.03 320);
        --paper-3: oklch(28% 0.032 320);
        --ink:     oklch(96% 0.01 80);
        --ink-2:   oklch(82% 0.015 80);
        --mute:    oklch(67% 0.02 320);   /* >= 4,5:1 op paper en paper-2 */
        --rule:    oklch(96% 0.01 80 / .1);
        --rule-2:  oklch(96% 0.01 80 / .24);
        /* Stempel-oranje: knoppen, vlakken en grote tekst. Voor kleine tekst op licht papier een donkerder variant. */
        --accent:      oklch(75% 0.17 50);
        --accent-text: oklch(78% 0.16 55);
        --accent-ink:  oklch(20% 0.03 320);
        --spotify: #1ed760; --youtube: #ff4e45;
        --top40:   oklch(56% 0.21 15);   /* wit erop >= 4,5:1 */
        --theme:   oklch(52% 0.08 300);

        --font-display: "Instrument Serif", "Instrument Serif Fallback", Georgia, serif;
        --font-ui:      "Instrument Sans", "Instrument Sans Fallback", system-ui, sans-serif;
        --font-mono:    "Geist Mono", "SF Mono", ui-monospace, Menlo, monospace;

        --gutter: clamp(1rem, 3vw, 3rem);
        --topbar-h: 3.5rem;   /* 56px: hele pixels, anders trilt sticky-inhoud */
        --r-s: 8px; --r-m: 14px; --r-l: 22px; --r-pill: 999px;
        --fs-xs: clamp(.7rem, .66rem + .2vw, .78rem);
        --fs-s:  clamp(.84rem, .8rem + .2vw, .92rem);
        --fs-m:  clamp(.98rem, .94rem + .2vw, 1.06rem);
        --fs-l:  clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem);
        --fs-xl: clamp(3.2rem, 1.2rem + 7.5vw, 9rem);
        /* Gedeeld door alle pagina's: de titel van een pagina, de ruimte boven een paginakop, de ruimte tussen
           de regels van een titelblok (eyebrow, titel, feiten, samenvatting, knoppen) en de hoogte van knoppen en velden. */
        --fs-h1:     clamp(2.8rem, 1.4rem + 5.5vw, 6.5rem);
        --head-pad:  clamp(2rem, 5vw, 4rem);
        --title-gap: .9rem;
        --control-h: 2.5rem;

        --shadow-1: 0 1px 2px oklch(0% 0 0 / .18), 0 8px 24px -12px oklch(0% 0 0 / .45);
        --shadow-2: 0 2px 6px oklch(0% 0 0 / .22), 0 30px 60px -30px oklch(0% 0 0 / .7);
        --ease: cubic-bezier(.2, .8, .2, 1);
        --ease-spring: linear(0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .99 45.7%, 1.006 50%, 1.017 56.6%, 1.006 70%, 1);
    }
}

/* ---------- base ---------- */
@layer base {
    body {
        background: var(--paper); color: var(--ink);
        font-family: var(--font-ui); font-size: var(--fs-m); line-height: 1.5;
        font-optical-sizing: auto; text-rendering: optimizeLegibility; overscroll-behavior-y: none;
        /* Spotlight in de themakleur van de pagina, bovenaan, plus een zweem oranje rechts. */
        background-image:
            radial-gradient(70rem 34rem at 20% -10%, color-mix(in oklch, var(--theme) 22%, transparent), transparent 70%),
            radial-gradient(50rem 30rem at 100% 0%, color-mix(in oklch, var(--accent) 7%, transparent), transparent 70%);
        background-attachment: fixed;
    }
    /* Focus voor toetsenbord, afstandsbediening en controller (tv, spelcomputer): dikke ring in de
       accentkleur met een halo in papierkleur, zodat hij op hoezen en foto's net zo goed opvalt. */
    :focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; box-shadow: 0 0 0 7px color-mix(in oklch, var(--paper) 85%, transparent); }
    .card:focus-visible { box-shadow: none; outline-offset: 6px; }
    /* Tv's en consoles: groot scherm, ver weg, geen muis. Alles een maat groter en de afspeelknoppen
       altijd zichtbaar, want hover bestaat er niet en "verschijnt bij focus" is daar te subtiel. */
    @media (hover: none) and (width >= 1280px) {
        html { font-size: 118%; }
        .track-play, .card .overlay { opacity: 1; scale: 1; visibility: visible; translate: 0 0; }
        .track:has(.track-play) .track-idx { opacity: 0; }
        :focus-visible { outline-width: 4px; outline-offset: 5px; }
    }
    /* Heel breed (4K-tv, grote monitor): de basisgrootte iets mee laten groeien met het scherm. */
    @media (width >= 1800px) and (hover: hover) { html { font-size: 108%; } }
    /* Focus mag niet achter de plakkende balken verdwijnen (WCAG 2.4.11). */
    a, button, input, select, [tabindex] { scroll-margin-block: calc(var(--topbar-h) + 5.5rem) 1rem; }
    main:focus { outline: 0; }   /* doel van de skip-link; de rand hoort bij de inhoud, niet om de hele pagina */
    /* Alleen voor schermlezers. */
    .sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
    /* Skip-link: buiten beeld tot hij focus krijgt, dan als knop bovenin. */
    .skip {
        position: fixed; inset-block-start: .6rem; inset-inline-start: .6rem; z-index: 100; padding: .75rem 1.1rem; border-radius: var(--r-pill);
        font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; font-weight: 600;
        background: var(--accent); color: var(--accent-ink); translate: 0 -200%; transition: translate .2s;
        &:focus-visible { translate: 0 0; outline-color: var(--ink); }
    }
    html.is-loading { cursor: progress; }   /* zachte paginawissel bezig */

    h1, h2, .display { font-family: var(--font-display); font-optical-sizing: auto; }
    /* Koppen zonder de witruimte boven de kapitalen en onder de basislijn (text-box), zodat ze strak uitlijnen. */
    h1 { font-size: var(--fs-xl); line-height: .92; letter-spacing: -.01em; font-weight: 400; text-wrap: balance; text-box: trim-both cap alphabetic; }
    h2 { font-size: var(--fs-l); line-height: 1.05; letter-spacing: -.005em; font-weight: 400; text-wrap: balance; }
    h3, .label { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--mute); }
    p  { text-wrap: pretty; }
    .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
    ::selection { background: color-mix(in oklch, var(--accent) 35%, transparent); }
    /* Squircle: de hoeken van app-iconen, niet de cirkelhoeken van border-radius. Zonder corner-shape gewone hoeken. */
    .squircle { border-radius: var(--r-s); @supports (corner-shape: squircle) { corner-shape: squircle; border-radius: 12%; } }
    ::view-transition-old(main) { animation: vt-out .16s ease-in both; }
    ::view-transition-new(main) { animation: vt-in .32s var(--ease) both; }
}

/* ---------- layout ---------- */
@layer layout {
    /* De balk plakt; zodra hij vastzit (scroll-state) krijgt hij een lijn en een schaduw. */
    .topbar { position: sticky; inset-block-start: 0; z-index: 30; container-type: scroll-state; view-transition-name: topbar; }
    .topbar-inner {
        block-size: var(--topbar-h); max-inline-size: 1920px; margin-inline: auto; padding-inline: var(--gutter);
        display: flex; align-items: center; gap: 1.25rem;
        background: color-mix(in oklch, var(--paper) 82%, transparent); border-block-end: 1px solid transparent; transition: border-color .3s, box-shadow .3s;
        @supports (backdrop-filter: blur(1px)) { backdrop-filter: blur(16px) saturate(160%); }
    }
    @container scroll-state(stuck: top) { .topbar-inner { border-block-end-color: var(--rule); box-shadow: 0 10px 30px -18px oklch(0% 0 0 / .5); } }
    /* Leesvoortgang als dunne oranje lijn onder de balk (scroll-driven). */
    .topbar::after { content: ""; position: absolute; inset-inline-start: 0; inset-block-end: -1px; block-size: 2px; inline-size: 100%; background: var(--accent); transform-origin: left; scale: 0 1; pointer-events: none; }
    @supports (animation-timeline: scroll()) { .topbar::after { animation: progress linear both; animation-timeline: scroll(root); } }

    .brand {
        display: inline-flex; align-items: center; gap: .5rem; font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.5rem; letter-spacing: 0; line-height: 1;
        /* Het stempel: een oranje rondje met de e ervoor. */
        &::before { content: "e"; inline-size: 1.65rem; block-size: 1.65rem; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); font-size: 1.2rem; font-style: italic; padding-block-end: .12em; }
    }
    /* Menu als capsule met een schuivende indicator: anchor positioning volgt het actieve item. */
    .topbar nav {
        position: relative; display: flex; gap: .15rem; margin-inline-start: auto; padding: .2rem; border-radius: var(--r-pill); background: color-mix(in oklch, var(--ink) 6%, transparent);
        a {
            position: relative; z-index: 1; padding: .45rem .8rem; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-s); letter-spacing: -.005em; color: var(--ink-2); white-space: nowrap;
            transition: color .2s, background-color .2s;
            &:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 7%, transparent); }
            &[aria-current="page"] { color: var(--accent-ink); anchor-name: --nav-current; &:hover { background: transparent; } }
        }
        @supports (position-anchor: --a) {
            &::before { content: ""; position: absolute; z-index: 0; position-anchor: --nav-current; inset: anchor(top) anchor(right) anchor(bottom) anchor(left); border-radius: var(--r-pill); background: var(--accent); transition: inset .4s var(--ease-spring); }
            &:not(:has([aria-current="page"]))::before { display: none; }
        }
        @supports not (position-anchor: --a) { a[aria-current="page"] { background: var(--accent); } }
    }
    /* Zoekveld in de balk als pil, met een paneel (command-palette) eronder. */
    .search {
        position: relative; display: flex; align-items: center; gap: .55rem; flex: 1 1 auto; max-inline-size: 24rem; margin-inline: .5rem auto;
        padding: 0 .9rem; block-size: 2.3rem; border-radius: var(--r-pill); background: color-mix(in oklch, var(--ink) 6%, transparent); transition: background-color .2s, box-shadow .2s;
        &:focus-within { background: var(--paper); box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-1); }
        .search-ico { inline-size: 16px; block-size: 16px; color: var(--mute); flex: none; }
        input {
            flex: 1; min-inline-size: 0; font-size: var(--fs-s); color: var(--ink); background: transparent; border: 0; padding: 0;
            &::placeholder { color: var(--mute); }
            &::-webkit-search-cancel-button { appearance: none; }
        }
    }
    .search-results {
        position: absolute; inset-inline: -.5rem; inset-block-start: calc(100% + .6rem); z-index: 40; max-block-size: min(70dvh, 34rem); overflow: auto; overscroll-behavior: contain;
        background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-2); padding: .4rem;
        @starting-style { translate: 0 -6px; opacity: 0; } transition: translate .22s var(--ease), opacity .2s;
        .search-empty { padding: .8rem .7rem; color: var(--mute); font-size: var(--fs-s); }
    }
    .search-heading { padding: .6rem .7rem .3rem; }   /* kopje "Albums"/"Tracks" boven de resultaten */
    .search-item {
        display: flex; align-items: center; gap: .7rem; padding: .4rem .5rem; border-radius: var(--r-s); color: var(--ink);
        &:hover, &:focus-within { background: var(--paper-2); }
        img, .search-nocover { inline-size: 38px; block-size: 38px; object-fit: cover; flex: none; background: var(--paper-3); border-radius: 6px; }
        .search-cover { flex: none; display: block; }
        &.artist img, &.artist .search-nocover { border-radius: 50%; }   /* artiesten: ronde foto */
        .track-play { position: static; opacity: 1; scale: 1; inline-size: 30px; block-size: 30px; flex: none; svg { inline-size: 12px; block-size: 12px; } }
        .search-text { display: grid; min-inline-size: 0; flex: 1;
            b { font-weight: 600; font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            small { color: var(--mute); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
    }
    /* Smal scherm: menu op de eerste rij, zoekveld op een eigen regel eronder (vaste hoogte voor de plakkende balken). */
    @media (width < 720px) {
        :root { --topbar-h: 97px; }
        .topbar-inner { flex-wrap: wrap; block-size: var(--topbar-h); padding-block: .5rem; row-gap: .45rem; align-content: center; gap: .6rem; }
        .search { order: 3; flex-basis: 100%; max-inline-size: none; margin-inline: 0; }
        .search-results { inset-inline: 0; }
        .topbar nav { margin-inline-start: auto; }
    }
    @media (width < 520px) {
        /* Vier menu-items passen niet naast het merk: het menu compacter en van het merk blijft alleen
           het stempel over (de naam blijft leesbaar voor schermlezers). */
        .brand { font-size: 0; gap: 0; }
        .topbar nav { gap: 0; a { padding: .4rem .42rem; font-size: .72rem; } }
        @media (width < 400px) { .topbar nav a { padding-inline: .34rem; font-size: .68rem; letter-spacing: -.01em; } }
        .search { order: 3; flex: 1 1 0; }
    }
    .page { max-inline-size: 1920px; margin-inline: auto; padding: 0 var(--gutter) 2rem; overflow-x: clip; view-transition-name: main; }
    .site-footer {
        max-inline-size: 1920px; margin-inline: auto; padding: 2rem var(--gutter) 2rem; color: var(--mute); view-transition-name: footer;
        font-family: var(--font-display); font-style: italic; font-weight: 400; font-size: 1.3rem;
        display: flex; gap: 1.4rem; align-items: baseline; flex-wrap: wrap;
        &::before { content: ""; flex: 1; block-size: 1px; background: var(--rule-2); align-self: center; }
        a, .consent-open, .foot-year { font-family: var(--font-mono); font-style: normal; font-size: var(--fs-xs); line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--mute); text-decoration: none; }
        a:hover, .consent-open:hover { color: var(--ink); }
    }
}

/* ---------- components ---------- */
@layer components {
    /* Knoppen: pillen. Vol (accent), omlijnd (ghost), rond (pijl). */
    .btn {
        display: inline-flex; align-items: center; gap: .5rem; min-block-size: var(--control-h); padding: 0 1.1rem; border: 1.5px solid var(--ink); border-radius: var(--r-pill);
        font-family: var(--font-ui); font-weight: 650; font-size: var(--fs-s); letter-spacing: -.005em; line-height: 1; color: var(--ink); background: transparent;
        transition: background-color .2s, color .2s, border-color .2s, transform .35s var(--ease-spring);
        &:hover { background: var(--ink); color: var(--paper); } &:active { transform: scale(.97); }
        svg { inline-size: 1em; block-size: 1em; }
    }
    .btn-ghost { border-color: var(--rule-2); color: var(--ink-2); background: color-mix(in oklch, var(--ink) 4%, transparent); &:hover { border-color: var(--ink); } }
    /* Merkknoppen: Spotify (groen) en YouTube (rood), omlijnd, vol bij hover. */
    .btn-sp { color: var(--spotify); border-color: color-mix(in oklch, var(--spotify) 45%, transparent); &:hover { background: var(--spotify); border-color: var(--spotify); color: #0c1a10; } }
    .btn-yt { color: var(--youtube); border-color: color-mix(in oklch, var(--youtube) 45%, transparent); &:hover { background: var(--youtube); border-color: var(--youtube); color: #fff; } }
    /* Zacht vlak met ronde hoeken: de basis van trackregels, ledenkaartjes, feiten en vraag-antwoordblokken. */
    .panel { padding: .7rem .9rem; border-radius: var(--r-m); background: color-mix(in oklch, var(--ink) 3%, transparent); }
    .btn-play-here { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); &:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); } }
    .btn-back { padding-inline: .85rem 1.05rem; }
    .btn-arrow { inline-size: var(--control-h); block-size: var(--control-h); padding: 0; justify-content: center; svg { inline-size: 16px; block-size: 16px; } }
    .prevnext { display: inline-flex; gap: .4rem; }

    .eyebrow { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); display: inline-flex; align-items: center; gap: .5rem; }
    /* Feiten als kleine chips. */
    .facts {
        display: flex; flex-wrap: wrap; gap: .4rem; color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; font-variant-numeric: tabular-nums;
        li { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .65rem; border-radius: var(--r-pill); background: color-mix(in oklch, var(--ink) 6%, transparent); }
    }
    .hero-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: .4rem; }

    .section-head {
        display: flex; align-items: center; gap: 1rem; margin-block: 3.2rem 1.2rem;
        h2 { display: inline-flex; align-items: center; gap: .6rem; }
        .ico { inline-size: 1.2em; block-size: 1.2em; color: var(--accent-text); }
        .spacer { flex: 1; block-size: 1px; background: var(--rule-2); }
    }

    /* Tracklijst als matrix: mono-cijfers, rijen als zachte vlakken met ronde hoeken. */
    .tracks { container-type: inline-size; display: grid; gap: 2px; }
    .tracks-cols { @media (width >= 1000px) { display: block; column-count: 2; column-gap: 2rem; > .track { margin-block-end: 2px; } } }
    .track {
        display: grid; grid-template-columns: 2.6rem 1fr auto; align-items: center; gap: .9rem;
        padding: .6rem .6rem .6rem .35rem; border-radius: var(--r-m); break-inside: avoid; background: color-mix(in oklch, var(--ink) 3%, transparent);
        transition: background-color .2s;
        &:hover { background: color-mix(in oklch, var(--ink) 7%, transparent); }
        &:has(.track-cover) { grid-template-columns: 2.6rem auto 1fr auto; }
    }
    .track-n { position: relative; display: grid; place-items: center; min-block-size: 2.2rem; font-family: var(--font-mono); font-size: var(--fs-s); color: var(--mute); font-variant-numeric: tabular-nums; }
    .track-idx { grid-area: 1 / 1; transition: opacity .15s; }
    .track-play {
        grid-area: 1 / 1; display: grid; place-items: center; inline-size: 2.2rem; block-size: 2.2rem; border-radius: 50%;
        background: var(--accent); color: var(--accent-ink); opacity: 0; scale: .6; transition: opacity .15s, scale .35s var(--ease-spring), background-color .2s;
        svg { inline-size: 14px; block-size: 14px; translate: 1px 0; }
        &:hover { background: var(--ink); color: var(--paper); }
    }
    /* Muis/trackpad: bij hover. Aanraakscherm: na een tik op de regel (.is-active via JS). */
    @media (hover: hover) { .track:hover .track-play { opacity: 1; scale: 1; } .track:hover .track-idx { opacity: 0; } }
    .track:focus-within .track-play, .track.is-active .track-play { opacity: 1; scale: 1; }
    .track:focus-within .track-idx,  .track.is-active .track-idx  { opacity: 0; }
    .track.is-active { background: color-mix(in oklch, var(--ink) 7%, transparent); }
    .track-cover {
        display: block; inline-size: 46px; aspect-ratio: 1; overflow: clip; background: var(--paper-3); border-radius: 8px;
        img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale .4s var(--ease); }
        &:hover img { scale: 1.08; }
        /* Plaatshouder zonder hoes: zacht themavlak met een muzieknootje. */
        &.ph {
            display: grid; place-items: center; color: color-mix(in oklch, var(--theme) 50%, var(--ink));
            background: color-mix(in oklch, var(--theme) 18%, var(--paper-3));
            svg { inline-size: 50%; block-size: 50%; opacity: .85; }
        }
    }
    .track-body { min-inline-size: 0; }
    .track-title { font-weight: 650; letter-spacing: -.005em; overflow-wrap: anywhere; }
    .track-album-link { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: .18em; &:hover { color: var(--accent-text); text-decoration-color: currentColor; } }
    .track:hover .track-title { color: var(--accent-text); }
    .track-meta { color: var(--mute); font-size: var(--fs-s); overflow-wrap: anywhere; margin-block-start: .05rem; }
    .track-dur { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--mute); font-variant-numeric: tabular-nums; padding-inline-end: .2rem; }
    /* Smalle kolom: compacter, maar de duur blijft altijd zichtbaar. */
    @container (width < 460px) { .track { gap: .6rem; padding-inline: .2rem .4rem; } .track-cover { inline-size: 40px; } }
    @container (width < 340px) { .track { grid-template-columns: 2.2rem 1fr auto; gap: .45rem; } .track:has(.track-cover) { grid-template-columns: 2.2rem auto 1fr auto; } }

    /* Zijdes: maximaal twee per regel; op een smal scherm één onder elkaar. */
    .sides { display: grid; gap: 1.2rem; grid-template-columns: 1fr; @media (width >= 640px) { grid-template-columns: repeat(2, 1fr); } }
    /* Elke zijde als vlak in de themakleur, met een platenlabel (draait bij hover) en de letter als watermerk. */
    .side {
        position: relative; display: flex; flex-direction: column; isolation: isolate; overflow: clip;
        border-radius: var(--r-l); background: color-mix(in oklch, var(--theme) 10%, var(--paper-2)); padding: .4rem;
        &::after {  /* watermerk: de zijdeletter groot en zacht in de hoek */
            content: attr(data-side); position: absolute; inset-inline-end: -.02em; inset-block-end: -.28em; z-index: -1; pointer-events: none;
            font-family: var(--font-display); font-size: 11rem; font-weight: 400; line-height: 1; letter-spacing: -.02em;
            color: color-mix(in oklch, var(--theme) 60%, var(--ink)); opacity: .08;
        }
        h3 { display: flex; align-items: center; gap: .8rem; margin: 0; padding: .6rem .7rem .7rem; color: var(--ink); letter-spacing: .1em; }
        .side-name { flex: 1; }
        .side-meta { color: var(--ink-2); letter-spacing: .02em; text-transform: none; font-variant-numeric: tabular-nums; }
        .disc {  /* de plaat: groeven + label met letter, draait bij hover op de kaart */
            inline-size: 40px; block-size: 40px; border-radius: 50%; flex: none; display: grid; place-items: center; position: relative;
            background: repeating-radial-gradient(circle at center, oklch(16% 0.01 320) 0 1.5px, oklch(26% 0.012 320) 1.5px 3px);
            box-shadow: 0 0 0 1px oklch(0% 0 0 / .3), 0 6px 14px -8px oklch(0% 0 0 / .8);
            animation: spin-el 6s linear infinite; animation-play-state: paused;
            b { inline-size: 18px; block-size: 18px; border-radius: 50%; display: grid; place-items: center; position: relative;
                font-family: var(--font-display); font-weight: 400; font-size: .8rem; letter-spacing: 0; color: white;
                background: var(--theme); box-shadow: 0 0 0 2px oklch(16% 0.01 320); }
        }
        &:hover .disc { animation-play-state: running; }
        .tracks { padding: 0; }
        .track { background: color-mix(in oklch, var(--paper) 55%, transparent); &:hover, &.is-active { background: color-mix(in oklch, var(--paper) 85%, transparent); } }
    }

    /* Badges */
    .badge { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: .45rem; font-family: var(--font-mono); font-size: .62rem; letter-spacing: .06em; line-height: 1; border-radius: var(--r-pill); overflow: clip; }
    .badge-nl { padding: .28rem .45rem; border: 1px solid var(--rule-2); color: var(--ink-2); }
    /* Releasejaar van een track (album en playlist): regeltje boven de titel. */
    .track-year { display: flex; align-items: center; margin-block-end: .12rem; font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; color: var(--mute); font-variant-numeric: tabular-nums; line-height: 1.2; .badge { margin-inline-start: .5rem; } }
    .badge-top40 {
        background: color-mix(in oklch, var(--top40) 14%, transparent);   /* toelichting via title (en sr-only tekst) */
        .label { padding: .28rem .45rem; background: var(--top40); color: #fff; text-transform: uppercase; font-weight: 600; }
        .peak  { padding: .28rem .45rem; color: color-mix(in oklch, var(--top40) 70%, var(--ink)); font-weight: 600; }
    }

    /* Albumkaart: squircle-hoes met een vinylplaat erachter. Bij hover schuift de plaat rechts uit de hoes
       en draait mee, de hoes schuift iets naar links en het label in de themakleur komt eronderuit. */
    .card {
        --theme: oklch(52% 0.08 300);
        position: relative; display: block; aspect-ratio: 1; isolation: isolate;
        &::before { /* de vinylplaat achter de hoes */
            content: ""; position: absolute; inset: 4% 0 4% auto; aspect-ratio: 1; border-radius: 50%; z-index: -1;
            /* Groeven: op licht papier echt zwart vinyl, op donker papier een paar tinten lichter, anders valt
               de plaat weg tegen het pruim-grafiet. Randlijn en glans voor de vorm. */
            --v1: oklch(31% 0.012 320);
            --v2: oklch(42% 0.012 320);
            background:
                conic-gradient(from 200deg, transparent 0 6%, oklch(100% 0 0 / .16) 11%, transparent 16% 52%, oklch(100% 0 0 / .1) 58%, transparent 64%),
                radial-gradient(circle, var(--theme) 0 9%, var(--paper) 9.5% 12%, var(--v1) 12.5%, var(--v2) 30%, var(--v1) 31%, var(--v2) 60%, var(--v1) 61%, var(--v2) 100%);
            box-shadow: 0 0 0 1px oklch(100% 0 0 / .28), 0 10px 30px -12px oklch(0% 0 0 / .8);
            translate: var(--slide) 0; rotate: var(--angle); transition: --slide .5s var(--ease-spring), --angle 1.2s var(--ease);
        }
        img { inline-size: 100%; block-size: 100%; object-fit: cover; background: var(--paper-3); border-radius: inherit; corner-shape: inherit;
              box-shadow: 0 0 0 1px var(--rule), 0 12px 28px -18px oklch(0% 0 0 / .7); transition: translate .5s var(--ease-spring), box-shadow .4s; }
        /* Glans die bij hover over de hoes strijkt; schuift mee met de hoes. */
        &::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; corner-shape: inherit; background: linear-gradient(115deg, transparent calc(var(--shine) + 0%), oklch(100% 0 0 / .18) calc(var(--shine) + 20%), transparent calc(var(--shine) + 40%)); transition: --shine .7s var(--ease), translate .5s var(--ease-spring); }
        .overlay {
            position: absolute; inset-inline: 0; inset-block-end: 0; padding: .6rem .75rem .65rem; display: grid; gap: .05rem;
            background: color-mix(in oklch, var(--theme) 80%, oklch(20% 0.02 320)); color: white;
            border-end-start-radius: inherit; border-end-end-radius: inherit; corner-shape: inherit;
            /* Verborgen tot hover: de kaart clipt niet (de plaat steekt uit), dus ook echt onzichtbaar maken. */
            translate: 0 100%; opacity: 0; visibility: hidden; transition: translate .35s var(--ease), opacity .25s, visibility 0s .35s;
            .t { font-weight: 650; font-size: var(--fs-s); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
            .a { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        }
        &:hover, &:focus-visible {
            &::before { --slide: 44%; --angle: 120deg; }
            img { translate: -9% 0; box-shadow: 0 0 0 1px var(--rule-2), 0 30px 50px -24px color-mix(in oklch, var(--theme) 70%, black); }
            &::after { --shine: 100%; translate: -9% 0; }
            .overlay { translate: 0 0; opacity: 1; visibility: visible; transition: translate .35s var(--ease), opacity .25s, visibility 0s; }
        }
        &.ph { display: grid; place-items: center; text-align: center; padding: .9rem; background: linear-gradient(145deg, color-mix(in oklch, var(--theme) 60%, var(--paper-2)), color-mix(in oklch, var(--theme) 20%, var(--paper-2))); box-shadow: 0 0 0 1px var(--rule);
               .t { font-family: var(--font-display); font-size: var(--fs-l); font-weight: 400; line-height: 1; letter-spacing: -.01em; } .a { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; margin-block-start: .3rem; display: inline-block; } }
    }
    .grid { display: grid; gap: clamp(.8rem, 1.5vw, 1.4rem); grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); @media (width >= 700px) { grid-template-columns: repeat(auto-fill, minmax(186px, 1fr)); } }
    .card { scroll-margin-block-start: calc(var(--topbar-h) + 5.2rem); }   /* onder menu en categoriebalk, met ruimte voor de rand van de markering */
    /* Kapotte hoes (via de error-listener): titel en artiest gewoon tonen. */
    .card.ph .overlay { position: static; translate: none; opacity: 1; visibility: visible; transition: none; background: none; color: inherit; }
    .card.is-target { outline: 3px solid var(--accent); outline-offset: 5px; }   /* even gemarkeerd na "Alle albums" */

    /* Rails */
    .rail {
        display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: .4rem 0 1.2rem; anchor-name: --rail;
        &::-webkit-scrollbar { display: none; }
        > .card { flex: 0 0 clamp(150px, 18vw, 220px); scroll-snap-align: start; }
        &::scroll-button(*) { position: absolute; position-anchor: --rail; inline-size: 2.3rem; block-size: 2.3rem; border-radius: 50%; background: var(--ink); color: var(--paper); border: 0; font-size: 1rem; cursor: pointer; z-index: 3; box-shadow: var(--shadow-1); }
        &::scroll-button(*):disabled { display: none; }   /* niet nodig (past of einde bereikt): niet tonen */
        &::scroll-button(left)  { content: "←" / "Terug";  position-area: center left;  translate: 50% 0; }
        &::scroll-button(right) { content: "→" / "Verder"; position-area: center right; translate: -50% 0; }
    }

    /* Speler: zwevende capsule onderin; op smalle schermen tegen de onderrand. */
    .player {
        position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 40; pointer-events: none; padding: 0 .75rem .75rem; view-transition-name: player;
        @starting-style { translate: 0 24px; opacity: 0; } transition: translate .4s var(--ease-spring), opacity .3s;
    }
    .player-inner { pointer-events: auto; max-inline-size: 72rem; margin-inline: auto; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-l); box-shadow: var(--shadow-2); overflow: clip;
                    @supports (backdrop-filter: blur(1px)) { background: color-mix(in oklch, var(--paper-2) 86%, transparent); backdrop-filter: blur(20px) saturate(160%); } }
    .player-bar { display: flex; align-items: center; gap: .7rem; block-size: 2.4rem; padding-inline: 1rem .7rem;
                  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-2); }
    .player-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--spotify); animation: pulse 2s ease-out infinite; }
    .player-label { flex: 1; min-inline-size: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-transform: uppercase; }
    /* Link naar de pagina waar het afspelen begon. */
    .player-from { flex: 0 1 auto; min-inline-size: 0; max-inline-size: 18rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                   color: var(--accent-text); text-decoration: underline; text-underline-offset: .25em; text-decoration-color: color-mix(in oklch, var(--accent) 50%, transparent);
                   &:hover { color: var(--ink); text-decoration-color: var(--ink); } }
    @media (width < 640px) { .player-from { display: none; } .player { padding: 0; } .player-inner { border-radius: var(--r-l) var(--r-l) 0 0; border-block-end: 0; } }
    .player-queue { display: inline-flex; align-items: center; gap: .3rem; }
    .player-count { min-inline-size: 3.4rem; text-align: center; color: var(--mute); }
    .player-btn, .player-close { inline-size: 1.75rem; block-size: 1.75rem; display: grid; place-items: center; border-radius: 50%; color: var(--ink-2); font-size: .7rem; background: color-mix(in oklch, var(--ink) 8%, transparent);
                                 &:hover { background: var(--ink); color: var(--paper); } }
    .player-close { font-size: .65rem; margin-inline-start: .3rem; }
    .player-frame { block-size: 80px; padding: 0 .6rem .6rem; box-sizing: content-box; iframe { display: block; inline-size: 100%; block-size: 100%; border: 0; border-radius: 12px; } }
    .player.is-list .player-frame { block-size: 152px; }
    /* Melding zolang cookies niet zijn geaccepteerd (de speler van Spotify plaatst eigen cookies), met de knop om alsnog te accepteren. */
    .player-note { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1rem; padding: .1rem 1rem .7rem; font-size: var(--fs-s); color: var(--ink-2);
                   span { flex: 1 1 18rem; } .btn { min-block-size: 2rem; padding-inline: .8rem; } }
    /* De ruimte onder de pagina (en de plek van de cookiebalk) volgt de echte hoogte van de speler (--player-h, gezet door de speler zelf). */
    body.has-player { padding-block-end: calc(var(--player-h, 10rem) + 1rem); }
    .card.is-playing { outline: 2px solid var(--spotify); outline-offset: 3px; }
    .track.is-playing { background: color-mix(in oklch, var(--spotify) 14%, transparent); .track-title { color: var(--spotify); } }   /* groen alleen op donker; op licht een donkere groentint (contrast) */

    .eq { display: inline-flex; align-items: flex-end; gap: 2px; block-size: 14px; inline-size: 16px; margin-inline: auto;
          /* Basishoogtes, zodat de balkjes ook zonder animatie (reduced motion) zichtbaar zijn. */
          i { inline-size: 3px; block-size: 60%; border-radius: 2px; background: var(--accent); animation: eq .9s ease-in-out infinite; } i:nth-child(2) { block-size: 100%; animation-delay: .2s; } i:nth-child(3) { block-size: 40%; animation-delay: .4s; } }
}

/* ---------- pages ---------- */
@layer pages {
    /* Home: de titel staat vóór de platenkast. De ruggen vullen de hele header (even hoog, geen plank). */
    .home-hero {
        position: relative; isolation: isolate; padding-block: clamp(3.5rem, 8vw, 7rem) 1.6rem; display: grid; gap: 1rem; overflow: clip;
        /* Van rand tot rand: de kast negeert de zijmarge van de pagina, de titel houdt hem. */
        margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
        /* De titel laat de muis door naar de ruggen eronder, zodat het kaartje ook over de tekst werkt. */
        h1 { position: relative; z-index: 1; pointer-events: none; font-size: var(--fs-h1); }
    }
    .shelf { position: absolute; inset: 0; z-index: 0; display: grid; }
    .shelf-row {
        display: flex; align-items: stretch; gap: 0;
        overflow-x: auto; scrollbar-width: none; &::-webkit-scrollbar { display: none; }
        /* Scrim: onderaan papierkleur zodat de titel niet met de ruggen vecht. */
        &::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to top, color-mix(in oklch, var(--paper) 88%, transparent), color-mix(in oklch, var(--paper) 50%, transparent) 55%, color-mix(in oklch, var(--paper) 18%, transparent)); }
    }
    .spine {
        --c: var(--paper-3);
        flex: 2 1 0; min-inline-size: 1.5px;
        background: linear-gradient(to right, color-mix(in oklch, var(--c) 78%, white) 0 18%, var(--c) 30% 70%, color-mix(in oklch, var(--c) 72%, black));
        flex-grow: var(--w, 1);   /* dikte = aantal zijdes */
        @media (hover: hover) { &:hover { filter: brightness(1.25) saturate(1.2); outline: 2px solid var(--ink); outline-offset: 0; } }
    }
    /* Kaartje bij mouseover op een rug: cover, titel en artiest, boven de ruggen en de titel (anchor positioning). */
    .shelf-card {
        position: absolute; inset-block-start: .75rem; inset-inline-start: 0; z-index: 3; pointer-events: none;
        @supports (justify-self: anchor-center) { inset-inline-start: auto; position-anchor: --shelf-hot; justify-self: anchor-center; margin-inline: .5rem; }
        display: flex; align-items: center; gap: .7rem; padding: .45rem .9rem .45rem .45rem; max-inline-size: min(22rem, 90%);
        background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-m); box-shadow: var(--shadow-2);
        img { inline-size: 56px; block-size: 56px; object-fit: cover; border-radius: 8px; flex: none; }
        .shelf-card-text { display: grid; min-inline-size: 0; }
        b { font-family: var(--font-display); font-weight: 400; font-size: 1.15rem; letter-spacing: 0; line-height: 1.1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
        small { color: var(--mute); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    }
    @media (width < 720px) { .spine { min-inline-size: 2px; } }
    /* Categorieën als subnavigatie: pillen in een balk die onder het hoofdmenu plakt. */
    .chips {
        position: sticky; inset-block-start: calc(var(--topbar-h) + 1px); z-index: 20;
        display: flex; flex-wrap: nowrap; gap: .4rem; overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-padding-inline: var(--gutter);
        margin-inline: calc(-1 * var(--gutter)); padding: .6rem var(--gutter);
        background: color-mix(in oklch, var(--paper) 84%, transparent);
        @supports (backdrop-filter: blur(1px)) { backdrop-filter: blur(16px) saturate(160%); }
        &::-webkit-scrollbar { display: none; }
        a, button { flex: none; scroll-snap-align: start; padding: .5rem .9rem; border-radius: var(--r-pill); font-family: var(--font-ui); font-weight: 600; font-size: var(--fs-s); color: var(--ink-2); background: color-mix(in oklch, var(--ink) 6%, transparent); white-space: nowrap; transition: color .2s, background-color .2s;
            &:hover, &:focus-visible { color: var(--accent-ink); background: var(--accent); } }
        /* Smal scherm: één regel die zijwaarts scrolt, met een vervaging aan de rechterrand als hint dat er meer volgt. */
        @media (width < 720px) { mask-image: linear-gradient(to right, black calc(100% - 2.5rem), transparent); }
    }
    .cat { scroll-margin-block-start: calc(var(--topbar-h) + 3.4rem); }

    /* Album: hoes links (sticky), tracks rechts. Terug/vorige/volgende als balk onder het hoofdmenu geplakt. */
    .backnav {
        padding-block: 1rem .75rem; display: flex; align-items: center; gap: .5rem; .prevnext { margin-inline-start: auto; }   /* 16 + 40 + 12 = 68px */
        @media (width >= 900px) {
            position: sticky; inset-block-start: calc(var(--topbar-h) + 1px); z-index: 20;
            margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
            background: color-mix(in oklch, var(--paper) 84%, transparent);
            @supports (backdrop-filter: blur(1px)) { backdrop-filter: blur(16px) saturate(160%); }
        }
    }
    /* Linkerkolom precies zo breed als de hoes (hoogstens 300 px, past altijd helemaal in beeld). */
    /* Vier blokken: hoes+titel (side), tracks (main), samenvatting (aside) en de rails (more). Smal: onder elkaar,
       de samenvatting onder de tracks. Vanaf 900 px: hoes links, de rest rechts. Vanaf 1280 px: samenvatting in een
       eigen kolom rechts van de tracks. */
    .album-layout {
        --reserve: 4.25rem;   /* hoogte van de vastgeplakte terugbalk */
        --cover: min(300px, max(160px, calc(100dvh - var(--topbar-h) - var(--reserve) - 20rem)));
        display: grid; gap: clamp(1.6rem, 3.5vw, 4rem); align-items: start; padding-block-start: 1rem;
        grid-template-areas: "side" "main" "aside" "more";
        @media (width >= 900px)  { grid-template-columns: var(--cover) 1fr; grid-template-areas: "side main" "side aside" "side more"; }
        @media (width >= 1280px) { grid-template-columns: var(--cover) 1fr 17rem; grid-template-areas: "side main aside" "side more aside"; }
    }
    .album-side  { grid-area: side; }
    .album-main  { grid-area: main; }
    .album-aside { grid-area: aside; }
    .album-more  { grid-area: more; min-inline-size: 0; }
    .album-aside {
        display: grid; gap: 1.6rem; align-content: start;
        .aside-block { display: grid; gap: .6rem; }
        .aside-head { display: flex; align-items: center; gap: .7rem; }
        .aside-avatar { inline-size: 56px; block-size: 56px; border-radius: 50%; object-fit: cover; background: var(--paper-3); box-shadow: 0 0 0 3px var(--paper), 0 12px 24px -14px oklch(0% 0 0 / .7); }
        .summary { max-inline-size: none; }
        .summary a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: .18em; &:hover { color: var(--accent-text); text-decoration-color: currentColor; } }
        .aside-link { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--accent-text); &:hover { color: var(--ink); } }
        @media (width >= 1280px) { position: sticky; inset-block-start: calc(var(--topbar-h) + 1px + 69px + 1rem); padding-block-start: .35rem; }
    }
    body.has-player .album-layout { --reserve: calc(var(--player-h, 10rem) + 4.25rem); }
    .album-side {
        display: grid; gap: 1.2rem;
        @media (width >= 900px) { position: sticky; inset-block-start: calc(var(--topbar-h) + 1px + 69px + 1rem); }
    }
    .hero-cover {
        /* Nooit groter dan 300 x 300: de Spotify-hoes is 300 px, groter wordt hij wazig. */
        inline-size: 100%; max-inline-size: 300px; block-size: auto; aspect-ratio: 1; object-fit: cover; background: var(--paper-3);
        box-shadow: 0 0 0 1px var(--rule), 0 40px 80px -30px color-mix(in oklch, var(--theme) 70%, black);
    }
    .album-meta { display: grid; gap: var(--title-gap); }
    .album-meta h1 { font-size: clamp(2.2rem, 1.2rem + 2.8vw, 3.6rem); line-height: .95; }
    .hero-sub { font-family: var(--font-display); font-style: italic; font-size: var(--fs-l); color: var(--ink-2); }
    .album-main { min-inline-size: 0; }
    .album-main > section:first-child .section-head { margin-block-start: .2rem; }
    .album-more > section:first-child .section-head { margin-block-start: 0; }

    /* Playlist: het bord. De klok is precies zo hoog als de tekst ernaast. */
    /* Kop: hoes | tekst | paneel "Nu". Smal: onder elkaar; vanaf 760 px hoes naast de tekst en het paneel eronder over de
       volle breedte; vanaf 1180 px drie kolommen. */
    .stage { display: grid; gap: clamp(1.6rem, 3.5vw, 4rem); align-items: stretch; padding-block: var(--head-pad) 1.6rem;
             @media (width >= 760px)  { grid-template-columns: auto 1fr; .stage-now { grid-column: 1 / -1; } }
             @media (width >= 1180px) { grid-template-columns: auto 1fr minmax(18rem, 24rem); .stage-now { grid-column: auto; } } }
    .stage-now { align-self: start; display: grid; gap: 1rem; padding: 1.1rem 1.2rem 1.2rem; border-radius: var(--r-l); background: color-mix(in oklch, var(--theme) 10%, var(--paper-2)); box-shadow: var(--shadow-1);
        h3 { display: inline-flex; align-items: center; gap: .5rem; margin-block-end: .55rem; .eq { margin: 0; } }
        .now-block { display: grid; }
        .now-track { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .8rem; }
        .now-cover { display: block; inline-size: 64px; block-size: 64px; border-radius: 10px; overflow: clip; background: var(--paper-3); img { inline-size: 100%; block-size: 100%; object-fit: cover; } }
        .now-cover.ph { background: color-mix(in oklch, var(--theme) 18%, var(--paper-3)); }
        .now-text { display: grid; gap: .1rem; min-inline-size: 0; b { font-weight: 650; letter-spacing: -.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } small { color: var(--mute); font-size: var(--fs-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } }
        .now-time { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--mute); font-variant-numeric: tabular-nums; }
        .now-track .track-play { grid-area: auto; position: static; opacity: 1; scale: 1; inline-size: 2.2rem; block-size: 2.2rem; }
        .now-empty { color: var(--mute); font-size: var(--fs-s); line-height: 1.5; }
        .now-progress { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: .6rem; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--mute); font-variant-numeric: tabular-nums; margin-block-start: .2rem;
            i { display: block; block-size: 6px; border-radius: 999px; background: color-mix(in oklch, var(--ink) 10%, transparent); overflow: clip; &::before { content: ""; display: block; block-size: 100%; inline-size: var(--p, 0%); background: var(--accent); border-radius: inherit; transition: inline-size .6s var(--ease); } } } }
    /* De cover van Spotify is 300 x 300: precies op die maat tonen, niet opblazen (wazig). */
    .stage-clock { inline-size: min(100%, 300px); aspect-ratio: 1; display: grid; place-items: center; border-radius: var(--r-l); overflow: clip; background: var(--paper-2); box-shadow: var(--shadow-1);
        @media (width >= 760px) { inline-size: 300px; block-size: 300px; align-self: start; }
        img, svg { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
        .klok-prefetch { position: absolute; inline-size: 1px; block-size: 1px; opacity: 0; pointer-events: none; }
        .ph { font-family: var(--font-display); font-weight: 400; color: var(--mute); font-size: 3rem; letter-spacing: -.02em; } }
    .stage-body { display: grid; gap: var(--title-gap); min-inline-size: 0; align-content: center; }
    .stage-body h1 { font-size: var(--fs-h1); }
    .stage-range { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-l); font-variant-numeric: tabular-nums; letter-spacing: -.01em; color: var(--ink); .slogan { color: var(--mute); font-style: italic; font-size: .9em; letter-spacing: 0; } }
    /* Afgespeeld: gedempt via kleur (contrast blijft >= 4.5:1), niet via opacity op de tekst. */
    .track.is-past { background: transparent; .track-title { color: var(--mute); font-weight: 500; } .track-cover, .badge { opacity: .6; } }
    .track.is-now { background: color-mix(in oklch, var(--accent) 16%, transparent); box-shadow: inset 4px 0 0 var(--accent); .track-title { color: var(--accent-text); } .track-meta { color: var(--ink-2); } }
    .track.is-next { box-shadow: inset 4px 0 0 var(--rule-2); }

    /* Top 40: posities als grote drukcijfers. */
    .chart-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1.4rem 2rem; padding-block: var(--head-pad) 1.6rem; }
    .chart-title { display: grid; gap: var(--title-gap); }
    .chart-title h1 { font-size: var(--fs-h1); }
    .chart-year { color: var(--mute); font-style: italic; }
    .chart-filter {
        display: flex; flex-wrap: wrap; align-items: end; gap: .6rem;
        label { display: grid; gap: .3rem; > span { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .08em; text-transform: uppercase; color: var(--mute); padding-inline-start: .2rem; } }
        select {
            font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ink); background-color: color-mix(in oklch, var(--ink) 6%, transparent); border: 0; border-radius: var(--r-pill);
            padding: 0 2rem 0 .9rem; min-inline-size: 5.5rem; block-size: var(--control-h); cursor: pointer; appearance: none; field-sizing: content;
            background-image: linear-gradient(45deg, transparent 50%, var(--ink) 50%), linear-gradient(135deg, var(--ink) 50%, transparent 50%);
            background-position: calc(100% - 1rem) 50%, calc(100% - .7rem) 50%; background-size: .3rem .3rem; background-repeat: no-repeat;
            option { background: var(--paper); color: var(--ink); }
            &:hover { background-color: color-mix(in oklch, var(--ink) 12%, transparent); }
        }
        input[type="date"] {
            font-family: var(--font-mono); font-size: var(--fs-s); color: var(--ink); background: color-mix(in oklch, var(--ink) 6%, transparent); border: 0; border-radius: var(--r-pill);
            padding: 0 .9rem; block-size: var(--control-h); min-inline-size: 10.5rem; cursor: pointer; transition: background-color .2s;
            &:hover { background: color-mix(in oklch, var(--ink) 12%, transparent); }
            &::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
        }
    }
    /* Zoekveld in een paginakop (artiestenoverzicht): pil met icoon en een telling erin. */
    .page-filter {
        display: flex; align-items: center; gap: .55rem; flex: 1 1 16rem; max-inline-size: 26rem; padding: 0 .9rem; block-size: var(--control-h); border-radius: var(--r-pill);
        background: color-mix(in oklch, var(--ink) 6%, transparent); transition: background-color .2s, box-shadow .2s;
        &:focus-within { background: var(--paper); box-shadow: 0 0 0 1px var(--rule-2), var(--shadow-1); }
        .search-ico { inline-size: 16px; block-size: 16px; color: var(--mute); flex: none; }
        input { flex: 1; min-inline-size: 0; font-size: var(--fs-s); color: var(--ink); background: transparent; border: 0; padding: 0; &::placeholder { color: var(--mute); } &::-webkit-search-cancel-button { appearance: none; } }
    }
    .page-filter-count { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--mute); white-space: nowrap; font-variant-numeric: tabular-nums; }
    .page-filter-empty { padding: 3rem 0; color: var(--mute); }
    .playgroup { display: inline-flex; align-items: center; gap: .5rem; }
    .segmented { display: inline-flex; padding: .2rem; border-radius: var(--r-pill); background: color-mix(in oklch, var(--ink) 6%, transparent);
        a, button, span { padding: .5rem .8rem; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; line-height: 1.2; color: var(--mute); white-space: nowrap; transition: background-color .2s, color .2s;
                 &:hover { color: var(--ink); } &[aria-pressed="true"], &[aria-current] { background: var(--ink); color: var(--paper); } } }
    .chart .track { grid-template-columns: 3.6rem 1fr auto; padding-block: .7rem; &:has(.track-cover) { grid-template-columns: 3.6rem auto 1fr auto; } }
    .chart .track-n { font-family: var(--font-display); font-size: 1.9rem; font-weight: 400; letter-spacing: -.02em; color: var(--ink); }
    .chart .track-title { margin-inline-end: .2rem; }
    .chart-row.is-top { background: color-mix(in oklch, var(--accent) 14%, transparent); .track-n { color: var(--accent-text); font-size: 2.4rem; } }
    .move { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-start: .45rem; font-family: var(--font-mono); font-size: .64rem; letter-spacing: .04em; padding: .28rem .5rem; border-radius: var(--r-pill); font-variant-numeric: tabular-nums; font-weight: 600; }
    .move-up   { color: oklch(86% 0.17 150); background: color-mix(in oklch, oklch(70% 0.17 150) 18%, transparent); }
    .move-down { color: oklch(82% 0.15 27);  background: color-mix(in oklch, oklch(62% 0.2 27) 16%, transparent); }
    .move-same { color: var(--mute); background: color-mix(in oklch, var(--ink) 7%, transparent); }
    .move-new  { color: var(--accent-ink); background: var(--accent); text-transform: uppercase; }
    .chart-source { margin-block-start: 1.6rem; color: var(--mute); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; a { text-decoration: underline; text-underline-offset: .25em; &:hover { color: var(--ink); } } }

    /* Introtekst onder een paginatitel (samenvatting, toelichting, melding): overal dezelfde stijl. */
    .summary, .lead { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.6; max-inline-size: 64ch; text-wrap: pretty; }
    .chart-year a, .hero-sub a, .eyebrow a { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: .18em; transition: color .2s, text-decoration-color .2s;
        &:hover { color: var(--ink); text-decoration-color: currentColor; } }
    .track-meta a { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: .18em; &:hover { color: var(--ink); text-decoration-color: currentColor; } }
    /* Jaaroverzicht: de weken als pillen. */
    .weeks { display: flex; flex-wrap: wrap; gap: .4rem;
        a { display: grid; place-items: center; min-inline-size: 2.6rem; padding: .5rem .6rem; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-s); font-variant-numeric: tabular-nums; color: var(--ink-2); background: color-mix(in oklch, var(--ink) 6%, transparent); transition: color .2s, background-color .2s;
            &:hover, &:focus-visible { color: var(--accent-ink); background: var(--accent); } } }
    .chart-head .prevnext { align-self: start; margin-block-start: .4rem; }
    .decades { display: grid; gap: 1.4rem; }
    .decade { display: grid; gap: .6rem; h3 { color: var(--ink-2); } }
    .section-head .btn { flex: none; min-block-size: 2.2rem; }
    /* Artiest: headerfoto van rand tot rand, ronde profielfoto naast de naam, links als pillen. */
    .artist-head { padding-block-start: .5rem; align-items: start; }
    .artist-head.has-banner { padding-block-start: 0; }
    .artist-banner { margin-inline: calc(-1 * var(--gutter)); margin-block-start: 1rem; block-size: clamp(9rem, 26vw, 20rem); overflow: clip; border-radius: 0 0 var(--r-l) var(--r-l); background: var(--paper-2);
        > img { inline-size: 100%; block-size: 100%; object-fit: cover; }   /* alleen de bannerfoto zelf, niet de profielfoto in .banner-title */
        @media (width >= 1920px) { border-radius: var(--r-l); } }
    .artist-avatar { inline-size: clamp(6rem, 12vw, 10rem); block-size: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%; background: var(--paper-3); flex: none; box-shadow: 0 0 0 4px var(--paper), 0 20px 40px -20px oklch(0% 0 0 / .7); }
    .artist-head.has-banner .artist-avatar { margin-block-start: calc(-1 * clamp(3rem, 6vw, 5rem)); }
    /* Banner met de titel erover (.has-title): de foto iets gedempt en zachter, een pruim-tint met een oranje gloed
       rechtsboven, onderaan een verloop naar het papier (de kop loopt in de pagina over) en een fijne korrel, zodat een
       matige foto minder opvalt. Linksonder de ronde profielfoto met daarnaast eyebrow, titel en ondertitel: de tekst
       staat naast de foto, nooit eroverheen. */
    .artist-banner.has-title { position: relative; block-size: clamp(14rem, 34vw, 26rem);
        > img { filter: saturate(.85) contrast(1.05) brightness(.85); scale: 1.04; }
        &::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
            radial-gradient(120% 90% at 88% 8%, color-mix(in oklch, var(--accent) 30%, transparent), transparent 60%),
            linear-gradient(115deg, color-mix(in oklch, var(--theme) 60%, transparent) 0%, color-mix(in oklch, var(--theme) 20%, transparent) 45%, transparent 75%),
            linear-gradient(to top, var(--paper) 0%, color-mix(in oklch, var(--paper) 72%, transparent) 32%, transparent 72%); }
        &::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .14; mix-blend-mode: overlay;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
        .banner-title { position: absolute; inset-inline: 0; inset-block-end: 0; z-index: 2; padding: 0 var(--gutter) clamp(1.2rem, 3vw, 2rem); display: flex; align-items: end; gap: clamp(1rem, 2.5vw, 1.75rem); color: var(--ink);
            .artist-avatar { flex: none; }
            .banner-text { display: grid; gap: var(--title-gap); min-inline-size: 0; max-inline-size: 60rem; }
            h1 { font-size: var(--fs-h1); text-shadow: 0 2px 18px oklch(0% 0 0 / .5); }
            .eyebrow { color: var(--accent); }
            .hero-sub { color: var(--ink-2); text-shadow: 0 1px 10px oklch(0% 0 0 / .5); } } }
    .artist-banner.has-title + .artist-head { padding-block-start: 1.2rem; }   /* de profielfoto zit al in de banner */
    .artist-head .chart-title { flex: 1 1 24rem; min-inline-size: 0; max-inline-size: 60rem; }
    /* Leden van een groep: naam met rol en periode; voormalige leden gedempt. */
    .members { display: grid; gap: 2px; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        .member { display: grid; gap: .1rem; padding: .6rem .8rem; border-radius: var(--r-m); background: color-mix(in oklch, var(--ink) 3%, transparent);   /* als .panel, compacter */
            a, b { font-weight: 650; } a { text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: .18em; &:hover { color: var(--accent-text); text-decoration-color: currentColor; } }
            small { color: var(--mute); font-size: var(--fs-xs); font-family: var(--font-mono); letter-spacing: .02em; } }
        .member.has-photo { grid-template-columns: auto 1fr; column-gap: .7rem; align-items: center; > :not(.member-photo) { grid-column: 2; } }
        .member-photo { grid-row: 1 / span 2; inline-size: 44px; block-size: 44px; border-radius: 50%; object-fit: cover; background: var(--paper-3); }
        .member.former { a, b { font-weight: 500; color: var(--ink-2); } }
        /* Groen: dit lid was actief in een jaar waaruit de collectie een album of track van de groep heeft. */
        .member.incol { background: color-mix(in oklch, var(--spotify) 14%, transparent); small { color: oklch(80% 0.14 150); } } }
    .artist-links { display: flex; flex-wrap: wrap; gap: .4rem;
        a { display: inline-flex; padding: .45rem .8rem; border-radius: var(--r-pill); font-size: var(--fs-s); font-weight: 600; color: var(--ink-2); background: color-mix(in oklch, var(--ink) 6%, transparent); transition: color .2s, background-color .2s;
            &:hover, &:focus-visible { color: var(--accent-ink); background: var(--accent); } } }

    /* Cookiebanner: een balk over de volle breedte onderaan, tot er een keuze is gemaakt (boven de speler). */
    .consent { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 45; display: flex; align-items: center; gap: .6rem 1.2rem; flex-wrap: wrap;
        padding: .9rem var(--gutter); background: var(--paper-2); border-block-start: 1px solid var(--rule); box-shadow: 0 -10px 30px -18px oklch(0% 0 0 / .5); font-size: var(--fs-s);
        b { font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; letter-spacing: -.01em; }
        p { color: var(--ink-2); line-height: 1.5; flex: 1 1 20rem; }
        @starting-style { translate: 0 100%; } transition: translate .4s var(--ease); }
    .consent-actions { display: flex; gap: .5rem; flex-wrap: wrap; margin-inline-start: auto; }
    body:has(.consent:not([hidden])) { padding-block-end: calc(var(--consent-h, 5rem) + 1rem); }
    body.has-player:has(.consent:not([hidden])) { padding-block-end: calc(var(--player-h, 10rem) + var(--consent-h, 5rem) + 1rem); }
    body.has-player .consent { inset-block-end: var(--player-h, 10rem); }

    /* Tekstpagina (privacyverklaring): rustige leesbreedte, koppen in de displayletter. */
    .prose { padding-block: 0 2rem; max-inline-size: 66ch;
        h2 { margin-block: 3.2rem .8rem; }
        p { color: var(--ink-2); font-size: var(--fs-m); line-height: 1.65; margin-block: 0 1rem; text-wrap: pretty; }
        a { color: var(--ink); text-decoration: underline; text-decoration-color: color-mix(in oklch, currentColor 35%, transparent); text-underline-offset: .18em; &:hover { text-decoration-color: currentColor; } }
        code { font-family: var(--font-mono); font-size: .9em; }
    }
    .not-found { padding-block: var(--head-pad) 2rem; display: grid; gap: var(--title-gap); justify-items: start; max-inline-size: 48ch; h1 { font-size: var(--fs-h1); } }
}

/* ---------- motion ---------- */
@layer motion {
    @keyframes spin-el  { to { rotate: 360deg; } }
    @keyframes pulse    { 0% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--spotify) 55%, transparent); } 100% { box-shadow: 0 0 0 10px transparent; } }
    @keyframes eq       { 0%, 100% { block-size: 30%; } 50% { block-size: 100%; } }
    @keyframes rise     { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
    @keyframes progress { from { scale: 0 1; } to { scale: 1 1; } }
    @keyframes vt-out   { to { opacity: 0; translate: 0 -8px; } }
    @keyframes vt-in    { from { opacity: 0; translate: 0 12px; } }
    @supports (animation-timeline: view()) {
        .grid .card, .tracks .track { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 26%; }
    }
    @supports (animation-delay: calc(sibling-index() * 1ms)) {
        .rail .card { animation: rise .6s var(--ease) both; animation-delay: calc(sibling-index() * 40ms); }
    }
    .home-hero > :not(.shelf-card), .album-meta > *, .stage-body > *, .chart-title > * { transition: opacity .6s var(--ease), translate .6s var(--ease); @starting-style { opacity: 0; translate: 0 10px; } }
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
        ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
    }
}