/* The live-event clock has no purpose in the read-only archive. */
header nav-countdown {
  display: none !important;
}

/* The archive adds a fifth nav icon, so the centered title needs a little more room. */
@media (width >= 64rem) and (width < 68rem) {
  header nav-title {
    display: none !important;
  }
}

header nav[aria-label="Main"] .archive-gallery-link {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.875rem;
  color: var(--nav-glyph, rgb(221 216 203 / 78%));
  background: transparent;
  border-radius: var(--radius-lg, 0.75rem);
  font-size: 1.5rem;
  text-decoration: none;
  transition: color 140ms, translate 140ms;
}

header nav[aria-label="Main"] .archive-gallery-link:hover {
  color: var(--nav-glyph-strong, #ddd8cb);
  translate: 0 -1px;
}

header nav[aria-label="Main"] .archive-gallery-link svg,
nav[aria-label="Main"] .archive-gallery-link[data-gallery-mobile] svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

nav[aria-label="Main"] .archive-gallery-link[data-gallery-mobile] {
  display: flex;
  align-items: center;
  gap: var(--space-2xs, 0.75rem);
  padding: var(--space-2xs, 0.75rem) var(--space-xs, 1rem);
  color: var(--foreground-l1, #32373b);
  border-radius: var(--radius-lg, 0.75rem);
  text-decoration: none;
}

nav[aria-label="Main"] .archive-gallery-link[data-gallery-mobile]:hover {
  background: var(--background-l2, rgb(255 255 255 / 8%));
}

nav[aria-label="Main"] .archive-gallery-link[data-gallery-mobile] svg {
  font-size: 1.25rem;
}

@media (prefers-reduced-motion: reduce) {
  header nav[aria-label="Main"] .archive-gallery-link {
    transition: none;
  }
}