/*
Theme Name: Dyad Child
Theme URI: https://yafun.com.tw
Description: Dyad Child Theme for YaFun
Author: YaFun
Author URI: https://yafun.com.tw
Template: dyad
Version: 1.0.0
Text Domain: dyad-child
*/

/* ==========================================================================
   設計基礎：色彩與人文字體
   - 標題、內文：思源宋體（Noto Serif TC）
   - 標語、引言：霞鶩文楷（LXGW WenKai TC），帶手寫溫度
   ========================================================================== */

:root {
  --font-serif: "Noto Serif TC", "Noto Serif", "Songti TC", "PMingLiU", serif;
  --font-pen: "Caveat", "LXGW WenKai TC", cursive;
  --font-kai: "LXGW WenKai TC", "Noto Serif TC", "Kaiti TC", "DFKai-SB", serif;

  --color-ink: #1f2a24;
  --color-text: #3b423d;
  --color-leaf: #4a7c59;
  --color-ocean: #2f5d7c;
  --color-sand: #c9a96e;
  --color-paper: #f7f5ef;
  --color-muted: #6b7268;

  /* 深色區塊（Header、Footer 共用） */
  --forest-950: #111914;
  --forest-900: #17201b;
  --forest-800: #1f2a24;
  --on-dark: #f0ece2;
  --on-dark-muted: #a9b3a6;
  --on-dark-soft: #7d8a7a;
  --on-dark-accent: #a9d1b3;
  --line-dark: rgba(255, 255, 255, 0.08);
}

/* 全站字體：覆蓋父主題的 Lato / Noto Serif（Genericons 圖示字體不受影響） */
body,
button,
input,
select,
textarea,
h1, h2, h3, h4, h5, h6,
blockquote cite,
.widget-title,
.widget h3, .widget h4, .widget h5, .widget h6,
.comments-title .add-comment-link,
.comment-navigation a,
.is-singular .post-navigation .nav-links span.nav-subtitle,
.is-singular .post-navigation .nav-links span.nav-title,
.menu-toggle {
  font-family: var(--font-serif);
}

body {
  color: var(--color-text);
  font-weight: 500;
  font-feature-settings: "palt" 0;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--color-ink);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 父主題大量英文大寫樣式，對中文無意義且會讓英文字過擠 */
.widget-title,
.link-more a,
.posts-navigation a,
.is-singular .post-navigation .nav-links span.nav-subtitle {
  text-transform: none;
}

/* ==========================================================================
   內文閱讀體驗
   ========================================================================== */

.entry-content {
  font-size: 1.8rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  text-wrap: pretty;
}

.entry-content p {
  margin-bottom: 1.6em;
}

.entry-content h2,
.entry-content h3 {
  margin-top: 2em;
}

.entry-content h2 {
  padding-bottom: 0.4em;
  border-bottom: 1px solid #e4e0d4;
}

.entry-content a {
  color: var(--color-ocean);
  text-decoration: underline;
  text-decoration-color: rgba(47, 93, 124, 0.35);
  text-underline-offset: 0.2em;
  transition: text-decoration-color 0.2s;
}

.entry-content a:hover {
  text-decoration-color: currentColor;
}

.entry-content img {
  border-radius: 4px;
}

.entry-content figcaption,
.entry-content .wp-caption-text {
  font-style: normal;
  font-size: 1.4rem;
  color: var(--color-muted);
  text-align: center;
}

/* 學名：在編輯器中以斜體 <em> 標示即可，或加上 class="sci-name" */
.sci-name {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
  letter-spacing: 0;
}

::selection {
  background: rgba(74, 124, 89, 0.22);
}

/* 引言：文楷字體 + 左側葉綠色條 */
blockquote {
  font-family: var(--font-kai);
  font-size: 1.1em;
  font-style: normal;
  line-height: 1.9;
  color: var(--color-ink);
  background: var(--color-paper);
  border-left: 3px solid var(--color-leaf);
  border-radius: 0 8px 8px 0;
  margin: 2em 0;
  padding: 1.2em 1.6em;
}

blockquote p {
  margin-bottom: 0.6em;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   首頁卡片
   ========================================================================== */

.posts .entry-title {
  font-size: clamp(2.2rem, 1.8vw, 2.8rem);
  line-height: 1.45;
}

.posts .entry-title a {
  color: var(--color-ink);
  transition: color 0.25s;
}

.posts .hentry:hover .entry-title a {
  color: var(--color-leaf);
}

.posts .entry-content {
  font-size: 1.6rem;
  line-height: 1.85;
  color: var(--color-muted);
}

.posts .entry-media {
  transition: transform 0.6s ease;
}

.posts .hentry:hover .entry-media {
  transform: scale(1.04);
}

.posts .hentry {
  overflow: hidden;
}

/* 「閱讀全文」：外框按鈕，取代芥末黃 */
.link-more a {
  background-color: transparent;
  border: 1px solid var(--color-leaf);
  color: var(--color-leaf);
  letter-spacing: 0.15em;
  transition: background-color 0.25s, color 0.25s;
}

.link-more a {
  font-weight: 700;
  top: -2px;
}

.posts .hentry:hover .link-more a,
.link-more a:hover,
.link-more a:focus {
  background-color: var(--color-leaf);
  color: #fff;
}

/* 發文日期：鋼筆簽名手寫體（中文字自動以文楷呈現） */
.posts .card-date,
.entry-date.published {
  font-family: var(--font-pen);
  font-weight: 500;
  font-size: 1.9rem;
  letter-spacing: 0.04em;
  color: var(--color-ocean);
  transform: rotate(-1.5deg);
  display: inline-block;
}

/* 文章頁上一篇／下一篇 */
.is-singular .post-navigation .nav-links span.nav-subtitle {
  letter-spacing: 0.2em;
}

.is-singular .post-navigation .nav-links span.nav-title {
  color: var(--color-ink);
}

/* 主選單：加粗 */
#site-navigation a {
  font-weight: 700;
  letter-spacing: 0.08em;
}

#site-navigation ul ul a {
  font-weight: 600;
}

/* 鍵盤操作焦點 */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--color-sand);
  outline-offset: 3px;
}

/* ==========================================================================
   首頁 Banner 動態
   - 背景緩慢推近（Ken Burns），隨機封面載入後淡入
   - 標語依序浮現、裝飾線由中間展開
   - 往下捲動時標語上移淡出（由 js/banner.js 設定 --banner-progress）
   ========================================================================== */

.site-banner {
  --banner-progress: 0;
}

.site-banner-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(15, 22, 18, 0.55) 0%, rgba(15, 22, 18, 0) 55%),
    linear-gradient(to bottom, rgba(15, 22, 18, 0.35) 0%, rgba(15, 22, 18, 0) 25%);
  pointer-events: none;
}

.banner-custom-header .site-banner-thumbnail {
  transform-origin: 60% 50%;
  animation: yf-banner-kenburns 24s ease-in-out infinite alternate;
}

.banner-custom-header .site-banner-thumbnail {
  transition: opacity 1.2s ease;
}

.banner-custom-header.is-loading .site-banner-thumbnail {
  opacity: 0;
}

.site-banner .site-banner-header,
.is-scrolled .site-banner-header {
  opacity: calc(1 - var(--banner-progress) * 1.4);
  transform: translateY(calc(var(--banner-progress) * -40px));
  transition: none;
  will-change: opacity, transform;
}

/* 標語原為 <h1>，改為 <div> 後補回父主題 .site-banner h1 的版面設定 */
.banner-custom-header .site-banner-header .site-description {
  display: block;
  position: static;
  clip: auto;
  margin: 0 3rem;
  padding: 0;
  text-align: center;
  font-family: var(--font-kai);
  font-weight: 400;
  font-size: clamp(2rem, 2.4vw, 3.2rem);
  letter-spacing: 0.2em;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.88);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
}

/* 標語逐句浮現：banner.js 會依全形逗號拆成 .banner-phrase */
.banner-phrase {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em);
  filter: blur(4px);
  animation: yf-phrase-in 1.1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(0.5s + var(--i, 0) * 0.45s);
}

/* 裝飾線：上方細線與主色短線由中間向兩側展開 */
.site-banner-header:before,
.site-banner-header:after,
.banner-custom-header .site-banner-header .site-description:before {
  transform: scaleX(0);
  animation: yf-line-grow 1.2s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

.site-banner-header:after {
  animation-delay: 1.6s;
}

.banner-custom-header .site-banner-header .site-description:before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  display: block;
  width: 120px;
  margin-left: -60px;
  background-color: var(--color-sand);
  height: 3px;
  margin-top: -1.5px;
}

.banner-custom-header .site-banner-header.hide-deco .site-description:before {
  display: none;
}

/* 捲動提示 */
.banner-scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 1.6rem;
  z-index: 6;
  width: 1px;
  height: 4.2rem;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.25);
  opacity: calc(1 - var(--banner-progress) * 3);
}

.banner-scroll-hint::after {
  content: "";
  position: absolute;
  left: 0;
  top: -100%;
  width: 100%;
  height: 100%;
  background: #fff;
  animation: yf-scroll-hint 2.2s ease-in-out 2.4s infinite;
}

@keyframes yf-banner-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.08) translate(-1%, -1%); }
}

@keyframes yf-phrase-in {
  to { opacity: 1; transform: none; filter: none; }
}

@keyframes yf-line-grow {
  to { transform: scaleX(1); }
}

@keyframes yf-scroll-hint {
  0%   { top: -100%; }
  60%  { top: 100%; }
  100% { top: 100%; }
}

