/* ===== Self-hosted brand fonts (matching manuels.com) ===== */
@font-face{font-family:"Bank Gothic Light";src:url("fonts/Bank-Gothic-Light.woff2") format("woff2"),url("fonts/Bank-Gothic-Light.woff") format("woff");font-weight:300 400;font-style:normal;font-display:swap;}
@font-face{font-family:"Bank Gothic Medium";src:url("fonts/Bank-Gothic-Medium.woff2") format("woff2"),url("fonts/Bank-Gothic-Medium.woff") format("woff");font-weight:500 700;font-style:normal;font-display:swap;}
@font-face{font-family:"Hiatus";src:url("fonts/Hiatus-W00-Regular.woff2") format("woff2"),url("fonts/Hiatus-W00-Regular.woff") format("woff");font-weight:400;font-style:normal;font-display:swap;}
:root{
  /* Palette — white-forward, chile reds */
  --paper:#FCFAF6;          /* warm white base */
  --paper-2:#FCFAF6;        /* alt sections — same warm white as the body (uniform bg sitewide) */
  --paper-3:#FCFAF6;        /* formerly deeper sand — now the same warm white */
  --ink:#211915;            /* warm near-black */
  --ink-soft:#3a302b;       /* softer ink for readable body prose */
  --muted:#6F635C;          /* secondary text */
  --chile:#EF4023;          /* Manuel's logo red (vermilion), sampled from the logo */
  --chile-deep:#CF3517;     /* darker logo red — 5.0:1 on white text (AA), button fill */
  --chile-deeper:#B22D12;   /* deepest red — button hover, 6.4:1 */
  --brand:#EF4023;          /* Manuel's logo red — same as above so all reds match the logo */
  --teal:#1AA4C0;           /* Manuel's turquoise — exact color sampled from the exterior wall photo */
  --teal-mid:#107D88;       /* mid turquoise band — 4.9:1 on white text (AA) */
  --teal-deep:#0C6F79;      /* deep turquoise band — 5.9:1 on white text (AA) */
  --teal-tint:#BFF0F3;      /* pale aqua — accent keys on the teal band */
  --line:rgba(33,25,21,.12);
  --line-2:rgba(33,25,21,.06);

  --font-display:"Bank Gothic Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-display-light:"Bank Gothic Light", "Bank Gothic Medium", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-script:"Hiatus", "Bank Gothic Medium", cursive;
  --font-sans:"Helvetica Neue", Helvetica, Arial, sans-serif;

  --wrap:1200px;
  --gut:clamp(1.25rem, 5vw, 4rem);
  --sec:clamp(3.25rem, 6vw, 5.5rem);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;overflow-x:clip;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-sans);
  font-weight:400;
  font-size:clamp(1rem,.96rem + .2vw,1.075rem);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior-y:none;
}
img{display:block;max-width:100%;height:auto;}
a{color:inherit;text-decoration:none;}
button{font-family:inherit;cursor:pointer;}
::selection{background:var(--brand);color:#fff;}

/* ---------- Type ---------- */
h1,h2,h3,h4{font-family:var(--font-display);font-weight:400;margin:0;line-height:1.04;letter-spacing:-.01em;}
h1,h2{text-wrap:balance;}
.display{
  font-size:clamp(2.9rem,6.4vw,6rem);
  line-height:.98;
  letter-spacing:-.022em;
  font-optical-sizing:auto;
}
.display em{font-style:italic;font-weight:300;color:var(--chile);}
h1.title,h2.title{font-size:clamp(2.1rem,4.4vw,3.6rem);letter-spacing:-.018em;}
h1.title em,h2.title em{font-style:italic;color:var(--chile);}
h3{font-size:clamp(1.3rem,2vw,1.6rem);}
p{margin:0 0 1.1em;}
p:last-child{margin-bottom:0;}

/* Bilingual eyebrow — the signature label device */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.34em;
  text-transform:uppercase;
  color:var(--chile-deep);
  display:inline-flex;
  align-items:center;
  gap:.7em;
  margin:0 0 1.4rem;
}
.eyebrow::before{
  content:"";
  width:2.2rem;height:1px;
  background:var(--brand);
  display:inline-block;
}
.eyebrow .en{color:var(--muted);font-weight:500;letter-spacing:.28em;}
.lead{font-size:clamp(1.08rem,1rem + .5vw,1.3rem);line-height:1.6;color:var(--ink-soft);}

/* ---------- Layout ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;
  padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right));}
.section{padding-block:var(--sec);}
.center{text-align:center;}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:.6em;
  font-family:var(--font-sans);font-weight:600;font-size:.84rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:1.05em 1.9em;border-radius:2px;
  border:1px solid transparent;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, border-color .3s;
  will-change:transform;
}
.btn:hover{transform:translateY(-2px);}
/* Deep chile fill: the vermilion logo red is 3.9:1 with white text (AA fail);
   chile-deep hits 5.0:1 and reads richer — the bright vermilion stays in the
   logo, rules and accents where contrast doesn't apply. */
.btn-primary{background:var(--chile-deep);color:#fff;}
.btn-primary:hover{background:var(--chile-deeper);}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--line);}
.btn-ghost:hover{border-color:var(--ink);}
.btn-light{background:#fff;color:var(--chile);}
.btn-light:hover{background:var(--paper-2);}
.btn-outline-light{background:transparent;color:#fff;border-color:rgba(255,255,255,.45);}
.btn-outline-light:hover{border-color:#fff;background:rgba(255,255,255,.08);}
.btn .arrow{font-size:1.1em;transition:transform .35s;}
.btn:hover .arrow{transform:translateX(3px);}

/* Visually hidden (screen readers & crawlers only) */
.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;}

/* ---------- Skip link (keyboard a11y) ---------- */
.skip-link{
  position:fixed;top:.75rem;left:.75rem;z-index:100;
  background:var(--chile);color:#fff;
  padding:.7rem 1.1rem;border-radius:3px;
  font:600 .85rem/1 var(--font-sans);letter-spacing:.04em;
  transform:translateY(-180%);transition:transform .2s ease;
}
.skip-link:focus{transform:none;outline:2px solid #fff;outline-offset:2px;}
main#top{scroll-margin-top:5.5rem;}
main#top:focus{outline:none;}
@media (prefers-reduced-motion:reduce){.skip-link{transition:none;}}

/* ---------- Header ---------- */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;
  gap:1.5rem;
  padding:calc(1.15rem + env(safe-area-inset-top)) max(var(--gut),env(safe-area-inset-right)) 1.15rem max(var(--gut),env(safe-area-inset-left));
  transition:background .4s ease, box-shadow .4s ease, padding .4s ease, transform .38s cubic-bezier(.22,.61,.36,1);
}
/* Auto-hide: slide the bar up out of view when scrolling down, pop it back
   down when scrolling up (toggled by class in site.js). */
.site-header.is-hidden{transform:translateY(-100%);}
/* iOS keeps the top bar static (its original position) — no drop-down/hide. */
html.is-ios .site-header.is-hidden{transform:none;}
@media (prefers-reduced-motion:reduce){
  .site-header{transition:background .4s ease, box-shadow .4s ease, padding .4s ease;}
  .site-header.is-hidden{transform:none;}
}
.site-header.scrolled{
  background:rgba(252,250,246,.9);
  -webkit-backdrop-filter:saturate(140%) blur(14px);
  backdrop-filter:saturate(140%) blur(14px);
  box-shadow:0 1px 0 var(--line);
  padding-top:calc(.7rem + env(safe-area-inset-top));padding-bottom:.7rem;
}
/* While the mobile drawer is open, drop the backdrop-filter — it would make the
   header a containing block and trap the fixed nav inside the 64px bar. */
.site-header.nav-open{-webkit-backdrop-filter:none;backdrop-filter:none;}
.brand img{height:46px;width:auto;transition:height .4s ease;}
.site-header.scrolled .brand img{height:38px;}
.brand-group{display:flex;align-items:center;gap:1rem;min-width:0;}
.header-tagline{display:none;margin:0;}
.brand-word{display:none;}/* shown only on phones (see max-width:720px) as a wordmark beside the logo mark */
/* Inline wordmark: the restaurant name reads as the brand everywhere it appears in copy,
   matching the header wordmark (.brand-word) but sized to the surrounding text. */
.mnl{color:var(--brand);font-family:var(--font-display);font-style:normal;
  font-size:1.1em;letter-spacing:.01em;white-space:nowrap;}
/* Where the name already sits in display type (headings, eyebrows, the header wordmark),
   inherit the parent's treatment instead of restating it. */
h1 .mnl,h2 .mnl,h3 .mnl,h4 .mnl,.eyebrow .mnl,.btn .mnl,.brand-word .mnl{
  color:inherit;font-family:inherit;font-style:inherit;letter-spacing:inherit;}
.nav{display:flex;align-items:center;gap:2.1rem;}
.nav a:not(.btn){
  font-size:.82rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  color:var(--ink);position:relative;padding:.3em 0;
  transition:transform .25s ease, color .25s ease;
}
.nav a:not(.btn)::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--brand);transform-origin:left;transform:scaleX(0);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;
}
.nav a:not(.btn):hover,.nav a:not(.btn):focus-visible{transform:translateY(-2px);}
.nav a:not(.btn):hover::after,.nav a:not(.btn):focus-visible::after{transform:scaleX(1);background:var(--chile-deep);}
.nav a:not(.btn)[aria-current="page"]::after{transform:scaleX(1);}
.nav .btn{padding:.8em 1.2em;justify-content:center;font-weight:700;white-space:nowrap;}
/* Rewards dropdown */
.nav-dd{position:relative;}
.nav-dd__toggle{font:inherit;background:none;border:none;cursor:pointer;color:var(--ink);
  position:relative;display:inline-flex;align-items:center;gap:.4em;padding:.3em 0;
  font-size:.82rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;white-space:nowrap;
  transition:transform .25s ease, color .25s ease;}
