:root{
  --pine:#0B3C2C;--pine2:#0E4A37;--pine3:#17614a;--line:#2a6b55;--mist:#E8F1EB;--mist2:#d6e5db;--chalk:#F6FAF7;
  --ink:#10291F;--ink2:#3c5a4d;--on:#EAF4EE;--on2:#b5d0c2;
  --ember:#FF4B2B;--amber:#FF9A1F;--gold:#FFD23F;--river:#57C4F2;
  --disp:'Archivo','Arial Narrow',sans-serif;--text:'Barlow',system-ui,sans-serif;
  --bar:56px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--bar);scrollbar-color:var(--pine3) var(--mist)}
body{margin:0;font:400 16px/1.5 var(--text);color:var(--ink);background:var(--pine);font-variant-numeric:tabular-nums;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--pine)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--pine3);border-radius:5px}::-webkit-scrollbar-track{background:transparent}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
a{color:inherit;text-underline-offset:3px}
h1,h2,h3{font-family:var(--disp);font-stretch:112%;margin:0;line-height:1.08;text-wrap:balance}
h1{font-size:2rem;font-weight:800;letter-spacing:-.01em}
h2{font-size:clamp(1.8rem,3.4vw,2.9rem);font-weight:750;letter-spacing:-.015em}
h3{font-size:1.06rem;font-weight:700}
.gap{margin-top:40px}

