/* ============================================================
   VerityLoft — LAYER 5: Article pages  (vl-post.css)

   Loaded on single posts only, by vl-post.php. Requires
   vl-base.css first (palette tokens and the self-hosted fonts).

   THE IDEA. Harvard on the page, PC Mag in the machinery, and
   the brand kit's navy-and-gold everywhere a rule or a plate is
   drawn. Three moves carry it:

     1. A real grid. Article column plus a sticky right rail on
        desktop, so the page uses its width without the text
        getting wider than a reader can follow. Prose stays at
        about 70 characters; tables, figures and components take
        the whole column.
     2. Type with a hierarchy. Cormorant Garamond for headlines
        and big numbers, Cinzel for the small inscriptional labels
        (the thumbnails' lettering), Manrope for reading and UI.
     3. Rules and plates instead of cards and shadows. Gold
        hairlines, linen panels, navy plates with an inset gold
        frame. No drop shadows, no 16px pills.

   MARKUP. Styles the blocks build-post.py already emits (the
   vlr- family, WordPress core blocks, the vl-byline aside). The
   components used to carry inline styles; vl-post.js removes
   those as the page parses, so this file is what the reader
   sees. Nothing here needs a post to be edited.

   Section map
     0. Tokens
     1. Title band and hero
     2. Byline strip
     3. Article grid and rail
     4. Running text
     5. Headings
     6. Figures, tables, lists, quotes, disclosures
     7. Components (vlr-)
     8. Rail contents
     9. Responsive
    10. Print and motion
   ============================================================ */


/* ============================================================
   0. TOKENS
   Scoped to single posts so nothing here leaks onto pages,
   archives or the home page.
   ============================================================ */
