/* ============================================================
   Изумруд — круглосуточный продуктовый магазин, Красноярск
   Жанр: плакат + гигантские числа
   Палитра: холодная почти-белая бумага, янтарь и глубокая синь
   ============================================================ */

:root{
  color-scheme: light;

  --bg:        oklch(97.4% 0.006 250);
  --bg-2:      oklch(94.2% 0.010 250);
  --paper:     oklch(99.2% 0.004 250);
  --ink:       oklch(23% 0.030 255);
  --ink-2:     oklch(45% 0.025 255);
  --line:      oklch(87% 0.014 255);

  --amber:     oklch(78% 0.163 78);      /* базовый тон — чистый янтарь */
  --amber-d:   oklch(66% 0.150 68);
  --deep:      oklch(42% 0.132 255);     /* противоположность — глубокая синь */
  --deep-2:    oklch(30% 0.098 258);
  --on-amber:  oklch(21% 0.045 70);
  --on-deep:   oklch(97% 0.010 250);

  /* сетка-миллиметровка — фирменный приём страницы */
  --grid-1:    oklch(88% 0.016 255 / .55);
  --grid-2:    oklch(84% 0.020 255 / .45);

  --r-lg: 34px;   /* крупные мягкие скругления */
  --r-md: 22px;
  --r-sm: 14px;

  --s-1: 8px; --s-2: 16px; --s-3: 24px; --s-4: 36px; --s-5: 56px; --s-6: 88px;

  --wide: 'Helvetica Neue', 'Segoe UI', Arial, 'Noto Sans', sans-serif;
  --cond: 'Arial Narrow', 'Helvetica Neue Condensed', 'Roboto Condensed', 'Liberation Sans Narrow', Impact, var(--wide);
  --mono: ui-monospace, 'SF Mono', 'Cascadia Mono', 'DejaVu Sans Mono', monospace;

  --bar-h: 66px;
}

html[data-theme="dark"]{
  color-scheme: dark;
  --bg:      oklch(21% 0.024 258);
  --bg-2:    oklch(26% 0.028 258);
  --paper:   oklch(25% 0.026 258);
  --ink:     oklch(95% 0.010 250);
  --ink-2:   oklch(76% 0.018 250);
  --line:    oklch(37% 0.028 258);
  --amber:   oklch(80% 0.160 80);
  --amber-d: oklch(72% 0.150 72);
  --deep:    oklch(36% 0.110 256);
  --deep-2:  oklch(26% 0.080 258);
  --grid-1:  oklch(38% 0.030 258 / .55);
  --grid-2:  oklch(44% 0.034 258 / .40);
}

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

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

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font: 400 17px/1.6 var(--wide);
  letter-spacing:.005em;
  overflow-x:hidden;
  /* миллиметровка: мелкая клетка + крупная линия каждые 5 клеток */
  background-image:
    linear-gradient(var(--grid-1) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-1) 1px, transparent 1px),
    linear-gradient(var(--grid-2) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-2) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px;
}

::selection{ background:var(--amber); color:var(--on-amber) }

img{ max-width:100%; height:auto }
img{ -webkit-user-drag:none }          /* родной перенос картинок отключён */
a{ color:inherit }
h1,h2,h3,p,ul,figure,dl,dd,dt{ margin:0 }
ul{ list-style:none; padding:0 }
b,strong{ font-weight:700 }

.nowrap{ white-space:nowrap }
.wrap{ width:min(1180px, 100% - clamp(28px, 6vw, 96px)); margin-inline:auto }

:focus-visible{ outline:3px solid var(--deep); outline-offset:3px; border-radius:6px }
html[data-theme="dark"] :focus-visible{ outline-color:var(--amber) }

.skip{
  position:fixed; left:12px; top:-100px; z-index:60;
  background:var(--amber); color:var(--on-amber);
  padding:10px 18px; border-radius:12px; font-weight:700; text-decoration:none;
  transition:top .18s;
}
.skip:focus{ top:12px }

