/* 首頁的樣式。年度回顧（year.html）有自己的一份精簡版。 */

:root{
  --paper:#f3eee3; --card:#fbf8f1; --ink:#1c1a17; --muted:#736b5e;
  --rule:rgba(28,26,23,.16); --rule-soft:rgba(28,26,23,.08); --seal:#c23a22;
  --h0:rgba(28,26,23,.07); --h1:#c3d0e6; --h2:#8ba3cf; --h3:#4d6fb0; --h4:#1e3d7e;
  --glow:none; --blob-a:rgba(77,111,176,.20); --blob-b:rgba(194,58,34,.13);
  --kai:"LXGW WenKai TC","Noto Serif TC",serif;
  --sans:-apple-system,BlinkMacSystemFont,"PingFang TC","Noto Sans TC","Microsoft JhengHei","Segoe UI",sans-serif;
  --mono:"DM Mono",ui-monospace,Menlo,monospace;
}
/* 深色配色跟著 data-mode（照台北時間或手動切換），不看系統的深淺色設定，頁面才會跟城市一起變夜景 */
:root{color-scheme:light}
:root[data-mode="dark"]{
  color-scheme:dark;
  --paper:#12110d; --card:#1b1914; --ink:#ebe5d6; --muted:#9a917f;
  --rule:rgba(235,229,214,.17); --rule-soft:rgba(235,229,214,.07); --seal:#f0674c;
  --h0:rgba(235,229,214,.07); --h1:#243457; --h2:#375692; --h3:#5f86d6; --h4:#a8c5ff;
  --glow:0 0 9px rgba(168,197,255,.55); --blob-a:rgba(95,134,214,.22); --blob-b:rgba(240,103,76,.14);
}

*{box-sizing:border-box; margin:0; padding:0}
html{-webkit-text-size-adjust:100%}
body{
  /* 方格紙：跟熱力圖的格子是同一個母題 */
  background:
    linear-gradient(var(--rule-soft) 1px, transparent 1px) 0 0/100% 24px,
    linear-gradient(90deg, var(--rule-soft) 1px, transparent 1px) 0 0/24px 100%,
    var(--paper);
  color:var(--ink); font:400 15px/1.7 var(--sans);
  min-height:100dvh; overflow-x:hidden;
}
/* 紙面上暈開的兩團墨：靛藍與朱紅，緩慢漂移 */
body::before{
  content:""; position:fixed; inset:-20%; z-index:-1; pointer-events:none;
  background:
    radial-gradient(34% 30% at 78% 18%, var(--blob-a), transparent 70%),
    radial-gradient(30% 28% at 12% 8%, var(--blob-b), transparent 70%),
    radial-gradient(36% 30% at 60% 92%, var(--blob-a), transparent 72%);
  filter:blur(30px); animation:drift 36s ease-in-out infinite alternate;
}
@keyframes drift{to{transform:translate3d(-3%,2.5%,0) scale(1.08)}}
a{color:inherit}
.wrap{width:min(1160px,100%); margin:0 auto; padding:0 24px}