body.single-post {
  --vlp-navy:      var(--vl-blue,      #1E293B);
  --vlp-ink:       var(--vl-graphite,  #333333);
  --vlp-ground:    var(--vl-porcelain, #FAF8F4);
  --vlp-linen:     var(--vl-linen,     #E6E2DA);
  --vlp-gold:      var(--vl-gold,      #DDB849);
  --vlp-gold-ink:  var(--vl-gold-ink,  #7A5F1A);
  --vlp-muted:     var(--vl-muted,     #5C6472);
  --vlp-rule:      var(--vl-rule,      #D8D3C8);
  --vlp-panel:     #F3F0E9;                 /* porcelain warmed toward linen */
  --vlp-plate:     #1E293B;
  --vlp-plate-ink: #F3EFE6;
  --vlp-plate-dim: rgba(243, 239, 230, .68);
  --vlp-gold-line: rgba(221, 184, 73, .55);
  --vlp-sage:      #4F7A63;
  --vlp-clay:      #A2584A;

  --vlp-serif: "Cormorant Garamond", "Cormorant", "Iowan Old Style", Georgia, serif;
  --vlp-caps:  "Cinzel", "Trajan Pro", "Cormorant Garamond", Georgia, serif;
  --vlp-sans:  "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --vlp-measure:   42rem;     /* running text, about 70 characters */
  --vlp-toc-w:     220px;     /* left rail: on this page */
  --vlp-rail-w:    300px;     /* right rail: score and offer, wide screens only */
  --vlp-rail-gap:  48px;
  --vlp-wide:      1360px;    /* the three-column spread on wide screens */
  --vlp-header-h:  65px;      /* the sticky masthead */
  --vlp-flow:      1.3rem;    /* default gap between blocks */
  --vlp-radius:    3px;

  /* Cormorant defaults to old-style figures; scores, prices and
     "1Password" read better with lining ones */
  font-variant-numeric: lining-nums;
}


/* The theme never sets border-box, so a button with min-height 46px
   and 12px of padding rendered 72px tall, and a 100%-wide rail button
   overflowed its box by its own padding. Everything this layer sizes
   is border-box; the preview shim had masked this. */
.single-post .entry-content,
.single-post .entry-content *,
.single-post .entry-content *::before,
.single-post .entry-content *::after,
.single-post .vl-byline,
.single-post .vl-byline *,
.single-post .wp-block-post-featured-image {
  box-sizing: border-box;
}


/* ============================================================
   1. TITLE BAND AND HERO
   The theme centres a 38px title in a 700px column. We align it
   left with the article column, set it in the serif, and let it
   breathe. The featured image then runs the full width of the
   grid inside a gold frame, the same frame the thumbnails wear.
   ============================================================ */
.single-post .wp-block-group:has(> .wp-block-post-title) {
  padding-top: 3rem;
  padding-bottom: .5rem;
}

.single-post .wp-block-post-title {
  max-width: var(--wp--style--global--wide-size, 1100px);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-right: 0;
  text-align: center;
  font-family: var(--vlp-serif);
  font-weight: 600;
  font-size: clamp(2.25rem, 1.35rem + 2.7vw, 3.25rem) !important;
  line-height: 1.08;
  letter-spacing: -.012em;
  color: var(--vlp-navy) !important;
  /* centred titles balance: equal lines read as intended when the
     block is symmetrical, where a left-aligned one read as narrow */
  text-wrap: balance;
  hyphens: manual;
}
.single-post .wp-block-post-title .vl-nobreak {
  white-space: nowrap;
}

/* the group that holds the featured image and the byline */
.single-post .wp-block-group.has-custom-css {
  margin-block-start: 1.5rem;
}
.single-post .wp-block-group.has-custom-css > .wp-block-separator {
  display: none;
}

.single-post .wp-block-post-featured-image {
  aspect-ratio: auto;
  margin: 0;
  padding: 6px;
  border: 1px solid var(--vlp-gold-line);
  background: var(--vlp-ground);
  position: relative;
}
.single-post .wp-block-post-featured-image::after {
  /* the inner line of the double frame */
  content: "";
  position: absolute;
  inset: 3px;
  border: 1px solid rgba(30, 41, 59, .12);
  pointer-events: none;
}
.single-post .wp-block-post-featured-image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  border: 0;
  object-fit: cover;
}


/* ============================================================
   2. BYLINE STRIP
   vl-base.css draws the byline as a white rounded card. On a
   post it becomes a strip between two hairlines: no fill, no
   radius, Cinzel on the chip, serif on the numbers.
   ============================================================ */
.single-post .vl-byline {
  margin: 1.5rem auto 0;
  border: 0;
  border-top: 1px solid var(--vlp-rule);
  border-bottom: 1px solid var(--vlp-rule);
  border-radius: 0;
  background: transparent;
  font-family: var(--vlp-sans);
}
.single-post .vl-byline__chip {
  font-family: var(--vlp-caps);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  color: var(--vlp-gold-ink);
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
}
.single-post .vl-byline__name,
.single-post .vl-byline__name a {
  font-family: var(--vlp-serif);
  font-size: 1.375rem;
  font-weight: 600;
  color: var(--vlp-navy);
  text-decoration: none;
  letter-spacing: -.01em;
}
.single-post .vl-byline__stat {
  font-family: var(--vlp-serif);
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--vlp-navy);
  letter-spacing: -.01em;
}
.single-post .vl-byline__panel-head {
  font-family: var(--vlp-caps);
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vlp-gold-ink);
}
.single-post .vl-byline__panel {
  background: var(--vlp-panel);
  border-left: 1px solid var(--vlp-rule);
  border-radius: 0;
}
.single-post .vl-byline__blurb {
  border-left: 1px solid var(--vlp-rule);
}


/* ============================================================
   3. ARTICLE GRID AND RAILS
   Three tiers.
     1100px and up: two columns. "On this page" sits in a narrow
       LEFT rail, because the contents is the map and the eye
       starts on the left; the article takes the rest.
     1400px and up: three columns. The grid breaks out of the
       1100px page to 1360px, the score and offer join a RIGHT
       rail, and the article column stays at about 744px.
     Under 1100px: one column, no rails; the executive summary
       shows in flow.
   Both rails are built by vl-post.js, span every row, and stick
   under the masthead.
   ============================================================ */
.single-post .entry-content {
  display: grid;
  grid-template-columns: var(--vlp-toc-w) minmax(0, 1fr);
  column-gap: var(--vlp-rail-gap);
  row-gap: 0;
  align-items: start;
  counter-reset: vlsec vlfig;
  font-family: var(--vlp-sans);
  color: var(--vlp-ink);
  margin-block-start: 2.25rem;
}
.single-post .entry-content > * {
  grid-column: 2;
  min-width: 0;
  margin-block: 0;
}
.single-post .entry-content > * + * {
  margin-block-start: var(--vlp-flow);
}
.single-post .entry-content > .vl-rail {
  grid-row: 1 / span 999;
  margin: 0;
  position: sticky;
  top: calc(var(--vlp-header-h) + 1.25rem);
  max-height: calc(100vh - var(--vlp-header-h) - 1.25rem);
  overflow-y: auto;
  scrollbar-width: thin;
  padding-bottom: 1rem;
}
.single-post .entry-content > .vl-rail--toc {
  grid-column: 1;
}
.single-post .entry-content > .vl-rail--side {
  display: none;
  grid-column: 3;
}

@media (min-width: 1400px) {
  .single-post .entry-content {
    grid-template-columns: var(--vlp-toc-w) minmax(0, 1fr) var(--vlp-rail-w);
    max-width: none;
    width: min(var(--vlp-wide), 100%);
    margin-left: calc((100% - min(var(--vlp-wide), 100%)) / 2) !important;
    margin-right: 0 !important;
  }
  .single-post .entry-content > .vl-rail--side {
    display: block;
  }
}

/* the executive-summary block moves into the rail on desktop;
   the in-flow copy hides once the rail exists */
.single-post .entry-content.has-rail > .vl-jump-wrap {
  display: none;
}


/* ============================================================
   4. RUNNING TEXT
   ============================================================ */
.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol,
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4,
.single-post .entry-content > details,
.single-post .entry-content > blockquote {
  max-width: var(--vlp-measure);
}

.single-post .entry-content > p,
.single-post .entry-content > ul,
.single-post .entry-content > ol {
  font-size: 1.0625rem;
  line-height: 1.68;
  color: var(--vlp-ink);
}
.single-post .entry-content > p + p {
  margin-block-start: 1.15rem;
}

/* the answer paragraph: every H2 opens with a 15–90 word direct
   answer (playbook rule 01). It is the sentence an answer engine
   lifts, so it reads a step larger and in navy. */
.single-post .entry-content > h2 + p {
  font-size: 1.1875rem;
  line-height: 1.58;
  font-weight: 500;
  color: var(--vlp-navy);
}

.single-post .entry-content > ul,
.single-post .entry-content > ol {
  padding-left: 1.25rem;
}
.single-post .entry-content > ul > li,
.single-post .entry-content > ol > li {
  margin-bottom: .45rem;
  padding-left: .25rem;
}
/* the four-point star from the thumbnails, drawn rather than typed
   so it looks the same on every platform */
.single-post .vl-star::before,
.single-post .entry-content > ul > li::before,
.single-post .vlr-answer__item::before {
  content: "";
  position: absolute;
  width: .5rem;
  height: .5rem;
  background: var(--vlp-gold-ink);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
}
.single-post .entry-content > ul {
  list-style: none;
  padding-left: 1.25rem;
}
.single-post .entry-content > ul > li {
  position: relative;
}
.single-post .entry-content > ul > li::before {
  left: -1.2rem;
  top: .62em;
}
.single-post .entry-content > ol > li::marker {
  font-family: var(--vlp-caps);
  font-size: .8em;
  color: var(--vlp-gold-ink);
}

.single-post .entry-content strong {
  color: var(--vlp-navy);
  font-weight: 700;
}
.single-post .entry-content abbr.vl-abbr {
  text-decoration: none;
  border-bottom: 1px dotted var(--vlp-gold-ink);
  cursor: help;
}
.single-post .entry-content small {
  font-size: .85em;
  color: var(--vlp-muted);
}

/* dateline and disclosure at the top of the content */
.single-post .entry-content .vlr__meta {
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--vlp-muted);
  margin: 0 0 .25rem;
  max-width: var(--vlp-measure);
}
.single-post .entry-content .vlr__meta + .vlr__meta {
  font-style: italic;
}
.single-post .entry-content > .vlr:first-child .vlr__meta:first-child {
  font-family: var(--vlp-caps);
  font-style: normal;
  font-size: .625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vlp-gold-ink);
  margin-bottom: .5rem;
}


/* ============================================================
   5. HEADINGS
   Serif section heads with a small Cinzel numeral above, the way
   a paper numbers its parts. Back matter (FAQ, sources, further
   reading) keeps the face but not the numeral.
   ============================================================ */
.single-post .entry-content > h2,
.single-post .entry-content > h3,
.single-post .entry-content > h4 {
  font-family: var(--vlp-serif);
  color: var(--vlp-navy);
  text-wrap: balance;
  scroll-margin-top: calc(var(--vlp-header-h) + 1.5rem);
}

.single-post .entry-content > h2 {
  font-size: 2.125rem;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.012em;
  margin-block-start: 3.5rem;
  counter-increment: vlsec;
}
.single-post .entry-content > h2::before {
  content: counter(vlsec, upper-roman);
  display: block;
  font-family: var(--vlp-caps);
  font-size: .6875rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--vlp-gold-ink);
  margin-bottom: .6rem;
  width: max-content;
  padding-right: 2.25rem;
  background: linear-gradient(var(--vlp-gold), var(--vlp-gold)) right 45% / 1.5rem 1px no-repeat;
}
.single-post .entry-content > h2 + * {
  margin-block-start: .9rem;
}

/* a People Also Ask section written as h3 question + answer:
   vl-post.js folds each pair into details/summary; these rules
   are the no-JS fallback so it still reads as a Q and A list */
.single-post .entry-content > h2#people-also-ask ~ h3 {
  font-family: var(--vlp-sans);
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  margin-block-start: 1.6rem;
  padding-top: 1rem;
  border-top: 1px solid var(--vlp-rule);
}
.single-post .entry-content > h2#people-also-ask ~ h3 + p {
  margin-block-start: .4rem;
  font-size: 1rem;
}
.single-post .entry-content > h2#people-also-ask ~ h2 ~ h3 {
  font-family: var(--vlp-serif);
  font-size: 1.5rem;
  font-weight: 600;
  border-top: 0;
  padding-top: 0;
}

