/* Shared header and footer dimensions from landing/app/globals.css and site-chrome.tsx. */
:root {
  --page-gutter:clamp(24px,8vw,160px);
  --header-gutter:clamp(16px,4vw,80px);
}
.site-header {
  position:fixed; top:0; left:0; z-index:10; width:100%;
  display:flex; align-items:center; justify-content:space-between;
  padding:16px var(--header-gutter); background:transparent;
}
.site-header .brand { display:flex; align-items:center; gap:13px; height:44px; text-decoration:none; }
/* scrolled, the header takes the paper with a hairline under it (landing globals.css .site-header--scrolled) */
.site-header { transition:background-color 240ms ease, box-shadow 240ms ease; }
.site-header--scrolled { background:#ffffff; box-shadow:0 1px 0 rgba(28,28,26,.06); }
/* the lockup, as landing app/site-chrome.tsx HeaderLogo: the icon stays, the wordmark slides out to the left
   behind it past 64 px of scroll and fades, and slides back at the top */
.brand-lockup { --icon-h:28px; --wordmark-h:13px; --gap:13px; --icon-w:calc(var(--icon-h) * 0.881); --wordmark-w:calc(var(--wordmark-h) * 11.351);
                display:block; height:var(--icon-h); overflow:hidden; position:relative; width:calc(var(--icon-w) + var(--gap) + var(--wordmark-w)); }
.brand-icon-shield { align-items:center; display:flex; height:100%; left:0; position:absolute; top:0; z-index:2; }
.brand-icon-img { display:block; height:var(--icon-h); width:auto; }
.brand-wordmark-window { bottom:0; left:calc(var(--icon-w) + var(--gap)); overflow:hidden; position:absolute; right:0; top:0; transition:opacity 260ms ease; }
.brand-wordmark-track { align-items:center; display:flex; height:100%; left:0; position:absolute; top:0; transition:transform 450ms cubic-bezier(0.87, 0, 0.13, 1); will-change:transform; }
.brand-wordmark-img { display:block; height:var(--wordmark-h); width:auto; }
.site-header .brand-icon-img, .site-header .brand-wordmark-img { filter:invert(1); }
.site-header--scrolled .brand-wordmark-track { transform:translate3d(calc(-100% - 24px), 0, 0); }
.site-header--scrolled .brand-wordmark-window { opacity:0; }
/* the Internal label belongs to the wordmark, so it leaves and returns with it */
.site-header .brand .tag { transition:opacity 260ms ease; }
.site-header--scrolled .brand .tag { opacity:0; }
.site-footer {
  width:100%; margin:0; padding:0 var(--page-gutter);
  border-top:1px solid var(--line); color:var(--ink);
  font:400 16px/1.5 var(--font-body);
}
.footer-bar { display:flex; align-items:center; gap:20px; justify-content:space-between; max-width:1020px; margin-inline:auto; padding:20px 0; }
.footer-copy { color:var(--muted); font:500 12px/18px var(--font-body); }
@media (max-width:1120px) { :root { --page-gutter:clamp(28px,6vw,64px); --header-gutter:clamp(16px,3vw,32px); } }
@media (max-width:900px) { :root { --page-gutter:clamp(22px,5vw,40px); --header-gutter:16px; } }
@media (max-width:760px) { :root { --page-gutter:20px; } }
@media (max-width:520px) { :root { --page-gutter:16px; } }