/* --- Self-hosted Roboto (latin-ext covers German umlauts) --- */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/roboto-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- Variables -------------------------------------------- */
:root {
    --bg:      #111210;
    --text:    #f0eeeb;
    --accent:  #a9a49b;
    --border:  rgba(169, 164, 155, 0.2);
    --hover-bg: #2e4a5c;
    --link:    #a9a49b;
    --font:    'Roboto', Arial, Helvetica, sans-serif;
}

/* --- Reset & Base ----------------------------------------- */
*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background: #111210;
}

body {
    font-family: var(--font);
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 0.05em;
    background-color: #9a9a9a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%);
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100%;
    opacity: 1;
    color: var(--text);
    overflow: hidden;
    height: 100vh;
    height: 100dvh;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    background: url('MNNN 2.jpg') center / cover no-repeat;
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}




a {
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    text-decoration: none;
    border-bottom: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    transition: color 0.2s;
}
a:hover {
    color: rgba(40,40,40,0.65);
    border-color: var(--accent);
}

/* --- Mini-player (fixed top, visible when streaming) ------ */
.mini-player {
    position: fixed;
    top: -60px;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 16px;
    background-color: #9a9a9a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%);
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100%;
    pointer-events: none;
    transition: top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.mini-player::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #888;
    opacity: 0.5;
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.45);
}
.mini-player.is-visible {
    top: 0;
    pointer-events: auto;
}
body:has(.timeline:hover) .mini-player.is-visible {
    top: -30px;
}
body:has(.mini-player.is-visible) #section-plus > .drawer-section-toggle {
    padding-top: 36px;
}
.mini-now-playing-wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.mini-now-playing-label {
    font-size: 9px;
    font-family: var(--font);
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    white-space: nowrap;
}
.mini-now-playing {
    font-size: 9px;
    font-family: var(--font);
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(40,40,40,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 240px;
}
.mini-play-btn {
    width: 8.5px;
    height: 8.5px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: transform 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.35)) drop-shadow(0 -1px 1px rgba(0,0,0,0.45));
}
.mini-play-btn:active { transform: scale(0.95); }
.mini-play-icon {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 3.8px 0 3.8px 6.6px;
    border-color: transparent transparent transparent rgba(60,60,60,0.7);
    transition: border-color 0.2s;
}
.mini-play-btn:hover .mini-play-icon {
    border-color: transparent transparent transparent rgba(60,60,60,1);
}
.mini-pause-icon {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 1.9px;
    width: 8.5px;
    height: 8.5px;
}
.mini-pause-icon span {
    width: 1.9px;
    height: 6.6px;
    background: rgba(60,60,60,0.7);
    transition: background 0.2s;
}
.mini-play-btn:hover .mini-pause-icon span {
    background: rgba(60,60,60,1);
}
.mini-player.is-playing .mini-play-icon  { display: none; }
.mini-player.is-playing .mini-pause-icon { display: flex; }

/* "Now Playing" mini-player: show an X instead of the pause bars */
#miniPlayer .mini-pause-icon {
    position: relative;
}
#miniPlayer .mini-pause-icon span {
    display: none;
}
#miniPlayer .mini-pause-icon::before,
#miniPlayer .mini-pause-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1.5px;
    background: rgba(60,60,60,0.7);
    transition: background 0.2s;
}
#miniPlayer .mini-pause-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#miniPlayer .mini-pause-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
#miniPlayer .mini-play-btn:hover .mini-pause-icon::before,
#miniPlayer .mini-play-btn:hover .mini-pause-icon::after {
    background: rgba(255,255,255,0.9);
}

/* Pin the play/pause (X) button to the right edge of the bar */
#miniPlayer .mini-play-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
#miniPlayer .mini-play-btn:active {
    transform: translateY(-50%) scale(0.95);
}
#miniPlayer .mini-now-playing-wrap {
    margin: 0 auto;
}

/* --- Mixtape mini-player (fixed top, full-width, slides down while a mixtape plays) --- */
.mixtape-mini-player {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 500;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 8px 40px 8px 16px;
    background-color: #9a9a9a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%);
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100%;
    pointer-events: none;
    transform: translateY(-100%);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.mixtape-mini-player::before {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #888;
    opacity: 0.5;
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.45);
}
.mixtape-mini-player.is-visible {
    transform: translateY(0);
    pointer-events: auto;
}
body:has(.timeline:hover) .mixtape-mini-player.is-visible {
    transform: translateY(-100%);
}
.mixtape-mini-player .mini-now-playing-wrap {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}
.mixtape-mini-player .mini-now-playing-label {
    font-size: 9px;
    letter-spacing: 0.3em;
    color: rgba(0,0,0,0.85);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    transition: color 0.2s;
}
.mixtape-mini-player .mini-now-playing-wrap:hover .mini-now-playing-label {
    color: rgba(0,0,0,0.4);
}
.mixtape-mini-player .mini-now-playing {
    flex: 1;
    min-width: 0;
    max-width: none;
    letter-spacing: 0.3em;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}
.mixtape-mini-scrub {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    max-width: 480px;
}
.mixtape-mini-scrub .archive-seek {
    flex: 1;
}
.mixtape-mini-scrub .archive-seek::-webkit-slider-thumb {
    width: 1.5px;
    height: 6px;
    border-radius: 0;
    background: rgba(60,60,60,0.7);
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.45);
}
.mixtape-mini-scrub .archive-seek::-moz-range-thumb {
    width: 1.5px;
    height: 6px;
    border-radius: 0;
    background: rgba(60,60,60,0.7);
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.45);
}
.mixtape-mini-scrub .archive-seek:hover::-webkit-slider-thumb {
    transform: none;
}
.mixtape-mini-scrub .archive-time {
    flex-shrink: 0;
    font-size: 9px;
    letter-spacing: 0.1em;
}
.mixtape-mini-player.is-playing .mini-play-icon  { display: none; }
.mixtape-mini-player.is-playing .mini-pause-icon { display: flex; }

/* Square "stop" button — closes the mixtape mini-player entirely */
.mini-stop-btn {
    width: 8.5px;
    height: 8.5px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.35)) drop-shadow(0 -1px 1px rgba(0,0,0,0.45));
}
.mini-stop-btn:active { transform: scale(0.95); }

/* Pin the stop (X) button to the right edge of the mixtape mini-player bar */
#mixtapeMiniPlayer .mini-stop-btn {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}
#mixtapeMiniPlayer .mini-stop-btn:active {
    transform: translateY(-50%) scale(0.95);
}
.mini-stop-icon {
    position: relative;
    width: 8px;
    height: 8px;
}
.mini-stop-icon::before,
.mini-stop-icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 9px;
    height: 1.5px;
    background: rgba(60,60,60,0.7);
    transition: background 0.2s;
}
.mini-stop-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
}
.mini-stop-icon::after {
    transform: translate(-50%, -50%) rotate(-45deg);
}
.mini-stop-btn:hover .mini-stop-icon::before,
.mini-stop-btn:hover .mini-stop-icon::after {
    background: rgba(255,255,255,0.9);
}

/* --- Page loader overlay ---------------------------------- */
#page-loader {
    position: fixed;
    inset: 0;
    background: #111210;
    z-index: 9999;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}
#page-loader.done {
    opacity: 0;
}

/* --- Canvas: horizontal row of columns -------------------- */
.canvas {
    display: flex;
    height: 100vh;
    height: 100dvh;
    width: 100%;
    overflow-anchor: none;
    overflow-x: auto;
    overflow-y: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
    background-color: #9a9a9a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%);
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100%;
    background-attachment: local;
    background-position:
        0px var(--bg-y, 0px),
        0px var(--bg-y, 0px),
        0px var(--bg-y, 0px),
        0px 0px,
        0px 0px;
    /* Hide scrollbar on all browsers */
    scrollbar-width: none;        /* Firefox */
    -ms-overflow-style: none;     /* IE / Edge legacy */
}
.canvas::-webkit-scrollbar {
    display: none;                /* Chrome / Safari / Android WebView */
}
.canvas.is-ready {
    opacity: 1;
}

/* --- 1. INFO (first column) ------------------------------- */
.khk-office-address {
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding: 0 16px 1px;
    font-family: var(--font);
    font-size: 12px;
    letter-spacing: 0.15em;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    white-space: nowrap;
}

.info-column {
    width: 500px;
    min-width: 400px;
    height: 100%;
    flex-shrink: 0;
    margin-left: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px;
    gap: 24px;
    background-color: rgba(17, 18, 16, 0.7);
    background-image: none;
    color: #888580;
    position: relative;
    z-index: 1;
}

.info-text {
    font-size: 14px;
    letter-spacing: 0.1em;
    line-height: 1.8;
    color: #888580;
    opacity: 1;
    overflow-y: auto;
}

.info-text a {
    color: #888580;
    border-bottom-color: rgba(136, 133, 128, 0.3);
}

.info-text a:hover {
    color: #ffffff;
    border-bottom-color: #ffffff;
}

/* --- 0. KHK (slideshow column) ----------------------------- */
.khk-slideshow-column {
    width: 550px;
    min-width: 550px;
    flex-shrink: 0;
    height: 100%;
    overflow: hidden;
    position: relative;
    background: transparent;
    display: flex;
    flex-direction: column;
    padding: 15px;
}
body:has(.mini-player.is-visible) .khk-slideshow-column {
    padding-top: 45px;
}

.khk-slideshow {
    position: relative;
    width: 100%;
    flex: 1;
}

.khk-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.4s ease;
    filter: grayscale(1);
}

.khk-slide.is-active {
    opacity: 1;
}

.khk-slideshow::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #cdcdcd;
    opacity: 0.7;
    pointer-events: none;
    z-index: 1;
}

.khk-slide-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    background: none;
    border: none;
    cursor: pointer;
    font-family: var(--font);
    font-size: 28px;
    line-height: 1;
    padding: 8px 12px;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.6;
    transition: opacity 0.2s;
}
.khk-slide-nav:hover {
    opacity: 1;
}
.khk-slide-prev { left: 0; }
.khk-slide-next { right: 0; }

/* --- 2. BACKSTAGE (rolodex people browser) ---------------- */
.backstage-column {
    width: 720px;
    min-width: 720px;
    flex-shrink: 0;
    margin-left: 0;
    display: flex;
    flex-direction: row;
    height: 130vh;
    height: 130dvh;
    align-self: center;
    overflow: hidden;
    background: transparent;
}

.backstage-rolodex {
    width: 320px;
    height: 100%;
    position: relative;
    overflow-x: visible;
    overflow-y: hidden;
    flex-shrink: 0;
    background: transparent;
    padding-left: 0;
    padding-right: 30px;
}

