/*! rie-legacy.css — Rotary in Ireland (District 1160) · Track A bridge skin
 *  HAND-WRITTEN (not generated). Owner: legacy. Spec: research/DESIGN-BRIEF.md §0.1, §4.10, §7.6 Phase 1.
 * =============================================================================

   WHAT THIS FILE IS
   76 of rotary.ie's 79 pages are built from custom shortcode HTML (rpb-*, rotary-home__*,
   rhh, ris, rrp, rfc, rcb …), not Elementor. This file restyles that EXISTING markup so every
   page adopts the rotary.org look the day rie.css ships, before any page is rebuilt.
   Every block below mirrors one new component in rie.css and reuses its --rie-* tokens.
   It is meant to shrink: when a page is rebuilt (Track B), delete the blocks that say
   "delete when … is rebuilt". When nothing uses a family any more, delete the family.
   The file is empty (and deleted) at the end of Phase 7.

   LOAD ORDER (inc/enqueue.php)
   rie.css first (tokens, base, components), then this file, both after Elementor's kit
   (post-7.css). rie.css must be loaded: this file only uses its tokens and icon masks.

   HOW IT WINS THE CASCADE
   The legacy CSS arrives from three places (research/05-ie-audit.md §1, 07-elementor-free.md §0.7):
     a) inline <style id="rotary-*-inline-css"> blocks in <head> (several use !important);
     b) per-shortcode <style> blocks printed inside <body> (rpb-hero, rpb-split, rpb-quote,
        rpb-buttons, rrelated, rotary-hub, rotary-cd …) — these print AFTER this file;
     c) style="" attributes written into post content (inline card grids and stat tiles).
   So:
   - Ordinary rules here are always MORE SPECIFIC than the legacy rule they replace (usually
     the legacy selector plus a leading `body`), so they win whatever the file order.
   - Legacy custom properties (--rotary-font, --rotary-btn-*) are re-pointed at the tokens on
     `:root:root`. That alone removes the Georgia `!important` from html/body/inputs.
   - !important is used ONLY to beat a legacy !important or a style="" attribute. Every such
     declaration sits inside `@layer rie-legacy-important { … }`, and each block says what it
     beats. Why a layer: an !important declaration in a cascade layer outranks every
     unlayered !important, whatever its specificity or position. The legacy rules are all
     unlayered (nothing on rotary.ie uses @layer), so the layer wins without specificity
     hacks, and it cannot leak: only !important declarations live in the layer (normal
     declarations in a layer would LOSE to unlayered CSS, so never put one there).
   - Never an ID selector, never .elementor-kit-7 / .elementor-element-xxxx.

   BREAKPOINTS: mobile-first; only 481 / 769 / 1025 (plus hover and reduced motion).

   FOCUS (brief §2.9; same pattern as 10-base §6)
   - Light surfaces: the navy + white-inset ring (--rie-shadow-focus) PLUS
     `outline: 2px solid transparent; outline-offset: 2px`. Forced-colours mode (Windows
     contrast themes) drops every box-shadow but paints the outline in the system colour,
     so the ring never vanishes. Never write `outline: none` next to a box-shadow ring.
   - Fields (inputs, selects, the finder box): border azure + the same navy ring and
     transparent outline (navy is 10.75:1 on white; the brief's 50 % azure halo was ~2:1).
   - Dark surfaces (navy bands, photos): `outline: 2px solid white; outline-offset: 2px`,
     no box-shadow (a navy ring vanishes on navy). Already forced-colours safe.

   CONTENTS (legacy family → new component · delete when …)
     1  Global bridge (fonts, links, wpautop debris, scroll-reveal, dark-band focus) · delete in Phase 7
     2  Legacy buttons → .rie-btn variants
     3  .rotary-breadcrumbs → .rie-breadcrumb
     4  .rpb-hero → .rie-hero (and .rie-hero--colour)
     5  .rhh → .rie-hero-home
     6  .rotary-home__section (+ --brand, --alt, headings) → .rie-section + .rie-section-head
     7  Loose page content → .rie-prose (860 column)
     8  .rpb-split → .rie-media
     9  .rpb-quote → .rie-quote
    10  .rpb-buttons, .rpb-btn, .rotary-home__centered → .rie-actions
    11  .rhh-poa (+ .rotary-about__legal) → navy CTA band / tint band
    12  .ris, .rps, inline stat tiles → .rie-stats
    13  Card family: .rrp, .rhc, .rotary-hub, .rrelated, inline card grids, .rprj, .rwwd,
        inline tiles → .rie-card in .rie-grid
    14  .rfaq → .rie-accordion
    15  .rtl → .rie-gallery look
    16  .rotary-newsletter → form panel (.rie-form on white)
    17  .rfc → .rie-finder
    18  .rotary-cd → .rie-directory + .rie-card--club
    19  .rotary-cm → .rie-map
    20  .rar → .rie-appeal
    21  .rcb-* → .rie-appeal-hero, .rie-progress, .rie-impact, .rie-highlight, .rie-card--info, .rie-bank
    21b Hello .page-header title (pages without an rpb hero) → plain H1
    22  Hello single post → .rie-article-head + .rie-prose--article
    23  .rblog-* → .rie-card--h grid
    24  .r404__* → colour hero + cards
    25  .rdc-team, .rspk, .rma-* → .rie-person-card, .rie-person row, .rie-form
    26  Reduced motion
   ============================================================================= */


/* =============================================================================
   1. GLOBAL BRIDGE
   Mirrors: 10-base (Open Sans only, slate text, bold royal links, no underlines).
   Delete in Phase 7, after every rpb-/rotary- snippet is gone.
   ============================================================================= */

/* 1.1 Re-point the legacy custom properties at the tokens (0,2,0 beats their :root 0,1,0).
   --rotary-font is what rotary-fonts-inline-css uses in
   `html, body, button, input … { font-family: var(--rotary-font) !important }` — so this
   swaps Georgia for Open Sans on every page without fighting the !important.
   The --rotary-btn-* set drives the "unified" gold-outline pills of rotary-home,
   rpb-buttons, rcb and the newsletter; section 2 restyles them fully.
   inc/enqueue.php now dequeues rotary-fonts by default (the `rie_dequeue_styles` filter
   keeps it). Its --rotary-btn-* variables are still read by rotary-home(-modern),
   rpb-buttons, rcb, the newsletter and the club/chair contact snippets, so they are defined
   here either way; every other rule below works with or without it. */
:root:root {
  --rotary-font: var(--rie-font);
  --rotary-heading-font: var(--rie-font);
  --rotary-blue: var(--rie-color-royal);
  --rotary-blue-dark: var(--rie-color-navy);
  --rotary-btn-radius: var(--rie-radius-pill);
  --rotary-btn-transition: all var(--rie-dur-base) var(--rie-ease);
  --rotary-btn-bg: var(--rie-color-royal);
  --rotary-btn-bg-hover: var(--rie-color-azure);
  --rotary-btn-text: var(--rie-color-white);
  --rotary-btn-text-hover: var(--rie-color-white);
  --rotary-btn-border: var(--rie-color-royal);
}

/* 1.2 Georgia on content links.
   rotary-site-styles-inline-css forces `.page-content a:not(…×7), .page-content p a,
   .page-content li a { font-family: Georgia … !important }` (specificity up to 0,8,1). */
@layer rie-legacy-important {
  body .page-content a {
    font-family: var(--rie-font) !important;   /* beats rotary-site-styles Georgia !important */
  }
}

/* 1.3 Text colour and links inside legacy content.
   Kit `.elementor-kit-7 a` sets link weight 400 (0,1,1) and rotary-site-styles underlines
   every link on hover (0,1,1); these rules are 0,1,2 / 0,2,2. Prose links follow rotary.org:
   bold royal, no underline; hover azure + a 1 px bottom rule (class-less links only, so
   buttons and cards are untouched). */
body .page-content {
  color: var(--rie-color-text);
}

body .page-content a:not([class*="rie-"]):is(:hover, :focus) {
  text-decoration: none;
}

body .page-content :is(p, li, dd, td, figcaption) a:not([class]) {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color var(--rie-dur-fast) var(--rie-ease), border-color var(--rie-dur-fast) var(--rie-ease);
}

body .page-content :is(p, li, dd, td, figcaption) a:not([class]):is(:hover, :focus-visible) {
  color: var(--rie-color-azure);
  border-bottom-color: currentColor;
}

/* On navy surfaces running-text links are white (hover keeps white and shows the rule);
   the tint variant of the CTA band (section 11) goes back to royal. */
body .page-content :is(.rhh-poa, .rotary-home__section--brand, .ris--brand) :is(p, li, dd, td) a:not([class]) {
  color: var(--rie-color-white);
}

body .page-content .rotary-home__section--brand + .rhh-poa :is(p, li, dd, td) a:not([class]) {
  color: var(--rie-color-royal);
}

/* A page that ends with a full-width band runs it straight into the footer: drop the
   1-line gap `#content { padding-bottom: 1lh }` (rotary-site-styles, an ID rule) leaves. */
@layer rie-legacy-important {
  body .site-main:has(> .page-content > :is(.rhh-poa, .rotary-about__legal, .rotary-home__section, .rtl, .ris, .rps):last-child) {
    padding-bottom: 0 !important;   /* beats #content { padding-bottom: 1lh } (ID specificity) */
  }
}

/* 1.4 wpautop debris: stray <br>, empty <p>, and the <p> that wraps each shortcode's
   <style> block (it has no box but its margins still push content around).
   Root fix: remove wpautop from those shortcodes in the PHP (brief §4.10). */
body .page-content > br,
body .rotary-home__section > br,
body .rotary-home__cards > br {
  display: none;
}

body :is(.page-content, .rotary-home__section, .rotary-home__section-heading, .rotary-home__section-head,
         .rhh-poa__inner, .rpb-split__text) > p:empty {
  display: none;
}

body :is(.page-content, .rotary-home__section) > p:has(> style):not(:has(> :not(style, br))) {
  margin: 0;
}

/* 1.5 Scroll-reveal hid whole bands until an IntersectionObserver fired
   (html.rotary-js .rotary-home__section{opacity:0} — the audit captured a blank CTA band).
   Content is never hidden now (brief §2.10). 0,3,0 beats 0,2,1. */
:root.rotary-js :is(.reveal, .rotary-home__section, .rhh-poa) {
  opacity: 1;
  transform: none;
  transition: none;
}

/* 1.6 Focus on the legacy dark surfaces (home hero, navy bands, navy CTA band, navy stats).
   10-base only knows the .rie-* dark classes, so running-text links, the map and inline
   cards on these bands got the navy ring, which vanishes on navy. Same answer as 10-base:
   a 2 px white outline, 2 px out (0,2,1). Component rules further down that are heavier
   or later (buttons 2, cards 13.2 / 13.6, map 19) set their own dark-band focus. */
body :is(.rhh, .rhh-poa, .rotary-home__section--brand, .ris--brand) :focus-visible {
  outline: 2px solid var(--rie-color-white);
  outline-offset: 2px;
  box-shadow: none;
}

/* …but light surfaces go back to the light ring (0,3,1): the tint variant of the CTA band
   that follows a navy band (section 11), and the white panels that sit on navy bands —
   the newsletter panel, the Leaflet map's contents, the .rprj / .rwwd cards, the FAQ list,
   the finder and the directory. */
body .rotary-home__section--brand + .rhh-poa :focus-visible,
body :is(.rhh, .rhh-poa, .rotary-home__section--brand, .ris--brand)
     :is(.rotary-newsletter, .leaflet-container, .rprj__card, .rwwd__card, .rfaq__list, .rfc, .rotary-cd) :focus-visible {
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}


/* =============================================================================
   2. LEGACY BUTTONS → .rie-btn (56 px pills)
   Mirrors: 30-atoms §2 (same --rie-btn-* custom properties and values).
   Covers: .rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn,
   .rcb-btn, the newsletter .gform_button, the finder's "Browse all clubs" link, .rma-btn,
   the 404 search button. Eight legacy styles become one pill family.
   Delete each selector when the last page that prints it is rebuilt.
   ============================================================================= */

/* Shape and type. Beats: rotary-home-modern's "unified button system" (padding, border,
   radius, font, size, weight, line-height, letter-spacing, decoration, background,
   colour, box-shadow, transition and the hover translateY — all !important), the
   rotary-fonts font-family !important on button/input, and rcb's `.rcb-btn.rcb-btn`. */
@layer rie-legacy-important {
  body :where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn, .rcb-btn,
              .rotary-newsletter__form .gform_button, .rfc__footer a, .rma-btn, .r404__search button) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: var(--rie-space-2) !important;
    min-height: 56px !important;
    max-width: 100% !important;
    padding: 14px 30px !important;                       /* + 2px border = 16 / 32 */
    border: 2px solid var(--rie-btn-bd) !important;
    border-radius: var(--rie-radius-pill) !important;
    background: var(--rie-btn-bg) !important;
    color: var(--rie-btn-fg) !important;
    box-shadow: var(--rie-btn-shadow) !important;
    font-family: var(--rie-font) !important;
    font-size: var(--rie-fs-body) !important;
    font-style: normal !important;
    font-weight: var(--rie-fw-bold) !important;
    line-height: var(--rie-lh-body) !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-decoration: none !important;
    text-transform: none !important;
    transform: none !important;
    filter: none !important;
    transition: all var(--rie-dur-base) var(--rie-ease) !important;
  }
}

body :where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn, .rcb-btn,
            .rotary-newsletter__form .gform_button, .rfc__footer a, .rma-btn, .r404__search button) {
  cursor: pointer;
  white-space: normal;
  vertical-align: middle;
  -webkit-tap-highlight-color: transparent;
}

/* Colours by variant: only custom properties, so the one !important block above paints
   every state. Default = primary (royal → azure → #20BBE6). */
:where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn, .rcb-btn,
       .rotary-newsletter__form .gform_button, .rfc__footer a, .rma-btn, .r404__search button) {
  --rie-btn-bg: var(--rie-color-royal);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: transparent;
  --rie-btn-shadow: none;
}
:where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn, .rcb-btn,
       .rotary-newsletter__form .gform_button, .rfc__footer a, .rma-btn, .r404__search button):hover {
  --rie-btn-bg: var(--rie-color-azure);
}
:where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn, .rcb-btn,
       .rotary-newsletter__form .gform_button, .rfc__footer a, .rma-btn, .r404__search button):active {
  --rie-btn-bg: var(--rie-color-active);
}
:where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn, .rcb-btn,
       .rotary-newsletter__form .gform_button, .rfc__footer a, .rma-btn, .r404__search button):focus-visible {
  --rie-btn-shadow: var(--rie-shadow-focus);
}
/* Forced colours drop the ring above; this outline is painted instead (see FOCUS, top).
   10-base's global :focus-visible (0,2,0) draws the same outline; it is restated here
   (0,2,1) so the pill family carries its ring and its forced-colours outline together.
   The dark-surface rule below has the same weight and comes later, so it still wins on
   navy and photos. */
:root body :where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn, .rpb-btn, .rcb-btn,
                  .rotary-newsletter__form .gform_button, .rfc__footer a, .rma-btn, .r404__search button):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
}

/* --outline (light surfaces): second button of a row, "Contact us", bank reveal */
.rpb-buttons__btn:not(:first-child),
.rpb-btn--secondary,
.rotary-home__btn--secondary,
.rcb-btn--blue {
  --rie-btn-bg: var(--rie-color-white);
  --rie-btn-fg: var(--rie-color-royal);
  --rie-btn-bd: var(--rie-color-royal);
}
.rpb-buttons__btn:not(:first-child):hover,
.rpb-btn--secondary:hover,
.rotary-home__btn--secondary:hover,
.rcb-btn--blue:hover {
  --rie-btn-bg: var(--rie-color-azure);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-azure);
}
.rpb-buttons__btn:not(:first-child):active,
.rpb-btn--secondary:active,
.rotary-home__btn--secondary:active,
.rcb-btn--blue:active {
  --rie-btn-bg: var(--rie-color-active);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-active);
}

/* --secondary (pale pill, navy text): the first CTA on photos and navy bands */
.rhh__btn--primary,
.rhh-poa__btn--primary,
.rotary-home__section--brand .rotary-home__btn--primary,
.rotary-home__section--brand .rpb-buttons__btn:first-child {
  --rie-btn-bg: var(--rie-color-pale);
  --rie-btn-fg: var(--rie-color-navy);
  --rie-btn-bd: transparent;
}
.rhh__btn--primary:hover,
.rhh-poa__btn--primary:hover,
.rotary-home__section--brand .rotary-home__btn--primary:hover,
.rotary-home__section--brand .rpb-buttons__btn:first-child:hover { --rie-btn-bg: var(--rie-color-pale-hover); }
.rhh__btn--primary:active,
.rhh-poa__btn--primary:active,
.rotary-home__section--brand .rotary-home__btn--primary:active,
.rotary-home__section--brand .rpb-buttons__btn:first-child:active { --rie-btn-bg: var(--rie-color-pale-active); }