@media (max-width: 767px) {
  .banner-custom-header .site-banner-header .site-description {
    letter-spacing: 0.08em;
  }

  .banner-scroll-hint {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .banner-custom-header .site-banner-thumbnail,
  .banner-phrase,
  .site-banner-header:before,
  .site-banner-header:after,
  .banner-custom-header .site-banner-header .site-description:before,
  .banner-scroll-hint::after {
    animation: none;
  }

  .banner-phrase {
    opacity: 1;
    transform: none;
    filter: none;
  }

  .site-banner-header:before,
  .site-banner-header:after,
  .banner-custom-header .site-banner-header .site-description:before {
    transform: none;
  }

  .posts .entry-media,
  .posts .entry-title a,
  .link-more a {
    transition: none;
  }

  .posts .hentry:hover .entry-media {
    transform: none;
  }
}

/* ==========================================================================
   首頁卡片：分類與日期
   ========================================================================== */

.posts .card-meta {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.75em;
  margin-bottom: 0.9em;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: #6b7268;
}

.posts .card-cat {
  font-family: var(--font-kai);
  padding: 0.15em 0.7em;
  border: 1px solid #4a7c59;
  border-radius: 999px;
  color: #4a7c59;
}

/* ==========================================================================
   同系列文章導覽
   ========================================================================== */

.series-nav {
  max-width: 72rem;
  margin: 4rem auto;
  padding: 2.4rem 3rem;
  background: #f7f5ef;
  border-left: 4px solid #4a7c59;
  border-radius: 0 8px 8px 0;
}

.series-nav-title {
  margin: 0 0 1.2rem;
  font-size: 2rem;
  color: #1f2a24;
}

.series-nav-title span {
  margin-left: 0.6em;
  font-size: 1.4rem;
  font-weight: normal;
  color: #6b7268;
}

.series-nav-list {
  margin: 0;
  padding-left: 1.6em;
  columns: 2 22rem;
  column-gap: 3rem;
  font-size: 1.5rem;
  line-height: 1.9;
}

.series-nav-list li {
  break-inside: avoid;
}

.series-nav-list a {
  color: #2f5d7c;
}

.series-nav-list .is-current {
  font-weight: bold;
  color: #4a7c59;
}

/* ==========================================================================
   照片燈箱
   - 圖片區（.yf-lb-stage）可雙指縮放、雙擊放大、放大後拖曳；未放大時左右滑動切換
   - 關閉、左右鈕與底部圖說為固定 UI，不隨圖片縮放
   ========================================================================== */

.yf-zoomable {
  cursor: zoom-in;
}

.yf-lightbox-open,
.yf-lightbox-open body {
  overflow: hidden;
}

.yf-lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(10, 14, 12, 0.97);
  color: #f0ece2;
  -webkit-user-select: none;
  user-select: none;
}

.yf-lightbox[hidden] {
  display: none;
}

.yf-lb-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
  touch-action: none;
  cursor: grab;
}

.yf-lb-stage.is-dragging {
  cursor: grabbing;
}

.yf-lb-track {
  display: flex;
  height: 100%;
  will-change: transform;
}

.yf-lb-track.is-animating {
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.yf-lb-slide {
  position: relative; /* 讓圖片的 offsetLeft/Top 以所在 slide 為基準，縮放計算才正確 */
  flex: 0 0 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  overflow: hidden;
}

.yf-lb-slide img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transform-origin: 0 0;
  will-change: transform;
  -webkit-user-drag: none;
  pointer-events: none;
}

.yf-lb-slide img.is-animating {
  transition: transform 0.25s ease;
}

/* 固定 UI：頂端計數與關閉、兩側切換、底部圖說 */
.yf-lb-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(1rem + env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 1rem max(1.6rem, env(safe-area-inset-left, 0px));
  background: linear-gradient(to bottom, rgba(10, 14, 12, 0.7), rgba(10, 14, 12, 0));
  pointer-events: none;
}

.yf-lb-count {
  font-family: var(--font-pen);
  font-size: 2rem;
  font-weight: 500;
  color: #f1e3c4;
  font-variant-numeric: tabular-nums;
}

.yf-lightbox button {
  pointer-events: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  border: 1px solid rgba(240, 236, 226, 0.3);
  border-radius: 50%;
  background: rgba(10, 14, 12, 0.45);
  color: #f0ece2;
  font-family: Arial, sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.yf-lightbox button:hover,
.yf-lightbox button:focus-visible {
  background: #f0ece2;
  color: #17201b;
  outline: none;
}

.yf-lb-prev,
.yf-lb-next {
  position: absolute;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.yf-lb-prev { left: max(1.2rem, env(safe-area-inset-left, 0px)); }
.yf-lb-next { right: max(1.2rem, env(safe-area-inset-right, 0px)); }

.yf-lightbox.is-single .yf-lb-prev,
.yf-lightbox.is-single .yf-lb-next,
.yf-lightbox.is-single .yf-lb-count {
  visibility: hidden;
}

.yf-lb-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  max-height: 30vh;
  overflow-y: auto;
  padding: 3.2rem max(2rem, env(safe-area-inset-right, 0px)) calc(1.6rem + env(safe-area-inset-bottom, 0px)) max(2rem, env(safe-area-inset-left, 0px));
  background: linear-gradient(to top, rgba(10, 14, 12, 0.88) 40%, rgba(10, 14, 12, 0));
  font-size: 1.5rem;
  line-height: 1.7;
  text-align: center;
  color: #e8e4d8;
}

.yf-lb-caption:empty {
  display: none;
}

/* 放大檢視時淡出 UI，讓畫面專注在圖片 */
.yf-lightbox.is-zoomed .yf-lb-prev,
.yf-lightbox.is-zoomed .yf-lb-next,
.yf-lightbox.is-zoomed .yf-lb-caption {
  opacity: 0;
  pointer-events: none;
}

.yf-lb-prev,
.yf-lb-next,
.yf-lb-caption {
  transition: opacity 0.2s;
}

/* 觸控裝置：滑動即可切換，隱藏左右鈕 */
@media (hover: none) and (pointer: coarse) {
  .yf-lb-prev,
  .yf-lb-next {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-lb-track.is-animating,
  .yf-lb-slide img.is-animating {
    transition: none;
  }
}

/* ==========================================================================
   頁尾
   ========================================================================== */

.site-footer {
  background-color: #1f2a24;
  color: #a9b3a6;
  text-align: left;
}

.site-footer a {
  color: #d8dcd5;
}

.site-footer a:hover,
.site-footer a:focus {
  color: #fff;
}

.site-footer .widget-title {
  color: #e8e4d8;
  letter-spacing: 0.1em;
}

/* 最新留言 */
.site-footer .widget_recent_comments li {
  border-color: rgba(255, 255, 255, 0.08);
  color: #7d8a7a;
}

/* 標籤雲 */
.site-footer .widget .tagcloud a,
.site-footer .widget.widget_tag_cloud a {
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  color: #c8cfc4;
  font-size: 1.4rem !important;
  padding: 4px 14px 5px !important;
  transition: background 0.2s, color 0.2s;
}

.site-footer .widget .tagcloud a:hover,
.site-footer .widget.widget_tag_cloud a:hover {
  background: #4a7c59;
  color: #fff;
}

/* 底部資訊列 */
.footer-bottom-info {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.6rem 4rem;
  background-color: #18211c;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  padding: 3.5rem 5.5rem;
}

.footer-site-name {
  font-size: 1.8rem;
  font-weight: bold;
  letter-spacing: 0.05em;
}

.footer-tagline {
  font-family: var(--font-kai);
  margin: 0.3em 0 0;
  font-size: 1.3rem;
  color: #7d8a7a;
}

.footer-nav-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 1.4rem;
}

.footer-bottom-info .site-info {
  flex-basis: 100%;
  font-size: 1.25rem;
  color: #6b7268;
}

@media (max-width: 767px) {
  .footer-bottom-info {
    padding: 3rem 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer .widget .tagcloud a {
    transition: none;
  }
}

/* ==========================================================================
   列表頁格線：改為 CSS Grid，並穿插半滿版大圖卡片
   - 每 5 篇中的第 4 篇橫跨整列（.yf-featured）
   - grid-auto-flow: dense 讓後方卡片自動補滿空位
   ========================================================================== */

.posts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-flow: row dense;
}

.posts:before,
.posts:after {
  display: none;
}

.posts .hentry {
  float: none;
  width: auto;
}

.posts .yf-featured {
  grid-column: 1 / -1;
  min-height: 46rem;
  aspect-ratio: 5 / 2;
  background: var(--color-ink);
}

/* 視差：圖片上下各多出 15%，由 js/parallax.js 依捲動位置設定 --yf-parallax */
.yf-featured-media {
  position: absolute;
  inset: -15% 0;
  background-position: center;
  background-size: cover;
  transform: translate3d(0, var(--yf-parallax, 0px), 0) scale(var(--yf-zoom, 1));
  transition: --yf-zoom 1.2s;
  will-change: transform;
}

.posts .yf-featured:hover .yf-featured-media {
  --yf-zoom: 1.03;
}

.yf-featured::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(90deg, rgba(15, 22, 18, 0.78) 0%, rgba(15, 22, 18, 0.45) 40%, rgba(15, 22, 18, 0) 70%);
}

.yf-featured-inner {
  position: absolute;
  top: 50%;
  left: 8%;
  z-index: 2;
  width: min(44%, 56rem);
  transform: translateY(-50%);
  color: #fff;
}

.posts .yf-featured .card-meta {
  justify-content: flex-start;
  color: rgba(255, 255, 255, 0.85);
}

