/* ================================================================
   B站 跳動e行銷 — main.css
   theme: tiktok-marketing
   視覺 1:1 對應 mockup-B.html（Field Notes 田野筆記氣質）
   fonts: Noto Serif TC(CJK) + Outfit(UI) + JetBrains Mono(data)
   ================================================================ */

/* ── CSS Variables ── */
:root {
  --color-accent:        #1A6B4A;
  --color-accent-hover:  #135238;
  --color-accent-light:  #E8F5EE;
  --color-bg:            #FAFAF7;
  --color-bg-warm:       #F5F0E8;
  --color-bg-white:      #FFFFFF;
  --color-text:          #1C1C1A;
  --color-text-muted:    #5C5C58;
  --color-border:        #D8D4CC;
  --font-serif:   'Noto Serif TC', 'Georgia', serif;
  --font-ui:      'Outfit', 'Helvetica Neue', sans-serif;
  --font-mono:    'JetBrains Mono', 'Courier New', monospace;
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --content-max: 720px;
  --site-max:   1080px;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--font-serif);
  font-weight: 400;
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.8;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-accent); text-decoration: none; }
a:hover { color: var(--color-accent-hover); text-decoration: underline; }
img { display: block; max-width: 100%; height: auto; }

/* ── Layout containers ── */
.container {
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}
.content-width {
  max-width: var(--content-max);
  margin: 0 auto;
}

/* ── Field Note 左線（裝飾元素 1/3）── */
.field-note-rule {
  border-left: 3px solid var(--color-accent);
  padding-left: var(--space-md);
}

/* ── Utility: tag ── */
.tag {
  display: inline-block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  background: var(--color-accent-light);
  padding: 0.2em 0.65em;
  border-radius: 2px;
}

/* ── Meta date（裝飾元素 2/3 小圓點）── */
.meta-date::before {
  content: '\00B7';
  margin-right: 0.35em;
  color: var(--color-accent);
  font-weight: 700;
}
.meta-info {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}

/* ================================================================
   SITE HEADER
   ================================================================ */
.site-header {
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  max-width: var(--site-max);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* Brand mark（裝飾元素 3/3）*/
.site-logo {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  text-decoration: none;
}
.logo-mark {
  width: 36px;
  height: 36px;
  background: var(--color-accent);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.logo-mark span {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-bg-white);
  line-height: 1;
}
.logo-text {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-text);
  letter-spacing: -0.01em;
}
.logo-text em {
  color: var(--color-accent);
  font-style: normal;
}

/* Desktop nav */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}
.site-nav a {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  text-decoration: none;
  transition: color 180ms ease-out;
}
.site-nav a:hover,
.site-nav a.active {
  color: var(--color-accent);
  text-decoration: none;
}
.nav-cta {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-bg-white) !important;
  background: var(--color-accent);
  padding: 0.4em 1.1em;
  border-radius: 3px;
  text-decoration: none !important;
  transition: background 180ms ease-out;
}
.nav-cta:hover {
  background: var(--color-accent-hover) !important;
  text-decoration: none !important;
}

/* Hamburger */
.hamburger {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}
.hamburger span {
  display: block;
  height: 2px;
  background: var(--color-text);
  border-radius: 1px;
  transition: all 200ms ease-out;
}
.hamburger span:nth-child(1) { width: 24px; }
.hamburger span:nth-child(2) { width: 18px; }
.hamburger span:nth-child(3) { width: 24px; }
.hamburger.open span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
  width: 24px;
}
.hamburger.open span:nth-child(2) { opacity: 0; width: 0; }
.hamburger.open span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
  width: 24px;
}

/* Mobile nav drawer */
.mobile-menu {
  display: none;
  position: fixed;
  top: 60px;
  left: 0;
  right: 0;
  background: var(--color-bg-white);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) var(--space-xl);
  z-index: 99;
  flex-direction: column;
  gap: var(--space-lg);
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text);
  text-decoration: none;
  border-bottom: 1px solid var(--color-border);
  padding-bottom: var(--space-md);
  transition: color 180ms ease-out;
}
.mobile-menu a:last-child { border-bottom: none; padding-bottom: 0; }
.mobile-menu a:hover { color: var(--color-accent); }
.mobile-menu .mobile-cta {
  font-family: var(--font-ui);
  font-weight: 600;
  color: var(--color-accent);
}

/* ================================================================
   HOME PAGE — Field Notes intro + Topic blocks
   ================================================================ */
.home-intro {
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-3xl) 0 var(--space-2xl);
}
.home-intro-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.home-intro h1 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--color-text);
  line-height: 1.25;
  margin-top: var(--space-lg);
  margin-bottom: var(--space-md);
}
.home-intro-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 52ch;
}

