/* ==========================================================
   夢櫃 dreamvault.cc ── 共用樣式
   v1.0｜2026-08-15
   配色沿用既有案號頁：暖黑底、舊金、乾血紅
   ========================================================== */

:root{
  --bg:        #0a0806;
  --bg2:       #100c08;
  --bg3:       #16110b;
  --ink:       #ece2d2;
  --ink-2:     #b7ab99;
  --ink-dim:   #7f7566;
  --line:      #2a2018;
  --line-2:    #3a2d20;
  --red:       #7a1f16;
  --red-hot:   #c6462f;
  --gold:      #c9a35b;
  --gold-dim:  #8a7038;
  --serif: "Noto Serif TC","Source Han Serif TC","Songti TC","PMingLiU",Georgia,serif;
  --read: 680px;
  --wide: 1040px;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--serif);line-height:1.95;letter-spacing:.03em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

/* ── 全域氛圍層 ───────────────────────────── */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:90;
  background:
    radial-gradient(120% 70% at 50% -10%, rgba(201,163,91,.055), transparent 60%),
    radial-gradient(130% 95% at 50% 100%, transparent 52%, rgba(122,31,22,.15) 100%);
}
.grain{
  position:fixed;inset:0;pointer-events:none;z-index:91;opacity:.045;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

/* ── 閱讀進度 ─────────────────────────────── */
#progress{
  position:fixed;top:0;left:0;height:2px;width:0;z-index:95;
  background:linear-gradient(90deg,var(--gold-dim),var(--gold));
  box-shadow:0 0 8px rgba(201,163,91,.5);transition:width .12s linear;
}

/* ── 頁首 ─────────────────────────────────── */
.site-head{
  position:sticky;top:0;z-index:80;
  background:rgba(10,8,6,.86);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.site-head .inner{
  max-width:var(--wide);margin:0 auto;padding:12px 22px;
  display:flex;align-items:center;gap:14px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand img{width:26px;height:26px;border-radius:3px;display:block;opacity:.9}
.brand b{font-size:16px;letter-spacing:.4em;font-weight:600;padding-left:2px}
.site-head nav{margin-left:auto;display:flex;gap:20px}
.site-head nav a{
  color:var(--ink-dim);text-decoration:none;font-size:13px;letter-spacing:.2em;
  padding:4px 0;border-bottom:1px solid transparent;transition:.25s;white-space:nowrap;
}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--gold);border-bottom-color:var(--gold-dim)}

/* 中英切換 */
.lang{display:flex;align-items:center;gap:7px;margin-left:6px;padding-left:16px;border-left:1px solid var(--line)}
.lang a{
  font-size:12px;letter-spacing:.14em;color:var(--ink-dim);text-decoration:none;
  padding:3px 8px;border:1px solid transparent;border-radius:2px;transition:.25s;
}
.lang a:hover{color:var(--gold)}
.lang a.on{color:var(--gold);border-color:var(--line-2);background:rgba(201,163,91,.07)}

/* 英文頁的字距與行高：中文的設定套在拉丁字上會太鬆 */
html[lang="en"] body{letter-spacing:.005em;line-height:1.85}
html[lang="en"] .prose p{font-size:17px}
html[lang="en"] .hero-copy h1{letter-spacing:.04em}
html[lang="en"] .ep-card h3{letter-spacing:.02em}
html[lang="en"] .ep-head h1{letter-spacing:.06em}
html[lang="en"] figure.ill figcaption{letter-spacing:.06em}

/* ── 版面容器 ─────────────────────────────── */
.wide{max-width:var(--wide);margin:0 auto;padding:0 22px}
.read{max-width:var(--read);margin:0 auto;padding:0 22px}

/* ── 首頁主視覺 ───────────────────────────── */
.hero{position:relative;padding:0;margin-bottom:8px}
.hero-img{position:relative;height:min(62vh,520px);overflow:hidden}
.hero-img img{width:100%;height:100%;object-fit:cover;object-position:center 42%;filter:saturate(.8) contrast(1.05)}
.hero-img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,8,6,.55) 0%,rgba(10,8,6,.15) 35%,rgba(10,8,6,.9) 88%,var(--bg) 100%);
}
.hero-copy{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  max-width:var(--wide);margin:0 auto;padding:0 22px 34px;
}
.kicker{
  color:var(--gold);font-size:12px;letter-spacing:.45em;margin-bottom:14px;
}
.hero-copy h1{
  margin:0 0 14px;font-size:clamp(30px,6.2vw,50px);font-weight:600;
  letter-spacing:.14em;line-height:1.35;
  text-shadow:0 2px 24px rgba(0,0,0,.8);
}
.logline{
  margin:0;color:var(--ink-2);font-size:clamp(14px,2.6vw,17px);
  max-width:34em;line-height:1.9;
}

