/* ==========================================================================
   The Piano Bar & Steak House — Rockdale, Texas
   Shared stylesheet for all five pages.

     01  Tokens & reset
     02  Grain + utilities
     03  Musical ornaments (SVG sprite styling)
     04  Buttons
     05  Navbar + mobile nav        (identical markup on every page)
     06  Floating call button       (mobile)
     07  Footer                     (identical markup on every page)
     08  Hero + page headers
     09  Home page sections
     10  Menu page
     11  Our Story page
     12  Gallery + lightbox
     13  Visit page
     14  Responsive
   ========================================================================== */


/* ==========================================================================
   01  TOKENS & RESET
   ========================================================================== */

:root{
  /* Warm dark walnut, not black — there is brown in it, and it lifts in
     three steps so sections can sit in front of or behind one another. */
  --bg:         #2a2622;   /* page base                                   */
  --bg-2:       #332e28;   /* raised: alternating bands, cards            */
  --bg-3:       #201c19;   /* recessed: footer, pull quote, order panels  */
  --bg-4:       #3d3730;   /* borders, inset fills                        */

  /* Warm cream, off-white so it never glares against the walnut */
  --text:       #f1eade;
  --text-2:     #cec4b4;
  --text-3:     #a0968a;

  /* Brass — brighter than the light theme needed, to hold up on dark */
  --brass:      #d4a04a;   /* fills / buttons — pairs with --bg-3 text    */
  --brass-lt:   #e3bb75;   /* brass as text on dark                       */
  --brass-soft: #f0d6a6;

  /* Sage — off their dining room walls. On a dark site this is the one
     bright band, so it does a lot of work. */
  --sage:       #7d9070;
  --sage-deep:  #1c2318;

  --line:       rgba(241,234,222,.16);
  --line-soft:  rgba(241,234,222,.09);

  --ff-display: 'Prata', 'Times New Roman', Georgia, serif;
  --ff-body:    'Jost', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --ff-script:  'Yellowtail', 'Segoe Script', cursive;

  --wrap:       1180px;
  --nav-h:      78px;

  --lift:       0 18px 44px rgba(0,0,0,.45);
  --lift-soft:  0 8px 24px rgba(0,0,0,.3);
}

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

html{
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--nav-h) + 24px);
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text-2);
  font-family:var(--ff-body);
  font-weight:300;
  font-size:17px;
  line-height:1.74;
  letter-spacing:.01em;
  overflow-x:hidden;
}

img{ display:block; max-width:100%; height:auto; }

h1,h2,h3,h4{
  font-family:var(--ff-display);
  font-weight:400;
  line-height:1.14;
  margin:0;
  color:var(--text);
  letter-spacing:.005em;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:var(--brass-lt); text-decoration:none; }

ul{ margin:0; padding:0; list-style:none; }

button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

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

::selection{ background:var(--brass); color:var(--bg-3); }


/* ==========================================================================
   02  GRAIN + UTILITIES
   ========================================================================== */

/* A fine tooth of noise so the flat walnut reads as a surface rather than
   a fill. Overlay rather than multiply — on a dark base, multiply would
   only ever darken and the texture would disappear. Sits under the navbar
   (z 120) and the lightbox (z 200) so those stay clean. */
body::before{
  content:'';
  position:fixed;
  inset:0;
  z-index:2;
  pointer-events:none;
  opacity:.4;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

.wrap{
  width:100%;
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:26px;
  position:relative;
}
.wrap--narrow{ max-width:820px; }

/* Deliberately uneven vertical rhythm — equal padding everywhere is the
   fastest way to make a page look machine-set. */
.section{ padding:104px 0; position:relative; }
.section--tall{ padding:136px 0; }
.section--tight{ padding:68px 0; }
.section--raised{ background:var(--bg-2); }

.eyebrow{
  display:block;
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--brass-lt);
  margin-bottom:20px;
}
.eyebrow--sage{ color:var(--sage-deep); }
.eyebrow--light{ color:var(--brass-soft); }

.h-xl{ font-size:clamp(38px,5.4vw,66px); }
.h-lg{ font-size:clamp(31px,4vw,48px); }
.h-md{ font-size:clamp(24px,2.6vw,32px); }

.lede{
  font-size:clamp(18px,1.6vw,21px);
  line-height:1.72;
  color:var(--text-2);
}

.muted{ color:var(--text-3); }

/* Handwritten accent. Used four or five times on the whole site — any
   more and it stops reading as a human aside. */
.script{
  font-family:var(--ff-script);
  font-weight:400;
  color:var(--brass-lt);
  letter-spacing:.01em;
  line-height:1.5;
}

/* Thin brass rule under the navbar and above section headings. */
.rule-line{
  height:2px;
  background:linear-gradient(90deg,
    transparent 0,
    var(--brass) 14%,
    var(--brass) 86%,
    transparent 100%);
  opacity:.55;
}
.rule-line--short{
  width:96px;
  margin-bottom:26px;
  background:var(--brass);
  opacity:.9;
}