.nav-dd__toggle::after{
  content:"";position:absolute;left:0;bottom:-2px;height:2px;width:100%;
  background:var(--brand);transform-origin:left;transform:scaleX(0);
  transition:transform .3s cubic-bezier(.2,.8,.2,1), background .25s ease;}
.nav-dd__toggle:hover,.nav-dd__toggle:focus-visible{transform:translateY(-2px);}
.nav-dd__toggle:hover::after,.nav-dd__toggle:focus-visible::after{transform:scaleX(1);background:var(--chile-deep);}
.nav-dd__caret{font-size:.7em;line-height:1;transition:transform .25s;}
.nav-dd.open .nav-dd__caret{transform:rotate(180deg);}
.nav-dd__menu a{display:block;}
/* Computer: top-bar nav uses the site's display font (Bank Gothic); keep it on one line */
@media (min-width:1201px){
  .nav{gap:1rem;}
  .nav a:not(.btn){font-family:var(--font-display);letter-spacing:.02em;font-size:.84rem;}
  .nav .btn{min-width:0;font-size:.8rem;padding:.72em 1.05em;}
  .nav-dd__toggle{font-family:var(--font-display);letter-spacing:.02em;font-size:.84rem;}
  .nav-dd__menu{position:absolute;top:calc(100% + 1rem);right:0;min-width:240px;
    background:var(--chile);border:1px solid var(--chile);border-radius:5px;
    box-shadow:0 24px 55px -26px rgba(33,25,21,.5);padding:.5rem;
    opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .25s,transform .25s,visibility .25s;z-index:80;}
  .nav-dd:hover .nav-dd__menu,.nav-dd:focus-within .nav-dd__menu,.nav-dd.open .nav-dd__menu{opacity:1;visibility:visible;transform:none;}
  .nav-dd__menu a{font-family:var(--font-sans);font-size:.78rem;font-weight:600;letter-spacing:.08em;
    text-transform:uppercase;color:#fff;padding:.75rem .9rem;border-radius:3px;white-space:nowrap;}
  .nav-dd__menu a:hover{background:var(--chile-deep);color:#fff;}
  .site-header.over-media .nav-dd__toggle{color:#fff;}
}
.nav-toggle{display:none;}

/* ---------- Hero ---------- */
.hero{
  position:relative;
  padding-top:clamp(8rem,16vh,11rem);
  padding-bottom:clamp(3rem,6vw,5.5rem);
  overflow:hidden;
}
.hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:clamp(2rem,5vw,5rem);
  align-items:center;
}
.hero-copy{max-width:34rem;}
.hero h1{margin-bottom:1.6rem;}
.hero .lead{margin-bottom:2.2rem;max-width:30rem;}
.hero-cta{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.4rem;}
.hero-meta{
  display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;align-items:center;
  font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  border-top:1px solid var(--line);padding-top:1.5rem;
}
.hero-meta .dot{width:4px;height:4px;border-radius:50%;background:var(--brand);}

/* framed hero image */
.hero-figure{position:relative;justify-self:center;}
.hero-figure .frame{
  position:relative;padding:14px;background:var(--paper);
  box-shadow:0 40px 80px -40px rgba(33,25,21,.45);
}
.hero-figure .frame::before{
  content:"";position:absolute;inset:6px;border:1px solid var(--brand);pointer-events:none;z-index:2;
}
.hero-figure img{aspect-ratio:3/4.1;object-fit:cover;width:min(420px,80vw);}
.hero-figure .tag{
  position:absolute;left:-1.4rem;bottom:2.2rem;z-index:3;
  background:var(--chile);color:#fff;
  font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;font-weight:600;
  padding:.7em 1.1em;box-shadow:0 14px 30px -14px rgba(0,0,0,.5);
}
.hero-figure .tag span{display:block;font-family:var(--font-display);font-style:italic;
  font-size:1.05rem;letter-spacing:0;text-transform:none;margin-top:.2em;color:#fff;}
.seal{
  position:absolute;top:-1.6rem;right:-1.6rem;z-index:3;
  width:96px;height:96px;
}
.seal svg{width:100%;height:100%;animation:spin 28s linear infinite;}
@media (prefers-reduced-motion:reduce){.seal svg{animation:none;}}
.seal .core{
  position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--font-display);font-style:italic;color:var(--chile);font-size:1.5rem;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ---------- Marquee ---------- */
.marquee{
  background:var(--brand);color:#fff;
  padding-block:.3rem;overflow:hidden;white-space:nowrap;
  border-block:none;
}
.marquee-track{display:inline-flex;gap:0;animation:slide 38s linear infinite;}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none;}}
.marquee-track span{
  font-family:var(--font-display);font-size:1.05rem;font-style:italic;
  padding-inline:1.6rem;display:inline-flex;align-items:center;gap:1.6rem;
}
.marquee-track span::after{content:"✦";color:rgba(255,255,255,.8);font-style:normal;font-size:.7rem;}
@media (max-width:720px){
  .marquee{padding-block:.18rem;}
  .marquee-track span{font-size:.92rem;}
}
@keyframes slide{to{transform:translateX(-50%);}}

/* ---------- Story ---------- */
.story-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center;}
.story-solo{max-width:780px;margin-inline:auto;}
/* Our Story — text + owners photo. Phone-first: stacked, photo after the heading. */
.story-two{max-width:780px;margin-inline:auto;}
.jg-photo{margin:0;}
.jg-photo img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 30px 60px -34px rgba(33,25,21,.5);}
.jg-desktop{display:none;}
.jg-mobile{max-width:330px;margin:1.8rem auto;}
/* Our Story — community / non-profit photo below the two-column story */
.story-aside{max-width:760px;margin:clamp(2.4rem,5vw,3.6rem) auto 0;}
.story-aside img{width:100%;height:auto;display:block;border-radius:4px;box-shadow:0 30px 60px -34px rgba(33,25,21,.5);}
.story-aside figcaption{margin-top:.9rem;text-align:center;font-size:.82rem;letter-spacing:.03em;color:var(--muted);font-style:italic;}
/* Computer: text on the left, owners photo on the right. */
@media (min-width:820px){
  .story-two{display:grid;grid-template-columns:1fr clamp(300px,32%,400px);gap:clamp(2.5rem,5vw,5rem);
    align-items:center;max-width:var(--wrap);}
  .story-two .story-copy{max-width:46rem;}
  .jg-mobile{display:none;}
  .jg-desktop{display:block;}
}
.story-figs{position:relative;}
.story-figs .main{box-shadow:0 30px 60px -34px rgba(33,25,21,.5);}
.story-figs .main img{aspect-ratio:4/5;object-fit:cover;width:100%;}
.story-figs .inset{
  position:absolute;right:-1.5rem;bottom:-2rem;width:46%;
  background:var(--paper);padding:10px;
  box-shadow:0 24px 50px -24px rgba(33,25,21,.45);
}
.story-figs .inset img{aspect-ratio:1/1;object-fit:cover;width:100%;}
.story-copy h2{margin-bottom:1.6rem;}
.pull{
  font-family:var(--font-display);font-style:italic;font-size:clamp(1.3rem,2.3vw,1.85rem);
  line-height:1.3;color:var(--chile);
  border-left:2px solid var(--brand);padding-left:1.3rem;margin:2rem 0;
}
.stats{display:flex;flex-wrap:wrap;gap:2.4rem;margin-top:2.4rem;border-top:1px solid var(--line);padding-top:1.8rem;}
.stat .n{font-family:var(--font-display);font-size:clamp(2rem,3vw,2.7rem);line-height:1;color:var(--ink);}
.stat .l{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-top:.5rem;}

/* ---------- Signature dishes ---------- */
.bg-sand{background:var(--paper-2);}
.sec-head{max-width:42rem;margin-bottom:clamp(2.5rem,5vw,4rem);}
.sec-head.center{margin-inline:auto;}
/* Two-line heading: give it room to break only at its <br>, not mid-phrase.
   The lead keeps its own narrower measure. */
#carta .sec-head{max-width:58rem;}
#carta .sec-head h2.title{text-wrap:wrap;color:var(--chile);}
#carta .sec-head h2.title em{color:var(--ink);}
.dishes{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.2rem);}
.dish{background:var(--paper);position:relative;}
.dish .ph{overflow:hidden;}
.dish .ph img{aspect-ratio:4/3.4;object-fit:cover;width:100%;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);}
.dish:hover .ph img{transform:scale(1.06);}
.dish .body{padding:1.5rem 1.5rem 1.7rem;border:1px solid var(--line);border-top:none;}
.dish .row{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;}
.dish h3{font-size:1.3rem;}
.dish .price{font-family:var(--font-display);font-style:italic;color:var(--chile);font-size:1.25rem;}
.dish .es{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--chile-deep);font-weight:600;margin-bottom:.5rem;}
.dish p{color:var(--muted);font-size:.95rem;margin:.6rem 0 0;}

