/* styles/sections/campaign-frame.css
 * Campaign and lead-magnet pages (BRI-7776 swap): the pre-swap 1200px block and type scale.
 * `.container` keeps the layout recipe; these pages set it to 1152px of content inside 24px
 * gutters at every width, as css/base.css did. Set on <main> (on <body> for /sfdemonight/,
 * which keeps its own header and footer), so the shared chrome keeps its own values.
 *
 * Type: the pre-swap pages set body copy at 16 to 18px and never scaled type above 900px. So
 * the body roles and the h5 role hold their compact step at every width (body and editorial
 * 17px, body-lg and editorial-lg 18px, h5 20px: the values typography.css gives them below
 * 900px), and from 1680px every other heading and display role holds its 900px value (the
 * pre-swap 1920 page set the same type as 1440). No new sizes: each value is the role's own
 * value at another breakpoint. A section whose pre-swap heads were 24px sets the h5 role's
 * 900px step (24px) on itself. */
@layer sections {
  .campaign-page {
    --container-max: 1152px;
    --page-gutter: var(--space-24);
    --t-body-size: 17px;
    --t-body-lg-size: 18px;
    --t-editorial-size: 17px;
    --t-editorial-lg-size: 18px;
    --t-h5-size: 20px;

    /* Unclassed text inherits the held body size, not the body's 18px. */
    font-size: var(--t-body-size);
    line-height: var(--t-body-lh);
  }

  /* Shared components keep their board sizes: the accordion reads the body role's own values
     (17px, 18px from 900), not the held compact step. */
  .campaign-page .accordion {
    --t-body-size: 17px;
  }

  @media (width >= 900px) {
    .campaign-page .accordion {
      --t-body-size: 18px;
    }
  }

  /* Section heads were 40px from 900 and 28 to 30px below it: the h3 role from 900, the h2
     role's 32px step below 900 (closer to the pre-swap line breaks than the h3 role's 28px). */
  @media (width < 900px) {
    .campaign-page .t-h3 {
      font-size: var(--t-h2-size);
      letter-spacing: var(--t-h2-ls);
    }
  }

  @media (width >= 1680px) {
    .campaign-page {
      --t-mega-size: 176px;
      --t-display-xl-size: 120px;
      --t-display-xl-ls: -0.03em;
      --t-display-lg-size: 88px;
      --t-display-lg-ls: -0.025em;
      --t-display-md-size: 72px;
      --t-display-md-ls: -0.025em;
      --t-display-sm-size: 64px;
      --t-h1-size: 56px;
      --t-h1-ls: -0.02em;
      --t-h2-size: 48px;
      --t-h3-size: 40px;
      --t-h4-size: 32px;
      --t-h4-ls: -0.015em;
      --t-h5-ls: -0.01em;
    }
  }
}