/* =========================================================
   Salsa Fusion Restaurant — Landing page

   Design direction: "Bold Flavors. Good Vibes." — a full-bleed night
   photo hero with Playfair Display, DM Sans and terracotta pill buttons,
   carried through the whole page over the chalkboard ground from the
   Salsa Brand Book.

   Palette   cream #F7F1E8 · paper #FFFAF3 · dark #211D19
             terracotta #B84F36 / #AD4831
   Type      Playfair Display (display) · DM Sans (UI + body)
   ========================================================= */

/* ---------- tokens ---------- */
:root{
  --cream:        #F7F1E8;
  --paper:        #FFFAF3;
  --dark:         #211D19;
  --muted-ink:    #5F564E;   /* body text on paper surfaces */
  --terracotta:   #B84F36;
  --terracotta-d: #AD4831;
  /* #B84F36 is only ~3.4:1 on the dark ground — right for fills, too dim for
     small text. Labels, prices and links on dark use this lifted tint (~5:1). */
  --accent:       #E07A5F;

  --ink:          #1E1A16;
  --ink-2:        #27211C;

  --text:       rgba(247,241,232,.8);
  --text-dim:   rgba(247,241,232,.6);
  --line:       rgba(247,241,232,.13);

  --serif: "Playfair Display", Georgia, "Times New Roman", serif;
  --sans:  "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --wrap: 1160px;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
  --r: 20px;
  --r-sm: 14px;
  --ease: cubic-bezier(.22,.61,.36,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
/* texture-chalk.jpg is edge-cross-faded so it wraps seamlessly — do not
   re-export it from the brand book without redoing that, or the tile
   boundaries show up as hard vertical/horizontal seams down the page. */
body{
  margin:0;
  background-color:var(--ink);
  background-image:
    linear-gradient(rgba(46,28,16,.38), rgba(46,28,16,.38)),  /* warms the neutral chalk */
    url("assets/texture-chalk.jpg");
  background-size:auto, 1120px auto;
  background-repeat:no-repeat, repeat;
  color:var(--text);
  font-family:var(--sans);
  font-size:clamp(15px,.55vw + 13.5px,17px);
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
/* height:auto is required — without it the HTML height attribute wins over
   aspect-ratio and images render at their full intrinsic height. */
img{ max-width:100%; height:auto; display:block; }
figure{ margin:0; }
a{ color:inherit; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:500; line-height:1.1; }
p{ margin:0 0 1em; }
ul{ margin:0; padding:0; list-style:none; }

.wrap{ width:min(var(--wrap),100% - var(--pad)*2); margin-inline:auto; }
.section{ padding:clamp(4.5rem,10vw,8rem) 0; position:relative; }

/* Large-scale chalk bloom, scoped per section so it scales with the section
   rather than the whole document. Breaks up the tile's repeat rhythm. */
.section::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  /* Radii stay inside the box vertically — an ellipse clipped by the section
     edge would draw a hard horizontal band across the join. */
  background:
    radial-gradient(48% 34% at 20% 45%, rgba(247,241,232,.04), transparent 70%),
    radial-gradient(42% 32% at 84% 55%, rgba(247,241,232,.028), transparent 68%);
}
.section:nth-of-type(even)::before{ transform:scaleX(-1); }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--terracotta); color:var(--paper); padding:.75rem 1.25rem;
  font-weight:600; border-radius:999px;
}
.skip-link:focus{ left:1rem; top:1rem; }

:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }
.btn:focus-visible,.tab:focus-visible{ border-radius:999px; }

/* ---------- shared type ---------- */
.display{
  font-size:clamp(2.25rem,4vw,3.6rem);
  line-height:1.12;
  color:var(--cream);
  letter-spacing:-.01em;
  text-wrap:balance;
}
.eyebrow,.sec-label{
  font-family:var(--sans);
  font-size:.72rem; font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1rem;
}
.sec-num{
  font-family:var(--serif); font-size:1.5em; font-weight:500;
  letter-spacing:0; vertical-align:-.18em; margin-right:.5rem; opacity:.8;
}
.sec-head{ max-width:46ch; margin-bottom:clamp(2.5rem,5vw,3.75rem); }
.sec-intro{ color:var(--text-dim); margin-top:1rem; }

