/* ============================================================
   casper-2026
   亮色＝文人雜誌（明體）  /  暗色＝終端機（html.dark）
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;color-scheme:light}
html.dark{color-scheme:dark}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:none}

/* ---------- tokens：亮色（預設） ---------- */
:root{
  --paper:#f7f4ee; --paper-2:#efeae0; --surface:#fbf9f3; --surface-2:#efeae0;
  --ink:#1a1715; --ink-soft:#473f38; --ink-mute:#6b6253; --prose-ink:#1a1610;
  --line:#d8d0c2; --line-strong:#1a1715;
  --accent:#b5332a; --accent-deep:#8f2820; --accent-soft:#f0ddd4; --accent-bright:#b5332a;
  --card-border:var(--line-strong); --card-border-hover:var(--line-strong);
  --card-shadow:5px 5px 0 rgba(26,23,21,.07);
  --card-shadow-hover:8px 8px 0 var(--accent-soft);
  --code-bg:#211d16; --code-ink:#e8e2d2;
  --radius:0px;
  --font-head:'Noto Serif TC',serif;
  --font-body:'Noto Serif TC',serif;
  --font-latin:'Newsreader',Georgia,serif;
  --font-mono:'JetBrains Mono',monospace;
}
/* ---------- tokens：暗色終端 ---------- */
html.dark{
  --paper:#06090a; --paper-2:#0a1011; --surface:#0d1413; --surface-2:#0b110f;
  --ink:#cfe7dc; --ink-soft:#8ea69b; --ink-mute:#5a7068; --prose-ink:#e9f3ed;
  --line:#1a2724; --line-strong:#283a34;
  --accent:#3ce085; --accent-deep:#1f7a4b; --accent-soft:#0f2a1d; --accent-bright:#7df7b5;
  --card-border:rgba(60,224,133,.1); --card-border-hover:rgba(60,224,133,.28);
  --card-shadow:0 14px 44px -28px rgba(0,0,0,.8);
  --card-shadow-hover:0 0 34px -16px rgba(60,224,133,.25),0 20px 50px -30px rgba(0,0,0,.85);
  --code-bg:#0b110f; --code-ink:#cfe7dc;
  --radius:2px;
  --font-head:'Noto Sans TC',system-ui,sans-serif;
  --font-body:'Noto Sans TC',system-ui,sans-serif;
  --font-latin:'JetBrains Mono',monospace;
}

body{
  font-family:var(--font-body);color:var(--ink);background-color:var(--paper);
  line-height:1.62;-webkit-font-smoothing:antialiased;position:relative;min-height:100vh;
  overflow-x:hidden;transition:background-color .4s,color .4s;
}
/* 亮色：純色紙底（仿 03-editorial，不加紋理） */
html:not(.dark) body{background-image:none}

.wrap{max-width:1280px;margin:0 auto;padding:0 24px;position:relative;z-index:2}
.latin{font-family:var(--font-latin)}
.seal{color:var(--accent)} .soft{color:var(--ink-soft)} .mute{color:var(--ink-mute)}

/* ============================================================
   氛圍背景（僅暗色）
   ============================================================ */
