/* JH Quizzes — v3
   Layout: one calm card per quiz, ink-on-white with a warm gold accent (matches the site's Public Sans + near-black buttons).
   Every selector is scoped under .jhq / .jhq-hubpage and theme button styles are neutralised first. */

.jhq, .jhq-hubpage, .jhq-more {
  --jhq-ink: #16181b;
  --jhq-ink-2: #3a4048;
  --jhq-muted: #656c76;
  --jhq-line: #e3e5e8;
  --jhq-soft: #f4f5f6;
  --jhq-bg: #ffffff;
  --jhq-gold: #f2b100;
  --jhq-gold-soft: #fff5d6;
  --jhq-gold-ink: #6b4d00;
  --jhq-right: #0e7a53;
  --jhq-right-bg: #e9f6f0;
  --jhq-wrong: #c03a29;
  --jhq-wrong-bg: #fdeeeb;
  --jhq-btn: #16181b;
  --jhq-btn-ink: #ffffff;
  --jhq-radius: 18px;
}
.s-dark .jhq, .s-dark .jhq-hubpage, .s-dark .jhq-more,
[data-theme="dark"] .jhq, [data-theme="dark"] .jhq-hubpage, [data-theme="dark"] .jhq-more {
  --jhq-ink: #eef0f2; --jhq-ink-2: #c9ced4; --jhq-muted: #9aa2ac; --jhq-line: #2c3137; --jhq-soft: #1f2328;
  --jhq-bg: #16191d; --jhq-gold-soft: #3a2f0c; --jhq-gold-ink: #f6d36b;
  --jhq-right: #4fd19a; --jhq-right-bg: #133326; --jhq-wrong: #ff8a7a; --jhq-wrong-bg: #3a1c18;
  --jhq-btn: #f2b100; --jhq-btn-ink: #16181b;
}

/* ---------- neutralise theme styles ---------- */
.jhq, .jhq *, .jhq *::before, .jhq *::after,
.jhq-hubpage, .jhq-hubpage *, .jhq-hubpage *::before, .jhq-hubpage *::after,
.jhq-more, .jhq-more * { box-sizing: border-box; }

.jhq :where(button), .jhq :where(button):hover, .jhq :where(button):focus, .jhq :where(button):active,
.jhq-hubpage :where(button), .jhq-hubpage :where(button):hover, .jhq-hubpage :where(button):focus, .jhq-hubpage :where(button):active {
  appearance: none; -webkit-appearance: none;
  height: auto; min-height: 0; max-height: none; width: auto;
  margin: 0; padding: 0; border: 0; border-radius: 0;
  background: none; color: inherit; box-shadow: none; opacity: 1;
  font: inherit; line-height: inherit; letter-spacing: normal; text-transform: none; text-align: inherit;
  white-space: normal; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .1s ease;
}
.jhq p, .jhq-hubpage p, .jhq-more p { margin: 0; }
.jhq h2, .jhq h3, .jhq h4, .jhq-hubpage h1, .jhq-hubpage h2, .jhq-hubpage h3, .jhq-more h2, .jhq-more h3 { margin: 0; padding: 0; border: 0; text-transform: none; letter-spacing: -0.01em; }
.jhq ul, .jhq ol, .jhq-hubpage ul { margin: 0; padding: 0; list-style: none; }
.jhq li, .jhq-hubpage li { margin: 0; }
.jhq a, .jhq-hubpage a, .jhq-more a { text-decoration: none; }

/* ---------- quiz card ---------- */
.jhq {
  position: relative;
  max-width: 780px;
  margin: 8px auto 40px;
  color: var(--jhq-ink);
  background: var(--jhq-bg);
  border: 1px solid var(--jhq-line);
  border-radius: var(--jhq-radius);
  font-size: 17px;
  line-height: 1.55;
  text-align: left;
}
.jhq .jhq-head { padding: 30px 34px 4px; }
.jhq .jhq-kicker {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jhq-muted);
}
.jhq .jhq-tag {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--jhq-gold-soft); color: var(--jhq-gold-ink);
}
.jhq .jhq-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--jhq-gold); }
.jhq .jhq-title { font-size: clamp(24px, 3.4vw, 30px); line-height: 1.15; font-weight: 800; color: var(--jhq-ink); text-wrap: balance; }

