/* =========================================================
   Baba Kebab — site styles (v1)
   Cleaner / neutral: warm off-white, one brass accent,
   modest serif headings, generous whitespace.
   ========================================================= */

:root{
  --bg:        #faf8f4;
  --surface:   #ffffff;
  --surface-2: #f3efe7;
  --ink:       #211f1b;
  --ink-2:     #5e5952;
  --ink-3:     #8b857b;
  --line:      #e7e1d5;
  --accent:    #a86b3c;
  --accent-d:  #8a5530;
  --accent-soft:#f1e7d9;
  --ok:        #3d7a4e;
  --err:       #b23b32;

  --radius:    10px;
  --radius-lg: 18px;
  --shadow-sm: 0 1px 2px rgba(33,31,27,.05), 0 2px 8px rgba(33,31,27,.05);
  --shadow:    0 8px 30px rgba(33,31,27,.10);
  --maxw:      1160px;

  --serif: "Lora", Georgia, "Times New Roman", serif;
  --sans:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--accent-d); text-underline-offset:2px; }
h1,h2,h3,h4{ font-family:var(--serif); font-weight:600; line-height:1.15; margin:0 0 .5em; letter-spacing:-.01em; }
h1{ font-size:clamp(2rem,4.6vw,3.1rem); }
h2{ font-size:clamp(1.55rem,3vw,2.2rem); }
h3{ font-size:1.2rem; font-weight:600; }
p{ margin:0 0 1rem; }
small{ font-size:.85rem; }
hr{ border:0; border-top:1px solid var(--line); margin:2rem 0; }

.wrap{ width:min(var(--maxw), calc(100% - 40px)); margin-inline:auto; }
.section{ padding:clamp(48px,7vw,88px) 0; }
.section--tint{ background:var(--surface-2); }
.section__head{ max-width:640px; margin-bottom:36px; }
.section__head p{ color:var(--ink-2); font-size:1.05rem; margin:0; }
.eyebrow{
  display:inline-block; font-family:var(--sans); font-weight:700;
  font-size:.72rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--accent-d); margin-bottom:12px;
}
.center{ text-align:center; }
.muted{ color:var(--ink-2); }
.stack-sm > * + *{ margin-top:.5rem; }

/* ---------- buttons ---------- */
.btn{
  --bg:var(--accent); --fg:#fff; --bd:var(--accent);
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.8em 1.4em; border-radius:999px; border:1.5px solid var(--bd);
  background:var(--bg); color:var(--fg);
  font:600 .97rem/1 var(--sans); text-decoration:none; cursor:pointer;
  transition:transform .12s ease, background .12s ease, border-color .12s ease;
}
.btn:hover{ transform:translateY(-1px); background:var(--accent-d); border-color:var(--accent-d); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); --bd:var(--line); }
.btn--ghost:hover{ --bg:var(--surface); --bd:var(--ink-3); background:var(--surface); }
.btn--lg{ padding:1em 1.7em; font-size:1.03rem; }
.btn--block{ width:100%; }
.btn:disabled{ opacity:.45; cursor:not-allowed; transform:none; }
.btn:disabled:hover{ background:var(--accent); border-color:var(--accent); transform:none; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:200;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__in{ display:flex; align-items:center; gap:18px; padding:12px 0;
  width:min(var(--maxw), calc(100% - 40px)); margin-inline:auto; }
.brand{ display:flex; align-items:center; gap:10px; text-decoration:none; color:var(--ink); flex:0 0 auto; }
.brand img{ height:40px; width:40px; object-fit:contain; }
.brand__txt{ font-family:var(--serif); font-weight:600; font-size:1.12rem; line-height:1; }
.brand__txt span{ display:block; font-family:var(--sans); font-weight:600; font-size:.58rem;
  letter-spacing:.15em; text-transform:uppercase; color:var(--ink-3); margin-top:3px; }
.nav{ display:flex; gap:2px; margin-left:auto; }
.nav a{ text-decoration:none; color:var(--ink-2); font-weight:600; font-size:.95rem;
  padding:.5em .8em; border-radius:8px; }
.nav a:hover{ color:var(--ink); background:var(--surface-2); }
.nav a[aria-current="page"]{ color:var(--accent-d); }
.site-header .btn{ flex:0 0 auto; padding:.62em 1.1em; }
.burger{ display:none; width:42px; height:42px; border:1px solid var(--line);
  border-radius:9px; background:var(--surface); cursor:pointer; }
.burger span{ display:block; width:16px; height:2px; background:var(--ink); margin:4px auto; border-radius:2px; }
.mobile-nav{ display:none; border-top:1px solid var(--line); padding:8px 20px 16px; background:var(--bg); }
.mobile-nav a{ display:block; padding:11px 6px; text-decoration:none; color:var(--ink); font-weight:600;
  border-bottom:1px solid var(--line); }
.mobile-nav a:last-child{ border-bottom:0; color:var(--accent-d); }
.mobile-nav[hidden]{ display:none; }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, color-mix(in srgb, var(--bg) 97%, transparent), color-mix(in srgb, var(--bg) 82%, transparent) 44%, color-mix(in srgb, var(--bg) 35%, transparent)); }
.hero__in{ position:relative; z-index:2; padding:clamp(56px,9vw,110px) 0; }
.hero__in .wrap{ max-width:600px; }
.hero p.lead{ font-size:1.15rem; color:var(--ink-2); }
.hero__cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
.hero__meta{ display:flex; flex-wrap:wrap; gap:6px 24px; margin-top:22px; font-size:.92rem; color:var(--ink-2); }
.hero__meta b{ color:var(--ink); }

