DeepSeek DeepSeek V4.1 Flash 1017 – Society

via DeepInfra · Generated

  • AIMAC Debt 4.44
  • Cost $0.008
  • Total Violations 13
  • HTML Size 70 KB
  • Em Dashes 17

Screenshot

View DeepSeek DeepSeek V4.1 Flash 1017 Society page View Live Page

Accessibility Issues Found

13 Serious

  • color-contrast serious 13 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="match-card__spots">4 spots open</span>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Common Thread Collective — Grassroots Voices, Lasting Change</title>
<meta name="description" content="Common Thread Collective is a coalition of organizers, neighbors, and local institutions working on housing, public education, climate resilience, and cultural preservation across 14 neighborhoods.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<style>
/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --ink:#10241f;
  --ink-2:#1b3a32;
  --paper:#fbf7f0;
  --paper-2:#f2ebdf;
  --cream:#f6efe2;
  --accent:#c2542f;
  --accent-dark:#9e3f1e;
  --amber:#e2a53f;
  --sage:#7d9b8a;
  --muted:#5a6f68;
  --line:rgba(16,36,31,.14);
  --line-light:rgba(251,247,240,.18);
  --radius:18px;
  --shadow:0 30px 70px -40px rgba(16,36,31,.55);
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --container:1200px;
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{
  font-family:var(--serif);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.022em;
  margin:0;
}
h1{font-size:clamp(2.4rem,4.6vw,4rem)}
h2{font-size:clamp(1.9rem,3.3vw,2.9rem)}
h3{font-size:clamp(1.2rem,1.7vw,1.45rem);letter-spacing:-.015em}
h4{font-size:1.05rem;letter-spacing:-.01em}
p{margin:0 0 1.1em}
p:last-child{margin-bottom:0}
.container{width:min(100% - 48px,var(--container));margin-inline:auto}
section{scroll-margin-top:120px}
.section{padding:96px 0}
.section--tight{padding:72px 0}

/* ============================================================
   SHARED COMPONENTS
   ============================================================ */
.eyebrow{
  display:inline-flex;
  align-items:center;
  gap:.6rem;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--accent);
  margin:0 0 1.1rem;
}
.eyebrow::before{
  content:"";
  width:26px;height:2px;
  background:var(--accent);
  display:inline-block;
  border-radius:2px;
}
.eyebrow--light{color:var(--amber)}
.eyebrow--light::before{background:var(--amber)}

.section-head{max-width:720px;margin-bottom:52px}
.section-head p{color:var(--muted);font-size:1.06rem;margin-top:1.1rem}
.section-head--center{margin-inline:auto;text-align:center}
.section-head--center .eyebrow{justify-content:center}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.55rem;
  padding:.92rem 1.6rem;
  border-radius:999px;
  font-family:var(--sans);
  font-size:.94rem;
  font-weight:600;
  letter-spacing:.005em;
  text-decoration:none;
  border:1.5px solid transparent;
  cursor:pointer;
  transition:transform .22s ease, background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease;
  white-space:nowrap;
}
.btn--primary{background:var(--accent);color:#fff;box-shadow:0 14px 30px -18px rgba(194,84,47,.9)}
.btn--primary:hover{background:var(--accent-dark);transform:translateY(-2px)}
.btn--ghost{border-color:rgba(16,36,31,.28);color:var(--ink);background:transparent}
.btn--ghost:hover{background:var(--ink);border-color:var(--ink);color:var(--paper);transform:translateY(-2px)}
.btn--light{background:var(--paper);color:var(--ink)}
.btn--light:hover{background:var(--amber);color:var(--ink);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:var(--paper)}
.btn--dark:hover{background:var(--ink-2);transform:translateY(-2px)}
.btn--outline-light{border-color:rgba(251,247,240,.35);color:var(--paper);background:transparent}
.btn--outline-light:hover{background:rgba(251,247,240,.12);border-color:var(--paper)}

.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:.45rem;
  font-size:.88rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  color:var(--accent-dark);
  transition:gap .2s ease, color .2s ease;
}
.link-arrow::after{content:"→";transition:transform .2s ease}
.link-arrow:hover{gap:.7rem;color:var(--accent)}
.link-arrow--light{color:var(--amber)}
.link-arrow--light:hover{color:#fff}

.tag{
  display:inline-block;
  padding:.32rem .7rem;
  border-radius:999px;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  background:rgba(194,84,47,.1);
  color:var(--accent-dark);
}
.tag--light{background:rgba(226,165,63,.16);color:var(--amber)}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{
  background:var(--ink);
  color:rgba(251,247,240,.82);
  font-size:.79rem;
  letter-spacing:.01em;
}
.topbar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  padding:.55rem 0;
}
.topbar p{display:flex;align-items:center;gap:.6rem;margin:0}
.topbar strong{color:var(--paper);font-weight:600}
.dot{
  width:7px;height:7px;border-radius:50%;
  background:var(--amber);
  display:inline-block;
  box-shadow:0 0 0 4px rgba(226,165,63,.18);
}
.topbar__links{display:flex;gap:1.4rem}
.topbar__links a{text-decoration:none;color:rgba(251,247,240,.7);transition:color .2s}
.topbar__links a:hover{color:var(--amber)}

/* ============================================================
   HEADER
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:60;
  background:rgba(251,247,240,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:2rem;
  padding:.9rem 0;
}
.brand{
  display:flex;
  align-items:center;
  gap:.85rem;
  text-decoration:none;
  flex-shrink:0;
}
.brand img{
  width:52px;height:52px;
  border-radius:14px;
  object-fit:cover;
}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__name{
  font-family:var(--serif);
  font-size:1.22rem;
  font-weight:700;
  letter-spacing:-.02em;
}
.brand__tag{
  font-size:.68rem;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.nav{
  display:flex;
  align-items:center;
  gap:1.9rem;
}
.nav a:not(.btn){
  font-size:.9rem;
  font-weight:500;
  text-decoration:none;
  color:var(--ink);
  position:relative;
  padding:.25rem 0;
}
.nav a:not(.btn)::after{
  content:"";
  position:absolute;
  left:0;bottom:-2px;
  width:0;height:2px;
  background:var(--accent);
  transition:width .25s ease;
  border-radius:2px;
}
.nav a:not(.btn):hover::after{width:100%}
.nav__cta{padding:.7rem 1.35rem;font-size:.86rem}
.nav-toggle{
  display:none;
  background:none;
  border:1.5px solid var(--line);
  border-radius:12px;
  width:46px;height:46px;
  cursor:pointer;
  padding:0;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:5px;
}
.nav-toggle span{
  display:block;
  width:20px;height:2px;
  background:var(--ink);
  border-radius:2px;
  transition:transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:78px 0 0;position:relative;overflow:hidden}
.hero::before{
  content:"";
  position:absolute;
  top:-160px;right:-140px;
  width:520px;height:520px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(226,165,63,.16),transparent 68%);
  pointer-events:none;
}
.hero__grid{
  display:grid;
  grid-template-columns:1.08fr .92fr;
  gap:64px;
  align-items:center;
  position:relative;
}
.hero h1{margin-bottom:1.5rem}
.hero h1 em{
  font-style:italic;
  color:var(--accent);
  font-weight:500;
}
.lead{
  font-size:1.1rem;
  color:var(--muted);
  max-width:56ch;
  margin-bottom:2rem;
}
.hero__actions{display:flex;flex-wrap:wrap;gap:.9rem;margin-bottom:2.6rem}
.hero__proof{
  display:flex;
  align-items:center;
  gap:1rem;
  padding-top:1.6rem;
  border-top:1px solid var(--line);
  max-width:430px;
}
.avatars{display:flex}
.avatars img{
  width:44px;height:44px;
  border-radius:50%;
  border:3px solid var(--paper);
  margin-left:-12px;
  object-fit:cover;
}
.avatars img:first-child{margin-left:0}
.hero__proof p{font-size:.87rem;color:var(--muted);margin:0;line-height:1.45}
.hero__proof strong{color:var(--ink);font-weight:600}

.hero__media{position:relative}
.hero__media > img{
  width:100%;
  aspect-ratio:4/4.6;
  object-fit:cover;
  border-radius:26px;
  box-shadow:var(--shadow);
}
.hero__card{
  position:absolute;
  left:-26px;
  bottom:34px;
  background:var(--paper);
  border-radius:16px;
  padding:1.1rem 1.4rem;
  box-shadow:0 24px 50px -28px rgba(16,36,31,.6);
  display:flex;
  flex-direction:column;
  gap:.15rem;
  max-width:200px;
}
.hero__card-num{
  font-family:var(--serif);
  font-size:2.1rem;
  font-weight:700;
  line-height:1;
  color:var(--accent);
}
.hero__card span:last-child{
  font-size:.78rem;
  letter-spacing:.04em;
  color:var(--muted);
  font-weight:500;
}

/* ============================================================
   STATS STRIP
   ============================================================ */
.stats{
  margin-top:78px;
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
  background:var(--paper-2);
}
.stats__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
}
.stat{
  padding:38px 28px;
  border-left:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.stat:first-child{border-left:none;padding-left:0}
.stat__num{
  font-family:var(--serif);
  font-size:2.5rem;
  font-weight:600;
  line-height:1;
  letter-spacing:-.03em;
}
.stat__label{
  font-size:.82rem;
  color:var(--muted);
  letter-spacing:.03em;
}

/* ============================================================
   ISSUES
   ============================================================ */
.issues{background:var(--paper)}
.issues__grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:26px;
}
.issue-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.issue-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 50px -34px rgba(16,36,31,.55);
  border-color:rgba(16,36,31,.28);
}
.issue-card__media{position:relative;overflow:hidden}
.issue-card__media img{
  width:100%;
  aspect-ratio:5/4;
  object-fit:cover;
  transition:transform .5s ease;
}
.issue-card:hover .issue-card__media img{transform:scale(1.05)}
.issue-card__num{
  position:absolute;
  top:14px;left:14px;
  background:rgba(251,247,240,.94);
  color:var(--ink);
  font-family:var(--serif);
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.06em;
  padding:.3rem .6rem;
  border-radius:8px;
}
.issue-card__body{
  padding:1.4rem 1.4rem 1.6rem;
  display:flex;
  flex-direction:column;
  gap:.7rem;
  flex:1;
}
.issue-card__body p{font-size:.92rem;color:var(--muted);margin:0}
.issue-card__body .link-arrow{margin-top:auto;padding-top:.5rem}

