/* =============================================================
   OLDESTONE STEAKHOUSE
   15 South Main Street, New Hope, Pennsylvania
   -------------------------------------------------------------
   1.  Tokens
   2.  Reset & base
   3.  Typography
   4.  Ornament & rules
   5.  Buttons
   6.  Layout primitives
   7.  Header & navigation
   8.  Hero
   9.  Sections & editorial blocks
   10. Menu typography
   11. Cards, gallery, lightbox
   12. Forms
   13. Footer
   14. Motion & reveal
   15. Responsive
   ============================================================= */

/* ---------- 1. Tokens ---------------------------------------- */
:root {
  /* Surface. Very slightly warm rather than neutral black, which reads
     as candlelight rather than screen. */
  --ink:        #0a0908;
  --ink-2:      #100e0d;
  --ink-3:      #171514;
  --ink-4:      #1f1c1a;

  /* Brand */
  --gold:       #c6a15b;
  --gold-lt:    #e2c58d;
  --gold-dk:    #8f7239;

  /* Text */
  --ivory:      #f2eee6;
  --ivory-dim:  #cfc9bd;
  --muted:      #98938a;

  /* Lines */
  --line:       rgba(198, 161, 91, 0.22);
  --line-soft:  rgba(242, 238, 230, 0.10);

  /* Type */
  --serif: "Cormorant Garamond", "Adobe Caslon Pro", Garamond, "Times New Roman", serif;
  --sans:  "Jost", "Futura", "Avenir Next", "Helvetica Neue", Arial, sans-serif;

  /* Rhythm */
  --gutter:  clamp(1.25rem, 5vw, 4rem);
  --measure: 68ch;
  --section: clamp(5rem, 11vw, 9.5rem);

  /* Motion */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* Gilding. Flat gold reads as a colour; a gradient reads as metal. */
  --gilt: linear-gradient(100deg, #8f7239 0%, #c6a15b 22%, #f0dcae 46%, #c6a15b 68%, #8f7239 100%);
  --gilt-fade: linear-gradient(90deg, transparent, rgba(198,161,91,.5) 22%, #e2c58d 50%, rgba(198,161,91,.5) 78%, transparent);

  /* The fan sconce on the dining room walls, drawn as an ornament */
  --fan: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 28 16'%3E%3Cg fill='none' stroke='%23c6a15b' stroke-width='1' stroke-linecap='round'%3E%3Cpath d='M14 15.2V3'/%3E%3Cpath d='M14 15.2 8.6 4.6'/%3E%3Cpath d='M14 15.2 19.4 4.6'/%3E%3Cpath d='M14 15.2 4.4 7.4'/%3E%3Cpath d='M14 15.2 23.6 7.4'/%3E%3Cpath d='M3.6 8.4a11 11 0 0 1 20.8 0'/%3E%3C/g%3E%3C/svg%3E");

  /* The Greek key fret from the dining room carpet */
  --fret: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 10'%3E%3Cpath d='M0 8.5h5v-4h5v4h5v-7h7v7h5v-4h5v4h5' fill='none' stroke='%23c6a15b' stroke-width='1'/%3E%3C/svg%3E");

  /* Gothic arch mask — two arcs meeting at a point */
  --arch: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 140' preserveAspectRatio='none'%3E%3Cpath d='M0,140 V56 A70,70 0 0 1 50,0 A70,70 0 0 1 100,56 V140 Z' fill='%23000'/%3E%3C/svg%3E");
}

/* ---------- 2. Reset & base ---------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 9.5rem;
}

/* Prose is set in the serif. The sans is kept for navigation, buttons,
   labels and anything that behaves like an interface control. */
body {
  margin: 0;
  background: var(--ink);
  color: var(--ivory-dim);
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.25rem);
  line-height: 1.7;
  letter-spacing: 0.004em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* A hairline gold frame inset from the window edge, the way the printed
   menus are bordered. Sits above everything but takes no clicks. */
body::after {
  content: "";
  position: fixed;
  inset: 13px;
  border: 1px solid rgba(198, 161, 91, 0.16);
  pointer-events: none;
  z-index: 150;
}
@media (max-width: 960px) { body::after { display: none; } }

/* A faint warm vignette so the black never reads flat */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(198, 161, 91, 0.07), transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(198, 161, 91, 0.05), transparent 60%);
}

img,
picture,
svg,
video { display: block; max-width: 100%; height: auto; }

a { color: inherit; text-decoration: none; }

button,
input,
select,
textarea { font: inherit; color: inherit; }

/* Interface type stays in the sans */
.nav a,
.btn,
.link,
.eyebrow,
.small-caps,
.card__meta,
.feature__num,
.facts__label,
.menu-group__note,
.allergen-note,
.form__note,
.field label,
.footer__base,
.footer h4,
.drawer__foot,
.action-bar a,
.quick__note,
.menu-nav a,
.hours caption,
.statement cite,
.scroll-cue,
.hero__meta,
.lightbox__caption { font-family: var(--sans); }

::selection { background: var(--gold); color: var(--ink); }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: var(--ink);
  padding: 0.75rem 1.25rem;
  font-family: var(--sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-size: 0.75rem;
}
.skip-link:focus { left: 1rem; top: 1rem; }

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- 3. Typography ------------------------------------ */
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 300;
  color: var(--ivory);
  line-height: 1.08;
  letter-spacing: 0.005em;
  margin: 0 0 0.6em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.75rem, 1.6rem + 5.2vw, 6.25rem); }
