/* =================================================================
   Multi-page additions — loaded after style.css
   ================================================================= */
.topnav nav a[aria-current="page"]{ color:var(--ink); border-color:var(--amber); }

/* sub-page header */
.pagehead{ padding:clamp(6.5rem,10vw,9rem) var(--pad) clamp(2.5rem,5vw,4rem); border-bottom:1px solid var(--line); position:relative; overflow:hidden; }
.pagehead .contour{ position:absolute; inset:0; width:100%; height:100%; opacity:.35; pointer-events:none; }
.pagehead > *{ position:relative; }
.pagehead h1{ font-family:var(--display); font-weight:400; font-size:clamp(2.2rem,1.1rem + 4.6vw,4.4rem); line-height:1; letter-spacing:-.02em; margin:.8rem 0 1.2rem; max-width:18ch; }
.pagehead h1 em{ font-style:italic; color:var(--teal); }
.pagehead .deck{ max-width:58ch; font-size:1.1rem; color:var(--ink-soft); }
.crumbs{ font-family:var(--mono); font-size:.62rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft); }
.crumbs a{ text-decoration:none; border-bottom:1px solid var(--line-strong); }
.jump{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.jump a{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; text-decoration:none; border:1px solid var(--line-strong); padding:.45rem .7rem; background:var(--paper); }
.jump a:hover{ border-color:var(--amber); }

/* explore cards (home) */
.explore{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:2.5rem; }
.xcard{ display:flex; flex-direction:column; text-decoration:none; border:1px solid var(--line-strong); background:var(--paper); padding:1.5rem; transition:transform .25s, border-color .25s, box-shadow .25s; }
.xcard:hover, .xcard:focus-visible{ transform:translateY(-4px); border-color:var(--amber); box-shadow:0 18px 34px -22px var(--paper-shadow); outline:none; }
.xcard .xnum{ font-family:var(--mono); font-size:.66rem; letter-spacing:.2em; color:var(--amber-deep); }
.xcard h3{ margin:.5rem 0 .4rem; }
.xcard p{ font-size:.94rem; color:var(--ink-soft); flex:1; }
.xcard .xgo{ font-family:var(--mono); font-size:.64rem; letter-spacing:.18em; text-transform:uppercase; margin-top:1rem; color:var(--teal); }

/* "three things" practical box */
.keybox{ border:1px solid var(--line-strong); background:var(--paper); padding:clamp(1.4rem,3vw,2.2rem); margin-top:2rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:1.6rem; }
.keybox .k b{ display:block; font-family:var(--display); font-size:1.25rem; margin-bottom:.3rem; }
.keybox .k b span{ color:var(--amber-deep); font-family:var(--mono); font-size:.7rem; letter-spacing:.2em; margin-right:.5rem; }
.keybox .k p{ font-size:.95rem; }

/* page-to-page next link */
.nextpage{ display:flex; justify-content:space-between; gap:1.4rem; flex-wrap:wrap; padding:2.4rem var(--pad); border-bottom:1px solid var(--line); }
.nextpage a{ font-family:var(--display); font-size:clamp(1.1rem,1rem + 1vw,1.6rem); text-decoration:none; border-bottom:1px solid var(--amber); }
.nextpage span{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-soft); margin-bottom:.3rem; }