/* dashed rule, echoing the brand book contents page */
.sec-head::after{
  content:""; display:block; margin-top:1.75rem; height:1px;
  background-image:linear-gradient(to right, var(--line) 0 12px, transparent 12px 22px);
  background-size:22px 1px;
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:.9rem 2rem; border-radius:999px;
  font-family:var(--sans); font-size:.875rem; font-weight:500;
  letter-spacing:.04em; text-decoration:none; white-space:nowrap;
  border:1.5px solid transparent; cursor:pointer;
  transition:background-color .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease);
}
.btn:hover{ transform:translateY(-2px); }
.btn--solid{ background:var(--terracotta); border-color:var(--terracotta); color:var(--paper); }
.btn--solid:hover{ background:var(--terracotta-d); border-color:var(--terracotta-d); }
.btn--outline{ border-color:rgba(247,241,232,.55); color:var(--cream); }
.btn--outline:hover{ border-color:var(--cream); background:rgba(247,241,232,.08); }

/* =========================================================
   NAV
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  transition:background-color .3s var(--ease), backdrop-filter .3s var(--ease),
             border-color .3s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.is-stuck{
  background:rgba(28,22,18,.82);
  backdrop-filter:blur(18px) saturate(1.1);
  border-bottom-color:var(--line);
}
.nav__inner{
  width:min(var(--wrap),100% - var(--pad)*2); margin-inline:auto;
  display:flex; align-items:center; gap:clamp(1rem,3vw,2.5rem);
  padding:.7rem 0;
}
.nav__logo{ flex:none; display:block; }
.nav__logo img{ width:120px; height:auto; }  /* brand book: never below 120px wide */
.nav__links{ display:flex; gap:clamp(1.25rem,2.6vw,2.25rem); margin-left:auto; }
.nav__links a{
  font-size:.875rem; font-weight:500; letter-spacing:.03em;
  text-decoration:none; color:rgba(247,241,232,.78); padding:.4rem 0; position:relative;
  transition:color .2s var(--ease);
}
.nav__links a::after{
  content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--accent); transition:right .3s var(--ease);
}
.nav__links a:hover{ color:var(--cream); }
.nav__links a:hover::after{ right:0; }
.nav__cta{ padding:.65rem 1.4rem; font-size:.8125rem; }

.nav__toggle{
  display:none; margin-left:auto; width:44px; height:44px;
  background:none; border:0; cursor:pointer; padding:12px 10px;
  flex-direction:column; justify-content:space-between;
}
.nav__toggle span{ display:block; height:1.5px; background:var(--cream); border-radius:2px; transition:transform .3s var(--ease), opacity .2s; }
.nav__toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(8.75px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8.75px) rotate(-45deg); }

.drawer{
  position:fixed; inset:0; z-index:99;
  background:rgba(28,22,18,.97); backdrop-filter:blur(18px);
  display:grid; place-items:center;
}
.drawer[hidden]{ display:none; }   /* [hidden] loses to display:grid without this */
.drawer__links{ display:grid; gap:1.4rem; text-align:center; }
.drawer__links a{
  font-family:var(--serif); font-size:2rem; color:var(--cream); text-decoration:none;
}
.drawer__links a:hover{ color:var(--accent); }
.drawer__links .btn{ font-family:var(--sans); font-size:.9rem; margin-top:.75rem; }
.drawer__links .btn:hover{ color:var(--paper); }

/* =========================================================
   HERO
   ========================================================= */