/* --outline-inverse (white outline → white fill, navy text): second CTA on photos / navy */
.rhh__btn--secondary,
.rhh-poa__btn--secondary,
.rotary-home__section--brand .rotary-home__btn--secondary,
.rotary-home__section--brand .rpb-buttons__btn:not(:first-child) {
  --rie-btn-bg: transparent;
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-white);
}
.rhh__btn--secondary:hover,
.rhh-poa__btn--secondary:hover,
.rotary-home__section--brand .rotary-home__btn--secondary:hover,
.rotary-home__section--brand .rpb-buttons__btn:not(:first-child):hover {
  --rie-btn-bg: var(--rie-color-white);
  --rie-btn-fg: var(--rie-color-navy);
  --rie-btn-bd: var(--rie-color-white);
}
.rhh__btn--secondary:active,
.rhh-poa__btn--secondary:active,
.rotary-home__section--brand .rotary-home__btn--secondary:active,
.rotary-home__section--brand .rpb-buttons__btn:not(:first-child):active {
  --rie-btn-bg: var(--rie-color-tint);
  --rie-btn-fg: var(--rie-color-navy);
  --rie-btn-bd: var(--rie-color-tint);
}

/* Focus on dark surfaces: white outline, 2 px out (navy ring would vanish on navy).
   0,2,1 beats 10-base's global :focus-visible (0,2,0) and, coming later, the transparent
   outline above. Only these four pills sit directly on dark bands; pills on white panels
   inside a navy band keep the light ring (1.6). */
body :is(.rhh, .rhh-poa, .rotary-home__section--brand, .ris--brand) :where(.rhh__btn, .rhh-poa__btn, .rotary-home__btn, .rpb-buttons__btn):focus-visible {
  --rie-btn-shadow: none;
  outline: 2px solid var(--rie-color-white);
  outline-offset: 2px;
}


/* =============================================================================
   3. BREADCRUMB  .rotary-breadcrumbs → .rie-breadcrumb
   Mirrors: brief §4.1 breadcrumb — a quiet 14/21 row, royal 600 links, current item
   #717171, "/" separators 8 px each side, 24 px under the header, above the hero.
   Removes the pill, gradient, gold "›" separators, home icon and Georgia underline.
   Delete when the page is rebuilt (Rank Math breadcrumb, .rie-breadcrumb).
   ============================================================================= */

body .rotary-breadcrumbs {
  display: block;
  width: min(var(--rie-max), 100% - 2 * var(--rie-gutter));
  margin: var(--rie-space-6) auto 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--rie-color-muted);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

body .rotary-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

body .rotary-breadcrumbs li {
  display: inline;
  margin: 0;
}

body .rotary-breadcrumbs li:not(:last-child)::after {
  content: "/";
  content: "/" / "";                 /* drawn, not read out (as .rie-breadcrumb) */
  margin: 0 var(--rie-space-2);
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
}

body .rotary-breadcrumbs a {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-decoration: none;
}

body .rotary-breadcrumbs a:is(:hover, :focus-visible) {
  color: var(--rie-color-azure);
  text-decoration: underline;
}

body .rotary-breadcrumbs li:first-child a::before {
  content: none;
  display: none;
}

body .rotary-breadcrumbs span[aria-current] {
  color: var(--rie-color-muted);
  font-weight: var(--rie-fw-regular);
}


/* =============================================================================
   4. PAGE HERO  .rpb-hero → .rie-hero (contained photo hero)
   Mirrors: 40-sections §6. ≥769: contained 1296 × 600, radius 20, black-to-clear gradient
   (the blue wash goes), H1 + strap centred at the bottom in white, strap max 440.
   ≤768: the photo is a 3:2 block (radius 16); the H1 and strap drop underneath,
   left-aligned, in #323C44. A hero with no photo becomes the navy colour hero.
   Delete when every page using [rpb_hero] is rebuilt with .rie-hero.
   ============================================================================= */

body .rpb-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(var(--rie-max), 100% - 2 * var(--rie-gutter));
  min-height: 0;
  margin: var(--rie-space-6) auto 0;
  padding: 0;
  overflow: visible;
  border-radius: 0;
  background: none;
  color: var(--rie-color-text);
}

body .rpb-hero .rpb-hero__bg {
  position: static;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 2;
  border-radius: var(--rie-radius-card);
  object-fit: cover;
}

body .rpb-hero .rpb-hero__overlay {
  display: none;
}

body .rpb-hero .rpb-hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: var(--rie-space-4) 0 0;
  color: inherit;
  text-align: left;
}

/* Beats `.rpb-hero .rpb-hero__title { font-weight: 800 !important; color: #FFF !important }`
   (printed in <body>) and rotary-fonts' heading font-family !important. */
@layer rie-legacy-important {
  body .rpb-hero .rpb-hero__title {
    color: inherit !important;
    font-weight: var(--rie-fw-semibold) !important;
  }
}

body .rpb-hero .rpb-hero__title {
  margin: 0;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h1);
  line-height: var(--rie-lh-h1);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

body .rpb-hero .rpb-hero__strap {
  max-width: var(--rie-measure);
  margin: var(--rie-space-4) 0 0;
  color: inherit;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  opacity: 1;
}

@media (min-width: 769px) {
  body .rpb-hero {
    isolation: isolate;
    overflow: hidden;
    justify-content: flex-end;
    align-items: center;
    min-height: 600px;
    border-radius: var(--rie-radius-hero);
    background-color: var(--rie-color-ink);
    color: var(--rie-color-white);
  }

  body .rpb-hero .rpb-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  body .rpb-hero .rpb-hero__overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    background: var(--rie-overlay-hero);
  }

  body .rpb-hero .rpb-hero__content {
    max-width: 830px;
    padding: 0 var(--rie-gutter) var(--rie-space-8);
    text-align: center;
  }

  body .rpb-hero .rpb-hero__strap {
    max-width: var(--rie-hero-copy);
    margin-inline: auto;
  }
}

@media (min-width: 1025px) {
  body .rpb-hero .rpb-hero__content { padding-bottom: var(--rie-space-12); }
  body .rpb-hero .rpb-hero__strap { margin-top: var(--rie-space-6); }
}

/* No photo → colour hero (.rie-hero--colour): full-bleed navy, 400 min, centred white. */
body .rpb-hero:not(:has(> .rpb-hero__bg)) {
  isolation: isolate;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  width: 100%;
  min-height: 400px;
  margin: 0;
  padding: var(--rie-section-y) var(--rie-gutter);
  border-radius: 0;
  background-color: var(--rie-color-navy);
  color: var(--rie-color-white);
}

body .rpb-hero:not(:has(> .rpb-hero__bg)) .rpb-hero__overlay { display: none; }

body .rpb-hero:not(:has(> .rpb-hero__bg)) .rpb-hero__content {
  max-width: 830px;
  padding: 0;
  text-align: center;
}

body .rpb-hero:not(:has(> .rpb-hero__bg)) .rpb-hero__strap {
  max-width: var(--rie-hero-copy);
  margin-inline: auto;
}


/* =============================================================================
   5. HOME HERO  .rhh → .rie-hero-home (full-bleed video/photo hero)
   Mirrors: 40-sections §5. 600 / 700 px, left + bottom double gradient, content
   bottom-left (max 528) with 190 px below it from 769, Hero H1 in white, pale pill +
   white outline pill, no fade-up animation. The scroll chevron becomes the 56 px
   outlined circle in rotary.org's play/pause position.
   Delete when the home page is rebuilt (T-HOME, phase 3).
   ============================================================================= */

body .rhh {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  width: 100%;
  min-height: 600px;
  margin: 0;
  padding: var(--rie-space-6) max(var(--rie-gutter), (100% - var(--rie-max)) / 2);
  overflow: hidden;
  background-color: var(--rie-color-ink);
  color: var(--rie-color-white);
}

body .rhh .rhh__bg {
  z-index: -2;
  background-color: var(--rie-color-ink);
}

/* Below 769 the copy covers most of the frame and the legacy video is bright: use the
   interior hero's bottom gradient there; the rotary.org double gradient from 769 up. */
body .rhh .rhh__overlay {
  z-index: 1;                          /* the Vimeo iframe is appended after it at load */
  background: var(--rie-overlay-hero);
}

body .rhh .rhh__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 528px;
  margin: 0;
  padding: 0;
  text-align: left;
}

/* Beats `.rhh .rhh__title { font-weight: 800 !important }` and
   `.rhh__sub { margin: 0 0 120px !important }` (mobile: 64px !important). */
@layer rie-legacy-important {
  body .rhh .rhh__title {
    font-weight: var(--rie-fw-semibold) !important;
  }

  body .rhh .rhh__sub {
    margin: var(--rie-space-4) 0 0 !important;
  }
}

body .rhh .rhh__title {
  margin: 0;
  color: var(--rie-color-white);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-hero);
  line-height: var(--rie-lh-hero);
  letter-spacing: 0;
  text-wrap: balance;
  animation: none;
}

body .rhh .rhh__sub {
  max-width: none;
  color: var(--rie-color-white);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
  opacity: 1;
  animation: none;
}

body .rhh .rhh__buttons {
  justify-content: flex-start;
  gap: var(--rie-space-4);
  margin-top: var(--rie-space-6);
  animation: none;
}

body .rhh .rhh__scroll {
  display: none;
}

@media (min-width: 769px) {
  body .rhh {
    min-height: 700px;
    padding-bottom: 190px;
  }

  body .rhh .rhh__overlay {
    background: var(--rie-overlay-home);
  }

  /* The chevron link as the 56 px outlined circle (2 px white ring), bottom 48 / left inset. */
  body .rhh .rhh__scroll {
    position: absolute;
    bottom: var(--rie-space-12);
    left: max(var(--rie-gutter), (100% - var(--rie-max)) / 2);
    z-index: 1;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 2px solid var(--rie-color-white);
    border-radius: var(--rie-radius-pill);
    color: var(--rie-color-white);
    opacity: 1;
    transform: none;
    transition: background-color var(--rie-dur-base) var(--rie-ease), color var(--rie-dur-base) var(--rie-ease);
  }

  body .rhh .rhh__scroll:hover {
    background-color: var(--rie-color-tint);
    border-color: var(--rie-color-tint);
    color: var(--rie-color-royal);
    transform: none;
  }
}


/* =============================================================================
   6. BANDS  .rotary-home__section (+ --brand, --alt) → .rie-section
   Mirrors: 40-sections §1–3. Full-bleed bands (Hello's 1140 cap is gone, see 10-base),
   padding 64 / 80 / 112 × gutter, content boxed at 1296. --brand = navy #0C3C7C with
   white text and the corner disc + dotted ring. Two light bands in a row share one gap
   (flush-top). Section heads: no eyebrow, no gold bar; H2 600 in #323C44 (white on navy),
   intro 16/24 max 860, then the head gap (12 / 24 / 48).
   Delete when the last page with [rotary_section]-style bands is rebuilt.
   ============================================================================= */

body .rotary-home__section {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: var(--rie-section-y) var(--rie-gutter);
  background-color: var(--rie-color-page);
  color: var(--rie-color-text);
}

body .rotary-home__section > * {
  max-width: var(--rie-max);
  margin-inline: auto;
}

/* The first band after a contained hero on the same background sits closer (stack-lg). */
body :is(.rpb-hero, .rotary-breadcrumbs) + .rotary-home__section:not(.rotary-home__section--brand) {
  padding-top: var(--rie-stack-lg);
}
body .rpb-hero + .rotary-home__section--brand {
  margin-top: var(--rie-stack-lg);
}

/* Two light bands in a row: one gap, not two (.rie-section--flush-top). */
body :is(.rotary-home__section, .ris, .rps, .rtl):not(.rotary-home__section--brand, .ris--brand)
  + :is(.rotary-home__section, .rtl):not(.rotary-home__section--brand) {
  padding-top: 0;
}

/* Inline wrappers written into content (style="max-width:1200px;margin:0 auto") around the
   map, the directory and the project feed: align them with the 1296 grid. */
@layer rie-legacy-important {
  body .rotary-home__section > div[style*="max-width:1200px"]:not([style*="display:grid"]) {
    max-width: var(--rie-max) !important;   /* beats style="max-width:1200px" */
  }
}

/* A band whose head is its only content (e.g. /clubs/ intro) needs no gap under the head. */
body .rotary-home__section > :is(.rotary-home__section-heading, .rotary-home__section-head):not(:has(~ :not(br, p:empty, style))) {
  margin-bottom: 0;
}

/* A band nested inside a band (the finder inside /clubs/) drops its own padding. */
body .rotary-home__section .rotary-home__section {
  padding: 0;
  background: none;
}

body .rotary-home__section--alt {
  background-color: var(--rie-color-white);
}

body .rotary-home__section--alt::before {
  content: none;
  display: none;
}

/* Navy band + decorations (TL disc #17458F, BR dotted ring #0067C8, 300/400/500). */
body .rotary-home__section.rotary-home__section--brand {
  overflow: hidden;
  background-color: var(--rie-color-navy);
  color: var(--rie-color-white);
}

body .rotary-home__section.rotary-home__section--brand::before,
body .rotary-home__section.rotary-home__section--brand::after {
  --rie-deco-s: 300px;
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  width: var(--rie-deco-s);
  height: var(--rie-deco-s);
  pointer-events: none;
}

body .rotary-home__section.rotary-home__section--brand::before {
  top: calc(var(--rie-deco-s) / -2);
  left: calc(var(--rie-deco-s) / -2);
  border-radius: 50%;
  background-color: var(--rie-color-royal);
}

body .rotary-home__section.rotary-home__section--brand::after {
  right: calc(var(--rie-deco-s) / -2);
  bottom: calc(var(--rie-deco-s) / -2);
  background-color: var(--rie-color-azure);
  -webkit-mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
  mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
}

@media (min-width: 769px) {
  body .rotary-home__section.rotary-home__section--brand::before,
  body .rotary-home__section.rotary-home__section--brand::after { --rie-deco-s: 400px; }
}

@media (min-width: 1025px) {
  body .rotary-home__section.rotary-home__section--brand::before,
  body .rotary-home__section.rotary-home__section--brand::after { --rie-deco-s: 500px; }
}

/* Text on navy. `.rotary-home__section--brand p` (0,1,1) set white at 92 %; links went
   gold `.rotary-home__section--brand a:not(…×4)` (0,5,1) — gold text is not allowed.
   Only the band's own running text is re-coloured here (0,5,3 / 0,6,2); white panels inside
   the band (cards, the newsletter form, the map) set their own link colours above 0,5,1. */
body .rotary-home__section--brand :is(p, li, h2, h3, h4) {
  color: inherit;
}

body .rotary-home__section--brand > :is(p, ul, ol) a:not(.rotary-home__btn):not(.rrp__card):not(.rhc):not(.rfc__link),
body .rotary-home__section--brand :is(.rotary-home__section-heading, .rotary-home__section-head, .rpb-split__text, .rprj__group-sub) a:not(.rotary-home__btn):not(.rrp__card):not(.rhc):not(.rfc__link) {
  color: var(--rie-color-white);
}

/* ---- Section head ---- */
body :is(.rotary-home__section-heading, .rotary-home__section-head) {
  max-width: var(--rie-measure);
  margin: 0 auto var(--rie-head-gap);
  text-align: center;
}

/* Eyebrows and gold bars are removed sitewide (brief §1 move 4). Beats rotary-fonts'
   `.rotary-home__section-eyebrow, .ris__eyebrow, … { display: block !important }`. */
@layer rie-legacy-important {
  body :is(.rotary-home__section-eyebrow, .ris__eyebrow, .rps__eyebrow, .rtl__eyebrow, .rfc__eyebrow,
           .rmv__eyebrow, .rhh-poa__eyebrow) {
    display: none !important;
  }

  /* Section titles: beats rotary-fonts' clamp(28px,3.4vw,38px) / 1.15 / 800 / -.015em /
     margin !important on .rotary-home__section-title, .ris__title, .rps__title,
     .rtl__title, .rfc__title, .rmv__title. */
  body :is(.rotary-home__section-title, .ris__title, .rps__title, .rtl__title, .rfc__title, .rmv__title) {
    margin: 0 !important;
    font-size: var(--rie-fs-h2) !important;
    font-weight: var(--rie-fw-semibold) !important;
    line-height: var(--rie-lh-h2) !important;
    letter-spacing: 0 !important;
  }

  /* Intros: beats `font-size: 17px; line-height: 1.55; margin: 0 auto; max-width: 640px`
     !important on .rotary-home__section-sub, .ris__sub, .rps__sub, .rtl__sub, .rfc__sub. */
  body :is(.rotary-home__section-sub, .ris__sub, .rps__sub, .rtl__sub, .rfc__sub, .rmv__sub) {
    max-width: var(--rie-measure) !important;
    margin: var(--rie-space-3) auto 0 !important;
    font-size: var(--rie-fs-body) !important;
    line-height: var(--rie-lh-body) !important;
  }

  /* Titles and intros on navy/tint: `.ris__title{color:var(--rotary-blue)!important}`,
     `.rfc__title{color:#fff!important}`, `.rfc__sub{color:rgba(255,255,255,.92)!important}`. */
  body :is(.ris, .rps, .rtl, .rfc) :is(.ris__title, .rps__title, .rtl__title, .rfc__title, .ris__sub, .rps__sub, .rtl__sub, .rfc__sub) {
    color: var(--rie-color-text) !important;
  }

  body :is(.ris--brand) :is(.ris__title, .ris__sub) {
    color: var(--rie-color-white) !important;
  }
}

