/* «По рецепту» — кухни на заказ, демо. Мир: современная кулинарная книга.
   Бумага, тушь и поля глав: свёкла, укроп, желток, капустный, камень. */
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/alegreya-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/alegreya-lat.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: 'Alegreya'; font-style: normal; font-weight: 400 900; font-display: swap; src: url(../fonts/alegreya-ext.woff2) format('woff2'); unicode-range: U+20A0-20AB, U+20AD-20C4; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/alegreya-i-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Alegreya'; font-style: italic; font-weight: 400 700; font-display: swap; src: url(../fonts/alegreya-i-lat.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: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/raleway-cyr.woff2) format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/raleway-lat.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: 'Raleway'; font-style: normal; font-weight: 400 800; font-display: swap; src: url(../fonts/raleway-ext.woff2) format('woff2'); unicode-range: U+20A0-20AB, U+20AD-20C4; }

:root {
  --bum: #FBFBF8;
  --bum-2: #F2F1EB;
  --tush: #211B1E;
  --tush-2: #5B4F55;
  --svekla: #7B1E43;
  --svekla-t: #5C1331;
  --svekla-sv: #F3D9E2;
  --ukrop: #3F6A35;
  --ukrop-sv: #E2ECDA;
  --zheltok: #F0B429;
  --zheltok-sv: #FCEFC9;
  --kapusta: #DDE8CF;
  --kvarc: #E7E3DD;
  --lin: rgba(33, 27, 30, .13);
  --ser: 'Alegreya', 'Georgia', serif;
  --san: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --kt: 64px;
  --poly: clamp(20px, 7vw, 112px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html.okno-open { overflow: hidden; }
body { margin: 0; background: var(--bum) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='z'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .13 0 0 0 0 .1 0 0 0 0 .12 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23z)'/%3E%3C/svg%3E"); color: var(--tush); font: 400 19px/1.5 var(--ser); font-variant-numeric: lining-nums; }
::selection { background: var(--svekla); color: var(--bum); }
img, svg { display: block; max-width: 100%; }
a { color: var(--svekla); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--svekla-t); }
:focus-visible { outline: 3px solid var(--zheltok); outline-offset: 3px; border-radius: 4px; }
button { font: inherit; color: inherit; cursor: pointer; }
h1, h2, h3 { margin: 0; text-wrap: balance; }
p { margin: 0; }
[hidden] { display: none !important; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 99; background: var(--tush); color: var(--bum); padding: 10px 16px; }
.skip:focus { left: 12px; top: 12px; }
.skip:hover { color: var(--bum); }
.ask { text-decoration: underline dashed 1.5px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); text-underline-offset: 4px; }
.ask-key { text-decoration: underline dashed 1.5px; text-underline-offset: 3px; }

/* ---------- плашка демо ---------- */
.demo { background: var(--tush); color: #EDE6E9; font: 500 13px/1.4 var(--san); padding: 7px 24px; text-align: center; }
.demo-s { display: none; }

/* ---------- колонтитул ---------- */
.kolontitul { position: sticky; top: 0; z-index: 40; height: var(--kt); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 0 var(--poly); background: color-mix(in srgb, var(--bum) 94%, transparent); backdrop-filter: blur(8px); box-shadow: 0 1px 0 var(--lin); }
.znak { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--tush); justify-self: start; }
.znak-i { width: 22px; height: 32px; flex: none; }
.znak-i path:first-child { fill: var(--svekla); }
.znak-t { stroke: var(--bum); stroke-width: 1.6; fill: none; stroke-linecap: round; }
.znak-n { font: 800 22px/1 var(--ser); letter-spacing: -.01em; }
.znak-s { font: 500 13px/1 var(--san); color: var(--tush-2); padding-left: 10px; margin-left: 2px; border-left: 1px solid var(--lin); }
.kt-glava { font: italic 400 18px/1 var(--ser); color: var(--tush-2); display: flex; gap: 14px; align-items: baseline; }
.kt-str { font: 600 13px/1 var(--san); font-style: normal; color: var(--svekla); }
.kt-act { justify-self: end; display: flex; align-items: center; gap: 10px; }
.kt-ogl { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 10px 12px; border-radius: 8px; font: 600 15px/1 var(--san); }
.kt-ogl svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.kt-ogl:hover { background: var(--bum-2); }

