MiniMax MiniMax M3 – Arts and Entertainment

via CoreWeave · Generated

  • AIMAC Debt 4.37
  • Cost $0.02
  • Total Violations 12
  • HTML Size 65 KB
  • Em Dashes 14

Screenshot

View MiniMax MiniMax M3 Arts and Entertainment page View Live Page

Accessibility Issues Found

12 Serious

  • color-contrast serious 12 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <div class="eyebrow">Fresh Critique</div>

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>Lumière & Tempo — Where Performance Meets Perspective</title>
<meta name="description" content="Lumière & Tempo is the definitive pulse of performing arts, cinema, and live entertainment. Critiques, premieres, venue guides, and emerging talent." />
<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=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,700&family=Inter:wght@300;400;500;600;700&family=Oswald:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  /* ============ RESET & BASE ============ */
  *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
  html { scroll-behavior: smooth; }
  body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    background: #f6f1e8;
    color: #1a1814;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  button { font-family: inherit; cursor: pointer; border: none; background: none; }

  :root {
    --ink: #1a1814;
    --cream: #f6f1e8;
    --paper: #fbf7ee;
    --gold: #c9a961;
    --gold-deep: #a88a4a;
    --crimson: #8b2e2a;
    --plum: #4a2742;
    --muted: #6b6358;
    --line: #e6dcc6;
    --shadow: 0 18px 50px rgba(26, 24, 20, 0.10);
  }

  .container { max-width: 1280px; margin: 0 auto; padding: 0 32px; }
  .eyebrow {
    font-family: 'Oswald', sans-serif;
    font-size: 12px;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold-deep);
    font-weight: 600;
  }

  /* ============ UTILITY BAR ============ */
  .utility-bar {
    background: var(--ink);
    color: #d8cdb6;
    font-size: 13px;
    padding: 10px 0;
    border-bottom: 1px solid #2a2620;
  }
  .utility-bar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
  }
  .utility-bar .left { display: flex; gap: 22px; }
  .utility-bar .right { display: flex; gap: 18px; align-items: center; }
  .utility-bar a { color: #d8cdb6; transition: color .2s; }
  .utility-bar a:hover { color: var(--gold); }
  .utility-bar .pill {
    border: 1px solid #3a352c;
    padding: 5px 14px;
    border-radius: 100px;
    color: var(--gold);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    font-size: 11px;
  }
  .utility-bar .pill:hover { background: var(--gold); color: var(--ink); }

  /* ============ HEADER ============ */
  header.main-header {
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    position: sticky;
    top: 0;
    z-index: 100;
    backdrop-filter: blur(8px);
  }
  .header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 22px 0;
    gap: 30px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 14px;
  }
  .brand img { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--gold); }
  .brand-text { line-height: 1.1; }
  .brand-text .name {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--ink);
  }
  .brand-text .name span { color: var(--crimson); font-style: italic; }
  .brand-text .tag {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--muted);
  }

  nav.primary-nav ul {
    display: flex;
    gap: 6px;
    list-style: none;
    align-items: center;
  }
  nav.primary-nav a {
    font-family: 'Oswald', sans-serif;
    font-size: 13px;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 10px 14px;
    color: var(--ink);
    font-weight: 500;
    position: relative;
    transition: color .25s;
  }
  nav.primary-nav a::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 14px;
    right: 14px;
    height: 2px;
    background: var(--crimson);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s;
  }
  nav.primary-nav a:hover { color: var(--crimson); }
  nav.primary-nav a:hover::after { transform: scaleX(1); }

  .header-actions { display: flex; gap: 10px; align-items: center; }
  .search-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid var(--line);
    display: grid;
    place-items: center;
    transition: background .2s;
  }
  .search-btn:hover { background: var(--ink); color: var(--paper); }
  .cta-btn {
    background: var(--ink);
    color: var(--paper);
    padding: 12px 22px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    border-radius: 4px;
    transition: background .25s, transform .25s;
    font-weight: 600;
  }
  .cta-btn:hover { background: var(--crimson); transform: translateY(-1px); }

  /* ============ HERO ============ */
  .hero {
    position: relative;
    min-height: 620px;
    background: linear-gradient(120deg, rgba(26,24,20,0.65) 0%, rgba(26,24,20,0.30) 60%, rgba(26,24,20,0.10) 100%),
      url('https://picsum.photos/1600/900?blur=1') center/cover;
    color: var(--paper);
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  .hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at left, transparent 30%, rgba(26,24,20,0.7) 90%);
  }
  .hero-content {
    position: relative;
    z-index: 2;
    max-width: 720px;
    padding: 80px 0;
  }
  .hero .eyebrow { color: var(--gold); margin-bottom: 18px; }
  .hero h1 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(40px, 6vw, 78px);
    line-height: 1.02;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin-bottom: 22px;
  }
  .hero h1 em { color: var(--gold); font-style: italic; }
  .hero p.lede {
    font-size: 18px;
    max-width: 560px;
    margin-bottom: 32px;
    color: #e6dcc6;
    line-height: 1.7;
  }
  .hero-meta {
    display: flex;
    gap: 28px;
    margin-bottom: 36px;
    flex-wrap: wrap;
  }
  .hero-meta .meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .hero-meta .label {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
  }
  .hero-meta .value { font-weight: 500; color: var(--paper); }
  .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
  .btn-primary {
    background: var(--gold);
    color: var(--ink);
    padding: 16px 32px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2.5px;
    font-size: 13px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 700;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .btn-primary:hover { background: var(--paper); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,169,97,0.4); }
  .btn-ghost {
    background: transparent;
    color: var(--paper);
    padding: 16px 32px;
    border: 1.5px solid var(--paper);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2.5px;
    font-size: 13px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 600;
    transition: all .25s;
  }
  .btn-ghost:hover { background: var(--paper); color: var(--ink); }

  /* ============ MARQUEE ============ */
  .marquee {
    background: var(--ink);
    color: var(--gold);
    padding: 14px 0;
    overflow: hidden;
    border-top: 1px solid #2a2620;
    border-bottom: 1px solid #2a2620;
  }
  .marquee-track {
    display: flex;
    gap: 60px;
    animation: scroll 35s linear infinite;
    white-space: nowrap;
  }
  .marquee-track span {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 3px;
    font-size: 14px;
    text-transform: uppercase;
    flex-shrink: 0;
  }
  .marquee-track span::after { content: '✦'; margin-left: 60px; color: var(--crimson); }
  @keyframes scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }

  /* ============ SECTION HEADERS ============ */
  section { padding: 90px 0; }
  .section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 48px;
    gap: 30px;
    flex-wrap: wrap;
  }
  .section-head .titles { max-width: 700px; }
  .section-head h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -1px;
    margin-top: 8px;
  }
  .section-head h2 em { color: var(--crimson); font-style: italic; }
  .section-head p { color: var(--muted); margin-top: 12px; font-size: 16px; max-width: 600px; }
  .section-head .link-more {
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    color: var(--ink);
    border-bottom: 2px solid var(--crimson);
    padding-bottom: 4px;
    transition: color .2s;
  }
  .section-head .link-more:hover { color: var(--crimson); }

  /* ============ REVIEWS GRID ============ */
  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
  }
  .review-card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
    transition: all .3s;
    display: flex;
    flex-direction: column;
  }
  .review-card:hover { transform: translateY(-6px); box-shadow: var(--shadow); }
  .review-card .thumb {
    aspect-ratio: 4/5;
    overflow: hidden;
    position: relative;
  }
  .review-card .thumb img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s;
  }
  .review-card:hover .thumb img { transform: scale(1.06); }
  .review-card .thumb .score {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--ink);
    color: var(--gold);
    width: 52px; height: 52px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 20px;
    border: 2px solid var(--gold);
  }
  .review-card .thumb .badge {
    position: absolute;
    bottom: 14px; left: 14px;
    background: rgba(246,241,232,0.95);
    padding: 5px 12px;
    border-radius: 100px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--ink);
  }
  .review-card .body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
  .review-card .meta {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin-bottom: 10px;
  }
  .review-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 10px;
  }
  .review-card p {
    color: var(--muted);
    font-size: 14px;
    margin-bottom: 18px;
    flex: 1;
  }
  .review-card .critic {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .review-card .critic img { width: 32px; height: 32px; border-radius: 50%; }
  .review-card .critic .name { font-size: 13px; font-weight: 600; }
  .review-card .critic .role { font-size: 11px; color: var(--muted); }

  /* ============ FEATURE ARTICLE ============ */
  .feature-article {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 60px;
    align-items: center;
  }
  .feature-article .image-side {
    position: relative;
  }
  .feature-article .image-side img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    border-radius: 6px;
    box-shadow: var(--shadow);
  }
  .feature-article .image-side .floating {
    position: absolute;
    bottom: -30px;
    right: -30px;
    background: var(--ink);
    color: var(--paper);
    padding: 22px 28px;
    border-radius: 6px;
    max-width: 260px;
    border-left: 4px solid var(--gold);
  }
  .feature-article .floating .num {
    font-family: 'Playfair Display', serif;
    font-size: 36px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
  }
  .feature-article .floating .lbl {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #d8cdb6;
    margin-top: 6px;
  }
  .feature-article .text-side .eyebrow { margin-bottom: 14px; }
  .feature-article .text-side h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(30px, 4vw, 44px);
    line-height: 1.1;
    font-weight: 700;
    margin-bottom: 24px;
    letter-spacing: -0.8px;
  }
  .feature-article .text-side h2 em { color: var(--crimson); font-style: italic; }
  .feature-article .text-side p {
    font-size: 16px;
    line-height: 1.85;
    color: #2c2820;
    margin-bottom: 18px;
  }
  .feature-article .text-side .pull {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 22px;
    color: var(--crimson);
    border-left: 3px solid var(--gold);
    padding-left: 22px;
    margin: 28px 0;
    line-height: 1.4;
  }
  .feature-article .text-side .author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 30px;
  }
  .feature-article .text-side .author img { width: 50px; height: 50px; border-radius: 50%; }
  .feature-article .text-side .author .name { font-weight: 600; }
  .feature-article .text-side .author .role { font-size: 13px; color: var(--muted); }

  /* ============ INTERACTIVE FILTER ============ */
  .interactive-events {
    background: var(--ink);
    color: var(--paper);
    padding: 90px 0;
  }
  .interactive-events .section-head h2 { color: var(--paper); }
  .interactive-events .section-head h2 em { color: var(--gold); }
  .interactive-events .section-head p { color: #b8ad94; }

  .filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 42px;
    padding-bottom: 30px;
    border-bottom: 1px solid #2a2620;
  }
  .filter-btn {
    padding: 10px 22px;
    border: 1px solid #3a352c;
    border-radius: 100px;
    color: #b8ad94;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    font-size: 12px;
    text-transform: uppercase;
    transition: all .2s;
  }
  .filter-btn:hover { color: var(--gold); border-color: var(--gold); }
  .filter-btn.active {
    background: var(--gold);
    color: var(--ink);
    border-color: var(--gold);
    font-weight: 700;
  }
  .events-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
  }
  .event-card {
    background: #221f1a;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #2a2620;
    transition: all .3s;
    display: flex;
    flex-direction: column;
  }
  .event-card:hover { transform: translateY(-4px); border-color: var(--gold); }
  .event-card.hidden { display: none; }
  .event-card .top {
    aspect-ratio: 16/10;
    overflow: hidden;
    position: relative;
  }
  .event-card .top img { width: 100%; height: 100%; object-fit: cover; }
  .event-card .date-tag {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--paper);
    color: var(--ink);
    padding: 8px 14px;
    border-radius: 4px;
    text-align: center;
    min-width: 60px;
  }
  .event-card .date-tag .d { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 800; line-height: 1; }
  .event-card .date-tag .m { font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 1.5px; text-transform: uppercase; margin-top: 2px; }
  .event-card .cat-tag {
    position: absolute;
    bottom: 14px; right: 14px;
    background: rgba(26,24,20,0.85);
    color: var(--gold);
    padding: 5px 12px;
    border-radius: 100px;
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    border: 1px solid var(--gold);
  }
  .event-card .body { padding: 22px; flex: 1; display: flex; flex-direction: column; }
  .event-card .venue {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .event-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 21px;
    line-height: 1.25;
    margin-bottom: 10px;
    color: var(--paper);
  }
  .event-card p { color: #b8ad94; font-size: 14px; margin-bottom: 18px; flex: 1; }
  .event-card .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    border-top: 1px solid #2a2620;
  }
  .event-card .price { color: var(--gold); font-weight: 600; font-size: 15px; }
  .event-card .get-tickets {
    color: var(--paper);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 12px;
    border-bottom: 1.5px solid var(--gold);
    padding-bottom: 2px;
    transition: color .2s;
  }
  .event-card .get-tickets:hover { color: var(--gold); }

  /* ============ TWO COL WITH SIDEBAR ============ */
  .content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 340px;
    gap: 60px;
  }
  /* ============ EMERGING TALENT ============ */
  .talent-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .talent-card {
    background: var(--paper);
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--line);
    transition: all .3s;
  }
  .talent-card:hover { box-shadow: var(--shadow); }
  .talent-card .img-wrap {
    aspect-ratio: 1/1;
    overflow: hidden;
    position: relative;
  }
  .talent-card .img-wrap img {
    width: 100%; height: 100%; object-fit: cover;
    transition: transform .6s;
    filter: grayscale(20%);
  }
  .talent-card:hover .img-wrap img { transform: scale(1.06); filter: grayscale(0); }
  .talent-card .img-wrap .label {
    position: absolute;
    top: 14px; left: 14px;
    background: var(--crimson);
    color: var(--paper);
    padding: 4px 10px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 1.5px;
    font-size: 10px;
    text-transform: uppercase;
    border-radius: 2px;
  }
  .talent-card .body { padding: 22px; }
  .talent-card .discipline {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gold-deep);
    text-transform: uppercase;
    margin-bottom: 8px;
  }
  .talent-card h3 {
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    margin-bottom: 10px;
  }
  .talent-card p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
  .talent-card .stats {
    display: flex;
    gap: 18px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .talent-card .stats .stat .v {
    font-family: 'Playfair Display', serif;
    font-weight: 800;
    font-size: 18px;
    color: var(--crimson);
  }
  .talent-card .stats .stat .l {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--muted);
    text-transform: uppercase;
  }

  /* ============ SIDEBAR ============ */
  .sidebar { display: flex; flex-direction: column; gap: 40px; }
  .widget {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 26px;
  }
  .widget h4 {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--gold);
  }
  .trending-list { list-style: none; counter-reset: trend; }
  .trending-list li {
    counter-increment: trend;
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    align-items: flex-start;
  }
  .trending-list li:last-child { border-bottom: none; }
  .trending-list li::before {
    content: counter(trend, decimal-leading-zero);
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 800;
    color: var(--gold);
    line-height: 1;
    min-width: 36px;
  }
  .trending-list li .t-content .meta {
    font-family: 'Oswald', sans-serif;
    font-size: 10px;
    letter-spacing: 1.5px;
    color: var(--crimson);
    text-transform: uppercase;
    margin-bottom: 4px;
  }
  .trending-list li .t-content .title {
    font-family: 'Playfair Display', serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.3;
    transition: color .2s;
    cursor: pointer;
  }
  .trending-list li .t-content .title:hover { color: var(--crimson); }

  .premiere-widget .premiere {
    display: flex;
    gap: 14px;
    padding: 14px 0;
    border-bottom: 1px solid var(--line);
    align-items: center;
  }
  .premiere-widget .premiere:last-child { border-bottom: none; }
  .premiere-widget .premiere img { width: 64px; height: 64px; object-fit: cover; border-radius: 4px; flex-shrink: 0; }
  .premiere-widget .premiere .p-content .d { font-family: 'Oswald', sans-serif; font-size: 10px; letter-spacing: 1.5px; color: var(--crimson); text-transform: uppercase; margin-bottom: 4px; }
  .premiere-widget .premiere .p-content .t { font-family: 'Playfair Display', serif; font-size: 15px; font-weight: 600; line-height: 1.3; }

  .newsletter-widget {
    background: var(--ink);
    color: var(--paper);
    border: none;
  }
  .newsletter-widget h4 { color: var(--paper); border-color: var(--gold); }
  .newsletter-widget p { color: #b8ad94; font-size: 14px; margin-bottom: 18px; }
  .newsletter-widget form { display: flex; flex-direction: column; gap: 10px; }
  .newsletter-widget input {
    background: #221f1a;
    border: 1px solid #3a352c;
    color: var(--paper);
    padding: 12px 14px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 14px;
  }
  .newsletter-widget input:focus { outline: none; border-color: var(--gold); }
  .newsletter-widget button {
    background: var(--gold);
    color: var(--ink);
    padding: 13px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: 700;
    border-radius: 4px;
    transition: background .2s;
  }
  .newsletter-widget button:hover { background: var(--paper); }

  /* ============ VENUE GUIDE ============ */
  .venues-section { background: var(--paper); }
  .venues-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 22px;
    height: 540px;
  }
  .venue-tile {
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    cursor: pointer;
  }
  .venue-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s; }
  .venue-tile:hover img { transform: scale(1.08); }
  .venue-tile::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,24,20,0.85) 0%, transparent 50%);
  }
  .venue-tile .vt-content {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 24px;
    color: var(--paper);
    z-index: 2;
  }
  .venue-tile .loc {
    font-family: 'Oswald', sans-serif;
    font-size: 11px;
    letter-spacing: 2px;
    color: var(--gold);
    text-transform: uppercase;
    margin-bottom: 6px;
  }
  .venue-tile h3 {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    line-height: 1.1;
    margin-bottom: 6px;
  }
  .venue-tile .cap {
    font-size: 13px;
    color: #d8cdb6;
  }
  .venue-tile.featured { grid-row: span 2; }
  .venue-tile.featured h3 { font-size: 36px; }

  /* ============ TESTIMONIALS ============ */
  .testimonials-section { background: var(--ink); color: var(--paper); }
  .testimonials-section .section-head h2 { color: var(--paper); }
  .testimonials-section .section-head h2 em { color: var(--gold); }
  .testimonials-section .section-head p { color: #b8ad94; }
  .testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 26px;
  }
  .testimonial-card {
    background: #221f1a;
    border: 1px solid #2a2620;
    border-radius: 6px;
    padding: 32px;
    position: relative;
  }
  .testimonial-card::before {
    content: '"';
    position: absolute;
    top: 10px; left: 22px;
    font-family: 'Playfair Display', serif;
    font-size: 80px;
    color: var(--gold);
    line-height: 1;
    opacity: 0.4;
  }
  .testimonial-card .stars {
    color: var(--gold);
    letter-spacing: 4px;
    margin-bottom: 14px;
    font-size: 16px;
  }
  .testimonial-card blockquote {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    line-height: 1.55;
    color: #e6dcc6;
    margin-bottom: 22px;
  }
  .testimonial-card .reviewer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid #2a2620;
  }
  .testimonial-card .reviewer img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--gold); }
  .testimonial-card .reviewer .name { font-weight: 600; }
  .testimonial-card .reviewer .role { font-size: 12px; color: var(--gold); font-family: 'Oswald', sans-serif; letter-spacing: 1.5px; text-transform: uppercase; }

  /* ============ FAQ ============ */
  .faq-section .faq-list {
    max-width: 880px;
    margin: 0 auto;
  }
  .faq-item {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 12px;
    overflow: hidden;
    transition: all .2s;
  }
  .faq-item.open { border-color: var(--gold); box-shadow: var(--shadow); }
  .faq-question {
    width: 100%;
    text-align: left;
    padding: 22px 26px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    font-family: 'Playfair Display', serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--ink);
  }
  .faq-question .icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--ink);
    color: var(--gold);
    display: grid;
    place-items: center;
    font-size: 18px;
    flex-shrink: 0;
    transition: transform .3s;
  }
  .faq-item.open .faq-question .icon { transform: rotate(45deg); background: var(--crimson); color: var(--paper); }
  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease, padding .3s;
    padding: 0 26px;
    color: var(--muted);
    line-height: 1.7;
  }
  .faq-item.open .faq-answer {
    max-height: 400px;
    padding: 0 26px 24px;
  }

  /* ============ CTA STRIP ============ */
  .cta-strip {
    background: var(--crimson);
    color: var(--paper);
    padding: 70px 0;
    position: relative;
    overflow: hidden;
  }
  .cta-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
      radial-gradient(circle at 20% 50%, rgba(201,169,97,0.2) 0%, transparent 40%),
      radial-gradient(circle at 80% 50%, rgba(201,169,97,0.15) 0%, transparent 40%);
  }
  .cta-strip .container {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  .cta-strip .text h2 {
    font-family: 'Playfair Display', serif;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 10px;
  }
  .cta-strip .text h2 em { font-style: italic; color: var(--gold); }
  .cta-strip .text p { color: #f0d9c4; font-size: 16px; max-width: 580px; }
  .cta-strip .actions { display: flex; gap: 14px; flex-wrap: wrap; }
  .cta-strip .btn-primary { background: var(--gold); }
  .cta-strip .btn-light {
    background: transparent;
    color: var(--paper);
    border: 1.5px solid var(--paper);
    padding: 16px 32px;
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2.5px;
    font-size: 13px;
    text-transform: uppercase;
    border-radius: 4px;
    font-weight: 600;
    transition: all .25s;
  }
  .cta-strip .btn-light:hover { background: var(--paper); color: var(--crimson); }

  /* ============ FOOTER ============ */
  footer {
    background: var(--ink);
    color: #b8ad94;
    padding: 80px 0 30px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr;
    gap: 50px;
    margin-bottom: 50px;
  }
  .footer-brand .brand-text .name { color: var(--paper); font-size: 26px; }
  .footer-brand p {
    margin: 22px 0;
    color: #b8ad94;
    font-size: 14px;
    line-height: 1.7;
    max-width: 360px;
  }
  .social-row { display: flex; gap: 10px; margin-bottom: 26px; }
  .social-row a {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: #221f1a;
    display: grid;
    place-items: center;
    transition: all .25s;
    color: var(--gold);
  }
  .social-row a:hover { background: var(--gold); color: var(--ink); transform: translateY(-2px); }
  .contact-block { font-size: 13px; line-height: 1.8; }
  .contact-block strong { color: var(--paper); display: block; margin-bottom: 4px; font-weight: 600; }

  .footer-col h5 {
    color: var(--paper);
    font-family: 'Oswald', sans-serif;
    letter-spacing: 2px;
    text-transform: uppercase;
    font-size: 13px;
    margin-bottom: 22px;
    font-weight: 600;
  }
  .footer-col ul { list-style: none; }
  .footer-col li { margin-bottom: 12px; }
  .footer-col a {
    color: #b8ad94;
    font-size: 14px;
    transition: color .2s;
    position: relative;
    padding-left: 0;
  }
  .footer-col a:hover { color: var(--gold); padding-left: 6px; }

  .footer-bottom {
    border-top: 1px solid #2a2620;
    padding-top: 28px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 18px;
    font-size: 13px;
  }
  .footer-bottom .legal { display: flex; gap: 24px; }
  .footer-bottom .legal a:hover { color: var(--gold); }

  /* ============ RESPONSIVE ============ */
  @media (max-width: 1024px) {
    .reviews-grid { grid-template-columns: repeat(2, 1fr); }
    .events-grid { grid-template-columns: repeat(2, 1fr); }
    .talent-grid { grid-template-columns: repeat(2, 1fr); }
    .feature-article { grid-template-columns: 1fr; gap: 40px; }
    .feature-article .image-side .floating { right: 20px; bottom: -20px; }
    .venues-grid { grid-template-columns: 1fr 1fr; height: auto; }
    .venue-tile.featured { grid-row: auto; grid-column: span 2; }
    .venue-tile { aspect-ratio: 4/3; }
    .venues-grid { display: grid; }
    .venue-tile.featured { aspect-ratio: 16/9; }
    .content-with-sidebar { grid-template-columns: 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 720px) {
    .container { padding: 0 20px; }
    section { padding: 60px 0; }
    .utility-bar .left { display: none; }
    nav.primary-nav { display: none; }
    .reviews-grid, .events-grid, .talent-grid { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr; gap: 36px; }
    .footer-bottom { flex-direction: column; text-align: center; }
    .hero-content { padding: 60px 0; }
    .venues-grid { grid-template-columns: 1fr; }
    .venue-tile.featured { grid-column: auto; }
  }
</style>
</head>
<body>

<!-- ============ UTILITY BAR ============ -->
<div class="utility-bar">
  <div class="container">
    <div class="left">
      <span>📍 New York · London · Berlin · Tokyo</span>
    </div>
    <div class="right">
      <a href="#">Members Club</a>
      <a href="#">Submit a Critique</a>
      <a href="#">Newsletter</a>
      <a href="#tickets" class="pill">🎟 Get Tickets</a>
    </div>
  </div>
</div>

<!-- ============ HEADER ============ -->
<header class="main-header">
  <div class="container">
    <div class="header-inner">
      <div class="brand">
        <img src="https://placehold.co/120x120/1a1814/c9a961?text=L%26T&font=playfair display" alt="Lumière & Tempo Logo">
        <div class="brand-text">
          <div class="name">Lumière <span>&</span> Tempo</div>
          <div class="tag">Arts · Cinema · Stage</div>
        </div>
      </div>
      <nav class="primary-nav">
        <ul>
          <li><a href="#">Premieres</a></li>
          <li><a href="#events">Events</a></li>
          <li><a href="#tickets">Tickets</a></li>
          <li><a href="#schedule">Schedule</a></li>
          <li><a href="#reviews">Critique</a></li>
          <li><a href="#talent">Artists</a></li>
          <li><a href="#venues">Venues</a></li>
        </ul>
      </nav>
      <div class="header-actions">
        <button class="search-btn" aria-label="Search">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2"><circle cx="11" cy="11" r="7"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
        </button>
        <a href="#subscribe" class="cta-btn">Subscribe</a>
      </div>
    </div>
  </div>
</header>

<!-- ============ HERO ============ -->
<section class="hero">
  <div class="container">
    <div class="hero-content">
      <div class="eyebrow">★ Featured Premiere · Issue No. 47</div>
      <h1>The Quiet <em>Revolution</em> Reshaping Modern Theatre</h1>
      <p class="lede">A new wave of directors is dismantling the proscenium, inviting audiences into immersive worlds where the boundary between stage and spectator dissolves entirely. Inside the movement that's redefining what it means to gather in the dark.</p>
      <div class="hero-meta">
        <div class="meta-item">
          <span class="label">In Theatres</span>
          <span class="value">Through March 28</span>
        </div>
        <div class="meta-item">
          <span class="label">Venue</span>
          <span class="value">The Hollow Stage, Brooklyn</span>
        </div>
        <div class="meta-item">
          <span class="label">Runtime</span>
          <span class="value">2h 45m · no intermission</span>
        </div>
      </div>
      <div class="hero-cta">
        <a href="#reviews" class="btn-primary">Read The Critique →</a>
        <a href="#tickets" class="btn-ghost">Reserve Tickets</a>
      </div>
    </div>
  </div>
</section>

<!-- ============ MARQUEE ============ -->
<div class="marquee">
  <div class="marquee-track">
    <span>Sundance 2026 Lineup Announced</span>
    <span>Met Opera Reveals Spring Staging</span>
    <span>Rising Director Wins Olivier</span>
    <span>Cannes Adds Three Premieres</span>
    <span>Berlin Phil Tours Asia</span>
    <span>Broadway Strike Averted</span>
    <span>Sundance 2026 Lineup Announced</span>
    <span>Met Opera Reveals Spring Staging</span>
    <span>Rising Director Wins Olivier</span>
    <span>Cannes Adds Three Premieres</span>
    <span>Berlin Phil Tours Asia</span>
    <span>Broadway Strike Averted</span>
  </div>
</div>

<!-- ============ LATEST REVIEWS ============ -->
<section id="reviews">
  <div class="container">
    <div class="section-head">
      <div class="titles">
        <div class="eyebrow">Fresh Critique</div>
        <h2>This Week's Most Talked-<em>About</em> Productions</h2>
        <p>From experimental opera to intimate cinema, our critics weigh in on the premieres commanding audiences and igniting conversation across the global stage.</p>
      </div>
      <a href="#" class="link-more">View All Reviews →</a>
    </div>
    <div class="reviews-grid">
      <article class="review-card">
        <div class="thumb">
          <img src="https://picsum.photos/400/500?random=1" alt="Production still">
          <div class="score">9.4</div>
          <div class="badge">Theatre</div>
        </div>
        <div class="body">
          <div class="meta">Mar 14 · Hollow Stage, NYC</div>
          <h3>The Cartographer's Daughter</h3>
          <p>An ambitious three-act meditation on memory, staged with breathtaking visual economy. Director Amara Okonkwo has delivered a defining work.</p>
          <div class="critic">
            <img src="https://i.pravatar.cc/80?u=critic1" alt="">
            <div>
              <div class="name">Margot Lefèvre</div>
              <div class="role">Senior Theatre Critic</div>
            </div>
          </div>
        </div>
      </article>
      <article class="review-card">
        <div class="thumb">
          <img src="https://picsum.photos/400/500?random=2" alt="Film still">
          <div class="score">8.7</div>
          <div class="badge">Cinema</div>
        </div>
        <div class="body">
          <div class="meta">Mar 12 · In Wide Release</div>
          <h3>Northern Silence</h3>
          <p>A glacial, gorgeous debut from Icelandic director Sigrún Pálsdóttir. The film resists easy emotion and rewards patient viewers with something rare.</p>
          <div class="critic">
            <img src="https://i.pravatar.cc/80?u=critic2" alt="">
            <div>
              <div class="name">Daniel Okafor</div>
              <div class="role">Film Editor</div>
            </div>
          </div>
        </div>
      </article>
      <article class="review-card">
        <div class="thumb">
          <img src="https://picsum.photos/400/500?random=3" alt="Concert">
          <div class="score">9.1</div>
          <div class="badge">Music</div>
        </div>
        <div class="body">
          <div class="meta">Mar 10 · Royal Albert Hall</div>
          <h3>Saariaho Reimagined</h3>
          <p>The Helsinki Sinfonietta's all-Saariaho program was a revelation — textural, hypnotic, and performed with a clarity that bordered on the spiritual.</p>
          <div class="critic">
            <img src="https://i.pravatar.cc/80?u=critic3" alt="">
            <div>
              <div class="name">Yuki Tanaka</div>
              <div class="role">Classical Critic</div>
            </div>
          </div>
        </div>
      </article>
      <article class="review-card">
        <div class="thumb">
          <img src="https://picsum.photos/400/500?random=4" alt="Visual arts">
          <div class="score">8.9</div>
          <div class="badge">Visual Arts</div>
        </div>
        <div class="body">
          <div class="meta">Mar 09 · Tate Modern, London</div>
          <h3>After the Image Fails</h3>
          <p>Curator Jules Marchand's ambitious survey of post-photographic painting is uneven but consistently thought-provoking — a major institutional statement.</p>
          <div class="critic">
            <img src="https://i.pravatar.cc/80?u=critic4" alt="">
            <div>
              <div class="name">Priya Anand</div>
              <div class="role">Visual Arts Lead</div>
            </div>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============ BEHIND THE SCENES ============ -->
<section style="background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);">
  <div class="container">
    <div class="feature-article">
      <div class="image-side">
        <img src="https://picsum.photos/700/875?random=5" alt="Behind the scenes">
        <div class="floating">
          <div class="num">142</div>
          <div class="lbl">Hours of rehearsal<br>across 11 weeks</div>
        </div>
      </div>
      <div class="text-side">
        <div class="eyebrow">Behind the Scenes</div>
        <h2>Inside the <em>Staging</em> of a Modern Masterpiece</h2>
        <p>For five months, a converted warehouse in Long Island City became the unlikely birthplace of what critics are already calling the most ambitious American production of the decade. The set weighs fourteen tons. The lighting rig took six weeks to program. The cast, almost entirely unknown, has been living together in a hotel near the theatre since November.</p>
        <p class="pull">"We're not trying to make the audience comfortable. We're trying to make them present."</p>
        <p>Director Amara Okonkwo is known for her refusal to grant interviews, which made our six-hour visit to her rehearsal room all the more remarkable. She spoke — at length — about her obsession with silence as a dramaturgical tool, her rejection of conventional three-act structure, and why she chose to set the entire second act in near-total darkness.</p>
        <p>What emerges from these conversations is a portrait of an artist at the height of her powers, working with total conviction at a moment when the theatre itself feels newly vulnerable — and newly essential. The premiere, scheduled for next month, is already sold out through the spring. A national tour is rumored for autumn.</p>
        <div class="author">
          <img src="https://i.pravatar.cc/100?u=author1" alt="">
          <div>
            <div class="name">Eleanor Whitfield</div>
            <div class="role">Editor-at-Large · Performing Arts</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ INTERACTIVE EVENTS ============ -->
<section id="events" class="interactive-events">
  <div class="container">
    <div class="section-head">
      <div class="titles">
        <div class="eyebrow" style="color: var(--gold);">Coming Up · Live & On Stage</div>
        <h2>Discover What's <em>On Stage</em> Near You</h2>
        <p>Filter by medium to find tonight's perfect performance. Updated daily from over 480 verified venues across 32 cities worldwide.</p>
      </div>
    </div>
    <div class="filter-bar" id="filterBar">
      <button class="filter-btn active" data-filter="all">All Performances</button>
      <button class="filter-btn" data-filter="theatre">Theatre</button>
      <button class="filter-btn" data-filter="cinema">Cinema</button>
      <button class="filter-btn" data-filter="music">Music</button>
      <button class="filter-btn" data-filter="dance">Dance</button>
      <button class="filter-btn" data-filter="visual">Visual Arts</button>
      <button class="filter-btn" data-filter="opera">Opera</button>
    </div>
    <div class="events-grid" id="eventsGrid">
      <article class="event-card" data-cat="theatre">
        <div class="top">
          <img src="https://picsum.photos/500/310?random=10" alt="">
          <div class="date-tag"><div class="d">22</div><div class="m">Mar</div></div>
          <div class="cat-tag">Theatre</div>
        </div>
        <div class="body">
          <div class="venue">The Hollow Stage · Brooklyn</div>
          <h3>The Cartographer's Daughter</h3>
          <p>Amara Okonkwo's haunting new work. A meditation on inherited memory staged in total darkness for the second act.</p>
          <div class="footer">
            <div class="price">From $48</div>
            <a href="#" class="get-tickets">Get Tickets →</a>
          </div>
        </div>
      </article>
      <article class="event-card" data-cat="music">
        <div class="top">
          <img src="https://picsum.photos/500/310?random=11" alt="">
          <div class="date-tag"><div class="d">25</div><div class="m">Mar</div></div>
          <div class="cat-tag">Music</div>
        </div>
        <div class="body">
          <div class="venue">Carnegie Hall · Manhattan</div>
          <h3>Berlin Philharmonic: Mahler 9</h3>
          <p>Kirill Petrenko conducts an evening of Mahler's devastating final symphony. One night only.</p>
          <div class="footer">
            <div class="price">From $85</div>
            <a href="#" class="get-tickets">Get Tickets →</a>
          </div>
        </div>
      </article>
      <article class="event-card" data-cat="opera">
        <div class="top">
          <img src="https://picsum.photos/500/310?random=12" alt="">
          <div class="date-tag"><div class="d">28</div><div class="m">Mar</div></div>
          <div class="cat-tag">Opera</div>
        </div>
        <div class="body">
          <div class="venue">The Met · Lincoln Center</div>
          <h3>The Handmaid's Tale (Premiere)</h3>
          <p>Poul Ruders' operatic adaptation arrives in a stark new staging by Canadian director Atom Egoyan.</p>
          <div class="footer">
            <div class="price">From $125</div>
            <a href="#" class="get-tickets">Get Tickets →</a>
          </div>
        </div>
      </article>
      <article class="event-card" data-cat="dance">
        <div class="top">
          <img src="https://picsum.photos/500/310?random=13" alt="">
          <div class="date-tag"><div class="d">02</div><div class="m">Apr</div></div>
          <div class="cat-tag">Dance</div>
        </div>
        <div class="body">
          <div class="venue">Joyce Theater · Chelsea</div>
          <h3>Nederlands Dans Theater 2</h3>
          <p>The celebrated junior company returns with a triple bill of works by Pite, Goecke, and a stunning new commission.</p>
          <div class="footer">
            <div class="price">From $59</div>
            <a href="#" class="get-tickets">Get Tickets →</a>
          </div>
        </div>
      </article>
      <article class="event-card" data-cat="cinema">
        <div class="top">
          <img src="https://picsum.photos/500/310?random=14" alt="">
          <div class="date-tag"><div class="d">05</div><div class="m">Apr</div></div>
          <div class="cat-tag">Cinema</div>
        </div>
        <div class="body">
          <div class="venue">Film Forum · West Village</div>
          <h3>Tarkovsky Retrospective: 7 Films</h3>
          <p>A complete 35mm retrospective of the Russian master's work, introduced by critic Serge Hazera.</p>
          <div class="footer">
            <div class="price">From $16</div>
            <a href="#" class="get-tickets">Get Tickets →</a>
          </div>
        </div>
      </article>
      <article class="event-card" data-cat="visual">
        <div class="top">
          <img src="https://picsum.photos/500/310?random=15" alt="">
          <div class="date-tag"><div class="d">11</div><div class="m">Apr</div></div>
          <div class="cat-tag">Visual Arts</div>
        </div>
        <div class="body">
          <div class="venue">Pace Gallery · Tribeca</div>
          <h3>Hiroshi Sugimoto: Seascapes</h3>
          <p>The acclaimed photographer's first NYC show in five years. Long-exposure seascapes that dissolve into pure abstraction.</p>
          <div class="footer">
            <div class="price">Free Entry</div>
            <a href="#" class="get-tickets">RSVP →</a>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============ EMERGING TALENT + SIDEBAR ============ -->
<section id="talent">
  <div class="container">
    <div class="content-with-sidebar">
      <div>
        <div class="section-head">
          <div class="titles">
            <div class="eyebrow">Rising Voices</div>
            <h2>Emerging <em>Talent</em> to Watch in 2026</h2>
            <p>Twelve months ago, none of these artists were on our radar. Today, they're reshaping what the next decade of performance looks like.</p>
          </div>
          <a href="#" class="link-more">Full Watchlist →</a>
        </div>
        <div class="talent-grid">
          <article class="talent-card">
            <div class="img-wrap">
              <img src="https://i.pravatar.cc/400?u=artist1" alt="">
              <div class="label">Director</div>
            </div>
            <div class="body">
              <div class="discipline">Theatre · 29</div>
              <h3>Amara Okonkwo</h3>
              <p>Brooklyn-based director whose stark, ritualistic productions have redefined downtown theatre in just three seasons.</p>
              <div class="stats">
                <div class="stat"><div class="v">7</div><div class="l">Productions</div></div>
                <div class="stat"><div class="v">3</div><div class="l">Awards</div></div>
                <div class="stat"><div class="v">94%</div><div class="l">Sold Out</div></div>
              </div>
            </div>
          </article>
          <article class="talent-card">
            <div class="img-wrap">
              <img src="https://i.pravatar.cc/400?u=artist2" alt="">
              <div class="label">Composer</div>
            </div>
            <div class="body">
              <div class="discipline">Composition · 34</div>
              <h3>Sigrún Pálsdóttir</h3>
              <p>Icelandic composer and filmmaker whose glacial, minimalist scores for film and chamber ensemble have earned international acclaim.</p>
              <div class="stats">
                <div class="stat"><div class="v">4</div><div class="l">Films</div></div>
                <div class="stat"><div class="v">2</div><div class="l">Commissions</div></div>
                <div class="stat"><div class="v">2.1M</div><div class="l">Streams</div></div>
              </div>
            </div>
          </article>
          <article class="talent-card">
            <div class="img-wrap">
              <img src="https://i.pravatar.cc/400?u=artist3" alt="">
              <div class="label">Choreographer</div>
            </div>
            <div class="body">
              <div class="discipline">Dance · 26</div>
              <h3>Mateo Reyes-Vega</h3>
              <p>Buenos Aires-born choreographer fusing tango traditions with contemporary dance. Recently named resident artist at Sadler's Wells.</p>
              <div class="stats">
                <div class="stat"><div class="v">12</div><div class="l">Works</div></div>
                <div class="stat"><div class="v">5</div><div class="l">Companies</div></div>
                <div class="stat"><div class="v">88%</div><div class="l">Capacity</div></div>
              </div>
            </div>
          </article>
        </div>
      </div>

      <!-- SIDEBAR -->
      <aside class="sidebar">
        <div class="widget">
          <h4>Trending Now</h4>
          <ol class="trending-list">
            <li>
              <div class="t-content">
                <div class="meta">Cinema</div>
                <div class="title">Greta Gerwig confirms spring shoot for new musical drama</div>
              </div>
            </li>
            <li>
              <div class="t-content">
                <div class="meta">Theatre</div>
                <div class="title">Why every Broadway show is suddenly set in the 1970s</div>
              </div>
            </li>
            <li>
              <div class="t-content">
                <div class="meta">Music</div>
                <div class="title">The quiet rise of chamber music festivals in mid-size cities</div>
              </div>
            </li>
            <li>
              <div class="t-content">
                <div class="meta">Visual Arts</div>
                <div class="title">A new generation of curators is reshaping what museums show</div>
              </div>
            </li>
            <li>
              <div class="t-content">
                <div class="meta">Industry</div>
                <div class="title">Strike negotiations resume after surprise union proposal</div>
              </div>
            </li>
          </ol>
        </div>

        <div class="widget premiere-widget">
          <h4>Upcoming Premieres</h4>
          <div class="premiere">
            <img src="https://picsum.photos/120/120?random=20" alt="">
            <div class="p-content">
              <div class="d">Apr 02 · Theatre</div>
              <div class="t">After the Rehearsal (New Translation)</div>
            </div>
          </div>
          <div class="premiere">
            <img src="https://picsum.photos/120/120?random=21" alt="">
            <div class="p-content">
              <div class="d">Apr 09 · Cinema</div>
              <div class="t">The Longest Day in March</div>
            </div>
          </div>
          <div class="premiere">
            <img src="https://picsum.photos/120/120?random=22" alt="">
            <div class="p-content">
              <div class="d">Apr 14 · Opera</div>
              <div class="t">Eurydice Reimagined</div>
            </div>
          </div>
          <div class="premiere">
            <img src="https://picsum.photos/120/120?random=23" alt="">
            <div class="p-content">
              <div class="d">Apr 18 · Dance</div>
              <div class="t">Mothlight (World Premiere)</div>
            </div>
          </div>
        </div>

        <div class="widget newsletter-widget" id="subscribe">
          <h4>Subscribe to L&T</h4>
          <p>Weekly critique, premiere alerts, and members-only ticket presales. Delivered Sunday mornings.</p>
          <form onsubmit="event.preventDefault(); this.querySelector('button').textContent='✓ Subscribed';">
            <input type="email" placeholder="your@email.com" required>
            <button type="submit">Subscribe Free</button>
          </form>
        </div>
      </aside>
    </div>
  </div>
</section>

<!-- ============ VENUE GUIDE ============ -->
<section id="venues" class="venues-section">
  <div class="container">
    <div class="section-head">
      <div class="titles">
        <div class="eyebrow">The Venue Guide</div>
        <h2>Where the <em>Magic</em> Happens</h2>
        <p>From historic opera houses to radical black-box warehouses, our editors curate the world's most essential performance spaces — the rooms that shape how we experience live art.</p>
      </div>
      <a href="#" class="link-more">Explore All Venues →</a>
    </div>
    <div class="venues-grid">
      <div class="venue-tile featured">
        <img src="https://picsum.photos/900/700?random=30" alt="">
        <div class="vt-content">
          <div class="loc">Vienna, Austria · Opened 1869</div>
          <h3>The Vienna State Opera</h3>
          <div class="cap">Capacity 1,709 · 320 performances per year</div>
        </div>
      </div>
      <div class="venue-tile">
        <img src="https://picsum.photos/500/400?random=31" alt="">
        <div class="vt-content">
          <div class="loc">Brooklyn, NYC</div>
          <h3>The Hollow Stage</h3>
          <div class="cap">Capacity 240 · Immersive staging</div>
        </div>
      </div>
      <div class="venue-tile">
        <img src="https://picsum.photos/500/400?random=32" alt="">
        <div class="vt-content">
          <div class="loc">Tokyo, Japan</div>
          <h3>National Noh Theatre</h3>
          <div class="cap">Capacity 590 · Traditional staging</div>
        </div>
      </div>
      <div class="venue-tile">
        <img src="https://picsum.photos/500/400?random=33" alt="">
        <div class="vt-content">
          <div class="loc">Berlin, Germany</div>
          <h3>Volksbühne</h3>
          <div class="cap">Capacity 760 · Avant-garde</div>
        </div>
      </div>
      <div class="venue-tile">
        <img src="https://picsum.photos/500/400?random=34" alt="">
        <div class="vt-content">
          <div class="loc">Buenos Aires</div>
          <h3>Teatro Colón</h3>
          <div class="cap">Capacity 2,487 · Acoustics unmatched</div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ TESTIMONIALS ============ -->
<section class="testimonials-section">
  <div class="container">
    <div class="section-head">
      <div class="titles">
        <div class="eyebrow" style="color: var(--gold);">Voices From the Industry</div>
        <h2>What Critics & Audiences Are <em>Saying</em></h2>
        <p>Lumière & Tempo has become essential reading for everyone who cares about the future of performance. Here's what some of our readers have shared.</p>
      </div>
    </div>
    <div class="testimonials-grid">
      <div class="testimonial-card">
        <div class="stars">★★★★★</div>
        <blockquote>The only publication I read before deciding what to see. Their critique is sharp, fair, and unafraid to disagree with consensus.</blockquote>
        <div class="reviewer">
          <img src="https://i.pravatar.cc/100?u=reader1" alt="">
          <div>
            <div class="name">Theodore Almeida</div>
            <div class="role">Artistic Director, Almeida Theatre</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card">
        <div class="stars">★★★★★</div>
        <blockquote>I've trusted their reviews for six years. The writers clearly see dozens of performances a week — and somehow remain generous about it.</blockquote>
        <div class="reviewer">
          <img src="https://i.pravatar.cc/100?u=reader2" alt="">
          <div>
            <div class="name">Catherine Wu</div>
            <div class="role">Subscriber since 2020</div>
          </div>
        </div>
      </div>
      <div class="testimonial-card">
        <div class="stars">★★★★★</div>
        <blockquote>Their emerging talent features have launched careers — including mine. They find artists before anyone else does. Genuinely indispensable.</blockquote>
        <div class="reviewer">
          <img src="https://i.pravatar.cc/100?u=reader3" alt="">
          <div>
            <div class="name">Hanna Lindqvist</div>
            <div class="role">Composer · Featured 2024</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>

<!-- ============ FAQ ============ -->
<section class="faq-section">
  <div class="container">
    <div class="section-head" style="justify-content: center; text-align: center;">
      <div class="titles" style="max-width: 100%; margin: 0 auto;">
        <div class="eyebrow">Frequently Asked</div>
        <h2>Everything You <em>Want to Know</em></h2>
        <p>From membership tiers to submission guidelines — the answers to the questions our readers ask most often.</p>
      </div>
    </div>
    <div class="faq-list">
      <div class="faq-item">
        <button class="faq-question">How do I get tickets through Lumière & Tempo? <span class="icon">+</span></button>
        <div class="faq-answer">Members get presale access 48 hours before general on-sale for most major productions. Navigate to any event listing and click "Get Tickets" — you'll be directed to the venue's official box office. We never mark up prices and we never sell tickets we can't verify.</div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Can I submit my own work or performance for review? <span class="icon">+</span></button>
        <div class="faq-answer">Yes. We accept submissions from independent artists, small companies, and unjuried film festivals year-round. Send a press kit, performance dates, and a brief cover letter to submissions@lumiere-tempo.com. We read everything, though we can't guarantee coverage. Priority is given to NYC, London, Berlin, and Tokyo productions.</div>
      </div>
      <div class="faq-item">
        <button class="faq-question">What's included with a paid membership? <span class="icon">+</span></button>
        <div class="faq-answer">Members receive full access to our 12-year archive of reviews, the weekly critique newsletter, presale ticket access, no-ads reading, and members-only events throughout the year (studio visits, artist talks, backstage tours). Annual membership is $84 — about the price of two theatre tickets.</div>
      </div>
      <div class="faq-item">
        <button class="faq-question">Do you publish only negative reviews? <span class="icon">+</span></button>
        <div class="faq-answer">Absolutely not. Our critics file approximately 1,400 reviews per year and roughly 65% are positive or mixed-positive. We take pride in celebrating work we love — but we also believe honest criticism serves artists and audiences better than uniform praise.</div>
      </div>
      <div class="faq-item">
        <button class="faq-question">How can I pitch a feature story to the editorial team? <span class="icon">+</span></button>
        <div class="faq-answer">We commission roughly 60 features per year from freelance writers. Send a 200-word pitch, two writing samples, and your CV to pitches@lumiere-tempo.com. We respond to every pitch within 14 days. We're especially interested in reported pieces on labour, sustainability, and access in the performing arts.</div>
      </div>
    </div>
  </div>
</section>

<!-- ============ CTA STRIP ============ -->
<section class="cta-strip">
  <div class="container">
    <div class="text">
      <h2>Never miss a <em>curtain rise</em>.</h2>
      <p>Join 84,000 readers who get our weekly critique, premiere alerts, and members-only ticket presales delivered every Sunday morning.</p>
    </div>
    <div class="actions">
      <a href="#subscribe" class="btn-primary">Subscribe — Free →</a>
      <a href="#" class="btn-light">Become a Member</a>
    </div>
  </div>
</section>

<!-- ============ FOOTER ============ -->
<footer>
  <div class="container">
    <div class="footer-grid">
      <div class="footer-brand">
        <div class="brand">
          <img src="https://placehold.co/120x120/221f1a/c9a961?text=L%26T&font=playfair display" alt="">
          <div class="brand-text">
            <div class="name">Lumière <span>&</span> Tempo</div>
            <div class="tag" style="color: var(--gold);">Arts · Cinema · Stage</div>
          </div>
        </div>
        <p>The definitive pulse of performing arts, cinema, and live entertainment. Independent criticism from New York, London, Berlin, and Tokyo since 2014.</p>
        <div class="social-row">
          <a href="#" aria-label="Instagram"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2.2c3.2 0 3.6 0 4.8.1 1.2.1 1.8.2 2.2.4.6.2 1 .5 1.4.9.4.4.7.8.9 1.4.2.4.4 1 .4 2.2.1 1.2.1 1.6.1 4.8s0 3.6-.1 4.8c-.1 1.2-.2 1.8-.4 2.2-.2.6-.5 1-.9 1.4-.4.4-.8.7-1.4.9-.4.2-1 .4-2.2.4-1.2.1-1.6.1-4.8.1s-3.6 0-4.8-.1c-1.2-.1-1.8-.2-2.2-.4-.6-.2-1-.5-1.4-.9-.4-.4-.7-.8-.9-1.4-.2-.4-.4-1-.4-2.2-.1-1.2-.1-1.6-.1-4.8s0-3.6.1-4.8c.1-1.2.2-1.8.4-2.2.2-.6.5-1 .9-1.4.4-.4.8-.7 1.4-.9.4-.2 1-.4 2.2-.4 1.2-.1 1.6-.1 4.8-.1zm0 2.2c-3.1 0-3.5 0-4.7.1-1.1 0-1.7.2-2.1.4-.5.2-.9.4-1.3.8-.4.4-.6.8-.8 1.3-.2.4-.3 1-.4 2.1-.1 1.2-.1 1.6-.1 4.7s0 3.5.1 4.7c0 1.1.2 1.7.4 2.1.2.5.4.9.8 1.3.4.4.8.6 1.3.8.4.2 1 .3 2.1.4 1.2.1 1.6.1 4.7.1s3.5 0 4.7-.1c1.1 0 1.7-.2 2.1-.4.5-.2.9-.4 1.3-.8.4-.4.6-.8.8-1.3.2-.4.3-1 .4-2.1.1-1.2.1-1.6.1-4.7s0-3.5-.1-4.7c0-1.1-.2-1.7-.4-2.1-.2-.5-.4-.9-.8-1.3-.4-.4-.8-.6-1.3-.8-.4-.2-1-.3-2.1-.4-1.2-.1-1.6-.1-4.7-.1zm0 3.7c2.8 0 5.1 2.3 5.1 5.1s-2.3 5.1-5.1 5.1-5.1-2.3-5.1-5.1 2.3-5.1 5.1-5.1zm0 8.4c1.8 0 3.3-1.5 3.3-3.3s-1.5-3.3-3.3-3.3-3.3 1.5-3.3 3.3 1.5 3.3 3.3 3.3zm5.3-8.6c.7 0 1.2-.5 1.2-1.2s-.5-1.2-1.2-1.2-1.2.5-1.2 1.2.5 1.2 1.2 1.2z"/></svg></a>
          <a href="#" aria-label="Twitter"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"/></svg></a>
          <a href="#" aria-label="YouTube"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M23.5 6.2c-.3-1-1.1-1.8-2.1-2.1C19.5 3.5 12 3.5 12 3.5s-7.5 0-9.4.6c-1 .3-1.8 1.1-2.1 2.1C0 8.1 0 12 0 12s0 3.9.5 5.8c.3 1 1.1 1.8 2.1 2.1 1.9.6 9.4.6 9.4.6s7.5 0 9.4-.6c1-.3 1.8-1.1 2.1-2.1.5-1.9.5-5.8.5-5.8s0-3.9-.5-5.8zM9.6 15.6V8.4l6.2 3.6-6.2 3.6z"/></svg></a>
          <a href="#" aria-label="Spotify"><svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><path d="M12 0C5.4 0 0 5.4 0 12s5.4 12 12 12 12-5.4 12-12S18.6 0 12 0zm5.5 17.3c-.2.4-.7.5-1 .3-2.8-1.7-6.4-2.1-10.6-1.1-.4.1-.8-.1-.9-.5-.1-.4.1-.8.5-.9 4.6-1 8.5-.6 11.6 1.3.4.2.5.6.4.9zm1.4-3.2c-.3.4-.8.6-1.2.3-3.2-2-8.1-2.5-11.9-1.4-.5.1-1-.1-1.1-.6-.1-.5.1-1 .6-1.1 4.3-1.3 9.7-.7 13.4 1.6.4.3.5.8.2 1.2zm.1-3.4C15.3 8.4 8.7 8.2 5.1 9.3c-.6.2-1.2-.2-1.4-.7-.2-.6.2-1.2.7-1.4C8.6 5.9 15.8 6.1 20.1 9c.5.4.7 1.1.3 1.6-.3.5-1 .6-1.4.1z"/></svg></a>
        </div>
        <div class="contact-block">
          <strong>Editorial Offices</strong>
          218 Greene Avenue, Floor 3<br>
          Brooklyn, New York 11238<br>
          <strong style="margin-top:14px;">Inquiries</strong>
          editorial@lumiere-tempo.com<br>
          +1 (212) 555-0147
        </div>
      </div>
      <div class="footer-col">
        <h5>Sections</h5>
        <ul>
          <li><a href="#">Theatre Critique</a></li>
          <li><a href="#">Film Reviews</a></li>
          <li><a href="#">Classical Music</a></li>
          <li><a href="#">Visual Arts</a></li>
          <li><a href="#">Dance & Ballet</a></li>
          <li><a href="#">Opera</a></li>
          <li><a href="#">Industry News</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Resources</h5>
        <ul>
          <li><a href="#">Event Schedule</a></li>
          <li><a href="#">Tickets & Box Office</a></li>
          <li><a href="#">Venue Guide</a></li>
          <li><a href="#">Artist Database</a></li>
          <li><a href="#">Submit a Critique</a></li>
          <li><a href="#">Pitch a Story</a></li>
          <li><a href="#">Newsletter Archive</a></li>
        </ul>
      </div>
      <div class="footer-col">
        <h5>Company</h5>
        <ul>
          <li><a href="#">About Us</a></li>
          <li><a href="#">Our Critics</a></li>
          <li><a href="#">Membership</a></li>
          <li><a href="#">Advertising</a></li>
          <li><a href="#">Careers</a></li>
          <li><a href="#">Press Kit</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>
    </div>
    <div class="footer-bottom">
      <div>© 2026 Lumière & Tempo Media, LLC. All rights reserved. Published in New York.</div>
      <div class="legal">
        <a href="#">Privacy Policy</a>
        <a href="#">Terms of Service</a>
        <a href="#">Cookie Settings</a>
        <a href="#">Accessibility</a>
      </div>
    </div>
  </div>
</footer>

<script>
  // ============ EVENT FILTER ============
  const filterButtons = document.querySelectorAll('.filter-btn');
  const eventCards = document.querySelectorAll('.event-card');
  filterButtons.forEach(btn => {
    btn.addEventListener('click', () => {
      filterButtons.forEach(b => b.classList.remove('active'));
      btn.classList.add('active');
      const filter = btn.dataset.filter;
      eventCards.forEach(card => {
        if (filter === 'all' || card.dataset.cat === filter) {
          card.classList.remove('hidden');
        } else {
          card.classList.add('hidden');
        }
      });
    });
  });

  // ============ FAQ ACCORDION ============
  const faqItems = document.querySelectorAll('.faq-item');
  faqItems.forEach(item => {
    const q = item.querySelector('.faq-question');
    q.addEventListener('click', () => {
      const isOpen = item.classList.contains('open');
      faqItems.forEach(i => i.classList.remove('open'));
      if (!isOpen) item.classList.add('open');
    });
  });
</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:41:49.310Z",
  "url": "https://benchmark.aimac.invalid/84047d508f6a0a1d85fe2a1067e1623324d3bc00ebbdf6339600164a07a9009f.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "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": "<button class=\"search-btn\" aria-label=\"Search\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        </button>",
          "target": [
            ".search-btn"
          ]
        }
      ]
    },
    {
      "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": "<button class=\"search-btn\" aria-label=\"Search\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        </button>",
          "target": [
            ".search-btn"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<button class=\"search-btn\" aria-label=\"Search\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        </button>",
          "target": [
            ".search-btn"
          ]
        }
      ]
    },
    {
      "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": "<button class=\"search-btn\" aria-label=\"Search\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        </button>",
          "target": [
            ".search-btn"
          ]
        }
      ]
    },
    {
      "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": "<button class=\"search-btn\" aria-label=\"Search\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        </button>",
          "target": [
            ".search-btn"
          ]
        }
      ]
    },
    {
      "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": "<section style=\"background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);\">",
          "target": [
            "section:nth-child(6)"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"search-btn\" aria-label=\"Search\">\n          <svg width=\"18\" height=\"18\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.2\"><circle cx=\"11\" cy=\"11\" r=\"7\"></circle><line x1=\"21\" y1=\"21\" x2=\"16.65\" y2=\"16.65\"></line></svg>\n        </button>",
          "target": [
            ".search-btn"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1>The Quiet <em>Revolution</em> Reshaping Modern Theatre</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>This Week's Most Talked-<em>About</em> Productions</h2>",
                  "target": [
                    "#reviews > .container > .section-head > .titles > h2"
                  ]
                },
                {
                  "html": "<h3>The Cartographer's Daughter</h3>",
                  "target": [
                    ".review-card:nth-child(1) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Northern Silence</h3>",
                  "target": [
                    ".review-card:nth-child(2) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Saariaho Reimagined</h3>",
                  "target": [
                    ".review-card:nth-child(3) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>After the Image Fails</h3>",
                  "target": [
                    ".review-card:nth-child(4) > .body > h3"
                  ]
                },
                {
                  "html": "<h2>Inside the <em>Staging</em> of a Modern Masterpiece</h2>",
                  "target": [
                    ".text-side > h2"
                  ]
                },
                {
                  "html": "<h2>Discover What's <em>On Stage</em> Near You</h2>",
                  "target": [
                    "#events > .container > .section-head > .titles > h2"
                  ]
                },
                {
                  "html": "<h3>The Cartographer's Daughter</h3>",
                  "target": [
                    "article[data-cat=\"theatre\"] > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Berlin Philharmonic: Mahler 9</h3>",
                  "target": [
                    "article[data-cat=\"music\"] > .body > h3"
                  ]
                },
                {
                  "html": "<h3>The Handmaid's Tale (Premiere)</h3>",
                  "target": [
                    "article[data-cat=\"opera\"] > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Nederlands Dans Theater 2</h3>",
                  "target": [
                    "article[data-cat=\"dance\"] > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Tarkovsky Retrospective: 7 Films</h3>",
                  "target": [
                    "article[data-cat=\"cinema\"] > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Hiroshi Sugimoto: Seascapes</h3>",
                  "target": [
                    "article[data-cat=\"visual\"] > .body > h3"
                  ]
                },
                {
                  "html": "<h2>Emerging <em>Talent</em> to Watch in 2026</h2>",
                  "target": [
                    ".content-with-sidebar > div > .section-head > .titles > h2"
                  ]
                },
                {
                  "html": "<h3>Amara Okonkwo</h3>",
                  "target": [
                    ".talent-card:nth-child(1) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Sigr\u00fan P\u00e1lsd\u00f3ttir</h3>",
                  "target": [
                    ".talent-card:nth-child(2) > .body > h3"
                  ]
                },
                {
                  "html": "<h3>Mateo Reyes-Vega</h3>",
                  "target": [
                    ".talent-card:nth-child(3) > .body > h3"
                  ]
                },
                {
                  "html": "<h4>Trending Now</h4>",
                  "target": [
                    ".widget:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Upcoming Premieres</h4>",
                  "target": [
                    ".premiere-widget > h4"
                  ]
                },
                {
                  "html": "<h4>Subscribe to L&amp;T</h4>",
                  "target": [
                    "#subscribe > h4"
                  ]
                },
                {
                  "html": "<h2>Where the <em>Magic</em> Happens</h2>",
                  "target": [
                    "#venues > .container > .section-head > .titles > h2"
                  ]
                },
                {
                  "html": "<h3>The Vienna State Opera</h3>",
                  "target": [
                    ".featured > .vt-content > h3"
                  ]
                },
                {
                  "html": "<h3>The Hollow Stage</h3>",
                  "target": [
                    ".venue-tile:nth-child(2) > .vt-content > h3"
                  ]
                },
                {
                  "html": "<h3>National Noh Theatre</h3>",
                  "target": [
                    ".venue-tile:nth-child(3) > .vt-content > h3"
                  ]
                },
                {
                  "html": "<h3>Volksb\u00fchne</h3>",
                  "target": [
                    ".venue-tile:nth-child(4) > .vt-content > h3"
                  ]
                },
                {
                  "html": "<h3>Teatro Col\u00f3n</h3>",
                  "target": [
                    ".venue-tile:nth-child(5) > .vt-content > h3"
                  ]
                },
                {
                  "html": "<h2>What Critics &amp; Audiences Are <em>Saying</em></h2>",
                  "target": [
                    ".testimonials-section > .container > .section-head > .titles > h2"
                  ]
                },
                {
                  "html": "<h2>Everything You <em>Want to Know</em></h2>",
                  "target": [
                    ".faq-section > .container > .section-head > .titles > h2"
                  ]
                },
                {
                  "html": "<h2>Never miss a <em>curtain rise</em>.</h2>",
                  "target": [
                    ".text > h2"
                  ]
                },
                {
                  "html": "<h5>Sections</h5>",
                  "target": [
                    ".footer-col:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5>Resources</h5>",
                  "target": [
                    ".footer-col:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5>Company</h5>",
                  "target": [
                    ".footer-col:nth-child(4) > h5"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d8cdb6",
                "bgColor": "#1a1814",
                "contrastRatio": 11.25,
                "fontSize": "9.8pt (13px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 11.25"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span>\ud83d\udccd New York \u00b7 London \u00b7 Berlin \u00b7 Tokyo</span>",
          "target": [
            ".left > span"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<input type=\"email\" placeholder=\"your@email.com\" required=\"\">",
          "target": [
            "input"
          ]
        }
      ]
    },
    {
      "id": "html-has-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure every HTML document has a lang attribute",
      "help": "<html> element must have a lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-has-lang?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "The <html> element has a lang attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "html-lang-valid",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "TTv5",
        "TT11.a",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure the lang attribute of the <html> element has a valid value",
      "help": "<html> element must have a valid value for the lang attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-lang-valid?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "valid-lang",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Value of lang attribute is included in the list of valid languages"
            }
          ],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "TT7.b",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <img> elements have alternative text or a role of none or presentation",
      "help": "Images must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/image-alt?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-alt",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has an alt attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "alt-space-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a valid alt attribute value"
            }
          ],
          "impact": null,
          "html": "<img src=\"https://placehold.co/120x120/1a1814/c9a961?text=L%26T&amp;font=playfair display\" alt=\"Lumi\u00e8re &amp; Tempo Logo\">",
          "target": [
            "img[alt=\"Lumi\u00e8re & Tempo Logo\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input type=\"email\" placeholder=\"your@email.com\" required=\"\">",
          "target": [
            "input"
          ]
        }
      ]
    },
    {
      "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=\"#\">Members Club</a>",
          "target": [
            ".right > a[href=\"#\"]:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul>",
          "target": [
            "nav > ul"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#\">Premieres</a></li>",
          "target": [
            "nav > ul > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/120x120/1a1814/c9a961?text=L%26T&amp;font=playfair display\" alt=\"Lumi\u00e8re &amp; Tempo Logo\">",
          "target": [
            "img[alt=\"Lumi\u00e8re & Tempo Logo\"]"
          ]
        }
      ]
    },
    {
      "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-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=\"#\">Members Club</a>",
          "target": [
            ".right > a[href=\"#\"]:nth-child(1)"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": "pseudoContent",
                "expectedContrastRatio": "4.5:1"
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"hero\">",
                  "target": [
                    ".hero"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element's background color could not be determined due to a pseudo element"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\">\u2605 Featured Premiere \u00b7 Issue No. 47</div>",
          "target": [
            ".hero-content > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element's background color could not be determined due to a pseudo element"
        }
      ]
    }
  ],
  "violations": [
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 2.91,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #a88a4a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\">Fresh Critique</div>",
          "target": [
            "#reviews > .container > .section-head > .titles > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #a88a4a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"review-card\">",
                  "target": [
                    ".review-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"meta\">Mar 14 \u00b7 Hollow Stage, NYC</div>",
          "target": [
            ".review-card:nth-child(1) > .body > .meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"review-card\">",
                  "target": [
                    ".review-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"meta\">Mar 12 \u00b7 In Wide Release</div>",
          "target": [
            ".review-card:nth-child(2) > .body > .meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"review-card\">",
                  "target": [
                    ".review-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"meta\">Mar 10 \u00b7 Royal Albert Hall</div>",
          "target": [
            ".review-card:nth-child(3) > .body > .meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"review-card\">",
                  "target": [
                    ".review-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"meta\">Mar 09 \u00b7 Tate Modern, London</div>",
          "target": [
            ".review-card:nth-child(4) > .body > .meta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section style=\"background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);\">",
                  "target": [
                    "section:nth-child(6)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\">Behind the Scenes</div>",
          "target": [
            ".text-side > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 2.91,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #a88a4a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\">Rising Voices</div>",
          "target": [
            ".content-with-sidebar > div > .section-head > .titles > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #a88a4a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"talent-card\">",
                  "target": [
                    ".talent-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"discipline\">Theatre \u00b7 29</div>",
          "target": [
            ".talent-card:nth-child(1) > .body > .discipline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"talent-card\">",
                  "target": [
                    ".talent-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"discipline\">Composition \u00b7 34</div>",
          "target": [
            ".talent-card:nth-child(2) > .body > .discipline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "8.3pt (11px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"talent-card\">",
                  "target": [
                    ".talent-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"discipline\">Dance \u00b7 26</div>",
          "target": [
            ".talent-card:nth-child(3) > .body > .discipline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 8.3pt (11px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#fbf7ee",
                "contrastRatio": 3.06,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section id=\"venues\" class=\"venues-section\">",
                  "target": [
                    "#venues"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\">The Venue Guide</div>",
          "target": [
            "#venues > .container > .section-head > .titles > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.06 (foreground color: #a88a4a, background color: #fbf7ee, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a88a4a",
                "bgColor": "#f6f1e8",
                "contrastRatio": 2.91,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.91 (foreground color: #a88a4a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<div class=\"eyebrow\">Frequently Asked</div>",
          "target": [
            ".faq-section > .container > .section-head > .titles > .eyebrow"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.91 (foreground color: #a88a4a, background color: #f6f1e8, font size: 9.0pt (12px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 9874
      },
      {
        "y": 576,
        "height": 9874
      },
      {
        "y": 1152,
        "height": 9874
      },
      {
        "y": 1728,
        "height": 9874
      },
      {
        "y": 2304,
        "height": 9874
      },
      {
        "y": 2880,
        "height": 9874
      },
      {
        "y": 3456,
        "height": 9874
      },
      {
        "y": 4032,
        "height": 9874
      },
      {
        "y": 4608,
        "height": 9874
      },
      {
        "y": 5184,
        "height": 9874
      },
      {
        "y": 5760,
        "height": 9874
      },
      {
        "y": 6336,
        "height": 9874
      },
      {
        "y": 6912,
        "height": 9874
      },
      {
        "y": 7488,
        "height": 9874
      },
      {
        "y": 8064,
        "height": 9874
      },
      {
        "y": 8640,
        "height": 9874
      },
      {
        "y": 9154,
        "height": 9874
      }
    ],
    "scans": 18,
    "max_states": 512,
    "settle_ms": 5000,
    "page_timeout_seconds": 150,
    "layout_stability": "consecutive 100ms size samples within one CSS pixel",
    "animation_settling": "finite animations present when scroll resources are ready finish or are cancelled",
    "interactive_states": "not exercised",
    "horizontal_scroll": "not exercised"
  }
}
System Prompt
You are a lead web developer at a top digital agency, tasked with creating a one-page website for a new client based on the given specifications, delivered as an HTML file. First non-whitespace char '<', last non-whitespace char '>'. Use the following services to generate placeholder images where needed:
- placehold.co (text): https://placehold.co/[{w}x{h}|{size}][/{bg-color}/{text-color}]?text={text}&font=[lato|lora|montserrat|noto sans|open sans|oswald|playfair display|poppins|pt sans|raleway|roboto|source sans|source sans pro]
- picsum.photos (photos): https://picsum.photos/[{w}/{h}|{size}]?[grayscale][&blur={1-10}]
- pravatar.cc (avatars): https://i.pravatar.cc/{size}?u={identifier}
Choose sizes appropriate to layout.
User Prompt
Create a **complete, polished, production-quality** primary web page for a new client in the "Arts and Entertainment" sector.
Your goal is to generate the full HTML code for a page that is not just functional but also visually compelling, content-rich, and feels like a finished product ready for launch.

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

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

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "Events", "Tickets", "Schedule".
-   **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: "Behind the Scenes", "Emerging Talent", "Venue Guide".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "staging", "critique", "premiere".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Read Reviews", "Subscribe", "Connect".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Arts and Entertainment" sector. Ideas similar but not limited to: "review aggregator".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "trending now", "upcoming premieres", "artist interviews".
-   **FOOTER:** Include a professional footer with invented contact details, copyright (current year), social media links, and standard links (Privacy, Terms).
-   **MODERN WEB PATTERNS:** Include modern web patterns like testimonial cards, feature grids, or FAQ accordions where appropriate.