/* The same navigation stays mounted as its docked surface gives way to a float. */
:root { --header-reveal-ready: 1; }
.header-dock-panels { display:none; }
.site-header.header-ready { height:var(--header-height); background:transparent; pointer-events:none; }
.header-ready > .header-bar { position:relative; pointer-events:auto; }
.header-ready.is-detached > .header-bar {
  position:absolute; top:12px; left:16px; right:16px;
  min-height:64px; padding:8px clamp(18px,3vw,52px);
  background:var(--surface-dark); border:1px solid #333; border-radius:8px;
  box-shadow:0 8px 28px #0003;
  opacity:var(--header-float-opacity,0);
  transform:translateY(var(--header-float-offset,-100px));
  pointer-events:none;
}
.header-ready.is-detached > .header-bar .brand { flex-basis:160px; width:160px; min-height:46px; }
.header-ready.is-detached.is-floating > .header-bar { pointer-events:auto; }
/* A keyboard user never has to wait for a decorative entrance to finish. */
.header-ready.is-detached:not(.is-menu-open) > .header-bar:has(:focus-visible) { opacity:1; transform:none; pointer-events:auto; }
.header-ready.is-detached.is-menu-open > .header-bar {
  opacity:var(--header-menu-opacity,1); transform:var(--header-menu-transform,none); pointer-events:auto;
}
.header-ready.is-detached > .header-dock-panels {
  position:absolute; inset:0; display:block; overflow:hidden;
  opacity:var(--header-dock-opacity,1); pointer-events:none;
}
.header-dock-panel { position:absolute; inset:0 auto 0 0; width:50%; overflow:hidden; transform:translateX(calc(-1 * var(--header-dock-shift,0px))); }
.header-dock-panel--right { left:50%; transform:translateX(var(--header-dock-shift,0px)); }
.header-dock-copy { width:200%; pointer-events:none; }
.header-dock-panel--right > .header-dock-copy { margin-left:-100%; }
.header-dock-copy .site-nav.is-open { display:none; }
.header-ready.is-menu-open > .header-dock-panels { opacity:0; }

/* The ordinary navigation item is a full-height slice of the header. Its
   weather stays behind the sharply rendered, untransformed label. */
