/* ==========================================================================
   EDITORIAL HOMEPAGE — KISWAH CLOTH GROUND (exploration)
   Loaded after editorial-home.css + editorial-dark.css.

   The cloth becomes the ground for the whole page instead of a flat dark.
   Technique note: background-attachment:fixed keeps the texture at viewport
   size, so it stays sharp and never tiles or stretches across a 9,000px page.
   Section grounds go transparent so the cloth reads through; only the panels
   that carry body copy keep a scrim, or the text becomes unreadable.
   ========================================================================== */

:root {
  /* one dial for the whole page. 0.5 = whisper, 0.85 = the weave clearly reads,
     1 = full strength (body copy starts to suffer). */
  --cloth: .88;
}

body { background: #050403; }

/* the cloth itself.
   Measured at true viewport scale, worst-case contrast of ivory text against
   the weave is 15.5:1 (AA needs 4.5). No highlight taming is required, so the
   cloth is left at full strength. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background: url('../img/kiswah-cloth.jpg') center center / cover no-repeat fixed;
  opacity: var(--cloth);
}
/* Scrim, now much lighter, otherwise it simply cancels the opacity increase.
   Kept strongest at the edges and top, where headlines are not sitting. */
body::after {
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 96% 76% at 50% 42%, rgba(5,4,3,.10), rgba(5,4,3,.52) 78%),
    linear-gradient(180deg, rgba(5,4,3,.34), rgba(5,4,3,.12) 42%, rgba(5,4,3,.38));
}

/* sections step aside so the ground shows through */
.movement,
.journeys,
.preparation,
.voice,
.institution,
.invitation,
.trophy-wall,
.foot { background: transparent; }

/* The page IS the cloth here, so the section's own cloth layer only doubles
   the weave (two copies at different scales = the ghosted pattern). Remove it.
   In its place, a pool of light so "1975" is still discovered through light —
   the Institution keeps its moment without a second cloth image. */
.institution .cloth {
  background: radial-gradient(ellipse 60% 62% at 50% 44%,
    rgba(232,201,122,.10), rgba(232,201,122,.03) 46%, transparent 72%);
  opacity: 1;
  -webkit-mask-image: none; mask-image: none;
}

/* Beyond keeps a cool veil, otherwise the 30% switch disappears entirely */
.beyond { background: rgba(16,20,24,.72); }

/* panels that carry real reading keep a ground */
.prep-copy { background: rgba(14,12,8,.93); }
.foot { background: rgba(4,3,2,.6); }
.invitation::after { background: linear-gradient(97deg, rgba(5,4,3,.95) 12%, rgba(5,4,3,.78) 46%, rgba(5,4,3,.34) 80%); }

/* mobile: fixed backgrounds are unreliable on iOS, so the cloth is pinned off */
@media (max-width: 900px) {
  body::before { background-attachment: scroll; background-position: top center; }
}