/* 藝術筆記（/photography/learn/art/<slug>/）
   「看懂寫真」研究專區的藝術筆記線：一頁讀一件作品。頁面以 <link> 自行載入本檔（head 不需要條件判斷）。
   調性：暖紙＋鏽紅＋赭黃（取自作品本身的低彩度色），開頭與「互動看畫」用深色帶銜接攝影區的 noir。
   互動元件沿用 AI 教材的 ae-*（front matter learn_kit: true 載入 ai-learn.css／ai-learn.js）；
   learn-kit.css 只對文章（.post-content.ae-page）生效，這裡自己處理欄數與配色。
   所有選擇器以 .an-page 開頭，不影響其他頁。 */

.an-page {
  --an-paper: #f5f2eb;
  --an-paper-2: #ece6dc;
  --an-white: #fffdf8;
  --an-ink: #352b29;
  --an-body: #3f3532;
  --an-muted: #6b5e55;
  --an-rule: #d9cfc2;
  --an-rust: #a04b30;
  --an-rust-ink: #8a3c24;
  --an-ochre: #c29242;
  --an-olive: #64724e;
  --an-night: #1b1715;
  --an-night-2: #2a2321;
  --an-night-text: #efe7da;
  --an-night-muted: #c9bcae;
  --an-serif: var(--font-display, "Noto Serif TC", "Songti TC", "PMingLiU", serif);
  /* 讓 ae-* 元件換上本頁的暖色 */
  --ae-navy: #352b29;
  --ae-navy-2: #4a3c38;
  --ae-body: #3f3532;
  --ae-muted: #6b5e55;
  --ae-accent: #a04b30;
  --ae-accent-ink: #8a3c24;
  --ae-accent-soft: #f1e6d6;
  --ae-llm-soft: #f6eadb;
  --ae-tip: #e2b25a;
  margin-top: var(--header-h, 76px);
  background: var(--an-paper);
  color: var(--an-body);
  font-size: 1.0625rem;
  line-height: 1.95;
  letter-spacing: .02em;
  overflow-x: clip;
}
.an-page * { box-sizing: border-box; }
.an-page :is(h1, h2, h3) { color: var(--an-ink); font-weight: 600; line-height: 1.45; }
.an-page h2 { font-family: var(--an-serif); font-size: clamp(1.75rem, 3vw, 2.6rem); letter-spacing: .04em; margin: 0 0 1.1rem; }
.an-page h3 { font-size: 1.25rem; margin: 0 0 .8rem; }
.an-page p { margin: 0 0 1.1em; }
.an-page p:last-child { margin-bottom: 0; }
.an-page img { display: block; max-width: 100%; height: auto; }
.an-page figure { margin: 0; }
.an-page a { color: inherit; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.an-page a:hover { color: var(--an-rust); }
.an-page :is(a, button, summary, input, textarea):focus-visible { outline: 3px solid var(--an-ochre); outline-offset: 4px; }
.an-page section[id] { scroll-margin-top: calc(var(--header-h, 76px) + 16px); }

.an-wrap { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.an-narrow { max-width: 840px; }
.an-eyebrow { display: block; margin: 0 0 1rem; color: var(--an-rust); font-size: .78rem; font-weight: 700; letter-spacing: .16em; }
.an-lead { color: var(--an-muted); font-size: 1.1rem; }
.an-note { color: var(--an-muted); font-size: .85rem; line-height: 1.9; }
.an-source { margin-top: 1rem; color: var(--an-muted); font-size: .85rem; line-height: 1.85; }
.an-refs { white-space: nowrap; font-size: .72rem; vertical-align: super; line-height: 0; margin-left: 3px; }
.an-refs a { display: inline-block; padding: 0 2px; color: var(--an-rust); text-decoration: none; }
.an-head { max-width: 820px; margin-bottom: 2.4rem; }
.an-chapter { padding: clamp(52px, 7vw, 84px) 0; border-bottom: 1px solid var(--an-rule); }
.an-mini { display: block; margin-bottom: .6rem; color: var(--an-rust); font-size: .76rem; font-weight: 700; letter-spacing: .12em; }
.an-pill { display: inline-flex; align-items: center; border: 1px solid currentColor; border-radius: 30px; padding: 2px 12px; font-size: .78rem; opacity: .9; }
.an-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 1.4rem 0; }
.an-btns { display: flex; flex-wrap: wrap; gap: 12px; }
.an-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; padding: 10px 22px; border: 1px solid var(--an-ink); border-radius: 999px; background: transparent; color: var(--an-ink); font-size: .92rem; font-weight: 700; line-height: 1.4; text-decoration: none; cursor: pointer; }
.an-btn:hover { background: var(--an-ink); color: var(--an-white) !important; }
.an-btn--solid { background: var(--c-gold, #e5a300); border-color: var(--c-gold, #e5a300); color: #1b1715; }
.an-btn--solid:hover { background: #f5c53b; border-color: #f5c53b; color: #1b1715 !important; }
.an-btn--small { min-height: 40px; padding: 8px 16px; font-size: .85rem; }
.an-correction { margin-top: 1.8rem; padding: 1rem 1.25rem; border-left: 3px solid var(--an-ochre); background: #eee7d9; font-size: .92rem; line-height: 1.9; }
.an-credit { display: block; margin-top: .6rem; color: var(--an-muted); font-size: .8rem; line-height: 1.7; }

/* ===== Hero（深色帶） ===== */
.an-hero { background: var(--an-night); color: var(--an-night-text); padding: clamp(28px, 4vw, 44px) 0 clamp(52px, 6vw, 80px); }
.an-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: clamp(24px, 4vw, 44px); color: var(--an-night-muted); font-size: .82rem; }
.an-crumbs a { color: var(--an-night-muted); }
.an-crumbs a:hover { color: #f5c53b; }
.an-hero-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.an-hero .an-eyebrow { color: #e2b25a; }
.an-hero h1 { margin: 0 0 1.4rem; color: #fbf6ec; font-family: var(--an-serif); font-size: clamp(3rem, 6vw, 4.9rem); line-height: 1.32; letter-spacing: .07em; }
.an-hero h1 em { font-style: normal; color: #e9875f; }
.an-hero-title { margin: 0 0 1rem; font-family: Georgia, serif; font-size: 1.3rem; letter-spacing: .12em; color: #fbf6ec; }
.an-hero-desc { max-width: 30rem; color: var(--an-night-muted); }
.an-hero .an-btn { border-color: #e9dfd0; color: #fbf6ec; }
.an-hero .an-btn:hover { background: #fbf6ec; color: var(--an-night) !important; }
.an-hero .an-btn--solid { border-color: var(--c-gold, #e5a300); color: #1b1715; }
.an-hero .an-source { color: var(--an-night-muted); }
.an-hero .an-refs a { color: #e9875f; }
.an-frame { padding: clamp(10px, 1.4vw, 16px); background: #faf9f5; border: 1px solid #d8d0c4; box-shadow: 14px 18px 40px rgba(0, 0, 0, .35); transform: rotate(1deg); max-width: 560px; margin: 0 auto; }
.an-frame img { width: 100%; }
.an-hero figcaption { max-width: 560px; margin: 1.3rem auto 0; color: var(--an-night-muted); font-size: .8rem; line-height: 1.75; }

/* ===== 開場 ===== */
.an-intro { padding: clamp(40px, 5vw, 60px) 0; border-bottom: 1px solid var(--an-rule); }
.an-intro-grid { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: clamp(24px, 5vw, 62px); align-items: start; }
.an-intro-title { font-family: var(--an-serif); font-size: 1.55rem; line-height: 1.75; color: var(--an-ink); }
.an-legend { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 1.5rem; color: var(--an-muted); font-size: .8rem; }
.an-legend span::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--an-rust); vertical-align: middle; }
.an-legend span:nth-child(2)::before { background: var(--an-olive); }
.an-legend span:nth-child(3)::before { background: var(--an-ochre); }
.an-toc { margin-top: 2rem; padding-top: 1.4rem; border-top: 1px solid var(--an-rule); }
.an-toc ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 24px; margin: 0; padding: 0; list-style: none; counter-reset: toc; }
.an-toc li { counter-increment: toc; font-size: .9rem; }
.an-toc a { display: flex; gap: .6rem; padding: 6px 0; text-decoration: none; }
.an-toc a::before { content: counter(toc, decimal-leading-zero); color: var(--an-rust); font-family: Georgia, serif; }

/* ===== 01 作品身分 ===== */
.an-identity-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 42px; }
.an-dl { display: grid; grid-template-columns: 112px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--an-rule); }
.an-dl dt, .an-dl dd { margin: 0; padding: 12px 0; border-bottom: 1px solid var(--an-rule); font-size: .95rem; line-height: 1.75; }
.an-dl dt { color: var(--an-muted); }
.an-dl dd { padding-left: 10px; }
.an-duck { background: var(--an-paper-2); padding: 28px; }
.an-duck h3 { font-family: var(--an-serif); font-size: 1.55rem; }
.an-duck p { font-size: .95rem; }
.an-duck figure { float: right; width: 120px; margin: 4px 0 16px 20px; }
.an-duck figure a { display: block; }
.an-duck::after { content: ""; display: block; clear: both; }
.an-museum { margin-top: 2rem; padding: 26px 28px; background: var(--an-white); border: 1px solid var(--an-rule); }
.an-museum ol { margin: .6rem 0 0; padding-left: 1.3rem; }
.an-museum li { margin-bottom: .35rem; }

/* ===== 02 尺度 ===== */
.an-fig { margin: 0; }
.an-fig > a, .an-fig picture { display: block; }
.an-fig img { width: 100%; border: 1px solid var(--an-rule); border-radius: 14px; background: #fff; }
.an-fig figcaption { margin-top: .8rem; color: var(--an-muted); font-size: .85rem; line-height: 1.8; }
.an-two { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-top: 1.8rem; }

/* ===== 03 局部 ===== */
.an-open-original { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-bottom: 2rem; padding: 22px 26px; background: var(--an-ink); color: var(--an-paper); border-radius: 4px; }
.an-open-original p { flex: 1 1 300px; margin: 0; font-size: .95rem; color: #e9dfd0; }
.an-open-original .an-btn { border-color: #e9dfd0; color: #fbf6ec; }
.an-open-original .an-btn:hover { background: #fbf6ec; color: var(--an-ink) !important; }
.an-open-original .an-btn--solid { border-color: var(--c-gold, #e5a300); color: #1b1715; }
.an-details { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; margin: 0; padding: 0; list-style: none; }
.an-detail { background: var(--an-white); border: 1px solid var(--an-rule); }
.an-detail-img { display: flex; align-items: center; justify-content: center; height: 215px; padding: 14px; background: #eeeae2; overflow: hidden; }
.an-detail-img img { max-height: 100%; width: auto; max-width: 100%; object-fit: contain; transition: transform .4s; }
.an-detail-img:hover img { transform: scale(1.035); }
.an-detail-body { padding: 22px 24px 24px; }
.an-detail-num { margin-bottom: .7rem; color: var(--an-rust); font: .82rem/1 Georgia, serif; letter-spacing: .12em; }
.an-detail-body h3 { font-family: var(--an-serif); font-size: 1.28rem; }
.an-detail-body p { font-size: .94rem; line-height: 1.9; }
.an-detail-extra { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 24px; align-items: center; margin-top: 1.8rem; padding: 24px; background: var(--an-paper-2); }
.an-detail-extra img { max-height: 120px; width: auto; margin: 0 auto; }
.an-detail-extra p { font-size: .95rem; }

/* ===== 04 互動看畫（深色帶） ===== */
.an-viewer { background: var(--an-night-2); color: var(--an-night-text); padding: clamp(52px, 7vw, 80px) 0; }
.an-viewer h2, .an-viewer h3 { color: #fbf6ec; }
.an-viewer .an-eyebrow { color: #e2b25a; }
.an-viewer .an-lead, .an-viewer .an-note { color: var(--an-night-muted); }
.an-viewer-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 44px; align-items: start; }
.an-map { position: relative; overflow: hidden; border: 10px solid #ece7de; background: #efede7; }
.an-map > img { width: 100%; }
.an-focus { position: absolute; z-index: 2; border: 2px solid #e9875f; background: rgba(160, 75, 48, .06); pointer-events: none; transition: all .35s; }
.an-hotspot { position: absolute; z-index: 3; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; transform: translate(-50%, -50%); border: 1px solid rgba(255, 255, 255, .85); border-radius: 50%; background: var(--an-ink); color: #fffdf8; font: 13px Georgia, serif; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); cursor: pointer; }
.an-hotspot:hover, .an-hotspot[aria-pressed="true"] { background: var(--an-rust); }
.an-hotspot[aria-pressed="true"] { box-shadow: 0 0 0 6px rgba(160, 75, 48, .25); }
.an-map:not(.is-ready) :is(.an-hotspot, .an-focus), .an-map.no-guides :is(.an-hotspot, .an-focus) { display: none; }
.an-viewer-control { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 14px; margin-top: 1rem; color: var(--an-night-muted); font-size: .85rem; }
.an-viewer-control label { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.an-viewer-control input { width: 18px; height: 18px; accent-color: #e9875f; }
.an-viewer-control a { color: #fbf6ec; }
.an-tabs { display: none; flex-wrap: wrap; gap: 8px; margin: 0 0 1.4rem; }
.an-viewer.is-ready .an-tabs { display: flex; }
.an-tabs button { min-height: 40px; padding: 6px 14px; border: 1px solid #8a7a6e; border-radius: 10px; background: transparent; color: var(--an-night-text); font-size: .88rem; cursor: pointer; }
.an-tabs button[aria-pressed="true"] { background: #eee5d5; border-color: #eee5d5; color: var(--an-ink); }
.an-entry { padding: 0 0 1.4rem; margin-bottom: 1.4rem; border-bottom: 1px solid #4a3f3a; }
.an-viewer.is-ready .an-entry { display: none; padding: 0; margin: 0; border: 0; }
.an-viewer.is-ready .an-entry.is-active { display: block; }
.an-entry-kicker { margin-bottom: .6rem; color: #e2b25a; font: .82rem Georgia, serif; letter-spacing: .15em; }
.an-entry h3 { font-family: var(--an-serif); font-size: 1.75rem; }
.an-entry-label { margin: 1.1rem 0 .3rem; color: #e2b25a; font-size: .78rem; font-weight: 700; letter-spacing: .1em; }
.an-entry p { font-size: 1rem; line-height: 1.9; }

/* ===== 05 構圖與色彩 ===== */
.an-formal { display: grid; grid-template-columns: minmax(0, .88fr) minmax(0, 1.12fr); gap: 40px; }
.an-comp { padding: 18px; background: var(--an-white); border: 1px solid var(--an-rule); }
.an-comp-stage { position: relative; }
.an-comp-stage img { width: 100%; opacity: .5; }
.an-comp-stage svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.an-comp-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: .9rem 0 0; padding: 0; list-style: none; font-size: .9rem; font-weight: 700; }
.an-comp-legend li:nth-child(1) { color: var(--an-rust); }
.an-comp-legend li:nth-child(2) { color: var(--an-olive); }
.an-comp-legend li:nth-child(3) { color: #8a6420; }
.an-comp figcaption { margin-top: .8rem; color: var(--an-muted); font-size: .82rem; line-height: 1.8; }
.an-prose h3 { font-family: var(--an-serif); margin-top: 1.8rem; }
.an-prose h3:first-child { margin-top: 0; }
.an-palette { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 13px; margin: 2.2rem 0 0; padding: 0; list-style: none; }
.an-swatch { height: 55px; border: 1px solid rgba(53, 43, 41, .1); }
.an-swatch-name { margin: .6rem 0 .1rem; font-size: .85rem; color: var(--an-ink); }
.an-swatch-note { color: var(--an-muted); font-size: .78rem; line-height: 1.6; }
.an-tension { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; margin-top: 1.6rem; padding: 26px 0; border-top: 1px solid var(--an-rule); border-bottom: 1px solid var(--an-rule); }
.an-tension h3 { font-family: var(--an-serif); }
.an-tension p { font-size: .95rem; }
.an-tension-x { color: var(--an-rust); font: 2.4rem Georgia, serif; }

/* ===== 06 畫名：三種讀法翻牌 ===== */
.an-page .ae-traits { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 0; }
.an-page .ae-flip__face { border-radius: 4px; background: var(--an-white); border: 1px solid var(--an-rule); border-top: 4px solid var(--an-ochre); color: var(--an-body); }
.an-page .ae-flip:nth-child(2) .ae-flip__face { border-top-color: var(--an-olive); }
.an-page .ae-flip:nth-child(3) .ae-flip__face { border-top-color: var(--an-rust); }
.an-page .ae-flip__face h3 { font-family: var(--an-serif); font-size: 1.3rem; }
.an-page .ae-flip__face--back { background: var(--an-ink); color: #f3ece1; }
.an-page .ae-flip__face--back h3 { color: #fbf6ec; }
.an-page .ae-flip__face p { font-size: .95rem; line-height: 1.85; }
.an-quote { margin: 2.6rem 0 0; padding: 32px 36px; border-left: 3px solid var(--an-rust); background: var(--an-paper-2); }
.an-quote p { margin-bottom: .8rem; font-family: var(--an-serif); font-size: clamp(1.45rem, 3vw, 2.15rem); line-height: 1.7; color: var(--an-ink); }
.an-quote footer { color: var(--an-muted); font-size: .8rem; }

/* ===== 07 生平與背景 ===== */
.an-bio { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 44px; align-items: start; }
.an-page .ae-tl { grid-template-columns: 1fr; gap: .9rem; margin-top: 0; }
.an-page .ae-tl::before { left: .8rem; right: auto; top: 0; bottom: 0; width: 3px; height: auto; transform: none; background: var(--an-rule); }
.an-page .ae-tl li, .an-page .ae-tl li:nth-child(odd), .an-page .ae-tl li:nth-child(even) { min-height: 0; justify-content: flex-start; padding-left: 2.6rem; }
.an-page .ae-tl__dot { left: .9rem; top: 1.6rem; }
.an-page .ae-tl li[data-c="ochre"] { --c: var(--an-ochre); --c-ink: #8a6420; }
.an-page .ae-tl li[data-c="rust"] { --c: var(--an-rust); --c-ink: var(--an-rust-ink); }
.an-page .ae-tl__card { min-height: 0; border: 1px solid var(--an-rule); border-radius: 4px; background: var(--an-white); }
.an-page .ae-tl__card::before { height: 4px; }
.an-page .ae-tl__year { font-family: Georgia, serif; font-weight: 400; font-size: 1.4rem; }
.an-page .ae-tl__card h3 { color: var(--an-ink); }
.an-page .ae-tl__card p { font-size: .93rem; line-height: 1.8; }
.an-aside { padding: 30px; background: var(--an-paper-2); }
.an-aside h3 { font-family: var(--an-serif); font-size: 1.45rem; }
.an-aside blockquote { margin: 1.2rem 0; padding: 0 0 0 1rem; border-left: 3px solid var(--an-ochre); font-family: var(--an-serif); font-size: 1.05rem; line-height: 1.9; color: var(--an-ink); }
.an-aside p { font-size: .95rem; }
.an-split { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-top: 2.6rem; }
.an-split h3 { font-family: var(--an-serif); font-size: 1.4rem; }
.an-music { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 2.6rem; padding: 34px; background: var(--an-paper-2); }
.an-disc { display: flex; align-items: center; justify-content: center; width: 166px; height: 166px; border-radius: 50%; background: repeating-radial-gradient(circle at center, #423835 0 2px, #514743 3px, #423835 4px); box-shadow: 7px 9px 15px rgba(53, 43, 41, .1); }
.an-disc span { display: flex; align-items: center; justify-content: center; width: 67px; height: 67px; border-radius: 50%; background: #bd8e46; color: var(--an-ink); font: 11px/1.4 Georgia, serif; text-align: center; }
.an-music h3 { font-family: var(--an-serif); font-size: 1.45rem; }
.an-music p { font-size: .95rem; }

/* 影片：點了才載入 */
.an-videos { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 2.6rem; }
.an-video-frame { position: relative; aspect-ratio: 16 / 9; background: var(--an-night); overflow: hidden; }
.an-video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.an-video-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; gap: .4rem; padding: 20px 22px; background: linear-gradient(135deg, #2a2321, #1b1715 60%, #3a2a24); color: #fbf6ec !important; text-decoration: none; }
.an-video-start:hover { background: linear-gradient(135deg, #3a2a24, #1b1715 60%, #4a3226); }
.an-video-play { position: absolute; top: 50%; left: 50%; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; transform: translate(-50%, -60%); border-radius: 50%; background: var(--c-gold, #e5a300); color: #1b1715; font-size: 1.6rem; }
.an-video-start b { font-size: 1rem; line-height: 1.5; }
.an-video-start small { color: var(--an-night-muted); font-size: .78rem; }
.an-video figcaption { margin-top: .7rem; color: var(--an-muted); font-size: .85rem; line-height: 1.8; }

/* ===== 08 繪畫本身 ===== */
.an-bridge { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: center; margin-top: 2.2rem; padding: 34px; background: var(--an-white); border: 1px solid var(--an-rule); }
.an-bridge img { width: 100%; }
.an-bridge h3 { font-family: var(--an-serif); }
.an-bridge p { font-size: .95rem; }

/* ===== 09 延伸作品 ===== */
.an-related { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--an-rule); }
.an-related li { display: grid; grid-template-columns: 105px minmax(0, 1.15fr) minmax(0, 1fr); gap: 30px; padding: 26px 0; border-bottom: 1px solid var(--an-rule); }
.an-related-year { color: var(--an-rust); font: 1.8rem/1.5 Georgia, serif; }
.an-related h3 { margin-bottom: .3rem; font-family: var(--an-serif); font-size: 1.3rem; }
.an-related-en { margin: 0 0 .7rem; color: var(--an-muted); font: 1rem/1.6 Georgia, serif; }
.an-related p { font-size: .95rem; }
.an-related .an-q { color: var(--an-muted); font-size: .9rem; }
.an-arrow { color: var(--an-rust); font-size: .88rem; text-decoration: none; }

/* ===== 10 FAQ ===== */
.an-faq .ae-reveal { margin: 0; border-radius: 0; background: transparent; border-bottom: 1px solid var(--an-rule); }
.an-faq .ae-reveal:first-child { border-top: 1px solid var(--an-rule); }
.an-faq .ae-reveal > summary { position: relative; padding: 1.1rem 2.2rem 1.1rem 0; color: var(--an-ink); font-size: 1.05rem; }
.an-faq .ae-reveal > summary::before { content: none; }
.an-faq .ae-reveal > summary::after { content: "＋"; position: absolute; right: 2px; top: 1.1rem; color: var(--an-rust); }
.an-faq .ae-reveal[open] > summary::after { content: "－"; }
.an-faq .ae-reveal > div { padding: 0 2rem 1.4rem 0; color: var(--an-muted); font-size: .95rem; }

/* ===== 11 回到我的那句話 ===== */
.an-reflection { background: var(--an-paper-2); }
.an-reflection-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .75fr); gap: 60px; align-items: start; }
.an-reflection-grid h3 { font-family: var(--an-serif); font-size: 1.35rem; margin-top: 1.6rem; }
.an-reflection-grid h3:first-child { margin-top: 0; }
.an-memo { padding: 30px; background: var(--an-white); border: 1px solid var(--an-rule); }
.an-memo h3 { font-family: var(--an-serif); font-size: 1.35rem; }
.an-memo label { display: block; margin-bottom: .7rem; font-size: .92rem; }
.an-memo textarea { width: 100%; min-height: 150px; padding: 14px; resize: vertical; border: 1px solid var(--an-rule); border-radius: 0; background: var(--an-paper); color: var(--an-ink); font: inherit; font-size: .95rem; line-height: 1.9; }
.an-memo .an-btns { margin-top: 1rem; }
.an-memo-status { min-height: 1.5em; margin-top: .6rem; color: var(--an-olive); font-size: .85rem; }
.an-memo .an-note { margin-top: .8rem; font-size: .8rem; }
.an-memo:not(.is-ready) .an-memo-tools { display: none; }

/* ===== 12 三分鐘重看（步驟） ===== */
.an-page .ae-dg { margin: 0; padding: clamp(20px, 3vw, 32px); border: 1px solid var(--an-rule); border-radius: 4px; background: var(--an-white); }
.an-page .ae-dg__title { color: var(--an-ink); font-weight: 700; margin: 0 0 1.2rem; }
.an-page .ae-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.an-page .ae-step { border: 1px solid var(--an-rule); border-top: 3px solid var(--an-rust); border-radius: 4px; }
.an-page .ae-step.is-active { background: #f6eadb; box-shadow: 0 12px 26px rgba(160, 75, 48, .14); }
.an-page .ae-step + .ae-step::before { color: var(--an-rust); }
.an-page .ae-step h3 { font-family: var(--an-serif); font-size: 1.2rem; color: var(--an-ink); }
.an-page .ae-step p { font-size: .95rem; line-height: 1.8; }
.an-page .ae-num { background: var(--an-rust); }
.an-minute { color: var(--an-rust); font: .82rem Georgia, serif; letter-spacing: .1em; }

/* ===== 13 資料來源 ===== */
.an-sources { display: grid; grid-template-columns: 1fr 1fr; gap: 0 36px; margin: 0; padding: 0; list-style: none; }
.an-ref { padding: 18px 0; border-top: 1px solid var(--an-rule); scroll-margin-top: calc(var(--header-h, 76px) + 16px); }
.an-ref:target { background: #eee2c9; outline: 10px solid #eee2c9; }
.an-ref-type { color: var(--an-muted); font-size: .72rem; letter-spacing: .09em; }
.an-ref h3 { margin: .3rem 0 .4rem; font-size: .95rem; line-height: 1.8; }
.an-ref h3 a { text-decoration-color: rgba(160, 75, 48, .45); }
.an-ref p { color: var(--an-muted); font-size: .82rem; line-height: 1.85; }
.an-closing { padding: 44px 0 56px; background: var(--an-night); color: var(--an-night-muted); }
.an-closing-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px; align-items: end; }
.an-closing-title { margin-bottom: .6rem; color: #fbf6ec; font-family: var(--an-serif); font-size: 1.45rem; }
.an-closing p { font-size: .82rem; line-height: 1.9; }
.an-closing a { color: #fbf6ec; }

/* ===== RWD ===== */
@media (max-width: 1000px) {
  .an-details { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-intro-grid { grid-template-columns: 240px minmax(0, 1fr); }
  .an-toc ol { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .an-page .ae-traits { grid-template-columns: 1fr; }
  .an-related li { grid-template-columns: 80px minmax(0, 1fr) minmax(0, 1fr); gap: 24px; }
}
@media (max-width: 991px) {
  .an-page .ae-steps { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .an-page { font-size: 1rem; }
  .an-wrap { width: calc(100% - 32px); }
  .an-hero-grid, .an-intro-grid, .an-identity-grid, .an-two, .an-viewer-layout, .an-formal, .an-bio, .an-split, .an-videos, .an-reflection-grid, .an-sources { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .an-hero h1 { font-size: 3rem; }
  .an-hero h1 br { display: none; }
  .an-hero h1 em { display: block; }
  .an-frame { transform: rotate(.5deg); }
  .an-toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .an-dl { grid-template-columns: 88px minmax(0, 1fr); }
  .an-dl dt, .an-dl dd { font-size: .9rem; }
  .an-duck { padding: 22px; }
  .an-duck figure { width: 100px; }
  .an-detail-img { height: 160px; padding: 10px; }
  .an-detail-body { padding: 18px; }
  .an-detail-extra { grid-template-columns: 90px minmax(0, 1fr); gap: 16px; padding: 18px; }
  .an-map { max-width: 560px; margin: 0 auto; }
  .an-comp { max-width: 480px; margin: 0 auto; }
  .an-palette { gap: 7px; }
  .an-swatch { height: 42px; }
  .an-swatch-name { font-size: .78rem; }
  .an-swatch-note { font-size: .7rem; }
  .an-tension { gap: 14px; }
  .an-quote { padding: 22px 22px; }
  .an-music { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .an-disc { width: 124px; height: 124px; margin: 0 auto; }
  .an-bridge { grid-template-columns: 1fr; padding: 22px; }
  .an-bridge img { max-width: 260px; margin: 0 auto; }
  .an-related li { grid-template-columns: 64px minmax(0, 1fr); gap: 14px; }
  .an-related li > :last-child { grid-column: 2; }
  .an-related-year { font-size: 1.35rem; }
  .an-closing-grid { grid-template-columns: 1fr; }
  .an-open-original { padding: 18px; }
}
@media (max-width: 420px) {
  .an-details { grid-template-columns: 1fr; }
  .an-hero h1 { font-size: 2.6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .an-page *, .an-page *::before, .an-page *::after { transition: none !important; }
}

/* ===== 特異度修正：教材的 .ae-page 連結樣式與各區 p 字級，不蓋過本頁的小字與深色帶 ===== */
.an-page .an-refs a:not([class]) { color: var(--an-rust); font-weight: 400; text-decoration: none; }
.an-page :is(.an-hero, .an-viewer) .an-refs a:not([class]) { color: #e9875f; }
.an-page :is(.an-hero, .an-viewer, .an-closing) :is(p, li, span) > a:not([class]) { color: inherit; }
.an-page .an-toc a:not([class]) { color: var(--an-ink); font-weight: 500; text-decoration: none; }
.an-page .an-toc a:not([class]):hover { color: var(--an-rust); }
.an-page p.an-note { font-size: .85rem; color: var(--an-muted); }
.an-page .an-viewer p.an-note { color: var(--an-night-muted); }
.an-page p.an-detail-num { font-size: .82rem; line-height: 1.4; }
.an-page .an-entry p.an-entry-kicker { font-size: .82rem; line-height: 1.5; }
.an-page .an-entry p.an-entry-label { font-size: .78rem; line-height: 1.5; }
.an-page .ae-step p.an-minute { margin: .2rem 0 .2rem; font-size: .82rem; color: var(--an-rust); }
.an-page .ae-step:not(.is-active) { background: var(--an-white); }
.an-hero .an-btns + .an-source { margin-top: 1.2rem; }
@media (max-width: 760px) {
  .an-frame { transform: none; }
}