/* ==========================================================================
   The Pond House Restaurant — core stylesheet
   Bainbridge / Brinson, Georgia
   ========================================================================== */

/* --- Design tokens ------------------------------------------------------
   Palette: Deep Cypress, Burnished Copper, Honey Gold, Creamy Oatmeal,
   Warm Slate. Nothing on the page is pure white or cold grey.
   ------------------------------------------------------------------------ */
:root{
  /* Colour */
  --forest:        #1C2B23;   /* Deep Cypress — header, footer, dark sections */
  --forest-dark:   #16221C;   /* one step deeper, for the status bar          */
  --forest-tint:   #E7EDE8;   /* cypress washed into the light background     */
  --cream:         #F9F6F0;   /* Creamy Oatmeal — main background             */
  --cream-deep:    #F1EBDF;   /* alternating section background               */
  --paper:         #FDFBF7;   /* warm near-white for cards                    */
  --ember:         #C85A32;   /* Burnished Copper — primary CTA               */
  --ember-dark:    #A8481F;   /* copper, pressed / hover                      */
  --gold:          #E29D38;   /* Honey Gold — stars, badges, hover accents    */
  --ink:           #3A3F3D;   /* Warm Slate — body copy                       */
  --muted:         #5E6360;
  --line:          #E4DCCE;
  --line-strong:   #CDC1AE;

  /* Type */
  --font-display: 'Bitter', Georgia, 'Times New Roman', serif;
  --font-body:    'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Spacing — 8pt grid */
  --s1: 8px;  --s2: 16px; --s3: 24px; --s4: 32px;
  --s5: 40px; --s6: 48px; --s7: 64px; --s8: 80px;
  --s9: 96px; --s10: 128px;

  /* Other */
  --radius:   6px;
  --radius-lg:10px;
  --shadow-sm: 0 1px 2px rgba(28,43,35,.06), 0 2px 8px rgba(28,43,35,.06);
  --shadow-md: 0 4px 12px rgba(28,43,35,.08), 0 12px 32px rgba(28,43,35,.10);
  --shadow-lg: 0 8px 24px rgba(28,43,35,.10), 0 24px 60px rgba(28,43,35,.14);
  --maxw: 1180px;
  --header-h: 76px;
}

/* --- Reset -------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
/* Author rules like `.form{display:grid}` otherwise beat the UA's
   [hidden] rule and the element stays on screen. */
