:root{--ink:#100d09;--paper:#f3ebd9;--muted:#aa9b80;--gold:#c8a35e;--gold-soft:#dfc48d;--line:rgba(200,163,94,.22);--display:"Italiana",serif;--serif:"Spectral",Georgia,serif;--ui:"Josefin Sans",sans-serif;--zh:"Noto Serif SC",serif}
*{box-sizing:border-box}body,h1,h2,p{margin:0}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}a{color:inherit;text-decoration:none}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.15;stroke-linecap:round;stroke-linejoin:round}button:disabled{cursor:default}button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--gold-soft);outline-offset:5px}img{display:block}button{border:0}button[hidden],[hidden]{display:none!important}
html{background:var(--ink);color-scheme:dark}body{isolation:isolate;color:var(--paper);font-family:var(--serif);font-weight:300;min-height:100svh;-webkit-font-smoothing:antialiased;background:radial-gradient(ellipse at 50% 42%,rgba(96,66,31,.17),transparent 68%),var(--ink)}body::before{content:"";position:fixed;inset:0;z-index:-1;background:linear-gradient(rgba(16,13,9,.55),rgba(16,13,9,.38)),url("pic/menu-book/jiangnan-ink.webp") center/cover no-repeat;opacity:.55;pointer-events:none}body.reader-open{overflow:hidden}
.book-header{height:70px;padding:0 clamp(22px,4.5vw,72px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid rgba(200,163,94,.09)}.book-brand{display:flex;align-items:center;gap:17px}.book-brand>span{text-transform:uppercase;font-family:var(--display);letter-spacing:.14em;font-size:25px}.book-brand i{font-family:var(--zh);font-size:13px;letter-spacing:.25em;font-style:normal;color:var(--gold);border-left:1px solid var(--line);padding-left:17px}.book-back{display:flex;align-items:center;gap:12px;font-family:var(--ui);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);min-height:44px}.book-back:hover{color:var(--gold-soft)}.book-back svg{width:21px}
.menu-book-main{max-width:1440px;margin:auto;padding:30px clamp(20px,4.5vw,72px) 20px}.book-intro{display:flex;justify-content:space-between;align-items:end;max-width:1160px;margin:0 auto 24px}.book-eyebrow{display:flex;align-items:center;gap:12px;color:var(--gold);font-family:var(--ui);font-size:9px;font-weight:400;letter-spacing:.19em;text-transform:uppercase}.book-eyebrow [lang=zh]{font-family:var(--zh);font-size:12px;letter-spacing:.28em}.book-eyebrow i{width:28px;height:1px;background:var(--line)}.book-intro h1{font-family:var(--display);font-size:clamp(34px,3.5vw,50px);line-height:1.16;font-weight:400;margin-top:9px}.book-intro h1 em{font-family:var(--serif);font-weight:300;color:var(--gold-soft)}.book-intro-note{font-size:16px;line-height:1.5;color:var(--muted);font-style:italic;padding-bottom:4px}
.orientation-note{display:none}.book-stage{position:relative;display:flex;align-items:center;justify-content:center;gap:clamp(16px,2.7vw,42px);padding:2px 0 8px}.book-frame{width:min(100%,1100px,calc((100svh - 315px)*1.5));position:relative;flex-shrink:1;min-width:0;padding:5px 5px 7px;background:#211b14;border:1px solid rgba(187,151,90,.3);border-radius:3px 6px 6px 3px;box-shadow:0 1px 0 #706047,0 3px 0 #2d251b,0 4px 0 #5d4d34,0 6px 0 #1f1a13,0 22px 55px #0009}
.book-pages{position:relative;aspect-ratio:1.5;background:#1b1b1b;isolation:isolate;touch-action:pan-y pinch-zoom;outline-offset:10px!important;cursor:zoom-in}.book-pages.is-loading{cursor:progress}.book-spread{position:absolute;inset:0;background:#1b1b1b}.book-spread>img{width:100%;height:100%;object-fit:contain;user-select:none;-webkit-user-drag:none}.book-gutter{position:absolute;inset:0 auto 0 50%;width:26px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.12) 42%,rgba(0,0,0,.22) 50%,rgba(255,232,192,.035) 56%,transparent);pointer-events:none;z-index:2}.book-gutter::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:1px;background:#0005}
.book-arrow{flex:none;background:transparent;color:var(--gold-soft);display:grid;place-items:center;width:44px;height:56px;transition:color .2s,transform .2s}.book-arrow svg{width:30px;height:30px}.book-arrow:hover:not(:disabled){color:#fff0cf;transform:translateX(3px)}.book-arrow-prev:hover:not(:disabled){transform:translateX(-3px)}.book-arrow:disabled{opacity:.18}.book-read{position:absolute;right:18px;bottom:19px;z-index:4;display:flex;gap:8px;align-items:center;padding:10px 12px;border:1px solid rgba(225,198,150,.24);border-radius:2px;background:rgba(15,12,9,.86);color:var(--gold-soft);font-family:var(--ui);font-size:9px;letter-spacing:.1em;box-shadow:0 2px 12px #0004}.book-read svg{width:15px;height:15px}.book-read:hover{background:#2a2115}.book-corner{position:absolute;right:0;bottom:0;width:26px;height:26px;background:linear-gradient(135deg,transparent 48%,#44392c 51%,#65533d 65%,#171410 90%);clip-path:polygon(100% 0,100% 100%,0 100%);opacity:.5;pointer-events:none}.book-pages.is-turning .book-corner{opacity:0}
.book-turn{position:absolute;inset:0;perspective:1800px;pointer-events:none;z-index:3}.turn-under{position:absolute;inset:0;overflow:hidden}.page-half{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:#1b1b1b}.half-left{left:0}.half-right{left:50%}.page-canvas{position:absolute;top:0;height:100%;width:200%;background:#1b1b1b}.half-left>.page-canvas{left:0}.half-right>.page-canvas{left:-100%}.page-canvas img{width:100%;height:100%;object-fit:contain}.turn-leaf{position:absolute;top:0;height:100%;width:50%;left:50%;transform-origin:left center;transform-style:preserve-3d;will-change:transform}.turn-leaf.is-backward{left:0;transform-origin:right center}.turn-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#1b1b1b}.turn-face>.page-canvas{width:200%}.turn-face[data-side=right]>.page-canvas{left:-100%}.turn-face[data-side=left]>.page-canvas{left:0}.turn-face::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.34),transparent 30%,rgba(227,205,159,.06) 80%,rgba(0,0,0,.12));box-shadow:inset -1px 0 #a894711f;opacity:var(--fold-shade,0)}.turn-face-back{transform:rotateY(180deg)}.turn-leaf.is-backward .turn-face::after{background:linear-gradient(270deg,rgba(0,0,0,.34),transparent 30%,rgba(227,205,159,.06) 80%,rgba(0,0,0,.12))}
.book-caption{display:flex;justify-content:center;align-items:center;gap:22px;margin:22px 0 0;min-height:28px}.book-count{font-family:var(--ui);font-size:11px;letter-spacing:.12em;color:#84765f;font-variant-numeric:tabular-nums;white-space:nowrap}.book-count b{color:var(--gold-soft);font-weight:400}.book-count i{font-style:normal;margin:0 9px;color:#635744}.book-caption h2{font-family:var(--serif);font-size:18px;line-height:1.4;font-weight:300}.book-caption h2 span{font-family:var(--zh);font-size:10px;color:var(--muted);padding-left:14px;letter-spacing:.16em}.book-instructions{font-family:var(--ui);font-size:9px;letter-spacing:.08em;text-align:center;color:#9c8e77;margin:6px 0 0}.instruction-touch{display:none}.book-index{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(15px,2.7vw,42px);margin:23px auto 0;border-top:1px solid var(--line);padding-top:14px;max-width:1100px}.book-index button{position:relative;white-space:nowrap;background:none;padding:6px 0 9px;font-family:var(--ui);font-size:10px;font-weight:400;color:#a2957e;transition:color .25s}.book-index button>span{font-size:8px;color:#89734f;margin-right:6px}.book-index button::after{content:"";position:absolute;bottom:0;left:0;right:0;height:1px;transform:scaleX(0);background:var(--gold);transition:transform .3s}.book-index button[aria-current]{color:var(--gold-soft)}.book-index button[aria-current]::after{transform:scaleX(1)}.book-index button:hover{color:var(--paper)}.book-status:empty{display:none}.book-status{text-align:center;font-size:14px;margin-top:12px;color:var(--gold-soft)}.book-footer{max-width:1100px;margin:23px auto 0;display:flex;align-items:center;justify-content:space-between;gap:16px}.book-footer p{font-size:11px;color:#8d826e}.book-footer>a{font-size:12px;color:var(--gold-soft);white-space:nowrap}.book-footer>a svg{display:inline-block;width:16px;height:16px;margin-left:10px;vertical-align:-3px;stroke-width:1.2}.book-noscript{display:grid;gap:10px;text-align:center;padding:30px}.book-noscript a{text-decoration:underline}
.menu-reader{position:fixed;inset:0;max-width:none;max-height:none;width:100%;height:100dvh;padding:0;border:0;margin:0;background:#100e0b;color:var(--paper);overflow:hidden}.menu-reader::backdrop{background:#000d}.reader-header{height:calc(72px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 24px 0;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);gap:14px}.reader-header .book-eyebrow{font-size:8px}.reader-header h2{font-family:var(--serif);font-size:18px;font-weight:300;margin-top:4px;line-height:1.15}.reader-close{width:44px;height:44px;flex:none;display:grid;place-items:center;background:transparent;color:var(--gold-soft)}.reader-viewport{height:calc(100% - 132px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;touch-action:none;cursor:grab;scrollbar-color:#6b5635 #17130e}.reader-viewport:active{cursor:grabbing}.reader-sheet{width:max-content;min-width:100%;min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px 16px}.reader-sheet img{max-width:none;height:auto;user-select:none;-webkit-user-drag:none;background:#1b1b1b;box-shadow:0 5px 35px #0008}.reader-toolbar{height:calc(60px + env(safe-area-inset-bottom));padding:0 24px env(safe-area-inset-bottom);display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);font-family:var(--ui);font-size:10px;color:var(--muted)}.reader-toolbar>div{display:flex;align-items:center;gap:5px}.reader-toolbar button{height:42px;min-width:42px;background:none;color:var(--gold-soft);font-size:22px}.reader-toolbar button:disabled{opacity:.3}.reader-toolbar #zoomFit{font-size:12px;border:1px solid var(--line);height:32px}.reader-toolbar output{width:42px;text-align:center;font-size:10px;font-variant-numeric:tabular-nums}
/* Give the printed menu room to read on desktop, independent of viewport height. */
@media (min-width:761px) and (min-height:561px){
  .book-header{height:56px;padding-inline:clamp(24px,3vw,48px)}
  .menu-book-main{max-width:none;padding:18px clamp(20px,2vw,36px) 20px}
  .book-intro{max-width:80vw;margin-bottom:16px;align-items:center}
  .book-intro h1{font-size:clamp(30px,2.5vw,40px);margin-top:5px}
  .book-intro-note{font-size:14px;padding-bottom:0}
  .book-stage{gap:clamp(10px,1vw,16px)}
  .book-frame{width:80vw}
  .book-caption{margin-top:16px}
  .book-index{max-width:80vw;margin-top:16px;padding-top:10px}
  .book-footer{max-width:80vw;margin-top:18px}
}
@media (hover:none){.instruction-touch{display:inline}.instruction-desktop{display:none}}
@media (max-width:760px){.book-header{height:64px;padding:0 20px}.book-brand>span{font-size:22px}.book-brand{gap:12px}.book-brand i{padding-left:12px;font-size:11px}.book-back span{display:none}.book-back{width:44px;justify-content:center}.menu-book-main{padding:28px 18px 24px}.book-intro{display:block;text-align:center;margin-bottom:24px}.book-eyebrow{justify-content:center;font-size:8px;gap:9px}.book-intro h1{font-size:36px;margin-top:13px}.book-intro-note{display:none}.book-stage{gap:0;padding-bottom:46px}.book-frame{width:100%;padding:3px 3px 5px}.book-arrow{position:absolute;bottom:-5px;height:44px;width:44px;z-index:5}.book-arrow-prev{left:12px}.book-arrow-next{right:12px}.book-arrow svg{width:26px;height:26px}.book-read{right:10px;bottom:11px;padding:8px 9px}.book-read span{font-size:8px}.book-read svg{width:13px;height:13px}.book-caption{margin-top:-29px;gap:12px;min-height:34px;padding:0 45px;position:relative;pointer-events:none;flex-wrap:wrap;row-gap:1px}.book-caption h2{font-size:15px}.book-caption h2 span{display:none}.book-count{font-size:10px}.book-count i{margin:0 6px}.book-instructions{margin-top:15px;font-size:9px}.instruction-touch{display:inline}.instruction-desktop{display:none}.book-index{flex-wrap:nowrap;justify-content:flex-start;gap:23px;overflow-x:auto;scrollbar-width:none;margin-top:30px;padding:17px 2px 6px}.book-index::-webkit-scrollbar{display:none}.book-index button{font-size:11px;min-height:40px}.book-index button>span{display:block;font-size:8px;margin:0 0 7px;text-align:left}.book-footer{margin-top:28px;display:block;text-align:center}.book-footer p{font-size:10px;max-width:280px;margin:auto;line-height:1.7}.book-footer>a{display:inline-block;margin-top:17px;font-size:13px}.reader-header{padding-left:18px;padding-right:12px}.reader-header .book-eyebrow{justify-content:flex-start}.reader-header h2{font-size:16px}.reader-toolbar{padding-left:16px;padding-right:12px}.reader-toolbar>span{font-size:9px}.reader-toolbar button{min-width:36px}.reader-toolbar output{width:37px}}
/* A portrait phone reads one leaf at a time; the source spread stays intact. */
@media (max-width:760px) and (orientation:portrait){
  .book-header{height:calc(54px + env(safe-area-inset-top));padding:env(safe-area-inset-top) 18px 0}
  .menu-book-main{padding:16px 12px max(24px,env(safe-area-inset-bottom))}
  .book-intro{margin-bottom:16px}
  .book-intro h1{font-size:clamp(28px,7.8vw,34px);margin-top:5px}
  .book-intro .book-eyebrow{font-size:7px}
  .book-stage{padding-bottom:48px}
  .book-frame{max-width:440px}
  .book-pages{aspect-ratio:.75;overflow:hidden}
  .book-spread{overflow:hidden}
  .book-spread>img{width:200%;max-width:none;transform:translateX(0)}
  .right-page .book-spread>img{transform:translateX(-50%)}
  .book-gutter{display:none}
  .single-leaf{width:100%;left:0;transform-origin:left center}
  .book-turn{overflow:hidden;perspective:1400px}
  .book-read{position:static;min-height:44px;justify-content:center;gap:8px;width:100%;margin-top:3px;border-width:1px 0 0;border-radius:0;box-shadow:none;background:#1c1710}
  .book-read span{font-size:10px}
  .book-read svg{width:15px;height:15px}
  .book-caption{margin-top:-33px;padding-inline:46px;gap:10px}
  .book-caption h2{max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .book-instructions{margin-top:12px;letter-spacing:.02em}
  .orientation-note{display:block;text-align:center;font-family:var(--ui);font-size:9px;color:var(--muted);margin-top:9px}
  .book-index{margin-top:20px;padding-top:12px;gap:23px}
  .book-footer{margin-top:18px}
}
@media (orientation:landscape) and (max-height:560px){.book-header{height:45px;padding:0 24px}.book-brand>span{font-size:21px}.book-back span{display:none}.menu-book-main{padding:10px 28px 12px}.book-intro{display:none}.book-intro .book-eyebrow,.book-intro-note{display:none}.book-intro h1{font-size:26px;margin:0}.orientation-note{display:none}.book-stage{gap:24px;padding:0 0 3px}.book-frame{width:min(100%,calc((100svh - 104px)*1.5));padding:3px 3px 5px}.book-arrow{position:static;height:44px;flex:none}.book-caption{margin-top:10px;padding:0;gap:16px;min-height:20px}.book-caption h2{font-size:14px}.book-caption h2 span{display:none}.book-instructions{display:none}.book-index,.book-footer{display:none}.book-read{padding:7px;right:10px;bottom:10px}.book-read span{display:none}.book-read svg{width:14px;height:14px}.reader-header{height:52px;padding-top:0}.reader-header .book-eyebrow{display:none}.reader-header h2{margin:0}.reader-viewport{height:calc(100% - 102px - env(safe-area-inset-bottom))}.reader-toolbar{height:calc(50px + env(safe-area-inset-bottom))}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}.turn-leaf{will-change:auto}}