/* Мента & Цвете — демонстрационен макет на сегмент "салон за красота".
   Самостоятелна визуална система (project.md, техдолг 17.6): измислен
   клиент, не основният сайт на МастерСайт.

   Форматът е списание: екранът е разворот, вертикално скролиране няма.
   Целият размер на типографията е производен от --u — единица, изведена
   от височината и ширината на страницата. Затова съдържанието се събира
   в полосата на всякакъв екран, без да се налага скрол.

   Снимките в img/ са в мятна гама (наследство от предишния макет). Тук
   минават през дуотон (.shot) и се четат като редакционна фотография в
   тъмната палитра. */

@font-face {
  font-family: 'MC PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/ptserif-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'MC PT Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/ptserif-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'MC PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../assets/fonts/ptserif-700-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'MC PT Serif';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../../assets/fonts/ptserif-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'MC Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../assets/fonts/manrope-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'MC Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../../assets/fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'MC Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/mono-400-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'MC Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../../assets/fonts/mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------------------------------------------------------------- база */

:root {
  --serif: 'MC PT Serif', Georgia, 'Times New Roman', serif;
  --sans: 'MC Manrope', system-ui, sans-serif;
  --mono: 'MC Mono', ui-monospace, 'Courier New', monospace;

  --ink: #0b0c0f;
  --ink-2: #121419;
  --paper: #191c22;
  --paper-2: #1f232a;
  --edge: rgba(232, 223, 210, 0.13);
  --edge-soft: rgba(232, 223, 210, 0.07);

  --sand: #e9e0d2;
  --sand-2: #b8ae9f;
  --sand-3: #857d71;

  --brass: #c9a25e;
  --brass-2: #9d7c44;
  --silver: #cfd4dc;
  --mint: #86d9bd;

  --dock-h: 62px;
  --folio-h: 30px;
  --pad-v: 26px;
  --gutter: 62px;
  --rail: 58px;
  --vh: 100vh;
  --flip: 820ms; /* FLIP в script.js трябва да съвпада; тесният екран го надписва */
  --ease: cubic-bezier(0.52, 0.02, 0.24, 1);
}

@supports (height: 100dvh) {
  :root { --vh: 100dvh; }
}

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

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  overflow: hidden;
  background: var(--ink);
  color: var(--sand);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

/* Мека светлина зад книгата — иначе тъмният фон е плосък. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 18%, rgba(201, 162, 94, 0.10), transparent 62%),
    radial-gradient(90% 70% at 50% 105%, rgba(201, 162, 94, 0.07), transparent 60%);
}

h1, h2, h3, p, ul, ol, dl, dd, blockquote, figure, fieldset, legend {
  margin: 0;
  padding: 0;
}
ul, ol { list-style: none; }

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

button {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

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

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* -------------------------------------------------- връщане към сайта */

.back-home {
  position: fixed;
  top: 14px;
  left: 16px;
  z-index: 60;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 13px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgba(11, 12, 15, 0.72);
  backdrop-filter: blur(6px);
  color: var(--sand-2);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s, border-color 0.2s;
}
.back-home:hover { color: var(--sand); border-color: var(--brass-2); }

/* ------------------------------------------------------------ сцената */

/* Геометрията на книгата живее тук, а не на .book: лентите отстрани
   имат нужда от --w, за да знаят докъде стига черното поле. */
.mag {
  --ratio: 1.414;
  --avail-h: calc(var(--vh) - var(--dock-h) - var(--folio-h) - var(--pad-v) * 2 - env(safe-area-inset-bottom, 0px));
  --avail-w: calc(100vw - (var(--rail) + var(--gutter)) * 2);
  --h: min(var(--avail-h), calc(var(--avail-w) / var(--ratio)), 820px);
  --w: calc(var(--h) * var(--ratio));
  --pw: calc(var(--w) / 2);
  --u: clamp(4.2px, min(calc(var(--h) / 100), calc(var(--pw) / 52)), 9.2px);

  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: var(--vh);
  padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px));
}