/* ============================================================
   CAMPAIGNS (dark)
   ============================================================ */
.campaigns{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.campaigns::after{
  content:"";
  position:absolute;
  bottom:-220px;left:-160px;
  width:600px;height:600px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(125,155,138,.22),transparent 65%);
  pointer-events:none;
}
.campaigns .section-head p{color:rgba(251,247,240,.66)}
.campaigns__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
  position:relative;
  z-index:1;
}
.campaign-card{
  background:rgba(251,247,240,.045);
  border:1px solid var(--line-light);
  border-radius:var(--radius);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .3s ease, background .3s ease, border-color .3s ease;
}
.campaign-card:hover{
  transform:translateY(-6px);
  background:rgba(251,247,240,.08);
  border-color:rgba(251,247,240,.32);
}
.campaign-card__media img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
  opacity:.92;
}
.campaign-card__body{
  padding:1.6rem 1.5rem 1.7rem;
  display:flex;
  flex-direction:column;
  gap:.85rem;
  flex:1;
}
.campaign-card h3{color:var(--paper)}
.campaign-card p{
  font-size:.92rem;
  color:rgba(251,247,240,.66);
  margin:0;
}
.progress-wrap{margin-top:.4rem}
.progress-meta{
  display:flex;
  justify-content:space-between;
  font-size:.76rem;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:rgba(251,247,240,.62);
  margin-bottom:.5rem;
}
.progress-meta strong{color:var(--amber);font-weight:600}
.progress{
  height:7px;
  border-radius:99px;
  background:rgba(251,247,240,.14);
  overflow:hidden;
}
.progress__bar{
  height:100%;
  border-radius:99px;
  background:linear-gradient(90deg,var(--amber),#f0c579);
}
.campaign-card .link-arrow{margin-top:.9rem}

/* ============================================================
   NEWS
   ============================================================ */
.news{background:var(--paper)}
.news__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:2rem;
  margin-bottom:52px;
  flex-wrap:wrap;
}
.news__head .section-head{margin-bottom:0}
.news__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.news-card{
  display:flex;
  flex-direction:column;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  overflow:hidden;
  text-decoration:none;
  transition:transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.news-card:hover{
  transform:translateY(-6px);
  box-shadow:0 28px 50px -34px rgba(16,36,31,.5);
  border-color:rgba(16,36,31,.28);
}
.news-card img{
  width:100%;
  aspect-ratio:16/10;
  object-fit:cover;
}
.news-card__body{
  padding:1.5rem 1.5rem 1.7rem;
  display:flex;
  flex-direction:column;
  gap:.75rem;
  flex:1;
}
.news-card__meta{
  display:flex;
  align-items:center;
  gap:.7rem;
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--muted);
  font-weight:500;
}
.news-card__meta .sep{
  width:4px;height:4px;border-radius:50%;background:var(--muted);opacity:.6;
}
.news-card h3{font-size:1.22rem;line-height:1.24}
.news-card p{font-size:.92rem;color:var(--muted);margin:0}
.news-card .link-arrow{margin-top:auto;padding-top:.6rem}

/* ============================================================
   VOLUNTEER MATCHER
   ============================================================ */
.volunteer{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.matcher{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:22px;
  padding:2rem;
  box-shadow:0 30px 60px -46px rgba(16,36,31,.55);
}
.matcher__controls{
  display:grid;
  grid-template-columns:repeat(3,1fr) auto;
  gap:1.1rem;
  align-items:end;
}
.field{display:flex;flex-direction:column;gap:.45rem}
.field label{
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.field select{
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:500;
  color:var(--ink);
  background-color:var(--paper);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'><path d='M1 1l6 6 6-6' fill='none' stroke='%2310241f' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat:no-repeat;
  background-position:right 1rem center;
  border:1.5px solid var(--line);
  border-radius:12px;
  padding:.85rem 2.6rem .85rem 1rem;
  cursor:pointer;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.field select:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 4px rgba(194,84,47,.12);
}
.matcher__submit{padding:.95rem 1.7rem;height:fit-content}

.matcher__results-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:1rem;
  margin:2.2rem 0 1.2rem;
  padding-top:1.8rem;
  border-top:1px dashed var(--line);
  flex-wrap:wrap;
}
.matcher__results-head h3{font-size:1.15rem}
.matcher__count{
  font-size:.85rem;
  color:var(--muted);
}
.matcher__count strong{color:var(--accent-dark);font-weight:700}
.matcher__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.match-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.3rem 1.3rem 1.4rem;
  display:flex;
  flex-direction:column;
  gap:.65rem;
  transition:border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.match-card:hover{
  border-color:rgba(194,84,47,.5);
  box-shadow:0 18px 34px -26px rgba(16,36,31,.5);
  transform:translateY(-3px);
}
.match-card__top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
}
.match-card__spots{
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--sage);
}
.match-card h4{font-size:1.02rem;line-height:1.25}
.match-card p{font-size:.86rem;color:var(--muted);margin:0}
.match-card__meta{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:.4rem;
  margin:.15rem 0 .3rem;
  padding:0;
}
.match-card__meta li{
  font-size:.7rem;
  font-weight:500;
  letter-spacing:.04em;
  text-transform:uppercase;
  color:var(--muted);
  background:rgba(16,36,31,.055);
  border-radius:6px;
  padding:.24rem .5rem;
}
.match-card .link-arrow{margin-top:auto;font-size:.82rem}
.matcher__empty{
  grid-column:1/-1;
  text-align:center;
  padding:2.6rem 1.5rem;
  border:1px dashed var(--line);
  border-radius:14px;
}
.matcher__empty h4{margin-bottom:.5rem}
.matcher__empty p{color:var(--muted);font-size:.93rem;max-width:46ch;margin:0 auto 1.2rem}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.testimonials{background:var(--paper)}
.testimonials__grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:26px;
}
.testimonial{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:2rem 1.8rem;
  display:flex;
  flex-direction:column;
  gap:1.3rem;
  position:relative;
}
.testimonial--feature{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.testimonial__mark{
  font-family:var(--serif);
  font-size:2.6rem;
  line-height:.6;
  color:var(--accent);
  height:.7em;
}
.testimonial--feature .testimonial__mark{color:var(--amber)}
.testimonial blockquote{
  margin:0;
  font-size:1rem;
  line-height:1.62;
  color:var(--ink-2);
}
.testimonial--feature blockquote{color:rgba(251,247,240,.9)}
.testimonial__person{
  display:flex;
  align-items:center;
  gap:.85rem;
  margin-top:auto;
  padding-top:1.1rem;
  border-top:1px solid var(--line);
}
.testimonial--feature .testimonial__person{border-color:var(--line-light)}
.testimonial__person img{
  width:48px;height:48px;
  border-radius:50%;
  object-fit:cover;
}
.testimonial__name{
  font-weight:600;
  font-size:.93rem;
  display:block;
  line-height:1.3;
}
.testimonial__role{
  font-size:.79rem;
  color:var(--muted);
  display:block;
}
.testimonial--feature .testimonial__role{color:rgba(251,247,240,.6)}

/* ============================================================
   RESOURCES + SIDEBAR
   ============================================================ */
.resources{
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}
.resources__grid{
  display:grid;
  grid-template-columns:1.55fr .95fr;
  gap:56px;
  align-items:start;
}
.resource-list{display:flex;flex-direction:column;gap:16px}
.resource-item{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:1.2rem;
  align-items:center;
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:14px;
  padding:1.35rem 1.5rem;
  text-decoration:none;
  transition:transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.resource-item:hover{
  transform:translateX(4px);
  border-color:rgba(194,84,47,.45);
  box-shadow:0 18px 34px -28px rgba(16,36,31,.5);
}
.resource-item__icon{
  width:46px;height:46px;
  border-radius:12px;
  background:rgba(194,84,47,.1);
  color:var(--accent-dark);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--serif);
  font-weight:700;
  font-size:.95rem;
  flex-shrink:0;
}
.resource-item h4{font-size:1.02rem;margin-bottom:.2rem}
.resource-item p{font-size:.86rem;color:var(--muted);margin:0}
.resource-item__cta{
  font-size:.76rem;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
  white-space:nowrap;
}

.sidebar{display:flex;flex-direction:column;gap:24px}
.side-card{
  background:var(--paper);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:1.6rem 1.5rem;
}
.side-card--alert{
  background:var(--ink);
  color:var(--paper);
  border-color:var(--ink);
}
.side-card__title{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--muted);
  margin-bottom:1.2rem;
}
.side-card--alert .side-card__title{color:var(--amber)}
.side-card__title span.live{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  font-size:.66rem;
  letter-spacing:.1em;
  color:var(--amber);
}
.side-card__title span.live::before{
  content:"";
  width:6px;height:6px;border-radius:50%;
  background:var(--amber);
  animation:pulse 2s infinite;
}
@keyframes pulse{
  0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(226,165,63,.5)}
  50%{opacity:.6;box-shadow:0 0 0 5px rgba(226,165,63,0)}
}
.alert-item{
  padding:.9rem 0;
  border-top:1px solid var(--line-light);
}
.alert-item:first-of-type{border-top:none;padding-top:0}
.alert-item h4{font-size:.96rem;margin-bottom:.3rem;color:var(--paper)}
.alert-item p{font-size:.83rem;color:rgba(251,247,240,.64);margin:0 0 .55rem}
.alert-item .link-arrow{font-size:.78rem}

.event-item{
  display:grid;
  grid-template-columns:52px 1fr;
  gap:1rem;
  padding:.9rem 0;
  border-top:1px solid var(--line);
  align-items:start;
}
.event-item:first-of-type{border-top:none;padding-top:0}
.event-date{
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:10px;
  text-align:center;
  padding:.35rem 0 .4rem;
}
.event-date .m{
  display:block;
  font-size:.62rem;
  font-weight:700;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--accent-dark);
}
.event-date .d{
  display:block;
  font-family:var(--serif);
  font-size:1.18rem;
  font-weight:700;
  line-height:1.1;
}
.event-item h4{font-size:.92rem;margin-bottom:.15rem;line-height:1.3}
.event-item p{font-size:.78rem;color:var(--muted);margin:0}

/* ============================================================
   FAQ
   ============================================================ */
