/* =========================================================
   deck.vista.tw · 簡報典藏
   純靜態，零框架。色票與版式沿用 vista.tw 的暖羊皮紙 × 磚紅，
   但 hero 使用獨立的 --hero-* token，不綁 --primary：
   把 hero 綁在主色上，深色模式會翻出一塊亮紅底配深色字。
   ========================================================= */

:root{
  /* 紙與墨 */
  --paper:#FAF6EF;
  --paper-2:#F3ECE0;
  --paper-3:#EBE2D3;
  --ink:#1E1A17;
  --ink-2:#4B423B;
  --ink-3:#6A6058;          /* 對 --paper 4.97、對 --paper-2 4.68、對 --paper-3 4.36 → 僅用於 ≥16px */
  --line:rgba(30,26,23,.10);
  --line-2:rgba(30,26,23,.18);

  /* 品牌 */
  --primary:#C62828;        /* 磚紅，對 --paper 6.02 */
  --primary-dp:#9E1F1F;
  --accent:#944D0E;         /* 琥珀土，對 --paper 5.86、--paper-2 5.38、--paper-3 4.91 */
  --on-primary:#FFF6F0;     /* 壓在 --primary 上的字，對 #C62828 5.27 */

  /* hero 獨立色系 */
  --hero-bg:#221A17;
  --hero-bg-2:#33231E;
  --hero-ink:#FAF6EF;
  --hero-ink-2:rgba(250,246,239,.72);
  --hero-glow:#E8894F;

  --shadow:0 1px 0 rgba(30,26,23,.05);
  --wrap:760px;
  --ease:cubic-bezier(.23,1,.32,1);

  --f-cjk:'Noto Serif TC',"Songti TC",serif;
  --f-body:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang TC","Noto Sans TC","Microsoft JhengHei",sans-serif;
  --f-mono:"SFMono-Regular",Menlo,Consolas,"PingFang TC","Noto Sans TC",monospace;
}

@media (prefers-color-scheme:dark){
  :root{
    --paper:#17130F;
    --paper-2:#1F1A15;
    --paper-3:#292219;
    --ink:#F6F0E6;
    --ink-2:#D6CCBE;
    --ink-3:#A79C8D;        /* 對 --paper 8.16、對 --paper-3 6.55 */
    --line:rgba(246,240,230,.12);
    --line-2:rgba(246,240,230,.20);
    --primary:#EC6D5E;      /* 深色模式提亮版，對 --paper 6.87 */
    --primary-dp:#F0897C;
    --accent:#E0A050;
    --on-primary:#17130F;   /* 深色模式的 --primary 是提亮版珊瑚紅，必須改壓深色字：#FFF6F0 壓上去只有 2.85 */
    --hero-bg:#120E0B;
    --hero-bg-2:#231813;
  }
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-body);font-size:17px;line-height:1.75;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit}

/* ── 進場：一次編排好的錯開淡入，不做逐元件的零星動畫 ── */
.reveal{opacity:0;transform:translateY(14px);animation:rise .62s var(--ease) forwards;animation-delay:calc(var(--d,0)*62ms)}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){
  .reveal{animation:none;opacity:1;transform:none}
  .beam,.mote{animation:none!important}
}

/* ═══════════ HERO ═══════════ */
.deck-hero{
  position:relative;overflow:hidden;isolation:isolate;
  background:radial-gradient(120% 140% at 78% 8%,var(--hero-bg-2) 0%,var(--hero-bg) 62%);
  color:var(--hero-ink);padding:106px 24px 92px;
}
/* 放映光束：兩道低透明度的梯形光，緩慢擺動 */
.deck-hero-beams{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.55}
.beam{
  position:absolute;top:-28%;left:50%;width:34vw;height:150%;
  background:linear-gradient(to bottom,rgba(232,137,79,.20),rgba(232,137,79,0) 72%);
  transform-origin:50% 0;filter:blur(2px);
}
.beam.b1{transform:translateX(-118%) rotate(-13deg);animation:sway 19s ease-in-out infinite}
.beam.b2{transform:translateX(6%) rotate(11deg);animation:sway 25s ease-in-out infinite reverse}
@keyframes sway{
  0%,100%{filter:blur(2px);opacity:.9}
  50%{filter:blur(6px);opacity:.55}
}
/* 漂浮的 16:9 片框 */
.deck-hero-frames{position:absolute;inset:0;z-index:-1;pointer-events:none;color:var(--hero-glow)}
.mote{fill:none;stroke:currentColor;stroke-width:1;opacity:.22;animation:drift 28s ease-in-out infinite}
.mote:nth-of-type(2){animation-duration:34s;animation-delay:-6s;opacity:.16}
.mote:nth-of-type(3){animation-duration:41s;animation-delay:-14s;opacity:.12}
@keyframes drift{0%,100%{transform:translate(0,0)}50%{transform:translate(14px,-18px)}}

