/* ==========================================================================
   Footnote promo banner — component by Nishant.
   Layout is exactly as supplied. Three deviations, all in the by-line:
     1. "by" is its own <span> in the markup. The supplied `by <img>` put a
        trailing space inside a flex row that already had gap:.42em, so the
        space rendered on top of the gap.
     2. The logo asset is re-cropped. reunion-logo.svg carried 12% transparent
        padding on its left edge and 33% top AND bottom, so at height:2em the
        visible mark was ~9px tall in a 24px box and shoved right by ~12px.
        Cropped to its true bounds (viewBox 132 131 866 154) it fills its box,
        so a smaller CSS height reads larger.
     3. margin-top raised from .34em to .9em — at a 12px by-line that was 4px
        of separation from a 40px wordmark.

   Fonts use the site's own variables so they track any rename of the Season
   faces. The fn- prefix matters: the site-wide QA-129 rule
   [class*="reunion-"]{font-family:inherit!important} would kill the wordmark.
   ========================================================================== */

/* wrappers ---------------------------------------------------------------- */
.fn-holder   { display: none; }                                    /* reservoir */
.fn-banner-row { padding: 32px 0; border-bottom: 1px solid #E9D4BA; } /* list pages */
.fn-banner-section { margin-bottom: 160px; }  /* = 2 x spacer-xxlarge, the page rhythm */

.fn-banner {
  --fn-bg:   #FFF558;
  --fn-ink:  #212121;
  --fn-mute: rgba(33, 33, 33, .75);
  display: flex; align-items: stretch; gap: 24px;
  min-height: 300px; background: var(--fn-bg);
  border-radius: 32px; overflow: hidden;
  text-decoration: none; color: var(--fn-ink);
}
.fn-banner--camel { --fn-bg: #E9D4BA; }

.fn-banner__copy {
  flex: 1 1 auto; min-width: 0; padding: 44px 56px;
  display: flex; flex-direction: column; justify-content: center; gap: 20px;
}
.fn-banner__wordmark {
  display: block;
  font-family: var(--_typography---font-styles--heading, "Season Mix");
  font-weight: 400; font-size: 54px; line-height: 1;
  letter-spacing: -.045em; color: var(--fn-ink);
}
.fn-banner__by {
  display: flex; align-items: center; gap: .45em; margin-top: .9em;
  font-family: var(--_typography---font-styles--body, "Season Sans");
  font-size: 14px; line-height: 1; color: var(--fn-mute);
}
.fn-banner__by img { display: block; height: 1.3em; width: auto; }
.fn-banner__tag {
  margin: 0; max-width: 25em;
  font-family: var(--_typography---font-styles--body, "Season Sans");
  font-size: 18px; line-height: 1.5; color: var(--fn-mute);
}
.fn-banner__cta {
  align-self: flex-start; padding: 16px 48px;
  border: 1px solid var(--fn-ink); border-radius: 4px;
  background: var(--fn-ink); color: #fff;
  font-family: var(--_typography---font-styles--heading, "Season Mix");
  font-weight: 500; font-size: 16px; line-height: 1.2;
  letter-spacing: -.32px; white-space: nowrap;
}
.fn-banner:hover .fn-banner__cta { background: #000; border-color: #000; }

.fn-banner__art {
  flex: 0 0 auto; width: 48%; max-width: 660px;
  display: flex; align-items: flex-end; justify-content: center;
  padding: 24px 40px 24px 0;
}
.fn-banner__art img { display: block; width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* compact — the Insights / Newsroom list rail ----------------------------- */
.fn-banner--compact                  { min-height: 200px; }
.fn-banner--compact .fn-banner__copy { padding: 28px 48px; gap: 16px; }
.fn-banner--compact .fn-banner__wordmark { font-size: 40px; }
.fn-banner--compact .fn-banner__by       { font-size: 12px; }
.fn-banner--compact .fn-banner__tag      { font-size: 16px; max-width: 30em; }
.fn-banner--compact .fn-banner__cta      { padding: 13px 36px; font-size: 15px; }
.fn-banner--compact .fn-banner__art      { width: 40%; max-width: 500px; padding: 14px 28px 14px 0; }

/* stack below 992 --------------------------------------------------------- */
@media (max-width: 991px) {
  .fn-banner-section { margin-bottom: 144px; }  /* 2 x 4.5rem */
  .fn-banner, .fn-banner--compact { flex-direction: column; gap: 0; min-height: 0; }
  .fn-banner__copy, .fn-banner--compact .fn-banner__copy { padding: 36px 40px 28px; gap: 18px; }
  .fn-banner__wordmark, .fn-banner--compact .fn-banner__wordmark { font-size: 44px; }
  .fn-banner__tag, .fn-banner--compact .fn-banner__tag { font-size: 17px; max-width: none; }
  .fn-banner__cta, .fn-banner--compact .fn-banner__cta { padding: 15px 40px; font-size: 16px; }
  .fn-banner__art, .fn-banner--compact .fn-banner__art {
    width: 100%; max-width: none; padding: 0 32px 28px; justify-content: center;
  }
  .fn-banner__art img, .fn-banner--compact .fn-banner__art img {
    width: auto; max-width: 100%; max-height: 260px;
  }
}
@media (max-width: 767px) {
  .fn-banner-section { margin-bottom: 96px; }   /* 2 x 3rem */
  .fn-banner, .fn-banner--compact { border-radius: 24px; }
  .fn-banner__copy, .fn-banner--compact .fn-banner__copy { padding: 32px 28px 24px; gap: 16px; }
  .fn-banner__wordmark, .fn-banner--compact .fn-banner__wordmark { font-size: 40px; }
  .fn-banner__tag, .fn-banner--compact .fn-banner__tag { font-size: 16px; }
  .fn-banner__cta, .fn-banner--compact .fn-banner__cta { padding: 14px 36px; font-size: 15px; }
  .fn-banner__art, .fn-banner--compact .fn-banner__art { padding: 0 20px 22px; }
  .fn-banner__art img, .fn-banner--compact .fn-banner__art img { max-height: 200px; }
}