/* ZeroGrav DM: the events page (events/), in the credits page's look (css/credits.css), with the front page's comet
   (css/comet.css) crossing its heading. Each event is one <li class="event"> in events/index.html. */

/* the comet, coming in beside the heading, its tails trailing up and away to the right: in a layer across the top of
   the screen that clips them at its edge, so they never widen the page */
.events-sky { position: absolute; left: 0; right: 0; top: 0; height: 320px; overflow: hidden; pointer-events: none; }
.events-sky .comet-art { --kk: 1.15; --a: -24deg; left: calc(50% + min(10rem, 30vw)); top: calc(126px + env(safe-area-inset-top, 0px)); }
.page { position: relative; }

/* the list */
.events { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.event {
  position: relative; padding: 18px 20px 18px 22px; border: 1px solid var(--line); border-radius: 12px;
  background: rgba(8, 10, 20, .55);
}
/* a thin light down the left edge, in the comet's colour for what's coming, brass for what's on, dim for what's over */
.event::before { content: ""; position: absolute; left: -1px; top: 14px; bottom: 14px; width: 2px; border-radius: 2px; background: rgba(156, 246, 212, .7); box-shadow: 0 0 8px rgba(156, 246, 212, .35); }
.event[data-status="on"]::before { background: var(--brass-hi); box-shadow: 0 0 8px rgba(231, 194, 122, .45); }
.event[data-status="over"] { opacity: .6; }
.event[data-status="over"]::before { background: var(--ink-3); box-shadow: none; }
.event .when { margin: 0 0 4px; font: 400 13px/1.3 "IM Fell English SC", Georgia, serif; letter-spacing: .08em; color: #9cf6d4; }
.event[data-status="on"] .when { color: var(--brass-hi); }
.event[data-status="over"] .when { color: var(--ink-3); }
.event h3 { margin: 0 0 6px; font: 400 26px/1.15 "IM Fell English", Georgia, serif; color: var(--cream); }
.event h3 a { color: inherit; text-decoration-color: rgba(239, 226, 196, .35); }
.event h3 a:hover { text-decoration-color: currentColor; }
.event p { margin: 0; }

@media (max-width: 560px) {
  .events-sky .comet-art { --kk: .9; top: calc(118px + env(safe-area-inset-top, 0px)); }
  .event { padding: 16px 16px 16px 18px; }
  .event h3 { font-size: 23px; }
}