h2 { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.75rem); }
h3 { font-size: clamp(1.375rem, 1.15rem + 1vw, 1.875rem); }
h4 { font-size: clamp(1.125rem, 1.05rem + 0.4vw, 1.375rem); }

p { margin: 0 0 1.4em; max-width: var(--measure); }
p:last-child { margin-bottom: 0; }

.eyebrow {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.42em;
  text-transform: uppercase;
  color: var(--gold);
  margin: 0 0 1.5rem;
}

.lede {
  font-family: var(--serif);
  font-size: clamp(1.25rem, 1.05rem + 0.9vw, 1.75rem);
  font-weight: 300;
  line-height: 1.55;
  color: var(--ivory);
  font-style: italic;
}

.small-caps {
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}

.gold { color: var(--gold); }
.center { text-align: center; }
.center p,
.center .lede { margin-inline: auto; }

/* The logo. The supplied wordmark is 1847px wide, so it stays sharp at every
   size used here. "Steakhouse" is set in type beneath it, as on the printed
   dinner menu. */
.brand {
  display: inline-block;
  line-height: 0;
}
.brand img {
  display: block;
  width: 100%;
  height: auto;
}
.brand__sub {
  display: block;
  margin-top: 0.55em;
  font-family: var(--sans);
  font-size: var(--sub-size, 0.625rem);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.46em;
  text-indent: 0.46em;
  text-transform: uppercase;
  color: var(--gold);
  text-align: center;
}
.header__brand.brand { width: clamp(126px, 13vw, 164px); }

/* On the home page the logo is already the hero. Holding it back in the
   header until the hero has scrolled away means it is never shown twice
   at once. */
.home .header__brand {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.6s var(--ease), transform 0.6s var(--ease), visibility 0.6s;
}
.home .header.is-stuck .header__brand {
  opacity: 1;
  visibility: visible;
  transform: none;
}
.hero h1 {
  position: relative;
  margin: 0 0 2.25rem;
  isolation: isolate;
  --sub-size: clamp(0.6875rem, 0.6rem + 0.35vw, 0.9375rem);
}
.hero__logo {
  display: block;
  width: clamp(250px, 38vw, 520px);
  margin: 0 auto;
  filter: drop-shadow(0 4px 26px rgba(10, 10, 11, 0.75));
}
/* The counters of the letters are transparent, so a soft plate keeps the
   photograph from reading through them. */
.hero h1::before {
  content: "";
  position: absolute;
  inset: -30% -10%;
  z-index: -1;
  background: radial-gradient(closest-side, rgba(10, 10, 11, 0.72), rgba(10, 10, 11, 0.4) 55%, transparent 80%);
}

/* Display wordmark, set to echo the printed menus */
.wordmark {
  display: inline-block;
  text-align: center;
  font-family: var(--serif);
  line-height: 1;
  color: var(--ivory);
}
/* Mixed case, matching the awning and the ice sculpture: OldeStone */
.wordmark__name {
  display: block;
  font-size: var(--wm-size, 2rem);
  font-weight: 500;
  letter-spacing: 0.015em;
  white-space: nowrap;
}
.wordmark__sub {
  display: block;
  margin-top: 0.5em;
  font-family: var(--sans);
  font-size: calc(var(--wm-size, 2rem) * 0.2);
  font-weight: 300;
  letter-spacing: 0.52em;
  text-indent: 0.52em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ---------- 4. Ornament & rules ------------------------------ */
.rule {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 2.5rem 0;
}
/* Deco double rule: a hairline with a finer companion beneath it */
.rule::before,
.rule::after {
  content: "";
  flex: 1;
  height: 4px;
  background:
    var(--gilt-fade) 0 0 / 100% 1px no-repeat,
    var(--gilt-fade) 0 3px / 100% 1px no-repeat;
  opacity: 0.75;
}
.rule__mark {
  width: 28px;
  height: 16px;
  flex: none;
  background: var(--fan) center / contain no-repeat;
}
.rule--tight { margin: 1.5rem 0; }
.rule--short { max-width: 12rem; }
.center > .rule--short,
.rule--short.center { margin-inline: auto; }

.hairline {
  border: 0;
  height: 1px;
  background: var(--line);
  margin: 0;
}

/* ---------- 5. Buttons --------------------------------------- */
.btn {
  --btn-fg: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 2.4em;
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--btn-fg);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 0.5s var(--ease), border-color 0.5s var(--ease);
}
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  transform: translateY(101%);
  transition: transform 0.55s var(--ease);
  z-index: -1;
}
.btn > * { position: relative; z-index: 1; }
.btn:hover,
.btn:focus-visible {
  color: var(--ink);
  border-color: var(--gold);
}
.btn:hover::after,
.btn:focus-visible::after { transform: translateY(0); }

.btn--solid {
  background-color: var(--gold);
  background-image: var(--gilt);
  color: var(--ink);
  border-color: var(--gold-lt);
}
.btn--solid::after { background: var(--ivory); }
.btn--solid:hover,
.btn--solid:focus-visible { color: var(--ink); border-color: var(--ivory); }

