:root {
  --ink: #35131e;
  --deep: #1f0911;
  --jade: #6d2138;
  --jade-light: #c9a8ad;
  --sand: #e7d9c8;
  --warm-white: #f6efe4;
  --clay: #a34759;
  --gold: #c7a36d;
  --serif: "Cormorant Garamond", "Noto Serif TC", Georgia, serif;
  --cn-serif: "Noto Serif TC", Georgia, serif;
  --sans: "Montserrat", "Noto Serif TC", Arial, sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; scrollbar-gutter: stable; }
body { margin: 0; color: var(--ink); background: var(--warm-white); font-family: var(--sans); font-size: 15px; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
.page-grain { pointer-events: none; position: fixed; z-index: 10; inset: 0; opacity: .055; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); }
.site-shell { overflow: hidden; max-width: 1680px; margin: 0 auto; background: var(--warm-white); }
.section-pad { padding-left: clamp(1.35rem, 6.7vw, 8rem); padding-right: clamp(1.35rem, 6.7vw, 8rem); }

.site-header { height: 6.8rem; display: flex; align-items: center; justify-content: space-between; padding: 0 clamp(1.35rem, 6.7vw, 8rem); border-bottom: 1px solid rgba(23,37,33,.13); position: relative; z-index: 3; background: rgba(244,240,231,.84); backdrop-filter: blur(18px); }
.brand { display: inline-flex; align-items: center; gap: .6rem; white-space: nowrap; color: var(--jade); text-transform: uppercase; }
.brand-easy,.brand-east { font: 600 1.05rem/1 var(--serif); letter-spacing: .2em; }
.brand-chinese { padding: .08rem .52rem; border-left: 1px solid rgba(109,33,56,.5); border-right: 1px solid rgba(109,33,56,.5); color: var(--jade); font: 600 .72rem/.94 var(--cn-serif); letter-spacing: .18em; text-align: center; }
.site-nav { display: flex; align-items: center; gap: clamp(.8rem, 1.7vw, 2rem); font-size: .73rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; }
.site-nav > a { position: relative; padding: .4rem 0; }
.site-nav > a:not(.nav-book)::after { content: ""; position: absolute; height: 1px; background: var(--ink); left: 0; right: 100%; bottom: 0; transition: right .25s ease; }
.site-nav > a:hover::after, .site-nav > a.active::after { right: 0; }
.nav-book { color: var(--warm-white); background: var(--ink); border-radius: 999px; padding: .77rem 1rem !important; transition: background .25s, transform .25s; }
.nav-book:hover { background: var(--clay); transform: translateY(-2px); }
.menu-toggle { display: none; border: 0; background: none; padding: .5rem; }


