/* ============================================================
   FAQ PAGE — a standalone page, laid out the way tolans.com/faq
   lays its out: an oversized FAQ title, a hairline under it, then
   category headings, and one white rounded card per question with
   the question on the left and the answer on the right.

   The header and footer are the site's own, markup and all — this
   page links header.css / footer.css and nothing else, so anything
   that changes there changes here.

   🔴 It does NOT link intro.css. That file holds the opener, and
   part of the opener is `.site-header { opacity: 0 }` with a 1.6s
   fade — inherited onto a page with no opener, the bar would simply
   be invisible for the first second and a half.
   ============================================================ */

.faqp {
  background: var(--nes-sand);
  color: var(--nes-ink);
  /* the bar is fixed, so the title has to start below it */
  padding: clamp(7rem, 15vh, 11rem) 0 clamp(5rem, 12vh, 9rem);
}

.faqp__inner {
  width: 100%;
  max-width: 77.5rem;
  margin-inline: auto;
  /* the header's own gutter, so the title lines up with the logo */
  padding-inline: max(5vw, 32px);
}

.faqp__title {
  font-family: var(--font--primary);
  font-size: clamp(3.5rem, 10vw, 9rem);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.04em;
  margin: 0;
}

.faqp__rule {
  margin: clamp(2rem, 4vw, 3.5rem) 0 0;
  border-top: 1px solid color-mix(in srgb, var(--nes-ink) 22%, transparent);
}

/* ---------- a category ---------- */
.faqp__group {
  font-family: var(--font--primary);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  letter-spacing: -.02em;
  line-height: 1.2;
  margin: clamp(2.5rem, 5vw, 4rem) 0 clamp(1.25rem, 2vw, 1.75rem);
}

.faqp__cards {
  display: flex;
  flex-direction: column;
  gap: .75rem;
}

/* ---------- one question ---------- */
.faqp__card {
  background: var(--nes-white);
  border-radius: clamp(1.25rem, 2vw, 1.75rem);
  padding: clamp(1.5rem, 3vw, 2.75rem);
  display: grid;
  gap: 1rem;
}

.faqp__q {
  font-family: var(--font--primary);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.02em;
  text-wrap: pretty;
  margin: 0;
}

.faqp__a p {
  font-family: var(--font--body);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--nes-ink) 68%, transparent);
  margin: 0;
}
.faqp__a p + p { margin-top: 1em; }
.faqp__a a { color: inherit; text-decoration: underline; }

.faqp__note {
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  font-family: var(--font--body);
  font-size: clamp(1rem, 1.15vw, 1.125rem);
  line-height: 1.6;
  color: color-mix(in srgb, var(--nes-ink) 55%, transparent);
}

/* the two-column card only once there is room for two real columns —
   below this the question would set on one word per line */
@media (min-width: 900px) {
  .faqp__card {
    grid-template-columns: minmax(0, .42fr) minmax(0, .58fr);
    gap: clamp(2rem, 4vw, 3.5rem);
    align-items: start;
  }
}