.hero{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:max(600px, 92svh);
  display:flex; align-items:center;
  background:#2a1f18;              /* shows while the photo loads */
}
.hero__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center 40%;
  animation:hero-settle 1.8s var(--ease) both;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(0deg, rgba(15,10,6,.5) 0%, rgba(15,10,6,0) 32%),
    linear-gradient(105deg, rgba(15,10,6,.74) 0%, rgba(15,10,6,.4) 58%, rgba(15,10,6,.14) 100%);
}
.hero__inner{
  width:min(var(--wrap),100% - var(--pad)*2); margin-inline:auto;
  padding:clamp(7rem,15vh,9rem) 0 clamp(4rem,10vh,6rem);
}
.hero__eyebrow{
  font-size:clamp(.75rem,1.45vw,1rem); font-weight:500;
  letter-spacing:.2em; text-transform:uppercase;
  color:rgba(247,241,232,.84); margin:0 0 1.5rem;
}
.hero__title{
  font-size:clamp(3rem,7vw,6rem); line-height:1.04; letter-spacing:-.01em;
  color:var(--cream); margin:0 0 1.5rem;
}
.hero__lede{
  font-size:clamp(1rem,1.6vw,1.125rem); line-height:1.65;
  color:rgba(247,241,232,.8); max-width:27.5rem; margin:0 0 2.5rem;
}
.hero__actions{ display:flex; flex-wrap:wrap; gap:1rem; }

.hero__inner > *{ animation:hero-rise .9s var(--ease) both; }
.hero__inner > :nth-child(2){ animation-delay:.08s; }
.hero__inner > :nth-child(3){ animation-delay:.18s; }
.hero__inner > :nth-child(4){ animation-delay:.28s; }

@keyframes hero-rise{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:none; } }
@keyframes hero-settle{ from{ transform:scale(1.06); } to{ transform:none; } }

/* =========================================================
   ACCOLADES
   ========================================================= */
.accolades{
  border-block:1px solid var(--line);
  padding:clamp(2.25rem,4.5vw,3.25rem) var(--pad);
  text-align:center;
  background:rgba(247,241,232,.04);
}
.accolades__lead{
  font-family:var(--serif); font-size:clamp(1.25rem,2.4vw,1.75rem);
  color:var(--cream); margin:0 0 1.25rem;
}
.accolades__list{
  display:flex; flex-wrap:wrap; justify-content:center;
  gap:.6rem clamp(1.25rem,3.5vw,3rem);
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--text-dim);
}
.accolades__list span{ color:var(--accent); }

/* =========================================================
   STORY
   ========================================================= */
.story__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2.5rem,6vw,5rem); align-items:start; }
.story__text p{ max-width:62ch; }

.pledge{ display:grid; gap:1.75rem; margin-top:2.75rem; }
.pledge h3{
  font-size:1.35rem; color:var(--accent); margin-bottom:.5rem; font-style:italic;
}
.pledge p{ margin:0; color:var(--text-dim); font-size:.95rem; }
.pledge article{ padding-left:1.25rem; border-left:2px solid rgba(224,122,95,.35); }

.story__media{ margin:0; position:sticky; top:6rem; }
.story__media img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:var(--r); }
.story__media figcaption{
  margin-top:.9rem; font-size:.75rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--text-dim);
}
/* Cut-out paella breaking out of the photo's corner. The WebP has real alpha,
   so it sits straight on the chalk. The figure must stay positioned (sticky
   here, relative on mobile) to be its containing block. */
/* Scoped under .story__media so it outranks `.story__media img` (the photo's
   width/aspect/cover rules). left stays inside the column gap — the figure is
   sticky, so anything overlapping the text column would slide over the copy. */
.story__media .story__plate{
  position:absolute; left:-16%; bottom:3.5rem; width:54%;
  aspect-ratio:auto; object-fit:contain; border-radius:0;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.5));
  pointer-events:none;
}

/* =========================================================
   PILLARS
   ========================================================= */
