/* ============================================
   bloody tomato — golden hour identity
   Palette: Tomato #D84B32 · Burnt Orange #C8612C
   Soft Coral #F0A08A · Cream #F7F2EC · Graphite #121212
   ============================================ */

:root {
    --tomato: #D84B32;
    --burnt: #C8612C;
    --coral: #F0A08A;
    --cream: #F7F2EC;
    --graphite: #121212;
    --surface: #1A1614;          /* тёплая карточка */
    --surface-2: #201A17;        /* ховер карточки */
    --line: rgba(240, 160, 138, 0.14);
    --text: var(--cream);
    --text-soft: rgba(247, 242, 236, 0.68);
    --text-dim: rgba(247, 242, 236, 0.42);

    /* TEMP A/B: testing Golos Text as the single display font (EN + RU)
       instead of the Poppins/Manrope split. */
    --font-display: 'Golos Text', 'Poppins', 'Manrope', sans-serif;
    --font-body: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;

    --radius: 20px;
    --radius-pill: 999px;
    --container: 1160px;
    /* Matches .container's own edge (max-width 1160px, centered, 24px padding)
       at every viewport width, so the header and hero line up with the rest
       of the page instead of drifting outward on wide screens. */
    --content-inset: max(24px, calc((100vw - var(--container)) / 2 + 24px));

    /* Quiet glass: enough tint and blur to read as a raised surface,
       no visible edge and no glow — separation comes from the tint
       and spacing, not a drawn border. */
    --glass-bg: rgba(255, 255, 255, 0.035);
    --glass-bg-strong: rgba(255, 255, 255, 0.06);
    --glass-border: rgba(255, 255, 255, 0.06);
    --glass-border-strong: rgba(255, 255, 255, 0.1);
    --glass-blur: blur(10px);
    --glass-accent-bg: rgba(216, 75, 50, 0.12);
    --glass-accent-bg-hover: rgba(216, 75, 50, 0.2);
    --glass-accent-border: rgba(240, 160, 138, 0.18);
}

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.65;
    color: var(--text);
    background-color: var(--graphite);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img {
    max-width: 100%;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

.container {
    max-width: var(--container);
    margin: 0 auto;
    padding: 0 24px;
}

/* --------------------------------------------
   Buttons
   -------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14px;
    padding: 11px 22px;
    border-radius: var(--radius-pill);
    background: transparent;
    transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    cursor: pointer;
    border: 1px solid transparent;
}

/* Same primary/secondary look as .btn, sized down for use inside cards —
   this is the one CTA style every set card uses, video or audio, instead
   of a separate heavier component. */
.btn-sm {
    padding: 9px 16px;
    font-size: 13px;
}

.btn:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 3px;
}

.btn-primary {
    background: linear-gradient(135deg, var(--tomato), var(--burnt));
    color: var(--cream);
}

.btn-primary:hover {
    background: linear-gradient(135deg, var(--coral), var(--tomato));
}

.btn-secondary {
    color: var(--text-soft);
    border-color: var(--glass-border);
}

.btn-secondary:hover {
    background: var(--glass-bg);
    border-color: var(--glass-border-strong);
    color: var(--cream);
}

/* --------------------------------------------
   Header
   -------------------------------------------- */
/* The fixed header covers ~90px at the top of the viewport - without this,
   jumping to any in-page anchor (#listen, #about, #bookings...) lands the
   target's heading right underneath it, partly hidden. */
#home, #listen, #about, #bookings {
    scroll-margin-top: 96px;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: 20px 0;
    transition: background-color 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}

.header.scrolled {
    background: rgba(18, 18, 18, 0.55);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    padding: 16px 0;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.header-content {
    display: flex;
    align-items: center;
    gap: 32px;
}

.header .container {
    max-width: none;
    padding-inline: var(--content-inset);
}

.logo a {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 19px;
    letter-spacing: 0.01em;
    color: var(--cream);
}

.nav {
    display: flex;
    gap: 28px;
    margin-left: auto;
}

.nav-link {
    font-size: 14.5px;
    font-weight: 500;
    color: var(--text-soft);
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--coral);
}

.header-cta {
    padding: 11px 24px;
    font-size: 14px;
}

.language-switch {
    display: flex;
    gap: 8px;
    margin-left: 8px;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
}

.language-switch a,
.language-switch span {
    padding: 8px 4px;
    color: var(--text-dim);
}

.language-switch a:hover,
.language-switch [aria-current="page"] { color: var(--coral); }

.language-switch-mobile {
    justify-content: center;
    margin: 16px 0 0;
}

/* --------------------------------------------
   Mobile menu
   -------------------------------------------- */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-left: auto;
}

