/* =========================================================
   Nhà hàng Bếp Nhà — style.css
   Phong cách: tối sang trọng (dark luxury). Nền đen than, chữ vàng đồng,
   serif Cormorant cho tiêu đề.
   Bố cục khác các mẫu trước:
     - Header logo ở GIỮA, menu chia hai bên
     - Hero chữ khổng lồ, ảnh chỉ là ô nhỏ ở góc
     - Món ăn xếp thành BĂNG NGANG cuộn được (scroll-snap)
     - Xen kẽ section ảnh tràn màn (full-bleed) với section nền tối
   Ảnh: mỗi khối ảnh dùng biến --img trên thẻ HTML.
   Đường dẫn trong --img resolve theo FILE CSS nên phải viết ../images/…
   Chưa có ảnh -> tự hiển thị nền gradient nâu tối thay thế.
   ========================================================= */

:root{
  --bg:#141210;
  --bg-2:#1B1815;
  --bg-3:#25211C;
  --line:#332D26;
  --line-2:#453D34;
  --gold:#C9A55C;
  --gold-2:#E2C687;
  --gold-dim:rgba(201,165,92,.14);
  --wine:#7A2E2E;
  --cream:#F3EBDD;
  --text:#E8E0D2;
  --muted:#9C9284;
  --white:#fff;
  --radius:4px;
  --shadow:0 2px 6px rgba(0,0,0,.35), 0 18px 40px rgba(0,0,0,.35);
  --ph:linear-gradient(135deg,#2A241E 0%,#1F1A16 55%,#171411 100%);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:'Be Vietnam Pro',system-ui,-apple-system,sans-serif;
  color:var(--text);background:var(--bg);font-size:14px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:none;background:none;color:inherit}
img{max-width:100%;display:block}
svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
::selection{background:var(--gold);color:var(--bg)}

.container{width:min(1240px,100% - 40px);margin-inline:auto}
.serif{font-family:'Cormorant Garamond',Georgia,serif}

/* Khối ảnh dùng chung: đặt --img trên thẻ */
.ph{background:var(--img,var(--ph)) center/cover no-repeat,var(--ph)}

/* ---------- Nút ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 26px;border-radius:var(--radius);font-weight:600;font-size:12px;
  letter-spacing:2px;text-transform:uppercase;transition:.2s;white-space:nowrap}
.btn svg{width:15px;height:15px}
.btn--gold{background:var(--gold);color:var(--bg)}
.btn--gold:hover{background:var(--gold-2)}
.btn--line{border:1px solid var(--gold);color:var(--gold)}
.btn--line:hover{background:var(--gold-dim)}
.btn--ghost{border:1px solid rgba(243,235,221,.35);color:var(--cream)}
.btn--ghost:hover{border-color:var(--cream)}
.btn--wine{background:var(--wine);color:var(--cream)}
.btn--wine:hover{background:#8F3737}

/* ---------- Thanh mỏng trên cùng ---------- */
.topbar{border-bottom:1px solid var(--line);font-size:11px;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--muted)}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:36px;flex-wrap:wrap}
.topbar__in span{display:flex;align-items:center;gap:8px}
.topbar svg{width:13px;height:13px;color:var(--gold)}

/* ---------- Header: logo giữa ---------- */
.header{position:sticky;top:0;z-index:50;background:rgba(20,18,16,.92);
  backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.header__in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;min-height:84px;gap:20px}
.nav{display:flex;align-items:center;gap:6px}
.nav--l{justify-content:flex-end}
.nav--r{justify-content:flex-start}
.nav__link{padding:10px 14px;font-size:12px;font-weight:600;letter-spacing:1.8px;
  text-transform:uppercase;color:var(--text);position:relative;transition:.15s}
