:root{--bg:#f7f6f2;--card:#fff;--ink:#1d2330;--sub:#5d6677;--line:#e2e0d8;--accent:#c4322b;--accent2:#1f5f8b}
@media (prefers-color-scheme:dark){:root{--bg:#14171d;--card:#1c2028;--ink:#eceef2;--sub:#a3abba;--line:#2d333f;--accent:#ee6d66;--accent2:#6db3e0}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font:16px/1.8 "Hiragino Sans","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif}
a{color:inherit;text-decoration:none}
.top{display:flex;align-items:baseline;gap:12px;padding:14px max(16px,calc((100vw - 1040px)/2));border-bottom:3px solid var(--accent);background:var(--card)}
.logo{font-size:22px;font-weight:800;letter-spacing:.04em}
.tag{color:var(--sub);font-size:13px}
.cats{display:flex;gap:6px;overflow-x:auto;padding:10px max(16px,calc((100vw - 1040px)/2));white-space:nowrap}
.cats a{padding:4px 12px;border:1px solid var(--line);border-radius:99px;background:var(--card);font-size:14px}
.cats a:hover{border-color:var(--accent)}
.cats small{color:var(--sub)}
main{max-width:1040px;margin:0 auto;padding:12px 16px 40px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.card a{display:block;height:100%}
.card:hover{border-color:var(--accent)}
.card img,.noimg{width:100%;aspect-ratio:3/2;object-fit:cover;background:var(--line);display:block}
.card h2{font-size:17px;line-height:1.5;margin:4px 14px 6px}
.card p{margin:0 14px 14px;color:var(--sub);font-size:14px;line-height:1.7;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.meta{display:flex;gap:10px;align-items:center;margin:10px 14px 0;font-size:12px;color:var(--sub)}
.post .meta{margin:0}
.cat{color:#fff;background:var(--accent2);padding:0 8px;border-radius:4px}
.post{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:20px clamp(16px,4vw,48px) 28px;max-width:760px;margin:12px auto}
.post h1{font-size:clamp(22px,4vw,30px);line-height:1.5;margin:10px 0 16px}
.hero{width:100%;border-radius:8px;margin-bottom:18px}
.prose h2{font-size:21px;border-left:5px solid var(--accent);padding-left:10px;margin:2em 0 .6em}
.prose h3{font-size:18px;margin:1.6em 0 .5em}
.prose p{margin:0 0 1.1em}
.prose figure{margin:1.4em 0}
.prose img{max-width:100%;border-radius:6px}
.prose figcaption{color:var(--sub);font-size:13px;text-align:center}
.src{margin-top:28px;padding:12px 14px;background:var(--bg);border-radius:8px;font-size:13px;color:var(--sub);line-height:1.7;overflow-wrap:anywhere}
.src a{color:var(--accent2);text-decoration:underline}
.pager{display:flex;justify-content:space-between;align-items:center;margin-top:24px}
.pager a{color:var(--accent2)}
.empty{color:var(--sub);text-align:center;padding:48px 0}
footer{color:var(--sub);font-size:12px;text-align:center;padding:24px 16px 40px}