/* Brand palette — sourced directly from the YANEECK logo (red/black), tuned
   for a dark, atmospheric mood instead of the flat black-on-white original. */
:root {
    /* 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;
    --color-border: rgba(242, 237, 232, 0.1);

    --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;
}

* {
    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");
}

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);
}

.site-header {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: var(--space-2);
}

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

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

.lang-switch {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 0 var(--space-2);
    display: flex;
    gap: var(--space-2);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.85rem;
}

.lang-switch a {
    color: var(--color-ink);
}

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

/* 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;
}