/* tokens.css */
/* RPA design tokens — the single source of truth.
   Every stylesheet in the theme and in rpa-core reads these; none redefines them.
   Rationale for each value: docs/ART-DIRECTION.md */

@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/wp-content/themes/rpa/assets/fonts/newsreader-latin-opsz-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Newsreader"; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url("/wp-content/themes/rpa/assets/fonts/newsreader-latin-ext-opsz-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Newsreader"; font-style: italic; font-weight: 200 800; font-display: swap;
  src: url("/wp-content/themes/rpa/assets/fonts/newsreader-latin-opsz-italic.woff2") format("woff2"); }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/wp-content/themes/rpa/assets/fonts/geist-latin-wght-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Geist"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/wp-content/themes/rpa/assets/fonts/geist-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("/wp-content/themes/rpa/assets/fonts/geist-mono-latin-wght-normal.woff2") format("woff2"); }

/* Metric-matched fallbacks: while the webfonts (preloaded in inc/head.php) arrive, Times/Arial are
   scaled to Newsreader's and Geist's set width and vertical metrics, so the swap moves no lines.
   Ratios measured in Chromium at display size against the real files (pass 1, P1-19). */
@font-face { font-family: "Newsreader Fallback"; font-style: normal; font-weight: 200 800;
  src: local("Times New Roman"), local("Liberation Serif"), local("Tinos");
  size-adjust: 108%; ascent-override: 68.5%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Newsreader Fallback"; font-style: italic; font-weight: 200 800;
  src: local("Times New Roman Italic"), local("TimesNewRomanPS-ItalicMT"), local("Liberation Serif Italic"), local("Tinos Italic");
  size-adjust: 100%; ascent-override: 74%; descent-override: 27%; line-gap-override: 0%; }
@font-face { font-family: "Geist Fallback"; font-style: normal; font-weight: 100 900;
  src: local("Arial"), local("Liberation Sans"), local("Arimo");
  size-adjust: 103%; ascent-override: 98%; descent-override: 29%; line-gap-override: 0%; }

:root {
  /* Colour — all sampled from the existing RPA site and logo */
  --rpa-ink: #101417;
  --rpa-petrol: #365462;
  --rpa-petrol-deep: #22363f;
  --rpa-indigo: #2a3275;       /* links, and only links */
  --rpa-paper: #f0ede7;
  --rpa-bone: #faf9f6;
  --rpa-slate: #4b4f58;        /* secondary text; never go lighter on paper */
  --rpa-verdigris: #4aa485;    /* single signal colour: live/data marks */
  --rpa-rule: rgb(16 20 23 / 0.16);
  --rpa-rule-strong: rgb(16 20 23 / 0.55);

  /* On dark (ink/petrol-deep) bands */
  --rpa-on-dark: #f0ede7;
  --rpa-on-dark-muted: rgb(240 237 231 / 0.72);
  --rpa-on-dark-rule: rgb(240 237 231 / 0.2);
  --rpa-link-on-dark: #c9d3ff;

  /* Type families */
  --rpa-serif: "Newsreader", "Newsreader Fallback", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --rpa-sans: "Geist", "Geist Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --rpa-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Fluid type scale, 1.25 ratio. 390px → 1440px viewport: the first clamp, unchanged.
     Large screens (P2-07): a second segment adds a little from 1600px and tops out at 2400px, so a
     1920 or 2560 monitor gets type sized for it — display ≈ +15%, body 18 → 20. Below 1600px the
     second term is exactly 0, so nothing at or under 1440 moves. */
  --rpa-step--1: calc(clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem) + clamp(0rem, (100vw - 1600px) * 0.00125, 0.0625rem));   /* 13 → 14 → 15  labels */
  --rpa-step-0: calc(clamp(1.0625rem, 1.04rem + 0.1vw, 1.125rem) + clamp(0rem, (100vw - 1600px) * 0.0025, 0.125rem));     /* 17 → 18 → 20  body */
  --rpa-step-1: calc(clamp(1.25rem, 1.18rem + 0.3vw, 1.4375rem) + clamp(0rem, (100vw - 1600px) * 0.003125, 0.15625rem)); /* 20 → 23 → 25.5  lede */
  --rpa-step-2: calc(clamp(1.5rem, 1.33rem + 0.7vw, 1.9375rem) + clamp(0rem, (100vw - 1600px) * 0.005, 0.25rem));        /* 24 → 31 → 35 */
  --rpa-step-3: calc(clamp(1.875rem, 1.55rem + 1.4vw, 2.75rem) + clamp(0rem, (100vw - 1600px) * 0.0075, 0.375rem));      /* 30 → 44 → 50 */
  --rpa-step-4: calc(clamp(2.375rem, 1.78rem + 2.6vw, 4rem) + clamp(0rem, (100vw - 1600px) * 0.0125, 0.625rem));         /* 38 → 64 → 74 */
  --rpa-step-5: calc(clamp(2.875rem, 1.8rem + 4.6vw, 6rem) + clamp(0rem, (100vw - 1600px) * 0.0175, 0.875rem));          /* 46 → 96 → 110  hero */

  --rpa-leading-body: 1.65;
  --rpa-leading-tight: 1.04;
  /* Reading measure, counted in real characters, not in "ch" (68ch of Geist is ~90 characters):
     32 × the body size = 36rem at 18px ≈ 66–72 characters a line. Tables, figures and wide
     images break out to the wide measure (≈ 816px at 18px). Both follow the body size. */
  --rpa-measure: calc(var(--rpa-step-0) * 32);
  --rpa-measure-wide: calc(var(--rpa-step-0) * 45.33);

  /* Space */
  --rpa-gutter: clamp(1.25rem, 0.6rem + 2.8vw, 3.75rem);        /* page side padding */
  /* Max content width: 1360px up to a 1440 screen, then it takes 55% of every extra pixel —
     ≈1490 at 1680, ≈1625 at 1920 — and stops at 1720px (2100px screens and wider). */
  --rpa-shell: clamp(1360px, 1360px + (100vw - 1440px) * 0.55, 1720px);
  --rpa-section: clamp(4.5rem, 3rem + 7vw, 10rem);              /* vertical section rhythm */
  --rpa-gap: clamp(1rem, 0.7rem + 1.2vw, 2rem);

  /* Motion — "drawn, not thrown" */
  --rpa-ease: cubic-bezier(0.2, 0.7, 0.1, 1);
  --rpa-dur-1: 300ms;
  --rpa-dur-2: 600ms;
  --rpa-dur-3: 1200ms;

  --rpa-radius: 2px;            /* near-square: print, not app */
  --rpa-header-h: 76px;
}
/* base.css */
/* RPA base — reset, body type, headings, selection, focus, shell, bands.
   Reads tokens.css; defines no design values of its own.

   Contextual aliases (--rpa-c-*) are NOT new tokens: they point at existing
   tokens and flip on dark tones, so links, buttons, rules and focus rings adapt
   to whichever band they sit in without every component restating both cases. */

:root,
.is-tone-paper,
.is-tone-bone {
  --rpa-c-text: var(--rpa-ink);
  --rpa-c-muted: var(--rpa-slate);
  --rpa-c-heading: var(--rpa-petrol-deep);
  --rpa-c-accent: var(--rpa-petrol);
  --rpa-c-rule: var(--rpa-rule);
  --rpa-c-rule-strong: var(--rpa-rule-strong);
  --rpa-c-link: var(--rpa-indigo);
  --rpa-c-link-visited: color-mix(in srgb, var(--rpa-indigo) 62%, var(--rpa-ink));
  --rpa-c-link-sweep: color-mix(in srgb, var(--rpa-indigo) 13%, transparent);
  --rpa-c-focus: var(--rpa-indigo);
  --rpa-c-surface: var(--rpa-paper);
}

.is-tone-bone { --rpa-c-surface: var(--rpa-bone); }

.is-tone-ink,
.is-tone-petrol {
  --rpa-c-text: var(--rpa-on-dark);
  --rpa-c-muted: var(--rpa-on-dark-muted);
  --rpa-c-heading: var(--rpa-on-dark);
  --rpa-c-accent: var(--rpa-on-dark);
  --rpa-c-rule: var(--rpa-on-dark-rule);
  --rpa-c-rule-strong: var(--rpa-on-dark-muted);
  --rpa-c-link: var(--rpa-link-on-dark);
  --rpa-c-link-visited: color-mix(in srgb, var(--rpa-link-on-dark) 78%, var(--rpa-on-dark-muted));
  --rpa-c-link-sweep: color-mix(in srgb, var(--rpa-link-on-dark) 20%, transparent);
  --rpa-c-focus: var(--rpa-link-on-dark);
  --rpa-c-surface: var(--rpa-ink);
}

.is-tone-petrol { --rpa-c-surface: var(--rpa-petrol-deep); }

/* ---------- Reset ---------- */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-padding-top: calc(var(--rpa-header-h) + 1.5rem);
  hanging-punctuation: first allow-end last;
  background: var(--rpa-paper);
}

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--rpa-paper);
  color: var(--rpa-ink);
  font-family: var(--rpa-sans);
  font-size: var(--rpa-step-0);
  line-height: var(--rpa-leading-body);
  font-weight: 400;
  font-optical-sizing: auto;
  font-kerning: normal;
  font-synthesis: none;
  font-variant-ligatures: common-ligatures contextual;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-wrap: break-word;
  quotes: "\201C" "\201D" "\2018" "\2019";
}

body > main { flex: 1 0 auto; }

img, svg, video, canvas, iframe { display: block; max-width: 100%; }
img, video { height: auto; }
iframe { border: 0; }

button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }

[hidden] { display: none !important; }

/* ---------- Headings ---------- */

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 0.5em;
  color: var(--rpa-c-heading);
  font-family: var(--rpa-serif);
  font-weight: 350;
  font-optical-sizing: auto;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

h1 { font-size: var(--rpa-step-4); line-height: var(--rpa-leading-tight); letter-spacing: -0.022em; }
h2 { font-size: var(--rpa-step-3); letter-spacing: -0.018em; }
h3 { font-size: var(--rpa-step-2); }
h4 { font-size: var(--rpa-step-1); line-height: 1.25; letter-spacing: -0.008em; }
h5, h6 {
  font-family: var(--rpa-sans);
  font-size: var(--rpa-step-0);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}

h1 em, h2 em, h3 em, h4 em { font-style: italic; font-weight: 300; }

/* ---------- Text ---------- */

p { margin: 0 0 1.25em; text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 600; }
small { font-size: var(--rpa-step--1); }
sub, sup { font-size: 0.7em; line-height: 0; position: relative; vertical-align: baseline; }
sup { top: -0.5em; }
sub { bottom: -0.2em; }
abbr[title] { text-decoration: underline dotted; text-underline-offset: 0.2em; cursor: help; }

q { quotes: inherit; }

time, .rpa-tabular { font-variant-numeric: tabular-nums lining-nums; }

hr {
  border: 0;
  border-top: 1px solid var(--rpa-c-rule);
  margin: var(--rpa-gap) 0;
}

::selection { background: var(--rpa-petrol); color: var(--rpa-paper); }

/* ---------- Focus — 2px indigo ring, 3px offset, everywhere ---------- */

:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--rpa-c-focus);
  outline-offset: 3px;
  border-radius: var(--rpa-radius);
}
/* Anything that traps focus programmatically (main#content after the skip link) stays quiet. */
[tabindex="-1"]:focus-visible { outline: none; }

/* ---------- Utilities ---------- */

