/**
 * Memory Curation — 前台輸出層 CSS（B-3 shortcode / B-4 block / E travelogue+related / S story）。
 * mc- prefix；保守、無全域 reset、不綁主題（範圍化於 .mc-* 容器；builder/theme 可再以 CSS 蓋）。
 *
 * 字體預設用系統 stack（sans）；可選襯線（Noto Serif TC via Google Fonts）由後台開關 +
 * output-serif.css 條件載入（α2；spec §v0.6 — 本檔不含任何 serif family/whitelist）。
 */

/* ---------- 設計基底（mc- 設計 token；範圍化於 .mc-* 根容器，不動 host html/body）----------
   色值 = claude.ai/design「Memory Curation Design System」foundations/colors 卡（暖中性 + 青藍點綴 +
   可讀深青）。青藍只點綴不當大面積底；小字要對比用 --mc-accent-ink。
   G1③：.memory-composition--article = AI 敘事文章根（[memory_composition]）— 同群共享 token。 ---------- */
.mc-events,
.mc-event,
.mc-related,
.mc-empty,
.mc-story,
.mc-timeline,
.memory-composition--article {
	--mc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--mc-fg: #1a1a1a; /* Ink 墨：近黑而非純黑。 */
	--mc-fg-light: #6b6b70; /* Ink Soft 次墨：日期/地點/分類等次要資訊。 */
	--mc-accent: #47d3e5; /* 唯一強調色：hover/焦點/細節；不放小字（對比不足）。 */
	--mc-accent-ink: #0f7c8c; /* 可讀深青：連結文字/小標籤要對比時用這支。 */
	--mc-border: #e6e6e2; /* Line 界線：暖，存在感低。 */
	--mc-bg-soft: #f7f7f5; /* Ground Soft 暖底：卡片/區塊軟底。 */
	--mc-ground: #ffffff; /* 自帶畫布底（story 滿版頁用；嵌入式版型維持透明坐 host 底）。 */
	--mc-shadow: 0 1px 2px rgba(20, 20, 22, 0.04), 0 8px 24px rgba(20, 20, 22, 0.05); /* 卡片柔影（colors 卡 .sw）。 */
	--mc-radius: 12px;
	font-family: var(--mc-font);
	color: var(--mc-fg);
	line-height: 1.65;
}

/* ---------- dark theme（雙信號；token 重定義、範圍化於 .mc-* 容器，不動 host html/body）----------
   1) 系統偏好（prefers-color-scheme）只翻 .mc-story：story 是 plugin 自帶畫布的滿版頁，
      底＋字一起翻、不依賴 host。嵌入式版型（cards/grid/related/empty/travelogue）坐 host 背景，
      不能單方跟系統翻字色（host 底不一定跟著翻 → 淺字白底破版），故不套。
   2) host 顯式 [data-theme="dark"]（stamp 於任意祖先，常見於 html）：host 已宣告深色 → 全版型跟隨。
   3) [data-theme="light"] 反向 override（全版型）：顯式 light 贏回 dark — 含系統 dark 下的 story、
      及外層 dark + 內層 light island（builder section 級主題切換）下的嵌入式版型。 ---------- */
@media (prefers-color-scheme: dark) {
	.mc-story {
		--mc-fg: #f1f1ef;
		--mc-fg-light: #9d9da4;
		--mc-accent-ink: #74e2f0; /* dark 上亮青轉亮，保持清晰。 */
		--mc-border: #2c2c31;
		--mc-bg-soft: #1c1c20;
		--mc-ground: #141416;
		--mc-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.4);
	}
}

[data-theme="dark"] .mc-events,
[data-theme="dark"] .mc-event,
[data-theme="dark"] .mc-related,
[data-theme="dark"] .mc-empty,
[data-theme="dark"] .mc-story,
[data-theme="dark"] .mc-timeline,
[data-theme="dark"] .memory-composition--article {
	--mc-fg: #f1f1ef;
	--mc-fg-light: #9d9da4;
	--mc-accent-ink: #74e2f0;
	--mc-border: #2c2c31;
	--mc-bg-soft: #1c1c20;
	--mc-ground: #141416;
	--mc-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 10px 30px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .mc-events,
[data-theme="light"] .mc-event,
[data-theme="light"] .mc-related,
[data-theme="light"] .mc-empty,
[data-theme="light"] .mc-story,
[data-theme="light"] .mc-timeline,
[data-theme="light"] .memory-composition--article {
	--mc-fg: #1a1a1a;
	--mc-fg-light: #6b6b70;
	--mc-accent-ink: #0f7c8c;
	--mc-border: #e6e6e2;
	--mc-bg-soft: #f7f7f5;
	--mc-ground: #ffffff;
	--mc-shadow: 0 1px 2px rgba(20, 20, 22, 0.04), 0 8px 24px rgba(20, 20, 22, 0.05);
}

/* 標題：細體（font-weight 300）；CJK 安全故不套負字距、body 不強制細體（可讀性）。 */
.mc-event__title,
.mc-related__title {
	font-weight: 300;
	color: var(--mc-fg);
}

/* α0.5（v0.5 C1）：標題多行平衡斷行 + 正字距（CJK 安全正值；不支援 text-wrap 自動忽略）。 */
.mc-event__title,
.mc-related__title,
.mc-story__heading,
.mc-story__title {
	text-wrap: balance;
	letter-spacing: 0.012em;
}

/* 連結：底線 → hover accent。 */
.mc-event a,
.mc-related a,
.mc-files a {
	color: var(--mc-fg);
	text-decoration: underline;
	transition: color 0.2s ease-in-out;
}

.mc-event a:hover,
.mc-related a:hover,
.mc-files a:hover {
	color: var(--mc-accent-ink); /* 可讀深青（colors 卡：亮青對比不足不放小字；dark 自動轉亮）。 */
	text-decoration: none;
}

/* B（L 拍板 323）：標題/圖連結 = 原生列表樣式（無底線、色繼承、hover 轉青）— 蓋上方通用
   底線連結；適用全部版型（cards/travelogue/grid/story/related/flipermag）。 */
.mc-event__title a,
.mc-related__title a,
.mc-story__title a {
	color: inherit;
	text-decoration: none;
}

.mc-event__title a:hover,
.mc-related__title a:hover,
.mc-story__title a:hover,
.mc-event__title a:focus-visible,
.mc-related__title a:focus-visible,
.mc-story__title a:focus-visible {
	color: var(--mc-accent-ink);
}

.mc-event__photo a,
.mc-related__photo a,
.mc-story__media a {
	display: block;
	height: 100%;
}

/* ---------- list（cards）---------- */
.mc-events {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	margin: 1.5rem 0;
	/* α0.4 type ramp base（v0.5 C1）：max() 兼顧 Bricks html=62.5%(10px) root 與使用者放大；
	   editorial 子項一律 em 相對此。grid/story 自訂 base（16px/18px）在檔案後方同特異度勝出、不受影響；
	   勿在 .mc-event 子項重複設 base（雙重縮放；R2-🟡3）。 */
	font-size: max(18px, 1.125rem);
}

.mc-event {
	padding: 1rem 1.25rem;
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius);
	background: var(--mc-bg-soft);
	box-shadow: var(--mc-shadow); /* 卡片柔影（colors 卡 .sw；cards/grid/detail 卡自動吃）。 */
}

