/* header.css — the sticky site header and its mobile menu. Nothing else lives here. */

.site-header{position:sticky;top:0;z-index:50;display:flex;align-items:center;
  justify-content:space-between;gap:18px;padding:16px clamp(16px,4vw,46px)}

.site-header .brand{display:flex;align-items:center;gap:12px;
  padding:8px 18px 8px 10px;border-radius:999px;background:var(--nav-bg);
  backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);
  box-shadow:inset 0 0 0 1px var(--nav-bd);transition:transform .5s var(--ease)}
.site-header .brand:hover{transform:translateY(-2px)}
.site-header .brand img{width:44px;height:auto}
.site-header .brand span{font-family:var(--font-head);font-weight:700;font-size:1.02rem;
  letter-spacing:-.005em;line-height:1;color:var(--nav-fg);white-space:nowrap}

.navlinks{display:flex;align-items:center;gap:4px;padding:6px;border-radius:999px;
  background:var(--nav-bg);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:inset 0 0 0 1px var(--nav-bd)}
.navlinks a{font-size:.86rem;font-weight:500;letter-spacing:.04em;color:var(--nav-fg);
  padding:10px 18px;border-radius:999px;position:relative;opacity:.78;
  transition:color .35s var(--ease),opacity .35s var(--ease)}
.navlinks a:hover{opacity:1}
/* the current page is marked with aria-current, so the styling follows the semantics */
.navlinks a[aria-current="page"]{opacity:1;color:#fff}
.navlinks a[aria-current="page"]::before{content:"";position:absolute;inset:0;border-radius:999px;z-index:-1;
  background:linear-gradient(135deg,var(--red),var(--red-deep));box-shadow:0 6px 20px -6px rgba(220,3,3,.55)}
.navlinks a span{position:relative;z-index:1}

#burger{display:none;width:48px;height:48px;border:0;border-radius:999px;cursor:pointer;
  background:var(--nav-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 0 0 1px var(--nav-bd);position:relative}
#burger i{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--nav-fg);
  transition:transform .4s var(--ease),opacity .3s}
#burger i:nth-child(1){top:17px}#burger i:nth-child(2){top:23px}#burger i:nth-child(3){top:29px}
body.menu #burger i:nth-child(1){transform:translateY(6px) rotate(45deg)}
body.menu #burger i:nth-child(2){opacity:0}
body.menu #burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media(max-width:860px){
  /* On a phone the logo sits in the middle of the header and the menu button
     is pinned to the right edge, rather than the two sitting side by side. */
  .site-header{position:sticky;justify-content:center;padding-inline:clamp(72px,18vw,96px)}
  .site-header .brand{margin-inline:auto}
  #burger{display:block;position:absolute;right:clamp(14px,4vw,24px);top:50%;translate:0 -50%}
  .navlinks{position:fixed;top:82px;right:clamp(12px,4vw,24px);left:clamp(12px,4vw,24px);
    flex-direction:column;align-items:stretch;padding:14px;border-radius:var(--r-md);gap:2px;
    opacity:0;visibility:hidden;transform:translateY(-16px) scale(.97);
    transition:opacity .5s var(--ease),transform .5s var(--ease),visibility .5s;
    background:rgba(255,255,255,.98);box-shadow:inset 0 0 0 1px var(--nav-bd),0 24px 60px -24px rgba(168,4,6,.35)}
  body.menu .navlinks{opacity:1;visibility:visible;transform:none}
  .navlinks a{padding:15px 20px;font-size:1rem;text-align:center}
}