.posts .yf-featured .card-cat {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.posts .yf-featured .card-date {
  color: #f1e3c4;
  font-size: 2.2rem;
}

.posts .yf-featured .entry-title {
  margin: 0 0 2.4rem;
  font-size: clamp(2.8rem, 3vw, 4.4rem);
  line-height: 1.35;
  text-align: left;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.35);
}

.posts .yf-featured .entry-title a,
.posts .yf-featured:hover .entry-title a {
  color: #fff;
}

.yf-featured .link-more {
  text-align: left;
}

.yf-featured .link-more a {
  border-color: #fff;
  color: #fff;
}

.posts .yf-featured:hover .link-more a,
.yf-featured .link-more a:hover {
  background-color: #fff;
  color: var(--color-ink);
}

@media only screen and (max-width: 1600px) {
  .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 1200px) {
  .posts {
    grid-template-columns: minmax(0, 1fr);
  }

  .posts .yf-featured {
    aspect-ratio: 4 / 3;
    min-height: 0;
  }

  .yf-featured::before {
    background: linear-gradient(0deg, rgba(15, 22, 18, 0.82) 0%, rgba(15, 22, 18, 0.35) 55%, rgba(15, 22, 18, 0) 80%);
  }

  .yf-featured-inner {
    top: auto;
    bottom: 3rem;
    left: 2.4rem;
    right: 2.4rem;
    width: auto;
    transform: none;
  }

  .posts .yf-featured .entry-title {
    margin-bottom: 1.6rem;
  }
}

/* ==========================================================================
   頁首：所有寬度都固定在上方，往下捲收起、往上捲出現（由 js/header.js 控制）
   ========================================================================== */

.site-header,
.is-singular .site .site-header,
.admin-bar .site-header,
.admin-bar.is-singular .site-header {
  position: fixed;
  transition: transform 0.6s cubic-bezier(0.33, 1, 0.68, 1), background-color 0.35s;
}

.site-header.yf-header-hidden {
  transform: translateY(calc(-100% - 50px));
}

.site-header.yf-header-solid,
.blog .site-header.yf-header-solid {
  background-color: rgba(24, 33, 28, 0.88);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

@media only screen and (max-width: 1400px) {
  .site-header,
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 0;
  }

  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 32px;
  }
}

@media screen and (max-width: 782px) {
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  /* WordPress 管理列在此寬度不固定，頁首直接貼齊頂端 */
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-header,
  .yf-featured-media {
    transition: none;
  }

  .posts .yf-featured:hover .yf-featured-media {
    --yf-zoom: 1;
  }

  .yf-featured-media {
    inset: 0;
    transform: none;
  }
}

@property --yf-zoom {
  syntax: "<number>";
  inherits: false;
  initial-value: 1;
}

/* ==========================================================================
   列表頁分頁：較新文章在左、較舊文章在右
   ========================================================================== */

.posts-navigation .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
}

.posts-navigation .nav-next {
  order: 1;
  float: none;
}

.posts-navigation .nav-previous {
  order: 2;
  float: none;
  margin-left: auto;
}

.posts-navigation div:nth-of-type(2) {
  margin-top: 0;
}

/* 列表頁標題區：改為 Grid 後需橫跨整列，否則只佔一格 */
.posts .page-header {
  grid-column: 1 / -1;
}

/* ==========================================================================
   分類／標籤頁：主視覺
   ========================================================================== */

.yf-archive-hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 42vh;
  padding: calc(var(--yf-header-h, 90px) + 6rem) 8% 6rem;
  overflow: hidden;
  background: var(--color-ink);
  color: #fff;
}

.yf-archive-hero-media {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  transform-origin: 60% 50%;
  animation: yf-banner-kenburns 24s ease-in-out infinite alternate;
}

.yf-archive-hero.has-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(15, 22, 18, 0.85) 0%, rgba(15, 22, 18, 0.45) 50%, rgba(15, 22, 18, 0.3) 100%);
}

.yf-archive-hero-inner {
  position: relative;
  z-index: 1;
  max-width: 72rem;
}

.yf-archive-hero-label {
  display: block;
  margin-bottom: 0.2em;
  font-family: var(--font-pen);
  font-size: 2.6rem;
  font-weight: 500;
  color: #f1e3c4;
  transform: rotate(-1.5deg);
  transform-origin: left;
}

.yf-archive-hero .page-title {
  margin: 0;
  padding: 0;
  font-size: clamp(3.4rem, 5vw, 6rem);
  line-height: 1.25;
  letter-spacing: 0.08em;
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
}

.yf-archive-hero-desc {
  margin-top: 1.4rem;
  font-family: var(--font-kai);
  font-size: 1.8rem;
  line-height: 1.8;
  color: rgba(255, 255, 255, 0.88);
}

.yf-archive-hero-desc p {
  margin: 0;
}

.yf-archive-hero-stats {
  margin: 2rem 0 0;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.75);
}

.yf-archive-hero-stats strong {
  font-size: 2rem;
  color: #fff;
}

.yf-archive-hero-stats time {
  font-family: var(--font-pen);
  font-size: 2rem;
  font-weight: 500;
  color: #f1e3c4;
}

@keyframes yf-hero-settle {
  to { transform: scale(1); }
}

/* ==========================================================================
   分類切換膠囊
   ========================================================================== */

.yf-term-nav {
  background: var(--color-paper);
  border-bottom: 1px solid #e4e0d4;
  padding: 1.6rem 8%;
}

.yf-term-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.yf-term-nav-children {
  margin-top: 1rem !important;
  padding-top: 1rem !important;
  border-top: 1px dashed #dcd7c8;
}

.yf-term-nav a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.4em 1.1em;
  border: 1px solid #d6d1c2;
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: 1.5rem;
  white-space: nowrap;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.yf-term-nav a span {
  font-size: 1.2rem;
  color: var(--color-muted);
}

.yf-term-nav a:hover,
.yf-term-nav a:focus-visible {
  border-color: var(--color-leaf);
  color: var(--color-leaf);
  text-decoration: none;
}

.yf-term-nav a.is-current {
  background: var(--color-leaf);
  border-color: var(--color-leaf);
  color: #fff;
}

.yf-term-nav a.is-current span {
  color: rgba(255, 255, 255, 0.8);
}

.yf-term-nav a.is-parent {
  border-style: dashed;
}

/* 手機：膠囊改為橫向滑動 */
@media (max-width: 767px) {
  .yf-archive-hero {
    min-height: 0;
    padding: 6rem 2rem 4rem;
  }

  .yf-term-nav {
    padding: 1.2rem 0;
  }

  .yf-term-nav ul {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0 2rem;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  .yf-term-nav ul::-webkit-scrollbar {
    display: none;
  }
}

/* ==========================================================================
   數字頁碼
   ========================================================================== */

.pagination {
  background: var(--color-paper);
  padding: 4rem 2rem 5rem;
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.6rem;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 4.4rem;
  height: 4.4rem;
  padding: 0 0.8rem;
  border: 1px solid #d6d1c2;
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s;
}

.pagination .page-numbers.prev,
.pagination .page-numbers.next {
  font-size: 2.2rem;
  line-height: 1;
}

.pagination a.page-numbers:hover,
.pagination a.page-numbers:focus-visible {
  border-color: var(--color-leaf);
  color: var(--color-leaf);
  text-decoration: none;
}

.pagination .page-numbers.current {
  background: var(--color-leaf);
  border-color: var(--color-leaf);
  color: #fff;
}

.pagination .page-numbers.dots {
  border: 0;
  background: transparent;
  min-width: 2rem;
}

@media (prefers-reduced-motion: reduce) {
  .yf-archive-hero-media {
    animation: none;
    transform: none;
  }

  .yf-term-nav a,
  .pagination .page-numbers {
    transition: none;
  }
}

/* 父主題 global.js 會在非首頁對 .site-content 寫入 inline padding-top（頁首高度 + 50px）。
   分類／標籤頁的主視覺已自行預留頁首高度；手機版則由 .site 的 padding-top 補位，因此都歸零。 */
.archive .site-content {
  padding-top: 0 !important;
}

@media only screen and (max-width: 960px) {
  .site-content {
    padding-top: 0 !important;
  }
}

/* ==========================================================================
   平板橫向（961–1280px）：桌面選單收緊，避免與 Logo 擠在一起換行
   ========================================================================== */

@media only screen and (min-width: 961px) and (max-width: 1280px) {
  .site-header {
    padding: 12px 24px;
  }

  .site-branding {
    width: 24%;
  }

  #site-navigation {
    width: 76%;
    font-size: 1.3rem;
  }

  #site-navigation ul li {
    margin-left: 1.1em;
    letter-spacing: 0.04em;
  }

  .site-branding .site-logo-link img {
    max-width: 200px;
    height: auto;
  }
}

/* ==========================================================================
   手機與平板直向（≤960px）：精簡頁首列 + 全螢幕選單
   - 頁首固定在上方，高度由 header.js 寫入 --yf-header-h，.site 以 padding 補位
   - 選單面板以 absolute 接在頁首下方，避免被 backdrop-filter 限制
   ========================================================================== */

