/* ===================================================================
   Kasa Restaurant — static site styles
   =================================================================== */

:root{
  --dark:      #15100a;
  --dark-2:    #0e0a06;
  --cream:     #f4e9d7;
  --ink:       #241a10;
  --ink-soft:  #4a3a27;
  --gold:      #b4873f;
  --gold-soft: #e0a94a;
  --cream-text:#f4e9d7;
  --cream-sub: #a89070;
  --cream-sub2:#d8c7aa;
  --border-dark: rgba(180,135,63,0.18);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--dark);
  color:var(--ink);
  font-family:'Mulish', sans-serif;
  overflow-x:hidden;
}
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }
img{ display:block; max-width:100%; }
::selection{ background:var(--gold); color:#1c140c; }

.serif{ font-family:'Alegreya', serif; }

.eyebrow{
  display:flex; align-items:center; gap:14px;
  font-size:13px; font-weight:800; letter-spacing:.18em; text-transform:uppercase;
}
.eyebrow::before{ content:""; height:1px; width:40px; background:var(--gold); }
.eyebrow.center{ justify-content:center; }
.eyebrow.center::after{ content:""; height:1px; width:40px; background:var(--gold); }
.eyebrow.on-dark{ color:#e7c98a; }
.eyebrow.on-light{ color:#8a6224; }

.wrap{ max-width:1180px; margin:0 auto; padding:0 24px; }
.wrap-wide{ max-width:1280px; margin:0 auto; padding:0 24px; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(21,16,10,.88); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-dark);
}
.site-header .inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:20px; flex-wrap:wrap; padding:14px 24px;
}
.brand{ display:flex; align-items:center; gap:10px; }
.brand img{ width:36px; height:36px; border-radius:50%; object-fit:cover; border:1px solid rgba(180,135,63,.5); }
.brand span{ font-weight:700; font-size:22px; letter-spacing:.08em; color:var(--cream-text); }

.main-nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.main-nav a{ font-size:14px; font-weight:600; color:var(--cream-sub2); }
.main-nav a:hover{ color:var(--gold-soft); }

.lang-switch{
  display:flex; align-items:center; gap:6px;
  background:rgba(244,233,215,.06); border:1px solid rgba(180,135,63,.3);
  border-radius:999px; padding:4px;
}
.lang-switch button{
  border:none; border-radius:999px; padding:6px 13px;
  font-size:12px; font-weight:800; letter-spacing:.06em;
  background:transparent; color:var(--cream-sub2);
  transition:background .15s, color .15s;
}
.lang-switch button.active{ background:var(--gold); color:#1c140c; }

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:92vh; display:flex; align-items:flex-end;
}
.hero img.bg{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
}
.hero .scrim{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(14,10,6,.55) 0%, rgba(14,10,6,.35) 35%, rgba(14,10,6,.92) 100%);
}
.hero .inner{ position:relative; width:100%; padding:0 24px 72px; }
.hero .content{ max-width:720px; margin:0 auto 0 0; }
.hero h1{
  font-weight:700; line-height:1.03; color:#f8efdf; margin:22px 0;
  font-size:clamp(40px,6vw,76px);
}
.hero p.lead{
  font-size:17px; line-height:1.6; color:#e3d3b8; max-width:560px; margin:0 0 34px;
}
.hero .cta-row{ display:flex; gap:14px; flex-wrap:wrap; }
.btn{
  font-weight:800; font-size:14px; letter-spacing:.03em;
  padding:15px 28px; border-radius:4px; display:inline-block; border:none;
}
.btn-solid{ background:var(--gold); color:#1c140c; }
.btn-outline{ border:1px solid rgba(244,233,215,.4); color:var(--cream-text); font-weight:700; }

/* ---------- about ---------- */
.section-light{ background:var(--cream); padding:110px 24px; }
.section-dark{ background:var(--dark); padding:110px 24px; }

.about-grid{ display:flex; gap:72px; flex-wrap:wrap; align-items:center; }
.about-text{ flex:1 1 440px; min-width:0; }
.about-text h2{ font-weight:700; line-height:1.15; color:var(--ink); margin:18px 0 26px; font-size:clamp(28px,3.4vw,42px); }
.about-text p{ font-size:16px; line-height:1.75; color:var(--ink-soft); margin:0 0 18px; }
.about-media{ flex:1 1 380px; min-width:280px; }
.about-media img{ width:100%; height:420px; object-fit:cover; border-radius:6px; box-shadow:0 24px 48px -16px rgba(28,20,12,.35); }

.chips{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.chip{
  background:rgba(180,135,63,.14); border:1px solid rgba(180,135,63,.4);
  color:#6b4a1e; font-size:13px; font-weight:700; padding:9px 16px; border-radius:999px;
}

/* ---------- menu ---------- */
.menu-head{ text-align:center; margin-bottom:12px; display:flex; flex-direction:column; align-items:center; }
.menu-head h2{ font-weight:700; color:#f8efdf; margin:18px 0 44px; font-size:clamp(28px,3.4vw,42px); }

.cat-tabs{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-bottom:48px; }
.cat-tabs button{
  border:1px solid rgba(216,199,170,.3); background:transparent; color:var(--cream-sub2);
  border-radius:999px; padding:10px 20px; font-size:13px; font-weight:700; letter-spacing:.02em;
  transition:all .15s;
}
.cat-tabs button.active{ background:var(--gold); border-color:var(--gold); color:#1c140c; }

.menu-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:1px 48px; }
.menu-item{ padding:22px 0; border-bottom:1px solid var(--border-dark); display:flex; justify-content:space-between; gap:18px; }
.menu-item .name{ font-weight:700; font-size:19px; color:var(--cream-text); margin-bottom:6px; }
.menu-item .desc{ font-size:13.5px; line-height:1.5; color:var(--cream-sub); }
.menu-item .price{ font-weight:700; font-size:16px; color:var(--gold-soft); white-space:nowrap; padding-top:2px; }

.menu-note{ text-align:center; color:#8a7b61; font-size:13.5px; margin:44px 0 0; }

@media (max-width:760px){
  .menu-grid{ grid-template-columns:1fr !important; }
}

/* ---------- gallery ---------- */
.gallery-head{ text-align:center; margin-bottom:52px; }
.gallery-head h2{ font-weight:700; color:var(--ink); margin:18px 0 0; font-size:clamp(26px,3.2vw,38px); }
.gallery-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.gallery-grid figure{
  margin:0; position:relative; border-radius:6px; overflow:hidden;
  aspect-ratio:4/5; box-shadow:0 18px 36px -18px rgba(28,20,12,.4);
}
.gallery-grid img{ width:100%; height:100%; object-fit:cover; }
.gallery-grid figcaption{
  position:absolute; left:0; right:0; bottom:0; padding:16px;
  background:linear-gradient(0deg, rgba(14,10,6,.78), rgba(14,10,6,0));
  color:var(--cream-text); font-size:13px; font-weight:600;
}

/* ---------- contacts ---------- */
.contact-grid{ display:flex; gap:64px; flex-wrap:wrap; }
.contact-intro{ flex:1 1 340px; min-width:280px; }
.contact-intro h2{ font-weight:700; color:#f8efdf; margin:18px 0 20px; font-size:clamp(26px,3.2vw,38px); }
.contact-intro p{ font-size:14px; color:var(--cream-sub); line-height:1.6; max-width:420px; }

.contact-details{ flex:2 1 560px; min-width:280px; display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:36px; }
.contact-details .label{ font-size:12px; font-weight:800; letter-spacing:.1em; color:#8a7b61; text-transform:uppercase; margin-bottom:10px; }
.contact-details .val{ display:block; font-size:16px; color:var(--cream-text); line-height:1.7; }
.contact-details .val.accent{ color:var(--gold-soft); font-weight:700; }

/* ---------- footer ---------- */
.site-footer{ background:var(--dark-2); padding:28px 24px; border-top:1px solid var(--border-dark); }
.site-footer .inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-footer .brand img{ width:24px; height:24px; opacity:.85; }
.site-footer .brand span{ font-size:15px; color:#c9b394; }
.site-footer p{ margin:0; font-size:12.5px; color:#7a6c54; }