/* 小E — 視覺語言
 * 規格真源: moment-bot/docs/decisions/XIAOE-LANDING-PAGE-PLAN-DRAFT-A.md §3
 * 鐵律: 暗底 + 極低飽和 + 單一重點色(避開紅粉紫) / 留白 / 細字重 / 零驚嘆號 / 動效不彈跳
 * 換重點色只需改 --accent 三行。
 */

:root {
  /* 重點色 — 純黑 + 電光青(主) + 洋紅(輔)
   * 二次元色彩邏輯:HUD / 全息 / 變身特效那條線,不是成人站的紫粉漸層。
   * 洋紅只出現在 hover 與選中態,不進 CTA —— 越克制越不俗。
   * 備案見 README。 */
  --accent:        #3fdcec;
  --accent-soft:   rgba(63, 220, 236, 0.13);
  --accent-line:   rgba(63, 220, 236, 0.40);
  --accent-glow:   rgba(63, 220, 236, 0.26);

  --accent-2:      #ff5c9d;
  --accent-2-line: rgba(255, 92, 157, 0.42);
  --accent-2-glow: rgba(255, 92, 157, 0.20);

  --bg:            #06070a;
  --bg-raise:      #0c0e13;
  --surface:       #11141b;
  --hairline:      rgba(255, 255, 255, 0.075);
  --hairline-soft: rgba(255, 255, 255, 0.045);

  --ink:           #e9e9ec;
  --ink-mid:       #a2a2ad;
  --ink-dim:       #6e6e7a;

  /* 標題字族 — 自架 Black(900) 排第一;其後為系統備援(字型載入失敗才用到) */
  --display: 'XiaoE Display', "Noto Sans TC", "Source Han Sans TC", "思源黑體",
             "PingFang TC", "Microsoft JhengHei UI", "Microsoft JhengHei",
             "Hiragino Sans", system-ui, sans-serif;

  --gut:           clamp(20px, 5vw, 72px);
  --band:          clamp(88px, 12vh, 168px);
  --maxw:          1240px;

  --ease:          cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* 標題字型:自架 Noto Sans TC Black(900),SIL OFL,已 subset 至站上實際用字(319 字 / 47KB)。
 * ⚠️ 自架不走 Google Fonts CDN —— 成人站不該把訪客請求洩漏給第三方。
 * 重新產生:scratchpad/fetch-font.js(只在建置時連 Google,執行期不連)。
 * 有了真字重之後,標題不再需要 -webkit-text-stroke 模擬粗體。 */
@font-face {
  font-family: 'XiaoE Display';
  src: url('../assets/fonts/NotoSansTC-Black-subset.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  overflow-x: clip;              /* 滿版背景的保險:任何越界都不得長出橫向捲軸 */
  background: var(--bg);
  color: var(--ink);
  font-family: "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", "Hiragino Sans", system-ui, sans-serif;
  font-weight: 300;
  line-height: 1.75;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
}

img, video { max-width: 100%; display: block; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ── 頂部細 bar ───────────────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px var(--gut);
  font-size: 12px; letter-spacing: 0.08em;
  color: var(--ink-dim);
  background: rgba(10, 10, 12, 0.82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hairline-soft);
}
.topbar .nav { display: flex; gap: 22px; margin-left: auto; margin-right: 26px; }
.topbar .nav a {
  color: var(--ink-mid); text-decoration: none; letter-spacing: 0.1em;
  transition: color 380ms var(--ease);
}
.topbar .nav a:hover, .topbar .nav a[aria-current="page"] { color: var(--accent); }
@media (max-width: 780px) { .topbar .nav { margin-right: 14px; gap: 14px; } }

.topbar .meta { display: flex; align-items: center; gap: 16px; }
.topbar .age { color: var(--ink-mid); }
.topbar .models { display: flex; gap: 14px; flex-wrap: wrap; }
.topbar .models b { color: var(--ink-mid); font-weight: 400; }

/* 左上 wordmark — 與 slogan 同一套斜體超粗身份 */
.brand {
  display: inline-flex; align-items: baseline; gap: 10px;
  text-decoration: none; color: inherit;
}
.brand .mark {
  font-family: var(--display);
  font-weight: 900; font-style: oblique 10deg;
  font-size: 17px; letter-spacing: -0.028em;
  color: var(--ink);
  transition: color 380ms var(--ease);
}
.brand .tld { color: var(--accent); }
.brand .cn {
  font-size: 10.5px; letter-spacing: 0.34em;
  color: var(--ink-dim); font-weight: 300;
  transition: color 380ms var(--ease);
}
.brand:hover .mark { color: var(--accent); }
.brand:hover .cn { color: var(--ink-mid); }

.topbar .tagline { color: var(--ink-mid); letter-spacing: 0.26em; }
.topbar .models .lab { font-style: normal; margin-right: 5px; }
.topbar .models .upd { color: var(--ink-dim); }

/* 手機:topbar 必須是單行。收掉標籤與更新日,只留品牌 + 18+ + 兩個型號 */
@media (max-width: 700px) {
  .brand .cn { display: none; }
  .topbar .models .lab,
  .topbar .models .upd { display: none; }
  .topbar .models { gap: 10px; }
  .topbar .meta { gap: 10px; }
}

/* ── 帶滿版底圖的區塊(區 2:接收原 hero 底圖) ──────────
 * 同 hero 的作法:外層滿版、內層 .wrap,不用 100vw(含捲軸寬會溢出)。
 * 但這裡是中段區塊,內容左右都有 —— 遮罩改「整體壓深 + 上下溶接」,
 * 不用 hero 的左重右輕(那是為單側文字設計的)。 */
.band-bg { position: relative; isolation: isolate; }
.sect-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.sect-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/kv-hero.jpg"), url("../assets/kv-hero-fallback.svg");
  background-size: cover; background-position: 72% center; background-repeat: no-repeat;
  transform: scaleX(-1);   /* 鏡像:此區內容左右都有,壓到主體可接受(Munk 2026-08-15) */
}
/* 遮罩不跟著鏡像 —— 它是獨立 pseudo,翻轉只作用在 ::before */
.sect-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,7,10,0.90) 0%, rgba(6,7,10,0.66) 46%, rgba(6,7,10,0.42) 100%),
    linear-gradient(180deg, var(--bg) 0%, rgba(6,7,10,0.20) 16%, rgba(6,7,10,0.20) 82%, var(--bg) 100%);
}
@media (max-width: 899px) {
  .sect-bg::after {
    background: linear-gradient(180deg, var(--bg) 0%, rgba(6,7,10,0.76) 18%, rgba(6,7,10,0.74) 80%, var(--bg) 100%);
  }
}