@media only screen and (max-width: 960px) {
  .site-header,
  .is-singular .site .site-header,
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    position: fixed;
    left: 0;
    right: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: calc(1rem + env(safe-area-inset-top, 0px)) max(1.6rem, env(safe-area-inset-right, 0px)) 1rem max(1.6rem, env(safe-area-inset-left, 0px));
    background-color: rgba(24, 33, 28, 0.94);
  }

  /* Dyad 沒有 .site 外層容器，改由 body 補上固定頁首的高度 */
  body {
    padding-top: var(--yf-header-h, 64px);
  }

  /* 首頁 Banner 在此寬度改為一般流動版面，不需額外補位 */
  .home .site-banner,
  .blog .site-banner {
    top: 0;
  }

  .site-branding,
  .is-singular:not(.home) .site-header > .site-branding {
    display: block;
    flex: 1 1 auto;
    min-width: 0;
    width: auto;
    padding: 0;
  }

  .site-branding .site-logo-link img {
    display: block;
    max-width: 150px;
    max-height: 44px;
    width: auto;
    height: auto;
  }

  #site-navigation {
    position: static;
    flex: 0 0 auto;
    width: auto;
  }

  /* 漢堡按鈕 */
  .menu-toggle {
    position: relative;
    top: auto;
    right: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    min-height: 44px;
    padding: 0 1.4rem;
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 999px;
    background: transparent;
    color: #fff;
    font-family: var(--font-serif);
    font-size: 1.4rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: none;
  }

  .menu-toggle:before {
    top: 0;
    margin: 0;
  }

  /* 選單面板：接在頁首下方，佔滿剩餘螢幕高度 */
  #site-navigation > div {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: calc(100vh - var(--yf-header-h, 64px));
    height: calc(100dvh - var(--yf-header-h, 64px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 2rem max(2.4rem, env(safe-area-inset-right, 0px)) calc(4rem + env(safe-area-inset-bottom, 0px)) max(2.4rem, env(safe-area-inset-left, 0px));
    background: #18211c;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  #site-navigation.open > div {
    animation: yf-menu-in 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  }

  #site-navigation ul li {
    border-top: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    margin: 0;
    padding: 0;
  }

  #site-navigation ul a {
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: 0.4rem 0;
    color: #f0ece2;
    font-size: 2rem;
    font-weight: 700;
    letter-spacing: 0.1em;
  }

  #site-navigation ul a:hover,
  #site-navigation ul a:focus {
    color: #a9d1b3;
    opacity: 1;
  }

  #site-navigation .current-menu-item > a,
  #site-navigation .current-menu-parent > a,
  #site-navigation .current-category-ancestor > a {
    color: #a9d1b3;
  }

  #site-navigation ul ul {
    margin: 0 0 1.2rem 1.2rem !important;
    padding-left: 1.2rem;
    border-left: 1px solid rgba(255, 255, 255, 0.12);
  }

  #site-navigation ul ul li {
    border-bottom: 0;
  }

  #site-navigation ul ul a {
    min-height: 44px;
    font-size: 1.6rem;
    font-weight: 500;
    color: #c8cfc4;
  }

  /* 選單開啟時鎖住背景捲動 */
  html.yf-menu-open,
  html.yf-menu-open body {
    overflow: hidden;
  }

  /* 開啟選單時頁首改為不透明，避免與下方內容重疊難讀 */
  html.yf-menu-open .site-header {
    background-color: #18211c;
  }

  /* 文章頁：父主題在手機上讓精選圖貼齊頂端，改由 .site 補位後不需再上推 */
  .admin-bar.is-singular .entry-media {
    top: auto;
  }
}

@media only screen and (max-width: 600px) {
  .site-branding .site-logo-link img {
    max-width: 130px;
    max-height: 38px;
  }

  #site-navigation ul a {
    font-size: 1.8rem;
  }
}

@keyframes yf-menu-in {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  #site-navigation.open > div {
    animation: none;
  }
}

/* ==========================================================================
   數字頁碼（首頁／分類／標籤）
   ========================================================================== */

.yf-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.2rem 1.6rem;
  padding: 4.5rem max(2rem, env(safe-area-inset-left, 0px)) 5.5rem;
  background: var(--color-paper);
  border-top: 1px solid #e4e0d4;
  font-variant-numeric: tabular-nums;
}

.yf-page-numbers {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.yf-page-numbers .page-numbers,
.yf-page-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-width: 4.4rem;
  height: 4.4rem;
  padding: 0 0.9rem;
  border: 1px solid #d6d1c2;
  border-radius: 999px;
  background: #fff;
  color: var(--color-ink);
  font-size: 1.6rem;
  text-decoration: none;
  transition: border-color 0.2s, color 0.2s, background-color 0.2s;
}

.yf-page-step {
  padding: 0 1.6rem;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}

.yf-page-step [aria-hidden="true"],
.yf-page-step > span:first-child:not(.yf-page-step-text),
.yf-page-step > span:last-child:not(.yf-page-step-text) {
  font-size: 2.2rem;
  line-height: 1;
}

.yf-page-numbers a.page-numbers:hover,
.yf-page-numbers a.page-numbers:focus-visible,
a.yf-page-step:hover,
a.yf-page-step:focus-visible {
  border-color: var(--color-leaf);
  color: var(--color-leaf);
  text-decoration: none;
}

.yf-page-numbers .page-numbers.current {
  background: var(--color-leaf);
  border-color: var(--color-leaf);
  color: #fff;
  font-weight: 700;
}

.yf-page-numbers .page-numbers.dots {
  min-width: 2.4rem;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-muted);
}

.yf-page-step.is-disabled {
  opacity: 0.35;
  cursor: default;
}

/* 跳頁選單 */
.yf-page-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 1.5rem;
  color: var(--color-muted);
  white-space: nowrap;
}

.yf-page-jump select {
  height: 4.4rem;
  padding: 0 3rem 0 1.4rem;
  border: 1px solid #d6d1c2;
  border-radius: 999px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%234a7c59'/%3E%3C/svg%3E") no-repeat right 1.2rem center;
  color: var(--color-ink);
  font: inherit;
  font-size: 1.6rem;
  font-weight: 700;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

.yf-page-jump select:focus-visible {
  outline: 2px solid var(--color-sand);
  outline-offset: 2px;
}

/* 桌面：前後頁按鈕放兩端，頁碼與跳頁在中間 */
@media (min-width: 768px) {
  .yf-pagination {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
  }

  .yf-page-step.is-prev { grid-column: 1; grid-row: 1; justify-self: start; }
  .yf-page-numbers      { grid-column: 2; grid-row: 1; }
  .yf-page-step.is-next { grid-column: 3; grid-row: 1; justify-self: end; }
  .yf-page-jump         { grid-column: 2; grid-row: 2; justify-self: center; }
}

/* 手機：只留上一頁／跳頁／下一頁，數字頁碼隱藏 */
@media (max-width: 767px) {
  .yf-pagination {
    flex-wrap: nowrap;
    justify-content: space-between;
    gap: 0.8rem;
    padding: 3rem 1.6rem 4rem;
  }

  .yf-page-numbers {
    display: none;
  }

  .yf-page-step {
    padding: 0 1.2rem;
  }
}

@media (max-width: 420px) {
  .yf-page-step-text {
    display: none;
  }

  .yf-page-step {
    padding: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-page-numbers .page-numbers,
  .yf-page-step {
    transition: none;
  }
}

/* ==========================================================================
   搜尋表單（共用）
   ========================================================================== */

.yf-search-form {
  display: flex;
  align-items: center;
  gap: 0;
  width: 100%;
  border: 1px solid #d6d1c2;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.yf-search-form:focus-within {
  border-color: var(--color-leaf);
  box-shadow: 0 0 0 3px rgba(74, 124, 89, 0.18);
}

.yf-search-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 5.2rem;
  padding: 0 2rem;
  border: 0;
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-serif);
  font-size: 1.7rem;
  -webkit-appearance: none;
  appearance: none;
}

.yf-search-input:focus {
  outline: none;
}

.yf-search-input::placeholder {
  color: #9aa597;
}

.yf-search-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 4.4rem;
  margin-right: 0.4rem;
  padding: 0 1.8rem;
  border: 0;
  border-radius: 999px;
  background: var(--color-leaf);
  color: #fff;
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
}

.yf-search-submit:hover,
.yf-search-submit:focus-visible {
  background: #3d6a4b;
}

/* ==========================================================================
   選單中的搜尋
   ========================================================================== */

#site-navigation ul li.yf-menu-search {
  vertical-align: middle;
}

.yf-search-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.8rem;
  height: 3.8rem;
  margin: -0.8rem 0;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.yf-search-toggle:hover,
.yf-search-toggle:focus-visible {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
}

.yf-search-toggle--mobile {
  display: none;
}

/* 手機／平板：搜尋按鈕移到選單外，與「選單」按鈕並排 */
@media only screen and (max-width: 960px) {
  #site-navigation ul li.yf-menu-search {
    display: none;
  }

  #site-navigation {
    display: flex;
    align-items: center;
    gap: 0.8rem;
  }

  .yf-search-toggle--mobile {
    order: -1;
    display: inline-flex;
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    margin: 0;
  }

  .yf-search-overlay {
    padding: calc(2rem + env(safe-area-inset-top, 0px)) 1.6rem 2rem;
    background: rgba(17, 25, 20, 0.96);
  }

  .yf-search-overlay-inner {
    padding-top: 4.4rem;
  }

  .yf-search-close {
    top: 0;
  }

  .yf-search-overlay .yf-search-input {
    height: 5.6rem;
    font-size: 1.7rem;
  }

  .yf-search-overlay .yf-search-submit {
    height: 4.6rem;
  }
}

/* ==========================================================================
   搜尋浮層
   ========================================================================== */

.yf-search-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16vh 2rem 2rem;
  background: rgba(15, 22, 18, 0.72);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.25s;
}

/* 自訂 display: flex 會蓋過 hidden 屬性，需明確隱藏，否則透明浮層會擋住整頁點擊 */
.yf-search-overlay[hidden] {
  display: none;
}

.yf-search-overlay.is-visible {
  opacity: 1;
}

.yf-search-open,
.yf-search-open body {
  overflow: hidden;
}

