/* Shared by the landing (templates/home.html) and the tickets page
   (templates/tickets.html).

   Everything is lifted off the «Сочинение» album cover and its tour poster:
   a plain black sheet covered edge to edge in pencil drafts, the poster's
   cream type, and the band's mark in thick white paint. There is no accent
   colour because the cover has none — the one thing allowed to stand out
   is the paint. */
:root {
  --black: #000;      /* the cover's ground is true black — the poster melts into the page */
  --chalk: #f5eddb;   /* the poster's cream: all type, every button */
  --pencil: #a39b8e;  /* the handwriting's grey, lifted until it reads as secondary text (7:1) */
  --rule: rgba(245, 237, 219, 0.22);
  --nav-h: 60px;
  /* crossed-out pencil lines, like the ones all over the cover — three passes each */
  --strike-1: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 18' preserveAspectRatio='none'%3E%3Cpath d='M13 4.6L67 4.2L121 5.3L175 4.7L228 5.0L282 6.5L336 6.3L390 7.4L444 7.3L498 7.7L552 7.1L606 7.6L660 7.5L714 6.6L768 6.4L822 5.8L876 4.6L930 5.5L984 5.3L1038 5.2L1092 5.3L1146 7.0L1200 7.0L1254 7.8L1308 8.3L1362 8.1L1415 8.3 M1407 9.3L1353 10.1L1300 9.7L1246 10.8L1193 10.8L1140 11.3L1086 11.3L1033 10.7L979 9.2L926 9.3L872 9.2L819 8.5L765 8.3L712 7.9L658 8.3L605 8.1L552 8.5L498 8.7L445 9.1L391 9.6L338 9.4L284 9.7L231 9.1L177 9.4L124 7.8L71 7.0L17 6.5 M14 12.1L69 12.1L123 12.0L178 12.3L232 12.8L287 12.6L341 11.0L396 11.4L450 10.2L505 10.9L559 10.3L614 11.3L668 11.8L723 11.6L777 12.9L832 12.6L887 12.7L941 13.8L996 13.2L1050 13.3L1105 13.3L1159 13.2L1214 12.2L1268 11.6L1323 12.4L1377 11.6L1432 12.6' fill='none' stroke='%23f5eddb' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --strike-2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 18' preserveAspectRatio='none'%3E%3Cpath d='M12 5.7L66 7.2L119 6.3L173 7.0L226 6.6L279 6.2L333 5.8L386 4.9L440 5.3L493 4.0L547 4.1L600 3.9L653 4.5L707 5.2L760 6.5L814 6.3L867 6.4L920 6.9L974 8.0L1027 6.6L1081 7.1L1134 6.3L1188 6.2L1241 5.3L1294 5.4L1348 5.0L1401 5.2 M1414 5.9L1361 6.4L1308 7.6L1255 8.0L1201 9.1L1148 8.3L1095 9.1L1042 9.1L989 8.3L936 8.0L882 8.0L829 8.0L776 7.8L723 7.3L670 7.3L616 6.8L563 8.1L510 7.8L457 9.4L404 9.3L350 9.6L297 10.7L244 10.5L191 10.1L138 10.3L84 8.8L31 8.8 M6 12.5L61 12.1L115 10.6L170 10.3L224 9.6L279 10.0L333 10.4L388 9.5L442 10.6L496 10.4L551 10.5L605 12.1L660 11.8L714 11.8L769 12.1L823 11.5L878 11.4L932 10.9L987 10.3L1041 10.1L1096 9.4L1150 9.0L1204 9.0L1259 9.4L1313 10.4L1368 10.7L1422 11.8' fill='none' stroke='%23f5eddb' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
  --strike-3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 18' preserveAspectRatio='none'%3E%3Cpath d='M33 7.0L87 8.7L141 8.8L195 9.3L249 9.6L302 8.4L356 8.2L410 8.2L464 7.0L518 6.4L572 5.9L626 6.4L679 6.4L733 6.4L787 5.9L841 7.3L895 7.2L949 7.2L1003 7.8L1057 7.9L1110 7.3L1164 7.7L1218 7.0L1272 6.7L1326 6.6L1380 5.7L1434 5.0 M1400 8.1L1347 8.7L1295 8.9L1242 10.1L1189 9.7L1137 10.9L1084 10.4L1031 10.4L979 10.4L926 10.9L873 9.3L821 9.1L768 8.4L715 8.1L662 8.2L610 7.5L557 7.0L504 7.3L452 7.7L399 9.3L346 9.1L294 9.2L241 9.9L188 9.8L136 9.8L83 8.3L30 7.7 M31 12.1L84 12.1L137 11.8L190 11.1L243 10.3L296 10.0L349 11.5L402 12.0L455 11.3L508 12.2L560 12.6L613 13.4L666 12.1L719 11.8L772 12.5L825 11.5L878 10.8L931 10.7L984 10.0L1037 9.9L1090 9.3L1142 9.3L1195 9.5L1248 10.4L1301 11.3L1354 11.3L1407 11.5' fill='none' stroke='%23f5eddb' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { background: var(--black); scroll-behavior: smooth; }
body {
  position: relative;
  font-family: "Roboto Condensed", system-ui, sans-serif;
  color: var(--chalk);
  line-height: 1.5;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
/* The sheet itself: the cover's own handwriting (the painted mark healed out),
   tiled at about the size it has on the sleeve and dimmed so type stays on top.
   Absolute, not fixed — it is the page, it scrolls with it. */
body::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("/static/home/sochinenie-ground.webp") 50% 0 / 1100px auto repeat;
  opacity: 0.34;
}

.wrap { width: min(1120px, 92vw); margin: 0 auto; }
.visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

/* ---- Type: two voices, both the poster's. The heavy slanted grotesque of the
     wordmark, and the narrow italic capitals of its date list. ---- */
.display { font-family: "Montserrat", sans-serif; font-weight: 900; font-style: italic; text-transform: uppercase; line-height: 0.9; letter-spacing: -0.03em; }
.listing, .eyebrow { font-family: "Roboto Condensed", sans-serif; font-style: italic; font-weight: 500; text-transform: uppercase; letter-spacing: 0.03em; }
.eyebrow { font-size: clamp(15px, 1.7vw, 18px); }

/* the wordmark, straight from logo.svg, in the page's own cream */
.wordmark {
  display: block; aspect-ratio: 2548 / 554; background: var(--chalk);
  -webkit-mask: url("/static/home/logo.svg") center / contain no-repeat;
  mask: url("/static/home/logo.svg") center / contain no-repeat;
}

/* a crossed-out line across the sheet */
.strike { height: 18px; background: var(--strike-1) center / 100% 100% no-repeat; opacity: 0.5; }

/* ---- Buttons: a block of the poster's cream, lettered like its list ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: "Roboto Condensed", sans-serif; font-style: italic; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em;
  font-size: clamp(15px, 1.7vw, 17px); line-height: 1.2; padding: 15px 28px; border-radius: 0;
  border: 2px solid var(--chalk); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .15s ease, color .15s ease;
}
.btn--fill { background: var(--chalk); color: var(--black); }
.btn--fill:hover { background: transparent; color: var(--chalk); }
.btn--line { background: transparent; color: var(--chalk); }
.btn--line:hover { background: var(--chalk); color: var(--black); }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 3px solid var(--chalk); outline-offset: 3px; }

/* ---- Fixed nav. Opaque on purpose: Safari 26 extends an opaque fixed
     header's colour under the status bar. ---- */
.nav {
  position: fixed; top: 0; left: 0; right: 0; height: var(--nav-h); z-index: 100;
  background: var(--black); border-bottom: 1px solid var(--rule);
}
.nav__inner { width: min(1120px, 92vw); margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.nav__brand { display: flex; align-items: center; text-decoration: none; }
.nav__brand .wordmark { height: 24px; }
.nav__links { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 30px); }
.nav__links a { font-family: "Roboto Condensed", sans-serif; font-style: italic; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; font-size: 16px; color: var(--chalk); text-decoration: none; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.nav__links a:hover, .nav__links a[aria-current="page"] { border-bottom-color: var(--chalk); }
.nav__right { display: flex; align-items: center; gap: clamp(12px, 2vw, 22px); }
.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-btn { font-family: "Roboto Condensed", sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0.04em; color: var(--pencil); background: transparent; border: none; cursor: pointer; padding: 4px 6px; line-height: 1; }
.lang-btn:hover { color: var(--chalk); }
.lang-btn.is-active { color: var(--black); background: var(--chalk); }
.nav__toggle { display: none; width: 42px; height: 42px; border: none; background: transparent; cursor: pointer; flex-direction: column; justify-content: center; gap: 5px; align-items: flex-end; }
.nav__toggle span { display: block; width: 24px; height: 2px; background: var(--chalk); transition: transform .2s ease, opacity .2s ease; }
.nav--open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav--open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav--open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 820px) {
  .nav__links {
    position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 99;
    flex-direction: column; align-items: flex-start; gap: 0;
    background: var(--black); padding: 8px 6vw 20px; border-bottom: 1px solid var(--rule);
    transform: translateY(-130%); transition: transform .28s ease;
  }
  .nav--open .nav__links { transform: translateY(0); }
  .nav__links a { font-size: 18px; width: 100%; padding: 14px 0; border-bottom: 1px solid var(--rule); }
  .nav__links a:hover, .nav__links a[aria-current="page"] { border-bottom-color: var(--rule); }
  .nav__toggle { display: flex; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav__links, .nav__toggle span { transition: none; }
}