/* v5: one coherent atlas; accessible inline explanations. */
html{scroll-padding-top:var(--nav-offset,128px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
main:focus,section[tabindex="-1"]:focus{outline:none}
.topnav a[aria-current="location"]{background:var(--estuary);color:#fff}
.topnav a[aria-current="location"] i{color:var(--sea-glass)}
.rm{min-width:9rem}
.rm:disabled{opacity:1;cursor:default}
.history{margin-top:0;padding-top:0;border-top:0;margin-bottom:var(--near)}
.history p{font-size:1.0625rem;line-height:1.55}
.map{background:var(--mineral);padding:clamp(1rem,2.5vw,2rem);border-radius:var(--r)}
.map-title{font-size:1.45rem;margin:0 0 1rem}
.map-layout{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(16rem,1fr);gap:1.5rem;align-items:start}
.map-key{display:block;margin:0}
.map-key ol{display:grid;grid-template-columns:1fr;gap:.35rem}
.map-key li{font-size:1rem;line-height:1.3;min-height:1.8rem}
.map-key li::before{width:1.55rem;height:1.55rem;font-size:.875rem}
.key-h{font:700 1rem/1.3 var(--font-display);letter-spacing:.04em}
.map figcaption{font-size:.9rem;margin-top:.7rem}
.l4-desktop{margin-top:1.2rem;max-width:18rem}
.l4-desktop h4{font:700 1rem/1.4 var(--font-display);margin:0 0 .4rem}
.l4-desktop img{width:100%}
.chapter-word{font:700 .875rem/1.3 var(--font-display);letter-spacing:.12em;color:var(--copper-text);margin:0 0 .5rem}
.link-block h3{font-size:clamp(1.6rem,2.1vw,2rem);line-height:1.16;max-width:22ch;margin-bottom:.8rem}
.pair{gap:clamp(1.5rem,4vw,3.5rem)}
.chain{gap:clamp(2rem,4vw,3.5rem)}
.link-block{padding-bottom:clamp(2rem,4vw,3.5rem)}
.local-proof{padding:1rem 1.1rem;margin:1.1rem 0;background:#f7faf6;border-left:3px solid var(--copper);border-radius:0 10px 10px 0;font-size:1rem;line-height:1.5}
.local-proof strong{display:block;color:var(--estuary);font:700 1rem/1.35 var(--font-display);margin-bottom:.35rem}
.people{font-size:.98rem;line-height:1.5}
.buoy img{width:min(100%,340px)}
.buoy-caption{max-width:27ch;text-align:center;margin:.4rem auto 1rem;line-height:1.4}
.tri-labels{gap:.45rem;font-size:.9375rem}
.tri-labels li{padding:.3rem .65rem}
.tri-labels li+li::before{content:none}
.survey-steps{list-style:none;margin:1.1rem 0;padding:0;display:grid;gap:.6rem}
.survey-steps li{display:grid;grid-template-columns:4.1rem 1fr;gap:.65rem;padding:.65rem 0;border-top:1px solid #b6cec6;font-size:1rem;line-height:1.45}
.survey-steps b{font-family:var(--font-display);color:var(--copper-text)}
.vessel img{width:min(100%,285px)}
.echo-card{background:var(--mineral);padding:1.1rem;border-radius:var(--r);border:1px solid #b5cfc7}
.echo-card h4{font:700 1.2rem/1.25 var(--font-display);margin:0 0 .5rem}
.echo-diagram{width:100%;height:auto;display:block;max-height:18rem}
.echo-key{display:flex;justify-content:center;gap:1.5rem;font:700 .94rem/1.4 var(--font-display);margin:.65rem 0}
.echo-key span{display:flex;align-items:center;gap:.45rem}
.echo-key i{width:1.2rem;height:3px;display:block}.key-out{background:var(--copper-text)}.key-back{background:var(--estuary)}
.echo-explanation{font-size:1rem;line-height:1.5;margin:.8rem 0}
.pulse-button{font:700 1rem/1.3 var(--font-display);border:0;border-radius:999px;min-height:46px;padding:.65rem 1.1rem;color:white;background:var(--estuary);cursor:pointer}
.pulse-button:hover{background:var(--copper-text)}
.pulse-button[aria-disabled="true"]{cursor:wait;opacity:.78}
.pulse-button span{margin-left:.6rem}
.pulse-status{font-size:1rem;line-height:1.4;min-height:4.2em;margin:.7rem 0 0;max-width:34ch}
.diagram-note{font-size:.875rem;line-height:1.4;color:var(--muted);padding-top:.6rem;border-top:1px solid #d2dbd4;margin:.3rem 0 0}
.signal-dot,.echo-ring{opacity:0;pointer-events:none}
@keyframes pulse-out{from{transform:translate(0,0)}to{transform:translate(-41px,169px)}}
@keyframes pulse-back{from{transform:translate(0,0)}to{transform:translate(-26px,-169px)}}
.echo-card[data-phase="out"] .signal-out{opacity:1;animation:pulse-out 1.1s linear both}
.echo-card[data-phase="back"] .signal-back{opacity:1;animation:pulse-back 1.1s linear both}
.echo-card[data-phase="reflect"] .echo-ring{opacity:1}
.echo-card[data-phase="complete"] .echo-back-line{stroke-width:6}
.annot li{border:0;border-radius:999px;padding:.4rem .7rem;font-size:.94rem}
.fit td strong,.fit td span{display:block}
.fit td strong{font:700 1.04rem/1.4 var(--font-display);margin-bottom:.35rem}
.fit td:last-child{font-weight:400;width:31%}
.fit tbody th{width:24%}
.fit td,.fit tbody th{padding-top:1.1rem;padding-bottom:1.1rem}
.routes-grid{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;margin-bottom:var(--near)}
.routes-grid h3,.act h3{font-size:1.35rem}
.routes-grid p{font-size:1.0625rem;line-height:1.55}
.team-note{font-size:1rem;line-height:1.5;margin:1.2rem 0 0;color:var(--muted)}
.next-links{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:1.2rem}
.next-links h4{font:700 .94rem/1.3 var(--font-display);text-transform:uppercase;color:var(--copper-text);letter-spacing:.06em;margin:0 0 .7rem}
.next-links a{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.65rem 0;min-height:48px;border-top:1px solid #c4cec3;line-height:1.4;text-decoration:none}
.next-links a:hover{text-decoration:underline}.next-links p{font-size:.94rem;color:var(--muted);margin:.7rem 0 0}
.no-js .rm,.no-js .echo-interaction{display:none}
@media(max-width:999px){.map-layout{grid-template-columns:minmax(0,1.4fr) minmax(15rem,1fr);gap:1rem}.map-key li{font-size:.94rem}.key-h{font-size:.94rem}.l4-desktop{max-width:15rem}}
@media(max-width:799px){
 .map-layout{grid-template-columns:1fr}
 .map-key{margin-top:.4rem}
 .map-key ol{grid-template-columns:1fr 1fr;gap:.55rem .8rem}
 .map-key li{align-items:start;font-size:1rem;line-height:1.35}
 .map-key li::before{margin-top:.05rem}
 .l4-desktop{display:none}
 .map-title{font-size:1.25rem}
 .map picture img{max-width:34rem}
 .fit tbody th,.fit td{padding:0}
 .fit td:last-child{margin-top:.6rem;padding:.75rem .85rem;background:#e4eee7;border-radius:8px}
 .fit td:last-child::before{margin-top:0;margin-bottom:.25rem}
 .fit td::before{letter-spacing:.05em}
 .fit tr{padding:1.25rem 0}
 .fit td strong{margin-top:.3rem}
 .routes-grid{grid-template-columns:1fr;gap:1.2rem}
 .link-block h3{max-width:24ch}
 .pair-media{max-width:34rem;width:100%;margin:0 auto}
 .buoy img{width:min(100%,290px)}
 .l4-mobile{max-width:24rem;margin:.3rem auto 0}
 .vessel img{width:min(100%,260px)}
 .annot{gap:.4rem}
 .next-links{grid-template-columns:1fr;gap:1.5rem}
}
/* Approachable AI fix: the compact three-column navigation now runs to 480px,
   where the short labels already switch in, instead of stopping at 400px;
   above 400px the text keeps its full size. Between 481px and 699px the
   numbered links may wrap to a second row rather than overrun the header.
   The three equal columns are flex items with a zero basis rather than grid
   tracks: the same widths (to 0.02px) at the default text size, but a label can never be
   narrower than its longest word, so with enlarged text a link moves to a new
   row instead of its words spilling into the next link. For the same reason
   the "Britain's Ocean City" line under the brand may wrap on phones. */
@media(max-width:480px){
 .topnav{display:flex;gap:.15rem}
 .topnav a{flex:1 1 0;justify-content:center;text-align:center;white-space:normal;line-height:1.15}
 .topnav a i{display:none}
}
@media(max-width:699px){.topnav{flex-wrap:wrap}.brand span{white-space:normal}}
@media(max-width:400px){
 .brand b{font-size:1.18rem}
 .brand span{font-size:.77rem;letter-spacing:.1em}
 .rm{font-size:.875rem;min-width:8rem;padding:.15rem .6rem}
 .map-key ol{grid-template-columns:1fr}
 .echo-card{padding:min(.85rem,4.25vw)}
 .pulse-status{min-height:5.6em}
 .survey-steps li{grid-template-columns:3.65rem 1fr;gap:.4rem}
}
@media(max-width:350px){.rm{min-width:0;width:6.25rem;font-size:.8125rem;line-height:1.2;padding:.25rem .6rem;white-space:normal}}
@media(prefers-reduced-motion:reduce){.signal-dot,.echo-ring{display:none!important}}
html.rm-on .signal-dot,html.rm-on .echo-ring{display:none!important}
/* Approachable AI enhancement: each onward link carries a short description
   beneath its label, inside the same link, and the guidance sits once beneath
   both groups. Descriptions reuse this section's existing subordinate text
   size and colour; the label and arrow are untouched. */
.next-text{min-width:0}
.next-label,.next-desc{display:block}
.next-desc{font-size:.94rem;line-height:1.45;color:var(--muted);margin-top:.15rem}
.next-links>.next-guidance{grid-column:1/-1;margin:0}
/* Approachable AI fix: enlarged text on narrow phones. Nothing here changes
   the default-size layout; each rule only acts once text outgrows its space.
   A word longer than its line breaks rather than running past the edge (no
   soft hyphens: they would also change wrapping at the default size). The survey steps put the description under its label
   once the two no longer fit side by side, and the key's two items wrap. */
main{overflow-wrap:break-word}
.survey-steps li{display:flex;flex-wrap:wrap}
.survey-steps li>b{flex:0 0 4.1rem}
.survey-steps li>span{flex:1 1 10rem;min-width:0}
.echo-key{flex-wrap:wrap}
/* Side padding (and the echo card's, at 400px and below) gives way before
   "reading ↘" would outgrow its panel; 1.1rem
   from 320px up at the default size, as for "Start exploring". */
.pulse-button{padding-left:min(1.1rem,5.5vw);padding-right:min(1.1rem,5.5vw)}
@media(max-width:400px){.survey-steps li>b{flex-basis:3.65rem}}
/* The onward-link column no longer stretches to its longest word, and the map
   key drops to one column when it is narrower than 19rem: that never happens
   between 401px and 799px at the default size, where it keeps two. */
@media(max-width:799px){
 .next-links{grid-template-columns:minmax(0,1fr)}
 .map-key{container-type:inline-size}
 @container (max-width:19rem){.map-key ol{grid-template-columns:1fr}}
}