.yf-search-overlay-inner {
  position: relative;
  width: min(72rem, 100%);
  transform: translateY(-12px);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.yf-search-overlay.is-visible .yf-search-overlay-inner {
  transform: none;
}

.yf-search-overlay-label {
  margin: 0 0 1rem 2rem;
  font-family: var(--font-pen);
  font-size: 2.6rem;
  font-weight: 500;
  color: #f1e3c4;
  transform: rotate(-1.5deg);
  transform-origin: left;
}

.yf-search-overlay .yf-search-form {
  border: 0;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
}

.yf-search-overlay .yf-search-input {
  height: 6.4rem;
  font-size: 2rem;
}

.yf-search-overlay .yf-search-submit {
  height: 5.2rem;
  margin-right: 0.6rem;
}

/* 關閉鈕：z-index 高於旋轉過的「Search」標籤（transform 會蓋住先前的定位元素而攔截點擊） */
.yf-search-close {
  position: absolute;
  top: -0.6rem;
  right: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 4.8rem;
  height: 4.8rem;
  padding: 0;
  border: 1px solid rgba(240, 236, 226, 0.35);
  border-radius: 50%;
  background: rgba(240, 236, 226, 0.08);
  color: var(--on-dark);
  font-family: Arial, sans-serif;
  font-size: 2.8rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}

.yf-search-close:hover,
.yf-search-close:focus-visible {
  background: var(--on-dark);
  border-color: var(--on-dark);
  color: var(--forest-900);
  transform: rotate(90deg);
  outline: none;
}

.yf-search-hot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 2.4rem;
  padding: 0 1rem;
  font-size: 1.7rem;
}

.yf-search-hot span {
  margin-right: 0.4rem;
  color: rgba(255, 255, 255, 0.6);
  letter-spacing: 0.1em;
}

.yf-search-hot a {
  padding: 0.45em 1.1em;
  min-height: 4.4rem;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #f0ece2;
  text-decoration: none;
  transition: background-color 0.2s;
}

.yf-search-hot a {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
}

.yf-search-hot .yf-search-hot-count {
  margin: 0;
  padding: 0 0.5em;
  border-radius: 999px;
  background: rgba(240, 236, 226, 0.12);
  color: var(--on-dark-muted);
  font-size: 1.3rem;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.yf-search-hot a:hover .yf-search-hot-count,
.yf-search-hot a:focus-visible .yf-search-hot-count {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.yf-search-hot a:hover,
.yf-search-hot a:focus-visible {
  background: var(--color-leaf);
  color: #fff;
  text-decoration: none;
}

/* ==========================================================================
   搜尋結果頁
   ========================================================================== */

.yf-search-hero {
  min-height: 0;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(74, 124, 89, 0.45), transparent 60%),
    radial-gradient(ellipse at 0% 100%, rgba(47, 93, 124, 0.4), transparent 55%),
    var(--color-ink);
}

.yf-search-hero .page-title {
  word-break: break-all;
}

.yf-search-hero-form {
  max-width: 60rem;
  margin-top: 2.4rem;
}

.yf-search-hero .yf-search-form {
  border: 0;
}

.search .site-content {
  padding-top: 0 !important;
}

/* 關鍵字標示 */
mark.yf-mark {
  padding: 0 0.1em;
  border-radius: 3px;
  background: linear-gradient(transparent 55%, rgba(201, 169, 110, 0.55) 55%);
  color: inherit;
}

/* 無結果 */
.yf-search-empty {
  padding: 6rem 8% 8rem;
  background: var(--color-paper);
}

.yf-search-empty-lead {
  margin: 0 0 4rem;
  font-family: var(--font-kai);
  font-size: 2.2rem;
  line-height: 1.8;
  color: var(--color-ink);
}

.yf-search-empty h2 {
  margin: 3rem 0 1.4rem;
  font-size: 1.6rem;
  letter-spacing: 0.15em;
  color: var(--color-muted);
}

.yf-term-nav--plain {
  padding: 0;
  background: transparent;
  border: 0;
}

@media (max-width: 767px) {
  .yf-search-submit-text {
    display: none;
  }

  .yf-search-submit {
    width: 4.4rem;
    padding: 0;
    justify-content: center;
  }

  .yf-term-nav--plain ul {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
  }

  .yf-search-empty {
    padding: 4rem 2rem 6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-search-overlay,
  .yf-search-overlay-inner,
  .yf-search-form {
    transition: none;
  }
}

/* ==========================================================================
   搜尋結果：一般文章列表
   ========================================================================== */

.yf-search-list {
  max-width: 96rem;
  margin: 0 auto;
  padding: 3rem max(2rem, env(safe-area-inset-left, 0px)) 4rem;
  list-style: none;
  background: #fff;
}

.search .content-area {
  background: #fff;
}

.yf-search-item {
  border-bottom: 1px solid #e9e5da;
}

.yf-search-item:last-child {
  border-bottom: 0;
}

.yf-search-item-link {
  display: grid;
  grid-template-columns: 18rem minmax(0, 1fr);
  gap: 2.8rem;
  align-items: start;
  padding: 2.8rem 0;
  color: inherit;
  text-decoration: none;
}

.yf-search-item-link:hover,
.yf-search-item-link:focus-visible {
  text-decoration: none;
}

.yf-search-item-thumb {
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: 6px;
  background: var(--color-paper);
}

.yf-search-item-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.yf-search-item-link:hover .yf-search-item-thumb img {
  transform: scale(1.05);
}

.yf-search-item-body {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}

.yf-search-item-meta {
  display: flex;
  align-items: center;
  gap: 1rem;
  font-size: 1.3rem;
  color: var(--color-muted);
}

.yf-search-item-cat {
  font-family: var(--font-kai);
  padding: 0.1em 0.8em;
  border: 1px solid var(--color-leaf);
  border-radius: 999px;
  color: var(--color-leaf);
}

.yf-search-item-meta time {
  font-family: var(--font-pen);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-ocean);
}

.yf-search-item-title {
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.45;
  color: var(--color-ink);
  text-wrap: balance;
  transition: color 0.2s;
}

.yf-search-item-link:hover .yf-search-item-title,
.yf-search-item-link:focus-visible .yf-search-item-title {
  color: var(--color-leaf);
}

.yf-search-item-excerpt {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  font-size: 1.6rem;
  line-height: 1.85;
  color: var(--color-muted);
}

@media (max-width: 600px) {
  .yf-search-item-link {
    grid-template-columns: 9.6rem minmax(0, 1fr);
    gap: 1.6rem;
    padding: 2rem 0;
  }

  .yf-search-item-title {
    font-size: 1.8rem;
  }

  .yf-search-item-excerpt {
    -webkit-line-clamp: 2;
    font-size: 1.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-search-item-thumb img,
  .yf-search-item-title {
    transition: none;
  }

  .yf-search-item-link:hover .yf-search-item-thumb img {
    transform: none;
  }
}

/* ==========================================================================
   Header／Footer 統一配色
   兩者共用森林綠深色系（--forest-*）、米白文字（--on-dark）、淺葉綠互動色（--on-dark-accent），
   並以同一條沙色細線作為頁首底部與頁尾頂部的收邊。
   ========================================================================== */

body {
  background-color: var(--forest-900);
}

/* ---------- Header ---------- */

.site-header,
.blog .site-header,
.is-scrolled .site-header {
  background-color: rgba(23, 32, 27, 0.92);
  color: var(--on-dark);
  text-shadow: none;
}

/* 首頁頂端疊在 Banner 上：上深下透的漸層，捲動後轉為實色 */
.home .site-header:not(.yf-header-solid),
.blog .site-header:not(.yf-header-solid) {
  background: linear-gradient(to bottom, rgba(17, 25, 20, 0.7), rgba(17, 25, 20, 0));
}

.site-header.yf-header-solid,
.blog .site-header.yf-header-solid {
  background-color: rgba(23, 32, 27, 0.9);
  box-shadow: inset 0 -1px 0 rgba(201, 169, 110, 0.35);
}

#site-navigation a {
  color: var(--on-dark);
  transition: color 0.2s;
}

#site-navigation a:hover,
#site-navigation a:focus {
  color: var(--on-dark-accent);
  opacity: 1;
}

/* 目前所在分類：沙色底線 */
@media only screen and (min-width: 961px) {
  #site-navigation > div > ul > li > a {
    position: relative;
  }

  #site-navigation > div > ul > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    background: var(--color-sand);
    transform: scaleX(0);
    transition: transform 0.25s;
  }

  #site-navigation > div > ul > li > a:hover::after,
  #site-navigation > div > ul > li.current-menu-item > a::after,
  #site-navigation > div > ul > li.current-menu-parent > a::after,
  #site-navigation > div > ul > li.current-category-ancestor > a::after {
    transform: scaleX(1);
  }
}

/* 下拉子選單 */
#site-navigation ul ul li {
  background: var(--forest-900);
}

#site-navigation ul ul:before {
  border-color: transparent transparent var(--forest-900) transparent;
}

#site-navigation ul ul ul:before {
  border-color: transparent transparent transparent var(--forest-900);
}

#site-navigation ul ul a {
  color: var(--on-dark-muted);
}

.yf-search-toggle {
  border-color: rgba(240, 236, 226, 0.35);
  color: var(--on-dark);
}

