/* ══════════════════════════════════════════════════════
   PUBLICO — база: токены, типографика, сквозные элементы
   Палитра снята с их же материалов: бордо промо-макетов
   и стаканов, сливочно-жёлтый фон спешл-меню, мрамор
   столешниц, почти чёрные чернила.
   ══════════════════════════════════════════════════════ */

:root {
  --wine:      #6E1622;
  --wine-dp:   #4A0E17;
  --butter:    #F6E9B4;
  --cream:     #F5F1E8;
  --marble:    #E9E5DE;
  --ink:       #1A1512;
  --paper:     #FFFDF9;

  /* активная тема секции — переопределяется на .sec-- */
  --bg:   var(--cream);
  --fg:   var(--ink);
  --dim:  rgba(26, 21, 18, .55);
  --hair: rgba(26, 21, 18, .14);
  --acc:  var(--wine);

  --ff:  'Archivo', ui-sans-serif, system-ui, sans-serif;
  --ffd: 'Cormorant Garamond', Georgia, serif;

  --pad: clamp(20px, 5vw, 88px);
  --micro: clamp(10px, .72vw, 12px);
  --hdr-h: 66px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--hdr-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--ff);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, svg { display: block; max-width: 100%; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-weight: 800; line-height: 1.02; letter-spacing: -.02em; }
::selection { background: var(--wine); color: var(--butter); }

.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--wine); color: #fff; padding: 12px 18px;
}
.skip:focus { left: 0; }

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


/* ══ ТЕМЫ СЕКЦИЙ ══ */

.sec--cream  { --bg: var(--cream);  --fg: var(--ink); --acc: var(--wine);
               --dim: rgba(26,21,18,.55); --hair: rgba(26,21,18,.14); }
.sec--marble { --bg: var(--marble); --fg: var(--ink); --acc: var(--wine);
               --dim: rgba(26,21,18,.55); --hair: rgba(26,21,18,.16); }
.sec--wine   { --bg: var(--wine);   --fg: var(--paper); --acc: var(--butter);
               --dim: rgba(255,253,249,.62); --hair: rgba(255,253,249,.22); }
/* сливочно-жёлтый — фон их сезонного меню и полосатых стаканов */
.sec--butter { --bg: var(--butter); --fg: var(--ink); --acc: var(--wine);
               --dim: rgba(26,21,18,.6); --hair: rgba(26,21,18,.18); }


/* ══ КАРКАС СЕКЦИЙ ══ */

.sec {
  background: var(--bg);
  color: var(--fg);
  padding: clamp(64px, 9vw, 132px) var(--pad);
}

.sec__num {
  font-size: var(--micro);
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--dim);
  margin-bottom: clamp(24px, 4vw, 48px);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--hair);
}

.sec__title {
  font-size: clamp(33px, 6.4vw, 84px);
  font-weight: 900;
  letter-spacing: -.03em;
  margin-bottom: clamp(24px, 3.5vw, 44px);
}


/* ══ КНОПКИ ══ */

.btn {
  display: inline-block;
  font-size: clamp(13px, .95vw, 15px);
  font-weight: 600;
  letter-spacing: .02em;
  padding: 14px 26px;
  border: 1px solid currentColor;
  border-radius: 999px;
  transition: background .3s var(--ease), color .3s var(--ease);
}
.btn--sm { padding: 10px 20px; font-size: 13px; }

.btn--solid { background: var(--acc); border-color: var(--acc); color: var(--bg); }
.btn--solid:hover { background: transparent; color: var(--acc); }

.btn--ghost { background: transparent; color: var(--fg); }
.btn--ghost:hover { background: var(--fg); color: var(--bg); }


/* ══ ЗАГЛУШКИ ПОД ФОТО ══
   Пока файлов нет, .ph — это плашка мрамора с бордовой
   рамкой: страница выглядит собранной, а не сломанной.
   Когда фото появятся, здесь включается background-image
   через [data-img], разметку менять не придётся. */

.ph {
  position: relative;
  display: block;
  width: 100%;
  background: var(--marble) center/cover no-repeat;
  border: 1px solid var(--hair);
  overflow: hidden;
}
.ph--tall { aspect-ratio: 3 / 4; }
.ph--sq   { aspect-ratio: 1 / 1; }

/* заглушка, пока фото не подключено */
.ph::after {
  content: attr(data-img);
  position: absolute; left: 10px; bottom: 8px;
  font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(26,21,18,.32);
}

/* .ph.is-set — уже настоящий <img>: заглушка не нужна,
   а сам кадр кроется в рамку без искажений */
.ph.is-set {
  object-fit: cover;
  object-position: center;
}
.ph.is-set::after { content: none; }


/* ══ ПОЯВЛЕНИЕ ПРИ СКРОЛЛЕ ══ */

.rv { opacity: 0; transform: translateY(18px); }
.rv.is-in { opacity: 1; transform: none; transition: opacity .7s var(--ease), transform .7s var(--ease); }

/* каскад: карточки, бутылки и строки прайса внутри .rv-блока появляются
   не разом, а друг за другом. --i прописывает main.js по индексу */
.cards > .card, .bottles > .bottle, .price li {
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i, 0) * 55ms);
}
.cards.is-in > .card, .bottles.is-in > .bottle, .price__col.is-in li {
  opacity: 1; transform: none;
}
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.is-in { opacity: 1; transform: none; transition: none; }
  .ph, .ph.is-set:hover { transform: none; transition: none; }
}

/* страховка разом на всё остальное движение по сайту (hover-зумы,
   подъём карточек, каскад, вкладки меню, мобильное меню) —
   отдельно перечислять каждый селектор не нужно */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}