.mobile-menu-toggle span {
    width: 22px;
    height: 2px;
    background: var(--cream);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.mobile-menu-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

.mobile-menu {
    position: fixed;
    inset: 0;
    background: rgba(18, 18, 18, 0.97);
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.mobile-menu.open {
    opacity: 1;
    visibility: visible;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    gap: 28px;
    text-align: center;
}

.mobile-nav-link {
    font-family: var(--font-display);
    font-size: 26px;
    font-weight: 500;
    color: var(--cream);
    transition: color 0.2s ease;
}

.mobile-nav-link:hover {
    color: var(--coral);
}

/* --------------------------------------------
   Hero
   -------------------------------------------- */
.hero {
    position: relative;
    min-height: 100svh;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    background:
        radial-gradient(circle at 75% 45%, rgba(255, 93, 27, 0.3), transparent 38%),
        linear-gradient(105deg, #100b09 0%, #21100b 38%, #8f2915 68%, #eb4514 100%);
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(0deg, rgba(8, 5, 4, 0.54) 0%, transparent 28%);
}

.hero-orbit {
    position: absolute;
    top: 7%;
    right: -10vw;
    width: min(72vw, 980px);
    aspect-ratio: 1;
    border: 1px solid rgba(240, 160, 138, 0.34);
    border-radius: 50%;
    pointer-events: none;
}

.hero-layout {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 100svh;
    margin: 0 auto;
    padding: 92px 0 0;
    padding-left: var(--content-inset);
    padding-right: var(--content-inset);
    display: flex;
    align-items: center;
}

.hero-content {
    position: relative;
    z-index: 3;
    max-width: 510px;
    padding: 40px 0 56px;
}

.hero-kicker {
    margin-bottom: 18px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--coral);
}

.hero-title {
    font-family: var(--font-display);
    font-weight: 500;
    /* Smaller, with real room between letters and lines — the tight
       -0.045em tracking at the old, larger size made adjacent letters
       (the two "o"s in "bloody", "tomato") crowd into each other with
       no visual air between them. */
    font-size: clamp(48px, 5.4vw, 84px);
    line-height: 1.08;
    letter-spacing: -0.01em;
    opacity: 0.92;
    /* A soft fade toward coral instead of solid bright cream, which read as
       too stark against the warm photo, and gentler than the earlier
       three-stop cream/coral/burnt version, which read as a loud rainbow. */
    background: linear-gradient(120deg, var(--cream) 55%, var(--coral) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 30px;
}

.hero-tagline {
    font-family: var(--font-mono);
    font-size: 13.5px;
    font-weight: 400;
    max-width: 310px;
    line-height: 1.8;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 32px;
}

.hero-footnote {
    max-width: 350px;
    font-family: var(--font-mono);
    font-size: 11px;
    line-height: 1.7;
    color: var(--text-dim);
}

.hero-portrait {
    position: absolute;
    inset: 0 0 0 auto;
    width: min(68vw, 1080px);
    height: 100%;
    margin: 0;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 8%, #000 27%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.18) 8%, #000 27%, #000 100%);
}

.hero-portrait::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    background:
        linear-gradient(0deg, rgba(15, 8, 6, 0.3) 0%, transparent 25%),
        linear-gradient(90deg, rgba(27, 15, 11, 0.22) 0%, transparent 30%);
}

.hero-portrait img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: center center;
}

/* --------------------------------------------
   Listening platforms
   -------------------------------------------- */
/* ----------------------------------------------
   Night: one continuous environment for the whole
   scroll below the hero
   ---------------------------------------------- */
/* The page used to be a stack of sections, each with its own background and
   its own corner glow, so every boundary read as a cut between separate
   screens. Everything below the hero now sits inside one near-black field,
   and a single light layer drifts and swells across it as you scroll: the
   light belongs to the page, not to any one section. */
.night {
    position: relative;
    background: #0A0A0A;
    isolation: isolate;
}

.night__light,
.night__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

/* One soft trail, not three separate spotlights: the previous version had
   a glow near the top, another mid-page and a third near the bottom, so
   each block ended up with "its own" light and the page still read as a
   sequence of lit rooms. A single wide, low source drifting slowly upward
   is quiet enough that the set photos stay the only saturated colour on
   the page. */
.night__light {
    z-index: 0;
    background: radial-gradient(130vw 85vh at 72% 20%, rgba(216, 75, 50, 0.12), transparent 72%);
    /* --energy runs 0 to 1 across the night's own scroll length (set in
       main.js), so the room warms very slightly toward the booking block -
       a mood shift, not a stage light coming up. */
    opacity: calc(0.4 + 0.3 * var(--energy, 0));
    transform: translate3d(0, calc(var(--energy, 0) * -4vh), 0);
    will-change: opacity, transform;
}

.night__grain {
    z-index: 1;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Content rides above the light, and the hairline dividers that used to
   slice the page into screens are gone inside the night. */
.night > .section {
    position: relative;
    z-index: 2;
}

.night > .section::before {
    display: none;
}

.listen-section {
    overflow: hidden;
}

.listen-heading {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(260px, 0.6fr);
    gap: 56px;
    align-items: start;
    margin-bottom: 40px;
}

.listen-intro {
    max-width: 380px;
    /* Lines up with the start of the heading text (not the small eyebrow
       label above it), since the two columns hold very different type
       scales and bottom-aligning them read as visually off. */
    margin-top: 36px;
    color: var(--text-soft);
    font-size: 17px;
    line-height: 1.7;
}

.soundcloud-player {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    overflow: hidden;
    margin-bottom: 44px;
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid rgba(240, 160, 138, 0.3);
    border-radius: 18px;
    background:
        radial-gradient(circle at 88% 18%, rgba(216, 87, 48, 0.2), transparent 26%),
        linear-gradient(110deg, rgba(46, 25, 19, 0.94), rgba(19, 19, 19, 0.98));
}

.soundcloud-player__copy h3 {
    margin: 8px 0 10px;
    color: var(--cream);
    font-family: var(--font-display);
    font-size: clamp(29px, 4vw, 48px);
    font-weight: 500;
    line-height: 1;
}

.soundcloud-player__status {
    color: var(--text-soft);
    font-size: 14px;
}

.soundcloud-player__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 18px;
    margin-top: 6px;
}

.soundcloud-player__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 54px;
    padding: 0 22px;
    border: 1px solid var(--glass-accent-border);
    border-radius: 999px;
    background: var(--glass-accent-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--cream);
    cursor: pointer;
    font: 500 14px var(--font-display);
    transition: transform 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.soundcloud-player__toggle:hover:not(:disabled) {
    background: var(--glass-accent-bg-hover);
    transform: translateY(-2px);
}

.soundcloud-player__toggle:disabled {
    cursor: wait;
    opacity: 0.58;
}

.soundcloud-player__link {
    color: var(--cream);
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.soundcloud-player__link:hover { color: var(--coral); }

.soundcloud-player__widget {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
}

.mix-card {
    display: grid;
    grid-template-columns: minmax(0, 1.18fr) minmax(280px, 0.82fr);
    align-items: stretch;
    min-height: 390px;
}

.mix-card__art {
    position: relative;
    overflow: hidden;
    min-height: 390px;
}

.mix-card__art::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 65%, rgba(18, 18, 18, 0.55) 100%);
    pointer-events: none;
}

