/* =========================================================
   LOCALS.HDY — Design System (v2 — multi-page)
   Red brick & clay palette · Ogg display · Cream paper
   ========================================================= */

@font-face { font-family: 'Ogg'; src: url('fonts/Ogg-Thin.ttf') format('truetype'); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ogg'; src: url('fonts/Ogg-ThinItalic.ttf') format('truetype'); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: 'Ogg'; src: url('fonts/Ogg-Light.ttf') format('truetype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ogg'; src: url('fonts/Ogg-LightItalic.ttf') format('truetype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Ogg'; src: url('fonts/Ogg-Regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ogg'; src: url('fonts/Ogg-Medium.ttf') format('truetype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Ogg'; src: url('fonts/Ogg-Bold.ttf') format('truetype'); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  --paper:      #F2EBDE;
  --paper-2:    #EADFCB;
  --paper-3:    #E2D2B6;
  --clay:       #C25C3A;
  --brick:      #9E3A22;
  --brick-deep: #6E2614;
  --ink:        #1C1410;
  --ink-2:      #3A2C24;
  --sun:        #E8552F;
  --gold:       #C9962F;
  --moss:       #4D5A3A;
  --sea:        #2C4E68;

  --serif: 'Ogg', 'Times New Roman', serif;
  --sans:  'Helvetica Neue', system-ui, sans-serif;

  --pad:  clamp(20px, 5vw, 80px);
  --pad2: clamp(32px, 6vw, 90px);  /* tightened — was 140px max */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

body {
  background-image:
    radial-gradient(ellipse at 30% 20%, rgba(155, 90, 60, 0.04) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 80%, rgba(60, 40, 30, 0.04) 0%, transparent 50%);
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }

/* === TYPE ============================================================= */

h1, h2, h3, h4 { font-family: var(--serif); font-weight: 300; line-height: 0.95; letter-spacing: -0.02em; }
.serif { font-family: var(--serif); }
.italic { font-style: italic; }
.thin   { font-weight: 100; }
.light  { font-weight: 300; }

/* ---- Eyebrow: redesigned — line · label · italic Thai ---- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brick);
  transition: color 0.4s, letter-spacing 0.5s;
}
.eyebrow::before {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 0;
  border-top: 1.5px solid currentColor;
  opacity: 0.7;
}
/* dot separator is replaced by the ::before rule — hide it */
.eyebrow .dot { display: none; }
/* Thai label: italic serif, lighter */
.eyebrow .dot + span {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  text-transform: none;
  letter-spacing: 0.04em;
  font-size: 12px;
  opacity: 0.65;
}

p.body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 60ch;
  text-wrap: pretty;
}
p.body.invert { color: rgba(242, 235, 222, 0.85); }

.thai-script {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.6vw, 22px);
  opacity: 0.55;
  line-height: 1.4;
}

.section-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(44px, 9vw, 140px);
  line-height: 0.9;
  letter-spacing: -0.02em;
}
.section-title .it { font-style: italic; }

/* === LAYOUT =========================================================== */

main { display: block; }

section {
  position: relative;
  padding-top: var(--pad2);
  padding-bottom: var(--pad2);
  overflow: hidden;
}

.shell {
  padding-left: var(--pad);
  padding-right: var(--pad);
  max-width: 1480px;
  margin: 0 auto;
}

/* === NAV ============================================================== */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px var(--pad);
  pointer-events: none;
  transition: background 0.4s, backdrop-filter 0.4s, color 0.4s, border-color 0.4s;
}
/* Default: dark text (works on light backgrounds — home, light subpages) */
body[data-nav-dark] .nav { color: var(--paper); }

/* Home hero: nav sits on dark collage — flip to light text + gradient scrim.
   [data-page="home"] works as a CSS-only fallback even without JS;
   .on-hero (toggled by RAF) additionally handles the full hero scroll zone. */
[data-page="home"] .nav:not(.scrolled),
.nav.on-hero:not(.scrolled) {
  color: var(--paper);
  background: linear-gradient(rgba(28,20,16,0.45) 0%, rgba(28,20,16,0) 100%);
}
/* When scrolled but still within the dark hero zone: stay dark, not cream */
.nav.on-hero.scrolled {
  background: rgba(28,20,16,0.82);
  backdrop-filter: blur(14px);
  color: var(--paper);
  border-bottom-color: rgba(242,235,222,0.10);
}

.nav.scrolled {
  background: rgba(242, 235, 222, 0.92);
  backdrop-filter: blur(14px);
  color: var(--ink);
  border-bottom: 1px solid rgba(28,20,16,0.08);
}
/* Dark-nav pages: nav stays light-on-dark when scrolled */
body[data-nav-dark] .nav.scrolled {
  background: rgba(28, 20, 16, 0.92);
  color: var(--paper);
  border-bottom-color: rgba(242, 235, 222, 0.12);
}

.nav > * { pointer-events: auto; }

.nav .brand {
  display: inline-flex;
  align-items: center;
  line-height: 0;
}
.nav .brand-mark {
  height: 38px;
  width: auto;
  display: block;
  transition: filter 0.4s ease;
}
@media (max-width: 720px) { .nav .brand-mark { height: 34px; } }
/* The wordmark art is dark — whiten it wherever the nav is light-on-dark
   (dark-nav pages, the home hero, and the scrolled-on-dark states). */
body[data-nav-dark] .nav .brand-mark,
body[data-nav-dark] .nav.scrolled .brand-mark,
[data-page="home"] .nav:not(.scrolled) .brand-mark,
.nav.on-hero:not(.scrolled) .brand-mark,
.nav.on-hero.scrolled .brand-mark {
  filter: brightness(0) invert(1);
}

.nav .links {
  display: none;
  gap: 28px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
}
@media (min-width: 980px) {
  .nav .links { display: flex; }
}
.nav .links a { position: relative; padding: 4px 0; opacity: 0.8; transition: opacity 0.3s; }
.nav .links a:hover { opacity: 1; }
.nav .links a.active { opacity: 1; }
.nav .links a.active::after {
  content: ''; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--brick);
}

.nav .lang {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  display: flex;
  gap: 10px;
  align-items: center;
}
.nav .lang button { opacity: 0.4; transition: opacity 0.3s; }
.nav .lang button.on { opacity: 1; }
.nav .lang .sep { opacity: 0.3; }

.nav-menu-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
}
.nav-menu-btn span { display: block; width: 22px; height: 1px; background: currentColor; transition: transform 0.3s, opacity 0.3s; }
.mobile-drawer.open ~ .nav .nav-menu-btn span,
.nav-menu-btn.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-menu-btn.open span:nth-child(2) { opacity: 0; }
.nav-menu-btn.open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

@media (min-width: 980px) { .nav-menu-btn { display: none; } }

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: var(--paper);
  display: flex;
  flex-direction: column;
  padding: 90px var(--pad) 40px;
  gap: 22px;
  transform: translateY(-100%);
  transition: transform 0.6s cubic-bezier(.7,.1,.2,1);
  overflow-y: auto;
}
.mobile-drawer.open { transform: translateY(0); }
.mobile-drawer a {
  font-family: var(--serif);
  font-size: clamp(28px, 7vw, 44px);
  font-weight: 300;
  font-style: italic;
  padding: 8px 0;
  border-bottom: 1px solid rgba(28,20,16,0.1);
}
.mobile-drawer a small {
  display: block;
  font-family: var(--sans);
  font-style: normal;
  font-size: 10px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 6px;
  font-weight: 500;
  color: var(--brick);
}
.mobile-drawer-meta {
  margin-top: 30px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* === HERO (home) ====================================================== */

.hero {
  position: relative;
  height: 100vh;
  padding: 0;             /* override section { padding: var(--pad2) } */
  color: var(--paper);   /* dark hero-pin → all text must be light */
}
.hero-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  perspective: 1400px;
  perspective-origin: 50% 45%;
  /* Dark canvas: collage sits in darkness, explosion reads as depth not blank paper.
     Cream background was causing the exploded-layer gaps to look like empty space. */
  background: var(--ink);
}

.collage-stage {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  will-change: transform;
}

/* Canvas is sized so the FULL composition fits the viewport.
   Active content sits within canvas at x:1697-5807 (54% wide), y:188-4096 (91% tall).
   Content center: ~(49.3%, 50%) of canvas — translate(-50%, -50%) centers it.
   To fit horizontally without overflow:  canvas_w ≤ vw / 0.54  ≈ 1.85 vw
   To fit vertically without overflow:    canvas_w ≤ vh * 1.953 ≈ 1.95 vh */
.collage-canvas {
  position: absolute;
  left: 50%;
  top: 60%;
  /* explicit height — guarantees the layer band (canvas y=188..3434 = 76% of canvas)
     fills 100vh of hero regardless of viewport aspect ratio.
     Previous min(175vw, ...) approach failed on aspect ratios < 1.337 */
  height: 132vh;
  width: auto;
  aspect-ratio: 7614 / 4283;
  transform: translate(-49.3%, -50%);
  transform-style: preserve-3d;
}
@media (max-width: 720px) {
  .collage-canvas {
    /* mobile: prefer horizontal coverage (skinny portrait viewport)
       — accept slight vertical bands at very top/bottom */
    height: auto;
    width: 220vw;
    top: 50%;
  }
}

.collage-layer {
  position: absolute;
  pointer-events: none;   /* homepage hero is purely decorative — no click-to-zoom */
  cursor: default;
  will-change: transform, opacity;
  transform-style: preserve-3d;
  transform-origin: center;
}
.collage-layer img {
  width: 100%; height: 100%;
  user-select: none;
  -webkit-user-drag: none;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 var(--pad) 6vh;
  pointer-events: none;
  z-index: 10;
}
.hero-logo {
  position: absolute;
  top: 26px;
  left: var(--pad);
  width: clamp(110px, 12vw, 160px);
  filter: drop-shadow(0 4px 14px rgba(28,20,16,0.12));
  will-change: transform, opacity;
  z-index: 11;
}
.hero-logo img { width: 100%; }
.hero-tagline {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.6vw, 38px);
  text-align: center;
  letter-spacing: 0.01em;
  margin-bottom: 22px;
}
.hero-eyebrow {
  position: absolute;
  top: 38px;
  right: var(--pad);
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(242,235,222,0.45);  /* paper at low opacity — readable on dark, unobtrusive */
  text-align: right;
  line-height: 1.7;
  z-index: 11;
}
.hero-eyebrow .dot { display:inline-block; width:5px;height:5px;background:currentColor;border-radius:50%;margin:0 8px;transform:translateY(-3px); }

