/*!
Theme Name: Ohio-Child
Theme URI: http://ohio.colabr.io/
Author: Colabrio
Author URI: http://colabr.io/
Description: Ohio is a WordPress theme bundled with premium plugins to build a modern and functional website.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template: ohio
Text Domain: ohio-child
Tags: ajax, customizer, ecommerce, portfolio, minimal, page builder, responsive, multipurpose, shop, store, woocommerce, wpml

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal http://necolas.github.com/normalize.css/
*/

/* =========================================================
   Mattauw 2026 — 設計 tokens（proposal A，取色自主視覺）
   換色票時只改這裡，元件一律引用變數
   ========================================================= */
:root {
	--color-river: #7FB5B5;    /* 溪水青 */
	--color-mountain: #8A9A8B; /* 山體灰綠 */
	--color-earth: #D9B44A;    /* 土黃 */
	--color-brick: #e83e3e;    /* 主視覺紅（點綴、CTA） */
	--color-paper: #fffeea;    /* 主視覺背景色（2026/07 由 #F5F1E6 改為海報實際底色） */
	--color-ink: #3A3A36;      /* 內文墨色 */
	--color-balloon: #0075C2;  /* 主視覺氣球字藍框 */
	--color-forest: #096148;   /* 深綠（Hero 右欄底色） */

	/* 全站左右分割線：等於 Hero 海報實際寬度（高度 × 海報比例 1371/1920），
	   所有 spot 屏左欄共用此寬度，分割線上下對齊 */
	--mt-split: calc(min(100svh, 84vw) * 0.7140625); /* 1371 ÷ 1920 */
}

/* =========================================================
   設計提案 B「溪水藍案」：網址 ?proposal=b 切換
   同一結構換色票——主紅 → 氣球藍、深綠 → 深溪藍
   （報價承諾之第二款提案；業主選定後擇一固定即可）
   ========================================================= */
body.proposal-b {
	--color-brick: #0075C2;  /* 點綴/CTA：主視覺氣球藍 */
	--color-forest: #133F5C; /* 面板底色：深溪藍 */
}

/* 字體一律由 Ohio 版型設定管理（內文 Noto Sans、標題 Noto Serif，Google Fonts），
   自訂元件不得宣告 font-family，直接繼承主題 */

/* 三大主軸卡片錨點：捲動時預留固定 header 高度 */
#axis-dialogue,
#axis-sensory,
#axis-village {
	scroll-margin-top: 90px;
}

/* =========================================================
   Hero 區 [mattauw_hero]
   桌機／平板：左海報 + 右輪播貼合無縫隙；手機：海報直式滿版
   ========================================================= */
.mt-hero {
	position: relative; /* 下滑按鈕的定位基準 */
	display: flex;
	/* 高度以視窗高為準；視窗過窄（直式平板）時等比縮小，
	   確保海報（比例 1371:1920）最多佔 60vw，右欄不被擠掉 */
	height: min(100svh, 84vw);
	background: var(--color-paper);
	color: var(--color-ink);
	overflow: hidden;
}

/* 全站上下屏切換按鈕（spots.js 動態生成）：固定於視窗底部中央，
   非最後一屏＝▼ 往下一屏，最後一屏＝▲（.is-up）回到頂部 */
.mt-scroll-cue {
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 1100; /* 高於 Leaflet 控制層（1000），避免被場域屏地圖蓋住 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	appearance: none;
	border: 0;
	cursor: pointer;
	color: var(--color-brick);
	background: #fff;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba(58, 58, 54, 0.2);
	transition: color 0.25s ease, background 0.25s ease;
}

/* 彈跳動畫加在箭頭圖示上，避免覆蓋按鈕本身的置中 transform */
.mt-scroll-cue svg {
	animation: mt-bounce 2s ease-in-out infinite;
	transition: transform 0.3s ease;
}

.mt-scroll-cue:hover {
	/* hover：磚紅底白箭頭（顏色顛倒） */
	color: #fff;
	background: var(--color-brick);
}

.mt-scroll-cue:focus-visible {
	outline: 3px solid var(--color-brick);
	outline-offset: 2px;
}

/* 最後一屏：箭頭翻轉朝上＝回到頂部 */
.mt-scroll-cue.is-up svg {
	transform: rotate(180deg);
	animation: none; /* 朝上時不彈跳（非「往下提示」語意） */
}

/* 彈窗開啟時隱藏，避免疊在彈窗上 */
body.mt-modal-open .mt-scroll-cue {
	display: none;
}

/* --- 左側：直式主視覺，欄寬 = 海報原始比例，完整呈現不裁切 --- */
.mt-hero__poster {
	flex: 0 0 auto;
	height: 100%;
	aspect-ratio: 1371 / 1920; /* Mattauw2026_主視覺_1920.jpg 原始比例 */
}

.mt-hero__poster img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* 容器比例與海報一致，實際不會裁切 */
	display: block;
}

