/*
 * Shared composition canon for the four public surfaces.
 * The homepage is the reference for rail, headline scale, and chrome spacing.
 */

:where(
  body.ph-home,
  body.toward-mission,
  body.aa-contact-page,
  body.aa-login-page
) {
  --public-composition-rail: 40rem;
  --public-composition-gutter: clamp(20px, 4vw, 48px);
  --public-composition-chrome-gap: clamp(14px, 1.5vh, 18px);
  --public-composition-title-size: clamp(2.75rem, 9.2vw, 5.2rem);
  --public-composition-title-weight: 750;
  --public-composition-title-line: 0.96;
  --public-composition-title-spacing: -0.045em;
  --public-composition-body-size: clamp(1.2rem, 3.6vw, 1.4rem);
  --public-composition-stack-gap: clamp(12px, 1.8vh, 20px);
  --public-composition-action-gap: clamp(16px, 2.6vh, 26px);
}

/* Homepage reference. */

body.ph-home.toward-mission .ph-stage {
  flex: 1 1 auto !important;
  height: auto !important;
  max-height: none !important;
  padding-top: calc(150px + var(--public-composition-chrome-gap)) !important;
  padding-left: max(var(--public-composition-gutter), env(safe-area-inset-left)) !important;
  padding-right: max(var(--public-composition-gutter), env(safe-area-inset-right)) !important;
}

body.ph-home .ph-composition {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
  padding-top: 0 !important;
}

body.ph-home .ph-headline {
  max-width: var(--public-composition-rail) !important;
  font-size: var(--public-composition-title-size) !important;
  font-weight: var(--public-composition-title-weight) !important;
  line-height: var(--public-composition-title-line) !important;
  letter-spacing: var(--public-composition-title-spacing) !important;
}

body.ph-home .ph-support {
  max-width: var(--public-composition-rail) !important;
  margin-top: var(--public-composition-stack-gap) !important;
  font-size: var(--public-composition-body-size) !important;
}

body.ph-home .ph-mission-gateway {
  max-width: var(--public-composition-rail) !important;
  margin-top: var(--public-composition-action-gap) !important;
}

/* Contact uses the shared rail with an intermediate editorial scale. */

body.aa-contact-page .pc-main {
  width: calc(100% - (2 * var(--public-composition-gutter))) !important;
  max-width: var(--public-composition-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--public-composition-chrome-gap) 0 clamp(24px, 4vh, 48px) !important;
}

body.aa-contact-page .pc-statement {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
}

body.aa-contact-page .pc-statement__line {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
  margin: 0 0 var(--public-composition-action-gap) !important;
  font-size: clamp(2.15rem, 3.5vw, 3.4rem) !important;
  font-weight: 560 !important;
  line-height: 1.06 !important;
  letter-spacing: -0.038em !important;
  text-align: left !important;
  text-wrap: balance;
}

body.aa-contact-page .pc-statement__line--closing {
  margin-bottom: 0 !important;
}

/* Login follows the same rail, start line, and headline scale. */

body.aa-login-page .aa-chrome-header-spacer {
  height: var(--aa-chrome-header-height, 150px) !important;
}

body.aa-login-page .pl-frontispiece {
  width: calc(100% - (2 * var(--public-composition-gutter))) !important;
  max-width: var(--public-composition-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: var(--public-composition-chrome-gap) 0 clamp(12px, 2vh, 18px) !important;
}

body.aa-login-page .pl-greeting {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
  margin-bottom: var(--public-composition-stack-gap) !important;
  font-size: var(--public-composition-title-size) !important;
  font-weight: var(--public-composition-title-weight) !important;
  line-height: var(--public-composition-title-line) !important;
  letter-spacing: var(--public-composition-title-spacing) !important;
}

body.aa-login-page .pl-auth,
body.aa-login-page .pl-quote-block {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
}

body.aa-login-page .pl-field {
  margin-bottom: var(--public-composition-stack-gap) !important;
}

body.aa-login-page .pl-field:last-of-type {
  margin-bottom: 0 !important;
}

body.aa-login-page .pl-submit,
body.aa-login-page .pl-quote-block {
  margin-top: var(--public-composition-stack-gap) !important;
}

/* Mission hero adopts the homepage geometry. Later story scenes keep their cadence. */

body.toward-mission .toward-scene--hero {
  align-items: flex-start !important;
}

body.toward-mission .toward-scene--hero .toward-scene__content {
  width: calc(100% - (2 * var(--public-composition-gutter))) !important;
  max-width: var(--public-composition-rail) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  align-self: flex-start !important;
  padding-top: calc(150px + var(--public-composition-chrome-gap)) !important;
  padding-bottom: clamp(72px, 9vh, 112px) !important;
  text-align: left !important;
}

body.toward-mission .toward-scene--hero h1 {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
  margin: 0 !important;
  font-size: var(--public-composition-title-size) !important;
  font-weight: var(--public-composition-title-weight) !important;
  line-height: var(--public-composition-title-line) !important;
  letter-spacing: var(--public-composition-title-spacing) !important;
}

body.toward-mission .toward-scene--hero .toward-support {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
  margin: var(--public-composition-stack-gap) 0 0 !important;
  font-size: var(--public-composition-body-size) !important;
}

body.toward-mission .toward-scene--hero .toward-engine {
  width: 100% !important;
  max-width: var(--public-composition-rail) !important;
  margin: var(--public-composition-action-gap) 0 0 !important;
}

@media (max-width: 430px) {
  :where(
    body.ph-home,
    body.toward-mission,
    body.aa-contact-page,
    body.aa-login-page
  ) {
    --public-composition-title-size: clamp(2.2rem, 10.4vw, 2.95rem);
    --public-composition-body-size: clamp(1.12rem, 4.1vw, 1.26rem);
  }

  body.aa-contact-page .pc-statement__line {
    font-size: clamp(1.9rem, 8.2vw, 2.45rem) !important;
    line-height: 1.08 !important;
  }
}

@media (max-width: 430px) and (max-height: 700px) {
  body.aa-login-page {
    --public-composition-title-size: 2.25rem;
    --public-composition-stack-gap: 6px;
  }

  body.aa-login-page .pl-quote {
    font-size: 0.95rem !important;
    line-height: 1.36 !important;
  }

  body.aa-login-page .pl-quote[data-quote-length="short"] {
    font-size: 1.02rem !important;
  }

  body.aa-login-page .pl-quote[data-quote-length="long"] {
    font-size: 0.9rem !important;
  }

  body.aa-login-page .pl-attribution {
    margin-top: 6px !important;
  }
}