/* ═══════════════════════════════════════════
   糖朝 綠世界店．Overhaul
   三個顏色，都取自品牌實物：
   糖朝紅（logo）、豆花米白（豆腐花）、匾額墨黑（金庸題字匾額）
   ═══════════════════════════════════════════ */

:root{
  --red:#C00425;
  --red-dk:#96031D;          /* 按下、陰影用，紅的暗面 */
  --tofu:#F6EFE3;
  --tofu-dk:#E8DCC6;         /* 米白上的線與空位 */
  --tofu-dkr:#D3C3A7;
  --paper:#FFFCF6;           /* 單據、席單的紙色 */
  --ink:#17110F;
  --ink-2:#3A302A;
  --muted:#6E5F55;

  --serif:"Chiron Sung HK","Noto Serif TC","Songti TC",serif;
  --sans:"Chiron Hei HK","Noto Sans TC","PingFang TC",system-ui,sans-serif;

  --ease-out:cubic-bezier(.16,1,.3,1);

  --gut:clamp(16px,4vw,56px);
  --bar-h:64px;
  --sec:clamp(88px,12vw,168px);   /* 段落上下留白 */
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;background:var(--red)}
/* 狀態列後方與上下拉過頭時露出的底色：開場是紅，進場之後換成頁尾的墨黑 */
html.past{background:var(--tofu)}
main{display:block;background:var(--tofu)}
body{
  /* body 不上底色，交給 html：iOS Safari 用這個顏色染狀態列與工具列，開場時要是紅的 */
  margin:0;color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* 動畫起始狀態（放大的印章、歪斜的相框）不能撐出橫向捲軸 */
  overflow-x:clip;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
p,h2,h3,h4{text-wrap:pretty}
/* 短標題與圖說用 balance，避免「蘿／蔔糕」這種只剩一兩個字掉到下一行 */
h3,figcaption{text-wrap:balance}
h3,h4{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
figure{margin:0}
button{font:inherit;color:inherit}
.defs{position:absolute;width:0;height:0;overflow:hidden}
/* Lenis 平滑捲動需要的設定 */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--ink);color:var(--tofu);padding:.5rem 1rem}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.sweet :focus-visible,.venue :focus-visible,.bbq :focus-visible,.end :focus-visible{outline-color:#fff}

/* 米白紙面的細紋理。極淡，只為了讓大面積米白不像螢幕預設色。 */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.05;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='f'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)'/%3E%3C/svg%3E");
}

/* ─────────── 共用：大問句標題、標籤、按鈕 ─────────── */
.sechead{
  display:grid;grid-template-columns:1fr;gap:12px;align-items:end;
  margin-bottom:clamp(32px,5vw,72px);
}
@media (min-width:900px){.sechead{grid-template-columns:auto 1fr}}
.q{
  margin:0 0 0 -.04em;font-family:var(--serif);font-weight:900;color:var(--red);
  font-size:clamp(84px,16vw,232px);line-height:.92;letter-spacing:-.04em;white-space:nowrap;
}
/* 全形問號在宋體裡左邊留白很大，往回拉 */
.q .qm{margin-left:-.3em}
.q .ch{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.06em}
.q .ch>span{display:inline-block}
.sechead__intro{margin:0 0 .8em;font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);max-width:22em}
@media (min-width:900px){.sechead__intro{justify-self:end}}
.sechead--light .q{color:#fff}
.sechead--light .sechead__intro{color:rgba(255,255,255,.82)}

.tag{
  display:flex;align-items:center;gap:10px;margin:0 0 12px;
  font-size:13px;letter-spacing:.2em;color:var(--red);font-weight:500;
}
.tag::before{content:"";width:8px;height:8px;background:currentColor;flex:none}
.tag--light{color:rgba(255,255,255,.88)}
.muted{color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;gap:.6em;height:48px;padding:0 20px;cursor:pointer;
  border:1.5px solid var(--ink);background:transparent;text-decoration:none;
  font-family:var(--serif);font-weight:700;font-size:16px;letter-spacing:.06em;
  transition:background .2s,color .2s;
}
.btn::after{content:"";width:7px;height:7px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg);margin-left:.2em}
.btn:hover{background:var(--ink);color:var(--tofu)}
.btn--light{border-color:rgba(246,239,227,.7);color:var(--tofu)}
.btn--light:hover{background:var(--tofu);color:var(--ink)}

/* ─────────── 導覽列 ─────────── */
.bar{
  position:fixed;inset:0 0 auto;z-index:50;height:var(--bar-h);
  display:flex;align-items:center;gap:clamp(16px,3vw,40px);
  padding:0 var(--gut);
  background:color-mix(in srgb,var(--tofu) 90%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--tofu-dk);
  /* 藏起來時連 visibility 一起關掉：新版 iOS Safari 會把網頁畫到狀態列後面，
     只往上推的話，導覽列會卡在狀態列那一條，看起來像一條米白色的邊 */
  transform:translateY(-101%);visibility:hidden;
  transition:transform .5s var(--ease-out),visibility 0s linear .5s;
}
.bar.is-on,html:not(.motion) .bar{transform:none;visibility:visible;transition:transform .5s var(--ease-out),visibility 0s}
.bar__logo{display:block;width:88px;color:var(--red);fill:var(--red);flex:none}
.bar__logo svg{display:block;width:100%;height:auto}
.bar__nav{display:flex;gap:clamp(14px,1.8vw,28px);margin-right:auto;font-size:15px;letter-spacing:.08em}
.bar__nav a{text-decoration:none;padding:.5rem 0;position:relative;transition:color .2s}
.bar__nav a::after{content:"";position:absolute;left:0;right:0;bottom:.3rem;height:2px;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease-out)}
.bar__nav a:hover::after,.bar__nav a.is-active::after{transform:scaleX(1)}
.bar__nav a.is-active{color:var(--red)}
.bar__call{
  display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;
  font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.04em;
  background:var(--red);color:#fff;padding:.55rem 1rem .55rem .7rem;
}
.bar__call span{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;border:1px solid rgba(255,255,255,.55);padding:.05rem .35rem}
.bar__call:active{background:var(--red-dk)}
.bar__menu{display:none}

/* ─────────── 開場 ─────────── */
.hero{position:relative;background:var(--red)}
.hero__stage{
  /* 用大視窗高度：iOS Safari 的工具列浮在網頁上，用小視窗高度會在工具列後面露出下一段 */
  position:relative;height:100vh;height:100lvh;overflow:hidden;
  background:var(--red);color:#fff;
}
.hero__photo{position:absolute;inset:0;background:var(--ink)}
.hero__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 58%;
  /* 原照是陰天拍的，拉一點暖度與對比，讓吊燈的光出來。只調色，不改內容。 */
  filter:saturate(1.08) contrast(1.06) sepia(.08)}
.hero__scrim{position:absolute;inset:0;opacity:0;
  background:linear-gradient(180deg,rgba(23,17,15,0) 35%,rgba(23,17,15,.78) 100%)}