.pillar-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(1.25rem,2.5vw,1.75rem); }
.pillar{
  grid-column:span 2;
  background:rgba(247,241,232,.05);
  border:1px solid var(--line);
  border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column;
  transition:border-color .3s var(--ease), transform .3s var(--ease),
             background-color .3s var(--ease), box-shadow .3s var(--ease);
}
.pillar:hover{
  border-color:rgba(224,122,95,.4); background:rgba(247,241,232,.07);
  transform:translateY(-4px); box-shadow:0 14px 40px rgba(0,0,0,.3);
}
.pillar__media{ overflow:hidden; aspect-ratio:16/10; }
.pillar__media img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.pillar:hover .pillar__media img{ transform:scale(1.04); }
/* Focal points for photos whose subject isn't dead-centre in a 16:10 crop */
.pillar__media img.focus-toast{ object-position:50% 28%; }   /* portrait shot: keep the clinking glasses */.pillar__body{ padding:clamp(1.5rem,2.5vw,2rem); flex:1; }
.pillar h3{ font-size:clamp(1.35rem,2vw,1.65rem); color:var(--cream); margin-bottom:.6rem; }
.pillar__essence{
  color:var(--accent); font-style:italic; font-family:var(--serif);
  font-size:1.05rem; line-height:1.45; margin-bottom:.9rem;
}
.pillar p{ font-size:.94rem; color:var(--text-dim); }
.quote-line{ color:var(--text) !important; border-left:2px solid rgba(224,122,95,.4); padding-left:1rem; font-style:italic; }

.pillar--wide{ grid-column:span 4; flex-direction:row; align-items:center; }
/* The image is taken out of flow so it can't contribute intrinsic height —
   otherwise a portrait source stretches the whole card. Card height is then
   max(min-height, body height) and the image simply covers it. */
.pillar--wide .pillar__media{
  flex:0 0 42%; aspect-ratio:auto; align-self:stretch;
  min-height:420px; position:relative;
}
.pillar--wide .pillar__media img{ position:absolute; inset:0; }
.pillar--wide .pillar__body{ align-self:center; max-width:60ch; }

.chips{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:1.25rem; }
.chips li{
  font-size:.7rem; letter-spacing:.08em; text-transform:uppercase;
  color:var(--accent); border:1px solid rgba(224,122,95,.32);
  padding:.3rem .75rem; border-radius:99px;
}

/* =========================================================
   SIGNATURE BAND
   ========================================================= */
.band{ position:relative; min-height:min(78svh,640px); display:grid; align-items:center; overflow:hidden; }
.band__img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 24%; }
.band::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(105deg, rgba(15,10,6,.9) 0%, rgba(15,10,6,.72) 42%, rgba(15,10,6,.2) 100%);
}
.band__inner{
  position:relative; z-index:1;
  width:min(var(--wrap),100% - var(--pad)*2); margin-inline:auto;
  padding:clamp(3.5rem,8vw,6rem) 0;
}
.band__title{ max-width:20ch; margin-bottom:1.25rem; }
.band__copy{ max-width:46ch; color:var(--text); }
.band__price{
  font-family:var(--serif); font-size:2rem; color:var(--accent); margin:0;
}

/* =========================================================
   MENU
   ========================================================= */
