/* Сайт Софии Лигер, v3.11: «Welcome Book» на несколько страниц.
   Сайт оформлен как гостевой буклет: колонтитулы с главами и страницами, арки, бронзовые волосяные линии,
   печать, подпись. Палитра «слоновая кость, графит, коньяк», Cormorant Garamond + Jost.
   Движение только transform и opacity: на Retina с крупными фото это держит 60 кадров. */

@font-face { font-family: "Cormorant Garamond"; src: url(../assets/fonts/cormorant-garamond-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; src: url(../assets/fonts/cormorant-garamond-latin-wght-normal.woff2) format("woff2"); font-weight: 300 700; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Cormorant Garamond"; src: url(../assets/fonts/cormorant-garamond-cyrillic-wght-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Cormorant Garamond"; src: url(../assets/fonts/cormorant-garamond-latin-wght-italic.woff2) format("woff2"); font-weight: 300 700; font-style: italic; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Jost"; src: url(../assets/fonts/jost-cyrillic-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Jost"; src: url(../assets/fonts/jost-latin-wght-normal.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Marck Script"; src: url(../assets/fonts/marck-script-cyrillic-400-normal.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }

:root {
  --bg: #F2F0EB;
  --bg-2: #E9E5DD;
  --paper: #FBFAF7;
  --ink: #1E1D1B;
  --muted: #625E57;
  --line: rgba(30, 29, 27, .14);
  --hair: color-mix(in srgb, var(--accent) 45%, transparent);
  --accent: #9E5B35;
  --accent-ink: #87492A;
  --brass: linear-gradient(135deg, #E6C58F 0%, #C99A5E 45%, #A8763F 100%);
  --shell: rgba(30, 29, 27, .045);
  --shell-line: rgba(30, 29, 27, .08);
  --shadow: 0 40px 70px -46px rgba(30, 29, 27, .5);
  --shadow-soft: 0 26px 46px -34px rgba(30, 29, 27, .45);
  --img-filter: none;
  --door: #F5F2EC;
  --door-line: rgba(120, 96, 70, .26);
  --f-display: "Cormorant Garamond", "Times New Roman", serif;
  --f-body: "Jost", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-sign: "Marck Script", "Cormorant Garamond", cursive;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(20px, 5vw, 72px);
  --wrap: 1320px;
  --sec: clamp(96px, 11vw, 168px);
  --arch: 999px 999px 0 0;
  color-scheme: light;
}
[data-theme="evening"] {
  --bg: #151413;
  --bg-2: #1C1A18;
  --paper: #22201D;
  --ink: #ECE7E0;
  --muted: #ACA59B;
  --line: rgba(236, 231, 224, .14);
  --accent: #C9825A;
  --accent-ink: #DB9A72;
  --shell: rgba(236, 231, 224, .045);
  --shell-line: rgba(236, 231, 224, .09);
  --shadow: 0 40px 70px -40px rgba(0, 0, 0, .85);
  --shadow-soft: 0 26px 46px -30px rgba(0, 0, 0, .8);
  --img-filter: brightness(.86) saturate(.95);
  --door: #2A2724;
  --door-line: rgba(236, 210, 180, .2);
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; overflow-x: clip; }
html.lenis, html.lenis body { height: auto; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font: 400 17px/1.62 var(--f-body); font-variant-numeric: lining-nums; letter-spacing: .005em; -webkit-font-smoothing: antialiased; font-kerning: normal; text-rendering: optimizeLegibility; transition: background-color .8s var(--ease-out), color .8s var(--ease-out); }
body::after { content: ""; position: fixed; inset: 0; z-index: 70; pointer-events: none; background: url(../assets/tex/grain-dark.png) 0 0 / 220px; opacity: .32; }
[data-theme="evening"] body::after { background-image: url(../assets/tex/grain-light.png); }
img { display: block; max-width: 100%; height: auto; }
main img { filter: var(--img-filter); transition: filter .8s var(--ease-out); }
a { color: inherit; }
h1, h2, h3, p, figure, blockquote, dl, dd { margin: 0; }
h1, h2, h3 { font-weight: 400; }
.i { width: 1em; height: 1em; fill: currentColor; flex: none; }
.skip { position: absolute; left: -9999px; top: 12px; z-index: 95; padding: 10px 18px; border-radius: 999px; background: var(--ink); color: var(--bg); }
.skip:focus { left: 12px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 4px; }
.wrap { width: 100%; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 0 var(--pad); }

/* ---------- колонтитул буклета: глава слева, страница справа ---------- */
.chrome { display: flex; align-items: center; gap: 18px; margin-bottom: clamp(44px, 6vw, 76px); color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; }
.chrome__rule { flex: 1; height: 1px; background: var(--line); transform-origin: 0 50%; }
.chrome__folio { font-family: var(--f-display); font-style: italic; font-size: 17px; letter-spacing: .04em; text-transform: none; color: var(--accent-ink); }

/* ---------- типографика ---------- */
.eyebrow { display: inline-block; margin-bottom: 20px; font-size: 12px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--accent-ink); }
.h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(42px, 5.4vw, 92px); line-height: .98; letter-spacing: .07em; text-transform: uppercase; }
.h2 { margin-bottom: .45em; font-family: var(--f-display); font-weight: 400; font-size: clamp(30px, 3.2vw, 48px); line-height: 1.08; letter-spacing: .13em; text-transform: uppercase; text-wrap: balance; }
.kicker { margin: -4px 0 20px; font-family: var(--f-display); font-style: italic; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.2; color: var(--accent-ink); }
.lead { max-width: 25ch; margin-bottom: 22px; font-family: var(--f-display); font-size: clamp(26px, 2.3vw, 35px); line-height: 1.22; text-wrap: pretty; }
.lead em { font-style: italic; color: var(--accent-ink); }
.body { max-width: 46ch; color: var(--muted); text-wrap: pretty; }
/* два абзаца подряд не слипаются в один */
.body + .body { margin-top: 12px; }
.link { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 4px; }
.price { font-variant-numeric: lining-nums; font-family: var(--f-display); font-weight: 300; font-size: clamp(48px, 4.4vw, 68px); line-height: 1; }
.price span { margin-left: 4px; font-size: .5em; color: var(--muted); }
.center { text-align: center; }
.nobr { white-space: nowrap; }
.center .body, .center .lead { margin-left: auto; margin-right: auto; }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; gap: 14px; min-height: 54px; padding: 7px 7px 7px 26px; border: 0; border-radius: 999px; font: 500 13.5px/1.1 var(--f-body); letter-spacing: .13em; text-transform: uppercase; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform .6s var(--ease), background-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .6s var(--ease); }
.btn__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; background: rgba(255, 255, 255, .14); transition: transform .6s var(--ease); }
.btn:active { transform: scale(.98); }
.btn--solid { background: var(--ink); color: var(--bg); }
.btn--line { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 32%, transparent); padding-right: 26px; }
.btn--line:has(.btn__icon) { padding-right: 7px; }
.btn--line .btn__icon { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover .btn__icon { transform: translate(2px, -2px) scale(1.06); }
  .btn--solid:hover { background: var(--accent); color: #FBFAF7; }
  .btn--line:hover { box-shadow: inset 0 0 0 1px var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }
  .link:hover { text-decoration-thickness: 2px; }
}

/* ---------- арка и рамка ---------- */
.arch { position: relative; overflow: hidden; border-radius: var(--arch); background: var(--bg-2); isolation: isolate; }
.arch img { width: 100%; height: 100%; object-fit: cover; }
.arch img[data-parallax] { position: absolute; left: 0; top: -7%; height: 114%; will-change: transform; }

/* ---------- навигация ---------- */
.nav { position: fixed; z-index: 40; top: 18px; left: 50%; display: flex; align-items: center; gap: 8px; width: max-content; max-width: calc(100vw - 24px); padding: 6px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 84%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -28px rgba(30, 29, 27, .45); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); white-space: nowrap; transform: translateX(-50%); transition: transform .7s var(--ease), background-color .8s var(--ease-out); }
.nav.is-hidden { transform: translate(-50%, calc(-100% - 28px)); }
.nav__mono { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 22px 22px 6px 6px; background: var(--ink); color: var(--bg); font-family: var(--f-display); font-size: 17px; letter-spacing: .08em; text-decoration: none; }
.nav__links { display: flex; gap: 2px; padding: 0 6px; }
.nav__links a { position: relative; padding: 11px 16px; border-radius: 999px; font-size: 12.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; text-decoration: none; transition: background-color .4s var(--ease-out); }
.nav__links a[aria-current="page"]::after { content: ""; position: absolute; left: 50%; bottom: 4px; width: 4px; height: 4px; border-radius: 50%; background: var(--accent); translate: -50% 0; }
.nav__light { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--ink); font-size: 21px; cursor: pointer; transition: background-color .6s var(--ease-out), color .6s var(--ease-out); }
.nav__light::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 196, 120, .55), transparent); opacity: 0; transition: opacity .8s var(--ease-out); pointer-events: none; }
[data-theme="evening"] .nav__light { background: #E9B46F; color: #2A1F14; }
[data-theme="evening"] .nav__light::before { opacity: 1; }
.nav__burger { display: none; position: relative; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--ink); cursor: pointer; }
.nav__burger span { position: absolute; left: 14px; right: 14px; height: 1.5px; background: var(--bg); transition: transform .6s var(--ease), top .6s var(--ease); }
.nav__burger span:first-child { top: 18px; }
.nav__burger span:last-child { top: 25px; }
.nav__burger[aria-expanded="true"] span:first-child { top: 21.5px; transform: rotate(45deg); }
.nav__burger[aria-expanded="true"] span:last-child { top: 21.5px; transform: rotate(-45deg); }
.menu { position: fixed; inset: 0; z-index: 39; display: grid; place-items: center; background: color-mix(in srgb, var(--bg) 96%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.menu[hidden] { display: none; }
.menu nav { display: grid; gap: 4px; text-align: center; }
.menu a { padding: 9px 12px; font-family: var(--f-display); font-size: clamp(30px, 8.5vw, 44px); line-height: 1.12; text-decoration: none; text-transform: uppercase; letter-spacing: .08em; }
.menu small { display: block; margin-top: 2px; font-family: var(--f-body); font-size: 12.5px; letter-spacing: .12em; text-transform: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) {
  .nav__links a:hover { background: color-mix(in srgb, var(--ink) 7%, transparent); }
  .nav__light:hover { background: color-mix(in srgb, var(--ink) 12%, transparent); }
  [data-theme="evening"] .nav__light:hover { background: #F2C487; }
}

/* ---------- шторка между страницами ---------- */
.curtain { position: fixed; inset: 0; z-index: 90; display: grid; place-content: center; justify-items: center; gap: 20px; background: var(--bg-2); color: var(--ink); transform: translateY(101%); pointer-events: none; }
.curtain.is-on { pointer-events: auto; }
html.is-arriving .curtain { transform: none; }
.curtain__arch { width: 64px; height: 86px; overflow: visible; }
.curtain__arch path { fill: none; stroke: var(--accent); stroke-width: 1.2; vector-effect: non-scaling-stroke; }
.curtain__mono { font-family: var(--f-display); font-size: 14px; letter-spacing: .5em; text-transform: uppercase; color: var(--muted); }
.curtain__word { max-width: 22ch; min-height: 1.3em; font-family: var(--f-display); font-style: italic; font-size: clamp(24px, 2.8vw, 32px); line-height: 1.3; text-align: center; }
.curtain__bar { width: 110px; height: 1px; background: var(--line); overflow: hidden; }
.curtain__bar i { display: block; width: 100%; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(0); }

/* ---------- вход: дверь-арка открывается, комната садится в обложку ---------- */
.entrance { position: fixed; inset: 0; z-index: 85; display: none; cursor: pointer; }
.is-entering .entrance { display: block; }
.entrance:not(.is-set) > * { visibility: hidden; }
/* пока идёт вход, обложка спрятана; снимаем класс ровно в момент, когда начинается её сборка */
.is-veiled .hero__title, .is-veiled .hero__eyebrow, .is-veiled .hero__host, .is-veiled .hero .ctas, .is-veiled .hero__deco, .is-veiled .nav, .is-veiled .hero__arch { opacity: 0; }
.entrance__veil { position: absolute; inset: 0; background: var(--bg); }
.entrance__stage { position: absolute; left: var(--ex); top: var(--ey); width: var(--ew); height: var(--eh); transform-origin: 0 0; will-change: transform; }
/* фото на пиксель уже створок: двойное сглаживание краёв не даёт тёмной каймы по контуру двери */
.entrance__photo { position: absolute; inset: 1px; overflow: hidden; border-radius: var(--arch); background: var(--bg-2); }
.entrance__photo img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, 50% 72%); will-change: transform; }
.entrance__doors { position: absolute; inset: 0; overflow: hidden; border-radius: var(--arch); perspective: 1600px; }
.entrance__outline { position: absolute; left: -16px; top: -16px; width: calc(100% + 32px); height: calc(100% + 16px); overflow: visible; }
.entrance__outline path { fill: none; stroke: var(--accent); stroke-width: 1.1; vector-effect: non-scaling-stroke; }
.entrance__word { position: absolute; left: 0; right: 0; top: calc(var(--ey) - 86px); text-align: center; font-family: var(--f-display); font-weight: 300; font-size: clamp(20px, 2.3vw, 30px); letter-spacing: .44em; text-transform: uppercase; }
.entrance__sub { position: absolute; left: 0; right: 0; top: calc(var(--ey) + var(--eh) + 34px); text-align: center; font-size: 11.5px; font-weight: 500; letter-spacing: .42em; text-transform: uppercase; color: var(--muted); }
.entrance__skip { position: absolute; z-index: 2; right: 22px; bottom: calc(22px + env(safe-area-inset-bottom)); padding: 10px 16px; border: 0; border-radius: 999px; background: color-mix(in srgb, var(--ink) 7%, transparent); color: var(--muted); font: 500 11.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; }
.door { position: absolute; top: 0; bottom: 0; width: 50%; background: var(--door); box-shadow: inset 0 0 0 1px var(--door-line); }
.door--l { left: 0; transform-origin: 0 50%; }
.door--r { right: 0; transform-origin: 100% 50%; }
.door::before, .door::after { content: ""; position: absolute; left: 15%; right: 15%; border: 1px solid var(--door-line); border-radius: 3px; }
.door::before { top: 21%; height: 35%; }
.door::after { top: 61%; bottom: 8%; }
.door--l::before { border-top-left-radius: 999px; }
.door--r::before { border-top-right-radius: 999px; }
.door__knob { position: absolute; top: 56%; width: 9px; height: 9px; border-radius: 50%; background: var(--brass); box-shadow: 0 2px 4px rgba(0, 0, 0, .25); }
.door--l .door__knob { right: 8%; }
.door--r .door__knob { left: 8%; }

/* ---------- обложка главной ---------- */
.hero { display: grid; grid-template-columns: minmax(0, 1.22fr) minmax(0, .78fr); gap: clamp(28px, 4vw, 80px); align-items: center; min-height: 100svh; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 120px var(--pad) 64px; }
.hero__eyebrow { margin-bottom: 26px; }
.hero__title { display: grid; margin-bottom: 34px; }
.hero__line { white-space: nowrap; }
.hero__line:last-child { padding-left: 1.05em; }
.hero__host { display: flex; align-items: center; gap: 18px; margin-bottom: 38px; }
.hero__avatar { flex: none; width: 60px; height: 60px; border-radius: 50%; object-fit: cover; object-position: 50% 40%; box-shadow: 0 0 0 1px var(--line), 0 10px 20px -12px rgba(30, 29, 27, .5); }
.hero__sub { max-width: 36ch; color: var(--muted); font-size: clamp(16.5px, 1.25vw, 18.5px); }
.hero__media { position: relative; justify-self: center; width: min(430px, 100%); }
.hero__arch { aspect-ratio: 3 / 4.3; box-shadow: var(--shadow); }
.hero__arch img { object-position: var(--hero-pos, 50% 72%); }
.hero.is-live .hero__arch img { animation: archDrift 24s ease-in-out infinite alternate; }
@keyframes archDrift { from { scale: 1; } to { scale: 1.07; } }
/* компьютер: у фото обложки запас 6% под эффект глубины (сдвиг за курсором, js/home.js), задан с первого кадра.
   Раньше запас ставил скрипт уже после загрузки, и фото резко увеличивалось (до v3.14) */
@media (min-width: 961px) and (pointer: fine) and (prefers-reduced-motion: no-preference) { .hero__arch img[data-depth-img] { transform: scale(1.06); } }
.hero__frame { position: absolute; inset: -16px -16px 0; border: 1px solid var(--hair); border-bottom: 0; border-radius: var(--arch); pointer-events: none; }
/* вечер: в комнате за окном зажигают лампу */
.hero__lamp { position: absolute; inset: 0; z-index: 1; background: radial-gradient(60% 46% at 24% 32%, rgba(255, 190, 110, .42), transparent 70%), linear-gradient(rgba(30, 18, 8, .14), rgba(30, 18, 8, .3)); opacity: 0; transition: opacity 1.2s var(--ease-out); pointer-events: none; }
[data-theme="evening"] .hero__lamp { opacity: 1; }
.seal { position: absolute; z-index: 2; left: -68px; bottom: 54px; display: grid; place-items: center; width: 148px; aspect-ratio: 1; border-radius: 50%; background: var(--paper); box-shadow: 0 24px 50px -28px rgba(30, 29, 27, .55), inset 0 0 0 1px var(--line); }
.seal svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.seal text { font-family: var(--f-body); font-size: 12.5px; font-weight: 500; text-transform: uppercase; fill: var(--ink); }
.seal__mono { font-family: var(--f-display); font-size: 31px; letter-spacing: .06em; }

/* ---------- три двери ---------- */
.doors { padding: var(--sec) 0; }
.doors__head { max-width: 720px; margin: 0 auto clamp(56px, 7vw, 92px); text-align: center; }
.doors__head .body, .center.body, .body.center, .letterbox__head .body { margin-left: auto; margin-right: auto; }
.doors__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 54px); }
.portal { display: grid; grid-template-rows: auto 1fr; gap: 26px; text-decoration: none; }
.portal__arch { position: relative; aspect-ratio: 3 / 4.15; overflow: hidden; border-radius: var(--arch); background: var(--bg-2); box-shadow: var(--shadow); isolation: isolate; }
.portal__arch img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.8s var(--ease); }
.portal__leaves { position: absolute; inset: 0; perspective: 1200px; pointer-events: none; }
.portal__leaves .door { transition: transform 1.5s var(--ease); }
.portal.is-open .door--l { transform: rotateY(-106deg); }
.portal.is-open .door--r { transform: rotateY(106deg); }
.portal__label { display: grid; grid-template-rows: auto auto 1fr auto; justify-items: center; gap: 8px; text-align: center; }
.portal__who { font-size: 11.5px; font-weight: 500; line-height: 1.6; letter-spacing: .32em; text-transform: uppercase; color: var(--accent-ink); }
.portal__title { font-family: var(--f-display); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.12; }
.portal__text { max-width: 30ch; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.portal__go { display: inline-flex; align-self: end; align-items: center; gap: 10px; margin-top: 6px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
.portal__go .i { transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) {
  .portal:hover .portal__arch img { transform: scale(1.045); }
  .portal:hover .portal__go .i { transform: translateX(6px); }
}

/* ---------- о хозяйке ---------- */
.about { padding: 0 0 var(--sec); }
.about__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 7vw, 120px); align-items: center; }
.about__media { width: min(440px, 100%); justify-self: center; }
.arch--about { aspect-ratio: 3 / 4.1; box-shadow: var(--shadow); }
.signature { display: inline-block; margin: 14px 0 44px; font-family: var(--f-sign); font-size: 50px; line-height: 1.2; color: var(--accent-ink); transform: rotate(-4deg); }
/* колонка по ширине текста, разделитель ровно посередине между соседними цифрами: зазор одинаковый, какой бы длины ни было число */
.figures { display: flex; flex-wrap: wrap; row-gap: 22px; }
.figures > div { flex: 0 1 auto; padding: 0 clamp(22px, 2.6vw, 38px); border-left: 1px solid var(--line); }
.figures > div:first-child { padding-left: 0; border-left: 0; }
.figures > div:last-child { padding-right: 0; }
.figures dt { font-variant-numeric: lining-nums tabular-nums; font-family: var(--f-display); font-size: clamp(36px, 3.3vw, 52px); line-height: 1; white-space: nowrap; }
.odo { display: inline-block; height: 1em; overflow: hidden; vertical-align: top; }
.odo__col { display: block; }
.odo__col span { display: block; height: 1em; line-height: 1; }
.figures dd { margin: 10px 0 0; color: var(--muted); font-size: 14px; line-height: 1.35; }