.atmos{display:none}
html.dark .atmos{display:block;position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
html.dark .atmos .glow{position:absolute;left:50%;top:34%;width:130vmax;height:130vmax;transform:translate(-50%,-50%);
  background:radial-gradient(circle at center, rgba(60,224,133,.12) 0%, rgba(95,214,232,.055) 32%, transparent 58%);
  animation:breathe 13s ease-in-out infinite;will-change:transform,opacity}
@keyframes breathe{0%,100%{transform:translate(-50%,-50%) scale(.9);opacity:.62}50%{transform:translate(-50%,-50%) scale(1.12);opacity:1}}
html.dark .atmos .grid{position:absolute;inset:0;
  background-image:linear-gradient(rgba(60,224,133,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(60,224,133,.05) 1px,transparent 1px);
  background-size:46px 46px;-webkit-mask-image:radial-gradient(ellipse 95% 78% at 50% 30%,#000 22%,transparent 82%);
  mask-image:radial-gradient(ellipse 95% 78% at 50% 30%,#000 22%,transparent 82%)}
html.dark .atmos .grain{position:absolute;inset:-50%;opacity:.05;animation:flick 3.4s steps(3) infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@keyframes flick{0%,100%{opacity:.042}50%{opacity:.064}}
html.dark .atmos .scan{position:absolute;inset:0;opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 2px,rgba(0,0,0,.2) 3px,rgba(0,0,0,0) 4px)}
html.dark .atmos .vig{position:absolute;inset:0;background:radial-gradient(ellipse 112% 102% at 50% 38%,transparent 52%,rgba(0,0,0,.5) 100%)}
@media (prefers-reduced-motion: reduce){html.dark .atmos .glow,html.dark .atmos .grain{animation:none}}

/* ============================================================
   報頭日期帶（亮色）
   ============================================================ */
.dateline{border-bottom:1px solid var(--line);background:var(--paper-2);position:relative;z-index:3}
.dateline .in{max-width:1280px;margin:0 auto;padding:6px 24px;display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-family:var(--font-latin);font-style:italic;font-size:.78rem;color:var(--ink-mute);letter-spacing:.02em}
.dateline .in .c{font-family:var(--font-head);font-style:normal;letter-spacing:.28em;text-transform:uppercase;font-size:.68rem;color:var(--accent)}
html.dark .dateline{display:none}

/* ============================================================
   導覽列
   ============================================================ */
.topbar{position:sticky;top:0;z-index:40;background:var(--paper);border-bottom:3px double var(--line-strong)}
.nav{max-width:1280px;margin:0 auto;height:62px;display:flex;align-items:center;gap:16px;padding:0 24px;position:relative;z-index:1}
.nav .dots{display:none}
.nav .dots i{width:11px;height:11px;border-radius:50%;display:block}
.nav .dots i:nth-child(1){background:#ff5f57}.nav .dots i:nth-child(2){background:#febc2e}.nav .dots i:nth-child(3){background:#28c840}
.brand{font-family:var(--font-head);font-weight:900;font-size:1.34rem;letter-spacing:.03em;display:flex;align-items:center;gap:9px;white-space:nowrap}
.brand .mk{color:var(--paper);background:var(--accent);width:30px;height:30px;display:grid;place-items:center;font-size:1rem;transform:rotate(-4deg)}
.menu{display:flex;gap:2px;margin-left:6px;flex-wrap:wrap}
.menu a{font-family:var(--font-head);font-size:.95rem;font-weight:500;color:var(--ink-soft);padding:6px 11px;position:relative;transition:color .15s}
.menu a:hover{color:var(--accent)}
.menu a.active{color:var(--ink)}
.menu a.active::after{content:"";position:absolute;left:11px;right:11px;bottom:3px;height:2px;background:var(--accent)}
.nav .grow{flex:1}
.search-trig{display:flex;align-items:center;gap:8px;height:38px;padding:0 13px;border:1px solid var(--line-strong);background:var(--surface);
  color:var(--ink-mute);font-family:var(--font-latin);font-style:italic;font-size:.86rem;transition:.15s}
.search-trig:hover{border-color:var(--accent);color:var(--accent)}
.search-trig kbd{font-family:var(--font-head);font-style:normal;border:1px solid var(--line);padding:1px 6px;font-size:.66rem;border-radius:2px}
.iconbtn{width:38px;height:38px;border:1px solid var(--line-strong);background:var(--surface);display:grid;place-items:center;color:var(--ink-soft);transition:.15s;font-size:1rem}
.iconbtn:hover{border-color:var(--accent);color:var(--accent)}

/* 導覽列：暗色鏡面覆寫 */
html.dark .topbar{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,0) 38%),linear-gradient(180deg,#15271f 0%,#0d1815 52%,#091210 100%);
  border-bottom:1px solid rgba(60,224,133,.18);box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 18px 36px -24px rgba(0,0,0,.9)}
html.dark .topbar::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(105deg,rgba(255,255,255,.1) 0%,rgba(255,255,255,0) 22%,rgba(255,255,255,0) 70%,rgba(95,214,232,.06) 100%)}
html.dark .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(60,224,133,.55),transparent)}
html.dark .nav{height:58px}
html.dark .nav .dots{display:flex;gap:6px;margin-right:2px}
html.dark .brand{font-family:var(--font-mono);font-weight:700;font-size:1rem}
html.dark .brand .mk{border-radius:2px;transform:none}
html.dark .menu a{font-family:var(--font-mono);font-size:.82rem;border-radius:2px}
html.dark .menu a::before{content:"./";color:var(--ink-mute)}
html.dark .menu a.active{color:var(--accent);background:var(--accent-soft)}
html.dark .menu a.active::after{display:none}
html.dark .menu a:hover{color:var(--accent);background:var(--paper-2)}
html.dark .search-trig{font-family:var(--font-mono);font-style:normal;border-color:var(--line-strong)}
html.dark .iconbtn{border-color:var(--line-strong)}
/* 亮色細線收尾（對抗式審查補強）：masthead 與功能 chrome 一律改米色細線 */
html:not(.dark) .search-trig{border-color:var(--line)}
html:not(.dark) .iconbtn{border-color:var(--line)}
html:not(.dark) .post-nav{border-top-color:var(--line);border-bottom-color:var(--line)}
html:not(.dark) .cs-box{border-color:var(--line)}
html:not(.dark) .cs-top{border-bottom-color:var(--line)}

/* ============================================================
   指令列（暗色）
   ============================================================ */
.cmdbar{display:none}
html.dark .cmdbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-family:var(--font-mono);font-size:.82rem;color:var(--ink-soft);padding:18px 2px 8px}
.cmdbar .q::before{content:"$ ";color:var(--accent)}
.cmdbar .cursor{display:inline-block;width:.55em;height:1.05em;background:var(--accent);vertical-align:-.16em;margin-left:2px;animation:blink 1.1s steps(1) infinite;box-shadow:0 0 8px var(--accent)}
@keyframes blink{50%{opacity:0}}
.cmdbar .status{margin-left:auto;display:flex;align-items:center;gap:8px;color:var(--ink-mute)}
.cmdbar .rec{width:9px;height:9px;border-radius:50%;background:#d9503c;box-shadow:0 0 8px #d9503c;animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
.cmdbar .uplink i{display:inline-block;width:5px;height:5px;border-radius:50%;background:var(--accent);margin-left:2px;box-shadow:0 0 6px var(--accent)}
.cmdbar .uplink i:last-child{background:var(--ink-mute);box-shadow:none}

/* ============================================================
   兩欄主結構
   ============================================================ */
.layout{display:grid;grid-template-columns:1fr;gap:34px;padding:24px 0 70px}
@media(min-width:1000px){.layout{grid-template-columns:minmax(0,1fr) 312px}}

.pagehead{margin-bottom:18px}
.pagehead .top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.pagehead h1{font-family:var(--font-head);font-size:1.7rem;font-weight:700}
.pagehead h1 .seal{font-style:italic;font-family:var(--font-latin)}
.pagehead .sub{font-family:var(--font-latin);font-style:italic;font-size:.86rem;color:var(--ink-mute)}
.pagehead .rule-d{border-top:1px solid var(--line-strong);border-bottom:3px double var(--line-strong);height:4px;margin-top:10px}
html.dark .pagehead h1{font-family:var(--font-mono);font-size:1rem;color:var(--accent);letter-spacing:.04em}
html.dark .pagehead h1 .seal{font-family:var(--font-mono);font-style:normal}
html.dark .pagehead h1::before{content:"# "}
html.dark .pagehead .rule-d{border:0;border-top:1px dashed var(--line-strong);height:0}
html.dark .pagehead .sub{font-family:var(--font-mono);font-style:normal}

/* ============================================================
   文章卡
   ============================================================ */
.feed{display:flex;flex-direction:column;gap:22px}
.card{position:relative;display:grid;grid-template-columns:1fr;background:var(--surface);border:1px solid var(--card-border);
  border-radius:var(--radius);box-shadow:var(--card-shadow);transition:transform .2s,box-shadow .2s,border-color .2s}
@media(min-width:560px){.card{grid-template-columns:236px 1fr}}
.card:hover{transform:translate(-2px,-2px);box-shadow:var(--card-shadow-hover);border-color:var(--card-border-hover)}
.card .thumb{position:relative;aspect-ratio:16/10;background:var(--paper-2);overflow:hidden;border-right:1px solid var(--card-border)}
@media(min-width:560px){.card .thumb{aspect-ratio:auto;height:100%;min-height:180px}}
.card .thumb img{width:100%;height:100%;object-fit:cover;filter:saturate(.92) contrast(1.02)}
.card .thumb.ph{display:grid;place-items:center;background:var(--surface-2)}
.card .thumb.ph span{font-family:var(--font-latin);font-style:italic;font-size:2.4rem;color:var(--accent);opacity:.5}
.card .body{padding:20px 22px;display:flex;flex-direction:column;gap:9px;min-width:0}
.card .topline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-family:var(--font-latin);font-style:italic;font-size:.8rem;color:var(--ink-mute)}
.card .topline .no{color:var(--accent);font-weight:500}
.card h2{font-family:var(--font-head);font-size:1.42rem;font-weight:700;line-height:1.45;letter-spacing:.01em}
.card h2 a{background-image:linear-gradient(var(--accent),var(--accent));background-size:0% 1.5px;background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s}
/* 整張卡片可點擊：標題連結以透明 ::after 延展覆蓋整卡（縮圖已改 div，避免巢狀連結）*/
.card{cursor:pointer}
.card h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.card:hover h2 a{background-size:100% 1.5px}
.card .excerpt{font-size:1.02rem;color:var(--ink-soft);line-height:1.85;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{font-family:var(--font-head);font-size:.72rem;color:var(--ink-soft);border-bottom:1px solid var(--accent);padding-bottom:1px}
.card .meta{display:flex;align-items:center;gap:12px;margin-top:3px;font-family:var(--font-latin);font-style:italic;font-size:.82rem;color:var(--ink-mute)}
.card .meta .read{margin-left:auto;font-family:var(--font-head);font-style:normal;font-size:.82rem;color:var(--accent);font-weight:600;white-space:nowrap}
/* 首篇印章（亮色） */
.card .seal-mark{position:absolute;top:-14px;right:18px;z-index:3;width:54px;height:54px;display:grid;place-items:center;
  border:2px solid var(--accent);color:var(--accent);background:var(--paper);transform:rotate(-7deg);
  font-family:var(--font-head);font-weight:700;font-size:.7rem;letter-spacing:.1em;text-align:center;line-height:1.2}

/* 文章卡：亮色＝開放式列（細線分隔，仿 03-editorial，不要硬框盒子） */
html:not(.dark) .feed{gap:0}
html:not(.dark) .card{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0 0 30px;margin-bottom:30px;border-bottom:1px solid var(--line)}
html:not(.dark) .card:last-child{border-bottom:0;margin-bottom:0;padding-bottom:6px}
html:not(.dark) .card:hover{transform:none;box-shadow:none}
html:not(.dark) .card .thumb{border:1px solid var(--line)}
html:not(.dark) .card .body{padding:2px 2px 0 26px}

/* 文章卡：暗色終端覆寫 */
html.dark .card .thumb img{filter:saturate(.82) contrast(1.04) brightness(.94);transition:filter .3s}
html.dark .card:hover .thumb img{filter:saturate(1) contrast(1) brightness(1)}
html.dark .card .thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(60,224,133,.08),transparent 38%),repeating-linear-gradient(0deg,transparent 0,transparent 2px,rgba(0,0,0,.12) 3px);mix-blend-mode:multiply;opacity:.35;transition:opacity .3s}
html.dark .card:hover .thumb::after{opacity:.12}
html:not(.dark) .card .thumb::after{content:"";position:absolute;inset:6px;border:1px solid rgba(247,244,238,.55);pointer-events:none}
html.dark .card{box-shadow:var(--card-shadow)}
html.dark .card:hover{transform:translateY(-2px);background:rgba(17,27,23,.92)}
html.dark .card::before,html.dark .card::after{content:"";position:absolute;width:13px;height:13px;z-index:3;pointer-events:none;border:1.5px solid var(--accent);opacity:.4;transition:opacity .25s}
html.dark .card::before{top:9px;left:9px;border-right:0;border-bottom:0}
html.dark .card::after{bottom:9px;right:9px;border-left:0;border-top:0}
html.dark .card:hover::before,html.dark .card:hover::after{opacity:.95}
html.dark .card .seal-mark{display:none}
html.dark .card .topline{font-family:var(--font-mono);font-style:normal;font-size:.7rem}
html.dark .card .topline .no::before{content:"["}html.dark .card .topline .no::after{content:"]"}
html.dark .card h2{font-weight:700}
html.dark .card h2 a{background-image:none}
html.dark .card:hover h2{color:var(--accent-bright)}
html.dark .chip{font-family:var(--font-mono);font-size:.68rem;border-bottom:0;padding:2px 8px;background:var(--accent-soft);color:var(--accent);border:1px solid rgba(60,224,133,.2);border-radius:2px}
html.dark .chip::before{content:"#"}
html.dark .card .meta{font-family:var(--font-mono);font-style:normal;font-size:.74rem}
html.dark .card .meta .read{font-family:var(--font-mono)}
html.dark .card .meta .read::after{content:" ▸"}

