/* ============================================================
   Эхо Джуури — токены дизайна и компоненты
   Палитра: кремовый фон, терракота, золото. Орнамент по мотивам
   дербентской вышивки. Шрифты: Noto Serif / Noto Sans.
   ============================================================ */

:root {
  --pusk-bg: #FAF7F2;
  --pusk-surface: #FFFFFF;
  --pusk-surface-2: #F3EADB;
  --pusk-fg: #241C14;
  --pusk-muted: #6F6152;
  --pusk-accent: #C4593D;
  --pusk-accent-ink: #9E3F26;
  --pusk-accent-strong: #B04A2E;
  --pusk-gold: #B8902F;
  --pusk-gold-ink: #816319;   /* контраст к поверхность-2 — 4.72, к бумаге — 5.27 */
  --pusk-border: #E3D7C4;

  --pusk-header: rgba(250, 247, 242, .93);

  --pusk-font-display: "Noto Serif", Georgia, "Times New Roman", serif;
  --pusk-font-body: "Noto Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html { scroll-behavior: smooth; }
body {
  background: var(--pusk-bg);
  color: var(--pusk-fg);
  font-family: var(--pusk-font-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .font-display { font-family: var(--pusk-font-display); }

/* Доступность: заметный фокус на клавиатуре */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--pusk-accent-strong);
  outline-offset: 2px;
  border-radius: 4px;
}
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--pusk-fg); color: #fff; padding: .6rem 1rem; border-radius: 0 0 .5rem 0;
}
.skip-link:focus { left: 0; }

/* ---------- Орнамент по мотивам дербентской вышивки ---------- */
.ornament-band {
  height: 14px;
  background-image:
    radial-gradient(circle at 7px 7px, var(--pusk-accent) 2px, transparent 2.5px),
    radial-gradient(circle at 21px 7px, var(--pusk-gold) 2px, transparent 2.5px),
    linear-gradient(90deg, transparent 0 3px, var(--pusk-accent) 3px 4px, transparent 4px 11px,
                    var(--pusk-gold) 11px 12px, transparent 12px);
  background-size: 28px 14px;
  background-repeat: repeat-x;
  opacity: .85;
}
.ornament-corners { position: relative; }
.ornament-corners::before,
.ornament-corners::after {
  content: ""; position: absolute; width: 42px; height: 42px;
  background:
    linear-gradient(var(--pusk-gold), var(--pusk-gold)) center/100% 1px no-repeat,
    linear-gradient(var(--pusk-gold), var(--pusk-gold)) center/1px 100% no-repeat;
  opacity: .5;
}
.ornament-corners::before { top: 10px; left: 10px; }
.ornament-corners::after { bottom: 10px; right: 10px; }
.pattern-bg {
  background-color: var(--pusk-surface-2);
  background-image:
    repeating-linear-gradient(45deg, rgba(196,89,61,.06) 0 2px, transparent 2px 16px),
    repeating-linear-gradient(-45deg, rgba(184,144,47,.06) 0 2px, transparent 2px 16px);
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .7rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: .95rem;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
  cursor: pointer; border: 1px solid transparent; text-decoration: none;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--pusk-accent-strong); color: #fff; }
.btn-primary:hover { background: #943A20; }
.btn-ghost { background: transparent; color: var(--pusk-accent-ink); border-color: var(--pusk-border); }
.btn-ghost:hover { background: var(--pusk-surface-2); }
.btn-gold { background: var(--pusk-gold-ink); color: #fff; }
.btn-gold:hover { background: #6f5417; }

/* ---------- Карточки ---------- */
.card {
  background: var(--pusk-surface);
  border: 1px solid var(--pusk-border);
  border-radius: 18px;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px -18px rgba(36,28,20,.35); border-color: var(--pusk-accent); }
.card-media { overflow: hidden; border-radius: 18px 18px 0 0; }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.card:hover .card-media img { transform: scale(1.05); }

/* ---------- Появление при скролле (замена Framer Motion) ---------- */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
.reveal.is-visible { opacity: 1; transform: none; }

/* ---------- Плеер ---------- */
.player { background: var(--pusk-surface); border: 1px solid var(--pusk-border); border-radius: 18px; }
.player-sticky { box-shadow: 0 -10px 30px -18px rgba(36,28,20,.4); }
/* Липкий плеер внизу — на мобильном, как принято в аудиоприложениях;
   на широком экране остаётся в потоке и не перекрывает список записей. */
@media (max-width: 1023px) {
  .player-sticky { position: sticky; bottom: 0; z-index: 40; }
}
.range {
  -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px;
  background: var(--pusk-surface-2); cursor: pointer;
}
.range::-webkit-slider-thumb {
  -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%;
  background: var(--pusk-accent-strong); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--pusk-accent-strong);
}
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--pusk-accent-strong); border: 2px solid #fff; }
.icobtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--pusk-border);
  background: var(--pusk-surface); color: var(--pusk-fg); cursor: pointer;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.icobtn:hover { background: var(--pusk-surface-2); border-color: var(--pusk-accent); }
