/* Type: modern, timeless, sans-first — a deliberate move away from the 2004 pages.
   Golos Text (ParaType, Cyrillic-first) carries UI and prose in both alphabets at equal weight.
   IBM Plex Mono handles metadata. The site's hand-lettered wordmarks are NOT re-created in a script
   face — they stay reference art in assets/brand/. Swap this @import for local @font-face + woff2 when self-hosting. */
@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400;500;600;700;800;900&family=IBM+Plex+Mono:ital,wght@0,400;0,500;1,400&display=swap");
/* ── Base ramps (theme-independent) ───────────────────────────────────────── */
:root{
  /* night — the site's blue, desaturated toward slate so it stops vibrating */
  --night-950:#0D1219;--night-900:#141B24;--night-800:#1B242F;--night-700:#26323F;
  --night-600:#33414F;--night-500:#485767;--night-400:#647383;
  /* mint — the hand-lettered wordmarks, muted to sage-teal */
  --mint-300:#A8D8C4;--mint-400:#7FC4AB;--mint-500:#5AA88E;--mint-600:#3F826C;--mint-700:#2C5B4C;
  /* brass — song titles, the active state (was bright gold) */
  --gold-300:#E3CE9E;--gold-400:#D0B57C;--gold-500:#B99A5F;--gold-600:#997B45;--gold-700:#755C31;
  /* ember — the sun glow, warm but no longer neon */
  --ember-400:#D89A63;--ember-500:#C07D45;--ember-600:#95602F;
  /* azure — links, dusty blue */
  --azure-300:#A3B6CE;--azure-400:#7C95B4;--azure-500:#5A7898;--azure-600:#42607D;
  /* paper + graphite — the light theme */
  --paper-000:#FCFBF9;--paper-100:#F4F2EE;--paper-200:#E9E6E0;--paper-300:#DBD7CF;
  --graphite-500:#5C6169;--graphite-400:#7D838B;--graphite-300:#A7ACB3;
  /* danger — form errors only */
  --danger-400:#D9948A;--danger-500:#B45A4A;--danger-600:#8E4436;
}

/* ── Dark theme (default) ─────────────────────────────────────────────────── */
:root,[data-theme="dark"]{
  color-scheme:dark;
  --text-primary:#DCE0E4;--text-secondary:#9AA3AD;--text-muted:#6B747E;
  --text-inverse:var(--night-950);--text-on-accent:var(--night-950);
  --text-accent:var(--gold-400);--text-accent-soft:var(--gold-300);
  --text-audio:var(--mint-400);--text-danger:var(--danger-400);
  --text-de:#DCE0E4;--text-ru:var(--azure-300);
  --text-link:var(--azure-300);--text-link-hover:var(--mint-400);--text-link-visited:var(--night-400);

  --surface-page:var(--night-900);--surface-card:var(--night-800);--surface-raised:var(--night-700);
  --surface-sunken:var(--night-950);--surface-hover:var(--night-700);--surface-press:var(--night-600);
  --surface-inverse:#DCE0E4;--surface-inverse-hover:#EDEFF1;
  --surface-accent:var(--gold-400);--surface-accent-hover:var(--gold-300);--surface-accent-soft:rgba(208,181,124,.13);
  --surface-audio:rgba(127,196,171,.10);--surface-knob:var(--night-950);
  --surface-disabled:var(--night-700);

  --border-hairline:rgba(220,224,228,.12);--border-subtle:rgba(220,224,228,.22);
  --border-strong:#DCE0E4;--border-accent-color:var(--gold-400);--border-audio:var(--mint-600);
  --border-danger:var(--danger-400);--focus-ring:var(--mint-400);
  --state-disabled-text:var(--night-400);--state-disabled-surface:var(--night-700);

  --wave-played:var(--gold-400);--wave-remaining:rgba(220,224,228,.16);--wave-hover:var(--mint-400);

  --glow-core:var(--ember-400);--glow-mid:var(--ember-600);--glow-edge:transparent;
  --glow-image:radial-gradient(circle at 50% 50%,var(--ember-400) 0%,var(--ember-600) 26%,rgba(149,96,47,.30) 48%,transparent 74%);
  --scrim:rgba(13,18,25,.72);
  --photo-veil:linear-gradient(to top,var(--night-900) 4%,rgba(20,27,36,.58) 46%,rgba(20,27,36,.12) 100%); /* @kind other */
}