.mag__stage {
  position: relative;
  flex: 1;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: var(--pad-v) calc(var(--rail) + var(--gutter));
  perspective: 2600px;
  perspective-origin: 50% 46%;
}

.mag__folio {
  flex: none;
  height: var(--folio-h);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--sand-3);
}

/* --------------------------------------------------------- геометрия */

.book {
  position: relative;
  z-index: 1;
  width: var(--w);
  height: var(--h);
  transform-style: preserve-3d;
}

/* Дъното на книгата — вижда се на първия и последния разворот, където
   едната половина е празна. */
.book::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, #101216, #08090b);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
  border-radius: 2px;
}

/* ------------------------------------------------------- ленти встрани */

/* Полето между ръба на екрана и списанието. Ширината му се смята от
   --w, затова лентите никога не влизат върху страницата. */
.ribbons {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 0;
  width: calc((100% - var(--w)) / 2 - var(--rail));
  overflow: hidden;
  pointer-events: none;
}
/* Отстъпът е колкото рейката: тя получава чиста колона, а двете полета
   с ленти остават еднакво широки. */
.ribbons--left { left: var(--rail); }
.ribbons--right { right: var(--rail); }

.ribbons i {
  position: absolute;
  top: 0;
  display: block;
  width: 7px;
  height: 30vh;
  opacity: 0;
  animation: rib-fall 14s linear infinite;
}
/* Носителят пада, самата лента се вие вътре в него. */
.ribbons i::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, transparent, var(--rib, var(--brass)) 46%, transparent);
  transform-origin: 50% 0;
  animation: rib-sway 3.6s ease-in-out infinite alternate;
}

@keyframes rib-fall {
  0% { transform: translate3d(0, -34vh, 0); opacity: 0; }
  14% { opacity: var(--peak, 0.5); }
  82% { opacity: var(--peak, 0.5); }
  100% { transform: translate3d(0, 116vh, 0); opacity: 0; }
}
@keyframes rib-sway {
  from { transform: rotate(-8deg) scaleX(0.45); }
  to { transform: rotate(8deg) scaleX(1); }
}

/* Разсейване: позиция, цвят, плътност, темпо и фаза. Част от лентите
   тръгват със закъснение назад във времето, за да не падат в такт. */
.ribbons i:nth-child(1) { left: 8%; --rib: var(--brass); --peak: 0.55; animation-duration: 13s; animation-delay: -2s; }
.ribbons i:nth-child(2) { left: 26%; --rib: var(--silver); --peak: 0.3; width: 4px; animation-duration: 18s; animation-delay: -9s; }
.ribbons i:nth-child(3) { left: 44%; --rib: var(--brass); --peak: 0.4; width: 5px; animation-duration: 16s; animation-delay: -5s; }
.ribbons i:nth-child(4) { left: 62%; --rib: var(--silver); --peak: 0.42; animation-duration: 11s; animation-delay: -7s; }
.ribbons i:nth-child(5) { left: 80%; --rib: var(--brass); --peak: 0.26; width: 3px; animation-duration: 21s; animation-delay: -1s; }
.ribbons i:nth-child(6) { left: 16%; --rib: var(--silver); --peak: 0.34; width: 5px; height: 22vh; animation-duration: 15s; animation-delay: -12s; }
.ribbons i:nth-child(7) { left: 35%; --rib: var(--brass); --peak: 0.5; width: 8px; height: 38vh; animation-duration: 19s; animation-delay: -4s; }
.ribbons i:nth-child(8) { left: 54%; --rib: var(--silver); --peak: 0.22; width: 3px; height: 26vh; animation-duration: 12s; animation-delay: -10s; }
.ribbons i:nth-child(9) { left: 72%; --rib: var(--brass); --peak: 0.36; width: 6px; height: 34vh; animation-duration: 17s; animation-delay: -14s; }
.ribbons i:nth-child(10) { left: 90%; --rib: var(--silver); --peak: 0.3; width: 4px; height: 20vh; animation-duration: 22s; animation-delay: -6s; }

