.download-intro { animation: none; }
.download-page .download-icon { width: 96px; height: 96px; margin-bottom: 32px; }
:is(body.download-page, .site-opening) .brand-title {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 96px;
  margin: 0;
  font-size: 52px;
  font-weight: 750;
  line-height: 1.2;
  letter-spacing: 0;
  white-space: pre;
}
.brand-fragment, .brand-letter { display: inline-block; }
.brand-tagline { margin: 8px 0 0; color: #65737a; font-size: 18px; }
[data-brand-state='writing'] .brand-tagline { opacity: 0; }
[data-brand-state='complete'] .brand-tagline { animation: tagline-arrive 400ms ease-out both; }
@keyframes tagline-arrive { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (max-width: 760px) { :is(body.download-page, .site-opening) .brand-title { font-size: 36px; } }
@media (max-width: 520px) { :is(body.download-page, .site-opening) .brand-title { font-size: 26px; height: 72px; } }
@media (max-width: 360px) { :is(body.download-page, .site-opening) .brand-title { font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .brand-tagline { animation: none !important; } }

[data-brand-state='writing'] [data-brand-icon] { opacity: 0; }
.site-opening { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 24px 20px; background: #fafcfc; }
.opening-brand { width: min(820px, 100%); text-align: center; }
.opening-brand .download-icon { display: block; width: 96px; height: 96px; margin: 0 auto 32px; border-radius: 20px; opacity: 0; }
.opening-skip { position: absolute; right: 24px; bottom: max(24px, env(safe-area-inset-bottom)); min-height: 44px; padding: 10px 16px; border: 0; background: transparent; color: #52656b; font: inherit; cursor: pointer; }
.opening-skip:hover { color: #0b745f; }
.opening-skip:focus-visible { outline: 2px solid #0b745f; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .site-opening { display: none; } }

.site-header .brand { gap: 12px; flex: 0 1 auto; min-width: 0; }
.site-header .brand img { width: 42px; height: 42px; flex-shrink: 0; border-radius: 10px; }
.header-wordmark { display: flex; align-items: center; justify-content: flex-start; width: 290px; height: 44px; font-size: 24px; font-weight: 800; line-height: 1.2; white-space: pre; letter-spacing: 0; }
@media (max-width: 660px) {
  .header-wordmark { width: min(290px, calc(100vw - 92px)); font-size: 22px; }
}
@media (max-width: 360px) { .header-wordmark { font-size: 20px; } }

/* Center the wordmark itself, with the icon immediately above it. */
.opening-brand { position: relative; }
.opening-brand .download-icon { position: absolute; left: calc(50% - 48px); bottom: 100%; margin: 0; }
.download-page .download-icon { margin-bottom: 0; }
:is(body.download-page, .site-opening) .brand-title { height: 80px; }
@media (max-width: 520px) { :is(body.download-page, .site-opening) .brand-title { height: 64px; } }

/* One header geometry for home, download and every supporting page. */
body .site-header.site-header {
  position: relative; top: auto; z-index: 4; width: min(1180px, calc(100% - 44px));
  margin-inline: auto; padding: 16px 0 8px; gap: 20px;
  border: 0; background: transparent; backdrop-filter: none;
}
@media (max-width: 920px) { body .site-header.site-header { width: min(calc(100% - 32px), 760px); } }