.arrow-link{
  display:inline-block;
  font-size:13px;
  font-weight:500;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--brass-lt);
  border-bottom:1px solid rgba(227,187,117,.35);
  padding-bottom:4px;
  transition:color .25s ease, border-color .25s ease;
}
.arrow-link:hover{ color:var(--text); border-color:var(--text); }
.arrow-link--light{ color:var(--brass-soft); border-color:rgba(240,214,166,.4); }
.arrow-link--light:hover{ color:var(--text); border-color:var(--text); }

/* Photos set down like prints on a table rather than snapped to a grid */
.tilt-l{ transform:rotate(-1.3deg); }
.tilt-r{ transform:rotate(1.1deg); }

.reveal{ opacity:1; }
.js .reveal{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,.8,.3,1);
}
.js .reveal.is-visible{ opacity:1; transform:none; }
.js .reveal[data-delay="1"]{ transition-delay:.09s; }
.js .reveal[data-delay="2"]{ transition-delay:.18s; }
.js .reveal[data-delay="3"]{ transition-delay:.27s; }

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .js .reveal{ opacity:1; transform:none; transition:none; }
  *{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
}


/* ==========================================================================
   03  MUSICAL ORNAMENTS
   The sprite lives at the top of every page's <body>. Anything using it
   is decorative only — aria-hidden, never carrying meaning.
   ========================================================================== */

.ms-sprite{ position:absolute; width:0; height:0; overflow:hidden; }

/* Each <svg class="ms"> carries width/height attributes matching its
   symbol's viewBox, which gives it an intrinsic ratio. height:auto here
   then lets any width below derive the correct height — without it the
   SVG falls back to the 150px default and every note stretches. */
.ms{
  display:block;
  height:auto;
  fill:currentColor;
  color:var(--text);
}

/* Ambient notes behind content. Low opacity, off-grid angles — printing
   on the surface, not icons. */
.ms-float{
  position:absolute;
  z-index:0;
  pointer-events:none;
  color:var(--text);
  opacity:.06;
}
.ms-float--brass{ color:var(--brass); opacity:.13; }
.ms-float--paper{ color:var(--text); opacity:.07; }
.ms-float--sage{ color:var(--sage-deep); opacity:.15; }

/* Named resting places. Every angle is off-square on purpose. */
.ms-float--hero    { right:6%;    top:12%;    width:clamp(96px,13vw,178px); transform:rotate(7deg); }
.ms-float--tl      { left:-38px;  top:-26px;  width:74px;  transform:rotate(-15deg); }
.ms-float--tr      { right:-16px; top:-34px;  width:96px;  transform:rotate(11deg); }
.ms-float--corner-l{ left:-30px;  bottom:-20px; width:88px; transform:rotate(-9deg); }
.ms-float--corner-r{ right:-22px; bottom:-28px; width:112px; transform:rotate(-7deg); }
.ms-float--band    { right:3%;    top:50%;    width:clamp(90px,11vw,150px); transform:translateY(-50%) rotate(-6deg); }
.ms-float--center  { left:50%;    top:8%;     width:130px; transform:translateX(-50%) rotate(4deg); }

/* Centred staff-and-notes ornament used between sections */
.ornament{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:8px 0;
}
.ornament::before,
.ornament::after{
  content:'';
  height:1px;
  flex:0 1 130px;
  background:linear-gradient(to right, transparent, var(--line), transparent);
}
.ornament .ms{ width:150px; height:auto; color:var(--brass); opacity:.7; }
.ornament--light .ms{ color:var(--brass-soft); }

/* Small note tucked beside a heading */
.ms-tag{
  display:inline-block;
  width:14px;
  vertical-align:baseline;
  color:var(--brass);
  opacity:.9;
  margin-right:10px;
}
.ms-tag--lg{ width:20px; }


/* ==========================================================================
   04  BUTTONS
   ========================================================================== */

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:15px 30px;
  font-family:var(--ff-body);
  font-size:12px;
  font-weight:500;
  letter-spacing:.24em;
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid transparent;
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease;
}
.btn:active{ transform:translateY(1px); }

.btn--brass{
  background:var(--brass);
  color:#231e18;
  border-color:var(--brass);
  font-weight:600;
  box-shadow:0 6px 20px rgba(212,160,74,.24);
}
.btn--brass:hover{
  background:var(--brass-soft);
  border-color:var(--brass-soft);
  color:#231e18;
  box-shadow:0 10px 28px rgba(212,160,74,.34);
}

.btn--outline{
  border-color:rgba(241,234,222,.38);
  color:var(--text);
}
.btn--outline:hover{ border-color:var(--text); background:rgba(241,234,222,.09); }

.btn--ghost-light{
  border-color:rgba(241,234,222,.45);
  color:var(--text);
}
.btn--ghost-light:hover{ border-color:var(--text); background:rgba(241,234,222,.1); }

