/* Direct, thumb-sized routes from the opening to the fair's real highlights. */
.hero-attractions {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  width: min(100%,500px);
  margin-top: 22px;
  border-top: 1px solid rgba(255,227,197,.28);
  border-bottom: 1px solid rgba(255,227,197,.28);
}
.hero-attractions a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 70px;
  padding: 9px 11px;
  color: #fff9ef;
  text-decoration: none;
  transition: background-color .18s ease;
}
.hero-attractions a:nth-child(2n) { border-left: 1px solid rgba(255,227,197,.23); }
.hero-attractions a:nth-child(n+3) { border-top: 1px solid rgba(255,227,197,.23); }
.hero-attractions a:hover { background-color: rgba(255,232,205,.09); }
.hero-attractions a:focus-visible { outline: 2px solid #f8c77f; outline-offset: -2px; }
.hero-attractions svg {
  flex: none;
  width: 21px;
  height: 21px;
  fill: none;
  stroke: #f5bc70;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.hero-attractions span { display: block; min-width: 0; }
.hero-attractions strong,
.hero-attractions small { display: block; }
.hero-attractions strong { font-size: 14px; line-height: 1.2; font-weight: 800; }
.hero-attractions small { margin-top: 3px; color: #e5cdb7; font-size: 12px; line-height: 1.25; }
#goodie-bag, #lucky-draw, #spin-the-wheel, #stamp-rewards { scroll-margin-top: 18px; }
@media (max-width:700px) {
  .hero-attractions { margin-top: 18px; }
  .hero-attractions a { min-height: 72px; padding-inline: 7px; gap: 7px; }
  .hero-attractions svg { width: 19px; height: 19px; }
  .hero-attractions strong { font-size: 13.5px; }
  .hero-attractions small { font-size: 11.5px; }
}
@media (prefers-reduced-motion:reduce) {
  .hero-attractions a { transition: none; }
}