.ev-list{display:grid;gap:1rem;margin-top:2.75rem}
.ev{
  display:grid;grid-template-columns:7.25rem minmax(0,1fr) auto;gap:1.5rem;align-items:center;
  padding:1.5rem;border-radius:var(--r-card);
  background:var(--paper);border:1px solid color-mix(in srgb,var(--ink) 14%,transparent);
  transition:border-color var(--mid) var(--ease),box-shadow var(--mid) var(--ease);
}
.ev:hover{border-color:color-mix(in srgb,var(--ink) 30%,transparent);box-shadow:0 12px 32px -20px rgba(20,59,31,.4)}
/* one height whatever the label, so the three rows do not step */
.ev-date{
  text-align:center;padding:.7rem .6rem;border-radius:.6rem;
  min-height:4.5rem;display:flex;flex-direction:column;justify-content:center;
  background:color-mix(in srgb,var(--sun) 22%,transparent);
  border:1px solid color-mix(in srgb,var(--sun-ink) 30%,transparent);
}
.ev-date .m{display:block;font-size:var(--label);font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--sun-deep)}
.ev-date .d{display:block;font-family:var(--display);font-size:1.7rem;line-height:1.1;color:var(--forest);letter-spacing:-.02em}
.ev-date .tbd{display:block;font-family:var(--display);font-size:.94rem;line-height:1.3;color:var(--forest)}
.ev h3{font-size:1.15rem;margin-bottom:.3rem}
.ev-meta{display:flex;flex-wrap:wrap;gap:.3rem .9rem;font-size:.82rem;color:var(--muted)}
.ev-meta span{display:flex;align-items:center;gap:.35rem}
.ev-meta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--copper);flex:none}
.ev-tag{
  display:inline-flex;font-size:var(--label);font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:.24rem .5rem;border-radius:.3rem;margin-bottom:.5rem;
}
.ev-tag--free{background:var(--sun);color:var(--forest)}
.ev-tag--paid{background:color-mix(in srgb,var(--ink) 8%,transparent);color:var(--ink-2)}
@media(max-width:720px){
  /* the chip lines up with the tag it belongs to rather than floating at the
     mid-point of a much taller content column */
  .ev{grid-template-columns:6rem minmax(0,1fr);gap:1rem 1.1rem;align-items:start}
  .ev-date{min-height:0;padding:.55rem .5rem}
  .ev .btn{grid-column:1/-1;width:100%}
}

.notice{
  margin-top:2.5rem;padding:1.25rem 1.4rem;border-radius:var(--r-card);
  border:1px solid color-mix(in srgb,var(--sun-ink) 26%,transparent);
  background:color-mix(in srgb,var(--sun) 14%,var(--paper));
  font-size:.92rem;color:var(--ink-2);max-width:44rem;line-height:1.6;
}
.notice strong{color:var(--ink)}