/* ===========================================================================
   HERO · 26 September 2026, second pass
   Loaded after everything else.

   One system on both screens: the photograph fades into the ink ground, and
   the wordmark sits across that seam on ONE line.

   THE FIT. "Gaudi Villas" in Cormorant 300 at -0.02em measures, in the
   browser, in the real face: box 4.607em, ink 4.540em, the ink starting
   0.040em inside the box on the left and ending 0.027em inside it on the
   right. So a font-size of (content width / 4.54), with the box widened by
   those two side-bearings, puts the INK exactly gutter to gutter, not the
   invisible box around it. Container units (cqi) measure the real content
   width, safe areas included, so the fit holds on every phone.
   =========================================================================== */

.hero__type { container-type: inline-size; }

.hero__word {
  white-space: nowrap;
  text-wrap: nowrap;
  letter-spacing: -0.02em;
  font-size: calc(100cqi / 4.54);
  margin-inline: -0.040em -0.027em !important;   /* ink, not box, to the gutters */
  line-height: 0.86 !important;
}

/* ---------------------------------------------------------------------------
   PHONE
   --------------------------------------------------------------------------- */
@media (max-width: 899px) {
  .hero {
    padding-top: 0 !important;             /* the plate runs up under the nav */
    padding-bottom: clamp(2.4rem, 8vh, 4rem);
  }

  /* 1.36:1 is the tightest crop that keeps the whole building: measured, the
     arches span 20.4% to 87.0% of the sunset plate, and at 1.36 with the
     frame set at 66% they clear both edges. About 40% more photograph than
     the 1.85 band it replaces. */
  .hero__plate { aspect-ratio: 1.36; }
  .hero__img img { object-position: 66% 42%; }

  /* nav legibility at the top, then clear, then a long feather into the ink
     so the wordmark can sit on the seam. Never a box around a gradient. */
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        color-mix(in oklab, var(--shadow) 46%, transparent) 0%,
        transparent 20%),
      linear-gradient(to bottom,
        transparent 58%,
        color-mix(in oklab, var(--shadow) 42%, transparent) 76%,
        color-mix(in oklab, var(--shadow) 88%, transparent) 92%,
        var(--shadow) 100%) !important;
  }

  .hero__type {
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: stretch;
    padding-top: 0 !important;
  }

  /* the wordmark first, pulled up so half its cap height sits on the photo */
  .hero__word {
    order: 1;
    margin-top: -0.50em !important;
    margin-bottom: 0;
  }

  /* the address gets room: two composed lines, open leading and tracking */
  .hero__eyebrow {
    order: 2;
    margin-top: clamp(1.4rem, 5.5vw, 1.9rem) !important;
    font-size: 0.66rem !important;
    line-height: 2.1 !important;
    letter-spacing: 0.26em !important;
    margin-bottom: 0 !important;          /* base styles add 25.6px here */
  }

  /* desktop.css centres this grid's track (justify-content: center), which on
     a phone pushed the gloss 61px in from the wordmark's left edge */
  .hero__gloss {
    order: 3;
    justify-content: start !important;
    margin-top: clamp(1.1rem, 4.4vw, 1.5rem) !important;
    gap: 0.5rem !important;
  }
  .hero__phon { font-size: 1.32em; }
  .hero__cue { margin-top: clamp(2rem, 7vh, 3.2rem); }
}

/* ---------------------------------------------------------------------------
   DESKTOP
   The wordmark goes to the foot of the frame, one line, full width, so the
   facade above it is clear. The scrim is weighted to the bottom: light at the
   top for the nav, clear through the building, dark only where the type is.
   --------------------------------------------------------------------------- */
@media (min-width: 900px) {
  .hero__scrim {
    background:
      linear-gradient(to bottom,
        color-mix(in oklab, var(--shadow) 52%, transparent) 0%,
        transparent 16%),
      linear-gradient(to bottom,
        transparent 34%,
        color-mix(in oklab, var(--shadow) 44%, transparent) 52%,
        color-mix(in oklab, var(--shadow) 80%, transparent) 70%,
        color-mix(in oklab, var(--shadow) 94%, transparent) 100%) !important;
  }

  .hero__type {
    align-self: end;
    display: flex; flex-direction: column; align-items: center;
    text-align: center;
    padding-bottom: clamp(1.4rem, 4.2vh, 3rem) !important;
  }
  .hero__eyebrow { order: 1; letter-spacing: 0.24em; }
  .hero__gloss   { order: 2; margin-top: 0.85rem !important; }

  /* full width where the screen allows it; on a very wide, short screen the
     height caps it, and it centres */
  .hero__word {
    order: 3;
    font-size: min(calc(100cqi / 4.54), 34svh);
    margin-top: clamp(0.6rem, 2.2vh, 1.6rem) !important;
    margin-bottom: -0.06em;
  }

  /* the price is back in the gloss line, and the cue and corner price go:
     the foot of the frame belongs to the wordmark now */
  .hero__gloss .hero__sep, .hero__gloss > span:last-child { display: inline !important; }
  .hero__cue, .hero__price { display: none !important; }
}

/* ===========================================================================
   FOUR DOORS · the ambient film, on a phone
   The film is the flat elevation at 16:9. The section is 665px tall on a
   phone, and object-fit: cover scaled the film to that height and showed the
   middle 33% of its width: a slice of two bays, no building.
   Manifest rule for a wide building in a tall frame: band it at its own
   ratio, full width, over a blurred and darkened bed of the same frame. The
   band feathers into the bed top and bottom, so no hard edge is drawn.
   =========================================================================== */
@media (max-width: 899px) {
  .ambient {
    height: auto !important;
    display: block !important;
    padding-block: clamp(3.4rem, 14vw, 5rem) clamp(2.6rem, 11vw, 4rem);
    background: var(--shadow);
    overflow: hidden;
  }
  /* the bed: the poster, blurred, dark, a little warm. Static on purpose;
     blurring live video on a phone costs battery for no visible gain. */
  .ambient::before {
    content: "";
    position: absolute; inset: -12%;
    z-index: -2;
    background: url("../media/ambient-night-poster.webp") 50% 50% / cover no-repeat;
    filter: blur(30px) brightness(0.56) saturate(1.1);
  }
  .ambient__v {
    position: relative !important;
    inset: auto !important;
    z-index: 0 !important;
    display: block;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 50%;
    /* a long feather: the band's sky is lighter than the bed, and a short
       one still read as a ruled edge */
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 80%, transparent 100%);
            mask-image: linear-gradient(to bottom, transparent 0, #000 30%, #000 80%, transparent 100%);
  }
  .ambient__scrim {
    display: block !important;
    z-index: -1 !important;
    background: linear-gradient(to bottom,
      var(--shadow) 0%, color-mix(in oklab, var(--shadow) 30%, transparent) 16%,
      transparent 40%, transparent 58%,
      color-mix(in oklab, var(--shadow) 55%, transparent) 76%, var(--shadow) 100%) !important;
  }
  .ambient__line {
    position: relative; z-index: 1;
    padding: clamp(1.4rem, 6vw, 2rem) max(var(--gutter), var(--safe-l, 0px)) 0 !important;
    font-size: clamp(2.1rem, 9.6vw, 2.9rem) !important;
    line-height: 1.02;
    max-width: none !important;
  }
}