/* ── 區塊通用 ─────────────────────────────── */
/* ⚠️ 這些元素同時掛 .wrap。一律只設 padding-block ——
 * 用 padding 簡寫會把 .wrap 的左右內距歸零,整頁貼邊(2026-08-15 實錯)。 */
.band { padding-block: var(--band); border-top: 1px solid var(--hairline-soft); }
.band:first-of-type { border-top: 0; }

.eyebrow {
  font-size: 11px; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 22px;
}
.h2 {
  font-family: var(--display);
  font-size: clamp(29px, 3.9vw, 50px);
  font-weight: 900;
  transform: skewX(-12deg);            /* 同 .slogan:不靠 font-style 合成 */
  transform-origin: left bottom;
  backface-visibility: hidden;         /* 逼合成層以整數像素光柵化,減少斜切造成的軟邊 */
  line-height: 1.2; letter-spacing: -0.035em;
  margin: 0 0 20px; max-width: 20ch;
  /* 同 .slogan:描邊已移除,改用自架 Black(900) 真字重 */
  text-rendering: geometricPrecision;
}
.lede { font-size: clamp(15px, 1.35vw, 17px); color: var(--ink-mid); max-width: 52ch; margin: 0; }

/* ── 區 1 Hero ────────────────────────────── */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(64px, 11vh, 132px) clamp(48px, 7vh, 88px);
}

/* 滿版主視覺。圖層與遮罩分開兩個 pseudo:
 * ::before 放圖(鏡像翻轉)/ ::after 放遮罩(不翻)。
 * 若把鏡像套在容器上,遮罩會跟著翻 —— 遮罩是左重右輕(文字在左),翻了就失效。 */
.hero-bg { position: absolute; inset: -60px 0 0 0; z-index: -1; overflow: hidden; }

/* 第 2、3 層:poster → SVG 佔位。影片載入前 / 缺檔時都由這層頂著,不會黑屏。 */
.hero-bg::before {
  content: ""; position: absolute; inset: 0;
  background-image: url("../assets/hero-poster.jpg"), url("../assets/kv-hero-fallback.svg");
  background-size: cover; background-position: center; background-repeat: no-repeat;
}

/* 第 1 層:intro 影片本體 */
.hero-bg video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}

/* ⚠️ 不要用 display:none 隱藏影片。
 * 原本寫成 @media (prefers-reduced-motion: reduce) { .hero-bg video { display:none } },
 * 而 Windows 關掉「顯示動畫」就會觸發 reduce —— 中獎率極高,
 * 結果是「這台會動、那台不會動」,而檔案其實完全正常(2026-08-16 實錯)。
 * 正解:尊重偏好 = 不自動播,但保留元素並給一顆「播放」讓使用者自己開。
 * 實作在 app.js initHeroVideo。 */

/* 減少動態偏好時顯示的手動播放鍵 */
.hero-play {
  position: absolute; left: 0; bottom: 0; z-index: 2;
  display: none; align-items: center; gap: 9px; cursor: pointer;
  padding: 11px 18px; border-radius: 2px;
  border: 1px solid var(--hairline); background: rgba(10,13,20,0.55);
  backdrop-filter: blur(4px);
  font: inherit; font-size: 13px; color: var(--ink);
  transition: color 380ms var(--ease), border-color 380ms var(--ease);
}
.hero-play[data-show="1"] { display: inline-flex; }
.hero-play:hover { color: var(--accent); border-color: var(--accent-line); }
.hero-play .tri {
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}

/* 手機用直幅版影片(app.js 依視窗擇一設 src),poster 也換直幅,避免橫幅圖被裁成窄縫 */
@media (max-width: 939px) {
  .hero-bg::before { background-image: url("../assets/hero-poster-portrait.jpg"), url("../assets/kv-hero-fallback.svg"); }
}

/* 遮罩只做「字讀得到」的最低限度,不做整片壓暗。
 * 字的可讀性主要交給 .slogan/.sub 的 text-shadow(局部),
 * 遮罩只負責左緣托底與下緣溶接 —— 這樣圖能亮起來。 */
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg,
      rgba(6,7,10,0.60) 0%, rgba(6,7,10,0.28) 26%,
      rgba(6,7,10,0.06) 52%, rgba(6,7,10,0) 72%),
    linear-gradient(180deg,
      rgba(6,7,10,0.46) 0%, rgba(6,7,10,0) 18%,
      rgba(6,7,10,0) 62%, var(--bg) 100%);
}

/* 手機單欄:文字整片壓在圖上,左右向漸層失效,改上下向 —— 但同樣只到讀得到為止 */
@media (max-width: 939px) {
  .hero-bg::before { background-position: 62% center; }
  .hero-bg::after {
    background:
      linear-gradient(180deg,
        rgba(6,7,10,0.62) 0%, rgba(6,7,10,0.50) 44%,
        rgba(6,7,10,0.44) 72%, var(--bg) 100%);
  }
}
/* 單欄:文字靠左,右半整片留給主視覺(她在畫面右側,不再被任何方塊壓住)。
   原本右欄那個 .kv 方塊已移除,intro 改播放鍵 —— 見 index.html。 */
.hero-grid { display: grid; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 940px) { .hero-grid { grid-template-columns: minmax(0, 560px); } }

/* 漫畫式標題:超重字重 + 收緊字距 + 大字級。
 * 與內文 300 形成強對比 —— 反差本身就是設計,不是「哪裡都粗」。
 * text-stroke 是為了補中文系統字型多半只到 700 的缺口(見 README 字型段)。 */
