@font-face { font-family: "PT Serif"; font-weight: 700; font-display: swap; src: url(/static/shrift/ptserif-700-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Serif"; font-weight: 700; font-display: swap; src: url(/static/shrift/ptserif-700-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-weight: 400; font-display: swap; src: url(/static/shrift/rubik-400-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Rubik"; font-weight: 400; font-display: swap; src: url(/static/shrift/rubik-400-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }
@font-face { font-family: "Rubik"; font-weight: 500; font-display: swap; src: url(/static/shrift/rubik-500-cyr.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Rubik"; font-weight: 500; font-display: swap; src: url(/static/shrift/rubik-500-lat.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+FEFF, U+FFFD; }

:root { --bg: #fbf8f3; --paper: #fff; --ink: #2a2522; --mut: #6f6156; --soft: #8a7b6c; --red: #9e2b25; --red2: #6e1a15; --line: #e8dfd2; --sand: #f3ece1; --frame: #d7c9b5; }
@media (prefers-color-scheme: dark) {
  :root { --bg: #1c1816; --paper: #241f1c; --ink: #eee6dc; --mut: #b9aa9b; --soft: #9c8d7e; --red: #e07a6c; --red2: #f09a8c; --line: #3a322c; --sand: #2c2521; --frame: #4a3f37; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 17.5px/1.7 Rubik, "Segoe UI", Arial, sans-serif; }
img { display: block; max-width: 100%; height: auto; }
a { color: var(--red); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--red2); }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
h1, h2, h3, .masthead .title { font-family: "PT Serif", Georgia, "Times New Roman", serif; font-weight: 700; }

.masthead { text-align: center; padding: 44px 16px 26px; border-bottom: 3px double var(--frame); background: var(--paper); }
.masthead .title { font-size: 46px; font-style: italic; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.tagline { margin: 4px 0 16px; color: var(--soft); font-size: 14px; letter-spacing: 0.18em; text-transform: uppercase; }
.masthead nav { font-size: 15px; color: var(--frame); }
.masthead nav a { color: var(--mut); text-decoration: none; }
.masthead nav a:hover, .masthead nav a[aria-current] { color: var(--red); }

.column { max-width: 700px; margin: 0 auto; padding: 30px 18px 48px; }
.teaser { padding: 22px 0 26px; border-bottom: 1px solid var(--line); }
.teaser img { border-radius: 4px; margin: 10px 0 14px; aspect-ratio: 3 / 2; object-fit: cover; }
.teaser h2 { margin: 2px 0 10px; font-size: 27px; line-height: 1.25; }
.teaser h2 a { color: var(--ink); text-decoration: none; }
.teaser h2 a:hover { color: var(--red); }
.teaser p { margin: 0 0 10px; }
.more { font-size: 14px; font-weight: 500; }
.meta { margin: 0; font-size: 12.5px; font-weight: 500; color: var(--red); text-transform: uppercase; letter-spacing: 0.1em; }

.box { margin-top: 36px; padding: 18px 22px; background: var(--sand); border-left: 4px solid var(--red); border-radius: 0 4px 4px 0; }
.box h3 { margin: 0 0 6px; font-size: 20px; }
.box p { margin: 0 0 8px; }
.small { font-size: 15px; color: var(--mut); }

.recipe h1, .column h1 { font-size: 36px; line-height: 1.2; margin: 6px 0 14px; }
.column h2 { font-size: 24px; margin: 30px 0 8px; }
.recipe .photo { margin: 18px 0 8px; border-radius: 4px; }
.facts { display: flex; flex-wrap: wrap; gap: 8px 12px; font-size: 14px; color: var(--mut); }
.facts span { background: var(--sand); padding: 3px 10px; border-radius: 999px; }
.recipe ul, .recipe ol { padding-left: 24px; }
.recipe li { margin-bottom: 6px; }
.recipe ol li::marker { color: var(--red); font-weight: 500; }
.tip { background: var(--paper); border: 1px dashed var(--frame); padding: 14px 18px; margin-top: 26px; border-radius: 4px; }
.back { margin-top: 34px; font-size: 15px; }

.razdel { list-style: none; padding: 0; margin: 8px 0 0; }
.razdel li { padding: 6px 0; border-bottom: 1px dotted var(--frame); }
.razdel li span { color: var(--soft); font-size: 14px; margin-left: 8px; }

.foot { text-align: center; color: var(--soft); font-size: 14px; padding: 24px 16px 40px; border-top: 1px solid var(--line); }
.foot a { color: var(--soft); }

.vhod p { margin: 0 0 12px; }
.vhod label { display: block; margin-bottom: 3px; font-size: 14px; color: var(--mut); }
.vhod input { width: 100%; padding: 9px 11px; border: 1px solid var(--frame); border-radius: 4px; background: var(--paper); color: var(--ink); font: inherit; }
.vhod input:focus { border-color: var(--red); outline: none; }
.vhod button { padding: 9px 24px; background: #9e2b25; color: #fff; border: 0; border-radius: 4px; font: inherit; font-weight: 500; font-size: 15px; cursor: pointer; }
.vhod button:hover { background: #6e1a15; }
.vhod button[disabled] { opacity: .6; cursor: default; }
.vhod-oshibka { color: var(--red); }
.vhod-oshibka:empty { display: none; }
.pole-oshibka { display: block; margin-top: 3px; color: var(--red); font-size: 13px; }
.vhod input[aria-invalid="true"] { border-color: var(--red); }

@media (max-width: 560px) {
  body { font-size: 16.5px; }
  .masthead .title { font-size: 36px; }
  .teaser h2 { font-size: 23px; }
  .recipe h1, .column h1 { font-size: 29px; }
}