/* ==========================================================================
   Mesón Sabika — design system

   Palette is their own, sampled from mesonsabika.com:
     #23356F  brand navy      (wordmark, navigation, headings)
     #4777AC  brand blue      (secondary type and links)
     #BF382E  brand red       (Reserve / Gift Card buttons, the logo rose)
     #F2F0E8  brand cream     (section backgrounds)

   Everything below is derived from those four. The deep grounds are the brand
   navy taken down in value; the accent is the brand red lifted in value so it
   still holds contrast on navy. No hue is introduced that isn't already theirs.

   Type:    Fraunces (display, optical) · Jost (text / UI)
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* --- the four brand colours, exactly as measured --- */
  --navy:       #23356f;
  --navy-mid:   #4777ac;
  --rojo:       #bf382e;
  --cream:      #f2f0e8;

  /* --- grounds: the brand navy, darkened --- */
  --noche:      #0e1730;
  --noche-2:    #14203f;
  --noche-3:    #24325c;

  /* --- papers: the brand cream, warmed a touch for large fields --- */
  --linen:      #f6f4ee;
  --linen-2:    #eae7dc;
  --linen-3:    #d7d3c5;

  /* --- the red, and the red lifted for use on navy --- */
  --rioja:      #bf382e;
  --rioja-lt:   #d9645a;
  /* the brand red lifted just far enough to clear contrast on navy (≈4.9:1),
     without drifting into pink */
  --azafran:    #d9705f;   /* accent on dark grounds */
  --azafran-lt: #e5897a;

  --olivo:      #4777ac;
  --stone:      #7f8aa4;
  --stone-lt:   #aab2c6;

  --ink-on-dark:      var(--linen);
  --muted-on-dark:    #a9b2c7;
  --ink-on-light:     #16224a;
  --muted-on-light:   #59637a;

  /* type */
  --display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --text:    "Jost", "Avenir Next", "Segoe UI", system-ui, sans-serif;

  --fs-eyebrow: clamp(.66rem, .58rem + .2vw, .76rem);
  --fs-body:    clamp(1rem, .96rem + .22vw, 1.075rem);
  --fs-lead:    clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-h4:      clamp(1.1rem, 1rem + .5vw, 1.35rem);
  --fs-h3:      clamp(1.5rem, 1.25rem + 1.1vw, 2.1rem);
  --fs-h2:      clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --fs-h1:      clamp(2.6rem, 1.7rem + 3.5vw, 5.3rem);

  /* space — one scale, used everywhere. If a gap isn't on this ladder,
     it's a mistake, not a decision. */
  --sp-1: .5rem;    /*  8 */
  --sp-2: .75rem;   /* 12 */
  --sp-3: 1rem;     /* 16 */
  --sp-4: 1.5rem;   /* 24 */
  --sp-5: 2rem;     /* 32 */
  --sp-6: 3rem;     /* 48 */
  --sp-7: 4rem;     /* 64 */
  --sp-8: 6rem;     /* 96 */

  --gutter: clamp(1.25rem, .8rem + 2.2vw, 3rem);
  --section-y: clamp(4.75rem, 3rem + 8vw, 11rem);
  --maxw: 1320px;
  --maxw-narrow: 720px;
  --headerH: 84px;

  /* motion */
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-mask: cubic-bezier(.76, 0, .24, 1);

  /* ivory hairlines read cleaner on navy than a tinted rule would */
  --hairline: color-mix(in srgb, var(--linen) 22%, transparent);
  --hairline-light: color-mix(in srgb, var(--navy) 13%, transparent);
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  /* white site: light is the default, dark is reserved for photography */
  background: #fff;
  color: var(--ink-on-light);
  font-family: var(--text);
  font-size: var(--fs-body);
  font-weight: 300;
  line-height: 1.68;
  letter-spacing: .005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
  hanging-punctuation: first last;
  overflow-x: hidden;
}
p, li, dd, figcaption { text-wrap: pretty; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4, h5 { margin: 0; font-weight: 400; }
p { margin: 0 0 var(--sp-4); }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

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

::selection { background: var(--rioja); color: var(--linen); }

.skip-link {
  position: fixed; top: .6rem; left: .6rem; z-index: 999;
  padding: .7rem 1.1rem; background: var(--linen); color: var(--noche);
  font: 500 .8rem/1 var(--text); letter-spacing: .12em; text-transform: uppercase;
  transform: translateY(-160%); transition: transform .25s var(--ease);
}
.skip-link:focus { transform: none; }

/* ---------- 3. Typography primitives ---------- */
.display {
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
  line-height: .96;
  letter-spacing: -.018em;
  text-wrap: balance;
}
.display em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 40, "WONK" 1;
  color: var(--azafran-lt);
}
/* Optical tracking: high-contrast serifs need to tighten as they grow. */
.h1 { font-size: var(--fs-h1); letter-spacing: -.026em; }
.h2 { font-size: var(--fs-h2); letter-spacing: -.021em; }
.h3 { font-size: var(--fs-h3); line-height: 1.06; letter-spacing: -.014em; }
.h4 { font-size: var(--fs-h4); line-height: 1.2; letter-spacing: -.01em; }
/* italics in Fraunces run narrow — give them back a hair of space */
.display em { letter-spacing: -.008em; padding-right: .04em; }

.eyebrow {
  margin: 0;
  display: inline-flex; align-items: center; gap: .7em;
  font-family: var(--text);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: var(--azafran);
}
.eyebrow::before {
  content: ""; width: 2.2em; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--azafran));
}
.eyebrow.is-centered::after {
  content: ""; width: 2.2em; height: 1px; flex: none;
  background: linear-gradient(270deg, transparent, var(--azafran));
}
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted-on-dark); font-weight: 300; }
.hero .lead, .phero .lead, .split .lead { color: var(--linen-3); text-shadow: 0 1px 14px rgba(14,23,48,.65); }
.muted { color: var(--muted-on-dark); }
.tabular { font-variant-numeric: tabular-nums; }

/* ---------- 3b. Section header ----------
   Every section opener is the same four parts in the same order:
     section number → eyebrow → display headline → lead
   One component owns that rhythm so no section can drift from it. */
.sect-head { display: flex; flex-direction: column; align-items: flex-start; max-width: 46rem; }
.sect-head > * { margin: 0; }
.sect-head > * + * { margin-top: var(--sp-3); }
.sect-head .section-no { margin-bottom: 0; }
.sect-head .section-no + .eyebrow { margin-top: var(--sp-1); }
.sect-head .eyebrow + .display { margin-top: var(--sp-2); }
.sect-head .display + * { margin-top: var(--sp-4); }
/* a button row needs more air than a paragraph does */
.sect-head .hero__cta, .sect-head .ticks { margin-top: var(--sp-5); }
.split__inner.sect-head { max-width: 40rem; }
.sect-head .lead { max-width: 44ch; }
.sect-head.is-centered { align-items: center; text-align: center; margin-inline: auto; }
.sect-head.is-centered .lead { margin-inline: auto; }

/* the body of a section always clears its header by the same amount */
.sect-head + * { margin-top: var(--sp-6); }
.sect-head + .stats,
.sect-head + .rail,
.sect-head + .awards-panel { margin-top: var(--sp-7); }

.sect-foot { margin-top: var(--sp-7); }
/* The floral scroll from their own theme, masked so it can be painted in the
   brand navy instead of the original flat black. */
.floral-band {
  height: clamp(44px, 5.5vw, 78px);
  background: var(--navy);
  opacity: .16;
  -webkit-mask-image: url("https://www.mesonsabika.com/wp-content/themes/mesonsabika/assets/images/black-border.png");
          mask-image: url("https://www.mesonsabika.com/wp-content/themes/mesonsabika/assets/images/black-border.png");
  -webkit-mask-repeat: repeat-x; mask-repeat: repeat-x;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: auto 100%; mask-size: auto 100%;
}
.floral-band--flip { transform: scaleY(-1); }
.floral-band--top { margin-bottom: var(--sp-7); }
.floral-band--bottom { margin-top: var(--sp-7); }

.sect-bar { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: flex-end; }
.section--flush { padding-top: 0; }
.section--tight-top { padding-top: var(--sp-7); }
.contact-card + .contact-card { margin-top: var(--sp-4); }
.contact-card--tight { padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem); }
.contact-card .display + .card__note { margin-top: var(--sp-2); }
.contact-card .inquiry { margin-top: var(--sp-4); }

