/* Homepage hero (staging).

   Not two columns. The photograph is a right-anchored scenic layer that
   is absolutely positioned across the right ~64% of the hero, filling it
   top to bottom and running to the right edge of the browser, so it grows
   with the viewport instead of being pinned to a half-width card. The
   copy sits above it on a cream field.

   The image itself carries no mask, so it is full strength from the top
   edge to the bottom edge. The only transition is horizontal: a cream
   gradient overlay on the left of the media layer, fading left to right
   into the photograph. Nothing fades at the top or bottom. */

.page-home .hero {
  position: relative;
  display: block;
  overflow: hidden;
  background-color: #F9F3E7;
}

.page-home .hero-copy-col,
.page-home .hero-media {
  background-color: transparent;
}

/* The base .hero-media::before is a blurred data-URI of a previous
   editorial photograph, used as a load-in backdrop. It is the wrong
   picture and the wrong colour, and the hero's own cream now serves that
   purpose, so it is removed rather than restyled. */
.page-home .hero-media::before { content: none; }

.page-home .hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Right-anchored so the tall pine and the near treeline survive the
     crop; the left of the frame is the misty water, which is what the
     cream gradient is laid over. */
  object-position: right center;
  /* Explicitly unmasked: full strength top to bottom. */
  -webkit-mask-image: none;
          mask-image: none;
}

@media (min-width: 961px) {
  /* A band, not a panel: the copy sets the height and the picture fills
     it. Roughly 3:1 at desktop, so the headline dominates instead of
     floating in vertical space. */
  .page-home .hero {
    height: auto;
    min-height: clamp(430px, 30vw, 520px);
  }
  .page-home .hero-copy-col {
    padding-top: 1.5rem !important;
    padding-bottom: 1.5rem !important;
  }

  .page-home .hero-media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 24%;
    height: auto;
    aspect-ratio: auto;
    z-index: 0;
  }

  /* Horizontal only. Solid cream at the left edge of the layer, clear of
     it by roughly half way across, so the headline always sits over an
     unbroken field and the photograph is untouched at top and bottom. */
  .page-home .hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(to right,
      #F9F3E7 0%,
      #F9F3E7 9%,
      rgba(249, 243, 231, 0.96) 14%,
      rgba(249, 243, 231, 0.70) 19%,
      rgba(249, 243, 231, 0.34) 24%,
      rgba(249, 243, 231, 0) 29%);
  }

  .page-home .hero-copy-col {
    position: relative;
    z-index: 2;
    width: 46%;
    min-height: 100%;
    display: flex;
    align-items: center;
  }

  /* Wide screens: start the layer slightly further left so the picture
     keeps growing with the viewport rather than the cream doing so. */
  @media (min-width: 1600px) {
    .page-home .hero-media { left: 22%; }
    .page-home .hero-copy-col { width: 44%; }
  }

  /* Medium desktop: a little less overlap, and a stronger cream run
     behind the copy, which is proportionally wider here. */
  @media (max-width: 1200px) {
    .page-home .hero-media { left: 22%; }
    .page-home .hero-copy-col { width: 46%; }
    .page-home .hero-media::after {
      background: linear-gradient(to right,
        #F9F3E7 0%,
        #F9F3E7 11%,
        rgba(249, 243, 231, 0.97) 17%,
        rgba(249, 243, 231, 0.74) 23%,
        rgba(249, 243, 231, 0.36) 29%,
        rgba(249, 243, 231, 0) 35%);
    }
  }
}

/* Stacked: copy first, then the picture full width beneath it. Nothing
   sits behind the text, and there is no overlay at all. */
@media (max-width: 960px) {
  .page-home .hero { height: auto; }
  .page-home .hero-copy-col {
    position: static;
    width: 100%;
    min-height: 0;
  }
  .page-home .hero-media {
    position: relative;
    inset: auto;
    height: clamp(200px, 50vw, 340px);
    aspect-ratio: auto;
  }
  .page-home .hero-media::after { content: none; }
}

/* --- Hero typography ------------------------------------------------ */

.page-home .hero-copy h1 {
  font-size: clamp(3.5rem, 5.9vw, 6.4rem);
  line-height: 0.94;
  max-width: 12ch;
}

/* The stacked layout has the full column width to itself, so the
   headline can run larger here than the desktop minimum. */
@media (max-width: 960px) {
  .page-home .hero-copy h1 { font-size: clamp(3.4rem, 12.5vw, 4.2rem); }
}

/* Upstream caps .hero-copy at 31rem, which broke the descriptor onto a
   third line. The copy runs wider here; its right edge still lands inside
   the gradient's solid run, so the text stays on unbroken cream. */
.page-home .hero-copy { max-width: 36rem; }

/* The descriptor is the display serif so it sits with the headline
   rather than against it. Cormorant runs small and light for its point
   size, so it is set larger, and in the darker ink, than the sans was. */
.page-home .hero-descriptor {
  font-family: var(--display);
  font-size: clamp(1.15rem, 1.02rem + 0.45vw, 1.32rem);
  line-height: 1.42;
  color: var(--ink-green);
  max-width: 34rem;
}