/* The "Next up" card on the home page (assets/next-up.js). Fixed on the right, half way
   up the window, in the open sky and trees of the photo (America, 29 Oct 2026: "about half
   way up the page on the right where there's negative space"), and just left of the
   toolbar that sits on the right edge at the same height. Black with the yellow border and
   shadow of the Live Music calendar; it slides in once. On phones, where the middle of the
   window is the page itself, it spans the width just above the bottom edge. */
/* Restyled 29 Oct 2026 at America's word on the live card: "only half the width of this
   and be rounded and just more grey and opaque and rugged". A small rounded card of
   weathered grey with a grain, a faint light edge, cream words, the photo a little faded. */
.next-up {
  --nu-ink: #ece0bf;
  --nu-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .9  0 0 0 0 .85  0 0 0 0 .7  0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  position: fixed;
  right: 76px;
  top: 50%;
  z-index: 60;
  width: 240px;
  max-width: calc(100vw - 24px);
  border: 2px solid #cdbf9c;
  border-radius: 14px;
  background: var(--nu-grain), linear-gradient(160deg, rgba(74, 71, 66, .94) 0%, rgba(52, 50, 47, .94) 100%);
  color: var(--nu-ink);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translate(12px, -50%);
  transition: opacity .4s ease, transform .4s ease;
}
.next-up.is-shown { opacity: 1; transform: translate(0, -50%); }
.next-up__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 26px 8px 8px;
  color: inherit;
  text-decoration: none;
}
.next-up__photo {
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  border-radius: 8px;
  object-fit: cover;
  object-position: 50% 30%;
  filter: sepia(.35) saturate(.75) contrast(.92) brightness(.95);
}
.next-up__words { display: flex; flex-direction: column; min-width: 0; }
/* With a photo (America, 29 Oct 2026: "the picture should fill the box and then writing
   over it"): the photo covers the whole card, a little faded, darkening toward the bottom
   where the words sit over it. */
.next-up--photo { overflow: hidden; }
.next-up--photo .next-up__link { position: relative; display: block; aspect-ratio: 4 / 3; padding: 0; }
.next-up--photo .next-up__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  object-position: 50% 25%;
}
.next-up--photo .next-up__link::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(30, 28, 25, .1) 0%, rgba(30, 28, 25, .35) 40%, rgba(30, 28, 25, .92) 100%), var(--nu-grain);
}
.next-up--photo .next-up__words {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 9px;
  z-index: 1;
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8);
}
.next-up--photo .next-up__close { z-index: 2; }
.next-up__kicker {
  font-family: var(--f-head);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: #dcb93a;
}
.next-up__kind { display: none; }
.next-up__name {
  margin-top: 1px;
  font-family: var(--f-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: break-word;
}
.next-up__when { margin-top: 2px; font-family: var(--f-body); font-size: 13px; line-height: 1.3; opacity: .9; }
.next-up__cta { display: none; }
@media (hover: hover) {
  .next-up__link:hover .next-up__name { text-decoration: underline; text-underline-offset: 3px; }
}
.next-up__link:focus-visible { outline: 2px solid #dcb93a; outline-offset: -5px; }
.next-up__close {
  position: absolute;
  top: 0;
  right: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--nu-ink);
  cursor: pointer;
}
/* a dark disc with a cream cross, easy to see on any photo, inside a 36px tap area */
.next-up__close::before {
  content: "";
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: rgba(20, 18, 16, .85);
  box-shadow: 0 0 0 1.5px #cdbf9c;
}
.next-up__close svg { position: relative; width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; }
@media (hover: hover) { .next-up__close:hover { color: #dcb93a; } }
.next-up__close:focus-visible { outline: 2px solid #dcb93a; outline-offset: -4px; }
/* Phones: a smaller card inside the hero photo, half way up on the right, like the
   desktop's (America, 29 Oct 2026). The hero clips its edges, so the close button sits
   inside the card's corner here. */
@media (max-width: 767px) {
  .next-up.next-up--hero { position: absolute; top: 50%; right: 8px; z-index: 5; width: 140px; border-radius: 11px; border-width: 1.5px; }
  .next-up--hero .next-up__link { gap: 7px; padding: 6px 24px 6px 6px; }
  .next-up--hero .next-up__photo { flex-basis: 30px; width: 30px; height: 30px; border-radius: 6px; }
  .next-up--hero .next-up__kicker { font-size: 8px; line-height: 1.3; letter-spacing: .1em; }
  .next-up--hero .next-up__kind { display: none; }
  .next-up--hero .next-up__name { font-size: 12px; }
  .next-up--hero .next-up__when { margin-top: 1px; font-size: 10px; line-height: 1.25; }
  .next-up--hero .next-up__close { width: 30px; height: 30px; }
  .next-up--hero .next-up__close::before { inset: 5px; }
  .next-up--hero .next-up__close svg { width: 8px; height: 8px; }

  .next-up--hero.next-up--photo .next-up__photo { width: 100%; height: 100%; border-radius: 0; }
  .next-up--hero.next-up--photo .next-up__words { left: 7px; right: 7px; bottom: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .next-up { transition: none; }
}
html.a11y-contrast .next-up { background: #000; color: #fff; box-shadow: none; border: 2px solid #fff; }
html.a11y-contrast .next-up__photo { display: none; }
@media print { .next-up { display: none !important; } }