/* =========================================================================
   FU MANCHU ORIENTAL — site styles
   Edit the tokens in :root to re-theme the whole site.
   ========================================================================= */

:root {
  /* Colours */
  --bg:        #060e0c;   /* page background            */
  --bg-2:      #0a1512;   /* alternating section bg     */
  --bg-3:      #030a08;   /* footer / deepest bg        */
  --panel:     #0d1a17;   /* cards & panels             */
  --panel-2:   #10201c;   /* raised card               */
  --border:    #1b2e2a;   /* hairline borders          */
  --text:      #e8f0ee;   /* primary text              */
  --muted:     #8aada7;   /* secondary text            */
  --accent:    #00998a;   /* brand teal                */
  --accent-2:  #00766a;   /* darker teal (hover)       */
  --gold:      #c9a86a;   /* subtle warm accent        */

  /* Type */
  --serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Manrope", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

  /* Layout */
  --maxw: 1200px;
  --gutter: clamp(1.25rem, 5vw, 3rem);
  --section-y: clamp(4rem, 10vw, 8rem);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
ul { list-style: none; }

/* ---------- helpers ---------- */
.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section-y); }
.section--alt { background: var(--bg-2); }
.center { text-align: center; }
.eyebrow {
  font-family: var(--sans);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
  margin-bottom: 1.25rem;
}
.section-title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(2.1rem, 5.5vw, 3.6rem);
  line-height: 1.05;
  letter-spacing: .01em;
}
.lead { color: var(--muted); font-size: 1.05rem; max-width: 60ch; }
.muted { color: var(--muted); }
.divider-note {
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: var(--muted); text-align: center; padding-block: 1.5rem;
  border-block: 1px solid var(--border);
}

/* ---------- buttons ---------- */
.btn {
  --btn-bg: var(--accent);
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .95rem 1.75rem;
  font-size: .78rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  background: var(--btn-bg); color: #fff;
  border: 1px solid var(--btn-bg);
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.btn:hover { background: var(--accent-2); border-color: var(--accent-2); transform: translateY(-1px); }
.btn--outline { background: transparent; color: var(--text); border-color: var(--border); }
.btn--outline:hover { background: transparent; border-color: var(--accent); color: var(--accent); transform: translateY(-1px); }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .5; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- header ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s ease, border-color .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(6,14,12,.85);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border);
}
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  padding-block: 1.1rem;
}
.brand { display: flex; align-items: center; gap: .65rem; line-height: 1; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand b {
  font-family: var(--serif); font-weight: 600; font-size: 1.3rem;
  letter-spacing: .12em; text-transform: uppercase;
}
.brand span {
  font-size: .58rem; font-weight: 600; letter-spacing: .34em;
  text-transform: uppercase; color: var(--muted); margin-top: .3rem;
}
.nav { display: flex; align-items: center; gap: 2rem; }
.nav a {
  font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
  color: var(--muted); transition: color .2s ease;
}
.nav a:hover, .nav a.is-current { color: var(--text); }
.nav .btn { color: var(--text); padding: .7rem 1.2rem; }
.nav .btn:hover { color: #fff; }
.nav-toggle { display: none; background: none; border: 0; width: 40px; height: 40px; position: relative; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; position: absolute; left: 8px; width: 24px; height: 2px; background: var(--text);
  transition: transform .25s ease, opacity .2s ease;
}
.nav-toggle span { top: 19px; }
.nav-toggle span::before { top: -7px; }
.nav-toggle span::after { top: 7px; }
.nav-open .nav-toggle span { background: transparent; }
.nav-open .nav-toggle span::before { transform: translateY(7px) rotate(45deg); }
.nav-open .nav-toggle span::after { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav-toggle { display: block; z-index: 101; }
  .nav {
    position: fixed; inset: 0; flex-direction: column; justify-content: center; gap: 1.75rem;
    background: rgba(6,14,12,.98); backdrop-filter: blur(6px);
    transform: translateX(100%); transition: transform .3s ease;
  }
  .nav a { font-size: 1rem; }
  .nav-open .nav { transform: translateX(0); }
}

/* ---------- image placeholder pattern ----------
   <div class="img" data-label="hero.jpg"><img src="assets/images/hero.jpg" alt="" onerror="this.remove()"></div>
   Drop a real file at that path and it covers the label automatically.        */
.img {
  position: relative; overflow: hidden;
  background: linear-gradient(135deg, var(--panel-2), var(--border));
  display: grid; place-items: center; min-height: 220px;
}
.img::before {
  content: attr(data-label);
  color: rgba(138,173,167,.4);
  font: 600 .68rem/1.5 var(--sans); letter-spacing: .18em; text-transform: uppercase;
  text-align: center; padding: 1rem;
}
.img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.img--round { border-radius: 2px; }

/* ---------- hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; }
.hero__bg { position: absolute; inset: 0; z-index: -2; }
.hero__bg::before { /* photo stand-in */
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 70% 30%, #14201d 0%, #060e0c 70%);
}
.hero__bg > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* The hero photo lives inside a .img wrapper, so it is this selector that
   actually applies. Sitting the crop higher up the frame brings the quesadilla
   and the red bowl into the band instead of the bare table between dishes. */
.hero__bg .img > img { object-position: center 32%; }
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(90deg, rgba(6,14,12,.92) 0%, rgba(6,14,12,.55) 45%, rgba(6,14,12,.25) 100%),
    linear-gradient(0deg, rgba(6,14,12,.9) 0%, rgba(6,14,12,0) 40%);
}
.hero__inner { padding-block: 8rem 6rem; max-width: 760px; }
.hero h1 {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(3rem, 10vw, 6.5rem); line-height: .98; letter-spacing: .01em;
  margin: .5rem 0 1.75rem;
}
.hero h1 em { font-style: normal; color: var(--accent); display: block; }
.hero p { color: var(--muted); font-size: 1.1rem; max-width: 46ch; margin-bottom: 2.5rem; }
.hero__meta {
  position: absolute; right: var(--gutter); bottom: 2.5rem; text-align: right;
  font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); line-height: 2;
}
@media (max-width: 700px) { .hero__meta { display: none; } }