.jhq .jhq-body { padding: 18px 34px 34px; }

/* intro */
.jhq .jhq-desc { color: var(--jhq-ink-2); font-size: 1.02em; max-width: 60ch; margin-bottom: 18px; }
.jhq .jhq-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 26px; color: var(--jhq-muted); font-size: .9em; }
.jhq .jhq-facts li { display: inline-flex; align-items: center; gap: 6px; }
.jhq .jhq-facts li + li::before { content: ""; width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: .5; margin-right: 12px; }
.jhq .jhq-facts .jhq-best { color: var(--jhq-gold-ink); font-weight: 700; }

.jhq .jhq-lengths { margin-bottom: 26px; }
.jhq .jhq-lengths-label { display: block; font-size: .85em; font-weight: 700; color: var(--jhq-ink); margin-bottom: 10px; }
.jhq .jhq-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.jhq .jhq-chip {
  display: inline-flex; align-items: center; padding: 9px 18px; border-radius: 999px;
  border: 1.5px solid var(--jhq-line); background: var(--jhq-bg); color: var(--jhq-ink);
  font-size: .9em; font-weight: 600;
}
.jhq .jhq-chip:hover { border-color: var(--jhq-ink); background: var(--jhq-bg); color: var(--jhq-ink); }
.jhq .jhq-chip[aria-checked="true"], .jhq .jhq-chip[aria-checked="true"]:hover { background: var(--jhq-ink); border-color: var(--jhq-ink); color: var(--jhq-bg); }

.jhq .jhq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: 12px;
  border: 1.5px solid var(--jhq-line); background: var(--jhq-bg); color: var(--jhq-ink);
  font-size: .95em; font-weight: 700; text-align: center;
}
.jhq .jhq-btn:hover { border-color: var(--jhq-ink); background: var(--jhq-bg); color: var(--jhq-ink); }
.jhq .jhq-btn:active { transform: translateY(1px); }
.jhq .jhq-primary, .jhq .jhq-primary:focus { background: var(--jhq-btn); border-color: var(--jhq-btn); color: var(--jhq-btn-ink); }
.jhq .jhq-primary:hover { background: var(--jhq-ink-2); border-color: var(--jhq-ink-2); color: var(--jhq-btn-ink); }
.s-dark .jhq .jhq-primary:hover { background: #ffc933; border-color: #ffc933; }
.jhq .jhq-btn .jhq-arrow { transition: transform .15s ease; }
.jhq .jhq-btn:hover .jhq-arrow { transform: translateX(3px); }
.jhq :where(button):focus-visible, .jhq-hubpage :where(button, a):focus-visible, .jhq-more a:focus-visible { outline: 3px solid var(--jhq-gold); outline-offset: 2px; }
.jhq [tabindex="-1"]:focus { outline: none; }

/* question */
.jhq .jhq-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: .85em; font-weight: 600; color: var(--jhq-muted); margin-bottom: 10px; font-variant-numeric: tabular-nums; }
.jhq .jhq-count b { color: var(--jhq-ink); }
.jhq .jhq-score { color: var(--jhq-right); }
.jhq .jhq-bar { height: 6px; border-radius: 99px; background: var(--jhq-soft); overflow: hidden; margin-bottom: 26px; }
.jhq .jhq-bar span { display: block; height: 100%; background: var(--jhq-gold); border-radius: 99px; transition: width .35s ease; }

.jhq .jhq-question { font-size: 1.22em; line-height: 1.4; font-weight: 700; color: var(--jhq-ink); margin-bottom: 20px; }
.jhq .jhq-question p + p { margin-top: .5em; }
.jhq .jhq-roman { margin: 12px 0 0; font-size: .82em; font-weight: 500; line-height: 1.5; color: var(--jhq-ink-2); }
.jhq .jhq-roman li { position: relative; padding: 9px 0 9px 2.6em; border-top: 1px solid var(--jhq-line); list-style: none; }
.jhq .jhq-roman li:last-child { border-bottom: 1px solid var(--jhq-line); }
.jhq .jhq-roman li::before { content: attr(data-n); position: absolute; left: 0; top: 9px; min-width: 1.9em; padding: 0 .4em; border-radius: 6px; background: var(--jhq-soft); font-weight: 700; font-size: .85em; text-align: center; color: var(--jhq-ink); }

