@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700&display=swap');

:root { --ink:#262626; --paper:#fff; --muted:#777; --line:#ddd; --wine:#8b2a2f; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:'Raleway',Arial,sans-serif; font-weight:300; line-height:1.7; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.topbar { background:#171717; color:#fff; min-height:42px; display:flex; align-items:center; justify-content:space-between; padding:0 4vw; font-size:12px; letter-spacing:1.6px; text-transform:uppercase; }
.topbar nav { display:flex; gap:26px; }
.site-header { position:absolute; z-index:5; top:42px; left:0; width:100%; display:flex; align-items:center; justify-content:space-between; padding:32px 5vw; color:#fff; }
.site-title { font-size:23px; font-weight:600; letter-spacing:3px; text-transform:uppercase; }
.main-nav { display:flex; gap:30px; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.hero { position:relative; min-height:720px; color:#fff; display:grid; place-items:center; text-align:center; background:center/cover no-repeat url('assets/hero.jpg'); }
.hero:before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.28); }
.hero-content { position:relative; z-index:1; padding:150px 24px 80px; }
.hero-logo { width:min(270px,60vw); margin:0 auto 25px; filter:drop-shadow(0 2px 3px rgba(0,0,0,.3)); }
.hero h1 { margin:0; font-size:clamp(44px,7vw,92px); line-height:1.04; font-weight:200; letter-spacing:1px; }
.hero h3 { margin:18px 0 0; font-size:15px; font-weight:500; letter-spacing:4px; text-transform:uppercase; }
.container { width:min(1080px,88vw); margin:0 auto; }
.intro { padding:100px 0 80px; text-align:center; }
.eyebrow { margin:0 0 18px; color:#777; font-size:13px; letter-spacing:4px; text-transform:uppercase; font-weight:500; }
.intro h2,.section-title { max-width:880px; margin:0 auto 38px; font-size:clamp(28px,4vw,46px); line-height:1.35; font-weight:300; }
.copy { max-width:850px; margin:0 auto; text-align:left; font-size:15px; }
.copy p { margin:0 0 20px; }
.details { display:grid; grid-template-columns:repeat(4,1fr); gap:28px; padding:58px 0; border-top:1px solid var(--line); text-align:center; }
.details h3 { margin:0 0 10px; font-size:13px; letter-spacing:2px; text-transform:uppercase; }
.details p { margin:0; font-size:14px; }
.reservation { padding:70px 0; background:#f3f3f1; text-align:center; }
.reservation h2 { margin:0 0 15px; font-size:36px; font-weight:300; }
.btn { display:inline-block; border:2px solid currentColor; padding:13px 28px; margin:10px 4px; text-transform:uppercase; letter-spacing:2px; font-size:12px; font-weight:600; }
.gallery { display:grid; grid-template-columns:repeat(5,1fr); }
.gallery img { width:100%; height:280px; object-fit:cover; }
.dark-section { padding:90px 0; color:#fff; background:#151515 url('assets/menu-texture.png') center/cover; }
.dark-section h2,.image-section h2 { margin:0 0 5px; text-align:center; font-size:50px; font-weight:200; }
.dark-section h3,.image-section h3 { margin:0 0 40px; text-align:center; font-size:13px; letter-spacing:4px; text-transform:uppercase; }
.menu-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px 60px; }
.menu-category { grid-column:1/-1; margin-top:25px; padding-bottom:8px; border-bottom:1px solid rgba(255,255,255,.5); font-size:19px; letter-spacing:3px; text-transform:uppercase; }
.menu-item { position:relative; padding-right:50px; }
.menu-item h4 { margin:0; font-size:15px; letter-spacing:.5px; }
.menu-item p { margin:3px 0 0; color:#bbb; font-size:12px; line-height:1.5; }
.price { position:absolute; top:0; right:0; }
.image-section { position:relative; min-height:560px; padding:110px 0; color:#fff; background:center/cover no-repeat url('assets/bakery-banner.jpg'); }
.image-section:before { content:''; position:absolute; inset:0; background:rgba(0,0,0,.38); }
.image-section .container { position:relative; }
.cards { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:50px; }
.card { padding:30px; border:1px solid rgba(255,255,255,.55); background:rgba(0,0,0,.28); text-align:center; }
.card h4 { margin:0 0 8px; font-size:17px; }
.card p { margin:0; font-size:13px; }
.footer { padding:60px 5vw 30px; color:#bdbdbd; background:#171717; text-align:center; font-size:12px; }
.footer nav { display:flex; justify-content:center; flex-wrap:wrap; gap:22px; margin-bottom:25px; color:#fff; letter-spacing:1.2px; text-transform:uppercase; }
.page-header { padding:90px 24px 70px; color:#fff; background:#222; text-align:center; }
.page-header h1 { margin:0; font-size:clamp(38px,7vw,68px); font-weight:200; }
.page-header p { margin:10px 0 0; letter-spacing:2px; text-transform:uppercase; font-size:12px; }
.inner { padding:80px 0; }
.inner h2 { font-size:33px; font-weight:300; }
.split { display:grid; grid-template-columns:1fr 1fr; gap:60px; }
.form { max-width:760px; margin:0 auto; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
label { display:block; margin:0 0 18px; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; }
input,textarea,select { width:100%; margin-top:7px; padding:13px 12px; border:1px solid #bbb; background:#fff; font:14px Arial,sans-serif; }
textarea { min-height:150px; resize:vertical; }
button.btn { background:transparent; cursor:pointer; }
.tabs { display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:45px; }
.tab { padding:10px 18px; border:1px solid #bbb; background:#fff; font:600 11px 'Raleway',sans-serif; letter-spacing:1.3px; text-transform:uppercase; cursor:pointer; }
.tab.active { color:#fff; background:#222; }
.tab-panel { display:none; }
.tab-panel.active { display:block; }
.mobile-toggle { display:none; border:0; color:#fff; background:none; font-size:28px; }
@media (max-width:800px) {
  .site-header { top:42px; padding:22px 6vw; }
  .main-nav { display:none; position:absolute; top:78px; left:0; right:0; padding:22px 6vw; background:rgba(15,15,15,.96); flex-direction:column; }
  .main-nav.open { display:flex; }
  .mobile-toggle { display:block; }
  .hero { min-height:620px; }
  .details,.cards { grid-template-columns:1fr 1fr; }
  .gallery { grid-template-columns:1fr 1fr; }
  .gallery img { height:230px; }
  .menu-grid,.split { grid-template-columns:1fr; }
  .menu-category { grid-column:auto; }
}
@media (max-width:520px) {
  .topbar { justify-content:center; }
  .topbar nav { display:none; }
  .details,.cards,.gallery,.form-row { grid-template-columns:1fr; }
  .gallery img { height:auto; }
  .hero h1 { font-size:46px; }
}