/* ══════════════════════════════════════════════════════════════
   暗房系 · 官網樣式
   色票、字體、材質全部沿用 社群媒體/_ref/card-template/v2b/v2b.css
   （社群媒體/CLAUDE.md 指定 v2b 為視覺的唯一真相來源；奶油底舊系已作廢）

   為什麼是深色：作品本身是暗的（夜景寢具、1930 昏暗室內、黃昏空拍）。
   放在米白底上，畫面的黑會被紙的亮壓掉，深度全沒了。
   這裡的深色不是「時髦」，是讓影像有地方呼吸。
   所以內文用紙色 #EFE6D4（15:1）不是中灰，標題也不用全大寫 ——
   那個組合才是 AI 預設深色主題的特徵。
   ══════════════════════════════════════════════════════════════ */

/* ── 字體：IG 卡片系統的同一套，子集化後 646KB ──────────────
   重跑 變現引擎/_tools/subset_fonts.py 可更新（改過文案就要重跑）*/
@font-face {
  font-family: 'GenRyu'; font-weight: 900; font-display: swap;
  src: url('fonts/genryu-display.woff2') format('woff2');
}
@font-face {
  font-family: 'GenRyu'; font-weight: 400 700; font-display: swap;
  src: url('fonts/genryu-body.woff2') format('woff2');
}
@font-face {
  font-family: 'WenKai'; font-weight: 400; font-display: swap;
  src: url('fonts/wenkai.woff2') format('woff2');
}
@font-face {
  font-family: 'CourierP'; font-weight: 400; font-display: swap;
  src: url('fonts/courier.woff2') format('woff2');
}
@font-face {
  font-family: 'CourierP'; font-weight: 700; font-display: swap;
  src: url('fonts/courier-bold.woff2') format('woff2');
}

:root {
  --bg:     #14110E;                    /* 暗房底 */
  --paper:  #EFE6D4;                    /* 紙　　15.0:1 */
  --ink-2:  rgba(239, 230, 212, .74);   /*        8.6:1 */
  --ink-3:  rgba(239, 230, 212, .56);   /*        5.4:1 */
  --hair:   rgba(239, 230, 212, .14);
  --stage:  #0D0B09;                    /* 比底再暗一階，放影片用 */

  --rec:    #E4794A;   /* 實錄：真實數字、失敗、成本 */
  --teach:  #58BDB2;   /* 教學：內訓 */
  --info:   #9B85D6;   /* 情報：保留，網站目前未用 */
  --accent: var(--teach);

  /* 四層字體，每層有語意，不要混用（沿用 v2b 的規則）
     GenRyu 900  片名級大標 —— 鉛字明體＝電影片名傳統
     GenRyu 400  印刷正文　 —— 劇本本文
     WenKai      註記旁白　 —— 手寫＝我的聲音
     CourierP    英文與數字 —— 全球劇本標準字體 */
  --f-title: 'GenRyu', "Noto Serif TC", "PMingLiU", serif;
  --f-body:  var(--f-title);
  --f-hand:  'WenKai', "Kaiti TC", "DFKai-SB", serif;
  --f-slate: 'CourierP', "Courier New", ui-monospace, monospace;

  /* ── 字級階梯 ────────────────────────────────────────────
     只有這 8 階，全站不准出現階梯外的字級。
     比例 1.25（major third），跨裝置用同一個係數縮放，
     所以放大縮小之後階梯關係不變。

     踩過的坑：原本每個地方各自寫 clamp(min, vw, max)，
     算出來變成 10.6 / 10.9 / 11.5 / 11.8 這種相鄰差 2% 的字級 ——
     人眼分不出差別，只會覺得整頁很散。量出來全站有 17 種字級。 */
  --f0: clamp(.72rem, .70rem + .10vw, .78rem);   /* 場記標籤、來源標記 */
  --f1: clamp(.80rem, .77rem + .14vw, .88rem);   /* 導覽、表頭、小字 */
  --f2: clamp(.94rem, .91rem + .16vw, 1.02rem);  /* 註記、卡片內文 */
  --f3: clamp(1.05rem, 1.00rem + .22vw, 1.18rem);/* 正文 */
  --f4: clamp(1.30rem, 1.15rem + .70vw, 1.65rem);/* 小標 */
  --f5: clamp(1.65rem, 1.30rem + 1.6vw, 2.30rem);/* 區塊標題 */
  --f6: clamp(2.10rem, 1.50rem + 2.7vw, 3.20rem);/* 作品名、大數字 */
  --f7: clamp(2.60rem, 1.60rem + 4.4vw, 4.60rem);/* 片名級 */

  /* ── 間距階梯（8px 節奏）────────────────────────────────
     全部是 8 的倍數。原本 73% 的間距落在 8 的倍數之外，整頁沒有節奏。 */
  --s1: .5rem;    /*  8px */
  --s2: 1rem;     /* 16px */
  --s3: 1.5rem;   /* 24px */
  --s4: 2.5rem;   /* 40px */
  --s5: 4rem;     /* 64px */
  --s6: 6rem;     /* 96px */

  --wrap: 64rem;
  --gap: clamp(1.5rem, 4vw, 3rem);
  --rail: clamp(0px, 3.4vw, 3.5rem);   /* 左側時碼軌，窄螢幕收成 0 */
}

