/* Mazhaka Foundation — V70: Four Gradient Environments
 * Design source: the four approved gradient hero concept treatments.
 * Changes only the background surfaces below the hero and on the Stories archive.
 * The opening photographic hero, V50/54 logo transition, header, slides,
 * original type, image cards and documentary photograph sections are untouched.
 * This stylesheet is deliberately loaded LAST, overriding any earlier
 * V62–V69 illustrated backgrounds if present in the installation.
 */
:root {
  /* 01 — Forest Light: calm, soft illumination. */
  --mz-forest-light:
    radial-gradient(ellipse 62% 92% at 78% 18%, rgba(53,109,79,.37) 0%, rgba(24,78,51,.16) 48%, transparent 78%),
    radial-gradient(ellipse 74% 50% at 9% 100%, rgba(1,15,13,.53), transparent 70%),
    linear-gradient(133deg, #061a14 0%, #0b3023 52%, #051a14 100%);
  /* 02 — Emerald Dusk: slightly richer with right-side illumination. */
  --mz-emerald-dusk:
    radial-gradient(ellipse 47% 100% at 85% 54%, rgba(78,134,87,.34), transparent 80%),
    radial-gradient(ellipse 42% 54% at 23% 77%, rgba(0,10,9,.28), transparent 80%),
    linear-gradient(112deg, #041912 4%, #08281e 39%, #133e2d 74%, #0a2b20 100%);
  /* 03 — Moss Horizon: subtle lift rising through the lower portion. */
  --mz-moss-horizon:
    radial-gradient(ellipse 110% 42% at 54% 96%, rgba(84,126,73,.24), transparent 85%),
    radial-gradient(ellipse 70% 40% at 18% -3%, rgba(32,77,63,.30), transparent 84%),
    linear-gradient(172deg, #061b17 0%, #08241c 38%, #0f4030 87%, #123c2d 100%);
  /* 04 — Warm Ivory: quiet parchment with a soft warm highlight. */
  --mz-warm-ivory:
    radial-gradient(ellipse 66% 105% at 100% 2%, rgba(218,187,143,.31) 0%, transparent 75%),
    radial-gradient(ellipse 74% 80% at 13% 81%, rgba(255,252,246,.63), transparent 85%),
    linear-gradient(137deg, #f8f3ea 2%, #f2ebdf 44%, #e5d7c4 100%);
}

/* Green environments — rotate the three agreed treatments.
   This is section-level atmosphere, not background illustration. */
.work {
  background: var(--mz-forest-light) !important;
}
.generation-v27 .generation-browser {
  background: var(--mz-emerald-dusk) !important;
}
.upcoming {
  background: var(--mz-moss-horizon) !important;
}
.join {
  background: var(--mz-forest-light) !important;
}
.footer {
  background: var(--mz-emerald-dusk) !important;
}

/* Cream environments — the one approved Warm Ivory gradient. */
.about,
.up44,
.generation-v27 .generation-intro,
.soc44,
.story,
.stripe,
.journal {
  background: var(--mz-warm-ivory) !important;
}
/* Guard against earlier concept images on partial panels as well. */
.about-copy,
.stripe-copy {
  background-image: none !important;
}

/* Remove ONLY the background artwork overlays introduced by earlier
   experiments. Never remove the actual manifesto photo or hero layers. */
.work::before,
.generation-v27 .generation-browser::before,
.upcoming::before,
.join::before,
.footer::before,
.about::before,
.up44::before,
.soc44::before,
.story::before,
.stripe::before,
.journal::before,
.index-experience::before {
  content: none !important;
  display: none !important;
}
/* The existing decorative orbit on the contact section competes with the
   gradient; leave all actual content and interactive elements intact. */
.join::after { content: none !important; display: none !important; }

/* Stories archive: same light/dark environmental palette. */
.page-archive,
.page-archive main {
  background: var(--mz-warm-ivory) !important;
}
.page-archive .arc-interviews {
  background: var(--mz-moss-horizon) !important;
}
.page-archive .arc-head,
.page-archive .arc-intro {
  background-color: transparent !important;
  background-image: none !important;
}

@media (max-width: 850px) {
  .proof-strip {
    background: var(--mz-warm-ivory) !important;
  }
  .about-copy, .stripe-copy,
  .page-archive main { background-image: var(--mz-warm-ivory) !important; }
  /* Keep the exact same treatment at narrow widths; no stretched or
     awkwardly cropped illustrations remain on phones. */
  .generation-v27 .generation-browser {
    background: var(--mz-emerald-dusk) !important;
  }
  .upcoming {
    background: var(--mz-moss-horizon) !important;
  }
}

/* Join the contact section and footer with a shared dark transition. */
.join { background: linear-gradient(to bottom, transparent calc(100% - 140px), #061a14 100%), var(--mz-forest-light) !important; }
.footer { background: linear-gradient(to bottom, #061a14 0, transparent 140px), var(--mz-emerald-dusk) !important; }

/* Give the desktop hero headline a little more presence. */
@media (min-width:1000px) and (min-aspect-ratio:11/10) {
  .hero.h44 h1 { font-size:clamp(64px, 11svh, 104px); }
  .h44-copy { bottom:clamp(48px, 8svh, 90px); }
}

/* Featured house story: introduce it before showing its photographs. */
.v37-house-feature { display:block; }
.v37-house-copy { max-width:none; }
.v37-house-photo-set { grid-template-columns:repeat(4,minmax(0,1fr)); height:clamp(260px,28vw,420px); min-height:0; margin:0 0 24px; }
.v37-house-photo-set .v37-photo { height:100%; }
@media (max-width:670px) {
  .v37-house-photo-set { display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; gap:8px; height:clamp(220px,65vw,340px); padding-bottom:4px; }
  .v37-house-photo-set .v37-photo { flex:0 0 78%; scroll-snap-align:start; }
}

/* A quiet, brand-inspired marker gives the footer its own closing moment. */
.footer-divider { background:#061a14; padding:0 var(--gutter); }
.footer-divider svg { display:block; width:100%; height:42px; overflow:visible; }
.footer-divider .divider-line { fill:none; stroke:#9cb4a2; stroke-opacity:.3; stroke-width:1; vector-effect:non-scaling-stroke; }
.footer-divider .divider-gold { fill:#efa64f; }
.footer-divider .divider-orange { fill:#e86e32; }
.footer-divider .divider-stem { fill:none; stroke:#6eb7a2; stroke-width:1.5; vector-effect:non-scaling-stroke; }
.footer-divider .divider-sun { fill:#f1bb6d; }
.footer { background:#061a14 !important; }
@media (max-width:670px) { .footer-divider svg { height:36px; } }
.footer-divider { display:flex; align-items:center; gap:14px; }
.footer-divider::before, .footer-divider::after { content:""; flex:1; height:1px; background:rgba(156,180,162,.3); }
.footer-divider svg { flex:none; width:45px; }