@media only screen and (max-width: 960px) {
  .site-header,
  .home .site-header:not(.yf-header-solid),
  .blog .site-header:not(.yf-header-solid),
  .site-header.yf-header-solid,
  .is-singular .site .site-header,
  .admin-bar .site-header,
  .admin-bar.is-singular .site-header {
    background: var(--forest-900);
    box-shadow: inset 0 -1px 0 rgba(201, 169, 110, 0.35);
  }

  #site-navigation > div,
  html.yf-menu-open .site-header {
    background: var(--forest-900);
  }

  #site-navigation ul li {
    border-bottom-color: var(--line-dark);
  }

  #site-navigation ul a {
    color: var(--on-dark);
  }

  #site-navigation ul ul a {
    color: var(--on-dark-muted);
  }

  #site-navigation ul a:hover,
  #site-navigation ul a:focus,
  #site-navigation .current-menu-item > a,
  #site-navigation .current-menu-parent > a,
  #site-navigation .current-category-ancestor > a {
    color: var(--on-dark-accent);
  }

  .menu-toggle {
    border-color: rgba(240, 236, 226, 0.35);
    color: var(--on-dark);
  }
}

/* ---------- Footer ---------- */

.site-footer {
  background-color: var(--forest-900);
  color: var(--on-dark-muted);
  border-top: 1px solid rgba(201, 169, 110, 0.35);
}

.site-footer a {
  color: var(--on-dark);
  transition: color 0.2s;
}

.site-footer a:hover,
.site-footer a:focus {
  color: var(--on-dark-accent);
  text-decoration: none;
}

.site-footer .widget-title {
  color: var(--on-dark);
}

.site-footer .widget ul li,
.site-footer .widget_recent_comments li {
  border-color: var(--line-dark);
  color: var(--on-dark-soft);
}

.site-footer .widget .tagcloud a,
.site-footer .widget.widget_tag_cloud a {
  background: rgba(240, 236, 226, 0.06);
  color: var(--on-dark-muted);
}

.site-footer .widget .tagcloud a:hover,
.site-footer .widget.widget_tag_cloud a:hover {
  background: var(--color-leaf);
  color: #fff;
}

.footer-bottom-info {
  background-color: var(--forest-950);
  border-top: 1px solid var(--line-dark);
}

.footer-tagline {
  color: var(--on-dark-soft);
}

.footer-nav-items a {
  color: var(--on-dark-muted);
}

.footer-bottom-info .site-info {
  color: var(--on-dark-soft);
}

@media (prefers-reduced-motion: reduce) {
  #site-navigation > div > ul > li > a::after,
  #site-navigation a,
  .site-footer a {
    transition: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-search-close,
  .yf-search-close:hover {
    transition: none;
    transform: none;
  }
}

/* 頁尾「最新文章」日期 */
.site-footer .widget .post-date {
  display: block;
  margin-top: 0.2em;
  font-family: var(--font-pen);
  font-size: 1.7rem;
  font-weight: 500;
  color: var(--on-dark-accent);
}

/* ==========================================================================
   文章頁：麵包屑、作者資訊
   ========================================================================== */

.yf-breadcrumb {
  margin-bottom: 1.2rem;
  font-size: 1.3rem;
  letter-spacing: 0.06em;
  color: var(--color-muted);
}

.yf-breadcrumb a {
  color: var(--color-muted);
  text-decoration: none;
}

.yf-breadcrumb a:hover,
.yf-breadcrumb a:focus-visible {
  color: var(--color-leaf);
}

.yf-breadcrumb .sep,
.yf-breadcrumb .separator {
  margin: 0 0.5em;
  color: #b9b4a6;
}

.yf-author-box {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin: 4rem 0 0;
  padding: 2.4rem;
  border-radius: 10px;
  background: var(--color-paper);
}

.yf-author-avatar {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
}

.yf-author-body {
  min-width: 0;
}

.yf-author-label {
  margin: 0;
  font-family: var(--font-pen);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-ocean);
}

.yf-author-name {
  margin: 0 0 0.6rem;
  font-size: 1.9rem;
  font-weight: 700;
}

.yf-author-name a {
  color: var(--color-ink);
  text-decoration: none;
}

.yf-author-bio {
  font-size: 1.5rem;
  line-height: 1.85;
  color: var(--color-text);
}

.yf-author-bio p:last-child {
  margin-bottom: 0;
}

@media (max-width: 600px) {
  .yf-author-box {
    flex-direction: column;
  }
}

/* 平板橫向（961–1200px）：父主題在此寬度讓首頁 Banner 改為一般流動版面，
   固定頁首會蓋住 Banner 上緣，同樣以 body 補位並讓頁首改為實色 */
@media only screen and (min-width: 961px) and (max-width: 1200px) {
  body {
    padding-top: var(--yf-header-h, 90px);
  }

  .home .site-header:not(.yf-header-solid),
  .blog .site-header:not(.yf-header-solid) {
    background: rgba(23, 32, 27, 0.92);
  }
}

/* body 已補位時，分類／標籤／搜尋主視覺不需再預留頁首高度 */
@media only screen and (max-width: 1200px) {
  .yf-archive-hero {
    padding-top: 6rem;
  }
}

@media (max-width: 767px) {
  .yf-archive-hero {
    padding-top: 4rem;
  }
}

/* 手機／平板：分類切換列捲動時吸附在頁首下方；頁首往下捲收起時跟著貼齊螢幕頂端 */
@media only screen and (max-width: 1200px) {
  /* 父主題 .site-content 為 overflow: hidden，會讓 sticky 失效；改用 clip 保留裁切但不建立捲動容器 */
  .archive .site-content {
    overflow: visible;
    overflow: clip;
  }

  .yf-term-nav {
    position: -webkit-sticky;
    position: sticky;
    top: var(--yf-header-h, 64px);
    z-index: 40;
    transition: top 0.6s cubic-bezier(0.33, 1, 0.68, 1);
    box-shadow: 0 6px 16px -10px rgba(31, 42, 36, 0.35);
  }

  html.yf-header-is-hidden .yf-term-nav {
    top: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-term-nav {
    transition: none;
  }
}

/* 主選單字級加大 */
#site-navigation {
  font-size: 1.65rem;
}

#site-navigation ul ul {
  font-size: 1.5rem;
}

@media only screen and (min-width: 961px) and (max-width: 1280px) {
  #site-navigation {
    font-size: 1.5rem;
  }

  #site-navigation ul li {
    margin-left: 0.9em;
  }
}

@media only screen and (max-width: 960px) {
  #site-navigation ul a {
    font-size: 2.2rem;
  }

  #site-navigation ul ul a {
    font-size: 1.8rem;
  }
}

@media only screen and (max-width: 600px) {
  #site-navigation ul a {
    font-size: 2rem;
  }

  #site-navigation ul ul a {
    font-size: 1.7rem;
  }
}

/* 手機：列表卡片只顯示分類、日期與標題，隱藏摘要（整張卡片可點擊進入文章） */
@media (max-width: 767px) {
  .posts .hentry .entry-content {
    display: none;
  }

  .posts .entry-inner-content {
    max-height: none;
  }
}

/* ==========================================================================
   手機／平板：首頁 Banner 與列表頁主視覺改為正方形
   橫向平板時以「螢幕高度扣掉頁首」為上限，避免整個畫面都被 Banner 佔滿
   ========================================================================== */

@media only screen and (max-width: 1200px) {
  /* 不用 aspect-ratio：搭配 max-height 時瀏覽器會為了維持 1:1 而縮窄寬度（橫向平板只剩半邊）。
     改為寬度滿版、高度取「螢幕寬度」與「螢幕高度扣掉頁首」的較小值。 */
  .site-banner-media {
    width: 100%;
    padding-bottom: 0;
    height: min(100vw, calc(100vh - var(--yf-header-h, 64px)));
    height: min(100vw, calc(100svh - var(--yf-header-h, 64px)));
  }

  .site-banner .site-banner-thumbnail {
    position: absolute;
    inset: 0;
    padding-bottom: 0;
  }

  .yf-archive-hero {
    width: 100%;
    min-height: min(100vw, calc(100vh - var(--yf-header-h, 64px)));
    min-height: min(100vw, calc(100svh - var(--yf-header-h, 64px)));
    box-sizing: border-box;
  }

  /* 搜尋頁頂端沒有照片，維持依內容高度 */
  .yf-archive-hero.yf-search-hero {
    min-height: 0;
  }
}

/* 手機直式：列表卡片左右各留白 10px、卡片間距 10px，半滿版大圖仍維持滿版 */
@media (max-width: 767px) and (orientation: portrait) {
  .posts {
    gap: 10px;
    padding: 10px;
    background: var(--color-paper);
  }

  .posts .hentry {
    border-radius: 6px;
    border: 1px solid #e2ddcf;
    box-shadow: 0 1px 2px rgba(31, 42, 36, 0.06), 0 4px 12px -4px rgba(31, 42, 36, 0.12);
  }

  .posts .yf-featured {
    margin: 0 -10px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  /* 卡片圖片上下各少 20px（總高度減 40px），維持置中裁切 */
  .posts .hentry:not(.yf-featured) .entry-media {
    padding-bottom: calc(66.666% - 40px);
  }
}

/* 手機／平板：子選單字級與點擊範圍加大（考量年長使用者） */
@media only screen and (max-width: 960px) {
  #site-navigation ul ul a,
  #site-navigation ul ul li a {
    min-height: 52px;
    padding: 0.6rem 0;
    font-size: 2.1rem;
    font-weight: 600;
    line-height: 1.5;
    color: #dfe5db;
  }

  #site-navigation ul ul li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  #site-navigation ul ul li:last-child {
    border-bottom: 0;
  }
}

@media only screen and (max-width: 600px) {
  #site-navigation ul ul a,
  #site-navigation ul ul li a {
    font-size: 2rem;
  }
}

/* Logo 垂直置中：Jetpack 輸出的 <a> 是 inline，內含區塊化的 <img> 時會在上下產生空白行，
   使 Logo 偏上；改為區塊並去除行高 */
.site-branding .site-logo-link {
  display: block;
  line-height: 0;
}

