/* v4 «Малахит» — см. DESIGN.md.
   Два главных цвета: малахит и слоновая кость. Один акцент: золото — живёт только на малахите.
   Секции чередуются: .is-dark (малахит) / светлые (кость). Компоненты берут цвета из --bg/--fg/--mute/--line/--accent.
   Контраст WCAG AA проверен: кость/малахит 10.5:1, золото/малахит 5.4:1, приглушённый на малахите 6.3:1, на кости 5.5:1. */
:root {
  --malachite: #163a31;
  --bone: #f2ebdf;
  --gold: #c9a46a;

  --head: "Cormorant Garamond", "Times New Roman", serif;
  --text: "Golos Text", system-ui, sans-serif;

  /* кегли: малая терция (×1.2) от базовых 17 px */
  --fs-xs: 13px;
  --fs-sm: 15px;
  --fs-base: 17px;
  --fs-md: 20px;
  --fs-lg: 24px;
  --fs-h4: clamp(24px, 2.2vw, 29px);
  --fs-h3: clamp(29px, 2.8vw, 42px);
  --fs-h3x: clamp(35px, 3.8vw, 51px);
  --fs-num: clamp(42px, 4vw, 61px);
  --fs-h2: clamp(42px, 5vw, 73px);
  --fs-h1: clamp(61px, 9vw, 127px);
  --fs-intro: clamp(24px, 2.8vw, 35px);
  /* отступы */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px;
  --measure: 62ch;
  --pad: clamp(18px, 5vw, 88px);
  --max: 1320px;
  --sec: clamp(88px, 14vh, 168px);
  --ease: cubic-bezier(.3, .7, .2, 1);

  /* фактура: едва заметный шум, как его декоративная штукатурка */
  --tex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='520' height='520'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.008 .014' numOctaves='4' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .2 0 0 0 0 .16 0 0 0 .08 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* темы секций */
body, .is-light {
  --bg: var(--bone); --fg: var(--malachite); --mute: #4f6259; --line: rgba(22, 58, 49, .18);
  --accent: var(--malachite); --on-accent: var(--bone);
}
.is-dark {
  --bg: var(--malachite); --fg: var(--bone); --mute: #a9bcb1; --line: rgba(242, 235, 223, .18);
  --accent: var(--gold); --on-accent: var(--malachite);
}
.is-dark, .is-light { background: var(--bg) var(--tex); color: var(--fg); }
/* Малахитовые секции — декоративная штукатурка под шпатель (tools/textures.py) */
.is-dark { background: var(--malachite) url("tex/plaster-malachite.webp") center / cover; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
body { margin: 0; background: var(--bone) var(--tex); color: var(--malachite); font: 400 var(--fs-base)/1.65 var(--text); font-kerning: normal; hanging-punctuation: first; -webkit-font-smoothing: antialiased; }
img { display: block; max-width: 100%; }
a { color: inherit; text-underline-offset: .25em; text-decoration-thickness: 1px; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--fg); outline-offset: 4px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 12px 18px; background: var(--malachite); color: var(--bone); text-decoration: none; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

h1, h2, h3 { font-family: var(--head); font-weight: 300; margin: 0; letter-spacing: -.005em; }
h1 { font-size: var(--fs-h1); line-height: .95; max-width: 10ch; }
h2 { font-size: var(--fs-h2); line-height: 1.04; max-width: 16ch; text-wrap: balance; }
h3 { font-weight: 400; text-wrap: balance; }
p { text-wrap: pretty; }
.note { color: var(--mute); margin: var(--s3) 0 0; max-width: 48ch; }

/* ---------- кнопки: без коробки — надпись антиквой и линия акцентом под ней, как в журнале ---------- */
.btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 6px 0 10px;
  background: none; border: 0; border-radius: 0; color: var(--fg);
  font: 400 26px/1.2 var(--head); letter-spacing: .005em; text-decoration: none; text-align: center; cursor: pointer;
}
.btn::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent);
  transition: transform .7s var(--ease);
}
.btn:hover::after { transform: scaleX(.3); }
.btn-block { justify-self: center; }
.link-quiet { text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 4px; font-size: 15px; }
.link-quiet:hover { border-bottom-width: 2px; }