.hero-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  z-index: 11;
}

@media (max-width: 720px) {
  .hero-logo { top: 18px; left: var(--pad); width: 100px; }
  .hero-eyebrow { display: none; }
}
.hero-foot .line {
  width: 1px; height: 50px;
  background: currentColor;
  animation: scrollHint 2.4s ease-in-out infinite;
  transform-origin: top;
}
@keyframes scrollHint {
  0%, 100% { transform: scaleY(0); }
  50%       { transform: scaleY(1); }
}

.hero-meta {
  position: absolute;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.55;
  z-index: 11;
}
.hero-meta.tl { top: 90px; left: var(--pad); }
.hero-meta.tr { top: 90px; right: var(--pad); text-align: right; }
.hero-meta.bl { bottom: 24px; left: var(--pad); }
.hero-meta.br { bottom: 24px; right: var(--pad); text-align: right; }
@media (max-width: 720px) {
  .hero-meta.bl, .hero-meta.br { display: none; }
  .hero-meta.tl, .hero-meta.tr { top: 70px; }
}

/* === PAGE HERO (subpages) ============================================= */

.page-hero {
  position: relative;
  min-height: 58vh;
  padding: 110px var(--pad) clamp(36px, 6vw, 70px);  /* tightened top */
  display: flex;
  flex-direction: column;
  justify-content: end;
  background: var(--paper);
  border-bottom: 1px solid rgba(28,20,16,0.1);
  overflow: hidden;
}
.page-hero.dark { background: var(--ink); color: var(--paper); border-bottom-color: rgba(242, 235, 222, 0.1); }
.page-hero.brick { background: var(--brick-deep); color: var(--paper); border-bottom-color: rgba(242, 235, 222, 0.12); }
.page-hero.moss { background: var(--moss); color: var(--paper); border-bottom-color: rgba(242, 235, 222, 0.12); }

.page-hero .crumb {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
  margin-bottom: 24px;
}
.page-hero .crumb a { color: inherit; opacity: 0.65; }
.page-hero .crumb .sep { margin: 0 10px; opacity: 0.4; }

.page-hero h1 {
  font-size: clamp(48px, 11vw, 170px);
  line-height: 0.9;
  max-width: 14ch;
}
.page-hero h1 .it { font-style: italic; }

.page-hero .lead {
  margin-top: 24px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(20px, 2.4vw, 32px);
  max-width: 36ch;
  opacity: 0.85;
}

.page-hero .meta {
  position: absolute;
  top: 110px;
  right: var(--pad);
  text-align: right;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.5;
  line-height: 1.7;
}
@media (max-width: 720px) {
  .page-hero .meta { display: none; }
}

/* === IMAGE SLOTS / PLACEHOLDERS ======================================= */

image-slot {
  --slot-bg: var(--paper-3);
  --slot-stroke: rgba(28,20,16,0.18);
  --slot-fg: var(--brick);
  --slot-radius: 0;
}
.invert image-slot {
  --slot-bg: rgba(242, 235, 222, 0.06);
  --slot-stroke: rgba(242, 235, 222, 0.18);
  --slot-fg: rgba(242, 235, 222, 0.7);
}

/* === MARQUEE TICKERS ================================================== */

.marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 22px 0;         /* slightly bigger — earns visual weight between sections */
  border-top: 1px solid rgba(28,20,16,0.15);
  border-bottom: 1px solid rgba(28,20,16,0.15);
  background: var(--paper);
}
.marquee.dark {
  border-color: rgba(242, 235, 222, 0.15);
  color: var(--paper);
  background: var(--ink);
}
.marquee.brick {
  border-color: rgba(242, 235, 222, 0.15);
  color: var(--paper);
  background: var(--brick-deep);
}
.marquee-track {
  display: inline-flex;
  gap: 60px;
  animation: marqueeScroll 45s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(28px, 4vw, 52px);
  align-items: center;
}
.marquee-track .star { color: var(--clay); font-style: normal; font-size: 0.5em; }
.marquee.dark .marquee-track .star, .marquee.brick .marquee-track .star { color: var(--gold); }
@keyframes marqueeScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* === BUTTONS ========================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 18px 32px;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
  transition: background 0.3s, color 0.3s, border-color 0.3s;
  cursor: pointer;
}
.btn:hover { background: var(--brick); border-color: var(--brick); }
.btn .arrow { display: inline-block; transition: transform 0.3s; }
.btn:hover .arrow { transform: translateX(4px); }

.btn-clay { background: var(--clay); border-color: var(--clay); }
.btn-clay:hover { background: var(--brick); border-color: var(--brick); }

.btn-outline {
  background: transparent;
  color: currentColor;
  border-color: currentColor;
}
.btn-outline:hover { background: currentColor; color: var(--paper); }
.invert .btn-outline:hover { color: var(--ink); }

/* === REVEAL =========================================================== */

[data-reveal] {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1.2s cubic-bezier(.2,.6,.2,1), transform 1.2s cubic-bezier(.2,.6,.2,1);
}
[data-reveal].in { opacity: 1; transform: translateY(0); }
[data-reveal="fade"] { transform: none; }
[data-reveal-d="1"] { transition-delay: 0.08s; }
[data-reveal-d="2"] { transition-delay: 0.16s; }
[data-reveal-d="3"] { transition-delay: 0.24s; }
[data-reveal-d="4"] { transition-delay: 0.32s; }
[data-reveal-d="5"] { transition-delay: 0.40s; }

/* === LOADER =========================================================== */

.loader {
  position: fixed; inset: 0;
  z-index: 9999;
  background: var(--paper);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column;
  gap: 20px;
  transition: opacity 0.8s, visibility 0.8s;
}
.loader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-text {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  opacity: 0.5;
}
.loader-bar {
  width: 200px;
  height: 1px;
  background: rgba(28,20,16,0.15);
  position: relative;
  overflow: hidden;
}
.loader-bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink);
  transform-origin: left;
  transform: scaleX(var(--p, 0));
  transition: transform 0.3s;
}

/* === SCROLL PROGRESS / TO TOP ========================================= */

.scroll-progress {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 100;
  width: 50px;
  height: 50px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.4s;
}
.scroll-progress.show { opacity: 1; }
.scroll-progress svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.scroll-progress circle { fill: none; stroke-width: 1; }
.scroll-progress .track { stroke: rgba(28,20,16,0.2); }
.scroll-progress .fill {
  stroke: var(--brick);
  stroke-dasharray: 138;
  stroke-dashoffset: calc(138 - 138 * var(--p, 0));
}
.scroll-progress .arrow {
  position: absolute;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--brick);
  line-height: 1;
}

/* === FOOTER (shared) ================================================== */

.footer {
  background: var(--ink);
  color: var(--paper);
  padding: 100px var(--pad) 30px;
  position: relative;
  overflow: hidden;
}
.footer-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
}
@media (min-width: 880px) {
  .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 60px; }
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer-brand-mark {
  width: 180px;
  filter: invert(1) brightness(1.1) saturate(0);
  opacity: 0.95;
}
.footer-brand-th {
  width: 220px;
  filter: invert(1) brightness(1.05) saturate(0);
  opacity: 0.95;
  margin-top: 8px;
}
.footer-brand-line {
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  opacity: 0.7;
  max-width: 24ch;
  margin-top: 6px;
}

.footer h4 {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
  margin-bottom: 22px;
}
.footer ul { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.footer ul a {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 18px;
  opacity: 0.9;
  transition: opacity 0.3s, color 0.3s;
}
.footer ul a:hover { color: var(--clay); }

.footer-bottom {
  max-width: 1480px;
  margin: 80px auto 0;
  padding-top: 24px;
  border-top: 1px solid rgba(242, 235, 222, 0.15);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.5;
}
.footer-credit a {
  color: inherit;
  border-bottom: 1px solid currentColor;
  padding-bottom: 1px;
  transition: color 0.3s ease;
}
.footer-credit a:hover { color: var(--gold); }

/* === HOME PAGE INTRO + STATS (after hero) ============================== */

.home-intro {
  background: var(--paper);
  padding: var(--pad2) var(--pad);
}
.home-intro-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 50px;
}
@media (min-width: 880px) {
  .home-intro-grid {
    grid-template-columns: 1fr 1.1fr;
    gap: 100px;
    align-items: start;
  }
}
.home-intro h2 {
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.92;
  font-weight: 300;
  letter-spacing: -0.02em;
}
.home-intro h2 .it { font-style: italic; }
.home-intro .home-intro-left { padding-top: 6px; }

.home-stats {
  max-width: 1480px;
  margin: 80px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: rgba(28,20,16,0.15);
  border: 1px solid rgba(28,20,16,0.15);
}
@media (min-width: 880px) {
  .home-stats { grid-template-columns: repeat(4, 1fr); margin-top: 100px; }
}

.home-stat {
  background: var(--paper);
  padding: 36px 28px 30px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 200px;
}
.home-stat .num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 500;
  opacity: 0.5;
}
.home-stat .label {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(32px, 3.6vw, 48px);
  line-height: 1;
  margin-top: auto;
}
.home-stat .sub {
  font-family: var(--sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  opacity: 0.65;
  line-height: 1.4;
}

.home-tiles {
  background: var(--paper);
  padding: 0 var(--pad) var(--pad2);
}
.home-tiles-grid {
  max-width: 1480px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px)  { .home-tiles-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .home-tiles-grid { grid-template-columns: 1fr 1fr 1fr 1fr; } }

.home-tile {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: end;
  padding: 32px;
  cursor: pointer;
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1);
}
.home-tile:hover { transform: translateY(-6px); }
.home-tile.alt   { background: var(--clay); }
.home-tile.alt2  { background: var(--brick-deep); }
.home-tile.alt3  { background: var(--moss); }