.jhq .jhq-options { display: grid; gap: 10px; }
.jhq .jhq-option {
  position: relative; display: flex; align-items: flex-start; gap: 14px; width: 100%;
  padding: 14px 16px; border-radius: 14px;
  border: 1.5px solid var(--jhq-line); background: var(--jhq-bg); color: var(--jhq-ink);
  font-size: 1em; line-height: 1.45; font-weight: 500; text-align: left;
}
.jhq .jhq-option:hover:not(:disabled) { border-color: var(--jhq-ink); background: var(--jhq-soft); color: var(--jhq-ink); }
.jhq .jhq-option:disabled, .jhq .jhq-option:disabled:hover { cursor: default; color: var(--jhq-ink); }
.jhq .jhq-letter {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--jhq-soft); border: 1px solid var(--jhq-line);
  font-size: .8em; font-weight: 800; color: var(--jhq-muted); line-height: 1;
}
.jhq .jhq-option:hover:not(:disabled) .jhq-letter { background: var(--jhq-bg); color: var(--jhq-ink); }
.jhq .jhq-text { padding-top: 3px; min-width: 0; overflow-wrap: anywhere; }
.jhq .jhq-done .jhq-option:not(.jhq-right):not(.jhq-wrong) { opacity: .5; }
.jhq .jhq-option.jhq-right, .jhq .jhq-option.jhq-right:disabled { border-color: var(--jhq-right); background: var(--jhq-right-bg); }
.jhq .jhq-option.jhq-wrong, .jhq .jhq-option.jhq-wrong:disabled { border-color: var(--jhq-wrong); background: var(--jhq-wrong-bg); }
.jhq .jhq-option.jhq-right .jhq-letter { background: var(--jhq-right); border-color: var(--jhq-right); color: #fff; font-size: 0; }
.jhq .jhq-option.jhq-wrong .jhq-letter { background: var(--jhq-wrong); border-color: var(--jhq-wrong); color: #fff; font-size: 0; }
.jhq .jhq-option.jhq-right .jhq-letter::after { content: "✓"; font-size: 15px; }
.jhq .jhq-option.jhq-wrong .jhq-letter::after { content: "✕"; font-size: 13px; }

.jhq .jhq-next { margin-top: 20px; display: grid; gap: 16px; }
.jhq .jhq-feedback { padding: 14px 16px; border-radius: 14px; font-size: .95em; line-height: 1.5; }
.jhq .jhq-feedback.is-right { background: var(--jhq-right-bg); }
.jhq .jhq-feedback.is-wrong { background: var(--jhq-wrong-bg); }
.jhq .jhq-feedback strong { font-weight: 800; }
.jhq .jhq-feedback.is-right strong { color: var(--jhq-right); }
.jhq .jhq-feedback.is-wrong strong { color: var(--jhq-wrong); }
.jhq .jhq-explain { margin-top: 6px; color: var(--jhq-ink-2); }
.jhq .jhq-next .jhq-btn { justify-self: end; }

/* results */
.jhq .jhq-result { display: flex; align-items: center; gap: 26px; margin-bottom: 24px; }
.jhq .jhq-ring {
  --p: 0; flex: 0 0 auto; width: 118px; height: 118px; border-radius: 50%;
  display: grid; place-items: center;
  background: conic-gradient(var(--jhq-gold) calc(var(--p) * 1%), var(--jhq-soft) 0);
}
.jhq .jhq-ring span {
  width: 94px; height: 94px; border-radius: 50%; background: var(--jhq-bg);
  display: grid; place-items: center; font-size: 1.7em; font-weight: 800; letter-spacing: -0.02em; font-variant-numeric: tabular-nums;
}
.jhq .jhq-result-text h3 { font-size: 1.5em; font-weight: 800; line-height: 1.2; margin-bottom: 4px; color: var(--jhq-ink); }
.jhq .jhq-result-text p { color: var(--jhq-ink-2); }
.jhq .jhq-newbest { display: inline-block; margin-top: 8px; padding: 3px 10px; border-radius: 999px; background: var(--jhq-gold-soft); color: var(--jhq-gold-ink); font-weight: 700; font-size: .85em; }
.jhq .jhq-muted { color: var(--jhq-muted); font-size: .9em; margin-top: 4px; }
.jhq .jhq-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 30px; }

.jhq .jhq-review h4 { font-size: 1.05em; font-weight: 800; padding-top: 22px; margin-bottom: 14px; border-top: 1px solid var(--jhq-line); color: var(--jhq-ink); }
.jhq .jhq-review-item { padding: 16px 18px; border-radius: 14px; background: var(--jhq-soft); margin-bottom: 10px; font-size: .95em; }
.jhq .jhq-review-q { font-weight: 700; margin-bottom: 10px; color: var(--jhq-ink); }
.jhq .jhq-review-q .jhq-roman { font-size: .92em; }
.jhq .jhq-review-item > p { margin: 3px 0 0; }
.jhq .jhq-review-yours { color: var(--jhq-wrong); }
.jhq .jhq-review-right { color: var(--jhq-right); }
.jhq .jhq-review-item > p span { font-weight: 700; }
.jhq .jhq-review-x { color: var(--jhq-ink-2); margin-top: 8px !important; }

.jhq .jhq-live { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.jhq .jhq-noscript { padding: 18px 0; }

/* editor-only review box */
.jhq .jhq-admin { margin: 14px 34px 0; padding: 10px 14px; border-radius: 10px; background: #fff8e1; border: 1px solid #f0dc9c; font-size: 13px; color: #5c4a00; line-height: 1.5; }
.jhq .jhq-admin summary { cursor: pointer; font-weight: 700; }
.jhq .jhq-admin ul { margin: 8px 0 0 1.2em; list-style: disc; }
.jhq .jhq-admin li { margin: 6px 0; }
.jhq .jhq-admin p { margin: 6px 0; }
.jhq-unavailable { max-width: 780px; margin: 20px auto; padding: 22px; border: 1px dashed #d5d8dc; border-radius: 14px; text-align: center; }

/* ---------- cards (hub + "more quizzes") ---------- */
.jhq-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.jhq-card {
  position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0;
  padding: 22px 22px 20px; border-radius: var(--jhq-radius);
  border: 1px solid var(--jhq-line); background: var(--jhq-bg); color: var(--jhq-ink) !important;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.jhq-card:hover { border-color: var(--jhq-ink); transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(0,0,0,.35); }
.jhq-card .jhq-card-tag { align-self: flex-start; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jhq-muted); }
.jhq-card-fun .jhq-card-tag { color: var(--jhq-gold-ink); }
.jhq-card strong { font-size: 1.12em; line-height: 1.25; font-weight: 800; letter-spacing: -0.01em; text-wrap: balance; }
.jhq-card .jhq-card-desc { font-size: .92em; line-height: 1.5; color: var(--jhq-ink-2); }
.jhq-card .jhq-card-foot { margin-top: auto; padding-top: 12px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: .85em; color: var(--jhq-muted); font-variant-numeric: tabular-nums; }
.jhq-card .jhq-card-go { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--jhq-soft); color: var(--jhq-ink); font-weight: 700; transition: background .15s ease, color .15s ease; }
.jhq-card:hover .jhq-card-go { background: var(--jhq-ink); color: var(--jhq-bg); }
.jhq-card .jhq-card-best { display: none; padding: 2px 9px; border-radius: 999px; background: var(--jhq-gold-soft); color: var(--jhq-gold-ink); font-weight: 700; }
.jhq-card .jhq-card-best.is-set { display: inline-block; }

.jhq-card-feature { background: var(--jhq-ink); border-color: var(--jhq-ink); color: var(--jhq-bg) !important; }
.jhq-card-feature .jhq-card-tag { color: var(--jhq-gold); }
.jhq-card-feature .jhq-card-desc, .jhq-card-feature .jhq-card-foot { color: rgba(255,255,255,.78); }
.s-dark .jhq-card-feature .jhq-card-desc, .s-dark .jhq-card-feature .jhq-card-foot { color: rgba(0,0,0,.7); }
.jhq-card-feature .jhq-card-go { background: var(--jhq-gold); color: #16181b; }
.jhq-card-feature:hover .jhq-card-go { background: var(--jhq-gold); color: #16181b; }
@media (min-width: 640px) { .jhq-grid .jhq-card-feature { grid-column: span 2; } .jhq-card-feature strong { font-size: 1.45em; } }

/* "More quizzes" under each quiz */
.jhq-more { max-width: 780px; margin: 0 auto 48px; }
.jhq-more-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 14px; }
.jhq-more-head h2 { font-size: 1.2em; font-weight: 800; color: var(--jhq-ink); }
.jhq-more-head a { font-weight: 700; color: var(--jhq-ink); font-size: .92em; border-bottom: 2px solid var(--jhq-gold); }
.jhq-more .jhq-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* ---------- hub page ---------- */
.jhq-hubpage { max-width: 1180px; margin: 0 auto; padding-block: 44px 72px; padding-left: max(18px, env(safe-area-inset-left, 0px)); padding-right: max(18px, env(safe-area-inset-right, 0px)); color: var(--jhq-ink); font-size: 16px; line-height: 1.55; }
.jhq-hero { display: grid; gap: 14px; margin-bottom: 30px; max-width: 760px; }
.jhq-hero .jhq-eyebrow { font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jhq-muted); display: flex; align-items: center; gap: 8px; }
.jhq-hero .jhq-eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 3px; background: var(--jhq-gold); }
.jhq-hubpage .jhq-hero h1 { font-size: clamp(34px, 5.4vw, 54px); line-height: 1.04; font-weight: 800; letter-spacing: -0.03em; color: var(--jhq-ink); text-wrap: balance; }
.jhq-hero .jhq-sub { font-size: 1.12em; color: var(--jhq-ink-2); max-width: 60ch; }
.jhq-stats { display: flex; flex-wrap: wrap; gap: 8px 28px; margin-top: 6px; font-size: .95em; color: var(--jhq-muted); font-variant-numeric: tabular-nums; }
.jhq-stats b { color: var(--jhq-ink); font-size: 1.25em; font-weight: 800; margin-right: 4px; }

.jhq-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 22px; padding-bottom: 18px; border-bottom: 1px solid var(--jhq-line); }
.jhq-hubpage .jhq-filter button { padding: 9px 18px; border-radius: 999px; border: 1.5px solid var(--jhq-line); background: var(--jhq-bg); color: var(--jhq-ink); font-size: .92em; font-weight: 600; }
.jhq-hubpage .jhq-filter button:hover { border-color: var(--jhq-ink); background: var(--jhq-bg); color: var(--jhq-ink); }
.jhq-hubpage .jhq-filter button[aria-pressed="true"], .jhq-hubpage .jhq-filter button[aria-pressed="true"]:hover { background: var(--jhq-ink); border-color: var(--jhq-ink); color: var(--jhq-bg); }
.jhq-hubpage .jhq-filter button span { opacity: .6; margin-left: 4px; font-variant-numeric: tabular-nums; }
.jhq-group-title { font-size: 1.15em; font-weight: 800; margin: 34px 0 14px; color: var(--jhq-ink); }
.jhq-hubpage .jhq-group:first-of-type .jhq-group-title { margin-top: 4px; }
.jhq-hubpage.is-filtered .jhq-group-title { display: none; }
.jhq-hub-note { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--jhq-line); font-size: .9em; color: var(--jhq-muted); }
.jhq-hub-note a { color: var(--jhq-ink); font-weight: 700; border-bottom: 2px solid var(--jhq-gold); }

