:root {
  color-scheme: dark;
  --navy: #172b48;
  --ivory: #ece9df;
  --amber: #d4a057;
  --muted: #bcc2c9;
  --serif: "Noto Serif TC", serif;
  --badge-height: 40px;
}

/* 依整頁語言選字體；繁中頁夾帶英文時仍沿用 Noto Serif TC。 */
:root:lang(en) { --serif: "Crimson Pro", "Noto Serif TC", serif; }

* { box-sizing: border-box; }
html { background: var(--navy); }
body {
  margin: 0;
  background: var(--navy);
  color: var(--ivory);
  font-family: var(--serif);
  font-size: 1rem;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}
a { color: inherit; text-underline-offset: .25em; }
a:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; }
a:hover { text-decoration-thickness: 2px; }
.skip-link {
  position: absolute;
  top: .75rem;
  left: .75rem;
  z-index: 1;
  padding: .5rem 1rem;
  color: var(--navy);
  background: var(--ivory);
  transform: translateY(-200%);
}
.skip-link:focus { transform: translateY(0); }
.site-header, main, .site-footer { width: min(100% - 3rem, 60rem); margin-inline: auto; }
.language-switch {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: .25rem;
  padding-top: 1rem;
  /* 切換語系時保留同一組字形與字寬，不繼承整頁語言字型。 */
  font-family: "Noto Serif TC", serif;
  font-size: .875rem;
}
.language-switch a { padding: .5rem; min-height: 44px; text-decoration: none; }
.language-switch a[aria-current="page"] { text-decoration: underline; }
.language-switch span { color: var(--muted); }
.brand { margin-top: 1.25rem; text-align: center; }
.brand img { display: block; width: 72px; height: auto; margin: 0 auto .75rem; }
.brand-name { margin: 0; font-family: var(--serif); font-size: 1.75rem; font-weight: 400; line-height: 1.5; letter-spacing: .08em; }
.brand-en { margin: .25rem 0 0; font-size: .875rem; letter-spacing: .16em; }
:root:lang(en) .brand-en { font-size: 1.25rem; }
.hero { padding-top: 2rem; text-align: center; }
h1 { margin: 0; font-family: var(--serif); font-size: min(3.25rem, 8vw); font-weight: 400; line-height: 1.65; letter-spacing: .015em; }
/* 每句固定一行；依 viewport 調整主標大小，保留完整文案。 */
h1 span { display: block; white-space: nowrap; }
h1 em { font-style: normal; color: var(--amber); }
.intro { max-width: 36rem; margin: 1.25rem auto 0; font-size: 1rem; }
.intro span { display: block; }
.intro span + span { margin-top: .35rem; }
.download-section { margin-top: 1.25rem; }
.download-benefits { margin: 0; color: var(--ivory); font-size: 1rem; font-weight: 400; line-height: 1.5; }
.download-benefits span { white-space: nowrap; }
.benefit-divider { color: rgba(236, 233, 223, .26); }
.downloads { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: .5rem 1rem; margin-top: .5rem; }
.store-option { display: grid; justify-items: center; }
.store-link { display: flex; align-items: center; justify-content: center; min-height: calc(var(--badge-height) * 1.51); }
.store-link img { display: block; width: auto; height: var(--badge-height); }
.store-link.apple { padding-inline: calc(var(--badge-height) / 4); }
/* Google 官方 PNG 自帶透明留白：以黑色牌面高度對齊 Apple，保留完整圖片。 */
.store-link.google img { height: calc(var(--badge-height) * 250 / 166); }
.site-footer { padding-block: 2rem 2rem; text-align: center; font-size: .875rem; color: var(--muted); }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .25rem .75rem; }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.support { display: inline-flex; align-items: center; min-height: 44px; overflow-wrap: anywhere; }
.site-footer p { margin: .25rem 0; }
[lang="en"] h1 { font-size: min(3.25rem, 6.9vw); }

@media (max-width: 359px) {
  /* 窄版只放寬下載列，保留官方 badge 的尺寸與完整留白。 */
  .downloads { margin-inline: -1rem; column-gap: .25rem; }
}

@media (min-width: 40rem) {
  :root { --badge-height: 48px; }
  body { font-size: 1.125rem; }
  .language-switch { padding-top: 1.5rem; }
  .brand { margin-top: 1.5rem; }
  .brand img { width: 88px; }
  .brand-name { font-size: 2rem; }
  .brand-en { font-size: 1rem; }
  :root:lang(en) .brand-en { font-size: 1.5rem; }
  .hero { padding-top: 2.5rem; }
  h1 { line-height: 1.55; }
  .intro { font-size: 1.125rem; margin-top: 1.5rem; }
  .download-section { margin-top: 1.5rem; }
  .download-benefits { font-size: 1.125rem; }
  .downloads { margin-top: .625rem; gap: 1.25rem; }
  .site-footer { padding-top: 2.5rem; }
}

@media print {
  :root { color-scheme: light; }
  html, body { background: white; color: black; }
  .language-switch, .downloads, .skip-link { display: none; }
  h1 em, .site-footer { color: black; }
  .brand img { display: none; }
}