/* Основа: шрифты, цвета с афиши, кнопки, служебные страницы, cookie, липкая кнопка. */

@font-face { font-family: "Oranienbaum"; font-weight: 400; font-display: swap; src: url("../assets/fonts/oranienbaum-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Oranienbaum"; font-weight: 400; font-display: swap; src: url("../assets/fonts/oranienbaum-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/golos-text-cyrillic-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-display: swap; src: url("../assets/fonts/golos-text-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122; }

:root {
  /* Пипеткой с афиши: фон и цифра «18». */
  --plaster: #D2D3CE;
  --plaster-lit: #DEDAD2;
  --carmine: #951104;
  /* Кармин на чёрном даёт контраст 2,4:1, в зале берём светлый тон. */
  --carmine-lit: #EC7363;
  --ink: #16130F;
  --ink-soft: #4A463F;
  --hall: #0A0908;
  --hall-ink: #EDE9E0;
  --hall-soft: #ADA79B;
  --brass: #C4A36C;
  /* Заливка кнопок: на тёмной странице 17-го текст и заливка разного тона. */
  --fill: var(--carmine);
  --fill-hover: #7A0E03;

  --display: "Oranienbaum", "Times New Roman", serif;
  --text: "Golos Text", system-ui, sans-serif;
  --gutter: clamp(20px, 3.4vw, 56px);
  --measure: 62ch;

  /* Для служебных страниц из шаблона. */
  --accent: var(--carmine);
  --accent-bright: var(--carmine);
  --muted: var(--ink-soft);
}

*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  overflow-x: clip;
  background: var(--plaster);
  color: var(--ink);
  font: 400 clamp(1.0625rem, .98rem + .3vw, 1.25rem) / 1.55 var(--text);
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; }

h1, h2, h3, p, blockquote, figure { margin: 0; }

:focus-visible { outline: 2px solid var(--carmine); outline-offset: 3px; }

.hall :focus-visible, .footer :focus-visible, .cookie :focus-visible { outline-color: var(--brass); }
.buybar:focus-visible { outline-color: #fff; outline-offset: -5px; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.btn {
  display: inline-block;
  padding: .85em 1.7em;
  border-radius: 4px;
  background: var(--fill);
  color: #fff;
  font-weight: 650;
  text-decoration: none;
  transition: background-color .18s;
}

.btn:hover { background: var(--fill-hover); }

/* --- Служебные страницы --- */

.doc { max-width: 720px; margin: 0 auto; padding: 40px 20px 64px; line-height: 1.6; }
.doc h1 { font-family: var(--display); font-weight: 400; font-size: 2.2rem; line-height: 1.15; margin: 0 0 8px; color: var(--carmine); }
.doc h2 { font-size: 1.25rem; margin: 28px 0 10px; }
.doc p, .doc li { margin: 0 0 12px; }
.doc ul { padding-left: 22px; }
.doc__date { color: var(--muted); font-size: .95rem; }
.doc__back { display: inline-block; margin-top: 28px; font-weight: 600; text-decoration: none; }

.nf { max-width: 640px; margin: 0 auto; padding: 64px 20px; text-align: center; }
.nf__code { font-family: var(--display); font-size: 4rem; line-height: 1; color: var(--carmine); margin: 0 0 12px; }
.nf__title { font-family: var(--display); font-weight: 400; font-size: 2rem; margin: 0 0 12px; }
.nf__text { margin: 0 0 24px; }
.nf__btn { display: inline-block; padding: 14px 26px; border-radius: 4px; background: var(--carmine); color: #fff; font-weight: 650; text-decoration: none; }

/* --- Cookie и липкая кнопка --- */

.cookie {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 30;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 14px;
  max-width: 560px;
  margin: 0 auto;
  padding: 10px 14px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--hall-ink);
}

.cookie[hidden], .buybar[hidden] { display: none; }

.cookie__text { font-size: .85rem; line-height: 1.4; }
.cookie__text a { color: var(--brass); }

.cookie__btn {
  flex: 0 0 auto;
  padding: 9px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--hall-ink);
  color: var(--ink);
  font: 600 .9rem var(--text);
  cursor: pointer;
}

.buybar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 15px 20px calc(15px + env(safe-area-inset-bottom));
  background: var(--fill);
  color: #fff;
  font-weight: 650;
  text-align: center;
  text-decoration: none;
}

@media (max-width: 899px) {
  .cookie { bottom: 64px; }
}

@media (min-width: 900px) {
  .buybar { display: none !important; }
  .cookie { right: auto; margin: 0; left: var(--gutter); max-width: 430px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}