/* folding sections (Sources, Further reading): the heading holds a
   button; the section below it is hidden until opened. Folded
   headings sit closer together than open sections would. */
.single-post .entry-content h2.vl-fold-head {
  max-width: none;
  margin-block-start: 2rem;
  padding-top: 1.25rem;
}
.single-post .entry-content h2.vl-fold-head > .vl-fold__btn {
  all: unset;
  display: block;
  box-sizing: border-box;
  width: 100%;
  max-width: var(--vlp-measure);
  position: relative;
  padding-right: 2.5rem;
  cursor: pointer;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-wrap: inherit;
}
.single-post .entry-content h2.vl-fold-head > .vl-fold__btn::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vlp-serif);
  font-size: 1.4em;
  font-weight: 400;
  line-height: 1;
  color: var(--vlp-gold-ink);
  transition: transform .18s ease;
}
.single-post .entry-content h2.vl-fold-head > .vl-fold__btn[aria-expanded="true"]::after {
  transform: translateY(-50%) rotate(45deg);
}
.single-post .entry-content h2.vl-fold-head > .vl-fold__btn:hover,
.single-post .entry-content h2.vl-fold-head > .vl-fold__btn:focus-visible {
  color: var(--vlp-gold-ink);
}
.single-post .entry-content h2.vl-fold-head > .vl-fold__btn:focus-visible {
  outline: 2px solid var(--vlp-gold-ink);
  outline-offset: 4px;
}
.single-post .entry-content .vl-folded {
  display: none !important;
}

/* back matter: no numeral, a hairline above instead */
.single-post .entry-content > h2:is(#faq, #people-also-ask, #sources, #further-reading, #how-this-article-was-made, .vl-unnumbered) {
  counter-increment: none;
  font-size: 1.75rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--vlp-rule);
}
.single-post .entry-content > h2:is(#faq, #people-also-ask, #sources, #further-reading, #how-this-article-was-made, .vl-unnumbered)::before {
  content: none;
}

.single-post .entry-content > h3 {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.008em;
  margin-block-start: 2.25rem;
}
.single-post .entry-content > h3 + * {
  margin-block-start: .6rem;
}
.single-post .entry-content > h4 {
  font-family: var(--vlp-sans);
  font-size: 1rem;
  font-weight: 700;
  margin-block-start: 1.75rem;
}


/* ============================================================
   6. FIGURES, TABLES, LISTS, QUOTES, DISCLOSURES
   ============================================================ */

/* --- figures: gold frame, numbered caption ------------------ */
.single-post .entry-content > figure.wp-block-image {
  display: block;
  width: 100%;
  max-width: 100%;
  margin-block-start: 1.75rem;
  margin-block-end: 0;
  margin-inline: 0 !important;
  counter-increment: vlfig;
}
.single-post .entry-content > figure.wp-block-image img {
  display: block;
  width: 100% !important;
  height: auto !important;
  padding: 5px;
  border: 1px solid var(--vlp-gold-line);
  background: var(--vlp-ground);
}
.single-post .entry-content > figure.wp-block-image figcaption {
  display: block;
  margin: .6rem 0 0;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--vlp-muted);
  text-align: left;
}
.single-post .entry-content > figure.wp-block-image figcaption::before {
  content: "Fig. " counter(vlfig) "\2002";
  font-family: var(--vlp-caps);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--vlp-gold-ink);
}

