/* ============================================================
   Labombe by Trivet — shared styles
   Brand fonts in the Figma source are licensed and not bundled:
     Display/headings/nav  →  "FreightSans Pro" / "Craw Modern URW"
     Body/UI               →  "Work Sans"
   Substituted here with the closest free web faces:
     Display  →  Hanken Grotesk
     Body     →  Work Sans (as designed)
   Swap the @import + --font-* vars to drop the originals back in.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&family=Work+Sans:wght@300;400;500&display=swap');

:root{
  --black:#000000;
  --ink:#2c2a2f;          /* primary text on light */
  --ink-2:#26272d;
  --gold:#f0a724;
  --gold-soft:rgba(240,167,36,.99);
  --white:#ffffff;
  --paper:#ffffff;
  --chip:rgba(217,217,217,.27);
  --line:rgba(44,42,47,.22);
  --line-dark:rgba(255,255,255,.18);

  --font-display:"Hanken Grotesk", system-ui, sans-serif;
  --font-body:"Work Sans", system-ui, sans-serif;

  --track:0.15em;         /* wide tracking used across the brand */
  --track-tight:0.06em;
  --maxw:1280px;
  --pad:clamp(20px,5vw,72px);
  --header-h:84px;
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--paper);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{display:block;max-width:100%;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none;}
.container{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad);}

/* ---------- typography helpers ---------- */
.eyebrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--track);
  font-weight:500;
  font-size:clamp(12px,1.1vw,15px);
  color:var(--ink);
}
.h-display{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--track);
  font-weight:500;
  line-height:1.25;
  font-size:clamp(26px,3.3vw,34px);
  margin:0;
}
.h-section{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--track);
  font-weight:500;
  line-height:1.2;
  font-size:clamp(22px,2.4vw,30px);
  margin:0 0 1.4rem;
}
.lede{font-size:clamp(16px,1.2vw,18px);line-height:1.75;max-width:62ch;}
.muted{color:rgba(44,42,47,.7);}
p{text-wrap:pretty;}

/* arrow text links */
.link-arrow{
  font-family:var(--font-display);
  text-transform:uppercase;
  letter-spacing:var(--track);
  font-size:14px;
  font-weight:500;
  display:inline-flex;
  align-items:center;
  gap:.5em;
  padding-bottom:2px;
  background-image:linear-gradient(var(--gold),var(--gold));
  background-size:0 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size .35s ease,color .25s ease;
}
.link-arrow::after{content:"→";transition:transform .25s ease;}
.link-arrow:hover{background-size:100% 1.5px;}
.link-arrow:hover::after{transform:translateX(4px);}