.btn--ghost { --btn-fg: var(--ivory); }

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

/* Text link with a gold underline that draws in */
.link {
  display: inline-block;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 0.35em;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease);
}
.link:hover,
.link:focus-visible { background-size: 100% 1px; }

/* ---------- 6. Layout primitives ----------------------------- */
.wrap {
  width: min(100% - (var(--gutter) * 2), 1280px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}
.wrap--narrow { width: min(100% - (var(--gutter) * 2), 900px); }
.wrap--wide   { width: min(100% - (var(--gutter) * 2), 1560px); }

.section { padding-block: var(--section); position: relative; z-index: 1; }
.section--tight { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--dark  { background: var(--ink-2); }
/* Panels are capped with the carpet's fret rather than a plain rule */
.section--panel {
  position: relative;
  background: linear-gradient(180deg, var(--ink-2), var(--ink));
  border-bottom: 1px solid var(--line);
}
.section--panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--fret) repeat-x center / auto 10px;
  opacity: 0.3;
  pointer-events: none;
}

.grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.stack > * + * { margin-top: 1.5rem; }

/* Editorial split: image beside text */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split--reverse .split__media { order: 2; }
.split__body { max-width: 34rem; }

.figure {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
}
.figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
}
.figure:hover img { transform: scale(1.04); }

.figure--arch {
  -webkit-mask-image: var(--arch);
  mask-image: var(--arch);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.figure--tall { aspect-ratio: 3 / 4; }
.figure--portrait { aspect-ratio: 4 / 5; }
.figure--wide { aspect-ratio: 16 / 10; }
.figure--square { aspect-ratio: 1 / 1; }

/* Deco corner brackets rather than a full frame */
.framed { position: relative; }
.framed::before,
.framed::after {
  content: "";
  position: absolute;
  width: clamp(28px, 5vw, 52px);
  height: clamp(28px, 5vw, 52px);
  border: 0 solid var(--gold);
  opacity: 0.65;
  pointer-events: none;
  z-index: 2;
}
.framed::before {
  top: -1.15rem;
  left: -1.15rem;
  border-top-width: 1px;
  border-left-width: 1px;
}
.framed::after {
  right: -1.15rem;
  bottom: -1.15rem;
  border-bottom-width: 1px;
  border-right-width: 1px;
}
.framed > * { position: relative; z-index: 1; }

/* A fret band, used sparingly where a section needs a lid */
.fret-band {
  height: 10px;
  background: var(--fret) repeat-x center / auto 10px;
  opacity: 0.28;
}

/* ---------- 7. Header & navigation --------------------------- */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-block: 1.35rem;
  transition: background 0.5s var(--ease), padding 0.5s var(--ease),
              border-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease);
  border-bottom: 1px solid transparent;
}
.header.is-stuck {
  background: rgba(10, 10, 11, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--line);
  padding-block: 0.9rem;
}

.header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1.5rem;
}

.header__brand { justify-self: center; --wm-size: 1.6rem; }
.header__brand .wordmark__sub { letter-spacing: 0.4em; text-indent: 0.4em; }

.nav {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 2vw, 2.25rem);
}
.nav--right { justify-self: end; }
/* Wrapper exists only so these links can be hidden as a group on small screens */
.nav__links { display: contents; }

.nav a {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  white-space: nowrap;
  position: relative;
  padding-block: 0.4rem;
  transition: color 0.4s var(--ease);
}
.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--ease);
}
.nav a:hover { color: var(--gold); }
.nav a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav a[aria-current="page"] { color: var(--gold); }
.nav a[aria-current="page"]::after { transform: scaleX(1); }

.nav .btn {
  padding: 0.8em 1.6em;
  font-size: 0.6875rem;
  letter-spacing: 0.2em;
}
.nav .btn::after { z-index: 0; }