/* --- tables: navy header plate, hairline rows --------------- */
.single-post .entry-content figure.wp-block-table {
  margin-block-start: 1.5rem;
  margin-block-end: 0;
  overflow-x: auto;
  border: 0;
  background: transparent;
}
.single-post .entry-content .vlr > figure.wp-block-table {
  margin: 0;
}
.single-post .entry-content table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: .9375rem;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  border: 0;
  border-bottom: 1px solid var(--vlp-navy);
  background: transparent;
}
.single-post .entry-content table thead {
  border: 0;
}
.single-post .entry-content table th,
.single-post .entry-content table td {
  border: 0;
  text-align: left;
  vertical-align: top;
  padding: .7rem .85rem;
}
.single-post .entry-content table thead th {
  background: var(--vlp-plate);
  color: var(--vlp-plate-ink);
  font-family: var(--vlp-sans);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.single-post .entry-content table th:first-child {
  box-shadow: inset 3px 0 0 var(--vlp-gold);
}
.single-post .entry-content table tbody td {
  padding: .7rem .85rem;
  border-bottom: 1px solid var(--vlp-rule);
  background: transparent;
  color: var(--vlp-ink);
}
.single-post .entry-content table tbody tr:nth-child(odd),
.single-post .entry-content table tbody tr:nth-child(even) {
  background: transparent;
}
.single-post .entry-content table tbody tr:nth-child(odd) td,
.single-post .entry-content table tbody tr:nth-child(even) td {
  background: transparent;
}
.single-post .entry-content table tbody tr:last-child td {
  border-bottom: 0;
}
.single-post .entry-content table td:first-child {
  font-weight: 600;
  color: var(--vlp-navy);
}
.single-post .entry-content table td strong {
  font-weight: 700;
}
.single-post .entry-content figure.wp-block-table figcaption {
  margin: .55rem 0 0;
  font-size: .8125rem;
  color: var(--vlp-muted);
  text-align: left;
}
.single-post .entry-content figure.wp-block-table figcaption span {
  font-size: inherit;
  color: inherit;
}

/* the choice table of a comparison (build-post.py: class
   vlr-decision on the figure): the recommendation column is the
   answer, so it is set in the serif and in navy */
.single-post .entry-content figure.vlr-decision table td:last-child {
  font-family: var(--vlp-serif);
  font-size: 1.1875rem;
  font-weight: 600;
  color: var(--vlp-navy);
}

/* --- disclosures (details): hairline accordion --------------- */
.single-post .entry-content > details {
  border-top: 1px solid var(--vlp-rule);
  padding: 0;
  margin-block-start: 0;
}
.single-post .entry-content > details + details {
  margin-block-start: 0;
}
.single-post .entry-content > details:last-of-type,
.single-post .entry-content > details:has(+ :not(details)) {
  border-bottom: 1px solid var(--vlp-rule);
}
.single-post .entry-content > details:has(+ h2) {
  border-bottom: 0;
}
.single-post .entry-content > details > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: .9rem 2.25rem .9rem 0;
  font-weight: 600;
  font-size: 1rem;
  line-height: 1.4;
  color: var(--vlp-navy);
}
.single-post .entry-content > details > summary::-webkit-details-marker {
  display: none;
}
.single-post .entry-content > details > summary::after {
  content: "+";
  position: absolute;
  right: .25rem;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vlp-serif);
  font-size: 1.5rem;
  line-height: 1;
  color: var(--vlp-gold-ink);
  transition: transform .18s ease;
}
.single-post .entry-content > details[open] > summary::after {
  transform: translateY(-50%) rotate(45deg);
}
.single-post .entry-content > details > summary:hover {
  color: var(--vlp-gold-ink);
}
.single-post .entry-content > details > :not(summary) {
  margin: 0 0 1rem;
  font-size: .9375rem;
  line-height: 1.62;
  color: var(--vlp-ink);
  max-width: 40rem;
}

/* the "how we arrived at this score" disclosure that follows the
   score plate reads as a footnote to it */
.single-post .entry-content > .vlr:has(> .vlr-card) + details {
  border-top: 0;
  margin-block-start: .35rem;
}

/* --- blockquote (WordPress core) ----------------------------- */
.single-post .entry-content > blockquote {
  margin-block-start: 1.75rem;
  padding: .25rem 0 .25rem 1.4rem;
  border-left: 3px solid var(--vlp-gold);
  font-family: var(--vlp-serif);
  font-size: 1.375rem;
  line-height: 1.4;
  color: var(--vlp-navy);
}
.single-post .entry-content > blockquote p {
  margin: 0;
}
.single-post .entry-content > blockquote cite {
  display: block;
  margin-top: .6rem;
  font-family: var(--vlp-sans);
  font-size: .8125rem;
  font-style: normal;
  color: var(--vlp-muted);
}

/* --- separators inside content ------------------------------ */
.single-post .entry-content > hr {
  width: 4rem;
  margin: 2.5rem 0;
  border: 0;
  border-top: 2px solid var(--vlp-gold);
  opacity: 1;
}


/* ============================================================
   7. COMPONENTS (vlr-)
   One visual language for every ::directive build-post.py emits.
     panel  = linen fill, hairline border, 2px gold rule on top
     plate  = navy fill, porcelain type, inset gold frame
     label  = Cinzel, tracked, uppercase, gold-ink
   ============================================================ */

/* the wrapper build-post.py puts around every component */
.single-post .entry-content > .vlr {
  font-family: inherit;
  color: inherit;
  line-height: inherit;
  letter-spacing: normal;
}

/* shared label style */
.single-post .vlr-jump__title,
.single-post .vlr-answer__title,
.single-post .vlr-stats__label,
.single-post .vlr-cta__label,
.single-post .vlr-take__label,
.single-post .vlr-card__chip,
.single-post .vlr-seal__tag,
.single-post .vlr-dial__out,
.single-post .vlr-badges__pill,
.single-post .vlr-pc__head,
.single-post .vl-rail__label {
  font-family: var(--vlp-caps);
  font-size: .625rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  line-height: 1.2;
}

/* --- ::jump — executive summary (in-flow version) ------------ */
.single-post .vlr-jump {
  background: var(--vlp-panel);
  border: 1px solid var(--vlp-rule);
  border-top: 2px solid var(--vlp-gold);
  border-radius: var(--vlp-radius);
  padding: 1.1rem 1.3rem 1.2rem;
  margin: 0;
  box-shadow: none;
}
.single-post .vlr-jump__title {
  display: block;
  color: var(--vlp-gold-ink);
  margin: 0 0 .75rem;
}
.single-post .vlr-jump__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: .1rem 1.5rem;
  counter-reset: vljump;
}
.single-post .vlr-jump__item {
  margin: 0;
  padding: 0;
  counter-increment: vljump;
}
.single-post .entry-content a.vlr-jump__link {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  min-height: 0;
  padding: .4rem 0;
  border: 0;
  border-bottom: 1px solid rgba(30, 41, 59, .08);
  border-radius: 0;
  background: transparent;
  text-decoration: none;
  color: var(--vlp-navy);
  font-weight: 600;
  font-size: .875rem;
  line-height: 1.35;
  background-image: none;
}
.single-post .vlr-jump__link::before {
  content: counter(vljump, upper-roman);
  flex: 0 0 1.6rem;
  font-family: var(--vlp-caps);
  font-size: .625rem;
  letter-spacing: .1em;
  color: var(--vlp-gold-ink);
}
.single-post .vlr-jump__link svg {
  display: none;
}
.single-post .entry-content a.vlr-jump__link:hover,
.single-post .entry-content a.vlr-jump__link:focus-visible {
  color: var(--vlp-gold-ink);
  background: transparent;
}

