/* Brand palette — sourced directly from the YANEECK logo (red/black). Light
   is the default (no [data-theme] attribute set, e.g. JS disabled), showing
   the logo in its original colors — [data-theme="dark"] and
   [data-theme="high-contrast"] below override the same token set for the
   theme toggle in the header. */
:root {
    /* Explicit rather than left to guess: native controls (select
       dropdowns, focus rings, carets) render light regardless of the
       visitor's OS-level preference, matching this default theme. */
    color-scheme: light;

    /* --color-primary is darkened from the brand's pure #ff0000 (which only
       clears ~3.75:1 on this paper) since it doubles as body-text/link
       color, not just a background fill. */
    --color-primary: #d10000; /* ~5.3:1 on paper, ~4.7:1 on surface */
    --color-primary-glow: #a80000; /* hover/focus — darker, not brighter, against a light bg */
    --color-ink: #14100f;
    --color-paper: #faf7f4;
    --color-surface: #efe9e3;
    --color-muted: #6b625c; /* ~5.6:1 on paper, ~4.9:1 on surface */
    --color-border: rgba(20, 16, 15, 0.5); /* ~3.5:1 on paper */

    --font-sans: -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --space-1: 0.5rem;
    --space-2: 1rem;
    --space-3: 1.5rem;
    --space-4: 2.5rem;
    --space-5: 4rem;
    --max-width: 72rem;
    --radius: 14px;
    --radius-sm: 8px;
}

/* Dark theme — the original, deliberately moody brand look, tuned for a
   dark, atmospheric mood instead of the flat black-on-white original. Same
   token set, verified against the same 4.5:1 (text) / 3:1 (non-text) WCAG
   thresholds as the light palette above. */
:root[data-theme="dark"] {
    /* Tells the browser to render native controls (select dropdowns, focus
       rings, carets) dark. Without it they come out as white boxes on the
       near-black page, and those parts are out of CSS's reach. */
    color-scheme: dark;

    --color-primary: #ff0000;
    --color-primary-glow: #ff3b3b; /* hover/focus — brighter, not darker, against a dark bg */
    --color-ink: #f2ede8; /* body text — warm off-white, not pure #fff */
    --color-paper: #0a0909; /* page background — near-black, slightly warm */
    --color-surface: #141110; /* raised panels (hero, cards) */
    --color-muted: #9c9490;
    /* 0.4 alpha over --color-paper resolves to ~3.4:1 — verified with the
       actual WCAG relative-luminance formula. */
    --color-border: rgba(242, 237, 232, 0.4);
}

/* High-contrast theme — a single, fixed, maximum-legibility palette rather
   than a lightened/darkened variant of the other two: no muted/dimmed text
   tier (hierarchy comes from weight/size instead), no tinted surface panels
   (a solid border marks them instead), fully opaque borders everywhere. */
:root[data-theme="high-contrast"] {
    color-scheme: dark;
    --color-primary: #ff0000; /* ~5.25:1 against black in either direction */
    --color-primary-glow: #ff4040; /* ~6.06:1 against black */
    --color-ink: #ffffff;
    --color-paper: #000000;
    --color-surface: #000000;
    --color-muted: #ffffff;
    --color-border: #ffffff;
}

/* The grain texture is a mood detail for the dark/light brand themes — high
   contrast mode strips decorative effects in favor of flat, legible color. */
:root[data-theme="high-contrast"] body::after {
    display: none;
}

* {
    box-sizing: border-box;
}

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

body {
    position: relative;
    margin: 0;
    background: var(--color-paper);
    color: var(--color-ink);
    font-family: var(--font-sans);
    line-height: 1.5;
}

/* A faint grain overlay keeps the dark theme from reading as a flat digital
   gradient — cheap, self-contained (no image request), and it's the detail
   that gives the "mysterious" mood some texture instead of just being dark. */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 999;
    pointer-events: none;
    opacity: 0.05;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* iOS Safari can flash a hairline seam across fixed, full-viewport
       elements while its address bar collapses/expands during scroll —
       forcing this onto its own GPU layer keeps it stable. Harmless
       elsewhere, so applied unconditionally rather than Safari-sniffed. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

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

a {
    color: var(--color-primary);
    text-decoration-thickness: 2px;
}

a:hover,
a:focus-visible {
    color: var(--color-primary-glow);
}

h1, h2, h3 {
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    line-height: 1.05;
    margin: 0 0 var(--space-2);
}

h1 {
    font-size: clamp(2.25rem, 6vw, 4rem);
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.25rem);
}

main {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-3) var(--space-2) var(--space-5);
}

