/* Shared brand, header dimensions and navigation. Page CSS must not resize them. */
:root {
  --site-header-height: 72px;
  --site-header-gutter: 32px;
  --site-header-gap: 24px;
}

.lockup {
  display: inline-flex; flex: none; align-items: center; gap: 7px;
  color: #faf8f6; font: 600 21px/1 "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-variation-settings: "opsz" 32; letter-spacing: -.055em;
  text-decoration: none; white-space: nowrap;
}
.lockup .mark { display: block; height: 28px; width: auto; margin-right: 1px; }
.lockup em {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px;
  margin-top: 2px; padding: 0 3px; border: 1px solid currentColor; border-radius: 6px;
  font: 500 9px/1 "Inter", system-ui, sans-serif; font-style: normal;
  letter-spacing: .04em; opacity: .7;
}

.site-header {
  position: relative; z-index: 40; display: grid;
  grid-template-columns: auto auto minmax(0, 1fr); align-items: center;
  column-gap: var(--site-header-gap); width: 100%; height: var(--site-header-height);
  padding: 0 var(--site-header-gutter); border-bottom: 1px solid #faf8f61c;
  background: #0c0a09f5; color: #faf8f6;
}
.site-header .site-brand { justify-self: start; }
.site-products { display: flex; flex: none; align-items: center; gap: 4px; }
.site-products a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 52px; height: 36px; padding: 0 12px;
  border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: #faf8f6ad;
  font: 500 14px/1 "Inter", system-ui, sans-serif; letter-spacing: 0;
  text-decoration: none; white-space: nowrap;
  transition: color .15s, background .15s, border-color .15s;
}
.site-products a:hover { color: #faf8f6; background: #faf8f609; border-color: #faf8f61c; text-decoration: none; }
.site-products a[aria-current="page"] { color: #faf8f6; background: #1a1714; border-color: #faf8f638; }
.site-actions { display: flex; align-items: center; justify-content: flex-end; justify-self: end; gap: 10px; min-width: 0; }
.site-actions .btn, .site-actions .header-action, .site-actions .login, .site-actions .menu-btn, .site-actions .me-chip {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  height: 38px; min-height: 38px; margin: 0; padding: 0 14px; border-radius: 10px;
  font: 500 14px/1 "Inter", system-ui, sans-serif; text-decoration: none; white-space: nowrap;
}
.site-actions .header-action, .site-actions .login { border: 1px solid #d8d0c2; background: #d8d0c2; color: #0c0a09; }
.site-actions .header-action:hover, .site-actions .login:hover { border-color: #ebe4d8; background: #ebe4d8; }
.site-actions .menu-btn { display: none; }
.site-actions .social-x { width: 38px; height: 38px; margin: 0; }
.site-actions .privacy-pill { white-space: nowrap; }
.site-actions .code-me { gap: 10px; min-width: 0; }
.site-actions .me-chip { padding-inline: 7px; }
.site-actions .me-chip .mono { max-width: 150px; overflow: hidden; text-overflow: ellipsis; }
.landing-header { position: absolute; inset: 0 0 auto; z-index: 6; }

@media (max-width: 1100px) {
  .site-actions .privacy-pill { display: none; }
}
@media (max-width: 1000px) {
  .site-actions .menu-btn { display: inline-flex; }
  .site-actions .me-chip .mono, .site-actions .me-chip .tag { display: none; }
}
@media (max-width: 760px) {
  :root { --site-header-height: 108px; --site-header-gutter: 16px; --site-header-gap: 12px; }
  .site-header { grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 64px 44px; }
  .site-header .site-brand { grid-column: 1; grid-row: 1; }
  .site-products { grid-column: 1 / -1; grid-row: 2; align-self: start; }
  .site-actions { grid-column: 2; grid-row: 1; gap: 8px; }
  .site-actions .hide-sm { display: none; }
  .site-actions .btn, .site-actions .header-action, .site-actions .login, .site-actions .menu-btn { padding-inline: 12px; }
}
@media (max-width: 400px) {
  .site-actions .login { display: none; }
}