/* ---------- открытки ---------- */
.postcards { padding: var(--sec) 0; overflow: clip; background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.postcards__head { display: grid; justify-items: center; gap: 6px; max-width: 760px; margin: 0 auto 60px; padding: 0 var(--pad); text-align: center; }
.postcards__head .body { margin: 0 auto 18px; }
.strip { overflow: hidden; }
.strip__track { display: flex; gap: 28px; width: max-content; padding: 6px 14px 30px; will-change: transform; }
.card { display: block; flex: none; width: clamp(196px, 16vw, 240px); aspect-ratio: 3 / 4.2; overflow: hidden; border-radius: var(--arch); box-shadow: var(--shadow-soft); }
.card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
@media (hover: hover) and (pointer: fine) { .card:hover img { transform: scale(1.06); } }

/* ---------- шапка внутренних страниц ---------- */
.phead { display: grid; grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); gap: clamp(28px, 5vw, 96px); align-items: center; min-height: min(100svh, 960px); max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: 128px var(--pad) 72px; }
.phead .h1 { font-size: clamp(40px, 4.3vw, 72px); }
.phead__copy .body { margin: 22px 0 36px; font-size: clamp(16.5px, 1.25vw, 18.5px); }
.phead__copy .body + .body { margin-top: -18px; }
.phead__media { position: relative; justify-self: center; width: min(430px, 100%); }
.phead__arch { aspect-ratio: 3 / 4.3; box-shadow: var(--shadow); }
.crumbs { display: flex; gap: 10px; margin-bottom: 30px; font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; color: var(--muted); }
.crumbs a { margin: -12px 0; padding: 12px 0; text-decoration: none; }
@media (hover: hover) and (pointer: fine) { .crumbs a:hover { color: var(--ink); } }