.backstage-card-strip {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.backstage-card {
    outline: none;
    padding: 0;
    font-size: 11px;
    font-weight: 400;
    font-family: var(--font);
    letter-spacing: 2px;
    line-height: 20px;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
    color: rgba(0,0,0,0.45);
    opacity: 1;
    transform-origin: left center;
    transition: all 0.28s ease;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}

.backstage-card.active {
    opacity: 1;
    color: rgba(40,40,40,0.65);
    position: relative;
    padding-left: 16px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}

.backstage-card.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: calc(50% - 1px);
    transform: translateY(-50%);
    border-style: solid;
    border-width: 4px 0 4px 7px;
    border-color: transparent transparent transparent rgba(0,0,0,0.9);
    filter: none;
    animation: backstage-triangle-in 0.4s ease-out;
}

@keyframes backstage-triangle-in {
    0% {
        transform: translateY(-50%) translateX(0);
        opacity: 0;
    }
    40% {
        transform: translateY(-50%) translateX(-10px);
        opacity: 1;
    }
    100% {
        transform: translateY(-50%) translateX(0);
        opacity: 1;
    }
}

.backstage-detail {
    flex: 1;
    padding: 0 40px 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    background: transparent;
    position: relative;
    line-height: 18px;
}

.backstage-detail-inner {
    flex: none;
    width: 280px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.backstage-detail h3 {
    display: none;
}

.backstage-detail p {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 1.5px;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
}

.backstage-detail a {
    font-size: 13px;
    text-transform: none;
    letter-spacing: 1.5px;
    opacity: 0.5;
    color: inherit;
    border-bottom: none;
}

.backstage-detail a:hover {
    opacity: 1;
    color: var(--text);
    border-bottom: none;
}

/* Bio wrapper — top is set by JS (goTo) to align its vertical center with
   the focused name in the rolodex; 50% is just the pre-JS fallback */
.backstage-bio-wrapper {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    transform: translateY(-50%);
}
.backstage-bio > div > p:first-child,
.backstage-bio > div > *:first-child {
    margin-top: 0;
}

/* Scroll in each biography as it becomes the active one */
.backstage-bio {
    animation: backstage-bio-scroll 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@keyframes backstage-bio-scroll {
    from { transform: translateY(18px); opacity: 0; }
    to   { transform: translateY(0);    opacity: 1; }
}

/* Per-person tags — text alignment */
.backstage-person-tags {
    text-align: right;
}

/* --- BACKSTAGE FILTER COLUMN (search + tags, after biographies) --- */
.backstage-filter-column {
    width: 250px;
    min-width: 250px;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    background: transparent;
}
.person-tag-category {
    display: block;
    margin-bottom: 6px;
}
.person-tag-cat-label {
    display: block;
    font-size: 9px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #9a9a9a;
    opacity: 0.7;
    margin-bottom: 3px;
}
.person-tag-btn {
    display: block;
    margin-left: auto;
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.55;
    padding: 2px 0;
    cursor: pointer;
    text-align: right;
    transition: opacity 0.2s, color 0.2s;
}
.person-tag-btn:hover {
    opacity: 1;
}
.person-tag-btn.active {
    opacity: 1;
    color: rgba(40,40,40,0.75);
}

/* Search row — sits below A-Z */
.backstage-search-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    gap: 6px;
}
.backstage-search-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Meta column — search input + item count */
.backstage-meta-column {
    width: 200px;
    min-width: 200px;
    flex-shrink: 0;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 24px;
}
.backstage-az-triangle-column {
    display: none;
}

/* A-Z triangle column — hidden, ALL button moved to meta column */
.backstage-az-triangle-column {
    display: none;
}
.backstage-az-triangle-column .backstage-az-btn--all {
    font-size: 11px;
    flex-basis: auto;
    margin-top: 0;
    margin-bottom: 1px;
    letter-spacing: 4px;
    transition: color 0.15s, text-shadow 0.15s;
}
.backstage-az-triangle-column .backstage-az-btn--all:hover {
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}

/* A-Z column */
.backstage-search-column {
    width: 100px;
    min-width: 100px;
    flex-shrink: 0;
    height: 100%;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 0 0 24px;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
    mask-image: linear-gradient(to bottom, transparent 0%, black 25%, black 75%, transparent 100%);
}
.backstage-az-row {
    transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1);
    will-change: transform;
}

/* Per-person tags — aligned with the Streams row in the clock column */
.backstage-filter-column .backstage-person-tags {
    position: absolute;
    top: calc(50% + 220px);
    left: 0;
    right: 40px;
    max-height: calc(50% - 220px);
    overflow-y: auto;
}

.backstage-search-triangle {
    font-size: 8px;
    color: rgba(0,0,0,0.9);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 1;
    flex-shrink: 0;
    line-height: 1;
    margin-left: 3px;
}

.backstage-item-count {
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-block;
    overflow: hidden;
}

.backstage-search {
    background: transparent;
    border: none;
    color: rgba(40,40,40,0.65);
    caret-color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    font-family: var(--font);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 0 6px 3px;
    width: 100%;
    outline: none;
    opacity: 1;
}
.backstage-search-wrap {
    position: relative;
    border-bottom: 1px solid rgba(136,136,136,0.5);
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.45);
    min-width: 150px;
}

.backstage-blink-cursor {
    position: absolute;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 11px;
    background: #888;
    box-shadow: 1px 0 1px rgba(255,255,255,0.35), -1px 0 1px rgba(0,0,0,0.45);
    pointer-events: none;
    animation: bs-cursor-blink 1s step-end infinite;
}

@keyframes bs-cursor-blink {
    0%, 100% { opacity: 0.65; }
    50% { opacity: 0; }
}

/* When focused, the search field reads like the active item in the
   backstage rolodex: brighter text + a lit-up triangle marker. */
.backstage-search-row:has(.backstage-search:focus) .backstage-search {
    color: var(--text);
}
.backstage-search-row:has(.backstage-search:focus) .backstage-search-triangle {
    color: rgba(50,50,50,0.4);
    opacity: 1;
}

/* Hidden cards (filtered out) */
.backstage-card.bs-hidden {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0 !important;
    pointer-events: none;
}

/* --- BACKSTAGE A-Z ROW (vertical, centered) ------------ */
.backstage-az-row {
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    width: 100%;
}
.backstage-az-btn {
    outline: none;
    font-family: var(--font);
    font-size: 11px;
    line-height: 18px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: rgba(0,0,0,0.25);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
    padding: 1px 3px;
    cursor: pointer;
    transition: opacity 0.15s, color 0.15s;
}
.backstage-az-btn--all {
    opacity: 0.3;
    padding: 0;
    display: inline-flex;
    align-items: center;
    margin-top: 0;
    font-size: 12px;
    transition: opacity 0.2s ease, color 0.2s ease, text-shadow 0.2s ease;
}
.backstage-az-btn--all:hover,
.backstage-az-btn--all.active:hover {
    opacity: 1;
    color: rgba(180,180,180,0.9);
    text-shadow: 0 1px 0 rgba(255,255,255,0.5), 0 -1px 0 rgba(0,0,0,0.2);
}
.backstage-az-btn--all:hover .backstage-az-all-tri {
    border-right-color: rgba(40,40,40,0.9);
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.5)) drop-shadow(0 -1px 0 rgba(0,0,0,0.3));
}
.backstage-az-btn--all.active {
    opacity: 0.65;
    color: inherit;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
.backstage-az-all-tri {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 6px 4px 0;
    border-color: transparent rgba(40,40,40,0.65) transparent transparent;
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35)) drop-shadow(0 -1px 0 rgba(0,0,0,0.2));
}
.backstage-az-btn:hover { color: rgba(0,0,0,0.7); }
.backstage-az-btn.active { color: rgba(0,0,0,0.9); text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.15); }

/* --- BACKSTAGE TAG COLUMN (own column after search) ----------- */
.backstage-tags-column {
    width: 200px;
    min-width: 160px;
    flex-shrink: 0;
    height: 100%;
    position: relative;
}
.backstage-global-tags {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 20px;
    right: 32px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    max-height: 97%;
    overflow-y: auto;
}
body:has(#miniPlayer.is-visible) .backstage-global-tags {
    transform: translateY(calc(-50% + 5px));
}
.bs-tag-btn {
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 0.4;
    padding: 1px 3px;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.15s, color 0.15s;
    white-space: nowrap;
}
.bs-tag-btn:hover { opacity: 1; color: rgba(0,0,0,0.7); }
.bs-tag-btn.bs-match { opacity: 0.65; }
.bs-tag-btn.active { opacity: 1; color: rgba(0,0,0,0.9); text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12); }

/* --- 3. DRAWERS (collapsible show panels) ----------------- */
.drawers {
    display: flex;
    height: 100%;
    width: max-content;
    flex-shrink: 0;
    position: relative;
}

.drawer-section {
    display: flex;
    height: 100%;
    flex-shrink: 0;
}

.drawer-section-drawers {
    display: flex;
    height: 100%;
    flex-shrink: 0;
    overflow: hidden;
    max-width: 0;
    transition: max-width 0.7s cubic-bezier(0.5, 0, 0.75, 0);
}

.drawer-section.is-open > .drawer-section-drawers {
    max-width: 4000px;
    transition: max-width 2.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Each drawer = a thin "spine" + a hidden panel */
.drawer {
    display: flex;
    height: 100%;
    overflow: hidden;
}

/* The clickable spine (vertical tab) */
.drawer-spine {
    position: relative;
    width: 56px;
    height: 100%;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: rgba(60,60,60,0.8);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 5px;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(-0.7px);
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font);
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 2px;
    opacity: 1;
    transition: opacity 0.25s ease, color 0.25s ease, background-color 0.6s ease;
    padding: 15px 15px 15px 15px;
    box-sizing: border-box;
    appearance: none;
    -webkit-appearance: none;
    outline: none;
}

/* Separator line on the right only */
.drawer-spine::after {
    content: "";
    position: absolute;
    right: 0;
    top: 5px;
    bottom: 5px;
    width: 1px;
    background: var(--border);
}

.drawer-spine:hover {
    opacity: 1;
    background: rgba(60,60,60,0.15);
    color: rgba(60,60,60,0.8);
}

.drawer-spine .spine-title {
    display: block;
    font-weight: 400;
    letter-spacing: 2.5px;
    line-height: 1;
    color: rgba(40,40,40,0.75);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.9;
}

.drawer-spine .spine-subtitle {
    display: block;
    font-size: 0.7em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1.5px;
    pointer-events: none;
    color: rgba(40,40,40,0.75);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.8;
}

