/* Shared inner-page opening: editorial serif page name, staggered over the
   photograph, with a centred white comment. Scroll gathers the words. */
.tlh-opening {
  --op-heading: #f5eee9;
  --op-comment: #fff;
  --op-image-filter: saturate(.72) contrast(.92) brightness(.82);
  --op-overlay-top: rgba(17, 13, 20, .48);
  --op-overlay-mid: rgba(17, 13, 20, .36);
  --op-overlay-bottom: rgba(17, 13, 20, .56);
  --opening-scroll: 0;
  position: relative;
  height: 100svh;
  min-height: 34rem;
  overflow: hidden;
  isolation: isolate;
  background: #241733;
  color: #fff;
}
.tlh-inner .tlh-opening { position: sticky; top: 0; z-index: 0; }
/* Dialogs are left out: made relative they leave the viewport for the top of
   the document, and opening one scrolled the page back to the top. */
.tlh-inner main > *:not(.tlh-opening, dialog) { position: relative; z-index: 1; }
/* The hold: the hero stays pinned for this much scroll while the words
   gather, and only then does the next section rise over it (Hodge, 9 Oct). */
@media (prefers-reduced-motion: no-preference) {
  .tlh-inner .tlh-opening + * { margin-top: 60svh; }
}
.tlh-opening__media { position: absolute; inset: 0; margin: 0; }
.tlh-opening__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--op-image-position, 50% 50%);
  filter: var(--op-image-filter);
}
.tlh-opening__media picture { display: block; width: 100%; height: 100%; }
.tlh-opening__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, var(--op-overlay-top), var(--op-overlay-mid) 44%, var(--op-overlay-bottom));
}
/* Framed low so the TLH logos on the jackets stay in (Hodge, 8 Oct). */
.our-story-page .tlh-opening {
  --op-image-position: 50% 76%;
  background: #151820;
}
.impact-page .tlh-opening { --op-image-position: 50% 50%; }
.talks-page:not(.contact-page) .tlh-opening { --op-image-filter: saturate(.68) contrast(.92) brightness(.88); }
.contact-page .tlh-opening { --op-image-position: 50% 44%; }
.tlh-opening__copy { position: absolute; inset: 0; z-index: 1; }
.tlh-inner .tlh-opening__title,
.tlh-inner .tlh-opening__sub {
  font-family: var(--font-display, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif) !important;
  font-style: normal;
  letter-spacing: -.02em;
}
.tlh-inner .tlh-opening__title {
  position: absolute;
  top: 47%;
  left: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: .2em;
  width: 100%;
  max-width: none;
  margin: 0;
  transform: translateY(-50%);
  color: var(--op-heading);
  font-size: clamp(3.5rem, 6.7vw, 8rem);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
}
.tlh-opening__title > span {
  flex: 0 0 auto;
  display: block;
  white-space: nowrap;
  transform: translate3d(
    calc((1 - var(--opening-scroll)) * var(--word-start-x, calc(var(--word-position) * 3vw))),
    calc((1 - var(--opening-scroll)) * var(--word-position) * var(--word-start-y, 12svh)),
    0
  );
  will-change: transform;
}
.tlh-inner .tlh-opening__sub {
  position: absolute;
  top: 69%;
  left: 50%;
  width: min(90%, 48rem);
  margin: 0;
  transform: translateX(-50%);
  color: var(--op-comment);
  font-size: clamp(1.2rem, 2vw, 2rem);
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-wrap: balance;
}
.tlh-opening__foot {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateX(-50%);
  border: 1px solid rgba(245, 238, 233, .55);
  border-radius: 50%;
  color: var(--op-heading);
  font-size: 1.2rem;
  text-decoration: none;
}
.tlh-inner .tlh-nav:not(.is-on-light) .tlh-nav__actions .tlh-nav__cta[aria-current="page"] { color: #f5eee9; }
.tlh-opening__foot:focus-visible { outline: 2px solid var(--op-comment); outline-offset: 4px; }
@media (max-width: 767px) {
  .tlh-inner .tlh-opening__title { font-size: 11.5vw; }
  .tlh-inner .tlh-opening__sub { top: 68%; font-size: clamp(1.15rem, 4.8vw, 1.5rem); }
  .tlh-inner.our-story-page .tlh-opening__title {
    top: calc(47% + 30px);
    text-transform: none;
    --word-start-y: clamp(3.25rem, 15vw, 5rem);
  }
  .tlh-inner.our-story-page .tlh-opening__sub { top: 82%; }
}
@media (prefers-reduced-motion: reduce) {
  .tlh-inner .tlh-opening { position: relative; }
  .tlh-opening__title > span { transform: none; will-change: auto; }
}