/* Mobile toggle */
.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  /* Flex with an explicit gap — a stretching grid would space the bars
     unpredictably and the close "X" would never meet in the middle. */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
}
.nav-toggle span {
  display: block;
  width: 24px;
  height: 1px;
  background: var(--ivory);
  transition: transform 0.4s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Slide-in drawer */
.drawer {
  position: fixed;
  inset: 0;
  z-index: 99;
  background: var(--ink);
  padding: 7rem var(--gutter) 3rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  transform: translateY(-100%);
  visibility: hidden;
  transition: transform 0.6s var(--ease), visibility 0.6s;
  overflow-y: auto;
}
.drawer.is-open { transform: translateY(0); visibility: visible; }
.drawer a {
  font-family: var(--serif);
  font-size: clamp(1.75rem, 7vw, 2.5rem);
  color: var(--ivory);
  padding-block: 0.35rem;
  border-bottom: 1px solid var(--line-soft);
}
.drawer a:last-of-type { border-bottom: 0; }
.drawer a[aria-current="page"] { color: var(--gold); }
.drawer__foot {
  margin-top: 2.5rem;
  font-family: var(--sans);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
.drawer__foot a { font-family: var(--sans); font-size: 0.75rem; border: 0; display: inline; }

body.nav-open { overflow: hidden; }

/* ---------- 8. Hero ------------------------------------------ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  isolation: isolate;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
  animation: heroDrift 26s var(--ease) forwards;
}
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.88) 0%, rgba(10,10,11,0.62) 30%, rgba(10,10,11,0.8) 72%, var(--ink) 100%),
    radial-gradient(58% 48% at 50% 46%, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.2) 55%, transparent 100%);
}
@keyframes heroDrift {
  from { transform: scale(1.12); }
  to   { transform: scale(1); }
}

.hero__inner {
  padding-block: 9rem 6rem;
  --wm-size: clamp(3rem, 1.4rem + 7vw, 8rem);
}
.hero .wordmark {
  margin-bottom: 2rem;
  text-shadow: 0 2px 40px rgba(10, 10, 11, 0.9);
}
.hero .wordmark__sub { color: var(--gold-lt); }
.hero__tagline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.125rem, 0.95rem + 0.8vw, 1.625rem);
  color: var(--ivory);
  max-width: 34ch;
  margin: 0 auto;
  text-shadow: 0 2px 24px rgba(10, 10, 11, 0.85);
}
.hero__meta {
  max-width: none;
  margin-inline: auto;
  margin-top: 2.75rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.9rem 1.5rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--muted);
}
.hero__meta span { display: inline-flex; align-items: center; gap: 1.5rem; }
.hero__meta span::after {
  content: "";
  width: 4px; height: 4px;
  transform: rotate(45deg);
  background: var(--gold);
}
.hero__meta span:last-child::after { display: none; }

/* A scroll affordance, not a button. It scrolls the page when clicked, so it
   does the thing it looks like it should do. */
.scroll-cue {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  justify-items: center;
  align-content: end;
  gap: 0.45rem;
  width: 48px;
  height: 68px;
  color: var(--gold);
  transition: opacity 0.45s var(--ease);
}
.scroll-cue:hover,
.scroll-cue:focus-visible { opacity: 0.6; }
.scroll-cue::before {
  content: "";
  width: 1px;
  height: 2.75rem;
  background: linear-gradient(180deg, transparent, var(--gold));
  animation: cue 2.6s ease-in-out infinite;
  transform-origin: bottom;
}
.scroll-cue::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 1px solid var(--gold);
  border-bottom: 1px solid var(--gold);
  transform: rotate(45deg) translate(-1px, -1px);
}
@keyframes cue {
  0%, 100% { transform: scaleY(0.3); opacity: 0.35; }
  50%      { transform: scaleY(1);   opacity: 1; }
}

/* Interior page header */
.page-head {
  position: relative;
  padding: clamp(9rem, 18vw, 14rem) 0 clamp(3.5rem, 7vw, 6rem);
  text-align: center;
  overflow: hidden;
  isolation: isolate;
  border-bottom: 1px solid var(--line);
}
.page-head__media { position: absolute; inset: 0; z-index: -2; }
.page-head__media img { width: 100%; height: 100%; object-fit: cover; }
.page-head__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.88), rgba(10,10,11,0.72) 45%, var(--ink));
}
.page-head h1 { margin-bottom: 0.35em; }
.page-head p { margin-inline: auto; }

/* ---------- 9. Sections & editorial blocks ------------------- */
.section__head {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto clamp(3rem, 6vw, 4.5rem);
}

/* Numbered feature list */
.feature {
  border-top: 1px solid var(--line);
  padding-top: 1.75rem;
}
.feature__num {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  display: block;
  margin-bottom: 1rem;
}
.feature h3 { margin-bottom: 0.5em; }
.feature p { font-size: 0.9375rem; color: var(--muted); }

/* Quote / pull statement */
.statement {
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}
.statement blockquote {
  margin: 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.5rem);
  line-height: 1.45;
  color: var(--ivory);
}
.statement cite {
  display: block;
  margin-top: 2rem;
  font-family: var(--sans);
  font-style: normal;
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Fact strip */
.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  border: 1px solid var(--line);
}
.facts__item {
  padding: clamp(1.75rem, 3vw, 2.5rem) 1.5rem;
  text-align: center;
  border-right: 1px solid var(--line);
}
.facts__item:last-child { border-right: 0; }
.facts__value {
  display: block;
  font-family: var(--serif);
  font-size: clamp(2rem, 1.5rem + 1.8vw, 3rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 0.6rem;
}
.facts__label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* Hours table */
.hours { width: 100%; border-collapse: collapse; }
.hours caption {
  text-align: left;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 1.25rem;
}
.hours th,
.hours td {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--line-soft);
  font-weight: 400;
  font-size: 1.0625rem;
  vertical-align: baseline;
}
.hours th {
  text-align: left;
  color: var(--ivory);
  letter-spacing: 0.05em;
}
.hours td { text-align: right; color: var(--muted); white-space: nowrap; }
.hours tr:last-child th,
.hours tr:last-child td { border-bottom: 0; }

/* ---------- 10. Menu typography ------------------------------ */
.menu-nav {
  position: sticky;
  top: 4.5rem;
  z-index: 40;
  background: rgba(10, 10, 11, 0.92);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
  margin-bottom: clamp(3rem, 6vw, 5rem);
}
.menu-nav ul {
  display: flex;
  gap: clamp(1.25rem, 3vw, 2.75rem);
  justify-content: center;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
  padding: 1rem 0;
}
.menu-nav a {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.4s var(--ease);
}
.menu-nav a:hover,
.menu-nav a.is-active { color: var(--gold); }

