/* Natural daylight clouds, kept horizontal with one consistent light source. */
.sky-path {
  --guidance-top: 16svh;
  height: max(320svh, calc(var(--guidance-top) + var(--guidance-height, 0px) + 65svh));
  background: linear-gradient(180deg, #a6c9e6 0%, #92bfe0 32%, #83b8df 72%, #68acdd 100%);
}
.cloud-frame {
  width: var(--cloud-width, 55vw);
  opacity: var(--cloud-opacity, .88);
}
.cloud-frame img {
  filter: brightness(1.16) contrast(.9) brightness(1.1);
  scale: none;
  rotate: none;
  animation: cloud-drift var(--cloud-drift, 65s) ease-in-out infinite alternate;
  animation-delay: var(--cloud-delay, 0s);
}
@keyframes cloud-drift {
  from { translate: -12px 0; }
  to { translate: 18px 0; }
}
.cloud-a { left: -7%; top: -2%; --cloud-width: 58vw; --cloud-opacity: .62; --cloud-drift: 82s; }
.cloud-b { right: -8%; top: 10%; --cloud-width: 49vw; --cloud-drift: 64s; --cloud-delay: -16s; }
.cloud-c { left: -15%; top: 24%; --cloud-width: 63vw; --cloud-opacity: .78; --cloud-drift: 75s; }
.cloud-d { right: -5%; top: 34%; --cloud-width: 47vw; --cloud-opacity: .65; --cloud-drift: 90s; --cloud-delay: -30s; }
.cloud-e { left: -15%; top: 46%; --cloud-width: 50vw; --cloud-drift: 70s; --cloud-delay: -22s; }
.cloud-f { right: -17%; top: 58%; --cloud-width: 61vw; --cloud-opacity: .8; --cloud-drift: 84s; }
.cloud-g { left: -5%; top: 70%; --cloud-width: 37vw; --cloud-drift: 67s; --cloud-delay: -35s; }
.cloud-h { right: -4%; top: 77%; --cloud-width: 48vw; --cloud-opacity: .62; --cloud-drift: 95s; }
.cloud-i { left: 3%; top: 84%; --cloud-width: 62vw; --cloud-opacity: .76; --cloud-drift: 80s; --cloud-delay: -20s; }

/* Keep the complete authored guidance in the sky, with a clear way to find it. */
.sky-guidance { top: var(--guidance-top); width: min(680px, calc(100% - 42px)); }
.sky-guidance .author-guidance p { color: #173e46; line-height: 1.75; }
.sky-read {
  position: fixed;
  z-index: 4;
  bottom: 25px;
  left: 25px;
  background: #fffdf0ed;
  border-color: #fff8;
  box-shadow: 0 5px 30px #173e2620;
  backdrop-filter: blur(10px);
}
@media (max-width: 700px) {
  .sky-path { --guidance-top: 12svh; height: max(340svh, calc(var(--guidance-top) + var(--guidance-height, 0px) + 65svh)); }
  .cloud-a { left: -18%; --cloud-width: 102vw; }
  .cloud-b { right: -30%; --cloud-width: 112vw; }
  .cloud-c { left: -42%; --cloud-width: 139vw; }
  .cloud-d { right: -24%; --cloud-width: 109vw; }
  .cloud-e { left: -37%; --cloud-width: 112vw; }
  .cloud-f { right: -50%; --cloud-width: 138vw; }
  .cloud-g { left: -26%; --cloud-width: 95vw; }
  .cloud-h { right: -25%; --cloud-width: 104vw; }
  .cloud-i { left: -30%; --cloud-width: 127vw; }
  .sky-guidance { width: calc(100% - 36px); padding: 24px 6px 80px; }
  .sky-read { bottom: 20px; left: 20px; min-height: 44px; font-size: 13px; padding: 10px 15px; gap: 14px; }
  .topbar { gap: 12px; }
  .topbar nav { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cloud-frame img { animation: none; }
}

.brand { white-space: nowrap; flex-shrink: 0; }
footer { justify-content: flex-end; }
footer > .footer-thought:first-child { font: inherit; }

/* A broad fade softens the join without blurring the farm itself. */
.world::after {
  height: clamp(150px, 24svh, 260px);
  background: linear-gradient(to bottom, #68acdd 0%, #68acdded 15%, #68acdd99 42%, #68acdd33 72%, transparent 100%);
}
.sky-hint { margin-top: 20px; }
html:not(.js) .sky-path { display: block; height: auto; min-height: 0; padding: 32px 0; }
html:not(.js) .sky-guidance { position: relative; top: auto; left: auto; transform: none; margin: 0 auto; }
html:not(.js) .cloud-frame { display: none; }