.mix-card__art img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.mix-card:hover .mix-card__art img { transform: scale(1.025); }

.mix-card__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(30px, 5vw, 72px);
    background: linear-gradient(135deg, rgba(32, 21, 17, 0.96), rgba(18, 18, 18, 0.96));
}

.mix-card__body h3 {
    margin-bottom: 18px;
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 62px);
    font-weight: 500;
    line-height: 1.02;
}

.mix-card__body > p:not(.section-eyebrow) {
    margin-bottom: 32px;
    color: var(--text-soft);
}

.mix-card__action {
    width: fit-content;
    color: var(--coral);
    text-decoration: none;
    text-underline-offset: 3px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.mix-card__action:hover {
    color: var(--tomato);
    text-decoration: underline;
}

.platform-rail {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 26px;
    border-top: 1px solid var(--line);
}

.platform-rail a {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 0;
    transition: color 0.2s ease;
}

.platform-rail a + a { padding-left: 22px; border-left: 1px solid var(--line); }
.platform-rail strong { font-size: 15px; font-weight: 500; }
.platform-rail span { font: 10px/1.4 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); }
.platform-rail a:hover { color: var(--coral); }

.hero-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-bottom: 36px;
}

.hero-meta p {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.hero-meta span,
.hero-meta a {
    color: var(--coral);
}

.hero-meta a:hover {
    color: var(--tomato);
}

/* --------------------------------------------
   Sections
   -------------------------------------------- */
.section {
    position: relative;
    padding: 110px 0;
}

.story-section {
    background:
        radial-gradient(circle at 8% 72%, rgba(216, 75, 50, 0.14), transparent 27%),
        var(--surface);
}

.story-layout {
    display: grid;
    grid-template-columns: minmax(240px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(40px, 8vw, 120px);
}

.story-copy {
    max-width: 720px;
    font-size: clamp(18px, 1.5vw, 24px);
    line-height: 1.62;
    color: var(--text-soft);
}

.story-copy p + p { margin-top: 1.25em; }

.story-pullquote {
    grid-column: 1 / -1;
    max-width: 980px;
    margin-top: 32px;
    font-family: var(--font-display);
    font-size: clamp(34px, 5vw, 76px);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.035em;
    color: var(--coral);
}

.section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    max-width: var(--container);
    margin: 0 auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--line) 20%, var(--line) 80%, transparent);
}

.section-eyebrow {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: var(--burnt);
    margin-bottom: 14px;
}

.section-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(38px, 5vw, 56px);
    line-height: 1.1;
    color: var(--cream);
    margin-bottom: 54px;
}

/* --------------------------------------------
   Bio
   -------------------------------------------- */
/* Compact gap from Listen above (the default 110px .section padding, doubled
   up against Listen's own bottom padding, is what made this block feel like
   it was hanging in dead air) - the big pause is saved for the approach to
   Bookings below, where .bio-section's default bottom padding still applies. */
.bio-section {
    padding-top: 64px;
}

/* Eyebrow and title sit on the page's own 12-column grid, same as before.
   .bio-content is display: contents - it exists in the DOM (for the fade-in
   observer) but generates no box of its own, so its three children (the
   byline, the copy and the meta row) become direct items of this same
   grid instead of being trapped in one shared column together. */
