/* ==========================================================================
   Morel Restaurant (Ipoh) — theme layer, loaded last on every
   page. The palette is taken from the house itself:
     emerald     the dining-room walls, banquettes and printed menu (ink, dark bands)
     gold        the antique gold lettering of the menu and the brass bar (accents)
     teal        the studio backdrop of their menu photographs
     terracotta  the peranakan floor tiles
     ivory       the century-old white bungalow (paper)
   (Variable names are inherited from the engine: --mustard = gold accent.)
   ========================================================================== */

:root {
  --ink: #082e1e;
  --ink-soft: rgba(19, 36, 29, 0.82);
  --ink-muted: rgba(19, 36, 29, 0.6);
  --ink-line: rgba(19, 36, 29, 0.14);
  --night: #0b1f18;
  --night-2: #004a2d;
  --royal: #004a2c;
  --mustard: #c9a14a;
  --mustard-deep: #a8812f;
  --leaf: #b8903c;
  --salmon: #a8812f;
  --slate: #1f4f57;
  --forest: #004a2c;
  --basil: #b8903c;
  --pomodoro: #a5462b;
  --walnut: #5a4a2c;
  --gold: #b8903c;
  --gold-soft: #efe4c8;
  --gold-deep: #8a6a24;
  --lotus: #a5462b;
  --chilli: #a5462b;
  --ember: #c9a14a;
  --paper: #f6f1e6;
  --sand: #eee6d4;
  --cream: #e2d6bb;
  --petrol: #1f4f57;
  --sky: #c9a14a;
  --champagne: #f1e7cf;
  --font-brush: "Noto Serif SC", serif;
}

body {
  background: var(--paper);
}

/* ---------- Header: the traced A+RT monogram and "Art Nature / Gallery Cafe"
   The same mark in both languages; the name is a proper noun. */
.site-header__logo {
  width: auto;
  min-width: 96px;
  height: 84px;
  color: #f3ecdc;
}

.logo-full,
.logo-icon {
  width: max-content;
  display: flex;
  align-items: center;
  justify-content: center;
}

.emblem,
.wordmark {
  display: block;
  max-width: none;
  height: auto;
}

.site-header .site-header__logo .logo-full .emblem {
  width: 96px;
  color: #f3ecdc;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.35));
}

.site-header .site-header__logo .logo-icon .emblem {
  width: 76px;
}

@media (max-width: 760px) {
  .site-header__logo {
    min-width: 72px;
    height: 66px;
  }

  .site-header .site-header__logo .logo-full .emblem,
  .site-header .site-header__logo .logo-icon .emblem {
    width: 70px;
  }
}

/* Scrolled glass in charcoal, so the mark always reads. */
.site-header::before {
  background-color: rgba(25, 25, 23, 0.92);
}

/* Footer and 404: the full lock-up, cream on dark, charcoal on paper. */
.site-footer__logo .wordmark {
  width: 176px;
  color: #f3ecdc;
}

.notfound__emblem .wordmark {
  width: min(260px, 64vw);
  color: var(--ink);
}

/* ---------- Home hero: the house Caesar salad, lifted off the placemat ----------
   pier88 floats a dish over a plate; here it is the cafe's own styled top-down
   shot of the Bamboo Chicken Caesar Salad, cut along the plate rim
   (raw/make-hero-rim.py) and set over the bamboo pavilion, deepened so the arc
   title leads. */
.hero {
  background:
    radial-gradient(ellipse 70% 60% at 50% 78%, rgba(176, 106, 56, 0.18) 0%, rgba(20, 18, 16, 0) 70%),
    radial-gradient(ellipse 90% 70% at 50% 0%, rgba(62, 100, 24, 0.24) 0%, rgba(20, 18, 16, 0) 65%),
    #172116;
}

/* A real, high-resolution photo of the entrance behind the dish (the tall
   plants and ART COFFEE VEGE PHOTO), deepened so the arc title and dish lead. */
.hero::before {
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(14, 11, 9, 0.35) 0%, rgba(14, 11, 9, 0) 100%),
    linear-gradient(180deg, rgba(14, 11, 9, 0.72) 0%, rgba(14, 11, 9, 0.48) 38%, rgba(14, 11, 9, 0.62) 72%, rgba(14, 11, 9, 0.86) 100%);
}

.hero__bg {
  display: block;
  object-position: center 55%;
  filter: saturate(0.92) brightness(0.92);
}

.hero__dish {
  bottom: calc(var(--wave-front-h) * -1 - min(4vw, 56px));
  width: min(42vw, 620px);
  height: auto;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.55)) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.4));
}

@media (max-width: 760px) {
  .hero__dish {
    width: 92vw;
    min-width: 0;
    bottom: calc(var(--wave-front-h) * -1 - 6vw);
  }
}

/* ---------- Journey: the ART emblem beside the turning plate ---------- */
.journey__emblem {
  width: 150px;
  color: var(--ink);
}

.journey__emblem .emblem {
  display: block;
  width: 100%;
  height: auto;
  color: var(--ink);
}

.journey__mark {
  width: 15%;
  opacity: 0.86;
  color: var(--ink);
}

.journey__mark svg {
  display: block;
  width: 100%;
  height: auto;
}

.journey__mark--a {
  left: 9.6%;
  top: 15.6%;
  transform: rotate(-45deg);
}

.journey__mark--b {
  right: 9.6%;
  bottom: 15.6%;
  transform: rotate(135deg);
}

