/* Font metrics at 100px/600 preserve glyph proportions and reserve space before paint. */
:root { --header-glyph-ratio: 10.970468; --header-fit-font: Haas, Arial, sans-serif; }
:root[data-site-font="neue"] { --header-fit-font: SiteNeue, Arial, sans-serif; }
:root[data-site-font="inter"] { --header-glyph-ratio: 11.563227; --header-fit-font: AppstarInter, Arial, sans-serif; }
.header-fit-wordmark { display: none; }
:root[data-header-layout="current"] .header-brand-stage { justify-content: center; }
:root[data-header-layout="current"] .header-brand-content { transform-origin: center; }
:root[data-header-layout="current"] .header .wordmark { font-size: 32px; line-height: 48px; letter-spacing: -1.1px; }
:root[data-header-layout="current"] .header-wordmark-label { height: 48px; }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header {
 --fit-left: var(--header-left);
 --fit-right: var(--header-right);
 --fit-width: calc(100vw - var(--fit-left) - var(--fit-right));
 --fit-extra: 0px;
 height: max(64px, calc(var(--fit-width) / var(--header-glyph-ratio) + 32px + var(--fit-extra)));
}
:root[data-header-layout="page"] .header { --fit-left: 16px; --fit-right: 16px; }
:root[data-header-turtle="true"]:is([data-header-layout="page"],[data-header-layout="content"]) .header { --fit-extra: 40px; }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header-brand-stage { left: var(--fit-left); right: var(--fit-right); top: 16px; bottom: calc(16px + var(--fit-extra)); }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header .home,
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header-brand-content,
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header-wordmark-label { width: 100%; height: auto; min-height: 0; }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header-brand-content { transform: none; transition: none; }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header .wordmark { display: none; }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header-fit-wordmark { display: block; width: 100%; aspect-ratio: var(--header-glyph-ratio); overflow: visible; }
.header-fit-wordmark text { font-family: var(--header-fit-font); font-size: 100px; font-weight: 600; letter-spacing: 0; fill: #111; }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header-logo { position: absolute; left: 0; top: calc(100% + 8px); }
:root:is([data-header-layout="page"],[data-header-layout="content"]) .header-brand-stage { overflow: visible; }
@media(max-width:600px) {
 :root[data-header-layout="current"] .header .wordmark { font-size: 23px; letter-spacing: -.7px; }
}

.header .wordmark { color: var(--header-logo-color, #9b9b9b); }
.header-fit-wordmark text { fill: var(--header-logo-color, #9b9b9b); }
.header-logo { background: var(--header-logo-color, #9b9b9b); mask: url('assets/turtle.svg') center / contain no-repeat; }
.header-turtle { opacity: 0; }

/* The duplicate blends only through the content-overlap mask. */
.header.header-difference-layer {
 position: fixed;
 margin: 0;
 pointer-events: none;
 --header-logo-color: #fff;
 mix-blend-mode: difference;
 isolation: auto;
}
.header-difference-layer[hidden] { display: none; }
/* Keep the inspector above the blending header. */
:root { --layer-controls: 1002; }