/* ============================================================
   LOS SARAPES — SITE STYLES
   Palette pulled from the room itself: adobe walls, cobalt
   glassware, marigold, cactus green, limestone plaster.
   ============================================================ */

/* Fonts are self-hosted (latin subset) rather than pulled from Google:
   one less DNS + TLS handshake in front of first paint, and no
   third-party request on a page that does not otherwise make one.
   Lilita One echoes the rounded, hand-cut lettering in the logo;
   Karla carries the body copy. */
@font-face {
  font-family: "Karla";
  src: url("../fonts/karla-variable.woff2") format("woff2-variations");
  font-weight: 200 800;   /* variable file — covers 400/500/700 in one request */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lilita One";
  src: url("../fonts/lilita-one-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --ink:        #17120F;
  --ink-soft:   #3A2E27;
  --ink-mute:   #6B5C51;
  --bone:       #F6EFE2;
  --bone-2:     #EDE2CE;
  --bone-3:     #E2D4BA;
  --adobe:      #B8432A;
  --adobe-dark: #8F3220;
  --cobalt:     #1B4CA8;
  --marigold:   #E5A02C;
  --cactus:     #2F6B4F;

  --line:       rgba(23, 18, 15, .14);
  --line-dark:  rgba(246, 239, 226, .18);

  --display: "Lilita One", "Arial Black", sans-serif;
  --body:    "Karla", system-ui, -apple-system, "Segoe UI", sans-serif;

  --header-h: 84px;
  --band-h: 14px;
  --gutter: clamp(20px, 5vw, 64px);
  --measure: 1160px;
  --section-y: clamp(72px, 9vw, 128px);
  --radius: 14px;
  --ease: cubic-bezier(.2, .7, .3, 1);
}

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

html {
  scroll-behavior: smooth;
  /* Anchor targets must clear the fixed header, or headings hide behind it. */
  scroll-padding-top: calc(var(--header-h) + 16px);
}

body {
  margin: 0;
  background: var(--bone);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Set while the mobile nav is open so the page behind it can't scroll. */
body.is-locked { overflow: hidden; }

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

a { color: inherit; }

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

.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;
}

.skip-link {
  position: absolute; top: 8px; left: 8px; z-index: 100;
  transform: translateY(-200%);
  background: var(--ink); color: var(--bone);
  padding: 10px 16px; border-radius: 999px;
  font-weight: 700; text-decoration: none;
}
.skip-link:focus { transform: none; }

/* ---------- Shared type ---------- */

.wrap { max-width: var(--measure); margin: 0 auto; }

.eyebrow {
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 14px;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--adobe);
}
.eyebrow::after {
  content: ""; flex: 1 1 auto; height: 2px; max-width: 84px;
  background: currentColor; opacity: .35;
}

.section-title {
  margin: 0 0 18px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -.005em;
  text-wrap: balance;
}

.section-lede {
  max-width: 54ch;
  margin: 0 0 clamp(36px, 5vw, 60px);
  font-size: clamp(1.02rem, 1.4vw, 1.14rem);
  color: var(--ink-soft);
}

/* Dark sections invert the accents rather than restating every rule. */
.is-dark { background: var(--ink); color: var(--bone); }
.is-dark .eyebrow { color: var(--marigold); }
.is-dark .section-lede { color: rgba(246, 239, 226, .78); }

/* ---------- Buttons ---------- */

.btn {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  --btn-bd: currentColor;
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 50px;
  padding: 0 26px;
  border: 1.5px solid var(--btn-bd);
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--body);
  font-size: .94rem;
  font-weight: 700;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s var(--ease), background-color .25s var(--ease),
              color .25s var(--ease), border-color .25s var(--ease);
}
.btn:hover { transform: translateY(-2px); }

.btn--solid {
  --btn-bg: var(--marigold);
  --btn-fg: var(--ink);
  --btn-bd: var(--marigold);
}
.btn--solid:hover { --btn-bg: #F0AF3F; --btn-bd: #F0AF3F; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  --btn-bd: rgba(246, 239, 226, .55);
}
.btn--ghost:hover { --btn-bg: rgba(246, 239, 226, .12); --btn-bd: var(--bone); }

/* Ghost button sitting on a light background needs ink, not bone. */
.btn--ghost-ink {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  --btn-bd: rgba(23, 18, 15, .35);
}
.btn--ghost-ink:hover { --btn-bg: rgba(23, 18, 15, .06); --btn-bd: var(--ink); }

/* Header CTA: a hairline outline over the hero, filling in once solid.
   Same pill and same sentence case as every other button on the site —
   only the height is trimmed to sit in the bar. */
.btn--outline {
  --btn-bg: transparent;
  --btn-fg: var(--bone);
  --btn-bd: currentColor;
  min-height: 44px;
  padding: 0 24px;
  font-size: .9rem;
}
.btn--outline:hover { --btn-bg: var(--marigold); --btn-bd: var(--marigold); --btn-fg: var(--ink); }


/* ---------- Header ---------- */

/* Contact strip above the header. It sits in normal flow and scrolls away;
   the sticky header below pins to the top once it does, so no offset maths
   are needed anywhere. */
.topbar {
  background: var(--ink);
  color: rgba(246, 239, 226, .82);
  border-bottom: 1px solid var(--line-dark);
  font-size: clamp(.72rem, 1.4vw, .82rem);
}
.topbar__inner {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
  gap: 3px 10px;
  max-width: var(--measure); margin: 0 auto;
  padding: 8px var(--gutter);
  line-height: 1.35; text-align: center;
}
.topbar a { color: inherit; text-decoration: none; }
.topbar a:hover { color: var(--marigold); }
.topbar__email { text-decoration: underline; text-underline-offset: 2px; }
.topbar__sep { opacity: .45; }
.topbar__msg { font-weight: 700; color: var(--bone); }

.site-header {
  position: sticky; top: 0; z-index: 50;
  color: var(--bone);
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease),
              color .35s var(--ease);
}
/* On the home page the header floats transparently over the hero. With the
   header in normal flow now, pull the hero up underneath it to keep that
   overlay — the hero's own top padding still clears the bar. */
.has-hero .site-header { margin-bottom: calc(-1 * var(--header-h)); }
.site-header__inner {
  display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px);
  height: var(--header-h);
  padding: 0 var(--gutter);
}

/* The full stacked lockup — tiles over wordmark — sits at the top left of
   every page. It is the only place the mark appears, so it is sized to be
   read rather than squeezed into the bar. */
.site-header__brand { display: block; flex: none; }
.site-header__brand img { width: auto; height: 72px; }

/* Two logo files, one swapped for the other — no invert filter, which
   would mangle any non-monochrome artwork the restaurant swaps in later. */
.site-header__brand .logo--dark { display: none; }