.ic{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round }
.ic circle, .ic rect{ fill:none }

/* --------------------------------- шапка --------------------------------- */
.bar{
  position:sticky; top:0; z-index:40;
  height:var(--bar-h);
  display:flex; align-items:center; gap:var(--s-3);
  padding-inline: clamp(14px, 4vw, 40px);
  background:color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: blur(10px) saturate(1.2);
  border-bottom:1px solid var(--line);
}
.bar__brand{ display:flex; align-items:center; gap:10px; text-decoration:none; flex:none; min-height:44px }
.bar__brand img{ width:36px; height:36px; border-radius:10px }
.bar__name{ font: 700 18px/1 var(--wide); letter-spacing:-.01em; display:flex; flex-direction:column; gap:3px }
.bar__name em{ font: 400 10px/1 var(--wide); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); font-style:normal }

.bar__nav{ display:flex; gap:clamp(8px,1.6vw,22px); margin-left:auto; font-size:15px }
.bar__nav a{
  display:inline-flex; align-items:center; min-height:44px; padding:0 6px;
  text-decoration:none; color:var(--ink-2);
  border-bottom:2px solid transparent; transition:color .18s, border-color .18s;
}
.bar__nav a:hover{ color:var(--ink); border-bottom-color:var(--amber) }

.bar__side{ display:flex; align-items:center; gap:10px; margin-left:auto }
.bar__nav + .bar__side{ margin-left:0 }

.icobtn{
  width:46px; height:46px; display:grid; place-items:center;
  background:transparent; color:var(--ink); border:1px solid var(--line);
  border-radius:13px; cursor:pointer; transition:border-color .18s, background .18s;
}
.icobtn:hover{ border-color:var(--amber); background:color-mix(in oklab, var(--amber) 14%, transparent) }
.icobtn--menu{ display:none }

/* --------------------------------- кнопки -------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:48px; padding:12px 22px;
  border:1px solid transparent; border-radius:999px;
  font: 700 15px/1 var(--wide); letter-spacing:.01em; text-decoration:none; cursor:pointer;
  transition: transform .18s, background .18s, border-color .18s, color .18s;
}
.btn .ic{ width:18px; height:18px; transition:transform .18s }
.btn:hover{ transform:translateY(-2px) }
.btn:hover .ic{ transform:translateX(3px) }
.btn--amber{ background:var(--amber); color:var(--on-amber) }
.btn--amber:hover{ background:var(--amber-d) }
.btn--dark{ background:var(--deep-2); color:var(--on-deep) }
.btn--dark:hover{ background:oklch(24% 0.08 258) }
.btn--ghost{ border-color:currentColor; color:inherit; background:transparent }
.btn--ghost:hover{ border-color:var(--amber); color:var(--amber-d) }
.btn--onamber{ border-color:var(--on-amber); color:var(--on-amber); background:transparent }
.btn--onamber:hover{ background:var(--on-amber); color:var(--amber) }
.btn--wide{ width:100%; margin-top:10px }
.btn--call{ background:var(--deep); color:var(--on-deep); font-variant-numeric:tabular-nums }
.btn--call:hover{ background:var(--deep-2) }
.btn--call .ic{ fill:currentColor; stroke:none }
.btn--call:hover .ic{ transform:none }

/* ------------------------------ первый экран ----------------------------- */
.hero{
  position:relative;
  min-height: min(96vh, 860px);
  display:flex; align-items:flex-end;
  overflow:hidden;
  /* нарисованный фон — работает и без фотографии */
  background:
    radial-gradient(70% 90% at 78% 8%, color-mix(in oklab, var(--amber) 42%, transparent), transparent 62%),
    linear-gradient(190deg, var(--deep-2), var(--deep) 58%, oklch(28% 0.07 258));
}
.hero__media{ position:absolute; inset:0; overflow:hidden }
.hero__photo{
  width:100%; height:100%; object-fit:cover; object-position:center 42%;
  filter:saturate(1.05) contrast(1.02);
  /* медленный кен-бёрнс: только масштаб и сдвиг, видимость не затронута */
  animation: kenburns 26s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns{
  from{ transform:scale(1.02) translate3d(0,0,0) }
  to  { transform:scale(1.11) translate3d(-1.4%, -1.8%, 0) }
}
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, oklch(18% 0.04 258 / .74) 0%, oklch(18% 0.04 258 / .38) 34%, oklch(16% 0.04 258 / .86) 100%),
    linear-gradient(90deg, oklch(16% 0.04 258 / .62), transparent 62%);
}
.hero__inner{
  position:relative; z-index:2;
  width:min(1180px, 100% - clamp(28px, 6vw, 96px));
  margin-inline:auto;
  padding: clamp(90px, 14vh, 150px) 0 clamp(30px, 5vh, 54px);
  color:oklch(98% 0.01 250);
}

