@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Figtree:wght@400;600;700&display=swap');
:root{--ink:#1b1f1c;--paper:#f2efe6;--pine:#1f4d3a;--line:#d7d0c2}
*{box-sizing:border-box}body{margin:0;font-family:Figtree,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55}
a{color:inherit;text-decoration:none}
.n{position:fixed;inset:0 0 auto;z-index:10;display:flex;justify-content:space-between;align-items:center;padding:1.1rem 5vw;background:linear-gradient(#f2efe6f2,#f2efe600);backdrop-filter:blur(8px)}
.brand{font-family:"Instrument Serif",serif;font-size:1.65rem}
.n nav a{margin-left:1.1rem;font-weight:600;font-size:.92rem}
.hero{min-height:100vh;padding:0 5vw 10vh;display:grid;align-content:end;background:radial-gradient(ellipse at 75% 15%,rgba(196,163,90,.35),transparent 50%),linear-gradient(165deg,#e7e2d4,#f2efe6 45%,#d9e3db);position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;right:-8vw;top:18vh;width:42vw;height:42vw;border:1px solid rgba(31,77,58,.25);border-radius:42% 58% 55% 45%;animation:spin 22s linear infinite}
.hero h1{font-family:"Instrument Serif",serif;font-size:clamp(2.9rem,7.5vw,5.4rem);line-height:.94;margin:0 0 1rem;max-width:12ch;position:relative;z-index:1;animation:up .8s ease both}
.hero p{max-width:38ch;font-size:1.12rem;position:relative;z-index:1;animation:up .8s .1s ease both}
.btn{display:inline-block;margin-top:1.25rem;background:var(--pine);color:#f2efe6;padding:.9rem 1.3rem;font-weight:700;position:relative;z-index:1;animation:up .8s .18s ease both}
.sec{padding:5.2rem 5vw}.sec h2{font-family:"Instrument Serif",serif;font-size:clamp(1.9rem,4vw,2.7rem);margin:0 0 .8rem}
.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem;margin-top:2rem}
.grid article{padding:1.25rem;border-top:2px solid var(--pine);background:#fff8}
.foot{padding:2rem 5vw;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-size:.9rem}
@keyframes up{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
@keyframes spin{to{transform:rotate(360deg)}}
@media(max-width:800px){.n nav{display:none}.grid{grid-template-columns:1fr}}