body :is(.rotary-home__section-title, .ris__title, .rps__title, .rtl__title, .rfc__title, .rmv__title) {
  position: static;
  display: block;
  padding: 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  text-transform: none;
  text-wrap: balance;
}

body :is(.rotary-home__section-title, .ris__title, .rps__title, .rtl__title, .rfc__title, .rmv__title)::after {
  content: none;
  display: none;
}

body :is(.rotary-home__section-sub, .ris__sub, .rps__sub, .rtl__sub, .rfc__sub, .rmv__sub) {
  color: var(--rie-color-text);
  opacity: 1;
}

body .rotary-home__section--brand :is(.rotary-home__section-title, .rotary-home__section-sub) {
  color: var(--rie-color-white);
}


/* =============================================================================
   7. LOOSE PAGE CONTENT → .rie-prose (860 reading column)
   Mirrors: 60-editorial §1–4. Paragraphs, subheads and lists written straight into a page
   (or into a band without a component) sit in one centred 860 column: 16/24 #323C44,
   20 px paragraph spacing, subheads 600 (an H2 in running text reads at the H3 size, an
   H3 at the H4 size — rotary.org's cause pages), lists with their bullets.
   Beats: kit `.elementor-kit-7 h2…h6` (28 px, royal, 0,1,1), kit `p { margin-block-end: 0 }`
   and /uploads/rotary/typography.css `body.elementor-kit-7 p { margin-block-end: 1em }` (0,1,2).
   Delete when the page is rebuilt (its text moves to a .rie-prose Text Editor).
   ============================================================================= */

/* Direct children of .page-content have no band around them: give them the column and
   the gutter themselves. */
body .page-content > :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table, hr, .wp-block-group, .wp-block-quote, .wp-block-table) {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  margin-inline: auto;
}

body .rotary-home__section > :is(p, h2, h3, h4, h5, h6, ul, ol, blockquote, table, hr) {
  max-width: var(--rie-measure);
}

:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > p {
  margin-block: 0 var(--rie-space-5);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > :is(h2, h3, h4, h5, h6) {
  margin-block: var(--rie-space-8) var(--rie-space-4);
  color: inherit;
  font-family: var(--rie-font);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  text-wrap: balance;
}

:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > h2 { font-size: var(--rie-fs-h3); line-height: var(--rie-lh-h3); }
:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > h3 { font-size: var(--rie-fs-h4); line-height: var(--rie-lh-h4); }
:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > :is(h4, h5) { font-size: var(--rie-fs-h5); line-height: var(--rie-lh-h5); }
:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > h6 { font-size: var(--rie-fs-h6); line-height: var(--rie-lh-h6); }

:root body .rotary-home__section > :is(h2, h3, h4, h5, h6):first-child,
:root body .rpb-split__text > :is(h2, h3, h4, h5, h6):first-child {
  margin-top: 0;
}

/* Subheads in running text get the big gap above (rotary.org spacing-large). */
:root body .rotary-home__section > h2:not(:first-child) {
  margin-top: var(--rie-stack-lg);
}

:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > :is(ul, ol) {
  margin-block: 0 var(--rie-space-5);
  padding-inline-start: 40px;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > :is(ul, ol) > li + li {
  margin-top: var(--rie-space-2);
}

:root body :is(.page-content, .rotary-home__section, .rpb-split__text) > :is(p, ul, ol):last-child {
  margin-bottom: 0;
}

/* p.lead is an intro paragraph: rotary.org sets intros at body size. */
body .page-content p.lead {
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

/* Loose content straight after the hero (pages written without bands, e.g. /membership/). */
body .rpb-hero:has(+ :is(p, h2, h3, h4, ul, ol, .rpb-split, .rpb-quote, .rpb-buttons)) {
  margin-bottom: var(--rie-stack-lg);
}

/* A page whose loose content runs straight into a band or the footer keeps the band gap. */
body .page-content > :is(p, ul, ol):last-child {
  margin-bottom: var(--rie-section-y);
}


/* =============================================================================
   8. SPLIT  .rpb-split (--left / --right) → .rie-media
   Mirrors: 40-sections §16. ≥1025 a 12-column row inside 1080: text 5 columns, image 6
   (aspect 618/463, radius 16); --left puts the image first. Below 1025 the text comes first
   and the image follows 24 px later. A split with an empty text column shows just its
   image in the 860 column (9 such splits exist, audit §9.13).
   Beats the per-block <style> printed in <body> (.rpb-split … 0,1,0 and 0,2,1).
   Delete when the page is rebuilt with .rie-media.
   ============================================================================= */

body .rpb-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas: none;
  align-items: start;
  gap: var(--rie-space-6) var(--rie-gap);
  width: 100%;
  max-width: var(--rie-wide);
  margin: var(--rie-stack-lg) auto;
}

body .page-content > .rpb-split {
  width: min(var(--rie-wide), 100% - 2 * var(--rie-gutter));
}

body .rotary-home__section > .rpb-split:first-child,
body .rotary-home__section-heading + .rpb-split {
  margin-top: 0;
}

/* A split right under a subhead follows it at the subhead's own gap. */
body :is(h2, h3, h4) + .rpb-split {
  margin-top: var(--rie-space-6);
}

/* Last block of its band (wpautop leaves a hidden <br> after it, so :last-child fails). */
body .rotary-home__section > .rpb-split:not(:has(~ :not(br, style, p:empty))) {
  margin-bottom: 0;
}

body .rpb-split .rpb-split__media,
body .rpb-split .rpb-split__text {
  grid-area: auto;
  min-width: 0;
}

body .rpb-split .rpb-split__text {
  order: -1;
  color: inherit;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rpb-split .rpb-split__image {
  width: 100%;
  aspect-ratio: 618 / 463;
  border-radius: var(--rie-radius-card);
  background-color: var(--rie-color-tint);
}

body .rpb-split .rpb-split__caption {
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-body);
  font-style: normal;
  line-height: var(--rie-lh-body);
}

body .rotary-home__section--brand .rpb-split .rpb-split__caption {
  color: var(--rie-color-white);
}

@media (min-width: 1025px) {
  body .rpb-split {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }

  body .rpb-split .rpb-split__text  { grid-row: 1; grid-column: 1 / span 5; order: 0; }
  body .rpb-split .rpb-split__media { grid-row: 1; grid-column: 7 / span 6; }

  body .rpb-split.rpb-split--left .rpb-split__media { grid-column: 1 / span 6; }
  body .rpb-split.rpb-split--left .rpb-split__text  { grid-column: 8 / span 5; }
}

/* Empty text column → image alone in the reading column, at 16:9 like a figure. */
body .rpb-split:has(> .rpb-split__text:empty) {
  display: block;
  max-width: var(--rie-measure);
}

body .rpb-split:has(> .rpb-split__text:empty) .rpb-split__image {
  aspect-ratio: 16 / 9;
}

body .rpb-split > .rpb-split__text:empty {
  display: none;
}


/* =============================================================================
   9. QUOTE  .rpb-quote → .rie-quote
   Mirrors: 40-sections §15. Tint panel, 4 px royal left rule, radius 0 16 16 0, padding 24;
   quote 24/36 600 (20/30 below 1025) in #323C44, not italic (Georgia italic goes);
   attribution 14/21 in #323C44: the brief's #717171 is only 4.3:1 on the tint panel
   (axe, /donate/), so name and role use the text colour. An optional portrait stays as a
   72 px circle.
   Delete when the page is rebuilt.
   ============================================================================= */

body .rpb-quote {
  display: block;
  width: 100%;
  max-width: var(--rie-measure);
  margin: var(--rie-stack-md) auto;
  padding: var(--rie-space-6);
  border: 0;
  border-left: 4px solid var(--rie-color-royal);
  border-radius: 0 var(--rie-radius-card) var(--rie-radius-card) 0;
  background-color: var(--rie-color-tint);
  color: var(--rie-color-text);
  text-align: left;
}

body .page-content > .rpb-quote {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  margin-block: var(--rie-stack-lg);
}

body .rpb-quote:not(.rpb-quote--no-portrait) {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: start;
  gap: var(--rie-space-6);
  justify-items: stretch;
}

body .rpb-quote .rpb-quote__portrait {
  width: 72px;
  height: 72px;
  margin: 0;
}

body .rpb-quote .rpb-quote__body {
  margin: 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h4);
  font-style: normal;
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
}

body .rpb-quote .rpb-quote__attr {
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
}

body .rpb-quote .rpb-quote__role {
  color: var(--rie-color-text);
  font-weight: inherit;
}


/* =============================================================================
   10. ACTION ROWS  .rpb-buttons, .rpb-btn, .rotary-home__centered → .rie-actions
   Mirrors: 40-sections §4. Centred row, 16 px gap, 32 px above; first button primary,
   the rest outline (section 2). Below 481 the pills stack full width (--block-mobile).
   Delete when the page is rebuilt.
   ============================================================================= */

body .rpb-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--rie-space-4);
  width: 100%;
  max-width: var(--rie-max);
  margin: var(--rie-space-8) auto 0;
}

body .page-content > .rpb-buttons {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
}

body .page-content > .rpb-buttons:last-child {
  margin-bottom: var(--rie-section-y);
}

/* "Browse all news → · RSS feed" under the news grid. */
body .rotary-home__section > .rrp + p {
  margin-top: var(--rie-space-8);
  text-align: center;
}

body .rotary-home__centered,
body .rotary-home__section > p:has(> .rotary-home__btn:only-child) {
  margin: var(--rie-space-8) auto 0;
  text-align: center;
}

/* Below 481 the pills stack full width (--block-mobile); a row from 481 up. */
body :is(.rpb-buttons, .rhh-poa__buttons) {
  flex-direction: column;
  align-items: stretch;
}

body :is(.rpb-buttons, .rhh-poa__buttons) > :is(a, button) {
  width: 100%;
}

@media (min-width: 481px) {
  body :is(.rpb-buttons, .rhh-poa__buttons) {
    flex-direction: row;
    align-items: center;
  }

  body :is(.rpb-buttons, .rhh-poa__buttons) > :is(a, button) {
    width: auto;
  }
}


/* =============================================================================
   11. CTA BAND  .rhh-poa → navy band + centred H2 + pale pills
   Mirrors: 40-sections §1–3 (.rie-section--navy + .rie-deco + .rie-section-head--center).
   H2 white 600, intro white, pale pill + white outline pill, BL disc / TR dotted ring.
   When it follows another navy band it turns into a tint band (two dark bands never touch):
   dark text, primary + outline pills. The charity disclosure's links go white (they were
   #17458F on navy, 1.44:1).
   .rotary-about__legal (after it on /about-us/) becomes a tint band with an 860 column.
   Delete when the pages are rebuilt (their closing section becomes a callout or CTA trio).
   ============================================================================= */

body .rhh-poa {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: var(--rie-section-y) var(--rie-gutter);
  background: var(--rie-color-navy);
  color: var(--rie-color-white);
  text-align: center;
}

/* Decorations reuse the legacy circles' pseudo-elements. */
body .rhh-poa::before,
body .rhh-poa::after {
  --rie-deco-s: 300px;
  content: "";
  position: absolute;
  z-index: -1;
  width: var(--rie-deco-s);
  height: var(--rie-deco-s);
  inset: auto;
  opacity: 1;
  pointer-events: none;
}

body .rhh-poa::before {
  bottom: calc(var(--rie-deco-s) / -2);
  left: calc(var(--rie-deco-s) / -2);
  border-radius: 50%;
  background: var(--rie-color-royal);
}

body .rhh-poa::after {
  top: calc(var(--rie-deco-s) / -2);
  right: calc(var(--rie-deco-s) / -2);
  border-radius: 0;
  background: var(--rie-color-azure);
  -webkit-mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
  mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
}

@media (min-width: 769px) {
  body .rhh-poa::before, body .rhh-poa::after { --rie-deco-s: 400px; }
}

@media (min-width: 1025px) {
  body .rhh-poa::before, body .rhh-poa::after { --rie-deco-s: 500px; }
}

body .rhh-poa .rhh-poa__inner {
  position: relative;
  z-index: 1;
  max-width: var(--rie-measure);
  margin: 0 auto;
}

body .rhh-poa .rhh-poa__title {
  margin: 0;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h2);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h2);
  letter-spacing: 0;
  text-wrap: balance;
}

body .rhh-poa .rhh-poa__sub {
  max-width: var(--rie-measure);
  margin: var(--rie-space-3) auto 0;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  opacity: 1;
}

body .rhh-poa .rhh-poa__buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rie-space-4);
  margin: var(--rie-space-6) 0 0;
}

/* Charity disclosure (/donate/): 14/21, links white and underlined (small legal text). */
@layer rie-legacy-important {
  body .rhh-poa .rhh-poa__disclosure {
    max-width: var(--rie-measure) !important;   /* beats style="max-width:640px" */
    margin-top: var(--rie-space-8) !important;  /* beats style="margin-top:24px" */
    font-size: var(--rie-fs-sm) !important;     /* beats style="font-size:13px" */
    line-height: var(--rie-lh-sm) !important;   /* beats style="line-height:1.55" */
    opacity: 1 !important;                      /* beats style="opacity:.85" */
  }
}

body .rhh-poa .rhh-poa__disclosure a {
  color: inherit;
  font-weight: var(--rie-fw-bold);
  text-decoration: underline;
}

/* After a navy band: tint band. Beats `.rhh-poa .rhh-poa__title { color: #fff !important }`
   and `.rhh-poa .rhh-poa__sub { color: #fff !important }` (rotary-home-modern). */
body .rotary-home__section--brand + .rhh-poa {
  background: var(--rie-color-tint);
  color: var(--rie-color-text);
}

/* Light-band decoration colours (disc white on tint, dots #AFE2E3), mirrored to BR disc /
   TL dots so the ring never lines up with the navy band's ring just above. */
body .rotary-home__section--brand + .rhh-poa::before {
  top: auto;
  right: calc(var(--rie-deco-s) / -2);
  bottom: calc(var(--rie-deco-s) / -2);
  left: auto;
  background: var(--rie-color-white);
}

body .rotary-home__section--brand + .rhh-poa::after {
  top: calc(var(--rie-deco-s) / -2);
  right: auto;
  bottom: auto;
  left: calc(var(--rie-deco-s) / -2);
  background: var(--rie-color-pale-hover);
}

@layer rie-legacy-important {
  body .rotary-home__section--brand + .rhh-poa :is(.rhh-poa__title, .rhh-poa__sub) {
    color: var(--rie-color-text) !important;
  }
}

.rotary-home__section--brand + .rhh-poa .rhh-poa__btn--primary {
  --rie-btn-bg: var(--rie-color-royal);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: transparent;
}
.rotary-home__section--brand + .rhh-poa .rhh-poa__btn--primary:hover  { --rie-btn-bg: var(--rie-color-azure); }
.rotary-home__section--brand + .rhh-poa .rhh-poa__btn--primary:active { --rie-btn-bg: var(--rie-color-active); }
.rotary-home__section--brand + .rhh-poa .rhh-poa__btn--secondary {
  --rie-btn-bg: var(--rie-color-white);
  --rie-btn-fg: var(--rie-color-royal);
  --rie-btn-bd: var(--rie-color-royal);
}
.rotary-home__section--brand + .rhh-poa .rhh-poa__btn--secondary:hover {
  --rie-btn-bg: var(--rie-color-azure);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-azure);
}
body .rotary-home__section--brand + .rhh-poa .rhh-poa__btn:focus-visible {
  --rie-btn-shadow: var(--rie-shadow-focus);
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
}

/* .rotary-about__legal: every declaration is a style="" attribute, hence !important. */
@layer rie-legacy-important {
  body .rotary-about__legal {
    padding: var(--rie-section-y) var(--rie-gutter) !important;  /* beats style="padding:56px clamp(…)" */
    background: var(--rie-color-tint) !important;                 /* beats style="background:#0e2e63" */
    color: var(--rie-color-text) !important;                      /* beats style="color:#ffffff" */
  }

  body .rotary-about__legal :is(p, strong, a) {
    color: inherit !important;                                    /* beats style="color:#ffffff" */
    opacity: 1 !important;                                        /* beats style="opacity:.95" */
  }

  body .rotary-about__legal p {
    font-size: var(--rie-fs-body) !important;                     /* beats style="font-size:15px" */
    line-height: var(--rie-lh-body) !important;                   /* beats style="line-height:1.7" */
  }

  body .rotary-about__legal a {
    color: var(--rie-color-royal) !important;
  }

  body .rotary-about__legal p:last-child {
    margin-bottom: 0 !important;                                  /* beats style="margin:0 0 14px" */
  }
}


/* =============================================================================
   12. STATS  .ris, .ris--brand, .rps, inline stat tiles → .rie-stats / .rie-stat
   Mirrors: 40-sections §11. Numbers in the Stat style (38/45 → 48/57 → 58/70, weight 400,
   lining figures): royal on light, gold on navy. Captions 16/28. Row centred, gaps
   24 / 32 / 64. No tiles, no Georgia old-style digits, no count-up needed.
   .rps photos are picsum.photos placeholders (decorative, aria-hidden): hidden.
   Delete when the page is rebuilt with Counter widgets.
   ============================================================================= */

