/* ============================================================
   弦外 The Unsaid — main.css
   v5 (2026-06-19) faithful transfer from mockup-f.html
   Theme: unsaid | Domain: whatsunsaid.com
   ============================================================ */

/* ============================================================
   CSS 變數 — 色彩 token + 字體 token
   ============================================================ */
:root {
  --warm-cream:  #F9F7F4;
  --ink:         #212529;
  --ink-pure:    #000000;
  --mustard:     #EBB338;
  --deep-blue:   #003AB6;
  --coral:       #C94426;
  --divider:     #E3DFD8;
  --white:       #FFFFFF;
  --meta-gray:   #888888;
  --link-hover:  #003AB6;

  --font-serif-cjk:     'Chiron Sung HK', 'Songti SC', 'SimSun', serif;
  --font-serif-latin:   'EB Garamond', Georgia, serif;
  --font-sans-geo:      'Jost', 'Futura', 'Century Gothic', sans-serif;
  --font-display-latin: 'Cormorant', Georgia, serif;

  --max-w: 1200px;
  --col-main: 62%;
  --col-side: 33%;
  --gap: 48px;
}

/* ============================================================
   Reset + Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; }
body {
  background: var(--warm-cream);
  color: var(--ink);
  font-family: var(--font-serif-cjk);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }

/* ============================================================
   共用容器
   ============================================================ */
.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px;
}

/* ============================================================
   HEADER（全寬，三欄：左導覽 | 中 masthead | 右導覽）
   ============================================================ */
.site-header {
  width: 100%;
  background: var(--warm-cream);
  border-bottom: 1px solid var(--divider);
  padding: 0 24px;
  position: relative;
}

.site-header > .nav-left,
.site-header > .nav-right,
.site-header > .wordmark,
.site-header > .hamburger-btn {
  /* children laid out via grid on header-inner wrapper below */
}

/* Inner grid — 3-col: left-nav | wordmark | right-nav */
.site-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: 88px;
  padding: 12px 24px;
  gap: 0;
}

.nav-left {
  display: flex;
  gap: 28px;
  align-items: center;
}
.nav-right {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: flex-end;
}

.nav-left a,
.nav-right a {
  font-family: var(--font-sans-geo);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s ease;
}
.nav-left a:hover,
.nav-right a:hover { color: var(--coral); }

/* Wordmark — centre */
.wordmark {
  text-align: center;
  line-height: 1;
  grid-column: 2;
}
.wordmark-zh {
  display: block;
  font-family: var(--font-serif-cjk);
  font-size: 36px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ink-pure);
}
.wordmark-en {
  display: block;
  font-family: var(--font-display-latin);
  font-size: 17px;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--ink);
  margin-top: 5px;
}
.wordmark-deck {
  display: block;
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--meta-gray);
  margin-top: 6px;
}

/* ============================================================
   漢堡選單（CSS-only checkbox toggle、no JS）
   ============================================================ */
.hamburger-checkbox { display: none; }

.hamburger-btn {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  padding: 4px;
  grid-column: 3;
  justify-self: end;
}
.hamburger-btn span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--ink);
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hamburger animation when checked */
.hamburger-checkbox:checked ~ .site-header .hamburger-btn span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-checkbox:checked ~ .site-header .hamburger-btn span:nth-child(2) {
  opacity: 0;
}
.hamburger-checkbox:checked ~ .site-header .hamburger-btn span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobile menu drawer */
.mobile-menu {
  display: none;
  background: var(--warm-cream);
  border-bottom: 1px solid var(--divider);
  padding: 16px 24px;
  width: 100%;
}
.mobile-nav {
  display: flex;
  flex-direction: column;
}
.mobile-nav a {
  display: block;
  font-family: var(--font-sans-geo);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
  transition: color 0.2s ease;
}
.mobile-nav a:hover { color: var(--coral); }

/* Show mobile menu when checkbox is checked */
.hamburger-checkbox:checked + .mobile-menu,
.hamburger-checkbox:checked ~ .mobile-menu {
  display: block;
}