.home-tile image-slot {
  position: absolute; inset: 0;
  --slot-bg: transparent;
  --slot-stroke: transparent;
  opacity: 0.42;
}
.home-tile-num {
  position: absolute;
  top: 28px; left: 28px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 500;
  opacity: 0.7;
  z-index: 2;
}
.home-tile-title {
  font-family: var(--serif);
  font-weight: 300;
  font-style: italic;
  font-size: clamp(28px, 3.4vw, 44px);
  line-height: 1;
  z-index: 2;
}
.home-tile-link {
  margin-top: 14px;
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  z-index: 2;
  opacity: 0.85;
}

/* === STORY / About ==================================================== */

.story-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (min-width: 880px) {
  .story-grid { grid-template-columns: 1fr 1.1fr; gap: 100px; align-items: start; }
}

.story-headline {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.02em;
}
.story-headline .it { font-style: italic; }
.story-headline .small {
  display: block;
  font-size: 0.25em;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-style: normal;
  font-family: var(--sans);
  margin-top: 22px;
  opacity: 0.5;
  font-weight: 500;
  color: var(--brick);
}

.story-body p { margin-bottom: 22px; }
.story-body p:last-child { margin-bottom: 0; }

/* Initial cap */
.lead-cap::first-letter {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 3em;
  color: var(--brick);
  float: left;
  line-height: 0.85;
  padding-right: 8px;
  padding-top: 4px;
}

/* === PILLARS (Philosophy) ============================================= */

.pillars {
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
}
.pillars-head {
  text-align: center;
  padding: 0 var(--pad) 60px;
  max-width: 1100px;
  margin: 0 auto;
}
.pillars-head .eyebrow { color: var(--clay); }
.pillars-head h2 {
  font-size: clamp(40px, 8vw, 120px);
  font-weight: 300;
  margin-top: 18px;
}
.pillars-head h2 .it { font-style: italic; }
.pillars-head p {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  margin: 30px auto 0;
  max-width: 36ch;
  opacity: 0.85;
}

.pillars-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(242, 235, 222, 0.15);
  border-top: 1px solid rgba(242, 235, 222, 0.15);
  border-bottom: 1px solid rgba(242, 235, 222, 0.15);
}
@media (min-width: 880px) { .pillars-grid { grid-template-columns: 1fr 1fr 1fr; } }

.pillar {
  background: var(--ink);
  padding: 60px var(--pad);
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-height: 56vh;
  position: relative;
  overflow: hidden;
}
.pillar-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 500;
  opacity: 0.5;
}
.pillar-mark {
  width: 80px;
  height: 80px;
  border: 1px solid var(--clay);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 28px;
  color: var(--clay);
  margin-bottom: 10px;
}
.pillar-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(40px, 5vw, 68px);
  line-height: 1;
}
.pillar-body {
  font-family: var(--sans);
  font-weight: 400;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.6;
  opacity: 0.85;
  max-width: 32ch;
  margin-top: auto;
}

/* === CAFÉ / DINING grids ============================================== */

.split-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (min-width: 880px) {
  .split-grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
}
.split-grid.reverse > :first-child { order: 2; }
@media (max-width: 879px) {
  .split-grid.reverse > :first-child { order: 0; }
}

.split-image image-slot { width: 100%; aspect-ratio: 4 / 5; }

/* Two stacked landscape images in a split column — editorial pair */
.split-image.two-stack { display: flex; flex-direction: column; gap: 10px; }
.split-image.two-stack image-slot { aspect-ratio: 3 / 2 !important; }
.two-stack-img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  display: block; border-radius: 4px;
}

.dishes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 60px var(--pad) 0;
  max-width: 1480px;
  margin: 0 auto;
}
@media (min-width: 640px)  { .dishes { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .dishes { grid-template-columns: repeat(4, 1fr); } }

.dish { display: flex; flex-direction: column; gap: 14px; }
.dish image-slot { width: 100%; aspect-ratio: 4 / 5; }
.dish-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 2.2vw, 32px);
  line-height: 1;
}
.dish-th {
  font-family: var(--serif);
  font-style: italic;
  font-size: 14px;
  opacity: 0.55;
}
.dish-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.5;
  opacity: 0.75;
}
.invert .dish-desc { color: rgba(242, 235, 222, 0.8); opacity: 1; }

/* === CATERING grid ==================================================== */

.cater-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(28,20,16,0.15);
  border: 1px solid rgba(28,20,16,0.15);
  margin: 0 var(--pad);
  max-width: 1480px;
  margin-left: auto;
  margin-right: auto;
}
.invert .cater-grid { background: rgba(242, 235, 222, 0.15); border-color: rgba(242, 235, 222, 0.15); }

@media (min-width: 640px)  { .cater-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .cater-grid { grid-template-columns: repeat(3, 1fr); } }

.cater-item {
  background: var(--paper);
  padding: 40px 32px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 18px;
  text-align: left;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
  width: 100%;
}
.invert .cater-item { background: var(--ink); }
.cater-item:hover { background: var(--paper-2); }
.invert .cater-item:hover { background: var(--brick-deep); }

.cater-item-num {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  font-weight: 500;
  opacity: 0.5;
}
.cater-item-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1;
  margin-top: 14px;
}
.cater-item-title .it { font-style: italic; }
.cater-item-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  opacity: 0.7;
}
.invert .cater-item-desc { color: rgba(242, 235, 222, 0.8); opacity: 1; }

/* === EVENT TAGS ======================================================= */

.events-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}
.events-tag {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 22px;
  border: 1px solid currentColor;
  border-radius: 60px;
  opacity: 0.85;
  transition: background 0.3s, color 0.3s, opacity 0.3s;
}
.events-tag:hover { opacity: 1; }
.invert .events-tag:hover { background: var(--paper); color: var(--ink); }

/* === MENU cards ======================================================= */

.menu-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (min-width: 880px) { .menu-cards { grid-template-columns: 1fr 1fr; } }

.menu-card {
  background: var(--ink);
  color: var(--paper);
  padding: 50px 40px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 30px;
  cursor: pointer;
  transition: transform 0.5s;
}
.menu-card:hover { transform: translateY(-6px); }
.menu-card.alt  { background: var(--clay); }
.menu-card.alt2 { background: var(--brick-deep); }
.menu-card.alt3 { background: var(--gold); color: var(--ink); }
.menu-card-title {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
}
.menu-card-meta {
  display: flex; justify-content: space-between; align-items: end;
}
.menu-card-meta .count {
  font-family: var(--serif);
  font-size: clamp(48px, 7vw, 84px);
  font-weight: 100;
  line-height: 0.85;
  font-style: italic;
}
.menu-card-meta .label {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.7;
  max-width: 14ch;
  text-align: right;
}

/* === IMAGE STRIPS (cross-page reusable) =============================== */
/* Used on our-story, cafe-dining, catering-events for 2-3 col photo sets */
.img-strip {
  max-width: 1480px; margin: 80px auto 0; padding: 0 var(--pad);
}
.img-strip-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}
@media (min-width: 720px) {
  .img-strip-3              { grid-template-columns: repeat(3, 1fr); }
  .img-strip-3.layout-wide  { grid-template-columns: 2fr 1fr 1fr; }  /* our-story */
}
.img-strip-3 image-slot { width: 100%; height: auto; aspect-ratio: 4 / 5; display: block; }

/* === SPEC GRID (catering-events) ====================================== */
.spec-grid {
  max-width: 1480px; margin: 80px auto 0; padding: 0 var(--pad);
  display: grid; grid-template-columns: 1fr; gap: 40px;
}
@media (min-width: 880px) {
  .spec-grid { grid-template-columns: 1fr 1fr 1fr; gap: 60px; }
}
.spec-label {
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  opacity: 0.55; margin-bottom: 14px;
}
.spec-value {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(36px, 5vw, 64px); line-height: 1;
}
.spec-value strong { font-style: normal; font-weight: 300; }
.spec-desc {
  font-family: var(--sans); font-size: 13px; line-height: 1.55;
  opacity: 0.7; margin-top: 14px; max-width: 32ch;
}

/* === MENU DL (café & dining) ========================================== */
.menu-dl {
  margin-top: 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px;
}
.menu-dl dt {
  font-family: var(--serif); font-style: italic;
  font-size: clamp(18px, 1.8vw, 22px); margin-bottom: 4px;
}
.menu-dl dd {
  font-family: var(--sans); font-size: 13px; line-height: 1.55; opacity: 0.7;
}

/* === GALLERY grid ===================================================== */

.gallery-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (min-width: 640px)  { .gallery-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .gallery-grid { grid-template-columns: repeat(4, 1fr); } }

.gallery-grid image-slot { width: 100%; height: 100%; display: block; }
.gallery-cell-1 { aspect-ratio: 1 / 1; }
.gallery-cell-tall { aspect-ratio: 3 / 5; grid-row: span 2; } /* aspect-ratio = mobile fallback; grid rows determine desktop height */
.gallery-cell-wide { aspect-ratio: 5 / 4; grid-column: span 2; }

.gallery-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 var(--pad);
  max-width: 1480px;
  margin: 0 auto 30px;
}
.gallery-filter {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 10px 18px;
  border: 1px solid rgba(28,20,16,0.2);
  border-radius: 60px;
  background: transparent;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.gallery-filter.on, .gallery-filter:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
/* Gallery cells: fade on filter instead of display:none (avoids grid-row:span-2 layout jump) */
.gallery-grid [data-cat] {
  transition: opacity 0.35s ease;
}
.gallery-grid [data-cat].hidden {
  opacity: 0;
  pointer-events: none;
}

/* === CONTACT ========================================================== */

.contact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  max-width: 1480px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
@media (min-width: 880px) {
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
}

.contact-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px 20px;
  margin-top: 40px;
}
.contact-info dt {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 6px;
}
.contact-info dd {
  font-family: var(--serif);
  font-size: clamp(18px, 1.5vw, 22px);
  font-style: italic;
  font-weight: 300;
  line-height: 1.3;
}