* { box-sizing: border-box; }

html { background: var(--bg); }
body {
  margin: 0; position: relative;
  background: var(--bg);
  color: var(--paper);
  font-family: var(--f-body);
  font-size: var(--f3);
  line-height: 1.8;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}

/* ── 材質層：顆粒 + 暗角 + 兩道光暈 ────────────────────────
   這三層是 v2b 讓卡片「摸起來像同一種紙」的原因。
   沒有它們，深色只是深色，不是暗房。 */
body::before,
body::after {
  content: ""; position: fixed; inset: 0; pointer-events: none;
}
body::before {          /* 光暈：左下橘（實錄）、右上藍綠（教學）+ 暗角 */
  z-index: 0;
  background:
    radial-gradient(120% 92% at 50% 48%, transparent 52%, rgba(0,0,0,.5) 100%),
    radial-gradient(70% 55% at 8% 104%, rgba(226,152,74,.20), transparent 66%),
    radial-gradient(80% 60% at 96% -8%, rgba(88,189,178,.14), transparent 62%);
}
body::after {           /* 底片顆粒 */
  z-index: 999; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.09'/%3E%3C/svg%3E");
}
body > * { position: relative; z-index: 1; }

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

.wrap {
  width: min(100% - 2 * var(--gap), var(--wrap));
  margin-inline: auto;
  padding-left: var(--rail);
}
.mono { font-family: var(--f-slate); }
.dim  { color: var(--ink-3); }
.hand { font-family: var(--f-hand); color: var(--ink-2); }

.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -9999px; background: var(--paper); color: var(--bg); padding: .6rem 1rem; z-index: 1000; }
.skip:focus { left: .5rem; top: .5rem; }

/* ── 時碼軌：v2b 註解寫「每頁都有，是系統的識別」──────────
   網頁版做成固定在左緣的細軌，窄螢幕自動收掉。 */
.rail {
  position: fixed; left: 0; top: 0; bottom: 0; width: var(--rail);
  z-index: 30; border-right: 1px solid var(--hair);
  display: flex; align-items: center; justify-content: center;
  pointer-events: none; background: var(--bg);
}
.rail span {
  font-family: var(--f-slate); font-size: var(--f0); letter-spacing: .34em;
  color: var(--ink-3); writing-mode: vertical-rl; transform: rotate(180deg);
  white-space: nowrap;
}
@media (max-width: 46rem) { .rail { display: none; } }

/* ── 導覽 ─────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: 1rem var(--gap) 1rem calc(var(--gap) + var(--rail));
  background: var(--bg);
  border-bottom: 1px solid var(--hair);
}
.nav a { text-decoration: none; }
.nav .brand { font-family: var(--f-slate); font-weight: 700; letter-spacing: .16em; font-size: var(--f1); }
.nav ul { display: flex; gap: clamp(.9rem, 3vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav ul a { font-family: var(--f-slate); font-size: var(--f1); letter-spacing: .14em; color: var(--ink-3); padding-bottom: .25rem; }
.nav ul a:hover { color: var(--paper); }
.nav ul a[aria-current="page"] { color: var(--accent); border-bottom: 1px solid var(--accent); }

/* ── 作品網格 ─────────────────────────────────────────── */
.works {
  display: grid; gap: 2px;
  grid-template-columns: repeat(2, 1fr);
  padding: 2px 2px 2px calc(var(--rail) + 2px);
}
.work {
  position: relative; display: block; overflow: hidden;
  background: var(--stage); text-decoration: none; color: var(--paper);
  aspect-ratio: 16 / 9;
}
.work--wide { grid-column: 1 / -1; }
.work--stage {
  grid-column: 1 / -1; aspect-ratio: auto;
  display: grid; place-items: center; padding: clamp(1.5rem, 5vw, 4rem) 0;
}
.work--stage .work-media { width: min(86vw, 24rem); aspect-ratio: 9 / 16; position: relative; }