.btn--block{ display:flex; width:100%; }

.btn-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  align-items:center;
}


/* ==========================================================================
   05  NAVBAR — markup is byte-identical on all five pages
   ========================================================================== */

.nav{
  position:fixed;
  inset:0 0 auto 0;
  z-index:120;
  background:rgba(32,28,25,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.nav.is-stuck{ box-shadow:0 2px 24px rgba(0,0,0,.35); }

.page-home .nav{ background:transparent; backdrop-filter:none; border-bottom-color:transparent; }
.page-home .nav .rule-line{ opacity:0; transition:opacity .35s ease; }
.page-home .nav.is-stuck{
  background:rgba(32,28,25,.92);
  backdrop-filter:blur(10px);
  border-bottom-color:var(--line-soft);
}
.page-home .nav.is-stuck .rule-line{ opacity:.55; }

.nav__inner{
  height:var(--nav-h);
  max-width:var(--wrap);
  margin-inline:auto;
  padding-inline:26px;
  display:flex;
  align-items:center;
  gap:30px;
}

.wordmark{ display:flex; align-items:center; gap:11px; line-height:1; color:var(--text); }
.wordmark .ms{ width:15px; height:auto; color:var(--brass); flex:none; }
.wordmark__text{ display:block; }
.wordmark__main{
  display:block;
  font-family:var(--ff-display);
  font-size:21px;
  letter-spacing:.06em;
}
.wordmark__sub{
  display:block;
  margin-top:5px;
  font-size:9px;
  font-weight:500;
  letter-spacing:.36em;
  text-transform:uppercase;
  color:var(--brass);
}

.nav__links{
  display:flex;
  align-items:center;
  gap:32px;
  margin-left:auto;
}
.nav__links a{
  position:relative;
  padding:6px 0;
  font-size:12px;
  font-weight:400;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--text-2);
  transition:color .25s ease;
}
.nav__links a::after{
  content:'';
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--brass);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.8,.3,1);
}
.nav__links a:hover{ color:var(--text); }
.nav__links a:hover::after{ transform:scaleX(1); }
.nav__links a.is-active{ color:var(--text); }
.nav__links a.is-active::after{ transform:scaleX(1); }

.nav__order{ margin-left:6px; padding:13px 24px; }

.nav__burger{
  display:none;
  width:44px; height:44px;
  margin-left:auto;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:5px;
}
.nav__burger span{
  display:block;
  width:23px; height:1.5px;
  background:var(--text);
  transition:transform .3s ease, opacity .2s ease;
}
.nav__burger.is-open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.nav__burger.is-open span:nth-child(2){ opacity:0; }
.nav__burger.is-open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

.mobile-nav{
  position:fixed;
  inset:calc(var(--nav-h) + 8px) 0 0 0;
  z-index:110;
  background:var(--bg-3);
  padding:34px 26px 44px;
  overflow-y:auto;
  opacity:0;
  visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
}
.mobile-nav.is-open{ opacity:1; visibility:visible; transform:none; }
.mobile-nav a.mobile-nav__link{
  display:block;
  padding:17px 0;
  border-bottom:1px solid var(--line-soft);
  font-family:var(--ff-display);
  font-size:23px;
  color:var(--text);
}
.mobile-nav a.mobile-nav__link.is-active{ color:var(--brass-lt); }
.mobile-nav .btn{ margin-top:28px; }
.mobile-nav__meta{
  margin-top:30px;
  font-size:13px;
  letter-spacing:.04em;
  color:var(--text-3);
}
.mobile-nav__meta a{ color:var(--text-2); }

body.is-locked{ overflow:hidden; }


/* ==========================================================================
   06  FLOATING CALL BUTTON — mobile only
   On a phone the ORDER NOW button lives inside the hamburger, so this is
   the one CTA that is always on screen. Brass so it carries against the
   dark page.
   ========================================================================== */

.float-call{
  display:none;
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:130;
  width:58px;
  height:58px;
  border-radius:50%;
  background:var(--brass);
  color:#231e18;
  align-items:center;
  justify-content:center;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  animation:callRing 3.2s ease-in-out infinite;
  transition:transform .2s ease, background .2s ease;
}
.float-call:hover,
.float-call:focus-visible{ transform:scale(1.07); background:var(--brass-soft); }
.float-call svg{ width:24px; height:24px; display:block; }

/* Get out of the way while the mobile menu or the lightbox is open —
   both of those set .is-locked on <body>. */
body.is-locked .float-call{ opacity:0; pointer-events:none; }

@keyframes callRing{
  0%,100%{ box-shadow:0 10px 26px rgba(0,0,0,.5), 0 0 0 0 rgba(212,160,74,.45); }
  55%    { box-shadow:0 10px 30px rgba(0,0,0,.55), 0 0 0 13px rgba(212,160,74,0); }
}