/* ── 區塊標題 ─────────────────────────────── */
.sec{padding:56px 0}
.sec-t{
  display:flex;align-items:center;gap:16px;margin:0 0 30px;
  font-size:14px;letter-spacing:.42em;color:var(--gold);font-weight:600;
}
.sec-t::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}

/* ── 內文段落 ─────────────────────────────── */
.prose p{margin:0 0 1.55em;font-size:17.5px;color:var(--ink)}
.prose p.dim{color:var(--ink-2)}
.intro p{font-size:16.5px;color:var(--ink-2);margin:0 0 1.5em;max-width:40em}
.intro strong{color:var(--ink);font-weight:600}

/* ── 集數清單 ─────────────────────────────── */
.ep-list{display:grid;gap:18px}
.ep-card{
  display:grid;grid-template-columns:210px 1fr;gap:22px;
  background:var(--bg2);border:1px solid var(--line);border-radius:3px;
  text-decoration:none;color:inherit;overflow:hidden;transition:.3s;
}
.ep-card:hover{border-color:var(--gold-dim);background:var(--bg3);transform:translateY(-2px)}
.ep-card .thumb{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.ep-card .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.75) brightness(.88);transition:.5s}
.ep-card:hover .thumb img{filter:saturate(.95) brightness(1);transform:scale(1.04)}
.ep-card .body{padding:20px 22px 20px 0;display:flex;flex-direction:column;justify-content:center}
.ep-no{font-size:11px;letter-spacing:.35em;color:var(--gold);margin-bottom:8px}
.ep-card h3{margin:0 0 10px;font-size:21px;letter-spacing:.1em;font-weight:600}
.ep-card p{margin:0;color:var(--ink-dim);font-size:14.5px;line-height:1.85}
.ep-meta{margin-top:12px;font-size:12px;color:var(--ink-dim);letter-spacing:.15em}
.ep-meta span+span::before{content:"·";margin:0 8px;color:var(--line-2)}

.ep-card.soon{opacity:.5;pointer-events:none;grid-template-columns:210px 1fr}
.ep-card.soon .thumb{background:var(--bg3);display:flex;align-items:center;justify-content:center}
.ep-card.soon .thumb::after{content:"？";color:var(--line-2);font-size:44px}

/* ── 閱讀頁頁首 ───────────────────────────── */
.ep-head{padding:54px 0 30px;text-align:center;border-bottom:1px solid var(--line)}
.ep-head .ep-no{margin-bottom:14px}
.ep-head h1{margin:0 0 16px;font-size:clamp(27px,6vw,40px);letter-spacing:.2em;font-weight:600}
.ep-head .ep-meta{color:var(--ink-dim)}