/* ── Light theme ──────────────────────────────────────────────────────────── */
[data-theme="light"]{
  color-scheme:light;
  --text-primary:var(--night-900);--text-secondary:var(--graphite-500);--text-muted:var(--graphite-400);
  --text-inverse:#F7F7F4;--text-on-accent:var(--night-950);
  --text-accent:var(--gold-700);--text-accent-soft:var(--gold-600);
  --text-audio:var(--mint-700);--text-danger:var(--danger-600);
  --text-de:var(--night-900);--text-ru:var(--azure-600);
  --text-link:var(--azure-600);--text-link-hover:var(--night-900);--text-link-visited:var(--night-600);

  --surface-page:var(--paper-100);--surface-card:var(--paper-000);--surface-raised:var(--paper-000);
  --surface-sunken:var(--paper-200);--surface-hover:var(--paper-200);--surface-press:var(--paper-300);
  --surface-inverse:var(--night-900);--surface-inverse-hover:var(--night-800);
  --surface-accent:var(--gold-400);--surface-accent-hover:var(--gold-500);--surface-accent-soft:rgba(185,154,95,.18);
  --surface-audio:rgba(63,130,108,.10);--surface-knob:var(--paper-000);
  --surface-disabled:var(--paper-200);

  --border-hairline:rgba(20,27,36,.15);--border-subtle:rgba(20,27,36,.26);
  --border-strong:var(--night-900);--border-accent-color:var(--gold-500);--border-audio:var(--mint-600);
  --border-danger:var(--danger-500);--focus-ring:var(--azure-500);
  --state-disabled-text:var(--graphite-300);--state-disabled-surface:var(--paper-200);

  --wave-played:var(--gold-500);--wave-remaining:rgba(20,27,36,.18);--wave-hover:var(--mint-600);

  --glow-core:var(--ember-400);--glow-mid:var(--ember-500);--glow-edge:transparent;
  --glow-image:radial-gradient(circle at 50% 50%,var(--ember-400) 0%,var(--ember-500) 30%,rgba(192,125,69,.26) 52%,transparent 76%);
  --scrim:rgba(20,27,36,.55);
  --photo-veil:linear-gradient(to top,rgba(20,27,36,.80) 4%,rgba(20,27,36,.32) 50%,rgba(20,27,36,.06) 100%); /* @kind other */
}
:root{
  --font-display:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --font-body:"Golos Text","Helvetica Neue",Arial,sans-serif;
  --font-mono:"IBM Plex Mono","Courier New",monospace;

  --text-2xs:11px;--text-xs:12px;--text-sm:13px;--text-base:16px;--text-md:18px;
  --text-lg:21px;--text-xl:27px;--text-2xl:36px;--text-3xl:50px;--text-4xl:68px;--text-5xl:96px;

  --leading-tight:1;--leading-snug:1.16;--leading-normal:1.55;--leading-lyric:1.7;--leading-loose:1.8;

  --weight-regular:400;--weight-medium:500;--weight-semibold:600;--weight-bold:700;--weight-black:800;

  --tracking-tighter:-.03em;--tracking-tight:-.015em;--tracking-normal:0;
  --tracking-wide:.02em;--tracking-wider:.06em;--tracking-widest:.14em;

  /* Composite roles */
  --type-display:var(--weight-bold) var(--text-4xl)/var(--leading-tight) var(--font-display);
  --type-title:var(--weight-semibold) var(--text-2xl)/var(--leading-snug) var(--font-display);
  --type-heading:var(--weight-semibold) var(--text-xl)/var(--leading-snug) var(--font-display);
  --type-body:var(--weight-regular) var(--text-base)/var(--leading-normal) var(--font-body);
  --type-lyric:var(--weight-regular) var(--text-md)/var(--leading-lyric) var(--font-body);
  --type-meta:var(--weight-medium) var(--text-xs)/1.4 var(--font-mono);
}
:root{
  --space-0:0;--space-1:2px;--space-2:4px;--space-3:8px;--space-4:12px;--space-5:16px;
  --space-6:24px;--space-7:32px;--space-8:48px;--space-9:72px;--space-10:104px;--space-11:144px;
  --gutter:24px;--gutter-wide:48px;
  --measure-lyric:36ch;--measure-prose:68ch;
  --page-max:1200px;--page-pad:32px;--page-pad-sm:20px;
  --column-gap:var(--space-8);
  --control-h-sm:30px;--control-h:38px;--control-h-lg:46px;
}
:root{
  --radius-none:0;--radius-xs:3px;--radius-sm:6px;--radius-md:10px;--radius-lg:16px;--radius-pill:999px;
  --border-w-hair:1px;--border-w:1.5px;--border-w-thick:2px;--rule-w-heavy:3px;
  --border-hair:1px solid var(--border-hairline);
  --border-rule:1px solid var(--border-subtle);
  --border-accent-rule:2px solid var(--border-accent-color);
}
:root{
  /* Depth comes from surface steps and one soft shadow — plus the ember glow. */
  --shadow-none:none;
  --shadow-card:0 1px 2px rgba(13,18,25,.24);
  --shadow-raised:0 6px 20px -8px rgba(13,18,25,.45);
  --shadow-float:0 -1px 0 var(--border-hairline),0 -18px 44px -12px rgba(13,18,25,.55);
  --glow-accent:0 0 0 1px var(--border-accent-color),0 8px 26px -14px rgba(208,181,124,.42);
  --glow-audio:0 0 0 1px var(--border-audio),0 8px 26px -14px rgba(127,196,171,.38);
  --overlay-scrim:var(--scrim);
  --blur-float:saturate(140%) blur(14px); /* @kind other */
}
:root{
  --duration-instant:90ms; /* @kind other */
  --duration-fast:160ms; /* @kind other */
  --duration-base:240ms; /* @kind other */
  --duration-slow:420ms; /* @kind other */
  --ease-standard:cubic-bezier(.2,.7,.2,1); /* @kind other */
  --ease-out:cubic-bezier(0,.7,.3,1); /* @kind other */
  --ease-in:cubic-bezier(.5,0,1,.5); /* @kind other */
  --transition-control:background-color var(--duration-fast) var(--ease-standard),color var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard),box-shadow var(--duration-base) var(--ease-standard),transform var(--duration-fast) var(--ease-standard),opacity var(--duration-fast) var(--ease-standard);
  --transition-theme:background-color var(--duration-slow) var(--ease-standard),color var(--duration-slow) var(--ease-standard),border-color var(--duration-slow) var(--ease-standard);
  --press-scale:.985; /* @kind other */
}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--surface-page);color:var(--text-primary);font:var(--type-body);transition:var(--transition-theme);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
::selection{background:var(--surface-accent);color:var(--text-on-accent)}
a{color:var(--text-link);text-decoration:none;transition:var(--transition-control)}
a:hover{color:var(--text-link-hover)}
a:visited{color:var(--text-link-visited)}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px}
h1,h2,h3,h4{font-family:var(--font-display);font-weight:var(--weight-semibold);margin:0;letter-spacing:var(--tracking-tight)}
p{margin:0 0 var(--space-5);text-wrap:pretty}
hr{border:0;border-top:var(--border-rule);margin:var(--space-6) 0}
img{max-width:100%;display:block}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}
/* Component classes for the Hugo theme.
   The React components in the design system use inline styles; templates need classes.
   Every value below is a token from tokens/ — never a literal, except inside .rr-hero-*
   and .rr-tile-*, which are ALWAYS dark (photo + veil) and therefore theme-independent. */