/* the wedding / private-event pages use the same ladder as the homepage */
.packages--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.awards-panel--narrow { max-width: 900px; margin-inline: auto; }
.pkg__cta { margin-top: var(--sp-5); }
.pkg { display: flex; flex-direction: column; }
.pkg .pkg__cta { margin-top: auto; padding-top: var(--sp-5); }
.form__note { font-size: .84rem; margin-top: var(--sp-2); }
.form__foot { font-size: .84rem; margin-top: var(--sp-4); }
.table__note { font-size: .88rem; margin-top: var(--sp-3); }
.footer__hours { font-size: .92rem; margin-top: var(--sp-3); }
.menu-note--inline { margin-bottom: var(--sp-5); }
.happy-intro { align-items: start; margin-bottom: var(--sp-8); }
.contact-card--onphoto {
  margin-top: var(--sp-5); max-width: 34rem;
  background: color-mix(in srgb, var(--noche) 72%, transparent);
  border-color: color-mix(in srgb, var(--linen) 22%, transparent);
  backdrop-filter: blur(10px);
}
/* dark card sitting on a photograph — keep its own type colours */
.contact-card--onphoto, .contact-card--onphoto .muted { color: var(--linen-3); }
.contact-card--onphoto .display { color: var(--linen); }
.contact-card--onphoto .eyebrow { color: var(--azafran); }
.contact-card--onphoto .eyebrow::before { background: linear-gradient(90deg, transparent, var(--azafran)); }
.contact-card--onphoto .field > span { color: var(--azafran); }
.contact-card--onphoto input, .contact-card--onphoto select, .contact-card--onphoto textarea {
  background-color: color-mix(in srgb, var(--linen) 8%, transparent);
  border-color: color-mix(in srgb, var(--linen) 20%, transparent);
  color: var(--linen);
}
.contact-card--onphoto select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e5897a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.contact-card--onphoto select option { background: var(--noche-2); color: var(--linen); }
.contact-card--onphoto a { color: var(--azafran-lt); }
.sect-head .sect-foot { margin-top: var(--sp-5); }
.sect-head p { margin-bottom: 0; }
.sect-head .info, .sect-head .signup { margin-top: var(--sp-6); }
.feature__more { margin-top: var(--sp-4) !important; }
.card__note { font-size: .95rem; }
.card__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-4); }
.visit__media { margin-bottom: var(--sp-5); }
.hours-status { margin-top: var(--sp-2); }
.footer__blurb { margin-top: var(--sp-4); font-size: .92rem; max-width: 30ch; }
.footer__addr { margin-top: var(--sp-4); font-size: .92rem; }
.form__note { font-size: .82rem; margin-top: var(--sp-1); }
.sect-foot.is-centered { text-align: center; }

/* ---------- 4. Layout ---------- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: var(--maxw-narrow); }
.wrap--wide { max-width: 1560px; }
.section { padding-block: var(--section-y); position: relative; }
[id] { scroll-margin-top: calc(var(--headerH) + 1.5rem); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.stack > * + * { margin-top: var(--gap, 1.4rem); }
.grid { display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4.5rem); }
@media (min-width: 900px) { .grid--2 { grid-template-columns: 1fr 1fr; align-items: center; } }

/* surfaces
   .on-light  → white section (the default field of the site)
   .tint      → the same, on their brand cream, for vertical rhythm
   Dark type/rules are reserved for sections that sit on photography. */
.on-light { background: #fff; color: var(--ink-on-light); }
.on-light.tint, .tint { background: var(--linen); }
.on-light .lead, .on-light .muted { color: var(--muted-on-light); }
.on-light .display em { color: var(--rioja); }
.on-light .eyebrow { color: var(--rioja); }
.on-light .eyebrow::before { background: linear-gradient(90deg, transparent, var(--rioja)); }
.on-light .eyebrow.is-centered::after { background: linear-gradient(270deg, transparent, var(--rioja)); }
.on-noche-2 { background: var(--noche-2); }

/* ---------- 5. Ornaments ---------- */
/* filmic grain over dark sections */
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  opacity: .045; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* azulejo — Spanish tile lattice, used as a whisper-quiet texture */
.azulejo { position: relative; }
.azulejo::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72' viewBox='0 0 72 72'%3E%3Cg fill='none' stroke='%2323356f' stroke-width='1.1'%3E%3Cpath d='M36 4 44 20 60 12 52 28 68 36 52 44 60 60 44 52 36 68 28 52 12 60 20 44 4 36 20 28 12 12 28 20Z'/%3E%3Ccircle cx='36' cy='36' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 72px 72px;
}
@media (max-width: 620px) {
  .azulejo::before { opacity: .04; background-size: 54px 54px; }
}

/* 8-point star divider */
.ornament {
  display: flex; align-items: center; justify-content: center; gap: 1.1rem;
  color: var(--azafran);
}
.ornament::before, .ornament::after {
  content: ""; height: 1px; flex: 1 1 auto; max-width: 9rem;
  background: linear-gradient(90deg, transparent, var(--hairline), transparent);
}
.ornament svg { width: 15px; height: 15px; fill: currentColor; opacity: .9; }

/* arch — Andalusian arch crop for portraits */
.arch { border-radius: 100vmax 100vmax 3px 3px; overflow: hidden; }
.arch-sm { border-radius: 14rem 14rem 3px 3px; overflow: hidden; }

.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.on-light .rule { background: color-mix(in srgb, var(--ink-on-light) 14%, transparent); }

/* framed media
   ------------------------------------------------------------------
   Three independent transform channels, so effects never fight:
     transform  → the clip/mask reveal zoom
     scale      → hover zoom
     translate  → scroll parallax
   ------------------------------------------------------------------ */
.media { position: relative; overflow: hidden; background: var(--noche-3); isolation: isolate; }
.media img {
  width: 100%; height: 100%; object-fit: cover;
  /* House grade. Their photography comes from a dozen sources — phone shots of
     dining rooms next to pro wedding coverage. A shared curve makes it one set. */
  filter: saturate(.94) contrast(1.04) brightness(1.01);
  transition: scale 1.1s var(--ease-out), filter .6s var(--ease);
}
/* Split-tone: warm highlights, brand-navy shadows. This is what ties a folder of
   mixed-source photographs to a navy site instead of letting them fight it. */
.media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(205deg, rgba(214,170,126,.10), rgba(191,56,46,.04) 45%, rgba(35,53,111,.15));
  mix-blend-mode: soft-light;
}
.media--nowash::after { display: none; }
.media--tall { aspect-ratio: 3 / 4; }
.media--wide { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1; }
.media--portrait { aspect-ratio: 4 / 5; }
a:hover > .media img, .media:hover img, .card:hover .media img { scale: 1.045; filter: saturate(.97) contrast(1.04) brightness(1.02); }

/* uses ::before so it can sit on the same element as .media (which owns ::after) */
.gold-frame { position: relative; }
.gold-frame::before {
  content: ""; position: absolute; inset: 12px; pointer-events: none; z-index: 3;
  border: 1px solid color-mix(in srgb, var(--azafran) 30%, transparent);
  border-radius: inherit;
}

/* ---------- 6. Buttons ---------- */
.btn {
  /* their Reserve button is solid brick red — so is ours */
  --btn-bg: var(--rojo);
  --btn-fg: var(--linen);
  --btn-bd: var(--rojo);
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .65em;
  padding: 1.02em 1.9em;
  font-family: var(--text); font-size: .78rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; white-space: nowrap;
  color: var(--btn-fg); background: var(--btn-bg);
  border: 1px solid var(--btn-bd); border-radius: 2px;
  cursor: pointer; overflow: hidden; isolation: isolate;
  transition: color .38s var(--ease), border-color .38s var(--ease), background-color .38s var(--ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--noche);
  transform: translateY(101%);
  transition: transform .45s var(--ease-out);
}
/* red fills to brand navy on hover — both colours are theirs */
.btn::before { background: var(--navy); }
.btn:hover { color: var(--linen); border-color: var(--navy); }
.btn:hover::before { transform: translateY(0); }

.btn--ghost { --btn-bg: transparent; --btn-fg: var(--linen); --btn-bd: color-mix(in srgb, var(--linen) 38%, transparent); }
.btn--ghost::before { background: var(--linen); }
.btn--ghost:hover { color: var(--noche); border-color: var(--linen); }

/* the navy counterpart, for when a second solid button sits beside the red one */
.btn--rioja { --btn-bg: var(--navy); --btn-fg: var(--linen); --btn-bd: var(--navy); }
.btn--rioja::before { background: var(--rojo); }
.btn--rioja:hover { color: var(--linen); border-color: var(--rojo); }

.btn--dark { --btn-bg: transparent; --btn-fg: var(--ink-on-light); --btn-bd: color-mix(in srgb, var(--ink-on-light) 30%, transparent); }
.btn--dark::before { background: var(--noche); }
.btn--dark:hover { color: var(--linen); border-color: var(--noche); }

.btn--sm { padding: .8em 1.4em; font-size: .7rem; }

/* text link with drawn underline */
.link {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .78rem; font-weight: 500; letter-spacing: .2em; text-transform: uppercase;
  color: var(--azafran); padding-bottom: .35em; position: relative;
}
.link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: currentColor; transform-origin: right; transform: scaleX(1);
  transition: transform .45s var(--ease-out);
}
.link:hover::after { transform-origin: left; animation: draw .6s var(--ease-out); }
@keyframes draw { 0% { transform: scaleX(1); transform-origin: right; } 49% { transform: scaleX(0); transform-origin: right; } 50% { transform: scaleX(0); transform-origin: left; } 100% { transform: scaleX(1); transform-origin: left; } }
.link svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
.link:hover svg { transform: translateX(4px); }
.on-light .link { color: var(--rioja); }