/* ---------- Carta (printed menu) ---------- */
.carta-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem;margin-bottom:clamp(2.2rem,4vw,3.4rem);}
.carta-tabs button{
  background:transparent;border:1px solid var(--line);
  font-size:.78rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:.75em 1.35em;border-radius:2px;transition:all .3s;
}
.carta-tabs button:hover{color:var(--ink);border-color:var(--ink);}
.carta-tabs button[aria-selected="true"]{background:var(--chile);color:#fff;border-color:var(--chile);}
.panel{display:none;}
.panel.active{display:block;animation:fade .5s ease;}
@keyframes fade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
.menu-cols{columns:2;column-gap:clamp(2.5rem,6vw,5rem);max-width:980px;margin-inline:auto;}
@media (max-width:680px){.menu-cols{columns:1;}}
.menu-group{break-inside:avoid;margin-bottom:1.4rem;}
.menu-group h3,.menu-group h4{
  font-family:var(--font-sans);font-size:.76rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--chile);padding-bottom:.7rem;margin-bottom:1.1rem;border-bottom:1px solid var(--line);
}
.item{margin-bottom:.7rem;}
.item .head{display:flex;align-items:baseline;gap:.6rem;}
.item .name{font-family:var(--font-display);font-size:1.12rem;font-weight:500;white-space:nowrap;}
/* Long dish names must wrap on narrow phones instead of overflowing the row */
@media (max-width:480px){.item .name{white-space:normal;}}
.item .dots{flex:1;border-bottom:1px dotted var(--line);transform:translateY(-.25em);min-width:1.5rem;}
.item .price{font-family:var(--font-display);font-style:italic;color:var(--chile);font-size:1.05rem;}
.item .desc{color:var(--muted);font-size:.9rem;margin:.25rem 0 0;line-height:1.5;max-width:30rem;}
.item .desc .gf{color:var(--brand);font-weight:600;font-size:.78rem;letter-spacing:.04em;}
.item .opts{display:block;margin-top:.35rem;font-size:.82rem;color:var(--muted);line-height:1.5;}
.item .opts b{color:var(--chile);font-weight:600;}
.menu-group .note{margin:-.35rem 0 1.1rem;font-size:.8rem;color:var(--muted);font-style:italic;}
.carta-note{text-align:center;color:var(--muted);font-size:.85rem;margin-top:clamp(2rem,4vw,3rem);}
.carta-note a{color:var(--chile);border-bottom:1px solid var(--line);}
/* Happy hour: photo beside the menu */
.hh-layout{display:flex;gap:clamp(1.6rem,4vw,3.2rem);max-width:980px;margin-inline:auto;align-items:flex-start;}
.hh-photo{flex:0 0 clamp(230px,34%,360px);margin:0;}
.hh-photo img{width:100%;border-radius:6px;box-shadow:0 26px 55px -32px rgba(33,25,21,.55);}
.hh-photo figcaption{margin-top:.75rem;font-size:.78rem;letter-spacing:.03em;color:var(--muted);font-style:italic;text-align:center;}
.hh-menu{flex:1 1 auto;min-width:0;}
@media (max-width:680px){.hh-layout{flex-direction:column;}.hh-photo{flex-basis:auto;width:100%;max-width:420px;margin-inline:auto;}}
/* Menu-panel photo strips — swipeable dish photography above each tab's list.
   One model everywhere: fixed-width, snapping figures in a horizontal scroller.
   `safe center` keeps a few photos centered but falls back to the start (no
   clipping) once there are enough to scroll. */
.panel-photos{display:flex;gap:clamp(.8rem,1.6vw,1.2rem);max-width:980px;margin:0 auto clamp(1.1rem,2.2vw,1.6rem);
  height:clamp(240px,30vw,360px);overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;justify-content:safe center;}
.panel-photos::-webkit-scrollbar{display:none;}
.panel-photos figure{margin:0;flex:0 0 clamp(240px,26vw,320px);scroll-snap-align:center;overflow:hidden;border-radius:6px;box-shadow:0 26px 55px -32px rgba(33,25,21,.55);position:relative;}
.panel-photos figure.tall{flex:0 0 clamp(190px,21vw,260px);}
.panel-photos img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);}
.panel-photos figure:hover img{transform:scale(1.05);}
.panel-photos figcaption{position:absolute;left:0;right:0;bottom:0;padding:1.4rem .9rem .7rem;
  background:linear-gradient(to top,rgba(20,14,11,.72),rgba(20,14,11,0));
  color:#fff;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;}
@media (prefers-reduced-motion:reduce){.panel-photos img{transition:none!important;}}
/* Auto-scrolling marquee (homepage food strip): the row glides continuously and
   loops seamlessly. JS clones the figures into a second set so translateX(-50%)
   lands the copy exactly where the original started. On iOS (and reduced-motion)
   the JS unwraps this back to the plain native-scroll strip — no auto-scroll. */
.panel-photos--marquee{display:block;overflow:hidden;height:clamp(240px,30vw,360px);}
.panel-photos--marquee .marquee-track{display:flex;width:max-content;height:100%;}
.panel-photos--marquee .marquee-track>figure{flex-shrink:0;margin-right:clamp(.8rem,1.6vw,1.2rem);}
.panel-photos--marquee.is-running .marquee-track{animation:panel-marquee 70s linear infinite;}
@keyframes panel-marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.panel-photos--marquee.is-running .marquee-track{animation:none;}}
/* Larger reel variant (e.g. Happy Hour) */
.panel-photos--lg{max-width:1180px;height:clamp(320px,44vw,520px);}
.panel-photos--lg figure{flex:0 0 clamp(300px,34vw,440px);}
.panel-photos--lg figure.tall{flex:0 0 clamp(240px,27vw,360px);}
#brunch-menu .panel-photos img[src*="huevos-motulenos"]{object-position:50% 62%;}
@media (max-width:680px){
  /* Phones: larger figures with a peek of the next one */
  .panel-photos{height:auto;margin-inline:-1.2rem;padding-inline:1.2rem;justify-content:flex-start;}
  .panel-photos figure{flex:0 0 76%;height:230px;}
  .panel-photos figure.tall{flex:0 0 60%;}
  .panel-photos--lg figure{height:300px;}
}

/* ---------- Sourcing band (white, all type in the brand red per the brief) ---------- */
/* Header photo: the overhead tray, shown whole — its own 3:4 portrait, uncropped */
.sourcing-hero{margin:0 0 clamp(1.8rem,4vw,2.8rem);}
.sourcing-hero img{width:100%;height:auto;display:block;border-radius:4px;
  box-shadow:0 30px 60px -34px rgba(33,25,21,.5);}
/* Full-width portrait would tower on desktop — cap the width and centre it */
@media (min-width:721px){.sourcing-hero{max-width:min(28rem,60vw);margin-inline:auto;}}
.sourcing{background:var(--paper);color:var(--chile);position:relative;overflow:hidden;}
.sourcing::after{content:none;}
.sourcing .wrap{position:relative;z-index:1;}
.sourcing-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,5.5rem);align-items:center;}
.sourcing .eyebrow{color:var(--chile);}
.sourcing .eyebrow::before{background:var(--chile);}
.sourcing .eyebrow .en{color:var(--chile);}
.sourcing h2{color:var(--ink);margin-bottom:1.4rem;}
.sourcing h2 em{color:var(--ink);font-style:italic;}
.sourcing p{color:var(--chile);}
.source-list{list-style:none;padding:0;margin:1.4rem 0 0;display:grid;gap:1.4rem 2.4rem;}
/* Tightened per request: pull the heading and list together, trim row gaps.
   Flowing columns (not grid) so the gap between points stays uniform even
   when entries differ in length. */
#sourcing .sec-head{margin-bottom:clamp(.9rem,2vw,1.4rem);}
#sourcing .source-list{margin-top:0;display:block;}
#sourcing .source-list li{gap:0;break-inside:avoid;margin-bottom:.85rem;}
#sourcing .source-list li:last-child{margin-bottom:0;}
#sourcing .source-list .v{line-height:1.35;}
@media (min-width:721px){#sourcing .source-list{columns:2;column-gap:2rem;}}
/* Every entry is centred: the red key on its own line, black body text beneath. */
.source-list li{display:flex;flex-direction:column;gap:.15rem;align-items:center;text-align:center;}
.source-list .k{color:var(--chile);font-family:var(--font-display);font-style:italic;font-size:1.2rem;}
.source-list .v{color:var(--ink);font-size:.9rem;line-height:1.5;max-width:34rem;}
@media (min-width:721px){.source-list{grid-template-columns:1fr 1fr;}}
.sourcing-fig{position:relative;}
.sourcing-fig img{aspect-ratio:4/5;object-fit:cover;width:100%;box-shadow:0 30px 70px -30px rgba(0,0,0,.6);}
.sourcing-fig .badge{
  position:absolute;left:-1.2rem;top:-1.2rem;background:#fff;color:var(--chile);
  font-family:var(--font-display);font-style:italic;font-size:1.05rem;
  padding:.9em 1.2em;line-height:1.15;text-align:center;box-shadow:0 18px 40px -18px rgba(0,0,0,.5);
}
.sourcing-fig .badge b{display:block;font-style:normal;font-size:1.7rem;}

/* ---------- Gallery (horizontal carousel) ---------- */
.gallery{display:flex;gap:1.1rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:1.4rem;}
.gallery::-webkit-scrollbar{display:none;}
.gallery a{flex:0 0 clamp(255px,30vw,400px);aspect-ratio:4/5;scroll-snap-align:center;
  overflow:hidden;position:relative;display:block;border-radius:3px;}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.8,.2,1);}
.gallery a:hover img{transform:scale(1.07);}
.g-tall,.g-wide{grid-row:auto;grid-column:auto;}
.gallery-hint{text-align:center;margin-top:1rem;font-size:.72rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--muted);display:flex;align-items:center;justify-content:center;gap:.6em;}
.gallery-hint::before,.gallery-hint::after{content:"";width:1.6rem;height:1px;background:var(--line);}

/* ---------- Horizontal rail scroll hint ---------- */
/* The photo strips and the reviews carousel hide their scrollbars, so nothing
   tells you there is more to the right. A chevron sits at the rail's right edge
   whenever it can still scroll; clicking it pages the rail forward. The wrapper
   and the button are added by site.js, so any rail gets this for free. */
.rail-wrap{position:relative;}
.rail-next{position:absolute;z-index:3;transform:translateY(-50%);
  width:54px;height:54px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.55);
  background:var(--chile-deep);color:#fff;cursor:pointer;
  font-family:var(--font-sans);font-size:1.5rem;line-height:1;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 14px 30px -12px rgba(33,25,21,.6);
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .35s ease,background .2s ease;}
.rail-wrap.has-more .rail-next{opacity:1;visibility:visible;pointer-events:auto;
  animation:rail-nudge 2.6s ease-in-out infinite;}