@media (max-width:900px){
  .float-call{ display:flex; }
}
@media (prefers-reduced-motion:reduce){
  .float-call{ animation:none; }
}


/* ==========================================================================
   07  FOOTER — markup is byte-identical on all five pages
   ========================================================================== */

.footer{ background:var(--bg-3); color:var(--text-2); position:relative; overflow:hidden; }
.footer__rule{
  height:3px;
  background:linear-gradient(90deg,
    var(--brass-soft) 0,
    var(--brass) 45%,
    var(--brass-lt) 100%);
  opacity:.85;
}

/* Everything the old visit strip used to repeat now lives here: hours,
   address, phone, socials and the order CTA, on one bar. */
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr .85fr 1fr .95fr;
  gap:44px;
  padding:74px 0 56px;
  position:relative;
  z-index:1;
}
.footer h4{
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:20px;
}
.footer .wordmark{ color:var(--text); }
.footer .wordmark .ms{ color:var(--brass); width:18px; }
.footer .wordmark__main{ font-size:26px; }
.footer__tag{
  margin-top:18px;
  font-family:var(--ff-script);
  font-size:21px;
  color:var(--brass-lt);
  max-width:22ch;
  line-height:1.5;
}
.footer ul li{ margin-bottom:9px; font-size:15px; color:var(--text-2); }
.footer ul li a{ color:var(--text-2); transition:color .2s ease; }
.footer ul li a:hover{ color:var(--brass-lt); }
.footer__order{ margin-top:26px; }
.footer__note{
  margin-top:14px;
  font-size:13px;
  color:var(--text-3);
  letter-spacing:.03em;
  max-width:30ch;
}
.footer__closed{ color:var(--text-3) !important; }

.footer__bar{
  border-top:1px solid var(--line-soft);
  padding:22px 0 30px;
  display:flex;
  flex-wrap:wrap;
  gap:10px 26px;
  justify-content:space-between;
  font-size:12.5px;
  letter-spacing:.06em;
  color:var(--text-3);
  position:relative;
  z-index:1;
}

.footer .ms-float{ color:var(--text); opacity:.05; }


/* ==========================================================================
   08  HERO + PAGE HEADERS
   ========================================================================== */

.hero{
  position:relative;
  min-height:min(92vh,880px);
  display:flex;
  align-items:flex-end;
  padding:calc(var(--nav-h) + 80px) 0 88px;
  overflow:hidden;
  background:var(--bg-3);
}

/* Just enough blur to soften the room and let the type sit on top —
   you should still be able to read the space. Scaled slightly so the
   blur never feathers past the edges of the section. */
/* Framed at 62% rather than centre: the ceiling is the brightest and
   least interesting part of this photo, and dropping the window puts the
   tables and the people in frame instead. A touch of sepia pulls the
   slightly cool original toward the walnut the rest of the page sits on. */
.hero__img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  object-position:center 62%;
  filter:blur(3px) saturate(.9) brightness(.8) sepia(.12);
  transform:scale(1.04);
}
/* Three layers, painted top-down as listed: a warm glow behind the type,
   a vignette to stop the corners going grey, then the scrim that carries
   the whole thing into the page colour at the bottom edge. */
.hero::after{
  content:'';
  position:absolute;
  inset:0;
  background:
    radial-gradient(120% 90% at 76% 20%, rgba(212,160,74,.15), transparent 62%),
    radial-gradient(ellipse 78% 78% at 50% 50%, rgba(24,20,17,0) 30%, rgba(24,20,17,.55) 100%),
    linear-gradient(to bottom,
      rgba(28,24,21,.58) 0%,
      rgba(28,24,21,.72) 46%,
      rgba(28,24,21,.93) 100%);
}
.hero__inner{ position:relative; z-index:3; width:100%; }

.hero__name{
  font-size:clamp(34px,7vw,86px);
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:1.06;
  margin-right:-.16em;
  color:var(--text);
  text-shadow:0 3px 30px rgba(0,0,0,.6);
}
.hero__amp{
  display:block;
  font-size:clamp(15px,2.1vw,25px);
  letter-spacing:.42em;
  color:var(--brass-lt);
  margin:20px 0 22px;
  margin-right:-.42em;
  text-transform:uppercase;
  font-weight:500;
}
.hero__tag{
  font-family:var(--ff-script);
  font-size:clamp(26px,3.4vw,42px);
  color:var(--brass-soft);
  max-width:20ch;
  margin-bottom:36px;
  line-height:1.35;
  text-shadow:0 2px 20px rgba(0,0,0,.5);
}
.hero__buttons{ margin-bottom:34px; }
.hero__meta{
  display:flex;
  flex-wrap:wrap;
  gap:8px 20px;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-2);
}
.hero__meta span::after{ content:'·'; margin-left:20px; color:var(--brass); }
.hero__meta span:last-child::after{ content:''; margin:0; }