/* ---------- 7. Header ---------- */
/* Opaque white bar that stays in flow, so their navy logo reads at full strength
   and the hero starts cleanly beneath it. */
.header {
  position: sticky; top: 0; z-index: 100;
  background: #fff;
  border-bottom: 1px solid var(--hairline-light);
  transition: box-shadow .45s var(--ease);
}
.header.is-stuck { box-shadow: 0 6px 26px -18px rgba(35,53,111,.55); }

.header__bar {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem;
  padding-block: clamp(.85rem, .6rem + 1vw, 1.5rem);
  transition: padding .45s var(--ease);
}
.header.is-stuck .header__bar { padding-block: .7rem; }

.brand { justify-self: start; display: inline-flex; align-items: center; }
.brand img {
  width: clamp(150px, 15vw, 215px);
  /* their logo, in their own navy and red — no inversion */
  opacity: 1;
  transition: width .45s var(--ease), opacity .3s var(--ease);
}
.header.is-stuck .brand img { width: clamp(132px, 12vw, 172px); }
.brand:hover img { opacity: 1; }

.nav { display: none; }
@media (min-width: 1080px) { .nav { display: flex; align-items: center; gap: clamp(.85rem, .1rem + 1.35vw, 1.9rem); } }
.nav a {
  position: relative; font-size: .74rem; font-weight: 400;
  letter-spacing: .19em; text-transform: uppercase; color: var(--navy);
  padding-block: .5rem; opacity: .85; transition: opacity .3s var(--ease), color .3s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--rojo); transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out);
}
.nav a:hover, .nav a[aria-current="page"] { opacity: 1; color: var(--rojo); }
.nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header__actions { justify-self: end; display: flex; align-items: center; gap: .6rem; }
.header__actions .btn { display: none; }
/* keep a booking CTA in reach on every screen down to small phones */
@media (min-width: 340px) { .header__actions .btn { display: inline-flex; padding: .78em 1.05em; font-size: .66rem; letter-spacing: .16em; } }
@media (min-width: 1080px) { .header__actions .btn { padding: .8em 1.4em; font-size: .7rem; letter-spacing: .2em; } }
.btn--quiet {
  --btn-bg: transparent; --btn-fg: var(--navy);
  --btn-bd: color-mix(in srgb, var(--navy) 26%, transparent);
}
.btn--quiet::before { background: var(--navy); }
.btn--quiet:hover { color: #fff; border-color: var(--navy); }
.header__actions .btn--quiet { display: none; }
@media (min-width: 1180px) { .header__actions .btn--quiet { display: inline-flex; } }

.header__tel {
  display: none; font-size: .74rem; letter-spacing: .16em; color: var(--muted-on-light);
}
@media (min-width: 1500px) { .header__tel { display: inline-block; } }
.header__tel:hover { color: var(--rojo); }

/* burger */
.burger {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 46px; height: 46px; padding: 0 11px; background: none; border: 0; cursor: pointer;
}
@media (min-width: 1080px) { .burger { display: none; } }
.burger span { display: block; height: 1.5px; background: var(--navy); transition: transform .4s var(--ease), opacity .25s; }
.burger span:nth-child(2) { width: 70%; margin-left: auto; }
body.nav-open .burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
body.nav-open .burger span:nth-child(2) { opacity: 0; }
body.nav-open .burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* mobile drawer */
.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: #fff;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-1.5%);
  transition: opacity .45s var(--ease), transform .55s var(--ease-out), visibility .45s;
}
body.nav-open .drawer { opacity: 1; visibility: visible; transform: none; }
.drawer__links { display: flex; flex-direction: column; gap: .1rem; }
.drawer__links a {
  font-family: var(--display); font-size: clamp(1.9rem, 1.2rem + 3.6vw, 3.1rem);
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
  line-height: 1.22; color: var(--navy);
  opacity: 0; transform: translateY(14px);
  transition: color .3s var(--ease);
}
body.nav-open .drawer__links a { animation: drawerIn .6s var(--ease-out) forwards; }
.drawer__links a:hover { color: var(--rojo); }
@keyframes drawerIn { to { opacity: 1; transform: none; } }
.drawer__foot { margin-top: 2.6rem; display: flex; flex-wrap: wrap; gap: .8rem; }
.drawer__meta { margin-top: 2rem; font-size: .82rem; letter-spacing: .04em; color: var(--muted-on-light); }

/* ---------- 8. Hero ---------- */
.hero {
  position: relative; min-height: calc(100svh - var(--headerH)); display: flex; align-items: flex-end;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
  padding-bottom: clamp(2.25rem, 1rem + 4vw, 4.5rem);
  overflow: hidden; isolation: isolate;
}
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg picture, .phero__bg picture { display: block; width: 100%; height: 100%; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; animation: kenburns 30s ease-in-out infinite alternate; }
@keyframes kenburns { from { transform: scale(1.03) translate3d(0,0,0); } to { transform: scale(1.14) translate3d(-2%, -1.5%, 0); } }
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(100deg, rgba(14,23,48,.86) 0%, rgba(14,23,48,.70) 28%, rgba(14,23,48,.30) 54%, rgba(14,23,48,0) 76%),
    linear-gradient(to top, rgba(14,23,48,.78) 0%, rgba(14,23,48,.12) 42%, rgba(14,23,48,0) 68%, rgba(14,23,48,.34) 100%),
    radial-gradient(130% 90% at 8% 70%, rgba(191,56,46,.20), transparent 62%);
}
@media (max-width: 860px) {
  .hero::before {
    background:
      linear-gradient(to top, rgba(14,23,48,.95) 26%, rgba(14,23,48,.68) 60%, rgba(14,23,48,.72) 100%);
  }
  .hero__bg img { object-position: 48% 44%; }
  .hero__title { max-width: 100%; }
}
@media (max-width: 620px) {
  .hero { padding-top: 2.5rem; }
  .hero__cta { gap: .65rem; }
  .hero__cta .btn { flex: 1 1 100%; }
  .hero__meta { gap: .5rem 1rem; }
}
.hero__inner { position: relative; width: 100%; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.6rem; }
.hero__meta .status::before { content: "·"; color: var(--stone); margin-right: .9rem; }
@media (max-width: 560px) { .hero__meta .status::before { display: none; } }
.hero__title { margin: var(--sp-2) 0 var(--sp-4); max-width: 15ch; text-shadow: 0 2px 30px rgba(14,23,48,.5); }
.hero__sub { max-width: 36ch; font-size: clamp(1rem, .95rem + .35vw, 1.2rem); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(2.5rem, 1rem + 6vw, 6rem);
  display: none; align-items: center; gap: .8rem;
  font-size: .66rem; letter-spacing: .3em; text-transform: uppercase; color: var(--muted-on-dark);
  writing-mode: vertical-rl;
}
@media (min-width: 900px) { .hero__scroll { display: flex; } }
.hero__scroll::after {
  content: ""; width: 1px; height: 64px;
  background: linear-gradient(to bottom, var(--azafran), transparent);
  animation: scrollPulse 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes scrollPulse { 0%,100% { transform: scaleY(.3); opacity: .4; } 50% { transform: scaleY(1); opacity: 1; } }

/* reservation bar */
.reserve {
  margin-top: var(--sp-6);
  background: color-mix(in srgb, var(--noche) 72%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid color-mix(in srgb, var(--azafran) 26%, transparent);
  border-radius: 3px;
  padding: clamp(1rem, .7rem + 1vw, 1.35rem);
  display: grid; gap: .7rem;
  grid-template-columns: 1fr;
  max-width: 880px;
}
/* On phones the two hero buttons do this job; three stacked selects would eat the fold. */
@media (max-width: 759px) { .reserve { display: none; } }
@media (min-width: 760px) { .reserve { grid-template-columns: repeat(3, minmax(0,1fr)) auto; align-items: end; } }
.field { display: grid; gap: .4rem; min-width: 0; }
.field > span {
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; color: var(--azafran);
}
.field select, .field input {
  width: 100%; padding: .82rem .9rem;
  background: color-mix(in srgb, var(--linen) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--linen) 18%, transparent);
  border-radius: 2px; color: var(--linen);
  font-size: .92rem; letter-spacing: .02em;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e08a7d' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
  transition: border-color .3s var(--ease);
}
.field input[type="date"] { background-image: none; }
.field select:hover, .field input:hover { border-color: color-mix(in srgb, var(--azafran) 50%, transparent); }
.field select option { background: var(--noche-2); color: var(--linen); }
.reserve .btn { width: 100%; }
@media (min-width: 760px) { .reserve .btn { width: auto; } }

/* status pill */
.status {
  display: inline-flex; align-items: center; gap: .55em;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-on-dark);
}
.status__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--stone); flex: none; }
.status.is-open .status__dot { background: #5fa981; box-shadow: 0 0 0 0 rgba(95,169,129,.55); animation: pulse 2.4s infinite; }
.status.is-open { color: var(--linen); }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(95,169,129,0); } 100% { box-shadow: 0 0 0 0 rgba(95,169,129,0); } }

