/* ============================================================================
   Passionfood — site styles
   Palette pulled straight from a cut passionfruit: plum rind, cream pith,
   golden pulp, near-black seeds. Fraunces (soft) for warmth, Figtree to read.
   ========================================================================== */
:root {
  --cream: #FBF3E4;
  --cream-2: #F6E7CC;
  --paper: #FFFAF1;
  --ink: #2A1430;
  --ink-soft: #5E4762;
  --plum: #4A1D4E;
  --plum-deep: #2B0F2F;
  --plum-2: #6E2C6C;
  --violet: #9A6BC0;
  --gold: #F2AE2E;
  --gold-2: #FFCF5C;
  --gold-deep: #B86E06;
  --seed: #21120A;
  --leaf: #4C7A36;
  --chili: #E0482D;
  --line: rgba(74, 29, 78, 0.14);
  --hover: rgba(74, 29, 78, 0.07);
  --on-plum: #FBF3E4;  /* text on surfaces that remain plum in both themes */
  --plum-ink: #4A1D4E;   /* plum used as a text colour */
  --raised-top: #FFFFFF;  /* raised controls: pills, chips, round buttons */
  --raised-bottom: #FBF3E6;
  --raised-hi: #FFFFFF;

  --radius: 22px;
  --radius-lg: 36px;
  --shadow-sm: 0 1px 2px rgba(43, 15, 47, 0.08), 0 4px 14px -6px rgba(43, 15, 47, 0.18);
  --shadow: 0 2px 4px rgba(43, 15, 47, 0.06), 0 22px 44px -24px rgba(43, 15, 47, 0.38);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Figtree', system-ui, -apple-system, sans-serif;
  --font-hand: 'Caveat', 'Comic Sans MS', cursive;
  --font-thai: 'IBM Plex Sans Thai Looped', 'Noto Sans Thai', sans-serif;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* a tiny spoon for stirring the passionfruit */
  --spoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cellipse cx='9' cy='9' rx='6.5' ry='5' transform='rotate(45 9 9)' fill='%23F7D27A' stroke='%234A1D4E' stroke-width='1.6'/%3E%3Cpath d='M13 13 L28 28' stroke='%234A1D4E' stroke-width='3.4' stroke-linecap='round'/%3E%3Cpath d='M13 13 L28 28' stroke='%23F7D27A' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") 6 6, grab;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--cream); color: var(--ink);
  font-family: var(--font-body); font-size: 17px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden;
}
/* paper grain */
body::after {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 200; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .17 0 0 0 0 .08 0 0 0 0 .19 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* The tilted marquee is wider than the page on purpose; clip it here so phones
   never get a sideways-scrolling, zoomed-out layout. `clip` keeps sticky working. */
main { overflow-x: clip; }
[hidden] { display: none !important; }
/* Suspend decorative motion offscreen without changing its appearance or phase. */
[data-motion-paused], [data-motion-paused] *, [data-motion-hidden] * {
  animation-play-state: paused !important;
}
/* The pause button (html[data-motion='paused']) holds every decorative loop
   where it is. The hero photos' scroll depth follows the scroll, not the
   clock, so it stays live. */
[data-motion='paused'] :is([data-hero-bg], [data-festoon], [data-sky], [data-ticket-sky], [data-vine], [data-line], .marquee) :not(.hero-wall, .hero-floats) {
  animation-play-state: paused !important;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
.sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 300; background: var(--plum); color: var(--on-plum); padding: 10px 16px; border-radius: 12px; transition: top 0.2s; }
.skip:focus { top: 12px; }

.container { width: min(1200px, 100% - 48px); margin-inline: auto; }
@media (max-width: 600px) { .container { width: calc(100% - 32px); } }

h1, h2, h3 {
  font-family: var(--font-display); font-weight: 560; line-height: 1.04; letter-spacing: -0.02em; margin: 0;
  font-variation-settings: 'SOFT' 100, 'WONK' 0; font-optical-sizing: auto; text-wrap: balance;
}
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--gold-deep); font-variation-settings: 'SOFT' 100, 'WONK' 1; }
h2 { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
h3 { font-size: 1.45rem; }
p { margin: 0; text-wrap: pretty; }
.thai { font-family: var(--font-thai); letter-spacing: 0; text-transform: none; font-weight: 500; }
.hand { font-family: var(--font-hand); font-weight: 600; font-size: 1.45rem; line-height: 1.1; color: var(--plum-2); }
/* hidden for the moment it takes to swap in Thai or Chinese (see the top of each page) */
.i18n-pending body { visibility: hidden; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 0.65em; margin-bottom: 18px;
  font: 700 0.78rem/1.2 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--plum-2);
}
.eyebrow::before {
  content: ''; width: 9px; height: 12px; border-radius: 50%; background: var(--seed);
  box-shadow: 0 0 0 3px var(--gold); transform: rotate(25deg);
}
.eyebrow .thai { font-size: 0.95rem; letter-spacing: 0; color: var(--gold-deep); white-space: nowrap; }
.hero .eyebrow { flex-wrap: wrap; justify-content: center; row-gap: 4px; }
.on-touch { display: none; }
@media (hover: none) { .on-touch { display: inline; } .on-hover { display: none; } }
.show-sm { display: none; }
@media (max-width: 420px) { .hide-sm { display: none; } .show-sm { display: inline; } }
.i--down { --icon: var(--i-arrow); transform: rotate(90deg); }
.btn:hover .i--down { transform: rotate(90deg) translateX(2px); }
.i { transition: transform 0.35s var(--ease-out); }
.eyebrow--light { color: var(--gold-2); }
.eyebrow--light::before { background: var(--gold); box-shadow: 0 0 0 3px var(--plum-2); }

:root {
  --i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
  --i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-minus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
  --i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
  --i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M20 4l-9 9M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E");
  --i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.6 3.5h2.6l1.5 4.2-2 1.4a11.5 11.5 0 0 0 6.2 6.2l1.4-2 4.2 1.5v2.6a1.6 1.6 0 0 1-1.7 1.6A16.6 16.6 0 0 1 3.5 5.2a1.6 1.6 0 0 1 1.6-1.7z'/%3E%3C/svg%3E");
  --i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2.5'/%3E%3Cpath d='M3.8 7.2l8.2 5.8 8.2-5.8'/%3E%3C/svg%3E");
  --i-whatsapp: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5a8.5 8.5 0 0 0-7.3 12.8L3.5 20.5l4.3-1.1A8.5 8.5 0 1 0 12 3.5z'/%3E%3Cpath d='M9.3 8.4c.3-.3.7-.4 1-.2l.9 2-.7 1c.6 1.1 1.4 1.9 2.5 2.5l1-.7 2 .9c.2.3.1.7-.2 1a2.7 2.7 0 0 1-2.6.7 7.6 7.6 0 0 1-4.3-4.3 2.7 2.7 0 0 1 .7-2.6z' stroke-width='1.4'/%3E%3C/svg%3E");
  --i-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-6.5-5.6-6.5-11a6.5 6.5 0 0 1 13 0c0 5.4-6.5 11-6.5 11z'/%3E%3Ccircle cx='12' cy='10' r='2.4'/%3E%3C/svg%3E");
  --i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='M12 7.5V12l3 2'/%3E%3C/svg%3E");
  --i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2.5'/%3E%3Cpath d='M3.5 9.5h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
  --i-instagram: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='3.5' width='17' height='17' rx='5'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Ccircle cx='17.2' cy='6.8' r='.6' fill='%23000'/%3E%3C/svg%3E");
  --i-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l2.9 6.1 6.6.8-4.9 4.6 1.3 6.5L12 17.3l-5.9 3.2 1.3-6.5L2.5 9.4l6.6-.8z'/%3E%3C/svg%3E");
  --i-sparkle: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12 2.5l1.9 6.6 6.6 1.9-6.6 1.9L12 19.5l-1.9-6.6L3.5 11l6.6-1.9z'/%3E%3C/svg%3E");
  --i-facebook: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13.5 21v-7.5h2.6l.4-3h-3V8.7c0-.9.3-1.5 1.5-1.5h1.6V4.5c-.3 0-1.2-.1-2.3-.1-2.3 0-3.9 1.4-3.9 4v2.1H7.8v3h2.6V21z'/%3E%3C/svg%3E");
  --i-tiktok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M15.8 3c.3 2.2 1.6 3.6 3.7 3.8v3c-1.4.1-2.7-.4-3.7-1.1v6.1a5.3 5.3 0 1 1-5.3-5.3l.6.1v3.1a2.3 2.3 0 1 0 1.6 2.2V3z'/%3E%3C/svg%3E");
  --i-check-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B0F2F' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --i-plus-plum: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A1D4E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-check-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFD36B' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
  --i-plus-ink: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232B0F2F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-plus-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F5EADC' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
  --i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.5 2.5 3.8 5.5 3.8 9s-1.3 6.5-3.8 9c-2.5-2.5-3.8-5.5-3.8-9S9.5 5.5 12 3Z'/%3E%3C/svg%3E");
  --i-sun: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='4.2'/%3E%3Cpath d='M12 2.6v2.1M12 19.3v2.1M2.6 12h2.1M19.3 12h2.1M5.4 5.4l1.5 1.5M17.1 17.1l1.5 1.5M5.4 18.6l1.5-1.5M17.1 6.9l1.5-1.5'/%3E%3C/svg%3E");
  --i-moon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M20.3 14.7A8.6 8.6 0 0 1 9.3 3.7a8.7 8.7 0 1 0 11 11Z'/%3E%3C/svg%3E");
}
.i { display: inline-block; width: 1em; height: 1em; flex: none; vertical-align: -0.14em; background: currentColor; -webkit-mask: var(--icon) center / contain no-repeat; mask: var(--icon) center / contain no-repeat; }
.i--arrow { --icon: var(--i-arrow); }
.i--check { --icon: var(--i-check); }
.i--plus { --icon: var(--i-plus); }
.i--minus { --icon: var(--i-minus); }
.i--close { --icon: var(--i-close); }
.i--external { --icon: var(--i-external); }
.i--phone { --icon: var(--i-phone); }
.i--mail { --icon: var(--i-mail); }
.i--whatsapp { --icon: var(--i-whatsapp); }
.i--pin { --icon: var(--i-pin); }
.i--clock { --icon: var(--i-clock); }
.i--calendar { --icon: var(--i-calendar); }
.i--globe { --icon: var(--i-globe); }
.i--instagram { --icon: var(--i-instagram); }
.i--star { --icon: var(--i-star); }
.i--sparkle { --icon: var(--i-sparkle); }
.i--facebook { --icon: var(--i-facebook); }
.i--tiktok { --icon: var(--i-tiktok); }
.i--arrow-l { --icon: var(--i-arrow); transform: scaleX(-1); }

/* ---------- buttons ----------
   One material for every button: a soft vertical gradient, a hairline edge,
   an inner top highlight and a glow tinted by the button's own colour.
   On hover a sheen glides *under* the label; arrow chips swap their arrow. */
.btn {
  --h: 54px; --px: 24px; --chip: 38px;
  --bg: linear-gradient(180deg, #66305F 0%, #4A1D4E 52%, #3B1440 100%);
  --fg: #FFF5E6;
  --hi: rgba(255, 255, 255, 0.18);
  --edge: rgba(26, 4, 30, 0.55);
  --glow: rgba(74, 29, 78, 0.45);
  --sheen: rgba(255, 255, 255, 0.22);
  --chip-bg: linear-gradient(180deg, #FFDA82 0%, #F7BC45 55%, #EEA623 100%);
  --chip-fg: #2B0F2F;
  --chip-ring: rgba(150, 86, 0, 0.3);
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: var(--h); padding: 0 var(--px); border: 0; border-radius: 999px;
  background: var(--bg); color: var(--fg);
  font: 650 1rem/1 var(--font-body); letter-spacing: -0.006em; white-space: nowrap; text-decoration: none;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  box-shadow:
    inset 0 1px 0 var(--hi),
    inset 0 -1px 0 rgba(0, 0, 0, 0.12),
    0 0 0 1px var(--edge),
    0 1px 1px rgba(43, 15, 47, 0.1),
    0 10px 22px -10px var(--glow);
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out), background-color 0.25s, color 0.25s;
}
.btn::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: linear-gradient(105deg, transparent 28%, var(--sheen) 46%, transparent 64%);
  transform: translateX(-130%); transition: transform 0.9s var(--ease-out);
}
.btn:hover { transform: translateY(-1.5px); box-shadow: inset 0 1px 0 var(--hi), inset 0 -1px 0 rgba(0, 0, 0, 0.12), 0 0 0 1px var(--edge), 0 2px 4px rgba(43, 15, 47, 0.1), 0 18px 34px -14px var(--glow); }
.btn:hover::before { transform: translateX(130%); }
.btn:active { transform: translateY(0.5px) scale(0.985); transition-duration: 0.12s; box-shadow: inset 0 1px 0 var(--hi), inset 0 2px 4px rgba(0, 0, 0, 0.16), 0 0 0 1px var(--edge), 0 4px 10px -6px var(--glow); }
.btn:focus-visible { outline: none; box-shadow: inset 0 1px 0 var(--hi), 0 0 0 1px var(--edge), 0 0 0 4px var(--cream), 0 0 0 6px var(--gold-deep); }
.btn:disabled { opacity: 0.45; pointer-events: none; }
.btn .i { width: 18px; height: 18px; }

/* round chip at the end of a button, with an arrow that slides through */
.btn__chip {
  position: relative; flex: none; width: var(--chip); height: var(--chip); border-radius: 50%; overflow: hidden;
  margin-right: calc((var(--h) - var(--chip)) / 2 - var(--px));
  background: var(--chip-bg); color: var(--chip-fg);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 0 0 1px var(--chip-ring), 0 3px 8px -3px rgba(0, 0, 0, 0.35);
}
.btn__chip::before, .btn__chip::after {
  content: ''; position: absolute; inset: 0; background: currentColor;
  -webkit-mask: var(--i-arrow) center / 46% no-repeat; mask: var(--i-arrow) center / 46% no-repeat;
  transition: transform 0.55s var(--ease-out);
}
.btn__chip::after { transform: translateX(-150%); }
.btn:hover .btn__chip::before { transform: translateX(150%); }
.btn:hover .btn__chip::after { transform: translateX(0); }
.btn__chip--back::before, .btn__chip--back::after { scale: -1 1; }

/* the price, set like a little coin */
.btn__price {
  display: inline-flex; align-items: center; height: var(--chip); padding: 0 14px; border-radius: 999px; flex: none;
  margin-right: calc((var(--h) - var(--chip)) / 2 - var(--px));
  background: var(--chip-bg); color: var(--chip-fg);
  font-weight: 750; font-size: 0.95em; letter-spacing: 0; font-variant-numeric: tabular-nums lining-nums;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 0 1px var(--chip-ring), 0 3px 8px -3px rgba(0, 0, 0, 0.35);
}