/* ── layout ─────────────────────────────────────────────────────────────── */
.rr-page{min-height:100vh;display:flex;flex-direction:column;background:var(--surface-page)}
.rr-wrap{width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad)}
.rr-main{flex:1;width:100%;max-width:var(--page-max);margin:0 auto;padding:0 var(--page-pad) var(--space-9)}
.rr-stack{display:flex;flex-direction:column;gap:var(--space-9)}
.rr-stack-tight{display:flex;flex-direction:column;gap:var(--space-7)}
.rr-row{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}
.rr-row-end{display:flex;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap}
.rr-spread{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-6);flex-wrap:wrap}
.rr-push{margin-left:auto}
.rr-prose{max-width:var(--measure-prose)}
.rr-lead{font:var(--type-body);font-size:var(--text-md)}
.rr-body{font:var(--type-body);color:var(--text-secondary)}
.rr-meta{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-secondary)}
.rr-meta-accent{color:var(--text-accent)}
.rr-meta-audio{color:var(--text-audio)}
.rr-meta-muted{color:var(--text-muted)}
.rr-hr{border:0;border-top:var(--border-hair);margin:0}

/* ── section heading ────────────────────────────────────────────────────── */
.rr-head{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);border-top:var(--border-rule);padding-top:var(--space-5)}
.rr-head--norule{border-top:0;padding-top:0}
.rr-head-text{display:flex;flex-direction:column;gap:var(--space-3)}
.rr-kicker{font:var(--type-meta);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-accent)}
.rr-head h2,.rr-head h1{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-xl);line-height:var(--leading-snug);letter-spacing:var(--tracking-tight);margin:0}
.rr-head--sm h2{font-size:var(--text-lg)}
.rr-head--lg h2{font-size:var(--text-2xl)}
.rr-title-ru{color:var(--text-ru);font-family:var(--font-body);font-weight:var(--weight-regular);font-size:var(--text-md)}