.socials {
  display: flex;
  gap: 12px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.social-pill {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 12px 22px;
  border: 1px solid currentColor;
  border-radius: 60px;
  transition: background 0.3s, color 0.3s;
  opacity: 0.85;
}
.social-pill:hover { opacity: 1; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.invert .social-pill:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.form {
  display: grid;
  gap: 20px;
  background: var(--paper);
  padding: 40px;
  border: 1px solid rgba(28,20,16,0.12);
}
.invert .form { background: rgba(242, 235, 222, 0.04); border-color: rgba(242, 235, 222, 0.15); }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row.three { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 620px) { .form-row, .form-row.three { grid-template-columns: 1fr; } }

.form label {
  display: block;
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  opacity: 0.55;
  margin-bottom: 8px;
}
.form input, .form select, .form textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(28,20,16,0.2);
  padding: 10px 0;
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  color: inherit;
  font-weight: 300;
  outline: none;
}
.invert .form input, .invert .form select, .invert .form textarea {
  border-bottom-color: rgba(242, 235, 222, 0.25);
}
.form input::placeholder, .form textarea::placeholder { color: currentColor; opacity: 0.35; }
.form input:focus, .form textarea:focus, .form select:focus { border-bottom-color: var(--brick); }
.form select {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M0 0l5 6 5-6z' fill='currentColor' opacity='0.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right center;
  padding-right: 20px;
}
.form textarea { resize: vertical; min-height: 80px; }

/* Centered headline helper */
.center-head {
  text-align: center;
  max-width: 1100px;
  margin: 0 auto 60px;
  padding: 0 var(--pad);
}
.center-head .eyebrow { justify-content: center; }
.center-head .eyebrow::after {
  content: '';
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 0;
  border-top: 1.5px solid currentColor;
  opacity: 0.7;
}
.center-head h2 { margin-top: 18px; }
.center-head p {
  margin: 30px auto 0;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  max-width: 36ch;
  opacity: 0.85;
}

/* Background section variants */
.bg-paper  { background: var(--paper); color: var(--ink); }
.bg-paper2 { background: var(--paper-2); color: var(--ink); }
.bg-ink    { background: var(--ink); color: var(--paper); }
.bg-brick  { background: var(--brick-deep); color: var(--paper); }
.bg-moss   { background: var(--moss); color: var(--paper); }
.bg-ink .eyebrow, .bg-brick .eyebrow, .bg-moss .eyebrow { color: var(--clay); }

.invert { color: var(--paper); }

/* =========================================================
   NEW HOME SECTIONS — about/intro, pillars, split, dishes, heritage, events, partners
   ========================================================= */

/* ---------- HOME ABOUT ---------- */
.home-about {
  background: var(--paper);
  padding: 0 0 var(--pad2);
}

/* ---------- ABOUT grid ---------- */
.home-about-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 60px;
  padding: var(--pad2) var(--pad) 0;  /* top pad creates breathing room below marquee */
}
@media (min-width: 980px) {
  .home-about-grid { grid-template-columns: 1fr 1.05fr; gap: 100px; align-items: start; }
}
.home-about-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.home-about-photo img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.home-about-photo:hover img { transform: scale(1.04); }
.home-about-photo figcaption {
  position: absolute; bottom: 18px; left: 22px;
  font-family: var(--sans);
  font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--paper);
  background: rgba(28,20,16,0.55);
  padding: 8px 14px;
  backdrop-filter: blur(8px);
}
.home-about-h {
  font-family: var(--serif); font-weight: 300; line-height: 0.92;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.02em;
}
.home-about-h .it { font-style: italic; }

/* ---------- PILLARS ---------- */
.home-pillars {
  padding: var(--pad2) var(--pad);
  background: var(--paper-2);
}
.home-pillars-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 28px;
}
@media (min-width: 880px) {
  .home-pillars-grid { grid-template-columns: 1fr 1fr 1fr; gap: 30px; }
}
.home-pillar {
  display: flex; flex-direction: column;
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.home-pillar-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
}
.home-pillar-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.home-pillar:hover .home-pillar-img img { transform: scale(1.05); }
.home-pillar-num {
  display: block;
  font-family: var(--sans); font-size: 11px;
  letter-spacing: 0.3em; font-weight: 500;
  opacity: 0.5;
  padding: 28px 28px 0;
}
.home-pillar h3 {
  font-family: var(--serif); font-style: italic; font-weight: 300;
  font-size: clamp(36px, 4vw, 56px);
  padding: 12px 28px 0;
  line-height: 1;
}
.home-pillar p {
  font-family: var(--sans); font-size: 14px; line-height: 1.55;
  padding: 14px 28px 36px;
  color: var(--ink-2);
  max-width: 36ch;
}

/* ---------- SPLIT (image + text) ---------- */
.home-split {
  padding: var(--pad2) var(--pad);
  background: var(--paper);
}
.home-split-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr; gap: 50px;
  align-items: start;
}
@media (min-width: 980px) {
  .home-split-grid { grid-template-columns: 1fr 1fr; gap: 100px; }
}
/* restaurant split follows same-bg dishes section — reduce top gap */
.home-split.reverse { padding-top: clamp(20px, 3vw, 48px); }
.home-split.reverse .home-split-grid > :first-child { order: 2; }
@media (max-width: 979px) {
  .home-split.reverse .home-split-grid > :first-child { order: 0; }
}
.home-split-img {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
}
.home-split-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s cubic-bezier(.2,.6,.2,1);
}
.home-split-img:hover img { transform: scale(1.04); }
.home-split-h {
  font-family: var(--serif); font-weight: 300; line-height: 0.92;
  font-size: clamp(40px, 7vw, 96px);
  letter-spacing: -0.02em;
}
.home-split-h .it { font-style: italic; }

/* ---------- MOSAIC ---------- */
.home-mosaic {
  padding: 0 var(--pad);
  background: var(--paper);
}
.home-mosaic-grid {
  max-width: 1480px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(180px, 26vw);
  gap: 14px;
}
@media (min-width: 880px) {
  .home-mosaic-grid {
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: minmax(220px, 22vw);
  }
}
.m-cell {
  position: relative;
  overflow: hidden;
  background: var(--paper-3);
}
.m-cell img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.6s cubic-bezier(.2,.6,.2,1);
}
.m-cell:hover img { transform: scale(1.06); }
@media (min-width: 880px) {
  .m-cell.tall { grid-row: span 2; }
  .m-cell.wide { grid-column: span 2; }
}

/* ---------- EVENTS ---------- */
.home-events {
  position: relative;
  height: 92vh;
  min-height: 600px;
  overflow: hidden;
  color: var(--paper);
  display: flex;
  align-items: center;
  padding: var(--pad);
}
.home-events-bg {
  position: absolute; inset: 0;
  overflow: hidden;
  will-change: transform;
}
.home-events-bg img {
  position: absolute; inset: 0;
  width: 100%; height: 110%;
  object-fit: cover;
  transform: translateY(-5%);
}
.home-events-scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(105deg, rgba(28,20,16,0.78) 0%, rgba(28,20,16,0.45) 55%, rgba(28,20,16,0.78) 100%);
}
.home-events-content {
  position: relative;
  max-width: 1480px;
  width: 100%;
  margin: 0 auto;
  z-index: 2;
}
.home-events-content .eyebrow { color: var(--clay); }
.home-events-content .section-title { color: var(--paper); }
.home-events-lead {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 2vw, 26px);
  margin-top: 26px;
  max-width: 36ch;
  opacity: 0.92;
}

/* ---------- PARTNERS ---------- */
.home-partners {
  padding: var(--pad2) 0;
  background: var(--paper);
  overflow: hidden;
}
.home-partners .center-head { padding: 0 var(--pad); }
.partners-marquee {
  overflow: hidden;
  white-space: nowrap;
  padding: 28px 0;
  border-top: 1px solid rgba(28,20,16,0.15);
  border-bottom: 1px solid rgba(28,20,16,0.15);
}
.partners-track {
  display: inline-flex;
  gap: 36px;
  animation: marqueeScroll 60s linear infinite;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.5vw, 32px);
  align-items: center;
  color: var(--ink);
}
.partners-track .bullet { color: var(--clay); }

/* ---------- VISIT info list ---------- */
.home-visit-info {
  margin-top: 36px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 24px;
}
.home-visit-info dt {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  opacity: 0.5;
  margin-bottom: 8px;
}
.home-visit-info dd {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(18px, 1.5vw, 22px);
  line-height: 1.4;
}
.home-visit-info dd a {
  border-bottom: 1px solid rgba(28,20,16,0.2);
  transition: border-color 0.3s, color 0.3s;
}
.home-visit-info dd a:hover { color: var(--brick); border-color: var(--brick); }


/* =========================================================
   DISHES — proper bordered card grid (editorial w/ descriptions)
   ========================================================= */
.home-dishes {
  /* reduced top: section follows same-bg café split — halves the double-gap */
  padding: clamp(20px, 3vw, 48px) var(--pad) var(--pad2);
  background: var(--paper);
}
.home-dishes-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}
@media (min-width: 640px) {
  .home-dishes-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
}
@media (min-width: 1024px) {
  .home-dishes-grid { grid-template-columns: 1fr 1fr 1fr; gap: 32px; }
}

/* The card — actual bordered frame, photo top, meta bottom */
.dish-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--paper);
  border: 1px solid rgba(28,20,16,0.14);
  padding: 14px 14px 22px;
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1),
              box-shadow 0.5s cubic-bezier(.2,.6,.2,1),
              border-color 0.4s ease;
  isolation: isolate;
}
.dish-card:hover {
  transform: translateY(-4px);
  border-color: rgba(28,20,16,0.28);
  box-shadow: 0 22px 50px -26px rgba(28,20,16,0.22);
}

/* Photo frame inside the card */
.dish-card-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
  margin-bottom: 18px;
}
.dish-card-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 2.2s cubic-bezier(.2,.6,.2,1), filter 0.8s ease;
}
.dish-card:hover .dish-card-frame img {
  transform: scale(1.05);
  filter: saturate(1.06);
}
/* Corner mark, contained inside the photo frame */
.dish-card-frame::before,
.dish-card-frame::after {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  background: rgba(255,255,255,0.9);
  mix-blend-mode: difference;
  opacity: 0.6;
  z-index: 2;
  pointer-events: none;
}
.dish-card-frame::before { width: 20px; height: 1px; }
.dish-card-frame::after  { width: 1px;  height: 20px; }