.site-nav { flex: 0 1 auto; margin-left: auto; }
.site-nav > ul {
  display: flex; align-items: center; gap: clamp(14px, 1.6vw, 26px);
  margin: 0; padding: 0; list-style: none;
}
.site-nav > ul > li { position: relative; display: flex; align-items: center; gap: 2px; }
.site-nav a {
  position: relative;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
.site-nav > ul > li > a::after {
  content: ""; position: absolute; left: 0; bottom: -7px;
  width: 100%; height: 2px; background: var(--marigold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s var(--ease);
}
.site-nav > ul > li > a:hover::after,
.site-nav > ul > li > a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Menus dropdown ---------- */

.submenu-toggle {
  display: grid; place-items: center;
  /* A real button, so it gets a real target rather than the 20px the
     chevron itself needs. */
  width: 28px; height: 28px; padding: 0;
  border: 0; border-radius: 4px;
  background: none; color: inherit; cursor: pointer;
}
.submenu-toggle svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .25s var(--ease);
}
.has-menu[data-open="true"] .submenu-toggle svg { transform: rotate(180deg); }

.submenu {
  position: absolute; top: 100%; left: -18px;
  z-index: 60;
  min-width: 224px;
  margin: 0; padding: 10px 0;
  list-style: none;
  background: var(--bone);
  color: var(--ink);
  border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: 0 24px 50px -28px rgba(23, 18, 15, .85);
  /* Hidden by default; opened on hover for pointers and on click for
     keyboards and touch, so it is reachable either way. */
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
}
.has-menu:hover .submenu,
.has-menu:focus-within .submenu,
.has-menu[data-open="true"] .submenu {
  opacity: 1; visibility: visible; transform: none;
}
.submenu a {
  display: block;
  padding: 9px 22px;
  font-size: .74rem;
  letter-spacing: .1em;
}
.submenu a:hover { background: var(--bone-2); color: var(--adobe); }

/* Scrolled state: header lands on bone, logo swaps to the ink artwork.
   Pages without a hero have nothing dark to sit on, so they wear that
   state from the top and push the content down instead of overlapping it. */
.site-header.is-stuck,
.site-header.is-open,
body:not(.has-hero) .site-header {
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 1px 0 rgba(23, 18, 15, .12), 0 10px 30px -20px rgba(23, 18, 15, .5);
}
.site-header.is-stuck .logo--light,
.site-header.is-open  .logo--light,
body:not(.has-hero) .logo--light { display: none; }
.site-header.is-stuck .logo--dark,
.site-header.is-open  .logo--dark,
body:not(.has-hero) .logo--dark { display: block; }

body:not(.has-hero) .site-header { position: sticky; inset: auto; top: 0; }

.site-header.is-stuck .btn--outline,
body:not(.has-hero) .btn--outline {
  --btn-bg: var(--adobe); --btn-bd: var(--adobe); --btn-fg: var(--bone);
}
.site-header.is-stuck .btn--outline:hover,
body:not(.has-hero) .btn--outline:hover { --btn-bg: #C94E33; --btn-bd: #C94E33; }

.nav-toggle {
  display: none;
  width: 46px; height: 46px;
  margin-left: auto;
  border: 0; border-radius: 50%;
  background: rgba(23, 18, 15, .28);
  color: inherit; cursor: pointer;
}
.site-header.is-stuck .nav-toggle,
.site-header.is-open .nav-toggle { background: rgba(23, 18, 15, .08); }
.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block; width: 20px; height: 2px;
  margin: 0 auto; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s linear;
}
.nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; }
.nav-toggle__bars::before { transform: translateY(-6px); }
.nav-toggle__bars::after  { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after { transform: rotate(-90deg) translateX(-4px); }

.mobile-nav {
  background: var(--bone); color: var(--ink);
  padding: 4px var(--gutter) 26px;
  max-height: calc(100svh - var(--header-h));
  overflow-y: auto;
  border-top: 1px solid var(--line);
}
.mobile-nav ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
/* The Order-online button is an .btn and must keep its centred flex layout,
   padding and pill border — so it is excluded from this generic link rule,
   which would otherwise turn it into a left-aligned block. */
.mobile-nav a:not(.mobile-nav__cta) {
  display: block; padding: 13px 0;
  font-size: 1.02rem; font-weight: 700; text-decoration: none;
  border-bottom: 1px solid var(--line);
}
/* The seven menus are the reason people open this panel, so they are listed
   inline rather than buried behind a second tap. */
.mobile-nav .is-sub a {
  padding: 10px 0 10px 20px;
  font-size: .9rem; font-weight: 500;
  color: var(--ink-soft);
  border-left: 2px solid var(--bone-3);
  border-bottom: 0;
}
.mobile-nav .is-sub a[aria-current="page"],
.mobile-nav a[aria-current="page"] { color: var(--adobe); }
.mobile-nav__cta { margin-top: 18px; width: 100%; }
.mobile-nav__tel {
  display: block; margin-top: 14px; text-align: center;
  font-weight: 700; letter-spacing: .08em; text-decoration: none;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex; align-items: flex-end;
  min-height: 100vh;          /* fallback for browsers without svh */
  min-height: 100svh;
  padding: calc(var(--header-h) + 40px) var(--gutter) calc(150px + var(--band-h));
  overflow: hidden;
  color: var(--bone);
  background: var(--ink);
}

.hero__media { position: absolute; inset: 0; }
.hero__video {
  position: relative;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.hero__video.is-ready { opacity: 1; }

/* Poster stays visible under the video until it can play */
.hero__media::before {
  content: "";
  position: absolute; inset: 0;
  background: url("../images/hero/los-sarapes-hero-poster.jpg") center/cover no-repeat;
}

/* Warm scrim — dark enough for AA text contrast, still lets the room read */
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(23, 18, 15, .88) 0%, rgba(23, 18, 15, .62) 42%, rgba(23, 18, 15, .28) 100%),
    linear-gradient(to top, rgba(23, 18, 15, .85) 0%, rgba(23, 18, 15, 0) 55%);
}

.hero__content { position: relative; max-width: 62rem; }

.hero__mark {
  width: clamp(150px, 20vw, 218px);
  height: auto;
  margin-bottom: clamp(22px, 3vw, 34px);
}

.hero__eyebrow {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin: 0 0 18px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: rgba(246, 239, 226, .82);
}
.hero__eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--marigold);
}
.hero__eyebrow .status[hidden] { display: none; }
.hero__eyebrow .status.is-open   { color: #8FD6A8; }
.hero__eyebrow .status.is-closed { color: rgba(246, 239, 226, .7); }

.hero__title {
  margin: 0 0 20px;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2rem, 6.1vw, 4rem);
  line-height: .98;
  letter-spacing: -.01em;
  text-shadow: 0 2px 40px rgba(23, 18, 15, .45);
}
/* Each phrase is its own line and never wraps, so the headline is always the
   two lines "Always fresh." / "Mexican at its best." — the font-size above is
   sized so the longer second line fits the hero column at every width. */
.hero__title .hero__line { display: block; white-space: nowrap; }

