@media (min-width: 768px) {
  .edit-hero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; }
  .edit-hero-meta .sep { display: inline; opacity: .35; }
}
.edit-hero-meta strong { color: var(--c-ink); font-weight: 600; }

/* ═══════════════════════════════════
   Hero tagline — 1 行 inline 倒數（focus 場考試）
   2026-05-01 第二次調整：取代擠在 hero 內的兩張卡 + strap
═══════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════════════
   2026-05-06 Batch 1：Hero asymmetric editorial redesign
   - 結構：左 .hero-lead（標題 + CTA）+ 右 .hero-counter-card（focus exam 倒數）
   - 字符 stagger animation（每個中文字 individually rise + fade）
   - Scroll-driven hero title（CSS animation-timeline: view()）
   - 不再全置中 — left-aligned hero + right-anchored card
═══════════════════════════════════════════════════════════════════ */
.hero-2026 {
  position: relative;
  max-width: 1280px;
  margin: 0 auto;
  padding: clamp(60px, 9vw, 140px) clamp(20px, 5vw, 80px) clamp(60px, 8vw, 96px);
  isolation: isolate;
}
/* 手機 mobile-first 重算：原 clamp 60px 起在 320 屏太擠，hero char 動畫被截 */
@media (max-width: 540px) {
  .hero-2026 { padding: clamp(28px, 6vw, 48px) clamp(14px, 4vw, 24px) clamp(32px, 6vw, 56px); }
}
@media (max-width: 379.98px) {
  .hero-2026 { padding: 24px 12px 28px; }
}

.hero-2026 .hero-grid {
  display: grid;
  grid-template-columns: 1fr;       /* mobile：stacked */
  gap: clamp(28px, 4vw, 48px);
  align-items: end;
  position: relative;
  z-index: 1;
}
/* 2026-05-12 mesh：hero-counter-card 砍掉、融合進下方 fusion-card。
   hero-grid 改 single-column 全寬，hero-lead 自然撐版 */
@media (min-width: 768px) {
  .hero-2026 .hero-grid {
    grid-template-columns: 1fr;
    gap: clamp(40px, 6vw, 96px);
  }
}

.hero-2026 .hero-lead {
  text-align: left;
  min-width: 0;
}

.hero-2026 .hero-eyebrow {
  font-family: var(--ff-mono);
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 clamp(20px, 3vw, 32px);
  display: inline-block;
  opacity: 0;
  animation: fade-up .42s .1s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}

.hero-2026 .hero-title {
  font-family: var(--ff-serif-cn);
  font-weight: 800;
  font-size: clamp(36px, 8.5vw, 104px);
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--c-ink);
  margin: 0 0 clamp(20px, 3vw, 36px);
  word-break: keep-all;
}
.hero-2026 .hero-line { display: block; }
.hero-2026 .hero-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(36%);
  animation: heroCharRise .65s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) calc(var(--i, 0) * 55ms + 100ms) forwards;
}
.hero-2026 .hero-char.vermilion { color: var(--c-vermilion); }
@keyframes heroCharRise {
  to { opacity: 1; transform: translateY(0); }
}

/* Scroll-driven hero title fade（B）— 2026 CSS animation-timeline: view()
   Hero 隨 scroll 退場時 opacity / scale / blur，給「淡出」premium 感 */