/* cards 縮圖（β2 v0.5 C2）：卡內縮圖（3:2 裁切、媒體類統一圓角 10）；:not() 鎖 cards 容器 —
   travelogue/grid 容器同帶 .mc-events 但各有自己的 photo 樣式；story 項不在 .mc-events 內。 */
.mc-events:not(.mc-events--travelogue):not(.mc-events--grid) .mc-event__photo {
	margin: 0 0 0.9em;
	width: 100%; /* 顯式寬 → max-height 夾住時維持滿寬帶狀（aspect-ratio 只作用於 auto 維度）。 */
	aspect-ratio: 3 / 2;
	max-height: 420px; /* 寬版面帶狀上限（雜誌 list band；322 staging 截圖實證全寬 3:2 過度支配卡片）；窄欄 3:2 自然低於上限。 */
	overflow: hidden;
	border-radius: 10px;
}

.mc-events:not(.mc-events--travelogue):not(.mc-events--grid) .mc-event__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-event__title {
	margin: 0 0 0.4rem;
	font-size: 1.3em; /* α0.4：em 相對 .mc-events base 18px（≈23px）；travelogue/grid 各自 override。 */
	line-height: 1.3;
}

.mc-event__meta {
	margin: 0 0 0.6rem;
	font-size: 0.875em; /* Opus-F3：em 相對版型 base（root-safe；story kicker 自有 override）。 */
	color: var(--mc-fg-light);
}

/* 分類 chip 統一青染（typography 卡 tag / travelogue 卡 chip 語言；青底在深淺底皆可見、
   深青字 dark 自動轉亮 → 免 per-theme chip 底 token）。 */
.mc-event__cat {
	display: inline-block;
	padding: 0.1rem 0.55rem;
	border-radius: 999px;
	background: rgba(71, 211, 229, 0.16);
	color: var(--mc-accent-ink);
	font-weight: 600;
	/* 322 Codex re-verify：chip 巢在 .mc-event__meta（meta_line span）內 — em 會對 meta 複乘
	   （grid 11.2px / story 11.2px 回歸）；改獨立 root-safe floor（預設 root 恆 12.8px = 原值）。 */
	font-size: max(12.8px, 0.8rem);
}

.mc-event__summary {
	margin: 0;
	line-height: 1.8; /* α0.4 cards 18px/1.8（雜誌閱讀感）；travelogue/grid/detail 各自 override。 */
}

.mc-files {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin: 0.85rem 0 0;
	padding: 0;
	list-style: none;
}

.mc-files img {
	max-width: 180px;
	height: auto;
	border-radius: 10px; /* 媒體類統一 10（travelogue 卡 .ph 設計值）。 */
}

.mc-persons {
	margin: 0.85rem 0 0;
	padding-left: 1.2rem;
}

.mc-person__role {
	color: var(--mc-fg-light);
	font-size: 0.85rem;
}

.mc-empty {
	margin: 1rem 0;
	color: var(--mc-fg-light);
	font-style: italic;
}

/* ---------- detail 閱讀排版（α0.4 type ramp；v0.5 C1）— detail 是獨立 article（不在 .mc-events 內），
   自帶 base；標題鎖直接子（.mc-event--detail > .mc-event__title，非依賴 h1/h2）；summary 20-21px/1.9 +
   measure 40em（38-42em 範圍）。
   G1③-a：composition 文章共用本 detail selector group（單一視覺 SSoT — 改值 event/composition
   lockstep）；additive、不動既有 event selector 的 match set。 ---------- */
.mc-event--detail,
.memory-composition--article {
	font-size: max(20px, 1.25rem); /* detail 自訂 base：em 相對此（Bricks 10px root 安全）。 */
	/* 323 L UAT：v3 article = 白底開闊、無卡殼 — 歸零 .mc-event 基底的暖灰圓角卡（:124）。 */
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

/* detail 分類 = 青字非膠囊（v3 .cat；同 flipermag 歸零 chip）。 */
.mc-event--detail .mc-event__cat {
	display: inline;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--mc-accent-ink);
	font-weight: 600;
	font-size: inherit;
}

/* files/gallery/persons 對齊閱讀欄（v3 article 無平鋪清單 — 收進置中容器不破版面）。 */
.mc-event--detail .mc-files,
.mc-event--detail .mc-gallery,
.mc-event--detail .mc-persons {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

/* 323 L UAT 重修：detail 對齊 v3 article 置中閱讀版面 — hero 全寬 → head 元素（title/meta/
   byline）640px 置中容器（文字左對齊；v3 .article__head 40rem）→ 內文 592px（v3 .body 37rem）。
   px 定值避 em 基數混淆（detail base 20px ≠ 原型 root 16px）；files/gallery/persons 維持全寬。 */
.mc-event--detail > .mc-event__title,
.memory-composition--article > .memory-composition__title {
	max-width: 640px;
	margin: 1.6em auto 0.7em;
	font-size: clamp(1.64em, 1.2em + 2.2vw, 2.36em); /* v3 h1 clamp(2.05-2.95rem)。 */
	font-weight: 400;
	line-height: 1.34;
	letter-spacing: 0.015em;
}

.mc-event--detail .mc-event__meta {
	max-width: 640px;
	margin-left: auto;
	margin-right: auto;
}

.mc-event--detail .mc-event__summary,
.memory-composition--article .memory-composition__body {
	font-size: 0.95em; /* v3 .body p 1.16rem ≈ 18.6px（相對 detail base 20px）。 */
	line-height: 1.95;
	letter-spacing: 0.01em;
	max-width: 592px; /* v3 .body 37rem 閱讀欄。 */
	margin-left: auto;
	margin-right: auto;
	text-align: justify; /* FLiPER 內文兩端對齊。 */
}

/* G1③-a：composition body = wpautop 多 <p>（event summary = nl2br 單塊、無此需求）→
   additive 段距規則（spec §2a body 段距 nuance）。 */
.memory-composition--article .memory-composition__body p {
	margin: 0 0 1em;
}

/* F2 hero（323 L UAT 二修 — flipermag 雜誌式 cover：圖上疊標題/meta）：全寬 16:9 大圖、
   底部漸層遮罩、分類/標題/meta 白字疊圖上；圖下小字圖說。無圖事件 → 無 figure、title/meta
   原位在最上（退化不破版）。
   G1③-b：composition hero 共用本 cover selector group（同一視覺 SSoT — 改值 event/composition
   lockstep）；additive、不動既有 event selector 的 match set。 */
.mc-event--detail .mc-event__hero,
.memory-composition--article .memory-composition__hero {
	margin: 0 0 1.1em;
	position: relative; /* overlay 定位錨。 */
}

.mc-event--detail .mc-event__hero img,
.memory-composition--article .memory-composition__hero img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: 14px; /* v3 .article__hero .ph。 */
	border: 1px solid var(--mc-border);
}