/* ---------- generic two-column ---------- */
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; }
.split--reverse > :first-child { order: 2; }
@media (max-width: 850px) { .split, .split--reverse { grid-template-columns: 1fr; } .split--reverse > :first-child { order: 0; } }
.stack > * + * { margin-top: 1.25rem; }

/* ---------- stat blocks ---------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border); border: 1px solid var(--border); }
.stats--3 { grid-template-columns: repeat(3, 1fr); }
.stat { background: var(--bg); padding: 2rem 1.25rem; text-align: center; }
.stat b { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3rem); font-weight: 500; display: block; color: var(--text); }
.stat span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 700px) { .stats, .stats--3 { grid-template-columns: repeat(2, 1fr); } }

/* mini stat cards (story section) */
.chips { display: grid; gap: 1rem; }
.chip { border: 1px solid var(--border); background: var(--panel); padding: 1.5rem; display: flex; gap: 1rem; align-items: center; }
.chip b { font-family: var(--serif); font-size: 1.9rem; font-weight: 500; color: var(--accent); min-width: 2.5rem; }
.chip span { font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }

/* ---------- card grid ---------- */
.grid { display: grid; gap: 1.25rem; }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 950px) { .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 850px) { .grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 650px) { .grid--4, .grid--2 { grid-template-columns: 1fr; } }