/* ============================================================
   首頁 — 雙欄版面 (62% / 33%)
   ============================================================ */
.home-layout {
  display: grid;
  grid-template-columns: var(--col-main) var(--col-side);
  gap: var(--gap);
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 24px 64px;
}

.home-main { min-width: 0; }
.home-sidebar { min-width: 0; }

/* Article separator */
.article-separator {
  width: 100%;
  height: 1px;
  background: var(--divider);
  margin: 40px 0;
}

/* ============================================================
   編輯 rubric（v5：文章間分隔帶）
   ============================================================ */
.editorial-rubric {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.editorial-rubric-label {
  font-family: var(--font-sans-geo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--meta-gray);
}
.editorial-rubric-accent {
  font-family: var(--font-display-latin);
  font-size: 22px;
  font-weight: 500;
  color: var(--divider);
  line-height: 1;
}

/* ============================================================
   Lead article (首頁頭條唯一封面位)
   ============================================================ */
.lead-article {
  margin-bottom: 0;
}

.lead-hero-link { display: block; }
.lead-hero {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 0;
}
.lead-hero img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.lead-hero:hover img { transform: scale(1.02); }

.lead-body { padding: 0; }

/* v5 cover-line: clamp(34px,4.2vw,56px) / weight 500 / rgba(33,37,41,.72) */
.lead-cover-line {
  display: block;
  font-family: var(--font-display-latin);
  font-size: clamp(34px, 4.2vw, 56px);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.01em;
  color: rgba(33, 37, 41, 0.72);
  margin-top: 14px;
  margin-bottom: 8px;
}

/* v5 lead-title: 31px (from 22px) */
.lead-title {
  font-family: var(--font-serif-cjk);
  font-size: 31px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-pure);
  margin-top: 6px;
  margin-bottom: 14px;
  text-align: center;
}
.lead-title a:hover { color: var(--deep-blue); }

.lead-subtitle {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 17px;
  color: var(--meta-gray);
  margin-bottom: 14px;
  text-align: center;
}

.lead-meta {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-gray);
  text-align: center;
  margin-bottom: 20px;
}
.lead-meta time { margin-right: 8px; }
.lead-meta .lead-section {
  color: var(--coral);
  margin-left: 8px;
}

/* ============================================================
   Article card (home grid items)
   ============================================================ */
.article-grid {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.article-card { }

.card-thumb-link { display: block; }
.card-thumb {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  margin-bottom: 16px;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.card-thumb:hover img { transform: scale(1.02); }

.card-cover-line {
  font-family: var(--font-display-latin);
  font-size: 18px;
  font-weight: 500;
  color: rgba(33, 37, 41, 0.6);
  margin-bottom: 6px;
}

.card-title {
  font-family: var(--font-serif-cjk);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-pure);
  margin-bottom: 10px;
}
.card-title a:hover { color: var(--deep-blue); }

.card-meta {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-gray);
}
.card-meta time { margin-right: 8px; }
.card-section { color: var(--coral); margin-left: 8px; }

/* ============================================================
   Sidebar
   ============================================================ */
.author-card {
  margin-bottom: 40px;
}

.author-card-inner {
  background: var(--mustard);
  padding: 20px 16px 16px;
}

.author-label {
  font-family: var(--font-sans-geo);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 6px;
}

.author-name {
  font-family: var(--font-serif-cjk);
  font-size: 17px;
  font-weight: 700;
  color: #FFFFFF;
  letter-spacing: 0.06em;
  display: block;
  margin-bottom: 8px;
}

.author-bio {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.8);
  line-height: 1.5;
  margin-bottom: 12px;
}

.author-link {
  display: inline-block;
  font-family: var(--font-sans-geo);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255, 0.6);
  padding: 6px 14px;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.author-link:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: #FFFFFF;
}

.sidebar-heading {
  font-family: var(--font-sans-geo);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--meta-gray);
  margin-bottom: 6px;
}

