/* Шашлычная №1. Токены и правила: см. DESIGN.md */
:root{
  /* палитра из спецификации mitberi: тёмно-серая; красный акцент */
  --night:#242424; --night-2:#2e2e2e; --night-3:#3d3d3d; --deep:#1a1918; --canvas:#363130;
  --bone:#ffffff; --mist:#d4d4d6; --dim:#a3a3a8; --line:rgba(255,255,255,.12);
  --ember:#d92a40; --flame:#f05341; --steppe:#d4d4d6; --paper:#efefef; --ink:#1a1918;
  --ok:#6FCF97; --bad:#ff8a7a; --focus:#ffffff;
  --head:'Russo One','Arial Black',Impact,sans-serif; --display:'Bebas Neue','Arial Narrow',Impact,sans-serif; --body:'Roboto','Segoe UI',Arial,sans-serif;
  --r:8px; --topbar:56px; --gut:clamp(16px,4vw,32px);
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--topbar) + 56px)}
body{background:var(--night);color:var(--bone);font:400 17px/1.5 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--head);font-weight:700;line-height:1.12}
a{color:var(--steppe);text-underline-offset:3px} a:hover{color:var(--bone)}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[hidden]{display:none!important}
.muted{color:var(--mist)}
.wrap{width:min(1120px,100% - 2*var(--gut));margin-inline:auto}
.skip{position:absolute;left:8px;top:-60px;z-index:300;padding:10px 14px;background:var(--steppe);color:var(--ink);border-radius:var(--r);font-weight:700}
.skip:focus{top:8px}
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ---------- шапка ---------- */
.topbar{position:sticky;top:0;z-index:50;height:var(--topbar);display:flex;align-items:center;gap:20px;padding:0 var(--gut);background:var(--night);border-bottom:1px solid var(--line)}
.logo{display:flex;align-items:center;gap:9px;font:800 19px var(--head);color:var(--bone);text-decoration:none;white-space:nowrap}
.logo:hover{color:var(--bone)}
.topnav{display:flex;gap:24px;margin-left:auto}
.topnav a{color:var(--mist);text-decoration:none;font-size:16px;padding:6px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.topnav a:hover{color:var(--bone);border-color:var(--ember)}
.topactions{display:flex;gap:8px;margin-left:12px}
.btn-quiet{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r);color:var(--bone);font-size:16px;transition:background .15s}
.btn-quiet:hover{background:var(--night-2)}
.btn-cart{position:relative;display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:var(--r);background:var(--ember);color:var(--night);font-weight:700;transition:filter .15s}
.btn-cart:hover{filter:brightness(1.08)}
.badge{position:absolute;top:-7px;right:-7px;min-width:21px;height:21px;border-radius:11px;background:var(--steppe);color:var(--ink);font:700 12px/21px var(--body);text-align:center;padding:0 5px}

/* ---------- кнопки ---------- */
.btn-ember{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;border-radius:var(--r);background:var(--ember);color:var(--night);font-weight:700;font-size:17px;transition:filter .15s,transform .15s}
.btn-ember:hover{filter:brightness(1.08)}
.btn-ember:active{transform:translateY(1px)}
.btn-ember:disabled{opacity:.4;pointer-events:none}
.btn-outline{display:inline-flex;align-items:center;justify-content:center;padding:13px 22px;border-radius:var(--r);border:1.5px solid var(--mist);color:var(--bone);font-weight:700;font-size:17px;transition:background .15s,border-color .15s}
.btn-outline:hover{background:var(--night-2);border-color:var(--bone)}