.rpa-sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.rpa-skip {
  position: fixed;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 1000;
  padding: 0.8em 1.25em;
  background: var(--rpa-ink);
  color: var(--rpa-paper);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--rpa-radius);
  transform: translateY(-200%);
  transition: transform var(--rpa-dur-1) var(--rpa-ease);
}
.rpa-skip:focus-visible { transform: none; outline-color: var(--rpa-indigo); }

/* ---------- Shell ---------- */

.rpa-shell {
  width: 100%;
  max-width: var(--rpa-shell);
  margin-inline: auto;
  padding-inline: var(--rpa-gutter);
}

/* ---------- Bands + tones ---------- */

.rpa-band {
  position: relative;
  padding-block: var(--rpa-section);
  background: var(--rpa-c-surface);
  color: var(--rpa-c-text);
}
.rpa-band--flush { padding-block: 0; }
.rpa-band--tight { padding-block: calc(var(--rpa-section) * 0.5); }

/* A tone class anywhere (widgets put it on their root) adapts text; only .rpa-band paints. */
.is-tone-paper, .is-tone-bone, .is-tone-ink, .is-tone-petrol { color: var(--rpa-c-text); }

.is-tone-ink ::selection,
.is-tone-petrol ::selection { background: var(--rpa-paper); color: var(--rpa-ink); }

/* ---------- Reduced motion baseline ---------- */

@media (prefers-reduced-motion: no-preference) {
  html:focus-within { scroll-behavior: smooth; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Print: a research firm's articles get printed ---------- */

@media print {
  html, body { background: none; }
  .rpa-header, .rpa-menu, .rpa-footer, .rpa-skip, .rpa-article__rail, .rpa-article__more, .rpa-closing { display: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; word-break: break-all; }
}

/* A value that must not break across lines (a coordinate pair, a phone number). */
.rpa-nowrap { white-space: nowrap; }
/* links.css */
/* RPA links — a link is recognisable as a link without hovering. Always.

   1. Inline links (running text): indigo, underlined 1.5px / 0.2em offset,
      hover sweeps a tinted highlight behind the text, visited state retained.
   2. .rpa-link-arrow: standalone "read more" — label + travelling arrow.
      A quiet resting underline, and an ink underline that draws in on hover.

   Colours come from the contextual aliases in base.css, so every rule below is
   already correct on ink/petrol bands (link-on-dark, still underlined). */

/* Bare anchors anywhere: at minimum inherit sensibly and stay underlined. */
a {
  color: inherit;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.2em;
  text-decoration-skip-ink: auto;
}

/* 1 — Inline links.
   :is() keeps this at (0,2,1) so it beats Elementor's `.elementor a{text-decoration:none}`
   whichever stylesheet loads last; :not([class]) leaves every component link alone.
   The opt-in class is doubled (a.rpa-link.rpa-link = 0,2,1) for the same reason: a single
   class ties with Elementor's rule and loses on load order. */
:is(.rpa-prose, .rpa-lede, main p, main li, main dd, main td, main figcaption, main blockquote, .elementor-widget-text-editor) a:not([class]),
a.rpa-link.rpa-link {
  color: var(--rpa-c-link);
  text-decoration-line: underline;
  text-decoration-style: solid;
  text-decoration-thickness: 1.5px;
  text-decoration-color: currentColor;
  text-underline-offset: 0.2em;
  border-radius: 1px;
  background-image: linear-gradient(var(--rpa-c-link-sweep), var(--rpa-c-link-sweep));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 100%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size var(--rpa-dur-2) var(--rpa-ease), color var(--rpa-dur-1) var(--rpa-ease);
}

:is(.rpa-prose, .rpa-lede, main p, main li, main dd, main td, main figcaption, main blockquote, .elementor-widget-text-editor) a:not([class]):visited,
a.rpa-link.rpa-link:visited {
  color: var(--rpa-c-link-visited);
  text-decoration-color: var(--rpa-c-rule-strong);
}

:is(.rpa-prose, .rpa-lede, main p, main li, main dd, main td, main figcaption, main blockquote, .elementor-widget-text-editor) a:not([class]):hover,
a.rpa-link.rpa-link:hover {
  background-size: 100% 100%;
}

:is(.rpa-prose, .rpa-lede, main p, main li, main dd, main td, main figcaption, main blockquote, .elementor-widget-text-editor) a:not([class]):active,
a.rpa-link.rpa-link:active {
  color: var(--rpa-c-text);
}

/* External links in long-form copy get a small north-east arrow: honest about leaving. */
.rpa-prose a[target="_blank"]:not([class])::after {
  content: "\2197";
  display: inline-block;
  margin-inline-start: 0.15em;
  font-family: var(--rpa-mono);
  font-size: 0.72em;
  line-height: 1;
  text-decoration: none;
  vertical-align: 0.25em;
}

/* 2 — Standalone arrow link */
.rpa-link-arrow {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.6em;
  padding-block: 0.3em;
  color: var(--rpa-c-link);
  font-family: var(--rpa-sans);
  font-size: var(--rpa-step-0);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.003em;
  text-decoration: none;
}

/* Resting rule (quiet) + drawn rule (ink), both on the bottom edge. */
.rpa-link-arrow::before,
.rpa-link-arrow::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 1.5px;
  background: currentColor;
}
.rpa-link-arrow::before { opacity: 0.32; }
.rpa-link-arrow::after {
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--rpa-dur-2) var(--rpa-ease);
}
.rpa-link-arrow:hover::after,
.rpa-link-arrow:focus-visible::after { transform: scaleX(1); }

.rpa-link-arrow__icon {
  display: inline-block;
  font-family: var(--rpa-sans);
  font-weight: 400;
  transition: transform var(--rpa-dur-2) var(--rpa-ease);
}
.rpa-link-arrow:hover .rpa-link-arrow__icon,
.rpa-link-arrow:focus-visible .rpa-link-arrow__icon { transform: translateX(4px); }

.rpa-link-arrow:active { color: var(--rpa-c-text); }

/* "Back" variant used by the article template: arrow leads, travels left. */
.rpa-link-arrow--back .rpa-link-arrow__icon { order: -1; }
.rpa-link-arrow--back:hover .rpa-link-arrow__icon,
.rpa-link-arrow--back:focus-visible .rpa-link-arrow__icon { transform: translateX(-4px); }

/* 3 — Touch targets. On a touch screen every standalone link answers to a 44px-tall area while
   looking exactly as it does with a mouse: the hit area is an invisible pseudo-element centred on
   the text. Lists of such links open their pitch to 44px so neighbouring areas never overlap.
   Links inside running prose are exempt (WCAG 2.5.8 inline exception). */
@media (pointer: coarse) {
  .rpa-footer__list a,
  .rpa-footer__base-links a,
  .rpa-menu__contact a,
  .rpa-article__share a,
  .rpa-article__terms a,
  .rpa-topics__link,
  .rpa-header__brand a { position: relative; }

  .rpa-footer__list a::before,
  .rpa-footer__base-links a::before,
  .rpa-menu__contact a::before,
  .rpa-article__share a::before,
  .rpa-article__terms a::before,
  .rpa-topics__link::before,
  .rpa-header__brand a::before,
  .rpa-link-arrow__label::before { /* .rpa-link-arrow is already position:relative and owns its own ::before/::after */
    content: "";
    position: absolute;
    inset-inline: 0;
    top: 50%;
    min-width: 44px;
    height: 44px;
    transform: translateY(-50%);
  }

  /* Pitch: one line of text (1.5em) + gap = 44px. `:root` lifts these over the component
     stylesheets, which load after this file and set their own gap. */
  :root .rpa-footer__list:not(.rpa-tabular), /* the hours list holds no links */
  :root .rpa-menu__contact,
  :root .rpa-footer__base-links,
  :root .rpa-article__share,
  :root .rpa-article__terms { row-gap: calc(44px - 1.5em); }
  :root .rpa-footer__base { row-gap: 1rem; }

  /* The chip row scrolls sideways on phones; give the taller hit areas room inside the scroller. */
  :root .rpa-topics__list { padding-block: 6px; margin-block: -6px; row-gap: 12px; }
}
/* buttons.css */
/* RPA buttons — buttons look like buttons: filled or clearly outlined, never bare text.
   Markup (Base::button()):
   <a class="rpa-btn rpa-btn--solid"><span class="rpa-btn__label">…</span><span class="rpa-btn__icon">→</span></a>
   Also valid on <button> and <input type=submit>. Variants: --solid --outline --light, plus --petrol and --small.

   Hover is a fill drawn left→right ("drawn, not thrown"); the arrow travels 4px. */

.rpa-btn {
  --_bg: var(--rpa-ink);
  --_fg: var(--rpa-paper);
  --_bd: var(--rpa-ink);
  --_bg-hover: var(--rpa-petrol);
  --_fg-hover: var(--rpa-paper);
  --_bd-hover: var(--rpa-petrol);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75em;
  min-height: 3.1em;
  padding: 0.8em 1.5em;
  border: 1px solid var(--_bd);
  border-radius: var(--rpa-radius);
  background-color: var(--_bg);
  background-image: linear-gradient(var(--_bg-hover), var(--_bg-hover));
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 0% 100%;
  color: var(--_fg);
  font-family: var(--rpa-sans);
  font-size: calc(var(--rpa-step-0) * 0.94);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.003em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  transition:
    background-size var(--rpa-dur-2) var(--rpa-ease),
    color var(--rpa-dur-1) var(--rpa-ease),
    border-color var(--rpa-dur-1) var(--rpa-ease),
    transform var(--rpa-dur-1) var(--rpa-ease);
}

.rpa-btn:hover,
.rpa-btn:focus-visible {
  background-size: 100% 100%;
  color: var(--_fg-hover);
  border-color: var(--_bd-hover);
}

.rpa-btn:active { transform: translateY(1px); transition-duration: 60ms; }

.rpa-btn__label { position: relative; }
.rpa-btn__icon {
  position: relative;
  display: inline-block;
  font-weight: 400;
  transition: transform var(--rpa-dur-2) var(--rpa-ease);
}
.rpa-btn:hover .rpa-btn__icon,
.rpa-btn:focus-visible .rpa-btn__icon { transform: translateX(4px); }

/* Variants */
.rpa-btn--petrol {
  --_bg: var(--rpa-petrol);
  --_bd: var(--rpa-petrol);
  --_bg-hover: var(--rpa-ink);
  --_bd-hover: var(--rpa-ink);
}

.rpa-btn--outline {
  --_bg: transparent;
  --_fg: var(--rpa-ink);
  --_bd: var(--rpa-ink);
  --_bg-hover: var(--rpa-ink);
  --_fg-hover: var(--rpa-paper);
  --_bd-hover: var(--rpa-ink);
}

.rpa-btn--light {
  --_bg: var(--rpa-paper);
  --_fg: var(--rpa-ink);
  --_bd: var(--rpa-paper);
  --_bg-hover: var(--rpa-bone);
  --_fg-hover: var(--rpa-ink);
  --_bd-hover: var(--rpa-bone);
}