/* z-index 2 lifts the clef above the scrim (::after, z auto) but keeps it
   under the copy (.hero__inner, z 3). */
.hero .ms-float{ opacity:.12; color:var(--text); z-index:2; }

.pagehead{
  position:relative;
  padding:calc(var(--nav-h) + 86px) 0 76px;
  background:var(--bg-2);
  border-bottom:1px solid var(--line-soft);
  overflow:hidden;
}
.pagehead .lede{ margin-top:22px; max-width:56ch; }
.pagehead .wrap{ z-index:2; }


/* ==========================================================================
   09  HOME PAGE
   ========================================================================== */

.welcome__grid{
  display:grid;
  grid-template-columns:.96fr 1.2fr;
  gap:78px;
  align-items:center;
}
.welcome__figure{ position:relative; margin-top:-48px; }
.welcome__figure img{
  width:100%;
  aspect-ratio:4/5;
  object-fit:cover;
  object-position:center 55%;
  box-shadow:var(--lift);
}
.welcome__figure figcaption{
  margin-top:16px;
  font-family:var(--ff-script);
  font-size:19px;
  color:var(--brass-lt);
  text-align:right;
  transform:rotate(-.8deg);
}

.teaser__head{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:52px;
}
.dish-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:26px;
}
.dish{
  background:var(--bg);
  border:1px solid var(--line-soft);
  display:flex;
  flex-direction:column;
  transition:border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.dish:hover{ border-color:rgba(212,160,74,.55); transform:translateY(-5px); box-shadow:var(--lift); }
.dish__media{ position:relative; overflow:hidden; aspect-ratio:4/3; background:var(--bg-4); }
.dish__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .7s cubic-bezier(.22,.8,.3,1);
}
.dish:hover .dish__media img{ transform:scale(1.05); }
.dish__body{ padding:24px 24px 28px; }
.dish__name{ font-size:21px; margin-bottom:10px; }
.dish__desc{ font-size:14.5px; line-height:1.66; color:var(--text-3); margin:0; }

/* Placeholder tile for a photo the restaurant still needs to shoot.
   The tile shows only "Photo Needed"; which shot belongs there is spelled
   out in an HTML comment directly above each one. */
.dish__media--todo,
.shot-todo{
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:24px;
  background:repeating-linear-gradient(-45deg, var(--bg-4) 0 10px, var(--bg-2) 10px 20px);
  border:1px dashed rgba(212,160,74,.5);
  color:var(--text-3);
}
.shot-todo{ aspect-ratio:4/3; }
.shot-todo__label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.26em;
  text-transform:uppercase;
  color:var(--brass-lt);
}

.teaser__foot{
  margin-top:52px;
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  align-items:center;
  justify-content:center;
}

/* --- the bar: the one bright band on the site --- */
.band-bar{
  background:var(--sage);
  color:var(--sage-deep);
  position:relative;
  overflow:hidden;
}
.band-bar__grid{
  display:grid;
  grid-template-columns:1fr 1.25fr;
  gap:60px;
  align-items:center;
  padding:92px 0;
  position:relative;
  z-index:1;
}
.band-bar h2,
.band-bar p{ color:var(--sage-deep); }
.band-bar__note{
  margin-top:26px;
  padding-top:22px;
  border-top:1px solid rgba(28,35,24,.3);
  font-size:14.5px;
}
.band-bar__note strong{ font-weight:600; }
.band-bar__figure img{
  width:100%;
  aspect-ratio:2.6/1;
  object-fit:cover;
  box-shadow:0 16px 38px rgba(28,35,24,.32);
}
.band-bar__figure figcaption{
  margin-top:14px;
  font-family:var(--ff-script);
  font-size:19px;
  color:var(--sage-deep);
  opacity:.85;
}
.band-bar .shot-todo{
  background:repeating-linear-gradient(-45deg, rgba(28,35,24,.12) 0 10px, rgba(28,35,24,.05) 10px 20px);
  border-color:rgba(28,35,24,.45);
  color:var(--sage-deep);
}
.band-bar .shot-todo__label{ color:var(--sage-deep); }

.preview-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}


/* ==========================================================================
   10  MENU PAGE
   ========================================================================== */

/* Category tabs. One panel visible at a time — with ~100 items across ten
   categories, a single scrolling list is unreadable. */