.site-branding .site-logo-link img {
  display: block;
  vertical-align: middle;
}

@media only screen and (max-width: 960px) {
  .site-branding {
    display: flex;
    align-items: center;
  }
}

/* ==========================================================================
   iPad 橫向（961–1200px）：列表一列 2 篇，沿用桌面版「圖文並排」卡片
   父主題在此寬度改為單欄並以 odd/even 交錯；這裡改回桌面版的 4n+3／4n+4 交錯，
   讓每一列為「圖文｜圖文」、下一列為「文圖｜文圖」。以 !important 覆蓋父主題的 nth-child 規則。
   ========================================================================== */

@media only screen and (min-width: 961px) and (max-width: 1200px) {
  .posts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .posts .hentry:not(.yf-featured) .entry-media {
    float: left !important;
    width: 50%;
    padding-bottom: 66.666%;
  }

  .posts .hentry:not(.yf-featured) .entry-inner {
    position: absolute;
    top: 0;
    bottom: 0;
    left: auto !important;
    right: 0 !important;
    width: 50%;
  }

  .posts .hentry:not(.yf-featured) .entry-inner:before,
  .posts .hentry:not(.yf-featured) .entry-inner:after {
    top: 50% !important;
    left: 0 !important;
    right: auto !important;
    margin-left: -25px !important;
    margin-right: 0 !important;
  }

  .posts .hentry:not(.yf-featured):nth-of-type(4n+3) .entry-media,
  .posts .hentry:not(.yf-featured):nth-of-type(4n+4) .entry-media {
    float: right !important;
  }

  .posts .hentry:not(.yf-featured):nth-of-type(4n+3) .entry-inner,
  .posts .hentry:not(.yf-featured):nth-of-type(4n+4) .entry-inner {
    left: 0 !important;
    right: auto !important;
  }

  .posts .hentry:not(.yf-featured):nth-of-type(4n+3) .entry-inner:before,
  .posts .hentry:not(.yf-featured):nth-of-type(4n+3) .entry-inner:after,
  .posts .hentry:not(.yf-featured):nth-of-type(4n+4) .entry-inner:before,
  .posts .hentry:not(.yf-featured):nth-of-type(4n+4) .entry-inner:after {
    left: auto !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: -25px !important;
  }

  .posts .hentry:not(.yf-featured) .entry-title {
    font-size: 2rem;
  }

  .posts .hentry:not(.yf-featured) .entry-content {
    font-size: 1.4rem;
  }
}


/* ==========================================================================
   圖片淡入（由 js/lazy-bg.js 控制）
   卡片背景圖：覆蓋層在原本的預讀色塊上淡入；<img>：載入完成後淡入
   ========================================================================== */

.yf-bg-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.yf-bg-layer.is-loaded {
  opacity: 1;
}

/* 背景圖容器需為定位元素，覆蓋層才會對齊 */
.posts .entry-media {
  position: relative;
}

img.yf-fade {
  opacity: 0;
  transition: opacity 0.8s ease;
}

img.yf-fade.is-loaded {
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .yf-bg-layer,
  img.yf-fade {
    transition: none;
  }
}

/* ==========================================================================
   文章頁封面：與首頁 Banner 相同的緩慢推近（Ken Burns）
   封面是父主題寫在元素上的 inline 背景圖，以 ::before 繼承同一張圖做動畫，
   元素本身不縮放，避免超出版面。
   - 961px 以上：.entry-media 顯示直式大圖
   - 960px 以下：.entry-media-thumb 顯示橫式圖
   ========================================================================== */

.is-singular .entry-media,
.is-singular .entry-media-thumb {
  position: relative;
  overflow: hidden;
}

@media only screen and (min-width: 961px) {
  .is-singular .entry-media {
    position: fixed;
  }
}

.is-singular .entry-media::before,
.is-singular .entry-media-thumb::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background: inherit;
  background-position: center;
  background-size: cover;
  transform-origin: 60% 50%;
  animation: yf-banner-kenburns 24s ease-in-out infinite alternate;
  pointer-events: none;
}

.is-singular .entry-media > * {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .is-singular .entry-media::before,
  .is-singular .entry-media-thumb::before,
  .yf-archive-hero-media {
    animation: none;
  }
}

/* ==========================================================================
   Banner 輪播（js/slideshow.js）
   每 5 秒淡入下一張（1.6 秒），每張在 7 秒內交替緩慢放大或縮小
   ========================================================================== */

.yf-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.yf-slides > .yf-slide {
  position: absolute;
  inset: 0;
  z-index: 0;
  padding: 0 !important;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transform-origin: 55% 50%;
  transition: opacity 1.6s ease;
  animation: none;
}

.yf-slides > .yf-slide.is-leaving {
  z-index: 1;
  opacity: 1;
}

.yf-slides > .yf-slide.is-active {
  z-index: 2;
  opacity: 1;
}

.yf-slides > .yf-slide.zoom-in {
  animation: yf-slide-zoom-in 7s linear forwards;
}

.yf-slides > .yf-slide.zoom-out {
  animation: yf-slide-zoom-out 7s linear forwards;
}

@keyframes yf-slide-zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(1.1); }
}

