:root{--bg:#F5EEE3;--sand:#EADFCE;--card:#FFFDF9;--ink:#4A3426;--soft:#6F5A4B;--acc:#B23A5E;--acc-d:#962F4E;--r:20px;--sh:0 6px 18px rgba(74,52,38,.08)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1.0625rem/1.65 Figtree,system-ui,sans-serif;-webkit-text-size-adjust:100%}
h1,h2,h3{font-family:"Young Serif",Georgia,serif;font-weight:400;line-height:1.15;margin:0 0 .5em}
h1{font-size:clamp(2.1rem,6.5vw,3.6rem)}h2{font-size:clamp(1.6rem,4.5vw,2.2rem)}h3{font-size:1.2rem;margin-bottom:.3em}
p{margin:0 0 1em;max-width:62ch}a{color:inherit}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}
.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:.6em 1em;border-radius:10px;z-index:99}.skip:focus{left:8px}
.top{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:1rem;padding:.7rem 1.1rem;background:rgba(245,238,227,.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--sand)}
.brand{font:400 1.25rem "Young Serif",Georgia,serif;text-decoration:none;margin-right:auto;white-space:nowrap;display:inline-flex;align-items:center;gap:.5rem}
.top nav ul{display:none;list-style:none;margin:0;padding:0;gap:1.3rem}.top nav a{text-decoration:none;font-weight:600;font-size:.95rem;color:var(--soft)}.top nav a:hover{color:var(--acc)}
.btn{font:600 1rem Figtree,sans-serif;min-height:48px;padding:.7em 1.4em;border-radius:999px;border:2px solid transparent;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;transition:background .2s,transform .15s}
.btn-main{background:var(--acc);color:#fff}.btn-main:hover{background:var(--acc-d)}.btn:active{transform:scale(.98)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}.btn-ghost:hover{background:var(--sand)}.block{width:100%}
main>section{padding:3.2rem 1.2rem}.sec>*,.hero>*{max-width:1080px}.sec{max-width:1080px;margin:0 auto}
.alt{background:var(--sand);max-width:none}.alt>*{max-width:62ch;margin-inline:auto}.alt h2,.alt .sec-lead{max-width:62ch}
.hero{display:grid;gap:2rem;max-width:1080px;margin:0 auto;padding-top:2.2rem}
.kicker{color:var(--acc);font-weight:700;margin-bottom:.6em}.lead{font-size:1.15rem;color:var(--soft)}.sec-lead{font-size:1.12rem;color:var(--soft)}
.actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:1.4rem}
.hero-photo{animation:in .7s ease both}
.tiles li{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:1.1rem;font-weight:700;display:flex;flex-direction:column;gap:.3rem}
.tiles span{font-size:2.4rem;line-height:1}.tiles .wide{grid-column:1/-1;flex-direction:row;align-items:center;gap:.8rem;background:var(--acc);color:#fff}.tiles .wide span{font-size:1.8rem}
.cards{list-style:none;margin:1.5rem 0 0;padding:0;display:grid;gap:1rem}
.cards li{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);overflow:hidden}.tx{padding:1.1rem 1.3rem 1.3rem}.cards p{margin:0;color:var(--soft)}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem;padding:0;margin:0 0 1.6rem}
.chips li{background:var(--card);border:1px solid var(--sand);border-radius:999px;padding:.45em 1em;font-weight:600;box-shadow:var(--sh)}
.foot{background:var(--ink);color:#F5EEE3;padding:2rem 1.2rem;text-align:center}.foot p{margin:.2em auto}.small{font-size:.9rem;opacity:.85}
/* modal */
dialog{border:0;padding:0;border-radius:24px;width:min(94vw,440px);max-height:94dvh;overflow:auto;background:var(--card);color:var(--ink);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog[open]{animation:pop .22s ease}dialog::backdrop{background:rgba(50,34,24,.55)}
.modal-body{padding:1.4rem 1.2rem 1.2rem;text-align:center}.modal-body p{margin-inline:auto}.modal-body h2{font-size:1.5rem}
.qr{display:block;width:min(100%,280px);height:auto;aspect-ratio:1;margin:.4rem auto 1rem;border:1px solid var(--sand);border-radius:16px}
.key{font:.78rem/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--bg);border-radius:12px;padding:.7rem;word-break:break-all;user-select:all;margin:0 0 .8rem;max-height:6.5em;overflow:auto}
.copied{min-height:1.5em;color:#1D6B3F;font-weight:700;margin:.5rem auto}
.note{font-size:.85rem;color:var(--soft);margin:.4rem auto 1.1rem}
.row{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.closing{text-align:center}.closing p{margin-inline:auto}.closing .btn{margin-top:.4rem}
.choice{display:flex;flex-direction:column;gap:.15rem;width:100%;min-height:64px;margin:0 0 .8rem;padding:.9rem 1.2rem;text-align:left;background:var(--bg);border:2px solid var(--acc);border-radius:16px;color:var(--ink);font:inherit;cursor:pointer;transition:background .2s}.choice:hover{background:var(--sand)}.choice strong{font-size:1.15rem}.choice span{font-size:.92rem;color:var(--soft)}
.photo{display:block;width:100%;height:auto;border-radius:24px;box-shadow:var(--sh);background:var(--sand)}
.hero-photo{margin:0}.hero-photo img{aspect-ratio:1;object-fit:cover;object-position:50% 40%}
.species{margin:1.6rem 0 0}
.cards .ph{aspect-ratio:4/3;object-fit:cover;border-radius:0;box-shadow:none}
.cards .more{background:var(--acc);color:#fff;display:flex;align-items:center}.cards .more p{color:#fff}
.alt>.split{max-width:1000px;display:grid;gap:1.5rem;align-items:center}.split .sec-lead,.split p{max-width:none}
.split>img{aspect-ratio:4/3;object-fit:cover;object-position:50% 25%}
.alt>.banner{max-width:900px;margin:1.8rem auto 0}.banner img{aspect-ratio:16/9;object-fit:cover}
@keyframes in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:none}}
@media(min-width:760px){.hero-photo img{aspect-ratio:4/5}.alt>.split{grid-template-columns:1fr 1fr;gap:2.5rem}.split>img{aspect-ratio:4/5}.cards .more{grid-column:span 2}.top nav ul{display:flex}.hero{grid-template-columns:1.2fr 1fr;align-items:center;padding-top:4rem}.cards{grid-template-columns:repeat(2,1fr)}main>section{padding:4.5rem 2rem}}
@media(min-width:1024px){.cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:420px){.brand{font-size:1.05rem}.top{padding-inline:.8rem}.btn{padding-inline:1.1em}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}
.cards .more h3,.cards .more p{color:#fff}