/* On dark bands an ink-filled or ink-outlined button would vanish: flip them. */
:is(.is-tone-ink, .is-tone-petrol) .rpa-btn--solid {
  --_bg: var(--rpa-paper);
  --_fg: var(--rpa-ink);
  --_bd: var(--rpa-paper);
  --_bg-hover: var(--rpa-bone);
  --_fg-hover: var(--rpa-ink);
  --_bd-hover: var(--rpa-bone);
}
:is(.is-tone-ink, .is-tone-petrol) .rpa-btn--outline {
  --_fg: var(--rpa-on-dark);
  --_bd: var(--rpa-on-dark-muted);
  --_bg-hover: var(--rpa-paper);
  --_fg-hover: var(--rpa-ink);
  --_bd-hover: var(--rpa-paper);
}
/* …and flip back if a light tone is nested inside a dark one. */
:is(.is-tone-ink, .is-tone-petrol) :is(.is-tone-paper, .is-tone-bone) .rpa-btn--solid {
  --_bg: var(--rpa-ink); --_fg: var(--rpa-paper); --_bd: var(--rpa-ink);
  --_bg-hover: var(--rpa-petrol); --_fg-hover: var(--rpa-paper); --_bd-hover: var(--rpa-petrol);
}
:is(.is-tone-ink, .is-tone-petrol) :is(.is-tone-paper, .is-tone-bone) .rpa-btn--outline {
  --_fg: var(--rpa-ink); --_bd: var(--rpa-ink);
  --_bg-hover: var(--rpa-ink); --_fg-hover: var(--rpa-paper); --_bd-hover: var(--rpa-ink);
}

/* Sizes */
.rpa-btn--small {
  min-height: 2.6em;
  padding: 0.55em 1.1em;
  font-size: var(--rpa-step--1);
}
.rpa-btn--block { display: flex; width: 100%; }

/* Disabled */
.rpa-btn:disabled,
.rpa-btn[aria-disabled="true"],
.rpa-btn.is-disabled {
  --_bg: transparent;
  --_fg: var(--rpa-c-muted);
  --_bd: var(--rpa-c-rule);
  background-image: none;
  color: var(--rpa-c-muted);
  border-color: var(--rpa-c-rule);
  border-style: dashed;
  cursor: not-allowed;
  pointer-events: none;
  transform: none;
}

/* Loading (contact form may set aria-busy) */
.rpa-btn[aria-busy="true"] { cursor: progress; pointer-events: none; }
.rpa-btn[aria-busy="true"] .rpa-btn__icon { opacity: 0.4; }

/* A row of buttons */
.rpa-btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1rem;
}

@media (max-width: 420px) {
  .rpa-btn { white-space: normal; }
}
/* atoms.css */
/* RPA atoms — the shared vocabulary widgets emit and never restyle.
   .rpa-display .rpa-eyebrow .rpa-plate .rpa-lede .rpa-prose .rpa-figure .rpa-caption */

/* ---------- Display heading ---------- */

.rpa-display {
  margin: 0;
  color: var(--rpa-c-heading);
  font-family: var(--rpa-serif);
  font-weight: 350;
  font-optical-sizing: auto;
  line-height: var(--rpa-leading-tight);
  letter-spacing: -0.022em;
  text-wrap: balance;
  font-feature-settings: "kern", "liga", "dlig" 0;
}
.rpa-display em,
.rpa-display i {
  font-style: italic;
  font-weight: 300;
  letter-spacing: -0.012em;
}
/* Italic overhang: keep the trailing glyph from being clipped by line-reveal masks. */
.rpa-display em:last-child { padding-inline-end: 0.04em; }

/* ---------- Eyebrow ---------- */

.rpa-eyebrow {
  margin: 0;
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
}

/* ---------- Plate / index number ---------- */

.rpa-plate {
  color: var(--rpa-c-accent);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums slashed-zero;
  font-feature-settings: "tnum", "zero";
}

/* ---------- Lede ---------- */

.rpa-lede {
  margin: 0 0 1.5em;
  max-width: 46ch;
  color: var(--rpa-c-text);
  font-size: var(--rpa-step-1);
  line-height: 1.5;
  letter-spacing: -0.006em;
  text-wrap: pretty;
}
.rpa-lede--serif {
  font-family: var(--rpa-serif);
  font-weight: 350;
  font-size: var(--rpa-step-2);
  line-height: 1.35;
  letter-spacing: -0.012em;
  max-width: 34ch;
}

/* ---------- Figure + caption ---------- */

.rpa-figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rpa-radius);
}
.rpa-figure > img,
.rpa-figure > picture > img,
.rpa-figure > video {
  display: block;
  width: 100%;
  height: auto;
}
/* A cropping figure: set aspect-ratio on .rpa-figure and the media fills it.
   (Chained so it outranks Elementor's `.elementor img{height:auto}`.) */
.rpa-figure.rpa-figure--cover > img,
.rpa-figure.rpa-figure--cover > picture > img,
.rpa-figure.rpa-figure--cover > video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.rpa-caption,
figcaption.rpa-caption {
  margin: 0;
  padding-block-start: 0.8rem;
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  line-height: 1.5;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  text-wrap: pretty;
}
/* When the caption is inside the clipped figure it needs its own ground. */
.rpa-figure > .rpa-caption { background: var(--rpa-c-surface); }

/* ---------- Prose: every element an editor can produce ---------- */

.rpa-prose {
  max-width: var(--rpa-measure);
  color: var(--rpa-c-text);
  font-size: var(--rpa-step-0);
  line-height: var(--rpa-leading-body);
  hanging-punctuation: first allow-end last;
  font-variant-numeric: oldstyle-nums proportional-nums;
}
.rpa-prose > *:first-child { margin-top: 0; }
.rpa-prose > *:last-child { margin-bottom: 0; }

.rpa-prose p { margin: 0 0 1.35em; text-wrap: pretty; hyphens: manual; }

.rpa-prose h2,
.rpa-prose h3,
.rpa-prose h4,
.rpa-prose h5,
.rpa-prose h6 { scroll-margin-top: calc(var(--rpa-header-h) + 1.5rem); }

.rpa-prose h2 {
  margin: 2.2em 0 0.7em;
  font-size: var(--rpa-step-3);
  line-height: 1.1;
}
.rpa-prose h3 {
  margin: 2em 0 0.6em;
  font-size: var(--rpa-step-2);
  line-height: 1.18;
}
.rpa-prose h4 {
  margin: 1.9em 0 0.5em;
  font-size: var(--rpa-step-1);
  font-style: italic;
  font-weight: 400;
  line-height: 1.3;
}
.rpa-prose h5,
.rpa-prose h6 {
  margin: 2.2em 0 0.6em;
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.rpa-prose :is(h2, h3, h4, h5, h6) + :is(h2, h3, h4, h5, h6) { margin-top: 0.4em; }

.rpa-prose strong { font-weight: 600; }
.rpa-prose em { font-style: italic; }
.rpa-prose mark {
  padding: 0.05em 0.2em;
  background: color-mix(in srgb, var(--rpa-verdigris) 26%, transparent);
  color: inherit;
}
.rpa-prose del { color: var(--rpa-c-muted); }
.rpa-prose ins { text-decoration-style: dotted; text-underline-offset: 0.2em; }

/* Lists */
.rpa-prose ul,
.rpa-prose ol {
  margin: 0 0 1.5em;
  padding-inline-start: 1.6em;
}
.rpa-prose li { margin: 0 0 0.5em; padding-inline-start: 0.25em; }
.rpa-prose li > :is(ul, ol) { margin: 0.5em 0 0; }
.rpa-prose ul { list-style: none; }
.rpa-prose ul > li { position: relative; }
.rpa-prose ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: -1.35em;
  top: calc(var(--rpa-leading-body) * 0.5em);
  width: 0.7em;
  height: 1.5px;
  background: var(--rpa-c-accent);
}
.rpa-prose ol { list-style: none; counter-reset: rpa-ol; padding-inline-start: 2.4em; }
.rpa-prose ol > li { position: relative; counter-increment: rpa-ol; }
.rpa-prose ol > li::before {
  content: counter(rpa-ol, decimal-leading-zero);
  position: absolute;
  inset-inline-start: -2.9em;
  top: 0.38em;
  width: 2.3em;
  color: var(--rpa-c-accent);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  text-align: end;
}
.rpa-prose ol[start], .rpa-prose ol[reversed] { list-style: decimal; }
.rpa-prose ol[start] > li::before, .rpa-prose ol[reversed] > li::before { content: none; }

.rpa-prose dl { margin: 0 0 1.5em; }
.rpa-prose dt { font-weight: 600; }
.rpa-prose dd { margin: 0 0 0.9em; color: var(--rpa-c-muted); }

/* Blockquote — a pull quote, serif, with a petrol rule */
.rpa-prose blockquote {
  margin: 2.4em 0;
  padding: 0 0 0 clamp(1.25rem, 3vw, 2.25rem);
  border-inline-start: 1.5px solid var(--rpa-c-accent);
  color: var(--rpa-c-heading);
  font-family: var(--rpa-serif);
  font-size: var(--rpa-step-2);
  font-weight: 350;
  font-style: italic;
  line-height: 1.32;
  letter-spacing: -0.012em;
  text-wrap: balance;
  hanging-punctuation: first;
}
.rpa-prose blockquote p { margin: 0 0 0.6em; }
.rpa-prose blockquote p:last-of-type { margin-bottom: 0; }
.rpa-prose blockquote :is(cite, footer) {
  display: block;
  margin-top: 1.1em;
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0.08em;
  line-height: 1.5;
  text-transform: uppercase;
}
.rpa-prose blockquote :is(cite, footer)::before { content: "\2014\00a0"; }

/* Figures, images, captions (classic + block editor output) */
.rpa-prose :is(figure, .wp-caption) {
  margin: 2.6em 0;
  max-width: 100%;
  width: auto !important;
}
.rpa-prose :is(figure, .wp-caption, p) img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--rpa-radius);
}
.rpa-prose p > img { margin: 2em 0; }
.rpa-prose :is(figcaption, .wp-caption-text, .wp-element-caption) {
  margin: 0;
  padding-block-start: 0.8rem;
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-align: start;
}
.rpa-prose .alignleft,
.rpa-prose .alignright,
.rpa-prose .aligncenter { float: none; margin-inline: auto; }
.rpa-prose iframe,
.rpa-prose video { width: 100%; margin: 2.4em 0; }
.rpa-prose iframe[src*="youtube"],
.rpa-prose iframe[src*="vimeo"] { aspect-ratio: 16 / 9; height: auto; }