.popular-section { margin-bottom: 40px; }
.popular-list { }
.popular-list li {
  padding: 10px 0;
  border-bottom: 1px solid var(--divider);
}
.popular-list li a {
  font-family: var(--font-serif-cjk);
  font-size: 14px;
  line-height: 1.5;
  color: var(--deep-blue);
  transition: color 0.2s ease;
}
.popular-list li a:hover { color: var(--coral); }

.sidebar-categories { }
.category-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--divider);
}
.category-list li a {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  transition: color 0.2s ease;
}
.category-list li a:hover { color: var(--coral); }

/* ============================================================
   分類頁 (category/list page)
   ============================================================ */
.category-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 24px 64px;
}

.category-header {
  border-bottom: 1px solid var(--divider);
  padding: 40px 0 28px;
  margin-bottom: 40px;
  text-align: center;
}

/* Ghosted display category name (INTIMACY / WORLD NOTES etc.) */
.category-identity {
  display: block;
  font-family: var(--font-display-latin);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 500;
  letter-spacing: 0.08em;
  color: var(--divider);
  line-height: 1;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.category-name {
  font-family: var(--font-serif-cjk);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink-pure);
  margin-bottom: 8px;
}

.category-desc {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-gray);
}

.category-tabs {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 20px;
}

.category-tab {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-gray);
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.category-tab.active,
.category-tab:hover {
  color: var(--ink);
  border-bottom-color: var(--coral);
}

.category-list-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.list-article-card {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 28px;
  align-items: start;
}

.list-card-thumb-link { display: block; }
.list-card-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
}
.list-card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.list-card-thumb:hover img { transform: scale(1.02); }

.list-card-cover-line {
  font-family: var(--font-display-latin);
  font-size: 16px;
  font-weight: 500;
  color: rgba(33, 37, 41, 0.6);
  margin-bottom: 6px;
}

.list-card-title {
  font-family: var(--font-serif-cjk);
  font-size: 22px;
  font-weight: 400;
  line-height: 1.35;
  color: var(--ink-pure);
  margin-bottom: 10px;
}
.list-card-title a:hover { color: var(--deep-blue); }

.list-card-subtitle {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 16px;
  color: var(--meta-gray);
  margin-bottom: 10px;
  line-height: 1.5;
}

.list-card-meta {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-gray);
}

.empty-notice {
  font-family: var(--font-sans-geo);
  font-size: 14px;
  color: var(--meta-gray);
  text-align: center;
  padding: 60px 0;
}

/* ============================================================
   單篇文章頁 (single post)
   ============================================================ */
.single-article { }

.post-meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px;
  border-bottom: 1px solid var(--divider);
  max-width: var(--max-w);
  margin: 0 auto;
}

.meta-date,
.meta-author {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--meta-gray);
}