.key{ display:inline-flex; align-items:center; gap:.4rem; margin-left:1.25rem; font-size:.8rem; white-space:nowrap; }
.mark{ width:.62em; height:.62em; display:inline-block; flex:none; }
.mark--best{ background:#E08A3C; clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.mark--new{ background:#A8C36A; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }

.tabs{ display:flex; flex-wrap:wrap; gap:.6rem; margin-bottom:2.75rem; }
.tab{
  background:none; border:1.5px solid var(--line); border-radius:999px;
  color:var(--text-dim); cursor:pointer;
  font-family:var(--sans); font-size:.875rem; font-weight:500; letter-spacing:.03em;
  padding:.6rem 1.3rem;
  transition:color .25s var(--ease), border-color .25s var(--ease), background-color .25s var(--ease);
}
.tab:hover{ color:var(--cream); border-color:rgba(247,241,232,.38); }
.tab.is-active{ background:var(--terracotta); border-color:var(--terracotta); color:var(--paper); }

.menu__body{ display:grid; grid-template-columns:1.4fr .6fr; gap:clamp(2rem,5vw,4rem); align-items:start; }

.dishes li{ padding:1.5rem 0; border-bottom:1px solid var(--line); }
.dishes li:first-child{ padding-top:0; }
.dishes h3{
  display:flex; align-items:baseline; gap:.55rem;
  font-size:clamp(1.15rem,1.6vw,1.3rem); color:var(--cream); margin-bottom:.4rem;
}
.dishes h3 .dot{
  flex:1 1 auto; min-width:1.5rem; height:1px; transform:translateY(-.28em);
  background-image:linear-gradient(to right, var(--line) 0 4px, transparent 4px 9px);
  background-size:9px 1px;
}
.dishes h3 b{ font-family:var(--sans); font-size:.9em; color:var(--accent); font-weight:600; flex:none; }
.dishes h3 b::before{ content:"₱"; margin-right:.1em; }
.dishes p{ margin:0; font-size:.92rem; color:var(--text-dim); max-width:62ch; }
.opts{
  display:block; margin-top:.5rem; font-size:.78rem;
  letter-spacing:.04em; color:var(--accent); opacity:.9;
}
/* ---------- drinks: short rows, so two columns of grouped lists ---------- */
.drinks{ columns:2; column-gap:clamp(2rem,4vw,3.5rem); }
.drinks__group{ break-inside:avoid; margin-bottom:2.25rem; }
.drinks__group h4{
  font-size:.78rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--accent); margin-bottom:.85rem;
}
.drinks__group h4 em{ font-style:normal; letter-spacing:.06em; color:var(--text-dim); text-transform:none; }
.drinks__list li{
  display:flex; align-items:baseline; gap:.55rem;
  padding:.55rem 0; border-bottom:1px solid var(--line);
  font-size:.95rem; color:var(--cream);
}
.drinks__list small{ display:block; font-size:.78rem; color:var(--text-dim); margin-top:.1rem; }
.drinks__list .dot{
  flex:1 1 auto; min-width:1.5rem; height:1px; transform:translateY(-.28em);
  background-image:linear-gradient(to right, var(--line) 0 4px, transparent 4px 9px);
  background-size:9px 1px;
}
.drinks__list b{ font-family:var(--sans); font-size:.9em; color:var(--accent); font-weight:600; flex:none; }
.drinks__list b::before{ content:"₱"; margin-right:.1em; }

.menu__note{ margin-top:2rem; font-size:.78rem; letter-spacing:.04em; color:var(--text-dim); }

.panel[hidden]{ display:none; }

/* ---------- favorites: cut-out plates floating on the chalk ---------- */
/* The dish WebPs have real alpha — always contain, never cover, or the
   plates get cropped. */
.faves{
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:clamp(2.5rem,5vw,3.5rem) clamp(1.5rem,3vw,2.5rem);
  margin-bottom:clamp(4.5rem,9vw,7rem);
}
.fave{ text-align:center; }
.fave__plate{ position:relative; aspect-ratio:4/3; margin-bottom:1.1rem; }
.fave__plate::before{            /* soft pool of light so dark plates don't vanish into the ground */
  content:""; position:absolute; inset:4% 8%;
  background:radial-gradient(closest-side, rgba(247,241,232,.1), rgba(247,241,232,0));
}
.fave__plate img{
  position:relative; width:100%; height:100%; object-fit:contain;
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.45));
  transition:transform .6s var(--ease);
}
.fave:hover .fave__plate img{ transform:scale(1.05) rotate(-2deg); }
.fave h3{ font-size:clamp(1.3rem,1.9vw,1.55rem); color:var(--cream); margin-bottom:.5rem; }
.fave p{ margin:0 auto; max-width:34ch; font-size:.92rem; color:var(--text-dim); }

.menu__subhead{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:.5rem 1.5rem; margin-bottom:1.5rem;
}
.menu__label{ font-size:clamp(1.6rem,2.6vw,2.1rem); color:var(--cream); }
.menu__keys{ margin:0; color:var(--text-dim); }
.menu__keys .key:first-child{ margin-left:0; }