/* cover 疊字層（323 三修 — 逐項對齊 flipermag.com 文章頁）：均勻暗遮罩 + 細白內框 +
   置中白字標題 + 圓頭像口述者（置中直排）。 */
.mc-event--detail .mc-event__hero-content,
.memory-composition--article .memory-composition__hero-content {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1em;
	text-align: center;
	padding: clamp(1.6em, 6cqw, 3em);
	border-radius: 14px;
	/* Codex UAT2-🔴 fold2：均勻 .62（Codex 值）— 全白圖最壞情況白字對比 ≈5.1:1（WCAG AA 含裕度）、
	   文字盒任意位置恆達標（radial 變體被駁回：無平台 stop 時 .58 只在幾何中心單點、
	   最寬字元處插值到 ~.46 → 3.1:1 不合格）。 */
	background: rgba(16, 16, 18, 0.62);
}

/* 細白內框（FLiPER cover 飾線）。 */
.mc-event--detail .mc-event__hero-content::before,
.memory-composition--article .memory-composition__hero-content::before {
	content: "";
	position: absolute;
	inset: 14px;
	border: 1px solid rgba(255, 255, 255, 0.55);
	border-radius: 8px;
	pointer-events: none;
}

.mc-event--detail .mc-event__cover-title,
.memory-composition--article .memory-composition__cover-title {
	margin: 0;
	max-width: 82%;
	display: -webkit-box;
	-webkit-line-clamp: 3; /* UAT2-🟡：長標題限 3 行防穿出 16:9 cover（完整標題在圖下 h2）。 */
	-webkit-box-orient: vertical;
	overflow: hidden;
	color: #ffffff;
	font-size: clamp(1em, 0.8em + 1.4vw, 1.45em); /* FLiPER 圖上題 ~20-24px（非大標）。 */
	font-weight: 400;
	line-height: 1.55;
	letter-spacing: 0.02em;
	text-wrap: balance;
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.35);
}

.mc-event--detail .mc-event__cover-byline,
.memory-composition--article .memory-composition__cover-byline {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45em;
}

.mc-event--detail .mc-event__cover-byline .mc-event__ava,
.memory-composition--article .memory-composition__cover-byline .memory-composition__ava {
	width: 2.2em;
	height: 2.2em;
	border-radius: 50%;
	background: linear-gradient(135deg, #e9ded2, #d6e6e6);
	border: 1px solid rgba(255, 255, 255, 0.75);
}

.mc-event--detail .mc-event__cover-byline-name,
.memory-composition--article .memory-composition__cover-byline-name {
	color: #ffffff; /* UAT2-🔴：全白（.92 在 .58 遮罩僅 ~3.9:1；全白 ≥4.6）。 */
	font-size: 0.7em;
	letter-spacing: 0.05em;
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.4);
}

/* 圖下：meta 行（分類青字已歸零 chip）＋大標題（FLiPER 雙標題式：左對齊襯線大字、
   在 640px 閱讀容器）。 */
.mc-event--detail .mc-event__title--article {
	max-width: 640px;
	margin: 0.5em auto 0.8em;
	font-size: clamp(1.3em, 1em + 1.6vw, 1.7em); /* FLiPER 大標 ~28-34px。 */
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.015em;
	text-align: left;
}

/* 手機（≤640px）：cover 疊字縮級（FLiPER 手機同構、字小）＋整篇左右呼吸邊距
   （L UAT：手機內容貼螢幕邊沒質感；FLiPER 手機文字/圖皆有邊距、圓角保留）。 */
@media (max-width: 640px) {
	.mc-event--detail,
	.memory-composition--article {
		padding: 0 1.05em;
	}

	.mc-event--detail .mc-event__hero-content,
	.memory-composition--article .memory-composition__hero-content {
		padding: 1em;
		gap: 0.6em;
	}

	.mc-event--detail .mc-event__hero-content::before,
	.memory-composition--article .memory-composition__hero-content::before {
		inset: 8px;
	}

	.mc-event--detail .mc-event__cover-title,
	.memory-composition--article .memory-composition__cover-title {
		font-size: 0.8em;
		max-width: 92%;
		-webkit-line-clamp: 2; /* 手機小圖限 2 行。 */
	}

	.mc-event--detail .mc-event__cover-byline .mc-event__ava,
	.memory-composition--article .memory-composition__cover-byline .memory-composition__ava {
		width: 1.6em;
		height: 1.6em;
	}

	.mc-event--detail .mc-event__cover-byline-name,
	.memory-composition--article .memory-composition__cover-byline-name {
		font-size: 0.6em;
	}
}

.mc-event--detail .mc-event__hero-caption {
	margin: 0.5em 0.2em 0;
	font-size: 0.8em;
	color: var(--mc-fg-light);
}

/* F3 byline（v3 .byline 逐值：640px 置中 + 上下 1px 線框 + 圓頭像；頭像 = 純 CSS 佔位、
   aria-hidden）。G1③-a：composition 無 hero 圖下版 byline 共用同 group。 */
.mc-event--detail .mc-event__byline,
.memory-composition--article .memory-composition__byline {
	display: flex;
	align-items: center;
	gap: 0.8em;
	max-width: 640px;
	margin: 1.2em auto 1.4em;
	padding: 0.9em 0;
	border-top: 1px solid var(--mc-border);
	border-bottom: 1px solid var(--mc-border);
}

.mc-event--detail .mc-event__ava,
.memory-composition--article .memory-composition__ava {
	flex: none;
	width: 2.1em; /* ≈ v3 2.6rem（相對 detail base 20px）。 */
	height: 2.1em;
	border-radius: 50%;
	background: linear-gradient(135deg, #e9ded2, #d6e6e6); /* v3 --media-1/-2 佔位漸層。 */
	border: 1px solid var(--mc-border);
}

.mc-event--detail .mc-event__byline-text,
.memory-composition--article .memory-composition__byline-text {
	font-size: 0.8em; /* v3 .byline .bl .9rem。 */
	line-height: 1.45;
	color: var(--mc-fg);
}

/* ---------- travelogue（E-1；layout="travelogue"）— 每條帶 .mc-events--travelogue 祖先，cards 零波及。
   精緻層（travelogue 卡）：gap 3rem 呼吸感 + 圖說 caption（斜體次墨）+ 分類 chip 青染 + 內文 Body 18px。 ---------- */
.mc-events--travelogue {
	gap: 3rem;
	container-type: inline-size; /* α1 featured：依容器寬（非 viewport）切兩欄（builder 窄欄安全；R2-🟢1）。 */
}

.mc-events--travelogue .mc-event {
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none; /* 裸段落（非卡片）— 柔影不適用。 */
}

.mc-events--travelogue .mc-event__photo {
	margin: 0 0 1rem;
}

.mc-events--travelogue .mc-event__photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 10px;
}

/* 圖說（photo title 非空才渲染；travelogue 卡 .cap 樣）。text-align 明確宣告防 host figcaption 置中滲入。 */
.mc-events--travelogue .mc-event__caption {
	margin: 0.55rem 0.1rem 0;
	font-size: 0.85em; /* Opus-F3：em（root-safe）。 */
	color: var(--mc-fg-light);
	font-style: italic;
	line-height: 1.5;
	text-align: left;
}

