Upstage Solar Pro 4 – Arts and Entertainment

via Upstage · Generated

  • AIMAC Debt 5.78
  • Cost $0.003
  • Total Violations 53
  • HTML Size 88 KB
  • Em Dashes 36

Screenshot

View Upstage Solar Pro 4 Arts and Entertainment page View Live Page

Accessibility Issues Found

53 Serious

  • color-contrast serious 53 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="article-read-time">10 min read</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>The Luminary Stage | Arts & Entertainment Hub</title>
  <meta name="description" content="Your premier destination for music, visual arts, performing arts, and entertainment industry news. Discover emerging talent, retrospectives, and creative insights.">
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
  <style>
    :root {
      --color-bg: #0f0f14;
      --color-surface: #1a1a22;
      --color-surface-hover: #24242f;
      --color-primary: #c9a96e;
      --color-primary-light: #e8d5a3;
      --color-primary-dark: #a07d45;
      --color-text: #e8e6e3;
      --color-text-muted: #9a9792;
      --color-text-dim: #5c5957;
      --color-accent: #e63946;
      --color-accent-hover: #ff4d5a;
      --color-border: #2a2a35;
      --color-gallery: #2d2a24;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
      --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
      --radius-sm: 6px;
      --radius-md: 12px;
      --radius-lg: 20px;
      --radius-full: 9999px;
      --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
      --shadow-md: 0 4px 16px rgba(0,0,0,0.4);
      --shadow-lg: 0 12px 40px rgba(0,0,0,0.5);
      --shadow-glow: 0 0 30px rgba(201,169,110,0.15);
      --transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
      --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    }

    *,
    *::before,
    *::after {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      scroll-behavior: smooth;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }

    body {
      font-family: var(--font-sans);
      background: var(--color-bg);
      color: var(--color-text);
      line-height: 1.7;
      font-size: 16px;
      overflow-x: hidden;
    }

    a {
      color: inherit;
      text-decoration: none;
    }

    img {
      max-width: 100%;
      display: block;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 0 28px;
    }

    .container--narrow {
      max-width: 900px;
      margin: 0 auto;
      padding: 0 28px;
    }

    .container--wide {
      max-width: 1440px;
      margin: 0 auto;
      padding: 0 28px;
    }

    /* ========== ANNOUNCEMENT BAR ========== */
    .announcement-bar {
      background: var(--color-primary);
      color: #0f0f14;
      text-align: center;
      padding: 10px 20px;
      font-size: 0.85rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
    }

    .announcement-bar span {
      color: rgba(15,15,20,0.7);
      font-weight: 400;
    }

    /* ========== HEADER / NAV ========== */
    .site-header {
      background: rgba(15,15,20,0.92);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border-bottom: 1px solid var(--color-border);
      position: sticky;
      top: 0;
      z-index: 1000;
      transition: box-shadow 0.3s ease;
    }

    .site-header.scrolled {
      box-shadow: 0 4px 30px rgba(0,0,0,0.4);
    }

    .header-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
      height: 76px;
      max-width: 1440px;
      margin: 0 auto;
    }

    .logo-group {
      display: flex;
      align-items: center;
      gap: 14px;
    }

    .logo-img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      overflow: hidden;
      flex-shrink: 0;
      border: 2px solid var(--color-primary);
      position: relative;
    }

    .logo-img::after {
      content: '';
      position: absolute;
      inset: 0;
      background: var(--color-bg);
      z-index: 0;
    }

    .logo-img img {
      position: relative;
      z-index: 1;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
    }

    .brand-name {
      font-family: var(--font-serif);
      font-size: 1.35rem;
      font-weight: 700;
      color: var(--color-text);
      letter-spacing: -0.3px;
    }

    .brand-name .highlight {
      color: var(--color-primary);
    }

    .brand-tagline-sm {
      font-size: 0.65rem;
      color: var(--color-text-muted);
      letter-spacing: 2px;
      text-transform: uppercase;
      font-weight: 500;
    }

    .nav-desktop {
      display: flex;
      align-items: center;
      gap: 6px;
      list-style: none;
    }

    .nav-link {
      padding: 8px 16px;
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-text-muted);
      border-radius: var(--radius-sm);
      transition: var(--transition);
      position: relative;
      letter-spacing: 0.2px;
    }

    .nav-link:hover {
      color: var(--color-text);
      background: var(--color-surface-hover);
    }

    .nav-link::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 50%;
      transform: translateX(-50%) scaleX(0);
      width: calc(100% - 32px);
      height: 2px;
      background: var(--color-primary);
      border-radius: 2px;
      transition: var(--transition);
    }

    .nav-link:hover::after {
      transform: translateX(-50%) scaleX(1);
    }

    .nav-link.nav-cta {
      color: var(--color-bg);
      background: var(--color-primary);
      font-weight: 600;
      border-radius: var(--radius-full);
      padding: 8px 20px;
    }

    .nav-link.nav-cta::after {
      display: none;
    }

    .nav-link.nav-cta:hover {
      background: var(--color-primary-light);
      color: var(--color-primary-dark);
    }

    .header-cta-group {
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .btn-icon {
      width: 40px;
      height: 40px;
      border-radius: var(--radius-full);
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      color: var(--color-text-muted);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: var(--transition);
      font-size: 1.1rem;
    }

    .btn-icon:hover {
      color: var(--color-text);
      background: var(--color-surface-hover);
      border-color: var(--color-primary);
    }

    .hamburger {
      display: none;
      flex-direction: column;
      gap: 5px;
      cursor: pointer;
      padding: 8px;
      background: none;
      border: none;
    }

    .hamburger span {
      display: block;
      width: 24px;
      height: 2px;
      background: var(--color-text);
      border-radius: 2px;
      transition: var(--transition);
    }

    .hamburger.active span:nth-child(1) {
      transform: rotate(45deg) translate(5px, 5px);
    }

    .hamburger.active span:nth-child(2) {
      opacity: 0;
    }

    .hamburger.active span:nth-child(3) {
      transform: rotate(-45deg) translate(5px, -5px);
    }

    /* ========== MOBILE NAV ========== */
    .mobile-nav {
      display: none;
      position: fixed;
      top: 76px;
      left: 0;
      right: 0;
      bottom: 0;
      background: rgba(15,15,20,0.98);
      backdrop-filter: blur(30px);
      -webkit-backdrop-filter: blur(30px);
      z-index: 999;
      padding: 32px 28px;
      flex-direction: column;
      gap: 8px;
      overflow-y: auto;
    }

    .mobile-nav.open {
      display: flex;
    }

    .mobile-nav .nav-link {
      font-size: 1.2rem;
      padding: 14px 20px;
      border-radius: var(--radius-md);
      width: 100%;
      display: flex;
      align-items: center;
      gap: 14px;
      font-weight: 500;
    }

    .mobile-nav .nav-link .nav-icon {
      width: 24px;
      text-align: center;
      color: var(--color-primary);
    }

    .mobile-nav .nav-link.nav-cta {
      margin-top: 12px;
      text-align: center;
      justify-content: center;
    }

    /* ========== HERO SECTION ========== */
    .hero {
      position: relative;
      min-height: 680px;
      display: flex;
      align-items: center;
      overflow: hidden;
      padding: 80px 0 60px;
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      opacity: 0.25;
      z-index: 0;
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, var(--color-bg) 0%, rgba(15,15,20,0.7) 50%, var(--color-bg) 100%);
    }

    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      position: relative;
      z-index: 1;
    }

    .hero-content {
      max-width: 580px;
    }

    .hero-badge {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: rgba(201,169,110,0.12);
      border: 1px solid rgba(201,169,110,0.25);
      padding: 6px 16px 6px 10px;
      border-radius: var(--radius-full);
      font-size: 0.8rem;
      font-weight: 500;
      color: var(--color-primary-light);
      margin-bottom: 24px;
      letter-spacing: 0.3px;
    }

    .hero-badge .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--color-primary);
      animation: pulse-dot 2s ease-in-out infinite;
    }

    @keyframes pulse-dot {
      0%, 100% { opacity: 1; transform: scale(1); }
      50% { opacity: 0.5; transform: scale(1.3); }
    }

    .hero-title {
      font-family: var(--font-serif);
      font-size: clamp(2.6rem, 5vw, 4rem);
      font-weight: 700;
      line-height: 1.1;
      color: var(--color-text);
      margin-bottom: 20px;
      letter-spacing: -0.5px;
    }

    .hero-title .italic {
      font-style: italic;
      color: var(--color-primary);
    }

    .hero-desc {
      font-size: 1.1rem;
      color: var(--color-text-muted);
      line-height: 1.8;
      margin-bottom: 36px;
      max-width: 520px;
    }

    .hero-cta-group {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      padding: 14px 30px;
      border-radius: var(--radius-full);
      font-family: var(--font-sans);
      font-size: 0.95rem;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      border: none;
      letter-spacing: 0.2px;
    }

    .btn-primary {
      background: var(--color-primary);
      color: var(--color-bg);
    }

    .btn-primary:hover {
      background: var(--color-primary-light);
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(201,169,110,0.3);
    }

    .btn-secondary {
      background: transparent;
      color: var(--color-text);
      border: 1px solid var(--color-border);
    }

    .btn-secondary:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: translateY(-2px);
    }

    .btn-ghost {
      background: transparent;
      color: var(--color-text-muted);
      border: 1px solid transparent;
      padding: 14px 20px;
    }

    .btn-ghost:hover {
      color: var(--color-text);
      background: var(--color-surface-hover);
    }

    .hero-visual {
      position: relative;
    }

    .hero-image-main {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-lg);
      position: relative;
      aspect-ratio: 4 / 5;
      background: var(--color-gallery);
    }

    .hero-image-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .hero-image-main:hover img {
      transform: scale(1.04);
    }

    .hero-image-float {
      position: absolute;
      bottom: -24px;
      right: -24px;
      width: 180px;
      height: 180px;
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 16px 48px rgba(0,0,0,0.6);
      border: 3px solid var(--color-primary);
      z-index: 2;
      background: var(--color-gallery);
    }

    .hero-image-float img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .hero-stats {
      position: absolute;
      bottom: 32px;
      left: -20px;
      display: flex;
      gap: 32px;
      background: rgba(26,26,34,0.9);
      backdrop-filter: blur(12px);
      border: 1px solid var(--color-border);
      padding: 16px 24px;
      border-radius: var(--radius-md);
      z-index: 2;
    }

    .hero-stat {
      text-align: center;
    }

    .hero-stat-num {
      font-size: 1.4rem;
      font-weight: 700;
      color: var(--color-primary);
      line-height: 1.2;
    }

    .hero-stat-label {
      font-size: 0.7rem;
      color: var(--color-text-muted);
      text-transform: uppercase;
      letter-spacing: 1px;
      font-weight: 500;
    }

    /* ========== SECTION COMMON ========== */
    .section {
      padding: 80px 0;
    }

    .section-header {
      margin-bottom: 48px;
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--color-primary);
      margin-bottom: 12px;
    }

    .section-label::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--color-primary);
    }

    .section-title {
      font-family: var(--font-serif);
      font-size: clamp(1.8rem, 3vw, 2.5rem);
      font-weight: 700;
      color: var(--color-text);
      line-height: 1.2;
      margin-bottom: 14px;
    }

    .section-desc {
      font-size: 1.05rem;
      color: var(--color-text-muted);
      max-width: 680px;
      line-height: 1.8;
    }

    /* ========== TRENDING / SIDEBAR LAYOUT ========== */
    .content-with-sidebar {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 48px;
    }

    .main-column {
      min-width: 0;
    }

    .sidebar {
      position: sticky;
      top: 96px;
      align-self: start;
    }

    /* ========== ARTICLES / CARDS ========== */
    .article-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 28px;
      margin-bottom: 24px;
      transition: var(--transition);
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }

    .article-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 4px;
      height: 0;
      background: var(--color-primary);
      transition: var(--transition);
    }

    .article-card:hover {
      border-color: rgba(201,169,110,0.3);
      transform: translateY(-2px);
      box-shadow: var(--shadow-md);
    }

    .article-card:hover::before {
      height: 100%;
    }

    .article-card.premium::before {
      background: var(--color-accent);
    }

    .article-card.premium::after {
      content: 'Featured';
      position: absolute;
      top: 16px;
      right: 16px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--color-accent);
      background: rgba(230,57,70,0.1);
      padding: 4px 10px;
      border-radius: var(--radius-full);
      border: 1px solid rgba(230,57,70,0.2);
    }

    .article-card.is-new::before {
      background: #48bfe3;
    }

    .article-card.is-new::after {
      content: 'New';
      position: absolute;
      top: 16px;
      right: 16px;
      font-size: 0.65rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #48bfe3;
      background: rgba(72,191,227,0.1);
      padding: 4px 10px;
      border-radius: var(--radius-full);
      border: 1px solid rgba(72,191,227,0.2);
    }

    .article-meta {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: 0.78rem;
      color: var(--color-text-dim);
      margin-bottom: 12px;
      font-weight: 500;
    }

    .article-meta .category-tag {
      color: var(--color-primary);
      background: rgba(201,169,110,0.1);
      padding: 2px 10px;
      border-radius: var(--radius-full);
      font-size: 0.7rem;
      letter-spacing: 0.5px;
    }

    .article-title {
      font-family: var(--font-serif);
      font-size: 1.25rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 10px;
      line-height: 1.3;
      transition: color 0.3s;
    }

    .article-card:hover .article-title {
      color: var(--color-primary-light);
    }

    .article-excerpt {
      font-size: 0.92rem;
      color: var(--color-text-muted);
      line-height: 1.7;
      margin-bottom: 16px;
    }

    .article-footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 14px;
      border-top: 1px solid var(--color-border);
    }

    .article-author {
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .author-avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--color-surface-hover);
    }

    .author-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .author-name {
      font-size: 0.82rem;
      font-weight: 500;
      color: var(--color-text-muted);
    }

    .article-read-time {
      font-size: 0.75rem;
      color: var(--color-text-dim);
    }

    /* ========== FEATURED / GALLERY GRID ========== */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 20px;
    }

    .gallery-item {
      border-radius: var(--radius-md);
      overflow: hidden;
      position: relative;
      aspect-ratio: 4 / 3;
      background: var(--color-gallery);
      cursor: pointer;
      transition: var(--transition);
    }

    .gallery-item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s ease;
    }

    .gallery-item:hover img {
      transform: scale(1.08);
    }

    .gallery-item.featured {
      grid-column: span 2;
      grid-row: span 2;
      aspect-ratio: auto;
    }

    .gallery-overlay {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      padding: 20px;
      background: linear-gradient(transparent, rgba(15,15,20,0.95));
      opacity: 0;
      transition: var(--transition);
    }

    .gallery-item:hover .gallery-overlay {
      opacity: 1;
    }

    .gallery-overlay h4 {
      font-family: var(--font-serif);
      font-size: 1.1rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 4px;
    }

    .gallery-overlay p {
      font-size: 0.82rem;
      color: var(--color-text-muted);
    }

    /* ========== TRENDING SIDEBAR ========== */
    .sidebar-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 24px;
      margin-bottom: 20px;
    }

    .sidebar-card-title {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--color-primary);
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--color-border);
    }

    .trending-item {
      display: flex;
      gap: 14px;
      padding: 12px 0;
      border-bottom: 1px solid var(--color-border);
      cursor: pointer;
      transition: var(--transition);
    }

    .trending-item:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }

    .trending-item:hover {
      padding-left: 6px;
    }

    .trending-rank {
      font-family: var(--font-serif);
      font-size: 1.3rem;
      font-weight: 700;
      color: var(--color-text-dim);
      line-height: 1.2;
      min-width: 28px;
    }

    .trending-info {
      flex: 1;
      min-width: 0;
    }

    .trending-title {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 2px;
      line-height: 1.3;
      transition: color 0.3s;
    }

    .trending-item:hover .trending-title {
      color: var(--color-primary-light);
    }

    .trending-sub {
      font-size: 0.75rem;
      color: var(--color-text-dim);
    }

    .trending-count {
      font-size: 0.75rem;
      color: var(--color-text-muted);
      font-weight: 500;
    }

    /* ========== SHOWS SUBSECTION ========== */
    .shows-list {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 16px;
    }

    .show-item {
      display: flex;
      align-items: center;
      gap: 16px;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 14px 16px;
      cursor: pointer;
      transition: var(--transition);
    }

    .show-item:hover {
      border-color: rgba(201,169,110,0.25);
      background: var(--color-surface-hover);
    }

    .show-date {
      text-align: center;
      min-width: 48px;
      border-right: 1px solid var(--color-border);
      padding-right: 16px;
    }

    .show-date-day {
      font-size: 1.2rem;
      font-weight: 700;
      color: var(--color-primary);
      line-height: 1.2;
    }

    .show-date-month {
      font-size: 0.65rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--color-text-dim);
      font-weight: 500;
    }

    .show-info {
      flex: 1;
      min-width: 0;
    }

    .show-info h5 {
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 2px;
    }

    .show-info p {
      font-size: 0.78rem;
      color: var(--color-text-muted);
    }

    .show-ticket-btn {
      font-size: 0.75rem;
      font-weight: 600;
      color: var(--color-primary);
      padding: 6px 14px;
      border: 1px solid var(--color-primary);
      border-radius: var(--radius-full);
      transition: var(--transition);
      white-space: nowrap;
      background: transparent;
      cursor: pointer;
      font-family: var(--font-sans);
    }

    .show-ticket-btn:hover {
      background: var(--color-primary);
      color: var(--color-bg);
    }

    /* ========== INTERACTIVE CALENDAR ========== */
    .calendar-section {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: 40px;
      margin-top: 48px;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 32px;
      align-items: start;
    }

    .calendar-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 20px;
    }

    .calendar-header h3 {
      font-family: var(--font-serif);
      font-size: 1.2rem;
      font-weight: 700;
    }

    .calendar-nav {
      display: flex;
      gap: 6px;
    }

    .calendar-nav button {
      width: 36px;
      height: 36px;
      border-radius: var(--radius-sm);
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      color: var(--color-text-muted);
      cursor: pointer;
      font-size: 1rem;
      transition: var(--transition);
      display: flex;
      align-items: center;
      justify-content: center;
      font-family: var(--font-sans);
    }

    .calendar-nav button:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
    }

    .calendar-grid-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 4px;
    }

    .calendar-day-label {
      font-size: 0.7rem;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: var(--color-text-dim);
      text-align: center;
      padding: 8px 0;
      font-weight: 600;
    }

    .calendar-day {
      aspect-ratio: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      font-size: 0.85rem;
      font-weight: 500;
      color: var(--color-text-muted);
      background: transparent;
      cursor: pointer;
      transition: var(--transition);
      border: 1px solid transparent;
      position: relative;
    }

    .calendar-day:hover {
      background: var(--color-surface-hover);
      color: var(--color-text);
    }

    .calendar-day.today {
      background: var(--color-primary);
      color: var(--color-bg);
      font-weight: 700;
    }

    .calendar-day.event {
      border-color: var(--color-primary);
      color: var(--color-primary-light);
    }

    .calendar-day.event::after {
      content: '';
      position: absolute;
      bottom: 4px;
      width: 4px;
      height: 4px;
      border-radius: 50%;
      background: var(--color-primary);
    }

    .calendar-day.event.today::after {
      background: var(--color-bg);
    }

    .calendar-day.empty {
      cursor: default;
    }

    .calendar-day.other-month {
      color: var(--color-text-dim);
      opacity: 0.3;
    }

    .calendar-events {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .calendar-event {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      padding: 12px 14px;
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      transition: var(--transition);
      cursor: pointer;
    }

    .calendar-event:hover {
      border-color: rgba(201,169,110,0.3);
    }

    .calendar-event-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: var(--color-primary);
      margin-top: 6px;
      flex-shrink: 0;
    }

    .calendar-event-dot.music { background: #48bfe3; }
    .calendar-event-dot.visual { background: var(--color-accent); }
    .calendar-event-dot.theatre { background: var(--color-primary); }
    .calendar-event-dot.film { background: #a8e6cf; }

    .calendar-event-info h5 {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--color-text);
      margin-bottom: 2px;
    }

    .calendar-event-info p {
      font-size: 0.78rem;
      color: var(--color-text-muted);
    }

    .calendar-event-info .event-meta {
      display: flex;
      gap: 12px;
      margin-top: 4px;
      font-size: 0.7rem;
      color: var(--color-text-dim);
      text-transform: uppercase;
      letter-spacing: 0.5px;
    }

    .calendar-picker {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .form-select, .form-input {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sm);
      padding: 10px 14px;
      color: var(--color-text);
      font-family: var(--font-sans);
      font-size: 0.88rem;
      outline: none;
      transition: var(--transition);
      cursor: pointer;
    }

    .form-select:focus, .form-input:focus {
      border-color: var(--color-primary);
    }

    .form-select option {
      background: var(--color-surface);
      color: var(--color-text);
    }

    /* ========== FEATURE GRID (3 columns) ========== */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .feature-card {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 32px 28px;
      transition: var(--transition);
      position: relative;
      overflow: hidden;
    }

    .feature-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 3px;
      background: var(--color-primary);
      transform: scaleX(0);
      transform-origin: left;
      transition: var(--transition);
    }

    .feature-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-lg);
      border-color: rgba(201,169,110,0.2);
    }

    .feature-card:hover::before {
      transform: scaleX(1);
    }

    .feature-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      background: rgba(201,169,110,0.1);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.4rem;
      margin-bottom: 18px;
      color: var(--color-primary);
      transition: var(--transition);
    }

    .feature-card:hover .feature-icon {
      background: rgba(201,169,110,0.18);
    }

    .feature-card h3 {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      color: var(--color-text);
      margin-bottom: 10px;
    }

    .feature-card p {
      font-size: 0.9rem;
      color: var(--color-text-muted);
      line-height: 1.7;
    }

    /* ========== TESTIMONIALS ========== */
    .testimonials-section {
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      border-bottom: 1px solid var(--color-border);
    }

    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }

    .testimonial-card {
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-md);
      padding: 32px;
      transition: var(--transition);
    }

    .testimonial-card:hover {
      border-color: rgba(201,169,110,0.2);
    }

    .testimonial-stars {
      color: var(--color-primary);
      font-size: 0.9rem;
      letter-spacing: 2px;
      margin-bottom: 14px;
    }

    .testimonial-text {
      font-size: 0.95rem;
      color: var(--color-text-muted);
      line-height: 1.8;
      margin-bottom: 20px;
      font-style: italic;
    }

    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 12px;
      padding-top: 16px;
      border-top: 1px solid var(--color-border);
    }

    .testimonial-avatar {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
      background: var(--color-surface-hover);
    }

    .testimonial-avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .testimonial-author-info h6 {
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--color-text);
    }

    .testimonial-author-info p {
      font-size: 0.75rem;
      color: var(--color-text-dim);
    }

    /* ========== CTA BANNER ========== */
    .cta-banner {
      background: var(--color-primary);
      border-radius: var(--radius-lg);
      padding: 56px 56px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 40px;
      position: relative;
      overflow: hidden;
    }

    .cta-banner::before {
      content: '';
      position: absolute;
      top: -50%;
      right: -20%;
      width: 400px;
      height: 400px;
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
    }

    .cta-banner::after {
      content: '';
      position: absolute;
      bottom: -30%;
      left: -10%;
      width: 300px;
      height: 300px;
      border-radius: 50%;
      background: rgba(255,255,255,0.04);
    }

    .cta-text {
      position: relative;
      z-index: 1;
    }

    .cta-text h2 {
      font-family: var(--font-serif);
      font-size: clamp(1.6rem, 2.5vw, 2.2rem);
      font-weight: 700;
      color: var(--color-bg);
      margin-bottom: 10px;
      line-height: 1.2;
    }

    .cta-text p {
      color: rgba(15,15,20,0.75);
      font-size: 1rem;
      max-width: 480px;
      line-height: 1.7;
    }

    .cta-btn {
      position: relative;
      z-index: 1;
      background: var(--color-bg);
      color: var(--color-primary);
      padding: 14px 32px;
      border-radius: var(--radius-full);
      font-weight: 700;
      font-size: 0.95rem;
      border: none;
      cursor: pointer;
      transition: var(--transition);
      font-family: var(--font-sans);
      white-space: nowrap;
    }

    .cta-btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 8px 30px rgba(0,0,0,0.3);
      background: #fff;
    }

    /* ========== FAQ ========== */
    .faq-list {
      max-width: 780px;
      margin: 0 auto;
    }

    .faq-item {
      border-bottom: 1px solid var(--color-border);
    }

    .faq-item:last-child {
      border-bottom: none;
    }

    .faq-question {
      width: 100%;
      background: none;
      border: none;
      padding: 20px 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: pointer;
      font-family: var(--font-sans);
      font-size: 1rem;
      font-weight: 600;
      color: var(--color-text);
      text-align: left;
      transition: color 0.3s;
    }

    .faq-question:hover {
      color: var(--color-primary-light);
    }

    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--color-surface);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.2rem;
      color: var(--color-text-muted);
      transition: var(--transition);
      flex-shrink: 0;
      margin-left: 16px;
      font-family: var(--font-sans);
    }

    .faq-item.active .faq-icon {
      background: var(--color-primary);
      color: var(--color-bg);
      transform: rotate(45deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
      padding: 0 0 0 0;
      color: var(--color-text-muted);
      font-size: 0.95rem;
      line-height: 1.8;
    }

    .faq-item.active .faq-answer {
      max-height: 300px;
      padding: 0 0 24px;
    }

    /* ========== NEWSLETTER ========== */
    .newsletter {
      background: var(--color-surface);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-lg);
      padding: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      margin-top: 48px;
    }

    .newsletter-text h3 {
      font-family: var(--font-serif);
      font-size: 1.4rem;
      font-weight: 700;
      margin-bottom: 6px;
    }

    .newsletter-text p {
      color: var(--color-text-muted);
      font-size: 0.92rem;
    }

    .newsletter-form {
      display: flex;
      gap: 10px;
      flex-shrink: 0;
    }

    .newsletter-form .form-input {
      width: 280px;
      border-radius: var(--radius-full);
      padding: 12px 20px;
    }

    .newsletter-form .btn {
      border-radius: var(--radius-full);
      padding: 12px 28px;
      white-space: nowrap;
    }

    /* ========== FOOTER ========== */
    .site-footer {
      background: var(--color-surface);
      border-top: 1px solid var(--color-border);
      padding: 64px 0 32px;
    }

    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      margin-bottom: 48px;
    }

    .footer-brand .brand-name {
      font-size: 1.5rem;
      margin-bottom: 12px;
      display: block;
    }

    .footer-brand p {
      color: var(--color-text-muted);
      font-size: 0.88rem;
      line-height: 1.7;
      max-width: 300px;
      margin-bottom: 18px;
    }

    .social-links {
      display: flex;
      gap: 10px;
    }

    .social-link {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      background: var(--color-bg);
      border: 1px solid var(--color-border);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--color-text-muted);
      font-size: 0.95rem;
      transition: var(--transition);
      cursor: pointer;
      font-family: var(--font-sans);
    }

    .social-link:hover {
      border-color: var(--color-primary);
      color: var(--color-primary);
      transform: translateY(-2px);
    }

    .footer-col h5 {
      font-size: 0.75rem;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1.5px;
      color: var(--color-primary);
      margin-bottom: 16px;
    }

    .footer-col ul {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }

    .footer-col ul li a {
      font-size: 0.88rem;
      color: var(--color-text-muted);
      transition: var(--transition);
      cursor: pointer;
    }

    .footer-col ul li a:hover {
      color: var(--color-text);
      padding-left: 4px;
    }

    .footer-contact li {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 0.88rem;
      color: var(--color-text-muted);
    }

    .footer-contact li span {
      color: var(--color-primary);
      flex-shrink: 0;
      margin-top: 2px;
    }

    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 24px;
      border-top: 1px solid var(--color-border);
      font-size: 0.82rem;
      color: var(--color-text-dim);
      flex-wrap: wrap;
      gap: 12px;
    }

    .footer-bottom-links {
      display: flex;
      gap: 20px;
    }

    .footer-bottom-links a {
      color: var(--color-text-dim);
      transition: var(--transition);
      cursor: pointer;
      font-size: 0.82rem;
    }

    .footer-bottom-links a:hover {
      color: var(--color-text-muted);
    }

    /* ========== SCROLL TO TOP ========== */
    .scroll-top {
      position: fixed;
      bottom: 28px;
      right: 28px;
      width: 44px;
      height: 44px;
      border-radius: var(--radius-full);
      background: var(--color-primary);
      color: var(--color-bg);
      border: none;
      cursor: pointer;
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      visibility: hidden;
      transform: translateY(16px);
      transition: var(--transition);
      box-shadow: var(--shadow-md);
      z-index: 500;
      font-family: var(--font-sans);
    }

    .scroll-top.visible {
      opacity: 1;
      visibility: visible;
      transform: translateY(0);
    }

    .scroll-top:hover {
      background: var(--color-primary-light);
      transform: translateY(-3px);
    }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 40px;
      }

      .hero-visual {
        order: -1;
        max-width: 480px;
        margin: 0 auto;
      }

      .hero-stats {
        position: static;
        margin-top: 24px;
        justify-content: center;
      }

      .hero-image-float {
        display: none;
      }

      .content-with-sidebar {
        grid-template-columns: 1fr;
      }

      .sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }

      .sidebar-card {
        margin-bottom: 0;
      }

      .feature-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .footer-grid {
        grid-template-columns: 1fr 1fr;
      }

      .calendar-grid {
        grid-template-columns: 1fr;
      }
    }

    @media (max-width: 768px) {
      .nav-desktop {
        display: none;
      }

      .header-cta-group .btn-icon {
        display: none;
      }

      .hamburger {
        display: flex;
      }

      .section {
        padding: 56px 0;
      }

      .container {
        padding: 0 20px;
      }

      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }

      .gallery-item.featured {
        grid-column: span 2;
        grid-row: span 1;
      }

      .feature-grid {
        grid-template-columns: 1fr;
      }

      .testimonials-grid {
        grid-template-columns: 1fr;
      }

      .cta-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 36px 28px;
        text-align: left;
      }

      .newsletter {
        flex-direction: column;
        padding: 32px 24px;
        text-align: center;
      }

      .newsletter-form {
        flex-direction: column;
        width: 100%;
      }

      .newsletter-form .form-input {
        width: 100%;
      }

      .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }

      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }

      .hero-stats {
        flex-direction: column;
        gap: 12px;
        padding: 14px 18px;
        align-items: center;
      }

      .calendar-section {
        padding: 24px;
      }

      .calendar-grid-days {
        gap: 2px;
      }

      .calendar-day {
        font-size: 0.75rem;
      }

      .sidebar {
        grid-template-columns: 1fr;
      }

      .hero-title {
        font-size: 2.2rem;
      }
    }

    @media (max-width: 480px) {
      .gallery-grid {
        grid-template-columns: 1fr;
      }

      .gallery-item.featured {
        grid-column: span 1;
      }

      .hero-cta-group {
        flex-direction: column;
        align-items: flex-start;
      }

      .btn {
        width: 100%;
        justify-content: center;
      }
    }
  </style>
