/* ============================================================
   Course Kit 官網 — Blog 列表頁專屬樣式（page-blog.css）
   跟 site.css 一起載入，site.css 在前。

   2026-08-08 改版（Lucy 選 _demo-blog-paper.html 的方向 C）：
   列表從「三欄縮圖卡」改成「紙感抬頭＋白底橫列」。

   為什麼不用縮圖卡了：六篇裡有四篇是還沒定案的佔位卡，卡片版型把空洞放大成
   四個灰色斜線方塊佔掉整個畫面，看起來像壞掉。橫列一行一篇，佔位的縮成一行就過去了。

   為什麼橫線只鋪在抬頭：Lucy 要的是「一進來像美式黃底橫線筆記本」。整頁鋪線的版本
   （demo 的方向 B）實測正文整段壓在線上，中文字高不齊、長文讀起來累，跟「閱讀友善」相反。
   線只當抬頭的紙質，往下正文回白底，眼睛不用一直跟線打架。

   紙色 #fbf7e4／框線 #e9e2c4 沒有進 site.css 的 :root。這兩個色只有 blog 兩頁用，
   全站 token 目前的 --warm(#f4f3d2) 偏綠、當大面積底色會濁，不硬套。
   2026-08-09 dark mode 這批：升成本檔（跟 page-article.css 同步各留一份）的
   --paper-* page-scoped token，理由不是「頁數變多」而是 dark mode 需要——紙感要在
   深色主題下維持「暖紙」觀感而非跟著翻成一般深藍卡片色，所以两檔各自的 :root 開頭
   定義 light 值、檔尾 :root[data-theme="dark"] 覆寫 dark 值，沒有升進 site.css 的
   全站 :root（範圍仍限這兩頁）。
   ============================================================ */

/* ---------- 紙感（paper）色板：page-article.css 同步定義同一份 token，兩檔各留一份
   （CSS custom property 重複定義是 idempotent，不會互相打架）。這組色只有這兩檔的
   「紙感」裝飾用，跟全站 --surface／--heading 分開，因為它要在 dark mode 仍然讀成
   「暖色紙」而不是翻成一般深藍卡片色。light 值＝改動前的原始 hex，數值不變，
   零視覺變化；dark 值見檔案末尾 :root[data-theme="dark"] 覆寫區塊。 ---------- */
:root{
  --paper-bg:#fbf7e4; --paper-bg-2:#f3ecd6;
  --paper-border:#e9e2c4; --paper-border-2:#e2d9b4;
  --paper-rule:rgba(105,125,155,.24);
  --paper-ink:#5f5a45; --paper-ink-muted:#9a9276; --paper-ink-soft:#8a7b56;
  --paper-accent:#a08f4e;
  --paper-tag-bg:#fff; --paper-chip-bg:rgba(255,255,255,.86);
}

/* ---------- 頁首（固定 header 下方的留白，不是 section，間距比 landing 的
   section 窄，內容密度較高的頁面不需要行銷頁那麼大的留白） ---------- */
.page-top h1{margin-top:6px}
.page-top .lead{margin-top:14px;max-width:62ch}

/* ---------- 紙感抬頭 ---------- */
/* 翻頁進場：整張紙以上緣為軸掀下來，像翻開筆記本封面。
   用 CSS animation 不用 site-motion.js 的 .rv，因為這張紙在首屏、載入就該動，
   不需要 IntersectionObserver 等進場；用 both 保留結束狀態，JS 沒載入也不會卡在透明。
   紙落定之後，.bs-body 掛的 .rv-group 才讓每一行逐條浮現，兩段接在一起。 */
@keyframes paperFlip{
  from{opacity:0;transform:perspective(1400px) rotateX(-13deg) translateY(-10px)}
  to{opacity:1;transform:perspective(1400px) rotateX(0) translateY(0)}
}
.blog-sheet{max-width:880px;margin:20px auto 0;padding-bottom:var(--pad-sec);
  transform-origin:top center;animation:paperFlip .68s cubic-bezier(.22,.85,.3,1) both}
/* overflow:hidden 是給下面那條齒孔用的。::before 是直角矩形，貼齊 padding-box 的 left:0/right:0，
   但紙的左右上角是 28px 圓角，兩端會凸到圓弧外面（Lucy 截圖圈的就是這個）。靠父層裁掉。 */
.bs-head{position:relative;overflow:hidden;padding:32px 36px 28px;background:var(--paper-bg);
  border:1px solid var(--paper-border);border-radius:var(--r-lg) var(--r-lg) 0 0;
  background-image:repeating-linear-gradient(180deg,transparent 0 28.4px,var(--paper-rule) 28.4px 30px);
  background-position:0 22px}
/* 頂緣撕頁齒孔。純裝飾，用 ::before 疊上去，不影響內距 */
.bs-head::before{content:"";position:absolute;left:0;right:0;top:0;height:11px;
  background:repeating-linear-gradient(90deg,var(--paper-border-2) 0 7px,transparent 7px 24px);
  border-radius:var(--r-lg) var(--r-lg) 0 0;opacity:.7}
