/* Bike and organizer marks share one composition at every screen size. */
.hero--handlebar { min-height: 820px; }
.hero-scene {
  position: absolute;
  top: 210px;
  left: 50%;
  width: min(calc(100% - 64px), 1080px);
  height: 440px;
  transform: translateX(-50%);
}
.hero--handlebar .hero-scene .bike-art { inset: 0 8%; }
.hero--handlebar .hero-organizers {
  inset: 0;
  width: 100%;
  padding: 0;
  transform: none;
  pointer-events: none;
}
.hero--handlebar .organizers-lockup { display: contents; }
.hero--handlebar .organizer-cross { display: none; }
.hero--handlebar .organizer-mark {
  position: absolute;
  opacity: .95;
  mix-blend-mode: screen;
  filter: none;
}
.hero--handlebar .organizer-coalition {
  left: 0;
  top: 44px;
  width: 42%;
  transform: rotate(-3deg);
}
.hero--handlebar .organizer-ubff {
  right: 0;
  top: 62px;
  width: 17%;
  transform: rotate(3deg);
}
.hero--handlebar .sticker {
  top: auto;
  bottom: 24px;
  right: 1%;
  font-size: 20px;
  padding: 12px 15px;
  transform: rotate(9deg);
}
@media (min-width: 1600px) {
  .hero-scene { top: 245px; }
  .hero--handlebar { min-height: 855px; }
}
@media (min-width: 641px) and (max-width: 1000px) {
  .hero--handlebar { height: 780px; min-height: 780px; }
  .hero--handlebar .hero-title { top: 52px; }
  .hero-scene { top: 205px; height: 390px; width: calc(100% - 48px); }
  .hero--handlebar .hero-scene .bike-art { inset: 20px 4% 0; }
  .hero--handlebar .organizer-coalition { top: 32px; width: 46%; }
  .hero--handlebar .organizer-ubff { top: 44px; width: 19%; }
  .hero--handlebar .sticker { bottom: 0; font-size: 17px; }
}
@media (max-width: 640px) {
  .hero--handlebar { height: 730px; min-height: 730px; }
  .hero-scene { top: 187px; width: calc(100% - 28px); height: 345px; }
  /* The bigger coalition mark needs room: the handlebar used to cross its bottom line. */
  .hero--handlebar .hero-scene .bike-art { inset: 78px -6% 0; }
  .hero--handlebar .organizer-coalition { top: 8px; left: 0; width: 66%; transform: rotate(-3deg); }
  .hero--handlebar .organizer-ubff { top: 22px; right: 0; width: 25%; transform: rotate(3deg); }
  .hero--handlebar .sticker { bottom: 5px; right: 0; font-size: 12px; padding: 8px 10px; }
}
@media (max-width: 360px) {
  .hero-scene { height: 320px; }
  .hero--handlebar { height: 705px; min-height: 705px; }
}

/* The lime ticker uses a single dark ink, like the rest of its lettering. */
.ticker { height: 58px; }
/* The ticker carries the marks alone — the organisation names would be unreadable at this speed. */
/* A turned plus stands between the marks: + coalition + ubff + coalition ... */
.ticker span { gap: 26px; padding-right: 26px; }
.ticker b { display: inline-flex; }
.ticker-plus { width: 14px; height: 14px; transform: rotate(45deg); }
/* Smaller lettering than the old ticker: the strip should read as a quiet band. */
.ticker span { font-size: 18px; }
@media (max-width: 640px) { .ticker span { font-size: 15px; } }
@media (max-width: 640px) {
  .ticker { height: 52px; }
  .ticker .ticker-partners { gap: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .ticker > div { animation: none; }
}