.journey__plate {
  filter: drop-shadow(0 30px 50px rgba(21, 16, 11, 0.24)) drop-shadow(0 6px 12px rgba(21, 16, 11, 0.16));
}

/* ---------- Day -> night: the same shopfront by day, then lit at dusk ---------- */
.golden__img--night {
  filter: saturate(1.05) brightness(1.02);
}

.golden__night::after {
  background: linear-gradient(180deg, rgba(14, 9, 4, 0.2) 0%, rgba(14, 9, 4, 0) 55%, rgba(14, 9, 4, 0.3) 100%);
  mix-blend-mode: normal;
}

/* ---------- Menu ---------- */
.tag--chef,
.tag--fav {
  border-color: rgba(154, 107, 18, 0.5);
  color: var(--mustard-deep);
}

.tag--top,
.tag--new {
  border-color: rgba(164, 69, 45, 0.5);
  color: var(--gold-deep);
}

.menu-item__code {
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

/* ---------- Banquet page: aligned rows, two wide then three ---------- */
.room-grid {
  display: grid;
  gap: clamp(14px, 1.8vw, 24px);
  margin-top: clamp(14px, 1.8vw, 24px);
}

.section-head + .room-grid {
  margin-top: clamp(34px, 4.5vw, 56px);
}

.room-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.room-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.room-card {
  margin: 0;
}

.room-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 4px;
}

.room-grid--three .room-card img {
  aspect-ratio: 1;
}

.room-card figcaption {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 14px;
}

.room-card figcaption strong {
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(20px, 1.9vw, 26px);
  letter-spacing: 0.02em;
}

html[data-lang="zh"] .room-card figcaption strong {
  font-family: "Noto Serif SC", serif;
  font-weight: 400;
  letter-spacing: 0.08em;
}

@media (max-width: 760px) {
  .room-grid--two,
  .room-grid--three {
    grid-template-columns: 1fr;
  }

  .room-grid--three .room-card img {
    aspect-ratio: 4 / 3;
  }
}

/* Set menus, laid out like their printed banquet cards: a paper card with a
   gold fret-cornered frame, the dishes stacked and centred. */
.set-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 32px);
  margin-top: clamp(34px, 4.5vw, 56px);
}

.set-card {
  position: relative;
  padding: clamp(30px, 4vw, 52px) clamp(22px, 3.4vw, 46px);
  border: 1px solid rgba(154, 107, 18, 0.5);
  background: #fffaf3;
  text-align: center;
}

.set-card::before {
  content: "";
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(154, 107, 18, 0.28);
  pointer-events: none;
}

.set-card__kicker {
  margin: 0 0 6px;
  color: var(--gold-deep);
  font-size: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.set-card__title {
  margin: 0;
  color: var(--ink);
  font-family: var(--font-display);
  font-size: clamp(26px, 2.6vw, 36px);
  font-weight: 400;
  line-height: 1.1;
}

html[data-lang="zh"] .set-card__title {
  font-family: "Noto Serif SC", serif;
  letter-spacing: 0.12em;
}

.set-card__pax {
  margin: 10px 0 18px;
  color: var(--ink-soft);
  font-size: 14px;
}

.set-card__dishes {
  display: grid;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}

.set-card__dishes li {
  display: flex;
  flex-direction: column;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.35;
}

.set-card__dishes li small {
  color: var(--ink-muted);
  font-size: 12.5px;
  letter-spacing: 0.02em;
}

.set-card__price {
  margin: 0 0 6px;
  color: var(--chilli);
  font-family: var(--font-num);
  font-size: clamp(30px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: 0.02em;
}

.set-card__note {
  margin: 0 0 20px;
  color: var(--ink-muted);
  font-size: 13px;
}

@media (max-width: 860px) {
  .set-cards {
    grid-template-columns: 1fr;
  }
}

/* ---------- Booking card photo ---------- */
.booking__photo {
  margin: 0 0 6px;
}

.booking__photo img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: center 45%;
  border-radius: 4px;
}

/* ---------- Contact: the shopfront beside the live map ---------- */
.parking-row {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(18px, 2.4vw, 32px);
  align-items: stretch;
  margin-top: clamp(34px, 4.5vw, 56px);
}

.parking-row .map-frame {
  margin-top: 0;
  height: 100%;
}

.parking-row .map-frame iframe {
  height: 100%;
  min-height: 420px;
}

.parking-row__map {
  margin: 0;
}

.parking-row__map img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
}

.parking-row__map figcaption {
  margin-top: 10px;
  font-family: var(--font-script);
  font-size: 30px;
  line-height: 1;
  color: var(--ink-soft);
}

html[data-lang="zh"] .parking-row__map figcaption {
  font-family: var(--font-brush);
  font-size: 22px;
}

@media (max-width: 860px) {
  .parking-row {
    grid-template-columns: 1fr;
  }
}

/* The photo row on About holds square and portrait shots; keep them one height. */
.page-about .photo-row img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

/* ---------- Roast pre-order: a quantity list like their printed price list ---------- */
.order-list {
  display: grid;
  gap: 0;
  margin: 0 0 clamp(22px, 3vw, 34px);
  border-top: 1px solid var(--ink-line);
}

.order-list__head {
  margin: 18px 0 4px;
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.order-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 84px;
  gap: 16px;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ink-line);
  cursor: pointer;
}

.order-item__name {
  color: var(--ink);
  font-size: 16px;
}

.order-item__price {
  color: var(--ink-soft);
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
}