.work-media { position: absolute; inset: 0; overflow: hidden; }
.work-media img, .work-media video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);   /* expo.out */
}
.work-media video { position: absolute; inset: 0; opacity: 0; transition: opacity .5s ease, transform .7s cubic-bezier(.16,1,.3,1); }
.work.is-playing .work-media video { opacity: 1; }

.work-label {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: clamp(1rem, 3.5vw, 2.5rem);
  background: linear-gradient(to top, rgba(13,11,9,.92) 0%, rgba(13,11,9,.55) 42%, transparent 100%);
  transition: transform .5s cubic-bezier(.16,1,.3,1);
}
.work-label h2 {
  font-family: var(--f-title); font-weight: 900; margin: 0;
  font-size: var(--f6); line-height: 1.22;
  letter-spacing: .01em;
}
.work-label p {
  margin: .5rem 0 0; font-family: var(--f-slate);
  font-size: var(--f0);
  letter-spacing: .18em; color: var(--accent);
}

@media (hover: hover) {
  .work:hover .work-media img,
  .work:hover .work-media video { transform: scale(1.04); }
  .work:hover .work-label { transform: translateY(-6px); }
}
.work:focus-visible { outline: 2px solid var(--rec); outline-offset: -4px; }

/* 進場：預設看得見，JS 接手（加 .reveal-on）才先藏起來。
   微彈 back.out，錯開 60ms —— 一次全出現會像沒動畫。 */
.work { transition: opacity .5s ease, transform .55s cubic-bezier(.34, 1.36, .64, 1); }
.works.reveal-on .work { opacity: 0; transform: translateY(18px) scale(.985); }
.works.reveal-on .work.is-revealed { opacity: 1; transform: none; }

@media (max-width: 46rem) {
  .works { grid-template-columns: 1fr; padding: 2px; }
  .work { grid-column: 1 / -1; }
}

/* ── 燈箱 ─────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; place-items: center;
  background: rgba(8, 6, 5, .96); padding: var(--gap);
}
.lightbox.is-open { display: grid; }
.lightbox video { max-width: min(100%, 80rem); max-height: 82vh; width: auto; }
.lightbox-close {
  position: absolute; top: 1.5rem; right: 1.5rem;
  font-family: var(--f-slate); font-size: var(--f1); letter-spacing: .16em;
  background: transparent; color: var(--paper); border: 1px solid rgba(239,230,212,.4);
  padding: .5rem 1rem; cursor: pointer;
}
.lightbox-close:hover { background: var(--paper); color: var(--bg); }
.lightbox-title {
  position: absolute; left: var(--gap); bottom: 1.5rem; color: var(--ink-3);
  font-family: var(--f-slate); font-size: var(--f1); letter-spacing: .16em;
}

/* ── 內容頁 ───────────────────────────────────────────── */
.page { padding: var(--s4) 0 var(--s5); }
.page.accent-rec   { --accent: var(--rec); }
.page.accent-teach { --accent: var(--teach); }

/* 頂部場記資料條，沿用 v2b 的 .slate */
.slate-bar {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; padding-bottom: .5rem; margin-bottom: var(--s3);
  border-bottom: 1px solid var(--hair);
  font-family: var(--f-slate); font-size: var(--f0); letter-spacing: .2em;
  color: var(--ink-3);
}
.slate-bar b { color: var(--accent); font-weight: 700; }

