/* ============================================================
   WWSU 106.9 FM — website persona stylesheet

   CONTRAST MATRIX (WCAG 2.1 AA — 4.5:1 body, 3:1 large text)
   ┌──────────────────────────────┬──────────┬────────┬────────┐
   │ Pair                         │ Ratio    │ Body   │ Large  │
   ├──────────────────────────────┼──────────┼────────┼────────┤
   │ #101820 (ink) on #F2F1F0     │ ~15.1:1  │ ✓ PASS │ ✓ PASS │
   │ #019645 (green) on #F2F1F0   │ ~3.8:1   │ ✗ FAIL │ ✓ PASS │
   │ #016B32 (deep) on #F2F1F0    │ ~6.1:1   │ ✓ PASS │ ✓ PASS │
   │ #F2F1F0 (cream) on #101820   │ ~15.1:1  │ ✓ PASS │ ✓ PASS │
   │ #F2F1F0 (cream) on #C8362B   │ ~4.6:1   │ ✓ PASS │ ✓ PASS │
   │ #101820 (ink)  on #CEA052    │ ~5.0:1   │ ✓ PASS │ ✓ PASS │
   │ #2BD174 (glow) on #101820    │ ~7.8:1   │ ✓ PASS │ ✓ PASS │
   └──────────────────────────────┴──────────┴────────┴────────┘
   RULE: --wwsu-green (#019645) MUST NOT be used for body-size text
   on cream surfaces. Use --wwsu-green-deep (#016B32) instead.
   Large text (18px+ or 14px+ bold) may use --wwsu-green.

   Token-driven patterns layered over the existing AdminLTE
   sidebar + content + footer structure. No hex literals.
   No glow / no gradient / no drop-shadow per brand rule
   (the design-system kit's `box-shadow: 0 0 ...` neon glows
   are intentionally not carried over — flat is the rule).
   ============================================================ */

/* ---- Container ------------------------------------------- */

.wwsu-website :focus-visible {
  outline: var(--rule-w-2) solid var(--wwsu-green);
  outline-offset: 2px;
}

.wwsu-website .icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}

.wwsu-container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--space-8);
  box-sizing: border-box;
}

.wwsu-container--narrow {
  width: 100%;
  max-width: var(--content-w-narrow);
  margin: 0 auto;
  padding: 0 var(--space-8);
  box-sizing: border-box;
}

/* ---- Header (#top-bar) ----------------------------------- */
/* AdminLTE owns position/layout; persona CSS owns surface +
   bracket motif + nav typography. */

#top-bar.main-header {
  background: var(--wwsu-white);
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
  color: var(--wwsu-ink);
}

#top-bar.main-header .nav-link {
  color: var(--wwsu-ink);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
}

#top-bar.main-header .nav-link:hover {
  color: var(--wwsu-green);
}

#top-bar.main-header .nav-item-nowplaying {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--wwsu-ink) !important; /* override AdminLTE .text-white */
}

/* ---- Brand link in sidebar ------------------------------- */

.brand-link {
  background: var(--wwsu-navy) !important;
  border-bottom: var(--rule-w-2) solid var(--rule-on-dark) !important;
}

.brand-text {
  font-family: var(--font-display);
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  color: var(--fg-on-dark) !important;
}

.brand-image {
  /* Preserve full-opacity brand marks. */
  opacity: 1 !important;
}

/* ---- Hero band (#section-home-image and similar) --------- */
/* Brand hero band used by legacy section headers. */

.wwsu-hero {
  position: relative;
  background: var(--wwsu-navy);
  color: var(--fg-on-dark);
  padding: var(--space-24) var(--space-8);
  overflow: hidden;
}

.wwsu-hero h1,
.wwsu-hero h2,
.wwsu-hero h3 {
  color: var(--fg-on-dark);
}

/* Inner bracket frame (decorative). */
.wwsu-hero__bracket {
  position: absolute;
  inset: var(--space-8);
  pointer-events: none;
  border: var(--rule-w-4) solid var(--fg-on-dark);
}

.wwsu-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.wwsu-hero__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--wwsu-green);
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
}

.wwsu-hero__pill__dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--fg-on-dark);
  animation: wwsu-pulse 1.4s ease-in-out infinite;
}

.wwsu-hero__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(var(--fs-48), 9vw, var(--fs-120));
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  margin: var(--space-6) 0 var(--space-4);
}

.wwsu-hero__sub {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(var(--fs-18), 2vw, var(--fs-30));
  color: var(--fg-on-dark-muted);
  max-width: 700px;
  line-height: var(--leading-snug);
}

.wwsu-hero__sub em {
  color: var(--wwsu-green-glow);
  font-style: italic;
}

.wwsu-hero__cta {
  display: flex;
  gap: var(--space-3);
  margin-top: var(--space-8);
  flex-wrap: wrap;
}

.wwsu-hero__logo {
  display: block;
  margin: var(--space-10) auto 0;
  max-height: min(60vh, 100vw);
  width: auto;
}

@keyframes wwsu-pulse {
  50% { opacity: 0.35; }
}

@media (prefers-reduced-motion: reduce) {
  .wwsu-hero__pill__dot { animation: none; }
}

/* ---- Buttons (brand variants — extend AdminLTE) ---------- */

.btn-wwsu {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-14);
  padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-0);
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  transition: background var(--dur-2) var(--ease-broadcast),
              color var(--dur-2) var(--ease-broadcast);
}

/* AdminLTE override forces border-radius:50% on every .amplitude-play-pause.
   The hero "Listen Live" button uses that class for play-pause behavior but
   must remain squared per brand. Re-assert squared corners on btn-wwsu. */
.btn-wwsu.amplitude-play-pause,
.btn-wwsu.amplitude-play,
.btn-wwsu.amplitude-pause {
  border-radius: var(--radius-0) !important;
}

.btn-wwsu--primary {
  background: var(--wwsu-green);
  color: var(--fg-on-dark);
}

.btn-wwsu--primary:hover {
  background: var(--wwsu-green-glow);
  color: var(--fg-on-dark);
}

.btn-wwsu--primary:active {
  background: var(--wwsu-green-deep);
}

/* Filled-light variant for dark surfaces (e.g. hero "Now Playing" CTA).
   The design-system .secondary outlined-ink pattern is invisible on dark
   navy, so on dark we use a cream fill with ink text — the inverse of
   .primary. Reserves the green hover for primary-only to preserve
   hierarchy; this button signals action via a soft white glow + green
   text shift instead. */
.btn-wwsu--ghost-light {
  background: var(--wwsu-cream);
  color: var(--wwsu-ink);
  border: 0;
  transition: background .16s cubic-bezier(.2, .8, .2, 1),
              color .16s cubic-bezier(.2, .8, .2, 1),
              box-shadow .16s cubic-bezier(.2, .8, .2, 1);
}

.btn-wwsu--ghost-light:hover {
  background: var(--wwsu-white);
  color: var(--wwsu-green-deep);
  box-shadow: 0 0 18px rgba(242, 241, 240, .35);
}

.btn-wwsu--ghost-light:focus-visible {
  outline: var(--rule-w-2) solid var(--wwsu-green-glow);
  outline-offset: 2px;
}

.btn-wwsu--ghost-light:active {
  background: var(--wwsu-cream-2);
  color: var(--wwsu-ink);
  box-shadow: none;
}

.btn-wwsu--secondary {
  background: transparent;
  color: var(--wwsu-ink);
  border: var(--rule-w-2) solid var(--wwsu-ink);
}

.btn-wwsu--secondary:hover {
  background: var(--wwsu-ink);
  color: var(--fg-on-dark);
}

/* ---- Section + heading patterns -------------------------- */

.wwsu-section {
  padding: var(--space-20) 0;
  background: var(--wwsu-cream);
}

.wwsu-section--banded {
  background: var(--wwsu-cream-2);
}

.wwsu-section--dark {
  background: var(--wwsu-navy);
  color: var(--fg-on-dark);
}

.wwsu-section--dark h1,
.wwsu-section--dark h2,
.wwsu-section--dark h3,
.wwsu-section--dark h4 {
  color: var(--fg-on-dark);
}

.wwsu-section__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-8);
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
}

/* When eyebrow + title are direct flex children (no inner wrapper),
   stack them vertically on the left. The inner-div pattern still works
   because the wrapper div is treated as a single flex item. */
.wwsu-section__head > .wwsu-section__eyebrow {
  flex: 0 0 100%;
  margin: 0;
}

.wwsu-section__head > .wwsu-section__title {
  flex: 1 1 auto;
}

.wwsu-section__head > .wwsu-section__link {
  flex: 0 0 auto;
}

.wwsu-section__eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-green);
}

.wwsu-section__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-38);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  margin: var(--space-1) 0 0;
}

.wwsu-section__title em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
}

.wwsu-section__link {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-ink);
  text-decoration: none;
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
  padding-bottom: 2px;
}

.wwsu-section__link:hover {
  color: var(--wwsu-green);
  border-color: var(--wwsu-green);
}

.wwsu-section--dark .wwsu-section__link {
  color: var(--fg-on-dark);
  border-color: var(--fg-on-dark);
}

.wwsu-section--dark .wwsu-section__link:hover {
  color: var(--wwsu-green-glow);
  border-color: var(--wwsu-green-glow);
}

/* ---- Now-playing bar (sticky studio bar) ----------------- */
/* Slot under #top-bar or above #footer. Distinct from the
   AdminLTE navbar; consumers add `.wwsu-npbar` element. */