.bio-section .container {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    column-gap: 18px;
}

.bio-section .section-eyebrow,
.bio-section .section-title {
    grid-column: 1 / 9;
}

.bio-content {
    display: contents;
}

/* Nudged one column in from the title above it, rather than starting flush
   left: an untouched first column plus an untouched twelfth column give the
   two-column block roughly equal air on both sides instead of pinning it
   to the container's left edge. */
.bio-byline {
    grid-column: 2 / 4;
    grid-row: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.bio-avatar {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    object-fit: cover;
    object-position: 50% 28%;
    flex: none;
}

.bio-byline__name {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--text-dim);
}

/* Six columns - a comfortable measure, not the container's full width -
   sitting beside the byline in the same grid row so its first line lands
   level with the top of the avatar rather than well below it. */
.bio-text {
    grid-column: 4 / 10;
    grid-row: 3;
}

.bio-text p {
    font-size: 19px;
    line-height: 1.7;
    color: var(--text-soft);
    margin-bottom: 14px;
}

/* The project's facts as one quiet layer under a clear pause, not a
   component: a caption label ("Genres") followed by an ordinary phrase.
   Full width and explicit grid columns - not flex-wrap - so the row is the
   widest thing in the block (it counterweights the title) and "Based"
   can't drop onto its own line the way it did under flex-wrap. */
.bio-meta {
    grid-column: 1 / -1;
    grid-row: 4;
    display: grid;
    grid-template-columns: 1fr 2.1fr 1fr;
    column-gap: 32px;
    margin-top: 88px;
    padding-top: 22px;
    border-top: 1px solid rgba(240, 160, 138, 0.12);
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--text-soft);
}

.bio-meta__group + .bio-meta__group {
    padding-left: 32px;
    border-left: 1px solid rgba(240, 160, 138, 0.12);
}

.bio-meta__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-bottom: 6px;
}

.bio-meta__value {
    display: block;
    color: var(--text-soft);
}

/* --------------------------------------------
   On stage
   -------------------------------------------- */
.onstage-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    margin-bottom: 64px;
}

.onstage-featured-photo {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 5;
    background: var(--surface);
    border: 1px solid var(--line);
}

.onstage-featured-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.onstage-subtitle {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(26px, 3vw, 34px);
    line-height: 1.2;
    color: var(--cream);
    margin-bottom: 22px;
}

.onstage-description p {
    font-size: 16.5px;
    color: var(--text-soft);
    margin-bottom: 12px;
}

.onstage-details {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.onstage-detail-item {
    display: flex;
    gap: 18px;
    align-items: baseline;
}

.detail-label {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--burnt);
    min-width: 96px;
    flex-shrink: 0;
}

.detail-value {
    font-size: 15px;
    color: var(--text);
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
}

.gallery-item {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: var(--surface);
    border: 1px solid var(--line);
}

.gallery-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.gallery-item:hover img {
    transform: scale(1.04);
}

.gallery-overlay {
    position: absolute;
    inset: auto 0 0 0;
    padding: 40px 18px 14px;
    background: linear-gradient(0deg, rgba(18, 18, 18, 0.85), transparent);
}

.gallery-caption {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}

.onstage-badge {
    margin-top: 56px;
    text-align: center;
    padding: 30px 24px;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    background: linear-gradient(180deg, rgba(200, 97, 44, 0.06), transparent);
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.badge-title {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--burnt);
    margin-bottom: 8px;
}

.badge-text {
    font-size: 15px;
    color: var(--text-soft);
}

/* --------------------------------------------
   Sets
   -------------------------------------------- */
.sets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

.set-card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition: border-color 0.3s ease, background-color 0.3s ease, transform 0.3s ease;
}

.set-card:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
    transform: translateY(-3px);
}

.set-title {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: var(--cream);
    margin-bottom: 4px;
}

.set-subtitle {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-dim);
}

.set-player {
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 12px;
}

.set-player iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}

.set-link {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 14.5px;
    color: var(--coral);
    transition: color 0.2s ease;
    margin-top: auto;
}

.set-link:hover {
    color: var(--tomato);
}

.featured-set {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(260px, 0.75fr);
    gap: 28px;
    max-width: 960px;
    padding: 18px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
}

.featured-set-image {
    display: block;
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 16 / 9;
}

.featured-set-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.featured-set:hover img {
    transform: scale(1.025);
}

.featured-set-copy {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 18px;
    color: var(--text-soft);
    font-size: 16px;
}

.sets-archive-link {
    margin-top: 32px;
}

.booking-note {
    position: relative;
    z-index: 1;
    max-width: 440px;
    color: var(--text-soft);
    font-size: 16px;
}

.set-archive-hero,
.set-detail {
    padding: 170px 0 80px;
}

.archive-intro {
    max-width: 640px;
    color: var(--text-soft);
    font-size: 18px;
}

.set-archive-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 26px;
}