/* ── 影片區 ───────────────────────────────── */
.video-block{margin:38px 0 46px}
.video-label{
  font-size:12px;letter-spacing:.35em;color:var(--gold);margin-bottom:14px;text-align:center;
}
.yt{
  position:relative;aspect-ratio:16/9;background:#000;border:1px solid var(--line);
  border-radius:3px;overflow:hidden;cursor:pointer;
}
.yt img{width:100%;height:100%;object-fit:cover;filter:brightness(.62) saturate(.8);transition:.4s}
.yt:hover img{filter:brightness(.78) saturate(.95)}
.yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt .play{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:14px;pointer-events:none;
}
.yt .play svg{width:66px;height:66px;filter:drop-shadow(0 3px 14px rgba(0,0,0,.8));transition:.3s}
.yt:hover .play svg{transform:scale(1.08)}
.yt .play em{
  font-style:normal;font-size:12px;letter-spacing:.35em;color:var(--ink-2);
  text-shadow:0 1px 8px #000;
}
.video-pending{
  aspect-ratio:16/9;border:1px dashed var(--line-2);border-radius:3px;background:var(--bg2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;
  color:var(--ink-dim);font-size:14px;letter-spacing:.15em;text-align:center;padding:20px;
}
.video-pending code{
  color:var(--gold-dim);font-family:ui-monospace,Menlo,Consolas,monospace;font-size:12px;letter-spacing:0;
}
.video-links{
  margin-top:14px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap;
}
.video-links a{
  color:var(--ink-dim);text-decoration:none;font-size:12.5px;letter-spacing:.18em;
  border:1px solid var(--line);border-radius:2px;padding:8px 16px;transition:.25s;
}
.video-links a:hover{color:var(--gold);border-color:var(--gold-dim);background:rgba(201,163,91,.06)}

/* ── 內文插圖 ─────────────────────────────── */
figure.ill{
  margin:38px 0;position:relative;
}
figure.ill img{
  width:100%;display:block;border-radius:2px;
  border:1px solid var(--line);
  filter:saturate(.82) contrast(1.03);
  background:#000;
}
figure.ill figcaption{
  margin-top:10px;font-size:12px;color:var(--ink-dim);letter-spacing:.16em;text-align:center;
}
/* 全幅插圖：跨出閱讀欄寬一點，做呼吸感 */
figure.ill.bleed{margin-left:-40px;margin-right:-40px}
@media(max-width:820px){figure.ill.bleed{margin-left:0;margin-right:0}}

/* ── 分隔 ─────────────────────────────────── */
.div{
  display:flex;align-items:center;justify-content:center;gap:14px;
  margin:46px 0;color:var(--gold-dim);font-size:11px;letter-spacing:.5em;
}
.div::before,.div::after{content:"";width:56px;height:1px;background:var(--line-2)}

/* ── 集末：註記卡 ─────────────────────────── */
.note{
  border:1px solid var(--line);background:var(--bg2);border-radius:3px;
  padding:24px 26px;margin:44px 0;
}
.note h4{margin:0 0 14px;font-size:12px;letter-spacing:.35em;color:var(--gold);font-weight:600}
.note ul{margin:0;padding-left:1.2em;color:var(--ink-dim);font-size:14px;line-height:2}
.note li{margin-bottom:4px}

/* ── 上下集導覽 ───────────────────────────── */
.ep-nav{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:48px 0 20px}
.ep-nav a{
  border:1px solid var(--line);background:var(--bg2);border-radius:3px;
  padding:18px 20px;text-decoration:none;color:var(--ink-2);transition:.25s;
}
.ep-nav a:hover{border-color:var(--gold-dim);color:var(--ink);background:var(--bg3)}
.ep-nav .lab{display:block;font-size:11px;letter-spacing:.3em;color:var(--ink-dim);margin-bottom:7px}
.ep-nav .tit{font-size:16px;letter-spacing:.08em}
.ep-nav a.next{text-align:right}
.ep-nav .off{opacity:.4;pointer-events:none}

/* ── 案號入口 ─────────────────────────────── */
.vault{
  border:1px solid var(--line);background:
    linear-gradient(180deg,var(--bg2),var(--bg));
  border-radius:3px;padding:34px 28px;text-align:center;position:relative;overflow:hidden;
}
.vault::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 120% at 50% 0%,rgba(201,163,91,.07),transparent 65%);
}
.vault > *{position:relative}
.vault h3{margin:0 0 12px;font-size:17px;letter-spacing:.3em;color:var(--gold);font-weight:600}
.vault p{margin:0 auto 20px;color:var(--ink-dim);font-size:14.5px;max-width:30em}
.btn{
  display:inline-block;text-decoration:none;font-family:var(--serif);
  border:1px solid var(--gold-dim);color:var(--gold);
  padding:13px 34px;border-radius:2px;letter-spacing:.3em;font-size:14px;transition:.25s;
}
.btn:hover{background:rgba(201,163,91,.1);border-color:var(--gold)}

/* ── 頁尾 ─────────────────────────────────── */
.site-foot{
  border-top:1px solid var(--line);margin-top:70px;padding:38px 0 54px;
  color:var(--ink-dim);font-size:12px;letter-spacing:.2em;text-align:center;
}
.site-foot a{color:var(--ink-dim);text-decoration:none;border-bottom:1px solid var(--line)}
.site-foot a:hover{color:var(--gold)}
.site-foot .row{margin-bottom:12px;display:flex;gap:18px;justify-content:center;flex-wrap:wrap}

/* ── 行動版 ───────────────────────────────── */
@media(max-width:720px){
  body{line-height:1.9}
  .prose p{font-size:17px}
  .ep-card{grid-template-columns:1fr}
  .ep-card .body{padding:18px 20px 22px}
  .ep-card.soon{grid-template-columns:1fr}
  .ep-card.soon .thumb{aspect-ratio:16/6}
  .site-head .inner{padding:11px 18px;gap:10px}
  .site-head nav{gap:14px}
  .site-head nav a{font-size:12px;letter-spacing:.12em}
  .brand b{font-size:14px;letter-spacing:.3em}
  .sec{padding:44px 0}
  .ep-nav{grid-template-columns:1fr}
  .ep-nav a.next{text-align:left}
  .hero-img{height:min(56vh,420px)}
}

/* ── 動效偏好 ─────────────────────────────── */
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  html{scroll-behavior:auto}
}

/* ── 淡入 ─────────────────────────────────── */
.fade{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.fade.in{opacity:1;transform:none}