/* =============================================================================
   Swanky NFT 首頁（/nft/）樣式 — 自足版（2026-09-02 重新設計）
   -----------------------------------------------------------------------------
   這一頁是主站 → Uniform CloneX 之間的中繼站，所以視覺語彙直接沿用 ucx.css 的
   代幣（紅＝領巾、藍＝百褶裙、暖白紙底、深藍墨底）。不再載入模板的 Bootstrap／
   style.css／輪播／AOS，頁面只靠這一支 CSS 與 clonex-gallery.js（鏈上收藏）。
   與 UCX 頁刻意不同：這裡是索引，圖片一律硬邊、不圓角；字體只有兩家——
   Noto Sans TC 負責所有文字層級，Space Mono 只給「數字型資料」（年份、編號、
   token id），中文絕不進等寬。裝飾只留有語意的紅（接縫＝「相機→鏈上」）。
   代幣值若要改，兩支檔案要一起改（刻意不用 @import，避免多一趟請求）。
   ========================================================================== */

/* ---------- 1. 設計代幣（顏色與 ucx.css 同值） ----------------------------- */
:root {
	--red: #d4394c;
	--red-ink: #b02b3c;
	--red-lift: #e8697a;
	--blue: #144d9c;
	--blue-ink: #0f3d7d;
	--blue-lift: #6d9ede;

	--ink: #0a1024;
	--ink-2: #131b36;
	--paper: #fbfaf7;
	--paper-2: #f2efe8;
	--line: #e3ded3;
	--text: #1b2230;
	--text-2: #4a5568;
	--mute: #5c6572;
	--on-ink: #e7ecf6;
	--on-ink-2: #a6b3ca;

	--s1: .5rem;  --s2: 1rem;  --s3: 1.5rem;  --s4: 2rem;
	--s5: 3rem;   --s6: 5.5rem;

	--maxw: 1220px;
	--gutter: var(--s3);
	/* 版心左緣：出血 hero 裡的標籤與內嵌框也掛在這條基準上。用容器的 100%
	   而不是 100vw 算，捲軸寬度才不會讓它偏掉幾個像素 */
	--edge: max(var(--gutter), calc((100% - var(--maxw)) / 2 + var(--gutter)));
	--measure: 34em;

	--sans: "Noto Sans TC", system-ui, -apple-system, "Segoe UI", sans-serif;
	--serif: "Noto Serif", "Noto Serif TC", "Songti TC", "PMingLiU", serif;   /* 標題：檔案／專刊的味道；拉丁字走同家族襯線，不回退到黑體 */
	--mono: var(--sans);   /* 全頁只有兩個字體聲音；「資料」靠等寬數字（tabular-nums）與字距區分 */

	--nav-h: 58px;
	--inset-drop: 210px;         /* hero 內嵌化身壓出下緣的量（約框高一半）：只咬住照片右下角，不蓋到肩線 */
	--ease-out: cubic-bezier(.16, .84, .44, 1);
}

