@font-face{font-family:Fraunces;src:url('/assets/fonts/Fraunces.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/SourceSerif4.woff2') format('woff2');font-weight:200 900;font-style:normal;font-display:swap}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/IBMPlexMono.woff2') format('woff2');font-weight:100 700;font-style:normal;font-display:swap}
:root{--paper:#fbfaf7;--ink:#16181a;--rule:#dfdcd4;--dim:#5f6266;--blue:#1b4d8f;--teal:#2e7d74;--ochre:#8a6b3a;--rust:#a8442a;--display:Fraunces,Georgia,serif;--body:'Source Serif 4',Georgia,serif;--mono:'IBM Plex Mono',monospace}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:19px/1.62 var(--body);overflow-x:hidden}
a{color:inherit;text-decoration-color:var(--blue);text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--blue)}
:focus-visible{outline:3px solid var(--rust);outline-offset:4px}
.skip{position:absolute;left:1rem;top:-5rem;background:var(--ink);color:var(--paper);padding:.55rem .8rem;z-index:20;font:700 12px var(--mono)}
.skip:focus{top:1rem}
.site-head{height:76px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule);padding:0 clamp(20px,4vw,64px)}
.brand{position:relative;font:600 27px/1 var(--display);font-variation-settings:'opsz' 96,'wght' 600;text-decoration:none;color:var(--ink)}
.brand:after{content:'';position:absolute;left:0;right:0;bottom:4px;border-top:2px solid var(--blue)}
.site-nav{display:flex;gap:1.5rem;font:11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.site-nav a{text-decoration:none}
.site-nav [aria-current=page]{border-bottom:1px solid var(--ink)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,42vw);gap:clamp(2rem,6vw,7rem);padding:clamp(4rem,10vw,9rem) clamp(20px,6vw,100px) 5rem;align-items:end}
.hero-copy{max-width:900px}
.kicker,.eyebrow,.figure-no,.unit,.source,.byline,.section-no,.chart-label,caption,th,.meta,.field-note{font-family:var(--mono);font-size:11px;line-height:1.45;letter-spacing:.08em;text-transform:uppercase;color:var(--dim)}
.hero h1{font:600 clamp(58px,10vw,148px)/.93 var(--display);font-variation-settings:'opsz' 96,'wght' 600;letter-spacing:-.045em;margin:.25em 0 .28em;max-width:9ch}.page-hero h1{font:600 clamp(58px,10vw,148px)/.86 var(--display);font-variation-settings:'opsz' 96,'wght' 600;letter-spacing:-.045em;margin:.25em 0 .22em;max-width:9ch}
.standfirst{font-size:clamp(22px,2.2vw,31px);line-height:1.35;max-width:32ch;margin:0 0 1.2rem}
.hero-stat{border-top:1px solid var(--rule);padding-top:1rem;align-self:end}
.hero-stat strong{display:block;color:var(--blue);font:600 clamp(52px,8vw,108px)/1 var(--display)}
.hero-stat span{display:block;max-width:22ch}
.intro{max-width:66ch;margin:0 auto;padding:2rem 24px 7rem;font-size:22px}
.story{display:grid;grid-template-columns:minmax(300px,43vw) minmax(0,620px);gap:clamp(2rem,5vw,6rem);max-width:1500px;margin:auto;padding:0 clamp(18px,4vw,60px);align-items:start}
.section-visual{position:sticky;top:18px;height:calc(100vh - 36px);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;background:var(--paper)}
.section-visual svg{width:100%;height:100%;display:block}
#world{transition:transform 700ms cubic-bezier(.22,.7,.2,1);transform-box:view-box;transform-origin:0 0}
.structure{fill:none;stroke:var(--ink);stroke-width:4;vector-effect:non-scaling-stroke}
.fine{fill:none;stroke:var(--dim);stroke-width:2;vector-effect:non-scaling-stroke}
.water{fill:none;stroke:var(--blue);stroke-width:10;vector-effect:non-scaling-stroke}
.fill-water{fill:var(--blue);opacity:.12;stroke:var(--blue);stroke-width:3;vector-effect:non-scaling-stroke}
.used{fill:none;stroke:var(--ochre);stroke-width:10;vector-effect:non-scaling-stroke}
.svg-label{font:32px var(--mono);letter-spacing:.08em;text-transform:uppercase;fill:var(--dim)}
.rain-line{stroke:var(--blue);stroke-width:5;animation:rain 1.2s linear infinite}
.flow{stroke-dasharray:22 16;animation:flow 1.2s linear infinite}
.reservoir-water{animation:level 5s ease-in-out infinite alternate;transform-origin:center bottom}
@keyframes rain{to{transform:translateY(50px)}}
@keyframes flow{to{stroke-dashoffset:-76}}
@keyframes level{to{transform:scaleY(.72)}}
.parts{min-width:0}
.part{position:relative;min-height:96vh;padding:14vh 0 8vh;border-top:1px solid var(--rule)}
.section-no{position:absolute;left:-4.5rem;top:14vh;color:var(--blue)}
.part h2{font:600 clamp(40px,5vw,68px)/1 var(--display);font-variation-settings:'opsz' 96,'wght' 600;letter-spacing:-.025em;margin:0 0 .7em}
.part p{max-width:66ch;margin:0 0 1.4em}
.pull{font-size:27px;line-height:1.35;padding:1.3rem 0;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);margin:2.2rem 0}
.pull strong{color:var(--rust);font-weight:600}
.figure{width:min(100%,850px);margin:4rem 0;border-top:1px solid var(--ink);padding-top:.75rem}
.figure-head{display:grid;grid-template-columns:72px 1fr;gap:1rem;margin-bottom:1.2rem}
.figure h3{font:600 28px/1.15 var(--display);margin:0}
.unit{grid-column:2;margin-top:.45rem}
.chart-frame{overflow-x:auto}
.chart{display:block;width:100%;min-width:620px;height:auto;overflow:visible}
.chart text{font:11px var(--mono);fill:var(--dim)}
.chart .axis,.chart .grid{stroke:var(--rule);stroke-width:1}
.chart .bar{fill:var(--blue);transform-box:fill-box;transform-origin:left center}
.chart .rain{fill:var(--blue);opacity:.35;transform-origin:center bottom}
.chart .area{fill:var(--teal);opacity:.2;stroke:var(--teal);stroke-width:2}
.chart .line{fill:none;stroke:var(--blue);stroke-width:3}
.chart .average,.chart .annotation{stroke:var(--rust);stroke-width:1.5;stroke-dasharray:4 3}
.chart .lost{fill:var(--rust)}.chart .treatment{fill:var(--ochre)}.chart .delivered{fill:var(--teal)}
.figure:not(.drawn) .animate-bar{transform:scaleX(0)}
.figure:not(.drawn) .animate-rain{transform:scaleY(0)}
.figure:not(.drawn) .trace{stroke-dasharray:1800;stroke-dashoffset:1800}
.figure.drawn .animate-bar,.figure.drawn .animate-rain{transition:transform 600ms ease;transform:scale(1)}
.figure.drawn .trace{transition:stroke-dashoffset 600ms ease;stroke-dashoffset:0}
.source{margin-top:.8rem;text-transform:none;letter-spacing:.02em}
details{margin-top:1rem;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
summary{cursor:pointer;padding:.7rem 0;font:11px var(--mono);letter-spacing:.08em;text-transform:uppercase}
.table-wrap{overflow-x:auto;padding-bottom:1rem;max-height:420px}
table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.35}
caption{text-align:left;padding:.6rem 0}
th,td{text-align:left;border-bottom:1px solid var(--rule);padding:.42rem .6rem;white-space:nowrap}
th{color:var(--ink)}
.household{border-top:3px solid var(--blue);margin:4rem 0;padding-top:1.5rem}
.household h3{font:600 34px/1.1 var(--display);margin:.2rem 0 1rem}
.form-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:end}
label{display:grid;gap:.35rem;font:12px var(--mono);letter-spacing:.04em}
input,select,button{border:1px solid var(--ink);border-radius:0;background:var(--paper);color:var(--ink);padding:.7rem;font:16px var(--mono)}
button{background:var(--ink);color:var(--paper);cursor:pointer}
.comparison{margin-top:2rem}
.compare-row{display:grid;grid-template-columns:110px 1fr 110px;gap:.7rem;align-items:center;margin:.7rem 0;font:12px var(--mono)}
.compare-track{height:24px;background:var(--rule)}
.compare-fill{height:100%;background:var(--blue)}
.compare-row.median .compare-fill{background:var(--teal)}
.page-hero,.prose{max-width:960px;margin:auto;padding-left:24px;padding-right:24px}
.page-hero{padding-top:clamp(4rem,10vw,8rem);padding-bottom:4rem;border-bottom:1px solid var(--rule)}
.page-hero h1{font-size:clamp(58px,9vw,112px);max-width:none}
.prose{padding-top:4rem;padding-bottom:7rem}
.prose h2{font:600 42px/1.05 var(--display);margin:2.5rem 0 .7rem}
.prose h3{font:600 28px/1.15 var(--display);margin:2rem 0 .5rem}
.prose p,.prose ul{max-width:66ch}
.fiction-note{border:2px solid var(--rust);padding:1.2rem;font-size:22px;max-width:66ch}
.download{display:inline-block;margin:1rem 0 2rem;border:1px solid var(--ink);padding:.7rem 1rem;font:12px var(--mono);text-decoration:none;text-transform:uppercase;letter-spacing:.06em}
.site-footer{border-top:1px solid var(--rule);padding:2rem clamp(20px,4vw,64px);display:grid;grid-template-columns:1fr auto;gap:1rem;font:11px/1.5 var(--mono);letter-spacing:.03em;color:var(--dim)}
.site-footer p{margin:0}
.not-found{min-height:calc(100vh - 76px);display:grid;place-items:center;text-align:center;padding:2rem}
.not-found h1{font:600 clamp(100px,24vw,260px)/.8 var(--display);color:var(--blue);margin:0}
@media(max-width:950px){.hero{grid-template-columns:1fr}.hero-stat{max-width:420px}.story{display:block;padding:0}.section-visual{top:0;height:42vh;z-index:3;border-top:0;background:rgba(251,250,247,.97)}.parts{padding:0 24px}.part{min-height:auto;padding:5rem 0}.section-no{position:static;display:block;margin-bottom:1rem}.figure{width:100%}.site-footer{grid-template-columns:1fr}}
@media(max-width:560px){body{font-size:18px}.site-head{height:auto;min-height:68px;align-items:flex-start;padding-top:18px;padding-bottom:16px}.site-nav{gap:.8rem;flex-wrap:wrap;justify-content:flex-end}.hero{padding-top:4rem}.hero h1{font-size:62px}.intro{font-size:20px;padding-bottom:4rem}.section-visual{height:34vh}.part{padding-top:4rem}.figure-head{grid-template-columns:1fr}.unit{grid-column:1}.form-row{display:grid}.compare-row{grid-template-columns:80px 1fr;}.compare-row strong{grid-column:2}.page-hero h1{font-size:62px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation:none!important;transition:none!important}.figure:not(.drawn) .animate-bar,.figure:not(.drawn) .animate-rain{transform:none}.figure:not(.drawn) .trace{stroke-dashoffset:0}}