.over{
  font: 700 11px/1.5 var(--wide); letter-spacing:.2em; text-transform:uppercase;
  color:var(--ink-2); display:flex; align-items:center; gap:10px; margin-bottom:var(--s-2);
}
.over i{ font-style:normal; font-family:var(--mono); color:var(--amber-d); letter-spacing:0 }
.over--light{ color:oklch(88% 0.02 250) }
.over--light i{ color:var(--amber) }
.over--onamber{ color:color-mix(in oklab, var(--on-amber) 78%, transparent) }
.over--onamber i{ color:var(--on-amber) }
.over--sm{ margin-bottom:8px; font-size:10px }

/* плакатная типографика: узкий сжатый гротеск, вторая строка — янтарём */
.poster{
  font-family:var(--cond);
  font-weight:700;
  font-stretch: condensed;
  text-transform:uppercase;
  line-height:.86;
  letter-spacing:-.012em;
  font-size: clamp(50px, 11.4vw, 158px);
  margin: clamp(6px, 1.5vh, 18px) 0 clamp(20px, 4vh, 40px);
  display:flex; flex-direction:column;
  text-wrap:balance;
}
/* строки плаката выезжают по одной — движение без прятанья: только transform */
.poster span{ animation: posterline .75s cubic-bezier(.16,.84,.3,1) both }
.poster__l1{ animation-delay:.02s }
.poster__l2{ color:var(--amber); margin-left:.06em; animation-delay:.14s }
.poster__l2b{ color:var(--amber); font-size:.62em; letter-spacing:-.005em; margin-left:.1em; animation-delay:.26s }
.poster__l3{
  font-size:.3em; line-height:1.14; letter-spacing:.02em;
  color:oklch(92% 0.014 250); margin-top:.5em; animation-delay:.38s;
  max-width:34ch;
}
@keyframes posterline{
  from{ transform:translate3d(0, .34em, 0) }
  to  { transform:none }
}

.hero__foot{
  display:grid; grid-template-columns: minmax(0,2fr) minmax(0,1fr);
  gap: var(--s-3) var(--s-5); align-items:end;
  border-top:1px solid oklch(100% 0 0 / .28); padding-top:var(--s-3);
}
.hero__lead{ font-size:clamp(15px,1.5vw,18px); line-height:1.55; color:oklch(93% 0.012 250); max-width:52ch }
.hero__acts{ display:flex; flex-wrap:wrap; gap:12px; grid-row:2; grid-column:1 }
.hero__now{
  grid-column:2; grid-row:1 / span 2; align-self:end;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
  font: 700 15px/1.4 var(--wide);
}
.hero__clock{ font-family:var(--mono); font-weight:400; font-size:13px; color:oklch(86% 0.02 250); font-variant-numeric:tabular-nums }
.hero__dn{ font-weight:400; font-size:13px; color:oklch(84% 0.02 250); flex-basis:100% }
.dot{ width:9px; height:9px; border-radius:50%; background:var(--amber); box-shadow:0 0 0 4px color-mix(in oklab, var(--amber) 28%, transparent); align-self:center }

