/* ==========================================================================
   marinanova.us · assets/home.css · оформление ГЛАВНОЙ страницы
   Подключается после tokens.css и site.css. Страницу продукта не трогает:
   все правила прицелены на блоки, которые есть только на главной.

   ЭТАЛОН — страница лукбука паспорта Марины:
   /var/www/marina-alicorn/pasport-v4b/lookbook.html
   (passport.marinanova.us/pasport-v4b/lookbook.html)

   Что снято с лукбука буквально:
     слива          — НЕ заливкой. На лукбуке нет ни одной крупной сливовой
                      плашки: слива живёт в тексте (заголовок первого экрана,
                      надзаголовки, курсивные акценты, номера), в волосяных
                      линиях 1px, в контурах var(--line-wine) и в подсветке
                      var(--wine-tint). Сплошная заливка — только маленькая
                      пилюля активного раздела в шапке и полоса прогресса 2px.
     шапка          — .nav: липкая, --navh 58px, молочная с blur, низ волосяной
                      линией var(--line-soft); лента разделов .nav__rail со
                      скроллом и маской, активный — залитая пилюля;
                      .nav__progress 2px сливой по низу
     первый экран   — .xC: молочный фон, по центру. .x-t заглавные Cormorant
                      сливой, .x-n курсив Cormorant чернилами, .x-s микро-капс
                      Golos с разрядкой .34em
     ритм разделов  — .section-head: .eyebrow (микро-капс сливой, разрядка .16em)
                      → .h2 + .acc (курсив сливой второй строкой, отступ .9em)
                      → .h-arrow (линия-стрелка, вытягивается при появлении)
     блоки-пункты   — канон .xC__list / .lb-map__g: волосяная линия сверху,
                      курсивный номер сливой, заглавный подзаголовок Cormorant,
                      текст 16/1.6 var(--ink-2). Ни фона, ни рамок, ни теней.
     формы          — скругления только у пилюль (--r-pill). Карточек с фоном,
                      теней и градиентов на лукбуке нет — здесь их тоже нет.
   Новых цветов, шрифтов, теней и брейкпоинтов нет — только токены.
   tokens.css не трогаем: это симлинк, общий с паспортом Марины.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Надзаголовки — сливой (канон лукбука: .eyebrow{color:var(--wine)})
   -------------------------------------------------------------------------- */
.eyebrow{ color: var(--wine); }
.section-head .eyebrow{ display: block; margin-bottom: var(--s4); line-height: 1.3; }

/* --------------------------------------------------------------------------
   2. Шапка: лента разделов и переключатель языка.
      Активный раздел — единственная сплошная заливка сливой на странице
      (канон .nav__rail a.is-active). Язык — контурная пилюля с подсветкой
      var(--wine-tint), как .nav__lang в лукбуке.
   -------------------------------------------------------------------------- */
.nav__rail{ min-width: 0; }
.nav__rail a span{ white-space: nowrap; }

.lang{
  margin-left: auto; flex: none; display: flex; gap: 2px; padding: 3px;
  border: 1px solid var(--line-wine); border-radius: var(--r-pill); background: transparent;
}
.lang__b{
  min-height: 34px; padding: 0 13px; border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-2); cursor: pointer;
  font: 500 13px/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase;
  transition: background-color var(--d-fast) var(--ease), color var(--d-fast) var(--ease);
}
.lang__b:hover{ color: var(--wine); background: var(--wine-tint); }
.lang__b[aria-pressed="true"]{
  color: var(--wine); background: var(--wine-tint);
  box-shadow: inset 0 0 0 1px var(--line-wine);
}
@media (max-width: 420px){ .lang__b{ padding: 0 10px; letter-spacing: .06em; } }

/* --------------------------------------------------------------------------
   3. Первый экран — канон .xC лукбука: молочный фон, центр,
      заглавные сливой → курсив чернилами → микро-капс с разрядкой.
      Никакой плашки: слива здесь только в буквах.
   -------------------------------------------------------------------------- */
.xC{ background: var(--milk); text-align: center; padding: clamp(40px, 7vw, 70px) 0 clamp(40px, 5vw, 60px); }
.xC__t{ margin-bottom: 34px; }
.xC .x-t{
  margin: 0; font: 500 clamp(44px, 11.6vw, 96px)/.9 var(--f-display);
  text-transform: uppercase; color: var(--wine);
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal;
}
.xC .x-n{ margin: 4px 0 0; font: italic 400 clamp(30px, 4.5vw, 52px)/1 var(--f-display); color: var(--ink); }
.xC .x-s{ margin: 14px 0 0; font: 500 12.5px/1.5 var(--f-body); letter-spacing: .34em; text-transform: uppercase; color: var(--ink-2); }

