:root{--ink:#153936;--river:#2f7f78;--deep:#184c49;--foam:#edf7f2;--sand:#e8d8b8;--sun:#f2c14e;--leaf:#557c55;--paper:#fffdf7;--shadow:0 18px 45px rgba(18,54,50,.12);--radius:24px}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--paper);color:var(--ink);line-height:1.6}.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:1rem;top:1rem;background:#fff;padding:.75rem 1rem;z-index:99}.site-header{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:.85rem clamp(1rem,4vw,4rem);background:rgba(255,253,247,.94);backdrop-filter:blur(14px);border-bottom:1px solid rgba(21,57,54,.1)}.brand{display:flex;align-items:center;gap:.7rem;color:var(--ink);text-decoration:none;font-weight:850}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:50%;background:var(--ink);color:#fff;font-size:.78rem;letter-spacing:-.04em}.brand-mark span{color:var(--sun);margin:0 2px}.site-nav{display:flex;gap:1.3rem}.site-nav a{color:var(--ink);text-decoration:none;font-weight:700;font-size:.94rem}.menu-toggle{display:none;border:0;background:transparent;font:inherit;font-weight:800;color:var(--ink)}main{overflow:hidden}.hero{min-height:76vh;display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:clamp(2rem,5vw,5rem);padding:clamp(4rem,8vw,7rem) clamp(1rem,6vw,6rem)}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:.76rem;font-weight:900;color:var(--river);margin:0 0 .7rem}.hero h1,.section-heading h2,.water-copy h2{font-family:Georgia,"Times New Roman",serif;font-weight:700;line-height:.98;letter-spacing:-.04em}.hero h1{font-size:clamp(3.4rem,7vw,7.2rem);margin:0;max-width:10ch}.hero h1 span{color:var(--river)}.hero-intro{font-size:clamp(1.05rem,1.8vw,1.25rem);max-width:60ch;color:#42615f}.hero-actions{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}.button{appearance:none;border:0;border-radius:999px;padding:.9rem 1.35rem;text-decoration:none;font:inherit;font-weight:850;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;transition:transform .15s ease,box-shadow .15s ease,background .15s ease}.button:hover{transform:translateY(-2px)}.primary{background:var(--ink);color:white;box-shadow:0 8px 20px rgba(21,57,54,.18)}.secondary{background:var(--foam);color:var(--deep)}.river-scene{position:relative;min-height:520px;border-radius:36px;overflow:hidden;background:linear-gradient(#badad0 0 48%,#7aa36a 48% 62%,#438e95 62% 100%);box-shadow:var(--shadow)}.sun{position:absolute;width:90px;height:90px;border-radius:50%;background:var(--sun);right:12%;top:10%}.hill{position:absolute;border-radius:50% 50% 0 0;background:#739264}.hill-one{width:75%;height:33%;left:-18%;top:35%}.hill-two{width:80%;height:29%;right:-30%;top:39%;background:#62845f}.water{position:absolute;inset:62% 0 0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.1) 0 2px,transparent 2px 34px)}.tree{position:absolute;width:18px;height:110px;background:#755638;bottom:37%;border-radius:9px}.tree:before{content:"";position:absolute;width:80px;height:110px;border-radius:50%;background:#375f46;left:50%;bottom:60%;transform:translateX(-50%)}.t1{left:15%}.t2{left:30%;transform:scale(.75)}.t3{right:23%;transform:scale(.9)}.lodge,.beaver,.otter{position:absolute;font-size:clamp(3rem,7vw,5.2rem);filter:drop-shadow(0 8px 8px rgba(0,0,0,.18))}.lodge{left:15%;bottom:10%;font-size:4rem;transform:rotate(-9deg)}.beaver{left:30%;bottom:13%}.otter{right:14%;bottom:14%;transform:rotate(-8deg)}.river-status{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(21,57,54,.14);border-block:1px solid rgba(21,57,54,.14)}.river-status div{background:var(--foam);padding:1.25rem clamp(1rem,5vw,5rem)}.river-status strong,.river-status span{display:block}.river-status strong{font-size:1.05rem}.river-status span{font-size:.88rem;color:#55706e}.game-section,.learn-section,.water-section{padding:clamp(4rem,8vw,7rem) clamp(1rem,6vw,6rem)}.game-section{background:#f0f6ef}.section-heading{max-width:750px;margin-bottom:2.3rem}.section-heading h2,.water-copy h2{font-size:clamp(2.5rem,5vw,4.5rem);margin:.1rem 0 1rem}.section-heading>p:last-child,.water-copy>p:last-child{color:#526a68;font-size:1.05rem}.character-grid,.fact-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.2rem}.character-card{min-height:330px;text-align:left;border:1px solid rgba(21,57,54,.1);border-radius:var(--radius);background:#fff;padding:2rem;cursor:pointer;box-shadow:0 8px 22px rgba(17,51,48,.06);transition:.18s ease;color:var(--ink)}.character-card:hover,.character-card:focus-visible{transform:translateY(-5px);box-shadow:var(--shadow);border-color:var(--river)}.character-emoji{display:block;font-size:5.2rem;line-height:1;margin-bottom:2rem}.character-label{display:block;text-transform:uppercase;letter-spacing:.12em;font-size:.7rem;font-weight:850;color:var(--river)}.character-card strong{display:block;font:700 2.4rem/1 Georgia,serif;margin:.35rem 0 .8rem}.character-card small{display:block;font-size:1rem;color:#526a68;max-width:40ch}.mission,.game-result{max-width:850px;margin:auto}.mission-topline{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;font-size:.9rem;font-weight:800}.text-button,.fact-toggle{background:none;border:0;padding:0;color:var(--deep);font:inherit;font-weight:850;cursor:pointer;text-decoration:underline;text-underline-offset:4px}.scoreboard{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:.7rem}.scoreboard div{background:white;border-radius:16px;padding:.9rem 1rem}.scoreboard span{font-size:.78rem;color:#607875;text-transform:uppercase;letter-spacing:.08em;font-weight:800}.scoreboard strong{float:right;font-size:1.2rem}.health-meter{height:10px;background:#d5e3dd;border-radius:99px;overflow:hidden;margin-bottom:1.2rem}.health-meter span{display:block;height:100%;width:60%;background:var(--river);transition:width .35s ease}.challenge-card{background:#fff;border-radius:var(--radius);padding:clamp(1.3rem,4vw,2.7rem);box-shadow:var(--shadow)}.challenge-card h3{font:700 clamp(1.8rem,4vw,3rem)/1.05 Georgia,serif;margin:.2rem 0 1rem}.choices{display:grid;gap:.7rem;margin:1.6rem 0}.choice{border:1px solid #cddbd6;background:#f9fbf7;padding:1rem 1.1rem;border-radius:14px;text-align:left;font:inherit;font-weight:750;color:var(--ink);cursor:pointer}.choice:hover:not(:disabled){border-color:var(--river);background:#edf6f1}.choice.correct{border-color:#427d54;background:#eaf5e8}.choice.incorrect{border-color:#a85b45;background:#faece6}.feedback{border-left:4px solid var(--river);background:var(--foam);padding:1rem 1.1rem;border-radius:0 12px 12px 0;margin-bottom:1.2rem}.game-result{text-align:center;background:white;border-radius:var(--radius);padding:clamp(2rem,5vw,4rem);box-shadow:var(--shadow)}.result-icon{font-size:4rem}.game-result h3{font:700 clamp(2rem,5vw,3.6rem)/1 Georgia,serif;margin:.2rem 0 1rem}.result-stats{display:flex;justify-content:center;gap:1rem;margin:2rem 0}.result-stats div{min-width:140px;background:var(--foam);padding:1rem;border-radius:16px}.result-stats strong,.result-stats span{display:block}.result-stats strong{font-size:2rem}.result-stats span{font-size:.78rem;text-transform:uppercase;letter-spacing:.08em}.learn-section{background:var(--paper)}.fact-card{position:relative;border-radius:var(--radius);padding:2rem;min-height:320px}.beaver-fact{background:#e8dfcf}.otter-fact{background:#dcece9}.fact-icon{font-size:4rem}.fact-card h3{font:700 2rem/1.05 Georgia,serif;margin:.8rem 0}.fact-detail{padding-top:.7rem}.water-section{background:var(--ink);color:#fff;display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(2rem,7vw,7rem);align-items:start}.water-copy .eyebrow{color:#8dd1c9}.water-copy>p:last-child{color:#c5d8d5}.water-factors{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.water-factors article{background:rgba(255,255,255,.08);padding:1.4rem;border-radius:18px;border:1px solid rgba(255,255,255,.1)}.water-factors article>span{font-weight:900;color:#f1d57e}.water-factors h3{margin:.5rem 0 .3rem}.water-factors p{font-size:.9rem;color:#c7d8d5;margin:0}footer{text-align:center;padding:3rem 1rem;background:#0e2b29;color:#d9e8e5}footer p{margin:.2rem 0 0;color:#8fb2ad}@media(max-width:800px){.hero{grid-template-columns:1fr;min-height:auto;padding-top:3.5rem}.hero h1{font-size:clamp(3.25rem,15vw,5.4rem)}.river-scene{min-height:390px}.river-status{grid-template-columns:1fr}.character-grid,.fact-grid,.water-section{grid-template-columns:1fr}.water-factors{grid-template-columns:1fr 1fr}.site-nav{position:absolute;right:1rem;top:64px;display:none;flex-direction:column;background:#fff;padding:1rem;border-radius:14px;box-shadow:var(--shadow);min-width:170px}.site-nav.open{display:flex}.menu-toggle{display:block}.result-stats{flex-direction:column}.result-stats div{width:100%}}@media(max-width:500px){.water-factors{grid-template-columns:1fr}.river-scene{min-height:320px}.character-card{min-height:290px}.scoreboard{grid-template-columns:1fr}.scoreboard strong{float:none;display:block}.hero-actions .button{width:100%}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}}

/* Homepage hero UX refinement */
.hero{min-height:auto;grid-template-columns:minmax(0,.88fr) minmax(420px,1.12fr);gap:clamp(2rem,4vw,4.5rem);padding-block:clamp(3rem,6vw,5.5rem);max-width:1600px;margin-inline:auto}.hero-copy{max-width:680px}.hero h1{font-size:clamp(2.75rem,4.5vw,5.25rem);line-height:1.01;letter-spacing:-.035em;max-width:13ch;text-wrap:balance}.hero h1 span{display:block;margin-top:.12em}.hero-intro{font-size:clamp(1rem,1.25vw,1.16rem);line-height:1.65;max-width:54ch;margin:1.35rem 0 0;color:#486764}.hero-actions{margin-top:1.65rem;gap:.7rem}.hero-actions .button{min-height:46px;padding:.78rem 1.2rem}.river-scene{min-height:clamp(430px,42vw,560px)}
@media(max-width:1050px){.hero{grid-template-columns:minmax(0,1fr) minmax(380px,.95fr);gap:2rem}.hero h1{font-size:clamp(2.65rem,5.4vw,4.6rem);max-width:12.5ch}}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:1.8rem;padding:2.5rem clamp(1rem,5vw,2rem) 3rem}.hero-copy{max-width:620px}.hero h1{font-size:clamp(2.55rem,10.5vw,4.15rem);line-height:1.02;max-width:14ch}.hero-intro{font-size:1.03rem;line-height:1.6;margin-top:1.1rem;max-width:58ch}.hero-actions{margin-top:1.35rem}.river-scene{min-height:clamp(330px,78vw,440px);border-radius:28px}}
@media(max-width:500px){.hero{padding-top:2rem;gap:1.45rem}.hero h1{font-size:clamp(2.35rem,11.5vw,3.45rem);max-width:12.5ch;letter-spacing:-.03em}.hero h1 span{margin-top:.08em}.hero-intro{font-size:1rem;line-height:1.55}.hero-actions{display:grid;grid-template-columns:1fr;gap:.6rem}.hero-actions .button{width:100%;min-height:48px}.river-scene{min-height:315px;border-radius:22px}}