/* Tables — ruled like an index, numerals tabular; scrolls inside itself on small screens */
.rpa-table-scroll {
  margin: 2.4em 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.rpa-table-scroll > table { margin: 0; min-width: 34rem; }
.rpa-prose table {
  width: 100%;
  max-width: 100%;
  margin: 2.4em 0;
  border-collapse: collapse;
  border-spacing: 0;
  border-block-start: 1px solid var(--rpa-c-rule-strong);
  font-size: calc(var(--rpa-step-0) * 0.92);
  line-height: 1.45;
  font-variant-numeric: tabular-nums lining-nums;
}
.rpa-prose figure > table,
.rpa-prose figure > .rpa-table-scroll { margin: 0; }
.rpa-prose :is(th, td) {
  padding: 0.85em 1.5em 0.85em 0;
  border: 0;
  border-block-end: 1px solid var(--rpa-c-rule);
  text-align: start;
  vertical-align: top;
}
.rpa-prose :is(th, td):last-child { padding-inline-end: 0; }
.rpa-prose th {
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
}
.rpa-prose thead th { border-block-end-color: var(--rpa-c-rule-strong); }
.rpa-prose caption {
  caption-side: bottom;
  padding-block-start: 0.8rem;
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  text-align: start;
}

/* Rule — a short survey tick rather than a full-width line */
.rpa-prose hr {
  width: 100%;
  margin: 3em 0;
  border: 0;
  border-top: 1px solid var(--rpa-c-rule-strong);
}

/* Code */
.rpa-prose :is(code, kbd, samp) {
  font-family: var(--rpa-mono);
  font-size: 0.88em;
  font-variant-ligatures: none;
}
.rpa-prose :not(pre) > code {
  padding: 0.12em 0.36em;
  border: 1px solid var(--rpa-c-rule);
  border-radius: var(--rpa-radius);
  background: color-mix(in srgb, var(--rpa-bone) 70%, transparent);
  overflow-wrap: anywhere;
}
.is-tone-ink .rpa-prose :not(pre) > code,
.is-tone-petrol .rpa-prose :not(pre) > code { background: transparent; }
.rpa-prose kbd {
  padding: 0.1em 0.4em;
  border: 1px solid var(--rpa-c-rule-strong);
  border-bottom-width: 2px;
  border-radius: var(--rpa-radius);
}
.rpa-prose pre {
  margin: 2.2em 0;
  padding: 1.25em 1.4em;
  overflow-x: auto;
  border: 1px solid var(--rpa-c-rule);
  border-radius: var(--rpa-radius);
  background: var(--rpa-bone);
  color: var(--rpa-ink);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  line-height: 1.65;
  tab-size: 2;
  white-space: pre;
}
.rpa-prose pre code { font-size: inherit; }

/* Block-editor tables (imported articles). Core's block-library CSS loads before the theme;
   these selectors are chained to outrank it. */
.rpa-prose .wp-block-table { margin: 2.6em 0; overflow-x: visible; }
.rpa-prose .wp-block-table > .rpa-table-scroll { margin: 0; }
.rpa-prose .wp-block-table table { margin: 0; }
.rpa-prose .wp-block-table :is(td, th) {
  padding: 0.85em 1.5em 0.85em 0;
  border: 0;
  border-block-end: 1px solid var(--rpa-c-rule);
  word-break: normal;
}
.rpa-prose .wp-block-table thead { border-block-end: 0; }
.rpa-prose .wp-block-table thead th { border-block-end-color: var(--rpa-c-rule-strong); }
.rpa-prose .wp-block-table tfoot { border-block-start: 0; }
.rpa-prose .wp-block-table tfoot td { border-block-start: 1px solid var(--rpa-c-rule-strong); font-weight: 600; }
.rpa-prose .wp-block-table.is-style-stripes { border-bottom: 0; }
.rpa-prose .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { background-color: transparent; }
.rpa-prose .wp-block-table.is-style-stripes tbody tr:nth-child(even) { background-color: color-mix(in srgb, var(--rpa-bone) 65%, transparent); }
.rpa-prose .wp-block-table.is-style-stripes :is(td, th) { border-block-end: 1px solid var(--rpa-c-rule); }

/* "Big number | label" stat tables: a headless table whose first cell is a lone <strong>.
   Set like the site's figures — mono, tabular, petrol — so they read as deliberate data. */
.rpa-prose table:not(:has(thead)):has(td:first-child > strong:only-child) { table-layout: auto; }
.rpa-prose table:not(:has(thead)) td:first-child:has(> strong:only-child) {
  width: 1%;
  padding-inline-end: clamp(1.5rem, 5vw, 3.5rem);
  white-space: nowrap;
  vertical-align: baseline;
}
.rpa-prose table:not(:has(thead)) td:first-child > strong:only-child {
  color: var(--rpa-c-accent);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.rpa-prose table:not(:has(thead)):has(td:first-child > strong:only-child) td { vertical-align: baseline; }
.rpa-table-scroll:has(td:first-child > strong:only-child) > table { min-width: 0; }

/* Tables typed without a real header (P2-05). "All bold" first row = its first and last cells are a
   lone <strong> and no cell holds anything else (:has() cannot be nested, so this is the test).
   - three rows or more: that row is a header — set it like <th>, whatever the markup says;
   - exactly two rows: figures across the top, labels beneath — every figure gets the stat style
     and the columns share the width evenly.
   A first row of <th> inside <tbody> gets the header rule too. */
.rpa-prose table:not(:has(thead)) > tbody > tr:first-child > th { border-block-end-color: var(--rpa-c-rule-strong); }
.rpa-prose table:not(:has(thead)) > tbody > tr:first-child:not(:nth-last-child(-n + 2)):has(> td:first-child > strong:only-child):has(> td:last-child:not(:first-child) > strong:only-child):not(:has(> td > :not(strong))) > td {
  width: auto;
  padding-inline-end: 1.5em;
  border-block-end-color: var(--rpa-c-rule-strong);
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: normal;
  vertical-align: bottom;
}
.rpa-prose table:not(:has(thead)) > tbody > tr:first-child:not(:nth-last-child(-n + 2)):has(> td:first-child > strong:only-child):has(> td:last-child:not(:first-child) > strong:only-child):not(:has(> td > :not(strong))) > td > strong {
  color: inherit;
  font: inherit;
  font-weight: 500;
  letter-spacing: inherit;
}
.rpa-prose table:not(:has(thead)):has(> tbody > tr:first-child:nth-last-child(2):has(> td:first-child > strong:only-child):has(> td:last-child:not(:first-child) > strong:only-child):not(:has(> td > :not(strong)))) { table-layout: fixed; }
.rpa-prose table:not(:has(thead)) > tbody > tr:first-child:nth-last-child(2):has(> td:first-child > strong:only-child):has(> td:last-child:not(:first-child) > strong:only-child):not(:has(> td > :not(strong))) > td {
  width: auto;
  padding-block-end: 0.15em;
  padding-inline-end: 1.5em;
  border-block-end: 0;
  white-space: normal;
  vertical-align: bottom;
}
.rpa-prose table:not(:has(thead)) > tbody > tr:first-child:nth-last-child(2):has(> td:first-child > strong:only-child):has(> td:last-child:not(:first-child) > strong:only-child):not(:has(> td > :not(strong))) > td > strong {
  color: var(--rpa-c-accent);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step-1);
  font-weight: 500;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums lining-nums;
}
.rpa-prose table:not(:has(thead)) > tbody > tr:first-child:nth-last-child(2):has(> td:first-child > strong:only-child):has(> td:last-child:not(:first-child) > strong:only-child):not(:has(> td > :not(strong))) + tr > td { padding-block-start: 0.15em; vertical-align: top; }

.rpa-prose :is(ul, ol).wp-block-list { padding-inline-start: 1.6em; }
.rpa-prose ol.wp-block-list { padding-inline-start: 2.4em; }
.rpa-prose .wp-block-image { margin: 2.6em 0; }
.rpa-prose .wp-block-image img { border: 1px solid var(--rpa-c-rule); }
.rpa-prose .wp-block-image :is(figcaption, .wp-element-caption) { text-align: start; }

/* Block-editor leftovers that may arrive with imported posts */
.rpa-prose .wp-block-separator { border-bottom: 0; }
.rpa-prose .wp-block-image img { width: 100%; }
.rpa-prose .wp-block-quote { border-inline-start: 1.5px solid var(--rpa-c-accent); }
.rpa-prose .wp-block-pullquote { padding: 0; margin: 2.4em 0; text-align: start; }
.rpa-prose .has-text-align-center { text-align: center; }
.rpa-prose .has-text-align-right { text-align: end; }

/* Article body: the column is the wide measure; running text keeps the reading measure at its
   left edge, and tables, figures, images, galleries, embeds and code break out to the full column. */
.rpa-prose--article { max-width: var(--rpa-measure-wide); }
.rpa-prose--article > * { max-width: var(--rpa-measure); }
.rpa-prose--article > :is(figure, table, pre, hr, .rpa-table-scroll, .wp-block-table, .wp-block-image, .wp-block-gallery, .wp-block-embed, .wp-block-columns, .wp-block-media-text, .wp-block-cover, .alignwide, .alignfull) { max-width: none; }

/* Wider measure when prose is a column partner rather than an article body */
.rpa-prose--wide { max-width: var(--rpa-measure-wide); }
.rpa-prose--fill { max-width: none; }

/* First paragraph of an article: small-caps-ish lead-in via a slightly larger size */
.rpa-prose--article > p:first-of-type {
  font-size: var(--rpa-step-1);
  line-height: 1.55;
  letter-spacing: -0.006em;
}
/* header.css */
/* RPA header + full-screen menu.
   At the top of the page the header is paper on paper — visually transparent.
   Once scrolled it becomes bone with a hairline. Three ways to get there:
   1. motion lane toggles .is-scrolled on [data-rpa-header];
   2. no JS, modern browser: a scroll-driven animation does the same;
   3. neither: it simply stays an opaque paper bar. Always legible. */

/* ---------- Brand ---------- */

.rpa-header__brand { display: flex; align-items: center; min-width: 0; }

.rpa-header__brand .custom-logo-link { display: block; line-height: 0; }
.rpa-header__brand .custom-logo {
  display: block;
  width: auto;
  /* The logo file is cropped tight to its artwork (no built-in padding), so this is the cap height of "RPA". */
  height: clamp(1.625rem, 1.45rem + 0.6vw, 2rem);
  max-width: 14rem;
  object-fit: contain;
}

.rpa-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--rpa-petrol-deep);
  text-decoration: none;
  line-height: 1;
}
.rpa-brand__mark {
  font-family: var(--rpa-sans);
  font-size: var(--rpa-step-2);
  font-weight: 700;
  letter-spacing: -0.045em;
  line-height: 1;
}
.rpa-brand__rule {
  align-self: stretch;
  width: 1px;
  margin-block: 0.1rem;
  background: currentColor;
  opacity: 0.55;
}
.rpa-brand__name {
  display: grid;
  gap: 0.22em;
  font-family: var(--rpa-sans);
  font-size: calc(var(--rpa-step--1) * 0.72);
  font-weight: 600;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
}

/* ---------- Bar ---------- */

.rpa-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--rpa-paper);
  box-shadow: 0 1px 0 0 transparent;
  transition:
    background-color var(--rpa-dur-2) var(--rpa-ease),
    box-shadow var(--rpa-dur-2) var(--rpa-ease);
}
.admin-bar .rpa-header { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { .admin-bar .rpa-header { top: 0; } }

.rpa-header.is-scrolled {
  background-color: var(--rpa-bone);
  box-shadow: 0 1px 0 0 var(--rpa-rule);
}

@supports (animation-timeline: scroll()) {
  @keyframes rpa-header-scrolled {
    to {
      background-color: var(--rpa-bone);
      box-shadow: 0 1px 0 0 var(--rpa-rule);
    }
  }
  .rpa-header {
    animation: rpa-header-scrolled linear both;
    animation-timeline: scroll(root block);
    animation-range: 8px 96px;
  }
}

.rpa-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 3vw, 3rem);
  min-height: var(--rpa-header-h);
}

.rpa-header__nav { display: none; margin-inline-start: auto; }

.rpa-header__actions {
  display: flex;
  align-items: center;
  gap: clamp(0.75rem, 2vw, 1.5rem);
}

/* ---------- Primary nav (desktop) ---------- */

.rpa-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.25rem, 2.4vw, 2.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rpa-nav a {
  position: relative;
  display: block;
  padding-block: 0.5rem;
  color: var(--rpa-ink);
  font-size: calc(var(--rpa-step-0) * 0.89);
  font-weight: 450;
  line-height: 1.2;
  letter-spacing: -0.003em;
  text-decoration: none;
  white-space: nowrap;
}
.rpa-nav a::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: 0.15rem;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--rpa-dur-2) var(--rpa-ease);
}
.rpa-nav a:hover::after,
.rpa-nav a:focus-visible::after,
.rpa-nav .current-menu-item > a::after,
.rpa-nav .current-menu-ancestor > a::after,
.rpa-nav .current_page_parent > a::after,
.rpa-nav a[aria-current="page"]::after { transform: scaleX(1); }

