@font-face {
    font-family: 'Elektron Pixel';
    src: url('assets/fonts/Elektron-Pixel-Font.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Bitmap atlas converted locally; swap `--title-font` / `--primary-font` to this if you want it site-wide. */
@font-face {
    font-family: 'Suijdam Pixel';
    src: url('fonts/SuijdamPixel.woff2') format('woff2'),
        url('fonts/SuijdamPixel.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* =============================================================================
 * THEME CONFIG — default palette on :root
 * Edit hex/RGBA here first. Themed overrides: body[data-site-theme="hw"],
 * body.meowlektron-ui (search those selectors to extend a variant).
 * ============================================================================= */

:root {
    /* --- Layout & type --- */
    --container-pad-x: clamp(1.5rem, 4.5vw, 2.85rem);
    --body-letter-spacing: -3px;
    --primary-font: 'Elektron Pixel', ui-monospace, monospace;
    --title-font: 'Elektron Pixel', ui-monospace, monospace;
    --atlas-pixel-font: 'Suijdam Pixel', 'Elektron Pixel', ui-monospace, monospace;

    /* --- Core colors (hero / H1 clip-text base; future-event surfaces may override) --- */
    --title-color: #d3d66f;
    /* Same yellow mix as `.section-title` bar — default for site chrome borders */
    --heading-surface-yellow: color-mix(in srgb, var(--title-color) 92%, transparent);
    --bg-color: #03040d;
    --text-color: var(--title-color);
    --text-muted: var(--title-color);

    /* --- Accents --- */
    --accent-primary: #ff715f;
    --accent-secondary: #d3d66f;
    /* Text selection + form accent (inputs, checkboxes, ranges) */
    --selection-highlight: #ff715f;
    --selection-highlight-text: #141414;

    /* --- Scrollbars: brand tokens (CTAs / chrome); page thumb uses --selectie-indicatie-meow-color below --- */
    --scrollbar-brand: #d3d66f;
    --scrollbar-brand-hi: #f5f6a8;
    --scrollbar-brand-mid: #9a9b18;
    --scrollbar-brand-lo: #3d3e0c;
    --scrollbar-brand-shadow: #252608;

    /* --- Surfaces --- */
    --glass-bg: color-mix(in srgb, var(--title-color) 3%, transparent);
    --glass-border: var(--heading-surface-yellow);
    --footer-bg: #ffdafd;
    --footer-text: var(--title-color);
    --footer-version-color: #e85d8c; /* rose pink — build tag link */

    /* --- Pills (articles + past events) & past event date stack --- */
    --pill-xeppo-fg: var(--text-color);
    --pill-xeppo-border: var(--heading-surface-yellow);
    --pill-xeppo-bg: rgba(0, 243, 255, 0.1);
    --pill-suijd-fg: var(--text-color);
    --pill-suijd-border: var(--heading-surface-yellow);
    --pill-rajas-fg: var(--text-color);
    --pill-rajas-border: var(--heading-surface-yellow);
    --pill-rajas-bg: rgba(139, 92, 246, 0.15);
    --pill-default-fg: var(--text-color);
    --event-past-year-fg: var(--title-color);
    --event-past-monthday-fg: var(--title-color);

    /* --- Title / body atmosphere --- */
    --body-glow-gradient: linear-gradient(to top, rgba(255, 16, 240, 0.1), transparent);
    --title-gradient: linear-gradient(to right, var(--title-color) 0%, var(--title-color) 100%);
    --title-static-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='tn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.96' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23tn)'/%3E%3C/svg%3E");
    /* Trailing YouTube channel tile: denser grain than --title-static-noise */
    --recording-channel-heavy-noise: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='hn'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.55' numOctaves='6' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23hn)'/%3E%3C/svg%3E");
    --recording-channel-tile-accent: #fe725f;
    --recording-channel-tile-surface: #353538;
    --recording-channel-tile-surface-deep: #242426;

    /* --- Recording row: DOS-style track (clip cards) --- */
    --recording-scrollbar-track: #262626;
    --recording-scrollbar-track-shade: #050505;
    --recording-scrollbar-track-highlight: #4a4a4a;
    --recording-scrollbar-track-inset: #141414;
    --recording-scrollbar-thumb: #6e6e6e;
    --recording-scrollbar-thumb-face-dim: #4a4a4a;
    --recording-scrollbar-thumb-highlight: #b8b8b8;
    --recording-scrollbar-thumb-shadow: #202020;
    --recording-scrollbar-thumb-hover: #808080;
    --recording-frame-bg: rgba(211, 214, 111, 0.14);
    --recording-frame-border: var(--heading-surface-yellow);
    --recording-play-triangle: #080808;

    /* --- Nav & events --- */
    --nav-hover-fg: #000;
    --nav-hover-shadow: rgba(255, 16, 240, 0.35);
    --event-hover-bg: rgba(211, 214, 111, 0.1);
    --event-location-color: var(--title-color);

    /* --- Article cards & labels --- */
    --article-label-border: var(--heading-surface-yellow);
    --article-label-bg: color-mix(in srgb, var(--title-color) 6%, transparent);
    --pill-suijd-bg: var(--article-label-bg);
    --article-label-x-border: var(--pill-xeppo-border);
    --article-label-x-bg: var(--pill-xeppo-bg);
    --article-label-s-border: var(--pill-suijd-border);
    --article-label-s-bg: var(--pill-suijd-bg);
    --article-card-hover-bg: color-mix(in srgb, var(--title-color) 5%, transparent);
    --article-rajas-color: var(--pill-rajas-fg);
    --article-rajas-border: var(--pill-rajas-border);
    --article-rajas-bg: var(--pill-rajas-bg);

    /* --- Blink moments: shared cycle (selectie-indicatie-meow) --- */
    --selectie-indicatie-meow-color: #fe725f;
    --selectie-indicatie-meow-opacity-hi: 1;
    --selectie-indicatie-meow-opacity-lo: 0.33;
    /* 4 blinks total; 2× slower cycle */
    --selectie-indicatie-meow-cycle: 2.7s;
    --selectie-indicatie-meow-iterations: 4;
    --selectie-indicatie-meow-cycle-reduced: 4s;
    --selectie-indicatie-meow-iterations-reduced: 4;

    /* Page scrollbar: native `scrollbar-color` on `html` (one bar; rose thumb — no WebKit pseudo layer). */
    --page-scrollbar-track: #1a0d12;
    --page-scrollbar-thumb-mid: #e86890;
    --scrollbar-track: var(--page-scrollbar-track);
    --horizontal-scrollbar-thumb: var(--page-scrollbar-thumb-mid);

    /* --- Cursor: bigger pixel X with outline --- */
    /* Default: rosepink fill with black outer stroke */
    --cursor-x-default: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20fill='none'/%3E%3Cg%20fill='%23000000'%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='6'%20y='20'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='20'%20width='6'%20height='6'/%3E%3C/g%3E%3Cg%20fill='%23fe725f'%3E%3Crect%20x='7'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='7'%20y='21'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='21'%20width='4'%20height='4'/%3E%3C/g%3E%3C/svg%3E") 16 16, auto;
    /* Hover/invert: black fill with rosepink outer stroke */
    --cursor-x-invert: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20fill='none'/%3E%3Cg%20fill='%23fe725f'%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='6'%20y='20'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='20'%20width='6'%20height='6'/%3E%3C/g%3E%3Cg%20fill='%23000000'%3E%3Crect%20x='7'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='7'%20y='21'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='21'%20width='4'%20height='4'/%3E%3C/g%3E%3C/svg%3E") 16 16, auto;

    --cursor-oldschool-default: var(--cursor-x-default);
    --cursor-oldschool-pointer: var(--cursor-x-invert);

    /* --- Scroll-top bar --- */
    --scroll-top-border: var(--heading-surface-yellow);
    --scroll-top-stripe-a: #080808;
    --scroll-top-stripe-b: #0c0c0c;
    --scroll-top-inset: rgba(211, 214, 111, 0.15);
    --scroll-top-hover-inset-1: rgba(255, 16, 240, 0.35);
    --scroll-top-hover-glow: rgba(211, 214, 111, 0.11);
    --scroll-top-main-color: var(--title-color);
    --scroll-top-main-outline: #000;
    --scroll-top-glitch-c: var(--title-color);
    --scroll-top-glitch-m: #ff715f;

    /* --- CTA & copy / email --- */
    --cta-gradient: linear-gradient(135deg, var(--accent-primary), #ff6cf3);
    --cta-gradient-alt: linear-gradient(135deg, var(--accent-secondary), #8a8b12);
    --cta-fg: #000;
    --cta-hover-shadow: rgba(255, 16, 240, 0.35);
    --copy-bg: #000;
    --copy-fg: var(--title-color);
    --copy-hover-bg: var(--accent-secondary);
    --copy-hover-fg: #000;
    --copy-hover-glow: rgba(211, 214, 111, 0.2);
    --copy-success-bg: #00ff00;
    --copy-success-border: var(--heading-surface-yellow);
    --copy-success-fg: #000;
    --email-input-shadow: rgba(211, 214, 111, 0.1);

    /* --- Footer chrome --- */
    --footer-link-hover: var(--accent-primary);
    --footer-divider: var(--heading-surface-yellow);
    --star-rgb: 228, 236, 247;
    --footer-star-rgb: 0, 0, 0;

    /* --- LED / CRT readout: tight core + dithered micro-halos (less smooth bloom) --- */
    --led-text-shadow-core:
        0 0 1px color-mix(in srgb, currentColor 58%, transparent);
    --led-text-shadow-bloom:
        1px 0 0 color-mix(in srgb, var(--text-color) 11%, transparent),
        -1px 0 0 color-mix(in srgb, var(--text-color) 9%, transparent),
        0 1px 0 color-mix(in srgb, var(--text-color) 10%, transparent),
        0 -1px 0 color-mix(in srgb, var(--text-color) 7%, transparent),
        1px 1px 0 color-mix(in srgb, var(--text-color) 6%, transparent),
        -1px -1px 0 color-mix(in srgb, var(--text-color) 5%, transparent),
        2px 0 0 color-mix(in srgb, var(--text-color) 5%, transparent),
        -1px 2px 0 color-mix(in srgb, var(--text-color) 4%, transparent),
        0 0 2px color-mix(in srgb, var(--text-color) 5%, transparent);

    /*
     * CRT overscan — `.crt-overscan-frame` zooms page chrome slightly past the viewport.
     * `.crt-overscan-fringe` can draw a bezel + vignette; `--crt-overscan-fringe-opacity: 0` hides it (no visible page border).
     * Re-enable: raise opacity and tune hue/sat/width on :root or theme bodies.
     */
    --crt-overscan-scale: 1.03;
    --crt-overscan-fringe-hue: 12deg;
    --crt-overscan-fringe-saturation: 1.38;
    --crt-overscan-fringe-opacity: 0;
    --crt-overscan-fringe-width: min(2.4vw, 15px);
    --crt-overscan-vignette-spread: min(5.5vw, 72px);
    --crt-overscan-vignette-opacity: 0.42;
}

/* Meowlektron / OLED + acid-lime panel aesthetic */
body[data-site-theme="hw"] footer {
    border-top: 2px solid var(--heading-surface-yellow);
}

body[data-site-theme="hw"] {
    --bg-color: #03040d;
    --accent-primary: #ff3333;
    --accent-secondary: #d3d66f;
    --scrollbar-brand: #d3d66f;
    --scrollbar-brand-hi: #f5f6a8;
    --scrollbar-brand-mid: #9a9b18;
    --scrollbar-brand-lo: #3d3e0c;
    --scrollbar-brand-shadow: #252608;
    --footer-bg: #030303;
    --footer-text: var(--title-color);
    --text-color: var(--title-color);
    --text-muted: var(--title-color);
    --glass-bg: rgba(223, 255, 0, 0.04);
    --glass-border: var(--heading-surface-yellow);
    --body-glow-gradient: linear-gradient(to top, rgba(223, 255, 0, 0.08), transparent);
    --title-gradient: linear-gradient(to right, var(--title-color) 0%, var(--title-color) 100%);
    --scrollbar-track: var(--page-scrollbar-track);
    --recording-frame-bg: rgba(223, 255, 0, 0.07);
    --recording-frame-border: var(--heading-surface-yellow);
    --nav-hover-fg: #080808;
    --nav-hover-shadow: rgba(255, 51, 51, 0.5);
    --event-hover-bg: rgba(223, 255, 0, 0.07);
    --event-location-color: var(--title-color);
    --pill-xeppo-fg: var(--text-color);
    --pill-xeppo-border: var(--heading-surface-yellow);
    --pill-xeppo-bg: rgba(223, 255, 0, 0.08);
    --pill-suijd-fg: var(--text-color);
    --pill-suijd-border: var(--heading-surface-yellow);
    --pill-rajas-fg: var(--text-color);
    --pill-rajas-border: var(--heading-surface-yellow);
    --pill-rajas-bg: rgba(255, 51, 51, 0.08);
    --pill-default-fg: var(--text-color);
    --event-past-year-fg: var(--title-color);
    --event-past-monthday-fg: var(--title-color);
    --article-label-border: var(--heading-surface-yellow);
    --article-label-bg: rgba(0, 0, 0, 0.4);
    --pill-suijd-bg: var(--article-label-bg);
    --article-label-x-border: var(--pill-xeppo-border);
    --article-label-x-bg: var(--pill-xeppo-bg);
    --article-label-s-border: var(--pill-suijd-border);
    --article-label-s-bg: var(--pill-suijd-bg);
    --article-card-hover-bg: rgba(223, 255, 0, 0.06);
    --article-rajas-color: var(--pill-rajas-fg);
    --article-rajas-border: var(--pill-rajas-border);
    --article-rajas-bg: var(--pill-rajas-bg);
    --scroll-top-border: var(--heading-surface-yellow);
    --scroll-top-stripe-a: #0a0a0a;
    --scroll-top-stripe-b: #111111;
    --scroll-top-inset: rgba(223, 255, 0, 0.22);
    --scroll-top-hover-inset-1: rgba(255, 51, 51, 0.45);
    --scroll-top-hover-glow: rgba(223, 255, 0, 0.09);
    --scroll-top-main-color: var(--title-color);
    --scroll-top-main-outline: #000;
    --scroll-top-glitch-c: var(--title-color);
    --scroll-top-glitch-m: #ff3333;
    --cta-gradient: linear-gradient(180deg, #4f4f4f 0%, #2a2a2a 45%, #1a1a1a 100%);
    --cta-gradient-alt: linear-gradient(135deg, var(--accent-secondary), #8faa00);
    --cta-fg: #f0f0f0;
    --cta-hover-shadow: rgba(223, 255, 0, 0.22);
    --copy-bg: #080808;
    --copy-fg: var(--title-color);
    --copy-hover-bg: #d3d66f;
    --copy-hover-fg: #080808;
    --copy-hover-glow: rgba(211, 214, 111, 0.18);
    --copy-success-bg: #dfff00;
    --copy-success-border: var(--heading-surface-yellow);
    --copy-success-fg: #080808;
    --email-input-shadow: rgba(223, 255, 0, 0.12);
    --footer-link-hover: var(--accent-secondary);
    --footer-divider: var(--heading-surface-yellow);
    --star-rgb: 228, 236, 247;
    --footer-star-rgb: 223, 255, 0;
}

body[data-site-theme="hw"] #footer-canvas {
    opacity: 0.28;
}

/*
 * One document scrollbar only: scroll on `html`, `body` stays overflow-y: visible.
 * `overflow-y: scroll` keeps a classic vertical track (thumb ∝ full page height).
 * Omit `scrollbar-gutter: stable` here — with `overflow-y: scroll` it can double-reserve
 * gutter space on Chromium/Linux. No page-level `::-webkit-scrollbar` (OS paints one bar).
 */
html {
    margin: 0;
    padding: 0;
    width: 100%;
    overflow-x: hidden;
    overflow-y: scroll;
    scrollbar-width: auto;
    scrollbar-color: var(--page-scrollbar-thumb-mid) var(--page-scrollbar-track);
    background-color: var(--bg-color);
    scroll-behavior: auto;
    overflow-anchor: none;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    overflow-y: visible;
    scroll-behavior: auto;
    background-color: var(--bg-color);
    color: var(--text-color);
    font-family: var(--primary-font);
    font-size: 1.1rem;
    line-height: 1.6;
    letter-spacing: var(--body-letter-spacing);
}

*,
*::before,
*::after {
    box-sizing: border-box;
    transition-delay: 0s;
}

::selection {
    background-color: var(--selection-highlight);
    color: var(--selection-highlight-text);
    -webkit-text-fill-color: var(--selection-highlight-text);
    text-shadow: none;
}

::-moz-selection {
    background-color: var(--selection-highlight);
    color: var(--selection-highlight-text);
    text-shadow: none;
}

#email-input::selection,
.bio-email-input::selection,
textarea::selection,
input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio'])::selection {
    background-color: var(--selection-highlight);
    color: var(--selection-highlight-text);
    -webkit-text-fill-color: var(--selection-highlight-text);
    text-shadow: none;
}

#email-input::-moz-selection,
.bio-email-input::-moz-selection,
textarea::-moz-selection,
input:not([type='button']):not([type='submit']):not([type='reset']):not([type='checkbox']):not([type='radio'])::-moz-selection {
    background-color: var(--selection-highlight);
    color: var(--selection-highlight-text);
    text-shadow: none;
}

input,
textarea,
select {
    accent-color: var(--selection-highlight);
}

/* Do not inherit tightened body tracking on chrome / display lines (headings & labels already set their own) */
nav a,
.event-location,
#email-input,
.scroll-top-bar,
.cta-chevron,
.event-row-chevron {
    letter-spacing: normal;
}

body {
    position: relative;
    -webkit-font-smoothing: none;
    cursor: var(--cursor-oldschool-default);
    text-shadow: var(--led-text-shadow-core), var(--led-text-shadow-bloom);
    text-rendering: geometricPrecision;
}

/* Use an oldschool “hand” on interactive elements */
a,
button,
[role='button'],
summary,
label[for],
input[type='button'],
input[type='submit'],
input[type='reset'],
input[type='checkbox'],
input[type='radio'],
select {
    cursor: var(--cursor-oldschool-pointer);
}

/* Custom cursor layer (enables rotation on hover). */
body.has-custom-cursor,
body.has-custom-cursor * {
    cursor: none !important;
}

@property --cc-rot {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}
@property --cc-scale {
    syntax: '<number>';
    inherits: false;
    initial-value: 1;
}

/* Positioning + visibility: wrapper centers on (x,y); inner cursor rotates/scales only */
.custom-cursor-wrap {
    position: fixed;
    left: -9999px;
    top: -9999px;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    transform: translate(-50%, -50%);
    will-change: transform, opacity;
}

body.has-custom-cursor.is-custom-cursor-visible .custom-cursor-wrap {
    opacity: 1;
}

/* Narrow viewport: corner-parked idle cursor — dim + Gaussian blur */
body.has-custom-cursor.is-custom-cursor-visible.custom-cursor-mobile-idle .custom-cursor-wrap {
    opacity: 0.22;
    filter: blur(2.75px);
}

body.has-custom-cursor.is-custom-cursor-visible.custom-cursor-mobile-idle .custom-cursor {
    filter: none;
}

@media (prefers-reduced-motion: reduce) {
    body.has-custom-cursor.is-custom-cursor-visible.custom-cursor-mobile-idle .custom-cursor-wrap {
        filter: none;
    }
}

/* Pixel-fractured halo inside touch radius (filled via box-shadow in app.js) */
.custom-cursor__touch-fracture {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 2px;
    margin: -1px 0 0 -1px;
    pointer-events: none;
    background: transparent;
    opacity: 0;
    transition: opacity 0.08s ease-out;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    z-index: 0;
}

body.has-custom-cursor.is-custom-cursor-touch-fracture .custom-cursor__touch-fracture {
    opacity: 1;
}

.custom-cursor {
    position: relative;
    left: auto;
    top: auto;
    /* box: keep in sync with CUSTOM_CURSOR_BOX_PX in app.js (touch hit search uses 2× this) */
    width: 64px;
    height: 64px;
    --cc-rot: 0deg;
    --cc-scale: 1;
    transform: rotate(var(--cc-rot)) scale(var(--cc-scale));
    transform-origin: 50% 50%;
    z-index: 1;
    pointer-events: none;
    opacity: 1;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    /* Large pixel X (rose fill + black outline) */
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20fill='none'/%3E%3Cg%20fill='%23000000'%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='6'%20y='20'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='20'%20width='6'%20height='6'/%3E%3C/g%3E%3Cg%20fill='%23fe725f'%3E%3Crect%20x='7'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='7'%20y='21'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='21'%20width='4'%20height='4'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 64px 64px;
    background-repeat: no-repeat;
    will-change: transform;
    /* Extra 3px outside stroke (black) */
    filter:
        drop-shadow(3px 0 0 #000)
        drop-shadow(-3px 0 0 #000)
        drop-shadow(0 3px 0 #000)
        drop-shadow(0 -3px 0 #000);
}

/* Inverted styling on hover targets */
body.has-custom-cursor.is-custom-cursor-invert .custom-cursor {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='64'%20height='64'%20viewBox='0%200%2032%2032'%3E%3Crect%20width='32'%20height='32'%20fill='none'/%3E%3Cg%20fill='%23fe725f'%3E%3Crect%20x='6'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='6'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='11'%20y='15'%20width='6'%20height='6'/%3E%3Crect%20x='15'%20y='11'%20width='6'%20height='6'/%3E%3Crect%20x='6'%20y='20'%20width='6'%20height='6'/%3E%3Crect%20x='20'%20y='20'%20width='6'%20height='6'/%3E%3C/g%3E%3Cg%20fill='%23000000'%3E%3Crect%20x='7'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='7'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='12'%20y='16'%20width='4'%20height='4'/%3E%3Crect%20x='16'%20y='12'%20width='4'%20height='4'/%3E%3Crect%20x='7'%20y='21'%20width='4'%20height='4'/%3E%3Crect%20x='21'%20y='21'%20width='4'%20height='4'/%3E%3C/g%3E%3C/svg%3E");
    /* Extra 3px outside stroke (rosepink) */
    filter:
        drop-shadow(3px 0 0 #fe725f)
        drop-shadow(-3px 0 0 #fe725f)
        drop-shadow(0 3px 0 #fe725f)
        drop-shadow(0 -3px 0 #fe725f);
}

/* Rotate 45° when hovering interactive targets */
body.has-custom-cursor.is-custom-cursor-rotate .custom-cursor {
    /* 2s loop: rotate fast, return, repeat */
    animation: custom-cursor-rotate-pingpong 2s linear infinite;
}

@keyframes custom-cursor-rotate-pingpong {
    0% { --cc-rot: 0deg; }
    /* fast spin up */
    22% { --cc-rot: 45deg; }
    /* brief hold at max */
    32% { --cc-rot: 45deg; }
    /* return to 0 and rest */
    64% { --cc-rot: 0deg; }
    100% { --cc-rot: 0deg; }
}

/* Clickable hover pulse: shrink 25% then back in 2 hard steps */
body.has-custom-cursor.is-custom-cursor-invert .custom-cursor {
    animation: custom-cursor-scale-steps 2s steps(2, end) infinite;
}

body.has-custom-cursor.is-custom-cursor-invert.is-custom-cursor-rotate .custom-cursor {
    animation:
        custom-cursor-rotate-pingpong 2s linear infinite,
        custom-cursor-scale-steps 2s steps(2, end) infinite;
}

@keyframes custom-cursor-scale-steps {
    0% { --cc-scale: 1; }
    50% { --cc-scale: 0.85; }
    100% { --cc-scale: 1; }
}

/* Easter egg: 4× hover on “Joris” title link → one 720° spin (ease-in-out), once per load */
@keyframes custom-cursor-joris-spin-720 {
    from { --cc-rot: 0deg; }
    to { --cc-rot: 720deg; }
}

#custom-cursor.is-joris-spin-720 {
    animation: custom-cursor-joris-spin-720 1.45s ease-in-out;
}

@keyframes select-indicator-jump-in-left {
    0% { transform: translate(-100%, -50%) translateX(0); }
    50% { transform: translate(-100%, -50%) translateX(var(--hover-select-arrow-jump)); }
    100% { transform: translate(-100%, -50%) translateX(0); }
}

@keyframes select-indicator-jump-in-right {
    0% { transform: translate(100%, -50%) translateX(0); }
    50% { transform: translate(100%, -50%) translateX(calc(var(--hover-select-arrow-jump) * -1)); }
    100% { transform: translate(100%, -50%) translateX(0); }
}

@keyframes select-indicator-jump-in-top {
    0% { transform: translate(-50%, -100%) translateY(0); }
    50% { transform: translate(-50%, -100%) translateY(var(--hover-select-arrow-jump)); }
    100% { transform: translate(-50%, -100%) translateY(0); }
}

@keyframes select-indicator-jump-in-bottom {
    0% { transform: translate(-50%, 100%) translateY(0); }
    50% { transform: translate(-50%, 100%) translateY(calc(var(--hover-select-arrow-jump) * -1)); }
    100% { transform: translate(-50%, 100%) translateY(0); }
}

/* Events: explicit left/right selectors on hover, rosepink + stroke */
.event-item:is(:hover, :focus-within) {
    position: relative;
}
.event-item:is(:hover, :focus-within)::before,
.event-item:is(:hover, :focus-within)::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--hover-select-arrow);
    -webkit-text-fill-color: var(--hover-select-arrow);
    -webkit-text-stroke: var(--select-indicator-stroke) var(--hover-select-arrow);
    font-family: var(--title-font);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    line-height: 1;
    z-index: 3;
    font-size: var(--select-indicator-size);
}
.event-item:is(:hover, :focus-within)::before {
    content: '>';
    left: 0;
    --si-dir: 1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}
.event-item:is(:hover, :focus-within)::after {
    content: '<';
    right: 0;
    --si-dir: -1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

/* Hover “select arrows” */
:root {
    --hover-select-arrow: #fe725f;
    --hover-select-arrow-jump: 9px;
    --select-indicator-size: 1.5em;
    --select-indicator-stroke: 1.25px;
    --select-indicator-jump: var(--hover-select-arrow-jump);
    --select-indicator-speed: 1.1s;
}

@property --si-k {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

@keyframes select-indicator-step-in-x {
    0% { --si-k: 0; transform: translateY(-50%) translateX(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    50% { --si-k: 1; transform: translateY(-50%) translateX(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    100% { --si-k: 0; transform: translateY(-50%) translateX(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
}

@keyframes select-indicator-step-in-y {
    0% { --si-k: 0; transform: translateX(-50%) translateY(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    50% { --si-k: 1; transform: translateX(-50%) translateY(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    100% { --si-k: 0; transform: translateX(-50%) translateY(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
}

/* Social tiles: vertical in/out pulse from border */
@property --si-yk {
    syntax: '<number>';
    inherits: true;
    initial-value: 0;
}

/* Social tiles: vertical arrows (no rotation) */
@keyframes social-indicator-plain-y {
    0% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir)));
    }
    50% {
        --si-yk: 1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir)));
    }
    100% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir)));
    }
}

/* Same motion as social-indicator-plain-y; top tile marker uses ^ flipped vertically */
@keyframes social-indicator-plain-y-mirror {
    0% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir))) scaleY(-1);
    }
    50% {
        --si-yk: 1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir))) scaleY(-1);
    }
    100% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir))) scaleY(-1);
    }
}

/* Small screens: different “orbit” so arrows read clearly with more inset from edges */
@keyframes select-indicator-mobile-x {
    0% { --si-k: -1; transform: translateY(-50%) translateX(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    33% { --si-k: 1; transform: translateY(-50%) translateX(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    66% { --si-k: -0.35; transform: translateY(-50%) translateX(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    100% { --si-k: -1; transform: translateY(-50%) translateX(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
}

@keyframes select-indicator-mobile-y {
    0% { --si-k: -1; transform: translateX(-50%) translateY(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    33% { --si-k: 1; transform: translateX(-50%) translateY(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    66% { --si-k: -0.35; transform: translateX(-50%) translateY(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
    100% { --si-k: -1; transform: translateX(-50%) translateY(calc(var(--si-k) * var(--select-indicator-jump) * var(--si-dir))); }
}

@keyframes social-indicator-plain-mobile-y {
    0% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir)));
    }
    33% {
        --si-yk: 1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir)));
    }
    66% {
        --si-yk: -0.35;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir)));
    }
    100% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir)));
    }
}

@keyframes social-indicator-plain-mobile-y-mirror {
    0% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir))) scaleY(-1);
    }
    33% {
        --si-yk: 1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir))) scaleY(-1);
    }
    66% {
        --si-yk: -0.35;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir))) scaleY(-1);
    }
    100% {
        --si-yk: -1;
        transform: translateX(-50%) translateY(calc(var(--si-yk) * var(--select-indicator-jump) * var(--si-dir))) scaleY(-1);
    }
}

