/* The transparent header keeps the brand shrink on scroll. */
.header { --header-left: max(var(--page-gutter, 32px), calc((100% - var(--content-max-width, 100rem)) / 2)); --header-right: var(--header-left); }
html { scroll-padding-top: 80px; }
.header { position: sticky; top: 0; z-index: 40; isolation: isolate; height: 68px; padding-block: 10px; background: transparent; border: 0; }
.header-brand-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; display: flex; align-items: center; }
.header .home {
 pointer-events: auto;
 position: absolute; left: var(--header-left); width: 44px; height: 44px;
 justify-content: center; transform: none;

}
.header-logo { position: relative; display: block; width: 35.7966px; height: 32px; isolation: isolate; z-index: 1; }
.header-turtle { position: relative; display: block; }
.header-wordmark-label { position: absolute; left: 52px; top: -2px; width: max-content; height: 48px; }
.header .wordmark { position: static; display: block; width: max-content; transform: none; opacity: 1; pointer-events: auto; transition: none; }
@media (max-width: 600px) {
 html { scroll-padding-top: 76px; }
 .header { height: 64px; padding-block: 8px; }
 .header-logo { scale: .82; }
}
/* Keep the preview controls clear of the persistent navigation. */
.header { z-index: 1001; }
.articles-controls-panel { top: 84px; }
.articles-controls-panel > div { max-height: calc(100dvh - 100px); }
@media (max-width: 600px) { .articles-controls-panel { top: 80px; } }
@media (max-width: 360px) { .header .wordmark { font-size: 19px; } }

.header-brand-content { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transform-origin: left center; transform: scale(1); transition: transform 280ms cubic-bezier(.22,1,.36,1); }
.header[data-compact="true"] .header-brand-content { transform: scale(.9); }
@media (prefers-reduced-motion: reduce) { .header-brand-content { transition: none; } }

html:not([data-header-turtle="true"]) .header .header-logo,
html:not([data-header-turtle="true"]) .header .home > img { display: none; }
html:not([data-header-turtle="true"]) .header-wordmark-label { left: 0; }

.header-brand-stage { left: var(--header-left); right: var(--header-right); justify-content: center; }
.header .home { position: relative; left: auto; width: max-content; height: 48px; }
.header-brand-content { position: relative; inset: auto; gap: 8px; transform-origin: center; }
.header-wordmark-label { position: relative; left: auto; top: auto; }
html:not([data-header-turtle="true"]) .header-brand-content { gap: 0; }

/* Anchor the smaller brand to the same content edge throughout scroll shrink. */
.header-brand-stage { justify-content: flex-start; }
.header-brand-content { transform-origin: left center; }
.header .wordmark { font-size: 24px; line-height: 36px; letter-spacing: -.6px; color: #111; }
.header-wordmark-label { height: 36px; }
@media (max-width: 600px) {
 .header .wordmark { font-size: 22px; line-height: 34px; }
 .header-wordmark-label { height: 34px; }
}