Anthropic Claude Haiku 5.5 – Arts and Entertainment

via Anthropic · Generated

  • AIMAC Debt 5.14
  • Cost $0.012
  • Total Violations 27
  • HTML Size 53 KB
  • Em Dashes 0

Screenshot

View Anthropic Claude Haiku 5.5 Arts and Entertainment page View Live Page

Accessibility Issues Found

27 Serious

  • color-contrast serious 27 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <a href="#subscribe" class="btn btn-primary">Subscribe</a>

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>Marquee &amp; Canvas | Stories Worth Staging, Screening, and Seeing</title>
  <meta name="description" content="Marquee &amp; Canvas covers music, film, visual arts, and performing arts with critical reviews, artist spotlights, emerging talent profiles, and a curated events guide.">
  <style>
    :root {
      --ink: #1b1f2a;
      --ink-soft: #3a4153;
      --muted: #6b7280;
      --paper: #faf7f2;
      --card: #ffffff;
      --gold: #c9962b;
      --gold-deep: #a37a1d;
      --wine: #6e1f2e;
      --line: #e6e0d4;
      --radius: 12px;
      --shadow: 0 10px 30px rgba(27, 31, 42, 0.08);
      --max: 1200px;
    }

    * { box-sizing: border-box; }
    html { scroll-behavior: smooth; scroll-padding-top: 90px; }
    body {
      margin: 0;
      font-family: "Source Sans Pro", "Open Sans", system-ui, sans-serif;
      font-size: 17px;
      line-height: 1.65;
      color: var(--ink);
      background: var(--paper);
    }
    img { max-width: 100%; display: block; height: auto; }
    a { color: var(--wine); text-decoration: none; }
    a:hover { text-decoration: underline; }
    h1, h2, h3, h4 {
      font-family: "Playfair Display", Georgia, serif;
      line-height: 1.2;
      margin: 0 0 0.5em;
      color: var(--ink);
    }
    h1 { font-size: clamp(2.4rem, 5vw, 3.8rem); }
    h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }
    h3 { font-size: 1.3rem; }
    p { margin: 0 0 1.1em; color: var(--ink-soft); }
    .container { width: min(var(--max), 92%); margin: 0 auto; }
    .eyebrow {
      display: inline-block;
      font-size: 0.8rem;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      font-weight: 700;
      color: var(--gold-deep);
      margin-bottom: 0.6rem;
    }
    .section { padding: 4.5rem 0; }
    .section-head { max-width: 680px; margin-bottom: 2.5rem; }
    .section-head p { font-size: 1.05rem; }

    /* Buttons */
    .btn {
      display: inline-block;
      padding: 0.8rem 1.6rem;
      border-radius: 999px;
      font-weight: 700;
      font-size: 0.95rem;
      border: 2px solid transparent;
      cursor: pointer;
      transition: all 0.2s ease;
      text-decoration: none;
      font-family: inherit;
    }
    .btn-primary { background: var(--gold); color: var(--ink); }
    .btn-primary:hover { background: var(--gold-deep); color: #fff; text-decoration: none; }
    .btn-outline { border-color: currentColor; color: var(--ink); background: transparent; }
    .btn-outline:hover { background: var(--ink); color: #fff; text-decoration: none; }
    .btn-light { background: #fff; color: var(--wine); }
    .btn-light:hover { background: var(--gold); color: var(--ink); text-decoration: none; }
    .text-link { font-weight: 700; color: var(--wine); }
    .text-link::after { content: " \2192"; }

    /* Header */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(27, 31, 42, 0.97);
      color: #fff;
      backdrop-filter: blur(6px);
      box-shadow: 0 2px 12px rgba(0,0,0,0.2);
    }
    .topbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.9rem 0;
      flex-wrap: wrap;
    }
    .brand { display: flex; align-items: center; gap: 0.9rem; color: #fff; }
    .brand:hover { text-decoration: none; }
    .brand img { width: 52px; height: 52px; border-radius: 10px; }
    .brand-name {
      font-family: "Playfair Display", Georgia, serif;
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1;
    }
    .brand-tag {
      font-size: 0.85rem;
      color: #cfc7b5;
      margin-top: 0.25rem;
      display: block;
    }
    .main-nav ul {
      list-style: none;
      display: flex;
      gap: 1.6rem;
      margin: 0;
      padding: 0;
      align-items: center;
      flex-wrap: wrap;
    }
    .main-nav a {
      color: #e8e2d4;
      font-weight: 600;
      font-size: 0.95rem;
      padding: 0.3rem 0;
      border-bottom: 2px solid transparent;
    }
    .main-nav a:hover { color: var(--gold); border-bottom-color: var(--gold); text-decoration: none; }
    .main-nav .btn-primary { padding: 0.55rem 1.2rem; border-bottom: none; }
    .main-nav .btn-primary:hover { color: #fff; border-bottom: none; }

    /* Hero */
    .hero {
      position: relative;
      color: #fff;
      background: var(--ink);
      overflow: hidden;
    }
    .hero img.hero-bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0.35;
    }
    .hero::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(27,31,42,0.96) 30%, rgba(110,31,46,0.55) 100%);
    }
    .hero-inner {
      position: relative;
      z-index: 1;
      padding: 6rem 0 5rem;
      display: grid;
      grid-template-columns: 1.2fr 0.8fr;
      gap: 3rem;
      align-items: center;
    }
    .hero h1 { color: #fff; }
    .hero h1 em { color: var(--gold); font-style: italic; }
    .hero p.lead { color: #e3dccb; font-size: 1.2rem; max-width: 620px; }
    .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 1.8rem; }
    .hero-stats {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1rem;
      margin-top: 2.6rem;
      padding-top: 1.8rem;
      border-top: 1px solid rgba(255,255,255,0.15);
    }
    .hero-stats strong {
      display: block;
      font-family: "Playfair Display", Georgia, serif;
      font-size: 1.9rem;
      color: var(--gold);
      line-height: 1;
    }
    .hero-stats span { font-size: 0.85rem; color: #cfc7b5; }
    .hero-card {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.15);
      border-radius: var(--radius);
      padding: 1.6rem;
      backdrop-filter: blur(4px);
    }
    .hero-card img { border-radius: 8px; margin-bottom: 1rem; }
    .hero-card h3 { color: #fff; font-size: 1.2rem; margin-bottom: 0.3rem; }
    .hero-card p { color: #d8d1c0; font-size: 0.95rem; margin: 0; }

    /* Layout */
    .layout {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 330px;
      gap: 3rem;
      padding: 4rem 0;
    }
    .main-col > section + section { margin-top: 4.5rem; }

    /* Feature grid */
    .feature-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
      gap: 1.6rem;
    }
    .card {
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid var(--line);
    }
    .card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
    .card-body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1; }
    .card-body p { font-size: 0.97rem; }
    .tag {
      display: inline-block;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 0.25rem 0.6rem;
      border-radius: 4px;
      background: #f3ead6;
      color: var(--gold-deep);
      margin-bottom: 0.7rem;
      align-self: flex-start;
    }
    .card-body .text-link { margin-top: auto; }

    /* Spotlight feature */
    .spotlight {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2.4rem;
      align-items: center;
      background: var(--card);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 2.4rem;
      border: 1px solid var(--line);
    }
    .spotlight img { border-radius: 10px; width: 100%; aspect-ratio: 4/5; object-fit: cover; }
    .spotlight blockquote {
      margin: 1.4rem 0;
      padding: 0 0 0 1.2rem;
      border-left: 4px solid var(--gold);
      font-family: "Playfair Display", Georgia, serif;
      font-size: 1.25rem;
      font-style: italic;
      color: var(--ink);
    }
    .byline { display: flex; align-items: center; gap: 0.8rem; margin-top: 1rem; }
    .byline img { width: 48px; height: 48px; border-radius: 50%; }
    .byline strong { display: block; color: var(--ink); line-height: 1.2; }
    .byline span { font-size: 0.85rem; color: var(--muted); }
    .spotlight-meta { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1rem 0 1.4rem; font-size: 0.9rem; color: var(--muted); }

    /* Review aggregator */
    .reviews-tool {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      box-shadow: var(--shadow);
      padding: 1.6rem;
    }
    .tool-controls {
      display: flex;
      flex-wrap: wrap;
      gap: 0.8rem;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 1.4rem;
    }
    .chips { display: flex; flex-wrap: wrap; gap: 0.5rem; }
    .chip {
      border: 1px solid var(--line);
      background: #fff;
      color: var(--ink-soft);
      padding: 0.45rem 0.95rem;
      border-radius: 999px;
      font-size: 0.9rem;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
    }
    .chip[aria-pressed="true"] { background: var(--ink); color: #fff; border-color: var(--ink); }
    .search {
      position: relative;
    }
    .search input {
      font: inherit;
      padding: 0.6rem 1rem 0.6rem 2.3rem;
      border: 1px solid var(--line);
      border-radius: 999px;
      min-width: 240px;
      background: #fff;
    }
    .search input:focus { outline: 2px solid var(--gold); border-color: transparent; }
    .search::before {
      content: "\2315";
      position: absolute;
      left: 0.8rem;
      top: 50%;
      transform: translateY(-50%);
      color: var(--muted);
    }
    .review-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
      gap: 1.2rem;
    }
    .review {
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 1.2rem;
      background: #fffdf9;
      display: flex;
      flex-direction: column;
    }
    .review[hidden] { display: none; }
    .review h4 { font-size: 1.1rem; margin-bottom: 0.2rem; }
    .review .creator { font-size: 0.9rem; color: var(--muted); margin-bottom: 0.7rem; }
    .score {
      display: flex;
      align-items: center;
      gap: 0.6rem;
      margin-bottom: 0.7rem;
    }
    .score-badge {
      background: var(--wine);
      color: #fff;
      font-weight: 700;
      border-radius: 8px;
      padding: 0.25rem 0.6rem;
      font-size: 1.05rem;
    }
    .stars { color: var(--gold); letter-spacing: 1px; font-size: 0.95rem; }
    .review p { font-size: 0.95rem; }
    .review .verdict { font-weight: 700; color: var(--ink); font-size: 0.9rem; margin-top: auto; }
    .empty-state { display: none; text-align: center; padding: 2rem; color: var(--muted); }
    .empty-state.show { display: block; }
    .tool-foot { margin-top: 1.4rem; font-size: 0.9rem; color: var(--muted); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }

    /* Awards */
    .awards-list { display: grid; gap: 0; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
    .award-row {
      display: grid;
      grid-template-columns: 90px 1.1fr 1.4fr;
      gap: 1rem;
      padding: 1.1rem 1.4rem;
      border-bottom: 1px solid var(--line);
      align-items: center;
    }
    .award-row:last-child { border-bottom: none; }
    .award-row:nth-child(even) { background: #fbf8f2; }
    .award-year { font-family: "Playfair Display", Georgia, serif; font-size: 1.4rem; color: var(--gold-deep); font-weight: 700; }
    .award-cat { font-weight: 700; color: var(--ink); }
    .award-winner span { display: block; font-size: 0.9rem; color: var(--muted); }
    .awards-note { display: flex; gap: 1.2rem; align-items: center; margin-top: 1.6rem; flex-wrap: wrap; }

    /* Testimonials */
    .testimonials {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 1.4rem;
    }
    .testimonial {
      background: var(--ink);
      color: #efe9da;
      border-radius: var(--radius);
      padding: 1.8rem;
      position: relative;
    }
    .testimonial::before {
      content: "\201C";
      font-family: "Playfair Display", Georgia, serif;
      font-size: 4rem;
      color: var(--gold);
      line-height: 1;
      position: absolute;
      top: 0.6rem;
      right: 1.2rem;
      opacity: 0.6;
    }
    .testimonial p { color: #efe9da; font-style: italic; }
    .testimonial .byline strong { color: #fff; }
    .testimonial .byline span { color: #bdb4a0; }
    .testimonial .byline img { border: 2px solid var(--gold); }

    /* FAQ */
    .faq { display: grid; gap: 0.8rem; }
    .faq details {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 0;
      overflow: hidden;
    }
    .faq summary {
      cursor: pointer;
      list-style: none;
      padding: 1.1rem 1.4rem;
      font-weight: 700;
      color: var(--ink);
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 1rem;
    }
    .faq summary::-webkit-details-marker { display: none; }
    .faq summary::after {
      content: "+";
      font-size: 1.5rem;
      color: var(--gold-deep);
      line-height: 1;
      transition: transform 0.2s ease;
    }
    .faq details[open] summary::after { content: "\2212"; }
    .faq details[open] summary { border-bottom: 1px solid var(--line); }
    .faq .answer { padding: 1rem 1.4rem 1.4rem; }
    .faq .answer p:last-child { margin-bottom: 0; }

    /* Subscribe band */
    .subscribe-band {
      background: linear-gradient(120deg, var(--wine), #3c0f19);
      color: #fff;
      border-radius: 16px;
      padding: 3rem;
      display: grid;
      grid-template-columns: 1.2fr 1fr;
      gap: 2.4rem;
      align-items: center;
      box-shadow: var(--shadow);
    }
    .subscribe-band h2 { color: #fff; }
    .subscribe-band p { color: #ecd9dd; }
    .subscribe-form { display: flex; gap: 0.6rem; flex-wrap: wrap; }
    .subscribe-form input {
      flex: 1 1 220px;
      padding: 0.9rem 1.1rem;
      border-radius: 999px;
      border: none;
      font: inherit;
      min-width: 0;
    }
    .subscribe-form input:focus { outline: 3px solid var(--gold); }
    .form-note { font-size: 0.82rem; color: #d7bcc2; margin-top: 0.7rem; }
    .plans { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; margin-top: 1.2rem; }
    .plan {
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.18);
      border-radius: 10px;
      padding: 0.9rem 1rem;
      font-size: 0.9rem;
    }
    .plan strong { display: block; color: var(--gold); font-size: 1.05rem; }

    /* Sidebar */
    .sidebar { display: flex; flex-direction: column; gap: 1.6rem; align-self: start; position: sticky; top: 100px; }
    .widget {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.4rem;
      box-shadow: var(--shadow);
    }
    .widget h3 {
      font-size: 1.15rem;
      padding-bottom: 0.6rem;
      border-bottom: 2px solid var(--gold);
      margin-bottom: 1rem;
    }
    .widget ul { list-style: none; margin: 0; padding: 0; }
    .pick { display: grid; grid-template-columns: 74px 1fr; gap: 0.9rem; padding: 0.8rem 0; border-bottom: 1px solid var(--line); }
    .pick:last-child { border-bottom: none; padding-bottom: 0; }
    .pick:first-child { padding-top: 0; }
    .pick img { width: 74px; height: 74px; object-fit: cover; border-radius: 8px; }
    .pick strong { display: block; font-size: 0.98rem; line-height: 1.3; color: var(--ink); }
    .pick span { font-size: 0.85rem; color: var(--muted); }
    .show-item {
      display: flex;
      gap: 0.9rem;
      padding: 0.75rem 0;
      border-bottom: 1px solid var(--line);
    }
    .show-item:last-child { border-bottom: none; }
    .date-block {
      min-width: 56px;
      text-align: center;
      background: var(--ink);
      color: #fff;
      border-radius: 8px;
      padding: 0.4rem 0.3rem;
      line-height: 1.1;
    }
    .date-block b { display: block; font-size: 1.3rem; font-family: "Playfair Display", Georgia, serif; color: var(--gold); }
    .date-block small { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; }
    .show-item strong { display: block; font-size: 0.95rem; line-height: 1.3; }
    .show-item span { font-size: 0.85rem; color: var(--muted); }
    .widget-cta { display: block; text-align: center; margin-top: 1rem; }
    .interview-img { width: 100%; border-radius: 8px; aspect-ratio: 16/10; object-fit: cover; margin-bottom: 0.8rem; }
    .widget p { font-size: 0.93rem; }
    .mini-form input {
      width: 100%;
      padding: 0.7rem 0.9rem;
      border: 1px solid var(--line);
      border-radius: 8px;
      font: inherit;
      margin-bottom: 0.6rem;
    }
    .mini-form .btn { width: 100%; text-align: center; }

    /* Events strip */
    .events-strip {
      background: #fff;
      border-top: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
    }
    .events-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
      gap: 0;
    }
    .event-cell {
      padding: 1.8rem 1.6rem;
      border-right: 1px solid var(--line);
      display: flex;
      flex-direction: column;
      gap: 0.4rem;
    }
    .event-cell:last-child { border-right: none; }
    .event-cell .when { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-deep); }
    .event-cell h3 { font-size: 1.2rem; margin: 0; }
    .event-cell p { font-size: 0.93rem; margin: 0; }
    .event-cell .btn-outline { margin-top: 0.6rem; align-self: flex-start; font-size: 0.85rem; padding: 0.5rem 1rem; color: var(--ink); }

    /* Footer */
    .site-footer {
      background: var(--ink);
      color: #b9b3a4;
      padding: 4rem 0 1.5rem;
      font-size: 0.95rem;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
      gap: 2.4rem;
    }
    .site-footer h4 {
      color: #fff;
      font-family: "Source Sans Pro", "Open Sans", sans-serif;
      font-size: 0.85rem;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      margin-bottom: 1rem;
    }
    .site-footer ul { list-style: none; padding: 0; margin: 0; }
    .site-footer li { margin-bottom: 0.55rem; }
    .site-footer a { color: #d9d3c4; }
    .site-footer a:hover { color: var(--gold); }
    .footer-brand { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 1rem; }
    .footer-brand img { width: 46px; height: 46px; border-radius: 8px; }
    .footer-brand strong { color: #fff; font-family: "Playfair Display", Georgia, serif; font-size: 1.3rem; }
    .socials { display: flex; gap: 0.6rem; margin-top: 1rem; flex-wrap: wrap; }
    .socials a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1px solid #3b4252;
      color: #fff;
      font-weight: 700;
      font-size: 0.85rem;
    }
    .socials a:hover { background: var(--gold); border-color: var(--gold); color: var(--ink); text-decoration: none; }
    .footer-base {
      margin-top: 3rem;
      padding-top: 1.4rem;
      border-top: 1px solid #2c3242;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 1rem;
      font-size: 0.88rem;
    }
    .footer-base nav { display: flex; gap: 1.4rem; flex-wrap: wrap; }

    /* Responsive */
    @media (max-width: 1024px) {
      .hero-inner { grid-template-columns: 1fr; }
      .hero-card { max-width: 480px; }
      .layout { grid-template-columns: 1fr; }
      .sidebar { position: static; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
      .footer-grid { grid-template-columns: 1fr 1fr; }
    }
    @media (max-width: 860px) {
      .spotlight { grid-template-columns: 1fr; }
      .subscribe-band { grid-template-columns: 1fr; padding: 2.2rem; }
      .event-cell { border-right: none; border-bottom: 1px solid var(--line); }
      .event-cell:last-child { border-bottom: none; }
    }
    @media (max-width: 720px) {
      .main-nav ul { gap: 0.9rem; }
      .main-nav a { font-size: 0.88rem; }
      .award-row { grid-template-columns: 1fr; gap: 0.3rem; }
      .search input { min-width: 0; width: 100%; }
      .tool-controls { flex-direction: column; align-items: stretch; }
      .search { width: 100%; }
      .hero-stats { grid-template-columns: 1fr 1fr 1fr; }
      .plans { grid-template-columns: 1fr; }
    }
    @media (max-width: 560px) {
      .footer-grid { grid-template-columns: 1fr; }
      .section { padding: 3.2rem 0; }
      .subscribe-band { padding: 1.6rem; }
    }
  </style>
</head>
<body>

<!-- HEADER -->
<header class="site-header">
  <div class="container topbar">
    <a href="#top" class="brand" aria-label="Marquee &amp; Canvas home">
      <img src="https://placehold.co/104x104/c9962b/1b1f2a/png?text=M%26C&font=playfair%20display" alt="Marquee &amp; Canvas logo" width="52" height="52">
      <div>
        <span class="brand-name">Marquee &amp; Canvas</span>
        <span class="brand-tag">Stories worth staging, screening, and seeing.</span>
      </div>
    </a>
    <nav class="main-nav" aria-label="Primary">
      <ul>
        <li><a href="#news">News</a></li>
        <li><a href="#events">Events</a></li>
        <li><a href="#reviews">Reviews</a></li>
        <li><a href="#talent">Emerging Talent</a></li>
        <li><a href="#spotlight">Spotlights</a></li>
        <li><a href="#awards">Awards</a></li>
        <li><a href="#subscribe" class="btn btn-primary">Subscribe</a></li>
      </ul>
    </nav>
  </div>
</header>

<main id="top">

  <!-- HERO -->
  <section class="hero" aria-labelledby="hero-title">
    <img class="hero-bg" src="https://picsum.photos/1600/900" alt="" aria-hidden="true">
    <div class="container hero-inner">
      <div>
        <span class="eyebrow" style="color:#e9c46a">Arts &amp; Entertainment Journal</span>
        <h1 id="hero-title">Criticism, culture, and the artists <em>shaping tomorrow.</em></h1>
        <p class="lead">Marquee &amp; Canvas is an independent guide to music, film, visual arts, and performing arts. We review the work that matters, introduce the voices you will be hearing about next, and help you find the live experiences worth your evening.</p>
        <div class="hero-actions">
          <a href="#reviews" class="btn btn-primary">Explore Reviews</a>
          <a href="#events" class="btn btn-light">Buy Tickets</a>
        </div>
        <div class="hero-stats">
          <div><strong>1,200+</strong><span>Critic-led reviews</span></div>
          <div><strong>340</strong><span>Emerging artists profiled</span></div>
          <div><strong>85K</strong><span>Monthly readers</span></div>
        </div>
      </div>
      <aside class="hero-card" aria-label="Featured story">
        <img src="https://picsum.photos/800/500" alt="Stage lights illuminating a performer during a live concert" width="800" height="500">
        <span class="tag">Cover Story</span>
        <h3>Inside the Quiet Revolution of Chamber Pop</h3>
        <p>How a small ensemble of Lisbon-based musicians rebuilt the album from the ground up, one overdub at a time.</p>
      </aside>
    </div>
  </section>

  <div class="container layout">

    <!-- MAIN CONTENT -->
    <div class="main-col">

      <!-- NEWS -->
      <section id="news" aria-labelledby="news-title">
        <div class="section-head">
          <span class="eyebrow">Latest from the Industry</span>
          <h2 id="news-title">News That Moves the Arts Forward</h2>
          <p>From festival programming announcements to shifts in arts funding and gallery acquisitions, our newsroom tracks the developments that shape creative careers. Each story is reported, fact-checked, and placed in context so you understand not just what happened, but why it matters.</p>
        </div>
        <div class="feature-grid">
          <article class="card">
            <img src="https://picsum.photos/800/600" alt="Empty theatre seats under warm house lights" width="800" height="600">
            <div class="card-body">
              <span class="tag">Funding</span>
              <h3>Regional Arts Councils Expand Touring Grants</h3>
              <p>Three state arts councils have announced a combined increase in touring support, giving mid-sized companies new ways to reach audiences beyond their home cities.</p>
              <a href="#news" class="text-link">Read the story</a>
            </div>
          </article>
          <article class="card">
            <img src="https://picsum.photos/800/601" alt="Art gallery wall with framed contemporary paintings" width="800" height="600">
            <div class="card-body">
              <span class="tag">Visual Arts</span>
              <h3>Museum Acquires Major Installation by Emerging Sculptor</h3>
              <p>The acquisition marks the first time a national collection has commissioned a permanent work from an artist under thirty-five through a juried open call.</p>
              <a href="#news" class="text-link">Read the story</a>
            </div>
          </article>
          <article class="card">
            <img src="https://picsum.photos/800/602" alt="Film set with a camera rig and crew" width="800" height="600">
            <div class="card-body">
              <span class="tag">Film</span>
              <h3>Independent Studios Turn to Hybrid Releases</h3>
              <p>A growing number of distributors are pairing limited theatrical runs with same-week streaming, reshaping how small films find their first audiences.</p>
              <a href="#news" class="text-link">Read the story</a>
            </div>
          </article>
        </div>
      </section>

      <!-- EVENTS STRIP -->
      <section id="events" class="events-strip" aria-labelledby="events-title" style="margin-top:4.5rem">
        <div class="container" style="padding-top:2.4rem;padding-bottom:0">
          <div class="section-head" style="margin-bottom:1.6rem">
            <span class="eyebrow">Upcoming Events</span>
            <h2 id="events-title" style="font-size:1.9rem">This Season on Our Calendar</h2>
          </div>
        </div>
        <div class="container" style="padding:0">
          <div class="events-grid">
            <div class="event-cell">
              <span class="when">Oct 12 &middot; Symphony Hall</span>
              <h3>Lumen: An Evening of Premiere Works</h3>
              <p>Three new commissions for string orchestra and live electronics, staged in the round.</p>
              <a href="#events" class="btn btn-outline">Buy Tickets</a>
            </div>
            <div class="event-cell">
              <span class="when">Oct 19 &middot; Riverside Gallery</span>
              <h3>Material Memory Opening Night</h3>
              <p>A group exhibition exploring textile, archive, and labor across six emerging studios.</p>
              <a href="#events" class="btn btn-outline">Reserve a Spot</a>
            </div>
            <div class="event-cell">
              <span class="when">Nov 2 &middot; Lyric Theatre</span>
              <h3>The Last Matinee</h3>
              <p>A revival of a contemporary two-hander, directed with a minimalist staging that centers the text.</p>
              <a href="#events" class="btn btn-outline">Buy Tickets</a>
            </div>
          </div>
        </div>
      </section>

      <!-- EMERGING TALENT -->
      <section id="talent" aria-labelledby="talent-title">
        <div class="section-head">
          <span class="eyebrow">Emerging Talent</span>
          <h2 id="talent-title">The Artists to Watch This Year</h2>
          <p>Every spring our editors scout festivals, showcases, and open studios for artists who are doing something distinctive before the rest of the industry catches on. The three profiles below were selected from more than 600 nominations for their originality, technical command, and clear point of view.</p>
        </div>
        <div class="feature-grid">
          <article class="card">
            <img src="https://placehold.co/800x600/1b1f2a/c9962b?text=Nadia+Okafor&font=playfair+display" alt="Placeholder portrait for Nadia Okafor, jazz vocalist" width="800" height="600">
            <div class="card-body">
              <span class="tag">Music &middot; Jazz Vocals</span>
              <h3>Nadia Okafor</h3>
              <p>A vocalist and composer whose debut EP layers field recordings from Lagos and Lisbon over spare piano voicings. Critics have praised her restraint and her ability to make silence feel like part of the arrangement.</p>
              <a href="#spotlight" class="text-link">Explore her profile</a>
            </div>
          </article>
          <article class="card">
            <img src="https://placehold.co/800x600/6e1f2e/f5efe2?text=Theo+Marsh&font=playfair+display" alt="Placeholder portrait for Theo Marsh, documentary filmmaker" width="800" height="600">
            <div class="card-body">
              <span class="tag">Film &middot; Documentary</span>
              <h3>Theo Marsh</h3>
              <p>His first feature, shot over four years on a single 16mm camera, follows a family of ferry operators through a decade of coastal change. It premiered to standing ovations and secured a distribution deal within weeks.</p>
              <a href="#spotlight" class="text-link">Explore his profile</a>
            </div>
          </article>
          <article class="card">
            <img src="https://placehold.co/800x600/3a4153/c9962b?text=Priya+Anand&font=playfair+display" alt="Placeholder portrait for Priya Anand, mixed media painter" width="800" height="600">
            <div class="card-body">
              <span class="tag">Visual Arts &middot; Painting</span>
              <h3>Priya Anand</h3>
              <p>Working in layered oil and encaustic, Anand builds canvases that record the process of repair, sanding back earlier marks until the history of the surface becomes its subject.</p>
              <a href="#spotlight" class="text-link">Explore her profile</a>
            </div>
          </article>
        </div>
      </section>

      <!-- ARTIST SPOTLIGHT -->
      <section id="spotlight" aria-labelledby="spotlight-title">
        <div class="section-head">
          <span class="eyebrow">Artist Spotlight</span>
          <h2 id="spotlight-title">Long-Form Portrait: Building a Body of Work</h2>
        </div>
        <article class="spotlight">
          <img src="https://picsum.photos/640/800" alt="Dancer in mid-movement on a dimly lit stage" width="640" height="800">
          <div>
            <span class="tag">Performing Arts &middot; Choreography</span>
            <h3 style="font-size:1.8rem">Rehearsing the Unseen: A Conversation with Marisol Vance</h3>
            <div class="spotlight-meta">
              <span>12 min read</span>
              <span>Feature</span>
              <span>Published this week</span>
            </div>
            <p>Marisol Vance has spent the last decade making work that resists easy description. Her company's latest production, which premiered in a converted rail depot, begins with thirty minutes of near-stillness before the first full phrase of movement appears. Audiences often arrive expecting spectacle and leave talking about breath.</p>
            <blockquote>"The stage is not where the dance begins. It is where we stop pretending the rehearsal room was private."</blockquote>
            <p>Vance credits her early years as a dramaturg with teaching her to treat every rehearsal as a site of inquiry. Her process begins with a question rather than a score: what does a body remember when it is asked to stop? Over several months, she and her ensemble map those answers into a vocabulary of gesture that can be staged, lit, and eventually performed.</p>
            <p>That approach raises practical challenges. Touring a work built on near-stillness requires careful negotiation with venues about sightlines, acoustics, and audience etiquette. Vance has also worked with lighting designers to build cues that respond to breath rather than the beat of a count.</p>
            <div class="byline">
              <img src="https://i.pravatar.cc/120?u=ellis-brandt-editor" alt="Portrait of interviewer Ellis Brandt" width="48" height="48">
              <div>
                <strong>Ellis Brandt</strong>
                <span>Senior Critic, Performing Arts</span>
              </div>
            </div>
            <p style="margin-top:1.2rem"><a href="#subscribe" class="btn btn-primary">Subscribe to Read More</a></p>
          </div>
        </article>
      </section>

      <!-- REVIEW AGGREGATOR (INTERACTIVE) -->
      <section id="reviews" aria-labelledby="reviews-title">
        <div class="section-head">
          <span class="eyebrow">Critic Reviews</span>
          <h2 id="reviews-title">The Review Index</h2>
          <p>Our critics evaluate every production, record, exhibition, and screening against a consistent rubric covering craft, concept, execution, and impact. Scores are a summary, not the story. Use the filters below to browse by discipline, or search by title, artist, or venue, and read the verdict behind each rating.</p>
        </div>

        <div class="reviews-tool" role="region" aria-label="Review aggregator">
          <div class="tool-controls">
            <div class="chips" role="group" aria-label="Filter by discipline">
              <button class="chip" type="button" data-filter="all" aria-pressed="true">All Disciplines</button>
              <button class="chip" type="button" data-filter="music" aria-pressed="false">Music</button>
              <button class="chip" type="button" data-filter="film" aria-pressed="false">Film</button>
              <button class="chip" type="button" data-filter="visual" aria-pressed="false">Visual Arts</button>
              <button class="chip" type="button" data-filter="performing" aria-pressed="false">Performing Arts</button>
            </div>
            <div class="search">
              <label for="review-search" class="sr-only" style="position:absolute;left:-9999px">Search reviews</label>
              <input id="review-search" type="search" placeholder="Search titles, artists, venues">
            </div>
          </div>

          <div class="review-grid" id="review-grid">
            <article class="review" data-discipline="music" data-title="Glass Harbor Tapes Album review">
              <span class="tag">Music &middot; Album</span>
              <h4>Glass Harbor</h4>
              <div class="creator">Tapes &middot; Ensemble Rivera</div>
              <div class="score"><span class="score-badge">8.7</span><span class="stars" aria-label="4.5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#189;</span></div>
              <p>Carefully sequenced and unhurried, the record rewards headphones and patience. Its strongest moments arrive when the strings drop away and a single detuned synth holds the room.</p>
              <div class="verdict">Verdict: A quietly ambitious debut.</div>
            </article>

            <article class="review" data-discipline="film" data-title="The Ferryman's Daughter Film review">
              <span class="tag">Film &middot; Feature</span>
              <h4>The Ferryman's Daughter</h4>
              <div class="creator">Dir. Theo Marsh</div>
              <div class="score"><span class="score-badge">9.1</span><span class="stars" aria-label="5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9733;</span></div>
              <p>Shot on 16mm with a patience that borders on austerity, the film never mistakes slowness for depth. Every long take earns its runtime through character and geography.</p>
              <div class="verdict">Verdict: Essential viewing for documentary fans.</div>
            </article>

            <article class="review" data-discipline="visual" data-title="Material Memory Exhibition review">
              <span class="tag">Visual Arts &middot; Exhibition</span>
              <h4>Material Memory</h4>
              <div class="creator">Riverside Gallery &middot; Group show</div>
              <div class="score"><span class="score-badge">7.9</span><span class="stars" aria-label="4 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9734;</span></div>
              <p>The curation is sharp, pairing a loom-woven archive with a corroded steel installation. A few works feel underdeveloped, but the show's central argument about labor holds together.</p>
              <div class="verdict">Verdict: Uneven but absorbing.</div>
            </article>

            <article class="review" data-discipline="performing" data-title="The Last Matinee Theatre review">
              <span class="tag">Performing Arts &middot; Theatre</span>
              <h4>The Last Matinee</h4>
              <div class="creator">Lyric Theatre &middot; Dir. Samuel Oduya</div>
              <div class="score"><span class="score-badge">8.4</span><span class="stars" aria-label="4 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#9734;</span></div>
              <p>Oduya's staging strips the production to its essentials: two chairs, a single practical lamp, and a text that carries its own weight. The actors hold the silences with confidence.</p>
              <div class="verdict">Verdict: A confident revival that trusts its script.</div>
            </article>

            <article class="review" data-discipline="music" data-title="Northline Live Concert review">
              <span class="tag">Music &middot; Live</span>
              <h4>Northline, Live at Mercer Hall</h4>
              <div class="creator">Northline Collective</div>
              <div class="score"><span class="score-badge">6.8</span><span class="stars" aria-label="3 out of 5 stars">&#9733;&#9733;&#9733;&#9734;&#9734;</span></div>
              <p>The band's studio precision did not fully survive the room's reverb. The second set, however, found its footing with a rearranged version of the title track that deserves a recording.</p>
              <div class="verdict">Verdict: Strong set, rough sound.</div>
            </article>

            <article class="review" data-discipline="film" data-title="Paper Lanterns Film review">
              <span class="tag">Film &middot; Short</span>
              <h4>Paper Lanterns</h4>
              <div class="creator">Dir. Keiko Mori</div>
              <div class="score"><span class="score-badge">8.9</span><span class="stars" aria-label="4.5 out of 5 stars">&#9733;&#9733;&#9733;&#9733;&#189;</span></div>
              <p>In under twenty minutes, Mori constructs a complete emotional arc using only sound design, color grading, and a handful of carefully placed reflections. It is a short film with the discipline of a feature.</p>
              <div class="verdict">Verdict: Brief, precise, and unforgettable.</div>
            </article>
          </div>

          <div class="empty-state" id="empty-state">No reviews match those filters yet. Try a different discipline or clear your search.</div>

          <div class="tool-foot">
            <span id="result-count">Showing 6 of 6 reviews</span>
            <a href="#subscribe" class="text-link">Get weekly reviews by email</a>
          </div>
        </div>
      </section>

      <!-- AWARDS -->
      <section id="awards" aria-labelledby="awards-title">
        <div class="section-head">
          <span class="eyebrow">Award Winners</span>
          <h2 id="awards-title">Recognizing Excellence Across the Arts</h2>
          <p>Our annual Marquee Awards honor work that pushes its form forward. Winners are chosen by a rotating jury of practicing artists, critics, and curators, and each category is judged on the strength of its concept, its execution, and the way it changes the conversation around its discipline.</p>
        </div>
        <div class="awards-list">
          <div class="award-row">
            <div class="award-year">2024</div>
            <div class="award-cat">Best Original Score</div>
            <div class="award-winner">Glass Harbor Tapes<span>Ensemble Rivera, for the album Glass Harbor</span></div>
          </div>
          <div class="award-row">
            <div class="award-year">2024</div>
            <div class="award-cat">Best Documentary Feature</div>
            <div class="award-winner">The Ferryman's Daughter<span>Dir. Theo Marsh</span></div>
          </div>
          <div class="award-row">
            <div class="award-year">2024</div>
            <div class="award-cat">Outstanding Stage Direction</div>
            <div class="award-winner">The Last Matinee<span>Samuel Oduya, Lyric Theatre</span></div>
          </div>
          <div class="award-row">
            <div class="award-year">2024</div>
            <div class="award-cat">Emerging Visual Artist</div>
            <div class="award-winner">Priya Anand<span>For the series Repair Marks</span></div>
          </div>
        </div>
        <div class="awards-note">
          <a href="#awards" class="btn btn-primary">Explore the Full Archive</a>
          <span style="color:var(--muted);font-size:0.95rem">Nominations for the next cycle open in January.</span>
        </div>
      </section>

      <!-- TESTIMONIALS -->
      <section aria-labelledby="testimonials-title">
        <div class="section-head">
          <span class="eyebrow">Reader Voices</span>
          <h2 id="testimonials-title">Why Our Readers Keep Coming Back</h2>
        </div>
        <div class="testimonials">
          <figure class="testimonial" style="margin:0">
            <p>I used to read reviews after I had already bought the ticket. Marquee &amp; Canvas helped me discover a string quartet and two galleries I now visit every month.</p>
            <figcaption class="byline">
              <img src="https://i.pravatar.cc/120?u=reader-amara" alt="" width="48" height="48">
              <div><strong>Amara Lewis</strong><span>Subscriber since 2021</span></div>
            </figcaption>
          </figure>
          <figure class="testimonial" style="margin:0">
            <p>As a working playwright, the critiques here are the most useful feedback I receive. They are honest, specific about craft, and fair to the artists they cover.</p>
            <figcaption class="byline">
              <img src="https://i.pravatar.cc/120?u=reader-daniel" alt="" width="48" height="48">
              <div><strong>Daniel Reyes</strong><span>Playwright and member</span></div>
            </figcaption>
          </figure>
          <figure class="testimonial" style="margin:0">
            <p>The Emerging Talent profiles introduced me to my favorite filmmaker of the year. The interviews go deeper than the usual press kit and tell you how the work was made.</p>
            <figcaption class="byline">
              <img src="https://i.pravatar.cc/120?u=reader-june" alt="" width="48" height="48">
              <div><strong>June Park</strong><span>Film programmer</span></div>
            </figcaption>
          </figure>
        </div>
      </section>

      <!-- FAQ -->
      <section aria-labelledby="faq-title">
        <div class="section-head">
          <span class="eyebrow">Questions</span>
          <h2 id="faq-title">Frequently Asked Questions</h2>
          <p>New to Marquee &amp; Canvas? Here are answers to the questions we hear most often from readers, artists, and venues.</p>
        </div>
        <div class="faq">
          <details open>
            <summary>How are reviews scored?</summary>
            <div class="answer">
              <p>Each critic scores a work on a ten-point scale that weighs four criteria equally: craft, concept, execution, and impact. A score is the average of those four judgments, and every review explains the reasoning behind it.</p>
            </div>
          </details>
          <details>
            <summary>Are critics paid by the artists or venues they review?</summary>
            <div class="answer">
              <p>No. Our editorial team is funded entirely by reader subscriptions and a small number of grants from arts foundations. We do not accept payment for coverage, and we disclose any personal relationship a critic has with a subject.</p>
            </div>
          </details>
          <details>
            <summary>Can artists submit work for consideration?</summary>
            <div class="answer">
              <p>Yes. Artists can submit recordings, screeners, exhibition proposals, or production links through our talent portal. Our scouting team reviews submissions each month, and selected artists may be profiled in our Emerging Talent feature.</p>
            </div>
          </details>
          <details>
            <summary>Do subscribers receive ticket discounts?</summary>
            <div class="answer">
              <p>Subscribers receive early access to presale windows for partner venues and a monthly discount code for select events listed in our calendar. Discount terms vary by venue and are shown at checkout.</p>
            </div>
          </details>
        </div>
      </section>

      <!-- SUBSCRIBE CTA -->
      <section id="subscribe" aria-labelledby="subscribe-title" style="margin-top:4.5rem">
        <div class="subscribe-band">
          <div>
            <span class="eyebrow" style="color:#e9c46a">Subscribe</span>
            <h2 id="subscribe-title">Get the Week in Culture Delivered Every Friday</h2>
            <p>Join more than 85,000 readers who receive our reviews, artist interviews, and curated picks for the week ahead. Subscribers also get early access to presale tickets and our members-only archive of critic essays.</p>
            <div class="plans">
              <div class="plan"><strong>Free Weekly</strong>Friday newsletter with top reviews and events.</div>
              <div class="plan"><strong>Member &middot; $6/mo</strong>Full archive, presale access, and discount codes.</div>
            </div>
          </div>
          <div>
            <form class="subscribe-form" action="#" method="post" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Thanks, you are in!';">
              <label for="sub-email" class="sr-only" style="position:absolute;left:-9999px">Email address</label>
              <input id="sub-email" type="email" placeholder="Your email address" required>
              <button class="btn btn-primary" type="submit">Subscribe</button>
            </form>
            <p class="form-note">No spam. Unsubscribe at any time. By subscribing you agree to our Privacy Policy.</p>
          </div>
        </div>
      </section>

    </div>

    <!-- SIDEBAR -->
    <aside class="sidebar" aria-label="Sidebar">
      <section class="widget">
        <h3>Editor's Choice</h3>
        <ul>
          <li class="pick">
            <img src="https://picsum.photos/200/200" alt="Abstract painting detail in deep blue" width="74" height="74">
            <div><strong>Tidewater Sessions</strong><span>Visual Arts &middot; Kessler Annex</span></div>
          </li>
          <li class="pick">
            <img src="https://picsum.photos/201/201" alt="Close-up of a violin bow on strings" width="74" height="74">
            <div><strong>Chamber of Echoes</strong><span>Music &middot; Live recording</span></div>
          </li>
          <li class="pick">
            <img src="https://picsum.photos/202/202" alt="Movie theater seats in a dim auditorium" width="74" height="74">
            <div><strong>Night Ferry</strong><span>Film &middot; Limited run</span></div>
          </li>
        </ul>
      </section>

      <section class="widget">
        <h3>This Week's Shows</h3>
        <ul>
          <li class="show-item">
            <div class="date-block"><b>14</b><small>Oct</small></div>
            <div><strong>Sweet Hour Opera Gala</strong><span>Civic Opera House &middot; 7:30 PM</span></div>
          </li>
          <li class="show-item">
            <div class="date-block"><b>16</b><small>Oct</small></div>
            <div><strong>Shadow Play Dance Festival</strong><span>Lantern Theatre &middot; 8:00 PM</span></div>
          </li>
          <li class="show-item">
            <div class="date-block"><b>18</b><small>Oct</small></div>
            <div><strong>Modern Canvas Walkthrough</strong><span>Riverside Gallery &middot; 6:00 PM</span></div>
          </li>
        </ul>
        <a href="#events" class="btn btn-outline widget-cta">View Full Calendar</a>
      </section>

      <section class="widget">
        <h3>Artist Interview</h3>
        <img class="interview-img" src="https://picsum.photos/640/400" alt="Musician seated at a piano in a warm-lit studio" width="640" height="400">
        <strong style="display:block;color:var(--ink);margin-bottom:0.3rem">Q&amp;A: Nadia Okafor on Silence as Arrangement</strong>
        <p>On recording her debut EP, the role of restraint, and why she leaves the last note of every track unresolved.</p>
        <a href="#talent" class="text-link">Read the interview</a>
      </section>

      <section class="widget">
        <h3>Quick Picks Newsletter</h3>
        <p>Get five critic picks every Friday, straight to your inbox.</p>
        <form class="mini-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='Subscribed';">
          <label for="side-email" class="sr-only" style="position:absolute;left:-9999px">Email</label>
          <input id="side-email" type="email" placeholder="Email address" required>
          <button class="btn btn-primary" type="submit">Subscribe</button>
        </form>
      </section>
    </aside>

  </div>
</main>

<!-- FOOTER -->
<footer class="site-footer">
  <div class="container">
    <div class="footer-grid">
      <div>
        <div class="footer-brand">
          <img src="https://placehold.co/92x92/c9962b/1b1f2a/png?text=M%26C&font=playfair%20display" alt="Marquee &amp; Canvas logo" width="46" height="46">
          <strong>Marquee &amp; Canvas</strong>
        </div>
        <p style="color:#b9b3a4">An independent journal of music, film, visual arts, and performing arts. Criticism and reporting for artists, audiences, and the people who make culture possible.</p>
        <div class="socials" aria-label="Social media">
          <a href="#top" aria-label="Instagram">IG</a>
          <a href="#top" aria-label="X (Twitter)">X</a>
          <a href="#top" aria-label="YouTube">YT</a>
          <a href="#top" aria-label="Facebook">FB</a>
          <a href="#top" aria-label="Substack">SS</a>
        </div>
      </div>
      <div>
        <h4>Explore</h4>
        <ul>
          <li><a href="#news">News</a></li>
          <li><a href="#events">Events Calendar</a></li>
          <li><a href="#reviews">Critic Reviews</a></li>
          <li><a href="#talent">Emerging Talent</a></li>
          <li><a href="#spotlight">Artist Spotlights</a></li>
          <li><a href="#awards">Award Winners</a></li>
        </ul>
      </div>
      <div>
        <h4>Company</h4>
        <ul>
          <li><a href="#top">About the Journal</a></li>
          <li><a href="#top">Editorial Standards</a></li>
          <li><a href="#top">Submit Your Work</a></li>
          <li><a href="#top">Advertising</a></li>
          <li><a href="#subscribe">Subscribe</a></li>
          <li><a href="#top">Careers</a></li>
        </ul>
      </div>
      <div>
        <h4>Contact</h4>
        <ul>
          <li>Marquee &amp; Canvas Media Ltd.</li>
          <li>418 Foundry Row, Suite 3B</li>
          <li>Harbor District, Portland, OR 97209</li>
          <li><a href="mailto:hello@marqueeandcanvas.example">hello@marqueeandcanvas.example</a></li>
          <li><a href="tel:+15035550147">+1 (503) 555-0147</a></li>
          <li>Mon&ndash;Fri, 9:00&ndash;17:30 PT</li>
        </ul>
      </div>
    </div>
    <div class="footer-base">
      <span>&copy; <span id="copyright-year">2025</span> Marquee &amp; Canvas Media Ltd. All rights reserved.</span>
      <nav aria-label="Legal">
        <a href="#top">Privacy Policy</a>
        <a href="#top">Terms of Use</a>
        <a href="#top">Cookie Settings</a>
        <a href="#top">Accessibility</a>
      </nav>
    </div>
  </div>
</footer>

<script>
  // Dynamic copyright year
  document.getElementById('copyright-year').textContent = new Date().getFullYear();

  // Review aggregator filtering
  (function () {
    var chips = document.querySelectorAll('.chip[data-filter]');
    var cards = document.querySelectorAll('#review-grid .review');
    var search = document.getElementById('review-search');
    var empty = document.getElementById('empty-state');
    var count = document.getElementById('result-count');
    var activeFilter = 'all';

    function applyFilters() {
      var query = search.value.trim().toLowerCase();
      var visible = 0;

      cards.forEach(function (card) {
        var matchesDiscipline = activeFilter === 'all' || card.dataset.discipline === activeFilter;
        var haystack = (card.dataset.title + ' ' + card.textContent).toLowerCase();
        var matchesQuery = query === '' || haystack.indexOf(query) !== -1;
        var show = matchesDiscipline && matchesQuery;
        card.hidden = !show;
        if (show) visible++;
      });

      empty.classList.toggle('show', visible === 0);
      count.textContent = 'Showing ' + visible + ' of ' + cards.length + ' reviews';
    }

    chips.forEach(function (chip) {
      chip.addEventListener('click', function () {
        activeFilter = chip.dataset.filter;
        chips.forEach(function (c) { c.setAttribute('aria-pressed', c === chip ? 'true' : 'false'); });
        applyFilters();
      });
    });

    search.addEventListener('input', applyFilters);
  })();
</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-12T10:07:52.091Z",
  "url": "https://benchmark.aimac.invalid/b723fc596304476455113f6b19d304c90976c8078c75a408f895b71a4c042d50.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-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-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-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": "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": "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": []
    },
    {
      "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": "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=\"#top\" class=\"brand\" aria-label=\"Marquee &amp; Canvas home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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=\"#top\" class=\"brand\" aria-label=\"Marquee &amp; Canvas home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"reviews-tool\" role=\"region\" aria-label=\"Review aggregator\">",
          "target": [
            ".reviews-tool"
          ]
        }
      ]
    },
    {
      "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-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": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<img class=\"hero-bg\" src=\"https://picsum.photos/1600/900\" alt=\"\" aria-hidden=\"true\">",
          "target": [
            ".hero-bg"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "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=\"#top\" class=\"brand\" aria-label=\"Marquee &amp; Canvas home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"reviews-tool\" role=\"region\" aria-label=\"Review aggregator\">",
          "target": [
            ".reviews-tool"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"reviews-tool\" role=\"region\" aria-label=\"Review aggregator\">",
          "target": [
            ".reviews-tool"
          ]
        }
      ]
    },
    {
      "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=\"#top\" class=\"brand\" aria-label=\"Marquee &amp; Canvas home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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=\"#top\" class=\"brand\" aria-label=\"Marquee &amp; Canvas home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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": "<span class=\"eyebrow\" style=\"color:#e9c46a\">Arts &amp; Entertainment Journal</span>",
          "target": [
            ".hero-inner > div > .eyebrow"
          ]
        }
      ]
    },
    {
      "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": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"chip\" type=\"button\" data-filter=\"all\" aria-pressed=\"true\">All Disciplines</button>",
          "target": [
            "button[data-filter=\"all\"]"
          ]
        }
      ]
    },
    {
      "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 id=\"hero-title\">Criticism, culture, and the artists <em>shaping tomorrow.</em></h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h3>Inside the Quiet Revolution of Chamber Pop</h3>",
                  "target": [
                    ".hero-card > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"news-title\">News That Moves the Arts Forward</h2>",
                  "target": [
                    "#news-title"
                  ]
                },
                {
                  "html": "<h3>Regional Arts Councils Expand Touring Grants</h3>",
                  "target": [
                    "#news > .feature-grid > .card:nth-child(1) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Museum Acquires Major Installation by Emerging Sculptor</h3>",
                  "target": [
                    "#news > .feature-grid > .card:nth-child(2) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Independent Studios Turn to Hybrid Releases</h3>",
                  "target": [
                    "#news > .feature-grid > .card:nth-child(3) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"events-title\" style=\"font-size:1.9rem\">This Season on Our Calendar</h2>",
                  "target": [
                    "#events-title"
                  ]
                },
                {
                  "html": "<h3>Lumen: An Evening of Premiere Works</h3>",
                  "target": [
                    ".event-cell:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Material Memory Opening Night</h3>",
                  "target": [
                    ".event-cell:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>The Last Matinee</h3>",
                  "target": [
                    ".event-cell:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"talent-title\">The Artists to Watch This Year</h2>",
                  "target": [
                    "#talent-title"
                  ]
                },
                {
                  "html": "<h3>Nadia Okafor</h3>",
                  "target": [
                    "#talent > .feature-grid > .card:nth-child(1) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Theo Marsh</h3>",
                  "target": [
                    "#talent > .feature-grid > .card:nth-child(2) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h3>Priya Anand</h3>",
                  "target": [
                    "#talent > .feature-grid > .card:nth-child(3) > .card-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"spotlight-title\">Long-Form Portrait: Building a Body of Work</h2>",
                  "target": [
                    "#spotlight-title"
                  ]
                },
                {
                  "html": "<h3 style=\"font-size:1.8rem\">Rehearsing the Unseen: A Conversation with Marisol Vance</h3>",
                  "target": [
                    ".spotlight > div > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"reviews-title\">The Review Index</h2>",
                  "target": [
                    "#reviews-title"
                  ]
                },
                {
                  "html": "<h4>Glass Harbor</h4>",
                  "target": [
                    ".review[data-discipline=\"music\"]:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>The Ferryman's Daughter</h4>",
                  "target": [
                    ".review[data-discipline=\"film\"]:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Material Memory</h4>",
                  "target": [
                    "article[data-discipline=\"visual\"] > h4"
                  ]
                },
                {
                  "html": "<h4>The Last Matinee</h4>",
                  "target": [
                    "article[data-discipline=\"performing\"] > h4"
                  ]
                },
                {
                  "html": "<h4>Northline, Live at Mercer Hall</h4>",
                  "target": [
                    "article[data-title=\"Northline Live Concert review\"] > h4"
                  ]
                },
                {
                  "html": "<h4>Paper Lanterns</h4>",
                  "target": [
                    "article[data-title=\"Paper Lanterns Film review\"] > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"awards-title\">Recognizing Excellence Across the Arts</h2>",
                  "target": [
                    "#awards-title"
                  ]
                },
                {
                  "html": "<h2 id=\"testimonials-title\">Why Our Readers Keep Coming Back</h2>",
                  "target": [
                    "#testimonials-title"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">Frequently Asked Questions</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h2 id=\"subscribe-title\">Get the Week in Culture Delivered Every Friday</h2>",
                  "target": [
                    "#subscribe-title"
                  ]
                },
                {
                  "html": "<h3>Editor's Choice</h3>",
                  "target": [
                    ".widget:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>This Week's Shows</h3>",
                  "target": [
                    ".widget:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Artist Interview</h3>",
                  "target": [
                    ".widget:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Quick Picks Newsletter</h3>",
                  "target": [
                    ".widget:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    "div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Company</h4>",
                  "target": [
                    "div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    "div:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "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": "#ffffff",
                "bgColor": "#222530",
                "contrastRatio": 15.26,
                "fontSize": "19.2pt (25.6px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 15.26"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"brand-name\">Marquee &amp; Canvas</span>",
          "target": [
            ".brand-name"
          ]
        }
      ]
    },
    {
      "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": "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": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "hero-title",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<h1 id=\"hero-title\">Criticism, culture, and the artists <em>shaping tomorrow.</em></h1>",
          "target": [
            "#hero-title"
          ]
        }
      ]
    },
    {
      "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": [
                {
                  "html": "<label for=\"review-search\" class=\"sr-only\" style=\"position:absolute;left:-9999px\">Search reviews</label>",
                  "target": [
                    "label[for=\"review-search\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"review-search\" type=\"search\" placeholder=\"Search titles, artists, venues\">",
          "target": [
            "#review-search"
          ]
        }
      ]
    },
    {
      "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/104x104/c9962b/1b1f2a/png?text=M%26C&amp;font=playfair%20display\" alt=\"Marquee &amp; Canvas logo\" width=\"52\" height=\"52\">",
          "target": [
            "img[width=\"52\"]"
          ]
        }
      ]
    },
    {
      "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": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"review-search\" class=\"sr-only\" style=\"position:absolute;left:-9999px\">Search reviews</label>",
                  "target": [
                    "label[for=\"review-search\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "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 id=\"review-search\" type=\"search\" placeholder=\"Search titles, artists, venues\">",
          "target": [
            "#review-search"
          ]
        }
      ]
    },
    {
      "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": "<section class=\"widget\">",
                  "target": [
                    ".widget:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#talent\" class=\"text-link\">Read the interview</a>",
          "target": [
            ".text-link[href$=\"#talent\"]"
          ]
        }
      ]
    },
    {
      "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=\"#top\" class=\"brand\" aria-label=\"Marquee &amp; Canvas home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    },
    {
      "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>",
          "target": [
            ".main-nav > ul"
          ]
        }
      ]
    },
    {
      "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=\"#news\">News</a></li>",
          "target": [
            ".main-nav > ul > 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/104x104/c9962b/1b1f2a/png?text=M%26C&amp;font=playfair%20display\" alt=\"Marquee &amp; Canvas logo\" width=\"52\" height=\"52\">",
          "target": [
            "img[width=\"52\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>How are reviews scored?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "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": 350,
                "height": 55.5
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (350px by 55.5px, 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=\"#top\" class=\"brand\" aria-label=\"Marquee &amp; Canvas home\">",
          "target": [
            ".brand"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "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": {
                "role": null,
                "nodeName": "span",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a span with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<span class=\"stars\" aria-label=\"4.5 out of 5 stars\">\u2605\u2605\u2605\u2605\u00bd</span>",
          "target": [
            ".review[data-discipline=\"music\"]:nth-child(1) > .score > .stars[aria-label=\"4.5 out of 5 stars\"]"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a span with no valid role attribute."
        }
      ]
    },
    {
      "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": {
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\" aria-labelledby=\"hero-title\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\" style=\"color:#e9c46a\">Arts &amp; Entertainment Journal</span>",
          "target": [
            ".hero-inner > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "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": "#e8e2d4",
                "bgColor": "#c9962b",
                "contrastRatio": 2.06,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#subscribe\" class=\"btn btn-primary\">Subscribe</a>",
                  "target": [
                    "li:nth-child(7) > .btn-primary.btn[href$=\"#subscribe\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.06 (foreground color: #e8e2d4, background color: #c9962b, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#subscribe\" class=\"btn btn-primary\">Subscribe</a>",
          "target": [
            "li:nth-child(7) > .btn-primary.btn[href$=\"#subscribe\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.06 (foreground color: #e8e2d4, background color: #c9962b, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#faf7f2",
                "contrastRatio": 3.66,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Latest from the Industry</span>",
          "target": [
            "#news > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Funding</span>",
                  "target": [
                    "#news > .feature-grid > .card:nth-child(1) > .card-body > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Funding</span>",
          "target": [
            "#news > .feature-grid > .card:nth-child(1) > .card-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Visual Arts</span>",
                  "target": [
                    "#news > .feature-grid > .card:nth-child(2) > .card-body > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Visual Arts</span>",
          "target": [
            "#news > .feature-grid > .card:nth-child(2) > .card-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Film</span>",
                  "target": [
                    "#news > .feature-grid > .card:nth-child(3) > .card-body > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Film</span>",
          "target": [
            "#news > .feature-grid > .card:nth-child(3) > .card-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#ffffff",
                "contrastRatio": 3.91,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"events\" class=\"events-strip\" aria-labelledby=\"events-title\" style=\"margin-top:4.5rem\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Upcoming Events</span>",
          "target": [
            ".container:nth-child(1) > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#ffffff",
                "contrastRatio": 3.91,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"events\" class=\"events-strip\" aria-labelledby=\"events-title\" style=\"margin-top:4.5rem\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"when\">Oct 12 \u00b7 Symphony Hall</span>",
          "target": [
            ".event-cell:nth-child(1) > .when"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#ffffff",
                "contrastRatio": 3.91,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"events\" class=\"events-strip\" aria-labelledby=\"events-title\" style=\"margin-top:4.5rem\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"when\">Oct 19 \u00b7 Riverside Gallery</span>",
          "target": [
            ".event-cell:nth-child(2) > .when"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#ffffff",
                "contrastRatio": 3.91,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"events\" class=\"events-strip\" aria-labelledby=\"events-title\" style=\"margin-top:4.5rem\">",
                  "target": [
                    "#events"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"when\">Nov 2 \u00b7 Lyric Theatre</span>",
          "target": [
            ".event-cell:nth-child(3) > .when"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.91 (foreground color: #a37a1d, background color: #ffffff, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#faf7f2",
                "contrastRatio": 3.66,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Emerging Talent</span>",
          "target": [
            "#talent > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Music \u00b7 Jazz Vocals</span>",
                  "target": [
                    "#talent > .feature-grid > .card:nth-child(1) > .card-body > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Music \u00b7 Jazz Vocals</span>",
          "target": [
            "#talent > .feature-grid > .card:nth-child(1) > .card-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Film \u00b7 Documentary</span>",
                  "target": [
                    "#talent > .feature-grid > .card:nth-child(2) > .card-body > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Film \u00b7 Documentary</span>",
          "target": [
            "#talent > .feature-grid > .card:nth-child(2) > .card-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Visual Arts \u00b7 Painting</span>",
                  "target": [
                    "#talent > .feature-grid > .card:nth-child(3) > .card-body > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Visual Arts \u00b7 Painting</span>",
          "target": [
            "#talent > .feature-grid > .card:nth-child(3) > .card-body > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#faf7f2",
                "contrastRatio": 3.66,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Artist Spotlight</span>",
          "target": [
            "#spotlight > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Performing Arts \u00b7 Choreography</span>",
                  "target": [
                    ".spotlight > div > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Performing Arts \u00b7 Choreography</span>",
          "target": [
            ".spotlight > div > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#faf7f2",
                "contrastRatio": 3.66,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Critic Reviews</span>",
          "target": [
            "#reviews > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Music \u00b7 Album</span>",
                  "target": [
                    ".review[data-discipline=\"music\"]:nth-child(1) > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Music \u00b7 Album</span>",
          "target": [
            ".review[data-discipline=\"music\"]:nth-child(1) > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9962b",
                "bgColor": "#fffdf9",
                "contrastRatio": 2.62,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"review\" data-discipline=\"music\" data-title=\"Glass Harbor Tapes Album review\">",
                  "target": [
                    ".review[data-discipline=\"music\"]:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.62 (foreground color: #c9962b, background color: #fffdf9, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"stars\" aria-label=\"4.5 out of 5 stars\">\u2605\u2605\u2605\u2605\u00bd</span>",
          "target": [
            ".review[data-discipline=\"music\"]:nth-child(1) > .score > .stars[aria-label=\"4.5 out of 5 stars\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.62 (foreground color: #c9962b, background color: #fffdf9, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Film \u00b7 Feature</span>",
                  "target": [
                    ".review[data-discipline=\"film\"]:nth-child(2) > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Film \u00b7 Feature</span>",
          "target": [
            ".review[data-discipline=\"film\"]:nth-child(2) > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Visual Arts \u00b7 Exhibition</span>",
                  "target": [
                    "article[data-discipline=\"visual\"] > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Visual Arts \u00b7 Exhibition</span>",
          "target": [
            "article[data-discipline=\"visual\"] > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Performing Arts \u00b7 Theatre</span>",
                  "target": [
                    "article[data-discipline=\"performing\"] > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Performing Arts \u00b7 Theatre</span>",
          "target": [
            "article[data-discipline=\"performing\"] > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Music \u00b7 Live</span>",
                  "target": [
                    "article[data-title=\"Northline Live Concert review\"] > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Music \u00b7 Live</span>",
          "target": [
            "article[data-title=\"Northline Live Concert review\"] > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#f3ead6",
                "contrastRatio": 3.27,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tag\">Film \u00b7 Short</span>",
                  "target": [
                    "article[data-title=\"Paper Lanterns Film review\"] > .tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tag\">Film \u00b7 Short</span>",
          "target": [
            "article[data-title=\"Paper Lanterns Film review\"] > .tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.27 (foreground color: #a37a1d, background color: #f3ead6, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9962b",
                "bgColor": "#fffdf9",
                "contrastRatio": 2.62,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"review\" data-discipline=\"film\" data-title=\"Paper Lanterns Film review\">",
                  "target": [
                    "article[data-title=\"Paper Lanterns Film review\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.62 (foreground color: #c9962b, background color: #fffdf9, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"stars\" aria-label=\"4.5 out of 5 stars\">\u2605\u2605\u2605\u2605\u00bd</span>",
          "target": [
            "article[data-title=\"Paper Lanterns Film review\"] > .score > .stars[aria-label=\"4.5 out of 5 stars\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.62 (foreground color: #c9962b, background color: #fffdf9, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#faf7f2",
                "contrastRatio": 3.66,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Award Winners</span>",
          "target": [
            "#awards > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#faf7f2",
                "contrastRatio": 3.66,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Reader Voices</span>",
          "target": [
            "section[aria-labelledby=\"testimonials-title\"] > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a37a1d",
                "bgColor": "#faf7f2",
                "contrastRatio": 3.66,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"eyebrow\">Questions</span>",
          "target": [
            "section[aria-labelledby=\"faq-title\"] > .section-head > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.66 (foreground color: #a37a1d, background color: #faf7f2, font size: 9.6pt (12.8px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 10068
      },
      {
        "y": 576,
        "height": 10068
      },
      {
        "y": 1152,
        "height": 10068
      },
      {
        "y": 1728,
        "height": 10068
      },
      {
        "y": 2304,
        "height": 10068
      },
      {
        "y": 2880,
        "height": 10068
      },
      {
        "y": 3456,
        "height": 10068
      },
      {
        "y": 4032,
        "height": 10068
      },
      {
        "y": 4608,
        "height": 10068
      },
      {
        "y": 5184,
        "height": 10068
      },
      {
        "y": 5760,
        "height": 10068
      },
      {
        "y": 6336,
        "height": 10068
      },
      {
        "y": 6912,
        "height": 10068
      },
      {
        "y": 7488,
        "height": 10068
      },
      {
        "y": 8064,
        "height": 10068
      },
      {
        "y": 8640,
        "height": 10068
      },
      {
        "y": 9216,
        "height": 10068
      },
      {
        "y": 9348,
        "height": 10068
      }
    ],
    "scans": 19,
    "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: "News", "Subscribe", "Events".
-   **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", "Artist Spotlights", "Award Winners".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "commission", "staging", "critique".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Subscribe", "Buy Tickets", "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: "review aggregator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "editor's choice", "this week's shows", "artist interviews".
-   **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.