/* ---------- Fonts ---------- */
@font-face {
  font-family: 'Glacial Indifference';
  src: url('../assets/fonts/GlacialIndifference-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Glacial Indifference';
  src: url('../assets/fonts/GlacialIndifference-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'The Seasons';
  src: url('../assets/fonts/TheSeasons-Regular.woff2') format('woff2'),
       url('../assets/fonts/TheSeasons-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ---------- Reset & Base ---------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* The browser's own [hidden] { display: none } only wins a tie by source
   order -- any element whose own class also sets `display` (.menu-dish-
   grid's display: flex, for one) has equal specificity and comes later,
   so it silently overrides `hidden` and the element stays visible. Force
   it here so setting the attribute always actually hides things. */
[hidden] {
  display: none !important;
}

html {
  scroll-behavior: smooth;
}

/* PROPORTIONAL SCALING (page-wide)
   --u is one design pixel from the 1440-wide frame, expressed as a fraction of
   the page's real width. Every measurement is then written as its raw Figma
   number x --u, so the whole page scales together: exact at 1440,
   proportionally smaller below, larger above.
   cqw, not vw: vw counts the scrollbar, which would push totals past the real
   layout width and force a horizontal scrollbar. body is the container so that
   the hero AND the header buttons (which sit outside .hero) share one unit. */
body {
  container-type: inline-size;
  --u: 0.0694444cqw;                      /* 1 design px at the 1440 frame */
  font-family: 'Segoe UI', Arial, sans-serif;
  color: #fff;
  background-color: #000;
  line-height: 1.5;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

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

.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(20px, 5.5vw, 80px);
}

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  padding: clamp(16px, 2.5vw, 28px) 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

.nav ul {
  display: flex;
  gap: 40px;
}

.nav a {
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}

.nav a:hover {
  opacity: 1;
}

/* Top-right action buttons. Distances/sizes scale from the 1440px design
   spec (40px from right, 47px from top, 8px gap) via vw, capped at their
   exact design values so they never overgrow on larger screens. */
.header-actions {
  position: absolute;
  top: calc(47 * var(--u));
  right: calc(40 * var(--u));
  z-index: 11;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--u));
}

/* ---------- Hero ---------- */
/* Red/black split is drawn with CSS, not an image, so hero height is free
   to be whatever fits the screen with zero cropping or distortion.

   Height follows the design frame's ratio (1440 x 837), so at 1440px wide the
   section is exactly 837px tall -- but max-height caps it at the viewport so the
   page never scrolls. On a screen shorter than the ratio would ask for, the cap
   wins and the section is exactly one screen tall instead.

   Because the height can therefore be either value, the offsets inside the black
   panel are percentages of the section height, not pinned pixels -- that keeps
   the composition proportional at any height and resolves to the exact design
   pixels (360 / 402 / 704) whenever the section is its full 837px. */
.hero {
  display: flex;
  width: 100%;
  aspect-ratio: 1440 / 837;
  max-height: 100vh;
}

.hero-panel-red {
  flex: 0 0 34.722%; /* 500 / 1440, matches the design's red panel width */
  display: flex;
  align-items: center;
  background-color: #9A0200;
}

.hero-panel-black {
  position: relative;
  flex: 1;
  background-color: #000;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-video-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.55) 100%);
  z-index: 1;
}

/* ( 中国会 ) label: 360px from the section top (360 / 837 of its height), 385px from the
   panel's RIGHT edge, 440 x 18 box. */
.hero-label {
  position: absolute;
  z-index: 2;
  top: 43.01%;                            /* 360 / 837 */
  right: calc(385 * var(--u));            /* from the panel's right edge */
  width: calc(440 * var(--u));
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  color: #FFFFFF;
}

/* Headline: 402px from the section top (402 / 837), 385px from its RIGHT
   edge, 440 x 86 box (36px at 120% line-height x 2 lines = 86.4).
   At 1440 that puts the box's left edge at 940 - 385 - 440 = 115px. */
.hero-heading {
  position: absolute;
  z-index: 2;
  top: 48.03%;                            /* 402 / 837 */
  right: calc(385 * var(--u));            /* from the panel's right edge */
  width: calc(440 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* Body paragraph: 704px from the section top (704 / 837), 385px from its RIGHT
   edge, 440 x 69 box -- same right anchor and width as the label and headline,
   so all three share a left edge at 115px. At 440px the copy wraps to exactly
   3 lines (measured against the font file: 423 / 380 / 375px). Typography per Figma: Glacial
   Indifference Regular 18px / 130% / 0% tracking, left-aligned, #FFFFFF. */
.hero-body {
  position: absolute;
  z-index: 2;
  top: 84.11%;                            /* 704 / 837 */
  right: calc(385 * var(--u));            /* from the panel's right edge */
  width: calc(440 * var(--u));
  height: calc(69 * var(--u));            /* 3 lines x 23px */
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  text-align: left;
  color: #FFFFFF;
}

/* Logo size/offset scale with viewport width, capped at the design's
   1440px values (325px wide, 90px left offset) so it never overgrows
   on very large screens. Vertically centered in the red panel. */
.hero-logo {
  width: calc(325 * var(--u));
  height: auto;
  margin-left: calc(90 * var(--u));
}

.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  border-radius: calc(4 * var(--u));
  transition: background-color 0.2s ease;
  height: calc(46 * var(--u));
}

/* 230 -- confirmed on the Menu page's header, where 40 (left) + 183 (logo)
   + 819 + 230 + 8 + 120 (order) + 40 (right) = 1440 exactly. The original
   358 here was never pixel-confirmed (an early guess, flagged as such in
   DESIGN-SPEC's to-do list), so this now applies site-wide rather than
   only on the new page, keeping the shared header consistent everywhere
   it's used. */
.btn-reserve {
  width: calc(230 * var(--u));
  background-color: #9A0200;
  color: #fff;
}

.btn-reserve:hover {
  background-color: #c30606;
}

.btn-order {
  width: calc(120 * var(--u));
  background-color: #1a1a1a;
  color: #fff;
}

.btn-order:hover {
  background-color: #2a2a2a;
}

/* ---------- About Us ---------- */
/* PROPORTIONAL SCALING
   Every measurement below is the raw design pixel from the 1440-wide frame,
   multiplied by --u. --u is 1 design pixel expressed as a fraction of the
   section's own width, so the whole section scales with the viewport in both
   directions: exact at 1440, proportionally smaller below, larger above.

   cqw, not vw: vw includes the scrollbar's width, so 155 + 1245 + 40 would
   equal 100vw while the real layout width is ~15px less -- a guaranteed
   horizontal overflow. cqw measures the container's actual width instead.
   `.about-us` is the container and carries no padding of its own so that
   1cqw == 1% of the full section width; `.about-inner` holds the padding.

   Font sizes scale on the same unit as the boxes, so line breaks are preserved
   at every width rather than rewrapping as the boxes shrink.

   NOTE: this is proportional without a floor. Below roughly 1000px the type
   gets small, and on phones it would be unreadable -- a dedicated mobile
   breakpoint is still needed and is deliberately not attempted here. */
.about-us {
  container-type: inline-size;
  background-color: #FFFFFF;
  color: #000000;
}

.about-inner {
  --u: 0.0694444cqw;                      /* 1 design px at the 1440 frame */
  padding: calc(160 * var(--u))           /* 160 top */
           calc(40 * var(--u))            /* 40 right */
           calc(160 * var(--u))           /* 160 below the images */
           calc(155 * var(--u));          /* 155 left */
}

/* Eyebrow: "About Us" + "( 关于我们 )" side by side, two type styles. */
.about-eyebrow {
  display: flex;
  align-items: flex-start;
}

.about-eyebrow-en {
  display: block;
  width: calc(76 * var(--u));
  height: calc(16 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #9A0200;
}

.about-eyebrow-cn {
  display: block;
  width: calc(83 * var(--u));
  height: calc(16 * var(--u));
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 500;                       /* Medium */
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  color: #747474;
}

/* Two columns, tops aligned, 74px gap.
   731 + 74 + 440 = 1245 = the content box at 1440. */
.about-columns {
  display: flex;
  align-items: flex-start;
  gap: calc(74 * var(--u));
  margin-top: calc(24 * var(--u));        /* 24 below the eyebrow */
}

/* Left column. 731 x 192 (4 lines x 48). Because the font scales on the same
   unit as the box, the four intended line breaks hold at every width. */
.about-lead {
  width: calc(731 * var(--u));
  height: calc(192 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #747474;
}

/* Right column. 440 x 161; the copy renders 6 lines inside it. */
.about-body {
  width: calc(440 * var(--u));
  height: calc(161 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

.about-col-right {
  display: flex;
  flex-direction: column;
}

/* Arrow links -- "Know More" (About Us) and "Book a table" (Chef).
   Shared style: label then arrow, 4px apart, 24px above.
   Only the box width differs, set on each modifier below. */
.about-more,
.chef-more {
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  height: calc(22 * var(--u));
  margin-top: calc(24 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #9A0200;
}

.about-more {
  width: calc(122 * var(--u));            /* KNOW MORE:   95.6 + 4 + 22 */
}

.chef-more {
  width: calc(132 * var(--u));            /* BOOK A TABLE: 106.8 + 4 + 22 */
}

/* Never let the label wrap or shrink: BOOK A TABLE + 4 + 22 is a fraction
   wider than its declared 132 box, so without this the flex label would
   compress rather than overflow harmlessly. */
.about-more-label {
  white-space: nowrap;
}

/* 22 x 22 per the layout panel. Source PNG is 28 x 21, so it is squeezed
   horizontally -- re-export at 22x22 (or 44x44 retina) to remove the distortion. */
.about-more-icon {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex-shrink: 0;
}

/* Image row: 64px below "Know More", 20px between the two.
   440 + 20 + 785 = 1245, the same content width as the columns above.
   Both sources are exact 2x exports (880x786, 1570x786). */
.about-gallery {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: calc(64 * var(--u));
}

.about-gallery-img {
  height: calc(393 * var(--u));
  object-fit: cover;
  flex-shrink: 0;
}

.about-gallery-img--1 {
  width: calc(440 * var(--u));
}

.about-gallery-img--2 {
  width: calc(785 * var(--u));
}

/* ---------- Chef ---------- */
/* Image is flush to the section's left and top edges -- no padding on either.
   690 x 837 at the 1440 frame, scaled on the shared --u unit like everything
   else. Source is an exact 2x export (1380 x 1674), so no distortion.
   `color` is set explicitly alongside the white background because the body
   default is #fff, which would render invisible here. No height is set, so the
   section is exactly as tall as its content. */
.chef {
  display: flex;
  background-color: #FFFFFF;
  color: #000000;
  padding-bottom: calc(160 * var(--u));   /* 160 below image 2 */
}

.chef-image {
  width: calc(690 * var(--u));
  height: calc(837 * var(--u));
  object-fit: cover;
  flex-shrink: 0;
}

/* Left column: image 1, then the "23+ / Year Legacy" stat below it. */
.chef-col-left {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

/* Stat row: 183px below image 1, 40px in from the section's left edge.
   The gaps between blocks differ (118 then 102), so they are set per block
   rather than with a single flex `gap`. Each measurement is from the previous
   block's right edge. Each block is only as wide as its own text. */
.chef-stats {
  display: flex;
  align-items: flex-start;
  margin-top: calc(183 * var(--u));
  margin-left: calc(40 * var(--u));
}

.chef-stat + .chef-stat {
  margin-left: calc(118 * var(--u));      /* 23+ -> 80+ */
}

.chef-stat:nth-child(3) {
  margin-left: calc(102 * var(--u));      /* 80+ -> 4.6 */
}

/* "23+" -- The Seasons Regular 56 / 120% / #101010. */
.chef-stat-number {
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(56 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #101010;
}

/* "Year Legacy" -- 8px below, same typography as the KNOW MORE /
   BOOK A TABLE links: Glacial Indifference Bold 16 / 100% / #9A0200. */
.chef-stat-label {
  margin-top: calc(8 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #9A0200;
}

/* Closing note: 40px below the stats row, on the same 40px left edge.
   Width was not given; 555 matches the right column and keeps the intended
   three line breaks -- measured, they hold for any box between 532.7 and
   566.1px. No height is set, so it resolves to 3 x 23.4 = 70.2px. */
.chef-note {
  width: calc(555 * var(--u));
  margin-top: calc(40 * var(--u));
  margin-left: calc(40 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

/* Content column to the right of the image: 40px gap from the image's right
   edge, first line 171px down from the section top. */
.chef-content {
  padding-top: calc(171 * var(--u));
  padding-left: calc(40 * var(--u));
}

/* 555 x 43 box (36px at 120% = 43.2, so one line). The copy measures 464.9px
   at The Seasons 36px, so it sits comfortably inside the 555px box.
   555 puts the box's right edge at 1285 -- 155 from the frame's right edge,
   mirroring the About Us section's 155px left gutter. */
.chef-heading {
  width: calc(555 * var(--u));
  height: calc(43 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #9A0200;
}

/* Body copy, 16px below the heading, same 555px column.
   Width was not given; 555 is used because it matches the heading and because
   the copy breaks into its six intended lines for any box between 533.0 and
   556.3px (measured against GlacialIndifference-Regular.woff).
   Box is 555 x 138. Note 138 assumes 23px per line (6 x 23), while 130% of
   18px is 23.4px, so the text renders 140.4px -- 2.4px taller than the declared
   box. Nothing clips, but position anything below this off 140, not 138. */
.chef-body {
  width: calc(555 * var(--u));
  height: calc(138 * var(--u));
  margin-top: calc(16 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

/* Second image: 40px below "Book a table", 690 x 766.
   The content column starts at 730 (image 1's 690 + the 40px gap), but this
   image must sit at 710 -- 20px right of image 1's right edge -- so it pulls
   back with a -20 margin. 690 + 20 + 690 = 1400, leaving 40px on its right.
   It lives in the flow (not absolutely positioned) so the section still grows
   to contain it. Source is an exact 2x export (1380 x 1532). */
.chef-image-2 {
  display: block;
  /* the global `img { max-width: 100% }` would clamp this to the 670px content
     column and render it 690 - 20 = 670 wide; it must overflow that column by
     the 20px it was pulled back. */
  max-width: none;
  width: calc(690 * var(--u));
  height: calc(766 * var(--u));
  margin-top: calc(40 * var(--u));
  margin-left: calc(-20 * var(--u));
  object-fit: cover;
}

/* ---------- Culinary ---------- */
/* Full-bleed background image. Height is 837 on the shared --u unit, so the
   section is 1440 x 837 at the design frame and keeps that ratio at every
   width -- the same proportional scaling as the sections above.
   The source is an exact 2x export (2880 x 1674) whose aspect ratio matches
   1440/837 exactly, so `cover` scales it without ever cropping. */
.culinary {
  position: relative;                     /* containing block for .culinary-body */
  height: calc(837 * var(--u));
  /* Same cap as the hero and the shrimp section: 837 at the design ratio, never
     taller than the screen. When the cap applies the section is no longer a
     1440:837 rectangle, so `cover` starts cropping the photo instead of fitting
     it exactly. */
  max-height: 100vh;
  /* Content offsets as padding, not margins: a margin on the first child would
     collapse out of the section and shift the section itself. box-sizing is
     border-box globally, so the padding stays inside the 837 height. */
  padding-top: calc(375 * var(--u));
  padding-left: calc(40 * var(--u));
  background-image: url('../assets/images/culinerynew.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Eyebrow: "OUR CULINARY PHILOSOPHY ( 我们的烹饪理念 )" on one line.
   Glacial Indifference Bold 16 / 100% / #FFFFFF per the typography panel.
   Glacial has no CJK glyphs, so the Chinese half falls to Noto Sans SC -- it is
   a separate span purely so the fallback is explicit rather than accidental. */
.culinary-eyebrow {
  display: flex;
  align-items: flex-start;
  /* One space between the two halves. A literal space in the markup would be
     dropped -- flex containers discard whitespace-only nodes between items --
     so it is set as a gap equal to the space glyph's advance width in Glacial
     Indifference Bold (3.68px at 16px). */
  gap: calc(3.68 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* min-width, not width: the specified 210 box is ~3px narrower than the text
   actually renders (212.9px), so a hard 210 would let the Chinese half start
   before the English finished and eat the space. This honours 210 as the box
   while letting it hug the text so the gap above is a true single space. */
.culinary-eyebrow-en {
  display: block;
  min-width: calc(210 * var(--u));
  height: calc(16 * var(--u));
  white-space: nowrap;
  text-transform: uppercase;
}

.culinary-eyebrow-cn {
  display: block;
  height: calc(16 * var(--u));
  white-space: nowrap;
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
}

/* Heading: 24px below the eyebrow (391 + 24 = 415 from the section top),
   same 40px left edge. 415 x 48 box (40px at 120% = 48, one line); the copy
   measures 406.4px so it sits inside with ~9px to spare. */
.culinary-heading {
  width: calc(415 * var(--u));
  height: calc(48 * var(--u));
  margin-top: calc(24 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* Right-hand paragraph: right edge 40px from the section edge, top aligned
   with the eyebrow (375). Absolutely positioned because it sits beside the
   eyebrow/heading rather than after them in the flow; the section has a fixed
   height so nothing depends on it contributing to layout.
   Width 482 was not given -- measured, the five intended line breaks only hold
   between 481.6 and 482.4px, so this is effectively the only value that works
   and it has well under a pixel of tolerance. */
.culinary-body {
  position: absolute;
  top: calc(375 * var(--u));
  right: calc(40 * var(--u));
  width: calc(482 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* ---------- What makes China Club unique ---------- */
/* White panel. `color` is set explicitly because the body default is #fff,
   which would be invisible here. No height is set -- the section grows with
   its content. Offsets are padding so nothing margin-collapses out. */
.unique {
  background-color: #FFFFFF;
  color: #000000;
  padding-top: calc(160 * var(--u));
  /* 40px gutters both sides -- the dish row spans the full content box:
     440 + 20 + 440 + 20 + 440 = 1360 = 1440 - 40 - 40. */
  padding-left: calc(40 * var(--u));
  padding-right: calc(40 * var(--u));
  padding-bottom: calc(160 * var(--u));   /* 160 below the dish row */
}

/* The Seasons Regular 40 / 120% / #101010.
   width: fit-content so the box hugs the text -- as a plain block it would
   stretch to the section's right edge, and the panel's centre alignment would
   then centre the text inside that full-width box instead of leaving it at the
   specified 440px left offset. */
/* Heading sits at 440 from the section's left edge: the 40px gutter above
   plus this 400px offset. */
.unique-heading {
  width: fit-content;
  margin-left: calc(400 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  text-align: center;
  color: #101010;
}

/* Dish row: 56px below the heading, three 440 x 480 images 20px apart.
   All three sources are exact 2x exports (880 x 960), so no distortion. */
.unique-gallery {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: calc(56 * var(--u));
}

/* Each dish is a 440 x 480 card so captions can sit over the image. */
/* --title-lines drives how far the resting panel is pushed down; 32px titles
   at 120% are 38.4px per line. Card 2's title is one line, so it overrides. */
.unique-card {
  --title-lines: 2;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
  width: calc(440 * var(--u));
  height: calc(480 * var(--u));
}

.unique-dish {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  max-width: none;
}

/* Caption block sits at the bottom of the card: 24 in from each side, 32 up
   from the bottom edge. On hover a black panel rises behind it and the
   subtitle expands below the title, which pushes the title up -- the 32px
   bottom offset never changes.

   The 194px panel is exactly accounted for by the design's integer line
   heights: 24 (top) + 76 (title) + 16 (gap) + 46 (subtitle) + 32 (bottom).
   The browser's fractional line heights make that 195.6, so the title sits
   ~1.6px higher than 24 from the panel's top edge. */
/* The panel is the full 194 black area, with its text anchored to the TOP
   (24 in) -- so on hover every card's title is 24 from the black edge and any
   leftover room falls below the text, not above it.

   At rest the whole panel is pushed down so only the title shows, sitting 32
   above the card's bottom edge. That offset depends on how tall the title is,
   which is why --title-lines exists: a 1-line title has to travel further than
   a 2-line one. Using transform keeps the movement smooth. */
.unique-panel {
  position: absolute;
  z-index: 1;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(194 * var(--u));
  padding: calc(24 * var(--u)) calc(24 * var(--u)) 0;
  transform: translateY(
    calc((194 - 24 - 32) * var(--u) - var(--title-lines) * 38.4 * var(--u))
  );
  transition: transform 0.4s ease;
}

.unique-card:hover .unique-panel {
  transform: translateY(0);
}

/* The black backdrop, as a pseudo-element so it sits behind the text.
   :has() limits it to cards that actually have a subtitle -- cards without one
   would otherwise show the panel with no matching lift. Cards 2 and 3 pick the
   effect up automatically once their subtitle copy is added. */
.unique-card:has(.unique-subtitle)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(194 * var(--u));
  background-color: #000000;
  transform: translateY(100%);
  transition: transform 0.4s ease;
  pointer-events: none;
}

.unique-card:has(.unique-subtitle):hover::after {
  transform: translateY(0);
}

.unique-caption {
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(32 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #FFFFFF;
}

.unique-card--short-title {
  --title-lines: 1;
}

/* Card 2's caption must stay on one line. At 32px it measures 386.2px inside
   the 392 box -- only ~6px of slack -- so nowrap guarantees it rather than
   leaving it to rendering differences. */
.unique-caption--oneline {
  white-space: nowrap;
}

/* Subtitle: hidden until hover, then expands and lifts the title above it.
   max-height is animated rather than height because the content height is not
   known up front; the value only needs to exceed the real height (46.8px). */
.unique-subtitle {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  /* The 16px gap is a margin that is 0 at rest and 16 on hover. It cannot be a
     static margin (it would hold the resting title 16px too high) and it cannot
     be padding (padding is never clipped by max-height, so it would do the
     same). Toggling the margin is the only version that collapses fully. */
  margin-top: 0;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #FFFFFF;
  transition: max-height 0.4s ease, margin-top 0.4s ease, opacity 0.3s ease 0.1s;
}

.unique-card:hover .unique-subtitle {
  max-height: calc(140 * var(--u));
  margin-top: calc(16 * var(--u));
  opacity: 1;
}

/* Respect users who ask for less motion: show the end state, no sliding. */
@media (prefers-reduced-motion: reduce) {
  .unique-card:has(.unique-subtitle)::after,
  .unique-panel,
  .unique-subtitle {
    transition: none;
  }
}


/* ---------- Shrimp ---------- */
/* 1440 x 837 split into a 730 image panel and a 710 red panel.
   Height is on the shared --u unit so the section keeps the design ratio at
   every width. shrimp.png is an exact 2x export (1460 x 1674) whose aspect
   ratio matches 730:837 exactly, so `cover` scales it without ever cropping. */
.shrimp {
  display: flex;
  height: calc(837 * var(--u));
  /* Same rule as the hero: 837 at the design ratio, but never taller than the
     screen. On a viewport shorter than 837 the cap wins and the section is
     exactly one screen instead. Note that when the cap applies the section is
     no longer a 1440:837 rectangle, so the shrimp photo starts to crop. */
  max-height: 100vh;
}

.shrimp-image {
  position: relative;                     /* containing block for .shrimp-tag */
  flex: 0 0 calc(730 * var(--u));
  /* Defaults to the first (active) dish tag's photo -- clicking a tag swaps
     this via JS (see script.js), so it always matches whichever tag is
     currently marked .shrimp-tag--active. */
  background-image: url('../assets/images/chef-special-1.jpg');
  background-size: cover;
  /* When the section's max-height cap engages on a short screen, the section
     is no longer a 1440:837 rectangle and `cover` must crop the photo. The top
     ~25% of this photo is an out-of-focus background plate; the dish, the
     chopsticks and the dish tags all sit lower in the frame. Anchoring to the
     bottom means the crop always eats into that blurry top margin first,
     rather than cutting into the dish or the tags. */
  background-position: center bottom;
  background-repeat: no-repeat;
}

/* Dish tags over the image: a column of cream pills, 40 in from the image
   panel's left edge and 64 up from its bottom, stacked with a 13px gap.
   These now hold full dish descriptions rather than 2-3 word names, so
   `white-space` wraps instead of forcing one line, and each pill sizes to
   its own text (`width: fit-content`, capped by `.shrimp-tags`' max-width so
   nothing runs into the image's right edge) instead of a fixed pixel width.
   The wrapper is `bottom`-anchored (not `top`) so the whole stack stays
   pinned to the image's bottom edge -- and so stays visible -- on short
   screens where the section's max-height:100vh cap shrinks it below the 837
   design height. Padding stays 10 top/bottom, 15 left/right, matching the
   hero buttons' border-radius. */
.shrimp-tags {
  position: absolute;
  left: calc(40 * var(--u));
  bottom: calc(64 * var(--u));
  display: flex;
  flex-direction: column;
  gap: calc(13 * var(--u));
  max-width: calc(600 * var(--u));
}

.shrimp-tag {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: fit-content;
  min-height: calc(36 * var(--u));
  padding: calc(10 * var(--u)) calc(15 * var(--u));
  text-transform: uppercase;
  white-space: normal;
  text-align: left;
  border: none;
  border-radius: calc(4 * var(--u));      /* matches the hero buttons */
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0;
  color: #101010;
  cursor: pointer;
  /* Inactive by default: same cream at 50% opacity, applied to the
     background only -- putting opacity on the element itself would fade
     the text with it -- matching how the unselected tag looked before this
     became a clickable set. */
  background-color: rgba(255, 237, 204, 0.5);
  transition: background-color 0.2s ease;
}

/* Selected tag: full-opacity cream, same as the active row in the menu list
   below getting full white instead of the dimmed 40% used for the rest. */
.shrimp-tag--active {
  background-color: #FFEDCC;
}

/* Takes the remaining 710. `color` is set explicitly so any text added here
   is white rather than inheriting whatever the previous section left. */
.shrimp-panel {
  flex: 1;
  /* --u is width-only (cqw), but .shrimp's height gets capped by max-height
     on short/wide screens -- the box gets shorter while --u (and everything
     sized from it) keeps growing with width. The panel's stacked content
     (eyebrow + heading + body + button + the 182 gap + the 204-tall menu
     list) was only ever guaranteed to fit inside exactly 837px, so once the
     box is capped shorter than that, the bottom rows push past the red
     panel onto the page's white background and read as invisible white-on-
     white text -- that's the "Desserts/Beverages missing" bug.
     Fix: a local unit, --pu, that's whichever is smaller -- the normal
     width-based --u, or the value that would make 837 units equal the
     panel's *actual* capped height. Every measurement below (padding,
     headings, the menu rows) is written on --pu instead of --u, so the
     whole panel shrinks as one unit, like a poster scaled down to fit a
     shorter wall, and the last row never overflows. At 1440x837, or any
     screen tall enough, min() just picks the original --u and nothing
     changes. (Can't name this --u and redefine it in terms of itself --
     tried that first; Chrome treats a custom property that references its
     own name in its own value as invalid, even though it's meant to read
     the inherited value, and the whole panel collapsed to ~0. Has to be a
     differently-named variable.) flex: 1 above (not a calc(*var(--u))
     width) is what makes it safe to shrink everything inside without also
     shrinking the panel's own share of the 730/710 split. */
  --pu: min(var(--u), calc(100vh / 837));
  background-color: #9A0200;
  color: #FFFFFF;
  /* Offsets as padding rather than margins so nothing collapses out. */
  padding-top: calc(80 * var(--pu));
  padding-left: calc(64 * var(--pu));
}

/* Eyebrow: "MENU ( 菜单 )" on one line, 64 from the panel's left, 80 from its
   top. Glacial Bold 16 / 100% / #FFFFFF for the English; the Chinese needs
   Noto Sans SC (Medium 500) because Glacial carries no CJK glyphs.
   The gap is one space (3.68px, the space glyph's advance width) -- a literal
   space in the markup would be discarded, since flex containers drop
   whitespace-only nodes between items. */
.shrimp-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: calc(3.68 * var(--pu));
  font-size: calc(16 * var(--pu));
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  color: #FFFFFF;
}

.shrimp-eyebrow-en {
  display: block;
  height: calc(16 * var(--pu));
  white-space: nowrap;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.shrimp-eyebrow-cn {
  display: block;
  height: calc(16 * var(--pu));
  white-space: nowrap;
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;                       /* Medium */
}

/* Heading: 24 below the eyebrow (80 + 16 + 24 = 120 from the panel top),
   same 64 left edge. Width was not given; the text measures 282.1px at 36px,
   so a wide box is used rather than one sized to the text -- it does not need
   to fit a specific box the way the tag/eyebrow strings did. */
.shrimp-heading {
  margin-top: calc(24 * var(--pu));
  width: fit-content;
  max-width: calc(500 * var(--pu));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--pu));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* Body copy, 16 below the heading, same 64 left edge.
   IMPORTANT: the line breaks in the source text could not be reproduced. One
   "line" as given (933px) was ~2.6x longer than the others (350-444px) and
   physically cannot fit in this panel (only ~606px available) -- almost
   certainly two lines merged by a paste tool. Worse, no single box width can
   even satisfy the OTHER four lines simultaneously: keeping line 1 alone needs
   a box under 364px, but line 3 alone needs at least 444px -- a contradiction.
   So this is treated as flowing body copy rather than fixed breaks. Width 555
   matches the Chef section's body/note paragraphs for consistency and wraps
   the copy into 5 natural lines with ~40px spare on the right (606 available). */
.shrimp-body {
  width: calc(555 * var(--pu));
  height: calc(138 * var(--pu));
  margin-top: calc(16 * var(--pu));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--pu));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* VIEW MENU button: 24 below the body copy, same 64 left edge.
   No typography was given for the label, so it follows the hero buttons'
   convention (also 46px tall): Glacial Bold 16 / 100%, uppercase. The button
   fill is white, so the label uses the brand red rather than black or white,
   which would either clash or vanish against it -- the same reasoning as the
   dark text on the cream dish tags. */
.shrimp-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(116 * var(--pu));
  height: calc(46 * var(--pu));
  margin-top: calc(24 * var(--pu));
  background-color: #FFFFFF;
  border-radius: calc(5 * var(--pu));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--pu));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #101010;
  transition: background-color 0.2s ease;
}

.shrimp-btn:hover {
  background-color: #f2e6e6;
}

/* Menu category list: 582 x 204 box, 182 below the button, 4 equal 51px rows.
   No spacing/opacity values were given for this -- both typography panels
   showed identical text styling (The Seasons 24/120%/#FFFFFF), so the
   highlighted-vs-dim difference had to come from something else. I inspected
   the reference image's actual pixels: the three inactive rows render their
   text and divider at roughly 30-40% white opacity, while "Seafood" renders
   at full white with a clearly brighter (~75%) divider beneath it. That is
   reproduced here as color/border opacity rather than the Fill panel value,
   which was the same 100% white paint for both. */
.shrimp-menu-list {
  width: calc(582 * var(--pu));
  margin-top: calc(182 * var(--pu));
}

.shrimp-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(51 * var(--pu));
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  cursor: pointer;
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(24 * var(--pu));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: rgba(255, 255, 255, 0.4);
}

.shrimp-menu-cn {
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
}

.shrimp-menu-item--active {
  color: #FFFFFF;
  border-bottom-color: rgba(255, 255, 255, 0.75);
}


/* ---------- Experience ---------- */
/* Height is explicit and sized to fit everything inside it: 375 + 606 =
   981 (the gallery's own top + its height), plus a 160px gap below the
   images = 1141. The paragraph, nav buttons and gallery are all positioned
   with `position: absolute`, and absolutely positioned children don't add
   to a parent's auto height -- without an explicit height here the section
   would collapse to just the eyebrow + heading's flow height (243) and
   everything below that would render past the white background, onto
   whatever comes next. Same class of bug as the shrimp menu list
   overflowing onto the page. */
.experience {
  position: relative;
  height: calc(1141 * var(--u));
  background-color: #FFFFFF;
  padding-top: calc(160 * var(--u));
  padding-left: calc(155 * var(--u));
}

/* Eyebrow: "The China Club Experience ( 中国会体验 )" on one line, box 322 x 16.
   Glacial Indifference Bold 16 / 100% / #9A0200 (brand red) for the English;
   Noto Sans SC Medium 16 / 100% / #747474 (gray) for the Chinese -- both
   colors differ from every other eyebrow so far (previously always white or
   white/gray on a dark background; this is the first eyebrow on the white
   background). Same one-space gap convention as the other eyebrows: a
   literal space in the markup would be dropped since flex containers discard
   whitespace-only text nodes between items, so it's a flex gap sized to the
   space glyph's advance width in Glacial Bold (3.68px at 16px).
   322 was not a width to hit -- it's just the combined natural width of
   both halves plus the gap; "The China Club Experience" alone measures
   195.1px at 16px Glacial Bold, so this is well within it. */
.experience-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: calc(3.68 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
}

.experience-eyebrow-en {
  display: block;
  height: calc(16 * var(--u));
  white-space: nowrap;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  color: #9A0200;
}

.experience-eyebrow-cn {
  display: block;
  height: calc(16 * var(--u));
  white-space: nowrap;
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;                       /* Medium */
  color: #747474;
}

/* Heading: 24 below the eyebrow (160 + 16 + 24 = 200 from the section top),
   same 155 left edge as the eyebrow. No width was given, so it hugs its own
   text rather than being forced into a box, same as the other Seasons
   headings (chef, shrimp). */
.experience-heading {
  margin-top: calc(24 * var(--u));
  width: fit-content;
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #101010;
}

/* Right-hand paragraph, left edge confirmed at 825. Absolutely positioned
   (like the Culinary paragraph) because it sits beside the eyebrow/heading
   rather than after them in the flow, top-aligned with the eyebrow since no
   vertical offset was given for it specifically. */
.experience-body {
  position: absolute;
  top: calc(160 * var(--u));
  left: calc(825 * var(--u));
  width: calc(575 * var(--u));
  height: calc(115 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

/* Prev/next nav buttons: 24 below the paragraph (160 + 115 + 24 = 299 from
   the section top), same 825 left edge as the paragraph. 36 x 36, white
   fill, 0.5px #9A0200 inside stroke, 5 corner radius -- straight off the
   Appearance/Fill/Stroke panel. 8px gap between the two. */
.experience-nav {
  position: absolute;
  top: calc(299 * var(--u));
  left: calc(825 * var(--u));
  display: flex;
  gap: calc(8 * var(--u));
}

.experience-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(36 * var(--u));
  height: calc(36 * var(--u));
  padding: 0;
  background-color: #FFFFFF;
  border: calc(0.5 * var(--u)) solid #9A0200;
  border-radius: calc(5 * var(--u));
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.experience-nav-btn:hover {
  background-color: #FBEAEA;
}

/* Icon frame is 11.1 x 18 per the vector's own Position/Layout panel, sharp
   corners (radius 0) -- drawn as a stroked path with square caps and a miter
   join rather than an authored fill polygon, since no path data was
   exported; visually identical to a solid chevron for a shape this simple. */
.experience-nav-icon {
  width: calc(11.1 * var(--u));
  height: calc(18 * var(--u));
}

/* Image slider: 3 images at 633 x 606 with 20px gaps, full-bleed left and
   right (left: 0 / right: 0, not the 155 the eyebrow/heading use) so there's
   no margin on either side. 40 below the nav buttons (299 + 36 + 40 = 375
   from the section top). Three images at 633 plus two 20 gaps is 1939px --
   wider than the 1440 section -- so the row is clipped and the overflow
   scrolls sideways ("viewed by sliding").
   The native scrollbar is hidden (scrollbar-width/::-webkit-scrollbar) so
   the slider reads as a plain image row, not an obvious scroll box -- the
   arrow buttons and the drag-to-scroll handlers in script.js are what
   actually move it. scroll-snap keeps every slide landing on a full image
   rather than stopping mid-image. */
.experience-gallery {
  position: absolute;
  top: calc(375 * var(--u));
  left: 0;
  right: 0;
  display: flex;
  gap: calc(20 * var(--u));
  overflow-x: auto;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  cursor: grab;
  scrollbar-width: none;                  /* Firefox */
}

.experience-gallery::-webkit-scrollbar {
  display: none;                          /* Chrome, Safari, Edge */
}

.experience-gallery:active {
  cursor: grabbing;
}

.experience-gallery-img {
  flex: 0 0 calc(633 * var(--u));
  width: calc(633 * var(--u));
  height: calc(606 * var(--u));
  object-fit: cover;
  scroll-snap-align: start;
}

/* ---------- Events ---------- */
/* Eyebrow, heading and the image row are all normal flow, stacked with
   padding/margin -- unlike the Experience section, nothing here sits beside
   another element, so there's no need for absolute positioning or an
   explicit section height; the section just grows to fit its content.
   Only "Contact Us" breaks that (it sits up on the right, beside the
   eyebrow/heading), so that one is absolutely positioned -- but its own
   box (181 + 22 = 203 from the top) is well inside the flow height, so it
   can't cause the overflow-onto-white-background bug the shrimp/experience
   sections had. */
.events {
  position: relative;
  background-color: #9A0200;
  padding-top: calc(120 * var(--u));
  padding-left: calc(40 * var(--u));
  padding-right: calc(40 * var(--u));
  padding-bottom: calc(204 * var(--u));   /* 204 below the second image row */
}

/* Eyebrow: "events ( 活动 )", box 116 x 16, 40 from left / 120 from top (the
   section's own padding). Both halves are white here (Fill panel: FFFFFF
   for both), unlike the red/gray split on the white Experience eyebrow.
   Uppercase: lowercase "events" + gap + "( 活动 )" only totals ~103px
   against the 116 box (13px slack), but EVENTS uppercase totals ~112px
   (3px slack) -- close enough to the stated box that it reads as the
   intended casing, same reasoning used for the shrimp dish tags earlier. */
.events-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: calc(3.68 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  color: #FFFFFF;
}

.events-eyebrow-en {
  display: block;
  height: calc(16 * var(--u));
  white-space: nowrap;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.events-eyebrow-cn {
  display: block;
  height: calc(16 * var(--u));
  white-space: nowrap;
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;                       /* Medium */
}

/* Heading: 24 below the eyebrow (120 + 16 + 24 = 160 from the section top).
   The stated 278 x 43 box is a single line's worth of height (43.2 at this
   size), but "Beyond the plate." actually renders at 281.3px -- 3px over --
   which is just enough to force an unwanted wrap onto a second line
   ("Beyond the" / "plate.") inside a hard 278-wide box, unlike the
   deliberate multi-line titles elsewhere (those came with explicit <br>
   breaks in the source text). Treated as a one-line heading that hugs its
   own text instead, same as the chef/shrimp headings. */
.events-heading {
  width: fit-content;
  white-space: nowrap;
  margin-top: calc(24 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* "Contact Us" link, same construction as .about-more/.chef-more (uppercase,
   4px icon gap, 22 tall) but white for the red background and its own box:
   124 x 22, 40 from the right edge, 181 from the top. CONTACT US + gap +
   icon measures ~124.4px, an almost exact match to 124 -- confirms
   uppercase the same way the 132/122 boxes did for the other two links. */
.events-contact {
  position: absolute;
  top: calc(181 * var(--u));
  right: calc(40 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
  width: calc(124 * var(--u));
  height: calc(22 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #FFFFFF;
}

.events-contact-label {
  white-space: nowrap;
}

.events-contact-icon {
  width: calc(22 * var(--u));
  height: calc(22 * var(--u));
  flex-shrink: 0;
}

/* Image row: 40 below the heading (160 + 43 + 40 = 243 from the section
   top). 3 images at 440 wide with 20 gaps, flush against the section's own
   40 left/right padding: 440 + 20 + 440 + 20 + 440 = 1360 = 1440 - 40 - 40,
   the exact same horizontal rhythm as the Unique section's dish row.
   No size was given for these particular images -- plate1/2/3.png are exact
   2x exports at 880 x 702, so 440 x 351 (height derived from that ratio)
   is used to keep them undistorted. */
.events-gallery {
  display: flex;
  gap: calc(20 * var(--u));
  margin-top: calc(40 * var(--u));
}

.events-card {
  flex-shrink: 0;
  width: calc(440 * var(--u));
}

.events-dish {
  display: block;
  width: calc(440 * var(--u));
  height: calc(351 * var(--u));
  object-fit: cover;
}

/* Caption: 24 below its image, box given as 217 x 29. "Cocktail Receptions"
   measures 217.3px at 24px -- an almost exact match -- which is what
   confirms this is regular title case, not uppercase (unlike the
   eyebrow/contact link above, where the numbers pointed the other way).
   Width bumped to 222: at a literal 217, "Private Dining Room" (221.2px)
   and "Family Celebrations" (218.0px) both silently wrapped onto an
   unwanted second line the same way the "Beyond the plate." heading did --
   217 only exactly fits "Cocktail Receptions". 222 is just wide enough to
   keep every one-line title on one line without changing anything else.
   min-height, not height: row 2's "Private Events & Celebration" is 313px
   at this size, genuinely too long even at 222, so it's meant to wrap onto
   a second line ("Private Events &" / "Celebration") and needs ~47px, not
   29. A hard height would let that second line spill out past the box the
   same way the shrimp menu list once spilled past its section --
   min-height keeps 29 for every one-line caption (23.4 actual < 29, so it
   wins) while still growing for this one, which is what lets
   .events-gallery--row2's margin-top below measure "64 down from the
   title" off the real bottom edge instead of a number that would be wrong
   for this card. */
.events-caption {
  width: calc(222 * var(--u));
  min-height: calc(29 * var(--u));
  margin-top: calc(24 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(24 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* Second image row: 64 below the first row's captions (flex row height is
   driven by its tallest child, so this margin lands correctly whichever
   card in row 1 turns out tallest). 204 below this row's own captions to
   the bottom of the section -- padding-bottom on the section rather than
   a margin on the row, so it can't collapse. */
.events-gallery--row2 {
  margin-top: calc(64 * var(--u));
}


/* ---------- Gallery ---------- */
/* "gallery" section is prefixed .photo-gallery rather than bare .gallery to
   stay clear of the existing .about-gallery/.unique-gallery/etc image-row
   classes -- id="gallery" is what the nav anchor should point at. */
.photo-gallery {
  position: relative;
  background-color: #FFFFFF;
  padding-top: calc(160 * var(--u));
  padding-left: calc(40 * var(--u));
  padding-bottom: calc(160 * var(--u));   /* 160 below the auto-sliding images */
}

/* Eyebrow: "GALLERY ( 画廊 )", 40 from left / 160 from top (the section's own
   padding). Same red/gray split as the Experience section's eyebrow. */
.photo-gallery-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: calc(3.68 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
}

.photo-gallery-eyebrow-en {
  display: block;
  height: calc(16 * var(--u));
  white-space: nowrap;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #9A0200;
}

.photo-gallery-eyebrow-cn {
  display: block;
  height: calc(16 * var(--u));
  white-space: nowrap;
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;                       /* Medium */
  color: #747474;
}

/* Heading: 24 below the eyebrow. Given as a 585 x 43 box, but "Masters of
   authentic Chinese cuisine" measures 591.6px at 36px -- 6.6px over, the
   same near-miss that made "Beyond the plate." wrap unintentionally, so
   this is a one-line heading that hugs its own text instead of a hard
   585-wide box. */
.photo-gallery-heading {
  margin-top: calc(24 * var(--u));
  width: fit-content;
  white-space: nowrap;
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #101010;
}

/* Auto-sliding image row, 40 below the heading. 326 x 480 each, 20px gaps,
   no manual controls and no visible scrollbar -- "there shouldn't be
   slider, the images should be slided automatically" -- so this is a pure
   CSS marquee: overflow hidden on the outer box, the inner track holds the
   6 images TWICE back to back, and an infinite linear animation slides the
   track left by exactly 50% of its own width (= the width of one full set
   of 6, gap included) so the moment it snaps back to 0% the second copy is
   sitting exactly where the first one started -- no visible jump, no JS.
   inside1-6.png are ~2x exports of 326x480 (inside4 is 650x960, 0.6% under
   an exact 2x, close enough to not matter at this size). */
.inside-gallery {
  margin-top: calc(40 * var(--u));
  overflow: hidden;
}

.inside-track {
  display: flex;
  width: fit-content;
  gap: calc(20 * var(--u));
  animation: inside-scroll 30s linear infinite;
}

@keyframes inside-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.inside-img {
  flex: 0 0 calc(326 * var(--u));
  width: calc(326 * var(--u));
  height: calc(480 * var(--u));
  object-fit: cover;
}


/* ---------- Awards ---------- */
/* No top offset was given for this section, only left (40). Its layout is
   symmetric enough to check itself: heading(86) + 16 + body(92) + 135 +
   nav(36) = 369 from a top of 160 lands the buttons' bottom at 160+369=529,
   and the cert viewport (top 160, height 365) bottoms out at 525 -- a 4px
   rounding gap, close enough that 160 reads as the intended top for both,
   not a guess with nothing to check it against. background-color was not
   stated either; left white to match the Gallery section directly above
   it, since nothing suggested otherwise. */
.awards {
  position: relative;
  background-color: #FFFFFF;
  padding-top: calc(160 * var(--u));
  padding-left: calc(40 * var(--u));
  padding-bottom: calc(160 * var(--u));   /* 160 below the nav buttons */
}

.awards-text {
  width: calc(345 * var(--u));
}

.awards-heading {
  width: calc(345 * var(--u));
  height: calc(86 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #101010;
}

.awards-body {
  width: calc(345 * var(--u));
  height: calc(92 * var(--u));
  margin-top: calc(16 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

/* Nav buttons, 135 below the paragraph -- reuses .experience-nav-btn /
   .experience-nav-icon directly ("exactly like we used above") rather than
   duplicating the rules; only the wrapper's position is section-specific,
   since here the buttons sit in normal flow under the text instead of
   floating beside a paragraph. */
.awards-nav {
  display: flex;
  gap: calc(8 * var(--u));
  margin-top: calc(135 * var(--u));
}

/* Certificate strip: 186 to the right of the text column's edge
   (40 left padding + 345 text width + 186 = 571), top-aligned with the
   heading. 299 (highlighted) + 24 + 228 + 24 + 228 + 24 + 228 = 1055, the
   stated box width -- so 1055 is the *content's* width, not a hard clip;
   `right: 0` clips the viewport at the section's own right edge instead,
   which is narrower (1440 - 571 = 869), so part of the 4th image is
   naturally cut off and has to be scrolled to, same slider technique as
   the Experience section's hotel gallery (hidden native scrollbar, nav
   buttons + drag to move it). */
.awards-cert-viewport {
  position: absolute;
  top: calc(160 * var(--u));
  left: calc(571 * var(--u));
  right: 0;
  height: calc(365 * var(--u));
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  cursor: grab;
  scrollbar-width: none;                  /* Firefox */
}

.awards-cert-viewport::-webkit-scrollbar {
  display: none;                          /* Chrome, Safari, Edge */
}

.awards-cert-viewport:active {
  cursor: grabbing;
}

.awards-cert-track {
  display: flex;
  align-items: center;
  gap: calc(24 * var(--u));
  width: fit-content;
  height: 100%;
}

/* cert1.png is 598 x 730 (exact 2x of 299 x 365); cert2/3/4.png are all
   456 x 558 (exact 2x of 228 x 279) -- both undistorted at their display
   sizes below.
   Sizing is driven by position in the track (first child = the large
   "current" slot), not a fixed class -- the prev/next handlers in
   script.js physically move the DOM nodes (rotate the array) rather than
   just scrolling, so whichever image becomes first also becomes large
   automatically, and the one bumped out shrinks back down. No transition
   is declared here: script.js's FLIP animation drives the slide/grow via
   an inline `transform`, and setting an inline `transition` always
   overrides whatever's in this stylesheet anyway, so one here would just
   be dead weight. */
.awards-cert-img {
  display: block;
  flex-shrink: 0;
  object-fit: cover;
  z-index: 1;                             /* baseline for script.js's z-index: 0 drop below */
}

.awards-cert-track > .awards-cert-img:first-child {
  width: calc(299 * var(--u));
  height: calc(365 * var(--u));
}

.awards-cert-track > .awards-cert-img:not(:first-child) {
  width: calc(228 * var(--u));
  height: calc(279 * var(--u));
}


/* ---------- Reservation ---------- */
/* 710 (image) + 730 (black panel) = 1440 -- same split idea as the Shrimp
   section, just mirrored (image on the left this time) and without a
   fixed section height: the height is whatever the form ends up needing,
   and the image stretches to match it (flex default align-items: stretch)
   rather than the section being pinned to a number that might not fit
   everything, which is the bug that hit the shrimp menu list and the
   Experience section earlier. leftimage.png is a plain cover background,
   same technique as shrimp.png. */
.reservation {
  display: flex;
}

.reservation-image {
  flex: 0 0 calc(710 * var(--u));
  background-image: url('../assets/images/leftimage.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 135 from the panel's left edge, 155 from its right, box width 440:
   135 + 440 + 155 = 730, the panel's own width, so this is just padding
   rather than a separately positioned box. Top and bottom are both 120,
   confirmed. Height is not fixed: measuring the actual title + subtitle +
   4 field groups + button at these type sizes/gaps comes out to ~605-606px
   on its own (matches the stated form-box height almost to the pixel), so
   it's left as natural flow instead of forcing a number that's already
   correct by construction. */
.reservation-panel {
  flex: 1;
  background-color: #101010;
  padding-top: calc(120 * var(--u));
  padding-left: calc(135 * var(--u));
  padding-right: calc(155 * var(--u));
  padding-bottom: calc(120 * var(--u));
}

.reservation-form {
  width: calc(440 * var(--u));
}

/* Title: flush with the box's own top/left, no offset. */
.reservation-title {
  margin: 0;
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #FFFFFF;
}

.reservation-subtitle {
  margin: calc(16 * var(--u)) 0 0 0;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* Each label + field pair. 16 above every group except the first (40, below
   the subtitle) -- both measured from the element directly above, i.e. the
   previous group's *field*, not its label. */
.reservation-group {
  margin-top: calc(16 * var(--u));
}

.reservation-group--first {
  margin-top: calc(40 * var(--u));
}

.reservation-label {
  display: block;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(12 * var(--u));
  font-weight: 400;
  line-height: 1.5;                       /* 150% */
  letter-spacing: 0;
  color: #FFFFFF;
}

/* 8 below the label, 440 x 46, transparent fill, 1px #747474 border at 74%
   opacity -- applied as an rgba border color rather than the `opacity`
   property so it fades only the border, not the typed text inside (same
   reasoning as the 50%-opacity shrimp dish tag earlier: opacity on the
   element would fade everything, including content that has its own
   100%-opacity spec). */
.reservation-input,
.reservation-textarea {
  display: block;
  margin-top: calc(8 * var(--u));
  width: calc(440 * var(--u));
  padding: calc(15 * var(--u));
  background: transparent;
  border: 1px solid rgba(116, 116, 116, 0.74);
  border-radius: calc(5 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: 1.5;                       /* 150% */
  letter-spacing: 0;
  color: #FFFFFF;
}

.reservation-input {
  height: calc(46 * var(--u));
  padding-top: 0;
  padding-bottom: 0;
}

.reservation-textarea {
  height: calc(100 * var(--u));
  resize: none;
}

.reservation-input::placeholder,
.reservation-textarea::placeholder {
  color: #747474;
  opacity: 1;                             /* browsers dim placeholders by default; this is already the full spec'd color */
}

/* Date field: same input, plus a dropdown icon 5 from the field's own
   right edge, vertically centered. Extra right padding keeps typed text
   (or the DD-MM-YYYY placeholder) from running under the icon. */
.reservation-date-wrap {
  position: relative;
  margin-top: calc(8 * var(--u));
}

.reservation-date-wrap .reservation-input {
  margin-top: 0;
  padding-right: calc(30 * var(--u));
}

.reservation-date-icon {
  position: absolute;
  top: 50%;
  right: calc(5 * var(--u));
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  transform: translateY(-50%);
  pointer-events: none;
}

/* type="date" so clicking the field opens the real browser date picker.
   Two things a plain text input can't give you: DD-MM-YYYY only shows as
   a placeholder when the field is empty and unfocused (native date
   inputs always show their own locale-formatted template instead, which
   is an unavoidable trade-off of using the real picker), and Chrome/Edge
   draw their own calendar icon on top of ours -- stretched to fill the
   field and made fully transparent so it still opens the picker on click
   anywhere, while the visible icon stays our own arrow_down.png. */
.reservation-input--date::-webkit-calendar-picker-indicator {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}

.reservation-input--date::-webkit-datetime-edit {
  color: #FFFFFF;                         /* the browser already dims the empty mm/dd/yyyy segments on its own */
}

/* Button: 24 below the Special Requests field, 440 x 46, #950101 fill
   (distinct from the #9A0200 used elsewhere -- this exact red is what the
   Fill panel gave for this button specifically). */
.reservation-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  margin-top: calc(24 * var(--u));
  width: calc(440 * var(--u));
  height: calc(46 * var(--u));
  padding: calc(15 * var(--u));
  background-color: #950101;
  border: none;
  border-radius: calc(5 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #FFFFFF;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.reservation-submit:hover {
  background-color: #7a0101;
}


/* ---------- Divider ---------- */
/* Plain horizontal rule, 40 in from each side (1360 wide), 160 from the
   section top. No Fill in the panel (just Stroke), weight 1, #101010 at
   100%, solid. */
.divider {
  background-color: #FFFFFF;
  padding-top: calc(160 * var(--u));
  padding-left: calc(40 * var(--u));
  padding-right: calc(40 * var(--u));
}

.divider-line {
  margin: 0;
  height: 0;
  border: none;
  border-top: 1px solid #101010;
}

/* Footer columns: 60 below the line, three columns side by side, gapped
   horizontally by the distance given from each eyebrow's own right edge
   (116 after Quick Links, 120 after Location) rather than fixed X
   coordinates -- since these are just adjacent flex items, a margin on
   each column does the same job without hardcoding a position that would
   need to be recomputed if any of the CJK text renders a pixel or two
   differently than estimated. */
.footer-columns {
  display: flex;
  margin-top: calc(60 * var(--u));
  padding-bottom: calc(160 * var(--u));   /* 160 below the taller of the two app logos */
}

.footer-col--links {
  margin-right: calc(116 * var(--u));
}

.footer-col--location {
  margin-right: calc(120 * var(--u));
}

/* Eyebrow: same construction as the Gallery section's (red English,
   uppercase, gray Chinese) -- "typography similar to about us gallery". */
.footer-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: calc(3.68 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  white-space: nowrap;
}

.footer-eyebrow-en {
  display: block;
  height: calc(16 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  text-transform: uppercase;
  color: #9A0200;
}

.footer-eyebrow-cn {
  display: block;
  height: calc(16 * var(--u));
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;                       /* Medium */
  color: #747474;
}

/* Links: 20 below the eyebrow, then 8 between each ("Hug" resizing in the
   panel just means the box fits the text, not a fixed width). */
.footer-links {
  display: flex;
  flex-direction: column;
  gap: calc(8 * var(--u));
  margin-top: calc(20 * var(--u));
}

.footer-link {
  width: fit-content;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
  text-decoration: none;
}

.footer-link:hover {
  text-decoration: underline;
}

/* App logos: 49 below "Reservations", 20 between the two. Both are exact
   2x exports (swiggy.png 272x82, zomato.png 210x116). */
.footer-apps {
  display: flex;
  align-items: center;
  gap: calc(20 * var(--u));
  margin-top: calc(49 * var(--u));
}

.footer-app-logo {
  display: block;
}

.footer-app-logo--swiggy {
  width: calc(136 * var(--u));
  height: calc(41 * var(--u));
}

.footer-app-logo--zomato {
  width: calc(105 * var(--u));
  height: calc(58 * var(--u));
}

/* Location / Contact body text, 20 below the eyebrow, 18/130%/#101010.
   The address is given a 325 width to match its "Hug" box in the panel,
   which wraps it onto 2 lines at this size -- 46.8px tall, matching the
   panel's own H46 almost exactly.
   The phone number's stated box (126) is 10px narrower than the text
   itself (136px, "+91 9999025800"), and it has exactly one space to break
   on -- a literal width: 126 would wrap it into "+91" / "9999025800",
   which is worse than just letting a phone number run one line, so this
   one stays nowrap/fit-content like the footer links above, rather than
   force-wrapping on a technicality. */
.footer-text {
  width: fit-content;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(18 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

.footer-address {
  width: calc(325 * var(--u));
  margin-top: calc(20 * var(--u));
}

.footer-text--first {
  margin-top: calc(20 * var(--u));
}

.footer-text:not(.footer-text--first):not(.footer-address) {
  margin-top: calc(8 * var(--u));
}


/* ---------- Menu page ---------- */
/* No section-level side padding here -- unlike most sections, every child
   on this page has its own distinct left inset (40 for the logo/hero image,
   271 for the intro paragraph, 250 for the tabs), so padding on the
   section itself would just be extra math to cancel back out. Each child
   sets its own margin-left instead. */
.menu-top {
  background-color: #FFFFFF;
  padding-top: calc(20 * var(--u));
}

/* Logo 183 x 100 (matches its 650x355 source's own aspect ratio, so no
   distortion), 40 from the left. The two header buttons reuse the shared
   .btn/.btn-reserve/.btn-order classes -- 819 from the logo to Reserve,
   8 from Reserve to Order, landing Order's right edge exactly 40 from the
   section's right edge by construction (40+183+819+230+8+120+40=1440),
   so nothing needs an explicit right-side value. align-items: center
   vertically centers the 46-tall buttons against the 100-tall logo. */
.menu-topbar {
  display: flex;
  align-items: center;
  margin-left: calc(40 * var(--u));
}

.menu-logo {
  display: block;
  width: calc(183 * var(--u));
  height: calc(100 * var(--u));
}

.menu-topbar .btn-reserve {
  margin-left: calc(819 * var(--u));
}

.menu-topbar .btn-order {
  margin-left: calc(8 * var(--u));
}

/* Hero image: 40 below the logo (the topbar's own height is 100, set by
   the logo since it's the tallest child), 40 left/right (1360 + 40 + 40 =
   1440). Lobster.png is an exact 2x export (2720x930). */
.menu-hero-image {
  display: block;
  margin-top: calc(40 * var(--u));
  margin-left: calc(40 * var(--u));
  width: calc(1360 * var(--u));
  height: calc(465 * var(--u));
  object-fit: cover;
}

/* Intro paragraph: 64 below the hero image, 271 left / 270 right
   (271 + 899 + 270 = 1440 -- measured from the section's true edges, not
   nested inside the 40 used above, which is why this isn't just more
   padding on the section). The 3 line breaks are explicit, not wrapped --
   each line measures 807-881px at this size, comfortably under the 899
   box, and 3 lines at 40px/120% is exactly 144px, matching the given box
   height on the nose. */
.menu-intro {
  margin-top: calc(64 * var(--u));
  margin-left: calc(271 * var(--u));
  width: calc(899 * var(--u));
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(40 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  text-align: center;
  color: #747474;
}

/* Divider: same 1px solid #101010 rule as the homepage's, 80 below the
   paragraph, same 40 side margins as the images above. Not reusing
   .divider-line directly since that class hard-sets margin: 0, which
   would fight the spacing needed here. */
.menu-divider {
  margin-top: calc(80 * var(--u));
  margin-left: calc(40 * var(--u));
  width: calc(1360 * var(--u));
  height: 0;
  border: none;
  border-top: 1px solid #101010;
}

/* Tabs: 40 below the line, starting 250 from the left. No gap between the
   5 buttons was specified -- 16 is a reasonable default, flagged here
   since it's the one number in this section that isn't sourced directly
   from the brief. */
.menu-tabs {
  display: flex;
  align-items: center;
  gap: calc(16 * var(--u));
  margin-top: calc(40 * var(--u));
  margin-left: calc(250 * var(--u));
}

/* Each tab: icon + label, 8 gap, 15 padding, 46 tall (Hug width), 5 corner
   radius, #950101 fill. Only Chef Special is enabled/100% -- the other
   four are 40% and inert until their menus exist, per "we don't have menu
   of others once we will have it we can make them active too". 40% is
   applied as an rgba background rather than the `opacity` property so the
   icon/label stay fully opaque (same reasoning as the shrimp dish tag and
   the reservation field borders earlier). Uppercase confirmed the same way
   as those: e.g. "PRIVATE DINING ROOM MENU" measures ~220px against a
   163-30-8-16=218px text budget in the 272 Hug box -- title case would
   leave 30px of unexplained slack, uppercase nearly fills it exactly, and
   the same held for all 5 labels. */
.menu-tab {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  height: calc(46 * var(--u));
  padding: calc(15 * var(--u));
  border: none;
  border-radius: calc(5 * var(--u));
  background-color: rgba(149, 1, 1, 0.4);
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(16 * var(--u));
  font-weight: 700;
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
  text-transform: uppercase;
  color: #FFFFFF;
  cursor: not-allowed;
  opacity: 1;                             /* override the browser's default dimming of disabled buttons */
}

.menu-tab--active {
  background-color: #950101;
  cursor: pointer;
}

/* A tab with a menu behind it, but not the one currently open -- same 40%
   fill as the still-disabled tabs, just clickable. */
.menu-tab--enabled {
  cursor: pointer;
}

.menu-tab-icon {
  display: block;
  width: calc(16 * var(--u));
  height: calc(16 * var(--u));
  flex-shrink: 0;
}

/* "Master Chef Recommends" block: 128 below the tabs, 40 from the left,
   160 of padding-bottom to close out the Main Course grid below it
   (padding rather than margin so it can't collapse away -- see the note
   further down by .menu-dish-grid--main). */
.menu-recommends {
  margin-top: calc(128 * var(--u));
  margin-left: calc(40 * var(--u));
  padding-bottom: calc(160 * var(--u));
}

/* Bar Menu opens with a centered service-charge/measure note instead of
   the "Master Chef Recommends" eyebrow the other panels use, so it needs
   its own top spacing: 80 below the tabs (overriding .menu-recommends'
   128, via the ID so it wins regardless of source order) instead of 128,
   with Aperitif then set 64 below the note itself (see the adjacent-
   sibling rule below) instead of the usual 24. */
#panel-bar-menu {
  margin-top: calc(80 * var(--u));
}

/* 377 from both the page's left and right edges (686 wide, centered) --
   .menu-recommends already carries a 40 left margin, so this only adds
   the remaining 337 to reach a true 377 from the page edge. */
.menu-bar-note {
  margin-left: calc(337 * var(--u));
  width: calc(686 * var(--u));
  text-align: center;
}

.menu-bar-note-line {
  margin: 0;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(14 * var(--u));
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #747474;
}

.menu-bar-note + .menu-category-row {
  margin-top: calc(64 * var(--u));
}

.menu-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: calc(3.68 * var(--u));
  font-size: calc(16 * var(--u));
  line-height: 1;                         /* 100% */
  letter-spacing: 0;
}

.menu-eyebrow-en {
  display: block;
  height: calc(16 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  color: #9A0200;
}

.menu-eyebrow-cn {
  display: block;
  height: calc(16 * var(--u));
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-weight: 500;                       /* Medium */
  color: #747474;
}

/* "Appetizers" + the service-charge note on the same row, 24 below the
   eyebrow. "Appetizers" hugs its own text (174.5px measured vs the given
   170 box -- the usual near-miss, so fit-content rather than a hard width).
   The note sits 802 to the right of Appetizers' own right edge -- since
   they're flex siblings, margin-left on the note measures from exactly
   that edge, matching "802px right of it" directly. */
.menu-category-row {
  display: flex;
  align-items: center;
  margin-top: calc(24 * var(--u));
}

/* Bar Menu categories collapse/expand on click -- the row spans the same
   1360 the divider below it does, with the chevron pushed to its far
   right via space-between (see script.js for the toggle). */
#panel-bar-menu .menu-category-row {
  width: calc(1360 * var(--u));
  justify-content: space-between;
  cursor: pointer;
}

/* Classic two-border corner, rotated: pointing up (expanded) by default,
   flipped to point down once the section is collapsed. */
.menu-category-chevron {
  flex-shrink: 0;
  width: calc(8 * var(--u));
  height: calc(8 * var(--u));
  margin-bottom: calc(2 * var(--u));
  border-style: solid;
  border-color: #101010;
  border-width: 0 calc(2 * var(--u)) calc(2 * var(--u)) 0;
  transform: rotate(-135deg);
  transition: transform 0.2s ease;
}

.menu-category-row--collapsed .menu-category-chevron {
  transform: rotate(45deg);
}

.menu-category-title {
  width: fit-content;
  white-space: nowrap;
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #101010;
}

.menu-service-note {
  margin-left: calc(802 * var(--u));
  width: fit-content;
  white-space: nowrap;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-size: calc(14 * var(--u));
  font-weight: 400;
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #747474;
}

/* Food & Desserts has several category titles much longer than "Appetizers"
   / "Main Course" ("Bean Curd and Vegetables", "Rice and Noodles"...), which
   would push the note past the fixed 802 offset above clean off the page.
   Pin the row to the same 1360 width as the divider below it and let the
   note float to that row's own right edge instead of a hardcoded distance
   from the title. */
.menu-category-row--wide {
  width: calc(1360 * var(--u));
  justify-content: space-between;
}

.menu-category-row--wide .menu-service-note {
  margin-left: 0;
}

/* Divider: 8 below Appetizers specifically (not the note), same style as
   the homepage's, same 40/1360 side margins. */
.menu-category-divider {
  margin-top: calc(8 * var(--u));
  width: calc(1360 * var(--u));
  height: 0;
  border: none;
  border-top: 1px solid #101010;
  opacity: 0.3;
}

/* Two dish columns, 30 below the divider. Column 1 is a hard 805px wide
   (845 - 40), so column 2 starts at exactly 845 from the page's left edge
   -- confirmed directly rather than derived from the "250px right from
   prices" math (which pointed at 803; 845 is the number actually wanted).
   Column 2 follows immediately at that width, no gap needed, which is
   simpler and more reliable than computing an offset from column 1's
   actual (variable, per-row) content width. Each row inside still hugs
   its own text -- 805 is just generous headroom so nothing in column 1
   (the widest row measures ~374px of description) ever bumps into
   column 2. */
.menu-dish-grid {
  display: flex;
  margin-top: calc(30 * var(--u));
}

/* Sub-category label ("SPEYSIDE MALTS" etc. under the "Single Malt"
   category) -- bold uppercase, sitting between a category's own divider
   and its first dish-grid, with tighter groupings repeating below it. */
.menu-subcategory-title {
  margin: 0;
  margin-top: calc(30 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  font-size: calc(22 * var(--u));
  line-height: 1.3;                       /* 130% */
  letter-spacing: calc(0.88 * var(--u));  /* 4% of the 22px size */
  text-transform: uppercase;
  color: #101010;
}

/* One-off: "Speyside Malts" sits 24 below the Single Malt divider instead
   of the standard 30. */
.menu-subcategory-title--tight {
  margin-top: calc(24 * var(--u));
}

/* Wine-country headings (France, Chile...) run smaller than the whisky
   region headings that share the base class -- 18 instead of 22, with
   letter-spacing recalculated as 4% of that smaller size. */
.menu-subcategory-title--wine {
  font-size: calc(18 * var(--u));
  letter-spacing: calc(0.72 * var(--u));  /* 4% of 18px */
}

/* ---------- Private Dining Room Menu ---------- */
/* "Set Menu 1 -" reuses .menu-category-title as-is (same Seasons 36/120%/
   0 spec); this is just the price next to it, in the accent red instead
   of near-black. */
.pdr-price {
  font-family: 'The Seasons', Georgia, 'Times New Roman', serif;
  font-size: calc(36 * var(--u));
  font-weight: 400;
  line-height: 1.2;                       /* 120% */
  letter-spacing: 0;
  color: #950101;
}

/* Appetizer/Main Course side by side, each running its own Rice and
   Noodles/Dessert section below -- reuses .menu-dish-column--1/--2 for
   the 40/845 split and the first-subcategory-title zeroing rule. */
.pdr-columns {
  display: flex;
  margin-top: calc(8 * var(--u));
}

/* Each Set Menu sits 120 below the previous one's content, whichever of
   its two columns ends up taller. */
.pdr-set-menu + .pdr-set-menu {
  margin-top: calc(120 * var(--u));
}

/* One-off: Set Menu 6's "Duck" column has only 2 items above it (vs.
   4 in "Appetizer" next to it), so the standard 40 leaves it well above
   "Soup" in the other column -- this pushes it down to line up with it. */
.menu-subcategory-title--pdr6-duck {
  margin-top: calc(119 * var(--u));
}

/* 555-wide underline below a section heading (Appetizer, Main Course...)
   -- same style as the 1360 divider under "Set Menu 1" itself, just
   narrower: thin, 30% opacity, so it reads as a subtle separator rather
   than a hard rule. */
.pdr-section-divider {
  margin-top: calc(8 * var(--u));
  width: calc(555 * var(--u));
  height: 0;
  border: none;
  border-top: 1px solid #101010;
  opacity: 0.3;
}

.pdr-items {
  margin-top: calc(16 * var(--u));
}

.pdr-item {
  margin: 0;
  width: calc(555 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

.pdr-item + .pdr-item {
  margin-top: calc(16 * var(--u));
}

/* Every subcategory after the first needs the bigger gap that separates
   it from the previous group's dish-grid above it. */
.menu-subcategory-title--spaced {
  margin-top: calc(40 * var(--u));
}

/* Tighter than the standard 30 -- the subcategory label directly above
   already provides the visual separation. */
.menu-dish-grid--sub {
  margin-top: calc(10 * var(--u));
}

/* One-off: Speyside Malts' underline sits 16 above ABERLOUR's own text
   instead of the standard ~14 (10 grid gap + the dish row's own 4) --
   12 here plus that same 4 lands the text exactly 16 below the line. */
.menu-dish-grid--loose {
  margin-top: calc(12 * var(--u));
}

.menu-dish-column--1 {
  width: calc(805 * var(--u));
  flex-shrink: 0;
}

.menu-dish-column--2 {
  flex: 1;
}

/* White Wine: each column runs its own independent country-by-country
   list (COUNTRY heading, then its wines, then the next country), rather
   than one heading spanning both columns like Single Malt's regions do.
   A column is a flex item, so a first child's margin-top never collapses
   away on its own -- zero it explicitly so the heading sits flush under
   the divider instead of doubling the grid's own 30 top margin. */
.menu-dish-column--1 > .menu-subcategory-title:first-child,
.menu-dish-column--2 > .menu-subcategory-title:first-child {
  margin-top: 0;
}

/* The wine(s) right under a country heading sit close to it -- the
   heading itself already provides the separation from the group above. */
.menu-subcategory-title + .menu-dish {
  margin-top: calc(4 * var(--u));
}

/* Main Course heading: 87 below the Appetizers grid, measured off "Yuzhou-
   style silken bean curd..." (column 1's last item) -- works out the same
   as measuring from column 2's last item too, since both Appetizers
   columns come out to an identical 428.8px tall (7 lines' worth of
   description text each, just distributed differently), so there's no
   ambiguity about which column the flex row's actual height follows. */
.menu-category-row--main {
  margin-top: calc(87 * var(--u));
}

/* One-off: "Single Malt" sits 72 below the previous category instead of
   the standard 87. */
.menu-category-row--tight {
  margin-top: calc(72 * var(--u));
}

/* Closing space below Main Course: 160 below "Home style egg in fiery
   chili sauce" (column 1's last item). Here the two columns are NOT equal
   height -- column 1 runs 428.8px (two of its five descriptions wrap to a
   second line) while column 2 is only 322.6px (one wrap out of four) --
   but column 1 is the taller of the two, so it's what actually drives
   this flex row's rendered height, so this needs no special case. The
   actual 160 is set as padding-bottom on .menu-recommends above (a
   trailing margin here would just collapse through its unpadded parent
   and never reserve real space). */

/* 30 between dishes within a column, matching the same 30 used from the
   divider to the first dish. */
.menu-dish {
  width: fit-content;
  margin-top: calc(30 * var(--u));
}

.menu-dish:first-child {
  margin-top: 0;
}

/* Bar Menu items sit closer together than the rest of the page (16
   instead of the standard 30) -- scoped to the panel via the ID so it
   doesn't touch Chef Special/Food & Desserts/Dim Sums, and re-declaring
   the first-child/after-heading exceptions at the same ID-scoped
   specificity so this doesn't accidentally outrank them. */
#panel-bar-menu .menu-dish {
  margin-top: calc(16 * var(--u));
}

#panel-bar-menu .menu-dish:first-child {
  margin-top: 0;
}

#panel-bar-menu .menu-subcategory-title + .menu-dish {
  margin-top: calc(4 * var(--u));
}

.menu-dish-cn {
  margin: 0;
  font-family: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #747474;
}

/* The name -> description -> spice row (price is pulled out to a fixed
   column below). Description hugs its own text (true to the "Hug" sizing
   in the typography panels), so the spice icon still lands at a different
   X per row -- only price was asked to line up in a straight column. */
.menu-dish-row {
  position: relative;
  display: flex;
  align-items: baseline;
  margin-top: calc(4 * var(--u));
}

/* Tagline line(s) under a dish's name (grape/varietal, producer, or a
   cocktail's one-line description) -- same size/weight/spacing/color as
   the name itself now, for every line, not just the first. */
.menu-dish-tagline {
  margin: 0;
  margin-top: calc(8 * var(--u));
  width: fit-content;
  max-width: calc(300 * var(--u));
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;                       /* 130% */
  letter-spacing: calc(0.72 * var(--u));  /* 4% of 18px */
  color: #101010;
}

/* No forced nowrap: a few Main Course descriptions (e.g. "Wok-tossed
   chicken with bamboo shoots, preserved chili and la ba bean" at 542.6px,
   "Stir fried red capsicum..." at 626.9px) are longer than the fixed price
   column leaves room for (504px in either column, now that both start
   the same 504px before their own price), so without a wrap they'd run
   underneath the price text. max-width per column lets these specific
   rows wrap onto a second line while every shorter description
   (everything in Appetizers, plus most of Main Course) still renders on
   one line exactly as before. */
.menu-dish-en {
  margin: 0;
  width: fit-content;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;                       /* 130% */
  letter-spacing: calc(0.72 * var(--u));  /* 4% of the 18px size */
  color: #101010;
}

/* 460, not the full 504 available before price: leaves room for the spice
   icon(s) below, which are now fixed-positioned (see .menu-dish-spice) at
   a set distance before the price rather than following the description's
   own flex width -- if the description ran all the way to 504 it could
   sit under the icon even though it'd never reach the price itself. */
.menu-dish-column--1 .menu-dish-en {
  max-width: calc(460 * var(--u));
}

.menu-dish-column--2 .menu-dish-en {
  max-width: calc(460 * var(--u));
}

/* Placeholder for item 1's missing description text -- flagged, not real
   copy. Remove this rule (and the --todo class) once the real line is in. */
.menu-dish-en--todo {
  font-style: italic;
  color: #9A0200;
}

/* Fixed-positioned, like the price: originally this followed the
   description with margin-left: 10, but a wrapped (2-line) description
   still takes its full max-width box even when the visible text is
   shorter, which pushed the icon on "Wok-tossed chicken with bamboo
   shoots..." far enough right to overlap the price column. Anchoring it
   at a set distance before the price instead (473 = 504 - 10 - 21 for one
   icon; 448 = 504 - 10 - 21 - 4 - 21 for two, via the --double modifier)
   guarantees clearance regardless of how any given description wraps. */
.menu-dish-spice {
  position: absolute;
  top: 0;
  left: calc(473 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(4 * var(--u));
}

.menu-dish-spice--double {
  left: calc(448 * var(--u));
}

.menu-dish-spice--triple {
  left: calc(423 * var(--u));
}

/* Panels: only the active tab's content is shown -- see .menu-tab / the
   toggle logic in script.js. */
.menu-panel[hidden] {
  display: none;
}

/* flex-shrink: 0 is load-bearing here: .menu-dish-spice is now an
   absolutely-positioned, width: auto flex container (it needs to
   shrink-to-fit since it has no explicit width), and without this the
   shrink-to-fit algorithm computes its available width as ~0 and the
   icon (default flex-shrink: 1) collapses to width: 0 to match, even
   though height still renders fine at 21px -- it just goes invisible. */
.menu-dish-spice-icon {
  display: block;
  flex-shrink: 0;
  width: calc(21 * var(--u));
  height: calc(21 * var(--u));
}

/* Prices lock to a straight column now instead of following each row's
   description width: 544px from the page's left edge in column 1, 1349px
   in column 2. Positioned absolute within .menu-dish-row (position:
   relative above), with `left` reduced by that row's own column offset --
   column 1 starts at page-X 40 (544-40=504), column 2 at page-X 845
   (1349-845=504, the same number as column 1 purely by coincidence) --
   so the two column-specific rules below land on the same true 544/1349
   regardless of how wide any individual description happens to be.
   Glacial Indifference has no Rupee glyph -- the family's own fallback
   stack (Segoe UI / Arial) already covers it, so no extra markup is
   needed, just a note in case the symbol ever looks visually mismatched
   against the digits next to it. */
.menu-dish-price {
  position: absolute;
  top: 0;
  display: flex;
  align-items: baseline;
  gap: calc(2 * var(--u));
  white-space: nowrap;
  font-family: 'Glacial Indifference', 'Segoe UI', Arial, sans-serif;
  font-weight: 400;
  font-size: calc(18 * var(--u));
  line-height: 1.3;                       /* 130% */
  letter-spacing: 0;
  color: #101010;
}

.menu-dish-column--1 .menu-dish-price {
  left: calc(504 * var(--u));
}

.menu-dish-column--2 .menu-dish-price {
  left: calc(504 * var(--u));
}

/* Prices hidden site-wide -- remove this rule to bring them back. Kept as a
   separate override instead of touching .menu-dish-price above so nothing
   about its own styling has to change. */
.menu-dish-price {
  display: none;
}


/* ---------- Responsive (mobile, <=768px) ---------- */
/* Everything above scales proportionally off the 1440px design frame via
   --u/--pu, which is exact at 1440 and readable down to roughly tablet
   width, but keeps shrinking past that -- text and tap targets go
   illegibly small on phones, and several sections position content with
   fixed left/right/top offsets that only made sense next to a wide sibling
   column. Below, layouts that were side-by-side become stacked (in the
   same DOM order already used for source order elsewhere on the page) and
   typography switches from calc(N * var(--u)) to fixed/clamped values sized
   for a phone screen instead of continuing to shrink with it. */
@media (max-width: 768px) {
  .nav ul {
    gap: 20px;
  }

  /* Header. flex-wrap + max-width is the safety net: if both button labels
     don't fit on one line at this width, "Order Now" drops to a second row
     instead of running off the right edge of the screen. */
  .header-actions {
    top: 16px;
    right: 16px;
    max-width: calc(100% - 32px);
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 6px;
  }

  .btn {
    height: 32px;
    padding: 0 10px;
    font-size: 10px;
    border-radius: 4px;
  }

  .btn-reserve,
  .btn-order {
    width: auto;
  }

  /* Menu page topbar: the desktop layout uses a large margin-left gap
     (calc(819 * var(--u))) to push the buttons to the far right of a
     1440px-wide row -- that gap keeps shrinking proportionally with --u at
     narrow widths, but the buttons above just switched to a fixed, legible
     size instead of shrinking with it, so the row stops adding up and runs
     off the right edge. Wrapping the row and zeroing that margin lets the
     logo and buttons flow normally instead, with `margin-left: auto` on the
     first button (rather than the old fixed gap) keeping both buttons
     pinned to the right edge, logo on the left. */
  .menu-topbar {
    flex-wrap: wrap;
    margin-left: 16px;
    margin-right: 16px;
    gap: 8px;
  }

  .menu-topbar .btn-reserve {
    margin-left: auto;
  }

  .menu-topbar .btn-order {
    margin-left: 0;
  }

  /* Shared eyebrow labels ("About Us", "Menu", etc.) across sections --
     grouped since they all follow the same *-eyebrow/-en/-cn pattern. */
  .about-eyebrow,
  .culinary-eyebrow,
  .experience-eyebrow,
  .events-eyebrow,
  .photo-gallery-eyebrow,
  .footer-eyebrow {
    gap: 4px;
    font-size: 12px;
  }

  .about-eyebrow-en,
  .about-eyebrow-cn,
  .culinary-eyebrow-en,
  .culinary-eyebrow-cn,
  .experience-eyebrow-en,
  .experience-eyebrow-cn,
  .events-eyebrow-en,
  .events-eyebrow-cn,
  .photo-gallery-eyebrow-en,
  .photo-gallery-eyebrow-cn,
  .footer-eyebrow-en,
  .footer-eyebrow-cn {
    width: auto;
    height: auto;
    min-width: 0;
    font-size: 12px;
  }

  /* Shared "Know More" / "Book a table" arrow links. */
  .about-more,
  .chef-more {
    width: auto;
    height: auto;
    gap: 6px;
    font-size: 13px;
  }

  .about-more-icon {
    width: 16px;
    height: 16px;
  }

  /* Shared prev/next slider buttons (Experience gallery + Awards strip). */
  .experience-nav-btn {
    width: 36px;
    height: 36px;
    border-width: 1px;
    border-radius: 6px;
  }

  .experience-nav-icon {
    width: 10px;
    height: 16px;
  }

  /* Hero: stack the logo panel above the video/text panel instead of a
     side-by-side split, which is unreadable once --u shrinks with width. */
  .hero {
    flex-direction: column;
    aspect-ratio: auto;
    max-height: none;
  }

  .hero-panel-red {
    flex: none;
    width: 100%;
    justify-content: center;
    padding: 96px 24px 40px;
  }

  .hero-logo {
    width: min(220px, 60vw);
    margin-left: 0;
  }

  .hero-panel-black {
    flex: none;
    width: 100%;
    min-height: 68vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 40px 24px 56px;
  }

  .hero-label,
  .hero-heading,
  .hero-body {
    position: static;
    top: auto;
    right: auto;
    width: 100%;
    height: auto;
  }

  .hero-label {
    font-size: 13px;
  }

  .hero-heading {
    margin-top: 16px;
    font-size: clamp(26px, 7vw, 32px);
  }

  .hero-body {
    margin-top: 16px;
    font-size: 15px;
  }

  /* About Us */
  .about-inner {
    padding: 64px 24px;
  }

  .about-columns {
    flex-direction: column;
    gap: 24px;
    margin-top: 16px;
  }

  .about-lead {
    width: 100%;
    height: auto;
    font-size: clamp(24px, 7vw, 28px);
  }

  .about-body {
    width: 100%;
    height: auto;
    font-size: 15px;
  }

  .about-gallery {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }

  .about-gallery-img,
  .about-gallery-img--1,
  .about-gallery-img--2 {
    width: 100%;
    height: 220px;
  }

  /* Chef */
  .chef {
    flex-direction: column;
    padding-bottom: 64px;
  }

  .chef-image {
    width: 100%;
    height: 320px;
  }

  .chef-stats {
    flex-wrap: wrap;
    row-gap: 16px;
    margin-top: 24px;
    margin-left: 24px;
  }

  .chef-stat + .chef-stat {
    margin-left: 32px;
  }

  .chef-stat-number {
    font-size: 36px;
  }

  .chef-stat-label {
    margin-top: 6px;
    font-size: 12px;
  }

  .chef-note {
    width: auto;
    margin-top: 24px;
    margin-left: 24px;
    margin-right: 24px;
    font-size: 15px;
  }

  .chef-content {
    padding-top: 40px;
    padding-left: 24px;
    padding-right: 24px;
  }

  .chef-heading {
    width: 100%;
    height: auto;
    font-size: clamp(24px, 7vw, 30px);
  }

  .chef-body {
    width: 100%;
    height: auto;
    font-size: 15px;
  }

  .chef-image-2 {
    max-width: 100%;
    width: 100%;
    height: auto;
    margin-top: 24px;
    margin-left: 0;
  }

  /* Culinary */
  .culinary {
    height: auto;
    max-height: none;
    padding: 56px 24px;
  }

  .culinary-heading {
    width: 100%;
    height: auto;
    margin-top: 12px;
    font-size: clamp(24px, 7vw, 30px);
  }

  .culinary-body {
    position: static;
    width: 100%;
    margin-top: 16px;
    font-size: 15px;
  }

  /* Unique: the hover-reveal caption panel becomes a plain caption card
     under each image -- there's no hover on touch, and the panel's resting
     position is driven by a --u-based transform that assumes a much wider
     viewport, so it stops reserving enough room once the caption font is
     bumped back up to a readable size. Showing it at rest instead sidesteps
     that entirely. */
  .unique {
    padding: 64px 24px;
  }

  .unique-heading {
    width: 100%;
    margin-left: 0;
    font-size: clamp(24px, 7vw, 28px);
  }

  .unique-gallery {
    flex-direction: column;
    gap: 16px;
    margin-top: 32px;
  }

  .unique-card {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .unique-dish {
    height: 55vw;
    max-height: 320px;
  }

  .unique-panel {
    position: static;
    height: auto;
    padding: 16px;
    background-color: #101010;
    transform: none;
  }

  .unique-card:has(.unique-subtitle)::after {
    display: none;
  }

  .unique-caption {
    font-size: 22px;
  }

  .unique-subtitle {
    display: block;
    max-height: none;
    opacity: 1;
    overflow: visible;
    margin-top: 8px;
    font-size: 14px;
  }

  /* Shrimp / menu teaser */
  .shrimp {
    flex-direction: column;
    height: auto;
    max-height: none;
  }

  .shrimp-image {
    flex: none;
    width: 100%;
    height: 280px;
  }

  .shrimp-tags {
    left: 16px;
    bottom: 16px;
    gap: 8px;
    max-width: 80%;
  }

  .shrimp-tag {
    min-height: auto;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 11px;
    white-space: normal;
    width: auto;
  }

  .shrimp-panel {
    padding: 40px 24px;
  }

  .shrimp-eyebrow {
    gap: 4px;
  }

  .shrimp-eyebrow,
  .shrimp-eyebrow-en,
  .shrimp-eyebrow-cn {
    height: auto;
    font-size: 13px;
  }

  .shrimp-heading {
    max-width: 100%;
    font-size: clamp(24px, 7vw, 28px);
  }

  .shrimp-body {
    width: 100%;
    height: auto;
    font-size: 15px;
  }

  .shrimp-btn {
    width: auto;
    height: 40px;
    padding: 0 20px;
    font-size: 13px;
  }

  .shrimp-menu-list {
    width: 100%;
  }

  .shrimp-menu-item {
    height: 44px;
    font-size: 17px;
  }

  /* Experience */
  .experience {
    height: auto;
    padding: 56px 24px;
  }

  .experience-heading {
    margin-top: 12px;
    font-size: clamp(24px, 7vw, 28px);
  }

  .experience-body {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 16px;
    font-size: 15px;
  }

  .experience-nav {
    position: static;
    margin-top: 20px;
  }

  .experience-gallery {
    position: static;
    margin-top: 20px;
  }

  .experience-gallery-img {
    flex: 0 0 78vw;
    width: 78vw;
    height: 56vw;
  }

  /* Events */
  .events {
    padding: 56px 24px;
  }

  .events-heading {
    margin-top: 12px;
    font-size: clamp(24px, 7vw, 28px);
  }

  .events-contact {
    position: static;
    width: auto;
    height: auto;
    margin-top: 16px;
    font-size: 13px;
  }

  .events-contact-icon {
    width: 16px;
    height: 16px;
  }

  .events-gallery,
  .events-gallery--row2 {
    flex-direction: column;
    gap: 16px;
    margin-top: 24px;
  }

  .events-card {
    width: 100%;
  }

  .events-dish {
    width: 100%;
    height: 56vw;
    max-height: 260px;
  }

  .events-caption {
    width: 100%;
    min-height: 0;
    margin-top: 12px;
    font-size: 18px;
  }

  /* Gallery marquee */
  .photo-gallery {
    padding: 56px 24px;
  }

  .photo-gallery-heading {
    margin-top: 12px;
    font-size: clamp(24px, 7vw, 28px);
    white-space: normal;
  }

  .inside-img {
    flex: 0 0 200px;
    width: 200px;
    height: 290px;
  }

  /* Awards */
  .awards {
    padding: 56px 24px;
  }

  .awards-text,
  .awards-heading,
  .awards-body {
    width: 100%;
    height: auto;
  }

  .awards-heading {
    font-size: clamp(24px, 7vw, 28px);
  }

  .awards-body {
    font-size: 15px;
  }

  .awards-cert-viewport {
    position: static;
    margin-top: 24px;
    height: 220px;
  }

  .awards-cert-track > .awards-cert-img:first-child {
    width: 180px;
    height: 220px;
  }

  .awards-cert-track > .awards-cert-img:not(:first-child) {
    width: 140px;
    height: 171px;
  }

  /* Reservation */
  .reservation {
    flex-direction: column;
  }

  .reservation-image {
    flex: none;
    width: 100%;
    height: 260px;
  }

  .reservation-panel {
    padding: 40px 24px;
  }

  .reservation-form {
    width: 100%;
  }

  .reservation-title {
    font-size: clamp(24px, 7vw, 28px);
  }

  .reservation-subtitle {
    font-size: 15px;
  }

  .reservation-label {
    font-size: 12px;
  }

  .reservation-input,
  .reservation-textarea {
    width: 100%;
    padding: 12px 14px;
    font-size: 15px;
  }

  .reservation-input {
    height: 46px;
    padding-top: 0;
    padding-bottom: 0;
  }

  .reservation-date-wrap .reservation-input {
    padding-right: 34px;
  }

  .reservation-date-icon {
    width: 16px;
    height: 16px;
  }

  .reservation-textarea {
    height: 100px;
  }

  .reservation-submit {
    width: 100%;
    height: 46px;
    font-size: 14px;
  }

  /* Footer */
  .divider {
    padding: 56px 24px 0;
  }

  .footer-columns {
    flex-direction: column;
    gap: 32px;
    margin-top: 32px;
  }

  .footer-col--links,
  .footer-col--location {
    margin-right: 0;
  }

  .footer-links {
    gap: 10px;
    margin-top: 16px;
  }

  .footer-link,
  .footer-text {
    font-size: 15px;
  }

  .footer-address {
    width: 100%;
  }

  .footer-apps {
    gap: 12px;
    margin-top: 20px;
  }

  .footer-app-logo--swiggy {
    width: 110px;
    height: 33px;
  }

  .footer-app-logo--zomato {
    width: 85px;
    height: 47px;
  }
}