/* =====================================================================
   emno — designsysteem "Pressing" (2026)
   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. Standaard donker (pruim-grafiet, geen zwart),
   licht (koel krijt) via de schakelaar (light-dark()).
   Letters: Instrument Serif (koppen, licht en smal), Instrument Sans
   (lopende tekst), Geist Mono (cijfers en labels). Zelf gehost.
   2026-technieken: @layer + nesting, light-dark(), 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("/assets/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("/assets/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("/assets/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("/assets/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("/assets/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, 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;

        /* Donker: diep pruim-grafiet (geen zwart). Licht: koel krijtwit (geen wit). */
        --paper:   light-dark(oklch(96.5% 0.008 260), oklch(18% 0.025 320));
        --paper-2: light-dark(oklch(93% 0.011 260),   oklch(22.5% 0.03 320));
        --paper-3: light-dark(oklch(89% 0.014 260),   oklch(28% 0.032 320));
        --ink:     light-dark(oklch(20% 0.02 300),    oklch(96% 0.01 80));
        --ink-2:   light-dark(oklch(36% 0.02 300),    oklch(82% 0.015 80));
        --mute:    light-dark(oklch(44% 0.02 300),    oklch(67% 0.02 320));   /* >= 4,5:1 op paper en paper-2 */
        --rule:    light-dark(oklch(20% 0.02 300 / .1),  oklch(96% 0.01 80 / .1));
        --rule-2:  light-dark(oklch(20% 0.02 300 / .24), oklch(96% 0.01 80 / .24));
        /* Stempel-oranje: knoppen, vlakken en grote tekst. Voor kleine tekst op licht papier een donkerder variant. */
        --accent:      light-dark(oklch(54% 0.2 40),  oklch(75% 0.17 50));
        --accent-text: light-dark(oklch(46% 0.19 40), oklch(78% 0.16 55));
        --accent-ink:  light-dark(#fff, oklch(20% 0.03 320));
        --spotify: #1ed760;
        --top40:   light-dark(oklch(50% 0.2 15), oklch(56% 0.21 15));   /* wit erop >= 4,5:1 in beide thema's */
        --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);

        --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);
    }
    [data-theme="light"] { color-scheme: light; }
    [data-theme="dark"]  { color-scheme: dark; }
}

/* ---------- 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 */
    /* Tijdens de thema-wissel geen transities (zie theme-toggle in nav.php). */
    .no-transitions *, .no-transitions *::before, .no-transitions *::after { transition: none !important; }

    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 merk en thema-knop: de knop gaat naar de zoekregel, 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; }
        .theme-toggle { order: 4; }
    }
    .theme-toggle {
        inline-size: 2.3rem; block-size: 2.3rem; display: grid; place-items: center; color: var(--ink-2); border-radius: 50%; background: color-mix(in oklch, var(--ink) 6%, transparent); transition: color .2s, background-color .2s, rotate .5s var(--ease-spring);
        &:hover { color: var(--ink); background: color-mix(in oklch, var(--ink) 12%, transparent); rotate: 25deg; }
        svg { inline-size: 17px; block-size: 17px; }
        .sun { display: block; } .moon { display: none; }
        [data-theme="light"] & { .sun { display: none; } .moon { display: block; } }
    }
    .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: 1rem; align-items: center;
        &::before { content: ""; flex: 1; block-size: 1px; background: var(--rule-2); }
    }
}