/* Now playing static spine */
.now-playing-spine {
    position: relative;
    width: 80px;
    height: 100%;
    flex-shrink: 0;
    background: transparent;
    border: 0;
    color: var(--text);
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    writing-mode: horizontal-tb;
    transform: none;
    white-space: nowrap;
    text-transform: uppercase;
    font-family: var(--font);
    font-weight: 400;
    font-size: 12px;
    letter-spacing: 0;
    padding: 15px 20px 15px 32px;
    box-sizing: border-box;
}
body:has(#miniPlayer.is-visible) .now-playing-spine {
    display: flex;
}

.now-playing-spine::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #888;
    opacity: 0.5;
    box-shadow: 1px 0 1px rgba(255,255,255,0.35), -1px 0 1px rgba(0,0,0,0.45);
}

.now-playing-spine .spine-title {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 3px;
    line-height: 1.6;
    color: rgba(40,40,40,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    text-align: center;
}

.now-playing-spine .spine-subtitle {
    display: block;
    font-size: 0.7em;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}

@keyframes blink-on-air {
    0%, 49% { opacity: 1; }
    50%, 100% { opacity: 0; }
}
.np-blink-black {
    color: #c8c7c0 !important;
    animation: blink-on-air 1.2s step-start infinite;
}

.now-playing-spine.is-on-air .spine-subtitle {
    animation: blink-on-air 1.2s step-start infinite;
    color: #ffffff;
}

/* Close button — sticky at top-right of the open panel */
.drawer-close-wrap {
    position: sticky;
    top: 0;
    z-index: 20;
    height: 0;
    overflow: visible;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
}
.drawer-close {
    pointer-events: auto;
    margin-top: 35px;
    margin-right: 30px;
    background: none;
    border: none;
    font-family: var(--font);
    font-size: 30px;
    line-height: 1;
    color: rgba(0,0,0,0.25);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    cursor: pointer;
    padding: 4px 6px;
    opacity: 0;
    transition: opacity 0.25s ease, color 0.2s ease, margin-top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.drawer.is-open .drawer-close {
    opacity: 1;
}
.drawer-close:hover {
    color: rgba(0,0,0,0.7);
    text-shadow: none;
}
body:has(.mini-player.is-visible) .drawer-close,
body:has(.mixtape-mini-player.is-visible) .drawer-close {
    margin-top: 65px;
}

/* The expandable panel content */
.drawer-panel {
    position: relative;
    width: 0;
    overflow: hidden;
    opacity: 0;
    background-color: #9a9a9a;
    transition: opacity 0.3s ease;
}

/* When the drawer is open */
.drawer.is-open .drawer-panel {
    width: 650px;
    opacity: 1;
    overflow-y: auto;
    margin-right: 40px;
    box-shadow: inset 2px 0 4px -4px rgba(0,0,0,0.8);
    transition: opacity 0.3s ease;
}

#section-guests .drawer.is-open .drawer-panel,
.drawer--network.is-open .drawer-panel {
    max-width: 480px;
    width: 100%;
    background-color: #9a9a9a;
}
#section-guests .drawer-content,
.drawer--network .drawer-content {
    max-width: 480px;
    width: 100%;
}

.drawer--archiv .drawer-panel {
    background-color: #9a9a9a;
}
.drawer--archiv.is-open .drawer-panel {
    width: calc(100vw - 56px);
}
.drawer--archiv .drawer-content {
    width: calc(100vw - 56px);
}
.drawer--sound.is-open .drawer-panel {
    width: calc(100vw - 56px);
}
.drawer--sound .drawer-content {
    width: 100%;
    padding-left: 100px;
    padding-right: 100px;
    box-sizing: border-box;
}

.drawer-section-drawers .drawer-spine {
    font-size: 13px;
    color: #A4A7B7;
    background: rgba(255, 255, 255, 0.04);
    justify-content: flex-end;
}
.drawer-section-drawers .drawer-spine .spine-subtitle {
    color: #ffffff;
}
.drawer-section-drawers .drawer-spine:hover {
    background: rgba(60,60,60,0.15);
    color: rgba(60,60,60,0.8);
}

/* Inside #section-plus: all drawers styled as main drawers with engraving */
#section-plus .drawer-spine {
    color: rgba(40,40,40,0.65);
    background: transparent;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
#section-plus .drawer-spine .spine-title {
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
#section-plus .drawer-spine .spine-subtitle {
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
#section-plus .drawer-spine:hover {
    background: rgba(60,60,60,0.15);
    color: rgba(60,60,60,0.8);
}
#section-plus .drawer-section-drawers .drawer-spine {
    color: rgba(0,0,0,0.5);
    background: transparent;
    font-size: 13px;
    letter-spacing: 2px;
    width: 56px;
    writing-mode: vertical-rl;
    transform: rotate(180deg) translateX(-0.7px);
    justify-content: flex-end;
}
#section-plus .drawer-section-drawers .drawer-spine .spine-title {
    color: rgba(0,0,0,0.5);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
#section-archive .drawer-section-drawers .drawer-spine {
    color: rgba(0,0,0,0.5) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    justify-content: flex-end;
}
#section-archive .drawer-section-drawers .drawer-spine .spine-title {
    color: rgba(0,0,0,0.5) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}

.drawer.is-open .drawer-spine {
    color: #0000ff;
    text-shadow: none;
}
.drawer.is-open .drawer-spine .spine-title {
    color: #0000ff;
    text-shadow: none;
}
.drawer.is-open .drawer-spine .spine-subtitle {
    color: #c8c7c0;
}
#section-plus > .drawer-section-toggle {
    width: 300px;
    justify-content: flex-start;
    align-items: flex-end;
    writing-mode: horizontal-tb;
    transform: none;
    letter-spacing: 4px;
    font-size: 80px;
}
#section-plus > .drawer-section-toggle::after {
    display: none;
}
#section-plus > .drawer-section-toggle .spine-title {
    position: relative;
    top: 20px;
}
#section-plus.is-open > .drawer-section-toggle {
    width: 100vw;
    justify-content: center;
    padding: 0;
    background-color: rgba(50,50,50,0.15);
}
#section-plus.is-open > .drawer-section-toggle:hover {
    background-color: rgba(50,50,50,0.08);
}

.drawer-section.is-open .drawer-section-toggle {
    color: #0000ff;
    background-color: rgba(40,40,40,0.75);
    text-shadow: none;
}

.drawer-section.is-open .drawer-section-toggle .spine-title {
    color: #0000ff;
    text-shadow: none;
}

#section-plus .drawer-section.is-open > .drawer-section-toggle {
    color: rgba(50,50,50,0.5);
    background-color: rgba(50,50,50,0.12);
    text-shadow: none;
}
#section-plus .drawer-section.is-open > .drawer-section-toggle .spine-title {
    color: rgba(50,50,50,0.5);
}

/* When a sub-drawer is open, keep sibling spines visible (collapsed, spine-only) */
.drawer-section.has-open-drawer > .drawer-section-drawers > .drawer:not(.is-open),
.drawer-section.has-open-drawer > .drawer-section-drawers > .drawer-section:not(.is-open) {
    display: flex;
}

/* Sub-drawer spines — dark grey highlight on hover */
#section-plus .drawer-section-drawers .drawer .drawer-spine:hover {
    background: rgba(60,60,60,0.15);
    color: rgba(60,60,60,0.8);
}

/* Section tabs (Infrastructure, Publications, Seminars, etc.) — same hover */
#section-plus .drawer-section-drawers .drawer-section-toggle:hover {
    background: rgba(60,60,60,0.15);
    color: rgba(60,60,60,0.8);
}

/* Visited sub-drawer spines — dimmed with red subtitle */
.drawer-section-drawers .drawer.visited:not(.is-open) .drawer-spine {
    opacity: 0.4;
}
.drawer-section-drawers .drawer.visited:not(.is-open) .spine-subtitle {
    color: rgba(40,40,40,0.75);
    opacity: 1;
}

.drawer-content h3 {
    font-size: 0.7rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    opacity: 0.5;
    margin-top: 8px;
}

.drawer-content {
    width: 640px;
    padding: 100px 100px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}

.drawer-content a,
.drawer-content a:visited {
    font-size: 11px !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    color: rgba(0,0,0,0.45) !important;
    border-bottom: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12) !important;
}
.drawer-content a:hover {
    color: rgba(40,40,40,0.65) !important;
    border-bottom: none !important;
}

.drawer-content h2 {
    font-size: 1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.12em;
}
#drawer-information .drawer-content h2 {
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}

#section-guests .drawer-content h2 {
    font-weight: 600;
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}

#section-guests .drawer-content,
#section-guests .drawer-content * {
    font-size: 0.85rem;
    line-height: 1.5;
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}

#section-mixtapes .drawer-content,
#section-mixtapes .drawer-content * {
    font-size: 10px;
    line-height: 1.5;
    opacity: 0.9;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}

#section-mixtapes .drawer-content .archive-share-icon {
    font-size: 35px;
    opacity: 0.45;
}

#section-mixtapes .drawer-content .archive-share-btn:hover .archive-share-icon,
#section-mixtapes .drawer-content .archive-share-btn.is-copied .archive-share-icon {
    opacity: 1;
}

/* Mixtape entry spines: instead of the artist name, the title shows concept
   tags drawn from the mixtape's genre field, joined into a single line like
   any other spine title; the subtitle reads "MNNN" (the section toggle
   "Mixtapes / DJ Sets" is left untouched) */

#section-mixtapes .drawer-section-drawers .drawer-spine .spine-title {
    font-size: 10px;
    opacity: 0.5;
}

#section-mixtapes .drawer-section-drawers .drawer-spine .spine-subtitle {
    color: #cccccc;
}

/* Mixtape spine — blink smoothly while its player is active */
@keyframes mixtape-spine-blink {
    from { background-color: transparent; }
    to   { background-color: rgba(60,60,60,0.15); }
}
#section-mixtapes .drawer:has(.archive-player.is-playing) .drawer-spine {
    animation: mixtape-spine-blink 1s ease-in-out infinite alternate;
}

#section-no-id .drawer-content h2 {
    color: #ffffff !important;
}

.drawer-content .meta {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 1.5px;
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    text-transform: none;
}

.drawer-content .body {
    margin-top: 8px;
    font-size: 0.85rem;
    font-weight: 350;
    line-height: 1.6;
    opacity: 1;
    color: inherit;
}

.drawer-content .body h2,
.drawer-content .body h3 {
    margin-top: 32px;
    margin-bottom: 10px;
    font-size: 0.85rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #ffffff;
}

.drawer-content .body p {
    margin-bottom: 12px;
}

.drawer-content .body strong {
    display: block;
    margin-top: 20px;
    margin-bottom: 4px;
    font-weight: 400;
}