.menu-group { margin-bottom: clamp(3.5rem, 7vw, 5.5rem); }
.menu-group > h2 {
  font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.75rem);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 0.4em;
}
.menu-group__note {
  text-align: center;
  max-width: none;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 2.75rem;
}

.menu-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1.9rem;
}
.menu-list--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: clamp(2.5rem, 6vw, 5rem);
}

.menu-item__head {
  display: flex;
  align-items: baseline;
  gap: 0.85rem;
}
.menu-item__name {
  font-family: var(--serif);
  font-size: clamp(1.125rem, 1.02rem + 0.5vw, 1.375rem);
  font-weight: 400;
  letter-spacing: 0.055em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.menu-item__dots {
  flex: 1 1 auto;
  height: 1px;
  min-width: 1.5rem;
  border-bottom: 1px dotted rgba(198, 161, 91, 0.35);
  transform: translateY(-0.3em);
}
.menu-item__price {
  font-family: var(--serif);
  font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  color: var(--ivory);
  white-space: nowrap;
  letter-spacing: 0.03em;
}
.menu-item__desc {
  margin: 0.45rem 0 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.0625rem;
  line-height: 1.5;
  color: var(--muted);
  max-width: 46ch;
}

/* Simple inline list (sauces, additions) */
.inline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.75rem;
  font-family: var(--serif);
  font-size: 1.125rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--gold-lt);
}
.inline-list li { display: flex; align-items: center; gap: 1.75rem; }
.inline-list li::after {
  content: "";
  width: 4px; height: 4px;
  background: var(--gold);
  transform: rotate(45deg);
  opacity: 0.6;
}
.inline-list li:last-child::after { display: none; }

/* Compact two-column price list (sides, additions) */
.price-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  gap: 0.35rem clamp(2rem, 5vw, 4rem);
}
.price-list li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--line-soft);
}
.price-list li > span:first-child {
  font-family: var(--serif);
  font-size: 1.0625rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ivory-dim);
}
.price-list li > span:last-child {
  margin-left: auto;
  font-family: var(--serif);
  color: var(--gold);
}

.menu-panel {
  border: 1px solid var(--line);
  padding: clamp(1.75rem, 4vw, 3rem);
  background: linear-gradient(180deg, rgba(198,161,91,0.045), transparent);
}

.allergen-note {
  text-align: center;
  font-family: var(--sans);
  font-size: 0.6875rem;
  line-height: 2;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  max-width: 46rem;
  margin-inline: auto;
}

/* ---------- 10b. Quick access & mobile action bar ------------ */
/* The three things people actually arrive wanting: menu, table, gift card. */
.quick {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.quick a {
  padding: clamp(2rem, 4vw, 3.25rem) 1.25rem;
  text-align: center;
  border-left: 1px solid var(--line-soft);
  transition: background 0.6s var(--ease);
}
.quick a:first-child { border-left: 0; }
.quick a:hover,
.quick a:focus-visible { background: rgba(198, 161, 91, 0.05); }
.quick__label {
  display: block;
  font-family: var(--serif);
  font-size: clamp(1.375rem, 1.15rem + 0.9vw, 1.875rem);
  color: var(--ivory);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}
.quick a:hover .quick__label { color: var(--gold-lt); }
.quick__note {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}

/* Map. Google's embed is bright white, so it is inverted into the dark palette. */
.map {
  position: relative;
  border: 1px solid var(--line);
  background: var(--ink-3);
  aspect-ratio: 16 / 10;
  overflow: hidden;
}
.map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: invert(92%) hue-rotate(180deg) saturate(70%) contrast(88%);
}
@media (max-width: 620px) { .map { aspect-ratio: 4 / 3; } }

/* Fixed bar on phones so reserving is never more than one tap away */
.action-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 90;
  display: none;
  grid-template-columns: repeat(4, 1fr);
  background: rgba(10, 10, 11, 0.97);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-top: 1px solid var(--line);
}
.action-bar a {
  padding: 1.05rem 0.25rem;
  padding-bottom: calc(1.05rem + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ivory-dim);
  border-right: 1px solid var(--line-soft);
}
.action-bar a:last-child { border-right: 0; }
.action-bar a.is-primary { background: var(--gold); color: var(--ink); }