/* Дясната страна пада със свой ритъм, иначе двете полета се огледалят. */
.ribbons--right i:nth-child(odd) { animation-delay: -8s; }
.ribbons--right i:nth-child(even) { animation-delay: -3s; }
.ribbons--right i::before { animation-duration: 4.4s; }

/* ------------------------------------------- рейка за бързо прелистване */

.rail {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 45;
  width: var(--rail);
  display: flex;
  align-items: center;
  justify-content: center;
}

.rail__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.rail__item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px 0;
}

.rail__tick {
  display: block;
  width: 14px;
  height: 1px;
  background: var(--sand-3);
  transition: width 0.25s var(--ease), background-color 0.25s;
}
.rail__item:hover .rail__tick { width: 26px; background: var(--mint); }
.rail__item.is-current .rail__tick {
  width: 30px;
  height: 2px;
  background: var(--brass);
  box-shadow: 0 0 10px rgba(201, 162, 94, 0.6);
}

.rail__label {
  position: absolute;
  left: 34px;
  z-index: 2;
  padding: 5px 10px;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: rgba(8, 9, 11, 0.94);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--sand);
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-4px);
  transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
}
.rail__item:hover .rail__label,
.rail__item:focus-visible .rail__label {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.leaf {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100%;
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform var(--flip) var(--ease);
}
.leaf.is-flipped,
.leaf.is-past { transform: rotateY(-180deg); }
.leaf.is-moving { will-change: transform; }

.leaf__face {
  position: absolute;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  background:
    linear-gradient(158deg, var(--paper-2), var(--paper) 46%, var(--ink-2));
}
.leaf__face--back { transform: rotateY(180deg); }

/* Сянка към корешка: у лицевата страна той е отляво, у обратната —
   отдясно (обратната е огледална, вижте transform по-горе). */
.leaf__face::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 9%;
  pointer-events: none;
  z-index: 3;
}
.leaf__face--front::after {
  left: 0;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent);
}
.leaf__face--back::after {
  right: 0;
  background: linear-gradient(270deg, rgba(0, 0, 0, 0.55), transparent);
}

/* Външният ръб на листа — тънка светла нишка, за да се чете като хартия. */
.leaf__face--front { border-right: 1px solid var(--edge-soft); }
.leaf__face--back { border-left: 1px solid var(--edge-soft); }

/* ---------------------------------------------------------- страница */

.page {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--u) * 6.4) calc(var(--u) * 6);
  overflow: hidden;
}

.page__head {
  flex: none;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.6);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--sand-3);
}

.page__body {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.4);
  padding: calc(var(--u) * 3.4) 0 calc(var(--u) * 1.6);
  overflow: hidden;
}
.page__body--center { justify-content: center; gap: calc(var(--u) * 3); }

.page__folio {
  flex: none;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.9);
  letter-spacing: 0.14em;
  color: var(--sand-3);
}
.leaf__face--front .page__folio { text-align: right; }

.page__title {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--u) * 5.4);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--sand);
}
.page__title--xl { font-size: calc(var(--u) * 8); }
.page__title--sm { font-size: calc(var(--u) * 3.2); }
.page__title--rule {
  padding-bottom: calc(var(--u) * 1.6);
  border-bottom: 1px solid var(--edge);
}
.page__title--rule + .page__title--rule,
.entries + .page__title--rule,
.tariff + .page__title--rule { margin-top: calc(var(--u) * 1.4); }

.page__lede {
  font-size: calc(var(--u) * 2.3);
  line-height: 1.55;
  color: var(--sand-2);
}

.page__note {
  margin-top: auto;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.55);
  line-height: 1.55;
  letter-spacing: 0.04em;
  color: var(--sand-3);
}

.kicker {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.55);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
}

.prose {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.8);
  max-width: 42ch;
  font-size: calc(var(--u) * 2.3);
  line-height: 1.62;
  color: var(--sand-2);
}
/* Буквица: ментова, в златен ореол — единственото топло петно на полосата. */
.prose--drop > p:first-child::first-letter {
  float: left;
  margin: calc(var(--u) * 0.9) calc(var(--u) * 1.2) 0 0;
  font-family: var(--serif);
  font-size: calc(var(--u) * 8.4);
  line-height: 0.76;
  color: var(--mint);
  text-shadow:
    0 0 calc(var(--u) * 2) rgba(201, 162, 94, 0.65),
    0 0 calc(var(--u) * 5) rgba(201, 162, 94, 0.35),
    0 0 calc(var(--u) * 9) rgba(201, 162, 94, 0.18);
}