.rail-next:hover{background:var(--chile-deeper);}
.rail-next:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
@keyframes rail-nudge{0%,100%{transform:translateY(-50%) translateX(0);}
  50%{transform:translateY(-50%) translateX(3px);}}
@media (prefers-reduced-motion:reduce){.rail-wrap.has-more .rail-next{animation:none;}}

/* ---------- Visit / Reservations ---------- */
.visit-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(2.5rem,6vw,5rem);align-items:start;}
.visit-photo{margin:0 0 2rem;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -40px rgba(33,25,21,.5);}
.visit-photo img{width:100%;height:auto;display:block;}
.visit-side{display:flex;flex-direction:column;gap:clamp(1.6rem,3vw,2rem);}
.visit-side .map{margin-top:0;}
.hours-card{background:var(--paper);border:1px solid var(--line);padding:clamp(1.4rem,2.6vw,2rem);}
.hours-card>.k{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:.6rem;}
.hours-card .hours-row{max-width:none;}
.info-block{margin-bottom:2rem;}
.info-block .k{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:.5rem;}
.info-block .v{font-size:1.05rem;}
.info-block .v a:not(.btn):hover{color:var(--chile);}
/* Address & phone rendered as tappable ghost buttons (readable, not uppercased) */
.info-block .v .info-btn{display:inline-block;text-align:center;text-transform:none;
  letter-spacing:.01em;font-weight:600;line-height:1.4;font-size:.92rem;margin-top:.15rem;color:var(--ink);}
.info-block .v .info-btn:hover{color:var(--ink);}
.hours-row{display:flex;justify-content:space-between;border-bottom:1px solid var(--line);padding:.6rem 0;max-width:24rem;}
.hours-row:last-child{border-bottom:none;}
.hours-row .d{color:var(--ink);}
.hours-row .t{color:var(--muted);}
.out-links{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.6rem;}
/* Homepage Visit Us: single vertical stack of links */
#visitar .out-links{flex-direction:column;align-items:flex-start;gap:.6rem;}

/* form */
.resv{background:var(--paper);border:1px solid var(--line);padding:clamp(1.6rem,3vw,2.6rem);box-shadow:0 30px 60px -40px rgba(33,25,21,.4);}
.resv h3{font-size:1.7rem;margin-bottom:.4rem;}
.resv .sub{color:var(--muted);font-size:.95rem;margin-bottom:1.6rem;}
.field{margin-bottom:1.1rem;}
.field label{display:block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);font-weight:600;margin-bottom:.5rem;}
.field input,.field select{
  width:100%;padding:.8em 1em;border:1px solid var(--line);border-radius:2px;
  background-color:var(--paper);color:var(--ink);font-family:inherit;
  font-size:16px;/* >=16px so iOS Safari doesn't zoom on focus */
  line-height:1.3;transition:border-color .25s;
  -webkit-appearance:none;appearance:none;/* normalize iOS native chrome */
}
.field select{
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%236F635C' stroke-width='1.6'><path d='M1 1l5 5 5-5'/></svg>");
  background-repeat:no-repeat;background-position:right 1em center;background-size:.7em;padding-right:2.5em;
}
.field input:focus,.field select:focus{outline:none;border-color:var(--chile);}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;}
.resv .btn{width:100%;justify-content:center;margin-top:.4rem;}
.resv .or{text-align:center;color:var(--muted);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin:1.2rem 0;}
.confirm{background:var(--paper-2);border:1px solid var(--chile);padding:1.2rem 1.3rem;border-radius:2px;margin-top:1.2rem;display:none;}
.confirm.show{display:block;animation:fade .4s ease;}
.confirm strong{color:var(--chile);font-family:var(--font-display);}

/* map */
.map{margin-top:2rem;border:1px solid var(--line);aspect-ratio:16/9;position:relative;overflow:hidden;background:var(--paper-2);}
.map iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}

/* ---------- Plan a Party ---------- */
.party-video{position:relative;max-width:880px;margin:0 auto clamp(2.5rem,5vw,4rem);padding:12px;background:var(--paper);box-shadow:0 40px 80px -45px rgba(33,25,21,.45);}
.party-video::before{content:"";position:absolute;inset:5px;border:1px solid var(--brand);pointer-events:none;z-index:2;}
.party-video iframe{display:block;width:100%;aspect-ratio:16/9;border:0;position:relative;z-index:1;}
.party-video figcaption{text-align:center;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-top:1rem;}
.party-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,4.5rem);align-items:start;}
.party-copy .lead{margin-bottom:1.6rem;}
.party-offer{list-style:none;padding:0;margin:0 0 1.6rem;display:grid;gap:0;}
.party-offer li{position:relative;padding:0 0 .95rem 1.4rem;margin-bottom:.95rem;color:var(--ink-soft);font-size:1rem;line-height:1.5;border-bottom:1px solid var(--line);}
.party-offer li:last-child{border-bottom:none;margin-bottom:0;}
.party-offer li::before{content:"";position:absolute;left:0;top:.5em;width:.5rem;height:.5rem;background:var(--brand);}
.party-offer .k{color:var(--ink);font-weight:600;}
/* Inline links inside body copy — the rule is the site's default a{color:inherit},
   so a link in a paragraph needs its own marking to be visible at all. */
#community p a{color:var(--chile);border-bottom:1px solid var(--line);transition:border-color .2s ease;}
#community p a:hover{border-bottom-color:var(--chile);}

/* Press citations link out to the original article; the underline marks which
   entries are clickable, since only some of them have a source online. */
.party-offer .k a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);
  text-underline-offset:3px;transition:color .2s ease,text-decoration-color .2s ease;}
.party-offer .k a:hover{color:var(--brand);text-decoration-color:var(--brand);}
.party-note{font-size:.92rem;color:var(--muted);line-height:1.55;margin:0 0 1.8rem;}
.party-note a{color:var(--chile);font-weight:600;border-bottom:1px solid var(--line);white-space:nowrap;}
.field textarea{width:100%;padding:.8em 1em;border:1px solid var(--line);border-radius:2px;background-color:var(--paper);color:var(--ink);font-family:inherit;font-size:16px;line-height:1.5;resize:vertical;-webkit-appearance:none;appearance:none;transition:border-color .25s;}
.field textarea:focus{outline:none;border-color:var(--chile);}
.party-spaces{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.8rem,1.5vw,1.2rem);margin-top:clamp(2.5rem,5vw,4rem);}
.party-spaces figure{margin:0;overflow:hidden;}
.party-spaces img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.2,.8,.2,1);}
.party-spaces figure:hover img{transform:scale(1.05);}
/* Plan a Party — named event-space cards (photo, name, capacity, description) */
/* When the two Plan-a-Party CTAs stack on narrow screens, drop the ghost button down a little */
@media (max-width:540px){#fiestas .party-menu-cta{margin-top:.7rem;}}
.spaces-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2vw,1.8rem);max-width:1000px;margin-inline:auto;}
@media (max-width:680px){.spaces-grid{grid-template-columns:1fr;}}
.spaces-grid .dish .es{margin-bottom:.4rem;}
/* Clickable space cards → photo lightbox */
.spaces-grid .dish[data-space]{cursor:pointer;}
.spaces-grid .dish[data-space]:hover .ph img{transform:scale(1.04);}
.spaces-grid .dish .ph{position:relative;}
.ph-count{position:absolute;right:.7rem;bottom:.7rem;z-index:2;pointer-events:none;
  background:rgba(18,11,9,.55);color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:.32rem .7rem;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;font-weight:600;}
.space-lb{position:fixed;inset:0;z-index:300;background:rgba(18,11,9,.97);
  display:flex;align-items:center;justify-content:center;}
.space-lb[hidden]{display:none;}
.lb-stage{margin:0;display:flex;align-items:center;justify-content:center;}
.lb-stage img,.lb-stage video{max-width:min(90vw,1100px);max-height:76vh;width:auto;height:auto;
  display:block;box-shadow:0 30px 80px rgba(0,0,0,.5);}
.lb-btn{position:absolute;display:flex;align-items:center;justify-content:center;cursor:pointer;
  width:2.7rem;height:2.7rem;border-radius:50%;color:#fff;
  background:rgba(18,11,9,.5);border:1px solid rgba(255,255,255,.4);
  font-size:1.5rem;line-height:1;font-family:Georgia,serif;z-index:2;-webkit-tap-highlight-color:transparent;}
.lb-btn:hover{background:rgba(18,11,9,.75);}
.lb-prev{left:clamp(.5rem,3vw,1.5rem);top:50%;transform:translateY(-50%);}
.lb-next{right:clamp(.5rem,3vw,1.5rem);top:50%;transform:translateY(-50%);}
.lb-prev span,.lb-next span{display:block;padding-bottom:.15em;}
/* The sans × reads smaller than the serif arrows at the same size, so it needs
   to be set larger than the .lb-btn base to look like their equal. */
