/* ============================================================
   Aventurine — hero, "facet" edition. Pairs with js/hero-facet.js.
   Shipped on index.html; hero-lab.html loads it too, as one of its modes.

   Two layers over the shared .hero box (sections.css):
     .facet-gem   the cut stone         repainted every frame
     .facet-veil  the domed vignette    baked small, CSS-stretched
   ============================================================ */

/* The cut is meant to be cropped, not framed: taller than the slab it replaced
   so the fold cuts it off and it reads as part of something bigger. */
.hero-facet {
  min-height: min(86vh, 840px);
  /* flat on purpose: every ramp is painted into the canvases below, where it
     can be baked small and stretched and so escape Chromium's ordered
     gradient dither. This is the fallback the copy sits on if canvas is
     unavailable and nothing paints. */
  background: var(--hero-ground);
}

.hero-facet .facet-gem,
.hero-facet .facet-veil {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero-facet .facet-gem  { z-index: 0 }
.hero-facet .facet-veil { z-index: 1 }

/* sections.css cuts the headline out of the stone: a gradient clipped to the
   text and tracked to the light, via --hx/--hy. Off here, so the copy is flat
   light type over the pane. The padding that rule adds for descenders goes
   with it. Overridden rather than deleted from sections.css, because the mica
   slab still uses it and hero-lab.html can still switch back to it. */
.hero-facet h1 {
  padding-bottom: 0;
  background-image: none;
  -webkit-background-clip: border-box;
  background-clip: border-box;
  color: var(--color-aventurine-50);
  -webkit-text-fill-color: var(--color-aventurine-50);
}

/* sections.css steps the slab down at this width (min(72vh, 560px)). Its rule
   and .hero-facet are the same specificity and this file loads second, so the
   step-down has to be repeated here or it never applies. Same ratio as the
   desktop pair, so the cut stays cropped by the fold on a phone too. */
@media (max-width:880px) {
  .hero-facet { min-height: min(86vh, 760px) }
}