/* FAQ: sits right after the finale mark, before the tickets. Type, hairlines and whitespace; no cards. */
.faq{max-width:1200px;margin:0 auto;padding:clamp(72px,11vh,120px) calc(var(--gut) + var(--sar)) clamp(24px,4vh,48px) calc(var(--gut) + var(--sal));
  display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr);gap:24px clamp(32px,6vw,96px);align-items:start;interpolate-size:allow-keywords}
.faq h2{font-family:var(--sans);font-weight:300;font-size:clamp(34px,4.6vw,64px);line-height:1.05;letter-spacing:-.01em;margin:0;color:var(--ink);text-wrap:balance}
#faq{scroll-margin-top:var(--head)}
.faq-list{border-bottom:1px solid var(--line);min-width:0}
.faq-i{border-top:1px solid var(--line)}
.faq-i summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:44px;padding:20px 0;cursor:pointer;
  color:var(--soft);-webkit-tap-highlight-color:transparent;transition:color .16s var(--ease)}
.faq-i summary::-webkit-details-marker{display:none}
.faq-i[open] summary{color:var(--ink)}@media (hover:hover){.faq-i summary:hover{color:var(--ink)}}
.faq-i summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.faq-q{font-size:clamp(19px,1.7vw,23px);font-weight:400;line-height:1.3;text-wrap:balance}
/* the plus: two hairlines, the upright one turns away when open */
.faq-i summary i{position:relative;flex:none;width:14px;height:14px;opacity:.7;transition:opacity .16s var(--ease)}
.faq-i summary i::before,.faq-i summary i::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1px;background:currentColor;transition:transform .28s var(--ease)}
.faq-i summary i::after{transform:rotate(90deg)}
.faq-i[open] summary i{opacity:1}@media (hover:hover){.faq-i summary:hover i{opacity:1}}
.faq-i[open] summary i::after{transform:rotate(0)}
.faq-a{padding:0 min(48px,10%) 26px 0;color:var(--soft);font-size:17px;line-height:1.55;max-width:60ch}
.faq-a p{margin:0}
.faq-a a{color:var(--ink);text-underline-offset:3px;text-decoration-color:rgba(252,252,252,.45);display:inline-block;min-height:24px}
@media (hover:hover){.faq-a a:hover{text-decoration-color:currentColor}}
/* open and close: the panel grows and fades where the browser can animate a details body; elsewhere the answer just fades in */
.faq-i::details-content{block-size:0;overflow:hidden;opacity:0;transition:block-size .3s var(--ease),opacity .22s var(--ease),content-visibility .3s allow-discrete}
.faq-i[open]::details-content{block-size:auto;opacity:1}
@supports not selector(::details-content){
  .faq-i[open] .faq-a{animation:faq-in .26s var(--ease)}
  @keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
}
@media (max-width:820px){
  .faq{grid-template-columns:minmax(0,1fr);padding-top:clamp(56px,9vh,88px)}
  .faq h2{margin-bottom:8px}
  .faq-a{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .faq-i summary,.faq-i summary i,.faq-i summary i::before,.faq-i summary i::after,.faq-i::details-content{transition:none!important}
  .faq-i[open] .faq-a{animation:none!important}
}