.faq{background:var(--paper)}
.faq__grid{
  display:grid;
  grid-template-columns:.85fr 1.15fr;
  gap:64px;
  align-items:start;
}
.faq__aside .section-head{margin-bottom:1.8rem}
.faq__aside p{color:var(--muted);font-size:.96rem}
.faq__list{display:flex;flex-direction:column;gap:12px}
.faq__item{
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--paper);
  overflow:hidden;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.faq__item[open]{
  border-color:rgba(194,84,47,.4);
  box-shadow:0 18px 34px -30px rgba(16,36,31,.5);
}
.faq__item summary{
  list-style:none;
  cursor:pointer;
  padding:1.25rem 1.5rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  font-family:var(--serif);
  font-size:1.03rem;
  font-weight:600;
  letter-spacing:-.01em;
  line-height:1.35;
}
.faq__item summary::-webkit-details-marker{display:none}
.faq__item summary::after{
  content:"+";
  font-family:var(--sans);
  font-size:1.35rem;
  font-weight:400;
  color:var(--accent);
  line-height:1;
  transition:transform .25s ease;
  flex-shrink:0;
}
.faq__item[open] summary::after{content:"–";transform:rotate(180deg)}
.faq__answer{
  padding:0 1.5rem 1.4rem;
  font-size:.94rem;
  color:var(--muted);
  max-width:66ch;
}

/* ============================================================
   NEWSLETTER CTA
   ============================================================ */
.cta-band{
  background:var(--ink);
  color:var(--paper);
  position:relative;
  overflow:hidden;
}
.cta-band::before{
  content:"";
  position:absolute;
  top:-200px;right:-120px;
  width:560px;height:560px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(194,84,47,.35),transparent 66%);
  pointer-events:none;
}
.cta-band__inner{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:center;
  position:relative;
  z-index:1;
}
.cta-band h2{margin-bottom:1.1rem}
.cta-band p{color:rgba(251,247,240,.7);font-size:1.02rem;max-width:48ch}
.cta-form{display:flex;flex-direction:column;gap:.9rem}
.cta-form__row{display:flex;gap:.7rem;flex-wrap:wrap}
.cta-form input[type="email"]{
  flex:1 1 220px;
  min-width:0;
  font-family:var(--sans);
  font-size:.95rem;
  padding:.95rem 1.2rem;
  border-radius:999px;
  border:1.5px solid rgba(251,247,240,.28);
  background:rgba(251,247,240,.06);
  color:var(--paper);
  transition:border-color .2s ease, background .2s ease;
}
.cta-form input[type="email"]::placeholder{color:rgba(251,247,240,.45)}
.cta-form input[type="email"]:focus{
  outline:none;
  border-color:var(--amber);
  background:rgba(251,247,240,.1);
}
.cta-form small{
  font-size:.76rem;
  color:rgba(251,247,240,.5);
  letter-spacing:.01em;
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{
  background:var(--ink);
  color:rgba(251,247,240,.7);
  border-top:1px solid var(--line-light);
  padding:72px 0 0;
}
.footer__grid{
  display:grid;
  grid-template-columns:1.5fr 1fr 1fr 1.2fr;
  gap:48px;
  padding-bottom:56px;
}
.footer__brand .brand{margin-bottom:1.2rem}
.footer__brand .brand__name{color:var(--paper)}
.footer__brand .brand__tag{color:rgba(251,247,240,.45)}
.footer__mission{
  font-size:.9rem;
  line-height:1.7;
  color:rgba(251,247,240,.6);
  max-width:34ch;
  margin-bottom:1.5rem;
}
.socials{display:flex;gap:.6rem}
.socials a{
  width:38px;height:38px;
  border-radius:10px;
  border:1px solid var(--line-light);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.02em;
  text-decoration:none;
  color:rgba(251,247,240,.75);
  transition:background .2s ease, color .2s ease, border-color .2s ease, transform .2s ease;
}
.socials a:hover{
  background:var(--amber);
  border-color:var(--amber);
  color:var(--ink);
  transform:translateY(-2px);
}
.footer__col h4{
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--paper);
  margin-bottom:1.2rem;
}
.footer__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.footer__col a{
  font-size:.9rem;
  text-decoration:none;
  color:rgba(251,247,240,.62);
  transition:color .2s ease;
}
.footer__col a:hover{color:var(--amber)}
.footer__contact p{
  font-size:.9rem;
  line-height:1.7;
  color:rgba(251,247,240,.62);
  margin:0 0 1rem;
}
.footer__contact strong{color:var(--paper);font-weight:600;display:block;margin-bottom:.15rem;font-size:.82rem;letter-spacing:.04em}
.footer__bottom{
  border-top:1px solid var(--line-light);
  padding:26px 0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  font-size:.8rem;
  color:rgba(251,247,240,.45);
}
.footer__legal{display:flex;gap:1.4rem;flex-wrap:wrap}
.footer__legal a{text-decoration:none;color:rgba(251,247,240,.55);transition:color .2s}
.footer__legal a:hover{color:var(--amber)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1080px){
  .hero__grid{gap:44px}
  .issues__grid{grid-template-columns:repeat(2,1fr)}
  .campaigns__grid{grid-template-columns:repeat(2,1fr)}
  .news__grid{grid-template-columns:repeat(2,1fr)}
  .matcher__grid{grid-template-columns:repeat(2,1fr)}
  .testimonials__grid{grid-template-columns:repeat(2,1fr)}
  .resources__grid{grid-template-columns:1fr;gap:40px}
  .footer__grid{grid-template-columns:1fr 1fr;gap:40px}
  .faq__grid{grid-template-columns:1fr;gap:36px}
}

@media (max-width:900px){
  .topbar__links{display:none}
  .nav-toggle{display:flex}
  .nav{
    position:absolute;
    top:100%;
    left:0;right:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    flex-direction:column;
    align-items:stretch;
    gap:0;
    padding:.5rem 24px 1.4rem;
    display:none;
    box-shadow:0 24px 40px -30px rgba(16,36,31,.6);
  }
  .nav.is-open{display:flex}
  .nav a:not(.btn){
    padding:.95rem 0;
    border-bottom:1px solid var(--line);
    font-size:1rem;
  }
  .nav a:not(.btn)::after{display:none}
  .nav__cta{margin-top:1rem;justify-content:center;width:100%}
  .site-header{position:sticky}
  .header__inner{position:relative}

  .hero{padding-top:56px}
  .hero__grid{grid-template-columns:1fr;gap:48px}
  .hero__media{order:-1}
  .hero__media > img{aspect-ratio:16/11}
  .hero__card{left:auto;right:16px;bottom:-22px}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding:28px 20px}
  .stat:nth-child(odd){border-left:none;padding-left:0}
  .stat:nth-child(-n+2){border-bottom:1px solid var(--line)}
  .cta-band__inner{grid-template-columns:1fr;gap:32px}
  .matcher__controls{grid-template-columns:1fr 1fr}
  .matcher__submit{grid-column:1/-1;width:100%}
}

@media (max-width:720px){
  body{font-size:16px}
  .section{padding:68px 0}
  .section--tight{padding:52px 0}
  .container{width:min(100% - 36px,var(--container))}
  .brand__tag{display:none}
  .hero__actions .btn{flex:1 1 100%}
  .issues__grid,
  .campaigns__grid,
  .news__grid,
  .matcher__grid,
  .testimonials__grid{grid-template-columns:1fr}
  .stats__grid{grid-template-columns:1fr}
  .stat{border-left:none;padding:24px 0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:none}
  .matcher{padding:1.4rem}
  .matcher__controls{grid-template-columns:1fr}
  .resource-item{grid-template-columns:auto 1fr;gap:1rem}
  .resource-item__cta{grid-column:2}
  .footer__grid{grid-template-columns:1fr;gap:36px}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:1rem}
  .cta-form__row{flex-direction:column}
  .cta-form .btn{width:100%}
  .hero__proof{flex-direction:row}
}
</style>
</head>
<body id="top">

<!-- ============================ TOP BAR ============================ -->
<div class="topbar">
  <div class="container topbar__inner">
    <p><span class="dot"></span> Spring volunteer cohort applications close <strong>April 30</strong></p>
    <div class="topbar__links">
      <a href="#news">Press room</a>
      <a href="#resources">Member login</a>
    </div>
  </div>
</div>

<!-- ============================ HEADER ============================ -->
<header class="site-header">
  <div class="container header__inner">
    <a class="brand" href="#top">
      <img src="https://placehold.co/56x56/10241f/f2ebdf?text=CT&font=playfair%20display" alt="Common Thread Collective logo" width="56" height="56">
      <span class="brand__text">
        <span class="brand__name">Common Thread</span>
        <span class="brand__tag">Grassroots voices, lasting change</span>
      </span>
    </a>

    <nav class="nav" id="primary-nav" aria-label="Primary">
      <a href="#issues">Issues</a>
      <a href="#campaigns">Campaigns</a>
      <a href="#news">News</a>
      <a href="#volunteer">Volunteer</a>
      <a href="#resources">Resources</a>
      <a href="#about">About</a>
      <a class="btn btn--primary nav__cta" href="#donate">Donate</a>
    </nav>

    <button class="nav-toggle" id="navToggle" aria-expanded="false" aria-controls="primary-nav" aria-label="Toggle navigation">
      <span></span><span></span><span></span>
    </button>
  </div>
</header>

<main>

<!-- ============================ HERO ============================ -->
<section class="hero">
  <div class="container hero__grid">
    <div class="hero__copy">
      <p class="eyebrow">Coalition building since 2009</p>
      <h1>Change doesn't trickle down. It's <em>woven</em> together, block by block.</h1>
      <p class="lead">
        Common Thread Collective brings neighbors, organizers, and local institutions into the same
        room — and keeps them there. We work across housing, public education, climate resilience,
        and cultural preservation in 14 neighborhoods, turning isolated complaints into coordinated
        advocacy.
      </p>
      <div class="hero__actions">
        <a class="btn btn--primary" href="#volunteer">Join the movement</a>
        <a class="btn btn--ghost" href="#campaigns">See our campaigns</a>
      </div>
      <div class="hero__proof">
        <div class="avatars">
          <img src="https://i.pravatar.cc/96?u=ctc-amara" alt="Volunteer Amara O." width="44" height="44">
          <img src="https://i.pravatar.cc/96?u=ctc-devin" alt="Volunteer Devin R." width="44" height="44">
          <img src="https://i.pravatar.cc/96?u=ctc-luz" alt="Volunteer Luz M." width="44" height="44">
          <img src="https://i.pravatar.cc/96?u=ctc-theo" alt="Volunteer Theo K." width="44" height="44">
        </div>
        <p><strong>320+ volunteer organizers</strong><br>active across the city this quarter</p>
      </div>
    </div>

    <div class="hero__media">
      <img src="https://picsum.photos/900/1080" alt="Residents and organizers gathered around a table at a neighborhood assembly" width="900" height="1080">
      <div class="hero__card">
        <span class="hero__card-num">47</span>
        <span>active grassroots campaigns</span>
      </div>
    </div>
  </div>

  <!-- STATS -->
  <div class="stats">
    <div class="container stats__grid">
      <div class="stat">
        <span class="stat__num">14</span>
        <span class="stat__label">Neighborhoods organized</span>
      </div>
      <div class="stat">
        <span class="stat__num">320+</span>
        <span class="stat__label">Volunteer organizers</span>
      </div>
      <div class="stat">
        <span class="stat__num">47</span>
        <span class="stat__label">Active campaigns</span>
      </div>
      <div class="stat">
        <span class="stat__num">12,400</span>
        <span class="stat__label">Residents engaged in 2024</span>
      </div>
    </div>
  </div>
