:root{--navy:#0f1f33;--page-bg:#eef2f6;--card-bg:#fff;--border:#d9e0e7;--text:#1c2b3a;--muted:#5b6b7b;--teal:#13808a;--cyan:#5cc8dc;--orange:#e9a23b;--light-on-dark:#c9d3dd;--rising:#e9a23b;--falling:#0f8fa0;--quiet:#b3bcc5;--hand:"Caveat", cursive;--ease-out:cubic-bezier(.23, 1, .32, 1)}*{box-sizing:border-box}body{color:var(--text);background:var(--page-bg);margin:0;font-family:system-ui,Segoe UI,Roboto,sans-serif}h1,h2,h3,p,figure{margin:0}a{color:var(--teal)}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid var(--teal);outline-offset:3px}.opening a:focus-visible,.chapter-dark a:focus-visible{outline-color:var(--cyan)}.wrap{max-width:1200px;margin:0 auto;padding:0 32px}.hand-note{font-family:var(--hand);font-size:20px;font-weight:500;line-height:1}.opening{background:var(--navy);color:#fff;padding:56px 0 64px}.opening-top{grid-template-columns:minmax(0,1fr) minmax(0,360px);align-items:center;gap:56px;display:grid}.kicker{text-transform:uppercase;letter-spacing:1px;color:var(--cyan);margin-bottom:16px;font-size:14px;font-weight:600}.opening h1{letter-spacing:-.5px;text-wrap:balance;max-width:760px;font-size:56px;line-height:1.1}.scribble{white-space:nowrap;position:relative}.scribble svg{width:100%;height:14px;position:absolute;bottom:-12px;left:0;overflow:visible}.scribble path{fill:none;stroke:var(--orange);stroke-width:4px;stroke-linecap:round;vector-effect:non-scaling-stroke}.lede{max-width:540px;color:var(--light-on-dark);margin-top:32px;font-size:20px;line-height:1.5}.tide-now{background:#14273f;border:1px solid #2c4159;border-radius:16px;padding:24px}.tide-now-title{text-transform:uppercase;letter-spacing:1px;color:var(--light-on-dark);font-size:14px;font-weight:600}.tide-now-row{align-items:center;gap:16px;margin:12px 0;display:flex}.tide-arrow{color:#4b5d72;flex-shrink:0;width:44px;height:56px}.tide-arrow path{fill:none;stroke:currentColor;stroke-width:5px;stroke-linecap:round;stroke-linejoin:round}.tide-arrow .arrow-shaft,.tide-arrow .arrow-head{transform-origin:28px 36px;transition:transform .4s var(--ease-out)}.tide-arrow .arrow-wave{stroke:var(--cyan);stroke-width:3px}.tide-arrow.rising{color:var(--orange)}.tide-arrow.falling{color:var(--cyan)}.tide-arrow.falling .arrow-shaft,.tide-arrow.falling .arrow-head{transform:rotate(180deg)}.tide-now-state{font-size:44px;font-weight:800;line-height:1}.tide-now-state.is-empty{color:#4b5d72}.tide-now-text{color:var(--light-on-dark);font-size:17px;line-height:1.45}.tide-now-meta{font-family:var(--hand);color:var(--cyan);margin-top:10px;font-size:19px}.chapter{padding:80px 0}.chapter-dark{background:var(--navy);color:#fff}.chapter-tint{border-top:1px solid var(--border);background:#fff}.chapter-head{margin-bottom:32px}.chapter-head .chapter-number{color:var(--teal);margin:0 0 6px;font-size:30px}.chapter-dark .chapter-head .chapter-number{color:var(--orange)}.chapter-head h2{letter-spacing:-.3px;max-width:16em;color:var(--navy);text-wrap:balance;font-size:36px;line-height:1.15}.chapter-dark .chapter-head h2{color:#fff}.chapter-head p{max-width:34em;margin-top:14px;font-size:18px;line-height:1.55}.chapter-dark .chapter-head p{color:var(--light-on-dark)}.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);align-items:center;gap:56px;display:grid}.split .chapter-head{margin-bottom:0}.stat-line{align-items:center;gap:18px;margin-top:28px;display:flex}.stat-number{color:var(--orange);font-variant-numeric:tabular-nums;font-size:84px;font-weight:800;line-height:1}.stat-number.is-empty{color:#4b5d72}.chapter-dark .stat-label{color:#fff;max-width:11em;font-size:19px;line-height:1.35}.card{background:var(--card-bg);border:1px solid var(--border);color:var(--text);border-radius:16px;padding:24px}.figure h3{color:var(--navy);font-size:18px}.figure figcaption{margin-top:16px}.figure-note{color:var(--muted);font-size:15px;line-height:1.5}.controls{flex-wrap:wrap;align-items:flex-end;gap:16px 28px;margin-bottom:24px;display:flex}.control-label{color:var(--muted);margin-bottom:6px;font-size:14px;display:block}.choice{gap:8px;display:flex}.choice-button,.release-button{min-height:44px;font:inherit;cursor:pointer;transition:transform .16s var(--ease-out);border-radius:10px;padding:0 16px;font-size:15px;font-weight:600}.choice-button:active,.release-button:active{transform:scale(.97)}.choice-button{border:1px solid var(--border);color:var(--text);background:#fff}.choice-button[aria-pressed=true]{background:var(--teal);border-color:var(--teal);color:#fff}.now-tag{background:var(--orange);color:var(--navy);text-transform:uppercase;letter-spacing:.5px;border-radius:999px;margin-left:6px;padding:2px 7px;font-size:12px;display:none}.choice-button.is-now .now-tag{display:inline-block}.release-button{background:var(--orange);color:var(--navy);border:none;margin-left:auto;padding:0 22px;font-size:16px;font-weight:700}.places{height:30px;position:relative}.place{color:var(--navy);white-space:nowrap;padding-bottom:8px;font-size:13px;font-weight:600;position:absolute;bottom:0;transform:translate(-50%)}.place:after{content:"";background:#9aa6b2;border-radius:1px;width:2px;height:6px;margin-left:-1px;position:absolute;bottom:0;left:50%}.place:first-child{transform:none}.place:first-child:after{left:2px}.thames-water{background-color:#d7eef3;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='12'%3E%3Cpath d='M0 6 q10 -6 20 0 t20 0' fill='none' stroke='%23ffffff' stroke-width='2'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='12'%3E%3Cpath d='M0 6 q14 -6 28 0 t28 0' fill='none' stroke='%23ffffff' stroke-opacity='.6' stroke-width='2'/%3E%3C/svg%3E");background-position:0 30px,0 82px;background-repeat:repeat-x;border-radius:10px;height:128px;transition:background-color .6s;position:relative;overflow:hidden}.thames-water.is-rising{background-color:#f4e7d4}.weir{background:var(--navy);width:6px;position:absolute;top:0;bottom:0;left:0}.outfall-pipe{background:var(--navy);border-radius:0 0 5px 5px;width:10px;height:18px;margin-left:-5px;position:absolute;top:0}.flow-note{color:var(--navy);opacity:.75;position:absolute;top:8px;right:14px}.reach{background:var(--orange);opacity:0;transform-origin:0;border-radius:3px;width:100%;height:6px;position:absolute;bottom:10px;left:0}.reach.is-on{opacity:.4}.particle{background:var(--orange);opacity:0;will-change:transform;border-radius:50%;width:10px;height:10px;margin:-5px 0 0 -5px;position:absolute;top:0;left:0;box-shadow:0 0 0 2px #ffffffb3}.particle.is-on{opacity:1}.thames-ends{color:var(--muted);justify-content:space-between;gap:16px;margin-top:8px;display:flex}.day-line{min-height:3em;color:var(--text);font-size:17px;line-height:1.5}.day-line strong{color:var(--navy);font-variant-numeric:tabular-nums}.figure-note+.figure-note,.day-line+.figure-note{margin-top:8px}.legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:6px;margin-top:8px;font-size:14px;display:flex}.key{vertical-align:-1px;border-radius:3px;width:12px;height:12px;display:inline-block}.legend .key+.key,.legend .key:not(:first-child){margin-left:12px}.key-rising{background:var(--rising)}.key-falling{background:var(--falling)}.chart{margin-top:12px;position:relative}.chart svg{width:100%;height:auto;display:block;overflow:visible}.chart .grid{stroke:#e3e8ed;stroke-width:1px}.chart .axis{stroke:#9aa6b2;stroke-width:1px}.chart text{fill:var(--muted);font-size:12px}.chart .label-strong{fill:var(--text);font-weight:600}.chart .bar-rising{fill:var(--rising)}.chart .bar-falling{fill:var(--falling)}.chart .bar-quiet{fill:var(--quiet)}.chart .tide-curve{fill:none;stroke:#9aa6b2;stroke-width:2px;stroke-linecap:round}.chart .marker{stroke:var(--navy);stroke-width:1.5px}.chart .marker-note{fill:var(--navy);font-family:var(--hand);font-size:19px}.chart .hit{fill:#0000}.chart .col.is-hover .hit{fill:#0f1f330d}.tip{z-index:2;background:var(--navy);color:#fff;white-space:nowrap;pointer-events:none;opacity:0;transform-origin:bottom;border-radius:8px;padding:6px 10px;font-size:13px;line-height:1.35;transition:opacity .12s ease-out,transform .12s ease-out;position:absolute;transform:translate(-50%,calc(-100% - 4px))scale(.97)}.tip.is-on{opacity:1;transform:translate(-50%,calc(-100% - 8px))scale(1)}.quiet-title{margin-top:20px;font-weight:600;color:var(--muted)!important;font-size:15px!important}.data-table{color:var(--muted);margin-top:12px;font-size:14px}.data-table summary{cursor:pointer;width:-moz-fit-content;width:fit-content;color:var(--teal);font-weight:600}.data-table table{border-collapse:collapse;color:var(--text);margin-top:10px}.data-table th,.data-table td{text-align:left;font-variant-numeric:tabular-nums;padding:4px 16px 4px 0;font-weight:400}.data-table th{color:var(--muted)}.before-after{border-bottom:1px solid var(--border);grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:28px;padding-bottom:24px;display:grid}.before-after-label{color:var(--muted);font-size:15px}.before-after-numbers{color:var(--navy);font-variant-numeric:tabular-nums;margin:4px 0;font-size:48px;font-weight:800;line-height:1.1}.before-after .then{font-family:var(--hand);color:var(--muted);margin:0 6px;font-size:24px;font-weight:500}.before-after .quiet .before-after-numbers{color:var(--muted);font-size:32px}.before-after-note{color:var(--muted);font-size:15px}.outfalls{border-collapse:collapse;width:100%;font-size:16px}.outfalls th{text-align:left;color:var(--muted);border-bottom:1px solid var(--border);padding:8px 8px 12px;font-size:14px;font-weight:400}.outfalls td{font-variant-numeric:tabular-nums;border-bottom:1px solid #edf0f3;padding:12px 8px}.outfalls td:first-child{color:var(--navy);font-weight:600}.split-bar{vertical-align:middle;gap:2px;width:160px;height:10px;display:inline-flex}.split-bar span{height:100%}.split-bar .part-rising{background:var(--rising);border-radius:3px 0 0 3px}.split-bar .part-falling{background:var(--falling);border-radius:0 3px 3px 0}.split-text{color:var(--muted);margin-left:10px;font-size:14px}.link-button{color:var(--teal);font:inherit;cursor:pointer;background:0 0;border:none;margin-top:16px;padding:0;font-size:16px;font-weight:600;text-decoration:underline}.empty-message{color:var(--muted);text-align:center;padding:32px 0}.limits{border-top:1px solid var(--border);background:#fff;padding:56px 0}.limits h2{color:var(--navy);margin-bottom:14px;font-size:30px}.limits p{max-width:38em;margin-bottom:12px;font-size:17px;line-height:1.55}.chapter-link{margin-top:4px;font-size:17px;font-weight:600;text-decoration:none;display:inline-block}.chapter-link:hover{text-decoration:underline}.footer{background:var(--navy);color:var(--light-on-dark);padding:28px 0;font-size:15px}.footer p+p{margin-top:4px}@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}.kicker,.opening h1,.lede,.tide-now{animation:.8s ease-out both rise}.opening h1{animation-delay:.1s}.lede{animation-delay:.9s}.tide-now{animation-delay:1.2s}.scribble path{stroke-dasharray:1;animation:.9s ease-in-out .6s both draw}.js [data-reveal]{opacity:0;transition:opacity .7s ease-out, transform .7s var(--ease-out);transform:translateY(18px)}.js [data-reveal].is-visible{opacity:1;transform:none}.chart .bar{transform-box:fill-box;transform-origin:bottom;transition:transform .6s var(--ease-out);transform:scaleY(0)}.is-visible .chart.is-drawn .bar{transform:none}.particle{transition:opacity .3s ease-out}.reach{transition:opacity .4s ease-out}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}}@keyframes draw{0%{stroke-dashoffset:1px}to{stroke-dashoffset:0}}@media (max-width:1000px){.opening-top,.split{grid-template-columns:1fr;gap:32px}.opening h1{font-size:44px}.chapter{padding:56px 0}.card{min-width:0;overflow-x:auto}}@media (max-width:700px){.wrap{padding:0 16px}.opening h1{font-size:34px}.scribble{white-space:normal}.chapter-head h2{font-size:28px}.stat-number{font-size:60px}.release-button{width:100%;margin-left:0}.before-after{grid-template-columns:1fr}.before-after-numbers{font-size:36px}.place.minor,.place.mid{display:none}.place:last-child{transform:translate(-80%)}.place:last-child:after{left:80%}.thames-ends .hand-note{font-size:17px}.outfalls{font-size:14px}.outfalls th,.outfalls td{padding-left:4px;padding-right:4px}.split-bar{width:64px}.split-text{margin:4px 0 0;display:block}}
