/* ==========================================================================
   MAHARASHTRA WEDDING — the paper the whole site is printed on
   --------------------------------------------------------------------------
   second-bg-hero-section.png carries the wedding's paper: a warm brown with a
   faint mottling. Measured, that texture is rgb(125,58,29) with a standard
   deviation of only about 2 levels out of 255 — so it reads as a flat, slightly
   uneven brown rather than as obvious grain. It is used here as the base the
   whole page sits on.

   It is laid in ONCE, `fixed` and `cover`, rather than tiled: the file is a
   tall portrait whose top carries the gable shape, so repeating it would stamp
   that shape down the page and every tile edge would show. Fixed + cover shows
   only the lower texture, has no seams at any page height, and costs one paint.

   `background-position` keeps the crop below the gable at every viewport shape.
   ========================================================================== */

html {
  background: #7d3a1d;
}

:root {
  --paper:
    url("../second-bg-hero-section.webp") center 78% / cover no-repeat,
    #7d3a1d;
}

/* The same paper, held still behind the page by a fixed LAYER rather than a
   `background-attachment: fixed` background. A fixed background has to be
   repainted by the main thread on every scrolled frame, which takes scrolling
   off the compositor for the whole page; a fixed element is simply left where
   it is by the compositor. Viewport-sized, so `cover` crops it exactly as the
   fixed background did. */
body {
  margin: 0;
  background: transparent;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  pointer-events: none;
}

/* The hero carries the paper ITSELF rather than letting the body's through,
   because it has to dissolve over the end of chapter 1: a section you fade in
   has to be opaque, or the courtyard behind it never stops showing through. */
/* Same paper, same reason for a fixed LAYER instead of a fixed background: the
   hero fades in over chapter 1, and a fixed background inside a fading, masked
   section was repainted in full on every frame of that dissolve. The layer sits
   inside the hero's own group, so the hero's opacity and feathered mask apply
   to it — it stays opaque paper exactly where the hero is, and nowhere else. */
.wedding-hero { background: transparent; }
.wedding-hero::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: var(--paper);
  pointer-events: none;
}

/* Every section that painted a flat brown now lets the paper through — the
   hero, and both of Our Story's bands.

   Band A was held back at first because its ground is the colour solved to sit
   UNDER minar-overlay.png (rgba(48,21,38,.302)) so the pair composites to the
   reference's own (108,48,25). Working it through, the paper composites to
   (102,47,32) instead — six levels, which is not worth keeping the band out of
   the same paper as everything else. */
.our-story,
.story-band,
.story-events,
.memories {
  background-color: transparent;
}