.homepage-header {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  grid-template-areas: "brand visits primary" "artifacts artifacts artifacts";
  gap: 10px 18px;
}

.homepage-header > .brand { grid-area: brand; }
.homepage-header > .visit-counter { grid-area: visits; }
.homepage-header > .nav-links {
  grid-area: primary;
  justify-content: flex-end;
  min-width: 0;
}

.homepage-header .nav-links > a { flex-shrink: 0; white-space: nowrap; }

.artifact-shortcuts {
  grid-area: artifacts;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  overflow-x: auto;
  padding: 7px 2px 3px;
  border-top: 1px solid rgba(111, 134, 200, .22);
  scrollbar-width: thin;
}

.shortcut-label {
  flex-shrink: 0;
  margin-right: 4px;
  color: #52649d;
  font-size: .74rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.artifact-shortcuts a {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid rgba(111, 134, 200, .35);
  border-radius: 999px;
  color: #4a3342;
  background: #fff2f8;
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
}

.artifact-shortcuts a:nth-of-type(2n) { background: #eaf5ff; }
.artifact-shortcuts a:nth-of-type(3n) { background: #fff6d9; }
.artifact-shortcuts a:hover { border-color: #52649d; background: #fff; }
.artifact-shortcuts a:focus-visible {
  outline: 3px solid #52649d;
  outline-offset: 2px;
}

body[data-theme="dark"] .shortcut-label { color: #d8cdea; }
body[data-theme="dark"] .artifact-shortcuts a {
  color: #fff8ff;
  border-color: rgba(216, 220, 255, .4);
  background: rgba(255, 255, 255, .08);
}
body[data-theme="dark"] .artifact-shortcuts a:hover { background: rgba(255, 255, 255, .16); }
body[data-theme="dark"] .artifact-shortcuts a:focus-visible { outline-color: #a9d8ff; }

@media (max-width: 980px) {
  .homepage-header {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "brand visits" "primary primary" "artifacts artifacts";
    gap: 8px 16px;
  }
  .homepage-header > .brand { justify-self: start; }
  .homepage-header > .nav-links { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .homepage-header { padding-top: 10px; padding-bottom: 10px; }
  .homepage-header .nav-links > a { padding: 7px 10px; }
  .shortcut-label { display: none; }
  .artifact-shortcuts { padding-top: 6px; }
}