@font-face { font-family: "Noto Sans TC"; src: url(../fonts/NotoSansTC-sub.woff2) format("woff2"); font-weight: 100 900; }
@font-face { font-family: "Geist Mono"; src: url(../fonts/GeistMono.woff2) format("woff2"); }
/* 整個網站是同一張紙：網頁底色 = 3D 畫面裡圖紙與桌面渲染後的紙色（--paper 是量出來的螢幕顏色），開場與結尾看不出畫布邊界 */
:root { --ink: #1e1c19; --paper: #f5eee6; --accent: #c4552a; --accentInk: #fff; --soft: rgba(30, 28, 25, .58); --rule: rgba(30, 28, 25, .18); }
html, body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Noto Sans TC", sans-serif; }
canvas#gl { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; }
/* 圖紙靜止時的向量疊圖（sheet-overlay.js）：在畫布之上、介面之下 */
#sheet-crisp { position: fixed; left: 0; top: 0; transform-origin: 0 0; z-index: 1; pointer-events: none; user-select: none; visibility: hidden; max-width: none; }
#loading { position: fixed; inset: 0; z-index: 50; display: grid; place-content: center; gap: 12px; text-align: center; letter-spacing: .2em; font-size: 12px; color: var(--soft); background: var(--paper); transition: opacity .6s; }
#loading .bar { width: 220px; height: 2px; background: var(--rule); }
#loading .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
body.ready #loading { opacity: 0; pointer-events: none; }
#spacer { width: 1px; }
.mono, #ui .kicker, #ui dt, #ui .count, #ui .ruler b { font-family: "Geist Mono", monospace; }

/* ───── 介面 ───── */
#ui { position: fixed; inset: 0; z-index: 6; pointer-events: none; font-size: 14px; }
#ui a, #ui button { pointer-events: auto; cursor: pointer; }
#ui .kicker { margin: 0; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
/* 強調字：預設用強調色；強調色太淺（例如金黃）時，site.json 設 accentText（字色）與 emMark（螢光筆底線） */
#ui em, .finale em { font-style: normal; color: var(--accentText, var(--accent)); background: var(--emMark, none); }

/* 頂列：品牌、選單、自動播放、預約。疊在 3D 實景上時，墊一層很淡的紙色漸層 */
#ui .topbar { position: absolute; left: 0; right: 0; top: 0; height: 64px; padding: 0 clamp(16px, 3vw, 40px); display: flex; align-items: center; gap: 28px; background: linear-gradient(to bottom, rgba(244, 241, 234, .55), rgba(244, 241, 234, 0)); }
#ui .brand { font-weight: 800; font-size: 15px; letter-spacing: .32em; color: var(--ink); text-decoration: none; white-space: nowrap; }
#ui .nav { display: flex; gap: 22px; margin-left: auto; }
#ui .nav a { font-size: 13px; letter-spacing: .18em; color: var(--ink); opacity: .75; }
#ui .nav a:hover { opacity: 1; }
/* 結尾：矮的橫向手機（約 390 px 高）一屏放不下，捲到底時標題會跑到頂列底下，頂列改成實心紙色 */
#ui.in-finale .topbar { background: linear-gradient(to bottom, var(--paper) 75%, transparent); }
#ui .topbar button { font: inherit; font-size: 12px; letter-spacing: .14em; border-radius: 999px; padding: 8px 16px; white-space: nowrap; }
#ui .play { color: var(--ink); background: rgba(244, 241, 234, .6); border: 1px solid var(--rule); }
#ui .play.on { border-color: var(--ink); }
#ui .cta { color: var(--paper); background: var(--ink); border: 1px solid var(--ink); font-weight: 600; }
#ui .cta:hover { color: var(--accentInk); background: var(--accent); border-color: var(--accent); }

/* 開場版面：左邊三分之一，圖紙在右邊 */
#ui .hero { position: absolute; left: clamp(16px, 4vw, 64px); top: 50%; width: min(30vw, 440px); translate: 0 -50%; }
#ui .hero h1 { margin: 18px 0 0; font-size: clamp(34px, 4.2vw, 66px); line-height: 1.12; font-weight: 800; letter-spacing: .02em; }
#ui .hero h1 span { display: block; }
#ui .hero .body { margin: 22px 0 0; font-size: 15px; line-height: 1.85; color: var(--soft); max-width: 30em; }
#ui .hero dl { display: grid; grid-template-columns: repeat(2, auto); gap: 12px 28px; justify-content: start; margin: 30px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); }
#ui dt { font-size: 10px; letter-spacing: .2em; color: var(--soft); }
#ui dd { margin: 4px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; }
#ui .hint { position: absolute; left: 50%; bottom: 28px; translate: -50% 0; display: grid; justify-items: center; gap: 10px; font-size: 12px; letter-spacing: .3em; color: var(--soft); }
#ui .hint i { width: 1px; height: 34px; background: linear-gradient(var(--ink), transparent); animation: hint 2.2s ease-in-out infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* 導覽中：空間標題卡（紙色毛玻璃，線稿與實景上都讀得清楚）、右側進度尺、右下角計數 */
/* 進度尺與計數是墨色，疊在深色實景上時靠一圈紙色光暈讀得出來 */
#ui .chrome { position: absolute; inset: 0; }
#ui .ruler, #ui .count { filter: drop-shadow(0 0 1.5px rgba(245, 238, 230, .9)) drop-shadow(0 0 4px rgba(245, 238, 230, .6)); }
#ui .card { position: absolute; left: clamp(16px, 4vw, 64px); bottom: clamp(24px, 7vh, 72px); width: min(380px, 40vw); padding: 22px 24px 18px; background: rgba(244, 241, 234, .78); backdrop-filter: blur(10px); border-top: 2px solid var(--accent); opacity: 0; }
#ui .card h2 { margin: 8px 0 0; font-size: 30px; letter-spacing: .1em; font-weight: 800; }
#ui .card .shot { margin: 12px 0 0; font-size: 14px; line-height: 1.75; }
#ui .card .text { margin: 8px 0 0; font-size: 13px; line-height: 1.8; color: var(--soft); }
#ui .card dl { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--rule); }
#ui .ruler { position: absolute; right: clamp(14px, 2vw, 28px); top: 20vh; height: 60vh; width: 26px; }
#ui .ruler .ticks { position: absolute; inset: 0; }
#ui .ruler .minor { position: absolute; right: 0; width: 6px; height: 1px; background: var(--rule); }
#ui .ruler .major { position: absolute; right: 0; width: 14px; height: 9px; translate: 0 -4px; display: block; }
#ui .ruler .major::after { content: ""; position: absolute; right: 0; top: 4px; width: 14px; height: 1px; background: var(--ink); opacity: .55; }
#ui .ruler .major b, #ui .ruler .major span { position: absolute; right: 22px; top: -3px; white-space: nowrap; font-size: 10px; letter-spacing: .14em; font-weight: 400; opacity: 0; transition: opacity .25s; }
#ui .ruler .major span { right: 46px; font-size: 12px; }
#ui .ruler .major:hover b, #ui .ruler .major:hover span, #ui .ruler .major.cur b { opacity: .8; }
#ui .ruler .now { position: absolute; right: 0; width: 22px; height: 2px; translate: 0 -1px; background: var(--accent); }
#ui .count { position: absolute; right: clamp(16px, 3vw, 40px); bottom: 26px; font-size: 12px; letter-spacing: .16em; color: var(--soft); }
#ui .count b { color: var(--ink); font-weight: 400; }

/* 結尾：一般的網頁區塊，只有一屏，和開場對稱（左欄文字，最下面接線框大字標誌；右半部圖紙，不蓋薄紗）。窄螢幕文字疊在圖紙上，蓋薄紗。
   上下間距與標題字級在矮視窗（筆電扣掉瀏覽器工具列約 600～700 px）跟著畫面高度縮，整欄還是一屏放得下；900 px 以上不變 */
/* 疊層順序：畫布 0 → 向量疊圖 1 → 薄紗 4 → 結尾區塊 5 → 介面 6（頂列一直在最上面） */
/* 直向螢幕蓋住圖紙的紙：平常是 .curtain（稜鏡光幕過場的畫布，ui.js），引擎還沒好或不支援 WebGL2 時用 .veil 薄紗（帶淡淡的紙紋） */
.curtain { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 4; pointer-events: none; visibility: hidden; }
.veil { position: fixed; inset: 0; z-index: 4; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.36 0 0 0 0 0.28 0 0 0 0.07 0'/%3E%3C/filter%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0 0.2 0 0 0 0.12 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23b)'/%3E%3Crect width='100%25' height='100%25' filter='url(%23a)'/%3E%3C/svg%3E"); opacity: 0; pointer-events: none; }
.finale { position: relative; z-index: 5; }
.finale .lead { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; width: min(32vw, 470px); margin-left: clamp(16px, 4vw, 64px); padding: clamp(72px, 11vh, 96px) 0 clamp(24px, 5vh, 48px); }
.finale .kicker { margin: 0; font-family: "Geist Mono", monospace; font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: var(--soft); }
.finale h2 { margin: 18px 0 0; font-size: clamp(34px, min(4.2vw, 7.4vh), 66px); line-height: 1.12; font-weight: 800; letter-spacing: .02em; }
.finale h2 span { display: block; }
.finale .body { margin: min(22px, 2.6vh) 0 0; max-width: 30em; font-size: 15px; line-height: 1.85; color: var(--soft); }
.finale .act { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin: min(30px, 3.4vh) 0 0; }
.finale .contact { display: inline-flex; align-items: center; gap: 14px; padding: 12px 22px; border-radius: 999px; background: var(--ink); color: var(--paper); }
.finale .contact span { font-size: 12px; letter-spacing: .18em; opacity: .75; }
.finale .contact b { font-size: 15px; letter-spacing: .12em; }
.finale .again { font: inherit; font-size: 13px; letter-spacing: .14em; color: var(--ink); background: none; border: 0; border-bottom: 1px solid var(--ink); padding: 4px 0; cursor: pointer; }
.finale dl { display: grid; grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px 28px; margin: min(30px, 3.4vh) 0 0; padding: min(16px, 2vh) 0 0; border-top: 1px solid var(--rule); }
.finale dt { font-family: "Geist Mono", monospace; font-size: 10px; letter-spacing: .2em; color: var(--soft); }
.finale dd { margin: 4px 0 0; font-size: 14px; }
.wordmark { font-size: 160px; font-weight: 900; letter-spacing: .06em; line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--rule); white-space: nowrap; overflow: hidden; }
.finale .wordmark { margin: min(34px, 3.8vh) 0 0; }
#ui .hero .wordmark { display: none; margin: 30px 0 0; }
#ui.stack .hero .wordmark { display: block; }
.finale footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; margin: 24px 0 0; padding: 16px 0 0; border-top: 1px solid var(--rule); font-family: "Geist Mono", monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--soft); }

