/* FAQ: composition, plus the question block .qa (06-DESIGN §10.18, §21), which only this page uses.
   The page opens as an index: the H1 over the questions, the list of groups beside it from xl, no divider.
   Round 2: a document, not an accordion; note 1 sits under "How a transcript gets made"; the page ends on a
   line with the address, no mini-form. Mobile first: sm 37.5em · md 56.25em · xl 75em. */

.page-faq .faq { padding-top: var(--s-5); align-items: start; }
.page-faq .faq-say { margin-top: var(--s-4); font-size: var(--fs-lede); line-height: 1.55; max-width: 31em; }

/* ---------- the margin: the index, on a gold margin rule (like the menu sheet) ---------- */
.page-faq .faq > .margin { position: relative; margin-top: var(--s-6); padding-left: var(--s-4); }
.page-faq .faq > .margin::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 1.5px;
  background: var(--margin-line); opacity: .55;
}
.page-faq .toc-h { color: var(--ink-soft); }
.page-faq .toc ul { list-style: none; margin-top: var(--s-1); columns: 2 15rem; column-gap: var(--s-6); }
.page-faq .toc li { break-inside: avoid; }
.page-faq .toc a {
  display: inline-block; padding: 11px 0; font-size: var(--fs-ui); line-height: 1.35;
  color: var(--ink); text-decoration: none;
}
.page-faq .toc a:hover {
  text-decoration: underline; text-decoration-color: var(--pen-stroke);
  text-decoration-thickness: 2px; text-underline-offset: 6px;
}
.page-faq .fn--proc { display: grid; grid-template-columns: 1.1em minmax(0, 1fr); }
.page-faq .fn.is-lit { background: var(--hl-soft); box-shadow: 0 0 0 6px var(--hl-soft); }

/* the group you jumped to is underlined in the index, as the header marks the current page */
@supports selector(:has(*)) {
  .page-faq:has(#varieties:target, #varieties :target) .toc a[href="#varieties"],
  .page-faq:has(#process:target, #process :target) .toc a[href="#process"],
  .page-faq:has(#translation:target, #translation :target) .toc a[href="#translation"],
  .page-faq:has(#data:target, #data :target) .toc a[href="#data"],
  .page-faq:has(#quotes:target, #quotes :target) .toc a[href="#quotes"],
  .page-faq:has(#who-we-are:target) .toc a[href="#who-we-are"] {
    font-weight: 600; text-decoration: underline; text-decoration-color: var(--pen-stroke);
    text-decoration-thickness: 2px; text-underline-offset: 6px;
  }
}

/* ---------- groups ---------- */
.page-faq .faq > .body { margin-top: var(--s-7); }
.page-faq .group + .group { margin-top: var(--s-8); }
.page-faq .qa-list { margin-top: var(--s-3); max-width: 46rem; }
.page-faq .group, .page-faq .qa, .page-faq .who { scroll-margin-top: var(--s-5); }

/* ---------- one question, set as a document (round 2): every answer shows; the question runs into its answer
   in Playfair, as on the academic page's committee block; its § hangs in the margin ---------- */
.page-faq .qa { position: relative; padding-block: var(--s-4); }
.page-faq .qa + .qa { border-top: 1px dotted var(--rule-strong); }
.page-faq .qa-a h3 { display: inline; margin-right: .25em; font: 500 1.3125rem/1.35 var(--serif); color: var(--navy); }
.page-faq .qa-a p { display: inline; }
.page-faq .qa-a { max-width: var(--measure); line-height: 1.6; }
.page-faq .qa-a .mono { font-size: .875em; }   /* timestamps and codes, sized to the line */
.page-faq .qa-go { margin-top: var(--s-1); }
.page-faq .qa-go .door { padding-block: 6px 10px; }
.page-faq .qa-link {
  display: inline-flex; align-items: center; min-height: 44px; min-width: 24px; margin-top: -10px;
  font-size: .9375rem; color: var(--pen); text-decoration: none;
}
.page-faq .qa-link:hover { text-decoration: underline; }
/* arriving from a link to one answer: the question gets the coder's highlighter */
.page-faq .qa:target h3 span {
  background: linear-gradient(transparent 58%, var(--hl) 58% 92%, transparent 92%);
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}
/* note 1 closes the group that first calls it */
.page-faq .fn--proc { margin-top: var(--s-5); max-width: 40em; padding-top: var(--s-3); border-top: 1px solid var(--rule); }

/* ---------- who is behind Rivera Brazil (replaces /about) + the closing sentence form ---------- */
.page-faq .who { margin-top: var(--s-8); }
.page-faq .who-a {
  margin-top: var(--s-5); font: 400 var(--fs-voice)/1.45 var(--serif); color: var(--navy);
  max-width: var(--measure-voice);
}
.page-faq .who-a .mono { font-size: .72em; white-space: nowrap; }
.page-faq .who-a i { font-style: italic; }
.page-faq .faq-end { margin-top: var(--s-7); font: 400 var(--fs-voice)/1.45 var(--serif); color: var(--navy); max-width: var(--measure-voice); }

@media (min-width: 56.25em) {
  /* one column until xl; the index sits between the H1 and the questions */
  .page-faq .faq { padding-top: var(--s-7); }
  .page-faq .faq > :is(.faq-head, .body, .margin) { grid-column: 1 / -1; }
  .page-faq .toc ul { max-width: 46rem; }
  .page-faq .group + .group { margin-top: var(--s-9); }
  /* the § hangs in the page margin, at the question's first line */
  .page-faq .qa-link { position: absolute; left: -2.25rem; top: var(--s-4); margin-top: -8px; }
  .page-faq .who { margin-top: var(--s-9); align-items: start; }
  .page-faq .who h2 { grid-column: 1 / span 5; }
  .page-faq .who-a { grid-column: 6 / span 7; margin-top: .55rem; }
  .page-faq .faq-end { margin: var(--s-8) 0 0 calc(100% / 12 * 5 + var(--col-gap)); }
}

@media (min-width: 75em) {
  /* the index opens the page beside the H1 and stays there (column 9 onward) */
  .page-faq .faq > .faq-head { grid-column: 1 / span 7; grid-row: 1; }
  .page-faq .faq > .body { grid-column: 1 / span 7; grid-row: 2; }
  .page-faq .faq > .margin { grid-column: 9 / span 4; grid-row: 1 / span 2; max-width: 22rem; margin-top: .6rem; }
  .page-faq .toc ul { columns: auto; }
  .page-faq .toc a { padding: 6px 0; }
}
/* the margin travels with the reader when the screen is tall enough to hold it */
@media (min-width: 75em) and (min-height: 40em) {
  .page-faq .faq > .margin { position: sticky; top: var(--s-5); }
}

@media print {
  .page-faq .toc, .page-faq .qa-link, .page-faq .faq > .margin::before { display: none !important; }
  .page-faq .faq > .margin { position: static; padding-left: 0; }
  .page-faq .qa h3 span { background: none !important; }
}