/* ==================== 全局主題過渡效果 ==================== */

/* 統一的主題切換過渡時間 - 設為0實現即時切換 */
:root {
  --theme-transition-duration: 0s;
  --theme-transition-timing: ease-out;
}

/* 尊重用戶的減少動畫偏好 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --theme-transition-duration: 0s;
  }
  
  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}

/* === Issue #15: ordered Series and controlled Topic discovery === */
.discovery-index,
.series-page,
.topic-page {
  color: var(--text-primary);
  margin: 0 auto;
  max-width: 1120px;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) 4rem;
}

.discovery-header {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: clamp(2rem, 5vw, 4rem);
  padding-bottom: clamp(1.5rem, 4vw, 2.75rem);
}

.discovery-header h1 {
  color: var(--text-primary) !important;
  font-size: clamp(2.25rem, 7vw, 4.8rem) !important;
  letter-spacing: -0.04em;
  line-height: 1.02 !important;
  margin: 0.45rem 0 1rem !important;
  overflow-wrap: anywhere;
}

.discovery-header > p:not(.writing-eyebrow):not(.topic-area-label):not(.topic-aliases),
.series-directory-item > p,
.series-route-entry p,
.series-planned > p {
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 70ch;
}

.series-directory,
.series-route-map {
  display: grid;
  gap: 1rem;
}

.series-directory-item,
.series-route-entry,
.series-planned,
.topic-results {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  min-width: 0;
  padding: clamp(1.2rem, 3vw, 1.8rem);
}

.series-directory-item[data-series-state="published"] {
  border-left: 3px solid var(--primary-color);
}

