/* ==========================================================================
   GCreate Wind — base：設計 token、重設、字體排印、按鈕、通用工具
   配色：以品牌 Logo 藍為主軸（深藍底、Logo 藍強調、藍白紙色）。
   ========================================================================== */

:root {
  /* 色票：以 Logo 為準（字 #0F1F3E、圖形 #004580）延伸 */
  --ink: #0b1830;            /* 深色底：Logo 字色再壓深一階 */
  --ink-2: #11233f;
  --ink-3: #1a2e4f;
  --paper: #f5f7fa;          /* 淺色底：帶一點藍的白 */
  --paper-2: #e9eef4;
  --paper-3: #d4dde8;
  --brand: #3a9beb;          /* 強調色（深底上）：#004580 同色相提亮，對比 ≥ 4.5 */
  --brand-deep: #004580;     /* 強調色（淺底上）：Logo 藍原色 */
  --brand-navy: #0f1f3e;     /* Logo 字色 */
  --mist: #a9c2da;
  --mist-2: #6d86a3;
  --line-green: #06c755;     /* LINE 品牌色，只用在 LINE 按鈕 */

  /* 字體 */
  --font-sans: -apple-system, BlinkMacSystemFont, "PingFang TC", "Heiti TC", "Microsoft JhengHei", "Noto Sans CJK TC", "Noto Sans TC", system-ui, sans-serif; /* 內文用系統字：零下載、螢幕最好讀 */
  --font-serif: "Noto Serif TC", "Songti TC", "PMingLiU", serif; /* 標題：中英數同一套字，粗細一致 */
  --font-latin: "Instrument Serif", "Noto Serif TC", serif; /* 只用在英文斜體副標、大數字 */
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* 字級（流動） */
  --fs-hero: clamp(3.4rem, 13.5vw, 13rem);
  --fs-display: clamp(2.6rem, 8vw, 8.5rem);
  --fs-h1: clamp(2.4rem, 6.4vw, 6.25rem);
  --fs-h2: clamp(2rem, 4.6vw, 4.5rem);
  --fs-h3: clamp(1.2rem, 1.7vw, 1.55rem);
  --fs-lead: clamp(1.1rem, 1.5vw, 1.35rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-mono: .75rem;

  /* 版面 */
  --gutter: clamp(16px, 4.2vw, 72px);
  --max: 1680px;
  --header-h: 72px;
  --radius: 18px;
  --radius-sm: 10px;
  --section-y: clamp(72px, 9vw, 160px);

  /* 前台主視覺專用的「電影級」時長（ui-motion 規範的主題擴充：只用在 Hero／大段捲動敘事） */
  --m-cine: 1100ms;
  --ease-wind: cubic-bezier(.16, 1, .3, 1);

  --m-accent: var(--brand);
}

@media (max-width: 767px) {
  :root { --header-h: 64px; }
}

/* 區塊明暗主題：每個 section 標 data-theme，元件只讀這幾個變數 */
[data-theme="dark"] {
  --bg: var(--ink);
  --bg-2: var(--ink-2);
  --fg: var(--paper);
  --muted: rgba(245, 247, 250, .74);
  --faint: rgba(245, 247, 250, .38);
  --line: rgba(245, 247, 250, .14);
  --line-strong: rgba(245, 247, 250, .32);
  --accent-text: var(--brand);
  --tile: var(--ink-3);
}
[data-theme="light"] {
  --bg: var(--paper);
  --bg-2: var(--paper-2);
  --fg: var(--ink);
  --muted: #57544d;
  --faint: rgba(11, 24, 48, .42);
  --line: rgba(11, 24, 48, .14);
  --line-strong: rgba(11, 24, 48, .34);
  --accent-text: var(--brand-deep);
  --tile: #ffffff;
}

/* ── 重設 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html:not(.lenis) { scroll-behavior: smooth; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }

body {
  margin: 0;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.85;
  letter-spacing: .02em;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, dl, dd, figure, address { margin: 0; }
address { font-style: normal; }
::selection { background: var(--brand); color: var(--ink); }

:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── 通用 ─────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

section[data-theme], .site-footer {
  background: var(--bg);
  color: var(--fg);
  position: relative;
}

.visually-hidden, .screen-reader-text {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: 12px; z-index: 100;
  padding: 10px 18px; border-radius: 999px;
  background: var(--brand); color: var(--ink); font-weight: 700;
  transform: translateY(-160%);
  transition: transform var(--m-fast) var(--m-ease-out);
}
.skip-link:focus { transform: none; }

@media (max-width: 767px) { .hide-sm { display: none !important; } }

/* 底紋顆粒：靜態 SVG 雜訊，增加「紙」的質感（不重繪、不擋點擊） */
body::after {
  content: "";
  position: fixed; inset: 0; z-index: 90; pointer-events: none;
  opacity: .055;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .5  0 0 0 0 .5  0 0 0 0 .5  0 0 0 1.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ── 字體排印 ─────────────────────────────────────────── */
.label {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: var(--font-mono);
  font-size: var(--fs-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
  line-height: 1.4;
}
.label-index { color: var(--accent-text, var(--brand)); }
.label-line { width: 36px; height: 1px; background: currentColor; opacity: .5; }

.section-title, .section-display, .page-hero__title, .split__title, .card__title, .row-item__title,
.article-hero__title, .case-card__title, .showcase__title, .journey__title, .service-index__title, .band__title, .footer-cta__title {
  text-wrap: balance;
}
.section-title {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--fs-h2);
  line-height: 1.08;
  letter-spacing: -.01em;
}
.section-display {
  font-family: var(--font-serif);
  font-weight: 900;
  font-size: var(--fs-display);
  line-height: 1.02;
  letter-spacing: -.02em;
}
.section-title em, .section-display em, .footer-cta__title em, .page-hero__title em {
  font-style: normal;
  color: var(--accent-text);
}

.lead { font-size: var(--fs-lead); line-height: 1.75; color: var(--muted); }

/* ── 按鈕 ─────────────────────────────────────────────── */
.btn {
  --btn-bg: transparent;
  --btn-fg: currentColor;
  --btn-fill: var(--fg);
  --btn-fill-fg: var(--bg);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 500;
  font-size: .95rem;
  letter-spacing: .04em;
  line-height: 1;
  white-space: nowrap;
  transition: color var(--m-base) var(--m-ease), transform var(--m-fast) var(--m-ease);
}
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill);
  border-radius: inherit;
  transform: translateY(101%);
  transition: transform var(--m-slow) var(--ease-wind);
}
.btn:active { transform: scale(.97); }
.btn .icon { transition: transform var(--m-base) var(--m-ease); }
@media (hover: hover) {
  .btn:hover { color: var(--btn-fill-fg); }
  .btn:hover::before { transform: none; }
  .btn:hover .icon { transform: translateX(3px); }
}
.btn:focus-visible { outline-offset: 4px; }