.hero__signwrap{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.hero__sign{width:min(84vw,920px);height:auto;overflow:visible;transform-origin:50% 50%}
/* 紅底與窗都是水平垂直的直角，關掉反鋸齒：iOS Safari 畫挖空的大路徑時，反鋸齒會在窗的左右邊延伸出兩條淡淡的直線 */
.hero__field,.hero__cover{fill:var(--red);shape-rendering:crispEdges}
.hero__frame,.hero__glyph,.hero__en{fill:#fff}

.hero__sub{
  position:absolute;left:0;right:0;top:calc(50% - 5svh + min(21.5vw, 236px) + 28px);margin:0;
  display:flex;flex-direction:column;align-items:center;gap:.2rem;
  font-family:var(--serif);letter-spacing:.32em;text-align:center;
}
.hero__sub span:first-child{font-size:clamp(17px,1.8vw,22px);font-weight:700}
.hero__sub span:last-child{font-size:13px;letter-spacing:.24em;opacity:.8;font-family:var(--sans)}

.hero__cue{
  /* 用 margin 置中，不用 transform：捲動動畫會改寫 transform，置中就會跑掉 */
  position:absolute;left:0;right:0;margin:0 auto;width:max-content;bottom:28px;bottom:calc(28px + 100lvh - 100svh);
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-size:12px;letter-spacing:.3em;opacity:.85;
}
.hero__cue i{display:block;width:1px;height:44px;background:rgba(255,255,255,.35);position:relative;overflow:hidden}
.hero__cue i::after{content:"";position:absolute;left:0;top:-50%;width:1px;height:50%;background:#fff;animation:cue 1.8s var(--ease-out) infinite}
@keyframes cue{to{top:100%}}

.hero__caption{
  position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:clamp(28px,7svh,72px);
  bottom:calc(clamp(28px,7svh,72px) + 100lvh - 100svh);
  display:grid;grid-template-columns:auto 1fr;align-items:end;gap:clamp(16px,3vw,48px);
  visibility:hidden;
}
.hero__big{margin:0;display:flex;align-items:baseline;gap:.2em;font-family:var(--serif);font-weight:900;line-height:.8}
.hero__big b{font-size:clamp(96px,17vw,260px);letter-spacing:-.04em;font-weight:900}
.hero__big span{font-size:clamp(28px,4vw,56px)}
.hero__lede{margin:0 0 .6em;max-width:28em;font-size:clamp(16px,1.5vw,20px);line-height:1.75}

/* 載入前先藏好，避免閃一下 */
.motion .hero__glyph,.motion .hero__en,.motion .hero__sub span,.motion .hero__cue > *{visibility:hidden}

/* 沒有動畫時（無 JS、減少動態效果）：招牌照常顯示在紅底上，場地照改成排在下面 */
html:not(.motion) .hero__stage{height:auto;display:flex;flex-direction:column}
html:not(.motion) .hero__signwrap{position:relative;order:1;height:100svh;min-height:420px}
html:not(.motion) .hero__sub{top:calc(50svh + min(21.5vw, 236px) + 28px)}
html:not(.motion) .hero__cue{display:none}
html:not(.motion) .hero__photo{position:relative;order:3;height:72svh}
html:not(.motion) .hero__scrim{display:none}
html:not(.motion) .hero__caption{position:relative;order:4;left:auto;right:auto;bottom:auto;visibility:visible;
  background:var(--ink);padding:40px var(--gut) 56px}

/* ─────────── 幾位？ ─────────── */
.guests{padding:var(--sec) var(--gut) clamp(80px,10vw,140px);position:relative}

.guests__grid{display:grid;gap:clamp(32px,4vw,64px)}
@media (min-width:1000px){
  .guests__grid{grid-template-columns:minmax(300px,4fr) 8fr;align-items:start}
  .guests__side{position:sticky;top:calc(var(--bar-h) + 32px)}
}

.counter{border-top:2px solid var(--ink);padding-top:20px}
.counter__row{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:8px}
.counter__btn{
  width:56px;height:56px;border:1.5px solid var(--ink);background:transparent;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;touch-action:manipulation;
  transition:background .2s,color .2s,transform .12s;
}
.counter__btn svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2}
.counter__btn:hover{background:var(--ink);color:var(--tofu)}
.counter__btn:active{transform:scale(.92)}
.counter__num{display:flex;align-items:baseline;justify-content:center;gap:.15em;cursor:text}
.counter__num input{
  width:3.2ch;border:0;background:transparent;padding:0;margin:0;text-align:right;
  font-family:var(--serif);font-weight:900;font-size:clamp(84px,9vw,128px);line-height:1;color:var(--ink);
  font-variant-numeric:tabular-nums;letter-spacing:-.03em;-moz-appearance:textfield;appearance:textfield;
}
.counter__num input::-webkit-outer-spin-button,.counter__num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.counter__num input:focus{outline:none;color:var(--red)}
.counter__num.tick input{animation:tick .28s var(--ease-out)}
@keyframes tick{from{transform:translateY(.12em);opacity:.35}}
.counter__unit{font-family:var(--serif);font-weight:700;font-size:28px}

.counter__range{
  -webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:12px 0 4px;cursor:pointer;
  --p:40%;
}
.counter__range::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,var(--red) var(--p),var(--tofu-dkr) var(--p))}
.counter__range::-moz-range-track{height:4px;background:var(--tofu-dkr)}
.counter__range::-moz-range-progress{height:4px;background:var(--red)}
.counter__range::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-12px;background:var(--red);border:4px solid var(--tofu);box-shadow:0 0 0 1.5px var(--red);border-radius:50%}
.counter__range::-moz-range-thumb{width:20px;height:20px;background:var(--red);border:4px solid var(--tofu);box-shadow:0 0 0 1.5px var(--red);border-radius:50%}

.counter__chips{display:flex;flex-wrap:wrap;gap:6px}
.counter__chips button{
  min-width:48px;height:40px;padding:0 12px;border:1px solid var(--tofu-dkr);background:transparent;cursor:pointer;
  font-family:var(--serif);font-weight:700;font-size:16px;font-variant-numeric:tabular-nums;
  transition:background .2s,border-color .2s,color .2s;
}
.counter__chips button:hover{border-color:var(--ink)}
.counter__chips button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--tofu)}
.counter__scene{margin:16px 0 0;min-height:1.7em;color:var(--muted);font-size:15px;letter-spacing:.06em}

/* 撥號：印章按鈕 */
.call{
  margin-top:28px;display:grid;gap:2px;text-decoration:none;
  background:var(--red);color:#fff;padding:18px 22px 16px;position:relative;
  box-shadow:0 6px 0 var(--red-dk);transition:transform .12s,box-shadow .12s;
}
.call::before{content:"";position:absolute;inset:6px;border:1px solid rgba(255,255,255,.45);pointer-events:none}
.call__main{font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.2vw,28px);letter-spacing:.06em}
.call__main b{font-variant-numeric:tabular-nums}
.call__num{font-size:15px;letter-spacing:.14em;opacity:.9}
.call:hover{transform:translateY(2px);box-shadow:0 4px 0 var(--red-dk)}
.call:active{transform:translateY(6px);box-shadow:0 0 0 var(--red-dk)}
.guests__alt{margin:18px 0 0;font-size:14px;color:var(--muted)}
.guests__alt a{text-underline-offset:3px}