/* ---------- 9. Accolade marquee ---------- */
.marquee {
  border-block: 1px solid var(--hairline-light);
  background: var(--linen);
  overflow: hidden; padding-block: 1.05rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track { display: flex; width: max-content; animation: slide 68s linear infinite; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.marquee__group { display: flex; align-items: center; }
.marquee span {
  display: inline-flex; align-items: center; gap: 1.6rem;
  padding-inline: 1.6rem;
  font-size: .72rem; letter-spacing: .26em; text-transform: uppercase; color: var(--muted-on-light);
  white-space: nowrap;
}
.marquee span::after { content: ""; width: 5px; height: 5px; rotate: 45deg; background: var(--rojo); opacity: .75; }

/* ---------- 9b. Pathways (three doors: dine / weddings / events) ---------- */
.paths { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 2rem); }
@media (min-width: 760px) { .paths { grid-template-columns: repeat(3, 1fr); } }
.path { display: block; position: relative; }
.path:focus-visible { outline: none; }
.path:focus-visible .media { outline: 2px solid var(--azafran-lt); outline-offset: 4px; }
.path .media {
  aspect-ratio: 4 / 5; border-radius: 100vmax 100vmax 3px 3px;
}
.path .media::after {
  content: ""; position: absolute; inset: 0; z-index: 2;
  mix-blend-mode: normal;
  background: linear-gradient(to top, rgba(9,15,32,.95) 0%, rgba(9,15,32,.82) 22%, rgba(9,15,32,.4) 48%, rgba(9,15,32,.05) 72%);
  transition: opacity .5s var(--ease);
}
.path:hover .media::after { opacity: .88; }
.path__body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: clamp(1.2rem, 1rem + 1vw, 2rem);
  text-align: center;
}
.path__name {
  font-family: var(--display); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
  font-size: clamp(1.35rem, 1.1rem + 1vw, 1.95rem); line-height: 1.05; color: var(--linen);
}
.path__d { margin-top: .55rem; font-size: .85rem; line-height: 1.45; color: var(--linen-3); max-width: 30ch; margin-inline: auto; }
.path__go {
  display: inline-flex; align-items: center; gap: .5em; margin-top: 1rem;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--azafran-lt);
}
.path__go svg { width: 1em; height: 1em; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform .35s var(--ease); }
.path:hover .path__go svg { transform: translateX(4px); }

/* ---------- 10. Story + stats ---------- */
.story__media { position: relative; }
.story__seal {
  position: absolute; right: clamp(-1rem, -2vw, 0rem); bottom: -2.2rem;
  width: clamp(88px, 12vw, 142px);
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}
.stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border-top: 1px solid var(--hairline);
  margin-top: var(--sp-7);
}
.on-light .stats { border-color: var(--hairline-light); }
@media (min-width: 760px) { .stats { grid-template-columns: repeat(4, 1fr); } }
.stat {
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.6rem) clamp(.5rem, .3rem + 1vw, 1.4rem);
  text-align: center; position: relative;
}
.stat + .stat::before {
  content: ""; position: absolute; left: 0; top: 22%; bottom: 22%;
  width: 1px; background: var(--hairline);
}
.on-light .stat + .stat::before { background: var(--hairline-light); }
@media (max-width: 759px) { .stat:nth-child(odd)::before { display: none; } }
.stat__n {
  display: block; font-family: var(--display); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 3.2rem); line-height: 1;
  color: var(--azafran-lt);
}
.on-light .stat__n { color: var(--rioja); }
.stat__l {
  display: block; margin-top: var(--sp-2);
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted-on-dark);
}
.on-light .stat__l { color: var(--muted-on-light); }

/* ---------- 11. Signature dishes ---------- */
.dishes { display: grid; gap: var(--sp-4) clamp(1.4rem, 1rem + 2vw, 2.6rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 980px) { .dishes { grid-template-columns: repeat(4, 1fr); } }
.dish { display: block; }
.dish:nth-child(even) { margin-top: 0; }
@media (min-width: 980px) { .dish:nth-child(even) { margin-top: var(--sp-6); } }
.dish .media { border-radius: 100vmax 100vmax 3px 3px; }
.dish__name {
  margin-top: var(--sp-3); font-family: var(--display); font-size: clamp(1.05rem, .95rem + .45vw, 1.35rem);
  font-variation-settings: "opsz" 60, "SOFT" 20, "WONK" 1; line-height: 1.2;
}
.dish__desc { margin-top: var(--sp-1); font-size: .86rem; line-height: 1.55; color: var(--muted-on-light); }
.dish__price { margin-top: var(--sp-2); font-size: .8rem; letter-spacing: .16em; color: var(--rojo); }

/* ---------- 12. Feature cards (happy hour / guitar) ---------- */
.features { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); }
@media (min-width: 860px) { .features { grid-template-columns: 1fr 1fr; } }
.feature {
  position: relative; overflow: hidden; background: var(--noche-2);
  padding: clamp(2rem, 1.4rem + 3vw, 3.6rem);
  min-height: clamp(280px, 34vw, 400px);
  display: flex; flex-direction: column; justify-content: flex-end;
  isolation: isolate;
}
.feature__bg { position: absolute; inset: 0; z-index: -2; }
.feature__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .42; transition: transform 1.2s var(--ease-out), opacity .5s var(--ease); }
.feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,23,48,.95), rgba(14,23,48,.35));
}
.feature:hover .feature__bg img { transform: scale(1.06); opacity: .55; }
.feature__when {
  margin-top: var(--sp-3); font-size: .72rem; letter-spacing: .24em; text-transform: uppercase; color: var(--azafran);
}
.feature .h3 { margin-top: var(--sp-2); }
.feature p { margin-top: var(--sp-3); max-width: 40ch; color: var(--muted-on-dark); font-size: .95rem; }

/* ---------- 13. Rooms rail ---------- */
.rail { position: relative; }
.rail__scroller {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 30vw);
  gap: clamp(1rem, .6rem + 1.6vw, 1.8rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter);
  padding-inline: var(--gutter); padding-bottom: 1.4rem;
  scrollbar-width: thin; scrollbar-color: var(--azafran) transparent;
}
@media (min-width: 1100px) { .rail__scroller { grid-auto-columns: minmax(300px, 24vw); } }
.rail__scroller::-webkit-scrollbar { height: 3px; }
.rail__scroller::-webkit-scrollbar-track { background: color-mix(in srgb, var(--linen) 8%, transparent); }
.rail__scroller::-webkit-scrollbar-thumb { background: var(--azafran); }
.room { scroll-snap-align: start; }
.room .media { border-radius: 3px; }
.room__name { margin-top: 1rem; font-family: var(--display); font-size: 1.2rem; font-variation-settings: "opsz" 60, "SOFT" 20, "WONK" 1; }
.room__cap { margin-top: var(--sp-1); font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--azafran); }
.on-light .room__cap { color: var(--rioja); }
.rail__nav { display: flex; gap: .5rem; }
.rail__btn {
  width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
  background: transparent; border: 1px solid var(--hairline); color: var(--linen);
  display: grid; place-items: center; transition: background-color .3s var(--ease), color .3s, border-color .3s;
}
.rail__btn:hover { background: var(--azafran); border-color: var(--azafran); color: var(--noche); }
.rail__btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.on-light .rail__btn { color: var(--ink-on-light); border-color: color-mix(in srgb, var(--ink-on-light) 20%, transparent); }

/* ---------- 14. Split feature (weddings) ---------- */
.split { position: relative; overflow: hidden; }
.split__bg { position: absolute; inset: 0; z-index: -2; }
.split__bg img { width: 100%; height: 100%; object-fit: cover; }
.split::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(14,23,48,.94) 0%, rgba(14,23,48,.82) 38%, rgba(14,23,48,.28) 78%);
}
@media (max-width: 860px) { .split::before { background: linear-gradient(to top, rgba(14,23,48,.95) 30%, rgba(14,23,48,.5)); } }
.split__inner { max-width: 40rem; padding-block: clamp(5rem, 3rem + 9vw, 11rem); }

/* ---------- 15. Recognition ---------- */
/* Badges are supplied with white backgrounds, so they sit on a linen "trophy shelf"
   and blend with multiply — no halos, no muddy grayscale. */
.awards-panel {
  background: var(--linen);
  border-radius: 3px;
  padding: clamp(1.6rem, 1.2rem + 2vw, 2.8rem) clamp(1.2rem, 1rem + 2.5vw, 3.4rem);
  box-shadow: 0 30px 70px -50px rgba(0,0,0,.9);
}
.awards { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(1.4rem, 1rem + 2vw, 2.6rem); align-items: center; }
@media (min-width: 700px) { .awards { grid-template-columns: repeat(5, 1fr); } }
.awards img {
  width: 100%; max-width: 118px; margin-inline: auto; height: auto;
  mix-blend-mode: multiply;
  filter: saturate(.28) contrast(1.02); opacity: .82;
  transition: filter .45s var(--ease), opacity .45s var(--ease), transform .45s var(--ease);
}
.awards img:hover { filter: none; opacity: 1; transform: translateY(-3px); }

