/* The King of the Hour site header and brand mark, copied from the kingofthehour.com repository
   (public/site-header.css there). Every page on apps.kingofthehour.com repeats the header's markup: the Three Moves
   layout in app/layout.tsx and the Navier Stokes Explained pages in public/navier-stokes-equations-explained/.
   Change the header's look here and nowhere else; it carries its own colors, width and fonts. On this host the
   links are absolute, so the narrow-screen rule below matches on the end of each href. */
.site-header,
.brand {
  --koth-gold: #ffc72c;
  --koth-ink: #0d1117;
  --koth-line: #303947;
  --koth-white: #fff;
}
.site-header {
  width: min(1180px, calc(100% - 40px));
  margin-inline: auto;
  font-family: "Inter", system-ui, sans-serif;
  line-height: normal;
  height: 88px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 20;
}
.brand {
  color: var(--koth-white);
  text-decoration: none;
  font-family: "Inter", system-ui, sans-serif;
  display: flex;
  align-items: center;
  gap: 11px;
}
.brand-crown {
  display: grid;
  place-items: center;
  width: 45px;
  height: 45px;
  background: var(--koth-gold);
  color: var(--koth-ink);
  clip-path: polygon(8% 12%, 28% 35%, 50% 2%, 72% 35%, 92% 12%, 83% 88%, 17% 88%);
}
.brand-crown svg {
  width: 24px;
  stroke-width: 2.5;
}
.brand > span:last-child {
  display: flex;
  flex-direction: column;
  line-height: 0.8;
}
.brand strong {
  font-family: "Bebas Neue", Impact, sans-serif;
  font-weight: 400;
  letter-spacing: 0.035em;
  font-size: 1.65rem;
}
.brand small {
  color: var(--koth-gold);
  font-size: 0.62rem;
  letter-spacing: 0.24em;
  font-weight: 700;
  margin-top: 7px;
}
.site-header nav {
  display: flex;
  gap: 32px;
  align-items: center;
  font-size: 0.8rem;
  font-weight: 600;
}
.site-header nav a {
  text-decoration: none;
  color: #cbd2dd;
}
.site-header nav a:hover,
.site-header nav a.active {
  color: var(--koth-gold);
}
.site-header .nav-login {
  border: 1px solid var(--koth-line);
  padding: 11px 17px;
  color: var(--koth-white);
}

@media (max-width: 680px) {
  .site-header {
    width: min(100% - 24px, 1180px);
    height: 70px;
  }
  .brand-crown {
    width: 38px;
    height: 38px;
  }
  .brand strong {
    font-size: 1.35rem;
  }
  .site-header nav {
    gap: 8px;
  }
  .site-header nav > a:not(.nav-login):not([href$="/kings"]):not([href$="/#apps"]) {
    display: none;
  }
  .site-header nav a {
    font-size: 0.68rem;
  }
  .site-header .nav-login {
    padding: 9px 11px;
  }
}