:root{--ink:#18323b;--muted:#526e7a;--accent:#a7513e;--display:'Bricolage Grotesque','Bricolage Fallback',sans-serif;--body:'Instrument Sans','Instrument Fallback',sans-serif}
*{box-sizing:border-box}html{scroll-behavior:auto}body{margin:0;background:#edf4f6;color:var(--ink);font-family:var(--body);-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:2px solid #2e7885;outline-offset:5px}h1,p,figure{margin:0}[hidden]{display:none!important}
.splash{min-height:100svh;height:100svh;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;padding:135px 42px 84px;overflow:hidden;background:radial-gradient(ellipse at 89% 24%,#9dc5cb69 0%,transparent 57%),radial-gradient(ellipse at 8% 69%,#dfbbaa3b 0%,transparent 49%),linear-gradient(120deg,#f0f7fa,#dcebee 74%,#e5f0ed)}
.splash:before{content:'';position:absolute;right:0;top:0;width:64%;height:100%;background:linear-gradient(#688c9610 1px,transparent 1px),linear-gradient(90deg,#688c9610 1px,transparent 1px);background-size:42px 42px;mask-image:radial-gradient(ellipse at 70% 40%,#000,transparent 68%);z-index:-1}
.splash-brand{position:absolute;top:23px;right:max(42px,calc((100% - 1550px)/2));width:280px;max-width:calc(100% - 44px);display:flex;align-items:center;flex-direction:column;gap:5px;transition:opacity .24s}
.splash-brand img{width:100%;height:auto;aspect-ratio:800/289;display:block;object-fit:contain}.splash-brand p{width:100%;text-align:center;font-size:8px;letter-spacing:.08em;color:#4f707d;font-weight:550;white-space:nowrap}
.splash-grid{display:grid;grid-template-columns:.87fr 1.13fr;gap:58px;align-items:center;width:100%;max-width:1550px;transform-origin:50% 50%;will-change:transform,opacity;--exit:0;transform:translateY(calc(var(--exit)*35px)) scale(calc(1 - var(--exit)*.035));opacity:calc(1 - var(--exit));filter:blur(calc(var(--exit)*1px))}
.welcome-copy h1{font-family:var(--display);font-size:clamp(52px,5.3vw,86px);line-height:1.01;font-weight:650;letter-spacing:-.06em}.welcome-copy h1 em{font-style:normal;color:var(--accent)}.welcome-copy>p{max-width:425px;font-size:15px;line-height:1.65;color:var(--muted);margin:25px 0 28px}.enter-button{background:#173e49;color:#fff;display:inline-flex;align-items:center;gap:38px;font-size:13px;font-weight:550;padding:15px 24px;border-radius:28px;box-shadow:0 7px 22px #264c5b15}.enter-button>span{font-size:22px;line-height:20px}.enter-button:hover{background:#245967}
.species-portrait{min-width:0}.portrait-overline{color:#526f7a;font-size:9px;letter-spacing:.1em;margin-bottom:13px}.portrait-frame{aspect-ratio:3/2;width:100%;position:relative;overflow:hidden;border-radius:20px;background:#d1d5d0;border:1px solid #ffffffc9;box-shadow:0 15px 42px #2e5b6520}.portrait-slide{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;z-index:0;pointer-events:none}.portrait-slide.previous{opacity:1;z-index:1}.portrait-slide.active{opacity:1;z-index:2}.portrait-slide.revealing{animation:none}
.life-stages{display:grid;grid-template-columns:repeat(3,1fr);padding:11px 0 10px;border-bottom:1px solid #a9c2c75c;color:#526c76;font-size:9px;text-align:center}.life-stages span+span{border-left:1px solid #adc6cc57}.portrait-footer{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;padding-top:10px;min-height:39px}.illustration-note{font-size:8px;color:#607782;letter-spacing:.005em}.portrait-pagination{display:flex;align-items:center;gap:2px}.portrait-pagination button{display:grid;place-items:center;border:0;border-radius:50%;background:transparent;width:23px;height:26px;cursor:pointer;padding:0}.portrait-pagination button span{width:5px;height:5px;border-radius:50%;background:#9bb5bb;transition:background .2s,transform .2s}.portrait-pagination button[aria-pressed=true] span{background:#315a68;transform:scale(1.4)}.portrait-pagination button:hover span{background:#315a68}.slideshow-toggle{justify-self:end;border:1px solid #aac3ca;width:29px;height:29px;border-radius:50%;background:#f3faf866;color:#426977;cursor:pointer;font-size:12px;display:grid;place-items:center;padding:0}.image-error{font-size:10px;color:#a7513e;margin-top:8px}
.scroll-cue{position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:9px;color:#526f7b;transition:opacity .24s}.scroll-cue span{font-size:8px;letter-spacing:.15em}.scroll-cue svg{animation:down 2.4s ease-in-out infinite}@keyframes down{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
.entry-runway{height:24vh;min-height:155px;background:#edf4f6}.entering .splash-grid{transition:opacity .24s ease,transform .24s ease,filter .24s ease}.entering .splash-brand,.entering .scroll-cue{opacity:0}
@media(min-width:1500px){.splash{padding-right:65px;padding-left:65px}.splash-grid{gap:75px}.splash-brand{right:max(65px,calc((100% - 1550px)/2))}.welcome-copy>p{font-size:17px;max-width:465px}.species-portrait{max-width:760px;width:100%;justify-self:end}}
@media(max-height:760px) and (min-width:761px){.splash{padding-top:124px;padding-bottom:78px}.splash-grid{gap:42px}.splash-brand{top:17px;width:250px}.splash-brand p{font-size:7.5px}.welcome-copy h1{font-size:clamp(48px,5vw,72px)}.welcome-copy>p{font-size:14px;margin:20px 0 22px}.species-portrait{width:100%;max-width:585px;justify-self:end}.scroll-cue{bottom:14px;gap:6px}}
@media(max-width:1100px){.splash{padding-left:28px;padding-right:28px}.splash-brand{right:28px}.splash-grid{gap:30px;grid-template-columns:.9fr 1.1fr}.welcome-copy h1{font-size:52px}.portrait-footer{gap:8px}}
@media(max-height:650px) and (min-width:761px){.splash{height:auto;min-height:100svh;padding-top:130px;padding-bottom:80px}}
@media(max-width:760px){.splash{height:auto;min-height:100svh;padding:132px 22px 80px}.splash-brand{right:22px;top:19px;width:230px}.splash-brand p{font-size:7.5px}.splash-grid{display:flex;flex-direction:column;gap:32px;align-items:stretch}.welcome-copy h1{font-size:clamp(45px,10vw,64px)}.welcome-copy>p{font-size:14px;margin:19px 0 20px;max-width:420px}.enter-button{font-size:12px;padding:13px 21px;gap:25px}.portrait-overline{font-size:8px}.portrait-frame{max-width:none;width:100%;border-radius:15px}.life-stages{font-size:8px}.portrait-footer{gap:6px}.illustration-note{font-size:7.5px}.scroll-cue{bottom:18px}}
@media(prefers-reduced-motion:reduce){.splash-grid{transform:none!important;filter:none!important;opacity:1!important}.portrait-slide.revealing{animation:none}.scroll-cue svg{animation:none}.entering .splash-grid{transition:none}}