.btn--sm { --h: 44px; --px: 18px; --chip: 32px; gap: 10px; font-size: 0.94rem; }
.btn--lg { --h: 64px; --px: 30px; --chip: 46px; font-size: 1.08rem; }
.btn--gold {
  --bg: linear-gradient(180deg, #FFDD8A 0%, #F8BE48 50%, #EEA623 100%);
  --fg: #2B0F2F; --hi: rgba(255, 255, 255, 0.75); --edge: rgba(150, 86, 0, 0.34); --glow: rgba(214, 138, 10, 0.6); --sheen: rgba(255, 255, 255, 0.55);
  --chip-bg: linear-gradient(180deg, #5E2A5B 0%, #3A1340 100%); --chip-fg: #FFD36B; --chip-ring: rgba(26, 4, 30, 0.45);
}
.btn--ghost {
  --bg: rgba(255, 252, 246, 0.6); --fg: var(--plum); --hi: #fff; --edge: rgba(74, 29, 78, 0.16); --glow: rgba(74, 29, 78, 0); --sheen: rgba(242, 174, 46, 0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.btn--ghost:hover { --bg: #FFFCF7; --edge: rgba(74, 29, 78, 0.3); --glow: rgba(74, 29, 78, 0.22); }
.btn--outline-light { --bg: rgba(255, 243, 222, 0.06); --fg: #FFF3DE; --hi: rgba(255, 255, 255, 0.12); --edge: rgba(255, 226, 180, 0.34); --glow: rgba(0, 0, 0, 0); --sheen: rgba(255, 226, 180, 0.16); }
.btn--outline-light:hover { --bg: rgba(255, 243, 222, 0.12); --edge: rgba(255, 226, 180, 0.6); --glow: rgba(0, 0, 0, 0.3); }

/* text link with a growing underline and a travelling arrow */
.link-btn {
  display: inline-flex; align-items: center; gap: 8px; padding: 3px 0; border: 0; cursor: pointer;
  color: var(--plum-2); font-weight: 700; text-decoration: none;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 100% 2px no-repeat;
  transition: background-size 0.4s var(--ease-out), color 0.2s;
}
.link-btn::after { content: ''; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--i-arrow) center / contain no-repeat; mask: var(--i-arrow) center / contain no-repeat; transition: transform 0.35s var(--ease-out); }
.link-btn:hover { color: var(--plum-ink); background-size: 0% 2px; background-position: 100% 100%; }
.link-btn:hover::after { transform: translateX(4px); }

/* circular icon buttons */
.round-btn {
  width: 46px; height: 46px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; flex: none;
  color: var(--plum-ink); background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom));
  box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.14), 0 1px 2px rgba(43, 15, 47, 0.08), 0 8px 16px -10px rgba(43, 15, 47, 0.45);
  transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out), color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.round-btn .i { width: 18px; height: 18px; transition: transform 0.3s var(--ease-out); }
.round-btn:hover { transform: translateY(-1px); color: var(--plum-deep); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.28), 0 2px 4px rgba(43, 15, 47, 0.08), 0 14px 22px -12px rgba(43, 15, 47, 0.5); }
.round-btn:hover .i--arrow { transform: translateX(2px); }
.round-btn:hover .i--arrow-l { transform: scaleX(-1) translateX(2px); }
.round-btn:active { transform: scale(0.94); transition-duration: 0.1s; }
.round-btn:disabled { opacity: 0.35; pointer-events: none; }
.round-btn--light { color: #FFF3DE; background: rgba(255, 250, 241, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 1px rgba(255, 226, 180, 0.28); }
.round-btn--light:hover { color: #fff; background: rgba(255, 250, 241, 0.16); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 0 0 1px rgba(255, 226, 180, 0.5); }

/* rating stars, drawn as a masked strip so they're always crisp */
.stars { display: inline-block; width: 5.6em; height: 1em; vertical-align: -0.14em; background: linear-gradient(180deg, #FFCB52, #E39410); -webkit-mask: var(--i-star) 0 0 / 1.12em 1em repeat-x; mask: var(--i-star) 0 0 / 1.12em 1em repeat-x; }

/* ---------- nav ---------- */
.nav {
  position: fixed; top: 12px; left: 50%; transform: translateX(-50%); z-index: 60;
  width: min(1220px, 100% - 24px); display: flex; align-items: center; gap: 20px;
  padding: 8px 8px 8px 14px; border-radius: 999px;
  transition: background 0.35s, box-shadow 0.35s, backdrop-filter 0.35s;
}
.nav.is-scrolled {
  background: rgba(255, 250, 241, 0.84); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 30px -18px rgba(43, 15, 47, 0.45), inset 0 0 0 1px var(--line);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.brand__mark { width: 40px; height: 40px; flex: none; transition: transform 0.6s var(--ease-spring); }
.brand:hover .brand__mark { transform: rotate(160deg); }
.brand__name { font: 600 1.3rem/1 var(--font-display); font-variation-settings: 'SOFT' 100; letter-spacing: -0.01em; display: grid; gap: 3px; }
.brand__name small { font: 600 0.66rem/1 var(--font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.nav__links { display: flex; align-items: center; gap: 4px; }
.nav__links a, .nav__book {
  padding: 9px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; color: var(--ink);
  transition: background 0.2s;
}
.nav__links a:hover, .nav__book:hover { background: rgba(74, 29, 78, 0.07); }
.nav__book { display: inline-flex; align-items: center; gap: 7px; border: 0; background: none; cursor: pointer; color: var(--plum-2); }
/* the nav never squeezes its booking button or wraps a label: it tightens up first,
   then folds into the menu button (Thai and English need ~1100px laid out in full) */
.nav__cta { flex: none; }
.nav__links a, .nav__book { white-space: nowrap; }
@media (min-width: 1061px) and (max-width: 1199px) {
  .nav { gap: 14px; }
  .brand__name small { display: none; }
  .nav__links a, .nav__book { padding: 9px 10px; }
}
.nav__book svg { width: 18px; height: 18px; }
.nav__toggle { display: none; }
@media (max-width: 1060px) {
  .nav__links {
    position: absolute; top: calc(100% + 10px); left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 2px;
    padding: 12px; border-radius: 26px; background: var(--paper); box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
    opacity: 0; transform: translateY(-8px) scale(0.98); pointer-events: none; transition: opacity 0.25s, transform 0.3s var(--ease-out);
  }
  .nav__links a, .nav__book { padding: 14px 16px; font-size: 1.05rem; }
  .nav.is-open .nav__links { opacity: 1; transform: none; pointer-events: auto; }
  .nav.is-open { background: rgba(255, 250, 241, 0.95); }
  .nav__toggle {
    display: grid; place-content: center; gap: 5px; width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
    background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom));
    box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.14), 0 8px 16px -10px rgba(43, 15, 47, 0.45);
  }
  .nav__toggle span:not(.sr) { width: 18px; height: 2px; border-radius: 2px; background: var(--plum); transition: transform 0.3s var(--ease-out); }
  .nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(3.5px) rotate(45deg); }
  .nav.is-open .nav__toggle span:nth-child(2) { transform: translateY(-3.5px) rotate(-45deg); }
}
@media (max-width: 520px) {
  .nav { gap: 10px; }
  .brand__name small { display: none; }
  .nav__cta { padding: 9px 14px; }
}
@media (max-width: 374px) { .nav .brand__name { display: none; } }

/* language menu and light/dark switch (js/i18n.js) */
.prefs { display: flex; align-items: center; gap: 2px; margin-left: 6px; }
.pref-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; min-width: 38px; padding: 0 11px; border: 0; border-radius: 999px; background: none; color: var(--ink); font: 650 0.86rem/1 var(--font-body); cursor: pointer; transition: background 0.2s, color 0.2s; }
.pref-btn:hover, .pref-btn[aria-expanded='true'] { background: var(--hover); }
.pref-btn:focus-visible { outline: 3px solid var(--gold); outline-offset: 1px; }
.pref-btn .i { width: 17px; height: 17px; }
.lang { position: relative; }
.lang__menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 5; min-width: 168px; margin: 0; padding: 6px; list-style: none; border-radius: 18px; background: var(--paper); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.lang__menu a { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border-radius: 12px; text-decoration: none; font-weight: 600; color: var(--ink); }
.lang__menu a:hover, .lang__menu a:focus-visible { background: var(--hover); outline: none; }
.lang__menu a[aria-current] { color: var(--plum-2); }
.lang__menu a[aria-current]::after { content: ''; width: 14px; height: 14px; background: currentColor; -webkit-mask: var(--i-check) center / contain no-repeat; mask: var(--i-check) center / contain no-repeat; }
/* the switch shows where it will take you: a moon by day, a sun by night */
.theme-btn { padding: 0; width: 38px; }
.theme-btn span { position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; background: currentColor; transition: transform 0.5s var(--ease-spring), opacity 0.25s; }
.theme-btn__moon { -webkit-mask: var(--i-moon) center / contain no-repeat; mask: var(--i-moon) center / contain no-repeat; }
.theme-btn__sun { -webkit-mask: var(--i-sun) center / contain no-repeat; mask: var(--i-sun) center / contain no-repeat; opacity: 0; transform: rotate(-90deg) scale(0.5); }
[data-theme='dark'] .theme-btn__moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme='dark'] .theme-btn__sun { opacity: 1; transform: none; color: var(--gold-2); }
@media (max-width: 1060px) {
  .nav__links .prefs { justify-content: space-between; margin: 6px 0 0; padding: 10px 6px 2px; border-top: 1px solid var(--line); }
  .nav__links .lang__menu { top: auto; bottom: calc(100% + 8px); right: auto; left: 0; }
}
.bk-nav .prefs { margin: 0 8px 0 auto; }
/* fingers get the full 44px */
@media (pointer: coarse) { .pref-btn { height: 44px; min-width: 44px; } }
/* pause / play for everything that moves by itself: two bars, or a triangle once paused */
.motion-btn__icon { width: 12px; height: 12px; flex: none; border-radius: 1.5px; background: linear-gradient(90deg, currentColor 0 34%, transparent 34% 66%, currentColor 66%); }
.motion-btn.is-paused .motion-btn__icon { border-radius: 0; background: currentColor; clip-path: polygon(12% 0, 100% 50%, 12% 100%); }
.prefs .motion-btn { padding: 0; width: 38px; }
.motion-btn--day { display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 17px 0 15px; border: 0; border-radius: 999px; background: none; color: var(--ink-soft); font: 650 0.86rem/1 var(--font-body); cursor: pointer; box-shadow: inset 0 0 0 1.5px var(--line); transition: background 0.2s, color 0.2s, box-shadow 0.2s; }
.motion-btn--day:hover { background: var(--hover); color: var(--ink); }
.motion-btn--day:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.motion-btn--day.is-paused { color: var(--plum-ink); box-shadow: inset 0 0 0 1.5px rgba(110, 44, 108, 0.4); }
@media (pointer: coarse) { .prefs .motion-btn { width: 44px; } .motion-btn--day { height: 44px; } }

/* ---------- hero ---------- */
.hero { position: relative; padding-top: 168px; overflow: hidden; }
@media (max-width: 720px) { .hero { padding-top: 132px; } }
.hero::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 100%; z-index: -1;
  background:
    radial-gradient(40% 30% at 12% 20%, rgba(154, 107, 192, 0.12), transparent 70%),
    radial-gradient(40% 30% at 90% 15%, rgba(242, 174, 46, 0.14), transparent 70%);
}
.festoon { position: absolute; top: 0; left: 0; width: 100%; height: 170px; pointer-events: none; overflow: visible; z-index: 1; }
.hero__copy, .stage, .stage-ui { z-index: 2; }

/* real students, softly, behind the hero */
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse 34% 26% at 50% 25%, rgba(251, 243, 228, 0.96) 0%, rgba(251, 243, 228, 0.78) 48%, rgba(251, 243, 228, 0) 100%),
    linear-gradient(to bottom, rgba(251, 243, 228, 0.15) 0%, rgba(251, 243, 228, 0) 22%, rgba(251, 243, 228, 0) 34%, var(--cream) 62%);
}
.hero-wall { position: absolute; left: -24px; right: -24px; top: -80px; height: 78%; opacity: 0.2; isolation: isolate; will-change: transform; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 100%); }
.hero-wall__cols { display: flex; gap: 16px; height: 100%; }
.hero-wall__col { flex: 1 1 0; min-width: 0; margin-top: var(--shift); }
/* Filter each moving strip so the browser can reuse its filtered surface. */
.hero-wall__strip { display: grid; gap: 16px; animation: wallDrift var(--dur) linear infinite; animation-direction: var(--dir); filter: grayscale(1) contrast(1.05) brightness(1.12); }
@keyframes wallDrift { to { transform: translateY(-50%); } }
.hero-wall__tile { margin: 0; aspect-ratio: 4 / 5; border-radius: 20px; overflow: hidden; background: var(--cream-2); }
.hero-wall__tile.is-tall { aspect-ratio: 3 / 4.4; }
.hero-wall__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-wall__tile picture, .hero-pola__frame picture { display: contents; }
.hero-wall__tint { position: absolute; inset: 0; background: linear-gradient(165deg, #7A3D78 0%, #C07A3A 50%, #F2B640 100%); mix-blend-mode: color; }
.hero-bg::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(251, 243, 228, 0.55) 0, rgba(251, 243, 228, 0) 150px); }
.hero-floats { position: absolute; inset: 0; z-index: 2; will-change: transform; }
.hero-pola { position: absolute; top: var(--y); width: var(--w); margin: 0; padding: 9px 9px 30px; background: #FFFDF8; border-radius: 6px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 22px 40px -20px rgba(43, 15, 47, 0.55); transform: rotate(var(--r)); animation: polaBob var(--bob) ease-in-out infinite alternate; }
.hero-pola::before { content: ''; position: absolute; top: -9px; left: 50%; width: 64px; height: 20px; margin-left: -32px; background: rgba(242, 174, 46, 0.42); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
@keyframes polaBob { to { transform: rotate(calc(var(--r) * 0.55)) translateY(-9px); } }
.hero-pola__frame { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 3px; background: var(--cream-2); }
.hero-pola__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity 1.4s ease, transform 7s ease-out; }
.hero-pola__frame img.is-on { opacity: 1; transform: scale(1); }
.hero-pola figcaption { position: absolute; left: 0; right: 0; bottom: 4px; text-align: center; font-size: 1.1rem; color: var(--plum-2); }
@media (max-width: 1240px) { .hero-floats { display: none; } }
/* Scroll depth: over the first 1.5 screens the wall drifts down at 18% of the
   scroll and the polaroids rise at 12%. It is a scroll-driven animation, so the
   browser moves it on its scrolling thread, in lockstep with the page (script
   always landed a frame late, which jittered in Safari). Browsers that can't
   do that smoothly simply let the photos scroll with the page. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-wall, .hero-floats {
      animation-name: heroWallDepth; animation-duration: auto; animation-timing-function: linear; animation-fill-mode: both;
      animation-timeline: scroll(root); animation-range: 0 150vh;
    }
    .hero-floats { animation-name: heroFloatDepth; }
    /* it follows the scroll, not the clock, so it stays live when the hero's other motion pauses */
    .hero-bg .hero-wall, .hero-bg .hero-floats { animation-play-state: running !important; }
  }
}
/* Safari 26.0–26.3 understand scroll timelines but drive them from the main
   thread, which jitters the same way; the threaded version arrived in 26.4
   together with display: grid-lanes, which tells the two apart. */
@supports (font: -apple-system-body) and (not (display: grid-lanes)) {
  .hero-bg .hero-wall, .hero-bg .hero-floats { animation: none !important; }
}
@keyframes heroWallDepth { to { transform: translate3d(0, 27vh, 0); } }
@keyframes heroFloatDepth { to { transform: translate3d(0, -18vh, 0); } }
@media (max-width: 720px) { .hero-wall { height: 64%; opacity: 0.18; } .hero-wall__cols, .hero-wall__strip { gap: 10px; } .hero-wall__tile { border-radius: 14px; } }
@media (prefers-reduced-motion: reduce) { .hero-wall__strip, .hero-pola { animation: none; } }