.wwsu-npbar {
  background: var(--wwsu-navy);
  color: var(--fg-on-dark);
  border-top: var(--rule-w-2) solid var(--wwsu-ink);
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-npbar__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  padding: var(--space-4) var(--space-8);
  max-width: var(--content-w);
  margin: 0 auto;
}

.wwsu-npbar__art {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
  background: var(--wwsu-green-deep);
  border: var(--rule-w-2) solid var(--fg-on-dark);
}

.wwsu-npbar__meta {
  flex: 1;
  min-width: 0;
}

.wwsu-npbar__lbl {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-green-glow);
}

.wwsu-npbar__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-21);
  line-height: var(--leading-tight);
  margin: var(--space-1) 0 0;
}

.wwsu-npbar__artist {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-14);
  color: var(--fg-on-dark-muted);
  margin-top: var(--space-1);
}

.wwsu-npbar__play {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wwsu-green);
  border: 0;
  color: var(--fg-on-dark);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--dur-2) var(--ease-broadcast);
}

.wwsu-npbar__play:hover {
  background: var(--wwsu-green-glow);
}

.wwsu-npbar__play svg {
  width: 22px;
  height: 22px;
  fill: var(--fg-on-dark);
}

/* ---- Schedule strip -------------------------------------- */

.wwsu-sch__day {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
}

.wwsu-sch__day button {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  padding: var(--space-2) var(--space-4);
  background: transparent;
  border: var(--rule-w-2) solid var(--wwsu-ink);
  color: var(--wwsu-ink);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-broadcast),
              color var(--dur-2) var(--ease-broadcast);
}

.wwsu-sch__day button:hover {
  background: var(--wwsu-ink);
  color: var(--fg-on-dark);
}

.wwsu-sch__day button.is-active {
  background: var(--wwsu-green);
  border-color: var(--wwsu-green);
  color: var(--fg-on-dark);
}

.wwsu-sch__row {
  display: grid;
  grid-template-columns: 120px 1fr 100px;
  gap: var(--space-6);
  align-items: center;
  padding: var(--space-4) var(--space-6);
  border-top: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-sch__row:last-child {
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-sch__row.is-now {
  background: var(--wwsu-navy);
  color: var(--fg-on-dark);
}

.wwsu-sch__time {
  font-family: var(--font-mono);
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

.wwsu-sch__row.is-now .wwsu-sch__time {
  color: var(--wwsu-green-glow);
}

.wwsu-sch__name {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-18);
}

.wwsu-sch__host {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-14);
  color: var(--fg-muted);
  margin-left: var(--space-2);
}

.wwsu-sch__row.is-now .wwsu-sch__host {
  color: var(--fg-on-dark-muted);
}

.wwsu-sch__badge {
  justify-self: end;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--wwsu-green);
  color: var(--fg-on-dark);
}

/* ---- Show card ------------------------------------------- */

.wwsu-shows {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
}

.wwsu-show {
  position: relative;
  background: var(--wwsu-paper);
  padding: var(--space-6);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  cursor: pointer;
  transition: transform var(--dur-3) var(--ease-broadcast);
}

.wwsu-show::before,
.wwsu-show::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: var(--rule-w-3) solid var(--wwsu-ink);
  transition: border-color var(--dur-3) var(--ease-broadcast);
}

.wwsu-show::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}

.wwsu-show::after {
  bottom: -2px;
  right: -2px;
  border-left: 0;
  border-top: 0;
}

.wwsu-show:hover::before,
.wwsu-show:hover::after {
  border-color: var(--wwsu-green);
}

.wwsu-show:hover {
  transform: translateY(-2px);
}

.wwsu-show--interactive,
.wwsu-sch__row--link {
  cursor: pointer;
}

.wwsu-show--interactive:focus-visible,
.wwsu-sch__row--link:focus-visible {
  outline: var(--rule-w-2) solid var(--wwsu-green);
  outline-offset: 4px;
}

.wwsu-show__art {
  height: 160px;
  margin: calc(-1 * var(--space-6)) calc(-1 * var(--space-6)) var(--space-5);
  background: var(--wwsu-green-deep);
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-show__time {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-green);
  margin-bottom: var(--space-2);
}

.wwsu-show__name {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-21);
  line-height: var(--leading-tight);
  letter-spacing: var(--track-tight);
  margin: 0;
}

.wwsu-show__host {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-14);
  color: var(--fg-muted);
  margin-top: var(--space-2);
}

.wwsu-show__live {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--wwsu-cream);
  color: var(--wwsu-ink);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
}

.wwsu-show__live__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--wwsu-green);
  animation: wwsu-pulse 1.4s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .wwsu-show__live__dot { animation: none; }
}

/* ---- News strip ------------------------------------------ */

.wwsu-news {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.wwsu-news__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding-top: var(--space-5);
  border-top: var(--rule-w-3) solid var(--wwsu-ink);
  color: var(--wwsu-ink);
  text-decoration: none;
}

a.wwsu-news__item:hover,
a.wwsu-news__item:focus {
  color: var(--wwsu-ink);
  text-decoration: none;
}

a.wwsu-news__item:hover .wwsu-news__title,
a.wwsu-news__item:focus .wwsu-news__title {
  color: var(--wwsu-green-deep);
}

.wwsu-news__cat {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-green);
}

.wwsu-news__title {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-21);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-snug);
  margin: 0;
}

.wwsu-news__excerpt {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

.wwsu-news__date {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-muted);
  margin-top: auto;
}

/* ---- Footer (.main-footer) ------------------------------- */
/* Brand the existing AdminLTE footer with navy + frequency mark
   + university tie-in. Existing markup uses .container-fluid
   and .row — we override surfaces only. */

.main-footer {
  background: var(--wwsu-navy) !important;
  color: var(--fg-on-dark) !important;
  border-top: var(--rule-w-2) solid var(--wwsu-ink);
  padding: var(--space-16) var(--space-8) var(--space-8) !important;
}

.main-footer a {
  color: var(--fg-on-dark);
  text-decoration: none;
}

.main-footer a:hover {
  color: var(--wwsu-green-glow);
}

.main-footer strong {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-green-glow);
  display: block;
  margin-bottom: var(--space-2);
}

/* Brand frequency mark — standalone utility (place in footer
   or hero for emphasis). */
.wwsu-freq-mark {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-48);
  text-transform: uppercase;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  color: var(--fg-on-dark);
}

.wwsu-freq-mark em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  color: var(--wwsu-green-glow);
}

/* ---- Prose container ------------------------------------- */
/* Long-form reading width for body copy / article text. */

.wwsu-prose {
  max-width: var(--content-w-narrow); /* ~720 px via token */
  margin: 0 auto;
}

/* ---- Section rhythm ---------------------------------------- */
/* Keeps page sections on the token spacing grid. */

.wwsu-page-sections {
  display: flex;
  flex-direction: column;
  gap: clamp(64px, 8vw, 96px);
}

/* ---- Public Nav (wwsu-public-nav) ------------------------ */
/* Horizontal brand bar that replaces the AdminLTE sidebar on
   the public website persona. Delegates clicks to hidden sidebar
   anchors; WWSUNavigation continues to own all state logic. */

/* Hide sidebar on website pages — nav shim delegates to it. */
.wwsu-website .wwsu-sidebar {
  display: none !important;
}

/* Compensate for removed sidebar: full-width content area. */
.wwsu-website .content-wrapper,
.wwsu-website .main-footer {
  margin-left: 0 !important;
}

/* Hide the AdminLTE hamburger (no sidebar to toggle). */
.wwsu-website [data-widget="pushmenu"] {
  display: none !important;
}

.wwsu-public-nav {
  background: var(--wwsu-navy);
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
  position: sticky;
  top: 0;                       /* sticks below AdminLTE #top-bar on scroll */
  z-index: 400;
}

.wwsu-public-nav__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  padding: 0 var(--space-8);
  max-width: var(--content-w);
  margin: 0 auto;
  min-height: 56px;
}

/* Brand logo */
.wwsu-public-nav__brand {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}

.wwsu-public-nav__logo {
  height: 36px;
  width: auto;
  display: block;
}

/* Nav menu — horizontal on desktop */
.wwsu-public-nav__menu {
  display: flex;
  align-items: center;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
}

/* Top-level link / button */
.wwsu-public-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-4) var(--space-4);
  background: transparent;
  border: 0;
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-broadcast);
  line-height: 56px;   /* full nav height — vertically centres text */
}

.wwsu-public-nav__link:hover,
.wwsu-public-nav__item--has-sub > button:hover,
.wwsu-public-nav__item--has-sub > button[aria-expanded="true"] {
  color: var(--wwsu-green-glow);
}

.wwsu-public-nav__caret {
  font-size: 0.65em;
  transition: transform var(--dur-2) var(--ease-broadcast);
}

.wwsu-public-nav__item--has-sub > button[aria-expanded="true"] .wwsu-public-nav__caret {
  transform: rotate(180deg);
}

/* Dropdown panel */
.wwsu-public-nav__item--has-sub {
  position: relative;
}

.wwsu-public-nav__sub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 200px;
  background: var(--wwsu-navy);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  border-top: var(--rule-w-2) solid var(--wwsu-green);
  list-style: none;
  margin: 0;
  padding: var(--space-2) 0;
  z-index: 500;
}

/* Show on keyboard-driven aria-expanded OR on hover (progressive) */
.wwsu-public-nav__item--has-sub > button[aria-expanded="true"] + .wwsu-public-nav__sub,
.wwsu-public-nav__item--has-sub:hover > .wwsu-public-nav__sub {
  display: block;
}

