Qwen Qwen3.8 2.4T A95B – Arts and Entertainment

via Modal · Generated

  • AIMAC Debt 4.85
  • Cost $0.21
  • Total Violations 20
  • HTML Size 76 KB
  • Em Dashes 46

Screenshot

View Qwen Qwen3.8 2.4T A95B Arts and Entertainment page View Live Page

Accessibility Issues Found

20 Serious

  • color-contrast serious 20 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="no">01</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OVERTURE — The Arts &amp; Entertainment Review</title>
<meta name="description" content="Overture is an independent journal of music, cinema, stage and visual art — criticism, curation and a live box office.">
<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:ital,opsz,wght@0,9..144,300..900;1,9..144,300..900&family=Libre+Franklin:ital,wght@0,300..900;1,300..900&family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;1,400&display=swap" rel="stylesheet">
<style>
/* ============ TOKENS ============ */
:root{
  --paper:#f4eee1; --paper-2:#ece3cf; --paper-3:#e4d9bf;
  --ink:#191410; --ink-2:#2a231b; --ink-soft:#5a4f40;
  --red:#a31621; --red-bright:#c8372d;
  --gold:#c9a227; --gold-soft:#e2c566;
  --night:#12100b; --night-2:#1c1811;
  --cream:#f4eee1;
  --display:'Fraunces',Georgia,serif;
  --body:'Libre Franklin',Helvetica,Arial,sans-serif;
  --mono:'IBM Plex Mono','Courier New',monospace;
  --border:1px solid var(--ink);
  --shadow-pop:6px 6px 0 rgba(25,20,16,.9);
  --w:min(1240px,92vw);
  --navh:64px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--navh) + 18px)}
body{
  font-family:var(--body);background:var(--paper);color:var(--ink);
  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
::selection{background:var(--red);color:var(--cream)}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
.wrap{width:var(--w);margin:0 auto}
section{scroll-margin-top:calc(var(--navh) + 14px)}

/* film-grain overlay */
body::after{
  content:"";position:fixed;inset:-50%;z-index:2000;pointer-events:none;opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 9s steps(6) infinite;
}
@keyframes grain{
  0%,100%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}
  40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}
}

/* ============ TYPE HELPERS ============ */
.eyebrow{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--red);font-weight:600;display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--red)}
.sec-title{
  font-family:var(--display);font-weight:800;font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.02;letter-spacing:-.01em;margin:.35em 0 .3em;
}
.sec-title em{font-style:italic;color:var(--red);font-weight:600}
.kicker{font-family:var(--mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase}
.stars{color:var(--gold);letter-spacing:.12em;font-size:.95rem}
.stars-dim{color:rgba(25,20,16,.22)}
.dark .stars-dim{color:rgba(244,238,225,.25)}

/* link underline animation */
.u{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 96%;transition:background-size .35s ease;padding-bottom:2px}
.u:hover,.u:focus-visible{background-size:100% 1.5px}

/* buttons — letterpress pop */
.btn{
  display:inline-flex;align-items:center;gap:.55em;font-family:var(--mono);font-weight:600;
  font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;padding:.9em 1.5em;
  border:2px solid var(--ink);background:var(--ink);color:var(--cream);
  box-shadow:4px 4px 0 rgba(163,22,33,.9);transition:transform .18s ease,box-shadow .18s ease,background .18s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 rgba(163,22,33,.9)}
.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 rgba(163,22,33,.9)}
.btn-red{background:var(--red);border-color:var(--red);box-shadow:4px 4px 0 rgba(25,20,16,.9)}
.btn-red:hover{box-shadow:7px 7px 0 rgba(25,20,16,.9)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:4px 4px 0 rgba(25,20,16,.18)}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.dark .btn-ghost{color:var(--cream);border-color:var(--cream);box-shadow:4px 4px 0 rgba(201,162,39,.35)}
.dark .btn-ghost:hover{background:var(--cream);color:var(--night)}

.chip{
  display:inline-block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  border:1px solid var(--ink);padding:.32em .7em;font-weight:600;
}
.chip-red{background:var(--red);color:var(--cream);border-color:var(--red)}
.chip-gold{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.6,.1,1)}
.reveal.in{opacity:1;transform:none}
.mask{display:block;overflow:hidden}
.mask>span{display:block;transform:translateY(112%);transition:transform .95s cubic-bezier(.19,.72,.08,1)}
.in .mask>span,.mask.in>span{transform:translateY(0)}

/* ============ TOP BAR + MASTHEAD ============ */
.topbar{border-bottom:var(--border);font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase}
.topbar .wrap{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0}
.topbar .cities{color:var(--red)}
@media(max-width:760px){.topbar .cities{display:none}}

.masthead{position:relative;text-align:center;padding:2.4rem 0 1.8rem;border-bottom:4px double var(--ink)}
.masthead .corner{position:absolute;top:2rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-soft);line-height:1.9;text-align:left}
.corner-l{left:max(4vw,calc((100vw - var(--w))/2))}
.corner-r{right:max(4vw,calc((100vw - var(--w))/2));text-align:right}
@media(max-width:900px){.masthead .corner{display:none}}
.logomark{width:66px;height:66px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--gold);margin:0 auto 1rem}
.wordmark{
  font-family:var(--display);font-weight:900;font-size:clamp(3.2rem,9.5vw,7.4rem);
  letter-spacing:.015em;line-height:.9;text-transform:uppercase;
}
.wordmark .ov-o{color:var(--red)}
.tagline{margin-top:.9rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.34em;text-transform:uppercase;color:var(--ink-soft)}
.tagline b{color:var(--red);font-weight:600}

/* ============ NAV ============ */
.nav{
  position:sticky;top:0;z-index:900;background:var(--night);color:var(--cream);
  border-bottom:1px solid rgba(244,238,225,.16);
}
.nav .wrap{display:flex;align-items:center;gap:1.4rem;height:var(--navh)}
.nav-brand{display:flex;align-items:center;gap:.6rem;font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.08em;text-transform:uppercase}
.nav-brand img{width:30px;height:30px;border:1px solid var(--gold)}
.nav-links{display:flex;gap:1.5rem;list-style:none;margin-left:auto}
.nav-links a{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(244,238,225,.82);position:relative;padding:.4em 0}
.nav-links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-links a:hover{color:var(--cream)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-sub{margin-left:1rem}
.nav-sub .btn{padding:.65em 1.2em;font-size:.68rem;box-shadow:3px 3px 0 rgba(201,162,39,.8);border-color:var(--red);background:var(--red)}
.nav-sub .btn:hover{box-shadow:5px 5px 0 rgba(201,162,39,.8)}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(244,238,225,.4);color:var(--cream);font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;padding:.55em .9em}
@media(max-width:960px){
  .nav-links{display:none;position:absolute;top:var(--navh);left:0;right:0;background:var(--night);flex-direction:column;gap:0;border-bottom:2px solid var(--gold);padding:.4rem 0}
  .nav-links.open{display:flex}
  .nav-links a{display:block;padding:.9em 6vw;border-top:1px solid rgba(244,238,225,.08)}
  .burger{display:block}
  .nav-sub{margin-left:auto}
}
.progress{position:absolute;left:0;bottom:-3px;height:3px;width:0;background:linear-gradient(90deg,var(--red-bright),var(--gold));z-index:2}

/* ============ TICKER ============ */
.ticker{background:var(--red);color:var(--cream);overflow:hidden;border-bottom:var(--border)}
.ticker-track{display:flex;width:max-content;animation:ticker 40s linear infinite}
.ticker:hover .ticker-track{animation-play-state:paused}
.ticker-group{display:flex;align-items:center;font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;padding:.6rem 0;white-space:nowrap}
.ticker-group span{padding:0 1.6rem;display:flex;align-items:center;gap:1.6rem}
.ticker-group i{font-style:normal;color:var(--gold-soft)}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ============ FRONT PAGE ============ */
.frontpage{padding:3.4rem 0 4rem}
.fp-grid{display:grid;grid-template-columns:230px 1fr 330px;gap:2.6rem}
@media(max-width:1080px){.fp-grid{grid-template-columns:1fr 330px}.fp-rail{display:none}}
@media(max-width:860px){.fp-grid{grid-template-columns:1fr}}

.fp-rail{border-right:1px solid rgba(25,20,16,.25);padding-right:1.8rem;font-size:.86rem}
.rail-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);padding-bottom:.7rem;border-bottom:var(--border);margin-bottom:.4rem}
.issue-index{list-style:none}
.issue-index li a{display:flex;gap:.8rem;padding:.68rem 0;border-bottom:1px solid rgba(25,20,16,.14);align-items:baseline;transition:padding-left .25s ease}
.issue-index li a:hover{padding-left:.4rem}
.issue-index .no{font-family:var(--mono);color:var(--gold);font-size:.72rem;font-weight:600}
.issue-index .t{font-weight:600}
.numbers{margin-top:1.8rem;border:var(--border);background:var(--paper-2);padding:1.1rem 1.1rem .9rem}
.numbers h4{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:.7rem}
.numbers .stat{display:flex;align-items:baseline;gap:.6rem;padding:.42rem 0;border-top:1px dashed rgba(25,20,16,.3)}
.numbers .stat:first-of-type{border-top:0}
.numbers .n{font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--red);min-width:70px}
.numbers .l{font-size:.74rem;color:var(--ink-soft)}

.fp-main .eyebrow{margin-bottom:1rem}
.fp-headline{font-family:var(--display);font-weight:800;font-size:clamp(2.5rem,5.4vw,4.4rem);line-height:1.0;letter-spacing:-.015em;margin-bottom:1.1rem}
.fp-headline em{font-style:italic;font-weight:500;color:var(--red)}
.fp-meta{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 1.4rem;margin:.4rem 0 1.6rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft)}
.byline{display:flex;align-items:center;gap:.6rem}
.byline img{width:34px;height:34px;border-radius:50%;border:2px solid var(--gold)}
.byline b{color:var(--ink);font-weight:600}
.lede{font-size:1.12rem;line-height:1.75;color:var(--ink-2);max-width:60ch}
.lede::first-letter{
  font-family:var(--display);font-weight:900;float:left;font-size:4.4em;line-height:.78;
  padding:.08em .12em 0 0;color:var(--red);
}
.fp-main p+p{margin-top:1.1rem}
.fp-cta{display:flex;flex-wrap:wrap;gap:1rem;margin-top:1.8rem}

.fp-visual{position:relative}
.frame{border:var(--border);padding:10px;background:var(--paper);box-shadow:var(--shadow-pop)}
.frame .imgbox{overflow:hidden;position:relative}
.kb img{animation:kenburns 16s ease-in-out infinite alternate;transform-origin:center}
@keyframes kenburns{from{transform:scale(1) translate(0,0)}to{transform:scale(1.09) translate(-1.5%,1.5%)}}
.frame figcaption{font-family:var(--mono);font-size:.64rem;letter-spacing:.06em;color:var(--ink-soft);padding:.7rem .2rem .1rem;line-height:1.6}
.stamp{
  position:absolute;top:-18px;right:-14px;z-index:3;transform:rotate(7deg);
  background:var(--gold);color:var(--ink);border:2px solid var(--ink);
  font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;
  padding:.55em .9em;text-align:center;line-height:1.6;box-shadow:3px 3px 0 rgba(25,20,16,.85);
}
.listening{margin-top:1.6rem;border:var(--border);background:var(--night);color:var(--cream);display:flex;gap:1rem;padding:1rem;align-items:center}
.listening img{width:86px;height:86px;object-fit:cover;border:1px solid var(--gold)}
.listening .k{color:var(--gold-soft)}
.listening h4{font-family:var(--display);font-size:1.05rem;font-weight:700;margin:.2rem 0}
.listening p{font-size:.78rem;color:rgba(244,238,225,.75)}