.order-item input {
  width: 84px;
  padding: 8px 10px;
  border: 1px solid var(--ink-line);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-family: var(--font-num);
  text-align: center;
}

.order-item input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}

.order-list .field__error:not(:empty) {
  margin-top: 10px;
}

@media (max-width: 520px) {
  .order-item {
    grid-template-columns: minmax(0, 1fr) auto 64px;
    gap: 10px;
  }

  .order-item input {
    width: 64px;
  }
}

/* ==========================================================================
   Round 3 — typography and legibility (loaded last, overrides the above)
   · Accent lines: no gold brush script. Chinese uses a thin, widely tracked
     Noto Serif SC; English uses Cormorant Garamond italic. Both upright.
   · Gold is split in two: champagne for dark grounds, bronze for paper, so
     accent text always has contrast.
   · Every line of text that sits on a photograph gets its own scrim.
   ========================================================================== */
:root {
  --font-script: "Cormorant Garamond", "Noto Serif SC", Georgia, serif;
}

/* English accent line */
.script,
.journey__signature,
.skybar__arch figcaption,
.signatures__note,
.golden__copy > span {
  font-family: var(--font-script);
  font-style: italic;
  font-weight: 300;
  font-size: 0.42em;
  letter-spacing: 0.04em;
  line-height: 1.25;
  margin-top: 0.55em;
  transform: none;
  color: var(--gold);
}

.golden__copy > span,
.skybar__arch figcaption,
.journey__signature,
.signatures__note {
  font-size: clamp(18px, 1.5vw, 24px);
}

/* Chinese accent line */
html[data-lang="zh"] .script,
html[data-lang="zh"] .journey__signature,
html[data-lang="zh"] .skybar__arch figcaption,
html[data-lang="zh"] .signatures__note,
html[data-lang="zh"] .golden__copy > span {
  font-family: "Noto Serif SC", serif;
  font-style: normal;
  font-weight: 300;
  font-size: 0.3em;
  letter-spacing: 0.34em;
  line-height: 1.6;
  margin-top: 0.9em;
  transform: none;
}

html[data-lang="zh"] .golden__copy > span,
html[data-lang="zh"] .skybar__arch figcaption,
html[data-lang="zh"] .journey__signature,
html[data-lang="zh"] .signatures__note {
  font-size: clamp(13px, 1vw, 15px);
}

/* Chinese display headings: light, high-contrast serif with generous air */
html[data-lang="zh"] .section-title,
html[data-lang="zh"] .page-hero__title,
html[data-lang="zh"] [class$="__title"],
html[data-lang="zh"] .journey__about-title,
html[data-lang="zh"] .golden__copy h2,
html[data-lang="zh"] .reserve__title,
html[data-lang="zh"] .atmos__title {
  font-family: "Noto Serif SC", serif;
  font-weight: 300;
  letter-spacing: 0.14em;
}

/* Accent lines on dark / photographic grounds are champagne, not yellow */
.page-hero .script,
.atmos .script,
.reserve .script,
.golden__copy > span,
.cta-band .script,
.site-footer .script,
.hero .script,
.page-hero__title .script,
.site-menu__tile-label em {
  color: var(--champagne);
}

.site-menu__tile-label em {
  font-family: var(--font-script);
  font-style: italic;
  font-size: 20px;
  letter-spacing: 0.03em;
  text-transform: none;
}

html[data-lang="zh"] .site-menu__tile-label em {
  font-family: "Noto Serif SC", serif;
  font-style: normal;
  font-size: 14px;
  letter-spacing: 0.28em;
}

/* Kickers: small, widely spaced; bronze on paper, champagne on photos */
.kicker {
  letter-spacing: 0.28em;
}

.kicker--light,
.page-hero .kicker,
.golden__copy p {
  color: var(--champagne);
}

/* ---------- Legibility on photographs ---------- */
.page-hero__media {
  filter: brightness(0.78) saturate(0.9);
}

.page-hero::before {
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(6, 18, 14, 0.5) 0%, rgba(6, 18, 14, 0) 100%),
    linear-gradient(180deg, rgba(6, 18, 14, 0.66) 0%, rgba(6, 18, 14, 0.46) 45%, rgba(6, 18, 14, 0.7) 100%);
}

.page-hero__title,
.page-hero__lede,
.page-hero .kicker,
.golden__copy,
.atmos__content,
.reserve__content,
.hero__corner,
.hero__mobile-title {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.35);
}

.page-hero__lede {
  color: rgba(255, 255, 255, 0.94);
  font-size: 15px;
}

.atmos::before {
  background:
    radial-gradient(ellipse 55% 45% at 50% 38%, rgba(6, 18, 14, 0.55) 0%, rgba(6, 18, 14, 0) 100%),
    linear-gradient(180deg, rgba(6, 18, 14, 0.5) 0%, rgba(6, 18, 14, 0.28) 45%, rgba(6, 18, 14, 0) 70%);
}

.golden__shade {
  background:
    radial-gradient(ellipse 60% 50% at 50% 50%, rgba(6, 18, 14, 0.55) 0%, rgba(6, 18, 14, 0) 100%),
    linear-gradient(180deg, rgba(6, 18, 14, 0.35), rgba(6, 18, 14, 0.5));
}

.occasions__primary::after {
  background: linear-gradient(180deg, rgba(6, 18, 14, 0) 55%, rgba(6, 18, 14, 0.62) 100%);
}

.occasions__caption {
  font-size: 10px;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6);
}

