/* Noir & Sel — Luxury Restaurant | Dark cinematic fine dining */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
:root{
  --bg:#0a0a0a; --surface:#141414; --gold:#c9ab6c; --text:#ece7dd; --text-dim:#8f887b; --line:rgba(236,231,221,.12);
  --display:'Cinzel',serif; --sans:'Karla',sans-serif;
}
body{background:var(--bg);color:var(--text);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:var(--display);font-weight:500}
:focus-visible{outline:1px solid var(--gold);outline-offset:4px}

.header{display:flex;justify-content:space-between;align-items:center;padding:1.4rem clamp(1.2rem,4vw,3rem);position:sticky;top:0;z-index:40;background:rgba(10,10,10,.85);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.logo{font-family:var(--display);letter-spacing:.14em;font-size:1.15rem}
.logo em{color:var(--gold);font-style:normal}
header nav{display:flex;gap:2.2rem;font-size:.85rem;letter-spacing:.03em}
header nav a:hover{color:var(--gold)}
.menu-btn{display:none;background:none;border:1px solid var(--line);color:var(--text);width:38px;height:38px;border-radius:50%}
.mobile-nav{display:none;flex-direction:column;background:var(--surface)}
.mobile-nav.open{display:flex}
.mobile-nav a{padding:1rem 1.5rem;border-top:1px solid var(--line)}

.hero{position:relative;height:90vh;min-height:520px}
.hero img{width:100%;height:100%;object-fit:cover;opacity:.85}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,10,10,.9),rgba(10,10,10,.2) 60%)}
.hero-copy{position:absolute;bottom:3rem;left:50%;transform:translateX(-50%);text-align:center;z-index:2;width:100%;padding:0 1.5rem}
.eyebrow{color:var(--gold);letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;margin-bottom:1rem}
.hero-copy h1{font-size:clamp(2.2rem,5.5vw,3.8rem);line-height:1.2;margin-bottom:1.8rem}
.btn{display:inline-block;border:1px solid var(--gold);color:var(--gold);padding:.9rem 2rem;font-size:.82rem;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:transparent;transition:.3s}
.btn:hover{background:var(--gold);color:#0a0a0a}
.btn-block{width:100%;text-align:center}

.menu{max-width:800px;margin:0 auto;padding:clamp(3rem,7vw,6rem) 1.5rem;text-align:center}
.menu h2,.chef h2,.reserve h2{font-size:clamp(1.8rem,4vw,2.6rem);margin-bottom:.6rem}
.menu-sub{color:var(--text-dim);margin-bottom:2rem}
.pairing-toggle{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-bottom:2.5rem;font-size:.9rem}
.switch{position:relative;width:46px;height:24px;flex-shrink:0}
.switch input{opacity:0;width:0;height:0}
.slider{position:absolute;inset:0;background:var(--line);border-radius:100px;cursor:pointer;transition:.3s}
.slider::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:var(--text);border-radius:50%;transition:.3s}
.switch input:checked + .slider{background:var(--gold)}
.switch input:checked + .slider::before{transform:translateX(22px);background:#0a0a0a}

.courses{text-align:left;border-top:1px solid var(--line)}
.course{display:flex;gap:1.5rem;padding:1.3rem 0;border-bottom:1px solid var(--line);align-items:baseline}
.course-num{font-family:var(--display);color:var(--gold);font-size:1.1rem;flex-shrink:0;width:28px}
.course h3{font-size:1.15rem;margin-bottom:.3rem}
.course p{color:var(--text-dim);font-size:.9rem}
.menu-total{margin-top:2rem;font-size:1.05rem}
.menu-total strong{color:var(--gold)}

.chef{max-width:1200px;margin:0 auto;padding:clamp(3rem,7vw,6rem) 1.5rem;display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center}
.chef img{border-radius:4px;filter:grayscale(.15)}
.chef-copy h2{font-size:clamp(1.8rem,4vw,2.6rem);margin:.4rem 0 1.2rem}
.chef-copy p{color:var(--text-dim);margin-bottom:1.4rem;max-width:46ch}
.quote{font-family:var(--display);font-style:normal;color:var(--gold);font-size:1.1rem;border-left:2px solid var(--gold);padding-left:1rem}

.reserve{max-width:640px;margin:0 auto;padding:clamp(3rem,7vw,6rem) 1.5rem;text-align:center}
.reserve p{color:var(--text-dim);margin-bottom:2rem}
.reserve form{text-align:left}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem}
.reserve input,.reserve select{background:var(--surface);border:1px solid var(--line);color:var(--text);padding:.85rem 1rem;border-radius:2px;width:100%;font-family:inherit}
.form-note{margin-top:1.2rem;text-align:center;color:var(--gold)}

.footer{text-align:center;padding:2.5rem;border-top:1px solid var(--line)}
.footer p:last-child{font-size:.8rem;color:var(--text-dim);margin-top:.5rem}

@media (max-width:900px){
  header nav{display:none}
  .menu-btn{display:block}
  .chef{grid-template-columns:1fr}
}
@media (max-width:560px){
  .form-row{grid-template-columns:1fr}
  .course{gap:1rem}
}