/* =============================================================
   BBI - Home page
   assets/css/home.css

   Maps the Figma frame `BBI_Homepage_Desktop` to CSS.

   Layout reference for the home (Figma frame
   1728x7834):
     y=0    | MENU / logo / CHARTS (80px bar; chrome top 30px, sides 40px)
     y=120  | Hero image (1648×791) — 40px below header, 40px L/R gutter
     y=951  | Ticker — 40px below hero image
     y=1199 | LATEST NEWS section heading + 4 article rows
     y=3955 | "LOAD MORE" between two thin horizontal rules
     y=4155 | WOMI section (banner + logo + paragraph)
     y=5245 | GLOBAL NEWS heading + 3 RSS cards
     y=5935 | YouTube Shorts + Videos with side arrows
     y=7419 | Footer (light-gray, 415 tall)
   ============================================================= */

/* Home has no intro overlay: main + hero copy must not wait for
   intro-animation.js (animations.css keeps .bbi-main hidden until
   .is-visible on other templates). */
body.home .bbi-main {
  opacity: 1;
  pointer-events: auto;
}

body.home .bbi-hero__tag,
body.home .bbi-hero__title,
body.home .bbi-hero__author {
  opacity: 1;
  transform: none;
  transition: none;
}

html.bbi-home-hero-pending body.home:not(.has-home-scroll-hero) .bbi-hero__tag,
html.bbi-home-hero-pending body.home:not(.has-home-scroll-hero) .bbi-hero__title,
html.bbi-home-hero-pending body.home:not(.has-home-scroll-hero) .bbi-hero__author {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
  transition: none;
}

/*
 * Scroll morph: copy stays in the hero frame (absolute) while home-hero.js applies a
 * viewport-lock translateY so tag/title/author do not jump when the frame glides up.
 * No position:fixed handoff — that was causing the end-of-animation downward shift.
 */
html.bbi-home-hero-pending body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__inner,
html.bbi-home-hero-complete:not(.bbi-home-hero-copy-released)
  body.has-home-scroll-hero
  .bbi-main
  > .bbi-hero
  .bbi-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  width: auto;
  height: auto;
  max-width: none;
  min-height: 0;
  aspect-ratio: auto;
  box-sizing: border-box;
  pointer-events: none;
  will-change: transform;
}

html.bbi-home-hero-copy-released body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__inner {
  transform: none !important;
  will-change: auto;
}

/* Post-animation: copy back in the hero frame (visible, final overlay layout). */
html.bbi-home-hero-copy-released body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__stack,
html.bbi-home-hero-copy-released body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__tag,
html.bbi-home-hero-copy-released body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__title,
html.bbi-home-hero-copy-released body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__author,
html.bbi-home-hero-complete.bbi-home-hero-copy-released body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__tag,
html.bbi-home-hero-complete.bbi-home-hero-copy-released body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__title,
html.bbi-home-hero-complete.bbi-home-hero-copy-released body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__author {
  --bbi-hero-copy-reveal: 1;
  opacity: 1;
  visibility: visible;
  transform: none !important;
  transition: none;
  pointer-events: auto;
}

html.bbi-home-hero-copy-released body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__stack {
  pointer-events: none;
}

html.bbi-home-hero-pending body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__stack {
  pointer-events: none;
}

/* Reveal in sync with scroll (--bbi-home-hero-p); no CSS transition on opacity. */
html.bbi-home-hero-pending body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__tag {
  --bbi-hero-copy-reveal: clamp(0, (var(--bbi-home-hero-p, 0) - 0.26) / 0.24, 1);
  opacity: var(--bbi-hero-copy-reveal);
  visibility: visible;
  transform: translate3d(0, calc((1 - var(--bbi-hero-copy-reveal)) * 14px), 0);
  transition: none;
  pointer-events: auto;
}

html.bbi-home-hero-pending body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__title {
  --bbi-hero-copy-reveal: clamp(0, (var(--bbi-home-hero-p, 0) - 0.4) / 0.26, 1);
  opacity: var(--bbi-hero-copy-reveal);
  visibility: visible;
  transform: translate3d(0, calc((1 - var(--bbi-hero-copy-reveal)) * 18px), 0);
  transition: none;
  pointer-events: auto;
}

html.bbi-home-hero-pending body.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__author {
  --bbi-hero-copy-reveal: clamp(0, (var(--bbi-home-hero-p, 0) - 0.52) / 0.24, 1);
  opacity: var(--bbi-hero-copy-reveal);
  visibility: visible;
  transform: translate3d(0, calc((1 - var(--bbi-hero-copy-reveal)) * 12px), 0);
  transition: none;
  pointer-events: auto;
}

html.bbi-home-hero-complete:not(.bbi-home-hero-copy-released)
  body.has-home-scroll-hero
  .bbi-main
  > .bbi-hero
  .bbi-hero__tag,
html.bbi-home-hero-complete:not(.bbi-home-hero-copy-released)
  body.has-home-scroll-hero
  .bbi-main
  > .bbi-hero
  .bbi-hero__title,
html.bbi-home-hero-complete:not(.bbi-home-hero-copy-released)
  body.has-home-scroll-hero
  .bbi-main
  > .bbi-hero
  .bbi-hero__author {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  pointer-events: auto;
}

html.bbi-home-hero-complete body.home .bbi-hero__tag,
html.bbi-home-hero-complete body.home .bbi-hero__title,
html.bbi-home-hero-complete body.home .bbi-hero__author {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: none;
  transition: none;
}