/* --------------------------------- секции -------------------------------- */
.sec{ padding: clamp(56px, 9vw, 110px) 0 }
h2{
  font-family:var(--cond); font-stretch:condensed; font-weight:700;
  font-size: clamp(31px, 4.4vw, 60px); line-height:1.02; letter-spacing:-.015em;
  text-transform:uppercase; margin-bottom:var(--s-3); text-wrap:balance;
}
.h2--big{ font-size: clamp(34px, 5.4vw, 76px) }
.lead{ font-size:clamp(17px,1.9vw,21px); line-height:1.5; max-width:56ch }
.text{ margin-top:var(--s-2); color:var(--ink-2); max-width:56ch }

/* асимметрия примерно 2/3 к 1/3 */
.split{ display:grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items:start }
.split--rev{ grid-template-columns: minmax(0, 1fr) minmax(0, 1.95fr) }
.split--rev .split__narrow{ order:0 }

.card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--r-lg); padding: clamp(20px, 2.4vw, 30px);
}
.pay{ display:grid; gap:14px }
.pay li{ display:flex; align-items:center; gap:12px; font-size:16px; font-weight:600 }
.pay .ic{ color:var(--amber-d) }

/* ----------------------------- секция чисел ------------------------------ */
.sec--facts{
  background:
    radial-gradient(60% 100% at 100% 0%, color-mix(in oklab, var(--amber) 22%, transparent), transparent 60%),
    linear-gradient(160deg, var(--deep), var(--deep-2));
  color:var(--on-deep);
  border-radius: var(--r-lg);
  margin-inline: clamp(0px, 2vw, 28px);
}
.sec--facts h2{ color:var(--on-deep) }
.nums{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap: clamp(18px, 3vw, 40px);
  margin-top: clamp(28px, 5vw, 56px);
  border-top:1px solid oklch(100% 0 0 / .22); padding-top: var(--s-4);
}
.num{ display:flex; flex-direction:column; gap:10px }
.num__v{
  font-family:var(--cond); font-stretch:condensed; font-weight:700;
  font-size: clamp(76px, 11vw, 156px); line-height:.8; letter-spacing:-.02em;
  color:var(--amber); font-variant-numeric:tabular-nums;
}
.num__k{ font-size:15px; line-height:1.45; color:oklch(88% 0.02 250); max-width:30ch }

/* ------------------- суточная полоса: 24 часа из 24 ---------------------- */
.today{
  margin-top: clamp(28px, 4vw, 52px);
  display:grid; grid-template-columns: minmax(0,1fr) minmax(0,1.35fr);
  gap: clamp(20px, 3vw, 48px); align-items:center;
  background: oklch(100% 0 0 / .07);
  border:1px solid oklch(100% 0 0 / .18);
  border-radius: var(--r-md); padding: clamp(20px, 2.6vw, 32px);
}
.today__val{
  font-family:var(--cond); font-stretch:condensed; font-weight:700; text-transform:uppercase;
  font-size: clamp(26px, 3.4vw, 44px); line-height:1.05; color:var(--amber);
  font-variant-numeric:tabular-nums;
}
.today__note{ margin-top:10px; color:oklch(88% 0.02 250); font-size:15px; max-width:46ch }

.bar24{
  position:relative; height:26px; border-radius:999px;
  background: oklch(100% 0 0 / .14);
  border:1px solid oklch(100% 0 0 / .2);
}
.bar24__fill{
  position:absolute; inset:0; border-radius:inherit;
  min-width:3px;
  background:linear-gradient(90deg, var(--amber-d), var(--amber));
}
.bar24__now{ position:absolute; top:-9px; bottom:-9px; width:3px; border-radius:2px; background:var(--on-deep); box-shadow:0 0 0 2px oklch(20% 0.05 258 / .55) }
.bar24__now[hidden]{ display:none }
.bar24__flag{
  position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%);
  white-space:nowrap; font: 700 12px/1 var(--wide); font-variant-numeric:tabular-nums;
  background:var(--on-deep); color:var(--deep-2);
  padding:5px 9px; border-radius:8px;
}
.bar24__ax{
  display:flex; justify-content:space-between; margin-top:10px;
  font: 400 12px/1 var(--mono); color:oklch(84% 0.02 250); font-variant-numeric:tabular-nums;
}
.today__state{ margin-top:14px; font-size:15px; font-weight:700; color:var(--on-deep) }
.today__state span{ font-weight:400; color:oklch(86% 0.02 250) }

