/* =========================================================
   Le Sanglier — 2026 redesign concept
   Dependent Media
   ========================================================= */

:root{
  --ink:        #0d0b09;
  --ink-2:      #141110;
  --ink-3:      #1d1917;
  --paper:      #f5f0e7;
  --paper-2:    #e9e1d3;
  --cream:      #efe8dc;
  --gold:       #b1893f;
  --gold-lt:    #d8bd83;
  --gold-dim:   rgba(216,189,131,.30);
  --muted:      rgba(239,232,220,.88);
  --muted-ink:  rgba(20,17,16,.80);

  --display: "Cormorant Garamond", "Hoefler Text", Garamond, "Times New Roman", serif;
  --sans: "Jost", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  --gut: clamp(1.25rem, 5vw, 4rem);
  --maxw: 1200px;
  --measure: 62ch;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}

body{
  margin:0;
  background:var(--ink);
  color:var(--cream);
  font-family:var(--sans);
  font-weight:400;
  font-size:clamp(1.02rem, .97rem + .24vw, 1.11rem);
  line-height:1.72;
  letter-spacing:.005em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gut); }
.wrap--narrow{ max-width:860px; }

/* ---------- type ---------- */
h1,h2,h3,h4{
  font-family:var(--display);
  text-wrap:balance;
  font-weight:300;
  line-height:1.08;
  margin:0;
  letter-spacing:.005em;
}
.h-xl{ font-size:clamp(2.4rem, 1.05rem + 5.4vw, 6.5rem); }
@media (max-width:480px){
  .hero h1{ letter-spacing:.11em; }
}
.h-lg{ font-size:clamp(2.2rem, 1.35rem + 3.5vw, 4rem); }
.h-md{ font-size:clamp(1.65rem, 1.2rem + 1.9vw, 2.6rem); }

.eyebrow{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:400;
  letter-spacing:.30em;
  text-transform:uppercase;
  color:var(--gold-lt);
  margin:0 0 1.25rem;
}
.eyebrow--ink{ color:var(--gold); }

.lede{
  font-family:var(--display);
  font-size:clamp(1.3rem, 1.05rem + 1.1vw, 1.75rem);
  line-height:1.5;
  font-style:italic;
  color:rgba(239,232,220,.92);
  font-weight:400;
  max-width:44ch;
}

p{ max-width:var(--measure); }
.center p, .center .lede{ margin-inline:auto; }
.center{ text-align:center; }

/* ---------- ornament ---------- */
.orn{
  display:flex; align-items:center; justify-content:center; gap:.9rem;
  margin:1.6rem 0;
}
.orn::before,.orn::after{
  content:""; height:1px; width:min(90px,14vw);
  background:linear-gradient(90deg,transparent,var(--gold-dim),transparent);
}
.orn i{
  width:5px; height:5px; rotate:45deg;
  border:1px solid var(--gold); display:block;
}
.orn--start{ justify-content:flex-start; }
.orn--start::before{ display:none; }
.orn--start::after{ width:min(140px,26vw); background:linear-gradient(90deg,var(--gold-dim),transparent); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  font-family:var(--sans); font-size:.76rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.2rem; border:1px solid var(--gold);
  color:var(--gold-lt); background:transparent;
  transition:background .45s ease, color .45s ease, border-color .45s ease;
}
.btn:hover,.btn:focus-visible{ background:var(--gold); color:#14100a; border-color:var(--gold); }
.btn--solid{ background:var(--gold); color:#14100a; }
.btn--solid:hover,.btn--solid:focus-visible{ background:transparent; color:var(--gold-lt); }
.btn--ink{ border-color:rgba(20,17,16,.35); color:#1a1614; }
.btn--ink:hover,.btn--ink:focus-visible{ background:#1a1614; color:var(--paper); border-color:#1a1614; }

.btn-row{ display:flex; flex-wrap:wrap; gap:1rem; }
.center .btn-row{ justify-content:center; }

:focus-visible{ outline:2px solid var(--gold-lt); outline-offset:3px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--gold); color:#14100a; padding:.9rem 1.4rem;
  font-size:.78rem; letter-spacing:.18em; text-transform:uppercase;
}
.skip:focus{ left:1rem; top:1rem; }

/* =========================================================
   header
   ========================================================= */
.site-head{
  position:fixed; inset:0 0 auto 0; z-index:200;
  padding-block:clamp(.9rem,2.2vw,1.5rem);
  transition:background .4s ease, padding .4s ease, border-color .4s ease;
  border-bottom:1px solid transparent;
}
.site-head--solid,
.site-head.is-stuck{
  background:rgba(13,11,9,.94);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:rgba(216,189,131,.16);
  padding-block:.7rem;
}
.head-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; }

.mark{ text-decoration:none; display:block; line-height:1; }
.mark b{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(1.35rem,1.1rem + .9vw,1.85rem);
  letter-spacing:.20em; text-transform:uppercase; color:var(--paper);
}
.mark span{
  display:block; margin-top:.42rem;
  font-size:.56rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold-lt);
}

.nav{ display:flex; align-items:center; gap:clamp(1.1rem,2.4vw,2.2rem); }
.nav a{
  text-decoration:none; font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(245,240,231,.80);
  padding-block:.35rem; position:relative; transition:color .3s ease;
}
.nav a::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:1px;
  background:var(--gold); transform:scaleX(0); transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.7,.3,1);
}
.nav a:hover,.nav a:focus-visible,.nav a[aria-current="page"]{ color:var(--paper); }
.nav a:hover::after,.nav a:focus-visible::after,.nav a[aria-current="page"]::after{ transform:scaleX(1); }
.nav .btn{ padding:.8rem 1.5rem; font-size:.68rem; }
.nav .btn::after{ display:none; }