/* ---------- 10c. Press ---------------------------------------- */
.press-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line);
}
.press-item {
  padding: clamp(1.75rem, 3.5vw, 2.5rem) 0;
  border-bottom: 1px solid var(--line);
}
.press-item__outlet {
  display: block;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.press-item h3 {
  font-size: clamp(1.375rem, 1.15rem + 1vw, 2rem);
  line-height: 1.2;
  margin: 0 0 0.7rem;
}
.press-item h3 a {
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.5s var(--ease), color 0.4s var(--ease);
}
.press-item h3 a:hover,
.press-item h3 a:focus-visible { color: var(--gold-lt); background-size: 100% 1px; }
.press-item__meta {
  margin: 0;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.press-roundup {
  list-style: none;
  margin: 0;
  padding: 0;
}
.press-roundup li { border-bottom: 1px solid var(--line-soft); }
.press-roundup li:last-child { border-bottom: 0; }
.press-roundup a {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 1.25rem;
  align-items: baseline;
  padding: 1rem 0;
  font-size: 1.0625rem;
  color: var(--ivory-dim);
  transition: color 0.4s var(--ease);
}
.press-roundup a:hover { color: var(--gold-lt); }
.press-roundup a span {
  flex: none;
  min-width: 11rem;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (max-width: 620px) { .press-roundup a span { min-width: 0; width: 100%; } }

/* ---------- 11. Cards, gallery, lightbox --------------------- */
/* Editorial blocks rather than boxes. No frame, no panel, just the
   photograph and the words under it. */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.card__media { aspect-ratio: 4 / 3; overflow: hidden; background: var(--ink-3); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.card:hover .card__media img { transform: scale(1.045); }
.card__body { padding: 1.75rem 0 0; flex: 1; display: flex; flex-direction: column; }
.card__body h3 { margin-bottom: 0.35em; }
.card__meta {
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.9rem;
}
.card__body p { font-size: 1.0625rem; color: var(--muted); line-height: 1.65; }
.card__body .link { margin-top: auto; padding-top: 1.5rem; }
/* Cards with no photograph still need a little containment */
.card:not(:has(.card__media)) .card__body {
  padding: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(198, 161, 91, 0.05), transparent 60%);
}

/* Gallery */
.gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.5vw, 1.25rem);
}
.gallery__item {
  position: relative;
  overflow: hidden;
  background: var(--ink-3);
  aspect-ratio: 4 / 3;
  cursor: zoom-in;
  border: 0;
  padding: 0;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.1s var(--ease), opacity 0.5s var(--ease);
}
.gallery__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 11, 0.25);
  transition: opacity 0.5s var(--ease);
}
.gallery__item:hover img { transform: scale(1.06); }
.gallery__item:hover::after { opacity: 0; }
.gallery__item--tall { grid-row: span 2; aspect-ratio: 4 / 6.2; }
.gallery__item--wide { grid-column: span 2; aspect-ratio: 8.2 / 3; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(6, 6, 7, 0.96);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0.45s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: 100%;
  max-height: 84vh;
  object-fit: contain;
  border: 1px solid var(--line);
}
.lightbox__close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--gold);
  font-size: 1.25rem;
  cursor: pointer;
  transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.lightbox__close:hover { background: var(--gold); color: var(--ink); }
.lightbox__caption {
  margin-top: 1.25rem;
  text-align: center;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- 12. Forms ---------------------------------------- */
.form { display: grid; gap: 1.75rem; }
.form__row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; }
.field { display: grid; gap: 0.6rem; }
.field label {
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--gold);
}
.field input,
.field select,
.field textarea {
  background: var(--ink-2);
  border: 1px solid var(--line);
  padding: 0.95rem 1.1rem;
  font-family: var(--sans);
  font-weight: 300;
  font-size: 1rem;
  color: var(--ivory);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
  border-radius: 0;
  -webkit-appearance: none;
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23c6a15b' stroke-width='1.2'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1.1rem center;
  background-size: 12px;
  padding-right: 2.75rem;
}
.field textarea { min-height: 9rem; resize: vertical; }
/* The submit button should size to its label, not stretch across the grid */
.form > .btn { justify-self: start; }
@media (max-width: 620px) { .form > .btn { justify-self: stretch; } }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: var(--ink-3);
}
.field input::placeholder,
.field textarea::placeholder { color: rgba(152, 147, 138, 0.7); }
.form__note { font-size: 0.8125rem; color: var(--muted); }

/* A framed panel so the form reads as the thing you came to fill in,
   rather than another block of page. Deco corners to match the figures. */
.ts-panel {
  position: relative;
  padding: clamp(1.5rem, 3.5vw, 2.75rem);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(198, 161, 91, 0.055), transparent 60%);
}
.ts-panel::before,
.ts-panel::after {
  content: "";
  position: absolute;
  width: 26px;
  height: 26px;
  border: 0 solid var(--gold);
  opacity: 0.7;
  pointer-events: none;
}
.ts-panel::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.ts-panel::after { right: -1px; bottom: -1px; border-bottom-width: 2px; border-right-width: 2px; }


/* ---------- 12b. Tripleseat lead form -------------------------
   The embed writes its own markup and its own stylesheet, so these rules
   are deliberately specific and use !important to win. Selectors come from
   the CSS that ts_script.js injects; if Tripleseat changes its markup this
   block is the only thing that needs revisiting. */
[id^="tripleseat_embed_form"] {
  font-family: var(--sans);
  color: var(--ivory-dim);
}
[id^="tripleseat_embed_form"] table,
[id^="tripleseat_embed_form"] tbody,
[id^="tripleseat_embed_form"] tr,
[id^="tripleseat_embed_form"] td {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  border: 0 !important;
}
[id^="tripleseat_embed_form"] label,
[id^="tripleseat_embed_form"] #contact_preference_label {
  display: block !important;
  margin-bottom: 0.35rem !important;
  font-family: var(--sans) !important;
  font-size: 0.625rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.24em !important;
  text-transform: uppercase !important;
  color: var(--gold) !important;
}
[id^="tripleseat_embed_form"] input[type="text"],
[id^="tripleseat_embed_form"] input[type="email"],
[id^="tripleseat_embed_form"] input[type="tel"],
[id^="tripleseat_embed_form"] input[type="number"],
[id^="tripleseat_embed_form"] input[type="date"],
[id^="tripleseat_embed_form"] select,
[id^="tripleseat_embed_form"] textarea {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 0.75rem !important;
  padding: 0.62rem 0.85rem !important;
  background: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-weight: 300 !important;
  font-size: 0.9375rem !important;
  color: var(--ivory) !important;
  box-shadow: none !important;
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease);
}
[id^="tripleseat_embed_form"] input:focus,
[id^="tripleseat_embed_form"] select:focus,
[id^="tripleseat_embed_form"] textarea:focus {
  outline: none !important;
  border-color: var(--gold) !important;
  background: var(--ink-3) !important;
}
[id^="tripleseat_embed_form"] textarea { min-height: 5rem !important; resize: vertical !important; }

