.header { position: sticky; top: 0; z-index: 20; height: var(--header-h); background: var(--white); box-shadow: 0 1px 0 rgba(14, 53, 80, 0.1); }
.header__in { height: 100%; max-width: 1440px; margin-inline: auto; padding-inline: var(--gutter); display: flex; align-items: center; gap: var(--s5); }
.brand { display: grid; align-content: center; min-height: 44px; line-height: 1.1; text-decoration: none; color: var(--sea-900); margin-right: auto; }
.brand__name { font-size: 1.125rem; font-weight: 800; }
.brand__handle { font-size: var(--fs-label); font-weight: 500; color: var(--sea-700); }
.header__hand { margin-right: auto; font-size: 1.375rem; color: var(--sea-700); }
.pill { position: relative; display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; filter: drop-shadow(2px 3px 3px var(--shadow)); }
.pill .denom > span { font-size: 1rem; padding: 6px 8px; }
.pill::after { content: ""; position: absolute; inset: -2px -4px; }
.nav { display: flex; gap: var(--s6); }
.nav a { color: var(--sea-900); font-weight: 500; text-decoration: none; padding: var(--s3) 0; }
@media (min-width: 900px) {
  .brand { margin-right: 0; }
  .nav { display: flex; margin-left: auto; }
  .brand__name { font-size: 1.25rem; }
}
@media (hover: hover) and (pointer: fine) { .nav a:hover { color: var(--sea-700); } .pill:hover .denom { transform: rotate(1deg) translateY(-1px); } }