/* Post-morph: always show hero copy once pending is cleared (fallback if handoff class lags). */
html.bbi-home-hero-complete:not(.bbi-home-hero-pending) body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__stack,
html.bbi-home-hero-complete:not(.bbi-home-hero-pending) body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__tag,
html.bbi-home-hero-complete:not(.bbi-home-hero-pending) body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__title,
html.bbi-home-hero-complete:not(.bbi-home-hero-pending) body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__author {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
  pointer-events: auto;
}

html.bbi-home-hero-complete:not(.bbi-home-hero-pending) body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__stack {
  pointer-events: none;
}

body.home a.bbi-hero__tag {
  transition:
    background-color var(--transition-fast),
    color var(--transition-fast);
}

/* -------------------------------------------------------------
   Home scroll hero — full-width logo (gutter to gutter) morphs into
   header centre on one fixed layer (--bbi-home-hero-p via home-hero.js).
   Pinned hero image is visible from the start and glides up with scroll.
   ------------------------------------------------------------- */

@supports selector(:has(*)) {
  html:has(body.home) {
    scrollbar-gutter: stable;
  }
}

html.bbi-home-hero-scroll-lock,
html.bbi-home-hero-scroll-lock body {
  overflow: hidden;
  overscroll-behavior-y: none;
}

html.bbi-home-hero-scroll-lock body {
  touch-action: none;
}

[data-bbi-home-hero] {
  --bbi-home-hero-p: 0;
  --bbi-home-logo-spacer-h: 12rem;
  box-sizing: border-box;
  width: 100vw;
  max-width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: var(--site-chrome-inline);
}

body.home .site-header {
  position: sticky;
  top: 0;
}

/* MENU / CHARTS stay above the morphing logo. */
html.bbi-home-hero-pending .site-header__col--left,
html.bbi-home-hero-pending .site-header__col--right {
  position: relative;
  z-index: calc(var(--z-sticky) + 12);
}

html.bbi-home-hero-pending .site-header__col--center {
  position: relative;
  z-index: calc(var(--z-sticky) + 6);
}

/* Duplicate header markup hidden — the scroll logo docks here as one element. */
body.home.has-home-scroll-hero
  .site-header__col--center
  > .site-header__brand:not([data-bbi-home-logo]) {
  display: none !important;
}

.site-header__brand--home-docked {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  width: min(
    var(--header-logo-width),
    calc(100vw - (2 * var(--site-chrome-inline)) - var(--header-logo-max-inline))
  );
  max-width: 100%;
  transform: none !important;
  opacity: 1 !important;
  position: static !important;
  left: auto !important;
  top: auto !important;
  margin: 0;
  pointer-events: auto;
}

.site-header__brand--home-docked .bbi-home-hero__logo-matte,
.site-header__brand--home-docked .site-header__logo-matte {
  width: min(
    var(--header-logo-width),
    calc(100vw - (2 * var(--site-chrome-inline)) - var(--header-logo-max-inline))
  );
  height: var(--header-logo-height);
  overflow: hidden;
}

.site-header__brand--home-docked img.bbi-home-hero__logo,
.site-header__brand--home-docked img.site-header__logo {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  object-position: center;
}

.bbi-home-hero--no-motion,
.bbi-home-hero--no-motion * {
  transition: none !important;
}

.bbi-home-hero.bbi-home-hero--js .bbi-home-hero__band {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  padding-block-start: calc(
    var(--hero-gap-after-header) * (1 - var(--bbi-home-hero-p, 0))
  );
  padding-block-end: 0;
  box-sizing: border-box;
  overflow: visible;
}

.bbi-home-hero__band {
  box-sizing: border-box;
  position: relative;
}

/* Flow spacer while the logo is position:fixed during the morph. */
.bbi-home-hero__logo-spacer {
  display: none;
  width: 100%;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  pointer-events: none;
}

/* Spacer + fixed logo only after scroll starts (p > 0). At p = 0 the logo stays in flow. */
.bbi-home-hero.bbi-home-hero--js[data-bbi-home-scrolling="1"] .bbi-home-hero__logo-spacer {
  display: block;
  height: calc(
    var(--bbi-home-logo-spacer-h, 12rem) * (1 - var(--bbi-home-hero-p, 0))
  );
}

.bbi-home-hero__brand {
  display: block;
  width: 100%;
  max-width: none;
  margin: 0;
  text-decoration: none;
  color: var(--color-text);
  box-sizing: border-box;
  pointer-events: none;
}

.bbi-home-hero.bbi-home-hero--js[data-bbi-home-scrolling="1"] .bbi-home-hero__brand--fixed {
  position: fixed;
  left: var(--bbi-home-logo-fix-left, 0);
  top: var(--bbi-home-logo-fix-top, 0);
  width: var(--bbi-home-logo-fix-width, 100%);
  margin: 0;
  z-index: calc(var(--z-sticky) + 8);
  transform-origin: top center;
  transform: translate3d(
      calc(var(--bbi-home-logo-tx-end, 0px) * var(--bbi-home-hero-p, 0)),
      calc(var(--bbi-home-logo-ty-end, 0px) * var(--bbi-home-hero-p, 0)),
      0
    )
    scale(
      calc(
        1
        + (var(--bbi-home-logo-scale-end, 1) - 1) * var(--bbi-home-hero-p, 0)
      )
    );
  opacity: 1;
  will-change: transform;
  backface-visibility: hidden;
}

[data-bbi-home-hero][data-bbi-home-hero-interactive="1"] .bbi-home-hero__brand {
  pointer-events: auto;
}

.bbi-home-hero__logo-matte {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none;
  box-sizing: border-box;
  overflow: visible;
}

html.bbi-home-hero-pending .bbi-home-hero__brand {
  line-height: 0;
}

html.bbi-home-hero-pending [data-bbi-home-hero] .bbi-home-hero__logo-matte,
html.bbi-home-hero-pending [data-bbi-home-hero] img.bbi-home-hero__logo {
  width: 100%;
  max-width: none;
}