.drawer-content .links {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.drawer-content .links .link-pair {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.drawer-content .links a {
    font-size: 11px !important;
    font-weight: 400 !important;
    letter-spacing: 2.5px !important;
    text-transform: uppercase !important;
    opacity: 1;
    color: rgba(0,0,0,0.45) !important;
    border-bottom: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12) !important;
}

.drawer-content .links a:hover {
    opacity: 1;
    color: rgba(40,40,40,0.65) !important;
    border-bottom: none !important;
}

.drawer-content .links .track-title {
    font-size: 0.85rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #2f2f2f;
}

/* Network drawer links */
.network-links {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.network-links a,
.network-links span {
    display: block;
    font-size: 11px;
    font-weight: 400;
    font-family: var(--font);
    letter-spacing: 2px;
    line-height: 20px;
    text-transform: uppercase;
    border-bottom: none;
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    transition: color 0.2s;
}
.network-links a:hover {
    color: rgba(40,40,40,0.7);
}

.archiv-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.archiv-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 160px;
    padding: 5px 0;
    border-bottom: 1px solid rgba(0,0,0,0.08);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    color: rgba(40,40,40,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
.archiv-artist {
    font-weight: 400;
    text-transform: uppercase;
    color: rgba(20,20,20,0.7);
    letter-spacing: 1px;
}
.archiv-title {
    color: rgba(40,40,40,0.45);
    letter-spacing: 1px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
.archiv-label {
    grid-column: 1 / -1;
    font-size: 8px;
    color: rgba(20,20,20,0.55);
    text-transform: uppercase;
    letter-spacing: 2px;
    padding-top: 4px;
    padding-bottom: 3px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
.archiv-row.ar-hidden {
    display: none;
}

/* --- ARCHIV SEARCH BAR --- */
.archiv-search-bar {
    margin-bottom: 10px;
}
.archiv-search-row {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 4px;
}
.archiv-search-meta {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-bottom: 14px;
}
.archiv-search {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.12);
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 4px 0;
    width: 220px;
    outline: none;
    transition: border-color 0.2s;
}
.archiv-search::placeholder {
    color: #000;
    opacity: 0.75;
}
.archiv-search:focus {
    border-bottom-color: rgba(0,0,0,0.35);
}
.archiv-search-tri {
    font-size: 8px;
    color: rgba(0,0,0,0.9);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 1;
    flex-shrink: 0;
    line-height: 1;
    margin-left: 3px;
}
.archiv-item-count {
    font-size: 9px;
    letter-spacing: 2px;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.6;
    white-space: nowrap;
}
.archiv-tag-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 32px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.archiv-tag-group {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.archiv-tag-cat-label {
    font-family: var(--font);
    font-size: 8px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.4;
    padding: 2px 0 4px;
    display: block;
}
.archiv-tag-btn {
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.45;
    padding: 2px 0;
    cursor: pointer;
    text-align: left;
    transition: opacity 0.15s;
}
.archiv-tag-btn:hover { opacity: 0.9; }
.archiv-tag-btn.active { opacity: 1; color: rgba(40,40,40,0.75); text-shadow: none; }
.archiv-tag-group--all {
    display: flex;
    flex-direction: row;
    gap: 24px;
    width: 100%;
    align-items: flex-start;
}
.archiv-tag-column {
    display: flex;
    flex-direction: column;
    flex: 1;
}
.archiv-az-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 18px;
}
.archiv-az-btn {
    font-family: var(--font);
    font-size: 9px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: transparent;
    border: none;
    color: #000;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.75;
    padding: 2px 3px;
    cursor: pointer;
    transition: opacity 0.15s;
}
.archiv-az-btn--all {
    opacity: 0.3;
    padding: 2px 4px;
    display: inline-flex;
    align-items: center;
}
.archiv-az-btn--all:hover {
    opacity: 0.8;
}
.archiv-az-btn--all.active {
    opacity: 0.65;
    color: inherit;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
.archiv-az-all-tri {
    display: inline-block;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4px 0 4px 6px;
    border-color: transparent transparent transparent rgba(40,40,40,0.65);
    filter: drop-shadow(0 1px 0 rgba(255,255,255,0.35)) drop-shadow(0 -1px 0 rgba(0,0,0,0.2));
}
.archiv-az-btn:hover { opacity: 0.9; }
.archiv-az-btn.active { opacity: 1; color: rgba(40,40,40,0.75); text-shadow: none; }

/* --- 4. PLAYER (center column) ---------------------------- */
.player-column {
    /* equilateral-triangle width proportion */
    width: calc(100vh * 0.866 + 40px);
    width: calc(100dvh * 0.866 + 40px);
    max-width: calc(100vh * 0.866 + 40px);
    max-width: calc(100dvh * 0.866 + 40px);
    flex-shrink: 0;
    overflow: hidden;
    margin-left: 20px;
    margin-right: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background: transparent;
    opacity: 0;
    transition: opacity 1.4s ease, max-width 0.8s cubic-bezier(0.5, 0, 0.75, 0);
}
.canvas.is-ready .player-column {
    opacity: 1;
}
.player-column.is-shrunk {
    max-width: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease, max-width 0.7s cubic-bezier(0.5, 0, 0.75, 0);
}

.player {
    width: 100%;
    height: 100%;
    background: transparent;
}

/* Play/pause button — block element filling the player, scrolls naturally */
.play-btn {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    appearance: none;
    -webkit-appearance: none;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: transform 0.15s, filter 0.5s ease;
    filter:
        drop-shadow(0 -2px 3px rgba(0,0,0,0.2))
        drop-shadow(0 3px 4px rgba(255,255,255,0.55));
}
.play-btn:hover {
    filter:
        drop-shadow(0 -4px 6px rgba(0,0,0,0.35))
        drop-shadow(0 3px 4px rgba(255,255,255,0.55));
}
.play-btn:active {
    transform: scale(0.98);
}
/* clip-path triangle — contained within play-btn bounds */
.play-icon {
    position: absolute;
    inset: 8px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
    background: rgba(0,0,0,0.16);
    transition: background 0.5s ease;
}
.play-btn:hover .play-icon {
    background: rgba(0,0,0,0.24);
}

/* triangle.jpg as a faint grain mark over the engraved surface */
.play-icon::after {
    content: '';
    position: absolute;
    inset: 0;
    background: url('triangle.jpg') center / cover no-repeat;
    opacity: 0.07;
    filter: grayscale(1) contrast(1.5);
    transition: opacity 0.5s ease;
}

.play-btn:hover .play-icon::after {
    opacity: 0.12;
}

/* On click / playing: bright engraved fill instead of dark */
.play-btn:active .play-icon,
.player.is-playing .play-icon {
    background: rgba(255,255,255,0.28);
}

/* Connecting indicator — shown between click and the stream actually starting */
/* Connecting ring: red triangle outline — position set by JS */
.connecting-ring {
    position: absolute;
    pointer-events: none;
    visibility: hidden;
    overflow: visible;
}
.connecting-ring line {
    stroke: #767676;
    stroke-width: 0.1;
    stroke-linecap: butt;
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
}
@keyframes play-icon-fade-black {
    0% {
        filter: grayscale(1) contrast(1.5);
        opacity: 0.07;
    }
    100% {
        filter: grayscale(1) contrast(3);
        opacity: 0.45;
    }
}
.player.is-connecting .play-icon::after {
    animation: play-icon-fade-black 5s ease-in-out 1 forwards;
}

.pause-icon {
    display: none;
    position: absolute;
    inset: 8px;
    align-items: center;
    justify-content: center;
    gap: 8%;
}
.pause-icon span {
    width: 39%;
    height: 100%;
    background-image: url('MNNN.jpg');
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 0.5s ease;
}


.player.is-playing .pause-icon span {
    opacity: 0.2;
}

.play-btn:hover .pause-icon span {
    opacity: 1;
}

/* When playing, swap icons */
.player.is-playing .play-icon  { display: none; }
.player.is-playing .pause-icon { display: flex; }

/* Visualiser and now-playing float at the bottom of the column */
.visualiser {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
    background: transparent;
}

.now-playing {
    display: none;
}

/* --- 5. TIMELINE (schedule grid) -------------------------- */
.timeline {
    flex-shrink: 0;
    position: relative;
    overflow: hidden;
    margin-right: 40px;
}

/* --- New column 2: mixtapes feed ---------------------------- */
.new-column-2 {
    width: 500px;
    flex-shrink: 0;
    height: 100%;
    overflow-y: auto;
    padding: 37px 40px 40px 20px;
    margin-right: 40px;
}

.mixtapes-feed {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.mixtapes-feed-item {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 10px;
    line-height: 1.5;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}

/* Divider between mixtapes — engraved line (light edge below, dark edge above) */
.mixtapes-feed-item + .mixtapes-feed-item {
    position: relative;
    padding-top: 30px;
}
.mixtapes-feed-item + .mixtapes-feed-item::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: #888;
    opacity: 0.5;
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.45);
}

/* While a mixtape is playing, hide its inline player — the top mini-player takes over */
.mixtapes-feed-item .archive-player--mixtape.is-playing {
    display: none;
}

/* While playing, hide the genre tags too — they're already shown in the mini-player.
   Fades out/in in sync with the mixtape mini-player's slide animation. */
.mixtapes-feed-item:has(.archive-player--mixtape.is-playing) .mixtapes-feed-title {
    opacity: 0;
    pointer-events: none;
}

/* Show the playing mixtape's list entry lighter — darker on hover, to identify it at a glance */
.mixtapes-feed-item:has(.archive-player--mixtape.is-playing) {
    opacity: 0.5;
    transition: opacity 0.2s;
}
.mixtapes-feed-item:has(.archive-player--mixtape.is-playing):hover {
    opacity: 1;
}

/* Stack play button, time and share into 3 right-aligned lines */
.mixtapes-feed-item .archive-player--mixtape {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}
/* Reorder lines: duration, then play triangle, then share */
.mixtapes-feed-item .archive-player--mixtape .archive-time {
    order: -1;
}
.mixtapes-feed-item .archive-player--mixtape .archive-share-btn {
    margin-left: 0;
}
.mixtapes-feed-item .archive-player--mixtape .archive-share-icon {
    font-size: 17.5px;
    opacity: 1;
}
.mixtapes-feed-item .archive-player--mixtape .archive-share-btn:hover .archive-share-icon {
    opacity: 0.45;
}

/* Seek bar lives in the mini-player only — keep just the play button, time and share here */
.mixtapes-feed-item .archive-player--mixtape .archive-seek {
    display: none;
}

/* Show only the total duration — hide the current-time readout and its separator */
.mixtapes-feed-item .archive-player--mixtape .archive-cur,
.mixtapes-feed-item .archive-player--mixtape .archive-time-sep {
    display: none;
}

/* Engraving effect on the play/pause triangle — matches the "+" share icon exactly */
.mixtapes-feed-item .archive-player--mixtape .archive-play-btn {
    color: rgba(50,50,50,0.4);
}
.mixtapes-feed-item .archive-player--mixtape .archive-play-icon,
.mixtapes-feed-item .archive-player--mixtape .archive-pause-icon {
    width: 10px;
    height: 10px;
    opacity: 1;
    filter: drop-shadow(0 1px 1px rgba(255,255,255,0.35)) drop-shadow(0 -1px 1px rgba(0,0,0,0.45));
    transition: opacity 0.2s, transform 0.2s;
}
.mixtapes-feed-item .archive-player--mixtape .archive-play-btn:hover .archive-play-icon,
.mixtapes-feed-item .archive-player--mixtape .archive-play-btn:hover .archive-pause-icon {
    opacity: 0.45;
}
.mixtapes-feed-item .archive-player--mixtape .archive-time {
    color: rgba(40,40,40,0.65);
    letter-spacing: 0.4em;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}

.mixtapes-feed-title {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(50,50,50,0.4);
    opacity: 0.4;
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.mixtapes-feed-item .links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mixtapes-feed-item .link-pair {
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: opacity 1.5s ease;
}

.mixtapes-feed-item .links a {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(40,40,40,0.65);
    text-decoration: none;
    border-bottom: none;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    transition: color 0.2s;
}
.mixtapes-feed-item .links a:hover {
    color: rgba(20,20,20,0.9);
    border-bottom: none;
}

.mixtapes-feed-item .track-title {
    font-size: 0.6rem;
    font-weight: 400;
    letter-spacing: 0.2em;
    color: rgba(40,40,40,0.4);
}

/* Hour labels — hidden until timeline is hovered */
.timeline-hours {
    position: absolute;
    top: 0;
    left: 0;
    width: 48px;
    height: 100%;
    border-right: 1px solid transparent;
    z-index: 2;
    background: transparent;
    transition: border-color 0.2s;
}
.timeline:hover .timeline-hours {
    border-right-color: transparent;
}

.timeline-hour {
    position: absolute;
    left: 0;
    width: 100%;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 4px 8px;
    border-top: 1px solid transparent;
    color: rgba(255,255,255,0.35);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 1;
    transition: opacity 0.2s, border-color 0.2s;
}
/* Once the user scrolls the canvas horizontally, the hour labels go back
   to being hidden until the timeline is hovered. */
.timeline.hours-hover-only .timeline-hour {
    opacity: 0;
}
.timeline.hours-hover-only:hover .timeline-hour {
    opacity: 1;
}

/* The grid area where events live */
.timeline-grid {
    position: absolute;
    top: 0;
    left: 48px;
    overflow: visible;
}

/* Day label — hidden until hovered */
.timeline-day-label {
    position: absolute;
    font-size: 0.55rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    padding: 6px 4px;
    text-align: center;
    opacity: 0;
    color: rgba(60,60,60,0.8);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    transition: opacity 0.2s;
    pointer-events: none;
}
.timeline:hover .timeline-day-label {
    opacity: 1;
}

/* Day column vertical line — hidden until hovered */
.timeline-day-line {
    position: absolute;
    top: 0;
    width: 1px;
    height: 100%;
    background: transparent;
    transition: background 0.2s;
    pointer-events: none;
}
.timeline:hover .timeline-day-line {
    background: transparent;
}

/* Individual event */
.timeline-event {
    position: absolute;
    background: transparent;
    border-left: 1px solid rgba(136,136,136,0.5);
    box-shadow: 1px 0 1px rgba(255,255,255,0.35), -1px 0 1px rgba(0,0,0,0.45);
    padding: 2px 6px;
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 2px;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer;
    outline: none;
    z-index: 10;
    opacity: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    font-family: var(--font);
    font-weight: 400;
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    -webkit-mask-image: linear-gradient(to right, black 75%, transparent 100%);
            mask-image: linear-gradient(to right, black 75%, transparent 100%);
    color: rgba(30,30,30,0.6);
}
.timeline-event:hover {
    -webkit-mask-image: none;
            mask-image: none;
    overflow: visible;
    z-index: 9999;
    background: transparent;
    color: rgba(255,255,255,0.5);
    text-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 -1px 0 rgba(255,255,255,0.1);
    border-left-color: rgba(136,136,136,0.9);
    box-shadow: 1px 0 1px rgba(255,255,255,0.35), -1px 0 1px rgba(0,0,0,0.45);
}

/* Today marker — red vertical line + current-time dot */
.timeline-today-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #888;
    pointer-events: none;
    z-index: 5;
    opacity: 0.5;
    box-shadow: 1px 0 1px rgba(255,255,255,0.35), -1px 0 1px rgba(0,0,0,0.45);
}
.timeline-now-line {
    position: absolute;
    height: 1px;
    background: #888;
    opacity: 0.5;
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.45);
    pointer-events: none;
    z-index: 6;
    transform: translateY(-50%);
}

.timeline-today-dot {
    display: none;
}

.event-content {
    display: inline-block;
    position: relative;
}

.event-title {
    display: block;
    font-weight: 400;
    letter-spacing: 2.5px;
}

.event-subtitle {
    display: none;
    font-size: 0.55rem;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: var(--text);
}

/* --- 6. CLOCK column ------------------------------------- */
.clock-column {
    width: 480px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    padding: 40px 20px 40px 40px;
    gap: 4px;
    position: relative;
    margin-right: 37px;
}

.clock-now-playing {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 80px;
    width: 100%;
    align-items: start;
}
.clock-now-playing-label {
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(40,40,40,0.75);
    white-space: nowrap;


}
.clock-now-playing-label::before {
    content: "▶";
    font-size: 0.55rem;
    margin-right: 6px;
    color: #ffffff;
    vertical-align: middle;
    animation: blink-on-air 1.2s step-start infinite;
}
.clock-np-spacer { min-width: 0; }
.clock-np-content { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
@keyframes np-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.clock-now-playing-track {
    font-size: 1.5rem;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0.04em;
    color: var(--text);
    line-height: 1.4;
    min-height: 1em;
    white-space: nowrap;
}
.clock-now-playing-track.np-fade {
    animation: np-fadein 1.2s ease forwards;
}

.clock-time {
    margin-top: 40px;
    font-size: 40px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: rgba(40,40,40,0.65);
    font-variant-numeric: tabular-nums;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}

.clock-date {
    font-size: 0.65rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(40,40,40,0.65);
    opacity: 0.7;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    line-height: 1.6;
    text-align: right;
}

.clock-date-divider {
    display: none;
}

.clock-zone {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    color: rgba(40,40,40,0.65);
    opacity: 0.4;
    margin-bottom: 6px;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}

/* --- 7. MAILING (last column) ----------------------------- */
.mailing-column {
    width: 320px;
    min-width: 240px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 40px;
    background: rgba(40,40,40,0.75);
    border-right: 1px solid var(--border);
}

.mailing-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Contact form pushed to bottom */
.contact-form {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.form-group label {
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(180,180,180,0.9);
    opacity: 1;
}

.form-group input,
.form-group textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(0,0,0,0.3);
    color: #9a9a9a;
    font-family: var(--font);
    font-weight: 400;
    font-size: 0.85rem;
    padding: 8px 0;
    outline: none;
    transition: border-color 0.2s;
    resize: vertical;
}
.form-group input:focus,
.form-group textarea:focus {
    border-color: #111210;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
    color: transparent;
    transition: color 0.2s;
}
.form-group input:hover::placeholder,
.form-group textarea:hover::placeholder,
.form-group input:focus::placeholder,
.form-group textarea:focus::placeholder {
    color: #c8c7c0;
}

/* Honeypot field — hidden from humans, visible to bots */
.honey {
    position: absolute;
    left: -9999px;
}

/* Submit button */
.submit-btn {
    background: transparent;
    border: 1px solid rgba(40,40,40,0.15);
    color: rgba(40,40,40,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.3);
    opacity: 1;
    font-family: var(--font);
    font-weight: 400;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    padding: 12px 24px;
    cursor: pointer;
    transition: opacity 0.2s;
}
.submit-btn:hover {
    opacity: 0.6;
    background: transparent;
}

/* Form feedback message */
.form-feedback {
    font-size: 0.75rem;
    min-height: 1.5em;
}
.form-feedback.success { color: #00f420; }
.form-feedback.error   { color: #111210; }

/* --- 7. MODAL (event detail popup) ------------------------ */
.modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1000;
    /* no dimming — page stays fully visible behind */
    background: transparent;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}
.modal-overlay.is-open {
    display: flex;
}

.modal {
    background-image: url('timetable.jpg');
    background-size: cover;
    background-position: center;
    padding: 40px;
    max-width: 500px;
    width: 90%;
    position: relative;
    color: #c8c7c0;
    pointer-events: all;
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    outline: none;
    color: #c8c7c0;
    font-size: 1.4rem;
    cursor: pointer;
    transition: opacity 0.2s;
}
.modal-close:hover {
    opacity: 0.5;
}

.modal-meta {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.6;
    margin-bottom: 12px;
    color: #c8c7c0;
}

.modal-title {
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 20px;
    color: #c8c7c0;
}

.modal-host {
    font-size: 0.85rem;
    font-weight: 400;
    color: #c8c7c0;
    margin-bottom: 12px;
}

.modal-body {
    font-size: 0.85rem;
    font-weight: 300;
    line-height: 1.7;
    color: #c8c7c0;
    white-space: pre-line;
}

/* --- 8. ARCHIVE PLAYER ------------------------------------ */
.archive-player {
    display: flex;
    align-items: center;
    gap: 14px;
}

.archive-seek {
    flex: 1;
    appearance: none;
    -webkit-appearance: none;
    height: 2px;
    background: rgba(169, 164, 155, 0.25);
    border: none;
    outline: none;
    cursor: pointer;
    border-radius: 1px;
}

.archive-seek::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111210;
    cursor: pointer;
    transition: transform 0.15s ease;
}

.archive-seek::-moz-range-thumb {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #111210;
    border: none;
    cursor: pointer;
}

.archive-seek:hover::-webkit-slider-thumb {
    transform: scale(1.4);
}

.drawer.is-open .archive-seek {
    background: rgba(17, 18, 16, 0.25);
}

.drawer.is-open .archive-seek::-webkit-slider-thumb,
.drawer.is-open .archive-seek::-moz-range-thumb {
    background: #111210;
}

.archive-play-btn {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    color: var(--text);
}

.archive-play-icon {
    width: 100%;
    height: 100%;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.archive-pause-icon {
    display: none;
    width: 100%;
    height: 100%;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.archive-play-btn:hover .archive-play-icon,
.archive-play-btn:hover .archive-pause-icon {
    opacity: 1;
}

.archive-player.is-playing .archive-play-icon  { display: none; }
.archive-player.is-playing .archive-pause-icon { display: block; }

.archive-player audio {
    display: none;
}

.archive-time {
    font-family: var(--font);
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    color: rgba(17, 18, 16, 0.45);
    opacity: 1;
}

.archive-cur {
    font-variant-numeric: tabular-nums;
}

.archive-share-btn {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    color: var(--text);
    margin-left: auto;
}

.archive-share-icon {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 35px;
    line-height: 1;
    font-weight: 400;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
    opacity: 0.45;
    transition: opacity 0.2s, transform 0.2s;
}

.archive-share-btn:hover .archive-share-icon {
    opacity: 1;
    transform: rotate(45deg);
}

.archive-share-btn.is-copied .archive-share-icon {
    opacity: 1;
    transform: scale(1.15);
}

#section-mixtapes .archive-time,
#section-mixtapes .archive-time *,
#section-flows .archive-time,
#section-flows .archive-time * {
    font-size: 13px !important;
    font-weight: 400 !important;
    line-height: 18px !important;
    letter-spacing: 1.5px !important;
    color: rgba(0,0,0,0.45) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12) !important;
}

/* Mixtape description — appears below the track list */
.mixtape-description {
    margin-top: 16px;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: 0.15em;
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
    text-align: right;
}

#section-mixtapes .drawer-content .links {
    gap: 6px;
    margin-top: 10px;
}
#section-mixtapes .drawer-content .links .link-pair {
    gap: 0;
}
.mixtapes-feed-item .links .track-title {
    font-family: var(--font);
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 2px;
    text-transform: none;
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
    padding: 0;
    display: block;
    text-align: left;
}

/* --- 9. RESPONSIVE ---------------------------------------- */

/* Desktop (≥1025px): push backstage list and bio 100px down */
@media (min-width: 1025px) {
    .backstage-rolodex,
    .backstage-detail {
        margin-top: 100px;
    }
}

/* Tablet (768px – 1024px): keep horizontal scroll, tighten widths */
@media (min-width: 768px) and (max-width: 1024px) {
    .info-column {
        width: 340px;
        min-width: 300px;
        padding: 48px 32px;
    }
    .backstage-column {
        width: 440px;
        min-width: 440px;
        margin-left: 24px;
        height: 100vh;
        height: 100dvh;
    }
    .backstage-detail {
        padding: 0 24px 0 10px;
    }
    .backstage-filter-column {
        width: 220px;
        min-width: 180px;
    }
    .backstage-search-column {
        width: 220px;
        min-width: 180px;
    }
    .backstage-search-column .backstage-search-row {
        right: 24px;
    }
    .backstage-filter-column .backstage-person-tags {
        right: 24px;
    }
    .drawer-content {
        padding: 60px 48px;
    }
    .drawer.is-open .drawer-panel {
        width: 480px;
    }
    .drawer--archiv.is-open .drawer-panel {
        width: calc(100vw - 56px);
    }
    .drawer--archiv .drawer-content {
        width: calc(100vw - 56px);
    }
    .archiv-row {
        gap: 0 40px;
    }
    .mailing-column {
        width: 260px;
        min-width: 220px;
        padding: 32px 24px;
    }
    .modal {
        max-width: 420px;
    }
}

/* Mobile (≤ 767px): keep horizontal scroll, tighten sizes */
@media (max-width: 767px) {
    body {
        font-size: 14px;
        overflow: hidden;
        height: 100vh;
        height: 100dvh;
    }

    /* Canvas stays horizontal — user swipes left/right.
       touch-action:pan-x lets the browser know we only scroll horizontally,
       so child elements with pan-y (backstage rolodex) don't block canvas swipes.
       overscroll-behavior-x:contain stops rubber-band scroll leaking to <body>. */
    .canvas {
        flex-direction: row;
        height: 100vh;
        height: 100dvh;
        overflow-x: auto;
        overflow-y: hidden;
        touch-action: pan-x;
        overscroll-behavior-x: contain;
        /* Momentum scrolling on iOS (deprecated but harmless on other browsers) */
        -webkit-overflow-scrolling: touch;
    }

    /* --- Info --- */
    .info-column {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        height: 100dvh;
        /* Safe area insets: respect iPhone notch / Dynamic Island / home bar */
        padding: max(32px, calc(env(safe-area-inset-top) + 16px))
                 max(32px, calc(env(safe-area-inset-right) + 20px))
                 max(32px, calc(env(safe-area-inset-bottom) + 16px))
                 max(40px, calc(env(safe-area-inset-left) + 20px));
    }
    .info-text {
        font-size: 13px;
        line-height: 1.7;
        letter-spacing: 0.05em;
    }

    /* --- Backstage ---
       Use 100dvh (not 130dvh) so that absolutely-positioned tags and the
       search bar align correctly with the visible viewport — with 130dvh the
       column sticks 15dvh above the viewport edge and all absolute offsets
       are measured from that hidden area, pushing tags out of sight. */
    .backstage-column {
        width: 100vw;
        min-width: 100vw;
        margin-left: 0;
        height: 100vh;
        height: 100dvh;
        flex-direction: row;
    }
    .backstage-rolodex {
        width: 200px;
        flex-shrink: 0;
        padding-left: 12px;
        padding-right: 6px;
        overflow-x: hidden;
        touch-action: pan-y;
    }
    .backstage-card-strip {
        touch-action: pan-y;
    }
    .backstage-card {
        max-width: 186px;
        overflow: hidden;
        text-overflow: ellipsis;
        touch-action: pan-y;
        font-size: 11px;
        letter-spacing: 1.5px;
        padding: 5px 0;
        white-space: nowrap;
    }
    .backstage-card.active {
        font-size: 12px;
    }
    .backstage-detail {
        padding: 0 16px 0 0;
        overflow: hidden;
    }
    .backstage-detail p {
        font-size: 12px;
    }
    /* Filter column: full-width page on mobile, restore normal flex flow */
    .backstage-filter-column {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 24px;
        overflow-y: auto;
        padding: max(40px, calc(env(safe-area-inset-top) + 20px))
                 24px
                 max(40px, calc(env(safe-area-inset-bottom) + 20px))
                 24px;
    }
    .backstage-search-column {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        gap: 24px;
        overflow-y: auto;
        padding: max(40px, calc(env(safe-area-inset-top) + 20px))
                 24px
                 max(40px, calc(env(safe-area-inset-bottom) + 20px))
                 24px;
    }
    .backstage-meta-column {
        width: 100vw;
        min-width: 100vw;
        height: 100vh;
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 24px;
    }
    .backstage-filter-column .backstage-person-tags {
        position: static;
        top: auto;
        left: auto;
        right: auto;
        max-height: none;
        overflow-y: visible;
    }

    /* --- Drawers --- */
    .drawer-spine {
        width: 44px;
        font-size: 12px;
        letter-spacing: 1.5px;
        padding: 12px 10px;
    }
    .drawer-spine .spine-subtitle {
        color: rgba(40,40,40,0.75);
    }

    /* Top-level open panels */
    .drawer.is-open .drawer-panel,
    .drawer--network.is-open .drawer-panel,
    .drawer--archiv.is-open .drawer-panel {
        width: calc(100vw - 44px);
    }
    .drawer-content,
    .drawer--network .drawer-content,
    .drawer--archiv .drawer-content {
        width: calc(100vw - 44px);
        padding: 24px 20px 40px 20px;
        font-size: 12px;
        box-sizing: border-box;
    }
    /* All sub-drawers inside sections — override desktop widths */
    .drawer-section-drawers .drawer.is-open .drawer-panel {
        width: calc(100vw - 88px) !important;
        max-width: calc(100vw - 88px) !important;
        overflow-x: hidden !important;
    }
    .drawer-section-drawers .drawer-content,
    #section-guests .drawer-content,
    #section-mixtapes .drawer-content,
    #section-no-id .drawer-content,
    #section-background-noise .drawer-content {
        width: calc(100vw - 88px) !important;
        max-width: calc(100vw - 88px) !important;
        padding: 24px 20px 40px 20px !important;
        font-size: 12px !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }
    .drawer-section-drawers .drawer-content * {
        max-width: 100%;
        word-wrap: break-word;
    }
    #section-guests .drawer-content h2 {
        color: #ffffff;
        font-weight: 400;
    }
    #section-mixtapes .drawer-content .links {
        gap: 6px;
        margin-top: 10px;
    }
    #section-mixtapes .drawer-content .links .link-pair {
        gap: 0;
    }
    #section-mixtapes .archive-player,
    #section-mixtapes .archive-player * {
        font-size: 12px !important;
        line-height: inherit !important;
    }
    .drawer-section-drawers .drawer-content .body {
        font-size: 0.75rem !important;
        line-height: 1.5;
    }
    .drawer-section-drawers .drawer-content h2 {
        font-size: 0.8rem !important;
    }

    /* Archiv: single column */
    .archiv-row {
        grid-template-columns: 1fr;
        gap: 2px 0;
    }
    .archiv-label {
        grid-column: 1;
        margin-top: 6px;
    }

    /* --- Player: maintain equilateral triangle proportions --- */
    .player-column {
        width: calc(80vh * 0.866 + 20px);
        width: calc(80dvh * 0.866 + 20px);
        flex-shrink: 0;
    }

    /* --- Timeline ---
       Remove inner overflow:auto — it creates a scroll trap that blocks canvas
       horizontal swiping. The canvas scroll is sufficient to navigate the timeline. */
    .timeline {
        overflow: hidden;
    }

    /* --- New column 2 --- */
    .new-column-2 {
        width: 100vw;
        min-width: 100vw;
        padding: max(32px, calc(env(safe-area-inset-top) + 16px))
                 max(20px, calc(env(safe-area-inset-right) + 12px))
                 max(32px, calc(env(safe-area-inset-bottom) + 16px))
                 max(20px, calc(env(safe-area-inset-left) + 12px));
    }

    /* --- Clock --- */
    .clock-column {
        width: 100vw;
        min-width: 100vw;
        padding: max(32px, calc(env(safe-area-inset-top) + 16px))
                 max(20px, calc(env(safe-area-inset-right) + 12px))
                 max(32px, calc(env(safe-area-inset-bottom) + 16px))
                 max(20px, calc(env(safe-area-inset-left) + 12px));
    }
    .clock-time {
        font-size: 2rem;
    }

    /* --- Mailing --- */
    .mailing-column {
        width: 100vw;
        min-width: 100vw;
        padding: max(32px, calc(env(safe-area-inset-top) + 16px))
                 max(20px, calc(env(safe-area-inset-right) + 12px))
                 max(32px, calc(env(safe-area-inset-bottom) + 16px))
                 max(20px, calc(env(safe-area-inset-left) + 12px));
    }

    /* --- Modal --- */
    .modal-overlay {
        /* Keep modal clear of notch + home bar on iPhone */
        padding: env(safe-area-inset-top, 0px)
                 env(safe-area-inset-right, 0px)
                 env(safe-area-inset-bottom, 0px)
                 env(safe-area-inset-left, 0px);
    }
    .modal {
        width: 92vw;
        max-width: none;
        padding: 24px 20px;
    }

    /* --- Mixtape mini-player: safe-area padding on mobile --- */
    .mixtape-mini-player {
        gap: 10px;
        padding: max(8px, calc(env(safe-area-inset-top) + 6px))
                 max(16px, calc(env(safe-area-inset-right) + 12px))
                 8px
                 max(16px, calc(env(safe-area-inset-left) + 12px));
    }
    .mixtape-mini-player .mini-now-playing {
        max-width: none;
    }

}

