/* Quiz night guide pages (made by tools/guides.js): one readable column on the chalk-and-wood look of the home page. */
.guide-langs { display: flex; gap: 4px; margin-left: auto; }
.guide-langs a { color: var(--muted); text-decoration: none; font: 700 .85rem var(--font); letter-spacing: .08em; padding: 6px 8px; border-radius: 8px; }
.guide-langs a:hover { color: var(--brass-l); }
.guide-langs a[aria-current] { color: var(--wood-8); background: var(--brass); }

.guide { background: linear-gradient(180deg, rgb(15 8 5 / .9), var(--wood-9) 520px), url('../img/wood-bg.webp') center top / cover, var(--wood-9); }
.guide .narrow { display: grid; gap: 20px; padding-block: 56px 72px; }
.guide .neon { font-size: clamp(2.1rem, 5vw, 3.6rem); }
.guide .lead { max-width: none; color: var(--muted); }

.step { margin-top: 20px; padding: 24px 24px 22px; background: rgb(42 23 12 / .72); border: 1px solid rgb(217 165 74 / .22); border-radius: 14px; }
.step h2 { display: flex; align-items: center; gap: 14px; font: 400 1.45rem/1.2 var(--display); color: var(--brass-l); margin-bottom: 12px; }
.step .n {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  font: 400 1.15rem var(--display); color: #fff2f8; border: 2px solid var(--pink);
  box-shadow: 0 0 10px rgb(255 79 163 / .55), inset 0 0 8px rgb(255 79 163 / .35);
}
.step ul, .step ol { margin: 0; padding-left: 1.25em; display: grid; gap: 8px; }
.step li::marker { color: var(--brass); }
.step .qb-tip { margin-top: 14px; padding: 10px 14px; border-left: 3px solid var(--cyan); background: rgb(62 230 255 / .07); border-radius: 0 8px 8px 0; color: var(--cream); }


.boxes { list-style: none; padding-left: 0 !important; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.boxes li { position: relative; padding-left: 32px; }
.boxes li::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border: 2px solid var(--brass); border-radius: 4px; }

.sample > p { color: var(--muted); margin-bottom: 14px; }
.qs { gap: 12px !important; }
.qs .opts { display: block; color: var(--muted); font-size: .95rem; }
.answers { margin-top: 18px; }
.answers summary { cursor: pointer; font: 400 1.05rem var(--display); color: var(--brass-l); }
.answers ol { margin-top: 10px; }

.cta-box { margin-top: 28px; padding: 32px 24px; text-align: center; display: grid; gap: 14px; justify-items: center; border-radius: 14px;
  background: radial-gradient(circle at 50% 0, rgb(255 79 163 / .16), transparent 70%), var(--wood-7); border: 1px solid rgb(217 165 74 / .35); }
.cta-box h2 { font: 400 1.6rem/1.2 var(--display); color: #fff2f8; text-shadow: 0 0 14px rgb(255 79 163 / .6); }
.cta-box p { color: var(--muted); max-width: 40em; }

@media (max-width: 600px) { .step { padding: 18px 16px; } .step h2 { font-size: 1.2rem; } }
@media print {
  .top, .foot, .cta-box, .qb-tip { display: none; }
  body, .guide { background: #fff; color: #000; }
  .step { background: none; border-color: #999; break-inside: avoid; }
  .neon, .step h2, .eyebrow, .guide .lead, .qs .opts { color: #000; text-shadow: none; }
  .answers { break-before: page; }
}