.nav__link::after{content:"";position:absolute;left:14px;right:14px;bottom:4px;height:1px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;transition:.2s}
.nav__link:hover,.nav__link.is-active{color:var(--gold)}
.nav__link:hover::after,.nav__link.is-active::after{transform:scaleX(1)}
.nav .btn{margin-left:10px;padding:11px 18px}
/* Các link chỉ hiện trong menu mobile (menu desktop chia 2 bên logo) */
.nav__link--m{display:none}

.logo{display:flex;flex-direction:column;align-items:center;line-height:1;padding:0 26px;text-align:center}
.logo b{font-family:'Cormorant Garamond',serif;font-weight:700;font-size:30px;letter-spacing:3px;
  color:var(--cream);text-transform:uppercase}
.logo small{font-size:9px;letter-spacing:3.5px;color:var(--gold);text-transform:uppercase;margin-top:5px}

.burger{display:none;width:40px;height:40px;place-items:center;color:var(--cream);
  border:1px solid var(--line);border-radius:var(--radius)}

/* ---------- Hero chữ khổng lồ ---------- */
.hero{padding:70px 0 40px;position:relative;overflow:hidden}
.hero__eyebrow{display:flex;align-items:center;gap:14px;font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold)}
.hero__eyebrow::before{content:"";width:48px;height:1px;background:var(--gold)}
.hero__title{font-family:'Cormorant Garamond',serif;font-weight:600;
  font-size:clamp(64px,13.5vw,196px);line-height:.92;letter-spacing:-2px;color:var(--cream);margin:22px 0 0}
.hero__title em{font-style:italic;color:var(--gold);font-weight:500}
.hero__row{display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:end;margin-top:44px}
.hero__lead{font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.4;color:var(--text);max-width:560px}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero__meta{display:flex;gap:34px;margin-top:34px;padding-top:22px;border-top:1px solid var(--line);flex-wrap:wrap}
.hero__meta div{font-size:12px;color:var(--muted);letter-spacing:.5px}
.hero__meta b{display:block;color:var(--cream);font-size:14px;letter-spacing:0;margin-bottom:2px}
.hero__pic{position:relative;justify-self:end;width:min(100%,420px);aspect-ratio:4/3}
.hero__pic .ph{position:absolute;inset:0;border-radius:var(--radius)}
.hero__pic::before{content:"";position:absolute;inset:-14px 14px 14px -14px;border:1px solid var(--gold);
  border-radius:var(--radius);pointer-events:none}
.hero__pic span{position:absolute;right:-14px;bottom:-14px;background:var(--gold);color:var(--bg);
  padding:12px 16px;font-size:11px;letter-spacing:2px;text-transform:uppercase;font-weight:700;line-height:1.3}

/* Dải chữ chạy ngang */
.marquee{border-block:1px solid var(--line);padding:16px 0;overflow:hidden;white-space:nowrap;
  font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--muted);letter-spacing:1px}
.marquee__track{display:inline-block;animation:marquee 38s linear infinite}
.marquee__track span{margin:0 26px}
.marquee__track i{color:var(--gold);font-style:normal}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Section chung ---------- */
.section{padding:90px 0}
.section--tight{padding:60px 0}
.section--soft{background:var(--bg-2)}
.sec-eyebrow{display:inline-flex;align-items:center;gap:12px;font-size:11px;letter-spacing:3px;
  text-transform:uppercase;color:var(--gold)}
.sec-eyebrow::before{content:"";width:34px;height:1px;background:var(--gold)}
.section__title{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(34px,4.2vw,56px);
  line-height:1.05;color:var(--cream);margin-top:14px}
.section__title em{font-style:italic;color:var(--gold);font-weight:500}
.section__head{display:flex;align-items:flex-end;justify-content:space-between;gap:30px;margin-bottom:44px}
.section__head p{color:var(--muted);max-width:440px}