</section>

<!-- ============================ ISSUES ============================ -->
<section class="section issues" id="issues">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">What we organize around</p>
      <h2>Four issue areas, one interconnected agenda.</h2>
      <p>
        We don't treat housing, schools, climate, and culture as separate fights. The same families
        carry all four. Our issue tables meet monthly, share a single research desk, and coordinate
        testimony so that grassroots pressure lands at the same time across every committee that
        touches a neighborhood.
      </p>
    </div>

    <div class="issues__grid">
      <article class="issue-card">
        <div class="issue-card__media">
          <img src="https://picsum.photos/640/512" alt="Row of apartment buildings with tenants meeting on the front steps" width="640" height="512">
          <span class="issue-card__num">01</span>
        </div>
        <div class="issue-card__body">
          <h3>Housing &amp; Tenancy</h3>
          <p>
            Rent stabilization, habitability enforcement, and community land trusts. Our tenant
            tables have supported 38 building-wide associations and helped stop 112 evictions since
            2021.
          </p>
          <a class="link-arrow" href="#resources">Explore the issue</a>
        </div>
      </article>

      <article class="issue-card">
        <div class="issue-card__media">
          <img src="https://picsum.photos/640/514" alt="Students working together in a public school classroom" width="640" height="514">
          <span class="issue-card__num">02</span>
        </div>
        <div class="issue-card__body">
          <h3>Public Education</h3>
          <p>
            Participatory budgeting for school sites, parent-led literacy circles, and a standing
            push for transparent district spending. Every school in our network has a trained
            family advocate.
          </p>
          <a class="link-arrow" href="#resources">Explore the issue</a>
        </div>
      </article>

      <article class="issue-card">
        <div class="issue-card__media">
          <img src="https://picsum.photos/640/516" alt="Community garden with volunteers planting trees on a city block" width="640" height="516">
          <span class="issue-card__num">03</span>
        </div>
        <div class="issue-card__body">
          <h3>Climate Resilience</h3>
          <p>
            Heat-mapping, tree canopy expansion, and neighborhood resilience hubs stocked for
            outages. Our census work has directed $2.4M in cooling infrastructure to the blocks that
            need it most.
          </p>
          <a class="link-arrow" href="#resources">Explore the issue</a>
        </div>
      </article>

      <article class="issue-card">
        <div class="issue-card__media">
          <img src="https://picsum.photos/640/518" alt="Elders sharing photographs and stories at a community archive event" width="640" height="518">
          <span class="issue-card__num">04</span>
        </div>
        <div class="issue-card__body">
          <h3>Cultural Preservation</h3>
          <p>
            Oral histories, small-business corridors, and protections for the gathering places that
            hold a neighborhood together. Our archive now holds more than 900 resident-recorded
            stories.
          </p>
          <a class="link-arrow" href="#resources">Explore the issue</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============================ CAMPAIGNS ============================ -->
<section class="section campaigns" id="campaigns">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow eyebrow--light">Campaign updates</p>
      <h2>Advocacy in motion, right now.</h2>
      <p>
        Three campaigns are moving through public process this season. Each one is led by a resident
        steering committee, backed by our policy staff, and open to anyone who wants to testify,
        phone-bank, or simply show up.
      </p>
    </div>

    <div class="campaigns__grid">
      <article class="campaign-card">
        <div class="campaign-card__media">
          <img src="https://picsum.photos/800/500" alt="Tenants holding signs at a city hall hearing" width="800" height="500">
        </div>
        <div class="campaign-card__body">
          <span class="tag tag--light">Housing</span>
          <h3>The Rent Stability Ordinance</h3>
          <p>
            Our coalition has spent eleven months building support for a cap on annual rent
            increases tied to the consumer price index. The bill cleared committee in February and
            now heads to a full council vote.
          </p>
          <div class="progress-wrap">
            <div class="progress-meta">
              <span>Signatures gathered</span>
              <strong>68%</strong>
            </div>
            <div class="progress" role="progressbar" aria-valuenow="68" aria-valuemin="0" aria-valuemax="100" aria-label="Signatures gathered">
              <div class="progress__bar" style="width:68%"></div>
            </div>
          </div>
          <a class="link-arrow link-arrow--light" href="#volunteer">Take action</a>
        </div>
      </article>

      <article class="campaign-card">
        <div class="campaign-card__media">
          <img src="https://picsum.photos/800/502" alt="Volunteers planting shade trees along a residential street" width="800" height="502">
        </div>
        <div class="campaign-card__body">
          <span class="tag tag--light">Climate</span>
          <h3>Cool Blocks Tree Canopy</h3>
          <p>
            A three-year plan to plant 4,000 shade trees on the twelve hottest blocks in the city,
            prioritized by our resident-collected heat data and maintained by paid youth crews.
          </p>
          <div class="progress-wrap">
            <div class="progress-meta">
              <span>Trees planted</span>
              <strong>41%</strong>
            </div>
            <div class="progress" role="progressbar" aria-valuenow="41" aria-valuemin="0" aria-valuemax="100" aria-label="Trees planted">
              <div class="progress__bar" style="width:41%"></div>
            </div>
          </div>
          <a class="link-arrow link-arrow--light" href="#volunteer">Take action</a>
        </div>
      </article>

      <article class="campaign-card">
        <div class="campaign-card__media">
          <img src="https://picsum.photos/800/504" alt="Neighbors browsing a community archive display of historic photographs" width="800" height="504">
        </div>
        <div class="campaign-card__body">
          <span class="tag tag--light">Culture</span>
          <h3>Corridor Heritage District</h3>
          <p>
            A landmark designation for the four-block business corridor that has anchored our
            district for ninety years — paired with a small-business stabilization fund so
            designation doesn't become displacement.
          </p>
          <div class="progress-wrap">
            <div class="progress-meta">
              <span>Petition goal</span>
              <strong>83%</strong>
            </div>
            <div class="progress" role="progressbar" aria-valuenow="83" aria-valuemin="0" aria-valuemax="100" aria-label="Petition goal">
              <div class="progress__bar" style="width:83%"></div>
            </div>
          </div>
          <a class="link-arrow link-arrow--light" href="#volunteer">Take action</a>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============================ NEWS ============================ -->
<section class="section news" id="news">
  <div class="container">
    <div class="news__head">
      <div class="section-head">
        <p class="eyebrow">News &amp; field notes</p>
        <h2>What's happening on the ground.</h2>
        <p>
          Dispatches from our organizers, coalition partners, and resident researchers — published
          as the work unfolds, not after the fact.
        </p>
      </div>
      <a class="btn btn--ghost" href="#resources">View all news</a>
    </div>

    <div class="news__grid">
      <a class="news-card" href="#news">
        <img src="https://picsum.photos/720/450" alt="Residents speaking at a podium during a public hearing" width="720" height="450">
        <div class="news-card__body">
          <div class="news-card__meta">
            <span>Housing</span>
            <span class="sep"></span>
            <span>March 18, 2025</span>
          </div>
          <h3>Rent Stability Ordinance clears committee in a 7–4 vote</h3>
          <p>
            After eleven months of testimony from 240 residents, the ordinance moves to the full
            council. Here's what the committee amendments changed — and what we're still pushing for
            before the final vote.
          </p>
          <span class="link-arrow">Read the update</span>
        </div>
      </a>

      <a class="news-card" href="#news">
        <img src="https://picsum.photos/720/452" alt="Aerial view of tree-lined city blocks in summer heat" width="720" height="452">
        <div class="news-card__body">
          <div class="news-card__meta">
            <span>Climate</span>
            <span class="sep"></span>
            <span>March 6, 2025</span>
          </div>
          <h3>Our heat census found 9 degrees of difference between two blocks</h3>
          <p>
            Ninety volunteers walked 140 blocks with sensors last August. The results are now the
            basis for how the city prioritizes cooling investment — and they're open for anyone to
            download.
          </p>
          <span class="link-arrow">Read the update</span>
        </div>
      </a>

      <a class="news-card" href="#news">
        <img src="https://picsum.photos/720/454" alt="Oral history recording session with a seated elder and a microphone" width="720" height="454">
        <div class="news-card__body">
          <div class="news-card__meta">
            <span>Culture</span>
            <span class="sep"></span>
            <span>February 22, 2025</span>
          </div>
          <h3>The archive crossed 900 recorded stories — here are three of them</h3>
          <p>
            A barber who has cut hair on the same corner since 1974, a family-run bakery on its third
            generation, and a block club that has met every first Tuesday for forty-two years.
          </p>
          <span class="link-arrow">Read the update</span>
        </div>
      </a>
    </div>
  </div>
</section>