.set-archive-card {
    padding: 16px;
    border: 1px solid var(--glass-border);
    border-radius: var(--radius);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.set-archive-card:hover {
    background: var(--glass-bg-strong);
    border-color: var(--glass-border-strong);
}

.set-cover-link {
    display: block;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    border-radius: 13px;
    margin-bottom: 22px;
}

.set-cover-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.set-archive-description,
.set-detail-description,
.set-note,
.set-status {
    color: var(--text-soft);
}

.set-archive-description {
    margin: 12px 0 18px;
}

.back-link {
    display: inline-block;
    margin-bottom: 32px;
    color: var(--coral);
    font-family: var(--font-mono);
    font-size: 13px;
}

.set-detail-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 56px;
    align-items: start;
}

.set-detail-image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius);
    /* SoundCloud artwork is always square (we request the t500x500 crop),
       so a matching 1:1 box means object-fit:cover never actually crops
       anything — no forced 16:9 letterbox rectangle around a square
       photo. height must stay auto — an inherited height:100% here
       overrides aspect-ratio entirely and lets the box balloon to match
       the text column instead. */
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.set-video-poster {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--surface);
}

.set-video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.set-video-poster:hover img {
    transform: scale(1.03);
}

.set-video-poster::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(8, 5, 4, 0.55) 0%, transparent 45%);
    pointer-events: none;
}

.set-video-poster__play {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--glass-border-strong);
    background: rgba(15, 13, 12, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--cream);
    font: 500 14px var(--font-display);
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.set-video-poster:hover .set-video-poster__play {
    background: var(--glass-accent-bg-hover);
    border-color: var(--glass-accent-border);
}

.set-detail-title {
    font-family: var(--font-display);
    font-size: clamp(38px, 5vw, 64px);
    line-height: 1.05;
    font-weight: 500;
    color: var(--cream);
    margin-bottom: 22px;
}

.set-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 26px 0;
}

.set-tags li {
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    padding: 5px 10px;
    font: 12px var(--font-mono);
    color: var(--text-soft);
}

.set-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

.set-note-section {
    margin-top: 100px;
    max-width: 760px;
}

.tracklist {
    padding-left: 22px;
    color: var(--text-soft);
}

.tracklist li {
    padding: 8px 0;
    border-bottom: 1px solid var(--line);
}

/* --------------------------------------------
   Video
   -------------------------------------------- */
.video-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 22px;
}

.video-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.video-wrapper {
    position: relative;
    border-radius: var(--radius);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--surface);
    border: 1px solid var(--line);
}

.video-wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.video-description {
    font-family: var(--font-mono);
    font-size: 12.5px;
    letter-spacing: 0.06em;
    color: var(--text-soft);
}

/* --------------------------------------------
   Bookings
   -------------------------------------------- */
/* No background of its own: the booking block sits in the same night as
   everything above it, and the light layer's own swell (--energy near 1
   down here) is what makes this the brightest point of the scroll. Full
   .section padding on both sides gives it real distance from About - a
   calm pause, not a screen change, but not crowded either. */

.bookings-card {
    position: relative;
    padding: 24px 0 40px;
}

/* The closing block arrives like the next track: a longer, slower lift
   than the rest of the page's reveals, staggered down the block. */
.rise-in {
    transform: translateY(56px);
    transition: opacity 1s ease, transform 1s cubic-bezier(0.22, 0.61, 0.36, 1);
}

.rise-in.visible {
    transform: translateY(0);
}

.section-title.rise-in {
    transition-delay: 0.08s;
}

.bookings-card.rise-in {
    transition-delay: 0.16s;
}

.bookings-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px 28px;
}

.bookings-cta {
    font-size: 16px;
    padding: 16px 34px;
}

.bookings-alt {
    font-family: var(--font-mono);
    font-size: 12px;
    letter-spacing: 0.16em;
    color: var(--text-dim);
    transition: color 0.25s ease;
}

.bookings-alt:hover {
    color: var(--coral);
}

.btn-copy {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-dim);
    padding: 7px;
    cursor: pointer;
    display: inline-flex;
    transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.btn-copy:hover {
    color: var(--coral);
    border-color: rgba(240, 160, 138, 0.4);
}

.btn-copy.copied {
    color: var(--coral);
    border-color: var(--coral);
}

.social-links {
    display: flex;
    gap: 14px;
    margin-top: 44px;
    padding-top: 34px;
    border-top: 1px solid var(--line);
    position: relative;
    z-index: 1;
}

.social-link {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    transition: color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}

.social-link:hover {
    color: var(--coral);
    border-color: var(--glass-border-strong);
}

/* --------------------------------------------
   Footer
   -------------------------------------------- */
/* A footer is a base, not content: it sat at the same brightness as the
   page above it and competed with the bookings block. Darker than the
   page ground so it reads as the floor everything rests on, with its own
   text dropped one step down the colour hierarchy. */
.footer {
    /* Same ground as .night above it: the page shouldn't end on a seam. */
    border-top: 1px solid rgba(240, 160, 138, 0.07);
    background: #0A0A0A;
    padding: 44px 0;
}

