/* 2026-09-14 - retired-template prune: 6 selectors removed from this file.
   Each named a class that exists nowhere - not on any of the 370 published
   URLs, not in any post_content/postmeta/option row in any status, not emitted
   by any theme PHP or JS. See the note at the top of style.css for the method
   and the verification. */
/**
 * Vanity or Vice — Layer 3: COMPONENT TOKENS + bindings
 * Local aliases and critical component rules that must stay on-system.
 * Consumes semantic only (not primitives).
 * Elevated for luxury micro-interactions, tactile chips, and focus states.
 */

:root {
  /* Verdict chips */
  --chip-worth-bg: var(--color-status-worth);
  --chip-stop-bg: var(--color-status-stop);
  --chip-missing-bg: var(--color-status-missing);
  --chip-fg: var(--color-text-on-dark);

  /* Buttons */
  --btn-primary-bg: var(--color-surface-page);
  --btn-primary-fg: var(--color-text-primary);
  --btn-primary-hover-bg: var(--color-accent-metal);
  --btn-primary-hover-fg: var(--color-surface-ink);
  --btn-ink-bg: var(--color-surface-ink);
  --btn-ink-fg: var(--color-text-on-dark);
  --btn-outline-border: var(--color-text-primary);

  /* Masthead / nav.
     --masthead-bg and the --mega-* block below were bound to .vv-masthead and
     .vv-nav-mega, the header that the hybrid header replaced. The rules that
     read them were removed 2026-09-14; the declarations are kept because they
     are the documented values for that role and cost nothing, and because a
     future header should take these rather than invent new ones. */
  --masthead-bg: color-mix(in srgb, var(--color-surface-page) 96%, transparent);
  --nav-link: var(--color-text-primary);
  --nav-link-hover: var(--color-accent-brand);
  --wordmark-em: var(--color-accent-brand);

  /* Hero / final */
  --hero-field: var(--color-surface-field);
  --hero-title-em: var(--color-accent-metal);
  --kicker-on-light: var(--color-accent-brand);
  --kicker-on-dark: var(--color-accent-metal);

  /* Mega nav */
  --mega-panel-bg: var(--color-surface-page);
  /* Reflective gold is reserved for dark grounds; oxblood clears AA on parchment. */
  --mega-label: var(--color-accent-brand);
  --mega-link: var(--color-text-primary);
  --mega-link-hover: var(--color-accent-brand);
}

/* —— Verdict status chips (hard-bound + tactile) —— */
.vv-verdict-tag {
  color: var(--chip-fg);
  letter-spacing: 0.16em;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.vv-verdict-tag:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(42, 29, 28, 0.15);
}
.vv-verdict-tag--worth {
  background: var(--chip-worth-bg) !important;
  color: var(--chip-fg) !important;
}
.vv-verdict-tag--stop {
  background: var(--chip-stop-bg) !important;
  color: var(--chip-fg) !important;
}
.vv-verdict-tag--insuff {
  background: var(--chip-missing-bg) !important;
  color: var(--chip-fg) !important;
}

/* —— Type accents —— */
.vv-hero__title em {
  color: var(--hero-title-em) !important;
}
.vv-kicker {
  color: var(--kicker-on-light) !important;
}
.vv-hero .vv-kicker,
.vv-split--dark .vv-kicker,
.vv-final .vv-kicker,
/* Two more dark grounds that were missing from this list, and were
   therefore inheriting the on-light oxblood: the front-page Register band
   and the Look Books band. Oxblood on near-black measures 1.39:1, which is
   not a near miss — it is invisible. Both are now on the metal. */
.vv-register-band .vv-kicker,
.vv-lookbooks .vv-kicker,
.vv-split--dark h2 em {
  color: var(--kicker-on-dark) !important;
}

/* The split dossier is the one dossier variant with a PARCHMENT inner, so
   the metal that is correct on every other dossier reads at 1.55:1 here.
   Oxblood is the documented on-parchment accent a few lines above. */
.vovn-dossier--split .vovn-dossier__kicker {
  color: var(--color-accent-brand);
}
.vv-wordmark em {
  color: var(--wordmark-em) !important;
}
.vv-nav a:hover{
  color: var(--nav-link-hover) !important;
}


/* —— Buttons — elevated luxury hierarchy —— */
.vv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3rem;
  padding: 0.75rem 1.35rem;
  border: 1px solid transparent;
  font-family: var(--font-mono, "IBM Plex Mono", monospace);
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, color 0.22s ease, border-color 0.22s ease;
}
.vv-btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--elevation-editorial, 0 12px 30px rgba(42, 29, 28, 0.18));
}
/* Oxblood clears AA on parchment; reflective gold is the dark-surface focus color. */
.vv-btn:focus-visible {
  outline: 3px solid var(--color-accent-brand);
  outline-offset: 3px;
}
.vv-btn--ghost:focus-visible {
  outline-color: var(--color-accent-metal);
}
.vv-btn--primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: transparent;
}
.vv-btn--primary:hover {
  background: var(--btn-primary-hover-bg) !important;
  color: var(--btn-primary-hover-fg) !important;
}
.vv-btn--ink {
  background: var(--btn-ink-bg);
  color: var(--btn-ink-fg);
}
.vv-btn--ink:hover {
  background: var(--color-accent-brand);
  border-color: var(--color-accent-brand);
  color: var(--color-text-on-dark);
}
.vv-btn--outline {
  background: transparent;
  border-color: var(--btn-outline-border);
  color: var(--color-text-primary);
}
.vv-btn--outline:hover {
  background: var(--color-text-primary);
  color: var(--color-text-on-dark);
}
.vv-btn--ghost {
  background: transparent;
  border-color: rgba(247, 240, 231, 0.45);
  color: var(--color-text-on-dark);
}
.vv-btn--ghost:hover {
  background: var(--color-surface-page);
  color: var(--color-text-primary);
  border-color: var(--color-surface-page);
}

/* —— Hero field fallback —— */
.vv-hero {
  background: var(--hero-field);
}

/* The "Mega panel polish" block that sat here styled .vv-nav-mega, retired
   with the old masthead. Removed 2026-09-14. */


/* —— Footer link targets ——
   WCAG 2.2 asks for a 24x24 CSS pixel target, or enough clear space around
   a smaller one. These links were 20.8px tall and stacked with a smaller
   gap than that, so a row of five sister publications was five slightly
   wrong tap targets side by side — the kind of thing that is invisible on
   a trackpad and irritating on a phone every single time.

   Height rather than padding on all four sides, because these are inline
   text links in a footer rule and they should still look like text. */
.vv-footer__row a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* Raising the targets exposed something that was already wrong: the two
   footer navs — the house publications and the archive links — carry
   margin: 0 auto and nothing between them, so on a narrow screen where both
   wrap they read as one long run-on list, and "Hook the Horizon" sits
   directly on top of "The Register of Unproven Claims". They are two
   different kinds of link and they should look like it. */
.vv-footer--slim .vv-footer__row + .vv-footer__row {
  margin-top: 1.1rem;
}

/* —— Reduced motion ——
   Remove the travel, keep the response. The lift on hover goes; the
   colour change that tells a keyboard or pointer user which control is
   live stays, at a duration short enough to read as instant. */
@media (prefers-reduced-motion: reduce) {
  .vv-btn,
  .vv-verdict-tag {
    transition: background-color 1ms linear, color 1ms linear, border-color 1ms linear, outline-color 1ms linear !important;
  }
  .vv-btn:hover,
  .vv-verdict-tag:hover,
  .vv-btn:active {
    transform: none !important;
  }
}