body :is(.ris, .rps) {
  position: relative;
  isolation: isolate;
  width: 100%;
  margin: 0;
  padding: var(--rie-section-y) var(--rie-gutter);
  background-color: var(--rie-color-page);
  color: var(--rie-color-text);
}

body :is(.ris__inner, .rps__inner) {
  max-width: var(--rie-max);
  margin: 0 auto;
}

body :is(.ris__heading, .rps__heading) {
  max-width: var(--rie-measure);
  margin: 0 auto var(--rie-space-12);
  text-align: center;
}

body :is(.ris__grid, .rps__grid) {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rie-space-8) var(--rie-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

body :is(.ris__item, .rps__item) {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: 0;
  padding: 0;
  border-radius: 0;
  text-align: center;
}

/* Beats `.ris--brand .ris__num { color: #fff !important }`. */
@layer rie-legacy-important {
  body .ris--brand .ris__num {
    color: var(--rie-color-gold) !important;
  }
}

body :is(.ris__num, .rps__num) {
  display: block;
  color: var(--rie-color-royal);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-stat);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-stat);
  letter-spacing: 0;
  font-variant-numeric: lining-nums tabular-nums;
}

body :is(.ris__label, .rps__label) {
  display: block;
  margin-top: var(--rie-space-4);
  color: inherit;
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: calc(var(--rie-lh-body) + var(--rie-space-1));
}

body .rps .rps__photo {
  display: none;
}

@media (min-width: 769px) {
  body :is(.ris__grid, .rps__grid) { gap: var(--rie-space-8); }
  body :is(.ris__item, .rps__item) { width: calc(50% - var(--rie-space-8)); }
}

@media (min-width: 1025px) {
  body :is(.ris__heading, .rps__heading) { margin-bottom: calc(var(--rie-space-20) + var(--rie-space-3)); }
  body :is(.ris__grid, .rps__grid) { flex-wrap: nowrap; gap: var(--rie-space-16); }
  body :is(.ris__item, .rps__item) { width: auto; flex: 1 1 0; }
}

/* Navy variant (/ending-polio/): gold numbers on navy with the corner decorations. */
body .ris.ris--brand {
  overflow: hidden;
  background-color: var(--rie-color-navy);
  color: var(--rie-color-white);
}

/* ---- Inline stat tiles on /about-us/ and /clubs/ (style="" on every element) ----
   Grid of tiles with background:rgba(255,255,255,0.1) inside a navy band. */
@layer rie-legacy-important {
  body .rotary-home__section--brand div[style*="display:grid"]:has(> div[style*="rgba(255,255,255,0.1)"]) {
    max-width: var(--rie-max) !important;              /* beats style="max-width:980px" */
    gap: var(--rie-space-8) var(--rie-space-6) !important;  /* beats style="gap:18px" */
    grid-template-columns: minmax(0, 1fr) !important;  /* beats style="grid-template-columns:repeat(4,1fr)" */
  }

  body .rotary-home__section--brand div[style*="display:grid"] > div[style*="rgba(255,255,255,0.1)"] {
    padding: 0 !important;                             /* beats style="padding:28px 18px" */
    background: none !important;                       /* beats style="background:rgba(255,255,255,.1)" */
    border-radius: 0 !important;
  }

  body .rotary-home__section--brand div[style*="display:grid"] > div[style*="rgba(255,255,255,0.1)"] > div:first-child {
    margin: 0 0 var(--rie-space-4) !important;         /* beats style="margin-bottom:8px" */
    color: var(--rie-color-gold) !important;           /* gold on navy (5.41:1) */
    font-size: var(--rie-fs-stat) !important;          /* beats style="font-size:48px" */
    font-weight: var(--rie-fw-regular) !important;     /* beats style="font-weight:800" */
    line-height: var(--rie-lh-stat) !important;        /* beats style="line-height:1" */
    font-variant-numeric: lining-nums tabular-nums !important;
  }

  body .rotary-home__section--brand div[style*="display:grid"] > div[style*="rgba(255,255,255,0.1)"] > div:last-child {
    font-size: var(--rie-fs-body) !important;          /* beats style="font-size:13px" */
    line-height: calc(var(--rie-lh-body) + var(--rie-space-1)) !important;
    letter-spacing: 0 !important;                      /* beats style="letter-spacing:1.6px" */
    text-transform: none !important;                   /* beats style="text-transform:uppercase" */
    opacity: 1 !important;                             /* beats style="opacity:.85" */
  }
}