/* ---------- первый экран ---------- */
.hero{position:relative;isolation:isolate;background:var(--deep);overflow:hidden}
.scene{height:clamp(300px,46svh,420px)}
.scene canvas{display:block;width:100%;height:100%}
#embers{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
body.has3d #embers{display:none}
.hero-copy{position:relative;padding:8px var(--gut) 40px;max-width:640px}
.hero h1{font-size:clamp(44px,12vw,96px);font-weight:800;letter-spacing:-.01em;margin-bottom:14px}
.lead{font-size:19px;color:#d4d4d6;max-width:30em;margin-bottom:24px}
.cta{display:flex;gap:12px;flex-wrap:wrap}
.hero-addr{margin-top:20px;color:var(--mist);font-size:15px}
@media (min-width:900px){
  .hero{min-height:min(88svh,720px);display:flex;align-items:flex-end}
  .scene{position:absolute;inset:0;height:auto;z-index:-1}
  .hero-copy{padding:0 0 64px;margin-left:max(var(--gut),calc((100% - 1120px)/2));max-width:520px}
}

/* ---------- меню ---------- */
.menu-wrap{width:min(1120px,100% - 2*var(--gut));margin:0 auto;padding-top:56px}
.menu-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.menu-head h2,.promos h2,.info h2{font-size:clamp(32px,6vw,44px)}
.mode{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:var(--r);background:var(--night-2)}
.mode button{display:inline-flex;align-items:center;padding:9px 16px;border-radius:6px;font-weight:700;font-size:16px;color:var(--mist);transition:background .15s,color .15s}
.mode button.on{background:var(--bone);color:var(--night)}
i[data-ico]{display:inline-flex;margin-right:7px}

.catbar{position:sticky;top:var(--topbar);z-index:40;margin:12px calc(-1*var(--gut)) 0;padding:0 var(--gut);background:var(--night);border-bottom:1px solid var(--line)}
.cats{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.cats::-webkit-scrollbar{display:none}
.chip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:14px 12px 12px;color:var(--mist);font-weight:700;font-size:16px;white-space:nowrap;border-bottom:3px solid transparent;transition:color .15s,border-color .15s}
.chip:hover{color:var(--bone)}
.chip.on{color:var(--bone);border-bottom-color:var(--ember)}
.chip .ico{width:18px;height:18px}

.cat{padding-top:44px}
.cat-title{display:flex;align-items:baseline;gap:12px;font-size:clamp(26px,4.5vw,34px);margin-bottom:6px}
.cat-title .ico{display:none}
.list{display:grid;grid-template-columns:1fr 1fr;column-gap:48px}
.row{display:flex;align-items:center;gap:14px;padding:14px 8px;margin:0 -8px;border-bottom:1px solid var(--line);border-radius:6px;transition:background .15s}
.row:hover{background:var(--night-2)}
.thumb{flex:none;width:56px;height:56px;display:grid;place-items:center;border-radius:6px;background:var(--night-2);color:var(--mist);overflow:hidden}
.thumb .ico{width:28px;height:28px;stroke-width:1.4}
.thumb img{width:100%;height:100%;object-fit:cover}
.row-main{flex:1;min-width:0}
.row-line{display:flex;align-items:baseline;gap:8px}
.nm{font:700 18px/1.25 var(--body);letter-spacing:0}
.dots{flex:1;min-width:16px;border-bottom:2px dotted rgba(157,176,194,.4);translate:0 -4px}
.pr{font:800 19px var(--head);white-space:nowrap;font-variant-numeric:tabular-nums}
.pr small{font:400 13px var(--body);color:var(--mist);margin-left:3px}
.w{color:var(--mist);font-size:15px;margin-top:2px}
.ctl{flex:none;min-width:44px;display:flex;justify-content:flex-end}
.add{width:44px;height:44px;border-radius:var(--r);background:var(--ember);color:var(--night);display:grid;place-items:center;transition:filter .15s}
.add:hover{filter:brightness(1.1)}
.add .ico{width:22px;height:22px;stroke-width:2.2}
.add.text{width:auto;padding:0 14px;font-weight:700;font-size:15px}
.step{display:inline-flex;align-items:center;border:1.5px solid var(--ember);border-radius:var(--r);overflow:hidden}
.step button{width:40px;height:40px;font-size:22px;line-height:1;color:var(--ember);transition:background .15s}
.step button:hover{background:rgba(255,90,31,.14)}
.step output{min-width:34px;text-align:center;font-weight:700}
.soldout .nm,.soldout .pr{opacity:.5}
.soldout .add{background:var(--night-3);color:var(--mist);pointer-events:none;font-size:14px}

/* ---------- талоны и баллы ---------- */
.promos,.info{padding:72px 0 0}
.loyalty{margin:24px 0 20px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.panel{padding:24px;border:1px solid var(--line);border-radius:var(--r);background:var(--night-2)}
.panel h3{font-size:22px;margin-bottom:6px}
.points{font:800 56px/1 var(--head);color:var(--steppe);margin:10px 0 6px;font-variant-numeric:tabular-nums}
.panel .row2{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px}
.promo-input{display:flex;gap:8px;margin-top:14px}
.promo-input input{flex:1;min-width:0}
.promo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px}
.ticket{position:relative;display:grid;grid-template-columns:1fr auto;background:var(--steppe);color:var(--ink);border-radius:2px;padding:18px 0 18px 22px}
.ticket::before,.ticket::after{content:"";position:absolute;left:-9px;width:18px;height:18px;border-radius:50%;background:var(--night)}
.ticket::before{top:calc(50% - 9px)}
.ticket::after{left:auto;right:-9px;top:calc(50% - 9px)}
.ticket h3{font-size:19px;margin-bottom:4px;padding-right:12px}
.ticket p{font-size:15px;padding-right:12px;opacity:.85}
.ticket .stub{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;padding:0 20px;border-left:2px dashed rgba(27,22,18,.4);min-width:116px;text-align:center}
.ticket .code{font:800 17px var(--head);letter-spacing:.04em}
.ticket .sample{font-size:12px;font-weight:700;padding:2px 8px;border-radius:2px;background:var(--ink);color:var(--steppe)}

/* ---------- как получить заказ ---------- */
.info-cols{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:24px}
.info-cols h3{font-size:24px;margin-bottom:8px}
.info-cols p{color:#d4d4d6;max-width:34em}
.addr{color:var(--bone)!important;font-weight:700;font-size:19px}
.facts{list-style:none;padding:0;margin-top:14px;display:grid;gap:8px}
.facts li{padding-left:16px;position:relative;color:#d4d4d6}
.facts li::before{content:"";position:absolute;left:0;top:.7em;width:6px;height:6px;border-radius:50%;background:var(--ember)}
.contacts{margin-top:88px;border-top:1px solid var(--line);background:#1a1918;padding-top:40px}
.foot{display:grid;grid-template-columns:1.4fr 1fr;gap:32px}
.foot-name{font:800 22px var(--head);margin-bottom:8px}
.contacts p{margin-bottom:6px;color:#d4d4d6}
.copy{margin-top:32px;padding:18px 0 22px;color:var(--mist);font-size:14px;border-top:1px solid var(--line)}

/* ---------- окна ---------- */
.overlay{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:16px;background:rgba(10,10,10,.82);animation:fade .18s ease-out}
@keyframes fade{from{opacity:0}}
.sheet{position:relative;width:min(460px,100%);max-height:calc(100dvh - 32px);overflow:auto;padding:24px;border-radius:12px;background:var(--night-2);border:1px solid var(--line);animation:pop .2s ease-out}
.sheet.narrow{width:min(400px,100%)}
@keyframes pop{from{opacity:0;transform:translateY(12px)}}
.x{position:absolute;top:10px;right:12px;width:40px;height:40px;border-radius:var(--r);font-size:26px;line-height:1;color:var(--mist);z-index:3}
.x:hover{background:rgba(255,255,255,.08);color:var(--bone)}
.sheet h3{font-size:26px;padding-right:36px;margin-bottom:2px}
.im-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:22px}
.im-total{font:800 28px var(--head);font-variant-numeric:tabular-nums}
.opt-group{margin-top:16px}
.opt-group h4{font:700 15px var(--body);color:var(--mist);margin-bottom:8px}
.opt{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;margin-bottom:6px;border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:border-color .15s,background .15s}
.opt:hover{border-color:var(--mist)}
.opt:has(input:checked){border-color:var(--ember);background:rgba(255,90,31,.1)}
.opt input{accent-color:var(--ember);width:18px;height:18px;margin-right:10px}
.opt span:first-child{display:flex;align-items:center}
.weights{display:flex;align-items:center;justify-content:center;gap:18px;padding:10px 0}
.weights output{font:800 36px var(--head);min-width:120px;text-align:center}
.weights button{width:48px;height:48px;border-radius:var(--r);border:1.5px solid var(--ember);font-size:26px;color:var(--ember)}
.weights button:hover{background:rgba(255,90,31,.14)}

/* ---------- корзина = чек ---------- */
.overlay.side{place-items:stretch end;padding:0}
.drawer{--focus:#0C1B2B;position:relative;display:flex;flex-direction:column;width:min(440px,100%);height:100dvh;background:var(--paper);color:var(--ink);animation:slide .22s ease-out}
.drawer::before{content:"";position:absolute;top:0;bottom:0;left:-8px;width:8px;background:radial-gradient(circle at 0 7px,transparent 5px,var(--paper) 5.5px) 0 0/8px 14px repeat-y}
@keyframes slide{from{transform:translateX(32px);opacity:0}}
.dr-head{position:relative;display:flex;align-items:center;padding:18px 22px 14px;border-bottom:2px dashed rgba(27,22,18,.35)}
.dr-head h3{font-size:24px}
.dr-head .x{top:50%;translate:0 -50%;color:#6b6258}
.dr-head .x:hover{background:rgba(27,22,18,.08);color:var(--ink)}
.dr-body{flex:1;overflow:auto;padding:6px 22px 28px}
.drawer .muted,.drawer .sub{color:#6b6258}
.empty{text-align:center;padding:56px 10px;color:#6b6258}
.empty .big{margin-bottom:10px}
.empty .big .ico{width:44px;height:44px;color:var(--ember)}
.line{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:14px 0;border-bottom:1px dashed rgba(27,22,18,.3)}
.line b{font-weight:700;font-size:18px;line-height:1.25}
.line .sub{font-size:15px}
.line .lp{font:800 18px var(--head);text-align:right;font-variant-numeric:tabular-nums}
.line .step{grid-column:2;justify-self:end;margin-top:6px;border-color:var(--ink)}
.line .step button{color:var(--ink)}
.line .step button:hover{background:rgba(27,22,18,.08)}
.sum{margin-top:16px;display:grid;gap:6px}
.sum div{display:flex;justify-content:space-between}
.sum .tot{font:800 28px var(--head);margin-top:6px;padding-top:12px;border-top:2px dashed rgba(27,22,18,.35)}
.sum .disc{color:#1E7A46}
.field{display:grid;gap:6px;margin-top:14px}
.field label{font-size:15px;color:var(--mist);font-weight:700}.drawer .field label{color:#6b6258}
input,select,textarea{width:100%;padding:12px 14px;border-radius:var(--r);border:1.5px solid var(--line);background:var(--night-3);color:var(--bone);font:inherit}
.drawer input,.drawer select,.drawer textarea{background:#fff;border-color:#CFC6B6;color:var(--ink)}
input::placeholder,textarea::placeholder{color:#7f93a6}
.drawer input::placeholder,.drawer textarea::placeholder{color:#9a9184}
input:focus,select:focus,textarea:focus{border-color:var(--ember);outline:none}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px}
.seg label{display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border:1.5px solid #CFC6B6;border-radius:var(--r);cursor:pointer;font-weight:700;font-size:15px;color:var(--ink);text-align:center;transition:border-color .15s,background .15s}
.seg input{position:absolute;opacity:0;pointer-events:none;width:0}
.seg label:has(input:checked){border-color:var(--ink);background:var(--ink);color:var(--paper)}
.seg label:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}
.seg .ico{width:17px;height:17px}
.err{color:var(--bad);font-size:15px;min-height:20px;margin-top:6px}.drawer .err{color:#B3361B}
.back{color:var(--mist);font-size:16px;margin:12px 0 4px;text-decoration:underline;text-underline-offset:3px}
.back:hover{color:var(--bone)}.drawer .back{color:#6b6258}.drawer .back:hover{color:var(--ink)}
.note{margin-top:14px;padding:12px 14px;border-radius:var(--r);background:#F1ECDF;font-size:15px}
.done{text-align:center;padding:36px 4px}
.done .big .ico{width:52px;height:52px;color:var(--ember)}
.done h3{font-size:28px;margin:10px 0}
.codebox{letter-spacing:.5em;text-align:center;font:800 28px var(--head)}
.drawer .btn-ember{color:var(--night)}
.drawer .btn-outline{border-color:var(--ink);color:var(--ink)}
.drawer .btn-outline:hover{background:rgba(27,22,18,.08)}
.drawer .opt{border-color:#CFC6B6}
.drawer .opt:has(input:checked){border-color:var(--ink);background:#F1ECDF}
.drawer .promo-input{margin-top:16px}

.toast{position:fixed;left:50%;bottom:calc(24px + env(safe-area-inset-bottom));translate:-50% 24px;z-index:200;padding:12px 18px;border-radius:var(--r);background:var(--bone);color:var(--night);font-weight:700;font-size:16px;opacity:0;pointer-events:none;transition:opacity .2s,translate .2s;max-width:90vw}
.toast.show{opacity:1;translate:-50% 0}

.mbar{position:fixed;left:0;right:0;bottom:0;z-index:60;padding:10px 14px calc(10px + env(safe-area-inset-bottom));background:linear-gradient(transparent,var(--night) 35%)}
.mbar button{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 18px;border-radius:var(--r);background:var(--ember);color:var(--night);font-weight:700;font-size:17px}
.mbar button span:first-child{background:var(--night);color:var(--bone);border-radius:6px;padding:2px 9px;font-size:15px}
.mbar b{font:800 18px var(--head)}
@media (min-width:561px){.mbar{display:none!important}}

/* ---------- планшет и телефон ---------- */
@media (max-width:900px){
  .topnav{display:none}
  .topactions{margin-left:auto}
  .loyalty,.info-cols,.foot,.list{grid-template-columns:1fr}
  .info-cols{gap:32px}
  .cart-sum{display:none}
  .list{column-gap:0}
}
@media (max-width:560px){
  body{font-size:16px;padding-bottom:84px}
  .btn-quiet span{display:none}
  .btn-quiet{padding:10px}
  .menu-wrap{padding-top:40px}
  .mode{width:100%}.mode button{flex:1;justify-content:center}
  .thumb{width:48px;height:48px}
  .dots{display:none}
  .row-line{justify-content:space-between}
  .overlay:not(.side){place-items:end center;padding:0}
  .sheet{border-radius:12px 12px 0 0;width:100%;max-height:92dvh;padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .drawer::before{display:none}
  .row3{grid-template-columns:1fr 1fr}
  .ticket .stub{min-width:96px;padding:0 12px}
}



/* ================= переоформление: серый + огонь, острые шрифты ================= */
h1,h2,h3,h4{font-family:var(--head);font-weight:400;letter-spacing:.01em}
.logo{font:400 20px var(--head);letter-spacing:.02em}
.hero h1{font:400 clamp(46px,10.5vw,104px)/1 var(--head);letter-spacing:0;text-transform:none;margin-bottom:18px}
.menu-head h2,.promos h2,.info h2{font:400 clamp(44px,8vw,68px)/1 var(--display);letter-spacing:.03em}
.cat-title{font:400 clamp(34px,5.5vw,46px)/1 var(--display);letter-spacing:.04em;color:var(--bone)}
.cat-title::after{content:"";flex:1;height:2px;align-self:center;background:linear-gradient(90deg,var(--flame),transparent 60%);opacity:.5}
.chip{font:400 22px/1 var(--display);letter-spacing:.05em;padding:16px 14px 12px}
.chip.on{border-bottom-color:var(--flame)}
.nm{font:500 18px/1.25 var(--body)}
.pr{font:400 20px var(--head)}
.pr small{font-family:var(--body)}
.points{font:400 64px/1 var(--head);color:var(--flame)}
.panel h3,.info-cols h3{font:400 28px/1 var(--display);letter-spacing:.04em}
.im-total,.weights output{font-family:var(--head);font-weight:400}
.ticket h3{font:400 24px/1 var(--display);letter-spacing:.04em}
.ticket .code{font-family:var(--head);font-weight:400}
.foot-name{font:400 28px var(--head)}
.dr-head h3{font:400 30px/1 var(--display);letter-spacing:.04em}
.line .lp,.sum .tot{font-family:var(--head);font-weight:400}
.codebox{font-family:var(--head);font-weight:400}
.btn-ember,.btn-outline{font-weight:700;letter-spacing:.01em}
.btn-cart,.btn-ember,.add,.mbar button{color:#fff}
.btn-cart{font-weight:700}
.badge{background:#fff;color:var(--ember)}
.mbar button span:first-child{background:#fff;color:var(--ember)}
.mbar b{font-family:var(--head);font-weight:400}
.drawer .btn-ember{color:#fff}
.topnav a:hover,.chip:hover{border-color:var(--flame)}
.mode button.on{background:#fff;color:var(--night)}
.facts li::before{background:var(--flame)}
.step{border-color:var(--flame)}
.step button{color:var(--flame)}
.step button:hover{background:rgba(240,83,65,.16)}
.opt:has(input:checked){border-color:var(--flame);background:rgba(240,83,65,.1)}
.weights button{border-color:var(--flame);color:var(--flame)}
.ticket::before,.ticket::after{background:var(--night)}
.thumb{background:var(--night-2)}
.row:hover{background:var(--night-2)}
input,select,textarea{background:var(--night-3)}
.hero{background:var(--deep)}
.contacts{background:var(--deep)}

/* острые углы там, где просится сталь */
.btn-ember,.btn-outline,.btn-cart,.add,.mode,.mode button,.sheet,.panel,.opt,.step,input,select,textarea{border-radius:3px}
.mode button{border-radius:2px}
.sheet{border-radius:4px}
@media (max-width:560px){.sheet{border-radius:4px 4px 0 0}}

/* ---- боковые огни: еле заметные отсветы по краям страницы ---- */
.sidefire{position:fixed;top:0;bottom:0;width:min(26vw,380px);z-index:0;pointer-events:none;opacity:.55;will-change:opacity,transform}
.sidefire.l{left:0;background:radial-gradient(ellipse 85% 55% at 0% 78%,rgba(240,83,65,.26),rgba(240,83,65,.08) 45%,transparent 72%),radial-gradient(ellipse 60% 30% at 0% 35%,rgba(255,150,60,.12),transparent 70%);animation:flickL 4.3s ease-in-out infinite}
.sidefire.r{right:0;background:radial-gradient(ellipse 85% 55% at 100% 66%,rgba(240,83,65,.26),rgba(240,83,65,.08) 45%,transparent 72%),radial-gradient(ellipse 60% 30% at 100% 22%,rgba(255,150,60,.12),transparent 70%);animation:flickR 5.1s ease-in-out infinite}
@keyframes flickL{0%,100%{opacity:.42;transform:translateY(0)}18%{opacity:.7}37%{opacity:.5;transform:translateY(6px)}58%{opacity:.78}79%{opacity:.46;transform:translateY(-4px)}}
@keyframes flickR{0%,100%{opacity:.5;transform:translateY(0)}24%{opacity:.76;transform:translateY(-5px)}46%{opacity:.4}69%{opacity:.72;transform:translateY(4px)}86%{opacity:.48}}
.topbar,.hero,.menu-wrap,.promos,.info,.contacts,.mbar{position:relative;z-index:1}
.topbar{position:sticky;z-index:50}
.catbar{z-index:40}
.mbar{position:fixed;z-index:60}
@media (max-width:900px){.sidefire{width:34vw;opacity:.5}}

/* ---- появление блоков при прокрутке (fade / slideUp / scale / blur), один раз ---- */
.js .rv{opacity:0;transition:opacity .5s ease-in-out,transform .5s ease-in-out,filter .5s ease-in-out;will-change:opacity,transform}
.js .rv[data-rv="up"]{transform:translateY(28px)}
.js .rv[data-rv="scale"]{transform:scale(.96)}
.js .rv[data-rv="blur"]{filter:blur(8px)}
.js .rv.in{opacity:1;transform:none;filter:none}
html:not(.js) .rv{opacity:1}
.js .hero-copy>*{transition-delay:0s}
.js .rv.in:nth-child(2){transition-delay:.08s}.js .rv.in:nth-child(3){transition-delay:.16s}.js .rv.in:nth-child(4){transition-delay:.24s}

/* ---- заставка: два ножа рассекают экран ---- */
html.intro-on,html.intro-on body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden}
.ip{position:absolute;inset:0;background:#121110;will-change:transform,opacity}
.ip::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(240,83,65,.12),transparent 55%)}
.ip-top{clip-path:polygon(0 0,100% 0,50% 50%)}
.ip-right{clip-path:polygon(100% 0,100% 100%,50% 50%)}
.ip-bottom{clip-path:polygon(0 100%,100% 100%,50% 50%)}
.ip-left{clip-path:polygon(0 0,0 100%,50% 50%)}
.track{position:absolute;left:50%;top:50%;width:0;height:0}
.cut{position:absolute;top:-2px;height:4px;transform-origin:left center;background:linear-gradient(90deg,rgba(255,255,255,0),#fff 12%,#ffb08a 55%,#f05341);box-shadow:0 0 14px 3px rgba(240,83,65,.75),0 0 40px 8px rgba(240,83,65,.35);transform:scaleX(0)}
.knife{position:absolute;left:-280px;top:-60px;width:560px;height:120px;filter:drop-shadow(0 12px 18px rgba(0,0,0,.7));will-change:transform;transform:translateX(-3000px)}
.knife svg{display:block}
.flash{position:absolute;left:50%;top:50%;width:min(90vw,90vh);height:min(90vw,90vh);margin:calc(min(90vw,90vh)/-2) 0 0 calc(min(90vw,90vh)/-2);border-radius:50%;background:radial-gradient(circle,#fff 0,#ffd9b0 14%,rgba(240,83,65,.55) 36%,transparent 68%);opacity:0}
.burst{position:absolute;left:50%;top:50%;width:0;height:0}
.burst i{position:absolute;left:0;top:-1.5px;height:3px;border-radius:2px;transform-origin:0 50%;opacity:0}

html.intro-on::before{content:"";position:fixed;inset:0;background:#121110;z-index:999}

.topnav a{white-space:nowrap}
@media (max-width:1020px){.topnav{display:none}.topactions{margin-left:auto}}

html[data-motion="off"] *,html[data-motion="off"] *::before,html[data-motion="off"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
html[data-motion="off"] .intro{display:none}
html[data-motion="off"] .js .rv{opacity:1;transform:none;filter:none}
html[data-motion="gentle"] .js .rv[data-rv]{transform:none;filter:none}
.motion-toggle{margin-top:10px;padding:8px 12px;border:1px solid var(--line);border-radius:3px;color:var(--mist);font-size:15px}
.motion-toggle:hover{color:#fff;border-color:var(--mist)}

/* заголовок: слово читается поверх огня, «№1» ярко-красное */
.hero h1 .h1-a,.hero h1 .h1-n{display:block}
.hero h1 .h1-a{text-shadow:0 2px 3px rgba(0,0,0,.65),0 0 28px rgba(0,0,0,.7)}
.hero h1 .h1-n{color:#ff1f2d;text-shadow:0 0 34px rgba(255,31,45,.5),0 2px 3px rgba(0,0,0,.6)}
.logo .red{color:#ff1f2d;font-weight:400}
@media (min-width:900px){
  .hero{align-items:flex-start}
  .hero-copy{padding:clamp(40px,8vh,88px) 0 64px;z-index:2}
}
@media (min-width:900px){.lead{max-width:22em;text-shadow:0 1px 3px rgba(0,0,0,.8),0 0 18px rgba(0,0,0,.8)}.hero-addr{text-shadow:0 1px 3px rgba(0,0,0,.8)}}

/* ================= v3: необычные шрифты, структура, доступность ================= */
:root{
  --xl:'Stalinist One','Arial Black',Impact,sans-serif;       /* только заголовок первого экрана и подпись в подвале */
  --head:'Ruslan Display','Arial Black',Impact,sans-serif;    /* разделы, вкладки, названия блоков: нет цифр */
  --num:'Podkova','Rockwell',Georgia,serif;                   /* цены, суммы, номера: есть цифры и ₽ */
  --body:'Golos Text','Segoe UI',Arial,sans-serif;
  --display:var(--head);
}
body{font-family:var(--body)}
h1,h2,h3,h4{font-weight:400}
.hero h1{font-family:var(--xl);font-size:clamp(28px,8vw,56px);line-height:1.1;letter-spacing:.005em}
.hero h1 .h1-n{font-size:1.65em;line-height:1.05;margin-top:.1em;letter-spacing:0}
.menu-head h2,.promos h2,.info h2{font:400 clamp(36px,6vw,56px)/1.05 var(--head);letter-spacing:.02em}
.cat-title{font:400 clamp(28px,4.6vw,38px)/1.1 var(--head);letter-spacing:.02em}
.cat-title::after{height:1px;background:var(--line);opacity:1}
.chip{font:400 18px/1 var(--head);letter-spacing:.02em}
.logo{font:400 21px/1 var(--head);letter-spacing:.02em}
.logo .red{font-family:var(--num);font-weight:800;letter-spacing:0}
.foot-name{font:400 17px/1.3 var(--xl)}
.panel h3,.info-cols h3,.ticket h3,.dr-head h3{font-family:var(--head);letter-spacing:.02em}
.pr,.points,.im-total,.weights output,.line .lp,.sum .tot,.mbar b,.ticket .code,.codebox,.done h3,.sheet h3{font-family:var(--num);font-weight:800;letter-spacing:0}
.nm{font-weight:500}

/* меню читается сверху вниз по колонкам, а не змейкой */
.list{display:block;column-count:2;column-gap:48px}
.row{break-inside:avoid}
@media (max-width:900px){.list{column-count:1}}

/* смена фона между блоками: меню и подвал тёмные, талоны на приподнятой полосе */
.promos{background:var(--night-2);margin-top:72px;padding:64px 0;border-block:1px solid var(--line)}
.promos .panel{background:var(--night)}
.promos .ticket::before,.promos .ticket::after{background:var(--night-2)}

/* доступность */
input::placeholder,textarea::placeholder{color:#b4b4ba}
.drawer input::placeholder,.drawer textarea::placeholder{color:#6b6258}
.x{width:44px;height:44px}
.step button{width:44px;height:44px}
.mode button,.btn-quiet,.motion-toggle{min-height:44px}
.pr small,.ticket .sample{font-size:13px}
.row:focus-within{background:var(--night-2)}
.add:active,.btn-outline:active,.step button:active,.weights button:active,.mode button:active{transform:translateY(1px)}
.ticket h3{font:700 18px/1.25 var(--body);letter-spacing:0}

/* ================= v4: фото блюд, конструктор подноса, комбо, предзаказ, баллы ================= */
.noimg{display:grid;place-items:center;width:100%;height:100%;color:var(--mist);background:var(--night-2)}
.noimg .ico{width:34px;height:34px;stroke-width:1.3}
.thumb{width:116px;height:82px;border-radius:4px;background:var(--night-3)}
.thumb img{width:100%;height:100%;object-fit:cover;display:block}
.row{gap:16px;padding:14px 10px;margin:0 -10px}
.cat-note{max-width:46em;margin:6px 0 18px;color:var(--mist)}
.img-note,.fine{margin-top:14px;font-size:14px;color:var(--mist)}
.drawer .fine{color:#6b6258}
.loading{padding:48px 0;text-align:center;color:var(--mist)}
.linkbtn{padding:8px 0;color:var(--mist);text-decoration:underline;text-underline-offset:3px;font-size:15px;min-height:44px}
.linkbtn:hover{color:var(--bone)}

/* баллы у иконки аккаунта */
.pts{display:inline-flex;align-items:center;gap:4px;padding:3px 9px 3px 7px;border-radius:3px;background:var(--steppe);color:var(--ink);font-size:14px;line-height:1}
.pts .ico{width:14px;height:14px;fill:currentColor;stroke:none}
.pts b{font:800 15px var(--num)}
@media (max-width:560px){.btn-quiet .pts{display:inline-flex}.btn-quiet .pts[hidden]{display:none}}

/* окно выбора позиции и предзаказа: картинка сверху */
.im-img{display:block;margin:-24px -24px 16px;overflow:hidden;border-radius:4px 4px 0 0;background:var(--night-3)}
.im-img img,.pre-img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block}
.pre-img{margin:-24px -24px 16px;width:calc(100% + 48px);max-width:none;border-radius:4px 4px 0 0}
.sheet.wide{width:min(560px,100%)}
.row2g{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sheet .sum .tot{border-top-color:var(--line)}
.sheet .note{background:var(--night-3);color:var(--bone);margin-top:0;margin-bottom:6px}
.who{font:800 22px var(--num);margin:6px 0 12px}
.subh{font:400 22px/1 var(--head);margin:18px 0 8px}
.myorders .mo{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line)}
.demo{color:var(--flame)}
.step.sm button{width:36px;height:36px;font-size:18px}
.step.sm output{min-width:28px;font-size:14px}
.sum .disc,.line .sub.disc{color:#7ee0a4}
.drawer .sum .disc,.drawer .line .sub.disc{color:#1E7A46}

/* ---- конструктор ассорти ---- */
.bld{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(300px,1fr);gap:28px;align-items:start}
.bld-filter{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.bld-filter button{min-height:44px;padding:8px 16px;border:1.5px solid var(--line);border-radius:3px;font-weight:700;font-size:15px;color:var(--mist);transition:border-color .15s,color .15s,background .15s}
.bld-filter button:hover{color:var(--bone);border-color:var(--mist)}
.bld-filter button[aria-pressed="true"]{background:var(--bone);color:var(--night);border-color:var(--bone)}
.bld-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(168px,1fr));gap:12px}
.bld-grid [hidden]{display:none}
.bcard{position:relative;display:grid;grid-template-rows:auto auto auto auto;text-align:left;padding:0 0 10px;border:1.5px solid var(--line);border-radius:4px;background:var(--night-2);overflow:hidden;transition:border-color .15s,background .15s}
.bcard[hidden]{display:none}
.bcard:hover{border-color:var(--mist)}
.bcard.picked{border-color:var(--flame);background:#2b2523}
.bcard img,.bcard .noimg{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;height:auto}
.bcard .bn{padding:9px 10px 0;font-weight:700;font-size:16px;line-height:1.25}
.bcard .bw{padding:2px 10px 0;font-size:14px;color:var(--mist)}
.bcard .bp{padding:4px 10px 0;font:800 17px var(--num)}
.bcard .bplus{position:absolute;right:8px;top:8px;width:36px;height:36px;display:grid;place-items:center;border-radius:3px;background:var(--ember);color:#fff}
.bcard .bplus .ico{width:20px;height:20px;stroke-width:2.2}
.bcard .bcount{position:absolute;left:8px;top:8px;padding:3px 9px;border-radius:3px;background:var(--steppe);color:var(--ink);font:800 15px var(--num)}
.bcard .bcount[hidden]{display:none}
.bld-tray{position:sticky;top:calc(var(--topbar) + 70px);padding:18px;border:1px solid var(--line);border-radius:6px;background:var(--night-2)}
.bld-tray h4{font:400 26px/1 var(--head);margin-bottom:12px}
.tray{min-height:240px;padding:12px;display:grid;gap:8px;align-content:start;border-radius:14px;background:#141516;border:2px solid #666b72;box-shadow:inset 0 0 0 5px #222427,inset 0 0 0 6px #4a4f55,inset 0 24px 48px rgba(0,0,0,.55)}
.ttile{display:grid;grid-template-columns:84px 1fr auto;gap:10px;align-items:center;padding:6px;border-radius:4px;background:rgba(255,255,255,.04)}
.ttile img,.ttile .noimg{width:84px;height:58px;object-fit:cover;border-radius:3px;display:block}
.tinfo{display:grid;gap:1px;min-width:0}
.tinfo b{font-size:15px;line-height:1.25;font-weight:500}
.tinfo span{font-size:13px;color:var(--mist)}
.tinfo .tprice{font:800 15px var(--num);color:var(--bone)}
.tray-empty{display:grid;place-items:center;gap:8px;text-align:center;min-height:200px;color:var(--mist);align-content:center}
.tray-empty .ico{width:44px;height:44px;stroke-width:1.2}
.tray-foot{display:grid;gap:8px;margin-top:14px}
.tray-sum{display:flex;justify-content:space-between;align-items:baseline;font-size:17px}
.tray-sum b{font:800 28px var(--num)}
.tray-foot .btn-ember{width:100%}
.linkbtn[hidden]{display:none}
@media (max-width:900px){.bld{grid-template-columns:1fr}.bld-tray{position:static}}

/* ---- деликатесы: отдельная зона, заказ за 24 часа ---- */
.cat--pre{margin-top:80px;padding:32px clamp(16px,3vw,32px) 28px;background:#1b1512;border:1px solid rgba(240,83,65,.35);border-left:5px solid var(--ember);border-radius:4px}
.cat--pre .cat-title{margin-bottom:10px}
.pre-note{max-width:48em;padding:12px 16px;margin-bottom:20px;background:rgba(240,83,65,.1);border-radius:3px;color:#f4e9e4}
.pre-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.pre-card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:4px;background:var(--night);overflow:hidden}
.pimg img,.pimg .noimg{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;height:auto}
.pbody{display:flex;flex-direction:column;gap:2px;padding:14px 16px 16px;flex:1}
.pbody h4{font:400 30px/1 var(--head)}
.pw{color:var(--mist);font-size:15px}
.pp{font:800 24px var(--num);margin:6px 0 12px}
.pp small{font:400 14px var(--body);color:var(--mist)}
.pbody .btn-outline{margin-top:auto}

@media (max-width:560px){
  .thumb{width:96px;height:70px}
  .row{gap:12px}
  .combos{grid-template-columns:1fr}
  .row2g{grid-template-columns:1fr}
  .ttile{grid-template-columns:70px 1fr auto}.ttile img,.ttile .noimg{width:70px;height:50px}
  .im-img,.pre-img{margin:-24px -24px 14px}
}


/* v5: шапка на узком экране не должна вылезать за края (логотип + баллы + корзина) */
@media (max-width:560px){
  .topbar{gap:8px;padding:0 12px}
  .logo{font-size:15px;gap:6px}
  .logo svg{width:15px;height:19px}
  .topactions{gap:4px;margin-left:auto}
  .btn-quiet{padding:8px 6px}
  .btn-cart{padding:8px 10px}
  .pts{padding:3px 7px 3px 5px}
}
@media (max-width:360px){.logo{font-size:13px}}

/* v6: конструктор на телефоне: две колонки компактных карточек */
@media (max-width:560px){
  .bld-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .bcard .bn{font-size:15px;padding:8px 8px 0}
  .bcard .bw,.bcard .bp{padding-left:8px;padding-right:8px}
  .bcard .bplus{width:32px;height:32px}
  .bld-filter button{padding:8px 12px}
  .cbody h4,.pbody h4{font-size:28px}
}

/* ================= v7: заглушки вместо фото, конструктор без картинок, примеры подносов, просмотр фото ================= */
/* место под фото блюда, пока фото нет */
.ph{display:grid;place-items:center;align-content:center;gap:4px;width:100%;height:100%;padding:6px;color:#c4c4c8;font-size:12px;line-height:1.2;text-align:center;background:repeating-linear-gradient(135deg,rgba(255,255,255,.04) 0 7px,transparent 7px 14px),var(--night-3);border:1px dashed rgba(255,255,255,.22);border-radius:inherit}
.ph .ico{width:24px;height:24px;stroke-width:1.4}
.cimg .ph,.pimg .ph{aspect-ratio:3/2;height:auto;border-width:0 0 1px;border-radius:0;font-size:14px}
.cimg .ph .ico,.pimg .ph .ico{width:34px;height:34px}

/* конструктор подноса: просто блюда, которые кладутся на поднос */
.bld-grid{grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.bcard{grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;row-gap:4px;align-items:center;align-content:center;min-height:76px;padding:12px 12px 12px 14px;overflow:visible}
.bcard .bn{grid-column:1;padding:0;font-size:16px}
.bcard .bmeta{grid-column:1;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.bcard .bw,.bcard .bp{padding:0}
.bcard .bplus{position:static;grid-column:2;grid-row:1 / 3;width:40px;height:40px}
.bcard .bcount{left:auto;right:-6px;top:-9px;padding:2px 8px;font-size:14px}
.ttile{grid-template-columns:minmax(0,1fr) auto;padding:8px 8px 8px 12px}
@media (max-width:560px){
  .bld-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bcard{padding:10px 8px 10px 10px;column-gap:8px;min-height:84px}
  .bcard .bn{font-size:15px;padding:0}
  .bcard .bw,.bcard .bp{padding:0}
  .bcard .bplus{width:34px;height:34px}
  .ttile{grid-template-columns:minmax(0,1fr) auto}
}

/* примеры: что можно собрать (9 фото после первого экрана) */
.examples{position:relative;z-index:1;padding:72px 0 8px}
.ex-head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:8px 32px;margin-bottom:24px}
.ex-head h2{grid-column:1;font:400 clamp(34px,5.6vw,52px)/1.05 var(--head);letter-spacing:.02em}
.ex-head p{grid-column:1;max-width:36em;color:var(--mist)}
.ex-head .btn-outline{grid-column:2;grid-row:1 / 3;white-space:nowrap}
.ex-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(150px,19vw,250px);gap:10px}
.ex-grid li{min-width:0}
.ex-grid .ex-big{grid-column:span 2;grid-row:span 2}
.ex{position:relative;display:block;height:100%;overflow:hidden;border-radius:4px;background:var(--night-2);color:#fff;text-decoration:none}
.ex img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.ex:hover img,.ex:focus-visible img{transform:scale(1.04)}
.ex::after{content:"";position:absolute;inset:auto 0 0;height:50%;background:linear-gradient(rgba(10,9,9,0),rgba(10,9,9,.85));pointer-events:none}
.ex-cap{position:absolute;left:14px;right:14px;bottom:12px;z-index:1;font-weight:700;font-size:16px;line-height:1.25;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.ex-big .ex-cap{left:20px;bottom:18px;font-size:20px}
.ex:hover{color:#fff}
.ex:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (max-width:700px){
  .examples{padding-top:48px}
  .ex-head{grid-template-columns:1fr}
  .ex-head .btn-outline{grid-column:1;grid-row:auto;justify-self:start;margin-top:8px}
  .ex-grid{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:clamp(130px,40vw,220px);gap:8px}
  .ex-cap{left:10px;right:10px;bottom:9px;font-size:14px}
  .ex-big .ex-cap{left:14px;bottom:12px;font-size:17px}
}

/* ================= v8: «Популярно и выгодно» — карточка-кнопка: снаружи название и цена, состав в окне ================= */
button.ex{width:100%;padding:0;border:0;text-align:left;cursor:pointer;font:inherit}
.ex .ph{border-radius:0;border:0}
.ex-cap{display:flex;justify-content:space-between;align-items:flex-end;gap:10px}
.ex-name{min-width:0}
.ex-price{flex:none;padding:3px 9px;border-radius:3px;background:rgba(20,19,18,.82);font:800 17px/1.2 var(--num);white-space:nowrap;text-shadow:none}
.ex-price small{font:500 13px var(--body);color:var(--mist)}
.ex-price.muted{font:500 14px/1.3 var(--body);color:var(--mist)}
.ex-big .ex-price{font-size:22px;padding:4px 11px}
@media (max-width:700px){.ex-cap{flex-direction:column;align-items:flex-start;gap:4px}.ex-price{font-size:15px}.ex-big .ex-price{font-size:18px}}
.set-parts{list-style:none;padding:0;margin:0;display:grid;gap:4px;font-size:16px}
.set-parts li{position:relative;padding-left:16px}
.set-parts li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--flame)}
.bld-grid{max-height:min(720px,80vh);overflow-y:auto;overscroll-behavior:contain;padding:10px 6px 4px 0;margin-top:-10px}
.bld-pick,.bld-tray{min-width:0}

/* ================= v9: страницы документов (реквизиты, условия, политика) и ссылки на них ================= */
.doc-nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin-left:auto}
.doc-nav a{color:var(--mist);text-decoration:none;padding:8px 0;font-size:15px}
.doc-nav a:hover{color:var(--bone)}
.doc{width:min(820px,100% - 2*var(--gut));margin:0 auto;padding:40px 0 72px}
.doc h1{font:400 clamp(28px,5vw,44px)/1.1 var(--head);letter-spacing:.02em;margin-bottom:8px}
.doc h2{font:700 20px/1.3 var(--body);margin:32px 0 10px}
.doc p,.doc li{color:#e6e6e8;max-width:46em;line-height:1.55}
.doc p+p{margin-top:10px}
.doc ul,.doc ol{padding-left:22px;display:grid;gap:6px;margin-top:6px}
.doc a{color:#fff}
.doc .muted{color:var(--mist)}
.req{margin-top:12px;padding:4px 20px;background:var(--night-2);border:1px solid var(--line);border-radius:4px}
.req-row{display:grid;grid-template-columns:200px minmax(0,1fr);gap:2px 20px;padding:11px 0;border-bottom:1px solid var(--line)}
.req-row:last-child{border-bottom:0}
.req-row dt{color:var(--mist)}
.req-row dd{margin:0;font-weight:500;overflow-wrap:anywhere}
.docpage .contacts{padding:20px 0 28px}
.docpage .copy a,.foot-links a{color:var(--mist)}
.foot-links{display:flex;flex-wrap:wrap;gap:4px 18px;margin-top:8px}
.foot-links a{font-size:14px}
.foot-links a:hover,.docpage .copy a:hover{color:var(--bone)}
.drawer .fine a{color:inherit}
.docpage .topbar{height:auto;min-height:var(--topbar);flex-wrap:wrap;row-gap:0;padding-block:6px}
@media (max-width:560px){.req-row{grid-template-columns:1fr}.doc-nav{gap:0 14px;margin-left:0;width:100%}.doc-nav a{font-size:14px;padding:4px 0}}
@media (max-width:900px){
  .bld-filter{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:calc(-1 * var(--gut));padding-inline:var(--gut)}
  .bld-filter button{flex:none;white-space:nowrap}
  .bld-grid{max-height:62vh}
}