/* ============================================================
   通豪大飯店 T HOTEL — 共用基礎樣式 (Shared foundation)
   --------------------------------------------------------
   設計代碼（色彩 / 字體 / 間距）、全站重置、導覽列、捲動進場動畫。
   ★ 要調整全站色彩、字體、間距，只需編輯本檔的 :root 區段，
     index / room-grid / room-suit1 三頁會同步生效。
   ★ 各頁面專屬版型（Hero、各區塊、頁尾等）仍寫在該頁的 <style> 內。
   ============================================================ */

:root{
  --paper:#FFFFFF;
  --paper-2:#F5F5F5;
  --ink:#444444;
  --ink-2:#1A1A1A;
  --ink-3:#000000;
  --rule:rgba(68,68,68,.18);
  --rule-soft:rgba(68,68,68,.08);
  --bg:var(--paper);
  --fg:var(--ink);
  --fg-strong:var(--ink-3);
  --panel:var(--paper-2);
  --on-panel:var(--ink);
  --display: "Aboreto", "Cormorant Garamond", "Times New Roman", serif;
  --sans: "Helvetica Neue", Helvetica, "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
  --serif-cn: "Noto Serif TC", "Songti TC", serif;
  --gutter: clamp(20px, 4vw, 80px);
  --section-y: clamp(80px, 10vw, 160px);
}
body.theme-dark{
  --bg:#2E2E2E;
  --fg:#D8D6D2;
  --fg-strong:#FFFFFF;
  --panel:#262626;
  --on-panel:#D8D6D2;
  --rule:rgba(255,255,255,.18);
  --rule-soft:rgba(255,255,255,.08);
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:var(--sans);
  color:var(--fg);
  background:var(--bg);
  font-weight:300;
  letter-spacing:.02em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition: background .4s ease, color .4s ease;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer; }

.container{ max-width:1440px; margin:0 auto; padding:0 var(--gutter); }

/* ────────────────────────────────────────  TOP NAV  ──── */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding: 22px var(--gutter);
  transition: background .35s ease, backdrop-filter .35s, padding .35s;
}
.nav.scrolled{
  background:color-mix(in oklab, var(--bg) 88%, transparent);
  backdrop-filter:blur(10px);
  padding:14px var(--gutter);
  border-bottom:1px solid var(--rule-soft);
}
.nav-brand{ display:flex; align-items:center; gap:14px; }
.nav-brand svg{ width:32px; height:auto; color:var(--fg-strong); }
.nav-brand .wm{ font-family:var(--display); font-size:13px; letter-spacing:.42em; color:var(--fg-strong); }
.nav-brand .wm .cn{ font-family:var(--serif-cn); font-weight:300; letter-spacing:.36em; margin-right:.5em; color:var(--fg); }
.nav-menu{ display:flex; align-items:center; gap:32px; }
.nav-menu a{ font-family:var(--display); font-size:11px; letter-spacing:.28em; text-transform:uppercase; opacity:.78; transition:opacity .2s; position:relative; }
.nav-menu a.active{ opacity:1; color:var(--fg-strong); }
.nav-menu a.active::after{ content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px; background:currentColor; }
.nav-menu a:hover{ opacity:1; color:var(--fg-strong); }
.nav-menu .cn{ font-family:var(--serif-cn); font-size:13px; letter-spacing:.32em; font-weight:300; }
.nav-cta{ display:inline-flex; align-items:center; gap:10px; border:1px solid currentColor; padding:11px 22px; font-family:var(--display); font-size:11px; letter-spacing:.32em; text-transform:uppercase; transition: background .25s, color .25s; }
.nav-cta:hover{ background:var(--fg-strong); color:var(--bg); }
.nav-cta .cn{ font-family:var(--serif-cn); letter-spacing:.3em; }

/* hamburger — hidden on desktop, injected by nav.js */
.nav-toggle{ display:none; }
.nav-cta-mobile{ display:none; }

@media (max-width: 980px){
  .nav-toggle{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:44px; height:44px; margin-left:auto;
    background:none; border:0; cursor:pointer; padding:11px; z-index:60;
  }
  .nav-toggle span{ display:block; height:1.5px; width:22px; background:var(--fg-strong); transition:transform .32s ease, opacity .2s ease; }
  .nav.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
  .nav.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
  .nav.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }
  .nav.menu-open .nav-brand{ position:relative; z-index:60; }

  .nav-cta{ display:none; }

  .nav-menu{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; left:0; right:0; top:0;
    padding: 92px var(--gutter) 40px;
    background:var(--bg); border-bottom:1px solid var(--rule);
    transform:translateY(-101%); transition:transform .44s cubic-bezier(.4,0,.1,1);
    z-index:55; max-height:100dvh; overflow:auto;
  }
  .nav.menu-open .nav-menu{ transform:none; }
  .nav-menu a{ font-size:11px; letter-spacing:.3em; padding:18px 2px; border-bottom:1px solid var(--rule-soft); opacity:.85; display:flex; align-items:baseline; gap:14px; }
  .nav-menu a .cn{ font-size:18px; }
  .nav-menu a.active{ opacity:1; }
  .nav-menu a.active::after{ display:none; }
  .nav-menu a.nav-cta-mobile{
    display:flex; margin-top:26px; border:1px solid var(--fg-strong); padding:17px; justify-content:center;
    color:var(--fg-strong); opacity:1; letter-spacing:.3em;
  }
  .nav-menu .nav-cta-mobile .cn{ font-size:13px; }
}

/* ────────────────────────────────────────  捲動進場動畫  ──── */
.reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; }
.reveal.in{ opacity:1; transform:none; }