:root { color-scheme: dark; font-family: "Segoe UI", system-ui, sans-serif; color: #e2ece7; background: #102f3c; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; background: radial-gradient(ellipse at 68% 34%, #294b55 0, #102f3c 47%, #081d29 100%); }
a { color: inherit; text-underline-offset: .2em; }
a:hover { color: #f0d69b; }
:focus-visible { outline: 2px solid #f0d69b; outline-offset: 5px; }
.topbar { max-width: 1600px; margin: auto; padding: 30px 64px 20px; display: flex; justify-content: space-between; align-items: center; gap: 24px; }
.brand { display: flex; gap: 13px; align-items: center; text-decoration: none; font-family: Georgia, serif; font-size: 25px; }
.brand svg { width: 35px; height: 35px; fill: none; stroke: #b9dace; stroke-width: 1.5; }
.brand small { display: block; margin-top: 4px; font: 11px "Segoe UI", sans-serif; color: #9ebbbb; }
.topbar nav { display: flex; gap: 30px; font-size: 13px; color: #bfcdca; }
.topbar nav a { text-decoration: none; }
.overview { max-width: 1500px; margin: auto; display: grid; grid-template-columns: minmax(350px, .85fr) minmax(0, 1.5fr); padding: 0 64px; align-items: start; }
.editorial { padding: 58px 0 30px; position: relative; z-index: 1; }
.edition { font-size: 13px; color: #bfd0c8; margin: 0 0 22px; }
h1 { font-family: Georgia, "Times New Roman", serif; font-size: clamp(52px, 5.3vw, 84px); font-weight: 400; line-height: 1.03; letter-spacing: -.05em; margin: 0; }
.intro { color: #a9c0bd; font-size: 17px; line-height: 1.65; margin: 26px 0 34px; }
.river-preview { max-width: 365px; min-height: 200px; border-left: 2px solid #e7ce95; padding: 3px 0 3px 22px; }
.availability { font-size: 12px; color: #cfbb8c; margin: 0 0 10px; }
h2 { font: 400 30px Georgia, serif; margin: 0 0 10px; letter-spacing: -.015em; }
#preview-description { color: #c1ceca; font-size: 14px; line-height: 1.65; margin: 0 0 18px; min-height: 46px; }
.open-river { display: inline-flex; justify-content: space-between; align-items: center; gap: 24px; background: #e7d5ad; color: #14333f; border-radius: 3px; padding: 12px 17px; font-size: 14px; font-weight: 600; text-decoration: none; }
.open-river:hover { background: #f4e6c8; color: #14333f; }
.place-links { display: flex; gap: 20px; margin: 12px 0 0; font-size: 12px; }
.river-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; max-width: 385px; margin-top: 28px; }
.river-choice { padding: 12px 0; border-top: 1px solid #ffffff19; text-decoration: none; font-size: 13px; display: flex; align-items: center; gap: 9px; }
.river-choice .dot { width: 5px; height: 5px; border-radius: 50%; background: #8ce9ee; flex-shrink: 0; }
.river-choice[data-status="planned"] .dot { background: transparent; border: 1px solid #97b7ba; }
.river-choice.is-active { color: #f0d69b; }
.river-choice.is-active .dot { background: #f0d69b; border-color: #f0d69b; }
.map-stage { position: relative; margin: 0; padding-top: 16px; }
.map-heading { display: flex; justify-content: space-between; position: absolute; z-index: 1; top: 28px; right: 18px; left: 36px; font-size: 12px; color: #b4c4be; pointer-events: none; }
.map-heading > span:first-child { font-family: Georgia, serif; font-size: 19px; }
.north { letter-spacing: .2em; }
.state-map { min-height: 640px; position: relative; }
.state-map svg { width: 100%; height: max(660px, min(940px, calc(100svh - 180px))); display: block; overflow: visible; }
.map-loading { position: absolute; top: 40%; left: 25%; color: #b5c9c3; }
.state-crust { fill: #536460; stroke: #79857a; stroke-width: 1; }
.state-outline { fill: #a7ad89; stroke: #e2d6b399; stroke-width: 1; }
.state-edge { fill: none; stroke: #eadcba99; stroke-width: 1.2; pointer-events: none; }
.terrain-image { filter: url(#terrain-tone); }
.river-map-link { color: #8ce9ee; cursor: pointer; }
.river-map-link .river-glow { stroke: currentColor; stroke-width: 8; fill: none; opacity: .24; filter: url(#river-glow); pointer-events: none; }
.river-map-link .river-line { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.river-map-link .river-hit { fill: none; stroke: transparent; stroke-width: 22; pointer-events: stroke; }
.river-map-link .label-connector { fill: none; stroke: currentColor; stroke-width: .8; opacity: .65; pointer-events: none; }
.river-map-link .label-dot { fill: currentColor; stroke: #193742; stroke-width: 1.2; }
.river-map-link .label-back { fill: #102d3bec; stroke: #aac7c22b; stroke-width: .8; }
.river-map-link text { fill: #e0eeea; font-family: "Segoe UI", sans-serif; font-size: 20px; font-weight: 500; }
.river-map-link .label-arrow { fill: #9abcb9; font-size: 14px; }
.river-map-link:hover, .river-map-link:focus, .river-map-link.is-active { color: #f0d69b; outline: none; }
.river-map-link:hover .river-line, .river-map-link:focus .river-line, .river-map-link.is-active .river-line { stroke-width: 3; }
.river-map-link:focus .label-back { stroke: #f0d69b; stroke-width: 2; }
.river-map-link.is-active .label-back { fill: #274350; stroke: #f0d69b80; }
.map-ocean { fill: #97b4b4; font-family: Georgia, serif; font-size: 21px; font-style: italic; letter-spacing: .08em; opacity: .65; }
.map-region { fill: #d8dfd580; font-family: "Segoe UI", sans-serif; font-size: 12px; letter-spacing: .1em; }
figcaption { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 30px 10px; font-size: 12px; color: #b6c9c3; }
.legend-line { width: 23px; height: 2px; background: #8ce9ee; box-shadow: 0 0 6px #8ce9ee70; }
.map-disclosure { color: #88a5a4; font-size: 11px; margin-left: auto; }
footer { max-width: 1500px; margin: auto; padding: 18px 64px 26px; display: flex; justify-content: space-between; align-items: flex-start; color: #88a5a4; font-size: 11px; }
.map-sources { max-width: 480px; text-align: right; }
.map-sources summary { cursor: pointer; }
.map-sources p { line-height: 1.6; }
.map-sources a { display: block; margin-top: 10px; }
.skip { position: absolute; top: -80px; left: 16px; padding: 12px; background: #e7d5ad; color: #14333f; z-index: 10; }
.skip:focus { top: 12px; }
.noscript { padding: 24px; }
@media (min-width: 1600px) { .overview { padding-left: 74px; padding-right: 74px; } }
@media (max-width: 1100px) {
  .topbar { padding: 25px 32px 12px; }
  .overview { padding: 0 32px; grid-template-columns: minmax(290px, .8fr) minmax(0, 1.4fr); }
  h1 { font-size: 56px; }
  .editorial { padding-top: 45px; }
  .state-map { min-height: 500px; }
  .river-list { grid-template-columns: 1fr; }
  footer { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 760px) {
  .topbar { padding: 22px 22px 10px; }
  .topbar nav a:not(:last-child) { display: none; }
  .overview { display: flex; flex-direction: column; padding: 0 22px; }
  .editorial { display: contents; }
  .edition { order: 0; margin: 28px 0 15px; }
  h1 { order: 1; font-size: clamp(46px, 10vw, 65px); }
  .intro { order: 2; font-size: 15px; margin: 18px 0 10px; }
  .map-stage { order: 3; width: 100%; padding-top: 0; }
  .map-heading { top: 18px; left: 6px; right: 6px; }
  .state-map { min-height: 0; }
  .state-map svg { width: calc(100% + 28px); height: auto; margin-left: -14px; }
  .river-map-link text { font-size: 30px; }
  .river-map-link .label-arrow { font-size: 24px; }
  .river-preview { order: 4; margin: 30px 0 8px; min-height: 0; max-width: 100%; }
  .river-list { order: 5; grid-template-columns: 1fr 1fr; width: 100%; max-width: none; margin-top: 22px; }
  .river-choice { min-height: 44px; }
  figcaption { padding: 5px 0; gap: 8px; }
  .map-disclosure { margin: 0; flex-basis: 100%; }
  footer { padding: 24px 22px; gap: 20px; }
}
@media (prefers-reduced-motion: no-preference) { .river-map-link .river-line { transition: stroke-width .16s; } }