/* ---------- Băng ngang món ăn (cuộn được) ---------- */
.band{margin-inline:calc(50% - 50vw);padding-inline:calc(50vw - 50%);overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent);
  mask-image:linear-gradient(90deg,#000 0,#000 94%,transparent)}
.band::-webkit-scrollbar{display:none}
.band__track{display:flex;gap:22px;padding:6px 0 26px;width:max-content}
.dish{width:300px;scroll-snap-align:start;flex:none}
.dish .ph{aspect-ratio:4/3;border-radius:var(--radius);position:relative;overflow:hidden;transition:.3s}
.dish:hover .ph{transform:translateY(-4px);box-shadow:var(--shadow)}
.dish__tag{position:absolute;top:12px;left:12px;background:var(--bg);color:var(--gold);font-size:10px;
  letter-spacing:2px;text-transform:uppercase;padding:6px 10px;font-weight:700}
.dish__row{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:16px}
.dish__row b{font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:600;color:var(--cream)}
.dish__row span{color:var(--gold);font-weight:600;white-space:nowrap}
.dish p{color:var(--muted);font-size:13px;margin-top:4px}
.band__hint{display:flex;align-items:center;gap:10px;color:var(--muted);font-size:11px;
  letter-spacing:2px;text-transform:uppercase}
.band__hint svg{color:var(--gold)}

/* ---------- Section ảnh tràn màn ---------- */
.bleed{position:relative;min-height:560px;display:grid;place-items:center;text-align:center;
  padding:80px 20px;overflow:hidden}
.bleed .ph{position:absolute;inset:0;transform:scale(1.03)}
.bleed::after{content:"";position:absolute;inset:0;background:rgba(20,18,16,.62)}
.bleed__in{position:relative;z-index:1;max-width:680px}
.bleed__in .section__title{margin-top:18px}
.bleed__in p{color:var(--text);font-size:16px;margin:18px auto 30px;max-width:520px}
.bleed__in .sec-eyebrow{justify-content:center}
.bleed__in .sec-eyebrow::after{content:"";width:34px;height:1px;background:var(--gold)}

/* ---------- Thực đơn dạng danh sách (đường chấm) ---------- */
.menu{display:grid;grid-template-columns:1fr 1fr;gap:0 80px}
.menu__group h3{font-family:'Cormorant Garamond',serif;font-size:26px;font-weight:600;color:var(--cream);
  display:flex;align-items:center;gap:16px;margin-bottom:22px}
.menu__group h3::after{content:"";flex:1;height:1px;background:var(--line-2)}
.menu__group + .menu__group{margin-top:40px}
.mi{padding:13px 0;border-bottom:1px dotted var(--line-2)}
.mi__row{display:flex;align-items:baseline;gap:10px}
.mi__row b{font-weight:600;color:var(--cream);font-size:15px}
.mi__row i{font-style:normal;font-size:10px;color:var(--gold);border:1px solid var(--gold);
  padding:1px 6px;letter-spacing:1px;text-transform:uppercase;border-radius:2px}
.mi__row .dots{flex:1;border-bottom:1px dotted var(--line-2);transform:translateY(-4px);min-width:24px}
.mi__row span{color:var(--gold);font-weight:600;font-family:'Cormorant Garamond',serif;font-size:19px}
.mi p{color:var(--muted);font-size:12.5px;margin-top:3px}

/* ---------- Giới thiệu 2 cột lệch ---------- */
.about{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.about__pics{position:relative;aspect-ratio:1}
.about__pics .ph{position:absolute;border-radius:var(--radius)}
.about__pics .p1{inset:0 22% 22% 0}
.about__pics .p2{inset:auto 0 0 auto;width:58%;aspect-ratio:1;border:10px solid var(--bg)}
.about__pics .badge{position:absolute;left:-10px;bottom:16%;background:var(--gold);color:var(--bg);
  padding:18px 22px;text-align:center;line-height:1.1;box-shadow:var(--shadow)}
.about__pics .badge b{display:block;font-family:'Cormorant Garamond',serif;font-size:44px;font-weight:700}
.about__pics .badge small{font-size:10px;letter-spacing:2px;text-transform:uppercase;font-weight:700}
.about__text p{color:var(--muted);margin-top:18px;font-size:15px}
.about__text .lead{font-family:'Cormorant Garamond',serif;font-size:22px;color:var(--text);line-height:1.45}
.about__sign{margin-top:28px;display:flex;align-items:center;gap:16px}
.about__sign .ph{width:54px;height:54px;border-radius:50%;border:2px solid var(--gold)}
.about__sign b{display:block;color:var(--cream)}
.about__sign small{color:var(--muted);font-size:12px;letter-spacing:1px;text-transform:uppercase}

/* ---------- Đầu bếp ---------- */
.chefs{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.chef{text-align:center}
.chef .ph{aspect-ratio:1;border-radius:var(--radius);position:relative;overflow:hidden}
.chef .ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,rgba(20,18,16,.7))}
.chef b{display:block;font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--cream);margin-top:18px}
.chef small{display:block;color:var(--gold);font-size:11px;letter-spacing:2px;text-transform:uppercase;margin-top:2px}
.chef p{color:var(--muted);font-size:13px;margin-top:10px;padding:0 12px}