.menu-tabs-bar{
  position:sticky;
  top:calc(var(--nav-h) + 8px);
  z-index:60;
  background:rgba(32,28,25,.96);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.menu-tabs{
  display:flex;
  gap:2px;
  overflow-x:auto;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.menu-tabs::-webkit-scrollbar{ display:none; }

.menu-tab{
  position:relative;
  flex:none;
  scroll-snap-align:start;
  padding:19px 17px 17px;
  font-size:11.5px;
  letter-spacing:.19em;
  text-transform:uppercase;
  color:var(--text-3);
  white-space:nowrap;
  transition:color .22s ease;
}
.menu-tab::after{
  content:'';
  position:absolute;
  left:17px; right:17px; bottom:0;
  height:2px;
  background:var(--brass);
  transform:scaleX(0);
  transition:transform .28s cubic-bezier(.22,.8,.3,1);
}
.menu-tab:hover{ color:var(--text); }
.menu-tab.is-active{ color:var(--brass-lt); }
.menu-tab.is-active::after{ transform:scaleX(1); }

.menu-panels{ padding:62px 0 8px; }
.menu-panel[hidden]{ display:none; }
.menu-panel__head{ margin-bottom:38px; max-width:60ch; }
.menu-panel__head h2{ margin-bottom:12px; }
.menu-panel__head p{ color:var(--text-3); font-size:16px; margin:0; }

/* Down-then-across, the way a printed menu reads — not a grid flowing
   left to right. */
.item-list{
  columns:3;
  column-gap:56px;
}
.item{
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  padding:12px 2px;
  border-bottom:1px solid var(--line-soft);
  font-size:16.5px;
  line-height:1.5;
  color:var(--text);
  letter-spacing:.01em;
}
.item .tag{ margin-left:9px; vertical-align:middle; }

.tag{
  font-family:var(--ff-body);
  font-size:9.5px;
  font-weight:600;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--brass-lt);
  border:1px solid rgba(212,160,74,.45);
  padding:3px 8px 2px;
  white-space:nowrap;
}

.menu-cta{
  background:var(--bg-3);
  border:1px solid rgba(212,160,74,.28);
  color:var(--text-2);
  padding:48px 46px;
  display:flex;
  flex-wrap:wrap;
  gap:28px;
  align-items:center;
  justify-content:space-between;
  position:relative;
  overflow:hidden;
}
.menu-cta > *{ position:relative; z-index:1; }
.menu-cta h3{ font-size:27px; margin-bottom:8px; color:var(--text); }
.menu-cta p{ color:var(--text-3); font-size:15px; max-width:46ch; margin:0; }
.menu-cta .ms-float{ color:var(--brass); opacity:.09; }

.notice{
  border-left:2px solid var(--brass);
  padding:4px 0 4px 22px;
  color:var(--text-3);
  font-size:15px;
  max-width:62ch;
}

.course-fig{ margin:0 0 44px; }
.course-fig img{
  width:100%;
  aspect-ratio:16/6;
  object-fit:cover;
  object-position:center 55%;
  box-shadow:var(--lift-soft);
}
.course-fig figcaption{
  margin-top:13px;
  font-family:var(--ff-script);
  font-size:18px;
  color:var(--brass-lt);
}


/* ==========================================================================
   11  OUR STORY PAGE
   ========================================================================== */

.story__grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:76px;
  align-items:start;
}
.story__figure img{ width:100%; aspect-ratio:3/4; object-fit:cover; box-shadow:var(--lift); }
.story__figure figcaption{
  margin-top:15px;
  font-family:var(--ff-script);
  font-size:19px;
  color:var(--brass-lt);
}

.photo-band{ margin:0; position:relative; }
.photo-band img{
  width:100%;
  aspect-ratio:16/6.5;
  object-fit:cover;
  object-position:center 45%;
}
.photo-band figcaption{
  padding-top:14px;
  font-size:12px;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--text-3);
}

.pullquote{
  text-align:center;
  padding:104px 0;
  background:var(--bg-3);
  border-block:1px solid var(--line-soft);
  position:relative;
  overflow:hidden;
}
.pullquote > *{ position:relative; z-index:1; }
.pullquote blockquote{
  margin:0 auto;
  max-width:22ch;
  font-family:var(--ff-display);
  font-size:clamp(29px,4.4vw,52px);
  line-height:1.26;
  color:var(--text);
}
.pullquote cite{
  display:block;
  margin-top:30px;
  font-family:var(--ff-body);
  font-style:normal;
  font-size:11px;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--brass);
}
.pullquote .ms-float{ color:var(--brass); opacity:.1; }

.pillars{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:52px;
}
.pillar__num{
  font-family:var(--ff-display);
  font-size:15px;
  color:var(--brass);
  letter-spacing:.2em;
  display:block;
  margin-bottom:18px;
}
.pillar h3{ font-size:24px; margin-bottom:14px; }
.pillar p{ font-size:15.5px; color:var(--text-3); margin:0; }

.rank-strip{
  display:flex;
  flex-wrap:wrap;
  gap:18px 56px;
  align-items:center;
  justify-content:center;
  padding:40px 0;
  border-block:1px solid var(--line-soft);
  text-align:center;
}
.rank-strip div{ font-size:12px; letter-spacing:.24em; text-transform:uppercase; color:var(--text-3); }
.rank-strip strong{
  display:block;
  font-family:var(--ff-display);
  font-size:26px;
  font-weight:400;
  letter-spacing:.02em;
  color:var(--brass-lt);
  margin-bottom:7px;
}


