/* Blank Page v2.1 — 英文為主、繁中為第二層｜紙與夜＋點亮
   決策來源見 ../../STYLE_DERIVATION.md。一條曲線、兩階圓角、單一強調色（金）。 */
:root{
  --night:#101412; --forest:#394233; --gold:#C0A070; --cream:#F0E8E8;
  --paper:#F2ECE2; --paper-2:#E9DFCD; --ink:#1B1B18; --kraft:#B39A76;
  --ink-2:rgba(27,27,24,.64); --cream-2:rgba(240,232,232,.7);
  --line-ink:rgba(27,27,24,.2); --line-cream:rgba(240,232,232,.2);
  --ease:cubic-bezier(.16,.84,.44,1);
  --fill:cubic-bezier(.5,.08,.25,1); /* 填亮專用：起手不衝，看得見由下往上升 */
  --gutter:clamp(20px,5.6vw,92px);
  --s1:clamp(72px,8vw,96px); --s2:clamp(96px,11vw,144px); --s3:clamp(120px,15vw,200px);
  --disp:"Bodoni Moda","Didot","Bodoni 72","Baskerville",serif;
  --sans:"PingFang TC","Noto Sans TC","Helvetica Neue",Arial,sans-serif;
  --mute:var(--ink-2);
}
.night{--mute:var(--cream-2)}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);font-weight:400;font-size:17px;line-height:1.75;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:4px;border-radius:2px}
::selection{background:var(--gold);color:var(--night)}
section[id],div[id]{scroll-margin-top:72px}

