/* Layout 2 — Full-bleed photographic cover, then one calm centred column.
   The most "magazine cover" of the six: no cards, colour bands do the dividing. */

.l2 .site-header--over {
  position: absolute; inset: 0 0 auto; z-index: 5;
  background: transparent; border-bottom: 0;
}
.l2 .site-header--over .brand,
.l2 .site-header--over .brand__name { color: var(--chalk); }
.l2 .site-header--over .brand__role { color: rgba(251, 250, 246, 0.8); }
.l2 .site-header--over .nav__list a { color: var(--chalk); }
.l2 .site-header--over .lang a { color: rgba(251, 250, 246, 0.8); }
.l2 .site-header--over .lang [aria-current="true"] { color: var(--chalk); }
.l2 .site-header--over .nav-toggle { color: var(--chalk); border-color: rgba(251, 250, 246, 0.5); }
@media (max-width: 47.99em) {
  .l2 .site-header--over .nav.is-open { background: var(--plum); }
}

.l2 .cover { position: relative; min-height: 100svh; display: flex; align-items: flex-end; isolation: isolate; }
.l2 .cover__media { position: absolute; inset: 0 auto 0 0; width: 100%; height: 100%; z-index: -2; }
@media (min-width: 56em) {
  /* Anchored left and slightly overwidth, so she sits clear of the copy.
     Widening also magnifies, so the vertical anchor moves up to keep her head in frame. */
  .l2 .cover__media { width: 120%; }   /* raise to move her further right */
  .l2 .cover__img { object-position: 50% 12%; }
}
.l2 .cover__media picture, .l2 .cover__img { width: 100%; height: 100%; }
.l2 .cover__img { object-fit: cover; object-position: 72% 18%; }
/* Scrim runs left-to-right, not top-to-bottom: the copy sits on a darkened left
   edge while she stays legible on the right. A tall portrait in a wide frame
   disappears behind an even overlay. */
.l2 .cover::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(to bottom, rgba(42, 36, 48, 0.42) 0%, rgba(42, 36, 48, 0) 28%),
    linear-gradient(to right, rgba(34, 28, 40, 0.88) 0%, rgba(34, 28, 40, 0.74) 32%, rgba(34, 28, 40, 0.3) 58%, rgba(34, 28, 40, 0.05) 80%);
}
@media (max-width: 55.99em) {
  .l2 .cover__img { object-position: 60% 14%; }
  .l2 .cover::after {
    background: linear-gradient(to bottom, rgba(34, 28, 40, 0.5) 0%, rgba(34, 28, 40, 0.18) 34%, rgba(34, 28, 40, 0.88) 78%);
  }
}
.l2 .cover__inner { padding-block: clamp(3rem, 8vw, 6rem); }
.l2 .cover__copy { max-width: 42ch; color: var(--chalk); text-shadow: 0 1px 24px rgba(20, 16, 24, 0.5); }
.l2 .cover__copy .hero__title { color: var(--chalk); font-size: clamp(2.3rem, 1.1rem + 4.6vw, 4rem); }
.l2 .cover__copy .lede { color: rgba(251, 250, 246, 0.92); margin-top: 1.5rem; }
.l2 .btn--on-dark { border-color: var(--chalk); color: var(--chalk); }
.l2 .btn--on-dark:hover { background: var(--chalk); color: var(--plum); }

.l2 .narrow { width: min(100% - 2.5rem, 720px); }
@media (min-width: 40em) { .l2 .narrow { width: min(100% - 4rem, 720px); } }
.l2 .centred { text-align: center; }
.l2 .centred .eyebrow { justify-content: center; display: flex; }
.l2 .centred .lede--after { margin-top: 1.25rem; }

/* audience items as prose blocks, no card chrome at all */
.l2 .flow { margin-top: 3.5rem; display: grid; gap: clamp(2rem, 4vw, 3rem); }
.l2 .plainblock { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.l2 .plainblock h3 { font-family: var(--display); font-size: 1.5rem; font-weight: 400; color: var(--plum); margin-bottom: 0.6rem; }
.l2 .plainblock p { color: rgba(42, 36, 48, 0.84); }

.l2 .scale { margin-top: 3rem; }
.l2 .scale__out { text-align: center; }
.l2 .scale__placeholder { margin-inline: auto; }

.l2 .pull { text-align: center; }
.l2 .steps { margin-top: 3rem; }

.l2 .bleed { width: 100%; }
/* Anchored to the top: her head sits very close to the frame edge in this photo,
   so any centred crop decapitates her. */
.l2 .bleed__img { width: 100%; max-height: 82svh; object-fit: cover; object-position: 50% 0%; }

.l2 .creds--stacked { grid-template-columns: 1fr; margin-top: 3rem; }
.l2 .creds__badges { justify-content: center; margin-top: 2.5rem; }
.l2 .creds__more { margin-top: 1.5rem; text-align: center; }
.l2 .cta-band, .l2 .cta-band .btn-row { text-align: center; justify-content: center; }
.l2 .cta-band__p { margin-top: 1.25rem; }
.l2 .btn--on-plum { border-color: #EDE6EC; color: #EDE6EC; }
.l2 .btn--on-plum:hover { background: #EDE6EC; color: var(--plum); }
.l2 .site-footer__blurb { margin-top: 0.75rem; max-width: 32ch; }

/* ================== the page shell ==================
   The site is capped and centred rather than filling the window. Past --site-max
   nothing grows: the photographs hold their size however wide the window gets.
   Below it everything still scales, which is what narrow screens need. */
:root { --site-max: 1000px; --shell: #E3E0D8; }

html { background: var(--shell); }

body.l2 {
  max-width: var(--site-max);
  margin-inline: auto;
  box-shadow: 0 0 44px rgba(42, 36, 48, 0.1);
  /* the cover pages' header is position:absolute; without this it takes the viewport
     as its containing block and hangs outside the shell */
  position: relative;
}

/* The hero media is 120% wide and anchored left so she sits clear of the copy.
   With the page centred, that overhang would spill into the margin: clip it. */
.l2 .cover { overflow: hidden; }

/* Heights stop growing too, so a taller window no longer magnifies the photographs.
   Only on screens wide enough to have the problem - a phone still gets the full
   viewport hero it was designed with. */
@media (min-width: 56em) {
  .l2 .cover { min-height: min(100svh, 760px); }
  .l2 .bleed__img { max-height: min(82svh, 620px); }
}