[hidden]{ display:none !important; }
body{
  margin:0;
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  color:var(--ink);
  background:var(--cream);
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
a{ color:var(--forest); }
button{ font:inherit; }
/* Stop the grey flash on tap on Android/iOS — we style :active ourselves. */
a,button,summary,[role="button"]{ -webkit-tap-highlight-color:rgba(28,43,35,.12); }

/* Long unbreakable strings (an email address, a URL) must never widen the
   page on a 320px phone. */
body{ overflow-wrap:break-word; }

/* Flex and grid children default to min-width:auto, which lets wide content
   push a column past its track and create sideways scroll. */
.grid > *, .split > *, .form__row > *, .footer__grid > *, .trustbar__grid > *{ min-width:0; }

/* Anchor links land under the sticky header without this. */
:target,
section[id], [id].section{ scroll-margin-top:calc(var(--header-h) + 16px); }
h1,h2,h3,h4{ font-family:var(--font-display); font-weight:700; line-height:1.15; margin:0 0 var(--s2); letter-spacing:-.01em; }
h1{ font-size:clamp(2.15rem, 5.6vw, 3.65rem); }
h2{ font-size:clamp(1.75rem, 3.6vw, 2.6rem); }
h3{ font-size:clamp(1.15rem, 2vw, 1.4rem); }
p{ margin:0 0 var(--s2); }
p:last-child{ margin-bottom:0; }
ul{ margin:0 0 var(--s2); padding-left:1.15em; }

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

/* --- Layout helpers ----------------------------------------------------- */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s3); }
.section{ padding-block:var(--s8); }
.section--tight{ padding-block:var(--s7); }
.section--cream{ background:var(--cream-deep); }
.section--paper{ background:var(--paper); }
.section--forest{ background:var(--forest); color:var(--cream); }
.section--forest h2, .section--forest h3{ color:#fff; }

.eyebrow{
  font-family:var(--font-body);
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ember); margin:0 0 var(--s2);
}
.section--forest .eyebrow{ color:var(--gold); }
.lede{ font-size:1.12rem; color:var(--muted); max-width:62ch; }
.section--forest .lede{ color:rgba(249,246,240,.82); }
.center{ text-align:center; }
.center .lede{ margin-inline:auto; }
.stack > * + *{ margin-top:var(--s2); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* --- Buttons ------------------------------------------------------------ */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:14px 26px; min-height:52px;
  font-weight:700; font-size:1rem; letter-spacing:.01em;
  text-decoration:none; border:2px solid transparent; border-radius:var(--radius);
  cursor:pointer; transition:background-color .18s ease, color .18s ease,
                              border-color .18s ease, transform .12s ease, box-shadow .18s ease;
}
.btn:active{ transform:translateY(1px); }
.btn--primary{ background:var(--ember); color:#fff; border-color:var(--ember); box-shadow:var(--shadow-sm); }
.btn--primary:hover{ background:var(--ember-dark); border-color:var(--ember-dark); }
.btn--dark{ background:var(--forest); color:#fff; border-color:var(--forest); }
.btn--dark:hover{ background:var(--forest-dark); border-color:var(--forest-dark); }
.btn--ghost{ background:transparent; color:var(--forest); border-color:var(--line-strong); }
.btn--ghost:hover{ border-color:var(--forest); background:rgba(28,43,35,.05); }
/* Solid, not outlined — on a photo an outlined button reads as secondary
   and gets lost against the greenery. */
.btn--onDark{ background:var(--cream); color:var(--forest); border-color:var(--cream); box-shadow:var(--shadow-sm); }
.btn--onDark:hover{ background:#fff; border-color:#fff; }
.btn--lg{ padding:16px 32px; min-height:58px; font-size:1.05rem; }
.btn--block{ width:100%; }
.btn-row{ display:flex; flex-wrap:wrap; gap:var(--s2); }

/* --- Header ------------------------------------------------------------- */
.topbar{
  background:var(--forest-dark); color:rgba(249,246,240,.9);
  font-size:.86rem; letter-spacing:.02em;
}
.topbar__inner{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:var(--s1) var(--s3); padding-block:9px; text-align:center;
}
/* Links inside the bar carry their own 44px height on phones, so the bar
   itself drops its padding rather than stacking the two. The address and the
   separator dots are dropped so the bar stays one tidy line — the address is
   repeated in full further down every page. */
@media (max-width:899px){
  .topbar__inner{ padding-block:0; gap:0 var(--s2); flex-wrap:nowrap; }
  .topbar__inner > span:not(.status){ display:none; }
  .topbar .status{ font-size:.82rem; }
}
@media (max-width:359px){ .topbar__inner{ gap:0 var(--s1); } }
.topbar a{
  color:#fff; text-decoration:none; font-weight:600;
  display:inline-flex; align-items:center; min-height:44px; /* thumb-sized */
}
.topbar a:hover{ text-decoration:underline; }
.topbar__dot{ opacity:.4; }

.status{ display:inline-flex; align-items:center; gap:7px; font-weight:600; }
.status::before{
  content:""; width:8px; height:8px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 0 3px rgba(226,157,56,.25);
}
.status.is-open::before{ background:#5FBF7E; box-shadow:0 0 0 3px rgba(95,191,126,.28); }

.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(28,43,35,.97);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid rgba(249,246,240,.12);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  min-height:var(--header-h);
}
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--cream); min-width:0; min-height:44px; }
/* The cabin from their printed logo; the wordmark is set in type beside it. */
.brand img{ width:auto; height:46px; flex:none; max-width:none; }
.brand__text{ display:flex; flex-direction:column; line-height:1.05; min-width:0; }
.brand__name{ font-family:var(--font-display); font-weight:700; font-size:1.12rem; letter-spacing:.01em; white-space:nowrap; }
.brand__sub{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(249,246,240,.6); white-space:nowrap; }
@media (max-width:420px){
  .brand{ gap:9px; }
  .brand img{ height:38px; }
  .brand__name{ font-size:1.02rem; }
  .brand__sub{ font-size:.6rem; letter-spacing:.14em; }
}
@media (max-width:339px){ .brand__sub{ display:none; } }

.nav{ display:none; }
.nav ul{ display:flex; align-items:center; gap:var(--s4); list-style:none; margin:0; padding:0; }
.nav a{
  text-decoration:none; color:rgba(249,246,240,.88); font-weight:600; font-size:.98rem;
  padding-block:6px; border-bottom:2px solid transparent;
  transition:color .18s ease, border-color .18s ease;
}
.nav a:hover{ color:#fff; border-bottom-color:var(--gold); }
.nav a[aria-current="page"]{ border-bottom-color:var(--gold); color:var(--gold); }

.header-cta{ display:none; }

/* Facebook — icon button in the header, full link in the footer. */
.header-social{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; flex:none; border-radius:50%;
  border:1px solid rgba(249,246,240,.32); color:var(--cream);
  transition:background-color .18s ease, border-color .18s ease, color .18s ease;
}
.header-social svg{ width:20px; height:20px; }
.header-social:hover{ background:var(--gold); border-color:var(--gold); color:var(--forest); }

.social{ list-style:none; margin:var(--s3) 0 0; padding:0; display:flex; gap:var(--s2); }
.social__link{
  display:inline-flex; align-items:center; gap:10px; min-height:44px;
  padding:0 16px 0 12px; border-radius:999px;
  border:1px solid rgba(249,246,240,.28); text-decoration:none;
  font-weight:600; font-size:.94rem;
  transition:background-color .18s ease, border-color .18s ease;
}
.social__link svg{ width:20px; height:20px; flex:none; }
.social__link:hover{ background:rgba(249,246,240,.12); border-color:rgba(249,246,240,.6); }

.nav-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:rgba(249,246,240,.14); color:#fff;
  border:1px solid rgba(249,246,240,.3); border-radius:var(--radius);
  padding:11px 16px; min-height:44px; font-weight:700; font-size:.92rem; cursor:pointer;
}
.nav-toggle__bars{ display:block; width:18px; height:2px; background:#fff; position:relative; }
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:""; position:absolute; left:0; width:18px; height:2px; background:#fff;
}
.nav-toggle__bars::before{ top:-6px; } .nav-toggle__bars::after{ top:6px; }

.mobile-nav{
  display:none; border-top:1px solid rgba(249,246,240,.14); background:var(--forest);
  padding:var(--s2) 0 var(--s3);
  /* Never let the open panel run past the screen on a short phone. */
  max-height:calc(100vh - var(--header-h) - 44px);
  max-height:calc(100dvh - var(--header-h) - 44px);
  overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.mobile-nav.is-open{ display:block; }
.mobile-nav ul{ list-style:none; margin:0 0 var(--s2); padding:0; }
.mobile-nav a{
  display:block; padding:13px 0; text-decoration:none; color:rgba(249,246,240,.92);
  font-weight:600; font-size:1.05rem; border-bottom:1px solid rgba(249,246,240,.14);
}
.mobile-nav a:hover{ color:var(--gold); }

@media (min-width:900px){
  .nav{ display:block; }
  .header-cta{ display:inline-flex; }
  .header-social{ display:inline-flex; }
  .nav-toggle{ display:none; }
  .mobile-nav{ display:none !important; }
}

/* --- Hero --------------------------------------------------------------- */
.hero{ position:relative; background:var(--forest-dark); overflow:hidden; }
.hero__media{ position:absolute; inset:0; }
.hero__media img{ width:100%; height:100%; object-fit:cover; }
.hero__media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(28,43,35,.50) 0%, rgba(28,43,35,.45) 42%, rgba(28,43,35,.72) 100%);
}
.hero__inner{
  position:relative; z-index:2;
  padding-block:var(--s9) var(--s8);
  max-width:44rem; color:#fff;
}
/* Phones get a tighter hero so the call buttons sit above the fold. */
@media (max-width:639px){
  .hero__inner{ padding-block:var(--s7) var(--s6); }
  .hero__lede{ font-size:1.05rem; margin-bottom:var(--s3); }
  .hero .btn-row{ margin-bottom:var(--s3); }
  .hero .btn{ flex:1 1 100%; }
}
.hero h1{ color:#fff; text-shadow:0 2px 18px rgba(22,34,28,.55), 0 1px 3px rgba(22,34,28,.4); }
.hero__eyebrow{
  display:inline-block; font-size:.78rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--gold); margin-bottom:var(--s2);
}
.hero__lede{ font-size:1.16rem; color:rgba(255,255,255,.95); text-shadow:0 1px 10px rgba(22,34,28,.5); max-width:36rem; margin-bottom:var(--s4); }
.hero .btn-row{ margin-bottom:var(--s4); }
.hero__meta{
  display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); align-items:center;
  font-size:.95rem; color:rgba(255,255,255,.85);
  padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.18);
}
.hero__meta strong{ color:#fff; }
/* When the meta wraps to two lines the separator is left dangling. */
@media (max-width:520px){ .hero__meta .topbar__dot{ display:none; } }

/* --- Trust bar ---------------------------------------------------------- */
.trustbar{ background:var(--paper); border-bottom:1px solid var(--line); }
.trustbar__grid{
  display:grid; grid-template-columns:1fr; gap:var(--s3);
  padding-block:var(--s4);
}
.trust{ display:flex; gap:14px; align-items:flex-start; }
.trust__icon{
  flex:none; width:40px; height:40px; border-radius:50%;
  background:var(--forest-tint); color:var(--forest);
  display:grid; place-items:center;
}
.trust__icon svg{ width:20px; height:20px; }
.trust h3{ font-size:1.02rem; margin:0 0 2px; }
.trust p{ font-size:.94rem; color:var(--muted); margin:0; }
@media (min-width:640px){ .trustbar__grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1000px){ .trustbar__grid{ grid-template-columns:repeat(4,1fr); gap:var(--s4); } }

/* --- Cards / grids ------------------------------------------------------ */
.grid{ display:grid; gap:var(--s3); }
.grid--2{ grid-template-columns:1fr; }
.grid--3{ grid-template-columns:1fr; }
@media (min-width:700px){ .grid--2{ grid-template-columns:1fr 1fr; } .grid--3{ grid-template-columns:1fr 1fr; } }
@media (min-width:1000px){ .grid--3{ grid-template-columns:repeat(3,1fr); } }

.card{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease;
}
.card:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.card__media{ aspect-ratio:4/3; overflow:hidden; background:var(--cream-deep); }
.card__media img{ width:100%; height:100%; object-fit:cover; }
.card__body{ padding:var(--s3); }
.card__body h3{ margin-bottom:6px; }
.card__body p{ color:var(--muted); font-size:.97rem; margin:0; }
.card__price{
  display:inline-block; margin-top:var(--s2);
  font-family:var(--font-display); font-weight:700; color:var(--ember);
}

/* --- Split (image + text) ----------------------------------------------- */
.split{ display:grid; gap:var(--s5); align-items:center; grid-template-columns:1fr; }
@media (min-width:900px){ .split{ grid-template-columns:1fr 1fr; gap:var(--s7); } }
.split__media{
  aspect-ratio:4/3; overflow:hidden;
  border-radius:var(--radius-lg); box-shadow:var(--shadow-md); background:var(--cream-deep);
}
.split__media img{ width:100%; height:100%; object-fit:cover; }
.split--reverse .split__media{ order:-1; }
@media (min-width:900px){ .split--reverse .split__media{ order:2; } }

/* --- Reviews carousel --------------------------------------------------- */
.reviews{ position:relative; }
.rating-badge{
  display:inline-flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
  border-radius:999px; padding:9px 20px; margin-bottom:var(--s3);
}
.rating-badge__score{ font-family:var(--font-display); font-weight:700; font-size:1.3rem; color:#fff; }
.rating-badge__meta{ font-size:.9rem; color:rgba(249,246,240,.78); }
.stars{ display:inline-flex; gap:2px; color:var(--gold); }
.stars svg{ width:17px; height:17px; }

.carousel{ position:relative; margin-top:var(--s4); }
.carousel__viewport{ overflow:hidden; }
.carousel__track{ display:flex; transition:transform .55s cubic-bezier(.4,.05,.2,1); }
.carousel__slide{ flex:0 0 100%; padding:0 4px; }
.quote{
  background:var(--paper); color:var(--ink);
  border-radius:var(--radius-lg); padding:var(--s5) var(--s4);
  box-shadow:var(--shadow-lg); text-align:center;
  min-height:100%;
}
.quote .stars{ margin-bottom:var(--s2); }
.quote blockquote{
  margin:0 0 var(--s3); font-family:var(--font-display); font-size:1.12rem;
  line-height:1.55; color:var(--ink);
}
.quote__author{ font-weight:700; font-size:.98rem; }
.quote__source{ font-size:.85rem; color:var(--muted); }
@media (min-width:700px){
  .quote{ padding:var(--s6) var(--s6); }
  .quote blockquote{ font-size:1.28rem; }
}

.carousel__nav{
  display:flex; align-items:center; justify-content:center; gap:var(--s2);
  margin-top:var(--s3);
}
.carousel__btn{
  width:44px; height:44px; border-radius:50%; cursor:pointer;
  background:transparent; border:1px solid rgba(255,255,255,.35); color:#fff;
  display:grid; place-items:center; transition:background-color .18s ease, border-color .18s ease;
}
.carousel__btn:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.carousel__btn svg{ width:18px; height:18px; }
.carousel__dots{ display:flex; gap:2px; }
/* The dot is 9px of paint inside a 30x44 hit area, so it stays easy to tap
   without looking heavy. */
.carousel__dot{
  width:30px; height:44px; padding:0; cursor:pointer;
  background:transparent; border:0; border-radius:var(--radius);
  display:grid; place-items:center; -webkit-appearance:none; appearance:none;
}
.carousel__dot::before{
  content:""; width:9px; height:9px; border-radius:50%;
  background:rgba(255,255,255,.32);
  transition:background-color .2s ease, transform .2s ease;
}
.carousel__dot[aria-current="true"]::before{ background:var(--gold); transform:scale(1.35); }
.carousel__dot:hover::before{ background:rgba(255,255,255,.6); }

/* --- Menu ---------------------------------------------------------------- */
/* Jump links — a horizontal scroller on phones, a wrapped row on desktop. */
.menu-jump{
  display:flex; gap:var(--s1); overflow-x:auto; margin-bottom:var(--s6);
  padding-bottom:var(--s1); -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.menu-jump::-webkit-scrollbar{ display:none; }
.menu-jump a{
  flex:none; display:inline-flex; align-items:center; min-height:44px;
  padding:0 16px; border-radius:999px; text-decoration:none;
  background:var(--paper); border:1px solid var(--line-strong);
  color:var(--ink); font-weight:600; font-size:.92rem; white-space:nowrap;
  transition:border-color .18s ease, background-color .18s ease;
}
.menu-jump a:hover{ border-color:var(--forest); background:var(--forest-tint); }
@media (min-width:900px){ .menu-jump{ flex-wrap:wrap; overflow:visible; justify-content:center; } }

.callout{
  background:var(--forest-tint); border-left:4px solid var(--forest);
  border-radius:0 var(--radius) var(--radius) 0;
  padding:var(--s3); font-size:.97rem;
}
.callout strong{ color:var(--forest); }

/* --- Gallery ------------------------------------------------------------ */
.gallery{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
@media (min-width:800px){ .gallery{ grid-template-columns:repeat(3,1fr); gap:var(--s3); } }
.gallery__item{
  position:relative; border-radius:var(--radius-lg); overflow:hidden;
  aspect-ratio:1; background:var(--cream-deep); border:0; padding:0; cursor:zoom-in;
}
.gallery__item img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.gallery__item:hover img{ transform:scale(1.05); }
/* Feature tiles occupy a clean 2x2 block so the grid keeps its rhythm.
   On a 2-column phone layout that would eat the whole screen, so the
   feature treatment only kicks in once there are 3 columns to play with. */
.gallery{ grid-auto-flow:dense; }
@media (min-width:800px){
  .gallery__item--wide{ grid-column:span 2; grid-row:span 2; }
}

.lightbox{
  position:fixed; inset:0; z-index:200; display:none;
  background:rgba(22,34,28,.96);
  padding:calc(var(--s7) + env(safe-area-inset-top, 0px)) var(--s2)
          calc(var(--s3) + env(safe-area-inset-bottom, 0px));
  align-items:center; justify-content:center; gap:var(--s2);
}
.lightbox.is-open{ display:flex; }
.lightbox__figure{
  margin:0; display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  max-width:min(1100px, 100%); max-height:100%; min-width:0;
}
.lightbox img{
  max-width:100%; max-height:100%; min-height:0;
  border-radius:var(--radius); object-fit:contain;
}
.lightbox__caption{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:center;
  gap:6px var(--s2); text-align:center;
  color:rgba(249,246,240,.86); font-size:.92rem; line-height:1.5;
  max-width:60ch;
}
.lightbox__count{
  flex:none; font-size:.78rem; font-weight:700; letter-spacing:.12em;
  color:rgba(249,246,240,.6);
}
.lightbox__close{
  position:absolute; top:calc(14px + env(safe-area-inset-top, 0px)); right:14px;
  width:46px; height:46px; z-index:2;
  border-radius:50%; border:1px solid rgba(255,255,255,.4);
  background:rgba(22,34,28,.6); backdrop-filter:blur(4px);
  color:#fff; font-size:1.4rem; line-height:1; cursor:pointer;
}
.lightbox__close:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.lightbox__nav{
  flex:none; width:48px; height:48px; border-radius:50%; cursor:pointer;
  display:grid; place-items:center;
  border:1px solid rgba(255,255,255,.32); background:rgba(22,34,28,.55);
  color:#fff; transition:background-color .18s ease, border-color .18s ease;
}
.lightbox__nav:hover{ background:rgba(255,255,255,.16); border-color:#fff; }
.lightbox__nav svg{ width:22px; height:22px; }
/* On a phone the arrows overlay the photo edges rather than stealing width. */
@media (max-width:719px){
  .lightbox{ padding-inline:var(--s1); }
  .lightbox__nav{
    position:absolute; top:50%; transform:translateY(-50%);
    width:44px; height:44px; z-index:2;
  }
  .lightbox__nav--prev{ left:10px; }
  .lightbox__nav--next{ right:10px; }
}

/* --- Hours / info ------------------------------------------------------- */
.info-card{
  background:var(--paper); border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:var(--s4); box-shadow:var(--shadow-sm);
}
.hours{ list-style:none; margin:0; padding:0; }
.hours li{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:2px var(--s2);
  padding:11px 0; border-bottom:1px solid var(--line); font-size:1rem;
}
.hours li:last-child{ border-bottom:0; }
.hours .day{ font-weight:600; }
.hours .closed{ color:var(--muted); }
.hours li.is-today{ color:var(--ember); font-weight:700; }
.hours li.is-today .day::after{ content:" — today"; font-weight:600; font-size:.85rem; }

.contact-lines{ list-style:none; margin:0; padding:0; }
.contact-lines li{ display:flex; gap:12px; padding:4px 0; align-items:flex-start; min-width:0; }
.contact-lines li > span{ min-width:0; }
.contact-lines svg{ width:20px; height:20px; flex:none; color:var(--forest); margin-top:12px; }
/* An email address is one long unbreakable token — let it wrap rather than
   widen the card past the viewport. */
.contact-lines a{
  font-weight:600; overflow-wrap:anywhere;
  display:inline-flex; align-items:center; min-height:44px;
}

.map-frame{
  position:relative;
  border-radius:var(--radius-lg); overflow:hidden;
  border:1px solid var(--line); box-shadow:var(--shadow-sm); background:var(--cream-deep);
}
.map-frame iframe{ display:block; width:100%; height:380px; border:0; }
@media (min-width:900px){ .map-frame iframe{ height:100%; min-height:460px; } }

/* Directions trigger layered on the map itself, so a visitor can get moving
   without reading further down the page. The iframe sits below it in the
   stacking order — pointer-events on the link only, so map panning still works
   everywhere else on the tile. */
.map-frame__cta{
  position:absolute; right:14px; bottom:14px; z-index:2;
  display:inline-flex; align-items:center; gap:8px;
  background:var(--forest); color:var(--cream);
  padding:0 16px; height:44px; border-radius:999px;
  font-weight:600; font-size:.92rem; text-decoration:none;
  box-shadow:0 4px 14px rgba(0,0,0,.22);
  transition:background .15s ease, transform .15s ease;
}
.map-frame__cta svg{ width:17px; height:17px; flex:none; }
.map-frame__cta:hover{ background:var(--forest-dark); transform:translateY(-1px); }
.map-frame__cta:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }

/* --- Form --------------------------------------------------------------- */
.form{ display:grid; gap:var(--s3); }
.field label{ display:block; font-weight:600; font-size:.94rem; margin-bottom:6px; }
.field .hint{ font-weight:400; color:var(--muted); }
.field input, .field select, .field textarea{
  width:100%; padding:13px 14px; font:inherit; font-size:1rem; color:var(--ink);
  background:var(--paper); border:1px solid var(--line-strong); border-radius:var(--radius);
  transition:border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--forest); box-shadow:0 0 0 3px rgba(28,43,35,.14);
}
.field textarea{ min-height:130px; resize:vertical; }
.field--error input, .field--error select, .field--error textarea{ border-color:var(--ember); }
.field__error{ display:none; color:var(--ember); font-size:.88rem; margin-top:5px; font-weight:600; }
.field--error .field__error{ display:block; }
.form__row{ display:grid; gap:var(--s3); grid-template-columns:1fr; }
@media (min-width:640px){ .form__row{ grid-template-columns:1fr 1fr; } }
.form__note{ font-size:.88rem; color:var(--muted); }
.form-success{
  display:none; background:var(--forest-tint); border:1px solid var(--forest);
  border-radius:var(--radius-lg); padding:var(--s4); text-align:center;
}
.form-success.is-visible{ display:block; }
.form-success h3{ color:var(--forest); }
.hp{ position:absolute; left:-9999px; opacity:0; }

/* --- FAQ ---------------------------------------------------------------- */
.faq{ max-width:800px; margin-inline:auto; }
.faq details{
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius);
  padding:0; margin-bottom:12px; box-shadow:var(--shadow-sm);
}
.faq summary{
  cursor:pointer; list-style:none; padding:18px var(--s3);
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  display:flex; justify-content:space-between; align-items:center; gap:var(--s2);
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:"+"; font-size:1.5rem; font-weight:400; color:var(--ember); line-height:1; flex:none;
}
.faq details[open] summary::after{ content:"\2212"; }
.faq details > div{ padding:0 var(--s3) var(--s3); color:var(--muted); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band{
  background:var(--ember); color:#fff; text-align:center;
  padding-block:var(--s7);
}
.cta-band h2{ color:#fff; }
.cta-band p{ color:rgba(255,255,255,.9); max-width:52ch; margin-inline:auto; }
.cta-band .btn--ghost{ color:#fff; border-color:rgba(255,255,255,.55); }
.cta-band .btn--ghost:hover{ background:rgba(255,255,255,.14); border-color:#fff; }
.cta-band .btn--primary{ background:#fff; color:var(--ember); border-color:#fff; }
.cta-band .btn--primary:hover{ background:var(--cream); border-color:var(--cream); }
.cta-band .btn-row{ justify-content:center; margin-top:var(--s4); }

/* --- Footer ------------------------------------------------------------- */
.site-footer{ background:var(--forest); color:rgba(249,246,240,.76); padding-block:var(--s7) var(--s4); }
.site-footer .footer__h{
  color:#fff; font-family:var(--font-body); font-size:.8rem; font-weight:700;
  letter-spacing:.16em; text-transform:uppercase; margin:0 0 var(--s2);
}
.site-footer a{ color:rgba(249,246,240,.86); text-decoration:none; }
.site-footer a:hover{ color:#fff; text-decoration:underline; }
.footer__grid{ display:grid; gap:var(--s5); grid-template-columns:1fr; }
@media (min-width:700px){ .footer__grid{ grid-template-columns:1.4fr 1fr 1fr; gap:var(--s6); } }
.footer__brand img{ width:auto; height:118px; max-width:100%; margin-bottom:var(--s3); }
.footer__list{ list-style:none; margin:0; padding:0; }
.footer__list li{ padding:0; }
/* Footer links are a primary nav on phones — give them real tap height. */
.footer__list a{ display:inline-flex; align-items:center; min-height:44px; }
.site-footer .contact-lines a{ color:rgba(249,246,240,.86); }
.footer__bottom{
  margin-top:var(--s6); padding-top:var(--s3);
  border-top:1px solid rgba(249,246,240,.16);
  display:flex; flex-wrap:wrap; gap:var(--s2) var(--s3); justify-content:space-between;
  font-size:.86rem; color:rgba(249,246,240,.6);
}

/* --- Sticky mobile call bar --------------------------------------------- */
.callbar{
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; gap:1px; background:var(--line-strong);
  box-shadow:0 -4px 16px rgba(28,43,35,.16);
}
.callbar a{
  flex:1; display:flex; align-items:center; justify-content:center; gap:8px;
  padding:15px 8px; text-decoration:none; font-weight:700; font-size:.98rem;
  min-height:56px;
  /* Clear the iPhone home indicator instead of sitting under it. */
  padding-bottom:calc(15px + env(safe-area-inset-bottom, 0px));
}
.callbar a:first-child{ background:var(--ember); color:#fff; }
.callbar a:last-child{ background:var(--forest); color:#fff; }
.callbar svg{ width:18px; height:18px; flex:none; }
@media (min-width:900px){ .callbar{ display:none; } }
@media (max-width:899px){
  body{ padding-bottom:calc(56px + env(safe-area-inset-bottom, 0px)); }
}
/* Notched phones in landscape put content under the rounded corners. */
@media (max-width:899px){
  .wrap{
    padding-left:calc(var(--s3) + env(safe-area-inset-left, 0px));
    padding-right:calc(var(--s3) + env(safe-area-inset-right, 0px));
  }
}

/* --- Motion ------------------------------------------------------------- */
/* Only hide before reveal when JS is actually running — content must never
   be invisible if the script fails to load. */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s ease; }
.js .reveal.is-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1; transform:none; }
}

/* --- Menu sheet ---------------------------------------------------------
   Structured to read like the restaurant's printed card: two columns,
   prices set inline with the dish name, descriptions beneath, and the two
   house specialities boxed out.
   ------------------------------------------------------------------------ */
.m-sheet{ display:grid; grid-template-columns:1fr; gap:var(--s7); }
@media (min-width:1000px){
  .m-sheet{ grid-template-columns:1fr 1fr; gap:var(--s6) var(--s8); align-items:start; }
  .m-col{ display:grid; gap:var(--s7); align-content:start; }
  /* The rule down the middle, as on the printed card. */
  .m-sheet > .m-col:first-child{ padding-right:var(--s8); border-right:1px solid var(--line); }
}
.m-col{ display:grid; gap:var(--s7); align-content:start; }

.m-group{ scroll-margin-top:calc(var(--header-h) + 24px); }
.m-group__head{ margin-bottom:var(--s3); }
.m-group h2{
  font-size:clamp(1.7rem, 4.4vw, 2.35rem); margin:0; line-height:1.05;
  letter-spacing:.01em;
}
/* Alternating solid and outlined headings, as the card does. */
.m-group--outline h2{
  color:transparent;
  -webkit-text-stroke:1.6px var(--forest);
  paint-order:stroke fill;
}
@supports not (-webkit-text-stroke: 1px red){
  .m-group--outline h2{ color:var(--forest); }
}
.m-group--script h2{ font-style:italic; font-weight:600; letter-spacing:.02em; }
.m-group__note{
  display:block; margin-top:6px; font-size:.93rem; color:var(--muted); max-width:46ch;
}
.m-group__note em{ font-style:italic; }

.m-list{ list-style:none; margin:0; padding:0; }
.m-item{ padding:9px 0; }
.m-item + .m-item{ border-top:1px solid var(--line); }
.m-item__name{
  font-family:var(--font-body); font-weight:700; font-size:.99rem;
  letter-spacing:.04em; text-transform:uppercase; color:var(--ink);
}
.m-item__price{
  font-family:var(--font-body); font-weight:700; font-size:.99rem;
  color:var(--ember); letter-spacing:.01em; white-space:nowrap;
}
.m-item__desc{ margin:3px 0 0; font-size:.93rem; line-height:1.5; color:var(--muted); }
.m-item__desc em{ font-style:italic; }

/* Boxed house specialities */
.m-feature{
  border:2px dashed var(--forest); border-radius:var(--radius);
  padding:var(--s3); margin:var(--s2) 0;
  background:rgba(28,43,35,.035);
}
.m-feature .m-item{ padding:0; border:0; }
.m-feature__kicker{
  display:block; font-size:.72rem; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ember); margin-bottom:5px;
}

/* Rotated category rail, like the printed card's STEAKS / SIDES labels */
.m-group--rail{ display:grid; grid-template-columns:auto 1fr; gap:var(--s3); }
.m-rail{
  writing-mode:vertical-rl; transform:rotate(180deg);
  font-family:var(--font-display); font-weight:700;
  font-size:1.05rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--forest); opacity:.55; align-self:start;
  padding-top:4px;
}
@media (max-width:639px){
  .m-group--rail{ grid-template-columns:1fr; }
  .m-rail{ display:none; }
}

/* Combination plate — centred block on the card */
.m-combo{
  border-top:2px solid var(--line-strong); margin-top:var(--s4);
  padding-top:var(--s4); text-align:center;
}
.m-combo h3{ font-size:1.25rem; margin-bottom:4px; }
.m-combo__price{ font-family:var(--font-body); font-weight:700; color:var(--ember); }
.m-combo ul{
  list-style:none; margin:var(--s2) 0 0; padding:0;
  display:flex; flex-wrap:wrap; justify-content:center; gap:4px var(--s2);
  font-size:.94rem; color:var(--muted);
}
.m-combo li + li::before{ content:"• "; color:var(--line-strong); margin-right:var(--s2); }

.m-advisory{
  margin-top:var(--s7); padding-top:var(--s3); border-top:1px solid var(--line);
  text-align:center; font-size:.84rem; font-style:italic; color:var(--muted);
  line-height:1.6;
}

/* --- This weekend banner -------------------------------------------------
   Sits directly beneath the sticky header and stays there while you scroll.
   Collapsed it is one line; tapping it reveals the detail.
   ------------------------------------------------------------------------ */
.weekend{
  position:sticky; top:var(--header-h); z-index:55;
  background:var(--ember); color:#fff;
  border-bottom:1px solid rgba(0,0,0,.12);
  box-shadow:0 2px 10px rgba(28,43,35,.12);
}
.weekend__inner{ position:relative; display:flex; flex-wrap:wrap; align-items:center; }
/* Symmetric padding on both sides so the content centres against the page,
   not against the space left over by the close button. */
.weekend__toggle{
  flex:1; display:flex; align-items:center; justify-content:center; gap:10px;
  min-height:46px; padding:6px 44px;
  background:transparent; border:0; color:inherit; cursor:pointer;
  text-align:center; font:inherit;
}
.weekend__toggle[aria-disabled="true"]{ cursor:default; }
.weekend__tag{
  flex:none; font-size:.68rem; font-weight:700; letter-spacing:.16em;
  text-transform:uppercase; padding:3px 9px; border-radius:999px;
  background:rgba(255,255,255,.22);
}
.weekend__headline{
  font-weight:600; font-size:.97rem; line-height:1.35;
  overflow:hidden; text-overflow:ellipsis;
}
.weekend__chev{
  flex:none; width:9px; height:9px;
  border-right:2px solid rgba(255,255,255,.85);
  border-bottom:2px solid rgba(255,255,255,.85);
  transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .2s ease;
}
.weekend.is-open .weekend__chev{ transform:rotate(-135deg) translate(-2px,-2px); }
.weekend__close{
  position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:44px; height:44px; display:grid; place-items:center;
  background:transparent; border:0; color:rgba(255,255,255,.85);
  font-size:1.35rem; line-height:1; cursor:pointer; border-radius:50%;
}
.weekend__close:hover{ background:rgba(255,255,255,.16); color:#fff; }
.weekend__detail{
  flex-basis:100%; padding:0 44px var(--s2);
  font-size:.94rem; line-height:1.6; color:rgba(255,255,255,.94);
  max-width:70ch; margin-inline:auto; text-align:center;
}
@media (max-width:520px){
  .weekend__toggle{ padding-top:9px; padding-bottom:9px; padding-inline:38px; gap:8px; }
  .weekend__headline{ font-size:.9rem; }
  .weekend__tag{ font-size:.62rem; padding:3px 8px; letter-spacing:.12em; }
}
/* Below this the pill and the sentence can't share a line without wrapping,
   and the sentence says "Specials" anyway — so the pill steps aside. */
@media (max-width:430px){
  .weekend__tag{ display:none; }
  .weekend__headline{ font-size:.94rem; }
}
/* The banner adds a second sticky layer, so in-page anchors need to clear both. */
:target, section[id], [id].section{
  scroll-margin-top:calc(var(--header-h) + 62px);
}

/* Portrait imagery in a split — used for the owner photo. */
.split__media--portrait{ aspect-ratio:3/4; max-width:440px; }
@media (min-width:900px){ .split__media--portrait{ max-width:none; } }
@media (max-width:899px){ .split__media--portrait{ margin-inline:auto; } }

/* --- Featured dishes (top of the menu page) ------------------------------ */
.dishes{ display:grid; grid-template-columns:repeat(2,1fr); gap:var(--s2); }
@media (min-width:760px){ .dishes{ grid-template-columns:repeat(3,1fr); gap:var(--s3); } }
/* Two signature plates read better held to a comfortable width than stretched
   across the full grid. */
.dishes--pair{ grid-template-columns:1fr; max-width:840px; margin-inline:auto; }
@media (min-width:640px){ .dishes--pair{ grid-template-columns:1fr 1fr; gap:var(--s3); } }
.dishes--pair .dish__name{ font-size:.96rem; }
.dishes--pair .dish__price{ font-size:1.05rem; }
.dishes--pair .dish__body{ padding:var(--s3); }
.dish{
  display:flex; flex-direction:column; text-decoration:none; color:inherit;
  background:var(--paper); border:1px solid var(--line); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.dish:hover{ transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--line-strong); }
.dish__media{ display:block; aspect-ratio:1; overflow:hidden; background:var(--cream-deep); }
.dish__media img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dish:hover .dish__media img{ transform:scale(1.04); }
.dish__body{ display:block; padding:var(--s2) var(--s2) calc(var(--s2) + 2px); }
.dish__name{
  display:block; font-family:var(--font-body); font-weight:700;
  font-size:.9rem; letter-spacing:.04em; text-transform:uppercase; line-height:1.3;
}
.dish__price{
  display:block; margin-top:3px; font-weight:700; font-size:.95rem; color:var(--ember);
}
.dish__note{ display:block; margin-top:4px; font-size:.85rem; color:var(--muted); line-height:1.45; }

/* --- Specials call-out ---------------------------------------------------
   One banner rather than a grid of claims — the specials change, so the page
   sends people to the phone instead of printing terms that go stale.
   ------------------------------------------------------------------------ */
.specials-cta{
  display:grid; gap:var(--s4);
  background:var(--forest); color:var(--cream);
  border-radius:var(--radius-lg); padding:var(--s6) var(--s5);
  box-shadow:var(--shadow-md);
  text-align:center; justify-items:center;
}
.specials-cta .eyebrow{ color:var(--gold); }
.specials-cta h2{ color:#fff; margin:0 0 var(--s2); }
.specials-cta p{ margin:0; color:rgba(249,246,240,.84); max-width:52ch; }
.specials-cta__actions{ display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; }
@media (max-width:520px){
  .specials-cta{ padding:var(--s5) var(--s3); }
  .specials-cta__actions{ width:100%; }
  .specials-cta__actions .btn{ flex:1 1 100%; }
}
@media (min-width:940px){
  .specials-cta{
    grid-template-columns:1.35fr auto; align-items:center;
    text-align:left; justify-items:start; gap:var(--s6);
    padding:var(--s6);
  }
  .specials-cta__actions{ justify-content:flex-end; }
}

/* --- Quiet standalone note ------------------------------------------------
   For small print that should read as house policy rather than marketing.
   -------------------------------------------------------------------------- */
.note-line{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin:var(--s3) auto 0; max-width:52ch;
  font-size:.92rem; color:var(--muted); text-align:center;
}
.note-line::before,
.note-line::after{
  content:""; flex:1; height:1px; max-width:56px;
  background:var(--line-strong);
}
.note-line--rule{
  margin-top:var(--s7); padding-top:0;
}
@media (max-width:520px){
  .note-line::before, .note-line::after{ max-width:24px; }
  .note-line{ font-size:.88rem; }
}

/* --- Build credit --------------------------------------------------------
   Sits under the copyright: present, findable, not competing with the
   restaurant's own footer links.
   -------------------------------------------------------------------------- */
.footer__legal{ display:flex; flex-direction:column; gap:5px; }
.footer__credit{ color:rgba(249,246,240,.5); }
.footer__credit a{
  color:rgba(249,246,240,.72); text-decoration:none;
  border-bottom:1px solid rgba(249,246,240,.24);
  padding-bottom:1px; transition:color .18s ease, border-color .18s ease;
}
.footer__credit a:hover{ color:var(--gold); border-bottom-color:var(--gold); }

/* A detail-less weekend banner is a link, not an expander. */
a.weekend__toggle--link{ text-decoration:none; color:inherit; }
a.weekend__toggle--link:hover .weekend__headline{ text-decoration:underline; }