/* ── 跑馬燈 ── */
.ticker{background:var(--ink); color:var(--paper); display:flex; align-items:stretch; font:400 12.5px/1 var(--mono); overflow:hidden; position:relative}
.ticker .live{flex:none; display:flex; align-items:center; gap:8px; padding:0 14px 0 20px; background:var(--seal); color:#fff; font-weight:500; letter-spacing:.16em; z-index:1}
.ticker .live::before{content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:blink 1.4s steps(2,jump-none) infinite}
@keyframes blink{50%{opacity:.25}}
.ticker .rail{display:flex; flex:none; animation:slide var(--dur,60s) linear infinite; padding:11px 0}
.ticker:hover .rail{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.ticker .rail span{white-space:nowrap; padding:0 18px; display:inline-flex; gap:8px; align-items:baseline; font-family:var(--sans)}
.ticker .rail span::after{content:"✦"; margin-left:26px; opacity:.4}
/* 右上角的太陽／月亮：顯示現在的模式，點一下切換 */
.mode{position:absolute; right:0; top:0; bottom:0; width:46px; border:0; cursor:pointer; display:grid; place-items:center; background:var(--ink); color:#f5b83d; box-shadow:-14px 0 14px var(--ink)}
.lang{position:absolute; right:46px; top:0; bottom:0; width:40px; border:0; cursor:pointer; background:var(--ink); color:var(--paper); font:500 12.5px var(--mono); box-shadow:-14px 0 14px var(--ink); z-index:1}
.lang:hover{color:#f5b83d}
[data-mode="dark"] .lang{background:var(--card); color:var(--ink); box-shadow:-14px 0 14px var(--card)}
.mode{box-shadow:none !important; z-index:1}
.mode svg{width:19px; height:19px; transition:transform .5s cubic-bezier(.2,1.5,.4,1)}
.mode:hover svg{transform:rotate(40deg) scale(1.15)}
.mode .moon, [data-mode="dark"] .mode .sun{display:none}
[data-mode="dark"] .mode .moon{display:block}
[data-mode="dark"] .mode{background:var(--card); color:#f4e9c1; box-shadow:-14px 0 14px var(--card)}
[data-mode="dark"] .ticker{background:var(--card); color:var(--ink); border-bottom:1px solid var(--rule)}
.ticker b{font:500 12.5px var(--mono); opacity:.6}
.ticker em{font:500 12.5px var(--mono); font-style:normal; color:color-mix(in srgb,var(--seal) 70%,var(--paper))}
.ticker u{text-decoration:none; opacity:.62}

/* ── 刊頭 ── */
.mast{display:grid; grid-template-columns:1fr auto; column-gap:48px; align-items:end; padding:64px 0 28px}
.kicker{grid-column:1 / -1; font:500 12px/1 var(--mono); letter-spacing:.18em; color:var(--muted); text-transform:uppercase}
h1{grid-column:1 / -1; font:700 clamp(40px,9.4vw,112px)/1.02 var(--kai); letter-spacing:.01em; margin:18px 0 26px; position:relative; width:fit-content}
h1 .hl{
  background:linear-gradient(color-mix(in srgb,var(--seal) 34%,transparent),color-mix(in srgb,var(--seal) 34%,transparent)) no-repeat 0 78%/0% 38%;
  animation:marker .9s cubic-bezier(.6,0,.2,1) .45s forwards;
}
@keyframes marker{to{background-size:100% 38%}}
h1 .stamp{
  position:absolute; right:-88px; top:-18px; width:70px; height:70px;
  display:grid; grid-template-columns:1fr 1fr; place-items:center; padding:6px;
  font:700 23px/1 var(--kai); color:var(--seal);
  border:3px solid var(--seal); border-radius:8px; transform:rotate(7deg);
  animation:slam .5s cubic-bezier(.2,1.7,.4,1) 1.1s both;
}
@keyframes slam{from{opacity:0; transform:rotate(-18deg) scale(2.8)}}
.lede{max-width:34em; color:var(--muted); font-size:16px}
.lede b{color:var(--ink); font-weight:500}

.reach{grid-column:1; display:flex; align-items:center; gap:16px; margin-top:18px; font-size:14px}
.reach a:not(.btn){color:var(--muted)}
.reach a:not(.btn):hover{color:var(--seal)}
.btn{display:inline-block; font:700 15px var(--kai); color:var(--paper); background:var(--ink); border:1.5px solid var(--ink); padding:6px 16px; text-decoration:none; box-shadow:3px 3px 0 var(--seal); transition:transform .15s, box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--seal)}
.btn.ghost{color:var(--ink); background:var(--card); box-shadow:3px 3px 0 var(--ink)}
.btn.ghost:hover{box-shadow:5px 5px 0 var(--ink)}
/* 找我聊聊 */
.sec.contact{margin-top:36px; padding:28px 30px 30px; border:1.5px solid var(--ink); background:var(--card); box-shadow:6px 6px 0 var(--ink)}
.contact h2{font:700 30px/1.2 var(--kai)}
.contact p{color:var(--muted); max-width:36em; margin-top:8px}
.contact p:last-child{display:flex; flex-wrap:wrap; gap:14px; margin-top:18px}
.ledger{grid-column:2; grid-row:3 / span 2; display:grid; grid-template-columns:repeat(2,minmax(132px,auto)); border:1.5px solid var(--ink); background:var(--card); box-shadow:6px 6px 0 var(--ink)}
.ledger div{padding:14px 22px 12px; border-right:1px solid var(--rule); border-bottom:1px solid var(--rule)}
.ledger div:nth-child(2n){border-right:0}
.ledger div:nth-last-child(-n+2){border-bottom:0}
.ledger dt{font-size:12px; color:var(--muted); letter-spacing:.08em}
.ledger dd{font:500 34px/1.2 var(--mono); font-variant-numeric:tabular-nums}
.ledger dd small{font:400 12px var(--sans); color:var(--muted); margin-left:4px}
.ledger div:first-child dd{color:var(--seal)}

/* ── 區塊標題 ── */
.sec{padding:30px 0 10px}
.sec-h{display:flex; align-items:baseline; gap:14px; border-bottom:2px solid var(--ink); padding-bottom:8px; margin-bottom:20px}
.sec-h h2{font:700 26px/1.2 var(--kai); white-space:nowrap}
.sec-h .note{color:var(--muted); font-size:13px}
.sec-h .right{margin-left:auto; color:var(--muted); font-size:12px; display:flex; align-items:center; gap:14px; white-space:nowrap}
.chip{font:500 12px var(--sans); color:var(--ink); background:none; border:1px solid var(--rule); border-radius:999px; padding:2px 11px; cursor:pointer; white-space:nowrap}
.chip:hover{border-color:var(--ink)}
.chip[aria-pressed="true"]{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.chip small{opacity:.6; margin-left:3px; font:400 11px var(--mono)}
.chips{gap:6px !important; flex-wrap:wrap; white-space:normal !important; justify-content:flex-end}
.proj-key{display:flex; flex-wrap:wrap; gap:4px 14px; font-size:12.5px; color:var(--muted); margin:-8px 0 10px}
.proj-key[hidden]{display:none}
.proj-key span{display:inline-flex; align-items:center; gap:6px}
.proj-key i{width:11px; height:11px; border-radius:3px; display:block}
/* 作息：24 小時與星期的分布 */
.rhythm{display:grid; grid-template-columns:3.2fr 1fr; gap:36px}
.rhythm figure{min-width:0}
.bars{display:grid; grid-auto-flow:column; grid-auto-columns:1fr; gap:3px; align-items:end; height:110px; border-bottom:1px solid var(--rule)}
.bars i{display:block; height:calc(var(--v) * 100%); min-height:2px; background:var(--h2); border-radius:4px 4px 0 0}
.bars i.peak{background:var(--h4); box-shadow:var(--glow)}
.bars i:hover{background:var(--seal)}
.rhythm figcaption{display:flex; justify-content:space-between; font:400 11px var(--mono); color:var(--muted); padding-top:5px}
[data-kind][hidden], #heat-key[hidden]{display:none}
/* 部署時預先寫進網頁的靜態內容：給搜尋引擎和沒有 JavaScript 的讀者。有 JavaScript 時佔著位置但不顯示，避免閃一下 */
.js .pre{visibility:hidden}
.pre .links a{margin-right:10px}
.ico{width:38px; height:38px; border-radius:9px; flex:none; object-fit:cover; background:var(--h0)}
.ico.mono{display:grid; place-items:center; font:700 19px/1 var(--kai); color:var(--paper); background:var(--h3)}
.seg{display:inline-flex; border:1px solid var(--ink); border-radius:999px; overflow:hidden}
.seg button{font:500 12px var(--sans); color:var(--ink); background:none; border:0; padding:2px 13px; cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--ink); color:var(--paper)}

/* ── 天際線（立體）與熱力圖（平面） ── */
#sky{display:block; width:100%; touch-action:pan-y}
#sky[hidden]{display:none}
/* 點工人會彈出放大鏡，工人在裡面揮手 */
.sky-wrap{position:relative}
.sky-wrap[hidden]{display:none}
#fx{position:absolute; left:0; top:0; width:100%; pointer-events:none}
.air{position:absolute; inset:0; overflow:hidden; pointer-events:none}
/* 飛機拉橫幅飛過天空，晚上閃航行燈 */
.plane{position:absolute; top:5px; left:0; display:flex; align-items:center; white-space:nowrap; color:var(--ink); animation:fly 38s linear 3s infinite both}
.plane svg{width:34px; height:14px; flex:none}
.plane .rope{width:16px; height:1px; background:var(--muted); flex:none}
.banner{font:500 11.5px/1 var(--sans); color:var(--paper); background:var(--seal); padding:4px 9px 4px 7px; border-radius:2px; clip-path:polygon(0 0,100% 0,100% 100%,0 100%,5px 50%)}
.banner:empty, .banner:empty + .rope{display:none}
@keyframes fly{0%{transform:translateX(-100%); left:0} 72%,100%{transform:translateX(0); left:100%}}
.blink{fill:none}
[data-mode="dark"] .blink{fill:#ff5a4d; animation:blink 1.1s steps(2,jump-none) infinite}
[data-mode="dark"] .blink.b{fill:#5dff9a; animation-delay:.55s}
/* 街上的車，數量跟最近七天的 commit 數成正比 */
.road{position:absolute; pointer-events:none; clip-path:inset(-8px 0 -3px 0)}
.car{position:absolute; left:-16px; width:11px; height:4px; border-radius:2px 3px 1px 1px; background:var(--c); animation:drive var(--dur) linear var(--delay) infinite}
.car::before{content:""; position:absolute; left:2px; top:-3px; width:6px; height:3px; border-radius:2px 2px 0 0; background:color-mix(in srgb,var(--c) 62%,#fff)}
.car::after{content:""; position:absolute; left:1.5px; bottom:-1.5px; width:2.6px; height:2.6px; border-radius:50%; background:#1c1a17; box-shadow:5.6px 0 #1c1a17}
.car.rev{left:auto; right:-16px; animation-name:drive-back}
[data-mode="dark"] .car{box-shadow:6px 0 7px 1px rgba(255,226,140,.75)}
@keyframes drive{to{transform:translateX(calc(var(--w) + 32px))}}
@keyframes drive-back{from{transform:scaleX(-1)} to{transform:translateX(calc(-1 * var(--w) - 32px)) scaleX(-1)}}
/* 新 commit 進來時浮上去的 +N */
.plus{position:absolute; z-index:5; pointer-events:none; font:700 15px var(--mono); color:#fff; background:var(--seal); padding:3px 10px; border-radius:999px; white-space:nowrap; animation:rise-out 3.2s ease-out both}
.plus[hidden]{display:none}
@keyframes rise-out{0%{opacity:0; transform:translateY(10px) scale(.6)} 14%{opacity:1; transform:none} 75%{opacity:1} 100%{opacity:0; transform:translateY(-46px)}}
/* 季節彩蛋 */
.lanterns{position:absolute; left:3%; right:3%; top:-4px; display:flex; justify-content:space-between; border-top:1.5px solid var(--seal)}
.lanterns i{font-style:normal; font-size:19px; line-height:1.5; transform-origin:50% 0; animation:swing 2.6s ease-in-out infinite alternate; animation-delay:calc(var(--i) * -.37s)}
@keyframes swing{from{transform:rotate(-9deg)} to{transform:rotate(9deg)}}
.balloons i{position:absolute; bottom:-30px; left:calc(6% + var(--i) * 13.5%); font-style:normal; font-size:21px; animation:float-up 11s ease-in infinite; animation-delay:calc(var(--i) * -1.7s)}
@keyframes float-up{to{transform:translate(18px,-340px) rotate(8deg)}}
/* 點大樓：當天的 commit */
.day{position:fixed; z-index:12; width:min(320px,calc(100vw - 24px)); max-height:min(380px,70vh); overflow:auto; background:var(--card); color:var(--ink); border:1.5px solid var(--ink); border-radius:6px; box-shadow:6px 6px 0 var(--ink); padding:14px 16px 12px; animation:pop .28s cubic-bezier(.2,1.4,.4,1) both; transform-origin:50% 100%}
.day[hidden]{display:none}
.day h3{font:700 19px/1.3 var(--kai); padding-right:26px}
.day .t{color:var(--muted); font-size:12.5px; margin:2px 0 8px}
.day .x{position:absolute; right:8px; top:6px; width:28px; height:28px; border:0; background:none; color:var(--muted); font-size:20px; line-height:1; cursor:pointer}
.day .x:hover{color:var(--seal)}
.day ul{list-style:none; border-top:1px dashed var(--rule)}
.day li{padding:8px 0 6px; border-bottom:1px dashed var(--rule)}
.day li:last-child{border-bottom:0; padding-bottom:0}
.day .p{display:flex; align-items:baseline; gap:8px; font-weight:500; font-size:14px}
.day .p .n{margin-left:auto; color:var(--muted); font:400 12px var(--mono)}
.day .m{color:var(--muted); font-size:12.5px; line-height:1.5; margin-top:2px}
.day .redact{margin-top:4px} .day .redact i{height:7px; opacity:.5}
.lens{position:absolute; z-index:6; pointer-events:none; animation:pop .4s cubic-bezier(.2,1.5,.4,1) both; transform-origin:100% 60%}
.lens[hidden]{display:none}
.lens canvas{display:block; width:100%; height:100%; border-radius:50%; border:3px solid var(--ink); box-shadow:0 0 0 5px var(--paper), 0 16px 36px -10px rgba(0,0,0,.55)}
.bubble{position:absolute; left:50%; bottom:calc(100% + 14px); transform:translateX(-50%); transform-origin:50% 130%; background:var(--ink); color:var(--paper); font:700 15px/1.4 var(--kai); padding:7px 14px; border-radius:14px; white-space:nowrap; animation:popb .4s cubic-bezier(.2,1.5,.4,1) .12s both}
.bubble::after{content:""; position:absolute; left:50%; top:100%; margin-left:-6px; border:6px solid transparent; border-top-color:var(--ink)}
@keyframes pop{from{opacity:0; transform:scale(.15)}}
@keyframes popb{from{opacity:0; transform:translateX(-50%) scale(.3)}}
/* 平面熱力圖與卡片上的小熱力圖 */
.hm-scroll{overflow-x:auto; padding:4px 2px 8px; scrollbar-width:thin}
.hm{min-width:680px; display:grid; grid-template-columns:22px 1fr; gap:4px 6px}
.hm-months{grid-column:2; display:grid; grid-template-columns:repeat(var(--cols),1fr); gap:3px; font:400 11px/1 var(--mono); color:var(--muted); height:14px}
.hm-months span{white-space:nowrap}
.hm-wd{display:grid; grid-template-rows:repeat(7,1fr); gap:3px; font-size:10px; color:var(--muted); line-height:1}
.hm-wd span{display:flex; align-items:center}
.cells{display:grid; grid-auto-flow:column; grid-template-rows:repeat(7,1fr); grid-template-columns:repeat(var(--cols),1fr); gap:3px}
.cells i{aspect-ratio:1; border-radius:3px; background:var(--h0); display:block}
.cells i[data-l="1"]{background:var(--h1)} .cells i[data-l="2"]{background:var(--h2)}
.cells i[data-l="3"]{background:var(--h3)} .cells i[data-l="4"]{background:var(--h4); box-shadow:var(--glow)}
.cells i.void{visibility:hidden}
.cells i.today{outline:1.5px solid var(--seal); outline-offset:1px; animation:beat 2.2s ease-in-out infinite}
@keyframes beat{50%{outline-offset:3px}}
.cells i[data-d]:hover{outline:1.5px solid var(--ink); outline-offset:1px; animation:none}
.park{display:inline-flex; align-items:center; gap:5px}
.park[hidden]{display:none}
.park i{width:11px; height:11px; border-radius:3px; background:#9bc486; display:block}
.legend{display:inline-flex; align-items:center; gap:3px}
.legend i{width:11px; height:11px; border-radius:3px; display:block}

.tip{
  position:fixed; z-index:10; pointer-events:none; opacity:0; transition:opacity .12s;
  background:var(--ink); color:var(--paper); border-radius:6px; padding:8px 11px;
  font-size:12px; line-height:1.55; max-width:260px; box-shadow:0 8px 24px -8px rgba(0,0,0,.45);
}
.tip.on{opacity:1}
.tip b{font:500 13px var(--mono)}
.tip ul{list-style:none; margin-top:4px; padding-top:4px; border-top:1px solid color-mix(in srgb,var(--paper) 25%,transparent)}
.tip li{display:flex; justify-content:space-between; gap:16px}
.tip li span:last-child{font-family:var(--mono)}
.tip .x{display:block; margin-top:4px; color:#ffd166}

/* ── 進場：捲到才浮上來，印章跟著蓋下去 ── */
.anim .rv{opacity:0; transform:translateY(18px)}
.anim .rv.in{opacity:1; transform:none; transition:opacity .55s, transform .55s cubic-bezier(.2,.8,.2,1); transition-delay:calc(var(--i,0) * 60ms)}
.anim .rv .seal{opacity:0}
.anim .rv.in .seal{animation:press .42s cubic-bezier(.2,1.7,.4,1) both; animation-delay:calc(var(--i,0) * 60ms + .28s)}
@keyframes press{from{opacity:0; transform:rotate(-16deg) scale(2.3)} to{opacity:1; transform:rotate(-3deg)}}

/* ── 動態 + 專案 兩欄 ── */
.cols{display:grid; grid-template-columns:300px 1fr; gap:44px; align-items:start}
.feed{list-style:none}
.feed > li{padding:0 0 18px 18px; border-left:1px solid var(--rule); position:relative}
.feed > li::before{content:""; position:absolute; left:-4.5px; top:7px; width:8px; height:8px; background:var(--paper); border:1.5px solid var(--ink); border-radius:50%}
.feed > li:first-child::before{background:var(--seal); border-color:var(--seal); box-shadow:0 0 0 4px color-mix(in srgb,var(--seal) 22%,transparent)}
.feed .d{display:flex; align-items:baseline; gap:8px; font:500 13px var(--mono)}
.feed .d span{color:var(--muted); font:400 12px var(--sans)}
.feed ul{list-style:none; margin-top:4px}
.feed ul li{padding:5px 0}
.feed .p{display:flex; align-items:baseline; gap:8px; font-weight:500; font-size:14px}
.feed .p .n{margin-left:auto; color:var(--muted); font:400 12px var(--mono)}
.feed .m{color:var(--muted); font-size:12.5px; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}

.seal{
  display:inline-block; flex:none; font:700 11px/1 var(--kai); color:var(--seal);
  border:1.5px solid var(--seal); border-radius:4px; padding:3px 5px 2px; letter-spacing:.08em;
  transform:rotate(-3deg); white-space:nowrap;
}
/* 私有專案的 commit 內容：像被塗黑的文件 */
.redact{display:flex; flex-direction:column; gap:6px; padding:3px 0}
.redact i{display:block; height:9px; border-radius:2px; background:var(--ink); opacity:.78}
.feed .redact{gap:4px}
.feed .redact i{height:7px; opacity:.5}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:20px}
.card{
  background:var(--card); border:1px solid var(--rule); border-top:4px solid var(--heat,var(--rule)); border-radius:4px; padding:16px 18px 14px;
  display:flex; flex-direction:column; gap:12px; position:relative; overflow:hidden;
  box-shadow:4px 4px 0 var(--rule-soft);
}
.anim .card.in{transition:opacity .55s, transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s; transition-delay:calc(var(--i,0) * 60ms), 0s, 0s}
.card:hover, .anim .card.in:hover{transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--ink)}
/* 游標光暈 */
.card::before{
  content:""; position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .25s;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%), color-mix(in srgb,var(--h3) 20%,transparent), transparent 70%);
}
.card:hover::before{opacity:1}
.card header{display:flex; align-items:flex-start; gap:10px}
.card h3{font:700 22px/1.3 var(--kai); overflow-wrap:anywhere}
.card header .seal{margin:4px 0 0 auto}
.card .links{margin-left:auto; display:flex; gap:10px; font-size:12px; white-space:nowrap; padding-top:6px; position:relative}
.card .links a{color:var(--muted); text-decoration:none; border-bottom:1px solid var(--rule)}
.card .links a:hover{color:var(--seal); border-color:var(--seal)}
.card .sum{color:var(--muted); font-size:13.5px; line-height:1.65}
.card .cells{gap:2px} .card .cells i{border-radius:2px}
.nums{display:flex; gap:18px; font-size:12px; color:var(--muted)}
.nums b{font:500 16px var(--mono); color:var(--ink); margin-right:3px; font-variant-numeric:tabular-nums}
.nums .hot b{color:var(--seal)}
.log{border-top:1px dashed var(--rule); padding-top:10px; margin-top:auto}
.log h4{font:400 12px var(--sans); color:var(--muted); margin-bottom:6px; display:flex; gap:6px; align-items:baseline}
.log h4 time{color:var(--ink); font-weight:500}
.log ul{list-style:none}
.log li{display:grid; grid-template-columns:42px minmax(0,1fr); gap:8px; font-size:12.5px; line-height:1.55; padding:2px 0}
.log li time{font:400 11.5px/1.75 var(--mono); color:var(--muted)}
.log li span{overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.log .hush{font-size:11.5px; color:var(--muted); margin-top:6px}
.tags{display:flex; flex-wrap:wrap; gap:6px; font:400 11px var(--mono); color:var(--muted)}
.tags span{border:1px solid var(--rule); border-radius:999px; padding:1px 9px}

/* ── 較早的專案 ── */
.old{list-style:none; border-top:1px solid var(--rule)}
.old li{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(180px,1fr) 104px 80px; gap:20px; align-items:center; padding:12px 4px; border-bottom:1px solid var(--rule)}
.old li:hover{background:color-mix(in srgb,var(--card) 70%,transparent)}
.old .t{display:flex; align-items:baseline; gap:8px; font:700 16px var(--kai)}
.old .t a{text-decoration:none} .old .t a:hover{color:var(--seal)}
.old .s{color:var(--muted); font-size:12.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.strip{display:grid; grid-template-columns:repeat(53,1fr); gap:1.5px}
.strip i{height:14px; border-radius:1.5px; background:var(--h0); display:block}
.strip i[data-l="1"]{background:var(--h1)} .strip i[data-l="2"]{background:var(--h2)}
.strip i[data-l="3"]{background:var(--h3)} .strip i[data-l="4"]{background:var(--h4)}
.old .c{text-align:right; font:500 14px var(--mono); white-space:nowrap} .old .c small{font:400 11px var(--sans); color:var(--muted)}
.old .w{text-align:right; font-size:12px; color:var(--muted)}

footer{margin-top:56px; border-top:2px solid var(--ink); padding:18px 0 48px; display:flex; flex-wrap:wrap; gap:8px 22px; font-size:12.5px; color:var(--muted)}
footer a:hover{color:var(--seal)}
footer .stale{color:var(--seal); font-weight:500}
.empty{color:var(--muted); padding:40px 0; text-align:center}

/* ── RWD：平板 ── */
@media (max-width:1100px){
  h1 .stamp{right:-74px; width:58px; height:58px; font-size:19px; padding:5px}
  .cols{grid-template-columns:260px 1fr; gap:32px}
}
@media (max-width:900px){
  .mast{grid-template-columns:1fr; row-gap:26px; padding-top:52px}
  .ledger{grid-column:1; grid-row:auto}
  .reach{margin-top:0}
  h1{margin-bottom:0}
  .ledger{grid-template-columns:repeat(4,1fr)}
  .ledger div{border-bottom:0; padding:12px 14px 10px}
  .ledger div:nth-child(2n){border-right:1px solid var(--rule)}
  .ledger div:last-child{border-right:0}
  .ledger dd{font-size:28px}
  .cols{grid-template-columns:1fr; gap:10px}
  .sec-h{flex-wrap:wrap; gap:4px 14px}
  /* 窄版把動態收成最近三天，專案卡片才不會被擠到太下面 */
  .feed > li:nth-child(n+4){display:none}
  .old li{grid-template-columns:minmax(0,1.4fr) minmax(140px,1fr) 100px}
  .rhythm{gap:24px}
  .old .w{display:none}
}
/* ── RWD：手機 ── */
@media (max-width:640px){
  .wrap{padding:0 16px}
  .sec.contact{padding:22px 20px 24px; box-shadow:4px 4px 0 var(--ink)}
  .mast{padding-top:64px}
  h1 .stamp{right:2px; top:-60px; width:48px; height:48px; font-size:15px; padding:4px; border-width:2.5px}
  .lede{font-size:15px}
  .ledger{grid-template-columns:1fr 1fr; box-shadow:4px 4px 0 var(--ink)}
  .ledger div:nth-child(2n){border-right:0}
  .ledger div:nth-child(-n+2){border-bottom:1px solid var(--rule)}
  .ledger dd{font-size:26px}
  .sec-h{flex-wrap:wrap; gap:4px 12px}
  .sec-h h2{font-size:23px}
  .sec-h .right{width:100%; margin-left:0; justify-content:space-between; gap:8px}
  .park{display:none}
  .grid{grid-template-columns:1fr}
  .rhythm{grid-template-columns:1fr; gap:22px}
  .rhythm figure:last-child .bars{height:70px}
  .chips{justify-content:flex-start}
  #by-proj{order:3}
  .old li{grid-template-columns:minmax(0,1fr) auto; gap:6px 12px}
  .old .strip{grid-column:1 / -1; order:3}
  .ticker .live{padding:0 10px 0 14px}
}
@media (hover:none){
  .card:hover, .anim .card.in:hover{transform:none; box-shadow:4px 4px 0 var(--rule-soft)}
  .card:hover::before{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  body::before, .ticker .rail, .ticker .live::before, .cells i.today, .lens, .bubble, .day, .lanterns i{animation:none}
  .plane{animation:none; left:12%}
  .car, .balloons, .plus{display:none}
  h1 .hl{animation:none; background-size:100% 38%}
  h1 .stamp{animation:none}
  .ticker{overflow-x:auto}
}