:root { --bg:#efede8; --ink:#111114; --muted:rgba(17,17,20,.58); --red:#e4202f; --gray:#e2dfd8; }
* { box-sizing:border-box; margin:0; }
body { font:400 17px/1.7 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; background:var(--bg); color:var(--ink); min-height:100dvh; -webkit-font-smoothing:antialiased; }
a { color:inherit; } img { max-width:100%; display:block; } .orbs { display:none; }
.bar { position:sticky; top:10px; z-index:20; margin:10px auto 0; width:min(1100px,100% - 20px); display:flex; align-items:center; gap:16px; padding:8px 20px; border-radius:999px; background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); border:1px solid rgba(0,0,0,.06); }
.logo img { height:26px; width:auto; filter:invert(1); } .bar nav { margin-left:auto; display:flex; gap:20px; font-size:.93rem; font-weight:500; color:var(--muted); } .bar nav a:hover, .bar nav a.on { color:var(--ink); }
@media (max-width:700px){ .bar nav a:not(.on){ display:none; } }
.wrap { width:min(1100px,100% - 28px); margin:0 auto; padding:36px 0 20px; }
h1 { font-size:clamp(1.9rem,4.4vw,3rem); line-height:1.05; letter-spacing:-.035em; font-weight:800; margin-bottom:14px; }
h2 { font-size:1.6rem; margin:2rem 0 .6rem; line-height:1.2; letter-spacing:-.02em; font-weight:800; } h3 { font-size:1.2rem; margin:1.4rem 0 .4rem; font-weight:700; }
.lead,.muted,.meta { color:var(--muted); }
.post-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px; margin:24px 0; }
.post-card { text-decoration:none; background:#fff; border-radius:28px; padding:10px; display:flex; flex-direction:column; transition:transform .2s; } .post-card:hover { transform:translateY(-4px); }
.post-card:nth-child(4n+2) { background:#151519; color:#fff; } .post-card:nth-child(4n+2) p, .post-card:nth-child(4n+2) time { color:rgba(255,255,255,.7); }
.pc-img { aspect-ratio:16/10; background:#fff; border-radius:20px; overflow:hidden; } .pc-img img { width:100%; height:100%; object-fit:contain; }
.pc-body { padding:12px 10px 10px; display:grid; gap:6px; } .pc-body time { color:var(--muted); font-size:.8rem; } .pc-body h2 { font-size:1.08rem; margin:0; line-height:1.25; } .pc-body p { color:var(--muted); font-size:.92rem; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.pager { display:flex; gap:8px; justify-content:center; margin:20px 0; } .pager a { padding:8px 16px; border-radius:999px; background:#fff; text-decoration:none; font-weight:600; } .pager a.on { background:var(--ink); color:#fff; }
.article { background:#fff; border-radius:32px; padding:clamp(22px,4vw,48px); max-width:820px; margin:0 auto; }
.crumbs { color:var(--muted); font-size:.85rem; margin-bottom:10px; } .crumbs a { text-decoration:none; }
.cover { width:100%; max-height:420px; object-fit:contain; background:#fff; border-radius:22px; margin:18px 0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.prose p,.prose ul,.prose ol,.prose blockquote,.prose table { margin:0 0 1rem; } .prose ul,.prose ol { padding-left:1.4rem; } .prose li { margin:.25rem 0; }
.prose a { color:var(--red); text-decoration:underline; } .prose blockquote { border-left:4px solid var(--red); padding-left:14px; color:var(--muted); }
.prose table { border-collapse:collapse; width:100%; } .prose th,.prose td { border:1px solid rgba(0,0,0,.12); padding:8px 12px; text-align:left; }
.cta { margin:2rem 0 0; padding:26px; background:#151519; color:#fff; border-radius:26px; display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .cta h3 { margin:0; flex-basis:100%; } .cta p { flex-basis:100%; color:rgba(255,255,255,.7); }
.btn { display:inline-block; padding:13px 24px; border-radius:999px; font-weight:700; text-decoration:none; background:var(--red); color:#fff; } .btn.ghost { background:rgba(255,255,255,.16); }
.related { max-width:1100px; margin:30px auto 0; }
.foot { text-align:center; color:var(--muted); font-size:.9rem; padding:30px 16px 50px; display:grid; gap:4px; }