/* ============ CRITIC'S DESK ============ */
.desk{background:var(--paper-2);border-top:var(--border);border-bottom:var(--border);padding:4.4rem 0}
.desk-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;margin-bottom:2.4rem;flex-wrap:wrap}
.desk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem}
@media(max-width:1080px){.desk-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.desk-grid{grid-template-columns:1fr}}
.review-card{
  background:var(--paper);border:var(--border);display:flex;flex-direction:column;
  transition:transform .3s ease,box-shadow .3s ease;position:relative;
}
.review-card:hover{transform:translateY(-6px);box-shadow:8px 8px 0 rgba(25,20,16,.85)}
.review-card .imgbox{overflow:hidden;border-bottom:var(--border);aspect-ratio:3/2}
.review-card img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease;filter:saturate(.92)}
.review-card:hover img{transform:scale(1.06)}
.review-card .body{padding:1.15rem 1.15rem 1.3rem;display:flex;flex-direction:column;gap:.55rem;flex:1}
.review-card h3{font-family:var(--display);font-weight:700;font-size:1.22rem;line-height:1.15}
.review-card .x{font-size:.85rem;color:var(--ink-soft);flex:1}
.review-card .foot{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(25,20,16,.2);padding-top:.8rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase}
.pick-ribbon{
  position:absolute;top:12px;left:-8px;background:var(--red);color:var(--cream);z-index:2;
  font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;text-transform:uppercase;
  padding:.45em .9em;box-shadow:3px 3px 0 rgba(25,20,16,.6);
}

/* ============ ARTIST SPOTLIGHT (sticky two-column) ============ */
.spotlight{padding:5rem 0}
.spot-grid{display:grid;grid-template-columns:420px 1fr;gap:3.4rem;align-items:start}
@media(max-width:980px){.spot-grid{grid-template-columns:1fr}}
.spot-left{position:sticky;top:calc(var(--navh) + 24px)}
@media(max-width:980px){.spot-left{position:static}}
.spot-left .frame{box-shadow:10px 10px 0 var(--red)}
.pull{
  margin-top:1.6rem;font-family:var(--display);font-style:italic;font-weight:500;
  font-size:1.4rem;line-height:1.35;color:var(--red);border-left:3px solid var(--gold);padding-left:1.1rem;
}
.vitals{margin-top:1.5rem;border-top:var(--border);font-family:var(--mono);font-size:.74rem}
.vitals div{display:flex;justify-content:space-between;gap:1rem;padding:.55rem 0;border-bottom:1px solid rgba(25,20,16,.25)}
.vitals dt{letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft)}
.vitals dd{font-weight:600;text-align:right}
.spot-right h2{font-family:var(--display);font-weight:800;font-size:clamp(2rem,4vw,3.1rem);line-height:1.04;letter-spacing:-.01em;margin:.5rem 0 1.4rem}
.spot-right .body-copy{font-size:1.02rem;color:var(--ink-2);max-width:62ch}
.spot-right .body-copy p+p{margin-top:1.15rem}
.spot-right .dropcap::first-letter{
  font-family:var(--display);font-weight:900;float:left;font-size:4em;line-height:.8;
  padding:.08em .12em 0 0;color:var(--red);
}
.subhead{font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--red);margin:2.2rem 0 .8rem;display:flex;align-items:center;gap:.8rem}
.subhead::after{content:"";flex:1;height:1px;background:rgba(25,20,16,.25)}
.spot-fig{margin:2rem 0;border:var(--border);padding:8px;background:var(--paper);box-shadow:6px 6px 0 rgba(201,162,39,.55)}
.spot-fig .imgbox{overflow:hidden}
.spot-fig img{transition:transform .8s ease}
.spot-fig:hover img{transform:scale(1.04)}
.spot-fig figcaption{font-family:var(--mono);font-size:.62rem;color:var(--ink-soft);padding-top:.6rem}
.inline-review{border:var(--border);border-left:5px solid var(--red);background:var(--paper-2);padding:1.2rem 1.4rem;margin-top:2rem;font-size:.92rem}
.inline-review .q{font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.45}
.inline-review .meta{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-soft);margin-top:.7rem;display:flex;justify-content:space-between;flex-wrap:wrap;gap:.5rem}
.spot-cta{margin-top:2rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.spot-cta .hint{font-family:var(--mono);font-size:.66rem;color:var(--ink-soft);letter-spacing:.08em}

/* ============ NEW VOICES (scattered postcards) ============ */
.voices{background:var(--night);color:var(--cream);padding:4.8rem 0 5.4rem;border-top:6px solid var(--red);position:relative;overflow:hidden}
.voices::before{
  content:"NEW VOICES · 2025 · NEW VOICES · 2025 · NEW VOICES · 2025 ·";
  position:absolute;top:24px;left:0;right:0;white-space:nowrap;font-family:var(--display);
  font-weight:900;font-size:clamp(4rem,11vw,8.5rem);color:transparent;
  -webkit-text-stroke:1px rgba(244,238,225,.08);letter-spacing:.04em;pointer-events:none;
}
.voices .eyebrow{color:var(--gold)}
.voices .eyebrow::before{background:var(--gold)}
.voices-head{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:end;margin-bottom:3.2rem}
@media(max-width:860px){.voices-head{grid-template-columns:1fr}}
.voices-head p{color:rgba(244,238,225,.72);font-size:.95rem;max-width:48ch}
.voices-head .sec-title{color:var(--cream)}
.postcards{display:flex;flex-wrap:wrap;justify-content:center;gap:1.2rem 1.6rem;position:relative;z-index:1}
.postcard{
  width:230px;background:var(--cream);color:var(--ink);padding:10px 10px 14px;border:1px solid #d8cfba;
  box-shadow:0 14px 30px rgba(0,0,0,.45);position:relative;
  transition:transform .45s cubic-bezier(.2,.7,.2,1.3),box-shadow .45s ease;
}
.postcard::before{
  content:"";position:absolute;top:-13px;left:50%;width:92px;height:26px;
  background:rgba(201,162,39,.55);transform:translateX(-50%) rotate(-3deg);
  box-shadow:0 1px 2px rgba(0,0,0,.2);
}
.postcard:nth-child(1){transform:rotate(-3.5deg) translateY(10px)}
.postcard:nth-child(2){transform:rotate(2.2deg) translateY(-8px)}
.postcard:nth-child(3){transform:rotate(-1.6deg) translateY(14px)}
.postcard:nth-child(4){transform:rotate(3.2deg) translateY(-4px)}
.postcard:nth-child(5){transform:rotate(-2.6deg) translateY(8px)}
.postcard:hover{transform:rotate(0) translateY(-12px) scale(1.045);box-shadow:0 26px 44px rgba(0,0,0,.55);z-index:5}
.postcard img{aspect-ratio:4/5;width:100%;object-fit:cover;filter:sepia(.14) contrast(1.02)}
.postcard h3{font-family:var(--display);font-weight:800;font-size:1.12rem;margin-top:.7rem;line-height:1.1}
.postcard .disc{font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--red);margin:.3rem 0 .45rem}
.postcard p{font-size:.8rem;color:var(--ink-soft);line-height:1.5}
.postcard a{display:inline-flex;gap:.4em;margin-top:.65rem;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;color:var(--ink);border-bottom:2px solid var(--gold)}
.postcard a:hover{color:var(--red)}

/* ============ TICKET FINDER ============ */
.tickets{background:var(--night-2);color:var(--cream);padding:5rem 0;border-top:1px solid rgba(244,238,225,.12)}
.tickets .eyebrow{color:var(--gold-soft)}.tickets .eyebrow::before{background:var(--gold-soft)}
.tickets .sec-title{color:var(--cream)}
.tickets-head{max-width:640px;margin-bottom:2.2rem}
.tickets-head p{color:rgba(244,238,225,.7);font-size:.98rem}
.toolbar{
  display:flex;flex-wrap:wrap;gap:1rem;align-items:center;border:1px solid rgba(244,238,225,.25);
  background:rgba(244,238,225,.04);padding:1rem 1.1rem;margin-bottom:1rem;
}
.toolbar input[type=search]{
  flex:1 1 220px;background:transparent;border:1px solid rgba(244,238,225,.3);color:var(--cream);
  font-family:var(--mono);font-size:.78rem;padding:.75em 1em;letter-spacing:.06em;min-width:0;
}
.toolbar input::placeholder{color:rgba(244,238,225,.4)}
.toolbar select{
  background:var(--night);color:var(--cream);border:1px solid rgba(244,238,225,.3);
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;padding:.75em .9em;
}
.pills{display:flex;gap:.5rem;flex-wrap:wrap}
.pill{
  background:transparent;border:1px solid rgba(244,238,225,.35);color:rgba(244,238,225,.8);
  font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;padding:.6em 1.05em;
  transition:all .2s ease;
}
.pill:hover{border-color:var(--gold);color:var(--gold)}
.pill.active{background:var(--red);border-color:var(--red);color:var(--cream)}
.result-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.6rem;font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,225,.55);margin-bottom:1.3rem}
.result-meta b{color:var(--gold-soft);font-weight:600}
.ev-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media(max-width:860px){.ev-grid{grid-template-columns:1fr}}
.ev-card{
  display:flex;gap:1.1rem;border:1px solid rgba(244,238,225,.22);background:rgba(244,238,225,.035);
  padding:1.1rem;transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.ev-card:hover{transform:translateY(-3px);border-color:var(--gold);background:rgba(244,238,225,.06)}
.ev-date{
  flex:0 0 72px;border:1px solid var(--gold);text-align:center;padding:.6rem .3rem;align-self:flex-start;
}
.ev-date .m{font-family:var(--mono);font-size:.6rem;letter-spacing:.22em;color:var(--gold-soft)}
.ev-date .d{font-family:var(--display);font-weight:900;font-size:1.9rem;line-height:1.1}
.ev-date .wd{font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;color:rgba(244,238,225,.55)}
.ev-info{flex:1;min-width:0}
.ev-info .chip{border-color:rgba(244,238,225,.4);color:var(--gold-soft);margin-bottom:.5rem}
.ev-info h3{font-family:var(--display);font-weight:700;font-size:1.2rem;line-height:1.15;margin-bottom:.25rem}
.ev-venue{font-size:.8rem;color:rgba(244,238,225,.65);margin-bottom:.7rem}
.meter{height:5px;background:rgba(244,238,225,.15);margin-bottom:.35rem;overflow:hidden}
.meter i{display:block;height:100%;background:var(--gold);transition:width .8s cubic-bezier(.2,.7,.2,1)}
.meter.low i{background:var(--red-bright)}
.avail{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,225,.55)}
.avail.low{color:var(--red-bright)}
.ev-buy{display:flex;align-items:center;justify-content:space-between;gap:.8rem;margin-top:.85rem;flex-wrap:wrap}
.ev-price{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--gold-soft)}
.ev-price small{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:rgba(244,238,225,.5);display:block;text-transform:uppercase}
.book-btn{
  border:1px solid var(--cream);background:var(--cream);color:var(--night);font-family:var(--mono);
  font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;font-weight:600;padding:.7em 1.2em;
  transition:all .2s ease;
}
.book-btn:hover:not(:disabled){background:var(--gold);border-color:var(--gold);transform:translate(-2px,-2px);box-shadow:3px 3px 0 rgba(163,22,33,.9)}
.book-btn:disabled{background:var(--red);border-color:var(--red);color:var(--cream);cursor:default}
.empty{grid-column:1/-1;text-align:center;border:1px dashed rgba(244,238,225,.3);padding:3rem 1rem;color:rgba(244,238,225,.6)}
.empty .k{color:var(--gold-soft);display:block;margin-bottom:.6rem}
.tickets-note{margin-top:1.8rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,238,225,.45);display:flex;gap:2rem;flex-wrap:wrap}