</head>
<body>

  <!-- ====== ANNOUNCEMENT BAR ====== -->
  <div class="announcement-bar">
    Spring Season Now Live — <span>Use code LUMINARY25 for 25% off all season passes</span>
  </div>

  <!-- ====== HEADER ====== -->
  <header class="site-header" id="siteHeader">
    <div class="header-inner">
      <a href="#" class="logo-group" aria-label="The Luminary Stage — Home">
        <div class="logo-img">
          <img src="https://placehold.co/88x88/1a1a22/c9a96e?text=LS&font=playfair+display&bg=1a1a22&fg=c9a96e" alt="Luminary Stage Logo" width="88" height="88">
        </div>
        <div class="brand-text">
          <span class="brand-name">The <span class="highlight">Luminary</span> Stage</span>
          <span class="brand-tagline-sm">Arts &amp; Entertainment Hub</span>
        </div>
      </a>

      <ul class="nav-desktop">
        <li><a href="#" class="nav-link">Home</a></li>
        <li><a href="#" class="nav-link">Tickets</a></li>
        <li><a href="#" class="nav-link">Galleries</a></li>
        <li><a href="#" class="nav-link">Artists</a></li>
        <li><a href="#" class="nav-link">Events</a></li>
        <li><a href="#" class="nav-link">Reviews</a></li>
        <li><a href="#" class="nav-link">About</a></li>
        <li><a href="#" class="nav-link nav-cta">Book Now</a></li>
      </ul>

      <div class="header-cta-group">
        <button class="btn-icon" aria-label="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <button class="btn-icon" aria-label="Open menu" class="hamburger-mobile-trigger">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="3" y1="6" x2="21" y2="6"/><line x1="3" y1="12" x2="21" y2="12"/><line x1="3" y1="18" x2="21" y2="18"/></svg>
        </button>
        <button class="hamburger" id="hamburgerBtn" aria-label="Toggle navigation menu">
          <span></span>
          <span></span>
          <span></span>
        </button>
      </div>
    </div>
  </header>

  <!-- ====== MOBILE NAV ====== -->
  <nav class="mobile-nav" id="mobileNav" aria-label="Mobile navigation">
    <a href="#" class="nav-link"><span class="nav-icon">⌂</span> Home</a>
    <a href="#" class="nav-link"><span class="nav-icon">🎫</span> Tickets</a>
    <a href="#" class="nav-link"><span class="nav-icon">🖼️</span> Galleries</a>
    <a href="#" class="nav-link"><span class="nav-icon">🎭</span> Artists</a>
    <a href="#" class="nav-link"><span class="nav-icon">📅</span> Events</a>
    <a href="#" class="nav-link"><span class="nav-icon">⭐</span> Reviews</a>
    <a href="#" class="nav-link"><span class="nav-icon">ℹ️</span> About</a>
    <a href="#" class="nav-link nav-cta"><span class="nav-icon">✦</span> Book Now</a>
  </nav>

  <!-- ====== HERO ====== -->
  <section class="hero">
    <div class="hero-bg">
      <img src="https://placehold.co/1440x900/0f0f14/c9a96e?text=%%20&font=playfair+display&bg=0f0f14&fg=c9a96e&w=1440&h=900" alt="" width="1440" height="900">
    </div>

    <div class="container--wide" style="position:relative;z-index:1;">
      <div class="hero-grid">
        <div class="hero-content">
          <div class="hero-badge">
            <span class="dot"></span>
            Spring 2026 Season — Now On Sale
          </div>
          <h1 class="hero-title">
            Where Art<br>
            Meets <span class="italic">Performance</span>
          </h1>
          <p class="hero-desc">
            The Luminary Stage is your premier destination for discovering extraordinary music, immersive visual arts, electrifying performances, and the stories behind the creative process. Explore our curated seasons, connect with emerging talent, and be part of the cultural conversation.
          </p>
          <div class="hero-cta-group">
            <a href="#tickets" class="btn btn-primary">
              Explore Season
              <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
            <a href="#artists" class="btn btn-secondary">
              Meet the Artists
            </a>
          </div>
        </div>

        <div class="hero-visual">
          <div class="hero-image-main">
            <img src="https://placehold.co/640x800/1a1a22/c9a96e?text=Performance+Series&font=playfair+display&bg=1a1a22&fg=c9a96e&w=640&h=800" alt="Curated performance series — an ensemble performing on stage" width="640" height="800">
          </div>
          <div class="hero-image-float">
            <img src="https://placehold.co/180x180/2d2a24/c9a96e?text=Visual+Arts&font=playfair+display&bg=2d2a24&fg=c9a96e&w=180&h=180" alt="Visual arts exhibition preview" width="180" height="180">
          </div>
          <div class="hero-stats">
            <div class="hero-stat">
              <div class="hero-stat-num">240+</div>
              <div class="hero-stat-label">Events / Year</div>
            </div>
            <div class="hero-stat">
              <div class="hero-stat-num">1.2M</div>
              <div class="hero-stat-label">Audience</div>
            </div>
            <div class="hero-stat">
              <div class="hero-stat-num">96%</div>
              <div class="hero-stat-label">Satisfaction</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ====== MAIN CONTENT WITH SIDEBAR ====== -->
  <section class="section" id="stories">
    <div class="container--wide">
      <div class="section-header">
        <div class="section-label">Latest Stories</div>
        <h2 class="section-title">Curated insights from the creative world</h2>
        <p class="section-desc">
          Dive into in-depth features on emerging talent, retrospective exhibitions, behind-the-scenes looks at the creative process, and critical perspectives from our team of arts journalists and critics.
        </p>
      </div>

      <div class="content-with-sidebar">
        <!-- ====== MAIN COLUMN ====== -->
        <div class="main-column">

          <!-- Featured Article -->
          <article class="article-card premium">
            <div class="article-meta">
              <span class="category-tag">Performance</span>
              <span class="article-read-time">12 min read</span>
              <span>•</span>
              <span>Mar 14, 2026</span>
            </div>
            <h3 class="article-title">The Ensemble Effect: How Collective Performance Is Redefining Contemporary Theatre</h3>
            <p class="article-excerpt">
              Across the country, a new wave of ensemble-driven theatre companies is challenging the traditional auteur model. From devised work in repurposed warehouses to immersive productions that blur the line between audience and performer, the collaborative impulse is reshaping what performance can be. We spoke with six directors, dramaturgs, and ensemble members to understand the movement — and what it means for the future of live performance.
            </p>
            <div class="article-footer">
              <div class="article-author">
                <div class="author-avatar">
                  <img src="https://placehold.co/64x64/1a1a22/c9a96e?text=MC&font=inter&bg=1a1a22&fg=c9a96e&w=64&h=64" alt="Author avatar" width="64" height="64">
                </div>
                <span class="author-name">Moriah Chen</span>
              </div>
              <a href="#" class="btn btn-ghost" style="font-size:0.82rem;padding:8px 16px;">Read Story →</a>
            </div>
          </article>

          <!-- Article 2 -->
          <article class="article-card is-new">
            <div class="article-meta">
              <span class="category-tag">Visual Arts</span>
              <span class="article-read-time">8 min read</span>
              <span>•</span>
              <span>Mar 12, 2026</span>
            </div>
            <h3 class="article-title">Retrospectives in the Digital Age: How Museums Are Reimagining Legacy Exhibitions</h3>
            <p class="article-excerpt">
              The retrospective has long been a cornerstone of institutional curation — a way to honor a career, contextualize a movement, and invite audiences into a richer understanding of an artist's body of work. But in an era of digital archives, interactive installations, and decentralized curation, the format is evolving. From augmented reality reconstructions of lost works to crowdsourced annotation projects, museums are asking what a retrospective can be when the audience has a voice.
            </p>
            <div class="article-footer">
              <div class="article-author">
                <div class="author-avatar">
                  <img src="https://placehold.co/64x64/1a1a22/c9a96e?text=JR&font=inter&bg=1a1a22&fg=c9a96e&w=64&h=64" alt="Author avatar" width="64" height="64">
                </div>
                <span class="author-name">Jamal Reyes</span>
              </div>
              <a href="#" class="btn btn-ghost" style="font-size:0.82rem;padding:8px 16px;">Read Story →</a>
            </div>
          </article>

          <!-- Article 3 -->
          <article class="article-card">
            <div class="article-meta">
              <span class="category-tag">Music</span>
              <span class="article-read-time">10 min read</span>
              <span>•</span>
              <span>Mar 10, 2026</span>
            </div>
            <h3 class="article-title">The Creative Process: Inside the Studios of Three Emerging Composers Redefining Sound</h3>
            <p class="article-excerpt">
              We spent a week in the studios of three composers whose work spans electronic, chamber, and cinematic traditions. What emerged was a picture of a generation unwilling to be categorized — artists who move fluidly between notation and improvisation, between acoustic and synthetic, between the studio and the stage. Here, they share their processes, their tools, and the questions that keep them up at night.
            </p>
            <div class="article-footer">
              <div class="article-author">
                <div class="author-avatar">
                  <img src="https://placehold.co/64x64/1a1a22/c9a96e?text=AL&font=inter&bg=1a1a22&fg=c9a96e&w=64&h=64" alt="Author avatar" width="64" height="64">
                </div>
                <span class="author-name">Aiko Lindström</span>
              </div>
              <a href="#" class="btn btn-ghost" style="font-size:0.82rem;padding:8px 16px;">Read Story →</a>
            </div>
          </article>

          <!-- Article 4 -->
          <article class="article-card">
            <div class="article-meta">
              <span class="category-tag">Film & Media</span>
              <span class="article-read-time">6 min read</span>
              <span>•</span>
              <span>Mar 8, 2026</span>
            </div>
            <h3 class="article-title">Beyond the Frame: How Documentary Filmmakers Are Using Participatory Methods to Tell Deeper Stories</h3>
            <p class="article-excerpt">
              A growing cohort of documentary filmmakers is departing from the observational tradition, instead inviting subjects to co-create the narrative, shape the edit, and even operate the camera. The results are messy, intimate, and often revelatory — and they raise profound questions about authorship, authenticity, and who gets to tell a story. We explore the rise of participatory documentary and its implications for the genre.
            </p>
            <div class="article-footer">
              <div class="article-author">
                <div class="author-avatar">
                  <img src="https://placehold.co/64x64/1a1a22/c9a96e?text=DN&font=inter&bg=1a1a22&fg=c9a96e&w=64&h=64" alt="Author avatar" width="64" height="64">
                </div>
                <span class="author-name">Darnell Nkosi</span>
              </div>
              <a href="#" class="btn btn-ghost" style="font-size:0.82rem;padding:8px 16px;">Read Story →</a>
            </div>
          </article>

        </div>

        <!-- ====== SIDEBAR ====== -->
        <aside class="sidebar">

          <!-- Trending Now -->
          <div class="sidebar-card">
            <div class="sidebar-card-title">🔥 Trending Now</div>
            <div class="trending-item">
              <div class="trending-rank">01</div>
              <div class="trending-info">
                <div class="trending-title">The 10 Best Gallery Openings This Month</div>
                <div class="trending-sub">Visual Arts • Curated by L. Park</div>
              </div>
              <div class="trending-count">1.4k views</div>
            </div>
            <div class="trending-item">
              <div class="trending-rank">02</div>
              <div class="trending-info">
                <div class="trending-title">Ensemble Theatre's Rise: A Critic's Take</div>
                <div class="trending-sub">Performance • 12 min read</div>
              </div>
              <div class="trending-count">980 views</div>
            </div>
            <div class="trending-item">
              <div class="trending-rank">03</div>
              <div class="trending-info">
                <div class="trending-title">Emerging Artists to Watch in 2026</div>
                <div class="trending-sub">Artists • 8 profiles</div>
              </div>
              <div class="trending-count">820 views</div>
            </div>
            <div class="trending-item">
              <div class="trending-rank">04</div>
              <div class="trending-info">
                <div class="trending-title">Retrospective Reviews: The Year's Best Exhibitions</div>
                <div class="trending-sub">Critic Picks • 6 min read</div>
              </div>
              <div class="trending-count">640 views</div>
            </div>
          </div>

          <!-- This Week's Shows -->
          <div class="sidebar-card">
            <div class="sidebar-card-title">🎭 This Week's Shows</div>
            <div class="shows-list">
              <div class="show-item">
                <div class="show-date">
                  <div class="show-date-day">21</div>
                  <div class="show-date-month">Mar</div>
                </div>
                <div class="show-info">
                  <h5>Late Night Jazz Ensemble</h5>
                  <p>The Velvet Room • 8:00 PM</p>
                </div>
                <button class="show-ticket-btn">Get Tickets</button>
              </div>
              <div class="show-item">
                <div class="show-date">
                  <div class="show-date-day">22</div>
                  <div class="show-date-month">Mar</div>
                </div>
                <div class="show-info">
                  <h5>Seeing Sound: Immersive Installation</h5>
                  <p>Luminary Gallery • 6:00 PM</p>
                </div>
                <button class="show-ticket-btn">Get Tickets</button>
              </div>
              <div class="show-item">
                <div class="show-date">
                  <div class="show-date-day">23</div>
                  <div class="show-date-month">Mar</div>
                </div>
                <div class="show-info">
                  <h5>New Voices: One-Act Play Festival</h5>
                  <p>Studio Theatre • 7:30 PM</p>
                </div>
                <button class="show-ticket-btn">Get Tickets</button>
              </div>
              <div class="show-item">
                <div class="show-date">
                  <div class="show-date-day">25</div>
                  <div class="show-date-month">Mar</div>
                </div>
                <div class="show-info">
                  <h5>Portrait of a Movement — Film Screening</h5>
                  <p>CineLumina • 9:00 PM</p>
                </div>
                <button class="show-ticket-btn">Get Tickets</button>
              </div>
            </div>
          </div>

          <!-- Critic Picks -->
          <div class="sidebar-card">
            <div class="sidebar-card-title">⭐ Critic Picks</div>
            <div class="trending-item">
              <div class="trending-rank">✦</div>
              <div class="trending-info">
                <div class="trending-title">The Resonance Project — Chamber Series</div>
                <div class="trending-sub">★★★★★ — "Exquisite programming"</div>
              </div>
              <div class="trending-count">Book Now</div>
            </div>
            <div class="trending-item">
              <div class="trending-rank">✦</div>
              <div class="trending-info">
                <div class="trending-title">Walls Don't Speak — Mixed Media Show</div>
                <div class="trending-sub">★★★★☆ — "Provocative and lush"</div>
              </div>
              <div class="trending-count">Explore</div>
            </div>
            <div class="trending-item">
              <div class="trending-rank">✦</div>
              <div class="trending-info">
                <div class="trending-title">Stage Left: New Playwrights Roundtable</div>
                <div class="trending-sub">★★★★★ — "A revelation"</div>
              </div>
              <div class="trending-count">Book Now</div>
            </div>
          </div>

        </aside>
      </div>

      <!-- ====== GALLERY GRID ====== -->
      <div style="margin-top:48px;">
        <div class="section-header">
          <div class="section-label">Visual Arts</div>
          <h2 class="section-title">From the Galleries</h2>
          <p class="section-desc">
            A curated selection of current and upcoming exhibitions, installation works, and visual art events happening across our network this season.
          </p>
        </div>

        <div class="gallery-grid">
          <div class="gallery-item featured">
            <img src="https://placehold.co/800x600/2d2a24/c9a96e?text=The+Resonance+Project&font=playfair+display&bg=2d2a24&fg=c9a96e&w=800&h=600" alt="The Resonance Project — immersive sound installation" width="800" height="600">
            <div class="gallery-overlay">
              <h4>The Resonance Project</h4>
              <p>Immersive Sound Installation • Through Apr 30</p>
            </div>
          </div>
          <div class="gallery-item">
            <img src="https://placehold.co/400x300/1a1a22/c9a96e?text=Portrait+Series&font=playfair+display&bg=1a1a22&fg=c9a96e&w=400&h=300" alt="Portrait Series — contemporary photography exhibition" width="400" height="300">
            <div class="gallery-overlay">
              <h4>Portrait Series</h4>
              <p>Contemporary Photography</p>
            </div>
          </div>
          <div class="gallery-item">
            <img src="https://placehold.co/400x300/2d2a24/c9a96e?text=Chromatic+Study&font=playfair+display&bg=2d2a24&fg=c9a96e&w=400&h=300" alt="Chromatic Study — abstract painting exhibition" width="400" height="300">
            <div class="gallery-overlay">
              <h4>Chromatic Study</h4>
              <p>Abstract Painting</p>
            </div>
          </div>
          <div class="gallery-item">
            <img src="https://placehold.co/400x300/1a1a22/e63946?text=Sculpture+Walk&font=playfair+display&bg=1a1a22&fg=e63946&w=400&h=300" alt="Sculpture Walk — outdoor sculpture exhibition" width="400" height="300">
            <div class="gallery-overlay">
              <h4>Sculpture Walk</h4>
              <p>Outdoor Exhibition</p>
            </div>
          </div>
          <div class="gallery-item">
            <img src="https://placehold.co/400x300/2d2a24/e63946?text=Light+Forms&font=playfair+display&bg=2d2a24&fg=e63946&w=400&h=300" alt="Light Forms — experimental light installation" width="400" height="300">
            <div class="gallery-overlay">
              <h4>Light Forms</h4>
              <p>Experimental Light</p>
            </div>
          </div>
        </div>

        <div style="text-align:center;margin-top:28px;">
          <a href="#" class="btn btn-secondary">
            Explore All Galleries
            <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
          </a>
        </div>
      </div>
    </div>
  </section>

  <!-- ====== INTERACTIVE EVENT CALENDAR ====== -->
  <section class="section" id="calendar">
    <div class="container--narrow">
      <div class="section-header" style="text-align:center;margin-bottom:32px;">
        <div class="section-label" style="justify-content:center;">Event Calendar</div>
        <h2 class="section-title">Plan your season</h2>
        <p class="section-desc" style="margin:0 auto;">
          Filter by discipline, find the dates that work for you, and discover what's on across music, visual arts, theatre, and film. Our calendar is updated daily with new performances, openings, and screenings.
        </p>
      </div>

      <div class="calendar-section">
        <div class="calendar-grid">
          <!-- Calendar Picker -->
          <div>
            <div class="calendar-picker">
              <select class="form-select" id="calendarMonthSelect" aria-label="Select month">
                <option value="0">January 2026</option>
                <option value="1">February 2026</option>
                <option value="2" selected>March 2026</option>
                <option value="3">April 2026</option>
                <option value="4">May 2026</option>
                <option value="5">June 2026</option>
                <option value="6">July 2026</option>
                <option value="7">August 2026</option>
                <option value="8">September 2026</option>
                <option value="9">October 2026</option>
                <option value="10">November 2026</option>
                <option value="11">December 2026</option>
              </select>
              <button class="btn btn-secondary" id="calendarTodayBtn" style="padding:10px 20px;font-size:0.82rem;">Today</button>
            </div>

            <!-- Calendar Grid -->
            <div class="calendar-header">
              <h3 id="calendarTitle">March 2026</h3>
              <div class="calendar-nav">
                <button id="calendarPrev" aria-label="Previous month">‹</button>
                <button id="calendarNext" aria-label="Next month">›</button>
              </div>
            </div>
            <div class="calendar-grid-days" id="calendarGrid">
              <!-- Populated by JS -->
            </div>
          </div>

          <!-- Upcoming Events -->
          <div>
            <div class="calendar-header" style="margin-bottom:16px;">
              <h3>Upcoming Events</h3>
              <span style="font-size:0.78rem;color:var(--color-text-dim);font-weight:500;">This month</span>
            </div>
            <div class="calendar-events" id="calendarEvents">
              <!-- Populated by JS -->
            </div>
            <a href="#" class="btn btn-ghost" style="margin-top:16px;width:100%;justify-content:center;font-size:0.85rem;">
              View Full Calendar
              <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
            </a>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ====== FEATURE GRID ====== -->
  <section class="section" id="features">
    <div class="container--wide">
      <div class="section-header">
        <div class="section-label">Why Luminary</div>
        <h2 class="section-title">Your gateway to the arts</h2>
        <p class="section-desc">
          Whether you're a seasoned patron, a curious newcomer, or a working artist seeking community, we offer tools and experiences designed to deepen your engagement with the arts.
        </p>
      </div>

      <div class="feature-grid">
        <div class="feature-card">
          <div class="feature-icon">🎫</div>
          <h3>Smart Ticketing</h3>
          <p>Book performances, gallery entries, and special events with ease. Our integrated ticketing system offers real-time availability, seat selection, and instant confirmation — plus flexible exchanges when plans change.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🖼️</div>
          <h3>Curated Galleries</h3>
          <p>Browse our network of partner galleries, museums, and independent exhibition spaces. Each listing includes curator notes, artist bios, opening dates, and a direct link to virtually walk through select installations.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🎭</div>
          <h3>Artist Profiles</h3>
          <p>Discover emerging and established artists across disciplines. Our in-depth profiles feature interviews, portfolio highlights, upcoming shows, and ways to follow their work — from residencies to releases to exhibitions.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">📝</div>
          <h3>Critical Reviews</h3>
          <p>Our team of arts critics and journalists delivers thoughtful, literate reviews of performances, exhibitions, films, and recordings. We believe criticism is an art form in itself — honest, nuanced, and engaged with the work.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🎓</div>
          <h3>Creative Education</h3>
          <p>Workshops, masterclasses, and artist talks led by working professionals. From作曲 techniques to curation fundamentals, our educational programming is designed for both community members and emerging practitioners.</p>
        </div>
        <div class="feature-card">
          <div class="feature-icon">🤝</div>
          <h3>Community &amp; Connection</h3>
          <p>Engage with a community of arts lovers through our forums, member events, and collaborative projects. Share your perspective, discover like-minded enthusiasts, and help shape the conversation around the arts in our city.</p>
        </div>
      </div>
    </div>
  </section>

  <!-- ====== TESTIMONIALS ====== -->
  <section class="section testimonials-section">
    <div class="container--wide">
      <div class="section-header" style="text-align:center;margin-bottom:40px;">
        <div class="section-label" style="justify-content:center;">Kind Words</div>
        <h2 class="section-title">What our community says</h2>
      </div>

      <div class="testimonials-grid">
        <div class="testimonial-card">
          <div class="testimonial-stars">★ ★ ★ ★ ★</div>
          <p class="testimonial-text">
            "The Luminary Stage has become my go-to for discovering new work. Their curation feels personal and brave — they're not just picking the obvious shows, they're finding the ones that matter."
          </p>
          <div class="testimonial-author">
            <div class="testimonial-avatar">
              <img src="https://placehold.co/80x80/1a1a22/c9a96e?text=SV&font=inter&bg=1a1a22&fg=c9a96e&w=80&h=80" alt="Sarah V." width="80" height="80">
            </div>
            <div class="testimonial-author-info">
              <h6>Sarah V.</h6>
              <p>Member since 2024 • Visual Arts Patron</p>
            </div>
          </div>
        </div>

        <div class="testimonial-card">
          <div class="testimonial-stars">★ ★ ★ ★ ★</div>
          <p class="testimonial-text">
            "As a working musician, I've found an unexpected home here. The forums are full of thoughtful conversation, the events are genuinely interdisciplinary, and the artist profiles have helped me connect with collaborators."
          </p>
          <div class="testimonial-author">
            <div class="testimonial-avatar">
              <img src="https://placehold.co/80x80/1a1a22/c9a96e?text=MR&font=inter&bg=1a1a22&fg=c9a96e&w=80&h=80" alt="Marcus R." width="80" height="80">
            </div>
            <div class="testimonial-author-info">
              <h6>Marcus R.</h6>
              <p>Composer &amp; Community Member</p>
            </div>
          </div>
        </div>

        <div class="testimonial-card">
          <div class="testimonial-stars">★ ★ ★ ★ ☆</div>
          <p class="testimonial-text">
            "I bring my students to the gallery openings and performance events regularly. The educational programming is excellent, and the way they frame each exhibition or performance adds so much depth to the experience. Highly recommend for families and educators alike."
          </p>
          <div class="testimonial-author">
            <div class="testimonial-avatar">
              <img src="https://placehold.co/80x80/1a1a22/c9a96e?text=EK&font=inter&bg=1a1a22&fg=c9a96e&w=80&h=80" alt="Dr. Elena K." width="80" height="80">
            </div>
            <div class="testimonial-author-info">
              <h6>Dr. Elena K.</h6>
              <p>Arts Educator • University of Northbridge</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ====== CTA BANNER ====== -->
  <section class="section" id="tickets">
    <div class="container--wide">
      <div class="cta-banner">
        <div class="cta-text">
          <h2>Ready to experience the season?</h2>
          <p>Our Spring 2026 lineup is now live. Book performances, reserve gallery entries, and explore the full calendar — all in one place. Members get early access and exclusive presales.</p>
        </div>
        <a href="#" class="cta-btn">
          Book Your Experience
          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
        </a>
      </div>
    </div>
  </section>

  <!-- ====== FAQ ====== -->
  <section class="section" id="faq">
    <div class="container--narrow">
      <div class="section-header" style="text-align:center;margin-bottom:36px;">
        <div class="section-label" style="justify-content:center;">FAQ</div>
        <h2 class="section-title">Common Questions</h2>
      </div>

      <div class="faq-list">
        <div class="faq-item active">
          <button class="faq-question" aria-expanded="true">
            How do I purchase tickets for performances and gallery events?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            You can purchase tickets directly through our website by browsing the Events or Galleries sections and selecting "Get Tickets" or "Book Now." Tickets are available in real time, with seat selection for most performances. We accept all major credit cards, mobile payments, and offer installment plans for season passes. Members receive early access to presales 48 hours before the general public.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question" aria-expanded="false">
            What is the difference between a single-event ticket and a season pass?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            A single-event ticket grants access to one specific performance, exhibition opening, or screening. A season pass provides unlimited access to all eligible events throughout the season — typically 6 to 8 months — including priority seating, exclusive members-only events, and discounts on workshops and educational programming. Season passes are available in individual, duo, and family tiers.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question" aria-expanded="false">
            Can I submit my own work or propose a performance?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            Absolutely. We welcome submissions from artists, curators, and performers at all stages of their careers. Our submission portal allows you to share your portfolio, project proposal, and technical requirements. Our programming team reviews submissions on a rolling basis and responds within 3-4 weeks. We also host open-call periods for our gallery spaces and studio theatre twice annually — watch our events page for announcements.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question" aria-expanded="false">
            Do you offer accessibility accommodations for performances and gallery visits?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            Yes. All of our partner venues are committed to accessibility. Most performances offer assistive listening devices, captioned programs, audio description, and wheelchair-accessible seating. Gallery spaces are physically accessible, and many exhibitions include tactile elements and large-format labels. When booking, you can select accessibility preferences and our team will confirm specific accommodations for your event. You can also contact our accessibility coordinator directly at access@luminarystage.example.
          </div>
        </div>
        <div class="faq-item">
          <button class="faq-question" aria-expanded="false">
            How can I stay informed about upcoming events and new content?
            <span class="faq-icon">+</span>
          </button>
          <div class="faq-answer">
            The easiest way is to subscribe to our weekly newsletter, which delivers curated picks, early-bird announcements, and behind-the-scenes stories directly to your inbox. You can also follow us on social media for real-time updates, or create a free account on our site to save events to your personal calendar and receive reminders. Members receive an additional monthly digest with exclusive previews and presale codes.
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- ====== NEWSLETTER ====== -->
  <section class="section">
    <div class="container--narrow">
      <div class="newsletter">
        <div class="newsletter-text">
          <h3>Stay in the loop</h3>
          <p>Get weekly recommendations, presale access, and stories from the creative world — delivered to your inbox every Thursday.</p>
        </div>
        <form class="newsletter-form" onsubmit="event.preventDefault(); alert('Thanks for subscribing! (Demo form)');">
          <input type="email" class="form-input" placeholder="Your email address" required aria-label="Email address for newsletter">
          <button type="submit" class="btn btn-primary">Subscribe</button>
        </form>
      </div>
    </div>
  </section>

  <!-- ====== FOOTER ====== -->
  <footer class="site-footer">
    <div class="container--wide">
      <div class="footer-grid">
        <div class="footer-brand">
          <span class="brand-name">The <span style="color:var(--color-primary);">Luminary</span> Stage</span>
          <p>Your premier destination for music, visual arts, performing arts, and entertainment industry news. We connect audiences, artists, and communities through curated experiences and thoughtful journalism.</p>
          <div class="social-links">
            <a href="#" class="social-link" aria-label="Instagram">IG</a>
            <a href="#" class="social-link" aria-label="Twitter / X">X</a>
            <a href="#" class="social-link" aria-label="YouTube">YT</a>
            <a href="#" class="social-link" aria-label="TikTok">TK</a>
            <a href="#" class="social-link" aria-label="LinkedIn">LI</a>
          </div>
        </div>

        <div class="footer-col">
          <h5>Explore</h5>
          <ul>
            <li><a href="#">Tickets &amp; Shows</a></li>
            <li><a href="#">Galleries</a></li>
            <li><a href="#">Artists</a></li>
            <li><a href="#">Events Calendar</a></li>
            <li><a href="#">Reviews</a></li>
            <li><a href="#">Season Passes</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h5>Company</h5>
          <ul>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Our Team</a></li>
            <li><a href="#">Careers</a></li>
            <li><a href="#">Press &amp; Media</a></li>
            <li><a href="#">Contact</a></li>
            <li><a href="#">Accessibility</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h5>Contact Us</h5>
          <ul class="footer-contact">
            <li><span>✉</span> <a href="mailto:hello@luminarystage.example">hello@luminarystage.example</a></li>
            <li><span>☎</span> <a href="tel:+15551234567">+1 (555) 123-4567</a></li>
            <li><span>◎</span> 128 Artisan Way, Suite 400<br>Melrose, CA 90012</li>
            <li><span>⏰</span> Mon–Sat, 10 AM – 7 PM</li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <p>© 2026 The Luminary Stage. All rights reserved. Made with care in Melrose.</p>
        <div class="footer-bottom-links">
          <a href="#">Privacy Policy</a>
          <a href="#">Terms of Service</a>
          <a href="#">Cookie Policy</a>
          <a href="#">Accessibility</a>
        </div>
      </div>
    </div>
  </footer>

  <!-- Scroll to Top -->
  <button class="scroll-top" id="scrollTopBtn" aria-label="Scroll to top">
    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="12" y1="19" x2="12" y2="5"/><polyline points="5 12 12 5 19 12"/></svg>
  </button>

  <script>
    // ====== HEADER SCROLL EFFECT ======
    const header = document.getElementById('siteHeader');
    let lastScroll = 0;

    window.addEventListener('scroll', () => {
      const currentScroll = window.pageYOffset;
      if (currentScroll > 40) {
        header.classList.add('scrolled');
      } else {
        header.classList.remove('scrolled');
      }
      lastScroll = currentScroll;

      // Scroll to top button
      const scrollBtn = document.getElementById('scrollTopBtn');
      if (currentScroll > 600) {
        scrollBtn.classList.add('visible');
      } else {
        scrollBtn.classList.remove('visible');
      }
    });

    document.getElementById('scrollTopBtn').addEventListener('click', () => {
      window.scrollTo({ top: 0, behavior: 'smooth' });
    });

    // ====== MOBILE NAV ======
    const hamburger = document.getElementById('hamburgerBtn');
    const mobileNav = document.getElementById('mobileNav');

    hamburger.addEventListener('click', () => {
      hamburger.classList.toggle('active');
      mobileNav.classList.toggle('open');
      document.body.style.overflow = mobileNav.classList.contains('open') ? 'hidden' : '';
    });

    // Close mobile nav on link click
    mobileNav.querySelectorAll('.nav-link').forEach(link => {
      link.addEventListener('click', () => {
        hamburger.classList.remove('active');
        mobileNav.classList.remove('open');
        document.body.style.overflow = '';
      });
    });

    // ====== FAQ ACCORDION ======
    document.querySelectorAll('.faq-question').forEach(button => {
      button.addEventListener('click', () => {
        const item = button.parentElement;
        const isActive = item.classList.contains('active');

        // Close all
        document.querySelectorAll('.faq-item').forEach(faq => {
          faq.classList.remove('active');
          faq.querySelector('.faq-question').setAttribute('aria-expanded', 'false');
        });

        // Open clicked if it wasn't active
        if (!isActive) {
          item.classList.add('active');
          button.setAttribute('aria-expanded', 'true');
        }
      });
    });

    // ====== INTERACTIVE CALENDAR ======
    const calendarGrid = document.getElementById('calendarGrid');
    const calendarEvents = document.getElementById('calendarEvents');
    const calendarTitle = document.getElementById('calendarTitle');
    const calendarPrev = document.getElementById('calendarPrev');
    const calendarNext = document.getElementById('calendarNext');
    const calendarTodayBtn = document.getElementById('calendarTodayBtn');
    const calendarMonthSelect = document.getElementById('calendarMonthSelect');

    const monthNames = [
      'January', 'February', 'March', 'April', 'May', 'June',
      'July', 'August', 'September', 'October', 'November', 'December'
    ];

    const dayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

    let currentDate = new Date(2026, 2, 1); // March 2026

    // Mock event data (day, type, title, time, location)
    const eventData = [
      { day: 5, type: 'music', title: 'Spring Jazz Series — The Resonance Project', time: '8:00 PM', loc: 'The Velvet Room' },
      { day: 7, type: 'visual', title: 'Chromatic Study — Opening Reception', time: '6:00 PM', loc: 'Luminary Gallery' },
      { day: 12, type: 'theatre', title: 'New Voices: One-Act Play Festival — Night 1', time: '7:30 PM', loc: 'Studio Theatre' },
      { day: 14, type: 'film', title: 'Portrait of a Movement — Director Q&A', time: '9:00 PM', loc: 'CineLumina' },
      { day: 19, type: 'music', title: 'Late Night Jazz Ensemble — Featuring K. Odessa', time: '8:00 PM', loc: 'The Velvet Room' },
      { day: 21, type: 'visual', title: 'Seeing Sound — Immersive Installation Tour', time: '6:00 PM', loc: 'Luminary Gallery' },
      { day: 23, type: 'theatre', title: 'Stage Left: New Playwrights Roundtable', time: '7:30 PM', loc: 'Studio Theatre' },
      { day: 26, type: 'music', title: 'Ensemble Workshop: Collective Composition', time: '2:00 PM', loc: 'Rehearsal Space B' },
      { day: 28, type: 'film', title: 'Documentary Saturdays: Participatory Practices', time: '4:00 PM', loc: 'CineLumina' },
    ];

    function getEventsForDate(date) {
      const day = date.getDate();
      return eventData.filter(e => e.day === day);
    }

    function renderCalendar(date) {
      const year = date.getFullYear();
      const month = date.getMonth();

      calendarTitle.textContent = `${monthNames[month]} ${year}`;

      const firstDay = new Date(year, month, 1).getDay();
      const daysInMonth = new Date(year, month + 1, 0).getDate();
      const daysInPrevMonth = new Date(year, month, 0).getDate();

      const today = new Date();
      const isCurrentMonth = (today.getFullYear() === year && today.getMonth() === month);
      const todayDate = today.getDate();

      let html = '';

      // Day labels
      dayLabels.forEach(label => {
        html += `<div class="calendar-day-label">${label}</div>`;
      });

      // Previous month fill
      for (let i = firstDay - 1; i >= 0; i--) {
        html += `<div class="calendar-day empty other-month">${daysInPrevMonth - i}</div>`;
      }

      // Current month days
      for (let day = 1; day <= daysInMonth; day++) {
        const isToday = isCurrentMonth && day === todayDate;
        const events = getEventsForDate(new Date(year, month, day));
        const hasEvent = events.length > 0;

        let classes = 'calendar-day';
        if (isToday) classes += ' today';
        if (hasEvent) classes += ' event';

        html += `<div class="${classes}" data-day="${day}">${day}</div>`;
      }

      // Next month fill to complete the grid
      const totalCells = firstDay + daysInMonth;
      const remaining = (7 - (totalCells % 7)) % 7;
      for (let i = 1; i <= remaining; i++) {
        html += `<div class="calendar-day empty other-month">${i}</div>`;
      }

      calendarGrid.innerHTML = html;

      // Render events for current month
      renderMonthEvents(year, month);
    }

    function renderMonthEvents(year, month) {
      const monthEvents = eventData.filter(e => {
        const eventDate = new Date(year, month, e.day);
        return eventDate.getMonth() === month && eventDate.getFullYear() === year;
      });

      if (monthEvents.length === 0) {
        calendarEvents.innerHTML = `
          <div style="padding:24px;text-align:center;color:var(--color-text-dim);font-size:0.9rem;">
            No events scheduled for this month yet. Check back soon!
          </div>
        `;
        return;
      }

      let html = '';
      monthEvents.forEach((event, idx) => {
        html += `
          <div class="calendar-event" style="animation: fadeInUp 0.4s ease ${idx * 0.08}s both;">
            <div class="calendar-event-dot ${event.type}"></div>
            <div class="calendar-event-info">
              <h5>${event.title}</h5>
              <p>${event.loc}</p>
              <div class="event-meta">
                <span>${event.time}</span>
                <span>Day ${event.day}</span>
              </div>
            </div>
          </div>
        `;
      });

      calendarEvents.innerHTML = html;
    }

    // Add keyframe for event animation
    const styleSheet = document.createElement('style');
    styleSheet.textContent = `
      @keyframes fadeInUp {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
      }
    `;
    document.head.appendChild(styleSheet);

    calendarPrev.addEventListener('click', () => {
      currentDate.setMonth(currentDate.getMonth() - 1);
      calendarMonthSelect.value = currentDate.getMonth();
      renderCalendar(currentDate);
    });

    calendarNext.addEventListener('click', () => {
      currentDate.setMonth(currentDate.getMonth() + 1);
      calendarMonthSelect.value = currentDate.getMonth();
      renderCalendar(currentDate);
    });

    calendarTodayBtn.addEventListener('click', () => {
      currentDate = new Date(2026, today.getMonth(), 1);
      calendarMonthSelect.value = currentDate.getMonth();
      renderCalendar(currentDate);
    });

    calendarMonthSelect.addEventListener('change', (e) => {
      currentDate = new Date(2026, parseInt(e.target.value), 1);
      renderCalendar(currentDate);
    });

    // Calendar day click — show events for that day
    calendarGrid.addEventListener('click', (e) => {
      const dayEl = e.target.closest('.calendar-day');
      if (!dayEl || dayEl.classList.contains('empty')) return;

      const day = parseInt(dayEl.dataset.day);
      const year = currentDate.getFullYear();
      const month = currentDate.getMonth();
      const events = getEventsForDate(new Date(year, month, day));

      // Scroll to events panel and highlight
      const eventsPanel = document.getElementById('calendarEvents');
      if (events.length > 0) {
        // Filter to just this day's events
        let html = '';
        events.forEach(event => {
          html += `
            <div class="calendar-event" style="border-color:var(--color-primary);background:rgba(201,169,110,0.06);">
              <div class="calendar-event-dot ${event.type}"></div>
              <div class="calendar-event-info">
                <h5>${event.title}</h5>
                <p>${event.loc}</p>
                <div class="event-meta">
                  <span>${event.time}</span>
                  <span>Mar ${event.day}</span>
                </div>
              </div>
            </div>
          `;
        });
        eventsPanel.innerHTML = html;
        eventsPanel.scrollIntoView({ behavior: 'smooth', block: 'nearest' });

        // Update title temporarily
        const originalTitle = calendarTitle.textContent;
        calendarTitle.textContent = `Events — Day ${day}`;
        setTimeout(() => {
          calendarTitle.textContent = originalTitle;
        }, 2000);
      } else {
        eventsPanel.innerHTML = `
          <div style="padding:24px;text-align:center;color:var(--color-text-dim);font-size:0.9rem;">
            No events on this day. Explore other dates!
          </div>
        `;
      }
    });

    // Initialize calendar
    renderCalendar(currentDate);
  </script>