.menu__aside{ position:sticky; top:6rem; }
.menu__cta{ border:1px solid var(--line); border-radius:var(--r); padding:1.75rem; background:rgba(247,241,232,.05); }
.menu__cta h3{ font-size:1.35rem; color:var(--cream); margin-bottom:.6rem; }
.menu__cta p{ font-size:.9rem; color:var(--text-dim); }

/* =========================================================
   TESTIMONIAL
   ========================================================= */
.testimonial{ background:rgba(15,10,6,.28); border-block:1px solid var(--line); }
.testimonial__inner{ max-width:60ch; text-align:center; }
.stars{ color:var(--accent); letter-spacing:.35em; font-size:1.05rem; margin-bottom:1.5rem; }
.testimonial blockquote{ margin:0; }
.testimonial blockquote p{
  font-family:var(--serif); font-style:italic; font-size:clamp(1.25rem,2.6vw,1.8rem);
  line-height:1.5; color:var(--cream); text-wrap:balance;
}
.testimonial blockquote p::before{ content:"“"; }
.testimonial blockquote p::after{ content:"”"; }
.testimonial__by{
  margin:1.5rem 0 0; font-size:.78rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cream);
}
.testimonial__by span{ color:var(--text-dim); }

/* =========================================================
   GALLERY
   ========================================================= */
/* Fixed row height keeps the row spans predictable regardless of source ratio. */
.gal{
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-auto-rows:clamp(150px,16.5vw,235px);
  gap:clamp(.75rem,1.4vw,1rem);
}
.gal__item{ overflow:hidden; background:var(--ink-2); height:100%; border-radius:var(--r-sm); }
.gal__item--tall{ grid-row:span 2; }
.gal__item--wide{ grid-column:span 2; }
.gal__item--full{ grid-column:1 / -1; grid-row:span 2; }
/* Cut-out dishes (transparent WebP) sit on a paper tile instead of being
   cropped by cover — the plate stays whole and breaks up the run of photos. */
.gal__item--plate{
  background:radial-gradient(110% 90% at 50% 38%, var(--paper), #EADCC8);
  padding:clamp(.6rem,1.6vw,1.25rem);
}
.gal__item img{ width:100%; height:100%; object-fit:cover; transition:transform .7s var(--ease); }
.gal__item:hover img{ transform:scale(1.05); }
.gal__item--plate img{ object-fit:contain; filter:drop-shadow(0 12px 14px rgba(33,29,25,.25)); }

/* =========================================================
   VISIT
   ========================================================= */
.visit__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,5vw,4rem); align-items:start; }

.card--cream{
  background:var(--paper); color:var(--muted-ink);
  border-radius:var(--r);
  padding:clamp(2rem,4vw,2.75rem); text-align:center;
}
.card--cream h3{ font-size:1.9rem; color:var(--dark); margin-bottom:.5rem; }
.card__lead{ color:var(--muted-ink); font-size:.95rem; margin-bottom:1.75rem; }
.card__or{
  margin:1.5rem 0 .35rem; font-size:.7rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted-ink);
}
.card__phone{
  font-family:var(--serif); font-size:1.5rem; color:var(--dark);
  text-decoration:none; border-bottom:1px solid rgba(33,29,25,.3);
}
.card__phone:hover{ color:var(--terracotta-d); border-color:var(--terracotta-d); }

.visit__details{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.75rem,4vw,2.75rem); margin:0; }
.visit__details dt{
  font-size:.7rem; font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent); margin-bottom:.6rem;
}
.visit__details dd{ margin:0; color:var(--cream); font-size:1rem; line-height:1.65; }
.visit__details a{ text-decoration:none; border-bottom:1px solid rgba(224,122,95,.45); }
.visit__details a:hover{ color:var(--accent); }

/* =========================================================
   FINAL CTA
   ========================================================= */
