/* ==========================================================================
   Masthead
   ========================================================================== */

.masthead{
  position: sticky;
  top: 0;
  z-index: 100;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  border-bottom: 1px solid var(--border);
}

@supports not (background: color-mix(in srgb, red 50%, blue)){
  .masthead{ background: var(--bg); }
}

.masthead-inner{
  display: flex;
  align-items: center;
  gap: var(--s5);
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--s3) var(--gutter);
}

/* --- Brand -------------------------------------------------------------- */

.brand{
  display: inline-flex;
  align-items: center;
  gap: var(--s3);
  text-decoration: none;
  margin-right: auto;
}

.brand-mark{
  position: relative;
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 8px;
  background: var(--accent);
  color: var(--accent-ink);
  font: 700 17px/1 var(--mono);
  transition: transform var(--mid) var(--ease), box-shadow var(--mid) ease;
}

.brand:hover .brand-mark{
  transform: rotate(-8deg) scale(1.06);
  box-shadow: 0 6px 22px -4px var(--accent-glow);
}

.brand-text{
  font: 500 15px/1 var(--mono);
  letter-spacing: -.01em;
}
.brand-dim{ color: var(--text-3); }

/* --- Nav ---------------------------------------------------------------- */

.nav ul{
  display: flex;
  align-items: center;
  gap: var(--s5);
}

.nav a{
  position: relative;
  display: inline-block;
  padding-block: var(--s2);
  font-size: 15px;
  color: var(--text-2);
  text-decoration: none;
  transition: color var(--fast) ease;
}

.nav a::after{
  content: "";
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--mid) var(--ease);
}

.nav a:hover,
.nav a.is-active{ color: var(--text); }
.nav a:hover::after,
.nav a.is-active::after{ transform: scaleX(1); }

/* --- End cluster -------------------------------------------------------- */

.masthead-end{
  display: flex;
  align-items: center;
  gap: var(--s2);
}

.icon-btn{
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-2);
  transition: color var(--fast) ease,
              border-color var(--fast) ease,
              background var(--fast) ease;
}
.icon-btn:hover{
  color: var(--text);
  border-color: var(--border-strong);
  background: var(--surface);
}
.icon-btn svg{
  width: 18px; height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Theme toggle swaps which glyph is shown */
.theme-sun{ display: none; }
[data-theme="light"] .theme-sun{ display: block; }
[data-theme="light"] .theme-moon{ display: none; }

.nav-toggle{ display: none; }
.nav-toggle-box{
  display: grid;
  gap: 5px;
  width: 18px;
}
.nav-toggle-box i{
  display: block;
  height: 1.6px;
  background: currentColor;
  border-radius: 2px;
  transition: transform var(--mid) var(--ease), opacity var(--fast) ease;
}
.nav-toggle[aria-expanded="true"] i:first-child{ transform: translateY(3.3px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] i:last-child{ transform: translateY(-3.3px) rotate(-45deg); }

/* --- Narrow ------------------------------------------------------------- */

@media (max-width: 900px){
  .nav-toggle{ display: grid; }

  .nav{
    position: absolute;
    top: 100%; left: 0; right: 0;
    display: none;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .nav.is-open{ display: block; }

  .nav ul{
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--s2) var(--gutter) var(--s4);
  }
  .nav li + li{ border-top: 1px solid var(--border); }
  .nav a{
    display: block;
    padding: var(--s4) 0;
    font-size: 16px;
  }
  .nav a::after{ display: none; }
}