/* --- 右側：開場文案面板（深綠底試驗 2026/07） --- */
.mt-hero__side {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	background: var(--color-forest); /* 深綠試驗色 */
}

/* 深綠底上的文字全面改為紙色系，維持對比 */
.mt-hero__side .mt-hero__kicker {
	color: rgba(255, 254, 234, 0.75);
}

.mt-hero__side .mt-hero__title,
.mt-hero__side .mt-hero__subtitle {
	color: #fffeea;
}

.mt-hero__side .mt-hero__slogan {
	color: rgba(255, 254, 234, 0.7);
}

.mt-hero__side .mt-hero__highlight {
	color: #fffeea;
	border-color: rgba(255, 254, 234, 0.6);
}

.mt-hero__side .mt-hero__statement {
	color: rgba(255, 254, 234, 0.9);
}

.mt-hero__side .mt-more {
	color: #fffeea;
	border-color: rgba(255, 254, 234, 0.6);
}

.mt-hero__side .mt-more:hover {
	background: #fffeea;
	border-color: #fffeea;
	color: var(--color-forest);
}

.mt-hero__intro {
	padding: clamp(1.5rem, 4vw, 4rem);
}

.mt-hero__kicker {
	margin: 0 0 0.8em;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.25em;
	color: var(--color-brick);
}

.mt-hero__title {
	margin: 0;
	font-size: clamp(2.6rem, 5vw, 4.2rem);
	font-weight: 700;
	letter-spacing: 0.18em;
	line-height: 1.15;
	color: var(--color-ink);
}

.mt-hero__subtitle {
	margin: 0.2em 0 1em;
	font-size: clamp(1.2rem, 2vw, 1.6rem);
	font-weight: 700;
	letter-spacing: 0.3em;
	color: var(--color-ink);
}

.mt-hero__slogan {
	margin: 0 0 1.4em;
	font-size: 0.95rem;
	letter-spacing: 0.12em;
	color: rgba(58, 58, 54, 0.8);
}

/* 亮點行：磚紅細框膠囊帶，是視覺亮點 */
.mt-hero__highlight {
	display: inline-block;
	margin: 0 0 1.4em;
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--color-brick);
	border: 1px solid var(--color-brick);
	border-radius: 999px;
	padding: 0.5em 1.2em;
}

.mt-hero__statement {
	margin: 0;
	font-size: 0.95rem;
	line-height: 2;
	color: var(--color-ink);
}

.mt-hero__intro .mt-more {
	margin-top: 1.4em;
}

/* 彈窗底部數字亮點 */
.mt-modal__numbers {
	margin: 1.4em 0 0;
	padding-top: 1em;
	border-top: 1px solid rgba(58, 58, 54, 0.15);
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	color: var(--color-brick);
}

.mt-hero__carousel {
	position: relative;
	flex: 1 1 auto;
	min-height: 0;
	overflow: hidden;
}

.mt-hero__slide {
	position: absolute;
	inset: 0;
	display: block;
	opacity: 0;
	z-index: 0;
	transition: opacity 2.2s ease-in-out; /* 緩慢淡入，過場絲滑 */
	pointer-events: none;
	text-decoration: none;
	overflow: hidden; /* 裁掉 Ken Burns 放大溢出的部分 */
}

/* 過場原理：上一張（is-prev）維持不透明墊在下層，
   新的一張（is-active）從上層淡入蓋過去——全程無白色空檔 */
.mt-hero__slide.is-active {
	opacity: 1;
	z-index: 2;
	pointer-events: auto;
}

.mt-hero__slide.is-prev {
	opacity: 1;
	z-index: 1;
	transition: none;
}

/* 照片以背景圖完整覆蓋右側區塊：置中裁切、不重複 */
.mt-hero__slide-bg {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	/* Ken Burns：以 transform 做 GPU 加速縮放，勻速緩慢最顯絲滑；
	   時長刻意比「輪播間隔 6s + 淡化 2.2s」長，縮放貫穿全程不停頓 */
	transform: scale(1);
	transition: transform 9s linear;
	will-change: transform;
}