/* ============ DISPATCHES + SIDEBAR ============ */
.dispatches{padding:4.8rem 0}
.disp-grid{display:grid;grid-template-columns:1fr 330px;gap:3rem;align-items:start}
@media(max-width:980px){.disp-grid{grid-template-columns:1fr}}
.news-item{
  display:grid;grid-template-columns:1fr 130px;gap:1.4rem;padding:1.5rem 0;border-top:var(--border);
  transition:background .25s ease;
}
.news-item:hover{background:rgba(201,162,39,.08)}
.news-item:last-of-type{border-bottom:var(--border)}
.news-item .k{color:var(--red);margin-bottom:.4rem;display:flex;gap:1rem;align-items:center}
.news-item .k time{color:var(--ink-soft)}
.news-item h3{font-family:var(--display);font-weight:700;font-size:1.42rem;line-height:1.15;margin-bottom:.45rem}
.news-item:hover h3{text-decoration:underline;text-decoration-color:var(--gold);text-underline-offset:4px}
.news-item p{font-size:.9rem;color:var(--ink-soft);max-width:56ch}
.news-item .thumb{overflow:hidden;border:var(--border);align-self:start;height:96px}
.news-item .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.news-item:hover .thumb img{transform:scale(1.08)}
@media(max-width:560px){.news-item{grid-template-columns:1fr}.news-item .thumb{height:150px}}

.sidebar>div{border:var(--border);background:var(--paper);margin-bottom:1.6rem}
.side-title{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;
  background:var(--ink);color:var(--cream);padding:.7rem 1rem;display:flex;justify-content:space-between;
}
.side-title i{font-style:normal;color:var(--gold-soft)}
.editors-list{list-style:none;padding:.4rem 1rem .8rem}
.editors-list li a{display:flex;gap:.9rem;padding:.75rem 0;border-bottom:1px solid rgba(25,20,16,.15);align-items:baseline;font-size:.88rem;line-height:1.45}
.editors-list li:last-child a{border-bottom:0}
.editors-list .no{font-family:var(--display);font-weight:900;font-size:1.5rem;color:var(--red);line-height:1;flex:0 0 28px}
.editors-list a:hover{font-style:italic}
.bts img{width:100%;aspect-ratio:14/10;object-fit:cover;border-bottom:var(--border)}
.bts p{font-size:.8rem;color:var(--ink-soft);padding:.9rem 1rem 1.1rem;line-height:1.6}
.prem-list{list-style:none;padding:.5rem 1rem .9rem}
.prem-list li{display:flex;gap:.9rem;padding:.65rem 0;border-bottom:1px dashed rgba(25,20,16,.25);font-size:.85rem;align-items:baseline}
.prem-list li:last-child{border-bottom:0}
.prem-list .d{font-family:var(--mono);font-size:.64rem;color:var(--cream);background:var(--red);padding:.25em .55em;letter-spacing:.1em;flex:0 0 auto}
.prem-list small{display:block;color:var(--ink-soft);font-family:var(--mono);font-size:.62rem;letter-spacing:.08em;text-transform:uppercase;margin-top:.15rem}

/* ============ LETTERS / TESTIMONIALS ============ */
.letters{background:var(--paper-2);border-top:var(--border);padding:4.6rem 0}
.letters-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:2.4rem}
@media(max-width:960px){.letters-grid{grid-template-columns:1fr}}
.letter{
  background:var(--paper);border:var(--border);border-top:5px solid var(--red);padding:1.7rem 1.6rem 1.5rem;
  position:relative;transition:transform .3s ease,box-shadow .3s ease;
}
.letter:hover{transform:translateY(-6px) rotate(-.4deg);box-shadow:8px 8px 0 rgba(25,20,16,.85)}
.letter .qm{font-family:var(--display);font-weight:900;font-size:3.6rem;line-height:.5;color:var(--gold);display:block;margin-bottom:1.1rem}
.letter blockquote{font-family:var(--display);font-style:italic;font-size:1.12rem;line-height:1.5;margin-bottom:1.3rem}
.letter .who{display:flex;align-items:center;gap:.8rem;border-top:1px solid rgba(25,20,16,.2);padding-top:1rem}
.letter .who img{width:42px;height:42px;border-radius:50%;border:2px solid var(--gold)}
.letter .who b{display:block;font-size:.85rem}
.letter .who span{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft)}

/* ============ SUBSCRIBE ============ */
.subscribe{background:var(--red);color:var(--cream);padding:5rem 0;border-top:4px double var(--ink)}
.sub-grid{display:grid;grid-template-columns:1.05fr 1fr;gap:3.4rem;align-items:start}
@media(max-width:940px){.sub-grid{grid-template-columns:1fr}}
.subscribe .eyebrow{color:var(--gold-soft)}.subscribe .eyebrow::before{background:var(--gold-soft)}
.subscribe .sec-title{color:var(--cream)}
.subscribe .sec-title em{color:var(--gold-soft)}
.perks{list-style:none;margin:1.6rem 0 0}
.perks li{display:flex;gap:.9rem;padding:.7rem 0;border-bottom:1px solid rgba(244,238,225,.25);font-size:.95rem}
.perks .tick{font-family:var(--mono);color:var(--gold-soft);font-weight:600}
.sub-note{margin-top:1.3rem;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,225,.6)}
.sub-card{background:var(--cream);color:var(--ink);border:2px solid var(--ink);box-shadow:8px 8px 0 rgba(18,16,11,.55);padding:1.9rem 1.8rem}
.sub-card h3{font-family:var(--display);font-weight:800;font-size:1.5rem;margin-bottom:.4rem}
.sub-card p{font-size:.86rem;color:var(--ink-soft);margin-bottom:1.2rem}
.sub-form{display:flex;gap:.6rem}
.sub-form input{
  flex:1;min-width:0;border:2px solid var(--ink);background:var(--paper);padding:.85em 1em;
  font-family:var(--mono);font-size:.78rem;
}
.sub-form input:focus{outline:3px solid var(--gold)}
.sub-ok{display:none;border:2px dashed var(--gold);background:rgba(201,162,39,.14);padding:1.1rem;font-size:.9rem}
.sub-ok b{color:var(--red)}
.faq{margin-top:1.7rem;border-top:1px solid rgba(25,20,16,.25)}
.faq-item{border-bottom:1px solid rgba(25,20,16,.25)}
.faq-q{
  width:100%;background:none;border:0;text-align:left;display:flex;justify-content:space-between;gap:1rem;
  align-items:center;padding:.95rem 0;font-family:var(--body);font-weight:700;font-size:.9rem;color:var(--ink);
}
.faq-q .pm{font-family:var(--mono);color:var(--red);font-size:1.1rem;transition:transform .35s ease;flex:0 0 auto}
.faq-item.open .pm{transform:rotate(45deg)}
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.2,.7,.2,1)}
.faq-a>div{overflow:hidden}
.faq-a p{font-size:.85rem;color:var(--ink-soft);padding:0 0 1.1rem;max-width:52ch}
.faq-item.open .faq-a{grid-template-rows:1fr}

/* ============ FOOTER ============ */
footer{background:var(--night);color:rgba(244,238,225,.8);border-top:6px solid var(--gold)}
.foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:2.6rem;padding:4rem 0 3rem}
@media(max-width:960px){.foot-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.foot-grid{grid-template-columns:1fr}}
.foot-brand img{width:52px;height:52px;border:1px solid var(--gold);margin-bottom:1rem}
.foot-brand .wm{font-family:var(--display);font-weight:900;font-size:1.6rem;letter-spacing:.06em;text-transform:uppercase;color:var(--cream)}
.foot-brand p{font-size:.85rem;margin-top:.8rem;max-width:34ch;color:rgba(244,238,225,.6)}
.socials{display:flex;gap:.6rem;margin-top:1.2rem;flex-wrap:wrap}
.socials a{
  border:1px solid rgba(244,238,225,.3);font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;padding:.5em .9em;transition:all .2s ease;
}
.socials a:hover{background:var(--gold);border-color:var(--gold);color:var(--night);transform:translateY(-2px)}
.foot-col h4{font-family:var(--mono);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.1rem}
.foot-col ul{list-style:none}
.foot-col li{margin-bottom:.55rem;font-size:.86rem}
.foot-col a:hover{color:var(--gold-soft)}
address{font-style:normal;font-size:.86rem;line-height:2}
address b{color:var(--cream)}
.foot-bottom{border-top:1px solid rgba(244,238,225,.15);padding:1.3rem 0;display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,238,225,.45)}

/* ============ UTILITIES ============ */
.dark{color:var(--cream)}
.toast-zone{position:fixed;left:1.2rem;bottom:1.2rem;z-index:3000;display:flex;flex-direction:column;gap:.7rem;max-width:min(420px,90vw)}
.toast{
  background:var(--ink);color:var(--cream);border:1px solid var(--gold);border-left:5px solid var(--red);
  padding:1rem 1.2rem;font-size:.84rem;line-height:1.5;box-shadow:0 16px 34px rgba(0,0,0,.4);
  opacity:0;transform:translateY(14px);transition:opacity .4s ease,transform .4s cubic-bezier(.2,.7,.2,1.2);
}
.toast.show{opacity:1;transform:none}
.toast .k{color:var(--gold-soft);font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;display:block;margin-bottom:.3rem}
#toTop{
  position:fixed;right:1.2rem;bottom:1.2rem;z-index:1500;width:48px;height:48px;
  background:var(--red);color:var(--cream);border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);
  font-family:var(--mono);font-size:1.1rem;display:none;align-items:center;justify-content:center;
  transition:transform .2s ease;
}
#toTop.show{display:flex}
#toTop:hover{transform:translate(-2px,-2px)}

/* ============ REDUCED MOTION ============ */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal,.mask>span{opacity:1!important;transform:none!important}
  .ticker-track{animation:none!important;flex-wrap:wrap}
}
</style>
</head>
<body id="top">

<!-- ======= TOP BAR ======= -->
<div class="topbar">
  <div class="wrap">
    <span>Vol. XII · No. 47 — The Autumn Critique Number</span>
    <span class="cities">New York · London · Chicago · Los Angeles</span>
    <span id="todayDate">Friday Edition</span>
  </div>
</div>

<!-- ======= MASTHEAD ======= -->
<header class="masthead">
  <div class="corner corner-l">EST. MMXIII<br>INDEPENDENT &amp;<br>READER-FUNDED</div>
  <div class="corner corner-r">SINGLE COPY $6<br>OR TAKE THE<br>SUNDAY SCORE FREE</div>
  <div class="wrap">
    <img class="logomark reveal" src="https://placehold.co/96x96/a31621/f4eee1?text=O.&font=playfair+display" alt="Overture logomark — a red seal with the letter O">
    <h1 class="wordmark reveal"><span class="ov-o">O</span>VERTURE</h1>
    <p class="tagline reveal">The Arts &amp; Entertainment Review — <b>Criticism · Curation · Commission</b></p>
  </div>
</header>

<!-- ======= STICKY NAV ======= -->
<nav class="nav" id="siteNav" aria-label="Primary">
  <div class="wrap">
    <a href="#top" class="nav-brand">
      <img src="https://placehold.co/40x40/a31621/f4eee1?text=O&font=playfair+display" alt="">Overture
    </a>
    <button class="burger" id="burger" aria-expanded="false" aria-controls="navLinks">MENU ☰</button>
    <ul class="nav-links" id="navLinks">
      <li><a href="#desk">Critic's Desk</a></li>
      <li><a href="#artists">Artists</a></li>
      <li><a href="#voices">New Voices</a></li>
      <li><a href="#dispatches">Dispatches</a></li>
      <li><a href="#letters">Letters</a></li>
      <li><a href="#tickets">Tickets</a></li>
    </ul>
    <div class="nav-sub"><a class="btn" href="#subscribe">Subscribe</a></div>
  </div>
  <div class="progress" id="progress"></div>
</nav>

