/* FAQ (#faq, 2026-10-23): the owner wants the page to explain itself with pictures and "the FAQ at the bottom, which can
   redirect to more information about boring stuff". The last room before the footer: a dark steel back wall under one
   warm lamp, with cream enamel question plates screwed to it (brass screws, a steel bezel, a brass knob that turns + into
   - when a plate opens). Calm on purpose: no glow, short motion, dark ink on cream. Each plate is a <details>, so it opens
   with a tap, Enter or Space and needs no script. The icons are pieces already on the page (army Eggbots and stickers,
   the membership cards, the high-score cup). */
.faq-sec{position:relative;isolation:isolate;padding:60px 0 96px}
.faq-sec::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    var(--sx-grain,none) 0 0/220px 220px,
    var(--sx-scuff,none) 0 0/420px 420px,
    radial-gradient(ellipse 52% 62% at 50% 0,rgba(255,170,92,.085),rgba(255,170,92,0) 72%),
    linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,0)) 0 0/100% 64px no-repeat,
    linear-gradient(to bottom,#141316,#111012 60%,#0c0b0d)}
/* the bone plate (sa176-03, as Monthly best's) is not toned by cab.js: dark stamped ink */
#faq-h>span{color:#2b1806;text-shadow:0 1px 0 rgba(255,236,190,.55),0 -1px 0 rgba(0,0,0,.3)}

.faq{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 22px;align-items:start;max-width:1100px;margin:40px auto 0}
/* two stacks (questions 1-4 and 5-8, so phones read them in order): an open answer only pushes down its own stack, never leaves a hole beside it */
.faq-col{display:grid;gap:18px;align-content:start;min-width:0}

/* one question: a cream enamel plate in a thin steel bezel, a brass screw in each corner */
.faq-q{position:relative;border-radius:12px;color:#2a1a0c;
  background:
    radial-gradient(circle at 13px 13px,#fbe8a8 0 1.2px,#d8aa4b 2.1px,#8c6321 3.6px,rgba(40,24,8,.45) 4.6px,transparent 5.3px),
    radial-gradient(circle at calc(100% - 13px) 13px,#fbe8a8 0 1.2px,#d8aa4b 2.1px,#8c6321 3.6px,rgba(40,24,8,.45) 4.6px,transparent 5.3px),
    radial-gradient(circle at 13px calc(100% - 13px),#fbe8a8 0 1.2px,#d8aa4b 2.1px,#8c6321 3.6px,rgba(40,24,8,.45) 4.6px,transparent 5.3px),
    radial-gradient(circle at calc(100% - 13px) calc(100% - 13px),#fbe8a8 0 1.2px,#d8aa4b 2.1px,#8c6321 3.6px,rgba(40,24,8,.45) 4.6px,transparent 5.3px),
    var(--sx-scuff,none) 0 0/420px 420px,
    linear-gradient(180deg,#f2e6ca,#e7d6b2 55%,#dac69e);
  box-shadow:inset 0 1px 0 rgba(255,252,240,.85),inset 0 -2px 0 rgba(120,84,40,.3),inset 0 0 0 1px rgba(110,74,34,.32),
    0 0 0 2px #0b0a0b,0 0 0 4px #2d2a26,0 0 0 5px #46423c,0 12px 20px rgba(0,0,0,.5)}
.faq-q>summary{display:grid;grid-template-columns:56px minmax(0,1fr) 30px;align-items:center;gap:14px;min-height:76px;padding:10px 26px 10px 28px;
  border-radius:12px;cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
.faq-q>summary::-webkit-details-marker{display:none}
.faq-q>summary::marker{content:""}
.faq-q>summary:focus-visible{outline:3px solid #ffd27a;outline-offset:7px}

.faq-ic{display:flex;align-items:center;justify-content:center;width:56px;height:54px}
.faq-ic img{display:block;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 3px 3px rgba(60,38,10,.45));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.faq-ic .ga{width:54px;transform:rotate(-8deg);filter:drop-shadow(0 3px 3px rgba(60,38,10,.5));transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.faq-ic .ga.p-sa180-03{width:40px;transform:none}
@media (hover:hover){
  .faq-q>summary:hover .faq-ic img,.faq-q>summary:hover .faq-ic .ga{transform:rotate(-4deg) scale(1.08)}
  .faq-q>summary:hover .faq-k{filter:brightness(1.08)}
}
.faq-t{font:800 20px/1.15 var(--f-display);letter-spacing:.035em;text-transform:uppercase;color:#2a1a0c;text-shadow:0 1px 0 rgba(255,250,232,.6)}

/* the brass knob: + while shut, - while open */
.faq-k{position:relative;width:30px;height:30px;border-radius:50%;
  background:radial-gradient(circle at 38% 32%,#fff2c2,#e3b75c 42%,#a87927 78%,#6b4a14);
  box-shadow:0 0 0 1px rgba(60,38,10,.6),0 2px 3px rgba(0,0,0,.35),inset 0 -1px 0 rgba(0,0,0,.25);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.faq-k::before,.faq-k::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:3px;margin:-1.5px 0 0 -6px;border-radius:2px;background:#4a300c;
  box-shadow:0 1px 0 rgba(255,236,190,.45);transition:transform .3s cubic-bezier(.3,1.3,.5,1)}
.faq-k::after{transform:rotate(90deg)}
.faq-q[open] .faq-k{transform:rotate(180deg)}
.faq-q[open] .faq-k::after{transform:rotate(0deg)}

/* the answer: under an engraved line, lined up with the question's words */
.faq-a{margin:0 18px;padding:14px 12px 22px 80px;border-top:1px solid rgba(110,74,34,.3);box-shadow:inset 0 1px 0 rgba(255,250,232,.55)}
.faq-q[open] .faq-a{animation:faq-in .26s ease-out}
@keyframes faq-in{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.faq-a p{font:500 15.5px/1.6 var(--f-body);color:#3b2a17;max-width:62ch}
.faq-a p+p{margin-top:8px}
/* where to read more: the site's own stamped key (cab.js slot key-faq, the deck's dark scrap key sa03-details, drawn by
   drawBtn with the same press, sweep and click as every other key on the page) with one short word on its face */
.faq-a .faq-go{display:flex;margin-top:12px}
.faq-go .btn.key{margin-left:-6px}
.faq-go .key:focus-visible{outline:3px solid #b8561c;outline-offset:2px}
/* the Workshop card's Soon key jumps here (#faq-work) and opens it: leave room above it */
#faq-work{scroll-margin-top:96px}

.ns.rm .faq-q[open] .faq-a{animation:none}
.ns.rm .faq-k,.ns.rm .faq-k::before,.ns.rm .faq-k::after,.ns.rm .faq-ic img,.ns.rm .faq-ic .ga{transition:none}
@media (prefers-reduced-motion:reduce){
  .faq-q[open] .faq-a{animation:none}
  .faq-k,.faq-k::before,.faq-k::after,.faq-ic img,.faq-ic .ga{transition:none}
}

/* one column on phones; the answer runs the plate's full width */
@media (max-width:760px){
  .faq-sec{padding:44px 0 72px}
  .faq{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:28px}
  .faq-col{gap:14px}
  .faq-q>summary{grid-template-columns:44px minmax(0,1fr) 28px;gap:12px;min-height:68px;padding:10px 20px 10px 22px}
  .faq-ic{width:44px;height:44px}
  .faq-ic .ga{width:44px}.faq-ic .ga.p-sa180-03{width:34px}
  .faq-t{font-size:17.5px}
  .faq-k{width:28px;height:28px}
  .faq-a{margin:0 12px;padding:12px 10px 20px}
  .faq-a p{font-size:15px}
}