/* ---------- Spread: timeline map ---------- */
.mapwrap{ border:1px solid rgba(239,233,221,.25); background:rgba(239,233,221,.03); margin-top:2rem; }
.mapstage{ position:relative; }
#spreadmap{ width:100%; height:auto; display:block; }
#spreadmap .sphere{ fill:#0d2725; }
#spreadmap .grat{ fill:none; stroke:rgba(239,233,221,.06); }
#spreadmap .country{ stroke:#0d2725; stroke-width:.5; transition:fill .7s ease; fill:#2a4643; }
#spreadmap .country.native{ fill:var(--teal-bright); }
#spreadmap .country.est{ fill:var(--amber); }
#spreadmap .country.gone{ fill:url(#hatch); }
#spreadmap .country.proj{ fill:url(#projhatch); }
#spreadmap .mk{ cursor:pointer; }
#spreadmap .mk circle.dot{ fill:var(--paper); stroke:var(--blood); stroke-width:1.5; }
#spreadmap .mk.old{ opacity:.4; }
#spreadmap .mk.proj circle.dot{ fill:none; stroke:var(--paper); stroke-dasharray:2 2; }
#spreadmap .mk.new circle.pulse{ fill:none; stroke:#fff; stroke-width:1.5; animation:mkpulse 1.8s ease-out infinite; transform-box:fill-box; transform-origin:center; }
#spreadmap .mk circle.pulse{ fill:none; stroke:none; }
#spreadmap .mk text{ font-family:var(--mono); font-size:9px; fill:var(--paper); paint-order:stroke; stroke:#0d2725; stroke-width:3px; pointer-events:none; }
#spreadmap .mk.old text{ display:none; }
@keyframes mkpulse{ from{ transform:scale(1); opacity:.9;} to{ transform:scale(3.2); opacity:0;} }
.mapfallback{ padding:2rem; text-align:center; color:rgba(239,233,221,.7); }
.mapctl{ display:grid; grid-template-columns:auto 1fr; gap:1rem 1.4rem; align-items:center; padding:1.2rem clamp(1rem,3vw,1.8rem) .6rem; border-top:1px solid rgba(239,233,221,.2); }
.mapctl .play{ font-family:var(--mono); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; background:var(--amber); color:var(--ink); border:0; padding:.7rem 1.1rem; cursor:pointer; min-width:7.5rem; }
.mapctl .play:hover{ background:var(--paper); }
.mapctl input[type=range]{ background:rgba(239,233,221,.3); }
.ticks{ display:flex; justify-content:space-between; font-family:var(--mono); font-size:.58rem; letter-spacing:.04em; color:rgba(239,233,221,.6); padding:0 clamp(1rem,3vw,1.8rem) 1rem; }
.ticks button{ background:none; border:0; color:inherit; font:inherit; cursor:pointer; padding:.2rem 0; }
.ticks button.on{ color:var(--amber); }
.erapanel{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; padding:1.6rem clamp(1rem,3vw,1.8rem) 1.8rem; border-top:1px solid rgba(239,233,221,.2); }
.erapanel .eyear{ font-family:var(--display); font-size:clamp(2rem,1.4rem + 2.4vw,3.2rem); line-height:1; color:var(--amber); }
.erapanel h3{ color:var(--paper); margin:.5rem 0 .6rem; }
.erapanel ul{ list-style:none; }
.erapanel li{ padding:.55rem 0; border-bottom:1px solid rgba(239,233,221,.12); font-size:.92rem; color:rgba(239,233,221,.85); }
.erapanel li b{ font-family:var(--mono); font-size:.66rem; letter-spacing:.1em; color:var(--amber); margin-right:.5rem; }
.erapanel .noev{ font-size:.9rem; color:rgba(239,233,221,.6); font-style:italic; }
.legend{ display:flex; flex-wrap:wrap; gap:1.2rem; padding:1rem clamp(1rem,3vw,1.8rem); border-top:1px solid rgba(239,233,221,.2); font-family:var(--mono); font-size:.6rem; letter-spacing:.1em; text-transform:uppercase; color:rgba(239,233,221,.75); }
.legend i{ display:inline-block; width:14px; height:10px; vertical-align:-1px; margin-right:.45rem; }
.legend .l-native{ background:var(--teal-bright); } .legend .l-est{ background:var(--amber); }
.legend .l-gone{ background:repeating-linear-gradient(45deg,#7d9894 0 2px,#2a4643 2px 4px); }
.legend .l-proj{ background:repeating-linear-gradient(-45deg,var(--amber) 0 2px,#2a4643 2px 5px); }
.legend .l-mk{ width:10px; height:10px; border-radius:50%; background:var(--paper); border:1.5px solid var(--blood); }
.maptip{ position:absolute; pointer-events:none; background:var(--paper); color:var(--ink); padding:.6rem .8rem; max-width:260px; font-size:.82rem; line-height:1.45; border:1px solid var(--amber); opacity:0; transition:opacity .15s; z-index:5; }
.maptip b{ display:block; font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--amber-deep); }
.mapnote{ font-family:var(--mono); font-size:.6rem; letter-spacing:.04em; color:rgba(239,233,221,.55); padding:0 clamp(1rem,3vw,1.8rem) 1.2rem; line-height:1.7; }
@media(max-width:820px){ .erapanel{ grid-template-columns:1fr; } .ticks{ font-size:.5rem; } .ticks button:nth-child(even){ visibility:hidden; } }

/* ---------- The Bite: hunt sequence ---------- */
.hunt{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,3rem); margin-top:2rem; align-items:center; }
.huntsteps{ display:flex; flex-direction:column; gap:.6rem; }
.hstep{ text-align:left; font:inherit; color:inherit; background:var(--paper); border:1px solid var(--line-strong); padding:1rem 1.2rem; cursor:pointer; transition:border-color .2s, background .2s; display:grid; grid-template-columns:90px 1fr; gap:0 1rem; align-items:baseline; }
.hstep .hd{ font-family:var(--mono); font-size:.7rem; letter-spacing:.1em; color:var(--amber-deep); }
.hstep b{ font-family:var(--display); font-size:1.05rem; }
.hstep p{ grid-column:2; font-size:.9rem; max-height:0; overflow:hidden; transition:max-height .4s ease; color:var(--ink-soft); }
.hstep.on{ border-color:var(--amber); background:#fffaf0; }
.hstep.on p{ max-height:16rem; margin-top:.3rem; }
.radar{ width:100%; max-width:440px; margin:0 auto; display:block; }
.radar .ring{ fill:none; stroke:var(--line-strong); stroke-dasharray:3 4; transition:stroke .4s, stroke-width .4s; }
.radar .ring.on{ stroke:var(--amber); stroke-width:2.5; stroke-dasharray:none; }
.radar .rlab{ font-family:var(--mono); font-size:13px; fill:var(--ink-soft); }
.radar .rlab.on{ fill:var(--amber-deep); font-weight:500; }
.radar .mosq{ transition:transform .8s cubic-bezier(.3,.8,.3,1); }
@media(max-width:820px){ .hunt{ grid-template-columns:1fr; } }

/* profile grid */
.profile{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--line-strong); border:1px solid var(--line-strong); margin-top:2.2rem; }
.profile .pc{ background:var(--paper); padding:1.4rem 1.3rem; }
@media(max-width:900px){ .profile{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:560px){ .profile{ grid-template-columns:1fr; } }
.band.warm .profile .pc{ background:var(--paper-warm); }
.profile .pc b{ display:block; font-family:var(--display); font-size:1.6rem; line-height:1.05; color:var(--ink); }
.profile .pc span{ display:block; font-family:var(--mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--amber-deep); margin:.3rem 0 .5rem; }
.profile .pc p{ font-size:.9rem; }

/* stylet diagram */
.stylets{ display:grid; grid-template-columns:1fr 1fr; gap:2rem; margin-top:2rem; align-items:center; }
.stylets svg{ width:100%; max-width:480px; display:block; margin:0 auto; }
.stylets svg .st{ stroke-linecap:round; fill:none; stroke-width:4; transition:stroke-width .25s, opacity .25s; }
.stylets svg.focus .st{ opacity:.15; }
.stylets svg.focus .st.on{ opacity:1; stroke-width:6; }
.stlist{ list-style:none; }
.stlist li button{ width:100%; text-align:left; font:inherit; color:inherit; background:none; border:0; border-bottom:1px solid rgba(239,233,221,.18); padding:.8rem 0; cursor:pointer; display:grid; grid-template-columns:14px 1fr; gap:.8rem; }
.stlist li button i{ width:14px; height:14px; border-radius:50%; margin-top:.35rem; }
.stlist li button b{ font-family:var(--display); font-size:1.02rem; color:var(--paper); }
.stlist li button span{ display:block; font-size:.88rem; color:rgba(239,233,221,.75); }
.stlist li button:hover b, .stlist li button.on b{ color:var(--amber); }
@media(max-width:820px){ .stylets{ grid-template-columns:1fr; } }

/* magnet / myth cards */
.mcards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:1.2rem; margin-top:2.2rem; }
.mcard{ font:inherit; color:inherit; text-align:left; border:1px solid var(--line-strong); background:var(--paper); padding:1.4rem; cursor:pointer; position:relative; min-height:170px; transition:border-color .25s, transform .25s; display:block; width:100%; }
.mcard:hover, .mcard:focus-visible{ border-color:var(--amber); transform:translateY(-3px); outline:none; }
.mcard .mq{ display:block; font-family:var(--display); font-size:1.15rem; line-height:1.2; padding-right:4.5rem; }
.mcard .mhint{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--teal); margin-top:1rem; display:block; }
.mcard .ma{ display:none; font-size:.9rem; margin-top:.8rem; color:var(--ink-soft); }
.mcard .verdict{ display:none; font-family:var(--mono); font-size:.58rem; letter-spacing:.12em; text-transform:uppercase; padding:.3rem .55rem; color:var(--paper); position:absolute; top:0; right:0; }
.mcard.open .ma, .mcard.open .verdict{ display:block; }
.mcard.open .mhint{ display:none; }
.verdict.yes{ background:var(--teal); } .verdict.some{ background:var(--amber-deep); } .verdict.no{ background:var(--blood); }

/* ---------- Protect: checklist + repellent table ---------- */
.checklist{ list-style:none; margin-top:1.6rem; border:1px solid var(--line-strong); background:var(--paper); max-width:760px; }
.checklist li{ border-bottom:1px solid var(--line); }
.checklist li:last-child{ border-bottom:0; }
.checklist label{ display:grid; grid-template-columns:26px 1fr; gap:.9rem; padding:.9rem 1.1rem; cursor:pointer; align-items:start; }
.checklist input{ width:20px; height:20px; accent-color:var(--teal); margin-top:.25rem; }
.checklist b{ font-family:var(--display); font-size:1.02rem; display:block; }
.checklist span{ font-size:.9rem; color:var(--ink-soft); }
.checklist input:checked + div b{ text-decoration:line-through; text-decoration-color:var(--amber); }
.checkscore{ font-family:var(--mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; margin-top:1rem; color:var(--amber-deep); }
.tablewrap{ overflow-x:auto; border:1px solid var(--line-strong); margin-top:1.6rem; background:var(--paper); }
.rtable{ width:100%; border-collapse:collapse; font-size:.92rem; min-width:600px; }
.rtable th, .rtable td{ text-align:left; padding:.8rem .9rem; border-bottom:1px solid var(--line); vertical-align:top; }
.rtable th{ font-family:var(--mono); font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-soft); background:var(--paper-warm); }
.rtable td:first-child{ font-family:var(--display); font-weight:600; }

/* disease detail */
.dlist{ display:grid; gap:1.6rem; margin-top:2.4rem; }
.ddetail{ display:grid; grid-template-columns:240px 1fr; gap:2rem; border:1px solid var(--line-strong); background:var(--paper); padding:clamp(1.3rem,3vw,2rem); scroll-margin-top:5rem; }
.ddetail aside .vtag{ display:inline-block; font-family:var(--mono); font-size:.56rem; letter-spacing:.14em; text-transform:uppercase; padding:.3rem .55rem; color:var(--paper); }
.ddetail aside dl{ display:grid; gap:.1rem; font-size:.88rem; margin-top:.6rem; }
.ddetail aside dt{ font-family:var(--mono); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-soft); margin-top:.7rem; }
.ddetail aside dd{ font-weight:600; }
.ddetail h2{ font-family:var(--display); font-weight:600; font-size:clamp(1.5rem,1rem + 2vw,2.2rem); line-height:1.05; }
.ddetail .latin{ display:block; font-family:var(--display); font-style:italic; color:var(--teal); margin:.2rem 0 .8rem; }
.ddetail h3{ font-size:1.05rem; margin:1.2rem 0 .3rem; }
.ddetail ul{ margin:.4rem 0 0 1.1rem; }
.ddetail li{ font-size:.95rem; margin-bottom:.25rem; }
.warnbox{ border-left:3px solid var(--blood); background:rgba(138,47,47,.06); padding:1rem 1.2rem; margin-top:1rem; font-size:.94rem; max-width:var(--measure); }
.warnbox b{ color:var(--blood); }
@media(max-width:820px){ .ddetail{ grid-template-columns:1fr; } }

