/* =========================================================================
   «Печь и Перец» — демо кафе-ресторана. Концепция: меловая доска
   «Сегодня в печи» + кухонные заказы-наряды, чеки, крафт и бечёвка.
   Ваниль, без сборки. Анимации — только transform / opacity.
   ========================================================================= */

/* ---------- Шрифты (самохостинг, OFL) ---------- */
@font-face { font-family: "Amatic SC"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/amatic-sc-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Amatic SC"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/amatic-sc-latin.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+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Amatic SC"; font-weight: 700; font-style: normal; font-display: swap;
  src: url("../fonts/amatic-sc-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0, U+2113; }

@font-face { font-family: "Neucha"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/neucha-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Neucha"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/neucha-latin.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+2191, U+2193, U+2212, U+2215; }

@font-face { font-family: "Caveat"; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url("../fonts/caveat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Caveat"; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url("../fonts/caveat-latin.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+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Caveat"; font-weight: 400 700; font-style: normal; font-display: swap;
  src: url("../fonts/caveat-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0, U+2113; }

@font-face { font-family: "Golos Text"; font-weight: 400 900; font-style: normal; font-display: swap;
  src: url("../fonts/golos-text-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-style: normal; font-display: swap;
  src: url("../fonts/golos-text-latin.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+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "Golos Text"; font-weight: 400 900; font-style: normal; font-display: swap;
  src: url("../fonts/golos-text-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0, U+2113; }

@font-face { font-family: "PT Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/pt-mono-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "PT Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/pt-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+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215; }
@font-face { font-family: "PT Mono"; font-weight: 400; font-style: normal; font-display: swap;
  src: url("../fonts/pt-mono-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+20A0-20AB, U+20AD-20C0, U+2113; }

/* ---------- Токены ---------- */
:root {
  --wall: #141211;
  --slate: #222826;
  --slate-2: #1b201f;
  --chalk: #f3efe4;
  --chalk-dim: #c9c8bf;
  --chalk-y: #ffd76a;
  --chalk-r: #ff8f6b;
  --paper: #f6efdf;
  --paper-2: #ece2cc;
  --kraft: #c9a274;
  --kraft-d: #a9825a;
  --ink: #231b14;
  --ink-2: #5a4c3f;
  --pepper: #b92d1a;
  --twine: #b8925f;
  --wood: #6b4527;
  --steel: #9aa0a3;

  --f-chalk-xl: "Amatic SC", "Neucha", "Golos Text", sans-serif;
  --f-chalk: "Neucha", "Caveat", "Golos Text", sans-serif;
  --f-hand: "Caveat", "Neucha", "Golos Text", cursive;
  --f-body: "Golos Text", system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "PT Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --ease: cubic-bezier(.22, .8, .24, 1);
  --ease-spring: cubic-bezier(.34, 1.4, .5, 1);
  --wrap: 1240px;
  --gut: clamp(16px, 4vw, 48px);
  --noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  --noise-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  --noise-dark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

/* ---------- База ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wall); color: var(--chalk); font-family: var(--f-body); font-size: 17px; line-height: 1.55; overflow-x: hidden; }
main { overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h2 { text-wrap: balance; }
p { text-wrap: pretty; }
.defs { position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rub { font-family: "Golos Text", sans-serif; font-weight: 500; font-size: .82em; }

:focus { outline: none; }
:focus-visible { outline: 3px solid var(--focus, var(--chalk-y)); outline-offset: 3px; border-radius: 4px; }
.paper-menu, .order, .receipt, .linen, .kraft, .napkin, .tail__tape, .tab-ticket, .rail__brand, .rail__phone, .order-ticket, .photo-tag, .guest-note { --focus: #8c1d0e; }

.skip { position: fixed; left: 12px; top: 12px; z-index: 100; padding: 10px 16px; background: var(--paper); color: var(--ink); border-radius: 6px; translate: 0 -200%; }
.skip:focus-visible { translate: 0 0; }

.js .reveal { opacity: 0; translate: 0 28px; transition: opacity .8s var(--ease), translate .8s var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; translate: 0 0; }

/* =========================================================================
   РЕЙКА ДЛЯ ЗАКАЗОВ
   ========================================================================= */
.rail { position: fixed; inset: 0 0 auto 0; z-index: 40; height: 0; display: flex; align-items: flex-start; gap: 22px; padding: 0 240px 0 clamp(24px, 4.5vw, 72px); pointer-events: none; }
.rail > * { pointer-events: auto; }
.rail__bar { position: absolute; inset: 0 0 auto 0; height: 12px; pointer-events: none;
  background: linear-gradient(#c9cdd0, #8d9397 45%, #5d6266 55%, #83898d);
  box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 6px 14px rgba(0,0,0,.55); }
.rail__bar::after { content: ""; position: absolute; inset: 4px 0 auto; height: 1px; background: rgba(255,255,255,.35); }

.rail__brand, .tab-ticket, .rail__phone {
  position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--paper);
  background-image: var(--noise-dark); background-size: 220px; background-blend-mode: soft-light;
  box-shadow: 0 10px 18px -8px rgba(0,0,0,.6), 0 2px 3px rgba(0,0,0,.3);
  transform-origin: 50% 0; transition: transform .45s var(--ease-spring);
}
.rail__brand { margin-top: 6px; padding: 16px 18px 12px; rotate: -1.6deg; display: flex; align-items: baseline; gap: 7px; border-radius: 0 0 3px 3px; font-family: var(--f-chalk-xl); font-size: 34px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.rail__brand-amp { font-family: var(--f-hand); font-size: 26px; color: var(--pepper); text-transform: none; letter-spacing: 0; }
.rail__brand-b { color: var(--pepper); }
.rail__brand:hover { transform: translateY(3px) rotate(1deg); }

.rail__tickets { display: flex; gap: 8px; margin-top: 4px; }
.tab-ticket { padding: 16px 16px 15px; min-width: 84px; font-weight: 600; font-size: 15px; line-height: 1.1; letter-spacing: .01em;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%; }
.rail__tickets li { filter: drop-shadow(0 8px 8px rgba(0,0,0,.45)); transition: transform .45s var(--ease-spring); transform-origin: 50% 0; }
.rail__tickets li:nth-child(1) { rotate: 1.2deg; }
.rail__tickets li:nth-child(2) { rotate: -1.4deg; margin-top: 3px; }
.rail__tickets li:nth-child(3) { rotate: .6deg; }
.rail__tickets li:nth-child(4) { rotate: -.8deg; margin-top: 2px; }
.rail__tickets li:nth-child(5) { rotate: 1.6deg; }
.tab-ticket__no { display: block; font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; color: var(--ink-2); margin-bottom: 3px; }
.tab-ticket__t { display: block; padding-bottom: 5px; }
.rail__tickets li:hover, .rail__tickets li:focus-within { transform: translateY(7px); }
.tab-ticket[aria-current="true"] { background-color: #fff6dd; }
.tab-ticket[aria-current="true"] .tab-ticket__no { color: var(--pepper); }
.tab-ticket[aria-current="true"] .tab-ticket__t { box-shadow: inset 0 -2px 0 var(--pepper); }
.rail__tickets li:has([aria-current="true"]) { transform: translateY(9px); }

.rail__phone { margin: 5px 0 0 auto; padding: 15px 14px 9px; rotate: 1deg; font-family: var(--f-mono); font-size: 14px; line-height: 1.25; font-variant-numeric: tabular-nums; border-radius: 0 0 3px 3px; white-space: nowrap; }
.rail__phone span { display: block; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); }
.rail__phone:hover { transform: translateY(3px); }

/* =========================================================================
   ПЛАШКА «← KODOR CODE · ДЕМО» (штамп на крафте)
   ========================================================================= */
.demo-pill { position: fixed; top: 22px; right: 20px; z-index: 50; display: inline-flex; align-items: center; gap: 7px; min-height: 48px; padding: 0 15px; rotate: -3deg;
  background: var(--kraft); color: var(--ink); border-radius: 4px; text-decoration: none;
  box-shadow: 0 0 0 2px var(--kraft), 0 0 0 3px #2a1c05 inset, 0 10px 22px -6px rgba(0,0,0,.5);
  font-family: var(--f-body); font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; white-space: nowrap;
  transition: transform .35s var(--ease-spring); }
.demo-pill:hover { transform: rotate(2deg) scale(1.04); }
.demo-pill:active { transform: scale(.96); }
.demo-pill__tag { font-weight: 500; text-transform: none; letter-spacing: .04em; opacity: .65; }

/* =========================================================================
   ДОСКА «СЕГОДНЯ В ПЕЧИ»
   ========================================================================= */
.today { position: relative; min-height: max(100dvh, 800px); padding: 96px 0 40px; overflow: hidden; isolation: isolate; background: var(--wall); }
.today::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(90% 70% at 18% 40%, rgba(120,84,50,.22), transparent 70%), var(--noise); background-size: auto, 220px; opacity: .6; }

.today__photo { position: absolute; inset: 0 0 0 auto; width: 66%; z-index: -1;
  -webkit-mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 18%, #000 38%);
          mask: linear-gradient(90deg, transparent 0, rgba(0,0,0,.5) 18%, #000 38%); }
.today__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.06); transition: opacity .7s var(--ease), transform 1.4s var(--ease); }
.today__photo img.is-on { opacity: 1; transform: scale(1); }
.today__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,8,7,.55) 0, transparent 22%, transparent 70%, rgba(10,8,7,.6) 100%); }

.board { position: relative; width: min(790px, 56vw); margin-left: clamp(24px, 4.5vw, 72px); padding: 16px; rotate: -.7deg;
  background:
    repeating-linear-gradient(92deg, rgba(0,0,0,.18) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #8a5a33, #5c3a1f 50%, #7a4e2b);
  border-radius: 6px;
  box-shadow: 0 50px 80px -30px rgba(0,0,0,.9), 0 12px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.18), inset 0 -2px 0 rgba(0,0,0,.4); }
.board__slate { position: relative; padding: 26px 38px 30px; border-radius: 2px; color: var(--chalk);
  background:
    radial-gradient(60% 40% at 78% 18%, rgba(255,255,255,.07), transparent 70%),
    radial-gradient(50% 30% at 20% 88%, rgba(255,255,255,.06), transparent 70%),
    radial-gradient(30% 20% at 55% 55%, rgba(255,255,255,.035), transparent 70%),
    var(--noise),
    linear-gradient(160deg, #283230, #1c2221 60%, #242b29);
  background-size: auto, auto, auto, 220px, auto;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.55), inset 0 0 60px rgba(0,0,0,.55); }

.board__brand { font-family: var(--f-chalk); font-size: 17px; letter-spacing: .04em; color: var(--chalk-dim); }
.board__brand b { font-weight: 400; color: var(--chalk-y); margin-right: 8px; letter-spacing: .06em; }

.board__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-top: 2px; }
.board__title { font-family: var(--f-chalk-xl); font-weight: 700; font-size: clamp(84px, 8.4vw, 124px); line-height: .92; letter-spacing: .02em; text-transform: uppercase; filter: url(#chalk); text-shadow: 0 0 2px rgba(243,239,228,.9), 0 0 1px #fff; color: #fffdf6; white-space: nowrap; }
.board__date { font-family: var(--f-hand); font-weight: 600; font-size: 28px; line-height: .95; color: var(--chalk-y); text-align: right; rotate: -4deg; padding-bottom: 14px; white-space: nowrap; }

.chalk-underline { display: block; width: min(560px, 82%); height: 14px; margin: 0 0 8px; overflow: hidden; color: var(--chalk-r); }
.chalk-underline > span { display: block; height: 100%; }
.chalk-underline svg { display: block; width: 100%; height: 100%; }
.js .chalk-underline { transform: translateX(-101%); animation: wipe-a 1s .35s var(--ease) forwards; }
.js .chalk-underline > span { transform: translateX(101%); animation: wipe-b 1s .35s var(--ease) forwards; }
@keyframes wipe-a { to { transform: translateX(0); } }
@keyframes wipe-b { to { transform: translateX(0); } }

.board__slogan { font-family: var(--f-chalk); font-size: 22px; line-height: 1.2; color: var(--chalk); max-width: 30ch; }

.board__list { margin: 12px -12px 0; }
.board__list li { position: relative; }
.chalk-dish { position: relative; display: block; width: 100%; padding: 6px 12px 7px; text-align: left; border-radius: 6px; font-family: var(--f-chalk); color: var(--chalk); transition: transform .4s var(--ease); }
.chalk-dish__row { display: flex; align-items: baseline; gap: 10px; font-size: clamp(24px, 2.05vw, 29px); line-height: 1.12; }
.chalk-dish__name { position: relative; text-shadow: 0 0 1px rgba(243,239,228,.5); }
.chalk-dish__name::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: -5px; height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, var(--chalk-y), rgba(255,215,106,.75) 60%, rgba(255,215,106,.35)); -webkit-mask: var(--noise-mask); mask: var(--noise-mask); mask-size: 120px; -webkit-mask-size: 120px;
  transform: scaleX(0); transform-origin: 0 50%; transition: transform .5s var(--ease); }
.chalk-dish__dots { flex: 1; min-width: 24px; height: 0; border-bottom: 3px dotted rgba(243,239,228,.38); translate: 0 -5px; }
.chalk-dish__price { font-variant-numeric: tabular-nums; white-space: nowrap; }
.chalk-dish__desc { display: inline; font-size: 16.5px; line-height: 1.25; color: var(--chalk-dim); letter-spacing: .01em; }
.chalk-dish.is-on { transform: translateX(8px); }
.chalk-dish.is-on .chalk-dish__name, .chalk-dish.is-on .chalk-dish__price { color: var(--chalk-y); }
.chalk-dish.is-on .chalk-dish__name::after { transform: scaleX(1); }
.chalk-dish.is-on .chalk-dish__desc { color: var(--chalk); }
.chalk-dish::before { content: ""; position: absolute; left: -14px; top: 17px; width: 14px; height: 14px; opacity: 0; transform: translateX(-8px); transition: opacity .3s var(--ease), transform .4s var(--ease);
  background: no-repeat 50% / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2 2.5c3 1.4 6 3 9.5 4.6C8 8.6 5 10.3 2 12' fill='none' stroke='%23ffd76a' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.chalk-dish.is-on::before { opacity: 1; transform: none; }

.oven-chip { display: inline-flex; align-items: center; gap: 7px; margin-left: 8px; padding: 1px 10px 2px; border: 1.5px solid var(--chalk-r); border-radius: 999px 14px 999px 12px; color: var(--chalk-r); font-family: var(--f-chalk); font-size: 15.5px; line-height: 1.3; white-space: nowrap; font-variant-numeric: tabular-nums; rotate: -1.2deg; vertical-align: 1px; }
.oven-chip i { width: 8px; height: 8px; border-radius: 50%; background: #ff6a3d; box-shadow: 0 0 8px 2px rgba(255,106,61,.7); animation: ember 1.8s ease-in-out infinite; }
@keyframes ember { 50% { opacity: .35; transform: scale(.8); } }

.chalk-try { position: absolute; right: 118px; top: -50px; display: flex; align-items: flex-start; gap: 2px; color: var(--chalk-y); font-family: var(--f-hand); font-weight: 600; font-size: 25px; line-height: 1; rotate: -5deg; pointer-events: none; flex-direction: row-reverse; }
.chalk-try svg { width: 66px; height: 34px; margin-top: 12px; }
.chalk-try span { translate: 0 -2px; }

.board__demo { margin-top: 12px; font-family: var(--f-hand); font-size: 18px; color: var(--chalk-dim); rotate: -1deg; transform-origin: 0 50%; }
.board__demo::before { content: "* "; color: var(--chalk-r); }

.board__ledge { position: absolute; left: 10px; right: 10px; bottom: -9px; height: 12px; border-radius: 2px 2px 5px 5px; background: linear-gradient(#9a6a3e, #4f311a); box-shadow: 0 10px 14px -4px rgba(0,0,0,.7), inset 0 1px 0 rgba(255,255,255,.2); }
.chalk-stick { position: absolute; bottom: 11px; left: 58%; width: 54px; height: 9px; border-radius: 3px; background: linear-gradient(#fff, #d9d5ca); box-shadow: 0 2px 3px rgba(0,0,0,.5); rotate: -2deg; }
.chalk-stick--y { left: 66%; width: 34px; background: linear-gradient(#ffe08a, #e0b447); rotate: 3deg; }

/* --- Наряд «Стол на вечер» на прищепке --- */
.order-ticket { position: absolute; left: calc(100% - 34px); top: 47%; z-index: 3; width: 236px; padding: 30px 20px 22px 24px; rotate: 5deg; transform-origin: 10% 0; color: var(--ink); text-decoration: none;
  background: var(--paper); background-image: var(--noise-dark), linear-gradient(180deg, transparent 0 58px, rgba(185,45,26,.0) 58px); background-size: 220px, auto; background-blend-mode: soft-light;
  box-shadow: 0 26px 40px -14px rgba(0,0,0,.8), 0 3px 6px rgba(0,0,0,.4);
  transition: transform .5s var(--ease-spring), box-shadow .5s var(--ease); }
.order-ticket::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 8px; background: var(--paper);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 12px 100%; }
.order-ticket__clip { position: absolute; left: 22px; top: -16px; width: 58px; height: 34px; border-radius: 5px 5px 3px 3px; background: linear-gradient(#3a3f42, #15181a 60%, #2b2f32); box-shadow: 0 4px 6px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.order-ticket__clip::before { content: ""; position: absolute; left: 15px; top: -12px; width: 28px; height: 18px; border: 3px solid #b9bec2; border-bottom: 0; border-radius: 12px 12px 0 0; }
.order-ticket__top { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1.5px dashed rgba(35,27,20,.4); font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); }
.order-ticket__main { display: block; font-family: var(--f-body); font-weight: 800; font-size: 31px; line-height: 1; letter-spacing: -.02em; }
.order-ticket__sub { display: inline-flex; align-items: center; gap: 8px; margin-top: 12px; padding: 7px 12px 8px; background: var(--pepper); color: #fff; font-weight: 600; font-size: 14.5px; border-radius: 3px; transition: background-color .25s var(--ease); }
.order-ticket__sub svg { width: 17px; height: 17px; transition: transform .4s var(--ease-spring); }
.order-ticket:hover { transform: rotate(-3.5deg) translateY(-6px); box-shadow: 0 40px 50px -16px rgba(0,0,0,.85), 0 3px 6px rgba(0,0,0,.4); }
.order-ticket:hover .order-ticket__sub svg { transform: translateX(4px); }
.order-ticket:active { transform: rotate(-2deg) scale(.98); }

/* --- Бирка к фото --- */
.photo-tag { position: absolute; right: clamp(24px, 4vw, 64px); bottom: 44px; z-index: 2; max-width: 300px; padding: 16px 20px 15px 30px; rotate: 2deg; color: var(--ink); background: var(--kraft); background-image: var(--noise-dark); background-size: 220px; background-blend-mode: multiply;
  border-radius: 3px; box-shadow: 0 22px 34px -12px rgba(0,0,0,.8), 0 2px 4px rgba(0,0,0,.4);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 16px 100%, 0 calc(100% - 16px), 0 16px); }
.photo-tag::before { content: ""; position: absolute; left: 10px; top: 50%; width: 9px; height: 9px; margin-top: -5px; border-radius: 50%; background: var(--wall); box-shadow: 0 0 0 2px rgba(35,27,20,.35); }
.photo-tag__name { font-family: var(--f-hand); font-weight: 700; font-size: 26px; line-height: 1.02; }
.photo-tag__meta { margin-top: 4px; font-family: var(--f-mono); font-size: 12px; letter-spacing: .04em; color: #3a2c1e; }
.photo-tag__link { display: inline-block; margin-top: 4px; padding: 4px 0; font-size: 14px; font-weight: 600; text-underline-offset: 3px; }
.photo-tag.is-swap .photo-tag__name, .photo-tag.is-swap .photo-tag__meta { animation: tag-in .45s var(--ease) both; }
@keyframes tag-in { from { opacity: 0; transform: translateY(6px); } }

/* =========================================================================
   ПЕЧАТНОЕ МЕНЮ
   ========================================================================= */
.carte { position: relative; padding: clamp(80px, 10vw, 150px) var(--gut) clamp(90px, 11vw, 160px);
  background:
    repeating-linear-gradient(91deg, rgba(0,0,0,.16) 0 2px, transparent 2px 14px),
    repeating-linear-gradient(89deg, rgba(255,255,255,.025) 0 1px, transparent 1px 37px),
    linear-gradient(180deg, #2c1f15, #3a2819 50%, #2a1d13); }
.carte::before { content: ""; position: absolute; inset: 0 0 auto; height: 120px; background: linear-gradient(var(--wall), transparent); pointer-events: none; }
.carte__wrap { position: relative; max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: clamp(28px, 4vw, 64px); align-items: start; }

.paper-menu { position: relative; padding: clamp(28px, 4vw, 56px) clamp(20px, 4vw, 60px) 34px; color: var(--ink); background: var(--paper); background-image: var(--noise-dark), linear-gradient(90deg, rgba(0,0,0,.05), transparent 6%, transparent 94%, rgba(0,0,0,.06)); background-size: 220px, auto; background-blend-mode: soft-light, normal; border-radius: 2px; rotate: -.35deg;
  box-shadow: 0 60px 80px -40px rgba(0,0,0,.85), 0 8px 18px rgba(0,0,0,.4); }
.paper-menu__tape { position: absolute; top: -14px; left: 50%; width: 130px; height: 30px; margin-left: -65px; rotate: -2deg; background: rgba(255,215,106,.78); box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.paper-menu__head { text-align: center; padding-bottom: 24px; border-bottom: 3px double rgba(35,27,20,.6); }
.paper-menu__over { font-family: var(--f-mono); font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); }
.paper-menu__head h2 { margin: 10px auto 8px; max-width: 16ch; font-family: var(--f-chalk-xl); font-size: clamp(50px, 6vw, 84px); line-height: .95; letter-spacing: .02em; text-transform: uppercase; }
.paper-menu__lead { max-width: 46ch; margin: 0 auto; font-size: 16px; color: var(--ink-2); }

.paper-menu__tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 26px; margin-top: 26px; }
.typed-field { flex: 1 1 260px; display: block; }
.typed-field__label { display: block; font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); }
.typed-field input { width: 100%; min-height: 46px; padding: 8px 2px 6px; background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; font-family: var(--f-mono); font-size: 17px; color: var(--ink); transition: border-color .2s var(--ease); }
.typed-field input::placeholder { color: #75675a; }
.typed-field input:focus-visible { outline: none; border-bottom-color: var(--pepper); box-shadow: 0 3px 0 var(--pepper); }
.stamp-filters { display: flex; gap: 12px; }
.stamp-toggle { min-height: 46px; padding: 6px 16px; border: 2px solid currentColor; border-radius: 5px; font-family: var(--f-body); font-weight: 800; font-size: 13px; letter-spacing: .16em; text-transform: uppercase; color: #6d5f52; rotate: -2deg; transition: transform .3s var(--ease-spring), color .2s var(--ease), background-color .2s var(--ease); }
.stamp-toggle--veg { rotate: 1.5deg; }
.stamp-toggle:hover { transform: scale(1.04); }
.stamp-toggle:active { transform: scale(.96); }
.stamp-toggle--hot[aria-pressed="true"] { color: #fff; background: var(--pepper); border-color: var(--pepper); }
.stamp-toggle--veg[aria-pressed="true"] { color: #fff; background: #2f6232; border-color: #2f6232; }

.index-tabs { display: flex; flex-wrap: wrap; gap: 6px 8px; margin-top: 22px; transition: opacity .3s var(--ease); }
.index-tabs.is-muted { opacity: .45; pointer-events: none; }
.index-tab { min-height: 44px; padding: 8px 15px; border-radius: 8px 8px 0 0; border: 1.5px solid rgba(35,27,20,.35); border-bottom-width: 3px; font-weight: 600; font-size: 15px; color: var(--ink-2); background: rgba(255,255,255,.35); transition: transform .3s var(--ease-spring), background-color .2s var(--ease), color .2s var(--ease); }
.index-tab:hover { transform: translateY(-2px); color: var(--ink); }
.index-tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.paper-menu__status { margin-top: 14px; font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.paper-menu__status strong { color: var(--ink); }

.paper-menu__cols { margin-top: 10px; columns: 2; column-gap: clamp(28px, 4vw, 56px); column-rule: 1px dashed rgba(35,27,20,.3); }
.carte-group { break-inside: avoid; padding: 18px 0 8px; }
.carte-group__t { display: flex; align-items: baseline; gap: 12px; margin-bottom: 6px; font-family: var(--f-chalk-xl); font-size: 40px; line-height: 1; letter-spacing: .04em; text-transform: uppercase; color: var(--pepper); }
.carte-group__t::after { content: ""; flex: 1; border-bottom: 2px solid rgba(185,45,26,.45); translate: 0 -6px; }
.carte-row { position: relative; display: block; width: 100%; padding: 10px 8px 10px; margin: 0 -8px; width: calc(100% + 16px); text-align: left; border-radius: 6px; transition: background-color .25s var(--ease); }
.carte-row__top { display: flex; align-items: baseline; gap: 8px; font-weight: 700; font-size: 17px; line-height: 1.25; }
.carte-row__dots { flex: 1; min-width: 18px; border-bottom: 2px dotted rgba(35,27,20,.45); translate: 0 -4px; }
.carte-row__price { font-family: var(--f-mono); font-weight: 400; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.carte-row__desc { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }
.carte-row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-top: 4px; font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }
.carte-row__cat { padding: 0 6px; border: 1px solid rgba(35,27,20,.4); border-radius: 3px; }
.mark { font-family: var(--f-body); font-weight: 800; font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; padding: 1px 6px 2px; border: 1.5px solid currentColor; border-radius: 3px; rotate: -2deg; }
.mark--hot { color: var(--pepper); }
.mark--veg { color: #2f6232; }
.mark--day { color: var(--ink); background: var(--chalk-y); border-color: transparent; rotate: 1deg; }
.carte-row:hover, .carte-row.is-on { background: rgba(255,215,106,.32); }
.carte-row__photo { display: none; }
.menu-empty { column-span: all; padding: 40px 0; text-align: center; font-family: var(--f-hand); font-size: 28px; color: var(--ink-2); }
.paper-menu__foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; margin-top: 26px; padding-top: 16px; border-top: 3px double rgba(35,27,20,.6); font-family: var(--f-mono); font-size: 12px; color: var(--ink-2); }

.carte__side { position: sticky; top: 120px; padding-top: 30px; }
.carte__note { margin: 26px 0 0 30px; font-family: var(--f-hand); font-size: 25px; line-height: 1.05; color: var(--chalk-y); rotate: -4deg; }

/* --- Полароид --- */
.polaroid { position: relative; padding: 14px 14px 0; background: #fbf8f1; color: var(--ink); border-radius: 2px; box-shadow: 0 30px 50px -20px rgba(0,0,0,.85), 0 3px 8px rgba(0,0,0,.4); }
.polaroid__img { display: block; overflow: hidden; background: #2a231d; aspect-ratio: 4 / 5; }
.polaroid__img img { width: 100%; height: 100%; object-fit: cover; outline: 1px solid rgba(0,0,0,.12); outline-offset: -1px; transition: opacity .35s var(--ease), transform .9s var(--ease); }
.polaroid figcaption { padding: 12px 4px 16px; font-family: var(--f-hand); font-weight: 600; font-size: 25px; line-height: 1.05; text-align: center; }
.polaroid figcaption small { display: block; margin-top: 4px; font-family: var(--f-mono); font-weight: 400; font-size: 12.5px; color: var(--ink-2); }
.polaroid--preview { rotate: 2.4deg; transition: rotate .6s var(--ease-spring); }
.polaroid--preview.is-swap { rotate: -1.6deg; }
.polaroid--preview.is-fade img { opacity: 0; transform: scale(1.04); }
.polaroid__pin { position: absolute; top: -10px; left: 50%; z-index: 2; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ff8a70, var(--pepper) 60%, #6b1408); box-shadow: 0 5px 6px rgba(0,0,0,.5); }

/* =========================================================================
   СТОЛ: ЗАКАЗ-НАРЯД И ЧЕК
   ========================================================================= */
.desk { position: relative; padding: clamp(80px, 10vw, 150px) var(--gut); background: radial-gradient(70% 50% at 80% 30%, rgba(255,255,255,.05), transparent 70%), var(--noise), linear-gradient(170deg, #252c2a, #191e1d); background-size: auto, 220px, auto; }
.desk__wrap { max-width: var(--wrap); margin: 0 auto; }
.desk__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 40px; margin-bottom: clamp(34px, 5vw, 60px); }
.desk__head h2 { font-family: var(--f-chalk-xl); font-size: clamp(64px, 8vw, 120px); line-height: .9; letter-spacing: .02em; text-transform: uppercase; filter: url(#chalk); }
.desk__head p { max-width: 34ch; padding-bottom: 12px; font-family: var(--f-chalk); font-size: 22px; line-height: 1.25; color: var(--chalk-dim); }
.desk__grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: clamp(28px, 5vw, 80px); align-items: start; }

.order { position: relative; padding: 40px clamp(20px, 3.4vw, 46px) 30px; color: var(--ink); background: var(--kraft); background-image: var(--noise-dark), linear-gradient(180deg, rgba(255,255,255,.18), transparent 30%); background-size: 220px, auto; background-blend-mode: multiply, normal; border-radius: 3px; rotate: -.5deg;
  box-shadow: 0 50px 70px -36px rgba(0,0,0,.9), 0 6px 14px rgba(0,0,0,.4); }
.order__spike { position: absolute; top: -12px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8ecee, #8d9397 60%, #4a4f52); box-shadow: 0 4px 6px rgba(0,0,0,.5); }
.order__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 20px; padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.order__title { font-weight: 800; font-size: 14px; letter-spacing: .2em; text-transform: uppercase; }
.order__step { font-family: var(--f-mono); font-size: 13px; color: #3a2c1e; }

.punch { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.punch__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 12px 4px 5px; border-radius: 999px; font-size: 14px; font-weight: 600; color: #4a3a2a; transition: background-color .2s var(--ease), color .2s var(--ease); }
.punch__item[disabled] { cursor: default; }
.punch__num { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1.5px dashed rgba(35,27,20,.6); font-family: var(--f-mono); font-size: 13px; transition: background-color .25s var(--ease), color .25s var(--ease), transform .4s var(--ease-spring); }
.punch__item.is-done .punch__num { background: var(--wall); color: var(--kraft); border: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,.8); }
.punch__item.is-active { color: var(--ink); background: rgba(246,239,223,.55); }
.punch__item.is-active .punch__num { background: var(--pepper); color: #fff; border: 0; transform: scale(1.06); }
.punch__item:not([disabled]):hover { background: rgba(246,239,223,.4); }

.order__body { position: relative; margin-top: 22px; min-height: 330px; }
.step-panel { display: none; }
.step-panel.is-active { display: block; animation: panel-in .5s var(--ease) both; }
.order__body.dir-back .step-panel.is-active { animation-name: panel-back; }
@keyframes panel-in { from { opacity: 0; transform: translateX(22px); } }
@keyframes panel-back { from { opacity: 0; transform: translateX(-22px); } }
.step-panel h3 { font-family: var(--f-body); font-weight: 800; font-size: clamp(26px, 3vw, 36px); line-height: 1.05; letter-spacing: -.02em; }
.step-hint { margin-top: 6px; max-width: 52ch; font-size: 15px; color: #3a2c1e; }

.date-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.date-chip { display: grid; justify-items: center; gap: 0; padding: 0 0 8px; min-height: 80px; background: var(--paper); border-radius: 4px; overflow: hidden; box-shadow: 0 2px 0 rgba(35,27,20,.35); transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease); }
.date-chip .dow { width: 100%; padding: 3px 0; background: var(--ink); color: var(--paper); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; text-align: center; }
.date-chip .dnum { font-family: var(--f-body); font-weight: 800; font-size: 25px; line-height: 1.3; font-variant-numeric: tabular-nums; }
.date-chip .mon { font-family: var(--f-mono); font-size: 11px; color: var(--ink-2); line-height: 1; }
.date-chip.is-weekend .dow { background: #5a4c3f; }
.date-chip:hover { transform: translateY(-3px) rotate(-1.5deg); }
.date-chip[aria-checked="true"] { transform: translateY(-4px) rotate(-2deg); box-shadow: 0 0 0 3px var(--pepper), 0 12px 16px -6px rgba(0,0,0,.5); }
.date-chip[aria-checked="true"] .dow { background: var(--pepper); }

.time-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 7px; margin-top: 18px; }
.time-slot { min-height: 44px; padding: 4px 2px; background: var(--paper); border-radius: 4px; font-family: var(--f-mono); font-size: 15px; font-variant-numeric: tabular-nums; box-shadow: 0 2px 0 rgba(35,27,20,.35); transition: transform .25s var(--ease-spring), background-color .2s var(--ease), color .2s var(--ease); }
.time-slot:hover:not([disabled]) { transform: translateY(-2px); }
.time-slot[disabled] { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(35,27,20,.25); color: #5d4c3b; text-decoration: line-through; cursor: not-allowed; }
.time-slot[aria-checked="true"] { background: var(--pepper); color: #fff; box-shadow: 0 8px 12px -6px rgba(0,0,0,.5); transform: translateY(-2px); }
.legend { display: flex; gap: 20px; margin-top: 14px; font-family: var(--f-mono); font-size: 12.5px; color: #3a2c1e; }
.legend span::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2px; border-radius: 3px; background: var(--paper); box-shadow: 0 1px 0 rgba(35,27,20,.35); }
.legend .legend__busy::before { background: transparent; box-shadow: inset 0 0 0 1.5px rgba(35,27,20,.35); }

.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; margin-top: 18px; }
.check { display: flex; align-items: flex-start; gap: 14px; padding: 12px 8px; text-align: left; border-bottom: 1.5px dashed rgba(35,27,20,.4); border-radius: 4px; transition: background-color .2s var(--ease); }
.check:hover { background: rgba(246,239,223,.35); }
.check__box { position: relative; flex: none; width: 26px; height: 26px; margin-top: 1px; border: 2px solid var(--ink); border-radius: 3px; background: rgba(246,239,223,.7); color: var(--pepper); }
.check__box svg { position: absolute; inset: -5px -6px -4px -3px; width: 34px; height: 34px; opacity: 0; transform: scale(.5) rotate(-12deg); transition: opacity .2s var(--ease), transform .35s var(--ease-spring); }
.check[aria-checked="true"] .check__box svg { opacity: 1; transform: none; }
.check b { display: block; font-size: 17px; line-height: 1.25; }
.check span span { display: block; font-size: 14px; line-height: 1.35; color: #3a2c1e; }

.pen-field { display: block; margin-top: 18px; }
.pen-field > span { display: block; font-family: var(--f-mono); font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: #3a2c1e; }
.pen-field input, .pen-field textarea { display: block; width: 100%; min-height: 48px; padding: 8px 2px 4px; background: transparent; border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; font-family: var(--f-hand); font-weight: 600; font-size: 27px; line-height: 1.15; color: #1c2a5a; resize: vertical; }
.pen-field input::placeholder, .pen-field textarea::placeholder { color: #6b5842; font-weight: 400; }
.pen-field input:focus-visible, .pen-field textarea:focus-visible { outline: none; border-bottom-color: var(--pepper); box-shadow: 0 3px 0 var(--pepper); }
.field { max-width: 440px; }
.field__err { display: none; margin-top: 6px; font-size: 14px; font-weight: 600; color: #7d1708; }
.field.has-error .field__err { display: block; }
.field.has-error input { border-bottom-color: #7d1708; }

.step-panel--done[hidden] { display: none; }
.step-panel--done { display: block; animation: panel-in .5s var(--ease) both; }
.step-panel--done p { margin: 12px 0 22px; max-width: 54ch; font-size: 16px; color: #2c2116; }

.order__nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 26px; padding-top: 20px; border-top: 1.5px dashed rgba(35,27,20,.5); }
.order__nav[hidden] { display: none; }
.ink-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 28px; background: var(--ink); color: var(--paper); border-radius: 4px; font-weight: 700; font-size: 16px; text-decoration: none; transition: transform .25s var(--ease), background-color .25s var(--ease), opacity .25s var(--ease); }
.ink-btn:hover { background: var(--pepper); transform: translateY(-2px); }
.ink-btn:active { transform: scale(.97); }
.ink-btn--ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); }
.ink-btn--ghost:hover { background: var(--ink); color: var(--paper); }
.ink-btn.is-disabled { opacity: .45; cursor: not-allowed; }
.ink-btn.is-disabled:hover { background: var(--ink); transform: none; }
.ink-btn.is-hidden { visibility: hidden; }
.ink-link { font-family: var(--f-mono); font-size: 16px; text-underline-offset: 4px; padding: 10px 0; display: inline-block; }
.ink-link--big { font-size: clamp(24px, 2.6vw, 32px); text-decoration-thickness: 2px; font-variant-numeric: tabular-nums; }

/* --- Принтер и чек --- */
.printer { position: sticky; top: 110px; padding: 0 14px; }
.printer__slot { position: relative; z-index: 2; display: block; height: 30px; margin: 0 -14px; border-radius: 10px; background: linear-gradient(#3b4143, #0e1011 55%, #2a2e30); box-shadow: 0 10px 20px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.22); }
.printer__slot::after { content: ""; position: absolute; left: 22px; right: 22px; bottom: 6px; height: 5px; border-radius: 3px; background: #000; }
.printer { filter: drop-shadow(0 30px 30px rgba(0,0,0,.55)); }
.receipt { position: relative; margin-top: -10px; padding: 34px 24px 44px; color: #1d1712; background: #fdfcf8; font-family: var(--f-mono); font-size: 14px; line-height: 1.5;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.receipt.is-printing { animation: print .9s steps(9) both; }
@keyframes print { from { transform: translateY(-46px); } to { transform: none; } }
.receipt__shop { text-align: center; font-size: 19px; letter-spacing: .24em; }
.receipt__addr { text-align: center; font-size: 12px; color: #4f463c; }
.receipt__no { margin-top: 14px; padding-top: 12px; border-top: 1.5px dashed #1d1712; text-align: center; font-size: 22px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.receipt__state { text-align: center; font-size: 12px; color: #4f463c; text-transform: uppercase; letter-spacing: .1em; padding-bottom: 12px; border-bottom: 1.5px dashed #1d1712; }
.receipt__rows { margin: 14px 0 0; }
.receipt__rows > div { display: flex; align-items: baseline; gap: 6px; padding: 3px 0; }
.receipt__rows dt { flex: none; color: #4f463c; }
.receipt__rows dt::after { content: ""; }
.receipt__rows > div::before { content: ""; order: 1; flex: 1; min-width: 12px; border-bottom: 2px dotted #8c8275; translate: 0 -4px; }
.receipt__rows dd { order: 2; max-width: 62%; text-align: right; overflow-wrap: anywhere; color: #8c8275; }
.receipt__rows > div.is-filled dd { color: #1d1712; animation: ink-in .5s var(--ease) both; }
@keyframes ink-in { from { opacity: 0; transform: translateX(8px); } }
.receipt__note { margin-top: 8px; font-size: 12.5px; color: #4f463c; overflow-wrap: anywhere; }
.receipt__note[hidden] { display: none; }
.receipt__total { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; padding: 12px 0; border-top: 1.5px dashed #1d1712; border-bottom: 1.5px dashed #1d1712; font-size: 17px; }
.receipt__fine { margin-top: 12px; font-size: 11.5px; line-height: 1.45; color: #4f463c; text-align: center; }
.receipt__barcode { display: block; height: 42px; margin: 16px auto 0; width: 78%; background: repeating-linear-gradient(90deg, #1d1712 0 2px, transparent 2px 4px, #1d1712 4px 7px, transparent 7px 9px, #1d1712 9px 10px, transparent 10px 14px, #1d1712 14px 18px, transparent 18px 20px); }
.stamp { position: absolute; font-family: var(--f-body); font-weight: 900; text-transform: uppercase; letter-spacing: .16em; border: 3px solid currentColor; border-radius: 6px; padding: 3px 12px 4px; pointer-events: none; }
.stamp--demo { right: 14px; top: 96px; font-size: 20px; color: rgba(185,45,26,.8); rotate: 14deg; }
.stamp--ok { left: 50%; bottom: 40px; background: rgba(253,252,248,.82); width: max-content; font-size: 19px; color: rgba(28,42,110,.9); border-radius: 50px; padding: 8px 20px 9px; opacity: 0; transform: translateX(-50%) rotate(-9deg) scale(1.7); }
.receipt.is-final .stamp--ok { opacity: 1; transform: translateX(-50%) rotate(-9deg) scale(1); transition: opacity .25s .8s var(--ease), transform .45s .8s var(--ease-spring); }

/* =========================================================================
   БАНКЕТЫ: ТАБЛИЧКА НА СКАТЕРТИ
   ========================================================================= */
.linen { position: relative; padding: clamp(90px, 11vw, 160px) var(--gut); color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(90,70,40,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(90,70,40,.05) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #efe7d6, #e2d6bd); }
.linen__wrap { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(40px, 7vw, 110px); align-items: center; }
.tent { position: relative; max-width: 470px; margin: 0 auto; width: 100%; padding-top: 34px; perspective: 900px; }
.tent__back { position: absolute; left: 7%; right: 7%; top: 0; height: 60px; background: linear-gradient(#cfc3aa, #b7a98c); transform: perspective(300px) rotateX(38deg); transform-origin: 50% 100%; border-radius: 3px 3px 0 0; }
.tent__card { position: relative; padding: 46px 30px 50px; text-align: center; background: linear-gradient(180deg, #fffdf7, #f4ecdc 70%, #e9dfc9); border-radius: 2px; box-shadow: 0 1px 0 #fff inset, 0 -1px 0 rgba(0,0,0,.08) inset; transform: rotateX(7deg); transform-origin: 50% 100%; }
.tent__card::before { content: ""; position: absolute; inset: 12px; border: 1.5px solid rgba(185,45,26,.55); pointer-events: none; }
.tent__card::after { content: ""; position: absolute; inset: 17px; border: 1px solid rgba(185,45,26,.3); pointer-events: none; }
.tent__over { font-weight: 800; font-size: 14px; letter-spacing: .34em; text-transform: uppercase; color: var(--pepper); }
.tent__big { margin: 8px 0 12px; font-family: var(--f-hand); font-weight: 700; font-size: clamp(48px, 5.4vw, 72px); line-height: .95; }
.tent__sub { font-family: var(--f-mono); font-size: 13px; color: var(--ink-2); }
.tent__shadow { position: absolute; left: 4%; right: 4%; bottom: -26px; height: 40px; z-index: -1; background: radial-gradient(50% 50% at 50% 50%, rgba(60,40,15,.45), transparent 70%); }
.linen__text h2 { font-family: var(--f-body); font-weight: 800; font-size: clamp(30px, 3.6vw, 50px); line-height: 1.04; letter-spacing: -.025em; max-width: 17ch; }
.pencil-list { margin-top: 28px; display: grid; gap: 0; max-width: 560px; }
.pencil-list li { position: relative; padding: 16px 0 16px 46px; border-top: 1.5px dashed rgba(35,27,20,.35); font-size: 16.5px; color: #3c3126; }
.pencil-list li:last-child { border-bottom: 1.5px dashed rgba(35,27,20,.35); }
.pencil-list b { color: var(--ink); }
.pencil-list li::before { content: ""; position: absolute; left: 4px; top: 17px; width: 26px; height: 26px; background: no-repeat 50% / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'%3E%3Cpath d='M4 14c2 2 4 5 6 8 3-7 7-13 13-18' fill='none' stroke='%23b92d1a' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.linen__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; margin-top: 30px; }

/* =========================================================================
   С СОБОЙ: ПАКЕТЫ
   ========================================================================= */
.kraft { position: relative; padding: clamp(90px, 11vw, 160px) var(--gut) clamp(70px, 8vw, 120px); color: var(--chalk); background: var(--noise), linear-gradient(180deg, #1a1614, #231c17); background-size: 220px, auto; }
.kraft__wrap { max-width: var(--wrap); margin: 0 auto; }
.kraft__head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 40px; }
.kraft__head h2 { font-family: var(--f-chalk-xl); font-size: clamp(60px, 7.4vw, 110px); line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.kraft__head p { padding-bottom: 10px; font-family: var(--f-chalk); font-size: 21px; color: var(--chalk-dim); max-width: 30ch; line-height: 1.25; }
.bags { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 5vw, 80px); max-width: 980px; margin: clamp(70px, 8vw, 110px) auto 0; }
.bag { position: relative; padding: 70px clamp(18px, 3vw, 40px) 46px; color: var(--ink); background: var(--kraft); background-image: var(--noise-dark), linear-gradient(90deg, rgba(0,0,0,.16), transparent 12%, transparent 88%, rgba(0,0,0,.2)), linear-gradient(180deg, rgba(0,0,0,.14), transparent 60px); background-size: 220px, auto, auto; background-blend-mode: multiply, normal, normal; rotate: -1.2deg;
  clip-path: polygon(0 10px, 4% 0, 8% 10px, 12% 0, 16% 10px, 20% 0, 24% 10px, 28% 0, 32% 10px, 36% 0, 40% 10px, 44% 0, 48% 10px, 52% 0, 56% 10px, 60% 0, 64% 10px, 68% 0, 72% 10px, 76% 0, 80% 10px, 84% 0, 88% 10px, 92% 0, 96% 10px, 100% 0, 100% 100%, 0 100%); }
.bag--b { rotate: 1deg; margin-top: 30px; }
.bag::before { content: ""; position: absolute; inset: 40px 0 auto; border-top: 1.5px dashed rgba(35,27,20,.3); }
.bag__handle { position: absolute; top: -58px; left: 50%; width: 150px; height: 100px; margin-left: -75px; border: 5px solid var(--twine); border-bottom: 0; border-radius: 80px 80px 0 0; }
.bags .bag { clip-path: none; }
.bags .bag::after { content: ""; position: absolute; left: 0; right: 0; top: -9px; height: 10px; background: inherit; background-image: none; background-color: var(--kraft-d);
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) 50% / 18px 100%; }
.bag { box-shadow: 0 50px 60px -34px rgba(0,0,0,.9); }
.bag__label { position: relative; padding: 24px 24px 22px; background: #fdfcf8; border-radius: 6px; rotate: 1.4deg; box-shadow: 0 2px 4px rgba(0,0,0,.25); }
.bag--b .bag__label { rotate: -1.6deg; }
.bag__code { font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; color: #4f463c; }
.bag__label h3 { margin: 2px 0 12px; font-family: var(--f-body); font-weight: 800; font-size: clamp(28px, 3vw, 38px); letter-spacing: -.02em; line-height: 1.05; }
.bag__label dl > div { display: flex; align-items: baseline; gap: 6px; padding: 5px 0; font-family: var(--f-mono); font-size: 14px; }
.bag__label dl > div::before { content: ""; order: 1; flex: 1; min-width: 10px; border-bottom: 2px dotted #8c8275; translate: 0 -4px; }
.bag__label dt { color: #4f463c; }
.bag__label dd { order: 2; text-align: right; }
.bag__call { display: inline-flex; align-items: center; min-height: 46px; margin-top: 14px; padding: 8px 18px; background: var(--ink); color: var(--paper); border-radius: 4px; font-weight: 700; font-size: 15px; text-decoration: none; transition: transform .25s var(--ease), background-color .25s var(--ease); }
.bag__call:hover { background: var(--pepper); transform: translateY(-2px); }
.bag__call:active { transform: scale(.97); }
.kraft__demo { max-width: 60ch; margin: 54px auto 0; text-align: center; font-family: var(--f-hand); font-size: 21px; line-height: 1.2; color: var(--chalk-dim); }

/* =========================================================================
   АТМОСФЕРА: СНИМКИ НА БЕЧЁВКЕ
   ========================================================================= */
.wall { position: relative; padding: clamp(50px, 6vw, 90px) var(--gut) clamp(100px, 12vw, 170px); background: var(--noise), linear-gradient(180deg, #231c17, #15110f); background-size: 220px, auto; overflow: hidden; }
.wall__wrap { max-width: 1320px; margin: 0 auto; }
.wall__title { font-family: var(--f-hand); font-weight: 700; font-size: clamp(40px, 5vw, 68px); line-height: 1; color: var(--chalk-y); rotate: -2deg; text-align: center; }
.twine-row { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(14px, 2.4vw, 36px); margin-top: 70px; align-items: start; }
.twine-row__line { position: absolute; left: -10vw; right: -10vw; top: -22px; height: 40px; border-bottom: 3px solid var(--twine); border-radius: 0 0 50% 50% / 0 0 100% 100%; opacity: .9; }
.twine-row .polaroid { padding: 10px 10px 0; }
.twine-row .polaroid figcaption { font-size: 23px; padding: 9px 2px 12px; }
.polaroid--a { rotate: -3deg; margin-top: 2px; }
.polaroid--b { rotate: 2deg; margin-top: 18px; }
.polaroid--c { rotate: -1.5deg; margin-top: 18px; }
.polaroid--d { rotate: 3.5deg; margin-top: 2px; }
.polaroid__peg { position: absolute; top: -22px; left: 50%; z-index: 2; width: 16px; height: 46px; margin-left: -8px; border-radius: 3px; background: linear-gradient(90deg, #d8b483, #b58a55); box-shadow: 0 3px 5px rgba(0,0,0,.5); }
.polaroid__peg::after { content: ""; position: absolute; left: -2px; right: -2px; top: 18px; height: 4px; background: #8d9397; border-radius: 2px; }
.twine-row .polaroid:hover .polaroid__img img { transform: scale(1.05); }

/* =========================================================================
   ОТЗЫВЫ (пример) И ВОПРОСЫ
   ========================================================================= */
.notes { position: relative; padding: clamp(80px, 10vw, 150px) var(--gut); background: radial-gradient(60% 40% at 20% 20%, rgba(255,255,255,.05), transparent 70%), var(--noise), linear-gradient(170deg, #252c2a, #1a1f1e); background-size: auto, 220px, auto; }
.notes__wrap { max-width: var(--wrap); margin: 0 auto; }
.notes__head { max-width: 760px; }
.notes__flag { display: inline-block; padding: 3px 12px 4px; background: var(--chalk-y); color: #2a1c05; font-weight: 800; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; rotate: -2deg; border-radius: 3px; }
.notes__head h2 { margin-top: 16px; font-family: var(--f-chalk); font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; color: var(--chalk); }
.notes__head > p:last-child { margin-top: 10px; color: var(--chalk-dim); font-size: 16px; }
.guest-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(18px, 3vw, 40px); margin-top: 50px; align-items: start; }
.guest-note { position: relative; padding: 30px 26px 24px; color: var(--ink); background: var(--paper); background-image: repeating-linear-gradient(180deg, transparent 0 33px, rgba(28,42,110,.22) 33px 34px); background-position: 0 22px; rotate: -1.6deg; box-shadow: 0 30px 40px -22px rgba(0,0,0,.85), 0 2px 5px rgba(0,0,0,.35); }
.guest-note::before { content: ""; position: absolute; top: -12px; left: 50%; width: 96px; height: 26px; margin-left: -48px; background: rgba(255,215,106,.75); rotate: 2deg; }
.guest-note--b { rotate: 1.2deg; margin-top: 26px; }
.guest-note--c { rotate: -.6deg; margin-top: 8px; }
.guest-note blockquote { font-family: var(--f-hand); font-weight: 500; font-size: 25px; line-height: 34px; color: #1c2a5a; }
.guest-note figcaption { margin-top: 18px; font-family: var(--f-mono); font-size: 12.5px; color: var(--ink-2); }

.ask { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(80px, 10vw, 140px); align-items: start; }
.ask__title { font-family: var(--f-chalk-xl); font-size: clamp(54px, 6vw, 88px); line-height: .92; letter-spacing: .02em; text-transform: uppercase; }
.ask details { border-bottom: 2px dotted rgba(243,239,228,.35); }
.ask details:first-child { border-top: 2px dotted rgba(243,239,228,.35); }
.ask summary { position: relative; display: block; padding: 18px 50px 18px 0; min-height: 48px; cursor: pointer; font-family: var(--f-chalk); font-size: clamp(22px, 2.2vw, 27px); line-height: 1.2; list-style: none; transition: color .2s var(--ease); }
.ask summary::-webkit-details-marker { display: none; }
.ask summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 24px; height: 24px; margin-top: -12px; transition: transform .4s var(--ease-spring);
  background: no-repeat 50% / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 4c.4 5-.3 11 0 16M4 12c5 .4 11-.4 16 0' fill='none' stroke='%23ffd76a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E"); }
.ask details[open] summary::after { transform: rotate(45deg); }
.ask summary:hover, .ask details[open] summary { color: var(--chalk-y); }
.ask details p { padding: 0 50px 22px 0; max-width: 60ch; color: var(--chalk-dim); font-size: 16.5px; animation: panel-in .4s var(--ease) both; }

/* =========================================================================
   КАК НАЙТИ: СХЕМА НА САЛФЕТКЕ
   ========================================================================= */
.napkin { position: relative; padding: clamp(90px, 11vw, 160px) var(--gut); color: var(--ink);
  background:
    repeating-linear-gradient(0deg, rgba(90,70,40,.05) 0 1px, transparent 1px 4px),
    repeating-linear-gradient(90deg, rgba(90,70,40,.05) 0 1px, transparent 1px 4px),
    linear-gradient(135deg, #e6dcc5, #efe7d6); }
.napkin__wrap { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(36px, 6vw, 90px); align-items: center; }
.sketch { position: relative; padding: clamp(14px, 2.4vw, 30px); background: #fffefb; rotate: -1.4deg; box-shadow: 0 40px 50px -30px rgba(60,40,15,.6), 0 2px 5px rgba(60,40,15,.25);
  background-image: radial-gradient(rgba(35,27,20,.13) 1px, transparent 1.4px); background-size: 14px 14px; }
.sketch svg { display: block; width: 100%; height: auto; }
.sketch__ink { color: #2b3560; }
.sketch__red { color: var(--pepper); }
.sketch__hand text { font-family: var(--f-hand); font-weight: 600; font-size: 25px; fill: #2b3560; }
.sketch__hand .sketch__hand--red { fill: var(--pepper); font-size: 27px; font-weight: 700; }
.sketch__hand .sketch__hand--sm { font-size: 21px; }
.sketch__note { margin-top: 8px; font-family: var(--f-mono); font-size: 12px; line-height: 1.45; color: var(--ink-2); }
.napkin__info h2 { font-family: var(--f-chalk-xl); font-size: clamp(60px, 6.6vw, 100px); line-height: .9; letter-spacing: .02em; text-transform: uppercase; }
.napkin__info address { margin-top: 20px; font-style: normal; }
.napkin__addr { font-weight: 700; font-size: 21px; line-height: 1.3; }
.door-sign::before { content: ""; position: absolute; top: -2px; left: 50%; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #e8ecee, #8d9397 60%, #4a4f52); box-shadow: 0 2px 3px rgba(0,0,0,.5); }
.door-sign { position: relative; max-width: 300px; margin-top: 50px; padding: 20px 24px 18px; background: var(--slate); color: var(--chalk); border: 8px solid #6b4527; border-radius: 6px; rotate: 2deg; box-shadow: 0 24px 30px -18px rgba(60,40,15,.8); }
.door-sign__cord { display: none; position: absolute; left: 50%; top: -48px; width: 120px; height: 120px; margin-left: -60px; border: 2.5px solid var(--twine); border-radius: 4px; rotate: 45deg; z-index: -1; clip-path: polygon(0 0, 100% 0, 0 100%); scale: 1 .62; transform-origin: 50% 100%; }
.door-sign__open { font-family: var(--f-chalk-xl); font-size: 46px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; color: var(--chalk-y); }
.door-sign dl { margin-top: 8px; }
.door-sign dl > div { display: flex; align-items: baseline; gap: 6px; font-family: var(--f-chalk); font-size: 20px; line-height: 1.4; }
.door-sign dl > div::before { content: ""; order: 1; flex: 1; border-bottom: 2px dotted rgba(243,239,228,.4); translate: 0 -5px; }
.door-sign dd { order: 2; font-variant-numeric: tabular-nums; }

/* =========================================================================
   ФУТЕР: КОНЕЦ ЛЕНТЫ
   ========================================================================= */
.tail { padding: 0 var(--gut) 120px; background: var(--noise), var(--wall); background-size: 220px; }
.tail__tape { position: relative; max-width: 460px; margin: 0 auto; padding: 60px 30px 40px; text-align: center; color: #1d1712; background: #fdfcf8; font-family: var(--f-mono); font-size: 13.5px; line-height: 1.55;
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 14px 100%; }
.tail__brand { font-family: var(--f-chalk-xl); font-size: 58px; line-height: 1; letter-spacing: .06em; text-transform: uppercase; }
.tail__thanks { font-family: var(--f-hand); font-weight: 600; font-size: 27px; color: var(--pepper); rotate: -2deg; }
.tail__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin: 22px 0; padding: 12px 0; border-top: 1.5px dashed #1d1712; border-bottom: 1.5px dashed #1d1712; }
.tail__links a { display: inline-block; padding: 12px 8px; text-underline-offset: 4px; }
.tail__demo { font-size: 12.5px; color: #3d352c; }
.tail__studio { margin-top: 14px; }
.tail__studio a { font-weight: 700; color: #8c1d0e; text-underline-offset: 3px; padding: 8px 0; display: inline-block; }
.tail__copy { font-size: 12px; color: #4f463c; }
.tail .receipt__barcode { margin-bottom: 16px; }

/* =========================================================================
   АДАПТИВ
   ========================================================================= */
@media (max-width: 1180px) {
  .rail__phone { display: none; }
  .board { width: min(760px, 62vw); }
  .order-ticket { left: auto; right: -150px; }
  .carte__wrap { grid-template-columns: minmax(0, 1fr) 280px; }
  .desk__grid { grid-template-columns: minmax(0, 1fr) 340px; }
}

@media (max-width: 1023px) {
  html { scroll-padding-top: 20px; scroll-padding-bottom: 90px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }

  /* рейка уезжает вниз: компактные бумажные ярлыки */
  .rail { inset: auto 0 0 0; height: auto; padding: 0 6px env(safe-area-inset-bottom); gap: 0; display: block; background: linear-gradient(#2a2e30, #121415); box-shadow: 0 -10px 24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2); }
  .rail__bar { display: none; }
  .rail__brand { display: none; }
  .rail__tickets { margin: 0; gap: 5px; padding: 0 2px; justify-content: center; }
  .rail__tickets li { flex: 1 1 0; min-width: 0; max-width: 130px; rotate: 0deg !important; margin-top: -8px !important; filter: none; }
  .rail__tickets li:hover, .rail__tickets li:focus-within { transform: none; }
  .rail__tickets li:has([aria-current="true"]) { transform: translateY(-6px); }
  .tab-ticket { min-width: 0; padding: 9px 2px 12px; text-align: center; font-size: 12.5px; letter-spacing: 0; border-radius: 7px 7px 0 0; -webkit-mask: none; mask: none; min-height: 58px; box-shadow: 0 -4px 10px rgba(0,0,0,.4); }
  .tab-ticket__no { font-size: 9px; margin-bottom: 2px; }
  .tab-ticket__t { padding-bottom: 3px; white-space: nowrap; }

  .demo-pill { top: 12px; right: 12px; min-height: 44px; padding: 0 12px; font-size: 11px; }

  .today { min-height: 0; padding: 0 0 46px; }
  .today__photo { inset: 0 0 auto 0; width: 100%; height: min(46vh, 380px);
    -webkit-mask: linear-gradient(180deg, #000 60%, transparent); mask: linear-gradient(180deg, #000 60%, transparent); }
  .today__photo::after { background: linear-gradient(180deg, rgba(10,8,7,.5) 0, transparent 35%); }
  .board { width: auto; max-width: 640px; margin: min(25vh, 212px) 10px 0; padding: 10px; rotate: 0deg; }
  @media (min-width: 660px) { .board { margin-left: auto; margin-right: auto; } }
  .board__slate { padding: 16px 16px 22px; }
  .board__brand { font-size: 14.5px; line-height: 1.25; }
  .board__brand b { font-size: 17px; }
  .board__head { display: block; margin-top: 4px; }
  .board__title { font-size: clamp(54px, 16.5vw, 96px); white-space: normal; }
  .board__date { font-size: 22px; padding: 0; margin: -4px 4px 0 0; rotate: -2deg; }
  .board__date br { display: none; }
  .board__date span:first-child::after { content: ", "; }
  .chalk-underline { width: 86%; height: 11px; margin-bottom: 6px; }
  .board__slogan { font-size: 18.5px; max-width: none; }
  .board__list { margin: 8px -6px 0; }
  .chalk-dish { padding: 5px 8px 6px; min-height: 44px; }
  .chalk-dish__row { font-size: clamp(19.5px, 5.5vw, 26px); gap: 6px; }
  .chalk-dish__dots { min-width: 10px; border-bottom-width: 2px; }
  .chalk-dish__desc { display: none; }
  .chalk-dish.is-on { transform: translateX(4px); }
  .chalk-dish::before { display: none; }
  .oven-chip { margin: 5px 0 0; font-size: 14.5px; }
  .chalk-try { display: none; }
  .board__demo { font-size: 19px; line-height: 1.1; margin-top: 14px; padding-bottom: 14px; }
  .board__demo span { display: none; }
  .chalk-stick { left: 12%; }
  .chalk-stick--y { left: 30%; }
  .order-ticket { position: relative; left: auto; right: auto; top: auto; display: block; width: 218px; margin: -50px 6px -34px auto; padding: 22px 16px 14px 18px; rotate: 3deg; }
  .order-ticket__top { display: none; }
  .order-ticket__main { font-size: 26px; }
  .order-ticket__sub { margin-top: 9px; font-size: 14px; }
  .photo-tag { right: auto; left: 12px; bottom: auto; top: 12px; max-width: min(230px, calc(100vw - 150px)); padding: 9px 12px 8px 24px; rotate: -2deg; clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 calc(100% - 12px), 0 12px); }
  .photo-tag::before { left: 7px; width: 7px; height: 7px; margin-top: -4px; }
  .photo-tag__name { font-size: 20px; }
  .photo-tag__meta { font-size: 10.5px; margin-top: 2px; }
  .photo-tag__link { display: none; }

  .carte__wrap { grid-template-columns: minmax(0, 1fr); }
  .carte__side { display: none; }
  .paper-menu { rotate: 0deg; }
  .carte-row__photo { display: none; margin-top: 10px; overflow: hidden; border: 8px solid #fbf8f1; border-bottom-width: 22px; box-shadow: 0 10px 18px -8px rgba(0,0,0,.5); rotate: -1deg; aspect-ratio: 4 / 3; background: #2a231d; }
  .carte-row__photo img { width: 100%; height: 100%; object-fit: cover; }
  .carte-row[aria-expanded="true"] .carte-row__photo { display: block; animation: panel-in .4s var(--ease) both; }

  .desk__grid { grid-template-columns: minmax(0, 1fr); }
  .printer { position: relative; top: auto; max-width: 400px; margin: 0 auto; width: 100%; }
  .order { rotate: 0deg; }
  .linen__wrap, .napkin__wrap, .ask { grid-template-columns: minmax(0, 1fr); }
  .twine-row { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .twine-row__line { display: none; }
  .guest-notes { grid-template-columns: minmax(0, 1fr); max-width: 520px; }
  .guest-note--b, .guest-note--c { margin-top: 0; }
  .tail { padding-bottom: 60px; }
}

@media (max-width: 640px) {
  .demo-pill { min-height: 40px; }
}

@media (max-width: 720px) {
  body { font-size: 16px; }
  .board__list li:nth-child(6) { display: none; }
  .board__brand { font-size: 0; }
  .board__brand b { font-size: 17px; }
  .paper-menu__cols { columns: 1; }
  .bags { grid-template-columns: minmax(0, 1fr); gap: 90px; max-width: 420px; }
  .bag--b { margin-top: 0; }
  .date-row { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
  .date-chip { min-height: 72px; }
  .date-chip .dow { font-size: 10px; letter-spacing: .04em; }
  .date-chip .dnum { font-size: 20px; }
  .date-chip .mon { font-size: 10px; }
  .time-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .checks { grid-template-columns: minmax(0, 1fr); }
  .punch { gap: 4px; }
  .punch__item { padding: 4px 6px 4px 4px; }
  .punch__label { display: none; }
  .punch__item.is-active .punch__label { display: inline; }
  .order__nav .ink-btn { flex: 1; padding: 12px 14px; }
  .order__body { min-height: 0; }
  .pen-field input, .pen-field textarea { font-size: 25px; }
}

@media (max-width: 374px) {
  .tab-ticket { font-size: 11.5px; }
  .board__demo { padding-right: 0; padding-bottom: 46px; }
  .date-chip .dow { letter-spacing: 0; }
}

@media (hover: none) {
  .order-ticket:hover { transform: none; }
  .date-chip:hover { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; transition-delay: 0ms !important; }
  .js .reveal { opacity: 1; translate: 0 0; }
  .js .chalk-underline, .js .chalk-underline > span { transform: none; animation: none; }
  .today__photo img { transform: none; }
}

/* одна колонка, когда позиций мало */
.paper-menu__cols.is-single { columns: 1; max-width: 560px; }

/* Стандарт кнопки «← KODOR CODE · демо» во всех демо (30.09.2026): справа вверху, отступ 16px, высота 40px, шрифт от 11px; оформление — своё у каждого демо */
.demo-pill { top: 16px; right: 16px; min-height: 40px; }