@keyframes yf-slide-zoom-out {
  from { transform: scale(1.1); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .yf-slides > .yf-slide {
    transition: none;
    animation: none !important;
  }
}

/* ==========================================================================
   文章頁封面：.yf-cover 圖層（js/slideshow.js 淡入並輪播）
   取代先前以 ::before 繼承背景圖的推近效果
   ========================================================================== */

.is-singular .entry-media::before,
.is-singular .entry-media-thumb::before {
  content: none;
}

.yf-cover {
  position: absolute;
  inset: 0;
  background-position: center;
  background-size: cover;
  /* JS 未執行時的保險：4 秒後自動顯示 */
  opacity: 0;
  animation: yf-cover-fallback 0s 4s forwards;
}

.yf-cover.is-static {
  opacity: 1;
  animation: none;
}

@keyframes yf-cover-fallback {
  to { opacity: 1; }
}

.is-singular .entry-media > .yf-cover,
.is-singular .entry-media > .yf-slides,
.is-singular .entry-media-thumb > .yf-cover,
.is-singular .entry-media-thumb > .yf-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* 行動版顯示橫式封面，直式封面圖層不顯示（也不會下載） */
@media only screen and (max-width: 960px) {
  .is-singular .entry-media > .yf-cover,
  .is-singular .entry-media > .yf-slides {
    display: none;
  }
}

/* 文章頁封面：12 秒換一張，放大／縮小緩慢（15 秒內變化 8%，涵蓋停留與淡入時間） */
.is-singular .entry-media .yf-slides > .yf-slide.zoom-in {
  animation: yf-cover-zoom-in 15s linear forwards;
}

.is-singular .entry-media .yf-slides > .yf-slide.zoom-out {
  animation: yf-cover-zoom-out 15s linear forwards;
}

@keyframes yf-cover-zoom-in {
  from { transform: scale(1); }
  to   { transform: scale(1.08); }
}

@keyframes yf-cover-zoom-out {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* 內頁頁首：比照首頁，頁面頂端時不使用深色實底，捲動後才轉為實色（桌面寬度）
   - 分類／標籤／搜尋：頂端是深色主視覺，與首頁相同的上深下透漸層
   - 有封面的文章／頁面：左半是封面、右半是白色內文，漸層只落在左側封面上，右側選單改為深色字
   - 其他頂端為白底的頁面（無封面的頁面、404）維持實色，避免白字落在白底上 */
@media only screen and (min-width: 1201px) {
  .archive .site-header:not(.yf-header-solid),
  .search .site-header:not(.yf-header-solid) {
    background: linear-gradient(to bottom, rgba(17, 25, 20, 0.7), rgba(17, 25, 20, 0));
    box-shadow: none;
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) {
    background: linear-gradient(to right, rgba(17, 25, 20, 0.55) 0%, rgba(17, 25, 20, 0.25) 35%, rgba(17, 25, 20, 0) 50%);
    box-shadow: none;
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation a {
    color: var(--color-ink);
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation a:hover,
  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation a:focus {
    color: var(--color-leaf);
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) .yf-search-toggle {
    border-color: rgba(31, 42, 36, 0.35);
    color: var(--color-ink);
  }

  /* 下拉子選單仍是深色底，維持淺色字 */
  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation ul ul a {
    color: var(--on-dark-muted);
  }

  .is-singular.has-post-thumbnail .site-header:not(.yf-header-solid) #site-navigation ul ul a:hover {
    color: var(--on-dark-accent);
  }
}

/* 首頁 Banner：每張停留 7–10 秒，放大／縮小更緩慢（14 秒內變化 8%） */
.site-banner-media .yf-slides > .yf-slide.zoom-in {
  animation: yf-cover-zoom-in 14s linear forwards;
}

.site-banner-media .yf-slides > .yf-slide.zoom-out {
  animation: yf-cover-zoom-out 14s linear forwards;
}

/* ==========================================================================
   文章頁標題區（電腦版疊在左側封面上）
   - 以由下往上的漸層取代半透明黑框，標題區與封面自然融合
   - 修正分類列 top:-20px 蓋住麵包屑的問題
   - 分類改為外框膠囊，署名與日期排成一行
   ========================================================================== */

/* 分類：外框膠囊（所有寬度） */
.is-singular .entry-meta .cat-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  background: transparent;
  font-size: 0; /* 隱藏分類之間的逗號 */
  letter-spacing: 0;
}

.is-singular .entry-meta .cat-links a {
  display: inline-block;
  padding: 0.35em 1.1em;
  border: 1px solid currentColor;
  border-radius: 999px;
  font-family: var(--font-kai);
  font-size: 1.4rem;
  font-style: normal;
  letter-spacing: 0.08em;
  text-transform: none;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

/* 署名與日期 */
.is-singular .entry-posted .posted-info {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.2em 0.6em;
  font-style: normal;
}

.is-singular .entry-posted .byline a {
  letter-spacing: 0.04em;
  font-weight: 600;
}

.is-singular .entry-posted .edit-link {
  font-size: 1.2rem;
  letter-spacing: 0.15em;
  opacity: 0.6;
}

@media only screen and (min-width: 1201px) {
  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1.6rem;
    padding: 16rem 6rem 5rem;
    border-top: 0;
    background: linear-gradient(to top,
      rgba(12, 18, 14, 0.92) 0%,
      rgba(12, 18, 14, 0.75) 45%,
      rgba(12, 18, 14, 0.35) 75%,
      rgba(12, 18, 14, 0) 100%);
    color: rgba(255, 255, 255, 0.78);
    font-style: normal;
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header .yf-breadcrumb {
    order: 0;
    margin: 0;
    color: rgba(255, 255, 255, 0.72);
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header .yf-breadcrumb a {
    color: rgba(255, 255, 255, 0.82);
    letter-spacing: 0.06em;
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header .yf-breadcrumb a:hover {
    color: #fff;
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-meta {
    top: 0;
    margin: 0;
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-meta .cat-links a {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.6);
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-meta .cat-links a:hover {
    background: #fff;
    color: var(--color-ink);
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-header h1.entry-title {
    margin: 0;
    max-width: 22em;
    font-family: var(--font-serif);
    font-size: clamp(3.2rem, 2.6vw, 4.8rem);
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
    text-wrap: balance;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-posted {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin: 0.4rem 0 0;
    padding: 1.6rem 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 1.5rem;
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-posted .posted-info,
  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-posted .edit-link {
    float: none;
  }

  .has-post-thumbnail.is-singular:not(.home):not(.single-format-image):not(.page-template-eventbrite-index) .entry-posted .entry-date.published {
    color: #f1e3c4;
    font-size: 2rem;
  }
}

/* ==========================================================================
   延伸閱讀（取代 Jetpack 相關文章）
   ========================================================================== */

/* Jetpack 相關文章若仍輸出，一律隱藏 */
#jp-relatedposts {
  display: none !important;
}

.yf-related {
  max-width: 108rem;
  margin: 5rem auto 2rem;
  padding: 4rem 3rem 0;
  border-top: 1px solid #e4e0d4;
}

.yf-related-header {
  margin-bottom: 2.4rem;
}

.yf-related-label {
  display: block;
  font-family: var(--font-pen);
  font-size: 2.2rem;
  font-weight: 500;
  line-height: 1;
  color: var(--color-ocean);
  transform: rotate(-1.5deg);
  transform-origin: left;
}

.yf-related-title {
  margin: 0.4rem 0 0;
  font-size: 2.6rem;
  letter-spacing: 0.1em;
  color: var(--color-ink);
}

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

.yf-related-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e4e0d4;
  border-radius: 10px;
  background: #fff;
  color: var(--color-ink);
  text-decoration: none;
  transition: box-shadow 0.3s, transform 0.3s;
}

.yf-related-card:hover,
.yf-related-card:focus-visible {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(31, 42, 36, 0.12);
}

.yf-related-thumb {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background-color: var(--color-paper);
  background-position: center;
  background-size: cover;
}

.yf-related-thumb .yf-bg-layer {
  transition: opacity 0.8s ease, transform 0.6s ease;
}

.yf-related-card:hover .yf-related-thumb .yf-bg-layer {
  transform: scale(1.05);
}

.yf-related-body {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 1.6rem 1.8rem 2rem;
}

.yf-related-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.8rem;
}

.yf-related-cat {
  padding: 0.1em 0.8em;
  border: 1px solid var(--color-leaf);
  border-radius: 999px;
  font-family: var(--font-kai);
  font-size: 1.3rem;
  color: var(--color-leaf);
}

.yf-related-meta time {
  font-family: var(--font-pen);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--color-ocean);
}

.yf-related-name {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-ink);
  transition: color 0.2s;
}

.yf-related-card:hover .yf-related-name,
.yf-related-card:focus-visible .yf-related-name {
  color: var(--color-leaf);
}

/* 「更多延伸閱讀」 */
.yf-related-card.is-hidden {
  display: none;
}

.yf-related-card.is-revealed {
  animation: yf-related-in 0.5s ease both;
}

@keyframes yf-related-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}

.yf-related-more-wrap {
  margin-top: 2.8rem;
  text-align: center;
}

.yf-related-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 2.8rem;
  border: 1px solid var(--color-leaf);
  border-radius: 999px;
  background: #fff;
  color: var(--color-leaf);
  font-family: var(--font-serif);
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}

.yf-related-more:hover,
.yf-related-more:focus-visible {
  background: var(--color-leaf);
  color: #fff;
}

.yf-related-more-count {
  font-weight: 500;
  letter-spacing: 0.04em;
}

/* 手機：改為上下排列的橫式小卡（左圖右文），不需左右滑動 */
@media (max-width: 767px) {
  .yf-related {
    padding: 3rem 1.6rem 0;
  }

  .yf-related-list {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }

  .yf-related-card {
    flex-direction: row;
    align-items: stretch;
  }

  .yf-related-thumb {
    flex: 0 0 36%;
    aspect-ratio: auto;
    min-height: 11rem;
  }

  .yf-related-body {
    justify-content: center;
    padding: 1.2rem 1.4rem;
  }

  .yf-related-name {
    font-size: 1.6rem;
  }

  .yf-related-more {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-related-card,
  .yf-related-thumb .yf-bg-layer,
  .yf-related-name,
  .yf-related-more {
    transition: none;
  }

  .yf-related-card.is-revealed {
    animation: none;
  }

  .yf-related-card:hover,
  .yf-related-card:hover .yf-related-thumb .yf-bg-layer {
    transform: none;
  }
}

/* ==========================================================================
   文章內頁上一篇／下一篇：深綠色翻頁列
   ========================================================================== */

.yf-pager {
  display: grid;
  grid-template-columns: 1fr 1fr;
  max-width: 108rem;
  /* 左右留白與下方延伸閱讀（padding 0 3rem）對齊，避免貼齊封面邊緣 */
  margin: 4rem 3rem 0;
  background: var(--forest-900);
  border-radius: 10px;
  overflow: hidden;
}

.yf-pager-item {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  min-width: 0;
  padding: 2.4rem 3rem;
  color: var(--on-dark);
  text-decoration: none;
  transition: background-color 0.25s;
}

.yf-pager-item + .yf-pager-item {
  border-left: 1px solid var(--line-dark);
}

a.yf-pager-item:hover,
a.yf-pager-item:focus-visible {
  background: var(--forest-800);
  color: var(--on-dark);
  text-decoration: none;
}

.yf-pager-item.is-next {
  flex-direction: row-reverse;
  text-align: right;
}

.yf-pager-arrow {
  flex: 0 0 auto;
  font-family: Arial, sans-serif;
  font-size: 2.6rem;
  line-height: 1;
  color: var(--color-sand);
  transition: transform 0.25s;
}

a.yf-pager-item.is-prev:hover .yf-pager-arrow {
  transform: translateX(-4px);
}

a.yf-pager-item.is-next:hover .yf-pager-arrow {
  transform: translateX(4px);
}

.yf-pager-thumb {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid rgba(240, 236, 226, 0.25);
  background-color: var(--forest-800);
  background-position: center;
  background-size: cover;
}

.yf-pager-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.yf-pager-label {
  font-size: 1.3rem;
  letter-spacing: 0.2em;
  color: var(--on-dark-soft);
}

.yf-pager-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--on-dark);
  transition: color 0.2s;
}

a.yf-pager-item:hover .yf-pager-title {
  color: var(--on-dark-accent);
}

.yf-pager-date {
  font-family: var(--font-pen);
  font-size: 1.7rem;
  font-weight: 500;
  color: #f1e3c4;
}

/* 延伸閱讀接在翻頁列之後，不需再加上方分隔線 */
.yf-pager + .yf-related {
  border-top: 0;
}

@media (max-width: 767px) {
  .yf-pager {
    grid-template-columns: 1fr;
    margin: 3rem 1.6rem 0;
  }

  .yf-pager-item {
    padding: 1.8rem 1.6rem;
  }

  .yf-pager-item + .yf-pager-item {
    border-left: 0;
    border-top: 1px solid var(--line-dark);
  }

  .yf-pager-item.is-empty {
    display: none;
  }

  /* 手機：兩列都是「箭頭｜文字｜圖片」同一順序，方便單手瀏覽 */
  .yf-pager-item.is-prev {
    flex-direction: row;
  }

  .yf-pager-item.is-prev .yf-pager-thumb {
    order: 3;
    margin-left: auto;
  }

  .yf-pager-item.is-prev .yf-pager-text {
    order: 2;
  }

  .yf-pager-item.is-next {
    flex-direction: row;
    text-align: left;
  }

  .yf-pager-item.is-next .yf-pager-arrow {
    order: 1;
  }

  .yf-pager-item.is-next .yf-pager-text {
    order: 2;
  }

  .yf-pager-item.is-next .yf-pager-thumb {
    order: 3;
    margin-left: auto;
  }

  .yf-pager-thumb {
    width: 52px;
    height: 52px;
  }

  .yf-pager-title {
    font-size: 1.6rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .yf-pager-item,
  .yf-pager-arrow,
  .yf-pager-title {
    transition: none;
  }

  a.yf-pager-item:hover .yf-pager-arrow {
    transform: none;
  }
}