/* Article page (Strapi entry body + hero) */
@import url("lightbox-dialog.css");
@import url("preview-banner.css");

/**
 * Typography uses Muse tokens from {@code vendor/muse/css/muse.css}, loaded on every page via
 * {@code fragments/head.html} (and explicitly on admin templates that skip that fragment).
 */
:root {
  --text: #1a1a2e;
  --muted: #5c5c6f;
  --border: #e8e8ee;
  /* Page canvas — Muse brand gray 10 */
  --bg: #ffffff;
  /** Hero parallax article title — bottom inset from sticky viewport; horizontal alignment matches `.article-layout__rail`. */
  --article-hero-parallax-title-inset-bottom: 40px;
  --body-font-size: var(--muse-font-size-50);
  /** Horizontal padding on `main`; left/right body blocks bleed by this amount. Keep in sync with `main`. */
  --article-gutter: 1.5rem;
  /**
   * Editorial rail + text column — [Figma 26:1541](https://www.figma.com/design/9qE0CsFb40rsKXgJ5SsM5W/Story-Lab?node-id=26-1541&m=dev)
   * Rail = max content width; prose capped and left-aligned. Wide floats = half rail; lightboxes = narrow floats.
   * Float spacing: `--article-float-text-gap`, `--article-float-margin-block`.
   */
  --article-rail-max: 1200px;
  /** Section main column + floats beside prose */
  --article-text-max: 792px;
  /** Full-width blocks within the padded 1440 shell */
  --article-content-max: 1200px;
  --article-shell-max: 1440px;
  --article-shell-pad-x: 120px;
  --article-shell-pad-y: 120px;
  --article-section-aside-w: 344px;
  /** Aside thumbnail — [Figma Story-Lab section aside](https://www.figma.com/design/NbwasN10uYrwOOvdnSEo5v/Story-Lab--Copy-?node-id=2002-49&m=dev) */
  --article-section-aside-img-h: 80px;
  --article-section-gutter: 64px;
  --article-section-main-w: 792px;
  --article-cards-max: 1360px;
  /**
   * Staggered mosaic — [Figma 2002:51](https://www.figma.com/design/NbwasN10uYrwOOvdnSEo5v/Story-Lab--Copy-?node-id=2002-51&m=dev):
   * Half-width card width; gutter; row-2 card uses full-row span + fixed width + left inset so it projects past col1.
   */
  --article-cards-col-gap: 24px;
  --article-cards-row-gap: clamp(1.5rem, 2.5vw, 2rem);
  --article-cards-stagger-y: 120px;
  --article-cards-stagger-x: 120px;
  /**
   * Parallax overlap full-bleed `::before`: opaque through this % of the shell, then fades to
   * transparent so the article canvas can show through when enough content sits below the fold.
   */
  --article-parallax-overlap-fade-start: 80%;
  /** Full-bleed parallax *image* frame (width : height). */
  --article-parallax-image-aspect-w: 2.39;
  --article-parallax-image-aspect-h: 1;
  /** Horizontal space between a float and wrapping text (was 1.25rem on lightbox floats). */
  --article-float-text-gap: 2rem;
  /** Vertical margin for floated image / carousel / pull quote / lightbox. */
  --article-float-margin-block: 1.25rem;
  /** Media lightbox teaser: play / maximize inset from floated thumbnail edges. */
  --article-teaser-corner-inset-float: 0.5rem;
  /** Center / full-width lightbox: larger inset (thumbnail spans prose width). */
  --article-teaser-corner-inset-center: clamp(1rem, 2.75vw, 1.75rem);
}

html {
  background-color: var(--bg);
}

body {
  margin: 0;
  color: var(--text);
  background: var(--bg);
  line-height: 1.45;
}

main.article-layout {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  /* Full-bleed / parallax `100vw` breakouts are wider than the layout when a vertical scrollbar is present. */
  overflow-x: clip;
}

/*
 * Fixed {@code .site-header--overlay} does not occupy flow. Reserve masthead height so
 * {@code .article-layout__rail} is not clipped.
 *
 * Default: pad {@code main}. {@code main--overlay-site-header}: pad the rail instead so the
 * hero / full-bleed block can start at the viewport top under the bar (Strapi OverlaySiteHeader).
 */
body:has(.site-header--overlay) main.article-layout:not(.main--hero-parallax):not(.main--overlay-site-header) {
  padding-top: var(--site-header-overlay-clearance);
}

body:has(.site-header--overlay) main.article-layout.main--overlay-site-header {
  padding-top: 0;
}

body:has(.site-header--overlay) main.main--overlay-site-header:not(.main--hero-parallax) > .article-layout__rail,
body:has(.site-header--overlay)
  main.main--overlay-site-header
  .article-body__parallax-overlap-shell
  > .article-layout__rail {
  padding-top: var(--site-header-overlay-clearance);
}

body:has(.site-header--overlay)
  main.main--hero-parallax:not(.main--overlay-site-header)
  .article-hero-parallax-overlap-shell
  > .article-layout__rail {
  padding-top: var(--site-header-overlay-clearance);
}

/*
 * Deep-link / scroll anchoring under the fixed bar — not on {@code .article-body__full-bleed}:
 * fit-content blocks use {@code max-height: 100vh/100dvh}; extra scroll-margin plus
 * {@code article-full-bleed-video.js} snap pushes the frame down and clips player controls.
 */