.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
}

.footer-logo {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 15px;
    color: var(--text-soft);
}

.footer-tagline {
    font-family: var(--font-mono);
    font-size: 11.5px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text-dim);
    margin-top: 4px;
}

.footer-links {
    display: flex;
    gap: 24px;
}

.footer-links a,
.footer-links-btn {
    font-size: 13px;
    color: var(--text-dim);
    transition: color 0.2s ease;
}

.footer-links-btn {
    font-family: var(--font-body);
    background: none;
    border: none;
    cursor: pointer;
}

.footer-links a:hover,
.footer-links-btn:hover {
    color: var(--coral);
}

.footer-copyright {
    font-family: var(--font-mono);
    font-size: 12.5px;
    color: var(--text-dim);
}

/* --------------------------------------------
   Scroll animations
   -------------------------------------------- */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .animate-on-scroll,
    .rise-in {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .btn,
    .gallery-item img,
    .set-card {
        transition: none;
    }
    /* The night keeps its light, it just stops moving: a fixed mid-swell
       instead of a scroll-driven one, and no sideways drift. */
    .night__light {
        opacity: 0.55;
        transform: none;
    }
}

/* --------------------------------------------
   Responsive
   -------------------------------------------- */
@media (max-width: 960px) {
    .nav,
    .header-cta {
        display: none;
    }

    .mobile-menu-toggle {
        display: flex;
    }

    .onstage-hero {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .featured-set,
    .set-detail-grid {
        grid-template-columns: 1fr;
    }

    .platform-rail { grid-template-columns: repeat(2, 1fr); }
    .platform-rail a:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
    .platform-rail a:nth-child(4) { border-top: 1px solid var(--line); }
    .story-layout { grid-template-columns: 1fr; gap: 32px; }

    .hero-orbit { right: -24vw; width: 92vw; }
}

@media (max-width: 760px) {
    .section {
        padding: 60px 0;
    }

    .hero {
        min-height: 100svh;
        background: linear-gradient(180deg, #e84513 0%, #9b2d17 45%, #160c09 74%, #100b09 100%);
    }

    .hero-layout {
        min-height: 100svh;
        padding-top: 64svh;
        padding-bottom: 64px;
        display: block;
    }

    .hero-portrait {
        inset: 0 0 auto 0;
        width: 100%;
        height: 69svh;
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 66%, rgba(0, 0, 0, 0.5) 82%, transparent 100%);
    }

    .hero-portrait::after {
        background: linear-gradient(0deg, rgba(16, 11, 9, 0.5) 0%, transparent 30%);
    }

    .hero-portrait img { object-position: center 25%; }
    .hero-content { max-width: 100%; padding: 0; }
    .hero-title { font-size: clamp(46px, 15vw, 68px); margin-bottom: 20px; }
    .hero-tagline { margin-bottom: 24px; }
    .hero-orbit { top: 2%; right: -52vw; width: 150vw; }

    .listen-heading { grid-template-columns: 1fr; gap: 20px; margin-bottom: 34px; }
    .soundcloud-player { align-items: flex-start; flex-direction: column; margin-bottom: 30px; }
    .soundcloud-player__actions { width: 100%; justify-content: space-between; }
    .mix-card { grid-template-columns: 1fr; min-height: 0; }
    .mix-card__art { min-height: 0; aspect-ratio: 16 / 10; }
    .mix-card__art::after { background: linear-gradient(0deg, rgba(18, 18, 18, 0.48), transparent 45%); }
    .platform-rail { grid-template-columns: 1fr; }
    .platform-rail a + a,
    .platform-rail a:nth-child(3),
    .platform-rail a:nth-child(4) { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); }

    .hero-buttons .btn {
        width: 100%;
    }

    .bookings-card {
        padding: 20px 0 32px;
    }

    .bookings-cta {
        width: 100%;
        text-align: center;
    }

    /* Below 960px the 12-column grid collapses to one column: the eyebrow,
       title, byline/copy and meta row all just stack full-width instead of
       being held to columns 1-9. */
    .bio-section .container {
        display: block;
    }

    /* The grid columns that separate the byline from the copy on desktop
       don't apply once the container is block-level, so they need an
       explicit gap here instead. */
    .bio-byline {
        margin-bottom: 28px;
    }

    .bio-avatar {
        width: 72px;
        height: 72px;
    }

    .bio-meta {
        grid-template-columns: 1fr;
        row-gap: 20px;
        margin-top: 56px;
    }

    .bio-meta__group + .bio-meta__group {
        padding-left: 0;
        border-left: 0;
    }

    .footer-content {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* --------------------------------------------
   Generated set catalogue
   -------------------------------------------- */
/* Docked to the bottom of the viewport on every page, rather than sitting
   inline wherever the "listen" section happens to be — once a set is
   chosen it should stay reachable no matter where on the page (or which
   page) you scroll to. */
.selected-set-player {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 90;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    max-height: 80vh;
    overflow-y: auto;
    padding: 20px var(--content-inset);
    border: 0;
    border-top: 1px solid var(--glass-border-strong);
    border-radius: 20px 20px 0 0;
    background: rgba(15, 13, 12, 0.92);
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.4);
    transition: padding 0.25s ease;
}

.selected-set-player.is-collapsed {
    padding-top: 12px;
    padding-bottom: 12px;
}

.selected-set-player[hidden] { display: none; }
.selected-set-player h3 { max-width: 38ch; margin: 6px 0 8px; font: 500 clamp(20px, 1.8vw, 28px)/1.1 var(--font-display); transition: font-size 0.25s ease, margin 0.25s ease; }

.soundcloud-player__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 28px;
    flex-wrap: wrap;
}