.hero__lede {
  max-width: 62ch;
  text-wrap: balance;
  margin: 0 0 32px;
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  color: rgba(246, 239, 226, .9);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Sound toggle ---------- */

.sound-toggle {
  position: absolute; right: var(--gutter);
  bottom: calc(46px + var(--band-h));
  z-index: 3;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 12px;
  border: 1px solid rgba(246, 239, 226, .35);
  border-radius: 999px;
  background: rgba(23, 18, 15, .38);
  backdrop-filter: blur(6px);
  color: var(--bone);
  font-family: var(--body);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  cursor: pointer;
  transition: background-color .25s var(--ease), border-color .25s var(--ease);
}
.sound-toggle:hover { background: rgba(23, 18, 15, .62); border-color: rgba(246, 239, 226, .7); }
.sound-toggle svg {
  width: 20px; height: 20px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.sound-toggle .ico-speaker { fill: currentColor; stroke-linejoin: round; }
.sound-toggle .ico-on { opacity: 0; }
.sound-toggle[aria-pressed="true"] .ico-on  { opacity: 1; }
.sound-toggle[aria-pressed="true"] .ico-off { opacity: 0; }

/* ---------- Scroll cue ---------- */

.scroll-cue {
  position: absolute; left: var(--gutter);
  bottom: calc(46px + var(--band-h));
  z-index: 3;
  display: inline-flex; align-items: center; gap: 10px;
  color: rgba(246, 239, 226, .78);
  font-size: .74rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  text-decoration: none;
}
.scroll-cue:hover { color: var(--bone); }
.scroll-cue svg {
  width: 18px; height: 18px;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  animation: cue-bob 2.6s ease-in-out infinite;
}
@keyframes cue-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ---------- Signature: the sarape band ---------- */

/* Two layers: the coloured weft stripes, plus a fine warp thread overlay
   so the band reads as woven cloth rather than a flat colour bar. */
.sarape-band {
  height: var(--band-h);
  background-image:
    repeating-linear-gradient(0deg,
      rgba(23, 18, 15, .22) 0 1px,
      rgba(255, 255, 255, .10) 1px 2px),
    repeating-linear-gradient(90deg,
      var(--adobe)    0     22px,
      var(--marigold) 22px  30px,
      var(--bone)     30px  34px,
      var(--cobalt)   34px  56px,
      var(--cactus)   56px  64px,
      var(--bone-2)   64px  68px,
      var(--adobe)    68px  76px,
      var(--ink)      76px  96px
    );
}
.hero .sarape-band {
  position: absolute; inset: auto 0 0 0;
  z-index: 4;
}
/* Same motif reused as a divider between sections */
.sarape-rule { height: 8px; }

/* ---------- Welcome strip ---------- */

.welcome { padding: var(--section-y) var(--gutter); }
.welcome__inner { max-width: var(--measure); margin: 0 auto; }
.welcome__title {
  margin: 0 0 clamp(32px, 4vw, 52px);
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 3rem);
  line-height: 1.02;
  color: var(--adobe);
}
.welcome__facts {
  display: grid; gap: clamp(28px, 4vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.welcome__image {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  margin-bottom: 20px;
}
/* The rule that used to open each fact now sits under its photograph,
   separating the picture from the label rather than starting the column. */
.welcome__facts h3 {
  margin: 0 0 8px; padding-top: 16px;
  border-top: 2px solid var(--ink);
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.welcome__facts p { margin: 0; color: var(--ink-soft); max-width: 34ch; }

/* ---------- Menu ---------- */

.menu { padding: var(--section-y) var(--gutter); background: var(--bone-2); }

.menu__grid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(258px, 100%), 1fr));
  margin: 0 0 clamp(36px, 5vw, 52px); padding: 0;
  list-style: none;
}

.dish-card {
  display: flex; flex-direction: column;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.dish-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px -28px rgba(23, 18, 15, .8);
}
.dish-card__glyph {
  width: 34px; height: 34px; margin-bottom: 18px;
  fill: none; stroke: var(--adobe);
  stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
}
.dish-card h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 400;
  font-size: 1.42rem; line-height: 1.1;
}
.dish-card p { margin: 0 0 16px; color: var(--ink-soft); font-size: .97rem; }
.dish-card ul {
  margin: auto 0 0; padding: 14px 0 0;
  border-top: 1px solid var(--line);
  list-style: none;
  font-size: .84rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-mute);
}
.dish-card li + li { margin-top: 6px; }

.menu__note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 18px 24px;
  padding-top: clamp(28px, 4vw, 40px);
  border-top: 2px solid var(--ink);
}
.menu__note p { margin: 0; max-width: 46ch; color: var(--ink-soft); }
.menu__note .btn { margin-left: auto; }

/* ---------- Tequila bar ---------- */

.bar { padding: var(--section-y) var(--gutter); }
.bar__layout {
  display: grid; gap: clamp(40px, 6vw, 76px);
  grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
  align-items: start;
}
.bar__list { margin: 0; padding: 0; list-style: none; }
.bar__list li {
  padding: 18px 0;
  border-bottom: 1px solid var(--line-dark);
}
.bar__list li:first-child { border-top: 1px solid var(--line-dark); }
.bar__list dfn {
  display: block; margin-bottom: 4px;
  font-family: var(--display); font-style: normal;
  font-size: 1.16rem; color: var(--marigold);
}
.bar__list span { color: rgba(246, 239, 226, .68); font-size: .95rem; }
.bar__styles-title {
  margin: 0 0 6px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--marigold);
}
/* Mezcal is its own agave category, set a little apart from the tequilas. */
.bar__list-mezcal { margin-top: 16px; }

/* ---------- Patio ---------- */

.patio { padding: var(--section-y) var(--gutter); background: var(--bone-2); }
.patio__layout {
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
}
.patio__panel {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  overflow: hidden;
}
.patio__panel img { width: 100%; height: 100%; object-fit: cover; }
.patio__badge {
  position: absolute; z-index: 2; left: 24px; bottom: 24px;
  padding: 12px 20px;
  border-radius: 999px;
  background: var(--bone);
  font-size: .76rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.patio__points { margin: 0; padding: 0; list-style: none; }
.patio__points li {
  position: relative;
  padding: 0 0 0 30px; margin-bottom: 14px;
  color: var(--ink-soft);
}
.patio__points li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 14px; height: 3px; border-radius: 2px;
  background: var(--cactus);
}

/* ---------- Visit ---------- */

.visit { padding: var(--section-y) var(--gutter); }
.visit__layout {
  display: grid; gap: clamp(36px, 5vw, 64px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: start;
}

.hours { margin: 0; padding: 0; list-style: none; }
.hours li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.hours li:first-child { border-top: 2px solid var(--ink); }
.hours__day {
  flex: none; min-width: 10ch;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.hours__time { margin-left: auto; text-align: right; color: var(--ink-soft); }
.hours li.is-today { background: rgba(229, 160, 44, .16); }
.hours li.is-today .hours__day::after {
  content: "Today"; display: inline-block; margin-left: 10px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--ink); color: var(--bone);
  font-size: .62rem; letter-spacing: .12em;
}
.hours li.is-closed .hours__time { color: var(--ink-mute); }

.contact { display: grid; gap: 26px; }
.contact__row h3 {
  margin: 0 0 6px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}
.contact__row p { margin: 0; font-size: 1.08rem; }
.contact__row a { text-decoration: none; border-bottom: 1.5px solid var(--marigold); }
.contact__row a:hover { color: var(--adobe); }
.contact__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }

/* Placeholder copy the owner still needs to fill in. Dashed underline so
   it is obvious in review and impossible to ship by accident unnoticed. */
.tbd {
  border-bottom: 1.5px dashed var(--adobe);
  color: var(--adobe);
}

/* ---------- Order band ---------- */