.bbi-home-hero__logo-matte--tablet,
.bbi-home-hero__logo-matte--mobile {
  display: none;
}

.bbi-home-hero__logo-matte--desktop {
  display: flex;
}

img.bbi-home-hero__logo {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
  /* Ease fill/bleed out in the last 20% of the morph so dock matches header matte. */
  --bbi-home-hero-logo-fill-morph-retain: clamp(
    0,
    1 - (var(--bbi-home-hero-p, 0) - 0.8) / 0.2,
    1
  );
  --bbi-home-hero-logo-fill-active: calc(
    1 + (var(--bbi-home-hero-logo-fill-x, 1) - 1) * var(--bbi-home-hero-logo-fill-morph-retain)
  );
  --bbi-home-hero-logo-bleed-shift: calc(
    (var(--bbi-home-hero-logo-bleed-right, 0px) - var(--bbi-home-hero-logo-bleed-left, 0px))
      / 2
      * var(--bbi-home-hero-logo-fill-morph-retain)
  );
  --bbi-home-hero-logo-origin-shift: calc(
    (var(--bbi-home-hero-logo-bleed-left, 0px) - var(--bbi-home-hero-logo-bleed-right, 0px))
      / 2
      * var(--bbi-home-hero-logo-fill-morph-retain)
  );
  transform: translateX(var(--bbi-home-hero-logo-bleed-shift))
    scaleX(var(--bbi-home-hero-logo-fill-active, 1));
  transform-origin: calc(50% + var(--bbi-home-hero-logo-origin-shift)) center;
}

/* Morph target uses header matte rules — drop hero fill scale once docked. */
.site-header__brand--home-docked img.bbi-home-hero__logo {
  transform: none;
}

@media (max-width: 1199px) {
  .bbi-home-hero__logo-matte--desktop {
    display: none;
  }

  .bbi-home-hero__logo-matte--tablet {
    display: flex;
  }
}

@media (max-width: 767px) {
  .bbi-home-hero__logo-matte--tablet {
    display: none;
  }

  .bbi-home-hero__logo-matte--mobile {
    display: flex;
  }

}

/*
 * Pinned hero image glides up with the logo morph; overlay copy uses a frame
 * translate lock in home-hero.js (see .bbi-hero__inner above).
 * Stage 1 (p=0): image is full-bleed (no side gutters). On scroll, padding eases
 * into the standard hero gutter rail (--hero-gutter).
 */
body.home.has-home-scroll-hero {
  /* Eases to 0 with --bbi-home-hero-p so the hero image meets the chrome divider. */
  --bbi-hero-gap-below-divider: calc(
    var(--bbi-home-logo-hero-gap, 40px) * (1 - var(--bbi-home-hero-p, 0))
  );
}

html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-main > .bbi-hero {
  --bbi-home-hero-pad-start: 0px;
  --bbi-home-hero-pad-end: var(--hero-gutter, 40px);
  /* Ease off full-bleed width in the last ~12% of scroll so pending→complete does not jump. */
  --bbi-home-use-breakout: clamp(0, (0.88 - var(--bbi-home-hero-p, 0)) / 0.88, 1);
  width: calc(
    var(--bbi-home-use-breakout) * 100vw
    + (1 - var(--bbi-home-use-breakout)) * 100%
  );
  max-width: calc(
    var(--bbi-home-use-breakout) * 100vw
    + (1 - var(--bbi-home-use-breakout)) * 100%
  );
  margin-inline: calc(var(--bbi-home-use-breakout) * (50% - 50vw));
  margin-block-start: var(--bbi-hero-gap-below-divider);
  padding-inline: calc(
    var(--bbi-home-hero-pad-start) * (1 - var(--bbi-home-hero-p, 0))
    + var(--bbi-home-hero-pad-end) * var(--bbi-home-hero-p, 0)
  );
  opacity: 1;
  transform: none;
  box-sizing: border-box;
  will-change: margin, padding, width;
}

html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__frame {
  width: 100%;
  max-width: calc(
    1648px + (1 - var(--bbi-home-hero-p, 0)) * (100% - min(100%, 1648px))
  );
  margin-inline: auto;
  will-change: max-width;
}

/* Match pending hero at p = 1 so removing .bbi-home-hero-pending does not reflow the image. */
html.bbi-home-hero-complete body.home.has-home-scroll-hero .bbi-main > .bbi-hero {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  margin-block-start: var(--bbi-hero-gap-below-divider, 0);
  padding-inline: var(--hero-gutter, 40px);
  transform: none;
  box-sizing: border-box;
}

html.bbi-home-hero-complete body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__frame {
  width: 100%;
  max-width: min(1648px, 100%);
  margin-inline: auto;
}

html.bbi-home-hero-pending body.home:not(.has-home-scroll-hero) .bbi-hero__stack {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: none;
}

html.bbi-home-hero-complete body.home .bbi-hero__stack {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-bbi-home-hero] {
    --bbi-home-hero-p: 1 !important;
  }

  body.home.has-home-scroll-hero
    .site-header__col--center
    > .site-header__brand:not([data-bbi-home-logo]) {
    display: inline-flex !important;
  }

  [data-bbi-home-hero] {
    display: none !important;
  }

  html.bbi-home-hero-copy-released body.home .bbi-hero,
  body.home .bbi-hero,
  body.home .bbi-hero__stack,
  body.home .bbi-hero__tag,
  body.home .bbi-hero__title,
  body.home .bbi-hero__author {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    margin-block-start: 0 !important;
  }
}

@media (scripting: none) {
  .bbi-intro {
    display: none;
  }

  .bbi-main {
    opacity: 1;
    pointer-events: auto;
  }
}