/* ---------- кнопки ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 14px 26px; border: 0; border-radius: 8px; background: var(--svekla); color: var(--bum); font: 700 16px/1.15 var(--san); text-decoration: none; text-align: center; box-shadow: 0 6px 18px -8px rgba(123, 30, 67, .55); transition: background .2s, box-shadow .2s, transform .2s cubic-bezier(.2, .8, .2, 1); }
.btn:hover { background: var(--svekla-t); color: var(--bum); transform: translateY(-1px); box-shadow: 0 10px 22px -10px rgba(123, 30, 67, .7); }
.btn:active { transform: translateY(0); }
.btn:disabled { background: #E6E0E3; color: #6A5E64; box-shadow: none; cursor: not-allowed; transform: none; }
.btn-s { min-height: 42px; padding: 10px 18px; font-size: 15px; }
.btn-m { display: none; }
.lnk { font: 700 16px/1 var(--san); color: var(--tush); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 6px; }

/* ---------- вырубка глав на обрезе ---------- */
.vyrubka { position: fixed; right: 0; top: calc(var(--kt) + 24px); bottom: 24px; z-index: 30; display: flex; align-items: center; pointer-events: none; }
.vyrubka ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; pointer-events: auto; }
.vyrubka a { display: block; width: 42px; padding: 12px 0 12px 12px; writing-mode: vertical-rl; transform: rotate(180deg) translateX(-12px); background: var(--c); color: var(--t, var(--bum)); font: 700 12.5px/30px var(--san); text-align: center; text-decoration: none; border-radius: 0 7px 7px 0; box-shadow: 2px 0 8px -4px rgba(0, 0, 0, .35); transition: transform .25s cubic-bezier(.2, .8, .2, 1); }
.vyrubka a:hover, .vyrubka a.on { transform: rotate(180deg); color: var(--t, var(--bum)); }