/* Home hero arc title: a soft pool of shade behind the words */
.hero::after {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: 8%;
  height: 52%;
  z-index: 0;
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(6, 18, 14, 0.42) 0%, rgba(6, 18, 14, 0) 100%);
  pointer-events: none;
}

.hero__headline text {
  paint-order: stroke;
  stroke: rgba(6, 18, 14, 0.25);
  stroke-width: 2px;
}

/* Overlay menu: an opaque ground so the page never shows through */
.site-menu__backdrop {
  background: #172116;
}

.site-menu__panel {
  background: #004a2d;
}

/* ==========================================================================
   Art Nature additions
   ========================================================================== */

/* Tags: Chef's Choice (the stamp on their menu) and guest favourites */
.tag--chef {
  border-color: rgba(154, 107, 18, 0.55);
  color: var(--mustard-deep);
}

.tag--fav {
  border-color: rgba(74, 106, 62, 0.55);
  color: var(--leaf);
}

.tag--veg {
  border-color: rgba(62, 107, 58, 0.5);
  color: var(--basil);
}

.tag--spicy {
  border-color: rgba(196, 85, 63, 0.5);
  color: var(--ember);
}

/* Contact: the live map alone, full width under the contact cards */
.map-row {
  margin-top: clamp(34px, 4.5vw, 56px);
}

.map-row .map-frame {
  margin-top: 0;
}

.map-row .map-frame iframe {
  display: block;
  height: clamp(360px, 42vw, 520px);
}

/* A thin tricolore rule, the device under AGLIOS' in their logo */
.tricolore {
  display: flex;
  gap: 6px;
  width: 96px;
  height: 3px;
  margin: 18px 0 0;
}

.tricolore::before,
.tricolore::after {
  content: "";
  flex: 1;
  border-radius: 3px;
}

.tricolore::before {
  background: var(--basil);
}

.tricolore::after {
  background: var(--pomodoro);
}

.journey__mark svg,
.journey__emblem svg {
  display: block;
  width: 100%;
  height: auto;
}

/* The header mark stays cream on the dark glass in every state. */
.site-header .site-header__logo .emblem,
.site-header.is-scrolled .site-header__logo .emblem,
.site-header .site-header__logo {
  color: #f3ecdc;
}

/* ==========================================================================
   Typography v2 — closer to pier88: Tan Mon Cheri (thin, high-contrast
   didone) -> Bodoni Moda at display optical size; Golden Hopes (casual brush
   hand) -> Mr Dafoe for every accent line, tilted, in basil on paper and
   cream on photographs. Body stays Jost 300 (Stevie Sans stand-in).
   ========================================================================== */
:root {
  --font-display: "Bodoni Moda", "Noto Serif SC", "Times New Roman", serif;
  --font-head: "Bodoni Moda", "Noto Serif SC", "Times New Roman", serif;
  --font-script: "Mr Dafoe", "Noto Serif SC", cursive;
}

.section-title,
.page-hero__title,
[class$="__title"],
.journey__about-title,
.golden__copy h2,
.reserve__title,
.atmos__title,
.hero__headline text,
.hero__mobile-title,
.journey__title,
.explore__card-title,
.offers__title,
.occasions__title,
.signatures__name,
.site-menu__links a,
.menu-group__title,
.menu-section__title,
.menu-item__name,
.room-card figcaption strong,
.set-card__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-optical-sizing: auto;
  letter-spacing: 0.005em;
}

.script,
.journey__signature,
.skybar__arch figcaption,
.signatures__note,
.golden__copy > span,
.site-menu__tile-label em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  font-size: 0.5em;
  letter-spacing: 0.01em;
  line-height: 1.05;
  text-transform: none;
  margin-top: 0.1em;
  transform: rotate(-4deg);
}

.golden__copy > span,
.skybar__arch figcaption,
.journey__signature,
.signatures__note {
  font-size: clamp(26px, 2.4vw, 38px);
}

.site-menu__tile-label em {
  font-size: 26px;
}

html[data-lang="zh"] .site-menu__tile-label em,
html[data-lang="zh"] .script,
html[data-lang="zh"] .journey__signature,
html[data-lang="zh"] .skybar__arch figcaption,
html[data-lang="zh"] .signatures__note,
html[data-lang="zh"] .golden__copy > span {
  font-family: "Noto Serif SC", serif;
  transform: none;
}

/* ==========================================================================
   Buttons v2 — no black-to-green fills. Primary buttons are cream on dark
   grounds and charcoal on paper; every button fills with golden bamboo on
   hover (the golden canes of their logo), text turning bamboo-night.
   ========================================================================== */
:root {
  --rosso: #a5462b;   /* Morel: the terracotta of their peranakan floor tiles (hover fill) */
  --cream-btn: #f3ebdb;
}

.btn--gold {
  --btn-bg: var(--cream-btn);
  --btn-color: #004a2c;
  --btn-border: var(--cream-btn);
  --btn-fill: var(--rosso);
  --btn-fill-color: #004a2c;
}

.btn--ink {
  --btn-bg: #004a2c;
  --btn-color: #f6f2ea;
  --btn-border: #004a2c;
  --btn-fill: var(--rosso);
  --btn-fill-color: #004a2c;
}

.btn--light {
  --btn-bg: #fff;
  --btn-color: #004a2c;
  --btn-border: rgba(255, 255, 255, 0.85);
  --btn-fill: var(--rosso);
  --btn-fill-color: #004a2c;
}