/* Default: show > (left) and < (right) on hover for clickable objects */
/* Outer-only: indicators only on main clickable containers (not nested text/links) */
:where(
    .bio-contact-line,
    .recording-item,
    .scroll-top-bar
):is(:hover, :focus-visible) {
    position: relative;
}

:where(
    .bio-contact-line,
    .recording-item,
    .scroll-top-bar
):is(:hover, :focus-visible)::before,
:where(
    .bio-contact-line,
    .recording-item,
    .scroll-top-bar
):is(:hover, :focus-visible)::after {
    position: absolute;
    top: 50%;
    pointer-events: none;
    color: var(--hover-select-arrow);
    -webkit-text-fill-color: var(--hover-select-arrow);
    -webkit-text-stroke: var(--select-indicator-stroke) var(--hover-select-arrow);
    font-family: var(--title-font);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    line-height: 1;
    z-index: 3;
    font-size: var(--select-indicator-size);
}

:where(
    .bio-contact-line,
    .recording-item,
    .scroll-top-bar
):is(:hover, :focus-visible)::before {
    content: '>';
    left: 0;
    --si-dir: 1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

:where(
    .bio-contact-line,
    .recording-item,
    .scroll-top-bar
):is(:hover, :focus-visible)::after {
    content: '<';
    right: 0;
    --si-dir: -1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

/* Header social tiles + contact/DM: arrows above and under tile */
#social-nav-groups :is(a, button).social-link--header-tile,
#header-contact-line {
    position: relative;
}

#social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::before,
#social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::after,
#header-contact-line:is(:hover, :focus-visible)::before,
#header-contact-line:is(:hover, :focus-visible)::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    -webkit-text-stroke: var(--select-indicator-stroke) var(--selectie-indicatie-meow-color);
    font-family: var(--title-font);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    line-height: 1;
    z-index: 3;
    font-size: var(--select-indicator-size);
}

#header-contact-line:is(:hover, :focus-visible)::before {
    content: 'v';
    /* Half of 2px border: sit on the outer stroke, not inside the padding box */
    top: -1px;
    --si-dir: 1;
    animation: select-indicator-step-in-y var(--select-indicator-speed) steps(3, end) infinite;
}

#header-contact-line:is(:hover, :focus-visible)::after {
    content: '^';
    bottom: -1px;
    --si-dir: -1;
    animation: select-indicator-step-in-y var(--select-indicator-speed) steps(3, end) infinite;
}

#header-contact-line:is(:hover, :focus-visible)::before,
#header-contact-line:is(:hover, :focus-visible)::after {
    width: 1em;
    text-align: center;
}

/* Contact CTA: left/right indicators (::before/::after on button are top/bottom v / ^) */
.header-contact-side-indicators {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}

#header-contact-line:is(:hover, :focus-visible) .header-contact-side-indicators::before,
#header-contact-line:is(:hover, :focus-visible) .header-contact-side-indicators::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    -webkit-text-stroke: var(--select-indicator-stroke) var(--selectie-indicatie-meow-color);
    font-family: var(--title-font);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    line-height: 1;
    z-index: 3;
    font-size: var(--select-indicator-size);
    width: 1em;
    text-align: center;
}

#header-contact-line:is(:hover, :focus-visible) .header-contact-side-indicators::before {
    content: '>';
    left: -1px;
    --si-dir: 1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

#header-contact-line:is(:hover, :focus-visible) .header-contact-side-indicators::after {
    content: '<';
    right: -1px;
    --si-dir: -1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

/* Social tiles: caret-up (^); top marker mirrored vertically */
#social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::before {
    content: '^';
    top: 12%;
    bottom: auto;
    --si-dir: 1;
    animation: social-indicator-plain-y-mirror var(--select-indicator-speed) steps(3, end) infinite;
}
#social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::after {
    content: '^';
    bottom: 12%;
    top: auto;
    --si-dir: -1;
    animation: social-indicator-plain-y var(--select-indicator-speed) steps(3, end) infinite;
}

@media (max-width: 768px) {
    #social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::before {
        top: -2%;
    }
    #social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::after {
        bottom: -2%;
    }
}


/* Social tiles: lock arrows to exact border centers */
#social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::before,
#social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::after {
    width: 1em;
    text-align: center;
}

/* (cursor is already inverted on interactive hover via --cursor-oldschool-pointer) */

/* While `data.json` + `populateAll` are pending — solid blocks in body / title text color */
body.js-app-loading .async-placeholder {
    display: block;
    flex-shrink: 0;
    box-sizing: border-box;
    pointer-events: none;
    background-color: var(--text-color);
    border-radius: 0;
}

body:not(.js-app-loading) .async-placeholder {
    display: none !important;
}

.async-placeholder--hero-projects {
    width: clamp(11rem, 62vw, 26rem);
    height: 2.45rem;
    align-self: flex-start;
}

.async-placeholder--recording {
    flex: 0 0 auto;
    width: 100%;
    min-height: clamp(7.5rem, 22vw, 9.5rem);
}

/* Recording row loading skeleton: transparent frame + play glyph only (no background cover). */
body.js-app-loading .async-placeholder--recording {
    position: relative;
    background: transparent;
    border: 2px solid var(--title-color);
    display: block;
    text-decoration: none;
    cursor: pointer;
}

body.js-app-loading .async-placeholder--recording::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(2.4rem, 8vw, 3.6rem);
    height: clamp(2.4rem, 8vw, 3.6rem);
    pointer-events: none;
    box-sizing: border-box;
    /* CSS triangle */
    clip-path: polygon(40% 30%, 40% 70%, 72% 50%);
    background: var(--title-color);
    opacity: 1;
}

.async-placeholder--social-nav {
    grid-column: 1 / -1;
    width: 100%;
    min-height: clamp(3.4rem, 11vw, 4.75rem);
}

.async-placeholder--bio {
    width: 100%;
    max-width: 1000px;
    min-height: clamp(5.5rem, 28vw, 10rem);
}

.async-placeholder--events {
    width: 100%;
    min-height: clamp(4.25rem, 14vw, 6rem);
}

.async-placeholder--articles {
    grid-column: 1 / -1;
    width: 100%;
    min-height: clamp(10rem, 36vw, 14rem);
}

.async-placeholder--footer-col {
    width: 100%;
    min-height: clamp(2.1rem, 8vw, 3.2rem);
}

.footer-col--stream .footer-socials .async-placeholder--footer-col,
.footer-col--actions .footer-socials .async-placeholder--footer-col {
    max-width: 18rem;
}

/* Zoom page content past safe area; width compensation keeps horizontal layout aligned */
.crt-overscan-frame {
    display: block;
    position: relative;
    z-index: 15;
    transform: scale(var(--crt-overscan-scale));
    transform-origin: top center;
    width: calc(100% / var(--crt-overscan-scale));
    max-width: calc(100% / var(--crt-overscan-scale));
    margin-left: auto;
    margin-right: auto;
    box-sizing: border-box;
}

/* Overscan bezel: hue + saturation apply to this layer only (see --crt-overscan-fringe-*) */
.crt-overscan-fringe {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: var(--crt-overscan-fringe-opacity);
    mix-blend-mode: soft-light;
    filter: hue-rotate(var(--crt-overscan-fringe-hue)) saturate(var(--crt-overscan-fringe-saturation));
    box-shadow:
        inset 0 0 0 var(--crt-overscan-fringe-width) rgba(200, 255, 150, 0.45),
        inset 0 0 var(--crt-overscan-vignette-spread) rgba(0, 0, 0, var(--crt-overscan-vignette-opacity));
}

@media (prefers-reduced-motion: reduce) {
    .crt-overscan-frame {
        transform: none;
        width: 100%;
        max-width: 100%;
    }

    .crt-overscan-fringe {
        opacity: 0;
    }
}

/* Language — default: dark panel; BIO bar variant: .lang-switch--in-bio-bar */
.lang-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--title-font);
    font-size: clamp(0.68rem, 2.2vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--title-color);
    pointer-events: auto;
    flex-shrink: 0;
}

.lang-switch__btn {
    margin: 0;
    padding: 0.5rem 0.75rem;
    border: 2px solid var(--heading-surface-yellow);
    background: rgba(34, 34, 38, 0.88);
    color: var(--title-color);
    cursor: pointer;
    font: inherit;
    text-transform: uppercase;
    border-radius: 0;
    line-height: 1.15;
    transition: none;
    -webkit-tap-highlight-color: transparent;
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--title-color) 4%, transparent);
}

.lang-switch__btn:hover {
    border-color: var(--title-color);
    color: var(--title-color);
    background: rgba(42, 42, 48, 0.92);
}

.lang-switch__btn--active {
    color: var(--title-color);
    border-color: var(--title-color);
    background: rgba(48, 48, 54, 0.95);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--title-color) 6%, transparent);
}

.lang-switch__sep {
    opacity: 0.35;
    user-select: none;
    font-weight: 600;
    font-size: 0.85em;
}

/* EN/NL controls only appear in the BIO heading bar */
.lang-switch:not(.lang-switch--in-bio-bar) {
    display: none;
}

/* BIO heading bar: language toggle — inactive = dark border/type like “BIO”; active = yellow on dark chip */
.section-title--bio-with-lang {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.65rem 1rem;
    width: 100%;
    max-width: 100%;
}

.section-title--bio-with-lang .section-title__main {
    flex: 1 1 auto;
    min-width: 0;
}

/* Hash arrival (see app.js): BIO heading bar opacity-blinks (stays yellow). */
#section-title-bio.is-bio-heading-blinking {
    animation: selectie-indicatie-meow var(--selectie-indicatie-meow-cycle) steps(1, end) 2;
    will-change: opacity;
}

.lang-switch--in-bio-bar {
    color: #141414;
    flex-shrink: 0;
}

.lang-switch--in-bio-bar .lang-switch__btn {
    background: transparent;
    border: 2px solid #141414;
    color: #141414;
    -webkit-text-fill-color: #141414;
    box-shadow: none;
    transition: none;
}

.lang-switch--in-bio-bar .lang-switch__btn:hover:not(.lang-switch__btn--active) {
    background: #141414;
    border-color: #141414;
    color: #f5f5f5;
    -webkit-text-fill-color: #f5f5f5;
    opacity: 1;
}

/* NL button hover: use body text yellow (not white) */
.lang-switch--in-bio-bar #lang-nl:hover:not(.lang-switch__btn--active) {
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
}

/* EN button hover: use body text yellow (not white) */
.lang-switch--in-bio-bar #lang-en:hover:not(.lang-switch__btn--active) {
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
}

/* Active: yellow label on dark chip; border matches fill */
.lang-switch--in-bio-bar .lang-switch__btn--active {
    --lang-switch-active-fill: rgba(20, 20, 20, 0.92);
    background: var(--lang-switch-active-fill);
    border-color: var(--lang-switch-active-fill);
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    font-weight: 800;
    box-shadow: none;
    opacity: 1;
}

.lang-switch--in-bio-bar .lang-switch__btn--active:hover {
    background: var(--lang-switch-active-fill);
    border-color: var(--lang-switch-active-fill);
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    opacity: 1;
}

.lang-switch--in-bio-bar .lang-switch__sep {
    color: #141414;
    -webkit-text-fill-color: #141414;
    opacity: 0.4;
}

.lang-switch--in-bio-bar .lang-switch__label--abbr {
    display: none;
}

.lang-switch--in-bio-bar .lang-switch__label--full {
    display: inline;
}

#star-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10; /* Above bg image */
    pointer-events: none;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

body.site-effect-stars-off #star-canvas,
body.site-effect-footer-stars-off #footer-canvas,
body.site-effect-noise-off .noise-overlay,
body.site-effect-custom-cursor-off .custom-cursor-wrap {
    display: none !important;
}

body.site-effect-crt-off {
    --crt-overscan-scale: 1;
    --crt-overscan-fringe-opacity: 0;
}

.bg-layer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-image: url('assets/suijdi_bg.jpg');
    background-repeat: repeat;
    background-size: 400px;
    opacity: 0.3;
    transition: none;
    pointer-events: none;
    isolation: isolate;
    transform-origin: 50% 42%;
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .bg-layer {
        will-change: auto;
    }
}

/* Yellow–green wash over the tiled bg (under stars, above photo) */
.bg-layer::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        165deg,
        rgba(210, 255, 100, 0.18) 0%,
        rgba(70, 110, 45, 0.12) 38%,
        rgba(185, 235, 120, 0.15) 68%,
        rgba(130, 175, 75, 0.11) 100%
    );
}

body::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40vh;
    background: var(--body-glow-gradient);
    z-index: 6;
    pointer-events: none;
}

.noise-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    opacity: 0.11;
    mix-blend-mode: soft-light;
    background-image:
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) 2px,
            rgba(0, 0, 0, 0.18) 2px,
            rgba(0, 0, 0, 0.18) 3px
        ),
        repeating-linear-gradient(
            90deg,
            rgba(0, 0, 0, 0) 0,
            rgba(0, 0, 0, 0) 1px,
            rgba(0, 0, 0, 0.07) 1px,
            rgba(0, 0, 0, 0.07) 2px
        ),
        repeating-linear-gradient(
            128deg,
            transparent 0 4px,
            color-mix(in srgb, var(--title-color) 2%, transparent) 4px,
            color-mix(in srgb, var(--title-color) 2%, transparent) 5px,
            transparent 5px 8px
        ),
        url('data:image/svg+xml;utf8,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><filter id="noiseFilter"><feTurbulence type="fractalNoise" baseFrequency="1.25" numOctaves="5" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noiseFilter)"/></svg>');
    background-size: 100% 100%, 3px 100%, 7px 7px, 96px 96px;
}

.container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 var(--container-pad-x);
}

/* Header is flex + align-items:center — stretch container so width matches main `.container`
   (same as section headings); avoids shrink-wrap to recording row intrinsic width. */
header .container {
    min-width: 0;
    align-self: stretch;
    width: 100%;
    box-sizing: border-box;
}

/* Hero column: one rhythm token — equal row-gap between hero, contact CTA, YouTube row, socials (+ matching pad under nav) */
.header-content {
    --header-stack-gap: clamp(1.125rem, 0.5rem + 2.15vw, 2rem);
    /* Extra air under subtitle, projects strip, contact CTA, YouTube row (adds to row-gap between major blocks) */
    --header-section-spacer: clamp(2.55rem, 1.26rem + 5.55vw, 4.5rem);
    /* Symmetric vertical rhythm: projects→contact gap matches contact→YouTube gap (both add stack-gap between flex items) */
    --header-contact-block-spacer: calc(var(--header-section-spacer) * 0.88);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    row-gap: var(--header-stack-gap);
    padding-bottom: var(--header-stack-gap);
    box-sizing: border-box;
}

.header-hero .header-sub {
    margin-bottom: var(--header-section-spacer);
}

.header-hero .bio-projects--hero {
    margin-bottom: var(--header-contact-block-spacer);
}

.header-content > .recording-bar-wrap {
    margin-bottom: var(--header-section-spacer);
}

.header-content > .header-contact-wrap {
    margin-bottom: var(--header-contact-block-spacer);
}

/* Header & Typography */
header {
    min-height: 70vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 4rem 0 2rem;
    position: relative;
    z-index: 30;
}

h1 {
    font-family: var(--title-font);
    font-size: clamp(2.5rem, 8.5vw, 5rem);
    text-transform: uppercase;
    line-height: 0.66;
    letter-spacing: -7px;
    margin-bottom: 1.5rem;
    background: var(--title-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Name + subtitle stack: left-aligned with container edge */
.header-hero {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.header-sub {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: 100%;
    max-width: 100%;
    container-type: inline-size;
    min-width: 0;
}

/* Hero subtitle — solid --title-color chip like .section-title */
.header-subtitle-banner {
    margin: 0;
    display: inline-block;
    max-width: 100%;
    padding: clamp(0.32rem, 0.35rem + 0.6vw, 0.5rem) clamp(0.45rem, 0.5rem + 1.1vw, 0.85rem);
    box-sizing: border-box;
    background: var(--title-color);
    color: #141414;
    text-shadow: none;
    -webkit-text-fill-color: #141414;
    border: none;
    font-family: var(--primary-font);
    /* Prefer one line; fluid type from viewport; cqi refines when container queries are supported */
    white-space: nowrap;
    font-size: clamp(0.34rem, 0.19rem + 2.05vw, 1.02rem);
    font-weight: 600;
    letter-spacing: 0.032em;
    line-height: 1.35;
    text-transform: none;
    text-align: left;
}

.header-subtitle-banner__plus {
    font-weight: 900;
}

@supports (font-size: 1cqi) {
    .header-subtitle-banner {
        font-size: clamp(0.34rem, 0.19rem + min(2.05vw, 2.45cqi), 1.02rem);
    }
}

@media (max-width: 768px) {
    .header-subtitle-banner {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }
}

@media (max-width: 420px) {
    .header-subtitle-banner {
        white-space: normal;
        text-wrap: balance;
    }
}

#main-title {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    max-width: 100%;
    /* Tight stack; padding on lines + noise blend avoids clip */
    line-height: 0.78;
    overflow: visible;
    overflow-wrap: break-word;
    background: none;
    -webkit-background-clip: unset;
    background-clip: unset;
    -webkit-text-fill-color: unset;
    animation: main-title-glitch-min 24s linear infinite;
}

#main-title .main-title__inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    row-gap: clamp(0.02em, 0.35vw, 0.06em);
    min-width: 0;
    max-width: 100%;
    overflow: visible;
}

#main-title .main-title__line {
    display: block;
    text-transform: uppercase;
    letter-spacing: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 0.76;
    padding-block: 0.03em;
    overflow: visible;
    background-color: transparent;
    background-image: var(--title-static-noise), var(--title-gradient);
    background-size: 64px 64px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, center;
    background-blend-mode: soft-light, normal;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    /* Let the fixed star canvas read through the glyphs (inverted / continued field vs title fill) */
    mix-blend-mode: exclusion;
}

#main-title a.main-title__line--first {
    text-decoration: none;
    cursor: pointer;
    position: relative;
    display: inline-block;
}