.slogan {
  font-family: var(--display);
  /* ⚠️ 依「文字欄」寬度算,不是視窗寬 —— hero 是雙欄,文字欄僅約一半。
   * 用 7.4vw 會在 940-1440 之間溢出欄寬,把句子折在中間(2026-08-15 實錯)。
   * 最長一行「我全部都做得到。」= 7 字 + 全形句號,上限 68px 才進得了
   * 最寬時的文字欄(實測 517px)。改 slogan 字數時這個上限要跟著重算。 */
  font-size: clamp(36px, 4.8vw, 68px);
  font-weight: 900;
  /* ⚠️ 不用 font-style: oblique —— Chrome 對 CJK 的合成斜體很不可靠,
   * 方塊字沒有 Latin 的字幹可對比,套了幾乎看不出來(2026-08-15 實錯)。
   * 改用幾何 skewX,不依賴字型合成,見 .slogan .ln。 */
  text-wrap: balance;
  line-height: 1.06;
  letter-spacing: -0.045em;
  margin: 0 0 28px;
  /* ⚠️ 不再用 -webkit-text-stroke 模擬粗體 —— 描邊畫在輪廓中線上,會吃進中文字腔;
   * 且在非整數 devicePixelRatio(如 1.5)下寬度不足 1px,必被反鋸齒抹成灰邊 = 糊。
   * 已改用自架 Black(900) 真字重(2026-08-16)。 */
  text-rendering: geometricPrecision;
  /* 可讀性交給「局部陰影」,不交給「整片遮罩」—— 這樣主視覺才亮得起來 */
  text-shadow: 0 2px 28px rgba(0,0,0,0.78), 0 1px 4px rgba(0,0,0,0.55);
}
/* 幾何傾斜:逐行套用。傾斜位移 = 行高 × tan(12°) ≈ 0.22em,
 * 若改套在整個 h1 上,位移會變成「整塊高度」× tan,兩行就把右上角推出欄外。 */
.slogan .ln {
  display: block;
  transform: skewX(-12deg);
  transform-origin: left bottom;
  backface-visibility: hidden;   /* 逼整數像素光柵化,減少斜切合成層的軟邊 */
}
.slogan em { font-style: normal; color: var(--accent); }
/* CJK 全形標點:描邊會把「。」畫成空心圈,且全形字身自帶大留白。
 * 去描邊 + 負邊距收緊,同時解掉圈圈與間隙。 */
.slogan i { font-style: inherit; -webkit-text-stroke: 0; margin-inline-start: -0.24em; }
/* 驚嘆號相反:它是細直筆畫,去描邊會比旁邊的超粗字虛。保留描邊,只收緊字距。 */
.slogan b { font-weight: inherit; letter-spacing: -0.06em; margin-inline-start: 0.02em; }

.sub {
  font-size: clamp(15px, 1.5vw, 18px); color: var(--ink); margin: 0 0 38px; max-width: 34ch;
  text-shadow: 0 1px 16px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.7);
}
.sub span { display: block; }

.cta {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 16px 32px; border-radius: 2px;
  background: var(--accent); color: #04191d;
  font-size: 15px; font-weight: 500; letter-spacing: 0.04em;
  text-decoration: none;
  box-shadow: 0 0 0 1px var(--accent-line), 0 6px 34px var(--accent-glow);
  transition: transform 420ms var(--ease), box-shadow 420ms var(--ease);
}
.cta:hover { transform: translateY(-1px); box-shadow: 0 0 0 1px var(--accent-line), 0 10px 46px var(--accent-glow); }
.cta-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.play {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  padding: 15px 24px; border-radius: 2px;
  border: 1px solid var(--hairline); background: rgba(10,13,20,0.42);
  backdrop-filter: blur(4px);
  font: inherit; font-size: 14px; color: var(--ink);
  transition: color 380ms var(--ease), border-color 380ms var(--ease);
}
.play:hover { color: var(--accent); border-color: var(--accent-line); }
.play .tri {
  width: 0; height: 0; border-style: solid;
  border-width: 5px 0 5px 8px; border-color: transparent transparent transparent currentColor;
}

.cta-note { margin: 16px 0 0; font-size: 13px; color: var(--ink-dim); }
.cta-note b { color: var(--accent); font-weight: 400; }
.tier li b { color: var(--accent); font-weight: 400; }

/* KV / intro 影片位 */
/* 素材未到位前保持半透明:實心黑會把主視覺蓋掉一大塊。
   intro 影片放進來之後改回不透明底即可。 */
.kv {
  position: relative; aspect-ratio: 4 / 5;
  border: 1px solid var(--hairline); border-radius: 3px; overflow: hidden;
  background: rgba(10, 13, 20, 0.34);
  backdrop-filter: blur(3px);
}
.kv:has(video) { background: #080a0f; backdrop-filter: none; }
.kv video { width: 100%; height: 100%; object-fit: cover; }

/* ── 頁尾作品集:瀑布流,有橫有豎 ────────────────
 * 用 CSS columns 而非 grid:混合長寬比時 columns 會自然收攏高度差,
 * grid 要另外算 row-span 才不會留洞。 */
.works {
  column-count: 2;
  column-gap: clamp(12px, 1.4vw, 20px);
}
@media (min-width: 720px)  { .works { column-count: 3; } }
@media (min-width: 1100px) { .works { column-count: 4; } }

/* ⚠️ 按鈕重置必須綁在 .card.work 本身,不能綁 .works .card ——
 * 區 4 的成品列用的是 .vrow,綁錯範圍會露出瀏覽器預設的按鈕白框(2026-08-17 實錯)。 */
button.card.work {
  width: 100%;
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: pointer; text-align: left;
}
button.card.work:focus-visible { outline: 1px solid var(--accent-line); outline-offset: 3px; }

.works .card {
  break-inside: avoid;                 /* 不讓一張卡被切到兩欄 */
  margin-bottom: clamp(12px, 1.4vw, 20px);
}

/* 區 4 成品展示。
 * ⚠️ 不用 grid auto-fit:它會依最小寬度算出比項目數更多的軌道
 * (實測 4 支影片被排進 5 欄,卡片壓到 259px 還多一個空欄,2026-08-17)。
 * 改用 flex 固定每列三個,數量不足時最後一列置中,不會有空軌道。 */
.vrow {
  --vrow-gap: clamp(12px, 1.5vw, 20px);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--vrow-gap);
  margin-bottom: clamp(40px, 5vh, 68px);
}
.vrow > .card {
  flex: 0 1 calc((100% - var(--vrow-gap) * 2) / 3);
  max-width: calc((100% - var(--vrow-gap) * 2) / 3);
}
@media (max-width: 900px) {
  .vrow > .card { flex-basis: calc((100% - var(--vrow-gap)) / 2); max-width: calc((100% - var(--vrow-gap)) / 2); }
}
.vrow[hidden] { display: none; }