/* --- ::answer — the short answer ----------------------------- */
.single-post .vlr-answer {
  position: relative;
  overflow: visible;
  background: var(--vlp-panel);
  border: 1px solid var(--vlp-rule);
  border-top: 2px solid var(--vlp-gold);
  border-radius: var(--vlp-radius);
  padding: 1.25rem 1.5rem 1.35rem;
  margin: 0;
  box-shadow: none;
}
.single-post .entry-content > .vlr:has(> .vlr-answer) {
  margin-block-start: 1.75rem;
}
.single-post .vlr-answer__title {
  display: block;
  color: var(--vlp-gold-ink);
  margin: 0 0 .85rem;
}
.single-post .vlr-answer__title svg {
  display: none;
}
.single-post .vlr-answer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.single-post .vlr-answer__item {
  position: relative;
  margin: 0 0 .55rem;
  padding: 0 0 0 1.25rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--vlp-ink);
}
.single-post .vlr-answer__item::before {
  left: 0;
  top: .55em;
}
.single-post .vlr-answer__item:last-child {
  margin-bottom: 0;
}
.single-post .vlr-answer__item strong {
  color: var(--vlp-navy);
}

/* --- ::dial — the score plate -------------------------------- */
.single-post .vlr-card {
  display: flex;
  gap: 1.75rem;
  align-items: center;
  background: var(--vlp-plate);
  color: var(--vlp-plate-ink);
  border: 1px solid var(--vlp-plate);
  border-radius: 4px;
  padding: 1.6rem 1.9rem;
  margin: 0;
  box-shadow: none;
  outline: 1px solid var(--vlp-gold-line);
  outline-offset: -7px;
}
.single-post .entry-content > .vlr:has(> .vlr-card) {
  margin-block-start: 1.5rem;
}
.single-post .vlr-dial {
  flex: 0 0 auto;
  position: relative;
  width: 118px;
  height: 118px;
}
.single-post .vlr-dial__svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.single-post .vlr-dial__svg circle:first-of-type {
  stroke: rgba(243, 239, 230, .16);
}
.single-post .vlr-dial__value {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.single-post .vlr-dial__score {
  font-family: var(--vlp-serif);
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--vlp-plate-ink);
}
.single-post .vlr-dial__out {
  color: var(--vlp-gold);
  margin-top: .35rem;
  font-size: .5625rem;
}
.single-post .vlr-card__body {
  flex: 1;
  min-width: 0;
}
.single-post .vlr-card__chip {
  display: inline-block;
  background: transparent;
  color: var(--vlp-gold);
  padding: 0 0 .35rem;
  border: 0;
  border-bottom: 1px solid var(--vlp-gold-line);
  border-radius: 0;
}
.single-post .vlr-card__chip svg {
  display: none;
}
.single-post .vlr-card__verdict {
  font-family: var(--vlp-serif);
  font-size: 1.625rem;
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--vlp-plate-ink);
  margin: .9rem 0 0;
  text-wrap: balance;
}
.single-post .vlr-card__body > p {
  margin: .9rem 0 0;
}
.single-post .vlr-seal {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: transparent;
  color: var(--vlp-plate-ink);
  padding: 0;
  border-radius: 0;
  box-shadow: none;
}
.single-post .vlr-seal > svg {
  width: 22px;
  height: 22px;
}
.single-post .vlr-seal > svg rect {
  fill: var(--vlp-gold);
  rx: 3;
}
.single-post .vlr-seal__tag {
  display: block;
  color: var(--vlp-gold);
  line-height: 1.1;
}
.single-post .vlr-seal__sub {
  display: block;
  font-family: var(--vlp-sans);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--vlp-plate-dim);
  margin-top: .2rem;
}

/* --- ::stats — the spec strip -------------------------------- */
.single-post .vlr-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--vlp-rule);
  border-top: 2px solid var(--vlp-gold);
  border-radius: var(--vlp-radius);
  background: var(--vlp-panel);
}
.single-post .vlr-stats__item {
  background: transparent;
  border: 0;
  border-left: 1px solid var(--vlp-rule);
  border-radius: 0;
  padding: .9rem 1.1rem 1rem;
  box-shadow: none;
}
.single-post .vlr-stats__item:first-child {
  border-left: 0;
}
.single-post .vlr-stats__label {
  display: block;
  color: var(--vlp-gold-ink);
  margin-bottom: .4rem;
}
.single-post .vlr-stats__value {
  display: block;
  font-family: var(--vlp-serif);
  font-size: 1.375rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.01em;
  color: var(--vlp-navy);
}

/* --- ::cta / ::cta-ghost — the offer bar --------------------- */
.single-post .vlr-cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  margin: 0;
  padding: 1.15rem 1.4rem;
  background: var(--vlp-panel);
  border: 1px solid var(--vlp-rule);
  border-left: 3px solid var(--vlp-gold);
  border-radius: var(--vlp-radius);
  box-shadow: none;
}
.single-post .entry-content > .vlr:has(> .vlr-cta) {
  margin-block-start: 1.75rem;
}
.single-post .vlr-cta__price {
  flex: 1 1 auto;
  min-width: 160px;
}
.single-post .vlr-cta__label {
  display: block;
  color: var(--vlp-gold-ink);
  margin-bottom: .3rem;
}
.single-post .vlr-cta__amount {
  display: block;
  font-family: var(--vlp-serif);
  font-size: 1.75rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--vlp-navy);
}
/* --- buttons: one system for every layer -----------------------
   The offer button is gold on navy text: the brand pairing, the
   highest-contrast thing on a porcelain page (7.7:1), and the same
   colour as the medallions, so it reads as "the seal". The ghost
   is a navy outline for the non-affiliate side. Both are
   border-box with a fixed height, so they render the same whatever
   the theme thinks a box is, and both have a hover lift, an arrow
   that nudges, and a press state, which is what makes a button
   feel like one. Covers the current pipeline (.vlr-cta__btn), the
   rail, and the older layers' buttons (.vla-cta, .vl-btn-affiliate). */