.page-head { margin-bottom: var(--s4); }
.kicker {
  display: block; font-family: var(--f-slate); font-weight: 700;
  font-size: var(--f0); letter-spacing: .28em; color: var(--accent); margin-bottom: var(--s2);
}
h1 {
  font-family: var(--f-title); font-weight: 900; margin: 0;
  font-size: var(--f7); line-height: 1.14; letter-spacing: .005em;
  color: var(--accent);
}
h1 em { font-style: normal; color: var(--paper); }
.sub { color: var(--ink-2); margin: var(--s2) 0 0; max-width: 40ch; font-size: var(--f3); }

section + section { margin-top: var(--s5); }
h2.sec {
  font-family: var(--f-title); font-weight: 900;
  font-size: var(--f5); margin: 0 0 var(--s2);
}
section > p { max-width: 42ch; margin: 0 0 var(--s2); }

/* ── 按鈕 ─────────────────────────────────────────────── */
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: var(--s3); }
.btn {
  display: inline-block; text-decoration: none;
  font-family: var(--f-slate); font-weight: 700; letter-spacing: .12em;
  font-size: var(--f1); padding: 1rem 1.5rem; border: 1px solid var(--accent);
  transition: background .25s cubic-bezier(.16,1,.3,1), color .25s ease;
}
.btn.primary { background: var(--accent); color: var(--bg); }
.btn.primary:hover { background: transparent; color: var(--accent); }
.btn.ghost { color: var(--accent); background: transparent; }
.btn.ghost:hover { background: var(--accent); color: var(--bg); }
.btn.sm { font-size: var(--f1); padding: .5rem 1rem; }
.btn:focus-visible { outline: 2px solid var(--rec); outline-offset: 3px; }

/* ── 卡片：不畫框，用底色差與髮絲線分組（v2b 的做法）────── */
.cards { display: grid; gap: 2px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); }
.card { background: rgba(239, 230, 212, .035); padding: var(--s3) var(--s2); }
.card-meta {
  display: flex; justify-content: space-between; gap: .8rem;
  font-family: var(--f-slate); font-size: var(--f0); letter-spacing: .2em;
  color: var(--accent); margin-bottom: var(--s2);
}
.card h3 { font-family: var(--f-title); font-weight: 700; font-size: var(--f4); line-height: 1.5; margin: 0 0 var(--s2); }
.card p { margin: 0 0 var(--s2); font-size: var(--f2); color: var(--ink-2); }
.note { font-family: var(--f-hand); color: var(--ink-2); font-size: var(--f2); line-height: 1.85; }
.list { margin: 0; padding-left: 1.2rem; }
.list li { margin-bottom: var(--s1); font-size: var(--f2); color: var(--ink-2); }

/* ── 劇照帶 ───────────────────────────────────────────── */
.stills { display: grid; gap: 2px; margin: var(--s3) 0; grid-template-columns: repeat(3, 1fr); }
.stills figure { margin: 0; position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--stage); }
.stills img { width: 100%; height: 100%; object-fit: cover; }
.stills figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: .5rem;
  font-family: var(--f-slate); font-size: var(--f0); letter-spacing: .16em; color: var(--paper);
  background: linear-gradient(to top, rgba(13,11,9,.88), transparent);
}
.stills-note { font-family: var(--f-hand); color: var(--ink-2); font-size: var(--f2); margin: 0; max-width: 44ch; }
.stills--one { grid-template-columns: 1fr; }
.stills--one figure { aspect-ratio: 21 / 9; }
@media (max-width: 34rem) {
  .stills { grid-template-columns: repeat(2, 1fr); }
  .stills figure:last-child { display: none; }
}

/* 註記：頂線 + 左欄 Courier 標籤 + 手寫正文（v2b 的 .note 結構）
   刻意不用側邊色條 —— 那是 AI 生成 UI 最可靠的單一特徵 */
.disclosure {
  margin-top: var(--s4); padding-top: var(--s2);
  border-top: 1px solid var(--hair);
  display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.5rem; align-items: start;
  font-family: var(--f-hand); font-size: var(--f2); color: var(--ink-2); line-height: 1.85;
}
.disclosure .tag { border: 0; padding: .5rem 0 0; color: var(--accent); font-weight: 700; letter-spacing: .2em; }
.disclosure p { max-width: 44ch; margin: 0; }
@media (max-width: 30rem) { .disclosure { grid-template-columns: 1fr; } }