<!-- ============================ VOLUNTEER MATCHER ============================ -->
<section class="section volunteer" id="volunteer">
  <div class="container">
    <div class="section-head">
      <p class="eyebrow">Volunteer matcher</p>
      <h2>Find the role that actually fits your week.</h2>
      <p>
        Most people who want to help bounce off a sign-up form that asks for everything and offers
        nothing specific. Tell us what you care about and how much time you actually have, and we'll
        show you the openings that match — no account required.
      </p>
    </div>

    <div class="matcher">
      <form class="matcher__controls" id="matcher" novalidate>
        <div class="field">
          <label for="causeSelect">Issue area</label>
          <select id="causeSelect" name="cause">
            <option value="any">Any issue area</option>
            <option value="housing">Housing &amp; Tenancy</option>
            <option value="education">Public Education</option>
            <option value="climate">Climate Resilience</option>
            <option value="culture">Cultural Preservation</option>
            <option value="civic">Civic Participation</option>
          </select>
        </div>

        <div class="field">
          <label for="commitSelect">Time commitment</label>
          <select id="commitSelect" name="commitment">
            <option value="any">Any commitment</option>
            <option value="once">One-time event</option>
            <option value="weekly">Weekly</option>
            <option value="monthly">Monthly</option>
          </select>
        </div>

        <div class="field">
          <label for="modeSelect">Format</label>
          <select id="modeSelect" name="mode">
            <option value="any">In person or remote</option>
            <option value="inperson">In person</option>
            <option value="remote">Remote</option>
          </select>
        </div>

        <button class="btn btn--primary matcher__submit" type="submit">Find my match</button>
      </form>

      <div class="matcher__results-head">
        <h3>Open opportunities</h3>
        <p class="matcher__count" id="matchCount" aria-live="polite"><strong>10</strong> roles match your filters</p>
      </div>

      <div class="matcher__grid" id="matchResults"></div>
    </div>
  </div>
</section>

<!-- ============================ TESTIMONIALS ============================ -->
<section class="section testimonials">
  <div class="container">
    <div class="section-head section-head--center">
      <p class="eyebrow">From the coalition</p>
      <h2>What it looks like when the work holds.</h2>
      <p>
        Our members are tenant leaders, parents, retirees, students, and small-business owners. These
        are their words, gathered at our winter assembly.
      </p>
    </div>

    <div class="testimonials__grid">
      <article class="testimonial">
        <span class="testimonial__mark" aria-hidden="true">&ldquo;</span>
        <blockquote>
          I came in with a leaking ceiling and a landlord who wouldn't return calls. Six weeks later
          I was testifying in front of the housing committee with eleven of my neighbors behind me.
          Nobody did it for us — they made sure we could do it ourselves.
        </blockquote>
        <div class="testimonial__person">
          <img src="https://i.pravatar.cc/96?u=ctc-rosalind" alt="Portrait of Rosalind M." width="48" height="48">
          <div>
            <span class="testimonial__name">Rosalind M.</span>
            <span class="testimonial__role">Tenant association chair, Eastgate</span>
          </div>
        </div>
      </article>

      <article class="testimonial testimonial--feature">
        <span class="testimonial__mark" aria-hidden="true">&ldquo;</span>
        <blockquote>
          The heat census changed how I think about my own block. We had data before we had a
          demand. When the city said there was no money, we could point to nine degrees of difference
          on a map and ask them to explain it.
        </blockquote>
        <div class="testimonial__person">
          <img src="https://i.pravatar.cc/96?u=ctc-marcus" alt="Portrait of Marcus T." width="48" height="48">
          <div>
            <span class="testimonial__name">Marcus T.</span>
            <span class="testimonial__role">Volunteer researcher, Cool Blocks</span>
          </div>
        </div>
      </article>

      <article class="testimonial">
        <span class="testimonial__mark" aria-hidden="true">&ldquo;</span>
        <blockquote>
          As a small funder, we see a lot of coalitions that are really one organization wearing
          several hats. This one is genuinely networked — the issue tables argue with each other and
          then they show up together. That's the whole point.
        </blockquote>
        <div class="testimonial__person">
          <img src="https://i.pravatar.cc/96?u=ctc-priya" alt="Portrait of Priya N." width="48" height="48">
          <div>
            <span class="testimonial__name">Priya N.</span>
            <span class="testimonial__role">Program officer, Harbor Fund</span>
          </div>
        </div>
      </article>
    </div>
  </div>
</section>

<!-- ============================ RESOURCES + SIDEBAR ============================ -->
<section class="section resources" id="resources">
  <div class="container">
    <div class="resources__grid">
      <div>
        <div class="section-head">
          <p class="eyebrow">Resource center</p>
          <h2>Tools we build so the work can be repeated.</h2>
          <p>
            Everything here is free, plain-language, and designed to be copied. If another
            neighborhood wants to run the same playbook, they shouldn't have to start from a blank
            page. Download, adapt, and tell us what you changed.
          </p>
        </div>

        <div class="resource-list">
          <a class="resource-item" href="#resources">
            <span class="resource-item__icon" aria-hidden="true">01</span>
            <div>
              <h4>Tenant Association Starter Kit</h4>
              <p>A 24-page guide to forming a building association, running a first meeting, and filing a habitability complaint that actually gets inspected.</p>
            </div>
            <span class="resource-item__cta">Download</span>
          </a>

          <a class="resource-item" href="#resources">
            <span class="resource-item__icon" aria-hidden="true">02</span>
            <div>
              <h4>How to Testify at a Public Hearing</h4>
              <p>Two minutes is enough. This guide covers sign-up logistics, how to prepare three sentences that land, and what to do when the committee asks a follow-up.</p>
            </div>
            <span class="resource-item__cta">Download</span>
          </a>

          <a class="resource-item" href="#resources">
            <span class="resource-item__icon" aria-hidden="true">03</span>
            <div>
              <h4>Neighborhood Heat Census Toolkit</h4>
              <p>The full sensor protocol, volunteer training script, and open-source data template our climate table used to map 140 blocks last summer.</p>
            </div>
            <span class="resource-item__cta">Download</span>
          </a>

          <a class="resource-item" href="#resources">
            <span class="resource-item__icon" aria-hidden="true">04</span>
            <div>
              <h4>Coalition Building Field Guide</h4>
              <p>Practical notes on bringing organizations with different priorities into a shared campaign without flattening what makes each one distinct.</p>
            </div>
            <span class="resource-item__cta">Download</span>
          </a>
        </div>
      </div>

      <aside class="sidebar">
        <div class="side-card side-card--alert">
          <div class="side-card__title">
            Action alerts
            <span class="live">Live</span>
          </div>

          <div class="alert-item">
            <h4>Full council vote on rent stability</h4>
            <p>April 9, 6:00 p.m. at City Hall. We need 200 people in the chamber. Seats fill by 5:30.</p>
            <a class="link-arrow link-arrow--light" href="#volunteer">Take action</a>
          </div>

          <div class="alert-item">
            <h4>Comment window: school site budgets</h4>
            <p>The district is accepting written comment on next year's site allocations through April 18.</p>
            <a class="link-arrow link-arrow--light" href="#volunteer">Take action</a>
          </div>

          <div class="alert-item">
            <h4>Share your story</h4>
            <p>Recording tenant experiences for the ordinance record. Fifteen minutes, by phone or in person.</p>
            <a class="link-arrow link-arrow--light" href="#volunteer">Share story</a>
          </div>
        </div>

        <div class="side-card">
          <div class="side-card__title">Upcoming</div>

          <div class="event-item">
            <div class="event-date">
              <span class="m">Apr</span>
              <span class="d">09</span>
            </div>
            <div>
              <h4>Council vote watch party</h4>
              <p>City Hall, Room 2B · 5:30 p.m.</p>
            </div>
          </div>

          <div class="event-item">
            <div class="event-date">
              <span class="m">Apr</span>
              <span class="d">19</span>
            </div>
            <div>
              <h4>Tree planting work party</h4>
              <p>Eastgate Commons · 9:00 a.m. – 1:00 p.m.</p>
            </div>
          </div>

          <div class="event-item">
            <div class="event-date">
              <span class="m">May</span>
              <span class="d">03</span>
            </div>
            <div>
              <h4>Oral history recording day</h4>
              <p>Community archive, 214 Corridor St · All day</p>
            </div>
          </div>
        </div>
      </aside>
    </div>
  </div>
</section>

<!-- ============================ FAQ ============================ -->
<section class="section faq" id="about">
  <div class="container faq__grid">
    <div class="faq__aside">
      <div class="section-head">
        <p class="eyebrow">About &amp; questions</p>
        <h2>How we work, and who we answer to.</h2>
      </div>
      <p>
        Common Thread Collective is a member-led 501(c)(3) with a nine-person staff and a
        fifteen-seat resident council that sets our campaign priorities each year. We take no
        corporate PAC money and publish every grant over $5,000.
      </p>
      <p>
        Still have a question? Write to <a href="mailto:hello@commonthreadcollective.org" style="color:var(--accent-dark);font-weight:600;text-decoration:none">hello@commonthreadcollective.org</a>
        and a real person will answer within two business days.
      </p>
    </div>

    <div class="faq__list">
      <details class="faq__item" open>
        <summary>Do I need experience to volunteer?</summary>
        <div class="faq__answer">
          <p>
            No. Every role in the matcher comes with a training session and a paired first shift with
            an experienced organizer. The skills we most need are reliability, patience, and a
            willingness to knock on doors — not credentials. Roughly two-thirds of our active
            volunteers had never done advocacy work before joining.
          </p>
        </div>
      </details>

      <details class="faq__item">
        <summary>How does the coalition make decisions?</summary>
        <div class="faq__answer">
          <p>
            Campaign priorities are set annually by the resident council, which is elected by
            members from each of the 14 neighborhoods. Day-to-day tactical decisions sit with the
            issue tables. Staff facilitate, research, and draft — they don't vote. Any member can
            bring a proposal to the council with 25 signatures from two or more neighborhoods.
          </p>
        </div>
      </details>

      <details class="faq__item">
        <summary>Are you partisan?</summary>
        <div class="faq__answer">
          <p>
            We don't endorse candidates or parties, and our 501(c)(3) status prohibits electoral
            activity. We do take positions on legislation, ballot measures, and budget line items
            where our members have voted to do so — and we publish those positions with the reasoning
            behind each one.
          </p>
        </div>
      </details>

      <details class="faq__item">
        <summary>Where does your funding come from?</summary>
        <div class="faq__answer">
          <p>
            Approximately 62% from family and community foundations, 24% from individual donors, and
            14% from local government contracts for data and facilitation work. We accept no
            corporate PAC contributions and no funding from entities we actively campaign against.
            Our audited financials are posted each September.
          </p>
        </div>
      </details>

      <details class="faq__item">
        <summary>Can my organization join the coalition?</summary>
        <div class="faq__answer">
          <p>
            Yes, if you share our platform and can send one representative to monthly coalition
            meetings. We ask for a commitment to the shared agenda rather than a fee — dues are
            waived for organizations with annual budgets under $100,000. Reach out through the
            contact form and we'll set up an orientation call.
          </p>
        </div>
      </details>
    </div>
  </div>
</section>