/* nicknames (home) */
.names{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1.2rem; margin-top:2.2rem; }
.name{ border:1px solid var(--line-strong); background:var(--paper); padding:1.4rem 1.3rem; }
.name span{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); }
.name b{ display:block; font-family:var(--display); font-size:1.3rem; line-height:1.15; margin:.4rem 0 .5rem; }
.name p{ font-size:.92rem; color:var(--ink-soft); }

/* look-alike ID cards */
.idcards{ display:grid; grid-template-columns:1fr 1fr; gap:1.2rem; max-width:760px; margin-top:2rem; }
.idcard{ border:1px solid var(--line-strong); background:var(--paper-warm); padding:1.2rem 1.2rem 1.4rem; position:relative; text-align:center; }
.idcard svg{ width:100%; max-width:230px; height:auto; display:block; margin:1.4rem auto .6rem; }
.idcard .ring{ animation:idring 2.4s ease-in-out infinite; }
@keyframes idring{ 50%{ opacity:.25; } }
.idtag{ position:absolute; top:0; left:0; font-family:var(--display); font-style:italic; font-size:.95rem; padding:.35rem .7rem; color:var(--paper); }
.idtag.aeg{ background:var(--blood); } .idtag.alb{ background:var(--ink-soft); }
.idcard figcaption b{ display:block; font-family:var(--display); font-size:1.15rem; }
.idcard figcaption span{ display:block; font-size:.9rem; color:var(--ink-soft); max-width:30ch; margin:.2rem auto 0; }
@media(max-width:560px){ .idcards{ grid-template-columns:1fr; } }

/* talking mosquito callout */
.adacall{ display:grid; grid-template-columns:130px 1fr; gap:1.4rem; align-items:center; border:1px dashed var(--amber); background:#fffaf0; padding:1.2rem 1.4rem; margin-top:2rem; max-width:820px; }
.adacall img{ width:100%; height:auto; filter:drop-shadow(0 8px 10px rgba(18,49,46,.25)); }
.adacall .say{ font-family:var(--display); font-style:italic; font-size:clamp(1.05rem,1rem + .7vw,1.4rem); line-height:1.35; max-width:none; }
.adacall .who{ font-family:var(--mono); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--amber-deep); margin-top:.6rem; }
.adacall .ask{ font-family:var(--mono); font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; margin-top:.6rem; display:inline-block; }
.band.ink .adacall{ background:rgba(239,233,221,.05); }
.band.ink .adacall .say{ color:var(--paper); }
@media(max-width:560px){ .adacall{ grid-template-columns:80px 1fr; gap:1rem; } }