/* =========================================================
   Contained layout — backgrounds run edge to edge, while all
   content sits in a centred column with side gutters.
   Loaded last.
   ========================================================= */
:root {
  --gut: clamp(16px, 3vw, 48px);   /* side gutter */
  --edge: calc(50% - 47.05rem);     /* distance from a full-width parent's edge to the column */
}

@media (min-width: 901px) {
  /* column width = viewport minus gutters, capped at 1360px (index.html sets the exact value) */
  html { font-size: clamp(9px, calc((100vw - 2 * var(--gut)) / 94.1), 14.45px); }

  /* hero: the sharp photo stays at column scale so the headline, logo and sign text stay
     lined up with it; softly blurred mirror images of its own edges fill the side gutters */
  .hero { overflow-x: clip; }
  .hero-bg { background: none; }
  .hero-photo {
    position: absolute; top: 0; bottom: 0; left: var(--edge); right: var(--edge); z-index: 1;
    background: url("assets/hero.webp") center top / 100% auto no-repeat;
  }
  .hero-bg::before, .hero-bg::after {
    content: ""; position: absolute; top: 0; bottom: 0; width: 94.1rem; z-index: 0;
    background: url("assets/hero.webp") center top / 100% auto no-repeat;
    filter: blur(11px) saturate(1.05) brightness(1.04);
  }
  .hero-bg::before { left: calc(var(--edge) - 94.1rem); transform: scaleX(-1); }
  .hero-bg::after { left: calc(100% - var(--edge)); width: 94.1rem; height: auto; transform: scaleX(-1); }
  /* the haze behind the headline + cream wash behind the feature row follow the column, not the screen */
  .hero-photo::after {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 34% 9% at 27% 88%, rgba(253,251,240,.92) 0 55%, rgba(253,251,240,0) 100%),
      radial-gradient(ellipse 36% 36% at 24% 44%, rgba(255,255,250,.62) 0 45%, rgba(255,255,250,0) 100%);
  }

  /* farm photo ends at the column edge */
  .farm-img { right: var(--edge); width: 53.1rem; }

  /* footer meadow runs edge to edge (footer clips the overflow) */
  .ft-meadow { left: calc((94.1rem - 100vw) / 2); width: 100vw; max-width: none; }
}