/* ЧИЗZЕРЫ — общая дизайн-система для всех страниц.
   Основа — макет Claude Design (Home.dc.html): чернила #1A1410, бумага #FFF6DC, обводка 2.5px, тень-сдвиг. */
:root{--ink:#1A1410;--paper:#FFF6DC;--y:#FFC21A;--y-hero:#FDBB03;--orange:#FF7A1A;--muted:#5A4E44;--line:2.5px solid var(--ink);--hdr:70px;--pad:clamp(16px,3vw,40px)}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--paper);color:var(--ink);font-family:Onest,sans-serif;-webkit-font-smoothing:antialiased}
body{overflow-x:clip}
a{color:var(--ink)}
img{display:block}
button,input,textarea{font:inherit;color:inherit}
.dela{font-family:"Dela Gothic One",sans-serif;font-weight:400;text-transform:uppercase}
.wrap{max-width:1440px;margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@keyframes chz-pop{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.06);opacity:1}100%{transform:scale(1)}}
@keyframes chz-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* кнопки-таблетки с «тенью-сдвигом» */
.pillbtn{display:inline-flex;align-items:center;gap:10px;padding:18px 28px;border:var(--line);border-radius:999px;font:400 16px/1 "Dela Gothic One";text-transform:uppercase;text-decoration:none;cursor:pointer;transition:transform .15s,box-shadow .15s;background:var(--paper);color:var(--ink)}
.pillbtn.dark{background:var(--ink);color:var(--y)}
.pillbtn.light{background:var(--paper);color:var(--ink)}
.pillbtn.yellow{background:var(--y);color:var(--ink)}
@media (hover:hover){.pillbtn:hover{transform:translate(-3px,-3px);box-shadow:5px 5px 0 var(--ink)}.pillbtn.dark:hover{box-shadow:5px 5px 0 var(--orange)}}
.pillbtn:focus-visible,.chip:focus-visible{outline:3px solid var(--orange);outline-offset:3px}

/* фильтры-чипы */
.chip{flex:0 0 auto;padding:10px 18px;border:var(--line);border-radius:999px;background:#fff;font:400 14px/1 "Dela Gothic One";text-transform:uppercase;cursor:pointer;transition:transform .15s,box-shadow .15s,opacity .2s}
.chip.on{background:var(--ink);color:var(--y)}
@media (hover:hover){.chip:hover{transform:translateY(-2px)}}

/* ШАПКА */
header.site{position:sticky;top:0;z-index:50;background:var(--paper);border-bottom:var(--line)}
header.site .in{max-width:1440px;margin:0 auto;padding:12px var(--pad);display:flex;flex-wrap:wrap;align-items:center;gap:12px 24px}
header.site .logo img{height:44px;width:auto}
.switch{display:flex;padding:4px;border:var(--line);border-radius:999px;background:#fff;gap:2px;max-width:360px;order:1}
.switch a{flex:1;text-align:center;padding:8px 14px;border-radius:999px;font-weight:600;font-size:14px;text-decoration:none;white-space:nowrap}
.switch a.on{background:var(--ink);color:var(--y);font-weight:700}
.switch a.on.p{color:var(--paper)}
.hright{flex:1;display:flex;justify-content:flex-end;align-items:center;gap:20px;order:2}
.hright .lnk{font-weight:600;font-size:15px;text-decoration:none}
.hright .lnk[aria-current]{text-decoration:underline;text-decoration-thickness:2.5px;text-underline-offset:6px}
@media (hover:hover){.hright .lnk:hover{text-decoration:underline}}
.tel{display:flex;align-items:center;gap:8px;padding:8px 14px;border:var(--line);border-radius:999px;background:var(--y);font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;transition:transform .15s,box-shadow .15s}
@media (hover:hover){.tel:hover{transform:translate(-2px,-2px);box-shadow:3px 3px 0 var(--ink)}}
@media (max-width:899px){.switch{order:3;flex:1 1 100%}.hright .lnk,.tel span{display:none}}

/* БЕГУЩАЯ СТРОКА (цвета задаются переменными на элементе) */
.marquee{--mbg:var(--ink);--mfg:var(--y);--mdot:var(--orange);overflow:hidden;background:var(--mbg);border-bottom:var(--line);position:relative;z-index:5}
.marquee .track{display:flex;width:max-content;animation:chz-marquee 32s linear infinite;padding:14px 0}
.marquee .run{display:flex;gap:28px;padding-right:28px;font:400 clamp(18px,2.2vw,28px)/1 "Dela Gothic One";color:var(--mfg);text-transform:uppercase;white-space:nowrap}
.marquee .run span{display:flex;gap:28px;align-items:center}
.marquee .run i{font-style:normal;color:var(--mdot)}

/* бейджи-стикеры */
.badge{display:flex;align-items:center;gap:12px;padding:10px 20px 10px 10px;border:var(--line);border-radius:999px}
.badge .ic{width:48px;height:48px;border-radius:50%;background:var(--paper);border:var(--line);display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.badge b{font:400 17px "Dela Gothic One";text-transform:uppercase;white-space:nowrap}
@media (max-width:639px){.badge{padding:6px 14px 6px 6px;gap:8px}.badge .ic{width:36px;height:36px}.badge .ic svg{width:20px;height:20px}.badge b{font-size:13px}}

/* заглушки «нужно от клиента» */
.need{position:absolute;left:12px;bottom:12px;padding:6px 12px;background:var(--paper);border:2px solid var(--ink);border-radius:999px;font-size:12px;font-weight:600;color:var(--ink)}
.dashed{display:inline-flex;align-self:flex-start;width:fit-content;max-width:100%;padding:8px 14px;border:2px dashed currentColor;border-radius:12px;font:700 14px/1.3 Onest;letter-spacing:.03em}

/* хлебные крошки */
.crumbs{display:flex;gap:10px;align-items:center;font-weight:600;font-size:14px}
.crumbs a{text-decoration:none;border-bottom:2px solid currentColor}
.crumbs span{opacity:.6}

/* ПОДВАЛ */
footer.site{background:var(--ink);color:var(--paper);padding:clamp(48px,6vw,88px) var(--pad) 32px}
footer.site .in{max-width:1360px;margin:0 auto;display:flex;flex-direction:column;gap:48px}
footer.site .flogo{width:clamp(200px,32vw,440px);height:auto}
footer.site .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:32px;font-size:15px;line-height:1.55}
footer.site .cols>div{display:flex;flex-direction:column;gap:6px}
footer.site .cols b{color:var(--y)}
footer.site a{color:var(--paper);text-decoration:none}
footer.site .bottom{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding-top:20px;border-top:1.5px solid #4A3F36;font-size:13px;color:#CFC4AE}
footer.site .bottom a{color:#CFC4AE;text-decoration:underline}

@media (prefers-reduced-motion:reduce){.marquee .track{animation:none}[data-pop]{animation:none!important}}

/* DigitRoll */
.dr{display:inline-block;height:1em;line-height:1;overflow:hidden;vertical-align:-.1em}   /* hidden, не clip: иначе базовая линия берётся с «9» внизу ленты */
.dr>span{display:block;will-change:transform}
.dr i{display:block;font-style:normal;height:1em;line-height:1;text-align:center}