.bar{position:sticky;top:0;z-index:30;height:var(--bar);display:flex;align-items:center;gap:26px;padding:0 20px;background:var(--pine);color:var(--on);border-bottom:1px solid var(--line)}
.brand{display:flex}.brand img{height:42px;width:auto}
.bar nav{display:flex;gap:20px;font-weight:500;font-size:.95rem;overflow-x:auto;scrollbar-width:none}
.bar nav a{text-decoration:none;color:var(--on2);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.bar nav a:hover{color:#fff;border-color:var(--gold)}
.stamp{margin-left:auto;color:var(--on2);font-size:.86rem;white-space:nowrap}

.explorer{display:grid;grid-template-columns:340px 1fr;height:calc(100vh - var(--bar));min-height:560px;background:var(--pine)}
.panel{color:var(--on);padding:22px 20px 18px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--pine3) transparent}
.lede{margin:10px 0 18px;color:var(--on2);font-size:.98rem;line-height:1.42}
.note{margin:18px 0 0;font-size:.84rem;color:var(--on2);line-height:1.4}
.mapwrap{position:relative;min-width:0}
.map{position:absolute;inset:0;background:#0a2b20}
.basepick{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:6px;overflow:hidden;margin-bottom:16px}
.basepick button{appearance:none;border:0;background:var(--pine);color:var(--on2);font:500 .86rem var(--text);padding:8px 6px;cursor:pointer;transition:background .15s,color .15s}
.basepick button:hover{background:var(--pine2);color:#fff}
.basepick button[aria-checked=true]{background:var(--mist);color:var(--pine);font-weight:600}
.lgroup{margin-top:14px}
.lgroup h3{font-size:.8rem;letter-spacing:.05em;text-transform:uppercase;color:var(--on2);padding-bottom:6px;border-bottom:1px solid var(--line)}
.lrow{padding:7px 0;border-bottom:1px solid rgba(42,107,85,.45)}
.lrow label{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-weight:500;font-size:.95rem;line-height:1.25}
.lrow input[type=checkbox]{appearance:none;width:16px;height:16px;margin:1px 0 0;flex:none;border:1.5px solid var(--on2);border-radius:3px;background:transparent;cursor:pointer;display:grid;place-content:center;transition:background .12s}
.lrow input[type=checkbox]:checked{background:var(--gold);border-color:var(--gold)}
.lrow input[type=checkbox]:checked::after{content:"";width:9px;height:5px;border:solid var(--pine);border-width:0 0 2px 2px;transform:rotate(-45deg) translate(1px,-1px)}
.keys{display:flex;flex-wrap:wrap;gap:3px 11px;margin:5px 0 0 25px;font-size:.8rem;color:var(--on2)}
.keys span{display:inline-flex;align-items:center;gap:5px}
.keys i{display:inline-block;width:12px;height:12px;border-radius:2px}
.keys i.ln{height:3px;border-radius:2px}
.lrow input[type=range]{width:calc(100% - 25px);margin:6px 0 0 25px;accent-color:var(--gold);height:14px}
.jump{position:absolute;top:12px;left:12px;display:flex;flex-wrap:wrap;gap:6px;z-index:5;max-width:calc(100% - 70px)}
.jump button{appearance:none;border:0;border-radius:5px;background:rgba(11,60,44,.92);color:var(--on);font:500 .86rem var(--text);padding:6px 11px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.3);transition:background .15s}
.jump button:hover{background:var(--pine3)}
.coord{position:absolute;left:12px;bottom:12px;z-index:5;background:rgba(11,60,44,.92);color:var(--on);font-size:.84rem;padding:4px 9px;border-radius:5px}
.maplibregl-ctrl-attrib{font-size:10px}
.mk{font:600 13px var(--text);color:#fff;text-shadow:0 1px 3px #000,0 0 2px #000;white-space:nowrap;display:flex;align-items:center;gap:5px;pointer-events:none}
.mk i{width:9px;height:9px;border-radius:50%;background:#fff;border:1.5px solid #0a2b20;flex:none}
.mk.hamlet{font-size:14px;color:var(--gold)}.mk.hamlet i{width:15px;height:15px;background:transparent;border:3px solid var(--gold);box-shadow:0 0 0 1.5px #0a2b20}
.maplibregl-popup-content{font:400 14px/1.4 var(--text);color:var(--ink);padding:10px 12px;border-radius:6px;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.maplibregl-popup-content b{font-family:var(--disp);font-stretch:108%;display:block;margin-bottom:3px;color:var(--pine)}

.band{position:relative;padding:72px 0;overflow:hidden}
.pine{background:var(--pine);color:var(--on)}.mist{background:var(--mist);color:var(--ink)}
.wrap{position:relative;max-width:1240px;margin:0 auto;padding:0 28px}
.sub{max-width:66ch;margin:12px 0 26px;font-size:1.08rem;color:var(--ink2)}
.pine .sub{color:var(--on2)}
.contour{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.2}
.contour path{fill:none;stroke:#7fc2a3;stroke-width:1}.contour path.m{stroke-width:1.6}

.stripwrap{overflow-x:auto;scrollbar-width:thin}
#strip,#passes{display:block;width:100%;min-width:900px;height:auto}
.axis{font:500 13px var(--text);fill:var(--on2)}
.track{font:600 13px var(--text);fill:var(--on)}
.frame{cursor:pointer;outline:none}
.frame circle{transition:r .12s}
.frame:hover circle.dot,.frame:focus-visible circle.dot{r:9}
.frame .ring{opacity:0;fill:none;stroke:var(--gold);stroke-width:2.5}.frame.on .ring{opacity:1}
.timebar{display:flex;align-items:center;gap:16px;margin:16px 0 22px;flex-wrap:wrap}
.framelabel{margin:0;font-family:var(--disp);font-stretch:108%;font-weight:650;font-size:1.12rem}
.btn{appearance:none;display:inline-flex;align-items:center;gap:8px;border:1px solid var(--on2);border-radius:6px;background:transparent;color:inherit;font:600 .92rem var(--text);padding:7px 14px;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.btn:hover{background:var(--on);color:var(--pine)}
.btn.light{border-color:var(--on)}
.map.wide{position:relative;height:66vh;min-height:420px}

.tabs{display:flex;flex-wrap:wrap;gap:0;border-bottom:2px solid var(--mist2);margin-bottom:0}
.tabs button{appearance:none;background:none;border:0;border-bottom:3px solid transparent;margin-bottom:-2px;font:600 1rem var(--text);color:var(--ink2);padding:10px 16px 10px 0;margin-right:14px;cursor:pointer;transition:color .15s,border-color .15s}
.tabs button:hover{color:var(--pine)}
.tabs button[aria-selected=true]{color:var(--pine);border-color:var(--pine)}
.swipe{position:relative;height:74vh;min-height:440px;margin-top:22px;overflow:hidden;touch-action:pan-y}
.clip{clip-path:inset(0 0 0 50%)}
.handle{position:absolute;top:0;bottom:0;left:50%;width:44px;margin-left:-22px;cursor:ew-resize;z-index:6;touch-action:none}
.handle::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 5px rgba(0,0,0,.6)}
.handle span{position:absolute;left:4px;top:50%;width:36px;height:36px;margin-top:-18px;border-radius:50%;background:var(--pine);border:2px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.handle span::before,.handle span::after{content:"";position:absolute;top:11px;width:0;height:0;border:5px solid transparent}
.handle span::before{left:3px;border-right-color:#fff}.handle span::after{right:3px;border-left-color:#fff}
.tag{position:absolute;bottom:14px;z-index:5;background:rgba(11,60,44,.94);color:#fff;font:600 .92rem var(--text);padding:5px 11px;border-radius:5px}
.tag.left{left:12px}.tag.right{right:12px}
.jump.inside{top:12px;left:12px}

.scrolly{display:grid;grid-template-columns:minmax(380px,520px) 1fr;background:var(--chalk);color:var(--ink)}
.scrollytext{padding:72px 34px 40vh}
.scrollymap{position:sticky;top:var(--bar);height:calc(100vh - var(--bar))}
.loc{padding:30px 0;border-top:1px solid var(--mist2);opacity:.55;transition:opacity .25s;scroll-margin-top:90px}
.loc.on{opacity:1}
.loc h3{font-size:1.5rem;font-weight:750;display:flex;align-items:baseline;gap:10px;color:var(--pine)}
.loc h3 button{all:unset;cursor:pointer}.loc h3 button:focus-visible{outline:2px solid var(--pine)}
.nb{font-size:1rem;width:28px;height:28px;border-radius:50%;background:var(--pine);color:#fff;display:inline-grid;place-content:center;flex:none;transform:translateY(-2px)}
.rate{display:inline-block;margin-top:8px;font:600 .82rem var(--text);padding:2px 9px;border-radius:4px;background:var(--mist2);color:var(--pine)}
.rate.best{background:var(--gold)}.rate.strong{background:var(--pine);color:#fff}.rate.flood{background:#cfeafa;color:#0d4a6b}
.loc p{margin:10px 0 0;max-width:60ch}
.xy{display:flex;align-items:center;gap:8px;margin-top:10px;font-weight:600}
.xy button{all:unset;cursor:pointer;font:500 .82rem var(--text);padding:2px 8px;border:1px solid var(--mist2);border-radius:4px;color:var(--ink2);transition:background .15s}
.xy button:hover{background:var(--mist)}.xy button:focus-visible{outline:2px solid var(--pine)}
.meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin-top:8px;font-size:.93rem;color:var(--ink2)}
.ev{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:.88rem;font-weight:500}
.ev span{display:inline-flex;align-items:center;gap:5px}
.ev i{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--pine3);display:inline-block}
.ev i.y{background:var(--pine3)}.ev i.h{background:linear-gradient(90deg,var(--pine3) 50%,transparent 50%)}
.spark{margin-top:12px;width:100%;max-width:420px;height:auto;display:block}
.spark text{font:500 11px var(--text);fill:var(--ink2)}

.twocol{display:grid;grid-template-columns:1fr 1.25fr;gap:56px;align-items:start}
.bars{margin-top:12px}
.barrow{display:grid;grid-template-columns:150px 1fr 60px;gap:10px;align-items:center;padding:7px 0;font-size:.95rem}
.barrow .t{height:14px;background:var(--mist2);border-radius:3px;overflow:hidden}.barrow .t i{display:block;height:100%;border-radius:3px}
.barrow b{text-align:right;font-weight:600}
table.data{width:100%;border-collapse:collapse;margin-top:12px;font-size:.95rem}
.data th{text-align:left;font:600 .82rem var(--text);color:var(--ink2);padding:6px 8px;border-bottom:2px solid var(--pine)}
.data td{padding:8px;border-bottom:1px solid var(--mist2)}
.data td.n,.data th.n{text-align:right}
.data tr[role=button]{cursor:pointer;transition:background .12s}.data tr[role=button]:hover{background:var(--mist2)}
.body{max-width:66ch;color:var(--on2);margin:14px 0 0}.small{font-size:.92rem}
.drop{display:block;width:100%;max-width:560px;margin-top:14px}.drop .l{font:600 15px var(--text);fill:#fff}
.vrow{margin-top:18px}.vrow>span{display:block;font-weight:500;margin-bottom:7px}
.vbar{display:grid;grid-template-columns:96px 1fr 46px;gap:10px;align-items:center;padding:3px 0;font-size:.92rem;color:var(--on2)}
.vbar .t{height:12px;background:rgba(255,255,255,.08);border-radius:2px}.vbar .t i{display:block;height:100%;border-radius:2px;background:#8eb6a4}.vbar.hot .t i{background:var(--ember)}
.vbar b{text-align:right;color:#fff}
.steps{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:26px;counter-reset:s}
.steps li{font-size:.95rem;color:var(--on2);padding-top:12px;border-top:2px solid var(--line)}
.steps b{display:block;color:#fff;font-family:var(--disp);font-stretch:108%;font-weight:700;font-size:1.05rem;margin-bottom:5px}
.foot{position:relative;overflow:hidden;background:var(--pine);color:var(--on);display:flex;gap:44px;align-items:center;flex-wrap:wrap;padding:56px max(28px,calc((100vw - 1184px)/2));border-top:1px solid var(--line)}
.foot img{position:relative}.foot div{position:relative}.foot p{margin:12px 0 0;font-size:1.08rem}
.loading{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);color:#fff;z-index:4;font-weight:600;text-shadow:0 1px 3px #000}

@media (max-width:1040px){
  .stamp{display:none}.steps{grid-template-columns:repeat(2,1fr)}
  .twocol{grid-template-columns:1fr;gap:36px}
  .explorer{grid-template-columns:1fr;height:auto}
  .mapwrap{height:68vh;order:-1}
  .panel{overflow:visible}
  .scrolly{grid-template-columns:1fr}
  .scrollymap{top:var(--bar);height:42vh;order:-1;z-index:3}
  .scrollytext{padding:32px 18px 40px}
  .wrap{padding:0 18px}.band{padding:52px 0}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}