/* Radio and checkbox groups: location pickers, date flexibility, contact preference */
[id^="tripleseat_embed_form"] .location_list label,
[id^="tripleseat_embed_form"] .row_booking_dates_flexible label,
[id^="tripleseat_embed_form"] .row_booking_events_needed label,
[id^="tripleseat_embed_form"] .row_booking_guest_rooms_needed label {
  display: inline-block !important;
  margin: 0 1.5rem 0.5rem 0.5rem !important;
  letter-spacing: 0.12em !important;
  color: var(--ivory-dim) !important;
}
[id^="tripleseat_embed_form"] input[type="radio"],
[id^="tripleseat_embed_form"] input[type="checkbox"] {
  width: auto !important;
  margin: 0 !important;
  accent-color: var(--gold);
}

/* Submit, matched to the site's solid button */
[id^="tripleseat_embed_form"] .button,
[id^="tripleseat_embed_form"] input[type="submit"],
[id^="tripleseat_embed_form"] #lead_form_submit a {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 1.05em 2.4em !important;
  background-color: var(--gold) !important;
  background-image: var(--gilt) !important;
  border: 1px solid var(--gold-lt) !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.26em !important;
  text-transform: uppercase !important;
  color: var(--ink) !important;
  text-decoration: none !important;
  cursor: pointer;
  transition: filter 0.4s var(--ease);
}
[id^="tripleseat_embed_form"] .button:hover,
[id^="tripleseat_embed_form"] #lead_form_submit a:hover { filter: brightness(1.12); }

[id^="tripleseat_embed_form"] .help-block,
[id^="tripleseat_embed_form"] .capitalize {
  font-size: 0.8125rem !important;
  color: var(--muted) !important;
  letter-spacing: 0.02em !important;
  text-transform: none !important;
}
[id^="tripleseat_embed_form"] .errorExplanation,
[id^="tripleseat_embed_form"] .danger,
[id^="tripleseat_embed_form"] .error {
  color: #e0a08a !important;
  background: transparent !important;
  border: 0 !important;
}
[id^="tripleseat_embed_form"] .g-recaptcha { margin: 0 0 1.5rem !important; }


/* Row layout. Tripleseat floats its field wrappers at fixed narrow widths,
   which is why the inputs come out stubby by default. Unfloating them lets
   the fields fill the column and stack cleanly on a phone. */
[id^="tripleseat_embed_form"] .tripleseat_field_section {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 0 1.5rem !important;
  float: none !important;
  width: 100% !important;
  overflow: visible !important;
  margin-bottom: 1rem !important;
}
/* every field spans the full width unless it is paired below */
[id^="tripleseat_embed_form"] .tripleseat_field {
  grid-column: 1 / -1 !important;
  float: none !important;
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 0 0.1rem !important;
}
/* short fields sit two to a row so the form is not one long ribbon */
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_first_name),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_last_name),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_phone_number),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_phone_number_extension),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_contact_preference),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_company),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_event_date),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_guest_count),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_start_time),
[id^="tripleseat_embed_form"] .tripleseat_field:has(#lead_end_time) {
  grid-column: span 1 !important;
}
@media (max-width: 620px) {
  [id^="tripleseat_embed_form"] .tripleseat_field_section { grid-template-columns: 1fr !important; }
  [id^="tripleseat_embed_form"] .tripleseat_field { grid-column: 1 / -1 !important; }
}
/* their inputs carry a size attribute that otherwise wins */
[id^="tripleseat_embed_form"] input[size] { width: 100% !important; }
[id^="tripleseat_embed_form"] br { display: none !important; }
[id^="tripleseat_embed_form"] h1,
[id^="tripleseat_embed_form"] h2,
[id^="tripleseat_embed_form"] h3 {
  grid-column: 1 / -1 !important;
  font-family: var(--serif) !important;
  font-weight: 300 !important;
  font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem) !important;
  color: var(--ivory) !important;
  margin: 0 0 0.85rem !important;
  border: 0 !important;
}


[id^="tripleseat_embed_form"] .tripleseat_field_section:first-child > :is(h1,h2,h3) { margin-top: 0 !important; }
[id^="tripleseat_embed_form"] .help-block { margin: -0.5rem 0 0.75rem !important; }