.nav-toggle{
  display:none; background:none; border:0; cursor:pointer; padding:.5rem;
  color:var(--paper);
}
.nav-toggle svg{ width:26px; height:18px; overflow:visible; }
.nav-toggle svg path{
  stroke:currentColor; stroke-width:1.2;
  transform-origin:13px 9px;
  transition:transform .35s cubic-bezier(.2,.7,.3,1), opacity .2s ease;
}
.nav-toggle[aria-expanded="true"] .l1{ transform:rotate(45deg) translateY(8px); }
.nav-toggle[aria-expanded="true"] .l2{ opacity:0; }
.nav-toggle[aria-expanded="true"] .l3{ transform:rotate(-45deg) translateY(-8px); }

@media (max-width: 900px){
  .nav-toggle{ display:block; }
  /* backdrop-filter makes an element the containing block for its
     position:fixed descendants — which would size the nav overlay to the
     header (67px) instead of the viewport. Drop the blur here; the header
     background is 94% opaque anyway. */
  .site-head,
  .site-head--solid,
  .site-head.is-stuck{ backdrop-filter:none; -webkit-backdrop-filter:none; }
  /* the wordmark and the toggle stay above the full-screen overlay so the
     menu can still be closed */
  .mark{ position:relative; z-index:2; }
  .nav-toggle{ position:relative; z-index:2; }
  .nav{
    position:fixed; inset:0; z-index:1; background:rgba(10,8,7,.985);
    flex-direction:column; justify-content:center; gap:2rem;
    transform:translateY(-100%); transition:transform .5s cubic-bezier(.2,.7,.3,1);
    overscroll-behavior:contain;
  }
  .nav a{ font-size:.95rem; letter-spacing:.26em; padding-block:.7rem; min-height:44px; display:flex; align-items:center; }
  .nav .btn{ padding:1.05rem 2.2rem; font-size:.76rem; min-height:48px; }
  .nav-toggle{ min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center; }
  .nav.is-open{ transform:translateY(0); }
  body.nav-open{ overflow:hidden; }
}

/* =========================================================
   hero
   ========================================================= */
.hero{
  position:relative; min-height:100svh; overflow:hidden; isolation:isolate;
  text-align:center;
  /* Row 1 holds the centred content, row 2 the address line. Row 1 is 1fr,
     whose implicit minimum is auto — so when the content is taller than the
     screen (a phone in portrait, where the name wraps to two lines) the row
     GROWS and the hero grows with it. The previous place-items:center +
     absolutely-positioned meta let tall content overflow in both directions:
     upward under the fixed header, and downward into the address line. */
  display:grid;
  grid-template-rows:1fr auto;
  align-items:center;
}
.hero__media{ position:absolute; inset:0; z-index:-2; }
.hero__media img{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(105% 80% at 50% 50%, rgba(9,7,6,.52) 0%, rgba(9,7,6,.78) 48%, rgba(9,7,6,.96) 100%),
    linear-gradient(180deg, rgba(9,7,6,.88) 0%, rgba(9,7,6,.30) 26%, rgba(9,7,6,.42) 64%, rgba(9,7,6,.97) 100%);
}
/* top padding clears the fixed header so the name is never tucked behind it */
.hero__inner{
  padding-block:clamp(6.5rem,13vh,9rem) clamp(2rem,5vh,4rem);
  position:relative; z-index:1; align-self:center;
}
.hero__inner::before{
  content:""; position:absolute; z-index:-1; inset:4% -10%;
  background:radial-gradient(58% 52% at 50% 52%, rgba(7,5,4,.70) 0%, rgba(7,5,4,.42) 55%, transparent 78%);
  pointer-events:none;
}
.hero h1{
  text-transform:uppercase; letter-spacing:.16em;
  text-shadow:0 2px 40px rgba(0,0,0,.6);
}
.hero .lede{ margin-top:1.4rem; color:rgba(245,240,231,.92); text-shadow:0 1px 24px rgba(0,0,0,.75); }
.hero .eyebrow{ text-shadow:0 1px 18px rgba(0,0,0,.8); }
.hero .btn-row{ margin-top:2.6rem; }

.hero__meta{
  position:static; z-index:1; margin:0; width:100%;
  padding:0 var(--gut) clamp(1.4rem,3vw,2.4rem);
  display:flex; flex-wrap:wrap; gap:.6rem 2.4rem;
  align-items:center; justify-content:center;
  font-size:.68rem; letter-spacing:.24em; text-transform:uppercase;
  color:rgba(239,232,220,.66);
}
.hero__meta a{ text-decoration:none; }
.hero__meta a:hover{ color:var(--gold-lt); }
.hero__meta i{ display:inline-block; width:4px; height:4px; rotate:45deg; background:var(--gold); margin-right:.9rem; vertical-align:middle; }

/* =========================================================
   sections
   ========================================================= */
section{ position:relative; }
.pad{ padding-block:clamp(4.5rem, 9vw, 9rem); }
.pad-sm{ padding-block:clamp(3rem, 6vw, 5.5rem); }
.bg-2{ background:var(--ink-2); }
.hair{ border-top:1px solid rgba(216,189,131,.12); }