.series-directory-meta,
.series-entry-meta {
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  gap: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.series-directory-item h2,
.series-route-entry h2,
.series-planned h2,
.topic-area h2,
.topic-results h2 {
  color: var(--text-primary) !important;
  margin: 0.65rem 0 !important;
}

.series-directory-item h2 a,
.series-route-entry h2 a,
.topic-directory-item,
.topic-series-list a,
.discovery-back a,
.series-project-link a,
.writing-eyebrow a {
  color: var(--text-primary) !important;
  overflow-wrap: anywhere;
  text-underline-offset: 0.18em;
}

.series-route-map {
  counter-reset: series-entry;
  list-style: none;
  margin: 0;
  padding: 0;
}

.series-route-entry {
  align-items: start;
  display: grid;
  gap: 1.25rem;
  grid-template-columns: 3rem minmax(0, 1fr);
}

.series-order {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 1rem;
  font-weight: 700;
  padding-top: 0.15rem;
}

.series-phase-list {
  display: grid;
  gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  margin: 1.25rem 0 0;
  padding-left: 1.35rem;
}

.series-project-link,
.topic-area-label,
.topic-aliases {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin: 1rem 0 0;
}

.topic-area,
.topic-results {
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}

.topic-directory {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.topic-directory-item {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 44px;
  padding: 1rem;
  text-decoration: none !important;
}

.topic-directory-item span {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.55;
}

.topic-directory-item:hover,
.topic-directory-item:focus-visible,
.series-directory-item h2 a:focus-visible,
.series-route-entry h2 a:focus-visible,
.topic-series-list a:focus-visible,
.discovery-back a:focus-visible,
.series-project-link a:focus-visible,
.writing-eyebrow a:focus-visible {
  border-color: var(--primary-color);
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

.topic-results .project-card-grid,
.topic-results .writing-card-list {
  margin-top: 1rem;
}

.topic-series-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.topic-series-list a {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  min-height: 44px;
  padding: 0.65rem 0.85rem;
}

.discovery-back {
  align-items: center;
  border-top: 1px solid var(--border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-between;
  margin: 3rem 0 0;
  padding-top: 1.25rem;
}

.discovery-back a {
  min-height: 44px;
  padding: 0.65rem 0;
}

@media (max-width: 700px) {
  .topic-directory {
    grid-template-columns: 1fr;
  }

  .series-route-entry {
    gap: 0.5rem;
    grid-template-columns: 1fr;
  }

  .series-order {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 0.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .discovery-index *,
  .series-page *,
  .topic-page * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* 可選：保留過渡模式（用戶可以通過添加此類別來啟用） */
.with-transitions {
  --theme-transition-duration: 0.2s !important;
}

/* 可選：更慢的過渡模式（用戶可以通過添加此類別來啟用） */
.slow-transitions {
  --theme-transition-duration: 0.3s !important;
}

/* 全局主題過渡 - 確保所有元素都有一致的過渡效果 */
*,
*::before,
*::after {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    backdrop-filter var(--theme-transition-duration) var(--theme-transition-timing),
    background var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* 強制統一所有主要容器的過渡效果 */
.email-subscription,
.email-subscription *,
.footer-contact-info,
.footer-contact-info *,
.contact-link,
.contact-link *,
.email-input-group,
.email-input-group *,
.about-subscription,
.about-subscription * {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    backdrop-filter var(--theme-transition-duration) var(--theme-transition-timing),
    background var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* 全局覆蓋：禁用所有較長的過渡時間，提升性能 */
* {
  transition-duration: 0s !important;
}

/* 僅保留很短的互動反饋效果 */
*:hover,
*:focus,
*:active {
  transition-duration: 0.05s !important;
}

/* 例外：保留技能條的動畫效果 */
.skill-progress {
  transition-duration: 2s !important;
}



/* 保留互動效果的極短過渡（hover、focus等） */
.interactive-transition {
  transition: transform 0.1s ease, opacity 0.1s ease !important;
}

/* 特殊動畫保持原有時間（如技能條） */
.skill-progress {
  transition: width 2s ease-in-out !important;
}

/* 確保頁面主體元素也有統一的過渡 */
html, body {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* 單頁應用容器的統一過渡 */
.homepage-container,
.all-posts-container,
.single-post {
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

/* ==================== 固定狀態欄樣式 ==================== */
.fixed-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: var(--bg-color);
  border-bottom: 2px solid var(--primary-color);
  z-index: 1000;
  padding: 0;
  box-shadow: var(--shadow-md);
}

.fixed-navbar .flex-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  min-height: 44px;
}

.fixed-navbar .nav-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 36px;
}

/* 主題切換按鈕 */
.theme-toggle {
  background: none;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.1s ease !important;
  padding: 0;
  color: var(--text-primary);
}

.theme-toggle:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
  transform: scale(1.1);
}

.theme-toggle svg {
  width: 18px;
  height: 18px;
  transition: transform 0.3s ease;
}

.theme-toggle:hover svg {
  transform: rotate(180deg);
}

.fixed-navbar .logo {
  margin: 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.fixed-navbar .logo-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.fixed-navbar .logo-link:hover {
  color: var(--primary-color);
}

.fixed-navbar .nav-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
  transition: transform 0.3s ease;
  transform: translateY(-6px);
}

.fixed-navbar .nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fixed-navbar .logo-link:hover .nav-avatar {
  transform: translateY(-6px) scale(1.1);
}

.fixed-navbar .logo-text {
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 36px;
  transform: translateY(-8px);
}

.fixed-navbar .nav-avatar-fallback {
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.fixed-navbar .nav-avatar-fallback svg {
  width: 24px;
  height: 24px;
  color: var(--text-inverse);
}

.fixed-navbar ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
  align-items: center;
  justify-content: center;
  height: 36px;
}

.fixed-navbar li {
  margin: 0 10px;
  display: flex;
  align-items: center;
  height: 36px;
}

.fixed-navbar a {
  color: var(--text-primary);
  text-decoration: none !important;
  padding: 8px 14px;
  border-radius: 4px;
  transition: 
    color var(--theme-transition-duration) var(--theme-transition-timing),
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  font-weight: 500;
  line-height: 1.2;
  display: flex;
  align-items: center;
  height: 36px;
  box-sizing: border-box;
  transform: translateY(8px);
  border-bottom: none !important;
}

.fixed-navbar a:hover {
  color: var(--primary-color);
  transform: translateY(4px);
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 活動狀態樣式 */
.fixed-navbar a.active {
  color: var(--primary-color);
  text-decoration: none !important;
  border-bottom: none !important;
}

/* 深色模式下導航文字強制為白色 */
:root[data-theme="dark"] .fixed-navbar a {
  color: #ffffff !important;
}

:root[data-theme="dark"] .fixed-navbar a:hover {
  color: #ffffff !important;
}

:root[data-theme="dark"] .fixed-navbar a.active {
  color: #ffffff !important;
}

:root[data-theme="dark"] .fixed-navbar .logo-text {
  color: #ffffff !important;
}

/* 確保主要內容不被固定導航欄遮擋 */
body {
  padding-top: 64px;
  margin: 0;
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}

/* 修復暗色模式下導航欄與主頁面之間的空隙 */
:root[data-theme="dark"] html {
  background-color: #1a1a1a !important;
}

:root[data-theme="dark"] body {
  background-color: #1a1a1a !important;
}

/* 確保手機版暗色模式也使用正確的背景色 */
@media (max-width: 768px) {
  :root[data-theme="dark"] html {
    background-color: #1a1a1a !important;
  }

  :root[data-theme="dark"] body {
    background-color: #1a1a1a !important;
  }
}

/* 響應式設計 - 只適用於電腦版導航欄 */
@media (max-width: 768px) {
  .desktop-navbar .flex-container {
    flex-direction: column;
    padding: 10px 15px;
  }
  
  .desktop-navbar ul {
    margin-top: 10px;
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .desktop-navbar li {
    margin: 5px;
  }
  
  .desktop-navbar a {
    padding: 6px 12px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .desktop-navbar .logo {
    font-size: 1.2rem;
  }
  
  .desktop-navbar .logo-text {
    display: none;
  }
  
  .desktop-navbar .nav-avatar {
    width: 36px;
    height: 36px;
  }
  
  .desktop-navbar a {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

/* 滾動效果 */
.fixed-navbar.scrolled {
  background-color: var(--bg-secondary);
  backdrop-filter: blur(10px);
}

/* 暗色模式下導航欄永遠使用深灰色背景 */
:root[data-theme="dark"] .fixed-navbar {
  background-color: var(--bg-secondary) !important;
}

:root[data-theme="dark"] .fixed-navbar.scrolled {
  background-color: var(--bg-secondary) !important;
}

/* 動畫效果 - 已禁用以提升性能 */
.fixed-navbar {
  /* animation: slideDown 0.5s ease-out; */
}

@keyframes slideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* ==================== 首頁樣式 ==================== */

.homepage-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  background-color: var(--bg-secondary) !important;
  min-height: 100vh;
}

/* 歡迎區塊 */
.hero-section {
  text-align: center;
  padding: 4rem 0;
  background: var(--bg-color);
  color: var(--text-primary);
  margin: -20px -20px 3rem -20px;
  border-radius: 0 0 20px 20px;
}

.hero-content h1 {
  font-size: 3rem;
  font-weight: 700;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.hero-content p {
  font-size: 1.2rem;
  opacity: 0.9;
  max-width: 600px;
  margin: 0 auto;
}

/* 區塊標題 */
.section-title {
  font-size: 2rem;
  font-weight: 600;
  margin-bottom: 2rem;
  text-align: center;
  color: var(--text-primary);
  position: relative;
}

.section-title::after {
  content: '';
  display: block;
  width: 50px;
  height: 3px;
  background: var(--primary-color);
  margin: 10px auto;
  border-radius: 2px;
}

/* 文章網格 */
.posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 50rem; /* 原 3rem，增加下方空隙 */
}

/* 文章卡片 */
.post-card {
  background: var(--bg-tertiary);
  border-radius: 12px;
  box-shadow: none;
  overflow: hidden;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.3s ease !important;
}

.post-card:hover {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* 文章圖片 */
.post-image {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.post-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.post-card:hover .post-image img {
  transform: scale(1.05);
}

.post-image-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, #f3f4f6, #e5e7eb);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
}

.post-image-placeholder svg {
  width: 60px;
  height: 60px;
}

/* 文章內容 */
.post-content {
  padding: 1.5rem;
}

/* 文章元資訊 */
.post-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 0.875rem;
}

.post-category {
  background: var(--primary-color);
  color: var(--text-inverse);
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-weight: 500;
  font-size: 0.75rem;
}

.post-date {
  color: var(--text-secondary);
  font-weight: 500;
}

/* 文章標題 */
.post-title {
  margin-bottom: 1rem;
  font-size: 1.25rem;
  line-height: 1.4;
}

.post-title a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--theme-transition-duration) var(--theme-transition-timing);
}

.post-title a:hover {
  color: var(--primary-color);
}

/* 文章摘要 */
.post-summary {
  color: var(--text-secondary);
  line-height: 1.6;
  margin-bottom: 1rem;
}

/* 標籤 */
.post-tags {
  margin-bottom: 1rem;
}

.tag {
  display: inline-block;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  font-size: 0.75rem;
  margin-right: 0.5rem;
  margin-bottom: 0.25rem;
}

/* 亮色模式下的標籤樣式 - 白色背景和漂亮邊框 */
:root[data-theme="light"] .tag {
  background: #ffffff !important;
  color: #4a5568 !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="light"] .tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* 暗色模式下保持原樣但添加邊框 */
:root[data-theme="dark"] .tag {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 2px solid #4a5568 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="dark"] .tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.3) !important;
  transform: translateY(-1px) !important;
}

/* 文章頁腳 */
.post-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--border-color);
  padding-top: 1rem;
}

.post-author {
  color: var(--text-secondary);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.reading-time {
  color: var(--text-secondary);
  font-size: 0.8rem;
  font-weight: 400;
}

.read-more {
  color: #007acc;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.875rem;
  transition: color 0.3s ease;
}

.read-more:hover {
  color: #0056b3;
}

/* 按鈕樣式 */
.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 12px 24px;
  /* 移除圓角 */
  text-decoration: none;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-primary {
  background: #007acc;
  color: white;
}

.btn-primary:hover {
  background: #0056b3;
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: #007acc;
  border: 2px solid #007acc;
}

.btn-secondary:hover {
  background: #007acc;
  color: white;
}

/* 查看所有文章區塊 */
.view-all-posts {
  text-align: center;
  margin: 3rem 0;
}

/* 關於我預覽 */
.about-preview {
  background: var(--bg-tertiary);
  padding: 3rem 2rem;
  margin: 3rem 0;
  text-align: center;
  border-radius: 12px;
}

.about-content h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-primary);
}

.about-content p {
  font-size: 1.1rem;
  color: var(--text-secondary);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* 響應式設計 */
@media (max-width: 768px) {
  .homepage-container {
    padding: 0 15px;
  }
  
  .hero-content h1 {
    font-size: 2rem;
  }
  
  .hero-content p {
    font-size: 1rem;
  }
  
  .posts-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .post-content {
    padding: 1rem;
  }
  
  .hero-section {
    padding: 2rem 0;
    margin: -15px -15px 2rem -15px;
  }
}

@media (max-width: 480px) {
  .post-card {
    margin: 0 -5px;
  }
  
  .post-meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  
  .post-footer {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
}

/* ==================== 所有文章時間線基本樣式 ==================== */

.all-posts-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 2rem;
  min-height: 100vh;
}

.all-posts-header {
  text-align: center;
  margin-bottom: 3rem;
}

.all-posts-title {
  font-size: 2.5rem;
  font-weight: 700;
  margin-bottom: 1rem;
  position: relative;
}

.all-posts-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 4px;
  margin: 15px auto;
  border-radius: 2px;
}

.all-posts-description {
  font-size: 1.1rem;
  max-width: 600px;
  margin: 0 auto;
  text-align: left !important;
}

/* 確保all-posts-description中的內容左對齊 */
.all-posts-description h2 {
  text-align: left !important;
}

/* 時間線容器 */
.timeline-container {
  position: relative !important;
  padding-left: 120px !important;
}

/* 主時間線 */
.timeline-container::before {
  content: '' !important;
  position: absolute !important;
  left: 60px !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 4px !important;
  background: linear-gradient(180deg, 
    var(--primary-color) 0%, 
    var(--border-color) 100%) !important;
  border-radius: 2px !important;
}

/* 年份區塊 */
.timeline-year-section {
  margin-bottom: 2rem;
  position: relative;
}

.timeline-year-header {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 1.2rem;
}

.timeline-year-dot {
  position: absolute !important;
  left: -68px !important;
  width: 20px !important;
  height: 20px !important;
  background: var(--primary-color) !important;
  border: 4px solid var(--bg-color) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 0 4px var(--primary-color) !important;
  z-index: 2 !important;
}

.timeline-year {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 1rem 0 0;
}

.timeline-year-count {
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
}

/* 文章卡片 */
.timeline-posts {
  margin-left: -40px;
}

.timeline-post-card {
  position: relative !important;
  background: transparent !important;
  margin-bottom: 1.5rem !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: none !important;
  border-bottom: 1px solid transparent !important;
  border-image: linear-gradient(to right, transparent 10%, rgba(107, 114, 128, 0.5) 20%, rgba(107, 114, 128, 0.5) 80%, transparent 90%) 1 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  overflow: visible !important;
  padding-bottom: 0rem !important;
}

/* 最後一篇文章移除分隔線 */
.timeline-post-card:last-child {
  border-bottom: none !important;
  border-image: none !important;
}

.timeline-post-card:hover {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

.timeline-post-main:hover {
  transform: translateX(5px) !important;
  transition: all 0.3s ease !important;
}

.timeline-post-thumbnail:hover {
  transform: scale(1.02) !important;
  transition: all 0.3s ease !important;
}

/* 覆蓋theme.css中的邊框設定 */
:root[data-theme="light"] .timeline-post-card {
  border: none !important;
  background: #ffffff !important;
}

:root[data-theme="dark"] .timeline-post-card {
  border: none !important;
  background: var(--bg-secondary) !important;
}

:root[data-theme="light"] .timeline-post-card:hover {
  border: none !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

:root[data-theme="dark"] .timeline-post-card:hover {
  border: none !important;
  background: var(--bg-secondary) !important;
  box-shadow: none !important;
}

/* 隱藏小圓點連接線 */
.timeline-post-connector {
  display: none !important;
}

/* 文章內容布局 */
.timeline-post-content {
  display: grid !important;
  grid-template-columns: 80px 1fr 140px !important;
  gap: 1.2rem !important;
  padding: 0 !important;
  align-items: flex-start !important;
  min-height: 100px !important;
}

/* 日期顯示 - 與時間線整合 */
.timeline-post-date {
  text-align: center;
  font-weight: 600;
  opacity: 0.8;
  color: var(--text-secondary);
  padding: 0;
  transition: all 0.3s ease;
}

.timeline-post-date .month {
  display: block;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--text-tertiary);
  margin-bottom: 0.2rem;
}

.timeline-post-date .day {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
}

/* 文章主要內容 */
.timeline-post-main {
  min-height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0.5rem !important;
}

.timeline-post-title {
  margin: 0 0 0.5rem 0 !important;
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  line-height: 1.3 !important;
  max-height: 3.25rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2 !important;
  -webkit-box-orient: vertical !important;
}

.timeline-post-title a {
  text-decoration: none !important;
  transition: color 0.3s ease !important;
  color: var(--text-primary) !important;
}

.timeline-post-title a:hover {
  color: var(--primary-color) !important;
}

.timeline-post-summary {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  margin: 0 0 0.5rem 0 !important;
  color: var(--text-secondary) !important;
  max-height: 4.2rem !important;
  overflow: hidden !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 3 !important;
  -webkit-box-orient: vertical !important;
}

.timeline-post-meta {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  flex-wrap: wrap !important;
  font-size: 0.875rem !important;
}

.timeline-post-category {
  padding: 0.25rem 0.75rem !important;
  border-radius: 20px !important;
  font-weight: 500 !important;
  font-size: 0.75rem !important;
  background: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

.timeline-post-tags {
  display: flex !important;
  gap: 0.5rem !important;
  flex-wrap: wrap !important;
}

.timeline-tag {
  padding: 0.2rem 0.5rem !important;
  border-radius: 4px !important;
  font-size: 0.75rem !important;
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
}

/* 亮色模式下的時間軸標籤樣式 - 白色背景和漂亮邊框 */
:root[data-theme="light"] .timeline-tag {
  background: #ffffff !important;
  color: #4a5568 !important;
  border: 2px solid #e2e8f0 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="light"] .timeline-tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.2) !important;
  transform: translateY(-1px) !important;
}

/* 暗色模式下的時間軸標籤樣式 */
:root[data-theme="dark"] .timeline-tag {
  background: var(--bg-tertiary) !important;
  color: var(--text-secondary) !important;
  border: 2px solid #4a5568 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    box-shadow var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
}

:root[data-theme="dark"] .timeline-tag:hover {
  border-color: #007bcc !important;
  box-shadow: 0 4px 8px rgba(0, 123, 204, 0.3) !important;
  transform: translateY(-1px) !important;
}

.timeline-post-reading-time {
  font-weight: 500 !important;
  color: var(--text-tertiary) !important;
}

/* 文章縮圖 */
.timeline-post-thumbnail {
  width: 120px !important;
  height: 120px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  flex-shrink: 0 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.3s ease !important;
}

.timeline-post-thumbnail img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  transition: transform 0.3s ease !important;
}

.timeline-post-card:hover .timeline-post-thumbnail img {
  transform: scale(1.1) !important;
}

.timeline-post-thumbnail-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(45deg, var(--bg-tertiary), var(--border-color)) !important;
  color: var(--text-tertiary) !important;
  transition: 
    background var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing) !important;
}

.timeline-post-thumbnail-placeholder svg {
  width: 40px;
  height: 40px;
}

/* 箭頭指示器 */
.timeline-post-arrow {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.3s ease;
  opacity: 0;
}

.timeline-post-card:hover .timeline-post-arrow {
  opacity: 1;
  transform: translateY(-50%) translateX(5px);
}

.timeline-post-arrow svg {
  width: 24px;
  height: 24px;
}

/* 沒有文章時的訊息 */
.no-posts-message {
  text-align: center;
  padding: 4rem 2rem;
  font-size: 1.1rem;
}



/* 時間線響應式 */
@media (max-width: 768px) {
  .all-posts-container {
    padding: 1rem 0.5rem;
  }
  
  .timeline-container {
    padding-left: 50px;
  }
  
  .timeline-container::before {
    left: 25px;
  }
  
  .timeline-year-dot {
    left: -33px;
    width: 16px;
    height: 16px;
  }
  
  .timeline-year {
    font-size: 1.5rem;
  }
  
  .timeline-posts {
    margin-left: -10px;
  }
  
  .timeline-post-connector {
    left: -8px;
  }
  
  .timeline-post-content {
    grid-template-columns: 1fr;
    gap: 1rem;
    padding: 0 !important;
    margin-bottom: 0rem !important;
  }
  
  .timeline-post-thumbnail {
    width: 80px;
    height: 80px;
    margin: 0 auto;
    transition: 
      background-color var(--theme-transition-duration) var(--theme-transition-timing),
      border-color var(--theme-transition-duration) var(--theme-transition-timing),
      transform 0.3s ease !important;
  }
  
  .timeline-post-meta {
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .all-posts-container {
    padding: 1rem 0.3rem;
  }
  
  .timeline-container {
    padding-left: 35px;
  }
  
  .timeline-container::before {
    left: 18px;
  }
  
  .timeline-year-dot {
    left: -26px;
    width: 12px;
    height: 12px;
  }
  
  .timeline-post-connector {
    left: -3px;
    width: 8px;
    height: 8px;
  }
  
  .timeline-posts {
    margin-left: -5px;
  }
  
  .all-posts-title {
    font-size: 2rem;
  }
  
  .timeline-post-content {
    padding: 0 !important;
    margin-bottom: 0rem !important;
  }
}

/* ==================== 單篇文章基本樣式 ==================== */

.single-post {
  max-width: 800px !important;
  margin: 0 auto !important;
  padding: 2rem !important;
  color: var(--text-primary) !important;
  min-height: 100vh !important;
  border-radius: 12px !important;
}

/* 亮色模式：純白色背景 */
:root[data-theme="light"] .single-post {
  background: #ffffff !important;
}

/* 暗色模式：深灰色背景 */
:root[data-theme="dark"] .single-post {
  background: #1a1a1a !important;
}

/* 封面圖片樣式 */
.post-cover-image {
  margin: -2rem -2rem 2rem -20px !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.post-cover-image img {
  width: 100% !important;
  height: 300px !important;
  object-fit: cover !important;
  display: block !important;
}

.post-header {
  padding-bottom: 2rem !important;
  margin-bottom: 2rem !important;
}

.post-meta-single {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
  font-size: 0.875rem !important;
  color: var(--text-secondary) !important;
}

.post-title-single {
  font-size: 2.5rem !important;
  font-weight: 700 !important;
  margin-bottom: 1rem !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
}

.post-description {
  font-size: 1.2rem !important;
  margin-bottom: 1rem !important;
  font-style: italic !important;
  color: var(--text-secondary) !important;
}

.post-author-info {
  display: flex !important;
  align-items: center !important;
  gap: 1rem !important;
  font-size: 0.875rem !important;
  color: var(--text-secondary) !important;
}

.post-content-single {
  font-size: 1.1rem !important;
  line-height: 1.8 !important;
  color: var(--text-primary) !important;
}

.post-content-single h1 {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  margin: 2.5rem 0 1.5rem 0 !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H1 */
@media (max-width: 768px) {
  .post-content-single h1 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single h2 {
  font-size: 1.8rem !important;
  font-weight: 600 !important;
  margin: 2rem 0 1rem 0 !important;
  padding-bottom: 0.5rem !important;
  border-bottom: 2px solid var(--primary-color) !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H2 */
@media (max-width: 768px) {
  .post-content-single h2 {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single h3 {
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  margin: 1.5rem 0 1rem 0 !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H3 */
@media (max-width: 768px) {
  .post-content-single h3 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single h4 {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 1.5rem 0 1rem 0 !important;
  color: var(--text-primary) !important;
}

/* 手機版覆蓋文章標題H4 */
@media (max-width: 768px) {
  .post-content-single h4 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
}

.post-content-single p {
  margin-bottom: 1.5rem !important;
  color: var(--text-primary) !important;
}

.post-content-single ul, 
.post-content-single ol {
  margin-bottom: 1.5rem !important;
  padding-left: 2rem !important;
  color: var(--text-primary) !important;
}

.post-content-single li {
  margin-bottom: 0.5rem !important;
  color: var(--text-primary) !important;
}

.post-content-single blockquote {
  border-left: 4px solid var(--primary-color) !important;
  padding: 1rem 2rem !important;
  margin: 2rem 0 !important;
  background: var(--bg-tertiary) !important;
  border-radius: 0 8px 8px 0 !important;
  font-style: italic !important;
  color: var(--text-primary) !important;
}

.post-content-single code {
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-family: 'Courier New', monospace !important;
  font-size: 1.05em !important;
  background: var(--code-bg) !important;
  color: var(--code-text) !important;
}

.post-content-single pre {
  padding: 1.5rem !important;
  border-radius: 8px !important;
  overflow-x: auto !important;
  margin: 1.5rem 0 !important;
  background: var(--code-bg) !important;
  color: var(--code-text) !important;
  font-size: 1.05em !important;
}

.post-content-single pre code {
  background: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* 強制覆蓋暗色主題下的代碼區塊背景色為 #1a1a1a - 排除Mermaid */
:root[data-theme="dark"] .post-content-single code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
:root[data-theme="dark"] code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="dark"] pre:not(.mermaid-container pre):not(.mermaid) {
  background: #1a1a1a !important;
  border: 1px solid #4a4a4a !important;
}

:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code,
:root[data-theme="dark"] pre:not(.mermaid-container pre):not(.mermaid) code {
  background: none !important;
  border: none !important;
}

/* 亮色主題下的代碼區塊邊框 - 排除Mermaid */
:root[data-theme="light"] .post-content-single code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
:root[data-theme="light"] code:not(.mermaid-container code):not(.mermaid),
:root[data-theme="light"] pre:not(.mermaid-container pre):not(.mermaid) {
  border: none !important;
}

:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code,
:root[data-theme="light"] pre:not(.mermaid-container pre):not(.mermaid) code {
  border: none !important;
}

.post-content-single img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 2rem auto !important;
}

.post-tags-single {
  margin: 2rem 0 !important;
  padding: 1.5rem !important;
  border-radius: 8px !important;
  background: var(--bg-tertiary) !important;
}

.post-tags-single h3 {
  margin: 0 0 1rem 0 !important;
  font-size: 1.1rem !important;
  color: var(--text-primary) !important;
}

.tags-list {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.5rem !important;
}

.post-navigation {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  gap: 1rem !important;
  margin-top: 3rem !important;
  padding-top: 2rem !important;
  border-top: 2px solid var(--border-color) !important;
}

.nav-prev {
  text-align: left !important;
}

.nav-all-posts {
  text-align: center !important;
  padding: 0.75rem 1.5rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  background: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

.nav-all-posts:hover {
  background: var(--primary-hover) !important;
}

.nav-next {
  text-align: right !important;
}

.nav-prev, .nav-next {
  text-decoration: none !important;
  font-weight: 500 !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--primary-color) !important;
  border-radius: 6px !important;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  color: var(--primary-color) !important;
}

.nav-prev:hover, .nav-next:hover {
  background: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

/* 單篇文章響應式 */
@media (max-width: 768px) {
  .single-post {
    margin: 0 15px !important;
    padding: 1.5rem !important;
  }
  
  .post-title-single {
    font-size: 2rem !important;
  }
  
  .post-navigation {
    grid-template-columns: 1fr !important;
    text-align: center !important;
  }
  
  .nav-prev, .nav-next {
    margin-bottom: 1rem !important;
  }
}

/* 版權信息樣式 */
.copyright-footer {
  position: relative;
  text-align: center;
  padding: 20px 20px 20px 20px;
  margin-top: 40px;
}

.copyright-footer::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 60%;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--text-secondary) 20%, var(--text-secondary) 80%, transparent);
  opacity: 0.5;
}

.copyright-footer p {
  font-size: 0.75rem;
  color: var(--text-secondary);
  margin: 0;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.copyright-footer:hover p {
  opacity: 1;
}

/* 響應式調整 */
@media (max-width: 768px) {
  .copyright-footer {
    padding: 15px 15px 15px 15px;
    margin-top: 30px;
  }

  .copyright-footer::before {
    top: -15px;
    width: 70%;
  }
  
  .copyright-footer p {
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .copyright-footer {
    padding: 10px 10px 10px 10px;
    margin-top: 20px;
  }

  .copyright-footer::before {
    top: -10px;
    width: 80%;
  }
  
  .copyright-footer p {
    font-size: 0.65rem;
  }
}

/* ==================== 簡化技能區塊樣式 ==================== */

.skills-section {
  margin: 2rem 0;
  background: var(--bg-secondary);
  border-radius: 12px;
  padding: 2rem;
}

/* 亮色主題下使用全白背景 */
:root[data-theme="light"] .skills-section {
  background: #ffffff !important;
}

.skills-text-section {
  margin-bottom: 2rem;
}

.skills-text-section h4 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 1rem;
  text-align: center;
}

.skills-bars-section {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.skill-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.skill-info {
  display: flex;
  align-items: center;
}

.skill-name {
  font-weight: 500;
  color: var(--text-primary);
}

.skill-bar {
  width: 100%;
  height: 8px;
  background: var(--bg-tertiary);
  border-radius: 4px;
  overflow: hidden;
}

.skill-progress {
  height: 100%;
  background: var(--primary-color);
  border-radius: 4px;
  transition: width 1.5s ease-out;
}

@media (max-width: 768px) {
  .skills-section {
    padding: 1.5rem;
    margin: 1.5rem 0;
  }
  
  .skill-name {
    font-size: 0.9rem;
  }
  
  .skills-bars-section {
    gap: 1.2rem;
  }
}

/* ==================== About頁面響應式設計 ==================== */

/* 平板和手機響應式設計 */
@media (max-width: 768px) {
  .about-intro-section {
    flex-direction: column !important;
    gap: 2rem !important;
  }
  
  .about-sidebar {
    width: 100% !important;
    text-align: center;
  }
  
  .profile-image {
    width: 200px !important;
    height: 200px !important;
  }
  
  .contact-info {
    max-width: 400px;
    margin: 0 auto;
  }
}

/* 小手機響應式設計 */
@media (max-width: 480px) {
  .about-intro-section {
    gap: 1.5rem !important;
  }
  
  .profile-image {
    width: 150px !important;
    height: 150px !important;
  }
  
  .contact-info {
    padding: 1rem !important;
  }
  
  .about-main-title {
    font-size: 1.5rem !important;
  }
}

/* Email 訂閱區塊樣式 */
.email-subscription {
  background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
  padding: 1.5rem 2rem;
  margin: 1.5rem 0 1rem;
  border-radius: 16px;
  text-align: center;
}

/* 雙欄底部容器 */
.footer-dual-container {
  display: flex;
  gap: 1rem;
  margin: 1rem 0;
  justify-content: flex-end;
  align-items: flex-start;
  background: #1A1A1A !important; /* 深色背景 */
  padding: 2rem 1rem 1rem;
  border-radius: 0;
}

/* 亮色模式下的主頁底部區塊 */
:root[data-theme="light"] .footer-dual-container {
  background: #ffffff !important; /* 白色背景 */
}

/* 非about頁面的訂閱區塊 - 小尺寸左側 */
.email-subscription.with-separator {
  padding: 1.5rem 1rem;
  margin: 0;
  border-radius: 12px;
  max-width: 480px;
  flex: 1;
  margin-left: auto;
  margin-right: 10rem;
}

.email-subscription.with-separator p {
  font-size: 1rem;
  margin: 0 0 1rem;
}

.email-subscription.with-separator .email-input-group {
  max-width: 100%;
  gap: 0.5rem;
  min-width: 400px;
}

.email-subscription.with-separator .email-input-group input {
  padding: 0.75rem 0.875rem;
  font-size: 0.9rem;
}

.email-subscription.with-separator .email-input-group button {
  padding: 0.3rem 0.8rem !important; /* 縮小上下左右內距 */
  font-size: 0.8rem !important;   /* 字體略小 */
}

/* 底部聯絡資訊區塊 */
.footer-contact-info {
  background: linear-gradient(135deg, var(--secondary-color) 0%, var(--primary-color) 100%);
  padding: 1.2rem 1rem;
  border-radius: 12px;
  max-width: 300px;
  flex: 0 0 240px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.contact-link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  color: white;
  text-decoration: none;
  font-size: 0.9rem;
  padding: 0.75rem;
  border-radius: 50%;
  transform: translateY(0);
  width: 44px;
  height: 44px;
  background: #3a3a3a !important; /* 暗色模式：比1A1A1A淺的灰色背景 */
}

.contact-link:hover {
  background: #4a4a4a !important; /* hover時更淺 */
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.contact-link svg {
  fill: #007bcc !important; /* 藍色圖標 */
}

.contact-link svg path {
  fill: #007bcc !important; /* 藍色圖標 */
}

/* 暗色模式下全局樣式 */
:root[data-theme="dark"] .contact-link {
  background: #3a3a3a !important; /* 比1A1A1A淺的灰色背景 */
  color: white !important;
}

:root[data-theme="dark"] .contact-link:hover {
  background: #4a4a4a !important; /* hover時更淺 */
  color: white !important;
}

:root[data-theme="dark"] .contact-link svg {
  fill: #007bcc !important; /* 藍色圖標 */
}

:root[data-theme="dark"] .contact-link svg path {
  fill: #007bcc !important; /* 藍色圖標 */
}

/* 亮色模式下全局樣式 */
:root[data-theme="light"] .contact-link {
  background: #ffffff !important; /* 純白色背景 */
  color: black !important;
  border: 1px solid #e5e5e5 !important; /* 添加淺灰色邊框以便識別 */
}

:root[data-theme="light"] .contact-link:hover {
  background: #f5f5f5 !important; /* hover時淺灰色 */
  color: black !important;
}

:root[data-theme="light"] .contact-link svg {
  fill: #007bcc !important; /* 藍色圖標 */
}

:root[data-theme="light"] .contact-link svg path {
  fill: #007bcc !important; /* 藍色圖標 */
}

/* 主頁底部的contact-link已由全局樣式處理 */

/* 隱藏非about頁面聯絡資訊的文字 */
.contact-link .contact-text {
  display: none;
}

/* 社交媒體圖標容器 */
.contact-social-icons {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 0.75rem;
}

/* 電子郵箱文字樣式 */
.contact-email-text {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  gap: 0.15rem;
  max-width: 100%;
  opacity: 0.9;
  overflow-wrap: anywhere;
  text-align: center;
  width: 100%;
  word-break: normal;
}

.contact-email-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  line-height: 1.3;
}

.contact-email-text a {
  align-items: center;
  color: inherit !important;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 600;
  justify-content: center;
  min-height: 44px;
  overflow-wrap: anywhere;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
  word-break: normal;
}

.contact-email-text a:focus-visible {
  border-radius: 2px;
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}



.contact-links svg {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* 暗色模式下的郵件訂閱區塊 */
:root[data-theme="dark"] .email-subscription {
  background: #1a1a1a;
}

:root[data-theme="dark"] .email-subscription p {
  color: rgba(255, 255, 255, 0.7) !important;
}

/* 暗色模式下的底部聯絡資訊 */
:root[data-theme="dark"] .footer-contact-info {
  background: #1a1a1a;
}

/* 其他頁面的訂閱區塊 - 帶分隔線 */
.email-subscription.with-separator {
  position: relative;
  border: none !important; /* 移除邊框 */
  background: #1A1A1A !important; /* 深色背景 */
}

/* 亮色模式下的主頁 Stay Updated 區塊 */
:root[data-theme="light"] .email-subscription.with-separator {
  background: #ffffff !important; /* 白色背景 */
}

/* About頁面的訂閱區塊 */
.about-subscription {
  margin: 1rem 0 0;
  padding: 0.5rem 0.5rem;
  max-width: 280px;
  width: 100%;
}

/* About頁面的email輸入組 - 垂直布局 */
.about-subscription .email-input-group {
  flex-direction: column;
  gap: 1rem;
  max-width: 100%;
}

.about-subscription .email-input-group input {
  width: 100%;
}

.about-subscription .email-input-group button {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
}

.subscription-container {
  max-width: 500px;
  margin: 0 auto;
}

.email-subscription h3 {
  color: white;
  font-size: 1.8rem;
  margin: 0 0 0.3rem;
  font-weight: 600;
}

.email-subscription p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 1.1rem;
  margin: 0 0 1.2rem;
  line-height: 1.6;
}

.subscription-form {
  margin-bottom: 0.5rem;
}

.email-input-group {
  display: flex;
  gap: 0.5rem;
  max-width: 500px;
  margin: 0 auto;
}

.email-input-group input {
  flex: 1;
  padding: 0.875rem 1rem;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  background: white;
  color: var(--text-primary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.email-input-group input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.email-input-group button {
  padding: 0.875rem 1.5rem;
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-color);
  border: 2px solid rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transform: translateY(0);
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.email-input-group button:hover {
  background: white;
  color: var(--primary-color);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  border-color: white;
}

/* 暗色模式下的按鈕樣式 */
:root[data-theme="dark"] .email-input-group button {
  background: rgba(255, 255, 255, 0.15);
  color: white;
  border-color: rgba(255, 255, 255, 0.3);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

:root[data-theme="dark"] .email-input-group button:hover {
  background: rgba(255, 255, 255, 0.25);
  color: white;
  border-color: rgba(255, 255, 255, 0.5);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* 暗色模式下的輸入框樣式 */
:root[data-theme="dark"] .email-input-group input {
  background: rgba(255, 255, 255, 0.1);
  color: white;
  border: 1px solid rgba(255, 255, 255, 0.2);
}

:root[data-theme="dark"] .email-input-group input:focus {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.4);
}

:root[data-theme="dark"] .email-input-group input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

/* 郵件訂閱輸入框狀態樣式 */
.email-input-success {
  background-color: #d4edda !important;
  color: #155724 !important;
  border: 2px solid #28a745 !important;
}

.email-input-success::placeholder {
  color: #155724 !important;
  font-weight: 500;
}

.email-input-error {
  background-color: #f8d7da !important;
  color: #721c24 !important;
  border: 2px solid #dc3545 !important;
}

.email-input-error::placeholder {
  color: #721c24 !important;
  font-weight: 500;
}

/* 深色模式下的輸入框狀態樣式 */
:root[data-theme="dark"] .email-input-success {
  background-color: rgba(40, 167, 69, 0.15) !important;
  color: #9fdb9f !important;
  border: 2px solid #28a745 !important;
}

:root[data-theme="dark"] .email-input-success::placeholder {
  color: #9fdb9f !important;
}

:root[data-theme="dark"] .email-input-error {
  background-color: rgba(220, 53, 69, 0.15) !important;
  color: #f8a5aa !important;
  border: 2px solid #dc3545 !important;
}

:root[data-theme="dark"] .email-input-error::placeholder {
  color: #f8a5aa !important;
}

  /* 響應式設計 - Email訂閱 */
@media (max-width: 768px) {
  .email-subscription {
    padding: 1.2rem 1rem;
    margin: 1rem auto 0.5rem auto;
    text-align: center;
  }

  .email-subscription h3 {
    font-size: 1.5rem;
  }

  .email-subscription p {
    font-size: 1rem;
  }

  .email-input-group {
    flex-direction: row;
    max-width: 320px;
    margin: 0 auto;
    width: 95%;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: center;
  }

  .email-input-group input {
    flex: 4;
    text-align: center;
    padding: 0.8rem 1rem;
    min-width: 0;
  }

  .email-input-group button {
    flex: 1;
    padding: 0.8rem 0.3rem;
    white-space: nowrap;
    min-width: 50px;
    max-width: 65px;
    font-size: 0.9rem;
  }

  /* About頁面的訂閱區塊響應式 */
  .about-subscription {
    max-width: 100%;
    padding: 1.5rem 1rem;
    margin: 0 auto;
    text-align: center;
  }

  .about-subscription h3 {
    font-size: 1.3rem;
  }

  .about-subscription p {
    font-size: 0.9rem;
  }

  .about-subscription .email-input-group {
    max-width: 100%;
  }

  /* 響應式設計 - 雙欄底部 */
  .footer-dual-container {
    flex-direction: column;
    gap: 1.5rem;
  }

  .email-subscription.with-separator {
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  
  .email-subscription.with-separator .email-input-group {
    min-width: auto;
  }

  .footer-contact-info {
    max-width: 100%;
  }
  
  .contact-links {
    gap: 0.75rem;
  }
  
  .contact-social-icons {
    gap: 0.75rem;
    margin-bottom: 0.5rem;
  }
  
  .contact-link {
    width: 40px;
    height: 40px;
    padding: 0.6rem;
  }
  
  .contact-links svg {
    width: 18px;
    height: 18px;
  }
  
  .contact-email-text {
    font-size: 0.8rem;
  }


}

/* ==================== Chroma語法高亮樣式覆蓋 ==================== */

/* ==================== VS Code Dark Modern 主題配色 ==================== */

/* 亮色模式下的代碼樣式 - 排除Mermaid */
:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
  background: #f8f9fa !important;
  color: #374151 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  position: relative !important;
}

:root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code {
  background: transparent !important;
  color: #374151 !important;
  padding: 0 !important;
  border: none !important;
  font-family: inherit !important;
}

:root[data-theme="light"] .post-content-single code:not(pre code) {
  background: #f8f9fa !important;
  color: #374151 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 13px !important;
  border: none !important;
}

/* 暗色模式下的代碼樣式 - 排除Mermaid */
:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  overflow-x: auto !important;
  margin: 1rem 0 !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  position: relative !important;
}

:root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) code {
  background: transparent !important;
  color: #d4d4d4 !important;
  padding: 0 !important;
  border: none !important;
  font-family: inherit !important;
}

:root[data-theme="dark"] .post-content-single code:not(pre code) {
  background: #2d2d30 !important;
  color: #d4d4d4 !important;
  padding: 2px 4px !important;
  border-radius: 3px !important;
  font-family: 'Cascadia Code', 'Fira Code', 'JetBrains Mono', 'Consolas', monospace !important;
  font-size: 13px !important;
  border: none !important;
}

/* ==================== 亮色模式語法高亮 ==================== */

/* 亮色模式 - Python 關鍵字 */
:root[data-theme="light"] .chroma .k,
:root[data-theme="light"] .chroma .kc,
:root[data-theme="light"] .chroma .kd,
:root[data-theme="light"] .chroma .kn,
:root[data-theme="light"] .chroma .kp,
:root[data-theme="light"] .chroma .kr,
:root[data-theme="light"] .chroma .kt {
  color: #0000ff !important;
  font-weight: normal !important;
}

/* 亮色模式 - 字串 */
:root[data-theme="light"] .chroma .s,
:root[data-theme="light"] .chroma .sa,
:root[data-theme="light"] .chroma .sb,
:root[data-theme="light"] .chroma .sc,
:root[data-theme="light"] .chroma .dl,
:root[data-theme="light"] .chroma .sd,
:root[data-theme="light"] .chroma .s2,
:root[data-theme="light"] .chroma .se,
:root[data-theme="light"] .chroma .sh,
:root[data-theme="light"] .chroma .si,
:root[data-theme="light"] .chroma .sx,
:root[data-theme="light"] .chroma .sr,
:root[data-theme="light"] .chroma .s1,
:root[data-theme="light"] .chroma .ss {
  color: #a31515 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 數字 */
:root[data-theme="light"] .chroma .m,
:root[data-theme="light"] .chroma .mb,
:root[data-theme="light"] .chroma .mf,
:root[data-theme="light"] .chroma .mh,
:root[data-theme="light"] .chroma .mi,
:root[data-theme="light"] .chroma .il,
:root[data-theme="light"] .chroma .mo {
  color: #098658 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 註釋 */
:root[data-theme="light"] .chroma .c,
:root[data-theme="light"] .chroma .ch,
:root[data-theme="light"] .chroma .cm,
:root[data-theme="light"] .chroma .c1,
:root[data-theme="light"] .chroma .cs,
:root[data-theme="light"] .chroma .cp,
:root[data-theme="light"] .chroma .cpf {
  color: #008000 !important;
  font-style: italic !important;
  font-weight: normal !important;
}

/* 亮色模式 - 函數名 */
:root[data-theme="light"] .chroma .nf,
:root[data-theme="light"] .chroma .fm {
  color: #795e26 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 類名 */
:root[data-theme="light"] .chroma .nc,
:root[data-theme="light"] .chroma .no,
:root[data-theme="light"] .chroma .nd {
  color: #267f99 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 變數名 */
:root[data-theme="light"] .chroma .n,
:root[data-theme="light"] .chroma .na,
:root[data-theme="light"] .chroma .nb,
:root[data-theme="light"] .chroma .bp,
:root[data-theme="light"] .chroma .nv,
:root[data-theme="light"] .chroma .vc,
:root[data-theme="light"] .chroma .vg,
:root[data-theme="light"] .chroma .vi,
:root[data-theme="light"] .chroma .vm,
:root[data-theme="light"] .chroma .nx {
  color: #001080 !important;
  font-weight: normal !important;
}

/* 亮色模式 - 操作符和標點符號 */
:root[data-theme="light"] .chroma .o,
:root[data-theme="light"] .chroma .ow,
:root[data-theme="light"] .chroma .p {
  color: #000000 !important;
  font-weight: normal !important;
}

/* ==================== 暗色模式語法高亮 ==================== */

/* 暗色模式 - Python 關鍵字 */
:root[data-theme="dark"] .chroma .k,
:root[data-theme="dark"] .chroma .kc,
:root[data-theme="dark"] .chroma .kd,
:root[data-theme="dark"] .chroma .kn,
:root[data-theme="dark"] .chroma .kp,
:root[data-theme="dark"] .chroma .kr,
:root[data-theme="dark"] .chroma .kt {
  color: #569cd6 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 字串 */
:root[data-theme="dark"] .chroma .s,
:root[data-theme="dark"] .chroma .sa,
:root[data-theme="dark"] .chroma .sb,
:root[data-theme="dark"] .chroma .sc,
:root[data-theme="dark"] .chroma .dl,
:root[data-theme="dark"] .chroma .sd,
:root[data-theme="dark"] .chroma .s2,
:root[data-theme="dark"] .chroma .se,
:root[data-theme="dark"] .chroma .sh,
:root[data-theme="dark"] .chroma .si,
:root[data-theme="dark"] .chroma .sx,
:root[data-theme="dark"] .chroma .sr,
:root[data-theme="dark"] .chroma .s1,
:root[data-theme="dark"] .chroma .ss {
  color: #ce9178 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 數字 */
:root[data-theme="dark"] .chroma .m,
:root[data-theme="dark"] .chroma .mb,
:root[data-theme="dark"] .chroma .mf,
:root[data-theme="dark"] .chroma .mh,
:root[data-theme="dark"] .chroma .mi,
:root[data-theme="dark"] .chroma .il,
:root[data-theme="dark"] .chroma .mo {
  color: #b5cea8 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 註釋 */
:root[data-theme="dark"] .chroma .c,
:root[data-theme="dark"] .chroma .ch,
:root[data-theme="dark"] .chroma .cm,
:root[data-theme="dark"] .chroma .c1,
:root[data-theme="dark"] .chroma .cs,
:root[data-theme="dark"] .chroma .cp,
:root[data-theme="dark"] .chroma .cpf {
  color: #6a9955 !important;
  font-style: italic !important;
  font-weight: normal !important;
}

/* 暗色模式 - 函數名 */
:root[data-theme="dark"] .chroma .nf,
:root[data-theme="dark"] .chroma .fm {
  color: #dcdcaa !important;
  font-weight: normal !important;
}

/* 暗色模式 - 類名 */
:root[data-theme="dark"] .chroma .nc,
:root[data-theme="dark"] .chroma .no,
:root[data-theme="dark"] .chroma .nd {
  color: #4ec9b0 !important;
  font-weight: normal !important;
}

/* 暗色模式 - 變數名 */
:root[data-theme="dark"] .chroma .n,
:root[data-theme="dark"] .chroma .na,
:root[data-theme="dark"] .chroma .nb,
:root[data-theme="dark"] .chroma .bp,
:root[data-theme="dark"] .chroma .nv,
:root[data-theme="dark"] .chroma .vc,
:root[data-theme="dark"] .chroma .vg,
:root[data-theme="dark"] .chroma .vi,
:root[data-theme="dark"] .chroma .vm,
:root[data-theme="dark"] .chroma .nx {
  color: #9cdcfe !important;
  font-weight: normal !important;
}

/* 暗色模式 - 內建函數 */
:root[data-theme="dark"] .chroma .nb,
:root[data-theme="dark"] .chroma .bp {
  color: #4fc1ff !important;
  font-weight: normal !important;
}

/* ==================== Bash/Shell 語法高亮 ==================== */

/* Bash 關鍵字和命令 */
.language-bash .chroma .k,
.language-sh .chroma .k,
.language-shell .chroma .k {
  color: #569cd6 !important;
}

/* Bash 字串 */
.language-bash .chroma .s,
.language-bash .chroma .s1,
.language-bash .chroma .s2,
.language-sh .chroma .s,
.language-sh .chroma .s1,
.language-sh .chroma .s2,
.language-shell .chroma .s,
.language-shell .chroma .s1,
.language-shell .chroma .s2 {
  color: #ce9178 !important;
}

/* Bash 變數 ($var, ${var}) */
.language-bash .chroma .nv,
.language-bash .chroma .vg,
.language-sh .chroma .nv,
.language-sh .chroma .vg,
.language-shell .chroma .nv,
.language-shell .chroma .vg {
  color: #9cdcfe !important;
}

/* ==================== JSON 語法高亮 ==================== */

/* JSON 屬性名 */
.language-json .chroma .na,
.language-json .chroma .nx {
  color: #9cdcfe !important;
  font-weight: normal !important;
}

/* JSON 字串值 */
.language-json .chroma .s,
.language-json .chroma .s1,
.language-json .chroma .s2 {
  color: #ce9178 !important;
}

/* JSON 數字 */
.language-json .chroma .m,
.language-json .chroma .mi,
.language-json .chroma .mf {
  color: #b5cea8 !important;
}

/* JSON 布林值和 null */
.language-json .chroma .kc {
  color: #569cd6 !important;
}

/* 暗色模式 - 操作符和標點符號 */
:root[data-theme="dark"] .chroma .o,
:root[data-theme="dark"] .chroma .ow,
:root[data-theme="dark"] .chroma .p {
  color: #d4d4d4 !important;
  font-weight: normal !important;
}

/* ==================== 錯誤和其他 ==================== */

/* 錯誤高亮 */
.chroma .err {     /* error */
  color: #f44747 !important;
  background-color: transparent !important;
}

/* 通用標記 */
.chroma .g {       /* generic */
  color: #d4d4d4 !important;
}

/* 刪除/插入標記 */
.chroma .gd {      /* generic deleted */
  color: #f44747 !important;
}

.chroma .gi {      /* generic inserted */
  color: #608b4e !important;
}

/* ==================== 通用覆蓋規則 ==================== */

/* 亮色模式下確保所有 chroma 容器都使用正確的背景 */
:root[data-theme="light"] .chroma,
:root[data-theme="light"] .highlight {
  background: #f8f9fa !important;
  color: #374151 !important;
}

/* 暗色模式下確保所有 chroma 容器都使用正確的背景 */
:root[data-theme="dark"] .chroma,
:root[data-theme="dark"] .highlight {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
}

/* 確保行號也使用正確的顏色 */
.chroma .ln,       /* line numbers */
.chroma .lnt {     /* line numbers table */
  color: #858585 !important;
  background: transparent !important;
}

/* 移除所有預設的背景色 */
.chroma .hl {
  background-color: #2d2d30 !important;
}

/* ==================== 特殊語言支持 ==================== */

/* JavaScript/TypeScript */
.language-javascript .chroma .nx,
.language-js .chroma .nx,
.language-typescript .chroma .nx,
.language-ts .chroma .nx {
  color: #9cdcfe !important;
}

/* CSS */
.language-css .chroma .nc {      /* CSS class selector */
  color: #d7ba7d !important;
}

.language-css .chroma .nf {      /* CSS function */
  color: #dcdcaa !important;
}

/* HTML */
.language-html .chroma .nt {     /* HTML tag name */
  color: #569cd6 !important;
}

.language-html .chroma .na {     /* HTML attribute name */
  color: #9cdcfe !important;
}

/* ==================== 強制覆蓋所有可能的選擇器 ==================== */

/* 亮色模式 - 最高優先級覆蓋 */
:root[data-theme="light"] body .post-content-single pre .chroma,
:root[data-theme="light"] body .post-content-single code .chroma,
:root[data-theme="light"] body .chroma,
:root[data-theme="light"] html body .chroma {
  background: #f8f9fa !important;
  color: #374151 !important;
}

/* 暗色模式 - 最高優先級覆蓋 */
:root[data-theme="dark"] body .post-content-single pre .chroma,
:root[data-theme="dark"] body .post-content-single code .chroma,
:root[data-theme="dark"] body .chroma,
:root[data-theme="dark"] html body .chroma {
  background: #1e1e1e !important;
  color: #d4d4d4 !important;
}

/* 移除任何可能的黃色高亮 */
pre *[style*="color: #ffff"],
pre *[style*="color: #ff9"],
pre *[style*="color: yellow"],
code *[style*="color: #ffff"],
code *[style*="color: #ff9"],
code *[style*="color: yellow"] {
  color: #9cdcfe !important;
}

/* 亮色模式下的代碼區塊整體樣式 */
:root[data-theme="light"] .post-content-single .highlight,
:root[data-theme="light"] .post-content-single .chroma {
  background: #f8f9fa !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  position: relative !important;
}



/* 暗色模式下的代碼區塊整體樣式 */
:root[data-theme="dark"] .post-content-single .highlight,
:root[data-theme="dark"] .post-content-single .chroma {
  background: #1e1e1e !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 1rem !important;
  margin: 1rem 0 !important;
  position: relative !important;
}

/* 技術關鍵字樣式 */
.tech-keyword {
  color: #007acc !important;
  font-weight: 600 !important;
  background: none !important;
  padding: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

:root[data-theme="dark"] .tech-keyword {
  color: #4A90E2 !important;
}

/* 響應式設計 */
@media (max-width: 768px) {
  :root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
  :root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
    padding: 0.75rem !important;
    font-size: 14px !important;
    margin: 0.75rem 0 !important;
  }
  
  :root[data-theme="light"] .post-content-single .highlight,
  :root[data-theme="light"] .post-content-single .chroma,
  :root[data-theme="dark"] .post-content-single .highlight,
  :root[data-theme="dark"] .post-content-single .chroma {
    padding: 0.75rem !important;
    margin: 0.75rem 0 !important;
  }
}

@media (max-width: 480px) {
  :root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
  :root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
    padding: 0.5rem !important;
    font-size: 13px !important;
  }
  
  :root[data-theme="light"] .post-content-single .highlight,
  :root[data-theme="light"] .post-content-single .chroma,
  :root[data-theme="dark"] .post-content-single .highlight,
  :root[data-theme="dark"] .post-content-single .chroma {
    padding: 0.5rem !important;
  }
}

/* ==================== 改進Python語法高亮 (參考VSCode Dark Modern) ==================== */

/* 提高優先級的Python專用語法高亮 - 必須在通用規則之後以覆蓋它們 */

/* Python 模組名稱 (from xxx import) - 使用VS Code風格的青綠色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nn,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nn,
:root[data-theme="dark"] .language-python .chroma .nn {
  color: #4EC9B0 !important; /* VS Code的青綠色 */
  font-weight: normal !important;
}

/* Python 導入的類名和函數名 - 使用VS Code風格的黃色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nc,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nf,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nc,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nf,
:root[data-theme="dark"] .language-python .chroma .nc,
:root[data-theme="dark"] .language-python .chroma .nf {
  color: #DCDCAA !important; /* VS Code的淺黃色 */
  font-weight: normal !important;
}

/* Python 導入關鍵字 from/import - 保持藍色但稍微調亮 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .kn,
:root[data-theme="dark"] .post-content-single .language-python .chroma .kn,
:root[data-theme="dark"] .language-python .chroma .kn {
  color: #569CD6 !important; /* VS Code的藍色 */
  font-weight: normal !important;
}

/* Python 字符串 - 使用VS Code的橙色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .s,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .s1,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .s2,
:root[data-theme="dark"] .post-content-single .language-python .chroma .s,
:root[data-theme="dark"] .post-content-single .language-python .chroma .s1,
:root[data-theme="dark"] .post-content-single .language-python .chroma .s2,
:root[data-theme="dark"] .language-python .chroma .s,
:root[data-theme="dark"] .language-python .chroma .s1,
:root[data-theme="dark"] .language-python .chroma .s2 {
  color: #CE9178 !important; /* VS Code的橙色 */
  font-weight: normal !important;
}

/* Python 變數名 - 使用VS Code的淺藍色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .n,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nx,
:root[data-theme="dark"] .post-content-single .language-python .chroma .n,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nx,
:root[data-theme="dark"] .language-python .chroma .n,
:root[data-theme="dark"] .language-python .chroma .nx {
  color: #9CDCFE !important; /* VS Code的淺藍色 */
  font-weight: normal !important;
}

/* Python 內建函數 - 使用VS Code的亮藍色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .nb,
:root[data-theme="dark"] .post-content-single .language-python .chroma .nb,
:root[data-theme="dark"] .language-python .chroma .nb {
  color: #4FC1FF !important; /* VS Code的亮藍色 */
  font-weight: normal !important;
}

/* Python 註釋 - 使用VS Code的綠色 */
:root[data-theme="dark"] body .post-content-single .language-python .chroma .c,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .c1,
:root[data-theme="dark"] body .post-content-single .language-python .chroma .cm,
:root[data-theme="dark"] .post-content-single .language-python .chroma .c,
:root[data-theme="dark"] .post-content-single .language-python .chroma .c1,
:root[data-theme="dark"] .post-content-single .language-python .chroma .cm,
:root[data-theme="dark"] .language-python .chroma .c,
:root[data-theme="dark"] .language-python .chroma .c1,
:root[data-theme="dark"] .language-python .chroma .cm {
  color: #6A9955 !important; /* VS Code的綠色 */
  font-style: italic !important;
  font-weight: normal !important;
}

/* ==================== 手機樣式優化 ==================== */

/* 更小的手機屏幕優化 (360px以下) */
@media (max-width: 360px) {
  /* 導航欄優化 - 只適用於電腦版 */
  .desktop-navbar .flex-container {
    padding: 8px 10px;
  }
  
  .desktop-navbar .logo-text {
    font-size: 1rem;
  }
  
  .desktop-navbar .nav-avatar {
    width: 30px;
    height: 30px;
  }
  
  .desktop-navbar ul {
    gap: 0.5rem;
  }
  
  .desktop-navbar a {
    padding: 4px 8px;
    font-size: 0.75rem;
  }
  
  /* 不覆蓋現有的body padding-top */
  
  /* 首頁優化 */
  .homepage-container {
    padding: 0 10px;
  }
  
  .hero-content h1 {
    font-size: 1.75rem;
    line-height: 1.3;
  }
  
  .hero-content p {
    font-size: 0.9rem;
  }
  
  .hero-section {
    padding: 1.5rem 0;
    margin: -10px -10px 1.5rem -10px;
  }
  
  .section-title {
    font-size: 1.5rem;
  }
  
  /* 文章卡片優化 */
  .post-card {
    margin: 0 -5px;
  }
  
  .post-content {
    padding: 0.75rem;
  }
  
  .post-title {
    font-size: 1.1rem;
    line-height: 1.3;
  }
  
  .post-summary {
    font-size: 0.85rem;
    line-height: 1.5;
  }
  
  /* 時間線優化 */
  .all-posts-container {
    padding: 0.75rem;
  }
  
  .timeline-container {
    padding-left: 50px;
  }
  
  .timeline-container::before {
    left: 25px;
    width: 3px;
  }
  
  .timeline-year {
    font-size: 1.25rem;
  }
  
  .timeline-year-dot {
    left: -33px;
    width: 10px;
    height: 10px;
  }
  
  .timeline-post-connector {
    left: -10px;
    width: 6px;
    height: 6px;
  }
  
  .timeline-post-content {
    grid-template-columns: 1fr;
  }
  
  .timeline-post-thumbnail {
    width: 60px;
    height: 60px;
  }
  
  /* 單篇文章優化 */
  .single-post {
    margin: 0 10px !important;
    padding: 1rem !important;
  }
  
  .post-title-single {
    font-size: 1.75rem !important;
    line-height: 1.2 !important;
  }
  
  .post-content-single {
    font-size: 1rem !important;
    line-height: 1.7 !important;
  }
  
  /* 手機版文章標題字體調小 - 最強選擇器強制覆蓋 */
  body .single-post .post-content-single h1,
  html body .single-post .post-content-single h1,
  .single-post .post-content-single h1 {
    font-size: 1.4rem !important;
    line-height: 1.4 !important;
  }
  
  body .single-post .post-content-single h2,
  html body .single-post .post-content-single h2,
  .single-post .post-content-single h2 {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
  }
  
  body .single-post .post-content-single h3,
  html body .single-post .post-content-single h3,
  .single-post .post-content-single h3 {
    font-size: 1.1rem !important;
    line-height: 1.4 !important;
  }
  
  body .single-post .post-content-single h4,
  html body .single-post .post-content-single h4,
  .single-post .post-content-single h4 {
    font-size: 1rem !important;
    line-height: 1.4 !important;
  }
  
  .post-navigation {
    gap: 0.75rem !important;
  }
  
  .nav-prev, .nav-next, .nav-all-posts {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* 手機版簡化All Posts時間軸 */
@media (max-width: 768px) {
  /* 手機版All Posts描述文字調小 - 針對h2標籤 */
  .all-posts-container .all-posts-description {
    font-size: 1.2rem !important;
    line-height: 1.4 !important;
    max-width: 100% !important;
  }
  
  .all-posts-container .all-posts-description h2 {
    font-size: 1.3rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    margin: 0 !important;
  }
  
  .all-posts-container .all-posts-description p,
  .all-posts-container .all-posts-description * {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  
  /* 隱藏複雜的時間軸視覺元素 */
  .timeline-container::before,
  .timeline-year-dot,
  .timeline-post-connector {
    display: none !important;
  }
  
  /* 簡化時間軸容器 */
  .timeline-container {
    padding-left: 0 !important;
  }
  
  /* 簡化文章卡片為簡單列表樣式 */
  .timeline-post-card {
    background: var(--bg-tertiary) !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    padding: 1rem !important;
    box-shadow: none !important;
  }
  
  /* 手機版文章標題字體調小 */
  .timeline-post-title,
  .timeline-post-title a {
    font-size: 0.95rem !important;
    line-height: 1.3 !important;
    font-weight: 600 !important;
  }
  
  /* 手機版文章摘要字體調小 */
  .timeline-post-summary {
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
  }
  
  /* 手機版分類標籤字體調小 */
  .timeline-post-category {
    font-size: 0.7rem !important;
  }
  
  /* 手機版標籤字體調小 */
  .timeline-tag {
    font-size: 0.65rem !important;
    padding: 0.2rem 0.4rem !important;
  }
  
  /* 簡化文章內容布局 */
  .timeline-post-content {
    display: block !important;
    grid-template-columns: none !important;
    gap: 1rem !important;
  }
  
  /* 隱藏縮圖在手機版 */
  .timeline-post-thumbnail {
    display: none !important;
  }
  
  /* 調整文章元數據區域布局 */
  .timeline-post-meta {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    margin-bottom: 0.75rem !important;
    flex-wrap: wrap !important;
  }
  
  /* 調整日期顯示 - 使用普通字體，放在閱讀時間左邊 */
  .timeline-post-date {
    display: inline-block !important;
    background: none !important;
    color: var(--text-secondary) !important;
    padding: 0 !important;
    border-radius: 0 !important;
    font-size: 0.75rem !important;
    order: 1 !important;
    margin-right: 0.5rem !important;
  }
  
  .timeline-post-date .month,
  .timeline-post-date .day {
    display: inline !important;
  }
  
  .timeline-post-date .day::before {
    content: " ";
  }
  
  /* 閱讀時間樣式 */
  .timeline-post-reading-time {
    order: 2 !important;
    font-size: 0.75rem !important;
    color: var(--text-secondary) !important;
  }
  
  /* 簡化年份標題 */
  .timeline-year-header {
    background: var(--bg-secondary) !important;
    padding: 1rem !important;
    border-radius: 8px !important;
    margin-bottom: 1.5rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
  }
  
  .timeline-year {
    margin: 0 !important;
    font-size: 1.3rem !important;
  }
  
  .timeline-year-count {
    font-size: 0.8rem !important;
  }
  
  /* 隱藏箭頭指示器 */
  .timeline-post-arrow {
    display: none !important;
  }
}

/* 觸摸友好的按鈕和鏈接優化 */
@media (max-width: 768px) {
  /* 最小觸摸目標尺寸 44px x 44px (Apple推薦) */
  .theme-toggle {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .read-more,
  .btn-primary,
  .btn-secondary {
    min-height: 44px;
    padding: 12px 20px;
    touch-action: manipulation;
  }
  
  .email-input-group button {
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .contact-link {
    min-width: 44px;
    min-height: 44px;
    touch-action: manipulation;
  }
  
  /* 增加間距以改善觸摸體驗 */
  .post-meta {
    gap: 1rem;
  }
  
  .post-tags {
    gap: 0.75rem;
  }
  
  .tag {
    min-height: 32px;
    padding: 0.5rem 0.75rem;
    touch-action: manipulation;
  }
}

/* 手機上的文字可讀性優化 */
@media (max-width: 768px) {
  /* 增加行高以改善可讀性 */
  .post-summary {
    line-height: 1.6;
  }
  
  .post-content-single p {
    line-height: 1.8 !important;
  }
  
  .timeline-post-summary {
    line-height: 1.6 !important;
  }
  
  /* 修復長URL溢出問題 */
  .post-content-single a,
  .post-content-single p,
  .post-content-single li,
  .post-content-single div {
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    hyphens: auto !important;
  }
  
  /* 特別處理長鏈接 */
  .post-content-single a[href] {
    max-width: 100% !important;
    display: inline-block !important;
    white-space: pre-wrap !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
  }
  
  /* 確保容器不被內容撐開 */
  .post-content-single {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  .single-post {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  
  /* 段落間距優化 */
  .post-content-single p {
    margin-bottom: 1.75rem !important;
  }
  
  .post-content-single h1 {
    margin: 2.75rem 0 1.5rem 0 !important;
  }
  
  .post-content-single h2 {
    margin: 2.5rem 0 1.25rem 0 !important;
  }
  
  .post-content-single h3 {
    margin: 2rem 0 1rem 0 !important;
  }
  
  .post-content-single h4 {
    margin: 1.75rem 0 0.75rem 0 !important;
  }
}

/* 手機上的圖片優化 */
@media (max-width: 768px) {
  /* 基本圖片樣式 */
  .post-image img,
  .timeline-post-thumbnail img {
    border-radius: 8px;
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }
  
  /* 封面圖片 */
  .post-cover-image img {
    height: 200px !important;
    object-position: center;
    max-width: 100% !important;
    display: block !important;
    margin: 0 auto !important;
  }
  
  /* 文章內容圖片 - 完全居中並防止溢出 */
  .post-content-single img {
    max-width: calc(100vw - 2rem) !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    margin: 1.5rem auto !important;
    border-radius: 8px !important;
    object-fit: contain !important;
    box-sizing: border-box !important;
  }
  
  /* 確保圖片容器也不會溢出 */
  .post-content-single p img,
  .post-content-single div img,
  .post-content-single figure img {
    max-width: calc(100vw - 2rem) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  /* 特殊處理figure元素 */
  .post-content-single figure {
    max-width: calc(100vw - 2rem) !important;
    margin: 1.5rem auto !important;
    text-align: center !important;
    overflow: hidden !important;
  }
  
  /* 圖片說明文字 */
  .post-content-single figcaption {
    text-align: center !important;
    font-size: 0.85rem !important;
    color: var(--text-secondary) !important;
    margin-top: 0.5rem !important;
    padding: 0 1rem !important;
  }
  
  /* Hugo shortcode 圖片 */
  .post-content-single .img-container {
    max-width: calc(100vw - 2rem) !important;
    margin: 1.5rem auto !important;
    text-align: center !important;
    overflow: hidden !important;
  }
}

/* 手機上的代碼塊優化 */
@media (max-width: 768px) {
  :root[data-theme="light"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid),
  :root[data-theme="dark"] .post-content-single pre:not(.mermaid-container pre):not(.mermaid) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 13px !important;
    line-height: 1.3 !important;
  }
  
  :root[data-theme="light"] .post-content-single code:not(pre code),
  :root[data-theme="dark"] .post-content-single code:not(pre code) {
    font-size: 12px !important;
    word-break: break-word;
  }
}

/* 手機上的表單優化 */
@media (max-width: 768px) {
  .email-input-group input {
    font-size: 16px; /* 防止iOS縮放 */
    min-height: 44px;
    touch-action: manipulation;
  }
  
  .email-input-group {
    flex-direction: column;
    gap: 1rem;
  }
  
  .email-input-group button {
    width: 100%;
    font-size: 16px;
  }
}

/* 手機上的滾動優化 */
@media (max-width: 768px) {
  /* 平滑滾動 */
  html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
  }
  
  /* 防止橫向滾動 */
  body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* 針對文字內容元素處理長內容 */
  p, li, div, span, article, section {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
  }
  
  /* 特別處理所有鏈接 */
  a {
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    hyphens: auto !important;
  }
  
  /* 確保所有內容容器不溢出 */
  .all-posts-container,
  .timeline-container,
  .homepage-container {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }
  
  /* 提升滾動性能 - 移除可能造成問題的transform */
  .timeline-container,
  .posts-grid,
  .post-content-single {
    will-change: auto;
  }
}

/* 手機上的互動反饋優化 */
@media (max-width: 768px) {
  /* 點擊反饋效果 */
  .post-card:active,
  .timeline-post-card:active {
    transform: scale(0.98);
    transition: transform 0.1s ease;
  }
  
  .theme-toggle:active {
    transform: scale(0.95);
  }
  
  .btn-primary:active,
  .btn-secondary:active {
    transform: translateY(1px) scale(0.98);
  }
  
  /* 移除hover效果以避免在觸摸設備上的問題 */
  @media (hover: none) and (pointer: coarse) {
    .post-card:hover,
    .timeline-post-card:hover,
    .timeline-post-main:hover,
    .timeline-post-thumbnail:hover {
      transform: none !important;
      background: inherit !important;
      box-shadow: inherit !important;
    }
    
    .post-image img:hover {
      transform: none !important;
    }
    
    .theme-toggle:hover {
      transform: none !important;
      background: inherit !important;
      border-color: inherit !important;
      color: inherit !important;
    }
  }
}

/* 手機橫屏模式優化 */
@media (max-width: 768px) and (orientation: landscape) {
  .desktop-navbar {
    padding: 5px 0;
  }
  
  .desktop-navbar .flex-container {
    padding: 5px 15px;
    min-height: 36px;
  }
  
  .desktop-navbar .nav-avatar {
    width: 32px;
    height: 32px;
  }
  
  .desktop-navbar a {
    padding: 6px 10px;
    font-size: 0.85rem;
  }
  
  body {
    padding-top: 50px;
  }
  
  .hero-section {
    padding: 2rem 0;
  }
  
  .hero-content h1 {
    font-size: 2.25rem;
  }
}

/* 可訪問性優化 */
@media (max-width: 768px) {
  /* 高對比度模式支持 */
  @media (prefers-contrast: high) {
    .post-card,
    .timeline-post-card {
      border: 2px solid var(--text-primary);
    }
    
    .theme-toggle,
    .btn-primary,
    .btn-secondary {
      border-width: 3px;
    }
  }
  
  /* 減少動畫偏好支持 */
  @media (prefers-reduced-motion: reduce) {
    .post-card,
    .timeline-post-card,
    .theme-toggle,
    .btn-primary,
    .btn-secondary {
      transition: none;
    }
    
    html {
      scroll-behavior: auto;
    }
  }
  
  /* 焦點可見性 */
  .theme-toggle:focus,
  .desktop-navbar a:focus,
  .mobile-menu-item:focus,
  .mobile-menu-button:focus,
  .post-title a:focus,
  .timeline-post-title a:focus,
  .read-more:focus,
  .btn-primary:focus,
  .btn-secondary:focus {
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
  }
}

/* ==================== 手機模式亮色主題邊框移除 ==================== */

/* 手機模式下亮色主題移除自我介紹區塊邊框 */
@media (max-width: 768px) {
  :root[data-theme="light"] .intro-section {
    border: none !important;
    background: var(--bg-color) !important;
    border-radius: 0 !important;
    margin: -10px 0 1rem 0 !important;
    padding: 1.5rem 0.4rem !important;
  }
  
  /* 調小自我介紹標題文字 */
  :root[data-theme="light"] .intro-title {
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* 手機模式下亮色主題移除文章卡片邊框樣式被合併到下方完整定義中 */
  
  /* 讓沒有邊框的區塊完全填滿寬度 */
  :root[data-theme="light"] .homepage-container {
    padding: 10px 0 !important;
  }
  
  :root[data-theme="light"] .posts-grid {
    margin: 0 !important;
  }
  
  /* 自我介紹內容填滿寬度且更緊湊 */
  :root[data-theme="light"] .intro-content {
    padding: 0 0.4rem !important;
    max-width: 100% !important;
  }
  
  /* 調整section標題間距 */
  :root[data-theme="light"] .section-title {
    margin-bottom: 1rem !important;
    font-size: 1.6rem !important;
  }
  
  /* 隱藏手機模式下的四個標籤 */
  :root[data-theme="light"] .intro-tags {
    display: none !important;
  }
  
  /* 修復自我介紹文字間距不等寬問題 */
  :root[data-theme="light"] .intro-description {
    text-align: center !important;
    text-align-last: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }
  
  /* 手機模式下文章內容字體調小且更緊湊 */
  :root[data-theme="light"] .post-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3 !important;
  }
  
  :root[data-theme="light"] .post-summary {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="light"] .post-meta {
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="light"] .post-category {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.6rem !important;
  }
  
  :root[data-theme="light"] .post-date {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="light"] .post-author {
    font-size: 0.75rem !important;
  }
  
  :root[data-theme="light"] .reading-time {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="light"] .read-more {
    font-size: 0.75rem !important;
  }
  
  /* 移除標籤 */
  :root[data-theme="light"] .post-tags {
    display: none !important;
  }
  
  /* 更寬更緊湊的版面 */
  :root[data-theme="light"] .posts-grid {
    margin: 0 0.2rem !important;
    gap: 0 !important;
  }
  
  :root[data-theme="light"] .post-content {
    padding: 0.4rem 0.4rem !important;
  }
  
  /* 調整文章footer間距 */
  :root[data-theme="light"] .post-footer {
    padding-top: 0.4rem !important;
    margin-top: 0.3rem !important;
  }
  
  /* 每篇文章用版權信息樣式的線條分開，更緊湊 */
  :root[data-theme="light"] .post-card {
    background: var(--bg-color) !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
    padding-bottom: 0.5rem !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(to right, transparent 10%, rgba(107, 114, 128, 0.5) 20%, rgba(107, 114, 128, 0.5) 80%, transparent 90%) 1 !important;
  }
  
  :root[data-theme="light"] .post-card:hover {
    box-shadow: none !important;
    background: var(--bg-color) !important;
  }
  
  :root[data-theme="light"] .post-card:last-child {
    border-bottom: none !important;
    border-image: none !important;
  }
  
  /* 圖片下方圓角，跟上方一樣，調整高度更緊湊 */
  :root[data-theme="light"] .post-image {
    height: 150px !important;
    border-radius: 12px 12px 12px 12px !important;
    overflow: hidden !important;
  }
  
  :root[data-theme="light"] .post-image img {
    border-radius: 12px !important;
  }
  
  /* 手機模式下聯絡資訊區塊置中 */
  :root[data-theme="light"] .footer-contact-info {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  
  /* Email subscription文字樣式優化 */
  :root[data-theme="light"] .email-subscription p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
    margin-bottom: 0.8rem !important;
  }
  
  :root[data-theme="light"] .email-subscription.with-separator p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
  }
  
  /* 手機模式下footer雙欄布局改為單欄並置中 */
  :root[data-theme="light"] .footer-dual-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  
  :root[data-theme="light"] .email-subscription.with-separator {
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* 手機模式下email subscription橫向布局 */
  :root[data-theme="light"] .email-subscription .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="light"] .email-subscription.with-separator .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="light"] .email-input-group input {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    flex: 1 !important;
  }
  
  :root[data-theme="light"] .email-input-group button {
    border-radius: 0 8px 8px 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    white-space: nowrap !important;
    padding: 0.875rem 1rem !important;
  }
  
  /* ==================== 手機模式暗色主題樣式（與亮色模式相同） ==================== */
  
  /* 手機模式下暗色主題移除自我介紹區塊邊框，設為深灰色背景 */
  :root[data-theme="dark"] .intro-section {
    border: none !important;
    background: var(--bg-secondary) !important;
    border-radius: 0 !important;
    margin: -10px 0 1rem 0 !important;
    padding: 1.5rem 0.4rem !important;
  }
  
  /* 調小自我介紹標題文字 */
  :root[data-theme="dark"] .intro-title {
    font-size: 1.1rem !important;
    margin-bottom: 1.5rem !important;
  }
  
  /* 讓沒有邊框的區塊完全填滿寬度 */
  :root[data-theme="dark"] .homepage-container {
    padding: 10px 0 !important;
  }
  
  :root[data-theme="dark"] .posts-grid {
    margin: 0 !important;
  }
  
  /* 自我介紹內容填滿寬度且更緊湊 */
  :root[data-theme="dark"] .intro-content {
    padding: 0 0.4rem !important;
    max-width: 100% !important;
  }
  
  /* 調整section標題間距 */
  :root[data-theme="dark"] .section-title {
    margin-bottom: 1rem !important;
    font-size: 1.6rem !important;
  }
  
  /* 隱藏手機模式下的四個標籤 */
  :root[data-theme="dark"] .intro-tags {
    display: none !important;
  }
  
  /* 修復自我介紹文字間距不等寬問題 */
  :root[data-theme="dark"] .intro-description {
    text-align: center !important;
    text-align-last: center !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
  }
  
  /* 手機模式下文章內容字體調小且更緊湊 */
  :root[data-theme="dark"] .post-title {
    font-size: 1.1rem !important;
    margin-bottom: 0.4rem !important;
    line-height: 1.3 !important;
  }
  
  :root[data-theme="dark"] .post-summary {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="dark"] .post-meta {
    font-size: 0.75rem !important;
    margin-bottom: 0.4rem !important;
  }
  
  :root[data-theme="dark"] .post-category {
    font-size: 0.7rem !important;
    padding: 0.2rem 0.6rem !important;
  }
  
  :root[data-theme="dark"] .post-date {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="dark"] .post-author {
    font-size: 0.75rem !important;
  }
  
  :root[data-theme="dark"] .reading-time {
    font-size: 0.7rem !important;
  }
  
  :root[data-theme="dark"] .read-more {
    font-size: 0.75rem !important;
  }
  
  /* 移除標籤 */
  :root[data-theme="dark"] .post-tags {
    display: none !important;
  }
  
  /* 更寬更緊湊的版面 */
  :root[data-theme="dark"] .posts-grid {
    margin: 0 0.2rem !important;
    gap: 0 !important;
  }
  
  :root[data-theme="dark"] .post-content {
    padding: 0.4rem 0.4rem !important;
  }
  
  /* 調整文章footer間距 */
  :root[data-theme="dark"] .post-footer {
    padding-top: 0.4rem !important;
    margin-top: 0.3rem !important;
  }
  
  /* 每篇文章用版權信息樣式的線條分開，更緊湊，深灰色背景 */
  :root[data-theme="dark"] .post-card {
    background: var(--bg-secondary) !important;
    border-radius: 0 !important;
    margin-bottom: 1rem !important;
    box-shadow: none !important;
    padding-bottom: 0.5rem !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid transparent !important;
    border-image: linear-gradient(to right, transparent 10%, rgba(107, 114, 128, 0.5) 20%, rgba(107, 114, 128, 0.5) 80%, transparent 90%) 1 !important;
  }
  
  :root[data-theme="dark"] .post-card:hover {
    box-shadow: none !important;
    background: var(--bg-secondary) !important;
  }
  
  :root[data-theme="dark"] .post-card:last-child {
    border-bottom: none !important;
    border-image: none !important;
  }
  
  /* 圖片下方圓角，跟上方一樣，調整高度更緊湊 */
  :root[data-theme="dark"] .post-image {
    height: 150px !important;
    border-radius: 12px 12px 12px 12px !important;
    overflow: hidden !important;
  }
  
  :root[data-theme="dark"] .post-image img {
    border-radius: 12px !important;
  }
  
  /* 手機模式下聯絡資訊區塊置中 */
  :root[data-theme="dark"] .footer-contact-info {
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  
  /* Email subscription文字樣式優化 */
  :root[data-theme="dark"] .email-subscription p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
    margin-bottom: 0.8rem !important;
  }
  
  :root[data-theme="dark"] .email-subscription.with-separator p {
    font-size: 0.8rem !important;
    color: #6b7280 !important;
    text-align: left !important;
  }
  
  /* 手機模式下footer雙欄布局改為單欄並置中 */
  :root[data-theme="dark"] .footer-dual-container {
    flex-direction: column !important;
    align-items: center !important;
    gap: 1.5rem !important;
  }
  
  :root[data-theme="dark"] .email-subscription.with-separator {
    max-width: 100% !important;
    margin: 0 !important;
  }
  
  /* 手機模式下email subscription橫向布局 */
  :root[data-theme="dark"] .email-subscription .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="dark"] .email-subscription.with-separator .email-input-group {
    flex-direction: row !important;
    gap: 0 !important;
  }
  
  :root[data-theme="dark"] .email-input-group input {
    border-radius: 8px 0 0 8px !important;
    border-right: none !important;
    flex: 1 !important;
  }
  
  :root[data-theme="dark"] .email-input-group button {
    border-radius: 0 8px 8px 0 !important;
    border-left: 1px solid rgba(255, 255, 255, 0.3) !important;
    white-space: nowrap !important;
    padding: 0.875rem 1rem !important;
  }
}

/* ==================== 手機版/電腦版導航欄顯示控制 ==================== */

/* 預設：顯示電腦版，隱藏手機版 */
.desktop-navbar {
  display: block;
}

.mobile-navbar {
  display: none;
}

/* 手機版：隱藏電腦版，顯示手機版 */
@media (max-width: 768px) {
  .desktop-navbar {
    display: none !important;
  }
  
  .mobile-navbar {
    display: block !important;
  }
  
  .mobile-navbar .flex-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 20px !important;
    min-height: 60px !important;
    height: 60px !important;
    max-width: 1200px;
    margin: 0 auto;
  }
  
  body {
    padding-top: 84px; /* 調整為手機版導航欄高度 */
  }
}

/* ==================== 手機版導航欄樣式 ==================== */

/* 手機版頭像樣式 */
.mobile-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.mobile-nav-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  transition: transform 0.3s ease;
}

.mobile-nav-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-nav-avatar-fallback {
  width: 100%;
  height: 100%;
  background: var(--primary-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
}

.mobile-nav-avatar-fallback svg {
  width: 24px;
  height: 24px;
  color: var(--text-inverse);
}

.mobile-avatar a:hover .mobile-nav-avatar {
  transform: scale(1.1);
}

/* 手機版菜單容器 */
.mobile-menu-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

/* 三個點菜單按鈕 */
.mobile-menu-button {
  background: none;
  border: 2px solid var(--text-primary);
  border-radius: 50%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: 
    background-color var(--theme-transition-duration) var(--theme-transition-timing),
    border-color var(--theme-transition-duration) var(--theme-transition-timing),
    color var(--theme-transition-duration) var(--theme-transition-timing),
    transform 0.2s ease !important;
  padding: 0;
  color: var(--text-primary);
}

.mobile-menu-button:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
  transform: scale(1.05);
}

.mobile-menu-button:active {
  transform: scale(0.95);
}

.mobile-menu-button svg {
  width: 20px;
  height: 20px;
}

/* 下拉菜單樣式 */
.mobile-dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  min-width: 0 !important;
  max-width: 220px !important;
  width: 80vw !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
  text-align: center;
}
.mobile-dropdown-menu .mobile-menu-item {
  justify-content: center !important;
  text-align: center !important;
}
.mobile-dropdown-menu .mobile-theme-toggle {
  justify-content: center !important;
}

.mobile-dropdown-menu.active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.mobile-menu-items {
  padding: 8px 0;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: var(--text-primary);
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  transition: 
    background-color 0.2s ease,
    color 0.2s ease;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
}

.mobile-menu-item:hover {
  background: var(--primary-color);
  color: var(--text-inverse);
}

.mobile-menu-item svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.mobile-menu-separator {
  height: 1px;
  background: var(--border-color);
  margin: 8px 16px;
}

/* 手機版主題切換按鈕 */
.mobile-theme-toggle {
  justify-content: flex-start;
}

.mobile-theme-toggle:hover svg {
  transform: rotate(180deg);
}

/* 深色模式下的手機版樣式 */
:root[data-theme="dark"] .mobile-menu-button {
  color: #ffffff !important;
  border-color: #ffffff !important;
}

:root[data-theme="dark"] .mobile-menu-button:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse);
}

:root[data-theme="dark"] .mobile-dropdown-menu {
  background: var(--bg-secondary);
  border-color: var(--primary-color);
}

:root[data-theme="dark"] .mobile-menu-item {
  color: #ffffff !important;
}

:root[data-theme="dark"] .mobile-menu-item:hover {
  background: var(--primary-color);
  color: var(--text-inverse) !important;
}

:root[data-theme="dark"] .mobile-menu-separator {
  background: var(--border-color);
}

/* 超小屏幕調整 */
@media (max-width: 480px) {
  .desktop-navbar .logo {
    font-size: 1.2rem;
  }
  
  .desktop-navbar .logo-text {
    display: none;
  }
  
  .desktop-navbar .nav-avatar {
    width: 36px;
    height: 36px;
  }
  
  .desktop-navbar a {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
  
  /* 手機版調整 */
  .mobile-navbar .flex-container {
    padding: 10px 15px;
    min-height: 56px;
    height: 56px !important;
  }
  
  .mobile-nav-avatar {
    width: 36px;
    height: 36px;
  }
  
  .mobile-menu-button {
    width: 36px;
    height: 36px;
  }
  
  .mobile-menu-button svg {
    width: 18px;
    height: 18px;
  }
  
  .mobile-dropdown-menu {
    min-width: 180px;
    right: -10px;
  }
  
  .mobile-menu-item {
    padding: 10px 14px;
    font-size: 0.9rem;
  }
  
  .mobile-menu-item svg {
    width: 16px;
    height: 16px;
  }
  
  body {
    padding-top: 76px; /* 調整為超小屏手機版導航欄高度 */
  }
}

/* 手機版導航欄高度加大 */
@media (max-width: 768px) {
  .mobile-navbar .flex-container {
    min-height: 72px !important;
    height: 72px !important;
    padding: 16px 24px !important;
  }
}
@media (max-width: 480px) {
  .mobile-navbar .flex-container {
    min-height: 64px !important;
    height: 64px !important;
    padding: 10px 12px !important;
  }
}

/* 手機版頭像放大並向上移動 */
.mobile-avatar {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  margin-top: -6px;
}
.mobile-nav-avatar {
  width: 52px;
  height: 52px;
}
@media (max-width: 480px) {
  .mobile-nav-avatar {
    width: 44px;
    height: 44px;
  }
}

/* 菜單按鈕去除圓形邊框，三個點變大 */
.mobile-menu-button {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  box-shadow: none !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mobile-menu-button svg {
  width: 32px !important;
  height: 32px !important;
}
@media (max-width: 480px) {
  .mobile-menu-button svg {
    width: 26px !important;
    height: 26px !important;
  }
}

.mobile-theme-toggle:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* 亮色模式下下拉菜單頂部背景為白色 */
:root[data-theme="light"] .mobile-dropdown-menu {
  background: #fff !important;
}
:root[data-theme="light"] .mobile-dropdown-menu > * {
  background: transparent !important;
}

/* 移除三個點菜單按鈕的藍色外框 */
.mobile-menu-button:focus,
.mobile-menu-button:active {
  outline: none !important;
  box-shadow: none !important;
  border-color: transparent !important;
}

:root[data-theme="light"] .mobile-dropdown-menu,
:root[data-theme="light"] .mobile-dropdown-menu * {
  color: #222 !important;
  fill: #222 !important;
  stroke: #222 !important;
  background: #fff !important;
  box-shadow: none !important;
}

:root[data-theme="light"] .mobile-dropdown-menu svg {
  color: #222 !important;
  fill: #222 !important;
  stroke: #222 !important;
}

:root[data-theme="light"] .mobile-dropdown-menu {
  border: 2px solid #2196f3 !important;
  border-radius: 16px !important;
  background: #fff !important;
  box-shadow: 0 4px 24px 0 rgba(33,150,243,0.08);
  overflow: visible !important;
}

:root[data-theme="light"] .mobile-dropdown-menu * {
  background: none !important;
}

:root[data-theme="light"] .mobile-menu-divider,
:root[data-theme="light"] .mobile-dropdown-menu hr {
  border: none;
  border-top: 1px solid #e0e0e0 !important;
  margin: 12px 0;
  display: block !important;
}

/* 亮色模式只顯示太陽，暗色模式只顯示月亮 */
.theme-icon-sun { display: none; }
.theme-icon-moon { display: inline; }
:root[data-theme="light"] .theme-icon-sun { display: inline !important; }
:root[data-theme="light"] .theme-icon-moon { display: none !important; }

:root[data-theme="light"] .mobile-menu-divider {
  display: none !important;
}

.mobile-dropdown-menu {
  min-width: 0 !important;
  max-width: 220px !important;
  width: 80vw !important;
  margin: 0 auto !important;
  left: 80% !important;
  text-align: center;
  min-width: 180px;
  max-width: 220px;
  width: 80vw;
  margin: 0 auto;
}
.mobile-dropdown-menu .mobile-menu-item {
  justify-content: center !important;
  text-align: center !important;
}
.mobile-dropdown-menu .mobile-theme-toggle {
  justify-content: center !important;
}

.mobile-dropdown-menu {
  position: fixed !important;
  left: 50% !important;
  top: 90px !important;
  transform: translateX(-50%) !important;
  width: 90vw !important;
  max-width: 220px !important;
  min-width: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 9999 !important;
}

/* ========= 最終覆蓋：手機下拉菜單固定靠右 ========= */
.mobile-dropdown-menu {
  position: absolute !important;
  right: 0 !important;
  left: auto !important;
  top: calc(100% + 10px) !important;
  transform: none !important;
}

/* 手機下拉菜單顯示/隱藏控制 */
.mobile-dropdown-menu {
  display: none !important;
}
.mobile-dropdown-menu.active {
  display: block !important;
}

/* 暗色模式：手機下拉菜單同樣藍色圓角邊框 */
:root[data-theme="dark"] .mobile-dropdown-menu {
  border: 2px solid #2196f3 !important;
  border-radius: 16px !important;
  background: var(--bg-secondary) !important; /* 仍用深色背景 */
  box-shadow: 0 4px 24px 0 rgba(33,150,243,0.08);
}

/* 移除下拉菜單項目的 hover 藍色背景 */
.mobile-dropdown-menu .mobile-menu-item:hover {
  background: none !important;
  color: inherit !important;
}

.contact-social-icons {
  margin-top: 2.2rem !important;
}

/* ====== 調整 About 頁面底部社群圖示整體位置 ====== */
.footer-contact-info {
  margin-top: 1.6rem !important; /* 直接推整個容器，避免被 flex 垂直置中抵消 */
}

/* ===== 手機版導航列微調 - 置於檔尾確保最高優先 ===== */
/* 1. 頭像與菜單鍵略為內縮，避免貼邊 */
.mobile-avatar{ margin-left:8px !important; }
.mobile-menu-container{ margin-right:8px !important; }

/* 2. 亮色模式：active/focus 狀態保持可見（避免白底白圖示） */
:root[data-theme="light"] .mobile-menu-button:active,
:root[data-theme="light"] .mobile-menu-button:focus{
  background:none !important;
  color:#222 !important;
}

/* 3. 暗色模式：選單項 hover 背景使用主色，文字/圖示保持反差 */
:root[data-theme="dark"] .mobile-dropdown-menu .mobile-menu-item:hover{
  background:var(--primary-color) !important;
  color:var(--text-inverse) !important;
}

/* 4. 擴大點擊區域 - 增加上下內距 */
.mobile-dropdown-menu .mobile-menu-item{
  padding:14px 20px !important;
}

/* === 修正：暗色模式 hover 保持原色 === */
:root[data-theme="dark"] .mobile-dropdown-menu .mobile-menu-item:hover,
:root[data-theme="dark"] .mobile-dropdown-menu .mobile-menu-item:active {
  background: none !important;
  color: inherit !important;
}

/* === 亮色模式：三點按鈕 hover/active/ focus 維持原色，不變白 === */
:root[data-theme="light"] .mobile-menu-button:hover,
:root[data-theme="light"] .mobile-menu-button:active,
:root[data-theme="light"] .mobile-menu-button:focus {
  background: none !important;
  color: #222 !important;
}

/* === 手機版導航列向下滑隱藏，向上滑顯示 === */
.mobile-navbar {
  transition: transform 0.25s ease-in-out !important;
}
.mobile-navbar.nav-hidden {
  transform: translateY(-100%) !important;
}

/* === 手機版：縮短 Stay Updated 與聯絡資訊之間的距離 === */
@media (max-width: 768px) {
  .footer-contact-info {
    margin-top: 0.2rem !important; /* 原 1.6rem */
  }
  .contact-social-icons {
    margin-top: 0.3rem !important; /* 原 2.2rem */
    margin-bottom: 0.3rem !important; /* 視覺再近一點 */
  }
}

/* === 修正：讓首頁最後一篇文章與 Stay Updated 區塊保持距離 === */
:root[data-theme="light"] .posts-grid,
:root[data-theme="dark"]  .posts-grid {
  margin-bottom: 0rem !important;  /* 充分留白，避免區塊遮蓋 */
}

/* === 再覆蓋一次（含亮／暗主題），確保 Join 按鈕尺寸生效 === */
:root[data-theme="light"] .email-subscription.with-separator .email-input-group button,
:root[data-theme="dark"]  .email-subscription.with-separator .email-input-group button {
  padding: 0.3rem 0.8rem !important;
  font-size: 0.8rem !important;
}

/* === 首頁作品集行動按鈕 === */
.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 1.5rem;
}

.intro-action {
  align-items: center;
  background: transparent;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  color: var(--text-primary) !important;
  display: inline-flex;
  font-size: 0.9rem;
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}

.intro-action:hover {
  border-color: var(--primary-color);
  color: var(--primary-color) !important;
  transform: translateY(-1px);
}

.intro-action-primary,
.intro-action-primary:hover {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse) !important;
}

.intro-action:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

@media (max-width: 480px) {
  .intro-actions {
    align-items: stretch;
    flex-direction: column;
    width: 100%;
  }

  .intro-action {
    width: 100%;
  }
}

/* Project profile eyebrow */
.project-profile-eyebrow {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* === Issue #13: evidence-led Project portfolio === */
.projects-index {
  color: var(--text-primary) !important;
  margin: 0 auto !important;
  max-width: 1120px !important;
  padding: clamp(1.15rem, 2.5vw, 2.5rem) clamp(1rem, 3vw, 2.5rem) 3rem !important;
}

.projects-index-header {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: clamp(1.5rem, 3vw, 2rem);
  padding-bottom: clamp(1rem, 2vw, 1.5rem);
}

.projects-index-header h1 {
  color: var(--text-primary) !important;
  font-size: clamp(2.25rem, 5vw, 4rem) !important;
  letter-spacing: -0.04em;
  line-height: 1 !important;
  margin: 0 !important;
}

.project-group {
  margin: 0 0 clamp(1.5rem, 3vw, 2rem);
}

.project-group-heading {
  margin-bottom: 0.85rem;
}

.project-group-heading h2 {
  color: var(--text-primary) !important;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem) !important;
  letter-spacing: -0.025em;
  margin: 0 !important;
}

.project-card-grid {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

.project-card {
  align-items: start;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary) !important;
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
  margin: 0 !important;
  min-width: 0;
  padding: 1rem 0 !important;
}

.project-card:first-child {
  border-top: 1px solid var(--border-color) !important;
}

.project-card-primary,
.project-card-copy {
  min-width: 0;
}

.project-card-copy {
  align-self: center;
}

.project-card-heading {
  align-items: start;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.project-card-kicker {
  color: var(--text-secondary) !important;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  margin: 0;
  text-transform: uppercase;
}

.project-card h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  line-height: 1.2 !important;
  margin: 0.35rem 0 0 !important;
}

.project-card[data-project-featured="true"] h3 {
  margin-top: 0 !important;
}

.projects-index .project-card h3 {
  margin-top: 0 !important;
}

.project-card h3 a {
  color: var(--text-primary) !important;
  hyphens: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.project-card h3 a {
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.project-card .project-status {
  flex: 0 0 auto;
  margin-top: 0.05rem;
}

.project-status {
  background: var(--bg-tertiary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 999px;
  color: var(--text-primary) !important;
  display: inline-flex;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.3;
  padding: 0.35rem 0.6rem;
  white-space: nowrap;
}

.project-profile-header .project-status {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

.project-card-description {
  color: var(--text-secondary) !important;
  line-height: 1.55;
  margin: 0 !important;
}

.project-card-outcome {
  color: var(--text-secondary) !important;
  font-size: 0.9rem;
  line-height: 1.5;
  margin: 0.5rem 0 0 !important;
}

.project-action:hover,
.project-action:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

.project-profile {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 12px !important;
  color: var(--text-primary) !important;
  margin: 2rem auto !important;
  max-width: 1120px !important;
  overflow: hidden;
  padding: 0 !important;
}

.project-profile-header,
.project-profile-body,
.project-related-writing {
  padding: clamp(1.5rem, 4vw, 3rem) !important;
}

.project-profile-header {
  background: var(--bg-secondary) !important;
  border-bottom: 1px solid var(--border-color);
}

.project-profile-heading {
  align-items: start;
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
}

.project-profile-heading h1 {
  color: var(--text-primary) !important;
  font-size: clamp(2rem, 6vw, 4.4rem) !important;
  letter-spacing: -0.045em;
  line-height: 1.05 !important;
  margin: 0.45rem 0 1rem !important;
}

.project-profile-description {
  color: var(--text-secondary) !important;
  font-size: clamp(1rem, 2vw, 1.25rem);
  line-height: 1.7;
  margin: 0;
  max-width: 68ch;
}

.project-profile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.project-action {
  align-items: center;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  color: var(--text-primary) !important;
  display: inline-flex;
  font-weight: 700;
  gap: 0.4rem;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  text-decoration: none !important;
}

.project-action-primary {
  background: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--text-inverse) !important;
}

.project-topic-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.25rem;
}

.project-topic {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary) !important;
  font-size: 0.82rem;
  line-height: 1.35;
  padding: 0.35rem 0.65rem;
}

.project-profile-body {
  margin: 0 auto !important;
  max-width: 76ch;
}

.project-profile-body h2,
.project-section-heading h2 {
  color: var(--text-primary) !important;
  font-size: clamp(1.35rem, 3vw, 1.9rem) !important;
  letter-spacing: -0.02em;
  margin: 2rem 0 0.85rem !important;
}

.project-profile-body p,
.project-profile-body li {
  color: var(--text-secondary) !important;
  line-height: 1.7;
}

.project-profile-body li {
  margin-bottom: 0.55rem;
}

.project-related-writing {
  border-top: 1px solid var(--border-color);
}

.project-section-heading h2 {
  margin-top: 0.35rem !important;
}

.project-writing-list {
  display: grid;
  gap: 0.85rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.project-writing-card {
  background: var(--bg-secondary) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px;
  margin: 0 !important;
  padding: 1.1rem 1.2rem !important;
}

.project-writing-card h3 {
  color: var(--text-primary) !important;
  font-size: 1.05rem !important;
  line-height: 1.35;
  margin: 0 0 0.4rem !important;
}

.project-writing-card p {
  margin: 0;
}

.project-related-writing {
  margin-top: 0;
}

.project-writing-meta {
  align-items: center;
  color: var(--text-secondary) !important;
  display: flex;
  flex-wrap: wrap;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.76rem;
  gap: 0.75rem;
  justify-content: space-between;
  letter-spacing: 0.02em;
}

.project-writing-card h3 a {
  color: var(--text-primary) !important;
  overflow-wrap: anywhere;
}

@media (max-width: 768px) {
  .project-group-heading {
    align-items: start;
    grid-template-columns: 1fr;
  }

  .project-card-grid {
    grid-template-columns: 1fr;
  }

  .project-card {
    column-gap: 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.55rem;
  }

}

@media (max-width: 480px) {
  .projects-index {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  .project-profile {
    border-left: 0 !important;
    border-radius: 0 !important;
    border-right: 0 !important;
    margin-left: -1rem !important;
    margin-right: -1rem !important;
  }

  .project-profile-heading {
    flex-direction: column;
  }

  .project-profile-actions,
  .project-action {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-action {
    scroll-behavior: auto;
  }
}

/* LadaGAN report media: quiet, monochrome evidence grids */
.ladagan-wide-figure {
  margin: 2rem 0;
}

.ladagan-wide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d6d6d6;
}

.ladagan-wide-figure figcaption,
.ladagan-stage-grid figcaption,
.ladagan-epoch-grid figcaption {
  margin-top: 0.55rem;
  color: #666;
  font-size: 0.85rem;
  line-height: 1.5;
  text-align: center;
}

.ladagan-stage-grid,
.ladagan-epoch-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
  margin: 2rem 0;
}

.ladagan-stage-grid figure,
.ladagan-epoch-grid figure {
  margin: 0;
}

.ladagan-stage-grid img,
.ladagan-epoch-grid img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid #d6d6d6;
}

@media (max-width: 768px) {
.ladagan-stage-grid,
.ladagan-epoch-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
  }
}

/* ==========================================================================
   Issue #14 — Writing surface and evidence-first reader shell
   The visual language stays intentionally monochrome: the relationship ledger
   is the signature, while evidence earns the wider region.
   ========================================================================== */

.skip-link {
  background: var(--primary-color) !important;
  color: var(--text-inverse) !important;
  left: 1rem;
  padding: 0.75rem 1rem;
  position: fixed;
  text-decoration: none !important;
  top: 0.75rem;
  transform: translateY(-180%);
  transition: transform 0.15s ease !important;
  z-index: 2000;
}

.skip-link:focus-visible {
  outline: 3px solid var(--primary-color) !important;
  outline-offset: 3px;
  transform: translateY(0);
}

#main-content:focus {
  outline: none;
}

.writing-index,
.writing-shell {
  color: var(--text-primary);
  min-width: 0;
}

.writing-index {
  background: var(--bg-card);
  margin: 0 auto;
  max-width: 1160px;
  padding: clamp(1.25rem, 4vw, 3.5rem);
  padding-top: 0.5rem;
}

.writing-index-title-screen-reader-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.writing-eyebrow {
  color: var(--text-secondary);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1.4;
  margin: 0 0 0.8rem;
  text-transform: uppercase;
}

.writing-index h1,
.writing-shell h1 {
  color: var(--text-primary);
  font-size: clamp(2.2rem, 6vw, 4.7rem);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 0;
  overflow-wrap: anywhere;
}

.writing-index-section {
  border-bottom: 1px solid var(--border-color);
  padding: clamp(2rem, 5vw, 4rem) 0;
}

.writing-index > .writing-index-section:first-of-type {
  padding-top: 0.5rem;
}

.writing-topic-discovery {
  display: flex;
  justify-content: flex-end;
  padding-top: 0.75rem;
}

.writing-section-heading {
  align-items: end;
  display: flex;
  gap: 2rem;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.writing-section-heading h2,
.writing-series-entry h3,
.writing-shell h2 {
  color: var(--text-primary);
  margin: 0;
}

.writing-section-heading h2 {
  font-size: clamp(1.55rem, 3vw, 2.3rem);
  letter-spacing: -0.02em;
}

.writing-topic-index-link {
  align-items: center;
  color: var(--text-primary) !important;
  display: inline-flex;
  flex: 0 0 auto;
  font-weight: 700;
  gap: 0.5rem;
  min-height: 44px;
  padding: 0.65rem 0;
  text-decoration: none !important;
}

.writing-topic-index-link:hover,
.writing-topic-index-link:focus-visible {
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

.writing-card-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.writing-card-list {
  display: grid;
  gap: 0.75rem;
}

article.writing-card {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  border-radius: 10px !important;
  color: var(--text-primary);
  margin: 0 !important;
  min-width: 0;
  padding: 1.25rem !important;
}

article.writing-card:hover {
  border-color: var(--primary-color);
  box-shadow: var(--shadow-sm);
}

.writing-card-featured {
  border-top: 3px solid var(--primary-color) !important;
  min-height: 15rem;
}

.writing-card-meta,
.writing-meta {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.82rem;
  gap: 0.75rem;
  line-height: 1.5;
}

.writing-card-meta {
  justify-content: flex-start;
}

.writing-kind {
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  display: inline-flex;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.3rem 0.5rem;
  text-transform: uppercase;
}

.writing-kind-note {
  border-style: dashed;
}

.writing-card h3 {
  font-size: 1.15rem;
  line-height: 1.3;
  margin: 0.9rem 0 0.6rem;
}

.writing-card h3 a,
.writing-related-item h3 a,
.writing-series-entry h3 a {
  color: var(--text-primary) !important;
  overflow-wrap: anywhere;
  text-decoration: none !important;
}

.writing-card h3 a:hover,
.writing-card h3 a:focus-visible,
.writing-related-item h3 a:hover,
.writing-related-item h3 a:focus-visible,
.writing-series-entry h3 a:hover,
.writing-series-entry h3 a:focus-visible {
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

.writing-card-description,
.writing-series-entry p,
.writing-related-item p {
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
  overflow-wrap: anywhere;
}

.writing-card-topics {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.writing-card-topics {
  margin-top: 1rem;
}

.writing-card-topics span {
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: 0.78rem;
  line-height: 1.4;
  padding: 0.3rem 0.5rem;
}

.writing-empty-state {
  background: var(--bg-secondary);
  border-left: 3px solid var(--border-color);
  color: var(--text-secondary);
  margin: 0;
  padding: 1rem 1.1rem;
}

.writing-series-list {
  display: grid;
  gap: 1rem;
}

.writing-series-entry {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-left: 3px solid var(--primary-color);
  min-width: 0;
  padding: 1.25rem;
}

.writing-series-entry-meta {
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.75rem;
  text-transform: uppercase;
}

.writing-series-entry h3 {
  font-size: 1.3rem;
  margin: 0.65rem 0 0.45rem;
}

.writing-series-entry-start {
  font-size: 0.9rem;
  margin-top: 1rem !important;
}

.writing-series-entry-start a {
  color: var(--text-primary) !important;
  font-weight: 700;
}

.writing-archive-list {
  list-style: none;
  margin: 0 !important;
  padding: 0 !important;
  position: relative;
}

.writing-archive-list::before {
  background: linear-gradient(180deg, var(--primary-color), var(--border-color));
  border-radius: 2px;
  content: "";
  inset-block: 0.5rem;
  inset-inline-start: 0.425rem;
  position: absolute;
  width: 4px;
  z-index: 1;
}

.writing-archive-list > li {
  border-top: 1px solid var(--border-color);
  margin: 0;
  padding: 0;
  position: relative;
}

.writing-archive-list > li::before {
  background: var(--bg-color);
  border: 2px solid var(--primary-color);
  border-radius: 50%;
  content: "";
  height: 0.7rem;
  inset-inline-start: 0.2rem;
  position: absolute;
  top: 1.88rem;
  width: 0.7rem;
  z-index: 2;
}

.writing-archive-list > li:last-child {
  border-bottom: 1px solid var(--border-color);
}

.writing-card-archive {
  align-items: start;
  border: 0 !important;
  border-radius: 0 !important;
  display: grid;
  gap: 0.5rem 1.5rem;
  grid-template-columns: minmax(10rem, 0.28fr) minmax(0, 1fr);
  padding: 1.25rem 0 1.25rem 1.75rem !important;
}

.writing-card-archive .writing-card-meta {
  grid-row: span 2;
}

.writing-card-archive h3 {
  margin: 0;
}

.writing-card-archive .writing-card-description,
.writing-card-archive .writing-card-topics {
  grid-column: 2;
}

/* Shared reader shell */
article.writing-shell {
  background: var(--bg-card) !important;
  border: 1px solid var(--border-color);
  border-radius: 12px !important;
  color: var(--text-primary);
  margin: 2rem auto !important;
  max-width: 1200px;
  min-width: 0;
  overflow: visible;
  padding: 0 !important;
}

.writing-header {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  min-width: 0;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.writing-cover {
  background: var(--bg-secondary);
  border-bottom: 1px solid var(--border-color);
  margin: 0;
  padding: clamp(1rem, 3vw, 2rem);
  text-align: center;
}

.writing-cover img {
  display: inline-block;
  height: auto;
  max-height: 36rem;
  max-width: 100%;
  object-fit: contain;
}

.writing-header h1 {
  max-width: 24ch;
}

.writing-description {
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  line-height: 1.7;
  margin: 1.25rem 0 1.5rem;
  max-width: 70ch;
}

.writing-meta {
  border-bottom: 1px solid var(--border-color);
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
}

.writing-context {
  align-items: baseline;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.92rem;
  gap: 0.4rem;
  line-height: 1.55;
}

.writing-context a,
.writing-topics a {
  color: var(--text-secondary) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.18em;
}

.writing-context a:hover,
.writing-context a:focus-visible,
.writing-topics a:hover,
.writing-topics a:focus-visible {
  color: var(--text-primary) !important;
}

.writing-context-separator,
.writing-topics-separator {
  color: var(--text-secondary);
}

.writing-topics {
  align-items: baseline;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.84rem;
  gap: 0.25rem 0.55rem;
  line-height: 1.5;
  margin: 1.5rem 0 0;
}

.writing-topics-label {
  font-size: 0.78rem;
  font-weight: 700;
}

.writing-status-notice {
  border-left: 4px solid var(--primary-color);
  color: var(--text-primary);
  margin: 1.5rem 0 0;
  padding: 0.9rem 1rem;
}

.writing-status-historical {
  background: var(--bg-tertiary);
}

.writing-status-superseded {
  background: var(--bg-card);
  border-style: dashed;
}

.writing-status-notice p {
  line-height: 1.6;
  margin: 0;
}

.writing-status-notice p + p {
  margin-top: 0.35rem;
}

.writing-status-label {
  font-weight: 700;
}

.writing-related h2 {
  font-size: 1.25rem;
  margin: 0 0 0.65rem;
}

.writing-status-notice a {
  color: var(--text-primary) !important;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.writing-layout {
  display: grid;
  gap: clamp(1.5rem, 4vw, 4rem);
  grid-template-columns: minmax(0, 1fr) minmax(12rem, 16rem);
  min-width: 0;
  padding: clamp(1.25rem, 4vw, 3rem);
}

.writing-column {
  min-width: 0;
}

.writing-body {
  color: var(--text-primary);
  font-size: 1.05rem;
  line-height: 1.8;
  margin: 0 auto;
  max-width: 76ch;
  min-width: 0;
}

.writing-body p,
.writing-body li {
  overflow-wrap: anywhere;
}

.writing-body h2,
.writing-body h3,
.writing-body h4 {
  scroll-margin-top: 6rem;
}

.writing-body h2 {
  border-bottom: 1px solid var(--border-color);
  font-size: clamp(1.45rem, 3vw, 2rem);
  margin-top: 2.75rem;
  padding-bottom: 0.4rem;
}

.writing-body h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.5rem);
  margin-top: 2rem;
}

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

.writing-body figure {
  margin: 2rem 0;
}

.writing-body figcaption {
  color: var(--text-secondary);
  font-size: 0.86rem;
  line-height: 1.5;
  margin-top: 0.6rem;
}

.writing-body :is(pre, .highlight, table) {
  max-width: 100%;
  min-width: 0;
}

.writing-body pre,
.writing-body .highlight {
  overflow-x: auto;
}

.writing-body table {
  display: block;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

.writing-body th,
.writing-body td {
  min-width: 8rem;
  padding: 0.65rem 0.8rem;
  text-align: left;
  vertical-align: top;
}

.writing-body th {
  background: var(--bg-tertiary);
}

@media (min-width: 1024px) {
  .writing-body > figure {
    margin-left: -4rem;
    max-width: calc(100vw - 4rem);
    width: calc(100% + 8rem);
  }
}

.writing-toc-mobile {
  display: none;
}

.writing-toc-desktop {
  align-self: start;
  border-left: 1px solid var(--border-color);
  margin-top: 0.25rem;
  max-height: calc(100vh - 8rem);
  overflow: auto;
  padding-left: 1rem;
  position: sticky;
  top: 6.5rem;
}

.writing-toc-label {
  color: var(--text-secondary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.writing-toc-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.writing-toc-content ul ul {
  border-left: 1px solid var(--border-color);
  margin: 0.35rem 0 0.35rem 0.45rem;
  padding-left: 0.7rem;
}

.writing-toc-content li + li {
  margin-top: 0.45rem;
}

.writing-toc-content a {
  border-left: 3px solid transparent;
  border-radius: 0 3px 3px 0;
  color: var(--text-secondary) !important;
  display: block;
  font-size: 0.88rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
  padding: 0.2rem 0.4rem;
  text-decoration: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.writing-toc-content a:hover,
.writing-toc-content a:focus-visible,
.writing-toc-content a[aria-current="location"] {
  color: var(--text-primary) !important;
}

.writing-toc-content a[aria-current="location"] {
  background: var(--bg-secondary);
  border-left-color: var(--primary-color);
  font-weight: 700;
}

.writing-related {
  border-top: 1px solid var(--border-color);
  margin: clamp(1.75rem, 4vw, 3rem) auto 0;
  max-width: 76ch;
  padding-top: 1.15rem;
}

.writing-related-list {
  display: grid;
  gap: 0;
  list-style: none;
  margin: 0.35rem 0 0;
  padding: 0;
}

.writing-related-item {
  border-bottom: 1px solid var(--border-color);
  min-width: 0;
  margin: 0;
}

.writing-related-item a {
  align-items: baseline;
  color: var(--text-primary) !important;
  column-gap: 0.75rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto 1rem;
  min-height: 44px;
  padding: 0.65rem 0;
  text-decoration: none !important;
}

.writing-related-title {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.writing-related-date {
  color: var(--text-secondary);
  font-size: 0.78rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.writing-related-arrow {
  color: var(--text-secondary);
  text-align: right;
  transition: color 140ms ease, transform 140ms ease;
}

.writing-related-item a:hover .writing-related-arrow,
.writing-related-item a:focus-visible .writing-related-arrow {
  color: var(--primary-color);
  transform: translateX(2px);
}

.writing-related-item a:focus-visible {
  border-radius: 2px;
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

@media (max-width: 520px) {
  .writing-related-item a {
    column-gap: 0.45rem;
    grid-template-columns: minmax(0, 1fr) auto 0.85rem;
  }

  .writing-related-title {
    font-size: 0.95rem;
  }

  .writing-related-date {
    font-size: 0.72rem;
  }
}

.writing-series-nav {
  align-items: start;
  border-top: 1px solid var(--border-color);
  display: flex;
  gap: 1.5rem;
  justify-content: space-between;
  margin: 2rem auto 0;
  max-width: 76ch;
  padding-top: 1.5rem;
}

.writing-series-position {
  color: var(--text-secondary);
  margin: 0;
}

.writing-series-nav-links {
  display: flex;
  flex: 1;
  gap: 1rem;
  justify-content: flex-end;
}

.writing-series-nav-links a {
  color: var(--text-primary) !important;
  display: flex;
  flex-direction: column;
  font-size: 0.88rem;
  font-weight: 700;
  gap: 0.25rem;
  max-width: 18ch;
  overflow-wrap: anywhere;
  text-align: right;
}

.writing-series-nav-links span {
  color: var(--text-secondary);
  font-weight: 400;
}

.writing-index a:focus-visible,
.writing-shell a:focus-visible,
.writing-shell summary:focus-visible,
.writing-shell button:focus-visible {
  outline: 3px solid var(--primary-color) !important;
  outline-offset: 3px;
}

@media (max-width: 1023px) {
  .writing-layout {
    display: block;
  }

  .writing-toc-desktop {
    display: none;
  }

  .writing-toc-mobile {
    border: 1px solid var(--border-color);
    display: block;
    margin: 0 auto 1.5rem;
    max-width: 76ch;
  }

  .writing-toc-mobile summary {
    color: var(--text-primary);
    cursor: pointer;
    font-weight: 700;
    min-height: 44px;
    padding: 0.75rem 1rem;
  }

  .writing-toc-mobile[open] .writing-toc-content {
    border-top: 1px solid var(--border-color);
    padding: 1rem;
  }

  .writing-toc-mobile .writing-toc-content ul {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

  .writing-body > :is(pre, .highlight, figure) {
    margin-left: 0;
    max-width: 100%;
    width: 100%;
  }
}

@media (max-width: 767px) {
  .writing-index {
    padding: 1rem;
  }

  .writing-section-heading,
  .writing-series-nav {
    align-items: start;
    flex-direction: column;
    gap: 0.75rem;
  }

  .writing-card-grid {
    grid-template-columns: 1fr;
  }

  .writing-card-archive {
    display: block;
  }

  .writing-card-archive .writing-card-meta {
    margin-bottom: 0.65rem;
  }

  .writing-card-archive .writing-card-description,
  .writing-card-archive .writing-card-topics {
    margin-top: 0.6rem;
  }

  article.writing-shell {
    border-left: 0;
    border-radius: 0 !important;
    border-right: 0;
    margin: 1rem -1rem !important;
  }

  .writing-header,
  .writing-layout {
    padding: 1.25rem;
  }

  .writing-body {
    font-size: 1rem;
    line-height: 1.75;
  }

  .writing-series-nav-links {
    justify-content: space-between;
    width: 100%;
  }

  .writing-series-nav-links a {
    text-align: left;
  }

  .writing-series-nav-links .writing-series-next {
    text-align: right;
  }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .writing-index *,
  .writing-shell * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

@media (max-width: 480px) {
  .ladagan-stage-grid,
  .ladagan-epoch-grid {
    grid-template-columns: 1fr;
  }
}

/* === Issue #16: Home, About, navigation, and capability truth === */
.home-orientation,
.site-about {
  color: var(--text-primary);
  margin: 0 auto;
  max-width: 1120px;
  padding: clamp(1.5rem, 4vw, 3.5rem) clamp(1rem, 3vw, 2.5rem) 4rem;
}

.home-orientation {
  padding-bottom: 2.25rem;
  padding-top: clamp(1.25rem, 3vw, 2rem);
}

.home-eyebrow,
.about-eyebrow,
.about-subheading,
.newsletter-capability-kicker {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 0.75rem;
  text-transform: uppercase;
}

.home-introduction,
.about-introduction {
  align-items: start;
  display: grid;
  gap: clamp(2rem, 6vw, 5rem);
  grid-template-columns: minmax(0, 1.45fr) minmax(15rem, 0.65fr);
  padding: clamp(1rem, 4vw, 3rem) 0 clamp(3rem, 7vw, 5rem);
}

.home-introduction {
  grid-template-columns: minmax(0, 1fr);
  padding: 0 0 clamp(1rem, 2.2vw, 1.75rem);
}

.home-introduction-copy {
  max-width: 64rem;
}

.home-introduction h1,
.about-introduction h1 {
  color: var(--text-primary) !important;
  font-size: clamp(2.4rem, 7vw, 5rem) !important;
  letter-spacing: -0.045em;
  line-height: 1.02 !important;
  margin: 0 !important;
  max-width: 18ch;
  overflow-wrap: anywhere;
}

.home-introduction h1 {
  font-size: clamp(2.25rem, 6vw, 4.4rem) !important;
  max-width: 30ch;
}

.about-lede {
  color: var(--text-secondary);
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  line-height: 1.7;
  margin: 1.5rem 0 0;
  max-width: 68ch;
}

.about-actions,
.home-flagship-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.home-action,
.about-action,
.home-section-link {
  align-items: center;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  color: var(--text-primary) !important;
  display: inline-flex;
  font-weight: 700;
  justify-content: center;
  min-height: 44px;
  padding: 0.65rem 1rem;
  text-decoration: none !important;
}

.home-action-primary,
.about-action-primary {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--text-inverse) !important;
}

.home-action:hover,
.home-action:focus-visible,
.about-action:hover,
.about-action:focus-visible,
.home-section-link:hover,
.home-section-link:focus-visible,
.desktop-navbar a:focus-visible,
.desktop-navbar button:focus-visible,
.mobile-navbar a:focus-visible,
.mobile-navbar button:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

.about-portrait {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.35rem;
}

.home-section,
.about-section {
  border-top: 1px solid var(--border-color);
  padding: clamp(2.5rem, 6vw, 5rem) 0;
}

.home-section {
  padding: clamp(1.25rem, 2.2vw, 2rem) 0;
}

.home-section-heading,
.about-section-heading {
  margin-bottom: 1.5rem;
  max-width: 72ch;
}

.home-section-heading h2,
.about-section-heading h2 {
  color: var(--text-primary) !important;
  font-size: clamp(1.6rem, 3.5vw, 2.5rem) !important;
  letter-spacing: -0.025em;
  line-height: 1.12 !important;
  margin: 0 !important;
}

.home-section-heading > p:not(.home-eyebrow),
.about-section-heading > p:not(.about-eyebrow) {
  color: var(--text-secondary);
  line-height: 1.7;
}

.home-section-heading-inline {
  align-items: end;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  max-width: none;
  margin-bottom: 1rem;
}

.home-section-link {
  border-color: transparent;
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0.4rem 0.25rem;
}

.home-flagship {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-left: 4px solid var(--primary-color);
  border-radius: 10px;
  display: grid;
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: minmax(0, 1fr) minmax(13rem, 0.4fr);
  margin: 0 !important;
  padding: clamp(1.1rem, 2.5vw, 1.6rem) !important;
}

.home-project-meta {
  align-items: center;
  color: var(--text-secondary);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.8rem;
  gap: 0.75rem;
  justify-content: space-between;
}

.home-flagship h2,
.home-project-card h3 {
  font-size: clamp(1.2rem, 2.4vw, 1.7rem) !important;
  line-height: 1.2 !important;
  margin: 0.45rem 0 0.55rem !important;
}

.home-flagship h2 a,
.home-project-card h3 a {
  color: var(--text-primary) !important;
  overflow-wrap: anywhere;
  text-underline-offset: 0.18em;
}

.home-flagship-description,
.home-project-card > p {
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0 !important;
}

.home-flagship-actions {
  align-content: start;
  align-items: center;
  flex-direction: row;
  gap: 0.25rem 0.5rem;
  margin-top: 0;
}

.home-flagship-actions .home-action:not(.home-action-primary) {
  border-color: transparent;
  color: var(--text-secondary) !important;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.home-project-grid,
.about-honors-grid {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-project-card,
.about-background-block,
.about-education,
.about-toolbox-list > div {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: 8px;
  min-width: 0;
  padding: 1rem;
}

.home-project-card {
  margin: 0 !important;
  padding: 1rem !important;
}

.home-project-card h3 {
  margin: 0 0 0.5rem !important;
}

.home-project-card > p {
  margin: 0 !important;
}

.about-introduction-facts span {
  border: 1px solid var(--border-color);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: 0.78rem;
  padding: 0.3rem 0.55rem;
}

.home-writing-list {
  display: grid;
  gap: 0.8rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.home-writing-list .writing-card-home {
  padding: 1rem !important;
}

.home-writing-list .writing-card-home .writing-card-meta {
  font-size: 0.72rem;
  gap: 0.5rem;
}

.home-writing-list .writing-card-home .writing-kind,
.home-writing-list .writing-card-home .writing-card-topics {
  display: none;
}

.home-writing-list .writing-card-home h3 {
  font-size: clamp(1.05rem, 1.25vw, 1.2rem) !important;
  line-height: 1.35 !important;
  margin: 0.6rem 0 0.45rem !important;
}

.home-writing-list .writing-card-home .writing-card-description {
  line-height: 1.55;
  margin: 0 !important;
}

.home-empty-state {
  background: var(--bg-secondary);
  border-left: 3px solid var(--border-color);
  color: var(--text-secondary);
  padding: 1rem;
}

.about-introduction-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.25rem;
}

.about-portrait {
  margin: 0;
}

.about-portrait img {
  aspect-ratio: 1;
  border-radius: 8px;
  display: block;
  height: auto;
  object-fit: cover;
  width: 100%;
}

.about-portrait figcaption {
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.55;
  margin-top: 0.75rem;
}

.about-background-grid h3,
.about-toolbox-list h3 {
  color: var(--text-primary) !important;
  margin: 0 0 0.65rem !important;
}

.about-background-grid p,
.about-toolbox-list p,
.about-course-list,
.about-education-list {
  color: var(--text-secondary);
  line-height: 1.7;
}

.about-background-grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-muted {
  font-size: 0.9rem;
}

.about-course-list,
.about-education-list {
  margin: 1rem 0 0;
  padding-left: 1.2rem;
}

.about-course-list li,
.about-education-list li {
  margin-bottom: 0.9rem;
}

.about-course-list time,
.about-education-list time {
  display: block;
  font-size: 0.82rem;
}

.about-honors-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.about-honor {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  color: var(--text-primary) !important;
  display: grid;
  gap: 0.85rem;
  grid-template-columns: 7rem minmax(0, 1fr);
  min-height: 44px;
  padding: 0.75rem;
  text-decoration: none !important;
}

.about-honor img {
  aspect-ratio: 4 / 3;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.about-honor span {
  align-self: center;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.about-honor small {
  color: var(--text-secondary);
}

.about-honor strong {
  line-height: 1.4;
  overflow-wrap: normal;
  word-break: normal;
}

.about-toolbox-list {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (min-width: 769px) {
  .footer-dual-container {
    align-items: center;
    box-sizing: border-box;
    display: grid;
    gap: clamp(3rem, 7vw, 6rem);
    grid-template-columns: minmax(0, 32rem) minmax(15rem, 1fr);
    margin-inline: auto;
    max-width: 960px;
    width: 100%;
  }

  .footer-dual-container > .footer-contact-info {
    justify-self: end;
    margin: 0 !important;
    padding: 0;
    width: 100%;
  }

  .footer-dual-container .contact-social-icons {
    margin-top: 0 !important;
  }
}

.newsletter-capability {
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.newsletter-capability-copy h2 {
  color: var(--text-primary) !important;
  font-size: 1.2rem !important;
  line-height: 1.4 !important;
  margin: 0 !important;
}

.newsletter-capability-copy p:not(.newsletter-capability-kicker) {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.6;
  margin: 0.5rem 0 0;
  max-width: 62ch;
}

.newsletter-signup {
  display: grid;
  gap: 0.4rem;
  margin-top: 0.85rem;
  max-width: 32rem;
}

.newsletter-signup label {
  color: var(--text-primary);
  font-size: 0.8rem;
  font-weight: 500;
}

.newsletter-signup-controls {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.5rem;
}

.newsletter-signup input,
.newsletter-signup button {
  border-radius: 6px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.4;
  min-height: 48px;
  padding: 0.65rem 0.85rem;
}

.newsletter-signup input {
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  color: var(--text-primary);
  flex: 1 1 0;
  min-width: 0;
}

.newsletter-signup button {
  background: var(--primary-color);
  border: 1px solid var(--primary-color);
  color: var(--text-inverse);
  cursor: pointer;
  font-weight: 600;
  flex: 0 0 auto;
  min-width: 4.5rem;
}

.newsletter-signup button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.newsletter-signup input:focus-visible,
.newsletter-signup button:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 2px;
}

.newsletter-signup-status {
  color: var(--text-secondary);
  font-size: 0.8rem;
  line-height: 1.5;
  margin: 0.1rem 0 0;
}

.newsletter-signup-status[data-state="error"] {
  color: var(--text-primary);
}

.newsletter-result {
  color: var(--text-primary);
  margin: clamp(3rem, 8vw, 6rem) auto;
  max-width: 46rem;
  padding: 0 1rem;
}

.newsletter-result-kicker {
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.newsletter-result h1 {
  color: var(--text-primary);
  font-size: clamp(2rem, 5vw, 3rem);
  line-height: 1.2;
  margin: 0.75rem 0 1.5rem;
}

.newsletter-result p:not(.newsletter-result-kicker) {
  color: var(--text-secondary);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.newsletter-result p a {
  color: var(--primary-color) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.15em;
}

.newsletter-result a:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

.newsletter-result-contact {
  padding-top: 1rem;
}

.mobile-menu-button {
  height: 44px;
  width: 44px;
}

.mobile-menu-items {
  list-style: none;
  margin: 0;
  padding: 8px 0;
}

.mobile-menu-items li {
  margin: 0;
}

.desktop-navbar a.active,
.mobile-menu-item.active {
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

@media (max-width: 900px) {
  .home-introduction,
  .about-introduction,
  .home-flagship,
  .about-background-grid {
    grid-template-columns: 1fr;
  }

  .home-flagship-actions {
    flex-direction: row;
  }

  .home-project-grid,
  .home-writing-list,
  .about-toolbox-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .home-introduction h1 {
    font-size: clamp(1.85rem, 6vw, 2.1rem) !important;
  }

  .home-section-heading-inline {
    align-items: center;
    flex-wrap: wrap;
  }

  .home-section-link {
    width: fit-content;
  }

  .home-project-grid,
  .home-writing-list,
  .about-honors-grid,
  .about-toolbox-list {
    grid-template-columns: 1fr;
  }

  .home-flagship-actions {
    align-items: center;
    flex-direction: row;
  }

  .about-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .about-action {
    width: 100%;
  }

  .home-action {
    width: auto;
  }

  .about-honor {
    grid-template-columns: 5rem minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  .newsletter-capability {
    flex: 0 1 auto;
    width: 100%;
  }

  .footer-contact-info {
    flex: 0 1 auto;
    margin-right: 0;
    max-width: 300px;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-orientation *,
  .site-about *,
  .newsletter-capability *,
  .desktop-navbar *,
  .mobile-navbar * {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}

/* Keep the mobile menu vertical and readable despite the shared desktop nav rules. */
@media (max-width: 768px) {
  .mobile-dropdown-menu {
    max-width: calc(100vw - 24px) !important;
    min-width: min(12.5rem, calc(100vw - 24px)) !important;
    width: min(14rem, calc(100vw - 24px)) !important;
  }

  .mobile-dropdown-menu .mobile-menu-items {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    height: auto !important;
    justify-content: flex-start !important;
    margin: 0 !important;
    padding: 0.375rem 0 !important;
    width: 100% !important;
  }

  .mobile-dropdown-menu .mobile-menu-items > li {
    display: block !important;
    flex: 0 0 auto !important;
    height: auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    min-height: 44px !important;
    width: 100% !important;
  }

  .mobile-dropdown-menu .mobile-menu-item {
    align-items: center !important;
    box-sizing: border-box !important;
    flex: 0 0 auto !important;
    height: auto !important;
    justify-content: flex-start !important;
    line-height: 1.35 !important;
    min-height: 44px !important;
    min-width: 0 !important;
    overflow-wrap: normal !important;
    padding: 0.65rem 1rem !important;
    text-align: left !important;
    transform: none !important;
    white-space: nowrap !important;
    width: 100% !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .mobile-dropdown-menu .mobile-theme-toggle {
    justify-content: center !important;
  }
}

/* Wrap code at word boundaries on phones instead of creating a horizontal scroller. */
@media (max-width: 767px) {
  .writing-body pre,
  .writing-body .highlight,
  .writing-body .highlight pre {
    box-sizing: border-box;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  .writing-body pre,
  .writing-body .highlight pre,
  .writing-body pre code {
    overflow-wrap: anywhere !important;
    white-space: pre-wrap !important;
    word-break: normal !important;
  }

  .writing-body pre {
    font-size: 0.8125rem !important;
    line-height: 1.55 !important;
    padding: 0.75rem !important;
  }
}

/* Refine the mobile navigation into a compact, theme-aware menu. */
@media (max-width: 768px) {
  :root[data-theme="light"] .mobile-navbar .mobile-dropdown-menu,
  :root[data-theme="dark"] .mobile-navbar .mobile-dropdown-menu {
    background: var(--bg-card) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 12px !important;
    box-shadow: var(--shadow-lg) !important;
    max-width: calc(100vw - 24px) !important;
    min-width: min(12.5rem, calc(100vw - 24px)) !important;
    overflow: hidden !important;
    padding: 0.25rem !important;
    text-align: left !important;
    width: min(14rem, calc(100vw - 24px)) !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-items {
    align-items: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0.25rem 0 !important;
    width: 100% !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-items > li {
    margin: 0 !important;
    min-height: 44px !important;
    width: 100% !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-item {
    align-items: center !important;
    background: transparent !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    color: var(--text-primary) !important;
    display: flex !important;
    font-size: 0.95rem !important;
    font-weight: 500 !important;
    justify-content: flex-start !important;
    line-height: 1.35 !important;
    min-height: 44px !important;
    padding: 0 0.75rem !important;
    text-align: left !important;
    text-decoration: none !important;
    transform: none !important;
    width: 100% !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-item[aria-current="page"] {
    background: var(--border-light) !important;
    box-shadow: inset 2px 0 0 var(--primary-color) !important;
    font-weight: 700 !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-item:hover,
  .mobile-navbar .mobile-dropdown-menu .mobile-menu-item:active {
    background: var(--border-light) !important;
    color: var(--text-primary) !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-item:focus {
    outline: none !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-item:focus-visible {
    outline: 2px solid Highlight !important;
    outline-offset: -2px !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-menu-divider {
    background: transparent !important;
    border: 0 !important;
    border-top: 1px solid var(--border-color) !important;
    display: block !important;
    height: 1px !important;
    margin: 0.25rem 0.5rem !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-theme-toggle {
    border-radius: 8px !important;
    height: 44px !important;
    justify-content: center !important;
    margin: 0.25rem 0 0 auto !important;
    min-height: 44px !important;
    padding: 0 !important;
    width: 44px !important;
  }

  .mobile-navbar .mobile-dropdown-menu .mobile-theme-toggle svg,
  .mobile-navbar .mobile-dropdown-menu .mobile-theme-toggle:hover svg {
    transform: none !important;
  }
}

/* Keep Writing collections as compact, readable rows like the Projects index. */
.writing-index-section {
  padding: clamp(1.5rem, 3vw, 2.5rem) 0;
}

.writing-section-heading {
  margin-bottom: 0.9rem;
}

.writing-section-heading .writing-eyebrow {
  margin-bottom: 0.4rem;
}

.writing-card-grid,
.writing-series-list {
  display: grid;
  gap: 0;
  grid-template-columns: minmax(0, 1fr);
}

.writing-index article.writing-card,
.writing-series-entry {
  align-items: start;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  color: var(--text-primary);
  column-gap: clamp(1.25rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
  margin: 0 !important;
  min-height: 0;
  min-width: 0;
  padding: 1rem 0 !important;
}

.writing-index article.writing-card:hover {
  box-shadow: none !important;
}

.writing-card-grid > .writing-card:first-child,
.writing-series-entry:first-child {
  border-top: 1px solid var(--border-color) !important;
}

.writing-index .writing-card-meta {
  grid-column: 1;
  grid-row: 1;
}

.writing-index .writing-kind {
  border: 0;
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  line-height: 1.45;
  padding: 0;
}

.writing-index article.writing-card h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem) !important;
  grid-column: 1;
  grid-row: 2;
  line-height: 1.25 !important;
  margin: 0.3rem 0 0 !important;
}

.writing-index article.writing-card h3 a {
  hyphens: none !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.writing-index .writing-card-description {
  align-self: center;
  grid-column: 2;
  grid-row: 1 / span 2;
  line-height: 1.55;
  margin: 0;
}

.writing-index .writing-card-topics {
  display: none !important;
}

.writing-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1rem 1.25rem;
  margin: 0 0 clamp(1rem, 2.5vw, 1.6rem);
}

.writing-year-nav a {
  align-items: baseline;
  color: var(--text-secondary) !important;
  display: inline-flex;
  font-variant-numeric: tabular-nums;
  gap: 0.45rem;
  min-height: 44px;
  padding: 0.6rem 0.1rem;
  text-decoration: none !important;
}

.writing-year-nav a:hover,
.writing-year-nav a:focus-visible {
  color: var(--text-primary) !important;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}

.writing-year-nav-count {
  color: var(--text-tertiary, var(--text-secondary));
  font-size: 0.78rem;
}

.writing-year-groups {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2rem);
}

.writing-year-group {
  border-top: 1px solid var(--border-color);
  display: grid;
  gap: clamp(1rem, 3vw, 2.5rem);
  grid-template-columns: minmax(7rem, 0.24fr) minmax(0, 1fr);
  padding-top: 0.85rem;
}

.writing-year-title {
  color: var(--text-primary);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-variant-numeric: tabular-nums;
  grid-column: 1;
  margin: 0.25rem 0;
  scroll-margin-top: 5rem;
}

.writing-year-group .writing-archive-list {
  grid-column: 2;
}

.writing-archive-list::before,
.writing-archive-list > li::before {
  display: none;
}

.writing-archive-list > li,
.writing-archive-list > li:last-child {
  border: 0;
}

.writing-card-archive {
  grid-template-columns: minmax(14rem, 0.8fr) minmax(0, 1.2fr);
  padding-left: 0 !important;
}

.writing-card-archive .writing-card-meta {
  grid-row: 1;
}

.writing-card-archive h3 {
  grid-column: 1;
  grid-row: 2;
}

.writing-card-archive .writing-card-description {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.writing-series-entry {
  border-left: 0;
  background: transparent;
}

.writing-series-entry-meta {
  grid-column: 1;
  grid-row: 1;
}

.writing-series-entry h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  grid-column: 1;
  grid-row: 2;
  line-height: 1.25;
  margin: 0.3rem 0 0;
}

.writing-series-entry > p:not(.writing-series-entry-start) {
  align-self: center;
  grid-column: 2;
  grid-row: 1;
}

.writing-series-entry > .writing-series-entry-start {
  align-self: start;
  grid-column: 2;
  grid-row: 2;
  margin: 0.4rem 0 0 !important;
}

@media (max-width: 767px) {
  .writing-index article.writing-card,
  .writing-series-entry {
    column-gap: 0;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.4rem;
    padding: 0.9rem 0 !important;
  }

  .writing-index .writing-card-meta,
  .writing-index article.writing-card h3,
  .writing-index .writing-card-description,
  .writing-series-entry-meta,
  .writing-series-entry h3,
  .writing-series-entry > p:not(.writing-series-entry-start),
  .writing-series-entry > .writing-series-entry-start {
    grid-column: 1;
    grid-row: auto;
  }

  .writing-index .writing-card-description,
  .writing-series-entry > p:not(.writing-series-entry-start),
  .writing-series-entry > .writing-series-entry-start {
    align-self: auto;
  }

  .writing-year-nav {
    column-gap: 0.85rem;
    margin-bottom: 0.85rem;
  }

  .writing-year-group {
    gap: 0.35rem;
    grid-template-columns: minmax(0, 1fr);
    padding-top: 0.7rem;
  }

  .writing-year-title,
  .writing-year-group .writing-archive-list {
    grid-column: 1;
  }

.writing-year-title {
    font-size: 1.4rem;
    margin: 0 0 0.15rem;
  }
}

/* Keep compact article tables visually centered while retaining scroll access
   for tables wider than the reading column. */
.writing-body > table {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 100%;
  width: fit-content;
}

.writing-body > :is(pre, .highlight) {
  box-sizing: border-box;
  margin-inline: auto;
  max-width: 100%;
  width: fit-content;
}

/* Give ordered Series pages the same quiet row rhythm as the Writing index. */
.series-page {
  background: var(--bg-card);
  max-width: 1160px;
  padding: clamp(1.25rem, 4vw, 3.5rem);
}

.series-page .series-page-header {
  border: 0;
  margin: 0 0 clamp(1rem, 2vw, 1.5rem);
  padding: 0;
}

.series-page .series-page-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
  line-height: 1.15 !important;
  margin: 0 0 0.4rem !important;
}

.series-page .series-page-header > p {
  font-size: 0.95rem;
  line-height: 1.5;
  margin: 0;
}

.series-page .series-page-header .series-project-link {
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.series-page .series-route-map {
  display: block;
  margin: 0;
  padding: 0;
}

.series-page .series-route-entry {
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--border-color);
  border-radius: 0;
  display: block;
  margin: 0;
  padding: 0;
}

.series-page .series-route-entry:first-child {
  border-top: 1px solid var(--border-color);
}

.series-page .series-route-link {
  align-items: baseline;
  color: var(--text-primary) !important;
  column-gap: clamp(0.65rem, 1.5vw, 1rem);
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr) auto;
  min-height: 48px;
  padding: 0.7rem 0;
  text-decoration: none !important;
}

.series-page .series-route-link h2 {
  font-size: clamp(1rem, 1.6vw, 1.18rem) !important;
  font-weight: 600 !important;
  hyphens: none !important;
  line-height: 1.45 !important;
  margin: 0 !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
}

.series-page .series-order {
  border: 0;
  font-size: 0.72rem;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  padding: 0;
}

.series-page .series-entry-time {
  color: var(--text-secondary);
  font-size: 0.78rem;
  white-space: nowrap;
}

.series-page .series-route-link:hover h2 {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.series-page .series-route-link:focus-visible {
  outline: 3px solid var(--primary-color);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .series-page .series-route-link {
    align-items: start;
    column-gap: 0.6rem;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    min-height: 48px;
    padding: 0.65rem 0;
  }

  .series-page .series-order {
    grid-column: 1;
    grid-row: 1;
    padding-top: 0.2rem;
  }

  .series-page .series-route-link h2 {
    font-size: 1rem !important;
    grid-column: 2;
    grid-row: 1;
  }

  .series-page .series-entry-time {
    font-size: 0.72rem;
    grid-column: 3;
    grid-row: 1;
    padding-top: 0.2rem;
  }
}

@media (max-width: 420px) {
  .series-page .series-route-link {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    row-gap: 0.1rem;
  }

  .series-page .series-entry-time {
    grid-column: 2;
    grid-row: 2;
    padding-top: 0;
  }
}

/* One yearly Writing list with compact Series entrances. */
.writing-index {
  max-width: 1040px;
}
.writing-index .writing-landing-title {
  font-size: clamp(1.9rem, 4vw, 2.5rem);
  line-height: 1.2;
  margin: 1.25rem 0 1.5rem;
}
.writing-index .writing-index-section {
  padding: 1.25rem 0;
}
.writing-index .writing-series {
  padding-top: 0;
  border-bottom: 0;
}
.writing-index .writing-series .writing-section-heading h2 {
  font-size: 1.1rem !important;
}
.writing-index .writing-series-entry {
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 1rem;
  row-gap: 0.35rem;
  padding: 0.85rem 0 !important;
}
.writing-index .writing-series-entry h3 {
  grid-column: 1;
  grid-row: 1;
  font-size: 1.1rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.writing-index .writing-series-entry h3 a {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none;
}
.writing-index .writing-series-entry-meta {
  grid-column: 2;
  grid-row: 1;
  align-self: baseline;
  text-transform: none;
  white-space: nowrap;
  font-size: 0.8rem;
}
.writing-index .writing-series-entry > p {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  margin: 0 !important;
}
.writing-index .writing-year-group {
  grid-template-columns: 4rem minmax(0, 1fr);
  gap: 2rem;
  scroll-margin-top: 6rem;
}
.writing-index .writing-year-title {
  position: sticky;
  top: 6rem;
  align-self: start;
  font-size: 1.3rem !important;
  margin: 0.25rem 0 !important;
}
.writing-index article.writing-card-archive {
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  column-gap: 2rem;
  padding: 1.1rem 0 !important;
}
.writing-index article.writing-card-archive h3 {
  font-size: 1.2rem !important;
  line-height: 1.45 !important;
}
.writing-index .writing-card-description {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.65;
  align-self: start;
  margin: 0 !important;
}
.writing-index .writing-card-meta {
  font-size: 0.8rem;
  gap: 0.65rem;
}
@media (max-width: 900px) {
  .writing-index article.writing-card-archive {
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.4rem;
  }
  .writing-index article.writing-card-archive .writing-card-description {
    grid-column: 1;
    grid-row: 3;
  }
}
@media (max-width: 767px) {
  .writing-index {
    padding-inline: 1rem;
  }
  .writing-index .writing-year-group {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.4rem;
  }
  .writing-index .writing-year-title {
    position: static;
  }
  .writing-index article.writing-card-archive h3 {
    font-size: 1.125rem !important;
  }
  .writing-index article.writing-card-archive .writing-card-meta {
    grid-row: 1;
  }
  .writing-index article.writing-card-archive h3 {
    grid-row: 2;
  }
}

/* Shared page rhythm: compact openings and readable, quiet lists. */
.home-orientation, .site-about, .series-page {
  max-width: 1040px;
}
.projects-index {
  max-width: 1040px !important;
}
.home-introduction h1, .about-introduction h1 {
  font-size: clamp(2rem, 4vw, 2.75rem) !important;
  line-height: 1.2 !important;
  max-width: none;
  word-break: normal !important;
  overflow-wrap: break-word !important;
}
.home-section-heading h2, .about-section-heading h2 {
  font-size: 1.5rem !important;
  line-height: 1.3 !important;
}
.home-section-heading, .about-section-heading {
  margin-bottom: 1rem;
}
.home-project-grid, .home-writing-list {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.home-project-card, .home-writing-list article.writing-card-home {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--border-color) !important;
  border-radius: 0 !important;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 0.35rem 2rem;
  padding: 1rem 0 !important;
}
.home-project-card h3, .home-writing-list .writing-card-home h3 {
  font-size: 1.15rem !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
.home-project-card > p, .home-writing-list .writing-card-description {
  font-size: 1rem !important;
  line-height: 1.65;
  margin: 0 !important;
  font-weight: 400;
}
.home-writing-list .writing-card-meta { grid-column: 1; grid-row: 1; }
.home-writing-list .writing-card-home h3 { grid-column: 1; grid-row: 2; }
.home-writing-list .writing-card-description { grid-column: 2; grid-row: 1 / span 2; }
.home-flagship { padding: 1.25rem; gap: 1rem; }
.home-flagship h2 { font-size: 1.4rem !important; line-height: 1.35 !important; }
.home-flagship-actions { gap: 0.7rem; }
.home-flagship-actions .home-action { padding-inline: 0.6rem; font-size: 0.875rem; }

.about-introduction {
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 2rem;
  padding: 0.5rem 0 2rem;
  align-items: center;
}
.about-lede {
  font-size: 1rem;
  line-height: 1.75;
  margin: 1rem 0 0 !important;
}
.about-portrait {
  background: transparent;
  border: 0;
  padding: 0;
}
.about-portrait img { border-radius: 8px; }
.about-actions { margin-top: 1rem; gap: 1rem; }
.about-action { min-height: 44px; }
.about-section { padding: 2rem 0; }
.about-background-grid { gap: 2.5rem; align-items: start; }
.about-background-block, .about-education, .about-toolbox-list > div {
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
.about-background-grid h3, .about-toolbox-list h3 {
  font-size: 1.125rem !important;
  line-height: 1.45 !important;
  margin: 0.35rem 0 0.5rem !important;
}
.about-background-grid p, .about-toolbox-list p { font-size: 1rem; margin: 0 0 0.75rem !important; }
.about-education-list, .about-course-list { list-style: none; padding: 0; margin: 1rem 0 0; }
.about-education-list li { padding-bottom: 1rem; margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); }
.about-education-list time, .about-course-list time { font-size: 0.8rem; color: var(--text-secondary); }
.about-toolbox-list { grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.about-toolbox-list > div { border-bottom: 1px solid var(--border-color) !important; padding-bottom: 1rem !important; }
.about-honor { background: transparent; border: 0; border-bottom: 1px solid var(--border-color); padding: 0.75rem 0; grid-template-columns: 5rem minmax(0, 1fr); }
.about-honor img { height: auto; max-height: 5rem; object-fit: contain; }

.projects-index .project-card { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.projects-index .project-status {
  background: transparent !important;
  border: 0 !important;
  padding: 0.15rem 0;
  font-weight: 400;
  color: var(--text-secondary) !important;
}
.project-profile {
  border: 0 !important;
  border-radius: 0 !important;
  max-width: 1040px !important;
  padding: clamp(1rem, 3vw, 2.5rem) !important;
  margin: 1rem auto !important;
}
.project-profile-header { background: transparent !important; padding: 0 0 1.5rem !important; }
.project-profile-heading h1 { font-size: clamp(1.8rem, 4vw, 2.5rem) !important; line-height: 1.2 !important; margin: 0 0 0.75rem !important; }
.project-profile-description { font-size: 1rem; margin: 0 !important; }
.project-profile-header .project-status { background: transparent !important; color: var(--text-secondary) !important; border: 0 !important; font-weight: 400; }
.project-profile-actions { margin-top: 1rem; gap: 1rem; }
.project-action:not(.project-action-primary) { border: 0 !important; padding-inline: 0; font-weight: 500; text-decoration: underline !important; text-underline-offset: 0.2em; }
.project-topic-list { margin-top: 0.75rem; gap: 0.35rem 0.85rem; }
.project-topic { border: 0; padding: 0; font-size: 0.8rem; }
.project-profile-body { margin: 0 !important; padding: 1.5rem 0 !important; }
.project-related-writing { padding: 1.5rem 0 !important; }
.project-section-heading h2 { margin: 0 0 1rem !important; font-size: 1.35rem !important; }
.project-writing-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--border-color) !important; padding: 0.85rem 0 !important; }

article.writing-shell { border: 0; border-radius: 0 !important; max-width: 1120px; margin: 1.25rem auto !important; }
.writing-header { background: transparent; padding: 1.5rem 2rem 1.25rem; }
.writing-header h1 { font-size: clamp(1.8rem, 3.8vw, 2.5rem) !important; line-height: 1.25 !important; max-width: 32ch; }
.writing-description { font-size: 1rem; line-height: 1.7; margin: 0.85rem 0 !important; }
.writing-meta { border: 0; margin: 0 0 0.65rem; padding: 0; font-size: 0.8rem; gap: 0.6rem; }
.writing-context { font-size: 0.8rem; }
.writing-layout { padding: 1.5rem 2rem; gap: 2.5rem; }
.writing-toc-mobile { border: 0; border-bottom: 1px solid var(--border-color); margin-bottom: 1rem; }
.writing-toc-mobile summary { padding: 0.5rem 0; }

@media (max-width: 767px) {
  .home-orientation, .site-about, .series-page { padding: 1.25rem 1rem 2rem; }
  .home-introduction h1, .about-introduction h1 { font-size: 1.8rem !important; }
  .home-section-heading h2, .about-section-heading h2 { font-size: 1.3rem !important; }
  .home-project-card, .home-writing-list article.writing-card-home, .projects-index .project-card { grid-template-columns: minmax(0, 1fr); gap: 0.4rem; }
  .home-writing-list .writing-card-meta, .home-writing-list .writing-card-home h3, .home-writing-list .writing-card-description { grid-column: 1; grid-row: auto; }
  .home-flagship { padding: 1rem; }
  .home-flagship-actions { flex-wrap: nowrap; gap: 0.65rem; }
  .home-flagship-actions .home-action { padding-inline: 0.35rem; font-size: 0.8rem; }
  .about-introduction { grid-template-columns: 88px minmax(0, 1fr); gap: 1rem; padding: 0 0 1.5rem; align-items: center; }
  .about-introduction-copy { display: contents; }
  .about-portrait { grid-column: 1; grid-row: 1; }
  .about-introduction h1 { grid-column: 2; grid-row: 1; font-size: 1.5rem !important; }
  .about-lede { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; }
  .about-actions { grid-column: 1 / -1; grid-row: 3; margin: 0; flex-wrap: wrap; }
  .about-action { padding-inline: 0.65rem; font-size: 0.85rem; }
  .about-background-grid, .about-honors-grid { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
  .about-section { padding: 1.5rem 0; }
  .project-profile-heading { flex-direction: column; gap: 0.5rem; }
  .project-profile-header .project-status { padding: 0; }
  article.writing-shell { margin: 1rem 0 !important; }
  .writing-header, .writing-layout { padding: 1rem; }
  .writing-header h1 { font-size: 1.8rem !important; }
  .writing-meta { font-size: 0.75rem; }
  .writing-toc-mobile { border: 0; border-bottom: 1px solid var(--border-color); }
  .writing-toc-mobile summary { padding: 0.5rem 0; }
}
.site-about {
  margin: 0 auto !important;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 2rem !important;
  max-width: 1040px !important;
}
.about-course-list, .about-education-list { padding-left: 0 !important; }
@media (max-width: 767px) {
  .site-about { padding: 1rem !important; }
  .site-about .about-action { width: auto !important; flex: 0 0 auto; }
}
.about-name-local { display: inline-block; white-space: nowrap; }
.home-flagship h2 a, .home-project-card h3 a {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}
@media (max-width: 767px) {
  .site-about .about-actions { flex-direction: row !important; gap: 0.85rem; }
  .about-name-local { display: block; font-size: 1.1rem; font-weight: 400; margin-top: 0.3rem; }
}
.writing-body h2 {
  font-size: clamp(1.5rem, 2.5vw, 1.7rem) !important;
  line-height: 1.45 !important;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 2rem 0 0.8rem !important;
}
@media (max-width: 767px) {
  .writing-header, .writing-layout { padding: 1rem 0.5rem; }
  .project-profile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 1rem; }
  .project-profile-actions .project-action { width: auto !important; justify-self: start; }
  .project-profile-actions .project-action-primary { grid-column: 1 / -1; width: 100% !important; }
}
.projects-index-header h1 {
  font-size: clamp(1.8rem, 4vw, 2.5rem) !important;
  line-height: 1.2 !important;
}
.project-profile .project-profile-body h2 {
  font-size: 1.5rem !important;
  line-height: 1.45 !important;
  border-bottom: 0;
  margin: 2rem 0 0.8rem !important;
}
.about-action:not(.about-action-primary) {
  background: transparent;
  border: 0;
  text-decoration: underline !important;
  text-underline-offset: 0.2em;
}
.series-page {
  max-width: 1040px !important;
  margin: 0 auto !important;
  padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 2rem !important;
}
@media (max-width: 767px) {
  .series-page { padding: 1rem !important; }
}