.lb-close{top:clamp(.6rem,3vw,1.2rem);right:clamp(.6rem,3vw,1.2rem);font-size:1.6rem;font-family:inherit;}
.lb-meta{position:absolute;left:0;right:0;bottom:clamp(.7rem,3vw,1.3rem);text-align:center;color:#fff;padding-inline:4rem;}
.lb-meta .lb-title{font-family:var(--font-display);font-size:1rem;letter-spacing:.06em;}
.lb-meta .lb-count{font-size:.74rem;letter-spacing:.16em;opacity:.7;margin-top:.15rem;}
.party-form-wrap{max-width:640px;margin-inline:auto;}

/* ---------- Gift cards ---------- */
.gift-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.2rem,2.5vw,2rem);max-width:1000px;margin:clamp(2rem,4vw,3rem) auto 0;}
.gift-feature{background:var(--paper);border:1px solid var(--line);border-radius:4px;padding:1.7rem 1.6rem;}
.gift-feature .k{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:600;margin-bottom:.6rem;}
.gift-feature .v{color:var(--ink-soft);font-size:.98rem;line-height:1.55;}
@media (max-width:760px){.gift-grid{grid-template-columns:1fr;}}
.map .pin{position:absolute;left:50%;top:46%;transform:translate(-50%,-100%);z-index:2;color:var(--chile);}
.map .pin .label{position:absolute;left:50%;top:-2.4rem;transform:translateX(-50%);background:var(--ink);color:#fff;
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.4em .7em;white-space:nowrap;border-radius:2px;}

/* ---------- Footer ---------- */
.site-footer{position:relative;z-index:1;background:var(--ink);color:var(--paper);padding-block:clamp(3.5rem,6vw,5rem) calc(2rem + env(safe-area-inset-bottom));
  padding-inline:max(0px,env(safe-area-inset-left)) max(0px,env(safe-area-inset-right));}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:clamp(2rem,5vw,4rem);}
.foot-brand img{height:54px;width:auto;margin-bottom:1.2rem;}
.foot-brand p{color:rgba(255,255,255,.6);font-size:.95rem;max-width:24rem;}
.foot-col h5,.foot-col .foot-h{font-family:var(--font-sans);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);margin:0 0 1.1rem;font-weight:700;}
.foot-col a,.foot-col p{display:block;color:rgba(255,255,255,.75);font-size:.95rem;margin-bottom:.6rem;}
.foot-col a:hover{color:#fff;}
.socials{display:flex;gap:.7rem;margin-top:.3rem;}
.socials a{width:48px;height:48px;border:1px solid rgba(255,255,255,.2);border-radius:50%;display:grid;place-items:center;transition:all .3s;}
.socials a:hover{background:var(--brand);border-color:var(--brand);transform:translateY(-3px);}
.socials svg{width:21px;height:21px;fill:rgba(255,255,255,.85);}
.socials a:hover svg{fill:#fff;}
.foot-base{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;margin-top:3rem;padding-top:1.6rem;
  border-top:1px solid rgba(255,255,255,.12);color:rgba(255,255,255,.45);font-size:.8rem;letter-spacing:.04em;}

/* ---------- Video hero (full-screen) ---------- */
.video-hero{position:relative;width:100%;height:100vh;height:100svh;min-height:560px;
  background:transparent;}
.video-hero__video{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
/* Auto-advancing hero slideshow */
/* Fixed to a constant large-viewport height (not inset:0) so iOS Safari's
   collapsing address bar can't resize/rescale the cover image (no "zoom") */
.hero-slides{position:fixed;top:0;left:0;width:100%;height:100vh;height:100lvh;z-index:-2;overflow:hidden;}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;
  filter:brightness(1.04) saturate(1.12);
  opacity:0;transition:opacity 1.8s ease-in-out;will-change:opacity;z-index:0;}
.hero-slide.is-active{opacity:1;transition:opacity 1.8s ease-in-out;}
.hero-slide.no-fade{transition:none;} /* declared after .is-active so it wins for opacity; inline transform transitions still apply */
/* Tap/click zones to page through the hero photos (both desktop and touch) */
.hero-nav{position:absolute;top:0;bottom:0;width:32%;z-index:4;display:flex;align-items:center;
  border:0;background:none;cursor:pointer;padding:0 clamp(.6rem,2vw,1.5rem);color:#fff;
  opacity:.9;transition:opacity .2s ease;-webkit-tap-highlight-color:transparent;}
.hero-nav:hover{opacity:1;}
.hero-nav--prev{left:0;justify-content:flex-start;}
.hero-nav--next{right:0;justify-content:flex-end;}
.hero-nav span{display:flex;align-items:center;justify-content:center;
  width:clamp(2.5rem,4.5vw,3.1rem);height:clamp(2.5rem,4.5vw,3.1rem);border-radius:50%;
  background:rgba(18,11,9,.42);border:1px solid rgba(255,255,255,.4);
  box-shadow:0 4px 14px rgba(0,0,0,.25);
  font-size:clamp(1.5rem,2.4vw,1.9rem);line-height:1;font-family:Georgia,serif;
  padding-bottom:.15em;}
.hero-nav:hover span{background:rgba(18,11,9,.6);}
@media (prefers-reduced-motion:reduce){.hero-nav{transition:none;}}
/* Video slide: the clip fills the layer like a cover background */
.hero-slide--video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
/* Device-specific slide sets: verticals only on phones, horizontals only on larger
   screens (also guards the pre-JS first paint, where both first slides are is-active) */
@media (min-width:721px){.hero-slide[data-mobile-only]{display:none;}}
@media (max-width:720px){.hero-slide[data-skip-mobile]{display:none;}}
/* Martini desktop slide: iOS keeps the centered crop (70%); non-iOS desktop
   drops the drinks so their base sits at the bottom of the viewport. */
.hero-slide--martini-desktop{background-position:center 70%;}
html:not(.is-ios) .hero-slide--martini-desktop{background-position:center 60%;}
/* iOS shows the hero as a 3:2 banner, and these plated dishes were shot wide — at
   `cover` the banner matches the photo's ratio, so the plate sits small and centred
   in a sea of tabletop. Zoom each past cover and re-centre on the plate itself.
   Sizes put the plate at ~85% of the banner width, keeping a margin all round. */
/* Desktop: the hero fills the window, whose ratio (~1.5–1.8) is close to these dish
   photos' own ~1.5, so `cover` barely crops and the plate sits small in a lot of empty
   tabletop. Scale each past cover and re-centre on the plate. max() keeps the width at
   or above cover for any window ratio — including tall/snapped windows — so the photo
   never falls short of the box. Each plate is centred horizontally in its own frame, so
   `center` holds at any window size; the vertical figure is tuned for a ~1.6 window.
   iOS is excluded: its hero is a 3:2 banner with its own rules below. */
/* Tuna needs no rule of its own: its photo is square with the plate dead centre,
   so `cover` in a landscape box scales it by width — which enlarges the plate the
   way the zooms above do — and plain `center` holds it in the middle of both the
   desktop hero and the phone banner, whole, at every window ratio. */
@media (min-width:721px){
  html:not(.is-ios) .hero-slide--zoom-flan{background-size:max(135vw,198vh);background-position:center 82%;}
  /* Combo platter: the plate covers only ~54% of the photo's width and ~39% of its
     height, so it needs the biggest zoom of the set. 1.4x past cover puts it at ~76%
     of the box width, and 57% centres it from a 1.5 to a 2.0 window. */
  html:not(.is-ios) .hero-slide--zoom-platter{background-size:max(140vw,210vh);background-position:center 57%;}
  /* Nopalito tower: the plate covers just over half the photo's width, so it needs a
     similar zoom. It sits a shade below centre in its own frame (52%), and 56% brings
     it to the middle from a 1.5 to a 2.0 window. The zoom stops at 1.35x because the
     plate is tall in frame — more would clip its top edge on a wide, short window. */
  html:not(.is-ios) .hero-slide--zoom-nopalito{background-size:max(135vw,202vh);background-position:center 56%;}
  /* Tortas: no zoom either. Its 1.32 ratio is squarer than a typical window, so cover
     crops it vertically and leaves ~20% of play — plenty to lift the plate. */
  html:not(.is-ios) .hero-slide--zoom-tortas{background-position:center 65%;}
}
html.is-ios .hero-slide--zoom-tortas{background-size:138%;background-position:51% 61%;}
/* Combo platter on the 3:2 banner (every phone, and iOS at any width): the banner's
   ratio matches the photo's own 1.50, so a box-relative 140% is the same 1.4x past
   cover the desktop rule uses — vw/vh units would not work here, since the banner is
   only part of the viewport. */
html.is-ios .hero-slide--zoom-platter{background-size:140%;background-position:center 57%;}
@media (max-width:720px){.hero-slide--zoom-platter{background-size:140%;background-position:center 57%;}}
html.is-ios .hero-slide--zoom-nopalito{background-size:135%;background-position:center 56%;}
@media (max-width:720px){.hero-slide--zoom-nopalito{background-size:135%;background-position:center 56%;}}
@media (prefers-reduced-motion:reduce){.hero-slide{transition:opacity .5s ease;}}
/* ---------- Fajitas banner (above Our Story) ---------- */
.fajitas-band{position:relative;width:100%;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--ink);}
.fajitas-band__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.fajitas-band__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,11,9,.12),rgba(18,11,9,.34));}
/* Centered title over the sizzling-fajitas video */
.fajitas-band__label{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  text-align:center;padding:0 var(--gut);pointer-events:none;}
.fajitas-band__label p{margin:0;color:#fff;font-family:var(--font-display-light);text-transform:uppercase;
  font-size:clamp(2rem,5vw,4rem);letter-spacing:.02em;line-height:1.1;
  text-shadow:0 1px 3px rgba(12,8,6,.55),0 2px 22px rgba(12,8,6,.45);}