/* ---------- Số liệu ---------- */
.stats{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.stat{padding:34px 20px;text-align:center;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat b{display:block;font-family:'Cormorant Garamond',serif;font-size:52px;font-weight:600;color:var(--gold);line-height:1}
.stat span{display:block;margin-top:8px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}

/* ---------- Nhận xét ---------- */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.quote{background:var(--bg-3);border:1px solid var(--line);padding:32px 30px;position:relative}
.quote::before{content:"“";position:absolute;top:8px;right:22px;font-family:'Cormorant Garamond',serif;
  font-size:110px;line-height:1;color:var(--gold-dim)}
.quote__stars{color:var(--gold);letter-spacing:3px;font-size:12px}
.quote p{font-family:'Cormorant Garamond',serif;font-size:20px;line-height:1.45;color:var(--text);margin:14px 0 22px}
.quote__who{display:flex;align-items:center;gap:12px}
.quote__who .ph{width:44px;height:44px;border-radius:50%}
.quote__who b{display:block;color:var(--cream);font-size:13px}
.quote__who small{color:var(--muted);font-size:12px}

/* ---------- Đặt bàn + giờ mở cửa ---------- */
.book{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--gold);position:relative}
.book::before{content:"";position:absolute;inset:10px;border:1px solid var(--line-2);pointer-events:none}
.book__info{padding:56px 50px;border-right:1px solid var(--line-2)}
.book__info .section__title{font-size:40px}
.hours{margin-top:26px}
.hours div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px dotted var(--line-2);font-size:13.5px}
.hours div span:first-child{color:var(--muted)}
.hours div span:last-child{color:var(--cream);font-weight:600}
.book__form{padding:56px 50px;background:var(--bg-2)}
.form__grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:10.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)}
.field input,.field select,.field textarea{background:transparent;border:0;border-bottom:1px solid var(--line-2);
  color:var(--cream);font:inherit;padding:10px 0;outline:none;border-radius:0;transition:.2s}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold)}
.field select option{background:var(--bg-2)}
.field textarea{min-height:90px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#6F665B}
.form__note{color:var(--muted);font-size:12px;margin-top:14px}

/* ---------- Tin tức ---------- */
.posts{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.post{display:block}
.post .ph{aspect-ratio:3/2;border-radius:var(--radius);transition:.3s}
.post:hover .ph{transform:translateY(-4px);box-shadow:var(--shadow)}
.post__meta{display:flex;gap:14px;font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-top:16px}
.post__meta span + span{color:var(--muted)}
.post h3{font-family:'Cormorant Garamond',serif;font-size:24px;font-weight:600;color:var(--cream);line-height:1.2;margin-top:8px}
.post p{color:var(--muted);font-size:13px;margin-top:8px}
.post--feature{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 1fr;gap:40px;align-items:center;
  background:var(--bg-3);border:1px solid var(--line);padding:0}
.post--feature .ph{aspect-ratio:16/10;border-radius:0}
.post--feature .post__body{padding:20px 40px 20px 0}
.post--feature h3{font-size:36px}

/* ---------- Banner trang con ---------- */
.pagehead{position:relative;padding:90px 0 70px;overflow:hidden;border-bottom:1px solid var(--line)}
.pagehead .ph{position:absolute;inset:0;opacity:.28}
.pagehead::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,18,16,.2),var(--bg))}
.pagehead__in{position:relative;z-index:1;text-align:center}
.pagehead h1{font-family:'Cormorant Garamond',serif;font-weight:600;font-size:clamp(44px,7vw,84px);
  line-height:1;color:var(--cream);margin-top:14px}