/* Hover letter glitch “spark”: a single rosepink character that flickers away */
.title-hover-glitch-spark {
    position: absolute;
    top: 0;
    left: 0;
    pointer-events: none;
    z-index: 3;
    color: #fe725f;
    -webkit-text-fill-color: #fe725f;
    mix-blend-mode: normal;
    text-shadow: none;
    filter: none;
    opacity: 0;
    animation: title-hover-glitch-spark-flicker 520ms steps(1, end) forwards;
}

@keyframes title-hover-glitch-spark-flicker {
    0% { opacity: 0; }
    10% { opacity: 1; }
    24% { opacity: 0; }
    38% { opacity: 1; }
    52% { opacity: 0; }
    66% { opacity: 1; }
    100% { opacity: 0; }
}

#main-title a.main-title__line--first.is-title-hover-glitch-base,
#main-title a.main-title__line--first.is-title-hover-glitch-intense {
    will-change: transform, filter, background-position;
}

/* Base hover glitch: immediate but controlled */
#main-title a.main-title__line--first.is-title-hover-glitch-base {
    animation: main-title-line-glitch-hover 560ms steps(2, end) infinite;
}

/* Intense hover glitch: starts after a delay via JS */
#main-title a.main-title__line--first.is-title-hover-glitch-intense {
    animation: main-title-line-glitch-hover-intense 360ms steps(2, end) infinite;
}

/* Restore: lingers after hover out (4s), with speed-up after 2s (2nd half) */
#main-title a.main-title__line--first.is-title-hover-glitch-restoring {
    animation: main-title-line-glitch-restore 4s steps(1, end) forwards;
    will-change: transform, filter, background-position;
}

#main-title a.main-title__line--first:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 0.12em;
}

#main-title .main-title__line--mid:empty,
#main-title .main-title__line--rest:empty {
    display: none;
}

#bio {
    scroll-margin-top: clamp(2rem, 6vw, 4rem);
}

@keyframes main-title-glitch-min {
    0%, 100% { transform: translate3d(0, 0, 0); }
    92.8% { transform: translate3d(0, 0, 0); }
    92.83% { transform: translate3d(0.45px, -0.35px, 0); }
    92.87% { transform: translate3d(-0.4px, 0.25px, 0); }
    92.9% { transform: translate3d(0, 0, 0); }
    96.4% { transform: translate3d(0, 0, 0); }
    96.42% { transform: translate3d(-0.5px, 0, 0); }
    96.46% { transform: translate3d(0, 0, 0); }
}

@keyframes heading-glitch-sparse {
    0%, 100% { transform: translate3d(0, 0, 0); }

    88.6% { transform: translate3d(0, 0, 0); }
    88.62% { transform: translate3d(0.35px, -0.25px, 0); }
    88.66% { transform: translate3d(-0.3px, 0.2px, 0); }
    88.7% { transform: translate3d(0, 0, 0); }

    93.18% { transform: translate3d(0, 0, 0); }
    93.2% { transform: translate3d(-0.45px, 0px, 0); }
    93.24% { transform: translate3d(0.25px, 0.35px, 0); }
    93.28% { transform: translate3d(0, 0, 0); }

    97.32% { transform: translate3d(0, 0, 0); }
    97.34% { transform: translate3d(0.4px, 0.1px, 0); }
    97.38% { transform: translate3d(0, 0, 0); }
}

@keyframes main-title-line-glitch-hover {
    0% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        background-position: 0 0, center;
        filter: none;
    }
    12.5% {
        transform: translate3d(-1.2px, 0.6px, 0) skewX(-1deg);
        background-position: -6px 2px, center;
        filter: contrast(1.06) saturate(1.05);
    }
    25% {
        transform: translate3d(1.4px, -0.9px, 0) skewX(1deg);
        background-position: 9px -3px, center;
        filter: contrast(1.08) saturate(1.06);
    }
    37.5% {
        transform: translate3d(-0.9px, -0.4px, 0) skewX(-1.5deg);
        background-position: -12px 4px, center;
        filter: contrast(1.05) saturate(1.08);
    }
    50% {
        transform: translate3d(1.1px, 0.5px, 0) skewX(1.5deg);
        background-position: 14px -5px, center;
        filter: contrast(1.07) saturate(1.05);
    }
    62.5% {
        transform: translate3d(-1.4px, 0px, 0) skewX(-0.8deg);
        background-position: -18px 7px, center;
        filter: contrast(1.09) saturate(1.07);
    }
    75% {
        transform: translate3d(0.8px, -0.7px, 0) skewX(0.8deg);
        background-position: 22px -6px, center;
        filter: contrast(1.06) saturate(1.05);
    }
    87.5% {
        transform: translate3d(-0.6px, 0.9px, 0) skewX(-1.2deg);
        background-position: -26px 10px, center;
        filter: contrast(1.08) saturate(1.08);
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        background-position: 0 0, center;
        filter: none;
    }
}

@keyframes main-title-line-glitch-hover-intense {
    0% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        background-position: 0 0, center;
        filter: none;
    }
    12.5% {
        transform: translate3d(-2.4px, 1.2px, 0) skewX(-2.4deg);
        background-position: -12px 4px, center;
        filter: contrast(1.14) saturate(1.12);
    }
    25% {
        transform: translate3d(2.8px, -1.8px, 0) skewX(2.2deg);
        background-position: 18px -7px, center;
        filter: contrast(1.18) saturate(1.14);
    }
    37.5% {
        transform: translate3d(-1.8px, -0.9px, 0) skewX(-3.2deg);
        background-position: -24px 9px, center;
        filter: contrast(1.12) saturate(1.18);
    }
    50% {
        transform: translate3d(2.2px, 1.1px, 0) skewX(3deg);
        background-position: 28px -10px, center;
        filter: contrast(1.16) saturate(1.12);
    }
    62.5% {
        transform: translate3d(-2.8px, 0px, 0) skewX(-1.7deg);
        background-position: -34px 14px, center;
        filter: contrast(1.2) saturate(1.16);
    }
    75% {
        transform: translate3d(1.6px, -1.4px, 0) skewX(1.6deg);
        background-position: 40px -16px, center;
        filter: contrast(1.14) saturate(1.2);
    }
    87.5% {
        transform: translate3d(-2.1px, 1.5px, 0) skewX(-2deg);
        background-position: -44px 18px, center;
        filter: contrast(1.22) saturate(1.18);
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        background-position: 0 0, center;
        filter: none;
    }
}

@keyframes main-title-line-glitch-restore {
    /* First 2s: still a bit glitchy (slow settle) */
    0% {
        transform: translate3d(-1.4px, 0.8px, 0) skewX(-1.5deg);
        background-position: -10px 3px, center;
        filter: contrast(1.08) saturate(1.06);
        opacity: 1;
    }
    25% {
        transform: translate3d(1px, -0.6px, 0) skewX(1.1deg);
        background-position: 8px -3px, center;
        filter: contrast(1.06) saturate(1.05);
        opacity: 1;
    }
    50% {
        transform: translate3d(-0.6px, 0.3px, 0) skewX(-0.6deg);
        background-position: -4px 1px, center;
        filter: contrast(1.03) saturate(1.02);
        opacity: 1;
    }

    /* After 2s: speed up the settle (quick snap to clean) */
    62% {
        transform: translate3d(0.35px, -0.2px, 0) skewX(0.25deg);
        background-position: 2px -1px, center;
        filter: contrast(1.015) saturate(1.01);
    }
    78% {
        transform: translate3d(-0.15px, 0.1px, 0) skewX(-0.1deg);
        background-position: -1px 0px, center;
        filter: none;
    }
    100% {
        transform: translate3d(0, 0, 0) skewX(0deg);
        background-position: 0 0, center;
        filter: none;
        opacity: 1;
    }
}

h2 {
    font-family: var(--primary-font);
    font-weight: 300;
    font-size: 2.4rem;
    letter-spacing: 0.5rem;
    line-height: 1.02;
    background: var(--title-color);
    color: #141414;
    text-shadow: none;
    -webkit-text-fill-color: #141414;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    box-sizing: border-box;
}

.header-hero #main-title {
    margin-bottom: 0.5rem;
}

/* Legacy animated “heftig” CTA — kept in DOM for reference; never shown */
#superctaheftig {
    display: none !important;
}

.cta-container {
    margin-bottom: 2.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.cta-row {
    display: grid;
    grid-template-columns: auto max-content auto;
    align-items: center;
    justify-content: center;
    justify-items: center;
    gap: clamp(0.35rem, 2.2vw, 1rem);
    width: 100%;
    max-width: 100%;
    animation: cta-button-float 5.5s ease-in-out infinite;
}

.cta-chevron {
    font-family: var(--title-font);
    font-weight: 800;
    font-size: clamp(4.95rem, 16.5vw, 7.95rem);
    line-height: 1;
    color: var(--text-color);
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    pointer-events: none;
    text-shadow: none;
    /* Pixel font glyphs often sit high in the em box; nudge with row grid + transform in keyframes */
    --cta-chevron-optical-y: 0.07em;
}

.cta-chevron--left {
    animation:
        cta-chevron-nudge-left 2.1s ease-in-out infinite,
        cta-chevron-color-pulse 3.4s ease-in-out infinite;
}

.cta-chevron--right {
    animation:
        cta-chevron-nudge-right 2.1s ease-in-out infinite,
        cta-chevron-color-pulse 3.4s ease-in-out infinite;
}

@keyframes cta-chevron-nudge-left {
    0%,
    100% {
        transform: translate3d(-0.85rem, var(--cta-chevron-optical-y), 0);
    }
    50% {
        transform: translate3d(0.2rem, var(--cta-chevron-optical-y), 0);
    }
}

@keyframes cta-chevron-nudge-right {
    0%,
    100% {
        transform: translate3d(0.85rem, var(--cta-chevron-optical-y), 0);
    }
    50% {
        transform: translate3d(-0.2rem, var(--cta-chevron-optical-y), 0);
    }
}

@keyframes cta-chevron-color-pulse {
    0%,
    100% {
        color: var(--text-color);
    }
    50% {
        color: var(--title-color);
    }
}

/* Recording bar — single row; horizontal scrollbar always reserved (DOS-style chunk) */
.recording-bar-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    /* Vertical rhythm: `.header-content` row-gap */
    margin: 0;
    row-gap: clamp(0.1rem, 0.35vw, 0.22rem);
    /* Custom scrollbar row height — keep in sync with `.recording-w31-scrollbar` */
    --recording-w31-h: 30px;
}

.recording-bar-heading {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    font-family: var(--primary-font);
    /* Match `.bio-projects--hero` — flat type, no body LED glow */
    font-size: clamp(0.92rem, 0.48rem + 2.15vw, 1.22rem);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: none;
    line-height: 1.15;
    text-align: left;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    text-shadow: none;
    filter: none;
    animation: heading-glitch-sparse 17.5s linear infinite;
    will-change: transform;
}

.recording-bar {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0 auto;
    display: flex;
    flex-wrap: nowrap;
    gap: 1.25rem;
    padding: 0.35rem 0;
    box-sizing: border-box;
    border: none;
    background: transparent;
    border-radius: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
}

.recording-bar::-webkit-scrollbar {
    display: none;
}

/* Recording row: custom horizontal scrubber (layout only; no chrome — whole bar opacity) */
.recording-w31-scrollbar {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    height: var(--recording-w31-h, 30px);
    box-sizing: border-box;
    margin-top: 0;
    position: relative;
    z-index: 5;
    opacity: 0.46;
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--text-color);
    user-select: none;
    -webkit-user-select: none;
}

.recording-w31-scrollbar__btn {
    flex: 0 0 26px;
    width: 26px;
    min-width: 26px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
}

.recording-w31-scrollbar__btn--right {
    border: none;
}

.recording-w31-scrollbar__btn:active {
    border: none;
    padding: 0;
}

.recording-w31-scrollbar__glyph {
    font-size: 12px;
    line-height: 1;
    font-family: sans-serif;
    transform: scaleX(0.85);
    text-shadow: none;
}

.recording-w31-scrollbar__track {
    position: relative;
    flex: 1 1 auto;
    min-width: 32px;
    margin: 4px 2px;
    background: transparent;
    box-shadow: none;
    cursor: pointer;
    touch-action: manipulation;
}

.recording-w31-scrollbar__thumb {
    position: absolute;
    top: 2px;
    bottom: 2px;
    left: 0;
    min-width: 48px;
    width: 64px;
    box-sizing: border-box;
    background: currentColor;
    border: none;
    box-shadow: none;
    border-radius: 0;
    cursor: grab;
    touch-action: none;
}

.recording-w31-scrollbar__thumb:active {
    cursor: grabbing;
    border: none;
}

/* Touch / coarse pointer: taller bar + wider thumb & arrows for easier drag */
@media (pointer: coarse) {
    .recording-bar-wrap {
        --recording-w31-h: 44px;
    }

    .recording-w31-scrollbar__btn {
        flex: 0 0 44px;
        width: 44px;
        min-width: 44px;
    }

    .recording-w31-scrollbar__glyph {
        font-size: 15px;
    }

    .recording-w31-scrollbar__thumb {
        min-width: 56px;
        top: 3px;
        bottom: 3px;
    }
}

.recording-item {
    flex: 0 0 auto;
    width: clamp(220px, 52vw, 320px);
    min-width: 220px;
    height: auto;
    aspect-ratio: 16 / 9;
    min-height: 140px;
    background: var(--glass-bg);
    border: 2px solid var(--title-color);
    border-radius: 0;
    overflow: hidden;
    position: relative;
    backdrop-filter: blur(10px);
}

.recording-item--channel-more {
    /* “Last dummy video” (YouTube channel tile): see-through, border + play only */
    border-color: var(--recording-channel-tile-accent);
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.recording-item::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 0;
    background: var(--recording-frame-bg);
    box-shadow: none;
    pointer-events: none;
    z-index: 1;
}

.recording-item--channel-more::after {
    background: transparent;
    box-shadow: none;
}

/* Hover / focus: yellow frame overlay off (outer border is the only rim) */
.recording-item:hover::after,
.recording-item:focus-within::after {
    background: transparent;
}

/* YouTube clip tiles: title-color grain layer → 0% on hover (trailing channel tile keeps its ::before hover) */
.recording-item:not(.recording-item--channel-more) .recording-item__play:hover::before,
.recording-item:not(.recording-item--channel-more) .recording-item__play:focus-visible::before {
    opacity: 0;
}

.recording-item__poster {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.recording-item__play {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    border: none;
    cursor: pointer;
    background: #0a0a0a;
    display: block;
    border-radius: 0;
    isolation: isolate;
}

/* Text-color tint + film grain; whole layer at 20% opacity over thumb; play badge stays above */
.recording-item__play::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-color: var(--text-color);
    background-image: var(--title-static-noise);
    background-size: 72px 72px;
    background-repeat: repeat;
    background-position: 0 0;
    background-blend-mode: soft-light;
    opacity: 0.2;
}

.recording-item__thumb {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(100%) contrast(1.06);
    transition: none;
}

.recording-item__play:hover .recording-item__thumb,
.recording-item__play:focus-visible .recording-item__thumb {
    filter: grayscale(100%) contrast(1.12) brightness(1.05);
}

.recording-item__play:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 2px;
}

a.recording-item__play {
    text-decoration: none;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

/* Trailing tile: channel link — coral frame, dark grey + heavy noise, play glyph in accent */
.recording-item--channel-more .recording-item__play {
    background: transparent;
    isolation: isolate;
}

.recording-item--channel-more .recording-item__play::before {
    display: none;
}

.recording-item--channel-more .recording-item__thumb--channel-filler {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background-color: transparent;
    background-image: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: background-color 0.15s ease, filter 0.15s ease;
    filter: none;
}

.recording-item--channel-more .recording-item__play:hover .recording-item__thumb--channel-filler,
.recording-item--channel-more .recording-item__play:focus-visible .recording-item__thumb--channel-filler {
    background-color: transparent;
    filter: none;
}

.recording-item--channel-more .recording-item__play:hover::before,
.recording-item--channel-more .recording-item__play:focus-visible::before {
    display: none;
}

.recording-item--channel-more .recording-item__play:focus-visible {
    outline-color: var(--recording-channel-tile-accent);
}

.recording-item--channel-more .recording-item__play-badge svg rect {
    fill: transparent;
    stroke: var(--recording-channel-tile-accent);
    stroke-width: 3;
}

.recording-item--channel-more .recording-item__play-badge svg path {
    fill: var(--recording-channel-tile-accent);
}

.recording-item__play-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: clamp(3rem, 11vw, 4.5rem);
    line-height: 0;
    filter: none;
    pointer-events: none;
}

.recording-item__play-badge svg {
    display: block;
    width: 100%;
    height: auto;
}

.recording-item__player {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #000;
    border-radius: 0;
    overflow: hidden;
}

.recording-item__player iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
    position: relative;
    z-index: 0;
}

/* Header social: full-width row of square tiles (same width as .container / section headings) */
#social-nav-groups.social-nav-groups {
    --social-header-tiles: 5;
    display: grid;
    grid-template-columns: repeat(var(--social-header-tiles), minmax(0, 1fr));
    gap: clamp(0.32rem, 1.2vw, 0.55rem);
    align-items: stretch;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    margin-top: 0;
    margin-bottom: 0;
}

.social-label {
    margin: 0;
    font-size: 1.44rem;
    font-weight: 700;
    letter-spacing: 0.22em;
    line-height: 1.06;
    text-transform: uppercase;
    color: var(--title-color);
    text-align: left;
    width: 100%;
    max-width: 100%;
}

.footer-stream-label,
.footer-actions-label,
.footer-below-follow-heading {
    margin: 0;
    font-size: clamp(0.65rem, 1.75vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.12em;
    line-height: 1.18;
    text-transform: uppercase;
    color: var(--footer-text);
    white-space: pre-line;
}

.footer-stream-label {
    text-align: center;
    width: 100%;
}

nav {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin-bottom: 2.5rem;
    flex-wrap: nowrap;
}

nav a, nav button.social-link {
    color: var(--text-color);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border: 2px solid var(--glass-border);
    border-radius: 0;
    transition: none;
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    cursor: pointer;
    position: relative;
    font-family: inherit;
}

nav a:hover, nav button.social-link:hover {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--nav-hover-fg);
    transform: translateY(-2px);
    box-shadow: 0 0 8px var(--nav-hover-shadow);
}

/* Header social: square tiles — icon + caption (`header_tile_*` from app.js / data.json) */
#social-nav-groups :is(a, button).social-link--header-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 0;
    width: 100%;
    min-width: 0;
    min-height: 0;
    aspect-ratio: 1;
    padding: clamp(0.08rem, 1.1vw, 0.28rem);
    box-sizing: border-box;
    text-align: center;
    text-decoration: none;
    font-size: inherit;
    font-weight: inherit;
    text-transform: none;
    border-radius: 0;
    border: 2px solid var(--heading-surface-yellow);
    background: transparent;
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
}

#social-nav-groups button.social-link--header-tile {
    cursor: pointer;
    background: transparent;
}

.social-multi-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bg-layer-color);
    border: 2px solid var(--heading-surface-yellow);
    z-index: 100;
    display: flex;
    flex-direction: column;
    min-width: 150px;
    padding: 0.5rem 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    margin-top: 0.5rem;
}

.social-multi-dropdown[hidden] {
    display: none;
}

.social-multi-dropdown::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent var(--heading-surface-yellow) transparent;
}

nav a.social-multi-dropdown__link {
    padding: 0.5rem 1rem;
    color: var(--heading-surface-yellow);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    text-align: left;
    transition: background-color 0.2s, color 0.2s;
    font-family: inherit;
    -webkit-text-fill-color: currentcolor;
    /* Reset nav a styles */
    border: none;
    border-radius: 0;
    background: transparent;
    backdrop-filter: none;
    cursor: pointer;
    position: static;
    display: block;
    box-shadow: none;
    transform: none;
}

nav a.social-multi-dropdown__link:hover {
    background-color: var(--heading-surface-yellow);
    color: var(--bg-layer-color);
    /* Reset nav a:hover styles */
    border: none;
    transform: none;
    box-shadow: none;
}

.social-link--dropdown-open {
    background: rgba(255, 255, 255, 0.1) !important;
}

#social-nav-groups :is(a, button).social-link--header-tile .social-link__platform--header-tile {
    flex: 0 0 auto;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: clamp(0.06rem, 0.9vw, 0.14rem) clamp(0.06rem, 0.9vw, 0.14rem) 0;
    box-sizing: border-box;
    font-family: var(--primary-font);
    font-size: clamp(0.38rem, 1.35vw, 0.52rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    opacity: 0.82;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

#social-nav-groups :is(a, button).social-link--header-tile .social-link__icon {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    width: 100%;
    line-height: 0;
    overflow: visible;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    -ms-interpolation-mode: nearest-neighbor;
}

#social-nav-groups :is(a, button).social-link--header-tile .social-link__icon svg {
    display: block;
    width: 70%;
    height: 70%;
    max-width: 100%;
    max-height: 100%;
    flex-shrink: 0;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

#social-nav-groups :is(a, button).social-link--header-tile .social-link__label--header-tile {
    flex: 0 0 auto;
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0 clamp(0.06rem, 0.9vw, 0.14rem) clamp(0.06rem, 0.9vw, 0.14rem);
    box-sizing: border-box;
    font-size: clamp(0.42rem, 1.55vw, 0.62rem);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    word-break: break-word;
    hyphens: auto;
}

/* Invert on hover — YouTube is reversed (inverted by default, normal on hover) */
#social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube'] {
    background: var(--text-color);
    border-color: var(--heading-surface-yellow);
    color: #141414;
    -webkit-text-fill-color: #141414;
}

#social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube']:hover {
    background: transparent;
    border-color: var(--heading-surface-yellow);
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    box-shadow: none;
    transform: none;
}

/* YouTube: icon turns rosepink on hover */
#social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube']:hover .social-link__icon svg {
    fill: #fe725f;
    stroke: #fe725f;
    color: #fe725f;
}

#social-nav-groups :is(a, button).social-link--header-tile:hover:not([data-platform='youtube']) {
    background: var(--text-color);
    border-color: var(--heading-surface-yellow);
    color: #141414;
    -webkit-text-fill-color: #141414;
    transform: none;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--text-color) 28%, transparent);
}

/* Post-click flash (3s via JS) — wins over hover */
#social-nav-groups :is(a, button).social-link--header-tile.social-link--header-tile--flash-tint {
    background: transparent !important;
    border-color: #fe725f !important;
    color: #fe725f !important;
    -webkit-text-fill-color: #fe725f !important;
    box-shadow: none !important;
    transform: none !important;
}

#social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube'].social-link--header-tile--flash-tint {
    background: color-mix(in srgb, #fe725f 18%, transparent) !important;
    border-color: #fe725f !important;
    color: #fe725f !important;
    -webkit-text-fill-color: #fe725f !important;
}

.social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
}

/* Footer: text labels only for stream / more links */
footer .footer-socials .social-link__icon {
    display: none;
}

footer .footer-socials .social-link__text {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
}

main {
    position: relative;
    z-index: 20;
}

/* Sections */
.section {
    padding: 4rem 0; /* Reduced from 10rem */
}

.bio-heading-row {
    margin-bottom: 3rem;
}

.bio-heading-row .section-title {
    margin-bottom: 0;
}