/* ---------- quiz pages: full width, no sidebar (the sidebar left a tall empty gap under short quizzes) ---------- */
body.jhq-page .main-sidebar { display: none !important; }
body.jhq-page .main-wrap .main-content { width: 100% !important; max-width: 100% !important; flex: 0 0 100% !important; }
body.jhq-page .main-content::after, body.jhq-page .main-content::before { display: none !important; }
body.jhq-page .main-content .post-header { max-width: 780px; margin-left: auto; margin-right: auto; }
body.jhq-page .post-content > p, body.jhq-page .post-content > div:not(.jhq):not(.jhq-more) { max-width: 780px; margin-left: auto; margin-right: auto; }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  .jhq { font-size: 16px; border-radius: 14px; margin: 4px 0 28px; }
  .jhq .jhq-head { padding: 22px 18px 2px; }
  .jhq .jhq-body { padding: 14px 18px 22px; }
  .jhq .jhq-admin { margin: 12px 18px 0; }
  .jhq .jhq-option { padding: 12px 12px; gap: 12px; }
  .jhq .jhq-next .jhq-btn, .jhq .jhq-actions .jhq-btn, .jhq .jhq-intro > .jhq-btn { width: 100%; justify-self: stretch; }
  .jhq .jhq-result { gap: 16px; }
  .jhq .jhq-ring { width: 92px; height: 92px; }
  .jhq .jhq-ring span { width: 72px; height: 72px; font-size: 1.35em; }
  .jhq-hubpage { padding-block: 28px 48px; }
}
@media (prefers-reduced-motion: reduce) {
  .jhq *, .jhq-hubpage *, .jhq-more * { transition: none !important; }
}