.crumbs{display:inline-flex;gap:10px;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:16px}
.crumbs a:hover{color:var(--gold)}

/* ---------- Bộ lọc / tab thực đơn ---------- */
.tabs{display:flex;justify-content:center;gap:6px;flex-wrap:wrap;margin-bottom:50px}
.tabs a,.tabs button{padding:10px 20px;border:1px solid var(--line-2);font-size:11px;letter-spacing:2px;
  text-transform:uppercase;color:var(--muted);transition:.15s}
.tabs .is-active,.tabs a:hover,.tabs button:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Gallery không gian (masonry nhẹ) ---------- */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:220px;gap:14px}
.gallery .ph{border-radius:var(--radius);position:relative;overflow:hidden}
.gallery .ph::after{content:attr(data-cap);position:absolute;left:0;right:0;bottom:0;padding:40px 16px 14px;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--cream);
  background:linear-gradient(180deg,transparent,rgba(20,18,16,.85));opacity:0;transition:.25s}
.gallery .ph:hover::after{opacity:1}
.gallery .w2{grid-column:span 2}
.gallery .h2{grid-row:span 2}

/* ---------- Không gian riêng (zig-zag) ---------- */
.rooms{display:grid;gap:60px}
.room{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center}
.room:nth-child(even) .room__pic{order:2}
.room__pic{aspect-ratio:4/3;border-radius:var(--radius)}
.room__text h3{font-family:'Cormorant Garamond',serif;font-size:36px;font-weight:600;color:var(--cream);margin-top:12px}
.room__text p{color:var(--muted);margin-top:14px;font-size:15px}
.room__specs{display:flex;gap:28px;margin:22px 0 26px;flex-wrap:wrap}
.room__specs div{font-size:12px;color:var(--muted)}
.room__specs b{display:block;color:var(--cream);font-size:16px;font-family:'Cormorant Garamond',serif}