/* 播放標記:滑上去播預覽時淡出 */
.work-play {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  border: 1px solid rgba(255,255,255,0.55); border-radius: 50%;
  background: rgba(6,7,10,0.42); backdrop-filter: blur(3px);
  transition: opacity 320ms var(--ease);
  pointer-events: none;
}
.work-play::after {
  content: ""; position: absolute; left: 18px; top: 15px;
  border-style: solid; border-width: 8px 0 8px 13px;
  border-color: transparent transparent transparent #fff;
}
.card-media.is-previewing .work-play { opacity: 0; }
.card-media video { width: 100%; height: 100%; object-fit: cover; }

/* ── 燈箱:完整版播放 ─────────────────────────── */
.lightbox { position: fixed; inset: 0; z-index: 95; display: grid; place-items: center; padding: 24px; }
.lightbox-scrim { position: absolute; inset: 0; background: rgba(4,5,8,0.9); backdrop-filter: blur(12px); }
/* 720 = 完整版影片的原生寬度。縮圖約 400px,點開才真的變大。 */
.lightbox-video {
  position: relative; z-index: 1;
  max-width: min(720px, 100%); max-height: 90vh;
  border: 1px solid var(--hairline); border-radius: 3px; background: #000;
}
.lightbox-x {
  position: absolute; right: 18px; top: 14px; z-index: 2;
  width: 38px; height: 38px; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 2px;
  background: rgba(6,7,10,0.6); color: var(--ink-mid); font-size: 24px; line-height: 1;
}
.lightbox-x:hover { color: var(--accent); border-color: var(--accent-line); }

/* ── 卡片 ─────────────────────────────────── */
.grid {
  display: grid; gap: clamp(12px, 1.5vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(148px, 20vw, 214px), 1fr));
}

.card { position: relative; text-decoration: none; color: inherit; display: block; }
.card-media {
  position: relative; aspect-ratio: 9 / 16; overflow: hidden;
  border: 1px solid var(--hairline); border-radius: 3px;
  background: var(--surface);
  transition: border-color 460ms var(--ease), box-shadow 460ms var(--ease);
}
/* hover 才亮洋紅 —— 二次元的色差感,靜態時不出現 */
.card:hover .card-media {
  border-color: var(--accent-2-line);
  box-shadow: 0 0 26px var(--accent-2-glow);
}
.card:hover .card-name { color: var(--accent); }
.card-name { transition: color 400ms var(--ease); }
.card-media video { width: 100%; height: 100%; object-fit: cover; }

/* 素材未到位時的佔位:刻意的,不是壞掉的 */
.ph { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; text-align: center; }
.ph::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 28% 10%, rgba(63,220,236,0.10), transparent 60%),
    radial-gradient(100% 70% at 88% 96%, rgba(255,92,157,0.07), transparent 62%),
    linear-gradient(168deg, #141a22 0%, #0a0c11 60%, #120e16 100%);
}
.ph span { position: relative; font-size: 11px; letter-spacing: 0.22em; color: var(--ink-dim); }

.badge {
  position: absolute; left: 8px; top: 8px; z-index: 2;
  font-size: 10px; letter-spacing: 0.12em; padding: 3px 8px; border-radius: 2px;
  background: rgba(8,8,10,0.72); color: var(--ink-mid); backdrop-filter: blur(6px);
}
.badge.cctv { color: var(--accent); }

.card-from { margin: 9px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-dim); transition: color 400ms var(--ease); }
.card.work:hover .card-from { color: var(--accent); }
.card-name { margin: 10px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink); }
.card-pack { margin: 2px 0 0; font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.04em; }

/* 尺度遮罩(年齡閘確認前) */
/* img 一定要納入:區 2 的對照圖是 <img>,漏了它就會在年齡閘前露出來 */
.card-media[data-veiled="1"] video,
.card-media[data-veiled="1"] img,
.card-media[data-veiled="1"] .ph { filter: blur(17px) saturate(0.55); }

.card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.veil {
  position: absolute; inset: 0; z-index: 3; display: grid; place-items: center;
  font-size: 11px; letter-spacing: 0.16em; color: var(--ink-mid);
  background: rgba(8,8,10,0.42);
}

/* ── 區 4 第一層:包(一個包 = 一個世界) ────────── */
.packs {
  display: grid; gap: clamp(14px, 1.8vw, 24px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(220px, 28vw, 320px), 1fr));
}
.pack-tile {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: block;
}
.pack-media { aspect-ratio: 4 / 5; }
.pack-tile:hover .pack-media { border-color: var(--accent-2-line); box-shadow: 0 0 30px var(--accent-2-glow); }
.pack-name {
  font-family: var(--display); font-weight: 900;
  transform: skewX(-10deg); transform-origin: left bottom;
  font-size: clamp(19px, 2vw, 24px); letter-spacing: -0.03em;
  margin: 13px 0 0; transition: color 400ms var(--ease);
}
.pack-tile:hover .pack-name { color: var(--accent); }
.pack-line { margin: 5px 0 0; font-size: 13.5px; color: var(--ink-mid); }
.pack-count { margin: 7px 0 0; font-size: 11px; letter-spacing: 0.18em; color: var(--ink-dim); }

