:root { --ink:#15211e; --muted:#5d6a66; --line:#d9e1dc; --wash:#f4f7f4; --paper:#fcfdfb; --accent:#196a50; --accent-dark:#114735; --serif: Georgia, 'Times New Roman', serif; --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; }
* { box-sizing:border-box; } html { scroll-behavior:smooth; } body { margin:0; background:var(--paper); color:var(--ink); font:16px/1.65 var(--sans); } .wrap { width:min(1120px, calc(100% - 40px)); margin:auto; }
.site-header { min-height:80px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); } .brand { color:var(--ink); font:700 20px/1 var(--serif); text-decoration:none; letter-spacing:-.02em; } .brand span { color:var(--accent); } nav { display:flex; gap:24px; } nav a, .site-footer a { color:var(--muted); font-size:14px; text-decoration:none; } nav a:hover, .site-footer a:hover { color:var(--accent); }
.hero { padding:112px 0 86px; max-width:880px; margin-left:max(20px, calc((100% - 1120px)/2)); } .eyebrow { margin:0 0 15px; color:var(--accent); font-size:12px; font-weight:750; letter-spacing:.12em; text-transform:uppercase; } h1,h2,h3 { font-family:var(--serif); letter-spacing:-.035em; line-height:1.1; } .hero h1 { max-width:750px; margin:0; font-size:clamp(44px, 7vw, 78px); } .lede { max-width:610px; margin:28px 0 34px; color:var(--muted); font-size:20px; } .button { display:inline-flex; gap:14px; align-items:center; padding:13px 18px; border-radius:4px; color:white; background:var(--accent); font-weight:700; text-decoration:none; } .button:hover { background:var(--accent-dark); }
.principles { display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line); border:1px solid var(--line); } .principles article { min-height:168px; padding:28px; background:var(--paper); } .principles strong { font-family:var(--serif); font-size:21px; } .principles p { margin:8px 0 0; color:var(--muted); font-size:14px; }
.guide-section { padding:104px 0; } .section-heading { margin-bottom:34px; } .section-heading h2 { margin:0; font-size:42px; } .guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; } .guide-card { min-height:285px; display:flex; flex-direction:column; padding:27px; border:1px solid var(--line); color:var(--ink); text-decoration:none; transition:transform .18s ease, border-color .18s ease; } .guide-card:hover { border-color:var(--accent); transform:translateY(-4px); } .guide-number { margin:0; color:var(--accent); font-size:13px; font-weight:750; } .guide-card h3 { margin:46px 0 10px; font-size:28px; } .guide-card p:not(.guide-number) { color:var(--muted); font-size:14px; } .guide-card span { margin-top:auto; color:var(--accent); font-size:14px; font-weight:700; }
.statement { padding:90px 0; background:#e8f0ea; } .quote { max-width:800px; margin:0; font:clamp(29px, 4vw, 50px)/1.14 var(--serif); letter-spacing:-.035em; }.site-footer { display:flex; justify-content:space-between; gap:20px; padding:30px 0; color:var(--muted); font-size:12px; } .site-footer p { margin:0; } .site-footer div { display:flex; gap:17px; }
.article-shell { width:min(800px, calc(100% - 40px)); padding:46px 0 92px; } .back-link { color:var(--accent); font-size:14px; font-weight:700; text-decoration:none; } .article { margin-top:44px; }.article h1 { margin:0 0 26px; font-size:clamp(40px, 6vw, 62px); }.article h2 { margin:54px 0 16px; font-size:31px; }.article h3 { margin:35px 0 10px; font-size:24px; }.article p, .article li { color:#35423e; }.article a { color:var(--accent); }.article blockquote { margin:30px 0; padding:8px 0 8px 24px; border-left:3px solid var(--accent); color:var(--ink); font:26px/1.3 var(--serif); }.article code { padding:2px 5px; background:var(--wash); font-size:.9em; }.article hr { margin:44px 0; border:0; border-top:1px solid var(--line); }.table-wrap { overflow-x:auto; margin:24px 0; }.article table { width:100%; border-collapse:collapse; font-size:14px; }.article th,.article td { padding:12px; border:1px solid var(--line); vertical-align:top; text-align:left; }.article th { background:var(--wash); color:var(--ink); }
@media (max-width:760px) { .site-header { min-height:68px; } nav { gap:14px; } nav a { font-size:12px; }.hero { padding:74px 0 58px; }.principles,.guide-grid { grid-template-columns:1fr; }.principles article { min-height:0; }.guide-section { padding:70px 0; }.guide-card { min-height:235px; }.site-footer { flex-direction:column; }.article-shell { padding-top:34px; } }