/* 5 · Menu Book — walnut table, the printed menu as a real book, a turning table of recommendations */
:root {
  --wood: #241710; --wood2: #33221a; --wood3: #4a3123; --cream: #f6eddb; --paper: #fbf6ea; --ink: #21160f; --muted: #8c7a68;
  --green: #1f6b3a; --green2: #2f8a4f; --gold: #d4a64a; --gold2: #f0d28c; --line: rgba(246, 237, 219, .14);
  --f-disp: 'DM Serif Display', 'Pridi', Georgia, serif; --f-body: 'Figtree', 'Noto Sans Thai', system-ui, sans-serif;
  --pad: clamp(16px, 4vw, 56px); --wrap: 1260px;
  --bk-bg: var(--paper); --bk-surface: #fff; --bk-text: var(--ink); --bk-muted: #7a6a5a; --bk-line: rgba(33, 22, 15, .16);
  --bk-accent: var(--green); --bk-on-accent: #fff; --bk-radius: 12px; --bk-font: var(--f-body); --bk-send: #1f9d55;
}
body { background: var(--wood); color: var(--cream); font: 400 16px/1.6 var(--f-body); }
html[lang="th"] body { line-height: 1.75; }
h1, h2, h3 { margin: 0; font-family: var(--f-disp); font-weight: 400; letter-spacing: -.01em; }
html[lang="th"] h1, html[lang="th"] h2, html[lang="th"] h3 { font-weight: 600; }
h2 { font-size: clamp(40px, 5vw, 76px); line-height: 1.02; }
html[lang="th"] h2 { line-height: 1.3; font-size: clamp(34px, 4vw, 58px); }
em { font-style: italic; color: var(--gold); }
.eyebrow { display: flex; flex-wrap: wrap; gap: 8px; justify-content: inherit; margin: 0 0 16px; font-size: 13px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
html[lang="th"] .eyebrow { letter-spacing: .03em; }
.lead { color: rgba(246, 237, 219, .7); font-size: 18px; max-width: 54ch; }
.sec { padding: clamp(80px, 10vw, 140px) var(--pad); }
.sec-head { max-width: var(--wrap); margin: 0 auto clamp(30px, 5vw, 56px); }
.sec-head.center { text-align: center; }
.sec-head.center .eyebrow { justify-content: center; }
.sec-head.center .lead { margin-inline: auto; }
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 15px 24px; border-radius: 999px; font-weight: 700; text-decoration: none; transition: .25s; cursor: pointer; }
.btn-gold { background: var(--gold); color: var(--ink); }
.btn-gold:hover { background: var(--gold2); transform: translateY(-2px); }
.btn-line { border: 1px solid rgba(246, 237, 219, .35); }
.btn-line:hover { border-color: var(--gold); color: var(--gold); }
.btn-sm { padding: 10px 18px; font-size: 14px; }
.status { color: var(--muted); }
.status.is-open { color: #7fd69a; }
.round { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; border: 1px solid rgba(246, 237, 219, .3); transition: .2s; }
.round:hover { background: var(--gold); color: var(--ink); border-color: var(--gold); }
#spinPrev .ic, .turn-prev .ic { transform: scaleX(-1); }
.wood-bg { background: radial-gradient(120% 80% at 50% 0%, #3d281c 0%, var(--wood) 60%); }

/* intro: the logo is stamped onto the table */
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; background: var(--wood); animation: fadeOut .6s 1.3s forwards; }
.intro img { width: 150px; animation: stamp .9s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes stamp { from { transform: scale(3); filter: blur(10px); opacity: 0; } 60% { transform: scale(.94); filter: none; opacity: 1; } }
@keyframes fadeOut { to { opacity: 0; visibility: hidden; } }
.no-intro .intro { display: none; }

/* header */
.hd { position: fixed; z-index: 50; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 24px; padding: 14px var(--pad); transition: .3s; }
.hd.scrolled { background: rgba(36, 23, 16, .88); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--line); }
.hd-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; font: 400 26px var(--f-disp); }
.hd-brand small { display: block; font: 600 11px var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.hd-nav { margin-left: auto; display: flex; gap: 26px; font-weight: 500; }
.hd-nav a { text-decoration: none; opacity: .8; }
.hd-nav a:hover { opacity: 1; color: var(--gold); }
.lang { display: flex; gap: 2px; padding: 3px; border-radius: 999px; border: 1px solid var(--line); }
.lang button { padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 700; color: var(--muted); }
.lang button[aria-pressed="true"] { background: var(--cream); color: var(--ink); }

/* hero + lazy susan */
.hero { min-height: 100svh; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(20px, 4vw, 60px); align-items: center; padding: 110px var(--pad) 60px; max-width: calc(var(--wrap) + var(--pad) * 2); margin: 0 auto; }
.hero h1 { font-size: clamp(48px, 6.2vw, 92px); line-height: 1; }
html[lang="th"] .hero h1 { font-size: clamp(42px, 5vw, 74px); line-height: 1.25; }
.sub { margin: 18px 0 26px; font-size: 18px; color: rgba(246, 237, 219, .72); max-width: 40ch; }
.hero-copy > * { animation: rise .9s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--intro, 1.4s) + var(--i, 0) * .08s); }
.hero-copy > :nth-child(2) { --i: 1; } .hero-copy > :nth-child(3) { --i: 2; } .hero-copy > :nth-child(4) { --i: 3; } .hero-copy > :nth-child(5) { --i: 4; }
.no-intro { --intro: 0s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } }
.dish-card { background: var(--paper); color: var(--ink); border-radius: 22px; padding: 22px 24px; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .7); position: relative; min-height: 210px; }
.dish-card::before { content: ''; position: absolute; left: 24px; top: -10px; width: 20px; height: 20px; background: var(--paper); transform: rotate(45deg); border-radius: 3px; display: none; }
.dc-k { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--green); }
html[lang="th"] .dc-k { letter-spacing: .03em; }
.dc-k span:last-child { color: #a08a72; letter-spacing: 0; font-weight: 600; }
.dish-card h3 { font-size: 34px; line-height: 1.08; margin: 8px 0 2px; }
html[lang="th"] .dish-card h3 { line-height: 1.35; font-size: 30px; }
.dc-alt { color: #8a7766; font-size: 15px; }
.dish-card p { margin: 10px 0 12px; color: #5a4a3c; font-size: 15px; }
.dc-p { display: flex; flex-wrap: wrap; gap: 6px; }
.dc-p span { padding: 5px 11px; border-radius: 999px; background: #efe5d0; font-size: 13px; font-weight: 600; }
.dc-p b { color: var(--green); }
.dish-card .in { animation: card .5s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes card { from { opacity: 0; transform: translateX(16px); } }
.susan-ctl { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.susan-dots { display: flex; gap: 6px; }
.susan-dots button { width: 28px; height: 4px; border-radius: 2px; background: rgba(246, 237, 219, .2); transition: .3s; }
.susan-dots button[aria-current="true"] { background: var(--gold); width: 44px; }

.susan-wrap { position: relative; display: grid; place-items: center; }
.susan-glow { position: absolute; width: min(120%, 100vw); aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, rgba(240, 210, 140, .16), transparent 62%); }
.susan { position: relative; width: min(640px, 100%); aspect-ratio: 1; border-radius: 50%; touch-action: none; cursor: grab; outline: none;
  background: radial-gradient(circle at 50% 50%, transparent 0 31%, rgba(0, 0, 0, .18) 31.4% 31.8%, transparent 32.2%),
    repeating-radial-gradient(circle at 50% 50%, #6b4630 0 3px, #77503a 3px 7px, #6a4530 7px 9px),
    #6e4a34;
  box-shadow: 0 0 0 14px #3b2619, 0 0 0 16px rgba(240, 210, 140, .25), 0 60px 90px -30px rgba(0, 0, 0, .8), inset 0 0 80px rgba(0, 0, 0, .45);
  animation: rise 1.1s both; animation-delay: calc(var(--intro, 1.4s) + .1s); }
.susan:active { cursor: grabbing; }
.susan:focus-visible { box-shadow: 0 0 0 14px #3b2619, 0 0 0 18px var(--gold), 0 60px 90px -30px rgba(0, 0, 0, .8); }
.susan-top { position: absolute; inset: 0; border-radius: 50%; transform: rotate(var(--rot, 0deg)); }
.susan-top.snap { transition: transform .9s cubic-bezier(.2, .8, .2, 1); }
.susan-top::after { content: ''; position: absolute; inset: 40%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #8a6248, #5c3d2a); box-shadow: 0 4px 12px rgba(0, 0, 0, .5), inset 0 2px 0 rgba(255, 255, 255, .1); }
.plate { position: absolute; left: 50%; top: 50%; width: 30%; aspect-ratio: 1; margin: -15% 0 0 -15%; transform: rotate(var(--a)) translateY(-108%); }
.plate-in { width: 100%; height: 100%; border-radius: 50%; padding: 6%; background: #fdfaf3; box-shadow: 0 16px 24px -8px rgba(0, 0, 0, .55), inset 0 0 0 2px #e8dfcc; transform: rotate(calc((var(--a) + var(--rot, 0deg)) * -1)); transition: scale .5s, box-shadow .5s; }
.susan-top.snap .plate-in { transition: transform .9s cubic-bezier(.2, .8, .2, 1), scale .5s, box-shadow .5s; }
.plate-in img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; pointer-events: none; }
.plate.on .plate-in { scale: 1.14; box-shadow: 0 0 0 4px var(--gold), 0 24px 34px -8px rgba(0, 0, 0, .6); }
.pointer { position: absolute; bottom: -34px; left: 50%; width: 0; height: 0; margin-left: -12px; border: 12px solid transparent; border-bottom-color: var(--gold); }
.drag-hint { position: absolute; bottom: -78px; display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13px; color: var(--muted); }
.drag-hint .ic { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(6px); } }

/* band */
.band { background: var(--green); color: var(--cream); padding: 16px 0; border-block: 1px solid var(--gold); --mq-gap: 2.4rem; --mq-dur: 40s; }
.band span { display: inline-flex; align-items: center; gap: 2.4rem; white-space: nowrap; font: italic 400 26px var(--f-disp); }
html[lang="th"] .band span { font-style: normal; }
.band span::after { content: '✦'; font-style: normal; font-size: 16px; color: var(--gold); }

/* flipbook */
.flip { background: radial-gradient(70% 60% at 50% 45%, #4a3123 0%, var(--wood) 70%); overflow: hidden; }
.book-stage { --pw: min(410px, 40vw); --ph: calc(var(--pw) * 1.4128); position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(10px, 3vw, 40px); perspective: 2400px; }
.book { position: relative; width: calc(var(--pw) * 2); height: var(--ph); transform-style: preserve-3d; transition: transform .9s cubic-bezier(.6, .05, .3, 1); transform: translateX(var(--shift, -25%)) rotateX(8deg); }
.book::before { content: ''; position: absolute; left: 6%; right: 6%; bottom: -40px; height: 40px; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), transparent); filter: blur(6px); }
.leaf { position: absolute; left: 50%; top: 0; width: 50%; height: 100%; transform-origin: left center; transform-style: preserve-3d; transition: transform 1.05s cubic-bezier(.6, .05, .3, 1), z-index 0s .5s; cursor: pointer; }
.leaf.flipped { transform: rotateY(-180deg); }
.face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; background: #0d3a1c center / cover no-repeat; box-shadow: 0 10px 30px rgba(0, 0, 0, .35); }
.face::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.face.front { border-radius: 2px 8px 8px 2px; }
.face.front::after { background: linear-gradient(90deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 9%, rgba(255, 255, 255, .06) 12%, transparent 30%); }
.face.back { transform: rotateY(180deg); border-radius: 8px 2px 2px 8px; }
.face.back::after { background: linear-gradient(270deg, rgba(0, 0, 0, .35), rgba(0, 0, 0, 0) 9%, rgba(255, 255, 255, .06) 12%, transparent 30%); }
.turn { width: 56px; height: 56px; flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(246, 237, 219, .08); border: 1px solid var(--line); z-index: 5; transition: .2s; }
.turn:hover:not(:disabled) { background: var(--gold); color: var(--ink); }
.turn:disabled { opacity: .25; cursor: default; }
.page-no { text-align: center; margin: 34px 0 14px; font-size: 14px; color: var(--muted); letter-spacing: .06em; }
.spreads { max-width: 900px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; }
.spreads button { display: grid; gap: 6px; justify-items: center; padding: 8px 6px; border-radius: 12px; font-size: 12px; font-weight: 600; color: var(--muted); transition: .2s; }
.spreads button img { width: 100%; max-width: 92px; aspect-ratio: 596 / 842; object-fit: cover; border-radius: 4px; opacity: .55; transition: .2s; }
.spreads button[aria-current="true"] { color: var(--gold); background: rgba(246, 237, 219, .06); }
.spreads button[aria-current="true"] img { opacity: 1; box-shadow: 0 0 0 2px var(--gold); }
.pages-m { display: none; }

/* text menu */
.textmenu { background: var(--cream); color: var(--ink); }
.textmenu em { color: var(--green); }
.textmenu .eyebrow { color: var(--green); }
.acc { max-width: 900px; margin: 0 auto; border-top: 1px solid rgba(33, 22, 15, .2); }
.acc details { border-bottom: 1px solid rgba(33, 22, 15, .2); }
.acc summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 20px 4px; cursor: pointer; font: 400 26px var(--f-disp); }
html[lang="th"] .acc summary { font-weight: 600; font-size: 22px; }
.acc summary::-webkit-details-marker { display: none; }
.acc summary small { font: 600 13px var(--f-body); color: #8a7766; margin-left: auto; }
.acc summary .ic { transition: transform .3s; color: var(--green); }
.acc details[open] summary .ic { transform: rotate(180deg); }
.acc ul { list-style: none; margin: 0; padding: 0 4px 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 40px; }
.acc li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; padding: 8px 0; border-bottom: 1px dashed rgba(33, 22, 15, .14); }
.acc li b { font-weight: 600; }
.acc li span { font-weight: 700; color: var(--green); white-space: nowrap; }
.acc li small { flex-basis: 100%; color: #8a7766; font-size: 13px; }

/* proof */
.proof { display: grid; grid-template-columns: repeat(3, auto) 1fr; gap: 20px 50px; align-items: center; padding: 50px var(--pad); border-block: 1px solid var(--line); }
.pf { display: grid; }
.pf b { font: 400 54px/1 var(--f-disp); color: var(--gold); }
.pf span { color: var(--muted); font-size: 14px; }
.pf-ment { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.pf-ment span { padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); font-size: 14px; }

/* reserve + table tent */
.reserve { background: radial-gradient(60% 60% at 20% 60%, #4a3123, var(--wood) 70%); }
.res-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.res-left { position: sticky; top: 100px; }
.tent-wrap { perspective: 900px; margin-top: 40px; padding-bottom: 30px; }
.tent { position: relative; width: min(360px, 100%); margin: 0 auto; aspect-ratio: 1.45; transform: rotateX(18deg); transform-style: preserve-3d; }
.tent::after { content: ''; position: absolute; left: 4%; right: 4%; bottom: -26px; height: 26px; background: radial-gradient(closest-side, rgba(0, 0, 0, .6), transparent); }
.tent-card { position: absolute; inset: 0; border-radius: 6px; background: linear-gradient(180deg, #fffaf0, #f2e7cf); color: var(--ink); display: grid; place-content: center; justify-items: center; text-align: center; gap: 6px; padding: 18px;
  box-shadow: inset 0 0 0 1px rgba(212, 166, 74, .6), inset 0 0 0 7px #fffaf0, inset 0 0 0 8px rgba(212, 166, 74, .5), 0 20px 40px -10px rgba(0, 0, 0, .6); }
.tent-card img { width: 40px; }
.tent-card .r { font: 400 34px/1 var(--f-disp); letter-spacing: .06em; text-transform: uppercase; color: var(--green); }
html[lang="th"] .tent-card .r { letter-spacing: 0; }
.tent-card .n { font: italic 400 26px/1.1 var(--f-disp); }
.tent-card .n.ph { color: #b9a68f; }
.tent-card .d { font-size: 13px; font-weight: 600; letter-spacing: .06em; color: #7a6a5a; }
.tent-card.flash { animation: tflash .6s; }
@keyframes tflash { 40% { transform: translateY(-6px); } }
.res-card { background: var(--paper); color: var(--ink); border-radius: 26px; padding: clamp(20px, 3vw, 34px); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8); }

/* visit */
.visit { background: var(--wood2); }
.visit-grid { max-width: var(--wrap); margin: 0 auto; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.addr { font-size: 18px; margin: 22px 0 14px; }
.vl { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 8px; color: rgba(246, 237, 219, .75); }
.vl li { display: flex; gap: 10px; align-items: center; }
.vl .ic { color: var(--gold); }
.vl a { text-decoration: none; }
.row-btns { display: flex; flex-wrap: wrap; gap: 10px; }
.map { aspect-ratio: 4 / 3.2; border-radius: 24px; overflow: hidden; border: 6px solid var(--wood3); }
.map iframe { width: 100%; height: 100%; border: 0; filter: sepia(.25) saturate(.85); }

/* footer */
.ft { padding: 70px var(--pad) 110px; text-align: center; overflow: hidden; }
.ft-word { display: grid; justify-items: center; }
.ft-word span { font: 600 clamp(26px, 4vw, 54px) 'Pridi', serif; color: var(--gold); }
.ft-word b { font: 400 clamp(100px, 22vw, 340px)/.85 var(--f-disp); letter-spacing: -.03em; color: transparent; -webkit-text-stroke: 1.5px rgba(240, 210, 140, .55); }
.ft-row { max-width: var(--wrap); margin: 30px auto 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; color: var(--muted); font-size: 14px; }
.ft-row a { text-decoration: none; color: var(--cream); }
.mbar { display: none; }
.fd-toast { background: var(--green); }

@media (max-width: 1080px) {
  .hd-nav { display: none; }
  .lang { margin-left: auto; }
  .hero { grid-template-columns: 1fr; padding-top: 100px; gap: 30px; }
  .susan-wrap { order: -1; margin-bottom: 60px; }
  .susan { width: min(540px, 100%); }
  .hero { overflow-x: clip; }
  .res-grid, .visit-grid { grid-template-columns: 1fr; }
  .res-left { position: static; }
  .proof { grid-template-columns: repeat(3, 1fr); }
  .pf-ment { grid-column: 1 / -1; justify-content: flex-start; }
}
@media (max-width: 760px) {
  body { padding-bottom: 70px; }
  .hd-cta { display: none; }
  .hd-brand small { display: none; }
  .susan-ctl { justify-content: center; }
  .book-stage, .spreads, .page-no { display: none; }
  .pages-m { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(var(--pad) * -1); padding: 0 var(--pad) 10px; scrollbar-width: none; }
  .pages-m img { flex: none; width: 82vw; aspect-ratio: 596 / 842; border-radius: 6px; scroll-snap-align: center; box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .6); }
  .acc ul { grid-template-columns: 1fr; }
  .acc summary { font-size: 22px; }
  .proof { grid-template-columns: 1fr 1fr; }
  .mbar { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: rgba(36, 23, 16, .95); backdrop-filter: blur(12px); border-top: 1px solid var(--line); }
  .mbar a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px 10px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; border: 1px solid var(--line); }
  .mbar .mbar-main { background: var(--gold); color: var(--ink); border-color: var(--gold); }
}