/* ── buttons ────────────────────────────────────────────────────────────── */
.rr-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);height:var(--control-h);padding:0 18px;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);border-radius:var(--radius-sm);border:1px solid var(--border-subtle);background:transparent;color:var(--text-primary);text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.rr-btn:hover{background:var(--surface-hover);border-color:var(--border-strong);color:var(--text-primary)}
.rr-btn:active{transform:scale(var(--press-scale))}
.rr-btn[disabled],.rr-btn--off{opacity:.4;cursor:not-allowed;pointer-events:none}
.rr-btn--primary{background:var(--surface-accent);color:var(--text-on-accent);border-color:var(--border-accent-color)}
.rr-btn--primary:hover{background:var(--surface-accent-hover);border-color:var(--surface-accent-hover);color:var(--text-on-accent)}
.rr-btn--audio{background:transparent;color:var(--text-audio);border-color:var(--border-audio)}
.rr-btn--audio:hover{background:var(--surface-audio);color:var(--text-audio)}
.rr-btn--ghost{border-color:transparent;color:var(--text-secondary)}
.rr-btn--sm{height:var(--control-h-sm);padding:0 12px;font-size:var(--text-xs)}
.rr-btn--lg{height:var(--control-h-lg);padding:0 24px;font-size:var(--text-base)}
.rr-btn--full{display:flex;width:100%}
.rr-iconbtn{width:38px;height:38px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);border-radius:var(--radius-sm);background:transparent;color:var(--text-primary);cursor:pointer;transition:var(--transition-control)}
.rr-iconbtn:hover{background:var(--surface-hover)}
.rr-iconbtn--lg{width:46px;height:46px}
.rr-iconbtn--primary{background:var(--surface-accent);color:var(--text-on-accent);border-color:var(--border-accent-color)}
.rr-iconbtn--audio{background:var(--surface-audio);color:var(--text-audio);border-color:var(--border-audio)}

/* ── badges & tags ──────────────────────────────────────────────────────── */
.rr-badge{display:inline-flex;align-items:center;gap:var(--space-2);height:22px;padding:0 9px;font:var(--type-meta);font-size:var(--text-2xs);letter-spacing:var(--tracking-wider);text-transform:uppercase;border:1px solid var(--border-accent-color);border-radius:var(--radius-pill);background:var(--surface-accent);color:var(--text-on-accent);white-space:nowrap}
.rr-badge--quiet{background:transparent;color:var(--text-secondary);border-color:var(--border-subtle)}
.rr-badge--audio{background:var(--surface-audio);color:var(--text-audio);border-color:var(--border-audio)}
.rr-badge--inverse{background:var(--surface-inverse);color:var(--text-inverse);border-color:var(--surface-inverse)}
.rr-tag{display:inline-flex;align-items:center;gap:var(--space-3);height:var(--control-h-sm);padding:0 14px;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);border:1px solid var(--border-hairline);border-radius:var(--radius-pill);background:transparent;color:var(--text-primary);text-decoration:none;cursor:pointer;transition:var(--transition-control)}
.rr-tag:hover{background:var(--surface-hover);color:var(--text-primary)}
.rr-tag[aria-pressed="true"],.rr-tag--on{background:var(--surface-accent-soft);color:var(--text-accent);border-color:var(--border-accent-color)}
.rr-tag-count{font:var(--type-meta);opacity:.7}
.rr-pill{display:inline-flex;align-items:center;gap:var(--space-3);height:var(--control-h);padding:0 14px;font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);border:1px solid var(--border-hairline);border-radius:var(--radius-pill);color:var(--text-primary);text-decoration:none;transition:var(--transition-control)}
.rr-pill:hover{background:var(--surface-hover);color:var(--text-primary)}
.rr-pill--on{background:var(--surface-accent-soft);color:var(--text-accent);border-color:var(--border-accent-color)}
.rr-pill--on .rr-tag-count{color:var(--text-accent-soft)}

/* ── cards ──────────────────────────────────────────────────────────────── */
.rr-card{display:block;padding:var(--space-6);background:var(--surface-card);color:var(--text-primary);border:1px solid var(--border-hairline);border-radius:var(--radius-md);box-shadow:var(--shadow-card)}
.rr-card--raised{background:var(--surface-raised)}
.rr-card--sunken{background:var(--surface-sunken)}
.rr-card--audio{background:var(--surface-audio);border-color:var(--border-audio)}
.rr-card--glow{box-shadow:var(--glow-accent)}
.rr-card--rule{border-top:var(--border-accent-rule)}
.rr-quote{margin:0;padding:var(--space-5) 0 var(--space-5) var(--space-6);border-left:var(--rule-w-heavy) solid var(--border-accent-color);max-width:var(--measure-prose)}
.rr-quote p{margin:0;font:var(--type-body);font-size:var(--text-lg);line-height:var(--leading-normal)}
.rr-quote footer{margin-top:var(--space-4);font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-secondary)}
.rr-list{font:var(--type-body);font-size:var(--text-sm);color:var(--text-secondary);line-height:1.8;margin:var(--space-4) 0 0;padding-left:1.1em}