/* ---------------------------------------------------------- корица */

.page--cover { padding: 0; }

.cover__shot {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.cover__shot::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: linear-gradient(178deg, rgba(11, 12, 15, 0.35) 0%, rgba(11, 12, 15, 0.82) 58%, rgba(11, 12, 15, 0.96) 100%);
}

.cover__body {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: calc(var(--u) * 6.4) calc(var(--u) * 6);
}

.cover__issue {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.6);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
}

.cover__title {
  margin-top: auto;
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--u) * 10.5);
  line-height: 0.94;
  letter-spacing: -0.03em;
}
.cover__title span {
  display: block;
  font-size: calc(var(--u) * 5);
  color: var(--brass);
}

.cover__sub {
  margin-top: calc(var(--u) * 1.6);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.7);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand-2);
}

.cover__line {
  margin-top: calc(var(--u) * 3.4);
  padding-top: calc(var(--u) * 2.4);
  border-top: 1px solid var(--edge);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.7);
  letter-spacing: 0.16em;
  color: var(--sand-3);
}

.cover__lede {
  margin-top: calc(var(--u) * 1.4);
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.9);
  line-height: 1.35;
  color: var(--sand);
}

.cover__hint {
  margin-top: calc(var(--u) * 3);
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.6);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--brass);
}
.cover__hint span:last-child { animation: nudge 2.6s ease-in-out infinite; }

@keyframes nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.35em); }
}

/* ------------------------------------------------------- съдържание */

.toc {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.2);
}
.toc__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.2);
  width: 100%;
  padding: calc(var(--u) * 0.55) 0;
  border-bottom: 1px solid var(--edge-soft);
  text-align: left;
  transition: color 0.2s;
}
.toc__name {
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.4);
  line-height: 1.35;
  color: var(--sand);
}
.toc__dots {
  flex: 1;
  border-bottom: 1px dotted var(--sand-3);
  transform: translateY(-0.25em);
}
.toc__num {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.8);
  color: var(--brass);
}

/* ------------------------------------------------------------ списъци */

.entries {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2);
}
.entries--tight { gap: calc(var(--u) * 1.1); }

.entry dt {
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.8);
  color: var(--sand);
}
.entry dd {
  font-size: calc(var(--u) * 2.05);
  line-height: 1.45;
  color: var(--sand-3);
}

/* -------------------------------------------------------------- екип */

.crew {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.6);
}
.crew__row {
  padding-left: calc(var(--u) * 2.2);
  border-left: 2px solid var(--brass-2);
}
.crew__name {
  font-family: var(--serif);
  font-size: calc(var(--u) * 3.2);
  color: var(--sand);
}
.crew__role {
  margin-left: calc(var(--u) * 1.2);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.5);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--brass);
}
.crew__quote {
  margin-top: calc(var(--u) * 0.7);
  font-size: calc(var(--u) * 2.1);
  line-height: 1.55;
  color: var(--sand-3);
}
.crew__quote q { font-style: italic; color: var(--sand-2); }

.aside {
  margin-top: auto;
  padding: calc(var(--u) * 2.8);
  border: 1px solid var(--edge);
  background: rgba(201, 162, 94, 0.05);
}
.aside__title {
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.9);
  color: var(--sand);
}
.aside__text {
  margin: calc(var(--u) * 0.8) 0 calc(var(--u) * 2);
  font-size: calc(var(--u) * 2);
  line-height: 1.5;
  color: var(--sand-3);
}

/* ---------------------------------------------------------- галерия */

.page--flush { padding: 0; }