/* Meta block — number, name, Thai, description */
.dish-card-meta {
  display: flex;
  flex-direction: column;
  padding: 0 4px;
}
.dish-card-num {
  font-family: var(--sans);
  font-size: 10px;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brick);
  margin-bottom: 10px;
}
.dish-card-name {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: clamp(22px, 1.7vw, 28px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}
.dish-card-th {
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 14px;
  opacity: 0.5;
  color: var(--ink);
  margin: 4px 0 14px;
}
.dish-card-desc {
  font-family: var(--sans);
  font-size: 13px;
  line-height: 1.55;
  color: var(--ink-2);
  opacity: 0.78;
  max-width: 38ch;
}

/* =========================================================
   FUN UI POLISH — site-wide micro-interactions
   ========================================================= */

/* smooth scroll for in-page anchors */
html { scroll-behavior: smooth; }

/* image hover defaults — apply gentle zoom to any photographic figure */
.home-split-img,
.home-about-photo,
.home-pillar-img,
.m-cell,
.home-heritage-photo {
  overflow: hidden;
}

/* button — refined hover with chevron motion */
.btn { will-change: transform; }
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--brick);
  outline-offset: 4px;
}

/* link hover — sliding underline on body text links */
.home-about-text a:not(.btn),
.home-visit-info dd a,
.footer ul a,
.mobile-drawer a {
  position: relative;
  display: inline-block;
}
.home-about-text a:not(.btn)::after,
.home-visit-info dd a::after,
.footer ul a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1);
}
.home-about-text a:not(.btn):hover::after,
.home-visit-info dd a:hover::after,
.footer ul a:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* pillar cards lift on hover */
.home-pillar {
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1), box-shadow 0.5s ease;
}
.home-pillar:hover {
  transform: translateY(-6px);
  box-shadow: 0 24px 60px -30px rgba(28,20,16,0.18);
}

/* eyebrows: subtle spacing motion on section hover */
section:hover > .eyebrow,
section:hover .center-head .eyebrow { letter-spacing: 0.26em; }

/* selection color matches brand */
::selection { background: var(--clay); color: var(--paper); }

/* honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}

/* =========================================================
   HERITAGE — clean side-by-side: photo LEFT, all text RIGHT
   ========================================================= */
.home-heritage {
  /* reduced top: section follows same-bg restaurant split — halves the double-gap */
  padding: clamp(20px, 3vw, 48px) var(--pad) var(--pad2);
  background: var(--paper);
  position: relative;
  overflow: hidden;
}
.home-heritage-grid {
  max-width: 1240px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: start;
}
@media (min-width: 900px) {
  .home-heritage-grid {
    grid-template-columns: 1fr 1.05fr;
    gap: 80px;
    align-items: center;
  }
}

/* Photo column — taller portrait, framed */
.home-heritage-photo { margin: 0; }
.home-heritage-photo-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--paper-3);
}
.home-heritage-photo-frame::before,
.home-heritage-photo-frame::after {
  content: '';
  position: absolute;
  top: 14px; left: 14px;
  background: rgba(255,255,255,0.85);
  mix-blend-mode: difference;
  opacity: 0.65;
  z-index: 5;
  pointer-events: none;
}
.home-heritage-photo-frame::before { width: 22px; height: 1px; }
.home-heritage-photo-frame::after  { width: 1px;  height: 22px; }
.home-heritage-photo-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: sepia(0.18) saturate(0.88);
  transition: transform 2.4s cubic-bezier(.2,.6,.2,1);
}
.home-heritage-photo:hover .home-heritage-photo-frame img {
  transform: scale(1.03);
}
.home-heritage-photo figcaption {
  margin-top: 14px;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 300;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  opacity: 0.55;
}
.home-heritage-photo figcaption em { font-style: italic; opacity: 0.85; }

/* Text column — eyebrow, headline, EN, TH, locator stacked tight */
.home-heritage-text { max-width: 540px; }
.home-heritage-text .eyebrow { margin-bottom: 26px; }

.home-heritage-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6.5vw, 86px);   /* contained — was 116px */
  line-height: 0.92;
  letter-spacing: -0.025em;
  color: var(--ink);
  margin-bottom: 32px;
}
.home-heritage-title .it { font-style: italic; }

.home-heritage-text .body {
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.65;
  max-width: 40ch;
  margin-bottom: 22px;
}
.home-heritage-text .thai-script {
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.6;
  opacity: 0.6;
  max-width: 38ch;
  margin-bottom: 32px;
}

.home-heritage-locator {
  font-family: var(--sans);
  font-size: 11px;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--brick);
  opacity: 0.7;
  margin-top: 4px;
  padding-top: 24px;
  border-top: 1px solid rgba(28,20,16,0.12);
  max-width: 280px;
}


/* =========================================================
   SUB-PAGE POLISH — consistent with home page motion
   ========================================================= */

/* Cafe-dining dish cards: lift + zoom on hover */
.dish {
  cursor: default;
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1);
}
.dish:hover { transform: translateY(-4px); }
.dish image-slot {
  overflow: hidden;
  transition: filter 0.6s ease;
}
.dish:hover image-slot { filter: saturate(1.08) brightness(1.02); }

/* Catering item cards: subtle lift */
.cater-item {
  transition: background 0.3s, transform 0.4s cubic-bezier(.2,.6,.2,1);
}
.cater-item:hover {
  transform: translateY(-3px);
}

/* Menu cards on cafe-dining: ensure visible cursor + transition */
.menu-card { cursor: pointer; }

/* Gallery cells: lift + saturation on hover */
.gallery-grid > div {
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(.2,.6,.2,1);
}
.gallery-grid > div:hover { transform: translateY(-4px); }
.gallery-grid image-slot {
  transition: transform 1.4s cubic-bezier(.2,.6,.2,1);
}
.gallery-grid > div:hover image-slot { transform: scale(1.04); }

/* Contact form: focus glow on inputs */
.form input:focus,
.form select:focus,
.form textarea:focus {
  border-bottom-color: var(--brick);
  border-bottom-width: 2px;
  padding-bottom: 9px;  /* compensate for thicker border */
}

/* Social pill hover effect */
.social-pill {
  transition: background 0.3s, color 0.3s, border-color 0.3s, transform 0.3s;
}
.social-pill:hover { transform: translateY(-2px); }

/* Event tag pills */
.events-tag {
  transition: background 0.3s, color 0.3s, opacity 0.3s, transform 0.3s;
  cursor: default;
}
.events-tag:hover { transform: translateY(-2px); }

/* Eyebrow flex-wrap for long bilingual labels */
.eyebrow { flex-wrap: wrap; row-gap: 4px; }

/* page-hero h1 — refined entry timing */
.page-hero h1, .page-hero .lead {
  transition: opacity 1.4s cubic-bezier(.2,.6,.2,1), transform 1.4s cubic-bezier(.2,.6,.2,1);
}


/* =========================================================
   EDITORIAL FRAMES — apply corner marks site-wide
   for vogue-style "this is a placed photo, not floating"
   ========================================================= */

/* Generic corner-mark mixin for all photographic containers */
.home-about-photo,
.home-split-img,
.home-pillar-img,
.home-heritage-photo,
.gallery-grid > div,
.dish image-slot,
#atmosphere-strip > image-slot,
#cafe-strip > image-slot,
#events-strip > image-slot {
  position: relative;
}

.home-about-photo::before,
.home-split-img::before,
.home-pillar-img::before,
.home-heritage-photo::before,
.gallery-grid > div::before,
.dish image-slot::before,
#atmosphere-strip > image-slot::before,
#cafe-strip > image-slot::before,
#events-strip > image-slot::before {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  width: 20px; height: 1px;
  background: rgba(255,255,255,0.85);
  mix-blend-mode: difference;
  opacity: 0.65;
  z-index: 5;
  pointer-events: none;
}

.home-about-photo::after,
.home-split-img::after,
.home-pillar-img::after,
.home-heritage-photo::after,
.gallery-grid > div::after,
.dish image-slot::after,
#atmosphere-strip > image-slot::after,
#cafe-strip > image-slot::after,
#events-strip > image-slot::after {
  content: '';
  position: absolute;
  top: 12px; left: 12px;
  width: 1px; height: 20px;
  background: rgba(255,255,255,0.85);
  mix-blend-mode: difference;
  opacity: 0.65;
  z-index: 5;
  pointer-events: none;
}

/* Tighten the cafe-dining .dishes section to match editorial density */
.dishes {
  max-width: 1240px;
  gap: 60px 40px;
}
@media (min-width: 1100px) {
  .dishes { gap: 80px 48px; }
}

/* Dish caption: align with new editorial pattern */
.dish { gap: 18px; }
.dish-name { letter-spacing: -0.01em; }

/* our-story atmosphere strip — bigger gaps, framed feel */
#atmosphere-strip {
  gap: 24px !important;
}
@media (min-width: 720px) {
  #atmosphere-strip { gap: 40px !important; }
}

/* catering events strip — same treatment */
#events-strip { gap: 24px !important; }
@media (min-width: 720px) {
  #events-strip { gap: 40px !important; }
}

/* cafe-dining shot strip */
#cafe-strip { gap: 24px !important; }
@media (min-width: 720px) {
  #cafe-strip { gap: 40px !important; }
}

/* Gallery: tighter max + more breathing room around cells */
.gallery-grid {
  max-width: 1320px;
  gap: 24px !important;
}
@media (min-width: 1100px) {
  .gallery-grid { gap: 32px !important; }
}

/* ── Bilingual language toggle ─────────────────────────────── */
/* html[data-lang] is set early by partials.js from localStorage.
   [data-en] = English-only content, [data-th] = Thai-only content. */
html[data-lang="en"] [data-th] { display: none !important; }
html[data-lang="th"] [data-en] { display: none !important; }

/* ============================================================
   PAGE HERO COLLAGE — .phc
   Isolated decoration layer inside .page-hero only.
   · overflow:hidden on .page-hero clips everything
   · isolation:isolate → self-contained stacking context
   · pointer-events:none on container → zero click interference
   · Pure CSS @keyframes → no scroll/RAF/JS conflicts
   ============================================================ */

/* Container fills hero exactly */
.phc {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  isolation: isolate;
  z-index: 0;
}

/* Ensure all text/UI above the collage */
.page-hero > *:not(.phc) {
  position: relative;
  z-index: 1;
}

