/* ==========================================================================
   ipotcalco.ru — стили (макет v1, тема «архитектурный чертёж»)
   --------------------------------------------------------------------------
   Крафт и миллиметровка, терракота, чернильные линии, размерные выноски.
   Расчёт — «лист чертежа», результат — план квартиры, где площадь комнат
   равна долям денег (взнос, кредит, проценты), и штамп чертежа.

     1. Шрифты      5. Первый экран      9. Контентные блоки
     2. Токены      6. Формы            10. Сеть, спецификация, подвал
     3. База        7. Лист расчёта     11. Плашка, тост, печать
     4. Шапка       8. План и штамп     12. Адаптив
   ========================================================================== */

/* ---------- 1. Шрифты ---------- */
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/jost-cyrillic.woff2') format('woff2-variations'), url('../fonts/jost-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/jost-latin-ext.woff2') format('woff2-variations'), url('../fonts/jost-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Jost'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('../fonts/jost-latin.woff2') format('woff2-variations'), url('../fonts/jost-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/martian-mono-cyrillic.woff2') format('woff2-variations'), url('../fonts/martian-mono-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/martian-mono-latin-ext.woff2') format('woff2-variations'), url('../fonts/martian-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Martian Mono'; font-style: normal; font-weight: 100 800; font-display: swap;
  src: url('../fonts/martian-mono-latin.woff2') format('woff2-variations'), url('../fonts/martian-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- 2. Токены ---------- */
:root {
  color-scheme: light;
  --terra: #b5552e;           /* терракота — основной цвет домена */
  --terra-2: #9c4524;
  --terra-ink: #fff4e6;
  --terra-soft: color-mix(in srgb, #b5552e 12%, transparent);
  --olive: #6f7650;           /* график: погашенный долг */
  --clay: #d98a5f;            /* график: проценты */

  --bg: #efe5d3;
  --bg-alt: #e7dbc4;
  --surface: #fbf6ec;
  --surface-2: #f5eddd;
  --surface-3: #ece1cc;
  --line: #d8c9ad;
  --line-strong: #b9a684;
  --text: #2b211b;
  --text-2: #5d4f44;
  --text-3: #94836f;
  --grid: rgb(43 33 27 / .06);
  --grid-major: rgb(43 33 27 / .10);
  --accent-text: var(--terra);

  --font: 'Jost', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-mono: 'Martian Mono', ui-monospace, Consolas, monospace;

  --container: 1200px;
  --gutter: 16px;
  --header-h: 68px;
  --focus: 0 0 0 3px color-mix(in srgb, var(--terra) 40%, transparent);
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --terra: #d77a50; --terra-2: #e08c64; --terra-ink: #1b1410; --terra-soft: color-mix(in srgb, #d77a50 16%, transparent);
    --olive: #9aa275; --clay: #e3a07a;
    --bg: #17120f; --bg-alt: #1c1612; --surface: #201914; --surface-2: #261e18; --surface-3: #2f261f;
    --line: #3a2f27; --line-strong: #56473b; --text: #efe4d4; --text-2: #c2b3a1; --text-3: #8e7d6b;
    --grid: rgb(239 228 212 / .045); --grid-major: rgb(239 228 212 / .08);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --terra: #d77a50; --terra-2: #e08c64; --terra-ink: #1b1410; --terra-soft: color-mix(in srgb, #d77a50 16%, transparent);
  --olive: #9aa275; --clay: #e3a07a;
  --bg: #17120f; --bg-alt: #1c1612; --surface: #201914; --surface-2: #261e18; --surface-3: #2f261f;
  --line: #3a2f27; --line-strong: #56473b; --text: #efe4d4; --text-2: #c2b3a1; --text-3: #8e7d6b;
  --grid: rgb(239 228 212 / .045); --grid-major: rgb(239 228 212 / .08);
}

/* ---------- 3. База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 16px); }
body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font: 400 17px/1.55 var(--font); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img, svg, canvas { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { color: var(--text); }
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
fieldset { margin: 0; padding: 0; border: 0; min-width: 0; }
:focus-visible { outline: none; box-shadow: var(--focus); }
::selection { background: var(--terra); color: var(--terra-ink); }
[hidden] { display: none !important; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; padding: 10px 16px; background: var(--terra); color: var(--terra-ink); transform: translateY(-150%); }
.skip-link:focus { transform: none; }

/* Миллиметровка */
.grid-paper {
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px), linear-gradient(90deg, var(--grid-major) 1px, transparent 1px),
    linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
}

.container { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.container--narrow { max-width: calc(860px + var(--gutter) * 2); }
.section { padding-block: 72px; }
.section--alt { background-color: var(--bg-alt); }
.section__head { max-width: 780px; margin-bottom: 34px; }
.section__title { font: 500 clamp(30px, 4.4vw, 50px)/1.08 var(--font); letter-spacing: -.01em; text-wrap: balance; }

/* Подпись-выноска «Б-02 ——— Программы» */
.annot, .hero__kicker {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
  font: 500 12px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3);
}
.annot span, .hero__kicker span { padding: 4px 7px; border: 1.5px solid var(--terra); color: var(--terra); }
.annot::after { content: ''; flex: 0 1 80px; height: 1px; background: var(--line-strong); order: 1; }
.annot span { order: 0; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 0 20px; font-weight: 500; font-size: 16px; line-height: 1;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn--terra { background: var(--terra); color: var(--terra-ink); }
.btn--terra:hover { background: var(--terra-2); color: var(--terra-ink); }
.btn--line { border: 1.5px solid var(--text); color: var(--text); }
.btn--line:hover { background: var(--text); color: var(--bg); }
.icon-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; color: var(--text-2); }
.icon-btn:hover { color: var(--terra); }
.icon-btn .icon { width: 22px; height: 22px; }

/* ---------- 4. Шапка ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); padding-top: env(safe-area-inset-top); border-bottom: 1.5px solid transparent; transition: border-color .25s; }
.site-header.is-scrolled { border-bottom-color: var(--text); }
.site-header__inner { display: flex; align-items: center; gap: 16px; height: var(--header-h); }
.site-header__actions { display: flex; align-items: center; margin-left: auto; }
.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--text); flex: none; }
.logo:hover { color: var(--text); }
.logo__mark { width: 38px; height: 38px; }
.logo__text { font: 600 24px/1 var(--font); letter-spacing: -.01em; }
.logo__text b { color: var(--terra); font-weight: 600; }
.logo__text small { font: 500 11px/1 var(--font-mono); color: var(--text-3); margin-left: 2px; }
.logo--light { color: #efe4d4; }
.logo--light:hover { color: #fff; }
.nav { margin-left: 30px; }
.nav__list { display: flex; gap: 2px; }
.nav__link { display: block; padding: 8px 12px; color: var(--text-2); font-size: 16px; font-weight: 500; border: 1.5px solid transparent; }
.nav__link:hover { color: var(--text); border-color: var(--line-strong); }
.nav__link.is-current { color: var(--text); border-color: var(--text); }
/* Переключатель темы: капсула «солнце | луна», иконки встроены в кнопку */
.theme-switch {
  --sw-border: var(--text); --sw-bg: var(--surface); --sw-knob: var(--terra);
  --sw-icon: var(--text-3); --sw-icon-on: var(--terra-ink);
  display: inline-grid; place-items: center; height: 44px; padding: 0 4px; flex: none;
}
.theme-switch__track {
  position: relative; display: flex; align-items: center; justify-content: space-between;
  width: 62px; height: 32px; padding: 0 7px;
  border: 1.5px solid var(--sw-border); border-radius: 0; background: var(--sw-bg);
  transition: border-color .2s;
}
.theme-switch:hover .theme-switch__track { border-color: var(--text); }
.theme-switch:focus-visible { box-shadow: none; }
.theme-switch:focus-visible .theme-switch__track { box-shadow: var(--focus); }
.theme-switch__knob {
  position: absolute; left: 2px; top: 2px; width: 26px; height: 26px; border-radius: 0;
  background: var(--sw-knob); box-shadow: 0 1px 3px rgb(0 0 0 / .3);
  transition: transform .3s cubic-bezier(.3, 1.3, .5, 1);
}
.theme-switch__icon {
  position: relative; z-index: 1; width: 16px; height: 16px;
  fill: none; stroke: var(--sw-icon); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .3s;
}
.theme-switch__icon--sun { stroke: var(--sw-icon-on); }
:root[data-theme="dark"] .theme-switch__knob { transform: translateX(29px); }
:root[data-theme="dark"] .theme-switch__icon--sun { stroke: var(--sw-icon); }
:root[data-theme="dark"] .theme-switch__icon--moon { stroke: var(--sw-icon-on); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-switch__knob { transform: translateX(29px); }
  :root:not([data-theme="light"]) .theme-switch__icon--sun { stroke: var(--sw-icon); }
  :root:not([data-theme="light"]) .theme-switch__icon--moon { stroke: var(--sw-icon-on); }
}
.nav-toggle { display: none; }

/* ---------- 5. Первый экран ---------- */
.hero { padding: 26px 0 56px; border-bottom: 1.5px solid var(--text); }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .85fr); gap: 56px; align-items: center; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: 14px; color: var(--text-3); margin-bottom: 22px; }
.crumbs a { color: var(--text-2); }
.hero__title { font: 500 clamp(44px, 7.4vw, 92px)/.98 var(--font); letter-spacing: -.035em; }
.hero__accent { display: block; color: var(--terra); font-weight: 400; font-style: italic; }
.hero__lead { max-width: 600px; margin-top: 22px; font-size: clamp(17px, 2vw, 20px); color: var(--text-2); }
.hero__facts { display: flex; flex-wrap: wrap; gap: 10px 22px; margin-top: 24px; font-size: 15px; font-weight: 500; }
.hero__facts li { display: inline-flex; align-items: center; gap: 8px; }
.hero__facts .icon { color: var(--terra); }

