@charset "UTF-8";
/* The site around the app: the poster's palette, readable on a phone, no JavaScript. */
:root {
  /* --s-navy, --s-orange and --s-sand come from chrome.css, linked first: the
     top bar owns them and the map app reads the same three. */
  --s-cream: #f6f2ec; --s-green: #2f5d3a; --s-ink: #17251b; --s-muted: #5d6b60; --s-line: #e2ddd4;
}
html { color-scheme: light; }
body.site { margin: 0; background: var(--s-cream); color: var(--s-ink); font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.site a { color: var(--s-green); }
/* The top bar (.chrome) is in chrome.css, shared with the map app.
   One display face, the system's serif, for the words that carry the page's
   voice: the wordmark (there), the h1 and the hero (here). Zero bytes, and
   the CSP allows no font host but this one anyway. Iowan on Apple, Palatino
   or Georgia elsewhere, Noto Serif on Android; they will not match and need
   not. */
.site__crumbs { padding: 10px 20px 0; font-size: 13px; color: var(--s-muted); }
.site__crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.site__crumbs li + li::before { content: "\203A"; margin-right: 6px; color: var(--s-sand); }
.site__main { max-width: 860px; margin: 0 auto; padding: 16px 20px 40px; }
.site__main h1 { font: 700 clamp(30px, 7.5vw, 40px)/1.1 "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif; letter-spacing: -0.015em; text-wrap: balance; margin: 14px 0 10px; color: var(--s-navy); }
/* A sand mark above each section heading does what the white boxes were
   trying to do -- give the page a rhythm -- for free. */
.site__main h2 { font-size: 20px; letter-spacing: -0.01em; margin: 32px 0 12px; color: var(--s-navy); }
.site__main h2::before { content: ""; display: block; width: 28px; height: 3px; background: var(--s-sand); border-radius: 2px; margin-bottom: 8px; }
.site__column h2::before, .site__prose h2::before { width: 20px; }
.site__lede { font-size: 19px; line-height: 1.45; max-width: 36em; color: var(--s-navy); margin: 0 0 20px; }
.site__launch { display: inline-block; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 14px; }
/* `.site a` sets the link colour at a higher specificity than one class, so
   the buttons name themselves as anchors too, or the primary one is green
   text on a green pill. */
/* Orange means "map", here as in the header pill, and it is the one action a
   stranger needs, so it gets a thumb-sized target on its own line. Navy text:
   white on this orange is 3.4:1 and fails AA; navy is 4.6:1. */
.site a.site__launch--primary { background: var(--s-orange); color: var(--s-navy); padding: 12px 20px; font-size: 16px; }
.site a.site__launch--primary:hover { background: #d4541a; color: var(--s-navy); }
.site__lede .site__launch--primary { display: block; width: fit-content; margin-top: 14px; }
.site a.site__launch--quiet { background: #fff; color: var(--s-green); border: 1px solid var(--s-line); padding: 4px 10px; font-size: 13px; }
/* The index: every way in, with its number. The list item is the card; the
   entry link, the time row and the town row sit inside it. */
.site__index h2 .site__count { font-weight: 500; margin-left: 6px; }
.site__index h2 a { color: var(--s-navy); }
.site__index ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
/* One accent edge rather than four grey ones. */
.site__index li { padding: 12px 14px 12px 16px; background: #fff; border: 1px solid var(--s-line); border-left: 3px solid var(--s-sand); border-radius: 6px; }
.site__index li:hover { border-left-color: var(--s-orange); }
.site a.site__entry { display: block; text-decoration: none; color: var(--s-ink); }
.site__index li strong { display: block; font-size: 16px; color: var(--s-navy); }
.site__index li .site__detail { display: block; font-size: 13px; color: var(--s-muted); margin-top: 1px; }
.site__index li .site__entry > .site__count { display: block; margin-top: 4px; font-size: 13px; color: var(--s-green); font-weight: 600; }
.site__index--areas ul { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
.site__times { margin: 6px 0 0; font-size: 13px; color: var(--s-muted); line-height: 1.7; }
.site__times a { color: var(--s-green); text-decoration: none; white-space: nowrap; }
.site__times a:hover { text-decoration: underline; }
.site__times .site__count { display: inline; font-weight: 600; color: var(--s-green); }
.site__times--lead { font-size: 14px; margin: 0 0 12px; }
/* One line, cut mid-word with an ellipsis rather than wrapped; the county page lists them all. */
.site__towns { margin: 4px 0 0; font-size: 13px; color: var(--s-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site__towns a { color: var(--s-green); text-decoration: none; }
.site__towns a:hover { text-decoration: underline; }
.site__hero h1 { font-size: clamp(38px, 10vw, 56px); color: var(--s-green); }
.site__links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 14px; }
.site__links li { font-size: 15px; }
.site__links--dense li { font-size: 14px; }
.site__count { color: var(--s-muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.site__list { list-style: none; margin: 0; padding: 0; counter-reset: item; }
.site__item { padding: 16px 0; border-top: 1px solid var(--s-line); }
.site__item h3 { margin: 0 0 2px; font-size: 18px; line-height: 1.25; }
.site__item h3 a { color: var(--s-navy); text-decoration: none; }
.site__item h3 a:hover { text-decoration: underline; }
/* Three roles, not three identical grey lines: the kind in green, the address
   and facts quieter, the snippet in ink. */
.site__meta, .site__addr, .site__facts, .site__snippet { margin: 2px 0; font-size: 13.5px; line-height: 1.5; color: var(--s-muted); }
.site__meta { color: var(--s-green); font-weight: 600; }
.site__snippet { color: var(--s-ink); font-size: 14px; }
.site__facts span { white-space: normal; }
.site__item, .site__prose, .site__lede { overflow-wrap: break-word; }
.site__facts a, .site__snippet a { overflow-wrap: anywhere; }
.site__item .site__launch--quiet { margin-top: 8px; }
/* A town's places beside its events, two columns on a wide screen, one on a
   phone. The main column is widened for this page so each list keeps room. */
.site__columns { display: grid; grid-template-columns: 1fr; gap: 20px; margin: 24px 0; }
.site__column, .site__card { padding: 4px 18px 16px; background: #fff; border: 1px solid var(--s-line); border-radius: 12px; min-width: 0; }
.site__card { margin: 16px 0 24px; }
.site__column h2 { margin-top: 14px; }
.site__column .site__item:first-of-type, .site__card .site__item:first-of-type { border-top: 0; }
.site__column .site__more--prompt, .site__card .site__more--prompt { margin-bottom: 0; background: var(--s-cream); }
@media (min-width: 860px) {
  .site__columns { grid-template-columns: 1fr 1fr; gap: 24px; }
  .site__main:has(.site__columns) { max-width: 1120px; }
}
.site__more { margin: 16px 0; color: var(--s-muted); }
/* A borrowed event wears its warning: not in this town, and how far off. The
   triangle is orange on sand so it reads as a caution, not an error. */
.site__away { display: inline-block; margin: 0 0 4px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; color: #7a4a00; background: #fbf0d2; border: 1px solid var(--s-sand); border-radius: 999px; }
.site__away span { color: var(--s-orange); margin-right: 2px; }
/* The live page's closing-soon badge, filled in by site-now.js on the visitor's clock:
   amber under an hour, red under a quarter, grey once the cached page has outlived the hours. */
.site__closing { display: inline-block; margin: 0 0 4px; padding: 2px 8px; font-size: 12.5px; font-weight: 600; border-radius: 999px; border: 1px solid var(--s-sand); background: #fbf0d2; color: #7a4a00; }
.site__closing[data-level="urgent"] { border-color: #d0452b; background: #fde3dd; color: #8a2214; }
.site__closing[data-level="closed"] { border-color: var(--s-line); background: #eee; color: var(--s-muted); }
.site__closing[hidden] { display: none; }
.site__closing span { margin-right: 2px; }
.site__more--prompt { padding: 16px; background: #fff; border: 1px solid var(--s-line); border-radius: 10px; }
.site__more--prompt p { margin: 0 0 10px; color: var(--s-ink); }
.site__spans { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.site__spans a { padding: 5px 11px; border: 1px solid var(--s-line); border-radius: 999px; background: #fff; text-decoration: none; font-size: 13px; }
.site__spans a[aria-current="page"] { background: var(--s-navy); border-color: var(--s-navy); color: #fff; }
.site__spans a .site__count { margin-left: 2px; }
.site__spans a[aria-current="page"] .site__count { color: #fff; opacity: 0.85; }
.site__prose p { max-width: 68ch; }
.site__foot { max-width: 860px; margin: 0 auto; padding: 20px 20px 40px; border-top: 1px solid var(--s-line); font-size: 13px; color: var(--s-muted); }
.site__foot a { color: var(--s-green); }
@media (max-width: 480px) {
  .site__lede { font-size: 17px; }
  .site__lede .site__launch--primary { width: auto; text-align: center; }
}

/* The consent banner, when analytics are configured (server/site/analytics.ts).
   Both buttons the same size and one tap, as in the app: emphasis on Accept is
   allowed, a harder path to Decline is not. `[hidden]` must win over the flex
   display or the attribute does nothing. */
.site__consent { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; justify-content: space-between; max-width: 720px; margin: 0 auto; padding: 12px 14px; background: rgba(252, 252, 250, 0.97); border: 1px solid var(--s-line); border-radius: 10px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18); }
.site__consent[hidden] { display: none; }
.site__consent p { flex: 1 1 220px; margin: 0; font-size: 13px; line-height: 1.4; }
.site__consent-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.site__consent-btn { padding: 7px 16px; font: inherit; font-size: 13px; color: var(--s-ink); background: #fff; border: 1px solid #7a877e; border-radius: 7px; cursor: pointer; }
.site__consent-btn:hover { background: #eef0ec; }
.site__consent-btn--primary { color: #fff; background: var(--s-green); border-color: var(--s-green); font-weight: 600; }
.site__consent-btn--primary:hover { background: #254a2e; }
.site__consent-btn:focus-visible { outline: 2px solid var(--s-green); outline-offset: 1px; }
@media (max-width: 420px) { .site__consent-actions { width: 100%; } .site__consent-btn { flex: 1 1 0; } }