/* Individual piece */
.phc-piece {
  position: absolute;
  transform-origin: center center;
  pointer-events: auto;    /* pieces can receive hover */
  will-change: transform, opacity;
}
.phc-piece img {
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;    /* pass clicks through the image */
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 0.4s cubic-bezier(.25,.46,.45,.94),
              filter    0.4s ease;
}
/* Hover: scale the image inside its piece without fighting the animation */
.phc-piece:hover img {
  transform: scale(1.10);
  filter: brightness(1.06) saturate(1.08);
}

/* ── Keyframes ──────────────────────────────────────────────── */

/* drift — Our Story: settle from softly scattered positions */
@keyframes phc-drift-in {
  from {
    transform: rotate(calc(var(--rot) + 8deg)) translate(12px, -20px) scale(0.76);
    opacity: 0;
  }
  to {
    transform: rotate(var(--rot)) translate(0, 0) scale(1);
    opacity: 0.94;
  }
}
@keyframes phc-float {
  /* No opacity change — avoids cheap brightness pulse */
  0%, 100% { transform: rotate(var(--rot)) translateY(0);   }
  50%      { transform: rotate(var(--rot)) translateY(-4px); }
}

/* fall — Café & Dining: settle gently from above */
@keyframes phc-fall-in {
  from {
    transform: rotate(calc(var(--rot) - 4deg)) translateY(-38px) scale(0.86);
    opacity: 0;
  }
  to {
    transform: rotate(var(--rot)) translateY(0) scale(1);
    opacity: 0.94;
  }
}
@keyframes phc-sway {
  0%, 100% { transform: rotate(var(--rot)) translateX(0);   }
  50%      { transform: rotate(var(--rot)) translateX(3px); }
}

/* burst — Catering & Events: bloom outward, celebratory */
@keyframes phc-burst-in {
  from {
    transform: rotate(calc(var(--rot) + 12deg)) scale(0.30);
    opacity: 0;
  }
  68% {
    transform: rotate(calc(var(--rot) - 2deg)) scale(1.05);
    opacity: 0.98;
  }
  to {
    transform: rotate(var(--rot)) scale(1);
    opacity: 0.94;
  }
}
@keyframes phc-bob {
  0%, 100% { transform: rotate(var(--rot)) translateY(0);    }
  50%      { transform: rotate(var(--rot)) translateY(-4px); }
}

/* polaroid — Gallery: drop and land with a soft bounce */
@keyframes phc-polaroid-in {
  from {
    transform: rotate(calc(var(--rot) + 14deg)) translateY(-52px) scale(0.80);
    opacity: 0;
  }
  60% {
    transform: rotate(calc(var(--rot) - 2deg)) translateY(6px) scale(1.03);
    opacity: 1;
  }
  82% {
    transform: rotate(calc(var(--rot) + 0.8deg)) translateY(-2px) scale(0.99);
    opacity: 0.97;
  }
  to {
    transform: rotate(var(--rot)) translateY(0) scale(1);
    opacity: 0.94;
  }
}

/* pin — Contact: deliberate short drop, stops dead */
@keyframes phc-pin-in {
  from {
    transform: rotate(var(--rot)) translateY(-18px) scale(0.91);
    opacity: 0;
  }
  76% {
    transform: rotate(var(--rot)) translateY(4px) scale(1.02);
    opacity: 0.96;
  }
  to {
    transform: rotate(var(--rot)) translateY(0) scale(1);
    opacity: 0.92;
  }
}

/* ── Style → animation assignment ──────────────────────────── */
.style-drift .phc-piece {
  animation:
    phc-drift-in 0.90s cubic-bezier(.22, 1, .36, 1)            var(--delay, 0s) both,
    phc-float    11s  ease-in-out calc(var(--delay, 0s) + 0.9s) infinite;
}
.style-fall .phc-piece {
  animation:
    phc-fall-in  0.80s cubic-bezier(.22, 1, .36, 1)             var(--delay, 0s) both,
    phc-sway     12s  ease-in-out calc(var(--delay, 0s) + 0.8s) infinite;
}
.style-burst .phc-piece {
  animation:
    phc-burst-in 0.62s cubic-bezier(.22, .68, 0, 1.15)          var(--delay, 0s) both,
    phc-bob      9s   ease-in-out calc(var(--delay, 0s) + 0.62s) infinite;
}
.style-polaroid .phc-piece {
  animation:
    phc-polaroid-in 0.78s cubic-bezier(.34, 1.45, .64, 1)       var(--delay, 0s) both;
}
.style-pin .phc-piece {
  animation:
    phc-pin-in   0.60s cubic-bezier(.22, 1, .36, 1)              var(--delay, 0s) both;
}

/* ── Mobile: cap pieces, keep it light ─────────────────────── */
@media (max-width: 720px) {
  .phc-piece:nth-child(n + 6) { display: none; }
  /* Shift remaining pieces slightly right so they clear narrow text */
  .phc-piece:nth-child(1) { left: 55% !important; }
  .phc-piece:nth-child(2) { left: 72% !important; }
  .phc-piece:nth-child(3) { left: 60% !important; }
  .phc-piece:nth-child(4) { left: 80% !important; }
  .phc-piece:nth-child(5) { left: 65% !important; }
}

/* ── Reduce motion: off entirely ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .phc { display: none; }
}

/* ============================================================
   PAGE HERO v2 — ANIMATED HEADER REDESIGN
   Ghost chapter number + word-stagger h1 + directional reveals
   ============================================================ */

/* Ghost chapter number — large decorative outline digit */
.ph-chapter {
  position: absolute;
  bottom: -8%;
  right: var(--pad);
  font-family: var(--sans);
  font-size: clamp(140px, 26vw, 380px);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(28, 20, 16, 0.07);
  user-select: none;
  pointer-events: none;
  z-index: 0;
  animation: ph-chapter-fade 2.2s cubic-bezier(.2, .6, .2, 1) 0.05s both;
}
.page-hero.dark  .ph-chapter { -webkit-text-stroke: 1.5px rgba(242, 235, 222, 0.06); }
.page-hero.brick .ph-chapter { -webkit-text-stroke: 1.5px rgba(242, 235, 222, 0.07); }
.page-hero.moss  .ph-chapter { -webkit-text-stroke: 1.5px rgba(242, 235, 222, 0.07); }
@keyframes ph-chapter-fade {
  from { opacity: 0; transform: translateX(22px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* Word-mask stagger for h1 */
.page-hero h1.ph-split { overflow: visible; }
.page-hero h1.ph-split .ph-word { display: inline-block; }
.page-hero h1.ph-split .ph-word-inner {
  display: inline-block;
  animation: ph-word-up 0.72s cubic-bezier(.22, 1, .36, 1)
             calc(0.16s + var(--wi, 0) * 0.065s) both;
}
@keyframes ph-word-up {
  from { opacity: 0;   transform: translateY(22px); }
  to   { opacity: 1;   transform: translateY(0);    }
}

/* Crumb — slide from left (overrides generic [data-reveal] translateY) */
.page-hero .crumb[data-reveal] {
  transform: translateX(-20px);
  transition: opacity 0.85s cubic-bezier(.2, .6, .2, 1) 0s,
              transform 0.85s cubic-bezier(.22, 1, .36, 1) 0s;
}
.page-hero .crumb[data-reveal].in { transform: translateX(0); }

/* Lead — slide from left, enters after words finish */
.page-hero .lead[data-reveal] {
  transform: translateX(-16px);
  transition: opacity 1.10s cubic-bezier(.2, .6, .2, 1) 0.52s,
              transform 1.10s cubic-bezier(.22, 1, .36, 1) 0.52s;
}
.page-hero .lead[data-reveal].in {
  opacity: 0.85;
  transform: translateX(0);
}

/* Mobile */
@media (max-width: 720px) {
  .ph-chapter {
    font-size: clamp(90px, 36vw, 160px);
    bottom: 0;
    right: calc(var(--pad) - 8px);
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .ph-chapter                            { animation: none; opacity: 0.07; transform: none; }
  .page-hero h1.ph-split .ph-word-inner  { animation: none; opacity: 1;    transform: none; }
}

/* ============================================================
   MPA VIEW TRANSITIONS — Chrome 126+ / Safari 18.2+
   Nav is pinned (view-transition-name keeps it static).
   Root: outgoing page slips up; incoming rises from below.
   ============================================================ */
@view-transition {
  navigation: auto;
}

.nav {
  view-transition-name: site-nav;
  contain: layout style;
}
::view-transition-old(site-nav),
::view-transition-new(site-nav) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root) {
  animation: vt-out 0.26s cubic-bezier(.4, 0, 1, 1) both;
}
::view-transition-new(root) {
  animation: vt-in  0.44s cubic-bezier(.22, 1, .36, 1) 0.06s both;
}

@keyframes vt-out {
  to { opacity: 0; transform: translateY(-10px) scale(0.99); }
}
@keyframes vt-in {
  from { opacity: 0; transform: translateY(12px) scale(0.99); }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation-duration: 0.001s; animation-delay: 0s; }
}


/* ============================================================
   3D FLIP-BOOK MENU  (menu.html)
   Desktop = stacked-leaf 3D book; mobile / reduced-motion =
   .is-flat un-rotates every face into a vertical photo menu.
   ============================================================ */

body[data-page="menu"] main {
  background: var(--ink);
  color: var(--paper);
}

/* ---- full-screen menu: fill the whole viewport ---- */
body[data-page="menu"] .footer,
body[data-page="menu"] #footer-mount { display: none; }   /* immersive — nav handles navigation */
html:has(body[data-page="menu"]) { scrollbar-width: none; }

.fb-topbar {
  position: absolute; top: 86px; left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  padding: 0 var(--pad); pointer-events: none;
}
.fb-eyebrow {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.3em;
  text-transform: uppercase; opacity: 0.6; color: var(--paper);
}
.fb-eyebrow .sep { color: var(--gold); margin: 0 8px; opacity: 0.85; }
.fb-fs-btn {
  position: absolute; right: var(--pad); top: -7px;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(242,235,222,0.28); background: rgba(242,235,222,0.05);
  color: var(--paper); cursor: pointer; pointer-events: auto;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s;
}
.fb-fs-btn:hover { background: var(--brick); border-color: var(--brick); transform: scale(1.06); }
.fb-fs-ico { font-size: 17px; line-height: 1; margin-top: -1px; }

.fb-wrap {
  position: relative;
  min-height: 100vh; min-height: 100dvh;
  background: var(--ink);
  display: flex; align-items: center; justify-content: center;
  padding: 0; overflow: hidden;
}
.fb-stage {
  /* book fills the viewport: height-driven, capped so the spread still fits the width */
  --fb-ph: min(calc(100dvh - 158px), calc((100vw - 52px) / 1.5708));
  --fb-pw: calc(var(--fb-ph) / 1.2734);
  position: relative;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  perspective: 3000px;
  perspective-origin: 50% 46%;
  opacity: 0; transition: opacity 0.6s ease;
  -webkit-tap-highlight-color: transparent;
  cursor: pointer;
}
.fb-stage.fb-ready { opacity: 1; }

/* book + soft contact shadow on the table */
.fb-book {
  position: relative;
  width: calc(var(--fb-pw) * 2);
  height: var(--fb-ph);
  transform-style: preserve-3d;
  transform: rotateX(6deg);
  transition: transform 0.9s cubic-bezier(.2, .7, .2, 1);
}
.fb-book.at-start { transform: rotateX(6deg) translateX(-25%); }   /* cover centered */
.fb-book.at-end   { transform: rotateX(6deg) translateX(25%);  }   /* back centered */
.fb-book::after {                                                   /* contact shadow */
  content: ''; position: absolute; left: 4%; right: 4%; bottom: -38px; height: 60px;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0.55), rgba(0,0,0,0) 70%);
  transform: rotateX(78deg) translateZ(-20px); filter: blur(3px);
  pointer-events: none; z-index: -1;
}