<!-- ======= TICKER ======= -->
<div class="ticker" aria-label="Breaking culture news">
  <div class="ticker-track">
    <div class="ticker-group">
      <span><i>★</i> Aurora Quartet adds a second night at Meridian Hall</span>
      <span><i>★</i> "Neon Reliquary" extended through January 18</span>
      <span><i>★</i> Mara Ellison's "Bach in the Dark" — 82% claimed</span>
      <span><i>★</i> The Last Projectionist crosses $18M in week three</span>
      <span><i>★</i> Cobalt Theatre unveils its 2026 season of machine plays</span>
      <span><i>★</i> Overture commissions three new essays on the dying marquee</span>
    </div>
    <div class="ticker-group" aria-hidden="true">
      <span><i>★</i> Aurora Quartet adds a second night at Meridian Hall</span>
      <span><i>★</i> "Neon Reliquary" extended through January 18</span>
      <span><i>★</i> Mara Ellison's "Bach in the Dark" — 82% claimed</span>
      <span><i>★</i> The Last Projectionist crosses $18M in week three</span>
      <span><i>★</i> Cobalt Theatre unveils its 2026 season of machine plays</span>
      <span><i>★</i> Overture commissions three new essays on the dying marquee</span>
    </div>
  </div>
</div>

<main>
<!-- ======= FRONT PAGE ======= -->
<section class="frontpage" id="frontpage">
  <div class="wrap fp-grid">

    <aside class="fp-rail">
      <p class="rail-title">In This Issue</p>
      <ul class="issue-index">
        <li><a href="#frontpage"><span class="no">01</span><span class="t">The Lead Critique</span></a></li>
        <li><a href="#desk"><span class="no">02</span><span class="t">The Critic's Desk</span></a></li>
        <li><a href="#artists"><span class="no">03</span><span class="t">Artist Spotlight</span></a></li>
        <li><a href="#voices"><span class="no">04</span><span class="t">New Voices 2025</span></a></li>
        <li><a href="#tickets"><span class="no">05</span><span class="t">The Box Office</span></a></li>
        <li><a href="#dispatches"><span class="no">06</span><span class="t">Dispatches &amp; Letters</span></a></li>
      </ul>
      <div class="numbers">
        <h4>Tonight, by the Numbers</h4>
        <div class="stat"><span class="n" data-count="42">0</span><span class="l">curtain calls across our four cities</span></div>
        <div class="stat"><span class="n" data-count="3412">0</span><span class="l">seats released this week via our desk</span></div>
        <div class="stat"><span class="n" data-count="9">0</span><span class="l">new critiques filed, one withheld pending revision</span></div>
      </div>
    </aside>

    <article class="fp-main">
      <p class="eyebrow scramble">01 · The Lead Critique — Film</p>
      <h2 class="fp-headline" id="leadHeadline">
        <span class="mask"><span>Celluloid's Last Sermon:</span></span>
        <span class="mask"><span style="transition-delay:.12s"><em>"The Last Projectionist"</em></span></span>
        <span class="mask"><span style="transition-delay:.24s">Earns Its Halo</span></span>
      </h2>
      <div class="fp-meta">
        <span class="stars" aria-label="Four and a half stars">★★★★<span class="stars-dim">★</span></span>
        <span class="byline"><img src="https://i.pravatar.cc/68?u=imani-walker" alt="Portrait of Imani Walker"><span>By <b>Imani Walker</b> · Senior Film Critic</span></span>
        <span>14 min read</span>
      </div>
      <p class="lede">The first image in <em>The Last Projectionist</em> is not an image at all but a sound: the flutter and hiss of a carbon-arc lamp waking up in an empty booth. Director Tomas Ferreira gives us two hours and nineteen minutes of endings — of one man, one theatre, one format — and somehow assembles them into the most luminous argument for going to the movies I have seen in a decade.</p>
      <p>Elias Vann, played with weathered precision by Denis Okonjo, is the final 35mm projectionist at the fictional Granada Palais, a house slated for conversion into "luxury screening pods." Ferreira's camera treats the booth like a cathedral nave: every splice, every reel change is a liturgy. The curation of light itself becomes the plot, and the critique the film levels at our convenience-first culture lands not as polemic but as elegy.</p>
      <p>What elevates the picture past nostalgia is its sound design and a third act that refuses consolation. When the final changeover cue flashes on screen, the film asks you to notice it — to be one of the few people in the room who still knows what it means.</p>
      <div class="fp-cta">
        <a class="btn" href="#desk">Read the Full Critique →</a>
        <a class="btn btn-ghost" href="#tickets">▶ Watch Preview</a>
      </div>
    </article>

    <aside class="fp-visual">
      <figure class="frame reveal">
        <span class="stamp">Issue 47<br>★★★★½</span>
        <div class="imgbox kb">
          <img src="https://picsum.photos/seed/overture-projection-booth/860/1020" alt="A dim projection booth, beams of light cutting through dust toward the screen">
        </div>
        <figcaption>ABOVE — The Granada Palais booth at reel five. Cinematographer Ana Serra shot the entire film on the stock it eulogizes. Courtesy Meridian Pictures.</figcaption>
      </figure>
      <div class="listening reveal">
        <img src="https://picsum.photos/seed/overture-listening-room/300/300" alt="Vinyl record on a turntable in warm light">
        <div>
          <p class="kicker k">The Listening Room · Vinyl of the Week</p>
          <h4>"Hymns for Empty Theatres" — Ada Cruz</h4>
          <p>Field recordings from six shuttered cinemas, scored for prepared piano. <a class="u" href="#desk">Our review →</a></p>
        </div>
      </div>
    </aside>

  </div>
</section>

<!-- ======= CRITIC'S DESK ======= -->
<section class="desk" id="desk">
  <div class="wrap">
    <div class="desk-head reveal">
      <div>
        <p class="eyebrow scramble">02 · Reviews</p>
        <h2 class="sec-title">The Critic's <em>Desk</em></h2>
      </div>
      <a class="btn btn-ghost" href="#subscribe">All Critiques →</a>
    </div>

    <div class="desk-grid">
      <article class="review-card reveal">
        <span class="pick-ribbon">Critic's Pick</span>
        <div class="imgbox"><img src="https://picsum.photos/seed/overture-hedda-stage/720/480" alt="A stark stage set with a single chair under hard light"></div>
        <div class="body">
          <span class="chip chip-red">Stage</span>
          <h3>Hedda, Reclaimed at the Northlight</h3>
          <p class="x">Director Priya Ansari strips Ibsen to its studs and hands the revolver to the audience — figuratively, until the final scene, when it stops being figurative. A masterclass in blocking.</p>
          <span class="stars">★★★★★</span>
          <div class="foot"><span>Theo Brandt</span><a class="u" href="#subscribe">Read Review</a></div>
        </div>
      </article>

      <article class="review-card reveal" style="transition-delay:.08s">
        <div class="imgbox"><img src="https://picsum.photos/seed/overture-vinyl-stack/720/480" alt="Stack of vinyl records in a warm listening room"></div>
        <div class="body">
          <span class="chip">Music</span>
          <h3>Ada Cruz — "Hymns for Empty Theatres"</h3>
          <p class="x">Dust, velvet and decay pressed to wax. Cruz recorded room tone in six condemned cinemas, then answered it with piano. The critique writes itself; we merely transcribed.</p>
          <span class="stars">★★★★<span class="stars-dim">★</span></span>
          <div class="foot"><span>Ruthie Fontaine</span><a class="u" href="#subscribe">Read Review</a></div>
        </div>
      </article>

      <article class="review-card reveal" style="transition-delay:.16s">
        <div class="imgbox"><img src="https://picsum.photos/seed/overture-neon-gallery/720/480" alt="Neon light installation reflected on a dark gallery floor"></div>
        <div class="body">
          <span class="chip">Exhibition</span>
          <h3>Neon Reliquary, MOCA Annex</h3>
          <p class="x">Twenty-two artists working in gas, glass and current. The curation is almost too clever — until Room Four, where a single flickering "OPEN" sign outperforms everything around it.</p>
          <span class="stars">★★★<span class="stars-dim">★★</span></span>
          <div class="foot"><span>Imani Walker</span><a class="u" href="#subscribe">Read Review</a></div>
        </div>
      </article>

      <article class="review-card reveal" style="transition-delay:.24s">
        <div class="imgbox"><img src="https://picsum.photos/seed/overture-brass-ballroom/720/480" alt="Brass instruments glinting under ballroom chandeliers"></div>
        <div class="body">
          <span class="chip">Live</span>
          <h3>Brass Choirs at the Ansonia Ballroom</h3>
          <p class="x">Forty horns, one room, zero microphones. The South Side brass tradition has rarely sounded this civic — the encore was commissioned by the audience, in real time, with raised hands.</p>
          <span class="stars">★★★★<span class="stars-dim">★</span></span>
          <div class="foot"><span>Theo Brandt</span><a class="u" href="#subscribe">Read Review</a></div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ======= ARTIST SPOTLIGHT ======= -->
<section class="spotlight" id="artists">
  <div class="wrap spot-grid">

    <aside class="spot-left reveal">
      <figure class="frame">
        <div class="imgbox"><img src="https://picsum.photos/seed/overture-cellist-mara/760/950" alt="Cellist Mara Ellison in low amber light, bow raised"></div>
        <figcaption>Portrait by L. Okafor, taken during the Crypt Sessions tech check.</figcaption>
      </figure>
      <blockquote class="pull">"I want the audience to hear the room, not just the instrument."</blockquote>
      <dl class="vitals">
        <div><dt>Subject</dt><dd>Mara Ellison</dd></div>
        <div><dt>Medium</dt><dd>Cello &amp; electronics</dd></div>
        <div><dt>Based</dt><dd>New York</dd></div>
        <div><dt>Next</dt><dd>Bach in the Dark, Nov 28</dd></div>
      </dl>
    </aside>

    <article class="spot-right">
      <p class="eyebrow scramble">03 · Artist Spotlight</p>
      <h2>In the Key of Shadow: <em>Mara Ellison</em> Plays the Dark Rooms</h2>
      <div class="body-copy">
        <p class="dropcap">Six years ago, Mara Ellison walked out of a conservatory recital mid-Sarabande, not in protest but in pursuit. "The lights were doing the listening for everyone," she tells Overture from a diner two blocks above the Old Lantern Church, where she now performs her entire season in near-total darkness. Her premise is deceptively simple: remove the spectacle, keep the sound, and see who is still breathing at the final chord.</p>
        <p>The results have turned her Crypt Sessions into the hardest ticket on our box office. Audiences enter by torchlight, surrender their phones into velvet bags, and sit with unaccompanied Bach arranged for a room — not against it. Ellison commissioned a new suite from composer Ade Okonkwo for the series, a forty-minute work scored for cello, bowed vibraphone and the church's own heating pipes. It is the kind of commission most ensembles only grant posthumously; she is thirty-one.</p>

        <h3 class="subhead">On Curation &amp; Critique</h3>
        <p>Ellison programs her own seasons with a curator's ruthlessness. No encores on principle — "an encore is an apology for the concert you just gave" — and every program ends in silence, a full minute of it, lights still down. When our desk gave her spring cycle four stars, she framed the review and hung it backstage, marked up with her own marginalia. "The critic was wrong about the Ligeti," she laughs, "but beautifully wrong. I kept the beauty."</p>

        <figure class="spot-fig">
          <div class="imgbox"><img src="https://picsum.photos/seed/overture-crypt-session/760/440" alt="Audience silhouettes in candlelight inside a stone crypt"></div>
          <figcaption>The Old Lantern Church, Crypt Session No. 14. All photography banned by house rule; this frame was the last permitted.</figcaption>
        </figure>

        <p>Her advice to emerging players is unfashionable: play fewer notes, take longer bows, learn the names of the people who run the fly systems. "The industry talks about building audiences," she says, sliding a quarter across the table for her third coffee. "You don't build them. You earn them, one dark room at a time." The November session is already 82% claimed. We expect it gone by press time.</p>

        <div class="inline-review">
          <p class="q">"Ellison doesn't perform Bach so much as let Bach happen to her. The Crypt Sessions are the most important recital series in the city right now."</p>
          <div class="meta"><span>— Overture Music Desk, Spring Cycle Review</span><span class="stars">★★★★★</span></div>
        </div>

        <div class="spot-cta">
          <a class="btn" href="#tickets">Book the Crypt Session</a>
          <span class="hint">↑ Opens the Ticket Finder, pre-loaded with her November dates.</span>
        </div>
      </div>
    </article>

  </div>
