/* =====================================================================
   Kungfupunk · seo-b.css — two search pages (staging, 14 Oct 2026):
     /phantom-blade-zero-vs-black-myth-wukong
     /phantom-blade-zero-open-world-multiplayer-xbox
   Loaded after style.css and r2.css on those two pages only. Adds no colour of its own: credibility keeps
   r2's jade / ochre / stone, everything else uses the ink and rule tokens. No rounded corners. No motion.
   ===================================================================== */

/* ---------- the short answer under the H1 ---------- */
.sb-answer { margin: 18px 0 8px; font-size: var(--fs-lede); line-height: var(--lh-lede); color: var(--ink); max-width: 60ch; }
.sb-answer-src { margin: 0 0 22px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); max-width: 70ch; }
.sb-answer-src .lv { margin-right: 4px; }
.sb-answer-src a:not(.lv) { color: inherit; }

/* ---------- comparison table (page 1): three columns on wide screens, one card per row on phones ---------- */
.cmp-wrap { margin: 8px 0 6px; }
table.cmp { width: 100%; border-collapse: collapse; table-layout: fixed; border-top: 1px solid var(--rule); font-size: 16px; line-height: 1.45; }
.cmp caption { padding: 0 0 12px; }
.cmp thead th { padding: 14px 14px 12px 0; vertical-align: bottom; text-align: left; font-weight: 600; color: var(--ink); font-size: 17px; line-height: 1.25; border-bottom: 1px solid var(--rule); }
.cmp thead th:first-child { width: 21%; }
.cmp__g { display: flex; flex-direction: column; gap: 8px; }
.cmp__g img { display: block; width: 72px; height: auto; }
.cmp__g small { font: 400 13px/1.35 var(--serif); color: var(--ink-3); letter-spacing: .02em; }
.cmp tbody th { padding: 14px 14px 14px 0; vertical-align: top; text-align: left; font: 600 12px/20px var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.cmp td { padding: 13px 18px 14px 0; vertical-align: top; color: var(--ink-2); }
.cmp tbody tr { border-bottom: 1px solid var(--rule-soft); }
.cmp tbody tr:hover { background: transparent; }
.cmp__v { display: block; color: var(--ink); }
.cmp__s { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.cmp__s .lv { margin-right: 4px; }
.cmp__s a:not(.lv) { color: inherit; text-decoration-color: rgba(var(--white-rgb), .22); }
.cmp-note { margin: 10px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
@media (max-width: 760px) {
  table.cmp, .cmp tbody, .cmp tr, .cmp th, .cmp td { display: block; width: 100%; }
  table.cmp { border-top: 0; table-layout: auto; }
  .cmp caption { display: block; }
  .cmp thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .cmp tbody tr { border-top: 1px solid var(--rule); border-bottom: 0; padding: 12px 0 6px; }
  .cmp tbody th { padding: 0 0 6px; }
  .cmp tbody th, .cmp td { border: 0; }
  .cmp td { padding: 2px 0 4px 14px; border-left: 1px solid var(--rule); margin: 0 0 12px; }
  .cmp td::before { content: attr(data-g); display: block; margin-bottom: 2px; font: 600 11px/18px var(--serif); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
}

/* ---------- quick answers (page 2): one column, one full-width row per question (owner: single column, one focus) ---------- */
.qa { display: block; margin: 6px 0 4px; padding: 0; border-top: 1px solid var(--rule); max-width: none; }
.qa > div { padding: 14px 0 14px; border-bottom: 1px solid var(--rule-soft); }
.qa dt { font: 600 12px/20px var(--serif); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.qa dd { margin: 2px 0 0; }
.qa__a { display: block; font-size: 22px; line-height: 1.25; color: var(--ink); font-weight: 500; }
.qa__d { display: block; margin-top: 4px; font-size: 15.5px; line-height: 1.45; color: var(--ink-2); max-width: 66ch; }
.qa__s { display: block; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-3); }
.qa__s .lv { margin-right: 4px; }
.qa__s a:not(.lv) { color: inherit; }
@media (max-width: 760px) { .qa__a { font-size: 20px; } }

/* ---------- single column on these two pages: shared two-column helpers stacked ---------- */
.related { grid-template-columns: minmax(0, 1fr); }
.unknowns li { grid-template-columns: minmax(0, 1fr); gap: 2px 0; }

/* ---------- one figure in the column ---------- */
.sb-fig { margin: 26px 0 22px; }
.sb-fig .bx__img { max-width: 840px; }
.sb-fig .bx__cap { margin-top: 10px; }
.sb-fig--strip { margin: 18px 0 18px; }
.sb-fig--strip .sb-strip { display: block; max-width: 640px; background: #000; border-top: 1px solid var(--rule-soft); border-bottom: 1px solid var(--rule-soft); }
.sb-fig--strip .sb-strip img { display: block; width: 100%; height: auto; }

/* ---------- small helpers ---------- */
.main .src { line-height: 1.45; }
.sb-sub { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--ink-3); }
.qt.sb-qt { margin: 18px 0 18px; }
.qt.sb-qt p { font-size: 26px; }
@media (max-width: 760px) { .qt.sb-qt p { font-size: 21px; } }