/* ── forms ──────────────────────────────────────────────────────────────── */
.rr-field{display:flex;flex-direction:column;gap:var(--space-3)}
.rr-field-label{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-secondary)}
.rr-input,.rr-select{width:100%;height:var(--control-h-lg);padding:0 var(--space-4);font:var(--type-body);font-size:var(--text-base);color:var(--text-primary);background:var(--surface-card);border:1px solid var(--border-hairline);border-radius:var(--radius-sm);outline:none;transition:var(--transition-control)}
.rr-input:focus,.rr-select:focus{border-color:var(--border-accent-color);box-shadow:var(--glow-accent)}
.rr-select{appearance:none;padding-right:34px;background-image:linear-gradient(transparent,transparent)}
.rr-select-wrap{position:relative;display:flex}
.rr-select-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;font:var(--type-meta);color:var(--text-secondary)}
.rr-check{display:inline-flex;align-items:center;gap:var(--space-4);font:var(--type-body);font-size:var(--text-base);cursor:pointer}
.rr-check input{position:absolute;opacity:0;width:0;height:0}
.rr-check-box{width:20px;height:20px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-subtle);border-radius:var(--radius-xs);background:var(--surface-card);color:var(--text-on-accent);font:var(--type-meta);font-size:12px;transition:var(--transition-control)}
.rr-check input:checked+.rr-check-box{background:var(--surface-accent);border-color:var(--border-accent-color)}
.rr-check input:checked+.rr-check-box::after{content:"✓"}
.rr-switch{display:inline-flex;align-items:center;gap:var(--space-4);font:var(--type-body);font-size:var(--text-base);cursor:pointer}
.rr-switch input{position:absolute;opacity:0;width:0;height:0}
.rr-switch-track{width:46px;height:24px;flex:0 0 auto;position:relative;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);background:var(--surface-sunken);transition:var(--transition-control)}
.rr-switch-track::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--radius-pill);background:var(--text-muted);transition:left var(--duration-fast) var(--ease-standard),background-color var(--duration-fast) var(--ease-standard)}
.rr-switch input:checked+.rr-switch-track{background:var(--surface-accent);border-color:var(--border-accent-color)}
.rr-switch input:checked+.rr-switch-track::after{left:24px;background:var(--surface-knob)}

/* ── header / footer ────────────────────────────────────────────────────── */
.rr-header{position:sticky;top:0;z-index:30;background:var(--surface-page);border-bottom:var(--border-hair);backdrop-filter:var(--blur-float)}
.rr-header-inner{height:68px;display:flex;align-items:center;gap:var(--space-8)}
.rr-brand{display:inline-flex;align-items:center;gap:var(--space-3);text-decoration:none;white-space:nowrap}
.rr-brand:hover{color:inherit}
.rr-dot{width:16px;height:16px;flex:0 0 auto;border-radius:var(--radius-pill);background:var(--glow-image);box-shadow:0 0 14px -2px var(--glow-core)}
.rr-brand-name{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-md);letter-spacing:var(--tracking-tight);color:var(--text-primary)}
.rr-nav{display:flex;align-items:center;gap:var(--space-6);flex:1}
.rr-nav a{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-sm);letter-spacing:var(--tracking-wide);color:var(--text-secondary);text-decoration:none;padding:6px 0;border-bottom:1px solid transparent;white-space:nowrap;transition:var(--transition-control)}
.rr-nav a:hover{color:var(--text-link-hover)}
.rr-nav a[aria-current]{color:var(--text-accent);border-bottom-color:var(--border-accent-color)}
.rr-header-tools{display:flex;align-items:center;gap:var(--space-4)}
.rr-seg{display:inline-flex;align-items:center;height:30px;padding:2px;gap:2px;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);background:var(--surface-sunken)}
.rr-seg a,.rr-seg button{height:24px;padding:0 10px;border:0;border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);font:var(--type-meta);font-size:var(--text-2xs);letter-spacing:var(--tracking-wider);text-decoration:none;display:inline-flex;align-items:center;cursor:pointer;transition:var(--transition-control)}
.rr-seg a:hover,.rr-seg button:hover{background:var(--surface-hover);color:var(--text-secondary)}
.rr-seg [aria-current],.rr-seg [aria-pressed="true"]{background:var(--surface-accent);color:var(--text-on-accent)}
.rr-theme{display:inline-flex;align-items:center;gap:var(--space-3);height:30px;padding:0 6px 0 8px;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);background:transparent;color:var(--text-secondary);cursor:pointer;transition:var(--transition-control)}
.rr-theme:hover{background:var(--surface-hover);border-color:var(--border-subtle)}
.rr-theme-label{font:var(--type-meta);font-size:var(--text-2xs);letter-spacing:var(--tracking-wider);text-transform:uppercase}
.rr-theme-knob{width:16px;height:16px;flex:0 0 auto;border-radius:var(--radius-pill);background:var(--glow-image);box-shadow:0 0 12px -2px var(--glow-core)}
[data-theme="light"] .rr-theme-knob{background:var(--surface-accent);box-shadow:none}
[data-theme="light"] .rr-theme-label--dark,.rr-theme-label--light{display:none}
[data-theme="light"] .rr-theme-label--light{display:inline}
.rr-footer{background:var(--surface-sunken);border-top:var(--border-hair);margin-top:var(--space-10);color:var(--text-secondary)}
.rr-footer-inner{padding:var(--space-8) var(--page-pad);display:flex;flex-wrap:wrap;gap:var(--space-8);justify-content:space-between;align-items:flex-start;max-width:var(--page-max);margin:0 auto}
.rr-footer-links{display:flex;flex-direction:column;gap:var(--space-3)}
.rr-footer-links a{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-secondary);text-decoration:none}