.section-title {
    font-family: var(--title-font);
    font-size: 1.6rem;
    letter-spacing: 0.3rem;
    line-height: 1.06;
    background: color-mix(in srgb, var(--title-color) 92%, transparent);
    color: #141414;
    text-shadow: none;
    -webkit-text-fill-color: #141414;
    margin-bottom: 3rem;
    position: relative;
    display: flex;
    align-items: center;
    /* Left padding accounts for the stripe width + left inset + (tighter) gap */
    padding: 0.55rem 1.1rem 0.55rem 8.2rem;
    box-sizing: border-box;
    animation: heading-glitch-sparse 23.3s linear infinite;
    will-change: transform;
}

.section-title::before {
    content: '';
    position: absolute;
    left: 0.75rem;
    top: 50%;
    transform: translateY(-50%);
    width: 7.45rem;
    height: 10px;
    background: #141414;
}

/* Leading bar hidden when JS detects title overflow / wrap (see app.js) */
.section-title.section-title--no-leading-bar {
    padding-left: 1.1rem;
}

.section-title.section-title--no-leading-bar::before {
    display: none;
}

.events-section-container {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
}

.events-section-container > #section-title-future {
    grid-column: 1;
    grid-row: 1;
}

.events-section-container > #future-events {
    grid-column: 1 / -1;
    grid-row: 2;
}

.events-section-container > .events-past-spacer {
    grid-column: 1 / -1;
    grid-row: 3;
}

.events-section-container > #section-title-past {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: clamp(1rem, 2.75vw, 1.85rem);
}

.events-section-container > #past-events {
    grid-column: 1 / -1;
    grid-row: 5;
}

/* Vertical rhythm only (no rule) between future list and past heading */
.events-past-spacer {
    width: 100%;
    margin: clamp(2.35rem, 6vw, 3.85rem) 0 clamp(0.45rem, 1.2vw, 0.8rem);
    padding: 0;
    border: none;
    box-sizing: border-box;
    pointer-events: none;
}

.article-mobile-spacer {
    display: none;
    width: 100%;
    /* Extra air under articles so scroll-btn doesn't occlude */
    height: clamp(60px, 12vh, 100px);
    pointer-events: none;
}

@media (max-width: 768px) {
    .article-mobile-spacer {
        display: block;
    }
}

/* Tighter gap below FUTURE / PAST headings (past spacing includes `.events-past-spacer`) */
.events-section-container > .section-title {
    margin-bottom: 1.1rem;
}

.section-title--future-events .section-title__main,
.section-title > .section-title__main {
    display: inline;
}

.content-text {
    font-size: 2.68rem;
    font-weight: 300;
    max-width: 1000px;
    color: var(--title-color);
    line-height: 1.45;
    -webkit-hyphens: auto;
    hyphens: auto;
}

.bio-glitch-vt323 {
    font-family: 'VT323', ui-monospace, monospace;
    font-size: 1.02em;
    letter-spacing: 0.02em;
}

.bio-contact-wrap {
    margin: clamp(1.35rem, 3.8vw, 2.25rem) 0 0;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

/* Hero: modest contact (same outline style as bio CONTACT) */
.header-contact-wrap {
    margin: 0 0 3rem 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.48rem;
    /* Breathing room; reserved email row (below) keeps LIVE/socials from jumping on open */
    padding-block: clamp(0.32rem, 0.95vw, 0.68rem);
    box-sizing: border-box;
}

/* Keep email row in flow when “closed” so expanding does not shift content below */
.header-contact-wrap #email-reveal.email-reveal.hidden {
    display: flex !important;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    min-height: clamp(3.35rem, 9.5vw, 5rem);
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    animation: none;
}

.header-contact-wrap .email-reveal {
    margin-inline: 0;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    min-height: clamp(3.35rem, 9.5vw, 5rem);
    box-sizing: border-box;
}

.header-contact-wrap #email-input {
    padding: clamp(0.85rem, 2.2vw, 1.25rem) clamp(1.1rem, 3vw, 1.85rem);
    font-size: clamp(1.05rem, 2.9vw, 1.45rem);
    line-height: 1.35;
}

.header-contact-wrap .email-reveal .copy-button {
    padding: clamp(0.85rem, 2.2vw, 1.25rem) clamp(1.25rem, 3.5vw, 2rem);
    font-size: clamp(0.65rem, 2.2vw, 0.85rem);
}

.bio-projects {
    margin: 0;
    max-width: 100%;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4rem 0.45rem;
    font-family: var(--title-font);
    font-size: clamp(0.58rem, 0.42rem + 1.35vw, 0.88rem);
    font-weight: 800;
    letter-spacing: 0.1em;
    line-height: 1.45;
    text-transform: uppercase;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    opacity: 0.92;
    white-space: nowrap;
    min-width: 0;
}

/* Hero: directly under subtitle chip; bottom margin pairs with contact CTA spacing (`--header-contact-block-spacer`) */
.bio-projects--hero {
    margin-top: clamp(0.55rem, 1.85vw, 1rem);
    margin-bottom: 0;
    align-items: flex-start;
    text-align: left;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    /* Same size as `.recording-bar-heading`; no global LED bloom on this strip */
    font-size: clamp(0.92rem, 0.48rem + 2.15vw, 1.22rem);
    text-shadow: none;
    filter: none;
    opacity: 1;
}

.bio-projects--hero::-webkit-scrollbar {
    display: none;
}

/* Hero projects (Xeppo · Suijd · Rajas): narrow view — Rajas chip under Xeppo, Suijd top-right */
.bio-projects--hero .bio-projects__hero-trio {
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    column-gap: 0.45rem;
    row-gap: 0.4rem;
    align-items: start;
    min-width: 0;
}

.bio-projects--hero .bio-projects__hero-trio > .bio-projects__pill-link--xeppo {
    grid-column: 1;
    grid-row: 1;
}

.bio-projects--hero .bio-projects__hero-trio > .bio-projects__pill-link--rajas-void-minus {
    grid-column: 1;
    grid-row: 2;
}

.bio-projects--hero .bio-projects__hero-trio > .bio-projects__pill-link--suijd {
    grid-column: 2;
    grid-row: 1;
}

/* De-emphasize non-primary project chips so Xeppo reads as the main CTA */
.bio-projects--hero .bio-projects__pill-link--suijd,
.bio-projects--hero .bio-projects__pill-link--rajas-void-minus {
    opacity: 0.6;
}

.bio-projects--hero .bio-projects__pill-link--suijd:is(:hover, :focus-visible),
.bio-projects--hero .bio-projects__pill-link--rajas-void-minus:is(:hover, :focus-visible) {
    opacity: 1;
}

@media (min-width: 769px) {
    .bio-projects--hero .bio-projects__hero-trio {
        display: contents;
    }
}

@media (max-width: 768px) {
    .bio-projects--hero:has(.bio-projects__hero-trio) {
        flex-wrap: wrap;
        white-space: normal;
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
        align-self: stretch;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
    }

    /* “PROJECTS:” on its own line; chips stack below */
    .bio-projects--hero:has(.bio-projects__hero-trio) .bio-projects__prefix {
        flex: 0 0 auto;
        width: 100%;
    }

    /* Stack Xeppo / Suijd / Rajas; chips stay content-width */
    .bio-projects--hero .bio-projects__hero-trio {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.4rem;
        grid-template-columns: none;
        grid-template-rows: none;
    }

    .bio-projects--hero .bio-projects__hero-trio > .bio-projects__pill-link--xeppo,
    .bio-projects--hero .bio-projects__hero-trio > .bio-projects__pill-link--rajas-void-minus,
    .bio-projects--hero .bio-projects__hero-trio > .bio-projects__pill-link--suijd {
        grid-column: auto;
        grid-row: auto;
    }
}

.bio-projects__prefix {
    flex: 0 0 auto;
    margin-right: 0;
    letter-spacing: 0.1em;
    line-height: 1.2;
    text-align: left;
    text-shadow: none;
    filter: none;
}

a.bio-projects__pill-link {
    color: inherit;
    text-decoration: none;
    text-shadow: none;
    -webkit-text-fill-color: inherit;
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    flex-shrink: 0;
    position: relative;
}

a.bio-projects__pill-link:is(:hover, :focus-visible)::before {
    content: '>';
    position: absolute;
    top: 50%;
    left: -1px;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--hover-select-arrow);
    -webkit-text-fill-color: var(--hover-select-arrow);
    -webkit-text-stroke: var(--select-indicator-stroke) var(--hover-select-arrow);
    font-family: var(--title-font);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    line-height: 1;
    z-index: 3;
    font-size: var(--select-indicator-size);
    width: 1em;
    text-align: center;
    --si-dir: 1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

a.bio-projects__pill-link:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 3px;
}

/* Alias chips: same tokens as events/articles; size to match bio-projects rhythm */
.bio-projects .article-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    margin: 0;
    padding: 0.32em 0.62em;
    font-size: 0.92em;
    letter-spacing: 0.1em;
    line-height: 1;
    text-transform: uppercase;
    text-shadow: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: none;
}

/* After `.bio-projects .article-label` so this wins — hero pills left-aligned (esp. mobile stack).
   Global `.article-label { align-self: center }` otherwise wins over the trio’s `align-items: flex-start`
   in column layout (cross-axis is horizontal), which centered each chip. */
.bio-projects.bio-projects--hero .article-label {
    justify-content: flex-start;
    text-align: left;
    align-self: flex-start;
}

.bio-projects.bio-projects--hero .bio-projects__pill-link {
    align-self: flex-start;
}

/* Hero: Xeppo chip closer to Suijd footprint (shorter label, tighter tracking) */
.bio-projects .article-label--xeppo {
    letter-spacing: 0.068em;
    padding-left: 0.4em;
    padding-right: 0.4em;
}

/* Outlined control: body text color, no fill; expands to email field + copy in place */
.bio-contact-line {
    margin: 0;
    max-width: 100%;
    font-family: var(--primary-font);
    font-size: clamp(1rem, 2.8vw, 1.35rem);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.5em;
    padding: 0.5rem 0.85rem;
    box-sizing: border-box;
    background: transparent;
    color: var(--text-color);
    text-shadow: none;
    -webkit-text-fill-color: var(--text-color);
    border: 2px solid var(--heading-surface-yellow);
    text-decoration: none;
    cursor: pointer;
    text-align: center;
    white-space: normal;
    appearance: none;
    -webkit-appearance: none;
    transition: none;
}

.bio-contact-line__label {
    min-width: 0;
    text-align: center;
    align-self: center;
    line-height: 1.35;
}

/* Hero contact CTA — compact band (~½ prior height); trailing icon HTML from app.js (`HEADER_CONTACT_BOOKINGS_ICON_KEY`) */
.bio-contact-line.bio-contact-line--header {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-start;
    gap: var(--header-contact-vcr-gap);
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    text-align: left;
    font-size: clamp(0.74rem, 2.15vw, 1.1rem);
    padding: clamp(0.11rem, 0.42vw, 0.22rem) clamp(0.92rem, 2.55vw, 1.48rem);
    min-height: clamp(1.02rem, 2.85vw, 1.48rem);
    box-sizing: border-box;
    background: color-mix(in srgb, var(--title-color) 94%, transparent);
    color: #141414;
    -webkit-text-fill-color: #141414;
    border: 2px solid var(--title-color);
    position: relative;
    /* allow decorative elements to occasionally overshoot outside CTA bounds */
    overflow: visible;
    isolation: isolate;
    /* outline “halo” for floating heart/cursor (CTA bg color) */
    --header-contact-outline: color-mix(in srgb, var(--title-color) 94%, transparent);
    --header-contact-vcr-size: calc(clamp(2.85rem, 8vw, 4.35rem) * 1.12);
    --header-contact-vcr-gap: clamp(0.2rem, 0.68vw, 0.36rem);
}

.bio-contact-line.bio-contact-line--header .bio-contact-line__stack--header {
    flex: 1 1 auto;
    min-width: 0;
    padding-left: 0;
}

.header-contact-vcr {
    position: relative;
    flex: 0 0 auto;
    align-self: center;
    left: auto;
    top: auto;
    transform: none;
    width: var(--header-contact-vcr-size);
    height: var(--header-contact-vcr-size);
    box-sizing: border-box;
    display: grid;
    place-items: center;
    pointer-events: none;
    z-index: 7;
    background: transparent;
    border: none;
    color: #141414;
    -webkit-text-fill-color: #141414;
    text-shadow: none;
}

.header-contact-vcr__glyph {
    display: block;
    font-family: var(--title-font), ui-monospace, monospace;
    font-weight: 900;
    letter-spacing: -0.04em;
    font-size: clamp(0.575rem, 2.55vw, 0.975rem);
    line-height: 1.05;
    text-align: center;
    white-space: nowrap;
    transform-origin: 50% 50%;
    opacity: 1;
    transform: scale(1);
    animation: header-contact-vcr-fade-steps 2.1s steps(4, end) forwards;
    will-change: opacity, transform;
}

@keyframes header-contact-vcr-fade-steps {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.72);
    }
}

.bio-contact-line.bio-contact-line--header::before,
.bio-contact-line.bio-contact-line--header::after {
    content: '>>>';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    font-family: var(--primary-font);
    font-size: clamp(1.1rem, 3.1vw, 1.575rem);
    font-weight: 900;
    letter-spacing: -0.12em;
    line-height: 1;
    color: #141414;
    -webkit-text-fill-color: #141414;
    opacity: 0;
    z-index: 2;
    animation: header-contact-zap-chevrons 19s steps(1, end) infinite;
    will-change: opacity, transform;
}

.bio-contact-line.bio-contact-line--header::before {
    left: clamp(0.35rem, 1.4vw, 0.75rem);
}

.bio-contact-line.bio-contact-line--header::after {
    right: clamp(0.35rem, 1.4vw, 0.75rem);
    transform: translateY(-50%) scaleX(-1);
}

@keyframes header-contact-zap-chevrons {
    0%,
    86%,
    100% {
        opacity: 0;
        filter: none;
    }
    88.6% {
        opacity: 1;
        filter: none;
    }
    88.62% {
        opacity: 0;
    }
    88.66% {
        opacity: 1;
    }
    88.7% {
        opacity: 0;
    }
    92.12% {
        opacity: 1;
        filter: contrast(1.1) saturate(1.05);
    }
    92.18% {
        opacity: 0;
        filter: none;
    }
    95.9% {
        opacity: 1;
        filter: none;
    }
    96.02% {
        opacity: 0;
    }
}

.bio-contact-line.bio-contact-line--header.js-has-contact-fireworks {
    position: relative;
    /* keep mouse + heart visible even during fireworks */
    overflow: visible;
}

.header-contact-firework {
    position: absolute;
    left: var(--fw-x, 50%);
    top: var(--fw-y, 50%);
    width: 4px;
    height: 4px;
    background: #000;
    /* Thick black burst pixels as box-shadows */
    box-shadow:
        0 -14px 0 0 currentColor,
        0 14px 0 0 currentColor,
        -14px 0 0 0 currentColor,
        14px 0 0 0 currentColor,
        -10px -10px 0 0 currentColor,
        10px -10px 0 0 currentColor,
        -10px 10px 0 0 currentColor,
        10px 10px 0 0 currentColor,
        -18px 6px 0 0 currentColor,
        18px 6px 0 0 currentColor,
        -6px 18px 0 0 currentColor,
        6px 18px 0 0 currentColor;
    color: #000;
    filter: none;
    transform: translate(-50%, -50%) scale(1);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    animation: header-contact-firework-pop 1.55s steps(8, end) forwards;
}

/* Hover: fireworks match rose contact / cursor accent */
.bio-contact-line.bio-contact-line--header:hover .header-contact-firework,
.bio-contact-line.bio-contact-line--header:focus-visible .header-contact-firework {
    background: var(--selectie-indicatie-meow-color);
    color: var(--selectie-indicatie-meow-color);
}

/* Glittery / flashing afterburn pixels */
.header-contact-firework::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    /* Keep afterburn purely blocky */
    width: 3px;
    height: 3px;
    background: transparent;
    transform: translate(-50%, -50%);
    opacity: 0;
    /* blocky “crumbs” (all squares) — black by default, swapped to yellow on hover */
    box-shadow:
        -2px 9px 0 0 rgba(0, 0, 0, 0.92),
        6px 11px 0 0 rgba(0, 0, 0, 0.82),
        -8px 13px 0 0 rgba(0, 0, 0, 0.72),
        12px 14px 0 0 rgba(0, 0, 0, 0.62),
        -14px 10px 0 0 rgba(0, 0, 0, 0.55),
        3px 18px 0 0 rgba(0, 0, 0, 0.45),
        9px 20px 0 0 rgba(0, 0, 0, 0.35),
        -5px 22px 0 0 rgba(0, 0, 0, 0.28),
        1px 26px 0 0 rgba(0, 0, 0, 0.18),
        -11px 17px 0 0 rgba(0, 0, 0, 0.26),
        14px 18px 0 0 rgba(0, 0, 0, 0.22),
        -15px 21px 0 0 rgba(0, 0, 0, 0.18),
        7px 24px 0 0 rgba(0, 0, 0, 0.14);
    animation: header-contact-firework-afterburn 1.55s steps(10, end) forwards;
    pointer-events: none;
}

.bio-contact-line.bio-contact-line--header:hover .header-contact-firework::after,
.bio-contact-line.bio-contact-line--header:focus-visible .header-contact-firework::after {
    box-shadow:
        -2px 9px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 92%, transparent),
        6px 11px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 82%, transparent),
        -8px 13px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 72%, transparent),
        12px 14px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 62%, transparent),
        -14px 10px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 55%, transparent),
        3px 18px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 45%, transparent),
        9px 20px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 35%, transparent),
        -5px 22px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 28%, transparent),
        1px 26px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 18%, transparent),
        -11px 17px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 88%, transparent),
        14px 18px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 74%, transparent),
        -15px 21px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 58%, transparent),
        7px 24px 0 0 color-mix(in srgb, var(--selectie-indicatie-meow-color) 46%, transparent);
}

@keyframes header-contact-firework-afterburn {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(0) scale(0.9);
        filter: none;
    }
    18% {
        opacity: 0.92;
        transform: translate(-50%, -50%) translateY(0) scale(1);
    }
    34% {
        opacity: 0.55;
        transform: translate(-50%, -50%) translateY(2px) scale(1.02);
    }
    45% {
        opacity: 0.85;
        transform: translate(-50%, -50%) translateY(3px) scale(1.04);
    }
    62% {
        opacity: 0.38;
        transform: translate(-50%, -50%) translateY(5px) scale(1.06);
    }
    74% {
        opacity: 0.62;
        transform: translate(-50%, -50%) translateY(6px) scale(1.08);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) translateY(10px) scale(1.12);
    }
}

@keyframes header-contact-firework-pop {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.65);
    }
    12% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1);
    }
    55% {
        opacity: 0.62;
        transform: translate(-50%, -50%) scale(1.05);
    }
    100% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(1.15);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header-contact-firework {
        display: none !important;
    }
}

.bio-contact-line__stack--header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: clamp(0.11rem, 0.325vw, 0.225rem);
    width: 100%;
    min-width: 0;
}

.bio-contact-line__sub--header {
    font-family: var(--primary-font);
    font-size: clamp(0.29rem, 0.725vw, 0.41rem);
    font-weight: 600;
    letter-spacing: 0.05em;
    line-height: 1.2;
    text-transform: none;
    opacity: 0.78;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

/* Subtitle slot kept in DOM for future copy; no layout when empty */
.bio-contact-line__sub--header:empty {
    display: none;
}

.bio-contact-line.bio-contact-line--header .bio-contact-line__label {
    text-align: left;
    align-self: flex-start;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.26em;
    word-spacing: 0.06em;
    color: #141414;
    -webkit-text-fill-color: #141414;
    /* Reserve space for absolutely-positioned heart on the far right */
    position: relative;
    padding-right: clamp(1.3rem, 4.5vw, 2.125rem);
}

/* Rotating suffix after “contact” (glitch cycle in app.js) */
.header-contact-cycle {
    display: inline-block;
    font-family: inherit;
    font-weight: 600;
    letter-spacing: 0.02em;
    word-spacing: 0.11em;
    min-width: 0;
    white-space: nowrap;
}

.bio-contact-line.bio-contact-line--header .bio-contact-line__sub--header {
    color: #141414;
    -webkit-text-fill-color: #141414;
    opacity: 0.88;
}

.header-contact-icon-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    flex-shrink: 0;
    /* Anchor the heart near the right edge of the CTA label box */
    position: absolute;
    right: clamp(0.55rem, 2.1vw, 0.95rem);
    top: 50%;
    margin-left: 0;
    transform: translate(calc(var(--hc-heart-start-x, 0px)), calc(-50% - 0.11em));
    /* Slow stepped corner sweep (pixel jumps), seeded per page-load */
    animation: header-contact-corner-sweep 18.5s steps(48, end) infinite;
    animation-delay: var(--hc-motion-delay, 0s);
    will-change: transform;
    z-index: 4;
}

.header-contact-mouse-wrap {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    /* float above-right of the heart */
    right: clamp(0.55rem, 2.1vw, 0.95rem);
    top: 50%;
    /* seeded per page-load; global mouse parallax adds on top */
    transform: translate(calc(1.55em + var(--hc-mouse-start-x, 0px) + var(--hc-mx, 0px)), calc(-50% - 1.45em + var(--hc-my, 0px)));
    pointer-events: none;
    z-index: 6;
    color: inherit;
    -webkit-text-fill-color: inherit;
    animation: header-contact-corner-sweep-mouse 22.3s steps(56, end) infinite;
    animation-delay: var(--hc-mouse-delay, 0s);
    will-change: transform, opacity;
}

.header-contact-icon-flicker {
    /* keep flicker, but don’t add transform drift anymore (we do stepped sweep on parent) */
    animation: header-contact-icon-flicker 5.4s linear infinite;
    animation-delay: var(--hc-flicker-delay, 0s);
}

@keyframes header-contact-corner-sweep {
    0% {
        transform: translate(calc(var(--hc-heart-start-x, 0px) - 6px), calc(-50% - 0.22em));
    }
    48% {
        /* slide across to the far right (nearly off the CTA corner) */
        transform: translate(calc(var(--hc-heart-start-x, 0px) + 26px), calc(-50% - 0.22em));
    }
    100% {
        transform: translate(calc(var(--hc-heart-start-x, 0px) - 6px), calc(-50% - 0.22em));
    }
}

@keyframes header-contact-corner-sweep-mouse {
    0% {
        transform: translate(
            calc(1.55em + var(--hc-mouse-start-x, 0px) + var(--hc-mx, 0px) - 10px),
            calc(-50% - 1.45em + var(--hc-my, 0px))
        );
    }
    48% {
        transform: translate(
            calc(1.55em + var(--hc-mouse-start-x, 0px) + var(--hc-mx, 0px) + 34px),
            calc(-50% - 1.45em + var(--hc-my, 0px))
        );
    }
    100% {
        transform: translate(
            calc(1.55em + var(--hc-mouse-start-x, 0px) + var(--hc-mx, 0px) - 10px),
            calc(-50% - 1.45em + var(--hc-my, 0px))
        );
    }
}

.header-contact-mouse-icon {
    display: block;
    width: clamp(0.525rem, 1.95vw, 0.875rem);
    height: auto;
    aspect-ratio: 9 / 12;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    opacity: 1;
}

/* 2px outer stroke (halo) for floating heart + cursor */
.header-contact-bookings-icon--pixel-heart,
.header-contact-mouse-icon {
    filter:
        drop-shadow(2px 0 0 var(--header-contact-outline))
        drop-shadow(-2px 0 0 var(--header-contact-outline))
        drop-shadow(0 2px 0 var(--header-contact-outline))
        drop-shadow(0 -2px 0 var(--header-contact-outline));
}

