/*
 * LANDING BASE — HERO COMPOSITION v2 · _BRANDING 1.6 · 10/10/2026
 * Single source of truth for all selectors belonging to the first cover.
 * Designed as one continuous art-directed scene, not a chain of fitted viewports.
 * One continuous photographic canvas and responsive copy, from desktop to
 * small phones. No 760px visual switch for scene, opacity or gradient.
 *
 * Never duplicate hero layout selectors in landing-base.css.
 * This file must load AFTER landing-base.css.
 */
.hero {
  --cover-header: clamp(78px, 6vw, 88px);
  --cover-gap: clamp(12px, 4.1667vw, 60px);
  --copy-max: 670px;
  --cover-cream: #f9f4eb;
  /* One continuous curtain from desktop to mobile. The cream/photo boundary
     follows the artwork left while the window narrows; there are no
     discrete photo crops, white panels, or vertical fade switches. */
  --cover-shield: clamp(
    155px,
    calc(
      890px - 34vw
      - clamp(0px, 300px - 21vw, 126px)
      - clamp(0px, 836px - 110vw, 407px)
      - var(--portrait-emphasis) * .55
    ),
    650px
  );
  --scene-overhang: clamp(0px, calc(180px - 12.5vw), 132px);
  /* Preserve more of the golden ring, metallic orbs and upper shadows as
     the canvas narrows. Less scale-growth means less top-side clipping. */
  --scene-growth: clamp(0px, calc(82px - 5.5vw), 54px);
  /* As the phone/tablet narrows, let the lower travertine crop before the
     upper art details. Both motions are continuous and vanish on desktop. */
  --scene-drop: clamp(0px, calc(105px - 8vw), 65px);
  /* Portrait-tablet emphasis is a continuous geometric ramp, not a media
     query or a second layout. It is zero on phones, desktop, landscape and
     at both edges of the tablet width. */
  --portrait-emphasis: clamp(
    0px,
    min(
      calc(100svh - 100vw),
      calc(100vw - 700px),
      calc(1040px - 100vw)
    ),
    60px
  );
  --hero-shortfall: clamp(0px, calc(760px - 100vw), 260px);
  position: relative;
  isolation: isolate;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  width: min(calc(100% - 2 * var(--cover-gap)), 1800px);
  margin-inline: auto;
  /* On a portrait tablet, keep the four benefits *after* the first fold.
     This max/min expression reverts exactly to the previous height when
     --portrait-emphasis is zero (desktop, landscape and phone). */
  min-height: max(
    clamp(548px, calc(100svh - var(--cover-header) - var(--hero-shortfall)), 976px),
    min(
      calc(100svh - var(--cover-header) + var(--portrait-emphasis)),
      calc(976px + var(--portrait-emphasis) * 8)
    )
  );
  padding: 0;
}
.hero-copy {
  position: relative;
  z-index: 8;
  min-width: 0;
  width: min(100%, var(--copy-max));
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  padding: 0 0 8px clamp(8px, 2.4vw, 35px);
}
.hero-copy > .eyebrow { flex: 0 0 auto; }
.hero h1 {
  position: relative;
  /* Offer price stays above the body-copy halo; no scene or halo changes. */
  z-index: 1;
  isolation: isolate;
  width: 100%;
  max-width: none;
  margin: clamp(24px, calc(130px - 6vw), 82px) 0 0;
  color: #28231f;
  font-family: var(--display);
  font-size: clamp(2.82rem, calc(1rem + 4.35vw + var(--portrait-emphasis) * .18), 5.75rem);
  font-weight: 400;
  line-height: .92;
  letter-spacing: -.043em;
}
/* A feathered, text-sized legibility island, not another screen-wide veil.
   It protects the headline where the laptop screen slides underneath in tablet.
   Closest-side ellipse means every edge fades to zero (no white rectangle). */