body:has(.site-header--overlay) .article-body__parallax[id],
body:has(.site-header--overlay) .article-body__brightcove[id],
body:has(.site-header--overlay) .article-body__youtube[id] {
  scroll-margin-top: var(--site-header-overlay-clearance);
}

.article-layout__rail {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--article-shell-max);
  margin-left: auto;
  margin-right: auto;
  --article-rail-pad-x: clamp(var(--article-gutter), 8.333vw, var(--article-shell-pad-x));
  padding-left: var(--article-rail-pad-x);
  padding-right: var(--article-rail-pad-x);
}

/** Article body canvas (solid white; Strapi background layers render above via `.article-layout__bg-layers`). */
.article-layout__content-bg {
  position: relative;
  isolation: isolate;
  display: flow-root;
  padding-bottom: 2.5rem;
  background-color: var(--bg);
}

/**
 * Strapi {@code ArticleBackgroundLayers}: one edge anchor via {@code --layer-inset}.
 * Pulled left by {@code --article-rail-pad-x} so layers align to the shell’s outer left (1440 column edge),
 * not the padded prose inset (inherits from {@code .article-layout__rail}).
 */
.article-layout__bg-layers {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(-1 * var(--article-rail-pad-x));
  right: 0;
  z-index: 0;
  pointer-events: none;
}

.article-layout__bg-layer {
  position: absolute;
  left: 0;
  box-sizing: border-box;
}

.article-layout__bg-layer--from-top {
  top: var(--layer-inset);
  bottom: auto;
}

.article-layout__bg-layer--from-bottom {
  bottom: var(--layer-inset);
  top: auto;
}

.article-layout__bg-layer img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
}

.article-layout__content-bg > .article-body__empty {
  position: relative;
  z-index: 1;
}

/** Full-bleed parallax video pages: drop bottom gutter above footer; clip horizontal vw bleed. */
main.main--parallax-video {
  padding-bottom: 0;
  overflow-y: clip;
}

.err {
  color: #b00020;
}

.muted {
  color: var(--muted);
  font-size: calc(var(--body-font-size) * 0.9);
}

.article-hero {
  margin: 0 0 1.5rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: #fff;
}

.article-hero img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