.order {
  padding: clamp(56px, 7vw, 88px) var(--gutter);
  background: var(--adobe); color: var(--bone);
  text-align: center;
}
.order h2 {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.04;
}
.order p { max-width: 46ch; margin: 0 auto 28px; color: rgba(246, 239, 226, .88); }
.order__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }
.order .btn--solid { --btn-bg: var(--bone); --btn-bd: var(--bone); --btn-fg: var(--ink); }
.order .btn--solid:hover { --btn-bg: #fff; --btn-bd: #fff; }

/* ---------- Footer ---------- */

.site-footer { padding: clamp(48px, 6vw, 76px) var(--gutter) 40px; background: var(--ink); color: var(--bone); }
.site-footer__top {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--line-dark);
}

.site-footer__cols {
  display: grid; gap: 32px clamp(24px, 3vw, 48px);
  grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr));
}
/* Grid items default to min-width:auto, which lets wide content push a
   column past its track instead of shrinking. Without this a long line
   spills across the neighbouring column. */
.site-footer__cols > * { min-width: 0; }
.site-footer__cols h2 {
  margin: 0 0 12px;
  font-size: .74rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--marigold);
}
.site-footer__cols p { margin: 0 0 12px; color: rgba(246, 239, 226, .78); font-size: .95rem; }
.site-footer__cols a { color: inherit; text-decoration: none; }
.site-footer__cols a:hover { color: var(--marigold); }
.site-footer__fine { font-size: .85rem !important; color: rgba(246, 239, 226, .5) !important; }

.site-footer ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.site-footer nav a,
.site-footer__sisters a {
  font-size: .8rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: rgba(246, 239, 226, .78);
}
/* "Other locations" is the fourth column of the footer row. Its two spots
   stack, each a logo above its name and full URL — one line apiece in the
   column's width. Both logos share a height so they read as balanced. */
.site-footer__sisters {
  display: flex !important; flex-direction: column;
  gap: 22px !important;
}
.site-footer__sisters a {
  display: flex; flex-direction: column; align-items: flex-start; gap: 7px;
}
.sister-logo-box { display: flex; align-items: center; height: 44px; }
.sister-logo {
  height: 40px; width: auto; max-width: 100%;
  display: block; object-fit: contain;
}
/* The El Sarape mark is a mid-grey on transparency; lift it so it reads on
   the dark footer. Same height as its neighbour — only the tone differs. */
.sister-logo--el { filter: brightness(1.4); }
.sister-name { line-height: 1.3; }
.sister-url {
  text-transform: none; font-weight: 400; letter-spacing: .01em;
  font-size: .78rem; color: var(--marigold); overflow-wrap: anywhere;
}
/* On desktop/laptop the Other-locations column is widened so the two spots
   sit left and right, side by side, with their URLs still on one line. Below
   this they stack (the base rules above). */
@media (min-width: 1000px) {
  .site-footer__cols { grid-template-columns: 1fr 1.25fr 0.78fr 1.8fr; align-items: start; }
  .site-footer__sisters {
    flex-direction: row !important; justify-content: center;
    gap: clamp(16px, 1.6vw, 32px) !important;
  }
  .site-footer__sisters li { flex: 1 1 0; min-width: 0; }
  .site-footer__sisters a { align-items: center; text-align: center; }
  .sister-url { font-size: .7rem; }
  /* Keep each sentence of the hours note on one line. */
  .site-footer__fine { white-space: nowrap; font-size: .78rem; }
}

/* Five marks have to sit on one row inside a footer column that is about
   220px wide, so they are sized to fit rather than left to wrap. */
.social {
  display: flex !important; flex-wrap: wrap; gap: 8px;
  margin-top: 16px !important;
}
.social a {
  display: grid; place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  transition: transform .25s var(--ease), filter .25s var(--ease);
}
.social svg { width: 23px; height: 23px; display: block; }
.social .social-img { width: 23px; height: 23px; display: block; border-radius: 50%; }
/* The Google mark is a bare glyph on transparency — no circle to round. */
.social .social-img--plain { border-radius: 0; }
/* Each mark carries its own brand colour, so they sit back a little on the
   dark footer until you go for one. */
.social a { filter: saturate(.9) brightness(.94); }
.social a:hover { transform: translateY(-2px); filter: none; }
.site-footer__base {
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  padding-top: 24px;
  font-size: .84rem; color: rgba(246, 239, 226, .55);
}
.site-footer__base p { margin: 0; }

/* ---------- Inner-page header ---------- */

.page-head { padding: clamp(56px, 7vw, 96px) var(--gutter) clamp(44px, 5vw, 68px); }

/* A photograph behind the menu title, with type over it. */
.page-head--photo {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(72px, 9vw, 120px);
  padding-bottom: clamp(56px, 7vw, 84px);
  /* One height for every inner head, tracked to the tallest of them — the
     dinner menu. Any head with less content centres its type inside the
     same band, so the whole set reads as one size at every width. */
  min-height: clamp(460px, 446px + 4vw, 504px);
  color: var(--bone);
}
/* The head is a flex column (to centre its type vertically). Without this,
   the wrap would shrink to its content width and the auto margins would
   centre that — pushing a short head like Kids off to the middle. Fill the
   column so the wrap keeps its max-width and its left edge lines up with the
   body content on every page. */
.page-head--photo > .wrap { position: relative; z-index: 2; width: 100%; }
.page-head__bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
/* Dark enough on the left, where the type sits, to hold AA contrast; the
   photograph still reads on the right. */
.page-head__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, rgba(23, 18, 15, .90) 0%, rgba(23, 18, 15, .70) 45%, rgba(23, 18, 15, .38) 100%),
    linear-gradient(to top, rgba(23, 18, 15, .55) 0%, rgba(23, 18, 15, 0) 60%);
}
.page-head--photo .eyebrow { color: var(--marigold); }
.page-head--photo .section-title { text-shadow: 0 2px 30px rgba(23, 18, 15, .5); }
.page-head--photo .section-lede { color: rgba(246, 239, 226, .92); }
.page-head--photo .served {
  background: rgba(246, 239, 226, .14);
  color: var(--bone);
  backdrop-filter: blur(4px);
}
.page-head--photo .menu-footnote { color: rgba(246, 239, 226, .7); }
/* Inner heads with no served pill or download button (every page but the
   menus) centre their type, so the photographed band fills to the shared
   min-height instead of leaving a gap below a short block. The menus keep
   their top-aligned layout and reach the same height through their own
   content. */
.page-head--inner {
  display: flex; flex-direction: column; justify-content: center;
  padding-top: clamp(48px, 5vw, 72px);
  padding-bottom: clamp(48px, 5vw, 72px);
}
.page-head .section-lede { margin-bottom: 0; }
.page-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }

.welcome__lede {
  max-width: 60ch;
  margin: -18px 0 clamp(32px, 4vw, 52px);
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  color: var(--ink-soft);
}

.hours__note {
  margin: 20px 0 0;
  font-size: .9rem; color: var(--ink-mute);
  max-width: 46ch;
}

/* Every printed address links to the listing, so a visitor can go straight
   to directions from wherever they happen to be reading it. */
