/* ---------- The page opener ----------
   Shared by every page (layouts/partials/hero.html): a photograph at full
   bleed with the h1 over it. The photograph is the largest thing on the page
   and the type is set on it, not beside it. */

.wr-hero {
  position: relative;
  isolation: isolate;
  display: grid;
  /* Tall enough to be a place rather than a banner, but never so tall that a
     laptop shows only the image and none of the page under it. */
  min-block-size: min(82vh, 46rem);
  align-content: end;
  overflow: hidden;
  /* Full bleed out of any padded ancestor. html carries overflow-x: clip
     (base.css) so the scrollbar cannot turn this into sideways scroll. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
}

.wr-hero__img,
.wr-hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
}

/* The vertical focal point of a crop, chosen per page so the same four
   photographs read as different pictures. These are classes rather than a style
   attribute on the <img> because the Content-Security-Policy has no
   'unsafe-inline' and drops inline styles outright -- every hero would sit at
   the default 50% instead of where it was framed. responsive-img.html refuses to
   build a value that has no rule here. */
.wr-focus-30 { object-position: 50% 30%; }
.wr-focus-38 { object-position: 50% 38%; }
.wr-focus-42 { object-position: 50% 42%; }
.wr-focus-45 { object-position: 50% 45%; }

.wr-hero__img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  /* Overscan and drift in one transform, because transform is one property.
     Declared here rather than in a script-gated rule so it is in the very
     first paint: when the overscan arrived with the .js class, the image
     painted at its natural size and then snapped 12% larger.

     --p is written by main.js and rests at 0.5, the midpoint, where the offset
     is zero -- so with script blocked the picture sits centred rather than
     shifted to one end. */
  transform:
    translate3d(0, calc((var(--p, 0.5) - 0.5) * -6%), 0)
    scale(var(--hero-overscan));
  /* Overscanned so parallax has somewhere to travel without exposing an edge.
     The scale lives in animations.css with the drift; this is the no-script
     resting state, which must already look right. */
}

/* Dark at the foot where the words are, clear at the top where the sky is.
   A flat wash over the whole frame would grey out the photograph, which is
   the thing the page is built on. */
.wr-hero__scrim {
  background: linear-gradient(
    to top,
    rgb(0 0 0 / 0.78) 0%,
    rgb(0 0 0 / 0.55) 26%,
    rgb(0 0 0 / 0.12) 62%,
    rgb(0 0 0 / 0) 100%);
}

.wr-hero__inner {
  padding-block: var(--space-8) var(--space-9);
  color: #fff;
}

.wr-hero__title {
  max-inline-size: 18ch;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
  color: #fff;
}

/* The second half of the sentence, deliberately quieter than the first: the
   headline states the loss, this states what follows from it. */
.wr-hero__lede {
  /* No hyphenation here. It is set for body copy, but this line is display
     type over a photograph, and a soft hyphen through "Herstel-ler" reads as
     a mistake at this size. */
  hyphens: manual;
  margin-block-start: var(--space-4);
  max-inline-size: 26ch;
  font-size: var(--text-xl);
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
  color: rgb(255 255 255 / 0.86);
}

@media (min-width: 56rem) {
  .wr-hero__inner {
    padding-block-end: calc(var(--space-9) * 1.25);
  }}