/* Общий скин barcelonovna.ru: палитра, шрифты, шапка с меню, подвал.
   Подключают ВСЕ страницы — главная, витрина песен, страница песни, «Спеть», политика.
   Цвета живут только здесь: один переключатель темы обязан перекрашивать весь сайт, а не
   ту страницу, на которой его нажали. Страничные стили (site/songs/song.css, <style> на
   главной) берут цвета отсюда и своих hex не заводят.

   Палитра — из docs/design-brief.md: морская синь, кремовая бумага, терракота, охра, золото.
   Те же цвета у обложек песен и карточек-цитат (tools/quote_card.py), поэтому менять их
   нельзя, не перерисовав картинки. */

/* Шрифты лежат у нас, а не на fonts.googleapis.com. Причины три: внешний хост блокировал
   отрисовку на 751 мс и был на критическом пути к заголовку (он же LCP-элемент); два файла
   .woff2 отдавали 404; и передача IP каждого посетителя в Google не была заявлена в политике
   конфиденциальности, которая обещает обработку только на серверах Яндекса в РФ.
   Шрифты переменные (ось wght), поэтому одного файла на семейство хватает на все насыщенности;
   урезаны до кириллицы и латиницы — 199 КБ на три файла вместо ~770 КБ исходников. */
@font-face{
  font-family:"Playfair Display"; font-style:normal; font-weight:400 900; font-display:swap;
  src:url("/brand/fonts/playfair.woff2") format("woff2");
}
@font-face{
  font-family:"Playfair Display"; font-style:italic; font-weight:400 900; font-display:swap;
  src:url("/brand/fonts/playfair-italic.woff2") format("woff2");
}
@font-face{
  font-family:"Lora"; font-style:normal; font-weight:400 700; font-display:swap;
  src:url("/brand/fonts/lora.woff2") format("woff2");
}

:root{
  /* фирменные константы — одинаковы в обеих темах */
  --sea:#0F2D4D; --sea-deep:#0a2138; --blue:#1E466E;
  --terra:#C24A2A; --ochre:#D8A15A; --gold:#B8860B;
  --cream:#F4EDE2; --cream-2:#E9D8B7;

  /* светлая тема */
  --paper:#F4EDE2; --surface:#FBF7EC; --text:#20323f; --muted:#5c6b76;
  --line:rgba(15,45,77,.15); --accent:#B0421F; --on-accent:#fff; --warn:#A8371F;
  /* Граница КЛИКАБЕЛЬНОГО элемента — отдельный токен: `--line` даёт 1,32:1,
     этого хватает разделителю, но по нему не видно, где кончается кнопка.
     Норма для контуров управления — 3:1. */
  --line-strong:rgba(15,45,77,.62);
  /* Акцент ДЛЯ ТЕКСТА на тонированной подложке. На кремовой бумаге терракота даёт 4,5+, а на
     плашке «акцент 10 %» — уже 4,31 (нашёл axe; мой собственный замер полупрозрачный фон не
     складывал и промахнулся). Тёмной теме отдельный тон не нужен: охра там с запасом. */
  --accent-ink:#96391A;
  --shadow:0 18px 48px -24px rgba(15,45,77,.42);
  --glow-a:rgba(214,138,63,.14); --glow-b:rgba(14,58,79,.12);

  --serif:"Playfair Display",Georgia,"Times New Roman",serif;
  --sans:"Lora",Georgia,"Times New Roman",serif;
}

