/* The home pond has its own scenery clock; the goose keeps her shared scene library. */
.hero { overflow: clip; }
.hero .wrap { position: relative; width: min(1120px, 100% - 32px); grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px; }
.hero .wrap > :first-child { position: relative; z-index: 2; }
.hero-art { aspect-ratio: 1.12 / 1; border-radius: 0; isolation: auto; z-index: 1; }
.hero-art::before { content: none; }
.pond-panorama { position: absolute; left: -105%; top: -25%; width: 235%; height: 143%; z-index: 0; pointer-events: none; }
.hero-art .goose-anim { position: absolute; width: 56%; right: -6%; bottom: 6%; margin: 0; }
.hero-art .bubble { top: 12%; left: 15%; right: -20%; max-width: 82%; }
@media(max-width:600px) {
  .pond-panorama { --pond-focus: .5; }
}
@media(min-width:861px) and (max-width:1199px) { .hero-art .goose-anim { right: 2%; } }
@media(max-width:860px) {
  .hero .wrap { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .hero .wrap > :first-child { order: 2; }
  .hero-art { order: 1; max-width: 650px; aspect-ratio: 1.42 / 1; justify-self: center; }
  .pond-panorama { left: -12%; top: -12%; width: 124%; height: 137%; }
  .hero-art .goose-anim { width: 39%; right: 13%; bottom: 4%; }
  .hero-art .bubble { top: 12%; left: 20%; right: 5%; max-width: 63%; font-size: clamp(14px, 2.8vw, 20px); }
}
@media(max-width:480px) {
  .hero-art { max-width: 100%; aspect-ratio: 1.13 / 1; }
  .pond-panorama { left: -12%; top: -8%; width: 124%; height: 127%; }
  .hero-art .goose-anim { width: 47%; right: 27%; bottom: 6%; }
  .hero-art .bubble { top: 13%; left: 9%; right: 0; max-width: 77%; font-size: 14px; }
}
@media(max-width:860px) { .hero .wrap { width: min(1120px, 100% - 28px); } }
@media(min-width:481px) and (max-width:600px) { .hero-art .goose-anim { right: 30%; } }
.hero-art .bubble {
  right: auto;
  width: max-content;
  max-width: min(360px, calc(100vw - 32px));
  margin: 0;
  padding: 12px 20px;
  border-radius: 22px;
  line-height: 1.35;
  overflow-wrap: anywhere;
  animation: none;
  background: transparent;
  border: 0;
  opacity: 0;
}
.hero-art .bubble::after { content: none; }
.hero-art .bubble > span { position: relative; z-index: 1; }
.speech-outline { position: absolute; left: 0; top: 0; width: 100%; overflow: visible; pointer-events: none; }
.speech-outline path { fill: var(--feather); stroke: var(--line); stroke-width: 2.5; stroke-linejoin: round; }
@media(max-width:480px) { .hero-art .bubble { max-width: calc(100vw - 40px); font-size: 14px; padding: 10px 16px; border-radius: 18px; } }