.ts-credit {
  margin-top: 1.5rem;
  font-family: var(--sans);
  font-size: 0.625rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.ts-credit a { color: var(--muted); }
.ts-credit a:hover { color: var(--gold); }

/* The date picker is appended to <body>, outside the form, so it needs
   styling of its own or a bright white calendar appears on a black page. */
#ui-datepicker-div {
  background: var(--ink-2) !important;
  border: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 0.5rem !important;
  font-family: var(--sans) !important;
  font-size: 0.875rem !important;
  z-index: 200 !important;
}
#ui-datepicker-div .ui-datepicker-title,
#ui-datepicker-div th { color: var(--gold) !important; }
#ui-datepicker-div td a,
#ui-datepicker-div td span {
  color: var(--ivory-dim) !important;
  background: transparent !important;
  border: 0 !important;
  text-align: center;
  padding: 0.4rem !important;
}
#ui-datepicker-div td a:hover { background: rgba(198, 161, 91, 0.16) !important; color: var(--gold-lt) !important; }
#ui-datepicker-div .ui-state-active { background: var(--gold) !important; color: var(--ink) !important; }
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next { cursor: pointer; filter: invert(1) sepia(1) saturate(2) hue-rotate(5deg); }

/* ---------- 13. Footer --------------------------------------- */
.footer {
  background: var(--ink-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 7vw, 5.5rem) 2rem;
  position: relative;
  z-index: 1;
}
.footer__brand { --wm-size: 2.25rem; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1.1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
.footer h4 {
  font-family: var(--sans);
  font-size: 0.6875rem;
  font-weight: 400;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 1.5rem;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.7rem; }
.footer a { color: var(--ivory-dim); font-size: 0.9375rem; transition: color 0.35s var(--ease); }
.footer a:hover { color: var(--gold); }
.footer address { font-style: normal; font-size: 0.9375rem; line-height: 1.9; color: var(--ivory-dim); }
.footer__hours { font-size: 0.875rem; color: var(--muted); line-height: 1.9; }
.footer__hours strong { display: block; color: var(--ivory); font-weight: 400; margin-top: 0.9rem; }
.footer__hours strong:first-child { margin-top: 0; }

.socials { display: flex; gap: 0.85rem; margin-top: 1.75rem; }
.socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  color: var(--gold);
  transition: background 0.4s var(--ease), color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.socials a:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
.socials svg { width: 17px; height: 17px; fill: currentColor; }

.footer__base {
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line-soft);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  justify-content: space-between;
  align-items: center;
  font-family: var(--sans);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.footer__base a { font-size: 0.6875rem; }

/* Reservation band above the footer */
.reserve-band {
  position: relative;
  text-align: center;
  padding-block: clamp(4rem, 9vw, 7rem);
  overflow: hidden;
  isolation: isolate;
  border-top: 1px solid var(--line);
}
.reserve-band__media { position: absolute; inset: 0; z-index: -2; }
.reserve-band__media img { width: 100%; height: 100%; object-fit: cover; }
.reserve-band__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,11,0.9), rgba(10,10,11,0.82));
}

/* ---------- 14. Motion & reveal ------------------------------ */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1s var(--ease), transform 1s var(--ease);
  will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }
.reveal[data-delay="1"] { transition-delay: 0.1s; }
.reveal[data-delay="2"] { transition-delay: 0.2s; }
.reveal[data-delay="3"] { transition-delay: 0.3s; }
.reveal[data-delay="4"] { transition-delay: 0.4s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media img { animation: none; transform: none; }
}

/* ---------- 15. Responsive ----------------------------------- */
@media (max-width: 1100px) {
  .footer__grid { grid-template-columns: 1fr 1fr; row-gap: 3rem; }
}

@media (max-width: 960px) {
  .nav--left { display: none; }
  .nav__links { display: none; }
  .header__inner { grid-template-columns: auto 1fr auto; }
  .header__brand { justify-self: start; }
  .nav-toggle { display: flex; }
  .action-bar { display: grid; }
  body { padding-bottom: 3.6rem; }
  .drawer { padding-bottom: 6rem; }
  .nav--right { gap: 0.75rem; }

  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .split { grid-template-columns: 1fr; gap: 2.5rem; }
  .split--reverse .split__media { order: 0; }
  .split__body { max-width: none; }

  .menu-list--split { grid-template-columns: 1fr; }

  .gallery { grid-template-columns: repeat(2, 1fr); }
  .gallery__item--wide { grid-column: span 2; }
  .gallery__item--tall { grid-row: span 1; aspect-ratio: 4 / 3; }

  .menu-nav { top: 4rem; }
}

@media (max-width: 620px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: 1fr; }
  .quick { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .facts__item { border-right: 0; border-bottom: 1px solid var(--line); }
  .facts__item:last-child { border-bottom: 0; }
  .gallery { grid-template-columns: 1fr; }
  .gallery__item--wide { grid-column: span 1; aspect-ratio: 4 / 3; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .nav--right .btn { display: none; }
  .framed::before { inset: -0.75rem; }
  .hero__meta { flex-direction: column; gap: 0.75rem; }
  .hero__meta span::after { display: none; }
}

@media (min-width: 961px) {
  .drawer { display: none; }
}

/* ---------- Print -------------------------------------------- */
@media print {
  body { background: #fff; color: #000; }
  .header, .drawer, .scroll-cue, .reserve-band, .footer, .menu-nav { display: none !important; }
  .menu-item__name, .menu-item__price, .price-list li > span:last-child { color: #000; }
  .menu-item__desc { color: #333; }
  .section { padding-block: 1.5rem; }
}