/* Approved homepage map-art section (website/homepage-waterway-art/art.css),
   carried over unchanged in look. Fixes only, for text-size settings:
   rem/em sizing, headings allowed to wrap, section grows with its text
   instead of clipping it, em breakpoints. Button uses the site button. */

.waterway-art {
  position: relative; isolation: isolate;
  display: grid; align-content: start;
  width: 100%;
  min-height: min(56.25vw, calc(100svh - 5rem));
  overflow: hidden;
  background: #142c20; color: #f5f6f4;
  scroll-margin-top: 1rem;
  --focus: #83b1b1;
}
.art-landscape { display: none; }
.art-geography { position: absolute; inset: 0; z-index: -4; }
.art-geography svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.geographic-plane { transform: none; }
.states { fill: none; stroke: #c3ded0; stroke-width: 1.8; stroke-opacity: .9; stroke-linejoin: round; }
.states path { vector-effect: non-scaling-stroke; }
.route-glow { fill: none; stroke: #bfe3cc; stroke-width: 12; opacity: .6; filter: url(#soft-glow); }
.route-bed { fill: none; stroke: #294f4b; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.route-line { fill: none; stroke: #d2e9d8; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.route-light { fill: none; stroke: #f5f6f4; stroke-width: 2.4; stroke-dasharray: 8 992; stroke-linecap: round; animation: river-light 14s linear infinite; opacity: .8; }
.ring { fill: #244940; stroke: #d3e8dc; stroke-width: 1; }
.ring-halo { fill: #83b1b114; stroke: #b9d9c6; stroke-opacity: .35; animation: ring-breathe 8s ease-in-out infinite; animation-delay: var(--delay); }
.ring-core { fill: #f5f6f4; stroke: none; }
.art-shade { position: absolute; inset: 0; z-index: -3; background: linear-gradient(90deg, #0e1c26df 0%, #0e1c2680 29%, transparent 62%); }

.art-copy {
  position: relative;
  box-sizing: content-box;
  width: min(43%, 37.5rem);
  margin-inline-start: max(0px, calc((100% - var(--content, 87.5rem) - 2 * var(--gutter, 3rem)) / 2));
  padding: clamp(2.5rem, 1rem + 6vw, 7.2rem) 0 clamp(2.5rem, 1rem + 4vw, 5rem) var(--gutter, 3rem);
}
.art-kicker { font: .75rem/1.8 "DM Sans", sans-serif; color: #c0d2c5; letter-spacing: .025em; margin: 0 0 1.625rem; }
.waterway-art h2 {
  font: 400 clamp(1.875rem, .9rem + 2.6vw, 3.375rem)/1.12 Lora, Georgia, serif;
  letter-spacing: -.025em; color: #f5f6f4; margin: 0 0 1.625rem;
  text-wrap: balance;
}
.waterway-art h2 span { display: block; }
.art-link.button { margin: 0; }

.art-mist { position: absolute; pointer-events: none; z-index: -1; will-change: transform; }
.mist-one { left: 27%; top: 29%; width: 38%; height: 32%; filter: blur(11px); background: radial-gradient(ellipse at 25% 36%, #edf3e8aa 0%, #e2ece060 20%, transparent 49%), radial-gradient(ellipse at 62% 57%, #edf3e8a0 0%, #dce9df50 18%, transparent 48%), radial-gradient(ellipse at 84% 39%, #e7f0e590, transparent 39%); animation: traveling-fog 12s linear infinite; }
.mist-two { left: 24%; top: 59%; width: 40%; height: 25%; filter: blur(14px); background: radial-gradient(ellipse at 30% 50%, #e6efe299, transparent 48%), radial-gradient(ellipse at 72% 43%, #e6efe288, transparent 44%); animation: traveling-fog 15s linear -7s infinite; }
@keyframes traveling-fog { 0% { transform: translate(-65%, 12%); opacity: 0; } 15% { opacity: .35; } 75% { opacity: .325; } 100% { transform: translate(55%, -18%); opacity: 0; } }
@keyframes river-light { to { stroke-dashoffset: -1000; } }
@keyframes ring-breathe { 0%, 100% { opacity: .35; } 50% { opacity: .9; } }
.waterway-art.paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) { .waterway-art * { animation: none !important; } .art-mist { opacity: .12; } }

@media (max-height: 40.625em) and (min-width: 43.8125em) {
  .art-copy { padding-top: 2rem; }
  .waterway-art h2 { font-size: clamp(1.75rem, 1rem + 3vh, 2.75rem); }
  .art-kicker { margin-bottom: 1rem; }
}

/* Shorter band on wider screens (Betsy, 2026-10-05: "the map section is really large but doesn't really contain much").
   The art keeps its 16:9 size and is cropped into its empty margins above Kentucky and below the Gulf coast:
   44vw tall instead of 56.25vw, with the whole four-state map still in view. */
@media (min-width: 43.8125em) {
  .waterway-art { min-height: min(44vw, calc(100svh - 5rem)); }
  .art-geography { inset: auto 0; top: -4.6vw; height: 56.25vw; }
}

/* Phone layout: copy on top, map below it (the map now starts where the copy ends,
   so larger text pushes the map down instead of covering it). */
@media (max-width: 43.75em) {
  .waterway-art { display: flex; flex-direction: column; min-height: calc(100svh - 5rem); }
  .art-copy { order: -1; width: auto; margin: 0; padding: 1.875rem var(--gutter, 1rem) 0; }
  .art-kicker { font-size: .75rem; margin-bottom: 1.125rem; }
  .waterway-art h2 { font-size: clamp(1.5625rem, 1rem + 4vw, 2.625rem); margin-bottom: 1.125rem; }
  .art-geography { position: relative; inset: auto; z-index: -4; flex: 1 1 auto; min-height: 24rem; margin-top: -3rem; }
  .art-shade { background: linear-gradient(180deg, #0e1c26 0%, #0e1c26f0 25%, #0e1c2650 45%, transparent 65%); }
  .mist-one { left: 0; top: 48%; width: 70%; height: 24%; }
  .mist-two { left: 0; top: 72%; width: 72%; height: 20%; }
}