.wwsu-public-nav__sublink {
  display: block;
  padding: var(--space-2) var(--space-5);
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-broadcast),
              background var(--dur-2) var(--ease-broadcast);
}

.wwsu-public-nav__sublink:hover {
  color: var(--fg-on-dark);
  background: var(--wwsu-green-deep);
}

/* Mobile hamburger */
.wwsu-public-nav__toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: transparent;
  border: 0;
  padding: var(--space-2);
  cursor: pointer;
  margin-left: auto;
}

.wwsu-public-nav__bar {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--fg-on-dark);
  border-radius: 1px;
  transition: transform var(--dur-2) var(--ease-broadcast),
              opacity   var(--dur-2) var(--ease-broadcast);
}

/* Responsive — stack below 768 px */
@media (max-width: 768px) {
  .wwsu-public-nav__toggle {
    display: flex;
  }

  .wwsu-public-nav__menu {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--wwsu-navy);
    border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
    z-index: 500;
    padding: var(--space-4) 0;
  }

  .wwsu-public-nav__menu.is-open {
    display: flex;
  }

  .wwsu-public-nav {
    position: relative;  /* so the dropdown panel can be absolute */
  }

  .wwsu-public-nav__link {
    line-height: normal;
    padding: var(--space-3) var(--space-6);
    width: 100%;
    justify-content: space-between;
  }

  .wwsu-public-nav__item--has-sub {
    position: static;
  }

  .wwsu-public-nav__item--has-sub > button[aria-expanded="true"] + .wwsu-public-nav__sub {
    display: block;
    position: static;
    border: 0;
    border-left: var(--rule-w-4) solid var(--wwsu-green);
    border-radius: 0;
    margin: 0;
    background: transparent;
  }

  .wwsu-public-nav__sublink {
    padding-left: var(--space-10);
  }
}

/* ---- Hero eyebrow (two-voice pairing) -------------------- */

.wwsu-hero__eyebrow {
  font-family: var(--font-display);
  font-weight: 300;         /* Futura PT Light */
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-14);
  color: var(--wwsu-green-glow);
  margin: 0 0 var(--space-2);
}

/* ---- Footer (wwsu-footer) -------------------------------- */
/* Brand-standard footer replacing the AdminLTE placeholder.
   Navy surface, five-column grid (brand + 3 nav + contact),
   WSU co-brand seam at the bottom. */

.main-footer.wwsu-footer {
  padding: 0 !important;
  border-top: var(--rule-w-2) solid var(--wwsu-ink);
  background: var(--wwsu-navy) !important;
  color: var(--fg-on-dark) !important;
}

.wwsu-footer__grid {
  display: grid;
  grid-template-columns:
    minmax(250px, 2fr)
    repeat(4, minmax(0, 1fr));
  gap: var(--space-10);
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8) var(--space-10);
  box-sizing: border-box;
}

.wwsu-footer__brand,
.wwsu-footer__nav-group,
.wwsu-footer__contact {
  min-width: 0;
}

.wwsu-footer__logo,
.wwsu-footer__logo-img {
  width: clamp(180px, 16vw, 230px);
  max-width: 100%;
  height: auto;
  display: block;
  margin-bottom: var(--space-4);
  opacity: 0.92;
}

.wwsu-footer__station,
.wwsu-footer__logo-mark {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-30), 2.5vw, var(--fs-38));
  font-weight: 900;
  letter-spacing: 0;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--fg-on-dark);
}

.wwsu-footer__tagline {
  font-family: var(--font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-green-glow);
  margin: 0 0 var(--space-3);
}

.wwsu-footer__desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(var(--fs-16), 1.2vw, var(--fs-18));
  font-weight: 700;
  line-height: var(--leading-snug);
  color: rgba(242, 241, 240, 0.82);
  margin: 0 0 var(--space-5);
  max-width: 300px;
}

.wwsu-footer__social {
  display: flex;
  gap: var(--space-4);
  align-items: center;
  flex-wrap: wrap;
}

.main-footer .wwsu-footer__social-link {
  color: rgba(242, 241, 240, 0.76) !important;
  font-size: var(--fs-21);
  text-decoration: none;
  transition: color var(--dur-2) var(--ease-broadcast);
}

.main-footer .wwsu-footer__social-link:hover {
  color: var(--wwsu-green-glow) !important;
}

.wwsu-footer__nav-head {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  color: var(--wwsu-green-glow);
  margin: 0 0 var(--space-4);
}

.wwsu-footer__nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.main-footer .wwsu-footer__nav-link {
  display: inline-block;
  max-width: 100%;
  font-family: var(--font-display);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-12);
  line-height: 1.45;
  color: rgba(242, 241, 240, 0.76) !important;
  text-decoration: none;
  overflow-wrap: anywhere;
  transition: color var(--dur-2) var(--ease-broadcast);
}

.main-footer .wwsu-footer__nav-link:hover {
  color: var(--fg-on-dark) !important;
}

.wwsu-footer__contact p {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  line-height: var(--leading-snug);
  color: rgba(242, 241, 240, 0.76);
  margin: 0 0 var(--space-3);
  overflow-wrap: anywhere;
}

.main-footer .wwsu-footer__contact a {
  color: rgba(242, 241, 240, 0.88) !important;
  text-decoration: none;
}

.main-footer .wwsu-footer__contact a:hover {
  color: var(--fg-on-dark) !important;
}

/* WSU institutional seam */
.wwsu-footer__wsu-seam {
  border-top: var(--rule-w-2) solid var(--rule-on-dark);
  padding: var(--space-5) 0;
  background: var(--wwsu-ink);
}

.wwsu-footer__wsu-line {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-12);
  line-height: 1.6;
  color: rgba(242, 241, 240, 0.62);
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  overflow-wrap: anywhere;
}

.wwsu-footer__wsu-seam .wwsu-container {
  width: 100%;
  max-width: var(--content-w);
  margin: 0 auto;
  padding-right: var(--space-8);
  padding-left: var(--space-8);
  box-sizing: border-box;
}

.wwsu-footer__wsu-link {
  color: var(--wsu-gold);
  text-decoration: none;
}

.wwsu-footer__wsu-link:hover {
  color: var(--fg-on-dark);
}

/* Footer responsive */
@media (max-width: 1100px) {
  .wwsu-footer__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .wwsu-footer__brand {
    grid-column: 1 / -1;
  }

  .wwsu-footer__desc {
    max-width: 400px;
  }
}

@media (max-width: 700px) {
  .wwsu-footer__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-8);
    padding-top: var(--space-12);
  }

  .wwsu-footer__brand {
    grid-column: 1 / -1;
  }

  .wwsu-footer__nav-list {
    gap: var(--space-3);
  }
}

@media (max-width: 640px) {
  .wwsu-footer__grid {
    grid-template-columns: 1fr;
  }
}

/* ---- Now-playing bar typography fixes -------------------- */
/* The nav-item-nowplaying is populated by wwsu-meta JS.
   These rules apply brand typography to whatever text it injects. */

#top-bar.main-header .nav-item-nowplaying {
  font-family: var(--font-display);
  font-weight: 700;
  font-style: normal;
  font-size: var(--fs-12);
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  color: var(--wwsu-ink) !important;
}

/* JS inserts an <em> for the track title — render it in Souvenir italic */
#top-bar.main-header .nav-item-nowplaying em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}

/* JS may insert a frequency / status string — render in mono */
#top-bar.main-header .nav-item-nowplaying .np-frequency {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
}

/* ---- Skip navigation link (WCAG 2.4.1) ------------------- */

.wwsu-skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 9999;
  background: var(--wwsu-green);
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  font-size: var(--fs-14);
  padding: var(--space-3) var(--space-6);
  text-decoration: none;
  border-bottom-left-radius: var(--radius-2);
  border-bottom-right-radius: var(--radius-2);
  transition: top var(--dur-2) var(--ease-broadcast);
}

.wwsu-skip-link:focus {
  top: 0;
  outline: 2px solid var(--fg-on-dark);
  outline-offset: 2px;
}

/* ---- Global focus-visible styles (WCAG 2.4.7) ------------ */
/* Applied to all interactive elements when navigated by keyboard.
   Hover-driven dropdowns remain unchanged; this only adds a visible
   ring on keyboard focus so the outline doesn't show on mouse click. */

:focus-visible {
  outline: 2px solid var(--wwsu-green);
  outline-offset: 2px;
}

/* Override the heavy AdminLTE/Bootstrap focus style */
.btn:focus-visible,
.nav-link:focus-visible,
a:focus-visible {
  outline: 2px solid var(--wwsu-green);
  outline-offset: 2px;
  box-shadow: none;
}

/* Slightly thicker ring on dark surfaces where green has less contrast */
[data-surface="dark"] :focus-visible {
  outline-color: var(--wwsu-green-glow);
}

/* Public nav items */
.wwsu-public-nav__link:focus-visible,
.wwsu-public-nav__sublink:focus-visible,
.wwsu-public-nav__toggle:focus-visible {
  outline: 2px solid var(--wwsu-green-glow);
  outline-offset: 2px;
}

/* Footer links */
.wwsu-footer__nav-link:focus-visible,
.wwsu-footer__social-link:focus-visible {
  outline: 2px solid var(--wwsu-green-glow);
  outline-offset: 2px;
}

/* ---- Retire legacy color classes ------------------------- */
/* AdminLTE / Bootstrap utility classes that don't map to brand
   colors. Re-route to brand tokens so existing markup picks up
   the brand without touching every page. */

