/* Sticky header. Desktop: logo, nav, phone button. Phone: logo + burger (<details>, no JS). */
.header{border-bottom:1px solid var(--line);background:var(--bg-2);position:sticky;top:0;z-index:30}
.header .wrap{display:flex;align-items:center;justify-content:space-between;height:var(--header-h);gap:16px}
.logo img{height:44px;width:auto;display:block}
.nav{display:none;gap:28px;font-weight:500;font-size:.95rem;color:var(--ink-2)}
.nav a:hover{color:var(--ink)}
.header > .wrap > .btn{display:none}

.nav-mobile{position:static}
.nav-mobile summary{list-style:none}
.nav-mobile summary::-webkit-details-marker{display:none}
.burger{width:42px;height:42px;border:1px solid var(--line);border-radius:var(--radius-sm);background:transparent;display:grid;place-items:center;cursor:pointer}
.burger span{width:16px;height:2px;background:var(--ink);box-shadow:0 -5px 0 var(--ink),0 5px 0 var(--ink)}
.nav-mobile__links{position:absolute;left:0;right:0;top:100%;display:grid;background:var(--bg-2);border-bottom:1px solid var(--line);box-shadow:0 12px 24px rgba(var(--shadow-rgb),.12)}
/* Chromium hides closed <details> content with content-visibility, which makes its 0-wide slot the containing
   block: the hidden links then lay out past the screen edge. Taking them out of layout while closed stops that. */
.nav-mobile:not([open]) .nav-mobile__links{display:none}
.nav-mobile__links a{padding:14px var(--gutter);border-top:1px solid var(--line);font-weight:500}
.nav-mobile__links a:hover{background:var(--bg-3)}

@media(min-width:1024px){ /* breakpoint: desktop */
  .nav{display:flex}
  .header > .wrap > .btn{display:inline-flex}
  .nav-mobile{display:none}
}