/* 座位圖 */
.floor__map{display:block;width:100%;height:auto;overflow:visible}
.floor__map .t{fill:none;stroke:var(--tofu-dk);stroke-width:1;transition:fill .4s,stroke .4s,stroke-width .4s}
.floor__map .t.on{fill:rgba(192,4,37,.12);stroke:var(--red);stroke-width:1.6}
.floor__map .s{fill:#EADFCB;transition:fill .22s var(--ease-out);transform-box:fill-box;transform-origin:center}
.floor__map .s.on{fill:var(--red)}
.floor__cap{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:4px 16px;
  margin-top:14px;padding-top:12px;border-top:1px solid var(--tofu-dkr);font-size:14px;color:var(--muted)}
.floor__cap span:first-child{font-family:var(--serif);font-weight:700;font-size:18px;color:var(--ink)}
.floor__cap b{font-size:34px;font-weight:900;color:var(--red);font-variant-numeric:tabular-nums;margin-right:.1em}

/* 點菜單：港式茶餐廳單據的格式，紅色直線、數字靠右 */
.slip{
  margin-top:clamp(40px,5vw,64px);background:var(--paper);color:var(--ink);
  border:1px solid var(--tofu-dkr);
  box-shadow:0 1px 0 var(--tofu-dkr),0 24px 48px -28px rgba(23,17,15,.35);
  perspective:1200px;
}
.slip__head{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;
  padding:14px 22px;border-bottom:2px solid var(--red);
  font-size:13px;letter-spacing:.14em;color:var(--red);
}
.slip__title{font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.5em;margin-right:-.5em}
.slip__n{justify-self:end;font-family:var(--serif);font-weight:700;font-size:16px}
.slip__n b{font-size:22px;font-variant-numeric:tabular-nums}
.slip__body{padding:4px 22px;transform-origin:50% 0}
.slip__foot{padding:12px 22px 16px;border-top:1px dashed var(--tofu-dkr);font-size:13px;color:var(--muted)}

.item{padding:20px 0;border-bottom:1px solid var(--tofu-dk)}
.item:last-child{border-bottom:0}
.item h3{font-family:var(--serif);font-weight:900;font-size:clamp(20px,2vw,24px);letter-spacing:.04em;line-height:1.35}
.item__meta{margin:4px 0 0;font-size:14px;color:var(--muted)}
.item__prices{margin:8px 0 0;font-size:15px;color:var(--ink-2)}
.item__row{display:flex;align-items:baseline;gap:10px;margin-top:10px}
.item__row .lead{flex:1;border-bottom:1.5px dotted var(--tofu-dkr);transform:translateY(-5px)}
.item__row .lbl{font-size:15px;color:var(--ink-2);white-space:nowrap}
.item__row .amt{font-family:var(--serif);font-weight:900;font-size:clamp(24px,2.6vw,32px);color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.item__row .amt small{font-size:.5em;font-weight:700;margin-left:.15em;color:var(--ink)}
.tiers{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
.tiers button{
  height:38px;padding:0 12px;border:1px solid var(--tofu-dkr);background:transparent;cursor:pointer;
  font-family:var(--serif);font-weight:700;font-size:15px;font-variant-numeric:tabular-nums;
}
.tiers button[aria-pressed="true"]{border-color:var(--red);background:var(--red);color:#fff}
.item__link{display:inline-block;margin-top:10px;padding:0;border:0;background:none;cursor:pointer;font-size:14px;color:var(--red);text-decoration:underline;text-underline-offset:3px}
.item--quiet h3{font-size:18px}

/* ─────────── 吃什麼？ ─────────── */
.menu{padding:var(--sec) var(--gut) 0;border-top:1px solid var(--tofu-dkr);overflow-x:clip}

.routes{display:grid;gap:12px;margin-bottom:clamp(72px,9vw,128px)}
@media (min-width:760px){.routes{grid-template-columns:repeat(3,1fr);gap:20px}}
.routes a{
  display:grid;gap:4px;padding:18px 0 14px;border-top:2px solid var(--ink);text-decoration:none;
  transition:border-color .25s,color .25s;
}
.routes b{font-family:var(--serif);font-weight:900;font-size:clamp(24px,2.4vw,32px);letter-spacing:.02em}
.routes span{font-size:15px;color:var(--muted)}
.routes a:hover{border-color:var(--red);color:var(--red)}

/* 桌席合菜：直排席單 */
.feast{margin-bottom:clamp(96px,12vw,176px)}
.feast__head{display:grid;gap:8px;margin-bottom:28px;max-width:40em}
.feast__head h3,.bento__body h3,.aiyu__text h3,.bbq__text h3,.family__head h3,.doufu__text h3,.limited__head h3{
  font-family:var(--serif);font-weight:900;font-size:clamp(36px,4.4vw,64px);line-height:1.1;letter-spacing:.02em;
}
.feast__lede{margin:4px 0 0;color:var(--ink-2)}
.feast__scroll{
  overflow-x:auto;margin:0 calc(-1 * var(--gut));padding:0 var(--gut) 14px;
  scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--tofu-dkr) transparent;
}
.feast__cols{
  display:flex;width:max-content;min-width:100%;
  background:var(--paper);border-top:3px solid var(--red);border-bottom:3px solid var(--red);
  box-shadow:0 24px 48px -30px rgba(23,17,15,.35);
}
.col{
  flex:1 0 auto;display:flex;flex-direction:column;align-items:center;
  padding:22px clamp(14px,1.4vw,22px) 28px;border-left:1px solid var(--tofu-dk);
  scroll-snap-align:start;position:relative;transition:background .35s;
}
.col:first-child{border-left:0;background:rgba(232,220,198,.35)}
.col::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--ink);transform:scaleX(0);transition:transform .45s var(--ease-out)}
.col.is-picked{background:rgba(192,4,37,.06)}
.col.is-picked::before{transform:none}
.col__who{margin:0;font-size:13px;letter-spacing:.2em;color:var(--muted)}
.col__price{margin:2px 0 20px;font-family:var(--serif);font-weight:900;font-size:clamp(28px,2.6vw,38px);color:var(--red);font-variant-numeric:tabular-nums;line-height:1.2}
.col__dishes{
  writing-mode:vertical-rl;text-orientation:upright;height:16.8em;
  font-family:var(--serif);font-weight:700;font-size:17px;line-height:1.95;letter-spacing:.1em;
}
.col__dishes li{padding-top:.1em}
.col__dishes small{font-size:.72em;color:var(--muted);font-weight:500;margin:.35em 0}
.feast__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:22px}
.feast__foot p{margin:0;font-size:14px;color:var(--muted)}

/* 餐盒 */
.bento{display:grid;gap:clamp(28px,4vw,72px);margin-bottom:clamp(96px,12vw,176px)}
@media (min-width:1000px){.bento{grid-template-columns:5fr 7fr;align-items:start}}
.bento__hero{position:relative}
@media (min-width:1000px){.bento__hero{position:sticky;top:calc(var(--bar-h) + 24px)}}
.bento__hero img{width:100%;aspect-ratio:3/4;object-fit:cover}
.bento__hero figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.bento__price{margin:10px 0 0;font-family:var(--serif);font-weight:700;font-size:20px}
.bento__price b{font-size:clamp(56px,6vw,88px);font-weight:900;color:var(--red);letter-spacing:-.02em;margin-right:.1em}
.bento__lede{max-width:32em;color:var(--ink-2)}
.bento__grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:28px}
.bento__grid li,.bento__add li{display:grid;gap:8px}
.bento__grid img,.bento__add img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff}
.bento__grid b,.bento__add b{font-family:var(--serif);font-weight:700;font-size:17px}
.bento__sub{margin:36px 0 14px;font-family:var(--serif);font-weight:700;font-size:20px}
.bento__add{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:28px}