/* ==========================================================================
   12  GALLERY + LIGHTBOX
   ========================================================================== */

/* minmax(0,1fr), not 1fr: the tiles that span two columns carry text
   (the placeholder cards), and their min-content width would otherwise
   stretch one track and throw the whole grid out of true. */
.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:20px;
}

.gitem{
  position:relative;
  display:block;
  padding:0;
  width:100%;
  aspect-ratio:1/1;
  overflow:hidden;
  background:var(--bg-4);
  border:1px solid var(--line-soft);
}
/* The mosaic only stays gapless if every tile resolves to a whole number
   of base cells. The square .gitem is the unit; the feature tile is
   exactly 2x2 of them and the banner is one full row. */
.gitem--feature{ grid-column:span 2; grid-row:span 2; aspect-ratio:auto; }
.gitem--banner { grid-column:1 / -1;  aspect-ratio:3/1; }
.gallery-grid .shot-todo{ aspect-ratio:1/1; }
.gallery-grid .shot-todo--banner{ grid-column:1 / -1; aspect-ratio:3.2/1; }

.gitem img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.22,.8,.3,1);
}
.gitem::after{
  content:'';
  position:absolute; inset:0;
  background:linear-gradient(to top, rgba(20,17,14,.7), transparent 55%);
  opacity:0;
  transition:opacity .35s ease;
}
.gitem:hover img{ transform:scale(1.06); }
.gitem:hover::after,
.gitem:focus-visible::after{ opacity:1; }
.gitem__cap{
  position:absolute;
  left:18px; right:18px; bottom:16px;
  z-index:2;
  text-align:left;
  font-size:11.5px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--text);
  opacity:0;
  transform:translateY(8px);
  transition:opacity .35s ease, transform .35s ease;
}
.gitem:hover .gitem__cap,
.gitem:focus-visible .gitem__cap{ opacity:1; transform:none; }