/* ── Information ─────────────────────────────────────────────── */
#drawer-information {
    transition: opacity 0.35s ease, transform 0.35s ease;
}
#drawer-information.is-scrolling-hidden {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}
.canvas--plus-open > *:not(.drawers) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.canvas--plus-open .drawers > *:not(#section-plus) {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}
.canvas--plus-open #drawer-information {
    transform: translateX(-100%);
}
.canvas--plus-open > .drawers {
    position: sticky;
    left: 0;
    z-index: 21;
    flex-shrink: 0;
}
.canvas--plus-open #section-plus {
    width: 100vw;
    flex-shrink: 0;
}
.canvas--plus-open #section-plus > .drawer-section-toggle {
    flex: 1;
    width: auto;
    min-width: 0;
}
.canvas--plus-open #section-plus > .drawer-section-drawers {
    overflow: visible;
    flex-shrink: 0;
}
.canvas:has(#section-plus.is-open) #drawer-information,
.canvas:has(#section-plus .drawer-section.is-open) #drawer-information,
.canvas:has(#section-plus .drawer.is-open) #drawer-information {
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

#drawer-information {
    flex-shrink: 0;
    position: sticky;
    left: 0;
    z-index: 20;
}
/* Title at the top of the spine, reading top-to-bottom
   (rotated 180° from the default bottom-to-top spine orientation),
   sized to match the "+" of the main drawer */
#drawer-information .drawer-spine {
    transform: none;
    justify-content: flex-start;
    width: 40px;
    font-size: 10px;
    letter-spacing: 1px;
    background-color: #9a9a9a !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%) !important;
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100% !important;
    border-right: 1px solid rgba(0,0,0,0.15);
    box-shadow: 1px 0 0 rgba(255,255,255,0.45) !important;
    padding-top: 35px;
    transition: padding-top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
/* When either mini-player slides in at the top, push the title down
   so it clears the bar. */
body:has(.mini-player.is-visible) #drawer-information .drawer-spine,
body:has(.mixtape-mini-player.is-visible) #drawer-information .drawer-spine {
    padding-top: 65px;
}
.drawer-content small {
    color: rgba(40,40,40,0.35);
    font-size: inherit;
    letter-spacing: inherit;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}
#drawer-information .drawer-spine .spine-title {
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 2.5px;
    color: rgba(40,40,40,0.65);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    margin-top: 2px;
}
#drawer-information .drawer-spine .spine-subtitle {
    margin-top: 2px;
}
#drawer-information .drawer-spine::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 0;
    opacity: 0;
    box-shadow:
        inset -1px -1px 2px rgba(60,60,60,0.5),
        inset 1px 1px 1px rgba(200,200,200,0.5);
    transition: height 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}