.single-post .entry-content a.vlr-cta__btn,
.single-post .entry-content a.vl-rail__btn,
.single-post .entry-content a.vla-cta,
.single-post .entry-content a.vl-btn-affiliate {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  height: 48px;
  min-height: 0;
  padding: 0 1.5rem;
  margin: 0;
  background: var(--vlp-gold);
  color: var(--vlp-navy);
  border: 1px solid #C9A63E;
  border-radius: 4px;
  font-family: var(--vlp-sans);
  font-size: .9375rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .005em;
  white-space: nowrap;
  text-decoration: none;
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 1px 2px rgba(30, 41, 59, .12);
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, box-shadow .15s ease, transform .15s ease;
}
/* the arrow: one glyph for every button, so the pipeline's inline
   svg is hidden and the rail button gets the same mark */
.single-post .entry-content a.vlr-cta__btn svg,
.single-post .entry-content a.vla-cta svg,
.single-post .entry-content a.vl-btn-affiliate svg {
  display: none;
}
.single-post .entry-content a.vlr-cta__btn::after,
.single-post .entry-content a.vl-rail__btn::after,
.single-post .entry-content a.vla-cta::after,
.single-post .entry-content a.vl-btn-affiliate::after {
  content: "\2192";
  font-family: var(--vlp-sans);
  font-size: 1.05em;
  line-height: 1;
  transition: transform .15s ease;
}
.single-post .entry-content a.vlr-cta__btn:hover,
.single-post .entry-content a.vl-rail__btn:hover,
.single-post .entry-content a.vla-cta:hover,
.single-post .entry-content a.vl-btn-affiliate:hover {
  background: #E6C65E;
  color: var(--vlp-navy);
  background-image: none;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset, 0 8px 18px -8px rgba(30, 41, 59, .5);
  transform: translateY(-1px);
}
.single-post .entry-content a.vlr-cta__btn:hover::after,
.single-post .entry-content a.vl-rail__btn:hover::after,
.single-post .entry-content a.vla-cta:hover::after,
.single-post .entry-content a.vl-btn-affiliate:hover::after {
  transform: translateX(3px);
}
.single-post .entry-content a.vlr-cta__btn:active,
.single-post .entry-content a.vl-rail__btn:active,
.single-post .entry-content a.vla-cta:active,
.single-post .entry-content a.vl-btn-affiliate:active {
  background: #D2AD3F;
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(30, 41, 59, .18) inset;
}
.single-post .entry-content a.vlr-cta__btn:focus-visible,
.single-post .entry-content a.vl-rail__btn:focus-visible,
.single-post .entry-content a.vla-cta:focus-visible,
.single-post .entry-content a.vl-btn-affiliate:focus-visible {
  outline: 2px solid var(--vlp-navy);
  outline-offset: 3px;
  background-image: none;
}

/* the non-affiliate side: navy outline, fills on hover */
.single-post .entry-content a.vlr-cta__btn--ghost {
  background: transparent;
  color: var(--vlp-navy);
  border-color: var(--vlp-navy);
  box-shadow: none;
}
.single-post .entry-content a.vlr-cta__btn--ghost:hover {
  background: var(--vlp-navy);
  color: var(--vlp-plate-ink);
  box-shadow: 0 8px 18px -8px rgba(30, 41, 59, .5);
}
.single-post .entry-content a.vlr-cta__btn--ghost:active {
  background: #141c2b;
  color: var(--vlp-plate-ink);
  box-shadow: none;
}
.single-post .entry-content a.vlr-cta__btn--ghost:focus-visible {
  outline-color: var(--vlp-gold-ink);
}

/* --- ::take — key point -------------------------------------- */
.single-post .vlr-take {
  position: relative;
  overflow: visible;
  display: block;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--vlp-gold);
  border-radius: 0;
  padding: .35rem 0 .35rem 1.25rem;
  margin: 0;
  box-shadow: none;
  max-width: var(--vlp-measure);
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--vlp-navy);
}
.single-post .entry-content > .vlr:has(> .vlr-take) {
  margin-block-start: 1.75rem;
}
.single-post .vlr-take__icon {
  display: none;
}
.single-post .vlr-take__label {
  display: block;
  color: var(--vlp-gold-ink);
  margin-bottom: .35rem;
}

