Accessible FAQ disclosure

<section class="faq" aria-labelledby="faq-title">
  <p class="faq__eyebrow">Good to know</p>
  <h1 id="faq-title">Frequently asked questions</h1>
  <div class="faq__list">
    <details open>
      <summary>Do I need JavaScript for this accordion?</summary>
      <p>No. The details and summary elements provide disclosure behavior, keyboard support, and an announced state in modern browsers.</p>
    </details>
    <details>
      <summary>Can several answers stay open?</summary>
      <p>Yes. Each question is independent, so readers can compare answers without another answer closing unexpectedly.</p>
    </details>
    <details>
      <summary>What should go inside an answer?</summary>
      <p>Keep the essential response first. Add a short list or link only when it helps someone take the next step.</p>
    </details>
  </div>
</section>

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  padding: clamp(1.5rem, 6vw, 5rem);
  background: #f7efe6;
  color: #2b151d;
  font-family: system-ui, sans-serif;
}

.faq {
  width: min(100%, 48rem);
  margin-inline: auto;
}

.faq__eyebrow {
  margin: 0 0 0.75rem;
  color: #8e2f50;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.faq h1 {
  max-width: 14ch;
  margin: 0 0 2rem;
  font-size: clamp(2.25rem, 7vw, 4.5rem);
  line-height: 0.98;
}

.faq__list {
  border-block-start: 3px solid #2b151d;
}

.faq details {
  border-block-end: 3px solid #2b151d;
}

.faq summary {
  padding: 1.25rem 0.25rem;
  cursor: pointer;
  font-size: clamp(1.05rem, 3vw, 1.3rem);
  font-weight: 800;
  line-height: 1.35;
}

.faq summary::marker {
  color: #b0436a;
}

.faq summary:hover {
  color: #8e2f50;
}

.faq summary:focus-visible {
  outline: 4px solid #176b87;
  outline-offset: 4px;
}

.faq details[open] {
  background: #fffaf5;
}

.faq details[open] summary {
  padding-inline: 1rem;
}

.faq details p {
  max-width: 62ch;
  margin: 0;
  padding: 0 1rem 1.5rem;
  color: #4a2c35;
  line-height: 1.65;
}