.map-link {
  text-decoration: none;
  border-bottom: 1.5px solid var(--marigold);
  transition: color .2s var(--ease), border-color .2s var(--ease);
}
.map-link:hover { color: var(--adobe); border-bottom-color: var(--adobe); }
.site-footer .map-link { border-bottom-color: rgba(229, 160, 44, .55); }
.site-footer .map-link:hover { color: var(--marigold); border-bottom-color: var(--marigold); }
/* The two-line form in the footer must not carry an underline across the
   line break. */
.map-link { display: inline-block; }

/* ---------- Open / closed badge ---------- */

/* One computation in js/site.js fills every [data-status] on the page:
   the header bar, the hero line, the Visit block and the footer. */
.status-pill {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 0;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  white-space: nowrap;
}
.status-pill[hidden] { display: none; }

.status-pill__dot {
  width: 7px; height: 7px; flex: none;
  border-radius: 50%;
  background: currentColor;
}
/* A steady pulse on the dot while the kitchen is open — the one piece of
   ambient motion on the page, and it carries real information. */
.status-pill.is-open .status-pill__dot { animation: pulse 2.4s ease-in-out infinite; }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 currentColor; opacity: 1; }
  50%      { box-shadow: 0 0 0 4px transparent; opacity: .55; }
}

.status-pill--header { color: #7ED39B; }
.status-pill--header.is-closed { color: rgba(246, 239, 226, .6); }
.site-header.is-stuck .status-pill--header,
body:not(.has-hero) .status-pill--header { color: var(--cactus); }
.site-header.is-stuck .status-pill--header.is-closed,
body:not(.has-hero) .status-pill--header.is-closed { color: var(--ink-mute); }

.status-pill--visit { margin-bottom: 20px; color: var(--cactus); }
.status-pill--visit.is-closed { color: var(--adobe); }

.status-pill--footer { margin: 0 0 16px !important; color: #7ED39B; }
.status-pill--footer.is-closed { color: rgba(246, 239, 226, .6); }

/* ---------- Footer hours, grouped ---------- */

.hours-compact {
  display: grid !important; gap: 6px !important;
  margin: 0 0 12px !important;
}
.hours-compact li {
  display: flex; align-items: baseline; gap: 10px;
  color: rgba(246, 239, 226, .78); font-size: .95rem;
}
.hours-compact li span:first-child {
  flex: none; min-width: 4em;
  font-weight: 700;
}
/* Keep a day's hours on one line — "11 AM – 10 PM" was breaking after the
   dash and dropping "PM" to its own row in the narrow footer column. */
.hours-compact li span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Pull quote ---------- */

.quote { padding: clamp(56px, 7vw, 92px) var(--gutter); text-align: center; }
.quote blockquote { margin: 0; }
.quote p {
  max-width: 26ch;
  margin: 0 auto 20px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.5rem);
  line-height: 1.16;
  text-wrap: balance;
}
.quote cite {
  font-style: normal;
  font-size: .76rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--marigold);
}

/* ---------- Menus: teaser, index, pages ---------- */

.menu-teaser { padding: var(--section-y) var(--gutter); background: var(--bone-2); }
.menu-teaser .menu-cards { margin-top: 0; }

/* A grid item stretches, but the link inside it does not unless told to,
   so a card whose title wraps was taller than its neighbours. */


.menu-index { padding: 0 var(--gutter) var(--section-y); }
.menu-cards {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
}
/* Seven cards over four columns is two rows — 4 then 3 — which reads
   better than a single squeezed line. */
@media (min-width: 1040px) {
  .menu-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
.menu-cards {
  margin: clamp(44px, 5vw, 64px) 0 clamp(36px, 5vw, 52px); padding: 0;
  list-style: none;
}
.menu-card {
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.menu-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -28px rgba(23, 18, 15, .8); }
.menu-card__image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: calc(var(--radius) - 5px);
  margin-bottom: 18px;
}
.menu-card h2 { margin: 0 0 6px; font-family: var(--display); font-weight: 400; font-size: 1.5rem; }
.menu-card h2 a { text-decoration: none; }
/* Stretch the card's own link over the whole card so the entire tile is
   the target, without nesting interactive elements. */
.menu-card h2 a::after { content: ""; position: absolute; inset: 0; }
.menu-card { position: relative; }
.menu-card__when {
  margin: 0 0 12px;
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--adobe);
}
.menu-card p:last-child { margin: 0; color: var(--ink-soft); font-size: .97rem; }

.served {
  display: inline-block;
  margin: 26px 0 0;
  padding: 9px 18px;
  border-radius: 999px;
  background: var(--bone-2);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em;
}

/* Titles that jump to a section of the same page: course names on a menu,
   group names on the gallery. The bar sticks under the header so the list
   is reachable from anywhere on a long menu.

   It sits as a direct child of <main> rather than inside the page head —
   a sticky element only sticks within its own parent, and inside the head
   it would come unstuck the moment that section scrolled away. */
.jump-bar {
  position: sticky;
  top: var(--header-h);
  z-index: 40;
  padding: 12px var(--gutter);
  background: var(--bone);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 10px 24px -22px rgba(23, 18, 15, .9);
}
/* Seven chips do not fit a phone, and wrapping them to three rows would
   eat the screen it is meant to free up. They scroll sideways instead. */