/* ---------- 2. 重置 -------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
	margin: 0; background: var(--paper); color: var(--text);
	font: 400 1.02rem/1.7 var(--sans);
	overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: var(--blue-ink); text-decoration: none; }
a:hover { color: var(--red-ink); }
h1, h2, h3 { margin: 0; font-weight: 700; line-height: 1.15; text-wrap: balance; font-family: var(--serif); }
p { margin: 0 0 .85em; }
ul, ol, dl, dd, figure { margin: 0; padding: 0; }
button { font: inherit; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 2px; }
::selection { background: var(--red); color: #fff; }

/* 等寬字：只放數字型資料 */
.mono { font-family: var(--mono); font-size: .78rem; letter-spacing: .06em; font-variant-numeric: tabular-nums; font-weight: 500; }
/* 小標（可含中文）：一般字體、小一號、稍加字距 */
.kicker { font-size: .8rem; letter-spacing: .04em; color: var(--mute); }
.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* 文字連結＋箭頭：全頁除了 hero 那一顆主 CTA，所有行動都長這樣（含 button） */
.more {
	display: inline-flex; align-items: center; gap: .45rem;
	color: var(--text); font-weight: 500; font-size: 1rem; line-height: 1.3;
	background: none; border: 0; border-bottom: 1px solid var(--text); border-radius: 0;
	padding: 0 0 .15rem; cursor: pointer;
	transition: color .2s var(--ease-out), border-color .2s var(--ease-out);
}
.more:hover { color: var(--red-ink); border-color: var(--red-ink); }
.more .ar { transition: transform .2s var(--ease-out); }
.more:hover .ar { transform: translateX(3px); }
.more--light { color: var(--on-ink); border-color: rgba(255, 255, 255, .5); }
.more--light:hover { color: #fff; border-color: #fff; }

/* ---------- 3. 導覽（與 UCX 頁同款） ---------------------------------------- */
.nav {
	position: fixed; inset: 0 0 auto; z-index: 60; height: var(--nav-h);
	background: rgba(10, 16, 36, .9); backdrop-filter: blur(10px);
	border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.nav__in { display: flex; align-items: center; gap: var(--s3); height: 100%; }
.nav__brand { display: flex; align-items: center; gap: .5rem; flex: 0 0 auto; }
.nav__brand img { height: 20px; width: auto; filter: brightness(0) invert(1); }
.nav__tag {
	font-size: .68rem; letter-spacing: .14em; color: var(--on-ink); font-weight: 500;
	border: 1px solid rgba(255, 255, 255, .3); padding: .1rem .34rem;
}
.nav__links { display: flex; align-items: center; gap: var(--s3); list-style: none; margin-left: auto; min-width: 0; }
.nav__links a { color: var(--on-ink-2); font-size: .84rem; white-space: nowrap; padding: .55rem 0; transition: color .2s var(--ease-out); }
.nav__links a:hover { color: #fff; }
.nav__links .is-here a { color: #fff; box-shadow: inset 0 -2px 0 var(--red); }
.nav__links .cta a { color: #fff; font-weight: 500; }

.skip {
	position: fixed; top: .5rem; left: .5rem; z-index: 100; transform: translateY(-200%);
	background: #fff; color: var(--ink); border-radius: 3px; padding: .5rem .9rem; font-size: .84rem;
}
.skip:focus { transform: none; }

/* ---------- 4. Hero：等重雙聯畫 -------------------------------------------- */
/* 「從相機到鏈上」做成版面本身：左半真人攝影、右半 CloneX 化身，同為正面頭肩、
   同一視線高度，中間 6px 紅接縫；標題橫跨接縫壓在底部。導言與 CTA 退到圖下方。 */
.hero { margin-top: var(--nav-h); background: var(--ink); color: var(--on-ink); }
.dip2 {
	position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
	background: var(--paper); height: clamp(520px, 78vh, 780px);
}
.dip2__half { position: relative; margin: 0; overflow: hidden; background: var(--ink-2); }
.dip2__half img { width: 100%; height: 100%; object-fit: cover; }
/* 兩張臉的眼睛要在同一條線上（約框高一半）：真人照放大一階、貼頂；
   化身圖放大一階半、貼底，裁掉頂端留白。 */
.dip2__half--camera img { height: 160%; object-position: 50% 32%; }   /* 肖像原檔頭寬只有框寬三分之一，放大到與化身同一個頭的尺度、眼線對齊右半（約框高 42%） */
.dip2__half--chain img { height: 100%; object-position: 45% 50%; }

.tag {
	position: absolute; z-index: 3; top: var(--s3);
	display: inline-flex; align-items: baseline; gap: .6rem;
	background: var(--ink); color: #fff; padding: .5rem .9rem .45rem;
	font-weight: 700; font-size: .92rem; line-height: 1;
}
.tag .kicker { color: var(--on-ink-2); font-weight: 400; font-size: .74rem; }

.hero__title {
	font-size: clamp(2.4rem, 5vw, 4.4rem); line-height: 1.08; letter-spacing: -.02em;
	color: #fff; margin: 0 0 var(--s3); text-wrap: balance;
}
.hero__sub { padding: var(--s5) var(--gutter) var(--s6); align-items: start; }
.hero__copyblock { grid-column: 1 / 9; }
.hero__lead { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.7; max-width: 28em; color: var(--on-ink); margin: 0 0 var(--s3); }
.hero__act { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); }
/* 右欄不留死區：這一頁的目錄，年份就是章節號 */
.hero__index { grid-column: 8 / 13; }
.hero__index ol { list-style: none; border-top: 1px solid rgba(255, 255, 255, .2); }
.hero__index-lab { font-size: .8rem; letter-spacing: .1em; color: var(--red-lift); font-weight: 500; margin: 0 0 .6rem; }
.hero__index li { border-bottom: 1px solid rgba(255, 255, 255, .12); }
.hero__index a { display: grid; grid-template-columns: 5.5rem 1fr auto; align-items: baseline; gap: var(--s2); padding: .9rem 0; color: var(--on-ink); }
.hero__index .ar { color: var(--on-ink-2); transition: transform .2s var(--ease-out); }
.hero__index a:hover .ar { transform: translateY(3px); color: #fff; }
.hero__index a:hover { color: #fff; }
.hero__index a:hover .hero__index-y { color: var(--red-lift); }
.hero__index-y { font-family: var(--serif); font-size: 1.6rem; line-height: 1; letter-spacing: -.02em; color: var(--on-ink-2); transition: color .2s var(--ease-out); }

/* 全頁唯一的實色按鈕 */
.btn {
	display: inline-flex; align-items: center; gap: .5rem; cursor: pointer;
	background: var(--red); color: #fff; border: 1px solid var(--red); border-radius: 3px;
	padding: .8rem 1.5rem; font-size: 1rem; font-weight: 500;
	transition: background .2s var(--ease-out), border-color .2s var(--ease-out), transform .2s var(--ease-out);
}
.btn:hover { background: var(--red-ink); border-color: var(--red-ink); color: #fff; transform: translateY(-1px); }
.btn .ar { transition: transform .2s var(--ease-out); }
.btn:hover .ar { transform: translateX(3px); }

/* ---------- 5. 區塊外殼與標題（同一張 12 欄格） ---------------------------- */
/* 全頁只有一套水平基準：12 欄，左 1–8 欄給標題／編號／圖，右 9–12 欄給文字。
   區塊標題的引言、每一列的文字欄、都從第 9 欄開始。 */
.sec { padding: var(--s6) 0; }
.sec--first { padding-top: var(--s6); }
.sec--ink { background: var(--ink); color: var(--on-ink); }
.grid12 { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--s3); }
.sec__head { align-items: end; margin-bottom: var(--s5); }
.h2 { grid-column: 1 / 8; font-size: clamp(2rem, 4vw, 3.1rem); letter-spacing: -.015em; }
.h2 .no { display: block; font-family: var(--sans); font-size: .82rem; letter-spacing: .1em; color: var(--red-ink); margin-bottom: .7rem; font-weight: 500; }
.sec--ink .h2 { color: #fff; }
.sec--ink .h2 .no { color: var(--red-lift); }
.sec__lead { grid-column: 9 / 13; color: var(--text-2); font-size: 1.02rem; margin: 0; }
.sec__head--stack .h2 { grid-column: 1 / 13; }
.sec__head--stack .sec__lead { grid-column: 1 / 8; }
.sec__head--stack .chain__acts { grid-column: 9 / 13; margin-top: .3rem; }
.sec--ink .sec__lead { color: var(--on-ink-2); }
.sec--ink .sec__lead strong { color: #fff; }

/* ---------- 6. 系列：一條時間線，三列同格 ---------------------------------- */
/* 2021 上鏈 → 2022 展場 → 2022–2026 UCX。三列一模一樣的格：編號在第 1 欄，
   圖佔 2–8 欄、一律 4:3、同一套調色，文字在 9–12 欄。節奏靠內容的年份推進，
   不靠版位變形。 */
.series { list-style: none; border-top: 1px solid var(--line); }
.row { align-items: start; padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
/* 左欄的年份是脊椎：宋體、放大到和 h2 同階，墨色不用紅 */
.row__no { grid-column: 1 / 3; font-family: var(--serif); font-size: clamp(2rem, 3.4vw, 3rem); color: var(--text); line-height: .95; letter-spacing: -.03em; padding-top: .1rem; }
.row__fig { grid-column: 3 / 9; }
.row__fig a { display: block; overflow: hidden; background: var(--ink); }
/* 三張來源不同（街拍、3D 截圖、AI 合成）與四張化身小圖，全頁同一套調色：
   同樣的飽和度、對比與一層極淡的墨色，讓它們讀成同一次策展挑出來的物件。 */
.row__fig img, #clonex-grid:not(.is-lineup) .clonex-card img {
	filter: saturate(.78) contrast(1.05) sepia(.08);
	transition: transform .4s var(--ease-out), filter .4s var(--ease-out);
}
.row__fig img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.row__fig a:hover img, #clonex-grid:not(.is-lineup) .clonex-card:hover img { filter: none; }
.row__fig a:hover img { transform: scale(1.02); }
/* 三行有主從：2021 前史（小）→ 2022 過場（中）→ 2026 旗艦破格（圖從版心左緣起、佔 8 欄）。
   同一個 4:3 框，只靠尺度說誰是重點，不加邊框。 */
.row--y1 .row__fig, .row--y2 .row__fig { grid-column: 3 / 7; }
/* 純文字列（2022 展間）：內容接在年份旁、走同一條左緣，寬度收在一個閱讀量，上下用細線與前後列分開 */
.row--text { padding-top: var(--s4); padding-bottom: var(--s4); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.row--text .row__body { grid-column: 3 / 9; }
.row--y3 { padding-top: var(--s6); padding-bottom: var(--s6); }
.row--y3 .row__fig { grid-column: 3 / 9; }
.row--y3 .row__fig img { aspect-ratio: 16 / 10; }
.row--y3 .row__title { font-size: clamp(1.8rem, 3vw, 2.6rem); }

.row__body { grid-column: 9 / 13; display: flex; flex-direction: column; align-items: flex-start; gap: .8rem; }
.row__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; margin: 0; }
.row__meta .mono { color: var(--red-ink); }
.row__meta .no-inline { display: none; }
.row__title { font-size: clamp(1.4rem, 2.1vw, 1.8rem); line-height: 1.2; }
.row__title a { color: var(--text); }
.row__title a:hover { color: var(--red-ink); }
.row__desc { color: var(--text-2); margin: 0; }
.row__desc strong { color: var(--text); }
.row__act { margin-top: .2rem; }

/* ---------- 7. 鏈上收藏（墨底）：名冊，不是卡片 ---------------------------- */
/* 五隻 CloneX 各自帶著原檔底色，放在墨底上最不打架。不畫框、不填白：
   圖直接落在版面上，編號與身分用排版壓在下面，靠留白分隔。
   #15755 是 UCX 主視覺與塔羅牌原型，佔 2×2；其餘四隻 1×1 填右側。 */
.chain__acts { grid-column: 9 / 13; display: flex; flex-wrap: wrap; gap: .9rem var(--s4); align-items: baseline; }
.sec--ink .more { color: var(--on-ink); border-color: rgba(255, 255, 255, .5); }
.sec--ink .more:hover { color: #fff; border-color: #fff; }
.chain__status { font-size: .84rem; color: var(--on-ink-2); min-height: 1.4em; margin: 0 0 var(--s3); }
.chain__status strong { color: #fff; font-family: var(--mono); font-weight: 400; }

/* clonex-gallery.js 會塞 Bootstrap 的 col-* 外框進來；這裡不理那些 class，
   直接把 #clonex-grid 當 grid 容器。連別人的錢包時沒有特寫，就是一般四欄。 */
#clonex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3); }
#clonex-grid:empty { display: none; }
#clonex-grid > * { min-width: 0; }
/* 自家五位：一列等寬全身像（RTFKT 官方渲染、同底色），順序＝正團三位在前、幕後兩位在後（JS 依 LINEUP 陣列排）；不套統一色調濾鏡 */
#clonex-grid.is-lineup { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s2); }
#clonex-grid.is-lineup .clonex-card img { aspect-ratio: 2 / 3; object-position: 50% 0; filter: none; }
.clonex-card { display: flex; flex-direction: column; height: 100%; color: var(--on-ink); }
.clonex-card:hover .clonex-id { color: var(--red-lift); }
.clonex-card img, .clonex-noimg { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
/* 名冊：五張都留原圖（放大裁頭會蓋住下方的身分標籤——iter8 評審抓到的真實瑕疵） */
.clonex-noimg { display: grid; place-items: center; background: var(--ink-2); color: var(--on-ink-2); font-family: var(--mono); font-size: .8rem; }
.clonex-meta { display: flex; flex-direction: column; gap: .1rem; padding: .7rem 0 0; min-height: 3.6rem; }
.clonex-id { font-size: .84rem; letter-spacing: .04em; color: #fff; font-variant-numeric: tabular-nums; font-weight: 500; transition: color .2s var(--ease-out); }
.clonex-role { font-size: .84rem; color: var(--on-ink); }
.clonex-skeleton { aspect-ratio: 1; background: var(--ink-2); animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

/* ---------- 8. 頁尾：紙底尾註，把時間軸收在這裡 ----------------------------- */
.foot { background: var(--paper); color: var(--text-2); padding: var(--s5) 0 var(--s4); font-size: .92rem; }
.foot .grid12::before { content: ""; grid-column: 1 / -1; border-top: 1px solid var(--text); }
.foot__col--brand { grid-column: 1 / 6; }
.foot__col--index { grid-column: 6 / 9; }
.foot__col--social { grid-column: 9 / 13; }
/* 索引頁的收尾：一排等距小字導覽＋版權，安靜收場 */
.foot__meta { grid-column: 1 / 13; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .6rem var(--s3); margin: 0; font-size: .88rem; color: var(--mute); }
.foot__meta a { color: var(--text-2); }
.foot__meta a:hover { color: var(--red-ink); }
.foot__meta ul { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem var(--s3); }
.foot__brand { display: flex; align-items: center; gap: .5rem; margin: 0 0 .7rem; }
.foot__brand img { height: 20px; width: auto; }
.foot__brand .nav__tag { color: var(--text); border-color: var(--text); }
.foot__desc { max-width: 24em; margin: 0; }
.foot__lab { display: block; margin-bottom: .8rem; color: var(--text); font-weight: 700; }
.foot a { color: var(--text); }
.foot a:hover { color: var(--red-ink); }
.foot ul { list-style: none; display: grid; gap: .35rem; }
.foot .foot__meta ul { display: flex; }
.foot__copy { grid-column: 1 / 13; margin: var(--s4) 0 0; font-size: .82rem; color: var(--mute); }

/* ---------- 8b. 檔案頁（oursong/）專用：扉頁 hero、規格表、三態、成對存檔 -------- */
/* 檔案扉頁：年份是版面上第二大的元素，照片出血到右側視窗邊，左欄是規格表。 */
.hero--arch { padding: 0; }
/* 目錄以紙為主底，深藍只留給「存檔陳列」一段 */
.hero--paper { background: var(--paper); color: var(--text); }
.hero--paper .hero__tag { color: var(--red-ink); }
.hero--paper .hero--arch__year, .hero--paper .hero__title { color: var(--text); }
.hero--paper .hero__lead { color: var(--text-2); }
.hero--paper .facts { border-color: var(--text); }
.hero--paper .facts div { border-color: var(--line); }
.hero--paper .facts dt { color: var(--mute); }
.hero--paper .facts dd, .hero--paper .facts dd .mono { color: var(--text); }
.hero--paper .stamp { border-color: var(--line); color: var(--text-2); }
.hero--paper .stamp .mono { color: var(--text); }
.hero--arch__grid {
	display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5);
	max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter);   /* 扉頁只是封面：圖比內頁的跨頁小 */
}
.hero--arch__main { padding: clamp(3rem, 8vh, 4.5rem) 0 var(--s5); align-self: end; }
.hero--arch__fig { align-self: end; padding-top: clamp(3rem, 8vh, 4.5rem); }
.stamp { display: grid; grid-template-columns: auto 1fr; gap: var(--s2); margin: var(--s3) 0 0; padding: .8rem 0 0; border-top: 1px solid rgba(255, 255, 255, .22); font-size: .86rem; color: var(--on-ink-2); }
.stamp .mono { color: #fff; font-size: .86rem; }
.hero--arch__year { font-family: var(--serif); font-size: clamp(3.5rem, 7vw, 6rem); line-height: .9; letter-spacing: -.03em; color: #fff; margin: .2rem 0 var(--s2); }
.hero--arch .hero__title { font-size: clamp(2.2rem, 3.6vw, 3.2rem); margin: 0 0 var(--s3); text-wrap: balance; }
.hero--arch .hero__lead { grid-column: auto; max-width: 26em; margin: 0 0 var(--s4); }
.hero--arch__fig { position: relative; margin: 0; }
.hero--arch__fig a { display: block; height: 100%; overflow: hidden; }
.hero--arch__fig img { width: 100%; height: 100%; min-height: 0; aspect-ratio: 4 / 5; object-fit: cover; }
.fig-cap {
	position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--on-ink);
	padding: .5rem .9rem; font-size: .84rem; display: inline-flex; gap: .7rem; align-items: baseline;
}
.fig-cap .mono { color: var(--red-lift); }
.lat { font-family: var(--serif); }   /* 標題內的拉丁字：同家族襯線 */

/* 規格表：等寬數字靠左成一欄，單位與說明在後 */
.facts { display: grid; border-top: 1px solid rgba(255, 255, 255, .22); }
.facts div { display: grid; grid-template-columns: 4.5rem 1fr; gap: var(--s2); padding: .55rem 0; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: .92rem; }
.facts dt { color: var(--on-ink-2); }
.facts dd { margin: 0; color: #fff; }
.facts dd .mono { font-size: .95rem; color: #fff; }
.facts a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .4); }

/* 三態：攝影原作｜Pixel RuRu｜TY，一排三張同尺寸，標籤同一套 */
.tri { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.tri__item { margin: 0; }
.tri__item a { display: block; overflow: hidden; background: var(--paper-2); }
.tri__item img { width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .4s var(--ease-out); }
.tri__item a:hover img { transform: scale(1.02); }
.tri__item figcaption { display: grid; grid-template-columns: auto 1fr; gap: .2rem .8rem; padding-top: .8rem; font-size: .9rem; color: var(--text-2); }
.tri__item figcaption .mono { grid-row: 1 / 3; font-size: 1.1rem; color: var(--text); align-self: start; }
.tri__item figcaption b { color: var(--text); }
.tri__notes { margin-top: var(--s5); }
.tri__note { grid-column: span 5; color: var(--text-2); }
.tri__note:first-child { grid-column: 1 / 6; }
.tri__note:last-child { grid-column: 7 / 12; }
.tri__h { font-size: 1.25rem; margin-bottom: .6rem; }
.tri__note p { margin: 0; }

.bullets { list-style: none; display: grid; gap: .35rem; color: var(--text-2); font-size: .94rem; }
.bullets li { padding-left: 1rem; position: relative; }
.bullets li::before { content: ""; position: absolute; left: 0; top: .75em; width: .4rem; height: 1px; background: var(--text-2); }
/* 成對存檔：12 件＝6×2 排滿。兩個狀態要一眼分得出來——
   卡面是「物件」：有紙白邊框、有內縫；解鎖內容是「攝影」：滿格、無框。 */
/* 06 的跨頁：左窄卡面、右滿版解鎖內容，是全頁最大的影像 */
.spread { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--s2); align-items: end; margin-bottom: var(--s6); }
.spread a { display: block; overflow: hidden; }
.spread__cover { padding: 6px; background: var(--paper); align-self: end; }
.spread__cover img { width: 100%; aspect-ratio: 760 / 1278; object-fit: cover; }
.spread__content { background: var(--ink-2); }
.spread__content img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 50% 30%; }
.spread__cap { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .4rem 1rem; align-items: baseline; margin: .4rem 0 0; font-size: .9rem; color: var(--on-ink-2); }
.spread__cap .mono { color: #fff; font-size: 1rem; }
.spread__model { margin-left: auto; }
.pairs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s5) var(--s3); }
/* 一格一件：左卡面（有紙白框）、右解鎖內容（滿格），等高並排；編號與說明卡在底下 */
.pair { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: .5rem 6px; align-items: stretch; }
.pair__cover { grid-row: 1; padding: 5px; background: var(--paper); width: auto; }
.pair__cover img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
.pair__content { grid-row: 1; background: var(--ink-2); }
.pair__content img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.pair__cap { grid-column: 1 / -1; display: flex; gap: .7rem; align-items: baseline; margin: 0; font-size: .84rem; color: var(--on-ink-2); }
.pair__cap .mono { color: #fff; font-size: 1rem; }
.colophon { display: grid; align-content: start; gap: .4rem; padding: .2rem 0 0 var(--s2); border-left: 1px solid rgba(255, 255, 255, .22); font-size: .84rem; color: var(--on-ink-2); }
.colophon__lab { color: #fff; font-weight: 500; margin: 0 0 .3rem; }
.colophon dl { display: grid; gap: .3rem; }
.colophon div { display: grid; grid-template-columns: 3.4rem 1fr; gap: .6rem; }
.colophon dt { color: var(--on-ink-2); }
.colophon dd { color: var(--on-ink); }
.colophon a { color: #fff; border-bottom: 1px solid rgba(255, 255, 255, .4); }
.pair a { position: relative; display: block; overflow: hidden; }
.pair img { display: block; transition: transform .4s var(--ease-out); }
.pair a:hover img { transform: scale(1.03); }
/* 周邊物件：材質各異，原樣陳列（contain），各有說明 */
.objects { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s3) var(--s3); align-items: end; }
.object { margin: 0; }
.object a { display: block; }
.object img { width: 100%; height: auto; }
.object figcaption { display: grid; gap: .1rem; padding-top: .6rem; font-size: .84rem; color: var(--on-ink-2); }
.object figcaption b { color: #fff; font-weight: 500; }

.arch { padding: var(--s4) 0 var(--s5); border-top: 1px solid rgba(255, 255, 255, .14); }
.arch__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .4rem var(--s3); margin-bottom: var(--s3); }
.arch__title { font-size: 1.35rem; color: #fff; }
.arch__note { color: var(--on-ink-2); font-size: .9rem; margin: 0; max-width: 34em; }
.arch__foot { color: var(--on-ink-2); font-size: .88rem; margin: var(--s2) 0 0; }
.arch__foot a { color: var(--on-ink); border-bottom: 1px solid rgba(255, 255, 255, .4); }

.grid12--top { align-items: start; }
.h2--side { grid-column: 1 / 5; }
.prose { grid-column: 5 / 12; color: var(--text-2); font-size: 1.05rem; padding-top: .4rem; }
.prose p { margin-bottom: 1.1em; }
.quote { margin: var(--s3) 0; padding: .2rem 0 .2rem var(--s3); border-left: 1px solid var(--text); color: var(--text); font-family: var(--serif); font-size: 1.2rem; line-height: 1.6; font-weight: 400; }
.next { margin-top: var(--s5); padding-top: var(--s4); border-top: 1px solid var(--line); display: grid; gap: .5rem; justify-items: start; }
.next__lab { font-size: .82rem; letter-spacing: .1em; color: var(--red-ink); font-weight: 500; margin: 0; }
.next__txt { color: var(--text); margin: 0 0 .6rem; }

/* ---------- 9. 進場動畫 ---------------------------------------------------- */
.rise { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.rise.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.rise { opacity: 1; transform: none; transition: none; }
	*, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- 10. 斷點 ------------------------------------------------------- */
@media (max-width: 1024px) {
	.h2 { grid-column: 1 / 13; }
	.sec__lead, .chain__acts { grid-column: 1 / 13; }
	.row { grid-template-columns: 4.2rem repeat(11, minmax(0, 1fr)); }
	.row__no { grid-column: 1; font-size: 1.3rem; }
	.row__fig, .row--y1 .row__fig, .row--y2 .row__fig { grid-column: 2 / 8; }
	.row--y3 .row__fig { grid-column: 2 / 8; }
	.row__body { grid-column: 8 / 13; }
	.row--text .row__body { grid-column: 2 / 12; }
	.hero__copyblock { grid-column: 1 / 13; }
	.sec__head--stack .sec__lead, .sec__head--stack .chain__acts { grid-column: 1 / 13; }
	.foot__col--brand { grid-column: 1 / 13; }
	.foot__col--index { grid-column: 1 / 7; }
	.foot__col--social { grid-column: 7 / 13; }
	.hero--arch__grid { grid-template-columns: 1fr; gap: 0; }
	.hero--arch__main { padding: var(--s5) 0 var(--s4); }
	.hero--arch__fig { padding-top: 0; }
	.hero--arch__fig img { aspect-ratio: 16 / 10; }
	.spread { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
	.h2--side, .prose { grid-column: 1 / 13; }
	.tri__note:first-child, .tri__note:last-child { grid-column: 1 / 13; }
	.pairs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.objects { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	:root { --s6: 3.6rem; --nav-h: 54px; --inset-drop: 96px; }
	/* 手機只留主 CTA；回本頁靠左上品牌標，其餘連結在頁尾 */
	.nav__wide { display: none; }
	.nav__links { gap: .9rem; }
	.nav__links a { font-size: .78rem; }
	.nav__brand img { height: 17px; }
	.nav__brand .nav__tag { display: none; }

	/* 手機：標題在墨底 → 雙聯畫並排兩個正方 → 導言 → CTA；先看到東西再被要求行動 */
	/* 手機：雙聯畫上下堆疊、各佔約半屏，標題橫在兩張之間的接縫上 */
	.dip2 { height: auto; grid-template-columns: 1fr; gap: 4px; }
	.dip2__half { aspect-ratio: 4 / 3; }

	.dip2__half img { height: 100%; }
	.dip2__half--camera img { height: 100%; object-position: 50% 30%; }
	.row--text .row__body { grid-column: 1 / -1; }
	.dip2__half--chain img { height: 100%; object-position: 45% 40%; }
	/* 兩張圖上下相連成一組，標題緊接在圖下 */
	.hero__title { font-size: clamp(2rem, 9.4vw, 2.6rem); }
	.hero__sub { padding: var(--s4) var(--gutter) var(--s5); gap: var(--s4); }
	.hero__copyblock { grid-column: 1; }
	.foot__meta { flex-direction: column; }
	.hero__act { flex-direction: column; align-items: flex-start; }
	.hero__act .btn { width: 100%; justify-content: center; }

	.sec--first { padding-top: var(--s6); }
	.h2 { font-size: 2rem; }
	.grid12 { gap: var(--s2); }
	.sec__head { margin-bottom: var(--s4); }

	/* 編號併進 meta 行、圖滿版心，不留空欄 */
	.row { grid-template-columns: 1fr; gap: var(--s2); padding: var(--s4) 0; }
	.row__no { display: none; }
	.row__fig, .row__body, .row--y1 .row__fig, .row--y2 .row__fig, .row--y3 .row__fig, .row--y3 .row__body { grid-column: 1; grid-row: auto; }
	.row__meta { flex-direction: column; align-items: flex-start; gap: .1rem; }
	.row--y3 { padding-top: var(--s4); }
	.row--y3 .row__fig { margin-top: 0; }
	.row__meta .no-inline { display: block; width: 100%; font-family: var(--serif); font-size: 1.9rem; line-height: 1; color: var(--text); margin: 0 0 .4rem; }

	.chain__acts { flex-direction: column; align-items: flex-start; gap: .9rem; }
	/* 特寫整寬，四隻小圖 2×2，不留孤兒格 */
	#clonex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
	/* 手機：五位橫向滑動，一次看兩位多一點，露出下一位的邊 */
	#clonex-grid.is-lineup { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s2); padding-bottom: .4rem; margin-right: calc(-1 * var(--gutter)); scrollbar-width: thin; }
	#clonex-grid.is-lineup > * { flex: 0 0 44%; scroll-snap-align: start; }

	/* 12 欄格在手機收成 1 欄；所有跨欄設定一律歸 1 */
	.grid12 { grid-template-columns: 1fr; }
	.h2, .sec__lead, .chain__acts, .foot__col--brand, .foot__col--index, .foot__col--social, .foot__copy, .foot__close, .foot__meta,
	.h2--side, .prose, .tri__note:first-child, .tri__note:last-child { grid-column: 1; }
	.hero--arch__year { font-size: 3.4rem; }
	.hero--arch__fig img { aspect-ratio: 4 / 5; }
	.facts div { grid-template-columns: 4rem 1fr; }
	.tri { grid-template-columns: 1fr; gap: var(--s4); }
	.pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s2); }
	.spread { grid-template-columns: 1fr; }
	.spread__cover { width: 48%; }
	.pairs { grid-template-columns: 1fr; }
	.colophon { border-left: 0; padding-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); padding-top: var(--s2); }
	.objects { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.stamp { grid-template-columns: 1fr; gap: .3rem; }
	.arch__head { flex-direction: column; gap: .2rem; }
	.foot ul { grid-template-columns: 1fr 1fr; }
}

/* ---------- 收藏頁（/nft/collection/）：扉頁沿用 oursong 的紙底檔案語彙，
   主體是每個主題一張方格——首件 2×2、其餘 1×1，硬邊、不調色（作品本身的色彩就是資訊） ---------- */
.hero--arch__cap { display: flex; gap: .7rem; align-items: baseline; margin: .6rem 0 0; font-size: .84rem; color: var(--text-2); }
.hero--arch__cap .mono { color: var(--text); }
.hero--paper .hero--arch__fig img { aspect-ratio: 4 / 5; }
.hero--arch .hero__title--sub { font-family: var(--sans); font-weight: 500; font-size: clamp(1.1rem, 1.6vw, 1.35rem); color: var(--text-2); margin: 0 0 var(--s3); }
/* 展區目錄：策展平面圖，不是資產清單——只有編號與展區名 */
.rooms { border-top: 1px solid var(--text); border-bottom: 1px solid var(--line); background: var(--paper); }
.rooms__list { list-style: none; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0 var(--s4); }
.rooms__list a { display: inline-flex; align-items: baseline; gap: .5rem; padding: .8rem 0; color: var(--text); font-weight: 500; font-size: .95rem; border-bottom: 2px solid transparent; }
.rooms__list a .mono { color: var(--mute); font-size: .8rem; letter-spacing: .04em; }
.rooms__list a:hover { color: var(--red-ink); border-color: var(--red); }
.hero--paper .stamp { grid-template-columns: auto 1fr; }
.page-coll .hero--arch__main { padding-bottom: var(--s4); }
.page-coll .hero--arch__fig { align-self: start; padding-top: clamp(3rem, 8vh, 4.5rem); }
.page-coll .hero--arch__fig img { aspect-ratio: 1; }
.page-coll .sec__head { align-items: start; }
.hero--paper .stamp a { color: var(--text); border-bottom: 1px solid var(--text); }
.hero--paper .stamp a:hover { color: var(--red-ink); border-color: var(--red-ink); }
.page-coll .sec--first { border-top: 1px solid var(--line); }
.sec__lead .more { display: flex; width: max-content; margin-top: .7rem; }
.coll { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
.piece { margin: 0; }
.piece--lead { grid-column: span 2; grid-row: span 2; }
/* 團體展區：五位等寬一排，沒有誰是主角 */
.coll--row { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
.coll--row .piece--lead { grid-column: auto; grid-row: auto; }
.coll--row .piece--lead .piece__meta { padding-top: .75rem; margin-top: 0; }
.coll--row .piece--lead .piece__artist { font-size: .9rem; }
.coll--row .piece--lead .piece__title { font-size: 1.02rem; line-height: 1.45; }
.piece a { display: flex; flex-direction: column; height: 100%; color: inherit; }
.piece__img { display: block; aspect-ratio: 1; overflow: hidden; background: var(--paper-2); }
.sec--ink .piece__img { background: var(--ink-2); }
.piece__img--dark { background: var(--ink); }   /* 作品本身是透明圓角（如 MAYC），墊深底讓它不會在紙上露出圓角 */
.piece__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s var(--ease-out); }
.piece a:hover img { transform: scale(1.03); }
.piece__meta { display: flex; flex-direction: column; gap: .05rem; padding: .75rem 0 0; font-size: .86rem; line-height: 1.45; color: var(--text-2); }
.piece__lot { font-size: .74rem; letter-spacing: .08em; text-transform: uppercase; color: var(--mute); margin-bottom: .2rem; }
.piece__artist { color: var(--text); font-weight: 700; font-size: .9rem; }
.piece__title { font-family: var(--serif); font-style: italic; font-size: 1.02rem; color: var(--text); }
.piece__medium { font-size: .78rem; color: var(--mute); margin-top: .15rem; }
.piece a:hover .piece__title { color: var(--red-ink); }
.piece--lead .piece__img { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }   /* 大圖撐滿兩列的高度，說明才會緊貼圖下、與第二排說明同底線 */
.piece--lead .piece__meta { padding-top: .9rem; }
.piece--lead .piece__artist { font-size: 1rem; }
.piece--lead .piece__title { font-size: 1.45rem; line-height: 1.25; }
.piece__meta .dot { margin: 0 .35rem; }
.sec--ink .piece__meta { color: var(--on-ink-2); }
.sec--ink .piece__lot, .sec--ink .piece__medium { color: var(--on-ink-2); }
.sec--ink .piece__artist, .sec--ink .piece__title { color: #fff; }
.sec--ink .piece a:hover .piece__title { color: var(--red-lift); }
@media (max-width: 1024px) {
	.coll { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.coll--row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.coll, .coll--row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3) var(--s2); }
	.piece__meta { font-size: .8rem; }
	.hero--paper .hero--arch__fig img { aspect-ratio: 1; }
}