.meta-category {
  text-align: center;
  font-family: var(--font-sans-geo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.meta-category a {
  color: var(--coral);
  transition: color 0.2s ease;
}
.meta-category a:hover { color: var(--deep-blue); }

.post-title-wrap {
  max-width: 840px;
  margin: 32px auto;
  padding: 0 24px;
  text-align: center;
}

.post-cover-line {
  font-family: var(--font-display-latin);
  font-size: clamp(24px, 3vw, 40px);
  font-weight: 500;
  line-height: 0.95;
  color: rgba(33, 37, 41, 0.65);
  margin-bottom: 12px;
}

.post-title {
  font-family: var(--font-serif-cjk);
  font-size: 36px;
  font-weight: 400;
  line-height: 1.3;
  color: var(--ink-pure);
  margin-bottom: 12px;
}

.post-subtitle {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 18px;
  font-weight: 400;
  color: var(--meta-gray);
  line-height: 1.5;
}

.post-hero-wrap {
  max-width: 840px;
  margin: 0 auto 40px;
  padding: 0 24px;
}
.post-hero img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
.post-hero figcaption {
  font-family: var(--font-sans-geo);
  font-size: 11px;
  color: var(--meta-gray);
  letter-spacing: 0.06em;
  margin-top: 8px;
  text-align: center;
}

/* Narrow body column 640px */
.post-body-wrap {
  position: relative;
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 80px;
  font-family: var(--font-serif-cjk);
  font-size: 17px;
  line-height: 1.8;
  color: var(--ink);
}

.post-body-wrap p { margin-bottom: 1.5em; }

.post-body-wrap h2 {
  font-family: var(--font-serif-cjk);
  font-size: 22px;
  font-weight: 700;
  color: var(--ink-pure);
  margin: 2em 0 0.75em;
  line-height: 1.3;
}

.post-body-wrap h3 {
  font-family: var(--font-serif-cjk);
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  margin: 1.5em 0 0.5em;
}

.post-body-wrap blockquote {
  border-left: 3px solid var(--mustard);
  padding-left: 20px;
  margin: 1.5em 0;
  color: #555;
  font-style: italic;
}

.post-body-wrap a {
  color: var(--deep-blue);
  text-decoration: underline;
  text-decoration-color: rgba(0, 58, 182, 0.3);
  transition: color 0.2s ease;
}
.post-body-wrap a:hover { color: var(--coral); }

/* Response track (vertical indicator) */
.response-track {
  position: absolute;
  left: -80px;
  top: 0;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-sans-geo);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  pointer-events: none;
}

/* Post footer (lastmod) */
.post-footer {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 24px 40px;
}
.post-lastmod {
  font-family: var(--font-sans-geo);
  font-size: 11px;
  color: var(--meta-gray);
  letter-spacing: 0.06em;
}

/* Related articles */
.related-articles {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 24px 64px;
  border-top: 1px solid var(--divider);
}

.related-heading {
  font-family: var(--font-sans-geo);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--meta-gray);
  margin-bottom: 24px;
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.related-card { }
.related-thumb {
  aspect-ratio: 3 / 2;
  overflow: hidden;
  margin-bottom: 12px;
}
.related-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.related-thumb:hover img { transform: scale(1.02); }

.related-title {
  font-family: var(--font-serif-cjk);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  margin-bottom: 6px;
}
.related-title a:hover { color: var(--deep-blue); }

.related-card time {
  font-family: var(--font-sans-geo);
  font-size: 11px;
  color: var(--meta-gray);
  letter-spacing: 0.08em;
}

/* Article figure (shortcode) */
.article-figure {
  margin: 2em 0;
}
.article-figure img { width: 100%; height: auto; }
.article-figure figcaption {
  font-family: var(--font-sans-geo);
  font-size: 11px;
  color: var(--meta-gray);
  letter-spacing: 0.06em;
  margin-top: 8px;
  text-align: center;
}

/* Callout shortcode */
.callout {
  margin: 2em 0;
  padding: 20px 24px;
  border-left: 4px solid var(--mustard);
  background: rgba(235, 179, 56, 0.06);
}
.callout-quote { border-left-color: var(--deep-blue); background: rgba(0, 58, 182, 0.04); }
.callout-highlight { border-left-color: var(--coral); background: rgba(201, 68, 38, 0.04); }
.callout-inner {
  font-family: var(--font-serif-cjk);
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
}
.callout-inner p:last-child { margin-bottom: 0; }

/* Taxonomy / term pages */
.taxonomy-page,
.term-page {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 48px 24px 64px;
}
.taxonomy-header,
.term-header {
  border-bottom: 1px solid var(--divider);
  padding-bottom: 24px;
  margin-bottom: 40px;
}
.taxonomy-title,
.term-title {
  font-family: var(--font-serif-cjk);
  font-size: 32px;
  font-weight: 400;
  color: var(--ink-pure);
}
.taxonomy-card,
.term-card {
  padding: 16px 0;
  border-bottom: 1px solid var(--divider);
}
.taxonomy-card-title a,
.term-card-title a {
  font-family: var(--font-serif-cjk);
  font-size: 18px;
  color: var(--ink);
  transition: color 0.2s ease;
}
.taxonomy-card-title a:hover,
.term-card-title a:hover { color: var(--deep-blue); }

/* 404 page */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.error-inner { padding: 40px 24px; }
.error-code {
  font-family: var(--font-display-latin);
  font-size: 96px;
  font-weight: 500;
  color: var(--divider);
  line-height: 1;
  margin-bottom: 16px;
}
.error-title {
  font-family: var(--font-serif-cjk);
  font-size: 28px;
  font-weight: 400;
  color: var(--ink-pure);
  margin-bottom: 12px;
}
.error-message {
  font-family: var(--font-serif-latin);
  font-size: 17px;
  color: var(--meta-gray);
  margin-bottom: 24px;
}
.error-home-link {
  display: inline-block;
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--ink);
  padding: 10px 24px;
  transition: background 0.2s ease, color 0.2s ease;
}
.error-home-link:hover { background: var(--ink); color: var(--white); }

