/* 2026-09-14 - retired-template prune: 101 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 — INTERIOR SKIN · "Moody Parchment"
   Brings every interior page (non-home, non-Claire) onto the homepage's
   editorial system: dimmed warm parchment base, photographic dark heroes,
   a lit reading sheet, oxblood interludes, tinted docket bands, and shadow.
   Authoritative: loaded last, so it supersedes the older route/hub/verdict
   skins and the interim hardening layers. Claire is excluded (enqueue guard
   + :not(.cew-mode)). Homepage is excluded (:not(.home):not(.front-page)).
   ============================================================================ */

body:not(.home):not(.front-page):not(.cew-mode){
  /* Interior aliases consume the same global semantic palette as the homepage. */
  --vvi-paper:var(--color-surface-page); --vvi-paper-hi:var(--color-surface-page); --vvi-stone:var(--color-surface-stone); --vvi-rule:var(--color-border-rule);
  --vvi-ink:var(--color-text-primary); --vvi-espresso:var(--color-surface-ink); --vvi-field:var(--color-surface-field);
  --vvi-quiet:var(--color-text-quiet); --vvi-dim:var(--color-support-warm-grey);
  --vvi-accent:var(--color-accent-brand); --vvi-oxblood:var(--color-status-worth); --vvi-terracotta:var(--color-status-stop); --vvi-charcoal:var(--color-status-missing);
  /* --vvi-brass is the interior metal and interiors are parchment, where
     champagne measures 1.56:1 — every kicker in this file was effectively
     invisible. It now defaults to the on-light metal (4.82:1) and is rebound
     to champagne on the dark bands at the end of this file. 14 Sep 2026. */
  --vvi-brass:var(--color-accent-metal-ink,var(--color-accent-metal)); --vvi-bronze:var(--color-support-bronze);
  --vvi-shadow:0 28px 70px rgba(13,13,15,.28); --vvi-shadow-card:0 16px 40px rgba(13,13,15,.2);
  --vvi-disp:var(--font-display,'Bodoni Moda',Georgia,serif);
  --vvi-ui:var(--font-ui,'Inter',sans-serif);
  --vvi-mono:var(--font-mono,'IBM Plex Mono',monospace);

  background:var(--vvi-paper);
  color:var(--vvi-ink);
}
/* Warm depth wash so light areas never read dead-flat. */
body:not(.home):not(.front-page):not(.cew-mode)::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(70% 55% at 88% -5%,rgba(230,199,178,.12),transparent 60%),
    radial-gradient(60% 50% at -5% 105%,rgba(90,14,26,.09),transparent 60%),
    linear-gradient(180deg,rgba(13,13,15,.05),transparent 12%);
}
body:not(.home):not(.front-page):not(.cew-mode) > *{position:relative;z-index:1}

/* True full-bleed is reserved for deliberate dark interludes, not page openings. */


/*
 * 90%-BLEED OPENING CONTRACT
 * Interior heroes, image-led dossiers, examination/lookbook openings and
 * typographic plates all occupy the same 90vw frame. Most already sit directly
 * inside main#main-content; plates live inside a narrower reading shell, so the
 * symmetric negative-margin calculation lets them break out to the frame without
 * creating a second width authority or a horizontal-scroll trap.
 */
body:not(.home):not(.front-page):not(.cew-mode) :is(
  .vovn-route-hero,
  .vovn-hub-hero,
  .vovn-article-hero,
  .vvs-hero,
  .vvx-hero,
  .vov-mi__hero,
  .vovn-dossier,
  .vov-exam-hero,
  .vov-lookbook-hero,
  .vv-lookbook-story__hero,
  .vovps-arrival,
  .vov-plate
){
  /* 1720px cap retired: above that width it stopped being a 90% bleed and
     became a centred column, which is the fault the house contract exists
     to prevent. 90% now holds at every width. */
  width:90vw !important;
  max-width:90vw !important;
  margin-left:calc((100% - 90vw) / 2) !important;
  margin-right:calc((100% - 90vw) / 2) !important;
}

/* ---- Shared editorial type ---- */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero,.vvs-hero,.vovn-page-head) h1{
  font-family:var(--vvi-disp);font-weight:500;font-size:clamp(2.4rem,5vw,3.85rem);
  line-height:1.06;letter-spacing:-.018em;margin:0;color:var(--vvi-paper-hi);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero,.vvs-hero) h1 em{font-style:italic;color:var(--vvi-brass);font-weight:400}

/* ============================================================
   HEROES — photographic, dark, overlay (figure becomes the bg)
   ============================================================ */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero){
  position:relative;isolation:isolate;display:block;overflow:hidden;
  background:var(--vvi-field);color:var(--vvi-paper-hi);
  min-height:min(64vh,560px);
  padding:clamp(2rem,5vw,3.6rem) clamp(1.25rem,5vw,4rem);
}
/* the page's own <figure> photo -> full-bleed cover behind copy */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero) > figure{
  position:absolute;inset:0;margin:0;z-index:0;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero) > figure img{
  width:100%;height:100%;object-fit:cover;display:block;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero) > figure figcaption{display:none}
/* scrim */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero)::after{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(105deg,rgba(18,13,13,.9) 0%,rgba(34,25,23,.6) 34%,rgba(34,25,23,.2) 62%,transparent 84%),
    linear-gradient(to top,rgba(18,13,13,.66),transparent 46%);
}
/* copy above scrim */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero__copy,.vovn-hub-hero__copy,.vovn-article-hero > div){
  position:relative;z-index:2;width:100%;max-width:100%;margin-inline:auto;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;min-height:inherit;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero__copy,.vovn-hub-hero__copy,.vovn-article-hero > div) > *{max-width:46rem}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero__copy,.vovn-hub-hero__copy) > p:not(.vovn-eyebrow){
  color:rgba(247,240,231,.85);font-size:clamp(1.05rem,1.4vw,1.2rem);line-height:1.6;max-width:48ch;margin:1rem 0 0;
}