/* split */
.split{
  display:grid; gap:clamp(2.5rem,6vw,5rem);
  grid-template-columns:1fr; align-items:center;
}
@media (min-width: 900px){
  .split{ grid-template-columns:1fr 1fr; }
  .split--wide-r{ grid-template-columns:0.92fr 1.08fr; }
}
.split h2{ text-wrap:balance; font-size:clamp(2rem,1.3rem + 2.3vw,3.1rem); }
.split p{ color:rgba(239,232,220,.92); }
.split__media{ position:relative; }
.split__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; }
.split__media--land img{ aspect-ratio:4/3; }
.split__media::after{
  content:""; position:absolute; inset:0;
  border:1px solid rgba(216,189,131,.22); transform:translate(14px,14px);
  pointer-events:none;
}
@media (max-width:640px){ .split__media::after{ transform:translate(8px,8px); } }

.stat-row{
  display:flex; flex-wrap:wrap; gap:2.5rem; margin-top:2.6rem;
  padding-top:2rem; border-top:1px solid rgba(216,189,131,.16);
}
.stat b{
  display:block; font-family:var(--display); font-size:2.5rem;
  font-weight:300; color:var(--gold-lt); line-height:1;
}
.stat span{
  display:block; margin-top:.5rem; font-size:.66rem;
  letter-spacing:.24em; text-transform:uppercase; color:var(--muted);
}

/* signature dishes */
.dishes{
  display:grid; gap:clamp(1.5rem,3vw,2.5rem);
  grid-template-columns:1fr;
  margin-top:3.5rem;
}
@media (min-width:560px){ .dishes{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .dishes{ grid-template-columns:repeat(4,1fr); } }
.dish{ text-decoration:none; display:block; }
.dish__img{ overflow:hidden; position:relative; }
.dish__img img{
  aspect-ratio:4/5; width:100%; object-fit:cover;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1), filter .8s ease;
  filter:saturate(.94);
}
.dish:hover .dish__img img,.dish:focus-visible .dish__img img{ transform:scale(1.05); filter:saturate(1.05); }
.dish__body{
  display:flex; align-items:baseline; gap:1rem; justify-content:space-between;
  margin-top:1.2rem; padding-bottom:.9rem;
  border-bottom:1px solid rgba(216,189,131,.18);
}
.dish__name{ font-family:var(--display); font-size:1.4rem; line-height:1.2; }
.dish__price{ font-size:.95rem; color:var(--gold-lt); white-space:nowrap; }
.dish__note{ margin:.85rem 0 0; font-size:.92rem; line-height:1.6; color:rgba(239,232,220,.86); max-width:none; }

/* quote */
.quote{ text-align:center; }
.quote blockquote{
  margin:0; font-family:var(--display); font-style:italic; font-weight:300;
  font-size:clamp(1.5rem,1.1rem + 2vw,2.75rem); line-height:1.34;
  max-width:22ch; margin-inline:auto; color:var(--paper);
}
.quote figcaption{
  margin-top:1.8rem; font-size:.7rem; letter-spacing:.26em;
  text-transform:uppercase; color:rgba(239,232,220,.78);
}
.stars{ color:var(--gold); letter-spacing:.34em; font-size:.72rem; margin-bottom:1.6rem; }

/* visit / hours */
.visit-grid{
  display:grid; gap:clamp(2rem,5vw,4rem);
  grid-template-columns:1fr;
}
@media (min-width:820px){ .visit-grid{ grid-template-columns:1fr 1fr; } }

.hours{ width:100%; border-collapse:collapse; margin-top:1.5rem; }
.hours th{
  text-align:left; font-weight:400; font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-lt);
  padding-bottom:.9rem; border-bottom:1px solid rgba(216,189,131,.22);
}
.hours td{
  padding:.85rem 0; border-bottom:1px solid rgba(216,189,131,.09);
  font-size:.95rem;
}
.hours td:last-child{ text-align:right; color:var(--muted); }
.hours tr.is-closed td{ color:rgba(239,232,220,.50); }

.info dt{
  font-size:.66rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--gold-lt); margin-top:1.9rem;
}
.info dt:first-child{ margin-top:0; }
.info dd{
  margin:.6rem 0 0; font-family:var(--display); font-size:1.3rem; line-height:1.45;
}
.info dd a{ text-decoration:none; border-bottom:1px solid var(--gold-dim); }
.info dd a:hover{ border-bottom-color:var(--gold); }

/* footer */
.site-foot{
  background:#090807; border-top:1px solid rgba(216,189,131,.14);
  padding-block:clamp(3rem,6vw,4.5rem) 2rem;
}
.foot-grid{
  display:grid; gap:2.5rem; grid-template-columns:1fr;
  align-items:start;
}
@media (min-width:760px){ .foot-grid{ grid-template-columns:1.2fr 1fr 1fr; } }
.foot-grid h4{
  font-family:var(--sans); font-size:.66rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--gold-lt); margin-bottom:1.1rem;
}
.foot-list{ list-style:none; margin:0; padding:0; font-size:.92rem; }
.foot-list li{ margin-bottom:.65rem; }
.foot-list a{ text-decoration:none; color:rgba(239,232,220,.88); }
.foot-list a:hover{ color:var(--gold-lt); }
.colophon__mark{
  display:block; height:40px; width:auto;
  opacity:.95; flex:0 0 auto;
}
@media (max-width:760px){ .colophon__mark{ height:34px; } }

.colophon{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(216,189,131,.10);
  display:flex; flex-wrap:wrap; gap:1rem 2rem; justify-content:space-between;
  font-size:.72rem; letter-spacing:.1em; color:rgba(239,232,220,.58);
  align-items:center;
}