.jump-bar > .wrap {
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.jump-bar > .wrap::-webkit-scrollbar { display: none; }
.jump-bar ul {
  display: flex; flex-wrap: nowrap; gap: 8px;
  margin: 0; padding: 0; list-style: none;
}
.jump-bar li { flex: none; }
.jump-bar a {
  display: inline-block;
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--bone-2);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .06em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.jump-bar a:hover { background: var(--adobe); border-color: var(--adobe); color: var(--bone); }

.menu-download {
  display: inline-flex; align-items: center; gap: 10px;
  margin-top: 22px;
}
/* A menu that offers more than one PDF lays its buttons in a row that wraps
   to a stack on narrow screens. The row carries the top margin so the
   buttons sit flush with each other. */
.menu-downloads { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.menu-downloads .menu-download { margin-top: 0; }
.menu-download svg {
  width: 18px; height: 18px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}

.menu-body { padding: clamp(44px, 6vw, 76px) var(--gutter) var(--section-y); }
/* scroll-padding-top on html already accounts for the header. This adds
   only the sticky bar's own height on top — accounting for the header
   twice is what dropped every target a header-height too low before. */
.has-jump .course,
.has-jump .gallery-group { scroll-margin-top: 58px; }
.courses { display: grid; gap: clamp(44px, 6vw, 76px); }
/* A full-width group label above a run of courses (e.g. "Lunch Menu"),
   setting the a la carte courses apart from the prix fixe section above. */
.menu-section {
  margin: 0;
  padding-top: clamp(20px, 3vw, 30px);
  border-top: 2px solid var(--ink);
  font-family: var(--display); font-weight: 400; line-height: 1;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  color: var(--adobe);
}
.course__title {
  margin: 0 0 6px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  color: var(--adobe);
}
.course__note { margin: 0 0 26px; color: var(--ink-mute); font-size: .95rem; }
.course__title + .course__items { margin-top: 26px; }

.course__items {
  display: grid; gap: 4px 48px;
  grid-template-columns: repeat(auto-fit, minmax(min(330px, 100%), 1fr));
  margin: 0; padding: 0; list-style: none;
}
.menu-item { padding: 18px 0; border-bottom: 1px solid var(--line); }
.menu-item__head {
  display: flex; align-items: baseline; gap: 12px;
}
.menu-item__head h3 {
  margin: 0;
  font-size: 1.04rem; font-weight: 700;
}
/* A dotted leader between dish and price — the one place on the site where
   a printed-menu convention beats a web one. */
.menu-item__head::after {
  content: "";
  order: 1;
  flex: 1 1 auto;
  min-width: 18px;
  height: 1px;
  margin-bottom: 4px;
  border-bottom: 1px dotted var(--bone-3);
}
.menu-item__price { order: 2; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.menu-item p { margin: 4px 0 0; color: var(--ink-soft); font-size: .95rem; max-width: 52ch; }

/* The kids brunch menu is a set price, so its dishes carry no per-item price
   — drop the dotted price leader for them. */
.kids-brunch { padding-top: clamp(32px, 4vw, 56px); }
.kids-brunch .section-title { margin-top: 6px; }
.kids-brunch__note { margin: 14px 0 0; max-width: 60ch; color: var(--ink-soft); }
.kids-brunch .menu-download { margin-top: 24px; }
.kids-brunch .courses { margin-top: clamp(28px, 4vw, 40px); }
.kids-brunch .menu-item__head::after { display: none; }
/* Four dishes read best as a 2x2 grid, like the printed kids card. */
.kids-brunch .course__items {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 820px; gap: 4px 56px;
}
@media (max-width: 620px) {
  .kids-brunch .course__items { grid-template-columns: 1fr; }
}
.menu-item__tags {
  display: inline-block; margin-top: 8px;
  font-size: .68rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--cactus);
}
/* Add-ons / upgrades on their own line beneath the description. */
.menu-item__addon {
  margin: 8px 0 0 !important;
  font-size: .85rem !important; font-weight: 700;
  color: var(--adobe) !important;
  letter-spacing: .01em;
}

/* ---------- Prose + aside ---------- */

.prose-section { padding: var(--section-y) var(--gutter); }
.prose-section.is-tint { background: var(--bone-2); }
.prose-layout {
  display: grid; gap: clamp(36px, 5vw, 72px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.prose h2 {
  margin: 0 0 14px;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem);
}
.prose h2 + p { margin-top: 0; }
.prose p { margin: 0 0 18px; max-width: 62ch; color: var(--ink-soft); }
.prose > h2:not(:first-child) { margin-top: 40px; }

.prose-aside {
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
}
.prose-aside h2 {
  margin: 0 0 18px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.prose-aside p { color: var(--ink-soft); font-size: .95rem; }
.prose-aside .btn { width: 100%; margin-top: 10px; }

.facts { margin: 0 0 22px; }
.facts dt {
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute);
}
.facts dd { margin: 2px 0 14px; }

.checklist { margin: 0 0 20px; padding: 0; list-style: none; }
.checklist li {
  position: relative;
  padding: 0 0 0 26px; margin-bottom: 10px;
  color: var(--ink-soft); font-size: .95rem;
}
.checklist li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 3px; border-radius: 2px;
  background: var(--adobe);
}
.aside-note { margin: 0 0 18px; font-size: .9rem; }

/* ---------- Card rows ---------- */

.cards-section { padding: var(--section-y) var(--gutter); }
.cards {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(268px, 100%), 1fr));
  margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none;
}
.card {
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
}
.card h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 400; font-size: 1.4rem;
}
.card p { margin: 0; color: var(--ink-soft); font-size: .97rem; }

/* ---------- Catering: corporate lunch package ---------- */

.package { padding: var(--section-y) var(--gutter); }
.package .wrap { max-width: var(--measure); margin: 0 auto; }
.package__items {
  display: grid; gap: clamp(18px, 2.2vw, 28px);
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  margin: clamp(36px, 5vw, 56px) 0; padding: 0; list-style: none;
}
.package__items li {
  padding: clamp(22px, 2.5vw, 30px);
  background: rgba(246, 239, 226, .04);
  border: 1px solid var(--line-dark);
  border-radius: var(--radius);
}
.package__items h3 {
  margin: 0 0 10px;
  font-family: var(--display); font-weight: 400; font-size: 1.3rem;
}
.package__items p { margin: 0; color: rgba(246, 239, 226, .78); font-size: .95rem; line-height: 1.55; }

.package__terms {
  display: flex; flex-wrap: wrap; gap: 18px 48px;
  margin: clamp(36px, 5vw, 56px) 0 clamp(36px, 5vw, 52px);
  padding-top: clamp(30px, 3.5vw, 40px);
  border-top: 1px solid var(--line-dark);
}
.package__terms p { margin: 0; font-size: 1.02rem; }
.package__terms strong {
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
  color: var(--marigold);
}
.package__terms span { display: block; margin-top: 2px; font-size: .82rem; color: rgba(246, 239, 226, .6); }
/* The download button sits on the dark package section, so it keeps the
   solid marigold fill rather than the dark-on-light default. */
.package .menu-download { --btn-bg: var(--marigold); --btn-bd: var(--marigold); --btn-fg: var(--ink); }

/* ---------- Events ---------- */

.events-section { padding: var(--section-y) var(--gutter); }
.events { margin: clamp(40px, 5vw, 60px) 0 0; padding: 0; list-style: none; }
.event {
  display: grid; gap: 10px 44px;
  grid-template-columns: minmax(0, 190px) minmax(0, 1fr);
  padding: clamp(30px, 3.5vw, 42px) 0;
  border-top: 2px solid var(--ink);
}
.event:last-child { border-bottom: 2px solid var(--ink); }
.event__when {
  margin: 0;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}
.event__when span { display: block; margin-top: 4px; color: var(--adobe); }
.event__body h3 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 400; font-size: 1.5rem;
}
.event__body p { margin: 0 0 12px; color: var(--ink-soft); max-width: 58ch; }
.event__body a { font-weight: 700; font-size: .92rem; }

/* ---------- Gallery ---------- */

.gallery-section { padding: 0 var(--gutter) var(--section-y); }
/* Every tile is one equal cell, so the grid lines up evenly on every row. */
.gallery {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  grid-auto-rows: 220px;
  margin: clamp(32px, 4vw, 48px) 0 clamp(36px, 5vw, 52px); padding: 0;
  list-style: none;
}
.tile {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--bone-2);
}
.tile__open {
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .4s var(--ease);
}
.tile__open:hover img, .tile__open:focus-visible img { transform: scale(1.05); }
.tile__open:focus-visible { outline: 3px solid var(--marigold); outline-offset: -3px; }

/* ---------- Lightbox ---------- */