/* 第二層:包內的瞬間 */
.pack-open[hidden] { display: none; }
.back {
  appearance: none; background: none; cursor: pointer;
  border: 1px solid var(--hairline); border-radius: 2px;
  padding: 9px 18px; margin: 0 0 22px;
  font: inherit; font-size: 13px; color: var(--ink-mid);
  transition: color 380ms var(--ease), border-color 380ms var(--ease);
}
.back:hover { color: var(--accent); border-color: var(--accent-line); }

.is-previewing .ph { opacity: 0; transition: opacity 260ms var(--ease); }

/* ── 篩選 chip ────────────────────────────── */
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 0 22px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; cursor: pointer;
  padding: 9px 18px; border-radius: 2px;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--ink-mid); font: inherit; font-size: 13px; letter-spacing: 0.03em;
  transition: color 380ms var(--ease), border-color 380ms var(--ease), background 380ms var(--ease);
}
.chip:hover { color: var(--ink); border-color: var(--accent-2-line); }
.chip[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft);
  box-shadow: 0 0 18px var(--accent-glow);
}
.chip small { display: block; font-size: 10.5px; color: var(--ink-dim); letter-spacing: 0.06em; }

.pack-tag { margin: 0 0 clamp(28px, 4vh, 48px); font-size: 14px; color: var(--ink-dim); min-height: 1.6em; }

/* ── 區 2/3 對照 ──────────────────────────── */
.split { display: grid; gap: clamp(30px, 4vw, 64px); grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split.flip > :first-child { order: 2; } }

.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pair figure { margin: 0; }
.pair .card-media { aspect-ratio: 3 / 4; }

/* ⚠️ 滑軌內一律同一個比例,不可逐組變動 —— 否則滑過去高度會跳。
 * 2:3 是折衷:現有素材(0.797 / 0.669 / 0.562)最大裁切約 16%,
 * 若改用 3:4 或 9:16,另一端會被裁掉 25-30%。 */
.demo .pair .card-media { aspect-ratio: 2 / 3; }

/* ── 示範對照滑軌(區 2 / 區 3) ─────────────────── */
.demo { position: relative; }
.demo-viewport { overflow: hidden; }
.demo-track { display: flex; transition: transform 520ms var(--ease); }
.demo-slide { flex: 0 0 100%; min-width: 0; }
.demo-note {
  margin: 0 0 12px; font-size: 11px; letter-spacing: 0.22em; color: var(--accent);
}

.demo-arrow {
  position: absolute; top: 42%; z-index: 3;
  width: 38px; height: 38px; cursor: pointer;
  display: grid; place-items: center;
  border: 1px solid var(--hairline); border-radius: 2px;
  background: rgba(6,7,10,0.62); backdrop-filter: blur(6px);
  color: var(--ink); font-size: 20px; line-height: 1;
  transition: color 380ms var(--ease), border-color 380ms var(--ease);
}
.demo-arrow:hover { color: var(--accent); border-color: var(--accent-line); }
.demo-prev { left: -8px; }
.demo-next { right: -8px; }
@media (max-width: 620px) { .demo-prev { left: 2px; } .demo-next { right: 2px; } }

.demo-dots { display: flex; gap: 7px; justify-content: center; margin-top: 16px; }
.demo-dot {
  width: 22px; height: 3px; padding: 0; cursor: pointer;
  border: 0; border-radius: 2px; background: var(--hairline);
  transition: background 380ms var(--ease);
}
.demo-dot[aria-current="true"] { background: var(--accent); }
.pair figcaption { margin: 9px 0 0; font-size: 11.5px; letter-spacing: 0.14em; color: var(--ink-dim); }

.notes { margin: 30px 0 0; padding: 0; list-style: none; }
.notes li { padding: 13px 0; border-top: 1px solid var(--hairline-soft); font-size: 14.5px; color: var(--ink-mid); }
.notes li b { display: block; color: var(--ink); font-weight: 400; margin-bottom: 3px; }

/* ── 內頁共用(how.html / themes.html) ─────────── */
.page-head { padding-block: clamp(64px, 9vh, 120px) clamp(28px, 4vh, 48px); }

.toc { display: grid; gap: 10px; margin-top: 36px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .toc { grid-template-columns: repeat(2, 1fr); } }
.toc a {
  display: flex; align-items: baseline; gap: 14px;
  padding: 15px 18px; border: 1px solid var(--hairline); border-radius: 3px;
  color: var(--ink-mid); text-decoration: none; font-size: 14px;
  transition: color 380ms var(--ease), border-color 380ms var(--ease);
}
.toc a b {
  font-family: var(--display); font-weight: 900; font-size: 12px;
  letter-spacing: 0.14em; color: var(--accent); min-width: 4.6em;
}
.toc a:hover { color: var(--ink); border-color: var(--accent-line); }

.steps { margin: 30px 0 0; padding: 0; list-style: none; counter-reset: s; }
.steps li { position: relative; padding: 0 0 22px 46px; counter-increment: s; }
.steps li::before {
  content: counter(s, decimal-leading-zero);
  position: absolute; left: 0; top: 1px;
  font-family: var(--display); font-weight: 900; font-size: 13px;
  letter-spacing: 0.06em; color: var(--accent);
}
.steps li b { display: block; color: var(--ink); font-weight: 400; font-size: 15.5px; margin-bottom: 5px; }
.steps li p { margin: 0; font-size: 14px; color: var(--ink-mid); max-width: 56ch; }
.steps li p b { display: inline; color: var(--accent); }

.tip, .warn {
  margin: 26px 0 0; padding: 15px 18px; font-size: 14px; color: var(--ink-mid);
  border-left: 2px solid var(--accent-line); background: var(--accent-soft);
  max-width: 64ch; border-radius: 0 3px 3px 0;
}
.tip b { color: var(--ink); font-weight: 400; margin-right: 8px; }
.tip.big { font-size: 16px; }
.tip.big b { display: block; margin: 0; color: var(--accent); }
.warn { border-left-color: var(--accent-2-line); background: rgba(255,92,157,0.07); }
.warn b { color: var(--accent-2); font-weight: 400; margin-right: 8px; }
.tip a, .warn a, .faq a, footer a { color: var(--accent); text-decoration: none; }
.tip a:hover, .warn a:hover, .faq a:hover, footer a:hover { text-decoration: underline; }

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.92em;
  padding: 1px 6px; border-radius: 2px; background: rgba(255,255,255,0.06); color: var(--ink);
}