@keyframes header-contact-icon-hover-wander {
    0% {
        transform: translate(0, 0);
    }
    6% {
        transform: translate(0.1em, -0.13em);
    }
    12% {
        transform: translate(-0.07em, 0.09em);
    }
    19% {
        transform: translate(0.15em, 0.06em);
    }
    26% {
        transform: translate(-0.12em, -0.17em);
    }
    34% {
        transform: translate(0.06em, 0.11em);
    }
    42% {
        transform: translate(-0.09em, 0.03em);
    }
    51% {
        transform: translate(0.13em, -0.1em);
    }
    59% {
        transform: translate(-0.05em, -0.07em);
    }
    68% {
        transform: translate(0.08em, 0.15em);
    }
    76% {
        transform: translate(-0.14em, 0.02em);
    }
    85% {
        transform: translate(0.04em, -0.09em);
    }
    93% {
        transform: translate(-0.08em, 0.12em);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes header-contact-icon-micro-drift {
    0% {
        transform: translate(0, 0);
    }
    22% {
        transform: translate(0.035em, -0.04em);
    }
    41% {
        transform: translate(-0.03em, 0.025em);
    }
    63% {
        transform: translate(0.028em, 0.038em);
    }
    81% {
        transform: translate(-0.032em, -0.022em);
    }
    100% {
        transform: translate(0, 0);
    }
}

@keyframes header-contact-icon-flicker {
    0%,
    30.5%,
    31.2%,
    32%,
    61.8%,
    62.1%,
    62.8%,
    80.9%,
    81.2%,
    82%,
    87.6%,
    87.9%,
    100% {
        opacity: 1;
    }
    30.6%,
    31.1%,
    61.9%,
    62%,
    81%,
    81.15%,
    87.7%,
    87.85% {
        opacity: 0;
    }
}

.header-contact-bookings-icon {
    display: block;
    flex-shrink: 0;
    opacity: 1;
}

.header-contact-bookings-icon--pixel-heart {
    width: clamp(0.725rem, 2.5vw, 1.175rem);
    height: auto;
    aspect-ratio: 8 / 7;
    shape-rendering: crispEdges;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.header-contact-bookings-icon--unicode {
    font-size: clamp(0.675rem, 2.4vw, 1.075rem);
    line-height: 1;
    font-weight: 700;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

@media (prefers-reduced-motion: reduce) {
    .header-contact-icon-wrap,
    .header-contact-icon-flicker,
    .header-contact-mouse-wrap {
        animation: none !important;
    }
}

.bio-contact-line:hover {
    filter: none;
    background: transparent;
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    border-color: var(--selectie-indicatie-meow-color);
    box-shadow: none;
    transform: none;
}

.bio-contact-line:hover .bio-contact-line__label {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

.bio-contact-line:hover .bio-contact-line__sub--header {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    opacity: 0.88;
}

/* Hero contact: default = filled chip; hover = outline rose (cursor / blink accent). */
.bio-contact-line.bio-contact-line--header:hover,
.bio-contact-line.bio-contact-line--header:focus-visible {
    background: transparent;
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    border-color: var(--selectie-indicatie-meow-color);
    --header-contact-outline: var(--selectie-indicatie-meow-color);
}

.bio-contact-line.bio-contact-line--header:hover .bio-contact-line__label,
.bio-contact-line.bio-contact-line--header:focus-visible .bio-contact-line__label {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

.bio-contact-line.bio-contact-line--header:hover .bio-contact-line__sub--header,
.bio-contact-line.bio-contact-line--header:focus-visible .bio-contact-line__sub--header {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    opacity: 0.78;
}

.bio-contact-line.bio-contact-line--header:hover .header-contact-icon-wrap,
.bio-contact-line.bio-contact-line--header:focus-visible .header-contact-icon-wrap,
.bio-contact-line.bio-contact-line--header:hover .header-contact-mouse-wrap,
.bio-contact-line.bio-contact-line--header:focus-visible .header-contact-mouse-wrap {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

.bio-contact-line.bio-contact-line--header:hover .header-contact-vcr,
.bio-contact-line.bio-contact-line--header:focus-visible .header-contact-vcr {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

.bio-contact-line.bio-contact-line--header:hover::before,
.bio-contact-line.bio-contact-line--header:hover::after,
.bio-contact-line.bio-contact-line--header:focus-visible::before,
.bio-contact-line.bio-contact-line--header:focus-visible::after {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

.bio-contact-line:focus-visible {
    outline: 2px solid var(--selectie-indicatie-meow-color);
    outline-offset: 3px;
}

/* Same unified bar treatment as header `#email-reveal` */
.bio-email-reveal {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    box-sizing: border-box;
    border: 2px solid var(--heading-surface-yellow);
    border-radius: 0;
    background: color-mix(in srgb, var(--title-color) 5%, transparent);
    box-shadow: 0 0 10px var(--email-input-shadow);
    backdrop-filter: blur(10px);
    overflow: hidden;
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bio-email-input {
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 0.5rem 0.85rem;
    font-family: inherit;
    font-size: clamp(1rem, 2.8vw, 1.35rem);
    line-height: 1.4;
    border-radius: 0;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    text-align: left;
    outline: none;
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: none;
}

.bio-email-input:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: -2px;
}

.bio-email-reveal .copy-button {
    flex-shrink: 0;
    align-self: stretch;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 2px solid var(--heading-surface-yellow);
    border-radius: 0;
    padding: 0.5rem clamp(0.85rem, 2.5vw, 1.25rem);
    box-shadow: none;
    background: transparent;
    color: var(--text-color);
}

.bio-email-reveal .copy-button:hover {
    box-shadow: none;
    background: var(--copy-hover-bg);
    color: var(--copy-hover-fg);
}

/* Lists and Cards */
.grid-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

/* Past events — cool #e4ecf7 copy vs lime future; lowered opacity reads as history */
#section-title-past.section-title {
    background: rgba(228, 236, 247, 0.14);
    color: #e4ecf7;
    -webkit-text-fill-color: #e4ecf7;
    border: 2px solid currentColor;
    opacity: 0.46;
    transition: none;
}

#section-title-past.section-title::before {
    background: #e4ecf7;
}

#past-events .event-item {
    padding: 0.65rem clamp(0.65rem, 2.2vw, 1.05rem);
    column-gap: clamp(1.9rem, 3.5vw, 2.45rem);
    transition: none;
    color: #e4ecf7;
    -webkit-text-fill-color: #e4ecf7;
    border-color: currentColor;
    border-bottom-color: currentColor;
    text-shadow: none;
    opacity: 0.42;
}

#past-events .event-item:hover {
    opacity: 1;
    border-color: currentColor;
    border-bottom-color: currentColor;
    background: rgba(228, 236, 247, 0.06);
}

/* Linked past rows are <a> — keep type + border on the ice-blue text color (no inherit skip / :visited drift) */
#past-events a.event-item--linked:link,
#past-events a.event-item--linked:visited {
    color: #e4ecf7;
    -webkit-text-fill-color: #e4ecf7;
}

#past-events a.event-item--linked {
    border-color: currentColor;
    border-bottom-color: currentColor;
}

#past-events a.event-item--linked:hover {
    border-color: currentColor;
    border-bottom-color: currentColor;
}

#past-events .event-date,
#past-events .event-date-year,
#past-events .event-date-md,
#past-events .event-location,
#past-events .event-location-row .event-venue,
#past-events .event-desc,
#past-events .event-desc__body {
    color: #e4ecf7;
    -webkit-text-fill-color: #e4ecf7;
}

#past-events .event-date-day--inverted {
    font-size: 0.92em;
}

/* Past list: tighter vertical rhythm for scanning */
#past-events.grid-list {
    gap: 0.55rem;
}

#past-events .event-date-col {
    gap: 0.3rem;
}

#past-events .event-item--linked .event-date-col {
    gap: 0;
}

#past-events .event-date-stack {
    gap: 0.08rem;
    line-height: 0.98;
}

#past-events .event-date-year {
    font-size: clamp(1.05rem, 2.5vw, 1.38rem);
    letter-spacing: 0.05em;
    line-height: 1.02;
}

#past-events .event-date-md {
    font-size: clamp(0.76rem, 1.85vw, 0.9rem);
    letter-spacing: 0.09em;
}

#past-events .event-details {
    gap: 0.55rem 0.85rem;
}

#past-events .event-details-main {
    gap: 0.18rem;
}

#past-events .event-location-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    min-width: 0;
}

#past-events .event-location-row > .event-location,
#past-events .event-location-row > .event-venue {
    display: block;
    max-width: 100%;
}

#past-events .event-location {
    font-size: clamp(0.88rem, 2.15vw, 1.08rem);
    line-height: 1.22;
    letter-spacing: 0.006em;
}

/* Second line: venue / detail (matches future `.event-venue` rhythm; own glitch buffer). */
#past-events .event-location-row .event-venue.event-venue--past {
    font-family: var(--primary-font);
    font-size: clamp(0.78rem, 1.95vw, 0.98rem);
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.004em;
    text-transform: none;
}

#past-events .event-desc {
    font-size: 0.88rem;
    line-height: 1.35;
    gap: 0.3rem 0.45rem;
}

#past-events .event-set-type {
    font-size: clamp(1.22rem, 3.1vw, 1.55rem);
}

#past-events .event-desc__badges {
    gap: 0.25rem;
}

#past-events .event-desc__badges .article-label,
#past-events .event-desc__badges .article-label--default,
#past-events .event-desc__badges .article-label--xeppo,
#past-events .event-desc__badges .article-label--suijd,
#past-events .event-desc__badges .article-label--rajas-void-minus {
    padding: 0.16rem 0.46rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    line-height: 1;
    background: #e4ecf7;
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-color: currentColor;
}

/* Future events — same compact row rhythm as past; always full opacity; site yellow (--title-color) */
#future-events.grid-list {
    gap: 0.55rem;
}

#future-events .event-item,
#future-events .event-item.event-item--future {
    padding: 0.65rem clamp(0.65rem, 2.2vw, 1.05rem);
    column-gap: clamp(1.9rem, 3.5vw, 2.45rem);
    transition: none;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    text-shadow: none;
    opacity: 1;
    background: transparent;
    filter: none;
    border: 2px solid var(--heading-surface-yellow);
}

/* Future row hover — same chip yellow + dark type as article cards */
#future-events .event-item:hover,
#future-events .event-item.event-item--future:hover {
    opacity: 1;
    border-color: var(--title-color);
    background: color-mix(in srgb, var(--title-color) 92%, transparent);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    color: #141414;
    -webkit-text-fill-color: #141414;
    text-shadow: none;
    filter: none;
    transform: none;
}

#future-events .event-item:hover .event-date,
#future-events .event-item:hover .event-date-year,
#future-events .event-item:hover .event-date-md,
#future-events .event-item:hover .event-date-day--inverted,
#future-events .event-item:hover .event-location,
#future-events .event-item:hover .event-name,
#future-events .event-item:hover .event-venue,
#future-events .event-item:hover .event-desc,
#future-events .event-item:hover .event-desc__body,
#future-events .event-item:hover .event-more-hint,
#future-events .event-item:hover .event-row-chevron {
    color: #141414;
    -webkit-text-fill-color: #141414;
    text-shadow: none;
}

/* Region / “artist” chip: invert on row hover (was dark-on-yellow → yellow-on-dark) */
#future-events .event-item:hover .event-region-tag {
    background: #141414;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    border-color: #141414;
}

/* Artist / alias pills: invert on row hover (lime type on dark, accent borders kept per variant) */
#future-events .event-item:hover .event-desc__badges .article-label,
#future-events .event-item:hover .event-desc__badges .article-label--default,
#future-events .event-item:hover .event-desc__badges .article-label--xeppo,
#future-events .event-item:hover .event-desc__badges .article-label--suijd,
#future-events .event-item:hover .event-desc__badges .article-label--rajas-void-minus {
    background: #141414;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    text-shadow: none;
    border: 2px solid #141414;
}

#future-events .event-item:hover .event-desc__badges .article-label--xeppo {
    border-color: #141414;
}

#future-events .event-item:hover .event-desc__badges .article-label--suijd {
    border-color: #141414;
}

#future-events .event-item:hover .event-desc__badges .article-label--rajas-void-minus {
    border-color: #141414;
}

#future-events .event-date,
#future-events .event-date-year,
#future-events .event-date-md,
#future-events .event-location,
#future-events .event-name,
#future-events .event-venue,
#future-events .event-desc,
#future-events .event-desc__body {
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    opacity: 1;
}

#future-events .event-date-col {
    gap: 0.3rem;
}

#future-events .event-item--linked .event-date-col {
    gap: 0;
}

#future-events .event-date-stack {
    gap: 0.08rem;
    line-height: 0.98;
}

#future-events .event-date-year {
    /* +20% scale */
    font-size: clamp(1.26rem, 3vw, 1.66rem);
    letter-spacing: 0.05em;
    line-height: 1.02;
}

#future-events .event-date-md {
    /* +20% scale */
    font-size: clamp(0.91rem, 2.22vw, 1.08rem);
    letter-spacing: 0.09em;
}

#future-events .event-date-day--inverted {
    font-size: 0.92em;
}

#future-events .event-desc__badges .article-label {
    /* +20% scale */
    padding: 0.3rem 0.8rem;
    font-size: 1.065rem;
}

#future-events .event-details {
    gap: 0.55rem 0.85rem;
}

#future-events .event-details-main,
#future-events .event-details-main--future {
    gap: 0.18rem;
}

/* Nudge right column content right, but never beyond card border */
#future-events .event-details-main--future {
    padding-left: clamp(0.15rem, 0.75vw, 0.35rem);
    box-sizing: border-box;
    max-width: 100%;
}

#future-events .event-location {
    font-size: clamp(0.78rem, 2vw, 0.95rem);
    line-height: 1.12;
    letter-spacing: 0.01em;
}

#future-events .event-name {
    font-size: clamp(1.38rem, 3.5vw, 1.88rem);
    line-height: 0.9;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

/* Title / location rows (region tag is absolutely positioned on `.event-item`) */
.event-name-row,
.event-location-row {
    display: block;
    min-width: 0;
}

.event-name-row > .event-name,
.event-name-row > .event-venue,
.event-location-row > .event-location {
    display: inline;
}

.event-location-row > .event-venue {
    display: block;
}

/* Country/region chip — flush to card top-right (padding box origin; no inset gap) */
.event-item > .event-region-tag {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 4;
    margin: 0;
}

.event-region-tag {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--title-font);
    font-size: clamp(0.62rem, 1.75vw, 0.78rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1;
    padding: 0.22em 0.38em;
    border-radius: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    text-transform: uppercase;
    pointer-events: none;
}

#future-events .event-region-tag {
    color: #141414;
    -webkit-text-fill-color: #141414;
    background: var(--title-color);
    border: 2px solid var(--heading-surface-yellow);
    opacity: 1;
}

#future-events .event-name-row .event-venue {
    font-size: clamp(0.72rem, 1.85vw, 0.92rem);
    line-height: 1.35;
    font-family: var(--primary-font);
    font-weight: 500;
    letter-spacing: 0.004em;
    text-transform: none;
}

#past-events .event-region-tag {
    color: #141414;
    -webkit-text-fill-color: #141414;
    background: #e4ecf7;
    border: 2px solid #e4ecf7;
    opacity: 1;
}

#future-events .event-venue {
    font-size: clamp(0.72rem, 1.85vw, 0.92rem);
    line-height: 1.35;
    letter-spacing: 0.004em;
}

#future-events .event-desc {
    font-size: 0.88rem;
    line-height: 1.35;
    gap: 0.3rem 0.45rem;
}

#future-events .event-desc__badges {
    gap: 0.25rem;
    /* add breathing room above the artist/alias pill row */
    margin-top: 0.22rem;
}

#future-events .event-desc__badges .article-label {
    padding: 0.16rem 0.46rem;
    font-size: 0.68rem;
    letter-spacing: 0.1em;
    line-height: 1;
}

.event-item {
    position: relative;
    display: grid;
    grid-template-columns: minmax(5.5rem, 150px) 1fr;
    column-gap: clamp(2.85rem, 4.85vw, 3.6rem);
    align-items: start;
    padding: 1.5rem clamp(0.85rem, 2.4vw, 1.35rem);
    margin: 0;
    border-bottom: 2px solid var(--glass-border);
    transition: none;
    border-radius: 0;
}

/* Linked rows: stretch date column to row height; “> LINK” sits at bottom under date stack */
.event-item--linked {
    align-items: stretch;
}

.event-item--linked .event-date-col {
    gap: 0;
    min-height: 0;
    align-self: stretch;
}

.event-item--linked .event-more-hint {
    margin-top: auto;
    padding-top: clamp(0.45rem, 1.15vw, 0.75rem);
    align-self: flex-start;
}

/* Linked rows: “> LINK” — underlined text only (no chip), bottom of date column */

.event-more-hint {
    position: relative;
    z-index: 1;
    align-self: flex-start;
    width: max-content;
    max-width: 100%;
    padding: 0;
    box-sizing: border-box;
    font-family: var(--title-font);
    font-size: clamp(0.48rem, 0.32rem + 1.15vw, 0.62rem);
    font-weight: 800;
    letter-spacing: 0.08em;
    line-height: 1.25;
    text-transform: uppercase;
    text-align: left;
    white-space: normal;
    background: none;
    border: none;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    text-decoration-color: currentColor;
}

#future-events .event-more-hint {
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
}

#past-events .event-more-hint {
    color: #e4ecf7;
    -webkit-text-fill-color: #e4ecf7;
}

.event-date-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.55rem;
    min-width: 0;
}

/* Artist / alias pills from `(alias: …)` — directly under year + month/day stack */
.event-date-alias-badges {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
}

.event-date-alias-badges .event-desc__badges {
    justify-content: flex-start;
}

.event-item-body {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
}

.event-item-body > .event-details {
    flex: 1 1 auto;
    min-width: 0;
}

.event-row-chevron {
    flex: 0 0 auto;
    padding-right: 10px;
    box-sizing: border-box;
    font-family: var(--title-font);
    font-weight: 800;
    font-size: clamp(1.05rem, 2.6vw, 1.45rem);
    line-height: 1;
    color: var(--text-color);
    pointer-events: none;
    user-select: none;
    align-self: center;
}

a.event-item {
    cursor: pointer;
}

.event-item--future .event-row-chevron {
    color: currentColor;
    opacity: 0.55;
}

.event-item:hover {
    border-color: var(--heading-surface-yellow);
    background: var(--event-hover-bg);
    transform: translateX(2px);
}

/* Future events: light yellow/green-tinted surface (77% opaque), dark type */
.event-item--future {
    --future-card-fill: color-mix(in srgb, var(--accent-secondary) 38%, var(--scrollbar-brand-hi));
    color: #141414;
    background: color-mix(in srgb, var(--future-card-fill) 77%, transparent);
    border: 2px solid var(--heading-surface-yellow);
    border-bottom: 2px solid var(--heading-surface-yellow);
    text-shadow: 0 0 1px color-mix(in srgb, currentColor 18%, transparent);
}

.event-item--future:hover {
    --future-card-fill: color-mix(in srgb, var(--accent-secondary) 48%, var(--scrollbar-brand-hi));
    background: color-mix(in srgb, var(--future-card-fill) 77%, transparent);
    border-color: var(--heading-surface-yellow);
    filter: brightness(1.02);
}

.event-item--future .event-date-year,
.event-item--future .event-date-md {
    color: #0a3a2a;
    color: color-mix(in srgb, var(--accent-secondary) 22%, #0a0a0a);
}

.event-name {
    font-family: var(--title-font);
    font-size: 1.65rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    line-height: 0.98;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
}

.event-item--future .event-name {
    color: #101010;
}

.event-venue {
    font-family: var(--primary-font);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.015em;
    line-height: 1.4;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
}

.event-item--future .event-venue {
    color: #1a1a1a;
    opacity: 0.9;
}

.event-details-main--future {
    gap: 0.45rem;
}

.event-item--future .event-desc {
    color: rgba(20, 20, 20, 0.82);
}

/* Future rows: alias pills use same inverted chips as global .article-label (see #future-events for sizing) */
.event-item--future .event-desc__badges .article-label--xeppo {
    border-color: var(--article-label-x-border);
}

.event-item--future .event-desc__badges .article-label--suijd {
    border-color: var(--article-label-s-border);
}

.event-item--future .event-desc__badges .article-label--rajas-void-minus {
    border-color: var(--article-rajas-border);
}

.event-date {
    font-weight: 600;
    color: var(--title-color);
}

/* Past events: year first, month (and day if any) below */
.event-date-stack {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.2rem;
    line-height: 1.02;
}

.event-date-year {
    font-family: var(--title-font);
    font-weight: 800;
    font-size: clamp(1.35rem, 3.2vw, 1.85rem);
    letter-spacing: 0.06em;
    line-height: 1.02;
    color: var(--event-past-year-fg);
}

.event-date-md {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--title-font);
    font-weight: 600;
    font-size: clamp(0.88rem, 2.15vw, 1.02rem);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--event-past-monthday-fg);
}

/* Day number — same color as month line; no chip/box */
.event-date-day--inverted {
    display: inline;
    padding: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    line-height: inherit;
    text-transform: none;
    background: none;
    color: inherit;
    text-shadow: none;
    -webkit-text-fill-color: inherit;
    border: none;
    border-radius: 0;
}

.event-date-month {
    letter-spacing: inherit;
}

.event-details {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1rem 1.5rem;
    min-width: 0;
}

.event-details-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    /* Reserve space for `.event-region-tag` in the card corner */
    padding-right: clamp(2.65rem, 11vw, 3.85rem);
}

.event-location {
    font-family: var(--title-font);
    font-size: clamp(0.92rem, 2.2vw, 1.15rem);
    line-height: 1.12;
    letter-spacing: 0.006em;
    text-transform: uppercase;
    color: var(--event-location-color);
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
}

.event-desc {
    text-align: left;
    color: var(--text-color);
    font-size: 1rem;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.45rem 0.55rem;
}

/* Liveset / DJ set / radio liveset line (after `(alias: …)` stripped) */
.event-set-type {
    display: inline;
    font-family: var(--title-font);
    font-size: clamp(1.12rem, 2.9vw, 1.42rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.045em;
    text-transform: uppercase;
}

.event-desc__badges {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

.event-desc__badges .article-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.2rem 0.58rem;
    font-size: 0.74rem;
    letter-spacing: 0.11em;
    line-height: 1;
    vertical-align: middle;
}

/* Events only: allow the “Joris van Suijdam” artist pill to wrap, but clamp to 2 lines. */
#past-events .event-desc__badges .article-label--joris-van-suijdam,
#future-events .event-desc__badges .article-label--joris-van-suijdam {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    white-space: normal;
    width: auto;
    max-width: min(18ch, 100%);
    line-height: 1.05;
    text-wrap: balance;
}

.event-desc__body {
    flex: 1 1 10rem;
    min-width: 0;
}

/* Artist / alias line on its own row; description starts below */
.event-desc:has(.event-desc__badges) {
    flex-direction: column;
    align-items: flex-start;
}

.event-desc:has(.event-desc__badges) .event-desc__body {
    flex: none;
    width: 100%;
    min-width: 0;
}

#past-events .event-desc:has(.event-desc__badges),
#future-events .event-desc:has(.event-desc__badges) {
    row-gap: clamp(0.45rem, 1.2vw, 0.65rem);
    column-gap: 0;
}