.lightbox[hidden] { display: none; }
.lightbox {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(12px, 4vw, 48px);
  background: rgba(18, 14, 11, .92);
}
.lightbox__img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: var(--radius);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .8);
}
.lightbox__btn {
  position: absolute;
  display: grid; place-items: center;
  width: 52px; height: 52px;
  border: 0; border-radius: 50%;
  background: rgba(246, 239, 226, .12); color: var(--bone);
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.lightbox__btn:hover { background: rgba(246, 239, 226, .24); }
.lightbox__btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lightbox__close { top: clamp(12px, 3vw, 28px); right: clamp(12px, 3vw, 28px); }
.lightbox__prev { left: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__next { right: clamp(10px, 2vw, 28px); top: 50%; transform: translateY(-50%); }
.lightbox__count {
  position: absolute; bottom: clamp(14px, 3vw, 30px); left: 50%; transform: translateX(-50%);
  font-size: .82rem; letter-spacing: .12em; color: rgba(246, 239, 226, .7);
}
@media (max-width: 560px) {
  .lightbox__prev { left: 8px; }
  .lightbox__next { right: 8px; }
  .lightbox__btn { width: 44px; height: 44px; }
}

.gallery-group + .gallery-group { margin-top: clamp(40px, 5vw, 64px); }
.gallery-section { padding-top: clamp(28px, 4vw, 44px); }
.gallery-heading {
  margin: 0;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--adobe);
}
.gallery-heading + .gallery { margin-top: 18px; }

/* ---------- About: images, closing line, timeline ---------- */

.address-line {
  margin: 24px 0 0;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--ink-mute);
}

.feature-image {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}
.aside-image { display: block; width: 100%; border-radius: var(--radius); }
.aside-caption {
  margin: 10px 0 24px !important;
  font-size: .72rem !important; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-mute) !important;
}

/* Slots waiting on a photograph. Woven like the patio panel so they read as
   deliberate, and labelled with the exact path the file belongs at. */
.feature-image--pending,
.aside-image--pending {
  position: relative;
  display: grid; place-items: center;
  padding: 20px;
  text-align: center;
  background:
    radial-gradient(120% 90% at 50% 40%,
      rgba(255, 255, 255, .10) 0%, rgba(23, 18, 15, 0) 45%, rgba(23, 18, 15, .38) 100%),
    repeating-linear-gradient(180deg,
      var(--adobe) 0 26px, var(--marigold) 26px 34px, var(--bone) 34px 40px,
      var(--adobe-dark) 40px 48px, var(--ink) 48px 65px, var(--cactus) 65px 74px,
      var(--bone-2) 74px 80px, var(--cobalt) 80px 104px, var(--marigold) 104px 110px,
      var(--bone) 110px 118px);
}
.feature-image--pending { height: 320px; }
.aside-image--pending { aspect-ratio: 1 / 1; }
.feature-image--pending .tbd,
.aside-image--pending .tbd {
  max-width: 100%;
  padding: 8px 14px;
  border-radius: 12px;
  background: var(--bone);
  border-bottom: 0;
  font-size: .7rem; font-weight: 700;
  letter-spacing: .06em;
  /* The label carries a file path, which is one long unbreakable token and
     will push the page sideways on a phone unless it is allowed to break. */
  overflow-wrap: anywhere;
}

.prose__closing {
  font-family: var(--display);
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  line-height: 1.2;
  color: var(--adobe) !important;
}

.timeline-section { padding: var(--section-y) var(--gutter); background: var(--bone-2); }
.timeline { margin: clamp(32px, 4vw, 48px) 0 clamp(36px, 5vw, 52px); padding: 0; list-style: none; }
.timeline li {
  display: grid; gap: 8px clamp(24px, 4vw, 56px);
  grid-template-columns: minmax(0, 130px) minmax(0, 1fr);
  padding: 28px 0;
  border-top: 2px solid var(--ink);
}
/* No bottom rule on the last entry — the note below it opens with its own
   border-top, and the two together read as a mistake. */
.timeline__year {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  line-height: 1;
  color: var(--adobe);
  font-variant-numeric: tabular-nums;
}
.timeline h3 {
  margin: 0 0 8px;
  font-family: var(--display); font-weight: 400; font-size: 1.4rem;
}
.timeline p { margin: 0 0 10px; color: var(--ink-soft); max-width: 58ch; }
.timeline a { font-weight: 700; font-size: .88rem; }

@media (max-width: 640px) {
  .timeline li,
  .event { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Reviews ---------- */

.reviews { padding: var(--section-y) var(--gutter); background: var(--bone-2); }
/* The live review carousel sits under the heading where the lede used to,
   so it carries that spacing itself. */
.reviews-widget { margin-top: clamp(28px, 4vw, 44px); }

.review-grid {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(266px, 100%), 1fr));
  margin: 0; padding: 0; list-style: none;
}

.review-card {
  display: flex; flex-direction: column;
  padding: clamp(26px, 3vw, 34px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
}

.stars { display: flex; gap: 3px; margin: 0 0 16px; }
.star { width: 17px; height: 17px; fill: var(--marigold); }
.star.is-empty { fill: rgba(23, 18, 15, .16); }

.review-card blockquote { margin: 0 0 20px; }
.review-card blockquote p {
  margin: 0;
  font-size: 1.02rem;
  color: var(--ink-soft);
  text-wrap: pretty;
}
/* Hanging quote mark, so the card reads as speech without spending a line
   on a decorative glyph. */
.review-card blockquote p::before { content: "\201C"; margin-left: -.42em; }
.review-card blockquote p::after { content: "\201D"; }

.review-card__by {
  display: flex; flex-direction: column; gap: 2px;
  margin: auto 0 0; padding-top: 16px;
  border-top: 1px solid var(--line);
}
.review-card__name { font-weight: 700; font-size: .95rem; }
.review-card__source {
  font-size: .72rem; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mute);
}

/* A card nobody has filled in yet. Deliberately flat and grey so it cannot
   be mistaken for something a guest actually wrote. */
.review-card--placeholder {
  background: transparent;
  border-style: dashed;
  border-color: rgba(184, 67, 42, .45);
}
.review-card--placeholder .star { fill: rgba(23, 18, 15, .18); }
.review-card--placeholder blockquote p,
.review-card--placeholder .review-card__name { color: var(--ink-mute); }
.review-card--placeholder .review-card__by { border-top-color: rgba(184, 67, 42, .3); }
.review-card__flag {
  align-self: flex-start;
  margin: 0 0 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--adobe);
  color: var(--bone);
  font-size: .7rem; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase;
}

/* ---------- Sister restaurants ---------- */

.sisters { padding: var(--section-y) var(--gutter); background: var(--bone-2); }
.sisters__list {
  display: grid; gap: clamp(16px, 2vw, 24px);
  grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
  margin: clamp(32px, 4vw, 48px) 0 0; padding: 0; list-style: none;
}
.sisters__list h3 {
  margin: 0 0 6px; padding-top: 16px;
  border-top: 2px solid var(--ink);
  font-family: var(--display); font-weight: 400; font-size: 1.34rem;
}
.sisters__list a { text-decoration: none; }
.sisters__list a:hover { color: var(--adobe); }
.sisters__list p { margin: 0; color: var(--ink-soft); }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
  .bar__layout, .patio__layout, .visit__layout,
  /* prose + aside was never in this list, so it stayed two columns all
     the way down and crushed the aside to 102px on a 320px screen. */
  .prose-layout { grid-template-columns: minmax(0, 1fr); }
  .patio__panel { aspect-ratio: 16 / 9; }
}

/* Seven nav items plus a phone number and a CTA stop fitting well before
   the usual tablet breakpoint, so the panel takes over at 1180px. */