/* --- ::badges — certifications -------------------------------- */
.single-post .vlr-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0;
  margin: 0;
  border: 1px solid var(--vlp-rule);
  border-radius: var(--vlp-radius);
  background: var(--vlp-panel);
  overflow: hidden;
}
.single-post .vlr-badges__item {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  background: transparent;
  border: 0;
  border-left: 1px solid var(--vlp-rule);
  border-radius: 0;
  padding: .95rem 1.1rem 1rem;
  margin-left: -1px;
}
.single-post .vlr-badges__pill {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  align-self: flex-start;
  background: transparent;
  color: var(--vlp-navy);
  border: 0;
  border-bottom: 1px solid var(--vlp-gold-line);
  border-radius: 0;
  padding: 0 0 .3rem;
}
.single-post .vlr-badges__pill svg {
  width: 11px;
  height: 11px;
  color: var(--vlp-gold-ink);
}
.single-post .vlr-badges__scope {
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--vlp-muted);
}
.single-post .entry-content a.vlr-badges__link {
  font-family: var(--vlp-sans);
  font-size: .75rem;
  font-weight: 700;
  color: var(--vlp-gold-ink);
  text-decoration: none;
  background-image: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.single-post .vlr-badges__link svg {
  width: 11px;
  height: 11px;
}

/* --- pros and cons -------------------------------------------- */
.single-post .vlr-pc {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
  margin: 0;
}
.single-post .vlr-pc__col {
  background: var(--vlp-panel);
  border: 1px solid var(--vlp-rule);
  border-top: 2px solid var(--vlp-sage);
  border-radius: var(--vlp-radius);
  padding: 1.1rem 1.3rem 1.2rem;
}
.single-post .vlr-pc__col--con {
  border-top-color: var(--vlp-clay);
}
.single-post .vlr-pc__head {
  display: block;
  margin: 0 0 .85rem;
  color: var(--vlp-sage);
}
.single-post .vlr-pc__col--con .vlr-pc__head {
  color: var(--vlp-clay);
}
.single-post .vlr-pc__head svg {
  display: none;
}
.single-post .vlr-pc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.single-post .vlr-pc__item {
  display: flex;
  gap: .6rem;
  align-items: flex-start;
  margin: 0 0 .55rem;
  font-size: .9375rem;
  line-height: 1.5;
  color: var(--vlp-ink);
}
.single-post .vlr-pc__item:last-child {
  margin-bottom: 0;
}
.single-post .vlr-pc__item svg {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  margin-top: .3rem;
  color: var(--vlp-sage);
}
.single-post .vlr-pc__col--con .vlr-pc__item svg {
  color: var(--vlp-clay);
}

/* --- pull quote ----------------------------------------------- */
.single-post .vlr-quote {
  position: relative;
  overflow: visible;
  margin: 0;
  padding: .25rem 0 .25rem 1.4rem;
  background: transparent;
  border: 0;
  border-left: 3px solid var(--vlp-gold);
  border-radius: 0;
  box-shadow: none;
  max-width: var(--vlp-measure);
  font-family: var(--vlp-serif);
  font-size: 1.5rem;
  font-weight: 500;
  font-style: italic;
  line-height: 1.35;
  color: var(--vlp-navy);
}
.single-post .entry-content > .vlr:has(> .vlr-quote) {
  margin-block-start: 1.75rem;
}


/* ============================================================
   8. RAIL CONTENTS  (built by vl-post.js)
   ============================================================ */
.single-post .vl-rail {
  font-family: var(--vlp-sans);
}
.single-post .vl-rail__block + .vl-rail__block {
  margin-top: 1.5rem;
}
.single-post .vl-rail__label {
  display: block;
  color: var(--vlp-gold-ink);
  padding-bottom: .55rem;
  border-bottom: 1px solid var(--vlp-rule);
  margin-bottom: .6rem;
}

/* on this page */
.single-post .vl-rail__toc {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: vltoc;
}
.single-post .vl-rail__toc li {
  counter-increment: vltoc;
  margin: 0;
  padding: 0;
}
.single-post .entry-content .vl-rail__toc a {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  padding: .38rem 0 .38rem .75rem;
  border-left: 2px solid transparent;
  margin-left: -1px;
  font-size: .8125rem;
  font-weight: 500;
  line-height: 1.35;
  color: var(--vlp-ink);
  text-decoration: none;
  background-image: none;
  transition: color .12s ease, border-color .12s ease;
}
.single-post .entry-content .vl-rail__toc a::before {
  content: counter(vltoc, upper-roman);
  flex: 0 0 1.5rem;
  font-family: var(--vlp-caps);
  font-size: .5625rem;
  letter-spacing: .1em;
  color: var(--vlp-muted);
}
.single-post .entry-content .vl-rail__toc a:hover,
.single-post .entry-content .vl-rail__toc a:focus-visible {
  color: var(--vlp-navy);
  background: transparent;
}
.single-post .entry-content .vl-rail__toc li.is-active a {
  color: var(--vlp-navy);
  font-weight: 700;
  border-left-color: var(--vlp-gold);
}
.single-post .entry-content .vl-rail__toc li.is-active a::before {
  color: var(--vlp-gold-ink);
}
.single-post .entry-content .vl-rail__toc li.is-back a {
  color: var(--vlp-muted);
  font-size: .8125rem;
}
.single-post .entry-content .vl-rail__toc li.is-back a::before {
  content: "";
}

/* the score, compact */
.single-post .vl-rail__score {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--vlp-plate);
  color: var(--vlp-plate-ink);
  border-radius: 4px;
  padding: 1rem 1.1rem;
  outline: 1px solid var(--vlp-gold-line);
  outline-offset: -6px;
}
.single-post .vl-rail__score + .vl-rail__score {
  margin-top: .5rem;
}
.single-post .vl-rail__score .vlr-dial {
  width: 84px;
  height: 84px;
}
.single-post .vl-rail__score .vlr-dial__score {
  font-size: 1.75rem;
}
.single-post .vl-rail__score .vlr-dial__out {
  font-size: .5rem;
  margin-top: .2rem;
}
.single-post .vl-rail__score-name {
  display: block;
  font-family: var(--vlp-caps);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vlp-gold);
  margin-bottom: .35rem;
}
.single-post .vl-rail__score-verdict {
  display: block;
  font-family: var(--vlp-serif);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
  color: var(--vlp-plate-ink);
  text-wrap: balance;
}
.single-post .vl-rail__score-sub {
  display: block;
  margin-top: .4rem;
  font-size: .6875rem;
  color: var(--vlp-plate-dim);
}

/* two or three scores side by side: compact */
.single-post .vl-rail__block.is-multi .vl-rail__score {
  gap: .8rem;
  padding: .75rem .9rem;
  outline-offset: -5px;
}
.single-post .vl-rail__block.is-multi .vl-rail__score .vlr-dial {
  width: 60px;
  height: 60px;
}
.single-post .vl-rail__block.is-multi .vl-rail__score .vlr-dial__score {
  font-size: 1.3rem;
}
.single-post .vl-rail__block.is-multi .vl-rail__score .vlr-dial__out {
  display: none;
}
.single-post .vl-rail__block.is-multi .vl-rail__score-verdict {
  font-size: .9375rem;
  line-height: 1.3;
}
.single-post .vl-rail__block.is-multi .vl-rail__score-sub {
  display: none;
}

/* the offer */
.single-post .vl-rail__offer {
  border: 1px solid var(--vlp-rule);
  border-top: 2px solid var(--vlp-gold);
  border-radius: var(--vlp-radius);
  background: var(--vlp-panel);
  padding: .95rem 1.1rem 1.1rem;
}
.single-post .vl-rail__offer-label {
  display: block;
  font-family: var(--vlp-caps);
  font-size: .5625rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vlp-gold-ink);
  margin-bottom: .3rem;
}
.single-post .vl-rail__offer-amount {
  display: block;
  font-family: var(--vlp-serif);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  color: var(--vlp-navy);
  margin-bottom: .8rem;
}
.single-post .entry-content a.vl-rail__btn {
  width: 100%;
  font-size: .9375rem;
}
.single-post .vl-rail__fine {
  display: block;
  margin-top: .6rem;
  font-size: .6875rem;
  line-height: 1.4;
  color: var(--vlp-muted);
}