.hero h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: -50px -95px -47px -72px;
  pointer-events: none;
  background: radial-gradient(
    ellipse closest-side at 43% 49%,
    rgba(249,244,235,.96) 0%,
    rgba(249,244,235,.92) 40%,
    rgba(249,244,235,.72) 63%,
    rgba(249,244,235,.30) 83%,
    rgba(249,244,235,0) 100%
  );
  filter: blur(9px);
}
.hero h1 > span { display: block; white-space: normal; }
.hero h1 > span:not(.hero-price-line) {
  text-shadow: 0 2px 4px rgba(45,33,21,.10);
}
.hero-price-line {
  display: flex;
  align-items: baseline;
  gap: clamp(8px, 1vw, 14px);
  margin-top: clamp(8px, 1vw, 13px);
  white-space: nowrap;
}
.hero-price-line small {
  color: #9e6c26;
  font: 700 clamp(.58rem, .72vw, .7rem)/1 var(--ui);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.hero-price {
  color: #aa7528;
  font-family: var(--display);
  font-size: 1em;
  font-weight: 400;
}
.hero-body {
  width: 100%;
  max-width: 48ch;
  margin: clamp(18px, calc(130px - 7vw), 79px) 0 0;
  color: #5b534a;
  font-size: clamp(.81rem, calc(.72rem + .13vw + var(--portrait-emphasis) * .055), 1.125rem);
  line-height: 1.58;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(10px, 1.1vw, 16px);
  margin-top: clamp(16px, calc(420px - 30vw - clamp(0px, 836px - 110vw, 407px)), 205px);
}
.hero .button {
  min-height: calc(clamp(43px, 3.45vw, 50px) + var(--portrait-emphasis) * .18);
  padding-inline: clamp(15px, 1.7vw, 24px);
  font-size: clamp(.77rem, calc(.68rem + .16vw + var(--portrait-emphasis) * .054), 1rem);
}
.button-primary {
  color: #fff;
  border-color: #ad7a2a;
  background: #b58030;
  box-shadow: 0 12px 25px rgba(85,54,18,.12);
}
.button-secondary { color: #875b1c; background: rgba(255,255,255,.25); }
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px clamp(10px, 1.5vw, 21px);
  margin-top: clamp(12px, 1.55vw, 20px);
  color: #4f493f;
  font-size: clamp(.58rem, calc(.51rem + .12vw + var(--portrait-emphasis) * .038), .86rem);
  line-height: 1.3;
}
.hero-proof span { display: inline-flex; align-items: center; gap: 6px; }
.hero-proof b {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  border: 1px solid rgba(166,111,39,.68);
  border-radius: 50%;
  color: #a66f27;
  font: 500 10px/1 var(--ui);
}
/* The photograph and the content occupy one shared cover, including bleed
   behind the header. The artwork NEVER becomes a second document section. */
.hero-art,
.hero-product,
.hero-product--scene {
  position: absolute;
  z-index: 1;
  top: calc(-1 * var(--cover-header));
  right: calc((100vw - 100%) / -2);
  bottom: 0;
  left: calc((100vw - 100%) / -2);
  width: auto;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}
.hero-product-scene {
  display: block;
  position: absolute;
  z-index: 1;
  top: auto;
  right: calc(-1% - var(--scene-overhang));
  bottom: calc(-1 * var(--scene-drop));
  left: auto;
  width: auto;
  max-width: none;
  height: calc(100% + var(--scene-growth));
  object-fit: contain;
  object-position: right bottom;
  transform: none;
  opacity: 1;
  -webkit-mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent calc(var(--cover-shield) - 170px),
    rgba(0,0,0,.15) calc(var(--cover-shield) - 80px),
    rgba(0,0,0,.78) calc(var(--cover-shield) + 80px),
    #000 calc(var(--cover-shield) + 130px)
  );
  mask-image: linear-gradient(
    90deg,
    transparent 0%,
    transparent calc(var(--cover-shield) - 170px),
    rgba(0,0,0,.15) calc(var(--cover-shield) - 80px),
    rgba(0,0,0,.78) calc(var(--cover-shield) + 80px),
    #000 calc(var(--cover-shield) + 130px)
  );
}
.hero-product--scene::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    var(--cover-cream) 0%,
    var(--cover-cream) calc(var(--cover-shield) - 220px),
    rgba(249,244,235,.97) calc(var(--cover-shield) - 110px),
    rgba(249,244,235,.72) calc(var(--cover-shield) - 10px),
    rgba(249,244,235,.18) calc(var(--cover-shield) + 90px),
    transparent calc(var(--cover-shield) + 160px)
  );
}
.hero-product--scene::after { display: none; }
/* Mobile is the narrow end of this SAME responsive scene. No special
   photo positioning, opacity, alternate mask or vertical gradient here.
   The stage, copy width, type size, and CTA spacing all interpolate. */
/* Respect short and unusually tall viewports without making the CTA
   "jump" at another arbitrary desktop/tablet breakpoint. */
@media (min-width: 761px) and (max-height: 640px) {
  .hero {
    min-height: 650px;
  }
}

/* _BRANDING 1.7 · Purely optical reading veil; never moves or resizes
   the approved hero asset. Diffuse ellipses extend outside copy bounds
   and taper to zero before the perimeter — no rectangular plates. */
.hero-body,
.hero-proof {
  position: relative;
  isolation: isolate;
}
.hero-body { color: #494136; text-shadow: 0 1px 3px rgba(255,250,241,.63); }
.hero-proof { color: #493e31; text-shadow: 0 1px 2px rgba(255,250,241,.7); }
.hero-body::before,
.hero-proof::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -40px -62px -43px;
  background: radial-gradient(
    ellipse closest-side at 49% 50%,
    rgba(249,244,235,.88) 0%,
    rgba(249,244,235,.78) 38%,
    rgba(249,244,235,.46) 62%,
    rgba(249,244,235,.13) 82%,
    rgba(249,244,235,0) 100%
  );
  filter: blur(12px);
}