*{margin:0;padding:0;box-sizing:border-box}
:root{--bg:#FAF8F5;--card-bg:#fff;--text:#2C2825;--text-light:#5A534D;--text-muted:#756C66;
 --border:#E8E0D6;--accent:#C8602A;--accent-text:#A0481C;--accent-solid:#B0521F;--radius:14px;
 --shadow:0 1px 3px rgba(44,40,37,.06),0 8px 24px rgba(44,40,37,.05)}
body{font-family:'Noto Sans TC',-apple-system,sans-serif;background:var(--bg);color:var(--text);line-height:1.75;-webkit-font-smoothing:antialiased}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;padding:12px 18px;background:var(--accent-solid);color:#fff;text-decoration:none}
.skip-link:focus{left:0}
header{background:#1A1814;position:sticky;top:0;z-index:100}
.hinner{max-width:900px;margin:0 auto;padding:0 20px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo{color:#fff;text-decoration:none;font-family:'Noto Serif TC',serif;font-weight:700;font-size:1.02em;white-space:nowrap}
.hnav{display:flex;gap:4px}
.hnav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:8px;color:rgba(255,255,255,.72);text-decoration:none;font-size:.94em;white-space:nowrap}
.hnav a:hover{color:#fff;background:rgba(255,255,255,.08)}
.wrap{max-width:900px;margin:0 auto;padding:28px 20px 56px}
.crumb{font-size:.82em;color:var(--text-muted);margin-bottom:2px}
.crumb a{color:var(--text-muted);text-decoration:none;display:inline-block;padding:9px 3px}
.crumb a:hover{color:var(--accent-text);text-decoration:underline}
h1{font-family:'Noto Serif TC',serif;font-size:clamp(1.6rem,4vw,2.1rem);font-weight:700;line-height:1.35;letter-spacing:.02em;margin-bottom:6px}
.count{font-size:.95em;color:var(--text-light);margin-bottom:14px}
.lede{font-size:1.02em;line-height:1.95;color:var(--text-light);max-width:36em;margin-bottom:30px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px}
.project-card{background:var(--card-bg);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);border:1px solid var(--border);transition:transform .2s,box-shadow .2s;text-decoration:none;color:inherit;display:flex;flex-direction:column}
.project-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(44,40,37,.08),0 16px 40px rgba(44,40,37,.06)}
.card-thumb{width:100%;height:180px;overflow:hidden;background:#EFE9E1}
.card-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s ease;display:block}
.project-card:hover .card-thumb img{transform:scale(1.07)}
.card-body{padding:18px 20px 20px;flex:1;display:flex;flex-direction:column}
/* 這行要比 .card-body p 更明確，否則日期會吃到 flex:1 與 margin-bottom，
   把標題往下推出一條空行（2026-07-26 IC 抓到「標題前面多了空行」） */
.card-body .card-date{font-size:.8em;color:var(--text-muted);margin:0 0 4px;flex:none}
.card-body h3{font-size:1.06em;font-weight:700;margin:0 0 6px;line-height:1.45}
.card-body p{font-size:.92em;color:var(--text-light);flex:1;margin-bottom:12px}
.card-meta{display:flex;justify-content:flex-end}
.card-views{font-size:.82em;color:var(--text-muted)}
.others{margin-top:48px;padding-top:24px;border-top:1px solid var(--border)}
.others h2{font-family:'Noto Serif TC',serif;font-size:1.15em;margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:12px;border:1.5px solid var(--border);background:#fff;color:var(--text-light);text-decoration:none;font-size:.95em}
.chips a:hover{border-color:var(--accent);color:var(--accent-text);background:#FDF0E8}
.chips .n{font-size:.85em;color:var(--text-muted);font-variant-numeric:tabular-nums}
footer{text-align:center;padding:24px 20px 40px;color:var(--text-muted);font-size:.85em}
footer a{color:var(--accent-text);text-decoration:none}
a:focus-visible{outline:3px solid var(--accent-text);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}
@media(max-width:600px){.wrap{padding:20px 16px 44px}.hinner{padding:0 16px}}