<!-- ============================ NEWSLETTER CTA ============================ -->
<section class="section section--tight cta-band" id="donate">
  <div class="container cta-band__inner">
    <div>
      <p class="eyebrow eyebrow--light">Stay in the loop</p>
      <h2>The weekly thread.</h2>
      <p>
        One email every Thursday: what moved, what stalled, and the one action that matters most
        that week. No fundraising appeals disguised as updates — we keep those separate.
      </p>
    </div>
    <form class="cta-form" onsubmit="event.preventDefault(); this.querySelector('button').textContent='You&#39;re in — check your inbox';">
      <div class="cta-form__row">
        <label for="newsletterEmail" style="position:absolute;left:-9999px">Email address</label>
        <input id="newsletterEmail" type="email" placeholder="you@neighborhood.org" required>
        <button class="btn btn--light" type="submit">Join the movement</button>
      </div>
      <small>4,800 neighbors subscribe. Unsubscribe any time, no questions asked.</small>
    </form>
  </div>
</section>

</main>

<!-- ============================ FOOTER ============================ -->
<footer class="site-footer">
  <div class="container">
    <div class="footer__grid">
      <div class="footer__brand">
        <a class="brand" href="#top">
          <img src="https://placehold.co/56x56/f2ebdf/10241f?text=CT&font=playfair%20display" alt="Common Thread Collective logo" width="56" height="56">
          <span class="brand__text">
            <span class="brand__name">Common Thread</span>
            <span class="brand__tag">Collective</span>
          </span>
        </a>
        <p class="footer__mission">
          A member-led coalition of organizers, neighbors, and local institutions building power
          across housing, public education, climate resilience, and cultural preservation.
        </p>
        <div class="socials">
          <a href="#top" aria-label="Instagram">IG</a>
          <a href="#top" aria-label="Facebook">FB</a>
          <a href="#top" aria-label="LinkedIn">LI</a>
          <a href="#top" aria-label="YouTube">YT</a>
        </div>
      </div>

      <div class="footer__col">
        <h4>Explore</h4>
        <ul>
          <li><a href="#issues">Our issues</a></li>
          <li><a href="#campaigns">Campaigns</a></li>
          <li><a href="#news">News &amp; field notes</a></li>
          <li><a href="#resources">Resource center</a></li>
          <li><a href="#about">About the coalition</a></li>
        </ul>
      </div>

      <div class="footer__col">
        <h4>Get involved</h4>
        <ul>
          <li><a href="#volunteer">Volunteer matcher</a></li>
          <li><a href="#donate">Donate</a></li>
          <li><a href="#resources">Action alerts</a></li>
          <li><a href="#resources">Upcoming events</a></li>
          <li><a href="#about">Partner with us</a></li>
        </ul>
      </div>

      <div class="footer__col footer__contact">
        <h4>Contact</h4>
        <p>
          <strong>Office</strong>
          214 Corridor Street, Suite 3<br>
          Eastgate, ST 00000
        </p>
        <p>
          <strong>Email</strong>
          <a href="mailto:hello@commonthreadcollective.org">hello@commonthreadcollective.org</a>
        </p>
        <p>
          <strong>Phone</strong>
          (555) 014-8820 · Mon–Thu, 10am–6pm
        </p>
      </div>
    </div>

    <div class="footer__bottom">
      <p>© 2025 Common Thread Collective. A 501(c)(3) nonprofit. EIN 00-0000000.</p>
      <div class="footer__legal">
        <a href="#top">Privacy Policy</a>
        <a href="#top">Terms of Use</a>
        <a href="#top">Accessibility</a>
        <a href="#top">Financials</a>
      </div>
    </div>
  </div>
</footer>

<script>
/* ============================================================
   MOBILE NAV
   ============================================================ */
(function () {
  var toggle = document.getElementById('navToggle');
  var nav = document.getElementById('primary-nav');

  toggle.addEventListener('click', function () {
    var open = nav.classList.toggle('is-open');
    toggle.setAttribute('aria-expanded', open ? 'true' : 'false');
  });

  nav.querySelectorAll('a').forEach(function (link) {
    link.addEventListener('click', function () {
      nav.classList.remove('is-open');
      toggle.setAttribute('aria-expanded', 'false');
    });
  });
})();

/* ============================================================
   VOLUNTEER MATCHER
   ============================================================ */
