/* The top of the home page: what's on today (or this weekend), a sideways rail of small cards, best first.
   The rail runs to the screen's edges, snaps card to card and fades at the right so the next one shows there's more. */
.lead { margin: 0 0 20px; }
.lead-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 10px 2px; font: 500 26px/1.1 var(--serif); color: var(--ink); }
.lead-date { font: 600 18px/1 var(--serif); font-variant-caps: all-small-caps; letter-spacing: .08em; color: var(--accent-text); }
.lead-rail { display: flex; gap: 10px; margin: 0 -16px; padding: 2px 40px 10px 16px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: 16px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent); }
.lead-rail::-webkit-scrollbar { display: none; }
.lead-rail > li { flex: none; display: flex; width: 168px; scroll-snap-align: start; }
.lead-rail > li.lead-more-item { width: 128px; }

/* A card: the kind's tint and icon with what makes the day special, the name in two lines, then the hours (or the dates). */
.lead button.lead-card { display: grid; grid-template-rows: auto auto 1fr; align-content: start; width: 100%; min-height: 44px; padding: 0; overflow: hidden;
  border: 0; border-radius: 16px; background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / .07), 0 4px 12px rgb(0 0 0 / .04); }
.lead button.lead-card:hover { box-shadow: 0 0 0 2px var(--accent-soft), 0 4px 12px rgb(0 0 0 / .08); }
.lead-art { display: flex; align-items: flex-start; justify-content: space-between; gap: 6px; height: 64px; padding: 10px; background: var(--tint); }
.lead-icon .festive { display: block; width: 40px; height: 40px; filter: drop-shadow(0 3px 4px rgb(0 0 0 / .14)); }
.lead-icon span { font-size: 30px; }
.lead-badge { max-width: 100px; padding: 2px 8px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 12px/1.4 var(--sans); letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lead-title { min-height: calc(2 * 1.2em); margin: 10px 12px 0; font: 600 17px/1.2 var(--serif);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.lead-when { margin: 4px 12px 12px; font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* The last, when the rail can't hold the whole day: the rest on /today. Ink, not gold: the gold is the button under the rail. */
.lead-more { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; padding: 12px; border: 1px dashed var(--mark-edge, #8F8473); border-radius: 16px;
  color: var(--ink); font: 600 18px/1.25 var(--serif); text-align: center; text-decoration: none; }
.lead-more:hover { background: var(--accent-soft); }

.lead .today-cta { max-width: 420px; margin-top: 8px; }
@media (min-width: 641px) {
  .lead-rail { margin: 0; padding-inline: 2px 40px; scroll-padding-inline: 2px; }
}