@supports (animation-timeline: view()) {
  .hero-2026 .hero-title {
    animation-timeline: view();
    animation-range: exit 0% exit 80%;
    animation-name: heroTitleScrollFade;
    animation-duration: 1ms;
    animation-fill-mode: both;
  }
  @keyframes heroTitleScrollFade {
    from { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
    to   { opacity: .35; transform: translateY(-30px) scale(.94); filter: blur(2px); }
  }
}

.hero-2026 .hero-sub {
  font-family: var(--ff-sans-cn);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.7;
  color: var(--c-muted);
  margin: 0 0 clamp(28px, 4vw, 44px);
  max-width: 520px;
  opacity: 0;
  animation: fade-up .56s .8s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}

.hero-2026 .hero-ctas {
  display: flex; flex-wrap: wrap; gap: 12px;
  opacity: 0;
  animation: fade-up .5s 1s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}

/* 60秒測驗小字連結 — 從原獨立紅磚塊降階成 hero CTA 下方的小字（D 方案）
   first-timer (guest + 0 答題) 才顯示，視覺輕量、跟 footer link 同分量 */
.hero-2026 .hero-cta-trial {
  display: inline-block;
  margin: clamp(12px, 1.5vw, 18px) 0 0;
  font-family: var(--ff-sans);
  font-size: 13px; font-weight: 500;
  color: var(--c-vermilion);
  text-decoration: none;
  letter-spacing: .02em;
  border-bottom: 1px dashed color-mix(in oklch, var(--c-vermilion) 50%, transparent);
  padding-bottom: 1px;
  opacity: 0;
  animation: fade-up .5s 1.2s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
  transition: color .15s, border-color .15s;
}
.hero-2026 .hero-cta-trial:hover {
  color: var(--c-vermilion-h, var(--c-vermilion));
  border-bottom-color: var(--c-vermilion);
}
@media (prefers-reduced-motion: reduce) {
  .hero-2026 .hero-cta-trial { animation: none; opacity: 1; }
}

/* ─ 右側 counter card：focus exam 倒數 hero anchor ─ */
.hero-2026 .hero-counter-card {
  position: relative;
  padding: clamp(24px, 3vw, 36px);
  background: color-mix(in oklch, var(--c-surface) 65%, transparent);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  border: 1px solid var(--c-border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 24px 64px -16px rgba(0, 0, 0, .18);
  border-radius: clamp(16px, 1.6vw, 24px);
  opacity: 0;
  animation: fade-up .7s .4s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
  transform: perspective(1200px) rotateY(-2deg);
  transition: transform .35s cubic-bezier(.2, .8, .2, 1), border-color .25s;
}
.hero-2026 .hero-counter-card:hover {
  transform: perspective(1200px) rotateY(0deg) translateY(-4px);
  border-color: color-mix(in oklch, var(--c-vermilion) 25%, var(--c-border));
}
[data-theme="dark"] .hero-2026 .hero-counter-card {
  background: color-mix(in oklch, var(--c-surface) 55%, transparent);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .04),
    0 24px 64px -16px rgba(0, 0, 0, .55);
}

.hero-2026 .hcc-eyebrow {
  font-family: var(--ff-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-vermilion);
  margin: 0 0 12px;
}
.hero-2026 .hcc-name {
  font-family: var(--ff-serif-cn);
  font-size: clamp(22px, 2.6vw, 30px);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0 0 6px;
  line-height: 1.2;
}
.hero-2026 .hcc-date {
  font-family: var(--ff-mono);
  font-size: 12.5px;
  color: var(--c-muted);
  margin: 0 0 clamp(20px, 3vw, 28px);
  letter-spacing: .02em;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.hero-2026 .hcc-countdown {
  display: flex; align-items: baseline;
  gap: 10px;
  margin: 0 0 clamp(12px, 1.5vw, 18px);
  position: relative;
}
.hero-2026 .hcc-num {
  font-family: var(--ff-mono);
  font-size: clamp(56px, 8.5vw, 88px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: 1;
  color: var(--c-vermilion);
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.hero-2026 .hcc-unit {
  font-size: 16px; font-weight: 500;
  color: var(--c-muted);
}
.hero-2026 .hcc-countdown .hero-live-dot {
  margin-left: 8px; align-self: center;
  position: relative; top: 0;
}
.hero-2026 .hcc-status {
  font-family: var(--ff-sans);
  font-size: 13px;
  color: var(--c-muted);
  line-height: 1.5;
}
.hero-2026 .hcc-status strong {
  color: var(--c-vermilion);
  font-weight: 600;
}

/* 「下一場考試」mini-card — Linnea 五人 mesh 結論：跟 hero focus 倒數同形式（縮小版）
   stacked layout：label / name + num / metadata 三行，editorial sidebar caption 感 */
.hero-2026 .hcc-other {
  margin-top: clamp(20px, 2.5vw, 28px);
  padding-top: clamp(14px, 1.8vw, 18px);
  border-top: 1px solid var(--c-border);
}
.hero-2026 .hcc-other-label {
  font-family: var(--ff-mono);
  font-size: 10.5px; font-weight: 700;
  letter-spacing: .2em; text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: 8px;
}
.hero-2026 .hcc-other-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.hero-2026 .hcc-other-name {
  font-family: var(--ff-serif-cn);
  font-size: clamp(15px, 1.5vw, 18px);
  font-weight: 700;
  color: var(--c-ink);
  margin: 0;
  flex: 1;
  min-width: 0;
  line-height: 1.2;
}
.hero-2026 .hcc-other-num {
  font-family: var(--ff-mono);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 700;
  color: var(--c-vermilion);
  letter-spacing: -.02em;
  line-height: 1;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}
.hero-2026 .hcc-other-unit {
  font-size: 11px;
  color: var(--c-muted);
  font-weight: 500;
}
.hero-2026 .hcc-other-meta {
  font-family: var(--ff-mono);
  font-size: 11.5px;
  color: var(--c-muted);
  letter-spacing: .02em;
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
}

/* Stamp「114 考古題已上線」蓋在 card 右上角 — 朱印 wax-seal 效果
   user 反映「很帥但被調小了」，調回接近原 size：80-115px
   z-index: 3 確保在 card content 上層、card 加 overflow: visible 讓 stamp 突出邊緣 */
.hero-2026 .hero-counter-card { overflow: visible; }
.hero-2026 .hero-counter-card .edit-stamp {
  top: -22px; right: -24px;
  width: clamp(80px, 8.5vw, 115px);
  height: clamp(80px, 8.5vw, 115px);
  font-size: clamp(12px, 1.4vw, 18px);
  z-index: 3;
}

/* RWD：mobile (< 768px) 卡片 stack 全寬時的微調 — 拿掉 3D tilt（單欄 tilt 看起來怪）+
   stamp 縮回 card 內（避免 -24px 偏移在窄螢幕跑出 viewport） */
@media (max-width: 767.98px) {
  .hero-2026 .hero-counter-card {
    transform: none;       /* 全寬時不傾斜，避免視覺斷層 */
  }
  .hero-2026 .hero-counter-card:hover {
    transform: translateY(-2px);   /* 維持 hover 上浮但無 tilt */
  }
  .hero-2026 .hero-counter-card .edit-stamp {
    /* override base 的 display: none — mobile 仍要看得到帥氣印章 */
    display: flex !important;
    top: 14px; right: 14px;        /* 改縮回 card 邊內 */
    width: 64px; height: 64px;
    font-size: 11px;
  }
}

/* RWD：tablet (768-900px) 右欄較窄時的微調 — 數字 max 限制不要爆 */
@media (min-width: 768px) and (max-width: 899.98px) {
  .hero-2026 .hcc-num { font-size: clamp(48px, 7vw, 64px); }
  .hero-2026 .hcc-other-num { font-size: clamp(20px, 2.4vw, 24px); }
}

/* prefers-reduced-motion 全部 disable */
@media (prefers-reduced-motion: reduce) {
  .hero-2026 .hero-char,
  .hero-2026 .hero-title,
  .hero-2026 .hero-eyebrow,
  .hero-2026 .hero-sub,
  .hero-2026 .hero-ctas,
  .hero-2026 .hero-counter-card {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* ─ 舊 .edit-hero-tagline 保留但 hero 不再用（兩試 panel 仍可能用）─ */
.edit-hero-tagline {
  margin-top: 20px; max-width: 720px;
  font-family: var(--ff-mono); font-size: 14px;
  color: var(--c-ink-2, var(--c-muted));
  letter-spacing: .03em;
  opacity: 0;
  animation: fade-up .5s 1.0s var(--ease-editorial, cubic-bezier(.2,.8,.2,1)) forwards;
}
.edit-hero-tagline strong { color: var(--c-ink); font-weight: 700; }
.edit-hero-tagline .hero-tag-num {
  font-feature-settings: 'tnum' 1; font-variant-numeric: tabular-nums;
  color: var(--c-vermilion); font-weight: 800;
  font-size: 18px; letter-spacing: 0;
}
.edit-hero-tagline .sep { opacity: .35; }
/* Live indicator dot — 暗示「這是 live 數據，時間在流逝」（2026-05-06 PR-B）
   pulse animation 跟 .exam-line-status .status-dot 共用 cd-pulse keyframes */
.edit-hero-tagline .hero-live-dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--c-vermilion);
  margin-left: 6px;
  vertical-align: middle;
  position: relative; top: -2px;
  animation: heroLivePulse 2s ease-in-out infinite;
}
@keyframes heroLivePulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(178, 58, 43, .55); }
  50%      { opacity: .5; box-shadow: 0 0 0 6px rgba(178, 58, 43, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .edit-hero-tagline .hero-live-dot { animation: none; box-shadow: none; }
}