/* ---------- разворот (первый экран) ---------- */
.razvorot { position: relative; display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); min-height: calc(100svh - var(--kt) - 34px); scroll-margin-top: var(--kt); }
.podacha { position: relative; margin: 0; background: radial-gradient(120% 70% at 50% 18%, #9B2E59 0%, var(--svekla) 52%, #5A1230 100%); display: flex; flex-direction: column; justify-content: flex-start; overflow: clip; }
.podacha::after { content: ''; position: absolute; inset: 0 0 0 auto; width: 56px; background: linear-gradient(to left, rgba(20, 4, 11, .38), transparent); pointer-events: none; }
.podacha-fon { position: sticky; top: var(--kt); height: calc(100svh - var(--kt) - 34px); display: flex; align-items: flex-end; justify-content: center; padding: 40px 6% 92px; }
.kuhnya { width: 100%; height: auto; overflow: visible; }
#kuhnya-hero { max-height: 100%; }
.podacha figcaption { position: absolute; left: 0; bottom: 0; z-index: 1; color: #F1DCE5; font: 400 15px/1.45 var(--san); padding: 0 6% 24px 56px; max-width: 70ch; }
.podacha figcaption em { font: italic 400 17px/1.4 var(--ser); color: var(--bum); }
.folio { position: absolute; bottom: 22px; font: 600 13px/1 var(--san); color: var(--tush-2); }
.folio-l { left: 24px; color: #E9C9D6; }
.folio-r { right: 34px; }
.recept { position: relative; padding: clamp(24px, 3.4vh, 56px) clamp(28px, 5vw, 84px) 64px clamp(28px, 4.4vw, 72px); background: linear-gradient(to right, rgba(33, 27, 30, .1), transparent 48px), var(--bum); display: flex; flex-direction: column; gap: 15px; }
.recept h1 { font: 900 clamp(44px, 4.3vw, 72px)/.96 var(--ser); letter-spacing: -.015em; }
.h-dl { color: var(--svekla); font-variant-numeric: tabular-nums; }
.lid { font-size: 19px; line-height: 1.4; max-width: 40ch; color: var(--tush); }
.meta { list-style: none; margin: 0; padding: 12px 0; display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px 28px; border-block: 1px solid var(--lin); }
.meta li { display: flex; gap: 10px; align-items: flex-start; font: 500 14px/1.3 var(--san); color: var(--tush-2); }
.meta svg { width: 24px; height: 24px; flex: none; fill: none; stroke: var(--svekla); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.meta b { display: block; font: 700 17px/1.2 var(--san); color: var(--tush); font-variant-numeric: tabular-nums; }
.porcii { display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 6px 18px; }
.porcii-z { font: 700 14px/1 var(--san); }
.porcii-n { grid-column: 3; font: italic 400 15px/1.35 var(--ser); color: var(--tush-2); }
.stepper { display: inline-flex; align-items: center; gap: 4px; background: var(--bum-2); border-radius: 999px; padding: 4px; }
.st-b { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--bum); color: var(--svekla); font: 600 24px/1 var(--san); box-shadow: 0 1px 3px rgba(33, 27, 30, .18); transition: background .15s, transform .15s; }
.st-b:hover:not(:disabled) { background: var(--svekla); color: var(--bum); }
.st-b:active:not(:disabled) { transform: scale(.94); }
.st-b:disabled { color: #BBB0B4; cursor: not-allowed; box-shadow: none; }
.st-v { min-width: 3.6em; text-align: center; font: 800 26px/1 var(--ser); font-variant-numeric: tabular-nums; }

/* замены */
.zameny { display: flex; flex-wrap: wrap; gap: 14px 34px; }
.zam-t { font: 600 14px/1.3 var(--san); color: var(--tush-2); margin-bottom: 8px; }
.zam-t b { color: var(--tush); font-weight: 700; }
.zam-o { display: flex; flex-wrap: wrap; gap: 8px; }
.ch { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 14px; border: 1.5px solid var(--lin); border-radius: 999px; background: var(--bum); font: 600 14px/1 var(--san); transition: border-color .15s, background .15s; }
.ch:hover { border-color: var(--tush-2); }
.ch[aria-checked="true"] { background: var(--tush); border-color: var(--tush); color: var(--bum); }
.ch i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(33, 27, 30, .2); flex: none; }
.recept .ch-sw { padding: 5px; min-height: 0; border-radius: 50%; }
.recept .ch-sw i { width: 28px; height: 28px; }
.recept .ch-sw[aria-checked="true"] { background: var(--bum); border-color: var(--svekla); box-shadow: 0 0 0 2px var(--svekla); }

/* ингредиенты */
.ingr { list-style: none; margin: 0; padding: 0; }
.in { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 11px 0; border-bottom: 1px solid var(--lin); }
.in-q { font: 700 14px/1.3 var(--san); font-variant-numeric: tabular-nums; color: var(--tush); }
.in-n { position: relative; padding-left: 18px; font-size: 17px; line-height: 1.35; }
.in-n::before { content: ''; position: absolute; left: 0; top: .42em; width: 9px; height: 9px; border-radius: 50%; background: var(--ukrop); }
.in-n b { font-weight: 700; }
.in-n span { font: 400 14px/1.4 var(--san); color: var(--tush-2); }
.in-p { font: 700 15px/1.3 var(--san); font-variant-numeric: tabular-nums; white-space: nowrap; text-align: right; }
.in-o .in-n::before { background: none; box-shadow: inset 0 0 0 2px var(--zheltok); }
.in-s .in-n::before { background: none; border: 1.5px dashed #9A8E93; }
.in-o, .in-s { color: var(--tush-2); }
.in-o .in-n b, .in-s .in-n b { font-weight: 600; }
.in-o .in-p, .in-s .in-p { font: italic 400 15px/1.3 var(--ser); color: var(--tush-2); }
.in-w .in-n b { color: var(--svekla); }
.ingr-k .in { padding: 7px 0; }
.ingr-k .in-q { display: none; }
.ingr-k .in { grid-template-columns: minmax(0, 1fr) auto; }
.itog { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font: 600 15px/1.3 var(--san); color: var(--tush-2); }
.itog b[data-r="itog"] { font: 900 32px/1 var(--ser); color: var(--svekla); font-variant-numeric: tabular-nums; }
.itog-m { font-size: 14px; }
.itog-m b { color: var(--tush); }
.cta { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 26px; margin-top: 4px; }

/* ---------- главы ---------- */
.glava { scroll-margin-top: var(--kt); }
.pole { padding: clamp(64px, 9vw, 112px) var(--poly) clamp(40px, 5vw, 64px); color: var(--bum); }
.pole h2 { font: 900 clamp(42px, 5.6vw, 84px)/1 var(--ser); letter-spacing: -.015em; margin-bottom: 20px; }
.pole p { font-size: 21px; line-height: 1.45; max-width: 58ch; opacity: .94; }
.pole-svekla { background: var(--svekla); }
.pole-ukrop { background: var(--ukrop); }
.pole-zheltok { background: var(--zheltok); color: var(--tush); }
.pole-kapusta { background: var(--kapusta); color: var(--tush); }
.pole-kvarc { color: var(--tush); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 400' preserveAspectRatio='none'%3E%3Cg fill='none' stroke='%239C948F' stroke-linecap='round'%3E%3Cpath d='M-20 300C180 250 260 330 430 260S690 120 860 170 1080 90 1230 40' stroke-width='2.2' opacity='.28'/%3E%3Cpath d='M300 420C380 330 520 300 610 330S760 250 900 300' stroke-width='1.2' opacity='.2'/%3E%3Cpath d='M700 -10C760 60 820 70 900 60S1060 130 1220 120' stroke-width='1.4' opacity='.2'/%3E%3Cpath d='M-10 90C90 120 150 70 250 100S380 60 470 80' stroke-width='.9' opacity='.18'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat, radial-gradient(90% 120% at 20% 0%, #F4F2EE, var(--kvarc)); box-shadow: inset 0 -6px 0 rgba(33, 27, 30, .06); }
.pole-marker { color: var(--tush); padding-bottom: 8px; }
.pole-marker h2 span { background: linear-gradient(transparent 52%, var(--zheltok) 52%, var(--zheltok) 90%, transparent 90%); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 .08em; }
.list { position: relative; padding: clamp(40px, 5vw, 72px) var(--poly) 88px; }
.list > .folio { right: var(--poly); bottom: 32px; }
.h3 { font: 800 26px/1.15 var(--ser); margin-bottom: 14px; }
.pr { color: var(--tush-2); font-size: 17px; margin-bottom: 18px; max-width: 40ch; }
.zametka { font: italic 400 16px/1.45 var(--ser); color: #5E4511; max-width: 62ch; margin-top: 18px; padding: 12px 16px; background: var(--zheltok-sv); border-radius: 4px 14px 14px 14px; }

/* состав */
.sostav { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.sostav-l { position: sticky; top: calc(var(--kt) + 24px); display: flex; flex-direction: column; gap: 18px; }
.pole-zam { font: 600 14px/1.4 var(--san); color: var(--svekla); background: var(--svekla-sv); padding: 12px 14px; border-radius: 8px; }
.itog-b { margin-top: 18px; }
.itog-b b[data-r="itog"] { font-size: 40px; }
.legenda { list-style: none; margin: 18px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; font: 500 13.5px/1.3 var(--san); color: var(--tush-2); }
.legenda li { display: flex; align-items: center; gap: 8px; }
.lg { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lg-v { background: var(--ukrop); }
.lg-o { box-shadow: inset 0 0 0 2px var(--zheltok); }
.lg-s { border: 1.5px dashed #9A8E93; }
.oplata { margin-top: 64px; }
.opl { list-style: none; margin: 0; padding: 0; max-width: 760px; }
.opl .in-q { font: 800 20px/1.2 var(--ser); color: var(--svekla); }

/* подготовка */
.podg { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 28px 48px; align-items: start; }
.podg-opc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 18px 32px; padding-bottom: 8px; }
.stena { margin: 0; background: var(--ukrop-sv); border-radius: 14px; padding: 18px 18px 14px; position: sticky; top: calc(var(--kt) + 20px); }
.stena-pere { display: inline-flex; background: var(--bum); border-radius: 999px; padding: 4px; margin-bottom: 8px; box-shadow: 0 1px 2px rgba(33, 27, 30, .12); }
.pere { border: 0; background: none; padding: 9px 16px; border-radius: 999px; font: 700 14px/1 var(--san); color: var(--tush-2); }
.pere[aria-pressed="true"] { background: var(--ukrop); color: var(--bum); }
.stena figcaption { font: italic 400 14.5px/1.4 var(--ser); color: var(--tush-2); margin-top: 8px; }
.tochki { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tochki li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; font-size: 16.5px; line-height: 1.4; }
.tc-n { width: 28px; height: 28px; border-radius: 50%; background: var(--tush); color: var(--bum); font: 700 13px/28px var(--san); text-align: center; }
.mk-g .tc-n { background: var(--zheltok); color: var(--tush); }
.tochki em { display: inline-block; font: 600 12.5px/1.3 var(--san); font-style: normal; color: var(--ukrop); background: var(--ukrop-sv); padding: 2px 8px; border-radius: 999px; margin-left: 4px; vertical-align: 1px; }
.konflikt { margin-top: 18px; font: 600 15px/1.45 var(--san); background: var(--zheltok-sv); padding: 14px 16px; border-radius: 10px; }
.podg-dop { margin-top: 64px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.podg-dop p + p { margin-top: 12px; }
.podg-dop p { font-size: 17.5px; }

/* рисунок кухни */
.kuhnya .fs { stroke: rgba(33, 27, 30, .16); stroke-width: 2; }
.kuhnya .ru { fill: #3A3437; }
.kuhnya .cok { fill: #2D2629; }
.kuhnya .hol { fill: #E4E7E9; stroke: rgba(33, 27, 30, .2); stroke-width: 3; }
.kuhnya .hol-l { stroke: rgba(33, 27, 30, .22); stroke-width: 4; }
.kuhnya .duh { fill: #1E1B1D; }
.kuhnya .duh-o { fill: #3C383B; }
.kuhnya .stl { stroke: rgba(33, 27, 30, .2); stroke-width: 2; }
.kuhnya .stl-zh { stroke: #9A949A; stroke-width: 3; opacity: .55; fill: none; }
.kuhnya .stl-bl { stroke: #fff; stroke-opacity: .55; stroke-width: 4; }
.kuhnya .vyt { fill: url(#NZ); stroke: rgba(33, 27, 30, .25); stroke-width: 3; }
.kuhnya .vyt-t { fill: url(#NZ); stroke: rgba(33, 27, 30, .18); stroke-width: 3; }
.kuhnya .vyt-sv { stroke: #FFE7A8; stroke-width: 10; stroke-linecap: round; opacity: .9; }
.kuhnya .kran { fill: none; stroke: #9DA3A8; stroke-width: 26; stroke-linecap: round; }
.kuhnya .kas { fill: var(--zheltok); }
.kuhnya .kas-k { fill: #D29A15; }
.kuhnya .par path { fill: none; stroke: #fff; stroke-width: 12; stroke-linecap: round; opacity: .55; animation: par 4.5s ease-in-out infinite; }
.kuhnya .par path:nth-child(2) { animation-delay: -1.5s; }
.kuhnya .par path:nth-child(3) { animation-delay: -3s; }
@keyframes par { 0% { transform: translateY(30px); opacity: 0; } 30% { opacity: .55; } 100% { transform: translateY(-120px); opacity: 0; } }
.kuhnya .pol { fill: var(--svekla); }
.kuhnya .pol-p { stroke: var(--bum); stroke-width: 10; opacity: .8; }
.kuhnya .dos { fill: #C99B66; stroke: #A87A47; stroke-width: 4; }
.kuhnya .dos-o { fill: #EDE6DC; }
.kuhnya .luk { fill: #E3A33A; }
.kuhnya .gor { fill: #B4583B; }
.kuhnya .zel circle { fill: var(--ukrop); }
.kuhnya .zel circle:nth-child(2) { fill: #5A8A4B; }
/* рентген */
.xr .fs { fill-opacity: .2; stroke: rgba(33, 27, 30, .45); stroke-dasharray: 14 10; stroke-width: 3; }
.xr .fs-zh { display: none; }
.xr .ru, .xr .duh-o { opacity: .25; }
.xr .duh { fill-opacity: .18; }
.xr .hol { fill-opacity: .25; stroke-dasharray: 14 10; }
.xr .cok { fill-opacity: .35; }
.xr .stl { fill-opacity: .45; }
.xr .vyt, .xr .vyt-t { opacity: .45; }
.xr .roz rect { fill: #fff; stroke: var(--tush); stroke-width: 6; }
.xr .roz circle { fill: var(--tush); }
.xr .tr-h { fill: none; stroke: #C2412D; stroke-width: 22; stroke-linecap: round; }
.xr .tr-g { fill: none; stroke: #2F6FB5; stroke-width: 22; stroke-linecap: round; }
.xr .tr-k { fill: none; stroke: #7C7577; stroke-width: 44; stroke-linecap: round; }
.xr .tr-v { fill: none; stroke: #9AA0A4; stroke-width: 70; stroke-linejoin: round; opacity: .55; }
.xr .vent { fill: #fff; stroke: var(--tush); stroke-width: 6; }
.xr .tr-gaz { fill: none; stroke: #E8B10E; stroke-width: 34; stroke-linejoin: round; }
.xr .tr-gaz-s { fill: none; stroke: #E8B10E; stroke-width: 12; stroke-dasharray: 26 14; }
.xr .sch { fill: #F6E7B0; stroke: var(--tush); stroke-width: 6; }
.xr .kr-g { fill: var(--svekla); }
.mk circle { fill: var(--tush); stroke: var(--bum); stroke-width: 10; }
.mk text { fill: var(--bum); font: 700 100px var(--san); text-anchor: middle; dominant-baseline: central; }
.mk-g circle { fill: var(--zheltok); }
.mk-g text { fill: var(--tush); }

/* время */
.vr-svod { font: 400 clamp(22px, 2.2vw, 30px)/1.4 var(--ser); max-width: 46ch; margin-bottom: 48px; }
.vr-svod b { font-weight: 800; color: var(--svekla); white-space: nowrap; }
.shagi { list-style: none; margin: 0; padding: 0; columns: 2 420px; column-gap: 56px; }
.sh { break-inside: avoid; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; padding: 0 0 26px; position: relative; }
.sh::before { content: ''; position: absolute; left: 27px; top: 50px; bottom: 4px; border-left: 2px dotted rgba(123, 30, 67, .35); }
.sh-n { font: 900 44px/1 var(--ser); color: var(--svekla); text-align: center; font-variant-numeric: tabular-nums; }
.sh-p .sh-n { color: var(--svekla); opacity: .75; }
.sh-h { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; flex-wrap: wrap; font-size: 19px; line-height: 1.3; }
.sh-h time { font: 700 14px/1.3 var(--san); color: var(--svekla); white-space: nowrap; }
.sh-m { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sh-m span { font: 600 12.5px/1 var(--san); padding: 6px 9px; border-radius: 999px; background: var(--bum-2); color: var(--tush-2); }
.sh-m .sh-home { background: var(--ukrop-sv); color: var(--ukrop); }
.sh-m .sh-zh { background: var(--zheltok-sv); color: #7A5806; }
.sh-t { font-size: 16.5px; line-height: 1.45; color: var(--tush); }

/* столешница */
.stol-tab { display: grid; border-top: 1px solid var(--lin); }
.tb-r { display: grid; grid-template-columns: 1.1fr .8fr 1.6fr .7fr; gap: 16px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--lin); font: 500 15.5px/1.35 var(--san); border-radius: 8px; }
.tb-h { font: 700 13px/1.3 var(--san); color: var(--tush-2); padding-block: 12px; }
.tb-r span:first-child { display: flex; align-items: center; gap: 10px; font: 700 18px/1.2 var(--ser); }
.tb-h span:first-child { font: 700 13px/1.3 var(--san); }
.tb-r i { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(33, 27, 30, .25); }
.tb-on { background: var(--kapusta); }
.stol-shagi { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stol-shagi figure { margin: 0; }
.vin { width: 100%; height: auto; background: var(--bum-2); border-radius: 12px; margin-bottom: 14px; }
.v-korp { fill: #9DAF98; }
.v-lin { stroke: #3C383B; stroke-width: 2; }
.v-shov { stroke: rgba(33, 27, 30, .35); stroke-width: 1.5; }
.v-shab { stroke: #C99B66; stroke-width: 5; stroke-linecap: round; fill: none; }
.v-moj { fill: none; stroke: var(--svekla); stroke-width: 2.5; stroke-dasharray: 5 4; }
.v-kam { fill: #EFEDE9; stroke: rgba(33, 27, 30, .3); stroke-width: 1.5; }
.v-zhila { stroke: #A39DA2; stroke-width: 1.5; fill: none; }
.v-vrez { fill: #8E959A; }
.stol-shagi figcaption { font-size: 16.5px; line-height: 1.45; }
.stol-shagi figcaption b { display: block; font: 800 19px/1.3 var(--ser); margin-bottom: 4px; }
.stol-dop { margin-top: 44px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.stol-dop p { font-size: 17px; }

/* подача */
#podacha .list { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 32px 64px; align-items: start; }
.den { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 22px; }
.den li { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; font-size: 17.5px; line-height: 1.45; }
.den time { font: 800 22px/1.1 var(--ser); color: var(--svekla); font-variant-numeric: tabular-nums; }
.den li:last-child time { font: italic 700 18px/1.2 var(--ser); }
.den b { font-weight: 700; }
.priemka { background: var(--svekla-sv); border-radius: 14px; padding: 26px 26px 22px; }
.pr-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.pr-list label { display: grid; grid-template-columns: 26px 1fr; gap: 10px; align-items: start; padding: 7px 0; font: 500 15px/1.4 var(--san); cursor: pointer; }
.pr-list input, .soglasiya input, .zay-ch input { appearance: none; -webkit-appearance: none; margin: 1px 0 0; width: 22px; height: 22px; border: 2px solid var(--svekla); border-radius: 5px; background: var(--bum); display: grid; place-items: center; cursor: pointer; }
.pr-list input::after, .soglasiya input::after { content: ''; width: 11px; height: 6px; border: solid var(--bum); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.pr-list input:checked, .soglasiya input:checked { background: var(--svekla); }
.pr-list input:checked::after, .soglasiya input:checked::after { opacity: 1; }
.pr-list input:checked + * { color: var(--tush-2); }
.pr-itog { margin-top: 14px; font: italic 400 16px/1.4 var(--ser); color: var(--svekla-t); }
.pr-itog.pr-ok { font-weight: 700; color: var(--ukrop); }
.bumagi { grid-column: 1 / -1; margin-top: 24px; }
.bum { list-style: none; margin: 0; padding: 0; columns: 2 380px; column-gap: 56px; }
.bum li { break-inside: avoid; display: flex; align-items: baseline; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--lin); font: 400 15px/1.45 var(--san); color: var(--tush-2); }
.bum b { flex: none; font: 800 19px/1.2 var(--ser); color: var(--tush); }

/* гарантия */
.hran { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 56px; align-items: center; }
.talon { position: relative; background: var(--bum); padding: 34px 36px 30px; border-radius: 6px; box-shadow: 0 18px 40px -22px rgba(33, 27, 30, .45), 0 1px 0 rgba(33, 27, 30, .1); -webkit-mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; mask: radial-gradient(circle 9px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat, radial-gradient(circle 9px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat; }
.talon-c { font: 700 22px/1 var(--ser); margin-bottom: 14px; }
.talon-c b { font: 900 96px/.9 var(--ser); color: var(--ukrop); margin-right: 8px; }
.talon p:not(.talon-z):not(.talon-c) { font-size: 17px; }
.talon-n { margin-top: 12px; color: var(--tush-2); }
.obrashenie { margin: 0; padding: 0; list-style: none; counter-reset: ob; display: flex; flex-direction: column; gap: 22px; }
.obrashenie li { counter-increment: ob; display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 14px; font-size: 18px; line-height: 1.45; }
.obrashenie li::before { content: counter(ob); font: 900 40px/1 var(--ser); color: var(--ukrop); text-align: center; }

/* если */
.esli { columns: 2 380px; column-gap: 56px; }
.esli p { break-inside: avoid; font-size: 17.5px; line-height: 1.5; margin-bottom: 22px; scroll-margin-top: calc(var(--kt) + 24px); }
.esli b { display: block; font: italic 700 20px/1.3 var(--ser); color: var(--svekla); margin-bottom: 4px; }
.esli p:target b { background: var(--zheltok-sv); }

/* финал */
.final { scroll-margin-top: var(--kt); background: radial-gradient(90% 80% at 75% 30%, #9B2E59 0%, var(--svekla) 50%, #5A1230 100%); color: var(--bum); padding: clamp(72px, 9vw, 128px) var(--poly); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 40px 56px; align-items: end; }
.final-t { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.final h2 { font: 900 clamp(44px, 6vw, 92px)/.98 var(--ser); letter-spacing: -.015em; max-width: 14ch; }
.final-r { font: italic 400 22px/1.4 var(--ser); color: #FFE1A3; max-width: 60ch; }
.final-t > p:not(.final-r) { font-size: 19px; max-width: 54ch; opacity: .92; }
.btn-sv { background: var(--bum); color: var(--svekla); box-shadow: 0 10px 24px -12px rgba(0, 0, 0, .5); }
.btn-sv:hover { background: #fff; color: var(--svekla-t); }

/* обложка */
.oblozhka { background: var(--tush); color: #CFC3C8; padding: 48px var(--poly) 56px; display: grid; gap: 16px; font: 400 14px/1.55 var(--san); }
.ob-znak { font: 800 22px/1 var(--ser); color: var(--bum); }
.oblozhka > p:nth-child(2) { max-width: 92ch; }
.ob-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.oblozhka a { color: #F2DDE6; }
.oblozhka a:hover { color: #fff; }

/* окна */
.okno { border: 0; padding: 0; background: var(--bum); color: var(--tush); border-radius: 16px; width: min(600px, calc(100vw - 32px)); max-height: calc(100svh - 48px); box-shadow: 0 30px 80px -20px rgba(33, 27, 30, .6); }
.okno::backdrop { background: rgba(33, 27, 30, .55); backdrop-filter: blur(3px); }
.okno-in { position: relative; padding: 36px 36px 30px; }
.okno-x { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--bum-2); display: grid; place-items: center; }
.okno-x svg { width: 20px; height: 20px; fill: none; stroke: var(--tush); stroke-width: 2.2; stroke-linecap: round; }
.okno-x:hover { background: var(--kapusta); }
.okno h2 { font: 900 34px/1.05 var(--ser); margin-bottom: 18px; padding-right: 48px; }
.ogl { width: min(860px, calc(100vw - 32px)); }
.ogl-gl { list-style: none; margin: 0 0 28px; padding: 0; columns: 2 300px; column-gap: 40px; }
.ogl-gl li { display: flex; align-items: baseline; gap: 8px; padding: 6px 0; font-size: 19px; break-inside: avoid; }
.ogl-gl li::after { content: ''; order: 1; flex: 1; border-bottom: 2px dotted rgba(33, 27, 30, .3); transform: translateY(-4px); }
.ogl-gl a { color: var(--tush); text-decoration: none; }
.ogl-gl a:hover { color: var(--svekla); text-decoration: underline; }
.ogl-gl span { order: 2; font: 700 14px/1 var(--san); color: var(--svekla); }
.ogl h3 { font: 800 22px/1.2 var(--ser); margin-bottom: 12px; }
.ogl-uk { list-style: none; margin: 0; padding: 0; columns: 3 200px; column-gap: 32px; font: 500 14px/1.5 var(--san); color: var(--tush-2); }
.ogl-uk li { padding: 3px 0; break-inside: avoid; }
.ogl-uk a { color: var(--tush); }
.zay-demo { font: 700 13px/1.3 var(--san); color: #7A5806; background: var(--zheltok-sv); display: inline-block; padding: 6px 10px; border-radius: 6px; margin-bottom: 14px; }
.zay-f { display: flex; flex-direction: column; gap: 14px; }
.zay-rec { background: var(--kapusta); border-radius: 10px; padding: 12px 14px; font: italic 400 16px/1.4 var(--ser); }
.zay-rec span { display: block; font: 700 12.5px/1.3 var(--san); font-style: normal; color: var(--ukrop); margin-bottom: 2px; }
.pole-f { display: flex; flex-direction: column; gap: 6px; border: 0; margin: 0; padding: 0; }
.pole-f > span, .pole-f legend { font: 700 14px/1.2 var(--san); padding: 0; }
.pole-f input, .pole-f select, .pole-f textarea { font: 400 17px/1.3 var(--san); color: var(--tush); background: #fff; border: 1.5px solid rgba(33, 27, 30, .25); border-radius: 8px; padding: 12px 14px; min-height: 48px; }
.pole-f textarea { resize: vertical; min-height: 64px; }
.pole-f input:focus, .pole-f select:focus, .pole-f textarea:focus { outline: none; border-color: var(--svekla); box-shadow: 0 0 0 3px var(--svekla-sv); }
.pole-f input[aria-invalid="true"] { border-color: #B3261E; }
.zay-ch { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.zay-ch label { display: inline-flex; align-items: center; gap: 8px; font: 500 15px/1.2 var(--san); cursor: pointer; }
.zay-ch input { border-radius: 50%; width: 20px; height: 20px; }
.zay-ch input::after { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--bum); opacity: 0; }
.zay-ch input:checked { background: var(--svekla); }
.zay-ch input:checked::after { opacity: 1; }
.soglasiya { display: flex; flex-direction: column; gap: 10px; padding-top: 4px; }
.soglasiya label { display: grid; grid-template-columns: 24px 1fr; gap: 10px; font: 400 14px/1.45 var(--san); color: var(--tush-2); cursor: pointer; }
.soglasiya .sg-all { font-weight: 700; color: var(--tush); }
.soglasiya small { display: block; font-size: 12.5px; margin-top: 2px; }
.btn-f { width: 100%; }
.zay-pod { font: 500 13.5px/1.4 var(--san); color: var(--tush-2); }
.zay-ok p { font-size: 18px; margin-bottom: 22px; }

/* ---------- адаптив ---------- */
@media (max-width: 1099px) {
  .vyrubka { display: none; }
  .podg-dop, .stol-dop { grid-template-columns: 1fr 1fr; }
  .bum { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1100px) {
  .list, .pole, .final { padding-right: calc(var(--poly) + 40px); }
}
@media (max-width: 899px) {
  .razvorot { grid-template-columns: 1fr; min-height: 0; }
  .podacha::after { display: none; }
  .podacha-fon { position: static; height: auto; padding: 28px 4% 0; flex-direction: column; align-items: stretch; }
  #kuhnya-hero { max-height: 52svh; }
  .podacha figcaption { position: relative; padding: 12px 16px 18px; font-size: 14px; }
  .podacha figcaption em { font-size: 15.5px; }
  .folio-l { display: none; }
  .recept { background: var(--bum); padding: 30px 20px 56px; gap: 18px; }
  .folio-r { right: 20px; }
  .sostav, .podg, .hran, #podacha .list { grid-template-columns: 1fr; gap: 32px; }
  .sostav-l, .stena { position: static; }
  .stol-shagi { grid-template-columns: 1fr; }
  .final { grid-template-columns: 1fr; }
  .kt-glava { display: none; }
  .kolontitul { grid-template-columns: 1fr auto; }
}
@media (max-width: 640px) {
  :root { --kt: 58px; }
  body { font-size: 18px; }
  .demo-l { display: none; }
  .demo-s { display: inline; }
  .demo { font-size: 12.5px; padding: 6px 16px; }
  .kolontitul { padding: 0 12px 0 16px; gap: 8px; }
  .znak-s { display: none; }
  .znak-n { font-size: 20px; }
  .kt-ogl span { display: none; }
  .kt-ogl { padding: 10px; }
  .btn-l { display: none; }
  .btn-m { display: inline; }
  .btn-s { padding: 10px 16px; }
  .meta { grid-template-columns: 1fr; gap: 10px; }
  .porcii { grid-template-columns: auto auto; }
  .porcii-n { grid-column: 1 / -1; }
  .pole { padding: 56px 20px 36px; }
  .pole p { font-size: 18.5px; }
  .list { padding: 36px 20px 76px; }
  .list > .folio { right: 20px; }
  .in { grid-template-columns: 58px minmax(0, 1fr); }
  .in-p { grid-column: 2; text-align: left; }
  .ingr-k .in { grid-template-columns: minmax(0, 1fr) auto; }
  .ingr-k .in-p { grid-column: auto; text-align: right; }
  .podg-dop, .stol-dop { grid-template-columns: 1fr; gap: 28px; }
  .tb-r { grid-template-columns: 1fr 1fr; gap: 6px 12px; }
  .tb-h { display: none; }
  .tb-r span:nth-child(3) { grid-column: 1 / -1; color: var(--tush-2); font-size: 14px; }
  .bum { grid-template-columns: 1fr; }
  .den li { grid-template-columns: 1fr; gap: 2px; }
  .talon { padding: 28px 26px 24px; }
  .okno { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; border-radius: 0; margin: 0; }
  .okno-in { padding: 24px 20px 32px; }
  .okno h2 { font-size: 30px; }
  .esli { columns: 1; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kuhnya .par path { animation: none; opacity: .4; }
  .btn, .vyrubka a, .st-b { transition: none; }
}

/* ---------- правовые страницы ---------- */
.doc { padding: clamp(40px, 6vw, 80px) var(--poly) 96px; }
.doc-in { max-width: 74ch; }
.doc h1 { font: 900 clamp(36px, 4.4vw, 60px)/1.02 var(--ser); margin: 8px 0 10px; }
.doc h2 { font: 800 26px/1.2 var(--ser); margin: 40px 0 12px; }
.doc h3 { font: 700 20px/1.3 var(--ser); margin: 24px 0 8px; }
.doc p, .doc li { font-size: 18px; line-height: 1.55; }
.doc p + p { margin-top: 12px; }
.doc ul, .doc ol { padding-left: 1.3em; margin: 10px 0; }
.doc li + li { margin-top: 6px; }
.doc .note { font: 500 15px/1.5 var(--san); background: var(--zheltok-sv); padding: 14px 16px; border-radius: 10px; color: var(--tush); }
.doc .ver { font: 600 14px/1.4 var(--san); color: var(--tush-2); }
.doc table { border-collapse: collapse; width: 100%; margin: 12px 0; font: 400 15px/1.45 var(--san); }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--lin); }
.doc-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 24px; font: 600 15px/1.3 var(--san); }
.doc-nav a[aria-current] { color: var(--tush); text-decoration: none; }
.kt-nazad { font: 600 15px/1 var(--san); color: var(--tush); text-decoration: none; padding: 10px 12px; border-radius: 8px; }
.kt-nazad:hover { background: var(--bum-2); color: var(--tush); }