/* Тёмная тема. Терракота на тёмном фоне даёт контраст ~2:1 — читать невозможно, поэтому
   акцентом становится тёплая охра: тот же бренд, но видимая. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0b262f; --surface:#123b48; --text:#ece3d2; --muted:#c0ced4;
    --line:rgba(216,161,90,.22); --accent:#E9A05C; --on-accent:#20130a; --warn:#F09070;
    --line-strong:rgba(216,161,90,.78);
  --accent-ink:#E9A05C;
    --accent-ink:#E9A05C;
    --shadow:0 20px 50px -22px rgba(0,0,0,.6);
    --glow-a:rgba(214,138,63,.10); --glow-b:rgba(30,70,110,.14);
  }
}
:root[data-theme="dark"]{
  --paper:#0b262f; --surface:#123b48; --text:#ece3d2; --muted:#c0ced4;
  --line:rgba(216,161,90,.22); --accent:#E9A05C; --on-accent:#20130a; --warn:#F09070;
  --line-strong:rgba(216,161,90,.78);
  --accent-ink:#E9A05C;
  --shadow:0 20px 50px -22px rgba(0,0,0,.6);
  --glow-a:rgba(214,138,63,.10); --glow-b:rgba(30,70,110,.14);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--sans); color:var(--text); background:var(--paper);
  line-height:1.65; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%;
  overflow-x:hidden; min-height:100vh;
}
/* Атмосфера: два тёплых пятна по краям. Fixed и под контентом — на всех страницах одинаково. */
body::before{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1200px 600px at 82% -8%, var(--glow-a), transparent 60%),
    radial-gradient(900px 500px at -10% 12%, var(--glow-b), transparent 55%);
}
body > *{position:relative;z-index:1}

a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--serif);font-weight:600;line-height:1.15;letter-spacing:-.01em}
img{max-width:100%}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

.wrap{max-width:1120px;margin:0 auto;padding:0 24px}
.eyebrow{font-family:var(--sans);text-transform:uppercase;letter-spacing:.22em;
  font-size:.83rem;font-weight:600;color:var(--accent)}

/* Тренкадис — мозаика из осколков плитки, фирменный знак проекта: чужие строки, собранные
   в песню. Служит разделителем разделов вместо безликих линеек. */
.mosaic{
  height:9px;border-radius:6px;max-width:260px;
  background:repeating-linear-gradient(60deg,
    var(--terra) 0 12px,var(--ochre) 12px 24px,var(--blue) 24px 36px,
    var(--gold) 36px 48px,var(--cream-2) 48px 60px);
}

