/* ---------- banner + nav ---------- */
.banner {
  background: #000000;
  color: #ffffff;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.banner-track {
  display: inline-flex;
  padding-block: 9px;
  animation: marquee 40s linear infinite;
}
.banner-run {
  flex: none;
  display: inline-flex;
  gap: 1.6em;
  padding-right: 1.6em;
}
@keyframes marquee {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .banner-track {
    animation: none;
  }
}
/* big moving bar under the hero */
.banner--big {
  font: 700 clamp(1.6rem, 1.1rem + 2vw, 2.6rem)/1 var(--font-display);
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom: 3px solid #000;
}
.banner--big .banner-track {
  padding-block: clamp(18px, 2.4vw, 30px);
  /* Its speed is one run's width over this time, so when the words change, change this with them to keep the speed
     (about 81 px/s on desktop, set 3 November 2026: 20% faster than the original): eight items come to 66.7s.
     Light mode runs faster: see the day rules below. */
  animation-duration: 66.7s;
}
.banner--big .banner-run {
  gap: 0.9em;
  padding-right: 0.9em;
}
.banner--big .star {
  display: inline-block;
  margin-left: 0.9em;
  font-family: var(--font-body);
  font-weight: 700;
}
.banner--big .s1 {
  color: #ff5b52;
}
.banner--big .s2 {
  color: #ffd731;
}
.banner--big .s3 {
  color: #4fa6ff;
}
.banner--big .s4 {
  color: #35e08b;
}
.banner--big .s5 {
  color: #b977ff;
}
/* By day the big bar is ivory with each word in a colour and ink stars (the owner's pick from the Mench Bar Picks
   page, 13 November 2026). Night keeps the black bar above. The colours go by each word's place in the run of eight
   (a run repeats the eight twice, so 8n + k hits both copies): if the words or their order change, change these. */
[data-mode="day"] .banner--big {
  background: var(--bg);
  color: var(--ink);
  border-bottom-color: var(--ink);
}
[data-mode="day"] .banner--big .star {
  color: var(--ink);
}
/* 145 px/s on desktop by day (owner's pick, 13 November 2026; night stays at about 81): a run of eight items is
   5439px wide at 1440px, and 5439 / 145 = 37.5s. Phones get about 89 px/s, as their words are smaller. */
[data-mode="day"] .banner--big .banner-track {
  animation-duration: 37.5s;
}
/* Board games and Tea */
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 1),
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 6) {
  color: var(--red);
}
/* Video games */
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 2) {
  color: var(--purple);
}
/* Coffee: a deeper gold than the day yellow, which is too pale to read as text on ivory */
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 3) {
  color: #e8b100;
}
/* Milkshakes and Birthday parties */
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 4),
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 7) {
  color: var(--blue);
}
/* Fries and Tournaments */
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 5),
[data-mode="day"] .banner--big .banner-run > span:nth-child(8n + 8) {
  color: var(--green);
}