.mc-events--travelogue .mc-event__title {
	font-size: 1.6em; /* α0.4：em 相對 .mc-events base 18px（≈29px；rem 在 Bricks 10px root 會縮小）。 */
}

.mc-events--travelogue .mc-event__summary {
	font-size: 1.05em; /* α0.4 travelogue ~19px（18-20px 範圍；em 取代 rem — Bricks root 安全）。 */
	line-height: 1.9;
}

/* ---------- α1 featured（v0.5 C1）— travelogue 首項有「直接子」主圖 → 容器寬 ≥640px 時圖文兩欄
   （雜誌 feature 版）。依容器寬非 viewport（builder 窄欄安全）；:has()/@container 不支援 → 整組
   規則被忽略 → 維持現行直排（安全漸進增強；renderer 零改）。兩欄皆 minmax(0,…) 防長字撐爆。 ---------- */
@container (min-width: 640px) {
	.mc-events--travelogue > .mc-event--travelogue:first-child:has(> .mc-event__photo) {
		display: grid;
		grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
		grid-template-rows: auto auto 1fr;
		grid-template-areas:
			"photo title"
			"photo meta"
			"photo summary";
		column-gap: 2.5em;
	}

	.mc-events--travelogue > .mc-event--travelogue:first-child:has(> .mc-event__photo) > .mc-event__photo {
		grid-area: photo;
		margin: 0; /* 直排的圖下距在兩欄不適用。 */
	}

	.mc-events--travelogue > .mc-event--travelogue:first-child:has(> .mc-event__photo) > .mc-event__title {
		grid-area: title;
	}

	.mc-events--travelogue > .mc-event--travelogue:first-child:has(> .mc-event__photo) > .mc-event__meta {
		grid-area: meta;
	}

	.mc-events--travelogue > .mc-event--travelogue:first-child:has(> .mc-event__photo) > .mc-event__summary {
		grid-area: summary;
	}
}

/* ---------- grid（G-1；layout="grid"）— 事件格狀：縮圖卡片響應式格線。
   每條帶 .mc-events--grid 祖先 → cards/travelogue/story 零波及。
   自訂 base font-size(16px) + em/px 單位 → 不吃主題 root 縮放（同 .mc-story 手法；rem 在
   html=62.5%(10px) 主題會把 16rem 欄寬縮成 160px → 桌機爆 6 窄欄、手機 2 欄，staging Bricks 實測）。 ---------- */
.mc-events--grid {
	display: grid;
	font-size: 16px; /* grid 自訂 base：以下 em 相對此，欄寬/字級不被主題 root 縮小。 */
	/* 自動填格：窄螢幕自然單欄、寬螢幕多欄，無需 @media 斷點（16em=256px 欄寬下限）。 */
	grid-template-columns: repeat(auto-fill, minmax(16em, 1fr));
	gap: 1.5em;
	margin: 1.5em 0;
}

/* grid 卡：沿用 .mc-event 基底（邊框/圓角/底色/token），縮圖切齊上緣、內文內縮。 */
.mc-events--grid .mc-event {
	display: flex;
	flex-direction: column;
	padding: 0;
	overflow: hidden; /* 讓縮圖圓角吃齊卡片邊。 */
}

.mc-events--grid .mc-event__photo {
	margin: 0;
	aspect-ratio: 3 / 2; /* 一致縮圖比例 → 格線整齊、不破版。 */
	overflow: hidden;
}

.mc-events--grid .mc-event__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* 裁切填滿、不變形。 */
}

/* 內文內縮（因卡 padding 歸零讓圖切齊）；無圖事件 → 無 figure、卡仍顯示 title/meta/summary（退化不破版）。 */
.mc-events--grid .mc-event__title {
	margin: 0.9em 0 0.4em;
	padding: 0 1em;
	font-size: 1.15em;
}

.mc-events--grid .mc-event__meta {
	padding: 0 1.1em;
}

.mc-events--grid .mc-event__summary {
	padding: 0 1.1em 1.1em;
	font-size: 1em; /* α0.4 grid snippet 16px（16-17px 範圍；相對 grid base 16px）。 */
	line-height: 1.7; /* α0.4 grid 1.65-1.75（蓋 shared 1.8 — 卡片 snippet 較緊）。 */
}

/* ---------- flipermag（F1/F4；layout="flipermag"）— v3 band 首頁版型（323 L UAT 重修：
   照 mc-preview-v3 逐值對齊 — **白底開闊、卡片無殼**，非暖底大盒）。
   骨架：band = 透明底 + 下邊線；rail = 青藍小字標題 +「看全部→」；feature = 圖文並排
   （桌機 1.35fr/1fr、圖填高）；grid 卡 = 無殼（圖圓角+標題+meta 直接排、hover 浮起）。
   selector 全限 .mc-flipermag（v3 spec §9-#5 隔離）→ 四種既有版型零波及；
   自訂 base font-size(16px) + em（G-1 教訓：禁 rem）；dark = defer（spec §10-#5）。
   grid 段容器 = 雙 class（.mc-flipermag__grid.mc-events--grid）復用格線、卡殼在此歸零。 ---------- */
.mc-flipermag {
	--mc-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
		"Noto Sans TC", "PingFang TC", "Microsoft JhengHei", sans-serif;
	--mc-fg: #1a1a1a;
	--mc-fg-light: #6b6b70;
	--mc-fg-faint: #9b9ba1;
	--mc-accent: #47d3e5;
	--mc-accent-ink: #0f7c8c;
	--mc-border: #e6e6e2;
	--mc-bg-soft: #f7f7f5;
	--mc-ground: #ffffff;
	--mc-shadow: 0 1px 2px rgba(20, 20, 22, 0.04), 0 8px 24px rgba(20, 20, 22, 0.05);
	--mc-shadow-lift: 0 2px 6px rgba(20, 20, 22, 0.06), 0 20px 50px rgba(20, 20, 22, 0.1);
	container-type: inline-size; /* feature 兩欄斷點看自身寬（同 travelogue α1 手法）。 */
	font-family: var(--mc-font);
	color: var(--mc-fg);
	line-height: 1.65;
	font-size: 16px; /* 自訂 base：以下 em 相對此（抗主題 root 縮放）。 */
	/* v3 .band：白底開闊、無框無圓角 — 只有下邊線收區段（band__in 垂直節奏 ~2.2-4rem）。 */
	background: transparent;
	border-bottom: 1px solid var(--mc-border);
	padding: 2.4em 0 3em;
	margin: 0 0 1.5em;
}

/* rail：左「青藍小字大字距」標題 + 右「看全部→」（v3 .rail 逐值）。 */
/* 手機：band 內容左右呼吸邊距（主題容器手機 padding 可能歸零 → 內容貼邊沒質感）。 */
@media (max-width: 640px) {
	.mc-flipermag {
		padding: 1.8em 1.05em 2.2em;
	}
}

.mc-flipermag__rail {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1em;
	margin: 0 0 1.6em;
}

.mc-flipermag__heading {
	margin: 0;
	font-size: 0.8em;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--mc-accent-ink);
	font-weight: 700;
	font-family: var(--mc-font); /* rail 標題恆 sans（v3 .u-sans；serif on 也不套）。 */
}