/* Чертёж с размерными линиями */
.drawing { position: relative; padding: 46px 0 34px 54px; }
.drawing__plan { width: 100%; height: auto; }
:root[data-theme="dark"] .drawing__plan { filter: invert(.88) sepia(.3); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .drawing__plan { filter: invert(.88) sepia(.3); } }
.drawing__cap { position: absolute; right: 0; bottom: 0; font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-3); }
.dim { position: absolute; display: grid; place-items: center; color: var(--terra); font: 500 13px/1 var(--font-mono); }
.dim::before { content: ''; position: absolute; background: currentColor; }
.dim span { position: relative; padding: 2px 8px; background: var(--bg); }
.dim--top { left: 54px; right: 0; top: 10px; height: 22px; border-left: 1.5px solid; border-right: 1.5px solid; }
.dim--top::before { left: 0; right: 0; top: 50%; height: 1.5px; }
.dim--side { left: 8px; top: 46px; bottom: 34px; width: 22px; border-top: 1.5px solid; border-bottom: 1.5px solid; }
.dim--side::before { top: 0; bottom: 0; left: 50%; width: 1.5px; }
.dim--side span { writing-mode: vertical-rl; rotate: 180deg; padding: 8px 2px; }

/* ---------- 6. Формы ---------- */
.field { display: grid; gap: 8px; min-width: 0; }
.field + .field, .field-row + .field, .field + .field-row { margin-top: 24px; }
.field__label {
  display: flex; align-items: center; gap: 10px;
  font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--text-2);
}
.field__label::after { content: ''; flex: 1; border-bottom: 1px dashed var(--line-strong); }
.field__note { font-size: 14px; color: var(--text-3); line-height: 1.45; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field-row .field + .field { margin-top: 0; }

.box {
  position: relative; display: flex; align-items: baseline; gap: 8px;
  padding: 10px 14px; background: var(--surface); border: 1.5px solid var(--text);
  transition: box-shadow .2s;
}
.box:focus-within { box-shadow: 4px 4px 0 var(--terra); }
.box--soft { border-style: dashed; }
.box__input {
  width: 100%; min-width: 0; border: 0; background: none; outline: none; padding: 0;
  font: 500 30px/1.2 var(--font); font-variant-numeric: tabular-nums; letter-spacing: -.01em;
  -moz-appearance: textfield; appearance: textfield;
}
.box__input::-webkit-outer-spin-button, .box__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.box__unit { flex: none; font-size: 16px; color: var(--text-3); white-space: nowrap; }
.box-pair { display: grid; grid-template-columns: .7fr 1.3fr; }
.box-pair .box + .box { border-left: 0; }

/* Ползунок-линейка */
.ruler {
  --p: 50%;
  width: 100%; height: 30px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none; touch-action: pan-y;
}
.ruler:focus { outline: none; }
.ruler::-webkit-slider-runnable-track {
  height: 14px;
  background:
    linear-gradient(to right, var(--terra) var(--p), transparent var(--p)) bottom / 100% 3px no-repeat,
    repeating-linear-gradient(90deg, var(--text-2) 0 1.5px, transparent 1.5px 10%) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, var(--line-strong) 0 1px, transparent 1px 2%) bottom / 100% 6px no-repeat,
    linear-gradient(var(--text-2), var(--text-2)) bottom / 100% 1px no-repeat;
}
.ruler::-moz-range-track { height: 14px; background: repeating-linear-gradient(90deg, var(--text-2) 0 1.5px, transparent 1.5px 10%) bottom / 100% 12px no-repeat, linear-gradient(var(--text-2), var(--text-2)) bottom / 100% 1px no-repeat; }
.ruler::-moz-range-progress { height: 3px; background: var(--terra); margin-top: 11px; }
.ruler::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 12px; height: 26px; margin-top: -9px;
  background: var(--terra); border: 2px solid var(--surface); box-shadow: 0 0 0 1.5px var(--terra), 0 2px 6px rgb(0 0 0 / .25);
  clip-path: polygon(0 0, 100% 0, 100% 75%, 50% 100%, 0 75%);
}
.ruler::-moz-range-thumb { width: 10px; height: 24px; border-radius: 0; background: var(--terra); border: 2px solid var(--surface); }
.ruler:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.ruler--in-box { position: absolute; left: 0; right: 0; bottom: -16px; height: 30px; }
.box[data-range] { margin-bottom: 12px; }