/* ============================================================
   頁尾
   ============================================================ */
.site-footer {
  background: var(--ink);
  padding: 48px 24px 32px;
}

.footer-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  text-align: center;
}

.footer-brand {
  margin-bottom: 8px;
}
.footer-wordmark-zh {
  font-family: var(--font-serif-cjk);
  font-size: 24px;
  font-weight: 700;
  color: var(--white);
  letter-spacing: 0.1em;
  margin-right: 10px;
}
.footer-wordmark-en {
  font-family: var(--font-display-latin);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

.footer-tagline {
  font-family: var(--font-serif-latin);
  font-style: italic;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 24px;
}

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 32px;
}
.footer-nav a {
  font-family: var(--font-sans-geo);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  transition: color 0.2s ease;
}
.footer-nav a:hover { color: var(--white); }

.footer-copy {
  font-family: var(--font-sans-geo);
  font-size: 11px;
  color: rgba(255, 255, 255, 0.4);
  letter-spacing: 0.06em;
}

/* ============================================================
   RWD — 手機（≤768px）
   v5 修正：
   - cover-line: clamp(28px,7vw,40px)
   - lead-title: 22px
   ============================================================ */
@media (max-width: 768px) {
  /* Header: hide nav links, show hamburger */
  .site-header {
    grid-template-columns: 40px 1fr 40px;
    min-height: 68px;
    padding: 8px 16px;
  }
  .nav-left,
  .nav-right { display: none; }
  .hamburger-btn { display: flex; }

  .wordmark-zh { font-size: 24px; }
  .wordmark-en { font-size: 13px; letter-spacing: 0.22em; }
  .wordmark-deck { font-size: 11px; }

  /* Home: single column */
  .home-layout {
    grid-template-columns: 1fr;
    gap: 32px;
    padding: 24px 16px 48px;
  }
  .home-sidebar { order: 2; }
  .home-main { order: 1; }

  /* v5 cover-line mobile */
  .lead-cover-line { font-size: clamp(28px, 7vw, 40px); }

  /* Hero: 4:3 on mobile */
  .lead-hero { aspect-ratio: 4 / 3; }
  .card-thumb { aspect-ratio: 4 / 3; }

  /* v5 lead-title mobile: 22px */
  .lead-title { font-size: 22px; }
  .card-title { font-size: 20px; }

  /* Category list: single column */
  .list-article-card {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  /* Single post */
  .post-title { font-size: 26px; }
  .post-meta-bar {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 16px;
  }
  .post-body-wrap { padding: 0 16px 60px; }
  .response-track { display: none; }

  /* Category page */
  .category-identity { font-size: clamp(32px, 10vw, 48px); }
  .category-tabs { gap: 16px; flex-wrap: wrap; }

  /* Related grid: single column */
  .related-grid { grid-template-columns: 1fr; }

  /* Footer */
  .footer-nav { flex-wrap: wrap; gap: 16px; }
}

/* ============================================================
   RWD — 中型斷點（≤1024px）
   ============================================================ */
@media (max-width: 1024px) and (min-width: 769px) {
  .home-layout {
    grid-template-columns: 1fr 280px;
    gap: 32px;
  }
  .related-grid { grid-template-columns: repeat(2, 1fr); }
  .list-article-card { grid-template-columns: 240px 1fr; }
}