.draft { margin: 0; padding: 7px var(--pad); background: #0f2a23; color: #a9bcb1; font-size: 14px; }

/* ---------- шапка: лежит поверх обложки (absolute без top — остаётся под плашкой черновика) ---------- */
/* монограмма с названием слева, меню справа (телефон — в контактах) */
.top {
  position: absolute; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: clamp(28px, 3vw, 44px);
  padding: 22px var(--pad);
  color: var(--bone); --fg: var(--bone);
}
.top .logo { order: -1; margin-right: auto; }
/* монограмма: М — золотом, Б — костью, вырез вокруг Б цвета малахита */
.mb { --mb-m: var(--gold); --mb-b: var(--bone); --mb-cut: var(--malachite); display: block; aspect-ratio: 2123 / 1063; height: 52px; width: auto; flex: none; }
.logo { margin-right: auto; text-decoration: none; display: flex; align-items: center; gap: 14px; }
.logo span { font: 400 var(--fs-md)/1 var(--head); letter-spacing: .01em; }
.nav { display: flex; gap: clamp(28px, 3vw, 44px); }
.nav a { text-decoration: none; font: 400 var(--fs-md)/1 var(--head); letter-spacing: .02em; display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover { color: var(--gold); }

/* ---------- обложка: два вертикальных фото встык, как журнальный разворот; заголовок поверх ---------- */
.cover { position: relative; min-height: max(100svh, 640px); display: flex; align-items: flex-end; overflow: hidden; }
.cover-photos { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; background: var(--malachite); }
.cover-ph { margin: 0; min-height: 0; }
.cover-ph picture { display: block; height: 100%; }
.cover-ph img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.04); transition: opacity 1.6s ease, transform 3s var(--ease); }
.cover-ph.ready img { opacity: 1; transform: none; }
.cover-ph:nth-child(2) img { transition-delay: .25s; }
/* затемнение малахитом: сверху — под шапку, снизу — под заголовок */
.cover::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(14, 40, 33, .92) 0%, rgba(14, 40, 33, .55) 32%, rgba(14, 40, 33, .05) 62%, rgba(14, 40, 33, .55) 100%);
}
/* заголовок — по оси разворота, на стыке двух фото */
.cover-text { position: relative; z-index: 1; width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad) clamp(var(--s5), 9vh, 96px); display: flex; flex-direction: column; align-items: center; gap: var(--s4); text-align: center; }
.cover h1 { font-size: var(--fs-h1); line-height: .92; max-width: 14ch; text-wrap: balance; }
.cover p { margin: 0; max-width: 40ch; color: #dfe7e2; font-size: var(--fs-base); line-height: 1.6; }

/* ---------- лид: вступление крупной антиквой и подпись мастера ---------- */
/* как письмо: текст по центру, подпись с монограммой под ним */
.intro { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad); display: flex; flex-direction: column; align-items: center; gap: var(--s5); text-align: center; }
.intro-text { margin: 0; max-width: 36ch; font: 300 var(--fs-intro)/1.45 var(--head); text-wrap: balance; }
.intro-sign { margin: 0; display: flex; flex-direction: column; align-items: center; gap: var(--s1); color: var(--mute); font-size: var(--fs-sm); line-height: 1.45; }
.intro-sign .mb { --mb-m: #b8935a; --mb-b: var(--malachite); --mb-cut: var(--bone); height: 64px; }

/* ---------- развороты: фото на полэкрана + рассказ, стороны чередуются ---------- */
.story { display: grid; grid-template-columns: 1fr 1fr; min-height: min(92vh, 900px); }
.story.flip .story-photo { order: 2; }
.story-photo { margin: 0; min-height: 0; position: relative; }
.story-photo picture { display: block; height: 100%; }
.story-photo img { width: 100%; height: 100%; object-fit: cover; }
.story-text { align-self: center; padding: clamp(48px, 8vh, 96px) clamp(28px, 6vw, 112px); max-width: 640px; }
.story.flip .story-text { justify-self: end; }
.story h3 { font-size: var(--fs-h3x); font-weight: 300; line-height: 1.05; }
/* рассказ — антиквой, как в журнале; у Cormorant низкое очко, поэтому кегль крупнее и начертание 500 */
.story p { margin: var(--s3) 0 0; color: var(--fg); font: 500 clamp(21px, 1.7vw, 24px)/1.55 var(--head); max-width: 38ch; }
.story-tags { list-style: none; margin: var(--s4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.story-tags li { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }


/* ---------- ещё работы ---------- */
.more { padding: var(--sec) 0 0; }
.more-head { max-width: var(--max); margin: 0 auto var(--s6); padding: 0 var(--pad); }

/* ---------- симметрия: заголовки секций по оси, колонки равные ---------- */
.more-head, .services > h2, .steps > h2, .faq > h2, .price-text > h2, .price-text > .note, .lead-text { text-align: center; }
.more-head h2, .services > h2, .steps > h2, .faq > h2, .price-text > h2 { margin-inline: auto; }
.more-head .note, .price-text > .note { margin: var(--s3) auto 0; max-width: 52ch; }
.services-list > div, .steps-list li, .promise-list > div { text-align: center; }
.services-list p, .steps-list p, .promise-list p { margin-inline: auto; }

/* ---------- стоимость (кость) ---------- */
.price {
  max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(48px, 8vw, 128px);
}
/* заголовок и подпись — на всю ширину по центру, ниже тарифы и калькулятор равными колонками */
.price-text { display: contents; }
.price-text > h2, .price-text > .note { grid-column: 1 / -1; }
.tariffs { border: 0; padding: 0; margin: var(--s6) 0 0; }
.tariffs label {
  display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 6px 20px; align-items: baseline;
  padding: var(--s3) 0; border-top: 1px solid var(--line); cursor: pointer;
}
.tariffs label:last-of-type { border-bottom: 1px solid var(--line); }
.tariffs input { appearance: none; width: 11px; height: 11px; margin: 0; border: 1px solid var(--fg); border-radius: 50%; translate: 0 -2px; transition: background .3s; }
.tariffs input:checked { background: var(--fg); }
.tariffs b { font: 400 var(--fs-h4)/1.15 var(--head); }
.tariffs .t-price { font-size: var(--fs-sm); white-space: nowrap; font-variant-numeric: tabular-nums; }
.tariffs .t-note { grid-column: 2 / -1; color: var(--mute); font-size: var(--fs-sm); }
.tariffs label:hover b { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }

.calc { align-self: start; margin-top: var(--s6); padding-top: var(--s3); }
.calc-area { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.calc-area label { color: var(--mute); font-size: var(--fs-sm); }
.calc-area output { font: 300 var(--fs-h3)/1 var(--head); }
.range { -webkit-appearance: none; appearance: none; width: 100%; height: 32px; margin: 14px 0 22px; background: transparent; cursor: pointer; --p: 20%; }
.range::-webkit-slider-runnable-track { height: 1px; background: linear-gradient(90deg, var(--fg) var(--p), var(--line) var(--p)); }
.range::-moz-range-track { height: 1px; background: var(--line); }
.range::-moz-range-progress { height: 1px; background: var(--fg); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 15px; height: 15px; margin-top: -7px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg); }
.range::-moz-range-thumb { width: 13px; height: 13px; border-radius: 50%; background: var(--bg); border: 1px solid var(--fg); }

.housing { border: 0; padding: 0; margin: 0; display: flex; gap: 28px; }
.housing legend { padding: 0; margin-bottom: 10px; }
.housing label { position: relative; cursor: pointer; }
.housing input { position: absolute; opacity: 0; }
.housing span { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--mute); border-bottom: 1px solid transparent; transition: color .3s, border-color .3s; }
.housing input:checked + span { color: var(--fg); border-bottom-color: var(--fg); }
.housing input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 4px; }

.calc-sum { margin: var(--s5) 0 0; font: 300 var(--fs-num)/1 var(--head); white-space: nowrap; font-variant-numeric: lining-nums tabular-nums; }
.calc-sum b { font-weight: 300; }
.calc-meta { margin: var(--s1) 0 0; color: var(--mute); font-size: var(--fs-sm); }
.calc-in { margin: var(--s3) 0 var(--s4); padding-top: var(--s2); border-top: 1px solid var(--line); font-size: var(--fs-sm); line-height: 1.6; }
.calc-alt { margin: var(--s2) 0 0; font-size: var(--fs-sm); color: var(--mute); }
.calc-alt a { color: var(--fg); }

/* ---------- галерея «ещё работы» ---------- */
/* ровная сетка: одинаковые кадры 4:5, подписи по центру */
.gallery { max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(36px, 5vw, 64px) clamp(20px, 3vw, 48px); }
.gallery figure { margin: 0; text-align: center; }
.gallery picture { display: block; aspect-ratio: 4 / 5; }
.gallery button { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; overflow: hidden; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery button:hover img { transform: scale(1.025); }
.gallery figcaption { margin: var(--s3) auto 0; max-width: 28ch; font: 400 var(--fs-md)/1.35 var(--head); color: var(--fg); text-wrap: balance; }
.gallery figcaption::before { content: ""; display: block; width: 28px; height: 1px; background: var(--accent); margin: 0 auto 12px; }

.viewer { border: 0; padding: 0; max-width: min(92vw, 900px); max-height: 92vh; background: var(--malachite); color: var(--bone); }
.viewer::backdrop { background: rgba(10, 30, 25, .92); }
.viewer img { max-height: calc(92vh - 64px); width: auto; margin: 0 auto; }
.viewer p { margin: 0; padding: var(--s2) var(--s3) var(--s3); font: 400 var(--fs-md)/1.3 var(--head); padding-right: 120px; }
.viewer-close { position: absolute; right: 14px; bottom: 12px; min-height: 40px; padding: 0 16px; background: none; border: 1px solid var(--gold); color: var(--bone); cursor: pointer; font-size: 13px; letter-spacing: .04em; }
.viewer[open] { animation: open .4s var(--ease); }
@keyframes open { from { opacity: 0; } }

/* ---------- что делаем (кость) ---------- */
.services { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad) 0; }
.services-list { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 80px); }
.services-list > div { padding-top: 24px; border-top: 1px solid var(--fg); }
.services-list h3 { margin: 0 0 var(--s2); font-size: var(--fs-h4); line-height: 1.15; }
.services-list p { margin: 0; color: var(--mute); max-width: 42ch; line-height: 1.7; }