/* =========================================================
   menu page — the "card"
   ========================================================= */
.page-head{
  padding-block:clamp(9rem,16vw,13rem) clamp(2rem,5vw,3.5rem);
  text-align:center;
}
.paper{ background:var(--paper); color:#191512; }
.paper .eyebrow{ color:var(--gold); }
.paper .lede{ color:rgba(25,21,18,.68); }
.paper h1,.paper h2,.paper h3{ color:#141110; }
.paper{ --gold:#8a6829; }
.items .pr{ font-weight:400; }
.items .dots{ background-image:radial-gradient(circle, rgba(25,21,18,.42) 1px, transparent 1px); }
.items .nm em{ color:rgba(25,21,18,.78); }
.paper .orn::before,.paper .orn::after{ background:linear-gradient(90deg,transparent,rgba(177,137,63,.42),transparent); }

.card{
  background:var(--paper);
  padding:clamp(2rem,5vw,4.5rem) clamp(1.5rem,5vw,4.5rem);
  border:1px solid rgba(177,137,63,.35);
  position:relative;
}
.card::before{
  content:""; position:absolute; inset:9px;
  border:1px solid rgba(177,137,63,.22); pointer-events:none;
}

.menu-cols{ display:grid; gap:clamp(2.5rem,5vw,4.5rem); grid-template-columns:1fr; }
@media (min-width:880px){ .menu-cols--2{ grid-template-columns:1fr 1fr; } }

.course{ margin-bottom:clamp(2.5rem,5vw,3.75rem); break-inside:avoid; }
.course:last-child{ margin-bottom:0; }
.course > h3{
  font-size:clamp(1.5rem,1.2rem + 1vw,2rem);
  text-align:center; margin-bottom:.4rem;
}
.course__note{
  text-align:center; font-size:.74rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-ink); margin:0 auto 1.9rem;
}
.course > h3 + .items{ margin-top:1.9rem; }

.items{ list-style:none; margin:0; padding:0; }
.items li{
  display:flex; align-items:baseline; gap:.75rem;
  padding:.7rem 0;
}
.items li + li{ border-top:1px solid rgba(25,21,18,.08); }
.items .nm{ font-family:var(--display); font-size:1.22rem; line-height:1.3; }
.items .nm em{ display:block; font-size:.82rem; font-family:var(--sans); font-style:normal; color:var(--muted-ink); letter-spacing:.02em; margin-top:.15rem; }
.items .dots{
  flex:1 1 auto; height:1px; min-width:1.5rem;
  background-image:radial-gradient(circle, rgba(25,21,18,.30) 1px, transparent 1px);
  background-size:6px 1px; background-repeat:repeat-x;
  transform:translateY(-.28em);
}
.items .pr{ font-family:var(--display); font-size:1.15rem; color:var(--gold); white-space:nowrap; }

.legal{
  margin-top:3rem; padding-top:1.6rem; border-top:1px solid rgba(25,21,18,.12);
  font-size:.78rem; line-height:1.7; color:var(--muted-ink); max-width:none;
  text-align:center;
}

/* wine list */
.wine-region{ margin-bottom:2.4rem; }
.wine-region h4{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.26em;
  text-transform:uppercase; color:var(--gold); margin:0 0 1rem;
  padding-bottom:.55rem; border-bottom:1px solid rgba(177,137,63,.30);
  display:flex; justify-content:space-between; align-items:baseline;
}
.wine-region h4 span{ letter-spacing:.16em; color:var(--muted-ink); }

/* tabs */
.tabs{
  display:flex; justify-content:center; flex-wrap:wrap; gap:.5rem;
  margin-bottom:clamp(2rem,4vw,3rem);
}
.tabs button{
  font-family:var(--sans); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; padding:.85rem 1.7rem; cursor:pointer;
  background:transparent; border:1px solid rgba(177,137,63,.35); color:#4a3f30;
  transition:background .35s ease,color .35s ease,border-color .35s ease;
}
.tabs button:hover{ border-color:var(--gold); color:#191512; }
.tabs button[aria-selected="true"]{ background:#191512; border-color:#191512; color:var(--paper); }

[hidden]{ display:none !important; }
.nowrap{ white-space:nowrap; }

/* reveal */
.rise{ opacity:0; transform:translateY(26px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.3,1); }
.rise.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){ .rise{ opacity:1; transform:none; } }

/* =========================================================
   gallery trigger on the room photo
   ========================================================= */
button.split__media{
  -webkit-appearance:none; appearance:none;
  padding:0; border:0; background:none; font:inherit; color:inherit;
  display:block; width:100%; cursor:pointer; text-align:left;
}
.split__media--gallery img{ transition:transform 1.2s cubic-bezier(.2,.7,.3,1), filter .6s ease; }
.split__media--gallery:hover img,
.split__media--gallery:focus-visible img{ transform:scale(1.03); filter:brightness(.82); }

.media-hint{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;
  padding:2.6rem 1.4rem 1.25rem;
  font-size:.7rem; letter-spacing:.24em; text-transform:uppercase;
  color:var(--paper);
  background:linear-gradient(180deg, transparent, rgba(8,6,5,.86));
  opacity:.92; transition:opacity .4s ease;
}
.split__media--gallery:hover .media-hint,
.split__media--gallery:focus-visible .media-hint{ opacity:1; }
.media-hint__icon{ display:block; width:20px; height:20px; color:var(--gold-lt); }
.media-hint__icon svg{ width:100%; height:100%; }
.media-hint em{ font-style:normal; color:var(--gold-lt); letter-spacing:.2em; }

/* =========================================================
   awards band
   ========================================================= */
.awards{
  -webkit-appearance:none; appearance:none; font:inherit; color:inherit; cursor:pointer;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2rem);
  width:100%; margin-top:clamp(2.5rem,5vw,3.5rem); padding:1.35rem clamp(1.35rem,3vw,2rem);
  text-align:left;
  background:rgba(216,189,131,.04);
  border:1px solid rgba(216,189,131,.22);
  transition:border-color .4s ease, background .4s ease;
}
.awards:hover,.awards:focus-visible{
  border-color:rgba(216,189,131,.5); background:rgba(216,189,131,.08);
}
.awards__marks{ display:flex; flex:0 0 auto; }
.awards__marks img{
  width:52px; height:52px; object-fit:contain; border-radius:50%;
  background:#14100c; padding:3px;
  /* the badges are three different reds — unify them to brass on the page */
  filter:grayscale(1) sepia(1) saturate(2.1) hue-rotate(-14deg) brightness(.92);
}
.awards__marks img + img{ margin-left:-10px; }
.awards__text{ flex:1 1 auto; min-width:0; }
.awards__text b{
  display:block; font-family:var(--display); font-weight:300;
  font-size:clamp(1.3rem,1.15rem + .5vw,1.6rem); line-height:1.25; color:var(--paper);
}
.awards__text em{
  display:block; margin-top:.35rem; font-style:normal;
  font-size:.8rem; letter-spacing:.08em; color:var(--muted); text-wrap:balance;
}
.awards__more{
  flex:0 0 auto; font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--gold-lt); border-bottom:1px solid var(--gold-dim); padding-bottom:.2rem;
}
@media (max-width:520px){
  .awards{ flex-wrap:wrap; }
  .awards__more{ width:100%; }
}

/* =========================================================
   overlays — photo lightbox + awards modal
   ========================================================= */
.ov{
  position:fixed; inset:0; z-index:300;
  background:rgba(6,5,4,.96);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  display:flex; flex-direction:column;
  opacity:0; visibility:hidden; transition:opacity .35s ease, visibility .35s;
}
.ov.is-open{ opacity:1; visibility:visible; }
body.ov-open{ overflow:hidden; }

.ov__bar{
  flex:0 0 auto; display:flex; align-items:center; justify-content:space-between;
  gap:1rem; padding:clamp(.9rem,2vw,1.4rem) clamp(1rem,4vw,2.5rem);
  border-bottom:1px solid rgba(216,189,131,.14);
}
.ov__title{
  font-size:.68rem; letter-spacing:.26em; text-transform:uppercase; color:var(--gold-lt);
}
.ov__count{ font-size:.68rem; letter-spacing:.2em; color:var(--muted); }
.ov__close{
  -webkit-appearance:none; appearance:none; background:none; cursor:pointer;
  border:1px solid rgba(216,189,131,.3); color:var(--paper);
  width:44px; height:44px; display:grid; place-items:center;
  transition:background .3s ease, border-color .3s ease;
}
.ov__close:hover,.ov__close:focus-visible{ background:var(--gold); color:#14100a; border-color:var(--gold); }
.ov__close svg{ width:16px; height:16px; }

.ov__body{ flex:1 1 auto; position:relative; min-height:0; overflow:hidden; padding:clamp(1rem,3vw,2rem); }

/* content overlays scroll and centre their panel; margin:auto keeps the top
   reachable when the panel is taller than the viewport */
.ov--panel .ov__body{ overflow-y:auto; display:flex; }
.ov__panel{ margin:auto; width:100%; max-width:1040px; }

/* photo stage — absolutely positioned so the image's max-height has something
   definite to resolve against (a percentage against an auto height is ignored) */
.ov__stage{
  position:absolute; inset:clamp(1rem,3vw,2rem);
  display:grid; place-items:center;
}
.ov__stage img{
  max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  opacity:0; transition:opacity .35s ease;
}
.ov__stage img.is-shown{ opacity:1; }
.ov__cap{
  flex:0 0 auto; text-align:center; padding:0 clamp(1rem,4vw,2.5rem) clamp(1.2rem,3vw,2rem);
  /* the global p{max-width:62ch} would otherwise pin this to the left */
  max-width:min(70ch,100%); margin-inline:auto;
  font-family:var(--display); font-style:italic; font-size:clamp(1rem,.9rem + .5vw,1.25rem);
  color:rgba(239,232,220,.82);
}
.ov__nav{
  -webkit-appearance:none; appearance:none; cursor:pointer;
  position:absolute; top:50%; transform:translateY(-50%);
  width:clamp(44px,7vw,64px); height:clamp(44px,7vw,64px);
  display:grid; place-items:center;
  background:rgba(10,8,7,.55); border:1px solid rgba(216,189,131,.26); color:var(--paper);
  transition:background .3s ease, border-color .3s ease;
}
.ov__nav:hover,.ov__nav:focus-visible{ background:var(--gold); color:#14100a; border-color:var(--gold); }
.ov__nav--prev{ left:clamp(.4rem,2vw,1.5rem); }
.ov__nav--next{ right:clamp(.4rem,2vw,1.5rem); }
.ov__nav svg{ width:18px; height:18px; }

/* awards grid */
.ov__grid{
  display:grid; gap:clamp(1.4rem,3vw,2.2rem);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  width:100%; margin-inline:auto; padding:.5rem;
}
@media (min-width:900px){
  .ov__grid{ grid-template-columns:repeat(5,1fr); }
}
.ov__award{ text-align:center; }
.ov__award img{
  width:100%; aspect-ratio:1/1; object-fit:contain; background:#fff;
  border:1px solid rgba(216,189,131,.16); padding:6px;
}
.ov__award figcaption{
  margin-top:.8rem; line-height:1.45; color:var(--muted);
}
.ov__award .yr{
  display:block; font-family:var(--display); font-size:1.35rem;
  color:var(--gold-lt); letter-spacing:.04em;
}
.ov__award .lb{
  display:block; margin-top:.2rem;
  font-size:.58rem; letter-spacing:.16em; text-transform:uppercase;
  text-wrap:balance;
}
.ov__note{
  width:100%; margin:0 auto clamp(1.6rem,3.5vw,2.4rem);
  text-align:center; font-family:var(--display); font-style:italic;
  font-size:clamp(1.05rem,.95rem + .6vw,1.4rem); color:rgba(239,232,220,.8);
}

/* =========================================================
   WordPress + WooCommerce surfaces
   Stage 1: make Woo legible and on-brand. Template overrides
   and the certificate email are stage 2.
   ========================================================= */

/* generic prose pages (Contact, Privacy) */
.prose{ padding-block:0 1rem; }
.prose h2,.prose h3{ margin:2.5rem 0 1rem; }
.prose p,.prose li{ color:rgba(239,232,220,.92); }
.prose a{ color:var(--gold-lt); text-underline-offset:.2em; }
.prose ul,.prose ol{ padding-left:1.2rem; }
.prose li{ margin-bottom:.5rem; }
.prose img{ margin:2rem 0; }

/* wp_nav_menu renders the footer column as a real list */
.foot-list{ list-style:none; margin:0; padding:0; }
.foot-list li.menu-item{ margin-bottom:.65rem; }

/* ---------- the shop ---------- */
.woo-wrap{ padding-bottom:clamp(4rem,8vw,7rem); }

/* Woo pages use the cream ground so forms and tables are readable */
body.is-shop{ background:var(--paper); color:#191512; }
body.is-shop .site-foot{ background:#090807; color:var(--cream); }
body.is-shop .page-head .eyebrow{ color:var(--gold); }
body.is-shop h1,body.is-shop h2,body.is-shop h3{ color:#141110; }
body.is-shop .lede{ color:rgba(25,21,18,.68); }
body.is-shop{ --gold:#8a6829; }

.woo-wrap a{ color:#7a5c22; }
.woo-wrap a:hover{ color:#141110; }

/* Product grid. Woo's own stylesheet floats each li and gives it a percentage
   width for its 4-up catalogue; this site has one product, so that has to be
   unpicked before the grid can do anything. */
.woo-wrap ul.products{
  list-style:none; margin:0 auto; padding:0;
  display:grid; gap:clamp(1.5rem,4vw,3rem);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  max-width:900px;
}
.woo-wrap ul.products::before,
.woo-wrap ul.products::after{ content:none !important; display:none !important; }
.woo-wrap ul.products li.product{
  width:auto !important; float:none !important; clear:none !important;
  margin:0 !important; text-align:center;
}
/* a lone product should read as a card, not a stretched banner */
.woo-wrap ul.products li.product:only-child{
  max-width:420px; margin-inline:auto !important;
}
.woo-wrap ul.products li.product a{ text-decoration:none; display:block; }
.woo-wrap ul.products li.product img{
  width:100%; height:auto; margin:0 auto 1.4rem;
  border:1px solid rgba(25,21,18,.12);
}
.woo-wrap ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--display); font-size:1.6rem; font-weight:300;
  line-height:1.2; margin:0 0 .5rem; color:#141110;
}
.woo-wrap ul.products li.product .button{ margin-top:1.3rem; }
.woo-wrap .price{
  font-family:var(--display); font-size:1.3rem; color:var(--gold);
  display:block; margin-bottom:.2rem;
}
.woo-wrap .price .amount{ font-family:var(--display); }

/* single product */
.woo-wrap div.product{
  display:grid; gap:clamp(2rem,5vw,4rem); align-items:start;
  grid-template-columns:1fr;
}
@media (min-width:820px){
  .woo-wrap div.product{ grid-template-columns:1fr 1fr; }
}
.woo-wrap div.product .woocommerce-product-gallery{ width:auto !important; float:none !important; }
.woo-wrap div.product .summary{ margin:0 !important; width:auto !important; float:none !important; }
.woo-wrap div.product .product_title{
  font-family:var(--display); font-weight:300; font-size:clamp(2rem,1.4rem+1.8vw,2.8rem);
  margin:0 0 1rem;
}
.woo-wrap div.product form.cart{ margin:2rem 0 0; }
.woo-wrap .quantity input{ max-width:6rem; text-align:center; }

/* buttons: adopt the design's outline button everywhere Woo prints one */
.woo-wrap .button,
.woo-wrap button.button,
.woo-wrap input[type="submit"],
.woo-wrap a.button,
.woocommerce-message .button,
.woocommerce-info .button{
  display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-size:.76rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase; text-decoration:none;
  padding:1.05rem 2.2rem; border:1px solid #1a1614; border-radius:0;
  background:#1a1614; color:var(--paper); cursor:pointer;
  transition:background .35s ease,color .35s ease;
}
.woo-wrap .button:hover,
.woo-wrap button.button:hover,
.woo-wrap input[type="submit"]:hover,
.woo-wrap a.button:hover{ background:transparent; color:#1a1614; }
.woo-wrap .button.alt{ background:var(--gold); border-color:var(--gold); color:#14100a; }
.woo-wrap .button.alt:hover{ background:transparent; color:#141110; }

/* forms */
.woo-wrap input[type="text"],
.woo-wrap input[type="email"],
.woo-wrap input[type="tel"],
.woo-wrap input[type="password"],
.woo-wrap input[type="number"],
.woo-wrap textarea,
.woo-wrap select,
.woo-wrap .select2-container .select2-selection{
  width:100%; padding:.85rem 1rem; font-family:var(--sans); font-size:1rem;
  color:#191512; background:#fff; border:1px solid rgba(25,21,18,.22); border-radius:0;
}
.woo-wrap input:focus,.woo-wrap textarea:focus,.woo-wrap select:focus{
  outline:2px solid var(--gold); outline-offset:1px;
}
.woo-wrap label{
  display:block; font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(25,21,18,.7); margin-bottom:.5rem;
}
.woo-wrap .form-row{ margin-bottom:1.4rem; }

/* tables: cart, order review, my-account */
.woo-wrap table{ width:100%; border-collapse:collapse; margin-bottom:2rem; }
.woo-wrap table th{
  text-align:left; font-family:var(--sans); font-weight:400;
  font-size:.66rem; letter-spacing:.22em; text-transform:uppercase;
  color:rgba(25,21,18,.68); padding:.9rem 0; border-bottom:1px solid rgba(25,21,18,.25);
}
.woo-wrap table td{ padding:1rem 0; border-bottom:1px solid rgba(25,21,18,.1); }

/* notices */
.woocommerce-message,.woocommerce-info,.woocommerce-error{
  list-style:none; margin:0 0 2rem; padding:1.1rem 1.4rem;
  border-left:2px solid var(--gold); background:rgba(177,137,63,.10);
  font-size:.95rem;
}
.woocommerce-error{ border-left-color:#8c2f2f; background:rgba(140,47,47,.08); }

/* checkout two-up */
@media (min-width:900px){
  .woo-wrap form.checkout.woocommerce-checkout{
    display:grid; grid-template-columns:1.1fr .9fr; gap:clamp(2rem,5vw,4rem); align-items:start;
  }
  .woo-wrap form.checkout #customer_details{ grid-column:1; }
  .woo-wrap form.checkout #order_review,
  .woo-wrap form.checkout #order_review_heading{ grid-column:2; }
}

/* ---------- beating WooCommerce's own specificity ----------
   Woo ships rules like `.woocommerce #payment #place_order` and
   `.woocommerce form .form-row input.input-text`, which out-rank plain
   `.woo-wrap .button`. These mirror those chains rather than scattering
   !important around; the two that keep it are Woo's inline-ish button colours,
   which are set from a CSS custom property we cannot reach. */

body.is-shop .woo-wrap .form-row input.input-text,
body.is-shop .woo-wrap .form-row textarea,
body.is-shop .woo-wrap .form-row select,
body.is-shop .woo-wrap .select2-container .select2-selection--single{
  width:100%; padding:.85rem 1rem; height:auto;
  font-family:var(--sans); font-size:1rem; line-height:1.4;
  color:#191512; background:#fff;
  border:1px solid rgba(25,21,18,.28); border-radius:0; box-shadow:none;
}
body.is-shop .woo-wrap .form-row label{
  font-size:.68rem; letter-spacing:.2em; text-transform:uppercase;
  color:rgba(25,21,18,.72); font-weight:400;
}
body.is-shop .woo-wrap .form-row .required{ color:#8a2f2f; text-decoration:none; }

body.is-shop .woo-wrap #payment,
body.is-shop .woo-wrap .cart_totals,
body.is-shop .woo-wrap .woocommerce-checkout-review-order{
  background:rgba(25,21,18,.035); border:1px solid rgba(177,137,63,.28);
  padding:clamp(1.25rem,3vw,2rem); border-radius:0;
}
body.is-shop .woo-wrap #payment ul.payment_methods{
  border-bottom:1px solid rgba(25,21,18,.12); padding:0 0 1rem; margin:0 0 1rem;
}
body.is-shop .woo-wrap #payment ul.payment_methods li{ list-style:none; }
body.is-shop .woo-wrap #payment div.payment_box{
  background:rgba(177,137,63,.10); border-radius:0; font-size:.9rem; color:#3a3128;
}
body.is-shop .woo-wrap #payment div.payment_box::before{ display:none; }

body.is-shop .woo-wrap #payment #place_order,
body.is-shop .woo-wrap .button.alt,
body.is-shop .woo-wrap button.button.alt,
body.is-shop .woo-wrap a.checkout-button.button{
  background:var(--gold) !important;
  border:1px solid var(--gold) !important;
  color:#14100a !important;
  border-radius:0; box-shadow:none; text-shadow:none;
  font-family:var(--sans); font-size:.76rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  padding:1.05rem 2.2rem; width:auto;
}
body.is-shop .woo-wrap #payment #place_order:hover,
body.is-shop .woo-wrap .button.alt:hover,
body.is-shop .woo-wrap a.checkout-button.button:hover{
  background:#1a1614 !important; border-color:#1a1614 !important; color:var(--paper) !important;
}

body.is-shop .woo-wrap table.shop_table,
body.is-shop .woo-wrap table.cart{ border:0; border-radius:0; }
body.is-shop .woo-wrap table.shop_table th,
body.is-shop .woo-wrap table.shop_table td{ border-left:0; border-right:0; }
body.is-shop .woo-wrap .product-thumbnail img{ max-width:80px; }

/* the coupon row reads as a footnote, not a headline */
body.is-shop .woo-wrap .woocommerce-form-coupon-toggle .woocommerce-info{
  background:transparent; border-left:2px solid var(--gold); font-size:.9rem;
}

/* single product: theme the description tabs, drop the empty reviews tab */
body.is-shop .woo-wrap .woocommerce-tabs ul.tabs{
  padding:0; margin:0 0 1.5rem; border-bottom:1px solid rgba(25,21,18,.18);
}
body.is-shop .woo-wrap .woocommerce-tabs ul.tabs::before{ border:0; }
body.is-shop .woo-wrap .woocommerce-tabs ul.tabs li{
  background:transparent; border:0; border-radius:0; margin:0 1.5rem 0 0; padding:0;
}
body.is-shop .woo-wrap .woocommerce-tabs ul.tabs li::before,
body.is-shop .woo-wrap .woocommerce-tabs ul.tabs li::after{ display:none; }
body.is-shop .woo-wrap .woocommerce-tabs ul.tabs li a{
  font-family:var(--sans); font-size:.68rem; letter-spacing:.22em;
  text-transform:uppercase; color:rgba(25,21,18,.6); padding:.6rem 0; font-weight:400;
}
body.is-shop .woo-wrap .woocommerce-tabs ul.tabs li.active a{ color:#141110; }
body.is-shop .woo-wrap .woocommerce-tabs .panel h2{ display:none; }
body.is-shop .woo-wrap li.reviews_tab{ display:none; }
body.is-shop .woo-wrap .woocommerce-product-details__short-description{ margin-bottom:1.5rem; }

/* =========================================================
   Legibility pass — menu & wine card
   George asked twice for easier reading (ticket #242746). Contrast was already
   16:1 on the dish names, so tone was not the problem: the problem was the
   TYPEFACE. Cormorant is a high-contrast old-style serif whose hairlines thin
   out badly below ~24px, and its default OLD-STYLE FIGURES render "18" as "ı8"
   and "15" as "ı5" — the digits read as lowercase letters, on the one part of
   the page a guest actually scans.

   So the card keeps Cormorant for the big decorative course headings, and sets
   the rows people actually read in the sans, with lining tabular figures for
   the prices.
   ========================================================= */

.items .nm{
  font-family:var(--sans);
  font-size:1.12rem;
  font-weight:400;
  line-height:1.4;
  color:#191512;
  letter-spacing:.005em;
}
.items .nm em{
  font-size:.9rem;
  line-height:1.5;
  color:rgba(25,21,18,.82);
  margin-top:.25rem;
}
.items .pr{
  font-family:var(--sans);
  font-size:1.06rem;
  font-weight:500;
  color:#2b241b;                                   /* was gold at 4.5:1 */
  font-variant-numeric:lining-nums tabular-nums;   /* "18" not "ı8", and columns align */
  font-feature-settings:"lnum" 1,"tnum" 1;
  letter-spacing:.01em;
}
.items li{ padding:.85rem 0; }
/* the leader can recede now that the price carries weight */
.items .dots{ background-image:radial-gradient(circle, rgba(25,21,18,.30) 1px, transparent 1px); }

/* small labels were 10.9–11.5px with .26–.30em tracking — legible as ornament,
   not as information */
.wine-region h4{
  font-size:.78rem;
  font-weight:400;
  letter-spacing:.14em;
  color:#7a5c22;
}
.wine-region h4 span{ letter-spacing:.1em; color:rgba(25,21,18,.7); }

.paper .eyebrow,
.page-head .eyebrow{ font-size:.78rem; letter-spacing:.2em; }

.course__note{ font-size:.82rem; letter-spacing:.12em; color:rgba(25,21,18,.75); }

.legal{ font-size:.85rem; line-height:1.75; color:rgba(25,21,18,.78); }

/* course headings stay Cormorant, but a touch more substantial */
.course > h3{ font-weight:400; }

@media (max-width:600px){
  .items .nm{ font-size:1.06rem; }
  .items .pr{ font-size:1.02rem; }
  .items .nm em{ font-size:.88rem; }
}

/* The eyebrow on the cream pages carries real information (the serving hours),
   so it should not sit at the 4.5:1 floor in decorative gold. */
.paper .eyebrow,
body.is-shop .page-head .eyebrow{ color:#6d551f; }

/* =========================================================
   PayPal smart buttons vs the sticky header
   The button iframe is position:absolute; z-index:100 — the same value as the
   header — and neither .paypal-buttons nor its container creates a stacking
   context, so that 100 competes at the ROOT with the header's. Equal z-index is
   resolved by DOM order, and the buttons come later in the document, so they
   painted over the header while scrolling.

   Raising the header alone would fix today's case but not the next widget that
   picks 100. So the button container also becomes its own stacking context:
   whatever z-index PayPal uses inside is then scoped to that box and composites
   as a single unit well below the header.

   Only the INLINE container is isolated. PayPal renders its real modals (the
   3-D Secure challenge, the wallet popup) into a body-level overlay outside
   this element, so those still sit above everything, as they must.
   ========================================================= */
[id^="ppc-button"],
.ppcp-button-container,
.ppcp-smart-buttons,
.wc_payment_method .paypal-buttons-context{
  position:relative;
  z-index:0;
  isolation:isolate;
}