/* Collapsed automatically on every page navigation (see main.js) and
   whenever the visualizer/scrub row would otherwise sit over content the
   visitor is trying to read — expands back on demand via the chevron, or
   whenever a new set is chosen. */
.selected-set-player.is-collapsed {
    gap: 0;
}

.selected-set-player.is-collapsed .soundcloud-player__visualizer,
.selected-set-player.is-collapsed .section-eyebrow,
.selected-set-player.is-collapsed .soundcloud-player__status {
    display: none;
}

/* The scrub row (timecode + seek) stays visible even collapsed — narrow
   shouldn't mean losing the ability to see where you are or jump
   anywhere in the track. */
.selected-set-player.is-collapsed .soundcloud-player__scrub {
    margin-top: 10px;
}

.selected-set-player.is-collapsed .soundcloud-player__head {
    align-items: center;
}

.selected-set-player.is-collapsed .soundcloud-player__actions {
    margin-top: 0;
}

.selected-set-player.is-collapsed h3 {
    margin: 0;
    font-size: 15px;
    max-width: 46ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.soundcloud-player__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 1px solid var(--glass-border);
    border-radius: 50%;
    background: transparent;
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: transform 0.25s ease, background-color 0.2s ease, color 0.2s ease;
}

.soundcloud-player__collapse:hover {
    background: var(--glass-bg);
    color: var(--cream);
}

.selected-set-player.is-collapsed .soundcloud-player__collapse {
    transform: rotate(180deg);
}

/* The visualizer is the card's main visual, not a small icon — a wide row
   of bars that doubles as a play/pause toggle (it's a <button>). */
.soundcloud-player__visualizer {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    width: 100%;
    height: 88px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.soundcloud-player__visualizer:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 6px;
}

.soundcloud-player__bar {
    flex: 1 1 0;
    max-width: 8px;
    /* The bar needs a real box to scale — height:100% of the 88px
       visualizer, not a 5px min-height, which is what made scaleY(1) vs
       scaleY(0.16) barely register: scaling a 5px box still looks ~5px.
       At full height, the swing is genuinely ~20px to ~88px tall. */
    height: 100%;
    border-radius: 3px;
    background: var(--glass-border-strong);
    transform: scaleY(0.22);
    transform-origin: bottom;
    transition: background 0.4s ease;
    animation: soundcloud-eq 1100ms ease-in-out infinite;
    animation-play-state: paused;
}

/* Staggered, varied timing across the row so the bars move independently
   instead of pulsing in lockstep — no per-bar JS needed. */
.soundcloud-player__bar:nth-child(2n) { animation-duration: 950ms; }
.soundcloud-player__bar:nth-child(3n) { animation-duration: 1300ms; animation-delay: 90ms; }
.soundcloud-player__bar:nth-child(4n) { animation-duration: 800ms; animation-delay: 180ms; }
.soundcloud-player__bar:nth-child(5n) { animation-duration: 1450ms; animation-delay: 60ms; }
.soundcloud-player__bar:nth-child(6n) { animation-duration: 1050ms; animation-delay: 220ms; }
.soundcloud-player__bar:nth-child(7n) { animation-duration: 700ms; animation-delay: 140ms; }

.soundcloud-player__visualizer:hover .soundcloud-player__bar {
    background: var(--glass-border-strong);
}

.selected-set-player.is-playing .soundcloud-player__bar {
    background: linear-gradient(180deg, var(--coral), var(--tomato));
    animation-play-state: running;
}

@keyframes soundcloud-eq {
    0%, 100% { transform: scaleY(0.22); }
    50% { transform: scaleY(1); }
}

.soundcloud-player__scrub {
    display: flex;
    align-items: center;
    gap: 12px;
}

.soundcloud-player__time {
    flex: 0 0 auto;
    min-width: 34px;
    font: 500 11px/1 var(--font-mono);
    color: var(--text-dim);
}

.soundcloud-player__time:last-child { text-align: right; }

.soundcloud-player__progress {
    position: relative;
    flex: 1;
    height: 4px;
    border-radius: var(--radius-pill);
    background: var(--glass-border-strong);
    cursor: pointer;
}

.soundcloud-player__progress-fill {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: var(--radius-pill);
    background: linear-gradient(90deg, var(--tomato), var(--coral));
    pointer-events: none;
}

.soundcloud-player__progress:focus-visible {
    outline: 2px solid var(--coral);
    outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
    .soundcloud-player__bar {
        animation: none;
        transform: scaleY(0.55);
    }
}