/* The text-only page header (.vovn-page-head, .vovn-article-hero--text-only)
   and the CSS-background spa hero (.vvs-hero and its scrim, copy, kicker,
   dek, rail and note) stood here. Both templates are retired and neither
   class is emitted anywhere; removed 2026-09-14. */

/* ============================================================
   READING — the lit parchment sheet
   ============================================================ */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body,.vovn-content,.vovn-article-grid,.vvs-layout,.vovn-hub-source){
  padding-block:clamp(2.5rem,6vw,4.5rem);
}
/* ---- LAYOUT CONTRACT: one width authority ----
   The frame (main#main-content) owns page width: interior = 90%, uncapped —
   the old 1720px ceiling is retired. Page-opening heroes and
   plates align to that same 90% frame; only deliberate dark interludes may break
   to the full viewport. The containers below simply FILL the frame. We neutralize
   the legacy conflicts that collapsed them: bleed-layout's per-component width:90%,
   and vanity-pages' route-body padding:max(...,calc((100vw-80rem)/2)) which padded
   from the full viewport even after the box was shrunk — together they crushed
   the grid tracks to a single letter wide. */
body:not(.home):not(.front-page):not(.cew-mode) main#main-content{
  width:90vw !important;max-width:none !important;margin-inline:auto !important;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body,.vovn-content,.vovn-article-grid,.vvs-layout,.vovn-hub-source){
  width:auto !important;max-width:none !important;margin-inline:0 !important;padding-inline:0 !important;
}
/* the plain-page prose IS a .vovn-shell — reset its rogue width but keep card padding */

/* grid children must be allowed to shrink (default min-width:auto blocks it) */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body,.vovn-article-grid,.vvs-layout) > *{min-width:0 !important}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content){
  background:var(--vvi-paper-hi);border:1px solid var(--vvi-rule);box-shadow:var(--vvi-shadow);
  padding:clamp(1.8rem,4vw,3.4rem);
  font-family:var(--vvi-ui);font-size:1.075rem;line-height:1.8;color:var(--vvi-ink);
  width:auto !important;max-width:62rem !important;margin-inline:0;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) > :first-child{margin-top:0}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) > p{margin:0 0 1.4rem}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) h2{
  font-family:var(--vvi-disp);font-weight:500;font-size:clamp(1.6rem,2.6vw,2.15rem);line-height:1.16;
  letter-spacing:-.012em;margin:2.2rem 0 .8rem;color:var(--vvi-ink);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) h3{
  font-family:var(--vvi-disp);font-weight:500;font-size:1.4rem;margin:1.8rem 0 .5rem;color:var(--vvi-ink);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) a{
  color:var(--vvi-accent);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(126,41,56,.4);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) :is(ul,ol){margin:0 0 1.4rem;padding-left:1.25rem}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) li{margin:.35rem 0}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) blockquote{
  margin:1.8rem 0;padding:.2rem 0 .2rem 1.4rem;border-left:3px solid var(--vvi-brass);
  font-family:var(--vvi-disp);font-style:italic;font-size:1.5rem;line-height:1.35;color:var(--vvi-espresso);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) :is(img,figure){max-width:100%}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) figure{margin:1.8rem 0;box-shadow:var(--vvi-shadow-card)}
/* Gutenberg group used as a call-out inside prose.
   NOTE: this originally matched only `.wp-block-group.vov-cta`. Several older
   posts hand-author the callout as a bare `<section class="vov-cta">` — no
   block-group class — and those fell through to the homepage skin in
   vanity-pages.css (oxblood background, porcelain text) inside a light prose
   sheet. The `.wp-block-group` qualifier is now dropped so any .vov-cta inside
   prose gets the stone treatment and the dark text that goes with it. */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content,.vovps-depth__copy) .vov-cta{
  background:var(--vvi-stone);border-left:4px solid var(--vvi-brass);padding:clamp(1.3rem,2.5vw,1.8rem);box-shadow:none;
}
/* Callout text must read dark on the stone; its button becomes a real button.
   .vovps-depth__copy is in the ancestor list because the publication-system
   templates (Find Your Way In, the route pages) wrap prose in that class and
   were therefore missed by every earlier contrast sweep — the same blind spot
   that hid the .vovps-* heading bug. */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content,.vovps-depth__copy) .vov-cta :is(p,li,strong,em,h2,h3,a:not(.wp-block-button__link)){color:var(--vvi-ink) !important;-webkit-text-fill-color:var(--vvi-ink) !important}
/* The proximate disclosure keeps its own accent label inside that callout. */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content,.vovps-depth__copy) .vov-cta .vov-disclosure__label{color:var(--vvi-accent) !important;-webkit-text-fill-color:var(--vvi-accent) !important}
body:not(.home):not(.front-page):not(.cew-mode) .wp-block-group.vov-cta .wp-block-button__link{
  background:var(--vvi-espresso) !important;color:var(--vvi-paper-hi) !important;-webkit-text-fill-color:var(--vvi-paper-hi) !important;
  border:0 !important;border-radius:0 !important;padding:.8rem 1.4rem !important;
  font-family:var(--vvi-mono);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;text-decoration:none;box-shadow:none !important;
}
/* Two-column layouts (route / article / spa): let the content panel fill the
   wider frame instead of sitting narrow beside the rail; body text keeps a
   comfortable reading measure inside the bigger box. */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body > .vovn-prose,.vovn-article-body,.vvs-layout > .vvs-copy){max-width:none !important}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body > .vovn-prose,.vovn-article-body,.vvs-layout > .vvs-copy) > :is(p,ul,ol,blockquote){max-width:none !important}

/* ---- Asides / meta rails ---- */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-article-grid,.vovn-route-body){display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,320px);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}

@media(max-width:960px){
  body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-article-grid,.vovn-route-body,.vvs-layout){grid-template-columns:1fr}
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-article-rail,.vovn-route-body > aside,.vvs-index){
  position:sticky;top:96px;align-self:start;border-top:2px solid var(--vvi-ink);padding-top:.9rem;
  background:transparent;box-shadow:none;color:var(--vvi-ink);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body > aside,.vvs-index) span,
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-body > aside,.vvs-index) > p:first-child{
  font-family:var(--vvi-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vvi-quiet);
}


