/* the programme card: club dinner menu on ivory laid paper */
.programme { overflow: visible; }
.programme .head { max-width: 40rem; margin-bottom: var(--s-7); }
.card {
  position: relative; max-width: 52rem; margin: 0 auto; padding: var(--s-6) var(--s-5);
  background: var(--ivory) url(../img/tex/paper-512.webp) 0 0 / 512px; color: var(--ink);
  border: 1px solid var(--brass); outline: 1px solid var(--brass); outline-offset: 5px;
  box-shadow: 0 0 120px 10px rgba(242, 199, 122, 0.08);
}
.card-head { text-align: center; padding-bottom: var(--s-5); border-bottom: 1px solid var(--rule); }
.card .sc { color: var(--oxblood); }
.card-title { margin-top: 6px; font: italic 400 var(--t-turn)/1.15 var(--f-display); color: var(--ink); }
.evenings { list-style: none; padding: 0; }
.ev { padding-block: var(--s-4); border-bottom: 1px solid var(--rule); display: grid; gap: 6px; }
.ev:last-child { border-bottom: 0; padding-bottom: 0; }
.ev p + p { margin-top: 0; }
.ev-n { font: 700 var(--t-label) var(--f-sc); letter-spacing: 0.08em; color: var(--oxblood); }
.ev-t { font: 500 var(--t-h3)/1.15 var(--f-display); color: var(--ink); }
.ev-p { font: italic 400 1rem/1.55 var(--f-body); color: var(--ink); }
.ev-rule { font: italic 400 1rem/1.55 var(--f-body); color: var(--ink); }
.ev-rule .rn { font: 700 0.875rem var(--f-sc); font-style: normal; letter-spacing: 0.08em; color: var(--oxblood); }
/* on a phone the evening carries its House Rules; the plaque is on page two of the book */
@media (max-width: 899px) { .ev .ev-p { display: none; } .ev-l span { display: inline; margin-right: 0.5em; } }
@media (min-width: 900px) { .ev-rule { display: none; } }
.ev-l { font-size: var(--t-small); line-height: 1.55; color: var(--ink); }
.ev-l span { display: block; font: 700 0.875rem var(--f-sc); letter-spacing: 0.08em; color: var(--oxblood); }
.ev-interval { text-align: center; padding-block: var(--s-5); }
.ev-interval p { font: italic 400 1rem/1.55 var(--f-body); color: var(--ink); max-width: 30em; margin-inline: auto; }

@media (min-width: 900px) {
  .card { padding: var(--s-7) var(--s-7) var(--s-6); }
  .ev { grid-template-columns: 11rem 1fr 1fr; column-gap: var(--s-6); grid-template-areas: "n p l" "t p l"; align-items: start; }
  .ev-n { grid-area: n; align-self: end; }
  .ev-t { grid-area: t; }
  .ev-p { grid-area: p; }
  .ev-l { grid-area: l; }
  .ev-interval { display: block; }
  .ev-after { grid-template-areas: "n p p" "t p p"; }
}
@media (min-width: 1200px) { .card { max-width: 62rem; } .ev { grid-template-columns: 13rem 1fr 1fr; } }