.icobtn[aria-pressed="true"] { background: var(--pusk-accent-strong); color: #fff; border-color: var(--pusk-accent-strong); }
.icobtn-play { width: 56px; height: 56px; background: var(--pusk-accent-strong); color: #fff; border-color: var(--pusk-accent-strong); }
.icobtn-play:hover { background: #943A20; }

/* Адаптив шапки: у .icobtn свой display, поэтому утилиты Tailwind (hidden, lg:hidden)
   его не перебивают — эти классы прячут кнопки сами. */
.only-sm { display: none !important; }
.hide-sm { display: inline-flex !important; }
.nav-toggle { display: inline-flex !important; }
@media (max-width: 639px) {
  .site-header .icobtn { width: 40px; height: 40px; }
  .site-header .chip { padding-left: 8px; padding-right: 8px; }
}
@media (min-width: 640px) {
  .only-sm { display: inline-flex !important; }
  .hide-sm { display: none !important; }
}
@media (min-width: 1024px) {
  .nav-toggle { display: none !important; }
}

/* Караоке */
.karaoke-line { padding: .35rem 0; color: var(--pusk-muted); transition: color .25s ease, transform .25s ease, opacity .25s; opacity: .55; }
.karaoke-line.is-current { color: var(--pusk-accent-ink); font-weight: 600; opacity: 1; transform: translateX(6px); }

/* Список треков */
.track-row { display: grid; grid-template-columns: auto 1fr auto; gap: .85rem; align-items: center;
  padding: .8rem 1rem; border-bottom: 1px solid var(--pusk-border); cursor: pointer; background: transparent; width: 100%; text-align: left; }
.track-row:last-child { border-bottom: 0; }
.track-row:hover { background: var(--pusk-surface-2); }
.track-row.is-active { background: var(--pusk-surface-2); box-shadow: inset 3px 0 0 var(--pusk-accent); }
.track-num { font-variant-numeric: tabular-nums; color: var(--pusk-muted); width: 1.6rem; text-align: center; }

/* Фильтры */
.chip {
  border: 1px solid var(--pusk-border); background: var(--pusk-surface); color: var(--pusk-fg);
  padding: .4rem .9rem; border-radius: 999px; font-size: .85rem; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip:hover { border-color: var(--pusk-accent); }
.chip[aria-pressed="true"] { background: var(--pusk-accent-strong); color: #fff; border-color: var(--pusk-accent-strong); }
select.field, input.field, textarea.field {
  width: 100%; padding: .65rem .85rem; border: 1px solid var(--pusk-border); border-radius: 12px;
  background: var(--pusk-surface); color: var(--pusk-fg); font: inherit;
}

/* Лента жизненного цикла */
.lifecycle { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .75rem; scroll-snap-type: x mandatory; }
.lifecycle > li { scroll-snap-align: start; min-width: 220px; }

/* Карта */
#map { height: 460px; border-radius: 18px; border: 1px solid var(--pusk-border); z-index: 1; }
.leaflet-popup-content { font-family: var(--pusk-font-body); }

/* Табы */
.tablist { display: flex; gap: .4rem; flex-wrap: wrap; }
.tab[aria-selected="true"] { background: var(--pusk-accent-strong); color: #fff; border-color: var(--pusk-accent-strong); }

/* Плашки */
.tag {
  display: inline-block; font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  color: var(--pusk-gold-ink); border: 1px solid var(--pusk-border); border-radius: 999px; padding: .2rem .6rem;
}

/* Хлебные крошки */
.crumbs a { color: var(--pusk-muted); text-decoration: none; }
.crumbs a:hover { color: var(--pusk-accent-ink); text-decoration: underline; }


/* ---------- Тёмная тема ---------- */
:root[data-theme="dark"] {
  --pusk-bg: #1A1613;
  --pusk-surface: #241E19;
  --pusk-surface-2: #2E2620;
  --pusk-fg: #F3EADB;
  --pusk-muted: #BCAB96;
  --pusk-accent: #D97757;
  --pusk-accent-ink: #E99C7F;
  --pusk-accent-strong: #B04A2E;   /* белый текст на кнопке — 5.43 */
  --pusk-gold: #D8B15C;
  --pusk-gold-ink: #D8B15C;
  --pusk-border: #3D332A;
  --pusk-header: rgba(26, 22, 19, .93);
}
:root[data-theme="dark"] .card:hover { box-shadow: 0 14px 34px -18px rgba(0,0,0,.7); }
:root[data-theme="dark"] mark { background: var(--pusk-gold); color: #1A1613; }

/* ---------- Печать ---------- */
@media print {
  header, footer, [data-player], .player, .no-print, nav[aria-label="Основная навигация"] { display: none !important; }
  body { background: #fff; color: #000; }
  main { max-width: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Ссылки-действия и мелкие элементы */
.link-track, .underline { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; color: var(--pusk-accent-ink); }
.share-inline { color: var(--pusk-muted); cursor: pointer; display: inline-flex; align-items: center; }
.share-inline:hover { color: var(--pusk-accent-ink); }
mark { background: #F3D9A4; color: inherit; padding: 0 .1em; border-radius: 3px; }
.site-header { background: var(--pusk-header); backdrop-filter: blur(10px); border-color: var(--pusk-border); }
.iconrow { display: inline-flex; align-items: center; gap: .25rem; }
.iconrow .chip[aria-pressed="true"] { background: var(--pusk-accent-strong); color: #fff; border-color: var(--pusk-accent-strong); }
.track-row:focus-visible { outline: 3px solid var(--pusk-accent-strong); outline-offset: -3px; }

/* --- версия для печати: карточка человека или записи --- */
@media print {
  .no-print, .site-header, header, footer, nav, [data-player], [data-tracklist], iframe, .btn { display: none !important; }
  html, body { background: #fff !important; color: #000 !important; }
  body { font-size: 12pt; }
  main { max-width: none !important; padding: 0 !important; }
  .card { border: 1px solid #bbb !important; box-shadow: none !important; break-inside: avoid; }
  a { color: #000 !important; text-decoration: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; color: #444; }
  h1, h2 { break-after: avoid; }
  img { max-width: 100% !important; }
}