(function () {
  var opportunities = [
    {
      title: 'Tenant Hotline Advocate',
      cause: 'housing', causeLabel: 'Housing',
      commit: 'weekly', commitLabel: 'Weekly',
      mode: 'remote', modeLabel: 'Remote',
      desc: 'Staff our Wednesday evening hotline, triage repair complaints, and connect renters to legal aid and inspection services.',
      spots: '4 spots open'
    },
    {
      title: 'Saturday Repairs Crew',
      cause: 'housing', causeLabel: 'Housing',
      commit: 'once', commitLabel: 'One-time',
      mode: 'inperson', modeLabel: 'In person',
      desc: 'Join a one-day work party fixing handrails, smoke detectors, and weather sealing in a partner building.',
      spots: '12 spots open'
    },
    {
      title: 'Reading Circle Mentor',
      cause: 'education', causeLabel: 'Education',
      commit: 'weekly', commitLabel: 'Weekly',
      mode: 'inperson', modeLabel: 'In person',
      desc: 'Pair with a third grader for a 45-minute reading session at a neighborhood school library.',
      spots: '8 spots open'
    },
    {
      title: 'Classroom Supply Drive Captain',
      cause: 'education', causeLabel: 'Education',
      commit: 'monthly', commitLabel: 'Monthly',
      mode: 'either', modeLabel: 'In person or remote',
      desc: 'Coordinate donation drives for two partner schools and manage the distribution schedule with site staff.',
      spots: '2 spots open'
    },
    {
      title: 'Tree Canopy Census Walker',
      cause: 'climate', causeLabel: 'Climate',
      commit: 'once', commitLabel: 'One-time',
      mode: 'inperson', modeLabel: 'In person',
      desc: 'Walk an assigned block with a tablet, log empty tree pits, and photograph planting conditions. Training provided on-site.',
      spots: '20 spots open'
    },
    {
      title: 'Resilience Hub Steward',
      cause: 'climate', causeLabel: 'Climate',
      commit: 'monthly', commitLabel: 'Monthly',
      mode: 'inperson', modeLabel: 'In person',
      desc: 'Keep a neighborhood cooling and outage hub stocked, check equipment, and run a quarterly readiness drill.',
      spots: '5 spots open'
    },
    {
      title: 'Oral History Interviewer',
      cause: 'culture', causeLabel: 'Culture',
      commit: 'weekly', commitLabel: 'Weekly',
      mode: 'either', modeLabel: 'In person or remote',
      desc: 'Record 45-minute resident interviews, prepare transcripts, and help families review their entries before archiving.',
      spots: '6 spots open'
    },
    {
      title: 'Archive Digitizer',
      cause: 'culture', causeLabel: 'Culture',
      commit: 'monthly', commitLabel: 'Monthly',
      mode: 'remote', modeLabel: 'Remote',
      desc: 'Scan, catalog, and tag donated photographs and documents in our shared archive system. Fully remote after orientation.',
      spots: '3 spots open'
    },
    {
      title: 'Polling Place Navigator',
      cause: 'civic', causeLabel: 'Civic',
      commit: 'once', commitLabel: 'One-time',
      mode: 'inperson', modeLabel: 'In person',
      desc: 'Help voters find their correct polling location and understand accessibility options on election day. Nonpartisan role.',
      spots: '30 spots open'
    },
    {
      title: 'Zoning Watch Analyst',
      cause: 'civic', causeLabel: 'Civic',
      commit: 'weekly', commitLabel: 'Weekly',
      mode: 'remote', modeLabel: 'Remote',
      desc: 'Review the weekly planning agenda, flag items affecting our neighborhoods, and brief the housing table before hearings.',
      spots: '2 spots open'
    }
  ];

  var form = document.getElementById('matcher');
  var causeSelect = document.getElementById('causeSelect');
  var commitSelect = document.getElementById('commitSelect');
  var modeSelect = document.getElementById('modeSelect');
  var results = document.getElementById('matchResults');
  var countEl = document.getElementById('matchCount');

  function matches(o, cause, commit, mode) {
    if (cause !== 'any' && o.cause !== cause) return false;
    if (commit !== 'any' && o.commit !== commit) return false;
    if (mode !== 'any' && o.mode !== mode && o.mode !== 'either') return false;
    return true;
  }

  function render(list) {
    countEl.innerHTML = '<strong>' + list.length + '</strong> ' +
      (list.length === 1 ? 'role matches' : 'roles match') + ' your filters';

    if (!list.length) {
      results.innerHTML =
        '<div class="matcher__empty">' +
          '<h4>No exact matches yet — but we still want you.</h4>' +
          '<p>Nothing lines up with that combination right now. Widen one filter, or join the general interest list and we\'ll reach out the moment something opens in your issue area.</p>' +
          '<a class="btn btn--primary" href="#donate">Join the interest list</a>' +
        '</div>';
      return;
    }

    results.innerHTML = list.map(function (o) {
      return '' +
        '<article class="match-card">' +
          '<div class="match-card__top">' +
            '<span class="tag">' + o.causeLabel + '</span>' +
            '<span class="match-card__spots">' + o.spots + '</span>' +
          '</div>' +
          '<h4>' + o.title + '</h4>' +
          '<p>' + o.desc + '</p>' +
          '<ul class="match-card__meta">' +
            '<li>' + o.commitLabel + '</li>' +
            '<li>' + o.modeLabel + '</li>' +
          '</ul>' +
          '<a class="link-arrow" href="#donate">Express interest</a>' +
        '</article>';
    }).join('');
  }

  function run() {
    var cause = causeSelect.value;
    var commit = commitSelect.value;
    var mode = modeSelect.value;
    render(opportunities.filter(function (o) { return matches(o, cause, commit, mode); }));
  }

  form.addEventListener('submit', function (e) {
    e.preventDefault();
    run();
  });

  [causeSelect, commitSelect, modeSelect].forEach(function (el) {
    el.addEventListener('change', run);
  });

  render(opportunities);
})();
</script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T10:08:57.734Z",
  "url": "https://benchmark.aimac.invalid/c002d7c262fe09e7fe701b6d09de460247ebb72f2596fd6e5192234ec4b57d6f.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-children",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require child roles contain them",
      "help": "Certain ARIA roles must contain particular children",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-children?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-required-parent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure elements with an ARIA role that require parent roles are contained by them",
      "help": "Certain ARIA roles must be contained by particular parents",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-parent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-toggle-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA toggle field has an accessible name",
      "help": "ARIA toggle fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-toggle-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-tooltip-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every ARIA tooltip node has an accessible name",
      "help": "ARIA tooltip nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-tooltip-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "autocomplete-valid",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag21aa",
        "wcag135",
        "EN-301-549",
        "EN-9.1.3.5",
        "ACT"
      ],
      "description": "Ensure the autocomplete attribute is correct and suitable for the form field",
      "help": "autocomplete attribute must be used correctly",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/autocomplete-valid?application=axeAPI",
      "nodes": []
    },
    {
      "id": "blink",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag222",
        "section508",
        "section508.22.j",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <blink> elements are not used",
      "help": "<blink> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/blink?application=axeAPI",
      "nodes": []
    },
    {
      "id": "definition-list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dl> elements are structured correctly",
      "help": "<dl> elements must only directly contain properly-ordered <dt> and <dd> groups, <script>, <template> or <div> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/definition-list?application=axeAPI",
      "nodes": []
    },
    {
      "id": "dlitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <dt> and <dd> elements are contained by a <dl>",
      "help": "<dt> and <dd> elements must be contained by a <dl>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/dlitem?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-focusable-content",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure <frame> and <iframe> elements with focusable content do not have tabindex=-1",
      "help": "Frames with focusable content must not have tabindex=-1",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-focusable-content?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title-unique",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements contain a unique title attribute",
      "help": "Frames must have a unique title attribute",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title-unique?application=axeAPI",
      "nodes": []
    },
    {
      "id": "frame-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.i",
        "TTv5",
        "TT12.d",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure <iframe> and <frame> elements have an accessible name",
      "help": "Frames must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/frame-title?application=axeAPI",
      "nodes": []
    },
    {
      "id": "html-xml-lang-mismatch",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2a",
        "wcag311",
        "EN-301-549",
        "EN-9.3.1.1",
        "ACT"
      ],
      "description": "Ensure that HTML elements with both valid lang and xml:lang attributes agree on the base language of the page",
      "help": "HTML elements with lang and xml:lang must have the same base language",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/html-xml-lang-mismatch?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure input buttons have discernible text",
      "help": "Input buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-button-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "input-image-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <input type=\"image\"> elements have alternative text",
      "help": "Image buttons must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/input-image-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "aria-deprecated-role",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements do not use deprecated roles",
      "help": "Deprecated ARIA roles must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-deprecated-role?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "deprecatedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "minor",
              "message": "ARIA role is not deprecated"
            }
          ],
          "impact": null,
          "html": "<div class=\"progress\" role=\"progressbar\" aria-valuenow=\"68\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Signatures gathered\">\n              <div class=\"progress__bar\" style=\"width:68%\"></div>\n            </div>",
          "target": [
            "div[aria-label=\"Signatures gathered\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body id=\"top\">",
          "target": [
            "#top"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span class=\"testimonial__mark\" aria-hidden=\"true\">\u201c</span>",
          "target": [
            ".testimonial:nth-child(1) > .testimonial__mark[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-label",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute exists and is not empty"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"progress\" role=\"progressbar\" aria-valuenow=\"68\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Signatures gathered\">\n              <div class=\"progress__bar\" style=\"width:68%\"></div>\n            </div>",
          "target": [
            "div[aria-label=\"Signatures gathered\"]"
          ]
        }
      ]
    },
    {
      "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": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "aria-required-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure elements with ARIA roles have all required ARIA attributes",
      "help": "Required ARIA attributes must be provided",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-required-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-required-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "All required ARIA attributes are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"progress\" role=\"progressbar\" aria-valuenow=\"68\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Signatures gathered\">\n              <div class=\"progress__bar\" style=\"width:68%\"></div>\n            </div>",
          "target": [
            "div[aria-label=\"Signatures gathered\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-roles",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all elements with a role attribute use a valid value",
      "help": "ARIA roles used must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-roles?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "invalidrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is valid"
            },
            {
              "id": "abstractrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Abstract roles are not used"
            },
            {
              "id": "unsupportedrole",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA role is supported"
            }
          ],
          "impact": null,
          "html": "<div class=\"progress\" role=\"progressbar\" aria-valuenow=\"68\" aria-valuemin=\"0\" aria-valuemax=\"100\" aria-label=\"Signatures gathered\">\n              <div class=\"progress__bar\" style=\"width:68%\"></div>\n            </div>",
          "target": [
            "div[aria-label=\"Signatures gathered\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "avoid-inline-spacing",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag21aa",
        "wcag1412",
        "EN-301-549",
        "EN-9.1.4.12",
        "ACT"
      ],
      "description": "Ensure that text spacing set through style attributes can be adjusted with custom stylesheets",
      "help": "Inline text spacing must be adjustable with custom stylesheets",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/avoid-inline-spacing?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "important-letter-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Letter-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-word-spacing",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "word-spacing in the style attribute is not set to !important, or meets the minimum"
            },
            {
              "id": "important-line-height",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "line-height in the style attribute is not set to !important, or meets the minimum"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<div class=\"progress__bar\" style=\"width:68%\"></div>",
          "target": [
            "div[aria-label=\"Signatures gathered\"] > .progress__bar"
          ]
        }
      ]
    },
    {
      "id": "button-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure buttons have discernible text",
      "help": "Buttons must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/button-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "button-has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has inner text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<button class=\"btn btn--primary matcher__submit\" type=\"submit\">Find my match</button>",
          "target": [
            ".matcher__submit"
          ]
        }
      ]
    },
    {
      "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>Change doesn't trickle down. It's <em>woven</em> together, block by block.</h1>",
                  "target": [
                    "h1"
                  ]
                },
                {
                  "html": "<h2>Four issue areas, one interconnected agenda.</h2>",
                  "target": [
                    "#issues > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3>Housing &amp; Tenancy</h3>",
                  "target": [
                    ".issue-card:nth-child(1) > .issue-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Public Education</h3>",
                  "target": [
                    ".issue-card:nth-child(2) > .issue-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Climate Resilience</h3>",
                  "target": [
                    ".issue-card:nth-child(3) > .issue-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Cultural Preservation</h3>",
                  "target": [
                    ".issue-card:nth-child(4) > .issue-card__body > h3"
                  ]
                },
                {
                  "html": "<h2>Advocacy in motion, right now.</h2>",
                  "target": [
                    "#campaigns > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3>The Rent Stability Ordinance</h3>",
                  "target": [
                    ".campaign-card:nth-child(1) > .campaign-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Cool Blocks Tree Canopy</h3>",
                  "target": [
                    ".campaign-card:nth-child(2) > .campaign-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Corridor Heritage District</h3>",
                  "target": [
                    ".campaign-card:nth-child(3) > .campaign-card__body > h3"
                  ]
                },
                {
                  "html": "<h2>What's happening on the ground.</h2>",
                  "target": [
                    ".news__head > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3>Rent Stability Ordinance clears committee in a 7\u20134 vote</h3>",
                  "target": [
                    ".news-card[href$=\"#news\"]:nth-child(1) > .news-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>Our heat census found 9 degrees of difference between two blocks</h3>",
                  "target": [
                    ".news-card[href$=\"#news\"]:nth-child(2) > .news-card__body > h3"
                  ]
                },
                {
                  "html": "<h3>The archive crossed 900 recorded stories \u2014 here are three of them</h3>",
                  "target": [
                    ".news-card[href$=\"#news\"]:nth-child(3) > .news-card__body > h3"
                  ]
                },
                {
                  "html": "<h2>Find the role that actually fits your week.</h2>",
                  "target": [
                    "#volunteer > .container > .section-head > h2"
                  ]
                },
                {
                  "html": "<h3>Open opportunities</h3>",
                  "target": [
                    ".matcher__results-head > h3"
                  ]
                },
                {
                  "html": "<h4>Tenant Hotline Advocate</h4>",
                  "target": [
                    ".match-card:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>Saturday Repairs Crew</h4>",
                  "target": [
                    ".match-card:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Reading Circle Mentor</h4>",
                  "target": [
                    ".match-card:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Classroom Supply Drive Captain</h4>",
                  "target": [
                    ".match-card:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h4>Tree Canopy Census Walker</h4>",
                  "target": [
                    ".match-card:nth-child(5) > h4"
                  ]
                },
                {
                  "html": "<h4>Resilience Hub Steward</h4>",
                  "target": [
                    ".match-card:nth-child(6) > h4"
                  ]
                },
                {
                  "html": "<h4>Oral History Interviewer</h4>",
                  "target": [
                    ".match-card:nth-child(7) > h4"
                  ]
                },
                {
                  "html": "<h4>Archive Digitizer</h4>",
                  "target": [
                    ".match-card:nth-child(8) > h4"
                  ]
                },
                {
                  "html": "<h4>Polling Place Navigator</h4>",
                  "target": [
                    ".match-card:nth-child(9) > h4"
                  ]
                },
                {
                  "html": "<h4>Zoning Watch Analyst</h4>",
                  "target": [
                    ".match-card:nth-child(10) > h4"
                  ]
                },
                {
                  "html": "<h2>What it looks like when the work holds.</h2>",
                  "target": [
                    ".section-head--center > h2"
                  ]
                },
                {
                  "html": "<h2>Tools we build so the work can be repeated.</h2>",
                  "target": [
                    ".resources__grid > div > .section-head > h2"
                  ]
                },
                {
                  "html": "<h4>Tenant Association Starter Kit</h4>",
                  "target": [
                    ".resource-item[href$=\"#resources\"]:nth-child(1) > div > h4"
                  ]
                },
                {
                  "html": "<h4>How to Testify at a Public Hearing</h4>",
                  "target": [
                    ".resource-item[href$=\"#resources\"]:nth-child(2) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Neighborhood Heat Census Toolkit</h4>",
                  "target": [
                    ".resource-item[href$=\"#resources\"]:nth-child(3) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Coalition Building Field Guide</h4>",
                  "target": [
                    ".resource-item[href$=\"#resources\"]:nth-child(4) > div > h4"
                  ]
                },
                {
                  "html": "<h4>Full council vote on rent stability</h4>",
                  "target": [
                    ".alert-item:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Comment window: school site budgets</h4>",
                  "target": [
                    ".alert-item:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Share your story</h4>",
                  "target": [
                    ".alert-item:nth-child(4) > h4"
                  ]
                },
                {
                  "html": "<h4>Council vote watch party</h4>",
                  "target": [
                    ".event-item:nth-child(2) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Tree planting work party</h4>",
                  "target": [
                    ".event-item:nth-child(3) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Oral history recording day</h4>",
                  "target": [
                    ".event-item:nth-child(4) > div:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h2>How we work, and who we answer to.</h2>",
                  "target": [
                    ".faq__aside > .section-head > h2"
                  ]
                },
                {
                  "html": "<h2>The weekly thread.</h2>",
                  "target": [
                    ".cta-band__inner > div > h2"
                  ]
                },
                {
                  "html": "<h4>Explore</h4>",
                  "target": [
                    ".footer__col:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Get involved</h4>",
                  "target": [
                    ".footer__col:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h4>Contact</h4>",
                  "target": [
                    ".footer__contact > h4"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main>",
                  "target": [
                    "main"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a landmark region"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#d1d1ca",
                "bgColor": "#10241f",
                "contrastRatio": 10.57,
                "fontSize": "9.5pt (12.64px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 10.57"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<p><span class=\"dot\"></span> Spring volunteer cohort applications close <strong>April 30</strong></p>",
          "target": [
            ".topbar__inner > p"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "primary-nav",
              "relatedNodes": [],
              "impact": "critical",
              "message": "Document has no elements referenced with ARIA or labels that share the same id attribute"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<nav class=\"nav\" id=\"primary-nav\" aria-label=\"Primary\">",
          "target": [
            "#primary-nav"
          ]
        }
      ]
    },
    {
      "id": "form-field-multiple-labels",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag332",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.3.3.2"
      ],
      "description": "Ensure form field does not have multiple label elements",
      "help": "Form field must not have multiple label elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/form-field-multiple-labels?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "multiple-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"causeSelect\">Issue area</label>",
                  "target": [
                    "label[for=\"causeSelect\"]"
                  ]
                }
              ],
              "impact": "moderate",
              "message": "Form field does not have multiple label elements"
            }
          ],
          "impact": null,
          "html": "<select id=\"causeSelect\" name=\"cause\">",
          "target": [
            "#causeSelect"
          ]
        }
      ]
    },
    {
      "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/56x56/10241f/f2ebdf?text=CT&amp;font=playfair%20display\" alt=\"Common Thread Collective logo\" width=\"56\" height=\"56\">",
          "target": [
            ".header__inner > .brand[href$=\"#top\"] > img[alt=\"Common Thread Collective logo\"][width=\"56\"][height=\"56\"]"
          ]
        }
      ]
    },
    {
      "id": "label",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every form element has a label",
      "help": "Form elements must have labels",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/label?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<label for=\"newsletterEmail\" style=\"position:absolute;left:-9999px\">Email address</label>",
                  "target": [
                    "label[for=\"newsletterEmail\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            },
            {
              "id": "non-empty-placeholder",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Element has a placeholder attribute"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<input id=\"newsletterEmail\" type=\"email\" placeholder=\"you@neighborhood.org\" required=\"\">",
          "target": [
            "#newsletterEmail"
          ]
        }
      ]
    },
    {
      "id": "link-in-text-block",
      "impact": null,
      "tags": [
        "cat.color",
        "wcag2a",
        "wcag141",
        "TTv5",
        "TT13.a",
        "EN-301-549",
        "EN-9.1.4.1"
      ],
      "description": "Ensure links are distinguished from surrounding text in a way that does not rely on color",
      "help": "Links must be distinguishable without relying on color",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-in-text-block?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<div class=\"alert-item\">\n            <h4>Full council vote on rent stability</h4>\n            <p>April 9, 6:00 p.m. at City Hall. We need 200 people in the chamber. Seats fill by 5:30.</p>\n            <a class=\"link-arrow link-arrow--light\" href=\"#volunteer\">Take action</a>\n          </div>",
                  "target": [
                    ".alert-item:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"link-arrow link-arrow--light\" href=\"#volunteer\">Take action</a>",
          "target": [
            ".alert-item:nth-child(2) > .link-arrow--light.link-arrow[href$=\"#volunteer\"]"
          ]
        }
      ]
    },
    {
      "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=\"#news\">Press room</a>",
          "target": [
            ".topbar__links > a[href$=\"#news\"]"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"match-card__meta\"><li>Weekly</li><li>Remote</li></ul>",
          "target": [
            ".match-card:nth-child(1) > .match-card__meta"
          ]
        }
      ]
    },
    {
      "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>Weekly</li>",
          "target": [
            ".match-card:nth-child(1) > .match-card__meta > 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\">",
          "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/56x56/10241f/f2ebdf?text=CT&amp;font=playfair%20display\" alt=\"Common Thread Collective logo\" width=\"56\" height=\"56\">",
          "target": [
            ".header__inner > .brand[href$=\"#top\"] > img[alt=\"Common Thread Collective logo\"][width=\"56\"][height=\"56\"]"
          ]
        }
      ]
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "explicit-label",
              "data": {
                "explicitLabel": "Issue area"
              },
              "relatedNodes": [
                {
                  "html": "<label for=\"causeSelect\">Issue area</label>",
                  "target": [
                    "label[for=\"causeSelect\"]"
                  ]
                }
              ],
              "impact": "critical",
              "message": "Element has an explicit <label>"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "hidden-explicit-label",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Form element has a visible explicit <label>"
            }
          ],
          "impact": null,
          "html": "<select id=\"causeSelect\" name=\"cause\">",
          "target": [
            "#causeSelect"
          ]
        }
      ]
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<summary>Do I need experience to volunteer?</summary>",
          "target": [
            "details[open=\"\"] > summary"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-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=\"#news\">Press room</a>",
          "target": [
            ".topbar__links > a[href$=\"#news\"]"
          ]
        }
      ]
    }
  ],
  "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": "8.6pt (11.52px)",
                "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": "<p class=\"eyebrow\">Coalition building since 2009</p>",
          "target": [
            ".hero__copy > .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": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(1)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">4 spots open</span>",
          "target": [
            ".match-card:nth-child(1) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(2)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">12 spots open</span>",
          "target": [
            ".match-card:nth-child(2) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(3)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">8 spots open</span>",
          "target": [
            ".match-card:nth-child(3) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(4)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">2 spots open</span>",
          "target": [
            ".match-card:nth-child(4) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(5)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">20 spots open</span>",
          "target": [
            ".match-card:nth-child(5) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(6)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">5 spots open</span>",
          "target": [
            ".match-card:nth-child(6) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(7)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">6 spots open</span>",
          "target": [
            ".match-card:nth-child(7) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(8)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">3 spots open</span>",
          "target": [
            ".match-card:nth-child(8) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(9)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">30 spots open</span>",
          "target": [
            ".match-card:nth-child(9) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7d9b8a",
                "bgColor": "#fbf7f0",
                "contrastRatio": 2.83,
                "fontSize": "8.4pt (11.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<article class=\"match-card\">",
                  "target": [
                    ".match-card:nth-child(10)"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"match-card__spots\">2 spots open</span>",
          "target": [
            ".match-card:nth-child(10) > .match-card__top > .match-card__spots"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 2.83 (foreground color: #7d9b8a, background color: #fbf7f0, font size: 8.4pt (11.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7a837d",
                "bgColor": "#10241f",
                "contrastRatio": 4.14,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #7a837d, background color: #10241f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand__tag\">Collective</span>",
          "target": [
            ".footer__brand > .brand[href$=\"#top\"] > .brand__text > .brand__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #7a837d, background color: #10241f, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7a837d",
                "bgColor": "#10241f",
                "contrastRatio": 4.14,
                "fontSize": "9.6pt (12.8px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.14 (foreground color: #7a837d, background color: #10241f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<p>\u00a9 2025 Common Thread Collective. A 501(c)(3) nonprofit. EIN 00-0000000.</p>",
          "target": [
            ".footer__bottom > p"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.14 (foreground color: #7a837d, background color: #10241f, font size: 9.6pt (12.8px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#5a6f68",
                "bgColor": "#e8e6df",
                "contrastRatio": 4.3,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header\">",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<section class=\"section campaigns\" id=\"campaigns\">",
                  "target": [
                    "#campaigns"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.3 (foreground color: #5a6f68, background color: #e8e6df, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand__tag\">Grassroots voices, lasting change</span>",
          "target": [
            ".header__inner > .brand[href$=\"#top\"] > .brand__text > .brand__tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.3 (foreground color: #5a6f68, background color: #e8e6df, font size: 8.2pt (10.88px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 10617
      },
      {
        "y": 576,
        "height": 10617
      },
      {
        "y": 1152,
        "height": 10617
      },
      {
        "y": 1728,
        "height": 10617
      },
      {
        "y": 2304,
        "height": 10617
      },
      {
        "y": 2880,
        "height": 10617
      },
      {
        "y": 3456,
        "height": 10617
      },
      {
        "y": 4032,
        "height": 10617
      },
      {
        "y": 4608,
        "height": 10617
      },
      {
        "y": 5184,
        "height": 10617
      },
      {
        "y": 5760,
        "height": 10617
      },
      {
        "y": 6336,
        "height": 10617
      },
      {
        "y": 6912,
        "height": 10617
      },
      {
        "y": 7488,
        "height": 10617
      },
      {
        "y": 8064,
        "height": 10617
      },
      {
        "y": 8640,
        "height": 10617
      },
      {
        "y": 9216,
        "height": 10617
      },
      {
        "y": 9792,
        "height": 10617
      },
      {
        "y": 9897,
        "height": 10617
      }
    ],
    "scans": 20,
    "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 "Society" 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: "Society"
- Description: Social issues, advocacy, cultural organizations, and community initiatives.

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

**Content & Structure Requirements (Deliver a COMPLETE page):**
-   **Overall:** The final page must feel substantial and complete, with realistic amounts of text (multiple paragraphs per section where appropriate, avoid single sentences), well-integrated placeholder images, and logical flow. It should look like a real website a business would proudly use.
-   **HEADER:** Include the invented site name, tagline, a logo placeholder image, and a primary navigation bar. Ensure the navigation has **at least 5-7 clearly defined, relevant links** including: "News", "Volunteer", "Issues".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Society" category. Consider themes similar to: "Advocacy Actions", "Campaign Updates", "Resource Center".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "grassroots", "coalition building", "advocacy".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Take Action", "Share Story", "Join Movement".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Society" sector. Ideas similar but not limited to: "volunteer matcher".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "action alerts", "resource guides", "event calendar".
-   **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.