#drawer-information .drawer-spine:hover::before {
    height: 100%;
    opacity: 1;
}
#drawer-information .drawer-panel {
    transition: opacity 0.3s ease;
}
#drawer-information.is-open .drawer-panel {
    transition: opacity 0.3s ease;
}
#drawer-information .drawer-panel {
    background-color: #9a9a9a !important;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%) !important;
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100% !important;
    background-attachment: fixed !important;
    box-shadow:
        0 -2px 3px rgba(0,0,0,0.2),
        0 3px 4px rgba(255,255,255,0.55);
}
#drawer-information .drawer-content {
    background: transparent !important;
}
#drawer-information .drawer-content {
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    position: relative;
}
#drawer-information .drawer-content .body,
#drawer-internships .drawer-content .body {
    font-size: 13px;
    font-weight: 400;
    line-height: 18px;
    letter-spacing: 1.5px;
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
}
#drawer-information .drawer-content .info-text,
#drawer-information .drawer-content .info-text a,
#drawer-information .drawer-content .body a,
#drawer-information .drawer-content .body a:visited {
    font-size: 13px !important;
    line-height: 18px;
    letter-spacing: 1.5px !important;
    color: rgba(0,0,0,0.3) !important;
    text-transform: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
    text-decoration: none;
}
#drawer-information .drawer-content .body a:hover {
    color: rgba(0,0,0,0.6) !important;
    text-decoration: none;
}
.genre-tip {
    cursor: default;
    color: rgba(0,0,0,0.3);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    position: relative;
    display: inline;
    transition: color 0.15s ease;
}
.genre-tip:hover {
    color: rgba(0,0,0,0.6);
}
.genre-tip::after {
    content: attr(data-tip);
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(18,18,18,0.94);
    color: #c8c7c0;
    font-size: 10px;
    letter-spacing: 1.2px;
    line-height: 1.65;
    font-weight: 400;
    padding: 20px;
    width: 220px;
    pointer-events: none;
    opacity: 0;
    clip-path: inset(0 0 100% 0);
    transition: opacity 0.05s ease, clip-path 0.25s ease;
    z-index: 200;
    text-transform: none;
    text-shadow: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.genre-tip:hover::after {
    opacity: 1;
    clip-path: inset(0 0 0% 0);
}
.genre-tip-r::after {
    left: auto;
    right: 0;
}
#drawer-information .drawer-content small {
    display: block;
    font-size: 11px;
    font-weight: 400;
    letter-spacing: 1.5px;
    line-height: 20px;
    text-transform: uppercase;
    color: rgba(0,0,0,0.45);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    opacity: 1;
}
#drawer-information .drawer-content .n {
    color: rgba(30,30,30,1) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.2);
}
#drawer-information .drawer-content a[href*="p-node"],
#drawer-information .drawer-content a[href*="maps.google"] {
    color: rgba(0,0,0,0.3) !important;
    text-decoration: none !important;
    border-bottom: none !important;
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    text-transform: none !important;
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    transition: color 0.15s ease;
}
#drawer-information .drawer-content a[href*="p-node"]:hover,
#drawer-information .drawer-content a[href*="maps.google"]:hover {
    color: rgba(0,0,0,0.6) !important;
    text-decoration: none;
}
#drawer-information .drawer-content::after {
    content: "";
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #888;
    opacity: 0.5;
    box-shadow: 1px 0 1px rgba(255,255,255,0.35), -1px 0 1px rgba(0,0,0,0.45);
}

