/* /live-music/ only */

/* Page-top picture (America's pick, by permission of the Folsom Times): a
   singer in a black cowboy hat, arm raised, with his band. The photo is
   pinned to its top edge so his raised hand is never cut: 16:9 on desktop
   (1024px and up), 3:2 on tablets and the whole photo on phones, so the
   credit in the bottom right corner always sits below the guitar's
   headstock (on phones it covers the photo's own printed credit). The h1 is
   the brewery's logo, on the blurred right-hand side where the stage tower
   stands (America's approved mock, 28 Oct 2026): 400px wide on a 1440px
   screen, the same 27.78% of the width at every size, its middle 20.14% of
   the width below the photo's top, so it keeps its spot in the photo
   everywhere, clear of his face, hat, hand, the microphones and the guitar's
   headstock. Its right end is 6.25% of the width in from the edge, or 62px
   (18px short of the accessibility toolbar, fixed at the right edge, 44px
   wide) where that is more, on tablets under 992px. On phones it shrinks to
   fit between the hat brim and the toolbar (see below). A soft dark glow
   keeps it readable on the photo. The h1 comes first in the page and sits on
   the photo. The photo's 20px grey bottom border was cropped off (2048 by
   1535 now). */
.page-live-music .lm-hero {
  line-height: normal;
  background: #000;
}
.page-live-music .lm-hero__media {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #1d2433;
}
.page-live-music .lm-hero__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 0;
}
.page-live-music .lm-hero__title {
  --lm-logo-w: 27.778vw;
  position: absolute;
  z-index: 1;
  top: 20.14vw;
  right: max(6.25%, 62px);
  width: var(--lm-logo-w);
  margin: 0;
  line-height: 0;
  transform: translateY(-50%);
}
/* the glow: two soft dark shadows, matched to the mock's */
.page-live-music .lm-hero__title img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 0 calc(var(--lm-logo-w) * .03) rgba(0, 0, 0, .9)) drop-shadow(0 0 calc(var(--lm-logo-w) * .05) rgba(0, 0, 0, .8));
}
/* The Music & Events lettering (America, 29 Oct: "add the pretty Music and events
   title ... back to the blurry area ... to appear after Highway 50 logo lands on the
   top"). It waits unseen in the logo's place and fades in once the logo has flown to
   the header (html.hwy-logo-landed, site.js); on a second visit, with reduced motion
   or high contrast the logo never flies and it is there from the start. alt="": the
   heading already says Live Music and Events. Its first img stays the logo, which is
   what site.js flies. Its right edge lines up with the logo's, so it stays clear of
   the toolbar; the yellow lines fade out at both ends, and a soft warm glow lifts the
   grey letters off the dark blur. */
.page-live-music .lm-hero__title .lm-hero__words {
  position: absolute;
  top: 50%;
  right: 0;
  width: 122%;
  max-width: none;
  opacity: 0;
  transform: translateY(-50%);
  -webkit-mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(to right, transparent, #000 15%, #000 85%, transparent);
  filter: drop-shadow(0 0 calc(var(--lm-logo-w) * .02) rgba(255, 240, 205, .5));
  pointer-events: none;
}
html.hwy-logo-landed .page-live-music .lm-hero__title .lm-hero__words {
  opacity: 1;
  transition: opacity .8s ease-out .15s;
}
@media (prefers-reduced-motion: reduce) {
  html.hwy-logo-landed .page-live-music .lm-hero__title .lm-hero__words { transition: none; }
}
@media (max-width: 1023px) {
  .page-live-music .lm-hero__media { aspect-ratio: 3 / 2; }
}
/* The credit, as real text on a solid black pill in the photo's bottom right
   corner (solid, so the photo's own printed credit never shows through), 16px in
   from the side and 12px up, near the spacing of America's approved mock */
.page-live-music .lm-hero__credit {
  position: absolute;
  z-index: 1;
  right: 16px;
  bottom: 12px;
  margin: 0;
  padding: .1em .6em;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--f-head);
  font-size: var(--fs-h6);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: .02em;
}
/* large text grows it, a little less than the page's own large text, so it
   stays a credit and keeps clear of the guitar */
html.a11y-fontsize .page-live-music .lm-hero__credit { font-size: calc(var(--fs-h6) * .82); }
/* on a small laptop the headstock sits just above the corner: grow a little less,
   and sit lower, 4px up, so the pill stays clear of the tuning pegs */