.text-orange { color: var(--wsu-gold) !important; }
.text-blue   { color: var(--wsu-green) !important; }
.text-purple { color: var(--wwsu-green-deep) !important; }

.bg-orange { background-color: var(--wsu-gold) !important; color: var(--wwsu-ink) !important; }
.bg-blue   { background-color: var(--wsu-green) !important; color: var(--fg-on-dark) !important; }
.bg-purple { background-color: var(--wwsu-green-deep) !important; color: var(--fg-on-dark) !important; }

/* Bootstrap state colors flattened to brand tokens. */
.text-success { color: var(--wwsu-green) !important; }
.text-danger  { color: var(--signal-red) !important; }
.text-warning { color: var(--signal-amber) !important; }
.text-info    { color: var(--wsu-green) !important; }

/* ---- Responsive ------------------------------------------ */

@media (max-width: 900px) {
  .wwsu-shows,
  .wwsu-news {
    grid-template-columns: 1fr 1fr;
  }
  .wwsu-sch__row {
    grid-template-columns: 100px 1fr 80px;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-4);
  }
  .wwsu-hero {
    padding: var(--space-16) var(--space-4);
  }
}

@media (max-width: 600px) {
  .wwsu-shows,
  .wwsu-news {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   FOUNDATION OVERRIDES — bridge AdminLTE/Bootstrap markup to
   the WWSU 106.9 FM design system. Templates ship with
   `.row > .col-* > .card > .card-body` patterns; these rules
   re-skin them as bracket-motif CTA cards without rewriting
   every EJS template.
   ============================================================ */

/* ---- Section heading defaults --------------------------- */
/* Templates use plain <h2>/<h3> inside .wwsu-section. Brand them
   as section titles automatically. */
.wwsu-section h2 {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: clamp(var(--fs-30), 4vw, var(--fs-48));
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  color: var(--wwsu-ink);
  margin: 0 0 var(--space-6);
}

.wwsu-section h2 em {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  color: var(--wwsu-green-deep);
}

.wwsu-section h3 {
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  font-size: var(--fs-21);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  color: var(--wwsu-ink);
  margin: var(--space-4) 0 var(--space-3);
}

.wwsu-section--dark h2,
.wwsu-section--dark h3 {
  color: var(--fg-on-dark);
}

.wwsu-section--dark h2 em {
  color: var(--wwsu-green-glow);
}

.wwsu-section p {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-16);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
  margin: 0 0 var(--space-4);
}

.wwsu-section--dark p {
  color: var(--fg-on-dark-muted);
}

.wwsu-section .wwsu-section__eyebrow,
.wwsu-section .wwsu-show__time,
.wwsu-section .wwsu-news__cat {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: var(--track-marquee);
  line-height: 1.2;
  text-transform: uppercase;
  color: var(--wwsu-green-deep);
}

.wwsu-section--dark .wwsu-section__eyebrow,
.wwsu-section--dark .wwsu-show__time,
.wwsu-section--dark .wwsu-news__cat {
  color: var(--wwsu-green-glow);
}

/* Reading-width prose paragraphs inside narrow containers */
.wwsu-container--narrow > p,
.wwsu-prose p {
  font-size: var(--fs-18);
}

/* ---- CTA grid ---------------------------------------------- */
/* For new templates that adopt BEM directly. */

.wwsu-cta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.wwsu-cta-card {
  position: relative;
  background: var(--wwsu-paper);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  padding: var(--space-8) var(--space-6);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--dur-3) var(--ease-broadcast);
}

.wwsu-cta-card::before,
.wwsu-cta-card::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: var(--rule-w-3) solid var(--wwsu-ink);
  transition: border-color var(--dur-3) var(--ease-broadcast);
  pointer-events: none;
}

.wwsu-cta-card::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}

.wwsu-cta-card::after {
  bottom: -2px;
  right: -2px;
  border-left: 0;
  border-top: 0;
}

.wwsu-cta-card:hover {
  transform: translateY(-2px);
}

.wwsu-cta-card:hover::before,
.wwsu-cta-card:hover::after {
  border-color: var(--wwsu-green);
}

.wwsu-cta-card__icon {
  font-size: var(--fs-48);
  color: var(--wwsu-green-deep);
  line-height: 1;
  margin-bottom: var(--space-5);
}

.wwsu-cta-card__title {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  font-size: var(--fs-21);
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  color: var(--wwsu-ink);
  margin: 0 0 var(--space-3);
}

.wwsu-cta-card__desc {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--fs-14);
  line-height: var(--leading-relaxed);
  color: var(--fg-muted);
  margin: 0 0 var(--space-6);
}

@media (max-width: 1024px) {
  .wwsu-cta-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .wwsu-cta-grid {
    grid-template-columns: 1fr;
    gap: var(--space-6);
  }
}

/* ---- Make wrapper visible (ship hidden-by-default flag) - */
/* The .wrapper has .d-none on the website layout to prevent
   flash-of-unstyled-content while WWSUNavigation boots. If JS
   fails or is disabled, the page must still render — this
   restores visibility once CSS has loaded. JS removes .d-none
   normally; this ensures graceful fallback. */

@media (scripting: none) {
  body.wwsu-website .wrapper.d-none {
    display: block !important;
  }
  body.wwsu-website #section-home.d-none {
    display: block !important;
  }
}

/* ============================================================
   PUBLIC WEBSITE
   The visible website shell. The hidden sidebar remains as the
   state adapter for WWSUNavigation.
   ============================================================ */

body.wwsu-website {
  background: var(--wwsu-cream);
  overflow-x: hidden;
}

body.wwsu-website #wwsu-public-nav,
.wwsu-website .wwsu-public-nav {
  display: none !important;
}

.wwsu-website .content-wrapper {
  margin-top: 0 !important;
  min-height: 0 !important;
  background: var(--wwsu-cream);
}

.wwsu-website .content {
  padding: 0;
}

/* Belt-and-suspenders: when AdminLTE's body classes are absent, the
   default fixed-sidebar margin shouldn't apply, but if any persisted
   override slips through we pin content-wrapper to the left edge. */
body.wwsu-website .content-wrapper,
body.wwsu-website .main-footer {
  margin-left: 0 !important;
}

/* Force container max-width and centering at high specificity. AdminLTE
   leaves .content-wrapper full-width; without this, any inherited width
   stretching from parents (flex, grid) can override .wwsu-container max. */
body.wwsu-website .wwsu-container {
  width: 100%;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-8);
  padding-left: var(--space-8);
  box-sizing: border-box;
}

body.wwsu-website .wwsu-container--narrow {
  width: 100%;
  max-width: 720px;
  margin-right: auto;
  margin-left: auto;
  padding-right: var(--space-8);
  padding-left: var(--space-8);
  box-sizing: border-box;
}

/* Sections that should be edge-to-edge (banded backgrounds) still keep
   container constraint on inner content. Prevent any AdminLTE/Bootstrap
   .row or .container utility from forcing children full-width. */
body.wwsu-website .wwsu-section {
  width: 100%;
}

body.wwsu-website main,
body.wwsu-website #main-content,
body.wwsu-website .content,
body.wwsu-website .content-wrapper {
  display: block;
  width: 100%;
}

/* Responsive 16:9 video wrapper (used by #section-video iframe) */
.wwsu-video-embed {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
  overflow: hidden;
  background: var(--wwsu-ink);
  border: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-video-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.wwsu-website .content > section[aria-label="Warnings"] {
  position: fixed;
  left: var(--space-4);
  right: var(--space-4);
  top: calc(73px + 64px + var(--space-4));
  z-index: var(--z-modal);
  pointer-events: none;
}

.wwsu-website .content > section[aria-label="Warnings"] .alert {
  pointer-events: auto;
  max-width: 960px;
  margin: 0 auto var(--space-2);
}

.wwsu-home-legacy,
.floating-buttons .amplitude-play-pause {
  display: none !important;
}

.floating-buttons .nav-item-schedule-change,
.floating-buttons .nav-item-eas-alert {
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-width: 48px;
  min-height: 48px;
  margin-top: var(--space-2);
  border-radius: var(--radius-pill);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: var(--track-marquee);
  line-height: 1;
  text-transform: uppercase;
}

.floating-buttons .nav-item-schedule-change:not(.d-none),
.floating-buttons .nav-item-eas-alert:not(.d-none) {
  display: inline-flex;
}

.floating-buttons .nav-item-eas-alert {
  padding: 0 var(--space-4);
  background: var(--signal-amber);
  color: var(--wwsu-ink);
}

.floating-buttons .nav-item-eas-alert::after {
  content: "Alerts";
}

.floating-buttons .nav-item-eas-alert.wwsu-eas-alert--extreme,
.floating-buttons .nav-item-eas-alert.wwsu-eas-alert--severe {
  background: var(--signal-red);
  color: var(--fg-on-dark);
}

.floating-buttons .nav-item-eas-alert.wwsu-eas-alert--extreme::after {
  content: "Emergency Alert";
}

.floating-buttons .nav-item-eas-alert.wwsu-eas-alert--severe::after {
  content: "Severe Alert";
}

.floating-buttons .nav-item-eas-alert.wwsu-eas-alert--moderate {
  background: var(--signal-amber);
  color: var(--wwsu-ink);
}

.floating-buttons .nav-item-eas-alert.wwsu-eas-alert--minor,
.floating-buttons .nav-item-eas-alert.wwsu-eas-alert--info {
  background: var(--wwsu-green-deep);
  color: var(--fg-on-dark);
}

.wwsu-website .toasts-top-right {
  top: calc(73px + 64px + var(--space-4));
  right: var(--space-4);
}

.wwsu-website .toast.bg-danger,
.wwsu-website .toast.bg-orange,
.wwsu-website .toast.bg-warning,
.wwsu-website .toast.bg-info,
.wwsu-website .toast.bg-secondary {
  border-radius: var(--radius-2);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  font-family: var(--font-sans);
}

.wwsu-announcements {
  max-width: var(--content-w);
  margin: var(--space-6) auto 0;
  padding: 0 var(--space-8);
}

.wwsu-nowplaying-bar {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  max-width: 100vw;
  min-height: 73px;
  padding: 8px 96px 8px 24px;
  box-sizing: border-box;
  background: var(--wwsu-white);
  color: var(--wwsu-ink);
  border-bottom: 1px solid var(--rule-soft);
  position: sticky;
  top: 0;
  z-index: 1001;
}

.wwsu-nowplaying-bar__art {
  width: 56px;
  height: 56px;
  flex: 0 0 56px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--wwsu-green) 0%, var(--wwsu-navy) 100%);
  border: 2px solid var(--wwsu-ink);
  color: var(--wwsu-cream);
  overflow: hidden;
}