.grid-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
}

/* Artist / alias pills — inverted chip (hero subtitle style): lime fill, dark type, accent border per variant */
.article-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: max-content;
    max-width: 100%;
    font-family: var(--title-font);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.48rem 0.88rem;
    border-radius: 0;
    line-height: 1;
    color: #141414;
    -webkit-text-fill-color: #141414;
    border: 2px solid var(--heading-surface-yellow);
    background: var(--title-color);
    /* Avoid body LED bloom tinting pill text vs surrounding copy */
    text-shadow: none;
}

.article-label--default {
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-color: var(--heading-surface-yellow);
}

.article-label--xeppo {
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-color: var(--article-label-x-border);
    background: var(--title-color);
}

.article-label--suijd {
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-color: var(--article-label-s-border);
    background: var(--title-color);
}

.article-label--rajas-void-minus {
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-color: var(--article-rajas-border);
    background: var(--title-color);
}

/* Hero project row under subtitle: outline only, body / title yellow (no fill) */
.bio-projects .article-label,
.bio-projects .article-label--default,
.bio-projects .article-label--xeppo,
.bio-projects .article-label--suijd,
.bio-projects .article-label--rajas-void-minus {
    background: transparent;
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    border: 2px solid var(--heading-surface-yellow);
}

/* Project row: hover inverts outline pills to filled chip (matches global .article-label) */
a.bio-projects__pill-link:hover .article-label,
a.bio-projects__pill-link:hover .article-label--default {
    background: var(--title-color);
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-color: var(--heading-surface-yellow);
}

a.bio-projects__pill-link:hover .article-label--xeppo {
    border-color: var(--article-label-x-border);
}

a.bio-projects__pill-link:hover .article-label--suijd {
    border-color: var(--article-label-s-border);
}

a.bio-projects__pill-link:hover .article-label--rajas-void-minus {
    border-color: var(--article-rajas-border);
}

/* Inline alias pills inside bio, article copy, event descriptions */
.content-text .article-label,
.event-desc .article-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    align-self: auto;
    margin: 0 0.1em;
    padding: 0.22em 0.52em;
    font-size: 0.82em;
    letter-spacing: 0.09em;
    line-height: 1;
}

/* Article excerpt: tighter pills so body copy reads as one rhythm */
.article-excerpt .article-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
    align-self: auto;
    margin: 0 0.12em;
    padding: 0.12em 0.42em;
    font-size: 0.88em;
    letter-spacing: 0.07em;
    line-height: 1;
    border-width: 2px;
}

.article-card {
    position: relative;
    background: transparent;
    border: 2px solid var(--glass-border);
    padding: 1.35rem 1.25rem 1.15rem;
    border-radius: 0;
    transition: none;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-width: 0;
}

.article-card.is-article-card-blinking::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: transparent;
    box-shadow: inset 0 0 0 2px var(--selectie-indicatie-meow-color);
    animation: selectie-indicatie-meow var(--ac-blink-cycle, 900ms) steps(1, end) var(--ac-blink-iter, 2);
    will-change: opacity;
}

/* While hash-blinking, force all borders in this card to rose-pink. */
.article-card.is-article-card-blinking {
    /* Hide base border so the blinking overlay stroke is the only visible outside border (opacity matches). */
    border-color: transparent;
    --ac-blink-cycle: var(--ac-blink-cycle, 900ms);
    --ac-blink-iter: var(--ac-blink-iter, 2);
}

.article-card.is-article-card-blinking .article-excerpt .article-label {
    /* These pills are normally filled with --title-color (yellow). During hash blink,
       they must join the rose-pink “ink-only” system like the rest of the card.
       Opacity blink is delayed half a cycle vs excerpt plain text so pills lag one beat. */
    background: transparent;
    border-color: var(--selectie-indicatie-meow-color);
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    text-decoration-color: var(--selectie-indicatie-meow-color);
    animation: selectie-indicatie-meow var(--ac-blink-cycle, 900ms) steps(1, end) var(--ac-blink-iter, 2);
    animation-delay: calc(0.5 * var(--ac-blink-cycle, 900ms));
}

/* During hash blink, force all “colored” sub-elements to the same ink,
   and animate ONLY opacity so every part blinks perfectly in sync.
   Excerpt body text uses .article-excerpt__plain (see app.js) so inline pills can blink delayed. */
.article-card.is-article-card-blinking .article-card__label,
.article-card.is-article-card-blinking h4,
.article-card.is-article-card-blinking .article-excerpt__plain,
.article-card.is-article-card-blinking .article-readmore,
.article-card.is-article-card-blinking .article-readmore__source,
.article-card.is-article-card-blinking .article-readmore__host,
.article-card.is-article-card-blinking .article-readmore__url,
.article-card.is-article-card-blinking .article-excerpt-wrap::before,
.article-card.is-article-card-blinking .article-excerpt-wrap::after {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    text-decoration-color: var(--selectie-indicatie-meow-color);
    border-color: var(--selectie-indicatie-meow-color);
    animation: selectie-indicatie-meow var(--ac-blink-cycle, 900ms) steps(1, end) var(--ac-blink-iter, 2);
}

.article-card[id^='article-'] {
    scroll-margin-top: clamp(3rem, 8vw, 5rem);
}

/* Artist label: top-right corner chip (attached; does not consume layout width) */
.article-card__label {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    float: none;
    width: max-content;
    max-width: calc(100% - 1.25rem);
    white-space: nowrap;
    margin: 0;
    padding: 0.3em 0.48em;
    box-sizing: border-box;
    font-size: clamp(0.46rem, 0.35rem + 1.05vw, 0.64rem);
    font-weight: 800;
    letter-spacing: 0.11em;
    line-height: 1.2;
    pointer-events: none;
    align-self: auto;
    border-top: none;
    border-right: none;
    border-radius: 0;
}

/* Corner chip: see-through, title yellow type + border */
.article-card__label.article-label,
.article-card__label.article-label--default,
.article-card__label.article-label--xeppo,
.article-card__label.article-label--suijd,
.article-card__label.article-label--rajas-void-minus {
    background: transparent;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    border-color: transparent;
    text-shadow: none;
}

.article-card__label.article-label--xeppo {
    letter-spacing: 0.09em;
    padding-left: 0.26em;
    padding-right: 0.26em;
}

/* Hash blink must override the corner label’s normal “title yellow” rule above. */
.article-card.is-article-card-blinking .article-card__label.article-label,
.article-card.is-article-card-blinking .article-card__label.article-label--default,
.article-card.is-article-card-blinking .article-card__label.article-label--xeppo,
.article-card.is-article-card-blinking .article-card__label.article-label--suijd,
.article-card.is-article-card-blinking .article-card__label.article-label--rajas-void-minus {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    text-decoration-color: var(--selectie-indicatie-meow-color);
    border-color: var(--selectie-indicatie-meow-color);
}

/* Hash / project-link arrival: hard blink rose-pink (100% ↔ 20%), faster. */
@keyframes article-card-accent-text-blink {
    0%,
    49.999% {
        color: var(--selectie-indicatie-meow-color);
        -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
        text-decoration-color: var(--selectie-indicatie-meow-color);
        opacity: 1;
    }
    50%,
    100% {
        color: var(--selectie-indicatie-meow-color);
        -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
        text-decoration-color: var(--selectie-indicatie-meow-color);
        opacity: 0.33;
    }
}

@keyframes article-card-corner-label-blink {
    0%,
    49.999% {
        color: var(--selectie-indicatie-meow-color);
        -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
        border-color: var(--selectie-indicatie-meow-color);
        background: transparent;
        opacity: 1;
    }
    50%,
    100% {
        color: var(--selectie-indicatie-meow-color);
        -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
        border-color: var(--selectie-indicatie-meow-color);
        background: transparent;
        opacity: 0.33;
    }
}

@keyframes article-card-pill-blink {
    0%,
    49.999% {
        background: transparent;
        border-color: var(--selectie-indicatie-meow-color);
        color: var(--selectie-indicatie-meow-color);
        -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
        opacity: 1;
    }
    50%,
    100% {
        background: transparent;
        border-color: var(--selectie-indicatie-meow-color);
        color: var(--selectie-indicatie-meow-color);
        -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
        opacity: 0.33;
    }
}

/* Shared hard-blink cycle (default for “blink moments”): opacity 100% ↔ 33%, rose-only. */
@keyframes selectie-indicatie-meow {
    0%,
    49.999% {
        opacity: var(--selectie-indicatie-meow-opacity-hi);
    }
    50%,
    100% {
        opacity: var(--selectie-indicatie-meow-opacity-lo);
    }
}

@media (prefers-reduced-motion: reduce) {
    #section-title-bio.is-bio-heading-blinking {
        animation: selectie-indicatie-meow var(--selectie-indicatie-meow-cycle-reduced) steps(1, end) 2;
    }

    .recording-bar-heading,
    .section-title {
        animation: none;
        will-change: auto;
    }

    .bio-contact-line.bio-contact-line--header::before,
    .bio-contact-line.bio-contact-line--header::after {
        animation: none;
        opacity: 0;
        will-change: auto;
    }

    /* (intentionally no loading overlay glyph on recording placeholder) */
}

.article-card h4 {
    font-family: var(--title-font);
    font-size: clamp(1.45rem, 4.2vw, 3rem);
    line-height: 1.02;
    margin: clamp(0.35rem, 1.1vw, 0.55rem) 0 0.25rem;
    max-width: 100%;
    min-width: 0;
    width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
    letter-spacing: 0.03em;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
}

.article-excerpt-wrap {
    position: relative;
    min-height: 0;
    margin-top: 0;
    /* Spacer above / below pull-quote + excerpt body */
    padding: clamp(1.35rem, 3.6vw, 2.1rem) 0 clamp(1rem, 2.4vw, 1.5rem);
}

/* Pull-quote framing — excerpt reads as a quotation */
.article-excerpt-wrap::before,
.article-excerpt-wrap::after {
    font-family: var(--title-font);
    font-size: clamp(2.75rem, 7.5vw, 4.25rem);
    line-height: 0.72;
    font-weight: 800;
    color: var(--title-color);
    opacity: 1;
    pointer-events: none;
    position: absolute;
    z-index: 0;
    text-shadow: none;
    -webkit-font-smoothing: antialiased;
}

.article-excerpt-wrap::before {
    content: '\201C';
    left: -0.12em;
    /* Opening quote — sit a bit higher over the excerpt */
    top: clamp(0.06rem, 0.5vw, 0.35rem);
}

.article-excerpt-wrap::after {
    content: '\201D';
    right: -0.02em;
    bottom: -0.52em;
}

.article-excerpt {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--title-color);
    font-size: 0.95rem;
    line-height: 1.55;
    white-space: pre-line;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5;
    line-clamp: 5;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.5rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.5rem), transparent 100%);
}

.article-readmore {
    margin-top: auto;
    font-family: var(--title-font);
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--title-color);
    text-transform: uppercase;
    letter-spacing: 0.12em;
    line-height: 1.35;
    padding-top: 0.45rem;
    text-align: left;
    text-shadow: none;
}

.article-readmore__meta {
    display: block;
    margin-top: 0.12em;
    text-transform: none;
    letter-spacing: 0.04em;
    font-weight: 600;
    line-height: 1.4;
    /* Underline the whole “> site” line, including the space after “>” */
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0;
    text-decoration-skip-ink: none;
}

.article-readmore__meta::before {
    content: '> ';
    padding-right: 0.28em;
    font-weight: 800;
    letter-spacing: 0;
}

.article-readmore__source {
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    font-size: 0.78em;
}

.article-readmore__sep {
    font-weight: 700;
    margin: 0;
    padding: 0 0.06em;
    text-decoration: inherit;
    text-decoration-thickness: inherit;
    text-underline-offset: inherit;
    text-decoration-skip-ink: inherit;
}

.article-readmore__url,
.article-readmore__host {
    display: inline;
    font-family: var(--primary-font);
    font-size: clamp(0.62rem, 1.65vw, 0.78rem);
    font-weight: 500;
    letter-spacing: 0.02em;
    text-transform: none;
    hyphens: none;
    -webkit-hyphens: none;
    word-break: normal;
    overflow-wrap: break-word;
    text-decoration: inherit;
    text-decoration-thickness: inherit;
    text-underline-offset: inherit;
    text-decoration-skip-ink: inherit;
}

/* Hover suppressed while hash blink runs so animation isn’t overridden by higher-specificity :hover */
#articles-list .article-card:not(.is-article-card-blinking):hover {
    /* Same chip fill as `.section-title` (heading yellow); default card stays transparent */
    background: color-mix(in srgb, var(--title-color) 92%, transparent);
    border-color: var(--title-color);
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.14);
    color: #141414;
    text-shadow: none;
}

#articles-list .article-card:not(.is-article-card-blinking):hover h4,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-excerpt,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-readmore,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-readmore__source,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-readmore__sep,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-readmore__url,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-readmore__host,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-readmore__meta {
    color: #141414;
    -webkit-text-fill-color: #141414;
    text-shadow: none;
    text-decoration-color: currentColor;
}

#articles-list .article-card:not(.is-article-card-blinking):hover .article-excerpt-wrap::before,
#articles-list .article-card:not(.is-article-card-blinking):hover .article-excerpt-wrap::after {
    color: #141414;
    -webkit-text-fill-color: #141414;
    opacity: 1;
}

#articles-list .article-card:not(.is-article-card-blinking):hover .article-excerpt .article-label {
    background: #141414;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    border-color: #141414;
    text-shadow: none;
}

#articles-list .article-card:not(.is-article-card-blinking):hover .article-card__label {
    background: transparent;
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-color: transparent;
    text-shadow: none;
}

/* Article cards (links only): side hover indicators — rails avoid conflicting with hash-blink ::after */
#articles-list a.article-card .article-card__hover-rails {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

#articles-list a.article-card:not(.is-article-card-blinking):is(:hover, :focus-visible) .article-card__hover-rails::before,
#articles-list a.article-card:not(.is-article-card-blinking):is(:hover, :focus-visible) .article-card__hover-rails::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--hover-select-arrow);
    -webkit-text-fill-color: var(--hover-select-arrow);
    -webkit-text-stroke: var(--select-indicator-stroke) var(--hover-select-arrow);
    font-family: var(--title-font);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    line-height: 1;
    z-index: 4;
    font-size: var(--select-indicator-size);
    width: 1em;
    text-align: center;
}

#articles-list a.article-card:not(.is-article-card-blinking):is(:hover, :focus-visible) .article-card__hover-rails::before {
    content: '>';
    left: -1px;
    --si-dir: 1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

#articles-list a.article-card:not(.is-article-card-blinking):is(:hover, :focus-visible) .article-card__hover-rails::after {
    content: '<';
    right: -1px;
    --si-dir: -1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

/* Footer (scroll-to-top bar sits above, between main and footer) */
footer {
    padding: 0;
    text-align: center;
    background: var(--footer-bg);
    color: var(--footer-text);
    position: relative;
    z-index: 20;
    border-top: none;
    overflow: hidden;
    text-shadow: 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

#footer-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.35;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 2.5rem;
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    /* Space below link columns before build tag */
    padding-bottom: clamp(1.25rem, 3.5vw, 2rem);
    box-sizing: border-box;
}

.footer-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    width: 100%;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    min-width: 0;
}

.footer-col--stream {
    align-items: flex-start;
    text-align: left;
    padding-right: 1.75rem;
}

.footer-col--stream .footer-stream-label {
    text-align: left;
    width: auto;
}

.footer-col--stream .footer-below-follow-heading {
    text-align: left;
    width: auto;
    min-height: 0;
}

/* Contact link: own band below FOLLOW + optional subheading */
.footer-contact-segment {
    margin-top: clamp(0.65rem, 2vw, 1.15rem);
    padding: clamp(0.7rem, 1.9vw, 0.95rem) clamp(0.85rem, 2.4vw, 1.1rem);
    border: 2px solid #141414;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    border-radius: 14px;
    background: var(--title-color);
    color: #141414;
    -webkit-text-fill-color: #141414;
    position: relative;
}

/* If it’s placed above FOLLOW, remove the “separator” spacing logic */
.footer-contact-segment--above-follow {
    margin-top: 0;
    margin-bottom: clamp(0.85rem, 2.4vw, 1.25rem);
}

/* Talk-cloud corner (speech bubble tail) */
.footer-contact-segment::after {
    content: '';
    position: absolute;
    left: 1.25rem;
    bottom: -10px;
    width: 18px;
    height: 18px;
    background: var(--title-color);
    transform: rotate(45deg);
    /* WhatsApp-ish soft tail; keep it fully solid (no inner black cuts) */
    border-radius: 7px;
}

.footer-contact-heading {
    margin: 0 0 0.4rem;
    font-size: clamp(0.65rem, 1.75vw, 0.82rem);
    font-weight: 700;
    letter-spacing: 0.1em;
    line-height: 1.18;
    text-transform: none;
    color: #141414;
    -webkit-text-fill-color: #141414;
}

.footer-col--stream .footer-contact-heading {
    text-align: left;
    width: auto;
}

.footer-contact-segment .footer-socials {
    margin: 0;
}

.footer-contact-segment .footer-socials a.social-link,
.footer-contact-segment .footer-socials a.social-link:link,
.footer-contact-segment .footer-socials a.social-link:visited {
    color: #141414;
    -webkit-text-fill-color: #141414;
}

.footer-contact-segment .footer-socials a.social-link:hover {
    background: #141414;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
}

.footer-col--actions {
    align-items: flex-start;
    text-align: left;
    padding-left: 1.75rem;
    border-left: 2px solid var(--footer-divider);
}

.footer-col--actions .footer-actions-label {
    width: 100%;
    text-align: left;
}

.footer-col .footer-socials {
    display: flex;
    align-items: flex-start;
    width: auto;
    max-width: 22rem;
}

.footer-col--stream .footer-socials {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.45rem;
    max-width: 100%;
    width: 100%;
}

.footer-col--stream .footer-socials a.social-link {
    justify-content: flex-start;
    white-space: nowrap;
    letter-spacing: clamp(0.04em, 0.35vw, 0.15rem);
    font-size: clamp(0.62rem, 2.4vw, 0.9rem);
}

.footer-col--actions .footer-socials {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0.45rem;
    width: 100%;
    max-width: 100%;
}

.footer-col--actions .footer-socials a.social-link {
    justify-content: flex-start;
    white-space: nowrap;
    letter-spacing: clamp(0.04em, 0.35vw, 0.15rem);
    font-size: clamp(0.62rem, 2.4vw, 0.9rem);
}

.footer-socials {
    display: flex;
    gap: 2.5rem;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.footer-socials a,
.footer-socials a:link,
.footer-socials a:visited {
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.9rem;
    letter-spacing: 0.15rem;
    transition: none;
    opacity: 1;
}

.footer-socials a.social-link {
    position: relative;
    border: 2px solid var(--heading-surface-yellow);
    background: var(--title-color);
    color: #141414;
    -webkit-text-fill-color: #141414;
    box-shadow: none;
    opacity: 1;
    padding: 0.42rem 0.72rem;
    box-sizing: border-box;
}

footer .footer-socials a.social-link:is(:hover, :focus-visible)::before,
footer .footer-socials a.social-link:is(:hover, :focus-visible)::after {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--hover-select-arrow);
    -webkit-text-fill-color: var(--hover-select-arrow);
    -webkit-text-stroke: var(--select-indicator-stroke) var(--hover-select-arrow);
    font-family: var(--title-font);
    font-weight: 900;
    letter-spacing: 0;
    text-shadow: none;
    line-height: 1;
    z-index: 2;
    font-size: var(--select-indicator-size);
    width: 1em;
    text-align: center;
}

footer .footer-socials a.social-link:is(:hover, :focus-visible)::before {
    content: '>';
    left: -1px;
    --si-dir: 1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

footer .footer-socials a.social-link:is(:hover, :focus-visible)::after {
    content: '<';
    right: -1px;
    --si-dir: -1;
    animation: select-indicator-step-in-x var(--select-indicator-speed) steps(3, end) infinite;
}

.footer-socials a:hover {
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    transform: none;
    opacity: 0.82;
}

.footer-socials a.social-link:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    transform: none;
    box-shadow: none;
    opacity: 0.82;
}

/* Footer contact link: hover = true invert (solid dark with yellow text) */
#footer-contact a.social-link[data-lang-contact]:hover {
    background: #141414;
    border-color: #141414;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    opacity: 1;
}

/* Footer contact: blinking underscore cursor */
#footer-contact a.social-link[data-lang-contact] .social-link__text::after {
    content: '_';
    display: inline-block;
    margin-left: 0.28em;
    opacity: 1;
    animation: footer-contact-underscore-blink 1.05s steps(1, end) infinite;
}

@keyframes footer-contact-underscore-blink {
    0%,
    49% {
        opacity: 1;
    }
    50%,
    100% {
        opacity: 0;
    }
}

.footer-socials a.social-link:focus-visible {
    outline: 2px solid var(--text-color);
    outline-offset: 3px;
}