.quick { display: flex; flex-wrap: wrap; gap: 6px; }
.quick button { padding: 6px 12px; border: 1.5px solid var(--line-strong); font: 500 12px/1 var(--font-mono); color: var(--text-2); }
.quick button:hover { border-color: var(--text); color: var(--text); }
.quick button.is-active { background: var(--text); border-color: var(--text); color: var(--bg); }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; border: 1.5px solid var(--text); }
.seg__btn { min-height: 46px; padding: 6px 10px; font-weight: 500; font-size: 16px; color: var(--text-2); transition: background-color .2s, color .2s; }
.seg__btn + .seg__btn { border-left: 1.5px solid var(--text); }
.seg__btn:hover { color: var(--text); background: var(--surface-3); }
.seg__btn[aria-checked="true"] { background: var(--text); color: var(--bg); }

.programs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.program {
  display: grid; gap: 2px; justify-items: start; padding: 10px 12px; text-align: left;
  border: 1.5px solid var(--line-strong); background: var(--surface);
  transition: border-color .2s, background-color .2s;
}
.program:hover { border-color: var(--text); }
.program b { font-size: 15px; font-weight: 600; line-height: 1.2; }
.program small { font: 500 12px/1.2 var(--font-mono); color: var(--text-3); }
.program[aria-checked="true"] { border-color: var(--terra); background: var(--terra); color: var(--terra-ink); }
.program[aria-checked="true"] small { color: var(--terra-ink); opacity: .8; }

/* ---------- 7. Лист расчёта ---------- */
.calc-section { padding: 48px 0 24px; }
.sheet {
  position: relative; background: var(--surface);
  border: 1.5px solid var(--text);
  box-shadow: 0 0 0 8px var(--surface), 0 0 0 9.5px var(--text), 0 30px 60px -30px rgb(43 33 27 / .4);
  margin: 10px;
}
/* Метки обреза по углам листа */
.sheet::before, .sheet::after {
  content: ''; position: absolute; width: 22px; height: 22px; pointer-events: none;
  border-color: var(--terra); border-style: solid;
}
.sheet::before { left: -24px; top: -24px; border-width: 2px 0 0 2px; }
.sheet::after { right: -24px; bottom: -24px; border-width: 0 2px 2px 0; }
.sheet__top {
  display: flex; justify-content: space-between; gap: 12px; padding: 14px 30px;
  border-bottom: 1.5px solid var(--text);
  font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-2);
}
.sheet__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sheet__form { padding: 28px 32px 36px; min-width: 0; border-right: 1.5px solid var(--text); }
.sheet__result { padding: 26px 30px 32px; min-width: 0; background-color: var(--surface-2); }
.sheet__note { display: flex; gap: 10px; padding: 16px 30px 20px; border-top: 1.5px solid var(--text); font-size: 14px; color: var(--text-3); line-height: 1.5; }
.sheet__note .icon { width: 18px; height: 18px; margin-top: 2px; }

.tabs { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 26px; border: 1.5px solid var(--text); }
.tabs__btn { min-height: 50px; padding: 0 12px; font-size: 17px; font-weight: 500; color: var(--text-2); transition: background-color .2s, color .2s; }
.tabs__btn + .tabs__btn { border-left: 1.5px solid var(--text); }
.tabs__btn:hover { color: var(--text); }
.tabs__btn[aria-selected="true"] { background: var(--terra); color: var(--terra-ink); }

/* ---------- 8. Результат: план и штамп ---------- */
.result__tag { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--text-3); }
.kpi { display: grid; gap: 4px; margin-top: 18px; }
.kpi__label { font-size: 16px; color: var(--text-2); }
.kpi__value { font: 500 clamp(46px, 5.4vw, 66px)/1 var(--font); letter-spacing: -.03em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi__value small { font-size: .45em; color: var(--text-3); letter-spacing: 0; }
.kpi__sub { font-size: 15px; color: var(--terra); font-weight: 500; }
.kpi__sub:empty { display: none; }

.fplan-wrap { margin-top: 26px; }
.fplan__dim {
  position: relative; display: grid; place-items: center; height: 22px; margin-bottom: 8px;
  border-left: 1.5px solid var(--text-2); border-right: 1.5px solid var(--text-2);
  font: 500 12px/1 var(--font-mono); color: var(--text-2);
}
.fplan__dim::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--text-2); }
.fplan__dim span { position: relative; padding: 0 10px; background: var(--surface-2); }
.fplan__dim b { color: var(--text); }
.fplan {
  --down: 20%; --int: 50%;
  display: flex; height: 280px; border: 6px solid var(--text); background: var(--surface);
}
.fplan__right { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.room {
  position: relative; display: grid; align-content: start; gap: 2px; padding: 12px 14px; overflow: hidden; min-width: 0;
  transition: flex-basis .6s var(--ease), width .6s var(--ease);
}
.room__name { font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-2); }
.room__sum { font: 600 20px/1.15 var(--font); font-variant-numeric: tabular-nums; white-space: nowrap; }
.room__pct { font: 500 11px/1.3 var(--font-mono); color: var(--text-3); }
.room--down { padding-inline: 10px; }
.room--down .room__sum { font-size: 16px; white-space: normal; }
.room--down { width: var(--down); flex: none; border-right: 4px solid var(--text); background: var(--surface-3); }
.room--down.is-empty { display: none; }
.room--loan { flex: 1 1 auto; background: color-mix(in srgb, var(--olive) 16%, var(--surface)); }
.room--int {
  flex: 0 0 var(--int); border-top: 4px solid var(--text);
  background: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--terra) 26%, transparent) 0 2px, transparent 2px 10px), color-mix(in srgb, var(--terra) 8%, var(--surface));
}
.room--int .room__sum { color: var(--terra); }
/* Дверные проёмы и дуги */
.room--loan::after, .room--down::after {
  content: ''; position: absolute; width: 34px; height: 34px; border: 1.5px solid var(--text-3); border-left: 0; border-bottom: 0; border-radius: 0 100% 0 0;
}
.room--loan::after { left: 22px; bottom: -1px; transform: scaleY(-1); transform-origin: bottom; }
.room--down::after { right: -1px; bottom: 30px; transform: scaleX(-1); }
.room--loan::before { content: ''; position: absolute; left: 22px; bottom: -6px; width: 36px; height: 8px; background: var(--surface); }
.room--down::before { content: ''; position: absolute; right: -6px; bottom: 30px; width: 8px; height: 36px; background: color-mix(in srgb, var(--olive) 16%, var(--surface)); z-index: 1; }

