/* ============ Kaj Mece — Modern Restaurant Theme ============ */
:root{
  --bg:#1a1612;
  --bg-2:#221c17;
  --card:#251e18;
  --fg:#f0e7d8;
  --muted:#a8a092;
  --gold:#d4af6a;
  --gold-2:#e9c98a;
  --ember:#c0623a;
  --line:rgba(212,175,106,.25);
  --maxw:1200px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:'Inter',system-ui,sans-serif; font-weight:300; line-height:1.6;
  background-image:
    radial-gradient(ellipse at top, rgba(192,98,58,.06), transparent 60%),
    radial-gradient(ellipse at bottom, rgba(0,0,0,.4), transparent 70%);
}
img{max-width:100%; display:block}
a{color:var(--gold); text-decoration:none; transition:color .2s}
a:hover{color:var(--gold-2)}
h1,h2,h3,h4{font-family:'Cormorant Garamond',serif; font-weight:500; letter-spacing:-.01em; color:#f6efe1; margin:0}
.font-display{font-family:'Cormorant Garamond',serif}
.italic{font-style:italic}
.container{max-width:var(--maxw); margin:0 auto; padding:0 1.5rem}
.container.narrow{max-width:780px}
.text-center{text-align:center}
.muted{color:var(--muted)}
.small{font-size:.875rem}
.lead{font-size:1.05rem; color:#d8cfc0}
.eyebrow{
  text-transform:uppercase; letter-spacing:.4em; font-size:.7rem;
  color:var(--gold); margin:0;
}
.gold-line{height:1px; width:10rem; background:linear-gradient(90deg,transparent,var(--gold),transparent); margin:1.75rem 0}
.gold-line.short{width:5rem}
.gold-mini{display:inline-block; width:2.5rem; height:1px; background:rgba(212,175,106,.5); margin-top:.6rem}
.section{padding:5.5rem 0; position:relative}
.section-dark{background:rgba(0,0,0,.25); border-top:1px solid var(--line); border-bottom:1px solid var(--line)}
.section-title{font-size:clamp(2.25rem,4.5vw,3.5rem); line-height:1.1; margin-top:1.25rem}

/* ============ Header ============ */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:50;
  transition:background .3s, backdrop-filter .3s, border-color .3s;
  border-bottom:1px solid transparent;
}
.site-header.is-scrolled{
  background:rgba(20,16,12,.85);
  backdrop-filter:blur(14px);
  border-color:var(--line);
}
.header-inner{display:flex; align-items:center; justify-content:space-between; padding:1.1rem 1.5rem; max-width:var(--maxw); margin:0 auto}
.brand{display:flex; align-items:center; gap:.85rem}
.brand-logo{height:46px; width:auto; filter:drop-shadow(0 2px 8px rgba(0,0,0,.4))}
.brand-text{font-size:1.5rem; color:var(--fg); letter-spacing:.02em}

.primary-nav{display:flex; align-items:center; gap:2rem}
.nav-list{display:flex; gap:2rem; list-style:none; padding:0; margin:0}
.nav-list a{color:var(--fg); font-size:.78rem; letter-spacing:.25em; text-transform:uppercase; font-weight:400; padding:.5rem 0; position:relative}
.nav-list a::after{content:""; position:absolute; left:0; right:0; bottom:0; height:1px; background:var(--gold); transform:scaleX(0); transform-origin:left; transition:transform .3s}
.nav-list a:hover::after,.nav-list .current-menu-item a::after{transform:scaleX(1)}

.lang-switcher{display:flex; gap:.5rem; padding-left:1.5rem; border-left:1px solid var(--line)}
.lang-link{font-size:.7rem; letter-spacing:.2em; color:var(--muted); padding:.25rem .5rem; border:1px solid transparent}
.lang-link.is-active{color:var(--gold); border-color:var(--gold)}

.nav-toggle{display:none; background:none; border:0; cursor:pointer; padding:.5rem; flex-direction:column; gap:5px}
.nav-toggle span{width:24px; height:1.5px; background:var(--fg); transition:.3s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media (max-width:880px){
  .nav-toggle{display:flex}
  .primary-nav{
    position:absolute; top:100%; left:0; right:0; background:rgba(20,16,12,.97);
    backdrop-filter:blur(20px); flex-direction:column; padding:2rem; gap:1.5rem;
    transform:translateY(-10px); opacity:0; pointer-events:none; transition:.3s; border-top:1px solid var(--line);
  }
  .primary-nav.is-open{transform:none; opacity:1; pointer-events:auto}
  .nav-list{flex-direction:column; gap:1.25rem; align-items:center}
  .lang-switcher{padding-left:0; border-left:0; border-top:1px solid var(--line); padding-top:1.25rem; width:100%; justify-content:center}
}

.site-main{padding-top:80px}

/* ============ Hero ============ */
.hero{
  position:relative; height:100vh; min-height:640px; overflow:hidden;
  display:flex; align-items:center; justify-content:center; text-align:center;
  background-image:var(--hero-img); background-size:cover; background-position:center;
}
.hero-overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,.55) 100%),
    linear-gradient(to bottom, rgba(26,22,18,.4) 0%, rgba(26,22,18,.2) 50%, var(--bg) 100%);
}
.hero-inner{position:relative; padding:0 1.5rem; max-width:780px; animation:fadeUp 1.2s ease both}
.hero-title{font-size:clamp(4rem,12vw,9rem); line-height:.9; margin:1.5rem 0; color:#f6efe1; letter-spacing:-.02em}
.hero-title em{font-style:normal; background:linear-gradient(180deg,var(--gold-2),var(--gold)); -webkit-background-clip:text; background-clip:text; color:transparent}
.hero-sub{font-size:1.05rem; max-width:520px; margin:1.5rem auto 0; color:rgba(240,231,216,.85); line-height:1.7}
.hero-cta{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap; margin-top:2.5rem}
.scroll-cue{position:absolute; bottom:2rem; left:50%; width:1px; height:4rem; background:linear-gradient(to bottom,transparent,var(--gold),transparent); animation:pulse 2s ease infinite}
@keyframes pulse{0%,100%{opacity:.4} 50%{opacity:1}}
@keyframes fadeUp{from{opacity:0; transform:translateY(20px)} to{opacity:1; transform:none}}

/* ============ Buttons ============ */
.btn{
  display:inline-flex; align-items:center; gap:.75rem;
  padding:1rem 1.75rem; font-size:.72rem; letter-spacing:.25em; text-transform:uppercase;
  border:1px solid transparent; cursor:pointer; transition:.25s; font-family:inherit; font-weight:500;
}
.btn-primary{background:var(--gold); color:#1a1612}
.btn-primary:hover{background:var(--gold-2); color:#1a1612}
.btn-ghost{border-color:rgba(240,231,216,.4); color:var(--fg); background:transparent}
.btn-ghost:hover{border-color:var(--gold); color:var(--gold)}
.btn-outline{border-color:var(--gold); color:var(--gold); background:transparent}
.btn-outline:hover{background:var(--gold); color:#1a1612}

/* ============ Pillars ============ */
.grid-4{display:grid; grid-template-columns:repeat(4,1fr); gap:2.5rem; text-align:center}
@media (max-width:760px){.grid-4{grid-template-columns:repeat(2,1fr); gap:2rem}}
.pillar h3{font-size:1.5rem; margin-top:1.25rem}
.pillar-dot{display:inline-block; width:.5rem; height:.5rem; border-radius:50%; background:var(--gold); box-shadow:0 0 20px var(--gold)}

/* ============ About / 2col ============ */
.grid-2{display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center}
@media (max-width:880px){.grid-2{grid-template-columns:1fr; gap:3rem}}
.about-image-wrap{position:relative}
.about-image-wrap .frame{position:absolute; inset:-.75rem; border:1px solid var(--gold); pointer-events:none}
.about-image-wrap img{position:relative; height:520px; width:100%; object-fit:cover}

/* ============ Dishes ============ */
.dishes-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:2rem; margin-top:4rem}
@media (max-width:880px){.dishes-grid{grid-template-columns:1fr}}
.dish-card{background:rgba(0,0,0,.3); border:1px solid var(--line); transition:border-color .3s; overflow:hidden}
.dish-card:hover{border-color:var(--gold)}
.dish-img{overflow:hidden}
.dish-img img{height:280px; width:100%; object-fit:cover; transition:transform 1.2s}
.dish-card:hover .dish-img img{transform:scale(1.08)}
.dish-body{padding:1.75rem}
.dish-row{display:flex; justify-content:space-between; align-items:baseline; gap:1rem}
.dish-row h3{font-size:1.5rem}
.dish-price{color:var(--gold); font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; white-space:nowrap}

/* ============ Quote ============ */
.quote{padding:8rem 1.5rem; text-align:center}
.quote blockquote{max-width:880px; margin:0 auto}
.quote p{font-size:clamp(1.5rem,3.2vw,2.5rem); line-height:1.3; color:#f6efe1; margin:0}
.quote footer{margin-top:2rem; font-size:.7rem; letter-spacing:.4em; color:var(--gold); text-transform:uppercase}

/* ============ CTA ============ */
.cta-section{padding-bottom:6rem}
.cta-card{position:relative; max-width:1100px; margin:0 auto; padding:5rem 3rem; border:1px solid var(--gold); background-size:cover; background-position:center; overflow:hidden}
.cta-overlay{position:absolute; inset:0; background:linear-gradient(to right, var(--bg) 30%, rgba(26,22,18,.5) 100%)}
.cta-content{position:relative; max-width:36rem}
.cta-content h2{font-size:clamp(2rem,4vw,3rem)}
.cta-content p{margin:1.25rem 0 0; color:rgba(240,231,216,.85)}

/* ============ Page hero ============ */
.page-hero{padding:6rem 0 3rem}

/* ============ Menu page ============ */
.menu-cat{margin-bottom:4.5rem}
.menu-cat-title{font-size:2.25rem; color:var(--gold)}
.menu-list{list-style:none; padding:0; margin:2rem 0 0}
.menu-item{padding:1.25rem 0; border-bottom:1px dashed var(--line)}
.menu-item-head{display:flex; align-items:baseline; gap:.75rem}
.menu-item-head h3{font-size:1.4rem; color:#f6efe1}
.menu-item-head .dots{flex:1; border-bottom:1px dotted rgba(212,175,106,.35); transform:translateY(-4px)}
.menu-item-head .price{color:var(--gold); font-weight:500; white-space:nowrap}
.menu-item p{margin:.5rem 0 0; max-width:90%}

/* ============ Contact ============ */
.contact-form{display:grid; gap:1rem; margin-top:1.25rem}
.contact-form input,.contact-form textarea{
  background:rgba(0,0,0,.3); border:1px solid var(--line); padding:.95rem 1.1rem; color:var(--fg); font-family:inherit; font-size:.95rem;
}
.contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--gold)}
.alert{padding:1rem; border:1px solid var(--gold); background:rgba(212,175,106,.08); color:var(--gold)}

/* ============ Footer ============ */
.site-footer{background:#13100c; border-top:1px solid var(--line); margin-top:4rem; padding:4rem 0 2rem}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:2.5rem}
@media (max-width:760px){.footer-grid{grid-template-columns:1fr 1fr; gap:2rem}}
.footer-grid h4{color:var(--gold); font-size:1.1rem; margin-bottom:.75rem; letter-spacing:.05em}
.footer-grid p{margin:.4rem 0; font-size:.92rem}
.footer-logo{height:64px; width:auto; margin-bottom:1rem}
.copyright{padding-top:2.5rem; margin-top:2.5rem; border-top:1px solid var(--line); font-size:.78rem; color:var(--muted); text-align:center; letter-spacing:.1em}

/* Reveal */
.reveal{opacity:0; transform:translateY(24px); transition:opacity .9s ease, transform .9s ease}
.reveal.is-visible{opacity:1; transform:none}