/* FAQ (Fable 3.7): twenty-two slips under a black bulldog clip in the head; the top slip pulls away in held frames and the
   next question shows (page.js [data-sheaf]). The questions below as ruled ledger rows, numbered in gold. */
.fq-head .dc-title em { font-style: italic; color: var(--gold-big); }
.fq-sheaf { position: relative; justify-self: center; width: min(100%, calc(270 * var(--u))); margin: calc(46 * var(--u)) calc(30 * var(--u)) calc(20 * var(--u)) 0; transform: rotate(-2deg); z-index: 3; }
.fq-stack i { position: absolute; inset: 0; background: #F2ECDF var(--sheet-b); background-size: 520px; box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .14);
  transform: rotate(calc(-1deg + var(--i) * .55deg)) translate(calc(var(--i) * 1.5px), calc(var(--i) * 2.5px)); }
.fq-stack i:last-child { box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .14), 0 26px 40px -18px rgb(13 22 25 / .55); }
.fq-slip { position: relative; display: grid; gap: calc(10 * var(--u)); align-content: start; min-height: calc(150 * var(--u)); padding: calc(38 * var(--u)) calc(22 * var(--u)) calc(20 * var(--u));
  background: #FCF9F3 var(--sheet-a); background-size: 600px; box-shadow: var(--edge), 0 2px 2px rgb(21 31 34 / .16); transition: transform .55s steps(8, end), opacity .55s steps(8, end); }
.fq-slip__n { font: 600 calc(14 * var(--u)) / 1 var(--read); color: var(--ink-red); padding-bottom: calc(7 * var(--u)); border-bottom: 2px solid currentColor; justify-self: start; min-width: calc(26 * var(--u)); }
.fq-slip__q { font: 700 calc(20 * var(--u)) / 1.15 var(--display); color: var(--hd); text-decoration: none; text-wrap: balance; }
.fq-slip__q:hover { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.fq-slip__q:focus-visible { outline: 2px solid var(--hd); outline-offset: 3px; }
.fq-sheaf.is-pulling .fq-slip { transform: translate(calc(70 * var(--u)), calc(-40 * var(--u))) rotate(9deg); opacity: 0; }
.fq-sheaf.is-back .fq-slip { transition: none; }
/* the bulldog clip and its tongue */
.fq-clip { position: absolute; z-index: 4; left: 50%; top: calc(-18 * var(--u)); width: calc(110 * var(--u)); height: calc(34 * var(--u)); margin-left: calc(-55 * var(--u));
  background: linear-gradient(180deg, #3C3F41, #141618 60%, #2A2C2E); border-radius: 4px 4px 8px 8px; box-shadow: 0 3px 4px rgb(0 0 0 / .35), inset 0 1px 0 rgb(255 255 255 / .2); }
.fq-clip i { position: absolute; left: 12%; right: 12%; top: -14px; height: 18px; border: 3px solid #B9BCBE; border-bottom: 0; border-radius: 10px 10px 0 0; }
.fq-stamp { position: absolute; left: 50%; top: 110%; translate: -50% 0; color: #F4EFE8; border-color: #F4EFE8; background: #141618; font-size: calc(9 * var(--u)); padding: .4em .7em; }
.fq-pull { position: absolute; z-index: 5; right: calc(-22 * var(--u)); bottom: calc(18 * var(--u)); width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #234048 var(--deep-tex); background-size: 300px; color: var(--ivory); cursor: pointer; box-shadow: 0 2px 3px rgb(21 31 34 / .25); }
.fq-pull svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fq-pull:focus-visible { outline: 2px solid var(--hd); outline-offset: 3px; }
.fq-note { right: calc(100% + 50px); top: 40%; }
/* the ledger */
.fq-ledger__wrap > * { max-width: 1240px; }
.fq-q { border-top: 1px solid var(--rule); scroll-margin-top: calc(var(--nav-h) + 20px); }
.fq-q:last-child { border-bottom: 1px solid var(--rule); }
.fq-q summary { position: relative; display: grid; grid-template-columns: calc(54 * var(--u)) 1fr; align-items: baseline; list-style: none; cursor: pointer; padding: calc(14 * var(--u)) calc(40 * var(--u)) calc(14 * var(--u)) 0; min-height: 44px; }
.fq-q summary::-webkit-details-marker { display: none; }
.fq-q summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 14px; height: 14px; margin-top: -7px;
  background: linear-gradient(var(--gold), var(--gold)) center / 100% 1.5px no-repeat, linear-gradient(var(--gold), var(--gold)) center / 1.5px 100% no-repeat; transition: transform .3s steps(3, end); }
.fq-q[open] summary::after { transform: rotate(45deg); }
.fq-q summary:focus-visible { outline: 2px solid var(--hd); outline-offset: 4px; }
.fq-q__n { font: 600 calc(14 * var(--u)) / 1 var(--read); color: var(--ink-red); }
.fq-q__t { font: 700 calc(17 * var(--u)) / 1.25 var(--display); color: var(--hd); }
.fq-q__a { padding: 0 0 calc(16 * var(--u)) calc(54 * var(--u)); font: 400 calc(14 * var(--u)) / 1.55 var(--read); color: var(--ink); max-width: calc(54 * var(--u) + 66ch); }
.fq-q__a a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.fq-q[open] .fq-q__a { animation: fq-open .42s steps(4, end) both; }
@keyframes fq-open { from { transform: translateY(-8px); opacity: 0; } to { transform: none; opacity: 1; } }
/* the close */
.fq-close__wrap { display: grid; justify-items: center; }
.fq-close__slip { display: grid; justify-items: center; gap: calc(16 * var(--u)); padding: calc(30 * var(--u)) calc(44 * var(--u)); transform: rotate(-.8deg); text-align: center; }
.fq-close__t { font: 700 calc(26 * var(--u)) / 1.15 var(--display); color: var(--hd); max-width: 22ch; text-wrap: balance; }

@media (max-width: 1100px) {
  .fq-sheaf { justify-self: start; }
  .fq-note { right: auto; left: 40%; top: -3em; }
}
@media (max-width: 760px) {
  .fq-sheaf { width: 82%; margin: 56px 0 20px 4px; }
  .fq-slip__q { font-size: 1.3rem; }
  .fq-pull { right: -30px; }
  .fq-note { display: none; }
  .fq-q summary { grid-template-columns: 40px 1fr; }
  .fq-q__t { font-size: 1.08rem; }
  .fq-q__a { padding-left: 40px; font-size: 1rem; }
  .fq-close__t { font-size: 1.5rem; }
  .fq-close__slip { padding: 26px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .fq-slip { transition: none; }
  .fq-q[open] .fq-q__a { animation: none; }
}