/* Штамп чертежа (основная надпись) */
.stamp-block { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 22px; border: 1.5px solid var(--text); background: var(--surface); }
.stamp-block > div { display: grid; gap: 4px; padding: 10px 12px; border-right: 1px solid var(--text); border-bottom: 1px solid var(--text); min-width: 0; }
.stamp-block > div:nth-child(3n + 1) { border-right: 1px solid var(--text); }
.stamp-block > div:nth-child(3n) { border-right: 0; }
.stamp-block__title { grid-column: 1 / -1; border-right: 0 !important; display: flex !important; justify-content: space-between; align-items: baseline; background: var(--text); color: var(--bg); }
.stamp-block__title dt { color: inherit !important; opacity: .7; }
.stamp-block dt { font: 500 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.stamp-block dd { font: 600 17px/1.2 var(--font); font-variant-numeric: tabular-nums; }
.stamp-block dd small { font-weight: 400; font-size: 13px; color: var(--text-3); }
.stamp-block .is-accent dd { color: var(--terra); }
.stamp-block > div:nth-last-child(-n + 3):not(.stamp-block__title) { border-bottom: 0; }

.result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 18px; }

/* Нижняя часть листа: разрез и ведомость */
.sheet__bottom { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); border-top: 1.5px solid var(--text); }
.section-cut { padding: 26px 30px; border-right: 1.5px solid var(--text); min-width: 0; }
.section-cut__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 10px 20px; margin-bottom: 16px; }
.cut-title { display: grid; gap: 6px; font: 500 24px/1.15 var(--font); }
.cut-title span { font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--terra); }
.chart-box { position: relative; height: 300px; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--text-2); }
.legend li { display: inline-flex; align-items: center; gap: 6px; }
.sw { width: 14px; height: 10px; }
.sw--loan { background: var(--olive); }
.sw--int { background: repeating-linear-gradient(-45deg, var(--clay) 0 2px, transparent 2px 4px), color-mix(in srgb, var(--clay) 40%, transparent); }
.sw--line { height: 0; border-top: 2px dashed var(--text); }

.years { padding: 26px 30px; min-width: 0; }
.years__meta { font: 500 11px/1.3 var(--font-mono); color: var(--text-3); }
.years__scroll { max-height: 300px; overflow: auto; border: 1.5px solid var(--text); }
.years__table { width: 100%; border-collapse: collapse; font: 400 12px/1.2 var(--font-mono); font-variant-numeric: tabular-nums; }
.years__table th { position: sticky; top: 0; padding: 9px 10px; background: var(--text); color: var(--bg); font-weight: 500; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; text-align: right; }
.years__table th:first-child, .years__table td:first-child { text-align: left; }
.years__table td { padding: 8px 10px; text-align: right; border-top: 1px solid var(--line); white-space: nowrap; }
.years__table td:nth-child(4) { color: var(--terra); }
.years__table tr:nth-child(5n) td { border-bottom: 1.5px solid var(--line-strong); }

/* ---------- 9. Контентные блоки ---------- */
.programs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1.5px solid var(--text); background: var(--surface); }
.pcard { display: grid; align-content: start; gap: 10px; padding: 28px; }
.pcard + .pcard { border-left: 1.5px solid var(--text); }
.pcard__rate { font: 400 88px/.9 var(--font); letter-spacing: -.05em; color: var(--terra); }
.pcard__rate small { font-size: .4em; margin-left: 4px; }
.pcard--market .pcard__rate { color: var(--text); }
.pcard h3 { font-size: 22px; font-weight: 600; }
.pcard p { color: var(--text-2); font-size: 16px; }
.pcard__btn { justify-self: start; display: inline-flex; align-items: center; gap: 8px; margin-top: 8px; padding-bottom: 2px; font-weight: 600; color: var(--text); border-bottom: 2px solid var(--terra); }
.pcard__btn .icon { width: 18px; height: 18px; transition: translate .2s; }
.pcard__btn:hover .icon { translate: 4px 0; }

.deduct { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: stretch; gap: 14px; }
.deduct__item { display: grid; align-content: start; gap: 8px; padding: 26px; background: var(--surface); border: 1.5px solid var(--text); }
.deduct__item--total { background: var(--terra); color: var(--terra-ink); border-color: var(--terra); }
.deduct__item--total p { color: var(--terra-ink) !important; opacity: .85; }
.deduct__sum { font: 500 clamp(30px, 3.2vw, 42px)/1 var(--font); letter-spacing: -.02em; white-space: nowrap; }
.deduct__item h3 { font-size: 19px; font-weight: 600; }
.deduct__item p { color: var(--text-2); font-size: 15px; }
.deduct__plus, .deduct__eq { align-self: center; font: 300 46px/1 var(--font); color: var(--text-3); }