.site-header .site-nav { gap:clamp(8px,1.4vw,26px); }
.site-header .site-nav a:not([data-nav-contact]) {
  position:relative; isolation:isolate; overflow:hidden;
  min-width:120px; min-height:62px; padding:12px 26px; border-radius:0;
  border-inline:1px solid transparent;
  transition:border-color .32s ease;
}
.site-header .site-nav a:not([data-nav-contact])::before {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
}
.site-header .site-nav a:not([data-nav-contact])::before {
  background:
    radial-gradient(ellipse at 12% 0%,#53565b66,transparent 69%),
    radial-gradient(ellipse at 91% 95%,#42454c66,transparent 64%),
    linear-gradient(133deg,#222429,#141518 51%,#24262c);
}
.site-header .site-nav .nav-weather__cloud {
  position:absolute; inset:0; z-index:0; pointer-events:none; opacity:0;
  background:
    radial-gradient(ellipse at 25% 14%,#ffffff45,transparent 48%),
    radial-gradient(ellipse at 81% 83%,#ffffff2e,transparent 51%);
  background-size:160% 140%;
}
.site-header .site-nav a:not([data-nav-contact]) > .link-label { z-index:1; }
.site-header .site-nav .nav-weather {
  position:absolute; z-index:0; inset:0; width:100%; height:100%;
  fill:none; stroke:#f3f5fa; stroke-width:.85; pointer-events:none;
  opacity:0; transition:opacity .35s ease;
}
.nav-weather path { vector-effect:non-scaling-stroke; stroke-linecap:round; stroke-linejoin:miter; }
.nav-weather .nav-weather__branch { stroke:#c4c8d2; stroke-width:.55; }
.nav-weather__strike { opacity:0; stroke-dasharray:100; stroke-dashoffset:100; }
.site-header .site-nav a:not([data-nav-contact]):focus-visible { border-color:#737883; }
.site-header .site-nav a:not([data-nav-contact]):focus-visible::before { opacity:1; }
.site-header .site-nav a:focus-visible > .nav-weather { opacity:1; }
@media (min-width:768px) {
  .site-header .header-bar { padding-block:0; }
  .site-header .site-nav { height:var(--header-height); align-items:center; }
  .site-header .site-nav a:not([data-nav-contact]) { align-self:stretch; min-height:0; }
  .header-ready.is-detached > .header-bar { padding-block:0; }
  .header-ready.is-detached > .header-bar .site-nav { height:62px; }
}
@media (hover:hover) {
  .site-header .site-nav a:not([data-nav-contact]):hover { border-color:#737883; }
  .site-header .site-nav a:not([data-nav-contact]):hover::before { opacity:1; }
  .site-header .site-nav a:hover > .nav-weather { opacity:1; }
}
.site-header .site-nav .storm-static:is(:hover,:focus-visible) .nav-weather__cloud { opacity:.1; }
.site-header .site-nav .storm-static:is(:hover,:focus-visible) .nav-weather__strike { opacity:.22; stroke-dashoffset:0; }

@media (max-width:767px) {
  .site-header .site-nav { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .menu-ready > .header-bar { position:relative; isolation:isolate; flex-wrap:nowrap; }
  .menu-ready .menu-toggle {
    position:relative; justify-content:center; flex:0 0 44px; width:44px;
    min-height:44px; border-radius:5px; cursor:pointer;
  }
  .menu-ready .menu-toggle > span:not(.menu-toggle__lines) { display:none; }
  .menu-toggle .menu-toggle__lines {
    display:block; width:22px; height:16px; border:0;
    background:linear-gradient(currentColor,currentColor) center/22px 1px no-repeat;
    transition:background-size .18s ease;
  }
  .menu-toggle__lines::before,.menu-toggle .menu-toggle__lines::after {
    content:''; position:absolute; top:0; left:0; width:22px; height:1px;
    background:currentColor; transform-origin:center;
    transition:transform .3s cubic-bezier(.2,.7,.25,1),top .3s cubic-bezier(.2,.7,.25,1);
  }
  .menu-toggle .menu-toggle__lines::after { top:15px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines { background-size:0 1px; }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines::before { top:7.5px; transform:rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-toggle__lines::after { top:7.5px; transform:rotate(-45deg); }
  .menu-ready > .header-bar > .site-nav,
  .header-ready.is-detached > .header-bar > .site-nav {
    display:grid; position:absolute; z-index:-1;
    top:calc(100% - 1px); left:12px; right:12px; min-width:0;
    grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px;
    padding:12px 8px; margin:0; border:1px solid #363636; border-top:0;
    border-radius:0 0 8px 8px; background:var(--surface-dark);
    box-shadow:0 12px 22px #0003;
    opacity:0; visibility:hidden; pointer-events:none; transform:translateY(-18px);
    clip-path:inset(0 0 100% 0 round 0 0 8px 8px);
    transition:transform .35s cubic-bezier(.2,.7,.25,1),opacity .2s ease,clip-path .35s cubic-bezier(.2,.7,.25,1),visibility 0s .35s;
  }
  .menu-ready > .header-bar > .site-nav.is-open {
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    clip-path:inset(0 0 0 0 round 0 0 8px 8px); transition-delay:0s;
  }
  .site-header .site-nav a:not([data-nav-contact]) {
    min-width:0; min-height:44px; padding:8px 10px; border:0; border-radius:4px;
  }
  .header-ready.is-detached > .header-bar { top:10px; left:12px; right:12px; min-height:60px; padding:7px 14px; gap:8px 12px; }
  .header-ready.is-detached > .header-bar .brand { flex-basis:132px; width:132px; min-height:44px; }
  .header-ready.is-detached .site-nav a:not([data-nav-contact]) { min-height:44px; }
}
@media (prefers-reduced-motion:reduce) {
  .header-ready > .header-dock-panels { display:none; }
  .header-ready.is-detached > .header-bar { transform:none; opacity:1; }
  .site-header .site-nav a:is(:hover,:focus-visible) .nav-weather__cloud { opacity:.1; }
  .site-header .site-nav a:is(:hover,:focus-visible) .nav-weather__strike {
    opacity:.22; stroke-dashoffset:0;
  }
}