.fajitas-band__label p em{font-style:normal;color:#fff;}
/* Pin the fajitas video as a fixed background; the next section scrolls over it */
.pin-scope{position:relative;}
.pin-scope>.fajitas-band{position:sticky;top:0;z-index:0;}
.pin-scope>.section{position:relative;z-index:1;}
/* Signature Plates rides over the pinned sizzling-fajitas video (no sand fill) */
.signature-plates{background:transparent;}
/* White heading sits over the live fajitas video — a text-only shadow keeps it legible
   over bright frames without reintroducing a shaded band over the section. */
.signature-plates .eyebrow,.signature-plates .title,.signature-plates .title em{color:#fff;text-shadow:0 1px 3px rgba(12,8,6,.55),0 2px 22px rgba(12,8,6,.45);}
.signature-plates .eyebrow::before{background:#fff;box-shadow:0 1px 3px rgba(12,8,6,.5);}
/* iOS: no pinned scroll-over. A small script moves the Signature Plates copy inside the
   fajitas band, where it sits statically centered on the video; the dish cards follow
   below on the plain paper background. Everything scrolls as one normal document. */
html.is-ios .pin-scope>.fajitas-band{position:relative;}
html.is-ios .fajitas-band .sec-head{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  z-index:2;width:min(92%,44rem);margin:0;text-align:center;}
html.is-ios .fajitas-band .eyebrow,html.is-ios .fajitas-band .title{color:#fff;
  text-shadow:0 1px 3px rgba(12,8,6,.55),0 2px 22px rgba(12,8,6,.45);}
html.is-ios .fajitas-band .eyebrow::before{background:#fff;box-shadow:0 1px 3px rgba(12,8,6,.5);}
html.is-ios .fajitas-band .title{margin:0;font-size:clamp(1.8rem,4.5vw,3rem);line-height:1.22;}
html.is-ios .signature-plates{background:var(--paper);}
/* ---------- Full-bleed feature video ---------- */
.video-full{width:100%;line-height:0;background:#000;}
.video-full iframe{display:block;width:100%;aspect-ratio:16/9;border:0;}
.flush-top{padding-top:0;}
/* No overlay on the hero — the slides show at full brightness; the title relies on its
   own text-shadow for contrast (see .vh-title). */
.video-hero__scrim{display:none;}
/* Opaque page body scrolls OVER the fixed hero background */
.page-body{position:relative;z-index:0;background:var(--paper);}
.video-hero__content{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  padding:0 var(--gut);
}
.video-hero__content>*{max-width:48rem;}
/* Desktop only: the title/eyebrow block sits at the top of the hero rather than
   centred, so the slides read underneath it. Anchoring to the top with padding
   (instead of a negative transform) keeps the same gap on any window height.
   Below 721px the block is display:none — the wordmark lives in the top bar. */
@media (min-width:721px){
  .video-hero__content{justify-content:flex-start;padding-top:clamp(2rem,5vh,4rem);}
  /* ...and the eyebrow line sits snug under the wordmark. */
  .video-hero__content .vh-title{margin-bottom:-.5rem;}}
.eyebrow--light{color:#fff;justify-content:center;}
.eyebrow--light::before{background:var(--brand);}
.eyebrow--light .en{color:rgba(255,255,255,.72);}
.vh-title{color:#fff;font-size:clamp(3rem,7.2vw,6.6rem);line-height:.98;margin:0 0 .9rem;
  text-shadow:0 1px 2px rgba(0,0,0,.6), 0 2px 10px rgba(0,0,0,.7), 0 6px 34px rgba(0,0,0,.55);}
.vh-title em{color:#fff;font-style:italic;font-weight:300;}
.eyebrow--light{color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.7), 0 2px 12px rgba(0,0,0,.65);}
/* Eyebrow now sits directly under the title — no default trailing margin.
   In the hero it reads a touch bolder and larger for more presence. */
.video-hero__content .eyebrow--light{margin:0;font-size:clamp(.84rem,.45vw + .74rem,1rem);font-weight:700;letter-spacing:.3em;}
.eyebrow--light .en{color:rgba(255,255,255,.92);}
.video-hero__content .eyebrow--light .en{color:#fff;font-weight:600;letter-spacing:.26em;}
.video-hero__content .eyebrow--light::before{height:2px;width:2.6rem;}
.vh-lead{color:#fff;font-size:clamp(1.08rem,1rem + .45vw,1.32rem);
  line-height:1.6;margin:0 auto 2.2rem;text-shadow:0 1px 2px rgba(0,0,0,.65), 0 2px 14px rgba(0,0,0,.6);}
.vh-cta{display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center;}
.vh-cta .btn{min-width:16rem;justify-content:center;}
.vh-scroll{position:absolute;left:50%;bottom:calc(1.9rem + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:2;
  display:flex;flex-direction:column;align-items:center;gap:.55rem;
  color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.3em;text-transform:uppercase;
  text-shadow:0 1px 3px rgba(12,8,6,.55);}
.vh-scroll svg{animation:bob 1.8s ease-in-out infinite;width:28px;height:28px;stroke-width:2;
  filter:drop-shadow(0 1px 3px rgba(12,8,6,.5));}
@keyframes bob{0%,100%{transform:translateY(0);}50%{transform:translateY(6px);}}
/* entrance */
.video-hero__content .eyebrow--light,.vh-title,.vh-lead,.vh-cta{animation:vhIn .9s cubic-bezier(.2,.8,.2,1) both;}
.vh-title{animation-delay:.08s;}
.vh-lead{animation-delay:.18s;}
.vh-cta{animation-delay:.28s;}
@keyframes vhIn{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
/* header over the video — a soft top gradient + text shadow keep the white nav
   legible when a slide is bright sky or a white wall */
.site-header.over-media{background:linear-gradient(180deg,rgba(14,9,7,.42),rgba(14,9,7,0));
  -webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;
  padding-top:calc(1.15rem + env(safe-area-inset-top));padding-bottom:1.15rem;}
.site-header.over-media .nav a:not(.btn){color:#fff;text-shadow:0 1px 2px rgba(12,8,6,.55);}
.site-header.over-media .nav-dd__toggle{text-shadow:0 1px 2px rgba(12,8,6,.55);}
.site-header.over-media .nav-toggle span{background:#fff;}
/* Desktop: keep the bar solid & readable over the hero (don't go transparent) */
@media (min-width:1201px){
  .site-header.over-media{
    background:rgba(252,250,246,.9);
    -webkit-backdrop-filter:saturate(140%) blur(14px);backdrop-filter:saturate(140%) blur(14px);
    box-shadow:0 1px 0 var(--line);
  }
  .site-header.over-media .nav a:not(.btn),
  .site-header.over-media .nav-dd__toggle{color:var(--ink);text-shadow:none;}
  .site-header.over-media .nav-toggle span{background:var(--ink);}
  .site-header.over-media .header-tagline{color:var(--muted);text-shadow:none;border-left-color:var(--line);}
  .site-header.over-media .header-tagline span{color:var(--ink);}
}
@media (prefers-reduced-motion:reduce){
  .vh-scroll svg{animation:none;}
  .video-hero__content .eyebrow--light,.vh-title,.vh-lead,.vh-cta{animation:none;}
}

/* Desktop: tagline lives in the top bar instead of the hero */
/* Tagline only on wide screens where the bar has room; the hero keeps its own eyebrow */
@media (min-width:1500px){
  .header-tagline{display:inline-flex;align-items:center;gap:.55em;white-space:nowrap;
    padding-left:1.1rem;border-left:1px solid var(--line);
    font-family:var(--font-display);font-size:.72rem;font-weight:400;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);}
  .header-tagline span{color:var(--brand);}
  .site-header.over-media .header-tagline{color:rgba(255,255,255,.82);border-left-color:rgba(255,255,255,.28);}
  .site-header.over-media .header-tagline span{color:#fff;}
}

/* ---------- Reveal animation ---------- */
/* Hidden pre-reveal state only applies when JS is running (see the js-flag script in each page head).
   Without JS the content stays visible instead of shipping blank. */
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1);}
.js .reveal.is-in{opacity:1;transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1!important;transform:none!important;transition:none!important;}
  .dish .ph img,.gallery img{transition:none!important;}
}

/* ---------- Responsive ---------- */
@media (max-width:980px){
  .hero-grid{grid-template-columns:1fr;}
  .hero-figure{order:-1;margin-bottom:1rem;}
  .story-grid,.sourcing-grid,.visit-grid{grid-template-columns:1fr;}
  .story-figs{max-width:30rem;margin-inline:auto;}
  .dishes{grid-template-columns:1fr 1fr;}
  .gallery{grid-auto-rows:22vw;}
  .foot-grid{grid-template-columns:1fr 1fr;}
  .foot-brand{grid-column:1/-1;}
  /* Visit section: flatten the two columns and reorder so the Reserve card
     sits directly under the photo on phones. */
  .visit-grid{display:flex;flex-direction:column;gap:1.8rem;align-items:stretch;}
  .visit-grid>div{display:contents;}
  .visit-photo{order:1;margin-bottom:0;}
  .resv{order:2;}
  .info-block{order:3;margin-bottom:0;}
  .out-links{order:4;margin-top:0;}
  .hours-card{order:5;}
  .map{order:6;}
}
/* iOS: center the whole Visit block (address, phone, buttons, hours) */
@media (max-width:720px){
  .visit-grid{text-align:center;}
  .visit-grid .out-links{justify-content:center;}
  #visitar .out-links{align-items:center;}
  .hours-row{justify-content:center;gap:.9rem;max-width:none;margin-inline:auto;}
}
/* Hamburger drawer for tablets & small laptops too (the 7-item nav is too wide for one row) */
@media (max-width:1200px){
  .nav{
    position:fixed;inset:0 0 0 auto;width:min(80vw,340px);
    background:var(--paper);flex-direction:column;align-items:flex-start;justify-content:center;
    gap:1.5rem;padding:2rem 2.4rem;overflow-y:auto;
    transform:translateX(100%);transition:transform .45s cubic-bezier(.2,.8,.2,1);
    box-shadow:-30px 0 60px -30px rgba(0,0,0,.4);
  }
  .nav.open{transform:none;}
  .nav a{font-size:1rem;font-family:var(--font-sans);letter-spacing:.13em;}
  .nav .btn{width:100%;font-size:.95rem;}
  /* Rewards group in the drawer: label + indented sub-links, always visible */
  .nav-dd{width:100%;}
  .nav-dd__toggle{width:auto;justify-content:flex-start;font-family:var(--font-sans);
    font-size:.82rem;font-weight:600;letter-spacing:.13em;color:var(--ink);}
  .nav-dd__caret{display:inline-block;font-size:.8em;margin-left:.2em;}
  /* Sub-items hidden until the Rewards row is tapped */
  .nav-dd__menu{display:none;flex-direction:column;align-items:flex-start;gap:.85rem;margin-top:.85rem;padding-left:1rem;
    border-left:2px solid var(--line);}
  .nav-dd.open .nav-dd__menu{display:flex;}
  .nav-dd__menu a{font-size:.9rem;letter-spacing:.04em;color:var(--muted);}
  .nav-toggle{display:flex;flex-direction:column;gap:5px;background:none;border:none;z-index:70;padding:.4rem;}
  .nav-toggle span{width:26px;height:2px;background:var(--ink);transition:.3s;}
  .nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
  .nav-toggle.open span:nth-child(2){opacity:0;}
  .nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
  /* The open drawer is a light panel — keep its links & close icon dark even when the bar is over the video */
  .site-header.over-media .nav.open a:not(.btn){color:var(--ink);}
  .site-header.over-media .nav-toggle.open span{background:var(--ink);}
}
@media (max-width:720px){
  .dishes{grid-template-columns:1fr;gap:1.15rem;}
  /* ---- Signature dishes: polished iOS/phone treatment ----
     The heading sits over the live fajitas video with text-shadow alone for contrast
     (no shaded band); the title is sized down and given breathing line-height so it
     no longer squishes into four cramped lines. */
  .signature-plates .sec-head{
    padding:1.6rem 1.1rem 1.9rem;
  }
  .signature-plates .eyebrow{margin-bottom:.85rem;}
  .signature-plates .title{font-size:clamp(1.8rem,7.2vw,2.45rem);line-height:1.22;letter-spacing:.005em;}
  /* Cohesive, lifted cards instead of full-bleed plain blocks: rounded, softly shadowed,
     with a shorter image so each dish reads at a glance rather than filling the screen. */
  .dish{border-radius:16px;overflow:hidden;background:var(--paper);
    box-shadow:0 1px 2px rgba(18,11,9,.06),0 18px 34px -20px rgba(18,11,9,.55);}
  .dish .ph img{aspect-ratio:16/10;}
  .dish .body{border:none;padding:1.1rem 1.25rem 1.3rem;}
  .dish .es{margin-bottom:.4rem;}
  .dish .row{align-items:center;gap:.8rem;}
  .dish h3{font-size:1.16rem;}
  .dish .price{font-size:1.15rem;}
  .dish p{font-size:.92rem;line-height:1.5;margin-top:.5rem;}
  .gallery{grid-template-columns:repeat(2,1fr);grid-auto-rows:38vw;grid-auto-flow:dense;}
  .gallery .g-tall{grid-row:auto;}/* no row-spanning on phones — it leaves gaps in a 2-col grid */
  /* keep the stats on one even row (3 columns) on phones instead of wrapping */
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.7rem;}
  .stat .n{font-size:clamp(1.35rem,5.5vw,2rem);}
  .stat .l{font-size:.56rem;letter-spacing:.05em;margin-top:.4rem;line-height:1.25;}
  .party-grid{grid-template-columns:1fr;}
  .party-spaces{grid-template-columns:1fr 1fr;gap:.6rem;}
  .grid-2{grid-template-columns:1fr;}
  .seal{display:none;}
  .story-figs .inset{width:42%;right:-.5rem;}
  .vh-title{font-size:clamp(1.7rem,6.5vw,2.3rem);margin-bottom:.3rem;}
  .eyebrow--light .en{display:none;}
  .eyebrow--light::before{width:1.6rem;}
  /* iOS: the hero shrinks to a banner that shows the WHOLE under-the-oak photo (3:2),
     sitting just below the fixed 60px header; the rest of the page flows directly beneath
     it (no more full-screen fixed background). */
  .video-hero{position:relative;z-index:0;height:auto;min-height:0;aspect-ratio:3/2;margin-top:60px;}
  .hero-slides{position:absolute;top:0;left:0;width:100%;height:100%;z-index:0;}
  /* iOS: the Manuel's title + eyebrow move OUT of the hero and into the top bar as a wordmark
     beside the logo mark, so the banner is left clean. */
  .video-hero__content{display:none;}
  .brand-group{gap:.55rem;}
  .brand-word{display:inline-block;color:var(--brand);font-family:var(--font-display);
    font-size:clamp(1.15rem,5.6vw,1.5rem);letter-spacing:.01em;line-height:1;white-space:nowrap;}
  .vh-scroll{display:none;}
  .fajitas-band{height:clamp(280px,42vh,420px);}
}
/* iOS: keep the hero at its original banner size (3:2, below the 60px header),
   but make the slides a fixed/static background so the page scrolls up over them
   as the visitor scrolls down. The in-flow .video-hero banner reserves the space. */
html.is-ios .hero-slides{position:fixed;top:60px;left:0;width:100%;height:calc(100vw * 2 / 3);z-index:-2;}
.scrim{position:fixed;inset:0;background:rgba(33,25,21,.4);opacity:0;visibility:hidden;transition:.4s;z-index:55;}
.scrim.show{opacity:1;visibility:visible;}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}

/* ===== Brand font matching: Bank Gothic caps headings + Hiatus script accents ===== */
/* Bank Gothic is a caps face — uppercase headings so glyphs render (and don't fall back) */
h1,h2,h3,h4{text-transform:uppercase;letter-spacing:.015em;}
.display,.vh-title{font-family:var(--font-display-light);letter-spacing:.02em;line-height:1.04;}
h2.title,.title{line-height:1.06;}
/* Accents → Bank Gothic caps (matching the rest of the headline; section accents stay red) */
/* h1.title em is listed explicitly: the general `h1.title em` rule further up sets
   italic, and a bare `.title em` here loses to it on specificity — which is why h2
   titles came out upright and the one h1 title did not. */
.display em,.vh-title em,h1.title em,h2.title em,.title em,.sourcing h2 em{
  font-family:inherit;font-style:normal;text-transform:uppercase;letter-spacing:inherit;
}
/* Menu item names stay in the readable body face (wide Bank Gothic caps would overflow the leader rows) */
.item .name{font-family:var(--font-sans);text-transform:none;font-weight:600;letter-spacing:0;}
/* Numbers, prices & short labels: Bank Gothic, no synthetic italic */
.dish .price,.item .price,.stat .n,.source-list .k,.sourcing-fig .badge{font-style:normal;letter-spacing:-.03em;}
.dish h3{white-space:normal;}
.pull{font-family:var(--font-display);font-style:normal;text-transform:uppercase;letter-spacing:.015em;font-size:clamp(1.05rem,1.7vw,1.35rem);line-height:1.4;}

/* ---------- Reviews (Google) ---------- */
/* Homepage: tighter gap between the Reviews and Visit Us sections */
#reviews{padding-bottom:clamp(2.5rem,5vw,4rem);}
#visitar{padding-top:clamp(2.5rem,5vw,4rem);}
.rating-badge{display:inline-flex;align-items:center;gap:.7rem;margin-top:1.4rem;
  padding:.6rem 1.2rem;border:1px solid var(--line);border-radius:999px;background:var(--paper);}
.rating-badge .stars{position:relative;display:inline-block;color:#dcd2c4;font-size:1.1rem;line-height:1;letter-spacing:0;}
.rating-badge .stars::before{content:"★★★★★";position:absolute;left:0;top:0;width:90%;overflow:hidden;white-space:nowrap;color:#E8a93b;}
.rating-badge .rating-text{font-size:.82rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase;}
.rating-badge .rating-text strong{color:var(--ink);font-family:var(--font-display);font-size:1.05rem;}
.reviews-track{display:flex;gap:1.4rem;overflow-x:auto;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:.4rem 0 1.4rem;}
.reviews-track::-webkit-scrollbar{display:none;}
.review{flex:0 0 clamp(280px,32vw,400px);scroll-snap-align:center;margin:0;
  background:var(--paper);border:1px solid var(--line);border-radius:4px;
  padding:2rem 1.9rem;display:flex;flex-direction:column;gap:1rem;
  box-shadow:0 24px 50px -38px rgba(33,25,21,.4);}
.review-stars{color:#E8a93b;letter-spacing:.1em;font-size:1.05rem;}
.review blockquote{margin:0;font-family:var(--font-sans);font-style:italic;font-weight:400;
  font-size:1.05rem;line-height:1.6;color:var(--ink-soft);flex:1;}
.review figcaption{display:flex;flex-direction:column;gap:.15rem;border-top:1px solid var(--line);padding-top:.9rem;}
.review .r-name{font-weight:600;font-size:.95rem;color:var(--ink);}
.review .r-src{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--brand);font-weight:600;}

/* ---------- Subpage hero (multi-page architecture) ---------- */
.page-hero{background:var(--paper-2);text-align:center;padding:calc(96px + env(safe-area-inset-top) + clamp(1.8rem,4vw,3rem)) var(--gut) clamp(1.8rem,4vw,2.8rem);}
/* Trimmed hero (Our Story): heading only, so cut the extra top/bottom padding */
.page-hero--tight{padding-top:calc(96px + env(safe-area-inset-top) + clamp(1rem,2.2vw,1.5rem));padding-bottom:clamp(1.2rem,2.6vw,1.8rem);}
.page-hero .eyebrow{justify-content:center;}
.page-hero h1{font-size:clamp(2.3rem,5vw,4rem);letter-spacing:-.018em;}
.page-hero h1 em{font-style:italic;color:var(--chile);}
.page-hero h1.eyebrow{font-size:.74rem;letter-spacing:.34em;}
.page-hero .lead{max-width:46rem;margin:1.4rem auto 0;}
.page-hero .hero-ctas{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:1.8rem;}
/* Crawlable menu sections on subpages: reuse the tab-panel look without tabs */
.menu-section{margin-bottom:clamp(1.2rem,2.5vw,1.8rem);}
.menu-section .wrap>h2{font-size:clamp(1.5rem,2.6vw,2.1rem);text-align:center;margin-bottom:clamp(.9rem,1.8vw,1.3rem);color:var(--chile);}
.menu-section .wrap>h2 em{font-style:italic;color:var(--chile);}
/* Cross-link band between pages */
.xlinks{display:flex;gap:.8rem;justify-content:center;flex-wrap:wrap;margin-top:clamp(1.2rem,2.5vw,2rem);margin-bottom:clamp(2rem,4vw,3rem);}
/* Phones: stack these button rows one per line. Wrapping left them in a ragged
   2-1-2 arrangement that read as accidental rather than designed. */
@media (max-width:720px){
  .page-hero .hero-ctas,.xlinks{flex-direction:column;flex-wrap:nowrap;align-items:stretch;}
  /* Full-width buttons would otherwise leave their labels hanging on the left edge. */
  .page-hero .hero-ctas>.btn,.xlinks>.btn{justify-content:center;}
}

/* ---------- Our Story page (La Historia) ---------- */
/* One decisive photograph under the page hero */
.story-banner{margin:0 auto;max-width:var(--wrap);padding-top:clamp(2.2rem,5vw,3.6rem);
  padding-inline:max(var(--gut),env(safe-area-inset-left)) max(var(--gut),env(safe-area-inset-right));}
.story-banner img{width:100%;height:auto;aspect-ratio:21/9;object-fit:cover;display:block;
  border-radius:4px;box-shadow:0 30px 60px -34px rgba(33,25,21,.5);}
@media (max-width:720px){.story-banner img{aspect-ratio:4/3;}}
/* The pergola patio photo is 3:2. The full 21:9 banner crop cut it too hard, the
   full 3:2 frame showed too much sky and pavers — 16:9 trims a little off the top
   and bottom. Scoped to this one banner; private-dining keeps the cinematic crop. */
@media (min-width:721px){#patio-feature img{aspect-ratio:16/9;object-position:center 55%;}}

/* The Plan a Party hero is a near-square 10:9 crop, so at the full 1200px wrap it
   ran over 1000px tall and pushed the whole page down. Narrower frame, same crop. */
#party-hero-photo{max-width:820px;}

/* Founding chapter — copy beside a framed portrait photo */
.chapter{display:grid;grid-template-columns:1fr clamp(300px,36%,420px);gap:clamp(2.5rem,6vw,5.5rem);align-items:center;}
/* Reversed chapter: photo on the left, copy on the right */
.chapter--rev{grid-template-columns:clamp(300px,36%,420px) 1fr;}
/* Tighter section rhythm on the story page */
#inspiration,#leaders,#community,#press{padding-block:clamp(2rem,4vw,3rem);}
.story-portrait{position:relative;margin:0;justify-self:center;width:100%;}
.story-portrait .frame,.story-banner .frame,.jg-photo .frame,.sourcing-hero .frame{position:relative;display:block;padding:12px;background:#fff;box-shadow:0 40px 80px -40px rgba(33,25,21,.5);}
.story-portrait .frame::before,.story-banner .frame::before,.jg-photo .frame::before,.sourcing-hero .frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--brand);pointer-events:none;z-index:2;}
/* framed banner/community photos drop their own rounding + shadow — the frame supplies both */
.story-banner .frame img,.jg-photo .frame img,.sourcing-hero .frame img{border-radius:0;box-shadow:none;}
/* ---------- Photo gallery: Life at Manuel's (masonry) ---------- */
.gallery-masonry{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(.55rem,1.4vw,.9rem);grid-auto-rows:8px;grid-auto-flow:row dense;margin-top:clamp(1.6rem,3.5vw,2.6rem);}
@media (min-width:680px){.gallery-masonry{grid-template-columns:repeat(3,1fr);}}
@media (min-width:1040px){.gallery-masonry{grid-template-columns:repeat(4,1fr);}}
.gallery-masonry figure{margin:0;border-radius:12px;overflow:hidden;position:relative;background:#e9e4dc;box-shadow:0 14px 34px -20px rgba(33,25,21,.55);}
.gallery-masonry img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .7s cubic-bezier(.2,.8,.2,1);}
.gallery-masonry figure::after{content:"";position:absolute;inset:0;border-radius:12px;box-shadow:inset 0 0 0 1px rgba(33,25,21,.06);pointer-events:none;}
.gallery-masonry figure:hover img{transform:scale(1.05);}
.gallery-masonry figure.feature{grid-column:1 / -1;}
.gallery-masonry figure.feature img{object-position:center 40%;}
.gallery-masonry figure.span-2{grid-column:span 2;}
/* At exactly 3 columns the two-wide tiles leave a lone third column that the
   handful of single tiles can't keep up with, so the grid ends ragged. Let the
   wide tiles take the whole row here; singles then fill even rows of three. */
@media (min-width:680px) and (max-width:1039.98px){.gallery-masonry figure.span-2{grid-column:1/-1;}}
/* Two columns at the 4-column breakpoint only. Below it a wide tile becomes a
   full-width row, and the 2- and 3-column grids already bottom out flush. */
@media (min-width:1040px){.gallery-masonry figure.span-2-wide{grid-column:span 2;}
  /* Ending on the wide community photo left it stranded alone on the last row
     with two columns of dead space beside it. Push these two singles past it so
     the wide tile lands second-to-last and the grid bottoms out level. Done with
     order, not markup, because the 2- and 3-column grids are already flush. */
  .gallery-masonry figure.last-wide{order:1;}}
.gallery-masonry figure.compact img{object-position:center 45%;}
@media (prefers-reduced-motion:reduce){.gallery-masonry img{transition:none;}}
.story-portrait img{width:100%;height:auto;display:block;}
/* Meet the Owners: the bio is long, so on desktop float the portrait and let the
   copy wrap around it (and fill the width below it) instead of a rigid 2-column grid
   that would leave large gaps above and below the shorter photo. */
@media (min-width:820px){
  #leaders .chapter--rev{display:block;}
  #leaders .story-portrait{float:left;width:clamp(300px,34%,400px);
    margin:.4rem clamp(2rem,4vw,3.25rem) 1.4rem 0;justify-self:auto;}
  #leaders .story-copy{max-width:none;}
  #leaders .chapter--rev::after{content:"";display:block;clear:both;}
}
/* Framed photo on the homepage — same matted frame + thin red inner line as the Our Story page */
.framed-figure{margin:0 auto clamp(1.6rem,4vw,2.6rem);max-width:360px;}
.framed-figure .frame{position:relative;display:block;padding:12px;background:#fff;box-shadow:0 40px 80px -40px rgba(33,25,21,.5);}
.framed-figure .frame::before{content:"";position:absolute;inset:5px;border:1px solid var(--brand);pointer-events:none;z-index:2;}
.framed-figure .frame img{display:block;width:100%;height:auto;border-radius:0;box-shadow:none;}
@media (max-width:819px){
  .chapter,.chapter--rev{grid-template-columns:1fr;}
  .story-portrait{max-width:340px;margin-inline:auto;}
  .chapter--rev .story-portrait{order:2;}/* phones: heading first, photo after */
}
/* Founder quote — display caps in deep chile, no ornament */
.story-quote{font-family:var(--font-display);text-transform:uppercase;letter-spacing:.015em;
  font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.45;color:var(--chile-deep);margin:2rem 0;}

/* Quiet italic photo captions */
.fig-note{margin-top:.9rem;font-size:.82rem;letter-spacing:.03em;color:var(--muted);font-style:italic;text-align:center;}
/* The community photo is a square group shot — 360px is too small to read the
   faces or the cheque, so it gets its own width and some air above the copy. */
.community-photo{max-width:560px;margin-top:clamp(2rem,4vw,3rem);}
/* Phones: bilingual eyebrows keep just the Spanish label (matching the homepage hero) */
@media (max-width:720px){
  .eyebrow .en{display:none;}
}

/* ---------- Lightbox (tap/click any content photo to view full-size) ---------- */
.lightbox{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;
  background:rgba(12,8,6,.93);padding:max(2.5vh,16px) max(2.5vw,16px);}
.lightbox.show{display:flex;}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  border-radius:6px;box-shadow:0 12px 60px rgba(0,0,0,.6);}
.lightbox-close{position:absolute;top:10px;right:14px;width:44px;height:44px;border:0;border-radius:50%;
  background:rgba(255,255,255,.12);color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;}
.lightbox-close:hover{background:rgba(255,255,255,.25);}

/* Background-music toggle — small, unobtrusive, bottom-right */
.music-toggle{
  position:fixed;right:clamp(14px,2.4vw,26px);bottom:clamp(14px,2.4vw,26px);z-index:60;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--line);
  background:rgba(252,250,246,.86);color:var(--ink);cursor:pointer;
  display:grid;place-items:center;padding:0;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 4px 18px rgba(33,25,21,.14);
  transition:background .2s ease,color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.music-toggle:hover{transform:translateY(-1px);box-shadow:0 8px 26px rgba(33,25,21,.2);}
.music-toggle:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
.music-toggle svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;}
.music-toggle svg path[d^="M11"]{fill:currentColor;stroke:none;}
.music-toggle .music-toggle__on{display:none;}
.music-toggle.is-on{background:var(--chile-deep);color:#fff;border-color:var(--chile-deep);}
.music-toggle.is-on .music-toggle__off{display:none;}
.music-toggle.is-on .music-toggle__on{display:block;}
@media (prefers-reduced-motion:reduce){.music-toggle{transition:none;}}