/* ==========================================================================
   Article — one Journal article (blocks/vv-r-article).

   Measured off the live articles at 1440, 810 and 390, 2026-09-29. The lead
   photograph runs the full width at 15:8 (3:4 on a phone), from the top of
   the page under the bar, as a stacked hero; "Back to Journals" closes the
   article (user, 2026-10-12). The title follows 100 below (80 tablet, 40 phone), the description 10
   under it and the byline 50 under that (§4's head spacing; user, 2026-10-12),
   then a hairline 50 below and the body 50 under it
   (user, 2026-10-12; was 150 of space and no rule). The column is
   800 wide, or the page less the gutter. The head is centred (§7). Layout only: colour from role
   tokens, type from .vv-role-prose-* (the body's are applied here by element,
   because the editor writes blocks, not classes).
   ========================================================================== */

.vv-band--r-article {
  --vv-r-article-measure: var(--vv-measure-800);
  --vv-r-article-title-gap: var(--vv-gap-100);
  --vv-r-article-body-gap: var(--vv-gap-50);    /* head to the hairline, and the hairline to the body */
  --vv-r-article-para-gap: var(--vv-gap-5);          /* paragraph to paragraph, and a heading to its text */
  padding-block: 0;
  padding-inline: 0;                     /* the lead photograph is full width; the column pads itself */
}

.vv-r-article__lead {
  aspect-ratio: 15 / 8;
  overflow: hidden;
}
.vv-r-article__lead img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vv-r-article__column {
  max-width: var(--vv-r-article-measure);
  margin-inline: auto;
  padding-inline: var(--vv-gutter);
  box-sizing: content-box;
}

/* ---------- Head ---------- */

.vv-r-article__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--vv-head-text-gap);           /* title to description */
  padding-top: var(--vv-r-article-title-gap);
  text-align: center;
}
.vv-r-article__lede { max-width: var(--vv-measure-660); }
.vv-r-article__byline { margin-top: calc(var(--vv-head-content-gap) - var(--vv-head-text-gap)); display: flex; flex-direction: column; align-items: center; gap: var(--vv-gap-5); }

/* ---------- Body ---------- */

.vv-r-article__body {
  margin-top: var(--vv-r-article-body-gap);
  padding-top: var(--vv-r-article-body-gap);
  border-top: 1px solid var(--vv-color-line);
  padding-bottom: var(--vv-gap-100);
}

.vv-r-article__body > * + * { margin-top: var(--vv-r-article-para-gap); }
/* Any block, then a heading: 40 above. A list, a picture or questions
   (the FAQ's inline rows): 24 above. */
.vv-r-article__body > * + :is(h2, h3, h4, h5, h6) { margin-top: var(--vv-gap-40); }
.vv-r-article__body > * + :is(ul, ol, figure, .vv-r-faq--inline) { margin-top: calc(var(--vv-gap-20) + var(--vv-r-article-para-gap)); }
.vv-r-article__body > :is(figure, .vv-r-faq--inline) + * { margin-top: calc(var(--vv-gap-20) + var(--vv-r-article-para-gap)); }
.vv-r-article__body > :is(figure, .vv-r-faq--inline) + :is(h2, h3, h4, h5, h6) { margin-top: var(--vv-gap-40); }


.vv-r-article__body a {
  color: var(--vv-color-text-link-inline);
  text-decoration: underline;
  transition: color var(--vv-motion-hover-duration) var(--vv-motion-hover-easing);
}
.vv-r-article__body a:hover { color: var(--vv-color-text-cta-hover); }
/* A link in a heading keeps the link colour but no underline, so it still reads as a heading. */
.vv-r-article__body :is(h2, h3, h4, h5, h6) a { text-decoration: none; }

.vv-r-article__body :is(ul, ol) { margin-block: 0; padding-left: var(--vv-gap-20); }
/* Markers as in .vv-prose; the reset strips them. */
.vv-r-article__body ul { list-style: disc; }
.vv-r-article__body ol { list-style: decimal; }
.vv-r-article__body li::marker { color: var(--vv-color-element-highlight); }

.vv-r-article__body img { display: block; max-width: 100%; height: auto; }
.vv-r-article__body figure { margin-inline: 0; }
.vv-r-article__body figure.wp-block-table { overflow-x: auto; }

/* Live's table (measured 2026-09-29): a pale rounded frame, a rule between
   rows only, no column lines, columns sized by their content. It scrolls
   sideways inside its figure on a phone. */
.vv-r-article__body table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--vv-color-line-table);
  border-radius: var(--vv-radius-md);
  overflow: hidden;
}
.vv-r-article__body :is(th, td) {
  padding: var(--vv-gap-10);
  border: 0;
  text-align: left;
  vertical-align: top;
}
.vv-r-article__body tr + tr :is(th, td) { border-top: 1px solid var(--vv-color-line-table); }

/* ---------- Tablet and phone: the column and the gaps step ---------- */

@media (max-width: 1200.98px) and (min-width: 810px) {
  .vv-band--r-article {
    --vv-r-article-title-gap: var(--vv-gap-100);
  }
}
@media (max-width: 809.98px) {
  .vv-band--r-article {
    --vv-r-article-title-gap: var(--vv-gap-40);
  }
  .vv-r-article__lead { aspect-ratio: auto; }   /* live: a phone shows the photograph at its own shape */
  .vv-r-article__lead img { height: auto; }
}