@media (max-width: 1180px) {
  :root { --header-h: 76px; --band-h: 10px; }
  .site-header__brand img { height: 58px; }
  .site-nav, .site-header__cta { display: none; }
  .nav-toggle { display: block; margin-left: auto; }
  .hero { padding-bottom: calc(128px + var(--band-h)); }
  .scroll-cue span { display: none; }
  .menu__note .btn { margin-left: 0; }
  .site-footer__top { grid-template-columns: minmax(0, 1fr); }
  .site-footer nav ul { justify-content: flex-start; }
}

@media (max-width: 700px) {
  .site-header__brand img { height: 46px; }
  .status-pill--header { padding: 6px 12px 6px 10px; }
}

/* Home hero on phones: a fixed 300px video band, then the eyebrow, headline,
   lede and buttons stacked below on the tan (bone) background. The .hero class
   is used only on the home page, so this is scoped to that hero alone. */
@media (max-width: 700px) {
  .hero {
    display: flex; flex-direction: column;
    min-height: 0;
    padding: 0;
    background: var(--bone);
    color: var(--ink);
  }
  .hero__media {
    position: relative; inset: auto;
    order: 1;
    width: 100%; height: 300px; flex: none;
  }
  .hero__scrim { display: none; }
  .hero .sarape-band { position: static; order: 2; }
  .hero__content {
    order: 3;
    max-width: none;
    padding: 28px var(--gutter) 44px;
    color: var(--ink);
  }
  .hero__eyebrow { margin-bottom: 14px; color: var(--ink-mute); }
  .hero__eyebrow .status.is-closed { color: var(--ink-mute); }
  .hero__title { color: var(--ink); text-shadow: none; margin-bottom: 16px; }
  .hero__br { display: none; }
  .hero__lede { max-width: none; margin-bottom: 26px; color: var(--ink-soft); }
  .hero__actions .btn--ghost {
    --btn-fg: var(--ink);
    --btn-bd: rgba(23, 18, 15, .35);
  }
  .hero__actions .btn--ghost:hover {
    --btn-bg: rgba(23, 18, 15, .06);
    --btn-bd: var(--ink);
  }
  /* Sound toggle sits in the lower-right of the 300px video band; the
     translate pins its bottom edge 12px above the band's lower edge
     regardless of the button's height. The scroll cue is redundant now. */
  .sound-toggle {
    top: 300px; right: 12px; bottom: auto;
    transform: translateY(calc(-100% - 12px));
  }
  .scroll-cue { display: none; }
}

@media (max-width: 560px) {
  body { font-size: 16px; }
  .hero__actions .btn { flex: 1 1 100%; }
  /* The eyebrow wraps to two lines here; the separator dot would be left
     dangling at the end of the first one. */
  .hero__eyebrow { gap: 4px 12px; }
  .hero__eyebrow .dot { display: none; }
  .sound-toggle__label { display: none; }
  .sound-toggle { padding: 10px; }
  .order__actions .btn { flex: 1 1 100%; }
  .hours__day { min-width: 8ch; letter-spacing: .1em; }
}

/* ---------- Print ---------- */

/* Also what tools/build-menu-pdfs.js prints the downloadable menu from, so
   this stylesheet is the PDF's design as much as the browser's. */
@media print {
  .site-header, .mobile-nav, .sarape-band, .order, .site-footer,
  .course-jump, .menu-download, .status-pill, .skip-link { display: none !important; }

  body { background: #fff; color: #000; font-size: 11pt; }
  .page-head { padding: 0 0 18pt; }
  .menu-body { padding: 0; }
  .wrap { max-width: none; }

  .section-title { font-size: 26pt; margin-bottom: 6pt; }
  .section-lede { font-size: 11pt; margin-bottom: 8pt; color: #333; }
  .served { background: none; padding: 0; font-size: 9.5pt; }

  .courses { gap: 20pt; }
  .course__title { font-size: 15pt; margin-bottom: 2pt; }
  /* Keep a course heading with at least the start of its list. */
  .course { break-inside: avoid; }
  .menu-item { break-inside: avoid; padding: 6pt 0; }
  .menu-item__head h3 { font-size: 10.5pt; }
  .menu-item p { font-size: 9.5pt; color: #333; }
  .menu-item__tags { color: #555; }

  /* The address belongs on a menu someone has printed and carried off. */
  .page-head .wrap::after {
    content: "Los Sarapes Horsham · 1101 Horsham Rd, Ambler, PA 19002 · (215) 654-5002";
    display: block;
    margin-top: 10pt;
    font-size: 9pt;
    letter-spacing: .04em;
    color: #444;
  }
}

/* ---------- Reduced motion ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .btn:hover, .dish-card:hover { transform: none; }
}

/* ---------- FAQ (Home, Menus, Events, Contact) ---------- */
.faq { padding: var(--section-y) var(--gutter); }
.faq .wrap { max-width: var(--measure); margin: 0 auto; }
.faq__list { margin-top: 28px; display: grid; gap: 12px; max-width: 820px; }
.faq__item {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bone);
  overflow: hidden;
}
.faq__item summary {
  cursor: pointer; list-style: none;
  padding: 18px 22px;
  font-family: var(--display); font-weight: 400;
  font-size: 1.1rem; line-height: 1.25;
  display: flex; justify-content: space-between; align-items: center; gap: 18px;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; color: var(--adobe);
  font-size: 1.5rem; line-height: 1; flex: 0 0 auto;
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__answer { padding: 0 22px 20px; }
.faq__answer p { margin: 0; color: var(--ink-soft); max-width: 70ch; font-size: .98rem; }

/* ---------- Contact page: info card beside the map ---------- */
.visit-grid {
  display: grid; gap: clamp(22px, 3vw, 38px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  align-items: stretch; margin-top: 32px;
}
.visit-card {
  display: flex; flex-direction: column; gap: 26px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--bone);
}
.visit-block h3 {
  margin: 0 0 12px;
  font-size: .8rem; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-mute);
}
.visit-address { margin: 0 0 8px; font-size: 1.08rem; }
.visit-address a { text-decoration: none; border-bottom: 1.5px solid var(--marigold); }
.visit-address a:hover { color: var(--adobe); }
.visit-note { margin: 0 0 12px; color: var(--ink-soft); font-size: .95rem; max-width: 52ch; }
.visit-directions { font-weight: 600; }
.visit-block .hours { margin: 0; }
.visit-block .aside-note { margin: 12px 0 0; color: var(--ink-mute); font-size: .9rem; }
.visit-block .facts { margin: 0; }
.visit-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }
.visit-map { min-height: 420px; }
.visit-map__frame {
  display: block; width: 100%; height: 100%; min-height: 420px;
  border: 1px solid var(--line); border-radius: var(--radius);
}

.connect { padding: 0 var(--gutter) var(--section-y); text-align: center; }
.connect .wrap { max-width: var(--measure); margin: 0 auto; }
.connect .eyebrow { justify-content: center; }
.social--contact {
  list-style: none; padding: 0;
  justify-content: center; gap: 14px;
}
.social--contact a { width: 46px; height: 46px; filter: none; }
.social--contact svg, .social--contact .social-img { width: 30px; height: 30px; }

@media (max-width: 860px) {
  .visit-grid { grid-template-columns: minmax(0, 1fr); }
  .visit-map { min-height: 320px; }
  .visit-map__frame { min-height: 320px; }
}