/* The title is a small sculpture; the rest of the page stays typographic. */
.hero { padding-top: 26px; }
.title-sculpture { position: relative; }
.title-sculpture .title { max-width: none; margin-bottom: 24px; white-space: normal; }
.title-wordmark {
  position: relative; display: block; width: min(420px, 100%); aspect-ratio: 3.1;
  margin: 0 auto 9px; isolation: isolate;
}
.wordmark-canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .10s; }
.wordmark-fallback {
  position: absolute; width: 1px; height: 1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.title-wordmark.is-fallback .wordmark-fallback, .wordmark-static {
  position: absolute; inset: 0; display: grid; place-items: center;
  width: auto; height: auto; overflow: visible; clip-path: none;
  font: 700 clamp(3rem, 9vw, 4.75rem)/1 var(--head); letter-spacing: -.065em; color: #bd7953;
}
.title-wordmark.is-ready .wordmark-canvas { opacity: 1; }
.title-sculpture .title-subtitle {
  display: block; font: 500 clamp(1.1rem, 2.35vw, 1.78rem)/1.3 var(--head);
  letter-spacing: -.025em; text-wrap: balance;
}
.wordmark-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 560px) {
  .hero { padding-top: 18px; }
  .title-wordmark { width: min(325px, 100%); aspect-ratio: 3; margin-bottom: 12px; }
  .title-sculpture .title { margin-bottom: 18px; }
  .title-sculpture .title-subtitle { max-width: 340px; margin-inline: auto; font-size: 1.14rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wordmark-canvas { transition: none; }
}