/* Topic block sections */
.topic-block-section {
  padding: var(--space-2xl) 0;
  border-bottom: 1px solid var(--color-border);
}
.topic-block-section:nth-child(even) {
  background: var(--color-bg-warm);
}
.topic-block-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 2px solid var(--color-accent);
}
.topic-block-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-text);
}
.topic-block-link {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-accent);
  text-decoration: none;
  transition: color 180ms ease-out;
}
.topic-block-link:hover { color: var(--color-accent-hover); }

/* Topic article list — 3-column grid */
.topic-article-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-lg);
}
.topic-article-item {
  padding: 0 var(--space-lg) 0 0;
  border-right: 1px solid var(--color-border);
}
.topic-article-item:first-child { padding-left: 0; }
.topic-article-item:nth-child(2) { padding-left: var(--space-lg); }
.topic-article-item:last-child {
  border-right: none;
  padding-right: 0;
  padding-left: var(--space-lg);
}
.topic-article-body { display: flex; flex-direction: column; }
.topic-article-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.topic-article-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.45;
  margin-bottom: var(--space-xs);
  display: block;
  text-decoration: none;
  transition: color 180ms ease-out;
}
.topic-article-title:hover { color: var(--color-accent); text-decoration: none; }
.topic-article-excerpt {
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.65;
}
.topic-article-time {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  display: block;
}

/* Stat bar section */
.stat-bar-section { padding: var(--space-2xl) 0; }
.stat-bar-inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}
.stat-bar-numbers {
  display: flex;
  gap: var(--space-xl);
  flex-shrink: 0;
}
.stat-item { text-align: center; }
.stat-value {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.8rem;
  color: var(--color-accent);
  line-height: 1;
  display: block;
}
.stat-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.72rem;
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
  margin-top: 0.3em;
  display: block;
}
.stat-bar-divider {
  width: 1px;
  height: 48px;
  background: var(--color-border);
  flex-shrink: 0;
}
.stat-bar-text { flex: 1; }
.stat-bar-tagline {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  margin-bottom: var(--space-sm);
  line-height: 1.4;
}
.stat-bar-sub {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

/* About snippet section */
.about-snippet-section {
  background: var(--color-accent);
  padding: var(--space-2xl) 0;
}
.about-snippet-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.about-snippet-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: var(--space-sm);
}
.about-snippet-desc {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1rem;
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
}
.about-snippet-cta {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-accent);
  background: var(--color-bg-white);
  padding: 0.6em 1.4em;
  border-radius: 3px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 180ms ease-out, color 180ms ease-out;
}
.about-snippet-cta:hover {
  background: var(--color-bg);
  color: var(--color-accent);
  text-decoration: none;
}

/* ================================================================
   LIST PAGE — 分類頁 / 文章列表
   ================================================================ */
.category-header {
  background: var(--color-bg-warm);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-2xl) 0 var(--space-xl);
}
.breadcrumb {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  letter-spacing: 0.02em;
}
.breadcrumb a {
  color: var(--color-text-muted);
  text-decoration: none;
}
.breadcrumb a:hover { color: var(--color-accent); }
.breadcrumb-sep {
  margin: 0 0.4em;
  color: var(--color-border);
}
.category-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2rem;
  color: var(--color-text);
  line-height: 1.2;
  margin-bottom: var(--space-sm);
}
.category-desc {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.7;
}

/* 分類頁 layout with aside */
.post-list-section {
  padding: var(--space-2xl) 0 var(--space-3xl);
}
.category-page-layout {
  display: grid;
  grid-template-columns: 1fr 240px;
  gap: var(--space-2xl);
  align-items: start;
}
.category-aside {
  position: sticky;
  top: 80px;
}
.aside-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}
.aside-nav { list-style: none; }
.aside-nav li { border-bottom: 1px solid var(--color-border); }
.aside-nav a {
  display: block;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.88rem;
  color: var(--color-text);
  text-decoration: none;
  padding: var(--space-sm) 0;
  transition: color 180ms ease-out;
}
.aside-nav a:hover,
.aside-nav a.active { color: var(--color-accent); }
.aside-nav a.active { font-weight: 600; }
.aside-cta {
  margin-top: var(--space-lg);
  padding: var(--space-md);
  background: var(--color-accent-light);
  border-radius: 4px;
  border-left: 3px solid var(--color-accent);
}
.aside-cta-label {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}
.aside-cta-text {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.85rem;
  color: var(--color-text);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}
.aside-cta-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  color: var(--color-accent);
  text-decoration: none;
}
.aside-cta-link:hover { text-decoration: underline; }