@media (min-width: 481px) {
  @layer rie-legacy-important {
    body .rotary-home__section--brand div[style*="display:grid"]:has(> div[style*="rgba(255,255,255,0.1)"]) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

@media (min-width: 1025px) {
  @layer rie-legacy-important {
    body .rotary-home__section--brand div[style*="display:grid"]:has(> div[style*="rgba(255,255,255,0.1)"]) {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
      gap: var(--rie-space-16) !important;
    }
  }
}


/* =============================================================================
   13. CARD FAMILY → .rie-card in .rie-grid
   Mirrors: 50-cards §1–4 and 40-sections §8. White, radius 16, shadow 0 4 8 /.1; hover:
   0 6 16 /.1, title underline, image zoom 1.15 over 300 ms (no lift, no ring, no border).
   Media 220 px tall. Body padding 16 / 24. Badge → title H5 18/27 600 (2 lines) → text
   16/24 (3 lines) → date 14/21 #717171 → CTA 16/24 700 royal ("Read more →").
   Grids: 1 / 2 / 3 columns, gap 20, boxed at 1296.
   Background-image media (spans/divs) zoom through a ::before that inherits the image.
   ============================================================================= */

/* ---- 13.1 Shared grid (delete a selector when its shortcode is gone) ---- */
:root body :is(.rrp, .rotary-home__cards, .rotary-hub__grid, .rrelated, .rprj__grid, .rotary-cd__list, .r404__grid) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: none;
  align-items: stretch;
  gap: var(--rie-gap);
  width: 100%;
  max-width: var(--rie-max);
  margin: 0 auto;
  padding: 0;
}

@media (min-width: 769px) {
  :root body :is(.rrp, .rotary-home__cards, .rotary-hub__grid, .rrelated, .rprj__grid, .rotary-cd__list, .r404__grid) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1025px) {
  :root body :is(.rrp, .rotary-home__cards, .rotary-hub__grid, .rrelated, .rprj__grid, .rotary-cd__list, .r404__grid) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Home magazine layouts: `body.home .rrp{grid-template-columns:2fr 1fr}` and
   `body.home .rotary-home__cards{grid-template-columns:2fr 1fr !important}` with a
   first card spanning 2 rows. */
@layer rie-legacy-important {
  body.home .rotary-home__cards {
    grid-template-rows: none !important;
  }

  body .rotary-home__cards > .rhc,
  body .rrp > .rrp__card {
    grid-row: auto !important;
  }
}

@media (min-width: 769px) {
  @layer rie-legacy-important {
    body.home .rotary-home__cards { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  }
}

@media (min-width: 1025px) {
  @layer rie-legacy-important {
    body.home .rotary-home__cards { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
  }
}

/* ---- 13.2 Link-card shell: .rrp__card, .rhc, .rotary-hub__card, .rrelated__card, .r404__card ---- */
:root body :is(.rrp__card, .rhc, .rotary-hub__card, .rrelated__card, .r404__card) {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
  text-align: left;
  text-decoration: none;
  transform: none;
  transition: box-shadow var(--rie-dur-base) var(--rie-ease);
}

:root body :is(.rrp__card, .rhc, .rotary-hub__card, .rrelated__card, .r404__card):is(:hover, :focus-visible) {
  color: var(--rie-color-text);
  box-shadow: var(--rie-shadow-card-hover);
  transform: none;
}

:root body :is(.rrp__card, .rhc, .rotary-hub__card, .rrelated__card, .r404__card):focus-visible {
  outline: 2px solid transparent;          /* forced colours; also beats rotary-hub's gold outline */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus), var(--rie-shadow-card-hover);
}

/* Media: 220 px, cover, zoom layer. */
:root body :is(.rrp__media, .rhc__media, .rrelated__media, .rotary-hub__card-img) {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: 220px;
  margin: 0;
  overflow: hidden;
  aspect-ratio: auto;
  border-radius: 0;
  background-color: var(--rie-color-tint);
  background-position: center;
  background-size: cover;
  object-fit: cover;
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

:root body :is(.rrp__media, .rhc__media, .rrelated__media)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: inherit;
  background-image: inherit;
  background-position: center;
  background-size: cover;
  transform: scale(1);
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

:root body :is(.rrp__card, .rhc, .rrelated__card):hover :is(.rrp__media, .rhc__media, .rrelated__media)::before,
:root body .rotary-hub__card:hover .rotary-hub__card-img {
  transform: scale(1.15);
}

/* The hub card's <img> zooms itself; clip it with the card. */
:root body .rotary-hub__card .rotary-hub__card-img {
  height: 220px;
}

/* Body: flex column, the last child pinned to the bottom. */
:root body :is(.rrp__body, .rhc__body, .rotary-hub__card-body, .rrelated__body) {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: 100%;
  padding: var(--rie-space-4);
}

@media (min-width: 769px) {
  :root body :is(.rrp__body, .rhc__body, .rotary-hub__card-body, .rrelated__body) {
    padding: var(--rie-space-6);
  }
}

/* Title: H5 18/27 600 #323C44, 2 lines; underline on hover. (Kit h3 is 28 px, 0,1,1;
   home-modern sets the first card's title to 24/28 px at 0,3,1.) */
:root body .page-content :is(.rrp__title, .rhc__title, .rotary-hub__card-body h3, .rrelated__title, .r404__card-title) {
  display: -webkit-box;
  width: 100%;
  margin: 0 0 var(--rie-space-2);
  overflow: hidden;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
  letter-spacing: 0;
  text-transform: none;
  text-underline-offset: 2px;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

/* Text: 16/24, 3 lines. */
:root body .page-content :is(.rrp__excerpt, .rhc__text, .rotary-hub__card-body p:not(.rotary-hub__card-cta), .rrelated__desc) {
  display: -webkit-box;
  width: 100%;
  margin: 0;
  overflow: hidden;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

/* Date / meta: 14/21 #717171, below the text (rotary.org order). */
:root body .page-content .rrp__date {
  order: 3;
  margin: var(--rie-space-2) 0 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
  letter-spacing: 0;
  text-transform: none;
}

:root body .page-content .rrp__title   { order: 1; }
:root body .page-content .rrp__excerpt { order: 2; }

/* CTA: .rie-card__cta (a span styled as the text button). Beats rotary-site-styles'
   `.rrp__card .rrp__cta, .rhc .rhc__cta { text-decoration: underline !important }` and
   rotary-hub's `.rotary-hub__card-cta { margin: 0 !important }`. */
@layer rie-legacy-important {
  body :is(.rrp__cta, .rhc__cta, .rotary-hub__card-cta, .rrelated__cta, .r404__card-cta) {
    margin: auto 0 0 !important;
    text-decoration: none !important;
  }

  body :is(.rrp__card, .rhc, .rotary-hub__card, .rrelated__card, .r404__card):hover
    :is(.rrp__title, .rhc__title, .rotary-hub__card-body h3, .rrelated__title, .r404__card-title) {
    text-decoration: underline !important;   /* beats `.rrp__card *:hover { text-decoration: none !important }` */
  }
}

:root body .page-content :is(.rrp__cta, .rhc__cta, .rotary-hub__card-cta, .rrelated__cta, .r404__card-cta) {
  order: 4;
  display: inline-flex;
  align-items: center;
  gap: var(--rie-space-2);
  padding: var(--rie-space-4) 0 0;
  color: var(--rie-color-royal);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  letter-spacing: 0;
  text-transform: none;
  transition: color var(--rie-dur-fast) var(--rie-ease);
}

:root body .page-content :is(.rrp__card, .rhc, .rotary-hub__card, .rrelated__card, .r404__card):hover
  :is(.rrp__cta, .rhc__cta, .rotary-hub__card-cta, .rrelated__cta, .r404__card-cta) {
  color: var(--rie-color-azure);
}

/* ---- 13.3 News cards .rrp: equal cards (home-modern made the first one bigger at 0,4,1:
   `body.home .rrp__card:first-child .rrp__title{font-size:24px}`, excerpt 15px, media 16/12);
   the pinned card loses its ring and gets the gold badge ---- */
:root body .page-content .rrp .rrp__card .rrp__title {
  font-size: var(--rie-fs-h5);
  line-height: var(--rie-lh-h5);
}

:root body .page-content .rrp .rrp__card .rrp__excerpt {
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

:root body .page-content .rrp .rrp__card .rrp__media {
  height: 220px;
  aspect-ratio: auto;
}
/* The pinned card's royal ring (`.rrp__card--pinned`, 0,1,0) already loses to the 13.2 shell
   (0,2,1), so rest, hover and focus come from 13.2; only the badge below is pinned-specific. */

/* .rie-badge--gold: #FFF7E8 / #915D00, 12/18, pill, over the image corner. */
:root body .page-content .rrp__pin {
  position: absolute;
  top: var(--rie-space-4);
  left: var(--rie-space-4);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-gold-tint);
  color: var(--rie-color-gold-text);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
  letter-spacing: 0;
  text-transform: none;
}

/* The empty-state box. */
:root body .rrp__empty {
  max-width: var(--rie-measure);
  padding: var(--rie-space-6);
  border: 0;
  border-radius: var(--rie-radius-panel);
  background: var(--rie-color-tint);
  color: var(--rie-color-text);
  text-align: left;
}

/* On a navy band the cards keep the 13.2 shadows (0,2,1 beats the legacy doubled shadow
   `.rotary-home__section--brand .rrp__card` 0,2,0), but focus is the dark-surface outline:
   a navy ring round a white card vanishes against the navy band. */
:root body .rotary-home__section--brand :is(.rrp__card, .rhc, .rotary-hub__card, .rrelated__card, .r404__card):focus-visible {
  outline: 2px solid var(--rie-color-white);
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-card-hover);
}

/* ---- 13.4 .rhc ("Many ways in", home): its eyebrow becomes a badge ---- */
:root body .page-content .rhc .rhc__eyebrow {
  display: inline-flex;
  margin: 0 0 var(--rie-space-2);
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
  letter-spacing: 0;
  text-transform: none;
}

@layer rie-legacy-important {
  body.home .rotary-home__cards > .rhc:nth-child(1) :is(.rhc__title, .rhc__text) {
    font-size: inherit !important;   /* the first card no longer gets 28 px / 16 px (0,4,1) */
  }
  body.home .rotary-home__cards > .rhc:nth-child(1) .rhc__body {
    padding: var(--rie-space-4) !important;  /* beats 32px 36px 36px at 0,4,1 */
  }
  body.home .rotary-home__cards > .rhc:nth-child(1) .rhc__media {
    aspect-ratio: auto !important;
  }
}

@media (min-width: 769px) {
  @layer rie-legacy-important {
    body.home .rotary-home__cards > .rhc:nth-child(1) .rhc__body { padding: var(--rie-space-6) !important; }
  }
}

:root body .page-content .rhc :is(.rhc__title) { font-size: var(--rie-fs-h5); }

/* ---- 13.5 .rrelated (project pages, "More projects"): the spans were inline, so title,
   text and CTA ran together as one underlined line (audit §9.12). ---- */
:root body .page-content :is(.rrelated__title, .rrelated__desc, .rrelated__cta, .rrelated__body, .rrelated__media) {
  display: block;
}

:root body .page-content .rrelated__body {
  display: flex;
}

:root body .page-content .rrelated__title,
:root body .page-content .rrelated__desc {
  display: -webkit-box;
}

:root body .page-content .rrelated__cta {
  display: inline-flex;
}

/* ---- 13.6 Inline card grids written into page content (about, projects, clubs,
   foundation): <div style="…display:grid…"><a style="…"><div style="aspect-ratio…">
   <div style="padding…"><h3 style=…><p style=…><p style=…>Read more →</p></div></a>…
   Every declaration on these is a style="" attribute (plus onmouseover handlers that
   write transform/box-shadow inline), hence the !important block.
   wpautop also left <p><a …></a><a …></a></p> cells between the cards — the
   "checkerboard" (audit §9.10): those cells are hidden. ---- */
body .rotary-home__section div[style*="display:grid"] > p:has(> a:empty),
body .rotary-home__section div[style*="display:grid"] > p:empty,
body .rotary-home__section div[style*="display:grid"] > a > p:empty {
  display: none;
}

@layer rie-legacy-important {
  body .rotary-home__section div[style*="display:grid"]:has(> a[href]) {
    max-width: var(--rie-max) !important;                         /* beats style="max-width:1200px" */
    gap: var(--rie-gap) !important;                               /* beats style="gap:24px" */
    grid-template-columns: minmax(0, 1fr) !important;             /* beats repeat(auto-fit,minmax(280px,1fr)) */
  }

  body .rotary-home__section div[style*="display:grid"] > a[href] {
    display: flex !important;                                     /* beats style="display:block" */
    flex-direction: column !important;
    border: 0 !important;                                         /* beats style="border:1px solid #e5e7eb" */
    border-radius: var(--rie-radius-card) !important;             /* beats style="border-radius:14px" */
    background: var(--rie-color-white) !important;
    box-shadow: var(--rie-shadow-card) !important;                /* beats the onmouseover inline shadow */
    color: var(--rie-color-text) !important;                      /* beats style="color:inherit" (white on navy) */
    transform: none !important;                                   /* beats the onmouseover translateY(-4px) */
    transition: box-shadow var(--rie-dur-base) var(--rie-ease) !important;
  }

  body .rotary-home__section div[style*="display:grid"] > a[href]:hover {
    box-shadow: var(--rie-shadow-card-hover) !important;
  }

  /* The card's own !important shadow would otherwise hide the global focus ring. */
  body .rotary-home__section div[style*="display:grid"] > a[href]:focus-visible {
    box-shadow: var(--rie-shadow-focus), var(--rie-shadow-card-hover) !important;
  }

  /* On a navy band (/projects/) the ring would vanish: the white outline below instead. */
  body .rotary-home__section--brand div[style*="display:grid"] > a[href]:focus-visible {
    box-shadow: var(--rie-shadow-card-hover) !important;
  }

  body .rotary-home__section div[style*="display:grid"] > a[href] > div[style*="aspect-ratio"] {
    aspect-ratio: auto !important;                                /* beats style="aspect-ratio:16/9" */
    height: 220px !important;
  }

  body .rotary-home__section div[style*="display:grid"] > a[href] > div[style*="padding"] {
    padding: var(--rie-space-4) !important;                       /* beats style="padding:22px 22px 24px" */
  }

  body .rotary-home__section div[style*="display:grid"] > a[href] h3 {
    margin: 0 0 var(--rie-space-2) !important;                    /* beats style="margin:0 0 8px" */
    font-size: var(--rie-fs-h5) !important;                       /* beats style="font-size:20px" */
    line-height: var(--rie-lh-h5) !important;
  }

  body .rotary-home__section div[style*="display:grid"] > a[href]:hover h3 {
    text-decoration: underline !important;
  }

  body .rotary-home__section div[style*="display:grid"] > a[href] > div > p:not(:last-child) {
    margin: 0 !important;                                         /* beats style="margin:0" (kept) */
    color: var(--rie-color-text) !important;                      /* beats style="color:#444" */
    font-size: var(--rie-fs-body) !important;                     /* beats style="font-size:15px" */
    line-height: var(--rie-lh-body) !important;                   /* beats style="line-height:1.5" */
  }

  body .rotary-home__section div[style*="display:grid"] > a[href] > div > p:last-child {
    margin: auto 0 0 !important;                                  /* beats style="margin:14px 0 0" */
    padding-top: var(--rie-space-4) !important;
    color: var(--rie-color-royal) !important;                     /* beats style="color:var(--rotary-blue)" */
    font-size: var(--rie-fs-body) !important;                     /* beats style="font-size:13px" */
    font-weight: var(--rie-fw-bold) !important;                   /* beats style="font-weight:600" */
    line-height: var(--rie-lh-body) !important;
    letter-spacing: 0 !important;                                 /* beats style="letter-spacing:.05em" */
    text-transform: none !important;                              /* beats style="text-transform:uppercase" */
  }

  body .rotary-home__section div[style*="display:grid"] > a[href]:hover > div > p:last-child {
    color: var(--rie-color-azure) !important;
  }
}

body .rotary-home__section div[style*="display:grid"] > a[href] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-width: 0;
  font-weight: var(--rie-fw-regular);
  text-decoration: none;
}

body .rotary-home__section div[style*="display:grid"] > a[href]:focus-visible {
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
}

body .rotary-home__section--brand div[style*="display:grid"] > a[href]:focus-visible {
  outline-color: var(--rie-color-white);
}

body .rotary-home__section div[style*="display:grid"] > a[href] > div[style*="aspect-ratio"] {
  position: relative;
  flex: none;
  overflow: hidden;
}

body .rotary-home__section div[style*="display:grid"] > a[href] > div[style*="aspect-ratio"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  transform: scale(1);
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

body .rotary-home__section div[style*="display:grid"] > a[href]:hover > div[style*="aspect-ratio"]::before {
  transform: scale(1.15);
}

body .rotary-home__section div[style*="display:grid"] > a[href] > div[style*="padding"] {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
}

body .rotary-home__section div[style*="display:grid"] > a[href] h3 {
  color: inherit;
  font-family: var(--rie-font);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-underline-offset: 2px;
}

body .rotary-home__section div[style*="display:grid"] > a[href] > div > p:not(:last-child) {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

@media (min-width: 769px) {
  @layer rie-legacy-important {
    body .rotary-home__section div[style*="display:grid"]:has(> a[href]) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    body .rotary-home__section div[style*="display:grid"] > a[href] > div[style*="padding"] {
      padding: var(--rie-space-6) !important;
    }
  }
}

@media (min-width: 1025px) {
  @layer rie-legacy-important {
    body .rotary-home__section div[style*="display:grid"]:has(> a[href]) {
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
  }
}

/* ---- 13.7 Inline tiles on light bands: the Four-Way Test (about) and the seven areas of
   focus (projects) — white cards, radius 16, shadow, no border; 1 / 2 / 4 columns. ---- */
@layer rie-legacy-important {
  body .rotary-home__section:not(.rotary-home__section--brand) div[style*="display:grid"]:not(:has(> a[href])) {
    max-width: var(--rie-max) !important;                         /* beats style="max-width:980px" */
    gap: var(--rie-gap) !important;                               /* beats style="gap:14px|18px" */
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body .rotary-home__section:not(.rotary-home__section--brand) div[style*="display:grid"] > div[style*="border:1px solid"] {
    padding: var(--rie-space-6) !important;                       /* beats style="padding:20px|28px 24px" */
    border: 0 !important;                                         /* beats style="border:1px solid #e5e7eb" */
    border-radius: var(--rie-radius-card) !important;             /* beats style="border-radius:12px|14px" */
    background: var(--rie-color-white) !important;
    box-shadow: var(--rie-shadow-card) !important;
    text-align: left !important;                                  /* beats style="text-align:center" */
  }

  /* Four-Way Test numerals: the Stat style in royal. */
  body .rotary-home__section div[style*="display:grid"] > div[style*="border:1px solid"] > div[style*="font-size:40px"] {
    margin: 0 0 var(--rie-space-2) !important;                    /* beats style="margin-bottom:14px" */
    color: var(--rie-color-royal) !important;
    font-size: var(--rie-fs-h2) !important;                       /* beats style="font-size:40px" */
    font-weight: var(--rie-fw-regular) !important;                /* beats style="font-weight:800" */
    line-height: var(--rie-lh-h2) !important;
  }

  body .rotary-home__section div[style*="display:grid"] > div[style*="border:1px solid"] > h3 {
    margin: 0 !important;                                         /* beats style="margin:0 0 8px" */
    font-size: var(--rie-fs-h5) !important;                       /* beats style="font-size:20px" */
    line-height: var(--rie-lh-h5) !important;
  }
}

body .rotary-home__section div[style*="display:grid"] > div[style*="border:1px solid"] {
  color: var(--rie-color-text);
}

body .rotary-home__section div[style*="display:grid"] > div[style*="border:1px solid"] > h3 {
  color: inherit;
  font-family: var(--rie-font);
  font-weight: var(--rie-fw-semibold);
}

body .rotary-home__section div[style*="display:grid"] > div[style*="border:1px solid"] > strong {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
}

@media (min-width: 481px) {
  @layer rie-legacy-important {
    body .rotary-home__section:not(.rotary-home__section--brand) div[style*="display:grid"]:not(:has(> a[href])) {
      grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
  }
}

@media (min-width: 1025px) {
  @layer rie-legacy-important {
    body .rotary-home__section:not(.rotary-home__section--brand) div[style*="display:grid"]:not(:has(> a[href])) {
      grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    }
  }
}

/* ---- 13.8 .rprj (projects, "What else clubs are doing"): text cards, not links.
   Fixes the white-on-white body text (`.rotary-home__section--brand p` 0,1,1 beat
   `.rprj__body` 0,1,0) and the gold-on-white stat labels and CTAs. ---- */
body .rprj .rprj__group {
  margin: 0 0 var(--rie-space-12);
}

body .rprj .rprj__group:last-child {
  margin-bottom: 0;
}

body .rprj .rprj__group-heading {
  margin: 0;
  color: inherit;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h3);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h3);
  text-align: center;
}

body .rprj .rprj__group-sub {
  max-width: var(--rie-measure);
  margin: var(--rie-space-3) auto var(--rie-space-8);
  color: inherit;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  text-align: center;
}

body .rprj .rprj__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  padding: var(--rie-space-4);
  border: 0;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  color: var(--rie-color-text);
  text-align: left;
  transform: none;
}

body .rprj .rprj__card:hover {
  border-color: transparent;
  box-shadow: var(--rie-shadow-card);
  transform: none;
}

/* Stat → .rie-badge (tint / navy-deep). */
body .rprj .rprj__stat {
  display: inline-flex;
  margin: 0 0 var(--rie-space-2);
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
  letter-spacing: 0;
  text-transform: none;
}

body .rprj .rprj__title {
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

body .rprj .rprj__subtitle {
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
}

body .rotary-home__section .rprj .rprj__body {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

/* 0,5,2: beats the navy band's gold link rule (0,5,1). */
:root body .rotary-home__section .rprj .rprj__card a.rprj__cta {
  margin-top: auto;
  padding-top: var(--rie-space-4);
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  text-decoration: none;
}

:root body .rotary-home__section .rprj .rprj__card a.rprj__cta:hover {
  color: var(--rie-color-azure);
  text-decoration: underline;
}

@media (min-width: 769px) {
  body .rprj .rprj__card { padding: var(--rie-space-6); }
}

/* ---- 13.9 .rwwd (home, "Seven areas of focus"): white cards with the 56 px tint icon
   circle of .rie-steps; one card style (no alternate grey); 1 / 2 / 4 columns. ---- */
:root body .rwwd .rwwd__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-gap);
  max-width: var(--rie-max);
  margin: 0 auto;
}

@media (min-width: 769px) {
  :root body .rwwd .rwwd__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1025px) {
  :root body .rwwd .rwwd__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body .rwwd .rwwd__card {
  gap: var(--rie-space-4);
  padding: var(--rie-space-6);
  border: 0;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  color: var(--rie-color-text);
  transform: none;
}

body .rwwd .rwwd__card:hover {
  border-color: transparent;
  box-shadow: var(--rie-shadow-card);
  transform: none;
}

body .rwwd .rwwd__icon-wrap {
  width: 56px;
  height: 56px;
  background: var(--rie-color-tint);
  color: var(--rie-color-royal);
}

body .rwwd .rwwd__icon-wrap svg {
  width: 24px;
  height: 24px;
}

body .rwwd h3.rwwd__title {
  margin: 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

body .rwwd .rwwd__title .rwwd__num {
  margin-right: var(--rie-space-2);
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-semibold);
}

body .rwwd .rwwd__body {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}


/* =============================================================================
   14. FAQ  .rfaq → .rie-accordion
   Mirrors: 40-sections §17. Max 860, white, 1 px Silver dividers + a final bottom border;
   trigger 16/24 700 #323C44, min-height 64, padding 16 / 20 16, chevron right (180° open),
   hover #EAFAFF; panel 0 16 20. The gold 01–06 counters, gold side bar, lift and
   rounded boxes go. Delete when the FAQs move to Nested Accordions (/faq/, T-JOIN).
   ============================================================================= */

body .rfaq .rfaq__list {
  display: block;
  max-width: var(--rie-measure);
  margin: 0 auto;
  background: var(--rie-color-white);
}

body .rfaq .rfaq__item {
  margin: 0;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}

body .rfaq .rfaq__item + .rfaq__item {
  border-top: 1px solid var(--rie-color-line);
}

body .rfaq .rfaq__item:last-child {
  border-bottom: 1px solid var(--rie-color-line);
}

body .rfaq .rfaq__item:hover,
body .rfaq .rfaq__item[open] {
  border-color: var(--rie-color-line);
  box-shadow: none;
  transform: none;
}

body .rfaq .rfaq__item::before,
body .rfaq .rfaq__q::before {
  content: none;
  display: none;
}

body .rfaq .rfaq__q {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rie-space-4);
  min-height: 64px;
  margin: 0;
  padding: var(--rie-space-4);
  border-radius: 0;
  background: transparent;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  transition: background-color var(--rie-dur-fast) var(--rie-ease);
}

body .rfaq .rfaq__q:hover {
  background: var(--rie-color-hover-tint);
}

body .rfaq .rfaq__q:focus-visible {
  z-index: 1;
  outline: 2px solid transparent;          /* forced colours; replaces the legacy gold outline */
  outline-offset: 2px;
  border-radius: 0;
  box-shadow: var(--rie-shadow-focus);
}

body .rfaq .rfaq__chevron,
body .rfaq .rfaq__item[open] .rfaq__chevron {
  width: 24px;
  height: 24px;
  color: var(--rie-color-text);
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

body .rfaq .rfaq__a-inner {
  padding: 0 var(--rie-space-4) var(--rie-space-5);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rfaq .rfaq__a-inner p {
  margin: 0 0 var(--rie-space-3);
}

body .rfaq .rfaq__a-inner p:last-child {
  margin: 0;
}

body .rfaq .rfaq__a-inner strong {
  color: inherit;
}

body .rfaq details.rfaq__item > .rfaq__a {
  transition: grid-template-rows var(--rie-dur-slow) var(--rie-ease);
}

@media (min-width: 769px) {
  body .rfaq .rfaq__q {
    gap: var(--rie-space-6);
    padding: var(--rie-space-5) var(--rie-space-4);
  }
}


/* =============================================================================
   15. TIMELINE  .rtl → .rie-gallery look
   Mirrors: 40-sections §19 (gallery arrows) + 50-cards (cards). Milestones become standard
   cards (radius 16, shadow) with the year in white over a black-to-clear gradient;
   the arrows are 48 px white discs with a royal glyph and the card shadow (Hello pink and
   the gold discs go), placed under the track, 24 px apart. Missing photos show the tint.
   Delete when /foundation/ is rebuilt (Image Carousel + .rie-gallery).
   ============================================================================= */

body .rtl {
  width: 100%;
  padding: var(--rie-section-y) var(--rie-gutter);
  background: var(--rie-color-page);
  color: var(--rie-color-text);
}

body .rtl .rtl__inner {
  max-width: var(--rie-max);
}

body .rtl .rtl__heading {
  max-width: var(--rie-measure);
  margin: 0 auto var(--rie-head-gap);
}

body .rtl .rtl__viewport {
  padding-bottom: 0;
}

body .rtl .rtl__track {
  gap: var(--rie-gap);
  padding: var(--rie-space-2) var(--rie-space-1) var(--rie-space-6);
  scrollbar-color: var(--rie-color-line) transparent;
}

body .rtl .rtl__track::-webkit-scrollbar-thumb {
  background: var(--rie-color-line);
}

body .rtl .rtl__item {
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  transform: none;
}

body .rtl .rtl__item:hover {
  box-shadow: var(--rie-shadow-card);
  transform: none;
}

body .rtl .rtl__media {
  height: 220px;
  aspect-ratio: auto;
  background-color: var(--rie-color-tint);
}

body .rtl .rtl__media::after {
  background: linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, 0) 60%);
}

body .rtl .rtl__year {
  left: var(--rie-space-4);
  bottom: var(--rie-space-3);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h3);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h3);
  letter-spacing: 0;
  text-shadow: none;
}

body .rtl .rtl__body {
  gap: var(--rie-space-2);
  padding: var(--rie-space-4);
}

body .rtl h3.rtl__item-title {
  margin: 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

body .rtl .rtl__desc {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

/* Arrows: .rie-icon-btn--filled, under the track from 769 up (swipe below that).
   0,3,1 beats Hello's pink button:hover/focus. */
body .rtl .rtl__nav {
  display: none;
  top: auto;
  bottom: 0;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-white);
  color: var(--rie-color-royal);
  box-shadow: var(--rie-shadow-card);
  transform: none;
}

body .rtl .rtl__nav.rtl__nav--prev { left: calc(50% - 48px - var(--rie-space-3)); right: auto; }
body .rtl .rtl__nav.rtl__nav--next { right: calc(50% - 48px - var(--rie-space-3)); left: auto; }

body .rtl .rtl__nav:is(:hover, :focus) {
  background: var(--rie-color-azure);
  color: var(--rie-color-white);
  transform: none;
}

body .rtl .rtl__nav:focus-visible {
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

body .rtl .rtl__nav svg {
  width: 24px;
  height: 24px;
}

body .rtl .rtl__hint {
  margin-top: var(--rie-space-4);
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

@media (min-width: 769px) {
  body .rtl .rtl__body { padding: var(--rie-space-6); }
  body .rtl .rtl__viewport { padding-bottom: calc(48px + var(--rie-space-8)); }
  body .rtl .rtl__nav { display: grid; }
}


/* =============================================================================
   16. NEWSLETTER  .rotary-newsletter (--compact / --panel) → form on a white panel
   Mirrors: brief §4.2 form skin + §4.7 Gravity Forms. Forms only ever sit on light
   panels (the helper text was 1.09–1.27:1 on the blue and pale panels, audit §9.23):
   white panel, radius 16, padding 24 / 32, card shadow, max 860; labels 16/24 600,
   help 14/21 #717171, inputs 56 px, 1 px #717171, radius 8; submit = primary pill.
   Delete when the newsletter form moves to the footer / News landing (phase 3 and 6).
   ============================================================================= */

:root body :is(.rotary-home__section, .rotary-home__section--brand, .page-content) .rotary-newsletter:is(.rotary-newsletter--compact, .rotary-newsletter--panel) {
  display: block;
  max-width: var(--rie-measure);
  margin: var(--rie-space-8) auto;
  padding: var(--rie-space-6);
  overflow: visible;
  border: 0;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  color: var(--rie-color-text);
}

:root body .rotary-newsletter.rotary-newsletter--panel::before,
:root body .rotary-newsletter.rotary-newsletter--panel::after {
  content: none;
  display: none;
}

:root body .rotary-home__section > .rotary-newsletter:first-child,
:root body .rotary-home__section-heading + .rotary-newsletter {
  margin-top: 0;
}

:root body .rotary-newsletter :is(.rotary-newsletter__title) {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h4);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
}

:root body .rotary-newsletter .rotary-newsletter__sub {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  opacity: 1;
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter .gfield_label,
:root body .rotary-newsletter .rotary-newsletter__form .gfield_label {
  margin-bottom: var(--rie-space-2);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-body);
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter :is(.gfield_description, .gfield_consent_description, .gfield_consent_label, .gfield_consent label, .ginput_container_consent label, .gform-field-label, .gfield_required) {
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter :is(.gfield_description, .gfield_consent_description, .gform-field-label--type-sub) {
  color: var(--rie-color-muted);
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter .rotary-newsletter__form :is(.gfield_description, .gfield_consent_description) a[href] {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter :is(input[type="text"], input[type="email"]) {
  height: 56px;
  padding: var(--rie-space-4);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  background: var(--rie-color-white);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  box-shadow: none;
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter :is(input[type="text"], input[type="email"])::placeholder {
  color: var(--rie-color-muted);
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter :is(input[type="text"], input[type="email"]):hover {
  border-color: var(--rie-color-azure);
}

:root body :is(.rotary-home__section, .rotary-home__section--brand) .rotary-newsletter :is(input[type="text"], input[type="email"]):focus {
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);   /* navy ring, 10.75:1 (the 50 % azure halo was ~2:1) */
}

:root body .rotary-newsletter .rotary-newsletter__form .gform_footer {
  margin-top: var(--rie-space-6);
  padding: 0;
}

@media (min-width: 769px) {
  :root body :is(.rotary-home__section, .rotary-home__section--brand, .page-content) .rotary-newsletter:is(.rotary-newsletter--compact, .rotary-newsletter--panel) {
    padding: var(--rie-space-8);
  }
}

/* Gravity Forms prints form 5's colours as per-form variables on an ID selector
   (#gform_wrapper_5[data-form-index="0"].gform-theme { --gf-color-primary: #204ce5 … }).
   Until the gform_default_styles filter ships (inc/gravityforms.php), re-point them here
   for the newsletter only; the brief allows !important for GF per-form variables. */
@layer rie-legacy-important {
  body .rotary-newsletter .gform-theme {
    --gf-color-primary: var(--rie-color-royal) !important;          /* beats #204ce5 on the ID rule */
    --gf-color-primary-rgb: 23, 69, 143 !important;
    --gf-color-primary-darker: var(--rie-color-azure) !important;
    --gf-color-primary-lighter: var(--rie-color-azure) !important;
    --gf-color-in-ctrl-primary: var(--rie-color-royal) !important;
    --gf-color-in-ctrl-primary-rgb: 23, 69, 143 !important;
    --gf-color-in-ctrl-dark: var(--rie-color-muted) !important;
    --gf-color-out-ctrl-dark: var(--rie-color-muted) !important;
    --gf-radius: var(--rie-radius-input) !important;                 /* beats 3px */
    --gf-ctrl-border-color: var(--rie-color-muted) !important;
  }
}


/* =============================================================================
   17. CLUB FINDER  .rfc → .rie-finder
   Mirrors: 70-district §5. No boxed blue panel any more (home: a light band that shares
   its gap with the map band above; /clubs/: it sits in its light band): search box as .rie-search (56 px, 1 px #717171, radius 8,
   azure border + 2 px navy ring on focus) → count 14/21 → rows in link-list style (18/27 600 name + 14/21
   #717171 town, 1 px rules, royal arrow — not gold) → primary pill "Browse all clubs".
   Delete when Home and /clubs/ are rebuilt (the shortcode stays; restyle moves to .rie-finder).
   ============================================================================= */

body section.rfc {
  width: 100%;
  padding: var(--rie-section-y) var(--rie-gutter);
  background: var(--rie-color-page);
  color: var(--rie-color-text);
}

body .rotary-home__section section.rfc {
  padding: 0;
  background: none;
}

body .rfc .rfc__inner {
  max-width: var(--rie-measure);
  margin: 0 auto;
}

body .rfc .rfc__heading {
  margin: 0 0 var(--rie-head-gap);
  text-align: center;
}

/* On /clubs/ the finder sits under the band's own head ("Find a club by name or town"),
   so its second H2 ("Where do you live?") is a duplicate. The input keeps its hidden label. */
body .rotary-home__section:has(> .rotary-home__section-heading) .rfc .rfc__heading {
  display: none;
}

body .rfc .rfc__field {
  display: flex;
  align-items: center;
  gap: var(--rie-space-3);
  height: 56px;
  padding: 0 var(--rie-space-4);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  background: var(--rie-color-white);
  box-shadow: none;
  transition: border-color var(--rie-dur-fast) var(--rie-ease), box-shadow var(--rie-dur-fast) var(--rie-ease);
}

body .rfc .rfc__field:hover {
  border-color: var(--rie-color-azure);
}

body .rfc .rfc__field:focus-within {
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);   /* navy ring, 10.75:1 (the 50 % azure halo was ~2:1) */
}

body .rfc .rfc__icon {
  width: 24px;
  height: 24px;
  color: var(--rie-color-royal);
}

/* Hello's reset gives input[type=search] its own 1px #666 box (0,1,1): the box is the field. */
body .rfc .rfc__input {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rfc .rfc__input:focus-visible {
  outline: none;                           /* the ring and its outline are on .rfc__field */
  box-shadow: none;
}

body .rfc .rfc__input::placeholder {
  color: var(--rie-color-muted);
}

body .rfc .rfc__counter {
  margin: var(--rie-space-4) 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
  text-align: left;
}

body .rfc .rfc__list {
  display: block;
  gap: 0;
  border-top: 1px solid var(--rie-color-line);
}

body .rfc .rfc__item {
  margin: 0;
}

:root body .rfc .rfc__link {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas: none;
  align-items: center;
  column-gap: var(--rie-space-4);
  row-gap: 0;
  padding: var(--rie-space-4) var(--rie-space-2) var(--rie-space-4) 0;
  border: 0;
  border-bottom: 1px solid var(--rie-color-line);
  border-radius: 0;
  background: none;
  box-shadow: none;
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-regular);
  transform: none;
  transition: color var(--rie-dur-fast) var(--rie-ease);
}

:root body .rfc .rfc__link:hover {
  color: var(--rie-color-azure);
  box-shadow: none;
  transform: none;
}

:root body .rfc .rfc__link:focus-visible {
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  border-radius: var(--rie-radius-sm);
  box-shadow: var(--rie-shadow-focus);
}

:root body .rfc .rfc__club-name {
  grid-area: auto;
  grid-column: 1;
  color: inherit;
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

:root body .rfc .rfc__link:hover .rfc__club-name {
  text-decoration: underline;
}

:root body .rfc .rfc__club-loc {
  grid-area: auto;
  grid-column: 1;
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

:root body .rfc .rfc__cta {
  grid-area: auto;
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--rie-color-royal);
  font-size: 20px;
  font-weight: var(--rie-fw-bold);
  line-height: 1;
  transition: transform var(--rie-dur-slow) var(--rie-ease), color var(--rie-dur-fast) var(--rie-ease);
}

:root body .rfc .rfc__link:hover .rfc__cta {
  color: var(--rie-color-azure);
  transform: translateX(4px);
}

body .rfc .rfc__empty {
  margin: var(--rie-space-4) 0 0;
  padding: var(--rie-space-6);
  border: 0;
  border-radius: var(--rie-radius-panel);
  background: var(--rie-color-tint);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  text-align: left;
}

body .rfc .rfc__footer {
  margin: var(--rie-space-8) 0 0;
  text-align: center;
}


/* =============================================================================
   18. CLUB DIRECTORY  .rotary-cd → .rie-directory + .rie-card--club
   Mirrors: 70-district §6 + 50-cards (.rie-card--club). Filters 56 px, radius 8, labels
   14/21 600 (no caps); count 14/21 #717171; compact club cards (~150–190 px): jurisdiction
   badge → H5 name → meeting 14/21 #717171 → "Visit club →". No legacy-wheel monogram
   tile (brand rule), no excerpt (it showed a literal "&hellip;"), no blue/gold stripe.
   66 cards drop from 13,186 px to about a quarter of that.
   Delete when /clubs/ is rebuilt (the shortcode stays; its markup moves to .rie-card--club).
   ============================================================================= */

body .rotary-cd .rotary-cd__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-space-3);
  margin: 0 0 var(--rie-space-4);
}

body .rotary-cd .rotary-cd__filters label {
  display: block;
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-sm);
  letter-spacing: 0;
  text-transform: none;
}

body .rotary-cd .rotary-cd__filters :is(input, select) {
  width: 100%;
  height: 56px;
  padding: 0 var(--rie-space-4);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  background-color: var(--rie-color-white);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rotary-cd .rotary-cd__filters :is(input, select):hover {
  border-color: var(--rie-color-azure);
}

body .rotary-cd .rotary-cd__filters :is(input, select):focus {
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);   /* navy ring, 10.75:1 (the 50 % azure halo was ~2:1) */
}

body .rotary-cd .rotary-cd__count {
  margin: 0 0 var(--rie-space-4);
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

body .rotary-cd .rotary-cd__card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 0;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  transform: none;
  transition: box-shadow var(--rie-dur-base) var(--rie-ease);
}

body .rotary-cd .rotary-cd__card:hover {
  box-shadow: var(--rie-shadow-card-hover);
  transform: none;
}

body .rotary-cd .rotary-cd__card::before {
  content: none;
  display: none;
}

body .rotary-cd .rotary-cd__monogram,
body .rotary-cd .rotary-cd__thumb,
body .rotary-cd .rotary-cd__excerpt {
  display: none;
}

body .rotary-cd .rotary-cd__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  padding: var(--rie-space-4);
}

/* Jurisdiction → .rie-badge */
body .rotary-cd .rotary-cd__area {
  display: inline-flex;
  margin: 0 0 var(--rie-space-2);
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
  letter-spacing: 0;
  text-transform: none;
}

body .rotary-cd h3.rotary-cd__title {
  margin: 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

body .rotary-cd .rotary-cd__title a {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

body .rotary-cd .rotary-cd__card:hover .rotary-cd__title a {
  text-decoration: underline;
}

body .rotary-cd .rotary-cd__meta {
  margin: var(--rie-space-1) 0 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

/* "Visit club →" = .rie-btn--text (the navy pill goes). */
body .rotary-cd a.rotary-cd__cta {
  margin-top: auto;
  padding: var(--rie-space-4) 0 0;
  border-radius: 0;
  background: none;
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  text-decoration: none;
  transform: none;
}

body .rotary-cd a.rotary-cd__cta:hover {
  background: none;
  color: var(--rie-color-azure);
  text-decoration: underline;
  transform: none;
}

body .rotary-cd .rotary-cd__empty-state {
  padding: var(--rie-space-6);
  border: 0;
  border-radius: var(--rie-radius-panel);
  background: var(--rie-color-tint);
  color: var(--rie-color-text);
  text-align: left;
}

@media (min-width: 769px) {
  body .rotary-cd .rotary-cd__filters { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--rie-space-4); }
  body .rotary-cd .rotary-cd__filters > :first-child { grid-column: 1 / -1; }
  body .rotary-cd .rotary-cd__body { padding: var(--rie-space-6); }
}

@media (min-width: 1025px) {
  body .rotary-cd .rotary-cd__filters { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: var(--rie-space-5); }
  body .rotary-cd .rotary-cd__filters > :first-child { grid-column: auto; }
}


/* =============================================================================
   19. CLUB MAP  .rotary-cm → .rie-map
   Mirrors: 70-district §7 (the Leaflet skin there already reaches .rotary-cm).
   Frame: radius 16, 1 px Silver, no ring shadow, 4:5 below 769 and 16:9 from 769 (the
   shortcode printed a 1200 px tall map). Inside a navy band the legacy rule turned the
   zoom buttons and attribution links gold (0,5,1); these are 0,6,2.
   Delete when /clubs/ and Home are rebuilt.
   ============================================================================= */

body .rotary-cm .rotary-cm__map {
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border: 1px solid var(--rie-color-line);
  border-radius: var(--rie-radius-card);
  box-shadow: none;
}

/* The shortcode writes the height into style="" (height: 1200px). With the height free,
   aspect-ratio sizes the box; the CSS is in <head>, so Leaflet measures the new size when
   it starts, and its resize handler keeps it in step. */
@layer rie-legacy-important {
  body .rotary-cm .rotary-cm__map {
    height: auto !important;   /* beats style="height: 1200px" */
  }
}

@media (min-width: 769px) {
  body .rotary-cm .rotary-cm__map {
    aspect-ratio: 16 / 9;
  }
}

/* The map is focusable (tabindex="0"; arrow keys pan it). `box-shadow: none` above
   (0,2,1) also removed the global ring, so restate it. */
body .rotary-cm .rotary-cm__map:focus-visible {
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

/* On a navy band (/clubs/) the ring sits on navy: white outline instead (0,4,1). */
body .rotary-home__section--brand .rotary-cm .rotary-cm__map:focus-visible {
  outline-color: var(--rie-color-white);
  box-shadow: none;
}

body .rotary-cm .rotary-cm__empty {
  padding: var(--rie-space-6);
  border: 0;
  border-radius: var(--rie-radius-panel);
  background: var(--rie-color-tint);
  color: var(--rie-color-text);
}

:root body .rotary-home__section .rotary-cm .leaflet-container .leaflet-control-attribution a[href],
:root body .rotary-home__section .rotary-cm .leaflet-container .leaflet-popup-content a[href] {
  color: var(--rie-color-royal);
}

:root body .rotary-home__section .rotary-cm .leaflet-container .leaflet-bar a[href],
:root body .rotary-home__section .rotary-cm .leaflet-container .leaflet-bar a[role="button"] {
  color: var(--rie-color-royal);
  text-decoration: none;
}

:root body .rotary-home__section .rotary-cm .leaflet-container a[href]:hover {
  color: var(--rie-color-azure);
}


/* =============================================================================
   20. APPEAL BAR  .rar → .rie-appeal
   Mirrors: 20-chrome §2 (.rie-appeal). Royal #17458F, min-height 44, padding 10 × gutter,
   centred row, gap 4 × 16: title 14/21 700 white · figures 14/21 700 gold (4.63:1) · small
   white pill "Donate now" (14/21 700, 6 × 16, royal text; hover #EAFAFF, pressed #D9EAF7).
   ≤480 two lines (title, then figures + pill). The title now stays at every width: the
   legacy ≤360 rule hid it, leaving figures with no appeal name. The "→" typed into the
   CTA text stays (CSS cannot remove one character); drop it in the snippet.
   Keep until the appeal markup at wp_body_open is given the .rie-appeal classes.
   ============================================================================= */

body .rar {
  background: var(--rie-color-royal);
}

/* Not on the appeal page itself: its hero already shows the total and the donate buttons, and the
   ribbon's "Donate now" would link to the page the visitor is on. The page is recognised by the
   campaign block the [rcb] shortcode prints. */
body:has(.rcb-hero) .rar {
  display: none;
}

body .rar .rar__link {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rie-space-1) var(--rie-space-4);
  max-width: var(--rie-max);
  min-height: 44px;
  margin: 0 auto;
  padding: 10px var(--rie-gutter);
  color: var(--rie-color-white);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-sm);
  text-align: center;
  text-decoration: none;
}

body .rar .rar__link:is(:hover, :active, :visited) {
  color: var(--rie-color-white);
}

/* display: beats the legacy `@media (max-width: 360px) { .rar__title { display: none } }`. */
body .rar .rar__title {
  display: inline;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-bold);
}

body .rar .rar__figures {
  color: var(--rie-color-gold);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-bold);
  font-variant-numeric: tabular-nums;
}

body .rar .rar__cta {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 6px var(--rie-space-4);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-white);
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-sm);
  transition: background-color var(--rie-dur-base) var(--rie-ease);
}

body .rar .rar__link:hover .rar__cta {
  background: var(--rie-color-hover-tint);
  text-decoration: none;
}

body .rar .rar__link:active .rar__cta {
  background: var(--rie-color-tint-press);
}

body .rar .rar__link:focus-visible {
  outline: 2px solid var(--rie-color-white);
  outline-offset: -4px;
  box-shadow: none;
}

/* Two lines below 481 (title, then figures + pill); one row from 481 up. */
body .rar .rar__title {
  flex-basis: 100%;
}

@media (min-width: 481px) {
  body .rar .rar__title {
    flex-basis: auto;
  }
}


/* =============================================================================
   21. APPEAL PAGE  .rcb-* → .rie-appeal-hero, .rie-progress, .rie-impact, .rie-highlight,
   .rie-card--info, .rie-bank  (/nepal-flood-response/, T-APPEAL)
   Mirrors: 70-district §1–4, 40-sections §14, 50-cards (info card). Reordered in CSS:
   hero → situation + impact → where the money goes (azure highlight) → how to give
   (individual first, then club). Archivo and the off-palette navies/golds go.
   Beats rotary-cb-inline-css (`.rcb-h2 { color: #1C3C80 !important }`,
   `.rcb-hero__title { color: #fff !important }`, `.rcb-btn { font-family … !important }`).
   Keep while the [rcb] shortcode renders the appeal (it is reskinned, not rebuilt, §6.6);
   rename the classes to .rie-appeal-hero etc. in the rcb PHP and delete this section then.
   ============================================================================= */

body .page-content > .rcb {
  display: flex;
  flex-direction: column;
  gap: var(--rie-stack-lg);
  width: min(var(--rie-max), 100% - 2 * var(--rie-gutter));
  max-width: none;
  margin: var(--rie-space-6) auto var(--rie-section-y);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
}

body .rcb > .rcb-hero      { order: 0; }
body .rcb > .rcb-two-col   { order: 1; }
body .rcb > .rcb-callout   { order: 2; }
body .rcb > .rcb-give      { order: 3; }

/* Eyebrows are removed, except the hero's, which becomes the gold badge. */
body .rcb .rcb-eyebrow {
  display: none;
}

@layer rie-legacy-important {
  body .rcb :is(.rcb-h2, .rcb-h3, .rcb-hero__title) {
    color: inherit !important;                 /* beats .rcb-h2 #1C3C80 and .rcb-hero__title #fff !important */
  }
}

body .rcb :is(.rcb-h2, .rcb-h3, .rcb-hero__title, .rcb-hero__amount, .rcb-hero__of, .rcb-impact__amount, .rcb-steps__n, .rcb-account__head span, .rcb-callout__icon) {
  font-family: var(--rie-font);
  letter-spacing: 0;
}

/* ---- 21.1 Hero (.rie-appeal-hero). ≤768: photo 16:9 on top (drawn by ::before from the
   inline background-image), text on the light page: H1 #323C44, figure royal 38/45 600,
   tint track + royal fill, primary + outline pills. ---- */
body .rcb .rcb-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 0 0;
  box-shadow: none;
  color: var(--rie-color-text);
  text-shadow: none;
}

body .rcb .rcb-hero::before {
  content: "";
  display: block;
  width: 100%;
  margin: 0 0 var(--rie-space-4);
  aspect-ratio: 16 / 9;
  border-radius: var(--rie-radius-card);
  background-color: var(--rie-color-tint);
  background-image: inherit;
  background-position: center 35%;
  background-repeat: no-repeat;
  background-size: cover;
}

body .rcb .rcb-hero__left {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  max-width: 640px;
}

body .rcb .rcb-hero__title-block {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
}

/* The live-total eyebrow → .rie-badge--gold, moved above the H1. */
body .rcb .rcb-hero .rcb-eyebrow {
  order: -1;
  display: inline-flex;
  align-self: flex-start;
  margin: 0 0 var(--rie-space-4);
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-gold-tint);
  color: var(--rie-color-gold-text);
  font: var(--rie-fw-regular) var(--rie-fs-caption) / var(--rie-lh-caption) var(--rie-font);
  letter-spacing: 0;
  text-transform: none;
}

body .rcb .rcb-hero__title {
  margin: 0;
  font-size: var(--rie-fs-h1);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h1);
  text-wrap: balance;
}

body .rcb .rcb-hero__strap {
  max-width: var(--rie-hero-copy);
  margin: var(--rie-space-4) 0 0;
  color: inherit;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rcb .rcb-hero__figure {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--rie-space-2);
  margin: var(--rie-space-6) 0 var(--rie-space-3);
  line-height: var(--rie-lh-body);
}

body .rcb .rcb-hero__amount {
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-h1);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h1);
  font-variant-numeric: tabular-nums;
}