/* ---------- этапы (кость) ---------- */
.steps { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad); }
.steps-list { list-style: none; margin: 64px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px clamp(32px, 5vw, 80px); counter-reset: s; }
.steps-list li { counter-increment: s; }
.steps-list li::before { content: counter(s, upper-roman); font: 400 var(--fs-md)/1 var(--head); color: var(--fg); }
.steps-list h3 { margin: var(--s2) 0 var(--s1); font-size: var(--fs-h4); line-height: 1.15; }
.steps-list p { margin: 0; color: var(--mute); max-width: 34ch; }

/* ---------- гарантии (малахит) ---------- */
.promise-list { max-width: var(--max); margin: 0 auto; padding: var(--sec) var(--pad); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px clamp(32px, 5vw, 80px); }
.promise-list > div { padding-top: 24px; border-top: 1px solid var(--accent); }
.promise-list h3 { margin: 0 0 var(--s2); font-size: var(--fs-h3); line-height: 1.08; }
.promise-list p { margin: 0; color: var(--mute); max-width: 34ch; }

/* ---------- вопросы (кость) ---------- */
.faq > h2 { max-width: 20ch; }
.faq { max-width: 960px; margin: 0 auto; padding: var(--sec) var(--pad); display: grid; gap: var(--s6); }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: var(--s3) var(--s5) var(--s3) 0; position: relative; font: 400 var(--fs-lg)/1.3 var(--head); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 13px; height: 1px; background: var(--fg); transition: transform .4s var(--ease); }
.faq summary::before { transform: rotate(90deg); }
.faq details[open] summary::before { transform: rotate(0); }
.faq .ans { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .4s var(--ease); }
.faq details[open] .ans { grid-template-rows: 1fr; }
.faq .ans p { overflow: hidden; margin: 0; color: var(--mute); max-width: var(--measure); line-height: 1.7; }
.faq details[open] .ans p { padding-bottom: var(--s3); }

