/**
 * Vanity or Vice — page depth, not page length.
 *
 * Four things were true before this file existed, and all four made interior
 * pages read like a blog rather than like a publication:
 *
 *   1. The article grid had two children — a rail and the prose — and one
 *      column. A hardening rule flattened the rail into the flow
 *      (grid-column: 1; order: 0; position: static; width: 100%) and then a
 *      second rule hid the desktop contents list inside it outright. So the
 *      apparatus was built, shipped, and switched off. A 1440px screen showed
 *      a 1296px container holding a single stack roughly 9,800px tall.
 *
 *   2. Interior pages are meant to sit at 90% of the viewport, and most do —
 *      but the Register and method pages capped at 96rem, so anything above
 *      1707px quietly dropped to 80% and the page started floating in space.
 *
 *   3. The colour-accessibility control rendered in normal flow at the very
 *      bottom of the document — 9,738px down on a desktop article, 13,584px
 *      down on a phone — with a button measuring 0x0. An accessibility control
 *      you have to scroll ten thousand pixels to reach, and then cannot click,
 *      is not a control.
 *
 *   4. Motion existed only on the homepage. Every interior page arrived flat.
 *
 * The governing idea: width is where depth goes. A wide column plus a standing
 * rail lets a long file be navigable instead of endless, and lets figures,
 * tables and Register cards use the full measure while running text stays at a
 * length a person can actually read.
 */

/* ---------------------------------------------------------------------------
   1. Interior bleed — a true 90%, at every width.

   The interior cap now lives in interior-hardening.css as 100vw, so 90vw is
   what applies at every width. The 150rem patch that used to sit here has
   been removed with the 96rem it was overriding.
   ------------------------------------------------------------------------ */
:root {
  --vov-rail-width: clamp(15rem, 19vw, 20rem);
  --vov-rail-gap: clamp(2rem, 3.2vw, 3.5rem);
  /* Running text follows the same 90% bleed as everything else. The 82ch cap
     that used to sit here is retired — it was the Gutenberg measure by
     another name. Rhythm is carried by type scale, not by a width cap. */
  --vov-measure-text: none;
}

/* ---------------------------------------------------------------------------
   2. The article becomes two tracks.

   Below 1180px nothing changes: one column, and the collapsed "On this page"
   disclosure that article-toc.js already builds does the job without adding
   height. At 1180px and up the rail stands up, sticks, and the prose keeps the
   rest — which at 1440px is about 950px and at 1920px about 1370px.

   Specificity is deliberate. The rules being corrected are
   `body.wp-singular .vovn-article-rail { ... !important }`, so these have to
   be at least as specific and equally marked, or nothing happens.
   ------------------------------------------------------------------------ */
@media (min-width: 1180px) {
  body.wp-singular .vovn-shell.vovn-article-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--vov-rail-width);
    column-gap: var(--vov-rail-gap);
    align-items: start;
  }

  body.wp-singular .vovn-article-grid > .vovn-article-rail {
    grid-column: 2 !important;
    grid-row: 1 !important;
    order: 2 !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    position: sticky !important;
    /* Clears the hybrid header, which is about 5rem when settled. */
    top: 6rem !important;
    align-self: start !important;
    max-height: calc(100vh - 8rem) !important;
    overflow: auto !important;
    overscroll-behavior: contain;
  }

  body.wp-singular .vovn-article-grid > .vovn-prose {
    grid-column: 1 !important;
    grid-row: 1 !important;
    order: 1 !important;
    min-width: 0;
  }

  /* The desktop list is the point of the rail; the phone disclosure is not. */
  body.wp-singular .vovn-article-rail > .vv-toc {
    display: block !important;
  }
  body.wp-singular .vovn-article-rail > .vv-toc-mobile {
    display: none !important;
  }

  /* Running text holds its measure inside the wider column. Everything that
     is not running text is free to use the whole width — which is the actual
     reason for widening it. */
  body.wp-singular .vovn-prose > p,
  body.wp-singular .vovn-prose > ul,
  body.wp-singular .vovn-prose > ol,
  body.wp-singular .vovn-prose > blockquote {
    max-width: var(--vov-measure-text);
  }
  body.wp-singular .vovn-prose > figure,
  body.wp-singular .vovn-prose > table,
  body.wp-singular .vovn-prose > .wp-block-table,
  body.wp-singular .vovn-prose > .vov-figure,
  body.wp-singular .vovn-prose > .vvr-carry,
  body.wp-singular .vovn-prose > .vvr-crosslink,
  body.wp-singular .vovn-prose > .vovn-callout {
    max-width: none;
  }
}