/* ---------- Menu toggle ---------- */

.rpa-header__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 2.75rem;
  padding: 0.5rem 0 0.5rem 0.5rem;
  color: var(--rpa-ink);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.14em;
  line-height: 1;
  text-decoration: none;
  text-transform: uppercase;
  cursor: pointer;
}
.rpa-header__toggle-bars {
  position: relative;
  display: block;
  width: 1.75rem;
  height: 0.5rem;
}
.rpa-header__toggle-bars::before,
.rpa-header__toggle-bars::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--rpa-dur-1) var(--rpa-ease);
}
.rpa-header__toggle-bars::before { top: 0; }
.rpa-header__toggle-bars::after { bottom: 0; }
.rpa-header__toggle:hover .rpa-header__toggle-bars::before { transform: translateX(-3px); }
.rpa-header__toggle:hover .rpa-header__toggle-bars::after { transform: translateX(3px); }
.rpa-header__toggle-bars.is-cross::before { top: 50%; transform: translateY(-50%) rotate(30deg); }
.rpa-header__toggle-bars.is-cross::after { top: 50%; bottom: auto; transform: translateY(-50%) rotate(-30deg); }
.rpa-header__toggle:hover .rpa-header__toggle-bars.is-cross::before { transform: translateY(-50%) rotate(45deg); }
.rpa-header__toggle:hover .rpa-header__toggle-bars.is-cross::after { transform: translateY(-50%) rotate(-45deg); }

/* Small screens: the CTA lives inside the menu, not the bar. */
.rpa-header__cta { display: none; }

@media (min-width: 640px) {
  .rpa-header__cta { display: inline-flex; }
}

@media (min-width: 1000px) {
  .rpa-header__nav { display: block; }
  .rpa-header__actions > .rpa-header__toggle { display: none; }
  /* No button (emptied by an editor, or on the page it points to): the nav closes up to the edge. */
  .rpa-header__actions:not(:has(.rpa-header__cta)) { display: none; }
  .rpa-header__inner { gap: clamp(2rem, 4vw, 4rem); }
}

/* ---------- Full-screen menu ---------- */

.rpa-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--rpa-paper);
  color: var(--rpa-ink);
  visibility: hidden;
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  transition:
    clip-path var(--rpa-dur-2) var(--rpa-ease),
    opacity var(--rpa-dur-1) linear,
    visibility 0s linear var(--rpa-dur-2);
}
.admin-bar .rpa-menu { top: var(--wp-admin--admin-bar--height, 0px); }

.rpa-menu:target,
.rpa-menu.is-open {
  visibility: visible;
  opacity: 1;
  /* The wipe ends below the screen: the curve's long, slow tail happens out of sight, so the sheet's
     lower edge does not hang a few pixels above the bottom with the page showing under it (P3-14). */
  clip-path: inset(0 0 -35% 0);
  transition-delay: 0s;
}

html.rpa-menu-open,
html:has(.rpa-menu:target) { overflow: hidden; }

.rpa-menu__bar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: space-between;
  min-height: var(--rpa-header-h);
}

.rpa-menu__body {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  justify-content: space-between;
  gap: 2.5rem;
  padding-block: clamp(1.5rem, 5vh, 4rem) clamp(1.5rem, 4vh, 3rem);
}

.rpa-menu__list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: rpa-menu;
  border-block-start: 1px solid var(--rpa-rule-strong);
}
.rpa-menu__list > li {
  counter-increment: rpa-menu;
  border-block-end: 1px solid var(--rpa-rule);
}
.rpa-menu__list a {
  display: flex;
  align-items: baseline;
  gap: clamp(1rem, 4vw, 2.5rem);
  padding-block: clamp(0.7rem, 2.2vh, 1.4rem);
  color: var(--rpa-ink);
  font-family: var(--rpa-serif);
  font-size: var(--rpa-step-4);
  font-weight: 350;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-decoration: none;
  transition: padding-inline-start var(--rpa-dur-2) var(--rpa-ease), color var(--rpa-dur-1) var(--rpa-ease);
}
.rpa-menu__list a::before {
  content: counter(rpa-menu, decimal-leading-zero);
  flex: none;
  min-width: 2.2em;
  color: var(--rpa-petrol);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-weight: 500;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  transform: translateY(-0.55em);
}
.rpa-menu__list a::after {
  content: "\2192";
  margin-inline-start: auto;
  font-family: var(--rpa-sans);
  font-size: var(--rpa-step-2);
  font-weight: 300;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity var(--rpa-dur-1) var(--rpa-ease), transform var(--rpa-dur-2) var(--rpa-ease);
}
.rpa-menu__list a:hover,
.rpa-menu__list a:focus-visible { padding-inline-start: 0.5rem; color: var(--rpa-petrol-deep); }
.rpa-menu__list a:hover::after,
.rpa-menu__list a:focus-visible::after { opacity: 1; transform: none; }
.rpa-menu__list .current-menu-item > a,
.rpa-menu__list .current-menu-ancestor > a { font-style: italic; font-weight: 300; }
.rpa-menu__list .current-menu-item > a::after,
.rpa-menu__list .current-menu-ancestor > a::after { content: "\25CF"; font-size: 0.5rem; opacity: 1; transform: translateY(-0.6em); color: var(--rpa-verdigris); }

.rpa-menu__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem 2rem;
}
.rpa-menu__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.02em;
}

/* Rows rise in, in order — only once open, and only if motion is welcome. */
@media (prefers-reduced-motion: no-preference) {
  /* Closing: rows fade with the sheet (200ms) and only then drop back to their start position. */
  .rpa-menu__list > li,
  .rpa-menu__foot {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 200ms linear, transform 0s linear var(--rpa-dur-2);
  }
  .rpa-menu:is(:target, .is-open) .rpa-menu__list > li,
  .rpa-menu:is(:target, .is-open) .rpa-menu__foot {
    opacity: 1;
    transform: none;
    transition: opacity var(--rpa-dur-2) var(--rpa-ease), transform var(--rpa-dur-2) var(--rpa-ease);
    transition-delay: calc(120ms + var(--i, 0) * 60ms);
  }
  .rpa-menu__list > li:nth-child(2) { --i: 1; }
  .rpa-menu__list > li:nth-child(3) { --i: 2; }
  .rpa-menu__list > li:nth-child(4) { --i: 3; }
  .rpa-menu__list > li:nth-child(5) { --i: 4; }
  .rpa-menu__list > li:nth-child(6) { --i: 5; }
  .rpa-menu__list > li:nth-child(n + 7) { --i: 6; }
  .rpa-menu__foot { --i: 6; }
}
/* footer.css */
/* RPA footer — a generous editorial sign-off on ink.
   Colours come from the .is-tone-ink aliases (base.css); links stay underlined. */

.rpa-footer {
  flex: none;
  padding-block: var(--rpa-section) clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  background: var(--rpa-ink);
  color: var(--rpa-on-dark);
}

/* Lead: the sign-off line + intro and button */
.rpa-footer__lead {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem) clamp(2rem, 6vw, 7rem);
  padding-block-end: clamp(3rem, 2rem + 5vw, 6.5rem);
}
.rpa-footer__signoff {
  max-width: 13ch;
  margin: 0;
  font-size: var(--rpa-step-5);
  line-height: 1;
  letter-spacing: -0.028em;
}
/* A long sign-off (most of them) steps down one size and takes a wider measure, so it sets in two
   balanced lines instead of four and the footer stops being the tallest section on the page. */
@media (min-width: 600px) {
  .rpa-footer__signoff--long {
    max-width: 22ch;
    font-size: var(--rpa-step-4);
    line-height: 1.04;
    letter-spacing: -0.022em;
    text-wrap: balance;
  }
}
/* The page already ended on an ask: the sign-off stands alone (footer.php drops the aside). */
.rpa-footer__lead--quiet { padding-block-end: clamp(2.5rem, 2rem + 3vw, 4.5rem); }
.rpa-footer__lead--quiet .rpa-footer__signoff--long { max-width: 26ch; }
.rpa-footer__intro {
  max-width: 40ch;
  margin: 0 0 2rem;
  color: var(--rpa-on-dark-muted);
  font-size: var(--rpa-step-1);
  line-height: 1.5;
  letter-spacing: -0.006em;
}

@media (min-width: 900px) {
  .rpa-footer__lead {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
    align-items: end;
  }
  .rpa-footer__lead--quiet { grid-template-columns: minmax(0, 1fr); }
}

/* Detail columns */
.rpa-footer__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(2.25rem, 4vw, 3rem) var(--rpa-gap);
  padding-block: clamp(2rem, 1.5rem + 2vw, 3rem);
  border-block-start: 1px solid var(--rpa-on-dark-muted);
}
.rpa-footer__col { min-width: 0; }
.rpa-footer__col--wide { grid-column: 1 / -1; }