</section>

<!-- ======= NEW VOICES ======= -->
<section class="voices" id="voices">
  <div class="wrap">
    <div class="voices-head reveal">
      <div>
        <p class="eyebrow scramble">04 · Emerging Talent</p>
        <h2 class="sec-title">New Voices, <em>2025</em></h2>
      </div>
      <p>Each autumn our editors, critics and readers nominate artists we believe will shape the next decade. These five made the final wall. None has a publicist. All have our attention — and, this year, a small Overture commission toward their next work.</p>
    </div>

    <div class="postcards">
      <article class="postcard reveal">
        <img src="https://picsum.photos/seed/overture-juno-reyes/440/540" alt="Juno Reyes at a basement synthesizer rig">
        <h3>Juno Reyes</h3>
        <p class="disc">Dream-Pop · Brooklyn</p>
        <p>Cathedral reverb on a basement budget. Her demo tape sold out two pressings before she played a single show.</p>
        <a href="#tickets">▶ Watch Preview</a>
      </article>
      <article class="postcard reveal" style="transition-delay:.06s">
        <img src="https://picsum.photos/seed/overture-okonkwo-ensemble/440/540" alt="The Okonkwo Ensemble mid-set, brass and drums">
        <h3>Okonkwo Ensemble</h3>
        <p class="disc">Afro-Jazz · London</p>
        <p>Seven players, two continents, one relentless polyrhythm. Their residency at the Cobalt is the talk of the South Bank.</p>
        <a href="#tickets">▶ Watch Preview</a>
      </article>
      <article class="postcard reveal" style="transition-delay:.12s">
        <img src="https://picsum.photos/seed/overture-marchetti-studio/440/540" alt="Felix Marchetti welding a steel sculpture in his studio">
        <h3>Felix Marchetti</h3>
        <p class="disc">Sculpture · Chicago</p>
        <p>Former shipyard welder making monuments to ordinary hands. His first museum survey opens inside Neon Reliquary.</p>
        <a href="#dispatches">Read Profile →</a>
      </article>
      <article class="postcard reveal" style="transition-delay:.18s">
        <img src="https://picsum.photos/seed/overture-sana-qadir/440/540" alt="Sana Qadir framing a documentary shot at dusk">
        <h3>Sana Qadir</h3>
        <p class="disc">Documentary · Los Angeles</p>
        <p>Her short on the last drive-in projectionist in the Mojave took jury honors — and made three festival programmers cry, on record.</p>
        <a href="#tickets">▶ Watch Preview</a>
      </article>
      <article class="postcard reveal" style="transition-delay:.24s">
        <img src="https://picsum.photos/seed/overture-birch-harrow/440/540" alt="Folk duo Birch & Harrow on a porch with banjo and fiddle">
        <h3>Birch &amp; Harrow</h3>
        <p class="disc">Folk Duo · Asheville</p>
        <p>Two voices, one porch, no drums. They record in single takes and refuse edits — "a song should keep its scars."</p>
        <a href="#tickets">▶ Watch Preview</a>
      </article>
    </div>
  </div>
</section>

<!-- ======= TICKET FINDER ======= -->
<section class="tickets dark" id="tickets">
  <div class="wrap">
    <div class="tickets-head reveal">
      <p class="eyebrow scramble">05 · The Box Office</p>
      <h2 class="sec-title">The Overture <em style="color:var(--gold-soft)">Ticket Finder</em></h2>
      <p>Live availability from the houses and venues our critics cover — updated hourly, held without fees, booked in two clicks. Find your seat before the review convinces everyone else.</p>
    </div>

    <div class="toolbar reveal" role="search">
      <input type="search" id="tfSearch" placeholder="Search artist, show or venue…" aria-label="Search events">
      <select id="tfCity" aria-label="Filter by city">
        <option value="all">All Cities</option>
        <option>New York</option><option>London</option><option>Chicago</option><option>Los Angeles</option>
      </select>
      <select id="tfMonth" aria-label="Filter by month">
        <option value="all">All Months</option>
        <option>November</option><option>December</option>
      </select>
      <div class="pills" id="tfPills">
        <button class="pill active" data-cat="all">All</button>
        <button class="pill" data-cat="Music">Music</button>
        <button class="pill" data-cat="Film">Film</button>
        <button class="pill" data-cat="Stage">Stage</button>
        <button class="pill" data-cat="Art">Art</button>
      </div>
    </div>

    <div class="result-meta">
      <span id="tfCount">Showing 0 of 0 listings</span>
      <span>Sorted by date · <b>Holds are free for 20 minutes</b></span>
    </div>

    <div class="ev-grid" id="tfGrid" aria-live="polite"></div>

    <div class="tickets-note">
      <span>128 venues tracked across 4 cities</span>
      <span>3,412 seats released this week</span>
      <span>Zero booking fees — ever</span>
    </div>
  </div>
</section>

<!-- ======= DISPATCHES + SIDEBAR ======= -->
<section class="dispatches" id="dispatches">
  <div class="wrap">
    <div class="reveal" style="margin-bottom:2.2rem">
      <p class="eyebrow scramble">06 · The Wire</p>
      <h2 class="sec-title">Dispatches from the <em>Industry</em></h2>
    </div>

    <div class="disp-grid">
      <div>
        <article class="news-item reveal">
          <div>
            <p class="kicker k"><span class="chip chip-red">Stage</span><time>2 hours ago</time></p>
            <h3>City Ballet Names Its First Guest Conductor from the Pit Orchestra</h3>
            <p>After nineteen seasons in the pit, violinist-turned-batonist Elena Marsh will lead the winter repertoire — a promotion that insiders call "the quietest institutional correction in a decade."</p>
          </div>
          <div class="thumb"><img src="https://picsum.photos/seed/overture-pit-orchestra/300/240" alt="Musicians in an orchestra pit under stage light"></div>
        </article>

        <article class="news-item reveal">
          <div>
            <p class="kicker k"><span class="chip">Industry</span><time>Yesterday</time></p>
            <h3>The $40M Question: Who Pays to Restore the Grand Marquees?</h3>
            <p>Six historic theatre facades are failing their inspections, and the city's arts trust has offered to match private donations two-to-one. Our investigation maps every bulb, every grant, every grudge.</p>
          </div>
          <div class="thumb"><img src="https://picsum.photos/seed/overture-grand-marquee/300/240" alt="An aging theatre marquee glowing at dusk"></div>
        </article>

        <article class="news-item reveal">
          <div>
            <p class="kicker k"><span class="chip chip-red">Film</span><time>2 days ago</time></p>
            <h3>Festival Shorts, Quiet Revolution: Six in Ten Are First-Time Directors</h3>
            <p>The autumn festival circuit is handing the keys to debuts at an unprecedented rate. Programmers say the curation brief changed this year: "fewer proofs of craft, more evidence of nerve."</p>
          </div>
          <div class="thumb"><img src="https://picsum.photos/seed/overture-festival-reel/300/240" alt="Film reels and a clapperboard on an editing desk"></div>
        </article>

        <article class="news-item reveal">
          <div>
            <p class="kicker k"><span class="chip">Visual Art</span><time>3 days ago</time></p>
            <h3>Gallery Night Returns — Later Hours, Live Scoring, No Wine Budget Cuts</h3>
            <p>Downtown's longest-running open-studio crawl expands to eleven venues and commissions the Okonkwo Ensemble to score the route. Doors at seven; the last chord lands near midnight.</p>
          </div>
          <div class="thumb"><img src="https://picsum.photos/seed/overture-gallery-night/300/240" alt="Crowds outside a lit gallery at night"></div>
        </article>
      </div>

      <aside class="sidebar">
        <div class="reveal">
          <p class="side-title"><span>Editor's Choice</span><i>✦</i></p>
          <ul class="editors-list">
            <li><a href="#desk"><span class="no">1</span>The Granada Palais, before it goes</a></li>
            <li><a href="#artists"><span class="no">2</span>Why Ellison bans the encore</a></li>
            <li><a href="#voices"><span class="no">3</span>Sana Qadir's desert elegy</a></li>
            <li><a href="#desk"><span class="no">4</span>Hedda, minus the wallpaper</a></li>
            <li><a href="#dispatches"><span class="no">5</span>Field notes from the fly system</a></li>
          </ul>
        </div>

        <div class="bts reveal">
          <p class="side-title"><span>Behind the Scenes</span><i>✦</i></p>
          <img src="https://picsum.photos/seed/overture-fly-system/560/400" alt="Ropes and counterweights of a theatre fly system high above the stage">
          <p>The fly system above Center Stage, photographed forty feet up during Tuesday's tech rehearsal. "If the rigging sings," says head flyman Des Arceneaux, "the show is going to be good. Every time."</p>
        </div>

        <div class="reveal">
          <p class="side-title"><span>Upcoming Premieres</span><i>✦</i></p>
          <ul class="prem-list">
            <li><span class="d">NOV 16</span><div>The Last Projectionist — UK premiere<small>Brixton Palais · London</small></div></li>
            <li><span class="d">NOV 21</span><div>Hedda, Reclaimed — opening night<small>Northlight Theatre · Chicago</small></div></li>
            <li><span class="d">NOV 22</span><div>Neon Reliquary — members' preview<small>MOCA Annex · Los Angeles</small></div></li>
            <li><span class="d">DEC 05</span><div>A Chorus of Machines — world premiere<small>Cobalt Theatre · London</small></div></li>
          </ul>
        </div>
      </aside>
    </div>
  </div>
</section>

<!-- ======= LETTERS / TESTIMONIALS ======= -->
<section class="letters" id="letters">
  <div class="wrap">
    <div class="reveal">
      <p class="eyebrow scramble">07 · Correspondence</p>
      <h2 class="sec-title">Letters to the <em>Desk</em></h2>
    </div>
    <div class="letters-grid">
      <article class="letter reveal">
        <span class="qm">"</span>
        <blockquote>Your four-star critique of our spring season moved more tickets in a weekend than our entire paid campaign. We've stopped arguing with critics and started reading them.</blockquote>
        <div class="who">
          <img src="https://i.pravatar.cc/84?u=dana-whitfield" alt="Portrait of Dana Whitfield">
          <div><b>Dana Whitfield</b><span>Director of Programming, Meridian Hall</span></div>
        </div>
      </article>
      <article class="letter reveal" style="transition-delay:.1s">
        <span class="qm">"</span>
        <blockquote>The Sunday Score is the only newsletter I open before coffee. Half the time it tells me what to see; the other half it tells me why what I saw mattered. Both halves are right.</blockquote>
        <div class="who">
          <img src="https://i.pravatar.cc/84?u=miguel-aranda" alt="Portrait of Miguel Aranda">
          <div><b>Miguel Aranda</b><span>Subscriber since 2017 · Madrid</span></div>
        </div>
      </article>
      <article class="letter reveal" style="transition-delay:.2s">
        <span class="qm">"</span>
        <blockquote>I was one of your New Voices in 2022 with no press kit and a borrowed amp. The profile ran on a Thursday; by Saturday the venue had doubled our capacity. That commission changed my year.</blockquote>
        <div class="who">
          <img src="https://i.pravatar.cc/84?u=leah-soren" alt="Portrait of Leah Soren">
          <div><b>Leah Soren</b><span>Singer-Songwriter · New Voices '22</span></div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ======= SUBSCRIBE + FAQ ======= -->
