/* titlepage: see workshop/docs/architecture.md for component ownership. */

.titlepage {
  box-sizing: border-box;
  max-width: var(--page);
  margin: 0 auto 3.6rem;
  padding: 96px var(--page-edge) 0;
  text-align: center;
  scroll-margin-top: calc(var(--masthead-height, 0px) + 3.4rem);
}

.overline {
  margin: 0 0 26px;
  font-family: var(--apparatus);
  font-size: 12.5px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--verdigris);
}

.titlepage h1 {
  margin: 0 0 24px;
  font-family: var(--display, "Christ Charter", Charter, Georgia, serif);
  font-weight: 400;
  font-size: clamp(42px, 5vw, 64px);
  line-height: 1.04;
  letter-spacing: -.018em;
  text-wrap: balance;
}

.subtitle {
  margin: 0;
  max-width: none;
  padding: 0;
  border: 0;
  font-family: var(--apparatus);
  font-size: 1.16rem;
  line-height: 1.55;
  color: var(--ink-quiet);
  text-wrap: pretty;
}

@media (max-width: 46rem) {
  .titlepage {
    margin-bottom: 36px;
    padding: 32px var(--page-edge) 28px;
  }
  .overline { margin-bottom: 18px; }
  .titlepage h1 { margin-bottom: 18px; }
}