.plates {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
}
.plate {
  position: relative;
  overflow: hidden;
}
.plate figcaption {
  position: absolute;
  left: calc(var(--u) * 1.6);
  bottom: calc(var(--u) * 1.3);
  z-index: 3;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand);
}

.plates__cap {
  flex: none;
  padding: calc(var(--u) * 2.8) calc(var(--u) * 6) calc(var(--u) * 2);
  border-top: 1px solid var(--edge);
}
.plates__cap p {
  margin-top: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 1.95);
  color: var(--sand-3);
}
.page__folio--over {
  position: absolute;
  right: calc(var(--u) * 6);
  bottom: calc(var(--u) * 2.4);
}
.leaf__face--back .page__folio--over { right: auto; left: calc(var(--u) * 6); }

/* Дуотон за наследените мятни снимки. Размерът е задължителен: иначе
   снимката ляга с естествената си височина и разпъва полосата. */
.shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) sepia(0.42) brightness(0.62) contrast(1.16);
}
.shot::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(152deg, rgba(201, 162, 94, 0.34), rgba(11, 12, 15, 0.6));
  mix-blend-mode: multiply;
}

/* ---------------------------------------------------------- правила */

.rules {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.9);
}
.rules li {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 2);
}
.rules__num {
  flex: none;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.8);
  color: var(--brass);
}
.rules p {
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.5);
  line-height: 1.4;
  color: var(--sand-2);
}

/* ------------------------------------------------------------- цени */

.tariff {
  display: flex;
  flex-direction: column;
}
.tariff__row {
  display: flex;
  align-items: baseline;
  gap: calc(var(--u) * 1.2);
  padding: calc(var(--u) * 0.72) 0;
  border-bottom: 1px solid var(--edge-soft);
}
.tariff__row span {
  font-size: calc(var(--u) * 2.15);
  color: var(--sand-2);
}
.tariff__row i {
  flex: 1;
  border-bottom: 1px dotted var(--sand-3);
  transform: translateY(-0.25em);
}
.tariff__row b {
  font-family: var(--mono);
  font-weight: 400;
  font-size: calc(var(--u) * 2);
  color: var(--brass);
  white-space: nowrap;
}

/* ------------------------------------------------------------ комбо */

.combo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: calc(var(--u) * 1.6);
}
.combo article {
  padding: calc(var(--u) * 2.2);
  border: 1px solid var(--edge);
  background: rgba(232, 223, 210, 0.03);
}
.combo h3 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: calc(var(--u) * 2.5);
  color: var(--sand);
}
.combo p {
  margin-top: calc(var(--u) * 0.7);
  font-size: calc(var(--u) * 1.9);
  line-height: 1.45;
  color: var(--sand-3);
}

/* ----------------------------------------------------------- отзиви */

.voices {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 2.4);
}
.voices blockquote {
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.4);
  line-height: 1.45;
  color: var(--sand-2);
}
.voices blockquote::before { content: '„'; color: var(--brass); }
.voices blockquote::after { content: '“'; color: var(--brass); }
.voices figcaption {
  margin-top: calc(var(--u) * 0.6);
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--sand-3);
}

/* ---------------------------------------------------------- въпроси */

.qa {
  display: flex;
  flex-direction: column;
}
.qa details {
  border-bottom: 1px solid var(--edge-soft);
}
.qa summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: calc(var(--u) * 1.5);
  padding: calc(var(--u) * 1.35) 0;
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.3);
  color: var(--sand);
  cursor: pointer;
  list-style: none;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: '+';
  flex: none;
  font-family: var(--mono);
  font-size: calc(var(--u) * 2.2);
  color: var(--brass);
}
.qa details[open] summary::after { content: '–'; }
.qa details p {
  padding: 0 0 calc(var(--u) * 1.5);
  font-size: calc(var(--u) * 1.95);
  line-height: 1.5;
  color: var(--sand-3);
}

/* ---------------------------------------------------------- финалът */

.page--last .page__body { align-items: flex-start; }