.mt-hero__slide.is-active .mt-hero__slide-bg {
	transform: scale(1.08);
}

/* 照片壓一層米白，讓海報維持主角地位 */
.mt-hero__slide::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(255, 254, 234, 0.08);
	pointer-events: none;
}

/* 圖說：直式書寫、垂直置中、緊貼視窗右緣；白色半透明圓角矩形 */
.mt-hero__caption {
	position: absolute;
	right: 0; /* 貼齊視窗右緣 */
	top: 50%;
	transform: translateY(-50%);
	z-index: 1;
	writing-mode: vertical-rl;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.15em;
	line-height: 1;
	color: var(--color-ink);
	background: #fff;
	padding: 0.9em 0.55em 0.75em;
}


.mt-hero__slide.is-active:hover .mt-hero__caption,
.mt-hero__slide.is-active:focus-visible .mt-hero__caption {
	color: #f00 !important; /* 覆蓋 Ohio 全域 a:hover 換色 */
}

.mt-hero__slide:focus-visible {
	outline: 3px solid var(--color-brick);
	outline-offset: -3px;
}

/* --- 手機（<768px）：海報直式滿版在上，輪播不出現 --- */
@media (max-width: 767px) {
	.mt-hero {
		flex-direction: column;
		height: auto;
	}

	.mt-hero__side {
		display: block; /* 開場文案手機也要顯示（堆疊於海報下方） */
	}

	.mt-hero__intro {
		padding: 1.5rem 1.25rem 0.5rem;
	}

	.mt-hero__poster {
		width: 100%;
		height: auto;
	}

	.mt-hero__poster img {
		width: 100%;
		height: auto;
	}

}

@keyframes mt-bounce {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(6px); }
}

/* =========================================================
   跑馬燈 [mattauw_marquee]
   鏤空大字、無縫循環；裝飾層，非資訊層
   ========================================================= */
.mt-marquee {
	overflow: hidden;
	background: transparent; /* 無底色 */
	padding: 1rem 0;
}

.mt-marquee__track {
	display: flex;
	width: max-content;
	animation: mt-marquee-scroll 150s linear infinite; /* 內容加長後等比放慢，維持緩慢步調 */
}

.mt-marquee__content {
	white-space: nowrap;
	font-weight: 700;
	font-size: clamp(2rem, 3vw, 3rem); /* 手機略縮，桌機最大 3rem */
	line-height: 1.15;
	letter-spacing: 0.06em;
	padding-right: 0.5em;
	color: var(--color-ink); /* 墨黑實心字 */
}

@keyframes mt-marquee-scroll {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* =========================================================
   場域地圖 [mattauw_map]
   ========================================================= */
.mt-map__canvas {
	width: 100%;
	height: clamp(420px, 70vh, 640px);
	background: var(--color-paper); /* 圖磚載入前的底色 */
}

/* NLSC 圖磚降飽和：維持主視覺的低彩度紙感（標記與 popup 不受影響） */
.mt-map__canvas .leaflet-tile-pane {
	filter: saturate(0.4) contrast(0.95);
}

/* 場域標記：圓形 SVG 徽章（依展區類型帶不同圖形），底色透明 */
.mt-map__marker {
	background: none;
	border: 0;
}

.mt-map__marker svg {
	display: block;
	filter: drop-shadow(0 2px 3px rgba(58, 58, 54, 0.35));
	transition: transform 0.2s ease;
	transform-origin: 50% 50%; /* 以圓心放大 */
}

.mt-map__marker:hover svg,
.mt-map__marker:focus-visible svg {
	transform: scale(1.12);
}

.mt-map__marker:focus-visible {
	outline: none;
}

.mt-map__marker:focus-visible svg path:first-child {
	stroke: var(--color-ink);
}

/* popup 外框：白色圓角卡片 */
.mt-map .leaflet-popup-content-wrapper {
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 4px 18px rgba(58, 58, 54, 0.25);
}

.mt-map .leaflet-popup-tip {
	background: #fff;
}

.mt-map .leaflet-popup-content {
	margin: 0.85rem 1rem;
	line-height: 1.4;
}

/* 歸零 Leaflet 內建的 p margin（18px），間距改由 popup 的 gap 統一控制 */
.mt-map .leaflet-popup-content p {
	margin: 0;
}

/* popup 內容：flex column + gap，排版緊密一致 */
.mt-map__popup {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4em;
}

/* 展區類型小標：磚紅細字 */
.mt-map__popup-type {
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--color-brick);
	border: 1px solid var(--color-brick);
	border-radius: 999px;
	padding: 0.15em 0.7em;
}

