/* Shared top-of-page hero standard (docs/top-of-page-hero-requirements.md).

   The picture is drawn at the band's full height and anchored to the right, so it is never cropped vertically and
   the visitor sees all of it. Left of the picture the band is plain cream; the picture's left edge melts into
   that cream through a blurred copy of itself, and the blur deepens toward the left. The approach is the one used
   on the Fragrifiscents site.

   Where the picture's left edge falls depends on its own proportions, so each page supplies --nc-page-aspect
   beside --nc-page-image (stamped by scripts/stamp-hero-aspect.mjs) and everything here is positioned from the
   picture's drawn width, --nc-image-w.

   Pages supply only --nc-page-image and --nc-page-aspect; nothing page-specific should restyle .hero. */
.hero{
  --nc-cream:245,239,232;
  --nc-hero-h:500px;
  /* The page supplies --nc-page-aspect on :root. The fallback lives in the var() call rather than in a
     declaration here, because a declaration on .hero itself would beat the inherited value from :root and every
     page would be drawn as though its picture were 16:9. */
  --nc-image-w:calc(var(--nc-hero-h) * var(--nc-page-aspect, 1.778));
  position:relative;
  isolation:isolate;
  overflow:hidden;
  box-sizing:border-box;
  height:var(--nc-hero-h)!important;
  min-height:0!important;
  padding:0!important;
  display:flex!important;
  align-items:center;
  background:rgb(var(--nc-cream)) var(--nc-page-image) right center/auto 100% no-repeat!important;
}
/* The same picture, blurred, revealed only across its own left edge so that edge dissolves into the cream.
   It is strongest at the edge and gone less than a third of the way in, so most of the picture is left crisp. */
.hero::before{
  content:"";
  position:absolute;
  z-index:-2;
  inset:0;
  background:inherit;
  filter:blur(16px) saturate(.92);
  -webkit-mask-image:linear-gradient(90deg,transparent calc(100% - var(--nc-image-w)),#000 calc(100% - var(--nc-image-w) * .97),#000 calc(100% - var(--nc-image-w) * .84),transparent calc(100% - var(--nc-image-w) * .72));
  mask-image:linear-gradient(90deg,transparent calc(100% - var(--nc-image-w)),#000 calc(100% - var(--nc-image-w) * .97),#000 calc(100% - var(--nc-image-w) * .84),transparent calc(100% - var(--nc-image-w) * .72));
}
/* Cream: solid everywhere left of the picture, then fading away inside it so the copy has a calm field to sit on
   and the picture's right side is left clear. */
.hero::after{
  content:"";
  position:absolute;
  z-index:-1;
  inset:0;
  background:linear-gradient(90deg,
    rgb(var(--nc-cream)) 0,
    rgb(var(--nc-cream)) calc(100% - var(--nc-image-w)),
    rgba(var(--nc-cream),.92) calc(100% - var(--nc-image-w) * .9),
    rgba(var(--nc-cream),.66) calc(100% - var(--nc-image-w) * .72),
    rgba(var(--nc-cream),.26) calc(100% - var(--nc-image-w) * .54),
    rgba(var(--nc-cream),0) calc(100% - var(--nc-image-w) * .4));
}
/* Copy aligns with the shared header shell on every page. */
.hero > .wrap{position:relative;z-index:1;width:min(1200px,calc(100% - 56px))!important;max-width:none!important;margin:0 auto!important;padding:0!important;text-align:left}
/* --nc-copy-max keeps the copy's right edge clear of the picture's focal area. */
.hero{--nc-copy-max:min(760px,calc(62vw - max(28px,50vw - 600px)))}
.hero > .wrap > *,.hero .hero-grid > div{max-width:var(--nc-copy-max)}
.hero .back{display:inline-block;margin:0 0 18px!important}
.hero .eyebrow{margin:0 0 12px!important;color:#2b1743!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-size:.78rem!important;font-weight:800!important;letter-spacing:.13em!important;line-height:1.35!important;text-transform:uppercase!important}
.hero h1{max-width:var(--nc-copy-max)!important;margin:0!important;color:#211631!important;font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(2.6rem,4.6vw,4.6rem)!important;font-style:normal!important;font-weight:700!important;letter-spacing:-.045em!important;line-height:1.03!important;text-align:left!important;overflow-wrap:break-word}
/* Shared smaller step for long titles (over 52 characters, flagged by site-chrome.js) so they stay inside the hero. */
.hero h1.nc-hero-title-long{font-size:clamp(2.3rem,3.5vw,3.5rem)!important}
.hero h1 em{color:#7a4ba0!important;font:italic 700 1em/1.03 Georgia,'Times New Roman',serif!important}
.hero .lede,.hero .lead{max-width:min(620px,var(--nc-copy-max))!important;margin:18px 0 0!important;color:#4f405c!important;font-family:Inter,ui-sans-serif,system-ui,sans-serif!important;font-size:clamp(.98rem,.9rem + .25vw,1.08rem)!important;font-style:normal!important;line-height:1.55!important;text-align:left!important}
.hero .actions,.hero .lede + .button,.hero .lead + .button{margin-top:24px!important}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px}
.hero .actions .button{width:auto}
.hero a:focus-visible{outline:3px solid #211631;outline-offset:3px;border-radius:4px}
.hero .button:focus-visible{outline:3px solid #211631;outline-offset:3px;box-shadow:0 0 0 6px rgba(255,253,249,.9)!important}
@media(max-width:620px){
  /* On a phone the picture would be wider than the screen, so it takes the full width and the cream covers more
     of it to keep the copy readable. */
  .hero{--nc-hero-h:440px;background-size:cover!important;background-position:right center!important}
  .hero::before{-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 14%,transparent 28%);mask-image:linear-gradient(90deg,#000 0%,#000 14%,transparent 28%)}
  .hero::after{background:linear-gradient(90deg,rgba(var(--nc-cream),.97) 0%,rgba(var(--nc-cream),.93) 55%,rgba(var(--nc-cream),.72) 78%,rgba(var(--nc-cream),.4) 100%)}
  .hero > .wrap{width:min(100% - 32px,1120px)!important;margin:0 auto!important;padding:0!important}
  .hero > .wrap > *,.hero .hero-grid > div,.hero h1,.hero .lede,.hero .lead{max-width:100%!important}
  .hero h1{font-size:clamp(2.1rem,9vw,2.6rem)!important}
  .hero h1.nc-hero-title-long{font-size:clamp(1.8rem,7.4vw,2.2rem)!important}
  .hero .lede,.hero .lead{font-size:.98rem!important;line-height:1.5!important;margin-top:14px!important}
  .hero .back{margin-bottom:12px!important}
  .hero .actions,.hero .lede + .button,.hero .lead + .button{margin-top:18px!important}
  .hero .actions{gap:10px}
}