.wwsu-nowplaying-bar__art-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wwsu-nowplaying-bar__art-icon {
  font-size: var(--fs-21);
}

.wwsu-nowplaying-bar__meta {
  flex: 1 1 auto;
  min-width: 0;
}

.wwsu-nowplaying-bar__label {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: var(--track-marquee);
  line-height: 1;
  margin-bottom: var(--space-1);
  text-transform: uppercase;
  color: var(--wwsu-green);
}

.wwsu-nowplaying-bar__title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-size: var(--fs-18);
  font-weight: 900;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.wwsu-nowplaying-bar__artist {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  font-style: italic;
  color: var(--fg-muted);
}

.wwsu-nowplaying-bar__controls {
  position: fixed;
  top: 8px;
  right: 24px;
  z-index: 1002;
  display: flex;
  align-items: center;
}

.wwsu-nowplaying-bar__play {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: var(--wwsu-green);
  color: var(--wwsu-cream);
  cursor: pointer;
  transition: background var(--dur-2) var(--ease-broadcast);
}

.wwsu-nowplaying-bar__play:hover {
  background: var(--wwsu-green-deep);
}

.wwsu-header {
  position: sticky;
  top: 73px;
  z-index: 1000;
  width: 100%;
  max-width: 100vw;
  box-sizing: border-box;
  background: var(--wwsu-cream);
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-nav__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  max-width: 1200px;
  height: 64px;
  margin: 0 auto;
  padding: 0 24px;
}

.wwsu-nav__group {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wwsu-nav__group--left {
  justify-content: flex-end;
}

.wwsu-nav__group--right {
  justify-content: flex-start;
}

.wwsu-nav__link,
.wwsu-nav__dropdown-link,
.wwsu-nav__mobile-link {
  font-family: var(--font-display);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
}

.wwsu-nav__link {
  display: block;
  padding: 8px 14px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--wwsu-ink);
  white-space: nowrap;
  cursor: pointer;
}

.wwsu-nav__link:hover,
.wwsu-nav__link.is-active,
.wwsu-nav__link[aria-expanded="true"] {
  color: var(--wwsu-green-deep);
}

.wwsu-nav__link--dropdown::after {
  content: "\25BE";
  display: inline-block;
  margin-left: 0.38em;
  border: 0;
  font-size: 0.72em;
  line-height: 1;
  transform: none;
  opacity: 0.6;
}

.wwsu-nav__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-5);
  text-decoration: none;
}

.wwsu-nav__logo img {
  display: block;
  width: auto;
  height: 36px;
}

.wwsu-nav__item--dropdown {
  position: relative;
}

.wwsu-nav__dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  min-width: 180px;
  list-style: none;
  margin: 0;
  padding: 4px 0;
  background: var(--wwsu-paper);
  border: 1px solid var(--rule-soft);
  border-radius: 4px;
  box-shadow: var(--shadow-soft);
  z-index: 901;
}

.wwsu-nav__group--left .wwsu-nav__dropdown {
  left: 0;
}

.wwsu-nav__group--right .wwsu-nav__dropdown {
  right: 0;
}

.wwsu-nav__item--dropdown:hover .wwsu-nav__dropdown,
.wwsu-nav__item--dropdown.is-open .wwsu-nav__dropdown,
.wwsu-nav__item--dropdown > button[aria-expanded="true"] + .wwsu-nav__dropdown {
  display: block;
}

.wwsu-nav__dropdown-link {
  display: block;
  padding: 10px 14px;
  color: var(--wwsu-ink);
  white-space: nowrap;
}

.wwsu-nav__dropdown-link:hover {
  color: var(--wwsu-green-deep);
  background: var(--accent-soft);
}

.wwsu-nav__mobile-bar,
.wwsu-nav__mobile-menu {
  display: none;
}

.wwsu-nav__hamburger {
  width: 42px;
  height: 42px;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border: 0;
  background: transparent;
  color: var(--fg);
}

.wwsu-nav__hamburger span {
  width: 24px;
  height: 2px;
  background: currentColor;
}

.wwsu-nav__mobile-spacer {
  width: 42px;
}

.wwsu-home-redesign {
  background: var(--wwsu-cream);
}

.wwsu-home-redesign .wwsu-hero {
  min-height: clamp(360px, 43vw, 462px);
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(260px, 0.75fr);
  align-items: center;
  gap: clamp(28px, 5vw, 72px);
  position: relative;
  overflow: hidden;
  padding: clamp(56px, 7vw, 84px) clamp(var(--space-6), 7vw, var(--space-20));
  background: var(--wwsu-navy);
  color: var(--fg-on-dark);
}

.wwsu-home-redesign .wwsu-hero--live {
  background: var(--wwsu-green);
}

.wwsu-home-redesign .wwsu-hero--sports {
  background: var(--wwsu-navy);
}

.wwsu-home-redesign .wwsu-hero--remote,
.wwsu-home-redesign .wwsu-hero--prerecord,
.wwsu-home-redesign .wwsu-hero--automation,
.wwsu-home-redesign .wwsu-hero--upcoming {
  background: var(--wwsu-navy-2);
}

.wwsu-home-redesign .wwsu-hero--default,
.wwsu-home-redesign .wwsu-hero--automation,
.wwsu-home-redesign .wwsu-hero--upcoming {
  grid-template-columns: minmax(0, 1fr);
}

.wwsu-hero__diag {
  position: absolute;
  inset: 0 0 0 50%;
  opacity: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, 0.14);
  clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

.wwsu-hero__content,
.wwsu-hero__artwork {
  position: relative;
  z-index: 1;
  min-width: 0;
}

.wwsu-home-redesign .wwsu-hero__content {
  max-width: min(760px, 100%);
}

.wwsu-home-redesign .wwsu-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-pill);
  background: var(--wwsu-cream);
  color: var(--wwsu-ink);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: var(--track-marquee);
  line-height: 1;
  text-transform: uppercase;
}

.wwsu-home-redesign .wwsu-hero--default .wwsu-hero__badge,
.wwsu-home-redesign .wwsu-hero--automation .wwsu-hero__badge,
.wwsu-home-redesign .wwsu-hero--upcoming .wwsu-hero__badge {
  display: none;
}

.wwsu-hero__badge__dot {
  width: 0.55em;
  height: 0.55em;
  border-radius: var(--radius-pill);
  background: var(--wwsu-green);
  animation: wwsu-pulse 1.4s ease-in-out infinite;
}

.wwsu-home-redesign .wwsu-hero__eyebrow {
  margin: 0 0 var(--space-4);
  color: var(--wwsu-green-glow);
}

.wwsu-home-redesign .wwsu-hero--live .wwsu-hero__eyebrow,
.wwsu-home-redesign .wwsu-hero--remote .wwsu-hero__eyebrow,
.wwsu-home-redesign .wwsu-hero--prerecord .wwsu-hero__eyebrow,
.wwsu-home-redesign .wwsu-hero--sports .wwsu-hero__eyebrow {
  margin-top: var(--space-6);
}

.wwsu-home-redesign .wwsu-hero--live .wwsu-hero__eyebrow {
  color: rgba(242, 241, 240, 0.78);
}

.wwsu-home-redesign .wwsu-hero__title {
  max-width: 720px;
  margin: 0 0 var(--space-5);
  font-size: clamp(var(--fs-48), 5.8vw, var(--fs-88));
  line-height: var(--leading-tight);
  color: var(--fg-on-dark);
  overflow-wrap: anywhere;
}

.wwsu-home-redesign .wwsu-hero__title-line {
  display: block;
}

.wwsu-home-redesign .wwsu-hero__title em {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 700;
  text-transform: none;
  color: var(--fg-on-dark);
}

.wwsu-home-redesign .wwsu-hero__sub {
  max-width: 620px;
  margin: 0;
  font-family: var(--font-serif);
  font-size: clamp(var(--fs-20), 2.2vw, var(--fs-30));
  font-style: italic;
  line-height: var(--leading-snug);
  color: rgba(242, 241, 240, 0.84);
  overflow-wrap: anywhere;
}

.wwsu-hero__extra {
  min-height: 34px;
  margin-top: var(--space-5);
}

.wwsu-hero__countdown,
.wwsu-hero__tagline {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 800;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
}

.wwsu-hero__countdown {
  color: var(--wsu-gold);
}

.wwsu-hero__tagline {
  color: rgba(242, 241, 240, 0.58);
}