.last__lines {
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.6);
  font-family: var(--serif);
  font-size: calc(var(--u) * 2.6);
  line-height: 1.35;
  color: var(--sand-2);
}
.last__sign {
  padding-top: calc(var(--u) * 2.4);
  border-top: 1px solid var(--edge);
  font-size: calc(var(--u) * 2);
  color: var(--sand-3);
}
.last__meta {
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.5);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--brass-2);
}

/* ------------------------------------------------------ ментол при hover

   Страницата е тъмна и златна; ментата е кратък студен акцент, който
   показва кой блок е под курсора. Затова е само върху блокове, никога
   върху едрия текст. Върху inert страница не се задейства — браузърът
   не пуска указателя до скритите полоси. */

.toc__row,
.crew__row,
.combo article,
.plate,
.tariff__row,
.qa summary,
.rules li,
.voices figure,
.aside {
  transition: color 0.25s, background-color 0.25s, border-color 0.25s;
}

.toc__row:hover .toc__name,
.qa summary:hover,
.rules li:hover p,
.combo article:hover h3,
.crew__row:hover .crew__name { color: var(--mint); }

.toc__row:hover { border-bottom-color: var(--mint); }

.crew__row:hover { border-left-color: var(--mint); }

.combo article:hover,
.aside:hover {
  border-color: rgba(134, 217, 189, 0.42);
  background: rgba(134, 217, 189, 0.06);
}

.tariff__row:hover {
  border-bottom-color: var(--mint);
  background: rgba(134, 217, 189, 0.05);
}
.tariff__row:hover span { color: var(--mint); }

.voices figure:hover blockquote { color: var(--mint); }

.plate::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  background: rgba(134, 217, 189, 0.22);
  opacity: 0;
  transition: opacity 0.3s;
}
.plate:hover::before { opacity: 1; }

/* ---------------------------------------------------------- бутони */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--u) * 1.5) calc(var(--u) * 3);
  border: 1px solid var(--brass-2);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: calc(var(--u) * 1.7);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--brass);
  transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}
.btn:hover { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn--solid { background: var(--brass); border-color: var(--brass); color: var(--ink); }
.btn--solid:hover { background: var(--sand); border-color: var(--sand); }
.btn--block { width: 100%; }

/* --------------------------------------------------- стрелки за листане */

.turn {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 40;
  width: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sand-3);
  font-size: 30px;
  line-height: 1;
  transition: color 0.2s, background-color 0.25s;
}
.turn--prev { left: var(--rail); }
.turn--next { right: var(--rail); }
.turn:hover { color: var(--brass); }
.turn--prev:hover { background: linear-gradient(90deg, rgba(201, 162, 94, 0.09), transparent); }
.turn--next:hover { background: linear-gradient(270deg, rgba(201, 162, 94, 0.09), transparent); }
.turn[disabled] { opacity: 0.22; cursor: default; }
.turn[disabled]:hover { color: var(--sand-3); background: none; }

/* -------------------------------------------------------------- док */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 50;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  background: linear-gradient(180deg, #0f1115, #08090b);
  border-top: 1px solid var(--edge);
}

.dock__bar {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: var(--dock-h);
  padding: 0 20px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--sand);
}
.dock__bar-label { color: var(--brass); }
.dock__bar-sep {
  width: 1px;
  height: 16px;
  background: var(--edge);
}
.dock__bar-sub { color: var(--sand-3); }
.dock__bar-mark {
  margin-left: auto;
  font-size: 15px;
  color: var(--brass);
  transition: transform 0.3s var(--ease);
}
.dock[data-open="true"] .dock__bar-mark { transform: rotate(180deg); }

.dock__panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  max-height: calc(var(--vh) - var(--dock-h) - 16px);
  overflow-y: auto;
  overscroll-behavior: contain;
  background: linear-gradient(180deg, #14161b, #0d0e12);
  border-top: 1px solid var(--edge);
  box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.6);
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.45s var(--ease), opacity 0.3s ease, visibility 0.45s;
}
.dock[data-open="true"] .dock__panel {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;
}

.dock__panel-inner {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
  padding: 26px 20px 30px;
}

