Upstage Solar Pro 4 – Hobbies and Interests

via Upstage · Generated

  • AIMAC Debt 7.27
  • Cost $0.0027
  • Total Violations 32
  • HTML Size 75 KB
  • Em Dashes 34

Screenshot

View Upstage Solar Pro 4 Hobbies and Interests page View Live Page

Accessibility Issues Found

32 Serious

  • color-contrast serious 31 instances

    Elements must meet minimum color contrast ratio thresholds

    Example HTML <span class="brand-tagline">Where curiosity becomes craft</span>
  • target-size serious 1 instance

    All touch targets must be 24px large, or leave sufficient space

    Example HTML <a href="#gallery" class="btn btn-ghost">View the Gallery</a>

Artifacts

View Generated HTML
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>MakerHands Collective — Where Curiosity Becomes Craft</title>
  <meta name="description" content="A community and resource hub for makers, crafters, and DIY enthusiasts. Tutorials, material guides, project galleries, and skill progression tools.">
  <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=Inter:opsz,wght@14..32,300..700&family=Playfair+Display:ital,wght@0,500..700;1,500..700&display=swap" rel="stylesheet">
  <style>
    /* ===== Reset & Base ===== */
    *,
    *::before,
    *::after {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }
    :root {
      --color-ink: #1f1a17;
      --color-ink-soft: #4a423c;
      --color-ink-faint: #7b736b;
      --color-paper: #faf7f2;
      --color-paper-warm: #f3ece3;
      --color-line: #e4dccd;
      --color-amber: #c8813a;
      --color-amber-deep: #a8632a;
      --color-amber-soft: #f3e6d3;
      --color-sage: #7a8a6f;
      --color-sage-soft: #e7ece3;
      --color-sky: #4a6b84;
      --color-sky-soft: #e1e8f0;
      --color-clay: #b06a4e;
      --color-clay-soft: #f0e3dc;
      --radius-sm: 6px;
      --radius-md: 10px;
      --radius-lg: 18px;
      --shadow-card: 0 1px 2px rgba(31, 26, 23, 0.04), 0 8px 24px rgba(31, 26, 23, 0.06);
      --shadow-elevated: 0 4px 12px rgba(31, 26, 23, 0.06), 0 20px 40px rgba(31, 26, 23, 0.08);
      --max-w: 1200px;
      --nav-h: 72px;
      --font-serif: 'Playfair Display', Georgia, serif;
      --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
    html {
      scroll-behavior: smooth;
      -webkit-text-size-adjust: 100%;
    }
    body {
      font-family: var(--font-sans);
      color: var(--color-ink);
      background: var(--color-paper);
      line-height: 1.6;
      font-size: 16px;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
    }
    img {
      display: block;
      max-width: 100%;
      height: auto;
    }
    a {
      color: var(--color-amber-deep);
      text-decoration: none;
      transition: color 0.2s ease;
    }
    a:hover {
      color: var(--color-ink);
    }
    ul, ol {
      list-style: none;
    }
    button {
      font: inherit;
      cursor: pointer;
      border: none;
      background: none;
    }
    h1, h2, h3, h4 {
      font-family: var(--font-serif);
      font-weight: 600;
      line-height: 1.25;
      color: var(--color-ink);
    }
    h1 { font-size: clamp(2.2rem, 4.5vw, 3.4rem); }
    h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); }
    h3 { font-size: clamp(1.2rem, 2vw, 1.5rem); }
    .wrap {
      max-width: var(--max-w);
      margin-inline: auto;
      padding-inline: 24px;
    }
    .container {
      padding-inline: 24px;
      margin-inline: auto;
      max-width: var(--max-w);
    }
    .btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 12px 22px;
      border-radius: var(--radius-sm);
      font-weight: 600;
      font-size: 0.95rem;
      transition: all 0.2s ease;
      cursor: pointer;
      border: 1px solid transparent;
    }
    .btn-primary {
      background: var(--color-amber);
      color: #fff;
      border-color: var(--color-amber);
    }
    .btn-primary:hover {
      background: var(--color-amber-deep);
      border-color: var(--color-amber-deep);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(200, 129, 58, 0.35);
    }
    .btn-ghost {
      background: transparent;
      color: var(--color-ink);
      border-color: var(--color-line);
    }
    .btn-ghost:hover {
      background: var(--color-paper-warm);
      border-color: var(--color-ink-faint);
      color: var(--color-ink);
    }
    .btn-outline-amber {
      background: transparent;
      color: var(--color-amber-deep);
      border-color: var(--color-amber);
    }
    .btn-outline-amber:hover {
      background: var(--color-amber);
      color: #fff;
      border-color: var(--color-amber);
    }
    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-size: 0.75rem;
      font-weight: 700;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: var(--color-amber-deep);
      margin-bottom: 14px;
    }
    .section-label::before {
      content: '';
      width: 24px;
      height: 2px;
      background: var(--color-amber);
      border-radius: 2px;
    }
    .eyebrow {
      font-size: 0.8rem;
      font-weight: 600;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--color-ink-faint);
      margin-bottom: 10px;
    }
    .lead {
      font-size: 1.08rem;
      line-height: 1.7;
      color: var(--color-ink-soft);
      max-width: 62ch;
    }
    .card {
      background: #fff;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-card);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
    }
    .card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-elevated);
    }
    .img-frame {
      border-radius: var(--radius-md);
      overflow: hidden;
      background: var(--color-paper-warm);
    }
    .img-frame img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    ::selection {
      background: var(--color-amber-soft);
      color: var(--color-ink);
    }
    /* ===== Skip link ===== */
    .skip-link {
      position: absolute;
      left: -9999px;
      top: 0;
      background: var(--color-ink);
      color: #fff;
      padding: 10px 18px;
      border-radius: 0 0 8px 8px;
      z-index: 1000;
      font-weight: 600;
      font-size: 0.9rem;
    }
    .skip-link:focus {
      left: 0;
    }
    /* ===== Header ===== */
    .site-header {
      position: sticky;
      top: 0;
      z-index: 100;
      background: rgba(250, 247, 242, 0.92);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--color-line);
    }
    .header-inner {
      height: var(--nav-h);
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
    }
    .brand {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      color: var(--color-ink);
    }
    .brand-logo {
      width: 42px;
      height: 42px;
      border-radius: var(--radius-sm);
      overflow: hidden;
      background: var(--color-paper-warm);
      flex-shrink: 0;
    }
    .brand-logo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .brand-text {
      display: flex;
      flex-direction: column;
      line-height: 1.15;
    }
    .brand-name {
      font-family: var(--font-serif);
      font-size: 1.15rem;
      font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--color-ink);
    }
    .brand-tagline {
      font-size: 0.72rem;
      font-weight: 500;
      color: var(--color-ink-faint);
      letter-spacing: 0.02em;
    }
    .nav-desktop {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .nav-list {
      display: flex;
      align-items: center;
      gap: 6px;
    }
    .nav-list a {
      display: inline-block;
      padding: 8px 14px;
      font-size: 0.9rem;
      font-weight: 500;
      color: var(--color-ink-soft);
      border-radius: var(--radius-sm);
      transition: background 0.2s, color 0.2s;
      position: relative;
    }
    .nav-list a:hover,
    .nav-list a:focus-visible {
      background: var(--color-paper-warm);
      color: var(--color-ink);
    }
    .nav-list a.active {
      color: var(--color-amber-deep);
      font-weight: 600;
    }
    .nav-list a.active::after {
      content: '';
      position: absolute;
      bottom: 2px;
      left: 14px;
      right: 14px;
      height: 2px;
      background: var(--color-amber);
      border-radius: 2px;
    }
    .nav-cta {
      margin-left: 8px;
    }
    .nav-toggle {
      display: none;
      width: 44px;
      height: 44px;
      align-items: center;
      justify-content: center;
      border-radius: var(--radius-sm);
      background: var(--color-paper-warm);
      border: 1px solid var(--color-line);
    }
    .nav-toggle span {
      display: block;
      width: 18px;
      height: 2px;
      background: var(--color-ink);
      border-radius: 2px;
      position: relative;
      transition: background 0.2s;
    }
    .nav-toggle span::before,
    .nav-toggle span::after {
      content: '';
      position: absolute;
      left: 0;
      width: 18px;
      height: 2px;
      background: var(--color-ink);
      border-radius: 2px;
      transition: transform 0.25s ease;
    }
    .nav-toggle span::before { top: -6px; }
    .nav-toggle span::after { top: 6px; }
    .nav-toggle[aria-expanded="true"] span { background: transparent; }
    .nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
    .nav-toggle[aria-expanded="true"] span::after { transform: translateY(-6px) rotate(-45deg); }
    /* Mobile nav */
    .nav-mobile {
      display: none;
      border-top: 1px solid var(--color-line);
      background: rgba(250, 247, 242, 0.98);
      backdrop-filter: blur(12px);
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.4s ease;
    }
    .nav-mobile.open {
      max-height: 600px;
      padding: 12px 0 16px;
    }
    .nav-mobile .nav-list {
      flex-direction: column;
      align-items: stretch;
      gap: 2px;
      padding-inline: 16px;
    }
    .nav-mobile .nav-list a {
      padding: 12px 8px;
      font-size: 1rem;
    }
    .nav-mobile .nav-list a.active::after {
      display: none;
    }
    .nav-mobile .nav-cta {
      margin-left: 0;
      margin-top: 8px;
      display: flex;
      gap: 8px;
      padding: 0 16px 12px;
      border-top: 1px solid var(--color-line);
    }
    /* ===== Hero ===== */
    .hero {
      padding: 64px 0 56px;
      position: relative;
      overflow: hidden;
    }
    .hero-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
    .hero-content {
      max-width: 560px;
    }
    .hero h1 {
      margin-bottom: 20px;
      letter-spacing: -0.02em;
    }
    .hero h1 em {
      font-style: italic;
      color: var(--color-amber-deep);
    }
    .hero-text {
      margin-bottom: 32px;
    }
    .hero-ctas {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }
    .hero-image-col {
      position: relative;
    }
    .hero-image-main {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-elevated);
      aspect-ratio: 4 / 3;
      background: var(--color-paper-warm);
    }
    .hero-image-main img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-image-accent {
      position: absolute;
      bottom: -16px;
      right: -16px;
      width: 160px;
      height: 160px;
      border-radius: var(--radius-md);
      overflow: hidden;
      border: 6px solid var(--color-paper);
      box-shadow: var(--shadow-elevated);
      background: var(--color-paper-warm);
      z-index: 2;
    }
    .hero-image-accent img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .hero-stats {
      display: flex;
      gap: 28px;
      margin-top: 36px;
      padding-top: 28px;
      border-top: 1px solid var(--color-line);
    }
    .hero-stat {
      display: flex;
      flex-direction: column;
    }
    .hero-stat-number {
      font-family: var(--font-serif);
      font-size: 1.6rem;
      font-weight: 700;
      color: var(--color-ink);
      line-height: 1.2;
    }
    .hero-stat-label {
      font-size: 0.82rem;
      color: var(--color-ink-faint);
      font-weight: 500;
    }
    /* ===== Section spacing ===== */
    .section {
      padding: 64px 0;
    }
    .section-alt {
      background: var(--color-paper-warm);
      border-top: 1px solid var(--color-line);
      border-bottom: 1px solid var(--color-line);
    }
    .section-head {
      margin-bottom: 40px;
    }
    .section-head p {
      margin-top: 12px;
      color: var(--color-ink-soft);
      max-width: 60ch;
    }
    /* ===== Featured Project Showcase ===== */
    .showcase-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .showcase-card {
      background: #fff;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: var(--shadow-card);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .showcase-card:hover {
      transform: translateY(-4px);
      box-shadow: var(--shadow-elevated);
    }
    .showcase-media {
      aspect-ratio: 4 / 3;
      overflow: hidden;
      background: var(--color-paper-warm);
    }
    .showcase-media img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.5s ease;
    }
    .showcase-card:hover .showcase-media img {
      transform: scale(1.05);
    }
    .showcase-body {
      padding: 20px;
    }
    .showcase-tag {
      display: inline-block;
      font-size: 0.68rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 100px;
      background: var(--color-amber-soft);
      color: var(--color-amber-deep);
      margin-bottom: 12px;
    }
    .showcase-tag.sage { background: var(--color-sage-soft); color: var(--color-sage); }
    .showcase-tag.clay { background: var(--color-clay-soft); color: var(--color-clay); }
    .showcase-tag.sky { background: var(--color-sky-soft); color: var(--color-sky); }
    .showcase-body h3 {
      margin-bottom: 8px;
      font-size: 1.15rem;
    }
    .showcase-body p {
      font-size: 0.92rem;
      color: var(--color-ink-soft);
      line-height: 1.6;
      margin-bottom: 16px;
    }
    .showcase-meta {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      font-size: 0.82rem;
      color: var(--color-ink-faint);
      font-weight: 500;
    }
    .showcase-maker {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .showcase-maker img {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--color-paper-warm);
    }
    .showcase-link {
      font-size: 0.82rem;
      font-weight: 600;
      color: var(--color-amber-deep);
      display: inline-flex;
      align-items: center;
      gap: 4px;
    }
    .showcase-link:hover {
      gap: 8px;
    }
    /* ===== Material Guides ===== */
    .guides-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 20px;
    }
    .guide-card {
      background: #fff;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      padding: 24px 20px;
      box-shadow: var(--shadow-card);
      transition: transform 0.25s ease, box-shadow 0.25s ease;
      display: flex;
      flex-direction: column;
    }
    .guide-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-elevated);
    }
    .guide-icon {
      width: 48px;
      height: 48px;
      border-radius: var(--radius-sm);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      margin-bottom: 16px;
      flex-shrink: 0;
    }
    .guide-icon.amber { background: var(--color-amber-soft); color: var(--color-amber-deep); }
    .guide-icon.sage { background: var(--color-sage-soft); color: var(--color-sage); }
    .guide-icon.sky { background: var(--color-sky-soft); color: var(--color-sky); }
    .guide-icon.clay { background: var(--color-clay-soft); color: var(--color-clay); }
    .guide-card h3 {
      font-size: 1.05rem;
      margin-bottom: 10px;
      font-family: var(--font-sans);
      font-weight: 600;
    }
    .guide-card p {
      font-size: 0.88rem;
      color: var(--color-ink-soft);
      line-height: 1.6;
      flex: 1;
      margin-bottom: 16px;
    }
    .guide-detail {
      font-size: 0.8rem;
      color: var(--color-ink-faint);
      border-top: 1px solid var(--color-line);
      padding-top: 12px;
      margin-top: auto;
    }
    .guide-detail strong {
      color: var(--color-ink-soft);
      font-weight: 600;
    }
    .guide-cta {
      display: flex;
      gap: 10px;
      margin-top: 24px;
      flex-wrap: wrap;
    }
    /* ===== Tutorial highlight ===== */
    .tutorial-block {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 48px;
      align-items: center;
    }
    .tutorial-image {
      border-radius: var(--radius-lg);
      overflow: hidden;
      box-shadow: var(--shadow-elevated);
      aspect-ratio: 16 / 10;
      background: var(--color-paper-warm);
    }
    .tutorial-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
    .tutorial-stamp {
      display: inline-block;
      background: var(--color-amber);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 5px 12px;
      border-radius: 100px;
      margin-bottom: 16px;
    }
    .tutorial-text h2 {
      margin-bottom: 16px;
      letter-spacing: -0.01em;
    }
    .tutorial-text p {
      color: var(--color-ink-soft);
      margin-bottom: 16px;
      font-size: 0.98rem;
      line-height: 1.7;
    }
    .tutorial-steps {
      list-style: none;
      margin: 20px 0 24px;
      display: flex;
      flex-direction: column;
      gap: 12px;
    }
    .tutorial-steps li {
      display: flex;
      gap: 14px;
      align-items: flex-start;
      font-size: 0.92rem;
      color: var(--color-ink-soft);
    }
    .tutorial-steps li::before {
      content: '';
      flex-shrink: 0;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      background: var(--color-amber-soft);
      color: var(--color-amber-deep);
      font-size: 0.7rem;
      font-weight: 700;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 2px;
    }
    .tutorial-meta {
      display: flex;
      gap: 24px;
      font-size: 0.82rem;
      color: var(--color-ink-faint);
      padding: 12px 0;
      border-top: 1px solid var(--color-line);
      margin-top: 8px;
    }
    .tutorial-meta strong {
      color: var(--color-ink-soft);
      font-weight: 600;
    }
    /* ===== Gallery grid (community) ===== */
    .gallery-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 14px;
    }
    .gallery-cell {
      position: relative;
      aspect-ratio: 1 / 1;
      border-radius: var(--radius-sm);
      overflow: hidden;
      cursor: pointer;
      background: var(--color-paper-warm);
      box-shadow: var(--shadow-card);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
    }
    .gallery-cell:hover {
      transform: scale(1.02);
      box-shadow: var(--shadow-elevated);
      z-index: 2;
    }
    .gallery-cell img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform 0.5s ease;
    }
    .gallery-cell:hover img {
      transform: scale(1.08);
    }
    .gallery-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(to top, rgba(31,26,23,0.7) 0%, transparent 50%);
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: 12px;
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    .gallery-cell:hover .gallery-overlay {
      opacity: 1;
    }
    .gallery-overlay span {
      color: #fff;
      font-size: 0.8rem;
      font-weight: 600;
    }
    .gallery-overlay small {
      color: rgba(255,255,255,0.75);
      font-size: 0.7rem;
    }
    /* ===== Sidebar layout ===== */
    .content-with-sidebar {
      display: grid;
      grid-template-columns: 1fr 320px;
      gap: 40px;
      align-items: start;
    }
    .sidebar {
      position: sticky;
      top: calc(var(--nav-h) + 24px);
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    .sidebar-card {
      background: #fff;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      padding: 22px;
      box-shadow: var(--shadow-card);
    }
    .sidebar-card h4 {
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--color-ink-faint);
      margin-bottom: 16px;
      padding-bottom: 10px;
      border-bottom: 1px solid var(--color-line);
    }
    .featured-maker {
      display: flex;
      gap: 12px;
      align-items: center;
      padding: 10px 0;
      border-bottom: 1px solid var(--color-line);
    }
    .featured-maker:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .featured-maker img {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--color-paper-warm);
      flex-shrink: 0;
    }
    .featured-maker-info {
      flex: 1;
      min-width: 0;
    }
    .featured-maker-info strong {
      display: block;
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--color-ink);
      font-family: var(--font-sans);
    }
    .featured-maker-info span {
      font-size: 0.78rem;
      color: var(--color-ink-faint);
    }
    .featured-maker-link {
      font-size: 0.78rem;
      font-weight: 600;
      color: var(--color-amber-deep);
    }
    .tutorial-mini {
      display: block;
      padding: 10px 0;
      border-bottom: 1px solid var(--color-line);
      text-decoration: none;
      color: var(--color-ink);
    }
    .tutorial-mini:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
    .tutorial-mini strong {
      display: block;
      font-size: 0.88rem;
      font-family: var(--font-sans);
      font-weight: 600;
      margin-bottom: 2px;
    }
    .tutorial-mini span {
      font-size: 0.76rem;
      color: var(--color-ink-faint);
    }
    .event-item {
      padding: 8px 0;
      border-bottom: 1px solid var(--color-line);
      font-size: 0.86rem;
      color: var(--color-ink-soft);
    }
    .event-item:last-child { border-bottom: none; }
    .event-item strong {
      display: block;
      font-family: var(--font-sans);
      font-size: 0.9rem;
      font-weight: 600;
      color: var(--color-ink);
      margin-bottom: 2px;
    }
    .event-date {
      font-size: 0.74rem;
      color: var(--color-amber-deep);
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    /* ===== Testimonials ===== */
    .testimonials-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 24px;
    }
    .testimonial-card {
      background: #fff;
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      padding: 24px;
      box-shadow: var(--shadow-card);
    }
    .testimonial-stars {
      display: flex;
      gap: 2px;
      margin-bottom: 12px;
      color: var(--color-amber);
      font-size: 0.9rem;
    }
    .testimonial-text {
      font-family: var(--font-serif);
      font-size: 1.02rem;
      line-height: 1.6;
      color: var(--color-ink-soft);
      font-style: italic;
      margin-bottom: 18px;
    }
    .testimonial-author {
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .testimonial-author img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--color-paper-warm);
    }
    .testimonial-author strong {
      display: block;
      font-family: var(--font-sans);
      font-size: 0.88rem;
      font-weight: 600;
      color: var(--color-ink);
    }
    .testimonial-author span {
      font-size: 0.78rem;
      color: var(--color-ink-faint);
    }
    /* ===== FAQ Accordion ===== */
    .faq-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-width: 820px;
    }
    .faq-item {
      border: 1px solid var(--color-line);
      border-radius: var(--radius-md);
      background: #fff;
      box-shadow: var(--shadow-card);
      overflow: hidden;
      transition: box-shadow 0.25s ease;
    }
    .faq-item:hover {
      box-shadow: var(--shadow-elevated);
    }
    .faq-item.active {
      border-color: var(--color-amber);
      box-shadow: 0 0 0 2px var(--color-amber-soft);
    }
    .faq-btn {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      font-size: 1rem;
      font-weight: 600;
      font-family: var(--font-sans);
      color: var(--color-ink);
      background: none;
      border: none;
      text-align: left;
    }
    .faq-btn:hover {
      background: var(--color-paper-warm);
    }
    .faq-icon {
      width: 28px;
      height: 28px;
      border-radius: 50%;
      background: var(--color-amber-soft);
      color: var(--color-amber-deep);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.1rem;
      font-weight: 700;
      flex-shrink: 0;
      transition: transform 0.3s ease, background 0.2s;
    }
    .faq-item.active .faq-icon {
      transform: rotate(45deg);
      background: var(--color-amber);
      color: #fff;
    }
    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease, padding 0.3s ease;
      padding: 0 20px;
      color: var(--color-ink-soft);
      font-size: 0.94rem;
      line-height: 1.7;
    }
    .faq-item.active .faq-answer {
      max-height: 400px;
      padding: 0 20px 20px;
    }
    .faq-answer p {
      margin-bottom: 8px;
    }
    .faq-answer p:last-child {
      margin-bottom: 0;
    }
    /* ===== CTA Band ===== */
    .cta-band {
      background: var(--color-ink);
      color: #fff;
      padding: 56px 0;
      position: relative;
      overflow: hidden;
    }
    .cta-band::before {
      content: '';
      position: absolute;
      inset: 0;
      background: radial-gradient(ellipse at 80% 50%, rgba(200,129,58,0.18) 0%, transparent 60%);
      pointer-events: none;
    }
    .cta-band .container {
      position: relative;
      z-index: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 32px;
      flex-wrap: wrap;
    }
    .cta-band h2 {
      color: #fff;
      max-width: 48ch;
    }
    .cta-band h2 em {
      color: var(--color-amber);
      font-style: italic;
    }
    .cta-band p {
      color: rgba(255,255,255,0.75);
      max-width: 44ch;
      margin: 12px 0 24px;
      font-size: 1rem;
    }
    .cta-band .btn-primary {
      background: var(--color-amber);
      border-color: var(--color-amber);
      color: var(--color-ink);
    }
    .cta-band .btn-primary:hover {
      background: var(--color-amber-deep);
      border-color: var(--color-amber-deep);
      color: #fff;
    }
    .cta-secondary {
      background: transparent;
      border: 1px solid rgba(255,255,255,0.25);
      color: #fff;
    }
    .cta-secondary:hover {
      background: rgba(255,255,255,0.08);
      border-color: rgba(255,255,255,0.5);
      color: #fff;
    }
    /* ===== Footer ===== */
    .site-footer {
      background: var(--color-ink);
      color: rgba(255,255,255,0.85);
      padding: 48px 0 0;
    }
    .footer-grid {
      display: grid;
      grid-template-columns: 2fr 1fr 1fr 1fr;
      gap: 40px;
      padding-bottom: 40px;
      border-bottom: 1px solid rgba(255,255,255,0.12);
    }
    .footer-brand .brand-name {
      color: #fff;
      font-size: 1.2rem;
    }
    .footer-brand .brand-tagline {
      color: rgba(255,255,255,0.55);
      margin-top: 6px;
    }
    .footer-brand p {
      margin-top: 16px;
      font-size: 0.88rem;
      line-height: 1.6;
      color: rgba(255,255,255,0.6);
      max-width: 32ch;
    }
    .footer-social {
      display: flex;
      gap: 10px;
      margin-top: 18px;
    }
    .footer-social a {
      width: 38px;
      height: 38px;
      border-radius: var(--radius-sm);
      background: rgba(255,255,255,0.08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: rgba(255,255,255,0.7);
      font-size: 1rem;
      transition: background 0.2s, color 0.2s;
    }
    .footer-social a:hover {
      background: var(--color-amber);
      color: var(--color-ink);
    }
    .footer-col h5 {
      font-family: var(--font-sans);
      font-size: 0.8rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: rgba(255,255,255,0.5);
      margin-bottom: 16px;
    }
    .footer-col ul {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .footer-col a {
      font-size: 0.88rem;
      color: rgba(255,255,255,0.7);
      transition: color 0.2s;
    }
    .footer-col a:hover {
      color: #fff;
    }
    .footer-bottom {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 0;
      font-size: 0.82rem;
      color: rgba(255,255,255,0.45);
      flex-wrap: wrap;
      gap: 12px;
    }
    .footer-bottom a {
      color: rgba(255,255,255,0.6);
    }
    .footer-bottom a:hover {
      color: #fff;
    }
    /* ===== Lightbox (simple) ===== */
    .gallery-lightbox {
      position: fixed;
      inset: 0;
      background: rgba(31,26,23,0.92);
      backdrop-filter: blur(6px);
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 200;
      opacity: 0;
      visibility: hidden;
      transition: opacity 0.3s ease, visibility 0.3s ease;
      padding: 24px;
    }
    .gallery-lightbox.open {
      opacity: 1;
      visibility: visible;
    }
    .gallery-lightbox img {
      max-width: 90vw;
      max-height: 85vh;
      border-radius: var(--radius-md);
      box-shadow: var(--shadow-elevated);
      object-fit: contain;
    }
    .gallery-lightbox-close {
      position: absolute;
      top: 20px;
      right: 24px;
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: rgba(255,255,255,0.12);
      color: #fff;
      font-size: 1.4rem;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s;
    }
    .gallery-lightbox-close:hover {
      background: rgba(255,255,255,0.25);
    }
    .gallery-lightbox-caption {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      color: rgba(255,255,255,0.8);
      font-size: 0.85rem;
      background: rgba(0,0,0,0.5);
      padding: 8px 16px;
      border-radius: 100px;
      backdrop-filter: blur(4px);
    }
    /* ===== Responsive ===== */
    @media (max-width: 1024px) {
      .hero-grid {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .hero-image-col {
        max-width: 520px;
      }
      .showcase-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .guides-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .tutorial-block {
        grid-template-columns: 1fr;
        gap: 32px;
      }
      .gallery-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .content-with-sidebar {
        grid-template-columns: 1fr;
      }
      .sidebar {
        position: static;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
      }
      .testimonials-grid {
        grid-template-columns: 1fr 1fr;
      }
      .footer-grid {
        grid-template-columns: 1fr 1fr;
        gap: 32px;
      }
    }
    @media (max-width: 768px) {
      .nav-desktop {
        display: none;
      }
      .nav-toggle {
        display: flex;
      }
      .nav-mobile {
        display: block;
      }
      .hero {
        padding: 40px 0 40px;
      }
      .hero-stats {
        gap: 18px;
        flex-wrap: wrap;
      }
      .showcase-grid {
        grid-template-columns: 1fr;
      }
      .guides-grid {
        grid-template-columns: 1fr 1fr;
      }
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
      }
      .sidebar {
        grid-template-columns: 1fr;
      }
      .testimonials-grid {
        grid-template-columns: 1fr;
      }
      .faq-list {
        max-width: 100%;
      }
      .footer-grid {
        grid-template-columns: 1fr;
        gap: 28px;
      }
      .cta-band .container {
        flex-direction: column;
        text-align: center;
      }
      .cta-band p {
        max-width: 100%;
      }
      .footer-bottom {
        flex-direction: column;
        text-align: center;
      }
      .section {
        padding: 48px 0;
      }
      .hero-image-accent {
        width: 120px;
        height: 120px;
        bottom: -12px;
        right: -12px;
      }
    }
    @media (max-width: 480px) {
      .guides-grid {
        grid-template-columns: 1fr;
      }
      .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
      }
      .hero-ctas {
        flex-direction: column;
      }
      .hero-ctas .btn {
        width: 100%;
        justify-content: center;
      }
      .container {
        padding-inline: 18px;
      }
      .wrap {
        padding-inline: 18px;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
      }
    }
    @media (prefers-color-scheme: dark) {
      /* Graceful dark mode — kept light for brand warmth, but we respect system preference with subtle adjustments */
      :root {
        --color-paper: #fdfaf6;
      }
    }
  </style>
</head>
<body>
  <a class="skip-link" href="#main">Skip to main content</a>

  <!-- ===== HEADER ===== -->
  <header class="site-header" role="banner">
    <div class="container header-inner">
      <a href="#" class="brand" aria-label="MakerHands Collective home">
        <span class="brand-logo" aria-hidden="true">
          <img src="https://placehold.co/84x84/e4dccd/4a423c?text=MH&font=playfair+display" alt="MakerHands Collective logo mark" width="84" height="84">
        </span>
        <span class="brand-text">
          <span class="brand-name">MakerHands Collective</span>
          <span class="brand-tagline">Where curiosity becomes craft</span>
        </span>
      </a>

      <nav class="nav-desktop" aria-label="Primary navigation">
        <ul class="nav-list">
          <li><a href="#showcase" class="active">Project Showcase</a></li>
          <li><a href="#guides">Material Guides</a></li>
          <li><a href="#tutorials">Craft Tutorials</a></li>
          <li><a href="#gallery">Gallery</a></li>
          <li><a href="#community">Community</a></li>
          <li><a href="#faq">FAQ</a></li>
          <li><a href="#about">About</a></li>
        </ul>
        <a href="#supplies" class="btn btn-primary nav-cta">Get Supplies</a>
      </nav>

      <button class="nav-toggle" aria-label="Toggle navigation menu" aria-expanded="false" aria-controls="nav-mobile">
        <span></span>
      </button>
    </div>

    <!-- Mobile nav -->
    <nav class="nav-mobile" id="nav-mobile" aria-label="Mobile navigation">
      <ul class="nav-list">
        <li><a href="#showcase" class="active">Project Showcase</a></li>
        <li><a href="#guides">Material Guides</a></li>
        <li><a href="#tutorials">Craft Tutorials</a></li>
        <li><a href="#gallery">Gallery</a></li>
        <li><a href="#community">Community</a></li>
        <li><a href="#faq">FAQ</a></li>
        <li><a href="#about">About</a></li>
      </ul>
      <a href="#supplies" class="btn btn-primary">Get Supplies</a>
      <a href="#gallery" class="btn btn-ghost">Post Work</a>
    </nav>
  </header>

  <main id="main">
    <!-- ===== HERO ===== -->
    <section class="hero" aria-labelledby="hero-title">
      <div class="container hero-grid">
        <div class="hero-content">
          <span class="section-label">Since 2019</span>
          <h1 id="hero-title">We help makers turn <em>curiosity</em> into craft — one project at a time.</h1>
          <div class="hero-text">
            <p class="lead">
              MakerHands Collective is a community and resource hub for hobbyists, crafters, and
              DIY enthusiasts who believe that making things by hand changes how you see the world.
              Whether you're learning your first joinery technique or refining a complex pattern design,
              you'll find tutorials, material guides, and a welcoming gallery to share your progress.
            </p>
          </div>
          <div class="hero-ctas">
            <a href="#guides" class="btn btn-primary">Explore Material Guides</a>
            <a href="#gallery" class="btn btn-ghost">View the Gallery</a>
          </div>
          <div class="hero-stats" role="list">
            <div class="hero-stat" role="listitem">
              <span class="hero-stat-number">640+</span>
              <span class="hero-stat-label">Tutorials published</span>
            </div>
            <div class="hero-stat" role="listitem">
              <span class="hero-stat-number">18k</span>
              <span class="hero-stat-label">Projects shared</span>
            </div>
            <div class="hero-stat" role="listitem">
              <span class="hero-stat-number">4.9</span>
              <span class="hero-stat-label">Average maker rating</span>
            </div>
            <div class="hero-stat" role="listitem">
              <span class="hero-stat-number">8</span>
              <span class="hero-stat-label">Skill tiers</span>
            </div>
          </div>
        </div>

        <div class="hero-image-col">
          <div class="hero-image-main">
            <img src="https://placehold.co/800x600/e4dccd/4a423c?text=Workshop+bench+%7C+Hand+tools+%26+material+layout&font=playfair+display" alt="A well-lit workshop bench with hand tools, wood blanks, and material samples arranged for a project" width="800" height="600">
          </div>
          <div class="hero-image-accent" aria-hidden="true">
            <img src="https://placehold.co/320x320/f3ece3/7b736b?text=Maker+portrait&font=playfair+display" alt="A maker reviewing a pattern design on paper next to a half-finished project" width="320" height="320">
          </div>
        </div>
      </div>
    </section>

    <!-- ===== FEATURED PROJECT SHOWCASE ===== -->
    <section class="section" id="showcase" aria-labelledby="showcase-title">
      <div class="container">
        <div class="section-head">
          <span class="section-label">Latest work</span>
          <h2 id="showcase-title">Project Showcase</h2>
          <p>
            Real projects from real makers. Each entry includes a short build narrative, the materials
            used, and a link to the maker's full tutorial so you can learn by doing. Browse for
            inspiration, or Post Work to get feedback from the community.
          </p>
        </div>

        <div class="showcase-grid">
          <article class="showcase-card">
            <div class="showcase-media">
              <img src="https://placehold.co/600x450/d9c8a8/4a423c?text=Hand+cut+dovetail+box&font=lato" alt="A small wooden box with hand-cut dovetail joints, finished in a natural oil finish" width="600" height="450">
            </div>
            <div class="showcase-body">
              <span class="showcase-tag">Woodworking</span>
              <h3>Hand-Cut Dovetail Keepsake Box</h3>
              <p>
                A compact 18cm box built entirely with hand tools — layout, marking, and cutting
                dovetails by hand. The maker focused on <strong>skill progression</strong> rather than
                perfection, documenting every failed pin and how the fit evolved across four attempts.
                Interior lined with archival felt.
              </p>
              <div class="showcase-meta">
                <div class="showcase-maker">
                  <img src="https://placehold.co/56x56/e4dccd/4a423c?text=AN&font=playfair+display" alt="Avatar for maker A. Navarro" width="56" height="56">
                  <span>A. Navarro</span>
                </div>
                <a href="#" class="showcase-link" aria-label="View full project by A. Navarro">View project →</a>
              </div>
            </div>
          </article>

          <article class="showcase-card">
            <div class="showcase-media">
              <img src="https://placehold.co/600x450/c9d8cf/4a423c?text=Macrame+wall+hanging&font=lato" alt="A macramé wall hanging with geometric knot patterns in natural cotton cord" width="600" height="450">
            </div>
            <div class="showcase-body">
              <span class="showcase-tag sage">Fiber Arts</span>
              <h3>Geometric Macramé Wall Hanging</h3>
              <p>
                This 1.4m hanging uses a mix of alternating square knots and half-square hitches to build
                a repeating triangular motif. The maker's notes cover <strong>pattern design</strong> — how
                to sketch a grid, translate it into knot sequences, and adjust scale without re-counting
                cord lengths. Hanging hardware is hidden in a wooden dowel sleeve.
              </p>
              <div class="showcase-meta">
                <div class="showcase-maker">
                  <img src="https://placehold.co/56x56/e4dccd/4a423c?text=LR&font=playfair+display" alt="Avatar for maker L. Reyes" width="56" height="56">
                  <span>L. Reyes</span>
                </div>
                <a href="#" class="showcase-link" aria-label="View full project by L. Reyes">View project →</a>
              </div>
            </div>
          </article>

          <article class="showcase-card">
            <div class="showcase-media">
              <img src="https://placehold.co/600x450/ddd2c2/4a423c?text=Ceramic+modular+molds&font=lato" alt="Modular plaster molds arranged on a plaster bench with clay slabs and shaping tools" width="600" height="450">
            </div>
            <div class="showcase-body">
              <span class="showcase-tag clay">Ceramics</span>
              <h3>Modular Plaster Molds for repeatable forms</h3>
              <p>
                A set of three-piece drop molds for producing matching cylindrical vessels. The project
                walks through <strong>project planning</strong> from CAD sketch to plaster mix ratio,
                pour temperature, and cleanup. Includes a comparison of three mold releases and a
                troubleshooting section for bubble defects.
              </p>
              <div class="showcase-meta">
                <div class="showcase-maker">
                  <img src="https://placehold.co/56x56/e4dccd/4a423c?text=PK&font=playfair+display" alt="Avatar for maker P. Kim" width="56" height="56">
                  <span>P. Kim</span>
                </div>
                <a href="#" class="showcase-link" aria-label="View full project by P. Kim">View project →</a>
              </div>
            </div>
          </article>
        </div>

        <div style="margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
          <a href="#gallery" class="btn btn-outline-amber">Post Work</a>
          <span style="font-size: 0.88rem; color: var(--color-ink-faint);">Or browse the full <a href="#gallery" style="color: var(--color-amber-deep); font-weight: 600;">Community Gallery</a></span>
        </div>
      </div>
    </section>

    <!-- ===== MATERIAL GUIDES ===== -->
    <section class="section section-alt" id="guides" aria-labelledby="guides-title">
      <div class="container">
        <div class="section-head">
          <span class="section-label">Reference library</span>
          <h2 id="guides-title">Material Guides</h2>
          <p>
            Choosing the right material changes the whole project — and the learning curve. Our guides
            cover sourcing, prep, common failures, and when to upgrade. Think of them as your first pass
            before you commit to a <strong>project planning</strong> session.
          </p>
        </div>

        <div class="guides-grid">
          <div class="guide-card">
            <div class="guide-icon amber" aria-hidden="true">🪵</div>
            <h3>Hardwoods & Softwoods</h3>
            <p>
              Grain direction, moisture content, and species selection for furniture, boxes, and small
              turned pieces. Includes a printable chart of common US and EU species with working
              properties and typical sawmill prices.
            </p>
            <div class="guide-detail">
              <strong>6 guide pages</strong> · Beginner to intermediate
            </div>
          </div>

          <div class="guide-card">
            <div class="guide-icon sage" aria-hidden="true">🧵</div>
            <h3>Natural & Synthetic Fibers</h3>
            <p>
              Cotton, linen, hemp, jute, nylon, and polyester cord — how twist, diameter, and finish
              affect knotting and weaving. A section on preparing custom dye lots and stripping factory
              finishes from reclaimed cord.
            </p>
            <div class="guide-detail">
              <strong>8 guide pages</strong> · All levels
            </div>
          </div>

          <div class="guide-card">
            <div class="guide-icon sky" aria-hidden="true">🏺</div>
            <h3>Clay Bodies & Glazes</h3>
            <p>
              Earthenware vs stoneware vs porcelain, absorption rates, fit of common commercial glazes,
              and a troubleshooting table for pin holing, crawling, and shivering. Includes a slurry
              mixing recipe card you can save to your phone.
            </p>
            <div class="guide-detail">
              <strong>5 guide pages</strong> · Beginner to advanced
            </div>
          </div>

          <div class="guide-card">
            <div class="guide-icon clay" aria-hidden="true">✂️</div>
            <h3>Paper, Board & Adhesives</h3>
            <p>
              For bookbinding, papercraft, and mixed-media projects — grain direction of sheet stock,
              acid-free options, PVA vs hide glue vs wheat starch paste, and when a permanent bond is
              worth the extra prep time.
            </p>
            <div class="guide-detail">
              <strong>4 guide pages</strong> · All levels
            </div>
          </div>
        </div>

        <div class="guide-cta">
          <a href="#" class="btn btn-primary">Get Supplies</a>
          <a href="#" class="btn btn-ghost">Browse All Guides</a>
        </div>
      </div>
    </section>

    <!-- ===== CRAFT TUTORIALS (with sidebar) ===== -->
    <section class="section" id="tutorials" aria-labelledby="tutorial-title">
      <div class="container">
        <div class="section-head">
          <span class="section-label">Step by step</span>
          <h2 id="tutorial-title">Craft Tutorials</h2>
          <p>
            Tutorials that respect your time and your budget. Each one is written by a practicing maker
            and tested by a second reviewer so the steps hold up on a real workbench — not just in a
            photo studio. Our <strong>skill progression</strong> system tags every tutorial with a tier so
            you can build confidence over time.
          </p>
        </div>

        <div class="content-with-sidebar">
          <!-- Main tutorial -->
          <div>
            <div class="tutorial-block">
              <div class="tutorial-image">
                <img src="https://placehold.co/900x562/e4dccd/4a423c?text=Sharpening+bench+%7C+stones+%26+strop&font=playfair+display" alt="A sharpening bench with water stones, a leather strop, and a chisel being honed" width="900" height="562">
              </div>
              <div class="tutorial-text">
                <span class="tutorial-stamp">Tier 2 · Intermediate</span>
                <h2>Sharpening Common Edge Tools to a Working Edge</h2>
                <p>
                  A dull tool is a dangerous tool and a frustrating one. This tutorial walks through
                  establishing a primary bevel, hitting a consistent secondary bevel, and testing the
                  edge on end grain without burning through the steel. It assumes you have a basic set of
                  water stones and about 30 minutes — perfect for a <strong>skill progression</strong> check
                  before a weekend project.
                </p>
                <ol class="tutorial-steps">
                  <li>Flatten and clean your stones; a 1000/4000/8000 grit progression covers most HSS and carbon tools.</li>
                  <li>Mark the bevel with a sharpie to confirm full contact — no skating, no hollows.</li>
                  <li>Raise a micro-bevel at roughly 3–5° above the primary; keep the strokes light and consistent.</li>
                  <li>Strop on leather with a fine compound to remove the burr, then test on end grain.</li>
                  <li>Reset the tool, wipe down, and store dry — a few minutes now saves a ruined edge later.</li>
                </ol>
                <div class="tutorial-meta">
                  <span><strong>Time:</strong> 30–40 min</span>
                  <span><strong>Tools:</strong> 3 stones, strop, honing guide (optional)</span>
                  <span><strong>By:</strong> M. Osei</span>
                </div>
                <a href="#" class="btn btn-outline-amber" style="margin-top: 8px;">Read Full Tutorial</a>
              </div>
            </div>
          </div>

          <!-- Sidebar -->
          <aside class="sidebar" aria-label="Sidebar">
            <div class="sidebar-card">
              <h4>Featured Makers</h4>
              <div class="featured-maker">
                <img src="https://placehold.co/88x88/e4dccd/4a423c?text=MO&font=playfair+display" alt="Portrait of maker M. Osei" width="88" height="88">
                <div class="featured-maker-info">
                  <strong>M. Osei</strong>
                  <span>Edge tools · 14 tutorials</span>
                </div>
                <a href="#" class="featured-maker-link" aria-label="View profile of M. Osei">Profile</a>
              </div>
              <div class="featured-maker">
                <img src="https://placehold.co/88x88/e4dccd/4a423c?text=SN&font=playfair+display" alt="Portrait of maker S. Nguyen" width="88" height="88">
                <div class="featured-maker-info">
                  <strong>S. Nguyen</strong>
                  <span>Fiber arts · 9 tutorials</span>
                </div>
                <a href="#" class="featured-maker-link" aria-label="View profile of S. Nguyen">Profile</a>
              </div>
              <div class="featured-maker">
                <img src="https://placehold.co/88x88/e4dccd/4a423c?text=TR&font=playfair+display" alt="Portrait of maker T. Rivera" width="88" height="88">
                <div class="featured-maker-info">
                  <strong>T. Rivera</strong>
                  <span>Ceramics · 6 tutorials</span>
                </div>
                <a href="#" class="featured-maker-link" aria-label="View profile of T. Rivera">Profile</a>
              </div>
            </div>

            <div class="sidebar-card">
              <h4>New Tutorials</h4>
              <a href="#" class="tutorial-mini">
                <strong>Japanese pull saw basics</strong>
                <span>Tier 1 · 18 min read · By H. Park</span>
              </a>
              <a href="#" class="tutorial-mini">
                <strong>Hand-building coil pots</strong>
                <span>Tier 1 · 24 min read · By T. Rivera</span>
              </a>
              <a href="#" class="tutorial-mini">
                <strong>Basic pattern drafting for bags</strong>
                <span>Tier 2 · 32 min read · By L. Reyes</span>
              </a>
              <a href="#" class="tutorial-mini">
                <strong>French polish on small surfaces</strong>
                <span>Tier 3 · 40 min read · By M. Osei</span>
              </a>
              <a href="#" class="tutorial-mini" style="border-bottom: none;">
                <strong>Setting up a compact bench</strong>
                <span>Tier 1 · 12 min read · By A. Navarro</span>
              </a>
            </div>

            <div class="sidebar-card">
              <h4>Event Calendar</h4>
              <div class="event-item">
                <span class="event-date">Mar 14 · 6pm GMT</span>
                <strong>Webinar: Sharpening 101 with M. Osei</strong>
                <span>Live Q&A · 45 min · Free</span>
              </div>
              <div class="event-item">
                <span class="event-date">Apr 2 · 10am GMT</span>
                <strong>Spring Make-Along: Keepsake Box</strong>
                <span>4-week cohort · Register by Mar 28</span>
              </div>
              <div class="event-item" style="border-bottom: none;">
                <span class="event-date">Apr 18 · 2pm GMT</span>
                <strong>Community Critique Session</strong>
                <span>Submit a project photo to get feedback</span>
              </div>
            </div>
          </aside>
        </div>
      </div>
    </section>

    <!-- ===== COMMUNITY GALLERY (interactive lightbox) ===== -->
    <section class="section section-alt" id="gallery" aria-labelledby="gallery-title">
      <div class="container">
        <div class="section-head">
          <span class="section-label">Community gallery</span>
          <h2 id="gallery-title">Share Your Work</h2>
          <p>
            The gallery is where projects become conversations. Click any image to open it in a viewer,
            read the maker's notes, and leave a rating. If you've finished a project this week, Post Work
            — we'd love to feature it in a future showcase.
          </p>
        </div>

        <div class="gallery-grid" id="gallery-grid" role="list">
          <!-- populated by JS, but we provide static examples for reliability -->
        </div>

        <div style="margin-top: 28px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
          <a href="#" class="btn btn-primary">Post Work</a>
          <span style="font-size: 0.88rem; color: var(--color-ink-faint);">
            <span id="gallery-count">0</span> projects shared this month
          </span>
        </div>
      </div>
    </section>

    <!-- ===== TESTIMONIALS ===== -->
    <section class="section" aria-labelledby="testimonials-title">
      <div class="container">
        <div class="section-head" style="text-align: center;">
          <span class="section-label" style="justify-content: center;">What makers say</span>
          <h2 id="testimonials-title">Built by the community, for the community</h2>
          <p style="margin-inline: auto; text-align: center;">
            We don't run workshops — we host them. Every tutorial, guide, and gallery feature starts with
            a maker willing to document their process. Here's what that looks like in practice.
          </p>
        </div>

        <div class="testimonials-grid">
          <div class="testimonial-card">
            <div class="testimonial-stars" aria-label="5 out of 5 stars">★★★★★</div>
            <p class="testimonial-text">
              "I'd been turning bowls for two years and still couldn't reliably catch a clean rim. The
              sharpening tutorial changed my whole approach — not just the tool, but how I think about
              reading grain."
            </p>
            <div class="testimonial-author">
              <img src="https://placehold.co/80x80/e4dccd/4a423c?text=JM&font=playfair+display" alt="Portrait of J. Mbeki" width="80" height="80">
              <div>
                <strong>J. Mbeki</strong>
                <span>Woodturner · 18 months with MakerHands</span>
              </div>
            </div>
          </div>

          <div class="testimonial-card">
            <div class="testimonial-stars" aria-label="5 out of 5 stars">★★★★★</div>
            <p class="testimonial-text">
              "The material guides are the first thing I send friends who ask 'what should I buy?'. The
              fiber guide alone saved me from three failed macramé pieces — I finally understood cord
              diameter versus knot size."
            </p>
            <div class="testimonial-author">
              <img src="https://placehold.co/80x80/e4dccd/4a423c?text=EC&font=playfair+display" alt="Portrait of E. Cho" width="80" height="80">
              <div>
                <strong>E. Cho</strong>
                <span>Fiber artist · 2 years with MakerHands</span>
              </div>
            </div>
          </div>

          <div class="testimonial-card">
            <div class="testimonial-stars" aria-label="5 out of 5 stars">★★★★☆</div>
            <p class="testimonial-text">
              "I joined for the pattern drafting tutorial and stayed for the community crit sessions. Getting
              structured feedback on a bag I'd spent 60 hours on — from makers who actually understand
              seam allowance — was invaluable."
            </p>
            <div class="testimonial-author">
              <img src="https://placehold.co/80x80/e4dccd/4a423c?text=PR&font=playfair+display" alt="Portrait of P. Ruiz" width="80" height="80">
              <div>
                <strong>P. Ruiz</strong>
                <span>Soft goods maker · 1 year with MakerHands</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ===== FAQ ===== -->
    <section class="section section-alt" id="faq" aria-labelledby="faq-title">
      <div class="container">
        <div class="section-head">
          <span class="section-label">Good to know</span>
          <h2 id="faq-title">Frequently Asked Questions</h2>
          <p>
            New to the community, or just want to understand how skill progression works? These answers
            cover the most common questions about posting projects, choosing a tier, and getting supplies.
          </p>
        </div>

        <div class="faq-list" id="faq-list">
          <div class="faq-item">
            <button class="faq-btn" aria-expanded="false" aria-controls="faq-1">
              <span>How do I post a project to the gallery?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-answer" id="faq-1" role="region">
              <p>
                Hit <strong>Post Work</strong> in the header or gallery section, then upload at least one
                clear photo of the finished piece — we recommend a shot showing the full project and one
                close-up that reveals a detail or join. Add a short build note, list your materials, and
                choose a skill tier. The community can then rate and comment.
              </p>
              <p>
                You'll need a free account to post, but browsing and downloading guides is open to everyone.
              </p>
            </div>
          </div>

          <div class="faq-item">
            <button class="faq-btn" aria-expanded="false" aria-controls="faq-2">
              <span>What are the skill tiers and how do they work?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-answer" id="faq-2" role="region">
              <p>
                We use eight tiers, from <strong>Tier 1 (Getting Started)</strong> through <strong>Tier 8
                (Specialty Mastery)</strong>. Each tutorial and project is tagged with the tier it best fits,
                based on tool complexity, material handling, and expected precision. Tiers are descriptive,
                not prescriptive — they help you find work that matches your current confidence level.
              </p>
              <p>
                You can self-assess or let a mentor from the community suggest a starting tier during a
                critique session.
              </p>
            </div>
          </div>

          <div class="faq-item">
            <button class="faq-btn" aria-expanded="false" aria-controls="faq-3">
              <span>How do material guides help with project planning?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-answer" id="faq-3" role="region">
              <p>
                Good <strong>project planning</strong> starts before you touch a tool. Our material guides tell
                you what to buy, how much to buy, how to prep it, and what typically goes wrong — so you can
                price the project, schedule the work, and avoid a mid-build surprise.
              </p>
              <p>
                Each guide includes a printable one-page summary you can tack up in the shop or bring to a
                supplier.
              </p>
            </div>
          </div>

          <div class="faq-item">
            <button class="faq-btn" aria-expanded="false" aria-controls="faq-4">
              <span>Can I suggest a tutorial or request a material guide?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-answer" id="faq-4" role="region">
              <p>
                Absolutely. Every guide and tutorial page has a <strong>"Suggest a topic"</strong> link. The
                team reviews requests weekly and prioritizes based on community interest and available
                expertise. If you're a practicing maker, we're also always looking for new contributors —
                get in touch through the About page.
              </p>
            </div>
          </div>

          <div class="faq-item">
            <button class="faq-btn" aria-expanded="false" aria-controls="faq-5">
              <span>Where can I get supplies mentioned in the guides?</span>
              <span class="faq-icon" aria-hidden="true">+</span>
            </button>
            <div class="faq-answer" id="faq-5" role="region">
              <p>
                Use the <strong>Get Supplies</strong> button — it opens a curated list of trusted suppliers
                for the materials in that guide, with typical price ranges andnotes on what to look for.
                We don't sell materials ourselves; we point you to sources our community trusts.
              </p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- ===== CTA BAND ===== -->
    <section class="cta-band" id="supplies" aria-labelledby="cta-title">
      <div class="container">
        <h2 id="cta-title">Start your next project with the right <em>materials</em> and a clear plan.</h2>
        <p>
          Browse material guides, read a tutorial matched to your skill tier, and join a community that
          actually gives useful feedback. Everything here is free to browse — Post Work when you're ready.
        </p>
        <div style="display: flex; gap: 12px; flex-wrap: wrap;">
          <a href="#guides" class="btn btn-primary">Explore Material Guides</a>
          <a href="#gallery" class="btn cta-secondary">Post Work</a>
        </div>
      </div>
    </section>
  </main>

  <!-- ===== FOOTER ===== -->
  <footer class="site-footer" role="contentinfo">
    <div class="container">
      <div class="footer-grid">
        <div class="footer-brand">
          <a href="#" class="brand" style="margin-bottom: 4px;">
            <span class="brand-logo" aria-hidden="true">
              <img src="https://placehold.co/84x84/e4dccd/4a423c?text=MH&font=playfair+display" alt="MakerHands Collective logo mark" width="84" height="84">
            </span>
            <span class="brand-text">
              <span class="brand-name">MakerHands Collective</span>
              <span class="brand-tagline">Where curiosity becomes craft</span>
            </span>
          </a>
          <p>
            A community and resource hub for makers, crafters, and DIY enthusiasts.
            Tutorials, material guides, and a gallery to share your progress — since 2019.
          </p>
          <div class="footer-social">
            <a href="#" aria-label="Follow us on Instagram">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="2" y="2" width="20" height="20" rx="5" ry="5"/><path d="M16 11.37A5.3 5.3 0 0 0 16 8.3a5.5 5.5 0 0 0-3.5-5.1 5.5 5.5 0 0 0-5.1 3.5A5.3 5.3 0 0 0 8.3 11.37"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2z"/></svg>
            </a>
            <a href="#" aria-label="Follow us on YouTube">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22.54 6.42a2.78 2.78 0 0 0-1.94-1.97C18.88 4 12 4 12 4s-6.88 0-8.6.46a2.78 2.78 0 0 0-1.94 1.97C1 8.02 1 12 1 12s0 3.98.46 5.58a2.78 2.78 0 0 0 1.94 1.97C5.12 16 12 16 12 16s6.88 0 8.6-.46a2.78 2.78 0 0 0 1.94-1.97C23 15.98 23 12 23 12s0-3.98-.46-5.58z"/><polygon points="9.75 14.25 15.75 12 9.75 9.75 9.75 14.25"/></svg>
            </a>
            <a href="#" aria-label="Follow us on Pinterest">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 2C6.48 2 2 6.48 2 12c0 4.25 2.65 7.88 6.39 9.31-.08-.78-.13-1.96.08-2.67.21-.72 1.24-5.37 1.24-5.37s.68-.24.68-.87c0-.68-.38-.87-.38-.87.69-.28 1.05-.94 1.05-1.87 0-1.87-1.46-2.76-3.2-2.76-2.04 0-3.08 1.33-3.08 3.05 0 .28.19.62.62.69.19.02.42-.14.62-.69 0-1.72-1.64-2.65-3.65-2.65-2.42 0-3.96 1.62-3.96 3.92 0 2.28 1.44 3.65 3.92 3.92.28 0 .62-.14.87-.69 1.05 1.17 2.65 1.85 3.92 1.85 1.87 0 2.76-.78 2.76-2.76 0-1.87-.78-2.76-2.76-2.76-.62 0-1.05.14-1.46.42.38.62.62 1.46.62 2.48 0 2.76-1.46 3.65-3.92 3.65-1.87 0-3.2-1.17-3.2-3.05 0-.28.19-.62.69-.62.19 0 .5.14.5.5 0 1.17-.68 1.85-1.05 1.85-.28 0-.68.14-.68.68 0 .68.38.87.38.87.68.28 1.05.94 1.05 1.87 0 1.87 1.46 2.76 3.2 2.76 2.04 0 3.08-1.33 3.08-3.05 0-.28-.19-.62-.69-.69-.19 0-.62.14-.62.62 0 1.87 1.46 2.65 3.65 2.65 2.42 0 3.96-1.62 3.96-3.92 0-2.28-1.44-3.65-3.92-3.65-.28 0-.62.14-.87.69-1.05-1.17-2.65-1.85-3.92-1.85-1.87 0-2.76.78-2.76 2.76 0 1.87.78 2.76 2.76 2.76.62 0 1.05-.14 1.46-.42-.38-.62-.62-1.46-.62-2.48 0-2.76 1.46-3.65 3.92-3.65 1.87 0 3.2 1.17 3.2 3.05 0 .28-.19.62-.69.62z"/></svg>
            </a>
            <a href="#" aria-label="Follow us on X / Twitter">
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 4l16 16M4 20L20 4"/></svg>
            </a>
          </div>
        </div>

        <div class="footer-col">
          <h5>Explore</h5>
          <ul>
            <li><a href="#showcase">Project Showcase</a></li>
            <li><a href="#guides">Material Guides</a></li>
            <li><a href="#tutorials">Craft Tutorials</a></li>
            <li><a href="#gallery">Community Gallery</a></li>
            <li><a href="#faq">FAQ</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h5>Community</h5>
          <ul>
            <li><a href="#">Post Work</a></li>
            <li><a href="#">Become a Contributor</a></li>
            <li><a href="#">Critique Sessions</a></li>
            <li><a href="#">Webinars</a></li>
            <li><a href="#">Skill Tiers</a></li>
          </ul>
        </div>

        <div class="footer-col">
          <h5>Connect</h5>
          <ul>
            <li><a href="mailto:hello@makerhands.example">hello@makerhands.example</a></li>
            <li><a href="tel:+18005550182">+1 (800) 555-0182</a></li>
            <li><a href="#">142 Maker Row, Portland, OR 97201</a></li>
            <li><a href="#">Newsletter</a></li>
            <li><a href="#">Accessibility</a></li>
          </ul>
        </div>
      </div>

      <div class="footer-bottom">
        <span>&copy; 2026 MakerHands Collective. All rights reserved.</span>
        <span>
          <a href="#">Privacy Policy</a> &nbsp;·&nbsp;
          <a href="#">Terms of Service</a> &nbsp;·&nbsp;
          <a href="#">Cookie Settings</a>
        </span>
      </div>
    </div>
  </footer>

  <!-- ===== LIGHTBOX ===== -->
  <div class="gallery-lightbox" id="gallery-lightbox" role="dialog" aria-modal="true" aria-label="Image viewer" hidden>
    <button class="gallery-lightbox-close" id="gallery-lightbox-close" aria-label="Close image viewer">✕</button>
    <img id="gallery-lightbox-img" src="" alt="">
    <div class="gallery-lightbox-caption" id="gallery-lightbox-caption"></div>
  </div>

  <script>
    (function () {
      'use strict';

      // ===== Mobile nav toggle =====
      const toggle = document.querySelector('.nav-toggle');
      const mobileNav = document.getElementById('nav-mobile');
      if (toggle && mobileNav) {
        toggle.addEventListener('click', function () {
          const open = this.getAttribute('aria-expanded') === 'true';
          this.setAttribute('aria-expanded', String(!open));
          mobileNav.classList.toggle('open', !open);
          if (!open) {
            mobileNav.querySelector('.nav-list a:first-child').focus();
          } else {
            this.focus();
          }
        });
        mobileNav.addEventListener('click', function (e) {
          if (e.target.closest('a')) {
            toggle.setAttribute('aria-expanded', 'false');
            mobileNav.classList.remove('open');
          }
        });
      }

      // ===== FAQ accordion =====
      const faqItems = document.querySelectorAll('.faq-item');
      faqItems.forEach(function (item) {
        const btn = item.querySelector('.faq-btn');
        btn.addEventListener('click', function () {
          const isActive = item.classList.contains('active');
          faqItems.forEach(function (other) {
            other.classList.remove('active');
            other.querySelector('.faq-btn').setAttribute('aria-expanded', 'false');
          });
          if (!isActive) {
            item.classList.add('active');
            btn.setAttribute('aria-expanded', 'true');
          }
        });
      });

      // ===== Gallery with lightbox =====
      const galleryGrid = document.getElementById('gallery-grid');
      const lightbox = document.getElementById('gallery-lightbox');
      const lightboxImg = document.getElementById('gallery-lightbox-img');
      const lightboxCaption = document.getElementById('gallery-lightbox-caption');
      const lightboxClose = document.getElementById('gallery-lightbox-close');
      const galleryCount = document.getElementById('gallery-count');

      const galleryData = [
        {
          src: 'https://placehold.co/600x600/d9c8a8/4a423c?text=Hand+cut+dovetail+box&font=lato',
          caption: 'Hand-cut dovetail keepsake box — A. Navarro'
        },
        {
          src: 'https://placehold.co/600x600/c9d8cf/4a423c?text=Macrame+wall+hanging&font=lato',
          caption: 'Geometric macramé wall hanging — L. Reyes'
        },
        {
          src: 'https://placehold.co/600x600/ddd2c2/4a423c?text=Ceramic+molds&font=lato',
          caption: 'Modular plaster molds — P. Kim'
        },
        {
          src: 'https://placehold.co/600x600/e2d9c8/4a423c?text=Crochet+market+bag&font=lato',
          caption: 'Crocheted market bag with reinforced handles — S. Nguyen'
        },
        {
          src: 'https://placehold.co/600x600/cfc8b8/4a423c?text=Turning+green+wood+bowl&font=lato',
          caption: 'Green wood bowl after roughing — J. Mbeki'
        },
        {
          src: 'https://placehold.co/600x600/d8d0c0/4a423c?text=Binding+new+sketchbook&font=lato',
          caption: 'Hand-bound sketchbook with linen spine — E. Cho'
        },
        {
          src: 'https://placehold.co/600x600/cdcbc0/4a423c?text=Mini+print+edition&font=lato',
          caption: 'Letterpress mini edition — P. Ruiz'
        },
        {
          src: 'https://placehold.co/600x600/e0d3c4/4a423c?text=Leather+tool+roll&font=lato',
          caption: 'Tooled leather tool roll — H. Park'
        }
      ];

      function renderGallery() {
        if (!galleryGrid) return;
        let html = '';
        galleryData.forEach(function (item, idx) {
          html += '<div class="gallery-cell" role="listitem" tabindex="0" data-index="' + idx + '" aria-label="' + item.caption + '">';
          html += '<img src="' + item.src + '" alt="' + item.caption + '" loading="lazy">';
          html += '<div class="gallery-overlay"><span>' + item.caption.split(' — ')[0] + '</span><small>Click to view</small></div>';
          html += '</div>';
        });
        galleryGrid.innerHTML = html;
        if (galleryCount) galleryCount.textContent = galleryData.length;

        // Attach open handlers
        galleryGrid.querySelectorAll('.gallery-cell').forEach(function (cell) {
          cell.addEventListener('click', function () {
            const idx = parseInt(this.getAttribute('data-index'), 10);
            openLightbox(idx);
          });
          cell.addEventListener('keydown', function (e) {
            if (e.key === 'Enter' || e.key === ' ') {
              e.preventDefault();
              const idx = parseInt(this.getAttribute('data-index'), 10);
              openLightbox(idx);
            }
          });
        });
      }

      function openLightbox(idx) {
        if (!galleryData[idx]) return;
        lightboxImg.src = galleryData[idx].src;
        lightboxImg.alt = galleryData[idx].caption;
        lightboxCaption.textContent = galleryData[idx].caption;
        lightbox.hidden = false;
        lightbox.classList.add('open');
        lightboxClose.focus();
        document.body.style.overflow = 'hidden';
      }

      function closeLightbox() {
        lightbox.classList.remove('open');
        lightbox.hidden = true;
        lightboxImg.src = '';
        document.body.style.overflow = '';
        // return focus to the cell that opened it
        const activeIdx = lightboxImg.getAttribute('data-index');
        if (activeIdx !== null) {
          const cell = galleryGrid.querySelector('.gallery-cell[data-index="' + activeIdx + '"]');
          if (cell) cell.focus();
        }
      }

      if (lightboxClose) {
        lightboxClose.addEventListener('click', closeLightbox);
      }
      if (lightbox) {
        lightbox.addEventListener('click', function (e) {
          if (e.target === lightbox) closeLightbox();
        });
        document.addEventListener('keydown', function (e) {
          if (e.key === 'Escape' && !lightbox.hidden) closeLightbox();
        });
      }

      // ===== Smooth scroll for in-page anchors (progressive enhancement) =====
      document.querySelectorAll('a[href^="#"]').forEach(function (link) {
        link.addEventListener('click', function (e) {
          const id = this.getAttribute('href').slice(1);
          if (!id) return;
          const target = document.getElementById(id);
          if (!target) return;
          e.preventDefault();
          const navHeight = 80;
          const top = target.getBoundingClientRect().top + window.pageYOffset - navHeight;
          window.scrollTo({ top: top, behavior: 'smooth' });
          history.replaceState(null, '', '#' + id);
          // update active nav
          document.querySelectorAll('.nav-list a').forEach(function (a) {
            a.classList.toggle('active', a.getAttribute('href') === '#' + id);
          });
          target.setAttribute('tabindex', '-1');
          target.focus({ preventScroll: true });
        });
      });

      renderGallery();
    })();
  </script>
</body>
</html>
View Axe Report (JSON)
{
  "testEngine": {
    "name": "axe-core",
    "version": "4.10.2"
  },
  "testRunner": {
    "name": "axe"
  },
  "testEnvironment": {
    "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) HeadlessChrome/156.0.8078.4 Safari/537.36",
    "windowWidth": 1280,
    "windowHeight": 720,
    "orientationAngle": 0,
    "orientationType": "landscape-primary"
  },
  "timestamp": "2026-11-12T09:50:16.698Z",
  "url": "https://benchmark.aimac.invalid/7f7dabbc46776e8701448a1d5e9029e62378a63e56b3ede5e7996e92428b185b.html",
  "toolOptions": {
    "runOnly": {
      "type": "tag",
      "values": [
        "wcag2a",
        "wcag2aa",
        "wcag21a",
        "wcag21aa",
        "wcag22a",
        "wcag22aa"
      ]
    },
    "resultTypes": [
      "violations"
    ],
    "reporter": "v1"
  },
  "inapplicable": [
    {
      "id": "area-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure <area> elements of image maps have alternative text",
      "help": "Active <area> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/area-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-braille-equivalent",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-braillelabel and aria-brailleroledescription have a non-braille equivalent",
      "help": "aria-braille attributes must have a non-braille equivalent",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-braille-equivalent?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-command-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA button, link and menuitem has an accessible name",
      "help": "ARIA commands must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-command-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-input-field-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure every ARIA input field has an accessible name",
      "help": "ARIA input fields must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-input-field-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-meter-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA meter node has an accessible name",
      "help": "ARIA meter nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-meter-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-progressbar-name",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag111",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure every ARIA progressbar node has an accessible name",
      "help": "ARIA progressbar nodes must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-progressbar-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "aria-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": "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": []
    },
    {
      "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": "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": []
    },
    {
      "id": "marquee",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag222",
        "TTv5",
        "TT2.b",
        "EN-301-549",
        "EN-9.2.2.2"
      ],
      "description": "Ensure <marquee> elements are not used",
      "help": "<marquee> elements are deprecated and must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/marquee?application=axeAPI",
      "nodes": []
    },
    {
      "id": "meta-refresh",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag221",
        "TTv5",
        "TT8.a",
        "EN-301-549",
        "EN-9.2.2.1"
      ],
      "description": "Ensure <meta http-equiv=\"refresh\"> is not used for delayed refresh",
      "help": "Delayed refresh under 20 hours must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-refresh?application=axeAPI",
      "nodes": []
    },
    {
      "id": "object-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "EN-301-549",
        "EN-9.1.1.1"
      ],
      "description": "Ensure <object> elements have alternative text",
      "help": "<object> elements must have alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/object-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "role-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure [role=\"img\"] elements have alternative text",
      "help": "[role=\"img\"] elements must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/role-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "scrollable-region-focusable",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag211",
        "wcag213",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1",
        "EN-9.2.1.3"
      ],
      "description": "Ensure elements that have scrollable content are accessible by keyboard",
      "help": "Scrollable region must have keyboard access",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/scrollable-region-focusable?application=axeAPI",
      "nodes": []
    },
    {
      "id": "select-name",
      "impact": null,
      "tags": [
        "cat.forms",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.n",
        "TTv5",
        "TT5.c",
        "EN-301-549",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure select element has an accessible name",
      "help": "Select element must have an accessible name",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/select-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "server-side-image-map",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag211",
        "section508",
        "section508.22.f",
        "TTv5",
        "TT4.a",
        "EN-301-549",
        "EN-9.2.1.1"
      ],
      "description": "Ensure that server-side image maps are not used",
      "help": "Server-side image maps must not be used",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/server-side-image-map?application=axeAPI",
      "nodes": []
    },
    {
      "id": "summary-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure summary elements have discernible text",
      "help": "Summary elements must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/summary-name?application=axeAPI",
      "nodes": []
    },
    {
      "id": "svg-img-alt",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag111",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT7.a",
        "EN-301-549",
        "EN-9.1.1.1",
        "ACT"
      ],
      "description": "Ensure <svg> elements with an img, graphics-document or graphics-symbol role have an accessible text",
      "help": "<svg> elements with an img role must have an alternative text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/svg-img-alt?application=axeAPI",
      "nodes": []
    },
    {
      "id": "td-headers-attr",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that each cell in a table that uses the headers attribute refers only to other cells in that table",
      "help": "Table cells that use the headers attribute must only refer to cells in the same table",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/td-headers-attr?application=axeAPI",
      "nodes": []
    },
    {
      "id": "th-has-data-cells",
      "impact": null,
      "tags": [
        "cat.tables",
        "wcag2a",
        "wcag131",
        "section508",
        "section508.22.g",
        "TTv5",
        "TT14.b",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that <th> elements and elements with role=columnheader/rowheader have data cells they describe",
      "help": "Table headers in a data table must refer to data cells",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/th-has-data-cells?application=axeAPI",
      "nodes": []
    },
    {
      "id": "valid-lang",
      "impact": null,
      "tags": [
        "cat.language",
        "wcag2aa",
        "wcag312",
        "TTv5",
        "TT11.b",
        "EN-301-549",
        "EN-9.3.1.2",
        "ACT"
      ],
      "description": "Ensure lang attributes have valid values",
      "help": "lang attribute must have a valid value",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/valid-lang?application=axeAPI",
      "nodes": []
    },
    {
      "id": "video-caption",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag122",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT17.a",
        "EN-301-549",
        "EN-9.1.2.2"
      ],
      "description": "Ensure <video> elements have captions",
      "help": "<video> elements must have captions",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/video-caption?application=axeAPI",
      "nodes": []
    },
    {
      "id": "no-autoplay-audio",
      "impact": null,
      "tags": [
        "cat.time-and-media",
        "wcag2a",
        "wcag142",
        "TTv5",
        "TT2.a",
        "EN-301-549",
        "EN-9.1.4.2",
        "ACT"
      ],
      "description": "Ensure <video> or <audio> elements do not autoplay audio for more than 3 seconds without a control mechanism to stop or mute the audio",
      "help": "<video> or <audio> elements must not play automatically",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/no-autoplay-audio?application=axeAPI",
      "nodes": []
    }
  ],
  "passes": [
    {
      "id": "aria-allowed-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure an element's role supports its ARIA attributes",
      "help": "Elements must only use supported ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-allowed-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-allowed-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attributes are used correctly for the defined role"
            }
          ],
          "none": [
            {
              "id": "aria-unsupported-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute is supported"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"brand\" aria-label=\"MakerHands Collective home\">",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-conditional-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are used as described in the specification of the element's role",
      "help": "ARIA attributes must be used as specified for the element's role",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-conditional-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-conditional-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"brand\" aria-label=\"MakerHands Collective home\">",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"]"
          ]
        }
      ]
    },
    {
      "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": "<header class=\"site-header\" role=\"banner\">",
          "target": [
            "header"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-body",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag131",
        "wcag412",
        "EN-301-549",
        "EN-9.1.3.1",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden=\"true\" is not present on the document body.",
      "help": "aria-hidden=\"true\" must not be present on the document body",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-body?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-hidden-body",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "No aria-hidden attribute is present on document body"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<body>",
          "target": [
            "body"
          ]
        }
      ]
    },
    {
      "id": "aria-hidden-focus",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure aria-hidden elements are not focusable nor contain focusable elements",
      "help": "ARIA hidden element must not be focusable or contain focusable elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-hidden-focus?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "focusable-modal-open",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements while a modal is open"
            },
            {
              "id": "focusable-disabled",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            },
            {
              "id": "focusable-not-tabbable",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "No focusable elements contained within element"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<span class=\"brand-logo\" aria-hidden=\"true\">\n          <img src=\"https://placehold.co/84x84/e4dccd/4a423c?text=MH&amp;font=playfair+display\" alt=\"MakerHands Collective logo mark\" width=\"84\" height=\"84\">\n        </span>",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"] > .brand-logo[aria-hidden=\"true\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "ARIA attribute is allowed"
            }
          ],
          "impact": null,
          "html": "<a href=\"#\" class=\"brand\" aria-label=\"MakerHands Collective home\">",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"]"
          ]
        }
      ]
    },
    {
      "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": "<header class=\"site-header\" role=\"banner\">",
          "target": [
            "header"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-required-children",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Required ARIA children are present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"hero-stats\" role=\"list\">",
          "target": [
            ".hero-stats"
          ]
        }
      ]
    },
    {
      "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": [
        {
          "any": [
            {
              "id": "aria-required-parent",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "Required ARIA parent role present"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<div class=\"hero-stat\" role=\"listitem\">\n              <span class=\"hero-stat-number\">640+</span>\n              <span class=\"hero-stat-label\">Tutorials published</span>\n            </div>",
          "target": [
            ".hero-stat[role=\"listitem\"]:nth-child(1)"
          ]
        }
      ]
    },
    {
      "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": "<header class=\"site-header\" role=\"banner\">",
          "target": [
            "header"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr-value",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure all ARIA attributes have valid values",
      "help": "ARIA attributes must conform to valid values",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr-value?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [
            {
              "id": "aria-valid-attr-value",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute values are valid"
            },
            {
              "id": "aria-errormessage",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-errormessage exists and references elements visible to screen readers that use a supported aria-errormessage technique"
            },
            {
              "id": "aria-level",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "aria-level values are valid"
            }
          ],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"brand\" aria-label=\"MakerHands Collective home\">",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"]"
          ]
        }
      ]
    },
    {
      "id": "aria-valid-attr",
      "impact": null,
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure attributes that begin with aria- are valid ARIA attributes",
      "help": "ARIA attributes must conform to valid names",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-valid-attr?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "aria-valid-attr",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "ARIA attribute name is valid"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#\" class=\"brand\" aria-label=\"MakerHands Collective home\">",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"]"
          ]
        }
      ]
    },
    {
      "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 style=\"margin-top: 32px; display: flex; gap: 12px; flex-wrap: wrap; align-items: center;\">",
          "target": [
            "#showcase > .container > div:nth-child(3)"
          ]
        }
      ]
    },
    {
      "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=\"faq-btn\" aria-expanded=\"false\" aria-controls=\"faq-1\">\n              <span>How do I post a project to the gallery?</span>\n              <span class=\"faq-icon\" aria-hidden=\"true\">+</span>\n            </button>",
          "target": [
            "button[aria-controls=\"faq-1\"]"
          ]
        }
      ]
    },
    {
      "id": "bypass",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag241",
        "section508",
        "section508.22.o",
        "TTv5",
        "TT9.a",
        "EN-301-549",
        "EN-9.2.4.1"
      ],
      "description": "Ensure each page has at least one mechanism for a user to bypass navigation and jump straight to the content",
      "help": "Page must have means to bypass repeated blocks",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/bypass?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "internal-link-present",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Valid skip link found"
            },
            {
              "id": "header-present",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<h1 id=\"hero-title\">We help makers turn <em>curiosity</em> into craft \u2014 one project at a time.</h1>",
                  "target": [
                    "#hero-title"
                  ]
                },
                {
                  "html": "<h2 id=\"showcase-title\">Project Showcase</h2>",
                  "target": [
                    "#showcase-title"
                  ]
                },
                {
                  "html": "<h3>Hand-Cut Dovetail Keepsake Box</h3>",
                  "target": [
                    "article:nth-child(1) > .showcase-body > h3"
                  ]
                },
                {
                  "html": "<h3>Geometric Macram\u00e9 Wall Hanging</h3>",
                  "target": [
                    "article:nth-child(2) > .showcase-body > h3"
                  ]
                },
                {
                  "html": "<h3>Modular Plaster Molds for repeatable forms</h3>",
                  "target": [
                    "article:nth-child(3) > .showcase-body > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"guides-title\">Material Guides</h2>",
                  "target": [
                    "#guides-title"
                  ]
                },
                {
                  "html": "<h3>Hardwoods &amp; Softwoods</h3>",
                  "target": [
                    ".guide-card:nth-child(1) > h3"
                  ]
                },
                {
                  "html": "<h3>Natural &amp; Synthetic Fibers</h3>",
                  "target": [
                    ".guide-card:nth-child(2) > h3"
                  ]
                },
                {
                  "html": "<h3>Clay Bodies &amp; Glazes</h3>",
                  "target": [
                    ".guide-card:nth-child(3) > h3"
                  ]
                },
                {
                  "html": "<h3>Paper, Board &amp; Adhesives</h3>",
                  "target": [
                    ".guide-card:nth-child(4) > h3"
                  ]
                },
                {
                  "html": "<h2 id=\"tutorial-title\">Craft Tutorials</h2>",
                  "target": [
                    "#tutorial-title"
                  ]
                },
                {
                  "html": "<h2>Sharpening Common Edge Tools to a Working Edge</h2>",
                  "target": [
                    ".tutorial-text > h2"
                  ]
                },
                {
                  "html": "<h4>Featured Makers</h4>",
                  "target": [
                    ".sidebar-card:nth-child(1) > h4"
                  ]
                },
                {
                  "html": "<h4>New Tutorials</h4>",
                  "target": [
                    ".sidebar-card:nth-child(2) > h4"
                  ]
                },
                {
                  "html": "<h4>Event Calendar</h4>",
                  "target": [
                    ".sidebar-card:nth-child(3) > h4"
                  ]
                },
                {
                  "html": "<h2 id=\"gallery-title\">Share Your Work</h2>",
                  "target": [
                    "#gallery-title"
                  ]
                },
                {
                  "html": "<h2 id=\"testimonials-title\">Built by the community, for the community</h2>",
                  "target": [
                    "#testimonials-title"
                  ]
                },
                {
                  "html": "<h2 id=\"faq-title\">Frequently Asked Questions</h2>",
                  "target": [
                    "#faq-title"
                  ]
                },
                {
                  "html": "<h2 id=\"cta-title\">Start your next project with the right <em>materials</em> and a clear plan.</h2>",
                  "target": [
                    "#cta-title"
                  ]
                },
                {
                  "html": "<h5>Explore</h5>",
                  "target": [
                    ".footer-col:nth-child(2) > h5"
                  ]
                },
                {
                  "html": "<h5>Community</h5>",
                  "target": [
                    ".footer-col:nth-child(3) > h5"
                  ]
                },
                {
                  "html": "<h5>Connect</h5>",
                  "target": [
                    ".footer-col:nth-child(4) > h5"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Page has a heading"
            },
            {
              "id": "landmark",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<main id=\"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": "#1f1a17",
                "bgColor": "#faf7f2",
                "contrastRatio": 16.12,
                "fontSize": "13.8pt (18.4px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has sufficient color contrast of 16.12"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<span class=\"brand-name\">MakerHands Collective</span>",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"] > .brand-text > .brand-name"
          ]
        }
      ]
    },
    {
      "id": "document-title",
      "impact": null,
      "tags": [
        "cat.text-alternatives",
        "wcag2a",
        "wcag242",
        "TTv5",
        "TT12.a",
        "EN-301-549",
        "EN-9.2.4.2",
        "ACT"
      ],
      "description": "Ensure each HTML document contains a non-empty <title> element",
      "help": "Documents must have <title> element to aid in navigation",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/document-title?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "doc-has-title",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Document has a non-empty <title> element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<html lang=\"en\">",
          "target": [
            "html"
          ]
        }
      ]
    },
    {
      "id": "duplicate-id-aria",
      "impact": null,
      "tags": [
        "cat.parsing",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure every id attribute value used in ARIA and in labels is unique",
      "help": "IDs used in ARIA and labels must be unique",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/duplicate-id-aria?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "duplicate-id-aria",
              "data": "nav-mobile",
              "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-mobile\" id=\"nav-mobile\" aria-label=\"Mobile navigation\">",
          "target": [
            "#nav-mobile"
          ]
        }
      ]
    },
    {
      "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/800x600/e4dccd/4a423c?text=Workshop+bench+%7C+Hand+tools+%26+material+layout&amp;font=playfair+display\" alt=\"A well-lit workshop bench with hand tools, wood blanks, and material samples arranged for a project\" width=\"800\" height=\"600\">",
          "target": [
            "img[width=\"800\"]"
          ]
        }
      ]
    },
    {
      "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",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<span style=\"font-size: 0.88rem; color: var(--color-ink-faint);\">Or browse the full <a href=\"#gallery\" style=\"color: var(--color-amber-deep); font-weight: 600;\">Community Gallery</a></span>",
                  "target": [
                    "#showcase > .container > div:nth-child(3) > span"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text in some way other than by color"
            },
            {
              "id": "link-in-text-block-style",
              "data": null,
              "relatedNodes": [
                {
                  "html": "<span style=\"font-size: 0.88rem; color: var(--color-ink-faint);\">Or browse the full <a href=\"#gallery\" style=\"color: var(--color-amber-deep); font-weight: 600;\">Community Gallery</a></span>",
                  "target": [
                    "#showcase > .container > div:nth-child(3) > span"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Links can be distinguished from surrounding text by visual styling"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a href=\"#gallery\" style=\"color: var(--color-amber-deep); font-weight: 600;\">Community Gallery</a>",
          "target": [
            "span > a[href$=\"#gallery\"]"
          ]
        }
      ]
    },
    {
      "id": "link-name",
      "impact": null,
      "tags": [
        "cat.name-role-value",
        "wcag2a",
        "wcag244",
        "wcag412",
        "section508",
        "section508.22.a",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.2.4.4",
        "EN-9.4.1.2",
        "ACT"
      ],
      "description": "Ensure links have discernible text",
      "help": "Links must have discernible text",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/link-name?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "has-visible-text",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element has text that is visible to screen readers"
            }
          ],
          "all": [],
          "none": [
            {
              "id": "focusable-no-name",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element is not in tab order or has accessible text"
            }
          ],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    },
    {
      "id": "list",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure that lists are structured correctly",
      "help": "<ul> and <ol> must only directly contain <li>, <script> or <template> elements",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/list?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "only-listitems",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List element only has direct children that are allowed inside <li> elements"
            }
          ],
          "impact": null,
          "html": "<ul class=\"nav-list\">",
          "target": [
            ".nav-desktop > .nav-list"
          ]
        }
      ]
    },
    {
      "id": "listitem",
      "impact": null,
      "tags": [
        "cat.structure",
        "wcag2a",
        "wcag131",
        "EN-301-549",
        "EN-9.1.3.1"
      ],
      "description": "Ensure <li> elements are used semantically",
      "help": "<li> elements must be contained in a <ul> or <ol>",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/listitem?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "listitem",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "List item has a <ul>, <ol> or role=\"list\" parent element"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<li><a href=\"#showcase\" class=\"active\">Project Showcase</a></li>",
          "target": [
            ".nav-desktop > .nav-list > li:nth-child(1)"
          ]
        }
      ]
    },
    {
      "id": "meta-viewport",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag2aa",
        "wcag144",
        "EN-301-549",
        "EN-9.1.4.4",
        "ACT"
      ],
      "description": "Ensure <meta name=\"viewport\"> does not disable text scaling and zooming",
      "help": "Zooming and scaling must not be disabled",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/meta-viewport?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "meta-viewport",
              "data": null,
              "relatedNodes": [],
              "impact": "critical",
              "message": "<meta> tag does not disable zooming on mobile devices"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">",
          "target": [
            "meta[name=\"viewport\"]"
          ]
        }
      ]
    },
    {
      "id": "nested-interactive",
      "impact": null,
      "tags": [
        "cat.keyboard",
        "wcag2a",
        "wcag412",
        "TTv5",
        "TT6.a",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure interactive controls are not nested as they are not always announced by screen readers or can cause focus problems for assistive technologies",
      "help": "Interactive controls must not be nested",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/nested-interactive?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "no-focusable-content",
              "data": null,
              "relatedNodes": [],
              "impact": "serious",
              "message": "Element does not have focusable descendants"
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<img src=\"https://placehold.co/800x600/e4dccd/4a423c?text=Workshop+bench+%7C+Hand+tools+%26+material+layout&amp;font=playfair+display\" alt=\"A well-lit workshop bench with hand tools, wood blanks, and material samples arranged for a project\" width=\"800\" height=\"600\">",
          "target": [
            "img[width=\"800\"]"
          ]
        }
      ]
    },
    {
      "id": "target-size",
      "impact": null,
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "minSize": 24,
                "width": 177.9,
                "height": 43
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Control has sufficient size (177.9px by 43px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 24,
                "minOffset": 24
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "Target has sufficient space from its closest neighbors. Safe clickable space has a diameter of 24px which is at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": null,
          "html": "<a class=\"skip-link\" href=\"#main\">Skip to main content</a>",
          "target": [
            ".skip-link"
          ]
        }
      ]
    }
  ],
  "incomplete": [
    {
      "id": "aria-prohibited-attr",
      "impact": "serious",
      "tags": [
        "cat.aria",
        "wcag2a",
        "wcag412",
        "EN-301-549",
        "EN-9.4.1.2"
      ],
      "description": "Ensure ARIA attributes are not prohibited for an element's role",
      "help": "Elements must only use permitted ARIA attributes",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/aria-prohibited-attr?application=axeAPI",
      "nodes": [
        {
          "any": [],
          "all": [],
          "none": [
            {
              "id": "aria-prohibited-attr",
              "data": {
                "role": null,
                "nodeName": "div",
                "messageKey": "noRoleSingular",
                "prohibited": [
                  "aria-label"
                ]
              },
              "relatedNodes": [],
              "impact": "serious",
              "message": "aria-label attribute is not well supported on a div with no valid role attribute."
            }
          ],
          "impact": "serious",
          "html": "<div class=\"testimonial-stars\" aria-label=\"5 out of 5 stars\">\u2605\u2605\u2605\u2605\u2605</div>",
          "target": [
            ".testimonial-card:nth-child(1) > .testimonial-stars[aria-label=\"5 out of 5 stars\"]"
          ],
          "failureSummary": "Fix all of the following:\n  aria-label attribute is not well supported on a div with no valid role attribute."
        }
      ]
    },
    {
      "id": "color-contrast",
      "impact": "serious",
      "tags": [
        "cat.color",
        "wcag2aa",
        "wcag143",
        "TTv5",
        "TT13.c",
        "EN-301-549",
        "EN-9.1.4.3",
        "ACT"
      ],
      "description": "Ensure the contrast between foreground and background colors meets WCAG 2 AA minimum contrast ratio thresholds",
      "help": "Elements must meet minimum color contrast ratio thresholds",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/color-contrast?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#f3ece3",
                "contrastRatio": 3.97,
                "fontSize": "10.6pt (14.08px)",
                "fontWeight": "normal",
                "messageKey": "shortTextContent",
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"gallery\" aria-labelledby=\"gallery-title\">",
                  "target": [
                    "#gallery"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element content is too short to determine if it is actual text content"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span id=\"gallery-count\">8</span>",
          "target": [
            "#gallery-count"
          ],
          "failureSummary": "Fix any of the following:\n  Element content is too short to determine if it is actual text content"
        }
      ]
    }
  ],
  "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": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header\" role=\"banner\">",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"brand-tagline\">Where curiosity becomes craft</span>",
          "target": [
            "a[aria-label=\"MakerHands Collective home\"] > .brand-text > .brand-tagline"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 8.6pt (11.52px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "10.8pt (14.4px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<header class=\"site-header\" role=\"banner\">",
                  "target": [
                    "header"
                  ]
                },
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#showcase\" class=\"active\">Project Showcase</a>",
          "target": [
            ".nav-desktop > .nav-list > li:nth-child(1) > .active[href$=\"#showcase\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 10.8pt (14.4px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c8813a",
                "contrastRatio": 3.15,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#supplies\" class=\"btn btn-primary nav-cta\">Get Supplies</a>",
                  "target": [
                    ".nav-cta"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#supplies\" class=\"btn btn-primary nav-cta\">Get Supplies</a>",
          "target": [
            ".nav-cta"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section-label\">Since 2019</span>",
          "target": [
            ".hero-content > .section-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c8813a",
                "contrastRatio": 3.15,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#guides\" class=\"btn btn-primary\">Explore Material Guides</a>",
                  "target": [
                    ".hero-ctas > .btn-primary.btn[href$=\"#guides\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#guides\" class=\"btn btn-primary\">Explore Material Guides</a>",
          "target": [
            ".hero-ctas > .btn-primary.btn[href$=\"#guides\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"hero-stat-label\">Tutorials published</span>",
          "target": [
            ".hero-stat[role=\"listitem\"]:nth-child(1) > .hero-stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"hero-stat-label\">Projects shared</span>",
          "target": [
            ".hero-stat[role=\"listitem\"]:nth-child(2) > .hero-stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"hero-stat-label\">Average maker rating</span>",
          "target": [
            ".hero-stat[role=\"listitem\"]:nth-child(3) > .hero-stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"hero-stat-label\">Skill tiers</span>",
          "target": [
            ".hero-stat[role=\"listitem\"]:nth-child(4) > .hero-stat-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section-label\">Latest work</span>",
          "target": [
            "#showcase > .container > .section-head > .section-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#f3e6d3",
                "contrastRatio": 3.8,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"showcase-tag\">Woodworking</span>",
                  "target": [
                    "article:nth-child(1) > .showcase-body > .showcase-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.8 (foreground color: #a8632a, background color: #f3e6d3, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"showcase-tag\">Woodworking</span>",
          "target": [
            "article:nth-child(1) > .showcase-body > .showcase-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.8 (foreground color: #a8632a, background color: #f3e6d3, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7a8a6f",
                "bgColor": "#e7ece3",
                "contrastRatio": 3.07,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"showcase-tag sage\">Fiber Arts</span>",
                  "target": [
                    ".sage.showcase-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.07 (foreground color: #7a8a6f, background color: #e7ece3, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"showcase-tag sage\">Fiber Arts</span>",
          "target": [
            ".sage.showcase-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.07 (foreground color: #7a8a6f, background color: #e7ece3, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#b06a4e",
                "bgColor": "#f0e3dc",
                "contrastRatio": 3.33,
                "fontSize": "8.2pt (10.88px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"showcase-tag clay\">Ceramics</span>",
                  "target": [
                    ".clay.showcase-tag"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.33 (foreground color: #b06a4e, background color: #f0e3dc, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"showcase-tag clay\">Ceramics</span>",
          "target": [
            ".clay.showcase-tag"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.33 (foreground color: #b06a4e, background color: #f0e3dc, font size: 8.2pt (10.88px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#gallery\" class=\"btn btn-outline-amber\">Post Work</a>",
          "target": [
            ".btn-outline-amber.btn[href$=\"#gallery\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "10.6pt (14.08px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span style=\"font-size: 0.88rem; color: var(--color-ink-faint);\">Or browse the full <a href=\"#gallery\" style=\"color: var(--color-amber-deep); font-weight: 600;\">Community Gallery</a></span>",
          "target": [
            "#showcase > .container > div:nth-child(3) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "10.6pt (14.08px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#gallery\" style=\"color: var(--color-amber-deep); font-weight: 600;\">Community Gallery</a>",
          "target": [
            "span > a[href$=\"#gallery\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#f3ece3",
                "contrastRatio": 3.99,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"guides\" aria-labelledby=\"guides-title\">",
                  "target": [
                    "#guides"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.99 (foreground color: #a8632a, background color: #f3ece3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section-label\">Reference library</span>",
          "target": [
            "#guides > .container > .section-head > .section-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.99 (foreground color: #a8632a, background color: #f3ece3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c8813a",
                "contrastRatio": 3.15,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Get Supplies</a>",
                  "target": [
                    ".guide-cta > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Get Supplies</a>",
          "target": [
            ".guide-cta > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section-label\">Step by step</span>",
          "target": [
            "#tutorials > .container > .section-head > .section-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c8813a",
                "contrastRatio": 3.15,
                "fontSize": "8.6pt (11.52px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<span class=\"tutorial-stamp\">Tier 2 \u00b7 Intermediate</span>",
                  "target": [
                    ".tutorial-stamp"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"tutorial-stamp\">Tier 2 \u00b7 Intermediate</span>",
          "target": [
            ".tutorial-stamp"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 8.6pt (11.52px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span><strong>Time:</strong> 30\u201340 min</span>",
          "target": [
            ".tutorial-meta > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span><strong>Tools:</strong> 3 stones, strop, honing guide (optional)</span>",
          "target": [
            ".tutorial-meta > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.36,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span><strong>By:</strong> M. Osei</span>",
          "target": [
            ".tutorial-meta > span:nth-child(3)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.36 (foreground color: #7b736b, background color: #faf7f2, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-outline-amber\" style=\"margin-top: 8px;\">Read Full Tutorial</a>",
          "target": [
            ".btn-outline-amber.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#f3ece3",
                "contrastRatio": 3.99,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"gallery\" aria-labelledby=\"gallery-title\">",
                  "target": [
                    "#gallery"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.99 (foreground color: #a8632a, background color: #f3ece3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section-label\">Community gallery</span>",
          "target": [
            "#gallery > .container > .section-head > .section-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.99 (foreground color: #a8632a, background color: #f3ece3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#ffffff",
                "bgColor": "#c8813a",
                "contrastRatio": 3.15,
                "fontSize": "11.4pt (15.2px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"btn btn-primary\">Post Work</a>",
                  "target": [
                    "#gallery > .container > div:nth-child(3) > .btn-primary.btn[href=\"#\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#\" class=\"btn btn-primary\">Post Work</a>",
          "target": [
            "#gallery > .container > div:nth-child(3) > .btn-primary.btn[href=\"#\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.15 (foreground color: #ffffff, background color: #c8813a, font size: 11.4pt (15.2px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#7b736b",
                "bgColor": "#f3ece3",
                "contrastRatio": 3.97,
                "fontSize": "10.6pt (14.08px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"gallery\" aria-labelledby=\"gallery-title\">",
                  "target": [
                    "#gallery"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.97 (foreground color: #7b736b, background color: #f3ece3, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span style=\"font-size: 0.88rem; color: var(--color-ink-faint);\">\n            <span id=\"gallery-count\">8</span> projects shared this month\n          </span>",
          "target": [
            "#gallery > .container > div:nth-child(3) > span"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.97 (foreground color: #7b736b, background color: #f3ece3, font size: 10.6pt (14.08px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#faf7f2",
                "contrastRatio": 4.38,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<body>",
                  "target": [
                    "body"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section-label\" style=\"justify-content: center;\">What makers say</span>",
          "target": [
            "section[aria-labelledby=\"testimonials-title\"] > .container > .section-head > .section-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.38 (foreground color: #a8632a, background color: #faf7f2, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#a8632a",
                "bgColor": "#f3ece3",
                "contrastRatio": 3.99,
                "fontSize": "9.0pt (12px)",
                "fontWeight": "bold",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<section class=\"section section-alt\" id=\"faq\" aria-labelledby=\"faq-title\">",
                  "target": [
                    "#faq"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 3.99 (foreground color: #a8632a, background color: #f3ece3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span class=\"section-label\">Good to know</span>",
          "target": [
            "#faq > .container > .section-head > .section-label"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 3.99 (foreground color: #a8632a, background color: #f3ece3, font size: 9.0pt (12px), font weight: bold). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#84817f",
                "bgColor": "#1f1a17",
                "contrastRatio": 4.45,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\" role=\"contentinfo\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.45 (foreground color: #84817f, background color: #1f1a17, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>\u00a9 2026 MakerHands Collective. All rights reserved.</span>",
          "target": [
            ".footer-bottom > span:nth-child(1)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.45 (foreground color: #84817f, background color: #1f1a17, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        },
        {
          "any": [
            {
              "id": "color-contrast",
              "data": {
                "fgColor": "#84817f",
                "bgColor": "#1f1a17",
                "contrastRatio": 4.45,
                "fontSize": "9.8pt (13.12px)",
                "fontWeight": "normal",
                "messageKey": null,
                "expectedContrastRatio": "4.5:1",
                "shadowColor": null
              },
              "relatedNodes": [
                {
                  "html": "<footer class=\"site-footer\" role=\"contentinfo\">",
                  "target": [
                    "footer"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Element has insufficient color contrast of 4.45 (foreground color: #84817f, background color: #1f1a17, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<span>\n          <a href=\"#\">Privacy Policy</a> &nbsp;\u00b7&nbsp;\n          <a href=\"#\">Terms of Service</a> &nbsp;\u00b7&nbsp;\n          <a href=\"#\">Cookie Settings</a>\n        </span>",
          "target": [
            ".footer-bottom > span:nth-child(2)"
          ],
          "failureSummary": "Fix any of the following:\n  Element has insufficient color contrast of 4.45 (foreground color: #84817f, background color: #1f1a17, font size: 9.8pt (13.12px), font weight: normal). Expected contrast ratio of 4.5:1"
        }
      ]
    },
    {
      "id": "target-size",
      "impact": "serious",
      "tags": [
        "cat.sensory-and-visual-cues",
        "wcag22aa",
        "wcag258"
      ],
      "description": "Ensure touch targets have sufficient size and space",
      "help": "All touch targets must be 24px large, or leave sufficient space",
      "helpUrl": "https://dequeuniversity.com/rules/axe/4.10/target-size?application=axeAPI",
      "nodes": [
        {
          "any": [
            {
              "id": "target-size",
              "data": {
                "messageKey": "partiallyObscured",
                "minSize": 24,
                "width": 165.7,
                "height": 17.1
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#\" class=\"brand\" aria-label=\"MakerHands Collective home\">",
                  "target": [
                    "a[aria-label=\"MakerHands Collective home\"]"
                  ]
                },
                {
                  "html": "<a href=\"#showcase\" class=\"active\">Project Showcase</a>",
                  "target": [
                    ".nav-desktop > .nav-list > li:nth-child(1) > .active[href$=\"#showcase\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient size because it is partially obscured (smallest space is 165.7px by 17.1px, should be at least 24px by 24px)"
            },
            {
              "id": "target-offset",
              "data": {
                "closestOffset": 23,
                "minOffset": 24
              },
              "relatedNodes": [
                {
                  "html": "<a href=\"#showcase\" class=\"active\">Project Showcase</a>",
                  "target": [
                    ".nav-desktop > .nav-list > li:nth-child(1) > .active[href$=\"#showcase\"]"
                  ]
                }
              ],
              "impact": "serious",
              "message": "Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 23px instead of at least 24px."
            }
          ],
          "all": [],
          "none": [],
          "impact": "serious",
          "html": "<a href=\"#gallery\" class=\"btn btn-ghost\">View the Gallery</a>",
          "target": [
            ".hero-ctas > .btn-ghost.btn[href$=\"#gallery\"]"
          ],
          "failureSummary": "Fix any of the following:\n  Target has insufficient size because it is partially obscured (smallest space is 165.7px by 17.1px, should be at least 24px by 24px)\n  Target has insufficient space to its closest neighbors. Safe clickable space has a diameter of 23px instead of at least 24px."
        }
      ]
    }
  ],
  "coverage": {
    "contract": "main-document-vertical-scroll",
    "complete": true,
    "positions": [
      {
        "y": 0,
        "height": 7196
      },
      {
        "y": 576,
        "height": 7196
      },
      {
        "y": 1152,
        "height": 7196
      },
      {
        "y": 1728,
        "height": 7196
      },
      {
        "y": 2304,
        "height": 7196
      },
      {
        "y": 2880,
        "height": 7196
      },
      {
        "y": 3456,
        "height": 7196
      },
      {
        "y": 4032,
        "height": 7196
      },
      {
        "y": 4608,
        "height": 7196
      },
      {
        "y": 5184,
        "height": 7196
      },
      {
        "y": 5760,
        "height": 7196
      },
      {
        "y": 6336,
        "height": 7196
      },
      {
        "y": 6476,
        "height": 7196
      }
    ],
    "scans": 14,
    "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 "Hobbies and Interests" 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: "Hobbies and Interests"
- Description: Hobbies, crafts, DIY projects, collecting, and special interest communities.

**Your Creative Task:**
1.  **Invent:** Create a unique, professional-sounding site name and a strong tagline fitting the "Hobbies and Interests" 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: "Resources", "Gallery", "Craft Tutorials".
-   **MAIN CONTENT:** Structure this area with **at least 3-4 distinct, well-developed sections**.
    -   Address key topics relevant to the "Hobbies and Interests" category. Consider themes similar to: "Project Showcase", "Material Guides", "DIY Tutorials".
    -   **Content Depth:** Populate each section with **substantial, realistic text** (multiple sentences/paragraphs). Use authentic industry language and terminology like: "skill progression", "pattern design", "project planning".
    -   **Visuals:** Integrate relevant placeholder images logically within the content sections.
    -   **Calls to Action:** Include clear and contextually relevant CTAs. Use strong verbs similar to: "Get Supplies", "Post Work", "Share Project".
-   **ENGAGEMENT (Recommended):** Strongly consider incorporating **one meaningful interactive element** that would genuinely benefit a user in the "Hobbies and Interests" sector. Ideas similar but not limited to: "community gallery".
-   **SIDEBAR (Optional):** If your design includes a sidebar, populate it with **useful, relevant content**. Ideas: "featured makers", "new tutorials", "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.