.festoon .bulb { animation: twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.hero__copy { text-align: center; position: relative; }
.hero h1 { font-family: 'Fraunces Hero', var(--font-display); font-size: clamp(2.9rem, 7.6vw, 6.6rem); font-weight: 600; max-width: 13ch; margin: 0 auto; }
.lede { max-width: 40rem; margin: 22px auto 0; font-size: clamp(1.05rem, 1.6vw, 1.22rem); color: var(--ink-soft); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-top: 32px; }
.hero__ctas .btn { --h: 58px; }
@media (max-width: 520px) {
  .hero__ctas { flex-direction: column; align-items: stretch; width: min(320px, 100%); margin-inline: auto; }
  .hero__ctas .btn { justify-content: space-between; }
  .hero__ctas .btn--ghost { padding-right: 22px; }
}
.proof { margin-top: 18px; font-size: 0.95rem; color: var(--ink-soft); text-wrap: balance; }
.proof .stars { margin-right: 4px; }
.proof strong { margin-right: 2px; }
/* the two listings themselves, one tap away */
.proof a { color: var(--ink); font-weight: 650; text-decoration: underline 2px; text-decoration-color: var(--gold); text-underline-offset: 3px; transition: color 0.2s, text-decoration-color 0.2s; }
.proof a:hover { color: var(--plum-ink); text-decoration-color: currentColor; }

/* Three snaps from class, fanned out under the headline wherever the side
   polaroids don't fit: a kitchen shot, a plate, and the sign lit up at night. */
.snaps { display: none; }
@media (max-width: 1240px) {
  .snaps { display: flex; justify-content: center; align-items: flex-start; margin: 30px auto 0; }
  .snap {
    --w: clamp(78px, 25vw, 150px);
    position: relative; flex: none; width: var(--w); margin: 0 -3px; padding: 6px 6px 26px;
    background: #FFFDF8; border-radius: 5px; rotate: var(--r);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 18px 30px -16px rgba(43, 15, 47, 0.5);
  }
  .snap--wide { --w: clamp(116px, 37vw, 222px); z-index: 1; margin: 16px 2px 0; }
  .snap::before { content: ''; position: absolute; top: -8px; left: 50%; width: 46%; height: 17px; margin-left: -23%; background: rgba(242, 174, 46, 0.42); transform: rotate(-4deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
  .snap picture { display: contents; }
  .snap img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 2px; background: var(--cream-2); }
  .snap--wide img { aspect-ratio: 3 / 2; }
  .snap figcaption { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 1.08rem; white-space: nowrap; }
}
@media (max-width: 359px) { .snap { margin: 0 -1px; } .snap figcaption { font-size: 0.95rem; } }

.stage { position: relative; margin: 14px auto 0; width: min(1260px, 100%); padding: 0; }
.stage canvas { display: block; width: 100%; touch-action: pan-y; cursor: grab; -webkit-tap-highlight-color: transparent; }
.stage__hint { position: absolute; right: max(24px, 6%); top: 18%; transform: rotate(6deg); color: var(--plum-2); opacity: 0.85; pointer-events: none; }
@media (max-width: 720px) { .stage__hint { top: 2%; right: 16px; font-size: 1.2rem; } }

.stage-ui { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; margin-top: -6px; padding-bottom: 72px; position: relative; z-index: 2; }
/* phones: the opening packs a little closer, so the snaps and the carousel both arrive sooner */
@media (max-width: 520px) {
  .lede { margin-top: 16px; }
  .hero__ctas { margin-top: 24px; gap: 10px; }
  .proof { margin-top: 14px; }
  .snaps { margin-top: 24px; }
  .stage { margin-top: -14px; }
  .stage__hint { top: 7%; }
  .stage-ui { padding-bottom: 48px; }
}
.caption {
  display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start;
  background: var(--paper); border-radius: var(--radius); padding: 20px 24px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
  min-height: 150px;
}
.caption.is-in .caption__text > *, .caption.is-in .caption__taste { animation: capIn 0.5s var(--ease-out) both; }
.caption.is-in .caption__text > *:nth-child(2) { animation-delay: 0.04s; }
.caption.is-in .caption__text > *:nth-child(3) { animation-delay: 0.08s; }
@keyframes capIn { from { opacity: 0; transform: translateY(8px); } }
.caption__cat { --cat: var(--plum-2); font: 700 0.74rem/1 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cat); margin-bottom: 6px; }
.caption__name { font-size: 1.8rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.caption__thai { font-size: 1.05rem; color: var(--gold-deep); font-weight: 500; }
.caption__desc { margin-top: 8px; color: var(--ink-soft); max-width: 60ch; }
.caption__note { margin-top: 6px; font-family: var(--font-hand); font-size: 1.35rem; color: var(--plum-2); line-height: 1.1; }
.caption__note:empty { display: none; }
.caption .link-btn { margin-top: 10px; }
.stage-controls { display: grid; gap: 14px; justify-items: end; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 430px; }
.chip {
  --cat: var(--plum); display: inline-flex; align-items: center; gap: 9px; height: 40px; padding: 0 16px 0 14px; border-radius: 999px; border: 0; cursor: pointer;
  background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); color: var(--ink); font-weight: 650; font-size: 0.92rem; white-space: nowrap;
  box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.13), 0 6px 14px -10px rgba(43, 15, 47, 0.45);
  transition: box-shadow 0.25s, transform 0.3s var(--ease-out), color 0.25s;
}
.chip::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 0 3px color-mix(in srgb, var(--cat) 20%, transparent); }
.chip:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px color-mix(in srgb, var(--cat) 55%, transparent), 0 10px 18px -12px rgba(43, 15, 47, 0.5); }
.chip:active { transform: scale(0.97); }
.chip[aria-pressed='true'] { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.08)), var(--cat); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 0 0 1px color-mix(in srgb, var(--cat) 75%, #000), 0 10px 20px -10px var(--cat); }
.chip[aria-pressed='true']::before { background: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3); }
.stepper { display: flex; gap: 10px; }
@media (max-width: 900px) {
  .stage-ui { grid-template-columns: 1fr; }
  .stage-controls { justify-items: start; order: -1; }
  .chips { justify-content: flex-start; max-width: none; }
}
@media (max-width: 520px) {
  /* phones: the taste sits under the description (2×2, as on the menu cards), before the cookbook link */
  .caption { grid-template-columns: 1fr; row-gap: 0; padding: 18px; }
  .caption__text { display: contents; }
  .caption__taste { order: 1; margin-top: 4px; }
  .caption__taste .fbars { grid-template-columns: 1fr 1fr; gap: 7px 14px; }
  .caption__taste .fbar { grid-template-columns: 44px 1fr; }
  .caption .link-btn { order: 2; justify-self: start; }
  .chips { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 4px 16px; scrollbar-width: none; }
  .chip { flex: none; }
}

/* the caption's taste: the menu cards' labelled bars, stacked in the left column */
/* the caption's taste: the labelled flower beside the words; on phones, where its
   labels would be too small, the menu cards' bars instead */
.caption__taste { align-self: center; }
.caption__taste .glyph { display: block; width: 150px; height: 150px; margin: -10px 0; }
.caption__taste .fbars { display: none; }
@media (max-width: 520px) {
  .caption__taste .glyph { display: none; }
  .caption__taste .fbars { display: grid; }
}

/* the flavour flower: faint full-size outlines, filled petals that bloom in, labels at the tips */
.glyph__track { fill-opacity: 0.1; stroke-opacity: 0.4; stroke-width: 1; stroke-dasharray: 2.5 2; }
.glyph .petal { opacity: 0.95; }
.glyph__label { font: 700 8.5px/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; fill: var(--ink-soft); }
:lang(th) .glyph__label, :lang(zh) .glyph__label { font-size: 10px; letter-spacing: 0; }
.glyph__petals { transform-box: view-box; transform-origin: 50% 50%; }
.caption.is-in .glyph__petals { animation: glyphIn 0.7s var(--ease-spring) both; }
@keyframes glyphIn { from { transform: scale(0.2) rotate(-60deg); } }

/* ---------- marquee ---------- */
.marquee { background: var(--plum); color: var(--gold-2); overflow: hidden; padding: 18px 0; transform: rotate(-1.2deg); margin: 0 -10px; box-shadow: var(--shadow); position: relative; z-index: 3; }
.marquee__track { display: flex; align-items: center; gap: 28px; width: max-content; animation: marquee 48s linear infinite; font: 500 1.35rem/1 var(--font-display); font-style: italic; font-variation-settings: 'SOFT' 100; white-space: nowrap; }
.marquee__track .thai { font-style: normal; font-size: 1.15rem; color: var(--on-plum); }
.marquee__track i { width: 10px; height: 13px; border-radius: 50%; background: var(--seed); box-shadow: 0 0 0 3px var(--gold); transform: rotate(25deg); flex: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .marquee__track { animation: none; } }

/* ---------- sections ---------- */
.section { padding: clamp(80px, 11vw, 140px) 0; }
.section-head { max-width: 46rem; margin-bottom: clamp(36px, 5vw, 56px); }
.section-head > p:last-child:not(.eyebrow) { margin-top: 18px; color: var(--ink-soft); font-size: 1.1rem; }
.section-head--center { text-align: center; margin-inline: auto; }
/* phones: the same rhythm, a little closer together, so the journey to the dishes is shorter */
@media (max-width: 600px) {
  .section { padding: 64px 0; }
  .section-head { margin-bottom: 28px; }
}

[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* ---------- classes ---------- */
.class-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
@media (max-width: 860px) { .class-cards { grid-template-columns: 1fr; } }
.class-card {
  background: var(--paper); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow), inset 0 0 0 1px var(--line);
  transition: transform 0.5s var(--ease-out), box-shadow 0.5s; display: flex; flex-direction: column;
}
.class-card:hover { transform: translateY(-4px); }
.class-card { --sky: clamp(220px, 22vw, 270px); position: relative; }
.class-card__sky { height: var(--sky); position: relative; overflow: hidden; }
/* a real snap from that class, taped over the corner of the view: daylight for
   the morning, the sign lit up after dark for the evening */
.class-card__snap {
  /* its bottom edge sits --drop below the view, whatever the photo's height */
  --drop: 95px;
  position: absolute; z-index: 1; top: calc(var(--sky) + var(--drop)); translate: 0 -100%; right: 26px; width: 132px; margin: 0; padding: 6px 6px 25px;
  background: #FFFDF8; border-radius: 4px; rotate: var(--r); pointer-events: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08), 0 16px 26px -14px rgba(43, 15, 47, 0.55);
}
.class-card__snap::before { content: ''; position: absolute; top: -8px; left: 50%; width: 56px; height: 17px; margin-left: -28px; background: rgba(242, 174, 46, 0.45); transform: rotate(-5deg); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }
.class-card__snap picture { display: contents; }
.class-card__snap img { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 35%; border-radius: 2px; background: var(--cream-2); }
.class-card__snap figcaption { position: absolute; left: 0; right: 0; bottom: 3px; text-align: center; font-size: 1.05rem; white-space: nowrap; }
/* Narrower cards: smaller, and mostly over the view, ending beside the class name,
   which keeps clear of it (the "our pick" badge drops onto a line of its own) */