.rpa-footer__label {
  margin: 0 0 1.1rem;
  color: var(--rpa-on-dark-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-weight: 400;
  letter-spacing: 0.14em;
  line-height: 1.4;
  white-space: nowrap; /* a one-word label never breaks mid-word, however narrow its column */
}

.rpa-footer__list {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(var(--rpa-step-0) * 0.94);
  line-height: 1.5;
}
/* Addresses, numbers and hours are units: they move to the next line whole, never break inside.
   (Only below 340px, where the email cannot fit the full row, may it break as a last resort.) */
.rpa-footer__list a,
.rpa-footer__list.rpa-tabular > li { white-space: nowrap; }
@media (max-width: 339px) {
  .rpa-footer__list a { white-space: normal; overflow-wrap: anywhere; }
}
/* Phones: Contact takes the full row (the email needs it); the next row is Hours at its natural
   width beside the menu, so "Open Monday – Friday" stays on one line. */
@media (max-width: 699px) {
  .rpa-footer__grid { grid-template-columns: auto minmax(0, 1fr); }
  .rpa-footer__col:first-child { grid-column: 1 / -1; }
}
.rpa-footer__text {
  max-width: 44ch;
  margin: 0;
  color: var(--rpa-on-dark-muted);
  font-size: calc(var(--rpa-step-0) * 0.94);
  line-height: 1.6;
}

/* Footer menu links are navigation, so they wear the nav treatment — but keep a resting rule. */
.rpa-footer__menu a {
  color: var(--rpa-on-dark);
  text-decoration: underline;
  text-decoration-color: var(--rpa-on-dark-rule);
  text-decoration-thickness: 1.5px;
  text-underline-offset: 0.25em;
  transition: text-decoration-color var(--rpa-dur-1) var(--rpa-ease), text-decoration-thickness var(--rpa-dur-1) var(--rpa-ease), color var(--rpa-dur-1) var(--rpa-ease);
}
.rpa-footer__menu .current-menu-item > a { text-decoration-color: currentColor; }
.rpa-footer__menu a:hover,
.rpa-footer__menu a:focus-visible { color: var(--rpa-link-on-dark); text-decoration-color: currentColor; text-decoration-thickness: 2.5px; }


.rpa-footer__ext {
  display: inline-block;
  margin-inline-start: 0.3em;
  font-family: var(--rpa-mono);
  font-size: 0.75em;
}

@media (min-width: 700px) {
  .rpa-footer__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .rpa-footer__col { grid-column: span 2; }
  .rpa-footer__col--wide { grid-column: span 4; }
}
@media (min-width: 1100px) {
  /* Flex, so the row stays balanced whichever columns an editor has emptied. */
  .rpa-footer__grid { display: flex; justify-content: space-between; gap: clamp(2rem, 4vw, 4.5rem); }
  /* Only the text column gives way when space is tight; squeezing the others wrapped "NAVIGAT/E". */
  .rpa-footer__col { flex: 0 0 auto; }
  .rpa-footer__col--wide { flex: 0 1 25rem; }
  .rpa-footer__col:not(.rpa-footer__col--wide) .rpa-footer__list { white-space: nowrap; }
}

/* Base bar */
.rpa-footer__base {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem 2rem;
  padding-block-start: clamp(1.25rem, 1rem + 1vw, 1.75rem);
  border-block-start: 1px solid var(--rpa-on-dark-rule);
  color: var(--rpa-on-dark-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  letter-spacing: 0.02em;
  line-height: 1.5;
  font-variant-numeric: tabular-nums;
}
.rpa-footer__base p { margin: 0; text-wrap: balance; }
@media (max-width: 699px) {
  /* Each line of the base bar gets the full row: no orphaned "rights reserved." */
  .rpa-footer__base > * { flex: 1 0 100%; }
}
.rpa-footer__dot {
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-inline-end: 0.7em;
  border-radius: 50%;
  background: var(--rpa-verdigris);
  vertical-align: 0.12em;
}
.rpa-footer__base-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 1.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* On the Contact page only Navigate and Follow remain (P2-12) — in the slots they have on every other
   page, so the footer's geometry does not jump when you arrive on Contact (P3-04).
   ≥1100px: footer.php still prints the three dropped columns as inert, invisible placeholders; the flex
   row is therefore the same row, to the pixel. 700–1099px: the two columns take grid columns 3–4 and 5–6,
   where they sit beside Hours elsewhere. Phones: placeholders gone, the two columns share one row. */
.rpa-footer__col--ghost { display: none; }
@media (max-width: 699px) {
  .rpa-footer__grid.rpa-footer__grid--brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rpa-footer__grid--brief .rpa-footer__col:not(.rpa-footer__col--ghost) { grid-column: auto; }
}
@media (min-width: 700px) and (max-width: 1099.98px) {
  .rpa-footer__grid--brief .rpa-footer__col--ghost + .rpa-footer__col:not(.rpa-footer__col--ghost) { grid-column: 3 / span 2; }
}
@media (min-width: 1100px) {
  /* The placeholders are only there for their width: no height, so the row is as tall as the menu. */
  .rpa-footer__col--ghost { display: block; visibility: hidden; height: 0; overflow: hidden; pointer-events: none; user-select: none; }
}
/* elementor-bridge.css */
/* RPA ↔ Elementor bridge — makes Elementor's own defaults resolve to RPA tokens, so a
   native Heading / Text / Button widget dropped on a page by an editor is on-brand
   without anyone touching Site Settings.

   Specificity notes (see docs/CONTRACT.md → gotchas):
   - Elementor's stylesheets load AFTER the theme's, so ties go to Elementor.
   - `.elementor a{text-decoration:none}` is beaten in links.css at (0,2,1).
   - Per-element settings an editor makes in the panel print as
     `.elementor-N .elementor-element.elementor-element-xxxx …` (≥0,3,0) and still win
     over everything here. That is deliberate: this file sets defaults, not locks. */

/* ---------- Kit variables ----------
   The Elementor kit (Site Settings → Global Colours / Fonts) is configured with RPA's
   palette and faces by tools/wp/configure-site.php, and editors may adjust it there, so
   we do NOT override the kit's variables. These :root values are only a safety net for a
   fresh or reset kit: the kit class sits on <body>, so whatever it defines wins. */

:root {
  --e-global-color-primary: var(--rpa-petrol);
  --e-global-color-secondary: var(--rpa-ink);
  --e-global-color-text: var(--rpa-ink);
  --e-global-color-accent: var(--rpa-indigo);
  --e-global-typography-primary-font-family: var(--rpa-serif);
  --e-global-typography-secondary-font-family: var(--rpa-serif);
  --e-global-typography-text-font-family: var(--rpa-sans);
  --e-global-typography-accent-font-family: var(--rpa-mono);
}

body[class*="elementor-kit-"] {
  color: var(--rpa-ink);
  font-family: var(--rpa-sans);
  font-size: var(--rpa-step-0);
  line-height: var(--rpa-leading-body);
}

/* ---------- Containers: gutters and width match .rpa-shell ---------- */

body[class*="elementor-kit-"] .e-con {
  --container-max-width: calc(var(--rpa-shell) - 2 * var(--rpa-gutter));
  --container-default-padding-top: 0px;
  --container-default-padding-bottom: 0px;
  --container-default-padding-left: 0px;
  --container-default-padding-right: 0px;
  --widgets-spacing: var(--rpa-gap);
  --widgets-spacing-row: var(--rpa-gap);
  --widgets-spacing-column: var(--rpa-gap);
}
/* Top-level boxed containers get the page gutter; nested ones stay flush. */
body[class*="elementor-kit-"] .elementor > .e-con.e-con-boxed,
body[class*="elementor-kit-"] .elementor > .e-con.e-parent.e-con-boxed {
  --container-default-padding-left: var(--rpa-gutter);
  --container-default-padding-right: var(--rpa-gutter);
}

/* Canvas pages run edge to edge under the header. */
.rpa-main--canvas { display: block; }
.rpa-main--canvas > .elementor { width: 100%; }

/* ---------- Native Heading widget ---------- */

.elementor-widget-heading .elementor-heading-title {
  color: var(--rpa-c-heading);
  font-family: var(--rpa-serif);
  font-weight: 350;
  font-optical-sizing: auto;
  line-height: 1.1;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.elementor-widget-heading h1.elementor-heading-title { font-size: var(--rpa-step-4); line-height: var(--rpa-leading-tight); letter-spacing: -0.022em; }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--rpa-step-3); }
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--rpa-step-2); }
.elementor-widget-heading h4.elementor-heading-title { font-size: var(--rpa-step-1); line-height: 1.25; }
.elementor-widget-heading :is(h5, h6, p, div, span).elementor-heading-title { font-size: var(--rpa-step-1); line-height: 1.3; }
.elementor-widget-heading .elementor-heading-title em { font-style: italic; font-weight: 300; }
.elementor-widget-heading .elementor-heading-title a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.14em; }

/* ---------- Native Text Editor widget = prose ---------- */

.elementor-widget-text-editor {
  color: var(--rpa-c-text);
  font-family: var(--rpa-sans);
  font-size: var(--rpa-step-0);
  font-weight: 400;
  line-height: var(--rpa-leading-body);
}
/* Reading measure. Chained to outrank `.e-con.e-con>.e-con-inner>.elementor-widget{max-width:100%}`. */
body .e-con.e-con > .e-con-inner > .elementor-widget-text-editor,
body .e-con.e-con > .elementor-widget-text-editor { max-width: var(--rpa-measure); }
.elementor-widget-text-editor p { margin: 0 0 1.35em; text-wrap: pretty; }
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }
.elementor-widget-text-editor :is(h2, h3, h4) { margin: 1.8em 0 0.6em; }
.elementor-widget-text-editor :is(h2, h3, h4):first-child { margin-top: 0; }
.elementor-widget-text-editor :is(ul, ol) { margin: 0 0 1.5em; padding-inline-start: 1.4em; }
.elementor-widget-text-editor li { margin-bottom: 0.45em; }
.elementor-widget-text-editor li::marker { color: var(--rpa-c-accent); font-family: var(--rpa-mono); font-size: 0.85em; }
.elementor-widget-text-editor blockquote {
  margin: 2em 0;
  padding-inline-start: clamp(1.25rem, 3vw, 2.25rem);
  border-inline-start: 1.5px solid var(--rpa-c-accent);
  font-family: var(--rpa-serif);
  font-size: var(--rpa-step-2);
  font-style: italic;
  font-weight: 350;
  line-height: 1.32;
  letter-spacing: -0.012em;
}
/* Link styling for this widget lives in links.css (same rule as .rpa-prose). */

/* ---------- Native Button widget = .rpa-btn--solid ---------- */

.elementor-widget-button .elementor-button,
.elementor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.1em;
  padding: 0.8em 1.5em;
  border: 1px solid var(--rpa-ink);
  border-radius: var(--rpa-radius);
  background-color: var(--rpa-ink);
  background-image: linear-gradient(var(--rpa-petrol), var(--rpa-petrol));
  background-repeat: no-repeat;
  background-size: 0% 100%;
  color: var(--rpa-paper);
  fill: var(--rpa-paper);
  font-family: var(--rpa-sans);
  font-size: calc(var(--rpa-step-0) * 0.94);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.003em;
  text-decoration: none;
  box-shadow: none;
  transition: background-size var(--rpa-dur-2) var(--rpa-ease), border-color var(--rpa-dur-1) var(--rpa-ease), color var(--rpa-dur-1) var(--rpa-ease);
}
.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible,
.elementor-button:hover,
.elementor-button:focus-visible {
  background-size: 100% 100%;
  border-color: var(--rpa-petrol);
  color: var(--rpa-paper);
}
.elementor-button .elementor-button-content-wrapper { gap: 0.75em; align-items: center; }
:is(.is-tone-ink, .is-tone-petrol) .elementor-button {
  border-color: var(--rpa-paper);
  background-color: var(--rpa-paper);
  background-image: linear-gradient(var(--rpa-bone), var(--rpa-bone));
  color: var(--rpa-ink);
  fill: var(--rpa-ink);
}
:is(.is-tone-ink, .is-tone-petrol) .elementor-button:hover { border-color: var(--rpa-bone); color: var(--rpa-ink); }

/* ---------- Other native widgets, lightly ---------- */

.elementor-widget-image img,
.elementor-widget-image-box img { border-radius: var(--rpa-radius); }
.elementor-widget-image .widget-image-caption,
.elementor-image-gallery .gallery-caption {
  padding-block-start: 0.8rem;
  color: var(--rpa-c-muted);
  font-family: var(--rpa-mono);
  font-size: var(--rpa-step--1);
  font-style: normal;
  line-height: 1.5;
  text-align: start;
}
.elementor-widget-divider { --divider-color: var(--rpa-c-rule-strong); --divider-border-width: 1px; }
.elementor-widget-icon-list .elementor-icon-list-text { color: var(--rpa-c-text); }
.elementor-widget-icon-list .elementor-icon-list-icon :is(i, svg) { color: var(--rpa-c-accent); fill: var(--rpa-c-accent); }

/* Focus ring parity inside Elementor markup */
.elementor :is(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--rpa-c-focus);
  outline-offset: 3px;
}

/* ---------- Editor canvas: make the preview look like the front end ---------- */

.elementor-editor-active body,
body.elementor-editor-active { background: var(--rpa-paper); }
.elementor-editor-active .rpa-header { position: relative; } /* keep the sticky bar out of the way of handles */
/* motion.css */
/* RPA motion layer — "drawn, not thrown".
   One easing (--rpa-ease), 600–1200ms, only transform / opacity / clip-path animate
   (plus stroke-dashoffset on the map's SVG arcs).

   State machine on <html>, all set by assets/js/main.js:
     (no class)            JS has not run yet. See "Pre-JS hold" below.
     .rpa-motion           JS is running and the visitor has not asked for reduced motion.
                           Every hidden initial state in this file lives under it.
     .rpa-motion-off       JS is running but motion is off (reduced motion, Elementor editor).
                           Nothing is hidden, nothing is pinned, nothing moves.
     .rpa-motion-failsafe  Something went wrong (bundle failed, a reveal never fired): every
                           initial state is forced to its final state.
   With JavaScript disabled none of these rules match and the page is simply visible. */