/* -------------------------------------------------------------
   1. Hero

   Spacing (Figma 5:118, 1728 artboard @ 40px gutter):
     - 40px from header bottom to hero image top (--hero-gap-after-header)
     - Hero image block: 40px inset left/right (--hero-gutter = --site-chrome-inline)
     - 40px from hero image bottom to ticker (--hero-gap-before-ticker)
   ------------------------------------------------------------- */

.bbi-hero {
  position: relative;
  padding-inline: var(--hero-gutter);
  padding-block-start: 0;
  padding-block-end: var(--hero-gap-before-ticker);
  margin-block-start: var(--hero-gap-after-header);
  background-color: var(--color-background);
  box-sizing: border-box;
}


.bbi-hero__frame {
  position: relative;
  width: 1648px;
  height: 705px;
  max-width: 100%;
  margin-inline: auto;
  min-height: 360px;
  overflow: hidden;
  background-color: var(--color-text);
  color: var(--color-background);
  container-type: size;
  container-name: bbi-hero;
}

.bbi-hero__image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position set per-post via inline style (thumbnail focal point). */
}

.bbi-hero__shade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: var(--bbi-hero-shade-top, 100%);
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    182.32deg,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.5) 100%
  );
  /* Feather the top cut so no hard box edge (subpixel-safe during scroll morph). */
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--bbi-hero-shade-feather, 36px)
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 var(--bbi-hero-shade-feather, 36px)
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.bbi-hero__overlay-link {
  position: absolute;
  inset: 0;
  z-index: 2;
  text-indent: -9999px;
  background: transparent;
}

.bbi-hero__inner {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

/* Default: absolute Figma offsets (category / non-scroll home). */
.bbi-hero__stack {
  position: absolute;
  inset: 0;
  width: 100%;
  pointer-events: none;
}

/*
 * Home scroll hero (all breakpoints): flex stack keeps tag → title at 20px
 * even when the headline wraps — absolute bottom offsets leave 70px+ gaps.
 * Same layout during + after the morph so copy does not jump on complete.
 */
body.has-home-scroll-hero .bbi-hero__stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 20px;
  padding-block-end: 60px;
  padding-inline: var(--space-6);
  box-sizing: border-box;
}

body.has-home-scroll-hero .bbi-hero__tag,
body.has-home-scroll-hero .bbi-hero__title,
body.has-home-scroll-hero .bbi-hero__author {
  position: static;
  bottom: auto;
  top: auto;
  left: auto;
  right: auto;
  margin: 0;
}

body.has-home-scroll-hero .bbi-hero__tag {
  align-self: center;
}

.bbi-hero__tag,
.bbi-hero__title,
.bbi-hero__author {
  pointer-events: auto;
}

/* TOP STORY / category pill — fill #00FF99, text black, Eroika 12px / 20% tracking */
.bbi-hero__tag {
  position: absolute;
  bottom: 285px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  min-width: 0;
  height: auto;
  padding-block: 7px;
  /* Balance 0.2em letter-spacing (trailing track) so glyphs sit optically centred. */
  padding-inline-start: calc(7px + 0.2em);
  padding-inline-end: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  box-sizing: border-box;
  /* Strict typography requested */
  font-family: var(--font-slab) !important;
  font-size: 12px !important;
  font-weight: 400 !important;
  font-style: normal !important;
  line-height: 100% !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase;
  text-align: center;
  color: var(--color-text);
  background-color: var(--color-accent-green);
  border-radius: 0;
  filter: var(--bbi-chamfer-floating-shadow);
  -webkit-clip-path: var(--bbi-clip-path-chamfer-4);
  clip-path: var(--bbi-clip-path-chamfer-4);
}

a.bbi-hero__tag {
  text-decoration: none;
  color: var(--color-text);
}

.bbi-hero__title {
  position: absolute;
  bottom: 115px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  text-wrap: balance;
  font-family: var(--font-display) !important;
  /* Fluid scale between desktop max-width (1728) and the breakpoint at
     1200px so the hero copy never feels disproportionately huge in the
     1200–1440 “mid-desktop” range. */
  font-size: clamp(36px, 3.5vw, 50px) !important;
  font-weight: 700 !important;
  line-height: 100% !important;
  letter-spacing: 0% !important;
  text-transform: uppercase;
  width: 100%;
  max-width: 1092px;
  padding-inline: var(--space-4);
  box-sizing: border-box;
  color: var(--color-background);
}

.bbi-hero__title a {
  color: inherit;
  text-decoration: none;
}

.bbi-hero__author {
  position: absolute;
  bottom: 60px;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 325px;
  padding-inline: var(--space-4);
  box-sizing: border-box;
  font-family: var(--font-mono);
  font-size: var(--bbi-card-author-size);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--letter-spacing-mono);
  text-transform: uppercase;
  color: var(--color-background);
}

.bbi-hero__author a {
  color: inherit;
  text-decoration: none;
}

/* Cascade-in when .bbi-main.is-visible (category intro — not home scroll hero). */
body:not(.has-home-scroll-hero) .bbi-hero__tag,
body:not(.has-home-scroll-hero) .bbi-hero__title,
body:not(.has-home-scroll-hero) .bbi-hero__author {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 700ms var(--easing-standard),
    transform 700ms var(--easing-standard);
}

body:not(.has-home-scroll-hero) .bbi-main.is-visible .bbi-hero__tag,
body:not(.has-home-scroll-hero) .bbi-main.is-visible .bbi-hero__title,
body:not(.has-home-scroll-hero) .bbi-main.is-visible .bbi-hero__author {
  opacity: 1;
  transform: translateY(0);
}