/* ============================================================
   分頁
   ============================================================ */
.pager{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:30px;font-family:var(--font-latin);flex-wrap:wrap}
.pager a,.pager span.cur,.pager span.gap{min-width:40px;height:40px;padding:0 13px;display:grid;place-items:center;border:1px solid var(--line);background:var(--surface);font-size:.9rem;font-style:italic;color:var(--ink-soft);border-radius:var(--radius)}
.pager a:hover{background:var(--accent);color:var(--paper);border-color:var(--accent)}
.pager .cur{background:var(--ink);color:var(--paper);border-color:var(--ink);font-style:normal}
.pager .gap{border:0;background:none;min-width:auto;padding:0 4px}
html.dark .pager{font-family:var(--font-mono)}
html.dark .pager a,html.dark .pager span.cur{font-style:normal;border-color:var(--line-strong)}
html.dark .pager a:hover{background:var(--accent);color:var(--paper-2)}
html.dark .pager .cur{background:var(--accent);color:var(--paper-2);border-color:var(--accent);font-weight:700}
/* 分頁跳頁選單 */
.pager-jump{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-latin);font-style:italic;color:var(--ink-mute);font-size:.88rem}
.pager-jump select{font-family:var(--font-latin);font-style:italic;font-size:.9rem;color:var(--ink);background-color:var(--surface);border:1px solid var(--line);height:40px;padding:0 30px 0 13px;border-radius:var(--radius);cursor:pointer;
  -webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b6253' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center}
.pager-jump select:hover{border-color:var(--accent)}
html.dark .pager-jump,html.dark .pager-jump select{font-family:var(--font-mono);font-style:normal}
html.dark .pager-jump select{border-color:var(--line-strong);color:var(--ink);background-color:var(--surface);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%238ea69b' stroke-width='1.4'/%3E%3C/svg%3E")}

/* ============================================================
   側欄
   ============================================================ */
aside.sidebar{display:flex;flex-direction:column;gap:30px;align-self:start}
@media(min-width:1000px){aside.sidebar{position:sticky;top:88px}}
.widget .wh{display:flex;align-items:center;gap:10px;margin-bottom:13px}
.widget .wh h3{font-family:var(--font-head);font-size:.96rem;font-weight:700;white-space:nowrap;letter-spacing:.05em}
.widget .wh h3::before{content:"";display:inline-block;width:9px;height:9px;background:var(--accent);margin-right:9px;transform:rotate(45deg);vertical-align:middle}
.widget .wh::after{content:"";flex:1;border-top:1px solid var(--line)}
html.dark .widget .wh h3{font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute);letter-spacing:.06em}
html.dark .widget .wh h3::before{content:"~/ ";background:none;width:auto;height:auto;transform:none;color:var(--accent-deep);margin-right:0}
html.dark .widget .wh::after{border-top:1px dashed var(--line-strong)}

/* 作者 */
.author{text-align:center;padding:4px 0}
.author .ava{width:66px;height:66px;margin:0 auto 11px;background:var(--accent);color:var(--paper);display:grid;place-items:center;
  font-family:var(--font-head);font-weight:900;font-size:1.7rem;transform:rotate(-3deg)}
.author .nm{font-family:var(--font-head);font-weight:700;font-size:1.16rem}
.author .en{font-family:var(--font-latin);font-style:italic;color:var(--ink-mute);font-size:.92rem;margin-top:1px}
.author .bio{font-size:.86rem;color:var(--ink-soft);margin-top:9px;line-height:1.8;text-align:justify}
/* avatar 圖片版（header 品牌標記 .mk 與側欄頭像 .ava 共用）*/
.author .ava.is-img,.brand .mk.is-img{background:none;transform:none;border-radius:50%;overflow:hidden;padding:0;box-shadow:none}
.author .ava.is-img img,.brand .mk.is-img img{width:100%;height:100%;object-fit:cover;display:block}
html.dark .author .ava.is-img,html.dark .brand .mk.is-img{background:none;box-shadow:none}
html.dark .author{position:relative;background:rgba(14,21,19,.55);border:1px solid rgba(60,224,133,.1);box-shadow:none;padding:20px 18px}
html.dark .author .ava{border-radius:2px;transform:none;box-shadow:0 0 22px -4px rgba(60,224,133,.5);font-family:var(--font-mono)}
html.dark .author .nm{font-family:var(--font-body)}
html.dark .author .en{font-family:var(--font-mono);font-style:normal}
html.dark .author::before,html.dark .author::after{content:"";position:absolute;width:12px;height:12px;border:1.5px solid var(--accent);opacity:.5}
html.dark .author::before{top:7px;left:7px;border-right:0;border-bottom:0}
html.dark .author::after{bottom:7px;right:7px;border-left:0;border-top:0}

/* 書 */
.book{display:flex;gap:15px}
.book .cover{width:88px;flex-shrink:0;border:1px solid var(--line);box-shadow:0 6px 16px -8px rgba(26,23,21,.28);align-self:flex-start}
.book .info{display:flex;flex-direction:column;gap:5px;min-width:0}
.book .info .t{font-family:var(--font-head);font-weight:700;font-size:1.04rem;line-height:1.4}
.book .info .d{font-size:.82rem;color:var(--ink-soft);line-height:1.6}
.book .info .buy{margin-top:6px;align-self:flex-start;font-family:var(--font-head);font-weight:600;font-size:.84rem;color:var(--paper);background:var(--accent);padding:7px 15px;transition:.15s;border-radius:var(--radius)}
.book .info .buy:hover{background:var(--accent-deep)}
html.dark .book .cover{box-shadow:0 6px 18px -8px rgba(0,0,0,.8),0 0 18px -6px rgba(60,224,133,.3)}
html.dark .book .info .t{font-family:var(--font-body)}
html.dark .book .info .buy{font-family:var(--font-mono);color:var(--paper-2)}
html.dark .book .info .buy::before{content:"./"}

/* 社群 */
.social a{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:10px 2px;border-bottom:1px dotted var(--line);
  font-family:var(--font-head);font-size:.96rem;color:var(--ink-soft);transition:.15s}
.social a:last-child{border-bottom:0}
.social a::before{content:"§";color:var(--accent);margin-right:9px}
.social a:hover{color:var(--accent);padding-left:5px}
.social a .r{margin-left:auto;font-family:var(--font-latin);font-style:italic;color:var(--ink-mute);font-size:.82rem;white-space:nowrap}
html.dark .social a{font-family:var(--font-body);border-bottom:1px solid rgba(60,224,133,.06)}
html.dark .social a::before{content:"→ ";font-family:var(--font-mono);color:var(--accent-deep);margin-right:0}
html.dark .social a .r{font-family:var(--font-mono);font-style:normal}

/* 廣告 */
.ad{display:grid;place-items:center;min-height:250px;border:1px dashed var(--line);background:var(--surface-2);
  color:var(--ink-mute);font-family:var(--font-latin);font-style:italic;font-size:.86rem;text-align:center;line-height:1.7;border-radius:var(--radius);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(26,23,21,.03) 11px,rgba(26,23,21,.03) 22px)}