/* ---------- Bài viết chi tiết ---------- */
.article{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:60px}
.article__body{font-size:16px;color:var(--text)}
.article__body .ph{aspect-ratio:16/9;border-radius:var(--radius);margin:30px 0}
.article__body h2{font-family:'Cormorant Garamond',serif;font-size:32px;font-weight:600;color:var(--cream);margin:36px 0 12px}
.article__body p{margin:0 0 18px;color:#CFC6B8}
.article__body blockquote{border-left:2px solid var(--gold);padding:8px 0 8px 24px;margin:26px 0;
  font-family:'Cormorant Garamond',serif;font-size:24px;line-height:1.4;color:var(--cream);font-style:italic}
.article__body ul{padding-left:20px;margin-bottom:18px;color:#CFC6B8}
.article__body li{margin-bottom:6px}
.aside__box{border:1px solid var(--line);padding:26px;margin-bottom:24px}
.aside__box h4{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.aside__list a{display:flex;gap:12px;padding:10px 0;border-bottom:1px dotted var(--line-2);font-size:13px;color:var(--text)}
.aside__list a:hover{color:var(--gold)}
.aside__list a .ph{width:60px;height:46px;flex:none;border-radius:2px}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tags a{border:1px solid var(--line-2);padding:5px 10px;font-size:11px;letter-spacing:1px;color:var(--muted)}
.tags a:hover{border-color:var(--gold);color:var(--gold)}

/* ---------- Liên hệ ---------- */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:60px}
.contact__list{display:grid;gap:22px;margin-top:30px}
.contact__list div{display:flex;gap:16px}
.contact__list svg{width:22px;height:22px;color:var(--gold);margin-top:3px}
.contact__list b{display:block;font-size:11px;letter-spacing:2px;text-transform:uppercase;color:var(--gold);margin-bottom:3px}
.contact__list span{color:var(--text)}
.map{aspect-ratio:16/8;border-radius:var(--radius);margin-top:70px;filter:saturate(.4) brightness(.8)}

/* ---------- Footer ---------- */
.footer{border-top:1px solid var(--line);padding:70px 0 0;margin-top:40px}
.footer__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.footer .logo{align-items:flex-start;text-align:left;padding:0}
.footer__col p{color:var(--muted);font-size:13px;margin-top:16px;max-width:320px}
.footer__col h4{font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.footer__col a{display:block;padding:5px 0;color:var(--text);font-size:13px}
.footer__col a:hover{color:var(--gold)}
.footer__col li{list-style:none;display:flex;gap:10px;padding:5px 0;color:var(--text);font-size:13px}
.footer__col svg{width:15px;height:15px;color:var(--gold);margin-top:4px}
.social{display:flex;gap:8px;margin-top:20px}
.social a{width:36px;height:36px;border:1px solid var(--line-2);display:grid;place-items:center;color:var(--muted);padding:0}
.social a:hover{border-color:var(--gold);color:var(--gold)}
.social svg{width:15px;height:15px}
.footer__bar{margin-top:56px;border-top:1px solid var(--line);padding:20px 0;font-size:12px;color:var(--muted)}
.footer__bar-in{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

/* ---------- Responsive ---------- */
@media (max-width:1100px){
  .menu{gap:0 40px}
  .footer__grid{grid-template-columns:1fr 1fr}
  .gallery{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:980px){
  .header__in{grid-template-columns:auto 1fr auto;min-height:72px}
  .nav--l,.nav--r{display:none}
  .header .logo{order:1;justify-self:start;padding:0}
  .header .logo b{font-size:24px}
  .burger{display:grid;order:3}
  .nav.is-open{display:flex;position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;
    background:var(--bg);border-bottom:1px solid var(--line);padding:10px 20px 20px;z-index:60}
  .nav.is-open .nav__link{display:flex;padding:14px 0;border-bottom:1px solid var(--line)}
  .nav.is-open .btn{display:inline-flex;margin:14px 0 0}
  .hero__row{grid-template-columns:1fr}
  .hero__pic{justify-self:start;margin:24px 14px 14px 14px;width:min(100% - 28px,420px)}
  .about{grid-template-columns:1fr;gap:40px}
  .chefs,.quotes,.posts{grid-template-columns:repeat(2,1fr)}
  .post--feature{grid-template-columns:1fr}
  .post--feature .post__body{padding:0 26px 26px}
  .book{grid-template-columns:1fr}
  .book__info{border-right:0;border-bottom:1px solid var(--line-2)}
  .room,.room:nth-child(even) .room__pic{grid-template-columns:1fr;order:0}
  .article{grid-template-columns:1fr}
  .contact{grid-template-columns:1fr}
}
@media (max-width:900px){
  .menu{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stat:nth-child(2){border-right:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
}
@media (max-width:640px){
  .container{width:min(1240px,100% - 32px)}
  .section{padding:60px 0}
  .hero{padding:44px 0 30px}
  .hero__title{letter-spacing:-1px}
  .hero__lead{font-size:20px}
  .section__head{flex-direction:column;align-items:flex-start;gap:14px}
  .chefs,.quotes,.posts{grid-template-columns:1fr}
  .form__grid{grid-template-columns:1fr}
  .book__info,.book__form{padding:36px 24px}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:160px}
  .footer__grid{grid-template-columns:1fr}
  .topbar__in span:nth-child(2){display:none}
  .dish{width:250px}
}