/* ── hero (always dark) ─────────────────────────────────────────────────── */
.rr-hero{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface-sunken);border:1px solid var(--border-hairline);padding:var(--space-9) var(--space-8) var(--space-8);margin-top:var(--space-7)}
.rr-hero-grid{position:relative;display:grid;grid-template-columns:1.45fr 1fr;gap:var(--space-8);align-items:end}
.rr-hero h1{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-4xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tighter);margin:var(--space-4) 0 0}
.rr-glow{position:absolute;pointer-events:none;background:var(--glow-image);filter:blur(2px);opacity:.8}
.rr-glow--tl{top:-190px;left:-120px;width:420px;height:420px}
.rr-glow--tr{top:-150px;right:-90px;width:320px;height:320px;opacity:.7}
.rr-stats{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6)}
.rr-stat-n{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-2xl);line-height:1;letter-spacing:var(--tracking-tighter);color:var(--gold-300)}
.rr-stat-n--audio{color:var(--mint-300)}
.rr-stat-l{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-secondary);margin-top:6px}

/* ── band hero + band tile (photo, always dark) ─────────────────────────── */
.rr-bandhero{position:relative;overflow:hidden;border-radius:var(--radius-lg);background:var(--surface-sunken);min-height:340px;display:flex;flex-direction:column;justify-content:flex-end}
.rr-bandhero-img,.rr-tile-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%;filter:saturate(.75) contrast(1.02)}
.rr-veil{position:absolute;inset:0;background:var(--photo-veil)}
.rr-bandhero-body{position:relative;padding:var(--space-7) var(--space-7) var(--space-6);display:flex;align-items:flex-end;justify-content:space-between;gap:var(--space-6);flex-wrap:wrap}
.rr-bandhero h1{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-4xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tighter);color:#DCE0E4;margin:0}
.rr-bandhero h1.is-long{font-size:var(--text-3xl)}
.rr-bandhero h1.is-longer{font-size:var(--text-2xl)}
.rr-bandhero-ru{font:var(--type-body);font-size:var(--text-md);color:var(--azure-300)}
.rr-bandhero-meta{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:rgba(220,224,228,.60);margin-top:var(--space-2)}
.rr-tile{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:210px;overflow:hidden;border-radius:var(--radius-md);text-decoration:none;background:var(--surface-sunken);border:1px solid var(--border-hairline);box-shadow:var(--shadow-card);transition:var(--transition-control)}
.rr-tile:hover{border-color:var(--border-accent-color);box-shadow:var(--shadow-raised);transform:translateY(-2px)}
.rr-tile-img{transition:transform var(--duration-slow) var(--ease-standard),filter var(--duration-base) var(--ease-standard)}
.rr-tile:hover .rr-tile-img{filter:saturate(1) contrast(1.02);transform:scale(1.03)}
.rr-tile-body{position:relative;padding:var(--space-5);display:flex;flex-direction:column;gap:var(--space-2)}
.rr-tile-name{font-family:var(--font-display);font-weight:var(--weight-semibold);font-size:var(--text-lg);letter-spacing:var(--tracking-tight);color:#DCE0E4;line-height:var(--leading-snug)}
.rr-tile-ru{font:var(--type-body);font-size:var(--text-sm);color:var(--azure-300)}
.rr-tile-counts{display:flex;gap:var(--space-5);margin-top:var(--space-3);font:var(--type-meta);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wider)}
.rr-tile-counts .t{color:var(--gold-300)}
.rr-tile-counts .a{color:var(--mint-300)}
.rr-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5)}
.rr-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-5)}
.rr-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-8);align-items:start}
.rr-grid-quote{display:grid;grid-template-columns:1.25fr 1fr;gap:var(--space-8);align-items:center}