.press { display: grid; gap: 0; }
.press__item {
  display: grid; gap: .3rem 2rem; padding-block: 1.15rem;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 760px) { .press__item { grid-template-columns: 8rem 1fr; align-items: baseline; } }
.press__item:last-child { border-bottom: 1px solid var(--hairline); }
.press__year { font-size: .72rem; letter-spacing: .24em; color: var(--azafran); }
.press__text { font-size: .98rem; color: var(--muted-on-dark); }
.on-light .press__text { color: var(--muted-on-light); }
.on-light .press__item { border-color: color-mix(in srgb, var(--ink-on-light) 13%, transparent); }
.on-light .press__year { color: var(--rioja); }

/* ---------- 16. Visit ---------- */
.visit { display: grid; gap: clamp(2rem, 1.2rem + 3vw, 4rem); }
@media (min-width: 900px) { .visit { grid-template-columns: 1.05fr .95fr; align-items: start; } }
.info { display: grid; gap: 0; }
.info__row {
  display: grid; gap: .35rem 2rem; padding-block: 1.35rem;
  border-top: 1px solid var(--hairline);
}
@media (min-width: 620px) { .info__row { grid-template-columns: 9rem 1fr; } }
.info__row:last-child { border-bottom: 1px solid var(--hairline); }
.info__k { font-size: .68rem; letter-spacing: .24em; text-transform: uppercase; color: var(--azafran); padding-top: .25rem; }
.info__v { font-size: 1rem; line-height: 1.7; }
.info__v a:hover { color: var(--azafran-lt); }
.hours-line { display: flex; justify-content: space-between; gap: 2rem; max-width: 22rem; }
.hours-line + .hours-line { margin-top: var(--sp-1); }

/* ---------- 17. Newsletter ---------- */
.signup { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-5); }
.signup input {
  flex: 1 1 15rem; padding: 1rem 1.1rem;
  background: transparent; border: 1px solid color-mix(in srgb, var(--linen) 22%, transparent);
  border-radius: 2px; color: var(--linen); font-size: .95rem;
}
.signup input::placeholder { color: var(--stone); }
.signup input:hover { border-color: color-mix(in srgb, var(--azafran) 50%, transparent); }

/* ---------- 18. Footer ---------- */
.footer { background: var(--noche-2); border-top: 1px solid var(--hairline); position: relative; }
.footer__grid { display: grid; gap: clamp(2.2rem, 1.4rem + 3vw, 4rem); padding-block: clamp(3.4rem, 2.4rem + 4vw, 5.5rem) clamp(2.4rem, 1.8rem + 2.5vw, 3.6rem); }
@media (min-width: 860px) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1.2fr; } }
.footer__logo { width: 190px; filter: brightness(0) invert(1); opacity: .92; }
.footer h5 {
  font-size: .68rem; letter-spacing: .26em; text-transform: uppercase; color: var(--azafran);
  margin-bottom: 1.15rem; font-weight: 500;
}
.footer li + li { margin-top: var(--sp-1); }
.footer a { font-size: .93rem; color: var(--muted-on-dark); transition: color .3s var(--ease); }
.footer a:hover { color: var(--linen); }
.social { display: flex; gap: var(--sp-2); margin-top: var(--sp-4); }
.social a {
  width: 40px; height: 40px; border: 1px solid var(--hairline); border-radius: 50%;
  display: grid; place-items: center; transition: background-color .3s var(--ease), border-color .3s;
}
.social a:hover { background: var(--azafran); border-color: var(--azafran); }
.social svg { width: 16px; height: 16px; fill: var(--linen); transition: fill .3s; }
.social a:hover svg { fill: var(--noche); }
.footer__base {
  border-top: 1px solid var(--hairline); padding-block: 1.6rem;
  display: flex; flex-wrap: wrap; gap: .8rem 2rem; justify-content: space-between; align-items: center;
  font-size: .78rem; color: var(--stone);
}
.footer__base a { font-size: .78rem; }

/* ---------- 19. Page hero (interior pages) ---------- */
.phero {
  position: relative; min-height: clamp(460px, 66vh, 700px);
  display: flex; align-items: flex-end; overflow: hidden; isolation: isolate;
  padding-top: clamp(3rem, 2rem + 4vw, 5rem);
  padding-bottom: clamp(2.5rem, 1.5rem + 4vw, 5rem);
}
.phero__bg { position: absolute; inset: 0; z-index: -2; }
.phero__bg img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.03); }
.phero::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, rgba(14,23,48,.95) 8%, rgba(14,23,48,.5) 50%, rgba(14,23,48,.55));
}
.phero__title { margin: var(--sp-2) 0 var(--sp-3); }

/* ---------- 20. Menu page ---------- */
.menu-nav {
  position: sticky; top: var(--headerH); z-index: 60;
  background: color-mix(in srgb, var(--noche) 92%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline);
}
.menu-nav__inner { display: flex; align-items: center; gap: 1rem; padding-block: .8rem; flex-wrap: wrap; }
.tabs { display: flex; gap: .35rem; overflow-x: auto; scrollbar-width: none; flex: 1 1 auto; }
.tabs::-webkit-scrollbar { display: none; }
.tab {
  border: 1px solid transparent; background: transparent; cursor: pointer;
  padding: .6rem 1rem; border-radius: 2px; white-space: nowrap;
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted-on-dark);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.tab:hover { color: var(--linen); }
.tab[aria-selected="true"] { color: var(--azafran-lt); border-color: color-mix(in srgb, var(--azafran) 45%, transparent); background: color-mix(in srgb, var(--azafran) 10%, transparent); }

.search { position: relative; flex: 0 1 240px; }
.search input {
  width: 100%; padding: .62rem .9rem .62rem 2.3rem;
  background: color-mix(in srgb, var(--linen) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--linen) 16%, transparent);
  border-radius: 2px; color: var(--linen); font-size: .85rem;
}
.search input::placeholder { color: var(--stone); }
.search svg { position: absolute; left: .8rem; top: 50%; translate: 0 -50%; width: 14px; height: 14px; fill: none; stroke: var(--stone); stroke-width: 1.6; }

.menu-panel[hidden] { display: none; }
.menu-note {
  max-width: 62ch; font-size: .92rem; color: var(--muted-on-dark);
  border-left: 1px solid var(--hairline); padding-left: 1.2rem;
}
.on-light .menu-note { color: var(--muted-on-light); border-color: color-mix(in srgb, var(--ink-on-light) 18%, transparent); }
.menu-section + .menu-section { margin-top: var(--sp-8); }
.wine-note { margin-bottom: var(--sp-7) !important; max-width: 58ch; }
/* wine names carry vintages and scores — let them breathe a little wider */
#panel-wine .item__name { font-size: 1.02rem; }
#panel-wine .item__desc { max-width: 58ch; }
.menu-section__head { display: flex; align-items: baseline; gap: var(--sp-4); margin-bottom: var(--sp-5); }
.menu-section__head .h3 { font-family: var(--display); font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1; }
.menu-section__head::after { content: ""; flex: 1 1 auto; height: 1px; background: var(--hairline); }

.items { display: grid; gap: 0; }
@media (min-width: 1000px) { .items { grid-template-columns: 1fr 1fr; column-gap: clamp(2.5rem, 1rem + 4vw, 5rem); } }
.item {
  padding: 1.15rem .9rem 1.15rem .9rem;
  margin-inline: -.9rem;
  border-bottom: 1px solid color-mix(in srgb, var(--linen) 9%, transparent);
  transition: background-color .35s var(--ease);
}
.item:hover { background: color-mix(in srgb, var(--azafran) 5%, transparent); }
.item:hover .item__price { color: var(--azafran); }
.item:hover .item__dots { opacity: .75; }
.item__price, .item__dots { transition: color .35s var(--ease), opacity .35s var(--ease); }
.item[hidden] { display: none; }
.item__top { display: flex; align-items: baseline; gap: .8rem; }
.item__name {
  font-family: var(--display); font-size: 1.08rem; font-weight: 400;
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 1; line-height: 1.25;
  color: var(--linen);
}
.item__dots { flex: 1 1 auto; height: 1px; margin-bottom: .3rem; background-image: radial-gradient(circle, var(--stone) 1px, transparent 1px); background-size: 6px 1px; background-repeat: repeat-x; opacity: .45; }
.item__price { font-size: .9rem; letter-spacing: .06em; color: var(--azafran-lt); font-variant-numeric: tabular-nums; white-space: nowrap; }
.item__desc { margin-top: var(--sp-1); font-size: .89rem; line-height: 1.6; color: var(--muted-on-dark); max-width: 54ch; }
.tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .55rem; }
.tag {
  font-size: .58rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .28em .6em; border: 1px solid color-mix(in srgb, var(--navy-mid) 62%, transparent);
  color: #93a8c6; border-radius: 2px;
}
.tag--gf { border-color: color-mix(in srgb, var(--azafran) 45%, transparent); color: var(--azafran-lt); }
.tag--sig { border-color: color-mix(in srgb, var(--rioja-lt) 70%, transparent); color: var(--azafran-lt); }