/* ── 主題總覽:三分頁 ──────────────────────────── */
.tabs { display: flex; gap: 10px; margin-top: 36px; flex-wrap: wrap; }
.tab {
  cursor: pointer; padding: 12px 24px; border-radius: 2px;
  border: 1px solid var(--hairline); background: transparent;
  color: var(--ink-mid); font: inherit; font-size: 14.5px; letter-spacing: 0.06em;
  display: inline-flex; align-items: baseline; gap: 9px;
  transition: color 380ms var(--ease), border-color 380ms var(--ease), background 380ms var(--ease);
}
.tab small { font-size: 11px; color: var(--ink-dim); letter-spacing: 0.04em; }
.tab:hover { color: var(--ink); border-color: var(--accent-2-line); }
.tab[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent-line);
  background: var(--accent-soft); box-shadow: 0 0 18px var(--accent-glow);
}
.tab[aria-pressed="true"] small { color: var(--accent); }
.tab-note { margin: 16px 0 0; font-size: 13.5px; color: var(--ink-dim); min-height: 1.5em; }

/* 照包分節:tag 篩選 × 包分組。平鋪會稀釋「一個包 = 一個世界」 */
.theme-grid { display: block; }

.pack-sec { margin-bottom: clamp(48px, 6vh, 84px); }
.pack-sec-head {
  display: grid; grid-template-columns: auto auto 1fr auto;
  align-items: baseline; gap: 14px;
  padding-bottom: 14px; margin-bottom: clamp(14px, 1.8vw, 22px);
  border-bottom: 1px solid var(--hairline-soft);
}
.pack-sec-name {
  font-family: var(--display); font-weight: 900;
  transform: skewX(-10deg); transform-origin: left bottom;
  font-size: clamp(20px, 2.2vw, 27px); letter-spacing: -0.03em;
  margin: 0; color: var(--ink);
}
.pack-sec-kind {
  font-size: 10.5px; letter-spacing: 0.16em; color: var(--accent);
  border: 1px solid var(--accent-line); border-radius: 2px; padding: 3px 8px;
}
.pack-sec-line { margin: 0; font-size: 13.5px; color: var(--ink-mid); }
.pack-sec-count { margin: 0; font-size: 11px; letter-spacing: 0.16em; color: var(--ink-dim); white-space: nowrap; }
@media (max-width: 700px) {
  .pack-sec-head { grid-template-columns: auto auto; }
  .pack-sec-line { grid-column: 1 / -1; }
  .pack-sec-count { grid-column: 1 / -1; }
}

.pack-sec-grid {
  display: grid; gap: clamp(12px, 1.5vw, 20px);
  grid-template-columns: repeat(auto-fill, minmax(clamp(148px, 20vw, 214px), 1fr));
}

.theme-empty { font-size: 14px; color: var(--ink-dim); padding: 40px 0; }
.theme-empty[hidden] { display: none; }
.theme-tile {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; display: block;
}
.theme-tile:hover .card-media { border-color: var(--accent-2-line); box-shadow: 0 0 26px var(--accent-2-glow); }
.theme-tile:hover .card-name { color: var(--accent); }