/* ── track rows ─────────────────────────────────────────────────────────── */
.rr-rows{display:flex;flex-direction:column}
.rr-track{display:grid;grid-template-columns:30px 34px 1fr 1fr 104px 62px;align-items:center;gap:var(--space-4);padding:var(--space-4);border-bottom:var(--border-hair);border-radius:var(--radius-sm);transition:var(--transition-control)}
.rr-track:hover{background:var(--surface-hover)}
.rr-track.is-playing{background:var(--surface-accent-soft)}
.rr-track-n{font:var(--type-meta);color:var(--text-muted)}
.rr-track.is-playing .rr-track-n{color:var(--text-accent)}
.rr-track-play{width:30px;height:30px;padding:0;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);background:transparent;color:var(--text-primary);font:var(--type-meta);font-size:10px;cursor:pointer;transition:var(--transition-control)}
.rr-track-play:hover{background:var(--surface-hover)}
.rr-track.is-playing .rr-track-play{background:var(--surface-accent);border-color:var(--border-accent-color);color:var(--text-on-accent)}
.rr-track-play--off{border-color:transparent;color:var(--text-muted);cursor:default}
.rr-track-de{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-md);letter-spacing:var(--tracking-tight);color:var(--text-de);text-decoration:none}
.rr-track:hover .rr-track-de{text-decoration:underline;text-underline-offset:4px}
.rr-track.is-playing .rr-track-de{color:var(--text-accent)}
.rr-track-ru{font:var(--type-body);font-size:var(--text-sm);color:var(--text-ru)}
.rr-track-src{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-secondary)}
.rr-track-src--suno{color:var(--text-audio)}
.rr-track-time{font:var(--type-meta);color:var(--text-muted);text-align:right}

/* ── lyrics ─────────────────────────────────────────────────────────────── */
.rr-lyrics{display:grid;grid-template-columns:1fr 1fr;gap:var(--column-gap);align-items:start}
.rr-lyrics.is-single{grid-template-columns:1fr}
.rr-lyrics.is-single .rr-col--ru{display:none}
.rr-col{display:flex;flex-direction:column;gap:var(--space-5);min-width:0}
.rr-col-label{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-widest);color:var(--text-accent);padding-bottom:var(--space-3);border-bottom:var(--border-hair)}
.rr-col--ru .rr-col-label{color:var(--text-ru)}
.rr-stanza{margin:0;font:var(--type-lyric);max-width:var(--measure-lyric);white-space:pre-line;color:var(--text-de);border-left:2px solid transparent;padding-left:var(--space-5);transition:var(--transition-control)}
.rr-col--ru .rr-stanza{color:var(--text-ru)}
.rr-stanza.is-active{border-left-color:var(--border-accent-color)}

/* ── song header ────────────────────────────────────────────────────────── */
.rr-song-head{display:flex;flex-direction:column;gap:var(--space-5);padding-top:var(--space-7)}
.rr-back{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-secondary);text-decoration:none}
.rr-song-titles{display:flex;flex-direction:column;gap:var(--space-3);max-width:24ch}
.rr-song-head h1{font-family:var(--font-display);font-weight:var(--weight-bold);font-size:var(--text-3xl);line-height:var(--leading-tight);letter-spacing:var(--tracking-tighter);margin:0}
.rr-song-ru{font:var(--type-body);font-size:var(--text-lg);color:var(--text-ru)}
.rr-song-meta{display:flex;flex-wrap:wrap;gap:var(--space-5);padding-top:var(--space-4);border-top:var(--border-hair)}
.rr-song-meta span{font:var(--type-meta);text-transform:uppercase;letter-spacing:var(--tracking-wide);color:var(--text-secondary)}