.card { border: 1px solid var(--border); background: var(--panel); padding: 2rem; height: 100%; display: flex; flex-direction: column; }
.card h3 { font-family: var(--serif); font-size: 1.5rem; font-weight: 500; margin-bottom: .75rem; }
.card p { color: var(--muted); font-size: .95rem; flex: 1; }
.card .more { margin-top: 1.5rem; font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.card--icon .ico { color: var(--accent); font-size: 1.1rem; margin-bottom: 1rem; }
.card-media { margin: -2rem -2rem 1.5rem; aspect-ratio: 16 / 10; min-height: 0; }
/* ---------- horizontal card scroller (homepage happenings) ---------- */
.hscroll {
  display: flex; gap: 1.25rem; margin-top: 2.75rem;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
  /* bleed to the viewport edge so a card peeks and the swipe reads as available */
  margin-inline: calc(var(--gutter) * -1);
  padding: .25rem var(--gutter) 1.5rem;
  scroll-padding-inline: var(--gutter);
  scrollbar-color: var(--border) transparent;
}
.hscroll > .card { flex: 0 0 clamp(266px, 78vw, 320px); scroll-snap-align: start; height: auto; }
.hscroll::-webkit-scrollbar { height: 6px; }
.hscroll::-webkit-scrollbar-track { background: transparent; }
.hscroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.hscroll:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.hscroll__hint {
  margin-top: .5rem; font-size: .66rem; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}
@media (min-width: 1240px) { .hscroll__hint { display: none; } }

.card--soon { border-style: dashed; background: transparent; align-items: center; justify-content: center; text-align: center; }
.card--soon .ico { font-size: 1.6rem; color: var(--accent); margin-bottom: .75rem; }
.card--soon h3 { color: var(--muted); }

/* ---------- dish / menu list ---------- */
.menu-block { margin-top: 3rem; }
.menu-block > h3 {
  font-family: var(--serif); font-size: 2rem; font-weight: 500;
  padding-bottom: 1rem; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem;
}
.menu-block > p.note { color: var(--muted); font-size: .9rem; margin: -.75rem 0 1.5rem; }
.dish { padding: 1.25rem 0; border-bottom: 1px solid var(--border); }
.dish:last-child { border-bottom: 0; }
.dish__head { display: flex; justify-content: space-between; gap: 1.5rem; align-items: baseline; }
.dish__head h4 { font-family: var(--serif); font-size: 1.3rem; font-weight: 500; }
.dish__price { color: var(--text); font-weight: 600; white-space: nowrap; font-size: .95rem; }
.dish__tag { display: inline-block; font-size: .6rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); margin-top: .35rem; }
.dish__diet { display: inline-block; font-size: .62rem; letter-spacing: .15em; color: var(--muted); margin-top: .35rem; }
.dish p { color: var(--muted); font-size: .92rem; margin-top: .4rem; max-width: 65ch; }
.dish .pairing { color: var(--gold); font-size: .8rem; font-style: italic; margin-top: .5rem; }

/* category quick-nav (menu / drinks) */
.cat-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2.5rem; }
.cat-nav a {
  font-size: .66rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--border); padding: .55rem .9rem; transition: .2s;
}
.cat-nav a:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- feature dish list (home) ---------- */
.features { margin-top: 3rem; display: grid; gap: 0; }

/* ---------- pull quote ---------- */
.quote { text-align: center; padding-block: var(--section-y); }
.quote blockquote {
  font-family: var(--serif); font-weight: 500;
  font-size: clamp(1.8rem, 5vw, 3rem); line-height: 1.2; max-width: 20ch; margin: 1rem auto 1.5rem;
}
.quote cite { font-style: normal; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }

/* ---------- reviews ---------- */
.stars { color: var(--accent); letter-spacing: .3em; font-size: 1rem; }
.review { border: 1px solid var(--border); background: var(--panel); padding: 2rem; }
.review p { font-family: var(--serif); font-size: 1.25rem; line-height: 1.4; margin: 1rem 0 1.5rem; }
.review span { font-size: .66rem; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); }

/* ---------- reservation / enquiry form ---------- */
.form { display: grid; gap: 1.1rem; }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
@media (max-width: 600px) { .form .row { grid-template-columns: 1fr; } }
.field { display: grid; gap: .4rem; }
.field label { font-size: .64rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  padding: .85rem .9rem; font: inherit; font-size: .95rem; border-radius: 0;
  transition: border-color .2s ease;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); }
.field textarea { resize: vertical; min-height: 90px; }

/* contact info list */
.info { display: grid; gap: 1.75rem; }
.info h4 { font-size: .66rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: .5rem; }
.info p { color: var(--muted); }

/* ---------- instagram strip ---------- */
.ig-head { text-align: center; margin-bottom: 2rem; }
.ig-head span { font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); }
.ig-head b { display: block; font-family: var(--serif); font-size: 1.8rem; font-weight: 500; margin: .5rem 0; }
.ig-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: .5rem; }
.ig-grid .img { min-height: 0; aspect-ratio: 1; }
.ig-grid .img::before { font-size: .55rem; }
@media (max-width: 900px) { .ig-grid { grid-template-columns: repeat(3, 1fr); } }