/* ------------------------------------------------------------------ */
/* Pre-JS hold                                                         */
/* A module script runs after the parser, so the first paint can land  */
/* before main.js adds .rpa-motion: content would show, vanish, then   */
/* animate in. Where the browser can tell us scripting is on, hold     */
/* reveal targets at opacity 0 from the very first paint. If main.js   */
/* never arrives (blocked, 404, syntax error) a CSS-only animation     */
/* brings everything back after 3s — no JS needed for the rescue.      */
/* ------------------------------------------------------------------ */

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  html:not(.rpa-motion):not(.rpa-motion-off):not(.rpa-motion-failsafe) body:not(.elementor-editor-active) [data-rpa-reveal]:not([data-rpa-reveal="words"]):not(:is(.rpa-hero, .rpa-article__head, .rpa-article__plate, .rpa-index-head, .rpa-page__head, .rpa-section-head:has(h1)) *) {
    animation: rpa-prejs-rescue 600ms var(--rpa-ease) 3s both;
  }
}
@keyframes rpa-prejs-rescue { from { opacity: 0; } to { opacity: 1; } }

/* ------------------------------------------------------------------ */
/* First screen (P2-02)                                                */
/* The page head — hero, article head + plate, index head, plain page  */
/* head, a section-head that carries the h1 — never waits for a script.*/
/* Its entrance is a CSS animation that starts with the first paint,   */
/* with JS on or off, fast network or slow. reveal.js skips these      */
/* elements (same selector list there: FIRST), so the h1 is painted    */
/* once, never split and never re-inserted: LCP lands with FCP.        */
/* Animations outrank the hidden states below, so no exclusions needed.*/
/* Keyframes start at opacity .01, not 0: Chromium ignores fully       */
/* transparent text as an LCP candidate.                               */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  :is(.rpa-hero, .rpa-article__head, .rpa-article__plate, .rpa-index-head, .rpa-page__head, .rpa-section-head:has(h1)) [data-rpa-reveal="rule"] {
    animation: rpa-first-fade var(--rpa-dur-2) var(--rpa-ease) both;
  }
  :is(.rpa-hero, .rpa-article__head, .rpa-article__plate, .rpa-index-head, .rpa-page__head, .rpa-section-head:has(h1)) [data-rpa-reveal="lines"] {
    animation: rpa-first-lines 1100ms var(--rpa-ease) 40ms both;
  }
  :is(.rpa-hero, .rpa-article__head, .rpa-article__plate, .rpa-index-head, .rpa-page__head, .rpa-section-head:has(h1)) [data-rpa-reveal="fade"] {
    animation: rpa-first-rise 1000ms var(--rpa-ease) 160ms both;
  }
  :is(.rpa-hero, .rpa-article__head, .rpa-article__plate, .rpa-index-head, .rpa-page__head, .rpa-section-head:has(h1)) [data-rpa-reveal="fade"] ~ [data-rpa-reveal="fade"] {
    animation-delay: 240ms;
  }
  :is(.rpa-hero, .rpa-article__head, .rpa-article__plate, .rpa-index-head, .rpa-page__head, .rpa-section-head:has(h1)) [data-rpa-reveal="clip"] {
    animation: rpa-first-clip var(--rpa-dur-3) var(--rpa-ease) 120ms both;
  }
  :is(.rpa-hero, .rpa-article__head, .rpa-article__plate, .rpa-index-head, .rpa-page__head, .rpa-section-head:has(h1)) [data-rpa-reveal="clip"] > :is(img, picture, video) {
    animation: rpa-first-settle 1800ms var(--rpa-ease) 120ms both;
  }
}
@keyframes rpa-first-fade { from { opacity: 0.01; } to { opacity: 1; } }
@keyframes rpa-first-rise { from { opacity: 0.01; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
/* The heading rises as one block out of a mask whose lower edge stays where the heading will end:
   the clip's bottom inset always equals the translation, so text emerges from a fixed line. */
@keyframes rpa-first-lines {
  from { opacity: 0.01; transform: translate3d(0, 38%, 0); clip-path: inset(-0.1em -0.15em 38% -0.15em); }
  35% { opacity: 1; }
  to { opacity: 1; transform: none; clip-path: inset(-0.1em -0.15em -0.25em -0.15em); }
}
@keyframes rpa-first-clip { from { opacity: 1; clip-path: inset(0 100% 0 0); } to { opacity: 1; clip-path: inset(0 0 0 0); } }
@keyframes rpa-first-settle { from { transform: scale(1.08); } to { transform: none; } }

/* ------------------------------------------------------------------ */
/* Reveals                                                             */
/* --rpa-d is the per-element delay the JS assigns when it fires.      */
/* ------------------------------------------------------------------ */

html.rpa-motion [data-rpa-reveal="fade"] {
  opacity: 0;
  transform: translate3d(0, 16px, 0);
}
html.rpa-motion [data-rpa-reveal="fade"].is-revealed {
  opacity: 1;
  transform: none;
  transition:
    opacity var(--rpa-dur-3) var(--rpa-ease) var(--rpa-d, 0ms),
    transform var(--rpa-dur-3) var(--rpa-ease) var(--rpa-d, 0ms);
}

/* rule — the element fades up quickly while its hairline draws left → right.
   The real bottom border is swapped for an injected .rpa-rule-line so only a transform animates. */
html.rpa-motion [data-rpa-reveal="rule"] { opacity: 0; }
html.rpa-motion [data-rpa-reveal="rule"].has-rule-line { border-block-end-color: transparent; }
html.rpa-motion [data-rpa-reveal="rule"].is-revealed {
  opacity: 1;
  transition: opacity var(--rpa-dur-2) var(--rpa-ease) var(--rpa-d, 0ms);
}
.rpa-rule-line {
  position: absolute;
  inset-inline: 0;
  inset-block-end: calc(var(--rpa-rule-w, 1px) * -1);
  height: var(--rpa-rule-w, 1px);
  background: var(--rpa-rule-c, currentColor);
  transform: scaleX(0);
  transform-origin: 0 50%;
  pointer-events: none;
}
[dir="rtl"] .rpa-rule-line { transform-origin: 100% 50%; }
.is-revealed > .rpa-rule-line {
  transform: none;
  transition: transform var(--rpa-dur-3) var(--rpa-ease) var(--rpa-d, 0ms);
}

/* clip — wipe left → right, image settles from 1.08 to 1. */
html.rpa-motion [data-rpa-reveal="clip"] { clip-path: inset(0 100% 0 0); }
html.rpa-motion [data-rpa-reveal="clip"] > :is(img, picture, video) {
  transform: scale(1.08);
  transform-origin: 50% 50%;
}
html.rpa-motion [data-rpa-reveal="clip"].is-revealed {
  clip-path: inset(0 0 0 0);
  transition: clip-path var(--rpa-dur-3) var(--rpa-ease) var(--rpa-d, 0ms);
}
html.rpa-motion [data-rpa-reveal="clip"].is-revealed > :is(img, picture, video) {
  transform: none;
  transition: transform 1800ms var(--rpa-ease) var(--rpa-d, 0ms);
}

/* lines — hidden until split, then each line rises out of its own mask. */
html.rpa-motion [data-rpa-reveal="lines"]:not(.is-split):not(.is-revealed) { opacity: 0; }
.rpa-line {
  display: block;
  white-space: nowrap;
  /* A mask that leaves room for descenders and the italic's overhang. */
  clip-path: inset(-0.08em -0.12em -0.16em -0.12em);
}
.rpa-line__in {
  display: block;
  transform: translate3d(0, 128%, 0);
  will-change: transform;
}
.is-revealed > .rpa-line > .rpa-line__in {
  transform: none;
  transition: transform var(--rpa-dur-3) var(--rpa-ease) calc(var(--rpa-d, 0ms) + var(--rpa-i, 0) * 95ms);
}

.is-done > .rpa-line > .rpa-line__in { will-change: auto; }

/* words — muted until read. JS writes --rpa-o per word; never goes backwards. */
html.rpa-motion [data-rpa-reveal="words"] .rpa-word {
  opacity: var(--rpa-o, 0.58);
  transition: opacity var(--rpa-dur-1) linear;
}

/* Once an element has finished, drop every motion rule's grip on it. */
html.rpa-motion [data-rpa-reveal].is-done { transition: none; }

/* Counters keep their final width while they run, so nothing around them shifts; the digits start
   at the element's own left edge (counters.js holds the parent's width when an affix follows). */
[data-rpa-count].is-counting {
  display: inline-block;
  text-align: start;
  font-variant-numeric: tabular-nums;
}

/* Parallax + magnetic use the individual `translate` property so they never fight a transform. */
html.rpa-motion [data-rpa-parallax] { will-change: translate; }

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */

html.rpa-motion .rpa-hero__field { opacity: 0; }
html.rpa-motion .rpa-hero__field.is-live {
  opacity: 1;
  transition: opacity 2400ms var(--rpa-ease);
}
/* Scroll cue: the line is drawn downward, then lifts away — a slow, looping plumb line. */
html.rpa-motion .rpa-hero__cue-line { animation: rpa-cue 3.6s var(--rpa-ease) 2.4s infinite; }
@keyframes rpa-cue {
  0% { transform: scaleY(0); transform-origin: 50% 0; }
  45% { transform: scaleY(1); transform-origin: 50% 0; }
  55% { transform: scaleY(1); transform-origin: 50% 100%; }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

/* ------------------------------------------------------------------ */
/* Films — the poster <img> sits underneath; the film fades in over it */
/* only once it is actually playing.                                   */
/* ------------------------------------------------------------------ */

html.rpa-motion video[data-rpa-autoplay] { opacity: 0; }
html.rpa-motion video[data-rpa-autoplay].is-playing {
  opacity: 1;
  transition: opacity var(--rpa-dur-3) var(--rpa-ease);
}

/* ------------------------------------------------------------------ */
/* Header                                                              */
/* ------------------------------------------------------------------ */

html.rpa-motion .rpa-header {
  transition:
    background-color var(--rpa-dur-2) var(--rpa-ease),
    box-shadow var(--rpa-dur-2) var(--rpa-ease),
    translate var(--rpa-dur-2) var(--rpa-ease);
}
html.rpa-motion .rpa-header.is-hidden { translate: 0 -101%; }

/* ------------------------------------------------------------------ */
/* Meridian map                                                        */
/* --rpa-t is each arc's start time, written by the JS.                */
/* ------------------------------------------------------------------ */

@media screen {
  /* Hidden only until drawn; the keyframe has no "to", so it lands on whatever opacity the widget sets. */
  html.rpa-motion:not(.rpa-motion-failsafe) .rpa-meridian-map:not(.is-drawn) .rpa-meridian-map__land { opacity: 0; }
}
@keyframes rpa-land-in { from { opacity: 0; } }
html.rpa-motion .rpa-meridian-map__graticule { opacity: 0; transform: translate3d(0, 10px, 0); }
html.rpa-motion .rpa-meridian-map__neatline { opacity: 0; }
html.rpa-motion .rpa-meridian-map__origin { opacity: 0; }
html.rpa-motion .rpa-meridian-map__arc { stroke-dasharray: 1; stroke-dashoffset: 1; }
html.rpa-motion .rpa-meridian-map__dest { opacity: 0; }
html.rpa-motion .rpa-meridian-map__legend-item[data-index] { opacity: 0.32; }

html.rpa-motion .is-drawn .rpa-meridian-map__graticule {
  opacity: 1;
  transform: none;
  transition: opacity var(--rpa-dur-3) var(--rpa-ease), transform 1600ms var(--rpa-ease);
}
html.rpa-motion .is-drawn .rpa-meridian-map__neatline { opacity: 1; transition: opacity var(--rpa-dur-3) var(--rpa-ease); }
html.rpa-motion .is-drawn:not(.is-settled) .rpa-meridian-map__land { animation: rpa-land-in 1800ms var(--rpa-ease) 250ms both; }
html.rpa-motion .is-drawn .rpa-meridian-map__origin { opacity: 1; transition: opacity var(--rpa-dur-2) var(--rpa-ease) 700ms; }
html.rpa-motion .is-drawn .rpa-meridian-map__arc {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset var(--rpa-arc-dur, 1200ms) var(--rpa-ease) var(--rpa-t, 0ms);
}
html.rpa-motion .is-drawn .rpa-meridian-map__dest {
  opacity: 1;
  transition: opacity var(--rpa-dur-2) var(--rpa-ease) calc(var(--rpa-t, 0ms) + var(--rpa-arc-dur, 1200ms) * 0.62);
}
html.rpa-motion .is-drawn .rpa-meridian-map__legend-item[data-index] {
  opacity: 1;
  transition: opacity var(--rpa-dur-2) var(--rpa-ease) calc(var(--rpa-t, 0ms) + var(--rpa-arc-dur, 1200ms) * 0.62);
}

/* Origin ring: a slow survey-beacon pulse. `scale` composes with the widget's own transform. */
html.rpa-motion .is-drawn .rpa-meridian-map__origin-ring {
  transform-box: fill-box;
  transform-origin: center;
  animation: rpa-beacon 3.6s var(--rpa-ease) 1.4s infinite;
}
html.rpa-motion .is-drawn .rpa-meridian-map__origin[data-origin="secondary"] .rpa-meridian-map__origin-ring { animation-delay: 3.2s; }
@keyframes rpa-beacon {
  0% { scale: 1; opacity: 1; }
  70% { scale: 2.1; opacity: 0; }
  71% { scale: 1; opacity: 0; }
  100% { scale: 1; opacity: 1; }
}
html.rpa-motion .rpa-meridian-map.is-paused .rpa-meridian-map__origin-ring { animation-play-state: paused; }

/* Hover link between legend rows and arcs. */
html.rpa-motion .rpa-meridian-map.is-settled :is(.rpa-meridian-map__arc, .rpa-meridian-map__dest, .rpa-meridian-map__legend-item[data-index]) {
  transition: opacity var(--rpa-dur-1) var(--rpa-ease), stroke-width var(--rpa-dur-1) var(--rpa-ease);
}
html.rpa-motion .rpa-meridian-map.has-active :is(.rpa-meridian-map__arc, .rpa-meridian-map__dest):not(.is-active) { opacity: 0.18; }
html.rpa-motion .rpa-meridian-map.has-active .rpa-meridian-map__legend-item[data-index]:not(.is-active) { opacity: 0.4; }
html.rpa-motion .rpa-meridian-map__arc.is-active { stroke-width: 2.4; }
html.rpa-motion .rpa-meridian-map__arc { pointer-events: stroke; }

/* ------------------------------------------------------------------ */
/* Plates rail (pinned)                                                */
/* JS wraps the rail's children in .rpa-plates-rail__pin and gives the */
/* root the extra height; position: sticky does the pinning, so the    */
/* compositor holds it still — no fixed-position jitter.               */
/* ------------------------------------------------------------------ */

.rpa-plates-rail.is-pinned { position: relative; }
.rpa-plates-rail.is-pinned .rpa-plates-rail__pin {
  position: sticky;
  top: var(--rpa-pin-top, var(--rpa-header-h));
  overflow-x: clip;
}
.rpa-plates-rail.is-pinned .rpa-plates-rail__track { will-change: transform; }
/* The pin label only speaks once the rail is actually stuck: on the way in, the section heading
   above still says the same words. Hidden, not removed, so nothing moves (P3-05). */
.rpa-plates-rail.is-pinned .rpa-plates-rail__pin-label { transition: opacity var(--rpa-dur-1) linear, visibility 0s; }
.rpa-plates-rail.is-pinned:not(.is-stuck) .rpa-plates-rail__pin-label { visibility: hidden; opacity: 0; transition-delay: 0s, var(--rpa-dur-1); }
.rpa-plates-rail.is-pinned .rpa-plates-rail__viewport:focus-visible { outline-offset: -4px; }
.rpa-plates-rail__progress {
  display: none;
  height: 1px;
  margin-inline: var(--_inset, 0px);
  margin-block-start: 1.75rem;
  background: var(--_rule, var(--rpa-rule));
}
.rpa-plates-rail.is-pinned .rpa-plates-rail__progress { display: block; }
.rpa-plates-rail__progress > span {
  display: block;
  height: 100%;
  background: var(--_accent, var(--rpa-petrol));
  transform: scaleX(var(--rpa-p, 0));
  transform-origin: 0 50%;
}

/* ------------------------------------------------------------------ */
/* Insights hover plate                                                */
/* ------------------------------------------------------------------ */

[data-rpa-component="insights-index"] > .rpa-insights-index__hover.rpa-insights-index__hover {
  position: fixed;
  inset: 0 auto auto 0;
  z-index: 60;
  width: clamp(15rem, 22vw, 21rem);
  aspect-ratio: 3 / 2;
  overflow: hidden;
  border: 1px solid var(--rpa-c-rule-strong, var(--rpa-rule-strong));
  border-radius: var(--rpa-radius);
  background: var(--rpa-bone);
  pointer-events: none;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  will-change: transform;
  transition: opacity var(--rpa-dur-1) var(--rpa-ease), clip-path var(--rpa-dur-2) var(--rpa-ease);
}
[data-rpa-component="insights-index"] > .rpa-insights-index__hover.rpa-insights-index__hover.is-visible { opacity: 1; clip-path: inset(0 0 0 0); }
.rpa-insights-index__hover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  opacity: 0;
  transform: scale(1.06);
  transition: opacity var(--rpa-dur-2) var(--rpa-ease), transform var(--rpa-dur-3) var(--rpa-ease);
}
.rpa-insights-index__hover img.is-current { opacity: 1; transform: none; }

/* ------------------------------------------------------------------ */
/* Field notes                                                         */
/* ------------------------------------------------------------------ */

html.rpa-motion .rpa-field-notes.is-draggable .rpa-field-notes__viewport { cursor: grab; }
html.rpa-motion .rpa-field-notes.is-dragging .rpa-field-notes__viewport { cursor: grabbing; scroll-behavior: auto; }
html.rpa-motion .rpa-field-notes.is-dragging a { pointer-events: none; }
/* No colour flicker under the cursor while the strip is being dragged (P2-18): items take no hover
   until the drag ends (the widget's own stylesheet also pins the resting filter meanwhile). */
.rpa-field-notes.is-dragging .rpa-field-notes__item { pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Smooth scrolling (Lenis)                                            */
/* ------------------------------------------------------------------ */

html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ------------------------------------------------------------------ */
/* Page transitions                                                    */
/* Preferred path: cross-document View Transitions — the new sheet is  */
/* drawn across the old one, left → right, behind a hairline.          */
/* Fallback: a paper curtain (.rpa-curtain) driven by transitions.js.  */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }

  ::view-transition-group(root) { animation: none; }
  ::view-transition-old(root) {
    animation: rpa-vt-hold 460ms linear both;
    mix-blend-mode: normal;
  }
  ::view-transition-new(root) {
    /* A replaced box we can resize: the image stays put, the box opens over it. */
    inset: 0 auto 0 0;
    width: 100%;
    height: 100%;
    box-sizing: content-box;
    object-fit: none;
    object-position: 0 0;
    overflow: clip;
    border-inline-end: 1px solid var(--rpa-ink);
    mix-blend-mode: normal;
    animation: rpa-vt-draw 460ms var(--rpa-ease) both;
  }
}
@keyframes rpa-vt-hold { from { opacity: 1; } to { opacity: 1; } }
@keyframes rpa-vt-draw { from { width: 0; } to { width: 100%; } }

.rpa-curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: var(--rpa-paper);
  border-inline-end: 1px solid var(--rpa-ink);
  transform: translate3d(-101%, 0, 0);
  pointer-events: none;
  visibility: hidden;
}
.rpa-curtain.is-in {
  visibility: visible;
  transform: none;
  transition: transform 420ms var(--rpa-ease);
}

