/* RPA article — the long-form reading layout (single.php). */

.rpa-article { padding-block-start: clamp(1.25rem, 0.5rem + 2.5vw, 3rem); }

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

.rpa-article__head { padding-block-end: clamp(2.5rem, 2rem + 3vw, 5rem); }

.rpa-article__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem 2rem;
  padding-block-end: 0.9rem;
  margin-block-end: clamp(2rem, 1rem + 4vw, 5rem);
  border-block-end: 1px solid var(--rpa-c-rule-strong);
}
.rpa-article__back { font-size: calc(var(--rpa-step-0) * 0.89); }
.rpa-article__facts {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 0.85em;
  margin: 0;
}
.rpa-article__topic {
  color: var(--rpa-c-link);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
}
.rpa-article__topic:hover { color: var(--rpa-c-text); }
.rpa-article__sep { opacity: 0.5; }

.rpa-article__title {
  max-width: 21ch;
  /* between step-4 and step-5: article titles run long */
  font-size: calc((var(--rpa-step-4) + var(--rpa-step-5)) / 2);
  line-height: 1.03;
  letter-spacing: -0.026em;
}
.rpa-article__lede {
  max-width: 50ch;
  margin: clamp(1.5rem, 1rem + 2vw, 2.75rem) 0 0;
  color: var(--rpa-c-muted);
}

/* ---------- Plate ---------- */

.rpa-article__plate { padding-block-end: clamp(2.5rem, 2rem + 3vw, 5rem); }
.rpa-article__figure { margin: 0; }
/* Featured images are informational (photo collages on a card): natural ratio, never cropped,
   presented as a framed plate. Like every photograph on the site they rest in monochrome and
   return to full colour under the pointer (or a finger) — P1-26. Images inside the text stay in
   colour: there the colour may carry the information. */
.rpa-article__image {
  padding: clamp(0.5rem, 0.3rem + 0.8vw, 1rem);
  border: 1px solid var(--rpa-c-rule);
  background: var(--rpa-bone);
}
.rpa-article__image img {
  width: 100%;
  height: auto;
  border-radius: 1px;
  filter: grayscale(1) contrast(1.05);
  transition: filter var(--rpa-dur-2) var(--rpa-ease);
}
.rpa-article__figure:is(:hover, :active) .rpa-article__image img { filter: none; }
@media print { .rpa-article__image img { filter: none; } }
.rpa-article__figure .rpa-caption .rpa-plate { margin-inline-end: 0.75em; }

/* ---------- Body: rail | prose | (air) ---------- */

.rpa-article__body {
  display: grid;
  gap: 2.5rem;
  view-timeline-name: --rpa-article;
  view-timeline-axis: block;
}
.rpa-article__content { min-width: 0; margin-inline: auto; width: 100%; }

.rpa-article__rail-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  padding-block: 0.9rem;
  border-block: 1px solid var(--rpa-c-rule);
}
.rpa-article__rail-label { margin: 0; }
.rpa-article__share {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--rpa-step-0) * 0.89);
}
.rpa-article__progress { display: none; }

@media (min-width: 1100px) {
  .rpa-article__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, var(--rpa-measure-wide)) minmax(0, 1fr);
    gap: 0 clamp(2rem, 4vw, 4rem);
    align-items: start;
  }
  .rpa-article__content { grid-column: 2; margin-inline: 0; }
  .rpa-article__rail {
    grid-column: 1;
    grid-row: 1;
    position: sticky;
    top: calc(var(--rpa-header-h) + 2.5rem);
  }
  .admin-bar .rpa-article__rail { top: calc(var(--rpa-header-h) + 2.5rem + var(--wp-admin--admin-bar--height, 0px)); }
  .rpa-article__rail-inner {
    position: relative;
    display: grid;
    align-content: start;
    gap: 0.85rem;
    min-height: 9rem;
    padding: 0.1rem 0 0.1rem 1.35rem;
    border: 0;
  }
  .rpa-article__share { display: grid; gap: 0.45rem; }

  /* Reading progress: a hairline that fills as the article body passes — pure CSS. */
  @supports (animation-timeline: view()) {
    .rpa-article__progress {
      display: block;
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      width: 1.5px;
      background: var(--rpa-c-rule);
    }
    .rpa-article__progress > span {
      position: absolute;
      inset: 0;
      background: var(--rpa-petrol);
      transform: scaleY(0);
      transform-origin: 50% 0;
      animation: rpa-article-progress linear both;
      animation-timeline: --rpa-article;
      animation-range: contain 0% contain 100%;
    }
  }
}
@keyframes rpa-article-progress { to { transform: scaleY(1); } }

/* ---------- Wide screens: text hangs from the title's edge, the right side is a working margin (P3-03) ----------
   From 1200px the body is two columns: the text (reading measure, breakouts to the wide measure) starts at
   the shell's left edge — the same edge as the back link, title, standfirst and plate — and the rail moves
   to a right-hand margin column holding "In this article" (three or more h2s) and Share, sticky as before. */
.rpa-article__toc { display: none; }

