@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&display=swap');
:root{--ink:#173b3a;--muted:#5c7470;--teal:#167c70;--mint:#e6f4ef;--sand:#fbf5e9;--coral:#f18b69}
*{box-sizing:border-box}body{margin:0;font-family:Manrope,Arial,sans-serif;color:var(--ink);background:#fffefa;line-height:1.65}.site-header{height:auto;min-height:76px;padding:16px max(5vw,24px);display:flex;align-items:center;justify-content:space-between;gap:24px;border-bottom:1px solid #e9eee9;background:#fffefa}.logo{font-weight:800;font-size:1.2rem;text-decoration:none;color:var(--ink);white-space:nowrap}.site-header nav{display:flex;gap:24px;flex-wrap:wrap}.site-header nav a{font-size:.9rem;color:var(--muted);text-decoration:none;font-weight:700}.site-header nav a:hover,.site-header nav a.active{color:var(--teal)}main{max-width:1120px;margin:auto;padding:56px 28px}.hero{max-width:none;padding:72px max(calc((100% - 1064px)/2),6vw);display:grid;grid-template-columns:1.15fr .85fr;align-items:center;gap:50px;background:linear-gradient(120deg,#e6f4ef,#f9f3e6)}.hero h1{font-size:clamp(2.7rem,6vw,5rem);line-height:1.08;letter-spacing:-.06em;margin:10px 0 22px}.hero-copy>p:not(.eyebrow){max-width:580px;color:#496461;font-size:1.08rem}.eyebrow{color:var(--teal);font-size:.75rem;text-transform:uppercase;letter-spacing:.16em;font-weight:800}.hero-art{height:320px;border-radius:48% 52% 42% 58%;background:radial-gradient(circle at 40% 35%,#fff9e9,#f7c7a6);display:grid;place-items:center;transform:rotate(4deg)}.hero-art span{font-size:clamp(8rem,18vw,13rem);filter:drop-shadow(0 16px 12px #9a614433);transform:rotate(-4deg)}.button{display:inline-flex;gap:24px;align-items:center;margin-top:22px;padding:13px 20px;border-radius:999px;background:var(--teal);color:white;text-decoration:none;font-weight:800}.button:hover{background:#105e56}.button.light{background:#fff;color:var(--teal)}.section{padding-top:70px;padding-bottom:75px}.section-heading{text-align:center;margin-bottom:28px}.section h2,.banner h2{font-size:2rem;letter-spacing:-.04em;margin:4px 0 18px}.cards{display:grid;gap:18px}.three{grid-template-columns:repeat(3,1fr)}.card{background:#fff;border:1px solid #e9eee9;border-radius:18px;padding:26px}.card .icon{font-size:2rem}.card h3{margin:12px 0 6px}.card p,.species-card p,.habitat p,.fact-list p{color:var(--muted);margin:0}.banner{margin:0 auto 60px;max-width:1064px;padding:36px 42px;border-radius:22px;background:var(--teal);color:white;display:flex;align-items:center;justify-content:space-between;gap:24px}.banner .eyebrow{color:#bce8d8}.banner p:not(.eyebrow){max-width:600px;color:#d9eee6;margin-bottom:0}.banner h2{margin-bottom:5px}footer{padding:26px;text-align:center;color:#82938d;border-top:1px solid #e9eee9;font-size:.85rem}.page{min-height:75vh}.page h1{font-size:clamp(2.3rem,5vw,3.8rem);letter-spacing:-.055em;line-height:1.15;margin:8px 0 14px}.lead{max-width:760px;color:var(--muted);font-size:1.08rem;margin-bottom:38px}.species-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.species-card{display:flex;align-items:center;gap:20px;padding:22px;border:1px solid #e7eee9;border-radius:18px;background:white}.species-emoji{width:100px;height:100px;flex:0 0 100px;border-radius:18px;background:var(--mint);display:grid;place-items:center;font-size:3.2rem}.species-content h2,.habitat h2,.fact-list h2{font-size:1.15rem;margin:5px 0}.tag{font-size:.68rem;color:var(--teal);font-weight:800;text-transform:uppercase;letter-spacing:.08em}.habitat-list{display:grid;gap:14px}.habitat{display:flex;gap:22px;padding:24px;border-radius:18px;background:#f4f8f3}.habitat-icon{font-size:2.5rem;width:58px;flex:0 0 58px}.note{margin-top:26px;padding:20px 24px;border-left:4px solid var(--coral);background:var(--sand);border-radius:0 12px 12px 0}.fact-list{padding:0;list-style:none;display:grid;gap:0}.fact-list li{display:flex;gap:24px;padding:22px 0;border-bottom:1px solid #e9eee9}.fact-list li>span{font-size:1.5rem;font-weight:800;color:var(--coral);min-width:48px}.fact-list h2{margin-top:0}
@media(max-width:760px){.site-header{align-items:flex-start;flex-direction:column}.site-header nav{gap:12px 18px}.hero{grid-template-columns:1fr;padding:52px 28px;gap:26px}.hero-art{height:220px}.three,.species-grid{grid-template-columns:1fr}.banner{margin:0 20px 40px;padding:28px;align-items:flex-start;flex-direction:column}.species-card{align-items:flex-start}.species-emoji{width:72px;height:72px;flex-basis:72px;font-size:2.3rem}.page{padding:42px 22px}}