@media (max-width: 1179px) {
  .class-card__snap { --drop: 42px; width: 108px; right: 20px; }
  .class-card .kicker { padding-right: 120px; }
  /* the room is only needed beside the photo; a badge that drops below keeps its pill whole */
  .class-card .badge { white-space: nowrap; }
}
@media (max-width: 520px) {
  .class-card__snap { --drop: 36px; width: 94px; right: 16px; padding: 5px 5px 21px; }
  .class-card .kicker { padding-right: 104px; }
  .class-card__snap::before { width: 44px; margin-left: -22px; height: 14px; top: -7px; }
  .class-card__snap figcaption { font-size: 0.92rem; }
}
:lang(th) :is(.class-card__snap, .snap) figcaption { font-size: 0.86rem; }
:lang(zh) :is(.class-card__snap, .snap) figcaption { font-size: 0.82rem; }
.class-card__sky svg { width: 100%; height: 100%; display: block; }
.class-card__sky .layer { transition: transform 0.6s var(--ease-out); }
.class-card__body { padding: 26px 30px 30px; display: grid; gap: 12px; flex: 1; }
.kicker { font: 700 0.8rem/1.3 var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum-2); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.badge { font-family: var(--font-hand); text-transform: none; letter-spacing: 0; font-size: 1.15rem; font-weight: 600; color: var(--gold-deep); background: rgba(242, 174, 46, 0.16); padding: 2px 10px; border-radius: 999px; }
.class-card h3 { font-size: clamp(2rem, 3.6vw, 2.7rem); font-weight: 520; font-variant-numeric: lining-nums; }
.class-card p { color: var(--ink-soft); }
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 4px; }
.meta div { background: var(--cream); border-radius: 14px; padding: 10px 12px; }
.meta dt { font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.meta dd { margin: 2px 0 0; font-weight: 700; }
.price-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 6px; }
.price { color: var(--ink-soft); }
.price span { font: 600 2rem/1 var(--font-display); color: var(--ink); margin-right: 4px; }
.assurances { list-style: none; padding: 0; margin: 32px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.assurances li { padding: 18px 20px 18px 54px; border-radius: 18px; background: rgba(255, 250, 241, 0.7); box-shadow: inset 0 0 0 1px var(--line); position: relative; color: var(--ink-soft); font-size: 0.97rem; }
.assurances li::before { content: ''; position: absolute; left: 18px; top: 18px; width: 24px; height: 24px; border-radius: 50%; background: var(--i-check-ink) center / 13px no-repeat, linear-gradient(180deg, #FFDA82, #EEA623); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(150, 86, 0, 0.3), 0 4px 8px -4px rgba(214, 138, 10, 0.6); }
.assurances b { color: var(--ink); }
@media (max-width: 860px) { .assurances { grid-template-columns: 1fr; } }

/* ---------- your day ---------- */
/* The scenes themselves (their palette, planes and motion) are styled by js/day.js. */
.day {
  position: relative; overflow: hidden;
  background: radial-gradient(60% 40% at 50% 0%, rgba(255, 214, 140, 0.35), transparent 70%), linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%);
}
.day::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.4s ease-in-out; background: radial-gradient(60% 40% at 50% 0%, rgba(154, 107, 192, 0.25), transparent 70%), linear-gradient(180deg, #F6E8E6 0%, #EBDCE6 100%); }
.day[data-mode='evening']::before { opacity: 1; }
.day > .container { position: relative; }

/* morning / evening switch */
.mode { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; margin-top: 28px; padding: 5px; border-radius: 999px; background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.14), 0 12px 24px -16px rgba(43, 15, 47, 0.5); }
.mode button { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: none; cursor: pointer; font-weight: 700; font-size: 0.95rem; color: var(--ink-soft); white-space: nowrap; transition: color 0.35s; }
.mode button[aria-pressed='true'] { color: #FFF5E6; }
/* the switch can be slid as well as tapped */
.mode { touch-action: pan-y pinch-zoom; user-select: none; -webkit-user-select: none; }
/* the switch and the pause button share a row, and wrap onto two on phones */
.day__controls { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; margin-top: 28px; }
.day__controls .mode { margin-top: 0; }
.mode.is-dragging .mode__thumb { transition: none; }
.mode.is-dragging { cursor: grabbing; }
/* swiping across the day: the cards lean with the finger, then spring back */
.day__track { touch-action: pan-y pinch-zoom; }
.day__track .steps { transition: transform 0.5s var(--ease-spring); }
.day__track .steps.is-leaning { transition: none; }
.mode button:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.mode__thumb { position: absolute; top: 5px; bottom: 5px; left: 5px; width: calc(50% - 5px); border-radius: 999px; background: linear-gradient(180deg, #66305F, #3B1440); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px #2B0F2F, 0 8px 16px -8px rgba(74, 29, 78, 0.6); transition: transform 0.55s var(--ease-spring); }
.day[data-mode='evening'] .mode__thumb { transform: translateX(100%); }
.mode__ico { width: 14px; height: 14px; border-radius: 50%; flex: none; transform: scale(0.86); transition: transform 0.6s var(--ease-spring), box-shadow 0.6s, filter 0.6s; }
.mode__ico--sun { background: #F7B82F; box-shadow: 0 0 0 3px rgba(247, 184, 47, 0.28); }
.mode__ico--moon { box-shadow: inset -4px -2px 0 0 #FFD36B; transform: rotate(25deg) scale(0.86); }
/* the chosen one lights up: the sun glows, the moon swings round and glows */
.mode button[aria-pressed='true'] .mode__ico--sun { transform: none; box-shadow: 0 0 0 3px rgba(247, 184, 47, 0.35), 0 0 12px 3px rgba(247, 184, 47, 0.55); }
.mode button[aria-pressed='true'] .mode__ico--moon { transform: rotate(-20deg); filter: drop-shadow(0 0 4px rgba(255, 211, 107, 0.8)); }

/* the timeline */
.day__track { position: relative; margin-top: 10px; }
.vine { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.steps { list-style: none; margin: 0; padding: 50px 0 170px; display: grid; gap: clamp(64px, 9vw, 120px); position: relative; z-index: 1; }
.step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: clamp(110px, 12vw, 160px); align-items: center; }
.step:nth-child(even) .step__card { order: 2; }
.step__card { position: relative; background: var(--paper); border-radius: 30px; padding: 26px 30px 28px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
.step__time { display: inline-grid; grid-auto-flow: column; align-items: center; gap: 8px; height: 32px; padding: 0 14px; overflow: hidden; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) #FBEFD8; box-shadow: inset 0 0 0 1px rgba(184, 110, 6, 0.24); color: var(--gold-deep); font-weight: 750; font-size: 0.86rem; font-variant-numeric: tabular-nums; transition: background-color 0.9s, color 0.9s, box-shadow 0.9s; }
.step__time .i { width: 14px; height: 14px; }
/* both times share one cell and roll over like a departure board */
.step__time [data-am], .step__time [data-pm] { grid-area: 1 / 2; transition: transform 0.6s var(--ease-out), opacity 0.4s, visibility 0.6s; }
.step__time [data-pm] { transform: translateY(120%); opacity: 0; visibility: hidden; }
.day[data-mode='evening'] .step__time { color: var(--plum-2); background-color: #EFDDEB; box-shadow: inset 0 0 0 1px rgba(110, 44, 108, 0.22); }
.day[data-mode='evening'] .step__time [data-am] { transform: translateY(-120%); opacity: 0; visibility: hidden; }
.day[data-mode='evening'] .step__time [data-pm] { transform: none; opacity: 1; visibility: visible; }
.step__n { position: absolute; top: 14px; right: 24px; font: 600 3.8rem/1 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: transparent; -webkit-text-stroke: 1.5px rgba(184, 110, 6, 0.32); letter-spacing: -0.02em; pointer-events: none; }
.step h3 { margin: 16px 0 8px; font-size: 1.75rem; }
.step__card > p:not(.step__time):not(.step__n) { color: var(--ink-soft); }
.step__tags { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.step__tags li { font-size: 0.82rem; font-weight: 650; padding: 5px 11px; border-radius: 999px; background: rgba(127, 163, 58, 0.13); color: #3E6A2C; box-shadow: inset 0 0 0 1px rgba(76, 122, 54, 0.12); }
.step__art { --tilt: 1.6deg; position: relative; margin: 0; aspect-ratio: 360 / 260; border-radius: 26px; background: var(--cream-2); box-shadow: 0 34px 54px -32px rgba(43, 15, 47, 0.6), 0 0 0 1px rgba(74, 29, 78, 0.08); transform: rotate(var(--tilt)); transition: transform 0.7s var(--ease-out), box-shadow 0.7s; }
.step:nth-child(even) .step__art { --tilt: -1.6deg; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .step:hover .step__art { transform: rotate(0) translateY(-4px); box-shadow: 0 40px 60px -32px rgba(43, 15, 47, 0.65), 0 0 0 1px rgba(74, 29, 78, 0.08); }
}
@media (max-width: 860px) {
  .step { grid-template-columns: 1fr; row-gap: 18px; padding-left: 46px; }
  .step:nth-child(even) .step__card { order: 0; }
  .step__art, .step:nth-child(even) .step__art { --tilt: 0deg; max-width: 460px; }
  .steps { gap: 64px; padding-bottom: 130px; }
}
@media (max-width: 520px) { .step__card { padding: 22px 20px 24px; } .step__n { font-size: 3rem; } .mode button { padding: 0 14px; font-size: 0.88rem; } }
/* phones: less air between the steps (the vine re-measures itself, and keeps room for its fruit) */
@media (max-width: 600px) { .steps { gap: 44px; padding: 34px 0 112px; } .step { row-gap: 14px; } }

/* the times on the timeline roll over without travelling under Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  .step__time [data-am], .step__time [data-pm] { transform: none !important; }
  .step__art, .mode__thumb, .mode__ico, .day__track .steps { transition: none; }
}

/* the vine — separate layers, so growing and swaying never repaint the whole drawing */
.vine svg { position: absolute; overflow: visible; }
.vine__leaves { inset: 0; width: 100%; height: 100%; }
.vine__stem { position: absolute; top: 0; left: 0; right: 0; height: 0; overflow: hidden; }
.vine__stem svg { top: 0; will-change: transform; }
.vine .vleaf { opacity: 0; transform: scale(0.12) rotate(-70deg); transform-box: view-box; transform-origin: 0 0; transition: transform 1.1s var(--ease-spring), opacity 0.4s; }
.vine .vleaf.on { opacity: 1; transform: none; }
.vine .vtendril { transition: stroke-dashoffset 1.6s var(--ease-out); }
.vine__bloom { position: absolute; opacity: 0; transform: scale(0.2) rotate(-120deg); transition: transform 1.2s var(--ease-spring), opacity 0.5s; }
.vine__bloom.on { opacity: 1; transform: none; }
.vine__bloom svg { inset: 0; width: 100%; height: 100%; }
.vine__corona { animation: vCoronaSpin 60s linear infinite; }
@keyframes vCoronaSpin { to { transform: rotate(360deg); } }
.vine__fruit { position: absolute; width: 0; height: 0; opacity: 0; transform: scale(0.3); transform-origin: 0 0; transition: transform 1.2s var(--ease-spring), opacity 0.5s; }
.vine__fruit.on { opacity: 1; transform: none; }
.vine__swing { animation: vSwing 4.5s ease-in-out infinite; }
@keyframes vSwing { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }
.vine__tip { position: absolute; left: 0; top: 0; transform-origin: 0 0; transition: opacity 0.4s; will-change: transform; }
@media (prefers-reduced-motion: reduce) { .vine__corona, .vine__swing { animation: none; } }

/* ---------- menu ---------- */
/* The book sits inside the heading block. Wide screens keep the heading's words
   to their column and stand the book at the bottom right; the heading itself is
   the book's positioned parent, so its reveal (a transform) never moves it. */
.menu__head .section-head { --gap: clamp(36px, 5vw, 56px); position: relative; max-width: none; min-height: calc(292px - var(--gap)); margin-bottom: var(--gap); padding-right: 290px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; }
.menu__head .section-head > :not(.cookbook-btn) { max-width: 46rem; }
.menu__head .cookbook-btn { position: absolute; right: 0; bottom: calc(-1 * var(--gap)); }
.cookbook-btn { border: 0; background: none; padding: 0 0 8px; cursor: pointer; display: grid; justify-items: center; gap: 10px; perspective: 900px; }
.cookbook-btn__cover {
  width: 200px; height: 250px; border-radius: 6px 16px 16px 6px; position: relative; display: grid; place-items: center; text-align: center;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0 10px, rgba(255, 255, 255, 0.08) 10px 12px, transparent 12px),
    radial-gradient(circle at 30% 20%, #7A3577, #4A1D4E 70%);
  box-shadow: 6px 8px 0 -2px #EADCC2, 7px 9px 0 -2px rgba(74, 29, 78, 0.2), 12px 16px 0 -4px #E3D2B4, var(--shadow);
  transform: rotateY(-14deg) rotateX(4deg); transform-origin: left center; transition: transform 0.6s var(--ease-spring);
}
.cookbook-btn:hover .cookbook-btn__cover { transform: rotateY(-28deg) rotateX(4deg) translateX(-6px); }
.cookbook-btn__title { font: 600 1.15rem/1.15 var(--font-display); color: var(--gold-2); font-variation-settings: 'SOFT' 100; padding: 0 20px 0 30px; }
.cookbook-btn__title em { display: block; font-size: 2rem; font-style: italic; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.cookbook-btn__seal { position: absolute; bottom: 22px; left: 50%; margin-left: -18px; width: 36px; height: 36px; border-radius: 50%; background: var(--gold); box-shadow: inset 0 0 0 4px #FFF3E0, inset 0 0 0 6px var(--gold); }
.cookbook-btn__seal::after { content: ''; position: absolute; inset: 13px 15px; border-radius: 50%; background: var(--seed); }
.cookbook-btn__label { font-size: 1.35rem; }
/* Narrower: the book is tucked in beside the title and the words flow round it */
@media (max-width: 860px) {
  .menu__head .section-head { display: flow-root; min-height: 0; padding-right: 0; margin-bottom: 30px; }
  .menu__head .cookbook-btn { position: relative; bottom: auto; float: right; margin: 2px -4px 6px 18px; padding: 0; gap: 4px; }
  .menu__head .cookbook-btn__cover { width: 128px; height: 160px; }
  .menu__head .cookbook-btn__title { font-size: 0.82rem; padding: 0 10px 0 20px; }
  .menu__head .cookbook-btn__title em { font-size: 1.4rem; }
  .menu__head .cookbook-btn__seal { width: 26px; height: 26px; margin-left: -13px; bottom: 14px; }
  .menu__head .cookbook-btn__seal::after { inset: 9px 11px; }
  .menu__head .cookbook-btn__label { max-width: 136px; font-size: 1.15rem; line-height: 0.95; text-align: center; overflow-wrap: anywhere; transform: rotate(-3deg); }
}
@media (max-width: 520px) {
  .menu__head .cookbook-btn { margin: 0 -2px 0 12px; }
  .menu__head .cookbook-btn__cover { width: 94px; height: 118px; border-radius: 4px 11px 11px 4px; box-shadow: 4px 6px 0 -2px #EADCC2, 5px 7px 0 -2px rgba(74, 29, 78, 0.2), 8px 11px 0 -3px #E3D2B4, var(--shadow); }
  .menu__head .cookbook-btn__title { font-size: 0.6rem; padding: 0 6px 0 15px; }
  .menu__head .cookbook-btn__title em { font-size: 1.04rem; }
  .menu__head .cookbook-btn__seal { width: 20px; height: 20px; margin-left: -10px; bottom: 10px; box-shadow: inset 0 0 0 3px #FFF3E0, inset 0 0 0 4px var(--gold); }
  .menu__head .cookbook-btn__seal::after { inset: 7px 8px; }
  .menu__head .cookbook-btn__label { max-width: 104px; font-size: 1.02rem; }
  :lang(th) .menu__head .cookbook-btn__title em { font-size: 0.8rem; }
}
@media (min-width: 521px) and (max-width: 860px) { :lang(th) .menu__head .cookbook-btn__title em { font-size: 1.08rem; } }

/* the menu, one course at a time */
.menu-app { display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-areas: 'tabs tabs' 'panel tray'; gap: 22px 28px; align-items: start; }
.courses { grid-area: tabs; position: relative; display: flex; gap: 4px; padding: 6px; border-radius: 26px; overflow-x: auto; scrollbar-width: none; background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.12), 0 14px 28px -20px rgba(43, 15, 47, 0.5); }
.courses::-webkit-scrollbar { display: none; }
.courses__ink { position: absolute; top: 6px; bottom: 6px; left: 0; border-radius: 20px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.08)), var(--cat, var(--plum)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 20px -10px var(--cat, var(--plum)); transition: transform 0.55s var(--ease-spring), width 0.55s var(--ease-spring), background-color 0.4s; }
.course-tab { position: relative; z-index: 1; flex: 1 0 auto; min-width: 150px; display: grid; grid-template-columns: auto 1fr; column-gap: 12px; align-items: center; text-align: left; padding: 12px 30px 12px 18px; border: 0; border-radius: 20px; background: none; cursor: pointer; color: var(--ink); transition: color 0.3s; }
.course-tab:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.course-tab__n { grid-row: 1 / span 2; font: 600 1.7rem/1 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 1; color: var(--cat); transition: color 0.3s; }
.course-tab__name { font-weight: 750; font-size: 0.98rem; white-space: nowrap; }
.course-tab__meta { font-size: 0.78rem; color: var(--ink-soft); transition: color 0.3s; }
.course-tab[aria-selected='true'] { color: #fff; }
.course-tab[aria-selected='true'] .course-tab__n, .course-tab[aria-selected='true'] .course-tab__meta { color: rgba(255, 255, 255, 0.82); }
.course-tab__tick { position: absolute; top: 9px; right: 9px; width: 17px; height: 17px; border-radius: 50%; background: var(--i-check-ink) center / 10px no-repeat, linear-gradient(180deg, #FFDA82, #EEA623); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8); transform: scale(0); transition: transform 0.45s var(--ease-spring); }
.course-tab.is-done .course-tab__tick { transform: scale(1); }

.course-panel { grid-area: panel; min-width: 0; }
.course-panel__note { margin: 0 6px 16px; font-size: 1.45rem; color: var(--plum-2); }
.mdishes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.mdish { position: relative; display: grid; grid-template-rows: auto 1fr auto; background: var(--paper); border-radius: 28px; padding: 18px 22px 16px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); transition: box-shadow 0.35s, transform 0.5s var(--ease-out); }
.mdish:hover { transform: translateY(-3px); }
.mdish.is-picked { box-shadow: 0 0 0 2px var(--cat), 0 24px 44px -26px color-mix(in srgb, var(--cat) 70%, transparent); }
.mdish__plate { position: relative; width: 176px; height: 176px; margin: -4px auto 8px; display: grid; place-items: center; }
.mdish__mat { position: absolute; inset: 6px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cat) 20%, #fff), color-mix(in srgb, var(--cat) 10%, var(--cream)) 72%); }
/* the dish sits on a disc of its course colour, and lifts a little on hover */
.mdish__plate canvas { position: relative; z-index: 1; width: 176px; height: 176px; transition: transform 0.6s var(--ease-out); }
.mdish:hover .mdish__plate canvas { transform: translateY(-6px) scale(1.05); }
.mdish__tag { position: absolute; top: 16px; left: 16px; font: 750 0.68rem/1 var(--font-body); letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), transparent), var(--cat); padding: 7px 11px; border-radius: 999px; box-shadow: 0 6px 12px -6px var(--cat); }
.mdish__name { font-size: 1.5rem; }
.mdish__thai { color: var(--gold-deep); font-size: 1rem; margin-top: 2px; }
.mdish__desc { color: var(--ink-soft); font-size: 0.95rem; margin-top: 8px; }
.mdish__note { display: flex; gap: 8px; align-items: center; margin-top: 10px; padding: 8px 11px; border-radius: 12px; font-size: 0.86rem; font-weight: 650; color: var(--plum-2); background: rgba(154, 107, 192, 0.12); }
.mdish__note .i { flex: none; width: 14px; height: 14px; color: var(--gold-deep); }
.fbars { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 18px; margin: 16px 0 4px; }
.fbar { display: grid; grid-template-columns: 50px 1fr; align-items: center; gap: 8px; }
.fbar dt { font-size: 0.7rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-soft); }
.fbar dd { margin: 0; height: 6px; border-radius: 6px; background: rgba(74, 29, 78, 0.08); overflow: hidden; }
.fbar dd span:not(.sr) { display: block; height: 100%; width: calc(var(--v) * 100%); min-width: 5px; border-radius: inherit; background: var(--c); transform-origin: left; animation: barIn 0.9s var(--ease-out) both; }
@keyframes barIn { from { transform: scaleX(0); } }
.mdish__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; padding-top: 14px; border-top: 1.5px dashed var(--line); }
.pick { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 0; border-radius: 999px; cursor: pointer; font-weight: 700; font-size: 0.92rem; color: var(--plum-ink); background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.18), 0 6px 12px -8px rgba(43, 15, 47, 0.4); transition: transform 0.3s var(--ease-out), box-shadow 0.3s, color 0.2s; }
.pick .i { width: 15px; height: 15px; margin-right: 7px; }
.pick__off, .pick__on { display: inline-flex; align-items: center; }
.pick__on, .pick[aria-pressed='true'] .pick__off { display: none; }
.pick[aria-pressed='true'] .pick__on { display: inline-flex; }
.pick:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px color-mix(in srgb, var(--cat) 60%, transparent), 0 10px 16px -10px rgba(43, 15, 47, 0.45); }
.pick:active { transform: scale(0.97); }
.pick[aria-pressed='true'] { color: #fff; background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(0, 0, 0, 0.08)), var(--cat); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 0 0 1px color-mix(in srgb, var(--cat) 75%, #000), 0 10px 18px -8px var(--cat); }
.pick--fixed { cursor: default; color: #3E6A2C; background: rgba(127, 163, 58, 0.13); box-shadow: inset 0 0 0 1px rgba(76, 122, 54, 0.2); }
.pick--fixed:hover { transform: none; box-shadow: inset 0 0 0 1px rgba(76, 122, 54, 0.2); }
.mdish__book { display: inline-flex; align-items: center; gap: 6px; padding: 8px 4px; border: 0; background: none; cursor: pointer; font-weight: 700; font-size: 0.88rem; color: var(--plum-2); background-image: linear-gradient(var(--gold), var(--gold)); background-size: 0 2px; background-position: 4px 85%; background-repeat: no-repeat; transition: background-size 0.35s var(--ease-out), color 0.2s; }
.mdish__book .i { width: 14px; height: 14px; color: var(--gold-deep); }
.mdish__book:hover { color: var(--plum-ink); background-size: calc(100% - 8px) 2px; }
/* where you are among a course's dishes (phones only, where they're swiped) */
.mdots { display: none; }
.mdots i { width: 6px; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--ink) 20%, transparent); transition: width 0.3s var(--ease-out), background-color 0.3s; }
.mdots i.is-on { width: 18px; background: var(--plum-2); }
/* five curries: the Chiang Mai special gets the full width */
.mdishes--5 .mdish:last-child { grid-column: 1 / -1; grid-template-columns: 210px 1fr; grid-template-rows: 1fr auto; column-gap: 26px; }
.mdishes--5 .mdish:last-child .mdish__plate { grid-row: 1 / span 2; margin: 0; align-self: center; width: 200px; height: 200px; }
.mdishes--5 .mdish:last-child .mdish__plate canvas { width: 200px; height: 200px; }
.mdishes--5 .mdish:last-child .mdish__foot { grid-column: 2; }

/* your menu */
.tray { grid-area: tray; position: sticky; top: 96px; padding: 20px 16px 24px; border-radius: 28px 28px 0 0; background: linear-gradient(180deg, #FFFDF8, var(--paper)); box-shadow: var(--shadow), inset 0 0 0 1px var(--line); filter: drop-shadow(0 14px 18px rgba(43, 15, 47, 0.08)); }
.tray::after { content: ''; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px; background: radial-gradient(circle at 10px 0, var(--paper) 10px, transparent 10.5px) 0 0 / 20px 12px repeat-x; }
.tray__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 0 6px 12px; }
.tray__title { font: 560 1.35rem/1 var(--font-display); font-variation-settings: 'SOFT' 100; white-space: nowrap; }
.tray__count { flex: none; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--plum-2); background: rgba(110, 44, 108, 0.08); transition: color 0.3s, background-color 0.3s; }
.tray.is-complete .tray__count { color: #7A4A00; background: linear-gradient(180deg, #FFE39A, #F5BD42); }
.tray__slots { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.tray__slot button { width: 100%; display: flex; align-items: center; gap: 12px; padding: 7px 8px; border: 0; border-radius: 18px; background: none; cursor: pointer; text-align: left; transition: background 0.2s; }
.tray__slot button:hover { background: rgba(74, 29, 78, 0.05); }
.tray__plate { position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; color: var(--cat); background: radial-gradient(circle, color-mix(in srgb, var(--cat) 9%, transparent) 60%, transparent 61%); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--cat) 45%, transparent); }
.tray__plate .i { width: 16px; height: 16px; }
.tray__slot.is-full .tray__plate { background: none; box-shadow: none; }
.tray__plate canvas { width: 52px; height: 52px; }
.tray__plate .plate-canvas--side { position: absolute; width: 30px; height: 30px; right: -8px; bottom: -6px; }
.tray__label { display: grid; line-height: 1.25; min-width: 0; }
.tray__label b { font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cat); }
.tray__label span { font-weight: 650; font-size: 0.92rem; }
.tray__slot:not(.is-full) .tray__label span { color: var(--ink-soft); font-weight: 500; }
.tray__cta { display: grid; gap: 10px; justify-items: start; margin-top: 12px; padding: 14px 6px 0; border-top: 1.5px dashed var(--line); }
.tray__hint { font-size: 0.85rem; color: var(--ink-soft); }
.tray__done { font-size: 0.9rem; font-weight: 650; color: var(--ink-soft); }
.tray__done .hand { display: block; font-size: 1.6rem; color: var(--plum-2); }
/* Below 1100px the tray would sit under every course, out of sight while you
   pick. Instead it shares the panel's grid area and sticks to the bottom of
   the screen as a compact strip of plates; the panel keeps room for it at the end. */
@media (max-width: 1100px) {
  .menu-app { grid-template-columns: 1fr; grid-template-areas: 'tabs' 'panel'; }
  .course-panel { padding-bottom: 96px; }
  .tray { grid-area: panel; align-self: end; position: sticky; top: auto; bottom: 12px; z-index: 6; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px 22px; padding: 10px 14px 10px 20px; border-radius: 24px; background: #FFFDF8; filter: none; box-shadow: 0 18px 36px -16px rgba(43, 15, 47, 0.45), 0 0 0 1px rgba(74, 29, 78, 0.1); }
  .tray::after { display: none; }
  .tray__head { flex-direction: column; align-items: flex-start; gap: 5px; padding: 0; }
  .tray__title { font-size: 1.15rem; }
  .tray__slots { grid-template-columns: repeat(5, auto); justify-content: center; gap: 6px; }
  .tray__slot button { padding: 3px; border-radius: 50%; }
  .tray__plate, .tray__plate canvas { width: 46px; height: 46px; }
  .tray__plate .plate-canvas--side { width: 26px; height: 26px; right: -6px; bottom: -4px; }
  .tray__label, .tray__hint, .tray__done { display: none; }
  .tray__cta { margin: 0; padding: 0; border: 0; }
  .tray__cta:empty, .tray:not(.is-complete) .tray__cta { display: none; }
}
@media (max-width: 640px) {
  .courses { margin-inline: -16px; border-radius: 0; padding: 6px 16px; }
  .course-tab { min-width: 140px; padding: 10px 28px 10px 14px; }
  /* one dish at a time, swiped sideways, with the next one peeking in */
  .mdishes { display: flex; gap: 12px; margin-inline: -16px; padding: 6px 16px 14px; overflow: auto hidden; scroll-snap-type: x mandatory; scroll-padding-inline: 16px; overscroll-behavior-x: contain; scrollbar-width: none; }
  .mdishes::-webkit-scrollbar { display: none; }
  .mdish { flex: 0 0 84%; scroll-snap-align: start; scroll-snap-stop: always; }
  /* the Chiang Mai special's ribbon sits above the name: on a phone card the plate fills the corner */
  .mdish__tag { position: static; display: inline-block; margin: 0 0 10px; }
  .mdots { display: flex; justify-content: center; gap: 6px; }
  .mdishes--5 .mdish:last-child { grid-template-columns: 1fr; grid-template-rows: auto; }
  .mdishes--5 .mdish:last-child .mdish__plate { grid-row: auto; margin: -4px auto 8px; width: 176px; height: 176px; }
  .mdishes--5 .mdish:last-child .mdish__plate canvas { width: 176px; height: 176px; }
  .mdishes--5 .mdish:last-child .mdish__foot { grid-column: auto; }
  .fbars { gap: 7px 14px; }
  .fbar { grid-template-columns: 44px 1fr; }
  /* the strip of plates gets a row of its own; once the menu is complete the booking button goes underneath */
  .tray { grid-template-columns: auto minmax(0, 1fr); gap: 10px 10px; bottom: 10px; padding: 9px 10px 9px 16px; border-radius: 22px; }
  .tray__slots { grid-template-columns: repeat(5, minmax(0, 46px)); justify-content: end; gap: 2px; }
  .tray__plate { width: 100%; max-width: 40px; height: auto; aspect-ratio: 1; }
  .tray__plate canvas { width: 100%; height: 100%; }
  .tray__plate .plate-canvas--side { width: 22px; height: 22px; }
  .tray__cta { grid-column: 1 / -1; justify-items: stretch; }
  .tray__cta .btn { justify-content: center; }
  .menu-app:has(.tray.is-complete) .course-panel { padding-bottom: 140px; }
}
@media (max-width: 380px) {
  .tray { grid-template-columns: minmax(0, 1fr); }
  .tray__head { flex-direction: row; align-items: center; justify-content: space-between; }
  .tray__slots { justify-content: space-between; }
  .course-panel { padding-bottom: 124px; }
  .menu-app:has(.tray.is-complete) .course-panel { padding-bottom: 180px; }
}
.menu__foot { margin-top: 30px; text-align: center; color: var(--ink-soft); }

/* ---------- story ---------- */
.story { background: var(--plum-deep); color: #F4E6EE; border-radius: var(--radius-lg); margin: 0 12px; position: relative; overflow: hidden; }
.story::before { content: ''; position: absolute; inset: 0; background: radial-gradient(50% 60% at 25% 50%, rgba(154, 107, 192, 0.32), transparent 70%), radial-gradient(40% 50% at 90% 10%, rgba(242, 174, 46, 0.12), transparent 70%); }
.story__inner { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(30px, 5vw, 70px); align-items: center; padding: clamp(70px, 9vw, 120px) 0; }
.story__art { margin: 0; position: relative; }
.story__art canvas { width: 100%; aspect-ratio: 1; display: block; cursor: crosshair; }
.story__art figcaption { text-align: center; color: var(--gold-2); margin-top: -10px; opacity: 0.9; }
.story h2 { color: #FFF6EA; }
.story h2 em { color: var(--gold-2); }
.story__text > p:not(.eyebrow) { margin-top: 20px; color: #DCC7D6; font-size: 1.08rem; }
.story__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 34px 0 0; }
.story__stats div { border-top: 2px solid rgba(255, 207, 92, 0.35); padding-top: 12px; }
.story__stats dt { font: 600 2.2rem/1 var(--font-display); color: var(--gold-2); }
.story__stats dd { margin: 4px 0 0; font-size: 0.88rem; color: #CDB5C7; }
@media (max-width: 860px) {
  .story__inner { grid-template-columns: 1fr; }
  .story__art { max-width: 460px; margin-inline: auto; width: 100%; }
  .story__stats { grid-template-columns: repeat(2, 1fr); }
}

/* ---------- photos: pegged on a string of lights ---------- */
/* Two rows on wide screens, one swipeable line below 1100px. Each photo hangs
   from its peg (the top centre), so tilting, swaying and swinging all turn
   about it. js/line.js draws the string through the pegs. */
.photos { overflow: hidden; --cord: rgba(74, 29, 78, 0.36); }
.photos .section-head { margin-bottom: clamp(18px, 2.4vw, 30px); }
.line { --pw: clamp(150px, 13.2vw, 196px); --gap: clamp(26px, 2.8vw, 42px); }
.line__track { position: relative; padding: 40px 0 12px; }
.line__row { display: flex; justify-content: center; align-items: flex-start; gap: var(--gap); padding-inline: 16px; }
.line__row + .line__row { margin-top: clamp(64px, 5.4vw, 80px); }
.line__string { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.line__cord { fill: none; stroke: var(--cord); stroke-width: 1.5; }
.line__cap { stroke: var(--cord); stroke-width: 1.4; }
.line__string .bulb { animation: twinkle 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

.line [data-peg] {
  position: relative; z-index: 1; flex: none; margin-top: var(--drop, 0px);
  transform-origin: 50% 0; rotate: calc(var(--r) + var(--sway, 0deg));
  transition: rotate 0.9s var(--ease-spring), scale 0.5s var(--ease-spring), box-shadow 0.4s var(--ease-out);
}
.line .polaroid {
  width: calc(var(--pw) + 20px); margin-inline: 0; margin-bottom: 0; padding: 10px 10px 12px; background: #fff; border-radius: 4px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 18px 28px -16px rgba(43, 15, 47, 0.42);
}
.line .polaroid--wide { width: calc(var(--pw) * 1.5 + 20px); }
.polaroid img { display: block; width: 100%; height: auto; aspect-ratio: var(--ar, 3 / 4); object-fit: cover; object-position: var(--pos, 50% 50%); border-radius: 2px; background: var(--cream-2); }
.polaroid figcaption { text-align: center; margin-top: 9px; font-size: 1.22rem; line-height: 1.12; text-wrap: balance; }
/* the clothes peg (painted like the aprons), and its spring */
.line .polaroid::before {
  content: ''; position: absolute; z-index: 2; left: 50%; top: -19px; width: 12px; height: 34px; margin-left: -6px; border-radius: 4px 4px 3px 3px;
  background:
    linear-gradient(90deg, transparent 5.4px, rgba(43, 15, 47, 0.22) 5.4px 6.6px, transparent 6.6px),
    linear-gradient(90deg, rgba(43, 15, 47, 0.16), transparent 30%, rgba(255, 255, 255, 0.4) 50%, transparent 70%, rgba(43, 15, 47, 0.16)),
    var(--peg, #F6C445);
  box-shadow: 0 2px 3px rgba(43, 15, 47, 0.28);
}
.line .polaroid::after { content: ''; position: absolute; z-index: 3; left: 50%; top: -10px; width: 16px; height: 4px; margin-left: -8px; border-radius: 2px; background: linear-gradient(180deg, #F1F3F4, #959DA3); box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2); }
.line__row > :nth-child(5n + 2) { --peg: #F28DAB; }
.line__row > :nth-child(5n + 3) { --peg: #B48BD6; }
.line__row > :nth-child(5n + 4) { --peg: #6FC3C9; }
.line__row > :nth-child(5n + 5) { --peg: #F39A4B; }

/* the apron at the end of the line: hung by its neck strap, and a way to book */
.apron { display: block; width: calc(var(--pw) + 14px); color: var(--plum-2); text-decoration: none; text-align: center; border-radius: 8px; }
.apron__art { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 10px rgba(43, 15, 47, 0.22)); }
.apron__note { display: inline-block; margin-top: 4px; font-size: 1.3rem; text-wrap: balance; text-decoration: underline transparent 1.5px; text-underline-offset: 4px; transition: text-decoration-color 0.25s; }
.apron__note::after { content: ' →'; }
.apron:focus-visible { outline: 3px solid var(--gold); outline-offset: 6px; }

@media (hover: hover) {
  .line .polaroid:hover { rotate: 0deg; scale: 1.05; z-index: 4; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06), 0 30px 40px -18px rgba(43, 15, 47, 0.5); }
  .apron:hover { rotate: calc(var(--r) * -2); }
  .apron:hover .apron__note { text-decoration-color: currentColor; }
}

/* the first time the line comes into view, everything swings and settles */
.line.is-armed [data-peg] { rotate: calc(var(--r) * -3.2); }
.line.is-in [data-peg] { animation: lineSettle 1.7s ease-in-out calc(var(--i) * 90ms) backwards; }
@keyframes lineSettle {
  0% { rotate: calc(var(--r) * -3.2); }
  32% { rotate: calc(var(--r) * 2.1); }
  58% { rotate: calc(var(--r) * 0.35); }
  80% { rotate: calc(var(--r) * 1.25); }
  100% { rotate: var(--r); }
}

@media (max-width: 1099px) {
  .line { --pw: clamp(168px, 44vw, 210px); --gap: 30px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--gold) transparent; }
  .line__track { display: flex; align-items: flex-start; gap: var(--gap); width: max-content; padding: 40px 24px 44px; }
  .line__row { display: contents; }
  .line [data-peg] { scroll-snap-align: center; }
}
@media (prefers-reduced-motion: reduce) {
  .line [data-peg] { transition: none; }
  .line.is-in [data-peg] { animation: none; }
}

/* ---------- reviews: the end of class, left on the table ---------- */
.reviews { background: var(--cream-2); overflow: hidden; }
.reviews .section-head { margin-bottom: clamp(28px, 3.6vw, 44px); }

/* a honey-teak tabletop seen from above; js/table.js paints the grain into .tabletop__wood.
   Everything on it shares one scale: --cm is a centimetre. At 40px the receipt is
   a 9 cm till roll and the postcard 17.5 cm across, so the bowl (15 cm), the glass
   (7.6 cm) and the passionfruit (6 cm) are sized and placed in the same unit. */
.tabletop {
  --cm: 40px;
  position: relative; isolation: isolate; overflow: hidden; margin: 0 12px; border-radius: var(--radius-lg);
  padding: calc(9 * var(--cm)) 0 clamp(70px, 7vw, 100px);
  background: #BF8753;
  box-shadow: 0 50px 80px -50px rgba(43, 15, 47, 0.6), 0 0 0 1px rgba(80, 40, 12, 0.4);
}
.tabletop__wood { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; }
.tabletop.has-wood .tabletop__wood { opacity: 1; }
/* warm light from above, falling away toward the edges */
.tabletop::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit;
  background: radial-gradient(80% 60% at 32% 0%, rgba(255, 238, 205, 0.3), transparent 70%), radial-gradient(150% 115% at 50% 42%, transparent 52%, rgba(58, 24, 4, 0.38) 100%);
  box-shadow: inset 0 2px 0 rgba(255, 232, 196, 0.35), inset 0 -3px 0 rgba(58, 24, 4, 0.28);
}
.tabletop__inner { position: relative; }
/* the food stands taller than the paper, so it lies over it and its shadows fall on it */
.prop { position: absolute; z-index: 2; pointer-events: none; display: block; max-width: none; height: auto; }
/* Along the top: the glass at the left, the khao soi's pickles, shallots and lime
   on their leaf, and the bowl at the right with the spoon reaching back. Each
   picture is a square `n` cm wide; the comments give where its centre lands. */
.prop--tea { width: calc(14 * var(--cm)); left: calc(-4.4 * var(--cm)); top: calc(-10.7 * var(--cm)); }        /* glass 2 cm in, 3.75 cm down the table */
.prop--side { width: calc(12 * var(--cm)); left: calc(7.4 * var(--cm)); top: calc(-11.9 * var(--cm)); }        /* leaf 13.3 cm in, 3 cm down */
.prop--bowl { width: calc(26 * var(--cm)); right: calc(-7.8 * var(--cm)); top: calc(-15.4 * var(--cm)); }     /* bowl 3 cm in from the right, 4.3 cm down */
/* the ring the glass left before it was moved: a stain in the wood, under everything */
.prop--ring { z-index: -1; left: calc(4.85 * var(--cm)); top: calc(-7.15 * var(--cm)); width: calc(6.8 * var(--cm)); height: calc(6.8 * var(--cm)); border-radius: 50%;
  border: calc(0.09 * var(--cm)) solid rgba(70, 32, 8, 0.17); box-shadow: inset 0 0 0 2px rgba(255, 230, 190, 0.08), 0 0 0 1px rgba(70, 32, 8, 0.05);
  -webkit-mask: conic-gradient(#000 0 230deg, #0000 250deg 300deg, #000 320deg); mask: conic-gradient(#000 0 230deg, #0000 250deg 300deg, #000 320deg); }
/* a halved passionfruit, 6 cm across, and a few of its seeds */
.prop--fruit { width: calc(8.4 * var(--cm)); aspect-ratio: 1; }
.prop--seeds { width: calc(3.2 * var(--cm)); filter: drop-shadow(1px 2px 1px rgba(48, 20, 4, 0.3)); }
.reviews__table { position: relative; }
.reviews__table .prop--fruit { right: calc(-6 * var(--cm)); bottom: calc(-2.4 * var(--cm)); }
.reviews__table .prop--seeds { right: calc(1.6 * var(--cm)); bottom: calc(-2.2 * var(--cm)); transform: rotate(-12deg); }
.prop--narrow { display: none; }
.reviews__table { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (max-width: 860px) { .reviews__table { grid-template-columns: minmax(0, 1fr); justify-items: center; } }

/* the bill: thermal paper with torn zigzag ends, printed in mono */
.receipt-wrap { width: min(360px, 100%); }
.receipt {
  --zz: 9px;
  position: relative; transform: rotate(-2.4deg); padding: 34px 26px 30px;
  background: linear-gradient(180deg, rgba(90, 60, 30, 0.07), rgba(90, 60, 30, 0) 7%, rgba(90, 60, 30, 0) 91%, rgba(90, 60, 30, 0.08)), linear-gradient(95deg, #FFFFFF, #FFFEFA 45%, #FAF6EC);
  color: #2E2430;
  font: 500 0.82rem/1.55 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.02em; text-transform: uppercase;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
}
/* paper lies flat on the wood: a tight contact shadow, and a short soft one where it curls up a little */
.receipt-wrap { position: relative; z-index: 1; filter: drop-shadow(2px 9px 8px rgba(48, 20, 4, 0.3)) drop-shadow(0 1px 1.5px rgba(48, 20, 4, 0.32)); }
.receipt__head { display: grid; justify-items: center; gap: 8px; text-align: center; font-weight: 800; font-size: 1.02rem; letter-spacing: 0.16em; }
.receipt__head svg { width: 38px; height: 38px; }
.receipt__head small { display: block; font-size: 0.66rem; font-weight: 600; letter-spacing: 0.1em; opacity: 0.7; margin-top: 2px; }
.receipt__title { text-align: center; margin: 18px 0 2px; font-weight: 700; letter-spacing: 0.14em; }
/* printed like a till's timestamp: the day the counts were copied from the listings */
.receipt__date { text-align: center; margin-bottom: 10px; font-size: 0.72rem; letter-spacing: 0.12em; opacity: 0.72; }
/* Each line is a link to its listing. The whole line takes the tap, and checking
   it runs a highlighter across, the way you'd tick off a bill. */
.receipt__line { position: relative; flex-wrap: wrap; border-radius: 2px;
  background: linear-gradient(176deg, transparent 0 14%, rgba(255, 207, 92, 0.6) 14% 86%, transparent 86%) no-repeat 0 0 / 0% 100%;
  transition: background-size 0.5s var(--ease-out); }
.receipt__line:hover, .receipt__line:focus-within { background-size: 100% 100%; }
.receipt__lines a { color: inherit; text-decoration: none; }
.receipt__lines a::after { content: ''; position: absolute; inset: -4px -6px; border-radius: 3px; }
.receipt__lines a:focus-visible { outline: none; }
.receipt__lines a:focus-visible::after { outline: 3px solid var(--gold-deep); outline-offset: 1px; }
.receipt__go { font-weight: 800; transition: transform 0.3s var(--ease-out); }
.receipt__line:hover .receipt__go { transform: translate(2px, -2px); }
/* an award printed under its line, like a modifier on an order */
.receipt__lines .receipt__mod { flex-basis: 100%; margin: 0; padding-left: 1.4em; font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; opacity: 0.72; }
.receipt__check { text-align: center; margin-top: 10px; font-size: 0.68rem; letter-spacing: 0.08em; opacity: 0.72; }
@media (prefers-reduced-motion: reduce) { .receipt__line, .receipt__go { transition: none; } }
.receipt__lines { margin: 0; padding: 10px 0; border-block: 1.5px dashed rgba(46, 36, 48, 0.35); display: grid; gap: 6px; }
.receipt__lines div { display: flex; align-items: baseline; gap: 1px 8px; }
.receipt__lines dt { font-weight: 700; display: flex; flex: 1; gap: 8px; align-items: baseline; }
.receipt__lines dt::after { content: ''; flex: 1; border-bottom: 2px dotted rgba(46, 36, 48, 0.35); transform: translateY(-4px); }
.receipt__lines dd { margin: 0 0 0 auto; display: inline-flex; align-items: center; gap: 5px; font-weight: 700; }
.receipt__lines dd small { font-size: 0.72rem; opacity: 0.7; font-weight: 600; }
.receipt__lines .stars { font-size: 0.62rem; background: #2E2430; }
.receipt__total { display: flex; justify-content: space-between; padding: 10px 0; font-weight: 800; font-size: 0.95rem; letter-spacing: 0.1em; border-bottom: 1.5px dashed rgba(46, 36, 48, 0.35); }
.receipt__score { display: grid; justify-items: center; gap: 10px; padding: 18px 0 14px; }
.receipt__big { font: 600 6.4rem/0.8 var(--font-display); letter-spacing: -0.05em; color: var(--plum-ink); text-transform: none; font-variation-settings: 'SOFT' 100, 'WONK' 1; }
.receipt__score .stars--big { font-size: 1.45rem; }
.receipt__note { text-transform: none; font-size: 0.78rem; letter-spacing: 0; text-align: center; opacity: 0.8; padding: 0 4px; }
.receipt__note span[lang] { white-space: nowrap; }
.receipt__thanks { text-align: center; margin-top: 16px; font-weight: 700; letter-spacing: 0.16em; }
.receipt__thanks .thai { font-size: 0.95rem; letter-spacing: 0; }
.receipt__barcode { display: block; height: 42px; margin: 14px 12px 0; background: repeating-linear-gradient(90deg, #2E2430 0 2px, #0000 2px 4px, #2E2430 4px 5px, #0000 5px 8px, #2E2430 8px 11px, #0000 11px 12px, #2E2430 12px 13px, #0000 13px 16px, #2E2430 16px 17px, #0000 17px 19px); }

/* the postcard: airmail edge, a passionfruit stamp, a Chiang Mai postmark */
.postcard-wrap { position: relative; z-index: 1; width: 100%; max-width: 700px; justify-self: center; filter: drop-shadow(2px 8px 8px rgba(48, 20, 4, 0.3)) drop-shadow(0 1px 1.5px rgba(48, 20, 4, 0.34)); }
.postcard {
  position: relative; margin: 0; transform: rotate(1.6deg); padding: 9px; border-radius: 6px;
  background: repeating-linear-gradient(-45deg, var(--plum-2) 0 13px, #FFFDF6 13px 21px, var(--gold) 21px 34px, #FFFDF6 34px 42px);
}
.postcard::before {
  content: ''; position: absolute; inset: 9px; border-radius: 2px;
  background: radial-gradient(130% 100% at 0% 0%, #FFFDF6, #FBF2E2);
}
.postcard > * { position: relative; }
.postcard { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
.postcard__msg { padding: clamp(26px, 3.4vw, 40px) clamp(22px, 3vw, 34px); display: grid; align-content: center; gap: 14px; }
.postcard__msg p { font: 700 clamp(1.9rem, 2.8vw, 2.4rem)/1.08 var(--font-hand); color: var(--plum-ink); transform: rotate(-1.5deg); }
.postcard__msg figcaption { font: 600 1.35rem/1.1 var(--font-hand); color: var(--plum-2); opacity: 0.85; }
/* how the note came: a little airmail label, which opens the listing it was posted to */
.postcard__via {
  justify-self: start; display: inline-flex; align-items: center; gap: 7px; margin-top: 2px; padding: 5px 9px 5px 8px;
  font: 800 0.66rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; color: #2B5BA6;
  background: #FFFDF6; border-radius: 3px; transform: rotate(-2.5deg);
  box-shadow: inset 0 0 0 1.5px currentColor, inset 0 0 0 3.5px #FFFDF6, inset 0 0 0 4.5px rgba(200, 50, 43, 0.55);
  transition: transform 0.35s var(--ease-out), background-color 0.2s;
}
.postcard__via::after { content: '↗'; font-size: 0.85rem; letter-spacing: 0; }
.postcard__via:hover { transform: rotate(0deg) translateY(-1px); background-color: #EEF3FB; }
:lang(th) .postcard__via, :lang(zh) .postcard__via { font-size: 0.78rem; letter-spacing: 0.04em; }
.postcard__addr { position: relative; padding: 22px 22px 26px; border-left: 1.5px solid rgba(110, 44, 108, 0.18); margin: 18px 0; display: grid; align-content: end; }
.postcard__stamp { position: absolute; top: 0; right: 10px; width: 84px; transform: rotate(4deg); }
/* perforated edge: solid middle plus a row of bites along every side */
.postcard__stamp::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #FFFDF6; filter: drop-shadow(0 2px 2px rgba(43, 15, 47, 0.2)); }
.postcard__stamp { padding: 6px; isolation: isolate; }
.postcard__stamp::before {
  -webkit-mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3px, #0000 95%, #000) -4px -4px / 8px 8px;
  mask: linear-gradient(#000 0 0) center / calc(100% - 8px) calc(100% - 8px) no-repeat, radial-gradient(circle 3px, #0000 95%, #000) -4px -4px / 8px 8px;
}
.postcard__stamp svg { display: block; width: 100%; }
.postcard__postmark { position: absolute; top: 34px; right: 56px; width: 172px; transform: rotate(-14deg); opacity: 0.55; color: var(--plum-2); pointer-events: none; }
.postcard__postmark svg { display: block; width: 100%; fill: currentColor; stroke: currentColor; }
.postcard__postmark circle, .postcard__postmark path { fill: none; stroke-width: 1.6; }
.postcard__postmark text { stroke: none; font-family: var(--font-body); }
.postcard__to { display: grid; gap: 4px; margin-top: 120px; font: 600 1.25rem/1.25 var(--font-hand); color: var(--ink-soft); }
.postcard__to span { border-bottom: 1.5px solid rgba(110, 44, 108, 0.16); padding: 0 2px 2px; }
/* a real postcard's shape; it sits low beside the receipt, clear of the bowl above */
@media (min-width: 861px) { .postcard-wrap { align-self: end; } .postcard { aspect-ratio: 3 / 2; } }
/* the narrowest receipts keep each source and its figures on one line */
@media (max-width: 400px) { .receipt { padding-inline: 20px; } }
@media (max-width: 339px) { .receipt__lines .stars { display: none; } }
@media (max-width: 600px) {
  .receipt { transform: rotate(-1.4deg); }
  .receipt-wrap { width: min(340px, 94%); }
  .postcard { grid-template-columns: minmax(0, 1fr); transform: rotate(1deg); }
  /* the stamp and postmark ride in the corner; the address side is left off */
  .postcard__addr { position: absolute; top: 20px; right: 18px; width: 74px; height: 84px; padding: 0; margin: 0; border: 0; }
  .postcard__stamp { width: 74px; right: 0; }
  .postcard__postmark { top: 26px; right: 34px; width: 138px; }
  .postcard__to { display: none; }
  .postcard__msg { padding: 108px 22px 26px; }
}

/* what guests mention: order slips torn off the kitchen printer, lying on the table */
.slips__head { position: relative; margin-top: clamp(64px, 7vw, 92px); }
.tape {
  position: relative; z-index: 1; display: inline-block; margin: 0 0 0 -8px; padding: 8px 30px 10px; transform: rotate(-2.2deg);
  font: 700 clamp(1.45rem, 2.2vw, 1.85rem)/1.1 var(--font-hand); color: var(--plum-ink);
  background: linear-gradient(180deg, rgba(255, 250, 230, 0.94), rgba(244, 233, 202, 0.94));
  -webkit-mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% 12px repeat-y, conic-gradient(from 225deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% 12px repeat-y;
  mask: conic-gradient(from 45deg at left, #0000, #000 1deg 89deg, #0000 90deg) left / 51% 12px repeat-y, conic-gradient(from 225deg at right, #0000, #000 1deg 89deg, #0000 90deg) right / 51% 12px repeat-y;
  filter: drop-shadow(0 2px 2px rgba(48, 20, 4, 0.25));
}
.slips { position: relative; z-index: 1; margin-top: 22px; }
.tickets { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2.4vw, 30px); align-items: start; }
.ticket {
  position: relative; transform: rotate(var(--tilt)); transition: transform 0.5s var(--ease-out);
  filter: drop-shadow(2px 8px 7px rgba(48, 20, 4, 0.28)) drop-shadow(0 1px 1.5px rgba(48, 20, 4, 0.3));
}
.ticket:hover { transform: rotate(calc(var(--tilt) * 0.3)) translateY(-6px); }
.ticket__paper {
  --zz: 7px;
  display: grid; align-content: start; gap: 4px; padding: 28px 20px 30px;
  background: linear-gradient(180deg, #FFFEF9, #FBF8EF); color: var(--ink-soft); font-size: 0.95rem;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
}
.ticket__no { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1.5px dashed rgba(46, 36, 48, 0.3); font: 700 0.74rem/1 ui-monospace, 'SF Mono', Menlo, Consolas, monospace; letter-spacing: 0.14em; text-transform: uppercase; color: #2E2430; }
.ticket__tick { font: 700 1.9rem/0.5 var(--font-hand); color: var(--chili); transform: rotate(8deg); }
.ticket__stamp {
  justify-self: start; display: grid; place-items: center; width: 50px; height: 50px; margin-bottom: 8px; border-radius: 50%;
  color: color-mix(in srgb, var(--tint) 85%, #2A1430); border: 2px solid currentColor; outline: 1px solid currentColor; outline-offset: 2px;
  transform: rotate(-10deg); opacity: 0.85;
}
.ticket__stamp svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ticket b { color: var(--ink); font-size: 1.05rem; line-height: 1.3; }
.slips__hint { display: none; color: #FFF0D6; text-shadow: 0 1px 2px rgba(48, 20, 4, 0.5); }
@media (max-width: 1000px) {
  /* slide the slips along the table */
  .slips { margin-inline: -24px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; padding: 14px 24px 22px; scroll-padding-inline: 24px; }
  .slips::-webkit-scrollbar { display: none; }
  .tickets { grid-template-columns: repeat(4, min(250px, 72vw)); gap: 18px; width: max-content; }
  .ticket { scroll-snap-align: start; }
  .slips__hint { display: block; text-align: right; font-size: 1.25rem; margin-top: 0; }
}
/* Narrower tables hold less: the leaf goes first, then (one column) the scale
   steps down a little and the bowl moves into the corner, cut by both edges. */
@media (max-width: 1100px) { .prop--side { display: none; } }
@media (max-width: 860px) {
  .tabletop { --cm: 36px; margin: 0 8px; padding: calc(10.5 * var(--cm)) 0 56px; }
  .prop--bowl { right: calc(-8.95 * var(--cm)); top: calc(-18.1 * var(--cm)); }   /* bowl 90px in from the right, 110px down */
  .prop--tea { left: calc(-5.15 * var(--cm)); top: calc(-12.65 * var(--cm)); }  /* glass tucked into the top left corner */
  .prop--ring { display: none; }
  .reviews__table .prop--wide { display: none; }
  .prop--narrow { display: block; }
  .slips__head { margin-top: calc(3 * var(--cm)); }
  /* the fruit against the postcard's corner, its seeds spilling clear of the label */
  .slips__head .prop--fruit { right: calc(-5.6 * var(--cm)); top: calc(-6.6 * var(--cm)); }
  .slips__head .prop--seeds { right: calc(3.2 * var(--cm)); top: calc(-2.6 * var(--cm)); transform: rotate(14deg); }
  /* keep the label clear of the fruit */
  .tape { max-width: calc(100% - 3.4 * var(--cm)); font-size: 1.4rem; }
}
@media (max-width: 600px) {
  .tabletop { --cm: 32px; padding-top: calc(9.4 * var(--cm)); }
  .prop--tea { display: none; }
  .prop--bowl { right: calc(-9.1 * var(--cm)); top: calc(-18.5 * var(--cm)); }    /* bowl 70px in from the right, 50px down */
  .slips__head .prop--fruit { top: calc(-5.3 * var(--cm)); } /* keep the postcard attribution clear */
  .slips__head .prop--seeds { right: calc(2.6 * var(--cm)); top: calc(-2.9 * var(--cm)); }
}
@media (max-width: 600px) { .slips { margin-inline: -16px; padding-inline: 16px; scroll-padding-inline: 16px; } }
@media (prefers-reduced-motion: reduce) { .ticket { transition: none; } }

/* ---------- visit / faq ---------- */
.visit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(30px, 6vw, 80px); align-items: start; }
@media (max-width: 900px) { .visit__grid { grid-template-columns: minmax(0, 1fr); } }
.faq h2 { margin-bottom: 26px; }
.faq details { border-bottom: 2px dashed var(--line); }
.faq summary { list-style: none; cursor: pointer; padding: 18px 44px 18px 0; font-weight: 700; font-size: 1.06rem; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 2px; top: 50%; width: 32px; height: 32px; margin-top: -16px; border-radius: 50%; background: var(--i-plus-plum) center / 14px no-repeat, linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.14), 0 6px 12px -8px rgba(43, 15, 47, 0.4); transition: transform 0.4s var(--ease-spring), box-shadow 0.25s; }
.faq summary:hover::after { box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.3), 0 8px 14px -8px rgba(43, 15, 47, 0.45); }
.faq details[open] summary::after { transform: rotate(135deg); background: var(--i-plus-ink) center / 14px no-repeat, linear-gradient(180deg, #FFDA82, #EEA623); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 1px rgba(150, 86, 0, 0.3); }
.faq details[open] p { animation: capIn 0.45s var(--ease-out); }
.faq summary { transition: color 0.2s; }
.faq summary:hover { color: var(--plum-2); }
.faq details p { padding: 0 44px 20px 0; color: var(--ink-soft); }
.find { display: grid; gap: 20px; position: sticky; top: 100px; }
.map-card { background: var(--paper); border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); }
/* drawn by js/map.js. The songthaew and the pins are small layers of their own
   over the drawing, so moving them never repaints the map underneath. */
.map { position: relative; aspect-ratio: 420 / 400; }
.map__art { width: 100%; height: auto; display: block; }
.map__fly { position: absolute; overflow: visible; pointer-events: none; will-change: transform, opacity; }
.map__clock { position: absolute; }
/* every word sits on a halo of paper so it reads over the drawing. Streets and
   water are spaced out rather than italic: nothing else on the page is Figtree
   italic, and loading it only for the map relaid the whole page as it arrived. */
.map text { paint-order: stroke; stroke: #FFF8EA; stroke-width: 3px; stroke-linejoin: round; }
.map__label { font: 600 11px var(--font-body); fill: var(--ink-soft); }
.map__label--strong { font-weight: 800; fill: var(--ink); font-size: 12px; }
.map__label--peak { font-weight: 700; fill: #4F6A48; }
.map__label--water { fill: #3F7A6E; font-weight: 700; letter-spacing: 0.1em; }
.map__street { font: 650 9px var(--font-body); letter-spacing: 0.05em; fill: #96703F; }
.map__note { font: 600 15px var(--font-hand); fill: var(--plum-2); }
.map__compass { font: 800 8px var(--font-body); fill: #4A1D4E; stroke-width: 2.4px; }
/* the handwriting has no Thai or Chinese letters; their fallbacks run large */
:lang(th) .map__note, :lang(zh) .map__note { font: 600 12px var(--font-body); }
.contact { background: var(--paper); border-radius: var(--radius-lg); padding: 26px 28px; box-shadow: var(--shadow), inset 0 0 0 1px var(--line); display: grid; gap: 8px; }
.contact h3 { font-size: 1.6rem; }
.contact__addr { font-weight: 700; display: flex; gap: 12px; align-items: flex-start; }
.contact__hours, .contact__list li { display: flex; gap: 12px; align-items: center; }
.ico { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; color: var(--plum-2); background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.12); }
.ico .i { width: 16px; height: 16px; }
.contact__list { list-style: none; padding: 0; margin: 6px 0; display: grid; gap: 10px; }
.contact__list a { overflow-wrap: anywhere; font-weight: 650; color: var(--plum-2); text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact__maps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }

/* ---------- cta ---------- */
.cta { margin: 0 12px; border-radius: var(--radius-lg); background: radial-gradient(70% 90% at 50% 0%, #7A3577, var(--plum-deep) 70%); color: var(--on-plum); text-align: center; overflow: hidden; position: relative; }
.cta::after { content: ''; position: absolute; width: 560px; height: 560px; right: -180px; bottom: -280px; border-radius: 50%; background: radial-gradient(circle, transparent 0 30%, rgba(255,207,92,.22) 30% 30.6%, transparent 30.6% 44%, rgba(255,207,92,.28) 44% 44.6%, transparent 44.6% 52%, rgba(255,207,92,.2) 52% 52.6%, transparent 52.6% 60%, rgba(255,207,92,.14) 60% 60.6%, transparent 60.6%); }
.cta::before { content: ''; position: absolute; width: 380px; height: 380px; left: -150px; top: -170px; border-radius: 50%; background: radial-gradient(circle, transparent 0 46%, rgba(255,207,92,.16) 46% 46.8%, transparent 46.8% 60%, rgba(255,207,92,.12) 60% 60.8%, transparent 60.8%); }
.cta__inner { padding: clamp(80px, 11vw, 140px) 0; position: relative; z-index: 1; }
.cta__thai { font-size: clamp(2.6rem, 7vw, 5.4rem); color: var(--gold-2); line-height: 1.2; font-weight: 600; }
.cta h2 { color: #FFF6EA; font-style: italic; font-weight: 450; font-variation-settings: 'SOFT' 100, 'WONK' 1; font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin-top: 6px; }
.cta p:not(.cta__thai) { max-width: 34rem; margin: 18px auto 0; color: #DCC7D6; font-size: 1.12rem; }
.cta__btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 32px; }

/* ---------- footer ---------- */
.footer { padding: 100px 0 36px; color: var(--ink-soft); font-size: 0.95rem; }
.footer__top { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 30px; padding-bottom: 44px; border-bottom: 1px solid var(--line); }
.footer__word { display: flex; align-items: flex-end; font: 600 clamp(3.4rem, 11.5vw, 10rem)/0.82 var(--font-display); font-variation-settings: 'SOFT' 100, 'WONK' 0; letter-spacing: -0.045em; color: var(--plum-ink); }
.footer__seed { flex: none; width: 0.15em; height: 0.2em; margin: 0 0 0.04em 0.06em; border-radius: 50%; background: var(--seed); box-shadow: 0 0 0 0.045em var(--gold); transform: rotate(25deg); }
.footer__pitch { max-width: 290px; display: grid; gap: 18px; justify-items: start; padding-bottom: 8px; }
.footer__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; padding: 44px 0; }
.footer__h { font: 700 0.72rem/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase; color: var(--plum-2); margin-bottom: 16px; }
.footer__grid p + p { margin-top: 8px; }
.footer__muted { opacity: 0.8; }
.footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.footer__links a, .footer__links button {
  color: var(--ink); text-decoration: none; border: 0; padding: 0 0 2px; font: inherit; cursor: pointer; text-align: left;
  background: linear-gradient(var(--gold), var(--gold)) 0 100% / 0% 2px no-repeat; transition: background-size 0.4s var(--ease-out);
}
.footer__links a:hover, .footer__links button:hover { background-size: 100% 2px; }
.social { list-style: none; margin: 0 0 14px; padding: 0; display: flex; gap: 10px; }
.social a { width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; color: var(--plum-ink); background: linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px rgba(74, 29, 78, 0.14), 0 8px 16px -10px rgba(43, 15, 47, 0.45); transition: transform 0.35s var(--ease-out), color 0.25s, background 0.25s, box-shadow 0.25s; }
.social a:hover { transform: translateY(-2px); color: #FFD36B; background: linear-gradient(180deg, #66305F, #3B1440); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 0 0 1px #2B0F2F, 0 12px 20px -10px rgba(74, 29, 78, 0.6); }
.social .i { width: 19px; height: 19px; }
.footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px 24px; padding-top: 22px; border-top: 1px solid var(--line); font-size: 0.85rem; }
@media (max-width: 860px) { .footer__top { grid-template-columns: 1fr; } .footer__grid { grid-template-columns: 1fr 1fr; } }
/* phones: the short lists pair up, and every link is a comfortable tap */
@media (max-width: 520px) {
  .footer { padding-top: 76px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 18px; padding: 36px 0; }
  .footer__grid > :nth-child(-n + 2) { grid-column: 1 / -1; }
  .footer__links { gap: 0; }
  .footer__links a, .footer__links button { display: inline-flex; align-items: center; min-height: 40px; padding: 0; }
}
.footer--slim { padding: 30px 0 40px; }

/* ---------- cookbook ---------- */
.cookbook { border: 0; padding: 0; background: transparent; max-width: none; max-height: none; width: 100%; height: 100%; color: var(--ink); overflow: hidden; }
.cookbook::backdrop { background: rgba(30, 10, 34, 0.72); backdrop-filter: blur(6px); }
.cookbook[open] .cookbook__frame { animation: bookIn 0.6s var(--ease-spring) both; }
@keyframes bookIn { from { opacity: 0; transform: translateY(30px) scale(0.94) rotateX(8deg); } }
.cookbook__frame { position: relative; width: 100%; height: 100%; display: grid; place-items: center; align-content: center; gap: 18px; padding: 24px; perspective: 2200px; }
.cookbook__close { position: absolute; top: 18px; right: 18px; z-index: 5; width: 48px; height: 48px; }
.cookbook__close .i { width: 20px; height: 20px; }
.cookbook__close:hover .i { transform: rotate(90deg); }
.cookbook__nav { display: flex; align-items: center; gap: 18px; color: var(--on-plum); }
.cookbook__count { min-width: 9ch; text-align: center; font-family: var(--font-hand); font-size: 1.4rem; }
.book { --w: min(1040px, 94vw); --h: min(640px, 80vh, calc(var(--w) * 0.62)); width: var(--w); height: var(--h); position: relative; display: grid; grid-template-columns: 1fr 1fr; transform-style: preserve-3d; }
.book::before { content: ''; position: absolute; inset: -12px -14px -16px; border-radius: 18px; background: linear-gradient(90deg, #3A1440, #5A2358 49.6%, #2B0F2F 50%, #5A2358 50.4%, #3A1440); box-shadow: 0 40px 80px -30px rgba(0, 0, 0, 0.7); transform: translateZ(-2px); }
.book__page, .book__face {
  position: relative; background: #FFFBF2; overflow: hidden;
  background-image: radial-gradient(rgba(150, 110, 70, 0.08) 1px, transparent 1px); background-size: 6px 6px;
}
.book__page--left, .book__face.is-left { border-radius: 10px 2px 2px 10px; box-shadow: inset -30px 0 40px -30px rgba(90, 50, 20, 0.35); }
.book__page--right, .book__face.is-right { border-radius: 2px 10px 10px 2px; box-shadow: inset 30px 0 40px -30px rgba(90, 50, 20, 0.35); }
.book__face .page--cover, .book__page .page--cover { border-radius: inherit; }
.book__flipper { position: absolute; top: 0; bottom: 0; left: 50%; width: 50%; transform-origin: left center; transform-style: preserve-3d; pointer-events: none; visibility: hidden; }
.book__flipper.is-flipping { visibility: visible; }
.book__face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.book__face--back { transform: rotateY(180deg); }
.page { position: absolute; inset: 0; padding: clamp(18px, 4%, 44px); display: flex; flex-direction: column; }
.page--art { align-items: center; justify-content: center; }
.page--art canvas, .page--art img { position: relative; width: min(88%, 100%); max-height: 82%; aspect-ratio: 1; object-fit: contain; }
/* a loose watercolour wash in the course colour, pooling darker at its edge */
.page__wash {
  position: absolute; left: 50%; top: 50%; width: min(92%, 100% - 20px); aspect-ratio: 1; transform: translate(-48%, -47%) rotate(-9deg);
  border-radius: 47% 53% 55% 45% / 53% 45% 55% 47%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--cat) 9%, transparent) 0, color-mix(in srgb, var(--cat) 13%, transparent) 78%, color-mix(in srgb, var(--cat) 21%, transparent) 93%, transparent 100%);
}
.page__folio { position: absolute; bottom: 14px; font: 600 1.1rem var(--font-hand); color: #9A8270; }
.page--art .page__folio { left: 24px; }
.page--text .page__folio { right: 24px; }
.page__tape { position: absolute; top: 18px; left: 50%; width: 110px; height: 28px; margin-left: -55px; background: rgba(242, 174, 46, 0.35); transform: rotate(-3deg); }
.page--text { justify-content: center; gap: 10px; }
.page__cat { font: 700 0.75rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--cat, var(--plum-2)); }
.page__title { font-family: var(--font-hand); font-weight: 700; font-size: clamp(2.4rem, 4.6vw, 3.6rem); line-height: 0.95; color: var(--plum-ink); }
.page__thai { font-family: var(--font-thai); font-size: 1.3rem; color: var(--gold-deep); }
.page__desc { color: var(--ink-soft); font-size: clamp(0.95rem, 1.3vw, 1.08rem); max-width: 36ch; }
.page__ing { list-style: none; padding: 0; margin: 6px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; font-family: var(--font-hand); font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--ink); }
.page__ing li::before { content: '•'; color: var(--gold-deep); margin-right: 6px; }
.page__h { font: 700 0.72rem/1 var(--font-body); letter-spacing: 0.14em; text-transform: uppercase; color: #9A8270; margin-top: 10px; }
.page__glyph .i--sparkle { color: var(--gold-deep); width: 16px; height: 16px; }
.page__glyph { display: flex; align-items: center; gap: 10px; font-family: var(--font-hand); font-size: 1.3rem; color: var(--ink-soft); }
.page__mine { font: 600 0.8rem/1.3 var(--font-body); color: #9A8270; margin-top: 6px; }
.page--cover { align-items: center; justify-content: center; text-align: center; background: radial-gradient(circle at 30% 20%, #7A3577, #4A1D4E 75%); color: var(--gold-2); }
.page--cover h2 { color: var(--gold-2); font-size: clamp(2rem, 4vw, 3.4rem); }
.page--cover h2 em { color: #FFF3E0; }
.page--cover p { color: #E7D3E2; margin-top: 12px; max-width: 30ch; }
.page--intro { justify-content: center; gap: 14px; }
.page--intro h3 { font-family: var(--font-hand); font-size: 2.4rem; color: var(--plum-ink); }
.page--intro p { color: var(--ink-soft); }
.page--toc ol { margin: 8px 0 0; padding: 0; list-style: none; columns: 2; column-gap: 24px; font-size: 0.92rem; }
.page--toc li { break-inside: avoid; padding: 3px 0; }
.page--toc button { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; color: var(--ink); font-weight: 600; }
.page--toc button:hover { color: var(--plum-2); text-decoration: underline; text-decoration-color: var(--gold); }
.page--toc button span { font-family: var(--font-hand); color: #9A8270; font-weight: 600; margin-right: 6px; }
@media (max-width: 760px) {
  /* leave room for the 14px cover edge and the close button, so the book sits centred */
  .cookbook__frame { padding: 74px 16px 16px; }
  .book { --h: min(720px, 76vh, 100vh - 170px); grid-template-columns: 1fr; width: min(460px, 100% - 28px); }
  .book::before { background: #3A1440; }
  .book__page--left { display: none; }
  .book__page--right { border-radius: 10px; }
  .book__flipper { left: 0; width: 100%; }
  .book__face { border-radius: 10px; }
  .page--text { justify-content: flex-start; overflow-y: auto; }
  .page--text .page__folio { position: static; align-self: flex-end; margin-top: auto; padding-top: 6px; }
  .page__art-inline { width: 66%; height: auto; margin: 0 auto 4px; }
}
.page__art-inline { display: none; }
@media (max-width: 760px) { .page__art-inline { display: block; } }

/* lined notes page in the cookbook */
.notes { list-style: none; counter-reset: n; margin: 10px 0 0; padding: 0; display: grid; gap: 0; }
.notes li { counter-increment: n; border-bottom: 1.5px solid rgba(110, 44, 108, 0.18); padding: 12px 0 4px; font-family: var(--font-hand); font-size: 1.15rem; color: #9A8270; display: flex; gap: 10px; }
.notes li::before { content: counter(n) '.'; color: var(--gold-deep); font-weight: 700; }
.page--cover .eyebrow { margin-bottom: 14px; }

/* ---------- ไทย and 中文 ----------
   Fraunces, Figtree and Caveat have no Thai or Chinese, so those glyphs fall
   through to faces that do: Trirong and Sriracha (self-hosted, Thai only) for
   Thai, the visitor's own system fonts for Chinese. Neither script is set in
   capitals, tracked out or slanted, and both want a little more leading. */
:root:lang(th) {
  --font-display: 'Fraunces', 'Trirong', 'IBM Plex Sans Thai Looped', Georgia, serif;
  --font-body: 'Figtree', 'IBM Plex Sans Thai Looped', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Sriracha', 'IBM Plex Sans Thai Looped', cursive;
}
:root:lang(zh) {
  --font-display: 'Fraunces', 'Songti SC', 'Noto Serif SC', 'Noto Serif CJK SC', 'Source Han Serif SC', 'PingFang SC', 'Microsoft YaHei', serif;
  --font-body: 'Figtree', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans SC', 'Noto Sans CJK SC', 'Source Han Sans SC', system-ui, sans-serif;
  --font-hand: 'Caveat', 'Kaiti SC', 'STKaiti', 'KaiTi', 'Noto Serif SC', cursive;
}
:root:lang(th) body *, :root:lang(zh) body * { letter-spacing: normal; }
/* The Latin wordmark keeps its original fit in either translation. */
:root:lang(th) .footer__word, :root:lang(zh) .footer__word { letter-spacing: -0.045em; }
:root:lang(th) body { line-height: 1.75; }
:root:lang(zh) body { line-height: 1.75; }
:lang(th) :is(h1, h2, h3) { line-height: 1.3; }
:lang(zh) :is(h1, h2, h3) { line-height: 1.22; }
:lang(th) :is(h1, h2, h3) em, :lang(zh) :is(h1, h2, h3) em { font-style: normal; }
/* the big Thai greeting would only repeat the heading under it */
:lang(th) .cta__thai { display: none; }

@media (min-width: 861px) { :lang(th) .cookbook-btn__title em { font-size: 1.62rem; } }

/* ---------- dark: the night market ----------
   Deep plum evening, warm lamp-gold accents, cream text. Things that are
   paper on the table (receipt, postcard, order slips, map, cookbook pages,
   polaroids) keep their daytime colours, the way paper looks under lamps. */
:root[data-theme='dark'] {
  color-scheme: dark;
  --cream: #170E1A;
  --cream-2: #1E1222;
  --paper: #261829;
  --ink: #F5EADC;
  --ink-soft: #C7B3C2;
  --plum-2: #DDA8DA;
  --plum-ink: #EFD3EC;
  --gold-deep: #F2B648;
  --line: rgba(255, 228, 206, 0.13);
  --hover: rgba(255, 236, 214, 0.08);
  --raised-top: #382440;
  --raised-bottom: #2B1A31;
  --raised-hi: rgba(255, 255, 255, 0.08);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 4px 14px -6px rgba(0, 0, 0, 0.55);
  --shadow: 0 2px 4px rgba(0, 0, 0, 0.25), 0 22px 44px -24px rgba(0, 0, 0, 0.75);
}
[data-theme='dark'] .photos { --cord: rgba(255, 226, 190, 0.3); }
[data-theme='dark'] .apron__strap { stroke: #C79AD9; }
[data-theme='dark'] .apron__band { fill: #8A5AA6; }
[data-theme='dark'] .apron__art { filter: drop-shadow(0 12px 14px rgba(0, 0, 0, 0.45)); }
[data-theme='dark'] :is(.receipt, .postcard, .ticket__paper, .tape, .map-card, .book, .polaroid, .hero-pola, .snap, .class-card__snap, .cookbook-btn__cover, aside.ticket) {
  --cream: #FBF3E4; --cream-2: #F6E7CC; --paper: #FFFAF1; --ink: #2A1430; --ink-soft: #5E4762;
  --plum-2: #6E2C6C; --plum-ink: #4A1D4E; --gold-deep: #B86E06; --line: rgba(74, 29, 78, 0.14); --hover: rgba(74, 29, 78, 0.07);
  --raised-top: #FFFFFF; --raised-bottom: #FBF3E6; --raised-hi: #FFFFFF;
  color: var(--ink);
}
/* Fade painted surfaces. Animating inherited colour on every ancestor delays
   descendant text in WebKit, leaving dark text against the new dark background. */
.theme-fade, .theme-fade *, .theme-fade *::before, .theme-fade *::after { transition: background-color 0.45s, border-color 0.45s, box-shadow 0.45s, fill 0.45s !important; }
/* the parts with their own light colours */
[data-theme='dark'] .nav.is-scrolled { background: rgba(28, 16, 32, 0.84); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--line); }
[data-theme='dark'] .nav.is-open { background: rgba(28, 16, 32, 0.96); }
[data-theme='dark'] .nav__toggle span:not(.sr) { background: var(--ink); }
[data-theme='dark'] .round-btn:hover { color: var(--plum-ink); }
[data-theme='dark'] .hero-bg::before { background: linear-gradient(to bottom, rgba(23, 14, 26, 0.6) 0, rgba(23, 14, 26, 0) 150px); }
[data-theme='dark'] .hero-bg::after {
  background:
    radial-gradient(ellipse 34% 26% at 50% 25%, rgba(23, 14, 26, 0.94) 0%, rgba(23, 14, 26, 0.72) 48%, rgba(23, 14, 26, 0) 100%),
    linear-gradient(to bottom, rgba(23, 14, 26, 0.2) 0%, rgba(23, 14, 26, 0) 22%, rgba(23, 14, 26, 0) 34%, var(--cream) 62%);
}
[data-theme='dark'] .hero-wall { opacity: 0.3; }
[data-theme='dark'] .hero-wall__strip { filter: grayscale(1) contrast(1.05) brightness(0.8); }
[data-theme='dark'] .btn--ghost { --bg: rgba(255, 240, 225, 0.06); --fg: var(--plum-ink); --hi: rgba(255, 255, 255, 0.1); --edge: rgba(255, 228, 206, 0.22); }
[data-theme='dark'] .btn--ghost:hover { --bg: rgba(255, 240, 225, 0.12); --edge: rgba(255, 228, 206, 0.4); --glow: rgba(0, 0, 0, 0.4); }
[data-theme='dark'] :is(.chip, .round-btn, .pick, .social a, .mode, .courses, .nav__toggle) { box-shadow: inset 0 1px 0 var(--raised-hi), 0 0 0 1px var(--line), 0 8px 16px -10px rgba(0, 0, 0, 0.6); }
[data-theme='dark'] .assurances li { background: rgba(255, 240, 225, 0.04); }
[data-theme='dark'] .day { background: radial-gradient(60% 40% at 50% 0%, rgba(242, 174, 46, 0.1), transparent 70%), linear-gradient(180deg, var(--cream) 0%, var(--cream-2) 100%); }
[data-theme='dark'] .day::before { background: radial-gradient(60% 40% at 50% 0%, rgba(154, 107, 192, 0.2), transparent 70%), linear-gradient(180deg, #170E22 0%, #1F1130 100%); }
[data-theme='dark'] .step__time { background-color: rgba(242, 182, 72, 0.12); background-image: none; box-shadow: inset 0 0 0 1px rgba(242, 182, 72, 0.3); }
[data-theme='dark'] .day[data-mode='evening'] .step__time { background-color: rgba(221, 168, 218, 0.12); box-shadow: inset 0 0 0 1px rgba(221, 168, 218, 0.3); }
[data-theme='dark'] :is(.step__tags li, .dayview__cancel) { color: #BFDB92; background: rgba(127, 163, 58, 0.16); }
[data-theme='dark'] .step__n { -webkit-text-stroke-color: rgba(242, 182, 72, 0.35); }
[data-theme='dark'] .step__art { box-shadow: 0 34px 54px -32px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line); }
[data-theme='dark'] .tray { background: linear-gradient(180deg, #2F1E35, var(--paper)); filter: none; }
[data-theme='dark'] .mdish__mat { background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--cat) 28%, var(--raised-top)), color-mix(in srgb, var(--cat) 12%, var(--paper)) 72%); }
[data-theme='dark'] .fbar dd { background: rgba(255, 236, 214, 0.1); }
[data-theme='dark'] .mdish__note { background: rgba(221, 168, 218, 0.1); }
[data-theme='dark'] .faq summary::after { background: var(--i-plus-cream) center / 14px no-repeat, linear-gradient(180deg, var(--raised-top), var(--raised-bottom)); }
[data-theme='dark'] .lang__menu { box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.8), inset 0 0 0 1px var(--line); }
[data-theme='dark'] body::after { opacity: 0.08; }
@media (max-width: 1100px) { [data-theme='dark'] .tray { background: var(--paper); box-shadow: 0 18px 36px -16px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line); } }

/* Chinese headings break at punctuation rather than mid-word, but never overflow */
:lang(zh) :is(h1, h2) { word-break: keep-all; overflow-wrap: anywhere; }