/* FAQ (faq.html): page-local styles on top of kit/kit.css */

/* ---- two columns: a sticky index on the left, the questions on the right, the line between them */
.faq-side { grid-column: 2 / 5; align-self: start; position: sticky; top: calc(var(--nav-h) + 40px); }
.faq-side .idx { margin-bottom: 32px; }
.faq-side__h { font-weight: 500; font-size: clamp(24px, 1.9vw, 32px); line-height: 1.14; letter-spacing: -.028em; text-wrap: balance; }
.faq-nav { margin-top: 40px; border-top: 1px solid var(--ink); }
.faq-nav a { display: flex; gap: 12px; align-items: baseline; padding: 11px 0 12px; border-bottom: 1px solid var(--hair); font-size: 16px; letter-spacing: -.008em; transition: color .4s var(--ease); }
.faq-nav a:hover { color: var(--accent); }
.faq-nav .num { width: 2.6em; flex: none; }
.faq-side__note { margin-top: 32px; font-size: 15px; line-height: 1.5; color: var(--muted); max-width: 22em; }

.faq-col { grid-column: 6 / 12; position: relative; --spine-dx: -60px; }
.faq-grp { display: flex; gap: 12px; margin: 72px 0 14px; color: var(--ink); }
.faq-grp:first-of-type { margin-top: 0; }
.faq-grp .num { color: var(--accent); }
.faq-col .faq + .faq-grp { margin-top: 72px; }
.faq-spine-top { position: absolute; top: 0; left: var(--spine-dx); width: 2px; height: 2px; }

/* the node on the line for each question: lit while its answer is open */
.faq__q { position: relative; }
.qdot { position: absolute; top: 50%; left: var(--spine-dx); width: 0; height: 0; pointer-events: none; z-index: 4; }
.qdot::before, .qdot::after { content: ""; position: absolute; border-radius: 50%; left: 0; top: 0; }
.qdot::before { width: 96px; height: 96px; margin: -48px 0 0 -48px; background: radial-gradient(closest-side, rgba(194, 73, 46, .34), rgba(227, 135, 106, .12) 48%, rgba(227, 135, 106, 0)); opacity: 0; transform: scale(.4); transition: opacity .8s var(--ease), transform 1s var(--ease); }
.qdot::after { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: var(--accent); box-shadow: 0 0 0 3px var(--paper); transform: scale(0); transition: transform .6s var(--ease); }
.faq__item[open] .qdot::before { opacity: 1; transform: none; }
.faq__item[open] .qdot::after { transform: none; }
.faq__item[open] .faq__q > span { color: var(--ink); }
.faq__q > span { transition: color .4s var(--ease); }
.faq__item:not([open]) .faq__q > span { color: #2F2D29; }
.no-js .qdot { display: none; }

.faq__fig { margin: 56px 0 12px; }
.faq-col .faq__q:focus-visible { outline-offset: 2px; }
.faq__fig .frame__cap { margin-top: 18px; }

/* ---- mid widths: wider question column */
@media (max-width: 1100px) {
  .faq-side { grid-column: 2 / 6; }
  .faq-col { grid-column: 7 / 12; }
}
@media (max-width: 1000px) {
  .faq-side { position: static; grid-column: 2 / 12; margin-bottom: 72px; }
  .faq-side__h { max-width: 18em; }
  .faq-nav ul { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); }
  .faq-col { grid-column: 2 / 12; }
}

/* ---- phones: the spine is the left gutter */
@media (max-width: 760px) {
  .faq-side { margin-bottom: 56px; }
  .faq-nav ul { display: block; }
  .faq-grp { margin-top: 56px; }
  .faq-col .faq + .faq-grp { margin-top: 56px; }
  .qdot::before { width: 64px; height: 64px; margin: -32px 0 0 -32px; }
  .qdot::after { width: 12px; height: 12px; margin: -6px 0 0 -6px; }
}