/* Brightcove may set small inline width/height; vjs-fluid uses padding-top — do not set height:auto */
.article-hero video-js.video-js,
.article-body__brightcove video-js.video-js {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

.article-hero .video-js .vjs-tech,
.article-body__brightcove .video-js .vjs-tech {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.article-body__brightcove {
  clear: both;
  margin: 1.25rem auto;
  width: 100%;
  max-width: 100%;
}

/* Full-bleed video (in-flow, no parallax): letterbox to fit viewport width and height. */
.article-body__full-bleed.article-body__full-bleed--breakout {
  --article-full-bleed-aspect-w: 16;
  --article-full-bleed-aspect-h: 9;
  --article-full-bleed-max-height: 100vh;
  position: relative;
  z-index: 0;
  clear: both;
  display: flex;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  margin: 1.25rem calc(50% - 50vw);
  background: #0f0f12;
}

@supports (height: 100dvh) {
  .article-body__full-bleed.article-body__full-bleed--breakout {
    --article-full-bleed-max-height: 100dvh;
  }
}

@supports (width: 100dvw) {
  .article-body__full-bleed.article-body__full-bleed--breakout {
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

/* Snap is handled in article-full-bleed-video.js (not CSS scroll-snap). */
html.article-has-full-bleed-video {
  scroll-snap-type: none;
}

/**
 * Fit 16:9 inside the viewport: width-limited on narrow screens, height-limited on ultrawide
 * (side letterboxing via centered box + breakout background).
 */
.article-body__full-bleed-fit {
  width: min(
    100%,
    calc(
      var(--article-full-bleed-max-height) * var(--article-full-bleed-aspect-w) /
        var(--article-full-bleed-aspect-h)
    )
  );
  height: min(
    calc(100vw * var(--article-full-bleed-aspect-h) / var(--article-full-bleed-aspect-w)),
    var(--article-full-bleed-max-height)
  );
  max-width: 100%;
  flex-shrink: 0;
}

@supports (width: 100dvw) {
  .article-body__full-bleed-fit {
    height: min(
      calc(100dvw * var(--article-full-bleed-aspect-h) / var(--article-full-bleed-aspect-w)),
      var(--article-full-bleed-max-height)
    );
  }
}

.article-body__full-bleed-brightcove {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.article-body__full-bleed-brightcove video-js.video-js {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0;
  padding-top: 0 !important;
}

.article-body__full-bleed-brightcove .video-js .vjs-tech {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain;
}

/* Manual Brightcove: Studio may briefly autoplay and leave the big play button at opacity 0. */
[data-article-brightcove-manual] .video-js.vjs-paused.article-brightcove-manual--gated .vjs-big-play-button {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.article-body__full-bleed-youtube {
  position: relative;
  width: 100%;
  height: 100%;
}

.article-body__full-bleed-youtube iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-title {
  font-size: calc(var(--body-font-size) * 2);
  font-weight: 500;
  line-height: 1.2;
  margin: 0 0 0.5rem;
  max-width: var(--article-content-max);
  margin-top: 2.5rem;
  margin-bottom: 1rem;
}
.article-description {
  font-size: calc(var(--body-font-size) * 1.5);
  font-weight: 400;
  line-height: 1.2;
  margin: 0 0 1rem;
  max-width: var(--article-content-max);
}

.article-body {
  font-size: var(--body-font-size);
  display: flow-root;
  position: relative;
  z-index: 1;
  padding-top: clamp(var(--article-gutter), 8.333vw, var(--article-shell-pad-y));
  padding-bottom: clamp(var(--article-gutter), 8.333vw, var(--article-shell-pad-y));
  container-type: inline-size;
  container-name: article-body;
  
}

/* Full-width rich text within the 1200px editorial column */
.article-body .article-body__text-section .article-body__text {
  max-width: var(--article-content-max);
  margin-left: auto;
  margin-right: auto;
}

.article-body .article-body__text-section {
  width: 100%;
}

.article-body > * + * {
  margin-top: 4rem;
}

.article-body .article-body__text :where(p, ul, ol, blockquote, pre) {
  margin: 0 0 2.4rem;
}

.article-body .article-body__text :where(ul, ol) {
  padding-left: 1.35rem;
}

.article-body .article-body__text :where(h1, h2, h3, h4, h5, h6) {
  margin: 2.4rem 0 2.4rem;
  line-height: 1.2;
  font-weight: 700; 
}

.article-body .article-body__text h1 {
  font-size: calc(var(--body-font-size) * 2.5);
}


.article-body .article-body__text h2 {
  font-size: calc(var(--body-font-size) * 2);
}

.article-body .article-body__text h3 {
  font-size: calc(var(--body-font-size) * 1.5);
}

@container article-body (max-width: 768px) {
  .article-body .article-body__text h1 {
    font-size: calc(var(--body-font-size) * 2);
  }
  .article-body .article-body__text h2 {
    font-size: calc(var(--body-font-size) * 1.5);
  }
  .article-body .article-body__text h3 {
    font-size: calc(var(--body-font-size) * 1.25);
  }
}

.article-body .article-body__text pre {
  background: #f4f4f6;
  padding: 1rem;
  overflow: auto;
  font-size: var(--body-font-size);
  border-radius: 6px;
}

.article-body .article-body__text blockquote {
  border-left: 4px solid var(--border);
  padding-left: 1rem;
}

.article-body__figure {
  margin: 1.25rem 0;
}

.article-body__figure img {
  max-width: 100%;
  height: auto;
  display: block;
}

.article-body__figure figcaption {
  margin-top: 0.5rem;
  font-size: calc(var(--body-font-size) * 0.9);
  text-align: center;
}

.article-body__image--left .article-body__figure-inner {
  margin-right: auto;
  max-width: 100%;
}

.article-body__image--right .article-body__figure-inner {
  margin-left: auto;
  max-width: 100%;
}

.article-body__image--center .article-body__figure-inner {
  margin-left: auto;
  margin-right: auto;
  max-width: 100%;
}

.article-body__blocks-image {
  margin: 1.25rem 0;
}

.article-body__blocks-image img {
  max-width: 100%;
  height: auto;
}

/**
 * Wide floats — in-column image, carousel, pull quote (Figma 26:1541): each uses half the rail;
 * following `.article-body__text` sits in the other half (width resolves beside the float; max 792px).
 */
.article-body .article-body__image.article-body__image--left,
.article-body .article-body__image.article-body__image--right {
  box-sizing: border-box;
  width: 50%;
  max-width: 50%;
}

.article-body .article-body__carousel.article-body__image--left,
.article-body .article-body__carousel.article-body__image--right {
  box-sizing: border-box;
  width: 50%;
  max-width: 50%;
}

.article-body .article-body__pull-quote.article-body__image--left,
.article-body .article-body__pull-quote.article-body__image--right {
  box-sizing: border-box;
  width: 50%;
  max-width: 50%;
  gap: var(--article-pull-quote-gap);
  padding: 1.75rem clamp(0.65rem, 2.5vw, 1.25rem);
}

.article-body .article-body__image.article-body__image--left,
.article-body .article-body__carousel.article-body__image--left,
.article-body .article-body__pull-quote.article-body__image--left {
  float: left;
  clear: none;
  margin-top: var(--article-float-margin-block);
  margin-bottom: var(--article-float-margin-block);
  margin-right: var(--article-float-text-gap);
  margin-left: 0;
}

.article-body .article-body__image.article-body__image--right,
.article-body .article-body__carousel.article-body__image--right,
.article-body .article-body__pull-quote.article-body__image--right {
  float: right;
  clear: none;
  margin-top: var(--article-float-margin-block);
  margin-bottom: var(--article-float-margin-block);
  margin-left: var(--article-float-text-gap);
  margin-right: 0;
}

.article-body .article-body__image.article-body__image--center {
  float: none;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
  margin-top: clamp(4rem, 12cqw, 12rem);
  margin-bottom: clamp(4rem, 12cqw, 12rem);

}

.article-body .article-body__carousel.article-body__image--center {
  float: none;
  clear: both;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--article-content-max);
  margin-left: auto;
  margin-right: auto;
}

.article-body .article-body__pull-quote.article-body__image--center {
  float: none;
  clear: both;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

.article-body__empty {
  max-width: var(--article-content-max);
  margin-left: auto;
  margin-right: auto;
  font-style: italic;
}

/* —— Section (344 + 64 + 792) —— */
.article-body__section {
  width: 100%;
  max-width: var(--article-content-max);
  margin-left: auto;
  margin-right: auto;
}

.article-body__section-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--article-section-aside-w)) minmax(0, var(--article-section-main-w));
  column-gap: var(--article-section-gutter);
  align-items: start;
  width: 100%;
}

.article-body__section-aside {
  width: 100%;
}

.article-body__section-asides {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: stretch;
  min-width: 0;
}

.article-body__section-asides--top {
  align-self: start;
}

.article-body__section-asides--center {
  align-self: center;
}

.article-body__section-asides--bottom {
  align-self: end;
}

/**
 * Aside: transparent stack — image above copy, left-aligned ([Figma 2002:49](https://www.figma.com/design/NbwasN10uYrwOOvdnSEo5v/Story-Lab--Copy-?node-id=2002-49&m=dev)).
 */
.article-body__section-aside-visual {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2.4rem;
  background: transparent;
}

.article-body__section-aside-visual img {
  flex-shrink: 0;
  display: block;
  height: var(--article-section-aside-img-h);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

.article-body__section-aside-text {
  width: 100%;
  margin: 0;
  padding: 0;
  font-size: calc(var(--body-font-size) * 0.95);
  line-height: 1.35;
  color: var(--text);
  text-align: left;
  background: transparent;
  margin-bottom: 4rem;
}

.article-body__section-aside-text :where(p:last-child) {
  margin-bottom: 0;
}

.article-body__section-aside-text :where(p) {
  margin: 0 0 0.65rem;
}

.article-body__section-main {
  min-width: 0;
  font-size: var(--body-font-size);
  max-width: var(--article-section-main-w);
}

.article-body__section-main :where(p, ul, ol, blockquote, pre) {
  margin: 0 0 4rem;
}

.article-body__section-main :where(h1, h2, h3, h4, h5, h6) {
  margin: 1.25rem 0 1rem;
  line-height: 1.15;
  font-weight: 700;
}

.article-body__section-main h1 {
  font-size: calc(var(--body-font-size) * 2.5);
}
.article-body__section-main h2 {
  font-size: calc(var(--body-font-size) * 2);
}

.article-body__section-main h3 {
  font-size: calc(var(--body-font-size) * 1.5);
}

@media (max-width: 56rem) {
  .article-body__section-grid {
    grid-template-columns: 1fr;
    row-gap: 1.75rem;
  }

  .article-body__section-main {
    max-width: none;
  }

  .article-body__section-asides--top,
  .article-body__section-asides--center,
  .article-body__section-asides--bottom {
    align-self: stretch;
  }

  .article-body__section-aside-visual {
    align-items: center;
  }

  .article-body__section-aside-visual img {
    object-position: center center;
  }
}

/* —— Cards mosaic (1360px centered in shell; ±80px vs 1200 content) —— */
.article-body__cards {
  box-sizing: border-box;
  width: calc(100% + 160px);
  max-width: min(var(--article-cards-max), calc(100vw - 2rem));
  margin-left: calc(-80px);
  margin-right: calc(-80px);
  margin-bottom: clamp(4rem, 12cqw, 12rem);
}

.article-body__cards-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: var(--article-cards-col-gap);
  row-gap: var(--article-cards-row-gap);
  align-items: start;
}

.article-body__cards-grid > .article-body__cards-cell:nth-child(1) {
  grid-column: 1;
  grid-row: 1;
}

.article-body__cards-grid > .article-body__cards-cell:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
  margin-top: var(--article-cards-stagger-y);
}

/**
 * Span full grid width so the card keeps ~half-track width but starts `stagger-x` from the rail;
 * right edge extends past the first column (pure col1 + margin-left would clip alignment).
 */
.article-body__cards-grid > .article-body__cards-cell:nth-child(3) {
  grid-column: 1 / -1;
  grid-row: 2;
  box-sizing: border-box;
  width: calc((100% - var(--article-cards-col-gap)) / 2);
  max-width: calc((100% - var(--article-cards-col-gap)) / 2);
  margin-left: var(--article-cards-stagger-x);
  justify-self: start;
}

.article-body__cards-grid > .article-body__cards-cell:nth-child(n + 4) {
  grid-column: auto;
  grid-row: auto;
  margin-top: 0;
  margin-left: 0;
}

.article-body__cards-cell {
  min-width: 0;
}

.article-body__cards-cell .article-body__carousel {
  margin-top: 0;
  margin-bottom: 0;
}

.article-body__cards-cell .article-body__carousel-inline {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.article-body__cards-cell .article-body__carousel-swiper-stack {
  background: transparent;
}

.article-body__cards-cell .article-body__carousel-swiper {
  overflow: hidden;
  background: #0f0f12;
}

.article-body__cards-cell .article-body__carousel-media--image img {
  display: block;
  width: 100%;
  height: auto;
  max-height: none;
  margin: 0;
  object-fit: unset;
}

.article-body__cards-cell .article-body__carousel-caption {
  padding-left: clamp(1rem, 5.88vw, 2.5rem);
  padding-right: clamp(1rem, 5.88vw, 2.5rem);
}

.article-body__cards-image-wrap {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.5rem;
  background: transparent;
}

.article-body__cards-image {
  display: block;
  width: 100%;
  height: auto;
  background: #0f0f12;
}

.article-body__cards-caption {
  margin: 0;
  padding: 0 clamp(1rem, 5.88vw, 2.5rem);
  font-size: 1.4rem;
  line-height: 1.35;
  text-align: center;
}

@media (max-width: 56rem) {
  .article-body__cards {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
  }

  .article-body__cards-grid {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .article-body__cards-grid > .article-body__cards-cell:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
    margin-top: 0;
    margin-left: 0;
    width: auto;
    max-width: none;
    justify-self: stretch;
  }
}

/**
 * Pull quote — top/bottom rules only: light blue centered, fading to transparent at left/right.
 * Cyan quote mark, large centered quote + attribution.
 */
.article-body__pull-quote {
  --article-pull-quote-rule-h: 4px;
  --article-pull-quote-rule-mid: #96c7ff;
  --article-pull-quote-gap: 1.5rem;
  --article-pull-quote-pad-y: 2.5rem;
  --article-pull-quote-pad-x: clamp(1.25rem, 10vw, 16rem);
  --article-pull-quote-font-size: clamp(2rem, 4.8cqw, 4.8rem);
  

  container-type: inline-size;
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--article-pull-quote-gap);
  margin-top: clamp(4rem, 12cqw, 12rem);
  margin-bottom: clamp(4rem, 12cqw, 12rem)  ;
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 100%;
  padding: var(--article-pull-quote-pad-y) var(--article-pull-quote-pad-x);
  text-align: center;
  color: var(--text);
  border: none;
  overflow: visible;
  background-color: transparent;
  background-image:
    linear-gradient(
      90deg,
      transparent 0%,
      var(--article-pull-quote-rule-mid) 50%,
      transparent 100%
    ),
    linear-gradient(
      90deg,
      transparent 0%,
      var(--article-pull-quote-rule-mid) 50%,
      transparent 100%
    );
  background-size:
    100% var(--article-pull-quote-rule-h),
    100% var(--article-pull-quote-rule-h);
  background-position:
    center top,
    center bottom;
  background-repeat: no-repeat;
}

@media (max-width: 768px) {
  .article-body__pull-quote {
    --article-pull-quote-pad-y: 1.5rem;
    --article-pull-quote-pad-x: clamp(0.5rem, 4cqw, 2rem);
    --article-pull-quote-gap: 1.25rem;
    
  }
}

.article-body__pull-quote::before {
  content: "";
  flex-shrink: 0;
  display: block;
  width: 24px;
  height: 20px;
  background: url("../icons/icon_pull_quote.svg") center / contain no-repeat;
}

.article-body .article-body__pull-quote.article-body__image--left::before,
.article-body .article-body__pull-quote.article-body__image--right::before {
  width: 22px;
  height: 18px;
}

.article-body__pull-quote-figcaption {
  margin: 0;
}

.article-body__pull-quote-quote {
  margin: 0;
  width: 100%;
  max-width: none;
  font-family: var(--muse-font-family-default);
  font-size: var(--article-pull-quote-font-size);
  font-style: normal;
  font-weight: 400;
  line-height: 1.05;
  color: var(--text);
}

.article-body__pull-quote-quote :where(p) {
  margin: 0 0 0.65rem;
  color: inherit;
}

.article-body__pull-quote-quote :where(p:last-child) {
  margin-bottom: 0;
}

.article-body__pull-quote-attribution {
  display: block;
  margin: 0;
  font-family: var(--muse-font-family-default);
  font-size: 1.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text);
}

/* —— Carousel (Swiper) —— */
.article-body__carousel {
  /**
   * Slide chrome under media + captions; arrows overlay the slide media (no dot pagination).
   * Set to e.g. #fff for a solid card; default transparent so page `--bg` shows through.
   */
  --article-carousel-chrome-bg: transparent;

  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}

.article-body__carousel-swiper-stack {
  position: relative;
  overflow: hidden;
  background: var(--article-carousel-chrome-bg);
}

.article-body__carousel-inline .article-body__carousel-swiper,
.article-body__carousel-dialog-body .article-body__carousel-swiper {
  overflow: hidden;
  background: var(--article-carousel-chrome-bg);
}

/* With Swiper `autoHeight`, slides must not stretch to the tallest row (default flex align-items). */
.article-body__carousel-swiper > .swiper-wrapper {
  align-items: flex-start;
}

.article-body__carousel-swiper .swiper-slide {
  height: auto;
}

.article-body__carousel-inline .article-body__carousel-swiper {
  position: relative;
}

.article-body__carousel-figure {
  margin: 0;
  height: auto;
  display: flex;
  flex-direction: column;
}

.article-body__carousel-media {
  flex: 0 0 auto;
  min-height: 0;
}

.article-body__carousel-media--image img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  margin: 0 auto;
  background: #0f0f12;
}

