@import url("design-tokens.css");

:root {
  --declaration: var(--font-flavor);
  --historical-title: var(--font-display-historical);
}

/*
 * Declaration is a flavor face, not an interface or reading face.
 * Georgia remains the structural heading font.
 */
html,
body {
  overflow-x: hidden;
}

@supports (overflow: clip) {
  html,
  body {
    overflow-x: clip;
  }
}

.brand > span:last-child {
  font-family: var(--historical-title);
  font-weight: 400;
  letter-spacing: 0;
}

.hero-copy {
  position: relative;
  z-index: 1;
}

.hero-title-accent {
  display: block;
  width: calc(100% + .12em);
  margin-top: .01em;
  margin-left: -.12em;
  color: var(--crimson);
  font-family: var(--declaration);
  font-size: 1.42em;
  font-style: normal;
  font-weight: 400;
  line-height: .84;
  letter-spacing: 0;
}

/*
 * Overlines stay on one line at desktop widths without contributing a
 * max-content width to their grid or flex parent. Narrow layouts restore
 * normal wrapping so adjacent body copy and forms remain viewport-safe.
 */
.declaration-overline {
  display: block;
  width: auto;
  max-width: none;
  margin-bottom: 20px;
  font-family: var(--declaration);
  font-size: clamp(3.2rem, 5.2vw, 5rem);
  font-weight: 400;
  line-height: .9;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}

/* Keep each faction phrase normally spaced while separating the two phrases. */
.factions-section .declaration-overline {
  display: flex;
  width: max-content;
  max-width: none;
  flex-wrap: nowrap;
  align-items: baseline;
  column-gap: clamp(1.5rem, 3.5vw, 3rem);
  row-gap: 0;
  font-size: 0;
  white-space: normal;
}

.factions-section .declaration-overline::before,
.factions-section .declaration-overline::after {
  color: var(--crimson);
  font-family: var(--declaration);
  font-size: clamp(2.9rem, 4.5vw, 4.35rem);
  font-weight: 400;
  line-height: .9;
  white-space: nowrap;
}

.factions-section .declaration-overline::before {
  content: "Six institutions ·";
}

.factions-section .declaration-overline::after {
  content: "twelve Leaders";
}

.assistant-section .declaration-overline {
  color: #d7b783;
  font-size: clamp(3.35rem, 5vw, 4.8rem);
  line-height: .72;
}

/* Let the transparent Leader artwork break out of its nominal frame. */
.hero-illustration {
  z-index: 2;
}

.hero-illustration-image {
  width: 126%;
  right: -12%;
  bottom: -24px;
}

@media (max-width: 900px) {
  .hero-illustration {
    max-width: 680px;
    margin-top: -10px;
  }

  .hero-illustration-image {
    width: 120%;
    right: auto;
    left: 52%;
    bottom: -18px;
    transform: translateX(-50%);
  }
}

@media (max-width: 620px) {
  .hero-title-accent {
    width: calc(100% + .14em);
    margin-top: .02em;
    margin-left: -.14em;
    font-size: 1.45em;
  }

  .declaration-overline {
    width: auto;
    max-width: 100%;
    font-size: clamp(3rem, 13.5vw, 4.1rem);
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
  }

  .factions-section .declaration-overline {
    width: auto;
    max-width: 100%;
    flex-wrap: wrap;
    column-gap: clamp(1.25rem, 6vw, 2rem);
  }

  .factions-section .declaration-overline::before,
  .factions-section .declaration-overline::after {
    font-size: clamp(2.75rem, 11.5vw, 3.5rem);
  }

  .assistant-section .declaration-overline {
    font-size: clamp(3rem, 13vw, 3.9rem);
    line-height: .68;
  }

  .hero {
    gap: 26px;
  }

  .hero-illustration {
    width: 100%;
    margin-top: -18px;
  }

  .hero-illustration-image {
    width: 124%;
    left: 52%;
    bottom: -12px;
  }
}