/* 版面樣式——只准用 tokens.css 的變數，不得出現 hex（tests/test_tokens2css.py 會擋）。
   數值依 docs/design-spec.md「全站」表。TODO M1：依規格補齊各區塊。 */
*,*::before,*::after{box-sizing:border-box}
html{font-size:20px}
body{margin:0;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body-zh);line-height:1.7;letter-spacing:.01em}
h1,h2,h3{font-family:var(--font-zh-display);font-weight:var(--font-zh-display-weight);color:var(--color-accent);letter-spacing:.02em;line-height:1.25;margin:0 0 .5em}
a{color:var(--color-accent)}
a:hover{color:var(--accent-600)}
:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.skip{position:absolute;left:-999px;top:0}
.skip:focus{left:16px;top:16px;background:var(--color-surface);padding:.5rem 1rem;border-radius:999px}
.wrap{max-width:1280px;margin:0 auto;padding:0 64px}
.btn{display:inline-block;padding:18px 36px;border-radius:999px;font-weight:700;font-size:1.05rem;text-decoration:none;white-space:nowrap;font-family:var(--font-body-en)}
.btn--primary{background:var(--color-primary);color:var(--brand-ground)}
.btn--primary:hover{background:var(--accent-600);color:var(--brand-ground)}
.btn--ghost{border:2px solid var(--accent-2-400);color:var(--accent-2-700)}
.btn--ghost:hover{background:var(--accent-2-100)}
.nav{display:flex;align-items:center;gap:32px;max-width:1280px;margin:0 auto;padding:24px 64px}
.nav__brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.nav__zh{font-family:var(--font-zh-display);font-weight:900;font-size:26px;color:var(--color-accent)}
.nav__en{font-family:var(--font-en-display);font-size:28px;color:var(--brand-textEn)}
.nav nav{display:flex;gap:28px;margin-left:auto}
.nav nav a{font-size:18px;text-decoration:none;color:var(--color-text)}
.sec{max-width:1280px;margin:0 auto;padding:44px 64px}
.footer{max-width:1280px;margin:80px auto 0;padding:48px 64px 64px;display:grid;gap:16px}
.footer__goldline{display:block;width:72px;height:2px;background:var(--brand-gold)}
.footer__brand{display:flex;align-items:center;gap:12px}
.footer__zh{font-family:var(--font-zh-display);font-weight:900;color:var(--color-accent)}
.footer__en{font-family:var(--font-en-display);font-size:1.3em;color:var(--brand-textEn)}
.footer__info p{margin:0;font-size:18px;line-height:1.8}
.footer__info a{text-decoration:none;font-family:var(--font-body-en);font-weight:700}
.footer__area{color:var(--accent-2-700);font-weight:700;margin:0}
@media (max-width:640px){
  html{font-size:19px}
  .wrap,.sec,.nav,.footer{padding-left:20px;padding-right:20px}
  .nav nav,.nav__phone{display:none}
  .nav__burger{display:inline-flex;margin-left:auto;width:44px;height:44px;border-radius:50%;border:0;background:var(--color-surface);align-items:center;justify-content:center}
}