/* ── IG 式詳情 sheet ──────────────────────────── */
.sheet { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; }
.sheet[hidden] { display: none; }
.sheet-scrim { position: absolute; inset: 0; background: rgba(4,5,8,0.86); backdrop-filter: blur(10px); }
.sheet-box {
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr; gap: 0;
  width: min(980px, 100%); max-height: 90vh; overflow: auto;
  background: var(--bg-raise); border: 1px solid var(--hairline); border-radius: 4px;
}
@media (min-width: 800px) { .sheet-box { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
/* ⚠️ 這裡原本寫死 aspect-ratio:9/16 + height:100%,加入 16:9 主題後炸開:
 *    openPost 會把真實比例寫成 inline style,inline 贏過樣式表 ——
 *    於是 height:100%(613px)配 16/9 算出 1090px 寬,塞在 489px 的欄裡,
 *    整支影片蓋掉右邊整個文案欄,看起來就只剩一個播放器。
 *    正解:尺寸一律由「欄寬」決定,永遠不要由高度反推寬度。
 *    overflow:hidden 是第二道保險 —— 之後任何尺寸失誤都不准再畫到文案欄。 */
.sheet-media {
  background: var(--surface);
  min-width: 0;              /* grid 子項預設 min-width:auto,會被內容撐開 */
  overflow: hidden;
  display: grid; align-content: center;
}
.sheet-media .card-media {
  border: 0; border-radius: 0;
  width: 100%; height: auto;   /* 比例吃 openPost 給的 inline aspect-ratio */
  max-height: 86vh;
}
.sheet-media img { object-fit: contain; background: #000; }
.sheet-body { padding: clamp(24px, 3vw, 40px); }
.sheet-pack { margin: 0 0 12px; font-size: 11.5px; letter-spacing: 0.16em; color: var(--ink-dim); }
/* 不加 skew:斜切留給版頭與區塊大標。
   貼文標題是內容不是視覺標語,單獨一行斜掉會被讀成渲染壞掉(Munk 2026-08-21)。 */
.sheet-title {
  font-family: var(--display); font-weight: 900;
  font-size: clamp(23px, 2.6vw, 32px); letter-spacing: -0.03em; line-height: 1.25;
  margin: 0 0 12px;
}
.sheet-line { margin: 0 0 22px; font-size: 14px; color: var(--accent); letter-spacing: 0.08em; }
.sheet-meta { margin: 0 0 20px; padding: 0; list-style: none; }
.sheet-meta li {
  display: flex; gap: 16px; padding: 10px 0;
  border-top: 1px solid var(--hairline-soft); font-size: 13.5px; color: var(--ink-mid);
}
.sheet-meta li b { min-width: 5.4em; color: var(--ink-dim); font-weight: 300; letter-spacing: 0.06em; }
.sheet-hint { margin: 0 0 26px; font-size: 13px; color: var(--ink-dim); line-height: 1.7; }
.sheet-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.like {
  cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  padding: 15px 20px; border-radius: 2px;
  border: 1px solid var(--hairline); background: transparent;
  font: inherit; font-size: 14px; color: var(--ink-mid);
  transition: color 380ms var(--ease), border-color 380ms var(--ease);
}
.like .heart { font-size: 15px; }
.like:hover { color: var(--accent-2); border-color: var(--accent-2-line); }
.like[aria-pressed="true"] { color: var(--accent-2); border-color: var(--accent-2-line); }
.sheet-x {
  position: absolute; right: 10px; top: 8px; z-index: 2;
  width: 34px; height: 34px; cursor: pointer;
  border: 0; background: rgba(6,7,10,0.6); border-radius: 2px;
  color: var(--ink-mid); font-size: 22px; line-height: 1;
}
.sheet-x:hover { color: var(--accent); }

/* ── 尾段 ─────────────────────────────────── */
.tiers { display: grid; gap: 14px; grid-template-columns: 1fr; margin-top: 40px; }
@media (min-width: 780px) { .tiers { grid-template-columns: repeat(3, 1fr); } }
.tier { border: 1px solid var(--hairline); border-radius: 3px; padding: 28px 24px; background: var(--bg-raise); }
.tier h3 { margin: 0 0 6px; font-size: 15px; font-weight: 400; letter-spacing: 0.06em; color: var(--ink); }
.tier .price { font-size: 30px; font-weight: 300; letter-spacing: -0.02em; margin: 0 0 14px; }
.tier .price small { font-size: 13px; color: var(--ink-dim); letter-spacing: 0; }
.tier ul { margin: 0; padding: 0; list-style: none; font-size: 13.5px; color: var(--ink-mid); }
.tier li { padding: 6px 0; border-top: 1px solid var(--hairline-soft); }
.tier li:first-child { border-top: 0; }

.faq { margin-top: 34px; }
.faq-lead {
  margin: 40px 0 0; padding-bottom: 10px;
  font-size: 11px; letter-spacing: 0.3em; color: var(--accent);
  border-bottom: 1px solid var(--hairline-soft);
}
.faq-lead:first-child { margin-top: 0; }
.faq-note {
  margin: 16px 0 4px; font-size: 13.5px; color: var(--ink-mid); max-width: 58ch;
  padding-left: 14px; border-left: 1px solid var(--accent-line);
}
.faq-note b, .faq p b { color: var(--ink); font-weight: 400; }
.faq details { border-bottom: 1px solid var(--hairline-soft); }
.faq summary { padding: 19px 0; cursor: pointer; font-size: 15px; color: var(--ink); list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--ink-dim); }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 0 0 20px; font-size: 14px; color: var(--ink-mid); max-width: 62ch; }

.close { text-align: center; padding-block: var(--band); border-top: 1px solid var(--hairline-soft); }
.close .slogan { font-size: clamp(26px, 4vw, 44px); margin-bottom: 30px; }

footer { padding-block: 34px 60px; border-top: 1px solid var(--hairline-soft); font-size: 12px; color: var(--ink-dim); }
footer .row { display: flex; flex-wrap: wrap; gap: 18px; justify-content: space-between; }

/* ── 年齡閘 ───────────────────────────────── */
.gate {
  position: fixed; inset: 0; z-index: 90; display: grid; place-items: center;
  padding: 24px; background: rgba(6, 6, 8, 0.93); backdrop-filter: blur(18px);
}
.gate[hidden] { display: none; }
.gate-box { max-width: 430px; text-align: center; }
.gate-box h2 { font-size: 19px; font-weight: 400; margin: 0 0 12px; }
.gate-box p { font-size: 13.5px; color: var(--ink-mid); margin: 0 0 28px; }
.gate-box .cta { width: 100%; justify-content: center; }
.gate-box a.leave { display: inline-block; margin-top: 16px; font-size: 12.5px; color: var(--ink-dim); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: 0.01ms !important; }
}

/* ══ 主題總覽 v2:瀑布流 + IG post 詳情(2026-08-21) ══════════
 * ⚠️ 影片橫豎混合(9:16 與 16:9),格子必須保留原比例 ——
 *    統一成方格(IG 那種)會把 16:9 裁掉三分之一,構圖就毀了。
 *    用 CSS columns 做瀑布流:混合高度時它會自然收攏,grid 要另算 row-span。 */
.theme-count { margin: 0 0 16px; font-size: 12px; letter-spacing: 0.14em; color: var(--ink-dim); }

/* ⚠️ 這裡曾經用 CSS columns 做瀑布流,2026-08-21 換成 grid。原因:
 *    columns 會「平衡」內容高度 —— 6 張等高卡片配 4 欄時,它算出「每欄 2 張」
 *    就達到最小高度,於是只用 3 欄,第 4 欄整條空著(Munk:「還是缺一欄」)。
 *    這不是 bug 是 columns 的規格,無法用 CSS 關掉。
 *    改用 grid:欄位由我們指定,不會被平衡演算法收掉。
 *    能這樣換的前提是所有直幅卡都是 9:16(等高),所以不需要瀑布流錯位。
 *    ⚠️ 若日後加入第三種比例,列內會出現高度差,那時才需要重談排版。 */