/* ── player ─────────────────────────────────────────────────────────────── */
.rr-player{position:sticky;bottom:0;z-index:20;background:var(--surface-card);border-top:var(--border-hair);box-shadow:var(--shadow-float);backdrop-filter:var(--blur-float)}
.rr-player[hidden]{display:none}
.rr-player-inner{max-width:var(--page-max);margin:0 auto;padding:var(--space-5) var(--page-pad);display:flex;align-items:center;gap:var(--space-6)}
.rr-player-btn{width:48px;height:48px;flex:0 0 auto;border-radius:var(--radius-pill);border:1px solid var(--border-audio);background:var(--surface-audio);color:var(--text-audio);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font:var(--type-meta);font-size:14px;box-shadow:var(--glow-audio);transition:var(--transition-control)}
.rr-player[data-source="live"] .rr-player-btn{border-color:var(--border-accent-color);background:var(--surface-accent);color:var(--text-on-accent);box-shadow:var(--glow-accent)}
.rr-player-titles{display:flex;flex-direction:column;gap:3px;min-width:190px;max-width:270px}
.rr-player-de{font-family:var(--font-display);font-weight:var(--weight-medium);font-size:var(--text-md);letter-spacing:var(--tracking-tight);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-player-ru{font:var(--type-body);font-size:var(--text-sm);color:var(--text-ru);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rr-player-scrub{flex:1;display:flex;align-items:center;gap:var(--space-4);min-width:0}
.rr-time{font:var(--type-meta);color:var(--text-secondary)}
.rr-time--total{color:var(--text-muted)}
.rr-bar{flex:1;min-width:0;height:34px;display:flex;align-items:center;cursor:pointer}
.rr-bar-track{width:100%;height:4px;border-radius:var(--radius-pill);background:var(--wave-remaining);overflow:hidden}
.rr-bar-fill{height:100%;width:0;border-radius:var(--radius-pill);background:var(--text-audio)}
.rr-player[data-source="live"] .rr-bar-fill{background:var(--wave-played)}
.rr-player-tools{display:flex;align-items:center;gap:var(--space-3)}
.rr-transport{width:34px;height:34px;border-radius:var(--radius-pill);border:1px solid var(--border-hairline);background:transparent;color:var(--text-secondary);cursor:pointer;font:var(--type-meta);font-size:10px;transition:var(--transition-control)}
.rr-transport:hover{background:var(--surface-hover)}
.rr-player-src{font:var(--type-meta);font-size:var(--text-2xs);text-transform:uppercase;letter-spacing:var(--tracking-wider);color:var(--text-audio)}
.rr-player[data-source="live"] .rr-player-src{color:var(--text-secondary)}

/* ── responsive ─────────────────────────────────────────────────────────── */
@media (max-width:900px){
  .rr-hero-grid,.rr-grid-2,.rr-grid-quote{grid-template-columns:1fr}
  .rr-grid-4{grid-template-columns:1fr 1fr}
  .rr-grid-3{grid-template-columns:1fr}
  .rr-lyrics{grid-template-columns:1fr}
  .rr-lyrics .rr-col--ru{display:flex}
  .rr-track{grid-template-columns:26px 30px 1fr 74px;row-gap:var(--space-2)}
  .rr-track-ru,.rr-track-src{display:none}
  .rr-main,.rr-wrap{padding-left:var(--page-pad-sm);padding-right:var(--page-pad-sm)}
  .rr-hero h1{font-size:var(--text-3xl)}
  .rr-bandhero h1{font-size:var(--text-3xl)}
  .rr-player-titles{min-width:0;max-width:none;flex:1}
  .rr-player-scrub,.rr-player-tools{display:none}
}
.rr-song-titles h1 {
  font-size: clamp(var(--text-xl), 5vw, var(--text-3xl));
  white-space: nowrap;
}
.rr-song-ru {
  font-size: clamp(1rem, 3vw, 1.5rem);
  white-space: nowrap;
}
/* ── Mobile fixes ─────────────────────────────── */
@media (max-width: 768px) {
  .rr-hero h1 {
    font-size: clamp(1.8rem, 8vw, 3rem);
  }

  .rr-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-1, 4px);
  }

  .rr-nav::-webkit-scrollbar {
    display: none;
  }

  .rr-nav a {
    white-space: nowrap;
    font-size: 0.8rem;
  }

  .rr-header {
    padding-inline: var(--space-2, 8px);
  }

  .rr-header .rr-logo {
    font-size: 0.9rem;
  }
}
/* ── Mobile burger ────────────────────────────── */
.rr-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 36px;
  height: 36px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  z-index: 101;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
}
.rr-burger span {
  display: block;
  width: 20px;
  height: 2.5px;
  background: var(--fg, #e4e2dd);
  border-radius: 1px;
  transition: transform 0.2s, opacity 0.2s;
}
.rr-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.rr-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.rr-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 768px) {
  .rr-burger { display: flex; }

  .rr-nav {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg, #18181b);
    z-index: 100;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-5, 24px);
  }
  .rr-nav.is-open { display: flex; }
  .rr-nav a { font-size: 1.25rem; }
  .rr-nav .rr-header-tools { margin-top: var(--space-5, 24px); }
}
.rr-track[hidden] {
  display: none !important;
}