body .rcb .rcb-hero__of {
  color: inherit;
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
  white-space: normal;
}

body .rcb .rcb-hero__progress {
  gap: var(--rie-space-2);
  width: 100%;
}

/* .rie-progress: 12 px pill. */
body .rcb .rcb-track {
  height: 12px;
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-tint);
}

body .rcb .rcb-track__fill {
  border-radius: inherit;
  background: var(--rie-color-royal);
}

body .rcb .rcb-hero__progress-row {
  flex-wrap: wrap;
  gap: 0 var(--rie-space-4);
  color: inherit;
  font: var(--rie-fw-regular) var(--rie-fs-sm) / var(--rie-lh-sm) var(--rie-font);
  letter-spacing: 0;
  text-transform: none;
}

body .rcb .rcb-hero__progress-row .rcb-gold-text {
  color: inherit;
  font-weight: var(--rie-fw-bold);
}

body .rcb .rcb-hero__pledged {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
}

body .rcb .rcb-hero__cta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rie-space-4);
  width: 100%;
  max-width: 640px;
  margin: var(--rie-space-6) 0 0;
  padding: 0;
  border: 0;
}

body .rcb .rcb-hero__updated {
  flex-basis: 100%;
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

/* Hero buttons: primary + outline on the light page … */
.rcb-hero .rcb-btn--gold {
  --rie-btn-bg: var(--rie-color-royal);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: transparent;
}
.rcb-hero .rcb-btn--gold:hover { --rie-btn-bg: var(--rie-color-azure); }
.rcb-hero .rcb-btn--outline {
  --rie-btn-bg: var(--rie-color-white);
  --rie-btn-fg: var(--rie-color-royal);
  --rie-btn-bd: var(--rie-color-royal);
}
.rcb-hero .rcb-btn--outline:hover {
  --rie-btn-bg: var(--rie-color-azure);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-azure);
}