.mt-map__popup-name {
	font-weight: 700;
	font-size: 1.15rem;
	letter-spacing: 0.05em;
	color: var(--color-ink);
}

/* 約20字的場域短描述 */
.mt-map__popup-desc {
	font-size: 0.85rem;
	line-height: 1.55;
	color: rgba(58, 58, 54, 0.85);
}

/* 作品清單：可捲動，藝術家＋作品名 */
.mt-map__popup-works {
	width: 100%;
	margin: 0;
	padding: 0.5em 0 0;
	list-style: none;
	max-height: 190px;
	overflow-y: auto;
	border-top: 1px solid rgba(58, 58, 54, 0.15);
	font-size: 0.78rem;
	line-height: 1.45;
}

.mt-map__popup-works li {
	padding: 0.25em 0;
	border-bottom: 1px solid rgba(58, 58, 54, 0.08);
}

.mt-map__popup-works li::before {
	content: "・";
	color: var(--color-brick);
}

.mt-map__popup-works .w-artist {
	color: rgba(58, 58, 54, 0.75);
}

.mt-map__popup-works .w-artist::after {
	content: "｜";
	color: rgba(58, 58, 54, 0.35);
}

.mt-map__popup-works .w-title {
	color: var(--color-ink);
	font-weight: 700;
}

/* 延伸展區小標題 */
.mt-map__popup-works-sub {
	margin-top: 0.3em;
	font-weight: 700;
	color: var(--color-brick);
}

.mt-map__popup-works-sub::before {
	content: "" !important;
}

.mt-map__popup-links {
	display: flex;
	gap: 0.5rem;
	margin-top: 0.6em;
}