/* Post list (article items in list page) */
.post-list { list-style: none; }
.post-list-item {
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-lg) 0;
}
.post-list-item:first-child { border-top: 1px solid var(--color-border); }
.post-list-meta {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}
.post-list-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.15rem;
  color: var(--color-text);
  line-height: 1.35;
  margin-bottom: var(--space-sm);
  text-decoration: none;
  display: block;
  transition: color 180ms ease-out;
}
.post-list-title:hover { color: var(--color-accent); text-decoration: none; }
.post-list-excerpt {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 62ch;
}

/* ================================================================
   SINGLE ARTICLE PAGE
   ================================================================ */
.article-header {
  padding: var(--space-2xl) 0 var(--space-xl);
  border-bottom: 1px solid var(--color-border);
  margin-bottom: var(--space-xl);
}
.article-category-tag { margin-bottom: var(--space-md); }
.article-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 2.1rem;
  color: var(--color-text);
  line-height: 1.25;
  margin-bottom: var(--space-lg);
}
.article-meta-row {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
}
.article-author {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.article-date {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
}
.article-date::before {
  content: '\00B7';
  margin-right: 0.35em;
  color: var(--color-accent);
}
.article-read-time {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

/* Article body */
.article-body {
  max-width: var(--content-max);
  margin: 0 auto;
}
.article-body p {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.85;
  margin-bottom: var(--space-lg);
}
.article-body h2 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.4rem;
  color: var(--color-text);
  line-height: 1.3;
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-md);
}
.article-body h3 {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-text);
  line-height: 1.35;
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
}
.article-body a {
  color: var(--color-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article-body a:hover { color: var(--color-accent-hover); }
.article-body ul, .article-body ol {
  padding-left: 1.5em;
  margin-bottom: var(--space-lg);
}
.article-body li {
  font-family: var(--font-serif);
  line-height: 1.75;
  margin-bottom: var(--space-xs);
}
.article-body code {
  font-family: var(--font-mono);
  font-size: 0.88em;
  background: var(--color-bg-warm);
  padding: 0.1em 0.4em;
  border-radius: 2px;
  color: var(--color-accent);
}
.article-body table { width: 100%; }

/* Field Note Callout */
.field-note-callout {
  border-left: 3px solid var(--color-accent);
  background: var(--color-accent-light);
  padding: var(--space-md) var(--space-lg);
  margin: var(--space-xl) 0;
  border-radius: 0 3px 3px 0;
}
.field-note-callout p {
  margin-bottom: 0;
  font-family: var(--font-serif);
  font-size: 0.95rem;
  color: var(--color-text);
  line-height: 1.7;
}

/* Inline data table */
.data-table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-xl) 0;
  font-family: var(--font-serif);
  font-size: 0.9rem;
}
.data-table th {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-warm);
  padding: var(--space-sm) var(--space-md);
  text-align: left;
  border-bottom: 2px solid var(--color-border);
}
.data-table td {
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
  line-height: 1.5;
}
.data-table td.num {
  font-family: var(--font-mono);
  font-weight: 400;
  color: var(--color-accent);
}
.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--color-bg-warm); }

/* Inline data card row */
.data-card-row {
  display: flex;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
.data-card {
  flex: 1;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
}
.data-card-value {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-accent);
  display: block;
  line-height: 1;
  margin-bottom: 0.4em;
}
.data-card-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

/* Article figure */
.article-figure {
  margin: var(--space-xl) 0;
  border-radius: 4px;
  overflow: hidden;
}
.article-figure img { width: 100%; height: auto; }
.article-figure figcaption {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
  text-align: center;
}

/* Article tags */
.article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
}

/* Related articles */
.related-articles {
  border-top: 1px solid var(--color-border);
  padding: var(--space-xl) 0 var(--space-2xl);
  max-width: var(--content-max);
  margin: 0 auto;
}
.related-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: var(--space-md);
}
.related-list { list-style: none; }
.related-item {
  border-bottom: 1px solid var(--color-border);
  padding: 0.75rem 0;
}
.related-item a {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--color-text);
  text-decoration: none;
  transition: color 180ms ease-out;
}
.related-item a:hover { color: var(--color-accent); text-decoration: none; }

/* ================================================================
   SHORTCODE ELEMENTS
   ================================================================ */
/* num-highlight */
.num-highlight {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin: var(--space-xl) 0;
}
.num-cell {
  flex: 1;
  min-width: 120px;
  background: var(--color-bg-warm);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: var(--space-md) var(--space-lg);
  text-align: center;
}
.num-label {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  margin-bottom: 0.3em;
}
.num-value {
  font-family: var(--font-mono);
  font-weight: 400;
  font-size: 1.5rem;
  color: var(--color-accent);
  line-height: 1;
}
.num-unit {
  font-family: var(--font-ui);
  font-size: 0.78rem;
  color: var(--color-text-muted);
}
.num-note {
  font-family: var(--font-serif);
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25em;
}

