/* Countdown: tear-off calendar pages. Each event is a card with the number of days printed huge, like a
   departures board you can read at a glance; the nearest one is filled violet. */
:root { --page: #f3eef5; --card: #ffffff; --ink: #1d1622; --soft: #605668; --line: #dcd2e2; --field: #ece5f0; --act: #6a2c91; --on-act: #ffffff; --stop: #b3261e; color-scheme: light; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --page: #141117; --card: #1e1922; --ink: #f0eaf4; --soft: #ab9fb3; --line: #352c3b; --field: #141117; --act: #cf9bf2; --on-act: #250b36; --stop: #ff8a80; color-scheme: dark; }
}
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.event { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 4px 16px; align-items: center; }
.event.first { background: var(--act); color: var(--on-act); border-color: var(--act); }
.event.first .soft { color: inherit; opacity: .9; } .event.first .quiet { color: inherit; border-color: currentColor; }
.event.past { opacity: .7; }
.num { grid-row: 1 / span 2; font-size: clamp(38px, 11vw, 56px); font-weight: 800; letter-spacing: -0.04em; line-height: 1; min-width: 2ch; text-align: right; }
.num small { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0; text-align: right; }
.event h2 { font-size: 19px; overflow-wrap: anywhere; } .event .soft { grid-column: 2; }
.event button { grid-row: 1 / span 2; grid-column: 3; }
form.card > button { justify-self: start; }