/* Generated conceptual imagery; exact teaching diagrams remain available. */
.hero-render { position: absolute; inset: 0; z-index: -3; display: block; overflow: hidden; }
.hero-render img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; }
/* A functional image scrim keeps white text readable over the artwork. */
.hero-legibility { position: absolute; inset: 0; z-index: -2; pointer-events: none; background: linear-gradient(90deg, #0c1830 0%, #0c1830f2 22%, #0c1830b3 37%, #0c183000 62%); }
.hero-watermark { opacity: .45; }
.hero-art-stage { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; min-height: 650px; padding: 35px var(--gutter) 35px 32px; }
.hero-art-stage .stage-heading { color: #d0e0f1; position: relative; }
.hero-art-stage .stage-heading span { background: #0c1830d9; padding: 5px 8px; border-radius: 2px; }
.hero-scene__takeaway { z-index: 2; }
.hero-bottom { background: #0c183080; }
.hero__detail { position: relative; z-index: 2; }

.scene-render, .cooling-render { display: block; }
.scene-render img, .cooling-render img { display: block; width: 100%; height: auto; }
.fate-figure { padding: 28px; overflow: hidden; }
.fate-figure figcaption { margin-top: 16px; }
.landscape-map { position: relative; margin-top: 24px; isolation: isolate; }
.pathway-overlay { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.pathway-overlay :is(path,use) { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; }
.pathway-halo { stroke: white; stroke-width: 8; opacity: .8; }
.pathway-air { stroke: #2456e8; }
.pathway-water { stroke: #09695e; }
.pathway-soil { stroke: #b74723; }
.pathway-track { stroke-width: 3; opacity: .55; }
.pathway-flow { stroke-width: 6; stroke-dasharray: 10 28; animation: landscape-flow 3s linear infinite; animation-play-state: paused; }
.pathway-flow.pathway-soil { animation-duration: 4s; }
.js .pathways-visible .pathway-flow { animation-play-state: running; }
.motion-paused .pathway-flow { animation-play-state: paused !important; }
@keyframes landscape-flow { to { stroke-dashoffset: -152; } }
.pathway-pin, .pathway-label { position: absolute; transform: translate(-50%,-50%); color: white; background: var(--navy-deep); box-shadow: 0 2px 8px #0c183030; }
.pathway-pin { display: grid; place-items: center; width: 27px; height: 27px; border: 2px solid white; border-radius: 50%; font-size: 11px; font-weight: 700; }
.pathway-pin--manufacture { left: 17%; top: 15%; }
.pathway-pin--use { left: 51%; top: 27%; }
.pathway-pin--end { left: 82%; top: 24%; }
.pathway-label { font-size: 10px; line-height: 1; padding: 7px 9px; border-radius: 3px; white-space: nowrap; }
.pathway-label--air { left: 52%; top: 6%; }
.pathway-label--water { left: 59%; top: 48%; }
.pathway-label--soil { left: 88%; top: 52%; }
.pathway-label--groundwater { left: 37%; top: 71%; }
.pathway-key { display: flex; flex-wrap: wrap; gap: 12px 24px; list-style: none; padding: 0; margin: 20px 0 0; }
.pathway-key li { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--muted); }
.pathway-key li span { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--navy-deep); color: white; font-size: 9px; }
.landscape-pathways figcaption { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: space-between; }
.landscape-pathways figcaption > span { max-width: 52ch; }
.fate-layout { align-items: stretch; gap: 4%; grid-template-columns: minmax(0,1.4fr) minmax(0,.8fr); }
.scroll-scenes .landscape-pathways, .landscape-pathways { position: relative; top: auto; align-self: start; }
.fate-questions { display: grid; grid-template-rows: repeat(5,auto); }
.fate-step, .scroll-scenes .fate-step { min-height: 0; padding: 17px 0 17px 30px; display: block; }
.fate-step__number { position: absolute; left: 0; top: 22px; }
.fate-step h3 { font-size: clamp(19px,1.6vw,24px); margin: 0 0 9px; line-height: 1.25; }
.fate-step p { font-size: 12px; line-height: 1.7; }
.fate-side b { display: block; margin-bottom: 3px; font-size: 9px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.fate-side--concern b { color: var(--coral-ink); }
.fate-side--other { margin-top: 10px; padding: 10px 12px; background: var(--teal-soft); border-left: 3px solid var(--teal); }
.fate-side--other b { color: #09695E; }
.fate-step .fate-side--other { color: var(--ink); }
.fate-side--other a { color: #09695E; }
.fate-side__note { display: block; margin-top: 2px; color: var(--muted); font-size: 10px; }
@media (min-width: 1025px) {
  .scroll-scenes .landscape-pathways, .landscape-pathways { position: sticky; top: 92px; }
}
@media (min-width: 1025px) and (max-width: 1200px) {
  .fate-step, .scroll-scenes .fate-step { padding-block: 11px; }
  .fate-step__number { top: 16px; }
}

.cooling-art-frame { width: 100%; margin: 24px 0; }
.cooling-art-frame .cooling-art { width: 100%; margin: 0; }
.cooling-lab.art-ready .cooling-art-frame { display: grid; grid-template-columns: minmax(0,1fr); aspect-ratio: 6/5; }
.cooling-lab.art-ready .cooling-art-frame > * { grid-area: 1/1; width: 100%; min-width: 0; height: 100%; transition: opacity .35s; }
.cooling-lab.art-ready .cooling-render img { width: 100%; height: 100%; object-fit: contain; }
.cooling-lab.art-ready .cooling-schematic svg { width: 100%; height: 100%; max-height: none; }
.cooling-lab.art-ready[data-phase=all] .cooling-schematic { opacity: 0; visibility: hidden; }
.cooling-lab.art-ready:not([data-phase=all]) .cooling-render { opacity: 0; visibility: hidden; }
.cooling-lab .figure-footnote { align-items: center; }

@media (min-width: 1025px) and (min-height: 720px) {
  .scroll-scenes .cooling-lab.art-ready .cooling-art-frame { height: 45svh; aspect-ratio: auto; }
  .scroll-scenes .hero-art-stage { min-height: 0; }
}
@media (max-width: 1024px) {
  .fate-layout { grid-template-columns: 1fr; gap: 28px; }
  .fate-questions { grid-template-rows: auto; }
  .hero-art-stage { min-height: 570px; padding-right: var(--gutter); padding-left: 24px; }
  .hero-legibility { background: linear-gradient(90deg, #0c1830 0%, #0c1830f2 20%, #0c1830cc 40%, #0c183000 76%); }
}
@media (max-width: 640px) {
  .hero-art-stage { position: relative; isolation: isolate; order: 2; min-height: 0; height: clamp(300px,88vw,480px); padding: 18px var(--gutter); margin-top: 17px; overflow: clip; }
  .hero-render { z-index: -1; }
  .hero-render img { object-position: 73% center; }
  .hero-legibility { display: none; }
  .hero-art-stage .stage-heading { font-size: 7px; text-shadow: 0 1px 4px #0c1830; }
  .hero-watermark { display: none; }
  .story-hero .hero__intro { padding-top: 34px; }
  .story-hero .hero__detail { padding-top: 21px; }
  .fate-figure { padding: 20px 14px; }
  .landscape-map { margin-inline: -14px; }
  .pathway-label { font-size: 8px; padding: 5px 6px; }
  .pathway-pin { width: 23px; height: 23px; font-size: 9px; }
  .pathway-key { gap: 12px; justify-content: space-between; }
  .pathway-key li { font-size: 9px; gap: 5px; }
  .pathway-key li span { width: 18px; height: 18px; }
  .fate-step h3 { font-size: 21px; }
  .fate-step p { font-size: 13px; }
  .cooling-art-frame { margin: 20px 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cooling-art-frame > * { transition: none !important; }
  .pathway-flow { animation: none !important; }
}
@media print {
  .hero-legibility { display: none; }
  .hero-art-stage { min-height: 350px; }
  .cooling-lab.art-ready .cooling-art-frame { display: block; height: auto; }
  .cooling-lab.art-ready .cooling-art-frame > * { opacity: 1 !important; visibility: visible !important; }
  .pathway-flow { animation: none !important; }
}