.faq { border-top: 1.5px solid var(--text); }
.faq__item { border-bottom: 1.5px solid var(--text); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 20px 2px; cursor: pointer; list-style: none; font-size: 21px; font-weight: 500; line-height: 1.3; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .icon { width: 32px; height: 32px; padding: 6px; border: 1.5px solid var(--text); transition: rotate .25s var(--ease), background-color .2s; }
.faq__item[open] summary .icon { rotate: 45deg; background: var(--terra); border-color: var(--terra); color: var(--terra-ink); }
.faq__body { padding: 0 2px 22px; color: var(--text-2); max-width: 720px; }

/* ---------- 10. Сеть, спецификация, подвал ---------- */
.network { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ncard { position: relative; isolation: isolate; display: grid; grid-template-rows: 1fr auto auto; gap: 14px; min-height: 236px; height: 100%; padding: 22px; border-radius: 16px; overflow: hidden; transition: transform .25s var(--ease), box-shadow .25s; }
.ncard:hover { transform: translateY(-4px); box-shadow: 0 18px 30px -16px rgb(0 0 0 / .45); }
.ncard__body { display: grid; gap: 4px; }
.ncard__title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.ncard__text { font-size: 14px; line-height: 1.4; opacity: .8; }
.ncard__domain { justify-self: start; }
.ncard__here { position: absolute; right: 22px; top: 22px; padding: 4px 10px; background: #2b211b; color: #fff4e6; font: 500 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.ncard--alco { background: #1f1e1b; color: #efe8d9; }
.ncard--alco::before { content: ''; position: absolute; z-index: -1; left: 0; right: 0; top: 46%; height: 4px; background: repeating-linear-gradient(90deg, #f6be00 0 34px, transparent 34px 58px); }
.ncard--alco .ncard__art { justify-self: end; }
.ncard__sign { width: 72px; height: 72px; filter: drop-shadow(0 6px 10px rgb(0 0 0 / .4)); }
.ncard--alco .ncard__title { font-family: 'Oswald', 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .02em; }
.ncard--alco .ncard__domain { padding: 3px 10px; border: 2px solid #1d1c1a; border-radius: 5px; background: #fff; color: #1d1c1a; font: 600 14px/1.2 'Arial Narrow', sans-serif; text-transform: uppercase; letter-spacing: .08em; }
.ncard--cred { grid-template-rows: auto auto 1fr auto; color: #f4ecd8; background: linear-gradient(90deg, #0e4633 30%, rgb(14 70 51 / 0) 72%), url('../img/guilloche.svg') right -90px top -80px / 300px no-repeat, linear-gradient(135deg, #12573f 0%, #0b3a2b 100%); }
.ncard__chip { width: 46px; height: 34px; border-radius: 7px; background: linear-gradient(90deg, transparent 30%, rgb(0 0 0 / .25) 30% 33%, transparent 33% 67%, rgb(0 0 0 / .25) 67% 70%, transparent 70%), linear-gradient(0deg, transparent 45%, rgb(0 0 0 / .25) 45% 55%, transparent 55%), linear-gradient(135deg, #f0d48e, #b8862f); }
.ncard__number { font: 500 14px/1 ui-monospace, monospace; letter-spacing: .14em; opacity: .85; }
.ncard--cred .ncard__title { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; font-size: 22px; }
.ncard--cred .ncard__domain { font: 600 14px/1 ui-monospace, monospace; letter-spacing: .2em; text-transform: uppercase; color: #e2c47c; }
.ncard--ipot { color: #2b211b; background: linear-gradient(0deg, #eadbc2 40%, rgb(234 219 194 / 0) 72%), url('../img/plan.svg') right -40px top -26px / 250px no-repeat, #eadbc2; }
.ncard--ipot.is-current { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--terra); }
.ncard__key { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: #b5552e; color: #fff4e6; }
.ncard__key .icon { width: 26px; height: 26px; stroke-width: 2; }
.ncard--ipot .ncard__domain { padding: 4px 10px; border-radius: 3px; background: #b5552e; color: #fff4e6; font: 600 12px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }

/* Спецификация со ссылками на основной сайт */
.partner { background: #241b16; padding: 64px 0 0; }
.spec { border: 1.5px solid #efe4d4; color: #efe4d4; background-color: #2b211b; }
.spec__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding: 18px 24px; border-bottom: 1.5px solid #efe4d4; }
.spec__title { font: 500 24px/1.2 var(--font); }
.spec__domain { padding: 6px 12px; background: #b5552e; color: #fff4e6; font: 500 13px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.spec__domain:hover { background: #c96a41; color: #fff; }
.spec__list { display: grid; grid-template-columns: repeat(4, 1fr); }
.spec__list li { border-right: 1px solid rgb(239 228 212 / .25); border-bottom: 1px solid rgb(239 228 212 / .25); }
.spec__list li:nth-child(4n) { border-right: 0; }
.spec__list li:nth-last-child(-n + 4) { border-bottom: 0; }
.spec__list a { display: flex; gap: 12px; align-items: baseline; padding: 14px 18px; color: #efe4d4; font-size: 16px; transition: background-color .2s; }
.spec__list a:hover { background: rgb(239 228 212 / .06); color: #fff; }
.spec__list span { font: 500 11px/1 var(--font-mono); color: #d77a50; }

.site-footer { padding: 52px 0 calc(40px + env(safe-area-inset-bottom)); background: #241b16; color: #a8988a; font-size: 15px; }
.site-footer__inner { display: grid; gap: 24px; grid-template-columns: 1.4fr 1fr auto; align-items: start; padding-top: 28px; border-top: 1px dashed rgb(239 228 212 / .25); }
.site-footer__brand p { margin-top: 12px; max-width: 420px; }
.site-footer__nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.site-footer__nav a { color: #efe4d4; }
.site-footer__nav a:hover { color: #d77a50; }
.site-footer__copy { font: 500 11px/1.5 var(--font-mono); }

/* ---------- 11. Плашка, тост, печать ---------- */
.sticky-result {
  position: fixed; z-index: 40; left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); bottom: calc(12px + env(safe-area-inset-bottom));
  display: flex; align-items: center; gap: 12px; padding: 12px 16px;
  background: #2b211b; color: #efe4d4; border: 1.5px solid #d77a50; box-shadow: 6px 6px 0 #b5552e;
  text-align: left; transform: translateY(calc(100% + 30px)); opacity: 0; transition: transform .35s var(--ease), opacity .35s;
}
.sticky-result.is-visible { transform: none; opacity: 1; }
.sticky-result__label { flex: 1; font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: #d77a50; }
.sticky-result__value { font: 600 24px/1 var(--font); font-variant-numeric: tabular-nums; }
.sticky-result .icon { rotate: 90deg; opacity: .6; }
.toast { position: fixed; z-index: 60; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom)); max-width: calc(100% - 32px); padding: 12px 18px; background: #2b211b; color: #efe4d4; border: 1.5px solid #d77a50; translate: -50% 20px; opacity: 0; pointer-events: none; transition: translate .3s var(--ease), opacity .3s; }
.toast.is-visible { translate: -50% 0; opacity: 1; }

@media print {
  .site-header, .hero, .sheet__form, .result-actions, .section-cut, .section, .partner, .site-footer, .sticky-result, .toast { display: none !important; }
  body { background: #fff; }
  .sheet { box-shadow: none; margin: 0; }
  .sheet__body, .sheet__bottom { display: block; }
  .years__scroll { max-height: none; overflow: visible; }
}

/* ---------- 12. Адаптив ---------- */
@media (max-width: 1080px) {
  .sheet__bottom { grid-template-columns: 1fr; }
  .section-cut { border-right: 0; border-bottom: 1.5px solid var(--text); }
  .programs { grid-template-columns: 1fr 1fr; }
  .deduct { grid-template-columns: 1fr 1fr; }
  .deduct__plus, .deduct__eq { display: none; }
  .deduct__item--total { grid-column: 1 / -1; }
  .spec__list { grid-template-columns: repeat(2, 1fr); }
  .spec__list li:nth-child(4n) { border-right: 1px solid rgb(239 228 212 / .25); }
  .spec__list li:nth-child(2n) { border-right: 0; }
  .spec__list li:nth-last-child(-n + 4) { border-bottom: 1px solid rgb(239 228 212 / .25); }
  .spec__list li:nth-last-child(-n + 2) { border-bottom: 0; }
  .network { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: inline-grid; }
  .site-header.is-open { border-bottom-color: var(--text); }
  .site-header.is-open .nav { display: block; position: absolute; left: 0; right: 0; top: 100%; margin: 0; padding: 8px var(--gutter) 16px; background: var(--bg); border-bottom: 1.5px solid var(--text); }
  .site-header.is-open .nav__list { flex-direction: column; gap: 4px; }
  .site-header.is-open .nav__link { padding: 12px; font-size: 19px; }
  .hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .drawing { max-width: 460px; }
  .sheet__body { grid-template-columns: 1fr; }
  .sheet__form { border-right: 0; border-bottom: 1.5px solid var(--text); }
  .programs-grid { grid-template-columns: 1fr; }
  .pcard + .pcard { border-left: 0; border-top: 1.5px solid var(--text); }
  .site-footer__inner { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  :root { --header-h: 60px; }
  .section { padding-block: 52px; }
  .logo__text { font-size: 21px; }
  .logo__mark { width: 34px; height: 34px; }
  .hero { padding-bottom: 36px; }
  .drawing { padding: 40px 0 28px 44px; }
  .dim--top { left: 44px; }
  .dim--side { left: 4px; top: 40px; bottom: 28px; }
  .calc-section { padding-top: 32px; }
  .calc-section .container { padding-inline: 12px; }
  .sheet { margin: 6px; box-shadow: 0 0 0 5px var(--surface), 0 0 0 6.5px var(--text); }
  .sheet::before, .sheet::after { display: none; }
  .sheet__top { padding: 12px 14px; font-size: 10px; letter-spacing: .08em; }
  .sheet__form { padding: 20px 14px 28px; }
  .sheet__result { padding: 22px 14px 24px; }
  .tabs__btn { font-size: 15px; min-height: 48px; padding: 0 6px; line-height: 1.2; }
  .box__input { font-size: 26px; }
  .box-pair { grid-template-columns: .8fr 1.2fr; }
  .field-row { grid-template-columns: 1fr; }
  .programs { grid-template-columns: 1fr 1fr; }
  .fplan { height: 240px; border-width: 5px; }
  .room { padding: 10px; }
  .room__sum { font-size: 16px; }
  .stamp-block { grid-template-columns: 1fr 1fr; }
  .stamp-block > div { border-right: 1px solid var(--text) !important; border-bottom: 1px solid var(--text) !important; }
  .stamp-block > div:nth-child(odd):not(.stamp-block__title) { border-right: 0 !important; }
  .stamp-block > div:nth-last-child(-n + 2):not(.stamp-block__title) { border-bottom: 0 !important; }
  .room--down .room__pct { display: none; }
  .years__table th:nth-child(3), .years__table td:nth-child(3) { display: none; }
  .years__table { font-size: 11px; }
  .years__table th, .years__table td { padding: 8px 6px; }
  .stamp-block dd { font-size: 16px; }
  .section-cut, .years { padding: 22px 12px; }
  .chart-box { height: 240px; }
  .sheet__note { padding: 14px; }
  .deduct { grid-template-columns: 1fr; }
  .pcard { padding: 22px 18px; }
  .pcard__rate { font-size: 68px; }
  .faq__item summary { font-size: 18px; }
  .network { grid-template-columns: 1fr; }
  .spec__list { grid-template-columns: 1fr; }
  .spec__list li { border-right: 0 !important; border-bottom: 1px solid rgb(239 228 212 / .25) !important; }
  .spec__list li:last-child { border-bottom: 0 !important; }
  .site-footer { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
}
@media (min-width: 901px) { .sticky-result { display: none; } }
@media (pointer: coarse) {
  .ruler { height: 36px; }
  .ruler::-webkit-slider-thumb { width: 16px; height: 30px; margin-top: -11px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   13. Страницы сайта: блог, статьи, налоговый вычет
   ========================================================================== */
.container--article { max-width: calc(880px + var(--gutter) * 2); }
.section--tight { padding-block: 48px; }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; max-width: none; }
.more-link { display: inline-flex; align-items: center; gap: 8px; flex: none; padding: 8px 14px; border: 1.5px solid var(--text); color: var(--text); font-weight: 500; transition: background-color .2s, color .2s; }
.more-link .icon { width: 18px; height: 18px; }
.more-link:hover { background: var(--text); color: var(--bg); }

.page-hero { padding: 26px 0 44px; border-bottom: 1.5px solid var(--text); }
.page-hero__title { font: 500 clamp(40px, 6.4vw, 76px)/1 var(--font); letter-spacing: -.03em; max-width: 16ch; }
.page-hero__lead { max-width: 680px; margin-top: 18px; font-size: clamp(17px, 2vw, 20px); color: var(--text-2); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags a { display: inline-block; padding: 7px 12px; border: 1.5px solid var(--line-strong); background: var(--surface); font: 500 11px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; color: var(--text-2); }
.tags a:hover { border-color: var(--text); color: var(--text); }
.tags a.is-current { background: var(--terra); border-color: var(--terra); color: var(--terra-ink); }

/* Карточки статей */
.posts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.posts--3 { grid-template-columns: repeat(3, 1fr); margin-top: 18px; }
.post { display: flex; flex-direction: column; min-width: 0; background: var(--surface); border: 1.5px solid var(--text); transition: box-shadow .2s, transform .2s var(--ease); }
.post:hover { box-shadow: 6px 6px 0 var(--terra); transform: translate(-2px, -2px); }
.post__cover { border-bottom: 1.5px solid var(--text); }
.post__body { display: grid; align-content: start; gap: 10px; flex: 1; padding: 20px 22px 22px; }
.post__tag { justify-self: start; padding: 3px 8px; border: 1.5px solid var(--terra); color: var(--terra); font: 500 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; }
.post__title { font: 500 23px/1.2 var(--font); letter-spacing: -.01em; }
.post__title a { color: var(--text); }
.post__title a:hover { color: var(--terra); }
.post__text { color: var(--text-2); font-size: 16px; }
.post__meta { margin-top: auto; padding-top: 6px; font: 500 11px/1 var(--font-mono); color: var(--text-3); }
.post--featured { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.post--featured .post__cover { aspect-ratio: auto; min-height: 340px; border-bottom: 0; border-right: 1.5px solid var(--text); }
.post--featured .post__body { padding: 36px; align-content: center; }
.post--featured .post__title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.1; }
.post--soon { opacity: .7; }
.post--soon:hover { box-shadow: none; transform: none; }
.post--soon .post__meta { text-transform: uppercase; letter-spacing: .14em; color: var(--terra); }
.post--row { display: grid; grid-template-columns: 150px 1fr; }
.post--row .post__cover { aspect-ratio: auto; min-height: 140px; border-bottom: 0; border-right: 1.5px solid var(--text); }
.post--row .post__body { padding: 16px 18px; }
.post--row .post__title { font-size: 19px; }

/* Обложки-чертежи */
.cover { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 22px; aspect-ratio: 16 / 9; overflow: hidden; padding: 18px 18px 0; background-color: var(--surface-2); }
.cover::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--text); }
.facade {
  position: relative; display: grid; align-content: start; justify-items: center; gap: 2px; width: 26%; padding-top: 10px;
  border: 2px solid var(--text); border-bottom: 0; background:
    repeating-linear-gradient(90deg, transparent 0 18%, var(--line-strong) 18% 20%) 0 34px / 100% calc(100% - 34px) no-repeat,
    repeating-linear-gradient(0deg, transparent 0 14px, var(--line-strong) 14px 15.5px) 0 34px / 100% calc(100% - 34px) no-repeat,
    var(--surface);
}
.facade b { font: 600 22px/1 var(--font); }
.facade span { padding: 2px 4px; background: var(--surface); font: 500 10px/1 var(--font-mono); color: var(--text-3); }
.facade--low { height: 38%; }
.facade--high { height: 88%; border-color: var(--terra); background-color: color-mix(in srgb, var(--terra) 10%, var(--surface)); }
.facade--high b { color: var(--terra); }
.cover__note { position: absolute; left: 14px; top: 12px; font: 500 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--text-3); }
.cover--down { align-items: center; padding-bottom: 18px; }
.mini-plan { display: flex; width: 70%; height: 62%; border: 5px solid var(--text); background: color-mix(in srgb, var(--olive) 18%, var(--surface)); font: 500 11px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.mini-plan i { display: grid; place-items: center; font-style: normal; flex: 1; }
.mini-plan i:first-child { flex: 0 0 var(--w); border-right: 4px solid var(--text); background: var(--surface-3); color: var(--terra); font: 600 18px/1 var(--font); }
.mini-plan--lg { width: 42%; height: 72%; }
.cover--refi, .cover--rent, .cover--vychet { align-items: center; padding-bottom: 18px; }
.cover__word { font: 500 28px/1.15 var(--font); text-align: center; letter-spacing: -.01em; }
.cover--vychet .cover__word { padding: 8px 14px; background: var(--terra); color: var(--terra-ink); }
.cover--refi .cover__word { color: var(--terra); }
.cover--hero { aspect-ratio: 21 / 8; margin-top: 30px; border: 1.5px solid var(--text); }
.cover--hero .facade b { font-size: clamp(26px, 3.4vw, 40px); }
.cover--hero .facade span { font-size: 12px; }
.post--row .facade { width: 34%; }
.post--row .facade b { font-size: 14px; }
.post--row .mini-plan { width: 82%; font-size: 8px; }
.post--row .mini-plan i:first-child { font-size: 13px; }
.post--row .cover__word { font-size: 18px; }

/* Статья */
.article__head { padding: 26px 0 0; }
.article__head .post__tag { display: inline-block; margin-bottom: 14px; }
.article__title { font: 500 clamp(34px, 5.4vw, 62px)/1.04 var(--font); letter-spacing: -.03em; text-wrap: balance; }
.article__meta { margin-top: 16px; font: 500 11px/1 var(--font-mono); color: var(--text-3); text-transform: uppercase; letter-spacing: .1em; }
.article__lead { margin-top: 20px; padding-bottom: 6px; font-size: clamp(18px, 2.2vw, 21px); line-height: 1.6; color: var(--text-2); }
.article__layout { display: grid; grid-template-columns: 220px minmax(0, 740px); gap: 52px; justify-content: center; padding-block: 44px 72px; }
.toc { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; border: 1.5px solid var(--text); background: var(--surface); }
.toc__title { padding: 10px 14px; background: var(--text); color: var(--bg); font: 500 10px/1 var(--font-mono); text-transform: uppercase; letter-spacing: .14em; }
.toc ol { counter-reset: t; }
.toc li { counter-increment: t; }
.toc li + li { border-top: 1px solid var(--line); }
.toc a { display: flex; gap: 10px; padding: 9px 14px; color: var(--text-2); font-size: 14px; line-height: 1.35; }
.toc a::before { content: counter(t, decimal-leading-zero); font: 500 10px/1.9 var(--font-mono); color: var(--terra); }
.toc a:hover { color: var(--text); background: var(--surface-2); }

.prose { font-size: 18px; line-height: 1.7; min-width: 0; }
.prose > * + * { margin-top: 18px; }
.prose h2 { margin-top: 46px; font: 500 clamp(26px, 3vw, 34px)/1.15 var(--font); letter-spacing: -.02em; scroll-margin-top: calc(var(--header-h) + 20px); }
.prose h2 + * { margin-top: 14px; }
.prose a { color: var(--text); text-decoration: underline; text-decoration-color: var(--terra); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.prose ul { display: grid; gap: 10px; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ''; position: absolute; left: 2px; top: .6em; width: 10px; height: 10px; border: 2px solid var(--terra); }
.prose--section { font-size: 17px; }
.prose--section > :first-child { margin-top: 0; }

.spec-note { display: grid; border: 1.5px solid var(--text); background: var(--surface); }
.spec-note div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 16px; }
.spec-note div + div { border-top: 1px solid var(--line); }
.spec-note span { font: 500 12px/1.6 var(--font-mono); text-transform: uppercase; letter-spacing: .06em; color: var(--text-2); }
.spec-note b { font-weight: 600; white-space: nowrap; }

.sheet-table { overflow-x: auto; border: 1.5px solid var(--text); background: var(--surface); }
.sheet-table table { width: 100%; border-collapse: collapse; font-size: 16px; font-variant-numeric: tabular-nums; }
.sheet-table th, .sheet-table td { padding: 11px 14px; text-align: right; white-space: nowrap; }
.sheet-table thead th { background: var(--text); color: var(--bg); font: 500 10px/1.3 var(--font-mono); text-transform: uppercase; letter-spacing: .08em; }
.sheet-table th:first-child { text-align: left; }
.sheet-table tbody th { font-weight: 600; }
.sheet-table tbody tr + tr > * { border-top: 1px solid var(--line); }
.sheet-table .is-mark > * { background: color-mix(in srgb, var(--terra) 12%, transparent); }
.sheet-table .is-mark th { box-shadow: inset 4px 0 0 var(--terra); }

.callout { display: flex; gap: 16px; align-items: flex-start; padding: 16px 20px; border: 1.5px dashed var(--terra); background: var(--terra-soft); }
.callout__code { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--terra); color: var(--terra-ink); font: 600 18px/1 var(--font); }
.callout p { margin: 0; font-size: 16px; }

.nodes { display: grid; gap: 14px; counter-reset: n; }
.nodes li { position: relative; padding-left: 54px; counter-increment: n; }
.nodes li::before {
  content: counter(n); position: absolute; left: 0; top: -2px; display: grid; place-items: center; width: 34px; height: 34px;
  border: 1.5px solid var(--text); border-radius: 50%; background: var(--surface); font: 500 13px/1 var(--font-mono);
}
.nodes li::after { content: ''; position: absolute; left: 34px; top: 15px; width: 12px; border-top: 1.5px solid var(--text); }

.cta-box {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 40px !important; padding: 24px 26px; background: #2b211b; color: #efe4d4; box-shadow: 8px 8px 0 var(--terra);
}
.cta-box__title { font: 500 25px/1.15 var(--font); }
.cta-box p { margin: 6px 0 0; font-size: 15px; opacity: .75; line-height: 1.5; }
.cta-box .btn { flex: none; text-decoration: none; }

/* Страница вычета */
.split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 36px; align-items: start; }
.split .section__title { margin-bottom: 22px; }
.stamp-block--page { margin-top: 0; }
.conditions { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 0; border: 1.5px solid var(--text); background: var(--surface); }
.conditions li { display: flex; gap: 14px; padding: 18px 20px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.conditions .icon { flex: none; width: 26px; height: 26px; padding: 4px; border-radius: 50%; background: var(--olive); color: #fff; stroke-width: 2.6; }
.conditions li:nth-child(n + 4) .icon { background: var(--terra); }
.conditions b { display: block; font-size: 17px; }
.conditions span { color: var(--text-2); font-size: 15px; }
.ways { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1.5px solid var(--text); background: var(--surface); }
.way { padding: 26px; display: grid; align-content: start; gap: 14px; }
.way + .way { border-left: 1.5px solid var(--text); }
.way__code { justify-self: start; padding: 4px 8px; background: var(--terra); color: var(--terra-ink); font: 500 10px/1.2 var(--font-mono); text-transform: uppercase; letter-spacing: .12em; }
.way h3 { font-size: 26px; font-weight: 500; }
.way__note { padding-top: 12px; border-top: 1px dashed var(--line-strong); color: var(--text-2); font-size: 15px; }
.spec-list { border: 1.5px solid var(--text); background: var(--surface); }
.spec-list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 16px; }
.spec-list li + li { border-top: 1px solid var(--line); }
.spec-list span { font: 500 11px/1 var(--font-mono); color: var(--terra); }
.cta-panel { padding: 26px; background: #2b211b; color: #efe4d4; box-shadow: 8px 8px 0 var(--terra); }
.cta-panel__title { font: 500 25px/1.15 var(--font); }
.cta-panel p { margin: 10px 0 18px; opacity: .75; }

@media (max-width: 1080px) {
  .article__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { position: static; margin-bottom: 30px; }
  .toc ol { display: grid; grid-template-columns: 1fr 1fr; }
  .toc li + li { border-top: 0; }
  .toc li { border-bottom: 1px solid var(--line); }
}
@media (max-width: 900px) {
  .posts--3 { grid-template-columns: 1fr 1fr; }
  .post--featured { grid-template-columns: 1fr; }
  .post--featured .post__cover { min-height: 0; aspect-ratio: 16 / 9; border-right: 0; border-bottom: 1.5px solid var(--text); }
  .post--featured .post__body { padding: 24px; }
  .split { grid-template-columns: 1fr; }
  .ways { grid-template-columns: 1fr; }
  .way + .way { border-left: 0; border-top: 1.5px solid var(--text); }
}
@media (max-width: 639px) {
  .section__head--row { flex-direction: column; align-items: flex-start; }
  .posts, .posts--3 { grid-template-columns: 1fr; }
  .post--row { grid-template-columns: 110px 1fr; }
  .post--row .post__title { font-size: 17px; }
  .cover--hero { aspect-ratio: 4 / 3; }
  .toc ol { grid-template-columns: 1fr; }
  .prose { font-size: 17px; }
  .sheet-table table { font-size: 13px; }
  .sheet-table th, .sheet-table td { padding: 9px 8px; }
  .cta-box { flex-direction: column; align-items: stretch; }
  .conditions { grid-template-columns: 1fr; }
  .spec-note div { flex-direction: column; gap: 2px; }
  .mini-plan--lg { width: 46%; }
}