/* Information drawer width — desktop only */
@media (min-width: 1025px) {
    #drawer-information.is-open .drawer-panel,
    #drawer-information .drawer-content {
        width: 580px;
    }
}

#drawer-internships .drawer-content {
    width: 450px;
    padding-top: 40px;
}

/* ── Internships drawer — panel opens to the left of the spine ── */
#drawer-internships {
    flex-shrink: 0;
    flex-direction: row-reverse;
}
#drawer-internships .drawer-panel {
    transition: opacity 0.3s ease;
}
#drawer-internships.is-open .drawer-panel {
    width: 450px;
    box-shadow: inset -2px 0 4px -4px rgba(0,0,0,0.8);
    margin-right: 0;
    background-color: #9a9a9a;
    margin-left: 40px;
    transition: opacity 0.3s ease;
}
#drawer-internships .drawer-content a,
#drawer-internships .drawer-content a:visited {
    font-size: 13px !important;
    letter-spacing: 1.5px !important;
    text-transform: none !important;
    color: rgba(0,0,0,0.6) !important;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.2s;
}
#drawer-internships .drawer-content a:hover {
    opacity: 0.5;
    color: rgba(0,0,0,0.6) !important;
}
#drawer-internships .drawer-content strong {
    color: rgba(40,40,40,0.9);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
}
#drawer-internships .drawer-spine {
    transform: none;
    justify-content: flex-start;
    width: 52px;
    font-size: 10px;
    letter-spacing: 1px;
    padding-top: 35px;
    background: #d8d8d8;
    transition: padding-top 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
body:has(.mini-player.is-visible) #drawer-internships .drawer-spine,
body:has(.mixtape-mini-player.is-visible) #drawer-internships .drawer-spine {
    padding-top: 65px;
}
#drawer-internships .drawer-spine .spine-title {
    color: #000;
    text-shadow: none;
    opacity: 1;
    letter-spacing: 2.8px;
    margin-top: 2px;
}
#drawer-internships .drawer-spine .spine-subtitle {
    color: #888;
    text-shadow: none;
    opacity: 1;
    margin-top: 2px;
}

/* ── Interferences ──────────────────────────────────────────── */
#section-interferences .drawer-section-drawers .drawer .drawer-panel {
    transition: opacity 0.3s ease;
}
#section-interferences .drawer.is-open .drawer-panel {
    width: 500px;
    margin-right: 0;
    position: sticky;
    right: 0;
    transition: opacity 0.3s ease;
}
#section-interferences .drawer-content {
    width: 500px;
}
#section-interferences .drawer-section-drawers .drawer-spine,
#section-infrastructure .drawer-section-drawers .drawer-spine,
#section-seminars .drawer-section-drawers .drawer-spine,
#section-manuals .drawer-section-drawers .drawer-spine,
#section-guests .drawer-section-drawers .drawer-spine,
#section-background-noise .drawer-section-drawers .drawer-spine,
#section-no-id .drawer-section-drawers .drawer-spine,
#section-repository .drawer-section-drawers .drawer .drawer-panel {
    transition: opacity 0.3s ease;
}
#section-repository .drawer-section-drawers .drawer.is-open .drawer-panel {
    width: 500px;
    margin-right: 0;
    position: sticky;
    right: 0;
    transition: opacity 0.3s ease;
}
#section-repository .drawer-content {
    width: 500px;
}

#section-repository .drawer-section-drawers .drawer-spine,
#section-flows .drawer-section-drawers .drawer-spine {
    background: rgba(0, 0, 0, 0.02);
}

#section-flows {
    display: none !important;
}

#drawer-archiv {
    display: none !important;
}

#section-no-id {
    display: none !important;
}

