/*
═══════════════════════════════════════════════════════════════
   BASE — CSS 變數、Reset、字體
   所有顏色、字體變數都在這裡。後台 ACF Options 設定的顏色
   會在 wp_head 動態輸出覆蓋這些 fallback 值。
═══════════════════════════════════════════════════════════════
*/

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ─────────────────────────────────────────────
   CSS 變數（fallback 預設值）
   後台 Options Page 設定的顏色會覆蓋這些
   ───────────────────────────────────────────── */
:root {
    /* 顏色 — 深色模式預設 */
    --bone:       #0F1419;
    --bone-2:     #1A1F2E;
    --bone-3:     #242B3D;
    --linen:      rgba(168,181,201,.14);
    --linen-2:    rgba(168,181,201,.22);
    --mist:       #8A92A2;
    --mist-soft:  #6A727F;
    --twilight:   #E8EBF0;
    --twilight-2: #C8CFD8;
    --plum:       #8A7AAA;
    --plum-hi:    #9C8CBC;
    --plum-deep:  #6E608A;
    --bronze:     #A8B5C9;
    --bronze-hi:  #C0CCDC;

    /* 光暈強度（動態 CSS 會覆蓋）*/
    --glow-strength: .6;

    /* 字體系統 */
    --ff-cn:  'Noto Sans TC', sans-serif;
    --ff-en:  'Newsreader', 'Noto Sans TC', serif;
    --ff-d:   'Newsreader', 'Noto Serif TC', serif;
    --ff-num: 'Cormorant Garamond', 'Noto Serif TC', serif;
    --ff-m:   'IBM Plex Mono', monospace;

    /* 版面尺寸 */
    --max:        1100px;
    --max-narrow: 880px;
    --max-prose:  680px;

    /* 區塊內距 */
    --sec-pad: 120px;

    /* 動畫曲線 */
    --ease-moon: cubic-bezier(.22, 1, .36, 1);
    --t-reveal:  800ms;
    --t-hover:   600ms;
}

/* 淺色模式：用 data-theme="light" 切換 */
[data-theme="light"] {
    --bone:       #DEE1E6;
    --bone-2:     #D8DBE1;
    --bone-3:     #D2D5DC;
    --linen:      #C2C6CE;
    --linen-2:    #B0B4BE;
    --mist:       #5E6478;
    --mist-soft:  #8990A0;
    --twilight:   #1A2030;
    --twilight-2: #2A3142;
    --plum:       #5C6182;
    --plum-hi:    #6D729A;
    --plum-deep:  #4A4E6E;
    --bronze:     #5E6478;
    --bronze-hi:  #7A8190;
    --glow-strength: .3;
}


/* ─────────────────────────────────────────────
   Reset & 基礎
   ───────────────────────────────────────────── */
html { scroll-behavior: smooth; }

body {
    font-family: var(--ff-cn);
    background: var(--bone);
    color: var(--twilight);
    font-size: 15px;
    line-height: 1.8;
    font-weight: 300;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    position: relative;
    overflow-x: hidden;
    transition: background-color .5s ease, color .5s ease;
}

body.lang-en {
    font-family: var(--ff-en);
    font-weight: 300;
}

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

/* 焦點可視（無障礙）*/
*:focus-visible {
    outline: 2px solid var(--plum);
    outline-offset: 3px;
}

/* Skip link（無障礙）*/
.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999;
    background: var(--plum);
    color: var(--bone);
    padding: 12px 20px;
    text-decoration: none;
}
.skip-link:focus { left: 20px; top: 20px; }

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


/* ─────────────────────────────────────────────
   字級系統（display 系列：標題大字）
   ───────────────────────────────────────────── */
.display-xl {
    font-family: var(--ff-d);
    font-weight: 200;
    font-size: clamp(44px, 7.4vw, 96px);
    line-height: 1.02;
    letter-spacing: -.025em;
}
.display-l {
    font-family: var(--ff-d);
    font-weight: 200;
    font-size: clamp(36px, 5.4vw, 60px);
    line-height: 1.08;
    letter-spacing: -.02em;
}
.display-m {
    font-family: var(--ff-d);
    font-weight: 300;
    font-size: clamp(28px, 3.8vw, 42px);
    line-height: 1.16;
    letter-spacing: -.015em;
}
.display-s {
    font-family: var(--ff-d);
    font-weight: 400;
    font-size: clamp(22px, 2.6vw, 30px);
    line-height: 1.26;
    letter-spacing: -.008em;
}
.lang-en .display-xl,
.lang-en .display-l,
.lang-en .display-m,
.lang-en .display-s { font-style: italic; }


/* ─────────────────────────────────────────────
   字級系統（內文 / meta）
   ───────────────────────────────────────────── */
.eyebrow {
    font-family: var(--ff-m);
    font-size: 11px;
    font-weight: 400;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--mist);
}
.eyebrow.plum   { color: var(--plum); }
.eyebrow.bronze { color: var(--bronze); }

.lead {
    font-size: 17px;
    line-height: 1.75;
    color: var(--twilight);
    font-weight: 300;
    max-width: 48ch;
}
.body    { font-size: 15px; line-height: 1.85; color: var(--twilight); font-weight: 300; }
.body-mu { font-size: 15px; line-height: 1.85; color: var(--mist);     font-weight: 300; }
.small   { font-size: 13.5px; line-height: 1.7; color: var(--mist); font-weight: 300; }
.meta    {
    font-family: var(--ff-m);
    font-size: 11px;
    letter-spacing: .14em;
    color: var(--mist);
    text-transform: uppercase;
}
.micro   {
    font-family: var(--ff-m);
    font-size: 10px;
    letter-spacing: .18em;
    color: var(--mist);
    text-transform: uppercase;
}
.bronze-quote {
    font-family: var(--ff-d);
    font-style: italic;
    font-weight: 400;
    color: var(--bronze);
}


/* ─────────────────────────────────────────────
   版面 primitives
   ───────────────────────────────────────────── */
.wrap {
    max-width: var(--max);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}
.wrap-n {
    max-width: var(--max-narrow);
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}
.sec {
    padding: var(--sec-pad) 0;
    border-bottom: 1px solid var(--linen);
}
.sec.tight { padding: calc(var(--sec-pad) * .67) 0; }
.sec.bone2 { background: var(--bone-2); }


/* ─────────────────────────────────────────────
   減少動態（無障礙：尊重系統設定）
   ───────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}


/* ─────────────────────────────────────────────
   手機版調整
   ───────────────────────────────────────────── */
@media (max-width: 880px) {
    :root { --sec-pad: 80px; }
    .wrap, .wrap-n { padding: 0 24px; }
}


/* ═══════════════════════════════════════════════════════════════
   v0.9.30 · 統一閱讀寬度
   —— 文章、一般頁面（條款 / 隱私政策）、練習內頁共用一個容器。
      原本 single.php 用 inline style 的 --max-prose，
      page.php 卻吃 .wrap 的 1100px：同一個站兩種行寬，
      條款那種長文一行 90 幾個字，讀不下去。
   ═══════════════════════════════════════════════════════════════ */
.page-wrap {
    max-width: var(--max-prose);
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 880px) {
    .page-wrap {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* 列表頁（彙整 / 搜尋 / 首頁備援）—— 用寬容器，因為是格線不是長文 */
.list-wrap {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 880px) {
    .list-wrap {
        padding-top: 56px;
        padding-bottom: 56px;
    }
}

/* 文章頁的摘要：不吃 .lead 的 48ch 上限。
   48ch 在文章頁會變成比正文窄很多的一柱，看起來像排版壞掉。 */
.single-lead { max-width: none; }