/* Facette & Co. — OPTIONAL hero headline refinement (every page).
   ------------------------------------------------------------------
   Makes the big hero headings sturdier and easier to read, and stops letters
   being clipped at the edges.

   TO REMOVE: delete this file and the line marked "hero-type" in the <head>
   of each page. The pages go straight back to their original look.
   ------------------------------------------------------------------
   Why it looked thin: Bodoni Moda has an "optical size" setting. At large
   sizes the browser picks its display cut, whose hairline strokes almost
   vanish. Fixing optical size to a text-sized cut keeps the Bodoni elegance
   with visibly stronger hairlines. Upright letters also go up one weight
   step; the italic only comes in one weight, so it stays at 400. */

/* Shared: sturdier strokes, no fake bold, crisper rendering */
.copy h1, .copy h2,
.hero__title {
  font-optical-sizing: none;
  font-variation-settings: 'opsz' 30;
  font-weight: 500;
  font-synthesis: none;
  -webkit-font-smoothing: auto;
  -moz-osx-font-smoothing: auto;
  text-rendering: optimizeLegibility;
}
.hero__title .line--it > span { font-weight: 400; }

/* Home page slides */
.copy h1, .copy h2 {
  letter-spacing: 0;
  line-height: 1.08;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .38);
  /* sized by width AND height, so wide-but-short screens don't push it under the menu */
  font-size: clamp(2rem, min(4.1vw, 7.4vh), 4.4rem);
}
.copy { max-width: min(100%, 980px); }
.copy p { font-weight: 400; color: rgba(233, 228, 220, .95); }

/* Story pages (Gemstones, Jewellery, Accessories, Gifting) */
.hero__title {
  letter-spacing: -.008em;
  line-height: 1.02;
  text-shadow: 0 2px 34px rgba(0, 0, 0, .35);
}
/* Each line is a mask for the rise-in animation. The old mask cut off italic
   overhangs and letter tails (g, y, f); this one leaves room on every side. */
.hero__title .line {
  overflow: visible;
  clip-path: inset(-.2em -.6em 0 -.6em);
  padding-bottom: .24em;
  margin-bottom: -.16em;
}
/* start a little lower so the taller mask still hides the text before it rises */
.hero__title .line > span { transform: translateY(130%); }