/* ПЕЧЬ — подовая пекарня, Пятигорск. Демо CloudxBear.
   Идея: страница устроена как пекарский день. Слева — шкала времени от растопки
   до закрытия пода; уголёк на ней ползёт за прокруткой. Палитра собрана из
   материалов пекарни: мука, ржаная корка, уголь — плюс холодный чугун дверцы,
   который не даёт всему уйти в тёплую сепию. */

@font-face { font-family: "Bitter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/demo/cafe/static/fonts/bitter-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/demo/cafe/static/fonts/bitter-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("/demo/cafe/static/fonts/bitter-800-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Bitter"; font-style: normal; font-weight: 800;
  font-display: swap; src: url("/demo/cafe/static/fonts/bitter-800-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }

@font-face { font-family: "Plex"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexsans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexsans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexsans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexsans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexsans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "Plex"; font-style: normal; font-weight: 600;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexsans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }

@font-face { font-family: "PlexMono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexmono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "PlexMono"; font-style: normal; font-weight: 400;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexmono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }
@font-face { font-family: "PlexMono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexmono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116; }
@font-face { font-family: "PlexMono"; font-style: normal; font-weight: 500;
  font-display: swap; src: url("/demo/cafe/static/fonts/ibmplexmono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+2000-206F,U+2122,U+2212; }

:root {
  /* Тёплый беж и коричнево-чёрная тушь: страница должна вызывать аппетит,
     поэтому холодных серых в тексте нет — только оттенки корки и муки. */
  --flour: #F3E7D3;
  --flour-2: #E6D6BC;
  --char: #241A12;
  --char-2: #4B3A2A;
  --ember: #D8451B;
  --ember-soft: #F0A882;
  --iron: #7A6248;        /* подписи и метки — тёплый серо-коричневый */
  --iron-cold: #46505A;   /* холодный чугун остаётся только на дверце печи */
  --rye: #A8763E;
  --wheat: #EBC06A;

  --rail: 128px;
  --pad: clamp(20px, 4vw, 56px);
  --maxw: 1180px;
  --tick: cubic-bezier(.22,.61,.36,1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; overflow-x: hidden; }

/* Полосу прокрутки убираем: её работу выполняет шкала дня с угольком —
   она и показывает положение, и позволяет его менять. Прокрутка колесом,
   пальцем и клавиатурой при этом работает как обычно. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { width: 0; height: 0; }

/* Фактура страницы: волокно обёрточной бумаги в фоне и мучная пыль поверх.
   Оба слоя очень тихие — они задают материал, а не рисуют узор. */
body {
  background-color: var(--flour);
  /* Мягкие переходы вместо линий в один пиксель: жёсткие 1px-полосы не ложатся
     на дробный масштаб экрана и при прокрутке мерцают. */
  background-image:
    repeating-linear-gradient(96deg, rgba(122,98,72,.055) 0, transparent 2.5px, transparent 6px, rgba(122,98,72,.055) 8.5px),
    repeating-linear-gradient(4deg, rgba(168,118,62,.05) 0, transparent 3px, transparent 8px, rgba(168,118,62,.05) 11px);
  color: var(--char);
  font-family: "Plex", "Segoe UI", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-right: var(--rail);   /* шкала дня справа; слева висит кнопка ИИ-помощника */
}
body::before {   /* мука, осевшая на столе */
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    radial-gradient(circle at 12% 22%, rgba(255,255,255,.9) 0 1.1px, transparent 1.6px),
    radial-gradient(circle at 68% 9%,  rgba(255,255,255,.75) 0 1.4px, transparent 1.9px),
    radial-gradient(circle at 34% 71%, rgba(255,255,255,.8) 0 1px, transparent 1.5px),
    radial-gradient(circle at 87% 58%, rgba(255,255,255,.7) 0 1.3px, transparent 1.8px),
    radial-gradient(circle at 53% 41%, rgba(36,26,18,.055) 0 1.2px, transparent 1.7px);
  background-size: 190px 170px, 240px 210px, 160px 200px, 280px 230px, 210px 190px;
}
main, .cf-foot { position: relative; z-index: 1; }

img, svg { max-width: 100%; display: block; }
a { color: inherit; }
::selection { background: var(--ember); color: var(--flour); }
:focus-visible { outline: 3px solid var(--ember); outline-offset: 3px; }

/* ── Шкала дня: она же навигация ───────────────────────────────────────────
   Обрывается высоко над низом экрана: там висит кнопка ИИ-помощника. */
.cf-day {
  position: fixed; right: 0; top: 0;
  width: var(--rail); height: 100vh;
  padding: 24px 0 74px;
  display: flex; flex-direction: column; align-items: center;
  background: var(--char);
  color: var(--flour);
  z-index: 40;
}
.cf-day::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 150px;
  background: linear-gradient(to top, rgba(216,69,27,.5), transparent);
  pointer-events: none;
}
.cf-mark {
  font-family: "Bitter", Georgia, serif; font-weight: 800;
  font-size: 21px; letter-spacing: .12em; color: var(--flour);
  text-decoration: none; margin-bottom: 18px;
}
.cf-mark span { color: var(--ember); }

/* Переходы по страницам живут в рельсе, а не только в подвале. */
.cf-pages { display: grid; gap: 2px; width: 100%; padding: 0 12px 16px; }
.cf-pages a {
  font-family: "PlexMono", monospace; font-size: 10.5px; letter-spacing: .07em;
  text-transform: uppercase; text-decoration: none; text-align: center;
  color: rgba(242,237,230,.6); padding: 6px 2px; border: 1px solid transparent;
  transition: color .2s var(--tick), border-color .2s var(--tick);
}
.cf-pages a:hover { color: var(--flour); border-color: rgba(242,237,230,.28); }
.cf-pages a.is-here { color: var(--char); background: var(--wheat); border-color: var(--wheat); }
.cf-rail-sep { width: 46px; height: 1px; background: rgba(242,237,230,.2); margin-bottom: 14px; }

/* touch-action: none — иначе на телефоне палец прокручивает страницу
   вместо того, чтобы вести уголёк. */
.cf-scale { position: relative; flex: 1; width: 100%; touch-action: none; cursor: grab; }
.cf-scale:active { cursor: grabbing; }
.cf-scale-line { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(242,237,230,.16); }
/* Отступ слева ставит кружки часов ровно на линию — иначе уголёк едет по цифрам. */
.cf-hours { position: relative; z-index: 2; display: flex; flex-direction: column;
  justify-content: space-between; height: 100%; padding: 4px 0 4px calc(50% - 3.5px); }
.cf-hour {
  display: flex; align-items: center; gap: 15px;   /* зазор под уголёк, чтобы не накрывал цифры */
  font-family: "PlexMono", ui-monospace, monospace; font-size: 11.5px;
  color: rgba(242,237,230,.62); text-decoration: none;
  transition: color .25s var(--tick);
}
.cf-hour i { width: 7px; height: 7px; border-radius: 50%; background: rgba(242,237,230,.28);
  transition: background .25s var(--tick), transform .25s var(--tick); font-style: normal; }
.cf-hour:hover, .cf-hour.is-on { color: var(--flour); }
.cf-hour:hover i, .cf-hour.is-on i { background: var(--ember); transform: scale(1.5); }

/* Уголёк — ползунок: его можно тащить и двигать стрелками, страница едет следом. */
.cf-coal {
  position: absolute; left: 50%; top: 0; width: 19px; height: 19px;
  margin-left: -9.5px; border: none; padding: 0; border-radius: 50%;
  background: radial-gradient(circle at 34% 32%, #FFD9A0, var(--ember) 58%, #8C2708);
  box-shadow: 0 0 16px 4px rgba(216,69,27,.55);
  cursor: grab; touch-action: none; z-index: 4;
  will-change: transform;   /* двигается сам уголёк, а не перерисовывается шапка */
}
.cf-coal:hover { box-shadow: 0 0 20px 6px rgba(216,69,27,.75); }
.cf-coal:active, .cf-coal.is-dragging { cursor: grabbing; transform: scale(1.16); }
.cf-coal:focus-visible { outline: 3px solid var(--wheat); outline-offset: 3px; }

.cf-day-foot { font-family: "PlexMono", monospace; font-size: 10.5px;
  color: rgba(242,237,230,.55); margin-top: 16px; letter-spacing: .06em; }

/* ── Общие блоки ─────────────────────────────────────────────────────────── */
.cf-wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

.cf-kicker {
  font-family: "PlexMono", monospace; font-size: 12px; letter-spacing: .13em;
  text-transform: uppercase; color: var(--iron);
  display: flex; align-items: center; gap: 10px;
}
.cf-kicker::before { content: ""; width: 26px; height: 1px; background: var(--ember); }

h1, h2, h3 { font-family: "Bitter", Georgia, serif; font-weight: 800; line-height: 1.06;
  letter-spacing: -.015em; }
h2 { font-size: clamp(30px, 4.4vw, 50px); }
h3 { font-size: 20px; font-weight: 600; line-height: 1.2; }

.cf-sec { padding: clamp(64px, 9vw, 116px) 0; }
.cf-sec-head { display: flex; flex-direction: column; gap: 14px; margin-bottom: 44px; max-width: 660px; }
.cf-sec-head p { color: var(--char-2); }

/* ── Растопка: первый экран ──────────────────────────────────────────────── */
.cf-hero { position: relative; padding: clamp(56px, 8vw, 104px) 0 clamp(48px, 6vw, 88px); }
.cf-hero-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 5vw, 64px); align-items: end; }
.cf-hero h1 { font-size: clamp(44px, 8vw, 100px); margin: 18px 0 20px; }
.cf-hero h1 em { font-style: normal; color: var(--ember); }
.cf-lead { font-size: clamp(17px, 1.6vw, 20px); color: var(--char-2); max-width: 46ch; }

.cf-cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.cf-btn {
  font-family: "Plex", sans-serif; font-weight: 600; font-size: 15px;
  padding: 14px 26px; border-radius: 2px; border: 1.5px solid var(--char);
  text-decoration: none; display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
  background: transparent; color: var(--char);
  transition: transform .2s var(--tick), background .2s var(--tick), color .2s var(--tick);
}
.cf-btn-fill { background: var(--char); color: var(--flour); }
.cf-btn-fill:hover { background: var(--ember); border-color: var(--ember); transform: translateY(-2px); }
.cf-btn-line:hover { background: var(--char); color: var(--flour); transform: translateY(-2px); }

/* width обязателен: дети абсолютные, без него ширина схлопывается в ноль. */
.cf-mouth { position: relative; width: 100%; aspect-ratio: 4 / 4.3; }
.cf-mouth-arch {
  position: absolute; inset: 0;
  border-radius: 50% 50% 6px 6px / 62% 62% 6px 6px;
  background: radial-gradient(ellipse at 50% 88%, #7A2A0C 0%, #2A1B14 52%, var(--char) 100%);
  border: 3px solid var(--iron-cold);
  overflow: hidden;
}
.cf-mouth-glow {
  position: absolute; left: 50%; bottom: -14%; width: 78%; aspect-ratio: 1;
  transform: translateX(-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(255,171,84,.95), rgba(216,69,27,.5) 42%, transparent 70%);
  filter: blur(4px);
  animation: cf-breathe 5.5s ease-in-out infinite;
}
@keyframes cf-breathe { 0%,100% { opacity: .72; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.09); } }
.cf-loaf-row { position: absolute; left: 0; right: 0; bottom: 11%; display: flex;
  justify-content: center; gap: 5%; padding: 0 12%; }
.cf-loaf-row svg { width: 27%; filter: drop-shadow(0 5px 12px rgba(0,0,0,.45)); }
.cf-temp {
  position: absolute; right: -8px; top: 11%;
  background: var(--flour); border: 1.5px solid var(--char); border-radius: 2px;
  padding: 9px 13px; font-family: "PlexMono", monospace; font-size: 12.5px; line-height: 1.35;
}
.cf-temp b { display: block; font-size: 21px; font-weight: 500; }

.cf-next {
  margin-top: 40px; border-top: 1.5px solid var(--char); border-bottom: 1.5px solid var(--char);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.cf-next div { padding: 20px 22px 20px 0; }
.cf-next div + div { border-left: 1px solid rgba(36,26,18,.18); padding-left: 22px; }
.cf-next span { font-family: "PlexMono", monospace; font-size: 11.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--iron); display: block; margin-bottom: 6px; }
.cf-next b { font-family: "Bitter", serif; font-weight: 800; font-size: clamp(24px, 3vw, 34px); }
.cf-next b.is-hot { color: var(--ember); }

/* ── Партии дня ──────────────────────────────────────────────────────────── */
.cf-batches { border-top: 1.5px solid var(--char); }
.cf-batch {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: clamp(12px, 3vw, 32px); align-items: baseline;
  padding: 22px 0; border-bottom: 1px solid rgba(36,26,18,.18);
  transition: background .2s var(--tick), padding-left .2s var(--tick);
}
.cf-batch:hover { background: rgba(216,69,27,.07); padding-left: 10px; }
.cf-batch-t { font-family: "PlexMono", monospace; font-weight: 500; font-size: 15px; color: var(--ember); }
.cf-batch h3 { margin-bottom: 3px; }
.cf-batch p { font-size: 15px; color: var(--char-2); }
.cf-batch-w { font-family: "PlexMono", monospace; font-size: 14px; color: var(--iron); white-space: nowrap; }
.cf-batch.is-past { opacity: .48; }
.cf-batch.is-past .cf-batch-t { color: var(--iron); }

/* ── Витрина ─────────────────────────────────────────────────────────────── */
.cf-shelf { display: grid; grid-template-columns: repeat(auto-fit, minmax(226px, 1fr)); gap: 1.5px;
  background: rgba(36,26,18,.18); border: 1.5px solid var(--char); }
.cf-item { background: var(--flour); padding: 26px 22px 22px; display: flex; flex-direction: column; gap: 12px;
  transition: background .25s var(--tick); }
.cf-item:hover { background: #FAF0DE; }
.cf-item svg { height: 62px; width: auto; }
.cf-item-name { font-family: "Bitter", serif; font-weight: 600; font-size: 18px; }
.cf-item p { font-size: 14.5px; color: var(--char-2); flex: 1; }
.cf-item-foot { display: flex; justify-content: space-between; align-items: baseline;
  font-family: "PlexMono", monospace; font-size: 14px; padding-top: 12px;
  border-top: 1px solid rgba(36,26,18,.18); }
.cf-item-foot b { font-weight: 500; font-size: 17px; }
.cf-item-foot span { color: var(--iron); }

/* ── Закваска: здесь порядок шагов действительно важен ───────────────────── */
.cf-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: clamp(20px, 3vw, 40px); }
.cf-step { position: relative; padding-top: 26px; border-top: 3px solid var(--char); }
.cf-step:nth-child(1) { border-top-color: var(--wheat); }
.cf-step:nth-child(2) { border-top-color: var(--rye); }
.cf-step:nth-child(3) { border-top-color: var(--ember); }
.cf-step-n { font-family: "PlexMono", monospace; font-size: 12px; color: var(--iron);
  display: block; margin-bottom: 9px; }
.cf-step h3 { margin-bottom: 9px; }
.cf-step p { font-size: 15px; color: var(--char-2); }

/* ── Тёмная полоса: зал ──────────────────────────────────────────────────── */
.cf-hall { background: var(--char); color: var(--flour); }
.cf-hall h2 { color: var(--flour); }
.cf-hall .cf-kicker { color: var(--ember-soft); }
.cf-hall .cf-sec-head p { color: rgba(242,237,230,.76); }
.cf-hall-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.cf-hall-card { border: 1px solid rgba(242,237,230,.22); padding: 24px; }
.cf-hall-card h3 { color: var(--flour); margin-bottom: 8px; }
.cf-hall-card p { color: rgba(242,237,230,.72); font-size: 15px; }
.cf-hall-card b { font-family: "PlexMono", monospace; font-weight: 500; color: var(--wheat);
  display: block; margin-top: 12px; font-size: 14px; }

/* ── Голоса ──────────────────────────────────────────────────────────────── */
.cf-voices { display: grid; grid-template-columns: repeat(auto-fit, minmax(272px, 1fr)); gap: 26px; }
.cf-voice { border-left: 3px solid var(--ember); padding: 4px 0 4px 20px; }
.cf-voice q { font-family: "Bitter", serif; font-weight: 600; font-size: 18px; line-height: 1.42;
  display: block; margin-bottom: 12px; }
.cf-voice cite { font-family: "PlexMono", monospace; font-style: normal; font-size: 13px; color: var(--iron); }

/* ── Бронь ───────────────────────────────────────────────────────────────── */
.cf-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: start; }
.cf-form { display: grid; gap: 16px; }
.cf-form .cf-btn { justify-self: start; }   /* кнопка по содержимому, не во всю колонку */
.cf-field { display: grid; gap: 7px; }
.cf-field label { font-family: "PlexMono", monospace; font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--iron); }
.cf-field input, .cf-field textarea {
  font-family: "Plex", sans-serif; font-size: 16px; color: var(--char);
  background: transparent; border: 1.5px solid rgba(36,26,18,.32); border-radius: 2px;
  padding: 13px 14px; transition: border-color .2s var(--tick);
}
.cf-field input:focus, .cf-field textarea:focus { border-color: var(--ember); outline: none; }
.cf-field textarea { min-height: 92px; resize: vertical; }
.cf-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-slot {
  font-family: "PlexMono", monospace; font-size: 14px; padding: 9px 14px;
  border: 1.5px solid rgba(36,26,18,.32); border-radius: 2px; background: transparent;
  color: var(--char); cursor: pointer; transition: background .18s var(--tick),
  color .18s var(--tick), border-color .18s var(--tick);
}
.cf-slot:hover { border-color: var(--char); }
.cf-slot[aria-pressed="true"] { background: var(--char); color: var(--flour); border-color: var(--char); }
.cf-slot:disabled { opacity: .38; cursor: not-allowed; text-decoration: line-through; }
.cf-ok { display: none; font-family: "PlexMono", monospace; font-size: 14px; color: var(--ember);
  border: 1.5px dashed var(--ember); padding: 13px 15px; }
.cf-ok.is-on { display: block; }

.cf-aside { border: 1.5px solid var(--char); padding: 26px; }
.cf-aside h3 { margin-bottom: 14px; }
.cf-aside dl { display: grid; grid-template-columns: auto 1fr; gap: 10px 16px;
  font-size: 15px; align-items: baseline; }
.cf-aside dt { font-family: "PlexMono", monospace; font-size: 12.5px; color: var(--iron);
  text-transform: uppercase; letter-spacing: .06em; }
.cf-aside dd { text-align: right; }

/* ── Внутренние страницы ─────────────────────────────────────────────────── */
.cf-page-head { padding: clamp(46px, 7vw, 88px) 0 clamp(28px, 4vw, 48px);
  border-bottom: 1.5px solid var(--char); }
.cf-page-head h1 { font-size: clamp(38px, 6vw, 74px); margin-top: 16px; max-width: 16ch; }
.cf-page-head h1 em { font-style: normal; color: var(--ember); }
.cf-page-head .cf-lead { margin-top: 18px; }
.cf-crumb { font-family: "PlexMono", monospace; font-size: 12px; letter-spacing: .06em;
  color: var(--iron); margin-bottom: 4px; }
.cf-crumb a { text-decoration: none; border-bottom: 1px solid rgba(122,98,72,.45); }
.cf-crumb a:hover { color: var(--ember); border-bottom-color: var(--ember); }

.cf-prose { max-width: 62ch; display: grid; gap: 18px; }
.cf-prose h2 { font-size: clamp(24px, 3vw, 34px); margin-top: 18px; }
.cf-prose p { color: var(--char-2); }
.cf-prose ul { display: grid; gap: 10px; padding-left: 20px; color: var(--char-2); }

.cf-split { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 5vw, 64px); align-items: start; }
.cf-note { border-left: 3px solid var(--wheat); padding: 4px 0 4px 18px;
  font-size: 15px; color: var(--char-2); }

.cf-map { border: 1.5px solid var(--char); background:
  repeating-linear-gradient(45deg, transparent 0 13px, rgba(122,98,72,.11) 13px 14px), var(--flour-2);
  aspect-ratio: 4 / 3; position: relative; }
.cf-map-pin { position: absolute; left: 46%; top: 52%; transform: translate(-50%,-100%);
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font-family: "PlexMono", monospace; font-size: 12px; }
.cf-map-pin i { width: 15px; height: 15px; border-radius: 50%; background: var(--ember);
  box-shadow: 0 0 0 5px rgba(216,69,27,.22); font-style: normal; }
.cf-map-street { position: absolute; left: 0; right: 0; top: 52%; height: 12px;
  background: rgba(122,98,72,.18); }

/* ── Подвал ──────────────────────────────────────────────────────────────── */
.cf-foot { background: var(--char); color: rgba(242,237,230,.72); padding: 46px 0 40px; font-size: 14.5px; }
.cf-foot-grid { display: flex; flex-wrap: wrap; gap: 26px 56px; justify-content: space-between; }
.cf-foot a { color: var(--flour); text-decoration: none; border-bottom: 1px solid rgba(242,237,230,.34); }
.cf-foot a:hover { border-bottom-color: var(--ember); color: var(--ember-soft); }
.cf-foot-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.cf-foot-note { font-family: "PlexMono", monospace; font-size: 12px;
  color: rgba(242,237,230,.46); margin-top: 22px; }

/* ── Появление по прокрутке ──────────────────────────────────────────────── */
.cf-rise { opacity: 0; transform: translateY(22px); }
.cf-rise.is-in { opacity: 1; transform: none;
  transition: opacity .7s var(--tick), transform .7s var(--tick); }

/* ── Адаптив: на телефоне шкала дня ложится сверху ───────────────────────── */
@media (max-width: 860px) {
  body { padding-right: 0; }
  /* Слой муки прибит к экрану и на телефоне переотрисовывается каждый кадр —
     от этого липкая шапка подрагивает. Фактуру там держит фон страницы. */
  body::before { display: none; }
  /* Никакого will-change/translateZ: вынос липкой шапки в отдельный слой даёт
     субпиксельные швы по краям при прокрутке. Обводка в цвет шапки закрывает
     возможный зазор округления, оставаясь невидимой. */
  .cf-day { box-shadow: 0 0 0 1px var(--char); }
  /* Две строки: сверху марка и страницы, снизу шкала дня во всю ширину. */
  .cf-day {
    position: sticky; top: 0; left: auto; width: 100%; height: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 9px 14px 12px; gap: 8px 14px; row-gap: 10px;
  }
  .cf-day::after { display: none; }
  .cf-mark { margin: 0; font-size: 17px; }
  .cf-rail-sep { display: none; }
  .cf-pages { display: flex; gap: 6px; width: auto; padding: 0; margin-left: auto;
    overflow-x: auto; scrollbar-width: none; }
  .cf-pages::-webkit-scrollbar { display: none; }
  .cf-pages a { white-space: nowrap; padding: 5px 9px; border-color: rgba(242,237,230,.2); }
  .cf-scale { flex: 1 0 100%; height: 30px; }
  .cf-scale-line { top: 50%; bottom: auto; left: 4px; right: 4px; width: auto; height: 2px;
    transform: translateY(-1px); }
  .cf-hours { flex-direction: row; width: 100%; height: 100%; align-items: center;
    justify-content: space-between; padding: 0 4px; }
  .cf-hour { flex-direction: column; gap: 0; }
  .cf-hour span { display: none; }
  /* По горизонтали уголёк отсчитывается от начала шкалы, иначе при нулевой
     прокрутке он стоит посередине и навигация выглядит сбитой. */
  .cf-coal { top: 50%; left: 4px; margin-left: 0; margin-top: -9.5px; }
  .cf-day-foot { display: none; }
  .cf-hero-grid, .cf-book { grid-template-columns: 1fr; }
  .cf-mouth { max-width: 330px; justify-self: center; margin-top: 8px; }
  .cf-temp { right: 0; }
  .cf-batch { grid-template-columns: 74px 1fr; }
  .cf-batch-w { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cf-rise { opacity: 1; transform: none; }
  .cf-mouth-glow { animation: none; }
  * { transition-duration: .01ms !important; }
}