html.dark .ad{font-family:var(--font-mono);font-style:normal;border-color:var(--line-strong);
  background-image:repeating-linear-gradient(45deg,transparent,transparent 11px,rgba(60,224,133,.04) 11px,rgba(60,224,133,.04) 22px)}

/* 標籤 */
.tags{display:flex;flex-wrap:wrap;gap:9px 14px}
.tags a{font-family:var(--font-head);font-size:.9rem;color:var(--ink-soft);transition:.15s}
.tags a::before{content:"#";color:var(--accent)}
.tags a:hover{color:var(--accent)}
html.dark .tags{gap:8px}
html.dark .tags a{font-family:var(--font-mono);font-size:.8rem;color:var(--ink-soft);border:1px solid var(--line-strong);padding:4px 9px;border-radius:2px}
html.dark .tags a::before{color:var(--accent-deep)}
html.dark .tags a:hover{border-color:var(--accent-deep)}

/* ============================================================
   文章內頁（prose）
   ============================================================ */
/* 暗色：主要文章襯實心底色（如同列表卡片），避免動態效果從文字間透出影響閱讀 */
html.dark .post{background:var(--surface);border:1px solid var(--card-border);border-radius:var(--radius);padding:30px 34px;box-shadow:var(--card-shadow)}
@media(max-width:600px){html.dark .post{padding:22px 18px}}
.article-head{margin-bottom:26px}
.article-head .crumb{font-family:var(--font-latin);font-style:italic;font-size:.84rem;color:var(--ink-mute);margin-bottom:10px}
.article-head h1{font-family:var(--font-head);font-size:clamp(2.25rem,5vw,3rem);line-height:1.25;font-weight:900;letter-spacing:.01em}
.article-head .meta{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-family:var(--font-latin);font-style:italic;color:var(--ink-mute);font-size:.9rem;align-items:center}
.article-head .rule-d{border-top:1px solid var(--line-strong);border-bottom:3px double var(--line-strong);height:4px;margin-top:18px}
html.dark .article-head h1{font-family:var(--font-body)}
html.dark .article-head .crumb,html.dark .article-head .meta{font-family:var(--font-mono);font-style:normal}
html.dark .article-head .rule-d{border:0;border-top:1px dashed var(--line-strong);height:0}

