/* Subtle cloud motif overlay (keeps site clean + readable) */
:root{
  --cloud-ink: 74,85,81; /* #4A5551 */
  --cloud-wash: 248,246,241; /* warm off-white */
}

html, body { height: 100%; }
body { position: relative; }

/* Fixed, very light cloud texture */
body::before{
  content:"";
  position: fixed;
  inset: -20vh -10vw;
  pointer-events: none;
  z-index: 0;
  opacity: 0.18;
  mix-blend-mode: multiply;
  filter: blur(0.2px);
  background:
    radial-gradient(120px 70px at 10% 12%, rgba(var(--cloud-ink), 0.22) 0 35%, transparent 40%),
    radial-gradient(160px 90px at 22% 14%, rgba(var(--cloud-ink), 0.18) 0 38%, transparent 42%),
    radial-gradient(140px 80px at 34% 10%, rgba(var(--cloud-ink), 0.15) 0 36%, transparent 42%),
    radial-gradient(180px 110px at 55% 14%, rgba(var(--cloud-ink), 0.16) 0 40%, transparent 46%),
    radial-gradient(140px 80px at 70% 10%, rgba(var(--cloud-ink), 0.14) 0 36%, transparent 44%),
    radial-gradient(160px 95px at 84% 13%, rgba(var(--cloud-ink), 0.16) 0 38%, transparent 46%),
    radial-gradient(120px 70px at 94% 11%, rgba(var(--cloud-ink), 0.18) 0 34%, transparent 42%),
    /* second band */
    radial-gradient(160px 95px at 14% 42%, rgba(var(--cloud-ink), 0.14) 0 36%, transparent 44%),
    radial-gradient(200px 120px at 38% 40%, rgba(var(--cloud-ink), 0.12) 0 40%, transparent 48%),
    radial-gradient(190px 115px at 62% 44%, rgba(var(--cloud-ink), 0.12) 0 40%, transparent 48%),
    radial-gradient(160px 95px at 86% 41%, rgba(var(--cloud-ink), 0.13) 0 36%, transparent 44%),
    /* wash */
    radial-gradient(700px 500px at 50% 18%, rgba(var(--cloud-wash), 0.9) 0 60%, rgba(var(--cloud-wash), 0) 70%);
  transform: translateZ(0);
}

/* Ensure content stays above overlay */
body > * { position: relative; z-index: 1; }

/* Optional utility: add a soft cloud divider where desired */
.cloud-divider{
  position: relative;
}
.cloud-divider::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:-1px;
  height: 22px;
  background:
    radial-gradient(18px 14px at 6% 60%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%),
    radial-gradient(22px 16px at 16% 40%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%),
    radial-gradient(26px 18px at 28% 60%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%),
    radial-gradient(24px 18px at 42% 45%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%),
    radial-gradient(28px 20px at 58% 60%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%),
    radial-gradient(22px 16px at 72% 45%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%),
    radial-gradient(26px 18px at 84% 60%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%),
    radial-gradient(18px 14px at 94% 45%, rgba(var(--cloud-wash),1) 0 70%, transparent 72%);
  opacity: 0.85;
  pointer-events:none;
}