/* ---------- путь гостя: линия рисуется, по ней едет чашка, шаги загораются ---------- */
.journey { --journey-bg: var(--bg-2); position: relative; background: var(--journey-bg); transition: background-color .8s var(--ease-out); }
/* путь на светлом фоне: у консультации соседняя секция уже на втором фоне */
.journey--plain { --journey-bg: var(--bg); }
.journey--plain .stop span { max-width: 30ch; }
.journey__pin { display: grid; grid-template-rows: auto auto 1fr; min-height: 100svh; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; padding: clamp(84px, 12svh, 112px) var(--pad) clamp(36px, 6svh, 64px); }
.journey .chrome { margin-bottom: clamp(24px, 4svh, 40px); }
.journey__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; }
.journey__head .h2 { margin-bottom: 0; }
.journey__head .body { justify-self: end; }
.chart { position: relative; align-self: center; width: 100%; }
.chart__plot { position: relative; aspect-ratio: 1200 / 300; }
.chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.chart__path { fill: none; stroke: var(--accent); stroke-width: 1.4; stroke-linecap: round; }
.chart__path--ghost { stroke: color-mix(in srgb, var(--ink) 22%, transparent); stroke-width: 1; stroke-dasharray: 1 6; }
/* булавка: точка на линии и пунктир вниз к подписи шага */
.chart__pin { position: absolute; left: var(--x); top: var(--y); bottom: 0; width: 1px; translate: -50% 0; background: linear-gradient(var(--hair) 40%, transparent 0) 0 0 / 1px 5px; }
.chart__pin::before { content: ""; position: absolute; left: 50%; top: 0; width: 13px; height: 13px; translate: -50% -50%; border-radius: 50%; background: var(--journey-bg); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 7px color-mix(in srgb, var(--accent) 10%, transparent); transition: background-color .5s var(--ease-out); }
.chart__pin.is-on::before { background: var(--accent); }
.stops { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); margin: 0; padding: 0; list-style: none; }
/* на компьютере шаг загорается сменой класса; на телефоне прозрачность ведёт GSAP, поэтому переход только здесь */
.stop { padding: 22px 14px 0; text-align: center; }
@media (min-width: 961px) {
  .js .stop { opacity: .32; transition: opacity .9s var(--ease-out); }
  .js .stop.is-on { opacity: 1; }
}
.stop small { display: block; margin-bottom: 8px; font-size: 10.5px; font-weight: 500; letter-spacing: .3em; text-transform: uppercase; color: var(--accent-ink); }
.stop b { display: block; margin-bottom: 8px; font-family: var(--f-display); font-size: clamp(22px, 1.75vw, 26px); font-weight: 500; line-height: 1.1; }
.stop span { display: block; max-width: 23ch; margin: 0 auto; color: var(--muted); font-size: 14.5px; line-height: 1.45; text-wrap: pretty; }
.chart__cup { position: absolute; z-index: 3; left: 0; top: 0; width: 64px; filter: drop-shadow(0 14px 10px rgba(40, 24, 10, .3)) var(--img-filter); pointer-events: none; will-change: transform; }
.stops__line { display: none; }

/* ---------- полка: три книги обложками вперёд ----------
   Фото полки с чистыми обложками, названия и стрелки лежат поверх вёрсткой и подстраиваются под ширину сцены. */