.bs-head .eyebrow{position:relative;color:var(--paper-accent);margin-bottom:0}
.bs-head h1{margin-top:8px;font-size:clamp(29px,4.4vw,46px)}
/* lead 讓橫線直接穿過去，不加遮罩。試過用紙色底把線蓋掉，但 lead 有 max-width，
   遮罩只到文字寬度、右邊照樣有線，抬頭區被切成「一塊白＋一塊有線」的階梯，比壓線難看得多。
   線的 alpha 壓在 .24，15.5px 的中文疊上去仍然清楚。 */
.bs-head .lead{margin-top:10px;max-width:46ch;color:var(--paper-ink)}

/* ---------- 白底文章列表（背景改吃 --surface 而非固定不變的 --card，dark 模式下才會
   跟著翻成深色；邊框沿用 --paper-border，跟上面紙感抬頭的邊框顏色一致，兩塊視覺上
   仍是同一張卡片的接續，不會在邊緣出現顏色斷層） ---------- */
.bs-body{background:var(--surface);border:1px solid var(--paper-border);border-top:0;
  border-radius:0 0 var(--r-lg) var(--r-lg);padding:4px 36px 24px}
.prow{display:grid;grid-template-columns:70px minmax(0,1fr) 18px;gap:18px;align-items:start;
  padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none}
.prow:last-child{border-bottom:0}
/* 日期一行寫完。試過月／日拆兩行（Kinto 那種左欄日期），中文版兩行只有四個數字，
   上下拆開反而像被截斷。 */
.prow-date{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px;
  color:var(--brand-text);font-weight:700;line-height:1.5;padding-top:7px;letter-spacing:.03em}
.prow-main{min-width:0;display:block}
.prow .tag{display:inline-block;font-size:12px;font-weight:800;color:var(--brand-text);
  background:var(--brand-tint-2);border-radius:999px;padding:2px 10px}
.prow h2{font-size:var(--fs-xl);line-height:1.35;margin:7px 0 5px;color:var(--heading);
  transition:color .18s}
.prow p{font-size:var(--fs-md);color:var(--sub);margin:0}
.prow-go{width:18px;height:18px;margin-top:9px;fill:none;stroke:var(--brand-deep);
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .18s}
a.prow:hover h2{color:var(--brand-text)}
a.prow:hover .prow-go{transform:translateX(3px)}
a.prow:focus-visible{outline:2px solid var(--brand-deep);outline-offset:4px;border-radius:var(--r-sm)}

/* 佔位列（選題待定）。整列淡化，沒有箭頭、沒有 hover，一眼看得出點不動 */
.prow.is-placeholder .tag{color:var(--faint);background:#f0f2f3}
.prow.is-placeholder h2{color:#a9b0b5}
.prow.is-placeholder p{color:#b4babe}

/* 全站慣例：reduce 覆寫放檔案末段 */
@media (prefers-reduced-motion:reduce){
  .blog-sheet{animation:none}
}

@media (max-width:640px){
  .blog-sheet{margin-top:14px}
  .bs-head{padding:26px 20px 22px}
  .bs-body{padding:2px 20px 18px}
  /* 手機把日期收到標題上方，橫排三欄在窄螢幕會把標題擠成一字一行 */
  .prow{grid-template-columns:1fr;gap:6px;padding:18px 0}
  .prow-date{padding-top:0}
  .prow-go{display:none}
}

/* ---------- dark mode ----------
   .bs-body 已在上方原地把 background 換成 var(--surface)、.prow h2 的 color 換成
   var(--heading)，light 值不變，dark 會自動接上 site.css 的覆寫，這裡不用重複列。
   .prow.is-placeholder 那三條（.tag／h2／p）刻意維持原樣不動：.tag 用 var(--faint)
   文字（會跟著主題變亮）配固定淺灰 #f0f2f3 底，跟 h2/p 兩顆固定灰階字一樣，都是
   「選題待定」列刻意做的低對比淡化態，dark 模式下這排本來就該長得不起眼，維持
   跟改動前一致的視覺（不在這次 dark mode 任務的更動範圍內）。
   這裡只覆寫「紙感」token（--paper-*），跟 page-article.css 末尾同一份數值、
   同一套對比估算，見該檔案的註解。 ---------- */
:root[data-theme="dark"]{
  --paper-bg:#241f16; --paper-bg-2:#2c2418;
  --paper-border:#4a3f2a; --paper-border-2:#5c4e34;
  --paper-rule:rgba(220,205,160,.16);
  --paper-ink:#EFE6C9; --paper-ink-muted:#C9BD98; --paper-ink-soft:#D8CCA8;
  --paper-accent:#D9C177;
  --paper-tag-bg:#362d1e; --paper-chip-bg:rgba(255,255,255,.08);
}