/* ---- leaves ---- */
.fb-leaf {
  position: absolute; top: 0; left: 50%;
  width: var(--fb-pw); height: var(--fb-ph);
  transform-origin: left center;
  transform-style: preserve-3d;
  transition: transform 0.92s cubic-bezier(.42, .12, .18, 1);
  will-change: transform;
}
.fb-leaf.turned   { transform: rotateY(-180deg); }
.fb-leaf.flipping { z-index: 9999 !important; }

.fb-face {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden;
  background: var(--paper);
  box-shadow: inset 0 0 50px rgba(28,20,16,0.05);
}
.fb-back { transform: rotateY(180deg); }

/* page rounded outer corners + gutter shading */
.fb-front { border-radius: 2px 7px 7px 2px; }
.fb-back  { border-radius: 2px 7px 7px 2px; }
.fb-face::before {                       /* gutter shadow near the spine */
  content: ''; position: absolute; top: 0; bottom: 0; width: 42px; z-index: 4;
  pointer-events: none;
}
.fb-front::before { left: 0;  background: linear-gradient(to right, rgba(28,20,16,0.16), rgba(28,20,16,0)); }
.fb-back::before  { left: 0;  background: linear-gradient(to right, rgba(28,20,16,0.16), rgba(28,20,16,0)); }
/* page darkens slightly while it turns */
.fb-leaf.flipping .fb-face { filter: brightness(0.93); }

/* ---- page content shell ---- */
.fb-page {
  position: relative; height: 100%;
  padding: clamp(20px, 2.4vw, 34px) clamp(20px, 2.4vw, 34px) clamp(16px, 2vw, 26px);
  display: flex; flex-direction: column;
  color: var(--ink);
  background-image:
    radial-gradient(circle at 30% 20%, rgba(190,160,120,0.06), transparent 60%);
}

/* dish-page header */
.fb-page-head { flex: 0 0 auto; margin-bottom: 12px; }
.fb-cat-en {
  font-family: var(--serif); font-style: italic; font-weight: 400;
  font-size: clamp(26px, 3.2vw, 40px); line-height: 1; color: var(--brick);
}
.fb-cat-th {
  font-family: var(--sans); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; opacity: 0.55; margin-top: 7px;
}
.fb-cat-blurb {
  font-family: var(--serif); font-style: italic; font-size: 13px;
  opacity: 0.62; margin-top: 9px; line-height: 1.4;
}

/* dishes list */
.fb-dishes { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: clamp(10px, 1.4vw, 18px); }
.fb-dish { display: flex; gap: 14px; align-items: center; }
.fb-dish-photo {
  flex: 0 0 auto; width: clamp(56px, 6vw, 78px); height: clamp(56px, 6vw, 78px);
  display: flex; align-items: center; justify-content: center;
}
.fb-dish-photo img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(0 4px 6px rgba(28,20,16,0.18));
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), filter 0.5s ease;
}
.fb-dish-text { flex: 1 1 auto; min-width: 0; }
.fb-dish-line { display: flex; align-items: baseline; gap: 6px; }
.fb-dish-name {
  font-family: var(--serif); font-weight: 500; font-size: clamp(15px, 1.5vw, 18px);
  color: var(--ink); white-space: nowrap;
}
.fb-dish-dots { flex: 1 1 auto; border-bottom: 1px dotted rgba(28,20,16,0.28); transform: translateY(-3px); min-width: 12px; }
.fb-dish-price { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--brick); white-space: nowrap; }
.fb-slash { opacity: 0.6; }
.fb-mkt { font-style: italic; font-family: var(--serif); font-weight: 400; }
.fb-chili { font-size: 0.78em; margin-left: 5px; filter: saturate(1.1); }
.fb-dish-th { font-family: var(--sans); font-size: 11px; opacity: 0.6; margin-top: 2px; }
.fb-dish-desc { font-family: var(--serif); font-style: italic; font-size: 12.5px; opacity: 0.72; margin-top: 3px; line-height: 1.35; }

/* lift photos on the active (settled) spread — staggered pop */
.fb-face.active .fb-dish-photo img { transform: translateY(-3px) scale(1.06); filter: drop-shadow(0 10px 13px rgba(28,20,16,0.3)); }
.fb-face.active .fb-dish:nth-child(1) .fb-dish-photo img { transition-delay: 0.10s; }
.fb-face.active .fb-dish:nth-child(2) .fb-dish-photo img { transition-delay: 0.17s; }
.fb-face.active .fb-dish:nth-child(3) .fb-dish-photo img { transition-delay: 0.24s; }
.fb-face.active .fb-dish:nth-child(4) .fb-dish-photo img { transition-delay: 0.31s; }

/* page footer */
.fb-page-foot {
  flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center;
  margin-top: 12px; padding-top: 9px; border-top: 1px solid rgba(28,20,16,0.12);
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5;
}

/* ---- cover ---- */
.fb-front.is-cover .fb-page,
.fb-cover {
  background: var(--brick-deep);
  background-image:
    radial-gradient(circle at 50% 36%, rgba(255,220,170,0.10), transparent 55%),
    linear-gradient(160deg, rgba(0,0,0,0.05), rgba(0,0,0,0.22));
  color: var(--paper);
  align-items: center; justify-content: center; text-align: center;
}
.fb-cover-frame {
  border: 1px solid rgba(242,235,222,0.32); border-radius: 3px;
  padding: clamp(28px, 5vw, 56px) clamp(20px, 4vw, 44px);
  display: flex; flex-direction: column; align-items: center; gap: 0;
}
.fb-cover-est { font-family: var(--sans); font-size: 10px; letter-spacing: 0.3em; text-transform: uppercase; opacity: 0.7; margin-bottom: 22px; }
.fb-cover-mark { font-family: var(--serif); font-size: clamp(40px, 7vw, 76px); line-height: 0.9; letter-spacing: -0.01em; }
.fb-cover-mark sup { font-size: 0.32em; font-style: italic; vertical-align: super; margin-left: 2px; }
.fb-cover-rule { width: 44px; height: 1px; background: var(--gold); margin: 20px 0; opacity: 0.8; }
.fb-cover-menu { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.6vw, 30px); color: var(--gold); }
.fb-cover-th { font-family: var(--sans); font-size: 12px; letter-spacing: 0.12em; opacity: 0.7; margin-top: 8px; }
.fb-cover-open {
  position: absolute; bottom: 22px; right: 26px;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--gold); opacity: 0.85; animation: fb-open-pulse 2.4s ease-in-out infinite;
}
@keyframes fb-open-pulse { 0%,100%{ transform: translateX(0); opacity: 0.55; } 50%{ transform: translateX(4px); opacity: 0.95; } }

/* ---- intro page ---- */
.fb-intro { justify-content: center; }
.fb-intro-eyebrow { font-family: var(--sans); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--brick); opacity: 0.8; }
.fb-intro-title { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 44px); line-height: 1.04; margin: 16px 0 14px; }
.fb-intro-title .it { font-style: italic; color: var(--brick); }
.fb-intro-body { font-family: var(--serif); font-size: 15px; line-height: 1.6; opacity: 0.82; }
.fb-intro-keys { display: flex; gap: 22px; margin: 24px 0 0; font-family: var(--sans); font-size: 12px; opacity: 0.7; }
.fb-intro-keys span { display: inline-flex; align-items: center; gap: 7px; }
.fb-intro-foot { margin-top: auto; padding-top: 18px; font-family: var(--sans); font-size: 10.5px; line-height: 1.5; opacity: 0.5; border-top: 1px solid rgba(28,20,16,0.12); }

/* ---- back cover ---- */
.fb-back.is-back .fb-page,
.fb-back-page { }
.fb-page.fb-back {
  background: var(--brick-deep); color: var(--paper);
  background-image: linear-gradient(160deg, rgba(0,0,0,0.05), rgba(0,0,0,0.22));
  align-items: center; justify-content: center; text-align: center; gap: 4px;
}
.fb-back-mark { font-family: var(--serif); font-size: clamp(30px, 5vw, 50px); line-height: 0.9; }
.fb-back-mark sup { font-size: 0.32em; font-style: italic; vertical-align: super; }
.fb-back-line { font-family: var(--serif); font-style: italic; font-size: 17px; color: var(--gold); margin: 12px 0 22px; }
.fb-back-meta { font-family: var(--sans); font-size: 11px; line-height: 1.7; opacity: 0.7; }
.fb-back-cta { display: inline-block; margin-top: 24px; font-family: var(--sans); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid currentColor; padding-bottom: 3px; }
.fb-blank { background: var(--paper); }

