/* ============================================================
   «Учиться отдыхать» — ретрит 21–23 ноября
   Дизайн-система: тихая, бумажная, издательская.
   ============================================================ */

/* ---------- 1. Токены ---------- */
:root{
  /* Цвет */
  --sand:        #EFE9DE;
  --sand-deep:   #E5DCCC;
  --paper:       #FAF7F1;
  --ink:         #262B27;
  --ink-soft:    #5E665F;
  --ink-faint:   #8B918A;
  --line:        rgba(38,43,39,.13);
  --line-strong: rgba(38,43,39,.24);
  --moss:        #46584C;
  --moss-deep:   #2E3A32;
  --clay:        #B0764F;

  /* Типографика */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Метрика */
  --max: 1240px;
  --gut: clamp(20px, 5vw, 60px);
  --r:   20px;
  --r-lg: 32px;

  /* Ритм секций */
  --pad-section: clamp(80px, 11vw, 168px);

  /* Движение */
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- 2. База ---------- */
*, *::before, *::after{ box-sizing: border-box; }

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

body{
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: var(--sans);
  font-size: clamp(16.5px, 1.05vw, 18px);
  font-weight: 400;
  line-height: 1.68;
  letter-spacing: -.005em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Бумажное зерно поверх всего — даёт «напечатанность» плоским заливкам */
body::after{
  content: "";
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  opacity: .055;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

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

::selection{ background: var(--moss); color: #fff; }

:focus-visible{
  outline: 2px solid var(--moss);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ---------- 3. Типографика ---------- */
h1, h2, h3, h4{
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -.02em;
  margin: 0 0 .55em;
  text-wrap: balance;
}

h1{
  font-size: clamp(56px, 10.5vw, 148px);
  line-height: .94;
  letter-spacing: -.035em;
}

h2{
  font-size: clamp(36px, 5.4vw, 76px);
  line-height: 1.02;
  letter-spacing: -.025em;
}

h3{
  font-size: clamp(24px, 2.6vw, 33px);
  line-height: 1.14;
}

h4{ font-size: 21px; line-height: 1.25; }

p{ margin: 0 0 1.15em; }
p:last-child{ margin-bottom: 0; }

strong{ font-weight: 600; color: var(--ink); }

.eyebrow{
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin: 0 0 22px;
  display: block;
}

.lead{
  font-family: var(--serif);
  font-size: clamp(25px, 3.1vw, 40px);
  line-height: 1.24;
  letter-spacing: -.02em;
}

.prose{
  font-size: clamp(17px, 1.25vw, 19.5px);
  color: var(--ink-soft);
  max-width: 62ch;
}
.prose strong{ color: var(--ink); font-weight: 500; }
.prose > p + p{ margin-top: -.15em; }
.prose .lead{ color: var(--ink); margin-bottom: .75em; }

/* Сноски под текстом: «*» и «**» */
.footnotes{
  margin-top: 2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--line);
  font-size: 14.5px;
  color: var(--ink-faint);
}
.footnotes p{ margin-bottom: .45em; }

.muted{ color: var(--ink-faint); }

/* Ссылка с подчёркиванием, которое «рисуется» при наведении */
.link{
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 2px;
  transition: background-size .4s var(--ease), opacity .3s;
}
@media (hover: hover){
  .link:hover{ background-size: 0% 1px; background-position: 100% 100%; opacity: .7; }
}

/* ---------- 4. Раскладка ---------- */
.wrap{
  width: min(var(--max), 100% - var(--gut) * 2);
  margin-inline: auto;
}

.wrap-narrow{
  width: min(860px, 100% - var(--gut) * 2);
  margin-inline: auto;
}

section{ padding-block: var(--pad-section); position: relative; }

/* Фиксированная шапка не должна накрывать заголовок при переходе по якорю */
section[id], header[id], .pricebox[id]{ scroll-margin-top: 78px; }

.rule{ border-top: 1px solid var(--line); }

/* Асимметричная издательская сетка: заголовок слева, текст справа */
.editorial{
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}
.editorial > :first-child{ position: sticky; top: 120px; }
.editorial h2{ margin-bottom: 0; }

/* Секции без заголовка: слева только метка. Не липнет — иначе одинокая
   метка ползёт вниз при скролле — и стоит на линии первой строки лида. */
.editorial--label > :first-child{ position: static; padding-top: .9em; }

/* ---------- 5. Кнопки ---------- */
.btn{
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 30px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--sans);
  font-size: 15.5px;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), opacity .25s;
  box-shadow: 0 1px 2px rgba(38,43,39,.16);
}
@media (hover: hover){
  .btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 26px -10px rgba(38,43,39,.5); }
}
.btn:active{ transform: translateY(0); }

.btn--light{ --btn-bg: var(--paper); --btn-fg: var(--ink); }
.btn--moss{  --btn-bg: var(--moss); --btn-fg: #fff; }
.btn--wide{ width: 100%; }
.btn--lg{ padding: 19px 38px; font-size: 16.5px; }

.btn__note{
  display: block;
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-faint);
  text-align: center;
}

/* ---------- 6. Навигация ---------- */
.nav{
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-block: 20px;
  color: var(--paper);
  transition: background .5s var(--ease), color .5s var(--ease), padding .4s var(--ease),
              box-shadow .5s var(--ease), backdrop-filter .5s;
}
.nav__inner{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__brand{
  font-family: var(--serif);
  font-size: 22px;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
}
.nav__links{
  display: flex;
  gap: clamp(14px, 1.8vw, 30px);
  font-size: 14px;
  letter-spacing: -.005em;
}
.nav__links a{ text-decoration: none; opacity: .82; transition: opacity .25s; }
.nav__links a:hover{ opacity: 1; }

.nav.is-stuck{
  padding-block: 13px;
  background: rgba(250,247,241,.86);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}

/* ---------- 7. Hero ---------- */
.hero{
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  padding-block: 150px clamp(52px, 8vh, 96px);
  overflow: hidden;
  color: var(--paper);
  isolation: isolate;
}

/* Градиент — подложка, пока грузится фото, и запасной вариант без него. */
.hero__media{
  position: absolute;
  inset: -6%;
  z-index: -2;
  background:
    radial-gradient(90% 62% at 72% 12%,  rgba(255,212,163,.95), transparent 62%),
    radial-gradient(75% 55% at 16% 88%,  rgba(58,76,64,.9),     transparent 70%),
    linear-gradient(168deg, #93A399 0%, #C9AC8C 46%, #667A6D 100%);
  background-size: cover;
  background-position: center;
  will-change: transform;
}
.hero__media picture,
.hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.hero__img{
  object-fit: cover;
  object-position: 50% 55%;
}

.hero__scrim{
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to top, rgba(26,31,27,.82) 0%, rgba(26,31,27,.34) 42%, rgba(26,31,27,.12) 72%, rgba(26,31,27,.3) 100%);
}

.hero__content{ position: relative; }
/* Ограничиваем ширину детей, а не самой .wrap — иначе блок центрируется
   и текст уезжает вправо от логотипа. */
.hero__content > *{ max-width: 1000px; }
.hero .eyebrow{ color: rgba(250,247,241,.82); }
.hero h1{ margin-bottom: 30px; }

.hero__sub{
  font-size: clamp(18px, 1.9vw, 25px);
  line-height: 1.5;
  max-width: 640px;
  color: rgba(250,247,241,.92);
  margin-bottom: 38px;
}

.hero__actions{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.hero__scroll{
  position: absolute;
  right: var(--gut);
  bottom: clamp(52px, 8vh, 96px);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(250,247,241,.7);
  text-decoration: none;
}
.hero__scroll span::after{
  content: "";
  display: block;
  width: 1px;
  height: 46px;
  margin: 10px auto 0;
  background: linear-gradient(rgba(250,247,241,.7), transparent);
  animation: drip 2.6s var(--ease) infinite;
}
@keyframes drip{
  0%   { transform: scaleY(0); transform-origin: top; }
  45%  { transform: scaleY(1); transform-origin: top; }
  55%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}

/* ---------- 8. Карточки программы ---------- */
.cards{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(40px, 5vw, 64px);
}
.card{
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  min-height: 300px;
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
@media (hover: hover){
  .card:hover{ transform: translateY(-4px); box-shadow: 0 22px 48px -28px rgba(38,43,39,.5); }
}
.card__num{
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: clamp(34px, 4vw, 52px);
}
.card h3{ margin-bottom: .4em; }
.card p{ color: var(--ink-soft); font-size: 16.5px; }

/* ---------- 9. Галерея ---------- */
.gallery{
  display: grid;
  grid-template-columns: 1.5fr .9fr;
  gap: 14px;
  margin-top: clamp(36px, 4.5vw, 56px);
}
.gallery__side{ display: grid; gap: 14px; }
.gallery__row{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin-top: 14px;
}

/* Фото в галерее. Высоты те же, что у плейсхолдеров: два квадрата справа
   вместе с зазором ровно равны большому кадру слева. */
.shot{
  display: block;
  width: 100%;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--sand-deep);
  transition: opacity .9s var(--ease), transform .9s var(--ease), filter .4s var(--ease);
}
@media (hover: hover){
  .shot:hover{ filter: brightness(1.05) saturate(1.05); }
}
.shot--tall{ height: clamp(380px, 46vw, 560px); }
.shot--sq{ height: clamp(183px, 22vw, 273px); }
.shot--wide{ height: clamp(220px, 24vw, 300px); }

/* Плейсхолдер фотографии. Когда придёт кадр — заменить на <img class="shot">. */
.ph{
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 26px;
  min-height: 300px;
  background:
    radial-gradient(85% 70% at 25% 20%, rgba(255,246,232,.55), transparent 65%),
    linear-gradient(150deg, #BCC2B6 0%, #D9C7B2 55%, #A3AFA4 100%);
  color: rgba(38,43,39,.62);
  box-shadow: inset 0 0 0 1px rgba(250,247,241,.4);
}
.ph::after{
  content: "";
  position: absolute;
  inset: 12px;
  border: 1px dashed rgba(38,43,39,.28);
  border-radius: calc(var(--r-lg) - 12px);
  pointer-events: none;
}
.ph span{
  position: relative;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  max-width: 24ch;
  line-height: 1.65;
}
.ph--tall{ min-height: clamp(380px, 46vw, 560px); }
.ph--sq{ min-height: clamp(200px, 22vw, 273px); }
.ph--wide{ min-height: clamp(220px, 24vw, 300px); }
.ph--b{ background: linear-gradient(140deg, #C8BCA8 0%, #A8B3A6 60%, #C4A98B 100%); }
.ph--c{ background: linear-gradient(200deg, #AEB9AC 0%, #D5C4AE 55%, #93A197 100%); }
.ph--d{ background: linear-gradient(120deg, #D2C0A6 0%, #B0BBAE 70%); }

/* ---------- 12. Ведущие ---------- */
.people{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: clamp(8px, 1.5vw, 16px);
}
.person{
  background: var(--paper);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.person .ph{
  border-radius: 0;
  min-height: clamp(280px, 30vw, 360px);
  box-shadow: none;
}
.person .ph::after{ inset: 10px; border-radius: 8px; }
/* Портреты квадратные — окно тоже квадратное, кадр встаёт целиком */
.person__photo{
  border-radius: 0;
  height: auto;
  aspect-ratio: 1 / 1;
}
.person__body{ padding: clamp(24px, 2.6vw, 34px); }
.person__body h3{ margin-bottom: .18em; }
.person__role{
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--clay);
  margin-bottom: 16px;
}
.person__body p{ color: var(--ink-soft); font-size: 15.5px; }
.person__body .person__lead{ color: var(--ink); font-size: 16.5px; }

/* ---------- 13. Бронирование ---------- */
.booking{
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(36px, 6vw, 88px);
  align-items: start;
}

.ticks{ margin-top: 30px; }
.tick{
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  font-size: 17.5px;
}
.tick:first-child{ border-top: 1px solid var(--line); }
.tick::before{
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--clay);
  transform: translateY(-3px);
}

.pricebox{
  background: var(--paper);
  border-radius: var(--r-lg);
  padding: clamp(30px, 3.4vw, 46px);
  position: sticky;
  top: 100px;
  box-shadow: 0 30px 70px -50px rgba(38,43,39,.6);
}
.price{
  font-family: var(--serif);
  font-size: clamp(60px, 7vw, 92px);
  line-height: .92;
  letter-spacing: -.035em;
  margin: 6px 0 4px;
}
.price small{
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--ink-faint);
  display: block;
  margin-top: 14px;
}
.pricebox hr{
  border: 0;
  border-top: 1px solid var(--line);
  margin: 26px 0;
}
.price-row{
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-size: 16px;
  padding: 9px 0;
}
.price-row span:last-child{ font-weight: 500; white-space: nowrap; }
.price-row--muted{ color: var(--ink-faint); }

.seats{
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  letter-spacing: .04em;
  color: var(--ink-soft);
  background: var(--sand-deep);
  border-radius: 999px;
  padding: 7px 15px;
  margin-bottom: 20px;
}
.seats::before{
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 3px rgba(70,88,76,.2);
}

/* ---------- 14. FAQ ---------- */
.faq details{
  border-bottom: 1px solid var(--line);
}
.faq details:first-of-type{ border-top: 1px solid var(--line); }
.faq summary{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(21px, 2.1vw, 28px);
  line-height: 1.2;
  letter-spacing: -.015em;
  transition: color .3s;
}
.faq summary::-webkit-details-marker{ display: none; }
.faq summary:hover{ color: var(--moss); }
.faq summary::after{
  content: "";
  flex: none;
  width: 13px;
  height: 13px;
  align-self: center;
  background:
    linear-gradient(var(--ink-faint), var(--ink-faint)) center / 100% 1px no-repeat,
    linear-gradient(var(--ink-faint), var(--ink-faint)) center / 1px 100% no-repeat;
  transition: transform .4s var(--ease);
}
.faq details[open] summary::after{ transform: rotate(135deg); }
.faq__answer{
  padding-bottom: 28px;
  color: var(--ink-soft);
  max-width: 64ch;
  font-size: 17px;
}

/* ---------- 15. Финал и подвал ---------- */
.final{
  background: var(--moss-deep);
  color: var(--paper);
  text-align: center;
  padding-block: clamp(90px, 13vw, 180px);
}
.final .eyebrow{ color: rgba(250,247,241,.6); }
.final p{
  font-size: clamp(18px, 1.8vw, 22px);
  color: rgba(250,247,241,.82);
  max-width: 620px;
  margin: 0 auto 36px;
}

footer{
  background: var(--moss-deep);
  color: rgba(250,247,241,.55);
  font-size: 13.5px;
  padding-block: 34px 44px;
  border-top: 1px solid rgba(250,247,241,.12);
}
.footer__inner{
  display: flex;
  flex-wrap: wrap;
  gap: 14px 30px;
  justify-content: space-between;
  align-items: center;
}
footer a{ text-decoration: none; opacity: .85; }
footer a:hover{ opacity: 1; }

/* ---------- 16. Липкая панель на мобильном ---------- */
.dock{
  position: fixed;
  inset: auto 0 0;
  z-index: 90;
  display: none;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(250,247,241,.93);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  box-shadow: 0 -1px 0 var(--line), 0 -14px 30px -24px rgba(38,43,39,.6);
  transform: translateY(110%);
  transition: transform .45s var(--ease);
}
.dock.is-visible{ transform: none; }
.dock__price{ line-height: 1.25; }
.dock__price b{ font-family: var(--serif); font-size: 24px; font-weight: 400; display: block; }
.dock__price small{ font-size: 12px; color: var(--ink-faint); }
.dock .btn{ padding: 14px 24px; font-size: 15px; }

/* ---------- 17. Лайтбокс ---------- */
.lightbox{
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: clamp(16px, 4vw, 56px);
  background: rgba(26,31,27,.92);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.lightbox.is-open{ opacity: 1; visibility: visible; }
.lightbox .ph{
  max-width: min(1200px, 100%);
  max-height: 86svh;
  width: 100%;
  border-radius: var(--r);
}
/* Фото — в своих пропорциях, без обрезки, как в галерее */
.lightbox img{
  display: block;
  width: auto;
  height: auto;
  max-width: min(1600px, 100%);
  max-height: 88svh;
  border-radius: var(--r);
  box-shadow: 0 30px 80px -30px rgba(0,0,0,.6);
}
.lightbox__close{
  position: absolute;
  top: clamp(14px, 3vw, 28px);
  right: clamp(14px, 3vw, 28px);
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  background: rgba(250,247,241,.14);
  color: var(--paper);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: background .25s;
}
.lightbox__close:hover{ background: rgba(250,247,241,.28); }

/* ---------- 18. Пометки «нужны данные» ---------- */
.todo{
  display: block;
  margin-top: 20px;
  padding: 15px 18px;
  border: 1px dashed var(--clay);
  border-radius: 14px;
  background: rgba(176,118,79,.06);
  color: #8A5934;
  font-size: 13.5px;
  line-height: 1.55;
}
.todo b{ color: inherit; }
html[data-todo="off"] .todo{ display: none; }

/* ---------- 19. Появление при скролле ---------- */
/* Прячем только если скрипт жив и успел повесить класс на <html>.
   Упал JS — текст просто виден сразу, а не исчезает целиком. */
.js-anim .reveal{
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--d, 0ms);
}
.js-anim .reveal.is-in{ opacity: 1; transform: none; }

/* ---------- 20. Адаптив ---------- */
@media (max-width: 1080px){
  .editorial{ grid-template-columns: 1fr; gap: 28px; }
  .editorial > :first-child{ position: static; }
  .editorial--label{ gap: 0; }
  .editorial--label > :first-child{ padding-top: 0; }
  .booking{ grid-template-columns: 1fr; }
  .pricebox{ position: static; }
}

@media (max-width: 860px){
  /* Шапка не прилипает: на телефоне от неё остаётся один логотип,
     который зря ест верх экрана. Уезжает вместе с первым экраном. */
  .nav{ position: absolute; }
  .nav.is-stuck{
    padding-block: 20px;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--paper);
    box-shadow: none;
  }
  /* Шапки больше нет — и отступ под неё у якорей не нужен */
  section[id], header[id], .pricebox[id]{ scroll-margin-top: 20px; }

  .nav__links{ display: none; }
  .cards, .people, .gallery__row{ grid-template-columns: 1fr; }
  .gallery{ grid-template-columns: 1fr; }
  .card{ min-height: 0; }
  .hero__scroll{ display: none; }
  .hero{ min-height: 92svh; }
  .dock{ display: flex; }
  footer{ padding-bottom: 104px; }
  .ph--tall{ min-height: 340px; }
  .shot--tall, .shot--sq, .shot--wide{ height: auto; aspect-ratio: 4 / 3; }
}

@media (max-width: 420px){
  .hero__actions .btn{ width: 100%; }
}

/* ---------- 21. Уважение к настройкам и печати ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-anim .reveal{ opacity: 1; transform: none; }
}

@media print{
  .nav, .dock, .hero__scroll, .lightbox{ display: none !important; }
  body::after{ display: none; }
  .js-anim .reveal{ opacity: 1; transform: none; }
}