/* The only animated bird is the small header mark. */
.brand-mark--animated {
  position: relative;
  flex: none;
  width: 56px;
  height: 44px;
  contain: layout;
}
.brand-mark--animated canvas {
  position: absolute;
  inset: 0;
  display: block;
  width: 100% !important;
  height: 100% !important;
  opacity: 0;
  transition: opacity .24s ease-out;
}
.brand-mark--animated img {
  opacity: 1;
  transition: opacity .24s ease-out;
}
.brand-mark--animated.is-ready canvas { opacity: 1; }
.brand-mark--animated.is-ready img { opacity: 0; }
.hero {
  grid-template-columns: minmax(0, 1fr);
  min-height: auto;
  padding-block: clamp(48px, 5.5vw, 84px) clamp(56px, 6vw, 92px);
}
.hero-copy { max-width: 1050px; }
.hero h1 {
  max-width: 18ch;
  font-size: clamp(44px, 6.8vw, 92px);
  line-height: 1.02;
  letter-spacing: -.025em;
  text-wrap: balance;
}
.hero-summary { max-width: 65ch; }
@media (width <= 600px) {
  .site-header { column-gap: 12px; }
  .brand-mark--animated { width: 44px; height: 34px; }
  .hero { padding-block: 44px 56px; }
  .hero h1 { max-width: 14ch; font-size: clamp(40px, 10.5vw, 52px); }
}
@media (prefers-reduced-motion: reduce) {
  .brand-mark--animated canvas, .brand-mark--animated img { transition: none; }
}