/* ---------- шапка ---------- */
.site-head{border-bottom:1px solid var(--line);background:var(--paper)}
@media(min-width:721px){
  .site-head{position:sticky;top:0;z-index:20;
    background:color-mix(in srgb,var(--paper) 88%,transparent);
    backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
}
.site-head-in{display:flex;align-items:center;gap:20px;max-width:1120px;margin:0 auto;padding:13px 24px}
/* Все кликабельные элементы шапки — не ниже 44 px: правило проекта, а не вкусовщина.
   Раньше пункт меню был 35, «Тема» 30, логотип 34 — по таким целям палец промахивается. */
.brand{display:flex;align-items:center;gap:11px;font-family:var(--serif);min-height:44px;
  font-size:1.08rem;font-weight:700;letter-spacing:-.01em;white-space:nowrap}
.brand img{width:34px;height:34px;display:block;border-radius:50%}
.site-nav{display:flex;gap:20px;margin-left:auto;font-size:.94rem}
.site-nav a{color:var(--muted);display:inline-flex;align-items:center;min-height:44px;
  padding:0 3px;min-width:44px;justify-content:center;
  border-bottom:2px solid transparent;transition:.2s}
.site-nav a:hover{color:var(--accent)}
.site-nav a[aria-current]{color:var(--text);border-bottom-color:var(--accent)}
.theme-btn{background:transparent;border:1px solid var(--line-strong);color:var(--text);
  border-radius:100px;padding:0 16px;min-height:44px;display:inline-flex;align-items:center;
  font-family:var(--sans);font-size:.85rem;cursor:pointer;transition:.2s;line-height:1}
.theme-btn:hover{border-color:var(--accent);color:var(--accent)}
@media(max-width:720px){
  .site-head-in{flex-wrap:wrap;gap:9px;padding:11px 16px}
  .theme-btn{margin-left:auto}
  .site-nav{order:3;flex-basis:100%;margin-left:0;gap:18px;font-size:.96rem;
    overflow-x:auto;scrollbar-width:none;padding-bottom:1px}
  .site-nav::-webkit-scrollbar{display:none}
}

/* ---------- кнопки ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  padding:13px 22px;border-radius:100px;font-family:var(--sans);font-weight:600;
  font-size:.95rem;cursor:pointer;transition:.22s;border:1px solid transparent;text-align:center}
.btn-primary{background:var(--accent);color:var(--on-accent);box-shadow:var(--shadow)}
.btn-primary:hover{transform:translateY(-2px);filter:brightness(1.08)}
.btn-ghost{border-color:var(--line-strong);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:var(--accent)}

/* ---------- подвал ---------- */
.site-foot{border-top:1px solid var(--line-strong);margin-top:56px;padding:30px 0 40px;
  color:var(--muted);font-size:.87rem}
.site-foot .wrap{display:flex;flex-wrap:wrap;gap:12px 26px;align-items:baseline}
.foot-nav{display:flex;flex-wrap:wrap;gap:8px 16px}
/* Ссылки подвала — самостоятельные цели, а не слова в предложении: те же 44 px под палец. */
.foot-nav a{display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;min-width:44px;padding:0 4px}
.foot-nav a:hover{color:var(--accent)}
.site-foot .copy{margin-left:auto}
.site-foot a{text-decoration:underline;text-underline-offset:3px}
@media(max-width:720px){.site-foot .copy{margin-left:0;flex-basis:100%}}

/* ---------- плашка про cookie ---------- */
/* Это УВЕДОМЛЕНИЕ, а не запрос согласия: счётчик стартует до нажатия, и кнопка «Хорошо» обещала
   выбор, которого нет (находка launch-gate 17.08.2026). Поэтому кнопка «Понятно», а рядом живая
   ссылка на отказ от Метрики — она и есть настоящий выбор.
   Видна сразу из разметки, а прячется тем же скриптом в <head>, что применяет тему
   (`:root[data-cookie="ok"]`). Раньше её показывал brand.js после загрузки — она всплывала
   через секунду после текста, и Lighthouse считал по ней LCP: самый крупный блок, появившийся
   позже всех, дал 4,0 с на телефоне вместо 2,5. Заодно она стала в одну строку: полоса на
   треть экрана поверх первого впечатления — плохая встреча. */
#cookie{position:fixed;left:16px;right:16px;bottom:16px;max-width:640px;margin:0 auto;z-index:50;
  display:flex;align-items:center;gap:10px 14px;flex-wrap:wrap;
  background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--shadow);padding:10px 14px;font-size:.86rem;line-height:1.45}
#cookie span{flex:1 1 220px}
#cookie a{color:var(--accent);text-decoration:underline}
/* 15px по вертикали — чтобы кнопка вышла ≥44 px: правило проекта для пальца, а не «на глаз». */
#cookie button{flex:0 0 auto;background:var(--accent);color:var(--on-accent);border:0;
  border-radius:10px;padding:15px 22px;font:600 .9rem/1 var(--sans);cursor:pointer}
:root[data-cookie="ok"] #cookie{display:none}

/* Меньше движения. Именно .01ms, а не `animation:none`: появление сделано анимацией из
   opacity:0, и полное выключение оставило бы такого посетителя перед пустым экраном. */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
}

/* ---------- плеер ---------- */
/* Системный плеер оставляем как есть: родные контролы понятнее самодельных, особенно на
   телефоне. Но пускать его на страницу голым нельзя — он выпадает из вёрстки, поэтому
   обрамляем карточкой в фирменном радиусе и красим ползунок акцентом. */
.player{background:var(--surface);border:1px solid var(--line-strong);border-radius:14px;
  padding:10px 12px;display:block}
.player audio{width:100%;display:block;accent-color:var(--accent);color-scheme:light dark}