.mix-catalogue,
.set-archive-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.mix-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.mix-card:hover {
    background: var(--glass-bg-strong);
    transform: translateY(-3px);
}

.mix-card__art {
    min-height: 0;
    aspect-ratio: 1 / 0.78;
}

.mix-card__art::after { background: linear-gradient(0deg, rgba(18, 18, 18, 0.36), transparent 55%); }
.mix-card__body { flex: 1; padding: 24px; background: transparent; }
.mix-card__body h3 { margin-bottom: 24px; font-size: clamp(22px, 1.55vw, 28px); line-height: 1.1; }
.mix-card__body h3 a { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.mix-card__meta { margin-bottom: 12px; color: var(--coral); font: 10px/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.mix-card__body > p:not(.mix-card__meta) { margin-bottom: 24px; font-size: 14px; line-height: 1.6; }

.mix-card__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: auto;
}

.set-alt-link {
    color: var(--text-dim);
    text-decoration: none;
    font: 500 10px/1.4 var(--font-mono);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.set-alt-link:hover {
    color: var(--coral);
}

.btn-primary[aria-pressed="true"] {
    background: linear-gradient(135deg, var(--coral), var(--tomato));
}

.btn-secondary[aria-pressed="true"] {
    background: var(--glass-bg);
    border-color: var(--coral);
    color: var(--coral);
}

.platform-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    margin-top: 50px;
}

.platform-card {
    display: flex;
    min-height: 132px;
    flex-direction: column;
    justify-content: flex-end;
    gap: 9px;
    padding: 22px;
    border-radius: var(--radius);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    transition: background-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.platform-card:hover { background: var(--glass-accent-bg); color: var(--coral); transform: translateY(-3px); }
.platform-card strong { font: 500 18px var(--font-display); }
.platform-card span { color: var(--text-dim); font: 10px/1.5 var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

@media (max-width: 960px) {
    .mix-catalogue,
    .set-archive-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .platform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .selected-set-player { padding: 18px 20px; gap: 12px; }
    .soundcloud-player__actions { width: 100%; justify-content: space-between; }
    .soundcloud-player__visualizer { height: 56px; }
    .mix-catalogue,
    .set-archive-grid,
    .platform-grid { grid-template-columns: 1fr; }
}

/* --------------------------------------------
   Cookie consent
   -------------------------------------------- */
.cookie-consent {
    position: fixed;
    left: 24px;
    bottom: 24px;
    z-index: 95;
    max-width: 380px;
    padding: 22px 24px;
    border-radius: 16px;
    border: 1px solid var(--glass-border-strong);
    background: rgba(15, 13, 12, 0.94);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

.cookie-consent[hidden] { display: none; }

.cookie-consent__text {
    margin-bottom: 16px;
    color: var(--text-soft);
    font-size: 14px;
    line-height: 1.6;
}

.cookie-consent__text a {
    color: var(--coral);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.cookie-consent__actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 480px) {
    .cookie-consent { left: 12px; right: 12px; bottom: 12px; max-width: none; }
}

/* --------------------------------------------
   Legal pages (privacy, cookies)
   -------------------------------------------- */
.legal-page {
    padding: 170px 0 100px;
}

.legal-page .container {
    max-width: 760px;
}

.legal-page__section {
    margin-bottom: 40px;
}

.legal-page__section h2 {
    margin-bottom: 12px;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 22px;
    color: var(--cream);
}

.legal-page__section p {
    color: var(--text-soft);
    font-size: 16px;
    line-height: 1.7;
}

.legal-page__section p + p {
    margin-top: 1em;
}

.legal-page__section a {
    color: var(--coral);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.legal-page__section code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    color: var(--coral);
}

.legal-page__updated {
    margin-top: 56px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
    color: var(--text-dim);
    font-family: var(--font-mono);
    font-size: 12.5px;
}

/* --------------------------------------------
   Russian-language type strength
   -------------------------------------------- */
/* Keep the same monospace, all-caps, wide-tracking treatment the English
   labels use — that rhythm (every letter the same width) is what gives
   them their technical, rave-flyer character, and swapping to a regular
   sans loses exactly that. The real fix is weight: at the default 400/500
   JetBrains Mono ships, Cyrillic reads thin and default-looking. Bumping
   to 700 (loaded specifically for this) keeps the mono aesthetic but
   with real presence. Scoped to <html lang="ru"> only. */
html[lang="ru"] .hero-kicker,
html[lang="ru"] .section-eyebrow,
html[lang="ru"] .bio-detail-item h4,
html[lang="ru"] .mix-card__meta,
html[lang="ru"] .set-subtitle,
html[lang="ru"] .hero-tagline {
    font-weight: 700;
}

/* The Russian tagline is longer than the English one and, at the same
   wide mono tracking, wraps to two lines inside the English version's
   310px cap — bump the cap so it sits on one line instead (hero-content
   itself tops out at 510px, so there's room). */
html[lang="ru"] .hero-tagline {
    max-width: 460px;
}