.xC .lead{ max-width: var(--measure); margin: 0 auto 28px; }
.xC .hero__cta{ margin-bottom: var(--s8); }

/* Подпись над списком — микро-капс сливой */
.xC__lab{ display: block; margin-bottom: var(--s5); }

/* Список «паспорт коротко» — канон .xC__list:
   волосяная линия сливой сверху, курсивный номер сливой, заглавная метка */
.xC__list{ display: grid; grid-template-columns: minmax(0,1fr); gap: 20px 24px; text-align: left; }
@media (min-width: 700px){ .xC__list{ grid-template-columns: repeat(3, minmax(0,1fr)); gap: 24px; } }
.xC__list div{ border-top: 1px solid var(--wine); padding-top: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.xC__list span{ display: block; margin-bottom: 8px; font: italic 500 20px/1 var(--f-display); color: var(--wine); }
.xC__list b{ display: block; margin-bottom: 6px; font: 500 11px/1.3 var(--f-body); letter-spacing: .24em; text-transform: uppercase; color: var(--ink); }

/* --------------------------------------------------------------------------
   4. Блоки-пункты разделов — канон .xC__list + .lb-map__g:
      волосяная линия сливой сверху, курсивный номер сливой,
      заглавный подзаголовок Cormorant, текст 16/1.6.
      Ни фона, ни рамки, ни тени — на лукбуке их нет.
   -------------------------------------------------------------------------- */
.hx{ display: grid; grid-template-columns: minmax(0,1fr); gap: 30px 40px; }
@media (min-width: 760px){ .hx{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 1100px){
  .hx--3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
  .hx--4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
}
.hx__i{ border-top: 1px solid var(--wine); padding-top: 14px; }
.hx__n{ display: block; margin-bottom: 10px; font: italic 500 20px/1 var(--f-display); color: var(--wine); }
.hx__t{
  margin-bottom: 10px; font: 400 clamp(22px, 2.4vw, 28px)/1.05 var(--f-display);
  text-transform: uppercase; letter-spacing: -.005em; color: var(--ink);
  hyphens: manual; -webkit-hyphens: manual; overflow-wrap: normal; word-break: normal;
}
.hx__p{ font-size: 16px; line-height: 1.6; color: var(--ink-2); }

/* --------------------------------------------------------------------------
   5. Последний раздел — на молочном, как все остальные.
      Сливовой плашки во всю ширину больше нет: на лукбуке такого блока нет.
   -------------------------------------------------------------------------- */
#passport .lead{ margin-bottom: var(--s6); }
.end__cta{ display: flex; flex-wrap: wrap; gap: 12px; }

/* --------------------------------------------------------------------------
   6. Подвал — тихий, 13px (канон .foot лукбука).
      Ссылки остаются на токенах site.css: чернила + волосяное подчёркивание,
      слива только при наведении.
      Цвет — var(--ink-2), а не var(--grey) лукбука: серый на молочном даёт
      контраст 3.6 и не проходит AA для текста 13px. Токен из той же системы.
   -------------------------------------------------------------------------- */
footer.foot{ padding: var(--s6) var(--gutter) var(--s7); color: var(--ink-2); }
.foot__note{ font-size: 13px; line-height: 1.6; color: var(--ink-2); }

/* Правка 29.09: воздух между разделами был 136px — на короткой странице это читалось как пустота */
.section{ padding-top: 88px; }
.section:last-of-type{ padding-bottom: 88px; }
.xC{ padding-top: 56px; padding-bottom: 48px; }
@media (max-width: 700px){
  .section{ padding-top: 64px; }
  .section:last-of-type{ padding-bottom: 64px; }
  .xC{ padding-top: 40px; padding-bottom: 36px; }
}

/* Вариант 2 (выбран 29.09): финальный блок сплошной сливой, светлый текст */
.section:last-of-type{ background: var(--wine); color: var(--on-wine); padding: 88px 0; }
.section:last-of-type h2,
.section:last-of-type .eyebrow,
.section:last-of-type .acc{ color: var(--on-wine) !important; }
.section:last-of-type p,
.section:last-of-type li{ color: var(--on-wine-2) !important; }
.section:last-of-type .h-arrow{ background: rgba(247,246,245,.6) !important; }
.section:last-of-type .btn{ background: var(--on-wine) !important; color: var(--wine) !important; border-color: transparent !important; }
.section:last-of-type .btn--ghost{ background: transparent !important; color: var(--on-wine) !important; border-color: rgba(247,246,245,.55) !important; }
.section:last-of-type .btn__ic{ background: var(--wine) !important; color: var(--on-wine) !important; }
@media (max-width: 700px){ .section:last-of-type{ padding: 64px 0; } }