/* AFTERGLOW'S BANNER SYSTEM (2026-10-16; deploy/write-afterglow.py): the series page is Good Boy's construction — style.css,
   feed.css, hub.css — and Afterglow's own look lives here, in the banner block only (the series-banner rule): the
   dance-floor banner where Good Boy's campus loop is, and the name lit like Party Boy's bow tie — cream letters with the
   hot-pink neon edge and glow, the tagline in the same pink. */
.afterglow { --neon: oklch(0.72 0.26 350); --neon-soft: oklch(0.72 0.26 350 / 0.55); }

/* the banner as the loop: a still, cover-cropped. On a phone it is the page's fixed ground (portrait: Party Boy stands
   at about 38 % across); in the desk band, a wide slice through his bow tie and the lasers */
.afterglow .hub-loop img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 38% 40%; }
.afterglow .hub-ground img { object-position: 38% 40%; }

/* THE NAME = A NEON SIGN (James, 10-16: "roll the neon sign"): img/afterglow-title.png, bent pink tubes on transparency
   (deploy/nb_ag_title.py), in the h1 where Good Boy's brush paint sits; it carries its own glow, so no ink drop shadow */
.afterglow .hub-title { width: min(92%, 440px); max-width: none; margin-top: 6px; }
.ag-title-img { filter: none; }
.ag-tag {
  margin: 10px 0 0 2px; font-family: var(--display); font-size: clamp(0.875rem, 4vw, 1.25rem); line-height: 1; white-space: nowrap;
  text-transform: uppercase; letter-spacing: 0.04em; color: var(--neon); text-shadow: 0 0 10px var(--neon-soft), 2px 2px 0 var(--ink);
}
@media (min-width: 700px) and (min-aspect-ratio: 1 / 1) {
  .afterglow .hub-loop img { object-position: 50% 32%; }
  .afterglow .hub-title { width: min(760px, 100%); }
  .ag-tag { font-size: clamp(1.25rem, 1.6vw, 1.75rem); margin-top: var(--space-md); }
}