.theme-grid {
  --tg-gap: clamp(12px, 1.4vw, 18px);
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--tg-gap);
  align-items: start;
}
@media (min-width: 720px)  { .theme-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .theme-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.tcard {
  margin: 0;                      /* 列距交給 grid 的 gap,兩邊都給會變雙倍 */
  width: 100%; display: block; text-align: left; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
}
.tcard:focus-visible { outline: 1px solid var(--accent-line); outline-offset: 3px; }
.tcard:hover .card-media { border-color: var(--accent-2-line); box-shadow: 0 0 26px var(--accent-2-glow); }
.tcard:hover .tcard-name { color: var(--accent); }
.tcard-name { margin: 10px 0 0; font-size: 14px; color: var(--ink); transition: color 400ms var(--ease); }
.tcard-tags { margin: 4px 0 0; font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.04em; }

/* 素材未到位:壓暗並標示,不假裝可用 */
.card-media.is-pending { opacity: 0.55; }

/* ── 詳情:hashtag 與長度 ─────────────────── */
.sheet-group { margin: 0 0 10px; font-size: 11.5px; letter-spacing: 0.18em; color: var(--accent); }
.sheet-desc { margin: 0 0 18px; font-size: 14.5px; color: var(--ink-mid); line-height: 1.8; max-width: 46ch; }
.sheet-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.htag {
  cursor: pointer; padding: 6px 12px; border-radius: 2px;
  border: 1px solid var(--hairline); background: transparent;
  font: inherit; font-size: 12.5px; color: var(--ink-mid); letter-spacing: 0.04em;
  transition: color 340ms var(--ease), border-color 340ms var(--ease);
}
.htag:hover { color: var(--accent); border-color: var(--accent-line); }

.sheet-label { margin: 0 0 10px; font-size: 11px; letter-spacing: 0.22em; color: var(--ink-dim); }
.sheet-durations { display: flex; gap: 8px; margin-bottom: 28px; }
.dur {
  cursor: pointer; padding: 10px 20px; border-radius: 2px;
  border: 1px solid var(--hairline); background: transparent;
  font: inherit; font-size: 13.5px; color: var(--ink-mid);
  transition: color 340ms var(--ease), border-color 340ms var(--ease), background 340ms var(--ease);
}
.dur:hover { color: var(--ink); border-color: var(--accent-2-line); }
.dur[aria-pressed="true"] {
  color: var(--accent); border-color: var(--accent-line);
  background: var(--accent-soft); box-shadow: 0 0 16px var(--accent-glow);
}
/* 該長度尚無素材:可點(會顯示即將上線),但視覺上先弱化 */
.dur.is-soon { opacity: 0.45; }

.sheet-actions .cta { width: 100%; justify-content: center; }
.sheet-note { margin: 14px 0 0; font-size: 12px; color: var(--ink-dim); }
.sheet-media video { width: 100%; height: 100%; object-fit: contain; background: #000; }

/* ── IG post 三個動作:愛心 / 評論 / 轉發 ─────────── */
.post-actions {
  display: flex; gap: 6px; align-items: center;
  margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--hairline-soft);
}
.pact {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 14px; border-radius: 2px;
  border: 1px solid transparent; background: transparent;
  font: inherit; font-size: 13px; color: var(--ink-mid);
  transition: color 320ms var(--ease), border-color 320ms var(--ease);
}
.pact:hover { color: var(--ink); border-color: var(--hairline); }
.pact .ico { font-size: 16px; line-height: 1; }
.pact .pact-lab { letter-spacing: 0.06em; }
/* 愛心:未按是空心灰,按下是洋紅 —— 洋紅在本站只出現在互動態,這裡剛好合規 */
#act-like[aria-pressed="true"] { color: var(--accent-2); border-color: var(--accent-2-line); }
#act-comment[aria-pressed="true"] { color: var(--accent); border-color: var(--accent-line); }

.comments { margin-top: 16px; }
.comments[hidden] { display: none; }
.comments-empty { margin: 0 0 12px; font-size: 13px; color: var(--ink-dim); }
.comments-form { display: flex; gap: 8px; }
.comments-form input {
  flex: 1; min-width: 0; padding: 10px 12px;
  border: 1px solid var(--hairline); border-radius: 2px;
  background: rgba(255,255,255,0.03); color: var(--ink);
  font: inherit; font-size: 13px;
}
.comments-form input:disabled { color: var(--ink-dim); cursor: not-allowed; }
.comments-form button {
  padding: 10px 18px; border-radius: 2px; font: inherit; font-size: 13px;
  border: 1px solid var(--hairline); background: transparent; color: var(--ink-dim);
}
.comments-form button:disabled { cursor: not-allowed; }

.tag-clear {
  margin-left: 10px; cursor: pointer; padding: 2px 8px; border-radius: 2px;
  border: 1px solid var(--accent-line); background: var(--accent-soft);
  font: inherit; font-size: 11px; color: var(--accent); letter-spacing: 0.06em;
}

/* 長度是資訊不是選項:網站只放 15 秒(2026-08-21) */
.durchip {
  display: inline-block; padding: 7px 14px; border-radius: 2px;
  border: 1px solid var(--hairline); font-size: 13px; color: var(--ink-dim);
  letter-spacing: 0.04em;
}
.durchip.is-shown { color: var(--accent); border-color: var(--accent-line); background: var(--accent-soft); }
.dur-note {
  margin: 12px 0 26px; font-size: 12.5px; line-height: 1.7;
  color: var(--ink-dim); max-width: 42ch;
}
.dur-note b { color: var(--ink-mid); font-weight: 400; }

/* 橫幅(16:9)獨佔一整排(Munk 2026-08-21)。
 * 16:9 塞進單欄只有直幅約三分之一的高度,視覺上小一截,手機更嚴重。
 *
 * ⚠️ 別改成「跨 N 欄」或 max-width + margin:auto,兩種都被打回過:
 *    max-width + margin:auto —— 數學上置中,但左右緣都不貼欄線,整塊浮著,看起來就是歪的。
 *    跨 3 欄(4 欄版面)—— 邊緣對齊了,但那一列右邊空一欄,又是個洞。
 *    跨滿整列才同時沒有洞、也不會歪。
 *    高度不會失控:.wrap 的 --maxw 是 1240,格線最寬 1096,16:9 上限就是 616px。 */
.theme-grid .tcard.is-wide { grid-column: 1 / -1; }

/* 首頁區 4 底部:導向主題總覽(那裡才有分頁與標籤篩選) */
.more-link { margin: clamp(28px,4vh,44px) 0 0; font-size: 14px; }
.more-link a {
  color: var(--accent); text-decoration: none; letter-spacing: 0.04em;
  border-bottom: 1px solid var(--accent-line); padding-bottom: 3px;
  transition: color 340ms var(--ease);
}
.more-link a:hover { color: var(--ink); }