/* ============================================
   MULTI-PAGE LAYOUT OVERRIDES
   Each page now shows exactly one section, so the
   old "stacked sections with border-bottom
   separators" pattern is replaced with a single
   section that fills the available height and
   centers its content vertically.
   ============================================ */
.main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

.main section {
  flex: 1;
  border-bottom: none !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.main footer {
  border-top: 3px solid var(--ink);
  flex-shrink: 0;
}

.side-top .logo {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.side-top .logo i {
  font-size: 16px;
}

.sidebar nav a:visited {
  color: inherit;
}

.sidebar nav a.active:visited,
.sidebar nav a:visited:hover {
  color: var(--paper);
}

.stats-marquee {
  overflow: hidden;
  border-bottom: 3px solid var(--ink);
  flex-shrink: 0;
}

.stats-marquee_track {
  display: inline-flex;
  width: max-content;
  animation: stats-marquee-scroll 22s linear infinite;
}

.stats-marquee:hover .stats-marquee_track {
  animation-play-state: paused;
}

.stats-marquee_track .stat {
  flex-shrink: 0;
  padding: 24px 40px;
  border-right: 2px solid var(--ink);
  white-space: nowrap;
}

@keyframes stats-marquee-scroll {
  from {
    transform: translateX(0);
  }

  to {
    transform: translateX(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .stats-marquee_track {
    animation: none;
  }
}

.main .intro {
  display: grid;
  flex: none;
  justify-content: flex-start;
  border-bottom: 3px solid var(--ink) !important;
}

.main .stats-row {
  flex-shrink: 0;
}