</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:50:01.104Z",
  "url": "https://benchmark.aimac.invalid/997adf4f1a7908422864f9951e2c48e061321eeb33a6d96b5f117bdf1ba6c59a.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-group\" aria-label=\"The Luminary Stage \u2014 Home\">",
          "target": [
            ".logo-group"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-group\" aria-label=\"The Luminary Stage \u2014 Home\">",
          "target": [
            ".logo-group"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-group\" aria-label=\"The Luminary Stage \u2014 Home\">",
          "target": [
            ".logo-group"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-group\" aria-label=\"The Luminary Stage \u2014 Home\">",
          "target": [
            ".logo-group"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-group\" aria-label=\"The Luminary Stage \u2014 Home\">",
          "target": [
            ".logo-group"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"container--wide\" style=\"position:relative;z-index:1;\">",
          "target": [
            ".hero > .container--wide"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn-icon\" aria-label=\"Search\">",
          "target": [
            "button[aria-label=\"Search\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 class=\"hero-title\">\n            Where Art<br>\n            Meets <span class=\"italic\">Performance</span>\n          </h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Curated insights from the creative world</h2>",
                  "target": [
                    "#stories > .container--wide > .section-header > .section-title"
                  ]
                },
                {
                  "html": "<h3 class=\"article-title\">The Ensemble Effect: How Collective Performance Is Redefining Contemporary Theatre</h3>",
                  "target": [
                    ".premium > .article-title"
                  ]
                },
                {
                  "html": "<h3 class=\"article-title\">Retrospectives in the Digital Age: How Museums Are Reimagining Legacy Exhibitions</h3>",
                  "target": [
                    ".is-new > .article-title"
                  ]
                },
                {
                  "html": "<h3 class=\"article-title\">The Creative Process: Inside the Studios of Three Emerging Composers Redefining Sound</h3>",
                  "target": [
                    "article:nth-child(3) > .article-title"
                  ]
                },
                {
                  "html": "<h3 class=\"article-title\">Beyond the Frame: How Documentary Filmmakers Are Using Participatory Methods to Tell Deeper Stories</h3>",
                  "target": [
                    "article:nth-child(4) > .article-title"
                  ]
                },
                {
                  "html": "<h5>Late Night Jazz Ensemble</h5>",
                  "target": [
                    ".show-item:nth-child(1) > .show-info > h5"
                  ]
                },
                {
                  "html": "<h5>Seeing Sound: Immersive Installation</h5>",
                  "target": [
                    ".show-item:nth-child(2) > .show-info > h5"
                  ]
                },
                {
                  "html": "<h5>New Voices: One-Act Play Festival</h5>",
                  "target": [
                    ".show-item:nth-child(3) > .show-info > h5"
                  ]
                },
                {
                  "html": "<h5>Portrait of a Movement \u2014 Film Screening</h5>",
                  "target": [
                    ".show-item:nth-child(4) > .show-info > h5"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">From the Galleries</h2>",
                  "target": [
                    "div:nth-child(3) > .section-header > .section-title"
                  ]
                },
                {
                  "html": "<h4>The Resonance Project</h4>",
                  "target": [
                    ".featured > .gallery-overlay > h4"
                  ]
                },
                {
                  "html": "<h4>Portrait Series</h4>",
                  "target": [
                    ".gallery-item:nth-child(2) > .gallery-overlay > h4"
                  ]
                },
                {
                  "html": "<h4>Chromatic Study</h4>",
                  "target": [
                    ".gallery-item:nth-child(3) > .gallery-overlay > h4"
                  ]
                },
                {
                  "html": "<h4>Sculpture Walk</h4>",
                  "target": [
                    ".gallery-item:nth-child(4) > .gallery-overlay > h4"
                  ]
                },
                {
                  "html": "<h4>Light Forms</h4>",
                  "target": [
                    ".gallery-item:nth-child(5) > .gallery-overlay > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Plan your season</h2>",
                  "target": [
                    "#calendar > .container--narrow > .section-header > .section-title"
                  ]
                },
                {
                  "html": "<h3 id=\"calendarTitle\">March 2026</h3>",
                  "target": [
                    "#calendarTitle"
                  ]
                },
                {
                  "html": "<h3>Upcoming Events</h3>",
                  "target": [
                    "div:nth-child(2) > .calendar-header > h3"
                  ]
                },
                {
                  "html": "<h5>Spring Jazz Series \u2014 The Resonance Project</h5>",
                  "target": [
                    ".calendar-event:nth-child(1) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Chromatic Study \u2014 Opening Reception</h5>",
                  "target": [
                    ".calendar-event:nth-child(2) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>New Voices: One-Act Play Festival \u2014 Night 1</h5>",
                  "target": [
                    ".calendar-event:nth-child(3) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Portrait of a Movement \u2014 Director Q&amp;A</h5>",
                  "target": [
                    ".calendar-event:nth-child(4) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Late Night Jazz Ensemble \u2014 Featuring K. Odessa</h5>",
                  "target": [
                    ".calendar-event:nth-child(5) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Seeing Sound \u2014 Immersive Installation Tour</h5>",
                  "target": [
                    ".calendar-event:nth-child(6) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Stage Left: New Playwrights Roundtable</h5>",
                  "target": [
                    ".calendar-event:nth-child(7) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Ensemble Workshop: Collective Composition</h5>",
                  "target": [
                    ".calendar-event:nth-child(8) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h5>Documentary Saturdays: Participatory Practices</h5>",
                  "target": [
                    ".calendar-event:nth-child(9) > .calendar-event-info > h5"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Your gateway to the arts</h2>",
                  "target": [
                    "#features > .container--wide > .section-header > .section-title"
                  ]
                },
                {
                  "html": "<h3>Smart Ticketing</h3>",
                  "target": [
                    ".feature-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Curated Galleries</h3>",
                  "target": [
                    ".feature-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Artist Profiles</h3>",
                  "target": [
                    ".feature-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Critical Reviews</h3>",
                  "target": [
                    ".feature-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Creative Education</h3>",
                  "target": [
                    ".feature-card:nth-child(5) > h3"
                  ]
                },
                {
                  "html": "<h3>Community &amp; Connection</h3>",
                  "target": [
                    ".feature-card:nth-child(6) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">What our community says</h2>",
                  "target": [
                    ".testimonials-section > .container--wide > .section-header > .section-title"
                  ]
                },
                {
                  "html": "<h6>Sarah V.</h6>",
                  "target": [
                    ".testimonial-card:nth-child(1) > .testimonial-author > .testimonial-author-info > h6"
                  ]
                },
                {
                  "html": "<h6>Marcus R.</h6>",
                  "target": [
                    ".testimonial-card:nth-child(2) > .testimonial-author > .testimonial-author-info > h6"
                  ]
                },
                {
                  "html": "<h6>Dr. Elena K.</h6>",
                  "target": [
                    ".testimonial-card:nth-child(3) > .testimonial-author > .testimonial-author-info > h6"
                  ]
                },
                {
                  "html": "<h2>Ready to experience the season?</h2>",
                  "target": [
                    ".cta-text > h2"
                  ]
                },
                {
                  "html": "<h2 class=\"section-title\">Common Questions</h2>",
                  "target": [
                    "#faq > .container--narrow > .section-header > .section-title"
                  ]
                },
                {
                  "html": "<h3>Stay in the loop</h3>",
                  "target": [
                    ".newsletter-text > h3"
                  ]
                },
                {
                  "html": "<h5>Explore</h5>",
                  "target": [
                    ".footer-col:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5>Company</h5>",
                  "target": [
                    ".footer-col:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5>Contact Us</h5>",
                  "target": [
                    ".footer-col:nth-child(4) > h5"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#0f0f14",
                "bgColor": "#c9a96e",
                "contrastRatio": 8.54,
                "fontSize": "10.2pt (13.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 8.54"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"announcement-bar\">\n    Spring Season Now Live \u2014 <span>Use code LUMINARY25 for 25% off all season passes</span>\n  </div>",
          "target": [
            ".announcement-bar"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select class=\"form-select\" id=\"calendarMonthSelect\" aria-label=\"Select month\">",
          "target": [
            "#calendarMonthSelect"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/88x88/1a1a22/c9a96e?text=LS&amp;font=playfair+display&amp;bg=1a1a22&amp;fg=c9a96e\" alt=\"Luminary Stage Logo\" width=\"88\" height=\"88\">",
          "target": [
            "img[alt=\"Luminary Stage Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"email\" class=\"form-input\" placeholder=\"Your email address\" required=\"\" aria-label=\"Email address for newsletter\">",
          "target": [
            "input"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div>",
                  "target": [
                    ".calendar-grid > div:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"btn btn-ghost\" style=\"margin-top:16px;width:100%;justify-content:center;font-size:0.85rem;\">",
          "target": [
            "div:nth-child(2) > .btn-ghost.btn[href=\"#\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            },
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-group\" aria-label=\"The Luminary Stage \u2014 Home\">",
          "target": [
            ".logo-group"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"nav-desktop\">",
          "target": [
            ".nav-desktop"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#\" class=\"nav-link\">Home</a></li>",
          "target": [
            ".nav-desktop > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/88x88/1a1a22/c9a96e?text=LS&amp;font=playfair+display&amp;bg=1a1a22&amp;fg=c9a96e\" alt=\"Luminary Stage Logo\" width=\"88\" height=\"88\">",
          "target": [
            "img[alt=\"Luminary Stage Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select class=\"form-select\" id=\"calendarMonthSelect\" aria-label=\"Select month\">",
          "target": [
            "#calendarMonthSelect"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 259.3,
                "height": 44
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (259.3px by 44px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"logo-group\" aria-label=\"The Luminary Stage \u2014 Home\">",
          "target": [
            ".logo-group"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": "imgNode",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"hero-badge\">\n            <span class=\"dot\"></span>\n            Spring 2026 Season \u2014 Now On Sale\n          </div>",
                  "target": [
                    ".hero-badge"
                  ]
                },
                {
                  "html": "<img src=\"https://placehold.co/1440x900/0f0f14/c9a96e?text=%%20&amp;font=playfair+display&amp;bg=0f0f14&amp;fg=c9a96e&amp;w=1440&amp;h=900\" alt=\"\" width=\"1440\" height=\"900\">",
                  "target": [
                    "img[alt=\"\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined because element contains an image node"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"hero-badge\">\n            <span class=\"dot\"></span>\n            Spring 2026 Season \u2014 Now On Sale\n          </div>",
          "target": [
            ".hero-badge"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined because element contains an image node"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"article-card\">",
                  "target": [
                    "article:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"article-read-time\">10 min read</span>",
          "target": [
            "article:nth-child(3) > .article-meta > .article-read-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"article-card\">",
                  "target": [
                    "article:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Mar 10, 2026</span>",
          "target": [
            "article:nth-child(3) > .article-meta > span:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"article-card\">",
                  "target": [
                    "article:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"article-read-time\">6 min read</span>",
          "target": [
            "article:nth-child(4) > .article-meta > .article-read-time"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"article-card\">",
                  "target": [
                    "article:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Mar 8, 2026</span>",
          "target": [
            "article:nth-child(4) > .article-meta > span:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-rank\">01</div>",
          "target": [
            ".sidebar-card:nth-child(1) > .trending-item:nth-child(2) > .trending-rank"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-sub\">Visual Arts \u2022 Curated by L. Park</div>",
          "target": [
            ".sidebar-card:nth-child(1) > .trending-item:nth-child(2) > .trending-info > .trending-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-rank\">02</div>",
          "target": [
            ".sidebar-card:nth-child(1) > .trending-item:nth-child(3) > .trending-rank"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-sub\">Performance \u2022 12 min read</div>",
          "target": [
            ".sidebar-card:nth-child(1) > .trending-item:nth-child(3) > .trending-info > .trending-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-rank\">03</div>",
          "target": [
            ".sidebar-card:nth-child(1) > .trending-item:nth-child(4) > .trending-rank"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-sub\">Artists \u2022 8 profiles</div>",
          "target": [
            ".sidebar-card:nth-child(1) > .trending-item:nth-child(4) > .trending-info > .trending-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "15.6pt (20.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-rank\">04</div>",
          "target": [
            ".trending-item:nth-child(5) > .trending-rank"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 15.6pt (20.8px), font weight: bold). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-sub\">Critic Picks \u2022 6 min read</div>",
          "target": [
            ".trending-item:nth-child(5) > .trending-info > .trending-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"show-item\">",
                  "target": [
                    ".show-item:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"show-date-month\">Mar</div>",
          "target": [
            ".show-item:nth-child(1) > .show-date > .show-date-month"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"show-item\">",
                  "target": [
                    ".show-item:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"show-date-month\">Mar</div>",
          "target": [
            ".show-item:nth-child(2) > .show-date > .show-date-month"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"show-item\">",
                  "target": [
                    ".show-item:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"show-date-month\">Mar</div>",
          "target": [
            ".show-item:nth-child(3) > .show-date > .show-date-month"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "7.8pt (10.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"show-item\">",
                  "target": [
                    ".show-item:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"show-date-month\">Mar</div>",
          "target": [
            ".show-item:nth-child(4) > .show-date > .show-date-month"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 7.8pt (10.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-sub\">\u2605\u2605\u2605\u2605\u2605 \u2014 \"Exquisite programming\"</div>",
          "target": [
            ".sidebar-card:nth-child(3) > .trending-item:nth-child(2) > .trending-info > .trending-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-sub\">\u2605\u2605\u2605\u2605\u2606 \u2014 \"Provocative and lush\"</div>",
          "target": [
            ".sidebar-card:nth-child(3) > .trending-item:nth-child(3) > .trending-info > .trending-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"sidebar-card\">",
                  "target": [
                    ".sidebar-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"trending-sub\">\u2605\u2605\u2605\u2605\u2605 \u2014 \"A revelation\"</div>",
          "target": [
            ".sidebar-card:nth-child(3) > .trending-item:nth-child(4) > .trending-info > .trending-sub"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"calendar-day-label\">Sun</div>",
          "target": [
            ".calendar-day-label:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"calendar-day-label\">Mon</div>",
          "target": [
            ".calendar-day-label:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"calendar-day-label\">Tue</div>",
          "target": [
            ".calendar-day-label:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"calendar-day-label\">Wed</div>",
          "target": [
            ".calendar-day-label:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"calendar-day-label\">Thu</div>",
          "target": [
            ".calendar-day-label:nth-child(5)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"calendar-day-label\">Fri</div>",
          "target": [
            ".calendar-day-label:nth-child(6)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"calendar-day-label\">Sat</div>",
          "target": [
            ".calendar-day-label:nth-child(7)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.4pt (12.48px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-section\">",
                  "target": [
                    ".calendar-section"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span style=\"font-size:0.78rem;color:var(--color-text-dim);font-weight:500;\">This month</span>",
          "target": [
            ".calendar-header > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.4pt (12.48px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0s both;\">",
                  "target": [
                    ".calendar-event:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>8:00 PM</span>",
          "target": [
            ".calendar-event:nth-child(1) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0s both;\">",
                  "target": [
                    ".calendar-event:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 5</span>",
          "target": [
            ".calendar-event:nth-child(1) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.08s both;\">",
                  "target": [
                    ".calendar-event:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>6:00 PM</span>",
          "target": [
            ".calendar-event:nth-child(2) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.08s both;\">",
                  "target": [
                    ".calendar-event:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 7</span>",
          "target": [
            ".calendar-event:nth-child(2) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.16s both;\">",
                  "target": [
                    ".calendar-event:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>7:30 PM</span>",
          "target": [
            ".calendar-event:nth-child(3) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.16s both;\">",
                  "target": [
                    ".calendar-event:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 12</span>",
          "target": [
            ".calendar-event:nth-child(3) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.24s both;\">",
                  "target": [
                    ".calendar-event:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>9:00 PM</span>",
          "target": [
            ".calendar-event:nth-child(4) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.24s both;\">",
                  "target": [
                    ".calendar-event:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 14</span>",
          "target": [
            ".calendar-event:nth-child(4) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.32s both;\">",
                  "target": [
                    ".calendar-event:nth-child(5)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>8:00 PM</span>",
          "target": [
            ".calendar-event:nth-child(5) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.32s both;\">",
                  "target": [
                    ".calendar-event:nth-child(5)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 19</span>",
          "target": [
            ".calendar-event:nth-child(5) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.4s both;\">",
                  "target": [
                    ".calendar-event:nth-child(6)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>6:00 PM</span>",
          "target": [
            ".calendar-event:nth-child(6) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.4s both;\">",
                  "target": [
                    ".calendar-event:nth-child(6)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 21</span>",
          "target": [
            ".calendar-event:nth-child(6) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.48s both;\">",
                  "target": [
                    ".calendar-event:nth-child(7)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>7:30 PM</span>",
          "target": [
            ".calendar-event:nth-child(7) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.48s both;\">",
                  "target": [
                    ".calendar-event:nth-child(7)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 23</span>",
          "target": [
            ".calendar-event:nth-child(7) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.56s both;\">",
                  "target": [
                    ".calendar-event:nth-child(8)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>2:00 PM</span>",
          "target": [
            ".calendar-event:nth-child(8) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.56s both;\">",
                  "target": [
                    ".calendar-event:nth-child(8)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 26</span>",
          "target": [
            ".calendar-event:nth-child(8) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.64s both;\">",
                  "target": [
                    ".calendar-event:nth-child(9)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>4:00 PM</span>",
          "target": [
            ".calendar-event:nth-child(9) > .calendar-event-info > .event-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"calendar-event\" style=\"animation: fadeInUp 0.4s ease 0.64s both;\">",
                  "target": [
                    ".calendar-event:nth-child(9)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Day 28</span>",
          "target": [
            ".calendar-event:nth-child(9) > .calendar-event-info > .event-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"testimonial-card\">",
                  "target": [
                    ".testimonial-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Member since 2024 \u2022 Visual Arts Patron</p>",
          "target": [
            ".testimonial-card:nth-child(1) > .testimonial-author > .testimonial-author-info > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"testimonial-card\">",
                  "target": [
                    ".testimonial-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Composer &amp; Community Member</p>",
          "target": [
            ".testimonial-card:nth-child(2) > .testimonial-author > .testimonial-author-info > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#0f0f14",
                "contrastRatio": 2.75,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"testimonial-card\">",
                  "target": [
                    ".testimonial-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>Arts Educator \u2022 University of Northbridge</p>",
          "target": [
            ".testimonial-card:nth-child(3) > .testimonial-author > .testimonial-author-info > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.75 (foreground color: #5c5957, background color: #0f0f14, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>\u00a9 2026 The Luminary Stage. All rights reserved. Made with care in Melrose.</p>",
          "target": [
            ".footer-bottom > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">Privacy Policy</a>",
          "target": [
            ".footer-bottom-links > a[href=\"#\"]:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">Terms of Service</a>",
          "target": [
            ".footer-bottom-links > a[href=\"#\"]:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">Cookie Policy</a>",
          "target": [
            ".footer-bottom-links > a[href=\"#\"]:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5c5957",
                "bgColor": "#1a1a22",
                "contrastRatio": 2.48,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\">Accessibility</a>",
          "target": [
            ".footer-bottom-links > a[href=\"#\"]:nth-child(4)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.48 (foreground color: #5c5957, background color: #1a1a22, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 9912
      },
      {
        "y": 576,
        "height": 9912
      },
      {
        "y": 1152,
        "height": 9912
      },
      {
        "y": 1728,
        "height": 9912
      },
      {
        "y": 2304,
        "height": 9912
      },
      {
        "y": 2880,
        "height": 9912
      },
      {
        "y": 3456,
        "height": 9912
      },
      {
        "y": 4032,
        "height": 9912
      },
      {
        "y": 4608,
        "height": 9912
      },
      {
        "y": 5184,
        "height": 9912
      },
      {
        "y": 5760,
        "height": 9912
      },
      {
        "y": 6336,
        "height": 9912
      },
      {
        "y": 6912,
        "height": 9912
      },
      {
        "y": 7488,
        "height": 9912
      },
      {
        "y": 8064,
        "height": 9912
      },
      {
        "y": 8640,
        "height": 9912
      },
      {
        "y": 9192,
        "height": 9912
      }
    ],
    "scans": 18,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Arts and Entertainment" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

**Client & Category:**
- Industry: "Arts and Entertainment"
- Description: Music, movies, visual arts, performing arts, and entertainment industry news and resources.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Arts and Entertainment" category.
2.  **Define Page:** Determine the most effective primary page type (e.g., homepage, service landing page, category portal) to showcase this fictional entity.
3.  **Design:** Develop an opinionated, modern, and professional layout. Make distinct choices about structure and flow.

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Tickets", "Galleries", "Artists".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Arts and Entertainment" category. Consider themes similar to: "Emerging Talent", "Retrospectives", "Creative Process".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "ensemble", "performance", "curation".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Book Now", "Read Reviews", "Explore".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Arts and Entertainment" sector. Ideas similar but not limited to: "event calendar".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "trending now", "this week's shows", "critic picks".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.