:root{
  --bg:#f4f5f2; --card:#ffffff; --fg:#14191e; --muted:#4f5963; --line:#bcc4cb;
  --water:#2470ad; --water-fill:rgba(36,112,173,.18); --ground:#e2dacb; --ground-edge:#9a8b70; --link:#1b5e94;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#101417; --card:#181d21; --fg:#eef2f5; --muted:#a8b2bb; --line:#3b444c;
  --water:#66b2ee; --water-fill:rgba(102,178,238,.22); --ground:#2c2923; --ground-edge:#6c624f; --link:#8cc6f5; color-scheme:dark}}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:18px/1.6 var(--sans)}
.wrap{max-width:760px;margin:0 auto;padding:32px max(16px,env(safe-area-inset-left,0px)) 56px;display:grid;gap:36px}
header{display:grid;gap:8px}
.mark{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--water)}
h1{font-size:clamp(30px,6vw,44px);line-height:1.12;margin:0;text-wrap:balance}
h2{font-size:24px;line-height:1.25;margin:0 0 10px;text-wrap:balance}
h3{font-size:19px;line-height:1.3;margin:22px 0 8px}
p{margin:0 0 12px;max-width:62ch}
.lede{font-size:20px;color:var(--muted)}
section{min-width:0}
.nums{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));gap:12px;margin:18px 0 6px;padding:0;list-style:none}
.nums li{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 16px;display:grid;gap:2px}
.nums b{font-size:40px;line-height:1;color:var(--water)}
.nums span{font-size:16px;color:var(--muted)}
figure{margin:18px 0 0;background:var(--card);border:1px solid var(--line);border-radius:8px;padding:14px 14px 10px}
figure svg{display:block;width:100%;height:auto}
figcaption{font-size:15px;color:var(--muted);margin-top:8px}
.grid{stroke:var(--line);stroke-width:1;opacity:.7}
.ax{fill:var(--muted);font:19px var(--sans)}
.fill{fill:var(--water-fill)}
.line{fill:none;stroke:var(--water);stroke-width:2.5;stroke-linejoin:round}
.dot{fill:var(--water)}
.gr{fill:var(--ground);stroke:var(--ground-edge);stroke-width:1.5}
.wt{fill:var(--water-fill);stroke:var(--water);stroke-width:1}
.st{stroke:var(--fg);stroke-width:1.5;fill:none}
.box{fill:var(--card);stroke:var(--fg);stroke-width:1.5}
.dip{stroke:var(--water);stroke-width:2;stroke-dasharray:3 3}
.lab{fill:var(--fg);font:700 15px var(--sans)}
.wl{fill:var(--water)}
.fig2{max-width:380px}
.go{display:inline-block;margin-top:6px;padding:13px 22px;border-radius:8px;background:var(--fg);color:var(--bg);font-weight:700;text-decoration:none}
.go:hover,.go:focus-visible{outline:3px solid var(--water);outline-offset:2px}
a{color:var(--link)}
footer{border-top:1px solid var(--line);padding-top:16px;font-size:15px;color:var(--muted)}
nav{display:flex;gap:18px;font-size:16px}
nav a{color:var(--muted);text-decoration:none}
nav a[aria-current],nav a:hover{color:var(--fg);text-decoration:underline}
.photo{padding:0;overflow:hidden}
.photo img{display:block;width:100%;height:auto}
.photo figcaption{padding:0 14px 10px}
ul.links{padding-left:20px;margin:0 0 12px}
ul.links li{margin:4px 0}
.timeline{list-style:none;padding:0;margin:0 0 12px;display:grid;gap:8px}
.timeline li{display:grid;grid-template-columns:7.5em 1fr;gap:12px}
@media (max-width:480px){.timeline li{grid-template-columns:1fr;gap:0}}
.hero{position:relative;border-radius:10px;overflow:hidden;min-height:clamp(300px,62vw,440px);display:flex;align-items:flex-end;margin-top:4px}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.72) 0%,rgba(0,0,0,.35) 45%,rgba(0,0,0,0) 75%)}
.hero h1{position:relative;z-index:1;color:#fff;padding:20px;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.hero-logo{position:absolute;z-index:1;top:14px;right:14px;width:clamp(78px,18vw,120px);height:auto;border-radius:8px;box-shadow:0 2px 10px rgba(0,0,0,.35)}