/* ═══════════════════════════════════════════════════════════════════════════
   The questions page.

   A page that is read by skimming, so it is set as one column of questions you
   can run your eye down — the answer is folded away, the question is not. The
   group list beside it is a way of getting somewhere quickly, not a filter:
   every group is on the page whether you use it or not.

   No script. `<details>` opens and shuts on its own, and the only thing a
   script could add here is an animated height, which is not worth the bytes on
   a page somebody is on because they have a problem.
   ═══════════════════════════════════════════════════════════════════════════ */

.faq{padding-block-start:calc(var(--barh) + clamp(2rem,5vw,3.5rem))}
.faq__wrap{max-inline-size:74rem;margin-inline:auto}

/* ── the lead ────────────────────────────────────────────────────────────── */

.faq__head{margin-block-end:clamp(2rem,4vw,3rem)}
.faq__i{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1.18;
  font-size:clamp(1.45rem,3.4vw,2.3rem);color:var(--plum);max-inline-size:26ch}
.faq__count{margin-block-start:.85rem;font-size:.65rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--faint)}

/* ── the two columns ─────────────────────────────────────────────────────── */

/* The group list is a sidebar on a desk and a strip above the questions on a
   phone, which is the same markup either way — only the direction changes. */
.faq__body{display:grid;gap:clamp(1.5rem,3vw,2.75rem)}
@media(min-width:60rem){
  .faq__body{grid-template-columns:15rem 1fr;align-items:start}
}

.faq__jump{position:sticky;inset-block-start:calc(var(--barh) + 1rem)}
@media(max-width:59.99rem){
  .faq__jump{position:static}
  .faq__jump ul{display:flex;flex-wrap:wrap;gap:.45rem}
}

.faq__jumpt{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);margin-block-end:.7rem}
.faq__jump ul{list-style:none}
.faq__jump a{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  padding:.5rem .8rem;border-radius:.7rem;color:var(--muted);font-size:.92rem;
  transition:background-color .25s var(--ease),color .25s var(--ease)}
.faq__jump a:hover,.faq__jump a:focus-visible{background:rgb(60 26 87 / .07);color:var(--plum)}
.faq__n{flex:none;font-family:var(--mono);font-size:.62rem;color:var(--faint)}

/* ── a group ─────────────────────────────────────────────────────────────── */

.faq__groups{display:grid;gap:clamp(1.75rem,3.5vw,2.75rem)}
/* Anchored jumps land under the fixed bar without this. */
.faq__group{scroll-margin-block-start:calc(var(--barh) + 1.5rem)}
.faq__gname{font-family:var(--display);font-weight:800;letter-spacing:-.02em;
  font-size:1.15rem;color:var(--plum);margin-block-end:.8rem}

.faq__list{border-block-start:1px solid rgb(60 26 87 / .14)}

/* ── one question ────────────────────────────────────────────────────────── */

.faq__q{border-block-end:1px solid rgb(60 26 87 / .14)}

.faq__ask{display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-block:1.05rem;cursor:pointer;list-style:none;
  transition:color .25s var(--ease)}
/* Safari draws its own triangle through a pseudo-element the standard
   `list-style` above does not reach. */
.faq__ask::-webkit-details-marker{display:none}
.faq__ask:hover{color:var(--plum)}
.faq__ask:focus-visible{outline:2px solid var(--plum);outline-offset:3px;border-radius:.5rem}

.faq__askt{font-family:var(--display);font-weight:800;letter-spacing:-.015em;line-height:1.35;
  font-size:clamp(1rem,1.7vw,1.1rem);color:var(--ink)}
.faq__q[open] .faq__askt{color:var(--plum)}

.faq__mark{flex:none;display:grid;place-items:center;inline-size:1.7rem;block-size:1.7rem;
  margin-block-start:.05rem;border-radius:50%;border:1.5px solid rgb(60 26 87 / .22);
  color:var(--plum);
  transition:transform .3s var(--ease),background-color .25s var(--ease),
             color .25s var(--ease),border-color .25s var(--ease)}
.faq__mark .icon{inline-size:.85rem;block-size:.85rem}
.faq__ask:hover .faq__mark{background:var(--plum);color:var(--cream);border-color:var(--plum)}
.faq__q[open] .faq__mark{transform:rotate(180deg)}

.faq__ans{padding-block:0 1.25rem;max-inline-size:64ch;color:var(--muted);line-height:1.75}
.faq__ans p + p{margin-block-start:.8em}
.faq__ans a{color:var(--plum);text-decoration:underline;text-underline-offset:.22em;
  text-decoration-thickness:1.5px;text-decoration-color:rgb(60 26 87 / .35);
  transition:text-decoration-color .25s}
.faq__ans a:hover{text-decoration-color:var(--gold)}

/* ── still stuck ─────────────────────────────────────────────────────────── */

.faq__ask-us{margin-block-start:clamp(2.5rem,5vw,4rem);padding:clamp(1.4rem,3vw,2rem);
  border-radius:var(--radius);background:rgb(60 26 87 / .05);
  border:1px solid rgb(60 26 87 / .1);max-inline-size:44rem}
.faq__askus-t{font-family:var(--display);font-weight:800;font-size:1.1rem;color:var(--plum);
  margin-block-end:.35rem}
.faq__ask-us p:not(.faq__askus-t){color:var(--muted);line-height:1.7;max-inline-size:52ch}
.faq__wa{display:inline-flex;align-items:center;gap:.55rem;margin-block-start:1.1rem;
  padding:.8rem 1.4rem;border-radius:999px;background:var(--plum);color:var(--cream);
  font-family:var(--display);font-weight:800;font-size:.9rem;
  transition:box-shadow .3s var(--ease),translate .3s var(--ease)}
.faq__wa:hover{translate:0 -2px;box-shadow:0 .7rem 1.4rem rgb(60 26 87 / .3)}
.faq__wa .icon{inline-size:1.15rem;block-size:1.15rem}

/* ── on paper ────────────────────────────────────────────────────────────── */

/* Printed, every answer is open and the jump list is a navigation aid with
   nothing to navigate. */
@media print{
  .faq__jump,.faq__mark,.faq__ask-us{display:none}
  .faq__ans{display:block!important}
  .faq__body{display:block}
}