/* 按鈕：介紹＝磚紅實心、導航＝磚紅描邊 */
.mt-map__popup-btn {
	display: inline-block;
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	padding: 0.35em 1em;
	border-radius: 999px;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

/* 介紹＝紅底白字（覆蓋 Ohio 全域 a:hover 換底色） */
.mt-map__popup-btn--intro,
.mt-map__popup-btn--intro:focus {
	background: var(--color-brick) !important;
	color: #fff !important;
}

/* 介紹 hover：加深紅 */
.mt-map__popup-btn--intro:hover {
	background: #c62f2f !important;
	color: #fff !important;
}

/* 導航＝紅框紅字（含 hover） */
.mt-map__popup-btn--nav,
.mt-map__popup-btn--nav:hover,
.mt-map__popup-btn--nav:focus {
	background: #fff !important;
	border: 1px solid var(--color-brick);
	color: var(--color-brick) !important;
}

/* 等效文字清單（無障礙）：視覺上隱藏，僅供螢幕報讀器與鍵盤使用
   （業主先不要顯示；無障礙規範仍需等效內容，故不從 DOM 移除） */
.mt-map__list {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.mt-map__list-title {
	margin: 0 0 0.5em;
	font-size: 1.15rem;
}

.mt-map__list ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1.75rem;
}

.mt-map__list li {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
}

.mt-map__list a {
	color: var(--color-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mt-map__nav-link {
	font-size: 0.85rem;
	color: var(--color-brick) !important;
}

/* 場域卡片錨點：捲動時預留 header 高度（與 #axis-* 同一套約定） */
#venue-zongye,
#venue-zengwen,
#venue-balin,
#venue-puazailiao,
#venue-zuozhen,
#venue-nanxi {
	scroll-margin-top: 90px;
}

/* =========================================================
   Spot 版面系統 .mt-spot
   桌機：左右分割滿版屏；手機：直向堆疊
   純文字屏可直接在 Elementor section 套 .mt-spot ＋兩欄容器
   ========================================================= */
.mt-spot {
	display: flex;
	min-height: 100svh;
	background: var(--color-paper);
	color: var(--color-ink);
}

/* 進場動畫：JS 啟用（html.js-spots）後，各屏內容首次進入視窗時淡入上移 */
.js-spots .mt-spot > * {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

.js-spots .mt-spot > *:nth-child(2) {
	transition-delay: 0.12s; /* 第二欄稍慢，像翻頁的層次 */
}

.js-spots .mt-spot.is-inview > * {
	opacity: 1;
	transform: none;
}

.mt-spot__heading {
	font-size: clamp(1.6rem, 2.4vw, 2.2rem);
	font-weight: 700;
	letter-spacing: 0.12em;
	margin: 0 0 1em;
	color: var(--color-ink);
}

/* 桌機翻頁式捲動：mandatory 必定停在屏頂、snap-stop 防止快捲跳屏 */
@media (min-width: 768px) {
	html {
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
	}

	/* JS 翻頁動畫進行中：暫時關閉 snap，避免與 rAF 緩動打架 */
	html.mt-animating {
		scroll-snap-type: none;
	}

	.mt-hero,
	.mt-spot {
		scroll-snap-align: start;
		scroll-snap-stop: always;
	}

	/* Footer 以底邊對齊吸附：無論高度長短，
	   頁面最底都是合法吸附點，才不會被吸回上一屏 */
	.mt-about {
		scroll-snap-align: end;
	}
}

/* 右側固定圓點頁籤（spots.js 動態產生） */
.mt-spot-nav {
	position: fixed;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	z-index: 50;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}

.mt-spot-nav__dot {
	appearance: none;
	width: 11px;
	height: 11px;
	padding: 0;
	border: 2px solid var(--color-ink);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.85);
	cursor: pointer;
	transition: transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.mt-spot-nav__dot:hover {
	transform: scale(1.3);
}

.mt-spot-nav__dot.is-active {
	background: var(--color-brick);
	border-color: var(--color-brick);
	transform: scale(1.3);
}

.mt-spot-nav__dot:focus-visible {
	outline: 3px solid var(--color-brick);
	outline-offset: 2px;
}

@media (max-width: 767px) {
	.mt-spot-nav {
		display: none; /* 手機為自然捲動，不顯示頁籤 */
	}
}

/* =========================================================
   主軸屏 [mattauw_axes] 與場域屏 [mattauw_venues]
   共用「左頁籤文字 × 右媒體」呈現語言
   ========================================================= */
.mt-venues__map {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
}

.mt-venues__map .mt-map__canvas {
	height: 100%;
	min-height: 100svh;
}

.mt-axes__body,
.mt-venues__body {
	flex: 0 0 var(--mt-split); /* 對齊 Hero 海報分割線 */
	min-width: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: clamp(1.5rem, 4vw, 3.5rem);
}

/* 主軸屏左欄、場域屏文字欄：白底（2026/07 試驗） */
.mt-axes__body,
.mt-venues__body {
	background: #fff;
}

/* 場域屏桌機左右顛倒（地圖左、文字右）：
   與主軸屏形成 Z 字形交錯節奏（DOM 順序不變，僅視覺翻轉）。
   欄寬與上面兩屏一致：左欄（地圖）＝ --mt-split，分割線全頁對齊 */
@media (min-width: 768px) {
	.mt-venues {
		flex-direction: row-reverse;
	}

	.mt-venues .mt-venues__map {
		flex: 0 0 var(--mt-split);
	}

	.mt-venues .mt-venues__body {
		flex: 1 1 auto;
	}
}

.mt-axes__media {
	flex: 1 1 auto;
	min-width: 0;
	position: relative;
	overflow: hidden;
}

.mt-axes__photo {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 0.8s ease;
}

.mt-axes__photo.is-active {
	opacity: 1;
}

.mt-axes__tabs,
.mt-venues__tabs {
	display: flex;
	gap: 0.5rem;
	margin-bottom: 1.5rem;
	flex-wrap: wrap;
}

.mt-axes__tab,
.mt-venues__tab {
	appearance: none;
	background: transparent;
	border: 1px solid rgba(58, 58, 54, 0.3);
	border-radius: 999px;
	padding: 0.5em 1.3em;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
	scroll-margin-top: 90px; /* Hero 輪播錨點捲動預留 */
}

.mt-axes__tab:hover,
.mt-venues__tab:hover {
	border-color: var(--color-brick);
	color: var(--color-brick);
}

.mt-axes__tab.is-active,
.mt-venues__tab.is-active {
	background: var(--color-brick);
	border-color: var(--color-brick);
	color: #fff;
}

.mt-axes__tab:focus-visible,
.mt-venues__tab:focus-visible {
	outline: 3px solid var(--color-brick);
	outline-offset: 2px;
}

.mt-axes__desc,
.mt-venues__desc {
	font-size: 1.05rem;
	line-height: 2;
	margin: 0 0 1.25em;
}

.mt-axes__subprojects,
.mt-venues__spots {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.8;
}

.mt-axes__subprojects-label,
.mt-venues__spots-label,
.mt-venues__type {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.15em;
	color: var(--color-brick);
	border: 1px solid var(--color-brick);
	border-radius: 999px;
	padding: 0.1em 0.7em;
	margin-right: 0.6em;
}

/* =========================================================
   全站通用彈跳視窗 .mt-modal（modal.js 驅動）
   任何按鈕 data-mt-modal="#id" 觸發；data-mt-close 關閉
   ========================================================= */
.mt-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.25rem;
	opacity: 0;
	transition: opacity 0.25s ease;
}

/* 關鍵：hidden 時必須真正 display:none，
   否則透明彈窗會滿版蓋住頁面攔截所有點擊 */
.mt-modal[hidden] {
	display: none;
}

.mt-modal.is-open {
	opacity: 1;
}

.mt-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(58, 58, 54, 0.55);
	cursor: pointer;
}

.mt-modal__card {
	position: relative;
	z-index: 1;
	width: min(680px, 100%);
	max-height: 88svh;
	background: #fff;
	border-radius: 14px;
	overflow: hidden auto;
	box-shadow: 0 12px 48px rgba(58, 58, 54, 0.35);
	transform: translateY(16px) scale(0.98);
	transition: transform 0.25s ease;
}

.mt-modal.is-open .mt-modal__card {
	transform: none;
}

.mt-modal__close {
	position: absolute;
	top: 0.9rem;
	right: 0.9rem;
	z-index: 2;
	width: 2.4rem;
	height: 2.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	appearance: none;
	border: 0;
	border-radius: 50%;
	background: #fff;
	color: var(--color-ink);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 2px 8px rgba(58, 58, 54, 0.25);
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mt-modal__close:hover {
	background: var(--color-brick);
	color: #fff;
}

.mt-modal__close:focus-visible {
	outline: 3px solid var(--color-brick);
	outline-offset: 2px;
}

/* 頂部大圖：場域照片的主要舞台 */
.mt-modal__media {
	height: clamp(180px, 32svh, 300px);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.mt-modal__content {
	padding: 1.5rem clamp(1.25rem, 4vw, 2.25rem) 2rem;
}

.mt-modal__title {
	margin: 0.5em 0 0.6em;
	font-size: 1.5rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--color-ink);
}

.mt-modal__text {
	margin: 0 0 1.2em;
	font-size: 0.95rem;
	line-height: 2;
	color: var(--color-ink);
}

.mt-modal__subtitle {
	margin: 1.4em 0 0.6em;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-ink);
}

.mt-modal__works {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.88rem;
	line-height: 1.7;
}

.mt-modal__works li {
	padding: 0.3em 0;
	border-bottom: 1px solid rgba(58, 58, 54, 0.08);
}

.mt-modal__works li::before {
	content: "・";
	color: var(--color-brick);
}

.mt-modal__works-sub {
	margin-top: 0.4em;
	font-weight: 700;
	color: var(--color-brick);
}

.mt-modal__works-sub::before {
	content: "" !important;
}

.mt-modal__actions {
	margin: 1.5em 0 0;
	display: flex;
	gap: 0.6rem;
}

/* 彈窗開啟時鎖住背景捲動 */
body.mt-modal-open {
	overflow: hidden;
}

/* 「＋完整介紹」按鈕：面板內的次要動作 */
.mt-more {
	appearance: none;
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 0.4em;
	margin-top: 1.2em;
	background: transparent;
	border: 1px solid var(--color-ink);
	border-radius: 999px;
	padding: 0.45em 1.2em;
	font-size: 0.88rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	color: var(--color-ink);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.mt-more:hover {
	background: var(--color-brick);
	border-color: var(--color-brick);
	color: #fff;
}

.mt-more:focus-visible {
	outline: 3px solid var(--color-brick);
	outline-offset: 2px;
}

.mt-more__icon {
	font-size: 1em;
}

/* =========================================================
   關於我們／Footer [mattauw_about]
   左（深綠、sticky）：關於我們＋FB/IG＋展期＋版權
   右（白）：七組單位名單 logo 牆
   延續全站左右文法，分割線＝ --mt-split
   ========================================================= */
.mt-about {
	display: flex;
	background: var(--color-paper);
}

.mt-about__team {
	background: var(--color-forest);
	color: #fffeea;
	padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 4vw, 3.5rem);
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.mt-about__team {
		flex: 0 0 var(--mt-split); /* 對齊全頁分割線 */
		position: sticky;          /* 右側名單捲動時左欄釘住 */
		top: 0;
		align-self: flex-start;
		height: 100svh;
		overflow-y: auto;
	}

	.mt-about__units {
		flex: 1 1 auto;
		min-width: 0;
	}
}

/* 左欄底部群組（社群＋展期＋版權）推到最下 */
.mt-about__foot {
	margin-top: auto;
	padding-top: 2rem;
	display: flex;
	flex-direction: column;
	gap: 0.8rem;
}

.mt-about__heading {
	margin: 0 0 1.2em;
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.15em;
	color: #fffeea;
}

.mt-about__credits {
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1em;
}

.mt-about__credit {
	display: flex;
	gap: 1.2em;
	align-items: baseline;
}

.mt-about__credit dt {
	flex: 0 0 7em;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: rgba(255, 254, 234, 0.65);
}

.mt-about__credit dd {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.9;
	color: rgba(255, 254, 234, 0.95);
}

/* 單位名單：紙色 logo 牆（與場域屏的白區隔，翻頁時右側有換頁感） */
.mt-about__units {
	background: var(--color-paper);
	padding: clamp(2rem, 5vw, 4rem) clamp(1.5rem, 6vw, 6rem);
	display: flex;
	flex-direction: column;
	gap: 1.6rem;
}

.mt-about__group-label {
	margin: 0 0 0.7em;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--color-ink);
}