.mc-flipermag__more {
	font-size: 0.85em;
	color: var(--mc-fg-light);
	text-decoration: none;
	white-space: nowrap;
}

.mc-flipermag__more:hover,
.mc-flipermag__more:focus-visible {
	color: var(--mc-accent-ink);
}

/* feature 首篇（v3 .feature 逐值）：預設直排；容器夠寬 + 有圖 → 1.35fr/1fr 圖文並排、
   圖 stretch 填高（@container + :has() 雙漸進；不支援 → 恆直排安全退化）。 */
.mc-flipermag__feature {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.4em;
	margin: 0 0 2.6em;
}

.mc-flipermag__feature .mc-event__photo {
	margin: 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 14px; /* v3 .feature .ph。 */
	border: 1px solid var(--mc-border);
}

.mc-flipermag__feature .mc-event__photo a {
	display: block;
	height: 100%;
}

.mc-flipermag__feature .mc-event__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-flipermag__fx {
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center; /* v3 .fx：文字垂直居中。 */
}

.mc-flipermag__kick {
	margin: 0 0 0.7em;
	font-size: 0.74em;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--mc-accent-ink);
	font-weight: 700;
	font-family: var(--mc-font); /* kick 恆 sans。 */
}

.mc-flipermag__feature .mc-event__title {
	margin: 0 0 0.5em;
	font-size: clamp(1.75em, 1.1em + 3.2cqw, 2.5em); /* v3 clamp(1.75-2.5rem)。 */
	font-weight: 400;
	line-height: 1.28;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.mc-flipermag__feature .mc-event__summary {
	margin: 0 0 1em;
	font-size: 1.05em;
	line-height: 1.75;
	color: var(--mc-fg-light); /* v3 .ex 次墨。 */
	max-width: 46ch;
}

@container (min-width: 820px) {
	.mc-flipermag__feature:has(> .mc-event__photo) {
		grid-template-columns: 1.35fr 1fr; /* v3 桌機欄比。 */
		align-items: stretch;
		gap: 2.6em;
	}
	.mc-flipermag__feature:has(> .mc-event__photo) .mc-event__photo {
		aspect-ratio: auto; /* stretch 填高（v3：min-height 23rem）。 */
		min-height: 23em;
	}
}

/* meta（feature + grid 卡共通；v3 .meta/.cat）：小字次墨；分類 = 青字**非膠囊** — 歸零
   全域 chip（bg/padding/radius）。 */
.mc-flipermag .mc-event__meta {
	font-size: 0.86em;
	color: var(--mc-fg-light);
}

.mc-flipermag .mc-event__cat {
	display: inline;
	padding: 0;
	border-radius: 0;
	background: none;
	color: var(--mc-accent-ink);
	font-weight: 600;
	font-size: inherit; /* 蓋全域 chip 的 root-safe floor（此處同 meta 尺寸）。 */
}

/* grid 段（雙 class 已吃 .mc-events--grid 格線）：卡殼歸零 = v3 無殼卡（圖圓角 + 標題 +
   meta 直接排在頁面上；hover 圖浮起 + 標題轉青）。summary 不顯示（v3 卡 = 圖+題+meta）。 */
.mc-flipermag .mc-events--grid {
	margin: 0;
	grid-template-columns: repeat(auto-fill, minmax(15.5em, 1fr)); /* v3 15.5rem 欄寬。 */
	gap: 1.9em 1.5em;
}

.mc-flipermag .mc-events--grid .mc-event {
	background: transparent;
	border: none;
	box-shadow: none;
	padding: 0;
	overflow: visible;
	border-radius: 0;
}

.mc-flipermag .mc-events--grid .mc-event__photo {
	aspect-ratio: 16 / 10; /* v3 card 比例。 */
	border-radius: 11px;
	border: 1px solid var(--mc-border);
	margin: 0 0 0.85em;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.mc-flipermag .mc-events--grid .mc-event:hover .mc-event__photo {
	transform: translateY(-3px);
	box-shadow: var(--mc-shadow-lift);
}

.mc-flipermag .mc-events--grid .mc-event__photo a {
	display: block;
	height: 100%;
}

.mc-flipermag .mc-events--grid .mc-event__title {
	margin: 0 0 0.45em;
	padding: 0;
	font-size: 1.24em; /* v3 .card h4。 */
	font-weight: 400;
	line-height: 1.45;
	letter-spacing: 0.01em;
	text-wrap: balance;
}

.mc-flipermag .mc-events--grid .mc-event:hover .mc-event__title {
	color: var(--mc-accent-ink);
}

.mc-flipermag .mc-events--grid .mc-event__meta {
	padding: 0;
	font-size: 0.8em;
}

.mc-flipermag .mc-events--grid .mc-event__summary {
	display: none; /* v3 卡無摘要（圖+題+meta）；資料仍在 markup、他版型不受影響。 */
	padding: 0;
	font-size: 0.9em;
	line-height: 1.7;
	color: var(--mc-fg-light);
}

/* 無圖卡例外（:has() 漸進）：v3 每卡都有圖佔位 — 無圖卡若同時無摘要會近乎空白、格線失衡；
   顯示摘要作內容填充（有圖卡維持 v3 圖+題+meta）。不支援 :has() → 摘要全隱（仍不破版）。 */
.mc-flipermag .mc-events--grid .mc-event:not(:has(.mc-event__photo)) .mc-event__summary {
	display: block;
}

/* 卡片/標題連結（B：全卡可點）：無底線、色繼承（蓋全域 .mc-event a 底線）；hover 轉青。 */
.mc-flipermag .mc-event__title a {
	color: inherit;
	text-decoration: none;
}

.mc-flipermag .mc-event__title a:hover,
.mc-flipermag .mc-event__title a:focus-visible {
	color: var(--mc-accent-ink);
}


/* ---------- gallery（G-2；detail show="…,gallery"）— 詳情頁照片牆：正方縮圖密鋪格線。
   範圍化於 .mc-gallery（與 .mc-files 分離）→ 既有 files/detail 零波及。
   自訂 base font-size(16px) + em、禁 rem（G-1 教訓：Bricks html=62.5% 會縮 rem 尺寸）。 ---------- */
.mc-gallery {
	display: grid;
	font-size: 16px; /* gallery 自訂 base：em 相對此，格寬不被主題 root 縮小。 */
	grid-template-columns: repeat(auto-fill, minmax(10em, 1fr));
	gap: 0.5em;
	margin: 1.25em 0;
	padding: 0;
	list-style: none;
}

.mc-gallery__item {
	margin: 0;
	aspect-ratio: 1 / 1; /* 正方縮圖 → 照片牆整齊密鋪。 */
	overflow: hidden;
	border-radius: var(--mc-radius);
}

.mc-gallery__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover; /* 裁切填滿、不變形。 */
}

/* ---------- H-1 1a：gallery hover + 自寫 lightbox（漸進增強：JS 掛上 --enhanced 才有 hover/pointer；
   無 JS = 純展示牆。reduced-motion 停用 transform。） ---------- */
.mc-gallery--enhanced .mc-gallery__item img {
	cursor: pointer;
	transition: transform 0.3s ease, filter 0.3s ease;
}

.mc-gallery--enhanced .mc-gallery__item img:hover,
.mc-gallery--enhanced .mc-gallery__item img:focus-visible {
	transform: scale(1.04);
	filter: brightness(1.08);
}

@media (prefers-reduced-motion: reduce) {
	.mc-gallery--enhanced .mc-gallery__item img,
	.mc-gallery--enhanced .mc-gallery__item img:hover,
	.mc-gallery--enhanced .mc-gallery__item img:focus-visible {
		transition: none;
		transform: none;
	}
}

/* lightbox（自寫 bounded dialog；base 16px + em、禁 rem）。JS 動態建構、[hidden] 關閉。 */
.mc-lightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.88);
	font-size: 16px;
}

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

