:root { color-scheme: light; --ink:#17242e; --muted:#687984; --paper:#f7f6f2; --line:#dfe3df; --accent:#287a72; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.8 -apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans CJK SC","PingFang SC","Microsoft YaHei",sans-serif; }
a { color:inherit; text-decoration:none; }
a:hover { color:var(--accent); }
.shell { width:min(100% - 40px,1080px); margin-inline:auto; }
.site-header { border-bottom:1px solid var(--line); background:#fcfcf9; }
.header-inner { min-height:78px; display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { display:flex; align-items:center; gap:12px; font-size:18px; font-weight:750; letter-spacing:-.02em; }
.brand small { font-size:14px; font-weight:500; color:var(--muted); margin-left:4px; }
.brand-mark { display:grid; place-items:center; width:38px; height:38px; border-radius:11px; background:#173a38; color:#fff; font-weight:800; }
.brand-mark span { color:#76c6b4; }
nav { display:flex; gap:30px; font-size:14px; color:#52636d; }
nav a:hover, .read-link, .back-link, .article-end a, .about-page a { color:var(--accent); }
.hero { padding:94px 0 88px; border-bottom:1px solid var(--line); }
.eyebrow { margin:0 0 18px; color:var(--accent); font-size:12px; font-weight:700; letter-spacing:.17em; }
.hero h1 { margin:0; font-size:clamp(46px,7vw,82px); line-height:1.22; font-weight:750; letter-spacing:-.07em; }
.hero h1 em { color:var(--accent); font-style:normal; }
.lead { max-width:550px; margin:30px 0 0; color:#5c6c75; font-size:18px; line-height:1.9; }
.list-section { padding:54px 0 96px; }
.section-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:22px; }
.section-head h2 { margin:0; font-size:24px; letter-spacing:-.04em; }
.section-head span { color:var(--muted); font-size:13px; }
.post-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.post-card { min-height:250px; padding:30px; background:#fff; border:1px solid var(--line); border-radius:14px; display:flex; flex-direction:column; transition:transform .2s,border-color .2s; }
.post-card:hover { transform:translateY(-2px); border-color:#9dc9bf; }
.post-meta { display:flex; align-items:center; gap:15px; color:var(--muted); font-size:12px; }
.post-meta span { color:var(--accent); font-weight:700; }
.post-card h2 { margin:18px 0 10px; font-size:23px; line-height:1.45; letter-spacing:-.035em; }
.post-card p { margin:0 0 22px; color:#66747d; font-size:14px; line-height:1.8; }
.read-link { margin-top:auto; font-size:13px; font-weight:700; }
.read-link span { margin-left:3px; }
.article { max-width:760px; margin:0 auto; padding:52px 0 110px; }
.back-link { font-size:13px; }
.article-head { margin:70px 0 55px; padding-bottom:42px; border-bottom:1px solid var(--line); }
.article-head h1 { margin:18px 0 18px; font-size:clamp(36px,5vw,54px); line-height:1.34; letter-spacing:-.055em; }
.article-intro { margin:0; color:#63717a; font-size:19px; line-height:1.8; }
.article-body { max-width:680px; }
.article-body section { margin:0 0 40px; }
.article-body h2 { margin:0 0 12px; font-size:23px; letter-spacing:-.03em; }
.article-body p { margin:0; color:#33424b; font-size:17px; line-height:2.05; }
.article-end { display:flex; justify-content:space-between; gap:20px; border-top:1px solid var(--line); padding-top:25px; color:var(--muted); font-size:14px; }
.about-page { max-width:720px; min-height:60vh; padding:92px 0; }
.about-page h1 { margin:0 0 26px; font-size:clamp(36px,5vw,54px); letter-spacing:-.055em; }
.about-page p:not(.eyebrow) { color:#4c5b64; font-size:18px; line-height:2; }
.about-page a { text-decoration:underline; text-underline-offset:3px; }
.site-footer { border-top:1px solid var(--line); color:#819098; font-size:13px; }
.footer-inner { min-height:80px; display:flex; justify-content:space-between; align-items:center; gap:20px; }
@media (max-width:650px) { .shell { width:min(100% - 32px,1080px); } .header-inner { min-height:68px; } nav { gap:16px; } .hero { padding:68px 0 62px; } .post-grid { grid-template-columns:1fr; } .post-card { min-height:220px; padding:24px; } .article { padding-top:32px; } .article-head { margin:46px 0 40px; } .footer-inner { align-items:flex-start; flex-direction:column; justify-content:center; gap:2px; padding:18px 0; } }