/* ---- Brand knobs: change these to match Jenny Bee Quilts, everything else follows ---- */
:root{
  --jb-font-head: "Georgia", "Times New Roman", serif;      /* event names */
  --jb-font-body: system-ui, -apple-system, sans-serif;     /* everything else */
  --jb-accent: #b56576;        /* dusty rose — date badge, links */
  --jb-accent-dark: #6d435a;   /* plum — headings */
  --jb-ink: #2e2a2e;
  --jb-muted: #7a7480;
  --jb-card-bg: #ffffff;
  --jb-card-border: #ece7ea;
  --jb-featured-bg: #fbf3f5;
  --jb-radius: 14px;
}

*{ box-sizing: border-box; }
body{ margin:0; font-family: var(--jb-font-body); color: var(--jb-ink); background: transparent; }

.jb-events{ max-width: 720px; margin: 0 auto; padding: 8px; }
.jb-list{ display: flex; flex-direction: column; gap: 14px; }

.jb-card{
  display: flex; gap: 16px;
  background: var(--jb-card-bg);
  border: 1px solid var(--jb-card-border);
  border-radius: var(--jb-radius);
  padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.jb-card--featured{ background: var(--jb-featured-bg); border-color: var(--jb-accent); }

.jb-date{
  flex: 0 0 auto; width: 58px; height: fit-content; text-align: center;
  border-radius: 10px; padding: 8px 0;
  background: var(--jb-accent); color: #fff;
}
.jb-date__month{ display:block; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.jb-date__day{ display:block; font-size: 24px; font-weight: 700; line-height: 1.1; }

.jb-body{ flex: 1 1 auto; min-width: 0; }
.jb-name{ font-family: var(--jb-font-head); margin: 0 0 4px; font-size: 20px; color: var(--jb-accent-dark); }
.jb-meta{ margin: 0 0 2px; font-size: 14px; color: var(--jb-muted); }
.jb-details{ margin: 8px 0 10px; font-size: 15px; line-height: 1.45; }
.jb-link{ display: inline-block; font-size: 14px; font-weight: 600; color: var(--jb-accent); text-decoration: none; }
.jb-link:hover{ text-decoration: underline; }

.jb-empty{ text-align: center; color: var(--jb-muted); padding: 24px 8px; font-size: 15px; }

@media (max-width: 420px){
  .jb-card{ gap: 12px; padding: 14px; }
  .jb-date{ width: 50px; }
  .jb-name{ font-size: 18px; }
}