.serate-marker { color: var(--hot); }
.serate-intro { max-width: 760px; margin: 24px 0; line-height: 1.7; }
.serate-notice { margin: 28px 0; padding: 22px 26px; background: var(--yellow); color: var(--bg); border-left: 8px solid var(--hot); overflow-wrap: anywhere; }
.serate-notice h3 { font-family: "Bangers", sans-serif; font-size: 28px; margin: 0 0 8px; letter-spacing: 0; }
.serate-notice p { margin: 0; line-height: 1.6; }
.serate-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr)); gap: 24px; margin-top: 32px; }
.serata-card { --serata-accent: var(--hot); min-width: 0; background: var(--bg2); border: var(--border-panel); overflow-wrap: anywhere; }
.serata-card--purple { --serata-accent: var(--purple); }
.serata-card--yellow { --serata-accent: var(--yellow); }
.serata-card--teal { --serata-accent: var(--teal); }
.serata-card-header { padding: 22px; background: var(--serata-accent); color: var(--bg); }
.serata-card-header h3 { margin: 0 0 8px; font-family: "Bangers", sans-serif; font-size: 34px; letter-spacing: 0; }
.serata-hours { font-family: "Space Mono", monospace; font-size: 14px; }
.serata-card-body { padding: 24px 22px; }
.serata-card-body:empty { display: none; }
.serata-card-body h4 { font-family: "Luckiest Guy", sans-serif; font-size: 24px; line-height: 1.2; margin: 0 0 18px; letter-spacing: 0; }
.serata-card-body p { margin: 0; color: var(--inkDim); font-size: 16px; line-height: 1.65; }
.serata-card-body .serata-day-notice { margin-top: 22px; padding-top: 18px; border-top: 2px solid var(--serata-accent); color: var(--ink); font-weight: 600; }
.serate-cta { margin-top: 36px; text-align: center; }
.serate-cta a, .serate-calendar-link a { max-width: 100%; white-space: normal; overflow-wrap: anywhere; letter-spacing: 0; }
.serate-calendar-link .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 24px; }
.serate-calendar-link h2 { font-family: "Bangers", sans-serif; font-size: 32px; letter-spacing: 0; }
@media (max-width: 599px) {
  .serate-notice { padding: 20px; }
  .serate-grid { grid-template-columns: minmax(0, 1fr); }
  .serate-calendar-link .container { align-items: flex-start; flex-direction: column; }
}