/* ============================================================
   article.css — 單篇文章頁 (journal.html)
   ============================================================ */
.article { padding-top: clamp(7rem, 14vh, 11rem); }

.article__head { margin-bottom: clamp(2.4rem, 5vw, 4rem); }
.article__back {
  font-family: var(--font-body); font-weight: 300; font-size: var(--text-caption);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 0.6rem; margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.article__back::before { content: ""; width: 1.6rem; height: 1px; background: var(--warm); transition: width var(--dur-fast) var(--ease-shutter); }
.article__back:hover { color: var(--ink); }
.article__back:hover::before { width: 2.6rem; }

.article__meta { display: flex; gap: 1.4rem; align-items: center; flex-wrap: wrap; margin-bottom: clamp(1.2rem, 3vw, 2rem); }
.article__meta span { font-family: var(--font-body); font-weight: 300; font-size: var(--text-caption); color: var(--ink-dim); letter-spacing: var(--tracking-body); }
.article__cat { color: var(--warm) !important; letter-spacing: var(--tracking-wide) !important; text-transform: uppercase; }
.article__title {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2.4rem, 7vw, 6rem); letter-spacing: 0.02em; line-height: 1.0;
  color: var(--ink); max-width: 18ch; text-wrap: balance;
}

/* 全幅封面 — 溢出版面, 黑白高對比 */
.article__cover {
  position: relative; width: 100vw; margin-left: 50%; transform: translateX(-50%);
  aspect-ratio: 21 / 9; overflow: hidden; margin-block: clamp(2.5rem, 6vw, 5rem);
}
.article__cover .photo { filter: grayscale(100%) contrast(1.2) brightness(0.92); }
.article__cover figcaption {
  position: absolute; left: var(--grid-margin); bottom: 1.2rem;
  font-family: var(--font-body); font-size: var(--text-micro); color: var(--ink-dim);
  letter-spacing: var(--tracking-wide); text-transform: uppercase; mix-blend-mode: difference;
}

/* 內文欄位 — 居中窄欄, 寬鬆行距 */
.prose { max-width: 64ch; margin-inline: auto; }
.prose > * { margin-bottom: clamp(1.4rem, 3vw, 2rem); }
.prose p { font-family: var(--font-body); font-weight: 300; font-size: var(--text-body); line-height: var(--leading-loose); color: var(--ink); letter-spacing: var(--tracking-body); }
.prose .lead-p { font-size: var(--text-sub); color: var(--ink); line-height: 1.7; }
.prose h2 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-title); letter-spacing: var(--tracking-wide); color: var(--ink); margin-top: clamp(3rem, 7vw, 5rem); }
.prose h3 { font-family: var(--font-display); font-weight: 500; font-size: var(--text-sub); letter-spacing: 0.06em; color: var(--ink); margin-top: clamp(2rem, 5vw, 3.2rem); }
.prose strong { color: var(--ink); font-weight: 400; }
.prose em { color: var(--warm); font-style: normal; }
.prose a { color: var(--warm); border-bottom: 1px solid var(--line); }
.prose a:hover { border-color: var(--warm); }
.prose blockquote {
  border-left: 1px solid var(--warm); padding-left: clamp(1.2rem, 3vw, 2rem);
  margin-left: 0; color: var(--ink-dim);
  font-size: var(--text-sub); line-height: 1.7;
}
.prose blockquote p { color: var(--ink-dim); font-size: inherit; }
.prose pre {
  background: var(--surface); border: 1px solid var(--line); padding: clamp(1rem, 2.5vw, 1.6rem);
  overflow-x: auto; font-family: var(--font-body); font-size: var(--text-caption); color: var(--ink); line-height: 1.7;
}
.prose figure.inline-photo { margin-inline: calc(-1 * clamp(0rem, 6vw, 4rem)); }
.prose figure.inline-photo .photo-wrap { aspect-ratio: 16 / 10; overflow: hidden; }
.prose figure.inline-photo figcaption { font-family: var(--font-body); font-size: var(--text-micro); color: var(--ink-dim); letter-spacing: var(--tracking-body); margin-top: 0.8rem; text-align: center; }

/* YouTube 16:9 wrapper (SPEC §4.6) */
.video-wrapper { position: relative; padding-top: 56.25%; margin-inline: calc(-1 * clamp(0rem, 6vw, 4rem)); border: 1px solid var(--line); }
.video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* tags + 文章導覽 */
.article__tags { max-width: 64ch; margin: clamp(3rem, 7vw, 5rem) auto 0; display: flex; gap: 1.2rem; flex-wrap: wrap; }
.article__tags span { font-family: var(--font-body); font-weight: 300; font-size: var(--text-caption); color: var(--ink-dim); letter-spacing: var(--tracking-body); }
.article__tags span::before { content: "# "; color: var(--warm); }

.article__nav { max-width: 64ch; margin: clamp(3rem, 7vw, 5rem) auto 0; padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 2rem; }
.article__nav a { display: flex; flex-direction: column; gap: 0.5rem; }
.article__nav .dir { font-family: var(--font-body); font-size: var(--text-micro); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--ink-dim); }
.article__nav .t { font-family: var(--font-display); font-weight: 500; font-size: var(--text-body); color: var(--ink); transition: color var(--dur-fast); }
.article__nav a:hover .t { color: var(--warm); }
.article__nav a.next { text-align: right; align-items: flex-end; }

@media (max-width: 768px) {
  .prose figure.inline-photo, .video-wrapper { margin-inline: 0; }
}