/* Character naming and the active river advocate */
#game [hidden] { display: none !important; }
.character-setup, .mission, .game-result, .character-grid { scroll-margin-top: 6rem; }
.character-setup {
  max-width: 640px;
  margin-inline: auto;
  padding: clamp(1.25rem, 4vw, 2.5rem);
  background: #fff;
  border: 1px solid #d5e3dd;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.naming-heading { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.naming-heading > div { min-width: 0; }
.naming-icon { flex-shrink: 0; font-size: clamp(3rem, 10vw, 4.5rem); line-height: 1; }
.naming-heading .eyebrow { margin-bottom: .4rem; }
.naming-heading h3 { margin: 0; font: 700 clamp(1.8rem, 5vw, 2.6rem)/1.15 Georgia, serif; }
.character-setup label { display: block; margin-bottom: .5rem; font-weight: 800; }
.character-setup label span { font-weight: 400; color: #526a68; }
#character-name {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 52px;
  padding: .8rem 1rem;
  border: 1px solid #7c9690;
  border-radius: 12px;
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 1.0625rem;
}
#character-name::placeholder { color: #607875; opacity: 1; }
.name-hint { margin: .6rem 0 1.5rem; color: #526a68; font-size: .9rem; }
.character-setup .button { min-height: 48px; }
#game .text-button { min-height: 44px; padding-block: .5rem; text-align: left; }
#game :is(button, input):focus-visible { outline: 3px solid var(--river); outline-offset: 4px; }
.player-badge { display: flex; align-items: center; gap: .8rem; margin: 1rem 0 1.25rem; }
#player-icon { flex-shrink: 0; font-size: 2.5rem; line-height: 1.2; }
.player-badge > div { min-width: 0; }
.player-badge strong { display: block; font-size: 1.25rem; line-height: 1.4; overflow-wrap: anywhere; }
#player-species { display: block; color: #526a68; font-size: .85rem; }
.result-character { margin: 0 0 1rem; font-size: 1.2rem; font-weight: 800; color: var(--deep); overflow-wrap: anywhere; }
@media (max-width: 500px) {
  .character-setup .button { width: 100%; }
  .mission-topline { flex-wrap: wrap; column-gap: 1rem; row-gap: .25rem; }
}