.wwsu-hero__eq {
  display: inline-flex;
  align-items: flex-end;
  gap: 4px;
  height: 32px;
  margin-bottom: var(--space-2);
}

.wwsu-hero__eq-bar {
  width: 4px;
  height: 30px;
  border-radius: var(--radius-pill);
  background: var(--wwsu-green-glow);
  transform: scaleY(0.27);
  transform-origin: bottom center;
  animation: wwsu-hero-eq 0.86s ease-in-out infinite;
}

.wwsu-hero__eq-bar:nth-child(2) {
  animation-delay: 0.12s;
}

.wwsu-hero__eq-bar:nth-child(3) {
  animation-delay: 0.24s;
}

.wwsu-hero__eq-bar:nth-child(4) {
  animation-delay: 0.08s;
}

.wwsu-hero__eq-bar:nth-child(5) {
  animation-delay: 0.18s;
}

@keyframes wwsu-hero-eq {
  0%,
  100% {
    transform: scaleY(0.27);
  }
  50% {
    transform: scaleY(1);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wwsu-hero__eq-bar {
    animation: none;
    transform: scaleY(0.7);
  }
}

.wwsu-home-redesign .wwsu-hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-6);
}

.wwsu-home-redesign .wwsu-hero--upcoming .wwsu-hero__cta {
  margin-top: var(--space-5);
}

.wwsu-home-redesign .wwsu-hero--upcoming .btn-wwsu--ghost-light {
  padding: 0 0 2px;
  border: 0;
  border-bottom: var(--rule-w-2) solid currentColor;
  border-radius: 0;
  background: transparent;
  color: var(--wwsu-green-glow);
}

.wwsu-hero__artwork {
  justify-self: center;
  width: min(440px, 100%);
}

.wwsu-home-redesign .wwsu-hero--default .wwsu-hero__artwork,
.wwsu-home-redesign .wwsu-hero--automation .wwsu-hero__artwork,
.wwsu-home-redesign .wwsu-hero--upcoming .wwsu-hero__artwork {
  display: none;
}

.wwsu-hero__art-frame {
  position: relative;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: var(--space-8);
  border: var(--rule-w-3) solid rgba(242, 241, 240, 0.82);
}

.wwsu-hero__art-img {
  max-width: 82%;
  max-height: 82%;
  object-fit: contain;
}

.wwsu-hero__art-frame.has-photo {
  padding: 0;
}

.wwsu-hero__art-frame.has-photo .wwsu-hero__art-img {
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: cover;
}

.wwsu-hero__art-bracket::before,
.wwsu-hero__art-bracket::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 42px;
  border: var(--rule-w-4) solid var(--wwsu-green-glow);
  pointer-events: none;
}

.wwsu-hero__art-bracket::before {
  top: calc(var(--space-3) * -1);
  left: calc(var(--space-3) * -1);
  border-right: 0;
  border-bottom: 0;
}

.wwsu-hero__art-bracket::after {
  right: calc(var(--space-3) * -1);
  bottom: calc(var(--space-3) * -1);
  border-top: 0;
  border-left: 0;
}

.wwsu-hero__art-label {
  margin: var(--space-5) 0 0;
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--track-marquee);
  text-align: center;
  text-transform: uppercase;
  color: rgba(242, 241, 240, 0.72);
}

.wwsu-container--narrow.wwsu-home-about {
  max-width: 1000px;
  text-align: center;
}

.wwsu-home-about .wwsu-section__head {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: var(--space-12);
}

.wwsu-home-about .wwsu-section__eyebrow {
  margin-bottom: var(--space-6);
}

.wwsu-home-about .wwsu-section__title {
  width: 100%;
  max-width: 100%;
  margin: 0;
}

.wwsu-home-about > p {
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  font-size: clamp(var(--fs-18), 2.2vw, var(--fs-24));
  font-weight: 700;
  line-height: 1.16;
  color: var(--fg-muted);
}

.wwsu-section__head--center {
  justify-content: center;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.wwsu-connect {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.wwsu-connect__item,
.wwsu-person-card,
.wwsu-list-card {
  position: relative;
  border: var(--rule-w-2) solid currentColor;
  padding: var(--space-8) var(--space-6);
}

.wwsu-connect__item::before,
.wwsu-connect__item::after,
.wwsu-person-card::before,
.wwsu-person-card::after,
.wwsu-list-card::before,
.wwsu-list-card::after {
  content: "";
  position: absolute;
  width: 28px;
  height: 28px;
  border: var(--rule-w-3) solid currentColor;
  pointer-events: none;
}

.wwsu-connect__item::before,
.wwsu-person-card::before,
.wwsu-list-card::before {
  top: -2px;
  left: -2px;
  border-right: 0;
  border-bottom: 0;
}

.wwsu-connect__item::after,
.wwsu-person-card::after,
.wwsu-list-card::after {
  right: -2px;
  bottom: -2px;
  border-top: 0;
  border-left: 0;
}

.wwsu-connect__icon {
  margin-bottom: var(--space-4);
  color: var(--wwsu-green-glow);
  font-size: var(--fs-48);
}

.wwsu-connect__title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--fs-21);
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--fg-on-dark);
}

.wwsu-connect__desc {
  margin: 0 0 var(--space-5);
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  font-style: italic;
  color: var(--fg-on-dark-muted);
}

.wwsu-person-grid,
.wwsu-list-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
}

.wwsu-person-card,
.wwsu-list-card {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: var(--space-6);
  align-items: start;
  background: var(--wwsu-paper);
  color: var(--wwsu-ink);
}

.wwsu-list-card {
  grid-template-columns: 120px 1fr;
}

.wwsu-person-card__media,
.wwsu-list-card__media {
  width: 140px;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--wwsu-green-deep);
  color: var(--fg-on-dark);
  border: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-list-card__media {
  width: 120px;
}

.wwsu-person-card__media img,
.wwsu-list-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wwsu-person-card__media svg {
  width: 100%;
  height: 100%;
}

.wwsu-person-card__kicker,
.wwsu-list-card__kicker {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  color: var(--wwsu-green-deep);
}

.wwsu-person-card__title,
.wwsu-list-card__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 900;
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.wwsu-person-card__meta,
.wwsu-list-card__meta,
.wwsu-person-card__body,
.wwsu-list-card__body {
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  font-style: italic;
  color: var(--fg-muted);
}

.wwsu-person-card__actions,
.wwsu-list-card__actions {
  margin-top: var(--space-5);
}

.wwsu-inline-list,
.wwsu-hours {
  list-style: none;
  margin: var(--space-3) 0 0;
  padding: 0;
  display: grid;
  gap: var(--space-2);
  font-family: var(--font-display);
  font-size: var(--fs-14);
}

.wwsu-hours__row {
  display: grid;
  grid-template-columns: 56px 70px 1fr;
  gap: var(--space-2);
  padding-top: var(--space-2);
  border-top: var(--rule-w-1) solid var(--rule-soft);
}

.wwsu-mini-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-display);
  font-size: var(--fs-14);
}

.wwsu-mini-table th,
.wwsu-mini-table td {
  padding: var(--space-3);
  border-top: var(--rule-w-1) solid var(--rule-soft);
  vertical-align: top;
  text-align: left;
}

.wwsu-mini-table th {
  font-size: var(--fs-12);
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
}

.wwsu-card-badge,
.wwsu-sch__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 24px;
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--wwsu-green);
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
}

.wwsu-card-badge--muted {
  background: var(--wwsu-navy-3);
}

.wwsu-track-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wwsu-list-grid {
  grid-template-columns: 1fr;
  margin-top: var(--space-6);
}

.wwsu-person-grid {
  margin-top: var(--space-6);
}

.wwsu-list-card__media i,
.wwsu-show__art-text i {
  font-size: var(--fs-48);
}

.wwsu-list-card__subhead {
  margin: var(--space-5) 0 0;
  font-family: var(--font-display);
  font-size: var(--fs-14);
  font-weight: 900;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.wwsu-list-card__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

.wwsu-card-badge--danger {
  background: var(--wwsu-red);
}

.wwsu-show__art {
  display: grid;
  place-items: center;
  overflow: hidden;
  color: var(--fg-on-dark);
}

.wwsu-show__art img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wwsu-schedule-list {
  display: grid;
  gap: 0;
  margin-top: var(--space-6);
}

.wwsu-sch__row--actions {
  grid-template-columns: 150px minmax(0, 1fr) auto;
}

.wwsu-sch__main {
  min-width: 0;
}

.wwsu-sch__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-2);
}

.wwsu-sch__notices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.wwsu-sch__reason,
.wwsu-sch__desc {
  display: block;
  margin-top: var(--space-2);
  font-family: var(--font-serif);
  font-size: var(--fs-14);
  font-style: italic;
  color: var(--fg-muted);
}

.wwsu-sch__row.is-past {
  opacity: 0.62;
}

.wwsu-sch__row.is-canceled .wwsu-sch__name {
  text-decoration: line-through;
}

.wwsu-nowplaying-logo {
  width: 100%;
  max-height: 240px;
  object-fit: contain;
  padding: var(--space-4);
}

.wwsu-nowplaying-panel {
  display: grid;
  gap: var(--space-6);
  padding: var(--space-8);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  background: var(--wwsu-paper);
  color: var(--wwsu-ink);
}

.wwsu-nowplaying-panel__badge {
  display: flex;
  justify-content: flex-end;
}

.wwsu-nowplaying-panel__main {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: var(--space-6);
  align-items: center;
}

