/* October 2026 — a quieter HERO, built on the existing design tokens. */
:root{--sand:#f7f6f0;--sand-2:#eeeee4;--navy:#12372f;--navy-2:#0b2a3f;--teal:#246b62;--teal-2:#246b62;--line:#cbd5ca;--coral:#a34d35;--radius:8px;--maxw:1180px}
body{font-size:17px;line-height:1.75;background:var(--sand)}
h1,h2,h3{letter-spacing:-.035em;line-height:1.15;font-weight:500}
h2{font-size:clamp(2rem,3.4vw,3rem)}h3{font-size:1.45rem}
.wrap{padding-left:clamp(22px,4vw,56px);padding-right:clamp(22px,4vw,56px)}
.topbar{background:#12372f;font-size:.76rem}.topbar .wrap{min-height:38px}
header.site .wrap{min-height:94px;gap:26px}.brand img.logo{height:72px;max-width:220px;padding:0}
nav.main ul{gap:3px}nav.main a,nav.main .nav-trigger{font-size:.84rem;padding:.6rem .65rem;white-space:nowrap}
nav.main a.donate{background:var(--navy);border-radius:4px;padding:.65rem 1rem}
/* The main menu collapses according to its measured content, not a fixed screen width. */
header.site .brand,header.site nav.main{flex-shrink:0}
nav.main>ul{width:max-content}
nav.main>ul>li{flex-shrink:0}
nav.main .nav-dropdown{position:relative}
nav.main .nav-trigger{display:flex;align-items:center;gap:.3rem;list-style:none;cursor:pointer;font-family:var(--font-body);font-weight:500;color:var(--ink);border-radius:8px}
nav.main .nav-trigger::-webkit-details-marker{display:none}
nav.main .nav-trigger:hover,nav.main .nav-trigger.is-current{background:var(--sand);color:var(--navy)}
nav.main .nav-trigger:focus-visible{outline:2px solid var(--teal);outline-offset:3px}
.nav-caret{font-size:.75em;transition:transform .15s}
.nav-dropdown[open] .nav-caret{transform:rotate(180deg)}
nav.main .nav-submenu{position:absolute;left:0;top:100%;min-width:190px;display:block;padding:.45rem;margin:0;border:1px solid var(--line);border-radius:6px;background:var(--white);box-shadow:0 8px 24px rgba(11,42,63,.12);z-index:5}
nav.main .nav-dropdown:not([open]) .nav-submenu{display:none}
nav.main .nav-submenu a{padding:.6rem .85rem;border-radius:4px}
header.site.nav-measuring nav.main{display:block;position:fixed;visibility:hidden;width:max-content;inset:auto;padding:0;pointer-events:none}
header.site.nav-measuring nav.main>ul{width:max-content;flex-direction:row;align-items:center}
header.site.menu-collapsed:not(.nav-measuring) .menu-btn{display:flex;align-items:center;gap:.4rem;min-height:44px}
header.site.menu-collapsed:not(.nav-measuring) nav.main{display:none;position:absolute;left:0;right:0;top:100%;padding:.6rem 22px 1rem;background:var(--white);border-bottom:1px solid var(--line);max-height:calc(100dvh - 118px);overflow-y:auto}
header.site.menu-collapsed:not(.nav-measuring) nav.main.open{display:block}
header.site.menu-collapsed:not(.nav-measuring) nav.main>ul{width:auto;flex-direction:column;align-items:stretch}
header.site.menu-collapsed:not(.nav-measuring) nav.main a,header.site.menu-collapsed:not(.nav-measuring) .nav-trigger{font-size:1rem;padding:.7rem;min-height:44px}
header.site.menu-collapsed:not(.nav-measuring) .nav-trigger{justify-content:space-between}
header.site.menu-collapsed:not(.nav-measuring) .nav-submenu{position:static;min-width:0;margin:.15rem 0 .45rem 1rem;padding:.25rem;background:var(--sand);border:0;box-shadow:none}
header.site.menu-collapsed:not(.nav-measuring) nav.main a.donate{margin:.4rem 0 0;text-align:center}
.program-tabs{border-bottom:1px solid var(--line);background:var(--white)}
.program-tabs .wrap{display:flex;gap:1.8rem;flex-wrap:wrap}
.program-tabs a{padding:1rem 0;text-decoration:none;color:var(--ink-2);border-bottom:3px solid transparent;font-size:.9rem}
.program-tabs a[aria-current="page"]{border-bottom-color:var(--teal);color:var(--navy);font-weight:600}
.program-tabs a:hover{color:var(--teal)}
.rainforest-next{border-top:1px solid var(--line);padding-top:2rem;margin-top:2.5rem}
@media(max-width:760px){header.site:not(.navigation-ready) .wrap{flex-wrap:wrap;padding-bottom:1rem}header.site:not(.navigation-ready) nav.main{width:100%}header.site:not(.navigation-ready) nav.main>ul{width:auto;flex-wrap:wrap}}
section.band{padding:clamp(3.5rem,7vw,6.5rem) 0}
.eyebrow{font-size:.7rem;letter-spacing:.18em;margin-bottom:1.2rem}
.lede{font-size:clamp(1.1rem,1.8vw,1.35rem);line-height:1.75}
.prose{max-width:64ch}.prose h2:first-child{margin-top:0}
.split{gap:clamp(2rem,5vw,5rem)}.split .ph{box-shadow:none;border-radius:6px}
.btn{border-radius:5px;font-size:.86rem;padding:.7rem 1.15rem}
.btn.primary{background:var(--navy)}.btn.primary:hover{background:var(--teal)}.btn.ghost{background:transparent}
.card{border-radius:6px;box-shadow:none}.card:hover{transform:none;box-shadow:none;border-color:#98afa2}
.card .body{padding:1.6rem}.card h3{font-size:1.5rem}.card p{line-height:1.75}
.slideshow{height:clamp(340px,48vh,420px);min-height:340px;touch-action:pan-y}.slide-text{text-align:left;align-items:center;justify-content:flex-start;padding-top:18px;padding-bottom:48px;pointer-events:auto}
.slide-text .wrap{width:100%;max-width:var(--maxw)}.slide-text .mark{display:none}
.slide-text h1{max-width:24ch;font-size:clamp(2.4rem,4.6vw,4rem);text-transform:none;letter-spacing:-.04em;line-height:1.06;font-weight:500}
.slide-text .eyebrow{color:#edf5e9}.slide-text p{max-width:49ch;color:#fff;font-size:1rem;margin:1.25rem 0 0}
.slideshow .slide::after{background:linear-gradient(90deg,rgba(7,30,23,.56),rgba(7,30,23,.08) 75%),linear-gradient(0deg,rgba(7,30,23,.14),transparent)}
.carousel-controls{display:flex;align-items:center;justify-content:flex-end;gap:.55rem;margin-top:14px}
.carousel-controls button{font:inherit;font-size:.8rem;border:1px solid #c9d5c9;border-radius:4px;background:white;color:var(--navy);min-width:42px;min-height:42px;cursor:pointer}
.carousel-controls button:hover{background:var(--sand-2)}
.slideshow>.carousel-controls{position:absolute;bottom:22px;left:0;right:0;max-width:var(--maxw);margin:0 auto;padding:0 clamp(22px,4vw,56px);z-index:4;color:white;justify-content:flex-start}
.slideshow>.carousel-controls button{background:rgba(6,30,24,.4);color:white;border-color:rgba(255,255,255,.6)}
.slideshow .slide-dots{display:flex;bottom:10px;gap:0}.slideshow .slide-dots button{width:30px;height:30px;border:0;background:transparent;opacity:1;display:grid;place-items:center}.slideshow .slide-dots button::after{content:"";width:9px;height:9px;border:1.5px solid white;border-radius:50%;opacity:.7}.slideshow .slide-dots button.active::after{background:white;opacity:1}.slideshow .slide-dots button:hover::after{opacity:1}.slideshow .slide img{user-select:none;-webkit-user-drag:none}.carousel-help{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.slide-counter{font-size:.78rem;min-width:52px;text-align:center}
.frog-carousel{margin:0;min-width:0}.frog-carousel .carousel-stage{height:410px;position:relative;border-radius:6px;overflow:hidden;background:#132f27}
.frog-carousel .frog-slide{position:absolute;inset:0;margin:0;display:none}.frog-carousel .frog-slide.active{display:grid;grid-template-rows:minmax(0,1fr) auto}
.frog-slide img{width:100%;height:100%;object-fit:contain}.frog-slide .img{position:relative;display:block;min-height:0;height:100%}
.frog-slide figcaption{position:relative;min-height:0;background:#132f27;color:white;padding:6px 16px;font-size:.8rem;line-height:1.45}
.frog-slide figcaption a{color:#d3e9d4}.photo-credit{font-size:.72rem;color:var(--ink-2);margin:.7rem 0 0}
.mission .split .ph{aspect-ratio:5/4}.mission h2{max-width:19ch}
.program-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px}.program-list .card{background:transparent;border:0}.program-list .card .body{padding:1.3rem 0}.program-list .card .ph{border-radius:6px}
.section-head{margin-bottom:2.7rem}.section-head>div{max-width:67ch}
.learn-feature{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:center}.learn-feature .doors{grid-template-columns:1fr;gap:0}.door{padding:1.5rem 0;border-radius:0;background:transparent;border-top:1px solid var(--line);color:var(--ink);text-decoration:none}
.door h2{font-size:1.8rem;color:var(--navy)}.door p{color:var(--ink-2)}.door .eyebrow{color:var(--teal)!important}.door .go{color:var(--teal)}
.doors{gap:2rem}.doors .door{padding:2rem;background:white;border:1px solid var(--line);border-radius:6px}
.news-preview .hub-item{border:0;border-top:1px solid var(--line);border-radius:0;background:transparent;display:grid;grid-template-columns:170px 1fr;gap:25px;padding:1.5rem 0}
.news-preview .hub-item>.ph{aspect-ratio:4/3;border-radius:4px;height:auto}.news-preview .hub-item>.body{padding:0}
.news-preview .hub-item h3{font-size:1.45rem}.news-preview .hub-item .chip{background:transparent;padding:0;color:var(--teal)}.news-preview .hub-item .more{font-size:.82rem}.news-preview .video{display:none}
.newsletter-band{background:#e5ecdf;padding:4rem 0}.newsletter-layout{display:grid;grid-template-columns:1fr 1fr;gap:4rem;align-items:start}.newsletter-layout h2{max-width:15ch}
.newsletter-form .field input{background:#fff}.newsletter-form .btn{width:100%}.newsletter-form .consent{display:flex;align-items:start;gap:.7rem;font-size:.82rem}.newsletter-form .consent input{margin-top:6px;flex-shrink:0}
.logo-strip{gap:20px}.logo-strip a{width:135px;height:76px;border:none;background:transparent;padding:.4rem;filter:grayscale(.2)}.logo-strip img{max-height:56px}
section.band.home-community{padding-block:clamp(3rem,5vw,4.5rem)}
.home-partners{gap:1.25rem 1.5rem}
.home-partners a{width:calc((100% - 6rem)/5);height:128px;padding:.5rem;filter:none}
.home-partners img{max-height:112px}
.partner-access{max-width:78ch;margin:1.5rem auto 0;font-size:.85rem;color:var(--ink-2)}
.partner-access summary{width:fit-content;margin:auto;color:var(--teal);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.partner-access p{margin:.75rem 0 0}
@media(max-width:760px){.home-partners a{width:calc((100% - 3rem)/3);height:112px}.home-partners img{max-height:96px}}
@media(max-width:480px){.home-partners a{width:calc((100% - 1.5rem)/2)}}
footer.site{margin-top:0;padding-top:4rem}.support-band{padding:2rem 0}.support-band strong{display:block;font-family:var(--font-head);font-size:1.35rem;color:var(--navy)}
.page-hero{padding:4rem 0}.page-hero.photo{min-height:360px;padding:4rem 0}.page-hero h1{max-width:21ch;font-size:clamp(2.4rem,5vw,4rem)}
.gallery figcaption{opacity:1}.gallery figure{box-shadow:none}.research-feature{display:grid;grid-template-columns:1.15fr 1fr;gap:4rem;align-items:start}
.lesson{scroll-margin-top:120px;padding:2rem;margin:2rem 0;border:1px solid var(--line);background:white;border-radius:6px}
.lesson h2{font-size:2rem;margin:1rem 0}.lesson details{border-top:1px solid var(--line);padding:.75rem 0}.lesson summary{font-weight:600;cursor:pointer}.lesson li{margin-bottom:.7rem}
.unit-menu{display:flex;flex-wrap:wrap;gap:.6rem;margin:2rem 0}.unit-menu a{border:1px solid var(--line);padding:.45rem .9rem;background:white;border-radius:4px;font-size:.85rem;text-decoration:none}
.lesson-meta{display:flex;flex-wrap:wrap;gap:1rem;font-size:.85rem;color:var(--ink-2);margin:1rem 0}
.sheet label{display:block;font-size:.9rem;font-weight:600;margin:1rem 0 .3rem}.sheet textarea,.sheet input{font:inherit;width:100%;padding:.8rem;border:1px solid var(--line);background:var(--sand);border-radius:4px}.sheet textarea{min-height:110px}
.sheet .row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.quiz button{display:block;width:100%;text-align:left}.quiz .exp{font-size:.9rem}
.auth-panel{max-width:580px;margin:auto}.auth-panel .contact-form{box-shadow:none}
button.btn{font-family:inherit;cursor:pointer}button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid #458470;outline-offset:4px}
[hidden]{display:none!important}section[id],h2[id],article[id]{scroll-margin-top:130px}
.teacher-actions{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;align-items:center;padding:1rem 0;border-bottom:1px solid var(--line)}
.admin-table{font-size:.8rem}.admin-table .btn{font-size:.75rem;padding:.3rem .5rem}.auth-note{font-size:.85rem}
@media(max-width:1100px){header.site .wrap{gap:8px}.brand img.logo{height:60px;max-width:180px}nav.main a,nav.main .nav-trigger{padding:.6rem .45rem;font-size:.79rem}}
@media(max-width:960px){header.site .wrap{min-height:80px}.brand img.logo{height:62px;max-width:200px}.topbar .wrap>span:first-child{display:none}.topbar .wrap{justify-content:flex-end}.program-list{grid-template-columns:1fr}.program-list .card{display:grid;grid-template-columns:1fr 1fr;gap:25px}.learn-feature,.newsletter-layout,.research-feature{grid-template-columns:1fr;gap:2rem}}
@media(max-width:600px){.slideshow{height:380px;min-height:340px}.slide-text{padding-top:16px;padding-bottom:42px}.slide-text h1{font-size:2.2rem}.slide-text p{font-size:.92rem}.program-list .card{display:flex;gap:0}.news-preview .hub-item{grid-template-columns:1fr}.news-preview .hub-item>.ph{max-height:200px}.doors{grid-template-columns:1fr}.frog-carousel .carousel-stage{height:380px}.sheet .row{grid-template-columns:1fr}.lesson{padding:1.25rem}.topbar .wrap{font-size:.7rem}.topbar .wrap a{white-space:nowrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important}}
@media print{header.site,.topbar,footer.site,.support-band,.newsletter-band,.unit-menu,.actions,.teacher-actions,.carousel-controls,.slide-dots,.print-button{display:none!important}body{background:white;color:black;font-size:11pt}.wrap{max-width:none;padding:0}section.band{padding:1rem 0}.page-hero{background:white!important;color:black;padding:0;min-height:0!important}.page-hero h1,.page-hero p,.page-hero .eyebrow{color:black!important}.page-hero .bg{display:none}.lesson{break-inside:auto;border:0;margin:1rem 0;padding:0}.lesson summary{display:none}.sheet textarea{min-height:70px}.grid{display:block}a{color:black}.quiz{margin-bottom:1rem}}

.slide-text h1{white-space:pre-line}

/* Attenborough quote over Caribbean sea photography. */
.quote-band{padding:clamp(3.5rem,6vw,5rem) 0}.quote-band .bg img{object-position:center 62%;opacity:1}.quote-band .bg::after{content:"";position:absolute;inset:0;background:rgba(3,28,40,.64)}.quote-band .wrap{max-width:980px}.quote-band blockquote{color:white;font-size:clamp(1.5rem,2.8vw,2.2rem);line-height:1.45}.quote-band cite{display:block;margin-top:1.25rem;font-size:.85rem;letter-spacing:.08em}

/* Newsletter signup stays out of the footer until requested. */
body.newsletter-open{overflow:hidden}
.newsletter-dialog{width:min(560px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:0;border:0;border-radius:8px;background:var(--sand);color:var(--ink);overflow:auto;box-shadow:0 20px 70px rgba(0,0,0,.25)}
.newsletter-dialog::backdrop{background:rgba(5,25,21,.68)}
.newsletter-dialog-content{position:relative;padding:clamp(24px,5vw,40px)}
.newsletter-dialog h2{color:var(--navy);font-size:clamp(1.85rem,4vw,2.5rem);margin:0 32px 1rem 0}
.newsletter-dialog .eyebrow{color:var(--teal);margin-right:30px}
.newsletter-dialog .newsletter-form{margin-top:1.5rem}
.newsletter-dialog .newsletter-form a{color:var(--teal);text-decoration:underline}
.newsletter-close{position:absolute;top:12px;right:12px;width:36px;height:36px;border:0;border-radius:4px;background:transparent;color:var(--navy);font-size:1.8rem;line-height:1;cursor:pointer}
.newsletter-close:hover{background:var(--sand-2)}
@media print{.newsletter-dialog{display:none!important}}

/* Keep the subject in frame without changing any original photograph. */
.img img{object-position:var(--photo-position,50% 50%)}
.card .ph.photo-natural,.split .ph.photo-natural,.ph.photo-natural,.person .photo.photo-natural{aspect-ratio:var(--photo-aspect,4/3)}
.photo-contained img{object-fit:contain}
.mission .split>.ph{background:transparent}
.mission [data-img="home-mission"] img{object-fit:contain}
@media(min-width:901px){.mission .split{align-items:stretch}.mission .split>.ph{aspect-ratio:auto;min-height:0}}
.gallery{align-items:start}
.gallery figure,.gallery.masonry figure,.gallery.tall figure{aspect-ratio:auto;background:#132f27}
.gallery figure>.img{position:relative;display:block;inset:auto}
.gallery figure>.img img{height:auto;object-fit:contain}
.gallery figcaption{position:static;padding:.7rem .9rem;background:#132f27;color:white;opacity:1;line-height:1.5}
.page-hero.photo .hero-bg{background-size:cover;background-position:center;background-repeat:no-repeat;background-color:#0b2a3f}
.page-hero.photo .hero-bg::after{background:linear-gradient(90deg,rgba(11,42,63,.88),rgba(11,42,63,.6) 45%,rgba(11,42,63,.12))}
@media(min-width:980px){.page-hero.photo.fit .hero-bg{background-size:cover;background-position:center}}

/* Tiny diagonal arrows at the bottom right of a photograph or its caption. */
.photo-host{position:relative}
.photo-caption-control{position:relative;padding-right:42px!important}
.frog-slide .photo-caption-control{position:relative}
.photo-expand{position:absolute;bottom:6px;right:6px;z-index:6;display:grid;place-items:center;width:28px;height:28px;padding:0;border:0;border-radius:0;background:transparent;color:white;box-shadow:none;cursor:pointer}
.photo-caption-control .photo-expand{bottom:4px;right:5px;color:inherit}
.photo-expand:hover{background:transparent}.photo-expand svg{width:14px;height:14px;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
.photo-caption-control .photo-expand svg{filter:none}
.photo-expand:focus-visible,.photo-view-close:focus-visible{outline:3px solid white;outline-offset:3px}
.quote-band{position:relative}
body.photo-view-open{overflow:hidden}
.photo-view{width:calc(100vw - 24px);max-width:1400px;height:calc(100dvh - 24px);max-height:none;margin:auto;padding:0;border:0;border-radius:8px;background:#081c26;color:white;overflow:hidden;box-shadow:0 20px 70px rgba(0,0,0,.4)}
.photo-view::backdrop{background:rgba(3,14,20,.86)}
.photo-view-title{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.photo-view-close{position:absolute;top:12px;right:12px;z-index:2;display:flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.5rem .8rem;border:1px solid rgba(255,255,255,.5);border-radius:5px;background:#0b2a3f;color:white;font:inherit;font-size:.88rem;cursor:pointer}
.photo-view-close span{font-size:1.35rem;line-height:1}
.photo-view figure{display:flex;flex-direction:column;height:100%;min-height:0;margin:0;padding:68px 20px 20px;gap:14px}
.photo-view-image{display:block;flex:1;min-height:0;width:100%;height:100%;object-fit:contain;object-position:center}
.photo-view figcaption{flex-shrink:0;max-height:22vh;overflow:auto;margin:0 auto;text-align:center;font-size:.9rem;line-height:1.5;color:#edf5f6}
.photo-view figcaption a{color:#c3e8df;text-decoration:underline}
@media(max-width:600px){.photo-expand{width:36px;height:36px;bottom:4px;right:4px}.photo-caption-control{padding-right:48px!important}.photo-view{width:100vw;height:100dvh;border-radius:0}.photo-view figure{padding:68px 12px 20px}.photo-view figcaption{font-size:.85rem}}
@media print{.photo-expand,.photo-view{display:none!important}.gallery figure{break-inside:avoid}}

/* Publication dates lead every News card, including the homepage feed. */
.hub-item>.news-date{display:block;align-self:flex-start;margin:0;padding:.85rem 1.25rem .6rem;font-size:.76rem;font-weight:700;line-height:1.4;color:var(--navy)}
.news-preview .hub-item{row-gap:.8rem}
.news-preview .hub-item>.news-date{grid-column:1/-1;padding:0}

/* A small newsletter action after the homepage news list. */
.news-signup{margin-top:1.4rem}
nav.main .nav-trigger{touch-action:manipulation}

/* Keep the tortoise's face in the full-width News banner at every breakpoint. */
.page-hero.photo.news-hero .hero-bg{background-size:cover;background-position:50% 35%}