.empty { padding: 3rem 0; color: var(--stone); font-size: .95rem; }
.empty[hidden] { display: none; }

/* ---------- 21. Packages (events) ---------- */
.packages { display: grid; gap: clamp(1rem, .6rem + 1.6vw, 1.6rem); }
@media (min-width: 700px) { .packages { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .packages { grid-template-columns: repeat(3, 1fr); } }
.pkg {
  border: 1px solid var(--hairline); border-radius: 3px; padding: clamp(1.5rem, 1.1rem + 1.2vw, 2.1rem);
  background: var(--noche-2); display: flex; flex-direction: column;
  transition: border-color .4s var(--ease), transform .4s var(--ease-out), background-color .4s var(--ease);
}
.pkg:hover { border-color: color-mix(in srgb, var(--azafran) 65%, transparent); transform: translateY(-4px); }
.pkg__kicker { font-size: .64rem; letter-spacing: .26em; text-transform: uppercase; color: var(--stone-lt); }
.pkg__name {
  margin-top: var(--sp-2); font-family: var(--display); font-size: 1.6rem;
  font-variation-settings: "opsz" 90, "SOFT" 20, "WONK" 1; line-height: 1;
}
.pkg__price { margin-top: .5rem; font-size: .9rem; letter-spacing: .14em; color: var(--azafran); }
.pkg__list { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--hairline); }
.pkg__list li { font-size: .86rem; color: var(--muted-on-dark); line-height: 1.5; padding-left: 1.1rem; position: relative; }
.pkg__list li + li { margin-top: var(--sp-1); }
.pkg__list li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; rotate: 45deg; background: var(--azafran); opacity: .75; }

/* capacity table */
.caps { width: 100%; border-collapse: collapse; font-size: .93rem; }
.caps th, .caps td { text-align: left; padding: 1.05rem .8rem; border-bottom: 1px solid var(--hairline); }
.caps th { font-size: .64rem; letter-spacing: .24em; text-transform: uppercase; color: var(--azafran); font-weight: 500; }
.caps td:last-child, .caps th:last-child { text-align: right; font-variant-numeric: tabular-nums; }
.caps tbody tr { transition: background-color .3s var(--ease); }
.caps tbody tr:hover { background: color-mix(in srgb, var(--azafran) 6%, transparent); }
.caps td:first-child { font-family: var(--display); font-size: 1.05rem; font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 1; }

/* gallery grid */
.gallery { display: grid; gap: clamp(.6rem, .4rem + .8vw, 1rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(4, 1fr); } }
.gallery .media { border-radius: 3px; }
.gallery > *:nth-child(1) { grid-column: span 2; }
@media (min-width: 900px) { .gallery > *:nth-child(1) { grid-row: span 2; } .gallery > *:nth-child(1) .media { aspect-ratio: 1 / 1.06; } }

/* quote */
.quote { max-width: 52rem; margin-inline: auto; text-align: center; }
.quote blockquote {
  margin: var(--sp-4) 0 0; font-family: var(--display); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 30, "WONK" 1;
  font-size: clamp(1.4rem, 1rem + 1.9vw, 2.4rem); line-height: 1.28; letter-spacing: -.012em;
  text-wrap: balance;
}
.quote figcaption { margin-top: var(--sp-4); font-size: .7rem; letter-spacing: .26em; text-transform: uppercase; color: var(--azafran); }

/* contact card */
.contact-card {
  border: 1px solid var(--hairline); border-radius: 3px; padding: clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem);
  background: color-mix(in srgb, var(--linen) 4%, transparent);
}
.on-light .contact-card { background: color-mix(in srgb, var(--ink-on-light) 3%, transparent); border-color: color-mix(in srgb, var(--ink-on-light) 14%, transparent); }

/* ---------- 21b. Venue components ---------- */
.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;
}

/* hero variant for the wedding page — slightly shorter, image needs less scrim */
.hero--wedding { min-height: min(92svh, 860px); }
.hero--wedding .hero__bg img { object-position: 50% 62%; }
.hero--wedding::before {
  background:
    linear-gradient(100deg, rgba(14,23,48,.9) 0%, rgba(14,23,48,.74) 30%, rgba(14,23,48,.3) 60%, rgba(14,23,48,.05) 82%),
    linear-gradient(to top, rgba(14,23,48,.82) 0%, rgba(14,23,48,.18) 45%, rgba(14,23,48,.05) 70%, rgba(14,23,48,.55) 100%);
}
@media (max-width: 860px) {
  .hero--wedding::before { background: linear-gradient(to top, rgba(14,23,48,.94) 28%, rgba(14,23,48,.6) 62%, rgba(14,23,48,.7) 100%); }
}

/* fact strip under a hero */
.factstrip { background: var(--noche-2); border-block: 1px solid var(--hairline); }
.factstrip__inner {
  display: grid; grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 680px) { .factstrip__inner { grid-template-columns: repeat(5, 1fr); } }
.fact {
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.2rem) 1rem; text-align: center; position: relative;
}
.fact + .fact::before {
  content: ""; position: absolute; left: 0; top: 24%; bottom: 24%;
  width: 1px; background: var(--hairline);
}
@media (max-width: 679px) { .fact:nth-child(odd)::before { display: none; } }
.fact__n {
  display: block; font-family: var(--display); font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
  font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2.3rem); line-height: 1; color: var(--azafran-lt);
}
.fact__l {
  display: block; margin-top: var(--sp-1); font-size: .62rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--muted-on-dark);
}

/* tick list */
.ticks li {
  position: relative; padding-left: 1.9rem; font-size: .96rem; color: var(--muted-on-dark);
}
.ticks li + li { margin-top: var(--sp-2); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .42em;
  width: 11px; height: 6px; border-left: 1.5px solid var(--azafran); border-bottom: 1.5px solid var(--azafran);
  transform: rotate(-45deg);
}
.on-light .ticks li { color: var(--muted-on-light); }

/* chips */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; justify-content: center; }
.chips li {
  padding: .68em 1.15em; border: 1px solid var(--hairline); border-radius: 999px;
  font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted-on-dark);
  transition: color .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
}
.chips li:hover { color: var(--noche); background: var(--azafran); border-color: var(--azafran); }

/* steps */
.steps { display: grid; gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); counter-reset: s; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.step { background: var(--noche); padding: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); }
.on-light .step { background: var(--linen); }
.step__n {
  display: block; font-family: var(--display); font-size: .95rem; letter-spacing: .1em;
  color: var(--azafran); margin-bottom: var(--sp-3);
}
.step__t {
  font-family: var(--display); font-size: 1.3rem; font-weight: 400;
  font-variation-settings: "opsz" 60, "SOFT" 20, "WONK" 1; line-height: 1.15;
}
.step__d { margin-top: var(--sp-2); font-size: .92rem; color: var(--muted-on-dark); }
.on-light .step__d { color: var(--muted-on-light); }

/* FAQ */
.faq {
  border-bottom: 1px solid color-mix(in srgb, var(--ink-on-light) 14%, transparent);
}
.faq:first-of-type { border-top: 1px solid color-mix(in srgb, var(--ink-on-light) 14%, transparent); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.25rem 2.5rem 1.25rem 0; position: relative;
  font-family: var(--display); font-size: 1.12rem; font-weight: 400;
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 1; line-height: 1.3;
  transition: color .3s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--rioja); }
.faq summary::after {
  content: ""; position: absolute; right: .4rem; top: 50%; width: 12px; height: 12px;
  border-right: 1.5px solid var(--rioja); border-bottom: 1.5px solid var(--rioja);
  translate: 0 -70%; rotate: 45deg; transition: rotate .35s var(--ease), translate .35s var(--ease);
}
.faq[open] summary::after { rotate: -135deg; translate: 0 -20%; }
.faq p { padding-bottom: 1.4rem; margin: 0; max-width: 58ch; color: var(--muted-on-light); font-size: .96rem; }
.faq a { color: var(--rioja); text-decoration: underline; text-underline-offset: 3px; }

/* inquiry form */
.inquiry { display: grid; gap: .9rem; grid-template-columns: 1fr; }
@media (min-width: 520px) { .inquiry { grid-template-columns: 1fr 1fr; } }
.field--full { grid-column: 1 / -1; }
.inquiry textarea {
  width: 100%; padding: .82rem .9rem; border-radius: 2px; resize: vertical;
  background: color-mix(in srgb, var(--linen) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--linen) 18%, transparent); color: var(--linen);
  font-size: .92rem; font-family: var(--text);
}
.field--light > span { color: var(--rioja); }
.field--light input, .field--light select, .field--light textarea {
  background: color-mix(in srgb, var(--ink-on-light) 4%, transparent);
  border-color: color-mix(in srgb, var(--ink-on-light) 18%, transparent);
  color: var(--ink-on-light);
}
.field--light select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bf382e' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.field--light input:hover, .field--light select:hover, .field--light textarea:hover {
  border-color: color-mix(in srgb, var(--rioja) 55%, transparent);
}
.field--light select option { background: var(--linen); color: var(--ink-on-light); }
.field--light textarea::placeholder { color: color-mix(in srgb, var(--ink-on-light) 42%, transparent); }