/* solid white button */
.btn-solid{
  display:inline-block;
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:var(--track-tight);
  font-size:15px;font-weight:500;
  background:var(--white);color:var(--ink-2);
  padding:11px 26px;border-radius:3px;
  transition:transform .2s ease,box-shadow .25s ease;
}
.btn-solid:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(0,0,0,.18);}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  height:var(--header-h);
  display:flex;align-items:stretch;justify-content:space-between;
  pointer-events:none;
}
.site-header > *{pointer-events:auto;}
.reserve-tab{
  background:var(--gold);color:var(--ink-2);
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:var(--track-tight);
  font-size:14px;font-weight:500;
  display:flex;align-items:center;
  padding:0 clamp(18px,2.4vw,34px);
  min-width:clamp(150px,16vw,210px);
  transition:background .25s ease;
}
.reserve-tab:hover{background:#e29a18;}
.header-right{display:flex;align-items:center;gap:clamp(12px,2vw,26px);padding-inline:var(--pad);}
.brand-mini{height:46px;width:auto;filter:none;}
.menu-btn{
  width:52px;height:52px;border-radius:50%;
  background:var(--black);
  display:grid;place-items:center;gap:0;
  transition:transform .25s ease,background .25s ease;
}
.menu-btn:hover{transform:scale(1.06);background:#1a1a1a;}
.menu-btn span{display:block;width:20px;height:1.5px;background:var(--white);margin:2.5px 0;transition:.3s;}

/* solid variant for interior pages */
.site-header--solid{background:var(--black);}
.site-header--solid .menu-btn{background:rgba(255,255,255,.08);}
.site-header--solid .menu-btn:hover{background:rgba(255,255,255,.16);}

/* ============================================================
   NAV OVERLAY
   ============================================================ */
.nav-overlay{
  position:fixed;inset:0;z-index:90;
  background:var(--white);
  display:flex;flex-direction:column;
  padding:clamp(28px,5vw,60px);
  opacity:0;visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .4s ease,transform .4s ease,visibility .4s;
  overflow-y:auto;
}
.nav-overlay.is-open{opacity:1;visibility:visible;transform:none;}
.nav-overlay .reserve-tab{position:absolute;top:0;left:0;height:var(--header-h);}
.nav-close{
  position:absolute;top:clamp(20px,3vw,40px);right:clamp(20px,4vw,56px);
  width:46px;height:46px;display:grid;place-items:center;
}
.nav-close svg{width:30px;height:30px;}
.nav-close:hover{transform:rotate(90deg);}
.nav-close{transition:transform .3s ease;}
.nav-list{
  margin:auto;
  display:flex;flex-direction:column;align-items:flex-start;
  gap:clamp(8px,1.1vw,14px);
  list-style:none;padding:0;
  width:min(640px,100%);
}
.nav-list a, .nav-sub-label{
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:var(--track);
  font-weight:500;
  font-size:clamp(17px,1.5vw,21px);
  color:var(--ink);
  display:inline-block;
  transition:color .2s ease,padding-left .25s ease;
}
.nav-list a:hover{color:var(--gold);padding-left:8px;}
.nav-sub-label{color:var(--ink);}
.nav-menus{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 26px;}
.nav-menus .nav-sub-label{margin-right:6px;}
.nav-tag{font-family:var(--font-body);text-transform:none;letter-spacing:.02em;font-size:.62em;color:rgba(44,42,47,.45);}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  position:relative;min-height:100vh;
  display:grid;place-items:center;
  background:var(--black);
  overflow:hidden;
}
.hero__media{position:absolute;inset:0;}
.hero__media img{width:100%;height:100%;object-fit:cover;object-position:center 42%;}
.hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5),rgba(0,0,0,.15) 40%,rgba(0,0,0,.55));}
.hero__inner{position:relative;text-align:center;color:var(--white);padding:var(--pad);}
.hero__logo{width:clamp(280px,38vw,520px);margin:0 auto 1.6rem;}
.hero__tag{
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.32em;
  font-weight:300;font-size:clamp(12px,1.2vw,16px);
  color:rgba(255,255,255,.92);
}
.scroll-cue{
  position:absolute;left:50%;bottom:32px;transform:translateX(-50%);
  color:rgba(255,255,255,.8);
  font-family:var(--font-display);font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  display:flex;flex-direction:column;align-items:center;gap:8px;
}
.scroll-cue::after{content:"";width:1px;height:34px;background:rgba(255,255,255,.6);animation:cue 1.8s ease-in-out infinite;}
@keyframes cue{0%,100%{opacity:.3;transform:scaleY(.6);}50%{opacity:1;transform:scaleY(1);}}

/* page banner (interior) */
.page-banner{
  background:var(--black);color:var(--white);
  padding-top:calc(var(--header-h) + clamp(46px,8vw,96px));
  padding-bottom:clamp(46px,8vw,96px);
  text-align:center;
}
.page-banner .eyebrow{color:var(--gold);margin-bottom:14px;}
.page-banner h1{color:var(--white);}
.page-banner .lede{margin:18px auto 0;color:rgba(255,255,255,.78);text-align:center;}

/* ============================================================
   SECTIONS / LAYOUT BLOCKS
   ============================================================ */
.section{padding-block:clamp(56px,8vw,108px);}
.section--tight{padding-block:clamp(40px,5vw,64px);}