/* The contents list was styled for a dark rail and is now on parchment.
   Its index numbers were pale pink at 1.64:1 — legible as decoration, not as
   numbers. Oxblood is the house accent that clears AA on this ground, and at
   10px a counter needs the contrast more than the subtlety. */
@media (min-width: 1180px) {
  body.wp-singular .vovn-article-rail .vv-toc__num {
    color: var(--color-accent-brand, #5A0E1A);
    -webkit-text-fill-color: var(--color-accent-brand, #5A0E1A);
    opacity: 1;
  }
  body.wp-singular .vovn-article-rail .vv-toc__title,
  body.wp-singular .vovn-article-rail .vv-toc__label {
    color: var(--color-text-quiet, #5B5454);
    -webkit-text-fill-color: var(--color-text-quiet, #5B5454);
    opacity: 1;
  }
  body.wp-singular .vovn-article-rail .vv-toc a {
    color: var(--color-text-primary, #0D0D0F);
  }
}

/* The rail's own scrollbar should not look like a page scrollbar. */
@media (min-width: 1180px) {
  body.wp-singular .vovn-article-rail::-webkit-scrollbar { width: 3px; }
  body.wp-singular .vovn-article-rail::-webkit-scrollbar-thumb {
    background: var(--color-border-rule, #B9BDC3);
  }
}

/* ---------------------------------------------------------------------------
   2b. The split dossier headline was invisible.

   .vovn-dossier is a dark block, so its title, dek and meta are all set in
   parchment. The --split variant puts its text cell on a PARCHMENT ground and
   only overrode the kicker. So on every article using the split dossier — which
   is the standard article header — the H1 was #F7F4EE on #F7F4EE. A contrast
   ratio of 1:1. The headline of the piece, rendered in the exact colour of the
   paper behind it.

   Worth saying how long this survived: an automated audit reported zero
   contrast violations on this page. It did that because the dossier can carry
   a background image, so axe cannot resolve what is behind the text and files
   the result under "incomplete" rather than "violations" — and only violations
   were being read. The bucket that gets discarded is where the worst one was.
   ------------------------------------------------------------------------ */
.vovn-dossier--split .vovn-dossier__title,
.vovn-dossier--split .vovn-dossier__dek,
.vovn-dossier--split .vovn-dossier__inner > p {
  color: var(--color-text-primary, #0D0D0F);
}

/* The byline and the revision date sit in the same cell and were the same
   parchment-on-parchment. "Last updated 3 September 2026" is one of the few
   lines on an evidence publication that a sceptical reader actually looks
   for, and the byline is a person's name — neither should be a ghost.
   !important because .vovn-dossier__meta is coloured from several places. */
.vovn-dossier--split .vovn-dossier__meta,
.vovn-dossier--split .vovn-dossier__meta *,
.vovn-dossier--split .vovn-dossier__note {
  color: var(--color-text-quiet, #5B5454) !important;
  -webkit-text-fill-color: var(--color-text-quiet, #5B5454) !important;
}

.vovn-dossier--split .vovn-dossier__meta a {
  color: var(--color-accent-brand, #5A0E1A) !important;
  -webkit-text-fill-color: var(--color-accent-brand, #5A0E1A) !important;
}

/* ---------------------------------------------------------------------------
   2c. Headings on dark bands, stated rather than inherited.

   The same fault as the split dossier, in six more places, and this one is
   worse because it hit the Register — every entry, the index and the method
   page were rendering their H1 in near-black on a near-black masthead. The
   headline of the publication's flagship feature has been invisible since it
   shipped. So has the H2 of the Register band on the homepage, and the Look
   Books band beside it.

   The cause each time: the band states its own background and its own body
   colour, then leaves the heading to inherit — and an interior rule elsewhere
   repaints every h1/h2 in ink. Inheritance is not a colour contract. A block
   that sets its own dark ground has to set the colour of everything on it.

   -webkit-text-fill-color is set alongside colour because several existing
   rules use it, and where it is set it wins over colour outright.

   None of this is caught by an automated pass: axe files text over a possible
   background image as "incomplete", not as a violation. It was found by
   walking the DOM, resolving each element's real background through its
   ancestors, and looking for a contrast ratio of 1.0.
   ------------------------------------------------------------------------ */
.vvr-masthead h1,
.vvr-masthead h2,
.vvr-entry__head h1,
.vvr-entry__head h2,
.vvr-method__head h1,
.vvr-method__head h2,
.vvr-carry h2,
.vv-register-band h2,
.vv-register-band h3,
.vv-lookbooks h2,
.vv-lookbooks h3 {
  color: var(--color-text-on-dark, #F7F4EE) !important;
  -webkit-text-fill-color: var(--color-text-on-dark, #F7F4EE) !important;
}

/* The italic tail these headlines use as a house habit keeps the metal. */
.vvr-masthead h1 em,
.vvr-entry__head h1 em,
.vv-register-band h2 em,
.vv-lookbooks h2 em {
  color: var(--color-accent-metal, #D8C3A5) !important;
  -webkit-text-fill-color: var(--color-accent-metal, #D8C3A5) !important;
}

/* ---------------------------------------------------------------------------
   2d. The skip link was invisible at the exact moment it exists for.

   Parked off-screen at -9999px when unfocused, which is the correct pattern.
   On Tab it moves to the top-left as it should — and renders near-black text
   on a near-black ground. The first thing a keyboard user meets on the site
   was a 138x50 rectangle of nothing.
   ------------------------------------------------------------------------ */
.vv-skip:focus,
.vv-skip:focus-visible {
  background: var(--color-accent-metal, #D8C3A5) !important;
  color: var(--color-surface-ink, #0D0D0F) !important;
  -webkit-text-fill-color: var(--color-surface-ink, #0D0D0F) !important;
  outline: 2px solid var(--color-surface-ink, #0D0D0F) !important;
  outline-offset: 2px;
  padding: 0.75rem 1.1rem !important;
  font-weight: 600;
  text-decoration: none;
  z-index: 1000;
}

/* ---------------------------------------------------------------------------
   3. The accessibility control becomes reachable.

   Fixed, bottom-left — the bottom-right corner belongs to the Buy Me a Coffee
   widget, and two floating controls fighting over one corner is how both get
   ignored. 44px minimum on the trigger, because the control that exists to
   help people with a visual difficulty should not itself need good aim.
   ------------------------------------------------------------------------ */
.nlh-cvd {
  position: fixed !important;
  left: max(0.75rem, env(safe-area-inset-left)) !important;
  bottom: max(0.75rem, env(safe-area-inset-bottom)) !important;
  right: auto !important;
  top: auto !important;
  width: auto !important;
  z-index: 900 !important;
  display: flex !important;
  align-items: flex-end;
}

.nlh-cvd button,
.nlh-cvd [role="button"],
.nlh-cvd summary {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Printing a floating control is never right. */
@media print {
  .nlh-cvd { display: none !important; }
}

/* ---------------------------------------------------------------------------
   4. Interior motion.

   Safe by construction, the same contract the homepage controller uses: the
   hidden state only applies once JS has added .vv-anim-interior to <html>. If
   the script never runs, or errors, every section renders visible — this file
   can never leave content invisible.

   Deliberately small: 10px and 420ms, once, on section arrival. No parallax,
   no counters, no stagger. The house motion standard already says scroll
   effects that move a background against its text are out.
   ------------------------------------------------------------------------ */
.vv-anim-interior [data-vov-reveal] {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--motion-standard, 220ms) var(--ease-enter, cubic-bezier(0.16, 0.84, 0.44, 1)),
    transform var(--motion-standard, 220ms) var(--ease-enter, cubic-bezier(0.16, 0.84, 0.44, 1));
  transition-duration: 420ms;
  will-change: opacity, transform;
}

.vv-anim-interior [data-vov-reveal].is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
  .vv-anim-interior [data-vov-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ------------------------------------------------------------------------
   "On this page" rail removed — owner decision, 2026-09-20.
   The rail held the article at 71% of the viewport, under the fleet's 85–90%
   interior standard. With it gone the prose takes the whole 90% shell. The
   phone disclosure lives inside the rail, so it goes with it.

   Hidden here rather than cut from the templates, so reversing it is deleting
   this block. Weighted above the 1180px rules at the top of this file, and
   above `body.wp-singular .vovn-article-grid` (0,2,1) !important in the
   media-query sheet, which is what kept the second column otherwise.
   ------------------------------------------------------------------------ */
html body.wp-singular .vovn-article-grid > .vovn-article-rail.vovn-article-rail {
  display: none !important;
}
html body.wp-singular .vovn-shell.vovn-article-grid {
  grid-template-columns: minmax(0, 1fr) !important;
}