/* ------------------------------------------------------------------ */
/* Reading progress fallback (browsers without view timelines)         */
/* ------------------------------------------------------------------ */

@media (min-width: 1100px) {
  .rpa-article__progress.is-js {
    display: block;
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 1.5px;
    background: var(--rpa-c-rule);
  }
  .rpa-article__progress.is-js > span {
    position: absolute;
    inset: 0;
    background: var(--rpa-petrol);
    transform: scaleY(var(--rpa-p, 0));
    transform-origin: 50% 0;
  }
}

/* ------------------------------------------------------------------ */
/* Guards: editor, failsafe, print. Last, and loud on purpose.         */
/* ------------------------------------------------------------------ */

html.rpa-motion-failsafe [data-rpa-reveal],
html.rpa-motion-failsafe [data-rpa-reveal] > :is(img, picture, video),
html.rpa-motion-failsafe .rpa-line__in,
html.rpa-motion-failsafe .rpa-rule-line,
html.rpa-motion-failsafe .rpa-word,
html.rpa-motion-failsafe :is(.rpa-meridian-map__graticule, .rpa-meridian-map__neatline, .rpa-meridian-map__origin, .rpa-meridian-map__dest, .rpa-meridian-map__legend-item),
body.elementor-editor-active [data-rpa-reveal],
body.elementor-editor-active [data-rpa-reveal] > :is(img, picture, video) {
  opacity: 1 !important;
  transform: none !important;
  clip-path: none !important;
  animation: none !important;
  transition: none !important;
}
html.rpa-motion-failsafe .rpa-meridian-map__arc { stroke-dashoffset: 0 !important; }
html.rpa-motion-failsafe .rpa-curtain { display: none !important; }

@media print {
  [data-rpa-reveal], [data-rpa-reveal] > :is(img, picture, video), .rpa-line__in, .rpa-rule-line, .rpa-word,
  .rpa-meridian-map__graticule, .rpa-meridian-map__neatline, .rpa-meridian-map__origin, .rpa-meridian-map__dest, .rpa-meridian-map__legend-item {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .rpa-meridian-map__arc { stroke-dashoffset: 0 !important; }
  .rpa-curtain, .rpa-insights-index__hover { display: none !important; }
}

/* ---------- Guide contents: the chapter in view (aria-current set by guide-toc.js) ---------- */
.rpa-guide-toc__link[aria-current="true"] .rpa-guide-toc__label {
  color: var(--rpa-c-link);
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5px;
}
.rpa-guide-toc__link[aria-current="true"] .rpa-guide-toc__num::after {
  content: "";
  display: inline-block;
  width: 0.4em;
  height: 0.4em;
  margin-inline-start: 0.45em;
  border-radius: 50%;
  background: var(--rpa-verdigris);
  vertical-align: 0.12em;
}