/* ------------------------------ фотографии ------------------------------- */
.sec--photos .over{ color:var(--ink-2) }
.strip{ display:grid; grid-template-columns: minmax(0, 2.1fr) minmax(0, 1fr); gap: clamp(20px, 3vw, 44px); align-items:end; margin-top:var(--s-4) }
.shot{ display:flex; flex-direction:column; gap:12px; min-width:0 }
.shot__btn{
  padding:0; border:1px solid var(--line); background:var(--bg-2); cursor:zoom-in;
  border-radius:var(--r-lg); overflow:hidden; display:block; line-height:0;
  transition:transform .2s, border-color .2s;
}
.shot__btn:hover{ transform:translateY(-4px); border-color:var(--amber) }
.shot__btn img{ width:100%; aspect-ratio:16/10; object-fit:cover; display:block }
.shot--tall .shot__btn img{ aspect-ratio:4/5 }
.shot figcaption{ font-size:14px; color:var(--ink-2); padding-left:4px }
.shot figcaption b{ color:var(--ink) }
.photonote{
  border-left:3px solid var(--amber); padding-left:16px; margin-top:var(--s-3);
  font-size:15px; color:var(--ink-2); max-width:44ch;
}

/* ------------------------------ карта и контакты ------------------------- */
.where{ display:grid; grid-template-columns: minmax(0,1.95fr) minmax(0,1fr); gap: clamp(20px, 3vw, 44px); margin-top:var(--s-4); align-items:stretch }

.map{
  position:relative; overflow:hidden; touch-action:pan-y;
  min-height: 340px; height: clamp(340px, 52vh, 520px);
  border:1px solid var(--line); border-radius:var(--r-lg);
  background:var(--bg-2); cursor:grab; user-select:none; -webkit-user-select:none;
}
.map.is-drag{ cursor:grabbing }
/* полотно карты: тайлы рисуются в canvas, поэтому за край ничего не вылезает */
.map__canvas{ position:absolute; inset:0; width:100%; height:100%; display:block }
html[data-theme="dark"] .map__canvas{ filter: invert(.92) hue-rotate(180deg) saturate(.7) brightness(1.05) }
.map__pin{ position:absolute; left:50%; top:50%; transform:translate(-50%,-100%); pointer-events:none; filter:drop-shadow(0 4px 6px rgb(0 0 0 / .35)); z-index:2 }
.map__pin svg{ fill:var(--amber-d) }
.map__pin-hole{ fill:#fff }
.map__cred{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:4px 10px; font-size:11px; text-align:right;
  background:color-mix(in oklab, var(--paper) 78%, transparent); color:var(--ink-2);
}
.map__cred a{ color:inherit }
.map__ctrl{ position:absolute; right:12px; top:12px; display:grid; gap:8px; z-index:3 }
.map__ctrl button{
  width:46px; height:46px; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:12px;
  background:var(--paper); color:var(--ink);
  font: 700 20px/1 var(--wide); cursor:pointer; transition:background .18s, border-color .18s;
}
.map__ctrl button:hover{ border-color:var(--amber); background:color-mix(in oklab, var(--amber) 18%, var(--paper)) }
.contacts{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--r-lg);
  padding: clamp(20px, 2.4vw, 30px);
  display:flex; flex-direction:column;
}
.contacts .over{ margin-top:var(--s-3) }
.contacts .over:first-of-type{ margin-top:0 }
.contacts__addr{ font-size:18px; font-weight:600; overflow-wrap:anywhere }
.contacts__tel{ display:inline-flex; align-items:center; min-height:44px; font: 700 21px/1.2 var(--wide); color:var(--deep); text-decoration:none; font-variant-numeric:tabular-nums; border-bottom:2px solid color-mix(in oklab, var(--deep) 35%, transparent) }
html[data-theme="dark"] .contacts__tel{ color:var(--amber); border-bottom-color:color-mix(in oklab, var(--amber) 45%, transparent) }
.contacts__tel:hover{ border-bottom-color:currentColor }
.contacts__hours b{ font-size:17px }
.contacts__pay{ color:var(--ink-2) }
.contacts .btn--wide:first-of-type{ margin-top:var(--s-3) }

