.hpq {
  --hpq-radius: 18px;
  --hpq-border: #e8e8e8;
  --hpq-muted: #6b7280;
  --hpq-text: #141414;
  --hpq-bg: #fff;
  /* Space reserved when auto-scrolling, so a sticky header (revealed on
     scroll-up) or a mobile anchor ad doesn't cover the content we just
     scrolled to. Tune these to match your theme/ad setup if needed. */
  --hpq-scroll-top-offset: 12px;
  --hpq-scroll-bottom-offset: 12px;
  max-width: 860px;
  margin: 32px auto;
  color: var(--hpq-text);
  font-family: inherit;
}

.hpq * { box-sizing: border-box; }
.hpq__header { margin-bottom: 14px; }
.hpq__intro { margin: 0; color: var(--hpq-muted); }
.hpq__question-row { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 16px; margin-bottom:14px; }
.hpq__question-row .hpq__question { margin:0; flex:1 1 260px; min-width:0; }
.hpq__q-index { display:inline-block; margin-right:8px; padding:2px 8px; border-radius:999px; background:#f0f0f0; color:var(--hpq-muted); font-size:12px; font-weight:700; vertical-align:middle; }
.hpq__stats { display:flex; flex:0 0 auto; gap:10px; margin-left:auto; white-space:nowrap; font-size:12px; color:var(--hpq-muted); }
.hpq__stats strong { color:var(--hpq-text); font-size:14px; }
.hpq__card { background: var(--hpq-bg); border: 1px solid var(--hpq-border); border-radius: var(--hpq-radius); overflow:hidden; box-shadow: 0 12px 40px rgba(0,0,0,.06); }
.hpq__image-wrap { position:relative; aspect-ratio: 16/10; background:#f5f5f5; overflow:hidden; }
.hpq__image { display:block; width:100%; height:100%; object-fit:cover; }
.hpq__image-loading { position:absolute; inset:0; display:grid; place-items:center; color:#777; background:linear-gradient(110deg,#f6f6f6 8%,#ededed 18%,#f6f6f6 33%); background-size:200% 100%; animation: hpq-shimmer 1.3s infinite linear; }
.hpq__image-loading[hidden] { display:none; }
.hpq.is-loading .hpq__image { opacity:0; }
.hpq__body { padding: clamp(18px, 3vw, 28px); }
.hpq__question { font-weight:800; font-size:18px; }
.hpq__choices { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.hpq__choice { width:100%; display:flex; align-items:center; gap:12px; min-height:58px; padding:12px 14px; text-align:left; border:1px solid #ddd; border-radius:14px; background:#fff; color:inherit; cursor:pointer; transition: transform .15s ease, border-color .15s ease, background .15s ease; }
.hpq__choice:hover:not(:disabled) { transform:translateY(-1px); border-color:#999; }
.hpq__choice:focus-visible, .hpq__next:focus-visible, .hpq__detail-link:focus-visible { outline:3px solid currentColor; outline-offset:2px; }
.hpq__choice-number { display:grid; place-items:center; width:30px; height:30px; flex:0 0 30px; border-radius:9px; background:#f3f3f3; font-size:12px; font-weight:800; }
.hpq__choice-label { line-height:1.45; }
.hpq__choice.is-selected { border-color:#888; }
.hpq__choice.is-correct { border-color:#1d7a4a; background:#edf8f1; }
.hpq__choice.is-incorrect { border-color:#b44; background:#fff1f1; }
.hpq__choice:disabled { cursor:default; opacity:1; }
.hpq__result { margin-top:16px; padding:18px; border-radius:14px; background:#f7f7f7; display:grid; gap:6px; }
.hpq__result[hidden] { display:none; }
.hpq__result.is-correct { background:#edf8f1; }
.hpq__result.is-incorrect { background:#fff6e8; }
.hpq__result.is-error { background:#fff1f1; color:#8b2323; }
.hpq__result-title { font-size:16px; }
.hpq__result-name { font-size:23px; font-weight:850; line-height:1.25; }
.hpq__result-copy { color:var(--hpq-muted); font-size:14px; line-height:1.65; }
.hpq__detail-link { display:inline-flex; align-items:center; gap:4px; width:max-content; max-width:100%; margin-top:4px; font-weight:800; text-decoration:underline; text-underline-offset:3px; }
.hpq__detail-link::after { content:"↗"; font-weight:700; text-decoration:none; }
.hpq__excerpt { margin:6px 0 0; color:var(--hpq-muted); line-height:1.7; font-size:13px; }
.hpq__next { margin-top:14px; width:100%; min-height:52px; border:0; border-radius:14px; background:#141414; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.hpq__next:hover { opacity:.92; }
.hpq__note { margin:10px 2px 0; color:#888; font-size:11px; line-height:1.6; }
@keyframes hpq-shimmer { to { background-position:-200% 0; } }
@media (max-width: 640px) {
  .hpq {
    margin:24px auto;
    /* A typical mobile sticky header that slides in on scroll-up, plus a
       bottom anchor ad banner, need more breathing room than desktop. */
    --hpq-scroll-top-offset: 64px;
    --hpq-scroll-bottom-offset: 90px;
  }
  .hpq__choices { grid-template-columns:1fr; }
  .hpq__image-wrap { aspect-ratio: 4/3; }
}

.hpq__image-caption {
  position:absolute;
  left:10px;
  right:auto;
  bottom:10px;
  max-width: calc(100% - 20px);
  padding:5px 9px;
  border-radius:7px;
  background:rgba(0,0,0,.4);
  color:rgba(255,255,255,.8);
  font-size:11px;
  line-height:1.5;
  backdrop-filter:blur(3px);
}
.hpq__image-caption a { color:inherit; text-decoration:none; }
.hpq__image-caption a:hover, .hpq__image-caption a:focus-visible { text-decoration:underline; }

/* [heritage_photo_teaser] — a compact card meant to sit on other pages and
   funnel visitors to the full quiz page. Deliberately namespaced with its
   own hpq-teaser prefix (rather than reusing .hpq) since it's a much
   simpler, non-interactive (plain-links-only) component. */
.hpq-teaser {
  display: flex;
  gap: 0;
  max-width: 720px;
  margin: 28px auto;
  border: 1px solid #e8e8e8;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 8px 28px rgba(0,0,0,.05);
}
.hpq-teaser * { box-sizing: border-box; }
.hpq-teaser__media { flex: 0 0 38%; max-width: 260px; background:#f5f5f5; }
.hpq-teaser__media img { display:block; width:100%; height:100%; object-fit:cover; }
.hpq-teaser__body { flex: 1 1 auto; min-width:0; padding: 16px 20px; display:flex; flex-direction:column; gap:8px; }
.hpq-teaser__eyebrow { margin:0; font-size:11px; font-weight:800; letter-spacing:.08em; color:#6b7280; text-transform:uppercase; }
.hpq-teaser__question { margin:0; font-weight:800; font-size:16px; color:#141414; }
.hpq-teaser__choices { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:2px; }
.hpq-teaser__choice { display:flex; align-items:center; gap:7px; padding:8px 10px; border:1px solid #e2e2e2; border-radius:10px; text-decoration:none; color:#141414; font-size:13px; font-weight:700; line-height:1.3; transition: border-color .15s ease, background .15s ease; }
.hpq-teaser__choice:hover { border-color:#999; background:#fafafa; }
.hpq-teaser__choice-number { display:grid; place-items:center; width:20px; height:20px; flex:0 0 20px; border-radius:999px; background:#f0f0f0; font-size:11px; font-weight:800; }
.hpq-teaser__choice-label { min-width:0; }
.hpq-teaser__cta { margin-top:6px; font-size:13px; font-weight:700; color:#141414; text-decoration:underline; text-underline-offset:3px; width:max-content; }
@media (max-width: 560px) {
  .hpq-teaser { flex-direction:column; }
  .hpq-teaser__media { max-width:none; aspect-ratio:16/9; }
  .hpq-teaser__choices { grid-template-columns:1fr; }
}