.article-body__carousel-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #0f0f12;
}

.article-body__carousel-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-body__carousel-bc video-js.video-js {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0;
}

.article-body__carousel-bc .video-js .vjs-tech {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.article-body__carousel-caption {
  margin-top: 0.5rem;
  font-size: 1.4rem;
  text-align: center;
  padding: 0 0.5rem 0.5rem;
  background-color: var(--article-carousel-chrome-bg);
}

/**
 * Carousel overlay nav — white SVG chevrons on left/right, vertically aligned to slide media via JS.
 * Swiper bundle loads after article.css — !important beats default absolute nav.
 */
.article-body__carousel-overlay-nav {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.article-body__carousel-overlay-nav .swiper-button-prev,
.article-body__carousel-overlay-nav .swiper-button-next {
  position: absolute !important;
  top: 0;
  left: 0;
  margin: 0 !important;
  box-sizing: border-box;
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  border: none;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 19px 35px;
  color: transparent;
  cursor: pointer;
  pointer-events: auto;
  filter: none;
}

.article-body__carousel-overlay-nav .swiper-button-prev {
  background-image: url("../icons/icon_arrow_left.svg");
}

.article-body__carousel-overlay-nav .swiper-button-next {
  background-image: url("../icons/icon_arrow_right.svg");
}

.article-body__carousel-overlay-nav .swiper-button-prev::after,
.article-body__carousel-overlay-nav .swiper-button-next::after {
  display: none !important;
  content: "" !important;
}

.article-body__carousel-overlay-nav .swiper-button-prev:not(.swiper-button-disabled):hover,
.article-body__carousel-overlay-nav .swiper-button-next:not(.swiper-button-disabled):hover {
  opacity: 0.88;
}

.article-body__carousel-overlay-nav .swiper-button-disabled {
  opacity: 0.35;
}

/**
 * Gallery lightbox only: one maximize control over the slide stack (position set in JS from active image slide).
 */
.article-body__carousel-overlay-nav .article-body__carousel-lightbox-image-maximize {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.article-body__carousel-overlay-nav .article-body__carousel-lightbox-image-maximize:focus-visible {
  outline: 3px solid #0a60ff;
  outline-offset: 2px;
}

.article-body__carousel-overlay-nav .article-body__carousel-lightbox-image-maximize[hidden] {
  display: none !important;
}

/**
 * Teaser overlays — Figma Story-Lab card / node 26:1580:
 * primary action = 48px white circle + 16px glyph, bottom-left;
 * expand = 48px hit, 24px icon, bottom-right (no filled chip behind both).
 */
.article-body__media-lightbox-teaser {
  --article-teaser-corner-inset: var(--article-teaser-corner-inset-float);
  --article-teaser-primary-size: 48px;
  --article-teaser-primary-glyph: 16px;
  --article-teaser-expand-hit: 48px;
  --article-teaser-expand-glyph: 48px;
}

.article-body__teaser-corner-primary {
  position: absolute;
  left: var(--article-teaser-corner-inset);
  bottom: var(--article-teaser-corner-inset);
  width: var(--article-teaser-primary-size);
  height: var(--article-teaser-primary-size);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.article-body__teaser-corner-primary-icon {
  width: var(--article-teaser-primary-glyph);
  height: var(--article-teaser-primary-glyph);
  display: block;
  object-fit: contain;
}

.article-body__teaser-corner-expand {
  position: absolute;
  right: var(--article-teaser-corner-inset);
  bottom: var(--article-teaser-corner-inset);
  width: var(--article-teaser-expand-hit);
  height: var(--article-teaser-expand-hit);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.article-body__teaser-corner-expand-icon {
  width: var(--article-teaser-expand-glyph);
  height: var(--article-teaser-expand-glyph);
  display: block;
  object-fit: contain;
}

.article-body__carousel-inline-maximize {
  position: absolute;
  z-index: 3;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.article-body__carousel-inline-maximize:focus-visible {
  outline: 3px solid #0a60ff;
  outline-offset: 2px;
}

.article-body__teaser-corner-expand--inline-maximize {
  position: static;
  width: 48px;
  height: 48px;
}

.article-body__teaser-corner-expand-icon--inline-maximize {
  width: 24px;
  height: 24px;
}

/**
 * Stacked over carousel dialog: dark backdrop + same fixed close; image only, bounded by viewport.
 * Defines modal inset vars so shared `.article-body__carousel-dialog-close` positions correctly (same as gallery dialog).
 */
.article-body__carousel-image-fs-dialog {
  --article-body-modal-close-inset: 16px;
}

.article-body__carousel-image-fs-dialog:not([open]) {
  display: none;
}

.article-body__carousel-image-fs-dialog[open] {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100vw;
  max-width: 100vw;
  height: 100vh;
  max-height: 100vh;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  overflow: hidden;
}

.article-body__carousel-image-fs-dialog::backdrop {
  background: rgba(10, 10, 18, 0.72);
}

.article-body__carousel-image-fs-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 0;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

.article-body__carousel-image-fs-img {
  display: block;
  max-width: 100vw;
  width: auto;
  height: auto;
  max-height: 100vh;
  object-fit: contain;
}

.article-body__carousel-image-fs-dialog .article-body__carousel-dialog-close {
  z-index: 2;
}

/* —— Image / YouTube / Brightcove lightboxes —— */
.article-body__media-lightbox {
  margin-top: var(--article-float-margin-block);
  margin-bottom: var(--article-float-margin-block);
}

/**
 * Lightbox / small teaser floats (Figma 26:1541): narrow; left = text wraps inside ~792px;
 * right = sits in the rail gutter past the text column (max-width keeps teaser out of prose).
 */
.article-body .article-body__media-lightbox.article-body__image--left {
  float: left;
  clear: none;
  width: auto;
  max-width: min(33rem, calc(var(--article-text-max) * 0.5));
  margin-top: var(--article-float-margin-block);
  margin-bottom: var(--article-float-margin-block);
  margin-right: var(--article-float-text-gap);
  margin-left: 0;
}

.article-body .article-body__media-lightbox.article-body__image--right {
  float: right;
  clear: none;
  width: auto;
  max-width: min(33rem, calc(var(--article-text-max) * 0.5));
  margin-top: var(--article-float-margin-block);
  margin-bottom: var(--article-float-margin-block);
  margin-left: var(--article-float-text-gap);
  margin-right: 0;
}

.article-body .article-body__media-lightbox.article-body__image--center {
  float: none;
  clear: both;
  width: 100%;
  max-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.article-body .article-body__media-lightbox.article-body__image--center .article-body__media-lightbox-teaser {
  --article-teaser-corner-inset: var(--article-teaser-corner-inset-center);
}

.article-body__media-lightbox-teaser {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0;
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  background: #fff;
  position: relative;
  text-align: left;
}

.article-body__media-lightbox-teaser:hover {
  border-color: #c5c5d5;
}

.article-body__media-lightbox-teaser:focus-visible {
  outline: 3px solid #0a60ff;
  outline-offset: 2px;
}

.article-body__media-lightbox-teaser > img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}

.article-body__media-lightbox-teaser:hover .article-body__teaser-corner-primary {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
}

.article-body__teaser-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.article-body__media-lightbox-full-img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  max-height: min(78vh, 720px);
  object-fit: contain;
  margin: 0 auto;
}

.article-body__media-lightbox-youtube {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #0f0f12;
  overflow: hidden;
}

.article-body__media-lightbox-youtube iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-body__media-lightbox-caption {
  margin: 0.65rem 0 0;
  font-size: calc(var(--body-font-size) * 0.875);
  text-align: center;
}

/* —— Full-bleed parallax (tail slices grouped in `.article-body__parallax-overlap-shell` server-side) —— */
.article-body.article-body--parallax {
  display: flow-root;
}

.article-body--parallax,
main.main--hero-parallax {
  /** Extra in-flow height under the sticky viewport; longer = more “pin” time while scrolling. */
  --parallax-scroll-height: 125vh;
  /**
   * Must match the scroll spacer (or be slightly larger): it is how far the overlap shell is
   * pulled up. If this is smaller than `--parallax-scroll-height`, the shell stays below the
   * viewport while the image is sticky, so content only starts covering the image late and never
   * fully catches up before the section unsticks.
   */
  --parallax-overlap-pull: var(--parallax-scroll-height);
}

/* Fixed `site-header--overlay`: full-bleed parallax hero starts at viewport top (same idea as home). */
main.main--hero-parallax {
  padding-top: 0;
}

/**
 * In-flow parallax image captions — [Figma 26:1546](https://www.figma.com/design/9qE0CsFb40rsKXgJ5SsM5W/Story-Lab?node-id=26-1546&m=dev):
 * Bold sans / black / centered white bands.
 * Per-line bands: `display: inline` + `box-decoration-break: clone`.
 */
.article-body__parallax-caption-cluster {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 1;
  max-width: min(92vw, 42rem);
  transform: translate(-50%, -50%);
  text-align: center;
  pointer-events: none;
}

.article-body__parallax-caption {
  display: inline;
  margin: 0;
  padding: 0.2em 0.38em;
  font-family: var(--muse-font-family-default);
  font-size: clamp(1.625rem, 4vw, 2.5rem);
  font-weight: 700;
  line-height: 1.72;
  color: #000;
  text-align: center;
  text-wrap: balance;
  background: #fff;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}

/**
 * Article hero parallax title — [Figma 159:1004](https://www.figma.com/design/9qE0CsFb40rsKXgJ5SsM5W/Story-Lab?node-id=159-1004&m=dev):
 * Same horizontal box as `.article-layout__rail`; quote column matches `--article-content-max` (centered like prose).
 * Vertical drift: {@code article-hero-parallax-title.js} sets `--article-hero-parallax-title-lift` = scroll into hero (`max(0,-section.top)` px),
 * so the title moves up at the same rate as page scroll / overlapping content.
 */
.article-hero-parallax {
  --article-hero-parallax-title-lift: 0px;
}

.article-hero-parallax .article-hero-parallax__title-cluster {
  position: absolute;
  left: max(0px, calc(50vw - min(var(--article-shell-max), 100vw) / 2));
  width: min(var(--article-shell-max), 100vw);
  padding-left: clamp(var(--article-gutter), 8.333vw, var(--article-shell-pad-x));
  padding-right: clamp(var(--article-gutter), 8.333vw, var(--article-shell-pad-x));
  bottom: min(
    var(--article-hero-parallax-title-inset-bottom),
    max(1rem, 3vw)
  );
  top: auto;
  right: auto;
  z-index: 1;
  box-sizing: border-box;
  max-width: none;
  text-align: left;
  pointer-events: none;
  transform: translateY(calc(-1 * var(--article-hero-parallax-title-lift)));
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .article-hero-parallax .article-hero-parallax__title-cluster {
    transform: none;
    will-change: auto;
  }
}

.article-hero-parallax .article-hero-parallax__title {
  display: block;
  margin: 0 auto;
  padding: 0;
  max-width: var(--article-content-max);
  font-family: var(--muse-font-family-default);
  font-feature-settings: "liga" 0, "clig" 0;
  font-size: 10rem;
  font-style: normal;
  font-weight: var(--muse-font-weight-regular);
  line-height: 1;
  color: #fff;
  text-align: left;
  text-wrap: balance;
  background: transparent;
}

.article-body__parallax.article-body__parallax--breakout {
  position: relative;
  z-index: 0;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

/* Full-bleed *video* parallax: true edge-to-edge width (dynamic viewport); snap into view while scrolling. */
@supports (width: 100dvw) {
  .article-body__parallax.article-body__parallax--breakout[data-article-parallax-video] {
    width: 100dvw;
    max-width: 100dvw;
    margin-left: calc(50% - 50dvw);
    margin-right: calc(50% - 50dvw);
  }
}

html.article-has-parallax-video {
  scroll-snap-type: y proximity;
}

html.article-has-parallax-video .site-footer {
  position: relative;
  z-index: 5;
  scroll-snap-align: none;
  scroll-margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  html.article-has-parallax-video {
    scroll-snap-type: none;
  }
}

.article-body__parallax[data-article-parallax-video] {
  scroll-snap-align: start;
  scroll-snap-stop: normal;
}

.article-body__parallax-sticky {
  position: sticky;
  top: 0;
  overflow: hidden;
  background: #0f0f12;
  box-sizing: border-box;
  width: 100%;
  min-width: 100%;
}

/* Parallax video: sticky viewport fills the screen (unchanged). */
.article-body__parallax[data-article-parallax-video] > .article-body__parallax-sticky,
.article-body__parallax-sticky:has(> .article-body__parallax-brightcove),
.article-body__parallax-sticky:has(> .article-body__parallax-youtube) {
  height: 100dvh;
  max-height: 100dvh;
  aspect-ratio: auto;
}

/* In-body parallax image: full width, height from aspect ratio (default 2.39:1). */
.article-body__parallax-sticky:has(> .article-body__parallax-img) {
  height: auto;
  max-height: none;
  aspect-ratio: var(--article-parallax-image-aspect-w) / var(--article-parallax-image-aspect-h);
}

/* Hero parallax image: full viewport like video so title overlay stays above the fold. */
.article-hero-parallax > .article-body__parallax-sticky:has(> .article-body__parallax-img) {
  height: 100dvh;
  max-height: 100dvh;
  aspect-ratio: auto;
}

.article-body__parallax-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.06);
  transform-origin: center center;
}

/* Full-bleed parallax Brightcove (same fill idea as homepage hero slides). */
.article-body__parallax-brightcove {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.article-body__parallax-brightcove video-js.video-js {
  position: absolute !important;
  inset: 0 !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  min-width: 0;
  transform: scale(1.06);
  transform-origin: center center;
}

.article-body__parallax-brightcove video-js.video-js.vjs-controls-enabled {
  transform: none;
}

.article-body__parallax-brightcove .video-js {
  padding-top: 0 !important;
}

.article-body__parallax-brightcove .video-js .vjs-tech {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
}

.article-body__parallax-brightcove .vjs-poster {
  display: none !important;
}

.article-body__parallax-brightcove .vjs-big-play-button {
  display: none !important;
}

.article-body__parallax-youtube {
  position: absolute;
  inset: 0;
  background: #0f0f12;
}

.article-body__parallax-youtube iframe {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100vw;
  height: 100vh;
  transform: translate(-50%, -50%);
  border: 0;
}

.article-body__youtube {
  clear: both;
  margin: 1.25rem 0;
  width: 100%;
}

.article-body__youtube-frame {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  background: #0f0f12;
  overflow: hidden;
}

.article-body__youtube-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.article-body__parallax-scroll {
  height: var(--parallax-scroll-height);
  pointer-events: none;
}

.article-body.article-body--parallax > .article-body__parallax + .article-body__parallax-overlap-shell,
main.main--hero-parallax > .article-hero-parallax-overlap-shell {
  margin-top: calc(-1 * var(--parallax-overlap-pull));
  position: relative;
  z-index: 2;
  display: flow-root;
  background: transparent;
  isolation: isolate;
}
.article-body.article-body--parallax > .article-body__parallax + .article-body__parallax-overlap-shell {
  padding-top: 5rem;
}

/**
 * Full-viewport backdrop under overlap content: the shell stays rail-width for floats /
 * max-width prose, but video must not show through the gutters beside the column.
 * Opaque page fill through most of the shell, then fades out below the overlap — assumes enough
 * in-flow content to cover the tail.
 */
.article-body__parallax-overlap-shell::before,
main.main--hero-parallax > .article-hero-parallax-overlap-shell::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  z-index: -1;
  width: 100vw;
  transform: translateX(-50%);
  pointer-events: none;
  background-color: transparent;
  background-image: linear-gradient(
    to bottom,
    var(--bg) 0%,
    var(--bg) var(--article-parallax-overlap-fade-start),
    transparent 100%
  );
  background-repeat: no-repeat;
}

@supports (width: 100dvw) {
  .article-body__parallax-overlap-shell::before,
  main.main--hero-parallax > .article-hero-parallax-overlap-shell::before {
    width: 100dvw;
  }
}

main.main--hero-parallax > .article-hero-parallax-overlap-shell > * + * {
  margin-top: 1rem;
}

.article-body__parallax-overlap-shell .article-layout__rail > .muted,
main.main--hero-parallax > .article-hero-parallax-overlap-shell .article-layout__rail > .muted {
  max-width: var(--article-content-max);
}