.deck-hero-inner{max-width:var(--wrap);margin:0 auto;position:relative}
.deck-hero-kicker{
  margin:0 0 18px;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.22em;
  text-transform:uppercase;color:var(--hero-ink-2);
}
.deck-hero-title{
  margin:0;font-family:var(--f-cjk);font-weight:700;
  font-size:clamp(42px,6.6vw,72px);line-height:1.2;letter-spacing:.02em;
}
.deck-hero-rule{width:76px;height:3px;background:var(--hero-glow);margin:28px 0 26px;border-radius:2px}
.deck-hero-lead{margin:0;max-width:610px;font-size:18px;line-height:1.95;color:var(--hero-ink-2)}

/* ═══════════ 清單 ═══════════ */
.deck-section{max-width:var(--wrap);margin:0 auto;padding:78px 24px 30px}
.deck-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:22px}
.deck-section-label{margin:0;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
.deck-section-count{font-family:var(--f-mono);font-size:13px;color:var(--ink-3)}

.deck-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 30px}
.deck-filter button{
  font:inherit;font-size:14px;line-height:1;padding:9px 15px;border-radius:999px;
  border:1px solid var(--line-2);background:transparent;color:var(--ink-2);cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease),color .22s var(--ease);
}
.deck-filter button:hover{border-color:var(--primary);color:var(--primary)}
.deck-filter button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.deck-filter .n{opacity:.6;margin-left:6px;font-family:var(--f-mono);font-size:12px}

.deck-list{border-top:1px solid var(--line)}
.deck-item{
  position:relative;display:flex;gap:20px;align-items:flex-start;
  padding:26px 0;border-bottom:1px solid var(--line);text-decoration:none;color:inherit;
  transition:color .22s var(--ease);
}
/* 溢出 16px 的底色：hover 時整列往兩側呼吸一格，不變成圓角卡片 */
.deck-item::before{
  content:'';position:absolute;inset:0 -16px;border-radius:4px;background:var(--paper-2);
  opacity:0;transition:opacity .22s var(--ease);z-index:-1;
}
.deck-item:hover::before,.deck-item:focus-visible::before{opacity:1}
.deck-item:hover .deck-item-title{color:var(--primary)}
.deck-item:hover .deck-item-go{opacity:1;transform:translateX(0)}
.deck-item-index{
  flex:0 0 auto;min-width:30px;padding-top:5px;
  font-family:var(--f-mono);font-size:13px;color:var(--ink-3);letter-spacing:.04em;
}
.deck-item-body{flex:1 1 auto;min-width:0}
.deck-item-head{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.deck-item-title{margin:0;font-family:var(--f-cjk);font-weight:700;font-size:21px;line-height:1.5;transition:color .22s var(--ease)}
.deck-item-lock{
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;padding:3px 9px;border-radius:999px;
  border:1px solid var(--line-2);color:var(--ink-3);white-space:nowrap;
}
.deck-item-desc{margin:9px 0 0;font-size:15.5px;line-height:1.85;color:var(--ink-2)}
.deck-item-meta{margin:11px 0 0;display:flex;flex-wrap:wrap;gap:8px 16px;font-family:var(--f-mono);font-size:12.5px;color:var(--ink-3)}
.deck-item-go{
  flex:0 0 auto;align-self:center;font-size:20px;color:var(--primary);
  opacity:0;transform:translateX(-6px);transition:opacity .22s var(--ease),transform .22s var(--ease);
}
.deck-empty{text-align:center;color:var(--ink-3);padding:46px 0;font-size:15.5px}

/* ═══════════ CTA 與頁尾 ═══════════ */
.deck-cta{max-width:var(--wrap);margin:34px auto 0;padding:0 24px}
.deck-cta-inner{border:1px solid var(--line-2);border-radius:4px;padding:38px 34px;background:var(--paper-2)}
.deck-cta-title{margin:0;font-family:var(--f-cjk);font-weight:700;font-size:23px;line-height:1.55}
.deck-cta-lead{margin:11px 0 22px;font-size:15.5px;line-height:1.85;color:var(--ink-2)}
.deck-cta-link{
  display:inline-block;font-size:15px;padding:12px 24px;border-radius:999px;text-decoration:none;
  background:var(--primary);color:var(--on-primary);transition:background .22s var(--ease),transform .22s var(--ease);
}
.deck-cta-link:hover,.deck-cta-link:focus-visible{background:var(--primary-dp);transform:translateY(-1px)}

.deck-footer{max-width:var(--wrap);margin:0 auto;padding:52px 24px 66px;font-size:14px;color:var(--ink-3)}
.deck-footer a{color:var(--ink-2);text-underline-offset:3px}
.deck-footer-links{display:flex;flex-wrap:wrap;gap:8px 18px;margin:10px 0 0;padding:0;list-style:none}

:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:3px}

@media (max-width:600px){
  .deck-hero{padding:74px 20px 62px}
  .deck-section{padding:54px 20px 24px}
  .deck-item{gap:14px}
  .deck-item-index{min-width:24px;font-size:12px}
  .deck-item-title{font-size:19px}
  .deck-item-go{display:none}
}