h1,h2,h3,p { margin-top: 0; }
h2 em { font-weight: 500; color: var(--clay); }
.hero-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1.8rem; margin-top: 2.2rem; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 1.4rem; border-radius: 999px; padding: .88rem 1.15rem .88rem 1.35rem; font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; transition: .22s; }
.button span { font-size: 1rem; line-height: 0; }
.text-link { border-bottom: 1px solid rgba(23,37,33,.5); padding-bottom: .15rem; font-size: .76rem; font-weight: 700; letter-spacing: .06em; }
.text-link span { margin-left: .45rem; transition: transform .2s; display: inline-block; }
.text-link:hover span { transform: translateX(4px); }
.menu-section { padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.section-heading { display: grid; gap: 2rem; }
.heading-split { grid-template-columns: 1.2fr .8fr; align-items: end; }
h2 { margin: 0; font: 500 clamp(2.85rem, 5.5vw, 5.8rem)/.95 var(--serif); letter-spacing: -.075em; }
.menu-tabs { display: flex; flex-wrap: wrap; gap: .6rem; margin: 3.7rem 0 1.15rem; }
.menu-tabs button { cursor: pointer; border: 1px solid rgba(23,37,33,.25); border-radius: 999px; padding: .62rem 1rem; background: transparent; color: #526059; font-size: .66rem; letter-spacing: .075em; font-weight: 700; transition: .22s; }
.menu-tabs button:hover,.menu-tabs button.selected { background: var(--ink); color: var(--warm-white); border-color: var(--ink); }
.menu-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; grid-auto-rows: 260px; grid-auto-flow: row dense; gap: 1rem; margin-bottom: 2.2rem; }
.menu-card { position: relative; overflow: hidden; border-radius: 1rem; background: #d6d0c3; min-height: 0; transition: transform .3s ease, opacity .3s; }
/* Every sixth card takes a double-height slot, so the composition stays
   irregular however many dishes the menu list grows to. */
.menu-card:nth-child(6n+1) { grid-row: span 2; }
/* A category with only a handful of dishes keeps uniform slots. */
.menu-grid:not(:has(.menu-card:nth-child(4))) .menu-card { grid-row: auto; }
/* Two dishes still fill the row instead of leaving a third column empty. */
.menu-grid:has(.menu-card:nth-child(2)):not(:has(.menu-card:nth-child(3))) { grid-template-columns: 1.2fr .8fr; grid-auto-rows: 320px; }
.dish-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .55s ease; }
.menu-card:hover .dish-photo { transform: scale(1.055); }
.menu-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,20,16,.78), rgba(7,20,16,.03) 66%); }
.dish-copy { position: absolute; left: 1.5rem; right: 1.5rem; bottom: 1.3rem; z-index: 1; color: white; text-shadow: 0 1px 12px rgba(0,0,0,.2); }
.dish-copy h3 { margin: 0; font: 700 clamp(1.05rem, 1.45vw, 1.3rem)/1.25 var(--sans); letter-spacing: -.035em; }
.dish-copy h3 small { display: block; margin-top: .42rem; color: var(--gold); font: 600 .71rem/1.2 var(--sans); letter-spacing: .12em; }
.menu-note { margin: -1rem 0 2rem; color: #526059; font-size: .84rem; }
.button-outline { border: 1px solid rgba(23,37,33,.45); color: var(--ink); }
.button-outline:hover { background: var(--home-burgundy); border-color: var(--home-burgundy); color: var(--home-cream); }

.about-section { display: grid; grid-template-columns: .98fr 1.02fr; background: var(--sand); min-height: 670px; }
.about-copy { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(4.8rem, 8vw, 7rem); max-width: 700px; }

.gallery-section { padding-top: clamp(5rem, 10vw, 9rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.gallery-heading { grid-template-columns: 1.2fr .8fr; align-items: end; margin-bottom: 3.6rem; }
.gallery-grid { display: grid; grid-template-columns: 1.25fr .8fr .8fr; grid-template-rows: 210px 210px; gap: 1rem; }
.gallery-item { position: relative; margin: 0; overflow: hidden; border-radius: 1rem; background-color: #a79b89; }
.gallery-item::after { content:""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(5,13,11,.65), transparent 55%); }
.gallery-item figcaption { position: absolute; z-index: 1; bottom: 1rem; left: 1.1rem; color: #fff; font: 700 .74rem/1.25 var(--sans); letter-spacing: 0; text-transform: uppercase; }
.gallery-item figcaption span { display: block; margin: .42rem 0 0; color: var(--home-cream); font: 600 .66rem/1.2 var(--sans); letter-spacing: .12em; }
.gallery-tall { grid-row: 1 / 3; background-image: url("assets/gallery/table.webp"); background-size: cover; background-position: center 45%; }
.gallery-wide { grid-column: 2 / 4; background-image: url("assets/gallery/sea.webp"); background-size: cover; background-position: center 55%; }
.gallery-small { background-image: url("assets/gallery/atmosphere.webp"); background-size: cover; background-position: center 45%; }
.gallery-store { background-image: url("assets/gallery/easyeast.jpg"); background-size: cover; background-position: center 38%; }
.contact-section { padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); }
.contact-card { display: grid; grid-template-columns: .93fr 1.07fr; min-height: 570px; border-radius: 1.2rem; overflow: hidden; background: var(--sand); box-shadow: 0 14px 35px rgba(26,39,34,.07); }
.contact-map { position: relative; overflow: hidden; background: #cfbdac; }
.contact-copy { padding: clamp(3rem, 6vw, 6rem); }
.contact-copy h2 { margin-bottom: 2rem; }
address { margin: 0 0 1.45rem; font-style: normal; color: #4c5851; font-size: .88rem; line-height: 1.8; }
.contact-line { display: flex; justify-content: space-between; gap: 1rem; max-width: 25rem; padding: .75rem 0; border-top: 1px solid rgba(23,37,33,.23); font: 600 .67rem var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.contact-line:last-of-type { border-bottom: 1px solid rgba(23,37,33,.23); }
.contact-line span { transition: transform .2s; }.contact-line:hover span { transform: translate(3px,-3px); }
.hours { margin: 2.2rem 0 0; color: #5a665e; font-size: .77rem; line-height: 1.7; }.hours b { color: var(--ink); font-size: .61rem; letter-spacing: .09em; text-transform: uppercase; }

.booking-section { position: relative; isolation: isolate; padding-top: clamp(5rem, 9vw, 8rem); padding-bottom: clamp(5rem, 9vw, 8rem); text-align: center; color: var(--warm-white); background-image: linear-gradient(rgba(246,240,230,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(246,240,230,.05) 1px, transparent 1px), radial-gradient(circle at 45% 20%, #8d344d, var(--deep) 56%); background-size: var(--home-grid) var(--home-grid), var(--home-grid) var(--home-grid), auto; background-position: right top, right top, center; }
.booking-section h2 { position: relative; z-index: 1; }.booking-section h2::before { content: ""; display: block; width: 3.4rem; height: 2.34rem; margin: 0 auto 1.7rem; background: url("fan.png") center / contain no-repeat; opacity: .88; }.button-light { position: relative; z-index: 1; background: var(--warm-white); color: var(--ink); }.button-light:hover { background: var(--clay); color: var(--home-cream); }
/* With the reservation note gone, the CTA closes up under the headline into
   one visual group (fan — headline — button) centred in the chapter. */
.booking-section .button-light { margin-top: 2.4rem; }
/* A static double-hairline seal ring replaces the rotating orbit: the label
   geometry of a wine list rather than a satellite diagram. */
.booking-orbit { position: absolute; inset: 50% auto auto 50%; z-index: -1; width: min(34rem, 86vw); aspect-ratio: 1; transform: translate(-50%, -50%); border: 1px solid rgba(197,163,101,.18); border-radius: 50%; }
.booking-orbit::before { content: ""; position: absolute; inset: 1.1rem; border: 1px solid rgba(197,163,101,.1); border-radius: 50%; }
.booking-orbit span { display: none; }

.site-footer { min-height: 7.5rem; display: flex; gap: 2rem; align-items: center; padding: 1.8rem clamp(1.35rem, 6.7vw, 8rem); background: var(--deep); color: var(--warm-white); }.site-footer .brand { color: var(--warm-white); }.site-footer .brand-chinese { color: var(--warm-white); border-color: rgba(246,239,228,.5); }.site-footer > a:last-child { display: grid; place-items: center; width: 2rem; height: 2rem; margin-left: auto; border: 1px solid #8f5665; border-radius: 50%; }

@media (max-width: 850px) {
  .about-section { grid-template-columns: 1fr; }.contact-card { grid-template-columns: 1fr; }.contact-copy { padding: 3.5rem; }
}
@media (max-width: 540px) {
  .brand-easy,.brand-east { font-size: .9rem; }.brand-chinese { font-size: .59rem; padding-left: .38rem; padding-right: .38rem; } .contact-copy { padding: 3.2rem 1.6rem; }.site-footer { flex-wrap: wrap; gap: 1rem; }.site-footer > a:last-child { margin-left: auto; }
}

/* Mobile is deliberately composed, rather than a scaled desktop layout. */
@media (max-width: 600px) {
  body { font-size: 14px; }
  .section-pad { padding-left: clamp(1.15rem, 5.8vw, 1.55rem); padding-right: clamp(1.15rem, 5.8vw, 1.55rem); }

  .hero-copy { min-width: 0; }
  .button { min-height: 2.85rem; padding: .82rem 1rem .82rem 1.15rem; }

  h2 { font-size: clamp(2.45rem, 12vw, 3.7rem); line-height: .98; }
  .menu-section,.gallery-section,.contact-section { padding-top: 4.6rem; padding-bottom: 4.6rem; }
  .section-heading { gap: 1.2rem; }
  .menu-tabs { flex-wrap: nowrap; overflow-x: auto; margin: 2.4rem -1.15rem 1.1rem; padding: 0 1.15rem .45rem; scrollbar-width: none; }
  .menu-tabs::-webkit-scrollbar { display: none; }
  .menu-tabs button { flex: 0 0 auto; font-size: .6rem; }

  .gallery-heading { margin-bottom: 2.25rem; }
}

@media (max-width: 360px) {
  .brand { gap: .38rem; }
  .brand-easy,.brand-east { font-size: .78rem; letter-spacing: .14em; }
  .brand-chinese { padding-left: .28rem; padding-right: .28rem; }
}

.hero-copy { width: min(100%, 47rem); position: relative; z-index: 1; }
.button-primary { background: var(--warm-white); color: var(--jade); box-shadow: 0 5px 0 rgba(0,0,0,.18); }
.button-primary:hover { background: var(--home-burgundy); color: var(--home-cream); }
.hero .text-link { border-color: rgba(246,239,228,.65); color: var(--warm-white); }

.menu-section,.gallery-section,.contact-section { position: relative; background-color: rgba(246,239,228,.92); }
.menu-section > *,.gallery-section > *,.contact-section > * { position: relative; }

@media (max-width: 600px) {
  .hero-actions { align-items: flex-start; }
  .hero-actions .text-link { padding: .78rem 0; }
}

/* Fixed navigation and lattice home composition. */
:root {
  --home-burgundy: #681d33;
  --home-burgundy-dark: #521426;
  --home-cream: #f6f0e6;
  --home-grid: 48px;
}

html { scroll-padding-top: 6.5rem; }
.site-shell { position: relative; }

.site-header {
  position: fixed;
  z-index: 20;
  top: 14px;
  left: 50%;
  width: min(calc(100% - 48px), 1360px);
  height: 68px;
  padding: 0 26px;
  border: 0;
  border-radius: 2px;
  background: var(--home-burgundy);
  color: var(--home-cream);
  box-shadow: 0 8px 24px rgba(53, 19, 30, .16);
  backdrop-filter: none;
  transform: translateX(-50%);
}

.site-header .brand {
  gap: .58rem;
  color: var(--home-cream);
}

.site-header .brand-easy,
.site-header .brand-east {
  color: inherit;
  font: 600 .96rem/1 var(--serif);
  letter-spacing: .16em;
}

.site-header .brand-chinese {
  padding: .08rem .5rem;
  border-color: rgba(246, 240, 230, .62);
  color: inherit;
  font: 600 .67rem/.95 var(--cn-serif);
  letter-spacing: .15em;
}

.site-header .site-nav {
  gap: clamp(.9rem, 1.6vw, 1.65rem);
  color: var(--home-cream);
  font-size: .69rem;
}

.site-header .site-nav > a:not(.nav-book)::after {
  background: var(--home-cream);
}

.site-header .nav-book {
  padding: .7rem .92rem !important;
  border: 1px solid rgba(246, 240, 230, .68);
  border-radius: 2px;
  background: var(--home-cream);
  color: var(--home-burgundy-dark);
}

.site-header .nav-book:hover {
  background: transparent;
  color: var(--home-cream);
  transform: translateY(-1px);
}

.site-header .menu-toggle { color: var(--home-cream); }
.site-header .menu-toggle span { background: currentColor; }

.hero.section-pad {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(480px, 576px);
  align-items: start;
  gap: calc(var(--home-grid) * 2);
  min-height: 768px;
  padding: calc(var(--home-grid) * 2) max(var(--home-grid), calc((100% - 1440px) / 2)) var(--home-grid);
  overflow: hidden;
  background-color: var(--home-cream);
  background-image:
    linear-gradient(rgba(104, 29, 51, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 29, 51, .3) 1px, transparent 1px);
  background-position: right top;
  background-size: var(--home-grid) var(--home-grid);
  color: var(--home-burgundy);
}

.hero .hero-copy {
  z-index: 1;
  width: min(100%, 560px);
  padding: var(--home-grid) 0;
}

.hero .hero-copy h1 {
  margin: 0 0 1.8rem;
  color: var(--home-burgundy);
  font: 600 clamp(2.7rem, 4.4vw, 4.6rem)/1.02 var(--sans);
  letter-spacing: 0;
  text-transform: uppercase;
}

.hero .hero-intro {
  max-width: 31rem;
  margin: 0;
  color: var(--home-burgundy);
  font: 500 clamp(1rem, 1.25vw, 1.18rem)/1.7 var(--sans);
  letter-spacing: 0;
}

.home-windows {
  display: grid;
  grid-template-rows: repeat(2, 240px);
  gap: var(--home-grid);
  width: 100%;
  margin-top: var(--home-grid);
}

.home-window {
  position: relative;
  overflow: hidden;
  border: 6px solid var(--home-burgundy);
  border-radius: 0;
  background: var(--home-cream);
}

.review-window {
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
}

.review-summary {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1.45rem 1.3rem;
  border-right: 3px solid var(--home-burgundy);
  background: var(--home-burgundy);
  color: var(--home-cream);
}

.review-summary > div { display: flex; flex-direction: column; }
.review-summary strong { font: 600 3.1rem/.9 var(--sans); letter-spacing: 0; }
.review-summary .review-stars { margin-top: .72rem; color: var(--home-cream); font-size: .68rem; letter-spacing: .12em; }
.review-summary p { margin: 0; color: rgba(246, 240, 230, .8); font-size: .64rem; font-weight: 600; line-height: 1.45; text-transform: uppercase; }

.home-review-track { position: relative; min-width: 0; }
.home-review {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 0;
  margin: 0;
  padding: 1.55rem 1.65rem;
  border: 0;
  background: transparent;
  color: var(--home-burgundy);
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity .55s ease, transform .55s ease;
}

.home-review.is-active { opacity: 1; transform: translateY(0); pointer-events: auto; }
.home-review p { max-width: 25rem; margin: 0; font: 600 clamp(.95rem, 1.35vw, 1.18rem)/1.5 var(--sans); letter-spacing: 0; }
.home-review footer { color: var(--home-burgundy); font: 700 .62rem/1.3 var(--sans); letter-spacing: .06em; text-transform: uppercase; }

.food-window { background: var(--home-burgundy-dark); }
.food-slide { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.025); transition: opacity .7s ease, transform 4.3s ease; }
.food-slide.is-active { opacity: 1; transform: scale(1); }
.food-slide img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.88) contrast(1.03); }

.menu-section {
  background-color: var(--home-cream);
  background-image: linear-gradient(rgba(104, 29, 51, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 29, 51, .22) 1px, transparent 1px);
  background-size: var(--home-grid) var(--home-grid);
}

.menu-section .section-heading,
.menu-section .menu-tabs,
.menu-section .menu-grid,
.menu-section > .button { position: relative; z-index: 1; }

.menu-section h2 { color: var(--home-burgundy); }

.menu-section .menu-tabs button { border-color: var(--home-burgundy); border-radius: 0; color: var(--home-burgundy); }
.menu-section .menu-tabs button:hover,
.menu-section .menu-tabs button.selected { background: var(--home-burgundy); border-color: var(--home-burgundy); color: var(--home-cream); }

.menu-card {
  border: 6px solid var(--home-burgundy);
  border-radius: 0;
  box-shadow: none;
  background: var(--home-burgundy-dark);
}

.menu-card .dish-photo { filter: saturate(.9) contrast(1.03); }
.menu-card .dish-copy { bottom: 1.15rem; }
.menu-card .dish-copy h3 { letter-spacing: 0; }
.menu-card .dish-copy h3 small { color: var(--home-cream); }
.about-section {
  padding: clamp(3rem, 7vw, 7rem) max(var(--home-grid), calc((100% - 1440px) / 2));
  background-color: var(--home-cream);
  background-image: linear-gradient(rgba(104, 29, 51, .22) 1px, transparent 1px), linear-gradient(90deg, rgba(104, 29, 51, .22) 1px, transparent 1px);
  background-size: var(--home-grid) var(--home-grid);
}

.about-window {
  display: grid;
  grid-template-columns: minmax(0, .98fr) minmax(0, 1.02fr);
  width: min(76vw, 1100px);
  min-height: 570px;
  margin: 0 auto;
  border: 6px solid var(--home-burgundy);
  background: var(--home-cream);
}

.about-image {
  min-height: 570px;
  background-image: linear-gradient(90deg, rgba(82, 20, 38, .2), transparent 60%), url("assets/gallery/dining-room.webp");
  background-position: center;
  background-size: cover;
}

.about-copy {
  max-width: none;
  padding: clamp(2.3rem, 5vw, 5rem);
  color: var(--home-burgundy);
}

.about-copy h2 { max-width: 10ch; color: var(--home-burgundy); }
.about-copy h2 em { color: var(--home-burgundy); font-style: normal; }
/* Cormorant draws its own hyphen on a slant. Take the level one from the next
   serif already in the heading's stack, so weight, baseline and spacing stay native. */
.about-copy h2 .hyphen { font-family: "Noto Serif TC", serif; font-style: normal; }
/* "Family-run" takes the site-wide heading emphasis (italic + clay) that the
   Menus and Gallery headings use, rather than About's own upright em. */
.about-copy h2 .family-run { font-style: italic; color: var(--clay); }
.about-copy .about-body { max-width: 30rem; margin: 0; color: var(--home-burgundy); font-size: .98rem; line-height: 1.8; }

.about-copy .about-body + .about-hours { color: var(--home-burgundy); }

.about-hours {
  max-width: 30rem;
  margin-top: 3rem;
  padding-top: 1.2rem;
  border-top: 3px solid var(--home-burgundy);
}

.about-hours p { margin: 0 0 .55rem; font: 700 .66rem/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.about-hours strong { display: block; font-size: .88rem; line-height: 1.5; }
.about-hours span { display: block; margin-top: .2rem; font-size: .9rem; }

@media (max-width: 760px) {
  .menu-card { border-width: 4px; }
  .about-section { padding: 48px 24px; }
  .about-window { grid-template-columns: 1fr; width: 100%; min-height: 0; border-width: 4px; }
  .about-copy h2 { font-size: clamp(2.4rem, 12vw, 3.7rem); }
}

@media (min-width: 1101px) and (max-width: 1250px) {
  .hero .hero-copy h1 { font-size: 2.7rem; }
}

@media (max-width: 1119px) {
  .hero.section-pad {
    grid-template-columns: 1fr;
    gap: var(--home-grid);
    min-height: auto;
  }
  .home-windows {
    justify-self: end;
    width: min(100%, 576px);
    margin-top: 0;
  }
}

@media (max-width: 980px) {
  /* Centre the pill with left/right insets instead of translateX(): a
     transformed ancestor would trap the fixed full-screen nav overlay. */
  .site-header {
    left: 14px;
    right: 14px;
    width: auto;
    transform: none;
  }
  .site-header .menu-toggle { position: relative; z-index: 4; display: grid; gap: 5px; cursor: pointer; }
  /* The nav drops from under the header pill as a half-screen floating
     panel, flush against the header's bottom edge — same burgundy, so the
     two read as one continuous sheet. */
  .site-header .site-nav {
    position: fixed;
    z-index: 15;
    top: 80px;
    bottom: auto;
    left: 14px;
    right: 14px;
    height: 50vh;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: clamp(.85rem, 2.4vh, 1.25rem);
    padding: 1.5rem 1.6rem 1.7rem;
    background: var(--home-burgundy);
    color: var(--home-cream);
    font-size: 15px; /* explicit px: rem-based sizes get inflated by mobile webviews */
    border-radius: 0 0 2px 2px;
    box-shadow: 0 18px 44px rgba(53, 19, 30, .3);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-14px) scaleY(.98);
    transform-origin: top center;
    pointer-events: none;
  }

  .site-header .site-nav.open {
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    transition: opacity .3s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1);
  }

  .site-header .site-nav > a { padding: .34rem 0; letter-spacing: .05em; font-size: 15px; }

  /* Book a Table reads as the last row of the list, not a loud block:
     same type, same colour, one hairline to set it apart. */
  .site-header .site-nav .nav-book {
    margin-top: .9rem;
    padding: .62rem 0 .18rem !important;
    border: 0;
    border-top: 1px solid rgba(246, 240, 230, .3);
    border-radius: 0;
    background: transparent;
    color: inherit;
    font-size: 15px;
    letter-spacing: .05em;
  }
  .site-header .site-nav .nav-book:hover {
    background: transparent;
    color: inherit;
    transform: none;
  }
  .site-header .nav-book { margin-top: .35rem; }
  .hero.section-pad {
    gap: var(--home-grid);
    padding-inline: var(--home-grid);
  }
  .review-window { grid-template-columns: 138px minmax(0, 1fr); }
  .review-summary { padding: 1.25rem 1rem; }
  .home-review { padding: 1.3rem; }
}

@media (max-width: 760px) {
  :root { --home-grid: 32px; }
  html { scroll-padding-top: 5.8rem; }
  .site-header .brand-easy,
  .site-header .brand-east { font-size: .83rem; letter-spacing: .13em; }
  .site-header .brand-chinese { padding-inline: .38rem; font-size: .58rem; }
  .hero.section-pad {
    grid-template-columns: 1fr;
    gap: var(--home-grid);
    min-height: auto;
    padding: 116px 24px 48px;
    background-position: right top;
  }
  .hero .hero-copy h1 { margin-bottom: 1.25rem; font-size: clamp(2.3rem, 10.8vw, 3.5rem); }
  .hero .hero-intro { max-width: 28rem; font-size: .98rem; }
  .home-windows { grid-template-rows: 224px minmax(208px, 54vw); gap: var(--home-grid); margin-top: 0; }
  .home-window { border-width: 4px; }
  .review-window { grid-template-columns: 112px minmax(0, 1fr); }
  .review-summary { padding: 1.15rem .8rem; border-right-width: 2px; }
  .review-summary strong { font-size: 2.45rem; }
  .review-summary .review-stars { font-size: .55rem; }
  .review-summary p { font-size: .54rem; }
  .home-review { padding: 1.2rem 1rem; }
  .home-review p { font-size: .88rem; line-height: 1.48; }
  .home-review footer { font-size: .54rem; }
}

@media (max-width: 390px) {
  .home-review { padding: 1rem .82rem; }
  .home-review p { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .home-review,
  .food-slide { transition: none; }
}

/* Final composition pass: separate framed chapters, consistent lattice, and reliable anchors. */
html { scroll-padding-top: 0; }
main > section[id] { scroll-margin-top: 0; }

.site-header .brand-easy,
.site-header .brand-east {
  font-size: 1.05rem;
}

.site-header .brand-chinese {
  font-size: .73rem;
}

.site-header .site-nav {
  font-size: .75rem;
}

.about-section,
.menu-section,
.gallery-section,
.contact-section {
  background-color: var(--home-cream);
  background-image:
    linear-gradient(rgba(104, 29, 51, .22) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 29, 51, .22) 1px, transparent 1px);
  background-size: var(--home-grid) var(--home-grid);
}

.about-section {
  padding-top: clamp(4.5rem, 8vw, 8rem);
  padding-bottom: clamp(4.5rem, 8vw, 8rem);
}

.about-panels {
  display: grid;
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  gap: var(--home-grid);
  width: min(78vw, 1160px);
  margin: 0 auto;
}

.about-window {
  width: auto;
  min-height: 600px;
  margin: 0;
  border: 6px solid var(--home-burgundy);
  background: var(--home-cream);
}

.about-image-window {
  display: block;
  overflow: hidden;
}

.about-image {
  min-height: 600px;
  height: 100%;
}

.about-copy-window {
  display: flex;
  align-items: center;
}

.about-copy {
  width: 100%;
  padding: clamp(2.8rem, 5vw, 5.5rem);
}

.about-copy .about-body {
  max-width: 31rem;
  font-size: 1rem;
  line-height: 1.85;
}

.about-hours {
  max-width: 31rem;
  margin-top: clamp(2.6rem, 4vw, 4rem);
}

.gallery-item {
  border: 6px solid var(--home-burgundy);
  border-radius: 0;
  box-shadow: none;
}

.contact-card {
  min-height: 600px;
  border: 6px solid var(--home-burgundy);
  border-radius: 0;
  background: var(--home-cream);
  box-shadow: none;
}

.contact-map {
  position: relative;
  min-height: 588px;
  background: #ded5c9;
}

.contact-map iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 588px;
  border: 0;
  filter: saturate(.72) sepia(.08) contrast(.98);
}

.contact-map-link {
  position: absolute;
  left: 1.25rem;
  bottom: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  padding: .78rem .9rem;
  border: 2px solid var(--home-burgundy);
  background: var(--home-cream);
  color: var(--home-burgundy);
  font: 700 .66rem/1 var(--sans);
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 4px 0 rgba(53, 19, 30, .13);
  /* Same hover animation as the .menu-tabs buttons. */
  transition: .22s;
}

.contact-map-link span {
  font-size: 1rem;
  line-height: 0;
}

.contact-map-link:hover {
  background: var(--home-burgundy);
  color: var(--home-cream);
}

@media (max-width: 760px) {
  html { scroll-padding-top: 0; }
  main > section[id] { scroll-margin-top: 0; }
  .site-header .brand-easy,
  .site-header .brand-east { font-size: .9rem; }
  .site-header .brand-chinese { font-size: .63rem; }
  .site-header .site-nav { font-size: 1.03rem; }
  .about-panels {
    grid-template-columns: 1fr;
    gap: var(--home-grid);
    width: 100%;
  }
  .about-window { min-height: 0; border-width: 4px; }
  .about-image { min-height: 390px; }
  .about-copy-window { align-items: stretch; }
  .about-copy { padding: 2.8rem 1.4rem 3.2rem; }
  .contact-card { min-height: 0; }
  .contact-map,
  .contact-map iframe { min-height: 360px; }
}

@media (max-width: 390px) {
  .site-header .brand-easy,
  .site-header .brand-east { font-size: .82rem; }
  .site-header .brand-chinese { font-size: .58rem; }
}

/* Gentle scroll-reveal system: native scrolling stays untouched; marked
   elements fade up once as they enter the viewport. */
html.js [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(22px); }
html.js [data-reveal].reveal-armed {
  transition: opacity .65s cubic-bezier(.22, .61, .36, 1), transform .65s cubic-bezier(.22, .61, .36, 1);
  will-change: opacity, transform;
}

/* Gallery frames: barely-there zoom on hover, smooth back down. */
@media (hover: hover) and (pointer: fine) {
  .gallery-item { transition: transform .45s cubic-bezier(.22, .61, .36, 1); }
  .gallery-item:hover { transform: scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  html.js [data-reveal].reveal-armed { transition: none; }
  .gallery-item,
  .gallery-item:hover { transition: none; transform: none; }
}

/* Unified lattice: every chapter below home repeats the hero's grid exactly —
   same 48px pitch, same line colour, same right-top anchor — and the legacy
   overlay grids that broke the pattern are removed. */
.site-shell { background-image: none; }

.about-section,
.menu-section,
.gallery-section,
.contact-section {
  background-color: var(--home-cream);
  background-image:
    linear-gradient(rgba(104, 29, 51, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 29, 51, .3) 1px, transparent 1px);
  background-position: right top;
  background-size: var(--home-grid) var(--home-grid);
}

/* The 東風 monogram stands on its own — drop the flanking vertical bars
   in the header pill and the footer alike. */
.brand-chinese {
  border-left: 0;
  border-right: 0;
  padding-inline: .35rem;
}

/* Stop mobile browsers (WeChat webview, large-dynamic-type iOS) from
   inflating page text beyond the sizes we set. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Mobile polish: a real transition for the fullscreen nav (fade + drop)
   with a short stagger on its links. Scroll reveals are off entirely on
   phones — content simply appears as you scroll. */
@media (max-width: 760px) {
  html.js [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
  html.js [data-reveal].reveal-armed { transition: none; }
  /* Smaller header here — keep the panel flush with its bottom edge.
     Phone typography scales down a step from large-handset size. */
  .site-header .site-nav { top: 72px; font-size: 14px; gap: clamp(.75rem, 2.2vh, 1.15rem); }
  .site-header .site-nav > a { font-size: 14px; }
  .site-header .site-nav .nav-book { font-size: 14px; }
}

@media (max-width: 390px) {
  .site-header .site-nav {
    left: 10px;
    right: 10px;
    font-size: 13px;
    gap: .7rem;
    padding: 1.3rem 1.4rem 1.5rem;
  }
  .site-header .site-nav > a { font-size: 13px; padding: .3rem 0; }
  .site-header .site-nav .nav-book { font-size: 13px; margin-top: .7rem; }
}

/* Folding-fan mark, right of the wordmark in the header pill. */
.site-header .brand-fan {
  height: 32px;
  width: auto;
  margin-left: .5rem;
  opacity: .96;
}

/* About joins the menu/gallery/contact content column on desktop: same
   horizontal rhythm as the framed chapters below, copy panel stretched
   right accordingly. Mobile keeps its own composition. */
@media (min-width: 761px) {
  .about-section {
    display: block; /* retire the legacy two-column shell; panels are the single child */
    padding-left: clamp(1.35rem, 6.7vw, 8rem);
    padding-right: clamp(1.35rem, 6.7vw, 8rem);
  }

  .about-panels {
    width: 100%;
    margin: 0;
  }
}

@media (max-width: 760px) {
  .site-header .brand-fan { height: 22px; margin-left: .4rem; }
}

@media (max-width: 390px) {
  .site-header .brand-fan { height: 19px; margin-left: .32rem; }
}

@media (max-width: 980px) {
  .site-nav > a {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s cubic-bezier(.22, .61, .36, 1), transform .3s cubic-bezier(.22, .61, .36, 1);
  }

  .site-nav.open > a {
    opacity: 1;
    transform: none;
  }

  .site-nav.open > a:nth-child(1) { transition-delay: 60ms; }
  .site-nav.open > a:nth-child(2) { transition-delay: 110ms; }
  .site-nav.open > a:nth-child(3) { transition-delay: 160ms; }
  .site-nav.open > a:nth-child(4) { transition-delay: 210ms; }
  .site-nav.open > a:nth-child(5) { transition-delay: 260ms; }
  .site-nav.open > a:nth-child(6) { transition-delay: 310ms; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-nav,
  .site-nav > a {
    transition: none;
    transform: none;
  }
}

/* Refinement pass: strengthen restaurant decisions without changing the grid-led composition. */
.hero .hero-copy h1 {
  display: grid;
  gap: .42rem;
  margin-bottom: 1.55rem;
  line-height: .96;
}

.hero .hero-name {
  display: block;
  color: var(--home-burgundy);
  font: 600 clamp(3.25rem, 5.9vw, 6.3rem)/1 var(--serif);
  letter-spacing: .03em;
}

.hero .hero-type {
  display: block;
  font: 500 clamp(1.05rem, 1.45vw, 1.35rem)/1.25 var(--sans);
  letter-spacing: .055em;
}

.hero .hero-actions { margin-top: 2rem; }

.review-summary { padding-bottom: 1.2rem; }
.review-summary strong { font-size: clamp(3.35rem, 4vw, 3.8rem); }
.review-summary p { font-size: .69rem; line-height: 1.55; }
.home-review p { font-size: clamp(1rem, 1.4vw, 1.22rem); line-height: 1.58; }
.home-review footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: .64rem;
}
.home-review footer a {
  flex: 0 0 auto;
  padding-bottom: .18rem;
  border-bottom: 1px solid currentColor;
  font-size: .59rem;
  letter-spacing: .075em;
  text-decoration: none;
}
.home-review footer a:hover { color: var(--home-burgundy-dark); }
.home-review footer b { font-size: .82rem; }

.menu-section .heading-split,
.gallery-section .gallery-heading { grid-template-columns: 1fr; }

.menu-section .menu-tabs button {
  background: var(--home-cream);
  border-color: var(--home-burgundy);
  color: var(--home-burgundy);
}

.menu-section .menu-tabs button:hover,
.menu-section .menu-tabs button.selected {
  background: var(--home-burgundy);
  border-color: var(--home-burgundy);
  color: var(--home-cream);
  box-shadow: none;
}

.menu-full-link {
  gap: .85rem;
  padding-left: .95rem;
  border-width: 2px;
  background: var(--home-cream);
  box-shadow: 4px 4px 0 rgba(104, 29, 51, .14);
}
.menu-full-link img {
  width: 2.15rem;
  height: auto;
  object-fit: contain;
}
.menu-full-link:hover { box-shadow: 4px 4px 0 rgba(104, 29, 51, .14); }

.about-copy .about-body {
  margin-top: 1.55rem;
  font-size: 1.04rem;
  line-height: 1.86;
}
.about-copy .about-body p { margin: 0; }
.about-copy .about-body p + p { margin-top: .88rem; }
.about-hours {
  margin-top: clamp(2.25rem, 3.3vw, 3.2rem);
  padding-top: 1rem;
}
.about-hours p { margin-bottom: .6rem; }
.about-hours strong { font-size: 1rem; line-height: 1.55; }
.about-hours span { margin-top: .12rem; font-size: .98rem; line-height: 1.55; }
.contact-copy address { font-size: 1rem; line-height: 1.85; }
.contact-copy .contact-line { font-size: .72rem; line-height: 1.45; }
.contact-copy .hours { font-size: .88rem; line-height: 1.78; }
.contact-copy .hours b { font-size: .68rem; }

@media (max-width: 760px) {
  .hero .hero-copy h1 { gap: .36rem; }
  .hero .hero-name { font-size: clamp(2.7rem, 13.2vw, 4rem); letter-spacing: .0225em; }
  .hero .hero-type { font-size: 1rem; }
  .hero .hero-actions { gap: 1rem; margin-top: 1.7rem; }
  .home-review footer { align-items: flex-end; gap: .55rem; font-size: .55rem; }
  .home-review footer a { font-size: .51rem; }
  .about-copy .about-body { margin-top: 1.35rem; font-size: .98rem; line-height: 1.8; }
  .about-copy .about-body p + p { margin-top: .82rem; }
  .about-hours { margin-top: 2.15rem; padding-top: .95rem; }
  .about-hours strong { font-size: .96rem; }
  .about-hours span { font-size: .94rem; }
  .contact-copy address { font-size: .96rem; }
  .contact-copy .hours { font-size: .86rem; }
  .menu-full-link { width: auto; }
}

@media (max-width: 390px) {
  .home-review footer { align-items: flex-start; flex-direction: column; gap: .35rem; }
  .menu-full-link img { width: 1.8rem; }
}

/* Mobile composition pass: phones get their own layouts for the rating
   rail, the menu grid and the gallery instead of inheriting a squeezed
   desktop composition. Everything above 600px is untouched. */
@media (max-width: 600px) {
  /* Category pills were 37px tall; give them a phone-sized tap target. */
  .menu-tabs button { padding: .84rem 1.1rem; }

  /* Rating rail. The desktop clamp() minimum (53.6px) was beating the phone
     overrides and overflowing the 96px column, while the stars rendered
     smaller than the caption text. Rebalance: number slightly smaller,
     stars clearly readable and tucked under it, captions kept secondary. */
  .review-window { grid-template-columns: clamp(104px, 30vw, 124px) minmax(0, 1fr); }
  .review-summary { padding: 1.1rem .7rem; }
  .review-summary strong { font-size: clamp(2.5rem, 11.5vw, 2.85rem); line-height: .92; }
  .review-summary .review-stars { margin-top: .28rem; font-size: clamp(.95rem, 4.4vw, 1.1rem); letter-spacing: .02em; }
  .review-summary p { font-size: .58rem; line-height: 1.5; }

  /* Menu: a real two-column grid with a fixed image ratio, replacing the
     single vertical stack. */
  .menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: .6rem; }
  .menu-grid .menu-card,
  .menu-grid .menu-card:nth-child(6n+1),
  .menu-grid .menu-card:nth-child(3n) {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
  .menu-grid .menu-card .dish-copy { left: .7rem; right: .7rem; bottom: .7rem; }
  .menu-grid .menu-card .dish-copy h3 { font-size: clamp(.72rem, 3.4vw, .84rem); line-height: 1.24; letter-spacing: -.01em; }
  .menu-grid .menu-card .dish-copy h3 small { margin-top: .28rem; font-size: .6rem; letter-spacing: .08em; }

  /* Gallery: full-bleed feature, a portrait pair, full-bleed feature. The
     two portraits pair because their native ratios match; the two
     landscapes take the full-width rows so nothing important is cropped. */
  .gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: .6rem; }
  .gallery-grid .gallery-item { grid-column: auto; grid-row: auto; min-height: 0; border-width: 4px; }
  .gallery-grid .gallery-wide { order: 1; grid-column: 1 / -1; aspect-ratio: 2 / 1; background-position: center 30%; }
  .gallery-grid .gallery-tall { order: 2; aspect-ratio: 3 / 4; }
  .gallery-grid .gallery-small { order: 3; aspect-ratio: 3 / 4; }
  .gallery-grid .gallery-store { order: 4; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .gallery-grid .gallery-item figcaption { bottom: .7rem; left: .75rem; font-size: clamp(.56rem, 2.8vw, .66rem); }
  .gallery-grid .gallery-item figcaption span { margin: .28rem 0 0; font-size: .56rem; letter-spacing: .08em; }

  /* Booking: phones drop the seal ring entirely and tighten the column
     around the headline and CTA; fan ornament + lattice carry the brand. */
  .booking-section { padding-top: 4.4rem; padding-bottom: 4.8rem; }
  .booking-orbit { display: none; }
  .booking-section h2::before { width: 2.5rem; height: 1.72rem; margin-bottom: 1.25rem; }
}

/* Heading accent consistency: the Gallery and Contact headline openers join
   the Hero, About and Menus burgundy (--home-burgundy) instead of the darker
   ink shade; their italic <em> accents keep the existing clay colour. */
.gallery-section h2,
.contact-section h2 { color: var(--home-burgundy); }

/* Shared chapter lattice: the grid is painted once on <main> and the framed
   chapters turn transparent, so adjacent sections share one continuous line
   at every seam instead of each restarting its own pattern — which doubled or
   pinched the boundary line whenever a chapter's height missed the grid pitch.
   Same pitch, line colour and right-top anchor as before; the hero and the
   booking chapter keep painting their own backgrounds on top. */
main {
  background-color: var(--home-cream);
  background-image:
    linear-gradient(rgba(104, 29, 51, .3) 1px, transparent 1px),
    linear-gradient(90deg, rgba(104, 29, 51, .3) 1px, transparent 1px);
  background-position: right top;
  background-size: var(--home-grid) var(--home-grid);
}

.about-section,
.menu-section,
.gallery-section,
.contact-section {
  background-color: transparent;
  background-image: none;
}

/* ------------------------------------------------------------------
   Navbar system — one floating burgundy pill for every breakpoint.

   All metrics live in --nav-* custom properties so each breakpoint has
   a single predictable height and margin scale (page content can reserve
   space below the pill with var(--nav-top) + var(--nav-h), exposed as
   --nav-bottom). Appearance is untouched: burgundy pill, 2px radius,
   drop shadow, cream type, brand mark, Book a Table pill, dropdown panel.

   Breakpoints      top   side   height  pad-x  brand   mark   fan
   ≥981 desktop     14px  24px   68px    26px   1.05rem .73rem 32px
   ≤980 tablet      14px  16px   64px    22px   1rem    .68rem 28px
   ≤760 mobile      12px  14px   58px    16px   .83rem  .58rem 22px
   ≤390 small       10px  12px   54px    14px   .82rem  .58rem 19px
------------------------------------------------------------------ */
:root {
  --nav-top: 14px;
  --nav-side: 24px;
  --nav-h: 68px;
  --nav-pad-x: 26px;
  --nav-brand: 1.05rem;
  --nav-mark: .73rem;
  --nav-brand-gap: .58rem;
  --nav-fan: 32px;
  --nav-fan-gap: .5rem;
  --nav-burger-w: 22px;
  --nav-burger-line: 2px;
  --nav-burger-gap: 5px;
  --nav-bottom: calc(var(--nav-top) + var(--nav-h));
}

.site-header {
  top: var(--nav-top);
  height: var(--nav-h);
  width: min(calc(100% - (var(--nav-side) * 2)), 1360px);
  padding: 0 var(--nav-pad-x);
}

.site-header .brand { gap: var(--nav-brand-gap); }
.site-header .brand-easy,
.site-header .brand-east { font-size: var(--nav-brand); }
.site-header .brand-chinese { font-size: var(--nav-mark); }
.site-header .brand-fan {
  height: var(--nav-fan);
  margin-left: var(--nav-fan-gap);
}

/* The dropdown panel hangs flush off the pill's bottom edge and keeps the
   same side insets, so the two read as one sheet at every width. (Inert on
   desktop, where the nav sits statically inside the pill.) */
.site-header .site-nav {
  top: var(--nav-bottom);
  left: var(--nav-side);
  right: var(--nav-side);
}

@media (max-width: 980px) {
  :root {
    --nav-top: 14px;
    --nav-side: 16px;
    --nav-h: 64px;
    --nav-pad-x: 22px;
    --nav-brand: 1rem;
    --nav-mark: .68rem;
    --nav-brand-gap: .5rem;
    --nav-fan: 28px;
    --nav-fan-gap: .5rem;
  }

  .site-header {
    width: auto;
    left: var(--nav-side);
    right: var(--nav-side);
  }

  /* The open panel wraps its content: auto height with deliberate padding,
     instead of the old fixed 50vh sheet that left a large empty burgundy
     area below BOOK A TABLE. The max-height cap only engages on very short
     landscape screens (then the panel scrolls); portrait phones size to
     their content. flex-start keeps the top reachable when it does. */
  .site-header .site-nav {
    height: auto;
    justify-content: flex-start;
    max-height: calc(100svh - var(--nav-bottom) - 12px);
    overflow-y: auto;
  }

  /* The toggle previously had no line sizing between 851–980px (the old
     rules lived in a ≤850px block), leaving an invisible hamburger there. */
  .site-header .menu-toggle {
    position: relative;
    z-index: 4;
    display: grid;
    gap: var(--nav-burger-gap);
    padding: .5rem;
    /* Optically align the icon's right edge with the brand's left inset. */
    margin-right: -.5rem;
    cursor: pointer;
  }
  .site-header .menu-toggle span {
    display: block;
    width: var(--nav-burger-w);
    height: var(--nav-burger-line);
    background: currentColor;
    transition: .2s;
  }
  .site-header .menu-toggle.open span:first-child {
    transform: translateY(calc(var(--nav-burger-gap) / 2 + var(--nav-burger-line) / 2)) rotate(45deg);
  }
  .site-header .menu-toggle.open span:last-child {
    transform: translateY(calc(-1 * (var(--nav-burger-gap) / 2 + var(--nav-burger-line) / 2))) rotate(-45deg);
  }
}

@media (max-width: 760px) {
  :root {
    --nav-top: 12px;
    --nav-side: 14px;
    --nav-h: 58px;
    --nav-pad-x: 16px;
    --nav-brand: .83rem;
    --nav-mark: .58rem;
    --nav-brand-gap: .58rem;
    --nav-fan: 22px;
    --nav-fan-gap: .4rem;
  }
}

@media (max-width: 390px) {
  :root {
    --nav-top: 10px;
    --nav-side: 12px;
    --nav-h: 54px;
    --nav-pad-x: 14px;
    --nav-brand: .82rem;
    --nav-mark: .58rem;
    --nav-brand-gap: .34rem;
    --nav-fan: 19px;
    --nav-fan-gap: .32rem;
  }
}

/* Tablet composition, 761–1023: the chapters between mobile and desktop get
   their own deliberate layouts instead of a squeezed desktop grid. Everything
   here reuses existing patterns — the mobile menu compositions scaled up, the
   established ≤760 stacking for the framed windows — so no new design language
   is introduced. Desktop (≥1024) and mobile (≤760) are untouched. */
@media (min-width: 761px) and (max-width: 1023px) {
  /* Chapter tops clear the floating navbar (bottom edge 78–82px here) when
     an anchor scroll lands a section flush with the viewport top. */
  .about-section,
  .menu-section,
  .gallery-section,
  .contact-section,
  .booking-section { padding-top: 7rem; }

  /* Menus: one dish per cell — uniform 4/5 cards, no spanning, no masonry.
     Same card treatment the ≤600 phones use, at tablet scale. */
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .menu-grid .menu-card,
  .menu-grid .menu-card:nth-child(6n+1),
  .menu-grid .menu-card:nth-child(3n) {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }

  /* About: the panels stack (the established ≤760 pattern), so the framed
     windows stop turning into ~300px-wide towers at 768. */
  .about-panels { grid-template-columns: 1fr; gap: var(--home-grid); }
  .about-window { min-height: 0; }
  .about-image { min-height: 440px; }

  /* Contact: map above copy — the ≤760 pattern at tablet scale. */
  .contact-card { grid-template-columns: 1fr; min-height: 0; }
  .contact-map,
  .contact-map iframe { min-height: 440px; }
}

/* About joins the two-column layout from 1000px: the framed windows fit
   (copy text ~320-330px) while 761-999 keeps the verified stacked layout
   that avoids ~300px-wide window towers at narrower tablet widths. */
@media (min-width: 1000px) and (max-width: 1023px) {
  .about-panels { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
  .about-window { min-height: 600px; }
  .about-image { min-height: 600px; }
}

/* Gallery composition, ≤1023: the same 2-column grid from 601px up. R-01
   fix — the legacy ≤850 block pins .gallery-small (a class carried by BOTH
   the atmosphere and the storefront cards) to row 2 / column 2, stacking the
   two cards in one cell and leaving an empty third row between 601 and
   760px. These higher-specificity resets sit after that block in source
   order, overriding its placement across the legacy rules' whole range so
   every width ≤1023 shares one complete grid. (Menus/About/Contact keep
   their own 761px gate in the block above.) */
@media (max-width: 1023px) {
  .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; }
  .gallery-grid .gallery-item { grid-column: auto; grid-row: auto; min-height: 0; }
  .gallery-grid .gallery-wide { order: 1; grid-column: 1 / -1; aspect-ratio: 2 / 1; }
  .gallery-grid .gallery-tall { order: 2; aspect-ratio: 3 / 4; }
  .gallery-grid .gallery-small { order: 3; aspect-ratio: 3 / 4; }
  .gallery-grid .gallery-store { order: 4; grid-column: 1 / -1; aspect-ratio: 4 / 3; }
}

/* Menus joins the uniform 2-column composition from 601px: the legacy ≤850
   block pins .menu-card:nth-child(3n) to span 2 × span 2 across 601-760px,
   producing one double-width, double-height card, an orphan and an empty
   cell. These higher-specificity resets sit after that block in source
   order and restore the uniform 4/5 grid the ≤600 and 761-1023 ranges
   already use. (Scoped to 601-760 so the ≤600 mobile menu sizing stays in
   charge below 601.) */
@media (min-width: 601px) and (max-width: 760px) {
  .menu-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
  .menu-grid .menu-card,
  .menu-grid .menu-card:nth-child(6n+1),
  .menu-grid .menu-card:nth-child(3n) {
    grid-column: auto;
    grid-row: auto;
    min-height: 0;
    aspect-ratio: 4 / 5;
  }
}