.shelf { padding: var(--sec) 0; }
.shelf__grid { display: grid; grid-template-columns: minmax(280px, .65fr) minmax(0, 1.35fr); grid-template-rows: 1fr auto auto 1fr; column-gap: clamp(28px, 4.4vw, 70px); }
.shelf__intro { grid-column: 1; grid-row: 2; }
.shelf__intro .h2 { margin-bottom: 0; }
.still { grid-column: 2; grid-row: 1 / 5; align-self: center; min-width: 0; }
.scene { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: #BAA890; box-shadow: var(--shadow); isolation: isolate; }
.scene__img { width: 100%; height: 100%; object-fit: cover; }
.scene__books { position: absolute; inset: 0; container-type: inline-size; }
.cover { position: absolute; color: var(--ink); }
.cover__pick { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 9%; padding: 0; border: 0; border-radius: 2px; background: transparent; color: var(--ink); cursor: pointer; }
.cover__pick::before { content: ""; position: absolute; inset: 0; border-radius: 2px; outline: 1px solid transparent; outline-offset: 5px; transition: outline-color .5s var(--ease-out), background-color .5s var(--ease-out); }
.cover__by { font: 400 clamp(7px, 1cqw, 11px)/1 var(--f-body); letter-spacing: .15em; text-transform: uppercase; pointer-events: none; }
.cover__title { font: 500 clamp(14px, 2.7cqw, 30px)/1.05 var(--f-display); letter-spacing: .04em; text-align: center; pointer-events: none; }
.cover__mono { font: 400 clamp(9px, 1.6cqw, 16px)/1 var(--f-display); letter-spacing: .13em; pointer-events: none; }
.cover__go { position: absolute; z-index: 1; right: 8%; bottom: 6%; display: grid; place-items: center; width: clamp(24px, 3.8cqw, 38px); aspect-ratio: 1; border-radius: 50%; color: var(--ink); box-shadow: inset 0 0 0 1px currentColor; font-size: clamp(12px, 2cqw, 20px); transition: transform .6s var(--ease), background-color .5s var(--ease-out), color .5s var(--ease-out), box-shadow .5s var(--ease-out); }
/* выбранная книга отмечена закладкой сверху */
.cover.is-selected::after { content: ""; position: absolute; left: 50%; top: -8px; width: 8px; height: 22px; translate: -50% 0; background: #A15B36; clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%); pointer-events: none; }
@media (hover: hover) and (pointer: fine) {
  .cover__pick:hover::before { outline-color: color-mix(in srgb, var(--ink) 70%, transparent); background: rgba(255, 255, 255, .07); }
  .cover:hover .cover__go, .cover__go:hover { transform: translateY(-4px); background: #F9F3E9; color: #473C2F; box-shadow: inset 0 0 0 1px #F9F3E9; }
}
.cover__pick:focus-visible { outline: none; }
.cover__pick:focus-visible::before { outline-color: var(--ink); }
/* подсказка стоит под средней книгой, стрелка смотрит прямо на неё */
.scene__hint { position: absolute; left: 51.6%; bottom: 3%; display: flex; flex-direction: column; align-items: center; gap: 2px; translate: -50% 0; color: #5F5547; font-size: 12.5px; letter-spacing: .02em; white-space: nowrap; pointer-events: none; }
.scene__hint span { font-family: var(--f-display); font-size: 24px; line-height: 1; }
.still__index { display: flex; justify-content: center; gap: 26px; padding-top: 12px; }
.still__pick { min-height: 44px; padding: 8px 0; border: 0; border-bottom: 1px solid transparent; background: none; color: var(--muted); font: 500 12px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .4s var(--ease-out), border-color .4s var(--ease-out); }
.still__pick.is-selected { border-color: var(--accent); color: var(--ink); }
@media (hover: hover) and (pointer: fine) { .still__pick:hover { color: var(--ink); } }
.shelf .panels { grid-column: 1; grid-row: 3; align-self: start; margin-top: 26px; padding-top: 24px; }
/* цена и кнопка в одну строку, как в исследовании полки */
.shelf .buy { flex-wrap: nowrap; justify-content: space-between; gap: 18px; }
.shelf .price { font-size: clamp(38px, 3vw, 46px); white-space: nowrap; }
.shelf .price--text { font-size: clamp(22px, 1.8vw, 26px); }
.price--text { font-size: clamp(26px, 2.2vw, 32px); color: var(--muted); }
/* панели лежат в одной ячейке: высота блока не прыгает при смене книги */
.panels { display: grid; margin-top: 40px; padding-top: 30px; border-top: 1px solid var(--line); }
.panel { grid-area: 1 / 1; display: grid; align-content: start; gap: 4px; padding-bottom: 4px; }
.panel[hidden] { display: grid; visibility: hidden; }
.panel__no { font-family: var(--f-display); font-style: italic; font-size: 20px; color: var(--accent-ink); }
.panel .body { margin: 6px 0 26px; }

/* ---------- общее для страниц продуктов ---------- */
.features, .topics, .kit__list { list-style: none; margin: 0; padding: 0; }
.features { display: grid; gap: 10px; margin: 26px 0 32px; }
.features li, .topics li, .kit__list li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; }
.features li::before, .topics li::before, .kit__list li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 13px; border: 1px solid var(--accent); border-bottom: 0; border-radius: 6px 6px 0 0; }
.buy { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; }
.note { margin-top: 16px; color: var(--muted); font-size: 14px; }
.prod { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 5vw, 90px); align-items: center; max-width: calc(var(--wrap) + var(--pad) * 2); min-height: min(100svh, 960px); margin: 0 auto; padding: 116px var(--pad) clamp(64px, 8vw, 110px); }
.prod__info .crumbs { margin-bottom: 26px; }
.prod__info .h1 { font-size: clamp(36px, 3.7vw, 62px); }
.prod__info .kicker { margin: 16px 0 18px; }
.prod__info > .body { margin-bottom: 4px; }
.prod__info .h1 + .body { margin-top: 22px; }
.prod__info > .body + .buy { margin-top: 24px; }
.crumbs--deep a + span + a { color: var(--muted); }
/* ещё на полке: ссылки на соседние продукты */
.more { padding: 0 0 var(--sec); }
.more__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); }
.more__item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 22px; align-items: center; padding: 22px 26px; border-radius: 26px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); text-decoration: none; transition: transform .7s var(--ease), background-color .8s var(--ease-out); }
.more__spine { width: 26px; height: 74px; border-radius: 3px 3px 1px 1px; background: linear-gradient(90deg, rgba(0, 0, 0, .2), transparent 30%, transparent 70%, rgba(0, 0, 0, .22)), var(--c, #8E5130); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.more__item small { display: block; margin-bottom: 4px; color: var(--accent-ink); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.more__item b { display: block; font-family: var(--f-display); font-size: clamp(23px, 1.9vw, 28px); font-weight: 400; line-height: 1.15; }
.more__item b + span { display: block; margin-top: 4px; color: var(--muted); font-size: 14.5px; line-height: 1.45; }
.more__item .i { font-size: 22px; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .more__item:hover { transform: translateY(-4px); } .more__item:hover .i { transform: translateX(6px); } }

/* ---------- буклет на льняной салфетке: листается стрелками ---------- */
.viewer { display: grid; justify-items: center; gap: 22px; }
.viewer__mat { position: relative; width: 100%; padding: clamp(30px, 4.4vw, 62px); border-radius: 30px; background: linear-gradient(rgba(236, 226, 211, .8), rgba(229, 217, 200, .8)), url(../assets/tex/linen.webp) center / 320px; box-shadow: inset 0 0 0 1px rgba(60, 40, 20, .08), inset 0 22px 40px -26px rgba(60, 40, 20, .3), var(--shadow); transition: background-color .8s var(--ease-out); }
/* льняная салфетка с подрубленным краем */
.viewer__mat::before { content: ""; position: absolute; inset: 12px; border: 1px dashed rgba(120, 88, 58, .3); border-radius: 21px; pointer-events: none; }
[data-theme="evening"] .viewer__mat { background: url(../assets/tex/linen.webp) center / 320px, #3B352F; background-blend-mode: multiply; }
.book__stage { position: relative; width: min(500px, 100%); aspect-ratio: 1; margin: 0 auto; perspective: 2600px; }
/* обрез буклета: под верхней страницей видны края следующих */
.book__stage::before { content: ""; position: absolute; inset: 0; border-radius: 4px 16px 16px 4px; box-shadow: 5px 5px 0 -1px var(--paper), 5px 5px 0 0 var(--line), 10px 10px 0 -1px var(--paper), 10px 10px 0 0 var(--line), 0 50px 80px -50px rgba(30, 29, 27, .55); }
.book__page { position: absolute; inset: 0; margin: 0; padding: 10px; border-radius: 4px 16px 16px 4px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); transform-origin: left center; will-change: transform; }
.book__page img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px 10px 10px 2px; }
.book__page::after { content: ""; position: absolute; inset: 10px; border-radius: 2px 10px 10px 2px; background: linear-gradient(90deg, rgba(20, 16, 12, .2), transparent 10%); pointer-events: none; }
.book__shade { position: absolute; inset: 0; z-index: 1; border-radius: inherit; background: linear-gradient(90deg, rgba(24, 18, 12, .34), rgba(24, 18, 12, .1) 70%, rgba(24, 18, 12, .04)); opacity: 0; pointer-events: none; }
.viewer__ctrl { display: flex; align-items: center; gap: 16px; }
.viewer__count { min-width: 64px; text-align: center; font-family: var(--f-display); font-size: 21px; letter-spacing: .2em; }
.viewer__cap { min-height: 1.5em; color: var(--muted); font-size: 14.5px; text-align: center; }

/* ---------- что внутри и что меняет: одна компактная страница ---------- */
.inside { padding: var(--sec) 0; }
.inside__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.chapters { columns: 2; column-gap: 30px; margin: 30px 0 0; padding: 0; list-style: none; }
.chapters li { display: flex; align-items: baseline; gap: 8px; padding: 9px 0; break-inside: avoid; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.chapters i { flex: 1; min-width: 12px; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 28%, transparent); transform: translateY(-4px); }
.chapters b { color: var(--muted); font-size: 13px; font-weight: 400; letter-spacing: .08em; }
.rules__list { list-style: none; margin: 0; padding: 0; }
.rule { position: relative; display: grid; grid-template-columns: 74px minmax(0, 1fr); gap: 6px 22px; align-items: baseline; padding: 26px 0; }
.rule__num { grid-row: span 2; font-family: var(--f-display); font-weight: 300; font-size: 52px; line-height: 1; color: var(--accent-ink); }
.rule__title { font-family: var(--f-display); font-weight: 400; font-size: clamp(24px, 2.1vw, 31px); line-height: 1.16; }
.rule__text { color: var(--muted); }
.rule__line { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transform-origin: 0 50%; }
.rule:last-child .rule__line { display: none; }

/* ---------- книга гостей ---------- */
.guests { padding: var(--sec) 0; background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.guestbook { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.quotes { display: grid; margin: 26px 0 18px; }
.quote { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.quote.is-active { opacity: 1; visibility: visible; }
.quote p { font-family: var(--f-display); font-style: italic; font-size: clamp(27px, 2.5vw, 39px); line-height: 1.24; text-wrap: pretty; hanging-punctuation: first; }
.quote__by { color: var(--muted); font-size: 14px; }
.guestbook__ctrl { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.round { display: grid; place-items: center; width: 54px; height: 54px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 20px; box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: background-color .5s var(--ease-out), color .5s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .round:hover { background: var(--ink); color: var(--bg); } }
.round:disabled { opacity: .35; cursor: default; }
.guestbook__count { font-variant-numeric: lining-nums; font-family: var(--f-display); font-size: 21px; letter-spacing: .14em; }
.shots { display: grid; place-items: center; min-height: 460px; padding: 12px; border-radius: 40px; background: var(--shell); box-shadow: inset 0 0 0 1px var(--shell-line); }
.shot { grid-area: 1 / 1; width: 88%; max-height: 430px; object-fit: contain; border-radius: 18px; opacity: 0; visibility: hidden; box-shadow: var(--shadow-soft); }
.shot.is-active { opacity: 1; visibility: visible; }

/* ---------- консультация: фото в арке и приложенный к нему скриншот отзыва ---------- */
.consult-visual { position: relative; width: min(440px, 100%); margin: 0 auto; }
.consult-visual__arch { aspect-ratio: 3 / 4.2; box-shadow: var(--shadow); }
.consult-visual__arch img { object-position: 40% 50%; }
/* без поворота: повёрнутый скриншот браузер пересчитывает с размытием, текст отзыва должен быть резким */
.consult-visual__review { position: absolute; z-index: 2; left: -24%; bottom: -6%; width: 56%; margin: 0; padding: 0; border-radius: 0; background: none; }
/* тень рамкой по скруглению пузыря, а не filter: drop-shadow: фильтр с размытием перерисовывался при прокрутке в Safari */
.consult-visual__review img { border-radius: 3.9% 3.9% 3.9% 0 / 3.7% 3.7% 3.7% 0; box-shadow: 0 26px 30px rgba(30, 29, 27, .22), 0 2px 3px rgba(30, 29, 27, .12); }
.consult-visual__review figcaption { padding: 10px 6px 0; color: var(--muted); font-size: 12.5px; letter-spacing: .02em; }
/* регалии одной строкой: латунная точка, как кнопка на доске */
.creds { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 30px; padding: 0; list-style: none; }
.creds li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 11px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); font-size: 13.5px; letter-spacing: .01em; transition: background-color .8s var(--ease-out); }
.creds li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #FFF3D6, #E0B66A 42%, #9A6C33 78%); }
/* для кого: две ситуации рядом */
.forwho { padding: var(--sec) 0; background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.forwho__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(18px, 2.6vw, 34px); margin-top: clamp(30px, 4vw, 50px); }
.who { display: grid; align-content: start; gap: 10px; padding: clamp(28px, 3.4vw, 46px); border-radius: 32px 32px 10px 10px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); transition: background-color .8s var(--ease-out); }
.who small { color: var(--accent-ink); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.who h3 { font-family: var(--f-display); font-weight: 400; font-size: clamp(28px, 2.5vw, 38px); line-height: 1.1; }
.who > p:not(.who__label) { color: var(--muted); }
.who__label { margin-top: 14px; padding-top: 18px; border-top: 1px solid var(--line); font-family: var(--f-display); font-style: italic; font-size: 20px; color: var(--accent-ink); }
.who ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.who li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.45; }
.who li::before { content: ""; position: absolute; left: 0; top: .42em; width: 11px; height: 13px; border: 1px solid var(--accent); border-bottom: 0; border-radius: 6px 6px 0 0; }
.forwho__cta { display: flex; justify-content: center; margin-top: 28px; }
.forwho__more { margin-top: clamp(30px, 4vw, 44px); text-align: center; font-family: var(--f-display); font-style: italic; font-size: clamp(22px, 1.9vw, 27px); color: var(--accent-ink); }
/* подход: слева мысль и слова гостьи, справа отчёт за год с точками до цифр */
.depth { padding: var(--sec) 0; background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.depth__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.depth__quote { margin: 36px 0 0; padding-top: 28px; border-top: 1px solid var(--line); }
.depth__quote p { font-family: var(--f-display); font-style: italic; font-size: clamp(22px, 1.9vw, 28px); line-height: 1.3; text-wrap: pretty; hanging-punctuation: first; }
.depth__quote figcaption { margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.ledger { padding: clamp(28px, 3.2vw, 44px); border-radius: 26px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow); transition: background-color .8s var(--ease-out); }
.ledger__title { margin-bottom: 8px; color: var(--accent-ink); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; }
.ledger .spec { align-items: baseline; padding: 16px 0; font-size: 15.5px; }
.ledger .spec dd { font-family: var(--f-display); font-size: clamp(28px, 2.4vw, 36px); font-weight: 400; line-height: 1; white-space: nowrap; }
.ledger__note { margin-top: 16px; color: var(--muted); font-size: 13px; }

/* ---------- комплектация: комната собирается разом ---------- */
/* фон картинкой и шесть вырезанных слоёв с запечёнными тенями; места в процентах сцены 1500×1200, CSS-фильтров нет */
.kitroom { position: relative; aspect-ratio: 5 / 4; overflow: hidden; border-radius: 24px; background: #CEBCA6; box-shadow: var(--shadow); isolation: isolate; }
/* бумажное паспарту поверх фона и вещей: вещи влетают из-под него */
.kitroom::after { content: ""; position: absolute; z-index: 3; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--line); pointer-events: none; }
.kitroom__bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.kit__item { position: absolute; z-index: 1; max-width: none; }
.ki-shelves { left: 7.8%; top: 9.208%; width: 28.033%; height: 32.167%; }
.ki-art-line { left: 45.4%; top: 15.625%; width: 13.167%; height: 22.708%; }
.ki-art-leaves { left: 62.467%; top: 19%; width: 11.533%; height: 19.333%; }
.ki-nightstand { left: 5.467%; top: 58.125%; width: 13.533%; height: 33.833%; }
.ki-vase { left: 23.3%; top: 41.292%; width: 15.933%; height: 25.625%; }
.ki-dining { z-index: 2; left: 42.867%; top: 51.125%; width: 45.233%; height: 45%; }
.kit__media { position: relative; }
.kit__counter { margin-top: 18px; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 23px; color: var(--accent-ink); }
/* скидка листа ожидания: терракотовая печать на углу комнаты */
.discount { position: absolute; z-index: 3; right: -22px; top: -34px; display: grid; place-items: center; width: 138px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #CC8A5F, #9E5B35 58%, #7B4325); color: #FCEFE3; rotate: 12deg; box-shadow: 0 20px 30px -16px rgba(90, 40, 12, .6), inset 0 0 0 5px rgba(255, 255, 255, .1); }
.discount svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.discount text { font-family: var(--f-body); font-size: 10.4px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; fill: #FCEFE3; }
.discount b { font-family: var(--f-display); font-size: 40px; font-weight: 400; line-height: 1; }
.kit__list { display: grid; gap: 10px; margin: 22px 0 32px; }
.waitlist { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 14px; align-items: end; }
.field { display: grid; gap: 8px; color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; }
.field em { font-style: normal; color: var(--accent-ink); }
.field input { width: 100%; height: 54px; padding: 0 20px; border: 0; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 24%, transparent); font: 400 16px/1.2 var(--f-body); letter-spacing: 0; text-transform: none; }
.field input:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 4px color-mix(in srgb, var(--accent) 20%, transparent); }
.field input[aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px #A3361D; }
.field__err { color: #A3361D; font-size: 13px; letter-spacing: 0; text-transform: none; }
.waitlist .btn { justify-content: center; height: 54px; min-height: 0; padding: 0 26px; }
.waitlist__note, .waitlist__ok { grid-column: 1 / -1; font-size: 14px; color: var(--muted); }
.waitlist__ok { padding: 12px 18px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--ink); }

/* ---------- вопросы ---------- */
.faq { padding: var(--sec) 0; }
.faq__inner { max-width: 860px; margin: 0 auto; }
.faq__title { margin-bottom: 26px; text-align: center; }
.qa { border-bottom: 1px solid var(--line); }
.qa__q { display: flex; align-items: center; justify-content: space-between; gap: 22px; width: 100%; padding: 22px 0; border: 0; background: none; color: inherit; font: 400 18.5px/1.35 var(--f-body); text-align: left; cursor: pointer; }
.qa__icon { position: relative; flex: none; width: 18px; height: 18px; }
.qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: currentColor; transition: transform .6s var(--ease); }
.qa__icon::after { transform: rotate(90deg); }
.qa.is-open .qa__icon::after { transform: rotate(0deg); }
.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s var(--ease); }
.qa__a > div { overflow: hidden; }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a p { max-width: 64ch; padding: 0 0 24px; color: var(--muted); }

/* ---------- гостям: окно в Завидово ---------- */
.window-hero { padding: 128px 0 0; }
.window-hero__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 90px); align-items: end; }
.window-hero__copy { padding-bottom: 12px; }
.window-hero__copy .body { margin: 22px 0 34px; font-size: clamp(16.5px, 1.25vw, 18.5px); }
.window { position: relative; aspect-ratio: 1 / .92; overflow: hidden; border-radius: 999px 999px 0 0 / 70% 70% 0 0; background: var(--bg-2); box-shadow: var(--shadow); isolation: isolate; }
.window img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 50%; will-change: transform; }
/* окно: бумажная рама и льняные занавески, которые расходятся при входе и остаются по краям */
.window__frame { position: absolute; inset: 0; z-index: 2; border-radius: inherit; box-shadow: inset 0 0 0 10px var(--paper), inset 0 0 0 11px var(--line); pointer-events: none; transition: box-shadow .8s var(--ease-out); }
.window__curtain { position: absolute; z-index: 1; top: 0; bottom: 0; width: 50%; background: linear-gradient(90deg, rgba(60, 40, 20, .1), transparent 18%, rgba(60, 40, 20, .07) 36%, transparent 54%, rgba(60, 40, 20, .08) 72%, transparent 90%), url(../assets/tex/linen-soft.webp) center / 260px, #EEE7DB; opacity: .94; will-change: transform; }
.window__curtain--l { left: 0; transform-origin: 0 50%; }
.window__curtain--r { right: 0; transform-origin: 100% 50%; }
.window__curtain { transform: scaleX(.13); }
[data-theme="evening"] .window__curtain { background-color: #CDBFAE; opacity: .8; }
.facts-strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: clamp(56px, 7vw, 96px); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts-strip div { padding: 26px 22px 24px; border-left: 1px solid var(--line); }
.facts-strip div:first-child { border-left: 0; padding-left: 0; }
.facts-strip { margin-bottom: 0; }
.facts-strip dt { font-family: var(--f-display); font-weight: 400; font-size: clamp(25px, 2.1vw, 32px); line-height: 1.05; }
.facts-strip dd { margin: 6px 0 0; color: var(--muted); font-size: 14px; line-height: 1.4; }

/* ---------- квартира ---------- */
.apt { padding: var(--sec) 0; }
.apt--alt { background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.apt__head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px clamp(28px, 5vw, 90px); align-items: start; margin-bottom: clamp(48px, 6vw, 80px); }
.apt__name { margin-bottom: 12px; }
.apt__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 40px; padding-top: 6px; }
.apt__card .body { grid-column: 1 / -1; margin-bottom: 22px; }
.apt__specs { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; margin: 0; }
.apt__beds { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.apt__beds b { color: var(--muted); font-weight: 400; }
.spec { display: flex; align-items: baseline; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 15px; }
.spec dt { color: var(--muted); }
.spec i { flex: 1; border-bottom: 1px dotted color-mix(in srgb, var(--ink) 26%, transparent); transform: translateY(-4px); }
.spec dd { font-weight: 500; text-align: right; }
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 32px); }
.gallery figure { margin: 0; }
.gallery .arch { aspect-ratio: 3 / 4; box-shadow: var(--shadow-soft); }
.gallery figcaption { margin-top: 14px; color: var(--muted); font-size: 12px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; }
.gallery img[data-zoom] { will-change: transform; }
.gallery img.pos-left { object-position: 16% 50%; }
.apt__cta { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.apt__cta p { max-width: 30ch; color: var(--muted); font-size: 14px; line-height: 1.45; }

/* отзывы гостей квартиры: лента с площадок, листается стрелками и пальцем */
.revs { margin-top: clamp(64px, 8vw, 110px); }
.revs__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 30px; margin-bottom: 26px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.revs__title { font-family: var(--f-display); font-size: clamp(26px, 2.2vw, 34px); line-height: 1.1; }
.revs__score { margin-top: 8px; color: var(--muted); font-size: 14px; }
.revs__score b { margin-right: 6px; font-family: var(--f-display); font-size: 30px; font-weight: 400; line-height: 1; color: var(--accent-ink); }
.revs__ctrl { display: flex; align-items: center; gap: 12px; }
.revs__count { min-width: 92px; text-align: center; color: var(--muted); font-size: 14px; letter-spacing: .04em; }
.revs__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * 22px) / 3); align-items: start; gap: 22px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 -6px; padding: 6px 6px 34px; }
.revs__track::-webkit-scrollbar { display: none; }
.rev { display: grid; gap: 16px; margin: 0; padding: 24px 26px 24px; scroll-snap-align: start; border-radius: 26px 26px 8px 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); transition: background-color .8s var(--ease-out); }
.rev__top { display: flex; align-items: center; gap: 12px; }
.rev__ava { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: var(--ava, #9E5B35); color: #FBF6EF; font-family: var(--f-display); font-size: 20px; line-height: 1; }
.rev__who { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.25; }
.rev__who b { font-weight: 500; }
.rev__who span { color: var(--muted); font-size: 12.5px; letter-spacing: .02em; }
.rev__score { margin-left: auto; padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink); font-size: 13px; font-weight: 600; letter-spacing: .04em; white-space: nowrap; }
.rev blockquote { margin: 0; }
.rev blockquote p { font-family: var(--f-display); font-style: italic; font-size: clamp(19px, 1.35vw, 21px); line-height: 1.34; text-wrap: pretty; }
.rev__stay { color: var(--muted); font-size: 13px; }

/* ---------- правила дома (из буклета) ---------- */
.house { padding: var(--sec) 0; }
.house__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 34px; border-top: 1px solid var(--line); }
.house__grid div { padding: 26px 18px 6px; border-left: 1px solid var(--line); }
.house__grid div:first-child { border-left: 0; padding-left: 0; }
.house__grid b { display: block; font-family: var(--f-display); font-weight: 300; font-size: clamp(30px, 2.8vw, 44px); line-height: 1; }
.house__grid span { display: block; margin-top: 8px; color: var(--muted); font-size: 14.5px; }

