/* R16 · FAQ ("Workshop notes") — the final additive section, between Membership and the footer.
   Same system as the Archive / Membership chapters: cream page, charcoal type, condensed display heading with an outlined
   word, mono index numbers, the handwritten line in OX blue, thin rules with the OX-blue line that grows on hover. */
.faq{position:relative;z-index:11;background:var(--cream);color:var(--ink)}
.faq-in{max-width:1440px;margin:0 auto;padding:clamp(40px,5vw,80px) clamp(16px,5vw,80px) clamp(90px,10vw,160px);
 display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.55fr);gap:clamp(34px,5vw,100px);align-items:start}
.faq-kick{margin:0 0 16px;font-size:.66rem;color:var(--ink2);display:flex;align-items:center;gap:14px}
.faq-kick::after{content:"";width:18px;height:2px;background:var(--red)}
.faq-head h2{margin:0;font:900 clamp(46px,5.6vw,98px)/.86 var(--display);font-stretch:68%;text-transform:uppercase;letter-spacing:-.012em}
.faq-head h2>span{display:block;white-space:nowrap}
.faq-head h2 .o{color:transparent;-webkit-text-stroke:max(1.6px,.016em) var(--ink)}
.faq-note{margin:18px 0 0;font-size:clamp(22px,2vw,30px);color:var(--blue);transform:rotate(-2deg);transform-origin:0 50%}
.faq-list{border-top:1.5px solid var(--ink)}
.faq-item{position:relative;border-bottom:1.5px solid rgba(29,33,36,.2)}
.faq-item::after{content:"";position:absolute;left:0;right:0;bottom:-1.5px;height:2px;background:var(--blue);transform:scaleX(0);transform-origin:0 50%;transition:transform .25s cubic-bezier(.3,.7,.2,1)}
.faq-q{margin:0}
.faq-btn{display:grid;grid-template-columns:clamp(40px,4.2vw,64px) minmax(0,1fr) 34px;align-items:center;gap:12px;width:100%;padding:clamp(20px,2vw,28px) 0;
 border:0;background:none;color:var(--ink);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.faq-no{font-size:.62rem;color:var(--ink2);letter-spacing:.12em}
.faq-txt{font:850 clamp(1rem,1.45vw,1.36rem)/1.18 var(--display);font-stretch:84%;text-transform:uppercase;letter-spacing:.015em}
/* + / − : two thin strokes in a small ring; the ring fills OX blue on hover, the vertical stroke folds away when open */
.faq-pm{position:relative;justify-self:end;width:30px;height:30px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background-color .2s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.faq-pm::before,.faq-pm::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:1.8px;margin:-.9px 0 0 -6px;background:var(--ink);border-radius:1px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.faq-pm::after{transform:rotate(90deg)}
.faq-item.open .faq-pm::after{transform:rotate(90deg) scaleX(0)}
.faq-btn:focus-visible{outline:2px dashed var(--ink);outline-offset:4px}
@media (hover:hover){
 .faq-item:hover::after{transform:scaleX(1)}
 .faq-btn:hover .faq-pm{background:var(--blue);transform:rotate(90deg)}
}
.faq-item.open::after{transform:scaleX(1)}
.faq-item.open .faq-pm{background:var(--blue)}
/* answer: height from 0 to auto via grid rows (≈300 ms), no bounce */
.faq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s cubic-bezier(.2,.8,.2,1)}
.faq-a-in{min-height:0;overflow:hidden;padding-left:calc(clamp(40px,4.2vw,64px) + 12px);padding-right:46px}
.faq-a-in>*:first-child{margin-top:0}
.faq-a p{margin:0 0 .8em;max-width:64ch;font:450 1rem/1.62 var(--display);color:var(--ink2);opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .3s cubic-bezier(.2,.8,.2,1)}
.faq-a-in>p:last-child{margin-bottom:clamp(22px,2.2vw,30px)}
.faq-item.open .faq-a{grid-template-rows:1fr}
.faq-item.open .faq-a p{opacity:1;transform:none}
.faq-link{position:relative;color:var(--ink);font-weight:700}
.faq-link::after{content:"";position:absolute;left:0;right:0;bottom:-3px;border-bottom:2px solid var(--blue);transform:scaleX(.35);transform-origin:0 50%;transition:transform .2s cubic-bezier(.3,.7,.2,1)}
.faq-link:hover::after,.faq-link:focus-visible::after{transform:scaleX(1)}
.faq-link:focus-visible{outline:2px dashed var(--ink);outline-offset:3px}
/* reduced motion: the answer simply appears */
.faq.rm .faq-a,.faq.rm .faq-a p,.faq.rm .faq-pm,.faq.rm .faq-pm::after,.faq.rm .faq-item::after{transition:none!important}
@media (prefers-reduced-motion:reduce){.faq-a,.faq-a p,.faq-pm,.faq-pm::before,.faq-pm::after,.faq-item::after{transition:none!important}}
/* phones: same hierarchy, one column; rows stay number → question → +/− */
@media (max-width:899px),(orientation:portrait) and (max-width:1100px){
 .faq-in{grid-template-columns:1fr;gap:34px}
 .faq-head h2{font-size:clamp(44px,14vw,86px)}
 .faq-btn{grid-template-columns:34px minmax(0,1fr) 30px;gap:10px;padding:20px 0}
 .faq-txt{font-size:1rem}
 .faq-pm{width:28px;height:28px}
 .faq-a-in{padding-left:44px;padding-right:0}
 .faq-a p{font-size:.95rem}
}