body:not(.has-home-scroll-hero) .bbi-main.is-visible .bbi-hero__tag {
  transition-delay: 150ms;
}

body:not(.has-home-scroll-hero) .bbi-main.is-visible .bbi-hero__title {
  transition-delay: 400ms;
}

body:not(.has-home-scroll-hero) .bbi-main.is-visible .bbi-hero__author {
  transition-delay: 750ms;
}

@media (prefers-reduced-motion: reduce) {

  .bbi-hero__tag,
  .bbi-hero__title,
  .bbi-hero__author {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* -------------------------------------------------------------
   2. Latest News section

   Figma (`Desktop_ArtcileV1` instances at y=1299/1958/2617/3276):
     - Section heading at y=1199, 40px gutter (matches container).
     - Each article row = 1648x619.
         Text column  : x=0,    width=464 (28.2% of 1648).
         Gap          : 92px    (5.6% of 1648).
         Image column : x=556,  width=1092, height=619 (~1092/619).
     - Text block sits at the TOP of the row (Figma inset top=7.59%
       ~ 47px) with category pill, title and byline.
     - Rows are spaced ~40px apart (y diff between rows = 659,
       row height = 619 -> 40px gap).
   ------------------------------------------------------------- */

.bbi-section-latest {
  padding-top: 100px;
  padding-bottom: 0;
}

.bbi-section-latest .bbi-section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  /* Fluid heading: 36px on a 1024 vw, 50px on a 1440+ vw. */
  font-size: clamp(36px, 3.5vw, 50px);
  line-height: 100%;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.bbi-section-latest__list {
  --stack-gap: var(--space-10);
  /* Figma row-to-row gap = 40px */
}

.bbi-card--latest {
  display: grid;
  grid-template-columns: minmax(0, 464px) minmax(0, 1092px);
  column-gap: var(--latest-news-text-image-gap);
  align-items: stretch;
  background: transparent;
}

.bbi-card--latest .bbi-card__body {
  position: relative;
  padding: 0 0 var(--space-12) 0;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
}

.bbi-card--latest .bbi-category-label {
  width: auto;
  min-width: 0;
  height: auto;
  padding: 7px;
  border-radius: 0;
  background-color: var(--color-black);
  color: var(--color-white);
  font-family: var(--font-slab);
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0.2em;
  text-align: center;
}

.bbi-card--latest .bbi-card__media {
  width: 1092px;
  max-width: 100%;
  aspect-ratio: 1092 / 619;
}

.bbi-card--latest .bbi-card__media img {
  transition: none;
  transform: none;
}

.bbi-card--latest:hover .bbi-card__media img,
.bbi-card--latest:focus-within .bbi-card__media img {
  transform: none;
}

.bbi-card--latest .bbi-card__title {
  font-family: var(--type-latest-news-title-font);
  font-size: var(--type-latest-news-title-size);
  font-weight: var(--type-latest-news-title-weight);
  font-style: normal;
  font-synthesis: none;
  text-transform: none;
  letter-spacing: 0;
  line-height: var(--type-latest-news-title-line-height);
  margin-top: 20px;
}

/* Leading on the heading; link inherits so wrapped lines are not crushed. */
.bbi-card--latest .bbi-card__title a {
  color: inherit;
  text-decoration: none;
  line-height: inherit;
}

.bbi-card--latest .bbi-card__meta {
  font-family: var(--font-mono);
  font-size: var(--bbi-card-author-size);
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-byline);
  margin-top: 10px;
}

/* Desktop + tablet — floating pill with 4 corner chamfers. */
@media (min-width: 768px) {
  .bbi-card--latest .bbi-category-label {
    position: relative;
    z-index: var(--z-base);
    filter: var(--bbi-chamfer-floating-shadow);
    -webkit-clip-path: var(--bbi-clip-path-chamfer-4);
    clip-path: var(--bbi-clip-path-chamfer-4);
  }
}

/* Mid-desktop tight zone (1200–1399px): the desktop layout was sized
   for a 1728 artboard. Between 1200 and 1399 the gap (92px) eats too
   much of a 1120px content area. Shrink the gap proportionally without
   collapsing to the tablet 32fr/66fr split (which would change the
   visual rhythm). */
@media (min-width: 1200px) and (max-width: 1399px) {
  .bbi-card--latest {
    column-gap: clamp(40px, 5vw, 92px);
  }
}

/* Tablet — Figma `BBI_Homepage_Tab` (Tab_BigArticle 944×350):
   text column = 32% (302/944), image column = 66% (623/944), small
   gap. Title shrinks to 18px (--font-size-xl on tablet token). */
@media (max-width: 1199px) {
  .bbi-section-latest {
    padding-top: 78px;
  }

  .bbi-section-latest .bbi-section-heading {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
  }

  .bbi-section-latest__list {
    --stack-gap: 30px; /* Figma tablet: 380 - 350 row delta */
  }

  .bbi-card--latest {
    grid-template-columns: minmax(0, 32fr) minmax(0, 66fr);
    gap: var(--space-4);
    align-items: stretch;
  }

  .bbi-card--latest .bbi-card__body {
    padding: var(--space-12) 0 0;
    justify-content: flex-start;
  }

  .bbi-card--latest .bbi-card__title {
    font-size: 18px;
    margin-top: 20px;
  }

  .bbi-card--latest .bbi-card__media {
    width: auto;
    aspect-ratio: 623 / 350;
  }
}

/* Mobile — Figma `BBI_Homepage_Mobile` (Mobile_BigArticle 362×335).
   Cards stack vertically and reorder via `display: contents` on the
   body so the visual sequence is: pill → image → title → byline. */
@media (max-width: 767px) {
  .bbi-section-latest {
    padding-top: var(--space-20); /* 80px — live ticker → Latest News */
    padding-bottom: 0;
  }

  .bbi-section-latest .bbi-section-heading {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
  }

  .bbi-section-latest__list {
    --stack-gap: 40px; /* Figma mobile: 1430 - 1055 - 335 = 40 */
  }

  .bbi-card--latest {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .bbi-card--latest .bbi-card__body {
    display: contents;
  }

  .bbi-card--latest .bbi-category-label {
    order: 1;
    align-self: flex-start;
    margin-bottom: 10px; /* 10px gap before featured image */
    font-size: 10px;
    position: relative;
    z-index: var(--z-base);
    border-radius: 0;
    /* Floating pill — drop-shadow follows chamfered shape (box-shadow does not). */
    filter: var(--bbi-chamfer-floating-shadow);
    -webkit-clip-path: var(--bbi-clip-path-chamfer-4);
    clip-path: var(--bbi-clip-path-chamfer-4);
  }

  .bbi-card--latest .bbi-card__media {
    order: 2;
    margin-top: 0;
    width: 100%;
    aspect-ratio: 362 / 212;
  }

  .bbi-card--latest .bbi-card__title {
    order: 3;
    font-size: 20px;
    /* Figma mobile: 20px between thumbnail and title (not desktop 92px gap). */
    margin-top: 20px;
  }

  .bbi-card--latest .bbi-card__meta {
    order: 4;
    margin-top: 10px;
  }
}

/* "Load More" button styled as a text label between two thin
   horizontal rules — matches Figma 5:129 / 5:130 / 5:131. */
.bbi-loadmore {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  width: 100%;
  margin: 88px 0 100px;
  padding: 0;
  background: transparent;
  border: 0;
  border-block: 1px solid var(--color-text);
  height: 80px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
  line-height: 100%;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
  color: var(--color-text);
  transition: color var(--transition-fast), background-color var(--transition-fast);
}

.bbi-loadmore:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Tablet — Figma `BBI_Homepage_Tab`: load more rules y=3332 / 3386
   (54px tall), 14px Azeret Mono tracking 2.8px (0.2em). */
@media (max-width: 1199px) {
  .bbi-loadmore {
    height: 54px;
    margin: 60px 0 60px;
    font-size: 14px;
  }
}

/* Mobile — Figma `BBI_Homepage_Mobile`: load more rules y=2950 / 2998
   (48px tall), 16px Azeret Mono tracking 3.2px. */
@media (max-width: 767px) {
  .bbi-loadmore {
    height: 48px;
    margin: 40px 0 0; /* gap to WoMI is on .bbi-section-womi margin-top */
    font-size: 16px;
  }
}

/* -------------------------------------------------------------
   3. WOMI section

   Figma (`Group 332` 5:120 in `BBI_Homepage_Desktop`):
     - Full-bleed banner: 1728x804, x=0  y=4155.
     - Row of content under the banner:
         Logo "image 20" (397x131) at x=40, y=4989.
         Description text (675 wide) at x=1013, y=5014.
         "CHECK OUT WOMI" arrow link at x=1013, y=5105.
       i.e. the LOGO sits at the far LEFT (x=40) and the
       DESCRIPTION block sits at the far RIGHT (x=1013, the
       last 41% of the 1648-wide content area), with a large
       (~576px) empty gap between them. The text block ends
       flush against the right gutter (x=1688). Modelled below
       with a flex row that pins the logo to start and the
       text block to end.
   ------------------------------------------------------------- */

.bbi-section-womi {
  padding: 0;
  margin-block: 0;
}

/* No load-more control: preserve the 100px gap that the button’s bottom margin provides. */
.bbi-section-latest--no-load-more + .bbi-section-womi {
  margin-top: 100px;
}

.bbi-womi__banner {
  position: relative;
  width: 100%;
  aspect-ratio: 1728 / 804;
  overflow: hidden;
  background-color: var(--color-gray-100);
}

/* Tablet — Figma banner crops to 1026×804 (≈ 1.276 ratio). */
@media (max-width: 1199px) {
  .bbi-womi__banner {
    aspect-ratio: 1026 / 804;
  }
}

/* Mobile — Figma banner crops to portrait 404×531 (≈ 0.76 ratio). */
@media (max-width: 767px) {
  .bbi-womi__banner {
    aspect-ratio: 404 / 531;
  }
}

.bbi-womi__banner img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* object-position set per-banner via inline style (theme options focal point). */
}

.bbi-womi__row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: clamp(40px, 8vw, 576px);
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
}