/* Scroll-to-top bar: default yellow; hover invert to footer-dark */
.scroll-top-bar {
    position: relative;
    z-index: 20;
    display: block;
    width: 100%;
    margin: 0;
    /* No empty strip above the arrows */
    padding: 0 0.15rem 0.5rem;
    border: none;
    border-top: 2px solid var(--scroll-top-border);
    border-bottom: none;
    cursor: pointer;
    /* Arrows: same fill+stroke, pure black */
    --scroll-top-arrow-ink: #000;
    --scroll-top-arrow-fill: var(--scroll-top-arrow-ink);
    --scroll-top-arrow-stroke: var(--scroll-top-arrow-ink);
    /* Single-row arrows + tighter spacing */
    --scroll-top-arrow-y-odd: 0em;
    --scroll-top-arrow-y-even: 0em;
    --scroll-top-arrow-gap: clamp(1.9rem, 4.8vw, 3.9rem);
    background: var(--title-color);
    color: var(--scroll-top-arrow-fill);
    font-family: var(--primary-font);
    image-rendering: pixelated;
    box-shadow: none;
    transition: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* Hover / focus-visible: keep arrows on one row */
.scroll-top-bar:hover,
.scroll-top-bar:focus-visible {
    box-shadow: none;
    filter: none;
    --scroll-top-arrow-y-odd: 0em;
    --scroll-top-arrow-y-even: 0em;
    /* Invert: dark bar + yellow arrows */
    background: #141414;
    border-top-color: var(--title-color);
    --scroll-top-arrow-fill: var(--title-color);
    --scroll-top-arrow-stroke: var(--title-color);
}

/* Active (click / hold): transparent fill, rose-pink strokes */
.scroll-top-bar:active {
    box-shadow: none;
    filter: none;
    background: transparent;
}

.scroll-top-stack {
    position: relative;
    display: block;
    width: 100%;
    min-height: clamp(7rem, 16vw, 11.5rem);
    overflow-x: hidden;
    overflow-y: hidden;
}

.scroll-top-glitch {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0;
    box-sizing: border-box;
}

.scroll-top-bar,
.scroll-top-main,
.scroll-top-cell {
    text-shadow: none;
}

.scroll-top-main {
    position: absolute;
    /* Extend strip so edges clip to “half an arrow” */
    left: calc(var(--scroll-top-arrow-gap) * -0.5);
    right: calc(var(--scroll-top-arrow-gap) * -0.5);
    top: 0;
    bottom: 0;
    z-index: 3;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: var(--scroll-top-arrow-gap);
    width: 100%;
    padding: 0;
    box-sizing: border-box;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: none;
    /* Slightly larger, but keep within bar */
    transform: translateX(clamp(0.2rem, 1.2vw, 0.65rem)) scale(1.28);
    transform-origin: center center;
    will-change: transform;
}

/* Hover should not shift arrows — only colors/background change */
.scroll-top-bar:hover .scroll-top-main,
.scroll-top-bar:focus-visible .scroll-top-main {
    transform: translateX(clamp(0.2rem, 1.2vw, 0.65rem)) scale(1.28);
}

.scroll-top-cell {
    flex: 0 0 auto;
    text-align: center;
    font-family: var(--primary-font);
    font-size: clamp(4.15rem, 13.4vw, 6.85rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--scroll-top-arrow-fill);
    -webkit-text-fill-color: var(--scroll-top-arrow-fill);
    -webkit-text-stroke: max(1.5px, 0.055em) var(--scroll-top-arrow-stroke);
    text-shadow: none;
    -webkit-font-smoothing: none;
    font-smooth: never;
    text-rendering: optimizeSpeed;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Alternating top/bottom “float” rows; hover flips via the variables above */
.scroll-top-main .scroll-top-cell:nth-child(odd) {
    transform: translateY(var(--scroll-top-arrow-y-odd));
}
.scroll-top-main .scroll-top-cell:nth-child(even) {
    transform: translateY(var(--scroll-top-arrow-y-even));
}

.scroll-top-bar:active .scroll-top-cell {
    -webkit-text-stroke-color: #fe725f;
    -webkit-text-fill-color: #fe725f;
    color: #fe725f;
}

.scroll-top-glitch {
    display: none;
}

@media (prefers-reduced-motion: reduce) {
    #main-title {
        animation: none;
    }
    .cta-row {
        animation: none;
    }
    .cta-button {
        animation: none;
    }
    .cta-chevron--left,
    .cta-chevron--right {
        animation: none;
        transform: translate3d(0, var(--cta-chevron-optical-y), 0);
    }
    .cta-contact-word::after {
        animation: none;
        opacity: 1;
        height: max(2px, 0.11em);
        border-bottom: none;
        padding-bottom: 0;
        background-color: currentColor;
        background-image: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* Build tag — in-flow so footer height always fits (no overlap at odd breakpoints / font sizes) */
.version {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    margin-top: 0.15rem;
    padding: 0.25rem var(--container-pad-x) calc(0.55rem + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    font-family: var(--primary-font);
    font-size: clamp(0.46rem, 2.2vw, 0.62rem);
    line-height: 1.3;
    letter-spacing: 0.04em;
    font-weight: 500;
    text-transform: none;
    color: var(--footer-version-color, #e85d8c);
    opacity: 1;
    text-align: center;
    pointer-events: none;
}

.footer-spacer {
    height: 346px;
}

.version .version__text {
    color: inherit;
    text-decoration: none;
}

.mt-4 { margin-top: 4rem; }

/* Optional: add class `font-atlas-pixel` on headings or UI for the converted atlas. */
.font-atlas-pixel {
    font-family: var(--atlas-pixel-font);
    -webkit-font-smoothing: none;
}

@media (max-width: 768px) {
    /* Mobile: hide platform name line on header social tiles */
    #social-nav-groups :is(a, button).social-link--header-tile .social-link__platform--header-tile {
        display: none;
    }

    :root {
        --container-pad-x: clamp(1.35rem, 5.35vw, 2.05rem);
        --hover-select-arrow-jump: 12px;
        --select-indicator-jump: var(--hover-select-arrow-jump);
        --select-indicator-speed: 1.35s;
    }

    /* Indicators: more breathing room + a different stepped in/out path */
    .event-item:is(:hover, :focus-within)::before {
        left: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }
    .event-item:is(:hover, :focus-within)::after {
        right: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }

    :where(
        .bio-contact-line,
        .recording-item,
        .scroll-top-bar
    ):is(:hover, :focus-visible)::before {
        left: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }
    :where(
        .bio-contact-line,
        .recording-item,
        .scroll-top-bar
    ):is(:hover, :focus-visible)::after {
        right: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }

    /* Nearer top/bottom edges + smaller jump than global mobile — keeps pair from overlapping on short tiles */
    #social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::before,
    #social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::after {
        --select-indicator-jump: clamp(4px, 1.35vmin, 7px);
    }
    #social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::before {
        top: clamp(0.12rem, 5%, 0.42rem);
        animation: social-indicator-plain-mobile-y-mirror var(--select-indicator-speed) steps(4, end) infinite;
    }
    #social-nav-groups :is(a, button).social-link--header-tile:is(:hover, :focus-visible)::after {
        bottom: clamp(0.12rem, 5%, 0.42rem);
        animation: social-indicator-plain-mobile-y var(--select-indicator-speed) steps(4, end) infinite;
    }

    #header-contact-line:is(:hover, :focus-visible)::before,
    #header-contact-line:is(:hover, :focus-visible)::after {
        animation: select-indicator-mobile-y var(--select-indicator-speed) steps(4, end) infinite;
    }

    #header-contact-line:is(:hover, :focus-visible) .header-contact-side-indicators::before {
        left: -1px;
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }
    #header-contact-line:is(:hover, :focus-visible) .header-contact-side-indicators::after {
        right: -1px;
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }

    a.bio-projects__pill-link:is(:hover, :focus-visible)::before {
        left: -1px;
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }

    #articles-list a.article-card:not(.is-article-card-blinking):is(:hover, :focus-visible) .article-card__hover-rails::before {
        left: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }
    #articles-list a.article-card:not(.is-article-card-blinking):is(:hover, :focus-visible) .article-card__hover-rails::after {
        right: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }

    footer .footer-socials a.social-link:is(:hover, :focus-visible)::before {
        left: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }
    footer .footer-socials a.social-link:is(:hover, :focus-visible)::after {
        right: clamp(0.18rem, 2.4vw, 0.42rem);
        animation: select-indicator-mobile-x var(--select-indicator-speed) steps(4, end) infinite;
    }

    .container {
        padding: 0 var(--container-pad-x);
        max-width: 100%;
        overflow-x: hidden;
    }
    /* Title lives in .container; overflow-x hidden was clipping long lines / gradient text */
    header .container {
        overflow-x: visible;
    }
    .event-item {
        grid-template-columns: minmax(4.65rem, 28vw) minmax(0, 1fr);
        column-gap: clamp(1.05rem, 3.85vw, 1.5rem);
        row-gap: 0;
        align-items: start;
        margin-left: 0;
        margin-right: 0;
        padding: 1.75rem clamp(0.75rem, 3.2vw, 1.15rem);
    }

    .event-item.event-item--linked {
        align-items: stretch;
    }

    .event-item > .event-region-tag {
        top: 0;
        right: 0;
    }

    #future-events .event-item,
    #future-events .event-item.event-item--future,
    #past-events .event-item {
        column-gap: clamp(1.05rem, 3.85vw, 1.5rem);
    }

    /* Mobile: make the date block look bigger without widening its column */
    #future-events .event-date-stack {
        transform: scale(1.2);
        transform-origin: left top;
        width: calc(100% / 1.2);
        max-width: calc(100% / 1.2);
    }

    /* Tighten vertical rhythm under the year (mobile) */
    #future-events .event-date-stack {
        gap: 0.01rem;
        line-height: 0.94;
    }

    #future-events .event-date-year {
        line-height: 0.92;
    }

    /* Pull month/day line slightly closer to the year (optical) */
    #future-events .event-date-md {
        margin-top: -0.08em;
        line-height: 0.9;
    }

    #past-events .event-date-year {
        font-size: clamp(0.98rem, 4.1vw, 1.22rem);
    }

    #past-events .event-date-md {
        font-size: clamp(0.8rem, 3.15vw, 0.98rem);
    }

    /* Day chip left of month on one row (narrow date column) */
    .event-date-md {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: center;
        gap: 0.28rem 0.4rem;
    }

    .event-date-month {
        min-width: 0;
        line-height: 1.2;
    }

    .event-item-body {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .event-row-chevron {
        align-self: flex-end;
        padding-right: 10px;
    }

    .event-details {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }
    .event-desc {
        text-align: left;
        opacity: 1;
    }
    h1 {
        /* Larger fluid type; vw-heavy so long second line fits content width */
        font-size: clamp(2.75rem, 12.5vw, 4.65rem);
        letter-spacing: -7px;
        line-height: 0.78;
        margin-bottom: 1.5rem;
        word-break: break-word; /* Better for names */
        white-space: normal;
        max-width: 100%;
    }

    #main-title {
        line-height: 0.78;
        width: 100%;
    }

    #main-title .main-title__inner {
        width: 100%;
    }
    .content-text {
        font-size: 1.54rem;
        line-height: 1.52;
    }

    .event-item--future .event-desc {
        opacity: 1;
    }
    #email-input {
        width: 100%;
        max-width: 100%;
        font-size: 1rem;
        padding: 1rem 0.85rem;
    }

    .email-reveal .copy-button {
        padding: 1rem 1.1rem;
        font-size: clamp(0.65rem, 2.8vw, 0.8rem);
    }

    .bio-email-input {
        width: 100%;
        max-width: 100%;
        font-size: clamp(1rem, 2.8vw, 1.35rem);
        line-height: 1.4;
        padding: 0.5rem 0.85rem;
    }

    .bio-email-reveal .copy-button {
        padding: 0.5rem clamp(0.85rem, 2.5vw, 1.25rem);
        font-size: clamp(0.65rem, 2.8vw, 0.8rem);
    }
    .recording-bar {
        gap: 1rem;
    }
    header {
        padding: 3rem 0;
        min-height: auto;
    }

    .bio-contact-line.bio-contact-line--header {
        width: 100%;
        max-width: 100%;
        justify-content: flex-start;
        text-align: left;
    }

    .bio-contact-line.bio-contact-line--header .bio-contact-line__stack--header {
        align-items: flex-start;
    }

    .bio-contact-line.bio-contact-line--header .bio-contact-line__label {
        text-align: left;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
        padding-right: 0;
        row-gap: 0.2em;
        column-gap: 0.42em;
    }

    .bio-contact-line.bio-contact-line--header .bio-contact-line__sub--header {
        text-align: left;
    }

    /* Heart + cursor follow the copy on the left; drop corner-sweep so text stays readable */
    .bio-contact-line.bio-contact-line--header .header-contact-icon-wrap,
    .bio-contact-line.bio-contact-line--header .header-contact-mouse-wrap {
        position: static;
        right: auto;
        top: auto;
        margin: 0;
        transform: none !important;
        animation: none !important;
        will-change: auto;
    }

    .bio-contact-line.bio-contact-line--header .header-contact-icon-flicker {
        animation: header-contact-icon-flicker 5.4s linear infinite;
        animation-delay: var(--hc-flicker-delay, 0s);
    }

    .bio-contact-line.bio-contact-line--header .header-contact-vcr {
        align-self: center;
    }

    .bio-contact-line.bio-contact-line--header .header-contact-vcr__glyph {
        font-size: clamp(0.51rem, 2.2vw, 0.84rem);
    }

    nav {
        gap: clamp(0.3rem, 1.5vw, 0.65rem);
        flex-wrap: nowrap;
        padding: 0;
        box-sizing: border-box;
    }

    #social-nav-groups.social-nav-groups {
        gap: clamp(0.22rem, 1.5vw, 0.42rem);
    }

    #social-nav-groups :is(a, button).social-link--header-tile {
        padding: clamp(0.06rem, 1.4vw, 0.22rem);
    }

    /* Icon-only tiles on small viewports — captions stay in `aria-label` */
    #social-nav-groups :is(a, button).social-link--header-tile .social-link__label--header-tile {
        display: none;
    }

    #social-nav-groups :is(a, button).social-link--header-tile .social-link__icon svg {
        width: 86%;
        height: 86%;
    }

    /* BIO + EN/NL on one row: compact chips, abbrev only */
    .section-title--bio-with-lang {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: nowrap;
        gap: 0.4rem 0.55rem;
    }

    .section-title--bio-with-lang .section-title__main {
        flex: 1 1 auto;
        min-width: 0;
        width: auto;
    }

    .lang-switch--in-bio-bar {
        margin-left: 0;
        width: auto;
        flex-shrink: 0;
        justify-content: flex-end;
        gap: 0.2rem;
        font-size: clamp(0.58rem, 2.65vw, 0.72rem);
    }

    .lang-switch--in-bio-bar .lang-switch__btn {
        flex: 0 0 auto;
        padding: 0.28rem 0.38rem;
        font-size: inherit;
    }

    .lang-switch--in-bio-bar .lang-switch__sep {
        flex: 0 0 auto;
        align-self: center;
        padding: 0 0.04rem;
        font-size: 0.9em;
    }

    .lang-switch--in-bio-bar .lang-switch__label--full {
        display: none;
    }

    .lang-switch--in-bio-bar .lang-switch__label--abbr {
        display: inline;
    }

    .footer-grid {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 1.25rem;
        width: 100%;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .footer-col--stream {
        padding-right: 0;
        width: 100%;
    }

    .footer-col--actions {
        padding-left: 0;
        width: 100%;
        border-left: none;
        border-top: 2px solid var(--footer-divider);
        padding-top: 1.25rem;
    }

    .footer-col .footer-socials {
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: inherit;
        width: 100%;
        max-width: none;
        gap: 0.5rem;
    }

    .footer-col--actions .footer-socials {
        align-items: flex-start;
    }

    .footer-socials a.social-link {
        min-width: 0;
        min-height: 0;
        padding: 0.48rem 0.65rem;
        border-radius: 0;
        border: 2px solid var(--heading-surface-yellow);
        letter-spacing: 0.12rem;
        justify-content: flex-start;
    }

    .footer-col--stream .footer-socials a.social-link {
        letter-spacing: clamp(0.03em, 0.3vw, 0.12rem);
        font-size: clamp(0.74rem, 3.4vw, 0.98rem);
    }

    .footer-col--actions .footer-socials a.social-link {
        justify-content: flex-start;
        letter-spacing: clamp(0.03em, 0.3vw, 0.12rem);
        font-size: clamp(0.74rem, 3.4vw, 0.98rem);
    }

}

@media (max-width: 420px) {
    #social-nav-groups.social-nav-groups {
        gap: clamp(0.14rem, 1.2vw, 0.28rem);
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: clamp(2.85rem, 13.8vw, 4.55rem);
    }
    .content-text {
        font-size: 1.38rem;
    }
}

@media (max-width: 320px) {
    h1 {
        /* Slightly tighter cap on very narrow viewports so glyphs don’t spill */
        font-size: clamp(2.45rem, 14.5vw, 3.85rem);
    }
    .content-text {
        font-size: 1.28rem;
    }

    /* Tiny screens: slightly reduce stripe-to-title spacing */
    .section-title {
        padding-left: 8.25rem;
    }
}

.hidden {
    display: none !important;
}

.email-reveal {
    display: flex;
    align-items: stretch;
    gap: 0;
    width: 100%;
    max-width: 100%;
    align-self: stretch;
    margin-inline: 0;
    box-sizing: border-box;
    border: 2px solid var(--heading-surface-yellow);
    border-radius: 0;
    background: color-mix(in srgb, var(--title-color) 5%, transparent);
    box-shadow: 0 0 10px var(--email-input-shadow);
    backdrop-filter: blur(10px);
    overflow: hidden;
    animation: fadeIn 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.email-reveal.is-contact-rose-active,
.bio-email-reveal.is-contact-rose-active {
    border-color: var(--selectie-indicatie-meow-color);
}

.email-reveal.is-contact-rose-active .copy-button,
.bio-email-reveal.is-contact-rose-active .copy-button {
    border-left-color: var(--selectie-indicatie-meow-color);
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    background: transparent;
}

.email-reveal.is-contact-rose-active .copy-button.copied,
.bio-email-reveal.is-contact-rose-active .copy-button.copied {
    border-left-color: var(--selectie-indicatie-meow-color);
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    background: transparent;
}

.email-reveal.is-contact-auto-blinking,
.bio-email-reveal.is-contact-auto-blinking {
    animation: selectie-indicatie-meow var(--contact-blink-dur, 1100ms) steps(1, end)
        var(--contact-blink-iter, 1);
    will-change: opacity;
}

.email-reveal .copy-button {
    flex-shrink: 0;
    align-self: stretch;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-left: 2px solid var(--heading-surface-yellow);
    border-radius: 0;
    padding: 1.2rem 1.65rem;
    box-shadow: none;
    background: transparent;
    color: var(--text-color);
}

.email-reveal .copy-button:hover {
    box-shadow: none;
    background: var(--copy-hover-bg);
    color: var(--copy-hover-fg);
}

#email-input {
    background: transparent;
    border: none;
    color: var(--text-color);
    padding: 1.2rem 1.25rem;
    font-family: inherit;
    font-size: 1.2rem;
    border-radius: 0;
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    max-width: none;
    text-align: left;
    outline: none;
    box-shadow: none;
    backdrop-filter: none;
}

/* “Contact” in CTA — cycling underline (drawn with ::after so it animates everywhere) */
.cta-contact-word {
    position: relative;
    display: inline;
    text-decoration: none;
}

.cta-contact-word::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.06em;
    height: max(2px, 0.11em);
    border: none;
    border-radius: 0;
    box-sizing: content-box;
    opacity: 1;
    pointer-events: none;
    background-color: currentColor;
    background-image: none;
    background-size: auto;
    background-repeat: repeat;
    background-position: 0 0;
    -webkit-mask-image: none;
    mask-image: none;
    /* 7s solid → 3s dotted → 3s zigzag → repeat (13s) */
    animation: cta-contact-underline-cycle 13s linear infinite;
}