.dock__close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 32px;
  height: 32px;
  border: 1px solid var(--edge);
  border-radius: 50%;
  color: var(--sand-3);
  font-size: 13px;
  line-height: 1;
}
.dock__close:hover { color: var(--sand); border-color: var(--brass-2); }

.dock__eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brass);
}
.dock__title {
  margin-top: 6px;
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(22px, 3.4vw, 31px);
  line-height: 1.15;
  color: var(--sand);
}

/* ------------------------------------------------------------ форма */

.bform { margin-top: 20px; }

.bform__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 0;
}
.bform__chip { cursor: pointer; }
.bform__chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.bform__chip span {
  display: inline-block;
  padding: 8px 15px;
  border: 1px solid var(--edge);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand-2);
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}
.bform__chip input:checked + span {
  border-color: var(--brass);
  background: rgba(201, 162, 94, 0.14);
  color: var(--brass);
}
.bform__chip input:focus-visible + span { outline: 2px solid var(--brass); outline-offset: 2px; }

.bform__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.bform__field {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--edge);
  border-radius: 4px;
  background: rgba(232, 223, 210, 0.04);
  color: var(--sand);
  font-family: var(--sans);
  font-size: 14px;
}
.bform__field::placeholder { color: var(--sand-3); }
.bform__field:focus { outline: none; border-color: var(--brass-2); }
.bform__field--wide { grid-column: 1 / -1; }
select.bform__field { appearance: none; cursor: pointer; }
select.bform__field option { background: #14161b; color: var(--sand); }

.bform .btn { margin-top: 14px; padding: 14px 24px; font-size: 12px; }

.bform__hint {
  margin-top: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--sand-3);
  text-align: center;
}

.bform__done {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 22px;
  padding: 18px;
  border: 1px solid var(--brass-2);
  background: rgba(201, 162, 94, 0.08);
  font-size: 14px;
  line-height: 1.55;
  color: var(--sand-2);
}
.bform__done-mark {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--brass);
  color: var(--ink);
  font-size: 14px;
}
.bform__done strong { color: var(--sand); }

/* --------------------------------------------------------- телефони */