.bbi-womi__col--logo {
  display: flex;
  flex: 0 0 auto;
  align-items: flex-start;
  justify-content: flex-start;
  max-width: 397px;
  margin-top: 30px;
  /* Figma image 20 width */
}

.bbi-womi__col--logo img,
.bbi-womi__logo {
  width: 100%;
  max-width: 397px;
  height: auto;
  display: block;
}

.bbi-womi__col--text {
  display: flex;
  flex: 0 1 675px;
  /* Figma description block width */
  flex-direction: column;
  gap: var(--space-8);
  align-items: flex-start;
  max-width: 675px;
  margin-top: 55px;
}

@media (min-width: 1200px) {
  .bbi-womi__col--text {
    flex: 0 0 675px;
    margin-inline-start: auto;
    box-sizing: border-box;
    /* Nudge copy toward the gutter; paragraph + CTA move together. */
    padding-inline-start: 12px;
  }
}

.bbi-womi__description {
  font-family: var(--type-womi-body-font);
  font-weight: var(--type-womi-body-weight);
  font-style: normal;
  font-size: var(--type-womi-body-size);
  line-height: var(--type-womi-body-line-height);
  letter-spacing: 0;
  color: var(--color-text);
  margin: 0;
}

.bbi-womi__cta {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  font-family: var(--font-mono);
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  line-height: 140%;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: none;
  transition: color var(--transition-fast);
  align-self: flex-start;
  min-height: auto;
}