/* ---------- components ---------- */
@layer components {
    /* Knoppen: pillen. Vol (accent), omlijnd (ghost), rond (pijl). */
    .btn {
        display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 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); } }
    .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: 2.5rem; block-size: 2.5rem; 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) 7%, transparent); }
    }
    .lead { color: var(--ink-2); max-inline-size: 62ch; font-size: var(--fs-m); line-height: 1.6; }
    .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: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: light-dark(oklch(13% 0.01 320), oklch(31% 0.012 320));
            --v2: light-dark(oklch(22% 0.01 320), 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 light-dark(oklch(0% 0 0 / .35), 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; }
    body.has-player { padding-block-end: 10rem; }
    body.has-player:has(.player.is-list) { padding-block-end: 14.5rem; }
    .track.is-playing { background: color-mix(in oklch, var(--spotify) 14%, transparent); .track-title { color: light-dark(oklch(45% 0.17 150), 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: clamp(3.6rem, 1.2rem + 9.5vw, 6.5rem); }
    }
    .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); }

    /* Tracks: alle tracks in één tabel. Kolomkoppen zijn sorteerknoppen, de kop plakt onder het hoofdmenu. */
    .tracks-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; padding-block: clamp(2.5rem, 6vw, 5.5rem) 1.25rem; }
    .tracks-filter {
        display: flex; align-items: center; gap: .6rem; flex: 1 1 18rem; max-inline-size: 28rem; padding: 0 1rem; block-size: 2.6rem; 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); } }
        .tracks-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; }
    }
    /* Geen overflow op de wrapper: die zou een scrollcontainer worden en de plakkende kop aan zichzelf binden. */
    .ttable-wrap { overflow: visible; }
    .ttable {
        inline-size: 100%; border-collapse: collapse; font-size: var(--fs-s);
        thead th {
            position: sticky; inset-block-start: calc(var(--topbar-h) + 1px); z-index: 5; text-align: start;
            background: var(--paper); border-block-end: 1.5px solid var(--ink);   /* dekkend: rijen schuiven eronder door */
            font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--mute);
            padding: .7rem .6rem;
            button { display: inline-flex; align-items: center; gap: .3rem; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; padding: .2rem 0; transition: color .2s;
                     svg { inline-size: 14px; block-size: 14px; opacity: .45; } &:hover { color: var(--ink); } }
            &[aria-sort="ascending"], &[aria-sort="descending"] { color: var(--ink); button svg { opacity: 1; color: var(--accent-text); } }
            .s-up, .s-down { display: none; }
            &[aria-sort="ascending"]  { .s-both { display: none; } .s-up { display: block; } }
            &[aria-sort="descending"] { .s-both { display: none; } .s-down { display: block; } }
        }
        td { padding: .5rem .6rem; border-block-end: 1px solid var(--rule); vertical-align: middle; }
        tbody tr { transition: background-color .15s; &:hover { background: color-mix(in oklch, var(--ink) 5%, transparent); .track-title { color: var(--accent-text); } } }
        .c-play { inline-size: 2.6rem; padding-inline: .2rem; }
        .c-cover { inline-size: 44px; padding-inline: .2rem; a { display: block; } img { inline-size: 36px; block-size: 36px; object-fit: cover; border-radius: 6px; background: var(--paper-3); } }
        /* Afspeelknop zonder SVG per rij: het driehoekje is CSS. */
        .c-play .track-play { position: static; &::before { content: ""; inline-size: .55rem; block-size: .7rem; margin-inline-start: .1rem; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); } }
        .c-title { font-weight: 650; min-inline-size: 14rem; overflow-wrap: anywhere; }
        .c-artist { color: var(--ink-2); min-inline-size: 10rem; }
        .c-album { color: var(--mute); font-size: var(--fs-xs); line-height: 1.5; a { text-decoration: underline; text-decoration-color: var(--rule-2); text-underline-offset: .2em; &:hover { color: var(--ink); text-decoration-color: currentColor; } } }
        .c-year, .c-dur { text-align: end; white-space: nowrap; color: var(--mute); font-size: var(--fs-xs); }
        .c-top40 { white-space: nowrap; .badge { margin-inline-start: 0; } }
        .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
        tbody .track-play { opacity: 0; scale: .6; }
        @media (hover: hover) { tbody tr:hover .track-play { opacity: 1; scale: 1; } }
        tbody tr:focus-within .track-play, tbody tr.is-active .track-play { opacity: 1; scale: 1; }
        @media (hover: none) { tbody .track-play { opacity: 1; scale: 1; } }
        @media (width < 720px) { .c-album, .c-year, .c-top40 { display: none; } td, thead th { padding-inline: .4rem; } .c-title, .c-artist { min-inline-size: 0; } .c-play { inline-size: 2rem; } .c-title { overflow-wrap: break-word; font-size: var(--fs-s); } .c-artist { inline-size: 30%; font-size: var(--fs-xs); } }   /* smal scherm: geen woorden midden in afbreken, artiest in een vaste smallere kolom */
    }

    /* 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). */
    .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;
        @media (width >= 900px) { grid-template-columns: var(--cover) 1fr; }
    }
    body.has-player .album-layout { --reserve: 14.25rem; }
    body.has-player:has(.player.is-list) .album-layout { --reserve: 18.75rem; }
    .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: .9rem; }
    .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-main > section:not(:first-child) .section-head { margin-block-start: 6rem; }

    /* Playlist: het bord. De klok is precies zo hoog als de tekst ernaast. */
    .stage { display: grid; gap: clamp(1.6rem, 3.5vw, 4rem); align-items: stretch; padding-block: clamp(2rem, 5vw, 4rem) 1.6rem;
             @media (width >= 760px) { grid-template-columns: auto 1fr; } }
    .stage-clock { inline-size: min(100%, 320px); 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: auto; block-size: 100%; min-block-size: 200px; max-block-size: 440px; }
        img { inline-size: 100%; block-size: 100%; aspect-ratio: 1; object-fit: cover; }
        .ph { font-family: var(--font-display); font-weight: 400; color: var(--mute); font-size: 3rem; letter-spacing: -.02em; } }
    .stage-body { display: grid; gap: .8rem; min-inline-size: 0; align-content: center; }
    .stage-body h1 { font-size: clamp(2.6rem, 1.4rem + 3.6vw, 4.8rem); }
    .stage-body .lead { font-size: var(--fs-s); line-height: 1.55; max-inline-size: 60ch; }
    .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: clamp(2rem, 5vw, 4rem) 1.6rem; }
    .chart-title { display: grid; gap: .9rem; }
    .chart-title h1 { font-size: clamp(2.8rem, 1.4rem + 5.5vw, 7rem); }
    .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: .6rem 2rem .6rem .9rem; min-inline-size: 5.5rem; block-size: 2.5rem; 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: .5rem .9rem; block-size: 2.5rem; 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; }
        }
    }
    .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 { padding: .5rem .8rem; border-radius: var(--r-pill); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: .04em; color: var(--mute); white-space: nowrap; transition: background-color .2s, color .2s;
                 &:hover { color: var(--ink); } &[aria-pressed="true"] { background: var(--ink); color: var(--paper); } } }
    .chart .track { grid-template-columns: 3.6rem auto 1fr auto; padding-block: .7rem; }
    .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: light-dark(oklch(38% 0.14 150), oklch(86% 0.17 150)); background: color-mix(in oklch, oklch(70% 0.17 150) 18%, transparent); }
    .move-down { color: light-dark(oklch(45% 0.2 27),   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); } } }

    /* Samenvatting in gewone taal boven de inhoud (album, artiest, Top 40): citeerbare feiten, leesbaar op elk scherm. */
    .summary { color: var(--ink-2); font-size: var(--fs-s); line-height: 1.6; max-inline-size: 64ch; text-wrap: pretty; }
    .album-meta .summary { max-inline-size: none; }
    .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; padding-block: .5rem; }
    /* 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; }
        @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)); }
    .artist-head .chart-title { flex: 1 1 24rem; min-inline-size: 0; }
    /* 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);
            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: light-dark(oklch(40% 0.12 150), 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); } } }

    .not-found { padding: 5rem 0; display: grid; gap: 1rem; max-inline-size: 48ch; h1 { font-size: clamp(2.4rem, 1.4rem + 4vw, 5rem); } .lead { color: var(--mute); } }
}

/* ---------- 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; }
    }
}