/* faq page only.  Loaded after theme.css and scene.css.
   One cream card of dotted question rows in two groups, the pigeon perched on its top edge. */

/* info.css caps every .container inside <main> at 64rem; a reading column is narrower */
main.faq-page .container { max-width: 52rem; }
.faq-page { padding: clamp(28px, 4vw, 56px) 0 clamp(60px, 8vw, 110px); }

.faq-head { width: fit-content; max-width: 100%; }
.faq-head h1 { margin-top: .75rem; }
.faq-head p { font-size: var(--step-1); }

/* margin-top leaves the bird its own strip of sky, clear of the heading plate */
.faq-card { position: relative; margin-top: 104px; padding-block: clamp(24px, 3vw, 34px) clamp(8px, 1.5vw, 16px); }
.faq-bird { position: absolute; right: clamp(22px, 4vw, 48px); bottom: calc(100% - 5px); width: 132px; height: auto; pointer-events: none; }

/* inside the card the list is just the rows: no second sheet, no top rule above the first group label */
.faq-card .faq-list { border-top: 0; max-width: none; margin: 0; }

/* the group label is a quiet small-caps line, not a competing heading */
.faq-card h2.faq-group {
  margin: 1.5rem 0 .15rem; font: 700 .8125rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim);
}
.faq-card h2.faq-group:first-child { margin-top: 0; }

.faq-item > summary { border-radius: var(--radius-sm); }
.faq-item > summary:hover { color: var(--terra-deep); }
.faq-item > p a { color: var(--pen); }

@media (max-width: 640px) {
  .faq-card { margin-top: 96px; }
  .faq-bird { width: 112px; }
}