.intro{max-width:880px;margin:0 auto;text-align:center;}
.intro h2{color:#242a4b;margin-bottom:1.4rem;}
.intro p{color:var(--ink);margin:0 auto 1.8rem;max-width:64ch;}

.menus-row{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:14px;margin-top:8px;
}
.menus-row .eyebrow{margin-right:6px;}
.chip{
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:var(--track-tight);
  font-size:14px;font-weight:500;
  padding:7px 22px;border-radius:999px;
  background:var(--chip);border:1px solid var(--gold);
  color:var(--ink-2);
  transition:background .25s ease,color .25s ease;
}
.chip:hover{background:var(--gold);color:var(--ink-2);}

.rule{height:1px;background:var(--line);border:0;margin-block:clamp(40px,6vw,72px);}

/* 3-up cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3.5vw,56px);}
.card__media{aspect-ratio:4/5;overflow:hidden;margin-bottom:1.4rem;background:#1c1a18;}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform .8s ease;}
.card:hover .card__media img{transform:scale(1.04);}
.card h3{margin:0 0 .9rem;}
.card p{margin:0 0 1.4rem;color:rgba(44,42,47,.82);}
.card .card__links{display:flex;flex-direction:column;gap:10px;align-items:flex-start;}

/* editorial two-column (kitchen / cellar / bar) */
.editorial{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:clamp(32px,6vw,90px);align-items:start;}
.editorial__quote{
  font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.08em;line-height:1.6;
  font-size:clamp(14px,1.1vw,16px);font-weight:400;color:var(--ink);
}
.editorial__quote cite{display:block;margin-top:1.2rem;font-style:normal;color:rgba(44,42,47,.6);letter-spacing:.14em;font-size:.85em;}
.editorial__body p{margin:0 0 1.2rem;color:rgba(44,42,47,.85);}
.editorial__body .card__links{display:flex;flex-direction:column;gap:10px;align-items:flex-start;margin-top:1.6rem;}
.section-head{margin-bottom:clamp(28px,3vw,44px);}

/* feature image + text */
.feature{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(32px,6vw,80px);align-items:center;}
.feature--flip .feature__media{order:2;}
.feature__media{aspect-ratio:4/5;overflow:hidden;background:#1c1a18;}
.feature__media img{width:100%;height:100%;object-fit:cover;}
.feature__body h2{margin-bottom:1.3rem;}
.feature__body p{color:rgba(44,42,47,.85);margin:0 0 1.2rem;}

/* FAQ */
.faq{max-width:820px;margin:0 auto;}
.faq details{border-bottom:1px solid var(--line);padding:6px 0;}
.faq summary{
  list-style:none;cursor:pointer;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.08em;
  font-weight:500;font-size:clamp(15px,1.3vw,18px);
  padding:18px 40px 18px 0;position:relative;
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:24px;color:var(--gold);transition:transform .3s ease;}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg);}
.faq details p{margin:0 0 18px;color:rgba(44,42,47,.82);max-width:70ch;}

/* contact grid */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);}
.info-block{margin-bottom:2.2rem;}
.info-block h3{margin:0 0 .8rem;}
.info-block p{margin:0;color:rgba(44,42,47,.85);}
.map-embed{aspect-ratio:4/3;background:repeating-linear-gradient(45deg,#ece9e4,#ece9e4 12px,#e4e0d9 12px,#e4e0d9 24px);display:grid;place-items:center;color:rgba(44,42,47,.5);font-family:var(--font-body);font-size:13px;letter-spacing:.1em;text-transform:uppercase;}

/* forms */
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:22px;}
.field label{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:rgba(44,42,47,.7);}
.field input,.field textarea,.field select{
  font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:transparent;border:0;border-bottom:1px solid var(--line);
  padding:10px 2px;width:100%;
}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--gold);}

/* image placeholder tile */
.ph{
  background:
    repeating-linear-gradient(45deg,rgba(0,0,0,.04),rgba(0,0,0,.04) 10px,rgba(0,0,0,.07) 10px,rgba(0,0,0,.07) 20px),
    #d8d3cb;
  display:grid;place-items:center;color:rgba(44,42,47,.55);
  font-family:monospace;font-size:12px;letter-spacing:.04em;text-align:center;padding:10px;
}

/* ============================================================
   GOLD BAND  (instagram + newsletter)
   ============================================================ */
