.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1.5em;
  display: flex;
  justify-content: space-between;
  z-index: 2;
}

.nav-links {
  display: flex;
  gap: 0.5em;
}

.nav-link {
  width: 100%;
  height: max-content;
  background-color: rgba(255, 255, 255, 0.125);
  border-radius: 2em;
  backdrop-filter: blur(10px);
  transition: 0.3s;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.25);
}

.nav-link a {
  display: inline-block;
  padding: 0.75em 1.25em;
}

.article-item {
  position: absolute;
  right: 1.5em;
  width: 280px;
  height: 80px;
  padding: 15px;
  display: flex;
  background-color: rgba(255, 255, 255, 0.125);
  border-radius: 0.5em;
  backdrop-filter: blur(10px);
  cursor: pointer;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.toggle-articles {
  position: absolute;
  right: 1.5em;
  top: calc(1.5em + 240px + 2.25em);
  opacity: 0;
  transition: all 0.3s ease-in-out;
  pointer-events: none;
}

.nav-external-links #article-item-1 {
  top: calc(1.5em);
}

.nav-external-links #article-item-2 {
  top: calc(1.5em + 2px + 0.75em);
}

.nav-external-links #article-item-3 {
  top: calc(1.5em + 4px + 1.5em);
}

.nav-external-links.active #article-item-1 {
  top: calc(1.5em);
}

.nav-external-links.active #article-item-2 {
  top: calc(1.5em + 80px + 0.75em);
}

.nav-external-links.active #article-item-3 {
  top: calc(1.5em + 160px + 1.5em);
}

.nav-external-links.active .toggle-articles {
  opacity: 1;
  pointer-events: all;
}



.article-item-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.article-item-img {
  aspect-ratio: 1;
  width: 50px;
  height: 50px;
  border-radius: 0.35em;
  overflow: hidden;
}

.article-item-content {
  flex: 1;
}

#article-item-name {
  margin-bottom: 0.25em;
}

#article-item-copy {
  opacity: 0.5;
}

@media (max-width: 900px) {
  .navbar {
    padding: 1em;
  }

  .nav-links {
    flex-direction: column;
  }

  .nav-link {
    width: max-content;
  }

  .article-item {
    right: 1em;
  }

  .toggle-articles {
    right: 1em;
    top: calc(1em + 240px + 2.25em);
  }

  .nav-external-links #article-item-1 {
    top: calc(1em);
  }

  .nav-external-links #article-item-2 {
    top: calc(1em + 2px + 0.75em);
  }

  .nav-external-links #article-item-3 {
    top: calc(1em + 4px + 1.5em);
  }

  .nav-external-links.active #article-item-1 {
    top: calc(1em);
  }

  .nav-external-links.active #article-item-2 {
    top: calc(1em + 80px + 0.75em);
  }

  .nav-external-links.active #article-item-3 {
    top: calc(1em + 160px + 1.5em);
  }
}

/* --- markup that changed ------------------------------------------------
 * The nav links are a real <ul>, and the card stack is a <ul> with a button
 * over it. In the template the whole stack was a <div> with an onClick, which
 * no keyboard could reach.
 */
.nav-links {
  list-style: none;
}

.article-stack {
  list-style: none;
}

/* Every offset in this file is written in `em`, and the template's cards were
   <div>s inheriting 16px. As <li>s they inherit the base `li { font-size: 22px }`
   instead, which silently rescaled the whole stack — 1.5em became 33px, not 24.
   The button had the same problem from `button { font-size: 12px }`. Pin both
   back to the basis the offsets were written against. */
.article-item,
.toggle-articles {
  font-size: 1rem;
}

.article-stack-toggle {
  position: absolute;
  font-size: 1rem;
  top: 1.5em;
  right: 1.5em;
  width: 280px;
  height: 92px;
  padding: 0;
  background: none;
  border-radius: 0.5em;
  z-index: 3;
}

.article-stack-toggle:hover {
  background: none;
}

/* It is an invisible hit area sitting on top of the stack. The base `button`
   rule gives every button a backdrop-filter, which here blurred the three
   cards underneath into an unreadable smear. */
.article-stack-toggle {
  backdrop-filter: none;
  border-radius: 0.5em;
}

.nav-external-links.active .article-stack-toggle {
  display: none;
}

@media (max-width: 900px) {
  .article-stack-toggle {
    top: 1em;
    right: 1em;
  }
}