:root{
  --paper:#EEF1EA; --ink:#1F2A24; --muted:#56635B; --forest:#1F3B2D;
  --contour:#A9794C; --contour-idx:#7E5430; --water:#2F6E9B; --rule:#C9D2C6; --live:#2E7D4F;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#131A16; --ink:#DCE5DE; --muted:#9AA8A0; --forest:#BFD9C8;
    --contour:#9A7550; --contour-idx:#C9976A; --water:#6FA6CE; --rule:#2B3730; --live:#6CC08F;
  }
}
:root[data-theme="dark"]{
  --paper:#131A16; --ink:#DCE5DE; --muted:#9AA8A0; --forest:#BFD9C8;
  --contour:#9A7550; --contour-idx:#C9976A; --water:#6FA6CE; --rule:#2B3730; --live:#6CC08F;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 4rem)}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
a:focus-visible,.btn:focus-visible{outline:3px solid var(--water);outline-offset:3px;border-radius:2px}
img,svg{max-width:100%}

.bar{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  max-width:72rem;margin:0 auto;padding:1.25rem 1.5rem}
.brand{font-weight:750;font-stretch:118%;text-decoration:none;letter-spacing:.01em}
.bar nav{display:flex;gap:1.5rem}
.bar nav a{text-decoration:none;color:var(--muted)}
.bar nav a:hover{color:var(--ink)}

main{max-width:72rem;margin:0 auto;padding:0 1.5rem}
h1,h2{font-stretch:125%;line-height:1.05;margin:0}
h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:700}

/* hero */
.hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:2rem;
  padding:3rem 0 4rem;border-bottom:1px solid var(--rule)}
.hero h1{font-size:clamp(2.75rem,7.5vw,5.75rem);font-weight:800;letter-spacing:-.01em;color:var(--forest)}
.lede{font-size:clamp(1.15rem,2vw,1.35rem);line-height:1.5;max-width:34rem;margin:1.25rem 0 0;color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;align-items:center;gap:1.25rem;margin:2rem 0 0}
.btn{display:inline-block;background:var(--forest);color:var(--paper);text-decoration:none;
  padding:.8rem 1.3rem;border-radius:4px;font-weight:600}
.btn:hover{filter:brightness(1.12)}
.link{font-weight:600;text-underline-offset:4px}

.topo{width:100%;height:auto;display:block}
.topo .c{stroke:var(--contour);stroke-width:1;opacity:.85;stroke-dasharray:2400;stroke-dashoffset:0;
  animation:draw 2.2s cubic-bezier(.3,.6,.2,1) both;animation-delay:calc(var(--i)*70ms)}
.topo .c.idx{stroke:var(--contour-idx);stroke-width:1.8}
.topo .river{fill:none;stroke:var(--water);stroke-width:2.5;stroke-linecap:round}
.topo .pin{fill:var(--forest)}
.topo .halo{fill:none;stroke:var(--forest);stroke-width:1.5;opacity:.5;
  animation:ping 1.4s ease-out 1.6s 2 both;transform-box:fill-box;transform-origin:center}
.topo .elev{font:600 15px "Archivo",sans-serif;fill:var(--ink);font-stretch:110%}
.topo .grid{font:500 12px "Archivo",sans-serif;fill:var(--muted)}
@keyframes draw{from{stroke-dashoffset:2400}to{stroke-dashoffset:0}}
@keyframes ping{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.9);opacity:0}}

/* flagship */
.flag{padding:4rem 0;border-bottom:1px solid var(--rule)}
.flag-inner{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.75rem;max-width:52rem}
.flag .glyph{width:4.5rem;height:4.5rem}
.flag p{max-width:40rem}
.flag h2{margin-bottom:.75rem}

.glyph g{stroke:var(--forest);stroke-width:1.6;stroke-linejoin:round;stroke-linecap:round}
.glyph{width:2rem;height:2rem;flex:none}

.status{display:inline-block;font-size:.875rem;font-weight:600;margin:.25rem 0 0;color:var(--muted)}
.status::before{content:"";display:inline-block;width:.55rem;height:.55rem;border-radius:50%;
  margin-right:.45rem;vertical-align:.05rem;border:1.5px solid var(--muted)}
.status.live{color:var(--live)}
.status.live::before{background:var(--live);border-color:var(--live)}

/* legend */
.legend{padding:4rem 0;border-bottom:1px solid var(--rule)}
.sub{color:var(--muted);margin:.5rem 0 2rem}
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--rule)}
.row{display:grid;grid-template-columns:2.5rem 12rem minmax(0,1fr) auto;align-items:center;gap:1.25rem;
  padding:1.1rem .25rem;border-bottom:1px solid var(--rule);text-decoration:none}
.row:hover .rname{text-decoration:underline;text-underline-offset:4px}
.rname{font-weight:700;font-stretch:112%}
.rline{color:var(--muted)}
.row .status{margin:0;white-space:nowrap}

/* about */
.about{padding:4rem 0 5rem;max-width:44rem}
.about h2{margin-bottom:1rem}

/* app page */
.app{max-width:46rem;padding-bottom:5rem}
.crumb{margin:1rem 0 2.5rem}
.crumb a{color:var(--muted);text-underline-offset:4px}
.app-head{display:flex;gap:1.25rem;align-items:flex-start}
.app-head .glyph{width:3.5rem;height:3.5rem}
.app h1{font-size:clamp(2rem,5vw,3.25rem);font-weight:800;color:var(--forest)}
.app h2{font-size:1.35rem;margin:2.5rem 0 .75rem}
.feats{padding-left:1.2rem}
.feats li{margin:.35rem 0}
.feats li::marker{color:var(--contour-idx)}
.note{margin-top:2.5rem;padding:1rem 1.25rem;border-left:3px solid var(--contour);color:var(--muted)}

.foot{max-width:72rem;margin:0 auto;padding:2rem 1.5rem 3rem;border-top:1px solid var(--rule);
  color:var(--muted);font-size:.95rem}
.foot p{margin:.25rem 0}
.foot a{margin-right:1.25rem}

@media (max-width:760px){
  .hero{grid-template-columns:1fr;padding-top:1.5rem}
  .hero-map{order:-1;margin:0 -1.5rem}
  .flag-inner{grid-template-columns:1fr}
  .row{grid-template-columns:2rem minmax(0,1fr);gap:.25rem 1rem}
  .row .glyph{grid-row:span 3}
  .rline,.row .status{grid-column:2}
}
@media (prefers-reduced-motion:reduce){
  .topo .c,.topo .halo{animation:none}
}