.wwsu-nowplaying-panel__art {
  min-height: 180px;
  display: grid;
  place-items: center;
  border: var(--rule-w-2) solid var(--wwsu-ink);
  background: var(--wwsu-green-deep);
}

.wwsu-nowplaying-panel__copy h3 {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-24), 4vw, var(--fs-48));
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.wwsu-nowplaying-panel__copy p,
.wwsu-nowplaying-panel__topic {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-style: italic;
  color: var(--fg-muted);
}

.wwsu-nowplaying-panel__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-4);
  align-items: center;
  padding-top: var(--space-5);
  border-top: var(--rule-w-1) solid var(--rule-soft);
}

.wwsu-nowplaying-panel__history {
  padding-top: var(--space-5);
  border-top: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-nowplaying-panel__history h3 {
  margin-bottom: var(--space-3);
}

.wwsu-filterbar {
  display: grid;
  grid-template-columns: minmax(160px, 1fr) minmax(260px, 3fr) auto;
  gap: var(--space-3);
  align-items: end;
  margin: 0 0 var(--space-8);
  padding: var(--space-5);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  background: var(--wwsu-paper);
}

.wwsu-filterbar label {
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 900;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.wwsu-filterbar .form-control {
  border: var(--rule-w-2) solid var(--wwsu-ink);
  border-radius: 0;
  box-shadow: none;
}

.wwsu-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-8);
}

.wwsu-blog-card {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  color: var(--wwsu-ink);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  background: var(--wwsu-paper);
  text-decoration: none;
}

.wwsu-blog-card:hover,
.wwsu-blog-card:focus {
  color: var(--wwsu-ink);
  text-decoration: none;
  outline: var(--rule-w-2) solid var(--wwsu-green);
  outline-offset: var(--space-1);
}

.wwsu-blog-card__media {
  height: 190px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--wwsu-green-deep);
  color: var(--fg-on-dark);
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
}

.wwsu-blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.wwsu-blog-card__media i {
  font-size: var(--fs-48);
}

.wwsu-blog-card__body {
  padding: var(--space-6);
}

.wwsu-blog-article {
  background: var(--wwsu-cream);
}

.wwsu-blog-article__header {
  display: grid;
  gap: var(--space-4);
  margin-bottom: var(--space-8);
}

.wwsu-blog-article__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(var(--fs-38), 7vw, var(--fs-64));
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.wwsu-blog-article__byline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  color: var(--fg-muted);
  text-transform: uppercase;
}

.wwsu-blog-article__avatar {
  width: 36px;
  height: 36px;
  border: var(--rule-w-2) solid var(--wwsu-ink);
  border-radius: 50%;
  object-fit: cover;
}

.wwsu-blog-article__tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

.wwsu-tag {
  display: inline-flex;
  align-items: center;
  border: var(--rule-w-2) solid var(--wwsu-ink);
  border-radius: var(--radius-pill);
  padding: var(--space-1) var(--space-3);
  background: transparent;
  color: var(--wwsu-ink);
  font-family: var(--font-display);
  font-size: var(--fs-12);
  font-weight: 800;
  letter-spacing: var(--track-marquee);
  line-height: 1.4;
  text-transform: uppercase;
  cursor: pointer;
}

.wwsu-tag:hover,
.wwsu-tag:focus {
  background: var(--wwsu-ink);
  color: var(--fg-on-dark);
}

.wwsu-blog-article__image {
  display: block;
  width: 100%;
  max-height: 56vh;
  margin: 0 0 var(--space-10);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  object-fit: cover;
}

.wwsu-blog-article__content {
  font-size: var(--fs-18);
  line-height: var(--leading-body);
  color: var(--wwsu-ink);
}

.wwsu-blog-article__content h2,
.wwsu-blog-article__content h3,
.wwsu-blog-article__content h4 {
  margin-top: var(--space-10);
}

.wwsu-blog-article__content p,
.wwsu-blog-article__content ul,
.wwsu-blog-article__content ol,
.wwsu-blog-article__content blockquote {
  margin-bottom: var(--space-5);
}

.wwsu-author-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  margin-top: var(--space-12);
  padding: var(--space-6);
  border: var(--rule-w-2) solid var(--wwsu-ink);
  background: var(--wwsu-paper);
}

.wwsu-author-card__avatar {
  width: 104px;
  height: 104px;
  border: var(--rule-w-2) solid var(--wwsu-ink);
  object-fit: cover;
}

.wwsu-author-card__name {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-24);
  font-weight: 900;
  text-transform: uppercase;
}

.wwsu-author-card__meta,
.wwsu-author-card__profile {
  margin: var(--space-2) 0 0;
  color: var(--fg-muted);
}

.wwsu-website #section-chat main,
.wwsu-website #section-call main,
.wwsu-website #section-notifications main {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--space-16) var(--space-8);
}

.wwsu-website #section-chat .container-fluid,
.wwsu-website #section-call .container {
  max-width: none;
  padding: 0;
}

.wwsu-website #section-chat .row,
.wwsu-website #section-call .row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-8);
  margin: 0;
}

.wwsu-website #section-chat [class*="col-"],
.wwsu-website #section-call [class*="col-"] {
  max-width: none;
  padding: 0;
}

.wwsu-website #section-chat .card,
.wwsu-website #section-call .card,
.wwsu-website #section-notifications .card,
.wwsu-website #section-request .card {
  border: var(--rule-w-2) solid var(--wwsu-ink);
  border-radius: 0;
  box-shadow: none;
  background: var(--wwsu-paper);
}

.wwsu-website #section-chat .card-header,
.wwsu-website #section-call .card-header,
.wwsu-website #section-notifications .card-header,
.wwsu-website #section-request .card-header {
  border-bottom: var(--rule-w-2) solid var(--wwsu-ink);
  background: transparent;
  font-family: var(--font-display);
  font-weight: 900;
  letter-spacing: var(--track-marquee);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.wwsu-website #section-chat .chat-messages {
  border: var(--rule-w-2) solid var(--wwsu-ink);
  border-radius: 0;
  background: var(--wwsu-cream) !important;
}

.wwsu-website #section-notifications > header {
  display: none;
}

.wwsu-website #section-notifications main::before {
  content: "Manage Notifications";
  display: block;
  margin-bottom: var(--space-6);
  font-family: var(--font-display);
  font-size: clamp(var(--fs-30), 4vw, var(--fs-48));
  font-weight: 900;
  letter-spacing: var(--track-tight);
  line-height: var(--leading-tight);
  text-transform: uppercase;
  color: var(--wwsu-ink);
}

.floating-buttons .btn-wwsu {
  min-width: 44px;
  padding: var(--space-3);
}

.wwsu-backtop {
  position: fixed;
  left: clamp(var(--space-4), 3vw, var(--space-6));
  bottom: calc(var(--space-5) + env(safe-area-inset-bottom, 0px));
  z-index: 1033;
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: var(--rule-w-2) solid var(--wwsu-ink);
  border-radius: var(--radius-pill);
  background: var(--wwsu-green);
  color: var(--wwsu-ink);
  box-shadow: 0 12px 30px rgba(8, 17, 23, 0.24);
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--space-3)) scale(0.94);
  transition:
    opacity var(--dur-2) var(--ease-broadcast),
    transform var(--dur-2) var(--ease-broadcast),
    background-color var(--dur-2) var(--ease-broadcast),
    color var(--dur-2) var(--ease-broadcast);
}

.wwsu-backtop::before,
.wwsu-backtop::after {
  content: "";
  position: absolute;
  display: block;
  background: currentColor;
}

.wwsu-backtop::before {
  width: 15px;
  height: 15px;
  border-top: 3px solid currentColor;
  border-left: 3px solid currentColor;
  background: transparent;
  transform: translateY(2px) rotate(45deg);
}

.wwsu-backtop::after {
  width: 3px;
  height: 21px;
  border-radius: var(--radius-pill);
  transform: translateY(7px);
}

.wwsu-backtop.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.wwsu-backtop:hover {
  background: var(--wwsu-ink);
  color: var(--wwsu-green-glow);
  transform: translateY(calc(var(--space-1) * -1)) scale(1);
}

.wwsu-backtop:focus-visible {
  outline: 3px solid var(--wwsu-green-glow);
  outline-offset: 4px;
}

.wwsu-nav__link.is-active,
.wwsu-nav__mobile-link.is-active {
  color: var(--wwsu-green-glow);
}