/* ============================================================
   DOCKETS, HUB GRIDS, STATIONS — cards on the parchment system
   ============================================================ */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-grid,.vov-mi__stations){display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:1.6rem}
@media(max-width:900px){body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-grid,.vov-mi__stations){grid-template-columns:1fr}}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-card,.vov-mi__station){
  display:flex;flex-direction:column;background:var(--vvi-paper-hi);border:1px solid var(--vvi-rule);
  border-top:3px solid var(--vvi-accent);box-shadow:var(--vvi-shadow-card);
  padding:1.3rem 1.4rem 1.5rem;text-decoration:none;color:var(--vvi-ink);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-card,.vov-mi__station):nth-child(3n+2){border-top-color:var(--vvi-brass)}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-card,.vov-mi__station):nth-child(3n){border-top-color:var(--vvi-espresso)}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-card,.vov-mi__station) :is(span,small){font-family:var(--vvi-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vvi-quiet)}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-card,.vov-mi__station) h3{font-family:var(--vvi-disp);font-weight:500;font-size:1.35rem;line-height:1.1;margin:.45rem 0 .5rem;color:var(--vvi-ink)}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-card,.vov-mi__station) p{color:var(--vvi-quiet);font-size:.93rem;line-height:1.55;margin:0 0 1.1rem;flex:1}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-card b,.vov-mi__station strong){font-family:var(--vvi-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vvi-accent);font-weight:500}

/* Section heads used by hubs */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-editorial,.vovn-hub-evidence,.vovn-hub-cta) h2{
  font-family:var(--vvi-disp);font-weight:500;font-size:clamp(1.8rem,3.2vw,2.7rem);line-height:1.14;letter-spacing:-.014em;margin:0;color:var(--vvi-ink);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-paths,.vovn-hub-editorial,.vovn-hub-source){padding-block:clamp(2.5rem,5vw,4rem)}
/* The hub ledger rows and the two dark editorial bands (.vovn-hub-cta and
   .vovn-hub-evidence) stood here. The hub template is retired; removed
   2026-09-14. */

/* ============================================================
   GALLERIES — route-gallery / vvs-visual-file
   ============================================================ */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-gallery,.vvs-visual-file){
  display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;padding-block:clamp(2rem,4vw,3rem);
}
@media(max-width:820px){body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-gallery,.vvs-visual-file){grid-template-columns:1fr}}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-gallery,.vvs-visual-file) figure{margin:0;position:relative;box-shadow:var(--vvi-shadow-card);overflow:hidden}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-gallery,.vvs-visual-file) img{width:100%;height:100%;object-fit:cover;display:block}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-gallery,.vvs-visual-file) figcaption{
  font-family:var(--vvi-mono);font-size:.64rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vvi-quiet);padding:.6rem .2rem 0;
}

/* ============================================================
   BUTTONS — hub/vvs/vov-mi → the vv- button system
   ============================================================ */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-button,.vvs-button,.vvs-index__action){
  display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.5rem;
  font-family:var(--vvi-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;
  background:var(--vvi-espresso);color:var(--vvi-paper-hi);border:1px solid transparent;transition:.2s;margin-top:1.2rem;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-hub-button:hover,.vvs-button:hover){transform:translateY(-2px);background:#3a2b26}


/* ============================================================
   NEXT NAV — route-next / vvs-next / article-nav
   ============================================================ */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-next,.vvs-next,.vovn-article-nav){
  display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--vvi-rule);
  border-block:1px solid var(--vvi-rule);margin-top:clamp(2.5rem,5vw,4rem);
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-next,.vvs-next,.vovn-article-nav) a{
  background:var(--vvi-paper);padding:1.4rem clamp(1.25rem,4vw,2.4rem);text-decoration:none;color:var(--vvi-ink);
  display:flex;flex-direction:column;gap:.25rem;transition:background .2s;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-next,.vvs-next,.vovn-article-nav) a:hover{background:var(--vvi-paper-hi)}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vvs-next,.vovn-route-next) a span{font-family:var(--vvi-mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:var(--vvi-quiet)}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vvs-next,.vovn-route-next) a strong{font-family:var(--vvi-disp);font-size:1.3rem;font-weight:500}

/* ============================================================
   MAKEUP INTELLIGENCE (vov-mi) — align to system
   Photographic dark hero (library #12330, glowing vanity mirror)
   per the marketability decision; furniture (aside, stations,
   rhythm chips, boundary) retained. Width belongs to the frame.
   ============================================================ */
/* The whole .vov-mi__* Makeup Intelligence page skin stood here: the
   photographic hero and its aside, the rhythm list, the boundary band and the
   brass button. The template is retired and none of those classes are emitted
   anywhere; removed 2026-09-14. The hero image it hard-coded was also the
   "makeup_hero" key in the Site Images picker; that key was retired from
   inc/site-images-map.php and inc/site-images-css.php the same day. */