.mt-about__group-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.6rem;
}

.mt-about__group-list li.has-logo img {
	height: 46px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	display: block;
}

.mt-about__group-list li.is-text {
	font-size: 0.88rem;
	color: var(--color-ink);
	line-height: 1.6;
}

.mt-about__social {
	display: flex;
	gap: 0.9rem;
}

.mt-about__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	border: 1px solid rgba(255, 254, 234, 0.5);
	color: #fffeea !important; /* 覆蓋 Ohio 全域 a 顏色 */
	transition: background-color 0.2s ease, color 0.2s ease;
}

.mt-about__social a:hover {
	background: #fffeea;
	color: var(--color-forest) !important;
}

.mt-about__social a:focus-visible {
	outline: 3px solid #fffeea;
	outline-offset: 2px;
}

.mt-about__period {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.mt-about__copyright {
	margin: 0;
	font-size: 0.8rem;
	color: rgba(255, 254, 234, 0.6);
}

@media (max-width: 767px) {
	.mt-about {
		flex-direction: column; /* 手機：關於我們在上、單位名單在下 */
	}

	.mt-about__team {
		min-height: 65svh; /* 行動載具：關於我們區塊保有一定高度 */
		justify-content: center;
	}

	.mt-about__team .mt-about__foot {
		margin-top: 2rem; /* 不再推底（左欄非滿高），改固定間距 */
	}

	.mt-about__credit {
		flex-direction: column;
		gap: 0.3em;
	}

	.mt-about__group-list li.has-logo img {
		height: 38px;
	}
}

/* =========================================================
   Header 覆寫
   ========================================================= */
/* 版型 logo：僅在 Hero 屏隱藏（首屏左側即主視覺海報，logo 重複），
   其他屏顯示。body.mt-on-hero 由 spots.js 依目前所在屏切換；
   !important 蓋過 sticky 選單模式寫入的 inline display:flex */
body.mt-on-hero .header .logo {
	display: none !important;
}

/* 手機漢堡鈕：立即顯示＋高對比。
   Ohio 要等 window.load 後 JS 加上 .-mobile 才顯示按鈕，行動網路上
   選單會消失數秒 → ≤768px（Ohio 行動選單斷點）不等 JS 直接顯示。
   另外白色圓鈕在海報米白天空上近乎隱形 → 改磚紅圓底＋白色線條 */
@media (max-width: 768px) {
	.header:not(.-mobile) .mobile-hamburger {
		display: block;
	}

	.header .mobile-hamburger .icon-button.hamburger {
		background-color: var(--color-brick) !important;
	}

	.header .mobile-hamburger .hamburger .icon {
		color: #fff !important;
	}

	/* 「Menu」字樣在米白海報上用墨色，維持可讀 */
	.header .mobile-hamburger .hamburger-caption {
		color: var(--color-ink);
	}
}

/* =========================================================
   漢堡選單 M+ 風覆寫（Ohio .clb-popup.hamburger-nav）
   右側 100vh 黑色直欄承載選單，左側半透明毛玻璃可見頁面
   ========================================================= */
.clb-popup.hamburger-nav {
	/* !important 蓋過 Ohio 動態 CSS 的實心底色；此層＝左側半透明區 */
	background-color: rgba(58, 58, 54, 0.45) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* 右側黑欄：滿高貼右緣（M+ 式），寬度貼合文字不留多餘黑區 */
.clb-popup.hamburger-nav::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: clamp(280px, 22vw, 360px);
	background: var(--color-forest); /* 深綠，與 Hero／Footer 同色系 */
}

/* 選單內容置於黑欄之上。
   close-bar 維持 Ohio 原生 absolute 貼頂（高度＝--clb-header-height），
   與 header 漢堡鈕同一條帶、同水平內距 → 開關按鈕原地切換 */
.clb-popup.hamburger-nav .close-bar {
	position: absolute; /* 沿用父主題 top:0; left:0; right:0 */
	z-index: 1;
}

.clb-popup.hamburger-nav .hamburger-nav-holder {
	position: relative;
	z-index: 1;
	justify-content: flex-end;
	/* 文字往上：不垂直置中，從 header 帶下方開始（M+ 式） */
	align-items: flex-start;
	padding-top: calc(var(--clb-header-height, 80px) + 1.5rem);
}

.clb-popup.hamburger-nav .menu {
	width: auto !important;
	margin-left: auto;
	/* 對齊黑欄內側：欄寬 - 右緣留白，文字置中於欄內 */
	margin-right: clamp(2rem, 4vw, 3.5rem);
	background: transparent;
}

.clb-popup.hamburger-nav .menu li {
	color: #fffeea;
}

/* 選單項目緊湊化：縮小級距與行距 */
.clb-popup.hamburger-nav .menu > li {
	margin: 0.3em 0 !important;
	padding: 0 !important;
}

.clb-popup.hamburger-nav .menu .menu-link {
	font-size: clamp(1.5rem, 2.4vw, 2.1rem) !important;
	line-height: 1.35 !important;
}

/* 窄螢幕：黑欄佔滿整個寬度 */
@media (max-width: 767px) {
	.clb-popup.hamburger-nav::before {
		width: 100%;
	}
}

/* =========================================================
   手繪插畫漂浮層 .mt-floats（主視覺元素 item-*.png）
   裝飾層：不擋點擊、不進報讀器；動態由 floats.js 驅動
   ========================================================= */
.mt-axes__body,
.mt-venues__body,
.mt-about__units {
	position: relative; /* 漂浮層定位基準 */
}

.mt-floats {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.mt-float {
	position: absolute;
	height: auto;
	opacity: 0.9;
	filter: drop-shadow(0 2px 6px rgba(58, 58, 54, 0.12));
}

/* 行動載具不顯示漂浮插畫：窄螢幕或觸控（無 hover）裝置整層隱藏 */
@media (max-width: 767px), (hover: none) {
	.mt-floats {
		display: none;
	}
}

/* =========================================================
   Spot 屏手機版：直向堆疊（照片/地圖在上、文字在下）
   ========================================================= */
@media (max-width: 767px) {
	.mt-spot {
		flex-direction: column;
		min-height: 0;
	}

	/* 主軸屏：照片在上 */
	.mt-axes {
		flex-direction: column-reverse;
	}

	.mt-axes__media {
		height: 48svh;
	}

	.mt-axes__body,
	.mt-venues__body {
		flex: 0 0 auto;
		min-height: 60svh; /* 行動載具：文字區塊保有一定高度，不被壓扁 */
	}

	/* 場域屏：地圖在上、頁籤文字在下 */
	.mt-venues {
		flex-direction: column-reverse;
	}

	.mt-venues__map .mt-map__canvas {
		min-height: 55svh;
		height: 55svh;
	}
}

/* 減少動態偏好：跑馬燈改為靜態置中一行、輪播停用動畫由 JS 處理 */
@media (prefers-reduced-motion: reduce) {
	.mt-marquee__track {
		animation: none;
		width: auto;
		justify-content: center;
	}

	.mt-marquee__content {
		white-space: normal;
		text-align: center;
		font-size: clamp(1.8rem, 4vw, 3.5rem);
	}

	.mt-marquee__content + .mt-marquee__content {
		display: none;
	}

	.mt-hero__slide {
		transition: none;
	}

	.mt-hero__slide-bg {
		transition: none;
		transform: none !important; /* 停用 Ken Burns 縮放 */
	}

	.mt-hero__caption {
		transition: none; /* 停用四邊形變形動畫 */
	}

	.mt-scroll-cue svg {
		animation: none;
	}

	.mt-axes__photo {
		transition: none; /* 主軸照片直接切換不淡入 */
	}

	html {
		scroll-snap-type: none; /* 停用捲動吸附 */
	}

	.mt-modal,
	.mt-modal__card {
		transition: none; /* 彈窗直接顯示不過渡 */
	}
}