.site-nav {
  position: relative;
}

.nav-open {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.nav-burger {
  display: none;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 28px;
  font-family: 'Jersey 10', sans-serif;
  font-size: 21px;
  letter-spacing: .14em;
  line-height: 1.9;
}

.nav-list a {
  color: var(--ink);
  text-decoration: none;
}

/* The long labels in the nav; tighter tracking keeps them from sprawling
   next to Blog/Game/Team. */
.nav-list .nav-sponsors {
  letter-spacing: .06em;
}

.nav-list .nav-goodies {
  letter-spacing: .08em;
}

@media (min-width: 1180px) {
  .nav-list a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
}

/* The six-item nav plus the logo needs ~1180px on one line; below that the
   burger takes over. */
@media (max-width: 1179px) {
  .nav-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 6px;
    cursor: pointer;
    background: var(--bg);
    transform: translateY(-4px);
  }
  .nav-burger span {
    width: 24px;
    height: 3px;
    background: var(--ink);
  }
  .nav-list {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 20;
    flex-direction: column;
    gap: 14px;
    background: var(--card);
    border: 2px solid var(--line);
    border-radius: 10px;
    padding: 16px 26px;
  }
  .nav-open:checked ~ .nav-list {
    display: flex;
  }
}