/* ============================================================
   9. RESPONSIVE
   ============================================================ */
@media (max-width: 1099px) {
  body.single-post {
    --vlp-rail-w: 0px;
    --vlp-rail-gap: 0px;
  }
  .single-post .entry-content {
    grid-template-columns: minmax(0, 1fr);
  }
  .single-post .entry-content > * {
    grid-column: 1;
  }
  .single-post .entry-content > .vl-rail {
    display: none;
  }
  .single-post .entry-content.has-rail > .vl-jump-wrap {
    display: block;
  }
  .single-post .wp-block-post-title {
    padding-right: 0;
  }
}

@media (max-width: 720px) {
  .single-post .wp-block-group:has(> .wp-block-post-title) {
    padding-top: 2rem;
  }
  .single-post .entry-content > h2 {
    font-size: 1.75rem;
    margin-block-start: 2.75rem;
  }
  .single-post .entry-content > h3 {
    font-size: 1.3125rem;
  }
  .single-post .entry-content > p,
  .single-post .entry-content > ul,
  .single-post .entry-content > ol {
    font-size: 1rem;
    line-height: 1.65;
  }
  .single-post .entry-content > h2 + p {
    font-size: 1.0625rem;
  }
  .single-post .vlr-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.1rem;
    padding: 1.3rem 1.4rem;
  }
  .single-post .vlr-card__verdict {
    font-size: 1.375rem;
  }
  .single-post .vlr-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .single-post .vlr-stats__item:nth-child(odd) {
    border-left: 0;
  }
  .single-post .vlr-stats__item:nth-child(n + 3) {
    border-top: 1px solid var(--vlp-rule);
  }
  .single-post .entry-content a.vlr-cta__btn {
    width: 100%;
  }
  .single-post .vlr-quote {
    font-size: 1.25rem;
  }
  .single-post .vlr-jump__list {
    grid-template-columns: 1fr;
  }
  .single-post .entry-content > figure.wp-block-image img {
    padding: 3px;
  }
}


/* ============================================================
   10. PRINT AND MOTION
   ============================================================ */
@media print {
  /* Accountants print things. One column, the whole article, black
     on white, with the sources' URLs written out. vl-evidence.js
     opens every folded section and details before printing. */
  @page {
    margin: 18mm 16mm;
  }
  body.single-post {
    background: #fff;
    color: #000;
  }
  .single-post #vl-header,
  .single-post .site-header,
  .single-post .site-footer,
  .single-post .vl-rail,
  .single-post .vl-jump-wrap,
  .single-post .vlr-cta,
  .single-post .vl-byline__panel,
  .single-post .wp-block-post-featured-image,
  .single-post .entry-content ~ * {
    display: none !important;
  }
  .single-post .entry-content {
    display: block;
    max-width: none;
    width: auto;
    margin: 0 !important;
  }
  .single-post .entry-content > * {
    max-width: none;
  }
  .single-post .wp-block-post-title {
    font-size: 24pt !important;
    text-align: left;
    color: #000 !important;
    padding: 0;
  }
  .single-post .wp-block-group:has(> .wp-block-post-title) {
    padding: 0;
    background: none !important;
  }
  .single-post .entry-content > h2 + p {
    font-size: 11pt;
    color: #000;
  }
  .single-post .vl-byline {
    margin-top: .5rem;
  }
  .single-post .vl-byline__grid {
    grid-template-columns: 1fr 1fr;
  }
  .single-post .entry-content > p,
  .single-post .entry-content > ul,
  .single-post .entry-content > ol {
    font-size: 10.5pt;
    line-height: 1.5;
    color: #000;
  }
  .single-post .entry-content > h2 {
    font-size: 16pt;
    margin-block-start: 1.6rem;
    page-break-after: avoid;
    break-after: avoid;
  }
  .single-post .entry-content > h3 {
    font-size: 12.5pt;
    page-break-after: avoid;
    break-after: avoid;
  }
  .single-post .entry-content > h2::before {
    background: none;
  }
  .single-post .entry-content h2.vl-fold-head > .vl-fold__btn::after,
  .single-post .entry-content > details > summary::after {
    content: none;
  }
  .single-post .entry-content .vl-folded {
    display: block !important;
  }
  .single-post .entry-content > details > summary {
    padding: .4rem 0;
  }
  .single-post .vlr-card,
  .single-post .vl-rail__score {
    background: #fff;
    color: #000;
    outline: 1px solid #999;
    outline-offset: -4px;
    border: 1px solid #000;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .single-post .vlr-card__verdict,
  .single-post .vlr-dial__score {
    color: #000;
  }
  .single-post .vlr-answer,
  .single-post .vlr-stats,
  .single-post .vlr-badges,
  .single-post .vlr-pc__col,
  .single-post .vlr-jump {
    background: #fff;
    border-color: #999;
  }
  .single-post .entry-content table thead th {
    background: #fff;
    color: #000;
    border-bottom: 1.5px solid #000;
    box-shadow: none;
  }
  .single-post .entry-content > figure.wp-block-image img,
  .single-post .vl-compare__item img,
  .single-post .vl-callouts__stage {
    border-color: #999;
    padding: 2px;
  }
  .single-post .entry-content figure,
  .single-post .entry-content table,
  .single-post .entry-content > .vlr,
  .single-post .entry-content > details {
    page-break-inside: avoid;
    break-inside: avoid;
  }
  /* the sources need their addresses on paper */
  .single-post .entry-content h2:is(#sources, #further-reading) ~ ul a[href^="http"]::after,
  .single-post .entry-content h2:is(#sources, #further-reading) ~ ol a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #444;
    word-break: break-all;
  }
  .single-post .entry-content a {
    color: #000;
    background-image: none;
    text-decoration: underline;
  }
}

@media (prefers-reduced-motion: reduce) {
  .single-post .entry-content > details > summary::after,
  .single-post .vl-rail__toc a,
  .single-post .vlr-cta__btn {
    transition: none;
  }
}