/* ---------- cards / grids ---------- */
.grid{ display:grid; gap:22px; }
.grid--3{ grid-template-columns:repeat(3,1fr); }
.grid--4{ grid-template-columns:repeat(4,1fr); }
.grid--2{ grid-template-columns:repeat(2,1fr); }

.card{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm); display:flex; flex-direction:column; }
.card__img{ aspect-ratio:4/3; object-fit:cover; background:var(--surface-2); width:100%; }
.card__body{ padding:16px 18px 20px; }
.card__body h3{ margin-bottom:.2em; }
.card__body p{ margin:0; color:var(--ink-2); font-size:.94rem; }

.scroller{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(240px,270px);
  gap:18px; overflow-x:auto; padding-bottom:10px; scroll-snap-type:x mandatory; }
.scroller > *{ scroll-snap-align:start; }

.feature{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; }
.feature .ico{ font-size:1.5rem; }
.feature h3{ margin:.5em 0 .2em; }
.feature p{ margin:0; color:var(--ink-2); font-size:.93rem; }

/* two-column split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:40px; align-items:center; }
.split--wide-left{ grid-template-columns:1.2fr .8fr; }
.panel{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:24px; box-shadow:var(--shadow-sm); }

/* gallery */
.gallery{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.gallery img{ aspect-ratio:1/1; object-fit:cover; border-radius:var(--radius); background:var(--surface-2); }
.gallery img:first-child{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; height:100%; }

/* reviews */
.reviews{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.review{ background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px; }
.review .stars{ color:var(--accent); letter-spacing:2px; margin-bottom:8px; }
.review p{ margin:0 0 10px; }
.review cite{ color:var(--ink-3); font-style:normal; font-size:.9rem; font-weight:600; }

/* amenities */
.amenities{ display:flex; flex-wrap:wrap; gap:10px 12px; }
.amenities span{ background:var(--surface); border:1px solid var(--line); border-radius:999px;
  padding:.45em 1em; font-size:.88rem; color:var(--ink-2); }

/* hours + map */
.hours-row{ display:flex; justify-content:space-between; gap:16px; padding:.4em 0; border-bottom:1px solid var(--line); }
.hours-row:last-child{ border-bottom:0; }
.hours-row.is-today{ font-weight:700; color:var(--ink); }
.mapbox{ border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; }
.mapbox iframe{ width:100%; height:320px; border:0; display:block; }

/* FAQ */
.faq details{ border-bottom:1px solid var(--line); padding:14px 0; }
.faq summary{ cursor:pointer; font-weight:600; font-family:var(--serif); list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--accent); font-family:var(--sans); }
.faq details[open] summary::after{ content:"–"; }
.faq details p{ margin:12px 0 2px; color:var(--ink-2); }

/* CTA band — intentionally always dark, independent of page theme */
.band{ background:#1c1712; color:#fff; border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,44px); text-align:center; }
.band h2{ color:#fff; }
.band p{ color:rgba(255,255,255,.78); max-width:52ch; margin-inline:auto; }
.band .hero__cta{ justify-content:center; }
.band .btn--ghost{ --fg:#fff; --bd:rgba(255,255,255,.4); }
.band .btn--ghost:hover{ background:rgba(255,255,255,.08); }

/* emblem block */
.emblem-block{ display:grid; grid-template-columns:200px 1fr; gap:32px; align-items:center; }
.emblem-block img{ width:100%; border-radius:var(--radius-lg); background:var(--surface-2); }

/* forms */
.form{ display:grid; gap:14px; }
.form label{ display:block; font-weight:600; font-size:.92rem; }
.form input, .form select, .form textarea{
  font:inherit; padding:.72em .85em; border:1.5px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink); width:100%; margin-top:6px;
}
.form input:focus, .form select:focus, .form textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft);
}
.form__row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.form .req{ color:var(--err); }
.form-note{ font-size:.85rem; color:var(--ink-3); }
.form-status{ padding:12px 14px; border-radius:var(--radius); font-size:.92rem; }
.form-status--ok{ background:#eef6f0; color:var(--ok); border:1px solid #cfe6d6; }
.form-status--err{ background:#fbeeec; color:var(--err); border:1px solid #f0d3cf; }

/* footer */
.site-footer{ background:var(--surface-2); border-top:1px solid var(--line); padding:48px 0 32px; font-size:.92rem; }
.site-footer__grid{ display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:28px; margin-bottom:24px; }
.site-footer h4{ font-family:var(--sans); font-size:.74rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 .8em; }
.site-footer a{ color:var(--ink); text-decoration:none; display:block; padding:.2em 0; }
.site-footer a:hover{ color:var(--accent-d); }
.site-footer__legal{ border-top:1px solid var(--line); padding-top:18px; color:var(--ink-3); display:flex;
  justify-content:space-between; gap:16px; flex-wrap:wrap; }
.site-footer__legal a{ display:inline; color:inherit; text-decoration:underline; text-underline-offset:2px; padding:0; }
.site-footer__legal a:hover{ color:var(--accent-d); }

/* utility */
.skip{ position:absolute; left:-9999px; top:8px; background:var(--ink); color:#fff; padding:10px 14px; border-radius:8px; z-index:999; }
.skip:focus{ left:10px; }
:focus-visible{ outline:2.5px solid var(--accent); outline-offset:2px; border-radius:3px; }
.draft-flag{ background:repeating-linear-gradient(45deg,#f6ecd8 0 10px,#f1e5c9 10px 20px);
  border:1px dashed var(--accent-d); color:var(--accent-d); font-size:.8rem; font-weight:700;
  text-align:center; padding:7px; border-radius:8px; letter-spacing:.03em; }

/* ---------- responsive ---------- */
@media (max-width:900px){
  .nav{ display:none; }
  .site-header .btn{ display:none; }
  .burger{ display:block; margin-left:auto; }
  .grid--3, .grid--4, .reviews{ grid-template-columns:1fr 1fr; }
  .split, .split--wide-left, .emblem-block{ grid-template-columns:1fr; gap:24px; }
  .site-footer__grid{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:repeat(3,1fr); }
  .gallery img:first-child{ grid-column:span 2; grid-row:span 2; }
}
@media (max-width:560px){
  .grid--3, .grid--4, .reviews, .grid--2, .site-footer__grid{ grid-template-columns:1fr; }
  .form__row{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:repeat(2,1fr); }
  .hero__cta .btn{ flex:1; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}