/* ---------------- финальный экран «как дойти прямо сейчас» --------------- */
.cta{ background:var(--amber); color:var(--on-amber); padding: clamp(46px, 7vw, 88px) 0 }
.cta__in{
  display:grid; grid-template-columns: minmax(0,1.1fr) minmax(0,1fr);
  gap: clamp(26px, 4vw, 64px); align-items:start;
}
.cta__t{
  font-family:var(--cond); font-stretch:condensed; font-weight:700; text-transform:uppercase;
  font-size: clamp(42px, 7.4vw, 100px); line-height:.9; letter-spacing:-.02em; margin:0;
  color:var(--on-amber);
}
.cta__t span{ color:var(--paper) }
html[data-theme="dark"] .cta__t span{ color:oklch(99% 0.004 250) }
.cta__lead{ margin-top:var(--s-3); font-size:clamp(16px,1.7vw,19px); line-height:1.5; max-width:44ch; color:color-mix(in oklab, var(--on-amber) 88%, transparent) }
.cta__facts{ display:grid; gap:var(--s-2) }
.cta__facts > div{
  display:grid; grid-template-columns: 84px minmax(0,1fr); gap:14px; align-items:baseline;
  border-top:1px solid color-mix(in oklab, var(--on-amber) 28%, transparent); padding-top:12px;
}
.cta__facts dt{ font: 700 10px/1.5 var(--wide); letter-spacing:.2em; text-transform:uppercase; color:color-mix(in oklab, var(--on-amber) 70%, transparent) }
.cta__facts dd{ font-size:16px; font-weight:600 }
.cta__acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:var(--s-3) }

/* --------------------------------- подвал -------------------------------- */
.foot{ background:var(--deep-2); color:oklch(90% 0.015 250); padding: clamp(40px, 6vw, 70px) 0 calc(var(--s-5) + env(safe-area-inset-bottom)); font-size:15px }
.foot__in{ display:grid; grid-template-columns: minmax(0,1.6fr) minmax(0,1fr) minmax(0,1fr); gap:var(--s-4) }
.foot__name{ font-family:var(--cond); font-stretch:condensed; font-weight:700; text-transform:uppercase; font-size:28px; color:var(--amber); margin-bottom:8px }
.foot__nav{ display:grid; align-content:start }
.foot a{ color:inherit; text-decoration:none; border-bottom:1px solid oklch(100% 0 0 / .3) }
.foot a:hover{ border-bottom-color:var(--amber); color:var(--amber) }
.foot__nav a, .foot__c a{ display:inline-flex; align-items:center; min-height:44px }
.foot__c{ display:grid; align-content:start }
.foot__sm{ font-size:13px; color:oklch(80% 0.02 250) }

/* --------------------------- постоянная кнопка звонка -------------------- */
.callbar{ display:none }