.btn--accent { --btn-bg: var(--brand); --btn-fg: var(--ink); --btn-fill: var(--paper); --btn-fill-fg: var(--ink); font-weight: 700; }
.btn--light  { --btn-bg: var(--paper); --btn-fg: var(--ink); --btn-fill: var(--brand); --btn-fill-fg: var(--ink); }
.btn--ghost  { box-shadow: inset 0 0 0 1px var(--line-strong); }
.btn--sm { min-height: 40px; padding: 0 16px; font-size: .875rem; }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1rem; }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 12px;
  margin-top: clamp(32px, 4vw, 56px);
  font-weight: 500;
  padding-bottom: 6px;
  background: linear-gradient(currentColor, currentColor) no-repeat left bottom / 100% 1px;
  transition: background-size var(--m-base) var(--m-ease), color var(--m-base) var(--m-ease);
}
.link-arrow .icon { transition: transform var(--m-base) var(--m-ease); }
@media (hover: hover) {
  .link-arrow:hover { color: var(--accent-text); }
  .link-arrow:hover .icon { transform: translateX(4px); }
}

/* ── 進場動畫的初始狀態（只在 JS 可用且未減少動態時） ── */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(28px); }
}

/* ── 頁面轉場：風從右吹過（跨頁 View Transitions；不支援就直接換頁） ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vt-out var(--m-slow) var(--m-ease-in) both; }
::view-transition-new(root) { animation: vt-in 600ms var(--ease-wind) both; }
@keyframes vt-out { to { opacity: 0; transform: translateX(-4%); } }
@keyframes vt-in { from { opacity: 0; transform: translateX(6%); } }

/* 長標題拆兩行 */
.tl { display: block; }

/* ── 中文斷行（搭配 inc/typography.php 插入的 <wbr>）──────────────
   zh-wbr：只在詞邊界、標點、空白換行；超長字串仍可強制換行，不會撐破版面。
   pretty：段落避免最後一行只剩一兩字；balance：標題各行長度平均。 */
.zh-wbr { word-break: keep-all; overflow-wrap: break-word; }
p, li, dd, dt, figcaption, blockquote, summary, td, .lead { text-wrap: pretty; }
h1, h2, h3, h4, h5, .section-title, .section-display, .split__title, .card__title, .chapter__title { text-wrap: balance; }
/* 主視覺說明、導言：通常兩三行，用 balance 讓各行等長、自然斷在標點附近 */
.hero__desc, .page-hero__desc, .page-hero__sub, .lead { text-wrap: balance; }