/* from 1280px the larger text's taller pill sits 8px up, under the pegs too */
@media (min-width: 1280px) {
  html.a11y-fontsize .page-live-music .lm-hero__credit { bottom: 8px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  .page-live-music .lm-hero__credit { bottom: 4px; }
  html.a11y-fontsize .page-live-music .lm-hero__credit { font-size: min(calc(var(--fs-h6) * .82), max(15px, 1.5vw)); }
}
@media (max-width: 699px) {
  .page-live-music .lm-hero__media { aspect-ratio: 2048 / 1535; }
  /* On a phone the header's own logo sits just above the photo, and beside the
     toolbar the photo logo could only be 70 to 114px wide, so it read as a
     second, squeezed copy. The photo shows on its own there; the logo stays in
     the heading for screen readers. */
  .page-live-music .lm-hero__title img {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  /* the lettering would be as squeezed, so the photo stays on its own */
  .page-live-music .lm-hero__title .lm-hero__words { display: none; }
}
/* high contrast paints every box black: the logo's box stays see-through, so
   the logo sits on the photo with its own black edge and glow */
html.a11y-contrast .page-live-music .lm-hero__title { background-color: transparent !important; }
html.a11y-contrast .page-live-music .lm-hero__credit { border: 1px solid #fff !important; }
/* Phones and small tablets: the credit runs to the photo's edge like a tab, its
   words end clear of the toolbar's column (44px wide, fixed at the right edge),
   and on phones it covers the photo's own printed credit. The tab sits on the
   photo's bottom edge, one shape everywhere under 768px: on phones the whole
   photo shows and its printed credit runs down to the last few rows, so none of
   it peeks out underneath. */
@media (max-width: 767px) {
  .page-live-music .lm-hero__credit { right: 0; bottom: 0; padding-right: calc(.6em + 44px); border-radius: 999px 0 0 999px; }
  html.a11y-contrast .page-live-music .lm-hero__credit { border-right-width: 0 !important; }
}
/* From 700px wide the toolbar sits half way down the window, which on a tall
   tablet (an iPad held upright) lands on the credit and the ribbon. There it
   moves up instead, so its bottom edge (with its 1px white ring) stays about
   11px above the top of the credit: the header, the photo (3:2 up to 1023px,
   16:9 from 1024px, the full width), less the credit's offset (12px, 4px on a small laptop) and its own
   height (1.45 of its text, see the large text sizes above). It then sits on
   the photo's blurred right edge, as on a laptop, beside the logo, which
   always ends at least 18px short of it, so the toolbar never covers the logo
   at any window height. On a laptop or a tablet on its side half way is
   already higher, so nothing changes there. */
@media (min-width: 700px) {
  body.page-live-music .a11y-toolbar {
    --lm-photo-h: 56.25vw;
    --lm-credit-off: 12px;
    --lm-credit-h: calc(var(--fs-h6) * 1.45);
    top: min(50%, calc(var(--header-h) + var(--lm-photo-h) - var(--lm-credit-off) - var(--lm-credit-h) - 56px));
  }
  html.a11y-fontsize body.page-live-music .a11y-toolbar { --lm-credit-h: calc(var(--fs-h6) * .82 * 1.45); }
}
@media (min-width: 700px) and (max-width: 1023px) {
  body.page-live-music .a11y-toolbar { --lm-photo-h: 66.667vw; }
}
/* Under 768px the photo's right edge just above the credit is a guitarist's
   head, so the toolbar goes up beside the logo instead, its middle level with
   the logo's (20.14% of the width below the photo's top), on the blurred
   background, as it sits on a laptop. A short window keeps it half way down,
   still beside the logo. From there it scrolls away with the page (site.css). */
@media (max-width: 767px) {
  body.page-live-music .a11y-toolbar { top: min(50svh, calc(var(--header-h) + 20.14vw)); }
}
@media (min-width: 1280px) {
  html.a11y-fontsize body.page-live-music .a11y-toolbar { --lm-credit-off: 8px; }
}
@media (min-width: 1024px) and (max-width: 1279px) {
  body.page-live-music .a11y-toolbar { --lm-credit-off: 4px; }
  html.a11y-fontsize body.page-live-music .a11y-toolbar { --lm-credit-h: calc(min(var(--fs-h6) * .82, max(15px, 1.5vw)) * 1.45); }
}

/* Welcome: dark band, full width on desktop (live "full-width-ex-mobile", wrap padding 30px) */
.page-live-music .welcome { padding-top: 50px; padding-bottom: 90px; }
.page-live-music .welcome__inner { max-width: none; padding-left: 42px; padding-right: 42px; }
.page-live-music .welcome__photo img { display: block; width: 100%; height: auto; }
.page-live-music .welcome__text { padding-top: 30px; }
/* "WELCOME FRIENDS" is an h2 now (the title picture is the page's h1) and
   its tagline an h3; both keep the sizes they had as h1 and h2 */
.page-live-music .welcome__title { margin-bottom: 15px; font-size: var(--fs-h1); line-height: var(--lh-h1); }
.page-live-music .welcome__tagline { font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 400; }
.page-live-music .welcome__tagline,
.page-live-music .welcome .welcome__yellow { color: var(--c-yellow); }
.page-live-music .welcome__note { margin-top: 40px; text-align: center; }
/* the slim strip that is left: just the seating note, close above the lineup */
.page-live-music .welcome--slim { padding-top: 22px; padding-bottom: 22px; }
.page-live-music .welcome--slim .welcome__note { margin-top: 0; }
.page-live-music .welcome--slim .welcome__note p { margin: 0; }
/* The two "Go to" links, each on its own line: an invisible area round each taps as at
   least 44 by 44, as the footer links do. Nothing moves and the focus ring still hugs
   the words. The second line starts at least 46px below the first (21px more than a
   phone's line), so the two areas never meet: 2px apart at the closest. */
.page-live-music .welcome__go > a { position: relative; display: inline-block; }
.page-live-music .welcome__go > a::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translate(-50%, -50%);
}
.page-live-music .welcome__go + .welcome__go { margin-top: max(0px, calc(46px - var(--lh-body))); }
@media (max-width: 767px) {
  .page-live-music .welcome { padding-top: 44px; padding-bottom: 44px; }
  .page-live-music .welcome__inner { padding-left: var(--gutter); padding-right: var(--gutter); }
  .page-live-music .welcome__text { padding-top: 10px; }
}

/* Summary box (live WP Accessibility "content summary") */
.page-live-music .summary { padding-top: 40px; padding-bottom: 30px; }
.page-live-music .summary__box { padding: 30px 30px 16px; background: var(--c-band-light); }
@media (max-width: 767px) {
  .page-live-music .summary__box { padding: 24px 24px 10px; }
}


/* =====================================================================
   The lineup, drawn by /assets/live-music.js from the brewery calendar:
   one month at a time, the month calendar and that month's list together.
   Colours are the site's own: yellow #fad819 (logo, menu), band yellow
   #ffd23f, the header black #181818, black and white. Every animation sits inside
   prefers-reduced-motion: no-preference and stops when the toolbar's high
   contrast mode is on. The "Pause motion" button in the ribbon stops all of
   it (html.lm-still), not only the ribbon.
   ===================================================================== */

/* ---------- Ribbon under the title picture ---------- */
.page-live-music .lm-ribbon {
  position: relative;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background: var(--c-yellow);
  color: #000;
  border-top: 4px solid #000;
  border-bottom: 4px solid #000;
}
.page-live-music .lm-ribbon__viewport { flex: 1 1 auto; min-width: 0; overflow: hidden; }
.page-live-music .lm-ribbon__track,
.page-live-music .lm-ribbon__half { display: flex; flex: none; align-items: center; width: max-content; white-space: nowrap; }
.page-live-music .lm-ribbon__item {
  display: flex;
  align-items: center;
  padding: .8em 0;
  font-family: var(--f-head);
  font-size: var(--fs-h4);
  font-weight: 700;
  line-height: 1;
  letter-spacing: .06em;
  text-transform: uppercase;
}
/* the diamond between items belongs to the item after it, so an item and its
   diamond always come and go together */
.page-live-music .lm-ribbon__item::before {
  content: "";
  flex: none;
  width: .5em;
  height: .5em;
  margin: 0 1.15em;
  background: #000;
  transform: rotate(45deg);
}
/* live-music.js measures one run of the words in this, then removes it */
.page-live-music .lm-ribbon__probe {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  width: max-content;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
}
/* Standing still (reduced motion, the toolbar's high contrast, and before the
   lineup has loaded or without JavaScript): the words once, centred on one
   line with room at both ends. live-music.js leaves out any item that would
   not fit whole, so nothing is cut off at the edge. */
.page-live-music .lm-ribbon:not(.is-live) .lm-ribbon__viewport,
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__viewport { padding: 0 32px; }
.page-live-music .lm-ribbon:not(.is-live) .lm-ribbon__track,
.page-live-music .lm-ribbon:not(.is-live) .lm-ribbon__half,
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__track,
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__half { flex-wrap: wrap; justify-content: center; width: 100%; white-space: normal; }
.page-live-music .lm-ribbon:not(.is-live) .lm-ribbon__item,
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__item { text-align: center; }
.page-live-music .lm-ribbon:not(.is-live) .lm-ribbon__track > .lm-ribbon__item:first-child::before,
.page-live-music .lm-ribbon:not(.is-live) .lm-ribbon__half:first-child > .lm-ribbon__item:first-child::before,
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__half:first-child > .lm-ribbon__item:first-child::before { display: none; }
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__half--clone,
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__item--rep,
html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__item.is-off { display: none; }
@media (prefers-reduced-motion: reduce) {
  .page-live-music .lm-ribbon .lm-ribbon__viewport { padding: 0 32px; }
  .page-live-music .lm-ribbon .lm-ribbon__track,
  .page-live-music .lm-ribbon .lm-ribbon__half { flex-wrap: wrap; justify-content: center; width: 100%; white-space: normal; }
  .page-live-music .lm-ribbon .lm-ribbon__item { text-align: center; }
  .page-live-music .lm-ribbon .lm-ribbon__half:first-child > .lm-ribbon__item:first-child::before { display: none; }
  .page-live-music .lm-ribbon .lm-ribbon__half--clone,
  .page-live-music .lm-ribbon .lm-ribbon__item--rep,
  .page-live-music .lm-ribbon .lm-ribbon__item.is-off { display: none; }
}
@media (max-width: 767px) {
  .page-live-music .lm-ribbon:not(.is-live) .lm-ribbon__viewport,
  html.a11y-contrast .page-live-music .lm-ribbon .lm-ribbon__viewport { padding: 0 16px; }
}
@media (max-width: 767px) and (prefers-reduced-motion: reduce) {
  .page-live-music .lm-ribbon .lm-ribbon__viewport { padding: 0 16px; }
}
/* Pause motion sits at the LEFT end: the accessibility toolbar is fixed at
   the right edge, half way down the window, which is exactly where the
   ribbon lands on a laptop screen, so a button on the right was covered. */
.page-live-music .lm-ribbon__pause {
  display: none;
  flex: none;
  align-items: center;
  gap: .55em;
  min-width: 48px;
  min-height: 48px;
  padding: 0 1.1em;
  border: 0;
  border-right: 4px solid #000;
  background: #000;
  color: #fff;
  font-family: var(--f-head);
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.page-live-music .lm-ribbon__pause[hidden] { display: none !important; }
.page-live-music .lm-ribbon__pause:hover { color: var(--c-yellow); }
.page-live-music .lm-ribbon__pause:focus-visible { outline: 3px solid var(--c-yellow); outline-offset: -6px; }
/* Moving: two pause bars. Still: a circular arrow, "Resume motion". Never a
   play triangle: the ribbon has no sound and must not look like a player. */
.page-live-music .lm-ribbon__icon { display: block; flex: none; width: 1.05em; height: 1.05em; fill: currentColor; }
.page-live-music .lm-ribbon__icon--resume { display: none; }
.page-live-music .lm-ribbon.is-paused .lm-ribbon__icon--pause { display: none; }
.page-live-music .lm-ribbon.is-paused .lm-ribbon__icon--resume { display: block; }

/* ---------- Lineup band ---------- */
.page-live-music .lm { padding-top: 64px; padding-bottom: 80px; }
@media (max-width: 767px) {
  .page-live-music .lm { padding-top: 40px; padding-bottom: 52px; }
  .page-live-music .lm > .container { padding-left: 16px; padding-right: 16px; }
}

/* Top: the title and Follow us on the left, the month calendar on the right */
.page-live-music .lm-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px 56px;
  align-items: center;
  margin-bottom: 56px;
}
@media (min-width: 768px) {
  .page-live-music .lm-top { grid-template-columns: minmax(0, 1fr) minmax(0, 23em); }
  .page-live-music .lm-top:has(> .lm-top__cal:empty) { grid-template-columns: minmax(0, 1fr); }
}
/* Tablets and small laptops: the title column beside the calendar was narrow
   (273px on a 768px tablet), so the gap between them is smaller, and up to
   959px the calendar is a little narrower too (21em still fits "September
   2026" on one line), which keeps Facebook and Instagram side by side under
   the title. The title itself shrinks to fit its column where it must (see
   .lm-title). */
@media (min-width: 768px) and (max-width: 1239px) {
  .page-live-music .lm-top { column-gap: 32px; }
}
@media (min-width: 768px) and (max-width: 959px) {
  .page-live-music .lm-top { grid-template-columns: minmax(0, 1fr) minmax(0, 21em); }
}
/* Large text on a tablet: no room for two columns, so the calendar goes under the title */
@media (min-width: 768px) and (max-width: 1239px) {
  html.a11y-fontsize .page-live-music .lm-top { grid-template-columns: minmax(0, 1fr); }
  html.a11y-fontsize .page-live-music .lm-top__cal { max-width: 26em; }
}
.page-live-music .lm-top__cal:empty { display: none; }
@media (max-width: 767px) {
  .page-live-music .lm-top { margin-bottom: 40px; }
}

/* The title is two designed lines, "Live music" and "and events". The longer,
   "AND EVENTS", is 6.3em wide in Rubik bold, so the title is never bigger than
   its column divided by 6.5 (a little room for rounding): where the column is
   narrow (tablets and small laptops beside the calendar, large text on a 320px
   phone) it shrinks to keep the two lines whole rather than breaking one in two. */
.page-live-music .lm-top__intro { container-type: inline-size; }
.page-live-music .lm-title {
  --lm-title-fs: calc(var(--fs-h1) * 1.45);
  margin: 0 0 .45em;
  color: #000;
  font-size: min(var(--lm-title-fs), 100cqi / 6.5);
  line-height: .98;
  font-weight: 700;
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.page-live-music .lm-title__line { display: block; }
/* the logo's two stripes under the title */
.page-live-music .lm-title::after {
  content: "";
  display: block;
  width: 3.4em;
  height: .32em;
  margin-top: .28em;
  background: linear-gradient(#000 0 34%, transparent 34% 66%, #000 66% 100%);
}

/* Follow us */
.page-live-music .lm-social { display: flex; flex-direction: column; gap: .7em; }
.page-live-music .lm-social__lead {
  margin: 0;
  color: #000;
  font-family: var(--f-head);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 700;
}
/* the two buttons stacked, the seating note in a bubble to their right */
.page-live-music .lm-social__row { display: flex; align-items: center; gap: 18px; }
.page-live-music .lm-social__list { display: flex; flex-direction: column; align-items: flex-start; gap: .6em; margin: 0; padding: 0; list-style: none; }
.page-live-music .lm-seat {
  position: relative;
  flex: 1 1 0;
  max-width: 300px;
  margin: 0;
  padding: .75em 1em;
  border: 2px solid #000;
  border-radius: 18px;
  background: #fff;
  color: #000;
  font-size: .9em;
  line-height: 1.4;
}
/* the bubble's tail, pointing back at the buttons */
.page-live-music .lm-seat::before {
  content: "";
  position: absolute;
  left: -11px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border-left: 2px solid #000;
  border-bottom: 2px solid #000;
  background: #fff;
  transform: rotate(45deg);
}
@media (max-width: 480px) {
  .page-live-music .lm-social__row { gap: 14px; }
  .page-live-music .lm-seat { font-size: .8em; padding: .6em .75em; }
}
html.a11y-contrast .page-live-music .lm-seat,
html.a11y-contrast .page-live-music .lm-seat::before { background: #000; color: #fff; border-color: #fff; }
.page-live-music .lm-social__link {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  min-height: 52px;
  padding: .35em 1.2em .35em .4em;
  border: 2px solid #000;
  border-radius: 999px;
  background: #000;
  color: #fff;
  font-family: var(--f-head);
  font-weight: 500;
  text-decoration: none;
  transition: background-color .2s, color .2s;
}
.page-live-music .lm-social__link:hover { background: #fff; color: #000; }
.page-live-music .lm-social__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2em;
  height: 2em;
  border-radius: 50%;
}
.page-live-music .lm-social__icon--facebook { background: var(--c-facebook); }
.page-live-music .lm-social__icon--instagram { background: var(--c-instagram); }
.page-live-music .lm-social__icon svg { width: 1.3em; height: 1.3em; fill: #fff; }
/* Bands: the booking request at /play/, the same black pill without an icon */
.page-live-music .lm-booking { margin: .9em 0 0; }
.page-live-music .lm-booking__link { padding-left: 1.2em; }

/* The fallback line: shown without JavaScript, and when the calendar is empty or unreachable.
   A month with nothing on yet has the same black line in the list, saying "Coming soon"
   (.lm-soon), with the same two links. */
.page-live-music .lm-fallback,
.page-live-music .lm-soon {
  --c-focus: var(--c-yellow);
  margin: 0;
  padding: 1em 1.2em;
  background: #000;
  color: #fff;
  font-family: var(--f-head);
  font-size: var(--fs-h4);
  line-height: var(--lh-h4);
  font-weight: 500;
}
.page-live-music .lm-fallback a,
.page-live-music .lm-soon a { position: relative; display: inline-block; color: var(--c-yellow); }
/* Facebook and Instagram inside the sentence: an invisible area round each taps as at
   least 44px tall (America's floor), as the footer links do. Nothing moves and the focus
   ring hugs the word. Facebook's area reaches up from the foot of its line and
   Instagram's down from the top of its own, so side by side they never meet (each is
   only as wide as its word), and where a narrow screen puts them on two lines one
   above the other, the two areas only touch at the line between. */
.page-live-music .lm-fallback a::before,
.page-live-music .lm-soon a::before {
  content: "";
  position: absolute;
  left: 50%;
  width: max(100%, 44px);
  height: max(100%, 44px);
  transform: translateX(-50%);
}
.page-live-music .lm-fallback a:first-of-type::before,
.page-live-music .lm-soon a:first-of-type::before { bottom: 0; }
.page-live-music .lm-fallback a:last-of-type::before,
.page-live-music .lm-soon a:last-of-type::before { top: 0; }
.page-live-music .lm-fallback a:hover,
.page-live-music .lm-soon a:hover { color: #fff; }
html.lm-loading .page-live-music .lm-fallback,
.page-live-music .lm-fallback[hidden] { display: none; }
/* The fallback line already links Facebook and Instagram, so while it shows
   (no JavaScript, or nothing coming up) "Follow us for the latest" would
   only say the same thing again. While the lineup loads the fallback is
   hidden and Follow us stays, so nothing jumps. */
html:not(.lm-loading) .page-live-music .lm-fallback:not([hidden]) ~ .lm-social { display: none; }
/* Room for the lineup while it loads; without JavaScript there is nothing to wait for */
html.lm-loading .page-live-music .lm-list[aria-busy="true"] { min-height: 50vh; }

/* ---------- The month calendar ---------- */
.page-live-music .lm-cal {
  --c-focus: var(--c-yellow);
  --cal-pad: 1.1em;
  --cell-pad: 2px;
  position: relative;
  container-type: inline-size;   /* the day numbers size to the cells (cqi) */
  /* the offset shadow stays inside the column: the box gives up its width */
  margin-right: 10px;
  padding: 1em var(--cal-pad) 1.5em;
  background: #000;
  color: #fff;
  font-family: var(--f-head);
  box-shadow: 10px 10px 0 rgba(0, 0, 0, .18);
}
/* a road line along the bottom edge. Each 38px tile is half a gap, a dash, half a gap,
   so the line starts and ends on a dash the same distance in from both sides; the box
   reaches 8px (half a gap) past the padding, so the dashes still start at the padding. */
.page-live-music .lm-cal::after {
  content: "";
  position: absolute;
  left: max(0px, var(--cal-pad) - 8px);
  right: max(0px, var(--cal-pad) - 8px);
  bottom: .55em;
  height: 4px;
  background: linear-gradient(90deg, transparent 0 21%, var(--c-yellow) 21% 79%, transparent 79%) 0 0 / 38px 100% round;
}
/* Previous, the month, Next: each arrow keeps its 44px column even when it is
   hidden, so the month's name stays centred */
.page-live-music .lm-cal__bar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: .5em;
  margin-bottom: .6em;
}
.page-live-music .lm-cal__nav--prev { grid-column: 1; grid-row: 1; }
.page-live-music .lm-cal__month { grid-column: 2; grid-row: 1; }
.page-live-music .lm-cal__nav--next { grid-column: 3; grid-row: 1; }
.page-live-music .lm-cal__month {
  margin: 0;
  color: var(--c-yellow);
  font-size: 1.25em;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: .05em;
  text-align: center;
  text-transform: uppercase;
}
/* Previous and Next month: a bare chevron in a square 44px hit area, never a
   ring, so it can never be taken for a day with something on (a filled
   circle or a ring). Pointed at or focused, the square fills yellow. With no
   earlier (or later) month that has anything on, live-music.js hides the
   arrow altogether. */
.page-live-music .lm-cal__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--c-yellow);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.page-live-music .lm-cal__nav[hidden] { display: none; }
.page-live-music .lm-cal__arrow { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 3.2; stroke-linecap: square; stroke-linejoin: miter; }
.page-live-music .lm-cal__nav:hover,
.page-live-music .lm-cal__nav:focus-visible { background: var(--c-yellow); color: #000; }
.page-live-music .lm-cal__nav:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

.page-live-music .lm-cal__grid {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 3px;
  table-layout: fixed;
  font-size: .9em;
  line-height: 1;
}
.page-live-music .lm-cal__grid th {
  padding: 0 0 .45em;
  color: #fff;
  font-size: .85em;
  font-weight: 700;
  text-align: center;
}
/* every day cell keeps 2px of room round its day for a frame; only today's
   shows (a square, so "today" never rests on colour alone and never looks
   like a show's circle) */
.page-live-music .lm-cal__grid td {
  padding: var(--cell-pad);
  border: 2px solid transparent;
  text-align: center;
  vertical-align: middle;
}
/* Today's frame is drawn round the day itself, not the cell, so it stays a
   square however wide the cells are (a cell is wider than its circle from
   about 520px up): the circle's 3px ring, the cell's padding, then the 2px
   frame, the same place the cell's own edge has where the two are one size. */
.page-live-music span.lm-cal__day { position: relative; }
.page-live-music .lm-cal__grid td.is-today > .lm-cal__day::after {
  content: "";
  position: absolute;
  inset: calc(-5px - var(--cell-pad));
  border: 2px solid #fff;
  border-radius: .4em;
  pointer-events: none;
}
.page-live-music .lm-cal__day {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 2.5em;
  aspect-ratio: 1;
  margin: 0 auto;
  border: 3px solid transparent;
  border-radius: 50%;
  color: #fff;
  font-weight: 400;
  text-decoration: none;
}
/* The number: never bigger than its circle. A cell is a seventh of the
   calendar's width (100cqi / 7); the circle inside it loses the cell's
   padding and its 2px frame on each side, then 6px to its own ring, and 4px
   is left as air. Two bold digits are at most about 1.3em wide, so the
   number is the room left divided by 1.3, or 1em, whichever is smaller. With
   large text on a 320px phone it shrinks to fit rather than spilling past
   the ring; everywhere else it stays at 1em. */
.page-live-music .lm-cal__num {
  display: block;
  font-size: min(1em, calc((100cqi / 7 - 2 * var(--cell-pad) - 14px) / 1.3));
  line-height: 1;
  white-space: nowrap;
}
.page-live-music a.lm-cal__day { position: relative; font-weight: 700; transition: background-color .2s, color .2s, border-color .2s; }
/* A day's tap area is its whole cell, not only the circle: an invisible box
   centred on the circle, a seventh of the calendar wide and as tall as the cell
   (the circle, its 3px ring, the cell's padding and 2px frame on each side).
   Neighbouring days' areas meet at the cell edges and never overlap; nothing
   you can see moves. The cells are 44px or more at every width from 320px up
   (see the narrow phone rules below). */
.page-live-music a.lm-cal__day::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(100cqi / 7);
  height: calc(100% + 10px + 2 * var(--cell-pad));
  transform: translate(-50%, -50%);
}
/* live music: a filled circle */
.page-live-music a.lm-cal__day.is-show { background: var(--c-yellow); border-color: var(--c-yellow); color: #000; }
/* Music Bingo, Trivia and other events: a ring */
.page-live-music a.lm-cal__day.is-event { border-color: var(--c-yellow); color: var(--c-yellow); }
/* both on one day: the filled circle with a ring around it */
.page-live-music a.lm-cal__day.is-show.is-event { color: #000; outline: 2px solid var(--c-yellow); outline-offset: 2px; }
.page-live-music a.lm-cal__day:hover { background: #fff; border-color: #fff; color: #000; }
.page-live-music a.lm-cal__day:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
/* A day with both kinds keeps its yellow ring while focused (drawn as a shadow),
   and the white focus ring goes round the outside of it */
.page-live-music a.lm-cal__day.is-show.is-event:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 5px;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px var(--c-yellow);
}

.page-live-music .lm-cal__legend {
  display: flex;
  flex-wrap: wrap;
  gap: .35em 1.1em;
  margin: .7em 0 0;
  padding: 0;
  list-style: none;
  color: #fff;
  font-size: .8em;
  font-weight: 500;
  line-height: 1.3;
}
.page-live-music .lm-cal__legend li { display: flex; align-items: center; gap: .45em; }
.page-live-music .lm-cal__legend li[hidden] { display: none; }
.page-live-music .lm-cal__swatch { display: inline-block; flex: none; width: 1.05em; height: 1.05em; border: 3px solid var(--c-yellow); border-radius: 50%; }
.page-live-music .lm-cal__swatch.is-show { background: var(--c-yellow); }
.page-live-music .lm-cal__swatch.is-today { border: 2px solid #fff; border-radius: .25em; }

@media (max-width: 420px) {
  .page-live-music .lm-cal { --cal-pad: .55em; --cell-pad: 1px; }
  .page-live-music .lm-cal__bar { gap: .3em; }
}
/* Every day taps as at least 44 by 44 (America's floor): a cell is a seventh of
   the box less its padding, so seven 44px cells need 308px inside it. In the
   16px gutters that holds down to about 370px wide with the padding above (in
   every toolbar mode), and down to 358px with a 6px padding. Narrower still (a
   320px phone) the calendar runs edge to edge, see the phone rules below. */
@media (max-width: 374px) {
  .page-live-music .lm-cal { --cal-pad: 6px; }
}

/* ---------- The list: one month at a time ---------- */
/* the month's name on a dashed road line; it takes focus when a visitor
   moves to another month with the buttons in the list */
.page-live-music .lm-list__month {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .25em .7em;
  margin: 56px 0 20px;
  color: #000;
  font-size: var(--fs-h3);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.page-live-music .lm-list__month:first-child { margin-top: 0; }
.page-live-music .lm-list__month { scroll-margin-top: 24px; }
.page-live-music .lm-list__month:focus { outline: none; }
.page-live-music .lm-list__month:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 6px; }
.page-live-music .lm-month[hidden] { display: none; }

/* One pager row at the end of each month's list, so a visitor who scrolled
   through the month can carry on: "Previous month: October 2026" (outlined)
   when there is an earlier month to reach, and "Next month: December
   2026" (black, bigger) when there is a later one, empty or not. Side by side on wide
   screens, stacked on phones, in that order (the order keyboard focus takes).
   Arrows are chevrons, never a play triangle. */
.page-live-music .lm-pager {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px 24px;
  margin-top: 36px;
}
.page-live-music .lm-monthbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  min-height: 44px;
  padding: .45em 1em;
  border: 2px solid #000;
  background: transparent;
  color: #000;
  font-family: var(--f-head);
  font-size: .9em;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.page-live-music .lm-monthbtn:hover { background: #000; color: var(--c-yellow); }
.page-live-music .lm-monthbtn--prev { min-height: 52px; padding: .55em 1.2em; }
.page-live-music .lm-monthbtn--next {
  min-height: 60px;
  padding: .7em 1.5em;
  border-width: 3px;
  background: #000;
  color: var(--c-yellow);
  font-size: var(--fs-h4);
  box-shadow: 8px 8px 0 rgba(0, 0, 0, .18);
}
.page-live-music .lm-monthbtn--next:hover { background: #fff; color: #000; }
.page-live-music .lm-monthbtn__arrow { flex: none; width: 1.2em; height: 1.2em; fill: currentColor; }
.page-live-music .lm-monthbtn:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 3px; }
@media (max-width: 767px) {
  .page-live-music .lm-pager { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 28px; }
  .page-live-music .lm-monthbtn { width: 100%; }
  /* its offset shadow stays inside the column, like the calendar's */
  .page-live-music .lm-monthbtn--next { align-self: flex-start; width: calc(100% - 5px); padding: .7em 1em; box-shadow: 5px 5px 0 rgba(0, 0, 0, .18); }
}
.page-live-music .lm-list__year { font-weight: 400; }
/* The rule after the month's name ends on a dash, flush with the cards'
   right edge: each 50px step is a gap then a dash, fitted to the width
   (round), and the line starts one gap early, so the first dash keeps its
   place after the year */
.page-live-music .lm-list__month::after {
  content: "";
  flex: 1 1 3em;
  height: 6px;
  margin-left: -20px;
  background: linear-gradient(90deg, transparent 0 40%, #000 40% 100%) 0 0 / 50px 100% round;
}
.page-live-music .lm-entries { display: grid; gap: 24px; margin: 0; padding: 0; list-style: none; }
.page-live-music .lm-entry { scroll-margin-top: 24px; }

/* One entry: the date on the left, the words, the buttons, and a picture or
   video on the right only when the calendar entry has one */
.page-live-music .lm-entry__card {
  --date-w: 6.4em;
  --c-focus: var(--c-yellow);
  position: relative;
  display: grid;
  grid-template-columns: var(--date-w) minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  grid-template-areas: "date body" "date actions";
  background: #000;
  color: #fff;
  border: 3px solid #000;
  transition: transform .25s ease;
}
@media (min-width: 960px) {
  /* no picture: the buttons take the right-hand side */
  .page-live-music .lm-entry__card:not(.has-media) {
    grid-template-columns: var(--date-w) minmax(0, 1fr) fit-content(24em);
    grid-template-rows: auto;
    grid-template-areas: "date body actions";
  }
  .page-live-music .lm-entry__card:not(.has-media) .lm-entry__body { padding-bottom: 1.5em; }
  .page-live-music .lm-entry__card:not(.has-media) .lm-entry__actions { align-self: center; padding: 1.2em 1.6em 1.5em 0; }
  .page-live-music .lm-entry__card:not(.has-media) .lm-entry__buttons { justify-content: flex-end; }
}
@media (min-width: 768px) {
  .page-live-music .lm-entry__card.has-media {
    grid-template-columns: var(--date-w) minmax(0, 1fr) minmax(0, 38%);
    grid-template-areas: "date body media" "date actions media";
  }
}
/* road line along the bottom of the words, 6px clear of the card's bottom
   border so it never runs into it. A picture covers it; a video with no
   picture (a black brand panel) lets it run on across the panel, towards the
   card's right edge like every other card (see .has-tile below). Each 50px
   step is a 10px gap, a 30px dash and a 10px gap, fitted to the width
   (round), so the line holds only whole dashes, 20px apart, and both ends
   are a gap: with the line's box 10px in from the date strip and from the
   card's right edge, the first dash starts 20px clear of the date strip and
   the last ends 20px clear of the edge, the same as the gaps between. */
.page-live-music .lm-entry__card::before {
  content: "";
  position: absolute;
  z-index: 1;
  left: calc(var(--date-w) + 10px);
  right: 10px;
  bottom: 6px;
  height: 5px;
  background: linear-gradient(90deg, transparent 0 20%, var(--c-yellow) 20% 80%, transparent 80%) 0 0 / 50px 100% round;
  pointer-events: none;
}
/* lift shadow, faded in on hover (opacity only) */
.page-live-music .lm-entry__card::after {
  content: "";
  position: absolute;
  inset: -3px;
  box-shadow: 0 22px 36px -14px rgba(0, 0, 0, .6);
  opacity: 0;
  transition: opacity .25s ease;
  pointer-events: none;
}
/* Tonight's entry, and the entry a visitor jumped to from the calendar: a
   second frame 4px outside the card. The card gives up 8px on every side for
   it, so the frame's outer edge is the column's edge, the same left and right
   edges as every other card. */
.page-live-music .lm-entry.is-now .lm-entry__card,
.page-live-music .lm-entry.is-target .lm-entry__card { margin: 8px; }
.page-live-music .lm-entry.is-now .lm-entry__card { outline: 4px solid #000; outline-offset: 4px; }
.page-live-music .lm-entry.is-target .lm-entry__card { outline: 4px dashed #000; outline-offset: 4px; }

.page-live-music .lm-entry__date {
  grid-area: date;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.05em .4em 1em;
  background: var(--c-yellow);
  color: #000;
  font-family: var(--f-head);
  text-align: center;
  text-transform: uppercase;
}
.page-live-music .lm-entry__dow,
.page-live-music .lm-entry__mon { font-size: .9em; font-weight: 700; letter-spacing: .12em; line-height: 1.2; }
.page-live-music .lm-entry__mon { font-weight: 500; }
.page-live-music .lm-entry__day {
  margin: .06em 0 .02em;
  font-size: calc(var(--fs-h1) * 1.15);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.02em;
}

.page-live-music .lm-entry__body { grid-area: body; min-width: 0; padding: 1.1em 1.6em .3em; }
.page-live-music .lm-entry__head { display: flex; flex-direction: column; }
/* the small kind label sits above the name (the name comes first in the page) */
.page-live-music .lm-entry__kind {
  order: -1;
  display: flex;
  align-items: center;
  gap: .55em;
  margin: 0 0 .35em;
  color: var(--c-yellow);
  font-family: var(--f-head);
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .16em;
  line-height: 1.2;
  text-transform: uppercase;
}
/* the logo's two stripes, small, before the label */
.page-live-music .lm-entry__kind::before {
  content: "";
  flex: none;
  width: 1.7em;
  height: .6em;
  background: linear-gradient(currentColor 0 34%, transparent 34% 66%, currentColor 66% 100%);
}
.page-live-music .lm-entry__name {
  margin: 0 0 .3em;
  color: #fff;
  font-family: var(--f-head);
  font-size: calc(var(--fs-h2) * 1.3);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -.005em;
  overflow-wrap: break-word;
}
.page-live-music .lm-entry__name:focus { outline: none; }
.page-live-music .lm-entry__name:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; }
.page-live-music .lm-entry__when {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35em .75em;
  margin: 0 0 .5em;
  color: #fff;
  font-family: var(--f-head);
  font-weight: 500;
  line-height: 1.3;
}
.page-live-music .lm-entry__text { max-width: 40em; margin-top: .6em; color: var(--c-footer-text); }
.page-live-music .lm-entry__text p { margin: 0 0 .6em; }
/* Read more moves focus to the start of the full write-up (live-music.js) */
.page-live-music .lm-entry__details { scroll-margin-top: 24px; }
.page-live-music .lm-entry__details:focus { outline: none; }
.page-live-music .lm-entry__details:focus-visible { outline: 3px solid var(--c-focus); outline-offset: 4px; }
.page-live-music .lm-more {
  min-height: 44px;
  scroll-margin: 16px 0;          /* scrolled back into view, its focus ring stays whole */
  padding: .3em 0;
  border: 0;
  background: none;
  color: var(--c-yellow);
  font-family: var(--f-head);
  font-size: .95em;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: .2em;
  cursor: pointer;
}
.page-live-music .lm-more:hover { color: #fff; }

.page-live-music .lm-entry__actions { grid-area: actions; align-self: start; min-width: 0; padding: .4em 1.6em 1.6em; }
.page-live-music .lm-entry__buttons { display: flex; flex-wrap: wrap; gap: .6em; }
.page-live-music .lm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: .5em 1.1em;
  border: 2px solid var(--c-yellow);
  background: transparent;
  color: #fff;
  font-family: var(--f-head);
  font-size: .95em;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s ease;
}
.page-live-music .lm-btn:hover { background: var(--c-yellow); color: #000; }
.page-live-music .lm-btn--yellow { background: var(--c-yellow); color: #000; font-weight: 700; }
.page-live-music .lm-btn--yellow:hover { background: #fff; border-color: #fff; color: #000; }
.page-live-music .lm-entry__status { margin: .5em 0 0; color: var(--c-yellow); font-weight: 700; overflow-wrap: anywhere; }
.page-live-music .lm-entry__status:empty { margin: 0; }

/* "Tonight" badge: a gently pulsing dot, and the word carries the meaning */
.page-live-music .lm-badge {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .35em .8em .35em .65em;
  border-radius: 999px;
  background: var(--c-yellow);
  color: #000;
  font-size: .85em;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1;
  text-transform: uppercase;
}
.page-live-music .lm-badge__dot { position: relative; flex: none; width: .65em; height: .65em; border-radius: 50%; background: #000; }
.page-live-music .lm-badge__dot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: inherit;
  opacity: 0;
}

/* Music Bingo, Trivia and other events: the same block, drawn as an
   outline (white with a black frame), as the calendar draws them as a ring */
.page-live-music .lm-entry--event .lm-entry__card {
  --c-focus: #233c7f;
  background: #fff;
  color: #000;
}
.page-live-music .lm-entry--event .lm-entry__card::before { background-image: linear-gradient(90deg, transparent 0 20%, #000 20% 80%, transparent 80%); }
/* An Event card with a video and no picture: where the black panel sits under
   the words (phones, and tablets with large text) the line runs along the
   panel, so it is yellow like a live music card's */
.page-live-music .lm-entry--event .lm-entry__card.has-tile::before { background-image: linear-gradient(90deg, transparent 0 20%, var(--c-yellow) 20% 80%, transparent 80%); }
/* Where the panel sits beside the words, the line is black along the white
   side and yellow across the panel: the same dashes (a mask), coloured black
   up to the panel's left edge. The panel is the last 38% of the card, and the
   line's own box runs from 10px past the date strip to 10px short of the right
   edge, so in that box the panel's edge is at 62% less 38% of the date strip's
   width, plus 2.4px. */
@media (min-width: 768px) {
  .page-live-music .lm-entry--event .lm-entry__card.has-tile::before {
    background: linear-gradient(90deg, #000 0 calc(62% - var(--date-w) * .38 + 2.4px), var(--c-yellow) 0);
    -webkit-mask: linear-gradient(90deg, transparent 0 20%, #000 20% 80%, transparent 80%) 0 0 / 50px 100% round;
    mask: linear-gradient(90deg, transparent 0 20%, #000 20% 80%, transparent 80%) 0 0 / 50px 100% round;
  }
}
@media (min-width: 768px) and (max-width: 959px) {
  html.a11y-fontsize .page-live-music .lm-entry--event .lm-entry__card.has-tile::before {
    background: linear-gradient(90deg, transparent 0 20%, var(--c-yellow) 20% 80%, transparent 80%) 0 0 / 50px 100% round;
    -webkit-mask: none;
    mask: none;
  }
}
.page-live-music .lm-entry--event .lm-entry__date { background: #000; color: var(--c-yellow); }
.page-live-music .lm-entry--event .lm-entry__name,
.page-live-music .lm-entry--event .lm-entry__kind,
.page-live-music .lm-entry--event .lm-entry__when,
.page-live-music .lm-entry--event .lm-entry__text,
.page-live-music .lm-entry--event .lm-more,
.page-live-music .lm-entry--event .lm-entry__status { color: #000; }
.page-live-music .lm-entry--event .lm-btn { border-color: #000; color: #000; }
.page-live-music .lm-entry--event .lm-btn:hover { background: #000; color: var(--c-yellow); }
.page-live-music .lm-entry--event .lm-btn--yellow { background: #000; color: var(--c-yellow); }
.page-live-music .lm-entry--event .lm-badge { background: #000; color: var(--c-yellow); }
.page-live-music .lm-entry--event .lm-badge__dot { background: var(--c-yellow); }

/* ---------- Picture or video, only when the calendar entry has one ---------- */
.page-live-music .lm-entry__media {
  grid-area: media;
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  width: 100%;
  min-width: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  container-type: inline-size;
  z-index: 2;   /* a picture covers the road line */
}
/* A video with no picture: the road line runs on over its black panel, under
   Play and its focus ring (z-index 1 and 3 inside, no stacking box of its
   own). Once the video plays, the player covers the line again. */
.page-live-music .lm-entry__card.has-tile .lm-entry__media:not(.is-playing) { z-index: auto; }
.page-live-music .lm-media--photo img,
.page-live-music .lm-media__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}
/* A picture far from the frame's shape (see live-music.js) shows whole over a
   dim, blurred copy of itself, so no head and no word on it is ever cut off */
/* a square or tall one gets a taller frame, so it can be shown larger */
.page-live-music .lm-entry__media.is-poster { aspect-ratio: 4 / 3; }
.page-live-music .lm-media--photo.is-whole img { object-fit: contain; }
.page-live-music .lm-media--photo.is-whole .lm-media__backdrop {
  object-fit: cover;
  filter: blur(18px) brightness(.5);
  transform: scale(1.15);
}
.page-live-music .lm-play {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: #000;
  color: #000;
  cursor: pointer;
}
/* The entry's own picture as the poster, when the calendar entry has one */
.page-live-music .lm-play__poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Play icon with its words under it, centred on the poster. They sit in one
   flex column, so they can never overlap at any text size or spacing. */
.page-live-music .lm-play__cta {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .6em;
}
.page-live-music .lm-play__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  /* at most about a quarter of the poster's width, so large text cannot
     grow the circle into its words or past the edges of a small poster */
  width: min(4.2em, 24cqi);
  height: min(4.2em, 24cqi);
  border: 3px solid #000;
  border-radius: 50%;
  background: var(--c-yellow);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .45);
  transition: transform .2s ease;
}
.page-live-music .lm-play__icon svg { width: 48%; height: 48%; margin-left: 5%; fill: #000; }
.page-live-music .lm-play__label {
  max-width: 100%;
  padding: .4em .9em;
  background: #000;
  color: #fff;
  font-family: var(--f-head);
  font-size: .8em;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}
/* Keyboard focus ring for Play, drawn on a layer laid over the poster so
   nothing inside the button can paint over it. Black, yellow, black, so it
   shows on a photo and on the black brand panels alike. */
.page-live-music .lm-play::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.page-live-music .lm-play:focus-visible { outline: none; }
.page-live-music .lm-play:focus-visible::after {
  outline: 5px solid var(--c-yellow);
  outline-offset: -8px;
  box-shadow: inset 0 0 0 11px #000;
}
/* A video with no picture: a black brand panel behind Play, no words. Either
   the logo's two thick yellow stripes running across it (Play sits where the
   shield does), or the road: plain black, with the card's own road line
   running along its bottom. Black, so on the yellow lineup band it reads as a
   picture, never as an empty tile. The stripes stop 20px short of both sides
   of the panel, so they never run into the card's edge (or the Tonight
   frame) and both ends match, the same room the road line leaves. */
.page-live-music .lm-tile { position: absolute; inset: 0; overflow: hidden; }
.page-live-music .lm-tile--stripes,
.page-live-music .lm-tile--road { background: #000; }
.page-live-music .lm-tile--stripes::before,
.page-live-music .lm-tile--stripes::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  height: 10%;
  background: var(--c-yellow);
}
.page-live-music .lm-tile--stripes::before { top: 27%; }
.page-live-music .lm-tile--stripes::after { bottom: 27%; }

/* Copy helper for browsers without the clipboard API */
.lm-copybox { position: fixed; top: 0; left: -9999px; opacity: 0; }

/* ---------- Listen: the band's own player (live-music.js) ----------
   Listen sits in the buttons row, the same look as Share. Pressed, it says
   "Close" and the band's own player opens in a row of the card under the
   words and buttons, right of the date strip (full width on phones). Both
   words share one spot, so the button keeps one width and the row never
   reflows. Every player is at most 640px wide, in every text size, so they
   all end on one line; video players are 16:9, and the audio players keep
   each service's own height (Spotify 152px, Apple Music 175px, Bandcamp
   120px, or 42px for its one line player on a narrow phone), as their embed
   code asks. Nothing from those services loads until Listen is pressed. */
.page-live-music .lm-btn__words { display: inline-grid; }
.page-live-music .lm-btn__word { grid-area: 1 / 1; }
.page-live-music .lm-btn--listen .lm-btn__word + .lm-btn__word,
.page-live-music .lm-btn--listen.is-on .lm-btn__word:first-child { visibility: hidden; }
.page-live-music .lm-btn--listen.is-on .lm-btn__word + .lm-btn__word { visibility: visible; }

.page-live-music .lm-listen { grid-area: player; min-width: 0; padding: 0 1.6em 1.6em; }
.page-live-music .lm-listen[hidden] { display: none; }
.page-live-music .lm-listen__frame { display: block; width: 100%; max-width: 640px; border: 0; background: #000; }
.page-live-music .lm-listen--video .lm-listen__frame { height: auto; aspect-ratio: 16 / 9; }
.page-live-music .lm-listen--spotify .lm-listen__frame { height: 152px; border-radius: 12px; }
.page-live-music .lm-listen--apple-music .lm-listen__frame { height: 175px; border-radius: 10px; }
.page-live-music .lm-listen--bandcamp .lm-listen__frame { height: 120px; }
.page-live-music .lm-listen--bandcamp.is-narrow .lm-listen__frame { height: 42px; }

/* Where the player's row goes: under the buttons, beside the date strip */
.page-live-music .lm-entry__card.has-player {
  grid-template-rows: auto 1fr auto;
  grid-template-areas: "date body" "date actions" "date player";
}
@media (min-width: 768px) {
  /* a card with a picture: the player runs under the words and the picture,
     1.6em clear of whichever ends lower (the picture always reaches the end
     of its rows), the same room as the card keeps round its buttons */
  .page-live-music .lm-entry__card.has-player.has-media {
    grid-template-areas: "date body media" "date actions media" "date player player";
  }
  .page-live-music .lm-entry__card.has-player.has-media .lm-entry__actions { padding-bottom: 0; }
  .page-live-music .lm-entry__card.has-player.has-media .lm-listen { padding-top: 1.6em; }
}
@media (min-width: 960px) {
  /* no picture: the buttons stay where they were, on the right, and the
     player opens under the words and buttons */
  .page-live-music .lm-entry__card.has-player:not(.has-media) {
    grid-template-rows: auto auto;
    grid-template-areas: "date body actions" "date player player";
  }
}
@media (min-width: 960px) and (max-width: 1239px) {
  /* Here the column is 940px: three buttons beside the words (Listen, or
     More info, with Add to my calendar and Share) would leave the words too
     narrow a column, and with large text even two buttons break a long band
     name inside a word ("Silver Tornadoes"). Such a card puts its buttons
     under the words, as a card with a picture does, and its player under
     them; with large text every card does, so they all look alike. */
  .page-live-music .lm-entry__card.has-three-buttons:not(.has-media),
  html.a11y-fontsize .page-live-music .lm-entry__card:not(.has-media) {
    grid-template-columns: var(--date-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    grid-template-areas: "date body" "date actions";
  }
  .page-live-music .lm-entry__card.has-three-buttons:not(.has-media) .lm-entry__body,
  html.a11y-fontsize .page-live-music .lm-entry__card:not(.has-media) .lm-entry__body { padding-bottom: .3em; }
  .page-live-music .lm-entry__card.has-three-buttons:not(.has-media) .lm-entry__actions,
  html.a11y-fontsize .page-live-music .lm-entry__card:not(.has-media) .lm-entry__actions { align-self: start; padding: .4em 1.6em 1.6em; }
  .page-live-music .lm-entry__card.has-three-buttons:not(.has-media) .lm-entry__buttons,
  html.a11y-fontsize .page-live-music .lm-entry__card:not(.has-media) .lm-entry__buttons { justify-content: flex-start; }
  .page-live-music .lm-entry__card.has-three-buttons.has-player:not(.has-media),
  html.a11y-fontsize .page-live-music .lm-entry__card.has-player:not(.has-media) {
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "date body" "date actions" "date player";
  }
}
@media (min-width: 768px) and (max-width: 959px) {
  html.a11y-fontsize .page-live-music .lm-entry__card.has-player.has-media {
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "date body" "date actions" "date player" "media media";
  }
}

/* ---------- Tablets with large text: the picture or video goes under the buttons ----------
   It comes last in the page, so it comes last on screen too: keyboard focus
   moves down the block and never jumps back up to it. */
@media (min-width: 768px) and (max-width: 959px) {
  .page-live-music .lm-entry__card { --date-w: 5.6em; }
  html.a11y-fontsize .page-live-music .lm-entry__card.has-media {
    grid-template-columns: var(--date-w) minmax(0, 1fr);
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "date body" "date actions" "media media";
  }
  html.a11y-fontsize .page-live-music .lm-entry__media { align-self: auto; }
  /* the panel spans the whole card here, so its road line does too, and the
     panel starts on a rule (see the phone rules) */
  html.a11y-fontsize .page-live-music .lm-entry__card.has-tile::before { left: 10px; }
  html.a11y-fontsize .page-live-music .lm-entry__card.has-tile .lm-entry__media { border-top: 4px solid var(--c-yellow); }
  html.a11y-fontsize .page-live-music .lm-entry--event .lm-entry__card.has-tile .lm-entry__media { border-top-color: #000; }
}

/* ---------- Phones: the picture or video sits under the words and buttons, inside the same block ---------- */
@media (max-width: 767px) {
  .page-live-music .lm-title { --lm-title-fs: calc(var(--fs-h1) * 1.3); }
  /* The calendar runs to the column's right edge like the cards and the month
     rule (its box, then its 6px offset shadow). The accessibility toolbar, fixed
     at the right edge, passes over Saturday as the page scrolls, as it passes
     over every card; keyboard focus never lands under it (site.js). */
  .page-live-music .lm-cal { margin-right: 6px; box-shadow: 6px 6px 0 rgba(0, 0, 0, .18); }
  .page-live-music .lm-cal__grid { font-size: 1em; }
  /* Under 358px the 16px gutters leave no room for seven 44px days, so the
     calendar runs edge to edge across the screen, out of the gutters, with no
     offset shadow (and in high contrast no side borders, see the end): 308px
     inside its 6px padding from a 320px screen up. */
  @media (max-width: 357px) {
    .page-live-music .lm-cal { margin-left: -16px; margin-right: -16px; box-shadow: none; }
  }
  .page-live-music .lm-cal__legend { font-size: .875em; }
  .page-live-music .lm-list__month { margin-top: 44px; }
  .page-live-music .lm-entries { gap: 20px; }
  .page-live-music .lm-entry__card { --date-w: 4.4em; }
  .page-live-music .lm-entry__card.has-media {
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "date body" "date actions" "media media";
  }
  .page-live-music .lm-entry__media { align-self: auto; }
  /* A band's player spans the whole card under the buttons, before any
     picture, on a rule in the date strip's colour (as a video panel does), so
     the strip ends on it. Its sides are 32px in, so it always ends clear of
     the accessibility toolbar's column at the right edge of the screen (44px
     wide, fixed): the card's own edge is 19px in from the screen's. */
  .page-live-music .lm-entry__card.has-player {
    grid-template-rows: auto 1fr auto;
    grid-template-areas: "date body" "date actions" "player player";
  }
  .page-live-music .lm-entry__card.has-player.has-media {
    grid-template-rows: auto 1fr auto auto;
    grid-template-areas: "date body" "date actions" "player player" "media media";
  }
  .page-live-music .lm-entry__card.has-player:not(.has-media)::before { left: 10px; }
  .page-live-music .lm-listen { padding: 1.1em 32px 1.5em; border-top: 4px solid var(--c-yellow); }
  /* A video with no picture spans the whole card under the buttons, so its
     road line runs the card's full width. Its black panel starts on a rule
     across the card in the date strip's colour, so the strip ends on it and
     never leaves a bare black notch between the buttons and the stripes (on an
     Event card the strip and the panel are both black and already join). */
  .page-live-music .lm-entry__card.has-tile::before { left: 10px; }
  .page-live-music .lm-entry__card.has-tile .lm-entry__media { border-top: 4px solid var(--c-yellow); }
  .page-live-music .lm-entry--event .lm-entry__card.has-tile .lm-entry__media { border-top-color: #000; }
  .page-live-music .lm-entry__date { padding: .9em .25em; }
  .page-live-music .lm-entry__dow,
  .page-live-music .lm-entry__mon { font-size: .8em; letter-spacing: .08em; }
  .page-live-music .lm-entry__day { font-size: calc(var(--fs-h1) * .95); }
  .page-live-music .lm-entry__body { padding: .95em 1.05em .2em; }
  .page-live-music .lm-entry__actions { padding: .4em 1.05em 1.4em; }
  /* A band's name breaks only between words: never bigger than its column
     divided by 5.4, room for a nine letter word such as "Tornadoes" (5.2em in
     Rubik bold). It only ever shrinks with large text on a narrow phone. */
  .page-live-music .lm-entry__body { container-type: inline-size; }
  .page-live-music .lm-entry__name { font-size: min(calc(var(--fs-h2) * 1.15), 100cqi / 5.4); }
}
@media (max-width: 519px) {
  /* Add to my calendar and Share side by side on a phone, each filling its half */
  .page-live-music .lm-entry__buttons { gap: .5em; }
  .page-live-music .lm-entry__buttons .lm-btn { flex: 1 1 auto; padding: .5em .7em; font-size: .875em; }
  .page-live-music .lm-ribbon__pause { padding: 0 .8em; }
  .page-live-music .lm-ribbon__pause [data-ribbon-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}

/* ---------- Phones: compact cards ----------
   (America, 29 Oct 2026, from her phone: "these cards are too huge") The date is a small
   block beside the kind, the name and the time only; the buttons run across the whole card
   in one row under them (44px tall, America's floor), then the player and the picture at
   the card's full width as before. The road line starts 10px in, under the buttons. */
@media (max-width: 767px) {
  .page-live-music .lm-entries { gap: 16px; }
  /* The write-up ("Hosted by Mr. P.") runs under the date and the name at the card's full
     width, so the date block is only ever as tall as the kind, the name and the time. */
  .page-live-music .lm-entry__card {
    --date-w: 3.4em;
    grid-template-rows: auto auto auto;
    grid-template-areas: "date body" "text text" "actions actions";
  }
  .page-live-music .lm-entry__card.has-media {
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "date body" "text text" "actions actions" "media media";
  }
  .page-live-music .lm-entry__card.has-player {
    grid-template-rows: auto auto auto auto;
    grid-template-areas: "date body" "text text" "actions actions" "player player";
  }
  .page-live-music .lm-entry__card.has-player.has-media {
    grid-template-rows: auto auto auto auto auto;
    grid-template-areas: "date body" "text text" "actions actions" "player player" "media media";
  }
  .page-live-music .lm-entry__body { display: contents; }
  .page-live-music .lm-entry__head { grid-area: body; min-width: 0; padding: .6em .85em .15em; container-type: inline-size; }
  .page-live-music .lm-entry__text { grid-area: text; min-width: 0; max-width: none; margin: 0; padding: .1em .85em 0; font-size: .92em; }
  .page-live-music .lm-entry__card::before { left: 10px; }
  .page-live-music .lm-entry__date { justify-content: center; padding: .5em .15em; }
  .page-live-music .lm-entry__dow,
  .page-live-music .lm-entry__mon { font-size: .68em; letter-spacing: .06em; }
  .page-live-music .lm-entry__day { font-size: 1.55em; }
  .page-live-music .lm-entry__kind { margin-bottom: .25em; font-size: .68em; }
  .page-live-music .lm-entry__name { margin-bottom: .12em; font-size: min(1.3em, 100cqi / 5.4); }
  .page-live-music .lm-entry__when { margin-bottom: .35em; font-size: .88em; }
  /* The buttons stay in one row down to a 320px phone (America's iPhone, with its larger
     display setting, lays pages out 320px wide); four buttons may take two rows. */
  .page-live-music .lm-entry__actions { padding: .35em .75em 1.05em; }
  .page-live-music .lm-entry__buttons { flex-wrap: nowrap; gap: .35em; }
  .page-live-music .lm-entry__buttons:has(> :nth-child(4)) { flex-wrap: wrap; }
  .page-live-music .lm-entry__buttons .lm-btn {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    padding: .3em .4em;
    font-size: .8em;
    line-height: 1.1;
  }
  .page-live-music .lm-listen { padding: .9em .75em 1.2em; }
  /* The ribbon under the photo: a thin 44px strip, as on the Food Menu and Our Beers pages
     (assets/ticker.css) */
  .page-live-music .lm-ribbon { border-top-width: 2px; border-bottom-width: 2px; }
  .page-live-music .lm-ribbon__item { min-height: 40px; padding: 0; font-size: .8125em; letter-spacing: .08em; }
  .page-live-music .lm-ribbon__item::before { width: .45em; height: .45em; margin: 0 .9em; }
  .page-live-music .lm-ribbon__pause { min-width: 44px; min-height: 40px; padding: 0 .75em; border-right-width: 2px; }
}

/* Narrow phones with large text: a slimmer date strip and side padding give
   the words a wider column (on a 320px phone they were down to a few words a line) */
@media (max-width: 419px) {
  html.a11y-fontsize .page-live-music .lm-entry__card { --date-w: 3.7em; }
  html.a11y-fontsize .page-live-music .lm-entry__body { padding-left: .8em; padding-right: .8em; }
  html.a11y-fontsize .page-live-music .lm-entry__actions { padding-left: .8em; padding-right: .8em; }
}

/* ---------- Motion, only when welcome ---------- */
@keyframes lm-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes lm-pulse { from { transform: scale(1); opacity: .6; } to { transform: scale(2.6); opacity: 0; } }
@keyframes lm-listen-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: no-preference) {
  /* "Pause motion" shows whenever anything on the page can move */
  html.lm-js:not(.a11y-contrast) .page-live-music .lm-ribbon.is-live .lm-ribbon__pause { display: inline-flex; }
  html.lm-js:not(.a11y-contrast) .page-live-music .lm-ribbon.is-live .lm-ribbon__track {
    animation: lm-marquee var(--lm-ribbon-dur, 60s) linear infinite;
    will-change: transform;
  }
  /* paused, the ribbon holds where it is */
  html.lm-js:not(.a11y-contrast) .page-live-music .lm-ribbon.is-paused .lm-ribbon__track,
  html.lm-js.lm-still .page-live-music .lm-ribbon__track,
  html.lm-js:not(.a11y-contrast) .page-live-music .lm-ribbon.is-live .lm-ribbon__viewport:hover .lm-ribbon__track { animation-play-state: paused; }

  /* Everything below stops when "Pause motion" is pressed (html.lm-still) */

  /* entries rise and fade in as they arrive */
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .6s ease, transform .7s cubic-bezier(.2, .75, .25, 1);
  }
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-reveal.is-in { opacity: 1; transform: none; }
  /* an entry being jumped to is in place at once, so it lands where it is scrolled to */
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-reveal.is-target { transition: none; }

  /* a little lift on hover and keyboard focus */
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-entry:focus-within .lm-entry__card { transform: translateY(-4px); }
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-entry:focus-within .lm-entry__card::after { opacity: 1; }
  @media (hover: hover) {
    html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-entry__card:hover { transform: translateY(-4px); }
    html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-entry__card:hover::after { opacity: 1; }
    html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-btn:hover { transform: translateY(-2px); }
    html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-play:hover .lm-play__icon { transform: scale(1.08); }
  }
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-play:focus-visible .lm-play__icon { transform: scale(1.08); }

  /* the Tonight dot */
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-badge__dot::after { animation: lm-pulse 1.8s ease-out infinite; }

  /* a band's player rises in as it opens */
  html.lm-js:not(.a11y-contrast):not(.lm-still) .page-live-music .lm-listen:not([hidden]) { animation: lm-listen-in .35s ease-out both; }

  html.lm-js:not(.a11y-contrast):not(.lm-still):has(> body.page-live-music) { scroll-behavior: smooth; }
}

@media print {
  .page-live-music .lm-reveal { opacity: 1 !important; transform: none !important; }
  .page-live-music .lm-pager,
  .page-live-music .lm-ribbon,
  .page-live-music .lm-top__cal { display: none; }
}

/* ---------- High contrast mode (toolbar) ---------- */
html.a11y-contrast .page-live-music .lm-reveal { opacity: 1 !important; transform: none !important; }
html.a11y-contrast .page-live-music .lm-badge__dot { background-color: #ff0 !important; }
html.a11y-contrast .page-live-music .lm-ribbon__item::before { background-color: #fff !important; }
html.a11y-contrast .page-live-music .lm-play__icon svg { fill: #ff0 !important; }
/* the box that centres Play covers the poster: keep it see-through */
html.a11y-contrast .page-live-music .lm-play__cta { background-color: transparent !important; }
html.a11y-contrast .page-live-music .lm-play:focus-visible::after { outline-color: #ff0; }
html.a11y-contrast .page-live-music .lm-entry__date { border-right: 2px solid #fff !important; }
html.a11y-contrast .page-live-music .lm-entry.is-now .lm-entry__card,
html.a11y-contrast .page-live-music .lm-entry.is-target .lm-entry__card { outline-color: #ff0; }
html.a11y-contrast .page-live-music .lm-entry__card { border: 2px solid #fff !important; }
html.a11y-contrast .page-live-music .lm-tile--stripes::before,
html.a11y-contrast .page-live-music .lm-tile--stripes::after,
html.a11y-contrast .page-live-music .lm-entry__card::before,
html.a11y-contrast .page-live-music .lm-cal::after,
html.a11y-contrast .page-live-music .lm-title::after { display: none; }
html.a11y-contrast .page-live-music .lm-list__month::after { background-image: linear-gradient(90deg, transparent 0 40%, #fff 40% 100%); }
/* no offset shadow in high contrast, so the calendar takes the column's full width */
html.a11y-contrast .page-live-music .lm-cal { margin-right: 0; border: 2px solid #fff !important; }
/* edge to edge on a narrow phone (see the phone rules): the screen's edges are its sides */
@media (max-width: 357px) {
  html.a11y-contrast .page-live-music .lm-cal { margin-right: -16px; border-left-width: 0 !important; border-right-width: 0 !important; }
}
/* the arrows: the page's yellow on hover, as links are */
html.a11y-contrast .page-live-music .lm-cal__nav:hover { color: #ff0 !important; outline: 3px solid #ff0; outline-offset: 2px; }
html.a11y-contrast .page-live-music a.lm-cal__day.is-event { border-color: #ff0 !important; }
/* event days, like show days, drop the forced link underline and the number's black box,
   so the ring holds its number cleanly */
html.a11y-contrast .page-live-music a.lm-cal__day.is-event,
html.a11y-contrast .page-live-music a.lm-cal__day.is-event * { text-decoration: none !important; }
html.a11y-contrast .page-live-music a.lm-cal__day.is-event * { background-color: transparent !important; }
html.a11y-contrast .page-live-music a.lm-cal__day.is-show,
html.a11y-contrast .page-live-music .lm-cal__swatch.is-show { background-color: #ff0 !important; border-color: #ff0 !important; }
html.a11y-contrast .page-live-music a.lm-cal__day.is-show,
html.a11y-contrast .page-live-music a.lm-cal__day.is-show * { color: #000 !important; text-decoration: none !important; }
html.a11y-contrast .page-live-music a.lm-cal__day.is-show * { background-color: transparent !important; }
html.a11y-contrast .page-live-music .lm-cal__swatch.is-event { border-color: #ff0 !important; }
/* both kinds on one day: the yellow ring, and when focused a white focus ring outside it */
html.a11y-contrast .page-live-music a.lm-cal__day.is-show.is-event { outline-color: #ff0; }
html.a11y-contrast .page-live-music a.lm-cal__day.is-show.is-event:focus-visible {
  outline-color: #fff !important;
  box-shadow: 0 0 0 2px #000, 0 0 0 4px #ff0 !important;
}
/* The toolbar's contrast mode draws a white border on everything; in the
   calendar a border means something (a ring is an event, a square is
   today, drawn round the day), so only those keep theirs */
html.a11y-contrast .page-live-music .lm-cal__grid td,
html.a11y-contrast .page-live-music span.lm-cal__day,
html.a11y-contrast .page-live-music .lm-cal__grid td > span.lm-cal__day,
html.a11y-contrast .page-live-music .lm-cal__grid span[aria-hidden="true"] { border-color: transparent !important; }
html.a11y-contrast .page-live-music a.lm-cal__day:not(.is-show):not(.is-event) { border-color: transparent !important; }