/* Sticky so the logo, language switch and theme toggle stay reachable
   while scrolling — a full-width bar with its own background, so content
   doesn't visually collide with it as it scrolls underneath.
   .site-header__inner carries the max-width centering the bar's content
   used to have directly. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 500;
    background: var(--color-paper);
}

.site-header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-1);
}

.site-logo {
    display: inline-block;
}

.site-logo img {
    height: 2.25rem;
    width: auto;
}

/* Two logo files (red+cream for dark/high-contrast, red+black for light) —
   both always render, CSS shows only the one matching the current theme, so
   no JS is needed for this part of the swap. */
.site-logo__img--dark {
    display: none;
}

:root[data-theme="dark"] .site-logo__img--light,
:root[data-theme="high-contrast"] .site-logo__img--light {
    display: none;
}

:root[data-theme="dark"] .site-logo__img--dark,
:root[data-theme="high-contrast"] .site-logo__img--dark {
    display: block;
}

.site-header__controls {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
    background: none;
    border: none;
    color: var(--color-ink);
    cursor: pointer;
}

.theme-toggle:hover,
.theme-toggle:focus-visible {
    color: var(--color-primary-glow);
}

/* Same "render all three, let CSS pick one" pattern as the logo above —
   only one icon is ever visible, matching the current [data-theme]. All
   hidden by default; each theme explicitly shows its own. */
.theme-toggle__icon {
    display: none;
    width: 1.25rem;
    height: 1.25rem;
}

.theme-toggle__icon svg {
    width: 100%;
    height: 100%;
}

.theme-toggle__icon--light {
    display: block;
}

:root[data-theme="dark"] .theme-toggle__icon--light {
    display: none;
}

:root[data-theme="dark"] .theme-toggle__icon--dark {
    display: block;
}

:root[data-theme="high-contrast"] .theme-toggle__icon--light {
    display: none;
}

:root[data-theme="high-contrast"] .theme-toggle__icon--high-contrast {
    display: block;
}

.skip-link {
    position: absolute;
    top: -3rem;
    left: var(--space-2);
    z-index: 1000;
    background: var(--color-primary);
    color: var(--color-paper);
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-sm);
    font-weight: 800;
    text-transform: uppercase;
    text-decoration: none;
    transition: top 0.2s ease;
}

.skip-link:focus-visible {
    top: var(--space-2);
}

.lang-switch {
    display: flex;
    align-items: baseline;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
}

.lang-switch__item {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem;
    margin: -0.35rem;
    color: var(--color-ink);
    text-decoration: none;
}

/* A middle dot between items, not after the last one — spacing lives here
   instead of a flex `gap` so it travels with the separator, not the item. */
.lang-switch__item:not(:last-child)::after {
    content: "\00b7";
    display: inline-block;
    margin: 0 0.4em;
    color: var(--color-muted);
}

a.lang-switch__item:hover,
a.lang-switch__item:focus-visible {
    color: var(--color-primary-glow);
}

.lang-switch__item--current {
    color: var(--color-muted);
}

/* Reusable bold CTA button — platform/section-specific variants build on this in music.css */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    background: var(--color-ink);
    color: var(--color-paper);
    /* font/cursor are inherited by <a> but not by <button>, which otherwise
       falls back to the browser's default control font. */
    font-family: inherit;
    font-size: inherit;
    cursor: pointer;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    text-decoration: none;
    padding: 0.85rem 1.5rem;
    border: none;
    border-radius: var(--radius-sm);
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
    background: var(--color-primary);
    color: var(--color-paper);
    box-shadow: 0 0 32px -6px var(--color-primary);
}

.btn--primary {
    background: var(--color-primary);
}

.btn--primary:hover,
.btn--primary:focus-visible {
    background: var(--color-primary-glow);
    box-shadow: 0 0 32px -4px var(--color-primary);
}

.section-links a {
    display: inline-block;
    margin-right: var(--space-2);
    font-weight: 800;
    text-transform: uppercase;
}

.site-footer {
    max-width: var(--max-width);
    margin: var(--space-5) auto 0;
    padding: var(--space-3) var(--space-2) var(--space-4);
    border-top: 1px solid var(--color-border);
}

.site-footer__social {
    display: flex;
    justify-content: center;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.site-footer__social a {
    display: inline-flex;
    padding: var(--space-1);
    margin: calc(var(--space-1) * -1);
    color: var(--color-muted);
    transition: color 0.2s ease;
}

.site-footer__social a:hover,
.site-footer__social a:focus-visible {
    color: var(--color-primary-glow);
}

.site-footer__social svg {
    width: 1.25rem;
    height: 1.25rem;
}