.cta{
  position:relative; isolation:isolate; overflow:hidden;
  min-height:clamp(480px,55vw,640px);
  display:grid; place-items:center; text-align:center;
  background:#2a1f18;              /* shows while the photo loads */
}
.cta__img{
  position:absolute; inset:0; z-index:-2;
  width:100%; height:100%; object-fit:cover; object-position:center 30%;
}
.cta::before{ content:""; position:absolute; inset:0; z-index:-1; background:rgba(15,8,4,.66); }
.cta__inner{ padding:clamp(4rem,9vw,6rem) var(--pad); max-width:44rem; }
.cta__title{
  font-size:clamp(2.75rem,6vw,5rem); line-height:1.06; letter-spacing:-.01em;
  color:var(--cream); margin-bottom:1.25rem;
}
.cta__lede{ font-size:clamp(1rem,1.5vw,1.125rem); color:rgba(247,241,232,.78); margin:0 0 2.25rem; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer{ border-top:1px solid var(--line); padding:clamp(3rem,6vw,4.5rem) 0 2.5rem; background:rgba(10,7,4,.55); }
.footer__inner{ text-align:center; }
.footer__logo{ width:150px; height:auto; margin:0 auto 1.25rem; }
.footer__tag{
  font-family:var(--serif); font-style:italic; font-size:1.05rem;
  color:var(--text-dim); max-width:38ch; margin:0 auto 2rem;
}
.footer__nav{ display:flex; flex-wrap:wrap; justify-content:center; gap:.75rem 1.75rem; margin-bottom:2rem; }
.footer__nav a{
  font-size:.875rem; letter-spacing:.03em;
  text-decoration:none; color:var(--text-dim);
}
.footer__nav a:hover{ color:var(--cream); }
.footer__legal{ margin:0; font-size:.75rem; letter-spacing:.04em; color:rgba(247,241,232,.4); }

/* =========================================================
   REVEAL
   ========================================================= */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1080px){
  .pillar-grid{ grid-template-columns:repeat(2,1fr); }
  .pillar{ grid-column:span 1; }
  .pillar--wide{ grid-column:span 2; }
}

@media (max-width:900px){
  .nav__links,.nav__cta{ display:none; }
  .nav__toggle{ display:flex; }

  .hero{ min-height:max(560px, 84svh); }
  .hero__img{ object-position:64% center; }
  .hero::before{
    background:linear-gradient(0deg, rgba(15,10,6,.82) 0%, rgba(15,10,6,.5) 55%, rgba(15,10,6,.38) 100%);
  }

  .story__grid,
  .menu__body,
  .visit__grid{ grid-template-columns:1fr; }
  .story__media{ position:relative; top:auto; }   /* stays positioned for .story__plate */
  .menu__aside{ position:static; }
  .story__media .story__plate{ left:auto; right:-3%; bottom:4rem; width:36%; }   /* clears the 2-line caption */
  .story__media img{ aspect-ratio:16/10; object-position:50% 48%; }   /* faces + toast, not palm tops */

  .pillar--wide{ flex-direction:column; align-items:stretch; }
  .pillar--wide .pillar__media{ flex:none; aspect-ratio:16/10; min-height:0; }

  /* dense packing back-fills the holes that 2-wide tiles leave in two columns */
  .gal{ grid-template-columns:repeat(2,1fr); grid-auto-rows:clamp(140px,26vw,220px); grid-auto-flow:row dense; }
  .gal__item--tall{ grid-row:span 1; }

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

@media (max-width:600px){
  .pillar-grid{ grid-template-columns:1fr; }
  .pillar--wide{ grid-column:span 1; }
  .visit__details{ grid-template-columns:1fr; }
  .faves{ grid-template-columns:1fr; }
  .fave__plate{ max-width:340px; margin-inline:auto; }
  .gal__item--full{ grid-row:span 1; }
  .hero__actions .btn{ flex:1 1 100%; }
  .tabs{ overflow-x:auto; flex-wrap:nowrap; scrollbar-width:none; margin-inline:calc(var(--pad) * -1); padding-inline:var(--pad); }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{ white-space:nowrap; }
  .dishes h3{ flex-wrap:wrap; }
  .dishes h3 .dot{ min-width:.75rem; }
  .drinks{ columns:1; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.01ms !important; animation-delay:0s !important; transition-duration:.01ms !important; }
  .reveal{ opacity:1; transform:none; }
}