<section class="subscribe" id="subscribe">
  <div class="wrap sub-grid">
    <div class="reveal">
      <p class="eyebrow scramble">08 · Membership</p>
      <h2 class="sec-title">Take <em>The Sunday Score.</em></h2>
      <p style="max-width:52ch;font-size:1.02rem">Our weekend letter arrives every Sunday at 7am: the week's critiques, one long read worth canceling brunch for, and first access to every seat we hold.</p>
      <ul class="perks">
        <li><span class="tick">✚</span>Every critique, in full, the moment it's filed — including the ones we hold for revision</li>
        <li><span class="tick">✚</span>48-hour early access to the Ticket Finder before general release</li>
        <li><span class="tick">✚</span>Quarterly print annual, mailed flat, smelling faintly of ink</li>
        <li><span class="tick">✚</span>Invitations to members' previews, tech rehearsals and Crypt Sessions</li>
        <li><span class="tick">✚</span>Your name in the colophon, if you'd like it. Many do.</li>
      </ul>
      <p class="sub-note">Free forever · No ads on the reading experience · 24,180 readers last Sunday</p>
    </div>

    <div class="reveal" style="transition-delay:.12s">
      <div class="sub-card">
        <h3>Join the readership</h3>
        <p>One email, once a week. Unsubscribe with a single click — we'll even recommend a farewell read.</p>
        <form class="sub-form" id="subForm" novalidate>
          <input type="email" id="subEmail" placeholder="you@somewhere.com" aria-label="Email address" required>
          <button class="btn btn-red" type="submit">Subscribe Free</button>
        </form>
        <div class="sub-ok" id="subOk">
          <b>Welcome to the house.</b> Your first Sunday Score arrives this weekend. Until then — the projection booth is open.
        </div>
      </div>

      <div class="faq" id="faq">
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">What do I get with Overture membership? <span class="pm">+</span></button>
          <div class="faq-a"><div><p>Everything above: full critiques, the print annual, early ticket access and members' previews. There is no paid tier — Overture is funded by readers and by commissions we refuse to let touch the criticism.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">Can I really book tickets through the Ticket Finder? <span class="pm">+</span></button>
          <div class="faq-a"><div><p>Yes. We hold inventory directly with partner venues at face value with zero booking fees. A hold reserves your seats for twenty minutes while you complete checkout through the house box office.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">How do your critics choose what to review? <span class="pm">+</span></button>
          <div class="faq-a"><div><p>By argument. Every Monday the desk proposes, fights and finally votes on a slate. We cover premieres and we cover ninth-week Tuesday nights, because a show's truth often lives in the latter. Venues cannot buy, influence or preview a critique.</p></div></div>
        </div>
        <div class="faq-item">
          <button class="faq-q" aria-expanded="false">Do you accept submissions from artists? <span class="pm">+</span></button>
          <div class="faq-a"><div><p>For New Voices, yes — twice a year, through the submissions desk at <em>voices@overture.review</em>. Send a link, not an attachment, and one honest paragraph about what the work is trying to do. We read all of them.</p></div></div>
        </div>
      </div>
    </div>
  </div>
</section>
</main>

<!-- ======= FOOTER ======= -->
<footer id="colophon">
  <div class="wrap foot-grid">
    <div class="foot-brand">
      <img src="https://placehold.co/96x96/a31621/f4eee1?text=O.&font=playfair+display" alt="Overture logomark">
      <p class="wm">Overture</p>
      <p>An independent journal of music, cinema, stage and visual art. Criticism without fear, curation without snobbery, and a box office without fees.</p>
      <div class="socials">
        <a href="#" aria-label="Instagram">Instagram</a><a href="#" aria-label="X">X / Twitter</a>
        <a href="#" aria-label="YouTube">YouTube</a><a href="#" aria-label="RSS">RSS</a>
      </div>
    </div>
    <div class="foot-col">
      <h4>Sections</h4>
      <ul>
        <li><a class="u" href="#desk">The Critic's Desk</a></li>
        <li><a class="u" href="#artists">Artist Spotlights</a></li>
        <li><a class="u" href="#voices">New Voices</a></li>
        <li><a class="u" href="#tickets">Ticket Finder</a></li>
        <li><a class="u" href="#dispatches">Dispatches</a></li>
        <li><a class="u" href="#subscribe">The Sunday Score</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h4>The Masthead</h4>
      <ul>
        <li><a class="u" href="#">About Overture</a></li>
        <li><a class="u" href="#">Our Critics</a></li>
        <li><a class="u" href="#">Ethics &amp; Corrections</a></li>
        <li><a class="u" href="#">Advertise</a></li>
        <li><a class="u" href="#">Careers</a></li>
        <li><a class="u" href="#">Press Kit</a></li>
      </ul>
    </div>
    <div class="foot-col">
      <h4>Contact the Desk</h4>
      <address>
        <b>Overture Media Group</b><br>
        Room 412, 88 Meridian Row<br>
        New York, NY 10013<br>
        <a class="u" href="tel:+12125550147">(212) 555-0147</a><br>
        <a class="u" href="mailto:desk@overture.review">desk@overture.review</a>
      </address>
    </div>
  </div>
  <div class="wrap foot-bottom">
    <span>© 2025 Overture Media Group. All rights, and most wrongs, reserved.</span>
    <span><a class="u" href="#">Privacy</a> &nbsp;·&nbsp; <a class="u" href="#">Terms</a></span>
    <span>Printed nowhere. Read everywhere.</span>
  </div>
</footer>

<div class="toast-zone" id="toastZone" aria-live="polite"></div>
<button id="toTop" aria-label="Back to top">↑</button>