.band-gold{background:var(--gold);color:var(--ink);}
.band-gold .container{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,6vw,80px);
  padding-block:clamp(48px,6vw,80px);
}
.ig-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:1.6rem;}
.ig-head .handle{font-family:var(--font-display);letter-spacing:var(--track);font-size:14px;}
.ig-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;}
.ig-grid .tile{aspect-ratio:1;overflow:hidden;background:rgba(255,255,255,.25);}
.ig-grid .tile img{width:100%;height:100%;object-fit:cover;}
.ig-grid .tile.ph{font-size:10px;color:rgba(44,42,47,.6);}
.news h2{margin-bottom:1rem;}
.news p{max-width:46ch;margin:0 0 1.6rem;color:var(--ink);}
.news form{display:flex;flex-direction:column;gap:0;max-width:420px;}
.news input{
  background:transparent;border:0;border-bottom:1px solid var(--ink);
  padding:8px 2px;color:var(--ink);font-size:16px;font-family:var(--font-body);
}
.news input::placeholder{color:rgba(255,255,255,.95);}
.news input:focus{outline:none;border-color:var(--white);}
.news .btn-solid{margin-top:24px;align-self:flex-start;}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:var(--black);color:var(--white);}
.site-footer .container{
  display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:clamp(32px,5vw,64px);
  padding-block:clamp(48px,6vw,80px);
}
.footer-logo{width:150px;margin-bottom:2rem;}
.site-footer h4{
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:var(--track);
  font-weight:500;font-size:14px;color:var(--white);margin:0 0 1rem;
}
.footer-block{margin-bottom:1.8rem;}
.site-footer p,.site-footer li{font-size:14px;line-height:1.7;color:rgba(255,255,255,.72);margin:0;}
.hours{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;font-size:13.5px;color:rgba(255,255,255,.72);}
.hours .day{white-space:nowrap;}
.footer-links{list-style:none;padding:0;margin:0;}
.footer-links a{color:rgba(255,255,255,.72);transition:color .2s ease;display:inline-block;padding:2px 0;}
.footer-links a:hover{color:var(--gold);}
.socials{display:flex;gap:16px;margin-top:18px;}
.socials a{width:34px;height:34px;color:var(--gold);transition:transform .2s ease,opacity .2s ease;}
.socials a:hover{transform:translateY(-2px);}
.socials svg{width:100%;height:100%;fill:currentColor;}
.site-footer .link-arrow{color:rgba(255,255,255,.85);}
.site-footer .link-arrow:hover{color:var(--gold);}
.footer-bottom{border-top:1px solid var(--line-dark);}
.footer-bottom .container{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-block:22px;font-size:12.5px;color:rgba(255,255,255,.5);}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:980px){
  .cards{grid-template-columns:1fr;max-width:520px;margin-inline:auto;}
  .editorial{grid-template-columns:1fr;gap:24px;}
  .editorial__quote{font-size:15px;}
  .feature,.feature--flip{grid-template-columns:1fr;}
  .feature--flip .feature__media{order:0;}
  .feature__media{aspect-ratio:16/10;max-width:560px;}
  .band-gold .container{grid-template-columns:1fr;}
  .contact-grid{grid-template-columns:1fr;}
  .site-footer .container{grid-template-columns:1fr 1fr;}
}
@media (max-width:640px){
  :root{--header-h:72px;}
  .reserve-tab{min-width:auto;font-size:12px;letter-spacing:.04em;padding:0 16px;}
  .header-right{gap:12px;}
  .brand-mini{height:38px;}
  .menu-btn{width:46px;height:46px;}
  .ig-grid{grid-template-columns:repeat(3,1fr);}
  .site-footer .container{grid-template-columns:1fr;}
  .hero__media img{object-position:center 38%;}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;scroll-behavior:auto!important;}
}

/* ============================================================
   POST BODY  (blog article typography)
   ============================================================ */
.post-body {
  max-width: 72ch;
  margin: 0 auto;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.75;
}
.post-body h2 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-weight: 500;
  font-size: clamp(22px,2.4vw,30px);
  margin: 2.4rem 0 1rem;
}
.post-body h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-weight: 500;
  font-size: clamp(16px,1.3vw,19px);
  margin: 1.8rem 0 .8rem;
}
.post-body p { margin: 0 0 1.4rem; }
.post-body ul, .post-body ol {
  margin: 0 0 1.4rem;
  padding-left: 1.8rem;
}
.post-body li { margin-bottom: .4rem; }
.post-body strong { font-weight: 500; }
.post-body a {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--track);
  font-size: .9em;
  background-image: linear-gradient(var(--gold),var(--gold));
  background-size: 100% 1.5px;
  background-repeat: no-repeat;
  background-position: 0 100%;
}
.post-body blockquote {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: .08em;
  line-height: 1.6;
  font-size: clamp(14px,1.1vw,16px);
  font-weight: 400;
  border-left: 3px solid var(--gold);
  padding-left: clamp(20px,3vw,40px);
  margin: 2rem 0;
  color: var(--ink);
}
.post-body blockquote cite {
  display: block;
  margin-top: 1rem;
  font-style: normal;
  color: rgba(44,42,47,.6);
  letter-spacing: .14em;
  font-size: .85em;
}
.post-body img {
  width: 100%;
  height: auto;
  display: block;
  margin: 2rem 0;
}
.post-body hr {
  height: 1px;
  background: var(--line);
  border: 0;
  margin: 2.4rem 0;
}

/* form error feedback (contact / reservation / newsletter) */
.form-error{color:#e05252;margin:.5rem 0 0;font-size:14px;}