/* ---- controls ---- */
.fb-controls {
  position: absolute; bottom: clamp(18px, 3.4vh, 34px); left: 0; right: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center; gap: 20px;
}
.fb-btn {
  width: 50px; height: 50px; border-radius: 50%;
  border: 1px solid rgba(242,235,222,0.3); background: rgba(242,235,222,0.04);
  color: var(--paper); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.3s, border-color 0.3s, transform 0.3s, opacity 0.3s;
}
.fb-btn:hover { background: var(--brick); border-color: var(--brick); transform: scale(1.06); }
.fb-btn[disabled] { opacity: 0.28; pointer-events: none; }
.fb-arrow { font-size: 24px; line-height: 1; margin-top: -3px; }
.fb-progress { width: clamp(120px, 22vw, 280px); height: 2px; background: rgba(242,235,222,0.16); border-radius: 2px; overflow: hidden; }
.fb-progress-fill { display: block; height: 100%; width: 0; background: var(--gold); transition: width 0.6s cubic-bezier(.2,.7,.2,1); }

.fb-fallback-note { margin-top: 26px; font-family: var(--sans); font-size: 12px; opacity: 0.5; }
.fb-fallback-note a { color: var(--gold); }

/* ============================================================
   FLAT MODE — mobile + reduced-motion:
   one-page-at-a-time HORIZONTAL swipe carousel of the real pages.
   Each page fills the width (readable + pinch-zoomable); swipe or
   tap the arrows to turn. Same faces, no 3D.
   ============================================================ */
.fb-stage.is-flat {
  perspective: none; cursor: default; display: block;
  width: 100%;
  height: min(calc(100dvh - 150px), calc((100vw - 28px) * 1.2734));
  min-height: 0; opacity: 1;
}
.fb-stage.is-flat .fb-book {
  width: 100%; max-width: none; height: 100%; margin: 0 auto;
  transform: none !important; transform-style: flat;
  display: flex; flex-direction: row; gap: 0;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.fb-stage.is-flat .fb-book::-webkit-scrollbar { display: none; }
.fb-stage.is-flat .fb-book::after { display: none; }
.fb-stage.is-flat .fb-leaf { display: contents; }
/* each slide fills the carousel; the page IMAGE is contained inside it,
   so it fits the width in portrait and the height in landscape. */
.fb-stage.is-flat .fb-face {
  position: relative; inset: auto;
  flex: 0 0 100%; width: 100%; height: 100%;
  aspect-ratio: auto;
  display: flex; align-items: center; justify-content: center;
  scroll-snap-align: center;
  backface-visibility: visible; transform: none !important;
  background: transparent; box-shadow: none; border-radius: 0; margin: 0;
}
.fb-stage.is-flat .fb-face::before { display: none; }
.fb-stage.is-flat .fb-blank { display: none; }
.fb-stage.is-flat .fb-open-hint { display: none; }
.fb-stage.is-flat .fb-pageimg {
  position: relative; inset: auto;
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  aspect-ratio: 3024 / 3851;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 14px 34px -18px rgba(0,0,0,0.55);
}
/* controls stay visible on mobile and drive the carousel */
.fb-stage.is-flat ~ .fb-controls { display: flex; }

/* the back-to-top button and the open-hint never belong on the menu */
body[data-page="menu"] .scroll-progress { display: none !important; }
.fb-book:not(.at-start) .fb-open-hint { opacity: 0; visibility: hidden; }
.fb-open-hint { backface-visibility: hidden; -webkit-backface-visibility: hidden; }

/* short viewports (landscape phones): drop the eyebrow so nothing overlaps */
@media (max-height: 600px) {
  .fb-topbar .fb-eyebrow { display: none; }
  .fb-fs-btn { top: -2px; }
}

@media (max-width: 760px) {
  .fb-wrap { padding-left: 14px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .fb-cover-open { animation: none; }
}

/* ============================================================
   SIGNATURE DISH CUTOUTS (cafe-dining) + MENU FEATURE CARD
   ============================================================ */
.sig-grid {
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 4vw, 56px) clamp(24px, 3vw, 44px);
}
@media (max-width: 900px) { .sig-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .sig-grid { grid-template-columns: 1fr; max-width: 360px; } }

.sig-dish { text-align: center; }
.sig-photo {
  position: relative; width: 100%; aspect-ratio: 1 / 1;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.sig-photo::before {           /* soft plate-glow behind the floating cutout */
  content: ''; position: absolute; inset: 14% 8% 6%;
  background: radial-gradient(ellipse at 50% 60%, rgba(255,225,180,0.16), rgba(255,225,180,0) 68%);
  border-radius: 50%; z-index: 0;
}
.sig-photo img {
  position: relative; z-index: 1; max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 18px 26px rgba(0,0,0,0.34));
  transition: transform 0.55s cubic-bezier(.22,1,.36,1), filter 0.55s ease;
}
.sig-dish:hover .sig-photo img { transform: translateY(-8px) scale(1.05) rotate(-1deg); filter: drop-shadow(0 26px 32px rgba(0,0,0,0.4)) saturate(1.06); }

.sig-line { display: flex; align-items: baseline; justify-content: center; gap: 10px; flex-wrap: wrap; }
.sig-name { font-family: var(--serif); font-size: clamp(19px, 2vw, 24px); font-weight: 500; }
.sig-price { font-family: var(--sans); font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--gold); }
.sig-th { font-family: var(--sans); font-size: 12px; letter-spacing: 0.04em; opacity: 0.6; margin-top: 6px; }
.sig-desc { font-family: var(--serif); font-style: italic; font-size: 14px; line-height: 1.5; opacity: 0.78; margin-top: 8px; max-width: 30ch; margin-left: auto; margin-right: auto; }

.sig-cta { text-align: center; margin-top: clamp(46px, 6vw, 80px); }

/* ---- Menu feature card (links to the flip-book) ---- */
.menu-feature {
  display: flex; align-items: center; gap: clamp(24px, 4vw, 56px);
  max-width: 760px; margin: 0 auto;
  background: var(--brick-deep); color: var(--paper);
  border-radius: 4px; padding: clamp(26px, 3.5vw, 40px) clamp(28px, 4vw, 52px);
  box-shadow: 0 30px 60px -30px rgba(28,20,16,0.5);
  transition: transform 0.5s cubic-bezier(.22,1,.36,1), box-shadow 0.5s ease;
}
.menu-feature:hover { transform: translateY(-4px); box-shadow: 0 40px 70px -28px rgba(28,20,16,0.6); }
.menu-feature-thumbs { flex: 0 0 auto; position: relative; width: clamp(120px, 16vw, 168px); height: clamp(110px, 14vw, 150px); }
.menu-feature-thumbs img {
  position: absolute; width: 58%; height: 58%; object-fit: contain;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
  filter: drop-shadow(0 8px 12px rgba(0,0,0,0.4));
  transition: transform 0.55s cubic-bezier(.22,1,.36,1);
}
.menu-feature-thumbs img:nth-child(1) { transform: translate(-92%, -64%) rotate(var(--r)); }
.menu-feature-thumbs img:nth-child(2) { transform: translate(-30%, -76%) rotate(var(--r)); }
.menu-feature-thumbs img:nth-child(3) { transform: translate(-70%, -24%) rotate(var(--r)); }
.menu-feature-thumbs img:nth-child(4) { transform: translate(-8%,  -36%) rotate(var(--r)); }
.menu-feature:hover .menu-feature-thumbs img:nth-child(1) { transform: translate(-104%, -68%) rotate(calc(var(--r) - 3deg)); }
.menu-feature:hover .menu-feature-thumbs img:nth-child(4) { transform: translate(4%, -34%) rotate(calc(var(--r) + 3deg)); }
.menu-feature-text { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.menu-feature-kicker { font-family: var(--sans); font-size: 10px; letter-spacing: 0.26em; text-transform: uppercase; color: var(--gold); }
.menu-feature-title { font-family: var(--serif); font-size: clamp(26px, 3.4vw, 40px); line-height: 1; }
.menu-feature-sub { font-family: var(--serif); font-style: italic; font-size: 15px; opacity: 0.82; margin-top: 4px; }
.menu-feature-sub .arrow { transition: transform 0.4s ease; display: inline-block; }
.menu-feature:hover .menu-feature-sub .arrow { transform: translateX(5px); }
@media (max-width: 560px) {
  .menu-feature { flex-direction: column; text-align: center; }
  .menu-feature-text { text-align: center; align-items: center; }
}

/* 4-up set-plate grid (catering) */
.sig-grid-4 { grid-template-columns: repeat(4, 1fr); max-width: 1240px; }
@media (max-width: 1000px) { .sig-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .sig-grid-4 { grid-template-columns: 1fr; } }

/* ============================================================
   FLIP-BOOK — REAL PAGE IMAGES (overrides generated-page styles)
   ============================================================ */
.fb-face { background: var(--paper); }
.fb-pageimg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block; user-select: none; -webkit-user-drag: none;
}
/* gutter shadow sits above the page image near the spine */
.fb-face::before { z-index: 2; }

/* cover open-hint overlay */
.fb-open-hint {
  position: absolute; bottom: 18px; right: 18px; z-index: 3;
  font-family: var(--sans); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--paper); background: rgba(28,20,16,0.42); backdrop-filter: blur(3px);
  padding: 7px 12px; border-radius: 2px;
  animation: fb-open-pulse 2.4s ease-in-out infinite; pointer-events: none;
}

/* (flat/mobile carousel styles live in the FLAT MODE block above) */

/* visually-hidden, crawlable menu text (SEO / AEO) */
.fb-seo-text {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ============================================================
   No-collision headings: large display type uses line-height < 1
   for single-line impact, but that lets the font's tall glyphs
   overflow their line box and collide when a heading WRAPS — which
   happens at different widths per heading (phone AND laptop).
   ============================================================ */

/* "People. Place. Product." has no manual break, so it wraps across a
   wide range (≈ up to 1150px) — give it safe leading at ALL widths.
   (Invisible while it's a single line on very wide screens.) */
.home-pillars .section-title { line-height: 1.3; }

/* Every other display heading: loosen leading on phones AND laptops,
   where natural wrapping occurs. No effect on single-line headings;
   only stops wrapped lines from colliding. */
@media (max-width: 1180px) {
  .section-title,
  .page-hero h1,
  .menu-intro h1,
  .home-intro h2,
  .home-about-h,
  .home-split-h,
  .home-heritage-title,
  .story-headline,
  .pillars-head h2,
  .pillar-title,
  .fb-intro-title { line-height: 1.3; }
}