:root{
  --header-height:60px;
  --border: rgba(255,255,255,.12);
  --turq-1:#004f57;
  --turq-2:#007a86;
}
.site-header{
  position:sticky; top:0; z-index:1000;
  display:grid; grid-template-columns:44px 1fr 44px; align-items:center;
  height:var(--header-height); padding:0 12px; border-bottom:1px solid var(--border);
  box-shadow:0 2px 10px rgba(0,0,0,.1);
}
.gradient-turquoise{ background: linear-gradient(135deg, var(--turq-1), var(--turq-2)); color:#fff; }
.hamburger{
  display:inline-grid; place-items:center; border:0; background:transparent; padding:0; cursor:pointer;
  width:44px; height:44px; grid-column:1;
}
.hamburger__bar,
.hamburger__bar::before,
.hamburger__bar::after{
  content:""; display:block; width:22px; height:2px; background:#ffffff; border-radius:2px;
}
.hamburger__bar{ position:relative; }
.hamburger__bar::before{ position:absolute; top:-6px; left:0; }
.hamburger__bar::after{ position:absolute; top:6px; left:0; }
.site-title{ grid-column:2; justify-self:center; text-align:center; font-weight:600; letter-spacing:.2px; }
.build-tag{ font-size:.8rem; opacity:.85; background:rgba(255,255,255,.16); padding:.15rem .45rem; border-radius:.5rem; margin-left:.5rem; }

.nav-drawer{
  position:fixed; inset:0 auto 0 0; width:78vw; max-width:360px; height:100dvh;
  transform:translateX(-100%); transition:transform .25s ease;
  background: linear-gradient(135deg, var(--turq-1), var(--turq-2));
  color:#fff; border-right:1px solid var(--border); padding-top:var(--header-height);
  overflow:auto; z-index:1001; visibility:hidden; pointer-events:none;
}
.js .nav-drawer{ visibility:hidden; pointer-events:none; transform:translateX(-100%); }
body.is-open{ overflow:hidden; }
body.is-open .nav-drawer{ transform:translateX(0); visibility:visible; pointer-events:auto; }

.backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.35); display:none; z-index:1000; }
body.is-open .backdrop{ display:block; }
[hidden]{ display:none !important; }

.nav-drawer .nav-list{ display:block; padding:0; margin:0; }
.nav-drawer .nav-list li{ display:block; }
.nav-drawer .nav-list a{ display:block; width:100%; padding:14px 20px; text-decoration:none; color:#fff; border-bottom:1px solid rgba(255,255,255,.15); }
.nav-drawer .nav-list a:hover{ background:rgba(255,255,255,.1); }

.nav-list a[aria-current="page"], .nav-list a.active{ background:rgba(255,255,255,.18); }