.prose{font-size:1.25rem;line-height:1.9;color:var(--prose-ink);word-wrap:break-word;overflow-wrap:break-word;max-width:38em}
.prose>*+*{margin-top:1.15em}
.prose h2,.prose h3,.prose h4{font-family:var(--font-head);color:var(--prose-ink);line-height:1.4;letter-spacing:.01em;margin-top:1.8em}
.prose h2{font-size:2.1rem;font-weight:700;padding-bottom:.3em;border-bottom:1px solid var(--line)}
.prose h3{font-size:1.75rem;font-weight:700}
.prose h4{font-size:1.5rem;font-weight:700}
html.dark .prose h2,html.dark .prose h3,html.dark .prose h4{font-family:var(--font-body)}
.prose p{color:var(--prose-ink)}
.prose strong{color:var(--prose-ink);font-weight:700}
.prose a{color:var(--accent);font-weight:600;border-bottom:1px solid var(--accent-soft);transition:.15s}
.prose a:hover{border-bottom-color:var(--accent)}
html:not(.dark) .prose a{border-bottom-color:#d6a59b}
.prose ul,.prose ol{padding-left:1.5em}
.prose li{margin-top:.4em}
.prose ul>li{list-style:none;position:relative}
.prose ul>li::before{content:"—";position:absolute;left:-1.4em;color:var(--accent)}
.prose ol{list-style:decimal}
.prose blockquote{border-left:3px solid var(--accent);padding:.4em 0 .4em 1.1em;color:var(--prose-ink);font-family:var(--font-head)}
html.dark .prose blockquote{font-family:var(--font-body)}
.prose img{border:1px solid var(--line);margin:1.6em auto;border-radius:var(--radius)}
.prose hr{border:0;border-top:1px solid var(--line);margin:2em 0}
.prose code{font-family:var(--font-mono);font-size:.88em;background:var(--accent-soft);color:var(--accent-deep);padding:.12em .4em;border-radius:2px}
html.dark .prose code{color:var(--accent);background:var(--surface-2)}
.prose pre{background:var(--code-bg);color:var(--code-ink);padding:1.1em 1.2em;border-radius:var(--radius);overflow-x:auto;font-family:var(--font-mono);font-size:.86rem;line-height:1.7;border:1px solid var(--line-strong)}
.prose pre code{background:none;color:inherit;padding:0;font-size:inherit}
.prose table{width:100%;border-collapse:collapse;font-size:.92rem;display:block;overflow-x:auto}
.prose th,.prose td{border:1px solid var(--line);padding:.5em .7em;text-align:left}
.prose th{background:var(--surface-2);font-family:var(--font-head)}
.prose .demo{margin:1.5em 0}

/* 文章頁尾 */
.post-foot{margin-top:40px}
.post-tags{display:flex;flex-wrap:wrap;gap:9px 14px;margin-bottom:24px}
.post-nav{display:grid;grid-template-columns:1fr;gap:12px;margin:30px 0;padding:22px 0;border-top:1px solid var(--line-strong);border-bottom:1px solid var(--line-strong)}
@media(min-width:600px){.post-nav{grid-template-columns:1fr 1fr}}
.post-nav a{display:block;font-family:var(--font-head)}
.post-nav a .lab{font-family:var(--font-latin);font-style:italic;font-size:.8rem;color:var(--ink-mute);display:block;margin-bottom:4px}
.post-nav a .ttl{font-weight:700;color:var(--ink-soft);transition:.15s}
.post-nav a:hover .ttl{color:var(--accent)}
.post-nav .next{text-align:right}
html.dark .post-nav a,html.dark .post-nav a .lab{font-family:var(--font-mono);font-style:normal}
#comments{margin-top:36px}

/* ============================================================
   封存清單（全部列出、純文字）
   ============================================================ */
.archive-list{margin-top:4px}
.archive-year{font-family:var(--font-head);font-size:1.5rem;font-weight:900;color:var(--accent);margin:32px 0 8px;padding-bottom:7px;border-bottom:1px solid var(--line)}
.archive-year:first-child{margin-top:6px}
html.dark .archive-year{font-family:var(--font-mono);font-size:1.1rem}
html.dark .archive-year::before{content:"## "}
.archive-row{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:baseline;padding:9px 4px;border-bottom:1px dotted var(--line);transition:padding .15s,color .15s}
.archive-row:hover{padding-left:9px}
.archive-row .d{font-family:var(--font-latin);font-style:italic;color:var(--ink-mute);font-size:.84rem;white-space:nowrap;font-variant-numeric:tabular-nums}
html.dark .archive-row .d{font-family:var(--font-mono);font-style:normal}
.archive-row .t{font-family:var(--font-head);font-size:1.06rem;color:var(--ink-soft);line-height:1.5}
html.dark .archive-row .t{font-family:var(--font-body)}
.archive-row:hover .t{color:var(--accent)}
.archive-row .c{font-family:var(--font-latin);font-style:italic;font-size:.78rem;color:var(--ink-mute);white-space:nowrap}
html.dark .archive-row .c{font-family:var(--font-mono);font-style:normal}

/* ============================================================
   搜尋 modal
   ============================================================ */
.cs-modal{position:fixed;inset:0;z-index:60;display:none;align-items:flex-start;justify-content:center;
  background:rgba(0,0,0,.5);backdrop-filter:blur(4px);padding:12vh 16px 8vh;overflow-y:auto}
html.dark .cs-modal{background:rgba(0,0,0,.72)}
.cs-modal.open{display:flex}
.cs-box{width:100%;max-width:640px;background:var(--surface);border:1px solid var(--line-strong);box-shadow:0 24px 60px -20px rgba(0,0,0,.4);border-radius:var(--radius);overflow:hidden}
.cs-top{display:flex;align-items:center;gap:11px;padding:13px 16px;border-bottom:1px solid var(--line-strong)}
.cs-top svg{width:20px;height:20px;color:var(--ink-mute);flex-shrink:0}
.cs-top input{flex:1;background:none;border:none;outline:none;font-family:var(--font-body);font-size:1.05rem;color:var(--ink)}
.cs-top input::placeholder{color:var(--ink-mute)}
.cs-top kbd{font-family:var(--font-mono);font-size:.66rem;border:1px solid var(--line);padding:2px 6px;color:var(--ink-mute);border-radius:2px}
.cs-status{padding:9px 16px;font-family:var(--font-latin);font-style:italic;font-size:.82rem;color:var(--ink-mute)}
html.dark .cs-status{font-family:var(--font-mono);font-style:normal}
.cs-results{list-style:none;max-height:54vh;overflow-y:auto}
.cs-results li{border-top:1px solid var(--line)}
.cs-results a{display:block;padding:12px 16px;transition:.12s}
.cs-results a:hover,.cs-results a[aria-selected="true"]{background:var(--accent-soft)}
.cs-results .t{font-family:var(--font-head);font-weight:600;color:var(--ink);line-height:1.45}
html.dark .cs-results .t{font-family:var(--font-body)}
.cs-results .m{font-family:var(--font-latin);font-style:italic;font-size:.78rem;color:var(--ink-mute);margin-top:3px}
html.dark .cs-results .m{font-family:var(--font-mono);font-style:normal}
.cs-results mark{background:var(--accent-soft);color:var(--accent-deep);border-radius:2px;padding:0 1px}
html.dark .cs-results mark{background:var(--accent-soft);color:var(--accent)}
.cs-foot{display:flex;justify-content:space-between;gap:10px;padding:9px 16px;border-top:1px solid var(--line);font-family:var(--font-mono);font-size:.72rem;color:var(--ink-mute)}

/* 廣告 inline */
.ad-inline{margin:6px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:16px 0;text-align:center}
.ad-inline .lab{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:8px}

/* ============================================================
   頁尾
   ============================================================ */
footer.site{border-top:3px double var(--line-strong);padding:30px 0 70px;text-align:center;position:relative;z-index:2}
footer.site .big{font-family:var(--font-head);font-weight:900;font-size:1.5rem}
footer.site .sub{font-family:var(--font-latin);font-style:italic;color:var(--ink-mute);font-size:.86rem;margin-top:6px}
html.dark footer.site{border-top:1px solid var(--line-strong)}
html.dark footer.site .big{font-family:var(--font-mono);color:var(--accent)}
html.dark footer.site .sub{font-family:var(--font-mono);font-style:normal}

.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ============================================================
   無障礙：鍵盤焦點、skip link、標籤雲
   ============================================================ */
a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:1px}
.cs-box:focus-within{border-color:var(--accent)}
main:focus{outline:none}
.skip-link{position:fixed;top:8px;left:8px;z-index:100;background:var(--accent);color:#fff;padding:9px 16px;font-family:var(--font-head);font-weight:700;border-radius:var(--radius);transform:translateY(-160%);transition:transform .2s}
.skip-link:focus{transform:translateY(0)}
html.dark .skip-link{color:var(--paper-2)}
.tags-cloud{font-size:1.05rem;line-height:2.5;gap:10px 16px}
.tags-cloud .tag-list-count,.tags-cloud .tag-count{font-size:.75em;color:var(--ink-mute);margin-left:2px}

/* ============================================================
   亮色小彩蛋：散步顏文字情侶（#creature-stage，僅亮色／桌機）
   ============================================================ */
#creature-stage{position:fixed;inset:0;z-index:50;pointer-events:none;overflow:hidden}
html.dark #creature-stage{display:none}
@media (max-width:999px){#creature-stage{display:none}}
@media (prefers-reduced-motion:reduce){#creature-stage{display:none}}
#creature-stage .creature{position:absolute;font-family:var(--font-mono);font-size:1.5rem;user-select:none;will-change:transform;text-shadow:0 1px 0 rgba(255,255,255,.5)}
#creature-stage .creature .face{display:inline-block}
#creature-stage .creature .shadow{position:absolute;left:50%;bottom:-3px;width:70%;height:5px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(26,23,21,.16),transparent 70%);border-radius:50%}
#creature-stage .heart{position:absolute;font-size:1.05rem;color:#d27a9a;pointer-events:none;text-shadow:0 1px 0 rgba(255,255,255,.4);animation:heartUp 2.4s ease-out forwards;will-change:transform,opacity}
@keyframes heartUp{0%{opacity:0;transform:translateY(4px) scale(.5)}20%{opacity:.95;transform:translateY(-6px) scale(1)}100%{opacity:0;transform:translateY(-46px) scale(1.12)}}

/* ============================================================
   暗色動態：顏文字雨 / 掃描掃掠 / 邊框跑光（僅暗色）
   ============================================================ */
.fx-rain,.fx-sweep{display:none}
html.dark .fx-rain{display:block;position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.6;
  -webkit-mask-image:radial-gradient(ellipse 58% 120% at 42% 50%,transparent 30%,#000 72%);
          mask-image:radial-gradient(ellipse 58% 120% at 42% 50%,transparent 30%,#000 72%)}
html.dark .fx-sweep{display:block;position:fixed;left:0;right:0;height:150px;z-index:1;pointer-events:none;
  background:linear-gradient(rgba(60,224,133,0),rgba(60,224,133,.07),rgba(60,224,133,0));animation:fxsweep 9s linear infinite}
@keyframes fxsweep{0%{transform:translateY(-170px)}100%{transform:translateY(100vh)}}
@media (max-width:999px){html.dark .fx-rain,html.dark .fx-sweep{display:none}}
@media (prefers-reduced-motion:reduce){html.dark .fx-rain,html.dark .fx-sweep,.edge-runner{display:none}}
/* 邊框跑光：七彩像素跑光（JS 在暗色時於卡片內插入 .edge-runner 子元素，不搶角括號 pseudo）*/
@property --fxang{syntax:'<angle>';inherits:false;initial-value:0turn}
.edge-runner{position:absolute;inset:0;z-index:4;pointer-events:none;padding:2.5px;border-radius:var(--radius);
  background:conic-gradient(from var(--fxang),transparent 0 80%,#ff2d6f 80% 82.4%,#ff7a18 82.4% 84.8%,#ffe000 84.8% 87.2%,#38e36b 87.2% 89.6%,#20c4ff 89.6% 92%,#5b6bff 92% 94.4%,#c44bff 94.4% 97%,transparent 97% 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  animation:fxangrun 4.8s linear 1,fxedgefade 4.8s linear 1;image-rendering:pixelated}
@keyframes fxangrun{to{--fxang:2turn}}
@keyframes fxedgefade{0%,80%{opacity:1}100%{opacity:0}}