#drawer-projects {
    display: none !important;
}

#section-publications {
    display: none !important;
}
#section-interferences .drawer-section-drawers .drawer-spine .spine-title,
#section-infrastructure .drawer-section-drawers .drawer-spine .spine-title,
#section-seminars .drawer-section-drawers .drawer-spine .spine-title,
#section-manuals .drawer-section-drawers .drawer-spine .spine-title,
#section-guests .drawer-section-drawers .drawer-spine .spine-title,
#section-background-noise .drawer-section-drawers .drawer-spine .spine-title,
#section-no-id .drawer-section-drawers .drawer-spine .spine-title,
#section-repository .drawer-section-drawers .drawer-spine .spine-title,
#section-flows .drawer-section-drawers .drawer-spine .spine-title {
    color: rgba(40,40,40,0.9);
    opacity: 1;
}
#section-interferences .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-infrastructure .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-seminars .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-manuals .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-guests .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-background-noise .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-no-id .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-repository .drawer-section-drawers .drawer-spine .spine-subtitle,
#section-flows .drawer-section-drawers .drawer-spine .spine-subtitle {
    color: rgba(40,40,40,0.9);
    opacity: 0.9;
}

#section-infrastructure .drawer-section-drawers .drawer .drawer-panel {
    background-color: #9a9a9a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%);
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100%;
}
#section-infrastructure .drawer-content > h2 {
    display: none;
}
#section-infrastructure .drawer-content .body p {
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    margin-bottom: 0;
}
#section-infrastructure .drawer-content .body p::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 32px;
    background: rgba(40,40,40,0.18);
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.3);
}
#section-infrastructure .drawer-content .body p:last-of-type::after {
    display: none;
}
#section-infrastructure .drawer-content .body p:last-of-type:not(:has(strong)) {
    margin-top: 32px;
}
#section-infrastructure .drawer-content .body p strong {
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    margin-top: 32px;
    margin-bottom: 0;
}
#section-archive .drawer-section-drawers .drawer .drawer-panel {
    background-color: #9a9a9a;
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23a)' opacity='0.13'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.26' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.04 0 0 0 0.01 0 1 0 0 0 0 0 0.96 0 -0.01 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23b)' opacity='0.09'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.035 0.05' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0.15'/%3E%3C/filter%3E%3Crect width='600' height='600' filter='url(%23c)' opacity='0.06'/%3E%3C/svg%3E"),
        repeating-linear-gradient(91deg, transparent 0px, transparent 22px, rgba(0,0,0,0.013) 22px, rgba(0,0,0,0.013) 23px),
        linear-gradient(178deg, rgba(255,255,255,0.06) 0%, rgba(0,0,0,0.07) 55%, rgba(255,255,255,0.02) 100%);
    background-size: 256px 256px, 400px 400px, 600px 600px, 100% 100%, 100% 100%;
}
#section-archive .drawer-content > h2 {
    display: none;
}
#section-archive .drawer-content .body p {
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    margin-bottom: 0;
}
#section-archive .drawer-content .body p::after {
    content: "";
    display: block;
    height: 1px;
    margin-top: 32px;
    background: rgba(40,40,40,0.18);
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.3);
}
#section-archive .drawer-content .body p:last-of-type::after {
    display: none;
}
#section-archive .drawer-content .body p:last-of-type:not(:has(strong)) {
    margin-top: 32px;
}
#section-archive .drawer-content .body p strong {
    color: rgba(0,0,0,0.6);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    margin-top: 32px;
    margin-bottom: 0;
}

/* ── Manuals ─────────────────────────────────────────────────── */
#section-manuals .drawer-section-drawers .drawer .drawer-panel {
    background-color: #9a9a9a;
}
#section-manuals .drawer-content pre {
    font-family: var(--font);
    font-size: 10px;
    letter-spacing: 2px;
    line-height: 1.6;
    color: rgba(255,255,255,0.85);
    text-shadow: none;
    background: rgba(0,0,0,0.18);
    padding: 8px 12px;
    margin-left: 2ch;
    white-space: pre-wrap;
    word-break: break-all;
}
#section-manuals .drawer-content a {
    text-transform: none;
    letter-spacing: 0.05em;
    border-bottom: 1px solid rgba(40,40,40,0.2);
    transition: color 0.15s, border-color 0.15s;
}
#section-manuals .drawer-content a:hover {
    color: rgba(0,0,0,0.9);
    border-bottom-color: rgba(0,0,0,0.6);
}
#section-manuals .drawer-content pre code {
    background: none;
    padding: 0;
    display: inline;
    font-family: inherit;
}
#section-manuals .drawer-content h2 {
    display: none;
}
#section-manuals .drawer-content p {
    padding-left: 2ch;
    margin-top: 12px;
}
#section-manuals .drawer-content hr {
    border: none;
    height: 1px;
    background: rgba(40,40,40,0.18);
    box-shadow: 0 1px 1px rgba(255,255,255,0.35), 0 -1px 1px rgba(0,0,0,0.3);
    margin: 24px 0;
}
#section-manuals .drawer-content strong {
    color: rgba(40,40,40,0.85);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    font-weight: 600;
}

/* ── Studios / Booking ──────────────────────────────────────── */
.drawer--studios .drawer-panel {
    background-color: #9a9a9a;
}
.drawer--studios.is-open .drawer-panel {
    width: 520px;
    margin-right: 0;
}
.drawer--studios .drawer-content {
    width: 520px;
}
.studio-booking-wrap {
    padding: 0;
}
.studio-booking-wrap h2 {
    font-size: 13px;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 6px;
}
.studio-intro {
    font-size: 16px;
    color: #ffffff;
    letter-spacing: 0.08em;
    line-height: 1.7;
    margin-bottom: 28px;
}
#studio-booking-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.sb-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sb-label {
    font-size: 12px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: #434343;
}
.sb-input {
    background: transparent;
    border: none;
    color: #313131;
    font-family: inherit;
    font-size: 12px;
    font-weight: 300;
    letter-spacing: 0.06em;
    padding: 6px 0;
    outline: none;
    width: 100%;
    transition: border-color 0.2s;
}
.sb-input:focus {
    border-bottom-color: rgba(0,0,0,0.55);
}
.sb-textarea {
    resize: vertical;
    min-height: 70px;
    line-height: 1.6;
}
.sb-select {
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888580'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    padding-right: 20px;
}
.sb-radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sb-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 300;
    color: rgba(40,40,40,0.75);
    text-shadow: 0 1px 0 rgba(255,255,255,0.35), 0 -1px 0 rgba(0,0,0,0.12);
    letter-spacing: 0.06em;
}
.sb-radio input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(40,40,40,0.5);
    border: none;
    flex-shrink: 0;
    cursor: pointer;
    transition: background 0.15s;
}
.sb-radio input[type="radio"]:checked {
    background: black;
}
.sb-time-row {
    flex-direction: row !important;
    gap: 24px;
}
.sb-time-row > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
/* Mini calendar */
.sb-calendar {
    margin-top: 8px;
    user-select: none;
}
.sb-cal-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.sb-cal-month {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #ffffff;
}
.sb-cal-btn {
    background: none;
    border: none;
    color: #888580;
    cursor: pointer;
    font-size: 14px;
    padding: 2px 6px;
    line-height: 1;
}
.sb-cal-btn:hover { color: #c8c7c0; }
.sb-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    text-align: center;
}
.sb-cal-dow {
    font-size: 9px;
    letter-spacing: 0.1em;
    color: #555;
    padding-bottom: 4px;
}
.sb-cal-day {
    font-size: 11px;
    padding: 5px 2px;
    border-radius: 2px;
    cursor: pointer;
    color: #888580;
    background: none;
    border: none;
    font-family: inherit;
    letter-spacing: 0.04em;
    transition: background 0.15s, color 0.15s;
}
.sb-cal-day.available {
    color: #ffffff;
}
.sb-cal-day.available:hover {
    background: #2a2b28;
    color: #fff;
}
.sb-cal-day.selected {
    background: rgba(40,40,40,0.75);
    color: #fff;
}
.sb-cal-day.unavailable {
    color: #333;
    cursor: default;
    pointer-events: none;
}
.sb-cal-day.empty {
    pointer-events: none;
}
.sb-cal-day.today {
    border-bottom: 1px solid #555;
}
.sb-booked-list {
    font-size: 11px;
    color: #888580;
    line-height: 1.6;
    letter-spacing: 0.04em;
    margin-top: -6px;
}
.sb-booked-label {
    display: block;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-size: 10px;
}
.sb-booked-slot {
    display: inline-block;
    margin-right: 8px;
    color: rgba(40,40,40,0.75);
}
.sb-status {
    font-size: 12px;
    letter-spacing: 0.06em;
    padding: 10px 0;
    line-height: 1.6;
}
.sb-status.ok  { color: #00f420; }
.sb-status.err { color: rgba(40,40,40,0.75); }
.sb-submit {
    background: none;
    border: 1px solid #444;
    color: #333;
    font-family: inherit;
    font-size: 11px;
    font-weight: 300;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 10px 20px;
    cursor: pointer;
    align-self: flex-start;
    transition: border-color 0.2s, color 0.2s;
}
.sb-submit:hover {
    border-color: #c8c7c0;
    color: #d8d8d8;
}
.sb-submit:disabled {
    opacity: 0.4;
    cursor: default;
}

/* ============================================================
   CROSS-BROWSER & RESPONSIVE FIXES
   ============================================================ */

/* --- Scrollbar hiding on all overflow-y:auto containers ----- */
.info-text,
.backstage-person-tags,
.bs-tag-column,
.drawer.is-open .drawer-panel,
.new-column-2 {
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.info-text::-webkit-scrollbar,
.backstage-person-tags::-webkit-scrollbar,
.bs-tag-column::-webkit-scrollbar,
.drawer.is-open .drawer-panel::-webkit-scrollbar,
.new-column-2::-webkit-scrollbar {
    display: none;
}

/* --- webkit-user-select where user-select: none is used ----- */
.sb-calendar {
    -webkit-user-select: none;
    user-select: none;
}

/* --- Mobile scroll snapping: columns snap into place -------- */
@media (max-width: 767px) {
    .canvas {
        scroll-snap-type: x mandatory;
        scroll-padding: 0;
    }
    /* Every direct column snaps at its left edge */
    .canvas > * {
        scroll-snap-align: start;
    }
    /* Touch-action on drawer spines: removes 300ms tap delay */
    .drawer-spine {
        touch-action: manipulation;
    }
    /* KHK slideshow: full-screen column on mobile */
    .khk-slideshow-column {
        width: 100vw;
        min-width: 100vw;
    }
}

/* --- prefers-reduced-motion: cut all transitions/animations - */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}