html { scroll-padding-top: 72px; }

/* The header on every page (the homepage too).
   Links on wide screens; a Menu button that drops the full list on phones. */
.site { position: sticky; top: 0; z-index: 20; background: rgb(255 255 255 / .86); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid #d2d2d7; }
.site-in { max-width: 1080px; margin: 0 auto; padding: 0 24px; height: 56px; display: flex; align-items: center; gap: 28px; }
.site .brand { display: inline-flex; align-items: center; gap: 10px; color: #1d1d1f; text-decoration: none; font-weight: 600; font-size: 17px; letter-spacing: -0.015em; }
.site .brand img { width: 26px; height: 26px; }
.site-links { display: flex; gap: 26px; margin-left: auto; font-size: 14px; }
.site-links a { color: rgb(0 0 0 / .72); text-decoration: none; transition: color 150ms ease; }
.site-links a:hover, .site-links a[aria-current="page"] { color: #1d1d1f; }
.site-links a[aria-current="page"] { font-weight: 600; }
.site-btn { display: inline-flex; align-items: center; padding: 7px 14px; border-radius: 980px; background: #0071e3; color: #fff; text-decoration: none; font-size: 14px; white-space: nowrap; }
.site-btn:hover { background: #0077ed; }
.site a:focus-visible, .menu summary:focus-visible { outline: 2px solid #0066cc; outline-offset: 3px; border-radius: 6px; }

.menu { display: none; position: relative; margin-left: auto; }
.menu summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: 980px; font-size: 14px; color: #1d1d1f; user-select: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 16px; height: 16px; transition: rotate 200ms cubic-bezier(.22, 1, .36, 1); }
.menu[open] summary svg { rotate: 180deg; }
.menu-panel { position: absolute; right: 0; top: calc(100% + 10px); min-width: 220px; padding: 8px; background: #fff; border-radius: 16px;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .06), 0 18px 40px -12px rgb(0 0 0 / .25); display: grid; }
.menu-panel a { padding: 11px 14px; border-radius: 10px; color: #1d1d1f; text-decoration: none; font-size: 16px; }
.menu-panel a:hover { background: #f5f5f7; }
.menu-panel a[aria-current="page"] { font-weight: 600; }
.menu-panel hr { border: 0; border-top: 1px solid #e5e5ea; margin: 6px 8px; }

@media (max-width: 760px) {
  .site-links { display: none; }
  .menu { display: block; }
  .site-in { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) { .menu summary svg { transition: none; } }