@charset "UTF-8";
/* Hayward Motivational Comedy... /shows list + event detail pages.
   Loaded AFTER /assets/css/site.css. Every value below is Momentum's own rule for the
   event list / event item (reference/momentum_rules_extract.css lines 252-397, harvested
   2026-09-07) or a measurement from the live DOM probes (reference/probes_2026-09-07/event_*.json).
   Generated pages: scripts/build_events.py. */

/* ---------- shared ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.eventlist, .sqs-events-collection-item {
  color: var(--text-dim);   /* body text rgba(255,255,255,.7) */
  line-height: 1.7em;       /* Momentum sets 1.7em, not unitless 1.7: Chrome lays a 16px line out at 27.203125px
                               vs 27.1875px, and the 1/64px per line adds up to 1.5px by the last list row */
}
.eventlist a, .sqs-events-collection-item a { color: var(--pink-link); }
.eventlist-description a:hover, .eventitem-body a:hover { color: var(--pink-soft); }   /* live: colour only */
.eventlist-description p, .eventitem-body p { margin: 0 0 1em; word-wrap: break-word; }
.eventlist-description > :last-child, .eventitem-body > :last-child { margin-bottom: 0; }
.event-datetime-divider::before { content: " – "; }   /* "8:30 PM – 11:30 PM" (literal: a "\2013 " escape would eat the trailing space) */

/* ---------- /shows list (Momentum .eventlist) ---------- */
.eventlist { padding: 0; }
.eventlist-event {
  position: relative;
  margin: 68px 0 0;
  padding: 0;
  display: flow-root;            /* replaces Momentum's trailing <div class="clear"> */
}
.eventlist-event:first-of-type { margin: 0; }

/* thumbnail column: 35% wide, 3:2 crop (305.2 x 203.5 on the 872px content column) */
.eventlist-column-thumbnail {
  display: block;
  float: left;
  width: 35%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: rgba(110, 110, 110, .05);
  text-decoration: none;
}
.eventlist-column-thumbnail img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: 50% 50%;
}
/* event without a flyer (Local Laughs): Momentum keeps a 100px-tall empty column */
.eventlist-event:not(.eventlist-event--hasimg) .eventlist-column-thumbnail {
  aspect-ratio: auto; height: auto; min-height: 100px; background: transparent;
}

