/* 關於頁專用樣式（build 發成 /css/about.css，只在 /about/ 與 /en/about/ 載入） */

/* ---------- 頁首：文字＋字標組合 ---------- */
.about-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.about-hero h1 { font-size: clamp(2rem, 1.2rem + 3vw, 3.4rem); line-height: 1.15; margin-bottom: 18px; }
html[lang="en"] .about-hero h1 { letter-spacing: 0; }
.about-h1-line { display: block; }
.about-lockup { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: clamp(28px, 4vw, 44px) 24px; border-radius: calc(var(--r) * 1.5); border: 1px solid var(--gold-a25); background: radial-gradient(ellipse at 50% 0%, rgba(212, 175, 106, .16), transparent 62%), linear-gradient(180deg, var(--panel-2), var(--panel)); box-shadow: var(--shadow); text-align: center; }
.about-lockup-icon { width: clamp(120px, 12vw, 168px); height: auto; border-radius: 22%; box-shadow: 0 0 0 1px var(--gold-a45), 0 16px 40px rgba(0, 0, 0, .5); }
.wordmark { font-family: "Lato", sans-serif; font-weight: 900; letter-spacing: .16em; padding-left: .16em; color: var(--gold); line-height: 1; }
.about-lockup .wordmark { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); }
.about-lockup-sub { color: var(--muted); font-size: .9rem; }
@media (max-width: 860px) {
  .about-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .about-lockup { flex-direction: row; justify-content: flex-start; text-align: left; padding: 18px 20px; gap: 16px; }
  .about-lockup-icon { width: 72px; }
  .about-lockup > .wordmark { font-size: 1.35rem; }
  .about-lockup-sub { display: none; }
}

/* ---------- 品牌故事 ---------- */
.prose p { color: #cfccc3; line-height: 1.85; }
.prose p:last-child { margin-bottom: 0; }
#story .phone { --w: clamp(220px, 24vw, 280px); }

/* ---------- 設計原則 ---------- */
.principle-grid .card h3 { font-size: 1.12rem; }
.principle-grid .card p { font-size: .95rem; line-height: 1.75; margin-bottom: 0; }
/* 2×2：每張卡夠寬，內文 3～4 行 */
@media (min-width: 641px) { .principle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 基本資料 ---------- */
.facts-split { align-items: start; }
.facts-table th[scope="row"] { width: 7.5em; white-space: nowrap; font-weight: 700; color: #dedad0; vertical-align: top; }
html[lang="en"] .facts-table th[scope="row"] { width: 9em; }
.facts-table td { color: #cfccc3; overflow-wrap: anywhere; }
.stance { display: flex; gap: 14px; align-items: flex-start; margin-top: 24px; padding: 18px 20px; border-radius: var(--r); border: 1px solid var(--gold-a25); background: var(--gold-a10); }
.stance-title { display: block; font-family: var(--font-head); color: var(--gold-hi); margin-bottom: 4px; }
.stance-text { display: block; color: #dedad0; line-height: 1.7; }
@media (max-width: 420px) { .facts-table th, .facts-table td { padding: 12px; font-size: .92rem; } .facts-table th[scope="row"], html[lang="en"] .facts-table th[scope="row"] { width: 1%; white-space: nowrap; padding-right: 14px; } }

/* ---------- 聯絡 ---------- */
.card-text { display: block; color: #c9c6bd; line-height: 1.7; }
.contact-grid .card h3 { font-size: 1.1rem; }
.contact-grid .card-text { overflow-wrap: anywhere; }
.steps-head { margin: clamp(36px, 5vw, 56px) 0 18px; font-size: clamp(1.2rem, 1.05rem + .5vw, 1.45rem); }
.steps-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps-3 > li { padding: 64px 20px 22px; }
.steps-3 > li::before { top: 20px; left: 20px; }
@media (max-width: 860px) { .steps-3 { grid-template-columns: minmax(0, 1fr); } .steps-3 > li { padding: 18px 18px 18px 66px; } .steps-3 > li::before { top: 18px; left: 18px; } }
.contact-more { margin: 24px 0 0; color: var(--muted); font-size: .95rem; }

/* ---------- 收尾 CTA ---------- */
.cta-panel h2 { margin-bottom: 12px; }
.cta-qr .qr-code { width: 168px; height: 168px; }