/* Live Instagram posts (replace the static tiles when the feed loads) */
.ig-post { text-decoration: none; cursor: pointer; }
.ig-post > img { transition: transform .45s ease, opacity .3s ease; }
.ig-post:hover > img, .ig-post:focus-visible > img { transform: scale(1.06); opacity: .8; }
.ig-post:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
/* small play triangle marks reels — covers stay static by design */
.ig-post--reel::after {
  content: ""; position: absolute; top: .5rem; right: .5rem; z-index: 2;
  width: 0; height: 0;
  border-left: 9px solid rgba(255,255,255,.95);
  border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.55));
}
@media (prefers-reduced-motion: reduce) {
  .ig-post > img { transition: opacity .3s ease; }
  .ig-post:hover > img, .ig-post:focus-visible > img { transform: none; }
}

/* ---------- gift card cross-sell (booking page) ---------- */
.giftcard-cta {
  display: grid; grid-template-columns: .85fr 1fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: stretch;
  border: 1px solid var(--border); background: var(--panel);
  border-radius: 10px; overflow: hidden;
}
/* Stretching rather than centring means the photo meets the top, bottom and
   left edges of the panel instead of floating with gaps above and below. */
.giftcard-cta__media { min-height: 0; height: 100%; }
.giftcard-cta__body { padding: clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) clamp(1.5rem,3vw,2.5rem) 0; }
@media (max-width: 780px) {
  .giftcard-cta { grid-template-columns: 1fr; gap: 0; }
  .giftcard-cta__media { aspect-ratio: 16 / 9; height: auto; }
  .giftcard-cta__body { padding: 1.75rem; }
}

/* ---------- partners ---------- */
.partners { border-top: 1px solid var(--border); margin-top: 3rem; padding-top: 2.5rem; text-align: center; }
.partners__label { display: block; font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); margin-bottom: 1.5rem; }
.partners__grid { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 1rem; }
.partners__grid a { display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 6px; padding: .7rem 1.5rem; height: 42px; opacity: .92; transition: opacity .2s ease, transform .2s ease; }
.partners__grid a:hover { opacity: 1; transform: translateY(-2px); }
.partners__grid img { max-height: 20px; max-width: 120px; width: auto; height: auto; display: block; }
.partners__grid svg { height: 18px; width: auto; color: #0a0a0a; }

/* ---------- footer ---------- */
.site-footer { background: var(--bg-3); border-top: 1px solid var(--border); padding-block: 4rem 2rem; }
.footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
@media (max-width: 800px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { font-size: .64rem; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--accent); margin-bottom: 1rem; }
.site-footer p, .site-footer a { color: var(--muted); font-size: .9rem; line-height: 1.9; }
.site-footer a:hover { color: var(--text); }
.footer-bottom {
  margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border);
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem;
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}

/* ---------- page hero (interior pages) ---------- */
.page-hero { position: relative; padding-block: 12rem 4rem; min-height: 560px; border-bottom: 1px solid var(--border); background: var(--bg-2); overflow: hidden; }
.page-hero > .container { position: relative; z-index: 2; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; }
/* --hero-pos is set per page on the .page-hero__bg element, so each photo
   can pick its own vertical anchor without re-cropping the file. */
.page-hero__bg > img { width: 100%; height: 100%; object-fit: cover; object-position: var(--hero-pos, center); display: block; }
.page-hero__scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,14,12,.95) 0%, rgba(6,14,12,.8) 45%, rgba(6,14,12,.55) 100%),
    linear-gradient(0deg, rgba(6,14,12,.94) 0%, rgba(6,14,12,.18) 58%);
}
.page-hero h1 { font-family: var(--serif); font-weight: 500; font-size: clamp(2.6rem, 8vw, 5rem); line-height: 1; margin: .5rem 0 1.25rem; }
.page-hero p { color: var(--muted); max-width: 55ch; }
@media (max-width: 700px) {
  .page-hero { min-height: 460px; }
  .page-hero__scrim { background: linear-gradient(0deg, rgba(6,14,12,.95) 0%, rgba(6,14,12,.72) 60%, rgba(6,14,12,.6) 100%); }
}

/* ---------- scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }