/* Base styles. Most layout is inline in index.html (exported from the design canvas) - move into classes as you build. */
body { margin: 0; background: #F3E9DE; -webkit-font-smoothing: antialiased; }
a { color: #5A1E2B; }
a:hover { color: #8A6630; }

/* Dress-code colour dots under each event */
.palette { display: flex; justify-content: center; padding: 0 4px; margin-top: 14px; }
.swatch { width: 26px; height: 26px; margin: 0 -4px; border-radius: 50%; }

/* Events: art + text side by side on wider screens (alternating), stacked on phones */
.ev-text { text-align: center; }
@media (min-width: 600px) {
  .ev .ev-text { text-align: left; }
  .ev .ev-pal { justify-content: flex-start !important; }
  .ev-flip .ev-text { text-align: right; }
  .ev-flip .ev-pal { justify-content: flex-end !important; }
}