/* ---------- контакты (малахит) ---------- */
/* по оси: заголовок, текст, телефон, кнопка, мессенджеры */
.lead { display: flex; flex-direction: column; align-items: center; gap: var(--s5); padding: var(--sec) var(--pad); }
.lead-text h2 { margin-inline: auto; }
.lead-text p { max-width: 46ch; color: var(--mute); margin: var(--s3) auto 0; line-height: 1.7; }
.contacts { display: grid; gap: var(--s3); justify-items: center; width: min(100%, 400px); }
.contacts-phone { font: 300 var(--fs-num)/1 var(--head); text-decoration: none; white-space: nowrap; }
.contacts-phone:hover { color: var(--gold); }
.contacts-msg { display: flex; gap: 28px; }
.contacts-msg a { text-decoration: none; font-size: 15px; letter-spacing: .03em; border-bottom: 1px solid var(--accent); padding-bottom: 3px; }
.contacts-msg a:hover { color: var(--gold); }
.contacts-mail { color: var(--mute); font-size: 15px; }

/* ---------- подвал (малахит), по оси ---------- */
.foot { padding: 48px var(--pad) 40px; display: grid; justify-items: center; gap: 24px; text-align: center; font-size: 15px; color: var(--mute); border-top: 1px solid var(--line); }
.foot p { margin: 0; }
.foot a { color: var(--fg); }
.foot-legal { max-width: 90ch; font-size: var(--fs-xs); line-height: 1.6; }
.foot-brand { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.foot-brand .mb { height: 60px; }
.foot-brand [data-r] { font: 400 var(--fs-md)/1.3 var(--head); color: var(--fg); }

/* ---------- согласие на cookie: внизу, не закрывает контент, кнопки равнозначные ---------- */
.cookie {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 40; margin: 0 auto; max-width: 720px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; padding: 18px 22px;
  border: 1px solid var(--gold); box-shadow: 0 12px 32px -18px rgba(10, 30, 25, .6);
}
.cookie[hidden] { display: none; }
.cookie p { margin: 0; flex: 1 1 280px; font-size: 15px; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.cookie .btn { min-height: 44px; font-size: 21px; }
.cookie-actions { gap: 10px 28px; }
.linkbtn { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }

/* ---------- адаптив ---------- */
@media (max-width: 960px) {
  .nav { display: none; }
  .story { grid-template-columns: 1fr; min-height: 0; }
  .story-photo { height: 78vh; max-height: 720px; order: 0 !important; }
  .story.flip .story-text { justify-self: start; }
  .price { grid-template-columns: 1fr; }
  .steps-list, .promise-list, .services-list, .gallery { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .top { padding-block: 16px; }
  .logo .mb { height: 42px; }
  .logo span { font-size: 19px; }
  .cover-photos { grid-template-columns: 1fr; }
  .cover-ph:nth-child(2) { display: none; }
  .cover { min-height: 92svh; }
  .cover::after { background: linear-gradient(to top, rgba(14, 40, 33, .95) 0%, rgba(14, 40, 33, .78) 45%, rgba(14, 40, 33, .25) 72%, rgba(14, 40, 33, .6) 100%); }
  .story-photo { height: 66vh; }
  .steps-list, .promise-list, .services-list, .gallery { grid-template-columns: 1fr; }
  .viewer p { padding-right: 20px; padding-bottom: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; transition-duration: 1ms !important; }
  html { scroll-behavior: auto; }
}