@layer pages {
  .content-page {
    --primary-color: var(--home-black);
    --secondary-color: var(--home-cream);
    padding: 0;
    margin: 0;
    color: #fff;
  }

  .content-page-hero {
    position: relative;
    min-height: 520px;
    display: grid;
    align-items: end;
    isolation: isolate;
  }

  /* Artwork and title share a grid cell; both contribute to the hero height. */
  .content-page-hero > picture {
    grid-area: 1 / 1;
    align-self: start;
  }

  .content-page-skyline {
    display: block;
    width: 100%;
    height: auto;
  }

  .content-page-title {
    grid-area: 1 / 1;
    z-index: 1;
    width: min(100%, 526px);
    margin-inline: auto;
    padding: 341.944px 32px 68px;
    text-align: center;
  }

  .content-page-title h1 {
    margin: 0;
    color: #fafafa;
    font: 600 48px/normal var(--home-font);
    text-box-trim: trim-both;
    text-box-edge: cap alphabetic;
    text-transform: uppercase;
    overflow-wrap: anywhere;
  }

  .content-page-section {
    --content-heading-gap: 24px;
    --content-paragraph-gap: 16px;
    --content-section-gap: 46.97248px;
    padding: 24px 24px 120px;
    background: linear-gradient(to bottom, #13131300, #131313);
  }

  .content-page-body {
    display: flow-root;
    width: min(820px, 100%);
    margin: 0 auto;
    font: 300 24px/1.5 var(--home-font);
    letter-spacing: 0.02em;
    overflow-wrap: anywhere;
  }

  .content-page-body :is(h2, h3, h4) {
    margin-block: var(--content-section-gap) var(--content-heading-gap);
    font: 500 32px/normal var(--home-font);
    letter-spacing: 0;
    text-transform: uppercase;
    text-align: inherit;
  }

  .content-page-body :is(h2, h3, h4):first-child {
    margin-top: 0;
  }

  .content-page-body :is(h2, h3, h4) :is(b, strong) {
    font-weight: inherit;
  }

  .content-page-body :is(p, ul, ol, blockquote, table, pre) + * {
    margin-top: var(--content-paragraph-gap);
  }

  .content-page-body > * + * {
    margin-top: var(--content-section-gap);
  }

  .content-page-body :is(ul, ol) {
    padding-inline-start: 1.5em;
    font-weight: 400;
  }

  .content-page-body li + li {
    margin-top: 0;
  }

  /* Keep markers with their CMS-aligned text. */
  .content-page-body :is(.text-center, .text-right) :is(ul, ol) {
    list-style-position: inside;
    padding-inline-start: 0;
  }

  .content-page-body :is(img, iframe, video) {
    max-width: 100%;
  }

  .content-page-body img {
    height: auto;
  }

  .content-page-body :is(pre, .block-table) {
    overflow-x: auto;
  }

  .content-page-body .block-table :is(th, td) {
    overflow-wrap: normal;
  }

  .content-page-body a {
    text-decoration: none;
    text-underline-offset: 3px;
  }

  .content-page-body a[href^='mailto:'],
  .content-page-body a:hover {
    text-decoration: underline;
  }

  .content-page-body a[href^='mailto:'] {
    font-weight: 400;
  }

  .content-page-body a:hover {
    color: var(--home-amber);
  }

  .content-page-body
    :is(iframe[src*='youtube.com/'], iframe[src*='youtube-nocookie.com/'], iframe[src*='player.vimeo.com/']) {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
  }

  .content-page-body :is(a.button, button:not(.sp-trigger)) {
    justify-content: center;
    min-height: 42px;
    padding: 8px 24px;
    border: 1px solid var(--home-cream);
    border-radius: 32px;
    background: var(--home-cream);
    color: var(--home-black);
    box-shadow: none;
    font: 500 16px/24px var(--home-font);
    letter-spacing: 0;
    text-align: center;
    text-decoration: none;
  }

  .content-page-body :is(a.button, button:not(.sp-trigger)):hover {
    background: var(--home-amber);
    border-color: var(--home-amber);
    color: var(--home-black);
  }

  .content-page-body :is(a.button, button:not(.sp-trigger)):active {
    background: var(--home-gold);
    border-color: var(--home-gold);
  }

  .content-page-body :is(a.button, button:not(.sp-trigger)):disabled {
    background: #b5b8bc;
    border-color: #b5b8bc;
    color: #fafafa;
  }

  .content-page-body .sp-level {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
    gap: 32px;
    padding: 0;
    list-style: none;
  }

  .content-page-body .sp-square {
    width: 100%;
    min-width: 0;
    padding: 24px;
    border: 1px solid var(--home-cream);
  }

  .content-page-body .sp-level > li {
    margin: 0;
  }

  .content-page-body .sp-logo {
    min-width: 0;
    color: var(--home-black);
    text-align: center;
  }

  .content-page-body .sp-logo img {
    display: block;
    max-height: 144px;
    width: auto;
    margin-inline: auto;
    object-fit: contain;
  }

  .content-page-body .sp-empty {
    text-align: center;
  }

  .content-page-body dialog {
    max-height: calc(100dvh - 48px);
  }

  .content-page-body .dialog-body {
    min-width: 0;
    border: 1px solid var(--home-cream);
    border-radius: 0;
  }

  @media (width < 768px) {
    .content-page-hero {
      min-height: 336px;
    }

    .content-page-hero > picture {
      padding-top: 41px;
    }

    .content-page-title {
      width: 100%;
      padding: 210.888px 32px 43.112px;
    }

    .content-page-title h1 {
      font-size: 28px;
      font-weight: 500;
      text-box-trim: none;
    }

    .content-page-section {
      --content-heading-gap: 16px;
      --content-paragraph-gap: 12px;
      padding-bottom: 60px;
    }

    .content-page-body {
      font-size: 16px;
    }

    .content-page-body :is(h2, h3, h4) {
      font-size: 20px;
      font-weight: 500;
      margin-block: var(--content-section-gap) var(--content-heading-gap);
    }

    .content-page-body :is(p, ul, ol, blockquote, table, pre) + * {
      margin-top: var(--content-paragraph-gap);
    }
  }
  /* Section rhythm must outrank generic paragraph spacing at every width. */
  .content-page-body :is(p, ul, ol, blockquote, table, pre) + :is(h2, h3, h4) {
    margin-top: var(--content-section-gap);
  }
  .content-page-body :is(h2, h3, h4) + * {
    margin-top: var(--content-heading-gap);
  }
}