.bbi-womi__cta::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.0078125 0.5H9.00781V9.15385' stroke='black'/%3E%3Cpath d='M9.00736 0.5L0.353516 9.15385' stroke='black'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  transform: none;
  transition: transform var(--transition-fast);
}

.bbi-womi__cta:hover::after,
.bbi-womi__cta:focus-visible::after {
  transform: translate(2px, -2px);
}

/* Tablet — Figma `BBI_Homepage_Tab` `Group 332`:
     - Logo `image 20` 397×131 at x=40, y=4340 (≈30px below banner).
     - Description block 462 wide at x=center+10, y=4370.
     - Logo + description sit on a single row with the description
       hugging the right half of the 944 content area. */
@media (max-width: 1199px) {
  .bbi-section-womi {
    margin-top: 60px; /* Figma: load-more rule → banner gap = 120px;
                         50% comes from the latest-news section's own
                         padding-bottom and load-more margin. */
  }

  .bbi-section-latest--no-load-more + .bbi-section-womi {
    margin-top: 100px;
  }

  .bbi-womi__row {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-10);
    padding-block: 30px 60px;
  }

  .bbi-womi__col--logo {
    flex: 0 0 auto;
    max-width: 397px;
    margin-top: 0;
  }

  .bbi-womi__col--logo img,
  .bbi-womi__logo {
    max-width: 320px;
    width: 100%;
  }

  .bbi-womi__col--text {
    flex: 0 1 462px;
    max-width: 462px;
    margin-top: 30px;
    gap: 24px;
  }

  .bbi-womi__description {
    font-size: 14px;
  }

  .bbi-womi__cta {
    font-size: 14px;
    letter-spacing: 0.1em;
  }
}

/* Mobile — Figma `BBI_Homepage_Mobile`:
     - Banner full bleed 404×531.
     - Logo 362 wide at left:20 top:3714 (30px below banner).
     - Description 12px line-height 1.4 at left:20 top:3844.
     - CHECK OUT WOMI 14px tracking 2.8px. */
@media (max-width: 767px) {
  .bbi-section-womi {
    margin-top: var(--space-20); /* 80px — Load more → WoMI banner */
  }

  .bbi-section-latest--no-load-more + .bbi-section-womi {
    margin-top: 100px;
  }

  .bbi-womi__row {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 20px;
    padding-block: 30px 0; /* gap to Global News is on .bbi-section-global margin-top */
  }

  .bbi-womi__col--logo {
    flex: 1 1 auto;
    max-width: 100%;
    margin-top: 0;
  }

  .bbi-womi__col--logo img,
  .bbi-womi__logo {
    max-width: 100%;
    width: 100%;
    height: auto;
  }

  .bbi-womi__col--text {
    flex: 1 1 auto;
    max-width: 100%;
    margin-top: 0;
    gap: 20px;
  }

  .bbi-womi__description {
    font-size: 12px;
    line-height: 1.4;
  }

  .bbi-womi__cta {
    font-size: 14px;
    letter-spacing: 0.2em;
    gap: 30px;
  }
}

/* -------------------------------------------------------------
   4. Global News

   Figma: heading at y=5245, 3 RSS cards (536x470) in a row.
   ------------------------------------------------------------- */

.bbi-section-global {
  padding-block-start: 0;
  padding-block-end: 0;
}

.bbi-section-womi + .bbi-section-global {
  margin-top: 100px;
}

.bbi-section-global .bbi-section-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: clamp(36px, 3.5vw, 50px);
  line-height: 100%;
  letter-spacing: 0;
  margin-bottom: 40px;
}

.bbi-section-global__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.bbi-card--global {
  background: var(--color-background);
  display: flex;
  flex-direction: column;
  text-decoration: none;
  position: relative;
}

.bbi-card--global .bbi-card__media {
  position: relative;
  aspect-ratio: 536 / 340;
  overflow: hidden;
  background-color: var(--color-gray-100);
  margin-top: 18px; /* Push image down so category overlay perfectly */
}

.bbi-card--global .bbi-card__media img {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bbi-card--global .bbi-card__category-wrap {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  background-color: var(--color-text);
  width: auto;
  min-width: 0;
  height: auto;
  padding: 7px;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  -webkit-clip-path: var(--bbi-clip-path-chamfer-top);
  clip-path: var(--bbi-clip-path-chamfer-top);
  transition: background-color var(--transition-fast);
}

.bbi-card--global .bbi-card__category {
  font-family: var(--font-slab);
  font-size: var(--font-size-xs);
  color: var(--color-background);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  transition: color var(--transition-fast);
}

.bbi-card--global .bbi-card__body {
  padding: 20px 0 0;
  gap: 10px;
}

.bbi-card--global .bbi-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0;
  line-height: var(--type-global-news-title-line-height);
  text-transform: none;
  margin: 0;
  min-height: calc(2em * var(--type-global-news-title-line-height));
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-clamp: 2;
  overflow: hidden;
}

.bbi-card--global .bbi-card__title a {
  color: inherit;
  text-decoration: none;
  line-height: inherit;
}

.bbi-card--global .bbi-card__byline {
  font-family: var(--font-mono);
  font-size: var(--bbi-card-author-size);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 100%;
  text-transform: none;
  color: var(--color-byline-soft);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bbi-section-global__empty {
  padding: var(--space-6);
  background: var(--color-gray-50);
  border-left: 4px solid var(--color-accent-blue);
}

/* Tablet — Figma `BBI_Homepage_Tab`: heading 30px, three cards
   (301×305) in a row at left:40 top:4775 with 20px gap. */
@media (max-width: 1199px) {
  .bbi-section-womi + .bbi-section-global {
    margin-top: 60px;
  }

  .bbi-section-global .bbi-section-heading {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-bottom: 30px;
  }

  .bbi-section-global__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
  }

  .bbi-card--global .bbi-card__title {
    font-size: 18px;
  }

  .bbi-card--global .bbi-card__byline {
    letter-spacing: 0.1em;
  }
}

