/* Site-wide growth and development background */
html { background: #f8f6f0; }

body {
  position: relative;
  min-height: 100vh;
  isolation: isolate;
}

body::before,
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
}

/* Soft branches grow upward from both lower corners. */
body::before {
  background:
    radial-gradient(ellipse 54% 92% at -8% 108%, transparent 0 72%, rgba(169,129,63,.12) 72.3% 72.7%, transparent 73%),
    radial-gradient(ellipse 42% 76% at 104% 104%, transparent 0 70%, rgba(27,42,68,.08) 70.3% 70.7%, transparent 71%),
    radial-gradient(circle at 12% 79%, rgba(169,129,63,.13) 0 4px, transparent 5px),
    radial-gradient(circle at 88% 66%, rgba(27,42,68,.10) 0 5px, transparent 6px),
    radial-gradient(circle at 24% 43%, rgba(169,129,63,.08) 0 3px, transparent 4px),
    radial-gradient(circle at 76% 32%, rgba(27,42,68,.07) 0 4px, transparent 5px);
  transform-origin: 50% 100%;
  animation: growth-breathe 10s ease-in-out infinite alternate;
}

/* Seeds rise slowly, suggesting learning spreading through an organization. */
body::after {
  inset: -15vh 0 0;
  opacity: .55;
  background-image:
    radial-gradient(ellipse at center, rgba(169,129,63,.18) 0 1.5px, transparent 2px),
    radial-gradient(ellipse at center, rgba(27,42,68,.12) 0 1px, transparent 1.7px);
  background-position: 18px 34px, 82px 96px;
  background-size: 140px 180px, 190px 230px;
  animation: seeds-rise 28s linear infinite;
}

body > main,
body > section,
body > footer {
  position: relative;
  z-index: 1;
}

@keyframes growth-breathe {
  0% { opacity: .48; transform: scaleY(.94) scaleX(.98); }
  100% { opacity: .92; transform: scaleY(1.03) scaleX(1.01); }
}

@keyframes seeds-rise {
  from { background-position: 18px 214px, 82px 326px; }
  to { background-position: 32px 34px, 68px 96px; }
}

@media (max-width: 640px) {
  body::before { opacity: .7; }
  body::after { opacity: .38; background-size: 180px 220px, 230px 280px; }
}

@media (prefers-reduced-motion: reduce) {
  body::before,
  body::after { animation: none !important; }
}

/* Keep editorial photographs at their intended aspect ratio even when width/height
   attributes are present for layout stability. */
.article-visual img {
  display: block;
  height: auto;
}