/* ── 報價器 ───────────────────────────────────────────── */
.ask { display: grid; gap: var(--s2); margin-bottom: var(--s4); }
.q-label { display: block; font-family: var(--f-slate); font-weight: 700; font-size: var(--f0); letter-spacing: .2em; color: var(--ink-3); margin-bottom: var(--s1); }
.opts { display: flex; flex-wrap: wrap; gap: 2px; }
.opts button {
  font: inherit; font-size: var(--f2); cursor: pointer;
  padding: 1rem 1.5rem; background: rgba(239,230,212,.045);
  color: var(--ink-2); border: 0;
  transition: background .2s ease, color .2s ease;
}
.opts button:hover { background: rgba(239,230,212,.1); color: var(--paper); }
.opts button[aria-pressed="true"] { background: var(--accent); color: var(--bg); font-weight: 700; }
.opts button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.result { border-top: 1px solid var(--hair); padding: var(--s3) 0; }
.result.hi { background: rgba(239,230,212,.045); padding: var(--s3) var(--s2); margin-top: var(--s3); border-top: 1px solid var(--accent); }
.r-title { font-family: var(--f-title); font-weight: 700; font-size: var(--f4); margin: 0 0 var(--s2); display: flex; align-items: center; gap: .7rem; }
.r-num { font-family: var(--f-slate); color: var(--accent); font-size: var(--f4); }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { border-collapse: collapse; width: 100%; min-width: 34rem; }
th, td { text-align: left; padding: 1rem .5rem; border-bottom: 1px solid var(--hair); vertical-align: top; }
thead th { font-family: var(--f-slate); font-weight: 700; font-size: var(--f0); letter-spacing: .18em; color: var(--ink-3); }
tbody th { font-weight: 400; }
.m-name { display: block; font-family: var(--f-body); font-weight: 700; font-size: var(--f2); }
.m-note { display: block; font-family: var(--f-hand); font-size: var(--f1); color: var(--ink-3); margin-top: .25rem; }
td.num, th.num { font-family: var(--f-slate); white-space: nowrap; }
td.strong { font-weight: 700; color: var(--accent); }
.unit { font-size: var(--f0); color: var(--ink-3); margin-left: .2rem; }

.tag { display: inline-block; font-family: var(--f-slate); font-size: var(--f0); letter-spacing: .12em; padding: .25rem .5rem; border: 1px solid currentColor; white-space: nowrap; }
.tag.ok { color: var(--teach); text-decoration: none; }
.tag.ok:hover { background: var(--teach); color: var(--bg); }
.tag.est { color: var(--rec); }

.basis { font-size: var(--f2); color: var(--ink-2); margin: var(--s2) 0 0; max-width: 46ch; }
.basis b { color: var(--paper); font-family: var(--f-slate); }

.honesty {
  margin: var(--s2) 0 0; padding: var(--s2);
  border-top: 1px solid var(--rec); background: rgba(228,121,74,.07);
  font-size: var(--f2); color: var(--ink-2); font-family: var(--f-hand); line-height: 1.9; max-width: 48ch;
}
.honesty b { font-family: var(--f-body); color: var(--rec); }

.big { font-family: var(--f-slate); font-weight: 700; font-size: var(--f6); color: var(--accent); margin: 0; }
.foot-note { font-size: var(--f1); color: var(--ink-3); margin-top: var(--s4); max-width: 52ch; }

.pricing-note { margin-top: var(--s3); padding: var(--s3) var(--s2); background: rgba(239,230,212,.035); }
.pricing-note p { margin: 0 0 var(--s2); font-size: var(--f2); color: var(--ink-2); max-width: 46ch; }
.pricing-note p:last-child { margin-bottom: 0; }
.pricing-note b { color: var(--accent); font-family: var(--f-slate); font-size: var(--f4); }

/* ── Footer ───────────────────────────────────────────── */
.foot { border-top: 1px solid var(--hair); padding: var(--s3) 0 var(--s4); margin-top: var(--s5); }
.foot-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
.handle { font-family: var(--f-slate); font-weight: 700; font-size: var(--f3); letter-spacing: .04em; margin: 0 0 .5rem; }
.foot .hand { margin: 0; font-size: var(--f1); color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .work-media video { display: none; }
  .work { opacity: 1 !important; transform: none !important; }
  body::after { display: none; }
}