/* Small tablets / iPad portrait: drop to 2 columns. */
@media (max-width: 1023px) {
  .bbi-section-global__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Mobile — Figma `BBI_Homepage_Mobile`: cards stack to 1 column,
   image 362×250, title 20px Neue Haas Medium, byline 12px Azeret Mono.
   Category pill + 9px black stripe match desktop (absolute pill, ::before). */
@media (max-width: 767px) {
  .bbi-section-womi + .bbi-section-global,
  .bbi-section-global {
    margin-top: var(--space-20); /* 80px — WoMI CTA → Global News heading */
  }

  .bbi-section-global .bbi-section-heading {
    font-size: 30px;
    letter-spacing: -0.02em;
    margin-bottom: 40px;
  }

  .bbi-section-global__grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .bbi-card--global .bbi-card__media {
    aspect-ratio: 362 / 250;
  }

  .bbi-card--global .bbi-card__body {
    padding-top: 20px;
    gap: 10px;
  }

  .bbi-card--global .bbi-card__category {
    font-size: 10px;
  }

  .bbi-card--global .bbi-card__title {
    font-size: 20px;
    /* Drop desktop min-height track so the 10px body gap sits under the
       last line of the title, not below empty reserved lines. */
    min-height: 0;
    -webkit-line-clamp: 3;
    line-clamp: 3;
  }

  .bbi-card--global .bbi-card__byline {
    letter-spacing: 0.1em;
    margin-top: 0;
  }
}


/* -------------------------------------------------------------
   5. YouTube Sections (Shorts + Videos)

   Shared mobile/desktop carousel + dividers: yt-sections.css
   (category, single, author, home).
   Home-only: extra footer offset after Global News + YT block.
   ------------------------------------------------------------- */

@media (min-width: 768px) {
  .home .site-footer {
    margin-block-start: 120px;
  }
}


/* -------------------------------------------------------------
   6. Responsive hero tweaks

   Tablet — Figma `BBI_Homepage_Tab`:
     - Hero image 944×957 at x=40, y=100 (almost square portrait).
     - TOP STORY pill at y=749 (≈ 209px from frame bottom).
     - Title at y=798 (≈ 130px from frame bottom), 30px Neue Haas
       Bold uppercase white, centered, max-width 622, line-height 1.2.
     - Byline at y=982 (≈ 75px from frame bottom), 12px Azeret Mono
       white tracking 6px (0.5em) max-width 325.
   ------------------------------------------------------------- */

@media (max-width: 1199px) {
  .bbi-hero {
    margin-block-start: var(--hero-gap-after-header);
    padding-block-end: var(--hero-gap-before-ticker);
  }

  html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__frame {
    max-width: none;
    margin-inline: 0;
  }

  .bbi-hero__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 944 / 957;
    min-height: 720px;
  }

  .bbi-hero__title {
    font-size: 30px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    max-width: 622px;
    padding-inline: 0;
  }

  .bbi-hero__author {
    max-width: 325px;
    letter-spacing: 0.5em;
  }
}

/* Mobile — Figma `BBI_Homepage_Mobile` `Mobile_TopStory_Artcle`:
     - Hero frame 362×651 (portrait, centered with 20px gutter).
     - Text stack `Mobile_TopStory_Text` (270×263) sits at
       top:50.38% of the frame, ending ~9% above the bottom.
     - Stack uses a 30px gap (Figma `gap-30`): TOP STORY pill →
       title (22px Neue Haas Bold uppercase, line-height 1.2,
       max-width 270) → byline (12px Azeret Mono, 0.5em tracking).
   Switch the absolute-positioned desktop stack to a flex column
   so the gap is consistent regardless of how many title lines wrap. */
@media (max-width: 767px) {
  .bbi-hero {
    padding-inline: var(--hero-gutter);
    padding-block-start: 0;
    padding-block-end: var(--hero-gap-before-ticker);
    margin-block-start: var(--hero-gap-after-header);
  }

  html.bbi-home-hero-pending body.home.has-home-scroll-hero .bbi-main > .bbi-hero .bbi-hero__frame {
    max-width: none;
    margin-inline: 0;
  }

  .bbi-hero__frame {
    width: 100%;
    height: auto;
    aspect-ratio: 362 / 651;
    min-height: 560px;
  }

  body.has-home-scroll-hero .bbi-hero__stack {
    gap: 10px;
    padding-block-start: 50%;
    padding-block-end: 9%;
  }

  .bbi-hero__tag {
    padding-block: 7px;
    padding-inline-start: calc(7px + 0.2em);
    padding-inline-end: 7px;
  }

  .bbi-hero__title {
    font-size: 22px !important;
    line-height: 1.2 !important;
    letter-spacing: 0 !important;
    max-width: 270px;
    padding-inline: 0;
    text-align: center;
  }

  body.home .bbi-hero__author {
    font-size: 10px;
    margin-top: 5px;
    max-width: 270px;
    letter-spacing: 0.5em;
  }
}

@media (max-width: 479px) {
  .bbi-hero__frame {
    min-height: 480px;
  }

  body.home .bbi-hero__author {
    font-size: 10px;
    letter-spacing: 0.4em;
  }

  .bbi-hero__title {
    font-size: 30px !important;
    max-width: 100%;
  }
}