:root { --ink:#14231f; --paper:#fffdf6; --moss:#1d6b59; --mist:#dff1e8; --sun:#f7c95c; --line:#cde2d8; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:radial-gradient(circle at 8% 8%, #fff2bf 0, transparent 28rem), var(--paper); font:16px/1.65 ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }
a { color:#075b4a; text-underline-offset:3px; }
a:hover { color:#b4491b; }
.shell { width:min(1080px, calc(100% - 40px)); margin:auto; }
nav { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:24px 0; }
.brand { font-size:.9rem; font-weight:800; letter-spacing:.11em; text-decoration:none; text-transform:uppercase; }
.navlinks { display:flex; flex-wrap:wrap; gap:16px; font-size:.92rem; }
.hero { padding:78px 0 48px; max-width:780px; }
.kicker { display:inline-block; margin-bottom:16px; color:var(--moss); font-size:.78rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
h1 { margin:0; font-size:clamp(2.7rem, 8vw, 6rem); line-height:.98; letter-spacing:-.065em; }
h2 { margin:0 0 12px; font-size:clamp(1.5rem, 3vw, 2.3rem); line-height:1.08; letter-spacing:-.035em; }
p { max-width:72ch; }
.lede { font-size:1.18rem; max-width:58ch; }
.pill { display:inline-block; margin:8px 8px 0 0; padding:5px 10px; border:1px solid var(--line); border-radius:999px; color:#315b50; background:#fff; font-size:.82rem; }
.grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; padding:34px 0 58px; }
.card { display:flex; min-height:270px; flex-direction:column; justify-content:space-between; padding:25px; border:1px solid var(--line); border-radius:18px; background:rgba(255,255,255,.8); box-shadow:0 12px 28px rgba(25,72,59,.06); }
.card:nth-child(2) { background:#e5f4ee; }
.card:nth-child(3) { background:#fff0d4; }
.card p { margin:.6rem 0 1.4rem; }
.article { max-width:780px; padding:58px 0 74px; }
.article header { margin-bottom:38px; }
.article .meta { color:#52746a; font-size:.92rem; }
.callout { margin:32px 0; padding:19px 22px; border-left:4px solid var(--sun); background:#fff5d8; }
footer { border-top:1px solid var(--line); padding:28px 0 45px; color:#52746a; font-size:.9rem; }
@media (max-width:760px) { .grid { grid-template-columns:1fr; } nav { align-items:flex-start; flex-direction:column; } .hero { padding-top:42px; } }