.mc-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6em;
}

.mc-lightbox__img {
	display: block;
	max-width: 92vw;
	max-height: 80vh;
	border-radius: 10px; /* 媒體類統一 10。 */
}

.mc-lightbox__caption {
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95em;
	text-align: center;
	max-width: 92vw;
}

.mc-lightbox__close,
.mc-lightbox__prev,
.mc-lightbox__next {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75em;
	height: 2.75em;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	color: #fff;
	font-size: 1.25em;
	line-height: 1;
	cursor: pointer;
}

.mc-lightbox__close:hover,
.mc-lightbox__prev:hover,
.mc-lightbox__next:hover {
	background: rgba(255, 255, 255, 0.28);
}

.mc-lightbox__close {
	top: 0.75em;
	right: 0.75em;
}

.mc-lightbox__prev {
	left: 0.6em;
	top: 50%;
	transform: translateY(-50%);
}

.mc-lightbox__next {
	right: 0.6em;
	top: 50%;
	transform: translateY(-50%);
}

/* lightbox 開啟時鎖頁面捲動（JS 掛在 <html>）。 */
.mc-lightbox-open {
	overflow: hidden;
}

/* ---------- 相關推薦（E-2；detail show="…,related"）— 範圍化於 .mc-related，detail/cards 零波及。 ---------- */
.mc-related {
	margin: 2rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--mc-border);
	/* 322 Opus-F3：自訂 base + 子項 em（同 grid/story 手法）— 否則 Bricks 10px root 下
	   rem 文字縮到 8-10px、與 84px 縮圖嚴重失衡。 */
	font-size: max(16px, 1rem);
}

/* Label 級（typography 卡：12px/600/大寫感/字距 .16em/深青）—「你可能也想看」即設計卡 Label 範例。 */
.mc-related__heading {
	margin: 0 0 0.75rem;
	font-size: 0.75em; /* Opus-F3：em 相對 .mc-related base（root-safe）。 */
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	color: var(--mc-accent-ink);
}

.mc-related__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mc-related__item {
	padding: 0.6rem 0.85rem;
	border: 1px solid var(--mc-border);
	border-radius: var(--mc-radius); /* 卡片類統一 12（colors 卡 .sw 語言）。 */
}

/* β3 related 圖卡（v0.5 C3）：有縮圖的卡切 圖左文右（:has() 不支援 → 縮圖上文下退化、不破版）；
   無縮圖卡維持純文字（零波及）。縮圖尺寸用 px（root 無關的固定視覺尺寸；文字已由上方
   .mc-related 自訂 base + em 撐住 — Opus-F3）。 */
.mc-related__item:has(> .mc-related__photo) {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-rows: auto auto;
	grid-template-areas:
		"photo title"
		"photo meta";
	align-content: center;
	column-gap: 14px;
}

.mc-related__photo {
	grid-area: photo;
	margin: 0;
	width: 84px;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	border-radius: 10px; /* 媒體類統一 10。 */
}

.mc-related__photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.mc-related__item:has(> .mc-related__photo) .mc-related__title {
	grid-area: title;
	align-self: end;
}

.mc-related__item:has(> .mc-related__photo) .mc-related__meta {
	grid-area: meta;
	align-self: start;
	margin: 0.15rem 0 0;
}

.mc-related__title {
	margin: 0;
	font-size: 1em; /* Opus-F3：em（root-safe）。 */
}

.mc-related__meta {
	margin: 0.2rem 0 0;
	font-size: 0.85em; /* Opus-F3：em（root-safe）。 */
	color: var(--mc-fg-light);
}

/* ---------- 按鈕（components/buttons 卡）— Phase 1 只落地用到的 primary（story banner CTA）。
   青藍實心＋深青字（對比足）；點擊區 ≥ 44px（2.75rem，長輩好按）；focus 青藍外框、active 微下沉。
   var() 帶 fallback：.mc-btn 可孤立於 token 容器外仍成立。 ---------- */
.mc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.6rem 1.5rem;
	border: 1px solid transparent;
	border-radius: 6px;
	font-weight: 600;
	font-size: 1rem;
	letter-spacing: 0.02em;
	text-decoration: none;
	cursor: pointer;
	transition: filter 0.2s, transform 0.05s;
}

/* anchor state 全鎖（host 主題 a:visited/a:hover (0,1,1) 會壓過單 class (0,1,0) — 展開
   state selector 升 (0,2,0) 封死主題 visited 變色 / hover 底線滲入）。 */
.mc-btn:hover,
.mc-btn:focus-visible,
.mc-btn:visited {
	text-decoration: none;
}

.mc-btn:active {
	transform: translateY(1px);
}

