/* Header: logo link, desktop navigation, the "Menu" button under 60rem. Contract: docs/shell-contract.md. */
.site-header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: color-mix(in srgb, var(--page) 92%, transparent); -webkit-backdrop-filter: blur(0.625rem); backdrop-filter: blur(0.625rem); border-bottom: 1px solid var(--line); }
.site-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: .1875rem; background: var(--grad-bar); opacity: .9; }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; }
.brand { display: inline-flex; align-items: center; gap: .75rem; text-decoration: none; color: var(--ink); }
.brand:hover, .brand.is-hover { color: var(--ink); }
.brand .mark { flex: none; transition: transform .5s cubic-bezier(.3, 1.4, .5, 1); }
.brand.is-hover .mark { transform: rotate(-4deg) scale(1.08); }
@media (any-hover: hover) { .brand:hover .mark { transform: rotate(-4deg) scale(1.08); } }
.brand .nm { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; letter-spacing: .07em; text-transform: uppercase; line-height: 1; }

.nav { display: flex; align-items: center; gap: 1.75rem; }
.nav a:not(.btn) { font-size: var(--fs-ui); color: var(--ink); text-decoration: none; padding-block: .4rem; background: linear-gradient(var(--teal), var(--teal)) no-repeat 50% 100% / 0 .1875rem; transition: background-size .3s ease, color .2s; }
.nav a:not(.btn).is-hover { color: var(--teal); background-size: 100% .1875rem; }
@media (any-hover: hover) { .nav a:not(.btn):hover { color: var(--teal); background-size: 100% .1875rem; } }
.nav a[aria-current="page"]:not(.btn) { background-size: 100% .1875rem; }

.menu-btn { display: none; font: inherit; font-size: var(--fs-ui); font-weight: 700; background: none; border: .125rem solid var(--ink); color: var(--ink); border-radius: var(--radius); padding: .4rem .9rem; cursor: pointer; }
.menu-btn[aria-expanded="true"] { background: var(--ink); color: var(--page); }

@media (max-width: 59.99rem) {
  .menu-btn { display: inline-block; }
  .brand .nm { font-size: 1rem; }
  .nav { flex-wrap: wrap; gap: 1rem; }
  /* With scripting on, the menu is closed until the button opens it; without it the links simply stack below the bar. */
  .js .nav { display: none; position: absolute; left: 0; right: 0; top: 100%; background: var(--page); border-bottom: 1px solid var(--line); flex-direction: column; align-items: flex-start; gap: .25rem; padding: 1rem max(1rem, env(safe-area-inset-left, 0px)) 1.5rem; }
  .js .nav.is-open { display: flex; }
  .js .nav a:not(.btn) { padding-block: .6rem; }
}
@media (max-width: 59.99rem) { html:not(.js) .site-header .wrap { flex-wrap: wrap; padding-block: .75rem; } }

/* The logo shimmer is a SMIL animation; shell.js pauses it for visitors who prefer reduced motion. */