/* skip-box */
.skip-box {
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 4px 4px 0;
  margin: var(--space-xl) 0;
  overflow: hidden;
}
.skip-box-header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--color-accent-light);
  padding: var(--space-sm) var(--space-md);
}
.skip-box-icon {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-accent);
}
.skip-box-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-accent);
}
.skip-box-body {
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-serif);
  font-size: 0.9rem;
  color: var(--color-text);
  line-height: 1.7;
}
.skip-box-body ul { padding-left: 1.2em; }
.skip-box-body li { margin-bottom: 0.25em; }

/* budget-table */
.budget-table-wrap {
  margin: var(--space-xl) 0;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  overflow: hidden;
}
.budget-table-head {
  background: var(--color-bg-warm);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
}
.budget-table-head-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--color-text);
}
.budget-table-head-sub {
  font-family: var(--font-ui);
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.budget-table-inner {
  padding: 0 var(--space-md);
}
.budget-table-inner table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-serif);
  font-size: 0.88rem;
}
.budget-table-inner th {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  padding: var(--space-sm) var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  text-align: left;
}
.budget-table-inner td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}
.budget-table-inner tr:last-child td { border-bottom: none; }

/* ================================================================
   PAGINATION
   ================================================================ */
.pagination {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-xl) 0;
}
.pagination a, .pagination span {
  font-family: var(--font-ui);
  font-size: 0.85rem;
  color: var(--color-text-muted);
  padding: 0.4em 0.8em;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  text-decoration: none;
  transition: all 180ms ease-out;
}
.pagination a:hover {
  color: var(--color-accent);
  border-color: var(--color-accent);
  text-decoration: none;
}
.pagination .current {
  color: var(--color-bg-white);
  background: var(--color-accent);
  border-color: var(--color-accent);
}

/* ================================================================
   SITE FOOTER
   ================================================================ */
.site-footer {
  background: var(--color-text);
  padding: var(--space-xl) 0;
  margin-top: var(--space-3xl);
}
.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
}
.footer-brand {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 0.88rem;
  color: rgba(255,255,255,0.85);
}
.footer-brand em {
  color: #6ECF9E;
  font-style: normal;
}
.footer-meta {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.45);
}
.footer-nav {
  display: flex;
  gap: var(--space-lg);
}
.footer-nav a {
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  transition: color 180ms ease-out;
}
.footer-nav a:hover { color: rgba(255,255,255,0.85); text-decoration: none; }

/* ================================================================
   404 PAGE
   ================================================================ */
.error-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--space-3xl) var(--space-xl);
}
.error-code {
  font-family: var(--font-mono);
  font-size: 5rem;
  color: var(--color-accent);
  line-height: 1;
  margin-bottom: var(--space-lg);
}
.error-title {
  font-family: var(--font-serif);
  font-weight: 700;
  font-size: 1.5rem;
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.error-desc {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 42ch;
  margin: 0 auto var(--space-xl);
}
.error-home {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-bg-white);
  background: var(--color-accent);
  padding: 0.6em 1.6em;
  border-radius: 3px;
  text-decoration: none;
  transition: background 180ms ease-out;
}
.error-home:hover {
  background: var(--color-accent-hover);
  text-decoration: none;
}

/* ================================================================
   SECTION EYEBROW
   ================================================================ */
.section-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--space-sm);
}

/* ================================================================
   RESPONSIVE — RWD breakpoints
   ================================================================ */
@media (max-width: 768px) {
  .container { padding: 0 var(--space-lg); }
  .hamburger { display: flex; }
  .site-nav { display: none; }

  .home-intro h1 { font-size: 1.5rem; }

  .topic-block-header { flex-direction: column; gap: var(--space-xs); }
  .topic-article-list {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .topic-article-item {
    padding: 0 0 var(--space-lg) 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
  }
  .topic-article-item:last-child {
    border-bottom: none;
    padding: 0;
  }
  .topic-article-item:nth-child(2) { padding-left: 0; }

  .category-page-layout { grid-template-columns: 1fr; }
  .category-aside { display: none; }

  .stat-bar-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-lg);
  }
  .stat-bar-numbers { gap: var(--space-lg); }
  .stat-bar-divider { display: none; }

  .about-snippet-inner {
    flex-direction: column;
    align-items: flex-start;
  }

  .article-title { font-size: 1.5rem; }

  .data-card-row {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .footer-inner { flex-direction: column; gap: var(--space-md); }
  .footer-nav { flex-wrap: wrap; gap: var(--space-md); }
}

@media (max-width: 640px) {
  .topic-article-item { padding-left: 0; }
}