:root { --ink:#263126; --muted:#59665a; --green:#345b3b; --pale:#f4f7f1; --line:#d9e1d5; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:#edf2e9; font:17px/1.55 Georgia, "Times New Roman", serif; }
a { color:var(--green); }
.site-header { background:linear-gradient(135deg,#274d31,#47744d); color:white; padding:34px max(20px,calc((100% - 1240px)/2)); }
.site-header a { color:white; }
.site-header h1 { margin:8px 0 4px; font-size:clamp(2.2rem,5vw,4.2rem); }
.site-header p { margin:0; max-width:760px; }
.back-link { font:700 .9rem Arial,sans-serif; text-decoration:none; }
main { max-width:1240px; margin:auto; padding:28px 20px 60px; }
.intro { background:white; border:1px solid var(--line); border-radius:10px; padding:20px 24px; }
.species-nav { display:flex; flex-wrap:wrap; gap:8px; margin:20px 0 30px; }
.species-nav a { background:white; border:1px solid var(--line); border-radius:999px; padding:7px 12px; font:700 .82rem Arial,sans-serif; text-decoration:none; }
.species-section { margin-top:38px; scroll-margin-top:20px; }
.species-section h2 { color:var(--green); border-bottom:2px solid var(--line); padding-bottom:7px; }
.photo-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.photo-gallery figure { margin:0; background:white; border:1px solid var(--line); border-radius:9px; overflow:hidden; box-shadow:0 2px 8px rgba(30,50,30,.06); }
.photo-gallery a { display:block; background:#dfe7db; }
.photo-gallery img { width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }
.photo-gallery figcaption { padding:11px 13px 14px; color:var(--muted); font:0.92rem/1.4 Arial,sans-serif; }
.photo-gallery strong { color:var(--ink); display:block; margin-bottom:2px; }
.site-footer { text-align:center; padding:28px 20px; color:var(--muted); font-family:Arial,sans-serif; }
@media (max-width:900px){ .photo-gallery{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:600px){ body{font-size:18px}.photo-gallery{grid-template-columns:1fr}.site-header{padding-top:24px}.intro{padding:17px} }