/* ---------- буклет в квартире: короткая строка в конце страницы ---------- */
.table { padding: 0 0 var(--sec); overflow: clip; }
.table__grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: clamp(24px, 4vw, 60px); align-items: center; max-width: 900px; margin: 0 auto; padding: 26px 34px; border-radius: 30px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.table__grid .lead { margin-bottom: 8px; font-size: clamp(23px, 1.9vw, 28px); }
.table__aside { margin: 6px 0 18px; color: var(--muted); font-size: 15.5px; }
.table__grid .eyebrow { margin-bottom: 4px; }
.tabletop { position: relative; aspect-ratio: 1 / .62; }
.fan__page { position: absolute; left: 50%; top: 50%; width: 36%; aspect-ratio: 3 / 4; margin: 0; padding: 4px; border-radius: 3px; background: var(--paper); box-shadow: 0 18px 24px -16px rgba(40, 24, 10, .55), inset 0 0 0 1px var(--line); will-change: transform; }
.fan__page img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.fan__page--hero { z-index: 2; width: 40%; }
/* веер по умолчанию (без анимации): скрипт собирает страницы в стопку и раскладывает по скроллу */
.fan__page:nth-of-type(1) { transform: translate(-112%, -44%) rotate(-13deg); }
.fan__page:nth-of-type(2) { transform: translate(10%, -46%) rotate(11deg); }
.fan__page:nth-of-type(3) { transform: translate(-50%, -56%) rotate(-2deg); }

