/* The list and event pages the build writes (pipeline/pages.mjs): the map's top rows (the chips, cards.css) over a
   reading column like the About page's, the map's cards inside it, on an event's page the map of its place first,
   a footer that leads onward, and one action in a bar at the bottom, as the submission service's pages have. Colors,
   radii, shadows and the font are the tokens in tokens.css (docs/design.md); nothing here names a color. */
* { box-sizing: border-box; }
html { background: var(--map-land); }
body { margin: 0; color: var(--ink); font: 14px/1.45 var(--font); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
[hidden] { display: none !important; } /* what the page's script files away stays away, whatever else styles it */
main { max-width: 640px; min-height: 100vh; margin: 0 auto; padding: max(8px, env(safe-area-inset-top)) 0 calc(80px + env(safe-area-inset-bottom)); background: var(--surface); }

/* The top: the site's name, the About link and the time chips (the map's time choices), which here lead to the lists. */
.top { display: flex; align-items: center; justify-content: space-between; padding: 0 16px; }
.top .home { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: var(--ink-2); font-size: 14px; font-weight: 600; text-decoration: none; }
.top .home img { width: 28px; height: 28px; border-radius: 8px; }
.top .home .wordmark { width: auto; height: 16.6px; border-radius: 0; } /* the logo, drawn at 18px type: its box runs from the capitals' top to the p's tail */
.top .about { position: relative; color: var(--ink-3); font-size: 13px; text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
.top .about::before { content: ""; position: absolute; inset: -14px -6px; }
.top a:hover { color: var(--ink); }
main > .row { padding: 6px 16px; }
h1 { margin: 12px 16px 2px; font-size: 20px; font-weight: 600; line-height: 1.3; }
.lead { margin: 0 16px 4px; color: var(--ink-2); }
/* A season's page (ticket 490): its few lines in our words, then the season's facts. */
.intro { margin: 8px 16px; line-height: 1.45; }
.intro.small { margin-top: 0; color: var(--ink-2); }
.events { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.events li { display: block; }

/* An event page's map: the place and its pin, as on jcmaps.com, drawn by list.js once the map library has loaded;
   until then, and without it, the preview picture stands in. A tap opens the full map at the event. The pin is a
   selected pin: the mint dot with its white edge and the wide soft band, and the event's icon. */
.map { position: relative; height: 40vh; min-height: 200px; max-height: 360px; margin: 16px 0 0; overflow: hidden; background: var(--map-land); cursor: pointer; }
.map a, .map img { display: block; width: 100%; height: 100%; object-fit: cover; }
.map .credits { position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 3px 10px; border-radius: var(--radius-md); background: var(--surface);
  box-shadow: var(--shadow-float); color: var(--ink-3); font-size: 12px; line-height: 18px; }
.map .credits a { display: inline; width: auto; height: auto; color: inherit; text-decoration: none; }
.map .credits a:hover { color: var(--ink); text-decoration: underline; }
.pin { position: relative; display: grid; place-items: center; width: 48px; height: 48px; }
.pin::before, .pin::after { content: ""; position: absolute; border-radius: var(--radius-pill); }
.pin::before { inset: -21.25px; background: var(--accent-band); opacity: .7; } /* the band: 18px beyond the white edge */
.pin::after { inset: 0; background: var(--accent); box-shadow: 0 0 0 3.25px var(--surface); } /* the dot and its white edge */
.pin svg { position: relative; z-index: 1; width: 30px; height: 30px; fill: var(--on-accent); }

/* The event's own page: the card in full, its flyer at full width. */
.event .card { border-bottom: 0; content-visibility: visible; }
.event .card h1 { margin: 2px 0 0; font-size: 20px; }
.event .card .flyer { float: none; display: block; margin: 12px 0 0; }
.event .card .flyer img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; }

/* The footer leads onward: the next events at the place and the others of the day, each a link to its page; a way
   to add an event; the update time. */
footer { padding: 8px 0 24px; color: var(--ink-3); font-size: 13px; }
footer ul { margin: 0; padding: 0 16px; list-style: none; }
footer li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 14px; }
footer li a { color: var(--ink); font-weight: 500; text-decoration: none; }
footer li a:hover { text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
footer li span { color: var(--ink-3); font-size: 13px; }
footer p { margin: 12px 16px 0; }
footer details.also { margin: 12px 16px 0; }
footer details.also > summary { cursor: pointer; padding: 10px 0; color: var(--ink-2); font-size: 14px; font-weight: 600; list-style: none; }
footer details.also > summary::before { content: "› "; color: var(--ink-3); } footer details.also[open] > summary::before { content: "⌄ "; }
footer details.also ul { padding: 0; }
footer p a { color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-strong); text-underline-offset: 3px; }
footer p a:hover { color: var(--ink); text-decoration-color: currentColor; }
footer .small { font-size: 12px; }

/* One action at the bottom: an ink pill, like the About page's buttons; it rides above a phone's home bar. */
.bar { position: fixed; left: 0; right: 0; bottom: 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: var(--surface); box-shadow: var(--shadow-sheet); }
.go { display: flex; align-items: center; justify-content: center; height: 44px; border-radius: var(--radius-pill);
  background: var(--ink); color: var(--surface); font-weight: 500; text-decoration: none; }

@media (min-width: 700px) {
  main { min-height: 0; margin: 24px auto 104px; padding-bottom: 8px; border-radius: var(--radius-lg); box-shadow: var(--shadow-float); overflow: hidden; }
  .bar { left: 50%; bottom: 24px; width: 640px; padding: 8px; transform: translateX(-50%); border-radius: var(--radius-pill); box-shadow: var(--shadow-float); }
}