/* ============================================================
   HOMEPAGE HERO — "Scale" treatment, BAKED AS MASTER (2026-07-21)
   Was an A/B exploration (Current | Scale via a pill); Chris picked
   Scale, so it now applies unconditionally. Anchored to the master's
   permanent html[data-den="1"] and loaded AFTER density.css so it wins
   over the base hero rules. Homepage only (this file is linked from
   index.html alone; rules target .hero--split, which only exists there).

   Levers: bigger headline + image, less padding under the nav, dotted
   line extended up, bigger red fold dot, "SCROLL" label removed. Copy +
   figure stay horizontally centered as a group (.hero--split unchanged).
   ============================================================ */

/* Remove the "SCROLL" word (keeps the clickable dotted cue + dot) */
html[data-den="1"] .hero > .scroll-cue::before { content: none; }

/* Bigger red fold dot */
html[data-den="1"] .hero > .scroll-cue::after {
  width: 18px;
  height: 18px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -8px;
}

/* ---- Scale: fill the frame by size, position stays centered ---- */
html[data-den="1"] .hero { padding-top: clamp(2.25rem, 5.5vh, 4.5rem); }
/* Headline caps at 7.9rem on wide+tall monitors; gentler vw slope trims it
   on the short laptop where it was overpowering the height-capped image. */
html[data-den="1"] .hero--split .hero-copy .display { font-size: clamp(4rem, 8vw, 7.9rem); }
html[data-den="1"] .hero--split .hero-copy .sub,
html[data-den="1"] .hero--lg .hero-sub { font-size: clamp(1.85rem, 2.7vw, 2.45rem); }
/* Image: 570px cap on the big monitor; larger vh slope so it grows on the
   short laptop and keeps pace with the headline. */
html[data-den="1"] .hero--split .hero-figure { height: clamp(360px, 68vh, 570px); }
html[data-den="1"] .hero > .scroll-cue { height: clamp(110px, 18vh, 200px); }

/* Laptop / mid widths: the big nowrap headline eats horizontal room and
   squeezes the figure column (fine on the wide monitor, where both hit
   their caps). Below 1700px, tighten the gap, trim the headline a touch,
   and size the sub to stay on ONE line so it doesn't re-widen the copy
   column. Then trade ~15% of the image for ~15% more supporting copy.
   Monitor (>1700px) is untouched — the approved big-screen look. */
@media (max-width: 1700px) {
  html[data-den="1"] .hero--split { column-gap: clamp(1.5rem, 3vw, 3.5rem); }
  html[data-den="1"] .hero--split .hero-copy .display { font-size: clamp(4rem, 7.3vw, 6.7rem); }
  html[data-den="1"] .hero--split .hero-copy .sub,
  html[data-den="1"] .hero--lg .hero-sub { font-size: clamp(1.7rem, 2.25vw, 2.4rem); }
  html[data-den="1"] .hero--split .hero-figure { height: clamp(325px, 54vh, 475px); }
}

/* Mobile: the split hero stacks (figure over copy). The desktop Scale sizes
   above (and the base REV5 grid-rows:1fr auto) blow the figure up and leave
   a big gap under the nav on a phone. Reset to a simple stacked flow with
   phone-appropriate sizes, content lifted up. */
@media (max-width: 700px) {
  html[data-den="1"] .hero--split {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    row-gap: 1.4rem;
    padding-top: clamp(1rem, 3vh, 2.25rem);
  }
  html[data-den="1"] .hero--split .hero-figure { height: clamp(200px, 32vh, 300px); order: -1; }
  html[data-den="1"] .hero--split .hero-copy { align-items: center; }
  html[data-den="1"] .hero--split .hero-copy .display { font-size: clamp(2.6rem, 10vw, 3.9rem); }
  html[data-den="1"] .hero--split .hero-copy .sub,
  html[data-den="1"] .hero--lg .hero-sub { font-size: clamp(1.3rem, 4.6vw, 1.7rem); }
  /* Lift the dotted cue + red dot well off the very bottom so mobile
     browser toolbars (Safari / Chrome) don't clip it — clearance ~120px. */
  html[data-den="1"] .hero { padding-bottom: clamp(6.5rem, 14vh, 8.5rem); }
  html[data-den="1"] .hero > .scroll-cue { height: clamp(80px, 12vh, 110px); }
}