/* package variants */
.pkg--light { background: color-mix(in srgb, var(--ink-on-light) 3%, transparent); border-color: color-mix(in srgb, var(--ink-on-light) 14%, transparent); }
.pkg--light:hover { border-color: color-mix(in srgb, var(--rioja) 55%, transparent); background: color-mix(in srgb, var(--ink-on-light) 5%, transparent); }
.pkg--light .pkg__kicker { color: var(--muted-on-light); }
.pkg--light .pkg__price { color: var(--rioja); }
.pkg--light .pkg__list { border-color: color-mix(in srgb, var(--ink-on-light) 14%, transparent); }
.pkg--light .pkg__list li { color: var(--muted-on-light); }
.pkg--light .pkg__list li::before { background: var(--rioja); }
.pkg--feature { position: relative; border-color: color-mix(in srgb, var(--azafran) 70%, transparent); box-shadow: 0 18px 50px -30px rgba(14,23,48,.5); }
.pkg--feature .pkg__kicker { color: var(--rojo); }
.pkg-group {
  margin: var(--sp-8) 0 var(--sp-4);
  display: flex; align-items: baseline; gap: 1.2rem;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem);
}
.pkg-group::after { content: ""; flex: 1 1 auto; height: 1px; background: color-mix(in srgb, var(--ink-on-light) 16%, transparent); }

/* scrollable table shell */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap .caps { min-width: 480px; }
.on-light .caps th { color: var(--rioja); }
.on-light .caps th, .on-light .caps td { border-color: color-mix(in srgb, var(--ink-on-light) 14%, transparent); }

/* ---------- 22. Reveal animation ---------- */
/* Only hide for the animation when JS is running — never leave content invisible
   to a no-JS reader (or if the observer never fires; see the failsafe in site.js). */
html.js [data-reveal] { opacity: 0; transform: translateY(22px); }
html.js [data-reveal].is-in {
  opacity: 1; transform: none;
  transition: opacity .9s var(--ease-out), transform 1s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* --- mask reveal: the frame wipes open while the image settles out of a slow push-in --- */
html.js [data-reveal="mask"] {
  opacity: 1;
  transform: none;
  clip-path: inset(0 0 100% 0);
}
html.js [data-reveal="mask"] img { transform: scale(1.18); }
html.js [data-reveal="mask"].is-in {
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease-mask);
  transition-delay: var(--d, 0ms);
}
html.js [data-reveal="mask"].is-in img {
  transform: scale(1);
  transition: transform 1.7s var(--ease-out);
  transition-delay: var(--d, 0ms);
}

/* --- line reveal: display headings rise line by line out of their own baseline --- */
.lines .line {
  display: block;
  overflow: hidden;
  padding: .1em 0 .18em;
  margin: -.1em 0 -.18em;
}
html.js .lines .line > span {
  display: block;
  transform: translateY(110%);
}
html.js .lines.is-in .line > span {
  transform: none;
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 95ms + var(--d, 0ms));
}
html.js .lines { opacity: 1; transform: none; }

html.no-motion [data-reveal] { opacity: 1 !important; transform: none !important; clip-path: none !important; }
html.no-motion [data-reveal] img { transform: none !important; }
html.no-motion .lines .line > span { transform: none !important; }

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

/* ---------- 22b. Scroll parallax ---------- */
/* uses the independent `translate` property so it never collides with
   the mask reveal (transform) or the hover zoom (scale).
   The extra scale gives the drift somewhere to go without exposing edges. */
[data-parallax] { will-change: translate; scale: 1.18; }
html.no-motion [data-parallax] { scale: 1; translate: none !important; }
@media (prefers-reduced-motion: reduce) { [data-parallax] { scale: 1; translate: none !important; } }

/* ---------- 22c. Page transition ---------- */
html.js body { animation: pageIn .75s var(--ease-out) both; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
body.is-leaving { opacity: 0; transition: opacity .34s var(--ease); }
html.no-motion body { animation: none; }
html.no-motion body.is-leaving { opacity: 1; transition: none; }

/* ---------- 22d. Editorial section index ---------- */
.section-no {
  display: block;
  font-family: var(--display);
  font-variation-settings: "opsz" 40, "SOFT" 20, "WONK" 1;
  font-size: .78rem; letter-spacing: .2em;
  color: var(--azafran); opacity: .65;
  margin-bottom: .55rem;
}
.on-light .section-no { color: var(--rioja); opacity: .55; }

/* ---------- 22e. Footer wordmark ---------- */
.footer__mark {
  position: relative;
  overflow: hidden;
  margin-top: clamp(-1rem, -2vw, 0rem);
  line-height: 0;
}
.footer__mark span {
  display: block;
  font-family: var(--display);
  font-weight: 300;
  font-variation-settings: "opsz" 144, "SOFT" 20, "WONK" 1;
  font-size: clamp(3rem, 13.6vw, 13rem);
  line-height: .8;
  letter-spacing: -.03em;
  white-space: nowrap;
  text-align: center;
  color: transparent;
  -webkit-text-stroke: 1px color-mix(in srgb, var(--linen) 26%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--linen) 9%, transparent), transparent 78%);
  -webkit-background-clip: text;
          background-clip: text;
  translate: 0 12%;
  user-select: none;
}

/* ---------- 22f. Rail affordances ---------- */
.rail__scroller { cursor: grab; }
.rail__scroller.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.rail__scroller.is-dragging * { pointer-events: none; }
.rail__progress {
  position: relative; height: 1px; margin-top: var(--sp-4);
  background: color-mix(in srgb, var(--linen) 14%, transparent);
}
.on-light .rail__progress { background: var(--hairline-light); }
.rail__progress i {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: 22%; background: var(--azafran);
  transition: translate .18s linear;
}
.rail__hint {
  font-size: .62rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--stone); margin-top: var(--sp-3);
}
.on-light .rail__hint { color: var(--muted-on-light); }

/* ==========================================================================
   22f-bis. Light-section overrides
   Components were authored dark-first. On a white site the dark treatment is
   the exception — it survives only where a component sits on a photograph.
   ========================================================================== */

/* --- menu rows --- */
.on-light .item { border-bottom-color: var(--hairline-light); }
.on-light .item__name { color: var(--navy); }
.on-light .item__desc { color: var(--muted-on-light); }
.on-light .item__price { color: var(--rojo); }
.on-light .item:hover { background: color-mix(in srgb, var(--navy) 4%, transparent); }
.on-light .item:hover .item__price { color: var(--rojo); }
.on-light .item__dots { background-image: radial-gradient(circle, var(--muted-on-light) 1px, transparent 1px); }
.on-light .menu-section__head::after { background: var(--hairline-light); }