/* ---------- бронь и ключ-карта ---------- */
.book-cta { padding: var(--sec) 0; background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.book-cta__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 40px clamp(40px, 7vw, 110px); }
/* кожаный поднос с ресепшена: на нём лежит ключ-карта */
.tray { position: relative; display: grid; place-items: center; padding: clamp(34px, 4.6vw, 54px); border-radius: 28px; background: radial-gradient(130% 150% at 24% 14%, #A3683F, #76452A 60%, #5E3520); box-shadow: inset 0 0 0 1px rgba(255, 220, 190, .2), inset 0 12px 26px rgba(0, 0, 0, .35), 0 40px 70px -40px rgba(50, 24, 10, .65); }
.tray::before { content: ""; position: absolute; inset: 12px; border: 1.5px dashed rgba(255, 228, 200, .34); border-radius: 18px; pointer-events: none; }
.book-cta__text { display: grid; gap: 4px; justify-items: start; max-width: 430px; }
.book-cta__text .body { margin: 6px 0 24px; }
.book-cta__text .body:has(+ .book-cta__help) { margin-bottom: 8px; }
.book-cta__help { font-size: 15px; }
.keycard { position: relative; width: 340px; aspect-ratio: 1.586; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; perspective: 1400px; }
.keycard__inner { position: absolute; inset: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.45, 0, .55, 1); }
.keycard.is-flipped .keycard__inner, .keycard:focus-visible .keycard__inner { transform: rotateY(180deg); }
.keycard__face { position: absolute; inset: 0; display: grid; padding: 24px 26px; border-radius: 18px; text-align: left; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.keycard__front { grid-template-rows: auto 1fr auto; transform: rotateY(0deg) translateZ(1px); background: radial-gradient(120% 140% at 0% 0%, #34312D, #181715 60%); color: #F2F0EB; box-shadow: 0 34px 50px -30px rgba(20, 18, 16, .75), inset 0 1px 0 rgba(255, 255, 255, .12); }
/* стороны меняются видимостью ровно на середине поворота: изнанка не мелькает зеркально в Safari */
.keycard__front, .keycard__back { transition: visibility 0s linear .4s; }
.keycard__back { visibility: hidden; align-content: center; gap: 16px; transform: rotateY(180deg) translateZ(1px); background: var(--paper); color: var(--ink); font-size: 15px; line-height: 1.45; box-shadow: inset 0 0 0 1px var(--line), 0 34px 50px -30px rgba(30, 29, 27, .5); }
.keycard.is-flipped .keycard__back, .keycard:focus-visible .keycard__back { visibility: visible; }
.keycard.is-flipped .keycard__front, .keycard:focus-visible .keycard__front { visibility: hidden; }
.keycard__mono { font-family: var(--f-display); font-size: 24px; letter-spacing: .12em; }
.keycard__label { align-self: end; font-size: 11.5px; letter-spacing: .34em; text-transform: uppercase; opacity: .72; }
.keycard__code { font-family: var(--f-display); font-size: 42px; line-height: 1.1; letter-spacing: .22em; }
.keycard__chip { position: absolute; right: 26px; top: 26px; width: 46px; height: 34px; border-radius: 7px; background: var(--brass); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.keycard__copy { display: inline-flex; align-items: center; gap: 8px; color: var(--accent-ink); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; }
@media (hover: hover) and (pointer: fine) {
  .keycard:hover .keycard__inner { transform: rotateY(180deg); }
  .keycard:hover .keycard__back { visibility: visible; }
  .keycard:hover .keycard__front { visibility: hidden; }
}

/* ---------- брендам ---------- */
.stats { background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.stats .figures { padding: clamp(56px, 7vw, 96px) 0; }
.formats { padding: var(--sec) 0; }
.formats__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: clamp(44px, 5vw, 72px); }
.formats__head .body { justify-self: end; }
/* два адреса интеграции: мой дом и квартиры для гостей */
.homes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(22px, 3.4vw, 54px); }
.home { display: grid; gap: 18px; align-content: start; }
.home__arch { position: relative; aspect-ratio: 4 / 4.4; box-shadow: var(--shadow-soft); }
.home__arch--top img { object-position: 50% 28%; }
.home h3 { margin-top: 8px; font-family: var(--f-display); font-weight: 400; font-size: clamp(27px, 2.4vw, 36px); line-height: 1.12; }
.home > p { color: var(--muted); }
.home__gets { display: grid; gap: 0; margin: 4px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.home__gets li { display: flex; align-items: baseline; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 15.5px; }
.home__gets b { flex: none; width: 96px; color: var(--accent-ink); font-size: 11.5px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; }
/* соцсети: только значки в кружках, подписи к ним не нужны */
.channels { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 64px); }
.channel { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: transform .6s var(--ease), background-color .8s var(--ease-out); }
.channel .i { flex: none; font-size: 26px; color: var(--accent-ink); }
@media (hover: hover) and (pointer: fine) { .channel:hover { transform: translateY(-3px); } }
.letterbox { padding: var(--sec) 0; overflow: clip; background: var(--bg-2); transition: background-color .8s var(--ease-out); }
.letterbox__head { margin-bottom: clamp(150px, 22vw, 260px); text-align: center; }
.letterbox__head .h2 { margin-bottom: .25em; }
/* контакты доступны сразу, без анимации конверта */
.letterbox__contacts { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; margin-top: clamp(34px, 4vw, 52px); color: var(--muted); font-size: 15px; }
.letterbox__contacts a { padding: 10px 0; }
.envelope { position: relative; width: min(760px, 100%); aspect-ratio: 1.6; margin: 0 auto; }
.envelope__back { position: absolute; inset: 0; border-radius: 10px; background: #DCCBB7; box-shadow: var(--shadow); }
.envelope__front { position: absolute; z-index: 2; inset: 0; border-radius: 10px; background: linear-gradient(170deg, #EBDDCB, #E3D2BE); clip-path: polygon(0 0, 50% 54%, 100% 0, 100% 100%, 0 100%); pointer-events: none; }
.envelope__flap { position: absolute; z-index: 3; left: 0; right: 0; top: 0; height: 58%; background: #D7C3AC; clip-path: polygon(0 0, 100% 0, 50% 100%); transform-origin: 50% 0; transform: perspective(1400px) rotateX(0deg); pointer-events: none; }
[data-theme="evening"] .envelope__back { background: #6B5C4E; }
[data-theme="evening"] .envelope__front { background: linear-gradient(170deg, #7C6C5D, #726254); }
[data-theme="evening"] .envelope__flap { background: #685849; }
.envelope__seal { position: absolute; z-index: 4; left: 50%; top: 52%; display: grid; place-items: center; width: 68px; height: 68px; margin: -34px 0 0 -34px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #B8653C, #7E3A1E 70%); color: #F6E2CF; font-family: var(--f-display); font-size: 21px; letter-spacing: .06em; box-shadow: 0 6px 12px -4px rgba(60, 20, 8, .55), inset 0 0 0 3px rgba(0, 0, 0, .12); }
.letter { position: absolute; z-index: 1; left: 5%; right: 5%; top: 6%; padding: clamp(34px, 4.6vw, 54px); border-radius: 4px; background: var(--paper); box-shadow: 0 10px 30px -16px rgba(30, 29, 27, .4); text-align: center; }
.letter__frame { position: absolute; left: 14px; top: 14px; width: calc(100% - 28px); height: calc(100% - 28px); overflow: visible; fill: none; stroke: var(--hair); stroke-width: 1; pointer-events: none; }
.letter__mono { display: inline-grid; place-items: center; width: 52px; height: 64px; margin-bottom: 18px; border: 1px solid var(--ink); border-radius: 26px 26px 0 0; font-family: var(--f-display); font-size: 19px; letter-spacing: .1em; }
.letter .body { margin: 4px auto 26px; }
.letter .ctas { justify-content: center; }
.letter .ctas .link { padding: 8px 0; }
.letter__sign { margin-top: 18px; font-family: var(--f-sign); font-size: 30px; color: var(--accent-ink); }
.envelope.is-open .envelope__flap { transform: perspective(1400px) rotateX(180deg); z-index: 0; }
.envelope.is-open .letter { z-index: 4; transform: translateY(-30%); }
.envelope.is-open .envelope__seal { opacity: 0; }

/* ---------- чек-лист выезда ---------- */
.checkout { position: relative; display: grid; justify-items: center; overflow: hidden; padding: var(--sec) var(--pad) 48px; text-align: center; }
.checkout__arch { position: absolute; left: 50%; top: 40px; width: min(1000px, 130vw); aspect-ratio: 1 / 1.05; margin-left: calc(min(1000px, 130vw) / -2); border: 1px solid var(--line); border-radius: var(--arch); pointer-events: none; }
.checkout__title { position: relative; max-width: 15ch; font-family: var(--f-display); font-weight: 300; font-size: clamp(36px, 4.8vw, 76px); line-height: 1.04; letter-spacing: .08em; text-transform: uppercase; }
.checkout__sub { position: relative; margin: 20px 0 26px; font-family: var(--f-display); font-size: 26px; font-style: italic; color: var(--accent-ink); }
.checkout__list { position: relative; display: grid; gap: 12px; margin: 0 0 54px; padding: 0; list-style: none; text-align: left; }
.checkout__list a, .checkout__list button { display: flex; align-items: center; gap: 14px; min-height: 44px; padding: 4px 0; border: 0; background: none; color: inherit; font: 400 18px/1.35 var(--f-body); text-align: left; text-decoration: none; cursor: pointer; }
.box { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 8px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--ink) 42%, transparent); transition: background-color .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.box svg { width: 18px; height: 18px; fill: none; stroke: var(--bg); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .6s var(--ease) .08s; }
.is-checked .box { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.is-checked .box svg { stroke-dashoffset: 0; }
@media (hover: hover) and (pointer: fine) {
  .checkout__list a:hover .box, .checkout__list button:hover .box { background: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
  .checkout__list a:hover .box svg, .checkout__list button:hover .box svg { stroke-dashoffset: 0; }
}
.checkout__nav { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 26px; margin-bottom: 24px; }
.checkout__nav a { padding: 14px 4px; font-size: 12px; font-weight: 500; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--muted); }
@media (hover: hover) and (pointer: fine) { .checkout__nav a:hover { color: var(--ink); } }
.checkout__copy { position: relative; color: var(--muted); font-size: 13px; }

.toast { position: fixed; z-index: 92; left: 50%; bottom: calc(28px + env(safe-area-inset-bottom)); padding: 13px 22px; border-radius: 999px; background: var(--ink); color: var(--bg); font-size: 14px; letter-spacing: .04em; translate: -50% 0; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .45); }
.toast[hidden] { display: none; }


/* ---------- v3.6: страница продукта с текстом слева и витриной справа ---------- */
.prod--swap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.prod--swap .prod__media { order: 2; }

/* ---------- хозяйкам: с чего начать ---------- */
.choose { padding: 0 0 var(--sec); }
.choose .h2 { margin-bottom: clamp(26px, 3vw, 40px); }
.choose__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.choose__item { display: grid; grid-template-rows: auto auto 1fr auto; gap: 8px; padding: 26px 28px 24px 0; text-decoration: none; transition: background-color .5s var(--ease-out); }
.choose__item + .choose__item { padding-left: 28px; border-left: 1px solid var(--line); }
.choose__item small { color: var(--accent-ink); font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.choose__item b { font-family: var(--f-display); font-size: clamp(25px, 2.1vw, 31px); font-weight: 400; line-height: 1.15; }
.choose__item span { color: var(--muted); font-size: 15.5px; }
.choose__item em { display: inline-flex; align-items: center; gap: 10px; margin-top: 10px; font-family: var(--f-display); font-style: normal; font-size: 22px; }
.choose__item em .i { font-size: 18px; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .choose__item:hover em .i { transform: translateX(6px); } }
.panel__note { margin: -14px 0 22px; color: var(--accent-ink); font-family: var(--f-display); font-style: italic; font-size: 20px; }

/* ---------- буклет: как адаптировать ---------- */
.adapt { padding: var(--sec) 0; }
.adapt__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: start; }
.adapt__steps { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.adapt__steps li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.adapt__steps small { grid-row: span 2; padding-top: 6px; color: var(--accent-ink); font-family: var(--f-display); font-style: italic; font-size: 19px; }
.adapt__steps b { font-family: var(--f-display); font-size: clamp(23px, 1.9vw, 28px); font-weight: 400; line-height: 1.15; }
.adapt__steps span { color: var(--muted); }

/* ---------- повтор покупки или записи перед другими материалами ---------- */
.buy-again { padding: 0 0 var(--sec); }
.buy-again__card { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 40px; align-items: center; padding: clamp(26px, 3.4vw, 44px); border-radius: 30px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); transition: background-color .8s var(--ease-out); }
.buy-again__card .lead { max-width: 30ch; margin: 0; }
.buy-again__act { display: grid; justify-items: end; gap: 10px; }
.buy-again__act .note { margin: 0; }
.price--format { font-size: clamp(30px, 2.6vw, 40px); white-space: nowrap; }

/* ---------- консультация: опыт ---------- */
.forwho__lede { margin-top: -6px; }
.chatshot { margin: 34px 0 0; max-width: 460px; }
/* тень запечена в картинку (_tools/bake-shadow.py): картинка шире рамки на поля под тень, поля уходят в отрицательные отступы */
.chatshot img { display: block; width: calc(100% * 986 / 840); max-width: none; height: auto; margin: calc(-100% * 33 / 840) 0 calc(-100% * 113 / 840) calc(-100% * 73 / 840); }
.chatshot figcaption { position: relative; margin-top: 12px; color: var(--muted); font-size: 13.5px; }
.depth .creds { margin: 22px 0 0; }

/* ---------- лист ожидания: ловушка для ботов и ошибка отправки ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.waitlist__err { grid-column: 1 / -1; padding: 12px 18px; border-radius: 999px; background: color-mix(in srgb, #A3361D 12%, transparent); color: #8A2C17; font-size: 14px; }
.waitlist input:disabled { opacity: .55; }

/* ---------- гостям: место, сравнение, отзывы ---------- */
.window-hero__perk { display: flex; align-items: center; gap: 12px; margin-top: 26px; color: var(--muted); font-size: 15px; }
.window-hero__perk .i { flex: none; font-size: 22px; color: var(--accent-ink); }
.window-hero__perk b { color: var(--ink); font-weight: 500; }
.compare { padding: var(--sec) 0 0; }
.compare__table { margin-top: clamp(26px, 3vw, 40px); border-top: 1px solid var(--line); }
.compare__row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 0 30px; align-items: baseline; padding: 15px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.compare__label { color: var(--muted); font-size: 14.5px; }
.compare__row--head { padding: 18px 0 14px; }
.compare__row--head a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; font-family: var(--f-display); font-size: clamp(25px, 2.1vw, 31px); text-decoration: none; }
.compare__row--head a .i { font-size: 18px; color: var(--accent-ink); transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .compare__row--head a:hover .i { transform: translateY(4px); } }
.reviews { padding: var(--sec) 0; }
.reviews__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 30px; margin-bottom: 10px; }
.reviews__head .h2 { margin-bottom: 0; }
.reviews__tabs { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.reviews__tab { min-height: 44px; padding: 10px 20px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 12.5px/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: background-color .5s var(--ease-out), color .5s var(--ease-out); }
.reviews__tab[aria-selected="true"] { background: var(--ink); color: var(--bg); }
.reviews .revs { margin-top: 26px; }

/* ---------- брендам: аудитория и примеры ---------- */
.audience { padding: var(--sec) 0 0; }
.audience__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 110px); align-items: center; }
.audience .figures dt { font-size: clamp(64px, 7vw, 108px); }
.audience .figures dd { font-size: 16px; }
.audience .channels { margin-top: 26px; }
.examples { padding: 0 0 var(--sec); }
.examples__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px 60px; align-items: end; margin-bottom: clamp(30px, 4vw, 48px); }
.examples__head .h2 { margin-bottom: 0; }
.examples__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2vw, 26px); }
.example { display: grid; gap: 6px; text-decoration: none; }
.example__frame { display: block; aspect-ratio: 9 / 14; margin-bottom: 8px; overflow: hidden; border-radius: 999px 999px 10px 10px; background: var(--bg-2); box-shadow: var(--shadow-soft); }
.example__frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.example small { color: var(--accent-ink); font-size: 11.5px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; }
.example b { font-family: var(--f-display); font-size: clamp(20px, 1.6vw, 24px); font-weight: 400; line-height: 1.2; }
@media (hover: hover) and (pointer: fine) { .example:hover .example__frame img { transform: scale(1.05); } }

/* ---------- v3.8: второй круг правок ---------- */
/* назад к полке: вместо хлебных крошек на страницах продуктов, верхнее меню и так всегда под рукой */
.back { display: flex; width: fit-content; align-items: center; gap: 10px; margin: -12px 0 14px; padding: 12px 0; color: var(--muted); font-size: 11.5px; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; text-decoration: none; transition: color .4s var(--ease-out); }
.back .i { font-size: 17px; transition: transform .6s var(--ease); }
@media (hover: hover) and (pointer: fine) { .back:hover { color: var(--ink); } .back:hover .i { transform: translateX(-4px); } }

/* консультация, «С чем могу помочь»: заголовок карточки, строка о ситуации, под чертой список */
.who ul { margin-top: 12px; padding-top: 20px; border-top: 1px solid var(--line); }

/* консультация, «Формат»: схема вдвое ниже, три точки на одном уровне, подписи у самых точек и крупнее;
   письменный план лежит на листе бумаги, под шагами цена и запись */
.stop--result { position: relative; z-index: 0; }
.stop--result::after { content: ""; position: absolute; z-index: -1; border-radius: 22px 22px 8px 8px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-soft); transition: background-color .8s var(--ease-out); }
.stop--result b { color: var(--accent-ink); }
.how__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 28px; margin-top: clamp(40px, 6svh, 64px); }
.how__cta .note { flex-basis: 100%; margin: 0; text-align: center; }
@media (min-width: 961px) {
  /* схема и запись одной группой посередине свободного места: сверху и снизу поровну */
  .journey--plain .journey__pin { grid-template-rows: auto auto 1fr auto auto 1fr; }
  .journey--plain .chart { grid-row: 4; }
  .journey--plain .how__cta { grid-row: 5; }
  .journey--plain .chart__plot { aspect-ratio: 1200 / 150; }
  .journey--plain .stop { padding-top: 18px; }
  .journey--plain .stop small { font-size: 11.5px; letter-spacing: .26em; }
  .journey--plain .stop b { font-size: clamp(25px, 2.1vw, 31px); }
  .journey--plain .stop span { max-width: 32ch; font-size: 16px; line-height: 1.5; }
  .stop--result::after { inset: 4px 7% -24px; }
}

/* гостям: место в заголовке, скидка короткой строкой у кнопок */
.window-hero .h1 { font-size: clamp(38px, 4.4vw, 68px); }
/* две кнопки столбиком одной ширины: так ровнее, чем две разной длины в перенос */
.window-hero .ctas { display: grid; width: fit-content; gap: 12px; }
.window-hero .ctas .btn { justify-content: space-between; letter-spacing: .09em; }
.window-hero .ctas .btn--line { justify-content: center; }
.window-hero__promo { margin-top: 20px; color: var(--accent-ink); font-size: 15px; text-wrap: balance; }
.window-hero__promo b { font-weight: 600; letter-spacing: .08em; }
.window-hero__promo + .window-hero__perk { margin-top: 12px; }

/* брендам: у форматов только заголовок */
.formats__head { display: block; }
.formats__head .h2 { margin-bottom: 0; }

/* ---------- v3.9: согласованные пункты второго круга ---------- */
/* соседние блоки одного цвета: отступ один, а не два подряд */
.forwho + .depth, .reviews + .house, .adapt + .faq { padding-top: 0; }

/* шапка: под «Хозяйкам» три продукта. Наведение только там, где есть мышь: на iPad первое касание не застревает на подсказке */
.nav__item { position: relative; display: flex; }
.nav__drop { position: absolute; z-index: 2; top: calc(100% + 14px); left: 50%; display: grid; gap: 2px; min-width: 236px; padding: 8px; border-radius: 22px; background: color-mix(in srgb, var(--paper) 97%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 26px 50px -28px rgba(30, 29, 27, .5); white-space: nowrap; opacity: 0; visibility: hidden; translate: -50% -6px; transition: opacity .35s var(--ease-out), translate .5s var(--ease), visibility 0s linear .35s, background-color .8s var(--ease-out); }
/* мостик от пункта к панели: по дороге вниз курсор не теряет наведение */
.nav__drop::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.nav__links .nav__drop a { display: block; padding: 13px 18px 12px; border-radius: 15px; }
.nav__links .nav__drop a[aria-current="page"] { color: var(--accent-ink); }
.nav__links .nav__drop a[aria-current="page"]::after { display: none; }
.nav__item:has(:focus-visible) .nav__drop { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .35s var(--ease-out), translate .5s var(--ease), visibility 0s; }
@media (hover: hover) and (pointer: fine) {
  .nav__item:hover .nav__drop { opacity: 1; visibility: visible; translate: -50% 0; transition: opacity .35s var(--ease-out) .12s, translate .5s var(--ease) .12s, visibility 0s linear .12s; }
}
/* меню на телефоне: продукты подпунктами под «Хозяйкам» */
.menu a.menu__sub { padding: 4px 12px; font-size: clamp(21px, 5.8vw, 27px); line-height: 1.15; text-transform: none; letter-spacing: .02em; }

/* хозяйкам: тот же слоган в две строки, вторая курсивом в цвет акцента */
.phead .phead__title { font-size: clamp(30px, 3.05vw, 46px); }
.phead__line { display: block; }
.phead__line--accent { margin-top: .08em; font-style: italic; font-size: 1.12em; text-transform: none; letter-spacing: .01em; color: var(--accent-ink); }
/* полка: зачем эта книга, акцентным шрифтом над названием */
.panel__need { font-family: var(--f-display); font-style: italic; font-size: 20px; line-height: 1.25; color: var(--accent-ink); }

/* буклет: кнопка под отзывами */
.guests__cta { margin-top: clamp(34px, 4vw, 52px); }
/* буклет на телефоне: цена и кнопка под рукой, когда первый экран уже прокручен */
.buybar { display: none; }


/* отзывы гостей: длинный сворачиваем до восьми строк, лента не вытягивается по самому длинному */
.rev blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.rev.is-open blockquote p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.rev__more { justify-self: start; margin: -8px 0 0; padding: 6px 0; border: 0; background: none; color: var(--accent-ink); font: 500 11.5px/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; cursor: pointer; }
.rev__more[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) { .rev__more:hover { color: var(--ink); } }

/* ---------- v3.11: правки по мобильной версии ---------- */
/* меню на телефоне: продукты группой под «Хозяйкам», текущая страница цветом акцента */
.menu__group { display: grid; margin: -6px 0 10px; }
.menu a[aria-current="page"] { color: var(--accent-ink); }
/* герой одного цвета со следующим блоком: отступ между ними меньше двух полных */
.phead + .shelf, .phead + .audience { padding-top: calc(var(--sec) * .55); }
/* консультация: цена под шагами чуть меньше, чем в первом экране */
.how__cta .price { font-size: clamp(40px, 3.4vw, 54px); }
/* консультация: на компьютере обе аудитории видны сразу, переключатель и кнопки в карточках только на телефоне */
.forwho__switch, .who__cta { display: none; }

/* ---------- планшет и телефон ---------- */
@media (max-width: 1100px) {
  .doors__grid { gap: 22px; }
  .portal__text { font-size: 14.5px; }
  .house__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .house__grid div:nth-child(4) { border-left: 0; padding-left: 0; }
  .revs__track { grid-auto-columns: calc((100% - 22px) / 2); }
}
@media (max-width: 960px) {
  :root { --sec: clamp(72px, 14vw, 110px); }
  .nav { gap: 6px; }
  .nav__links { display: none; }
  .nav__burger { display: block; }
  .h2 { letter-spacing: .08em; }
  .chrome { margin-bottom: 38px; letter-spacing: .26em; font-size: 10.5px; }

  .hero { grid-template-columns: 1fr; justify-items: center; gap: 18px; min-height: 0; padding-top: 92px; padding-bottom: 36px; text-align: center; }
  .hero__copy { display: contents; }
  .hero__eyebrow { order: 0; margin: 0; }
  .hero__title { order: 1; margin: 0; font-size: clamp(32px, 9.4vw, 64px); }
  .hero__line:last-child { padding-left: 0; }
  .hero__media { order: 2; width: min(64vw, calc(44svh * .7), 340px); margin: 14px 0 6px; }
  .hero__host { order: 3; justify-content: center; max-width: 36ch; margin: 6px 0 0; text-align: left; }
  .hero__avatar { width: 46px; height: 46px; }
  .hero__sub { font-size: 15px; }
  .hero .ctas { order: 4; flex-wrap: nowrap; justify-content: center; gap: 8px; }
  .hero .ctas .btn { min-height: 50px; padding-left: 18px; font-size: 12px; letter-spacing: .07em; }
  .hero .ctas .btn--line { padding: 0 18px; }
  .seal { left: -42px; bottom: 22px; width: 98px; }
  .seal text { font-size: 15px; }
  .seal__mono { font-size: 22px; }
    .entrance__word { top: calc(var(--ey) - 64px); font-size: 19px; letter-spacing: .34em; }

  .doors__grid { grid-template-columns: 1fr; gap: 64px; max-width: 420px; margin: 0 auto; }
  .about__grid, .guestbook, .phead, .shelf__grid, .table__grid, .window-hero__grid, .apt__head, .prod, .inside__grid { grid-template-columns: 1fr; }
  .about__media { width: min(380px, 86%); }
  .phead { min-height: 0; padding-top: 100px; gap: 40px; }
  .phead__media { order: -1; width: min(64vw, 330px); }
  .phead__copy { text-align: center; }
  .phead__copy .body { margin-left: auto; margin-right: auto; }
  .phead .ctas, .crumbs { justify-content: center; }
  .phead .h1 { font-size: clamp(30px, 8.4vw, 52px); letter-spacing: .05em; }
  .phead__copy .back { margin-left: auto; margin-right: auto; }

  .journey__pin { min-height: 0; padding-top: 90px; padding-bottom: 90px; }
  .journey__head { grid-template-columns: 1fr; }
  .journey__head .body { justify-self: start; }
  .chart { margin-top: 40px; }
  .chart__plot { display: none; }
  .stops { grid-auto-flow: row; grid-template-columns: 1fr; gap: 30px; padding-left: 56px; }
  .stops__line { display: block; position: absolute; left: 22px; top: 0; bottom: 0; width: 1.5px; background: var(--accent); transform-origin: 50% 0; }
  .stop { position: relative; padding: 0; text-align: left; }
  .stop::before { content: ""; position: absolute; left: -40px; top: 3px; width: 13px; height: 13px; border-radius: 50%; background: var(--journey-bg); box-shadow: inset 0 0 0 1.5px var(--accent), 0 0 0 6px var(--journey-bg); transition: background-color .5s var(--ease-out); }
  .stop.is-on::before { background: var(--accent); }
  .stop span { margin: 0; }
  .stop--result::after { inset: -16px -14px -18px -18px; }
  .phead { padding-bottom: 40px; }
  .portal__text { max-width: 36ch; }
  .forwho__switch { display: flex; width: fit-content; gap: 4px; margin: 22px auto 0; padding: 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
  .forwho__tab { min-height: 44px; padding: 10px 18px; border: 0; border-radius: 999px; background: none; color: var(--muted); font: 500 12px/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: background-color .4s var(--ease-out), color .4s var(--ease-out); }
  .forwho__tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
  .who:not(.is-current) { display: none; }
  .who__cta { display: flex; justify-content: space-between; width: 100%; margin-top: 16px; padding-left: 20px; letter-spacing: .08em; }
  .forwho__cta { display: none; }
  .phead .phead__title { font-size: clamp(26px, 7.4vw, 44px); }
  .buybar { position: fixed; z-index: 38; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 7px 7px 7px 22px; border-radius: 999px; background: color-mix(in srgb, var(--bg) 92%, transparent); box-shadow: inset 0 0 0 1px var(--line), 0 18px 40px -22px rgba(30, 29, 27, .55); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); transform: translateY(calc(100% + 30px)); visibility: hidden; transition: transform .6s var(--ease), visibility 0s linear .6s; }
  .buybar.is-shown { transform: none; visibility: visible; transition: transform .6s var(--ease), visibility 0s; }
  .buybar__price { font-family: var(--f-display); font-size: 27px; line-height: 1; white-space: nowrap; }
  .buybar .btn { min-height: 46px; padding-left: 20px; font-size: 12px; letter-spacing: .08em; }
  .buybar .btn__icon { width: 34px; height: 34px; font-size: 16px; }
  .how__cta { justify-content: flex-start; margin-top: 48px; }
  .how__cta .note { text-align: left; }
  .chart__cup { left: -6px; top: -26px; width: 58px; }

  /* полка: текст, сцена во всю ширину, переключатель, описание выбранной книги */
  .shelf__grid { display: flex; flex-direction: column; }
  .still { width: calc(100% + var(--pad) * 2); margin: 26px calc(var(--pad) * -1) 0; }
  .scene { border-radius: 0; }
  .still__index { justify-content: space-between; gap: 12px; padding: 8px var(--pad) 0; }
  .still__pick { font-size: 11px; letter-spacing: .1em; }
  .cover__title { font-size: 3.2cqw; }
  .cover__by { font-size: max(6px, 1.3cqw); }
  .cover__mono { font-size: 1.9cqw; }
  .scene__hint { font-size: 10.5px; gap: 0; }
  .scene__hint span { font-size: 19px; }
  .shelf .panels { align-self: stretch; min-width: 0; margin-top: 24px; }
  .shelf .buy { flex-wrap: wrap; }

  .prod { min-height: 0; padding-top: 96px; gap: 40px; }
  .prod__media { order: -1; }
  .prod--info-first .prod__media { order: 2; }
  .viewer__mat { padding: 26px 18px; border-radius: 24px; }
  .book__stage { width: min(78vw, 420px); }
  .chapters { columns: 1; }
  .rule { grid-template-columns: 56px minmax(0, 1fr); padding: 22px 0; }
  .rule__num { font-size: 40px; }
  .shots { min-height: 320px; }
  .topics, .kit__list { grid-template-columns: 1fr; }
  .forwho__grid, .depth__grid { grid-template-columns: 1fr; }
  .who { padding: 28px 22px 30px; }
  .more__grid { grid-template-columns: 1fr; }

  /* консультация: отзыв ложится на нижний край фото */
  .consult-visual { width: min(330px, 86%); margin-bottom: 60px; }
  .consult-visual__review { left: -8%; bottom: -12%; width: 66%; }

  .kit__media { margin-top: 30px; }
  .discount { right: -6px; top: -46px; width: 112px; }
  .discount b { font-size: 33px; }
  .discount text { font-size: 9.6px; }

  .window-hero { padding-top: 96px; }
  .window-hero__copy { text-align: center; }
  .window-hero__copy .body { margin-left: auto; margin-right: auto; }
  .window-hero__copy .ctas { margin: 0 auto; }
  .window-hero__perk { justify-content: center; }
  .window { order: -1; aspect-ratio: 1 / 1.05; }
  .facts-strip { grid-template-columns: 1fr 1fr; }
  .facts-strip div:nth-child(3) { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); }
  .facts-strip div:nth-child(4) { border-top: 1px solid var(--line); }
  .apt__card { grid-template-columns: 1fr; }
  .gallery { display: flex; gap: 14px; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .gallery::-webkit-scrollbar { display: none; }
  .gallery figure { flex: 0 0 72%; scroll-snap-align: center; }
  .revs__head { align-items: start; }
  .revs__track { grid-auto-columns: 84%; gap: 14px; margin: 0 calc(var(--pad) * -1); padding: 6px var(--pad) 30px; scroll-padding: 0 var(--pad); }
  .house__grid { grid-template-columns: 1fr 1fr; }
  .house__grid div:nth-child(odd) { border-left: 0; padding-left: 0; }
  .house__grid div:nth-child(even) { border-left: 1px solid var(--line); padding-left: 18px; }
  .table__grid { padding: 22px 20px; text-align: center; }
  .tabletop { width: min(100%, 300px); justify-self: center; }
  .formats__head { grid-template-columns: 1fr; }
  .formats__head .body { justify-self: start; }
  .homes { grid-template-columns: 1fr; }
  .homes { gap: 56px; }
  .prod--swap { grid-template-columns: 1fr; }
  .choose__grid { grid-template-columns: 1fr; }
  .choose__item, .choose__item + .choose__item { padding: 22px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .adapt__grid, .audience__grid, .examples__head { grid-template-columns: 1fr; }
  .adapt__steps li { grid-template-columns: 1fr; }
  .adapt__steps small { grid-row: auto; padding: 0; }
  .buy-again__card { grid-template-columns: 1fr; text-align: left; }
  .buy-again__act { justify-items: start; }
  .apt__specs { grid-template-columns: 1fr; }
  .compare__row { grid-template-columns: 1fr 1fr; gap: 6px 18px; padding: 14px 0; }
  .compare__label { grid-column: 1 / -1; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--accent-ink); }
  .compare__row--head > span:first-child { display: none; }
  .compare__row--head a { font-size: 22px; }
  .reviews__head { align-items: start; }
  .examples__grid { display: flex; gap: 14px; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
  .examples__grid::-webkit-scrollbar { display: none; }
  .example { flex: 0 0 58%; scroll-snap-align: start; }
  .chatshot { max-width: none; }
}
@media (max-width: 600px) {
  body { font-size: 16px; }
  .hide-sm { display: none; }
  .waitlist { grid-template-columns: 1fr; }
  .keycard { width: min(300px, 100%); }
  .keycard__code { font-size: 34px; }
  .tray { width: min(100%, 380px); padding: 30px 20px; }
  .figures dt { font-size: 40px; }
  .about .figures { display: grid; grid-template-columns: 1fr; }
  .about .figures > div { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 10fr); gap: 18px; align-items: baseline; padding: 16px 0; border-left: 0; border-top: 1px solid var(--line); }
  .about .figures > div:first-child { padding-top: 0; border-top: 0; }
  .about .figures dd { margin: 0; }
  .card { width: 150px; }
  .buy .btn, .letter .ctas .btn, .book-cta .btn, .apt__cta .btn { width: 100%; justify-content: space-between; padding-left: 20px; letter-spacing: .08em; }
  .envelope { aspect-ratio: 1 / 1.1; }
  .letter { padding: 30px 22px 26px; }
  .letter .h2 { font-size: 27px; }
  .letter .body { margin-bottom: 18px; font-size: 15px; }
  .letter__sign { margin-top: 10px; font-size: 26px; }
  .envelope__seal { width: 54px; height: 54px; margin: -27px 0 0 -27px; font-size: 17px; }
  .house__grid b { font-size: 30px; }
  .home__gets b { width: 80px; }
  .buy-again .btn { width: 100%; justify-content: space-between; padding-left: 20px; letter-spacing: .06em; }
  .how__cta .btn { width: 100%; justify-content: space-between; padding-left: 20px; letter-spacing: .08em; }
  .guests__cta .btn { width: 100%; justify-content: space-between; padding-left: 20px; letter-spacing: .06em; }
  /* главная и «Гостям»: длинные подписи кнопок встают столбиком во всю ширину */
  .hero .ctas { flex-direction: column; align-items: stretch; width: min(100%, 340px); gap: 10px; }
  .hero .ctas .btn--solid, .window-hero .ctas .btn--solid { position: relative; justify-content: center; padding-left: 52px; padding-right: 52px; }
  .hero .ctas .btn--solid .btn__icon, .window-hero .ctas .btn--solid .btn__icon { position: absolute; right: 6px; top: 50%; translate: 0 -50%; }
  .hero .ctas .btn--line, .window-hero .ctas .btn--line { justify-content: center; }
  .window-hero .h1 { font-size: clamp(30px, 10.4vw, 42px); }
  .window-hero .ctas { flex-direction: column; align-items: stretch; width: min(100%, 360px); margin: 0 auto; gap: 10px; }
  .window-hero .ctas .btn { font-size: 12.5px; letter-spacing: .06em; }
}
/* узкие телефоны: Android 360 px, iPhone mini с крупным масштабом 320 px. Длинное слово заголовка не распирает колонку */
@media (max-width: 374px) {
  .prod__info .h1 { font-size: min(36px, 9.4vw); }
}
@media (max-width: 359px) {
  .hero .ctas { flex-wrap: wrap; }
  .buy-again__card { padding: 24px 18px; }
  .buy-again .btn { white-space: normal; text-align: left; }
  .book-cta .btn { white-space: normal; text-align: left; }
  .window-hero .ctas .btn, .hero .ctas .btn { white-space: normal; text-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
  .strip { overflow-x: auto; }
  .js .stop, .js .stop.is-on { opacity: 1; }
}