:root { --ink:#1c2430; --muted:#687180; --paper:#fbfaf7; --line:#e6e2da; --accent:#e4572e; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif; line-height:1.8; }
a { color:inherit; text-decoration-thickness:1px; text-underline-offset:4px; }
.site-header, main, footer { width:min(920px,calc(100% - 48px)); margin-inline:auto; }
.site-header { min-height:88px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.brand { font-weight:750; text-decoration:none; letter-spacing:-.02em; } nav { display:flex; gap:24px; font-size:.93rem; } nav a { text-decoration:none; color:var(--muted); }
.hero { padding:112px 0 88px; max-width:700px; } .eyebrow { margin:0 0 10px; color:var(--accent); font-size:.78rem; font-weight:750; letter-spacing:.1em; text-transform:uppercase; }
h1,h2,h3 { margin:0; letter-spacing:-.045em; line-height:1.18; } .hero h1 { font-size:clamp(2.7rem,7vw,5.4rem); } .hero > p:last-child { margin:24px 0 0; color:var(--muted); font-size:1.08rem; }
.articles { padding:44px 0 110px; border-top:1px solid var(--line); } .section-heading { margin-bottom:28px; } .section-heading h2 { font-size:2rem; }
.post-card { padding:28px 0; border-top:1px solid var(--line); max-width:720px; } .meta { margin:0 0 8px; color:var(--muted); font-size:.86rem; } .post-card h3 { font-size:1.55rem; } .post-card h3 a { text-decoration:none; } .post-card > p:not(.meta) { color:var(--muted); margin:12px 0; } .read-more,.project-link { color:var(--accent); font-weight:700; }
.about { border-top:1px solid var(--line); padding:52px 0 105px; max-width:620px; font-size:1.06rem; } .about p:last-child { margin:0; }
.post { padding:50px 0 110px; max-width:760px; } .back { display:inline-block; margin-bottom:60px; color:var(--muted); font-size:.92rem; } .post article { max-width:680px; } .post h1 { font-size:clamp(2.45rem,6vw,4.5rem); margin-bottom:28px; } .lead { color:var(--muted); font-size:1.22rem; margin:0 0 42px; } .post article > p { margin:0 0 24px; font-size:1.05rem; }
footer { padding:30px 0 45px; border-top:1px solid var(--line); color:var(--muted); font-size:.86rem; }
@media (max-width:600px) { .site-header,main,footer { width:min(100% - 32px,920px); } .site-header { min-height:72px; } .hero { padding:76px 0 62px; } nav { gap:16px; } .post { padding-top:34px; } .back { margin-bottom:42px; } }