/* 手作愛玉 */
.aiyu{
  display:grid;gap:28px;align-items:center;margin-bottom:clamp(96px,12vw,176px);
  padding:clamp(28px,4vw,56px);border:1.5px solid var(--ink);position:relative;
}
@media (min-width:760px){.aiyu{grid-template-columns:1fr minmax(220px,340px)}}
.aiyu__text p{max-width:30em}
.aiyu__poster{justify-self:center}
.aiyu__poster img{width:100%;max-width:340px;transform:rotate(1.6deg);box-shadow:0 18px 36px -18px rgba(23,17,15,.5)}
.aiyu__poster figcaption{margin-top:12px;font-size:13px;color:var(--muted);text-align:center}

/* 靚燒肉：墨黑底，整片撐滿 */
.bbq{
  margin:0 calc(-1 * var(--gut)) clamp(96px,12vw,176px);padding:clamp(64px,8vw,120px) var(--gut);
  background:var(--ink);color:var(--tofu);display:grid;gap:clamp(36px,5vw,80px);
}
@media (min-width:1000px){.bbq{grid-template-columns:7fr 5fr;align-items:start}}
.bbq__rule{margin:8px 0 0;font-family:var(--serif);font-weight:700;font-size:20px;color:#fff}
.bbq__prices{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,48px);margin-top:36px}
.bbq__prices h4{font-size:14px;letter-spacing:.24em;font-weight:500;color:rgba(246,239,227,.6);padding-bottom:10px;border-bottom:1px solid rgba(246,239,227,.2)}
.bbq__prices li{font-family:var(--serif);font-weight:900;font-size:clamp(34px,4vw,56px);line-height:1.3;font-variant-numeric:tabular-nums;color:#fff}
.bbq__hint{margin:14px 0 0;font-size:14px;color:rgba(246,239,227,.6)}
.bbq__sub{margin:44px 0 14px;font-size:14px;letter-spacing:.24em;font-weight:500;color:rgba(246,239,227,.6)}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.slots li{display:grid;padding:14px 14px 12px;border-left:3px solid var(--red);background:rgba(246,239,227,.06)}
.slots b{font-family:var(--serif);font-weight:900;font-size:clamp(22px,2.2vw,30px);font-variant-numeric:tabular-nums;color:#fff}
.slots span{font-size:13px;color:rgba(246,239,227,.6)}
.origin{margin:0;display:grid;gap:10px}
.origin div{display:grid;grid-template-columns:2.4em 1fr;gap:12px;align-items:baseline}
.origin dt{font-family:var(--serif);font-weight:900;font-size:22px;color:var(--red)}
.origin dd{margin:0;font-size:15px}
.bbq__warn{margin:28px 0 24px;font-size:14px;color:rgba(246,239,227,.75)}
.bbq__crop{overflow:hidden;aspect-ratio:883/1322;box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
/* 海報畫面在原檔的 x 100–983、y 142–1464（原檔 1066×1536） */
.bbq__crop img{width:120.725%;max-width:none;margin-left:-11.325%;margin-top:-16.082%}
@media (min-width:1000px){.bbq__poster{position:sticky;top:calc(var(--bar-h) + 24px)}}

/* 家庭與親子 */
.family{padding-bottom:var(--sec)}
.family__head{position:relative;max-width:40em;margin-bottom:clamp(28px,4vw,56px)}
.family__lede{margin:10px 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(20px,2vw,26px)}
.family__alpaca{position:absolute;right:-150px;top:-20px;width:92px;transform:rotate(8deg)}
@media (max-width:760px){.family__head{padding-right:64px}.family__alpaca{right:0;top:-8px;width:54px}}
.plates{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(16px,2.4vw,36px)}
@media (min-width:900px){.plates{grid-template-columns:repeat(4,1fr)}}
.plates li{display:grid;justify-items:center;text-align:center;gap:2px}
/* 原照是白底，用 multiply 把白色吃進米白底色，盤子就像直接放在頁面上 */
.plates img{width:100%;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;margin-bottom:10px;filter:brightness(1.07) contrast(1.06)}
.plates b{font-family:var(--serif);font-weight:900;font-size:clamp(22px,2vw,28px)}
.plates span{font-size:14px;color:var(--muted)}
.family__more{display:grid;gap:32px;margin-top:clamp(48px,6vw,88px);padding-top:28px;border-top:2px solid var(--ink)}
@media (min-width:900px){.family__more{grid-template-columns:1fr 1fr;gap:64px}}
.family__more h4{font-family:var(--serif);font-weight:900;font-size:22px;margin-bottom:12px}
.family__more p{margin:0 0 20px;color:var(--ink-2)}
.dots li{padding:8px 0;border-bottom:1px dotted var(--tofu-dkr);font-family:var(--serif);font-weight:700;font-size:18px}

/* ─────────── 甜品呢？（紅底） ─────────── */
.sweet{background:var(--red);color:#fff;padding:var(--sec) var(--gut);overflow:hidden}
.doufu{display:grid;gap:clamp(28px,4vw,64px);align-items:end;position:relative}
@media (min-width:1000px){.doufu{grid-template-columns:5fr 5fr 2fr}}
.doufu__main img{width:100%;max-width:560px;aspect-ratio:596/842;object-fit:cover}
/* 豆腐花的窗框用 logo 內框的缺角形狀 */
.win--frame{max-width:560px;clip-path:polygon(5% 0,95% 0,95% 5%,100% 5%,100% 95%,95% 95%,95% 100%,5% 100%,5% 95%,0 95%,0 5%,5% 5%)}
.doufu__text p{font-size:clamp(17px,1.5vw,20px);max-width:22em}
.doufu__bowl{margin-top:28px;max-width:320px;background:#fff;padding:8px}
.calli{align-self:start}
/* 書法原圖是白底黑字。反相再用 screen 疊上紅底，只剩白色筆畫。 */
.calli img{width:100%;max-width:220px;filter:invert(1) contrast(1.2);mix-blend-mode:screen;margin-left:auto}
@media (max-width:999px){.calli img{max-width:120px;margin:0 0 0 auto}}

.radish{display:grid;grid-template-columns:minmax(140px,300px) 1fr;gap:clamp(20px,3vw,48px);align-items:center;margin-top:clamp(64px,8vw,120px)}
.radish__img img{width:100%;aspect-ratio:1;object-fit:cover}
.radish h3{font-family:var(--serif);font-weight:900;font-size:clamp(26px,3.2vw,44px);line-height:1.25}

.limited{margin-top:clamp(80px,10vw,150px);padding-top:clamp(28px,3vw,40px);border-top:1px solid rgba(255,255,255,.35)}
.limited__head{position:relative;display:grid;gap:18px;margin-bottom:clamp(28px,4vw,48px)}
@media (min-width:900px){.limited__head{grid-template-columns:auto 1fr;align-items:end;gap:48px}}
.limited__list{display:flex;flex-wrap:wrap;gap:8px 22px;font-family:var(--serif);font-weight:700;font-size:18px}
.limited__list li::before{content:"";display:inline-block;width:6px;height:6px;background:#fff;margin-right:10px;vertical-align:middle}
.limited__alpaca{position:absolute;right:0;top:-70px;width:110px;transform:rotate(-6deg)}
@media (max-width:900px){.limited__alpaca{top:-96px;width:76px}}
.limited__row{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,28px)}
@media (max-width:700px){.limited__row{grid-template-columns:1fr 1fr}.limited__row .card:first-child{grid-column:1/-1}}
.card{background:var(--tofu);padding:10px 10px 14px;color:var(--ink)}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover}
.card:first-child img{object-position:50% 40%}
.card button{display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in}
.card figcaption{margin-top:10px;font-family:var(--serif);font-weight:700;font-size:15px}
.card:nth-child(2){transform:translateY(clamp(12px,3vw,40px))}

/* ─────────── 坐哪裡？（墨黑） ─────────── */
.venue{background:var(--ink);color:var(--tofu);overflow:hidden}
.venue__pin{padding:var(--sec) 0}
.venue__head{padding:0 var(--gut);margin-bottom:40px;max-width:40em}
.venue__head .q{color:#fff}
.venue__answer{margin:14px 0 0;font-family:var(--serif);font-weight:900;font-size:clamp(32px,4vw,56px);color:var(--red);line-height:1.2}
.venue__lede{margin:18px 0 0;color:rgba(246,239,227,.82)}
.venue__stats{display:flex;gap:clamp(24px,4vw,56px);margin:28px 0 0}
.venue__stats div{display:grid}
.venue__stats dt{font-size:13px;letter-spacing:.2em;color:rgba(246,239,227,.6)}
.venue__stats dd{margin:0;font-family:var(--serif);font-weight:900;font-size:clamp(48px,5vw,76px);line-height:1;color:#fff}
.venue__stats small{font-size:.36em;margin-left:.15em;font-weight:700}
.venue__track{
  display:flex;gap:clamp(12px,1.6vw,24px);padding:0 var(--gut);
  overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;
}
.venue__track::-webkit-scrollbar{display:none}
.venue__track li{flex:0 0 min(84vw,720px);scroll-snap-align:center}
.venue__track img{width:100%;aspect-ratio:4/3;object-fit:cover}
/* 手機版才用得到的照片外框與進度條；桌機讓外框不存在，照片條直接排在標題右邊 */
.venue__prog{display:none}
@media (min-width:1000px){.venue__film,.venue__reel{display:contents}}
/* 桌機有動畫時：標題在左、照片在右，往下捲時照片橫向移動 */
@media (min-width:1000px){
  .motion .venue__pin{height:100vh;display:flex;align-items:center;padding:0;gap:0}
  /* 標題欄蓋在照片上面，照片從它底下滑過去 */
  .motion .venue__head{
    flex:0 0 min(36vw,540px);margin:0;align-self:stretch;position:relative;z-index:2;
    display:flex;flex-direction:column;justify-content:center;background:var(--ink);padding-right:40px;
    box-shadow:30px 0 40px -10px var(--ink);
  }
  .motion .venue__head .q{font-size:clamp(80px,8.4vw,136px)}
  .motion .venue__track{overflow:visible;padding-left:0;scroll-snap-type:none}
  .motion .venue__track li{flex-basis:min(56vw,860px)}
  .motion .venue__track li:nth-child(even){transform:translateY(6vh)}
}

/* ─────────── 站位圖（業者正式照片到齊前的示意圖） ─────────── */
/* 總開關：<html data-placeholders="hide"> 會把示意圖與待補段落全部藏起來 */
[data-placeholders="hide"] [data-ph-block]{display:none!important}
.ph{position:relative}
/* 「待補」紅印：沿用蓋印的視覺語言，讓訪客一眼看出這不是正式照片 */
.ph__seal{
  position:absolute;top:14px;right:14px;z-index:3;width:46px;height:46px;display:grid;place-items:center;
  background:var(--red);color:#fff;font-family:var(--serif);font-weight:900;font-size:15px;line-height:1.05;letter-spacing:.06em;
  writing-mode:vertical-rl;box-shadow:inset 0 0 0 2px var(--red),inset 0 0 0 3.5px #fff,0 4px 10px rgba(23,17,15,.25);
  transform:rotate(-7deg);pointer-events:none;
}
.ph__seal--sm{position:static;width:34px;height:34px;font-size:12px;transform:rotate(-5deg);box-shadow:inset 0 0 0 2px var(--red),inset 0 0 0 3px #fff}
.ph figcaption{margin-top:10px;font-size:13px;color:var(--muted)}
.venue .ph figcaption{color:rgba(246,239,227,.6)}

/* ─────────── 辦過什麼？ ─────────── */
.events{padding:var(--sec) var(--gut);border-top:1px solid var(--tofu-dkr)}
.events__grid{display:grid;gap:clamp(10px,1.4vw,20px)}
.ev{position:relative;overflow:hidden;margin:0;min-height:0;background:var(--ink)}
.ev img{width:100%;height:100%;object-fit:cover;display:block}
.ev figcaption{
  position:absolute;left:0;right:0;bottom:0;margin:0;padding:56px 20px 16px;display:grid;gap:2px;color:#fff;
  background:linear-gradient(180deg,rgba(23,17,15,0),rgba(23,17,15,.78));
}
.ev figcaption b{font-family:var(--serif);font-weight:900;font-size:clamp(24px,2.4vw,36px);line-height:1.2}
.ev figcaption span{font-size:12px;letter-spacing:.06em;opacity:.78}
.ev--wed{aspect-ratio:16/10}
.ev--aiyu{aspect-ratio:4/5}
.ev--com,.ev--sch{aspect-ratio:4/3}
.ev--ban{aspect-ratio:21/9}
@media (min-width:900px){
  .events__grid{
    grid-template-columns:repeat(12,1fr);
    grid-template-areas:
      "wed wed wed wed wed wed wed wed aiyu aiyu aiyu aiyu"
      "com com com com sch sch sch sch aiyu aiyu aiyu aiyu"
      "ban ban ban ban ban ban ban ban ban ban ban ban";
  }
  .ev--wed{grid-area:wed}.ev--com{grid-area:com}.ev--sch{grid-area:sch}.ev--ban{grid-area:ban}
  .ev--aiyu{grid-area:aiyu;aspect-ratio:auto}
}
.events__cta{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;
  margin-top:clamp(32px,4vw,56px);padding-top:24px;border-top:2px solid var(--ink);
}
.events__cta p{margin:0;font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,24px)}

/* ─────────── 從哪來？ ─────────── */
.story{padding:var(--sec) var(--gut)}
.story__grid{display:grid;gap:40px}
.odo{display:none}
.odo__d{display:block;height:1em;overflow:hidden}
.odo__d>span{display:block;transform:translateY(calc(var(--v,0) * -1em));transition:transform 1s var(--ease-out)}
.odo__d:nth-child(2)>span{transition-delay:.06s}
.odo__d:nth-child(3)>span{transition-delay:.12s}
.odo__d:nth-child(4)>span{transition-delay:.18s}
.story__list li{padding:28px 0;border-top:1px solid var(--tofu-dkr)}
.story__list h3{font-family:var(--serif);font-weight:900;font-size:clamp(56px,10vw,96px);line-height:1;color:var(--red);font-variant-numeric:tabular-nums}
.story__pic{margin:0 0 22px;max-width:640px}
.story__pic img{width:100%;aspect-ratio:3/2;object-fit:cover}
.story__list p{margin:14px 0 0;font-family:var(--serif);font-weight:700;font-size:clamp(20px,2.2vw,30px);line-height:1.55;max-width:18em}
@media (min-width:1000px){
  .story__grid{grid-template-columns:6fr 6fr;gap:64px}
  .odo{
    display:flex;position:sticky;top:calc(50vh - .5em);align-self:start;height:1em;
    font-family:var(--serif);font-weight:900;font-size:clamp(140px,15vw,240px);line-height:1;color:var(--red);
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  }
  .story__list li{min-height:88vh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:0}
  .motion .story__pic{opacity:.3;transition:opacity .6s}
  .motion .story__list li.is-on .story__pic{opacity:1}
  .story__list h3{font-size:18px;letter-spacing:.3em;color:var(--muted)}
  .story__list li.is-on p{color:var(--ink)}
  .motion .story__list p{color:var(--tofu-dkr);transition:color .6s}
  .motion .story__list li.is-on p{color:var(--ink)}
}

/* ─────────── 誰來過？（紅底名人牆） ─────────── */
.press{background:var(--red);color:#fff;padding:var(--sec) var(--gut);overflow:hidden}
.wall{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(28px,3vw,48px) clamp(14px,2.4vw,40px);padding:12px 0 20px}
@media (min-width:900px){.wall{grid-template-columns:repeat(4,1fr)}}
/* 相框：像釘在牆上的簽名照，每張歪一點點 */
.frame{
  background:var(--paper);padding:10px 10px 14px;color:var(--ink);
  box-shadow:0 18px 30px -16px rgba(0,0,0,.5);transform:rotate(-2deg);transition:box-shadow .3s;
}
.frame:nth-child(2){transform:rotate(1.8deg);margin-top:28px}
.frame:nth-child(3){transform:rotate(-1.2deg)}
.frame:nth-child(4){transform:rotate(2.4deg);margin-top:18px}
.frame:hover{box-shadow:0 28px 44px -18px rgba(0,0,0,.6)}
.frame::after{content:"";position:absolute;top:-11px;left:50%;width:72px;height:22px;margin-left:-36px;background:rgba(246,239,227,.6);transform:rotate(-3deg)}
.frame img{width:100%;aspect-ratio:1;object-fit:cover}
.frame .ph__seal{top:20px;right:20px}
.frame p{margin:10px 2px 0;display:grid;gap:2px}
.frame p b{font-family:var(--serif);font-weight:900;font-size:18px}
.frame p span{font-size:12px;color:var(--muted)}

.clips{margin-top:clamp(64px,8vw,110px)}
.clips__title{font-family:var(--serif);font-weight:900;font-size:clamp(28px,3vw,40px);margin-bottom:18px}
.clips__list li{display:grid;grid-template-columns:9em 1fr auto auto;gap:20px;align-items:center;padding:18px 0;border-top:1px solid rgba(255,255,255,.3)}
.clips__list li:last-child{border-bottom:1px solid rgba(255,255,255,.3)}
.clips__src{font-size:13px;letter-spacing:.2em;opacity:.8}
.clips__head{font-family:var(--serif);font-weight:700;font-size:clamp(18px,1.8vw,24px);opacity:.6}
.clips__date{font-size:13px;opacity:.7}
/* 紅底上的印章反過來：白底紅字 */
.clips .ph__seal{background:#fff;color:var(--red);box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 3px var(--red)}
@media (max-width:700px){
  .clips__list li{grid-template-columns:1fr auto;gap:4px 16px}
  .clips__list li > span:not(.ph__seal){grid-column:1}
  .clips__list .ph__seal{grid-column:2;grid-row:1/4}
}

/* ─────────── 怎麼訂？（墨黑） ─────────── */
.end{
  background:var(--ink);color:var(--tofu);
  padding:var(--sec) var(--gut) calc(48px + env(safe-area-inset-bottom));
}
.end__head .q{color:#fff}
.end__grid{display:grid;gap:clamp(32px,5vw,80px)}
@media (min-width:1000px){.end__grid{grid-template-columns:7fr 5fr;align-items:center}}
.end__plaque img{width:100%;aspect-ratio:16/8;object-fit:cover;object-position:50% 45%}
.end__plaque figcaption{margin-top:10px;font-size:13px;color:rgba(246,239,227,.6)}
.end__label{margin:0 0 8px;font-size:13px;letter-spacing:.24em;color:rgba(246,239,227,.6)}
.end__tel{
  display:inline-block;text-decoration:none;font-family:var(--serif);font-weight:900;
  font-size:clamp(40px,5.4vw,76px);letter-spacing:-.01em;line-height:1;color:#fff;
  border-bottom:4px solid var(--red);padding-bottom:6px;
}
.end__tel:hover{color:var(--tofu-dk)}
.end__list{margin:36px 0 0;display:grid;gap:14px;font-size:15px}
.end__list div{display:grid;grid-template-columns:4.5em 1fr;gap:12px;padding-top:14px;border-top:1px solid rgba(246,239,227,.14)}
.end__list dt{color:rgba(246,239,227,.55);letter-spacing:.14em}
.end__list dd{margin:0}
.end__list a{text-underline-offset:3px}
.end__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:clamp(64px,8vw,120px);padding-top:28px;border-top:1px solid rgba(246,239,227,.14)}
.end__logo{width:120px;height:auto;fill:#fff}
.end__foot p{margin:0;font-size:13px;color:rgba(246,239,227,.55)}

/* ─────────── 菜單原件檢視 ─────────── */
.book{
  width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:var(--ink);color:var(--tofu);overflow:hidden;
}
.book::backdrop{background:rgba(23,17,15,.6)}
.book[open]{display:grid;grid-template-rows:auto 1fr}
.book__bar{display:flex;align-items:center;gap:16px;padding:12px var(--gut);border-bottom:1px solid rgba(246,239,227,.14)}
.book__title{margin:0 auto 0 0;font-family:var(--serif);font-weight:900;font-size:20px;letter-spacing:.08em}
.book__count{margin:0;font-variant-numeric:tabular-nums;font-size:15px;color:rgba(246,239,227,.7)}
.book__dl{font-size:14px;color:var(--tofu);text-underline-offset:3px}
.book__close{width:44px;height:44px;border:0;background:transparent;cursor:pointer;display:grid;place-items:center}
.book__close svg,.book__nav svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2}
.book__stage{overflow:auto;display:grid;place-items:center;padding:20px var(--gut) 40px;perspective:1600px}
.book__page{display:grid;justify-items:center;gap:12px;transform-origin:50% 50%}
.book__page img{max-width:100%;max-height:calc(100dvh - 150px);width:auto;height:auto;background:#fff}
.book__page.is-tall img{max-height:none;width:min(100%,900px)}
.book__page figcaption{font-size:14px;color:rgba(246,239,227,.75);max-width:40em;text-align:center}
.book__stage:has(.is-tall){place-items:start center}
.book__nav{
  position:absolute;top:50%;width:52px;height:52px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(246,239,227,.35);background:rgba(23,17,15,.6);color:var(--tofu);
  display:grid;place-items:center;transform:translateY(-50%);
}
.book__nav--prev{left:12px}
.book__nav--next{right:12px}
.book__nav[hidden]{display:none}

/* ─────────── 手機 ─────────── */
.dock{display:none}
@media (max-width:999px){
  /* 手機與平板不用頂端導覽列：新版 iOS Safari 的狀態列是透明的，固定在頂端的列上方會一直透出捲動中的內容。
     目錄、人數、撥號全部收進底部列，大拇指按得到，畫面也多出一條給內容。 */
  .bar{display:none}
  /* 目錄：底部列最左邊一格，直書「目錄」。打開時整片紅色選單從底部升起，選項靠下排，大拇指搆得到 */
  .bar__menu{display:block;position:static}
  .bar__menu summary{
    position:relative;z-index:2;list-style:none;cursor:pointer;height:100%;width:52px;
    display:grid;place-items:center;background:var(--ink);color:var(--tofu);
    border-right:1px solid rgba(246,239,227,.16);
    font-family:var(--serif);font-weight:700;font-size:15px;letter-spacing:.3em;writing-mode:vertical-rl;
    transition:background .2s,color .2s;-webkit-tap-highlight-color:transparent;
  }
  .bar__menu summary > span{grid-area:1/1;margin-top:.3em}
  .bar__menu summary::-webkit-details-marker{display:none}
  .bar__menu-x{visibility:hidden}
  .bar__menu[open] .bar__menu-o{visibility:hidden}
  .bar__menu[open] .bar__menu-x{visibility:visible}
  .bar__menu[open] summary{background:var(--tofu);color:var(--red);border-color:var(--tofu)}
  .bar__menu nav{
    position:fixed;inset:0;z-index:1;
    display:flex;flex-direction:column;justify-content:flex-end;overflow-y:auto;overscroll-behavior:contain;
    padding:calc(24px + env(safe-area-inset-top)) var(--gut) calc(24px + 62px + 24px + env(safe-area-inset-bottom));
    background:var(--red);color:#fff;
    animation:sheet-up .6s var(--ease-out);
  }
  .bar__menu nav a{
    display:flex;align-items:center;justify-content:space-between;padding:10px 0;text-decoration:none;
    font-family:var(--serif);font-weight:900;font-size:clamp(34px,10.4vw,56px);line-height:1.2;letter-spacing:-.01em;
    border-top:1px solid rgba(255,255,255,.24);
    animation:menu-in .6s var(--ease-out) backwards;
  }
  .bar__menu nav a:first-child{border-top:0}
  .bar__menu nav a::after{content:"";width:12px;height:12px;border-top:2px solid currentColor;border-right:2px solid currentColor;transform:rotate(45deg);opacity:.6;margin-right:6px}
  .bar__menu nav a:active{color:var(--tofu-dk)}
  /* 由下往上一個一個冒出來：最靠近手指的先到 */
  .bar__menu nav a:nth-last-child(1){animation-delay:.04s}
  .bar__menu nav a:nth-last-child(2){animation-delay:.08s}
  .bar__menu nav a:nth-last-child(3){animation-delay:.12s}
  .bar__menu nav a:nth-last-child(4){animation-delay:.16s}
  .bar__menu nav a:nth-last-child(5){animation-delay:.2s}
  .bar__menu nav a:nth-last-child(6){animation-delay:.24s}
  .bar__menu nav a:nth-last-child(7){animation-delay:.28s}
  .bar__menu nav a:nth-last-child(8){animation-delay:.32s}
  .bar__menu nav a:nth-last-child(9){animation-delay:.36s}
  .bar__menu nav .bar__menu-tel{
    margin-top:18px;padding:16px 18px;border:0;background:var(--tofu);color:var(--red);
    font-size:clamp(24px,7vw,32px);letter-spacing:.02em;justify-content:flex-start;gap:14px;position:relative;
  }
  .bar__menu-tel span{font-family:var(--sans);font-weight:500;font-size:12px;letter-spacing:.2em;border:1px solid currentColor;padding:.1rem .4rem;order:-1}
  .bar__menu nav .bar__menu-tel::after{margin-left:auto}
  @keyframes sheet-up{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes menu-in{from{transform:translateY(40%);opacity:0}}
  html.menu-open,html.menu-open body{overflow:hidden}
  /* iOS Safari 的狀態列與工具列後面，固定定位的選單蓋不到，露出的是網頁本身。
     選單打開時把網頁內容藏起來、底色換紅，那兩條就跟選單同色。只用 visibility，版面與捲動位置都不變 */
  html.menu-open{background:var(--red)}
  html.menu-open body>*:not(.dock){visibility:hidden}

  .dock{
    /* 平板上不要拉滿整個寬度：最寬 560px，置中 */
    position:fixed;left:max(10px,calc(50% - 280px));right:max(10px,calc(50% - 280px));bottom:calc(10px + env(safe-area-inset-bottom));z-index:55;
    display:grid;grid-template-columns:auto 1fr auto;height:62px;
    box-shadow:0 18px 30px -12px rgba(23,17,15,.5),0 0 0 1px rgba(246,239,227,.16);
    /* 同上：iOS Safari 的工具列是半透明浮在網頁上的，只往下推還是會從工具列後面透出來 */
    transform:translateY(180%);visibility:hidden;
    transition:transform .5s var(--ease-out),visibility 0s linear .5s;
  }
  .dock.is-on,.no-js .dock{transform:none;visibility:visible;transition:transform .5s var(--ease-out),visibility 0s}
  /* 目錄打開時，底部列只留「關閉」那一格浮在紅色選單上 */
  html.menu-open .dock{box-shadow:none}
  .dock__n{display:grid;grid-template-columns:48px 1fr 48px;align-items:center;background:var(--ink);color:var(--tofu);min-width:0}
  .dock__n span{text-align:center;font-family:var(--serif);font-weight:700;font-size:15px}
  .dock__n b{font-size:26px;font-weight:900;font-variant-numeric:tabular-nums;margin-right:.1em}
  .dock__n button{height:62px;border:0;background:transparent;color:inherit;display:grid;place-items:center;touch-action:manipulation}
  .dock__n button svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2}
  .dock__n button:active{background:rgba(246,239,227,.12)}
  .dock__call{
    display:flex;align-items:center;padding:0 18px;text-decoration:none;
    background:var(--red);color:#fff;font-family:var(--serif);font-weight:900;font-size:17px;letter-spacing:.14em;
  }
  .dock__call{position:relative}
  .dock__call::before{content:"";position:absolute;inset:5px;border:1px solid rgba(255,255,255,.5);pointer-events:none}
  .dock__call:active{background:var(--red-dk)}
  .call,.guests__alt{display:none}
  .end{padding-bottom:calc(110px + env(safe-area-inset-bottom))}
}

@media (max-width:600px){
  body{font-size:16px}
  .hero__caption{grid-template-columns:1fr;gap:10px}
  .hero__big b{font-size:34vw}
  .counter__row{grid-template-columns:52px 1fr 52px}
  .counter__btn{width:52px;height:52px}
  .slip__head{grid-template-columns:1fr auto;padding:12px 16px}
  .slip__shop{display:none}
  .slip__title{justify-self:start}
  .slip__body{padding:0 16px}
  .slip__foot{padding:12px 16px 14px}
  .item__row .amt{font-size:22px}
  .item__row{gap:8px}
  .slots{grid-template-columns:1fr}
  .slots li{grid-template-columns:auto 1fr;align-items:baseline;gap:12px}
  .radish{grid-template-columns:120px 1fr}
}


/* ═══════════════════════════════════════════
   手機版（2026-09 重做）
   桌機的記憶點是：招牌推門、座位點亮、照片橫移、年份滾動。
   手機不是把桌機縮小，而是讓這四件事在直式螢幕上各自成立。
   ═══════════════════════════════════════════ */

/* 開場推門時，窗框的白色雙線。只有直式螢幕會用到（見 main.js） */
.hero__door{fill:none;stroke:#fff;opacity:0;visibility:hidden}

/* 「吃什麼？」依人數標出該看哪一條 */
.nw{white-space:nowrap}
.routes__you{display:none;font-style:normal;font-size:13px;letter-spacing:.08em;color:var(--red);font-family:var(--sans);font-weight:500}
.routes a.is-match{border-color:var(--red)}
.routes a.is-match b{color:var(--red)}
.routes a.is-match .routes__you{display:block}

/* 合菜席單的橫向捲動進度 */
.feast__prog{display:none}

@media (max-width:999px){
  /* 問句大標題：依字數撐到接近整行寬，五個字的問句也不會超出畫面 */
  .q{font-size:min(25vw,calc((100vw - 2 * var(--gut)) / (var(--n, 5) - .2)))}

  /* 合菜席單：捲動進度條 */
  .feast__prog{display:block;position:relative;height:2px;margin-top:4px;background:var(--tofu-dk);overflow:hidden}
  .feast__prog i{position:absolute;inset:0 auto 0 0;width:calc(var(--w,1) * 100%);background:var(--ink);
    transform:translateX(calc(var(--p,0) * (1 / var(--w,1) - 1) * 100%))}
  .feast__scroll{scrollbar-width:none}
  .feast__scroll::-webkit-scrollbar{display:none}

  /* 從哪來？年份計數器黏在導覽列下方，往下捲一段就換一個年份 */
  .story__grid{gap:0}
  .odo{
    display:flex;position:sticky;top:0;z-index:3;
    margin:0 calc(-1 * var(--gut));padding:4px var(--gut) 6px;background:var(--tofu);
    font-family:var(--serif);font-weight:900;font-size:min(35vw,190px);line-height:1;color:var(--red);
    letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  }
  .odo::after{content:"";position:absolute;left:0;right:0;top:100%;height:28px;background:linear-gradient(var(--tofu),rgba(246,239,227,0));pointer-events:none}
  .story__list li{min-height:58vh;min-height:58svh;display:flex;flex-direction:column;justify-content:center;border-top:0;padding:40px 0}
  .story__list h3{font-size:15px;letter-spacing:.3em;color:var(--muted)}
  .story__list p{font-size:clamp(22px,6.4vw,30px)}
  .motion .story__list p{color:var(--tofu-dkr);transition:color .6s}
  .motion .story__list li.is-on p{color:var(--ink)}
  .motion .story__pic{opacity:.35;transition:opacity .6s}
  .motion .story__list li.is-on .story__pic{opacity:1}

  /* 坐哪裡？照片條：外框的高度由 main.js 依橫移距離撐出來，照片條用 sticky 黏在畫面中間，往下捲時橫向移動。
     用瀏覽器原生的 sticky，不用動畫程式的「釘住」：iPhone 網址列伸縮時，釘住會算錯位置，照片條會蓋到上面的文字。
     sticky 的外層不能有 overflow:hidden，所以這一段改用 clip。 */
  .motion .venue{overflow:clip}
  .motion .venue__pin{padding-bottom:0}
  .motion .venue__head{margin-bottom:0}
  .motion .venue__film{padding-top:24px}
  .motion .venue__reel{
    position:sticky;top:calc(19svh - 24px);
    display:flex;flex-direction:column;gap:22px;padding:0 0 8px;
  }
  .motion .venue__track{overflow:visible;scroll-snap-type:none;padding-right:var(--gut)}
  .motion .venue__track li{flex-basis:min(80vw,520px)}
  .motion .venue__track figure{overflow:hidden}
  .motion .venue__track img{aspect-ratio:4/5;max-height:62vh;max-height:62svh;will-change:transform}
  .motion .venue__prog{display:block;position:relative;margin:0 var(--gut);height:2px;background:rgba(246,239,227,.18)}
  .motion .venue__prog i{position:absolute;inset:0;background:var(--red);transform-origin:0 50%;transform:scaleX(0)}
}

@media (max-width:767px){
  /* 開場：招牌放大，副標跟著招牌下緣走 */
  .hero__sign{width:92vw}
  .hero__sub{top:calc(50% - 5svh + 23.6vw + 26px)}
  html:not(.motion) .hero__sub{top:calc(50svh + 23.6vw + 26px)}

  /* 幾位？座位圖移到人數上方，改成滿版。按人數時一眼就能看到座位亮起來 */
  .guests__side,.guests__main{display:contents}
  .guests__grid{gap:22px}
  .floor{order:-1;margin:0 calc(-1 * var(--gut))}
  .floor__map{padding:0 6px}
  .floor__cap{margin:10px var(--gut) 0}
  .counter{padding-top:14px}
  .counter__num input{font-size:clamp(84px,27vw,112px)}
  .counter__range{margin:6px 0 2px}
  /* 常用人數：七個一排，不再有一個孤零零掉到第二行 */
  .counter__chips{flex-wrap:nowrap;gap:4px}
  .counter__chips button{flex:1 1 0;min-width:0;height:44px;padding:0;font-size:15px}
  .counter__scene{margin-top:12px;text-align:center;font-family:var(--serif);font-weight:700;font-size:17px;color:var(--ink-2)}
  .slip{margin-top:10px}
  .tiers{display:grid;grid-template-columns:repeat(3,1fr)}
  .tiers button{height:44px;padding:0}

  /* 吃什麼？三條路線改成大按鈕 */
  .routes{gap:0}
  .routes a{grid-template-columns:1fr auto;align-items:center;padding:18px 0;gap:2px 16px}
  .routes a > *{grid-column:1}
  .routes a::after{content:"";grid-column:2;grid-row:1/4;width:10px;height:10px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-3px,-3px)}
  .routes b{font-size:clamp(28px,8vw,34px)}

  .feast__head{margin-bottom:20px}
  .col{padding-left:12px;padding-right:12px}

  /* 甜品：草泥馬坐在分隔線上，不要壓線 */
  .limited__alpaca{top:-116px;width:76px}
  .card figcaption{font-size:14px}
}

@media (max-width:999px) and (pointer:coarse){
  /* iOS Safari 往下捲時網址列縮成一顆膠囊浮在最下面，撥號列要墊高避開它 */
  .dock{bottom:calc(24px + env(safe-area-inset-bottom))}
  /* 觸控裝置沒有 hover，按下去要有回饋 */
  .btn:active{background:var(--ink);color:var(--tofu)}
  .btn--light:active{background:var(--tofu);color:var(--ink)}
  .counter__chips button:active,.tiers button:active{transform:scale(.94)}
  .counter__chips button,.tiers button{transition:transform .12s,background .2s,border-color .2s,color .2s;touch-action:manipulation}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}