/* Hero headline overlay: positioned by headline.js (left/top/width/height in px)
   so it spans the viewport width and the free space above the heading without
   affecting layout. Purely decorative: the H1 stays the accessible text.

   The H1 is the plain, finished page heading from the first paint (full ink, no
   fade, no shadow). When the 3D letters are ready, their flat faces (the camera
   straight on, the same glyphs in the same ink) are drawn right over the text; one
   or two frames later (data-three="on") the text itself goes transparent, and the
   blocks slide out behind the faces. It stays in the DOM, readable for assistive
   tech and search. If the 3D fails, is slow or missing, nothing changes: the
   heading simply stays as it is. */
/* Until the Outfit face arrives (the font loads with display=swap), the heading is drawn in a local
   bold sans scaled and given Outfit's own vertical metrics (ascent 1.00, descent 0.26 em), so the
   swap moves no line and no letter up or down (it shifted the heading's text 3-4 px, the page's
   only layout shift). */
@font-face {
  font-family: "Outfit Heading Fallback";
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"), local("Liberation Sans Bold"), local("Arial");
  font-weight: 100 900;
  size-adjust: 95.9%;
  ascent-override: 104.3%;
  descent-override: 27.1%;
  line-gap-override: 0%;
}
.headline-workshop h1 {
  font-family: "Outfit", "Outfit Heading Fallback", system-ui, sans-serif;
  font-weight: 800;
  color: #1e2942;
}
/* the heading fills the hero like the reference (very tight letter spacing), with
   room above it for the diorama's top floor (fixed, so no layout shift) */
.home-intro .headline-workshop h1 { margin-top: 0.62em; letter-spacing: -0.05em; line-height: 0.92; }
/* the eyebrow line sits above the diorama, clear of its top floor, the children and the
   drone (which stays below it: headline.js passes its position to the story), never over
   the letters; it is lifted visually (no layout shift), just under the header */
.home-intro > .eyebrow { position: relative; z-index: 4; }
@media (min-width: 641px) {
  .home-intro .headline-workshop h1 { font-size: clamp(2.7rem, 8.7vw, 8.4rem); margin-top: 1.75em; }
  .home-intro > .eyebrow { transform: translateY(calc(-1 * min(0.5 * clamp(2.7rem, 8.7vw, 8.4rem), 58px))); }
}
/* short desktop screens (laptops): a slightly smaller heading and hero padding, so the
   buttons stay above the fold with the same room for the diorama under the eyebrow */
@media (min-width: 641px) and (max-height: 859px) {
  .home-intro { padding-block: 36px 40px; }
  .home-intro .headline-workshop h1 { font-size: min(clamp(2.7rem, 8.7vw, 8.4rem), 13svh); margin-top: 1.6em; }
  .home-intro > .eyebrow { transform: translateY(calc(-1 * min(0.5 * min(clamp(2.7rem, 8.7vw, 8.4rem), 13svh), 58px))); }
}
/* phones: the hero starts under the header (site.css); the margin is the room above the
   letters for the diorama's top floor, its children and their bubbles, under the eyebrow */
@media (max-width: 640px) {
  .home-intro .headline-workshop h1 { margin-top: 2.6em; }
}
.headline-workshop[data-three] h1 {
  color: transparent;
  text-shadow: none;
}
.headline-workshop .headline-stage {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
  contain: strict;
}
.headline-workshop .headline-stage canvas {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
}

/* Print and Windows high-contrast: show the real heading, not the canvas. */
@media print, (forced-colors: active) {
  .headline-workshop .headline-stage { display: none; }
  .headline-workshop[data-three] h1 { color: #1e2942; opacity: 1; }
}
@media (forced-colors: active) { .headline-workshop[data-three] h1 { color: CanvasText; } }