/* 窄螢幕：選單收起；開場標語疊在圖紙上方 */
@media (max-width: 900px) {
  #ui .nav, #ui .play { display: none; }
  #ui .cta { margin-left: auto; }
  /* 開場標語在頂列與捲動提示之間置中（使用者：「字可以往中間放，現在偏上」）；放不下時 safe 會改成靠上，不壓到頂列 */
  #ui .hero { top: 64px; bottom: 104px; translate: 0 0; width: calc(100vw - 32px); display: flex; flex-direction: column; justify-content: safe center; }
  #ui .hero dl { display: none; }
  /* 空間卡片置中（使用者：「手機版的介紹格子可以置中嗎」）：原本寬度是 100vw − 32px 再加左右內距，比畫面寬、右邊被切掉。
     右邊的進度尺疊在卡片上沒關係（使用者說的） */
  #ui .card { left: 50%; translate: -50% 0; width: min(520px, calc(100vw - 32px)); box-sizing: border-box; }
  .finale .lead { width: auto; margin: 0 16px; }
}
body.rec #ui .topbar button { visibility: hidden; }
#fade { position: fixed; inset: 0; z-index: 4; background: var(--paper); opacity: 0; pointer-events: none; transition: opacity .42s ease; }
#fade.on { opacity: 1; }