<script>
(function(){
  "use strict";
  var RM = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

  /* ---------- Today's date in masthead ---------- */
  var d = new Date();
  document.getElementById("todayDate").textContent =
    d.toLocaleDateString("en-US",{weekday:"long", month:"long", day:"numeric", year:"numeric"}) + " Edition";

  /* ---------- Reading progress + back-to-top ---------- */
  var progress = document.getElementById("progress"), toTop = document.getElementById("toTop");
  window.addEventListener("scroll", function(){
    var h = document.documentElement, max = h.scrollHeight - h.clientHeight;
    progress.style.width = (max > 0 ? (h.scrollTop / max) * 100 : 0) + "%";
    toTop.classList.toggle("show", h.scrollTop > 700);
  }, {passive:true});
  toTop.addEventListener("click", function(){ window.scrollTo({top:0, behavior: RM ? "auto":"smooth"}); });

  /* ---------- Mobile nav ---------- */
  var burger = document.getElementById("burger"), links = document.getElementById("navLinks");
  burger.addEventListener("click", function(){
    var open = links.classList.toggle("open");
    burger.setAttribute("aria-expanded", open);
    burger.textContent = open ? "CLOSE ✕" : "MENU ☰";
  });
  links.addEventListener("click", function(e){
    if(e.target.tagName === "A"){ links.classList.remove("open"); burger.textContent = "MENU ☰"; }
  });

  /* ---------- Reveal on scroll ---------- */
  var io = new IntersectionObserver(function(entries){
    entries.forEach(function(en){
      if(en.isIntersecting){ en.target.classList.add("in"); io.unobserve(en.target); }
    });
  }, {threshold:.14});
  document.querySelectorAll(".reveal, #leadHeadline").forEach(function(el){ io.observe(el); });

  /* ---------- Scramble-decode eyebrows ---------- */
  var CHARS = "▓▒░OVERTUE#*·";
  function decode(el){
    var target = el.textContent, frame = 0, total = 22;
    var iv = setInterval(function(){
      frame++;
      el.textContent = target.split("").map(function(ch,i){
        if(ch === " ") return " ";
        return (i < (frame/total) * target.length) ? ch : CHARS[Math.floor(Math.random()*CHARS.length)];
      }).join("");
      if(frame >= total){ el.textContent = target; clearInterval(iv); }
    }, 34);
  }
  if(!RM){
    var sio = new IntersectionObserver(function(entries){
      entries.forEach(function(en){
        if(en.isIntersecting){ decode(en.target); sio.unobserve(en.target); }
      });
    }, {threshold:.5});
    document.querySelectorAll(".scramble").forEach(function(el){ sio.observe(el); });
  }

  /* ---------- Count-up stats ---------- */
  function countUp(el){
    var end = parseInt(el.dataset.count,10), start = 0, dur = 1200, t0 = null;
    if(RM){ el.textContent = end.toLocaleString(); return; }
    function step(ts){
      if(!t0) t0 = ts;
      var p = Math.min((ts - t0)/dur, 1), eased = 1 - Math.pow(1-p, 3);
      el.textContent = Math.round(eased * end).toLocaleString();
      if(p < 1) requestAnimationFrame(step);
    }
    requestAnimationFrame(step);
  }
  var cio = new IntersectionObserver(function(entries){
    entries.forEach(function(en){
      if(en.isIntersecting){ countUp(en.target); cio.unobserve(en.target); }
    });
  }, {threshold:.6});
  document.querySelectorAll("[data-count]").forEach(function(el){ cio.observe(el); });

  /* ---------- Toast ---------- */
  var zone = document.getElementById("toastZone");
  function toast(kicker, msg){
    var t = document.createElement("div");
    t.className = "toast";
    t.innerHTML = '<span class="k">' + kicker + '</span>' + msg;
    zone.appendChild(t);
    requestAnimationFrame(function(){ t.classList.add("show"); });
    setTimeout(function(){ t.classList.remove("show"); setTimeout(function(){ t.remove(); }, 450); }, 4600);
  }

  /* ---------- TICKET FINDER ---------- */
  var EVENTS = [
    {id:1, title:"Aurora Quartet — Second Night", cat:"Music", city:"New York", venue:"Meridian Hall", month:"November", day:14, wd:"FRI", price:48, stock:62},
    {id:2, title:"The Last Projectionist: Director's Cut", cat:"Film", city:"London", venue:"Brixton Palais", month:"November", day:16, wd:"SUN", price:19, stock:84},
    {id:3, title:"Hedda, Reclaimed — Opening", cat:"Stage", city:"Chicago", venue:"Northlight Theatre", month:"November", day:21, wd:"FRI", price:65, stock:41},
    {id:4, title:"Neon Reliquary: Members' Preview", cat:"Art", city:"Los Angeles", venue:"MOCA Annex", month:"November", day:22, wd:"SAT", price:25, stock:90},
    {id:5, title:"Mara Ellison: Bach in the Dark", cat:"Music", city:"New York", venue:"The Old Lantern Church", month:"November", day:28, wd:"FRI", price:55, stock:18},
    {id:6, title:"Midnight Marquee — Live Score", cat:"Film", city:"New York", venue:"The Granada", month:"December", day:2, wd:"TUE", price:32, stock:70},
    {id:7, title:"A Chorus of Machines — World Premiere", cat:"Stage", city:"London", venue:"Cobalt Theatre", month:"December", day:5, wd:"FRI", price:58, stock:55},
    {id:8, title:"Paper & Pigment: Winter Salon", cat:"Art", city:"Los Angeles", venue:"Echo Annex Gallery", month:"December", day:6, wd:"SAT", price:22, stock:76},
    {id:9, title:"Brass Choirs of the South Side", cat:"Music", city:"Chicago", venue:"Ansonia Ballroom", month:"December", day:12, wd:"FRI", price:35, stock:77},
    {id:10, title:"Cold Reading: New Plays Festival", cat:"Stage", city:"Los Angeles", venue:"Echo Playhouse", month:"December", day:14, wd:"SUN", price:40, stock:12}
  ];
  var state = {cat:"all", city:"all", month:"all", q:""};
  var held = {};
  var grid = document.getElementById("tfGrid"), count = document.getElementById("tfCount");

  function availLabel(s){ return s < 30 ? "Almost gone" : (s < 65 ? "Selling fast" : "Good availability"); }

  function render(){
    var list = EVENTS.filter(function(ev){
      if(state.cat !== "all" && ev.cat !== state.cat) return false;
      if(state.city !== "all" && ev.city !== state.city) return false;
      if(state.month !== "all" && ev.month !== state.month) return false;
      if(state.q){
        var hay = (ev.title + " " + ev.venue + " " + ev.city + " " + ev.cat).toLowerCase();
        if(hay.indexOf(state.q.toLowerCase()) === -1) return false;
      }
      return true;
    });
    count.innerHTML = "Showing <b>" + list.length + "</b> of " + EVENTS.length + " listings";

    if(!list.length){
      grid.innerHTML = '<div class="empty"><span class="kicker k">The house lights are up.</span>No listings match that combination — try widening your city or month, or reset the filters below.<br><br><button class="pill" id="tfReset" style="border-color:var(--gold);color:var(--gold)">Reset all filters</button></div>';
      document.getElementById("tfReset").addEventListener("click", function(){
        state = {cat:"all", city:"all", month:"all", q:""};
        document.getElementById("tfSearch").value = "";
        document.getElementById("tfCity").value = "all";
        document.getElementById("tfMonth").value = "all";
        document.querySelectorAll("#tfPills .pill").forEach(function(p){ p.classList.toggle("active", p.dataset.cat === "all"); });
        render();
      });
      return;
    }

    grid.innerHTML = list.map(function(ev){
      var isHeld = held[ev.id], low = ev.stock < 30;
      return '<article class="ev-card">' +
        '<div class="ev-date"><div class="m">' + ev.month.slice(0,3).toUpperCase() + '</div><div class="d">' + String(ev.day).padStart(2,"0") + '</div><div class="wd">' + ev.wd + '</div></div>' +
        '<div class="ev-info">' +
          '<span class="chip">' + ev.cat + '</span>' +
          '<h3>' + ev.title + '</h3>' +
          '<p class="ev-venue">' + ev.venue + ' · ' + ev.city + '</p>' +
          '<div class="meter' + (low ? ' low' : '') + '"><i style="width:' + ev.stock + '%"></i></div>' +
          '<p class="avail' + (low ? ' low' : '') + '">' + availLabel(ev.stock) + ' — ' + ev.stock + '% remaining</p>' +
          '<div class="ev-buy">' +
            '<span class="ev-price">$' + ev.price + '<small>from · face value</small></span>' +
            '<button class="book-btn" data-id="' + ev.id + '"' + (isHeld ? ' disabled' : '') + '>' + (isHeld ? "On Hold ✓" : "Book Now") + '</button>' +
          '</div>' +
        '</div>' +
      '</article>';
    }).join("");

    grid.querySelectorAll(".book-btn").forEach(function(btn){
      btn.addEventListener("click", function(){
        var ev = EVENTS.find(function(e){ return e.id === parseInt(btn.dataset.id,10); });
        held[ev.id] = true;
        btn.disabled = true; btn.textContent = "On Hold ✓";
        toast("🎟 Seat hold confirmed", ev.title + " — " + ev.venue + ", " + ev.city + ". Two seats held for 20 minutes; confirmation sent to your inbox.");
      });
    });
  }

  document.getElementById("tfPills").addEventListener("click", function(e){
    var b = e.target.closest(".pill"); if(!b) return;
    document.querySelectorAll("#tfPills .pill").forEach(function(p){ p.classList.remove("active"); });
    b.classList.add("active");
    state.cat = b.dataset.cat; render();
  });
  document.getElementById("tfCity").addEventListener("change", function(e){ state.city = e.target.value; render(); });
  document.getElementById("tfMonth").addEventListener("change", function(e){ state.month = e.target.value; render(); });
  document.getElementById("tfSearch").addEventListener("input", function(e){ state.q = e.target.value.trim(); render(); });
  render();

  /* ---------- FAQ accordion ---------- */
  document.querySelectorAll("#faq .faq-q").forEach(function(btn){
    btn.addEventListener("click", function(){
      var item = btn.parentElement, open = item.classList.contains("open");
      document.querySelectorAll("#faq .faq-item").forEach(function(i){
        i.classList.remove("open");
        i.querySelector(".faq-q").setAttribute("aria-expanded","false");
      });
      if(!open){ item.classList.add("open"); btn.setAttribute("aria-expanded","true"); }
    });
  });

  /* ---------- Newsletter ---------- */
  document.getElementById("subForm").addEventListener("submit", function(e){
    e.preventDefault();
    var email = document.getElementById("subEmail");
    if(!email.value || email.value.indexOf("@") === -1){
      toast("✎ Hold on", "That email doesn't look right — the box office needs a valid address.");
      email.focus(); return;
    }
    document.getElementById("subForm").style.display = "none";
    document.getElementById("subOk").style.display = "block";
    toast("✉ Subscribed", "The Sunday Score is on its way. First issue lands this Sunday at 7am sharp.");
  });

  /* ---------- Toast on load for ambiance (once) ---------- */
  setTimeout(function(){
    toast("★ Box Office Update", "Mara Ellison's Bach in the Dark just crossed 82% claimed. Fewer than forty seats remain.");
  }, 2400);
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:46:58.715Z",
  "url": "https://benchmark.aimac.invalid/916a73d1cccb6616dfc32dc28d2ce9a989eedc4d18b1cdc47cef1045e259db7d.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"siteNav\" aria-label=\"Primary\">",
          "target": [
            "#siteNav"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"nav\" id=\"siteNav\" aria-label=\"Primary\">",
          "target": [
            "#siteNav"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"toolbar reveal\" role=\"search\">",
          "target": [
            ".toolbar"
          ]
        }
      ]
    },
    {
      "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 id=\"top\">",
          "target": [
            "#top"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"ticker-group\" aria-hidden=\"true\">",
          "target": [
            "div[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"siteNav\" aria-label=\"Primary\">",
          "target": [
            "#siteNav"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"toolbar reveal\" role=\"search\">",
          "target": [
            ".toolbar"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"toolbar reveal\" role=\"search\">",
          "target": [
            ".toolbar"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"nav\" id=\"siteNav\" aria-label=\"Primary\">",
          "target": [
            "#siteNav"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"nav\" id=\"siteNav\" aria-label=\"Primary\">",
          "target": [
            "#siteNav"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span style=\"transition-delay:.12s\"><em>\"The Last Projectionist\"</em></span>",
          "target": [
            ".mask:nth-child(2) > span"
          ]
        }
      ]
    },
    {
      "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=\"pill active\" data-cat=\"all\">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 class=\"wordmark reveal in\"><span class=\"ov-o\">O</span>VERTURE</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h4>Tonight, by the Numbers</h4>",
                  "target": [
                    ".numbers > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"fp-headline in\" id=\"leadHeadline\">",
                  "target": [
                    "#leadHeadline"
                  ]
                },
                {
                  "html": "<h4>\"Hymns for Empty Theatres\" \u2014 Ada Cruz</h4>",
                  "target": [
                    ".listening > div > h4"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">The Critic's <em>Desk</em></h2>",
                  "target": [
                    ".desk-head > div > .sec-title"
                  ]
                },
                {
                  "html": "<h3>Hedda, Reclaimed at the Northlight</h3>",
                  "target": [
                    ".review-card:nth-child(1) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Ada Cruz \u2014 \"Hymns for Empty Theatres\"</h3>",
                  "target": [
                    ".review-card:nth-child(2) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Neon Reliquary, MOCA Annex</h3>",
                  "target": [
                    ".review-card:nth-child(3) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Brass Choirs at the Ansonia Ballroom</h3>",
                  "target": [
                    ".review-card:nth-child(4) > .body > h3"
                  ]
                },
                {
                  "html": "<h2>In the Key of Shadow: <em>Mara Ellison</em> Plays the Dark Rooms</h2>",
                  "target": [
                    ".spot-right > h2"
                  ]
                },
                {
                  "html": "<h3 class=\"subhead\">On Curation &amp; Critique</h3>",
                  "target": [
                    ".subhead"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">New Voices, <em>2025</em></h2>",
                  "target": [
                    ".voices-head > div > .sec-title"
                  ]
                },
                {
                  "html": "<h3>Juno Reyes</h3>",
                  "target": [
                    ".postcard:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Okonkwo Ensemble</h3>",
                  "target": [
                    ".postcard:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Felix Marchetti</h3>",
                  "target": [
                    ".postcard:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Sana Qadir</h3>",
                  "target": [
                    ".postcard:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h3>Birch &amp; Harrow</h3>",
                  "target": [
                    ".postcard:nth-child(5) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">The Overture <em style=\"color:var(--gold-soft)\">Ticket Finder</em></h2>",
                  "target": [
                    ".tickets-head > .sec-title"
                  ]
                },
                {
                  "html": "<h3>Aurora Quartet \u2014 Second Night</h3>",
                  "target": [
                    ".ev-card:nth-child(1) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>The Last Projectionist: Director's Cut</h3>",
                  "target": [
                    ".ev-card:nth-child(2) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>Hedda, Reclaimed \u2014 Opening</h3>",
                  "target": [
                    ".ev-card:nth-child(3) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>Neon Reliquary: Members' Preview</h3>",
                  "target": [
                    ".ev-card:nth-child(4) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>Mara Ellison: Bach in the Dark</h3>",
                  "target": [
                    ".ev-card:nth-child(5) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>Midnight Marquee \u2014 Live Score</h3>",
                  "target": [
                    ".ev-card:nth-child(6) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>A Chorus of Machines \u2014 World Premiere</h3>",
                  "target": [
                    ".ev-card:nth-child(7) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>Paper &amp; Pigment: Winter Salon</h3>",
                  "target": [
                    ".ev-card:nth-child(8) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>Brass Choirs of the South Side</h3>",
                  "target": [
                    ".ev-card:nth-child(9) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h3>Cold Reading: New Plays Festival</h3>",
                  "target": [
                    ".ev-card:nth-child(10) > .ev-info > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Dispatches from the <em>Industry</em></h2>",
                  "target": [
                    "#dispatches > .wrap > .reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h3>City Ballet Names Its First Guest Conductor from the Pit Orchestra</h3>",
                  "target": [
                    ".news-item:nth-child(1) > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>The $40M Question: Who Pays to Restore the Grand Marquees?</h3>",
                  "target": [
                    ".news-item:nth-child(2) > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Festival Shorts, Quiet Revolution: Six in Ten Are First-Time Directors</h3>",
                  "target": [
                    ".news-item:nth-child(3) > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Gallery Night Returns \u2014 Later Hours, Live Scoring, No Wine Budget Cuts</h3>",
                  "target": [
                    ".news-item:nth-child(4) > div:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Letters to the <em>Desk</em></h2>",
                  "target": [
                    "#letters > .wrap > .reveal > .sec-title"
                  ]
                },
                {
                  "html": "<h2 class=\"sec-title\">Take <em>The Sunday Score.</em></h2>",
                  "target": [
                    ".sub-grid > .reveal:nth-child(1) > .sec-title"
                  ]
                },
                {
                  "html": "<h3>Join the readership</h3>",
                  "target": [
                    ".sub-card > h3"
                  ]
                },
                {
                  "html": "<h4>Sections</h4>",
                  "target": [
                    ".foot-col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>The Masthead</h4>",
                  "target": [
                    ".foot-col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact the Desk</h4>",
                  "target": [
                    ".foot-col:nth-child(4) > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "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": "#191410",
                "bgColor": "#f4eee1",
                "contrastRatio": 15.8,
                "fontSize": "7.9pt (10.56px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 15.8"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>Vol. XII \u00b7 No. 47 \u2014 The Autumn Critique Number</span>",
          "target": [
            ".topbar > .wrap > span:nth-child(1)"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "structured-dlitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "When not empty, element has both <dt> and <dd> elements"
            },
            {
              "id": "only-dlitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "dl element only has direct children that are allowed inside; <dt>, <dd>, or <div> elements"
            }
          ],
          "impact": null,
          "html": "<dl class=\"vitals\">\n        <div><dt>Subject</dt><dd>Mara Ellison</dd></div>\n        <div><dt>Medium</dt><dd>Cello &amp; electronics</dd></div>\n        <div><dt>Based</dt><dd>New York</dd></div>\n        <div><dt>Next</dt><dd>Bach in the Dark, Nov 28</dd></div>\n      </dl>",
          "target": [
            "dl"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "dlitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Description list item has a <dl> parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<dt>Subject</dt>",
          "target": [
            "div:nth-child(1) > dt"
          ]
        }
      ]
    },
    {
      "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": "navLinks",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<ul class=\"nav-links\" id=\"navLinks\">",
          "target": [
            "#navLinks"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"search\" id=\"tfSearch\" placeholder=\"Search artist, show or venue\u2026\" aria-label=\"Search events\">",
          "target": [
            "#tfSearch"
          ]
        }
      ]
    },
    {
      "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 class=\"logomark reveal in\" src=\"https://placehold.co/96x96/a31621/f4eee1?text=O.&amp;font=playfair+display\" alt=\"Overture logomark \u2014 a red seal with the letter O\">",
          "target": [
            ".logomark"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"search\" id=\"tfSearch\" placeholder=\"Search artist, show or venue\u2026\" aria-label=\"Search events\">",
          "target": [
            "#tfSearch"
          ]
        }
      ]
    },
    {
      "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 href=\"#top\" class=\"nav-brand\">\n      <img src=\"https://placehold.co/40x40/a31621/f4eee1?text=O&amp;font=playfair+display\" alt=\"\">Overture\n    </a>",
          "target": [
            ".nav-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 class=\"nav-links\" id=\"navLinks\">",
          "target": [
            "#navLinks"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#desk\">Critic's Desk</a></li>",
          "target": [
            "#navLinks > 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 class=\"logomark reveal in\" src=\"https://placehold.co/96x96/a31621/f4eee1?text=O.&amp;font=playfair+display\" alt=\"Overture logomark \u2014 a red seal with the letter O\">",
          "target": [
            ".logomark"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"tfCity\" aria-label=\"Filter by city\">\n        <option value=\"all\">All Cities</option>\n        <option>New York</option><option>London</option><option>Chicago</option><option>Los Angeles</option>\n      </select>",
          "target": [
            "#tfCity"
          ]
        }
      ]
    },
    {
      "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": 151.4,
                "height": 30
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (151.4px by 30px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#top\" class=\"nav-brand\">\n      <img src=\"https://placehold.co/40x40/a31621/f4eee1?text=O&amp;font=playfair+display\" alt=\"\">Overture\n    </a>",
          "target": [
            ".nav-brand"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"ticker\" aria-label=\"Breaking culture news\">",
          "target": [
            ".ticker"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "messageKey": "nonBmp"
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element content contains only non-text characters"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<i>\u2605</i>",
          "target": [
            ".ticker-group:nth-child(1) > span:nth-child(2) > i"
          ],
          "failureSummary": "Fix any of the following:\n  Element content contains only non-text characters"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a227",
                "bgColor": "#f4eee1",
                "contrastRatio": 2.09,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"no\">01</span>",
          "target": [
            "a[href$=\"#frontpage\"] > .no"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a227",
                "bgColor": "#f4eee1",
                "contrastRatio": 2.09,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"no\">02</span>",
          "target": [
            "li:nth-child(2) > a[href$=\"#desk\"] > .no"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a227",
                "bgColor": "#f4eee1",
                "contrastRatio": 2.09,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"no\">03</span>",
          "target": [
            "li:nth-child(3) > a[href$=\"#artists\"] > .no"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a227",
                "bgColor": "#f4eee1",
                "contrastRatio": 2.09,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"no\">04</span>",
          "target": [
            "li:nth-child(4) > a[href$=\"#voices\"] > .no"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a227",
                "bgColor": "#f4eee1",
                "contrastRatio": 2.09,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"no\">05</span>",
          "target": [
            "a[href$=\"#tickets\"] > .no"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c9a227",
                "bgColor": "#f4eee1",
                "contrastRatio": 2.09,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body id=\"top\">",
                  "target": [
                    "#top"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"no\">06</span>",
          "target": [
            "li:nth-child(6) > a[href$=\"#dispatches\"] > .no"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.09 (foreground color: #c9a227, background color: #f4eee1, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c8372d",
                "bgColor": "#241f18",
                "contrastRatio": 3.14,
                "fontSize": "7.2pt (9.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ev-card\">",
                  "target": [
                    ".ev-card:nth-child(5)"
                  ]
                },
                {
                  "html": "<section class=\"tickets dark\" id=\"tickets\">",
                  "target": [
                    "#tickets"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.14 (foreground color: #c8372d, background color: #241f18, font size: 7.2pt (9.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"avail low\">Almost gone \u2014 18% remaining</p>",
          "target": [
            ".ev-card:nth-child(5) > .ev-info > .low.avail"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.14 (foreground color: #c8372d, background color: #241f18, font size: 7.2pt (9.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#c8372d",
                "bgColor": "#241f18",
                "contrastRatio": 3.14,
                "fontSize": "7.2pt (9.6px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"ev-card\">",
                  "target": [
                    ".ev-card:nth-child(10)"
                  ]
                },
                {
                  "html": "<section class=\"tickets dark\" id=\"tickets\">",
                  "target": [
                    "#tickets"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.14 (foreground color: #c8372d, background color: #241f18, font size: 7.2pt (9.6px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"avail low\">Almost gone \u2014 12% remaining</p>",
          "target": [
            ".ev-card:nth-child(10) > .ev-info > .low.avail"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.14 (foreground color: #c8372d, background color: #241f18, font size: 7.2pt (9.6px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d786f",
                "bgColor": "#1c1811",
                "contrastRatio": 4.02,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"tickets dark\" id=\"tickets\">",
                  "target": [
                    "#tickets"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #7d786f, background color: #1c1811, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>128 venues tracked across 4 cities</span>",
          "target": [
            ".tickets-note > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #7d786f, background color: #1c1811, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d786f",
                "bgColor": "#1c1811",
                "contrastRatio": 4.02,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"tickets dark\" id=\"tickets\">",
                  "target": [
                    "#tickets"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #7d786f, background color: #1c1811, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>3,412 seats released this week</span>",
          "target": [
            ".tickets-note > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #7d786f, background color: #1c1811, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d786f",
                "bgColor": "#1c1811",
                "contrastRatio": 4.02,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"tickets dark\" id=\"tickets\">",
                  "target": [
                    "#tickets"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.02 (foreground color: #7d786f, background color: #1c1811, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Zero booking fees \u2014 ever</span>",
          "target": [
            ".tickets-note > span:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.02 (foreground color: #7d786f, background color: #1c1811, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#78746b",
                "bgColor": "#12100b",
                "contrastRatio": 4.08,
                "fontSize": "7.4pt (9.92px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer id=\"colophon\">",
                  "target": [
                    "#colophon"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.08 (foreground color: #78746b, background color: #12100b, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>\u00a9 2025 Overture Media Group. All rights, and most wrongs, reserved.</span>",
          "target": [
            ".foot-bottom > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.08 (foreground color: #78746b, background color: #12100b, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#78746b",
                "bgColor": "#12100b",
                "contrastRatio": 4.08,
                "fontSize": "7.4pt (9.92px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer id=\"colophon\">",
                  "target": [
                    "#colophon"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.08 (foreground color: #78746b, background color: #12100b, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Printed nowhere. Read everywhere.</span>",
          "target": [
            ".foot-bottom > span:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.08 (foreground color: #78746b, background color: #12100b, font size: 7.4pt (9.92px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a31621",
                "bgColor": "#12100b",
                "contrastRatio": 2.43,
                "fontSize": "40.8pt (54.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "3:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"voices\" id=\"voices\">",
                  "target": [
                    "#voices"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.43 (foreground color: #a31621, background color: #12100b, font size: 40.8pt (54.4px), font weight: normal). Expected contrast ratio of 3:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<em>2025</em>",
          "target": [
            ".voices-head > div > .sec-title > em"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.43 (foreground color: #a31621, background color: #12100b, font size: 40.8pt (54.4px), font weight: normal). Expected contrast ratio of 3:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5a4f40",
                "bgColor": "#191410",
                "contrastRatio": 2.28,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<p class=\"side-title\"><span>Behind the Scenes</span><i>\u2726</i></p>",
                  "target": [
                    ".bts > .side-title"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.28 (foreground color: #5a4f40, background color: #191410, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>Behind the Scenes</span>",
          "target": [
            ".bts > .side-title > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.28 (foreground color: #5a4f40, background color: #191410, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d49894",
                "bgColor": "#a31621",
                "contrastRatio": 3.23,
                "fontSize": "7.7pt (10.24px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"subscribe\" id=\"subscribe\">",
                  "target": [
                    "#subscribe"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.23 (foreground color: #d49894, background color: #a31621, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p class=\"sub-note\">Free forever \u00b7 No ads on the reading experience \u00b7 24,180 readers last Sunday</p>",
          "target": [
            ".sub-note"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.23 (foreground color: #d49894, background color: #a31621, font size: 7.7pt (10.24px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#191410",
                "bgColor": "#a31621",
                "contrastRatio": 2.34,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"subscribe\" id=\"subscribe\">",
                  "target": [
                    "#subscribe"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"faq-q\" aria-expanded=\"false\">What do I get with Overture membership? <span class=\"pm\">\uff0b</span></button>",
          "target": [
            ".faq-item:nth-child(1) > .faq-q"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#191410",
                "bgColor": "#a31621",
                "contrastRatio": 2.34,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"subscribe\" id=\"subscribe\">",
                  "target": [
                    "#subscribe"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"faq-q\" aria-expanded=\"false\">Can I really book tickets through the Ticket Finder? <span class=\"pm\">\uff0b</span></button>",
          "target": [
            ".faq-item:nth-child(2) > .faq-q"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#191410",
                "bgColor": "#a31621",
                "contrastRatio": 2.34,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"subscribe\" id=\"subscribe\">",
                  "target": [
                    "#subscribe"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"faq-q\" aria-expanded=\"false\">How do your critics choose what to review? <span class=\"pm\">\uff0b</span></button>",
          "target": [
            ".faq-item:nth-child(3) > .faq-q"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#191410",
                "bgColor": "#a31621",
                "contrastRatio": 2.34,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"subscribe\" id=\"subscribe\">",
                  "target": [
                    "#subscribe"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<button class=\"faq-q\" aria-expanded=\"false\">Do you accept submissions from artists? <span class=\"pm\">\uff0b</span></button>",
          "target": [
            ".faq-item:nth-child(4) > .faq-q"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.34 (foreground color: #191410, background color: #a31621, font size: 10.8pt (14.4px), font weight: bold). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 10427
      },
      {
        "y": 576,
        "height": 10427
      },
      {
        "y": 1152,
        "height": 10427
      },
      {
        "y": 1728,
        "height": 10427
      },
      {
        "y": 2304,
        "height": 10427
      },
      {
        "y": 2880,
        "height": 10427
      },
      {
        "y": 3456,
        "height": 10427
      },
      {
        "y": 4032,
        "height": 10427
      },
      {
        "y": 4608,
        "height": 10427
      },
      {
        "y": 5184,
        "height": 10427
      },
      {
        "y": 5760,
        "height": 10427
      },
      {
        "y": 6336,
        "height": 10427
      },
      {
        "y": 6912,
        "height": 10427
      },
      {
        "y": 7488,
        "height": 10427
      },
      {
        "y": 8064,
        "height": 10427
      },
      {
        "y": 8640,
        "height": 10427
      },
      {
        "y": 9216,
        "height": 10427
      },
      {
        "y": 9707,
        "height": 10427
      }
    ],
    "scans": 19,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Arts and Entertainment" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

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

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

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Artists", "Subscribe", "Tickets".
-   **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: "Artist Spotlights", "Emerging Talent", "Upcoming Shows".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "curation", "commission", "critique".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Watch Preview", "Book Now", "Read Reviews".
-   **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: "ticket finder".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "editor's choice", "behind the scenes", "upcoming premieres".
-   **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.