@keyframes cta-contact-underline-cycle {
    /* solid bar */
    0%,
    53.846% {
        height: max(2px, 0.11em);
        border-bottom: none;
        padding-bottom: 0;
        background-color: currentColor;
        background-image: none;
        background-size: auto;
        background-repeat: repeat;
        background-position: 0 0;
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* dotted (CSS border — round “solid” dots) */
    53.847%,
    76.923% {
        height: 0;
        padding-bottom: 0;
        border-bottom: max(2px, 0.11em) dotted currentColor;
        background-color: transparent;
        background-image: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
    /* zigzag (mask tiles an SVG tooth pattern) */
    76.924%,
    99.999% {
        height: max(3px, 0.13em);
        border-bottom: none;
        padding-bottom: 0;
        background-color: currentColor;
        background-image: none;
        -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 5' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 5 L3 0 L6 5 L9 0 L12 5 V5 H0Z'/%3E%3C/svg%3E");
        mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 5' preserveAspectRatio='none'%3E%3Cpath fill='%23fff' d='M0 5 L3 0 L6 5 L9 0 L12 5 V5 H0Z'/%3E%3C/svg%3E");
        -webkit-mask-size: 12px 100%;
        mask-size: 12px 100%;
        -webkit-mask-repeat: repeat-x;
        mask-repeat: repeat-x;
        -webkit-mask-position: left bottom;
        mask-position: left bottom;
    }
    100% {
        height: max(2px, 0.11em);
        border-bottom: none;
        padding-bottom: 0;
        background-color: currentColor;
        background-image: none;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

.bio-contact-line.bio-contact-line--header .cta-contact-word::after {
    bottom: 0.02em;
}

/* “contact for bookings” — translated infix (EN/NL) before rotating suffix */
.bio-contact-line.bio-contact-line--header .header-contact-for-infix {
    display: inline;
}

.cta-button {
    position: relative;
    z-index: 1;
    overflow: hidden;
    background: linear-gradient(180deg, var(--scrollbar-brand-hi) 0%, color-mix(in srgb, var(--title-color) 76%, #65682e) 100%);
    color: #141414;
    text-shadow: none;
    -webkit-text-fill-color: #141414;
    border: 2px solid var(--heading-surface-yellow);
    padding: 1.2rem 2.25rem;
    font-family: var(--title-font);
    font-weight: 800;
    font-size: clamp(0.72rem, 3.1vw, 0.95rem);
    letter-spacing: 0.045em;
    line-height: 1.35;
    max-width: min(100%, 34rem);
    text-align: center;
    text-transform: none;
    white-space: normal;
    border-radius: 0;
    cursor: pointer;
    transition: none;
    box-shadow: 0 0 0 transparent;
}

@keyframes cta-button-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-7px); }
}

.cta-button::before {
    display: none;
}

.cta-button:hover {
    transform: scale(1.02) translateY(-1px);
    box-shadow: 0 5px 14px var(--cta-hover-shadow);
    letter-spacing: 0.055em;
    color: #141414;
    -webkit-text-fill-color: #141414;
    background: linear-gradient(180deg, var(--scrollbar-brand-hi) 0%, color-mix(in srgb, var(--title-color) 72%, #6d6f28) 100%);
}

.copy-button {
    background: var(--copy-bg);
    color: var(--copy-fg);
    border: 2px solid var(--heading-surface-yellow);
    padding: 1.2rem 2.5rem;
    font-family: var(--title-font);
    font-weight: 800;
    border-radius: 0;
    cursor: pointer;
    transition: none;
    text-transform: uppercase;
    letter-spacing: 0.1rem;
}

.copy-button:hover {
    background: var(--copy-hover-bg);
    color: var(--copy-hover-fg);
    box-shadow: none;
}

.copy-button.copied {
    background: var(--copy-success-bg);
    border-color: var(--copy-success-border);
    color: var(--copy-success-fg);
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ========== Machine / Meowlektron skin (default; opt out with ?ui=classic) — original layout, hardware palette ========== */
body.meowlektron-ui {
    --bg-color: #03040d;
    --accent-primary: #ff2a2a;
    --accent-secondary: #d3d66f;
    --scrollbar-brand: #d3d66f;
    --scrollbar-brand-hi: #f5f6a8;
    --scrollbar-brand-mid: #9a9b18;
    --scrollbar-brand-lo: #3d3e0c;
    --scrollbar-brand-shadow: #252608;
    --footer-bg: #000000;
    --footer-text: var(--title-color);
    --text-color: var(--title-color);
    --text-muted: var(--title-color);
    --glass-bg: rgba(245, 208, 0, 0.04);
    --glass-border: var(--heading-surface-yellow);
    --body-glow-gradient: linear-gradient(to top, rgba(245, 208, 0, 0.045), transparent);
    --title-gradient: linear-gradient(to right, var(--title-color) 0%, var(--title-color) 100%);
    --scrollbar-track: var(--page-scrollbar-track);
    --recording-frame-bg: rgba(245, 208, 0, 0.06);
    --recording-frame-border: var(--heading-surface-yellow);
    --nav-hover-fg: #0a0a0a;
    --nav-hover-shadow: rgba(245, 208, 0, 0.35);
    --event-hover-bg: rgba(245, 208, 0, 0.07);
    --event-location-color: var(--title-color);
    /* Meowlektron: same QUICK CONFIG keys as :root — edit pill + date colors here */
    --pill-xeppo-fg: var(--text-color);
    --pill-xeppo-border: var(--heading-surface-yellow);
    --pill-xeppo-bg: rgba(245, 208, 0, 0.08);
    --pill-suijd-fg: var(--text-color);
    --pill-suijd-border: var(--heading-surface-yellow);
    --pill-rajas-fg: var(--text-color);
    --pill-rajas-border: var(--heading-surface-yellow);
    --pill-rajas-bg: rgba(245, 208, 0, 0.06);
    --pill-default-fg: var(--text-color);
    --event-past-year-fg: var(--title-color);
    --event-past-monthday-fg: var(--title-color);
    --article-label-border: var(--heading-surface-yellow);
    --article-label-bg: rgba(0, 0, 0, 0.5);
    --pill-suijd-bg: var(--article-label-bg);
    --article-label-x-border: var(--pill-xeppo-border);
    --article-label-x-bg: var(--pill-xeppo-bg);
    --article-label-s-border: var(--pill-suijd-border);
    --article-label-s-bg: var(--pill-suijd-bg);
    --article-card-hover-bg: rgba(245, 208, 0, 0.06);
    --article-rajas-color: var(--pill-rajas-fg);
    --article-rajas-border: var(--pill-rajas-border);
    --article-rajas-bg: var(--pill-rajas-bg);
    --scroll-top-border: var(--heading-surface-yellow);
    --scroll-top-stripe-a: #0a0a0a;
    --scroll-top-stripe-b: #141414;
    --scroll-top-inset: rgba(245, 208, 0, 0.2);
    --scroll-top-hover-inset-1: rgba(255, 42, 42, 0.35);
    --scroll-top-hover-glow: rgba(245, 208, 0, 0.07);
    --scroll-top-main-color: var(--title-color);
    --scroll-top-main-outline: #000;
    --scroll-top-glitch-c: var(--title-color);
    --scroll-top-glitch-m: #ff2a2a;
    --cta-gradient: linear-gradient(180deg, var(--scrollbar-brand-hi) 0%, color-mix(in srgb, var(--title-color) 76%, #65682e) 100%);
    --cta-gradient-alt: linear-gradient(180deg, #f5d000 0%, #c9a800 100%);
    --cta-fg: #0a0a0a;
    --cta-hover-shadow: rgba(245, 208, 0, 0.25);
    --copy-bg: #0a0a0a;
    --copy-fg: var(--title-color);
    --copy-hover-bg: #d3d66f;
    --copy-hover-fg: #0a0a0a;
    --copy-hover-glow: rgba(211, 214, 111, 0.18);
    --copy-success-bg: #f5d000;
    --copy-success-border: var(--heading-surface-yellow);
    --copy-success-fg: #0a0a0a;
    --email-input-shadow: rgba(245, 208, 0, 0.15);
    --footer-link-hover: var(--title-color);
    --footer-divider: var(--heading-surface-yellow);
    --star-rgb: 228, 236, 247;
    --footer-star-rgb: 245, 208, 0;
    --recording-play-triangle: #0a0a0a;
    background-color: var(--bg-color);
    color: var(--text-color);
}

body.meowlektron-ui::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: 0.05;
    background: url('assets/suijdi_bg.jpg') center / 520px auto no-repeat;
    filter: grayscale(1) contrast(1.15);
    z-index: 4;
}

body.meowlektron-ui::after {
    height: 35vh;
    background: linear-gradient(to top, rgba(245, 208, 0, 0.028), transparent);
    z-index: 6;
}

body.meowlektron-ui .bg-layer {
    opacity: 0.12;
    filter: grayscale(0.85) contrast(1.1);
}

body.meowlektron-ui .bg-layer::after {
    background: linear-gradient(
        165deg,
        rgba(255, 235, 120, 0.22) 0%,
        rgba(245, 208, 0, 0.14) 35%,
        rgba(120, 95, 20, 0.12) 55%,
        rgba(200, 180, 60, 0.16) 100%
    );
}

body.meowlektron-ui .noise-overlay {
    opacity: 0.1;
}

body.meowlektron-ui #star-canvas {
    opacity: 0.55;
}

body.meowlektron-ui .lang-switch:not(.lang-switch--in-bio-bar) {
    color: var(--title-color);
}

body.meowlektron-ui .lang-switch:not(.lang-switch--in-bio-bar) .lang-switch__btn {
    border-color: var(--heading-surface-yellow);
    background: rgba(28, 28, 32, 0.92);
    color: var(--title-color);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--title-color) 3%, transparent);
}

body.meowlektron-ui .lang-switch:not(.lang-switch--in-bio-bar) .lang-switch__btn:hover {
    border-color: var(--title-color);
    color: var(--title-color);
    background: rgba(38, 38, 44, 0.94);
}

body.meowlektron-ui .lang-switch:not(.lang-switch--in-bio-bar) .lang-switch__btn--active {
    border-color: var(--title-color);
    background: rgba(44, 44, 50, 0.96);
    color: var(--title-color);
    box-shadow: inset 0 1px 0 color-mix(in srgb, var(--title-color) 5%, transparent);
}

/* BIO bar: same inactive dark / active yellow as classic */
body.meowlektron-ui .lang-switch--in-bio-bar {
    color: #141414;
}

body.meowlektron-ui .lang-switch--in-bio-bar .lang-switch__btn {
    background: transparent;
    border-color: #141414;
    color: #141414;
    -webkit-text-fill-color: #141414;
    box-shadow: none;
}

body.meowlektron-ui .lang-switch--in-bio-bar .lang-switch__btn:hover:not(.lang-switch__btn--active) {
    background: #141414;
    border-color: #141414;
    color: #f5f5f5;
    -webkit-text-fill-color: #f5f5f5;
    opacity: 1;
}

body.meowlektron-ui .lang-switch--in-bio-bar #lang-nl:hover:not(.lang-switch__btn--active) {
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
}

body.meowlektron-ui .lang-switch--in-bio-bar #lang-en:hover:not(.lang-switch__btn--active) {
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
}

body.meowlektron-ui .lang-switch--in-bio-bar .lang-switch__btn--active {
    --lang-switch-active-fill: rgba(20, 20, 20, 0.92);
    background: var(--lang-switch-active-fill);
    border-color: var(--lang-switch-active-fill);
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    font-weight: 800;
    box-shadow: none;
}

body.meowlektron-ui .lang-switch--in-bio-bar .lang-switch__btn--active:hover {
    background: var(--lang-switch-active-fill);
    border-color: var(--lang-switch-active-fill);
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
}

body.meowlektron-ui .lang-switch--in-bio-bar .lang-switch__sep {
    color: #141414;
    -webkit-text-fill-color: #141414;
    opacity: 0.4;
}

body.meowlektron-ui h1 {
    letter-spacing: -7px;
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--title-color);
    text-shadow:
        1px 0 0 rgba(211, 214, 111, 0.06),
        -1px 0 0 rgba(211, 214, 111, 0.05),
        0 0 2px rgba(211, 214, 111, 0.05);
}

body.meowlektron-ui #main-title {
    line-height: 0.78;
    overflow: visible;
}

body.meowlektron-ui #main-title .main-title__line {
    background-color: transparent;
    background-image: var(--title-static-noise), linear-gradient(180deg, var(--title-color) 0%, var(--title-color) 100%);
    background-size: 64px 64px, 100% 100%;
    background-repeat: repeat, no-repeat;
    background-position: 0 0, center;
    background-blend-mode: soft-light, normal;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    text-shadow: none;
    filter: drop-shadow(0.5px 0 0 rgba(211, 214, 111, 0.28)) drop-shadow(-0.5px 0 0 rgba(211, 214, 111, 0.2))
        drop-shadow(0 0.5px 0 rgba(211, 214, 111, 0.16)) drop-shadow(0 0 1px rgba(211, 214, 111, 0.12));
}

body.meowlektron-ui h2 {
    letter-spacing: 0.35em;
    background: var(--title-color);
    color: #141414;
    text-shadow: none;
    -webkit-text-fill-color: #141414;
}

body.meowlektron-ui .recording-bar-heading {
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    text-shadow: none;
    filter: none;
}

body.meowlektron-ui .recording-bar {
    border: none;
    border-radius: 0;
    background: transparent;
    padding: 0.35rem 0 0.75rem;
}

body.meowlektron-ui .recording-item {
    border-radius: 0;
    backdrop-filter: none;
    border: 2px solid var(--title-color);
    background: #0a0a0a;
}

body.meowlektron-ui .recording-item--channel-more {
    border-color: var(--recording-channel-tile-accent);
    background: transparent;
}

body.meowlektron-ui .recording-item::after {
    border-radius: 0;
    background: rgba(245, 208, 0, 0.04);
    box-shadow: none;
}

body.meowlektron-ui .recording-item--channel-more::after {
    background: transparent;
    box-shadow: none;
}

body.meowlektron-ui .cta-button {
    border-radius: 0;
    border: 2px solid var(--heading-surface-yellow);
    background: linear-gradient(180deg, var(--scrollbar-brand-hi) 0%, color-mix(in srgb, var(--title-color) 74%, #6a6d2c) 100%);
    color: #141414;
    text-shadow: none;
    -webkit-text-fill-color: #141414;
    letter-spacing: 0.045em;
    box-shadow:
        0 1px 8px rgba(245, 208, 0, 0.1),
        inset 0 1px 0 color-mix(in srgb, var(--title-color) 65%, transparent);
}

body.meowlektron-ui .cta-button::before {
    display: none;
}

body.meowlektron-ui .cta-button:hover {
    background: #0a0a0a;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    border-color: var(--title-color);
    box-shadow: 0 0 10px rgba(211, 214, 111, 0.14);
}

body.meowlektron-ui .email-reveal {
    border: 2px solid var(--heading-surface-yellow);
    background: #0a0a0a;
    box-shadow: none;
    backdrop-filter: none;
}

body.meowlektron-ui .email-reveal.is-contact-rose-active,
body.meowlektron-ui .bio-email-reveal.is-contact-rose-active {
    border-color: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .email-reveal.is-contact-rose-active .copy-button,
body.meowlektron-ui .bio-email-reveal.is-contact-rose-active .copy-button {
    border-left-color: var(--selectie-indicatie-meow-color) !important;
    color: var(--selectie-indicatie-meow-color) !important;
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color) !important;
    background: transparent !important;
}

body.meowlektron-ui .email-reveal.is-contact-rose-active .copy-button.copied,
body.meowlektron-ui .bio-email-reveal.is-contact-rose-active .copy-button.copied {
    border-left-color: var(--selectie-indicatie-meow-color) !important;
    color: var(--selectie-indicatie-meow-color) !important;
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color) !important;
    background: transparent !important;
}

body.meowlektron-ui .header-contact-wrap #email-reveal.email-reveal.hidden {
    background: transparent;
    border-color: transparent;
}

body.meowlektron-ui #email-input {
    border-radius: 0;
    border: none;
    background: transparent;
    color: var(--title-color);
    backdrop-filter: none;
}

body.meowlektron-ui .email-reveal .copy-button {
    border: none;
    border-left: 2px solid var(--heading-surface-yellow);
    border-radius: 0;
    background: #0a0a0a;
    color: var(--title-color);
}

body.meowlektron-ui .email-reveal .copy-button:hover {
    background: #d3d66f;
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
}

body.meowlektron-ui .bio-email-reveal {
    border: 2px solid var(--heading-surface-yellow);
    background: #0a0a0a;
    box-shadow: none;
    backdrop-filter: none;
}

body.meowlektron-ui .bio-email-input {
    border: none;
    background: transparent;
    color: var(--title-color);
    backdrop-filter: none;
    font-size: clamp(0.95rem, 2.6vw, 1.12rem);
}

body.meowlektron-ui .bio-email-reveal .copy-button {
    border: none;
    border-left: 2px solid var(--heading-surface-yellow);
    border-radius: 0;
    background: #0a0a0a;
    color: var(--title-color);
}

body.meowlektron-ui .bio-email-reveal .copy-button:hover {
    background: #d3d66f;
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
}

body.meowlektron-ui .copy-button {
    border-radius: 0;
    border: 2px solid var(--heading-surface-yellow);
    background: #0a0a0a;
    color: var(--title-color);
}

body.meowlektron-ui .copy-button:hover {
    background: #1a1a12;
    color: var(--title-color);
}

body.meowlektron-ui .social-label {
    color: var(--title-color);
}

body.meowlektron-ui #social-nav-groups :is(a, button).social-link--header-tile {
    border-radius: 0;
    border: 2px solid var(--heading-surface-yellow);
    background: transparent;
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
}

body.meowlektron-ui #social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube'] {
    background: var(--text-color);
    border-color: var(--heading-surface-yellow);
    color: #141414;
    -webkit-text-fill-color: #141414;
}

body.meowlektron-ui #social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube']:hover {
    background: transparent;
    border-color: var(--heading-surface-yellow);
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    box-shadow: none;
    transform: none;
}

body.meowlektron-ui #social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube']:hover .social-link__icon svg {
    fill: #fe725f;
    stroke: #fe725f;
    color: #fe725f;
}

body.meowlektron-ui #social-nav-groups :is(a, button).social-link--header-tile.social-link--header-tile--flash-tint {
    background: transparent !important;
    border-color: #fe725f !important;
    color: #fe725f !important;
    -webkit-text-fill-color: #fe725f !important;
    box-shadow: none !important;
    transform: none !important;
}

body.meowlektron-ui #social-nav-groups :is(a, button).social-link--header-tile[data-platform='youtube'].social-link--header-tile--flash-tint {
    background: color-mix(in srgb, #fe725f 18%, transparent) !important;
    border-color: #fe725f !important;
    color: #fe725f !important;
    -webkit-text-fill-color: #fe725f !important;
}

body.meowlektron-ui #social-nav-groups :is(a, button).social-link--header-tile:hover:not([data-platform='youtube']) {
    background: var(--text-color);
    border-color: var(--heading-surface-yellow);
    color: #141414;
    -webkit-text-fill-color: #141414;
    transform: none;
    box-shadow: 0 4px 16px color-mix(in srgb, var(--text-color) 30%, transparent);
}

body.meowlektron-ui .section-title {
    background: color-mix(in srgb, var(--title-color) 92%, transparent);
    color: #141414;
    text-shadow: none;
    -webkit-text-fill-color: #141414;
    letter-spacing: 0.22em;
}

body.meowlektron-ui .section-title::before {
    background: #141414;
    width: 5.65rem;
    height: 10px;
}

body.meowlektron-ui .events-past-spacer {
    border-top-color: var(--heading-surface-yellow);
    opacity: 0.78;
}

body.meowlektron-ui .content-text {
    font-size: clamp(1.14rem, 3.15vw, 1.95rem);
    line-height: 1.55;
    color: var(--text-color);
    text-transform: none;
    font-weight: 400;
}

body.meowlektron-ui .bio-contact-line {
    font-size: clamp(0.95rem, 2.6vw, 1.12rem);
}

body.meowlektron-ui .bio-contact-line:hover {
    background: transparent;
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    border-color: var(--selectie-indicatie-meow-color);
    box-shadow: none;
    transform: none;
}

body.meowlektron-ui .bio-contact-line:hover .bio-contact-line__label {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .bio-contact-line:hover .bio-contact-line__sub--header {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    opacity: 0.88;
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header {
    background: color-mix(in srgb, var(--title-color) 94%, transparent);
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
    border: 2px solid var(--title-color);
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header .bio-contact-line__label {
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header .bio-contact-line__sub--header {
    color: #0a0a0a;
    -webkit-text-fill-color: #0a0a0a;
    opacity: 0.88;
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible {
    background: transparent;
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    border-color: var(--selectie-indicatie-meow-color);
    --header-contact-outline: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover .bio-contact-line__label,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible .bio-contact-line__label {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover .bio-contact-line__sub--header,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible .bio-contact-line__sub--header {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    opacity: 0.78;
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover .header-contact-icon-wrap,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible .header-contact-icon-wrap,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover .header-contact-mouse-wrap,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible .header-contact-mouse-wrap {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover .header-contact-vcr,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible .header-contact-vcr {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover::before,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:hover::after,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible::before,
body.meowlektron-ui .bio-contact-line.bio-contact-line--header:focus-visible::after {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .bio-projects {
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
    opacity: 0.95;
}

body.meowlektron-ui .bio-projects.bio-projects--hero {
    text-shadow: none;
    filter: none;
    opacity: 1;
}

body.meowlektron-ui .event-item:not(.event-item--future) {
    border-radius: 0;
    border: 2px solid var(--heading-surface-yellow);
    border-bottom: 2px solid var(--heading-surface-yellow);
    background: rgba(0, 0, 0, 0.25);
}

body.meowlektron-ui #past-events .event-item {
    border-color: currentColor;
    border-bottom-color: currentColor;
}

body.meowlektron-ui .event-item:not(.event-item--future):hover {
    transform: translateX(0);
    border-color: var(--heading-surface-yellow);
}

body.meowlektron-ui #past-events .event-item:hover {
    border-color: currentColor;
    border-bottom-color: currentColor;
}

body.meowlektron-ui #past-events a.event-item--linked:link,
body.meowlektron-ui #past-events a.event-item--linked:visited {
    color: #e4ecf7;
    -webkit-text-fill-color: #e4ecf7;
}

body.meowlektron-ui #past-events a.event-item--linked,
body.meowlektron-ui #past-events a.event-item--linked:hover {
    border-color: currentColor;
    border-bottom-color: currentColor;
}

body.meowlektron-ui .event-item--future {
    background: linear-gradient(
        155deg,
        color-mix(in srgb, var(--scrollbar-brand-hi) 77%, transparent) 0%,
        color-mix(in srgb, #e8d78a 77%, transparent) 55%,
        color-mix(in srgb, #d4c070 77%, transparent) 100%
    );
    border: 2px solid var(--heading-surface-yellow);
    border-bottom: 2px solid var(--heading-surface-yellow);
    color: #1a1408;
}

body.meowlektron-ui .event-item--future:hover {
    border-color: var(--heading-surface-yellow);
    filter: brightness(1.03);
}

body.meowlektron-ui .event-item--future .event-date-year,
body.meowlektron-ui .event-item--future .event-date-md {
    color: #5a4500;
}

body.meowlektron-ui .event-item--future .event-date-md {
    font-size: clamp(0.82rem, 2.1vw, 0.98rem);
}

body.meowlektron-ui .event-date-day--inverted {
    background: none;
    color: inherit;
    -webkit-text-fill-color: inherit;
}

body.meowlektron-ui .event-item--future .event-name {
    font-size: clamp(1.32rem, 3.35vw, 1.72rem);
    color: #141006;
}

body.meowlektron-ui .event-item--future .event-region-tag {
    color: #141414;
    -webkit-text-fill-color: #141414;
    background: var(--title-color);
    border: 2px solid var(--heading-surface-yellow);
}

body.meowlektron-ui #future-events .event-more-hint {
    color: var(--title-color);
    -webkit-text-fill-color: var(--title-color);
}

body.meowlektron-ui #past-events .event-more-hint {
    color: #e4ecf7;
    -webkit-text-fill-color: #e4ecf7;
}

body.meowlektron-ui .event-item--future .event-venue {
    font-size: 0.8rem;
    letter-spacing: 0.004em;
    color: rgba(20, 16, 6, 0.88);
}

body.meowlektron-ui .event-item--future .event-desc {
    color: rgba(26, 20, 8, 0.85);
    text-transform: none;
}

body.meowlektron-ui .event-date {
    color: var(--title-color);
    font-size: 0.85rem;
}

body.meowlektron-ui .event-location {
    font-size: clamp(0.88rem, 2.15vw, 1.08rem);
    letter-spacing: 0.006em;
}

body.meowlektron-ui #past-events .event-location-row .event-venue.event-venue--past {
    font-size: clamp(0.74rem, 1.9vw, 0.94rem);
}

body.meowlektron-ui .event-desc {
    color: var(--title-color);
    text-transform: none;
}

body.meowlektron-ui .article-card {
    border-radius: 0;
    border: 2px solid var(--heading-surface-yellow);
    background: transparent;
    padding: 1.2rem 1.15rem 1.05rem;
    gap: 0.65rem;
}

/* Meowlektron: keep the same “rose-pink all borders” rule during hash blink */
body.meowlektron-ui .article-card.is-article-card-blinking {
    border-color: var(--selectie-indicatie-meow-color);
}
body.meowlektron-ui .article-card.is-article-card-blinking .article-card__label,
body.meowlektron-ui .article-card.is-article-card-blinking .article-label {
    border-color: var(--selectie-indicatie-meow-color) !important;
}

/* Meowlektron: override higher-specificity yellow ink during hash blink */
body.meowlektron-ui .article-card.is-article-card-blinking h4,
body.meowlektron-ui .article-card.is-article-card-blinking .article-excerpt__plain,
body.meowlektron-ui .article-card.is-article-card-blinking .article-readmore,
body.meowlektron-ui .article-card.is-article-card-blinking .article-readmore__source,
body.meowlektron-ui .article-card.is-article-card-blinking .article-readmore__host,
body.meowlektron-ui .article-card.is-article-card-blinking .article-readmore__url,
body.meowlektron-ui .article-card.is-article-card-blinking .article-readmore__meta,
body.meowlektron-ui .article-card.is-article-card-blinking .article-readmore__sep,
body.meowlektron-ui .article-card.is-article-card-blinking .article-excerpt-wrap::before,
body.meowlektron-ui .article-card.is-article-card-blinking .article-excerpt-wrap::after,
body.meowlektron-ui .article-card.is-article-card-blinking .article-card__label,
body.meowlektron-ui .article-card.is-article-card-blinking .article-label {
    color: var(--selectie-indicatie-meow-color);
    -webkit-text-fill-color: var(--selectie-indicatie-meow-color);
    text-decoration-color: var(--selectie-indicatie-meow-color);
}

body.meowlektron-ui .article-card__label {
    max-width: calc(100% - 1.1rem);
}

body.meowlektron-ui .article-card h4 {
    font-size: clamp(1.35rem, 3.6vw, 2.2rem);
    line-height: 1.02;
    margin: clamp(0.35rem, 1.1vw, 0.55rem) 0 0.25rem;
    color: var(--title-color);
    max-width: 100%;
    min-width: 0;
    width: 100%;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: none;
    -webkit-hyphens: none;
    letter-spacing: 0.03em;
}

body.meowlektron-ui .article-excerpt {
    color: var(--title-color);
    font-size: 0.82rem;
    mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.35rem), transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 calc(100% - 1.35rem), transparent 100%);
}

body.meowlektron-ui .article-readmore {
    color: var(--title-color);
}

body.meowlektron-ui footer {
    background: #000;
    border-top: none;
    color: var(--title-color);
    text-shadow: var(--led-text-shadow-core), var(--led-text-shadow-bloom);
}

body.meowlektron-ui #footer-canvas {
    opacity: 0.22;
}

body.meowlektron-ui .footer-stream-label,
body.meowlektron-ui .footer-actions-label,
body.meowlektron-ui .footer-below-follow-heading,
body.meowlektron-ui .footer-contact-heading {
    color: var(--title-color);
}

body.meowlektron-ui .footer-socials a.social-link {
    color: #141414;
    -webkit-text-fill-color: #141414;
    border-radius: 0;
    border: 2px solid var(--heading-surface-yellow);
    background: var(--title-color);
    box-shadow: none;
    opacity: 1;
}

body.meowlektron-ui .footer-socials a.social-link:hover {
    background: transparent;
    border-color: transparent;
    color: var(--text-color);
    -webkit-text-fill-color: var(--text-color);
    box-shadow: none;
    opacity: 0.82;
}

body.meowlektron-ui .footer-col--actions {
    border-left-color: var(--footer-divider);
}

body.meowlektron-ui .scroll-top-bar {
    border-top-color: var(--heading-surface-yellow);
    border-bottom: none;
}

@media (max-width: 768px) {
    body.meowlektron-ui #main-title {
        line-height: 0.78;
    }

    body.meowlektron-ui .content-text {
        font-size: 1.34rem;
    }
}