.btn--ghost {
  --btn-color: #004a2c;
  --btn-border: rgba(29, 27, 25, 0.35);
  --btn-fill: #004a2c;
  --btn-fill-color: #f6f2ea;
}

.btn--ghost-light {
  --btn-color: #fff;
  --btn-border: rgba(255, 255, 255, 0.6);
  --btn-fill: var(--cream-btn);
  --btn-fill-color: #004a2c;
}

.btn:hover,
.btn:focus-visible {
  border-color: var(--btn-fill);
}

.site-header__book:hover,
.site-header__book:focus-visible {
  background: var(--rosso);
  border-color: var(--rosso);
  color: #004a2c;
}

.mobile-dock__item--primary {
  background: var(--rosso);
  color: #004a2c;
}

/* Side cards (booking, events, takeaway): the photo runs edge to edge across
   the top of the dark card, so it never sits inside a thick black frame. */
.booking__card {
  --card-pad: clamp(28px, 3vw, 40px);
  overflow: hidden;
}

.booking__card .booking__photo {
  margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) 4px;
}

.booking__card .booking__photo img {
  border-radius: 0;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

/* Menu carousel: a taller photo strip (about 1.42:1) so the whole dish shows. */
.explore__card {
  grid-template-rows: 280px minmax(0, 1fr);
  height: clamp(510px, 41vw, 560px);
}

.explore__media img {
  object-position: center;
}

/* The brush script runs wider than the old serif accent: keep the plate's
   signature line small and inside the plate's well. */
.journey__signature {
  max-width: 26ch;
  margin-left: auto;
  margin-right: auto;
  font-size: clamp(20px, 1.7vw, 26px);
  line-height: 1.15;
}

.skybar__arch figcaption {
  font-size: clamp(22px, 1.9vw, 30px);
}

/* Brush accent lines never shrink below a legible size, and keep clear of
   the paragraph that follows. */
.script {
  font-size: clamp(22px, 0.5em, 64px);
  margin-bottom: 0.25em;
}

.section-title .script,
.page-hero__title .script {
  margin-top: 0.12em;
  padding-left: 0.6em;
}

/* pages.css pins accent lines inside headings to 11px (the old small-caps
   style); the brush hand needs real size. Same specificity, loaded later. */
:is(.section-title, .page-hero__title, .journey__about-title, .atmos__title, .reserve__title,
    .explore__title, .signatures__title, .occasions__title, .cta-band__inner .section-title) .script {
  font-size: clamp(22px, 0.42em, 46px);
  letter-spacing: 0.01em;
  text-transform: none;
}

html[data-lang="zh"] :is(.section-title, .page-hero__title, .journey__about-title, .atmos__title, .reserve__title,
    .explore__title, .signatures__title, .occasions__title) .script {
  font-size: clamp(13px, 0.3em, 18px);
  letter-spacing: 0.2em;
}

/* ==========================================================================
   Round 3 — heading scale. Bodoni Moda in capitals reads far larger than
   Italiana did at the same size, so every display heading is scaled down.
   ========================================================================== */
.golden__copy h2 { font-size: clamp(36px, 4.6vw, 68px); }
.page-hero__title { font-size: clamp(34px, 4vw, 58px); }
.journey__about-title { font-size: clamp(30px, 3vw, 44px); }
.journey__title { font-size: clamp(24px, 2.2vw, 32px); }
.atmos__title { font-size: clamp(30px, 2.8vw, 40px); }
.explore__title { font-size: clamp(28px, 2.4vw, 36px); }
.skybar__title { font-size: clamp(38px, 3.6vw, 52px); }
.section-title { font-size: clamp(26px, 2.5vw, 38px); }
.occasions__title { font-size: clamp(28px, 2.5vw, 36px); }
.signatures__title { font-size: clamp(24px, 2.1vw, 30px); }
.reserve__title { font-size: clamp(30px, 3vw, 44px); }
.cta-band .section-title { font-size: clamp(26px, 2.6vw, 38px); }
.offers__title, .explore__card-title { font-size: clamp(18px, 1.5vw, 22px); }
.hero__mobile-title { font-size: clamp(30px, 9vw, 40px); }

/* ==========================================================================
   Round 3 — legibility on every photo cover: a deep pool of shade behind the
   words, a darker overall gradient, and a firm text shadow.
   ========================================================================== */
.page-hero__media {
  filter: brightness(0.62) saturate(0.88);
}

.page-hero::before {
  background:
    radial-gradient(ellipse 52% 48% at 50% 50%, rgba(5, 16, 12, 0.62) 0%, rgba(5, 16, 12, 0.25) 60%, rgba(5, 16, 12, 0) 100%),
    linear-gradient(180deg, rgba(5, 16, 12, 0.72) 0%, rgba(5, 16, 12, 0.5) 45%, rgba(5, 16, 12, 0.72) 100%);
}

.page-hero__title,
.page-hero__lede,
.page-hero .kicker,
.golden__copy,
.atmos__content,
.reserve__content,
.hero__corner,
.hero__mobile-title,
.occasions__caption {
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.6);
}

.golden__shade {
  background:
    radial-gradient(ellipse 48% 42% at 50% 50%, rgba(5, 16, 12, 0.7) 0%, rgba(5, 16, 12, 0.2) 70%, rgba(5, 16, 12, 0) 100%),
    linear-gradient(180deg, rgba(5, 16, 12, 0.45), rgba(5, 16, 12, 0.6));
}