/* --- dietary tags --- */
.on-light .tag { border-color: color-mix(in srgb, var(--navy-mid) 55%, transparent); color: #45608c; }
.on-light .tag--gf { border-color: color-mix(in srgb, var(--rojo) 45%, transparent); color: var(--rojo); }
.on-light .tag--sig { border-color: color-mix(in srgb, var(--rojo) 60%, transparent); color: var(--rojo); }

/* --- sticky menu bar --- */
.menu-nav {
  background: color-mix(in srgb, #fff 92%, transparent);
  border-bottom: 1px solid var(--hairline-light);
}
.tab { color: var(--muted-on-light); }
.tab:hover { color: var(--navy); }
.tab[aria-selected="true"] {
  color: var(--rojo);
  border-color: color-mix(in srgb, var(--rojo) 45%, transparent);
  background: color-mix(in srgb, var(--rojo) 7%, transparent);
}
.search input {
  background: color-mix(in srgb, var(--navy) 4%, transparent);
  border-color: var(--hairline-light);
  color: var(--ink-on-light);
}
.search input::placeholder { color: var(--muted-on-light); }
.search svg { stroke: var(--muted-on-light); }
.empty { color: var(--muted-on-light); }

/* --- awards: on white the cream "shelf" would vanish, so drop the card --- */
.on-light .awards-panel { background: transparent; box-shadow: none; padding-inline: 0; }
.on-light .awards img { mix-blend-mode: multiply; }

/* --- fact strip --- */
.factstrip { background: var(--linen); border-block-color: var(--hairline-light); }
.fact + .fact::before { background: var(--hairline-light); }
.fact__n { color: var(--rojo); }
.fact__l { color: var(--muted-on-light); }

/* --- feature cards keep their dark treatment: they sit on photographs --- */
.feature { color: var(--linen); }
.feature .h3, .feature .display { color: var(--linen); }
.on-light .features { border-color: var(--hairline-light); background: var(--hairline-light); }

/* --- packages, steps, tables, forms on white --- */
.on-light .pkg, .pkg { background: color-mix(in srgb, var(--navy) 3%, transparent); border-color: var(--hairline-light); }
.pkg:hover { border-color: color-mix(in srgb, var(--rojo) 50%, transparent); }
.pkg__kicker { color: var(--muted-on-light); }
.pkg__price { color: var(--rojo); }
.pkg__list { border-top-color: var(--hairline-light); }
.pkg__list li { color: var(--muted-on-light); }
.pkg__list li::before { background: var(--rojo); }
.pkg-group::after { background: var(--hairline-light); }

.steps { background: var(--hairline-light); border-color: var(--hairline-light); }
.step { background: #fff; }
.step__n { color: var(--rojo); }
.step__d { color: var(--muted-on-light); }

.caps th { color: var(--rojo); }
.caps th, .caps td { border-bottom-color: var(--hairline-light); }
.caps tbody tr:hover { background: color-mix(in srgb, var(--navy) 4%, transparent); }

.contact-card { background: color-mix(in srgb, var(--navy) 3%, transparent); border-color: var(--hairline-light); }
.on-light .field > span, .field > span { color: var(--rojo); }
.field input, .field select, .inquiry textarea {
  background-color: color-mix(in srgb, var(--navy) 4%, transparent);
  border-color: var(--hairline-light);
  color: var(--ink-on-light);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23bf382e' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.field select option { background: #fff; color: var(--ink-on-light); }
.inquiry textarea::placeholder { color: var(--muted-on-light); }

/* the hero reservation bar stays dark — it floats on the photograph */
.reserve { background: color-mix(in srgb, var(--noche) 74%, transparent); border-color: color-mix(in srgb, var(--linen) 26%, transparent); }
.reserve .field > span { color: var(--azafran); }
.reserve input, .reserve select {
  background-color: color-mix(in srgb, var(--linen) 8%, transparent);
  border-color: color-mix(in srgb, var(--linen) 20%, transparent);
  color: var(--linen);
}
.reserve select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23e5897a' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .9rem center;
}
.reserve select option { background: var(--noche-2); color: var(--linen); }

/* --- misc rules, rails, press, info --- */
.on-light .rule, .rule { background: var(--hairline-light); }
.ornament { color: var(--rojo); }
.ornament::before, .ornament::after { background: linear-gradient(90deg, transparent, var(--hairline-light), transparent); }
.on-light .rail__progress, .rail__progress { background: var(--hairline-light); }
.rail__progress i { background: var(--rojo); }
.rail__hint { color: var(--muted-on-light); }
.chips li { border-color: var(--hairline-light); color: var(--muted-on-light); }
.chips li:hover { background: var(--rojo); border-color: var(--rojo); color: #fff; }
.ticks li::before { border-color: var(--rojo); }
.quote figcaption { color: var(--rojo); }

/* --- flip artifacts: components authored for dark grounds, now on white ---
   Caught by a contrast audit after the palette flip; each of these was below
   4.5:1, and the first two were literally invisible (1:1). */

/* ghost buttons were linen-on-linen — outline them in navy on light ground */
.on-light .btn--ghost { --btn-fg: var(--navy); --btn-bd: color-mix(in srgb, var(--navy) 32%, transparent); }
.on-light .btn--ghost::before { background: var(--navy); }
.on-light .btn--ghost:hover { color: #fff; border-color: var(--navy); }

/* the open/closed pill */
.on-light .status { color: var(--muted-on-light); }
.on-light .status.is-open { color: var(--navy); }
.on-light .status__dot { background: var(--stone); }

/* info rows: terracotta labels and ivory rules don't survive on cream */
.on-light .info__k { color: var(--rojo); }
.on-light .info__row { border-color: var(--hairline-light); }
.on-light .info__v a:hover { color: var(--rojo); }

/* the section index reads better as quiet ink than as a pale tint of the accent */
.on-light .section-no { color: var(--muted-on-light); opacity: .75; }

/* --- dark islands inside light sections (the feature cards sit on photographs),
       so re-assert the dark treatment the .on-light rules would otherwise strip --- */
.feature .link { color: var(--azafran); }
.feature .lead, .feature .muted, .feature p { color: var(--muted-on-dark); }
.feature .eyebrow { color: var(--azafran); }

/* --- the hero/phero/split remain photographic: restore light type on them --- */
.hero, .phero, .split, .split__inner { color: var(--linen); }
.hero .eyebrow, .phero .eyebrow, .split .eyebrow { color: var(--azafran); }
.hero .eyebrow::before, .phero .eyebrow::before, .split .eyebrow::before { background: linear-gradient(90deg, transparent, var(--azafran)); }
.hero .display em, .phero .display em, .split .display em { color: var(--azafran-lt); }
.split .ticks li { color: var(--linen-3); }
.split .ticks li::before { border-color: var(--azafran); }
.split .section-no, .hero .section-no, .phero .section-no { color: var(--azafran); }
.hero .status, .phero .status { color: var(--linen-3); text-shadow: 0 1px 14px rgba(14,23,48,.75); }

/* ==========================================================================
   22g. Mobile
   Phones are most of a restaurant's traffic — "someone standing outside
   deciding whether to walk in". Everything below is for them.
   ========================================================================== */

/* kill the grey flash on tap, but keep a real pressed state */
a, button, summary, .tab, [role="tab"] { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  .btn:active { scale: .985; }
  .path:active .media { scale: .99; }
  .item:active { background: color-mix(in srgb, var(--azafran) 8%, transparent); }
}

@media (max-width: 760px) {
  /* The bottom action bar carries the CTA on phones, so the header can breathe:
     logo + menu only. (The hero's own buttons cover the top of the page.) */
  .header__actions .btn { display: none; }
  .brand img { width: clamp(150px, 44vw, 190px); }
  .header.is-stuck .brand img { width: clamp(140px, 40vw, 172px); }

  /* phones load a portrait-composed source (see the <picture> in weddings.html) */
  .hero--wedding .hero__bg img { object-position: 50% 32%; }

  /* --- comfortable touch targets --- */
  .tab { padding: .82rem 1rem; min-height: 44px; display: inline-flex; align-items: center; }
  .rail__btn { width: 44px; height: 44px; }
  .footer a, .drawer__links a { display: inline-block; padding-block: .18rem; }
  .link { padding-block: .5rem; }

  /* --- sticky menu bar: one row, search collapses to its icon --- */
  .menu-nav__inner { flex-wrap: nowrap; gap: .5rem; padding-block: .55rem; }
  /* fade the right edge so the tab strip reads as scrollable, not clipped */
  .tabs {
    flex: 1 1 auto; min-width: 0;
    -webkit-mask-image: linear-gradient(90deg, #000 84%, transparent);
            mask-image: linear-gradient(90deg, #000 84%, transparent);
  }
  .search { flex: 0 0 44px; min-width: 44px; transition: flex-basis .35s var(--ease), flex-grow .35s var(--ease); }
  .search input { padding: .7rem .5rem .7rem 2.2rem; }
  .search:focus-within { flex: 1 1 100%; }

  /* --- three stacked arches would be 1,400px tall; shorten them --- */
  .path .media { aspect-ratio: 5 / 4; border-radius: 14rem 14rem 3px 3px; }
  .path__body { padding: 1.1rem 1.2rem 1.4rem; }
  /* the shorter crop puts the caption higher up the frame — lift the scrim with it */
  .path .media::after {
    background: linear-gradient(to top, rgba(9,15,32,.96) 0%, rgba(9,15,32,.9) 40%, rgba(9,15,32,.5) 68%, rgba(9,15,32,.08) 90%);
  }

  /* --- long dish names must never push the price off the row --- */
  .item__top { flex-wrap: wrap; gap: .2rem .7rem; }
  .item__name { flex: 1 1 auto; min-width: 0; }
  .item__dots { min-width: 1.5rem; }

  /* --- tighten the vertical rhythm so pages aren't endless --- */
  :root { --section-y: clamp(3.5rem, 2.5rem + 5vw, 5rem); }
  .stats { margin-top: 2.2rem; }
  .split__inner { padding-block: clamp(3.5rem, 2.5rem + 6vw, 6rem); }
  .phero { min-height: clamp(420px, 58vh, 560px); }

  /* --- tables get a hint that they scroll --- */
  .table-wrap {
    -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent);
            mask-image: linear-gradient(90deg, #000 88%, transparent);
  }
}

/* --- fixed action bar: the two things a phone visitor actually wants --- */
.mobilebar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; gap: 1px;
  background: var(--hairline);
  border-top: 1px solid var(--hairline);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  translate: 0 110%;
  transition: translate .42s var(--ease);
}
@media (max-width: 760px) {
  .mobilebar { display: grid; grid-template-columns: 1.5fr 1fr 1fr; }
  body.show-bar .mobilebar { translate: 0 0; }
  body.show-bar { padding-bottom: 56px; }
  body.nav-open .mobilebar { translate: 0 110%; }
}
.mobilebar__btn {
  background: var(--noche-2); color: var(--linen);
  display: grid; place-items: center; text-align: center;
  min-height: 54px; padding: .8rem .4rem;
  font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.mobilebar__btn--primary { background: var(--rojo); }
.mobilebar__btn:active { filter: brightness(1.18); }

/* ---------- 23. Print (menus) ---------- */
@media print {
  .header, .drawer, .menu-nav, .footer, .hero, .phero, .signup, .btn { display: none !important; }
  body { background: #fff; color: #000; }
  .item__desc, .muted { color: #333; }
}