/* ---------- 字級系統 ---------- */
.disp{font-family:var(--disp);font-weight:400;letter-spacing:-.022em;line-height:1.02;font-optical-sizing:auto}
.h2{font-size:clamp(40px,5.2vw,80px);line-height:1.06;letter-spacing:-.022em;text-wrap:balance;--sec:clamp(16px,1.5vw,22px);--sg:1.1rem}
.label{font-size:12px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;color:#8A6F3F;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.label::before{content:"";width:28px;height:1px;background:currentColor;opacity:.7}
.label i{width:1px;height:11px;background:currentColor;opacity:.45}
.label .zl{letter-spacing:.24em;font-weight:400;text-transform:none;opacity:.85}
.night .label{color:var(--gold)}
.fire .label{color:var(--cream);text-shadow:0 1px 14px rgba(0,0,0,.7)}.fire .label::before{background:var(--gold);opacity:1}

/* ---------- 雙語：EN 為主視覺、繁中為次行；data-lang=zh 時主次對調 ---------- */
.bi{display:flex;flex-direction:column;--sec:clamp(15px,1.15vw,17px);--sg:.8rem}
.bi>.en{order:1;font-family:var(--disp);font-weight:400}
.bi>.zh{order:2;font-family:var(--sans)}
html[data-lang=zh] .bi>.zh{order:1} html[data-lang=zh] .bi>.en{order:2}
/* 次行 */
html[data-lang=en] .bi>.zh,html[data-lang=en] .bi-i>.zh,html[data-lang=en] .label .zl,html[data-lang=en] .label i{display:none}
html[data-lang=zh] .bi>.en{font-size:var(--sec);line-height:1.75;letter-spacing:.12em;font-weight:400;color:var(--mute);margin-top:var(--sg);text-transform:none}
html[data-lang=zh] .bi>.en{font-family:var(--disp);letter-spacing:.04em;font-variation-settings:"opsz" 14}
/* 繁中為主時：字級略縮（漢字視覺較重）、字重 500 */
html[data-lang=zh] .bi>.zh{font-size:.82em;font-weight:500;letter-spacing:.02em;line-height:1.3}
.h2.bi>.en{letter-spacing:-.022em;line-height:1.06}
html[data-lang=zh] .h2.bi>.zh{letter-spacing:-.01em;line-height:1.22}
.bi-i{display:inline-flex;gap:.9em;align-items:baseline}
.bi-i>.en{order:1;font-family:var(--disp);font-variation-settings:"opsz" 14;letter-spacing:.01em}
.bi-i>.zh{order:2;color:var(--mute);letter-spacing:.14em;font-size:.92em}
html[data-lang=zh] .bi-i>.zh{order:1;color:inherit;font-weight:500} html[data-lang=zh] .bi-i>.en{order:2;color:var(--mute)}
/* 單語開關文字（導覽、按鈕） */
html[data-lang=en] .t-zh,html[data-lang=zh] .t-en{display:none}
.lang{display:inline-flex;align-items:center;gap:2px;font-size:12px;letter-spacing:.16em}
.lang button{padding:8px 6px;opacity:.45;transition:opacity .4s var(--ease)}
.lang button:hover,.lang button[aria-pressed=true]{opacity:1}
.lang span{opacity:.3}

/* ---------- 頁首 ---------- */
.hdr{position:fixed;inset:0 0 auto 0;z-index:50;height:72px;padding:0 var(--gutter);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  color:var(--ink);transition:transform .6s var(--ease),color .5s var(--ease),background-color .5s var(--ease)}
.hdr[data-theme=night]{color:var(--cream)}
.hdr.hide{transform:translateY(-100%)}
.hdr.solid{background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(14px)}
.hdr.solid[data-theme=night]{background:color-mix(in srgb,var(--night) 82%,transparent)}
.brand{display:inline-flex;align-items:center;gap:12px;justify-self:start}
.brand img{width:30px;height:30px;object-fit:contain}
.brand .wm{width:clamp(120px,9.6vw,148px);height:auto;display:block}
.lg-p{display:block}.lg-n{display:none}.hdr[data-theme=night] .lg-p{display:none}.hdr[data-theme=night] .lg-n{display:block}
.nav{display:flex;gap:clamp(22px,2.6vw,44px);font-size:14px;letter-spacing:.1em}
html[data-lang=en] .nav{font-size:13px;letter-spacing:.16em;text-transform:uppercase}
.nav a,.ul{position:relative;padding:6px 0}
.nav a::after,.ul::after{content:"";position:absolute;left:0;right:0;bottom:1px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.nav a:hover::after,.ul:hover::after,.nav a[aria-current=true]::after{transform:scaleX(1)}
.hdr .right{justify-self:end;display:flex;align-items:center;gap:22px}
.menu-toggle{display:none;font-size:13px;letter-spacing:.18em;padding:10px 0}

/* ---------- 按鈕：實心膠囊＋金色填亮（無描邊） ---------- */
.pill{--bg:var(--ink);--fg:var(--paper);position:relative;display:inline-flex;align-items:center;justify-content:center;gap:12px;height:48px;padding:0 32px;border-radius:999px;border:0;background:var(--bg);color:var(--fg);
  font-size:14px;font-weight:500;letter-spacing:.16em;overflow:hidden;isolation:isolate;box-shadow:0 0 0 0 rgba(192,160,112,0);transition:color .5s var(--ease) .22s,transform .25s var(--ease),box-shadow .6s var(--ease)}
html[data-lang=en] .pill{letter-spacing:.14em;text-transform:uppercase;font-size:13px}
.night .pill,.hdr[data-theme=night] .pill,.drawer .pill{--bg:var(--cream);--fg:var(--night)}
.pill::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .8s var(--fill);z-index:-1;border-radius:inherit}
.pill:hover::before,.pill:focus-visible::before{transform:none}
.pill:hover,.pill:focus-visible{color:var(--night);box-shadow:0 10px 28px -12px rgba(192,160,112,.55)}
.pill:active::before{transform:none;transition-duration:.35s}
.pill:active{transform:scale(.97)}
.pill.sm{height:40px;padding:0 24px;font-size:12px}
.arrow-link{display:inline-flex;align-items:center;gap:14px;font-size:14px;letter-spacing:.18em;padding:8px 0;position:relative}
html[data-lang=en] .arrow-link{text-transform:uppercase;font-size:13px;letter-spacing:.16em}
.arrow-link svg{width:34px;height:10px;transition:transform .5s var(--ease)}
.arrow-link:hover svg{transform:translateX(6px)}
.arrow-link::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.arrow-link:hover::after{transform:scaleX(1)}

/* ---------- 區塊基礎 ---------- */
.sec{position:relative;padding:var(--s2) var(--gutter)}
.paper{background:var(--paper);color:var(--ink)}
.night{background:var(--night);color:var(--cream)}
.wrap{max-width:1360px;margin:0 auto}
.rwrap{position:relative;height:0;z-index:3;--rh:clamp(48px,7vw,120px)}
:root{--rh:clamp(48px,7vw,120px);--rgap:clamp(40px,5vw,72px)}
.ridge{position:absolute;left:0;right:0;bottom:-1px;height:var(--rh);width:100%;display:block;pointer-events:none}
.rwrap.paper .f{fill:var(--paper)} .rwrap.night .f{fill:var(--night)}

/* ---------- 點亮：進場 ---------- */
.js .lit{opacity:0;filter:brightness(.5) saturate(.85);transform:scale(1.055);
  transition:opacity 1.2s var(--ease),filter 1.6s var(--ease),transform 1.8s var(--ease);transition-delay:var(--d,0s);will-change:opacity,filter,transform}
.js .lit.in{opacity:1;filter:none;transform:none}
.js .rise{opacity:0;transform:translateY(14px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0s)}
.js .rise.in{opacity:1;transform:none}
.frame{overflow:hidden;position:relative;background:var(--night)}
.cap{margin-top:14px;font-size:13px;letter-spacing:.1em;color:var(--ink-2);display:flex;gap:16px;align-items:baseline}
.cap .n{font-family:var(--disp);font-variation-settings:"opsz" 14;letter-spacing:.08em;color:#8A6F3F}
.cap .bi-i>.en{font-size:15px;color:var(--ink)}

/* ---------- 1 首屏（紙） ---------- */
.hero{min-height:100svh;padding-top:calc(72px + 5vh);padding-bottom:calc(var(--rh) + var(--rgap) + 20px);display:flex;align-items:center}
.hero .grid{display:grid;grid-template-columns:7fr 5fr;gap:clamp(32px,6vw,96px);align-items:center;width:100%}
.hero h1{font-size:clamp(54px,7.4vw,124px);margin:28px 0 34px;--sg:1.3rem}
.hero h1.bi>.zh{letter-spacing:.3em}
html[data-lang=zh] .hero h1.bi>.zh{letter-spacing:.08em;font-size:.78em}
html[data-lang=zh] .hero h1 .en .ln{display:inline;overflow:visible;padding:0;margin:0}
html[data-lang=zh] .hero h1 .en .ln>span{display:inline}
html[data-lang=zh] .hero h1 .en .ln+.ln::before{content:" "}
.ln{display:block;overflow:hidden;padding-bottom:.16em;margin-bottom:-.16em}
.ln>span{display:block;transition:transform 1.2s var(--ease)}
.js .ln>span{transform:translateY(108%)}
.js.loaded .ln>span{transform:none}
.js.loaded .ln:nth-child(2)>span{transition-delay:.1s}
.hero .sub{font-size:clamp(19px,1.7vw,24px);margin-bottom:44px;max-width:22em;--sec:15px;--sg:.6rem}
.hero .sub>.en{font-family:var(--disp);font-variation-settings:"opsz" 14;line-height:1.5}
html[data-lang=zh] .hero .sub>.zh{font-size:clamp(19px,1.7vw,24px)}
.hero .actions{display:flex;flex-wrap:wrap;align-items:center;gap:20px 36px}
.hero .photo{position:relative}
.hero .photo .frame{aspect-ratio:4/5;max-height:80svh;margin-left:auto;clip-path:var(--ridge-clip)}
.hero .meta{position:absolute;left:0;bottom:-34px;font-size:12px;letter-spacing:.14em;color:var(--ink-2)}
.hero .meta .bi-i>.en{font-size:13px}

/* ---------- 2 關於（夜） ---------- */
.about{min-height:92svh;display:flex;align-items:center;overflow:hidden}
.about .bg{position:absolute;top:0;bottom:0;right:0;width:60%;-webkit-mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 42%);mask-image:linear-gradient(90deg,transparent 0,rgba(0,0,0,.35) 14%,#000 42%)}
.about .in{position:relative;z-index:1;width:100%}
.about .txt{max-width:min(41vw,610px)}
blockquote{font-size:clamp(27px,2.85vw,45px);font-weight:400;line-height:1.24;letter-spacing:-.012em;--sec:clamp(15px,1.2vw,18px);--sg:2rem}
blockquote span span{display:block;text-wrap:balance}
blockquote span.en span{margin-bottom:.14em}
blockquote>.zh{line-height:1.95}
html[data-lang=zh] blockquote>.zh{font-size:.62em}

/* ---------- 3 調酒（紙） ---------- */
.menu{padding-left:calc(var(--gutter) + 64px)}
.spine{position:absolute;left:0;top:0;bottom:0;width:56px;background:var(--kraft);display:flex;align-items:center;justify-content:center}
.spine span{white-space:nowrap;writing-mode:vertical-rl;font-size:12px;letter-spacing:.7em;color:#F6EFE0}
.menu .grid{display:grid;grid-template-columns:6fr 5fr;gap:clamp(40px,7vw,120px);align-items:start}
.menu .h2{margin:24px 0 clamp(36px,4.2vw,56px);font-size:clamp(38px,4.3vw,66px)}
.list{border-top:1px solid var(--ink)}
.list li{position:relative;border-bottom:1px solid var(--line-ink)}
.list li::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .7s var(--ease)}
.list li:hover::after,.list li:has(.on)::after{transform:scaleX(1)}
.dr{display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:8px;width:100%;padding:24px 0;opacity:.5;transition:opacity .5s var(--ease)}
.dr:hover,.dr.on,.dr:focus-visible{opacity:1}
.dr .num{font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:14px;letter-spacing:.1em;color:#8A6F3F}
.dr .nm{font-size:clamp(28px,3.1vw,46px);--sec:15px;--sg:.35rem;line-height:1.08;transition:transform .6s var(--ease)}
.dr:hover .nm,.dr.on .nm{transform:translateX(10px)}
.dr .ar svg{width:34px;height:10px;opacity:0;transform:translateX(-8px);transition:opacity .5s var(--ease),transform .5s var(--ease)}
.dr.on .ar svg,.dr:hover .ar svg{opacity:1;transform:none}
.menu .more{margin-top:30px;font-size:15px;--sec:14px;--sg:.2rem;text-wrap:balance}
.menu .more>.en{font-family:var(--sans);font-size:15px;color:var(--ink-2);letter-spacing:.01em}
.stagewrap{position:sticky;top:104px}
.stage{position:relative;aspect-ratio:4/5;width:100%}
.stage .panel{position:absolute;inset:0;background:var(--paper-2);border-radius:999px 999px 0 0}
.stage .panel::after{content:"";position:absolute;inset:12px;border:1px solid rgba(27,27,24,.18);border-radius:999px 999px 0 0}
.stage .d{position:absolute;left:50%;bottom:5%;width:84%;height:90%;object-fit:contain;object-position:50% 100%;transform:translate(-50%,16px) scale(.985);opacity:0;filter:brightness(.72);
  transition:opacity .45s var(--ease),transform .45s var(--ease),filter .45s var(--ease);pointer-events:none}
.stage .d.on{opacity:1;transform:translate(-50%,0) scale(1);filter:none;transition:opacity .9s var(--ease) .12s,transform 1.1s var(--ease) .12s,filter 1.2s var(--ease) .12s}


/* ---------- 調酒區下方：吧台現場照片（同尺寸圓角語言） ---------- */
.menu .bar{margin-top:clamp(72px,9vw,128px);padding-left:0}
.bar .h2{margin:24px 0 clamp(32px,4vw,52px);font-size:clamp(34px,3.9vw,58px)}
.bgrid{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:clamp(220px,26vw,380px);gap:clamp(14px,1.6vw,24px)}
.b{min-width:0}.b .frame{width:100%;height:100%;border-radius:20px;isolation:isolate}
.b img{object-position:var(--pd,50% 50%)}
.b1{grid-column:1/9}.b2{grid-column:9/13}.b3{grid-column:1/5}.b4{grid-column:5/13}
@media (max-width:760px){
  .menu .bar{padding-left:0}
  .bgrid{grid-template-columns:1fr 1fr;grid-auto-rows:auto}
  .b .frame{border-radius:16px}
  .b1,.b4{grid-column:1/3}.b1 .frame,.b4 .frame{aspect-ratio:16/10;height:auto}
  .b2,.b3{grid-column:auto}.b2 .frame,.b3 .frame{aspect-ratio:4/5;height:auto}
  .b img{object-position:var(--pm,50% 50%)}
}

/* ---------- 4 螢火蟲季（夜） ---------- */
.fire{min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;padding-bottom:calc(var(--rh) + var(--rgap))}
.fire .bg{position:absolute;inset:0;-webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.3) 40%,#000 82%);mask-image:linear-gradient(90deg,rgba(0,0,0,.12) 0,rgba(0,0,0,.3) 40%,#000 82%)}
.fire .bg img{-webkit-mask-image:linear-gradient(0deg,rgba(0,0,0,.22) 0,#000 58%);mask-image:linear-gradient(0deg,rgba(0,0,0,.22) 0,#000 58%)}
.fire canvas{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}
.fire .in{position:relative;z-index:3;width:100%}
.fire .h2,.fire .note{text-shadow:0 2px 24px rgba(0,0,0,.55)}
.fire .h2{font-size:clamp(42px,6.2vw,96px);margin:24px 0 26px}
.fire .note{font-size:clamp(17px,1.4vw,20px);--sec:15px;--sg:.4rem}
.fire .note>.en{font-family:var(--disp);font-variation-settings:"opsz" 14;color:var(--cream)}
.fire .note>.zh{color:var(--cream-2)}

/* ---------- 5 空間（紙）：橫向滑動、同尺寸圓角照片、說明牌切進照片角落 ---------- */
.space{--edge:max(var(--gutter),calc((100vw - 1360px)/2));--cw:min(860px,72vw);--r:20px;overflow:hidden}
.space .head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px}
.space .h2{margin:24px 0 0;font-size:clamp(38px,4.6vw,72px)}
.ctrl{display:flex;align-items:center;gap:14px;padding-bottom:10px}
.count{display:inline-flex;align-items:center;gap:10px;margin-right:14px;font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:15px;letter-spacing:.1em;color:var(--ink-2)}
.count b{font-weight:500;color:var(--ink)}.count i{width:26px;height:1px;background:currentColor;opacity:.5}
.rb{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:var(--ink);color:var(--paper);position:relative;overflow:hidden;isolation:isolate;transition:color .45s var(--ease),transform .25s var(--ease),opacity .4s var(--ease)}
.rb::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .8s var(--fill);z-index:-1;border-radius:50%}
.rb:hover::before,.rb:focus-visible::before{transform:none}.rb:hover,.rb:focus-visible{color:var(--night)}.rb:active{transform:scale(.94)}
.rb svg{width:28px;height:9px}.rb:disabled{opacity:.28;pointer-events:none}
.prog{height:1px;background:var(--line-ink);margin:clamp(28px,3.4vw,48px) 0 clamp(28px,3.4vw,44px);position:relative}
.prog span{position:absolute;left:0;top:-.5px;height:2px;width:33.33%;background:var(--gold);transform-origin:left;transition:transform .7s var(--ease)}
.rail{display:flex;gap:clamp(18px,2.2vw,32px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 var(--edge) clamp(56px,6vw,84px);margin:0 calc(-1 * var(--gutter));scroll-padding-left:var(--edge);cursor:grab;-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}.rail.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.rail::after{content:"";flex:0 0 calc(var(--edge) - clamp(18px,2.2vw,32px))}
.card{flex:0 0 var(--cw);scroll-snap-align:start;min-width:0}
.ph{position:relative}
.frame.nat{background:var(--paper-2);aspect-ratio:4/3;border-radius:var(--r);isolation:isolate}
.frame.nat img{height:100%;object-fit:cover;object-position:var(--pd,50% 50%);-webkit-user-drag:none}
/* 說明牌：與頁面同色，切進照片左下角；三個轉角各自圓弧 */
.tab{position:absolute;left:-1px;bottom:-1px;background:var(--paper);padding:clamp(18px,1.9vw,26px) clamp(26px,2.8vw,40px) clamp(14px,1.5vw,22px) 1px;border-top-right-radius:var(--r);z-index:2}
.tab::before,.tab::after{content:"";position:absolute;width:var(--r);height:var(--r);pointer-events:none;background:radial-gradient(circle at 100% 0,transparent calc(var(--r) - .5px),var(--paper) var(--r))}
.tab::before{left:1px;top:calc(-1 * var(--r))}
.tab::after{left:100%;bottom:0}
.tab .tg{display:flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:#8A6F3F;margin-bottom:clamp(10px,1vw,14px)}
.tab .tg .ico{width:20px;height:20px;flex:none}
.tab .tg .num{font-family:var(--disp);font-variation-settings:"opsz" 14;letter-spacing:.1em}
.tab .tg i{width:1px;height:11px;background:currentColor;opacity:.4}
.tab .tg .bi-i>.en{font-family:var(--sans);font-variation-settings:normal;letter-spacing:.18em}
html[data-lang=zh] .tab .tg{text-transform:none;letter-spacing:.14em}
.tab .nm{font-size:clamp(26px,2.5vw,38px);line-height:1.08;--sec:15px;--sg:.3rem;letter-spacing:-.015em}
.tab .nm.bi>.en{letter-spacing:-.015em}
.facts{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(16px,2vw,32px);border-top:1px solid var(--ink);padding-top:clamp(28px,3vw,40px)}
.facts li{display:flex;flex-direction:column;gap:18px;--sec:13px;--sg:.2rem;font-size:clamp(17px,1.4vw,20px)}
.facts .ico.big{width:34px;height:34px;color:#8A6F3F;stroke-width:1.1}
.facts .bi>.en{font-family:var(--disp);font-variation-settings:"opsz" 14;line-height:1.25}
.facts .bi>.zh{letter-spacing:.14em}

/* ---------- 6 訪客資訊（夜） ---------- */
.visit{padding-bottom:0;overflow:hidden}
.visit .grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,8vw,140px);align-items:start}
.visit .h2{margin:24px 0 clamp(32px,4vw,52px)}
.hours{border-top:1px solid var(--cream)}
.hours>div{display:flex;align-items:baseline;justify-content:space-between;gap:20px;padding:26px 0;border-bottom:1px solid var(--line-cream);font-size:clamp(22px,2vw,28px);--sec:14px;--sg:.2rem}
.hours b{font-family:var(--disp);font-weight:500;font-variation-settings:"opsz" 14;font-size:clamp(28px,2.8vw,40px);letter-spacing:.02em;font-variant-numeric:lining-nums tabular-nums;white-space:nowrap}
.visit .fine{margin-top:26px;font-size:15px;--sec:14px;--sg:.2rem;text-wrap:balance;max-width:30em}
.visit .fine>.en{font-family:var(--sans);font-size:15px;color:var(--cream-2);letter-spacing:.02em}
.visit .addr{font-size:clamp(18px,1.6vw,22px);margin:0 0 38px;--sec:15px;--sg:.3rem}
.visit .addr>.en{font-family:var(--disp);font-variation-settings:"opsz" 14}
.bigmark{color:var(--gold);margin-top:clamp(64px,9vw,140px);padding-bottom:clamp(8px,1vw,16px);user-select:none}
.bigmark svg{display:block;width:100%;height:auto;overflow:visible}
.foot{display:flex;justify-content:space-between;gap:20px;padding:26px var(--gutter);border-top:1px solid var(--line-cream);font-size:12px;letter-spacing:.2em;color:var(--cream-2)}

/* ---------- 手機抽屜 ---------- */
.drawer{position:fixed;inset:0;z-index:60;background:var(--night);color:var(--cream);padding:96px var(--gutter) 40px;display:flex;flex-direction:column;justify-content:space-between;
  opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .5s var(--ease),transform .5s var(--ease),visibility 0s linear .5s}
.drawer.open{opacity:1;visibility:visible;transform:none;transition:opacity .5s var(--ease),transform .5s var(--ease)}
.drawer a.big{display:flex;align-items:baseline;gap:18px;font-size:34px;font-weight:500;letter-spacing:.04em;padding:14px 0;border-bottom:1px solid var(--line-cream)}
html[data-lang=en] .drawer a.big{font-family:var(--disp);font-weight:400;font-size:38px;letter-spacing:-.01em}
.drawer a.big small{font-family:var(--disp);font-size:16px;color:var(--gold);letter-spacing:.1em}
.drawer .close{position:absolute;top:22px;right:var(--gutter);font-size:13px;letter-spacing:.18em;padding:10px 0}
.dfoot{display:flex;align-items:center;justify-content:space-between;gap:20px}

/* ---------- 響應式 ---------- */
@media (max-width:1000px){
  .nav{display:none}.hdr{grid-template-columns:1fr auto}.menu-toggle{display:inline-block}.hdr .right .pill,.hdr .right .lang{display:none}
  .hero .grid{grid-template-columns:1fr}
  .hero .photo{width:86%;margin:0 auto}
  .hero .photo .frame{max-height:none;aspect-ratio:4/5;width:100%;margin:0}
  .hero .meta{position:static;margin-top:16px}
  .about{min-height:auto;display:block;padding-top:0;padding-bottom:var(--s1)}
  .about .bg{position:relative;width:calc(100% + 2*var(--gutter));margin:0 calc(-1 * var(--gutter)) 40px;height:70vw;right:auto}
  .about .bg{-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
  .about .txt{max-width:none}
  .menu{padding-left:calc(var(--gutter) + 34px)}.spine{width:30px}.spine span{font-size:10px;letter-spacing:.5em}
  .visit .grid{grid-template-columns:1fr}
  .menu .grid{display:flex;flex-direction:column;gap:0}
  .menu .left{display:contents}
  .menu .label{order:0}.menu .h2{order:1;margin-bottom:28px}.stagewrap{order:2;position:relative;top:auto;width:min(76%,380px);margin:0 auto 28px}.menu .list{order:3}.menu .more{order:4}
  .space{--cw:84vw}
  .space .head{flex-direction:column;align-items:flex-start;gap:22px}
  .ctrl{padding-bottom:0}
  .facts{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:760px){
  .frame.nat{aspect-ratio:4/5}
  .frame.nat img{object-position:var(--pm,50% 50%)}
  /* 手機：說明牌不蓋照片，放在照片下方 */
  .tab{position:static;padding:16px 0 0;border-radius:0;min-width:0}
  .tab::before,.tab::after{display:none}
}
@media (max-width:560px){
  body{font-size:16px}
  .label i{display:none}.label .zl{flex-basis:100%;margin-left:42px}
  .sec{padding-top:var(--s1);padding-bottom:var(--s1)}
  .hero{padding-top:96px}.hero h1{font-size:clamp(52px,16vw,74px);margin:20px 0 26px}
  .hero .sub{margin-bottom:34px}
  blockquote{font-size:26px}
  .dr{grid-template-columns:34px 1fr auto;padding:18px 0}.dr .nm{font-size:30px}
  .dr .ar svg{opacity:1;transform:none;width:24px}
  .hours>div{padding:22px 0}.hours b{font-size:27px}
  .fire{min-height:88svh}
  .foot{flex-direction:column}
  .facts{grid-template-columns:repeat(2,1fr)}
  .tab .tg{font-size:10px;gap:8px;margin-bottom:8px}.tab .tg .ico{width:16px;height:16px}.tab .nm{font-size:25px;--sec:13px;--sg:.15rem}
  .space{--r:16px}.rb{width:46px;height:46px}
}
@media (max-width:420px){.menu .more{font-size:14px}blockquote{font-size:24px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .lit,.js .rise{opacity:1;filter:none;transform:none;transition:none}
  .ln>span{transform:none;transition:none}
  .pill::before,.rb::before,.prog span,.arrow-link svg,.nav a::after,.list li::after,.dr .nm,.dr .ar svg,.stage .d{transition:none}
}

/* ---------- 預約畫面（示意）：夜色全幅、極簡日曆、可撕預約票 ---------- */
.rsv{position:fixed;inset:0;z-index:80;background:var(--night);color:var(--cream);overflow-y:auto;overscroll-behavior:contain;--mute:var(--cream-2);
  visibility:hidden;clip-path:inset(0 0 100% 0);transition:clip-path .85s var(--ease),visibility 0s linear .85s}
.rsv.open{visibility:visible;clip-path:inset(0);transition:clip-path .85s var(--ease)}
.rsv-top,.rsv-body{opacity:0;transform:translateY(16px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.rsv.open .rsv-top,.rsv.open .rsv-body{opacity:1;transform:none;transition:opacity .8s var(--ease) .3s,transform .9s var(--ease) .3s}
.rsv.open .rsv-body{transition-delay:.42s}
.rsv-top{position:sticky;top:0;z-index:3;display:flex;justify-content:space-between;align-items:center;padding:22px var(--gutter);background:linear-gradient(180deg,var(--night) 60%,transparent)}
.rsv-top .wm{width:clamp(120px,10vw,150px);height:auto;color:var(--gold)}
.rsv-x{display:inline-flex;align-items:center;gap:12px;font-size:12px;letter-spacing:.2em;text-transform:uppercase;padding:10px 0}
html[data-lang=zh] .rsv-x{text-transform:none;letter-spacing:.18em;font-size:13px}
.rsv-x svg{width:16px;height:16px;transition:transform .5s var(--ease)}.rsv-x:hover svg{transform:rotate(90deg)}
.rsv-body{max-width:1240px;margin:0 auto;padding:clamp(16px,3vw,40px) var(--gutter) clamp(80px,9vw,140px);display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,400px);gap:clamp(40px,7vw,112px);align-items:start}
.rsv-form .h2{margin:24px 0 clamp(40px,5vw,64px);font-size:clamp(40px,4.8vw,72px)}
.rsv-form.dim{opacity:.28;pointer-events:none;transition:opacity .8s var(--ease)}
.st{border:0;padding:0 0 clamp(32px,3.6vw,48px);margin:0 0 clamp(32px,3.6vw,48px);border-bottom:1px solid var(--line-cream);min-width:0}
.st:last-of-type{border-bottom:0;margin-bottom:0}
.st legend{display:flex;align-items:baseline;gap:20px;padding:0;margin-bottom:clamp(22px,2.4vw,30px);float:left;width:100%}
.st legend+*{clear:both}
.st legend .n{font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:14px;letter-spacing:.1em;color:var(--gold)}
.st legend .bi{font-size:clamp(24px,2.3vw,32px);--sec:14px;--sg:.2rem;line-height:1.1;letter-spacing:-.01em}
.rsv .rb{background:var(--cream);color:var(--night)}
.rb.sm{width:40px;height:40px}.rb.sm svg{width:22px;height:8px}
.cal{max-width:540px}
.cal-h{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.cal-h b{font-family:var(--disp);font-variation-settings:"opsz" 14;font-weight:400;font-size:24px;letter-spacing:.01em}
.cal-h span{display:flex;gap:10px}
.cal-w,.cal-g{display:grid;grid-template-columns:repeat(7,1fr)}
.cal-w{padding-bottom:12px;border-bottom:1px solid var(--line-cream);margin-bottom:8px}
.cal-w i{font-style:normal;text-align:center;font-size:11px;letter-spacing:.2em;color:var(--cream-2)}
.cal-g{row-gap:4px}
.d{position:relative;justify-self:center;width:min(100%,52px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:19px;transition:background-color .4s var(--ease),color .4s var(--ease),box-shadow .4s var(--ease),transform .25s var(--ease)}
.d:hover:not(:disabled){box-shadow:inset 0 0 0 1px var(--gold)}
.d:active:not(:disabled){transform:scale(.94)}
.d.today::after{content:"";position:absolute;bottom:20%;width:4px;height:4px;border-radius:50%;background:var(--gold)}
.d[aria-pressed=true]{background:var(--gold);color:var(--night)}.d[aria-pressed=true].today::after{background:var(--night)}
.d:disabled{opacity:.26;cursor:default}
.d.blank{pointer-events:none}
.tg2{display:grid;grid-template-columns:1fr;gap:6px;padding:20px 0;border-top:1px solid var(--line-cream)}
.tg2:first-of-type{border-top:0;padding-top:0}
.tgl{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap;--sec:13px;--sg:0;font-size:19px;line-height:1.2}
.tgl .bi{flex-direction:row;align-items:baseline;gap:12px}.tgl .bi>*{margin:0!important}
.tgl small{display:block;font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:13px;letter-spacing:.06em;color:var(--cream-2)}
.tms{display:grid;grid-template-columns:repeat(4,max-content);gap:4px 34px;justify-content:start}
.tm{position:relative;font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:25px;letter-spacing:.01em;color:var(--cream-2);padding:6px 0;transition:color .4s var(--ease)}
.tm::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.tm:hover{color:var(--cream)}.tm:hover::after{transform:scaleX(.5)}
.tm[aria-pressed=true]{color:var(--gold)}.tm[aria-pressed=true]::after{transform:scaleX(1);height:2px}
.step{display:flex;align-items:center;gap:30px}
.step output{font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:54px;line-height:1;min-width:2ch;text-align:center;font-variant-numeric:lining-nums tabular-nums}
.fld{position:relative;display:block;margin-bottom:22px;max-width:540px}
.fld input{width:100%;background:transparent;border:0;border-bottom:1px solid var(--line-cream);padding:24px 0 10px;color:var(--cream);font:inherit;font-size:18px;outline:0;border-radius:0;transition:border-color .4s var(--ease)}
.fld input:focus{border-bottom-color:var(--gold)}
.fld span{position:absolute;left:0;top:24px;font-size:16px;letter-spacing:.08em;color:var(--cream-2);pointer-events:none;transform-origin:left top;transition:transform .45s var(--ease),color .45s var(--ease)}
.fld input:focus+span,.fld input:not(:placeholder-shown)+span{transform:translateY(-22px) scale(.76);color:var(--gold)}
.slip{position:sticky;top:96px;background:var(--paper);color:var(--ink);border-radius:20px;padding:clamp(26px,2.6vw,36px);--mute:var(--ink-2)}
.slip .wm{width:128px;height:auto;color:var(--ink);display:block}
.sp-h{display:flex;justify-content:space-between;align-items:center}
.sp-no{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}.sp-no b{font-family:var(--disp);font-weight:500;letter-spacing:.1em;color:var(--ink)}
.sp-date{display:flex;align-items:center;gap:20px;margin:34px 0 22px;min-height:84px}
.sp-date b{font-family:var(--disp);font-weight:400;font-size:clamp(70px,6.4vw,92px);line-height:.9;letter-spacing:-.03em;font-variant-numeric:lining-nums}
.sp-date>span{display:flex;flex-direction:column;gap:4px}
#sMon{font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:24px;line-height:1.15}
.sp-date small{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
.sp-rows div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:13px 0;border-bottom:1px solid var(--line-ink)}
.sp-rows div:first-child{border-top:1px solid var(--ink)}
.sp-rows dt{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-2)}
html[data-lang=zh] .sp-rows dt,html[data-lang=zh] .sp-date small,html[data-lang=zh] .sp-no{text-transform:none;letter-spacing:.16em}
.sp-rows dd{font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:22px;text-align:right;min-width:0;overflow-wrap:anywhere}
.perf{position:relative;border-top:1px dashed rgba(27,27,24,.38);margin:24px calc(-1 * clamp(26px,2.6vw,36px)) 22px}
.perf::before,.perf::after{content:"";position:absolute;top:-13px;width:26px;height:26px;border-radius:50%;background:var(--night)}
.perf::before{left:-13px}.perf::after{right:-13px}
.sp-fine{font-size:13px;line-height:1.7;color:var(--ink-2);text-wrap:balance}
.sp-go{width:100%;margin-top:20px;transition:color .45s var(--ease),transform .25s var(--ease),box-shadow .6s var(--ease),opacity .5s var(--ease)}
.sp-go:disabled{opacity:.3;pointer-events:none}
.slip-done{display:none;text-align:left}
.slip.done .slip-in{display:none}.slip.done .slip-done{display:block;animation:rsvIn .9s var(--ease) both}
@keyframes rsvIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.tick{width:56px;height:56px;color:#8A6F3F;margin-bottom:26px}
.tick circle{stroke-dasharray:164;stroke-dashoffset:164;animation:draw 1.2s var(--ease) .15s forwards}
.tick path{stroke-dasharray:40;stroke-dashoffset:40;animation:draw .8s var(--ease) .8s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
.slip-done h3{font-size:clamp(36px,3.4vw,50px);font-weight:400;line-height:1.08;letter-spacing:-.02em;--sec:15px;--sg:.8rem}
.slip-done .sp-ref{margin-top:26px;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-2)}
.slip-done .sp-ref b{font-family:var(--disp);font-weight:500;letter-spacing:.14em;color:var(--ink);margin-left:10px;font-size:16px}
.slip-done .sp-sum{margin:14px 0 30px;font-family:var(--disp);font-variation-settings:"opsz" 14;font-size:20px;line-height:1.5}
@media (max-width:1000px){
  .rsv-body{grid-template-columns:1fr;gap:36px}
  .slip{position:relative;top:auto}
}
@media (max-width:560px){
  .tms{grid-template-columns:repeat(4,1fr);gap:2px 8px}.tm{font-size:22px}
  .d{font-size:17px}
  .sp-date b{font-size:72px}
  .st legend{gap:14px}
}
@media (prefers-reduced-motion:reduce){.rsv,.rsv.open,.rsv-top,.rsv-body{transition:none!important}.rsv{clip-path:none;opacity:0}.rsv.open{opacity:1}.rsv-top,.rsv-body{opacity:1;transform:none}.slip.done .slip-done{animation:none}.tick circle,.tick path{animation:none;stroke-dashoffset:0}}
/* 下面接山脊的區塊：底部留白＝山脊高度＋固定間距，文字不貼山脊 */
.hero,.about,.menu,.fire,.space{padding-bottom:calc(var(--rh) + var(--rgap))}
.hero{padding-bottom:calc(var(--rh) + var(--rgap) + 20px)}

/* 首頁大圖說明：與圖片左緣對齊（圖片靠右、寬度由高度決定，說明文字同寬靠右） */
.hero .photo .frame{width:min(100%,calc(80svh*.8));max-height:none}
.hero .meta{left:auto;right:0;width:min(100%,calc(80svh*.8))}
@media (max-width:1000px){.hero .photo .frame{width:100%}.hero .meta{width:auto;right:auto}}

/* 回到頂端：右下圓形按鈕，金色細環顯示捲動進度 */
.totop{position:fixed;right:clamp(16px,2.4vw,34px);bottom:clamp(16px,2.4vw,34px);width:52px;height:52px;border-radius:50%;background:var(--night);color:var(--cream);display:grid;place-items:center;z-index:60;border:0;cursor:pointer;box-shadow:0 10px 28px -10px rgba(0,0,0,.55);opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .4s var(--ease),transform .4s var(--ease),visibility 0s linear .4s}
.totop.on{opacity:1;visibility:visible;transform:none;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.totop:hover{transform:translateY(-3px)}
.totop svg.rg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.totop svg.rg circle{fill:none;stroke-width:1.6}
.totop svg.rg .bg{stroke:rgba(240,232,232,.2)}
.totop svg.rg .fg{stroke:var(--gold);stroke-linecap:round}
.totop svg.ar{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;position:relative}
body:has(.rsv.open) .totop{opacity:0;visibility:hidden}