@media (min-width: 1200px) {
  .rpa-article__body {
    grid-template-columns: minmax(0, var(--rpa-measure-wide)) minmax(13rem, 17rem);
    justify-content: space-between;
    gap: 0 clamp(3rem, 6vw, 6rem);
  }
  .rpa-article__content { grid-column: 1; grid-row: 1; }
  .rpa-article__rail {
    grid-column: 2;
    display: grid;
    gap: 2rem;
    /* Level with the first line of text, not with its ascender. */
    margin-block-start: 0.45rem;
    padding: 0.25rem 0.4rem 0.25rem 1.35rem; /* room for focus rings inside the scroll box */
    max-height: calc(100vh - var(--rpa-header-h) - 4rem);
    overflow-y: auto;
    scrollbar-width: none;
  }
  /* The progress hairline runs down the whole margin block, not just the share list. */
  .rpa-article__rail-inner { position: static; min-height: 0; padding: 0; }
  .rpa-article__rail:not(.rpa-article__rail--toc) .rpa-article__rail-inner { min-height: 9rem; }

  .rpa-article__toc { display: grid; gap: 0.85rem; }
  .rpa-article__toc-list {
    display: grid;
    gap: 0.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font-size: calc(var(--rpa-step-0) * 0.89);
    line-height: 1.35;
  }
  .rpa-article__toc-link {
    color: var(--rpa-c-muted);
    text-decoration: underline;
    text-decoration-color: var(--rpa-c-rule-strong);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-wrap: balance;
    transition: color var(--rpa-dur-1) var(--rpa-ease), text-decoration-color var(--rpa-dur-1) var(--rpa-ease);
  }
  .rpa-article__toc-link:is(:hover, :focus-visible) { color: var(--rpa-c-link); text-decoration-color: currentColor; }
  /* The section being read (aria-current set by guide-toc.js). */
  .rpa-article__toc-link[aria-current="true"] { color: var(--rpa-c-text); text-decoration-color: var(--rpa-petrol); text-decoration-thickness: 1.5px; }
}

/* ---------- Foot: filed under ---------- */

.rpa-article__foot { padding-block-start: clamp(3rem, 2rem + 3vw, 5rem); }
.rpa-article__foot-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem 1.5rem;
  max-width: var(--rpa-measure-wide);
  margin-inline: auto;
  padding-block-start: 1.1rem;
  border-block-start: 1px solid var(--rpa-c-rule-strong);
}
.rpa-article__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 1.25rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--rpa-step-0) * 0.89);
}
/* ---------- Previous / next ---------- */

.rpa-article__adjacent { padding-block-start: clamp(2.5rem, 2rem + 2vw, 4rem); }
.rpa-article__adjacent-inner {
  display: grid;
  gap: 0;
  max-width: var(--rpa-measure-wide);
  margin-inline: auto;
  border-block: 1px solid var(--rpa-c-rule);
}
.rpa-article__adjacent-link {
  display: grid;
  align-content: start;
  gap: 0.6rem;
  padding-block: 1.25rem 1.4rem;
  color: var(--rpa-c-text);
  text-decoration: none;
}
.rpa-article__adjacent-link.is-empty { display: none; }
.rpa-article__adjacent-link + .rpa-article__adjacent-link:not(.is-empty) { border-block-start: 1px solid var(--rpa-c-rule); }
.rpa-article__adjacent-label { color: var(--rpa-c-muted); transition: color var(--rpa-dur-1) var(--rpa-ease); }
.rpa-article__adjacent-title {
  font-family: var(--rpa-serif);
  font-size: var(--rpa-step-1);
  font-weight: 350;
  line-height: 1.2;
  letter-spacing: -0.012em;
  text-wrap: balance;
  text-decoration: underline;
  text-decoration-color: var(--rpa-c-rule-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  transition: text-decoration-color var(--rpa-dur-1) var(--rpa-ease);
}
.rpa-article__adjacent-link:is(:hover, :focus-visible) .rpa-article__adjacent-title { text-decoration-color: currentColor; }
.rpa-article__adjacent-link:is(:hover, :focus-visible) .rpa-article__adjacent-label { color: var(--rpa-c-text); }
@media (min-width: 700px) {
  .rpa-article__adjacent-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 clamp(2rem, 4vw, 4rem); }
  .rpa-article__adjacent-link.is-empty { display: block; }
  .rpa-article__adjacent-link + .rpa-article__adjacent-link:not(.is-empty) { border-block-start: 0; }
  .rpa-article__adjacent-link--next { text-align: end; justify-items: end; }
}

/* Wide screens (P3-03): what follows the text keeps the text's left edge. */
@media (min-width: 1200px) {
  .rpa-article__foot-inner,
  .rpa-article__adjacent-inner { margin-inline: 0; }
}

.rpa-article__article { padding-block-end: var(--rpa-section); }

.rpa-article__pages { margin-block-start: 2.5em; display: flex; gap: 1em; }

/* ---------- Continue reading ---------- */

.rpa-article__more-title {
  max-width: 16ch;
  margin-block-end: clamp(2rem, 1.5rem + 2.5vw, 4rem);
  font-size: var(--rpa-step-4);
}
.rpa-article__more .rpa-index-head__meta .rpa-link-arrow { font-size: calc(var(--rpa-step-0) * 0.89); }

/* ---------- Closing call to action ---------- */

.rpa-closing__inner {
  display: grid;
  gap: var(--rpa-gap) clamp(2rem, 6vw, 7rem);
}
.rpa-closing__eyebrow { margin-block-end: 1.5rem; }
.rpa-closing__title { max-width: 14ch; font-size: var(--rpa-step-5); }
.rpa-closing__aside .rpa-lede { color: var(--rpa-c-muted); margin-block-end: 2rem; }
@media (min-width: 900px) {
  .rpa-closing__inner { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); align-items: end; }
}