body .rcb .rcb-hero__cta > .rcb-btn { width: 100%; }

@media (min-width: 481px) {
  body .rcb .rcb-hero__cta > .rcb-btn { width: auto; }
}

@media (min-width: 769px) {
  body .rcb .rcb-hero {
    justify-content: flex-end;
    min-height: 600px;
    padding: var(--rie-space-8);
    overflow: hidden;
    border-radius: var(--rie-radius-hero);
    background-color: var(--rie-color-ink);
    background-position: center 35%;
    background-size: cover;
    color: var(--rie-color-white);
  }

  body .rcb .rcb-hero::before {
    display: none;
  }

  /* The inline gradient darkens the photo; add rotary.org's bottom gradient over it. */
  body .rcb .rcb-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rie-overlay-hero);
    opacity: .6;
    pointer-events: none;
  }

  body .rcb .rcb-hero .rcb-eyebrow {
    background: var(--rie-color-gold);
    color: var(--rie-color-ink);
  }

  body .rcb .rcb-hero__amount {
    color: var(--rie-color-gold);
    font-size: var(--rie-fs-stat);
    font-weight: var(--rie-fw-regular);
    line-height: var(--rie-lh-stat);
  }

  body .rcb .rcb-track {
    background: rgba(255, 255, 255, .24);
  }

  body .rcb .rcb-track__fill {
    background: var(--rie-color-gold);
  }

  body .rcb :is(.rcb-hero__pledged, .rcb-hero__updated) {
    color: var(--rie-color-white);
  }

  .rcb-hero .rcb-btn--gold {
    --rie-btn-bg: var(--rie-color-pale);
    --rie-btn-fg: var(--rie-color-navy);
  }
  .rcb-hero .rcb-btn--gold:hover  { --rie-btn-bg: var(--rie-color-pale-hover); }
  .rcb-hero .rcb-btn--gold:active { --rie-btn-bg: var(--rie-color-pale-active); }
  .rcb-hero .rcb-btn--outline {
    --rie-btn-bg: transparent;
    --rie-btn-fg: var(--rie-color-white);
    --rie-btn-bd: var(--rie-color-white);
  }
  .rcb-hero .rcb-btn--outline:hover {
    --rie-btn-bg: var(--rie-color-white);
    --rie-btn-fg: var(--rie-color-navy);
    --rie-btn-bd: var(--rie-color-white);
  }

  body .rcb .rcb-hero .rcb-btn:focus-visible {
    --rie-btn-shadow: none;
    outline: 2px solid var(--rie-color-white);
    outline-offset: 2px;
  }
}

@media (min-width: 1025px) {
  body .rcb .rcb-hero { padding: var(--rie-space-12); }
}

/* ---- 21.2 The situation (prose + badges) and the impact panel (.rie-impact) ---- */
body .rcb .rcb-two-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--rie-space-8);
}

body .rcb .rcb-situation {
  gap: 0;
}

body .rcb .rcb-h2 {
  margin: 0 0 var(--rie-space-4);
  font-size: var(--rie-fs-h2);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h2);
  text-wrap: balance;
}

body .rcb .rcb-body {
  margin: 0 0 var(--rie-space-5);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rcb .rcb-tags {
  gap: var(--rie-space-2);
  padding: 0;
}

body .rcb .rcb-tag {
  display: inline-flex;
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  font: var(--rie-fw-regular) var(--rie-fs-caption) / var(--rie-lh-caption) var(--rie-font);
  letter-spacing: 0;
  text-transform: none;
}

body .rcb .rcb-impact {
  padding: var(--rie-space-6);
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  color: var(--rie-color-text);
}

/* The impact eyebrow is the panel's title (.rie-impact__title, H4). */
body .rcb .rcb-impact > .rcb-eyebrow {
  display: block;
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font: var(--rie-fw-semibold) var(--rie-fs-h4) / var(--rie-lh-h4) var(--rie-font);
  letter-spacing: 0;
  text-transform: none;
}

body .rcb .rcb-impact__row {
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 0 var(--rie-space-4);
  padding: var(--rie-space-4) 0;
  border-top: 1px solid var(--rie-color-line);
}

body .rcb .rcb-impact > .rcb-eyebrow + .rcb-impact__row {
  border-top: 0;
}

body .rcb .rcb-impact__amount {
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-h4);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
  font-variant-numeric: tabular-nums;
}

body .rcb .rcb-impact__text {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rcb .rcb-footnote {
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

body .rcb .rcb-impact > .rcb-footnote {
  padding-top: var(--rie-space-4);
  border-top: 1px solid var(--rie-color-line);
}

/* ---- 21.3 Where the money goes: the navy "i" box → .rie-highlight (azure) ---- */
body .rcb .rcb-callout {
  display: block;
  width: 100%;
  max-width: var(--rie-measure);
  margin: 0 auto;
  padding: var(--rie-space-4);
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-azure);
  color: var(--rie-color-page);
}

body .rcb .rcb-callout__icon {
  display: none;
}

/* 0,3,2 beats typography.css `body.elementor-kit-7 p { margin-block-end: 1em }`. */
body .rcb .rcb-callout p {
  margin: 0;
  color: inherit;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

/* ---- 21.4 How to give: two .rie-card--info, individual first (azure head), club second
   (navy head). The H3 becomes the coloured header bar. ---- */
body .rcb .rcb-give {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--rie-gap);
}

body .rcb .rcb-give-bank  { order: 0; }
body .rcb .rcb-give-clubs { order: 1; }

body .rcb :is(.rcb-give-clubs, .rcb-give-bank) {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-4);
  padding: 0 var(--rie-space-6) var(--rie-space-6);
  overflow: hidden;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  color: var(--rie-color-text);
}

body .rcb :is(.rcb-give-clubs, .rcb-give-bank) > .rcb-h3 {
  margin: 0 calc(-1 * var(--rie-space-6)) var(--rie-space-2);
  padding: var(--rie-space-4) var(--rie-space-6);
  background: var(--rie-color-navy);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-h4);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
}

@layer rie-legacy-important {
  body .rcb :is(.rcb-give-clubs, .rcb-give-bank) > .rcb-h3 {
    color: var(--rie-color-white) !important;   /* beats .rcb-h3--dark and the section's inherit */
  }
}

body .rcb .rcb-give-bank > .rcb-h3 {
  background: var(--rie-color-azure);
}

/* Club steps: royal numerals (the .rie-steps colour), body text in slate. */
body .rcb .rcb-steps {
  gap: var(--rie-space-4);
}

body .rcb .rcb-steps li {
  grid-template-columns: 32px minmax(0, 1fr);
}

body .rcb .rcb-steps__n {
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

body .rcb .rcb-steps li span:last-child {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rcb .rcb-steps li strong {
  color: inherit;
}

/* Pledge form: .rie-form fields on white; submit = primary pill. */
body .rcb .rcb-pledge-form {
  gap: var(--rie-space-3);
  margin-top: var(--rie-space-2);
  padding-top: var(--rie-space-6);
  border-top: 1px solid var(--rie-color-line);
}

body .rcb .rcb-input {
  height: 56px;
  padding: var(--rie-space-4);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  background: var(--rie-color-white);
  color: var(--rie-color-text);
  font: var(--rie-fw-regular) var(--rie-fs-body) / var(--rie-lh-body) var(--rie-font);
}

body .rcb .rcb-input::placeholder {
  color: var(--rie-color-muted);
}

body .rcb .rcb-input:hover {
  border-color: var(--rie-color-azure);
}

body .rcb .rcb-input:focus {
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);   /* navy ring, 10.75:1 (the 50 % azure halo was ~2:1) */
}

.rcb-give-clubs .rcb-btn--outline {
  --rie-btn-bg: var(--rie-color-royal);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: transparent;
}
.rcb-give-clubs .rcb-btn--outline:hover { --rie-btn-bg: var(--rie-color-azure); }

body .rcb .rcb-pledge-msg {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

body .rcb .rcb-pledge-msg--error {
  color: var(--rie-color-error);
}

/* Bank accounts: .rie-bank sub-cards, € and £ side by side where there is room. */
body .rcb .rcb-accounts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--rie-space-4);
}

body .rcb .rcb-account {
  display: flex;
  flex-direction: column;
  padding: var(--rie-space-4) var(--rie-space-5) var(--rie-space-5);
  border: 1px solid var(--rie-color-line);
  border-radius: var(--rie-radius-panel);
  background: var(--rie-color-page);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
}

body .rcb .rcb-account__head {
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-start;
  gap: var(--rie-space-2);
  padding: 0;
  background: none;
  color: var(--rie-color-text);
}

