/* asked at the bar: the one accordion in the six sites */
.q-grid { display: grid; gap: var(--s-6); }
.qa { border-top: 1px solid var(--brass-deep); max-width: 44rem; }
details { border-bottom: 1px solid var(--brass-deep); }
summary {
  position: relative; list-style: none; cursor: pointer; padding: var(--s-3) 3rem var(--s-3) 0; min-height: 52px;
  font: 500 clamp(1.25rem, 1.1rem + 0.6vw, 1.625rem)/1.25 var(--f-display); color: var(--ivory);
}
summary::-webkit-details-marker { display: none; }
summary::before, summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 16px; height: 1px; background: var(--brass); transition: transform 200ms ease; }
summary::after { transform: rotate(90deg); }
details[open] summary::after { transform: rotate(0); }
summary:focus-visible { outline-offset: -2px; }
.ans { padding: 0 0 var(--s-5); }
.ans p { max-width: 34em; }
details[open] .ans { animation: ansin 200ms ease; }
@keyframes ansin { from { opacity: 0; } }
@media (min-width: 1100px) {
  .q-grid { grid-template-columns: repeat(12, 1fr); column-gap: 24px; align-items: start; }
  .q-grid .head { grid-column: 2 / 6; position: sticky; top: calc(var(--bar-h) + 40px); }
  .qa { grid-column: 6 / 13; max-width: none; }
}