/* Shared Hitman family accents — September 2026. */
:root { --family-mono: "SFMono-Regular", Consolas, "Liberation Mono", monospace; --family-accent: #ff5a5f; }
.kicker, .serum-number, .row-index, .case-number,
.sb-builder-steps article > span, .sb-authority-grid article > span {
  font-family: var(--family-mono);
  letter-spacing: .12em;
}
.family-hero { position: relative; }
.family-marks { position: absolute; inset: 0; z-index: 3; pointer-events: none; user-select: none; }
.family-cross { position: absolute; color: var(--family-accent); opacity: .65; font: 200 26px/1 var(--family-mono); }
.family-cross-top { top: 104px; right: 28px; }
.family-cross-bottom { bottom: 28px; left: 28px; }
.family-side-label { position: absolute; top: 42%; right: 24px; writing-mode: vertical-rl; color: #b1b1b1; font: 11px/1.5 var(--family-mono); letter-spacing: .17em; }
.family-side-label::before { content: ""; display: inline-block; width: 1px; height: 32px; margin-bottom: 18px; background: rgba(245,245,245,.28); }
.serum-number { padding-bottom: 12px; border-bottom: 1px solid rgba(245,245,245,.2); }
.family-progress { position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100; background: var(--family-accent); transform: scaleX(var(--family-progress, 0)); transform-origin: left; pointer-events: none; }
@media (max-width: 1100px) {
  .family-side-label { display: none; }
  .family-cross-top { right: 20px; }
  .family-cross-bottom { left: 20px; bottom: 16px; }
}
@media (max-width: 620px) {
  .family-cross-top { top: 100px; right: 18px; font-size: 20px; }
  .family-cross-bottom { display: none; }
}

/* Truth Serum: readable identifiers and accessible navigation / motion. */
.kicker, .serum-number { color: var(--family-accent); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid #f5f5f5; outline-offset: 5px; }
.family-mobile-menu { display: none; }
.family-video-toggle { position: absolute; bottom: 22px; right: 24px; z-index: 4; min-height: 44px; padding: 10px 14px; border: 1px solid rgba(245,245,245,.4); color: #f5f5f5; background: rgba(0,0,0,.8); font: 12px/1.4 var(--family-mono); cursor: pointer; }
.family-video-toggle[hidden] { display: none; }
.truth-hero { background: #000 url("images/truth-serum-hero.jpg") center / cover no-repeat; }
@media (max-width: 520px) {
  .site-header { gap: 12px; }
  .family-mobile-menu { display: block; margin-left: auto; }
  .family-mobile-menu summary { list-style: none; display: flex; align-items: center; min-height: 44px; padding: 8px; color: #f5f5f5; font: 12px var(--family-mono); cursor: pointer; }
  .family-mobile-menu summary::-webkit-details-marker { display: none; }
  .family-mobile-menu nav { position: absolute; top: 100%; left: 0; right: 0; display: grid; padding: 12px 22px 22px; background: #080808; border-bottom: 1px solid rgba(245,245,245,.2); }
  .family-mobile-menu nav a { display: flex; align-items: center; min-height: 48px; font-size: 15px; }
  .family-video-toggle { right: 22px; bottom: 12px; }
}
/* Let longer titles and enlarged text determine mobile card height. */
@media (max-width: 680px) {
  .serum-card { aspect-ratio: auto; }
  .serum-card img { position: relative; height: auto; aspect-ratio: 1.5; object-fit: cover; }
  .serum-card-content { position: relative; inset: auto; padding: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* Visible article authorship matches the search metadata. */
.family-byline { margin: 0 0 36px; color: var(--white-75); font: 13px/1.7 var(--family-mono); }
.family-byline a { text-decoration: underline; text-underline-offset: 3px; }
.family-byline a:hover { color: var(--white-100); }