/* white 70x70 date tag at top 10 / right 10 of the thumbnail column */
.eventlist-column-date {
  display: block;
  position: absolute;
  top: 0; left: 0;
  width: 35%;
  margin: 0; padding: 0;
  color: #333 !important;
  text-decoration: none !important;
}
.eventlist-datetag {
  display: table;
  position: absolute;
  top: 10px; right: 10px;
  height: auto; min-height: 70px; width: 70px;
  margin: 0; padding: 0;
  background: #fff;
  color: #333;
  font-size: 14px; line-height: 14px;
  text-align: center;
  box-sizing: border-box;
}
.eventlist-event:not(.eventlist-event--hasimg) .eventlist-datetag { top: 0; background: #e8ecec; }
.eventlist-datetag-inner {
  display: table-cell;
  vertical-align: middle;
  margin: 0; padding: 6px;
  color: inherit;
  font-size: 0; line-height: 0; letter-spacing: 0;
}
.eventlist-datetag-startdate--month, .eventlist-datetag-startdate--day {
  margin: 3px 0;
  line-height: 1em;
  text-transform: uppercase;
  white-space: nowrap;
  font-weight: 300;
}
.eventlist-datetag-startdate--month { font-size: 14px; margin-top: 6px; }
.eventlist-datetag-startdate--day { font-size: 26px; }
/* past events: 1px black diagonal through the tag, month/day dimmed to .3 */
.eventlist-datetag-status {
  display: none;
  position: absolute;
  top: 0; left: 35px;
  width: 1px; height: 70px;
  background: #000;
  transform: rotate(45deg);
}
.eventlist-event--past .eventlist-datetag-status { display: block; }
.eventlist-event--past .eventlist-datetag-startdate--month,
.eventlist-event--past .eventlist-datetag-startdate--day { opacity: .3; }

/* info column: 65% wide, 34px gutter */
.eventlist-column-info {
  float: left;
  width: 65%;
  padding: 0 0 0 34px;
  box-sizing: border-box;
}
.eventlist-title {
  margin: 0 0 17px;
  padding: 0;
  color: var(--rose-title);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2em;
  text-transform: capitalize;
  word-wrap: break-word;
}
.eventlist-title .eventlist-title-link { color: inherit; text-decoration: none; font-size: inherit; line-height: inherit; }
.eventlist-meta { list-style: none; margin: 0 0 17px; padding: 0; }   /* 16px / 27.2px lines (measured) */
.eventlist-meta-item { margin: 0; padding: 0; text-align: left; }
.eventlist-description { margin: 0; }   /* Squarespace's .sqs-block wrapper: no padding on desktop (first/last child) */

/* upcoming | past divider: 1px rule, 68px above and below (hr font-size 68px + Squarespace's hr{margin:1em 0}) */
.eventlist-past-upcoming-divider {
  display: block;
  height: 0;
  border: none;
  border-top: 1px solid rgba(230, 230, 230, .8);
  margin: 68px 0;
  padding: 0;
  font-size: 68px; line-height: 68px;
}
.eventlist-past-upcoming-divider[hidden] { display: none; }   /* set by build_events.py / shows.js when a section is empty */

/* ---------- event detail page (Momentum .eventitem) ---------- */
.eventitem-backlink {
  display: inline-block;
  margin: 0 0 51px;
  text-transform: uppercase;
  color: var(--pink-link);
}
/* The arrow is not in Adobe's Proxima Nova subset; on the live page Chrome falls back to Lucida Grande for
   that one glyph (CSS.getPlatformFontsForNode: Proxima Nova Light x19 + Lucida Grande x1). Pin it, and keep
   line-height 1 so the Lucida inline box does not inflate the 27.2px backlink line (Momentum's trailing
   "\0020" space becomes a margin: Lucida's space is 1px wider than Proxima's). */
.eventitem-backlink::before {
  content: "\2190";
  font-family: "Lucida Grande", "Lucida Sans Unicode", sans-serif;
  line-height: 1;
  margin-right: .28em;
}
.eventitem { position: relative; display: flow-root; }
.eventitem-column-meta { float: left; width: 30%; box-sizing: border-box; }
.eventitem-title {
  margin: 0 0 34px;
  padding: 0;
  color: var(--rose-title);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: .01em;
  line-height: 1.2em;
  text-transform: capitalize;
  word-break: break-word; word-wrap: break-word;
}
.eventitem-meta { list-style: none; margin: 0 0 17px; padding: 0; }
.eventitem-meta-item { margin: 0; padding: 0; font-size: .9em; line-height: 1.6em; }   /* 14.4px / 23.04px */
.eventitem-meta-address-line::after { content: ", "; }
.eventitem-meta-address-line:last-of-type::after { content: none; }
.eventitem-meta-address-line--title { display: block; }
.eventitem-meta-address-line--title::after { content: none; }
.eventitem-meta-export-divider { margin: 0 4px; }
.eventitem-meta-export-divider::before { content: "\00B7"; }
.eventitem-column-content { float: left; width: 70%; padding-left: 34px; box-sizing: border-box; }
/* Momentum's (empty, hidden like/share) .eventitem-content-footer still contributes its 17px margin */
.eventitem-column-content::after { content: ""; display: block; margin-top: 17px; }
.eventitem-pager { margin: 170px 0 0; display: flow-root; }
.eventitem-pager-newer, .eventitem-pager-older { float: left; display: inline-block; text-decoration: none; box-sizing: border-box; }
.eventitem-pager-newer { float: right; text-align: right; }
.eventitem-pager-date { color: var(--text-dim); }
.eventitem-pager-title { color: var(--pink-link); }

body[data-page="shows"] .footer-empty { display: block; padding: 0; margin: 0; clear: both; }   /* 0px on desktop, see the 736px block */

/* ---------- narrow layouts ---------- */
/* Momentum stacks both event layouts at 639px (columns), the content column padding shrinks
   to 1em at 736px (#mainContent). Scoped to data-page="shows" so site.css's `main` stays shell-owned. */
@media only screen and (max-width: 736px) {
  body[data-page="shows"] main { padding: 16px; margin-bottom: 43px; }   /* live #mainContent: 1em all round, 43px above the 45px bar */
  .eventlist { padding: 0; }
  /* Squarespace's empty footer block (last child of #mainContent): 0px on desktop, padding 1em at <= 736px
     (momentum_rules_extract.css line 1079), so live mobile pages end 32px below the last line of content. */
  body[data-page="shows"] .footer-empty { display: block; padding: 1em; }
}
/* Squarespace's responsive grid pads the description's .sqs-block wrapper 15px top/bottom at <= 736px
   (reference/site.css: `@media only screen and (max-width:736px) { .sqs-layout .sqs-row .sqs-block:first-child
   { padding-top:15px !important } ...:last-child { padding-bottom:15px !important } }`). Same breakpoint as the
   1em #mainContent padding above; 0 at 737px and up. */
@media only screen and (max-width: 736px) {
  .eventlist-description, .eventitem-body { padding: 15px 0; }
}
@media only screen and (max-width: 639px) {
  .eventlist-column-thumbnail, .eventlist-column-date, .eventlist-column-info { width: 100% !important; }
  .eventlist-column-thumbnail { float: none; }
  .eventlist-event:not(.eventlist-event--hasimg) .eventlist-column-thumbnail { min-height: 0; }
  .eventlist-datetag { left: 0; right: auto; }
  .eventlist-event--hasimg .eventlist-datetag { left: 10px; }
  /* no-flyer row (Local Laughs): the tag sits alone on top, the info column runs full width below it.
     Momentum's `width:70px` on this column loses to the 100% !important above, exactly as on the live site. */
  .eventlist-event:not(.eventlist-event--hasimg) .eventlist-column-date { position: static; float: left; }
  .eventlist-event:not(.eventlist-event--hasimg) .eventlist-column-date .eventlist-datetag { position: static; }
  .eventlist-column-info { float: none; margin: 25.5px 0 0; padding: 0; }
  /* ...and stays a 100%-wide float here (live), so it stacks under the date-column float: title at tag bottom + 25.5px */
  .eventlist-event:not(.eventlist-event--hasimg) .eventlist-column-info { float: left; }

  .eventitem-title { margin-bottom: 17px; }
  .eventitem-column-meta { margin-bottom: 34px; }
  .eventitem-column-meta, .eventitem-column-content { float: none; width: auto; padding: 0; }
}