/* ═══════════════════════════════════════════════════════════
   hub.css — the Knowledge Hub: 16 guides, their landing page,
   five categories and the reviewer's profile.
   Extends site.css (and, on a guide, article.css). The guides
   are expert documents rather than posts, so they keep the
   article's reading measure and add the pack's apparatus —
   byline, review date, direct-answer lede, strapline. The index
   pages are a ruled ledger of guides: titled, answered in one line.
   ═══════════════════════════════════════════════════════════ */

/* ─── Byline and review date, on the paper header ───────── */
.hb-by{
  margin-top:22px;max-width:60ch;
  font-size:1rem;line-height:1.5;color:var(--body);
}
.hb-by a{color:var(--navy);font-weight:600;text-decoration-color:var(--brass);text-underline-offset:3px}
.hb-by a:hover{color:var(--brass-lo)}
.hb-meta{margin-top:8px;font-size:.875rem;color:var(--slate)}
.hb-meta time{color:var(--ink);font-weight:600}

/* ─── The direct answer ─────────────────────────────────
   The pack opens every guide with a concise answer to its title.
   Set as the lede, ruled off in brass, so a reader — and anything
   reading on their behalf — finds the answer before the argument. */
.art-body .hb-answer{
  padding:22px 24px;border-radius:var(--r-md);background:var(--paper);
}
.art-body .hb-answer p{
  font-size:clamp(1.0625rem,1.5vw,1.1875rem);line-height:1.55;color:var(--ink);
}
.art-body .hb-answer+.copy{margin-top:18px}
/* Prose that follows a table — "This is a worked example…" — needs air the article
   stylesheet never had to give it: no live post sets copy straight after a table. */
.art-body .art-table+.copy{margin-top:18px}

/* ─── The strapline that closes each guide ──────────────── */
.art-body .hb-strap{
  margin-top:clamp(26px,3vw,34px);
  font-size:1.0625rem;font-weight:650;letter-spacing:-.015em;color:var(--navy);
}

/* ─── After the guide: related guides and services ──────── */
.hb-next{background:var(--paper);padding-block:clamp(44px,5.5vw,72px);margin:var(--inset);border-radius:var(--r-xl)}
.hb-next__in{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);
  gap:clamp(32px,5vw,72px);
}
.hb-next h2{
  font-size:1.25rem;font-weight:700;letter-spacing:-.02em;color:var(--ink);
  padding-bottom:14px;border-bottom:2px solid var(--ink);
}
.hb-svc a{
  display:block;padding:13px 0;border-bottom:1px solid var(--line);
  text-decoration:none;font-size:.9375rem;color:var(--body);
  transition:color .16s ease,border-color .16s ease;
}
.hb-svc a:hover{color:var(--navy);border-bottom-color:var(--brass)}

/* ─── The guide ledger ──────────────────────────────────── */
.hb-head h1{max-width:18ch}
.hb-body--follow{padding-top:0}
.hb-bio{font-size:clamp(1.03rem,1.4vw,1.125rem)}
.hb-also{margin-top:18px}
.hb-also a{color:var(--navy);text-decoration-color:var(--brass);text-underline-offset:3px}
.hb-also a:hover{color:var(--brass-lo)}

.hb-group+.hb-group{margin-top:clamp(46px,5.5vw,72px)}
.hb-group__h{margin-bottom:clamp(16px,2vw,24px)}
.hb-group__h a{text-decoration:none;border-bottom:1px solid transparent;transition:border-color .2s ease}
.hb-group__h a:hover{border-bottom-color:var(--brass)}

.hb-list{border-top:1px solid var(--line)}
.hb-list a{
  display:grid;grid-template-columns:44px minmax(0,1fr) 22px;gap:clamp(12px,2vw,24px);
  align-items:baseline;
  padding:clamp(18px,2.2vw,26px) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:var(--body);
  transition:border-color .16s ease;
}
/* The arrow is decoration, so it lives in CSS rather than the copy. */
.hb-list a::after{
  content:"→";color:var(--slate);font-size:1.125rem;
  transition:color .16s ease,transform .2s ease;
}
.hb-list a:hover{border-bottom-color:var(--brass)}
.hb-list a:hover::after{color:var(--brass);transform:translateX(4px)}
.hb-list__n{font-size:1rem;font-weight:800;letter-spacing:-.02em;color:var(--navy)}
.hb-list__t{
  font-size:clamp(1.0625rem,1.6vw,1.3125rem);line-height:1.25;letter-spacing:-.02em;
  color:var(--ink);transition:color .16s ease;
}
.hb-list a:hover .hb-list__t{color:var(--navy)}
.hb-list__x{margin-top:8px;font-size:.9375rem;line-height:1.55;color:var(--slate);max-width:72ch}

/* The tight variant, after a guide: titles only, smaller. */
.hb-list--tight{border-top:0}
.hb-list--tight a{grid-template-columns:36px minmax(0,1fr) 18px;padding:13px 0}
.hb-list--tight .hb-list__t{font-size:1rem;line-height:1.35}

@media (max-width:860px){
  .hb-next__in{grid-template-columns:1fr}
}
@media (max-width:560px){
  .hb-list a{grid-template-columns:32px minmax(0,1fr)}
  .hb-list a::after{display:none}
  .hb-head h1{max-width:none}
}