/* --------------------------------- лайтбокс ------------------------------ */
.lb{
  position:fixed; inset:0; z-index:70;
  background:oklch(14% 0.02 258 / .93);
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:clamp(6px,2vw,20px);
  padding:clamp(46px,7vw,70px) clamp(8px,3vw,32px);
}
.lb[hidden]{ display:none }
.lb__fig{ display:flex; flex-direction:column; gap:12px; align-items:center; min-width:0 }
.lb__fig img{ max-width:100%; max-height:76vh; border-radius:var(--r-md); object-fit:contain }
.lb__fig figcaption{ color:oklch(90% 0.01 250); font-size:14px; text-align:center }
.lb__x, .lb__nav{
  width:48px; height:48px; display:grid; place-items:center; cursor:pointer;
  background:oklch(100% 0 0 / .1); color:#fff; border:1px solid oklch(100% 0 0 / .28); border-radius:50%;
  transition:background .18s;
}
.lb__x:hover, .lb__nav:hover{ background:oklch(100% 0 0 / .22) }
.lb__x{ position:absolute; top:14px; right:14px }

/* ------------------------ появление блоков при прокрутке ----------------- */
/* ВАЖНО: видимость не завязана ни на скрипт, ни на наблюдатель.
   .reveal всегда читается — двигается только положение блока. */
html.js .reveal{ transform:translateY(16px) }
html.js .reveal.is-in{ transform:none; transition:transform .6s cubic-bezier(.2,.7,.3,1) }
@media (prefers-reduced-motion: reduce){
  html.js .reveal{ transform:none }
  .hero__photo{ animation:none }
  .poster span{ animation:none }
  .btn:hover, .shot__btn:hover{ transform:none }
}

/* ================================ ширины ================================= */
@media (max-width: 1100px){
  .hero__foot{ grid-template-columns:1fr; gap:var(--s-3) }
  .hero__acts{ grid-row:auto; grid-column:auto }
  .hero__now{ grid-row:auto; grid-column:auto }
  .today{ grid-template-columns:1fr; align-items:start }
}

@media (max-width: 980px){
  .bar__nav{
    position:absolute; left:0; right:0; top:var(--bar-h);
    flex-direction:column; gap:0;
    background:var(--paper); border-bottom:1px solid var(--line);
    padding: var(--s-2) clamp(14px, 4vw, 40px) var(--s-3);
    display:none;
  }
  .bar__nav.is-open{ display:flex }
  .bar__nav a{ min-height:50px; padding:0; border-bottom:1px solid var(--line); font-size:17px }
  .bar__nav a:last-child{ border-bottom:0 }
  .icobtn--menu{ display:grid }
  .bar__side{ margin-left:auto }

  .split, .split--rev, .where, .strip, .cta__in{ grid-template-columns:1fr }
  .split--rev .split__narrow{ order:-1 }
  .foot__in{ grid-template-columns:1fr 1fr }
  .foot__in > :first-child{ grid-column:1 / -1 }
}

@media (max-width: 700px){
  body{ font-size:16px }
  .bar__call span{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap }
  .bar__call{ padding:12px 16px }
  .bar__name em{ display:none }
  .hero{ min-height: 92svh }
  .poster{ font-size: clamp(42px, 13vw, 92px) }
  .num__v{ font-size: clamp(72px, 24vw, 120px) }
  .cta__facts > div{ grid-template-columns:1fr; gap:4px }
  .foot__in{ grid-template-columns:1fr }
  .lb{ grid-template-columns:1fr; grid-template-rows:1fr auto; padding-bottom:20px }
  .lb__fig{ grid-row:1; grid-column:1 }
  .lb__nav--prev{ grid-row:2; justify-self:start }
  .lb__nav--next{ grid-row:2; grid-column:1; justify-self:end }

  /* постоянная кнопка звонка на телефоне */
  .callbar{
    position:fixed; left:12px; right:12px; bottom:calc(12px + env(safe-area-inset-bottom));
    z-index:45; display:flex; align-items:center; justify-content:center; gap:10px;
    min-height:56px; border-radius:999px; text-decoration:none;
    background:var(--amber); color:var(--on-amber);
    font: 700 16px/1 var(--wide);
    box-shadow: 0 10px 26px oklch(20% 0.06 70 / .32);
  }
  .callbar .ic{ fill:currentColor; stroke:none }
  .foot{ padding-bottom: calc(100px + env(safe-area-inset-bottom)) }
  .sec--facts{ margin-inline:0; border-radius:var(--r-md) }
}