/* ==========================================================================
   Page hero

   The same opening as the homepage: the film running behind a dark scrim, the
   navigation over it, a gold rule, the title in the display face and the
   page's own standfirst. Astra's header is stood down here because this hero
   carries the navigation itself.
   ========================================================================== */

body.w2e-page-hero .site-header,
body.w2e-page-hero .ast-main-header-wrap,
body.w2e-page-hero #masthead {
  display: none !important;
}

body.w2e-page-hero .site-content .ast-container,
body.w2e-page-hero .entry-content > .w2e-hero {
  margin-top: 0;
}

/* The hero sits inside the content column, so it steps out to the full width
   of the window. The column is a block, so this is safe. */
body.w2e-page-hero .w2e-hero--page {
  position: relative;
  /* The exact offset is set from the measured position of the column; these
     margins are only the starting point before that runs. */
  margin-left: 0;
  margin-right: 0;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
  min-height: clamp(420px, 62vh, 620px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--w2e-ink);
  isolation: isolate;
}

body.w2e-page-hero .w2e-hero--page > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to right, rgba(6, 14, 22, .84) 0%, rgba(6, 14, 22, .58) 40%, rgba(6, 14, 22, .18) 72%, rgba(6, 14, 22, .34) 100%),
    linear-gradient(to bottom, rgba(6, 14, 22, .62) 0%, rgba(6, 14, 22, .12) 34%, rgba(6, 14, 22, .48) 100%);
}

/* Navigation */
body.w2e-page-hero .w2e-hero--page .w2e-nav {
  position: relative;
  z-index: 2;
  /* Over the film, not on a band: the same as the homepage. */
  background: transparent !important;
  border: 0 !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  padding: clamp(1rem, 2.4vw, 1.75rem) clamp(1.15rem, 4vw, 3.5rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-brand {
  display: inline-flex;
  flex-direction: column;
  line-height: 1;
  text-decoration: none;
  color: #FFFFFF;
  flex: none;
}

body.w2e-page-hero .w2e-hero--page .w2e-brand img {
  max-height: 46px;
  width: auto;
  display: block;
}

body.w2e-page-hero .w2e-hero--page .w2e-brand__word {
  font-family: var(--w2e-serif);
  font-style: italic;
  font-size: 1.5rem;
  font-weight: 600;
}

body.w2e-page-hero .w2e-hero--page .w2e-brand__sub {
  font-family: var(--w2e-sans);
  font-size: .625rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  margin-top: .35em;
}

body.w2e-page-hero .w2e-hero--page .w2e-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(1rem, 2.2vw, 2.25rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-menu a {
  position: relative;
  font-family: var(--w2e-sans);
  font-size: .9375rem;
  color: rgba(255, 255, 255, .92);
  text-decoration: none !important;
  padding-bottom: .35em;
}

body.w2e-page-hero .w2e-hero--page .w2e-menu a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--w2e-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .32s var(--w2e-ease);
}

body.w2e-page-hero .w2e-hero--page .w2e-menu a:hover::after,
body.w2e-page-hero .w2e-hero--page .w2e-menu a[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Headline */
body.w2e-page-hero .w2e-hero--page .w2e-hero-content {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 1460px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 3rem) clamp(1.15rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-inner {
  max-width: 46rem;
  width: 100%;
}

/* On the listing page the search moves into the hero, and it needs the full
   measure rather than the width of a paragraph. */
body.w2e-page-hero .w2e-hero--page .w2e-hero-content:has(.w2e-hero-search) {
  align-items: flex-end;
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-inner:has(.w2e-hero-search) {
  max-width: min(1320px, 100%);
}

body.w2e-page-hero .w2e-hero-search {
  margin-top: clamp(1.5rem, 3vw, 2.25rem);
}

body.w2e-page-hero .w2e-hero--page .w2e-hero-rule {
  display: block;
  width: 116px;
  height: 2px;
  background: var(--w2e-gold);
  margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem);
}

body.w2e-page-hero .w2e-hero--page h1 {
  font-family: var(--w2e-serif) !important;
  font-size: clamp(2.5rem, 6vw, 4.25rem) !important;
  line-height: 1.04 !important;
  font-weight: 600 !important;
  letter-spacing: -.02em;
  color: #FFFFFF !important;
  margin: 0 0 clamp(.75rem, 1.6vw, 1.15rem) !important;
}

body.w2e-page-hero .w2e-hero--page .subhead {
  font-family: var(--w2e-sans);
  font-size: clamp(1rem, 1.4vw, 1.125rem);
  line-height: 1.62;
  color: rgba(255, 255, 255, .9);
  max-width: 38rem;
}

/* The page's own title band and its in-page navigation are now saying the
   same thing the hero says, one screen apart. */
body.w2e-page-hero .rp-title-band,
body.w2e-page-hero .rp-header,
body.w2e-page-hero .entry-content > .w2e-page > .w2e-nav,
body.w2e-page-hero .entry-content .w2e-page > .w2e-nav {
  display: none !important;
}

/* The burger belongs to the narrow widths only. */
body.w2e-page-hero .w2e-hero--page .w2e-burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  cursor: pointer;
}

body.w2e-page-hero .w2e-drawer {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(6, 14, 22, .96);
  padding: clamp(4rem, 12vh, 7rem) clamp(1.5rem, 6vw, 3rem);
}

body.w2e-page-hero .w2e-drawer nav a {
  font-family: var(--w2e-serif);
  font-size: 1.5rem;
  font-weight: 600;
  color: #FFFFFF;
  text-decoration: none;
  padding: .55rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}

@media (max-width: 1024px) {
  body.w2e-page-hero .w2e-hero--page .w2e-menu { display: none; }
  body.w2e-page-hero .w2e-hero--page .w2e-burger { display: inline-flex; }
  body.w2e-page-hero .w2e-hero--page .w2e-nav { gap: .75rem; }
}

@media (max-width: 600px) {
  body.w2e-page-hero .w2e-hero--page { min-height: 380px; }
  body.w2e-page-hero .w2e-hero--page .w2e-hero-inner { max-width: 100%; }
}

/* A device that asks for less motion gets the poster frame, not the film. */
@media (prefers-reduced-motion: reduce) {
  body.w2e-page-hero .w2e-hero--page > video { display: none; }
  body.w2e-page-hero .w2e-hero--page {
    background-size: cover;
    background-position: center;
  }
}