:root { --ink:#17211b; --muted:#6d756f; --cream:#f7f4ed; --paper:#fffdf8; --line:#e6e1d7; --green:#245c48; --mint:#dceee2; --orange:#e87d4d; --shadow:0 18px 50px rgba(33,43,36,.08); }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; line-height:1.6; }
a { color:inherit; text-decoration:none; } .container { width:min(1120px,calc(100% - 40px)); margin:0 auto; } .narrow { max-width:760px; }
.site-header { background:var(--paper); border-bottom:1px solid var(--line); } .nav-wrap { min-height:76px; display:flex; align-items:center; justify-content:space-between; gap:24px; }
.brand { display:inline-flex; align-items:center; gap:10px; font-weight:800; letter-spacing:-.02em; } .brand-mark { display:grid; place-items:center; width:32px; height:32px; color:#fff; background:var(--green); border-radius:10px 10px 10px 3px; }
.nav { display:flex; gap:28px; color:var(--muted); font-size:.95rem; } .nav a { padding:26px 0 22px; border-bottom:3px solid transparent; } .nav a:hover,.nav a.active { color:var(--green); border-color:var(--orange); }
.hero { padding:82px 0 95px; background:var(--cream); } .hero-grid { display:grid; grid-template-columns:1.05fr .95fr; align-items:center; gap:72px; }
.eyebrow { margin:0 0 14px; color:var(--orange); font-size:.75rem; font-weight:800; letter-spacing:.16em; text-transform:uppercase; }
h1,h2,h3,p { margin-top:0; } h1 { max-width:700px; margin-bottom:22px; font-size:clamp(2.8rem,6vw,5.2rem); line-height:1.02; letter-spacing:-.07em; } h2 { margin-bottom:14px; font-size:clamp(2rem,4vw,3.1rem); line-height:1.05; letter-spacing:-.05em; } h3 { margin-bottom:12px; font-size:1.45rem; line-height:1.15; letter-spacing:-.03em; }
.hero-copy { max-width:560px; margin-bottom:30px; color:var(--muted); font-size:1.15rem; } .button,.subscribe-form button { display:inline-flex; align-items:center; gap:14px; border:0; border-radius:6px; color:#fff; background:var(--green); padding:13px 19px; font-weight:750; cursor:pointer; } .button:hover,.subscribe-form button:hover { background:#164734; }
.hero-art { position:relative; min-height:380px; overflow:hidden; border-radius:46% 46% 12px 12px; background:linear-gradient(160deg,#f9c87d,#f4e2ae 48%,#b8d8bd); box-shadow:var(--shadow); } .sun { position:absolute; top:62px; right:20%; width:132px; height:132px; border-radius:50%; background:#f9a85e; } .hill { position:absolute; bottom:-90px; width:120%; height:240px; border-radius:50% 50% 0 0; } .hill-one { left:-12%; background:#7caf8a; transform:rotate(-7deg); } .hill-two { right:-28%; bottom:-118px; background:#3f7d65; transform:rotate(9deg); } .art-label { position:absolute; left:28px; bottom:24px; color:#fff; font-size:.72rem; font-weight:800; letter-spacing:.18em; }
.section { padding:94px 0; } .section-heading { display:flex; align-items:end; justify-content:space-between; gap:24px; margin-bottom:30px; } .text-link,.read-link { color:var(--green); font-weight:750; } .text-link:hover,.read-link:hover { color:var(--orange); }
.cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; } .post-card { min-height:280px; padding:28px; border:1px solid var(--line); background:#fff; border-radius:8px; } .post-card:hover { box-shadow:var(--shadow); transform:translateY(-3px); transition:.2s ease; } .post-meta { display:flex; justify-content:space-between; gap:16px; margin-bottom:24px; color:var(--orange); font-size:.74rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; } .post-card p,.full-post p,.page-intro p,.about-copy p { color:var(--muted); } .read-link { display:inline-flex; gap:10px; font-size:.92rem; }
.newsletter { display:flex; justify-content:space-between; align-items:center; gap:35px; margin-bottom:96px; padding:42px; border-radius:10px; background:var(--mint); } .newsletter h2 { margin-bottom:8px; } .newsletter p:not(.eyebrow) { margin-bottom:0; color:var(--muted); } .subscribe-form { display:flex; min-width:min(100%,390px); } .subscribe-form input { min-width:0; flex:1; border:1px solid var(--line); border-right:0; padding:13px 15px; border-radius:6px 0 0 6px; font:inherit; } .subscribe-form button { border-radius:0 6px 6px 0; }
.page-intro { padding:84px 0 65px; background:var(--cream); } .page-intro h1 { font-size:clamp(2.8rem,6vw,4.7rem); } .page-intro p:not(.eyebrow) { max-width:630px; font-size:1.15rem; }
.posts-layout { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:70px; } .full-post { padding-bottom:36px; margin-bottom:36px; border-bottom:1px solid var(--line); } .full-post h2 { font-size:2.25rem; } .sidebar { display:flex; flex-direction:column; gap:22px; } .sidebar-box { display:flex; flex-direction:column; gap:12px; padding:25px; border:1px solid var(--line); border-radius:8px; } .sidebar-box a { color:var(--green); font-weight:700; } .accent-box { background:var(--mint); border:0; } .accent-box p:not(.eyebrow) { margin:0; font-size:1.1rem; font-weight:700; }
.about-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:start; } .about-pullquote { color:var(--green); font-size:clamp(2rem,4vw,3.2rem); line-height:1.12; letter-spacing:-.05em; } .about-copy { max-width:600px; }
.site-footer { padding:28px 0; border-top:1px solid var(--line); color:var(--muted); font-size:.9rem; } .footer-inner { display:flex; justify-content:space-between; gap:20px; } .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:760px) { .container { width:min(100% - 28px,620px); } .nav-wrap { min-height:68px; } .nav { gap:16px; } .nav a { padding:22px 0 19px; } .hero { padding:58px 0 70px; } .hero-grid,.about-grid,.posts-layout { grid-template-columns:1fr; gap:38px; } .hero-art { min-height:280px; } .cards-grid { grid-template-columns:1fr; } .section { padding:68px 0; } .section-heading,.newsletter,.footer-inner { align-items:flex-start; flex-direction:column; } .newsletter { margin-bottom:68px; padding:28px; } .subscribe-form { width:100%; min-width:0; } .sidebar { order:-1; } }