.mc-btn:focus-visible {
	outline: 2px solid var(--mc-accent, #47d3e5);
	outline-offset: 2px;
}

.mc-btn--primary,
.mc-btn--primary:visited {
	background: var(--mc-accent, #47d3e5);
	color: #06323a; /* on-accent 深青（light/dark 同值；亮青底上對比足）。 */
}

.mc-btn--primary:hover,
.mc-btn--primary:focus-visible {
	color: #06323a; /* 蓋 host 主題 a:hover 變色。 */
}

.mc-btn--primary:hover {
	filter: brightness(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.mc-btn,
	.mc-btn:active {
		transition: none;
		transform: none;
	}
}

/* ---------- 故事頁（layout="story"）— light 編輯式排版：大圖（圖 40%）+ 文字（文 60%，文字為主），
   左右交錯；清爽白底、細體大標題、accent 點綴。全範圍化於 .mc-story，cards/travelogue/detail/related
   零波及。**自訂 base font-size(18px) + em → 不吃主題 root 縮放**（某些主題把 html 設 62.5%=10px 會把
   rem 全縮小）；CJK 安全故不套負字距。桌機 圖40/文60 + 每段 100vh + nth-child(even) 交錯。 ---------- */
.mc-story {
	margin: 0; /* 滿版範本 edge-to-edge。 */
	background: var(--mc-ground); /* 自帶畫布 → dark theme 底＋字一起翻。 */
	color: var(--mc-fg);
	font-size: 18px; /* 故事頁自訂 base：em 相對此、字級不被主題 10px root 縮小（實測 Bricks root=10px）。 */
	line-height: 1.65;
}

/* 開場 banner：清爽 light intro（無 banner 圖 → 置中大標題 + accent 線）。 */
.mc-story__banner {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 55vh;
	padding: 5em 1.5em;
	text-align: center;
}

.mc-story__heading {
	margin: 0;
	font-size: clamp(2.25em, 5vw, 3.25em); /* ~40–58px 細體大標題（em 相對 18px base）。 */
	font-weight: 300;
	line-height: 1.15;
	color: var(--mc-fg); /* CJK 安全：不套負字距。 */
}

.mc-story__heading::after {
	content: "";
	display: block;
	width: 3.5em;
	height: 2px;
	margin: 0.9em auto 0;
	background: var(--mc-accent);
}

.mc-story__intro {
	margin: 1em auto 0;
	max-width: 34em;
	font-size: 1.2em; /* ~21.6px。 */
	font-weight: 300;
	line-height: 1.5;
	color: var(--mc-fg-light);
}

/* ---------- H-1 1b：滿版 50/50 banner 變體（有首圖時；文字＋cover 大圖）。
   mobile-first：圖上文下 hero；桌機 文字左 50 / 圖右 50 滿版高。無圖仍走上方置中純文字 banner。 ---------- */
.mc-story__banner--split {
	flex-direction: column;
	min-height: auto;
	padding: 0;
	text-align: left;
	align-items: stretch;
}

.mc-story__banner-content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 2em 1.25em 2.75em;
}

.mc-story__banner--split .mc-story__heading::after {
	margin-left: 0; /* 靠左變體：accent 線不置中。 */
}

.mc-story__banner--split .mc-story__intro {
	margin-left: 0;
}

/* banner CTA（story 卡：intro 後 1.6em；--split 靠左防 stretch 滿寬；置中 banner 由容器置中）。 */
.mc-story__banner .mc-btn {
	margin-top: 1.6em;
}

.mc-story__banner--split .mc-btn {
	align-self: flex-start;
}

.mc-story__banner-media {
	order: -1; /* mobile：圖在上。 */
	margin: 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
}

.mc-story__banner-media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 768px) {
	.mc-story__banner--split {
		flex-direction: row;
		min-height: 100vh;
	}

	.mc-story__banner-content {
		flex: 0 0 50%;
		padding: 3em 3.5em;
	}

	.mc-story__banner-media {
		order: 1; /* 桌機：content(0) 左、圖右。 */
		flex: 0 0 50%;
		aspect-ratio: auto;
	}
}

/* banner onload 進場（CSS-only ≤0.6s；不長時間隱藏內容；reduced-motion 無動畫）。 */
@media (prefers-reduced-motion: no-preference) {
	.mc-story__banner-content {
		animation: mc-banner-content-in 0.6s ease-out both;
	}

	.mc-story__banner-media img {
		animation: mc-banner-media-in 0.6s ease-out both;
	}
}

@keyframes mc-banner-content-in {
	from {
		opacity: 0;
		transform: translateX(-0.75em);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@keyframes mc-banner-media-in {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.mc-story__items {
	display: flex;
	flex-direction: column;
}

/* 每段 spotlight：mobile 圖上文下；桌機 圖 40% / 文 60%（文字為主，見下 @media）。每段滿一畫面高。 */
.mc-story__panel {
	display: flex;
	flex-direction: column;
	min-height: 100vh; /* 每段滿一個畫面 → 下一段在 fold 下、往下捲才淡入。 */
	min-height: 100svh; /* 行動裝置用 small viewport（扣掉網址列）。 */
	background: var(--mc-ground);
}

/* 大圖：占滿其半、cover 裁切。 */
.mc-story__media {
	margin: 0;
	width: 100%;
	max-width: none;
	aspect-ratio: auto;
	flex: 1 1 auto; /* mobile：圖吃掉文字外的剩餘高度。 */
	min-height: 40vh;
	overflow: hidden;
}

.mc-story__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}

/* 文字半：垂直置中、左對齊、細體大標題、緊湊層次（tight text block）。 */
.mc-story__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	width: 100%;
	max-width: none;
	padding: 2.5em 2em;
	text-align: left;
}

.mc-story__title {
	margin: 0;
	font-size: clamp(1.75em, 3.5vw, 2.25em); /* ~31–40px 細體標題。 */
	font-weight: 300;
	line-height: 1.25;
	color: var(--mc-fg);
}

.mc-story__summary {
	margin: 0.55em 0 0; /* 緊接 meta（tight）。 */
	font-size: 1.05em; /* ~19px。 */
	font-weight: 300;
	line-height: 1.8; /* α0.4 story summary ~19px/1.8。 */
	color: var(--mc-fg); /* Body=Ink（typography 卡；長輩可讀）；weight 300 保輕盈。 */
	max-width: 32em;
}

/* meta 行（沿用 cards .mc-event__meta / .mc-event__cat）→ kicker 級（story 卡：深青/600/.16em；
   dark 自動轉亮青）；vivid 白字 override (0,3,0) 不受影響。 */
.mc-story .mc-event__meta {
	margin: 0.4em 0 0;
	color: var(--mc-accent-ink);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 0.78em;
}

/* chip 青染/深青字繼承 base .mc-event__cat（.16 統一）；此處只解除 story meta kicker 的 uppercase/字距。 */
.mc-story .mc-event__cat {
	text-transform: none;
	letter-spacing: 0;
}

/* 桌機：圖 42% / 文 58%（story 卡 spotlight 比例）+ 偶數段交錯。 */
@media (min-width: 768px) {
	.mc-story__panel {
		flex-direction: row;
		align-items: stretch; /* 兩半撐滿整段高（圖 cover 滿高、文字垂直置中）。 */
	}

	.mc-story__media {
		width: 42%;
		flex: 0 0 42%;
		min-height: auto;
	}

	.mc-story__content {
		width: 58%;
		flex: 0 0 58%;
		padding: 4em clamp(3em, 6vw, 6em);
	}

	.mc-story__items > .mc-story__panel:nth-child(even) {
		flex-direction: row-reverse; /* 交錯：圖右文左。 */
	}
}

/* 捲動淡入（progressive enhancement）：JS 確認 IntersectionObserver 後才加 .mc-story--enhanced；
   無 JS / 不支援 / setup 失敗 → 不加 class → panel 維持恆顯示（永不停在隱藏態）。 */
.mc-story--enhanced .mc-story__panel {
	opacity: 0;
	transform: translateY(2.5rem);
	transition: opacity 0.8s ease, transform 0.8s ease;
}

.mc-story--enhanced .mc-story__panel.is-visible {
	opacity: 1;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.mc-story--enhanced .mc-story__panel {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* ---------- H-2 vivid：story 原味彩色版（opt-in `variant="vivid"` → `.mc-story--vivid`）。
   全段 .mc-story.mc-story--vivid (0,3,0) 提權（不靠 cascade order；既有 .mc-story .mc-event__*
   為 (0,2,0)）。只覆蓋 color/background、0 新結構性尺寸；淡雅預設 selector 全不動（plain
   byte-identical）；與 --enhanced 捲動淡入正交。色值 = demo 原味六色盤 + accent banner
   （spec §0/§3.3；低對比為 L 拍板 as-is、UAT 判讀）。 ---------- */
.mc-story.mc-story--vivid .mc-story__banner {
	background: var(--mc-accent); /* demo banner style1 原味 accent 底（含 --split 同元素）。 */
}

.mc-story.mc-story--vivid .mc-story__heading {
	color: #fff;
}

.mc-story.mc-story--vivid .mc-story__heading::after {
	background: rgba(255, 255, 255, 0.85);
}

.mc-story.mc-story--vivid .mc-story__intro {
	color: rgba(255, 255, 255, 0.75);
}

/* vivid banner = accent 底 → CTA 反轉白底深青（同色隱形防呆；vivid 恆彩底不隨 dark 翻故寫死；
   state 全鎖同 .mc-btn--primary 理由）。 */
.mc-story.mc-story--vivid .mc-btn--primary,
.mc-story.mc-story--vivid .mc-btn--primary:visited,
.mc-story.mc-story--vivid .mc-btn--primary:hover,
.mc-story.mc-story--vivid .mc-btn--primary:focus-visible {
	background: #fff;
	color: #0f7c8c;
}

/* panels 輪替六色盤（demo spotlight 原味；6n 循環、第 7 段起回頭）。 */
.mc-story.mc-story--vivid .mc-story__items > .mc-story__panel:nth-child(6n+1) {
	background: #db8992;
}

.mc-story.mc-story--vivid .mc-story__items > .mc-story__panel:nth-child(6n+2) {
	background: #ab7aad;
}

.mc-story.mc-story--vivid .mc-story__items > .mc-story__panel:nth-child(6n+3) {
	background: #897cad;
}

.mc-story.mc-story--vivid .mc-story__items > .mc-story__panel:nth-child(6n+4) {
	background: #7794ce;
}

.mc-story.mc-story--vivid .mc-story__items > .mc-story__panel:nth-child(6n+5) {
	background: #6ba78c;
}

.mc-story.mc-story--vivid .mc-story__items > .mc-story__panel:nth-child(6n+6) {
	background: #64abb4;
}

/* 彩底白字（覆蓋 selector 全集 = spec §3.2 明列：title / summary / meta / cat chip）。 */
.mc-story.mc-story--vivid .mc-story__title {
	color: #fff;
}

.mc-story.mc-story--vivid .mc-story__summary {
	color: rgba(255, 255, 255, 0.85);
}

.mc-story.mc-story--vivid .mc-event__meta {
	color: rgba(255, 255, 255, 0.65);
}

.mc-story.mc-story--vivid .mc-event__cat {
	background: rgba(255, 255, 255, 0.2);
	color: #fff;
}

/* ==== 6c-1d 影片（事件頁 Gumlet iframe + placeholder） ==== */

/* 16:9 responsive wrapper（padding-top 比例法；iframe 絕對定位滿版）。 */
.mc-video {
	position: relative;
	width: 100%;
	padding-top: 56.25%;
	margin: 0.5em 0;
	background: #000;
	border-radius: 6px;
	overflow: hidden;
}

.mc-video iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* 影片列不受 .mc-files 圖片列 flex 縮排影響（滿寬）。 */
.mc-file--video {
	display: block;
	width: 100%;
}

/* placeholder（shortcode 表面 / 未 ready）：▶ 連結樣式。 */
.mc-video-link {
	display: inline-block;
	padding: 0.4em 0.75em;
	background: rgba(0, 0, 0, 0.05);
	border-radius: 4px;
	text-decoration: none;
}

/* ---------- C4 主體時間線（[memory_subject_timeline]；travelogue 視覺 — impl-c4-spec §C4b） ---------- */

.mc-timeline {
	max-width: 780px;
	margin: 0 auto;
}

/* header：eyebrow 小字眉標 → 封面大圖 → h1 主標題 → kind 徽章 → byline → 開場 summary。 */
.mc-timeline__header {
	margin-bottom: 2.5rem;
}

.mc-timeline__eyebrow {
	margin: 0 0 0.35em;
	font-size: 0.85rem;
	letter-spacing: 0.12em;
	color: var(--mc-accent-ink);
}

.mc-timeline__cover {
	margin: 0 0 1.25rem;
}

.mc-timeline__cover img {
	display: block;
	width: 100%;
	max-height: 420px;
	object-fit: cover;
	border-radius: var(--mc-radius);
	box-shadow: var(--mc-shadow);
}

.mc-timeline__title {
	margin: 0 0 0.3em;
	font-size: 2rem;
	line-height: 1.25;
}

.mc-timeline__kind {
	display: inline-block;
	margin: 0 0 0.75em;
	padding: 0.15em 0.7em;
	font-size: 0.8rem;
	color: var(--mc-accent-ink);
	background: var(--mc-bg-soft);
	border: 1px solid var(--mc-border);
	border-radius: 999px;
}

.mc-timeline__by {
	margin: 0 0 1em;
	font-size: 0.9rem;
	color: var(--mc-fg-light);
}

.mc-timeline__summary {
	color: var(--mc-fg);
}

/* 分組：年份/年代/日期未定 標頭 + 左側時間軸線。 */
.mc-timeline__group {
	position: relative;
	margin-bottom: 2.5rem;
	padding-left: 1.25rem;
	border-left: 2px solid var(--mc-border);
}

.mc-timeline__group-label {
	margin: 0 0 1rem;
	font-size: 1.35rem;
	color: var(--mc-accent-ink);
}

.mc-timeline__group--undated .mc-timeline__group-label {
	color: var(--mc-fg-light); /* 日期未定：中性灰、不搶。 */
}

/* 條目：travelogue 大圖 + 日期小字 + 標題 + 摘要。 */
.mc-timeline__item {
	margin-bottom: 2rem;
}

.mc-timeline__item .mc-event__photo {
	margin: 0 0 0.75rem;
}

.mc-timeline__item .mc-event__photo img {
	display: block;
	width: 100%;
	border-radius: var(--mc-radius);
	box-shadow: var(--mc-shadow);
}

.mc-timeline__date {
	margin: 0 0 0.2em;
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--mc-fg-light);
}

.mc-timeline__item .mc-event__title {
	margin: 0 0 0.3em;
	font-size: 1.15rem;
}

.mc-timeline__item .mc-event__meta {
	margin: 0 0 0.4em;
	font-size: 0.88rem;
	color: var(--mc-fg-light);
}

.mc-timeline__item .mc-event__summary {
	margin: 0;
	color: var(--mc-fg);
}

/* byline 圓頭像（Opus C4bc 🟡-3：.mc-event__ava 原規則限 .mc-event--detail 祖先 — timeline 補渲染）。 */
.mc-timeline__by {
	display: flex;
	align-items: center;
	gap: 0.45em;
}

.mc-timeline__by .mc-event__ava {
	width: 1.8em;
	height: 1.8em;
	border-radius: 50%;
	background: var(--mc-bg-soft);
	border: 1px solid var(--mc-border);
	flex: none;
}

/* 手機左右 padding（Opus ⚪8；同 .mc-flipermag 慣例）。 */
@media (max-width: 640px) {
	.mc-timeline {
		padding-left: 12px;
		padding-right: 12px;
	}
}