/* ============================================================
   VERDICTS (vvx-) — the docket, on the Moody Parchment system
   ============================================================ */
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero{position:relative;isolation:isolate;overflow:hidden;background:var(--vvi-field);color:var(--vvi-paper-hi);min-height:min(66vh,580px);display:flex;align-items:flex-end;padding:clamp(2rem,5vw,3.6rem) clamp(1.25rem,5vw,4rem)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero.has-image{background-image:linear-gradient(105deg,rgba(18,13,13,.9),rgba(34,25,23,.55) 42%,transparent 84%),linear-gradient(to top,rgba(18,13,13,.66),transparent 46%),var(--vvx-hero-image);background-size:cover;background-position:center}
/* Verdicts hero image (chosen from library — #12336, diverse group) */
body:not(.home):not(.front-page):not(.cew-mode) .vovps-verdicts .vvx-hero,
body:not(.home):not(.front-page):not(.cew-mode) .vovps-verdicts .vvx-hero.has-image{
  background-image:
    linear-gradient(105deg,rgba(18,13,13,.88),rgba(34,25,23,.5) 44%,rgba(34,25,23,.12) 74%,transparent 88%),
    linear-gradient(to top,rgba(18,13,13,.7),transparent 48%),
    url('https://vanityvice.blog/wp-content/uploads/2026/08/AdobeStock_1554829892.jpeg') !important;
  background-size:cover !important;background-position:center top !important;
}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero__content{position:relative;z-index:2;width:min(100rem,100%);margin-inline:auto}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero__content > *{max-width:50rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero h1{font-family:var(--vvi-disp);font-weight:500;font-size:clamp(2.4rem,5vw,3.85rem);line-height:1.06;letter-spacing:-.018em;margin:.4rem 0;color:var(--vvi-paper-hi)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero h1 em{font-style:italic;color:var(--vvi-brass)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero__deck{color:rgba(247,240,231,.86);font-size:1.1rem;line-height:1.6;max-width:54ch}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-kicker{font-family:var(--vvi-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--vvi-brass)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-hero__note{position:relative;z-index:2;margin-top:1.4rem;border-top:1px solid rgba(247,240,231,.3);padding-top:1rem;color:rgba(247,240,231,.78);max-width:54ch}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:1.5rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-button{display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:0 1.5rem;font-family:var(--vvi-mono);font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;border:1px solid transparent;transition:.2s}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-button:hover{transform:translateY(-2px)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-button--light{background:var(--vvi-paper-hi);color:var(--vvi-ink)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-button--ghost{border-color:rgba(247,240,231,.5);color:var(--vvi-paper-hi)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-button--ink{background:var(--vvi-espresso);color:var(--vvi-paper-hi)}
/* manifesto — statement left, "on the record" note card right */
body:not(.home):not(.front-page):not(.cew-mode) .vvx-manifesto{width:min(100rem,100%);margin-inline:auto;padding-block:clamp(2.5rem,6vw,4rem);display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,360px);gap:clamp(1.5rem,4vw,3.5rem);align-items:start;border-bottom:1px solid var(--vvi-rule)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-manifesto h2{font-family:var(--vvi-disp);font-weight:500;font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.14;color:var(--vvi-ink);margin:0 0 .6rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-manifesto__statement p{color:var(--vvi-quiet);max-width:60ch;margin:0}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-note{background:var(--vvi-espresso);color:var(--vvi-paper-hi);padding:clamp(1.4rem,2.5vw,1.9rem);box-shadow:var(--vvi-shadow-card)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-note span{display:block;font-family:var(--vvi-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--vvi-brass);margin-bottom:.6rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-note p{color:rgba(247,240,231,.85);font-size:.95rem;line-height:1.6;margin:0}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-note em{color:var(--vvi-paper-hi);font-style:italic}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-note small{display:block;margin-top:.9rem;font-family:var(--vvi-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vvi-brass)}
@media(max-width:820px){body:not(.home):not(.front-page):not(.cew-mode) .vvx-manifesto{grid-template-columns:1fr}}
/* latest ruling — dark feature */
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--vvi-espresso);color:var(--vvi-paper-hi);margin-block:clamp(2rem,5vw,3.5rem);box-shadow:var(--vvi-shadow-card)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__media{min-height:22rem;overflow:hidden}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__media img{width:100%;height:100%;object-fit:cover;display:block}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__copy{padding:clamp(2rem,4vw,3.5rem);display:flex;flex-direction:column;justify-content:center;gap:.9rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__copy h2{font-family:var(--vvi-disp);font-weight:500;font-size:clamp(1.5rem,2.6vw,2.2rem);line-height:1.16;color:var(--vvi-paper-hi);margin:0}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__copy > p{color:rgba(247,240,231,.82)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__copy .vvx-kicker{color:var(--vvi-brass)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__meta{display:flex;flex-wrap:wrap;gap:1.4rem;font-family:var(--vvi-mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:rgba(247,240,231,.6)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest__copy .vvx-button--ink{background:var(--vvi-brass);color:#1a1410;align-self:flex-start;margin-top:.4rem}
@media(max-width:820px){body:not(.home):not(.front-page):not(.cew-mode) .vvx-latest{grid-template-columns:1fr}}
/* archive grid of verdict cards */
body:not(.home):not(.front-page):not(.cew-mode) .vvx-archive{padding-block:clamp(2rem,5vw,3.5rem)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-archive > header{display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:end;margin-bottom:1.8rem;border-bottom:1px solid var(--vvi-rule);padding-bottom:1.2rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-archive h2{font-family:var(--vvi-disp);font-weight:500;font-size:clamp(1.7rem,3vw,2.4rem);color:var(--vvi-ink);margin:.3rem 0 0}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-archive > header p{color:var(--vvi-quiet);max-width:60ch;margin:0}
@media(max-width:820px){body:not(.home):not(.front-page):not(.cew-mode) .vvx-archive > header{grid-template-columns:1fr}}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem}
/* verdicts.css sizes cards for a 12-column grid (.vvx-card{grid-column:span 4} and
   .vvx-card:nth-child(5n+1){grid-column:span 8}). This interior grid is only 3 columns,
   so those spans must be reset here — otherwise every card overflows into implicit
   0px-wide columns and the card text collapses to one character per line. */
body:not(.home):not(.front-page):not(.cew-mode) .vvx-grid>.vvx-card,
body:not(.home):not(.front-page):not(.cew-mode) .vvx-grid>.vvx-card:nth-child(5n+1){grid-column:auto}
@media(max-width:900px){body:not(.home):not(.front-page):not(.cew-mode) .vvx-grid{grid-template-columns:1fr}}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card{display:flex;flex-direction:column;background:var(--vvi-paper-hi);border:1px solid var(--vvi-rule);box-shadow:var(--vvi-shadow-card);overflow:hidden}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__media{display:block;height:158px;background:var(--vvi-espresso);overflow:hidden;position:relative}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__media img{width:100%;height:100%;object-fit:cover;display:block}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--vvi-disp);color:var(--vvi-brass);font-size:1.5rem;letter-spacing:.12em}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__body{padding:1.2rem 1.3rem 1.35rem;display:flex;flex-direction:column;flex:1}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__body .vvx-kicker{color:var(--vvi-accent)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__body h3{font-family:var(--vvi-disp);font-weight:500;font-size:1.2rem;line-height:1.18;margin:.4rem 0 .5rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__body h3 a{color:var(--vvi-ink);text-decoration:none}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__body h3 a:hover{color:var(--vvi-accent)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__body > p{color:var(--vvi-quiet);font-size:.9rem;line-height:1.5;flex:1;margin:0 0 1rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__foot{display:flex;justify-content:space-between;align-items:center;gap:1rem;padding-top:.8rem;border-top:1px solid var(--vvi-rule)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__foot span{font-family:var(--vvi-mono);font-size:.58rem;letter-spacing:.1em;text-transform:uppercase;color:var(--vvi-quiet)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-card__foot a{font-family:var(--vvi-mono);font-size:.66rem;letter-spacing:.08em;text-transform:uppercase;color:var(--vvi-accent);text-decoration:none;white-space:nowrap}

/* topics — compact links, not big blocks (kills the empty 6th cell) */
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics{background:none !important;padding:clamp(2.5rem,5vw,3.5rem) 0 !important;border-bottom:1px solid var(--vvi-rule)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics > header{margin-bottom:1.2rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics .vvx-kicker{color:var(--vvi-accent)}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics h2{font-family:var(--vvi-disp);font-weight:500;font-size:clamp(1.3rem,2vw,1.75rem);line-height:1.16;letter-spacing:-.01em;color:var(--vvi-ink) !important;margin:.3rem 0 0;max-width:34ch;text-wrap:balance}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics > div{display:block !important;margin-top:1.1rem;line-height:2.3;background:none !important;border:0 !important}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics > div > a{display:inline !important;margin-right:1.7rem;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;text-decoration:none;white-space:nowrap}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics > div > a :is(span,p,strong){display:none !important}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics > div > a h3{display:inline !important;margin:0 !important;font-family:var(--vvi-disp);font-weight:500;font-style:italic;font-size:1.15rem;color:var(--vvi-ink) !important;border-bottom:1px solid transparent}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-topics > div > a:hover h3{color:var(--vvi-accent) !important;border-bottom-color:var(--vvi-accent)}

/* nominate CTA — legible light text on the dark band, content centered (no dead right half) */
body:not(.home):not(.front-page):not(.cew-mode) .vvx-nominate{
  background:
    radial-gradient(90% 130% at 85% 15%,rgba(165,107,66,.3),transparent 55%),
    radial-gradient(90% 120% at 8% 100%,rgba(140,47,62,.5),transparent 60%),
    linear-gradient(90deg,#241317,#1a1012) !important;
  color:var(--vvi-paper-hi) !important;text-align:center;
  padding:clamp(3rem,7vw,5rem) clamp(1.25rem,5vw,4rem) !important;
}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-nominate .vvx-kicker{color:var(--vvi-brass) !important;-webkit-text-fill-color:var(--vvi-brass) !important}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-nominate h2{font-family:var(--vvi-disp);font-weight:500;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.12;color:var(--vvi-paper-hi) !important;-webkit-text-fill-color:var(--vvi-paper-hi) !important;margin:.3rem auto .6rem;max-width:22ch}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-nominate > p{color:rgba(247,240,231,.85) !important;-webkit-text-fill-color:rgba(247,240,231,.85) !important;max-width:56ch;margin:0 auto 1.4rem}
body:not(.home):not(.front-page):not(.cew-mode) .vvx-nominate .vvx-actions{justify-content:center}

/* ============================================================
   NEUTRALIZE conflicting interim layers on interior pages.
   typography-normalization forced homepage-only sizes with !important;
   keep it off the interior prose so our scale wins.
   ============================================================ */
/* The two :not()s exempt the Verdict Index and the Running Total. Both are
   typographic hierarchies rather than running prose — a 0.6rem mono label above
   a 2.5rem display figure — and this rule scores (0,4,2), which no
   component-level rule can outrank. Excluding their descendants is the only
   correct fix; `font-size: revert` is not, because it discards the component's
   own author styles along with this one. Nothing else is added to the list:
   the existing exemptions live in house-bleed.css and are deliberately scoped
   there. */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content) p:not(.vov-vindex *):not(.vov-rt *){font-size:1.075rem !important;line-height:1.8 !important}

/* ============================================================
   LEGIBILITY GUARANTEE — override the interim hardening layer.
   interior-hardening.css forces LIGHT text (!important) on several
   surfaces we are re-lighting to parchment; without this they would
   render invisible (light-on-light). Loaded later + matched specificity.
   ============================================================ */
/* Surfaces now LIGHT -> force dark text */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-next,.vvs-next,.vvs-index,.vovn-route-body > aside,.vvs-visual-file,.vovn-hub-editorial,.vovn-hub-paths),
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-next,.vvs-next,.vvs-index,.vovn-route-body > aside,.vvs-visual-file,.vovn-hub-editorial,.vovn-hub-paths) :is(h1,h2,h3,h4,h5,h6,p,li,dt,dd,small,strong,em,span,figcaption,b,a){
  color:var(--vvi-ink) !important;-webkit-text-fill-color:var(--vvi-ink) !important;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vvs-index,.vovn-route-body > aside) > :is(span,p:first-child){color:var(--vvi-quiet) !important;-webkit-text-fill-color:var(--vvi-quiet) !important}

/* Surfaces DARK -> force light text to survive any later ink rule */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero:not(.vovn-article-hero--text-only),.vovn-hub-cta) :is(h1,h2,h3),
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero:not(.vovn-article-hero--text-only),.vovn-hub-cta) p:not(.vovn-eyebrow){
  color:var(--vvi-paper-hi) !important;-webkit-text-fill-color:var(--vvi-paper-hi) !important;
}
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero,.vovn-hub-cta) h1 em{color:var(--vvi-brass) !important;-webkit-text-fill-color:var(--vvi-brass) !important}


/* Small screens: sheet & heroes breathe */
@media(max-width:640px){
  body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-prose,.vvs-copy,.entry-content){padding:1.4rem 1.25rem}
  body:not(.home):not(.front-page):not(.cew-mode) :is(.vovn-route-hero,.vovn-hub-hero,.vovn-article-hero,.vvs-hero){min-height:min(70vh,520px)}
}

/* ============================================================================
   PART 2 — RESPONSIVE & QA CONTRACT
   Folded verbatim from assets/css/flexible-layout-contract.css (retired
   2026-08-12). That file was enqueued at priority 1005 AND printed inline in
   wp_head by fleet-bleed-runtime.php, so its rules always resolved after this
   skin. Folding it here, at the end of the authority file, preserves the exact
   cascade result while removing the extra layers. Do not re-enqueue the old
   file; it no longer exists.
   ============================================================================ */

/* —— Never clip whole page shells —— */
:is(
  .vvs-page,
  .vovn-article,
  .vovn-prose,
  .vovn-route-body,
  .vovn-article-body,
  .vovn-hub,
  .vvx-shell,
  main
){
  overflow:visible!important;
}


/* —— Cards / tiles size to content —— */
:is(
  .vovn-index-grid article,
  .vvx-card,
  .vovn-card,
  .nlh-card,
  .vov-observation-band>div,
  .vov-card,
  .vovn-hub-card,
  .vvx-topics>div>a,
  .vvx-method li,
  .vvs-next a,
  .vov-mi__station,
  .vov-mi__cat,
  .vov-mi__look
){
  min-height:0!important;
  height:auto!important;
}

/* Hub cards: padding rhythm, not 280px empty frames */


/* Split / comparison panels stay readable */
:is(.vovn-split,.vv-split,.vv-verdict-band){
  overflow:visible!important;
  max-width:100%!important;
}

/* Media: soft floors on large screens only */
:is(
  .vovn-route-gallery figure,
  .vvs-visual-file figure,
  .vovn-hub-hero figure,
  .vovn-hub-evidence figure
){
  min-height:0!important;
}
/* Prose measure on text only */
.vovn-prose > :is(p,ul,ol,blockquote),
.vovn-article-body > :is(p,ul,ol,blockquote){
  max-width:min(70ch,100%);
}
.vovn-prose > :is(figure,.wp-block-image,.wp-block-group,.wp-block-columns,.wp-block-gallery),
.vovn-article-body > :is(figure,.wp-block-image,.wp-block-group,.wp-block-columns){
  max-width:100%!important;
  width:100%!important;
}

/* Method / topics / nominate: free height */
.vvx-method li,
.vvx-topics>div>a,
.vvx-nominate{
  min-height:0!important;
}
.vvx-latest{
  min-height:0!important;
}
.vvx-latest__media{
  min-height:0!important;
}
@media (min-width:901px){
  .vvx-latest__media{min-height:22rem}
}

/* —— ≤900px —— */
@media (max-width:900px){
  :is(
    .vovn-route-hero,
    .vovn-article-hero,
    .vovn-missing,
    .vovn-hub-hero,
    .vovn-hub-evidence,
    .vovn-route-gallery,
    .vvs-visual-file,
    .vv-split,
    .vovn-split,
    .vv-verdict-band,
    .vov-observation-band,
    .vov-lookbook-premise,
    .vovn-index-grid,
    .vovn-hub-grid,
    .vvx-topics>div,
    .vvx-method ol,
    .vvs-next,
    .vov-card-grid
  ){
    display:grid!important;
    grid-template-columns:1fr!important;
  }
  :is(
    .vovn-route-hero figure,
    .vovn-article-hero figure,
    .vovn-missing figure,
    .vvs-hero,
    .vv-hero,
    .vov-exam-hero,
    .vov-lookbook-hero,
    .vovn-hub-hero
  ){
    min-height:clamp(16rem,44vh,28rem)!important;
  }
  .vovn-index-grid article,
  .vvx-card,
  .vvx-card:nth-child(5n+1),
  .vov-card{
    grid-column:1/-1!important;
    min-height:0!important;
  }
  .vv-verdict-band__image,
  .vv-split__image{
    min-height:14rem!important;
  }
  .vvx-hero{
    min-height:auto!important;
  }
  .vvx-latest{
    min-height:0!important;
  }
  .vvx-latest__media{
    min-height:16rem!important;
  }
  .vvx-topics>div>a{
    min-height:0!important;
  }
}

@media (max-width:620px){
  .vovn-article-body{
    width:100%!important;
    max-width:100%!important;
    padding-inline:1rem!important;
  }
  .vv-hero{
    min-height:auto!important;
  }
  .vovn-shell{
    width:min(100% - 1.25rem,var(--vovn-shell,90vw))!important;
  }
}

/* —— Single-post visual QA hardening —— */
body.single-post .vovn-article-rail:empty{
  display:none!important;
}
html body.single-post .vovn-callout h2{
  margin:0 0 .65rem!important;
  max-width:none!important;
  font-size:clamp(1.35rem,2vw,1.75rem)!important;
  line-height:1.2!important;
}
html body.single-post .vovn-sources h2,
html body.single-post .vovn-sources h3{
  margin:0 0 .75rem!important;
  max-width:none!important;
  font:700 .72rem/1.35 var(--font-mono,"IBM Plex Mono",monospace)!important;
  letter-spacing:.12em!important;
  text-transform:uppercase!important;
  color:var(--color-text-quiet)!important;
}
body.single-post .vovn-prose table,
body.single-post .vovn-article-body table{
  margin:2.25rem 0;
  min-width:42rem;
  border-collapse:collapse;
  border:1px solid var(--color-border-rule);
  background:var(--color-surface-page);
  font-size:.95rem;
  line-height:1.5;
}
body.single-post .vovn-prose th,
body.single-post .vovn-prose td,
body.single-post .vovn-article-body th,
body.single-post .vovn-article-body td{
  padding:.85rem 1rem;
  text-align:left;
  vertical-align:top;
  border-bottom:1px solid var(--color-border-rule);
}
body.single-post .vovn-prose th,
body.single-post .vovn-article-body th{
  background:var(--color-surface-stone);
  font:700 .72rem/1.35 var(--font-mono,"IBM Plex Mono",monospace);
  letter-spacing:.08em;
  text-transform:uppercase;
}
body.single-post .vovn-prose tr:last-child td,
body.single-post .vovn-article-body tr:last-child td{
  border-bottom:0;
}
body.single-post .vovn-article-body>.sharedaddy,
body.single-post .vovn-article-body>.jp-relatedposts{
  display:none!important;
}

/* ============================================================================
   .vovps-* DARK SURFACES — heading colour.
   ----------------------------------------------------------------------------
   assets/tokens/hierarchy.css carries a bare `h1,h2,h3{color:var(--color-text-
   primary)}` — ink #151315. A directly matched declaration beats an inherited
   one regardless of source order, so although .vovps-pathways and .vovps-close
   set `color:var(--vovps-paper)` on themselves, every heading inside them was
   repainted ink: 1.00:1 on the pathways header (literally invisible), 1.02,
   1.10, 1.99, 1.99 and 2.92:1 on the four cards and the closing band.

   The .vovn-* and .vvs-* templates never showed this because this sheet
   already re-colours their hero headings. .vovps-* was outside that scope.
   The rule lives here rather than in publication-system.css because this file
   loads last and therefore beats hierarchy.css on order as well as weight.

   Light .vovps-* surfaces (thesis, evidence, depth) are excluded deliberately:
   ink is the correct colour on those.
   ============================================================================ */
body:not(.home):not(.front-page):not(.cew-mode) :is(.vovps-arrival,.vovps-pathways,.vovps-close) :is(h1,h2,h3){
  color:var(--vovps-paper,#F7F0E7);
}

/* Byline link in the article eyebrow. Inherits the brass eyebrow colour that
   the hero legibility layer already forces, so it needs no colour of its own —
   only an underline so it reads as a link. */
body:not(.home):not(.front-page):not(.cew-mode) .vovn-byline-link{
  color:inherit;
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  text-decoration-color:currentColor;
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-byline-link:focus-visible{
  outline:2px solid currentColor;
  outline-offset:3px;
}

/* ============================================================================
   COMMERCIAL DISCLOSURE — proximate, not decorative.
   ----------------------------------------------------------------------------
   Rendered immediately above the paragraph carrying an affiliate link, per the
   site's own /disclosure/ standard. Styled to be noticed rather than skimmed
   past: oxblood rule, mono label, full contrast body text. It is not a
   whisper-grey footnote, because the point of the rule is that the reader
   actually registers it before reading the recommendation.
   ============================================================================ */
body:not(.home):not(.front-page):not(.cew-mode) .vov-disclosure{
  margin:2.25rem 0 1.25rem;
  padding:1.1rem 1.3rem 1.2rem;
  background:var(--vvi-paper-hi);
  border:1px solid var(--vvi-rule);
  border-left:5px solid var(--vvi-accent);
  border-radius:0 4px 4px 0;
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-disclosure p{
  margin:0;
  font-family:var(--vvi-ui);
  font-size:.94rem;
  line-height:1.6;
  color:var(--vvi-ink);
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-disclosure__label{
  margin:0 0 .4rem !important;
  font:700 .64rem/1 var(--vvi-mono) !important;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--vvi-accent) !important;
}
/* An affiliate link should not look like an ordinary editorial link. */
body:not(.home):not(.front-page):not(.cew-mode) a[data-vov-affiliate]{
  text-decoration:underline;
  text-decoration-style:dotted;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  text-decoration-color:var(--vvi-accent);
}

/* ============================================================================
   DECISION PATH — "What this decides next"
   ----------------------------------------------------------------------------
   Internal linking organised by the reader's open question rather than by
   taxonomy. A category hub answers "what is this about". This component
   answers "you have just finished reading; what is the next thing you have to
   decide". It appears at the foot of an article and carries 2-4 ordered steps.

   Markup contract:
     <aside class="vov-path" aria-labelledby="vov-path-h">
       <p class="vov-path__kicker">Where this goes next</p>
       <h2 class="vov-path__title" id="vov-path-h">…the open question…</h2>
       <ol class="vov-path__steps">
         <li><a href="/slug/">Article title</a><span>why this step, one clause</span></li>
       </ol>
     </aside>

   Rules this component encodes:
   - Ordered list, because a decision path has a sequence. Not a card grid.
   - Every step carries a reason. A bare link is a menu, not a path.
   - No hover-only affordance: the numeral, rule and reason are always visible.
   - Focus parity with hover, per the accessibility pass.
   ============================================================================ */
body:not(.home):not(.front-page):not(.cew-mode) .vov-path{
  margin:3.5rem 0 1rem;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.4rem,3vw,2.5rem) clamp(1.6rem,3vw,2.5rem);
  background:var(--vvi-stone);
  border:1px solid var(--vvi-rule);
  border-left:5px solid var(--vvi-brass);
  border-radius:0 4px 4px 0;
  box-shadow:var(--vvi-shadow-card);
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__kicker{
  margin:0 0 .5rem;
  font:700 .64rem/1 var(--vvi-mono);
  letter-spacing:.16em;
  text-transform:uppercase;
  /* Bronze reads at only 3.1:1 on the stone panel — below AA for text this
     small. Accent clears 6.5:1 and keeps the house colour. */
  color:var(--vvi-accent);
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__title{
  margin:0 0 1.4rem;
  font-family:var(--vvi-disp);
  font-weight:500;
  font-size:clamp(1.45rem,2.6vw,2rem);
  line-height:1.12;
  letter-spacing:-.012em;
  color:var(--vvi-ink);
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps{
  margin:0;
  padding:0;
  list-style:none;
  counter-reset:vovpath;
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps>li{
  counter-increment:vovpath;
  position:relative;
  margin:0;
  padding:.95rem 0 .95rem 3.1rem;
  border-top:1px solid var(--vvi-rule);
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps>li:first-child{border-top:0;padding-top:.2rem}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps>li:last-child{padding-bottom:.2rem}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps>li::before{
  content:counter(vovpath);
  position:absolute;
  left:0;
  top:.95rem;
  width:2.1rem;
  font:700 .8rem/1.5 var(--vvi-mono);
  color:var(--vvi-accent);
  text-align:left;
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps>li:first-child::before{top:.2rem}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps a{
  display:inline-block;
  min-height:44px;
  padding-block:.3rem;
  font-family:var(--vvi-ui);
  font-weight:600;
  font-size:1.02rem;
  line-height:1.4;
  color:var(--vvi-ink);
  text-decoration:underline;
  text-decoration-color:var(--vvi-brass);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps a:hover,
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps a:focus-visible{
  color:var(--vvi-accent);
  text-decoration-color:var(--vvi-accent);
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps a:focus-visible{
  outline:3px solid var(--vvi-brass);
  outline-offset:3px;
}
body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps span{
  display:block;
  margin-top:.15rem;
  font-family:var(--vvi-ui);
  font-size:.92rem;
  line-height:1.5;
  /* --vvi-quiet is 4.35:1 on the stone panel — it passes on paper but not
     here. Charcoal clears 5.1:1 against this specific background. */
  color:var(--vvi-charcoal);
}
@media(max-width:600px){
  body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps>li{padding-left:2.5rem}
  body:not(.home):not(.front-page):not(.cew-mode) .vov-path__steps>li::before{width:1.7rem}
}

/* Decision-path index blocks on hub and landing pages. Same idea, laid out as
   parallel routes rather than one sequence, so a reader can pick their opening
   question before committing to a path. */
/* The .vov-routes card grid stood here. The class is not emitted anywhere;
   removed 2026-09-14. */

/* Single-post handoff: the publication explains; the desk turns that judgment
   into a reusable decision. */
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff{
  /* Sits on the house 90% line like every other interior container. It used
     to read min(72rem, calc(100% - 2.5rem)) and its parent is main, which
     bleeds — so 72rem was the cap doing the work and it shrank to 45% of a
     2560 display. 90vw is the contract. */
  width:90vw;
  margin:clamp(2.5rem,6vw,5rem) auto;
  padding:clamp(1.5rem,4vw,2.75rem);
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(17rem,.65fr);
  gap:clamp(1.5rem,4vw,4rem);
  align-items:end;
  background:var(--vvi-ink);
  color:var(--vvi-paper);
  border-top:4px solid var(--vvi-brass);
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff>div>span{
  display:block;
  margin-bottom:.65rem;
  font:600 .68rem/1.3 var(--vvi-mono);
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--vvi-brass);
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff h2{
  margin:0;
  max-width:16ch;
  font:500 clamp(2rem,4vw,3.4rem)/1 var(--vvi-disp);
  letter-spacing:-.025em;
  color:var(--vvi-paper);
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff p{
  max-width:56ch;
  margin:1rem 0 0;
  color:rgba(247,240,231,.78);
  line-height:1.65;
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff nav{
  display:grid;
  gap:.8rem;
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff a{
  display:block;
  padding:.9rem 1rem;
  border:1px solid rgba(247,240,231,.45);
  color:var(--vvi-paper);
  font:600 .72rem/1.35 var(--vvi-mono);
  letter-spacing:.09em;
  text-transform:uppercase;
  text-decoration:none;
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff__primary{
  background:var(--vvi-paper);
  color:var(--vvi-ink)!important;
}
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff a:hover,
body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff a:focus-visible{
  border-color:var(--vvi-brass);
  color:var(--vvi-brass);
}
@media(max-width:760px){
  body:not(.home):not(.front-page):not(.cew-mode) .vovn-desk-handoff{grid-template-columns:1fr}
}

/* ---------------------------------------------------------------------------
   The metal, on dark ground. 14 September 2026.

   --vvi-brass now defaults to the on-light metal, because the interior is
   parchment and champagne was measuring 1.56:1 on it. The bands below are the
   exceptions: each one has an opaque background whose measured luminance is
   under 0.18, so champagne is both correct and the value they were already
   getting. Declared as a custom property rather than a colour so every kicker,
   rule, chip and link inside them inherits it without its own rule.

   The selector deliberately carries the same body:not() prefix the rest of
   this file uses. At (0,4,0) it beats the :root declaration at the top, and
   sitting last in the file it also beats anything of equal weight above it.
   --------------------------------------------------------------------------- */
body:not(.home):not(.front-page):not(.cew-mode) :is(
  .vovn-route-hero, .vovn-hub-hero, .vovn-article-hero, .vvs-hero,
  .vvx-hero, .vov-mi__hero, .vov-exam-hero, .vov-lookbook-hero,
  .vv-lookbook-story__hero, .vovps-arrival, .vov-plate,
  .vovn-dossier__media, .vovn-hub-cta, .vovn-desk-handoff,
  .vvr-strip, .vvx-note, .vvx-latest, .vov-cohort,
  [data-surface="ink"]
){
  --vvi-brass: var(--color-accent-metal);
}

/* The Register strip is near-black and its links were oxblood: measured
   1.40:1. Oxblood is a surface colour on dark ground, never a text colour;
   the metal is what the masthead already uses for the same job. */
body:not(.home):not(.front-page):not(.cew-mode) :is(
  .vvr-strip, .vvx-note, .vvx-latest, .vov-cohort, .vovn-desk-handoff
) a{
  color: var(--color-accent-metal);
}