/* Reset + basis-typografie + layout-primitieven. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: 1.55;
    color: var(--text);
    background: var(--bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    min-height: 100vh;
    min-height: 100dvh;
}

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 700;
    line-height: 1.02;
    letter-spacing: .01em;
    text-wrap: balance;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: var(--accent-text); text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
img, svg { display: block; max-width: 100%; }
table { border-collapse: collapse; width: 100%; }

/* Cijfers lijnen altijd uit. */
.mono, .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Kleine caps-labels ("eyebrows") */
.eyebrow {
    font-family: var(--font-display);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-size: var(--fs-xs);
    color: var(--text-faint);
}

/* Zichtbare toetsenbord-focus overal. */
:focus-visible {
    outline: 2px solid var(--focus);
    outline-offset: 2px;
    border-radius: 3px;
}
:focus:not(:focus-visible) { outline: none; }

/* Layout-helpers */
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.between { display: flex; align-items: center; justify-content: space-between; }
.wrap-row { display: flex; flex-wrap: wrap; }
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-5 { gap: var(--sp-5); }
.grow { flex: 1 1 auto; min-width: 0; }
.muted { color: var(--text-muted); }
.faint { color: var(--text-faint); }
.right { text-align: right; }
.center { text-align: center; }
.hidden { display: none !important; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.scroll-x { overflow-x: auto; }

/* Het merk: draaiende plaat + toonarm. Herbruikbaar; nette reduced-motion. */
.turntable { position: relative; flex: 0 0 auto; }
.turntable .disc {
    position: absolute; inset: 0; border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, var(--spot) 0 16%, transparent 16.4%),
        repeating-radial-gradient(circle at 50% 50%, #0c0b08 0 1.6px, #1a1610 1.6px 3.6px);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .8);
}
.turntable .disc::after {
    content: ""; position: absolute; inset: 47%; border-radius: 50%; background: var(--surface-2);
}
.turntable.spinning .disc { animation: dd-spin 3.6s linear infinite; }
.turntable .arm { position: absolute; top: -8%; right: -8%; width: 60%; height: 92%; }

@keyframes dd-spin { to { transform: rotate(360deg); } }
@keyframes dd-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes dd-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .turntable.spinning .disc { animation: none; }
    * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}