.atmos::before {
  background:
    radial-gradient(ellipse 50% 40% at 50% 38%, rgba(5, 16, 12, 0.7) 0%, rgba(5, 16, 12, 0) 100%),
    linear-gradient(180deg, rgba(5, 16, 12, 0.55) 0%, rgba(5, 16, 12, 0.3) 45%, rgba(5, 16, 12, 0) 70%);
}

.reserve__shade {
  background:
    radial-gradient(ellipse 50% 46% at 50% 50%, rgba(5, 16, 12, 0.72) 0%, rgba(5, 16, 12, 0.3) 70%, rgba(5, 16, 12, 0.15) 100%),
    linear-gradient(180deg, rgba(5, 16, 12, 0.5), rgba(5, 16, 12, 0.65));
}

.hero::after {
  background: radial-gradient(ellipse 50% 50% at 50% 55%, rgba(5, 16, 12, 0.6) 0%, rgba(5, 16, 12, 0) 100%);
}

/* ==========================================================================
   Typography v4 (client feedback): accent lines are handwriting, as on pier88
   (Golden Hopes), but legible: Ms Madi, a natural pen hand with clean letter
   forms, tilted slightly, bronze on paper and cream on photographs. Always
   centred under its title where the title is centred.
   ========================================================================== */
:root {
  --font-script: "Ms Madi", "Noto Serif SC", cursive;
}

.script,
.journey__signature,
.skybar__arch figcaption,
.signatures__note,
.golden__copy > span,
.site-menu__tile-label em {
  font-family: var(--font-script);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
  line-height: 1.15;
  text-transform: none;
  transform: rotate(-2deg);
}

:is(.section-title, .page-hero__title, .explore__title, .occasions__title, .signatures__title, .reserve__title, .atmos__title, .journey__title, .skybar__title) .script {
  display: block;
  font-size: clamp(26px, 0.62em, 40px);
  margin-top: 0.3em;
}

.journey__title .script {
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.golden__copy > span,
.skybar__arch figcaption,
.journey__signature,
.signatures__note {
  font-size: clamp(26px, 2.2vw, 34px);
}

.site-menu__tile-label em {
  display: block;
  margin-top: 6px;
  font-size: 26px;
}

.script,
.journey__signature,
.signatures__note,
.skybar__arch figcaption {
  color: var(--mustard-deep);
}

:is(.atmos, .golden, .reserve, .page-hero--photo, .cta-band, .site-menu, .site-footer, .hero) .script,
.golden__copy > span,
.site-menu__tile-label em {
  color: #f1e3c2;
}

html[data-lang="zh"] .script,
html[data-lang="zh"] .journey__signature,
html[data-lang="zh"] .skybar__arch figcaption,
html[data-lang="zh"] .signatures__note,
html[data-lang="zh"] .golden__copy > span,
html[data-lang="zh"] .site-menu__tile-label em {
  font-family: "Noto Serif SC", serif;
  font-size: clamp(15px, 1.2vw, 19px);
  letter-spacing: 0.12em;
  transform: none;
}

/* ==========================================================================
   Golden Bamboo additions
   ========================================================================== */

/* Header: the traced logo disc (arched name over the bamboo ring), one ink. */
.site-header .site-header__logo .logo-full .wordmark,
.site-header .site-header__logo .logo-icon .roof-mark {
  display: block;
  width: 100px;
  height: auto;
  max-width: none;
  color: #f3ecdc;
  filter: drop-shadow(0 3px 12px rgba(0, 0, 0, 0.35));
}

.site-header .site-header__logo .logo-icon .roof-mark {
  width: 82px;
}

@media (max-width: 760px) {
  .site-header .site-header__logo .logo-full .wordmark,
  .site-header .site-header__logo .logo-icon .roof-mark {
    width: 74px;
  }
}

.site-header::before {
  background-color: rgba(23, 33, 22, 0.93);
}

.site-footer__logo .wordmark {
  width: 150px;
}

/* Journey: the full-colour logo disc beside the turning plate. */
.journey__emblem {
  width: 170px;
}

/* Explore cards: the owner's food shots are portrait, so the photo strip is
   raised to ~1.1:1 and every plate shows whole (raw/make-images.py EX). */
.explore__card {
  grid-template-rows: 360px minmax(0, 1fr);
  height: clamp(600px, 46vw, 650px);
}

@media (max-width: 760px) {
  .explore__card {
    grid-template-rows: calc((100vw - 80px) / 1.1) minmax(0, 1fr);
    height: calc((100vw - 80px) / 1.1 + 236px);
  }
}

/* Signatures: tall frames (0.8:1, cut to match) so each whole plate shows. */
.signatures__visuals {
  width: min(28vw, 420px);
  height: calc(min(28vw, 420px) / 0.8);
}

.signatures__visual img {
  object-fit: cover;
}

@media (max-width: 760px) {
  .signatures__visuals {
    width: min(80vw, 380px);
    height: calc(min(80vw, 380px) / 0.8);
    margin: 0 auto;
  }
}

/* Phones: longer Golden Bamboo lines must wrap instead of pushing the page sideways. */
@media (max-width: 760px) {
  .explore__kicker,
  .atmos__title,
  .atmos__title > span,
  .signatures__name {
    white-space: normal;
    max-width: calc(100vw - 32px);
  }

  .atmos__title {
    padding-inline: 16px;
    text-align: center;
  }
}

/* Footer tagline: the body face, light and small, not the display serif. */
.site-footer__tagline {
  max-width: 380px;
  font-family: var(--font-body, "Jost", sans-serif);
  font-weight: 300;
  font-size: 15px;
  line-height: 1.75;
  letter-spacing: 0.01em;
  color: rgba(244, 238, 227, 0.78);
}

/* No native scrollbar strip (Lenis drives the scroll, as on pier88). */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* Overlay menu: the link column may scroll on short windows, but without a
   grey native scrollbar strip. */
.site-menu__panel {
  scrollbar-width: none;
}

.site-menu__panel::-webkit-scrollbar {
  display: none;
  width: 0;
}

/* Hero dish (Bamboo Big Breakfast): sits lower and a touch smaller so only the
   top of the plate grazes the arc title instead of covering the words. */
@media (min-width: 761px) {
  .hero__dish {
    --dish: min(39vw, 560px);
    width: var(--dish);
    height: var(--dish);
    /* the arc's centre baseline sits 2.3% of the title box above its middle
       (44%); the plate's top edge (3% padding in the cut-out) lands 8px
       below that baseline, just grazing the letters */
    top: calc(44% - 0.023 * clamp(230px, 30vw, 400px) + 8px - 0.03 * var(--dish));
    bottom: auto;
  }
}

@media (min-width: 761px) and (max-width: 1280px) {
  .hero__dish {
    top: calc(34% - 0.023 * clamp(230px, 30vw, 400px) + 8px - 0.03 * var(--dish));
  }
}


/* ==========================================================================
   Morel additions (override the inherited engine rules above)
   ========================================================================== */

/* Header: the MOREL wordmark from their sign; the medallion once scrolled. */
.site-header .site-header__logo .logo-full .wordmark {
  width: 150px;
  color: #f6f1e6;
}

.site-header .site-header__logo .logo-icon .roof-mark {
  width: 34px;
  color: #f6f1e6;
}

@media (max-width: 760px) {
  .site-header .site-header__logo .logo-full .wordmark { width: 118px; }
  .site-header .site-header__logo .logo-icon .roof-mark { width: 28px; }
}

.site-header::before {
  background-color: rgba(0, 76, 45, 0.97);
}

.site-footer__logo .wordmark {
  width: 220px;
  color: #f6f1e6;
}

.notfound__emblem .wordmark {
  color: var(--ink);
}

/* Hero: the Morel bungalow, a dry-aged fish plate rising from the edge. */
.hero {
  background:
    radial-gradient(ellipse 70% 60% at 50% 78%, rgba(176, 106, 56, 0.16) 0%, rgba(20, 14, 11, 0) 70%),
    #0b1f18;
}

.hero::before {
  background:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(8, 22, 17, 0.32) 0%, rgba(8, 22, 17, 0) 100%),
    linear-gradient(180deg, rgba(8, 22, 17, 0.66) 0%, rgba(8, 22, 17, 0.4) 38%, rgba(8, 22, 17, 0.5) 72%, rgba(8, 22, 17, 0.8) 100%);
}