@media (max-width: 899px) {
  :root {
    --gutter: 0px;
    --pad-v: 12px;
    --dock-h: 58px;
    --folio-h: 26px;
    --rail: 28px;
    /* Тук се върти една страна на ъгъл 100°, а не лист на 180°: пътят е
       по-къс, затова и времето е по-кратко. JS не следи тази стойност —
       на тесен екран той не разчита на края на прехода. */
    --flip: 520ms;
  }

  /* Черното поле встрани се свива до рейката — ленти няма къде да падат. */
  .ribbons { display: none; }

  .rail__list { gap: 4px; }
  .rail__item { width: 28px; justify-content: center; padding: 6px 0; }
  .rail__tick { width: 10px; }
  .rail__item:hover .rail__tick { width: 16px; }
  .rail__item.is-current .rail__tick { width: 18px; }
  .rail__label { left: 26px; font-size: 10px; }

  .back-home {
    top: auto;
    bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 10px);
    left: 10px;
    padding: 5px 10px;
    font-size: 10px;
  }
  .back-home__label { display: none; }

  .mag {
    --w: min(var(--avail-w), 470px);
    --h: min(var(--avail-h), 860px);
    --pw: var(--w);
    --u: clamp(4.2px, min(calc(var(--h) / 100), calc(var(--pw) / 54)), 8.6px);
  }

  /* Полосата е тясна и висока: същият текст се пренася на повече редове,
     затова вертикалният ритъм тук е по-стегнат от разворота. */
  .page { padding: calc(var(--u) * 5.4) calc(var(--u) * 5); }
  .page__body {
    padding: calc(var(--u) * 2.4) 0 calc(var(--u) * 1.2);
    gap: calc(var(--u) * 1.7);
  }
  .page__body--center { gap: calc(var(--u) * 2.2); }
  .prose { gap: calc(var(--u) * 1.4); }
  .entries { gap: calc(var(--u) * 1.4); }
  .entries--tight { gap: calc(var(--u) * 0.9); }
  .crew { gap: calc(var(--u) * 1.8); }
  .voices { gap: calc(var(--u) * 1.6); }
  .rules { gap: calc(var(--u) * 1.4); }
  .last__lines { gap: calc(var(--u) * 0.4); }
  .combo article { padding: calc(var(--u) * 1.6); }
  .page__title--xl { font-size: calc(var(--u) * 6.6); }
  .cover__title { font-size: calc(var(--u) * 9); }
  .cover__line { margin-top: calc(var(--u) * 2.4); }
  .cover__hint { margin-top: calc(var(--u) * 2.2); }

  /* Една полоса: листът вече не се върти сам. Върти се самата страна на
     листа около панта у левия ръб — както се прелиства истинска страница.
     След 90° отгънатата страна изчезва (backface-visibility), а отдолу
     вече лежи следващата. Затова всичките петнайсет прехода изглеждат
     еднакво; преди половината бяха завъртане около центъра, а другата
     половина — отместване вляво. */
  /* Отгъващата се страна се проектира извън корицата: далечният ѝ ръб се
     уголемява от перспективата. Затова журналът реже по своя контур —
     иначе страницата подава навън и екранът се сдобива с превъртане. */
  .book { transform-style: flat; overflow: hidden; }
  .leaf {
    left: 0;
    width: 100%;
    transform-style: flat;
  }
  .leaf.is-flipped,
  .leaf.is-past { transform: none; }

  /* Самият лист вече не се върти, тоест коробът му остава да лежи върху
     всичко и би поглъщал допира. Затова допирът минава през страните: у
     отгънатата той е изключен, у видимата — включен. */
  .leaf { pointer-events: none; }
  .leaf__face { pointer-events: auto; }
  .leaf__face.is-turned { pointer-events: none; }

  /* Перспективата седи в самия transform, а не у родителя: така страните
     се подреждат по z-index — лицевата над обратната, лист N над N+1, тоест
     страниците лежат по реда 0,1,2,…,15. */
  .leaf__face {
    transform-origin: left center;
    transform: none;
    transition: transform var(--flip) var(--ease);
  }
  .leaf__face--front { z-index: 2; border-right: 0; }
  .leaf__face--back {
    z-index: 1;
    border-left: 0;
    transform: none;
  }
  /* Сто градуса, а не сто и осемдесет: отвъд 90° страната вече е с гръб към
     нас и backface-visibility я скрива, тоест остатъкът от завъртането е
     невидим. При връщане назад тъкмо той би бил мъртва пауза преди
     страницата да се появи. */
  .leaf__face.is-turned { transform: perspective(1600px) rotateY(-100deg); }

  /* Корешокът тук е винаги вляво: обратната страна вече не е огледална. */
  .leaf__face::after {
    width: 5%;
    left: 0;
    right: auto;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.55), transparent);
  }
  .leaf__face .page__folio { text-align: right; }
  .leaf__face--back .page__folio--over {
    left: auto;
    right: calc(var(--u) * 6);
  }

  /* На тесен екран основният жест е свайпът; стрелките са подсказка и се
     припокриват с външното поле на страницата, за да са достъпни. */
  .turn { width: 38px; font-size: 22px; opacity: 0.7; }

  .combo { grid-template-columns: 1fr; gap: calc(var(--u) * 1.1); }
  .bform__grid { grid-template-columns: 1fr; }
  .dock__bar-sub, .dock__bar-sep { display: none; }
}

/* --------------------------------------------- намалена анимация */

@media (prefers-reduced-motion: reduce) {
  .leaf { transition: none; }
  .leaf__face { transition: none; }
  .dock__panel { transition: opacity 0.01s; }
  .cover__hint span:last-child { animation: none; }

  /* Лентите остават като неподвижни щрихи, а не изчезват: полето
     встрани не бива да се връща към плоско черно. */
  .ribbons i,
  .ribbons i::before { animation: none; }
  .ribbons i { opacity: 0.22; top: 12%; }
  .ribbons i:nth-child(even) { top: 46%; }
  .ribbons i:nth-child(3n) { top: 68%; }
}