body .rcb .rcb-account__head span:first-child {
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

/* Region → .rie-badge */
body .rcb .rcb-account__region {
  display: inline-flex;
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
  letter-spacing: 0;
  text-transform: none;
}

body .rcb .rcb-account__hint {
  margin: var(--rie-space-2) 0 0;
  padding: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

body .rcb .rcb-account .rcb-reveal-btn,
body .rcb .rcb-account .rcb-account__hide-btn {
  width: 100%;
  margin: auto 0 0;
}

body .rcb .rcb-account > .rcb-account__hint {
  margin-bottom: var(--rie-space-4);
}

body .rcb .rcb-account__row {
  padding: var(--rie-space-3) 0;
  border-bottom: 1px solid var(--rie-color-line);
  font-weight: var(--rie-fw-semibold);
}

body .rcb .rcb-account__label {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  letter-spacing: 0;
  text-transform: none;
}

body .rcb .rcb-mono {
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-variant-numeric: tabular-nums;
}

body .rcb .rcb-ref {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .rcb .rcb-give-bank > .rcb-btn {
  align-self: flex-start;
}

@media (min-width: 769px) {
  body .rcb .rcb-callout { padding: var(--rie-space-6); }
}

@media (min-width: 1025px) {
  body .rcb .rcb-two-col {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    gap: var(--rie-space-12);
  }

  body .rcb .rcb-impact { padding: var(--rie-space-8); }

  body .rcb .rcb-give { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* =============================================================================
   21b. PAGE TITLE (Hello's .page-header on pages without an rpb hero: /member-area/, club
   and chair singles, utility pages) → plain H1, left, in the 1296 column (T-UTIL).
   The kit sets h1 to 28 px royal (0,1,1). Delete when those templates are rebuilt.
   ============================================================================= */

body .page-header .entry-title {
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h1);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h1);
  letter-spacing: 0;
  text-wrap: balance;
}

body:not(.single-post) .page-header .entry-title {
  margin-block: var(--rie-stack-lg) 0;
}


/* =============================================================================
   22. SINGLE POST (Hello single.php) → .rie-article-head + .rie-prose--article
   Mirrors: 60-editorial §1–6. 860 column; H1 at the H1 token (was 28 px, smaller than the
   section H2s); body 16/24 (not 17/19 px Georgia); post H2 at the H4 size; images radius
   16, no shadow; captions 16/24 #717171, left, not italic. Beats rotary-post-layout-inline-css
   (0,2,1–0,4,1) and the kit h1/h2 (0,1,1).
   Delete when template-parts/single.php (T-POST, phase 6) ships.
   ============================================================================= */

body.single-post .page-header {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  max-width: none;
  margin: var(--rie-stack-lg) auto var(--rie-space-4);
  padding: 0;
}

body.single-post .page-header .entry-title {
  max-width: none;
  margin: 0;
  padding: 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h1);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h1);
  letter-spacing: 0;
  text-wrap: balance;
}

body.single-post .page-content > nav.rotary-breadcrumbs {
  display: block;
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  max-width: none;
  margin: 0 auto var(--rie-space-8);
}

body.single-post .page-content > :is(p, h2, h3, h4, ul, ol, blockquote, .rpb-buttons, .wp-block-buttons, .wp-block-group, .wp-block-quote) {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  max-width: none;
}

body.single-post .page-content > :is(figure, .wp-block-image, .wp-block-embed, .wp-block-gallery):not(.alignwide):not(.alignfull) {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  max-width: none;
  margin-inline: auto;
}

body.single-post .page-content p,
body.single-post .page-content > p:first-of-type {
  margin: 0 auto var(--rie-space-5);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body.single-post .page-content > :is(h2, h3) {
  margin: var(--rie-space-8) auto var(--rie-space-4);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h4);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
}

body.single-post .page-content > :is(ul, ol) {
  margin: 0 auto var(--rie-space-5);
  padding-inline-start: 40px;
}

body.single-post .page-content img {
  border-radius: var(--rie-radius-card);
  box-shadow: none;
}

body.single-post .page-content figure.wp-block-image {
  margin: var(--rie-space-6) auto var(--rie-space-5);
}

body.single-post .page-content :is(figcaption, .wp-caption-text) {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-body);
  font-style: normal;
  line-height: var(--rie-lh-body);
  text-align: left;
}

body.single-post .page-content > .rpb-buttons {
  justify-content: flex-start;
  margin: var(--rie-space-8) auto;
}

body.single-post .page-content blockquote {
  margin: var(--rie-stack-md) auto;
  padding: var(--rie-space-6);
  border: 0;
  border-left: 4px solid var(--rie-color-royal);
  border-radius: 0 var(--rie-radius-card) var(--rie-radius-card) 0;
  background: var(--rie-color-tint);
}

body.single-post .page-content blockquote p {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h4);
  font-style: normal;
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
}

/* Tags row → badges in the 860 column. */
body.single-post .post-tags {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  max-width: none;
  margin: var(--rie-space-8) auto var(--rie-space-5);
  padding-top: var(--rie-space-4);
  border-top: 1px solid var(--rie-color-line);
}

body.single-post .post-tags .tag-links a {
  padding: var(--rie-space-2) var(--rie-space-3);
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
}

body.single-post .post-tags .tag-links a:hover {
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  text-decoration: underline;
}

/* The FAQ band at the end of a post is a full-width band, not part of the column. */
body.single-post .page-content > .rotary-home__section {
  margin-top: var(--rie-section-y);
}


/* =============================================================================
   23. BLOG ARCHIVE  .rblog-* (child template-parts/archive.php today) → .rie-card--h grid
   Mirrors: 50-cards §4 (horizontal card: image right 207 px from 769, stacked below).
   Delete when the new archive.php (T-ARCHIVE, phase 6) ships.
   ============================================================================= */

body .rblog-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-gap);
  width: min(var(--rie-max), 100% - 2 * var(--rie-gutter));
  max-width: none;
  margin: var(--rie-space-8) auto var(--rie-section-y);
  padding: 0;
}

body .rblog-card {
  margin: 0;
}

body .rblog-card .rblog-card__link {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-regular);
  text-decoration: none;
  transition: box-shadow var(--rie-dur-base) var(--rie-ease);
}

body .rblog-card .rblog-card__link:hover {
  box-shadow: var(--rie-shadow-card-hover);
}

body .rblog-card .rblog-card__media {
  display: block;
  height: 220px;
  overflow: hidden;
  aspect-ratio: auto;
  background: var(--rie-color-tint);
}

body .rblog-card .rblog-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

body .rblog-card .rblog-card__link:hover .rblog-card__img {
  transform: scale(1.15);
}

body .rblog-card .rblog-card__body {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  padding: var(--rie-space-4);
}

body .rblog-card .rblog-card__title {
  order: 1;
  display: -webkit-box;
  margin: 0 0 var(--rie-space-2);
  overflow: hidden;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
}

body .rblog-card .rblog-card__link:hover .rblog-card__title {
  color: var(--rie-color-text);
  text-decoration: underline;
}

body .rblog-card .rblog-card__excerpt {
  order: 2;
  display: -webkit-box;
  overflow: hidden;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

body .rblog-card .rblog-card__date {
  order: 3;
  margin: var(--rie-space-2) 0 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

body .rblog-card .rblog-card__more {
  display: none;
}

@media (min-width: 769px) {
  body .rblog-card .rblog-card__link {
    flex-direction: row-reverse;
    min-height: 202px;
  }

  body .rblog-card .rblog-card__media {
    flex: none;
    width: 207px;
    height: auto;
  }

  body .rblog-card .rblog-card__body { padding: var(--rie-space-6); }
}

@media (min-width: 1025px) {
  body .rblog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .rblog-card .rblog-card__link { min-height: 226px; }
}

body .rblog-pagination {
  display: flex;
  justify-content: center;
  gap: var(--rie-space-3);
  margin: 0 auto var(--rie-section-y);
}


/* =============================================================================
   24. 404  .r404__* → colour hero (.rie-hero--colour) + standard cards
   Mirrors: brief §5.10 (404) and 40-sections §6 colour hero. Navy hero with the TL disc /
   BR ring, H1 white 600 (the gold "404" numeral becomes a quiet white label), search as
   .rie-search, then white cards on the page background.
   Delete when template-parts/404.php ships.
   ============================================================================= */

body .r404 {
  background: var(--rie-color-page);
  color: var(--rie-color-text);
}

body .r404 .r404__hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: var(--rie-section-y) var(--rie-gutter);
  background: var(--rie-color-navy);
  color: var(--rie-color-white);
}

body .r404 .r404__hero::before,
body .r404 .r404__hero::after {
  --rie-deco-s: 300px;
  content: "";
  position: absolute;
  z-index: -1;
  width: var(--rie-deco-s);
  height: var(--rie-deco-s);
  pointer-events: none;
}

body .r404 .r404__hero::before {
  top: calc(var(--rie-deco-s) / -2);
  left: calc(var(--rie-deco-s) / -2);
  border-radius: 50%;
  background: var(--rie-color-royal);
}

body .r404 .r404__hero::after {
  right: calc(var(--rie-deco-s) / -2);
  bottom: calc(var(--rie-deco-s) / -2);
  background: var(--rie-color-azure);
  -webkit-mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
  mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
}

@media (min-width: 769px) {
  body .r404 .r404__hero::before, body .r404 .r404__hero::after { --rie-deco-s: 400px; }
}

body .r404 .r404__hero-inner {
  max-width: var(--rie-measure);
}

body .r404 .r404__code {
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-h4);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
  letter-spacing: 0;
}

body .r404 h1.r404__title {
  margin: 0;
  color: var(--rie-color-white);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h1);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h1);
}

body .r404 .r404__sub {
  max-width: var(--rie-hero-copy);
  margin: var(--rie-space-4) auto var(--rie-space-6);
  color: var(--rie-color-white);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .r404 .r404__search {
  gap: var(--rie-space-2);
  max-width: 645px;
}

body .r404 .r404__search input[type="search"] {
  height: 56px;
  padding: var(--rie-space-4);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  background: var(--rie-color-white);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
}

.r404__search button {
  --rie-btn-bg: var(--rie-color-pale);
  --rie-btn-fg: var(--rie-color-navy);
}
.r404__search button:hover { --rie-btn-bg: var(--rie-color-pale-hover); }

body .r404 .r404__quicklinks {
  max-width: calc(var(--rie-max) + 2 * var(--rie-gutter));
  padding: var(--rie-section-y) var(--rie-gutter);
}

body .r404 .r404__quicklinks h2 {
  margin: 0 0 var(--rie-head-gap);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h2);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h2);
  letter-spacing: 0;
  text-transform: none;
}

body .r404 .r404__card {
  padding: var(--rie-space-6);
}

/* The 404 is not inside .page-content, so the card parts are set here (legacy: white text
   on translucent tiles). */
body .r404 .r404__card-title {
  display: block;
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

body .r404 .r404__card-cta {
  display: inline-flex;
  padding-top: var(--rie-space-2);
  color: var(--rie-color-royal);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
}

body .r404 .r404__card:hover .r404__card-cta {
  color: var(--rie-color-azure);
}

body .r404 .r404__card-eyebrow {
  display: inline-flex;
  margin: 0 0 var(--rie-space-2);
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background: var(--rie-color-tint);
  color: var(--rie-color-navy-deep);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
  letter-spacing: 0;
  text-transform: none;
}

body .r404 .r404__home-cta {
  padding: 0 var(--rie-gutter) var(--rie-section-y);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
}

body .r404 .r404__home-cta a {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}


/* =============================================================================
   25. PEOPLE AND MEMBER AREA
   .rdc-team (/leadership/) → .rie-person-card grid (4-up at 1025);
   .rspk (/conference-2026/speakers/) → .rie-person row;
   .rma-* (/member-area/ sign-in) → .rie-form on a white panel.
   Delete when /leadership/, the speakers page and /member-area/ are rebuilt (T-PEOPLE, T-UTIL).
   ============================================================================= */

body .rdc-team .rdc-team__grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
  gap: var(--rie-gap);
  max-width: var(--rie-max);
  margin: 0 auto;
}

body .rdc-team .rdc-team__card {
  overflow: hidden;
  border: 0;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
}

body .rdc-team .rdc-team__card:hover {
  box-shadow: var(--rie-shadow-card-hover);
}

body .rdc-team .rdc-team__photo {
  aspect-ratio: 3 / 4;
  background-position: top center;
}

body .rdc-team .rdc-team__photo--placeholder {
  background-color: var(--rie-color-tint);
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-semibold);
}

body .rdc-team .rdc-team__body {
  gap: var(--rie-space-1);
  padding: var(--rie-space-4) var(--rie-space-6) var(--rie-space-6);
}

body .rdc-team .rdc-team__name {
  order: -1;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

body .rdc-team :is(.rdc-team__role, .rdc-team__club, .rdc-team__term) {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
  letter-spacing: 0;
  text-transform: none;
}

body .rdc-team .rdc-team__email {
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-bold);
}

body .rspk {
  gap: var(--rie-space-6);
  padding: var(--rie-space-6);
  border: 0;
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
}

body .rspk :is(.rspk__photo, .rspk__initials) {
  background-color: var(--rie-color-tint);
  background-image: none;
  color: var(--rie-color-royal);
}

body .rspk .rspk__photo[style*="background-image"] {
  background-image: inherit;
}

body .rspk .rspk__name {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h4);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
}

body .rspk .rspk__role {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

body .rspk .rspk__topic {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
}

body .rspk .rspk__topic-label {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  letter-spacing: 0;
  text-transform: none;
}

body .rspk .rspk__bio {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .page-content > .rma-form {
  width: min(var(--rie-measure), 100% - 2 * var(--rie-gutter));
  margin: var(--rie-stack-lg) auto var(--rie-section-y);
  padding: var(--rie-space-8);
  border-radius: var(--rie-radius-card);
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
}

body .rma-form h3 {
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h3);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h3);
}

body .rma-form .rma-field label {
  display: block;
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-body);
}

body .rma-form .rma-field :is(input, select, textarea) {
  width: 100%;
  min-height: 56px;
  padding: var(--rie-space-4);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  background: var(--rie-color-white);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
}

body .rma-form .rma-field :is(input, select, textarea):focus {
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;          /* forced colours (see FOCUS, top) */
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);   /* navy ring, 10.75:1 (the 50 % azure halo was ~2:1) */
}

body .rma-form .rma-small {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
}


/* =============================================================================
   26. REDUCED MOTION — no zoom, no arrow slide (brief §2.10)
   ============================================================================= */

@media (prefers-reduced-motion: reduce) {
  :root body :is(.rrp__media, .rhc__media, .rrelated__media)::before,
  :root body .rotary-home__section div[style*="display:grid"] > a[href] > div[style*="aspect-ratio"]::before,
  :root body .rotary-hub__card .rotary-hub__card-img,
  :root body .rblog-card .rblog-card__img {
    transform: none;
    transition: none;
  }

  :root body :is(.rrp__card, .rhc, .rrelated__card):hover :is(.rrp__media, .rhc__media, .rrelated__media)::before,
  :root body .rotary-home__section div[style*="display:grid"] > a[href]:hover > div[style*="aspect-ratio"]::before,
  :root body .rotary-hub__card:hover .rotary-hub__card-img,
  :root body .rblog-card .rblog-card__link:hover .rblog-card__img,
  :root body .rfc .rfc__link:hover .rfc__cta {
    transform: none;
  }
}


/* =============================================================================
   30. ELEMENTOR PAGES (Phase 3, 29 Sept 2026)
   ============================================================================= */

/* rotary-site-styles.php prints `#content { padding-bottom: 1lh }`. On Elementor full-width pages the
   last band carries its own padding, so the extra line showed as a strip above the footer. */
body.page-template-elementor_header_footer #content.rie-main {
  padding-bottom: 0;
}

/* The legacy club finder [rotary_find_club] inside the Home split (Recipe H §06): sit flush in the
   right column (no section padding/panel, no 760px cap) and drop its own "Browse all clubs" footer,
   because the left column already carries that pill. */
body .rie-split section.rfc {
  padding: 0;
  background: none;
}
body .rie-split .rfc__inner {
  max-width: none;
  margin: 0;
}
body .rie-split .rfc__footer {
  display: none;
}


/* =============================================================================
   31. PHASE 7 LEGACY WIDGETS — contrast (WCAG 1.4.3) and target size (2.5.8)
   ============================================================================= */

/* [rotary_sitemap] prints each section's accent colour inline on the heading link (gold/green on white). */
body .rotary-sitemap__header a[style] {
  color: var(--rie-color-royal) !important;
}
body .rotary-sitemap__grandchildren a {
  color: var(--rie-color-muted);   /* was #777 (4.47:1) */
}

/* [rotary_media_gallery] / [rotary_media_news] meta was #888 (3.5:1). */
body :is(.rotary-media-gallery__size, .rotary-media-news__date) {
  color: var(--rie-color-muted);
}

/* Gravity Forms field descriptions: legacy gold links (1.98:1). */
body .gform_wrapper .gfield_description a {
  color: var(--rie-color-royal);
}

/* Gravity Forms date-picker toggle: 22px → 24px minimum target. */
body .gform_wrapper button.gform-datepicker-toggle {
  min-inline-size: 24px !important;   /* GF theme framework sizes it at 22px with a 6-class selector */
  min-block-size: 24px !important;
}

/* Complianz blocked-embed placeholder (YouTube etc.): white on #808080 was 3.9:1. */
body .cmplz-blocked-content-notice {
  background-color: var(--rie-color-ink) !important;
}
body .cmplz-blocked-content-notice .cmplz-accept-service {
  color: var(--rie-color-ink);
  background-color: var(--rie-color-white);
}

/* Complianz cookie-policy service toggles: 24px minimum target. */
body .cmplz-document .cmplz-service-header input[type="checkbox"],
body .cmplz-document .cmplz-service-header :is(button, label) {
  min-width: 24px;
  min-height: 24px;
}

/* Legacy shortcodes that print their own full-bleed section ([rotary_timeline], [rotary_photo_stats],
   [rotary_speakers], [rotary_exhibitors], [rotary_faq] …) sit inside a Phase 7 band that already has the
   section padding and background: drop theirs. ([rotary_impact_stats] keeps its navy panel.) */
body .rie-section .elementor-shortcode > :is(.rotary-home__section, .rps, .rtl) {
  padding-block: 0;
  background: none;
}

/* Gravity Forms secondary text (sub-labels, counters, descriptions) on the legacy tinted contact
   panels (chair / president "Send … a message"): --rie-color-muted was 4.41:1 there. */
body .gform_wrapper :is(.gform-field-label--type-sub, .ginput_counter, .gfield_description),
body .rie-recaptcha-note {
  color: #5c5c5c;   /* 5.6:1 on #F0F4F8, 6.7:1 on white */
}

/* Appeal campaign board [rotary_appeal_campaign_board]: its Archivo display face came from Google Fonts;
   the brand face is Open Sans (self-hosted), so the figures and headings use it. */
body :is(.rcb-h2, .rcb-h3, .rcb-hero__title, .rcb-hero__amount, .rcb-hero__of, .rcb-impact__amount, .rcb-steps__n, .rcb-account__head span) {
  font-family: var(--rie-font);
}