/* group tag colours */
.jhq-card-home .jhq-card-tag { color: #1d6a86; }
.jhq-card-heritage .jhq-card-tag { color: #9a4a1f; }
.s-dark .jhq-card-home .jhq-card-tag { color: #7cc8e3; }
.s-dark .jhq-card-heritage .jhq-card-tag { color: #f0a77c; }

/* "Test yourself" card on articles, guides and glossary terms */
.jhq-promo {
  --jhq-ink: #16181b; --jhq-ink-2: #3a4048; --jhq-muted: #656c76; --jhq-line: #e3e5e8; --jhq-soft: #f7f5ef; --jhq-gold: #f2b100;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px;
  margin: 32px 0 8px; padding: 20px 22px; border-radius: 16px;
  background: var(--jhq-soft); border: 1px solid var(--jhq-line); border-left: 4px solid var(--jhq-gold);
  color: var(--jhq-ink); font-size: 16px; line-height: 1.5; clear: both;
}
.s-dark .jhq-promo { --jhq-ink: #eef0f2; --jhq-ink-2: #c9ced4; --jhq-muted: #9aa2ac; --jhq-line: #2c3137; --jhq-soft: #1f2328; }
.jhq-promo * { box-sizing: border-box; }
.jhq-promo p { margin: 0 !important; }
.jhq-promo .jhq-promo-text { flex: 1 1 320px; min-width: 0; }
.jhq-promo .jhq-promo-kicker { font-size: 12px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--jhq-muted); margin-bottom: 4px !important; }
.jhq-promo .jhq-promo-title { font-size: 1.2em; font-weight: 800; line-height: 1.25; margin-bottom: 4px !important; }
.jhq-promo .jhq-promo-title a { color: var(--jhq-ink); text-decoration: none; box-shadow: none; border: 0; }
.jhq-promo .jhq-promo-desc { color: var(--jhq-ink-2); font-size: .95em; }
.jhq-promo .jhq-promo-desc span { color: var(--jhq-muted); white-space: nowrap; }
.jhq-promo .jhq-promo-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.jhq-promo a.jhq-promo-btn { display: inline-flex; align-items: center; min-height: 44px; padding: 10px 20px; border-radius: 12px; background: #16181b; color: #fff !important; font-weight: 700; font-size: .95em; text-decoration: none; border: 0; box-shadow: none; }
.s-dark .jhq-promo a.jhq-promo-btn { background: var(--jhq-gold); color: #16181b !important; }
.jhq-promo a.jhq-promo-btn:hover { background: #3a4048; }
.jhq-promo a.jhq-promo-all { color: var(--jhq-ink); font-weight: 700; font-size: .9em; text-decoration: none; border-bottom: 2px solid var(--jhq-gold); box-shadow: none; }
@media (max-width: 600px) { .jhq-promo { padding: 18px; } .jhq-promo .jhq-promo-actions { width: 100%; } .jhq-promo a.jhq-promo-btn { flex: 1; justify-content: center; } }