/* Self-contained quiz. All colours follow the site's light/dark tokens. */
.quiz-page { padding-block:48px 70px; }
.quiz-heading h1 { font-size:clamp(2.5rem,5.2vw,4.5rem); }
.quiz-intro { display:grid; grid-template-columns:1.2fr 1fr; align-items:center; gap:clamp(28px,5vw,80px); margin-top:35px; }
.quiz-intro .lead { max-width:620px; }
.quiz-intro p + p { margin-top:18px; }
.quiz-intro .small { margin-top:18px; }
.quiz-facts { display:flex; flex-wrap:wrap; gap:10px 22px; list-style:none; padding:0; margin:25px 0; color:var(--wine); font-size:.9rem; font-weight:550; }
.quiz-facts li { padding-block:6px; border-bottom:1px solid var(--line); }
.quiz-art { position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; padding:24px; border:1px solid var(--line); border-radius:32px; background:radial-gradient(circle at 95% 0,var(--glow),var(--wash) 75%); transform:rotate(3deg); }
.quiz-element { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:24px 8px; border:1px solid var(--control); border-radius:18px; background:var(--surface); color:var(--wine); font-size:clamp(2rem,4vw,3.3rem); line-height:1.25; font-weight:500; }
.quiz-element small { font-size:.8rem; color:var(--muted); font-weight:400; margin-top:8px; }
.quiz-art-question { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%) rotate(-3deg); display:grid; place-items:center; width:72px; height:72px; border:6px solid var(--wash); border-radius:50%; background:var(--wine); color:var(--on-wine); font:500 2.6rem Georgia,serif; }
.quiz-round,.quiz-result,.quiz-fallback { max-width:880px; margin:40px auto 0; }
.quiz-progress-copy { display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 22px; font-size:.9rem; color:var(--muted); margin-bottom:12px; }
.quiz-round progress { display:block; width:100%; height:6px; border:none; border-radius:8px; margin-bottom:26px; overflow:hidden; background:var(--wash); color:var(--wine); accent-color:var(--wine); }
.quiz-round progress::-webkit-progress-bar { background:var(--wash); border-radius:8px; }
.quiz-round progress::-webkit-progress-value { background:var(--wine); border-radius:8px; }
.quiz-round progress::-moz-progress-bar { background:var(--wine); border-radius:8px; }
.quiz-card { padding:clamp(22px,4vw,44px); background:radial-gradient(circle at 100% 0,var(--wash),var(--surface) 65%); border:1px solid var(--line); border-radius:var(--radius); }
.quiz-card .eyebrow { margin-bottom:16px; }
.quiz-card h2 { font-size:clamp(1.45rem,2.8vw,2.1rem); line-height:1.3; text-wrap:initial; letter-spacing:-.025em; hyphens:none; overflow-wrap:break-word; }
.quiz-page [tabindex="-1"] { scroll-margin-top:calc(var(--header-height) + 24px); }
.quiz-card fieldset { padding:0; margin:28px 0 24px; border:0; min-width:0; }
.quiz-answers { display:grid; gap:12px; }
.quiz-answer { position:relative; display:flex; align-items:center; gap:16px; padding:18px 20px; min-height:64px; border:1px solid var(--control); border-radius:14px; background:var(--surface); cursor:pointer; }
.quiz-answer input { position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:inherit; }
.quiz-answer:has(input:focus-visible) { outline:3px solid var(--wine); outline-offset:4px; }
.quiz-answer:has(input:checked) { border-color:var(--wine); box-shadow:inset 0 0 0 1px var(--wine); background:var(--wash); }
.quiz-answer:hover:not(:has(input:disabled)) { border-color:var(--wine); }
.quiz-answer-letter { display:grid; place-items:center; border-radius:8px; width:34px; height:34px; flex-shrink:0; background:var(--wash); color:var(--wine); font-size:.85rem; font-weight:650; }
.quiz-answer:has(input:checked) .quiz-answer-letter { background:var(--wine); color:var(--on-wine); }
.quiz-answer-copy { min-width:0; overflow-wrap:anywhere; }
.quiz-answer-mark { display:block; font-size:.8rem; font-weight:600; }
.quiz-answer-mark:empty { display:none; }
.quiz-answer.is-correct { border-color:var(--wine); background:var(--wash); }
.quiz-answer.is-correct .quiz-answer-mark { color:var(--wine); }
.quiz-answer.is-incorrect { box-shadow:none; border-style:dashed; }
.quiz-answer.is-incorrect .quiz-answer-mark { color:var(--error); }
.quiz-answer:has(input:disabled) { cursor:default; }
.quiz-error { color:var(--error); margin-bottom:16px; }
.quiz-feedback { margin-top:28px; padding-top:26px; border-top:1px solid var(--line); }
.quiz-feedback h3 { font-size:1.3rem; color:var(--wine); letter-spacing:-.02em; }
.quiz-feedback p { margin-top:15px; }
.quiz-correct-answer { font-weight:600; }
.quiz-links { display:flex; flex-direction:column; align-items:flex-start; gap:6px; margin-block:16px 22px; font-size:.85rem; }
.quiz-links a { display:inline-flex; align-items:center; min-height:44px; overflow-wrap:anywhere; }
.quiz-result-banner { padding:clamp(24px,5vw,48px); border:1px solid var(--line); border-radius:var(--radius); background:radial-gradient(circle at 100% 0,var(--glow),var(--wash) 75%); text-align:center; }
.quiz-result-banner h2 { font-size:clamp(1.8rem,3vw,2.6rem); }
.quiz-result-score { font-size:clamp(2.1rem,4vw,3.3rem); font-weight:650; letter-spacing:-.04em; margin-block:24px 14px; }
.quiz-result-banner .button { margin-block:26px 14px; }
.quiz-reading,.quiz-review { margin-top:40px; }
.quiz-reading h3,.quiz-review h3 { margin-bottom:20px; }
.quiz-reading > div { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr)); gap:14px; }
.quiz-reading a { display:flex; align-items:center; min-height:64px; padding:16px 22px; border:1px solid var(--control); border-radius:12px; background:var(--surface); text-decoration:none; color:var(--wine); }
.quiz-review details,.quiz-fallback details { border-bottom:1px solid var(--line); padding-block:8px; }
.quiz-review summary,.quiz-fallback summary { padding:16px 6px; min-height:48px; font-weight:550; }
.quiz-review details p,.quiz-fallback details p { margin-block:14px; overflow-wrap:anywhere; }
.quiz-fallback > p { margin-block:20px; }
.quiz-fallback h2 { font-size:2rem; }
.quiz-result > .text-link { margin-top:30px; }
.quiz-footnote { max-width:880px; margin:45px auto 0; }
.quiz-playing .quiz-heading h1 { font-size:clamp(1.7rem,3vw,2.3rem); }
.quiz-playing .quiz-heading h1 br { display:none; }
@media(max-width:700px) {
  .quiz-page { padding-top:30px; }
  .quiz-intro { grid-template-columns:1fr; }
  .quiz-art { max-width:360px; width:100%; margin:12px auto; }
  .quiz-round,.quiz-result { margin-top:30px; }
  .quiz-answer { padding:16px 14px; gap:12px; }
}
@media(prefers-reduced-motion:no-preference) {
  .quiz-feedback { animation:quiz-reveal .2s ease-out; }
  .quiz-answer { transition:background-color .15s,border-color .15s; }
}
@keyframes quiz-reveal { from { opacity:.6; transform:translateY(5px); } to { opacity:1; transform:translateY(0); } }