SpaceXAI Grok 4.7 – Arts and Entertainment

via xAI · Generated

  • AIMAC Debt 0.00
  • Cost $0.06
  • Total Violations 0
  • HTML Size 29 KB
  • Em Dashes 7

Screenshot

View SpaceXAI Grok 4.7 Arts and Entertainment page View Live Page

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>Aureole | Culture, Stage &amp; Screen</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,650&family=Outfit:wght@300;400;500;600&display=swap" rel="stylesheet">
<style>
:root {
  --ink: #14110e;
  --paper: #f6f1e8;
  --cream: #efe6d6;
  --gold: #b8894a;
  --gold-soft: #e8d3ae;
  --wine: #7a2e3a;
  --sage: #3d5348;
  --muted: #6d645b;
  --line: rgba(20,17,14,.12);
  --shadow: 0 18px 50px rgba(20,17,14,.12);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Outfit", sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.65;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: "Fraunces", serif; font-weight: 500; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 .5em; }
p { margin: 0 0 1em; }
.wrap { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.eyebrow {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-size: .72rem;
  font-weight: 600;
  color: var(--wine);
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  border: none;
  cursor: pointer;
  padding: .85rem 1.25rem;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 600;
  letter-spacing: .02em;
  transition: transform .2s ease, background .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #1a140c; }
.btn-gold:hover { background: #c99755; }
.btn-ink { background: var(--ink); color: var(--paper); }
.btn-ghost { background: transparent; border: 1px solid var(--ink); color: var(--ink); }
header {
  position: sticky; top: 0; z-index: 40;
  background: rgba(246,241,232,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: .85rem 0;
}
.brand { display: flex; align-items: center; gap: .75rem; }
.brand img { width: 46px; height: 46px; border-radius: 12px; object-fit: cover; }
.brand strong { display: block; font-family: "Fraunces", serif; font-size: 1.25rem; }
.brand span { display: block; font-size: .75rem; color: var(--muted); max-width: 240px; line-height: 1.3; }
.nav-links { display: flex; gap: 1.15rem; align-items: center; font-size: .95rem; font-weight: 500; }
.nav-links a { position: relative; }
.nav-links a:hover { color: var(--wine); }
.menu-btn { display: none; background: none; border: 1px solid var(--line); border-radius: 10px; padding: .45rem .7rem; font: inherit; }
.hero {
  display: grid; grid-template-columns: 1.1fr .9fr; gap: 3rem;
  padding: 4.5rem 0 3.5rem; align-items: center;
}
.hero h1 { font-size: clamp(2.6rem, 5vw, 4.6rem); margin: .35em 0 .3em; }
.hero p.lead { font-size: 1.15rem; color: #3a342e; max-width: 58ch; }
.hero-actions { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: 1.4rem; }
.hero-visual { position: relative; }
.hero-visual img { width: 100%; height: 520px; object-fit: cover; border-radius: 28px; }
.badge {
  position: absolute; left: -18px; bottom: 28px;
  background: #fffdf8; padding: 1rem 1.1rem; border-radius: 16px;
  box-shadow: var(--shadow); width: 220px;
}
.badge small { color: var(--muted); display: block; }
.stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  padding-bottom: 3rem;
}
.stat { background: #fffdf8; border: 1px solid var(--line); border-radius: 16px; padding: 1.1rem 1.2rem; }
.stat b { display: block; font-family: "Fraunces", serif; font-size: 1.7rem; }
.stat span { color: var(--muted); font-size: .9rem; }
section { padding: 3.5rem 0; }
.section-head { display: flex; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: 1.6rem; }
.section-head p { max-width: 52ch; color: #3f3832; margin: 0; }
.shows { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 1rem; }
.show {
  background: #fffdf8; border-radius: 22px; overflow: hidden; border: 1px solid var(--line);
  display: flex; flex-direction: column;
}
.show img { height: 220px; width: 100%; object-fit: cover; }
.show.feature img { height: 320px; }
.show-body { padding: 1.15rem 1.2rem 1.3rem; }
.show .meta { color: var(--wine); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }
.layout { display: grid; grid-template-columns: 1fr 320px; gap: 2rem; }
.news-list { display: grid; gap: 1.1rem; }
.news-card {
  display: grid; grid-template-columns: 180px 1fr; gap: 1rem;
  background: #fffdf8; border: 1px solid var(--line); border-radius: 18px; overflow: hidden;
}
.news-card img { height: 100%; min-height: 150px; object-fit: cover; }
.news-card div { padding: 1rem 1rem 1rem 0; }
.sidebar { display: flex; flex-direction: column; gap: 1rem; }
.panel { background: var(--ink); color: var(--paper); border-radius: 20px; padding: 1.2rem; }
.panel.light { background: #fffdf8; color: var(--ink); border: 1px solid var(--line); }
.panel h3 { font-size: 1.25rem; }
.panel li { margin: .55rem 0; list-style: none; }
.panel ul { padding: 0; margin: 0; }
.panel a:hover { color: var(--gold-soft); }
.winners { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.winner { background: #fffdf8; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.winner img { height: 240px; width: 100%; object-fit: cover; }
.winner div { padding: 1.1rem 1.15rem 1.3rem; }
.ribbon { display: inline-block; background: var(--gold-soft); color: #3d2b12; font-size: .75rem; font-weight: 600; padding: .2rem .55rem; border-radius: 999px; }
.directory { background: #fffdf8; border: 1px solid var(--line); border-radius: 24px; padding: 1.3rem; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.filters button, .search {
  border: 1px solid var(--line); background: var(--paper); border-radius: 999px;
  padding: .5rem .9rem; font: inherit; cursor: pointer;
}
.filters button.active { background: var(--ink); color: var(--paper); }
.search { border-radius: 12px; min-width: 220px; }
.artists { display: grid; grid-template-columns: repeat(3, 1fr); gap: .9rem; }
.artist {
  display: grid; grid-template-columns: 72px 1fr; gap: .8rem; align-items: center;
  padding: .8rem; border-radius: 16px; border: 1px solid var(--line); background: var(--paper);
}
.artist img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; }
.artist small { color: var(--muted); }
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.quote { background: #fffdf8; border-radius: 20px; padding: 1.3rem; border: 1px solid var(--line); }
.quote img { width: 48px; height: 48px; border-radius: 50%; }
.quote footer { display: flex; gap: .7rem; align-items: center; margin-top: 1rem; }
.faq details { background: #fffdf8; border: 1px solid var(--line); border-radius: 14px; padding: .9rem 1rem; margin-bottom: .6rem; }
.faq summary { cursor: pointer; font-weight: 600; }
.cta-band {
  background: linear-gradient(135deg, #2a211b, #7a2e3a);
  color: var(--paper); border-radius: 28px; padding: 2.4rem;
  display: grid; grid-template-columns: 1.3fr .7fr; gap: 1.5rem; align-items: center;
}
.cta-band form { display: flex; gap: .5rem; flex-wrap: wrap; }
.cta-band input { flex: 1; min-width: 180px; border: none; border-radius: 999px; padding: .85rem 1rem; font: inherit; }
footer { background: #100e0c; color: #e8e0d4; padding: 3rem 0 1.4rem; margin-top: 3rem; }
.foot-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 1.5rem; }
footer a { color: #e8e0d4; }
footer a:hover { color: var(--gold-soft); }
.legal { display: flex; justify-content: space-between; gap: 1rem; border-top: 1px solid rgba(255,255,255,.1); margin-top: 2rem; padding-top: 1rem; font-size: .85rem; color: #b7aea3; }
@media (max-width: 900px) {
  .hero, .layout, .shows, .winners, .quotes, .artists, .cta-band, .foot-grid, .stats, .news-card { grid-template-columns: 1fr; }
  .nav-links { display: none; position: absolute; top: 72px; left: 0; right: 0; background: var(--paper); flex-direction: column; padding: 1rem 1.4rem 1.2rem; border-bottom: 1px solid var(--line); }
  .nav-links.open { display: flex; }
  .menu-btn { display: inline-block; }
  .hero-visual img, .show img, .show.feature img { height: 240px; }
  .badge { left: 12px; }
}
</style>
</head>
<body>
<header>
  <div class="wrap nav">
    <a class="brand" href="#top">
      <img src="https://placehold.co/92x92/7a2e3a/f6f1e8?text=A&font=playfair+display" alt="Aureole logo">
      <div>
        <strong>Aureole</strong>
        <span>Where repertoire meets the room.</span>
      </div>
    </a>
    <button class="menu-btn" aria-label="Open menu" onclick="document.getElementById('links').classList.toggle('open')">Menu</button>
    <nav id="links" class="nav-links">
      <a href="#shows">Shows</a>
      <a href="#artists">Artists</a>
      <a href="#news">News</a>
      <a href="#awards">Awards</a>
      <a href="#gallery">Gallery</a>
      <a href="#community">Community</a>
      <a href="#reviews">Reviews</a>
    </nav>
  </div>
</header>

<main id="top">
  <div class="wrap hero">
    <div>
      <p class="eyebrow">Arts &amp; Entertainment Desk</p>
      <h1>The season, curated with a critic’s ear and a producer’s nerve.</h1>
      <p class="lead">Aureole is the independent culture journal for music, cinema, visual arts, and the living stage. We track premieres, ensemble residencies, and the quiet rooms where a repertoire is rewritten overnight. From festival lineups to gallery openings, our editors file the notes you need before the house lights fall.</p>
      <p>Founded by former programmers and touring managers, the desk covers both the marquee and the margins: chamber seasons, independent film circuits, street-level performance, and the institutions that still commission new work. Read us for context, not just calendars.</p>
      <div class="hero-actions">
        <a class="btn btn-gold" href="#subscribe">Subscribe</a>
        <a class="btn btn-ghost" href="#reviews">Read Reviews</a>
        <a class="btn btn-ink" href="#gallery">View Gallery</a>
      </div>
    </div>
    <div class="hero-visual">
      <img src="https://picsum.photos/900/1100?random=21" alt="Audience in a darkened concert hall before a performance">
      <div class="badge">
        <small>Tonight’s house</small>
        <strong>Orpheum Annex · 8:00</strong>
        <span>New string quartet, first hearing</span>
      </div>
    </div>
  </div>

  <div class="wrap stats">
    <div class="stat"><b>184</b><span>shows on this month’s slate</span></div>
    <div class="stat"><b>62</b><span>ensembles in the directory</span></div>
    <div class="stat"><b>41</b><span>cities in the touring map</span></div>
    <div class="stat"><b>12</b><span>critics filing weekly notes</span></div>
  </div>

  <section id="shows">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow">Upcoming Shows</p>
          <h2>Nights worth crossing town for</h2>
        </div>
        <p>Our programming editors weigh venue acoustics, casting changes, and whether a piece belongs in a company’s living repertoire or is still finding its shape in workshop.</p>
      </div>
      <div class="shows">
        <article class="show feature">
          <img src="https://picsum.photos/800/640?random=31" alt="Stage lights over an empty proscenium">
          <div class="show-body">
            <p class="meta">Theatre · Apr 18–May 2</p>
            <h3>The Salt Meridian</h3>
            <p>A new play from the Harbor Ensemble follows a coastal cartographer who inherits a disputed lighthouse. The staging leans on a spare set and a live quartet tucked in the wings, so the language carries the weather. Early previews suggest a company finally trusting silence as much as spectacle.</p>
            <a class="btn btn-ink" href="#reviews">Read Reviews</a>
          </div>
        </article>
        <article class="show">
          <img src="https://picsum.photos/600/420?random=32" alt="Jazz trio under warm club lighting">
          <div class="show-body">
            <p class="meta">Music · Apr 12</p>
            <h3>Late Set at Vellum</h3>
            <p>Pianist Imani Cole returns with a trio that treats standards as sketches. Expect rearranged ballads and one premiere written on the road between residencies.</p>
          </div>
        </article>
        <article class="show">
          <img src="https://picsum.photos/600/420?random=33" alt="Film festival marquee at dusk">
          <div class="show-body">
            <p class="meta">Cinema · Apr 20</p>
            <h3>Northlight Shorts</h3>
            <p>Nine films under twenty minutes, programmed by a guest curator from the river district. A conversation with the directors follows the final reel.</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section id="news">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow">Industry News</p>
          <h2>What shifted while the house was dark</h2>
        </div>
        <p>Contracts, commissions, and the slow politics of cultural funding—reported with the same care we give a premiere.</p>
      </div>
      <div class="layout">
        <div class="news-list">
          <article class="news-card">
            <img src="https://picsum.photos/400/300?random=41" alt="Rehearsal studio with marked floor">
            <div>
              <p class="meta">Labor · Desk note</p>
              <h3>Regional houses extend ensemble contracts through winter</h3>
              <p>Three mid-size theatres announced multi-year agreements that keep core companies on salary between productions. The shift matters for repertoire planning: directors can hold a cast across a season instead of rebuilding chemistry every opening week. Unions called the deals modest but structurally important, especially for designers who have lived on single-show fees.</p>
              <a href="#community">Join the discussion in Community →</a>
            </div>
          </article>
          <article class="news-card">
            <img src="https://picsum.photos/400/300?random=42" alt="Gallery wall with framed works">
            <div>
              <p class="meta">Visual arts</p>
              <h3>Municipal gallery rewrites its curation brief</h3>
              <p>After a contested biennial, the city museum will rotate guest curators every eighteen months and publish acquisition rationales in plain language. Collectors are watching whether the new brief favors living regional painters or continues the loan-heavy blockbuster model that filled the atrium but emptied the education wing.</p>
            </div>
          </article>
          <article class="news-card">
            <img src="https://picsum.photos/400/300?random=43" alt="Orchestra musicians warming up">
            <div>
              <p class="meta">Music</p>
              <h3>A festival drops headliners to fund new commissions</h3>
              <p>The riverside music week will present fewer imported stars and underwrite six world premieres by composers under forty. Presenters elsewhere are studying the budget: ticket averages may dip, but the repertoire left behind could travel for a decade.</p>
            </div>
          </article>
        </div>
        <aside class="sidebar">
          <div class="panel">
            <h3>This week’s shows</h3>
            <ul>
              <li>Tue · Vellum Room — Cole Trio, late set</li>
              <li>Thu · Annex — Salt Meridian preview</li>
              <li>Fri · Northlight — shorts program</li>
              <li>Sat · Civic Lawn — open-air dance</li>
              <li>Sun · Paper Mill — family matinee</li>
            </ul>
          </div>
          <div class="panel light">
            <h3>Venue spotlight</h3>
            <p>The Orpheum Annex seats 280 and keeps the original plaster. Acousticians recently lifted the rear wall treatment, which flatters spoken word without punishing a string section. Standing room is honest, not an afterthought.</p>
            <a class="btn btn-ghost" href="#shows">See the slate</a>
          </div>
          <div class="panel light">
            <h3>Fan favorites</h3>
            <p>Readers keep returning to our essay on why second casts deserve first-night criticism, and to the photo diary from last autumn’s outdoor repertoire marathon.</p>
          </div>
        </aside>
      </div>
    </div>
  </section>

  <section id="awards">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow">Award Winners</p>
          <h2>The work that held the year</h2>
        </div>
        <p>Aureole’s independent citations honor craft over campaign. Juries include performers, designers, and one stubborn archivist.</p>
      </div>
      <div class="winners">
        <article class="winner">
          <img src="https://picsum.photos/640/480?random=51" alt="Dancer mid-turn on a bare stage">
          <div>
            <span class="ribbon">Performance</span>
            <h3>Leah Okonkwo</h3>
            <p>For a season of roles that never repeated a gesture. Her Mercutio and her solo in the river piece shared a precision that made risk look inevitable. The citation notes an ensemble player who raised every room she entered.</p>
          </div>
        </article>
        <article class="winner">
          <img src="https://picsum.photos/640/480?random=52" alt="Close view of a painted canvas">
          <div>
            <span class="ribbon">Visual arts</span>
            <h3>Studio Halve</h3>
            <p>A two-person practice whose pigment studies turned a disused ticket hall into a chapel of color. Jurors praised curation as much as making: the hang let each canvas breathe without staging a spectacle.</p>
          </div>
        </article>
        <article class="winner">
          <img src="https://picsum.photos/640/480?random=53" alt="Composer at a piano with manuscript">
          <div>
            <span class="ribbon">Composition</span>
            <h3>Mateo Varga</h3>
            <p>His hour-long piece for voices and brass rewrote a civic hymn without irony. Orchestras are already asking whether it can sit beside the standard repertoire rather than in a novelty slot.</p>
          </div>
        </article>
      </div>
    </div>
  </section>

  <section id="artists">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow">Artist Directory</p>
          <h2>Find the people behind the billing</h2>
        </div>
        <p>Filter by discipline. Profiles are maintained with the artists and updated when a residency, recording, or company affiliation changes.</p>
      </div>
      <div class="directory">
        <label for="q" class="eyebrow">Search the roster</label>
        <div class="filters">
          <input id="q" class="search" type="search" placeholder="Search by name or city" oninput="filterArtists()">
          <button class="active" data-filter="all" onclick="setFilter(this)">All</button>
          <button data-filter="music" onclick="setFilter(this)">Music</button>
          <button data-filter="stage" onclick="setFilter(this)">Stage</button>
          <button data-filter="visual" onclick="setFilter(this)">Visual</button>
          <button data-filter="screen" onclick="setFilter(this)">Screen</button>
        </div>
        <div class="artists" id="roster">
          <article class="artist" data-kind="music" data-name="imani cole chicago">
            <img src="https://i.pravatar.cc/150?u=imani-cole" alt="Portrait of Imani Cole">
            <div><strong>Imani Cole</strong><br><small>Piano · Chicago · touring trio</small><p>Builds sets that treat the American songbook as a living repertoire, not a museum.</p></div>
          </article>
          <article class="artist" data-kind="stage" data-name="leah okonkwo lagos london">
            <img src="https://i.pravatar.cc/150?u=leah-okonkwo" alt="Portrait of Leah Okonkwo">
            <div><strong>Leah Okonkwo</strong><br><small>Actor · ensemble lead</small><p>Company member known for athletic text work and generous scene partnership.</p></div>
          </article>
          <article class="artist" data-kind="visual" data-name="studio halve portland">
            <img src="https://i.pravatar.cc/150?u=studio-halve" alt="Portrait of Studio Halve">
            <div><strong>Studio Halve</strong><br><small>Painting · Portland</small><p>Pigment studies and site-specific hangs for civic rooms that have forgotten color.</p></div>
          </article>
          <article class="artist" data-kind="screen" data-name="noura elias montreal">
            <img src="https://i.pravatar.cc/150?u=noura-elias" alt="Portrait of Noura Elias">
            <div><strong>Noura Elias</strong><br><small>Director · shorts</small><p>Films about night shifts and family kitchens, cut with documentary patience.</p></div>
          </article>
          <article class="artist" data-kind="music" data-name="mateo varga lisbon">
            <img src="https://i.pravatar.cc/150?u=mateo-varga" alt="Portrait of Mateo Varga">
            <div><strong>Mateo Varga</strong><br><small>Composer · brass &amp; voices</small><p>Writes for civic occasions without sanding off dissonance or humor.</p></div>
          </article>
          <article class="artist" data-kind="stage" data-name="jun park seoul">
            <img src="https://i.pravatar.cc/150?u=jun-park" alt="Portrait of Jun Park">
            <div><strong>Jun Park</strong><br><small>Choreographer</small><p>Floor work that reads clearly from the cheap seats and still rewards the front row.</p></div>
          </article>
        </div>
        <p id="empty" hidden>No artists match that search. Try another discipline or clear the field.</p>
      </div>
    </div>
  </section>

  <section id="gallery">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow">From the floor</p>
          <h2>A working gallery, not a highlight reel</h2>
        </div>
        <a class="btn btn-gold" href="#gallery">View Gallery</a>
      </div>
      <div class="shows">
        <img src="https://picsum.photos/700/460?random=61" alt="Backstage corridor before curtain" style="border-radius:18px;height:260px;object-fit:cover;width:100%">
        <img src="https://picsum.photos/700/460?random=62" alt="Painter’s table with brushes" style="border-radius:18px;height:260px;object-fit:cover;width:100%">
        <img src="https://picsum.photos/700/460?random=63" alt="Audience leaving a cinema" style="border-radius:18px;height:260px;object-fit:cover;width:100%">
      </div>
      <p style="margin-top:1rem;max-width:70ch">Photographers on assignment for Aureole stay through load-out. The frames above are from a single April week: a corridor at the Annex, a pigment studio preparing for a civic hang, and the sidewalk after a sold-out shorts program. Licensing for editorial reuse is listed with each file in the full gallery.</p>
    </div>
  </section>

  <section id="reviews">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow">From the house</p>
          <h2>Readers who stayed for the talkback</h2>
        </div>
      </div>
      <div class="quotes">
        <blockquote class="quote">
          <p>“Aureole is the only desk that tells me whether a touring production still has its original ensemble or has been quietly recast. That single detail has saved me two disappointing nights.”</p>
          <footer><img src="https://i.pravatar.cc/96?u=reader-ada" alt=""><div><strong>Ada Mensah</strong><br><small>Subscriber, season-ticket holder</small></div></footer>
        </blockquote>
        <blockquote class="quote">
          <p>“Their curation notes helped our board understand why a risky commission belonged in the main season, not a side series. The language was precise without being cruel.”</p>
          <footer><img src="https://i.pravatar.cc/96?u=reader-joel" alt=""><div><strong>Joel Hart</strong><br><small>Presenting organization</small></div></footer>
        </blockquote>
        <blockquote class="quote">
          <p>“I read the industry column with my coffee and the reviews after the show. It feels like a colleague in the next seat, not a press release with better fonts.”</p>
          <footer><img src="https://i.pravatar.cc/96?u=reader-priya" alt=""><div><strong>Priya Nandakumar</strong><br><small>Freelance lighting designer</small></div></footer>
        </blockquote>
      </div>
    </div>
  </section>

  <section id="community">
    <div class="wrap">
      <div class="section-head">
        <div>
          <p class="eyebrow">Community</p>
          <h2>Questions the lobby actually asks</h2>
        </div>
        <p>Members trade house notes, understudy alerts, and recommendations for rooms that still welcome a late arrival.</p>
      </div>
      <div class="faq">
        <details open>
          <summary>How do artists join the directory?</summary>
          <p>Send a short bio, two recent credits, and a portrait we can credit. Editors verify company affiliations before a profile goes live. There is no placement fee; we decline paid ranking so the roster stays a resource rather than an advertisement.</p>
        </details>
        <details>
          <summary>Can I submit a show for the weekly slate?</summary>
          <p>Publicists may file a one-page notice with dates, venue capacity, and whether the piece is a premiere, a revival, or a workshop. We do not guarantee coverage. If the work changes the local repertoire or employs a notable ensemble, it moves up the desk.</p>
        </details>
        <details>
          <summary>Do you review every opening?</summary>
          <p>No. We assign critics where a production invites argument: new writing, unusual casting, or a familiar title restaged with real intent. Star ratings are optional; the paragraph is not. Readers can discuss assigned reviews in Community after the embargo lifts.</p>
        </details>
        <details>
          <summary>How does the membership circle work?</summary>
          <p>Subscribers receive the Sunday briefing, early ticket holds negotiated with partner venues, and a monthly salon—sometimes in a rehearsal room, sometimes on a video call with a curator. Community guidelines bar harassment and unverified gossip about private lives.</p>
        </details>
      </div>
    </div>
  </section>

  <section id="subscribe">
    <div class="wrap">
      <div class="cta-band">
        <div>
          <p class="eyebrow" style="color:var(--gold-soft)">Sunday briefing</p>
          <h2>Subscribe before the week’s houses open</h2>
          <p>One letter: three shows worth your evening, one industry note, and a single deep review. No sponsored placements in the lead. Unsubscribe whenever the season no longer fits your life.</p>
        </div>
        <form onsubmit="event.preventDefault(); this.querySelector('button').textContent='You’re on the list';">
          <input type="email" required placeholder="Email address" aria-label="Email address">
          <button class="btn btn-gold" type="submit">Subscribe</button>
        </form>
      </div>
    </div>
  </section>
</main>

<footer>
  <div class="wrap foot-grid">
    <div>
      <h3>Aureole</h3>
      <p>A culture journal for music, movies, visual arts, and the performing arts. Desk hours follow the city’s curtains, not a corporate clock.</p>
      <p>418 Lantern Street, Suite 6<br>Harbor City, HC 04118<br>desk@aureole.example · (401) 555-0148</p>
    </div>
    <div>
      <h4>Visit</h4>
      <p><a href="#artists">Artists</a><br><a href="#news">News</a><br><a href="#community">Community</a><br><a href="#shows">Shows</a></p>
    </div>
    <div>
      <h4>House rules</h4>
      <p><a href="#community">Privacy</a><br><a href="#community">Terms</a><br><a href="#reviews">Corrections</a><br><a href="#subscribe">Membership</a></p>
    </div>
    <div>
      <h4>Social</h4>
      <p><a href="#community">Instagram</a><br><a href="#community">Letter archive</a><br><a href="#news">Mastodon</a><br><a href="#gallery">Photo desk</a></p>
    </div>
  </div>
  <div class="wrap legal">
    <span>© 2026 Aureole Arts Desk. All rights reserved.</span>
    <span>Printed opinions are the writers’. Listings are checked, then checked again.</span>
  </div>
</footer>
<script>
let current = "all";
function setFilter(btn) {
  current = btn.dataset.filter;
  document.querySelectorAll(".filters button").forEach(b => b.classList.remove("active"));
  btn.classList.add("active");
  filterArtists();
}
function filterArtists() {
  const q = document.getElementById("q").value.toLowerCase().trim();
  let shown = 0;
  document.querySelectorAll("#roster .artist").forEach(card => {
    const okKind = current === "all" || card.dataset.kind === current;
    const okText = card.dataset.name.includes(q) || card.textContent.toLowerCase().includes(q);
    const visible = okKind && okText;
    card.style.display = visible ? "grid" : "none";
    if (visible) shown++;
  });
  document.getElementById("empty").hidden = shown !== 0;
}
</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:03:59.777Z",
  "url": "https://benchmark.aimac.invalid/2843532819abdc42f0330c909a5749d1642f0b7705e8334d86f54818a68b1ef4.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "<input type=\"email\" required=\"\" placeholder=\"Email address\" aria-label=\"Email address\">",
          "target": [
            "input[type=\"email\"]"
          ]
        }
      ]
    },
    {
      "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": "<input type=\"email\" required=\"\" placeholder=\"Email address\" aria-label=\"Email address\">",
          "target": [
            "input[type=\"email\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<input type=\"email\" required=\"\" placeholder=\"Email address\" aria-label=\"Email address\">",
          "target": [
            "input[type=\"email\"]"
          ]
        }
      ]
    },
    {
      "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": "<input type=\"email\" required=\"\" placeholder=\"Email address\" aria-label=\"Email address\">",
          "target": [
            "input[type=\"email\"]"
          ]
        }
      ]
    },
    {
      "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": "<input type=\"email\" required=\"\" placeholder=\"Email address\" aria-label=\"Email address\">",
          "target": [
            "input[type=\"email\"]"
          ]
        }
      ]
    },
    {
      "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": "<img src=\"https://picsum.photos/700/460?random=61\" alt=\"Backstage corridor before curtain\" style=\"border-radius:18px;height:260px;object-fit:cover;width:100%\">",
          "target": [
            ".shows > img:nth-child(1)"
          ]
        }
      ]
    },
    {
      "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=\"active\" data-filter=\"all\" onclick=\"setFilter(this)\">All</button>",
          "target": [
            ".active"
          ]
        }
      ]
    },
    {
      "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>The season, curated with a critic\u2019s ear and a producer\u2019s nerve.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Nights worth crossing town for</h2>",
                  "target": [
                    "#shows > .wrap > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>The Salt Meridian</h3>",
                  "target": [
                    ".feature > .show-body > h3"
                  ]
                },
                {
                  "html": "<h3>Late Set at Vellum</h3>",
                  "target": [
                    ".show:nth-child(2) > .show-body > h3"
                  ]
                },
                {
                  "html": "<h3>Northlight Shorts</h3>",
                  "target": [
                    ".show:nth-child(3) > .show-body > h3"
                  ]
                },
                {
                  "html": "<h2>What shifted while the house was dark</h2>",
                  "target": [
                    "#news > .wrap > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>Regional houses extend ensemble contracts through winter</h3>",
                  "target": [
                    ".news-card:nth-child(1) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Municipal gallery rewrites its curation brief</h3>",
                  "target": [
                    ".news-card:nth-child(2) > div > h3"
                  ]
                },
                {
                  "html": "<h3>A festival drops headliners to fund new commissions</h3>",
                  "target": [
                    ".news-card:nth-child(3) > div > h3"
                  ]
                },
                {
                  "html": "<h3>This week\u2019s shows</h3>",
                  "target": [
                    ".panel:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Venue spotlight</h3>",
                  "target": [
                    ".light.panel:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Fan favorites</h3>",
                  "target": [
                    ".light.panel:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h2>The work that held the year</h2>",
                  "target": [
                    "#awards > .wrap > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h3>Leah Okonkwo</h3>",
                  "target": [
                    ".winner:nth-child(1) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Studio Halve</h3>",
                  "target": [
                    ".winner:nth-child(2) > div > h3"
                  ]
                },
                {
                  "html": "<h3>Mateo Varga</h3>",
                  "target": [
                    ".winner:nth-child(3) > div > h3"
                  ]
                },
                {
                  "html": "<h2>Find the people behind the billing</h2>",
                  "target": [
                    "#artists > .wrap > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h2>A working gallery, not a highlight reel</h2>",
                  "target": [
                    "#gallery > .wrap > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h2>Readers who stayed for the talkback</h2>",
                  "target": [
                    "#reviews > .wrap > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h2>Questions the lobby actually asks</h2>",
                  "target": [
                    "#community > .wrap > .section-head > div > h2"
                  ]
                },
                {
                  "html": "<h2>Subscribe before the week\u2019s houses open</h2>",
                  "target": [
                    ".cta-band > div > h2"
                  ]
                },
                {
                  "html": "<h3>Aureole</h3>",
                  "target": [
                    ".foot-grid > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h4>Visit</h4>",
                  "target": [
                    "div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>House rules</h4>",
                  "target": [
                    "div:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Social</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": "#14110e",
                "bgColor": "#f6f1e8",
                "contrastRatio": 16.72,
                "fontSize": "15.0pt (20px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 16.72"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<strong>Aureole</strong>",
          "target": [
            ".brand > div > strong"
          ]
        }
      ]
    },
    {
      "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": "q",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<input id=\"q\" class=\"search\" type=\"search\" placeholder=\"Search by name or city\" oninput=\"filterArtists()\">",
          "target": [
            "#q"
          ]
        }
      ]
    },
    {
      "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=\"q\" class=\"eyebrow\">Search the roster</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input id=\"q\" class=\"search\" type=\"search\" placeholder=\"Search by name or city\" oninput=\"filterArtists()\">",
          "target": [
            "#q"
          ]
        }
      ]
    },
    {
      "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/92x92/7a2e3a/f6f1e8?text=A&amp;font=playfair+display\" alt=\"Aureole logo\">",
          "target": [
            "img[alt=\"Aureole logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Search the roster"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"q\" class=\"eyebrow\">Search the roster</label>",
                  "target": [
                    "label"
                  ]
                }
              ],
              "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=\"q\" class=\"search\" type=\"search\" placeholder=\"Search by name or city\" oninput=\"filterArtists()\">",
          "target": [
            "#q"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"show-body\">",
                  "target": [
                    ".feature > .show-body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"btn btn-ink\" href=\"#reviews\">Read Reviews</a>",
          "target": [
            ".btn-ink.btn[href$=\"#reviews\"]"
          ]
        }
      ]
    },
    {
      "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"
            }
          ],
          "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 class=\"brand\" href=\"#top\">\n      <img src=\"https://placehold.co/92x92/7a2e3a/f6f1e8?text=A&amp;font=playfair+display\" alt=\"Aureole logo\">\n      <div>\n        <strong>Aureole</strong>\n        <span>Where repertoire meets the room.</span>\n      </div>\n    </a>",
          "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": [
            "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>Tue \u00b7 Vellum Room \u2014 Cole Trio, late set</li>",
          "target": [
            "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/92x92/7a2e3a/f6f1e8?text=A&amp;font=playfair+display\" alt=\"Aureole logo\">",
          "target": [
            "img[alt=\"Aureole logo\"]"
          ]
        }
      ]
    },
    {
      "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 do artists join the directory?</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": 239.6,
                "height": 48.6
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (239.6px by 48.6px, 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 class=\"brand\" href=\"#top\">\n      <img src=\"https://placehold.co/92x92/7a2e3a/f6f1e8?text=A&amp;font=playfair+display\" alt=\"Aureole logo\">\n      <div>\n        <strong>Aureole</strong>\n        <span>Where repertoire meets the room.</span>\n      </div>\n    </a>",
          "target": [
            ".brand"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": null,
                "bgColor": null,
                "contrastRatio": 0,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": "bgGradient",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<div class=\"cta-band\">",
                  "target": [
                    ".cta-band"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a background gradient"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"eyebrow\" style=\"color:var(--gold-soft)\">Sunday briefing</p>",
          "target": [
            ".cta-band > div > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a background gradient"
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": "serious",
      "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",
              "data": {
                "messageKey": "bgOverlap"
              },
              "relatedNodes": [
                {
                  "html": "<div>",
                  "target": [
                    ".news-card:nth-child(1) > div"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's contrast ratio could not be determined because of element overlap"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#community\">Join the discussion in Community \u2192</a>",
          "target": [
            "div > a[href$=\"#community\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element's contrast ratio could not be determined because of element overlap"
        }
      ]
    }
  ],
  "violations": [],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 6639
      },
      {
        "y": 576,
        "height": 6639
      },
      {
        "y": 1152,
        "height": 6639
      },
      {
        "y": 1728,
        "height": 6639
      },
      {
        "y": 2304,
        "height": 6639
      },
      {
        "y": 2880,
        "height": 6639
      },
      {
        "y": 3456,
        "height": 6639
      },
      {
        "y": 4032,
        "height": 6639
      },
      {
        "y": 4608,
        "height": 6639
      },
      {
        "y": 5184,
        "height": 6639
      },
      {
        "y": 5760,
        "height": 6639
      },
      {
        "y": 5919,
        "height": 6639
      }
    ],
    "scans": 13,
    "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: "Artists", "News", "Community".
-   **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: "Upcoming Shows", "Award Winners", "Industry News".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "ensemble", "curation", "repertoire".
    -   **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", "Read Reviews", "View Gallery".
-   **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: "artist directory".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "this week's shows", "venue spotlights", "fan favorites".
-   **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.