.lightbox{
  position:fixed;
  inset:0;
  z-index:200;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:60px 22px 86px;
  background:rgba(18,15,13,.97);
  opacity:0;
  visibility:hidden;
  transition:opacity .3s ease, visibility .3s;
}
.lightbox.is-open{ opacity:1; visibility:visible; }
.lightbox__img{
  max-width:100%;
  max-height:100%;
  width:auto;
  object-fit:contain;
  box-shadow:0 24px 60px rgba(0,0,0,.6);
}
.lightbox__cap{
  position:absolute;
  left:0; right:0; bottom:34px;
  text-align:center;
  font-size:12px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--text-3);
  padding-inline:22px;
}
.lightbox__btn{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  width:56px; height:56px;
  display:flex; align-items:center; justify-content:center;
  font-size:34px;
  line-height:1;
  color:var(--text);
  border:1px solid var(--line);
  background:rgba(42,38,34,.7);
  transition:background .25s ease, border-color .25s ease, color .25s ease;
}
.lightbox__btn:hover{ background:var(--brass); color:#231e18; border-color:var(--brass); }
.lightbox__btn--prev{ left:20px; }
.lightbox__btn--next{ right:20px; }
.lightbox__close{
  position:absolute;
  top:20px; right:20px;
  width:48px; height:48px;
  display:flex; align-items:center; justify-content:center;
  font-size:30px;
  color:var(--text);
  border:1px solid var(--line);
  transition:background .25s ease, color .25s ease, border-color .25s ease;
}
.lightbox__close:hover{ background:var(--brass); color:#231e18; border-color:var(--brass); }
.lightbox__count{
  position:absolute;
  top:30px; left:26px;
  font-size:12px;
  letter-spacing:.24em;
  color:var(--text-3);
}


/* ==========================================================================
   13  VISIT PAGE
   ========================================================================== */

.visit__grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:64px;
  align-items:start;
}

.hours-table{ width:100%; border-collapse:collapse; }
.hours-table th{
  text-align:left;
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:var(--brass);
  padding-bottom:16px;
  border-bottom:1px solid var(--line);
}
.hours-table td{
  padding:15px 0;
  border-bottom:1px solid var(--line-soft);
  font-size:16px;
  color:var(--text-2);
  letter-spacing:.03em;
}
.hours-table td:last-child{ text-align:right; white-space:nowrap; }
.hours-table tr.is-closed td{ color:var(--text-3); }
.hours-table tr.is-today td{ color:var(--text); font-weight:500; }
.hours-table tr.is-today td:first-child::before{
  content:'';
  display:inline-block;
  width:6px; height:6px;
  margin-right:11px;
  vertical-align:middle;
  background:var(--brass);
  border-radius:50%;
}

.info-block{ margin-bottom:44px; }
.info-block:last-child{ margin-bottom:0; }
.info-block h3{
  font-family:var(--ff-body);
  font-size:11px;
  font-weight:500;
  letter-spacing:.3em;
  text-transform:uppercase;
  color:var(--brass);
  margin-bottom:16px;
}
.info-block address{
  font-style:normal;
  font-size:19px;
  line-height:1.62;
  color:var(--text);
}
.info-block__phone{
  font-family:var(--ff-display);
  font-size:clamp(26px,3.2vw,34px);
  color:var(--text);
  letter-spacing:.02em;
}
.info-block__phone:hover{ color:var(--brass-lt); }

.map-frame{
  width:100%;
  aspect-ratio:16/10;
  border:1px solid var(--line);
  filter:grayscale(.9) invert(.9) contrast(.88) sepia(.25) brightness(.95);
  transition:filter .4s ease;
}
.map-frame:hover{ filter:grayscale(.55) invert(.9) contrast(.9) sepia(.15) brightness(1); }

.service-cards{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.service-card{
  background:var(--bg-2);
  border:1px solid var(--line-soft);
  padding:32px 28px;
  box-shadow:var(--lift-soft);
}
.service-card h3{ font-size:20px; margin-bottom:12px; }
.service-card p{ font-size:14.5px; color:var(--text-3); margin:0; }
.service-card--off{ opacity:.62; box-shadow:none; background:transparent; }
.service-card--off h3{ text-decoration:line-through; text-decoration-color:var(--brass); }


/* ==========================================================================
   14  RESPONSIVE
   ========================================================================== */

@media (max-width:1080px){
  .nav__links{ gap:24px; }
  .nav__links a{ font-size:11px; letter-spacing:.15em; }
  .dish-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .footer__grid{ grid-template-columns:1fr 1fr; gap:44px; }
}

@media (max-width:900px){
  :root{ --nav-h:70px; }
  .section{ padding:76px 0; }
  .section--tall{ padding:88px 0; }

  .nav__links,
  .nav__order{ display:none; }
  .nav__burger{ display:flex; }

  .welcome__grid,
  .band-bar__grid,
  .story__grid,
  .visit__grid{ grid-template-columns:1fr; gap:46px; }

  .band-bar__grid{ padding:70px 0; }
  .welcome__figure{ order:-1; margin-top:0; }
  .pillars{ grid-template-columns:1fr; gap:40px; }
  .item-list{ columns:2; column-gap:40px; }
  .service-cards{ grid-template-columns:1fr; }
  .menu-cta{ padding:36px 28px; }
  .pagehead{ padding:calc(var(--nav-h) + 62px) 0 58px; }

  .gallery-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  /* At two columns the feature tile spans the full width, so there are no
     siblings left to give its two rows a height and it collapses. Drop the
     row span and let its own ratio size it instead. */
  .gitem--feature{ grid-column:1 / -1; grid-row:auto; aspect-ratio:1/1; }

  /* Ambient notes get in the way once columns collapse */
  .ms-float{ display:none; }
  .hero .ms-float{ display:block; }
}

@media (max-width:620px){
  body{ font-size:16px; }
  .wrap{ padding-inline:20px; }
  .section{ padding:62px 0; }
  .section--tall{ padding:70px 0; }
  .hero{ min-height:auto; padding:calc(var(--nav-h) + 96px) 0 66px; }
  .hero__buttons{ display:block; }
  .hero__buttons .btn{ width:100%; }
  .hero__buttons .btn + .btn{ margin-top:12px; }
  .dish-grid,
  .preview-grid{ grid-template-columns:1fr; }
  .footer__grid{ grid-template-columns:1fr; gap:38px; padding:56px 0 40px; }
  .lightbox{ padding:56px 12px 78px; }
  .lightbox__btn{ width:46px; height:46px; font-size:28px; }
  .lightbox__btn--prev{ left:8px; }
  .lightbox__btn--next{ right:8px; }
  .menu-panels{ padding:44px 0 4px; }
  .item-list{ columns:1; }
  .menu-tab{ padding:16px 13px 14px; font-size:11px; letter-spacing:.15em; }
  .menu-tab::after{ left:13px; right:13px; }
  .teaser__head{ flex-direction:column; align-items:flex-start; }

  .course-fig img{ aspect-ratio:4/3; }
  .photo-band img{ aspect-ratio:4/3; }
  .band-bar__figure img{ aspect-ratio:16/10; }
  .rank-strip{ gap:26px; }
  .rank-strip div{ width:100%; }
  .ornament::before,
  .ornament::after{ flex-basis:40px; }
  .ornament .ms{ width:110px; }

  /* Now that the tiles carry only a short label they sit happily in the
     grid as squares; only the banner still spans the full width. */
  .gitem--banner{ aspect-ratio:2/1; }
  .gallery-grid .shot-todo--banner{ aspect-ratio:2.4/1; }
  .shot-todo{ padding:14px; }
  .shot-todo__label{ font-size:10px; letter-spacing:.2em; }

  /* Keep the last row clear of the floating call button */
  .footer__bar{ padding-bottom:76px; }
}