.hero__bg {
  object-position: center 60%;
  filter: saturate(0.95) brightness(0.95);
}

.hero__dish {
  filter: drop-shadow(0 28px 40px rgba(20, 10, 6, 0.55)) drop-shadow(0 6px 12px rgba(20, 10, 6, 0.4));
}

@media (min-width: 761px) {
  .hero__dish {
    --dish: min(34vw, 500px);
  }
}

@media (max-width: 760px) {
  .hero__dish {
    width: 78vw;
  }
}

/* Journey: the morel medallion beside the turning plate. */
.journey__emblem,
.journey__emblem .emblem {
  color: var(--ink);
}

.journey__emblem {
  width: 90px;
}

/* Buttons and kickers keep the bow-red as their deep accent on paper. */
.kicker {
  color: #a8812f;
}


/* ==========================================================================
   House rules carried over from earlier client feedback
   ========================================================================== */

/* 1. One hover colour for every button: the terracotta of the floor tiles, white
   text. It never equals any button's resting fill (emerald, gold, white or
   outline), so two neighbouring buttons never clash on hover. */
.btn--gold,
.btn--ink,
.btn--light,
.btn--ghost,
.btn--ghost-light {
  --btn-fill: var(--rosso);
  --btn-fill-color: #fff;
}

.site-header__book:hover,
.site-header__book:focus-visible {
  background: var(--rosso);
  border-color: var(--rosso);
  color: #fff;
}

/* 2. Button labels never inherit the photo-text shadow (it showed as a
   doubled "ghost" label on photo sections). */
.btn,
.btn *,
.mobile-dock__item,
.mobile-dock__item *,
.site-header__book,
.site-header__book * {
  text-shadow: none !important;
}

.mobile-dock__item--primary {
  background: var(--ink);
  color: #fff;
}

/* 3. Inner-page cover banners: the cafe's photos are mostly white walls, so
   the shade is deep enough that the title and text always read. */
.page-hero__media {
  filter: brightness(0.5) saturate(0.85);
}

.page-hero::before {
  background:
    radial-gradient(ellipse 55% 50% at 50% 50%, rgba(20, 13, 10, 0.55) 0%, rgba(20, 13, 10, 0.2) 70%, rgba(20, 13, 10, 0) 100%),
    linear-gradient(180deg, rgba(20, 13, 10, 0.72) 0%, rgba(20, 13, 10, 0.58) 45%, rgba(20, 13, 10, 0.78) 100%);
}

/* 4. Hero: the dotted plate is shown at a calm size with room around it, and
   its lower edge always stays behind the front wave. */
@media (min-width: 761px) {
  .hero__dish {
    --dish: min(30vw, 440px);
  }
}

