/* Главная «Хочу Пива» — по макету content/design/site/Main2.dc.html (десктоп) и Mobile.dc.html (телефон). */
:root{--ink:#17110d;--bone:#f3e8d6;--red:#d42620;--amb:#f2af3c;--brown:#221a14;--mute:#f3e8d6;--mute2:#a39482;--sand:#f3e8d6}
*{box-sizing:border-box;margin:0}
html{background:var(--ink);scroll-behavior:smooth}
body{background:var(--ink);color:var(--bone);font-family:Manrope,'Helvetica Neue',sans-serif;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit}
h1,h2,h3{font-family:Unbounded,sans-serif}
.wrap{max-width:1360px;margin:0 auto;padding:0 32px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:14px 24px;border-radius:999px;font-weight:800;text-decoration:none;font-size:16px;border:0}
.btn.white{background:#fff;color:var(--ink)}.btn.ink{background:var(--ink);color:var(--bone)}.btn.red{background:var(--red);color:#fff}.btn.bone{background:var(--bone);color:var(--ink)}
/* десктопное меню-пилюля */
.pill-wrap{position:sticky;top:16px;z-index:5;display:flex;justify-content:center;padding:16px 16px 0}
.pill{background:rgba(243,238,230,.96);color:var(--ink);border-radius:999px;padding:8px 8px 8px 22px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;font-weight:700;font-size:15px;max-width:980px}
.pill a{text-decoration:none}.pill .logo{font:900 16px Unbounded,sans-serif;color:var(--red)}
.pill .cta{background:var(--ink);color:var(--bone);padding:12px 20px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
/* герой */
.hero{padding-top:56px;padding-bottom:40px;display:flex;flex-direction:column;gap:28px}
.hero .meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:16px;font-size:14px;font-weight:700;letter-spacing:2px;color:var(--mute2)}
.hero h1{font-weight:900;font-size:168px;line-height:.88;letter-spacing:-6px;text-transform:uppercase}
.hero h1 span{color:var(--red)}
.hero-grid{display:grid;grid-template-columns:2fr 1fr;gap:20px}
.ph-dark{background:#221a14;border-radius:32px}
.big{min-height:460px;display:flex;align-items:flex-end;padding:28px;color:#a39482;font-size:17px;background:radial-gradient(120% 90% at 70% 20%,#4a3a2d 0,#221a14 55%,#221a14 100%)}
.side{display:flex;flex-direction:column;gap:20px}
.redcard{background:var(--red);color:#fff;border-radius:32px;padding:28px;display:flex;flex-direction:column;gap:14px;flex:1}
.redcard h2{font-size:30px;line-height:1.1}.redcard p{font-size:16px;line-height:1.5}.redcard .btn{align-self:flex-start;margin-top:auto}
.points{background:var(--bone);color:var(--ink);border-radius:28px;padding:22px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px}
.points b{display:block;font:900 32px Unbounded,sans-serif}.points span{font-size:14px;font-weight:700}
.run{background:var(--amb);color:var(--ink);overflow:hidden;white-space:nowrap;padding:18px 0;font:700 22px Unbounded,sans-serif}
.run div{display:inline-flex;gap:36px;animation:hpRun 30s linear infinite}
@keyframes hpRun{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* о нас */
.about{padding-top:110px;padding-bottom:80px;display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.about h2{font-size:64px;line-height:1;letter-spacing:-2px;text-transform:uppercase}.about h2 span{color:var(--red)}
.about p{color:var(--mute);font-size:18px;line-height:1.6;margin-bottom:18px}.about .q{color:var(--amb);font-weight:800}.about .sig{color:var(--bone);font-weight:800}
/* смокер */
.smoker{padding-top:56px;padding-bottom:96px;display:flex;flex-direction:column;gap:36px}
.head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px}
.head h2{font-weight:900;font-size:84px;line-height:.92;letter-spacing:-3px;text-transform:uppercase}
.head p{max-width:420px;color:var(--mute);font-size:18px;line-height:1.55}
.sgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:260px;gap:20px}
.sgrid article{border-radius:32px;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;gap:10px}
.sgrid h3{font-weight:700}.s1{grid-column:span 2;grid-row:span 2}.s1 h3{font-size:40px;line-height:1}.s1 p{color:var(--mute);font-size:16px}
.s1 .tag{align-self:flex-start;background:var(--bone);color:var(--ink);font-weight:800;padding:10px 16px;border-radius:999px}
.s2{grid-column:span 2;background:var(--bone);color:var(--ink);justify-content:space-between!important}.s2 .r{display:flex;justify-content:space-between;gap:12px}.s2 h3{font-size:30px}.s2 p{font-size:15px;line-height:1.5}.s2 .red{color:var(--red);font-weight:800}
.s3 h3,.s4 h3{font-size:24px}.s3 span{color:var(--mute);font-size:14px}.s4{background:var(--red);color:#fff}.s4 span{font-size:14px}
/* меню */
.menu{background:var(--bone);color:var(--ink);border-radius:48px 48px 0 0;padding:96px 0}
.menu .head span{font-weight:700;color:#a39482}
.tabs{display:flex;flex-wrap:wrap;gap:10px;margin:32px 0}
.tabs button{background:transparent;color:var(--ink);border:2px solid var(--ink);border-radius:999px;padding:12px 20px;font:700 15px Manrope,sans-serif;min-height:44px;cursor:pointer}
.tabs button.on{background:var(--ink);color:var(--bone)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:28px 20px}
.dish{display:flex;flex-direction:column;gap:12px}.dish[hidden]{display:none}
.dish .ph{aspect-ratio:4/3;border-radius:28px;background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:64px}
.dish .dh{display:flex;justify-content:space-between;gap:12px;align-items:baseline}.dish h3{font-weight:700;font-size:20px;line-height:1.2}
.dish .pr{font-weight:800;white-space:nowrap}.dish p{color:#4a3a2d;font-size:14px;line-height:1.5}
.hot{font:800 10px Manrope,sans-serif;background:var(--red);color:#fff;border-radius:999px;padding:3px 7px;vertical-align:middle;text-transform:uppercase}
.sz{display:flex;background:#f3e8d6;border-radius:999px;padding:4px}.sz button{flex:1;background:transparent;border:0;border-radius:999px;padding:10px;font:700 13px Manrope,sans-serif;min-height:44px;color:var(--ink);cursor:pointer}.sz button.on{background:#fff;font-weight:800}
.note{margin-top:28px;color:#a39482;font-size:14px}
/* карта «Свой» */
.card-sec{background:var(--bone);color:var(--ink);padding:0 0 96px}
.cardbox{background:var(--ink);color:var(--bone);border-radius:40px;padding:56px;display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:end}
.kick{color:var(--amb);font-weight:800;letter-spacing:2px;font-size:14px}.cardbox h2{font-size:56px;text-transform:uppercase;margin:10px 0 14px}.cardbox p{color:var(--mute);font-size:18px;line-height:1.5;margin-bottom:24px}
.lv{display:flex;gap:12px;align-items:flex-end}.lv div{flex:1;background:#221a14;border-radius:18px;padding:14px;display:flex;flex-direction:column;justify-content:flex-end}
.lv div:nth-child(3){background:#2c221a}.lv div:nth-child(4){background:#3a2d22}.lv .top{background:var(--red)}.lv b{font-size:16px}.lv span{color:var(--amb);font-weight:800;font-size:13px}.lv .top span{color:#fff}
/* бронь */
.booking{background:var(--red);color:#fff;padding:96px 0}
.booking .wrap{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.booking h2{font-size:84px;line-height:.92;letter-spacing:-3px;text-transform:uppercase;margin-bottom:20px}.booking p{font-size:19px;line-height:1.5;margin-bottom:20px}.booking .tel{font-weight:800;font-size:22px}
.bk{background:var(--bone);color:var(--ink);border-radius:32px;min-height:360px;padding:36px;display:flex;flex-direction:column;justify-content:center;gap:4px}
.bk .bk-t{font:800 26px Unbounded,sans-serif;margin-bottom:8px}.bk p{font-size:17px}.bk .btn{align-self:flex-start;margin:12px 0}.bk .small{font-size:15px;color:#a39482}
.reviews{display:flex;flex-wrap:wrap;gap:12px;padding-top:56px}.reviews a{background:#221a14;border-radius:18px;padding:18px 22px;text-decoration:none;font-weight:800}
.delivery{padding-top:56px;padding-bottom:80px;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:24px}
.delivery h2{font-size:56px;line-height:.95;text-transform:uppercase}.delivery h2 span{color:var(--amb)}.delivery div{display:flex;flex-direction:column;gap:12px;align-items:flex-start}.delivery div span{color:var(--mute2);font-size:15px}
footer{border-top:1px solid #2c221a;padding:56px 0 24px}
footer .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:28px;color:var(--mute);font-size:15px;line-height:1.7}
footer .cols div{display:flex;flex-direction:column}footer b{color:var(--bone)}footer a{color:var(--mute)}
.more{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:40px 0}.more span:first-child{color:var(--mute2);font-weight:700}.ch{border:1.5px solid #4a3a2d;border-radius:999px;padding:10px 18px;font-weight:700}
.huge{font:900 190px/0.8 Unbounded,sans-serif;letter-spacing:-8px;color:#221a14;text-transform:uppercase;white-space:nowrap}
/* только телефон (Mobile.dc.html) */
.m-top,.stories,.chips,.m-nav{display:none}
@media (max-width:899px){
  body{background:var(--bone);color:var(--ink);padding-bottom:84px}
  .pill-wrap,.hero,.run,.about,.smoker,.huge,.more{display:none}
  .wrap{padding:0 18px}
  .m-top{display:flex;flex-direction:column;gap:14px;background:var(--ink);color:var(--bone);padding:16px 18px 18px}
  .m-top .row{display:flex;justify-content:space-between;align-items:center}.m-top .logo{font:900 22px Unbounded,sans-serif;color:var(--red);text-decoration:none}
  .m-top .call{width:44px;height:44px;border-radius:999px;background:var(--brown);display:inline-flex;align-items:center;justify-content:center;color:var(--bone)}
  .seg{display:flex;gap:8px;background:var(--brown);border-radius:999px;padding:4px}.seg button{flex:1;background:transparent;color:var(--bone);border:0;border-radius:999px;padding:12px;font:700 14px Manrope,sans-serif;min-height:44px}
  .seg button.on{background:var(--bone);color:var(--ink);font-weight:800}.mode{font-size:13px;color:var(--mute)}.mode a{color:var(--amb)}
  .stories{display:flex;gap:12px;padding:16px 18px;overflow-x:auto}.stories a{flex:none;width:84px;display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;font-size:12px;font-weight:700;text-align:center;color:var(--ink)}
  .ring{width:76px;height:76px;border-radius:999px;border:3px solid var(--red);background:var(--sand);display:flex;align-items:center;justify-content:center;font-size:30px}
  .ring.amb{border-color:var(--amb)}.ring.dark{background:var(--ink);color:var(--bone);font:900 18px Unbounded,sans-serif}
  .chips{display:flex;position:sticky;top:0;z-index:3;background:var(--bone);gap:8px;padding:10px 18px;overflow-x:auto;border-bottom:1px solid var(--sand)}
  .chips a{flex:none;border:1.5px solid var(--ink);text-decoration:none;border-radius:999px;padding:11px 15px;font-weight:700;font-size:14px}.chips a.on{background:var(--ink);color:var(--bone)}
  .hero{padding-top:8px;padding-bottom:8px}.hero h1{font-size:64px;letter-spacing:-2px;color:var(--ink)}
  .hero-grid{grid-template-columns:1fr}.big{min-height:200px}.redcard h2{font-size:22px}
  .smoker{padding-top:24px;padding-bottom:24px;color:var(--bone);background:var(--ink);border-radius:28px;margin:18px;padding-left:16px;padding-right:16px}
  .head h2{font-size:34px;letter-spacing:-1px}.head p{font-size:15px}
  .sgrid{grid-template-columns:1fr 1fr;grid-auto-rows:170px;gap:10px}.sgrid article{border-radius:22px;padding:16px}.s1{grid-column:span 2;grid-row:span 1}.s1 h3{font-size:24px}.s2{grid-column:span 2}.s2 h3{font-size:20px}.s3 h3,.s4 h3{font-size:17px}
  .menu{border-radius:0;padding:24px 0}.menu .head{display:none}.tabs{display:none}
  .grid{grid-template-columns:1fr;gap:14px}.dish{background:#fff;border-radius:24px;padding:14px;display:grid;grid-template-columns:96px 1fr;gap:4px 12px}
  .dish .ph{grid-row:span 3;width:96px;height:96px;aspect-ratio:auto;border-radius:18px;font-size:40px}.dish h3{font-size:16px}.dish p{font-size:13px}.dish .sz{grid-column:1/-1}
  .cardbox{grid-template-columns:1fr;padding:28px;border-radius:28px}.cardbox h2{font-size:30px}.lv div{padding:8px;border-radius:12px}.lv b{font-size:11px}
  .card-sec{padding:0 0 24px}
  .booking{margin:0 18px;border-radius:24px;padding:24px 0}.booking .wrap{grid-template-columns:1fr;gap:16px}.booking h2{font-size:30px}.booking p{font-size:15px}.bk{min-height:0;padding:20px;border-radius:20px}.bk .bk-t{font-size:20px}
  .reviews{padding-top:20px}.reviews a{background:#fff;color:var(--ink);flex:1;text-align:center}
  .delivery{color:var(--ink)}.delivery h2{font-size:34px}
  footer{background:var(--ink);color:var(--bone)}
  .m-nav{display:grid;position:fixed;left:0;right:0;bottom:0;z-index:6;height:76px;padding-bottom:env(safe-area-inset-bottom);background:#fff;border-top:1px solid var(--sand);grid-template-columns:repeat(4,1fr);align-items:center;font-size:11px;font-weight:700}
  .m-nav a{display:flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;color:var(--ink)}.m-nav a.on{color:var(--red)}
}
