/* 4 Brothers - Human-made, decent, black + yellow */
:root{
  --bg:#FAF8F3;
  --bg2:#F2EFE8;
  --text:#111111;
  --muted:#6B6B6B;
  --muted2:#9A9A9A;
  --border:#E8E3D9;
  --border2:#DDD8CC;
  --yellow:#FFC300;
  --yellow-dark:#E6B000;
  --black:#111111;
  --white:#FFFFFF;
  --card:#FFFFFF;
  --shadow:0 1px 3px rgba(0,0,0,0.06), 0 8px 24px rgba(0,0,0,0.04);
}
[data-theme="dark"]{
  --bg:#0F0F0F;
  --bg2:#171717;
  --text:#F2F0EB;
  --muted:#9E9E9E;
  --muted2:#6E6E6E;
  --border:#232323;
  --border2:#2D2D2D;
  --yellow:#FFC300;
  --yellow-dark:#FFD24A;
  --black:#F2F0EB;
  --white:#0F0F0F;
  --card:#1A1A1A;
  --shadow:0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.3);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:16px}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:'Fraunces',serif;letter-spacing:-0.02em;line-height:0.95}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
.eyebrow{font-size:11px;letter-spacing:0.18em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:14px}
.small{font-size:13px;color:var(--muted);line-height:1.5}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 20px;font-size:14px;font-weight:600;border-radius:6px;border:1px solid transparent;transition:all .18s ease;cursor:pointer}
.btn-yellow{background:var(--yellow);color:#111;border-color:var(--yellow)}
.btn-yellow:hover{background:var(--yellow-dark)}
.btn-black{background:var(--black);color:var(--white);border-color:var(--black)}
.btn-black:hover{opacity:0.88}
.btn-outline{background:transparent;border-color:var(--border2);color:var(--text)}
.btn-outline:hover{border-color:var(--text)}

/* topbar */
.topbar{display:flex;justify-content:space-between;gap:16px;padding:8px 24px;font-size:12px;letter-spacing:0.02em;background:var(--black);color:#fff}
[data-theme="dark"] .topbar{background:#000}
@media(max-width:700px){.topbar{display:none}}

/* header */
.site-header{position:sticky;top:0;z-index:40;background:rgba(250,248,243,0.88);backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
[data-theme="dark"] .site-header{background:rgba(15,15,15,0.9)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:64px}
.logo{font-family:'Inter',sans-serif;font-weight:800;letter-spacing:0.08em;font-size:18px}
.main-nav{display:flex;gap:28px}
.main-nav a{font-size:14px;font-weight:500;color:var(--muted)}
.main-nav a:hover{color:var(--text)}
.header-actions{display:flex;align-items:center;gap:12px}
.theme-btn{width:36px;height:36px;display:grid;place-items:center;border-radius:6px;border:1px solid var(--border);background:var(--card)}
.theme-btn .moon{display:none}
[data-theme="dark"] .theme-btn .sun{display:none}
[data-theme="dark"] .theme-btn .moon{display:block}
.hamburger{display:none;flex-direction:column;gap:5px;width:36px;height:36px;align-items:center;justify-content:center;border:1px solid var(--border);border-radius:6px;background:var(--card)}
.hamburger span{width:16px;height:1.5px;background:var(--text);display:block}
.mobile-nav{display:none;padding:16px 24px 24px;border-top:1px solid var(--border);flex-direction:column;gap:14px}
.mobile-nav.open{display:flex}
@media(max-width:860px){.main-nav{display:none}.hamburger{display:flex}}

/* hero */
.hero{padding:48px 0 24px;border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:1.05fr 0.95fr;gap:48px;align-items:center}
.hero h1{font-size:64px;margin-bottom:18px}
.yellow-line{position:relative;display:inline-block}
.yellow-line:after{content:'';position:absolute;left:0;right:0;bottom:6px;height:10px;background:var(--yellow);z-index:-1;opacity:0.9}
.lead{font-size:18px;color:var(--muted);max-width:48ch;margin-bottom:26px;line-height:1.55}
.hero-ctas{display:flex;gap:12px;margin-bottom:36px;flex-wrap:wrap}
.hero-meta{display:flex;gap:32px;border-top:1px solid var(--border);padding-top:20px}
.hero-meta strong{display:block;font-size:14px}
.hero-meta span{font-size:12px;color:var(--muted)}
.hero-image{position:relative}
.hero-image img{width:100%;height:520px;object-fit:cover;border-radius:8px}
.hero-caption{position:absolute;left:12px;bottom:12px;background:var(--card);border:1px solid var(--border);padding:8px 12px;border-radius:6px;font-size:12px;box-shadow:var(--shadow)}
@media(max-width:900px){.hero-grid{grid-template-columns:1fr}.hero h1{font-size:48px}.hero-image img{height:380px}}

/* story */
.story{padding:72px 0;border-bottom:1px solid var(--border);background:var(--bg2)}
.story-grid{display:grid;grid-template-columns:0.9fr 1.1fr;gap:56px;align-items:center}
.story-image img{width:100%;height:520px;object-fit:cover;border-radius:8px}
.story h2{font-size:42px;margin-bottom:18px;line-height:1.05}
.story p{color:var(--muted);margin-bottom:14px;font-size:16px;max-width:52ch}
.plain-list{list-style:none;margin-top:20px;display:grid;gap:8px;color:var(--text);font-size:14px}
@media(max-width:900px){.story-grid{grid-template-columns:1fr}.story-image img{height:360px}}

/* menu */
.menu{padding:72px 0;border-bottom:1px solid var(--border)}
.section-head{text-align:center;margin-bottom:48px}
.section-head h2{font-size:52px;margin-bottom:8px}
.section-head p{color:var(--muted)}
.menu-columns{display:grid;grid-template-columns:1fr 1fr;gap:56px}
.menu-col h3{font-size:20px;margin-bottom:20px;letter-spacing:0.02em;text-transform:uppercase;font-family:'Inter',sans-serif;font-weight:700}
.menu-item{margin-bottom:22px}
.menu-line{display:flex;align-items:baseline;gap:10px}
.menu-line .name{font-weight:600;font-size:15px;white-space:nowrap}
.menu-line .dots{flex:1;border-bottom:1px dotted var(--border2);height:1px;transform:translateY(-3px)}
.menu-line .price{font-weight:600;font-size:14px;color:var(--text);background:var(--yellow);padding:2px 8px;border-radius:4px;white-space:nowrap}
.desc{font-size:13px;color:var(--muted);margin-top:4px}
.menu-note{margin-top:48px;text-align:center;border:1px dashed var(--border2);padding:14px;border-radius:8px;background:var(--card)}
.menu-note p{font-size:13px;color:var(--muted)}
@media(max-width:800px){.menu-columns{grid-template-columns:1fr}}

/* gallery */
.gallery{padding:24px 0;border-bottom:1px solid var(--border)}
.gallery-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery-grid img{width:100%;height:280px;object-fit:cover;border-radius:8px;filter:saturate(0.95)}
@media(max-width:700px){.gallery-grid{grid-template-columns:1fr 1fr}.gallery-grid img{height:200px}}

/* visit */
.visit{padding:72px 0;border-bottom:1px solid var(--border)}
.visit-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px}
.visit h2{font-size:44px;margin-bottom:24px}
.visit-blocks{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:28px}
.visit-block strong{display:block;margin-bottom:6px;font-size:15px}
.visit-block p{font-size:13px;color:var(--muted);line-height:1.6}
.visit-actions{display:flex;gap:12px;flex-wrap:wrap}
.hours-box{border:1px solid var(--border);border-radius:8px;padding:24px;background:var(--card)}
.hours-box h4{font-family:'Inter';font-size:13px;letter-spacing:0.1em;text-transform:uppercase;margin-bottom:16px}
.hours-box ul{list-style:none;display:grid;gap:10px}
.hours-box li{display:flex;justify-content:space-between;font-size:13px}
.hours-box hr{border:none;border-top:1px solid var(--border);margin:18px 0}
@media(max-width:900px){.visit-grid{grid-template-columns:1fr}.visit-blocks{grid-template-columns:1fr}}

/* footer */
.footer{padding:36px 0 24px}
.footer-grid{display:grid;grid-template-columns:1.4fr 0.6fr 0.8fr 0.6fr;gap:24px;align-items:start}
.footer-grid a:hover{text-decoration:underline}
@media(max-width:800px){.footer-grid{grid-template-columns:1fr 1fr}}