@media (max-width: 760px) {
  .hero__dish {
    width: 70vw;
  }
}

/* ==========================================================================
   Hero plate as on pier88 — large, its lower part sunk
   behind the front wave so only the top of the plate shows under the arc.
   ========================================================================== */
@media (min-width: 761px) {
  .hero .hero__dish {
    --dish: min(54vw, 780px);
    width: var(--dish);
    height: var(--dish);
    top: auto;
    bottom: calc(var(--wave-front-h) * -1 - var(--dish) * 0.4);
  }
}

@media (max-width: 760px) {
  .hero .hero__dish {
    width: 108vw;
    height: 108vw;
    top: auto;
    bottom: calc(var(--wave-front-h) * -1 - 40vw);
  }
}

/* ==========================================================================
   Client revision v1 (2026-11-13): the house colours are Rolex green + gold.
   Dark bands become Rolex green (#004a2c family); display titles and the
   logo turn gold; the menu and "made in house" sections sit on green.
   ========================================================================== */
:root {
  --rolex: #004a2c;
  --rolex-deep: #003a22;
  --rolex-night: #002616;
  --gold-bright: #d2b061;
  --night: #002616;
  --night-2: #003a22;
  --royal: #004a2c;
  --forest: #004a2c;
  --ink: #0a2e1f;
  --ink-soft: rgba(10, 46, 31, 0.84);
  --ink-muted: rgba(10, 46, 31, 0.62);
  --gold: #b48d3a;
  --gold-deep: #8f6c22;
  --mustard: #c9a24f;
  --mustard-deep: #a37e2c;
}

/* Header + footer: Rolex green, gold logo */
.site-header::before { background-color: rgba(0, 66, 39, 0.97); }
.site-header .site-header__logo .logo-full .wordmark,
.site-header .site-header__logo .logo-icon .roof-mark,
.site-footer__logo .wordmark { color: var(--gold-bright); }
.site-footer {
  background:
    radial-gradient(circle at 85% 0%, rgba(210, 176, 97, 0.14), transparent 55%),
    var(--rolex-deep);
}
.site-footer__label { color: var(--gold-bright); }

/* Display titles in gold */
.journey__about-title, .journey__title, .explore__title, .offers__title,
.occasions__title, .skybar__title, .signatures__title,
.menu-group__title, .menu-section__title, .facilities__title, .book-route__title,
.outlet-card__title, .order-card__title {
  color: var(--gold-deep);
}

/* Green bands with gold type */
.explore, .sourcing { background: var(--rolex); color: rgba(255, 255, 255, 0.86); }
.explore .explore__title, .sourcing .sourcing__title, .sourcing h2 { color: var(--gold-bright); }
.explore .kicker, .sourcing .kicker, .explore .script, .sourcing .script { color: var(--gold-bright); }
.explore p:not(.explore__card-text):not(.explore__card-meta), .sourcing p, .sourcing li, .sourcing dd, .sourcing dt { color: rgba(255, 255, 255, 0.84); }
.explore .text-link, .sourcing .text-link { color: var(--gold-bright); border-color: currentColor; }

/* menu cards stay solid ivory on the green band, with gold-ink titles */
.explore .explore__card { background: #f7f2e7; opacity: 0.88; }
.explore .explore__card.is-active { opacity: 1; }
.explore .explore__card.is-prev { opacity: 0; }
.explore .explore__card-title { color: var(--gold-deep); }
.explore .explore__card-text, .explore .explore__card-meta { color: var(--ink-soft); }
.explore .explore__card .text-link { color: var(--rolex); }

/* Footer: the full Morel lockup and the parking note */
.site-footer__logo .lockup { display: block; width: clamp(220px, 24vw, 300px); height: auto; }
.site-footer__parking { margin-top: 10px; color: var(--gold-bright); font-size: 0.92em; }

/* Reservation bands: Rolex green with a gold title */
.cta-band--plain { background: linear-gradient(140deg, var(--rolex-night) 0%, var(--rolex) 100%); }

/* Phone dock: Rolex green, gold for the Reserve button */
@media (max-width: 760px) {
  .mobile-dock { background: var(--rolex-deep) !important; }
  .mobile-dock__item { color: #fff; }
  .mobile-dock__item--primary { background: var(--gold) !important; color: var(--rolex-night) !important; }
}

/* Hero dish (client revision v1): the claypot photo is 750 px wide, so it is
   shown no larger than the file can carry sharply. */
@media (min-width: 761px) {
  .hero .hero__dish { --dish: min(54vw, 780px); bottom: calc(var(--wave-front-h) * -1 - var(--dish) * 0.4); }
}
@media (max-width: 760px) {
  .hero .hero__dish { width: 108vw; height: 108vw; bottom: calc(var(--wave-front-h) * -1 - 40vw); }
}

/* Reserve: an even, neutral shade over the photo — no darker pool in the middle */
.reserve__shade {
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(12, 10, 8, 0.45) 0%, rgba(12, 10, 8, 0) 100%),
    linear-gradient(180deg, rgba(12, 10, 8, 0.55), rgba(12, 10, 8, 0.62));
}

/* Client revision v2 — owner prefers the menu without dish photos (tidier).
   Photos stay listed in js/menu-data.js; delete this block to show them again. */
.menu-item.has-photo { grid-template-columns: minmax(0, 1fr); }
.menu-item__thumb,
.menu-preview { display: none !important; }
.menu-item.has-photo .menu-item__name::before { display: none; }