/* The bar at the top and the foot of every page on vardengames.com, the devblog's too. Self-contained
   (its own colours and sizes), so they look the same whatever page they're on. */
.top {
  --h-dark: #1d1b17; --h-cream: #efe7d4; --h-gold: #d8b028; --h-mustard: #c99a24; --h-link: #d9d2c2;
  position: sticky; top: 0; z-index: 10; background: var(--h-dark); color: var(--h-cream);
  border-bottom: 3px solid var(--h-mustard);
}
.top .wrap {
  max-width: 1040px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; min-height: 58px; flex-wrap: wrap;
}
.top .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 6px 0; }
.top .brand .disc { width: 40px; height: 40px; display: block; }
.top .brand .disc img { display: block; width: 40px; height: 40px; }
.top .brand span { font: bold 15px Georgia, 'Times New Roman', serif; letter-spacing: 0.32em; color: var(--h-gold); text-transform: uppercase; }
.top nav { display: flex; gap: 4px 18px; flex-wrap: wrap; }
.top nav a {
  font: bold 13px 'Courier New', Courier, 'Nimbus Mono PS', monospace; letter-spacing: 0.12em; text-transform: uppercase;
  text-decoration: none; color: var(--h-link); padding: 4px 0; border-bottom: 2px solid transparent;
}
.top nav a:hover, .top nav a[aria-current] { color: var(--h-gold); border-bottom-color: var(--h-gold); }
footer.foot {
  background: #1d1b17; color: #77716a; font: 13px 'Courier New', Courier, 'Nimbus Mono PS', monospace;
  padding: 22px 0; border-top: 3px solid #c99a24; margin: 0;
}
footer.foot .wrap {
  max-width: 1040px; margin: 0 auto; padding: 0 24px; box-sizing: border-box;
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}
footer.foot a { color: #b5ad9c; text-decoration: none; font: inherit; letter-spacing: normal; text-transform: none; }
footer.foot a:hover { color: #d8b028; }
@media (max-width: 760px) {
  .top .wrap { padding-top: 6px; padding-bottom: 6px; }
}