@media (max-width: 1024px) {
  .wwsu-nav__inner {
    display: none;
  }

  .wwsu-nav__mobile-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 60px;
    padding: 0 var(--space-5);
  }

  .wwsu-nav__mobile-menu {
    list-style: none;
    margin: 0;
    padding: var(--space-3) var(--space-5) var(--space-5);
    background: var(--wwsu-cream);
    border-top: var(--rule-w-2) solid var(--wwsu-ink);
  }

  .wwsu-nav__mobile-menu.is-open {
    display: grid;
    gap: var(--space-1);
  }

  .wwsu-nav__mobile-link {
    display: block;
    padding: var(--space-3) 0;
    color: var(--wwsu-ink);
  }

  .wwsu-nav__mobile-link:hover,
  .wwsu-nav__mobile-link.is-active {
    color: var(--wwsu-green-deep);
  }

  .wwsu-home-redesign .wwsu-hero {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .wwsu-hero__artwork {
    width: min(360px, 86vw);
  }

  .wwsu-connect,
  .wwsu-person-grid,
  .wwsu-list-grid,
  .wwsu-blog-grid {
    grid-template-columns: 1fr;
  }

  .wwsu-filterbar {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .wwsu-container,
  .wwsu-container--narrow,
  .wwsu-announcements {
    padding-right: var(--space-4);
    padding-left: var(--space-4);
  }

  .wwsu-section__title {
    font-size: clamp(var(--fs-24), 7vw, var(--fs-38));
    overflow-wrap: anywhere;
  }

  .wwsu-section__head > * {
    min-width: 0;
    max-width: 100%;
  }

  .wwsu-section p {
    overflow-wrap: break-word;
  }

  .wwsu-container--narrow > p,
  .wwsu-prose p {
    font-size: var(--fs-16);
  }

  .wwsu-home-about .wwsu-section__title em {
    display: block;
  }

  .wwsu-home-about > p {
    max-width: 18.5rem;
    margin-right: auto;
    margin-left: auto;
  }

  .wwsu-website .content > section[aria-label="Warnings"] {
    left: var(--space-3);
    right: var(--space-3);
    top: calc(64px + 60px + var(--space-3));
  }

  .wwsu-nowplaying-bar {
    gap: 12px;
    min-height: 64px;
    padding: 8px 76px 8px 16px;
  }

  .wwsu-nowplaying-bar__controls {
    right: 16px;
  }

  .wwsu-nowplaying-bar__art {
    width: 48px;
    height: 48px;
    flex-basis: 48px;
  }

  .wwsu-nowplaying-bar__play {
    width: 48px;
    height: 48px;
  }

  .wwsu-nowplaying-bar__artist {
    display: none;
  }

  .wwsu-header {
    top: 64px;
  }

  .wwsu-home-redesign .wwsu-hero {
    padding: var(--space-24) var(--space-6) var(--space-12);
  }

  .wwsu-home-redesign .wwsu-hero__title {
    font-size: clamp(var(--fs-30), 10vw, var(--fs-38));
  }

  .wwsu-home-redesign .wwsu-hero__sub {
    max-width: 18rem;
  }

  .floating-buttons .nav-item-eas-alert {
    padding: 0;
  }

  .floating-buttons .nav-item-eas-alert::after {
    display: none;
  }

  .wwsu-website .content > section[aria-label="Warnings"] .alert {
    overflow-wrap: anywhere;
  }

  .wwsu-hero__diag {
    display: none;
  }

  .wwsu-hero__artwork {
    display: none;
  }

  .wwsu-person-card,
  .wwsu-list-card,
  .wwsu-author-card {
    grid-template-columns: 1fr;
  }

  .wwsu-person-card__media,
  .wwsu-list-card__media {
    width: min(220px, 100%);
  }

  .wwsu-sch__row,
  .wwsu-sch__row--actions {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }

  .wwsu-sch__actions {
    justify-content: flex-start;
  }

  .wwsu-nowplaying-panel__main {
    grid-template-columns: 1fr;
  }

  .wwsu-nowplaying-panel__art {
    min-height: 140px;
  }

  .wwsu-website #section-chat .row,
  .wwsu-website #section-call .row {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   MOBILE HARDENING
   Prevent horizontal scroll and protect the now-playing bar
   from collisions with the position: fixed Listen Live button
   on narrow viewports. Also clamps oversized headlines so they
   never blow out the layout.
   ============================================================ */

html:has(body.wwsu-website),
.wwsu-website {
  overflow-x: clip;
  max-width: 100vw;
}

@media (max-width: 700px) {
  .wwsu-nowplaying-bar__title {
    font-size: var(--fs-16);
  }
  .wwsu-nowplaying-bar__meta {
    padding-right: var(--space-2);
  }
}

@media (max-width: 420px) {
  .wwsu-nowplaying-bar {
    gap: 8px;
    padding: 6px 64px 6px 12px;
    min-height: 60px;
  }
  .wwsu-nowplaying-bar__art {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
  .wwsu-nowplaying-bar__label {
    font-size: var(--fs-10, 10px);
  }
  .wwsu-nowplaying-bar__title {
    font-size: var(--fs-14);
  }
  .wwsu-nowplaying-bar__controls {
    right: 12px;
  }
  .wwsu-nowplaying-bar__play {
    width: 44px;
    height: 44px;
  }
  .wwsu-header {
    top: 60px;
  }
}

/* ============================================================
   LAYOUT UTILITIES — replace inline style="" attributes
   Token-driven; no hardcoded color/font/spacing literals.
   ============================================================ */

.wwsu-brand-image--soft { opacity: 0.85; }

.wwsu-section-spacer { padding-top: var(--space-12); }
.wwsu-section-spacer--sm { padding-top: var(--space-6); }
.wwsu-card-pad-top { padding-top: var(--space-10); }

.wwsu-icon-hero {
  display: inline-block;
  font-size: var(--fs-120);
  line-height: 1;
  color: var(--wwsu-green-deep);
}

.wwsu-text-indent { padding-inline-start: var(--space-4); }

.wwsu-img-fluid {
  display: block;
  width: 100%;
  height: auto;
}

.wwsu-img-block-center {
  display: block;
  margin-inline: auto;
}

.wwsu-hero-vh-pad { padding-top: 10vh; }

.wwsu-hero-logo-frame {
  display: block;
  margin-inline: auto;
  padding-top: 5vh;
  padding-bottom: 10vh;
  height: min(60vh, 100vw);
  width: auto;
}

/* ============================================================
   WWSU CALLOUT — first-party note panel
   Replaces AdminLTE .callout / .callout-info / .callout-success /
   .callout-warning / .callout-danger with token-driven semantics.
   ============================================================ */

.wwsu-callout {
  position: relative;
  padding: var(--space-4) var(--space-5);
  margin: 0 0 var(--space-5);
  background: var(--wwsu-paper);
  border: var(--rule-w-1) solid var(--rule-soft);
  border-left: var(--rule-w-4) solid var(--wwsu-ink);
  border-radius: var(--radius-2);
  color: var(--fg);
}

.wwsu-callout > *:last-child { margin-bottom: 0; }

.wwsu-callout__title {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-14);
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  color: var(--wwsu-ink);
}

.wwsu-callout--info    { border-left-color: var(--wwsu-ink); }
.wwsu-callout--success { border-left-color: var(--wwsu-green); }
.wwsu-callout--warning { border-left-color: var(--signal-amber); }
.wwsu-callout--danger  { border-left-color: var(--signal-red); }

/* ============================================================
   WWSU INFO CARD — first-party header / body / footer panel
   Replaces AdminLTE .card pattern (with .card-header, .card-body,
   .card-footer, .card-title, .card-outline, ribbon-wrapper) for
   data-dense panels (chat, notifications, request, membership).
   ============================================================ */

.wwsu-info-card {
  position: relative;
  background: var(--wwsu-paper);
  border: var(--rule-w-1) solid var(--rule-soft);
  border-radius: var(--radius-2);
  margin-bottom: var(--space-6);
  overflow: hidden;
}

.wwsu-info-card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--wwsu-green);
  pointer-events: none;
}

.wwsu-info-card--accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--wwsu-green);
  pointer-events: none;
}

.wwsu-info-card__header {
  padding: var(--space-4) var(--space-6);
  border-bottom: var(--rule-w-1) solid var(--rule-soft);
  background: transparent;
}

.wwsu-info-card__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-18);
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  color: var(--wwsu-ink);
}

.wwsu-info-card__body {
  padding: var(--space-6);
  color: var(--fg);
}

.wwsu-info-card__body > *:last-child { margin-bottom: 0; }

.wwsu-info-card__media {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.wwsu-info-card__header.wwsu-info-card__media {
  margin-bottom: 0;
}

.wwsu-info-card__media i.fas,
.wwsu-info-card__media i.far,
.wwsu-info-card__media i.fab,
.wwsu-info-card__media i.fa-solid,
.wwsu-info-card__media i.fa-regular,
.wwsu-info-card__media i.fa-brands {
  font-size: var(--fs-88);
  color: var(--wwsu-green-deep);
  line-height: 1;
}

.wwsu-info-card__footer {
  padding: var(--space-4) var(--space-6);
  border-top: var(--rule-w-1) solid var(--rule-soft);
  background: var(--wwsu-cream-2);
  font-size: var(--fs-14);
  color: var(--fg-muted);
}

.wwsu-info-card__footer > *:last-child { margin-bottom: 0; }

.wwsu-info-card__ribbon {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-3);
  background: var(--wwsu-green);
  color: var(--fg-on-dark);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-12);
  text-transform: uppercase;
  letter-spacing: var(--track-marquee);
  border-radius: var(--radius-2);
  z-index: 1;
}

.wwsu-info-card__ribbon--gold { background: var(--wsu-gold); color: var(--wwsu-ink); }
.wwsu-info-card__ribbon--ink  { background: var(--wwsu-ink); color: var(--fg-on-dark); }
.wwsu-info-card__ribbon--alt  { background: var(--wwsu-green-deep); color: var(--fg-on-dark); }

.wwsu-info-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-6);
  margin: var(--space-6) 0;
}

/* ============================================================
   AMPLITUDE PLAYER — inline style extraction
   ============================================================ */

.amplitude-play-pause {
  cursor: pointer;
}

.amplitude-play-pause > .fas {
  pointer-events: none;
}

.amplitude-play-pause.amplitude-playing > .fa-play::before {
  content: "\f04c";
}

div.bottom-container {
  background-color: var(--wwsu-green);
  border-radius: var(--radius-2);
}

div#single-song-player {
  border-radius: var(--radius-2);
  margin: auto;
  box-shadow: var(--shadow-card);
  width: 100%;
  height: 65px;
  -webkit-font-smoothing: antialiased;
}