/*! rie.css — Rotary in Ireland (District 1160) · rotary.org-style skin
 *  GENERATED by source/build.mjs from source/css/{00-tokens.css,10-base.css,20-chrome.css,30-atoms.css,40-sections.css,50-cards.css,60-editorial.css,70-district.css,80-plugins.css}. Do not edit this file; edit the partials. */

/* ===== 00-tokens.css ===== */
/* =============================================================================
   rie.css · 00 TOKENS
   Rotary in Ireland (District 1160) web design tokens, modelled on rotary.org.
   Source of truth: docs/01-design-spec.md §2 (DESIGN-BRIEF §2.12).
   Mobile-first: base = ≤480, then ≥481, ≥769 (Elementor Tablet), ≥1025 (Desktop).
   ============================================================================= */

:root {
  /* Colour ------------------------------------------------------------------ */
  --rie-color-royal: #17458F;        /* primary button, links, active bars */
  --rie-color-azure: #0067C8;        /* hover, highlight box, info-card header */
  --rie-color-gold: #F7A81B;         /* jewel only: wheel, rings, stats on navy */
  --rie-color-gold-text: #915D00;    /* rare gold-toned text on light (5.57:1) */
  --rie-color-gold-tint: #FFF7E8;
  --rie-color-navy: #0C3C7C;         /* bands, callouts, focus ring */
  --rie-color-navy-deep: #0C3266;    /* badge text */
  --rie-color-ink: #212C3F;          /* header, mega-menu, drawer, footer */
  --rie-color-ink-2: #28354B;        /* utility bar */
  --rie-color-page: #F9FBFC;         /* body background */
  --rie-color-white: #FFFFFF;
  --rie-color-tint: #E9F2F9;         /* badges, alt band, light disc */
  --rie-color-tint-press: #D9EAF7;
  --rie-color-hover-tint: #EAFAFF;
  --rie-color-pale: #BDF0FF;         /* secondary pill */
  --rie-color-pale-hover: #AFE2E3;
  --rie-color-pale-active: #5FD0DF;
  --rie-color-active: #20BBE6;       /* momentary pressed state only */
  --rie-color-text: #323C44;         /* all text on light */
  --rie-color-muted: #717171;        /* meta, captions, input borders */
  --rie-color-line: #D0CFCD;         /* hairlines (= Rotary Silver) */
  --rie-color-violet: #901F93;
  --rie-color-error: #A32035;
  --rie-color-pdf: #C5344B;

  /* Type -------------------------------------------------------------------- */
  --rie-font: "Open Sans", Arial, sans-serif;
  --rie-fw-regular: 400;
  --rie-fw-semibold: 600;
  --rie-fw-bold: 700;
  --rie-fs-h1: 38px;  --rie-lh-h1: 45px;
  --rie-fs-h2: 32px;  --rie-lh-h2: 38px;
  --rie-fs-h3: 24px;  --rie-lh-h3: 28px;
  --rie-fs-h4: 20px;  --rie-lh-h4: 30px;
  --rie-fs-h5: 18px;  --rie-lh-h5: 27px;
  --rie-fs-h6: 16px;  --rie-lh-h6: 24px;
  --rie-fs-body: 16px; --rie-lh-body: 24px;
  --rie-fs-sm: 14px;  --rie-lh-sm: 21px;
  --rie-fs-caption: 12px; --rie-lh-caption: 18px;
  --rie-fs-hero: 32px; --rie-lh-hero: 38px;
  --rie-fs-stat: 38px; --rie-lh-stat: 45px;

  /* Space (4px base) -------------------------------------------------------- */
  --rie-space-1: 4px;  --rie-space-2: 8px;  --rie-space-3: 12px; --rie-space-4: 16px;
  --rie-space-5: 20px; --rie-space-6: 24px; --rie-space-8: 32px; --rie-space-12: 48px;
  --rie-space-16: 64px; --rie-space-20: 80px; --rie-space-28: 112px;
  --rie-section-y: 64px;
  --rie-section-y-sm: 16px;
  --rie-head-gap: 12px;
  --rie-stack-lg: 24px;
  --rie-stack-md: 16px;

  /* Layout ------------------------------------------------------------------ */
  --rie-max: 1296px;
  --rie-measure: 860px;
  --rie-wide: 1080px;
  --rie-hero-copy: 440px;
  --rie-feature-copy: 510px;            /* text block on a full-bleed featured-image section */
  --rie-feature-copy-contained: 570px;  /* text block on a contained featured-image section */
  --rie-gap: 20px;
  --rie-gutter: 15px;

  /* Radii ------------------------------------------------------------------- */
  --rie-radius-pill: 9999px;
  --rie-radius-hero: 20px;
  --rie-radius-card: 16px;
  --rie-radius-panel: 12px;
  --rie-radius-input: 8px;
  --rie-radius-sm: 4px;
  --rie-radius-xs: 2px;

  /* Elevation & focus ------------------------------------------------------- */
  --rie-shadow-card: 0 4px 8px 0 rgba(0, 0, 0, .10);
  --rie-shadow-card-hover: 0 6px 16px 0 rgba(0, 0, 0, .10);
  --rie-shadow-focus: 0 0 0 2px #0C3C7C, inset 0 0 0 2px #FFFFFF;

  /* Overlays ---------------------------------------------------------------- */
  --rie-overlay-hero: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0) 100%);
  --rie-overlay-home: linear-gradient(to right, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .3) 40%, transparent 70%),
                      linear-gradient(to top, rgba(0, 0, 0, .6) 0%, rgba(0, 0, 0, .3) 30%, transparent 60%);
  --rie-scrim: rgba(0, 0, 0, .5);

  /* Motion ------------------------------------------------------------------ */
  --rie-dur-fast: 150ms;
  --rie-dur-base: 200ms;
  --rie-dur-slow: 300ms;
  --rie-ease: cubic-bezier(.4, 0, .2, 1);
  --rie-ease-out: cubic-bezier(0, 0, .2, 1);

  /* Legacy aliases (child theme + inline snippets use --ri-*). Remove in Phase 7. */
  --ri-primary: var(--rie-color-royal);
  --ri-secondary: var(--rie-color-gold);
  --ri-secondary-text: var(--rie-color-gold-text);
  --ri-text: var(--rie-color-text);
  --ri-accent: var(--rie-color-azure);
}

@media (min-width: 481px) {
  :root { --rie-gutter: 20px; }
}

@media (min-width: 769px) {
  :root {
    --rie-fs-h1: 48px;  --rie-lh-h1: 57px;
    --rie-fs-h2: 36px;  --rie-lh-h2: 43px;
    --rie-fs-h3: 28px;  --rie-lh-h3: 33px;
    --rie-fs-hero: 48px; --rie-lh-hero: 57px;
    --rie-fs-stat: 48px; --rie-lh-stat: 57px;
    --rie-section-y: 80px;
    --rie-section-y-sm: 24px;
    --rie-head-gap: 24px;
    --rie-stack-lg: 32px;
    --rie-stack-md: 24px;
  }
}

@media (min-width: 1025px) {
  :root {
    --rie-fs-h1: 58px;  --rie-lh-h1: 70px;
    --rie-fs-h2: 40px;  --rie-lh-h2: 48px;
    --rie-fs-h3: 32px;  --rie-lh-h3: 38px;
    --rie-fs-h4: 24px;  --rie-lh-h4: 36px;
    --rie-fs-hero: 58px; --rie-lh-hero: 70px;
    --rie-fs-stat: 58px; --rie-lh-stat: 70px;
    --rie-section-y: 112px;
    --rie-section-y-sm: 32px;
    --rie-head-gap: 48px;
    --rie-stack-lg: 64px;
    --rie-stack-md: 32px;
    --rie-gutter: max(20px, 5vw);
  }
}


/* ===== 10-base.css ===== */
/* =============================================================================
   rie.css · 10 BASE
   Element defaults, body, links, headings, focus, screen-reader helpers,
   skip link, reduced motion, and the Hello Elementor / Elementor overrides
   that let full-bleed bands and the rie type system work on every page.
   Spec: DESIGN-BRIEF §1, §2.2–2.3, §2.9–2.10, §4.1 (skip link), §7.2–7.3.

   Specificity note (read before editing)
   - Hello Elementor's reset.css styles bare elements (h1–h6, p, a, button,
     input…) at specificity 0,0,1 and loads BEFORE rie.css. A :where() rule
     (0,0,0) can never beat it, so the defaults Hello also sets use bare type
     selectors (0,0,1): same weight, later file, so rie wins. Every component
     class (0,1,0) still overrides them.
   - Defaults Hello does not touch stay inside :where().
   - Elementor prints "global default" widget styles at 0,2,0 in each page's
     CSS. The neutralisers below sit at 0,2,1 (a tag or `body` plus two
     classes) so the rie type/colour system applies whatever the file order;
     component rules for Elementor twins (also 0,2,1, later files) override
     them; any Global Font or Global Colour picked in the panel (printed at
     0,4,0) still wins.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. Document
   --------------------------------------------------------------------------- */

/* :root body (0,1,1) beats Hello's `body` (0,0,1) and the kit's body class
   rule (0,1,0) — the kit still sets Georgia until Site Settings are cleared. */
:root body {
  margin: 0;
  background-color: var(--rie-color-page);
  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);
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

:where(html) {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

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


/* ---------------------------------------------------------------------------
   2. Headings — weight 600, sentence case, no letter-spacing (§2.3)
   Sizes come from the tokens, which step up at 769 and 1025.
   --------------------------------------------------------------------------- */

h1, h2, h3, h4, h5, h6 {
  margin-block: 0 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;
}

h1 { font-size: var(--rie-fs-h1); line-height: var(--rie-lh-h1); }
h2 { font-size: var(--rie-fs-h2); line-height: var(--rie-lh-h2); }
h3 { font-size: var(--rie-fs-h3); line-height: var(--rie-lh-h3); }
h4 { font-size: var(--rie-fs-h4); line-height: var(--rie-lh-h4); }
h5 { font-size: var(--rie-fs-h5); line-height: var(--rie-lh-h5); }
h6 { font-size: var(--rie-fs-h6); line-height: var(--rie-lh-h6); }

/* :where() keeps the last-child reset at 0,0,1 so components still win. */
:is(h1, h2, h3, h4, h5, h6):where(:last-child) {
  margin-block-end: 0;
}


/* ---------------------------------------------------------------------------
   3. Running text
   --------------------------------------------------------------------------- */

p {
  margin-block: 0 var(--rie-space-5);   /* paragraph spacing 20 */
}

p:where(:last-child) {
  margin-block-end: 0;
}

:where(strong, b) {
  font-weight: var(--rie-fw-bold);
}

:where(small) {
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

:where(img, video) {
  max-width: 100%;
  height: auto;
  border-style: none;
  vertical-align: middle;
}

:where(svg) {
  vertical-align: middle;
}

:where(hr) {
  height: 1px;
  margin-block: var(--rie-space-6);
  border: 0;
  background-color: var(--rie-color-line);
}

:where(figure) {
  margin: 0;
}

/* Browsers italicise <address> (TEC venue, footer contact). Only Open Sans
   700 italic is loaded, so it rendered as bold italic. No italics outside
   quotes and emphasis (§2.3). */
:where(address) {
  font-style: normal;
}


/* ---------------------------------------------------------------------------
   4. Links — bold royal, no underline (§1 move 11). The hover border that
   rotary.org draws inside prose belongs to 60-editorial (.rie-prose).
   --------------------------------------------------------------------------- */

a {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
  transition: color var(--rie-dur-fast) var(--rie-ease);
}

/* 0,1,1 = Hello's `a:hover` (#336); later file wins. */
a:hover  { color: var(--rie-color-azure); }
a:active { color: var(--rie-color-active); }

/* Hello theme.css underlines every link inside page content (0,1,1),
   including cards and buttons. Same weight, later file. */
.page-content a,
.comments-area a {
  text-decoration: none;
}


/* ---------------------------------------------------------------------------
   5. Dark surfaces — the `.rie-on-dark` context (§2.2 "Surface contexts")
   Text white, links white bold. Listed classes are the dark surfaces in the
   system; add `.rie-on-dark` to any other dark wrapper.
   :where() keeps these at element weight so component classes still decide
   their own colours (a pale pill on navy keeps its navy text).
   --------------------------------------------------------------------------- */

.rie-on-dark {
  color: var(--rie-color-white);
}

:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout,
       .rie-highlight, .rie-header, .rie-footer, .rie-utility, .rie-drawer,
       .rie-mega, .rie-appeal, .rie-hero--colour, .rie-hero-home) a {
  color: var(--rie-color-white);
}

:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout,
       .rie-highlight, .rie-header, .rie-footer, .rie-utility, .rie-drawer,
       .rie-mega, .rie-appeal, .rie-hero--colour, .rie-hero-home) a:is(:hover, :active) {
  color: var(--rie-color-tint);
}

@media (min-width: 769px) {
  /* Interior hero and feature text sits over the photo only from 769 up;
     below that it drops onto the light page in #323C44. */
  :where(.rie-hero__content, .rie-feature__content) a {
    color: var(--rie-color-white);
  }
}


/* ---------------------------------------------------------------------------
   6. Focus (§2.9)
   Light surfaces: rotary.org's rendered ring, navy + white inset.
   Dark surfaces: navy on ink is 1.31:1, so use a 2px white outline, 2px out.
   All three rules are 0,2,0 (:where() adds nothing), so source order decides:
   light → dark → light-inside-dark. Components that need their own treatment
   (search input, carousel arrows) use 0,2,1 or more.
   Forced colours (Windows High Contrast) drop every box-shadow, so the light
   ring keeps a 2px TRANSPARENT outline beside it: invisible normally, repainted
   in a system colour in forced-colours mode. Never write `outline: none` on a
   focus rule; write `outline: 2px solid transparent` instead.
   --------------------------------------------------------------------------- */

/* Mouse focus only: no ring (Hello's reset prints browser outlines). */
:root :focus:not(:focus-visible) {
  outline: none;
}

:root :focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

:root :where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout,
             .rie-highlight, .rie-header, .rie-footer, .rie-utility, .rie-drawer,
             .rie-mega, .rie-appeal, .rie-hero--colour, .rie-hero-home) :focus-visible {
  outline: 2px solid var(--rie-color-white);
  outline-offset: 2px;
  box-shadow: none;
}

@media (min-width: 769px) {
  :root :where(.rie-hero__content, .rie-feature__content) :focus-visible {
    outline: 2px solid var(--rie-color-white);
    outline-offset: 2px;
    box-shadow: none;
  }
}

/* A light surface nested in a dark one (a white card or search box in a navy
   band) goes back to the light ring. */
:root :where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout,
             .rie-highlight, .rie-header, .rie-footer, .rie-utility, .rie-drawer,
             .rie-mega, .rie-hero--colour, .rie-hero-home)
      :where(.rie-on-light, .rie-card, .rie-search, .rie-form, .rie-accordion,
             .rie-person-card, .rie-empty) :focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}


/* ---------------------------------------------------------------------------
   7. Screen-reader text and the skip link (§4.1)
   --------------------------------------------------------------------------- */

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

/* The first focusable element in <body>. Hidden until focused, then a white
   pill with royal text 16px from the top-left. Turn off Hello's and Ally's
   skip links so there is exactly one. */
.rie-skip,
a.rie-skip {
  position: fixed;
  top: var(--rie-space-4);
  left: var(--rie-space-4);
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  min-height: 56px;
  padding: 16px 32px;
  border-radius: var(--rie-radius-pill);
  background-color: var(--rie-color-white);
  color: var(--rie-color-royal);
  box-shadow: var(--rie-shadow-card-hover);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  text-decoration: none;
}

.rie-skip:not(:focus):not(:focus-visible) {
  width: 1px;
  height: 1px;
  min-height: 0;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  box-shadow: none;
}

.rie-skip:is(:hover, :focus) {
  color: var(--rie-color-royal);
}


/* ---------------------------------------------------------------------------
   8. Hello Elementor overrides — scoped so they are safe on every page
   --------------------------------------------------------------------------- */

/* Hello theme.css caps .site-main at 500 / 600 / 800 / 1140px on the 76
   non-Elementor pages (0,2,1 in four media queries). Remove the cap so bands
   run edge to edge; each band boxes its own content at --rie-max. */
body:not([class*=elementor-page-]) .site-main {
  max-width: none;
  padding-inline: 0;
}

/* Hello's page title (pages that still print it) lines up with the bands. */
.page-header .entry-title {
  max-width: calc(var(--rie-max) + 2 * var(--rie-gutter));
  margin-block: var(--rie-space-6) var(--rie-space-6);
  padding-inline: var(--rie-gutter);
}

/* Hello reset.css paints every bare <button> Hello pink (#CC3366): 1px pink
   border and text at rest, pink fill on hover AND on focus. Same selectors,
   later file: brand royal outline at rest, azure fill on hover/focus.
   Component classes (.rie-btn, .rie-icon-btn…) re-state their own colours for
   :hover/:focus at 0,2,0 or more, so they are unaffected. */
[type=button], [type=reset], [type=submit], button {
  border-color: var(--rie-color-royal);
  color: var(--rie-color-royal);
  font-family: inherit;
}

[type=button]:is(:hover, :focus), [type=reset]:is(:hover, :focus),
[type=submit]:is(:hover, :focus), button:is(:hover, :focus) {
  border-color: var(--rie-color-azure);
  background-color: var(--rie-color-azure);
  color: var(--rie-color-white);
}

/* Hello's input rules (1px #666, radius 3) are left alone here; .rie-form and
   .rie-search restyle their own fields. Placeholders get the muted grey. */
::placeholder {
  color: var(--rie-color-muted);
  opacity: 1;
}


/* ---------------------------------------------------------------------------
   9. Elementor widget defaults → rie system
   Elementor prints "global default" styles for widgets at 0,2,0: headings in
   the Primary colour (royal) and Primary font, Text Editor in the kit Text
   colour (dark, even on a navy band). Neutralise them so headings follow the
   h1–h6 scale by tag and text inherits the band's colour. A Global Font or
   Global Colour chosen in the panel (0,4,0) still wins.
   --------------------------------------------------------------------------- */

body .elementor-widget-heading .elementor-heading-title {
  color: inherit;
  font-family: var(--rie-font);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}

.elementor-widget-heading h1.elementor-heading-title { font-size: var(--rie-fs-h1); line-height: var(--rie-lh-h1); }
.elementor-widget-heading h2.elementor-heading-title { font-size: var(--rie-fs-h2); line-height: var(--rie-lh-h2); }
.elementor-widget-heading h3.elementor-heading-title { font-size: var(--rie-fs-h3); line-height: var(--rie-lh-h3); }
.elementor-widget-heading h4.elementor-heading-title { font-size: var(--rie-fs-h4); line-height: var(--rie-lh-h4); }
.elementor-widget-heading h5.elementor-heading-title { font-size: var(--rie-fs-h5); line-height: var(--rie-lh-h5); }
.elementor-widget-heading h6.elementor-heading-title { font-size: var(--rie-fs-h6); line-height: var(--rie-lh-h6); }

.elementor-widget-heading :is(p, span, div).elementor-heading-title {
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}

body .elementor-widget-text-editor {
  color: inherit;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
}


/* ---------------------------------------------------------------------------
   10. Type styles as classes — for when the visual size should differ from
   the heading level (one H1 per page, card titles set in H5…). In Elementor
   pick the matching Global Font instead; the class also works on a Heading
   widget wrapper.
   --------------------------------------------------------------------------- */

:is(.rie-h1, .rie-h2, .rie-h3, .rie-h4, .rie-h5, .rie-h6, .rie-hero-title):not(.elementor-widget),
body .elementor-widget:is(.rie-h1, .rie-h2, .rie-h3, .rie-h4, .rie-h5, .rie-h6, .rie-hero-title) .elementor-heading-title {
  font-family: var(--rie-font);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}

.rie-h1:not(.elementor-widget), body .elementor-widget.rie-h1 .elementor-heading-title { font-size: var(--rie-fs-h1); line-height: var(--rie-lh-h1); }
.rie-h2:not(.elementor-widget), body .elementor-widget.rie-h2 .elementor-heading-title { font-size: var(--rie-fs-h2); line-height: var(--rie-lh-h2); }
.rie-h3:not(.elementor-widget), body .elementor-widget.rie-h3 .elementor-heading-title { font-size: var(--rie-fs-h3); line-height: var(--rie-lh-h3); }
.rie-h4:not(.elementor-widget), body .elementor-widget.rie-h4 .elementor-heading-title { font-size: var(--rie-fs-h4); line-height: var(--rie-lh-h4); }
.rie-h5:not(.elementor-widget), body .elementor-widget.rie-h5 .elementor-heading-title { font-size: var(--rie-fs-h5); line-height: var(--rie-lh-h5); }
.rie-h6:not(.elementor-widget), body .elementor-widget.rie-h6 .elementor-heading-title { font-size: var(--rie-fs-h6); line-height: var(--rie-lh-h6); }
.rie-hero-title:not(.elementor-widget), body .elementor-widget.rie-hero-title .elementor-heading-title { font-size: var(--rie-fs-hero); line-height: var(--rie-lh-hero); }

/* Text utilities. Plain: on any element. Elementor: on a Text Editor widget,
   where the twin (0,2,1) beats `body .elementor-widget-text-editor` above
   (0,1,1) and `.rie-prose` (0,1,0) on the same wrapper; the <p>s inherit.
   Muted is for page and white surfaces only (4.70 / 4.88:1); on the tint band
   40-sections turns it back to the text colour (4.30:1 would fail). */
.rie-text-sm,
body .elementor-widget-text-editor.rie-text-sm {
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

.rie-text-muted,
body .elementor-widget-text-editor.rie-text-muted {
  color: var(--rie-color-muted);
}


/* ---------------------------------------------------------------------------
   11. Reduced motion (§2.10)
   No !important allowed, so the guard is raised to 0,2,0 / 0,2,1 through
   :root :is(…): it beats single-class component transitions and animations.
   Components also switch off their own transforms (zoom, slide-ins).
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  :root { scroll-behavior: auto; }

  :root :is([class], *),
  :root :is([class], *)::before,
  :root :is([class], *)::after {
    animation-duration: 0.01ms;
    animation-iteration-count: 1;
    transition-duration: 0.01ms;
    scroll-behavior: auto;
  }
}


/* ===== 20-chrome.css ===== */
/* =============================================================================
   rie.css · 20 CHROME  (owner: chrome)
   The site chrome, modelled on rotary.org's header, mega-menu, drawer and footer:
     1. Shared chrome box       5. Mega-menu panels + scrim     9. Section sub-nav
     2. Appeal bar              6. Mobile drawer
     3. Utility bar             7. Footer
     4. Main bar + primary nav  8. Breadcrumb
   The skip link (.rie-skip) is styled in 10-base; header.php prints it first.
   Spec: DESIGN-BRIEF §1 moves 1, 2, 12 · §3 logo · §4.1 · §5.2–5.5.
   Markup contract: source/partials/{appeal,header,footer}.html are the static
   twins of header.php / footer.php (inc/walker-mega.php prints the menus).

   Breakpoints (mobile-first)
   - base … 1024  the "mobile chrome": 64px bar, logo 40, search + menu icons,
                  drawer (full width ≤768, 52% at 769–1024)
   - ≥1025        utility bar, 64px logo, Donate + Join pills, 56px search
                  circle, primary nav + full-width mega-menu panels
   - footer       accordions ≤768; four columns + a full-width CTA row at
                  769–1024; four columns + CTA column from 1025
   - sub-nav      one sideways-scrolling row ≤1024; wraps from 1025

   Specificity (read before editing)
   - This file loads BEFORE 30-atoms. Where a rule here must beat an atom
     (.rie-btn, .rie-icon) it carries one more class than the atom rule.
   - Chrome links are `a.rie-x` (0,1,1): they tie with the kit's
     `.elementor-kit-7 a` and win on load order (rie.css loads after the kit).
   - Chrome buttons are scoped to their block (0,2,0; states 0,3,0) so they beat
     Hello's pink `[type=button]:hover` (0,2,0) and the kit's
     `.elementor-kit-7 button:hover` (0,2,1) whatever the order.

   JavaScript (assets/js/rie-nav.js) adds `rie-nav-js` to <html>. Without it the
   mega-menu opens on :hover / :focus-within and the drawer opens via :target
   (#rie-drawer); footer columns are open <details>.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. SHARED CHROME BOX
   Content lines up with the bands: 1296px wide at most, gutters either side.
   --------------------------------------------------------------------------- */

.rie-appeal,
.rie-header,
.rie-drawer,
.rie-footer {
  --rie-chrome-max: calc(var(--rie-max) + 2 * var(--rie-gutter));
  font-family: var(--rie-font);
  letter-spacing: 0;
  text-transform: none;
}

/* Every chrome link and button: brand face, no kit/Hello typography. */
:is(a.rie-appeal__link, a.rie-utility__link, a.rie-header__logo, a.rie-header__search,
    a.rie-header__menu, a.rie-nav__link, a.rie-mega__link, a.rie-mega__head,
    a.rie-drawer__close, a.rie-drawer__link, a.rie-drawer__toplink, a.rie-drawer__util-link,
    a.rie-footer__util-link, a.rie-footer__link, a.rie-footer__contact-link,
    a.rie-footer__social-link, a.rie-footer__logo, a.rie-footer__legal-link,
    a.rie-footer__copy-link) {
  font-family: var(--rie-font);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

/* Off-site links: 16px external glyph 4px after the label (menu class
   `rie-external`, or any link to another host). */
:is(.rie-header, .rie-drawer, .rie-footer) .rie-icon--external {
  margin-left: var(--rie-space-1);
  vertical-align: -2px;
}

/* The 2px white hover bar used by the utility links, the nav and the panels. */
:is(a.rie-utility__link, a.rie-nav__link, a.rie-mega__link, a.rie-mega__head)::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: 2px;
  left: 0;
  height: 2px;
  border-radius: var(--rie-radius-sm);
  background-color: currentColor;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--rie-dur-fast) var(--rie-ease);
}


/* ---------------------------------------------------------------------------
   2. APPEAL BAR  .rie-appeal
   Royal band above the header while an appeal is live. The whole bar is one
   link (like the live `.rar` ribbon, which rie-legacy.css restyles to match).
   ≤480: title on line 1, figures + pill on line 2. The title stays visible at
   every width (down to 320px it still fits one line): hiding it would leave
   figures with no appeal name (WCAG 1.4.10 reflow).
   --------------------------------------------------------------------------- */

.rie-appeal {
  background-color: var(--rie-color-royal);
  color: var(--rie-color-white);
}

a.rie-appeal__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rie-space-1) var(--rie-space-4);
  max-width: var(--rie-chrome-max);
  min-height: 44px;
  margin-inline: auto;
  padding: 10px var(--rie-gutter);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-sm);
  text-align: center;
}

a.rie-appeal__link:is(:hover, :active, :visited) {
  color: var(--rie-color-white);
}

a.rie-appeal__link:focus-visible {
  outline-offset: -4px;
}

.rie-appeal__title {
  flex-basis: 100%;
}

.rie-appeal__figures {
  color: var(--rie-color-gold);                 /* 4.63:1 on royal, bold 14 */
  font-variant-numeric: tabular-nums;
}

.rie-appeal__cta {
  display: inline-flex;
  align-items: center;
  padding: 6px var(--rie-space-4);
  border-radius: var(--rie-radius-pill);
  background-color: var(--rie-color-white);
  color: var(--rie-color-royal);
  white-space: nowrap;
  transition: background-color var(--rie-dur-base) var(--rie-ease);
}

a.rie-appeal__link:hover .rie-appeal__cta  { background-color: var(--rie-color-hover-tint); }
a.rie-appeal__link:active .rie-appeal__cta { background-color: var(--rie-color-tint-press); }

@media (min-width: 481px) {
  .rie-appeal__title { flex-basis: auto; }
}


/* ---------------------------------------------------------------------------
   3. UTILITY BAR  .rie-utility  (≥1025 only)
   #28354B, 67px. Left: the district name as text. Right: RIE – Utility menu,
   16/24 700, 32px apart, 44px hit area, 2px hover bar.
   --------------------------------------------------------------------------- */

.rie-utility {
  display: none;
  background-color: var(--rie-color-ink-2);
  color: var(--rie-color-white);
}

.rie-utility__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rie-space-8);
  max-width: var(--rie-chrome-max);
  height: 67px;
  margin-inline: auto;
  padding-inline: var(--rie-gutter);
}

/* Doubled class: beats rotary-typography.css `body.elementor-kit-7 p { margin-block-end: 1em }` (0,1,2),
   which pushed the name 8px above the links. */
.rie-utility .rie-utility__name {
  margin: 0;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-body);
}

.rie-utility__nav {
  margin-left: auto;
}

.rie-utility__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 var(--rie-space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-utility__item {
  margin: 0;
}

a.rie-utility__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: 10px;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  white-space: nowrap;
}

a.rie-utility__link:is(:hover, :visited) { color: var(--rie-color-white); }
a.rie-utility__link:hover::after { opacity: 1; }
a.rie-utility__link:active { color: var(--rie-color-active); }
a.rie-utility__link:active::after { opacity: 1; }

@media (min-width: 1025px) {
  .rie-utility { display: block; }
}


/* ---------------------------------------------------------------------------
   4. MAIN BAR + PRIMARY NAV  .rie-header / .rie-nav
   Ink #212C3F. Mobile: 64px bar, logo 40, search + menu icons (24px glyphs
   in 44px targets, so 20px apart; no borders). Desktop: padding 24/16, logo
   64, actions 24px apart (Donate · Join a Club · 56px search circle), then
   the nav: 16/24 700 white, 32px apart, 2px hover/open/current bar 2px above
   the link's bottom edge, 24 below (on the items, so they meet the panel).
   Not sticky (rotary.org scrolls away).
   --------------------------------------------------------------------------- */

.rie-header {
  position: relative;                 /* the mega panels and the scrim hang from here */
  z-index: 1001;                      /* above Leaflet map panes/controls (400/1000) on /clubs/ */
  background-color: var(--rie-color-ink);
  color: var(--rie-color-white);
}

.rie-header__main {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rie-space-4);
  max-width: var(--rie-chrome-max);
  min-height: 64px;                             /* 64px bar; the 44px icon targets centre in it */
  margin-inline: auto;
  padding: 0 var(--rie-gutter);
}

a.rie-header__logo {
  display: inline-flex;
  flex: none;
  align-items: center;
  border-radius: var(--rie-radius-sm);
  line-height: 0;
}

.rie-header__logo-img {
  display: block;
  width: auto;
  max-width: none;
  height: 40px;
}

.rie-header__logo-text {                /* PHP fallback when no logo file exists */
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-bold);
  line-height: 40px;
}

.rie-header__actions {
  display: flex;
  align-items: center;
  gap: 0;
  margin-right: -10px;                           /* the 44px hit area overhangs by (44 − 24) / 2; the glyph sits on the gutter */
}

.rie-header__actions .rie-header__cta {        /* 0,2,0 beats a.rie-btn's display */
  display: none;
}

/* Search (and, below 1025, the menu button): bare 24px glyph in a 44px target
   (the two glyphs end up 20px apart) */
a.rie-header__search,
a.rie-header__menu {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 2px solid transparent;
  border-radius: var(--rie-radius-pill);
  background-color: transparent;
  color: var(--rie-color-white);
  transition: background-color var(--rie-dur-base) var(--rie-ease),
              border-color var(--rie-dur-base) var(--rie-ease),
              color var(--rie-dur-base) var(--rie-ease);
}

a.rie-header__search:is(:hover, :active, :visited),
a.rie-header__menu:is(:hover, :active, :visited) {
  color: var(--rie-color-white);
}

/* The menu glyph turns into a close glyph while the drawer is open. */
a.rie-header__menu[aria-expanded="true"] .rie-icon {
  --rie-icon: var(--rie-i-close);
}

/* Primary nav: desktop only */
.rie-nav {
  display: none;
}

.rie-nav__menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-nav__item {
  display: flex;
  align-items: center;
  margin: 0;
  padding-inline: var(--rie-space-4);          /* labels 32px apart */
}

.rie-nav__item:first-child {
  padding-left: 0;
}

a.rie-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding-block: 10px;                          /* 44px tall */
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  white-space: nowrap;
}

a.rie-nav__link:is(:hover, :visited) { color: var(--rie-color-white); }
a.rie-nav__link:active { color: var(--rie-color-active); }

a.rie-nav__link:is(:hover, :active, .is-current, [aria-current])::after,
.rie-nav__item.is-open > a.rie-nav__link::after {
  opacity: 1;
}

/* Disclosure toggle: a quiet 16px chevron after the label (WAI-ARIA
   disclosure navigation: the label stays a real link to the landing page). */
.rie-nav .rie-nav__toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 44px;
  margin: 0 0 0 2px;
  padding: 0;
  border: 0;
  border-radius: var(--rie-radius-sm);
  background-color: transparent;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  line-height: 1;
  opacity: .72;
  cursor: pointer;
  transition: opacity var(--rie-dur-fast) var(--rie-ease);
}

.rie-nav .rie-nav__toggle:is(:hover, :focus, :active) {
  border: 0;
  background-color: transparent;
  color: var(--rie-color-white);
  opacity: 1;
}

.rie-nav .rie-nav__toggle[aria-expanded="true"] {
  opacity: 1;
}

.rie-nav .rie-nav__toggle .rie-icon {
  transition: transform var(--rie-dur-fast) var(--rie-ease);
}

.rie-nav .rie-nav__toggle[aria-expanded="true"] .rie-icon {
  transform: rotate(180deg);
}

@media (min-width: 1025px) {
  .rie-header__main {
    min-height: 0;
    padding: var(--rie-space-6) var(--rie-gutter) var(--rie-space-4);
  }

  .rie-header__logo-img { height: 64px; }       /* §3: 64px so "District 1160" stays legible */

  .rie-header__actions {
    gap: var(--rie-space-6);
    margin-right: 0;
  }

  .rie-header__actions .rie-header__cta { display: inline-flex; }

  a.rie-header__search {
    width: 56px;
    height: 56px;
    border-color: var(--rie-color-white);
  }

  a.rie-header__search .rie-icon { --rie-icon-size: 32px; }

  a.rie-header__search:hover {
    border-color: var(--rie-color-tint);
    background-color: var(--rie-color-tint);
    color: var(--rie-color-royal);
  }

  a.rie-header__search:active {
    border-color: var(--rie-color-active);
    background-color: var(--rie-color-active);
    color: var(--rie-color-white);
  }

  a.rie-header__menu { display: none; }

  .rie-nav {
    display: block;
    max-width: var(--rie-chrome-max);
    margin-inline: auto;
    padding: 0 var(--rie-gutter);
  }

  /* The nav's 24px bottom padding lives on the items, so each item reaches
     down to the top of its panel: moving the pointer from a label into the
     panel never crosses a strip that belongs to neither (which would close it). */
  .rie-nav__item {
    padding-bottom: var(--rie-space-6);
  }
}


/* ---------------------------------------------------------------------------
   5. MEGA-MENU  .rie-mega  (≥1025; the nav is hidden below that)
   Full-width #212C3F panel directly under the header (top:100%), padding
   0 gutter 24. Inner grid: 4 columns, 20px gap, padding-right 64px and a
   1px dashed #D0CFCD rule on the right.
   - Flat panel (level-2 links only): 3 per column, automatically.
   - Grouped panel: a level-2 item with children is a bold header with its
     list 16px below; `rie-span-2` spreads that list over 2 columns; childless
     level-2 items (`rie-stack`) stack as bold header-only links in the next
     column, 60px apart.
   Links 16/24 400 in 50px rows (pb 4 + 2px bar). Scrim rgba(0,0,0,.5) + 8px blur.
   --------------------------------------------------------------------------- */

.rie-mega {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 2;
  background-color: var(--rie-color-ink);
  color: var(--rie-color-white);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--rie-dur-fast) var(--rie-ease),
              visibility 0s linear var(--rie-dur-fast);
}

.rie-mega.is-open,
:root:not(.rie-nav-js) .rie-nav__item:focus-within > .rie-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

:root:not(.rie-nav-js) .rie-nav__item:focus-within > a.rie-nav__link::after {
  opacity: 1;
}

@media (hover: hover) {
  :root:not(.rie-nav-js) .rie-nav__item:hover > .rie-mega {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
  }

  :root:not(.rie-nav-js) .rie-nav__item:hover > a.rie-nav__link::after {
    opacity: 1;
  }
}

.rie-mega__inner {
  max-width: var(--rie-chrome-max);
  margin-inline: auto;
  padding: 0 var(--rie-gutter) var(--rie-space-6);
}

.rie-mega__cols {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--rie-gap);
  margin: 0;
  padding: 0 var(--rie-space-16) 0 0;
  border-right: 1px dashed var(--rie-color-line);
  list-style: none;
}

.rie-mega--flat .rie-mega__cols {
  grid-auto-flow: column;
  grid-template-rows: repeat(3, auto);          /* 3 links per column */
}

.rie-mega__item,
.rie-mega__group,
.rie-mega__stack,
.rie-mega__solo {
  margin: 0;
}

.rie-mega__item {
  padding-block: 11px;                          /* 11 + 28 + 11 = 50px rows */
}

.rie-mega__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rie-space-4);                      /* header → list 16px */
}

.rie-mega__group.rie-span-2 {
  grid-column: span 2;
}

.rie-mega__list,
.rie-mega__stack-list {
  align-self: stretch;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-mega__group.rie-span-2 > .rie-mega__list {
  columns: 2;
  column-gap: var(--rie-gap);
}

.rie-mega__group.rie-span-2 > .rie-mega__list > .rie-mega__item {
  break-inside: avoid;
}

.rie-mega__stack-list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rie-space-8);                      /* header-only items 60px apart */
}

a.rie-mega__link,
a.rie-mega__head {
  position: relative;
  display: inline-block;
  max-width: 100%;
  padding-bottom: var(--rie-space-1);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  overflow-wrap: break-word;
}

a.rie-mega__link { font-weight: var(--rie-fw-regular); }
a.rie-mega__head { font-weight: var(--rie-fw-bold); }

:is(a.rie-mega__link, a.rie-mega__head)::after { bottom: 0; }

:is(a.rie-mega__link, a.rie-mega__head):is(:hover, :visited) { color: var(--rie-color-white); }
:is(a.rie-mega__link, a.rie-mega__head):is(:hover, :active)::after { opacity: 1; }
:is(a.rie-mega__link, a.rie-mega__head):active { color: var(--rie-color-active); }
:is(a.rie-mega__link, a.rie-mega__head)[aria-current="page"]::after { opacity: 1; }

/* Scrim over the page while a panel is open (sits under the panel). */
.rie-header__scrim {
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 1;
  height: 100vh;
  background-color: var(--rie-scrim);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--rie-dur-fast) var(--rie-ease),
              visibility 0s linear var(--rie-dur-fast);
}

.rie-header.is-mega-open .rie-header__scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* No-JS fallback in its own rule: a browser without :has() drops only this. */
:root:not(.rie-nav-js) .rie-header:has(.rie-nav__item:focus-within > .rie-mega) .rie-header__scrim {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

@media (hover: hover) {
  :root:not(.rie-nav-js) .rie-header:has(.rie-nav__item:hover > .rie-mega) .rie-header__scrim {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
  }
}


/* ---------------------------------------------------------------------------
   6. MOBILE DRAWER  .rie-drawer  (≤1024)
   Fixed, slides in from the right over 300ms; full width ≤768, 52% at
   769–1024; backdrop 50% black + 3px blur. Close row (64px, X where the menu
   icon was) → four <details> sections (summary 16/24 700, 44px, chevron turns
   180°; "Go to {section}" first, then the children at 400, group headers 700)
   → utility links 400 → district name 14/21 at 80% → sticky footer: Donate +
   Join a Club, full width, 16px apart, padding 20.
   rie-nav.js makes it a modal dialog: focus trap, inert background, scroll
   lock, Esc, focus returned to the menu button.
   --------------------------------------------------------------------------- */

.rie-drawer {
  position: fixed;
  inset: 0;
  z-index: 99990;                     /* above the header, below the WP admin bar (99999) */
  color: var(--rie-color-white);
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear var(--rie-dur-slow);
}

.admin-bar .rie-drawer {
  top: var(--wp-admin--admin-bar--height, 0px);
}

.rie-drawer.is-open,
:root:not(.rie-nav-js) .rie-drawer:target {
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.rie-drawer__backdrop {
  position: absolute;
  inset: 0;
  background-color: var(--rie-scrim);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity var(--rie-dur-slow) var(--rie-ease-out);
}

.rie-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: var(--rie-color-ink);
  transform: translateX(100%);
  transition: transform var(--rie-dur-slow) var(--rie-ease-out);
}

.rie-drawer.is-open .rie-drawer__backdrop,
:root:not(.rie-nav-js) .rie-drawer:target .rie-drawer__backdrop {
  opacity: 1;
}

.rie-drawer.is-open .rie-drawer__panel,
:root:not(.rie-nav-js) .rie-drawer:target .rie-drawer__panel {
  transform: none;
}

:root.rie-drawer-open,
:root.rie-drawer-open body {
  overflow: hidden;                              /* scroll lock (set by rie-nav.js) */
}

.rie-drawer__top {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: flex-end;
  min-height: 64px;
  padding: 0 var(--rie-gutter);
}

a.rie-drawer__close {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 44px;                                   /* 24px glyph in a 44px target */
  height: 44px;
  margin-right: -10px;                           /* the glyph sits on the gutter, where the menu glyph was */
  border-radius: var(--rie-radius-pill);
  color: var(--rie-color-white);
}

a.rie-drawer__close:is(:hover, :active, :visited) { color: var(--rie-color-white); }

.rie-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: var(--rie-space-1) var(--rie-gutter) var(--rie-space-6);
}

.rie-drawer__menu,
.rie-drawer__list,
.rie-drawer__sublist,
.rie-drawer__util-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-drawer__item,
.rie-drawer__entry,
.rie-drawer__util-item {
  margin: 0;
}

summary.rie-drawer__summary,
a.rie-drawer__toplink {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rie-space-4);
  min-height: 44px;
  padding-block: 10px;
  border-radius: var(--rie-radius-sm);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  cursor: pointer;
  list-style: none;
}

summary.rie-drawer__summary::-webkit-details-marker { display: none; }
summary.rie-drawer__summary::marker { content: ""; }

summary.rie-drawer__summary .rie-icon {
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

.rie-drawer__section[open] > summary.rie-drawer__summary .rie-icon {
  transform: rotate(180deg);
}

.rie-drawer__list {
  padding: 0 0 var(--rie-space-3) var(--rie-space-4);
}

.rie-drawer__sublist {
  padding-bottom: var(--rie-space-2);
}

a.rie-drawer__link,
a.rie-drawer__util-link {
  display: flex;
  align-items: center;
  gap: var(--rie-space-2);
  min-height: 44px;
  padding-block: 10px;
  border-radius: var(--rie-radius-sm);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
}

a.rie-drawer__link--head,
a.rie-drawer__toplink {
  font-weight: var(--rie-fw-bold);
}

.rie-drawer__entry--group {
  margin-top: var(--rie-space-2);
}

:is(a.rie-drawer__link, a.rie-drawer__toplink, a.rie-drawer__util-link):is(:hover, :active, :visited) {
  color: var(--rie-color-white);
}

:is(a.rie-drawer__link, a.rie-drawer__toplink, a.rie-drawer__util-link):hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(a.rie-drawer__link, a.rie-drawer__toplink, a.rie-drawer__util-link):active {
  color: var(--rie-color-active);
}

:is(a.rie-drawer__link, a.rie-drawer__toplink)[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

.rie-drawer__util {
  margin-top: var(--rie-space-6);
  padding-top: var(--rie-space-3);
  border-top: 1px solid var(--rie-color-line);
}

.rie-drawer__name {
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-white);
  opacity: .8;                                   /* white at 80% (§5.4) */
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

.rie-drawer__footer {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: var(--rie-space-4);
  padding: var(--rie-space-5);
  background-color: var(--rie-color-ink);
}

.rie-drawer__footer .rie-btn {                  /* 0,2,0 beats a.rie-btn */
  width: 100%;
}

@media (min-width: 769px) {
  .rie-drawer__panel { width: 52%; }
}

@media (min-width: 1025px) {
  .rie-drawer { display: none; }
}


/* ---------------------------------------------------------------------------
   7. FOOTER  .rie-footer
   #212C3F. Rows 20px (24 from 769) above and below, split by full-width
   1px #D0CFCD rules: utility row (bold, external icons) → 4 link columns +
   CTA column → legal row (PoA lockup, legal links, © and charity line).
   ≤768: the columns are <details> accordions (56px rows, rules, hover
   #28354B); the pills go full width. rie-nav.js keeps them open from 769.
   Every link keeps a 44px hit area (utility and legal rows 44px tall, social
   discs 30px with a 44px ::before).
   --------------------------------------------------------------------------- */

.rie-footer {
  background-color: var(--rie-color-ink);
  color: var(--rie-color-white);
}

.rie-footer__row {
  padding-block: var(--rie-space-5);
}

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

.rie-footer__inner {
  max-width: var(--rie-chrome-max);
  margin-inline: auto;
  padding-inline: var(--rie-gutter);
}

/* Row 1: utility links (44px rows; the list pulls up and down by the extra
   padding so the labels keep their place against the row's rules) */
.rie-footer__util-menu {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: calc(var(--rie-space-1) - 10px) 0;
  padding: 0;
  list-style: none;
}

.rie-footer__util-item { margin: 0; }

a.rie-footer__util-link {
  display: inline-block;
  padding-block: 10px;                           /* 44px hit area */
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
}

/* Row 2: link columns (accordions on mobile) + CTA column */
.rie-footer__row--main {
  padding-top: 0;
}

.rie-footer__main {
  padding-inline: 0;                             /* accordion rows run edge to edge on mobile */
}

.rie-footer__col {
  margin: 0;
  border-bottom: 1px solid var(--rie-color-line);
}

summary.rie-footer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--rie-space-4);
  min-height: 56px;
  padding: var(--rie-space-4) var(--rie-gutter);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--rie-dur-fast) var(--rie-ease);
}

summary.rie-footer__head::-webkit-details-marker { display: none; }
summary.rie-footer__head::marker { content: ""; }
summary.rie-footer__head:hover { background-color: var(--rie-color-ink-2); }

.rie-footer summary.rie-footer__head:focus-visible {
  outline-offset: -4px;                          /* full-bleed row: keep the ring on screen */
}

summary.rie-footer__head .rie-icon {
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

.rie-footer__acc[open] > summary.rie-footer__head .rie-icon {
  transform: rotate(180deg);
}

.rie-footer__links {
  margin: 0;
  padding: 0 var(--rie-gutter) var(--rie-space-3);
  list-style: none;
}

.rie-footer__item { margin: 0; }

a.rie-footer__link {
  display: inline-block;
  padding-block: 10px;                            /* 44px rows */
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
}

.rie-footer__contact {
  margin: 0;
  padding: 10px var(--rie-gutter) var(--rie-space-5);
  color: var(--rie-color-white);
  font-size: var(--rie-fs-body);
  font-style: normal;
  line-height: var(--rie-lh-body);
}

.rie-footer__contact p {
  margin: 0 0 var(--rie-space-4);
}

.rie-footer__contact p:last-child {
  margin-bottom: 0;
}

a.rie-footer__contact-link {
  color: var(--rie-color-white);
  font-weight: var(--rie-fw-bold);
}

.rie-footer__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rie-space-5);
  padding: var(--rie-space-5) var(--rie-gutter) 0;
}

.rie-footer__cta-title {
  max-width: 8em;                                /* "Help create / lasting change" on two lines */
  margin: 0;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-h4);                   /* 20/30 → 24/36 at 1025 */
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h4);
}

.rie-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rie-space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-footer__social li { margin: 0; }

a.rie-footer__social-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--rie-radius-pill);
  background-color: var(--rie-color-white);
  color: var(--rie-color-royal);
  transition: background-color var(--rie-dur-base) var(--rie-ease);
}

/* The 30px disc keeps a 44px hit area (7px all round). */
a.rie-footer__social-link::before {
  content: "";
  position: absolute;
  inset: -7px;
}

a.rie-footer__social-link:is(:hover, :active, :visited) { color: var(--rie-color-royal); }
a.rie-footer__social-link:hover  { background-color: var(--rie-color-hover-tint); }
a.rie-footer__social-link:active { background-color: var(--rie-color-tint-press); }

.rie-footer__social .rie-icon {
  --rie-icon-size: 16px;
}

.rie-footer__actions {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-4);
  width: 100%;
}

.rie-footer__actions .rie-btn {                  /* 0,2,0 beats a.rie-btn */
  width: 100%;
}

/* Row 3: legal */
.rie-footer__legal {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rie-space-4);
}

a.rie-footer__logo {
  display: inline-flex;
  flex: none;
  border-radius: var(--rie-radius-sm);
  line-height: 0;
}

.rie-footer__logo-img {
  display: block;
  width: auto;
  max-width: 100%;
  height: 40px;
}

.rie-footer__legal-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--rie-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-footer__legal-item { margin: 0; }

a.rie-footer__legal-link,
.rie-footer .rie-footer__cookie {
  display: inline-block;
  margin: 0;
  padding: 10px 0;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  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);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  cursor: pointer;
}

.rie-footer .rie-footer__cookie:is(:hover, :focus, :active) {
  border: 0;
  background-color: transparent;
  color: var(--rie-color-white);
}

.rie-footer__copy {
  margin: var(--rie-space-2) 0 0;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

a.rie-footer__copy-link {
  color: var(--rie-color-white);
  font-weight: var(--rie-fw-bold);
  white-space: nowrap;
}

/* Footer link states: white, underline on hover, #20BBE6 while pressed */
:is(a.rie-footer__util-link, a.rie-footer__link, a.rie-footer__contact-link,
    a.rie-footer__legal-link, a.rie-footer__copy-link):is(:hover, :visited) {
  color: var(--rie-color-white);
}

:is(a.rie-footer__util-link, a.rie-footer__link, a.rie-footer__contact-link,
    a.rie-footer__legal-link, a.rie-footer__copy-link):hover,
.rie-footer .rie-footer__cookie:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(a.rie-footer__util-link, a.rie-footer__link, a.rie-footer__contact-link,
    a.rie-footer__legal-link, a.rie-footer__copy-link):active {
  color: var(--rie-color-active);
}

@media (min-width: 769px) {
  .rie-footer__row { padding-block: var(--rie-space-6); }

  .rie-footer__util-menu {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 var(--rie-space-8);
  }

  .rie-footer__main {
    display: grid;
    gap: var(--rie-space-8) var(--rie-gap);
    padding-inline: var(--rie-gutter);
  }

  .rie-footer__cols {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--rie-gap);
  }

  .rie-footer__col { border-bottom: 0; }

  /* Columns are always open from 769 (rie-nav.js keeps [open]); the summary
     becomes a plain column head. */
  summary.rie-footer__head {
    min-height: 0;
    padding: 10px 0;
    cursor: default;
    pointer-events: none;
  }

  summary.rie-footer__head:hover { background-color: transparent; }
  summary.rie-footer__head .rie-icon { display: none; }

  .rie-footer__links { padding: 0; }
  .rie-footer__contact { padding: 10px 0 0; }

  /* 769–1024: the CTA column sits under the four link columns as one
     full-width row (heading · social discs · pills). From 1025 it is the
     narrow fifth column again. */
  .rie-footer__cta {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--rie-space-5) var(--rie-gap);
    padding: 0;
  }

  .rie-footer__actions {
    flex-direction: row;
    flex-wrap: wrap;
    width: auto;
  }

  .rie-footer__actions .rie-btn { width: auto; }

  .rie-footer__legal-menu { column-gap: var(--rie-space-8); }
}

@media (min-width: 1025px) {
  .rie-footer__util-menu { column-gap: var(--rie-space-16); }

  .rie-footer__main {
    grid-template-columns: minmax(0, 1fr) 288px;  /* 4 × ~232px columns + CTA column (both pills fit on one row) */
    align-items: start;
  }

  .rie-footer__cta {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: var(--rie-space-5);
  }

  .rie-footer__logo-img { height: 53px; }

  .rie-footer__legal {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--rie-space-8);
  }

  .rie-footer__legal-body { text-align: right; }
  .rie-footer__legal-menu { justify-content: flex-end; }
}


/* ---------------------------------------------------------------------------
   8. BREADCRUMB  .rie-breadcrumb
   14/21. Links #17458F 600 (hover #0067C8 + underline), current #717171,
   "/" with 8px each side. 24px below the header, above the hero, on the
   same box as the contained hero. Two DOMs:
   - Plain: <nav class="rie-breadcrumb" aria-label="Breadcrumb"><ol>
              <li><a>…</a></li> … <li><span aria-current="page">…</span></li></ol></nav>
   - Rank Math ([rank_math_breadcrumb] in a Shortcode widget with class
     rie-breadcrumb, or rank_math_the_breadcrumbs() inside <div class="rie-breadcrumb">):
       nav.rank-math-breadcrumb > p > a + span.separator + … + span.last
     The bare Rank Math markup is styled too. Whatever separator is set in
     Rank Math, a "/" is drawn (and hidden from screen readers).
   --------------------------------------------------------------------------- */

.rie-breadcrumb {
  width: min(var(--rie-max), 100% - 2 * var(--rie-gutter));
  margin: var(--rie-space-6) auto 0;
}

body .elementor-widget.rie-breadcrumb {
  width: min(var(--rie-max), 100% - 2 * var(--rie-gutter));
  max-width: none;
  margin: var(--rie-space-6) auto 0;
}

/* Inside a boxed section it simply fills the box. */
:is(.rie-container, .rie-section, .e-con-inner) .rie-breadcrumb,
body :is(.rie-container, .rie-section, .e-con-inner) .elementor-widget.rie-breadcrumb {
  width: auto;
  margin-inline: 0;
}

.rie-breadcrumb,
.rank-math-breadcrumb {
  color: var(--rie-color-muted);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
}

.rie-breadcrumb :is(ol, ul) {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-breadcrumb li {
  margin: 0;
}

.rie-breadcrumb li + li::before {
  content: "/";
  content: "/" / "";
  margin-inline: var(--rie-space-2);
  color: var(--rie-color-muted);
}

.rank-math-breadcrumb p {
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

.rank-math-breadcrumb .separator {
  font-size: 0;                                  /* hide the configured glyph and its spaces … */
}

.rank-math-breadcrumb .separator::before {
  content: "/";
  content: "/" / "";                             /* … and draw "/" with 8px each side */
  margin-inline: var(--rie-space-2);
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
}

:is(.rie-breadcrumb, .rank-math-breadcrumb) a {
  border-radius: var(--rie-radius-xs);
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-semibold);
  text-decoration: none;
}

:is(.rie-breadcrumb, .rank-math-breadcrumb) a:hover {
  color: var(--rie-color-azure);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:is(.rie-breadcrumb, .rank-math-breadcrumb) a:active {
  color: var(--rie-color-active);
}

.rie-breadcrumb [aria-current],
.rank-math-breadcrumb .last {
  color: var(--rie-color-muted);
  font-weight: var(--rie-fw-regular);
}


/* ---------------------------------------------------------------------------
   9. SECTION SUB-NAV  .rie-subnav
   A row of tabs, 16px apart, 24px above and below. Tab 16/24 600 #323C44 →
   hover #17458F; current (aria-current or .current-menu-item) #17458F with a
   4px rounded bar 8px below the label. 1 × 44px #D0CFCD separator before the
   last tab of a menu ("Submit a Story"), or where .rie-subnav__sep is placed.
   ≤1024: one row that scrolls sideways, with 36px fades at the edges (the
   brief's ≤768 rule, extended: the 8-tab News row does not fit at 769–1024
   and wrapping left "Submit a Story" alone on a second line). Keyboard focus
   scrolls a tab clear of the fades (scroll-padding + rie-nav.js). ≥1025: the
   row wraps if it ever has to.
   Two DOMs:
   - Plain:  <nav class="rie-subnav" aria-label="…"><a …>…</a> … <span class="rie-subnav__sep" aria-hidden="true"></span> <a>…</a></nav>
   - WP menu ([rie_subnav location="news"] → wp_nav_menu):
             <nav class="rie-subnav" aria-label="…"><ul class="…"><li class="menu-item current-menu-item"><a aria-current="page">…</a></li>…</ul></nav>
   --------------------------------------------------------------------------- */

@property --rie-fade-l {
  syntax: "<length>";
  inherits: false;
  initial-value: 0px;
}

@property --rie-fade-r {
  syntax: "<length>";
  inherits: false;
  initial-value: 36px;
}

.rie-subnav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--rie-space-4);
  margin: var(--rie-space-6) calc(-1 * var(--rie-space-1));
  padding: var(--rie-space-1) 36px var(--rie-space-1) var(--rie-space-1);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: 36px;                   /* a tab under a fade counts as out of view */
  scrollbar-width: none;
  font-family: var(--rie-font);
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--rie-fade-l), #000 calc(100% - var(--rie-fade-r)), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 var(--rie-fade-l), #000 calc(100% - var(--rie-fade-r)), transparent 100%);
}

.rie-subnav::-webkit-scrollbar { display: none; }

@supports (animation-timeline: scroll()) {
  .rie-subnav {
    animation: rie-subnav-fade linear both;
    animation-timeline: scroll(self inline);
  }

  @keyframes rie-subnav-fade {
    0%   { --rie-fade-l: 0px;  --rie-fade-r: 36px; }
    8%   { --rie-fade-l: 36px; --rie-fade-r: 36px; }
    92%  { --rie-fade-l: 36px; --rie-fade-r: 36px; }
    100% { --rie-fade-l: 36px; --rie-fade-r: 0px; }
  }
}

.rie-subnav :is(ul, ol) {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--rie-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-subnav li {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--rie-space-4);
  margin: 0;
}

.rie-subnav a {
  display: inline-flex;
  flex: none;
  flex-direction: column;
  align-items: stretch;
  gap: var(--rie-space-2);
  padding-top: var(--rie-space-2);
  border-radius: var(--rie-radius-sm);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h6);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h6);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--rie-dur-fast) var(--rie-ease);
}

.rie-subnav a::after {
  content: "";
  height: 4px;
  border-radius: var(--rie-radius-sm);
  background-color: transparent;
}

.rie-subnav a:hover {
  color: var(--rie-color-royal);
}

.rie-subnav a:is([aria-current="page"], [aria-current="true"]),
.rie-subnav .current-menu-item > a {
  color: var(--rie-color-royal);
}

.rie-subnav a:is([aria-current="page"], [aria-current="true"])::after,
.rie-subnav .current-menu-item > a::after {
  background-color: var(--rie-color-royal);
}

.rie-subnav a:active {
  color: var(--rie-color-active);
}

.rie-subnav__sep,
.rie-subnav li:last-child:not(:first-child)::before {
  content: "";
  display: block;
  flex: none;
  width: 1px;
  height: 44px;
  background-color: var(--rie-color-line);
}

@media (min-width: 1025px) {
  .rie-subnav {
    flex-wrap: wrap;
    margin-inline: 0;
    padding: 0;
    overflow: visible;
    scroll-padding-inline: 0;
    animation: none;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .rie-subnav :is(ul, ol) {
    flex: 0 1 auto;                              /* the menu list may shrink, so its tabs can wrap */
    flex-wrap: wrap;
    min-width: 0;
  }
}


/* ===== 30-atoms.css ===== */
/* =============================================================================
   rie.css · 30 ATOMS
   Icons, buttons (+ Elementor Button twin), icon buttons, badges, divider,
   link with arrow, search box, pagination, form skin.
   Spec: DESIGN-BRIEF §1 move 3, §4.2, §2.9. All values via --rie-* tokens.

   Dual DOM: every atom works as plain markup (class on the element) and as
   Elementor 4.3 markup (class on the widget wrapper). Elementor twin rules are
   prefixed with `body` so they outrank Elementor's global widget defaults
   (0,2,0) whatever order the files load in; panel values (0,4,0) still win,
   so leave the panel empty on widgets that carry a rie- class.
   ============================================================================= */


/* ---------------------------------------------------------------------------
   1. ICONS — CSS only: SVG data-URIs in custom properties, painted with mask
   Glyphs: Material Symbols Rounded (Apache-2.0; weight 600 for line glyphs,
   filled 400 for solid ones) and Simple Icons (CC0) for the five social brands.
   Usage:  <span class="rie-icon rie-icon--arrow-right" aria-hidden="true"></span>
   The glyph takes currentColor. Default 24px; --sm 16, --md 20, --lg 32.
   Other partials can reuse a glyph in a pseudo-element:
     mask: var(--rie-i-external) center / contain no-repeat;
   --------------------------------------------------------------------------- */

:root {
  --rie-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M374.61-319.39q-112.12 0-189.87-77.83Q107-475.04 107-585q0-109.96 77.83-187.78 77.82-77.83 188.28-77.83 110.46 0 187.78 77.83 77.33 77.82 77.33 187.93 0 43.98-13.15 83.13-13.16 39.15-39.46 73.59l238.61 236.61q11.82 11.95 11.82 28.84 0 16.9-11.82 28.72-12.39 12.4-29.29 12.4t-28.28-12.4L529.04-371q-29.43 24.3-69.11 37.96-39.67 13.65-85.32 13.65Zm-1-79.22q77.86 0 131.62-54.39Q559-507.39 559-585t-53.77-132q-53.76-54.39-131.62-54.39-78.13 0-132.76 54.39-54.63 54.39-54.63 132t54.63 132q54.63 54.39 132.76 54.39Z'/%3E%3C/svg%3E");
  --rie-i-menu: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M145.48-219.09q-16.71 0-28.16-11.5t-11.45-28.56q0-17.07 11.45-28.39 11.45-11.33 28.16-11.33h669.04q16.71 0 28.44 11.5 11.74 11.5 11.74 28.57 0 17.06-11.74 28.39-11.73 11.32-28.44 11.32H145.48Zm0-221.3q-16.71 0-28.16-11.5t-11.45-28.29q0-16.78 11.45-28.1 11.45-11.33 28.16-11.33h669.04q16.71 0 28.44 11.5 11.74 11.5 11.74 28.29 0 16.78-11.74 28.1-11.73 11.33-28.44 11.33H145.48Zm0-220.74q-16.71 0-28.16-11.5t-11.45-28.57q0-17.06 11.45-28.39 11.45-11.32 28.16-11.32h669.04q16.71 0 28.44 11.5 11.74 11.5 11.74 28.56 0 17.07-11.74 28.39-11.73 11.33-28.44 11.33H145.48Z'/%3E%3C/svg%3E");
  --rie-i-close: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-424.43 276.78-221.22q-11.82 11.83-27.78 11.83t-27.78-11.83q-11.83-11.82-11.83-27.78t11.83-27.78L424.43-480 221.22-683.22q-11.83-11.82-11.83-27.78t11.83-27.78q11.82-11.83 27.78-11.83t27.78 11.83L480-535.57l203.22-203.21q11.82-11.83 27.78-11.83t27.78 11.83q11.83 11.82 11.83 27.78t-11.83 27.78L535.57-480l203.21 203.22q11.83 11.82 11.83 27.78t-11.83 27.78q-11.82 11.83-27.78 11.83t-27.78-11.83L480-424.43Z'/%3E%3C/svg%3E");
  --rie-i-chevron-down: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M465.04-349.52q-7.26-3.13-13.39-9.26L254.22-556.22q-11.83-11.82-11.33-28.28t12.33-28.28q11.82-11.83 28.28-11.83t28.28 11.83L480-443.57l169.22-169.21q11.82-11.83 27.78-11.33t27.78 12.33q11.83 11.82 11.83 28.28t-11.83 28.28L508.35-358.78q-6.13 6.13-13.39 9.26-7.26 3.13-14.96 3.13-7.7 0-14.96-3.13Z'/%3E%3C/svg%3E");
  --rie-i-chevron-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m419.57-481 170.21 170.22q11.83 11.82 11.33 27.78t-12.33 27.78q-11.82 11.83-28.28 11.83t-28.28-11.83L334.78-452.65q-6.13-6.13-9.26-13.39-3.13-7.26-3.13-14.96 0-7.7 3.13-14.96 3.13-7.26 9.26-13.39l198.44-198.43q11.82-11.83 28.28-11.83t28.28 11.83q11.83 11.82 11.83 28.28t-11.83 28.28L419.57-481Z'/%3E%3C/svg%3E");
  --rie-i-chevron-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M516.43-481 346.22-651.22q-11.83-11.82-11.33-27.78t12.33-27.78q11.82-11.83 28.28-11.83t28.28 11.83l197.44 197.43q6.13 6.13 9.26 13.39 3.13 7.26 3.13 14.96 0 7.7-3.13 14.96-3.13 7.26-9.26 13.39L402.78-254.22q-11.82 11.83-27.78 11.33t-27.78-12.33q-11.83-11.82-11.83-28.28t11.83-28.28L516.43-481Z'/%3E%3C/svg%3E");
  --rie-i-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M662.82-440.39H185.48q-16.96 0-28.28-11.33-11.33-11.32-11.33-28.28t11.33-28.28q11.32-11.33 28.28-11.33h477.34l-210.6-210.61q-11.83-11.82-12.11-28.06-.28-16.24 11.54-28.63 11.83-11.83 28.35-11.55 16.52.29 28.35 12.11l278 278q6.13 6.13 9.26 13.39 3.13 7.26 3.13 14.96 0 7.7-3.13 14.96-3.13 7.26-9.26 13.39l-278.57 278q-12.39 12.39-28.35 12.39-15.95 0-27.78-12.39-11.82-11.83-11.82-27.78 0-15.96 11.82-27.79l211.17-211.17Z'/%3E%3C/svg%3E");
  --rie-i-arrow-left: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m297.18-440.39 210.6 210.61q11.83 11.87 12.11 28.09.28 16.21-11.54 28.28-11.83 12.15-28.25 11.87-16.42-.29-28.45-12.11l-278-278q-6.08-6.23-9.23-13.5-3.16-7.28-3.16-14.91 0-7.64 3.16-14.87 3.15-7.23 9.23-13.42l278.57-278.56q12.67-11.83 28.49-11.83 15.81 0 27.64 11.83 11.82 12.39 11.82 28.31 0 15.92-11.82 27.82L297.18-519.61h477.34q16.89 0 28.53 11.33Q814.7-496.96 814.7-480t-11.65 28.28q-11.64 11.33-28.53 11.33H297.18Z'/%3E%3C/svg%3E");
  --rie-i-external: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M185.09-105.87q-32.51 0-55.87-23.35-23.35-23.36-23.35-55.87v-589.82q0-32.74 23.35-56.26 23.36-23.53 55.87-23.53h234.3q16.71 0 28.16 11.84Q459-831.03 459-814.3q0 16.73-11.45 28.06-11.45 11.33-28.16 11.33h-234.3v589.82h589.82v-234.3q0-16.71 11.5-28.16Q797.92-459 814.65-459q16.73 0 28.39 11.45t11.66 28.16v234.3q0 32.51-23.53 55.87-23.52 23.35-56.26 23.35H185.09Zm589.82-613.04L422.78-366.22q-12.26 11.83-27.72 11.05-15.45-.79-27.28-12.61-11.82-11.83-11.82-27.5 0-15.68 11.82-27.5l352.13-352.13h-161.3q-16.71 0-28.16-11.5Q519-797.92 519-814.65q0-16.73 11.45-28.39t28.16-11.66h255.91q16.64 0 28.41 11.77t11.77 28.41v255.91q0 16.71-11.84 28.16Q831.03-519 814.3-519q-16.73 0-28.06-11.45-11.33-11.45-11.33-28.16v-160.3Z'/%3E%3C/svg%3E");
  --rie-i-download: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M465.07-337.2q-7.23-3.16-13.42-9.24L294.43-503.65q-11.82-12.1-11.32-28.42t11.93-28.15q12.45-11.91 28.79-11.59 16.34.33 28.17 12.16l88.39 88.82v-303.69q0-16.64 11.5-28.41t28.29-11.77q16.78 0 28.1 11.77 11.33 11.77 11.33 28.41v303.69L609-559.65q11.63-11.83 27.31-11.94 15.69-.11 27.95 11.76 12.13 11.87 11.85 28.51-.28 16.64-12.11 28.67L508.35-346.44q-6.23 6.08-13.64 9.24t-14.91 3.16q-7.5 0-14.73-3.16ZM225.09-145.87q-32.51 0-55.87-23.35-23.35-23.36-23.35-55.87v-103.39q0-16.7 11.5-28.16 11.5-11.45 28.28-11.45t28.11 11.45q11.33 11.46 11.33 28.16v103.39h509.82v-103.39q0-16.7 11.5-28.16 11.51-11.45 28.24-11.45 16.73 0 28.39 11.45 11.66 11.46 11.66 28.16v103.39q0 32.51-23.53 55.87-23.52 23.35-56.26 23.35H225.09Z'/%3E%3C/svg%3E");
  --rie-i-pdf: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M368-514h48q15.73 0 26.36-10.64Q453-535.28 453-551v-48q0-15.72-10.64-26.36Q431.73-636 416-636h-66q-7.6 0-13.3 5-5.7 5-5.7 13.41v168.18q0 8.41 5.5 13.41t13.5 5q8 0 13-5.7t5-13.3v-64Zm0-37v-48h48v48h-48Zm213 120q15 0 26-10.64 11-10.63 11-26.36v-131q0-15.72-11-26.36Q596-636 581-636h-65q-7.6 0-13.3 5-5.7 5-5.7 13.36v167.28q0 8.36 5.7 13.86T516-431h65Zm-47-37v-131h47v131h-47Zm170-46h32q8 0 13-5.5t5-13.5q0-8-5-13t-13-5h-32v-48h32q8 0 13-5.5t5-13.5q0-8-5-13t-13-5h-50q-7.6 0-13.3 5-5.7 5-5.7 13.41v168.18q0 8.41 5.5 13.41t13.5 5q8 0 13-5.7t5-13.3v-64ZM260-200q-24 0-42-18t-18-42v-560q0-24 18-42t42-18h560q24 0 42 18t18 42v560q0 24-18 42t-42 18H260ZM140-80q-24 0-42-18t-18-42v-590q0-12.75 8.68-21.38 8.67-8.62 21.5-8.62 12.82 0 21.32 8.62 8.5 8.63 8.5 21.38v590h590q12.75 0 21.38 8.68 8.62 8.67 8.62 21.5 0 12.82-8.62 21.32Q742.75-80 730-80H140Z'/%3E%3C/svg%3E");
  --rie-i-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M320-258v-450q0-14 9-22t21-8q4 0 8 1t8 3l354 226q7 5 10.5 11t3.5 14q0 8-3.5 14T720-458L366-232q-4 2-8 3t-8 1q-12 0-21-8t-9-22Z'/%3E%3C/svg%3E");
  --rie-i-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M615-200q-24.75 0-42.37-17.63Q555-235.25 555-260v-440q0-24.75 17.63-42.38Q590.25-760 615-760h55q24.75 0 42.38 17.62Q730-724.75 730-700v440q0 24.75-17.62 42.37Q694.75-200 670-200h-55Zm-325 0q-24.75 0-42.37-17.63Q230-235.25 230-260v-440q0-24.75 17.63-42.38Q265.25-760 290-760h55q24.75 0 42.38 17.62Q405-724.75 405-700v440q0 24.75-17.62 42.37Q369.75-200 345-200h-55Z'/%3E%3C/svg%3E");
  --rie-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M185.09-65.87q-32.51 0-55.87-23.35-23.35-23.36-23.35-55.87v-609.82q0-32.74 23.35-56.26 23.36-23.53 55.87-23.53H245v-22.91q0-15.38 10.8-26.23 10.81-10.86 26.41-10.86 15.61 0 26.5 10.86 10.9 10.85 10.9 26.23v22.91h320.78v-22.91q0-15.38 10.81-26.23 10.8-10.86 26.4-10.86 15.61 0 26.5 10.86 10.9 10.85 10.9 26.23v22.91h59.91q32.74 0 56.26 23.53 23.53 23.52 23.53 56.26v609.82q0 32.51-23.53 55.87-23.52 23.35-56.26 23.35H185.09Zm0-79.22h589.82V-570H185.09v424.91Zm0-484.91h589.82v-124.91H185.09V-630Zm0 0v-124.91V-630Zm294.97 233.39q-18.42 0-30.93-12.57-12.52-12.57-12.52-30.76t12.46-30.82q12.45-12.63 30.87-12.63t30.93 12.57q12.52 12.57 12.52 30.76t-12.46 30.82q-12.45 12.63-30.87 12.63Zm-190.82-12.57q-12.63-12.57-12.63-30.76t12.57-30.82q12.57-12.63 30.76-12.63t30.82 12.57q12.63 12.57 12.63 30.76t-12.57 30.82q-12.57 12.63-30.76 12.63t-30.82-12.57Zm350.82 12.57q-17.63 0-30.54-12.57t-12.91-30.76q0-18.19 12.85-30.82 12.86-12.63 30.76-12.63 17.91 0 30.54 12.57 12.63 12.57 12.63 30.76t-12.46 30.82q-12.45 12.63-30.87 12.63Zm-160 160q-18.42 0-30.93-12.85-12.52-12.86-12.52-30.76 0-17.91 12.46-30.54 12.45-12.63 30.87-12.63t30.93 12.46q12.52 12.45 12.52 30.87 0 17.63-12.46 30.54-12.45 12.91-30.87 12.91Zm-190.82-12.85q-12.63-12.86-12.63-30.76 0-17.91 12.57-30.54 12.57-12.63 30.76-12.63t30.82 12.46q12.63 12.45 12.63 30.87 0 17.63-12.57 30.54t-30.76 12.91q-18.19 0-30.82-12.85Zm350.82 12.85q-17.63 0-30.54-12.85-12.91-12.86-12.91-30.76 0-17.91 12.85-30.54 12.86-12.63 30.76-12.63 17.91 0 30.54 12.46 12.63 12.45 12.63 30.87 0 17.63-12.46 30.54-12.45 12.91-30.87 12.91Z'/%3E%3C/svg%3E");
  --rie-i-map-pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M458.5-103.5Q448-107 440-115q-42-38-91-87.5T258-309q-42-57-70-119t-28-124q0-150 96.5-239T480-880q127 0 223.5 89T800-552q0 62-28 124t-70 119q-42 57-91 106.5T520-115q-8 8-18.5 11.5T480-100q-11 0-21.5-3.5Zm71-407Q550-531 550-560t-20.5-49.5Q509-630 480-630t-49.5 20.5Q410-589 410-560t20.5 49.5Q451-490 480-490t49.5-20.5Z'/%3E%3C/svg%3E");
  --rie-i-clock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M519.22-495.65v-158.87q0-15.64-10.36-25.93t-25.74-10.29q-15.38 0-25.86 10.29-10.48 10.29-10.48 25.93v173.39q0 7.7 2.57 14.31 2.56 6.62 7.69 12.91L594.26-311.7q11.41 11.7 27.1 11.2 15.68-.5 26.94-11.2 11.27-10.69 11.27-26.52 0-15.82-11.27-27.08L519.22-495.65ZM480.08-65.87q-85.47 0-160.94-32.55-75.48-32.56-131.81-88.87T98.44-319.04q-32.57-75.44-32.57-160.9 0-85.45 32.68-160.99 32.67-75.53 88.83-131.69t131.64-89.12Q394.5-894.7 480-894.7q85.5 0 160.98 32.96 75.48 32.96 131.64 89.12 56.16 56.16 89.12 131.64Q894.7-565.5 894.7-480q0 85.5-32.96 160.98-32.96 75.48-89.12 131.64-56.16 56.16-131.61 88.83-75.46 32.68-160.93 32.68ZM480-480Zm-.29 334.91q138.03 0 236.62-98.02 98.58-98.02 98.58-236.61 0-138.58-98.51-236.89-98.51-98.3-236.39-98.3-138.31 0-236.62 98.23-98.3 98.24-98.3 236.68 0 138.87 98.3 236.89 98.3 98.02 236.32 98.02Z'/%3E%3C/svg%3E");
  --rie-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='m378-346.7 355.65-355.08q11.83-11.83 28.57-11.83 16.74 0 28.56 11.83 11.83 11.82 11.83 28.56t-11.83 28.57L406.35-260.78q-11.83 11.82-28.35 11.82-16.52 0-28.35-11.82L168.78-441.65q-11.82-11.83-11.61-28.57.22-16.74 12.05-28.56 11.82-11.83 28.56-11.83t28.57 11.83L378-346.7Z'/%3E%3C/svg%3E");
  --rie-i-mail: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M140-160q-24 0-42-18t-18-42v-520q0-24 18-42t42-18h680q24 0 42 18t18 42v520q0 24-18 42t-42 18H140Zm348.5-309.5q3.5-1.5 7.5-3.5l314-205q5-3 7.5-8t2.5-11q0-13-11.5-20.5t-23.5.5L480-522 176-717q-12-8-24-1t-12 20q0 6 3 11.5t7 8.5l314 205q4 2 7.5 3.5t8.5 1.5q5 0 8.5-1.5Z'/%3E%3C/svg%3E");
  --rie-i-phone: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M795-120q-116 0-236.5-56T335-335Q232-438 176-558.5T120-795q0-19 13-32t32-13h140q14 0 24 10t14 25l27 126q2 14-.5 25.5T359-634L259-533q26 44 55 82t64 72q37 38 78 69.5t86 55.5l95-98q10-11 23-15t26-2l119 26q15 4 25 16t10 27v135q0 19-13 32t-32 13Z'/%3E%3C/svg%3E");
  --rie-i-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M38-254q0-35 18-63.5t50-42.5q73-32 131.5-46T358-420q62 0 120 14t131 46q32 14 50.5 42.5T678-254v34q0 25-17.5 42.5T618-160H98q-25 0-42.5-17.5T38-220v-34Zm686 94q5-15 9.5-29.5T738-220v-34q0-63-29-101.5T622-420q69 8 130 22t99 34q33 19 52 47t19 63v34q0 25-17.5 42.5T862-160H724ZM250-523q-42-42-42-108t42-108q42-42 108-42t108 42q42 42 42 108t-42 108q-42 42-108 42t-108-42Zm426 0q-42 42-108 42-11 0-24.5-1.5T519-488q24-25 36.5-61.5T568-631q0-45-12.5-79.5T519-774q11-3 24.5-5t24.5-2q66 0 108 42t42 108q0 66-42 108Z'/%3E%3C/svg%3E");
  --rie-i-facebook: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.101 23.691v-7.98H6.627v-3.667h2.474v-1.58c0-4.085 1.848-5.978 5.858-5.978.401 0 .955.042 1.468.103a8.68 8.68 0 0 1 1.141.195v3.325a8.623 8.623 0 0 0-.653-.036 26.805 26.805 0 0 0-.733-.009c-.707 0-1.259.096-1.675.309a1.686 1.686 0 0 0-.679.622c-.258.42-.374.995-.374 1.752v1.297h3.919l-.386 2.103-.287 1.564h-3.246v8.245C19.396 23.238 24 18.179 24 12.044c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.628 3.874 10.35 9.101 11.647Z'/%3E%3C/svg%3E");
  --rie-i-x: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.234 10.162 22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299-.929-1.329L3.076 1.56h3.182l5.965 8.532.929 1.329 7.754 11.09h-3.182z'/%3E%3C/svg%3E");
  --rie-i-linkedin: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85 3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433c-1.144 0-2.063-.926-2.063-2.065 0-1.138.92-2.063 2.063-2.063 1.14 0 2.064.925 2.064 2.063 0 1.139-.925 2.065-2.064 2.065zm1.782 13.019H3.555V9h3.564v11.452zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0h.003z'/%3E%3C/svg%3E");
  --rie-i-instagram: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.0301.084c-1.2768.0602-2.1487.264-2.911.5634-.7888.3075-1.4575.72-2.1228 1.3877-.6652.6677-1.075 1.3368-1.3802 2.127-.2954.7638-.4956 1.6365-.552 2.914-.0564 1.2775-.0689 1.6882-.0626 4.947.0062 3.2586.0206 3.6671.0825 4.9473.061 1.2765.264 2.1482.5635 2.9107.308.7889.72 1.4573 1.388 2.1228.6679.6655 1.3365 1.0743 2.1285 1.38.7632.295 1.6361.4961 2.9134.552 1.2773.056 1.6884.069 4.9462.0627 3.2578-.0062 3.668-.0207 4.9478-.0814 1.28-.0607 2.147-.2652 2.9098-.5633.7889-.3086 1.4578-.72 2.1228-1.3881.665-.6682 1.0745-1.3378 1.3795-2.1284.2957-.7632.4966-1.636.552-2.9124.056-1.2809.0692-1.6898.063-4.948-.0063-3.2583-.021-3.6668-.0817-4.9465-.0607-1.2797-.264-2.1487-.5633-2.9117-.3084-.7889-.72-1.4568-1.3876-2.1228C21.2982 1.33 20.628.9208 19.8378.6165 19.074.321 18.2017.1197 16.9244.0645 15.6471.0093 15.236-.005 11.977.0014 8.718.0076 8.31.0215 7.0301.0839m.1402 21.6932c-1.17-.0509-1.8053-.2453-2.2287-.408-.5606-.216-.96-.4771-1.3819-.895-.422-.4178-.6811-.8186-.9-1.378-.1644-.4234-.3624-1.058-.4171-2.228-.0595-1.2645-.072-1.6442-.079-4.848-.007-3.2037.0053-3.583.0607-4.848.05-1.169.2456-1.805.408-2.2282.216-.5613.4762-.96.895-1.3816.4188-.4217.8184-.6814 1.3783-.9003.423-.1651 1.0575-.3614 2.227-.4171 1.2655-.06 1.6447-.072 4.848-.079 3.2033-.007 3.5835.005 4.8495.0608 1.169.0508 1.8053.2445 2.228.408.5608.216.96.4754 1.3816.895.4217.4194.6816.8176.9005 1.3787.1653.4217.3617 1.056.4169 2.2263.0602 1.2655.0739 1.645.0796 4.848.0058 3.203-.0055 3.5834-.061 4.848-.051 1.17-.245 1.8055-.408 2.2294-.216.5604-.4763.96-.8954 1.3814-.419.4215-.8181.6811-1.3783.9-.4224.1649-1.0577.3617-2.2262.4174-1.2656.0595-1.6448.072-4.8493.079-3.2045.007-3.5825-.006-4.848-.0608M16.953 5.5864A1.44 1.44 0 1 0 18.39 4.144a1.44 1.44 0 0 0-1.437 1.4424M5.8385 12.012c.0067 3.4032 2.7706 6.1557 6.173 6.1493 3.4026-.0065 6.157-2.7701 6.1506-6.1733-.0065-3.4032-2.771-6.1565-6.174-6.1498-3.403.0067-6.156 2.771-6.1496 6.1738M8 12.0077a4 4 0 1 1 4.008 3.9921A3.9996 3.9996 0 0 1 8 12.0077'/%3E%3C/svg%3E");
  --rie-i-youtube: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M23.498 6.186a3.016 3.016 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.017 3.017 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.016 3.016 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.015 3.015 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814zM9.545 15.568V8.432L15.818 12l-6.273 3.568z'/%3E%3C/svg%3E");
}

.rie-icon--search { --rie-icon: var(--rie-i-search); }
.rie-icon--menu { --rie-icon: var(--rie-i-menu); }
.rie-icon--close { --rie-icon: var(--rie-i-close); }
.rie-icon--chevron-down { --rie-icon: var(--rie-i-chevron-down); }
.rie-icon--chevron-left { --rie-icon: var(--rie-i-chevron-left); }
.rie-icon--chevron-right { --rie-icon: var(--rie-i-chevron-right); }
.rie-icon--arrow-right { --rie-icon: var(--rie-i-arrow-right); }
.rie-icon--arrow-left { --rie-icon: var(--rie-i-arrow-left); }
.rie-icon--external { --rie-icon: var(--rie-i-external); }
.rie-icon--download { --rie-icon: var(--rie-i-download); }
.rie-icon--pdf { --rie-icon: var(--rie-i-pdf); }
.rie-icon--play { --rie-icon: var(--rie-i-play); }
.rie-icon--pause { --rie-icon: var(--rie-i-pause); }
.rie-icon--calendar { --rie-icon: var(--rie-i-calendar); }
.rie-icon--map-pin { --rie-icon: var(--rie-i-map-pin); }
.rie-icon--clock { --rie-icon: var(--rie-i-clock); }
.rie-icon--check { --rie-icon: var(--rie-i-check); }
.rie-icon--mail { --rie-icon: var(--rie-i-mail); }
.rie-icon--phone { --rie-icon: var(--rie-i-phone); }
.rie-icon--users { --rie-icon: var(--rie-i-users); }
.rie-icon--facebook { --rie-icon: var(--rie-i-facebook); }
.rie-icon--x { --rie-icon: var(--rie-i-x); }
.rie-icon--linkedin { --rie-icon: var(--rie-i-linkedin); }
.rie-icon--instagram { --rie-icon: var(--rie-i-instagram); }
.rie-icon--youtube { --rie-icon: var(--rie-i-youtube); }

.rie-icon {
  --rie-icon-size: 24px;
  display: inline-block;
  flex: none;
  width: var(--rie-icon-size);
  height: var(--rie-icon-size);
  background-color: currentColor;
  -webkit-mask: var(--rie-icon) center / contain no-repeat;
  mask: var(--rie-icon) center / contain no-repeat;
  vertical-align: middle;
}

.rie-icon.rie-icon--sm { --rie-icon-size: 16px; }
.rie-icon.rie-icon--md { --rie-icon-size: 20px; }
.rie-icon.rie-icon--lg { --rie-icon-size: 32px; }


/* ---------------------------------------------------------------------------
   2. BUTTONS — 56px pills (§1 move 3)
   Colours run through three custom properties so every state re-states the
   same declarations. That matters because Hello's reset paints <button>
   pink on :hover AND :focus (0,1,1 / 0,2,0): the re-statement at 0,2,0 wins.
     --rie-btn-bg  --rie-btn-fg  --rie-btn-bd  --rie-btn-shadow
   Specificity ladder (plain): base 0,1,0 · base states 0,2,0 · variants 0,2,0
   (.rie-btn.rie-btn--x) · variant states 0,3,0.
   Elementor twin: a Button widget with NO class = primary pill; a class on the
   widget wrapper picks the variant:
     <div class="elementor-widget elementor-widget-button rie-btn--secondary">
       <a class="elementor-button elementor-button-link elementor-size-sm">
         <span class="elementor-button-content-wrapper"><span class="elementor-button-text">Join a Club</span></span></a></div>
   Twin ladder: base 0,2,1 · states 0,3,1 · variants 0,3,1 · variant states 0,4,1.
   --------------------------------------------------------------------------- */

/* a.rie-btn (0,1,1) also beats the kit's `.elementor-kit-7 a` typography
   (0,1,1, earlier file) that sets link weight 400 until Site Settings →
   Theme Style → Link is cleared. */
.rie-btn,
a.rie-btn,
body .elementor-widget-button .elementor-button {
  --rie-btn-bg: var(--rie-color-royal);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: transparent;
  --rie-btn-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rie-space-2);
  min-height: 56px;
  max-width: 100%;
  margin: 0;
  padding: 14px 30px;                       /* + 2px border = 16px 32px */
  border: 2px solid var(--rie-btn-bd);
  border-radius: var(--rie-radius-pill);
  background-color: var(--rie-btn-bg);
  color: var(--rie-btn-fg);
  fill: currentColor;
  box-shadow: var(--rie-btn-shadow);
  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-align: center;
  text-decoration: none;
  text-transform: none;
  white-space: normal;
  vertical-align: middle;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: all var(--rie-dur-base) var(--rie-ease), outline 0s, outline-offset 0s;   /* the focus outline switches, never fades */
}

.rie-btn:is(:hover, :focus, :active, :visited),
body .elementor-widget-button .elementor-button:is(:hover, :focus, :active, :visited) {
  border-color: var(--rie-btn-bd);
  background-color: var(--rie-btn-bg);
  color: var(--rie-btn-fg);
  text-decoration: none;
}

.rie-btn:hover,
body .elementor-widget-button .elementor-button:hover { --rie-btn-bg: var(--rie-color-azure); }

.rie-btn:active,
body .elementor-widget-button .elementor-button:active { --rie-btn-bg: var(--rie-color-active); }

/* Focus: the twin's own box-shadow (0,2,1) outranks the global ring (0,2,0),
   so restate it; on dark surfaces the white outline from 10-base applies. */
body .elementor-widget-button .elementor-button:focus-visible {
  box-shadow: var(--rie-shadow-focus);
}
body :where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
            .rie-header, .rie-footer, .rie-utility, .rie-drawer, .rie-mega, .rie-appeal,
            .rie-hero--colour, .rie-hero-home) .elementor-widget-button .elementor-button:focus-visible {
  box-shadow: var(--rie-btn-shadow);
}
@media (min-width: 769px) {
  body :where(.rie-hero__content, .rie-feature__content) .elementor-widget-button .elementor-button:focus-visible {
    box-shadow: var(--rie-btn-shadow);
  }
}

/* Elementor inner spans */
body .elementor-widget-button .elementor-button-content-wrapper {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--rie-space-2);
}

body .elementor-widget-button .elementor-button-text {
  display: inline;
}

body .elementor-widget-button .elementor-button-icon {
  display: inline-flex;
  align-items: center;
  font-size: 20px;
}

body .elementor-widget-button .elementor-button-icon svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}

/* --primary: the default. The modifier exists so markup can be explicit. */

/* --secondary: pale pill, navy text (Join a Club, CTAs on navy and photos) */
.rie-btn.rie-btn--secondary,
body .elementor-widget-button.rie-btn--secondary .elementor-button {
  --rie-btn-bg: var(--rie-color-pale);
  --rie-btn-fg: var(--rie-color-navy);
}
.rie-btn.rie-btn--secondary:hover,
body .elementor-widget-button.rie-btn--secondary .elementor-button:hover { --rie-btn-bg: var(--rie-color-pale-hover); }
.rie-btn.rie-btn--secondary:active,
body .elementor-widget-button.rie-btn--secondary .elementor-button:active { --rie-btn-bg: var(--rie-color-pale-active); }

/* --white: floating white pill inside navy callouts and info cards */
.rie-btn.rie-btn--white,
body .elementor-widget-button.rie-btn--white .elementor-button {
  --rie-btn-bg: var(--rie-color-white);
  --rie-btn-fg: var(--rie-color-royal);
  --rie-btn-shadow: var(--rie-shadow-card-hover);
}
.rie-btn.rie-btn--white:hover,
body .elementor-widget-button.rie-btn--white .elementor-button:hover { --rie-btn-bg: var(--rie-color-hover-tint); }
.rie-btn.rie-btn--white:active,
body .elementor-widget-button.rie-btn--white .elementor-button:active { --rie-btn-bg: var(--rie-color-tint-press); }

/* --outline: white, 2px royal border and text → azure fill */
.rie-btn.rie-btn--outline,
body .elementor-widget-button.rie-btn--outline .elementor-button {
  --rie-btn-bg: var(--rie-color-white);
  --rie-btn-fg: var(--rie-color-royal);
  --rie-btn-bd: var(--rie-color-royal);
}
.rie-btn.rie-btn--outline:hover,
body .elementor-widget-button.rie-btn--outline .elementor-button:hover {
  --rie-btn-bg: var(--rie-color-azure);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-azure);
}
.rie-btn.rie-btn--outline:active,
body .elementor-widget-button.rie-btn--outline .elementor-button:active {
  --rie-btn-bg: var(--rie-color-active);
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-active);
}

/* --outline-inverse: on photos and navy → white fill, navy text */
.rie-btn.rie-btn--outline-inverse,
body .elementor-widget-button.rie-btn--outline-inverse .elementor-button {
  --rie-btn-bg: transparent;
  --rie-btn-fg: var(--rie-color-white);
  --rie-btn-bd: var(--rie-color-white);
}
.rie-btn.rie-btn--outline-inverse:hover,
body .elementor-widget-button.rie-btn--outline-inverse .elementor-button:hover {
  --rie-btn-bg: var(--rie-color-white);
  --rie-btn-fg: var(--rie-color-navy);
  --rie-btn-bd: var(--rie-color-white);
}
.rie-btn.rie-btn--outline-inverse:active,
body .elementor-widget-button.rie-btn--outline-inverse .elementor-button:active {
  --rie-btn-bg: var(--rie-color-tint);
  --rie-btn-fg: var(--rie-color-navy);
  --rie-btn-bd: var(--rie-color-tint);
}

/* --text: card CTAs ("Learn more", "Explore"): no box, 16px top padding */
.rie-btn.rie-btn--text,
body .elementor-widget-button.rie-btn--text .elementor-button {
  --rie-btn-bg: transparent;
  --rie-btn-fg: var(--rie-color-royal);
  min-height: 0;
  padding: var(--rie-space-4) 0 0;
  border-width: 0;
  border-radius: var(--rie-radius-sm);
}
.rie-btn.rie-btn--text:hover,
body .elementor-widget-button.rie-btn--text .elementor-button:hover {
  --rie-btn-bg: transparent;
  --rie-btn-fg: var(--rie-color-azure);
}
.rie-btn.rie-btn--text:active,
body .elementor-widget-button.rie-btn--text .elementor-button:active {
  --rie-btn-bg: transparent;
  --rie-btn-fg: var(--rie-color-active);
}

/* --arrow: text + 16px arrow, 8px gap, underline on hover ("Explore →") */
.rie-btn.rie-btn--arrow,
body .elementor-widget-button.rie-btn--arrow .elementor-button {
  --rie-btn-bg: transparent;
  --rie-btn-fg: var(--rie-color-royal);
  min-height: 0;
  padding: 0;
  border-width: 0;
  border-radius: var(--rie-radius-sm);
}
.rie-btn.rie-btn--arrow::after,
body .elementor-widget-button.rie-btn--arrow .elementor-button::after {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--rie-i-arrow-right) center / contain no-repeat;
  mask: var(--rie-i-arrow-right) center / contain no-repeat;
}
.rie-btn.rie-btn--arrow:is(:hover, :active),
body .elementor-widget-button.rie-btn--arrow .elementor-button:is(:hover, :active) {
  --rie-btn-bg: transparent;
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* The class draws the arrow; an icon picked in the panel would double it. */
body .elementor-widget-button.rie-btn--arrow .elementor-button-icon {
  display: none;
}

/* --text (40px) and --arrow (24px) keep rotary.org's compact look, but their
   tap target is at least 44px tall: an invisible ::before centred on the link
   (::after is the arrow). Width stays the text width, so side-by-side links
   never overlap. */
.rie-btn:is(.rie-btn--arrow, .rie-btn--text),
body .elementor-widget-button:is(.rie-btn--arrow, .rie-btn--text) .elementor-button {
  position: relative;
}
.rie-btn:is(.rie-btn--arrow, .rie-btn--text)::before,
body .elementor-widget-button:is(.rie-btn--arrow, .rie-btn--text) .elementor-button::before {
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  height: max(100%, 44px);
  transform: translateY(-50%);
}

/* On dark surfaces: white, hover #E9F2F9 */
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
       .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home) .rie-btn:is(.rie-btn--arrow, .rie-btn--text),
body :where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
       .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home) .elementor-widget-button:is(.rie-btn--arrow, .rie-btn--text) .elementor-button {
  --rie-btn-fg: var(--rie-color-white);
}
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
       .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home) .rie-btn:is(.rie-btn--arrow, .rie-btn--text):is(:hover, :active),
body :where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
       .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home) .elementor-widget-button:is(.rie-btn--arrow, .rie-btn--text) .elementor-button:is(:hover, :active) {
  --rie-btn-fg: var(--rie-color-tint);
}

/* --small: 14/21, 6px 16px (appeal bar "Donate now") */
.rie-btn.rie-btn--small,
body .elementor-widget-button.rie-btn--small .elementor-button {
  min-height: 0;
  padding: 4px 14px;                        /* + 2px border = 6px 16px */
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

/* --block-mobile: full width below 481 */
.rie-btn.rie-btn--block-mobile,
body .elementor-widget-button.rie-btn--block-mobile .elementor-button {
  width: 100%;
}
body .elementor-widget-button.rie-btn--block-mobile {
  width: 100%;                              /* the widget wrapper too, in a row container */
}
@media (min-width: 481px) {
  .rie-btn.rie-btn--block-mobile,
  body .elementor-widget-button.rie-btn--block-mobile,
  body .elementor-widget-button.rie-btn--block-mobile .elementor-button {
    width: auto;
  }
}

/* Disabled */
.rie-btn:is(:disabled, [aria-disabled="true"], .is-disabled) {
  opacity: 0.5;
  box-shadow: none;
  cursor: not-allowed;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   3. ICON BUTTONS — round, icon only (header search, hero play/pause,
   carousel arrows). Always give them an accessible name (aria-label).
   Outline (default): 56px, 2px white ring, for dark surfaces and photos.
   --filled: 48px white disc, royal glyph, card shadow, for light surfaces.
   --------------------------------------------------------------------------- */

.rie-icon-btn {
  --rie-ibtn-bg: transparent;
  --rie-ibtn-fg: var(--rie-color-white);
  --rie-ibtn-bd: var(--rie-color-white);
  --rie-ibtn-shadow: none;
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin: 0;
  padding: 0;
  border: 2px solid var(--rie-ibtn-bd);
  border-radius: var(--rie-radius-pill);
  background-color: var(--rie-ibtn-bg);
  color: var(--rie-ibtn-fg);
  box-shadow: var(--rie-ibtn-shadow);
  font-size: var(--rie-fs-body);
  line-height: 1;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: all var(--rie-dur-base) var(--rie-ease), outline 0s, outline-offset 0s;
}

.rie-icon-btn:is(:hover, :focus, :active, :visited) {
  border-color: var(--rie-ibtn-bd);
  background-color: var(--rie-ibtn-bg);
  color: var(--rie-ibtn-fg);
}

.rie-icon-btn:hover {
  --rie-ibtn-bg: var(--rie-color-tint);
  --rie-ibtn-bd: var(--rie-color-tint);
  --rie-ibtn-fg: var(--rie-color-royal);
}

.rie-icon-btn:active {
  --rie-ibtn-bg: var(--rie-color-active);
  --rie-ibtn-bd: var(--rie-color-active);
  --rie-ibtn-fg: var(--rie-color-white);
}

.rie-icon-btn.rie-icon-btn--filled {
  --rie-ibtn-bg: var(--rie-color-white);
  --rie-ibtn-fg: var(--rie-color-royal);
  --rie-ibtn-bd: var(--rie-color-white);
  --rie-ibtn-shadow: var(--rie-shadow-card);
  width: 48px;
  height: 48px;
}
.rie-icon-btn.rie-icon-btn--filled .rie-icon { --rie-icon-size: 16px; }
.rie-icon-btn.rie-icon-btn--filled:hover {
  --rie-ibtn-bg: var(--rie-color-azure);
  --rie-ibtn-bd: var(--rie-color-azure);
  --rie-ibtn-fg: var(--rie-color-white);
}
.rie-icon-btn.rie-icon-btn--filled:active {
  --rie-ibtn-bg: var(--rie-color-active);
  --rie-ibtn-bd: var(--rie-color-active);
  --rie-ibtn-fg: var(--rie-color-white);
}

.rie-icon-btn:is(:disabled, [aria-disabled="true"], .is-disabled) {
  --rie-ibtn-fg: var(--rie-color-muted);
  --rie-ibtn-shadow: none;
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   4. BADGE — 12/18, 8px 12px, pill (rotaryui-badge)
   Default tint / navy-deep. --inverse navy-deep / tint. --gold gold-tint /
   gold-text ("Pinned"); inside a dark surface --gold turns gold / ink
   ("Emergency appeal"). Colours run through custom properties so the
   Elementor twin (class on a Heading widget with HTML tag `span`) inherits
   them from the wrapper.
   --------------------------------------------------------------------------- */

.rie-badge {
  --rie-badge-bg: var(--rie-color-tint);
  --rie-badge-fg: var(--rie-color-navy-deep);
}
.rie-badge.rie-badge--inverse { --rie-badge-bg: var(--rie-color-navy-deep); --rie-badge-fg: var(--rie-color-tint); }
.rie-badge.rie-badge--gold    { --rie-badge-bg: var(--rie-color-gold-tint); --rie-badge-fg: var(--rie-color-gold-text); }

:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
       .rie-header, .rie-footer, .rie-drawer, .rie-appeal, .rie-hero--colour, .rie-hero-home) .rie-badge.rie-badge--gold {
  --rie-badge-bg: var(--rie-color-gold);
  --rie-badge-fg: var(--rie-color-ink);
}
@media (min-width: 769px) {
  :where(.rie-hero__content, .rie-feature__content) .rie-badge.rie-badge--gold {
    --rie-badge-bg: var(--rie-color-gold);
    --rie-badge-fg: var(--rie-color-ink);
  }
}

.rie-badge:not(.elementor-widget),
body .elementor-widget.rie-badge .elementor-heading-title {
  display: inline-flex;
  align-items: center;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: var(--rie-space-2) var(--rie-space-3);
  border-radius: var(--rie-radius-pill);
  background-color: var(--rie-badge-bg);
  color: var(--rie-badge-fg);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-caption);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-caption);
  letter-spacing: 0;
  text-decoration: none;
  text-transform: none;
  vertical-align: middle;
}

/* A badge that is also a link (article category) */
a.rie-badge:is(:hover, :focus-visible) {
  color: var(--rie-badge-fg);
  text-decoration: underline;
}


/* ---------------------------------------------------------------------------
   5. DIVIDER — 1px Silver, 24px above and below (rotaryui-divider)
   Plain: <hr class="rie-divider">. Elementor: Divider widget + class.
   --------------------------------------------------------------------------- */

.rie-divider:not(.elementor-widget) {
  display: block;
  width: 100%;
  height: 1px;
  margin-block: var(--rie-space-6);
  border: 0;
  background-color: var(--rie-color-line);
}

body .elementor-widget-divider.rie-divider {
  --divider-border-style: solid;
  --divider-border-width: 1px;
  --divider-color: var(--rie-color-line);
  margin-block: var(--rie-space-6);
}
body .elementor-widget-divider.rie-divider .elementor-divider {
  display: flex;
  padding-block: 0;
}
body .elementor-widget-divider.rie-divider .elementor-divider-separator {
  display: flex;
  width: 100%;
  border-block-start: 1px solid var(--rie-color-line);
}


/* ---------------------------------------------------------------------------
   6. LINK WITH ARROW — bold, 8px gap, 20px arrow; royal on light, white on
   dark; underline on hover (CTA-card "Explore →").
   Elementor: Button widget with rie-btn--arrow, or a Heading with a link and
   the class rie-link-arrow on the widget. Elementor prints
   `.elementor-widget-heading .elementor-heading-title[class*="elementor-size-"] > a
   { color: inherit }` (0,3,1) on every Heading link, so the Heading twin is
   raised to 0,3,2 (base, arrow, hover) and 0,3,2 / 0,4,2 on dark.
   --------------------------------------------------------------------------- */

.rie-link-arrow:not(.elementor-widget),
body .elementor-widget.rie-link-arrow a,
body .elementor-widget-heading.rie-link-arrow .elementor-heading-title > a {
  display: inline-flex;
  align-items: center;
  gap: var(--rie-space-2);
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}

.rie-link-arrow:not(.elementor-widget)::after,
body .elementor-widget.rie-link-arrow a::after {
  content: "";
  flex: none;
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--rie-i-arrow-right) center / contain no-repeat;
  mask: var(--rie-i-arrow-right) center / contain no-repeat;
}

.rie-link-arrow:not(.elementor-widget):is(:hover, :active),
body .elementor-widget.rie-link-arrow a:is(:hover, :active),
body .elementor-widget-heading.rie-link-arrow .elementor-heading-title > a:is(:hover, :active) {
  color: var(--rie-color-royal);
  text-decoration: underline;
  text-underline-offset: 3px;
}

:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
       .rie-header, .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home)
  :is(.rie-link-arrow:not(.elementor-widget), .rie-link-arrow a),
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
       .rie-header, .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home)
  :is(.rie-link-arrow:not(.elementor-widget), .rie-link-arrow a):is(:hover, :active),
body :where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
            .rie-header, .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home)
  :is(.elementor-widget.rie-link-arrow a, .elementor-widget-heading.rie-link-arrow .elementor-heading-title > a),
body :where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight,
            .rie-header, .rie-footer, .rie-drawer, .rie-hero--colour, .rie-hero-home)
  :is(.elementor-widget.rie-link-arrow a, .elementor-widget-heading.rie-link-arrow .elementor-heading-title > a):is(:hover, :active) {
  color: var(--rie-color-white);
}


/* ---------------------------------------------------------------------------
   7. SEARCH BOX — 56px, 1px muted, radius 8, white (rotaryui-search-box)
   <form class="rie-search" role="search" method="get" action="/">
     <label class="rie-sr-only" for="s-1">Search rotary.ie</label>
     <input class="rie-search__input" id="s-1" type="search" name="s" placeholder="Search">
     <button class="rie-search__submit" type="submit"><span class="rie-icon rie-icon--search" aria-hidden="true"></span><span class="rie-sr-only">Search</span></button>
   </form>
   --------------------------------------------------------------------------- */

.rie-search {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 645px;
  height: 56px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  background-color: var(--rie-color-white);
  color: var(--rie-color-text);
  transition: border-color var(--rie-dur-fast) var(--rie-ease), box-shadow var(--rie-dur-fast) var(--rie-ease);
}

.rie-search:hover {
  border-color: var(--rie-color-azure);
}

/* Focus: the azure border alone is only 1.14:1 against the grey one and the
   brief's 50% azure ring about 2.2:1, so focus uses the global navy ring
   (1.4.11) and a transparent outline for forced colours. The input inside
   drops its own ring; the box carries it. */
.rie-search:focus-within {
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

/* 0,1,1 ties Hello's input[type=search] rule; later file wins. */
.rie-search input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  margin: 0;
  padding: var(--rie-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--rie-color-text);
  box-shadow: none;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
  -webkit-appearance: none;
  appearance: none;
}

.rie-search input:focus-visible {
  outline: none;
  box-shadow: none;                          /* the ring is on the box */
}

.rie-search input::-webkit-search-cancel-button,
.rie-search input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance: none;
}

.rie-search [type=submit] {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: auto;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background-color: var(--rie-color-royal);
  color: var(--rie-color-white);
  cursor: pointer;
  transition: background-color var(--rie-dur-fast) var(--rie-ease);
}

.rie-search [type=submit]:is(:hover, :focus) {
  background-color: var(--rie-color-azure);
  color: var(--rie-color-white);
}

/* The box clips (overflow hidden), so the submit's forced-colours outline sits inside it. */
.rie-search [type=submit]:focus-visible {
  outline: 2px solid transparent;
  outline-offset: -4px;
  box-shadow: inset 0 0 0 2px var(--rie-color-navy), inset 0 0 0 4px var(--rie-color-white);
}


/* ---------------------------------------------------------------------------
   8. PAGINATION — styles WordPress paginate_links() / the_posts_pagination()
   <nav class="rie-pagination" aria-label="Posts pagination">
     <a class="prev page-numbers" href="…">Previous</a>
     <a class="page-numbers" href="…">1</a>
     <span aria-current="page" class="page-numbers current">2</span>
     <span class="page-numbers dots">…</span>
     <a class="next page-numbers" href="…">Next</a>
   </nav>
   Also works with type=list (<ul class="page-numbers">) and the
   .navigation .nav-links wrapper. 34×34 boxes, radius 4, 12px gap from
   769 up; below that 44×44 touch targets 8px apart.
   --------------------------------------------------------------------------- */

.rie-pagination {
  --rie-page-box: 44px;
  --rie-page-gap: var(--rie-space-2);
  margin-block-start: var(--rie-space-8);
}

@media (min-width: 769px) {
  .rie-pagination {
    --rie-page-box: 34px;
    --rie-page-gap: var(--rie-space-3);
  }
}

.rie-pagination,
.rie-pagination .nav-links,
.rie-pagination ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--rie-page-gap);
  padding: 0;
  list-style: none;
}

.rie-pagination .nav-links,
.rie-pagination ul.page-numbers {
  margin: 0;
}

.rie-pagination ul.page-numbers > li {
  display: flex;
  margin: 0;
}

.rie-pagination :is(a, span).page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--rie-page-box);
  height: var(--rie-page-box);
  padding: 0 var(--rie-space-2);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-sm);
  background-color: var(--rie-color-white);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
  text-decoration: none;
  transition: color var(--rie-dur-fast) var(--rie-ease), border-color var(--rie-dur-fast) var(--rie-ease);
}

.rie-pagination a.page-numbers:is(:hover, :focus-visible) {
  border-color: var(--rie-color-azure);
  color: var(--rie-color-azure);
}

.rie-pagination a.page-numbers:active {
  border-color: var(--rie-color-royal);
  color: var(--rie-color-royal);
}

.rie-pagination .page-numbers.current {
  border-color: var(--rie-color-royal);
  background-color: var(--rie-color-royal);
  color: var(--rie-color-white);
  font-weight: var(--rie-fw-bold);
}

.rie-pagination .page-numbers.dots {
  min-width: 0;
  border-color: transparent;
  background: transparent;
}

/* Prev / next become icon boxes; their text stays for screen readers. */
.rie-pagination :is(.prev, .next).page-numbers {
  width: var(--rie-page-box);
  padding: 0;
  overflow: hidden;
  color: var(--rie-color-muted);
  font-size: 0;
  white-space: nowrap;
}

.rie-pagination :is(.prev, .next).page-numbers::before {
  content: "";
  flex: none;
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--rie-i-chevron-right) center / contain no-repeat;
  mask: var(--rie-i-chevron-right) center / contain no-repeat;
}

.rie-pagination .prev.page-numbers::before {
  -webkit-mask-image: var(--rie-i-chevron-left);
  mask-image: var(--rie-i-chevron-left);
}

.rie-pagination :is(.prev, .next).page-numbers:is(span, [aria-disabled="true"], .is-disabled) {
  border-color: var(--rie-color-line);
  color: var(--rie-color-line);
  cursor: not-allowed;
}


/* ---------------------------------------------------------------------------
   9. FORM SKIN — generic fields (custom forms, legacy .rcb / .rma forms
   mapped in rie-legacy.css). Gravity Forms is themed through the
   gform_default_styles filter instead (80-plugins).
   <form class="rie-form">
     <div class="rie-form__field">
       <label for="f-email">Email <span class="rie-form__req">(required)</span></label>
       <input id="f-email" type="email" aria-describedby="f-email-help">
       <p class="rie-form__help" id="f-email-help">…</p>
     </div> …
     <button class="rie-btn" type="submit">Send enquiry</button>
   </form>
   Fields are 56px (16px padding), 1px muted, radius 8, 16/24. Field rules
   are 0,1,1 (focus 0,2,1): the same weight as Hello's input rules, later
   file, so they win; textarea / select refinements follow at 0,1,1.
   --------------------------------------------------------------------------- */

.rie-form {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-6);
  max-width: var(--rie-measure);
  color: var(--rie-color-text);
}

.rie-form__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-space-6) var(--rie-gap);
}

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

.rie-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-2);
  min-width: 0;
}

.rie-form :is(label, legend) {
  display: block;
  margin: 0;
  padding: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-body);
}

.rie-form fieldset {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-3);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.rie-form legend {
  margin-block-end: var(--rie-space-1);
}

.rie-form .rie-form__req {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-regular);
}

.rie-form .rie-form__help {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

.rie-form .rie-form__error {
  display: flex;
  align-items: flex-start;
  gap: var(--rie-space-1);
  margin: 0;
  color: var(--rie-color-error);
  font-size: var(--rie-fs-sm);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-sm);
}

.rie-form :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=hidden], [type=file], [type=range], [type=color], [type=image])), select, textarea) {
  display: block;
  width: 100%;
  min-height: 56px;
  margin: 0;
  padding: 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);
  box-shadow: none;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-body);
  transition: border-color var(--rie-dur-fast) var(--rie-ease), box-shadow var(--rie-dur-fast) var(--rie-ease);
}

.rie-form :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=hidden], [type=file], [type=range], [type=color], [type=image])), select, textarea):hover {
  border-color: var(--rie-color-azure);
}

/* Focus must differ from hover (azure border): the navy ring (about 10:1 on
   white and tint) plus a transparent outline for forced colours. */
.rie-form :is(input:where(:not([type=checkbox], [type=radio], [type=submit], [type=button], [type=reset], [type=hidden], [type=file], [type=range], [type=color], [type=image])), select, textarea):focus {
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

.rie-form :is(input, select, textarea):is([aria-invalid="true"], :user-invalid) {
  border-color: var(--rie-color-error);
}

.rie-form textarea {
  min-height: 144px;
  resize: vertical;
}

/* Chevron in the muted grey (#717171 = --rie-color-muted; a background
   image cannot read a custom property, so the colour is written into the SVG). */
.rie-form select {
  padding-inline-end: 48px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath fill='%23717171' d='M465.04-349.52q-7.26-3.13-13.39-9.26L254.22-556.22q-11.83-11.82-11.33-28.28t12.33-28.28q11.82-11.83 28.28-11.83t28.28 11.83L480-443.57l169.22-169.21q11.82-11.83 27.78-11.33t27.78 12.33q11.83 11.82 11.83 28.28t-11.83 28.28L508.35-358.78q-6.13 6.13-13.39 9.26-7.26 3.13-14.96 3.13-7.7 0-14.96-3.13Z'/%3E%3C/svg%3E");
  background-position: right 12px center;
  background-repeat: no-repeat;
  background-size: 24px 24px;
  -webkit-appearance: none;
  appearance: none;
}

/* Checkboxes and radios: 20px, royal */
.rie-form .rie-form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--rie-space-3);
}

.rie-form .rie-form__check label {
  font-weight: var(--rie-fw-regular);
}

.rie-form :is([type=checkbox], [type=radio]) {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--rie-color-royal);
  cursor: pointer;
}

.rie-form > :is(.rie-btn, .rie-actions) {
  align-self: flex-start;
}

/* A bare submit (legacy markup) becomes the primary pill. */
.rie-form :is([type=submit], [type=button]):not(.rie-btn, .rie-icon-btn) {
  --rie-btn-bg: var(--rie-color-royal);
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: var(--rie-radius-pill);
  background-color: var(--rie-btn-bg);
  color: var(--rie-color-white);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  cursor: pointer;
  transition: all var(--rie-dur-base) var(--rie-ease), outline 0s, outline-offset 0s;
}

.rie-form :is([type=submit], [type=button]):not(.rie-btn, .rie-icon-btn):is(:hover, :focus, :active) {
  border-color: transparent;
  background-color: var(--rie-btn-bg);
  color: var(--rie-color-white);
}
.rie-form :is([type=submit], [type=button]):not(.rie-btn, .rie-icon-btn):hover  { --rie-btn-bg: var(--rie-color-azure); }
.rie-form :is([type=submit], [type=button]):not(.rie-btn, .rie-icon-btn):active { --rie-btn-bg: var(--rie-color-active); }


/* ===== 40-sections.css ===== */
/* =============================================================================
   rie.css · 40 SECTIONS
   Section bands, corner decorations, section head, actions row, heroes,
   featured-image section, grid, testimonials + portrait ring, link list +
   ring photo, stats, CTA trio, callout, content highlight, pull quote, media
   block, accordion, journey steps, photo gallery, embed, person, empty state.
   Spec: DESIGN-BRIEF §1 (moves 5, 6, 8–10), §2.4–2.6, §4.3.

   How these behave in Elementor 4.3 (free, V3 containers)
   - A section = ONE Boxed container with `rie-section` (+ modifiers). Its
     .e-con-inner is the 1296px box. Everything inside a section is built with
     Full Width containers.
   - Elementor lays containers out with custom properties that it prints per
     element at 0,3,0 (direction, wrap, gap…) but applies through 0,1,0 / 0,2,0
     rules. So the layouts below set `display: grid|flex` and `gap` directly
     (they win on source order) and avoid depending on flex-direction, which
     the panel owns. Where a layout needs the panel (Grid container columns),
     the comment says so.
   - Vertical rhythm uses margin-block-START on the following element:
     Elementor forces margin-block-end:0 on widgets (0,3,0) but leaves the
     start margin alone, and start margins never collapse against end margins
     we did not set, so plain markup and Elementor DOM space out the same.
   - Inside a rie-section the Elementor gap is 0; spacing comes from the
     classes (rie-section-head, rie-actions, component margins).
   ============================================================================= */

:root {
  /* Decorative masks (monochrome; colour comes from background-color) */
  /* Dotted ring for band corners: 57 round dots on r≈99.5 in a 202 box
     (inferred recreation of rotaryui-circle-decorations, brief §1 move 9). */
  --rie-i-dots-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 202 202'%3E%3Ccircle cx='101' cy='101' r='99.5' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-dasharray='0.1 10.87'/%3E%3C/svg%3E");
  /* Gold dashed ring round the link-list photo = rotary.org .dashed-circle-border */
  --rie-i-dash-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23000' stroke-width='0.6' stroke-linecap='round' stroke-dasharray='1.4 3'/%3E%3C/svg%3E");
  /* Testimonial portrait ring: 34 dashes (r 49, stroke 1, dash 1.4 / gap 7.65) */
  --rie-i-portrait-ring: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Ccircle cx='50' cy='50' r='49' fill='none' stroke='%23000' stroke-width='1' stroke-linecap='round' stroke-dasharray='1.4 7.65'/%3E%3C/svg%3E");
}


/* ---------------------------------------------------------------------------
   1. SECTION BAND  .rie-section (+ --page --white --tint --navy --ink,
   --top-sm --flush-top --flush-bottom)
   Plain:     <section class="rie-section rie-section--navy"><div class="rie-container">…</div></section>
   Elementor: <div class="elementor-element e-con e-flex e-con-boxed e-parent rie-section rie-section--navy">
                <div class="e-con-inner">…</div></div>
   Padding 64 / 80 / 112 (token) × gutter; content boxed at 1296.
   --------------------------------------------------------------------------- */

.rie-section {
  --rie-sec-pt: var(--rie-section-y);
  --rie-sec-pb: var(--rie-section-y);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  width: 100%;
  padding: var(--rie-sec-pt) var(--rie-gutter) var(--rie-sec-pb);
  color: var(--rie-color-text);
}

.rie-section.rie-section--top-sm       { --rie-sec-pt: var(--rie-section-y-sm); }
.rie-section.rie-section--flush-top    { --rie-sec-pt: 0px; }
.rie-section.rie-section--flush-bottom { --rie-sec-pb: 0px; }

.rie-section--page  { background-color: var(--rie-color-page); }
.rie-section--white { background-color: var(--rie-color-white); }
.rie-section--tint  { background-color: var(--rie-color-tint); }
.rie-section--navy  { background-color: var(--rie-color-navy); color: var(--rie-color-white); }
.rie-section--ink   { background-color: var(--rie-color-ink);  color: var(--rie-color-white); }

/* Muted grey #717171 passes on page and white (4.70 / 4.88:1) but not on
   tint #E9F2F9 (4.30:1): on the tint band and in tint panels, small grey
   text (form help and "(required)", muted utility text) uses the text
   colour instead (9.9:1). The membership enquiry form sits on this band. */
:is(.rie-section--tint, .rie-empty)
  :is(.rie-form__help, .rie-form__req, .rie-text-muted, .elementor-widget-text-editor.rie-text-muted) {
  color: var(--rie-color-text);
}

/* Elementor Boxed container: inline padding on the outer box, block padding
   on .e-con-inner (Elementor's own split), both fed from the same values. */
.rie-section.e-con {
  --padding-top: var(--rie-sec-pt);
  --padding-bottom: var(--rie-sec-pb);
  --padding-left: var(--rie-gutter);
  --padding-right: var(--rie-gutter);
  --container-max-width: var(--rie-max);
  --row-gap: 0px;
  --column-gap: 0px;
  --overflow: hidden;
}

.rie-section.e-con-boxed {
  padding-block: 0;
}

.rie-container,
.rie-section > .e-con-inner {
  width: 100%;
  max-width: var(--rie-max);
  margin-inline: auto;
}

.rie-section > .e-con-inner {
  padding-block: var(--rie-sec-pt) var(--rie-sec-pb);
}

.rie-container.rie-container--measure { max-width: var(--rie-measure); }
.rie-container.rie-container--wide    { max-width: var(--rie-wide); }


/* ---------------------------------------------------------------------------
   2. CORNER DECORATIONS  .rie-deco--{tl,tr,bl,br}-{disc,dots}
   A quarter disc in one corner, a dotted ring in the opposite one, each
   centred on the corner. Disc 300 / 400 / 500px; dotted ring 300 / 300 /
   500px (kept small on tablet, see below). Disc = ::before, dots = ::after.
   Light bands: disc #E9F2F9, dots #AFE2E3. Navy: disc #17458F, dots #0067C8.
   Never combine with an Elementor Background Overlay (it also uses ::before).
   --------------------------------------------------------------------------- */

:is(.rie-deco--tl-disc, .rie-deco--tr-disc, .rie-deco--bl-disc, .rie-deco--br-disc,
    .rie-deco--tl-dots, .rie-deco--tr-dots, .rie-deco--bl-dots, .rie-deco--br-dots) {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

:is(.rie-deco--tl-disc, .rie-deco--tr-disc, .rie-deco--bl-disc, .rie-deco--br-disc, .rie-hero--colour)::before,
:is(.rie-deco--tl-dots, .rie-deco--tr-dots, .rie-deco--bl-dots, .rie-deco--br-dots, .rie-hero--colour)::after {
  --rie-deco-s: 300px;
  content: "";
  position: absolute;
  z-index: -1;
  display: block;
  width: var(--rie-deco-s);
  height: var(--rie-deco-s);
  border: 0;
  opacity: 1;
  pointer-events: none;
}

:is(.rie-deco--tl-disc, .rie-deco--tr-disc, .rie-deco--bl-disc, .rie-deco--br-disc, .rie-hero--colour)::before {
  border-radius: 50%;
  background-color: var(--rie-deco-disc, var(--rie-color-tint));
}

:is(.rie-deco--tl-dots, .rie-deco--tr-dots, .rie-deco--bl-dots, .rie-deco--br-dots, .rie-hero--colour)::after {
  border-radius: 0;
  background-color: var(--rie-deco-dots, var(--rie-color-pale-hover));
  -webkit-mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
  mask: var(--rie-i-dots-ring) center / 100% 100% no-repeat;
}

.rie-deco--tl-disc::before, .rie-deco--tl-dots::after, .rie-hero--colour::before {
  top: calc(var(--rie-deco-s) / -2); left: calc(var(--rie-deco-s) / -2); right: auto; bottom: auto;
}
.rie-deco--tr-disc::before, .rie-deco--tr-dots::after {
  top: calc(var(--rie-deco-s) / -2); right: calc(var(--rie-deco-s) / -2); left: auto; bottom: auto;
}
.rie-deco--bl-disc::before, .rie-deco--bl-dots::after {
  bottom: calc(var(--rie-deco-s) / -2); left: calc(var(--rie-deco-s) / -2); top: auto; right: auto;
}
.rie-deco--br-disc::before, .rie-deco--br-dots::after, .rie-hero--colour::after {
  bottom: calc(var(--rie-deco-s) / -2); right: calc(var(--rie-deco-s) / -2); top: auto; left: auto;
}

/* 769–1024: the disc grows to 400, but the dotted ring stays at 300. With a
   20px gutter the section head runs almost edge to edge, and a 400 ring
   (200px into the band) ran through the intro line; the solid disc sits
   behind text without hurting it. */
@media (min-width: 769px) {
  :is(.rie-deco--tl-disc, .rie-deco--tr-disc, .rie-deco--bl-disc, .rie-deco--br-disc, .rie-hero--colour)::before {
    --rie-deco-s: 400px;
  }
}

@media (min-width: 1025px) {
  :is(.rie-deco--tl-disc, .rie-deco--tr-disc, .rie-deco--bl-disc, .rie-deco--br-disc, .rie-hero--colour)::before,
  :is(.rie-deco--tl-dots, .rie-deco--tr-dots, .rie-deco--bl-dots, .rie-deco--br-dots, .rie-hero--colour)::after {
    --rie-deco-s: 500px;
  }
}

/* Colours per surface */
.rie-section--tint { --rie-deco-disc: var(--rie-color-white); }
.rie-section--navy, .rie-hero--colour { --rie-deco-disc: var(--rie-color-royal); --rie-deco-dots: var(--rie-color-azure); }
/* Ink: rotary.org shows no decorations on #212C3F; if used, keep them quiet (inferred). */
.rie-section--ink { --rie-deco-disc: var(--rie-color-ink-2); --rie-deco-dots: var(--rie-color-royal); }


/* ---------------------------------------------------------------------------
   3. SECTION HEAD  .rie-section-head (+ --center)
   H2 (Global "Heading 2") + optional one-line intro (16/24, max 860) 12px
   below; then --rie-head-gap (12 / 24 / 48) to the content. Left above
   horizontal-card rows; centred over grids and on bands.
   A pill inside the head (stats band) sits 16 / 24px under the H2.
   --------------------------------------------------------------------------- */

.rie-section-head {
  display: block;
  width: 100%;
  margin-block: 0 var(--rie-head-gap);
  padding: 0;
}

.rie-section-head.e-con { --row-gap: 0px; display: block; }

.rie-section-head > :is(h1, h2, h3, h4, p) {
  margin-block-end: 0;
}

.rie-section-head > :not(:first-child) {
  margin-block-start: var(--rie-space-3);
}

.rie-section-head :is(p, .elementor-widget-text-editor) {
  max-width: var(--rie-measure);
}

.rie-section-head > :is(.rie-actions, .rie-btn, .elementor-widget-button) {
  margin-block-start: var(--rie-space-4);
}

.rie-section-head.rie-section-head--center {
  text-align: center;
}

.rie-section-head.rie-section-head--center :is(p, .elementor-widget-text-editor) {
  margin-inline: auto;
}

.rie-section-head.rie-section-head--center > :is(.rie-actions, .elementor-widget-button) {
  display: flex;
  justify-content: center;
}

@media (min-width: 769px) {
  .rie-section-head > :is(.rie-actions, .rie-btn, .elementor-widget-button) {
    margin-block-start: var(--rie-space-6);
  }
}


/* Inside these blocks spacing comes from margin-block-start on the next
   element, so a paragraph's own 20px bottom margin would double up (plain
   markup) where Elementor's Text Editor has none. Drop it. */
:is(.rie-section-head, .rie-hero__content, .rie-hero-home__content, .rie-feature__content,
    .rie-testimonials__intro, .rie-listblock__intro, .rie-cta-card, .rie-callout,
    .rie-highlight, .rie-media__body, .rie-person__body, .rie-empty) > p {
  margin-block-end: 0;
}


/* ---------------------------------------------------------------------------
   4. ACTIONS ROW  .rie-actions (+ --center)
   A row of pills 16px apart, 32px below the block above ("the row is
   followed by a centred pill, 32px above it"). In Elementor put the class on
   a Container holding Button widgets, or straight on a single Button widget.
   --------------------------------------------------------------------------- */

.rie-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--rie-space-4);
  margin-block-start: var(--rie-space-8);
  margin-block-end: 0;
  padding: 0;
  list-style: none;
}

.rie-actions > li {
  margin: 0;
}

.rie-actions.e-con {
  --row-gap: var(--rie-space-4);
  --column-gap: var(--rie-space-4);
  flex-direction: row;               /* beats Elementor's var-driven column default */
}

.rie-actions.rie-actions--center {
  justify-content: center;
  text-align: center;
}

.rie-actions:first-child {
  margin-block-start: 0;
}


/* ---------------------------------------------------------------------------
   5. HOME HERO  .rie-hero-home  (rotary.org FullBleedHero)
   Full bleed, 600 (≤768) / 700 (≥769). Photo or self-hosted video with the
   double left + bottom gradient. Content bottom-left, max 528:
   H1 (Hero H1, white) 16px → copy 16/24 24px → pale pill.
   Plain:
     <section class="rie-hero-home">
       <video class="rie-hero-home__media" autoplay muted loop playsinline poster="…"></video>  (or <img class="rie-hero-home__media">)
       <div class="rie-hero-home__content"><h1>…</h1><p>…</p>
         <a class="rie-btn rie-btn--secondary" href="…">Take action with us</a></div></section>
   Elementor: Full Width container `rie-hero-home` with Background → Video
   (self-hosted MP4) + Background Fallback image; inner Full Width container
   `rie-hero-home__content` with Heading (Hero H1) + Text Editor + Button
   (rie-btn--secondary). Until the video exists: an Image widget with the
   class `rie-hero-home__media` first in the container instead of the
   background video (the widget and its <img> both fill the hero).
   Pause/play: rie-hero.js appends
     <button type="button" class="rie-icon-btn rie-hero-home__pause" aria-label="Pause background video">
       <span class="rie-icon rie-icon--pause" aria-hidden="true"></span></button>
   to .rie-hero-home__content. It sits beside the CTA below 769 and at
   bottom 48 / left gutter from 769 up.
   --------------------------------------------------------------------------- */

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

.rie-hero-home.e-con { --min-height: 600px; --justify-content: flex-end; }

.rie-hero-home::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--rie-overlay-home);
  pointer-events: none;
}

.rie-hero-home__media,
body .rie-hero-home .elementor-background-video-container {
  position: absolute;
  inset: 0;
  z-index: -2;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  object-fit: cover;
}

body .rie-hero-home .elementor-background-video-hosted {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Image widget twin: the class sits on the widget wrapper (absolute, full
   size, above); the <img> inside must fill it too, or Elementor's
   `.elementor img { height: auto }` leaves bare ink under the H1. */
.rie-hero-home__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rie-hero-home__content {
  position: static;                      /* the pause button positions on the hero */
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 0 var(--rie-space-4);
  width: 100%;
  max-width: 528px;
  margin: 0;
  padding: 0;
  color: var(--rie-color-white);
}

.rie-hero-home__content.e-con { --position: static; --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }

.rie-hero-home__content > * {
  grid-column: 1 / -1;
  min-width: 0;
  margin: 0;
}

body .rie-hero-home__content :is(h1, h2, .elementor-heading-title) {
  margin: 0;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-hero);
  line-height: var(--rie-lh-hero);
}

.rie-hero-home__content > :is(p, .elementor-widget-text-editor) {
  margin-block-start: var(--rie-space-4);
}

.rie-hero-home__content > :is(.rie-btn, .elementor-widget-button, .rie-actions, .rie-hero-home__pause) {
  grid-column: auto;
  justify-self: start;
  margin-block-start: var(--rie-space-6);
}

.rie-hero-home__content > .rie-hero-home__pause {
  grid-column: 2;
}

@media (min-width: 769px) {
  /* 190 below the content (brief); only 48 above it, so a 3-line H1 still
     fits the 700 minimum instead of growing the hero. */
  .rie-hero-home {
    min-height: 700px;
    padding-block: var(--rie-space-12) 190px;
  }
  .rie-hero-home.e-con { --min-height: 700px; }

  .rie-hero-home__content > .rie-hero-home__pause {
    position: absolute;
    bottom: var(--rie-space-12);
    left: var(--rie-hero-inset);
    margin: 0;
  }
}


/* ---------------------------------------------------------------------------
   6. INTERIOR PHOTO HERO  .rie-hero  (rotaryui-hero flex-text)
   ≥769: contained 1296 × 600 min, radius 20, cover photo, black-to-clear
   gradient, H1 + copy (max 440) centred at the bottom, white, no button.
   ≤768: the photo becomes a 3:2 block (radius 16) and the H1 and copy drop
   under it, left-aligned, in #323C44.
   Plain:
     <section class="rie-hero"><img class="rie-hero__media" src alt width height>
       <div class="rie-hero__content"><h1>Find a Club</h1><p>…</p></div></section>
   Elementor: Full Width container `rie-hero` > Image widget `rie-hero__media`
   (real alt) + Full Width container `rie-hero__content` (Heading H1 + Text
   Editor). One structure; CSS repositions it.
   --------------------------------------------------------------------------- */

.rie-hero {
  --rie-hero-w: min(var(--rie-max), 100% - 2 * var(--rie-gutter));
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: var(--rie-hero-w);
  margin: var(--rie-space-6) auto 0;
  padding: 0;
  color: var(--rie-color-text);
}

.rie-hero.e-con {
  --width: var(--rie-hero-w);
  --margin-top: var(--rie-space-6);
  --margin-left: auto;
  --margin-right: auto;
  --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px;
}

.rie-hero__media {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 3 / 2;
  border-radius: var(--rie-radius-card);
  object-fit: cover;
}

.rie-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rie-hero__content {
  width: 100%;
  margin: 0;
  padding: var(--rie-space-4) 0 0;
  text-align: left;
}

.rie-hero__content.e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; display: block; }

.rie-hero__content :is(h1, h2, .elementor-heading-title) {
  margin: 0;
}

.rie-hero__content > :not(:first-child) {
  margin-block-start: var(--rie-space-4);
}

.rie-hero__content :is(p, .elementor-widget-text-editor) {
  max-width: var(--rie-measure);
}

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

  .rie-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }

  .rie-hero:not(.rie-hero--colour)::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rie-overlay-hero);
    pointer-events: none;
  }

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

  .rie-hero__content :is(p, .elementor-widget-text-editor) {
    max-width: var(--rie-hero-copy);
    margin-inline: auto;
  }
}

@media (min-width: 1025px) {
  .rie-hero__content {
    padding-bottom: var(--rie-space-12);
  }
  .rie-hero__content > :not(:first-child) {
    margin-block-start: var(--rie-space-6);
  }
}

/* Colour hero  .rie-hero--colour — full-bleed navy, 400 min, centred white
   H1 + copy (max 440), TL disc + BR dots built in. For pages without a good
   photo (forms, people, utility, 404). */
.rie-hero.rie-hero--colour {
  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);
}

.rie-hero.rie-hero--colour.e-con { --width: 100%; --margin-top: 0px; --min-height: 400px; --justify-content: center; --align-items: center; }

.rie-hero--colour .rie-hero__content {
  max-width: 830px;
  padding: 0;
  color: var(--rie-color-white);
  text-align: center;
}

.rie-hero--colour .rie-hero__content :is(p, .elementor-widget-text-editor) {
  max-width: var(--rie-hero-copy);
  margin-inline: auto;
}


/* ---------------------------------------------------------------------------
   7. FEATURED-IMAGE SECTION  .rie-feature (+ --contained)
   Full-bleed (default): 600 min; text bottom-left, max 510, 60px from the
   bottom, aligned with the page gutter. Contained: 1296 × 494, radius 20,
   text inset 32 (769+) / 48 (1025+), max 570.
   H3 white 16px → copy 16/24 white → pale pill 24px below.
   ≤768 both stack: 16:9 image, then the text on the page in #323C44.
   Same structure as .rie-hero:
     <section class="rie-feature"><img class="rie-feature__media" …>
       <div class="rie-feature__content"><h3>…</h3><p>…</p>
         <a class="rie-btn rie-btn--secondary">…</a></div></section>
   --------------------------------------------------------------------------- */

.rie-feature {
  --rie-feature-inset: max(var(--rie-gutter), (100% - var(--rie-max)) / 2);
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
  margin: 0;
  padding: 0;
  color: var(--rie-color-text);
}

.rie-feature.e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; }

.rie-feature__media {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.rie-feature__media img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.rie-feature--contained .rie-feature__media {
  border-radius: var(--rie-radius-hero);
}

.rie-feature__content {
  width: 100%;
  margin: 0;
  padding: var(--rie-space-4) var(--rie-gutter) var(--rie-space-12);
}

.rie-feature--contained .rie-feature__content {
  padding: var(--rie-space-4) 0 0;
}

.rie-feature__content.e-con { --padding-top: 0px; --padding-bottom: 0px; --padding-left: 0px; --padding-right: 0px; display: block; }

.rie-feature__content :is(h2, h3, .elementor-heading-title) {
  margin: 0;
}

.rie-feature__content > :not(:first-child) {
  margin-block-start: var(--rie-space-4);
}

.rie-feature__content > :is(.rie-btn, .rie-actions, .elementor-widget-button) {
  margin-block-start: var(--rie-space-6);
}

@media (min-width: 769px) {
  .rie-feature {
    isolation: isolate;
    overflow: hidden;
    justify-content: flex-end;
    min-height: 600px;
    color: var(--rie-color-white);
  }
  .rie-feature.e-con { --min-height: 600px; --justify-content: flex-end; }

  .rie-feature.rie-feature--contained {
    min-height: 494px;
    border-radius: var(--rie-radius-hero);
  }
  .rie-feature.rie-feature--contained.e-con { --min-height: 494px; }

  .rie-feature__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
  }

  .rie-feature::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rie-overlay-hero);
    pointer-events: none;
  }

  .rie-feature__content {
    max-width: var(--rie-feature-copy);
    margin: 0 0 60px var(--rie-feature-inset);
    padding: 0;
    color: var(--rie-color-white);
  }

  .rie-feature--contained .rie-feature__content {
    max-width: var(--rie-feature-copy-contained);
    margin: 0 0 var(--rie-space-8) var(--rie-space-8);
  }
}

@media (min-width: 1025px) {
  .rie-feature--contained .rie-feature__content {
    margin: 0 0 var(--rie-space-12) var(--rie-space-12);
  }
}

/* A contained feature followed by more content in the same band (T-NEWS:
   featured story → latest stories): 24 / 32 / 48 above the next block, as
   on rotary.org's news landing. Inside an Elementor section the container
   gap is 0, and a [rie_featured] Shortcode widget wraps the feature, so the
   widget's next sibling is matched too. */
:is(.rie-feature--contained, .elementor-widget:has(.rie-feature--contained)) + * {
  margin-block-start: var(--rie-stack-lg);
}

@media (min-width: 1025px) {
  :is(.rie-feature--contained, .elementor-widget:has(.rie-feature--contained)) + * {
    margin-block-start: var(--rie-space-12);
  }
}


/* Image widgets that carry a media class: Elementor may wrap the <img> in
   .elementor-widget-container; let it fill the widget so the img can too. */
:is(.rie-hero-home__media, .rie-hero__media, .rie-feature__media, .rie-ring, .rie-portrait, .rie-media__img,
    .rie-cta-card__media, .rie-person__media, .rie-person-card__media) > .elementor-widget-container {
  height: 100%;
}


/* ---------------------------------------------------------------------------
   8. GRID  .rie-grid (+ --2, --4, --h)
   1 → 2 (769) → 3 (1025) columns, gap 20 at every size. --2 stays at 2;
   --4 goes 1 → 2 → 4; --h (horizontal cards) 1 → 1 → 2.
   While a grid shows 2 columns, an odd last item (3 cards on a tablet)
   centres in the row instead of leaving an empty half, as CTA rows do.
   A grid of person cards is 2-up on phones (see §21).
   Elementor: a Flexbox container (never Grid; P10) with the class; the CSS
   sets the columns. A Grid container's own column settings would override
   the class.
   --------------------------------------------------------------------------- */

.rie-grid {
  --rie-grid-cols: 1;
  display: grid;
  grid-template-columns: repeat(var(--rie-grid-cols), minmax(0, 1fr));
  gap: var(--rie-gap);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-grid.e-con-boxed { display: block; }

.rie-grid > .e-con-inner {
  display: grid;
  grid-template-columns: repeat(var(--rie-grid-cols), minmax(0, 1fr));
  gap: var(--rie-gap);
}

.rie-grid > *,
.rie-grid > .e-con-inner > * {
  min-width: 0;
  margin: 0;
}

/* Person cards on phones: 2-up, not a 600px-tall card each (leadership
   pages list 8–10 officers). :where() keeps this at 0,1,0 so the 769 / 1025
   column counts below still take over. */
:where(.rie-grid):has(> .rie-person-card, > .e-con-inner > .rie-person-card) {
  --rie-grid-cols: 2;
}

:where(.rie-grid) > .rie-person-card:last-child:nth-child(odd),
:where(.rie-grid) > .e-con-inner > .rie-person-card:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  justify-self: center;
  width: calc(50% - var(--rie-gap) / 2);
}

@media (min-width: 769px) {
  .rie-grid { --rie-grid-cols: 2; }
  .rie-grid.rie-grid--h { --rie-grid-cols: 1; }

  /* 2 columns: a lone last item spans the row and centres at one column wide. */
  .rie-grid:not(.rie-grid--h) > :last-child:nth-child(odd):not(.e-con-inner),
  .rie-grid:not(.rie-grid--h) > .e-con-inner > :last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--rie-gap) / 2);
  }
}

@media (min-width: 1025px) {
  .rie-grid { --rie-grid-cols: 3; }
  .rie-grid.rie-grid--2,
  .rie-grid.rie-grid--h { --rie-grid-cols: 2; }
  .rie-grid.rie-grid--4 { --rie-grid-cols: 4; }

  /* 3 and 4 columns: back to normal flow (--2 stays 2 columns, so it keeps the centring). */
  .rie-grid:not(.rie-grid--2, .rie-grid--h) > :last-child:nth-child(odd):not(.e-con-inner),
  .rie-grid:not(.rie-grid--2, .rie-grid--h) > .e-con-inner > :last-child:nth-child(odd) {
    grid-column: auto;
    justify-self: stretch;
    width: auto;
  }
}


/* ---------------------------------------------------------------------------
   8b. SPLIT  .rie-split (+ --8-4 default, --7-5, --2-3)
   Two columns side by side, stacked below the breakpoint; for exactly two
   children, top-aligned. Column gap 48, stacked gap 24 / 32.
     --8-4  (default) 2 : 1 from 1025. T-NEWS "Latest stories": cards left
            (a .rie-grid--2 of 4), "Club news" list right.
     --7-5  7 : 5 from 1025. T-APPEAL "The situation" prose + impact panel.
     --2-3  40 / 60 from 769 (column gap 32, 48 from 1025). T-HOME "Find a
            club near you": H2 + intro + pill left, club finder right.
   Plain:
     <div class="rie-split rie-split--7-5"><div>…</div><aside>…</aside></div>
   Elementor: a Flexbox container (Full Width or Boxed) with the classes,
   holding two containers (or widgets). Leave the children's Width empty in
   the panel: the CSS sets the columns and overrides any panel width.
   --------------------------------------------------------------------------- */

.rie-split,
.rie-split > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--rie-stack-lg) var(--rie-space-12);
}

.rie-split.e-con-boxed { display: block; }

/* 0,2,1: also beats `.rie-prose.elementor-widget` (align-self: center,
   margin-inline: auto), so a prose Text Editor sits top-left in its column. */
body .rie-split > :not(.e-con-inner),
body .rie-split > .e-con-inner > * {
  align-self: start;
  width: auto;            /* fills its column; beats Elementor's `.e-con { width: var(--width) }` */
  min-width: 0;
  margin: 0;
}

@media (min-width: 769px) {
  .rie-split.rie-split--2-3,
  .rie-split.rie-split--2-3 > .e-con-inner {
    grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
    column-gap: var(--rie-space-8);
  }
}

@media (min-width: 1025px) {
  .rie-split,
  .rie-split > .e-con-inner,
  .rie-split.rie-split--8-4,
  .rie-split.rie-split--8-4 > .e-con-inner {
    grid-template-columns: minmax(0, 8fr) minmax(0, 4fr);
  }
  .rie-split.rie-split--7-5,
  .rie-split.rie-split--7-5 > .e-con-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
  .rie-split.rie-split--2-3,
  .rie-split.rie-split--2-3 > .e-con-inner {
    column-gap: var(--rie-space-12);
  }
}


/* ---------------------------------------------------------------------------
   9. TESTIMONIALS  .rie-testimonials + .rie-portrait  (TestimonialsSection)
   Use on a navy band: rie-section rie-section--navy rie-deco--tl-disc
   rie-deco--br-dots rie-testimonials. ≥1025 a row: intro 39% left, three
   testimonials 50% right, 48px apart, each portrait + quote in a row 64px
   apart. ≤1024 everything is centred and stacked.
   Plain:
     <section class="rie-section rie-section--navy rie-deco--tl-disc rie-deco--br-dots rie-testimonials">
      <div class="rie-container">
       <div class="rie-testimonials__intro"><h2>…</h2><p>…</p><a class="rie-btn rie-btn--secondary rie-btn--block-mobile">…</a></div>
       <ul class="rie-testimonials__list">
        <li class="rie-testimonial">
         <div class="rie-portrait"><img …></div>
         <div class="rie-testimonial__body"><p class="rie-testimonial__quote">…</p>
          <p class="rie-testimonial__name">…</p><p class="rie-testimonial__role">…</p></div></li> …
   Elementor: the section container carries the classes; intro = container
   (Heading + Text + Button); list = container of 3 `rie-testimonial`
   containers, each: Image widget `rie-portrait` + container
   `rie-testimonial__body` (Text Editor `rie-testimonial__quote`, Heading
   `rie-testimonial__name`, Heading `rie-testimonial__role`, both HTML tag p).
   --------------------------------------------------------------------------- */

.rie-testimonials > .rie-container,
.rie-testimonials > .e-con-inner,
.rie-testimonials:not(.rie-section, .e-con-boxed) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  text-align: center;
}

.rie-testimonials__intro {
  margin: 0;
  padding: 0;
}

.rie-testimonials__intro.e-con { display: block; }

.rie-testimonials__intro :is(h2, .elementor-heading-title) {
  margin: 0;
}

.rie-testimonials__intro > :not(:first-child) {
  margin-block-start: var(--rie-space-3);
}

.rie-testimonials__intro > :is(.rie-btn, .rie-actions, .elementor-widget-button) {
  margin-block-start: var(--rie-space-4);
}

.rie-testimonials__list {
  display: grid;
  gap: var(--rie-space-12);
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-testimonial {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  gap: var(--rie-space-4);
  margin: 0;
  padding: 0;
}

.rie-testimonial__body {
  display: block;
  margin: 0;
  padding: 0;
}

.rie-testimonial__body.e-con { display: block; }

:is(p.rie-testimonial__quote, .rie-testimonial__quote p) {
  display: -webkit-box;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.rie-testimonial__body > .rie-testimonial__quote + * {
  margin-block-start: var(--rie-space-3);
}

:is(.rie-testimonial__name, .rie-testimonial__role),
body :is(.rie-testimonial__name, .rie-testimonial__role) .elementor-heading-title {
  margin-block-end: 0;
  margin-inline: 0;
  color: var(--rie-color-page);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-body);
}

.rie-testimonial__name + .rie-testimonial__role {
  margin-block-start: var(--rie-space-1);
}

/* Portrait with the gold dashed ring: 140 → 208px, photo inset 8 → 12px */
.rie-portrait {
  position: relative;
  flex: none;
  width: 140px;
  height: 140px;
  margin: 0;
  padding: var(--rie-space-2);
}

.rie-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rie-color-gold);
  -webkit-mask: var(--rie-i-portrait-ring) center / 100% 100% no-repeat;
  mask: var(--rie-i-portrait-ring) center / 100% 100% no-repeat;
  pointer-events: none;
}

.rie-portrait img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 769px) {
  .rie-portrait {
    width: 208px;
    height: 208px;
    padding: var(--rie-space-3);
  }
}

@media (min-width: 1025px) {
  .rie-testimonials > .rie-container,
  .rie-testimonials > .e-con-inner,
  .rie-testimonials:not(.rie-section, .e-con-boxed) {
    grid-template-columns: 39% 50%;
    justify-content: space-between;
    text-align: left;
  }

  .rie-testimonial {
    grid-template-columns: 208px minmax(0, 1fr);
    justify-items: start;
    column-gap: var(--rie-space-16);
  }
}


/* ---------------------------------------------------------------------------
   10. LINK LIST + RING PHOTO  .rie-listblock · .rie-linklist · .rie-ring
   ("Our causes"). ≥1025 grid 3fr | 128px | 5fr | 1fr = intro / spacer /
   list / spacer; stacked 32px apart below that.
   Rows 32/38 600 (28/33 md, 24/28 mobile), padding 32 / 24 / 16, 1px rule.
   Hover: text #0067C8, a 1px blue bar grows left to right (300ms), a 20px
   arrow fades in. ≤1024 rows are blue with the arrow always shown.
   Plain list:  <ul class="rie-linklist"><li><a href="…">Christmas Hampers</a></li>…</ul>
   Elementor:   Icon List widget with the class (links set; any icon — the
                CSS hides it and draws the arrow on the right).
   Ring photo:  <div class="rie-ring"><img …></div>  or an Image widget with
                the class. 168 / 260 / 378px, photo inset 12 / 16 / 24.
   --------------------------------------------------------------------------- */

.rie-listblock:not(.e-con-boxed),
.rie-listblock > .e-con-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-space-8);
  align-items: start;
}

.rie-listblock__intro {
  margin: 0;
  padding: 0;
}

.rie-listblock__intro.e-con { display: block; }

.rie-listblock__intro :is(h2, h3, .elementor-heading-title) {
  margin: 0;
}

.rie-listblock__intro > :not(:first-child) {
  margin-block-start: var(--rie-space-1);
}

.rie-listblock__intro :is(p, .elementor-widget-text-editor) {
  line-height: calc(var(--rie-lh-body) + var(--rie-space-1));   /* 16/28 */
}

.rie-listblock__intro > .rie-ring {
  margin-block-start: var(--rie-space-8);
}

.rie-listblock__list {
  margin: 0;
  padding: 0;
}

/* Grouping containers: Elementor's 20px container gap would add to the
   components' own margins (Icon List → pill came out 52px, not 32). Block
   layout lets the rie margins alone set the rhythm (Q26). */
.rie-listblock__list.e-con,
.rie-container.e-con { display: block; }

@media (min-width: 1025px) {
  .rie-listblock:not(.e-con-boxed),
  .rie-listblock > .e-con-inner {
    grid-template-columns: 3fr 128px 5fr 1fr;
    gap: 0;
  }
  .rie-listblock:not(.e-con-boxed) > :first-child,
  .rie-listblock > .e-con-inner > :first-child { grid-column: 1; }
  .rie-listblock:not(.e-con-boxed) > :nth-child(2),
  .rie-listblock > .e-con-inner > :nth-child(2) { grid-column: 3; }

  .rie-listblock__intro > .rie-ring {
    margin-block-start: var(--rie-space-12);
  }
}

/* The list */
.rie-linklist {
  --rie-ll-pad: var(--rie-space-4);
  width: 100%;
  max-width: 618px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-linklist ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-linklist > li,
body .rie-linklist .elementor-icon-list-item {
  display: block;
  margin: 0;
  padding: 0;
}

.rie-linklist > li > a,
body .rie-linklist .elementor-icon-list-item > a {
  position: relative;
  display: block;
  padding: var(--rie-ll-pad) 40px var(--rie-ll-pad) 0;
  border-bottom: 1px solid var(--rie-color-line);
  color: var(--rie-color-azure);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h3);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h3);
  text-decoration: none;
  transition: color var(--rie-dur-slow) var(--rie-ease);
}

.rie-linklist > li:first-child > a,
body .rie-linklist .elementor-icon-list-item:first-child > a {
  padding-top: 0;
}

body .rie-linklist .elementor-icon-list-icon {
  display: none;
}

body .rie-linklist .elementor-icon-list-icon + .elementor-icon-list-text,
body .rie-linklist .elementor-icon-list-text {
  padding: 0;
  color: inherit;
  font: inherit;
}

/* growing bar */
.rie-linklist > li > a::before,
body .rie-linklist .elementor-icon-list-item > a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -1px;
  width: 0;
  height: 1px;
  background-color: var(--rie-color-azure);
  transition: width var(--rie-dur-slow) var(--rie-ease);
}

/* arrow, level with the last line of text */
.rie-linklist > li > a::after,
body .rie-linklist .elementor-icon-list-item > a::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: calc(var(--rie-ll-pad) + (var(--rie-lh-h3) - 20px) / 2);
  width: 20px;
  height: 20px;
  background-color: currentColor;
  -webkit-mask: var(--rie-i-arrow-right) center / contain no-repeat;
  mask: var(--rie-i-arrow-right) center / contain no-repeat;
  opacity: 1;
  transition: opacity var(--rie-dur-slow) var(--rie-ease);
}

.rie-linklist > li > a:is(:hover, :focus-visible),
body .rie-linklist .elementor-icon-list-item > a:is(:hover, :focus-visible) {
  color: var(--rie-color-azure);
}

.rie-linklist > li > a:is(:hover, :focus-visible)::before,
body .rie-linklist .elementor-icon-list-item > a:is(:hover, :focus-visible)::before {
  width: 100%;
}

.rie-linklist > li > a:active,
body .rie-linklist .elementor-icon-list-item > a:active {
  color: var(--rie-color-active);
}

@media (min-width: 769px) {
  .rie-linklist { --rie-ll-pad: var(--rie-space-6); }
}

@media (min-width: 1025px) {
  .rie-linklist { --rie-ll-pad: var(--rie-space-8); }

  .rie-linklist > li > a,
  body .rie-linklist .elementor-icon-list-item > a {
    color: var(--rie-color-text);
  }

  .rie-linklist > li > a::after,
  body .rie-linklist .elementor-icon-list-item > a::after {
    opacity: 0;
  }

  .rie-linklist > li > a:is(:hover, :focus-visible)::after,
  body .rie-linklist .elementor-icon-list-item > a:is(:hover, :focus-visible)::after {
    opacity: 1;
  }
}

/* The ring photo */
.rie-ring {
  position: relative;
  flex: none;
  width: 168px;
  max-width: 100%;
  aspect-ratio: 1;
  margin: 0;
  padding: var(--rie-space-3);
}

.rie-ring::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--rie-color-gold);
  -webkit-mask: var(--rie-i-dash-ring) center / 100% 100% no-repeat;
  mask: var(--rie-i-dash-ring) center / 100% 100% no-repeat;
  pointer-events: none;
}

.rie-ring img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

@media (min-width: 769px) {
  .rie-ring { width: 260px; padding: var(--rie-space-4); }
}

@media (min-width: 1025px) {
  .rie-ring { width: 378px; padding: var(--rie-space-6); }
}


/* ---------------------------------------------------------------------------
   11. STATS  .rie-stats / .rie-stat  (statistics-cards)
   On --navy (home) or --ink (detail pages). Head = centred H2 + pale pill
   (.rie-section-head--center). Row 48px below the head (92 at 1025+),
   centred, gap 24 / 32 / 64, cards 100% → 50%-32 → 33%-64.
   Card: optional 100 / 132px line icon → number (Stat font, 400, gold on
   dark / royal on light) → caption 16/28 → "Explore →".
   Plain:
     <div class="rie-stats">
       <div class="rie-stat"><p class="rie-stat__number">66</p>
         <p class="rie-stat__label">clubs across the island</p>
         <a class="rie-btn rie-btn--arrow" href="…">Explore</a></div> …
   Elementor: a Flexbox container (never Grid; P10) with `rie-stats`; each
   stat a container `rie-stat` holding a Counter widget (title = caption)
   and a Button with `rie-btn--arrow`. Counter Starting Number = Ending
   Number (P15), so the figure is right without JavaScript.
   --------------------------------------------------------------------------- */

.rie-stats {
  --rie-stats-top: var(--rie-space-12);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: var(--rie-space-6);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-stats.e-con { flex-direction: row; }
.rie-stats.e-con-boxed { display: block; }

.rie-stats > .e-con-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rie-space-6);
}

.rie-section-head + .rie-stats {
  padding-top: calc(var(--rie-stats-top) - var(--rie-head-gap));
}

.rie-stats > .rie-stat,
.rie-stats > .e-con-inner > .rie-stat {
  width: 100%;
}

.rie-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rie-space-4);
  margin: 0;
  padding: 0;
  text-align: center;
}

.rie-stat__icon,
.rie-stat__icon img {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 0 var(--rie-space-2);
  object-fit: contain;
}

.rie-stat__number {
  margin: 0;
  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);
  font-variant-numeric: lining-nums;
}

.rie-stat__label {
  margin: 0;
  line-height: calc(var(--rie-lh-body) + var(--rie-space-1));   /* 16/28 */
}
/* Plain-markup stats inside a Text Editor: beat the legacy `body.elementor-kit-7 p` margins. */
body .rie-stats .rie-stat > p:is(.rie-stat__number, .rie-stat__label) { margin: 0; }

.rie-stat > :is(.rie-btn, .rie-link-arrow, .elementor-widget-button):last-child {
  margin-top: auto;
}

/* Counter widget twin */
body .rie-stats .elementor-counter {
  display: flex;
  flex-direction: column-reverse;
  align-items: stretch;
  justify-content: center;
  gap: var(--rie-space-4);
}

body .rie-stats .elementor-counter-number-wrapper {
  display: flex;
  justify-content: center;
  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);
  font-variant-numeric: lining-nums;
}

body .rie-stats :is(.elementor-counter-number-prefix, .elementor-counter-number-suffix) {
  flex-grow: 1;
}
body .rie-stats .elementor-counter-number-prefix { text-align: end; }
body .rie-stats .elementor-counter-number-suffix { text-align: start; }

body .rie-stats .elementor-counter-title {
  display: block;
  margin: 0;
  padding: 0;
  color: inherit;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-regular);
  line-height: calc(var(--rie-lh-body) + var(--rie-space-1));
  text-align: center;
}

/* Gold numbers on navy / ink */
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink) .rie-stat__number,
body :where(.rie-on-dark, .rie-section--navy, .rie-section--ink) .rie-stats .elementor-counter-number-wrapper {
  color: var(--rie-color-gold);
}

@media (min-width: 769px) {
  .rie-stats,
  .rie-stats > .e-con-inner { gap: var(--rie-space-8); }
  .rie-stats > .rie-stat,
  .rie-stats > .e-con-inner > .rie-stat { width: calc(50% - var(--rie-space-8)); }
  .rie-stat__icon,
  .rie-stat__icon img { width: 132px; height: 132px; }
}

@media (min-width: 1025px) {
  .rie-stats { --rie-stats-top: calc(var(--rie-space-20) + var(--rie-space-3)); }   /* 92 */
  .rie-stats,
  .rie-stats > .e-con-inner { gap: var(--rie-space-16); }
  .rie-stats > .rie-stat,
  .rie-stats > .e-con-inner > .rie-stat { width: calc(33% - var(--rie-space-16)); }
  /* Exactly four stats: one row of four instead of 3 + 1. */
  .rie-stats:has(> .rie-stat:nth-child(4):last-child) > .rie-stat,
  .rie-stats > .e-con-inner:has(> .rie-stat:nth-child(4):last-child) > .rie-stat { width: calc(25% - var(--rie-space-12)); }
}


/* ---------------------------------------------------------------------------
   12. CTA TRIO  .rie-cta-trio (+ --circle) / .rie-cta-card
   Centred H2 (line-height 1.2, max 830) 32px → cards: wrap, centred, gaps
   48 / 32; 100% → (100%-48)/2 → 33%-30; short rows centre. Card: centred;
   H4 (lh 1.2) 12px → text 16/24 → bottom slot pinned (pale pill or
   "Explore →"). Closing pill below.
   Two variants:
     .rie-cta-trio            text variant (no photos): donate, news, duck races.
     .rie-cta-trio--circle    photo variant: each card opens with a 189px
                              round photo `rie-cta-card__media`, 32px above
                              the title. The modifier is what makes the photo
                              round; without it a card image shows at its own
                              shape, full card width.
   From 769 px, when a row mixes a pill with "Explore →" links, every bottom
   slot takes the pill's 56px height and centres its content, so the labels
   line up.
   Plain:
     <div class="rie-cta-trio rie-cta-trio--circle">
       <h2 class="rie-cta-trio__title">…</h2>
       <div class="rie-cta-trio__cards">
         <div class="rie-cta-card"><img class="rie-cta-card__media" …>
           <h3 class="rie-cta-card__title">…</h3><p>…</p>
           <div class="rie-cta-card__action"><a class="rie-btn rie-btn--arrow" href="…">Explore<span class="rie-sr-only"> Nepal Flood Appeal</span></a></div></div> …
       </div>
       <div class="rie-actions rie-actions--center">…</div></div>
   Elementor: same classes on Flexbox containers / widgets (Image
   `rie-cta-card__media`, Heading `rie-cta-card__title`, Button). Never a
   Grid container (P10), and never a Button inside a container whose HTML
   tag is `a`.
   --------------------------------------------------------------------------- */

.rie-cta-trio {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: center;
}

.rie-cta-trio__title,
body .rie-cta-trio__title .elementor-heading-title {
  max-width: 830px;
  margin: 0 auto;
  line-height: 1.2;
}

.rie-cta-trio > .rie-cta-trio__title + * {
  margin-block-start: var(--rie-space-8);
}

.rie-cta-trio__cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rie-space-8) var(--rie-space-12);
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rie-cta-trio__cards.e-con { flex-direction: row; }
.rie-cta-trio__cards.e-con-boxed { display: block; }

.rie-cta-trio__cards > .e-con-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--rie-space-8) var(--rie-space-12);
}

.rie-cta-trio__cards > .rie-cta-card,
.rie-cta-trio__cards > .e-con-inner > .rie-cta-card {
  width: 100%;
}

.rie-cta-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin: 0;
  padding: 0;
  text-align: center;
}

.rie-cta-card__media,
.rie-cta-card__media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
}

/* Photo variant: 189px round photo */
.rie-cta-trio--circle :is(.rie-cta-card__media, .rie-cta-card__media img) {
  width: 189px;
  aspect-ratio: 1;
  border-radius: 50%;
  object-fit: cover;
}

.rie-cta-card > .rie-cta-card__media + * {
  margin-block-start: var(--rie-space-8);
}

.rie-cta-card__title,
body .rie-cta-card__title .elementor-heading-title {
  margin: 0;
  color: inherit;
  font-size: var(--rie-fs-h4);
  font-weight: var(--rie-fw-semibold);
  line-height: 1.2;
}

.rie-cta-card > .rie-cta-card__title + * {
  margin-block-start: var(--rie-space-3);
}

.rie-cta-card :is(p, .elementor-widget-text-editor) {
  margin-block-end: 0;
}

.rie-cta-card > :is(.rie-cta-card__action, .elementor-widget-button):last-child {
  margin-top: auto;
  padding-top: var(--rie-space-6);
}

/* Mixed row (a pill and arrow links), once cards sit side by side: each slot
   is pill-high (24 + 56) and centres what it holds, so a 24px "Explore →"
   label sits level with the label inside the 56px pill. Rows of arrows
   only, and stacked cards on phones, keep rotary.org's 24px. */
@media (min-width: 769px) {
  .rie-cta-trio__cards:has(.rie-btn:not(.rie-btn--arrow, .rie-btn--text), .elementor-widget-button:not(.rie-btn--arrow, .rie-btn--text))
    .rie-cta-card > :is(.rie-cta-card__action, .elementor-widget-button):last-child {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(56px + var(--rie-space-6));
  }
}

.rie-cta-trio > .rie-actions {
  justify-content: center;
}

@media (min-width: 769px) {
  .rie-cta-trio__cards > .rie-cta-card,
  .rie-cta-trio__cards > .e-con-inner > .rie-cta-card { width: calc((100% - var(--rie-space-12)) / 2); }
}

@media (min-width: 1025px) {
  .rie-cta-trio__cards > .rie-cta-card,
  .rie-cta-trio__cards > .e-con-inner > .rie-cta-card { width: calc(33% - 30px); }
  /* .rie-cta-trio--4: four cards on one row (3 gaps of 48px) instead of 3 + 1 orphan. */
  .rie-cta-trio--4 .rie-cta-trio__cards > .rie-cta-card,
  .rie-cta-trio--4 .rie-cta-trio__cards > .e-con-inner > .rie-cta-card { width: calc(25% - 36px); }
}


/* ---------------------------------------------------------------------------
   13. CALLOUT  .rie-callout (+ --purple)  (rotaryui-callout)
   Max 860, centred, navy (or violet), radius 16, padding 24/16 → 32 → 48.
   H2 white, 16 → 24px below (or H4-sized for small callouts, 8px below);
   body white; white pill 16px below.
   Elementor: Full Width container `rie-callout` + Heading + Text Editor +
   Button `rie-btn--white`.
   --------------------------------------------------------------------------- */

.rie-callout {
  display: block;
  width: 100%;
  max-width: var(--rie-measure);
  margin: var(--rie-stack-md) auto;
  padding: var(--rie-space-6) var(--rie-space-4);
  border-radius: var(--rie-radius-card);
  background-color: var(--rie-color-navy);
  color: var(--rie-color-white);
}

.rie-callout.rie-callout--purple {
  background-color: var(--rie-color-violet);
}

.rie-callout:first-child { margin-top: 0; }
.rie-callout:last-child  { margin-bottom: 0; }

.rie-callout :is(h2, h3, h4, .elementor-heading-title) {
  margin: 0;
  color: inherit;
}

.rie-callout > :not(:first-child) {
  margin-block-start: var(--rie-space-4);
}

/* Small callout: an H4-sized title (any level: <h3 class="rie-h4"> keeps
   the outline right), 8px to the text. */
.rie-callout > :is(h4, h5, .rie-h4, .rie-h5, .elementor-widget-heading:is(:has(h4, h5), .rie-h4, .rie-h5)) + * {
  margin-block-start: var(--rie-space-2);
}

.rie-callout > :is(.rie-btn, .rie-actions, .elementor-widget-button) {
  margin-block-start: var(--rie-space-4);
}

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

@media (min-width: 1025px) {
  .rie-callout { padding: var(--rie-space-12); }
  .rie-callout > :is(h2, .elementor-widget-heading:has(h2)) + * {
    margin-block-start: var(--rie-space-6);
  }
}


/* ---------------------------------------------------------------------------
   14. CONTENT HIGHLIGHT  .rie-highlight  (rotaryui-content-highlight)
   Max 860, azure, radius 16, padding 16 / 24; H4 white 16 / 24 below;
   body near-white; lists with bold lead-ins; links white.
   In posts: a Gutenberg Group block with the class.
   --------------------------------------------------------------------------- */

.rie-highlight {
  display: block;
  width: 100%;
  max-width: var(--rie-measure);
  margin: var(--rie-stack-md) auto;
  padding: var(--rie-space-4);
  overflow: hidden;
  border-radius: var(--rie-radius-card);
  background-color: var(--rie-color-azure);
  color: var(--rie-color-page);
}

.rie-highlight:first-child { margin-top: 0; }
.rie-highlight:last-child  { margin-bottom: 0; }

body .rie-highlight :is(h2, h3, h4, h5, .elementor-heading-title) {
  margin: 0;
  color: var(--rie-color-white);
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
}

.rie-highlight > :not(:first-child) {
  margin-block-start: var(--rie-space-4);
}

.rie-highlight :is(ul, ol) {
  margin-block-end: 0;
  padding-inline-start: var(--rie-space-6);
}

.rie-highlight li + li {
  margin-block-start: var(--rie-space-2);
}

.rie-highlight strong {
  color: var(--rie-color-white);
}

@media (min-width: 769px) {
  .rie-highlight { padding: var(--rie-space-6); }
  .rie-highlight > :not(:first-child) { margin-block-start: var(--rie-space-6); }
  .rie-highlight > :not(:is(h2, h3, h4, h5, .elementor-widget-heading)) + :not(:is(h2, h3, h4, h5, .elementor-widget-heading)) {
    margin-block-start: var(--rie-space-4);
  }
}


/* ---------------------------------------------------------------------------
   15. PULL QUOTE  .rie-quote  (no rotary.org equivalent; built from tokens)
   Tint panel, 4px royal left rule, radius 0 16 16 0, padding 24;
   quote 24/36 600 (20/30 below 1025), cite 14/21, not italic. The cite is
   in the text colour: the brief's muted #717171 is 4.30:1 on the tint panel.
   <figure class="rie-quote"><blockquote><p>…</p></blockquote>
     <figcaption>— Name, Rotary Club of …</figcaption></figure>
   Elementor: Text Editor with the class (a <p> and an optional <cite>).
   --------------------------------------------------------------------------- */

.rie-quote {
  display: block;
  width: 100%;
  max-width: var(--rie-measure);
  margin: var(--rie-stack-md) auto;
  padding: var(--rie-space-6);
  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);
  font-style: normal;
}

.rie-quote:first-child { margin-top: 0; }
.rie-quote:last-child  { margin-bottom: 0; }

.rie-quote blockquote {
  margin: 0;
  padding: 0;
  border: 0;
}

.rie-quote :is(blockquote, p) {
  margin: 0;
  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);
}

.rie-quote :is(p + p) {
  margin-block-start: var(--rie-space-4);
}

.rie-quote :is(cite, figcaption, .rie-quote__cite) {
  display: block;
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  font-style: normal;
  font-weight: var(--rie-fw-regular);
  line-height: var(--rie-lh-sm);
}


/* ---------------------------------------------------------------------------
   16. MEDIA BLOCK  .rie-media (+ --reverse)  (rotaryui-media-block)
   Use on a white band with decorations. ≥1025 a 12-column row: text 5
   columns, 1 empty, image 6 columns (aspect 618/463, radius 16); --reverse
   puts the image on the left. Text comes first in the DOM, so below 1025 the
   text shows first and the image follows 24px later.
   H2 16px → text 16/24 → 16 / 24 / 32px → primary pill.
   <div class="rie-media"><div class="rie-media__body"><h2>…</h2><p>…</p>
       <a class="rie-btn" href="…">…</a></div>
     <img class="rie-media__img" …></div>
   Elementor: Full Width container `rie-media` > container `rie-media__body`
   + Image widget `rie-media__img`. The classes drive the layout; the panel
   direction does not matter.
   --------------------------------------------------------------------------- */

.rie-media {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
  gap: var(--rie-space-6) var(--rie-gap);
  width: 100%;
  margin: 0;
  padding: 0;
}

.rie-media + .rie-media {
  margin-block-start: var(--rie-section-y);
}

.rie-media__body {
  margin: 0;
  padding: 0;
}

.rie-media__body.e-con { display: block; }

.rie-media__body :is(h2, h3, .elementor-heading-title) {
  margin: 0;
}

.rie-media__body > :not(:first-child) {
  margin-block-start: var(--rie-space-4);
}

.rie-media__body > :is(.rie-btn, .rie-actions, .elementor-widget-button) {
  margin-block-start: var(--rie-stack-md);
}

.rie-media__img,
.rie-media__img img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 618 / 463;
  border-radius: var(--rie-radius-card);
  object-fit: cover;
}

.rie-media__img:not(img) {
  overflow: hidden;
}

@media (min-width: 1025px) {
  .rie-media {
    grid-template-columns: repeat(12, minmax(0, 1fr));
  }
  .rie-media > .rie-media__body { grid-row: 1; grid-column: 1 / span 5; }
  .rie-media > .rie-media__img  { grid-row: 1; grid-column: 7 / span 6; }
  .rie-media.rie-media--reverse > .rie-media__body { grid-column: 8 / span 5; }
  .rie-media.rie-media--reverse > .rie-media__img  { grid-column: 1 / span 6; }
}


/* ---------------------------------------------------------------------------
   17. ACCORDION  .rie-accordion  (rotaryui-accordion)
   Max 860, white, 1px Silver dividers + a final bottom border. Trigger 16/24
   700, min-height 64, padding 16 (≤768) / 20 16, chevron on the right that
   turns 180° when open, hover #EAFAFF. Panel padding 0 16 20.
   Plain:
     <div class="rie-accordion">
       <details class="rie-accordion__item"><summary>Question</summary>
         <div class="rie-accordion__panel"><p>…</p></div></details> …
   Elementor: Nested Accordion widget with the class (any icons; the CSS
   hides them and draws the chevron). Title HTML tag: h3 recommended.
   --------------------------------------------------------------------------- */

.rie-accordion {
  display: block;
  width: 100%;
  max-width: var(--rie-measure);
  margin-inline: auto;
  background-color: var(--rie-color-white);
  color: var(--rie-color-text);
}

body .elementor-widget-n-accordion.rie-accordion {
  --n-accordion-border-width: 0px;
  --n-accordion-padding: 0px;
  --n-accordion-title-font-size: var(--rie-fs-body);
  --n-accordion-item-title-space-between: 0px;
  --n-accordion-item-title-distance-from-content: 0px;
  --n-accordion-title-normal-color: var(--rie-color-text);
  --n-accordion-title-hover-color: var(--rie-color-text);
  --n-accordion-title-active-color: var(--rie-color-text);
}

.rie-accordion > details,
body .rie-accordion .e-n-accordion > details {
  display: block;
  margin: 0;
  border: 0;
}

.rie-accordion > details + details,
body .rie-accordion .e-n-accordion > details + details {
  border-top: 1px solid var(--rie-color-line);
}

.rie-accordion > details:last-child,
body .rie-accordion .e-n-accordion > details:last-child {
  border-bottom: 1px solid var(--rie-color-line);
}

.rie-accordion > details > summary,
body .rie-accordion .e-n-accordion-item-title {
  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: 0;
  border-radius: 0;
  background-color: transparent;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
  list-style: none;
  cursor: pointer;
  transition: background-color var(--rie-dur-fast) var(--rie-ease);
}

.rie-accordion > details > summary::-webkit-details-marker,
body .rie-accordion .e-n-accordion-item-title::-webkit-details-marker {
  display: none;
}

.rie-accordion > details > summary:hover,
body .rie-accordion .e-n-accordion-item > .e-n-accordion-item-title:hover {
  background-color: var(--rie-color-hover-tint);
  color: var(--rie-color-text);
}

.rie-accordion > details > summary:focus-visible,
body .rie-accordion .e-n-accordion-item-title:focus-visible {
  z-index: 1;
}

.rie-accordion > details > summary::after,
body .rie-accordion .e-n-accordion-item-title::after {
  content: "";
  flex: none;
  width: 24px;
  height: 24px;
  background-color: currentColor;
  -webkit-mask: var(--rie-i-chevron-down) center / contain no-repeat;
  mask: var(--rie-i-chevron-down) center / contain no-repeat;
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}

.rie-accordion > details[open] > summary::after,
body .rie-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
  transform: rotate(180deg);
}

body .rie-accordion .e-n-accordion-item-title-header {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
}

body .rie-accordion .e-n-accordion-item-title-text {
  margin: 0;
  color: inherit;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  font-weight: var(--rie-fw-bold);
  line-height: var(--rie-lh-body);
}

body .rie-accordion .e-n-accordion-item-title-icon {
  display: none;
}

.rie-accordion .rie-accordion__panel,
body .rie-accordion .e-n-accordion-item > .e-con {
  margin: 0;
  padding: 0 var(--rie-space-4) var(--rie-space-5);
  border: 0;
}

.rie-accordion .rie-accordion__panel > :last-child {
  margin-bottom: 0;
}

@media (min-width: 769px) {
  .rie-accordion > details > summary,
  body .rie-accordion .e-n-accordion-item-title {
    gap: var(--rie-space-6);
    padding: var(--rie-space-5) var(--rie-space-4);
  }
}


/* ---------------------------------------------------------------------------
   18. JOURNEY STEPS  .rie-steps  (Our Clubs 5-step graphic, in HTML)
   ≥1025 five steps in a row: 56px #E9F2F9 circle with a 24px royal icon,
   H6 label, 14/21 text, and a 2px Silver line joining the circles.
   ≤1024 a vertical list with the line on the left.
   Plain:
     <ol class="rie-steps"><li class="rie-step">
       <span class="rie-step__icon"><span class="rie-icon rie-icon--mail" aria-hidden="true"></span></span>
       <div class="rie-step__body"><h3 class="rie-step__title">I'm interested</h3>
         <p class="rie-step__text">…</p></div></li> …</ol>
   Elementor: a Flexbox container (never Grid; P10) with `rie-steps`,
   holding five Icon Box widgets (no class needed on them); the CSS sets the
   5 / 1 columns.
   Steps in a row stretch to the tallest one; align-content: start keeps each
   step's icon and title rows at their own height, so titles stay level when
   one step's text wraps to more lines.
   --------------------------------------------------------------------------- */

.rie-steps {
  --rie-steps-gap: var(--rie-space-6);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-steps-gap);
  width: 100%;
  max-width: var(--rie-wide);
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.rie-steps.e-con-boxed { display: block; }
.rie-steps > .e-con-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--rie-steps-gap); }

.rie-steps > :is(.rie-step, .elementor-widget-icon-box),
.rie-steps > .e-con-inner > :is(.rie-step, .elementor-widget-icon-box) {
  position: relative;
  margin: 0;
  padding: 0;
}

/* step layout (mobile first: icon left, text right) */
.rie-step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  column-gap: var(--rie-space-4);
}

body .rie-steps .elementor-widget-icon-box .elementor-icon-box-wrapper {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-content: start;
  align-items: start;
  column-gap: var(--rie-space-4);
  text-align: start;
}

.rie-step__icon,
body .rie-steps .elementor-widget-icon-box .elementor-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--rie-color-tint);
  color: var(--rie-color-royal);
  fill: var(--rie-color-royal);
  font-size: 24px;
  line-height: 1;
}

body .rie-steps .elementor-widget-icon-box .elementor-icon-box-icon {
  display: block;
  margin: 0;
  line-height: 0;
}

body .rie-steps .elementor-widget-icon-box .elementor-icon svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.rie-step__body,
body .rie-steps .elementor-icon-box-content {
  padding-top: var(--rie-space-4);
}

.rie-step__title,
body .rie-steps .elementor-icon-box-title {
  margin: 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h6);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h6);
}

body .rie-steps .elementor-icon-box-title :is(a, span) {
  color: inherit;
  font-weight: inherit;
}

.rie-step__text,
body .rie-steps .elementor-icon-box-description {
  margin: var(--rie-space-1) 0 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

/* connector: vertical, from the bottom of one circle to the next */
.rie-steps > :is(.rie-step, .elementor-widget-icon-box):not(:last-child)::after,
.rie-steps > .e-con-inner > :is(.rie-step, .elementor-widget-icon-box):not(:last-child)::after {
  content: "";
  position: absolute;
  top: 56px;
  bottom: calc(-1 * var(--rie-steps-gap));
  left: 27px;
  width: 2px;
  background-color: var(--rie-color-line);
}

@media (min-width: 1025px) {
  .rie-steps,
  .rie-steps > .e-con-inner {
    --rie-steps-gap: var(--rie-gap);
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .rie-step,
  body .rie-steps .elementor-widget-icon-box .elementor-icon-box-wrapper {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    text-align: center;
  }

  .rie-steps > :is(.rie-step, .elementor-widget-icon-box):not(:last-child)::after,
  .rie-steps > .e-con-inner > :is(.rie-step, .elementor-widget-icon-box):not(:last-child)::after {
    top: 27px;
    bottom: auto;
    left: calc(50% + 28px);
    width: calc(100% + var(--rie-steps-gap) - 56px);
    height: 2px;
  }
}


/* ---------------------------------------------------------------------------
   19. PHOTO GALLERY  .rie-gallery  (rotaryui-photo-gallery)
   Slides ≈73vw at 16:9, radius 20 (16 mobile), inactive photos at 60%
   opacity (the photo only: a faded caption would drop to 2.3:1), the next
   slide peeks; caption 16/24 muted centred; 48px white arrow discs 24px
   apart, 32px below.
   Elementor: Image Carousel (Slides to show 1, arrows on, dots off, caption
   on) with the class. CSS narrows the swiper and lets it overflow so the
   neighbours peek; the section band clips at the viewport edge.
   Plain (no JS): a scroll-snap strip.
     <div class="rie-gallery"><div class="rie-gallery__track" tabindex="0" role="region" aria-label="Photo gallery">
       <figure class="rie-gallery__slide"><img …><figcaption>…</figcaption></figure> …</div></div>
   --------------------------------------------------------------------------- */

.rie-gallery {
  --rie-gallery-slide: 88%;
  --e-image-carousel-slides-to-show: 1;   /* before Swiper initialises */
  position: relative;
  width: 100%;
  margin: 0;
}

/* Elementor Image Carousel twin */
body .rie-gallery.elementor-widget-image-carousel {
  padding-bottom: calc(48px + var(--rie-space-8));
}

body .rie-gallery .swiper {
  position: static;
  width: var(--rie-gallery-slide);
  margin-inline: auto;
  overflow: visible;
}

body .rie-gallery .swiper-wrapper {
  display: flex;
  align-items: flex-start;
}

body .rie-gallery .swiper-slide {
  flex-shrink: 0;
  width: 100%;
  padding-inline: calc(var(--rie-gap) / 2);
}

body .rie-gallery .swiper-slide-inner {
  margin: 0;
  line-height: normal;
}

body .rie-gallery .swiper-slide-image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--rie-radius-card);
  object-fit: cover;
  transition: opacity var(--rie-dur-slow) var(--rie-ease);
}

body .rie-gallery .swiper-slide:not(.swiper-slide-active) .swiper-slide-image {
  opacity: 0.6;
}

body .rie-gallery .elementor-image-carousel-caption {
  display: -webkit-box;
  margin-top: var(--rie-space-4);
  overflow: hidden;
  color: var(--rie-color-muted);
  font-style: normal;                     /* Hello's figcaption is italic */
  font-weight: var(--rie-fw-regular);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  text-align: center;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

body .rie-gallery .swiper .elementor-swiper-button {
  position: absolute;
  top: auto;
  bottom: 0;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--rie-color-white);
  color: var(--rie-color-royal);
  box-shadow: var(--rie-shadow-card);
  font-size: 0;
  cursor: pointer;
  transform: none;
  transition: background-color var(--rie-dur-base) var(--rie-ease), color var(--rie-dur-base) var(--rie-ease);
}

body .rie-gallery .swiper .elementor-swiper-button > * {
  display: none;
}

body .rie-gallery .swiper .elementor-swiper-button::after {
  content: "";
  width: 16px;
  height: 16px;
  background-color: currentColor;
  -webkit-mask: var(--rie-i-arrow-right) center / contain no-repeat;
  mask: var(--rie-i-arrow-right) center / contain no-repeat;
}

body .rie-gallery .swiper .elementor-swiper-button-prev {
  right: auto;
  left: calc(50% - 60px);
}

body .rie-gallery .swiper .elementor-swiper-button-prev::after {
  -webkit-mask-image: var(--rie-i-arrow-left);
  mask-image: var(--rie-i-arrow-left);
}

body .rie-gallery .swiper .elementor-swiper-button-next {
  right: auto;
  left: calc(50% + 12px);
}

body .rie-gallery .swiper .elementor-swiper-button:hover {
  background-color: var(--rie-color-azure);
  color: var(--rie-color-white);
}

body .rie-gallery .swiper .elementor-swiper-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

body .rie-gallery .swiper .elementor-swiper-button:active {
  background-color: var(--rie-color-active);
  color: var(--rie-color-white);
}

/* Swiper keeps a disabled arrow focusable (tabindex 0, aria-disabled), so
   the flat, half-transparent disabled look applies only while it is not
   focused; focused, it keeps the muted glyph and gets the full ring. */
body .rie-gallery .swiper .elementor-swiper-button.swiper-button-disabled {
  color: var(--rie-color-muted);
  opacity: 1;                /* Elementor fades it to .3 (0,4,0) */
  cursor: not-allowed;
}

body .rie-gallery .swiper .elementor-swiper-button.swiper-button-disabled:not(:focus-visible) {
  box-shadow: none;
  opacity: 0.5;
}

/* Plain scroll-snap strip */
.rie-gallery__track {
  display: flex;
  gap: var(--rie-gap);
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  padding-inline: calc((100vw - 100vw * 0.88) / 2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: calc((100vw - 100vw * 0.88) / 2);
  scrollbar-width: none;
}

.rie-gallery__track::-webkit-scrollbar {
  display: none;
}

.rie-gallery__slide {
  flex: 0 0 88vw;
  margin: 0;
  scroll-snap-align: center;
}

.rie-gallery__slide img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--rie-radius-card);
  object-fit: cover;
}

.rie-gallery__slide figcaption {
  margin-top: var(--rie-space-4);
  color: var(--rie-color-muted);
  font-style: normal;
  font-weight: var(--rie-fw-regular);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  text-align: center;
}

@media (min-width: 769px) {
  .rie-gallery { --rie-gallery-slide: 73vw; }

  body .rie-gallery .swiper-slide-image,
  .rie-gallery__slide img {
    border-radius: var(--rie-radius-hero);
  }

  .rie-gallery__track {
    padding-inline: 13.5vw;
    scroll-padding-inline: 13.5vw;
  }

  .rie-gallery__slide { flex-basis: 73vw; }
}


/* ---------------------------------------------------------------------------
   20. EMBED  .rie-embed — 16:9, radius 16, max 860, clipped
   Plain: <div class="rie-embed"><iframe …></iframe></div>
   Elementor: Video widget (YouTube / Vimeo / self-hosted) with the class.
   --------------------------------------------------------------------------- */

.rie-embed {
  position: relative;
  display: block;
  width: 100%;
  max-width: var(--rie-measure);
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--rie-radius-card);
  background-color: var(--rie-color-ink);
}

.rie-embed:not(.elementor-widget) {
  aspect-ratio: 16 / 9;
}

.rie-embed:not(.elementor-widget) > :is(iframe, video, embed, object, img) {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  object-fit: cover;
}

body .rie-embed .elementor-wrapper {
  aspect-ratio: 16 / 9;
}

body .rie-embed .elementor-wrapper :is(iframe, video) {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}


/* ---------------------------------------------------------------------------
   21. PERSON  .rie-person (profile row) · .rie-person-card
   Row: 400×534 (3:4) portrait, no radius; H3 role, bio, outline pill; rows
   separated by <hr class="rie-divider">.
   Card: white, radius 16, shadow; 3:4 photo (top-anchored), H5 name,
   14/21 muted role, text link; in a .rie-grid--4: 2-up on phones (§8),
   2-up on tablets, 4-up at 1025+.
   Elementor: container `rie-person-card` > Image `rie-person-card__media` +
   container `rie-person-card__body` (Heading `rie-person-card__name`, Text
   Editor or Heading `rie-person-card__role`, Button `rie-btn--text`).
   --------------------------------------------------------------------------- */

.rie-person {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-space-6);
  width: 100%;
  max-width: var(--rie-measure);
  margin: 0 auto;
  padding: 0;
}

.rie-person__media,
.rie-person__media img {
  display: block;
  width: 100%;
  max-width: 400px;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 4;
  border-radius: 0;
  object-fit: cover;
  object-position: top;
}

.rie-person__body {
  margin: 0;
  padding: 0;
}

.rie-person__body.e-con { display: block; }

.rie-person__body :is(h2, h3, .elementor-heading-title) {
  margin: 0;
}

.rie-person__body > :not(:first-child) {
  margin-block-start: var(--rie-space-4);
}

.rie-person__body > :is(.rie-btn, .rie-actions, .elementor-widget-button) {
  margin-block-start: var(--rie-space-6);
}

@media (min-width: 769px) {
  .rie-person {
    grid-template-columns: minmax(0, 400px) minmax(0, 1fr);
    column-gap: var(--rie-space-8);
    align-items: start;
  }
}

.rie-person-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;                                 /* no Elementor container gap */
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: var(--rie-radius-card);
  background-color: var(--rie-color-white);
  color: var(--rie-color-text);
  box-shadow: var(--rie-shadow-card);
  font-weight: var(--rie-fw-regular);
  text-decoration: none;
  transition: box-shadow var(--rie-dur-slow) var(--rie-ease);
}

.rie-person-card__media,
.rie-person-card__media img {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  margin: 0;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
}

.rie-person-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  margin: 0;
  padding: var(--rie-space-4);
}

.rie-person-card__name,
body .rie-person-card__name .elementor-heading-title {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h5);
  font-weight: var(--rie-fw-semibold);
  line-height: var(--rie-lh-h5);
}

/* Twins: `body .elementor-widget-text-editor` (0,1,1) and the Heading
   defaults in 10-base would otherwise keep the role at 16px slate. */
.rie-person-card__role,
body .elementor-widget-text-editor.rie-person-card__role,
body .rie-person-card__role .elementor-heading-title {
  margin: var(--rie-space-1) 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);
}

body .rie-person-card__role .elementor-heading-title {
  margin: 0;                              /* the widget carries the 4px */
}

.rie-person-card__body > :last-child:is(.rie-btn, .rie-link-arrow, a, .elementor-widget-button) {
  margin-top: auto;
}

a.rie-person-card:hover {
  color: var(--rie-color-text);
  box-shadow: var(--rie-shadow-card-hover);
}

a.rie-person-card:hover .rie-person-card__name {
  text-decoration: underline;
}

@media (min-width: 769px) {
  .rie-person-card__body { padding: var(--rie-space-6); }
}


/* ---------------------------------------------------------------------------
   22. EMPTY STATE  .rie-empty — tint, radius 12, padding 24, 16/24,
   one text link + optional pill (no events, no results).
   On a tint band the panel turns white, or it would vanish (tint on tint).
   Right below a centred section head (T-NEWS "Upcoming events") its text
   centres too, so it does not sit ragged-left between a centred H2 and pill.
   --------------------------------------------------------------------------- */

.rie-empty {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--rie-space-6);
  border-radius: var(--rie-radius-panel);
  background-color: var(--rie-color-tint);
  color: var(--rie-color-text);
}

.rie-section--tint .rie-empty {
  background-color: var(--rie-color-white);
}

/* Directly after the centred head, or inside the block that follows it
   (a measure container, a Shortcode widget). */
.rie-section-head--center + .rie-empty,
.rie-section-head--center + * .rie-empty {
  text-align: center;
}

.rie-empty :is(h2, h3, h4, h5, h6, p) {
  margin-block-end: 0;
}

.rie-empty :is(h2, h3, h4, h5, h6) {
  font-size: var(--rie-fs-h5);
  line-height: var(--rie-lh-h5);
}

.rie-empty > :not(:first-child) {
  margin-block-start: var(--rie-space-2);
}

.rie-empty > :is(.rie-btn, .rie-actions) {
  margin-block-start: var(--rie-space-4);
}


/* ---------------------------------------------------------------------------
   23. Reduced motion — component transforms off (§2.10)
   --------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .rie-accordion > details[open] > summary::after,
  body .rie-accordion .e-n-accordion-item[open] > .e-n-accordion-item-title::after {
    transition: none;
  }
  .rie-gallery__track { scroll-behavior: auto; }
}

/* A section head that follows a media block in the same band (e.g. Generation Chef's child pages). */
.rie-media + .rie-section-head {
  margin-block-start: var(--rie-stack-lg);
}


/* ===== 50-cards.css ===== */
/* =============================================================================
   rie.css · 50 CARDS  (owner: css-content)
   The rotary.org card family (DESIGN-BRIEF §1 move 7, §4.4):
     .rie-card            standard: image 220 → body (badge, title, text, meta, CTA)
     .rie-card--h         horizontal: image right 207 px (≥769), stacked below
     .rie-card--text      no image, no box, hairline between items (lists, search)
     .rie-card--info      optional coloured header bar (+ __head--navy); not a link
     .rie-card--file      download tile with a 48 px PDF disc
     .rie-card--event     date block 72×72 + title + time/venue
     .rie-card--club      compact club card (jurisdiction badge, town, meeting)
     .rie-card-list       vertical stack of cards (text rows, event rows)

   Two DOMs, one look.
   1. Plain markup (prototypes, PHP, shortcodes):
        <a class="rie-card" href="…">
          <span class="rie-card__media"><img …></span>
          <span class="rie-card__body">
            <span class="rie-badge">Club News</span>
            <h3 class="rie-card__title">…</h3>
            <p class="rie-card__text">…</p>
            <p class="rie-card__meta"><time>…</time></p>
            <span class="rie-card__cta">Read the story</span>
          </span>
        </a>
   2. Elementor 4.3 (free): Container, HTML Tag = a + Link, class `rie-card`
        > Image widget (Link: None) class `rie-card__media`
        > Container class `rie-card__body`
            > Heading (span) `rie-badge` > Heading (h3, Global Font "Heading 5") `rie-card__title`
            > Text Editor `rie-card__text` > Heading (span) `rie-card__cta`
      Classes sit on the widget wrappers, so every rule reaches the inner
      .elementor-heading-title / <p> / <img> through descendant selectors.
      Never put a Button widget inside a card container whose tag is <a>.

   Hover (link cards only): deeper shadow, title underline, image zoom 1.15 over 300 ms.
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Card shell
   --------------------------------------------------------------------------- */
.rie-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  isolation: isolate;                    /* keeps the zoomed image inside the radius in Safari */
  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);
  font-weight: var(--rie-fw-regular);
  text-align: left;
  border-radius: var(--rie-radius-card);
  box-shadow: var(--rie-shadow-card);
  transition: box-shadow var(--rie-dur-base) var(--rie-ease);
}

/* Link cards: beat Elementor's `.elementor a{box-shadow:none;text-decoration:none}` (0,1,1)
   and Hello's `.page-content a{text-decoration:underline}` / reset link colours. */
a.rie-card {
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-regular);    /* base `a` is bold; card text is not */
  text-decoration: none;
  box-shadow: var(--rie-shadow-card);
  cursor: pointer;
}

a.rie-card:hover,
.rie-card:has(.rie-card__link:hover) {
  color: var(--rie-color-text);
  box-shadow: var(--rie-shadow-card-hover);
}

/* Focus: the ring is a box-shadow, which forced-colours mode removes, so a transparent
   outline stays underneath (forced colours paint it in the system colour). For the
   stretched-link <article> cards both go on the card through :has(). */
a.rie-card:focus-visible,
.rie-card:has(.rie-card__link:focus-visible) {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus), var(--rie-shadow-card-hover);
}

/* Stretched-link pattern for <article class="rie-card"> output: the title link covers the card. */
.rie-card__link,
.rie-card__link:hover {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.rie-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.rie-card__link:focus-visible {
  outline: none;                         /* ring + transparent outline are on the card (§1) */
  box-shadow: none;
}

/* Elementor: a Boxed card container gets an .e-con-inner wrapper; let its children
   join the card's own flex column. Choose Content Width = Full Width to avoid it. */
.rie-card > .e-con-inner,
.rie-card__body > .e-con-inner {
  display: contents;
}

/* ---------------------------------------------------------------------------
   2. Media (standard: 220 px tall, cover)
   --------------------------------------------------------------------------- */
.rie-card__media {
  position: relative;
  display: block;
  flex: none;
  width: 100%;
  height: 220px;
  margin: 0;
  overflow: hidden;
  background: var(--rie-color-tint);
}

.rie-card .rie-card__media img,
.rie-card .rie-card__media video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  margin: 0;
  border-radius: 0;
  box-shadow: none;
  object-fit: cover;
  transform: scale(1);
  transition: transform var(--rie-dur-slow) var(--rie-ease);
  will-change: transform;
}

/* Elementor Image widget: optional inner wrapper(s) must not collapse. */
.rie-card__media .elementor-widget-container,
.rie-card__media > a,
.rie-card__media > figure {
  position: static;
  display: block;
  height: 100%;
  margin: 0;
}

a.rie-card:hover .rie-card__media img,
.rie-card:has(.rie-card__link:hover) .rie-card__media img {
  transform: scale(1.15);
}

/* ---------------------------------------------------------------------------
   3. Body and its parts
   --------------------------------------------------------------------------- */
.rie-card__body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  min-width: 0;
  width: 100%;
  padding: var(--rie-space-4);
}

/* A closing CTA, date or button sits at the bottom so rows of cards line up. Only those:
   a body that ends with its text or title keeps it under the title (in a stretched grid
   row a pinned text would start lower in the shorter cards). */
.rie-card__body > :is(.rie-card__cta, .rie-card__meta, .rie-btn, .rie-actions, .elementor-widget-button):last-child,
.rie-card__body > .e-con-inner > :is(.rie-card__cta, .rie-card__meta, .rie-btn, .rie-actions, .elementor-widget-button):last-child {
  margin-top: auto;
}
/* `auto` is 0 in the tallest card of a row, so what sits above a pinned date or pill
   keeps the usual gap itself: the text keeps 8 px above a date; anything keeps 16 px
   above a pill (rotary.org's info card leaves 16 px under its text). The CTA span
   carries its own 16 px padding. */
.rie-card__body > .rie-card__text:has(+ .rie-card__meta:last-child),
.rie-card__body > .e-con-inner > .rie-card__text:has(+ .rie-card__meta:last-child) {
  margin-bottom: var(--rie-space-2);
}
.rie-card__body > :has(+ :is(.rie-btn, .rie-actions, .elementor-widget-button):last-child),
.rie-card__body > .e-con-inner > :has(+ :is(.rie-btn, .rie-actions, .elementor-widget-button):last-child) {
  margin-bottom: var(--rie-space-4);
}

/* A form placed straight in a card body fills it (the body aligns items to the start). */
.rie-card__body > .rie-form,
.rie-card__body > .e-con-inner > .rie-form {
  align-self: stretch;
  width: 100%;
}

/* Badges keep their pill width inside the column (Elementor widgets default to 100%). */
.rie-card__body > .rie-badge,
.rie-card__body > .e-con-inner > .rie-badge {
  flex: none;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
}

.rie-card__title {
  width: 100%;
  margin: var(--rie-space-2) 0;
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  line-height: var(--rie-lh-h5);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  text-decoration: none;
  text-underline-offset: 2px;
}
.rie-card__body > .rie-card__title:first-child { margin-top: 0; }

/* Elementor Heading widget: style the inner title element (0,3,0 beats widget defaults). */
body .rie-card .rie-card__title .elementor-heading-title {
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  text-decoration: inherit;
  text-underline-offset: inherit;
}
body .rie-card .rie-card__title .elementor-heading-title a {
  color: inherit;
  text-decoration: inherit;
}

/* 2-line clamp: on the plain title, or on the inner Elementor heading. */
.rie-card__title:not(.elementor-widget),
body .rie-card .rie-card__title .elementor-heading-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}

a.rie-card:hover .rie-card__title,
.rie-card:has(.rie-card__link:hover) .rie-card__title {
  text-decoration: underline;
}

.rie-card__text {
  width: 100%;
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
  overflow: hidden;
}
.rie-card__text p,
.rie-card .rie-card__text .elementor-widget-container > * {
  margin: 0;
}

.rie-card__meta {
  width: 100%;
  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 .rie-card .rie-card__meta .elementor-heading-title {
  color: inherit;
  font: inherit;
}
/* The date on a Text Editor widget: beats Hello/10-base `body .elementor-widget-text-editor`
   (0,1,1), which would set it at 16 px in the body colour. */
body .elementor-widget-text-editor.rie-card__meta {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
body .elementor-widget-text-editor.rie-card__meta p { margin: 0; }

/* CTA: a span styled like .rie-btn--text (a card is one link, so never a nested <a>). */
.rie-card__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--rie-space-2);
  padding: var(--rie-space-4) 0 0;
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
  transition: color var(--rie-dur-fast) var(--rie-ease);
}
body .rie-card .rie-card__cta .elementor-heading-title {
  color: inherit;
  font: inherit;
}
.rie-card__cta .rie-icon {
  --rie-icon-size: 20px;
  flex: none;
}
a.rie-card:hover .rie-card__cta,
.rie-card:has(.rie-card__link:hover) .rie-card__cta {
  color: var(--rie-color-azure);
}
a.rie-card:active .rie-card__cta {
  color: var(--rie-color-active);
}

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

/* ---------------------------------------------------------------------------
   4. Horizontal card (.rie-card--h): image right 207 px (≥769), stacked below
   --------------------------------------------------------------------------- */
@media (min-width: 769px) {
  .rie-card--h {
    flex-direction: row-reverse;
    align-items: stretch;
    min-height: 202px;
  }
  .rie-card--h .rie-card__media {
    width: 207px;
    height: auto;
    min-height: 100%;
    align-self: stretch;
  }
  .rie-card--h .rie-card__body {
    flex: 1 1 0;
    width: auto;
  }
}
@media (min-width: 1025px) {
  .rie-card--h { min-height: 226px; }
}

/* A post with no featured image drops the image column (rotary.org does the same). */
.rie-card--h .rie-card__media:empty { display: none; }

/* Horizontal cards flow 1 per row up to 1024, 2 per row from 1025 (brief §2.6),
   whatever grid modifier the shortcode prints (.rie-grid--h is the intended one).
   Uses the grid's own column variable from 40-sections. */
@media (min-width: 769px) {
  .rie-grid:has(> .rie-card--h),
  .rie-grid:has(> .e-con-inner > .rie-card--h) { --rie-grid-cols: 1; }
}
@media (min-width: 1025px) {
  .rie-grid:has(> .rie-card--h),
  .rie-grid:has(> .e-con-inner > .rie-card--h) { --rie-grid-cols: 2; }
}

/* ---------------------------------------------------------------------------
   5. Text card (.rie-card--text): no image, no box, 1 px rule between items
   --------------------------------------------------------------------------- */
.rie-card--text,
a.rie-card--text {
  overflow: visible;
  padding: 0 0 var(--rie-space-5);
  background: transparent;
  border-radius: 0;
  border-bottom: 1px solid var(--rie-color-line);
  box-shadow: none;
}
a.rie-card--text:hover {
  box-shadow: none;
}
a.rie-card--text:focus-visible {
  box-shadow: var(--rie-shadow-focus);
  border-radius: var(--rie-radius-sm);
}
.rie-card--text .rie-card__body {
  padding: 0;
}
.rie-card--text .rie-card__media { display: none; }

/* A text card has no white box, so on a tint band its #717171 date would be 4.31:1. */
.rie-section--tint .rie-card--text .rie-card__meta {
  color: var(--rie-color-text);
}

/* Loose siblings get the spacing; lists and grids use their gap instead. */
.rie-card--text + .rie-card--text { margin-top: var(--rie-space-5); }
:is(.rie-grid, .rie-card-list, .rie-search-results) > .rie-card--text + .rie-card--text { margin-top: 0; }

/* ---------------------------------------------------------------------------
   6. Info card (.rie-card--info): coloured header bar, never a link as a whole
   --------------------------------------------------------------------------- */
.rie-card__head {
  flex: none;
  width: 100%;
  margin: 0;
  padding: var(--rie-space-4) var(--rie-space-6);
  background: var(--rie-color-azure);
  color: var(--rie-color-white);
  border-radius: var(--rie-radius-card) var(--rie-radius-card) 0 0;
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
  font-weight: var(--rie-fw-semibold);
}
.rie-card__head--navy { background: var(--rie-color-navy); }

.rie-card__head :is(h2, h3, h4, h5, p),
body .rie-card .rie-card__head .elementor-heading-title {
  margin: 0;
  color: var(--rie-color-white);
  font: inherit;
}

.rie-card--info .rie-card__title {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  margin: 0 0 var(--rie-space-2);
}
body .rie-card--info .rie-card__title .elementor-heading-title {
  display: block;
  -webkit-line-clamp: unset;
}
.rie-card--info .rie-card__text {
  -webkit-line-clamp: 5;
  line-clamp: 5;
  margin-bottom: var(--rie-space-4);
}
/* The white pill (or any button) sits at the foot of the body through the §3 pin rule,
   at least 16 px under the element above it; text that ends the body stays at the top. */
.rie-card--info .rie-card__body > .rie-card__text:last-child {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   7. File card (.rie-card--file): title + "Download .pdf" left, PDF disc right
   --------------------------------------------------------------------------- */
.rie-card--file .rie-card__body {
  flex-direction: row;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--rie-space-4);
}
.rie-card--file .rie-card__main {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  min-width: 0;
}
.rie-card--file .rie-card__title {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: none;
  margin: 0 0 var(--rie-space-4);
}
body .rie-card--file .rie-card__title .elementor-heading-title {
  display: block;
  -webkit-line-clamp: unset;
}
/* An optional description or placeholder line: title → 8 → line → 16 → "Download .pdf". */
.rie-card--file .rie-card__title:has(+ :is(.rie-card__text, .rie-card__meta)) {
  margin-bottom: var(--rie-space-2);
}
.rie-card--file .rie-card__main > :is(.rie-card__text, .rie-card__meta) {
  margin: 0 0 var(--rie-space-4);
}
/* The download link sits at the foot, so the links of a row line up
   (the Elementor twin's link is a Button widget). */
.rie-card--file .rie-card__cta {
  margin-top: auto;
  padding-top: 0;
}
.rie-card--file .rie-card__main > .elementor-widget-button:last-child { margin-top: auto; }
.rie-card--file .rie-card__body > :last-child { margin-top: 0; }

.rie-card__icon {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin: 0;
  color: var(--rie-color-white);
  background: var(--rie-color-pdf);
  border-radius: var(--rie-radius-pill);
}
.rie-card__icon .rie-icon {
  --rie-icon-size: 24px;
  color: var(--rie-color-white);
}
/* Elementor Icon widget (View: Stacked, Shape: Circle) with class rie-card__icon */
.rie-card__icon.elementor-widget {
  display: block;
  width: auto;
  height: auto;
  background: none;
}
.rie-card .rie-card__icon .elementor-icon {
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 12px;
  font-size: 24px;
  color: var(--rie-color-white);
  fill: var(--rie-color-white);
  background: var(--rie-color-pdf);
  border-radius: var(--rie-radius-pill);
}
.rie-card .rie-card__icon .elementor-icon :is(svg, i) {
  width: 24px;
  height: 24px;
  font-size: 24px;
}

/* Elementor twin of the file card: the CTA is a Button widget (`rie-btn--text`),
   so the container is a <div>; give its inner link the card's focus ring. */
.rie-card--file .elementor-button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

/* ---------------------------------------------------------------------------
   8. Event card (.rie-card--event): date block + title + time/venue
   --------------------------------------------------------------------------- */
.rie-card--event {
  flex-direction: row;
  align-items: flex-start;
  gap: var(--rie-space-4);
  padding: var(--rie-space-4);
}
.rie-card--event .rie-card__body {
  padding: 0;
  align-self: center;
}
.rie-card--event .rie-card__title {
  margin: 0 0 var(--rie-space-1);
}
.rie-card--event .rie-card__meta {
  margin: 0;
}
.rie-card--event .rie-card__meta + .rie-card__meta {
  margin-top: 0;
}
.rie-card--event .rie-card__body > :last-child { margin-top: 0; }
/* Optional excerpt (T-EVENTS row 5) under the time and venue lines. */
.rie-card--event .rie-card__body > .rie-card__text { margin-top: var(--rie-space-3); }

.rie-card__date {
  display: flex;
  flex: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0;
  background: var(--rie-color-tint);
  border-radius: var(--rie-radius-panel);
  text-align: center;
}
.rie-card__day {
  display: block;
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-h4);            /* 20/30 → 24/36 at ≥1025 */
  line-height: var(--rie-lh-h4);
  font-weight: var(--rie-fw-semibold);
}
.rie-card__month {
  display: block;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
@media (min-width: 769px) {
  .rie-card--event { gap: var(--rie-space-6); padding: var(--rie-space-6); }
}

/* ---------------------------------------------------------------------------
   9. Club card (.rie-card--club): compact, no image
   ≤768: a 90 px row, so the 66 clubs of /clubs/ stay one scroll on a phone
         (the full card is 183 px, 66 × 183 = 13,400 px). Club name 16/24 600, town
         and meeting 14/21 on their own lines, the jurisdiction badge kept for screen
         readers only (the county already says it), "Visit club" reduced to its
         20 px arrow at the right. The whole card stays the link.
   ≥769: the brief's card (§4.4): badge → H5 name → town → meeting → "Visit club →".
   --------------------------------------------------------------------------- */
.rie-card--club .rie-card__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-content: center;
  align-items: center;
  column-gap: var(--rie-space-3);
  padding: var(--rie-space-3) var(--rie-space-4);
}
.rie-card--club .rie-card__body > * { grid-column: 1; }
.rie-card--club .rie-card__body > .rie-badge {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.rie-card--club .rie-card__title {
  margin: 0;
  font-size: var(--rie-fs-h6);
  line-height: var(--rie-lh-h6);
}
.rie-card--club .rie-card__meta {
  margin: 0;
}
.rie-card--club .rie-card__body > .rie-card__cta {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  gap: 0;
  margin: 0;
  padding: 0;
  font-size: 0;                          /* the words stay in the link's accessible name */
}
.rie-card--club .rie-card__cta .rie-icon {
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}
a.rie-card--club:hover .rie-card__cta .rie-icon {
  transform: translateX(4px);
}
/* Rows sit 12 px apart instead of the grid's 20. */
.rie-grid:has(> .rie-card--club),
.rie-grid:has(> .e-con-inner > .rie-card--club) > .e-con-inner { gap: var(--rie-space-3); }

@media (min-width: 769px) {
  .rie-card--club .rie-card__body {
    display: flex;
    align-items: flex-start;
    gap: 0;
    padding: var(--rie-space-6);
  }
  .rie-card--club .rie-card__body > .rie-badge {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip-path: none;
    white-space: normal;
  }
  .rie-card--club .rie-card__title {
    margin: var(--rie-space-2) 0 var(--rie-space-1);
    font-size: var(--rie-fs-h5);
    line-height: var(--rie-lh-h5);
  }
  .rie-card--club .rie-card__body > .rie-card__cta {
    align-self: flex-start;
    gap: var(--rie-space-2);
    margin-top: auto;
    padding-top: var(--rie-space-3);
    font-size: var(--rie-fs-body);
  }
  .rie-grid:has(> .rie-card--club),
  .rie-grid:has(> .e-con-inner > .rie-card--club) > .e-con-inner { gap: var(--rie-gap); }
}

/* ---------------------------------------------------------------------------
   10. Card list: a vertical stack (text rows, event rows, club news column)
   --------------------------------------------------------------------------- */
.rie-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rie-card-list > li { margin: 0; }
.rie-card-list > li > .rie-card { height: 100%; }

/* [rie_events] wrapper: <div class="rie-events"> [.rie-section-head > h3.rie-events__title]
   + .rie-card-list | .rie-grid. It follows a pill on Home (Recipe H 2.3 → 2.4), in a band
   whose Elementor row gap is 0, so the block brings its own gap above (24 / 32 / 64). */
.rie-events {
  display: flow-root;
  margin-block: var(--rie-stack-lg) 0;
}
.rie-events:first-child {
  margin-block-start: 0;
}
/* Elementor: the Shortcode widget wraps the block, so .rie-events is always its first
   child there; the gap goes on when the widget itself follows something. */
.elementor-widget-shortcode:not(:first-child) .elementor-shortcode > .rie-events:first-child {
  margin-block-start: var(--rie-stack-lg);
}

/* ---------------------------------------------------------------------------
   11. Motion
   --------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rie-card,
  .rie-card .rie-card__media img,
  .rie-card__cta,
  .rie-card--club .rie-card__cta .rie-icon {
    transition: none;
  }
  a.rie-card:hover .rie-card__media img,
  .rie-card:has(.rie-card__link:hover) .rie-card__media img,
  a.rie-card--club:hover .rie-card__cta .rie-icon {
    transform: none;
  }
}


/* ===== 60-editorial.css ===== */
/* =============================================================================
   rie.css · 60 EDITORIAL  (owner: css-content)
   DESIGN-BRIEF §1 move 11, §4.5, §6.8, §6.9, §5.10 (search):
     .rie-prose            reading column (860) + rich-text rules
                           (auto-applied, typography only, to .elementor-widget-text-editor,
                            .rie-article__body, TEC event descriptions and Hello post content)
     .rie-prose--article   post rhythm: H2/H3 render at the H4 size (rotary.org article subheads)
     .rie-figure (+ --right, --wide)   image → caption → 1 px rule (Gutenberg figures too)
     .rie-article-head     badge → H1 → standfirst → byline (.rie-byline) → featured image
     .rie-archive          archive / search page: head, tools row, "Showing 1–12 of 22" count
     .rie-search-results   text-card list for search.php

   Specificity: every rule that styles elements INSIDE prose uses :where() on the
   container, so it is (0,0,1). Components placed in prose (.rie-btn, .rie-highlight,
   .rie-quote, .rie-card, …) always win. Prose links style only class-less <a>, so
   buttons are never hijacked (the bug that `.page-content a` causes today).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. The reading column
   --------------------------------------------------------------------------- */
.rie-prose,
.rie-article__body {
  display: flow-root;                    /* contains floated figures */
  width: 100%;
  max-width: var(--rie-measure);
  margin-inline: auto;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  overflow-wrap: break-word;
}

/* Elementor Text Editor that carries .rie-prose: the widget itself is the column. Elementor's
   `.e-con.e-con > .e-con-inner > .elementor-widget { max-width: 100% }` (0,4,0) would otherwise
   widen it to the full 1296 box, so the cap is restated at the same weight (this sheet loads later). */
.rie-prose.elementor-widget,
.e-con > .e-con-inner > .rie-prose.elementor-widget,
.e-con.e-con > .rie-prose.elementor-widget {
  align-self: center;
  max-width: var(--rie-measure);
}

/* A button row or form that follows prose in the same band keeps to the prose column. */
.e-con > .e-con-inner > .rie-prose.elementor-widget ~ .rie-actions,
.e-con > .e-con-inner > .rie-prose.elementor-widget ~ .rie-callout {
  align-self: center;
  width: 100%;
  max-width: var(--rie-measure);
}

/* ---------------------------------------------------------------------------
   2. Text
   --------------------------------------------------------------------------- */
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) p {
  margin: 0 0 var(--rie-space-5);
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) p:where(:last-child) {
  margin-bottom: 0;
}

:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :where(strong, b) {
  font-weight: var(--rie-fw-bold);
}

/* Links: bold royal WITH a 1 px underline at rest; hover azure + a 2 px underline;
   active #20BBE6. Class-less links only.
   Deviation from brief §1 move 11 ("bold, no underline"): bold alone is not a reliable
   non-colour cue here, because running text also carries <strong> at 700. Royal against
   slate is only 1.22:1, and on navy both are white 700, so a link beside bold text could
   be told apart by hue alone, or not at all (WCAG 1.4.1, failure F73). */
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) a:where(:not([class])) {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  border-bottom: 0;
  transition: color var(--rie-dur-fast) var(--rie-ease), text-decoration-color var(--rie-dur-fast) var(--rie-ease);
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) a:where(:not([class]):hover, :not([class]):focus-visible) {
  color: var(--rie-color-azure);
  text-decoration-thickness: 2px;
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) a:where(:not([class]):active) {
  color: var(--rie-color-active);
}

/* On dark surfaces prose links are white (hover keeps white, adds the rule). */
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight, .rie-hero-home, .rie-feature)
  :where(.rie-prose, .rie-article__body, .elementor-widget-text-editor) a:where(:not([class])),
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight, .rie-hero-home, .rie-feature)
  :where(.rie-prose, .rie-article__body, .elementor-widget-text-editor) a:where(:not([class]):hover, :not([class]):focus-visible, :not([class]):active) {
  color: var(--rie-color-white);
}
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight, .rie-hero-home, .rie-feature).rie-prose,
:where(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout, .rie-highlight, .rie-hero-home, .rie-feature) .rie-prose {
  color: inherit;
}

/* ---------------------------------------------------------------------------
   3. Headings: 600, sentence case, 24 px above / 16 px below
   --------------------------------------------------------------------------- */
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(h1, h2, h3, h4, h5, h6) {
  margin: var(--rie-space-6) 0 var(--rie-space-4);
  color: inherit;
  font-family: var(--rie-font);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(h1, h2, h3, h4, h5, h6):where(:first-child) {
  margin-top: 0;
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) h2 { font-size: var(--rie-fs-h2); line-height: var(--rie-lh-h2); }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) h3 { font-size: var(--rie-fs-h3); line-height: var(--rie-lh-h3); }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) h4 { font-size: var(--rie-fs-h4); line-height: var(--rie-lh-h4); }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) h5 { font-size: var(--rie-fs-h5); line-height: var(--rie-lh-h5); }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) h6 { font-size: var(--rie-fs-h6); line-height: var(--rie-lh-h6); }

/* Posts: Gutenberg subheads (H2, or H3 when an editor starts there) render at the
   H4 size, 24/36 → 20/30, as rotary.org article subheads do; H4 drops to H5. */
:where(.rie-article__body, .rie-prose--article, .tribe-events-content, .single-post .page-content) :is(h2, h3) {
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
}
:where(.rie-article__body, .rie-prose--article, .tribe-events-content, .single-post .page-content) h4 {
  font-size: var(--rie-fs-h5);
  line-height: var(--rie-lh-h5);
}

/* ---------------------------------------------------------------------------
   4. Lists, rules, tables, media
   --------------------------------------------------------------------------- */
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(ul, ol) {
  margin: var(--rie-space-4) 0;
  padding-inline-start: 40px;
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) ul { list-style: disc; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) ol { list-style: decimal; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(ol ol) { list-style: lower-latin; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(ul ul) { list-style: circle; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) li { margin: 0; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(li > ul, li > ol) { margin: 0; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(ul, ol):where(:last-child) { margin-bottom: 0; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(ul, ol):where(:first-child) { margin-top: 0; }

/* hr = .rie-divider; Gutenberg's separator block included (it sets its own 2 px border). */
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) hr,
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) hr.wp-block-separator {
  clear: both;
  width: 100%;
  max-width: none;
  height: 1px;
  margin: var(--rie-space-6) 0;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: var(--rie-color-line);
  opacity: 1;
}

:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) .wp-block-table {
  margin: var(--rie-space-6) 0;
  overflow-x: auto;
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) table {
  width: 100%;
  margin: var(--rie-space-6) 0;
  border-collapse: collapse;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) .wp-block-table table { margin: 0; }
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) :is(th, td),
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) .wp-block-table :is(th, td) {
  padding: var(--rie-space-2);
  border: 1px solid var(--rie-color-line);
  text-align: left;
  vertical-align: top;
}
:where(.rie-prose, .rie-article__body, .elementor-widget-text-editor, .tribe-events-content, .single-post .page-content) th {
  font-weight: var(--rie-fw-semibold);
}

:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :where(iframe, video) {
  max-width: 100%;
  border: 0;
  border-radius: var(--rie-radius-card);
}

/* Blockquote in posts takes the .rie-quote look (the component itself is in 40-sections). */
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) blockquote {
  clear: both;
  margin: var(--rie-stack-md) 0;
  padding: var(--rie-space-6);
  background: var(--rie-color-tint);
  border: 0;
  border-left: 4px solid var(--rie-color-royal);
  border-radius: 0 var(--rie-radius-card) var(--rie-radius-card) 0;
  color: var(--rie-color-text);
  font-style: normal;
}
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) blockquote p {
  margin: 0 0 var(--rie-space-3);
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
  font-weight: var(--rie-fw-semibold);
  font-style: normal;
}
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) blockquote :where(p:last-child) { margin-bottom: 0; }
/* The citation sits on the quote's tint, where #717171 is 4.31:1: body colour instead (9.94:1). */
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) blockquote :where(cite, footer, .wp-block-quote__citation) {
  display: block;
  margin-top: var(--rie-space-3);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-regular);
  font-style: normal;
}
/* A <cite> alone in the last paragraph (classic editor pattern) keeps the small style. */
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) blockquote p:has(> cite:only-child) {
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-regular);
}
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) blockquote p > cite:only-child { margin-top: 0; }

/* ---------------------------------------------------------------------------
   5. Figure: image (radius 16) → caption 16/24 #717171 → 1 px rule
   Gutenberg's block-library CSS styles .wp-block-image at (0,1,0)–(0,2,0), so the
   figure selectors below carry real classes: (0,1,1) for figures, (0,2,1) for aligned.
   --------------------------------------------------------------------------- */
.rie-figure,
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure, figure.wp-caption, div.wp-caption) {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-4);
  width: auto;
  max-width: 100%;
  margin: var(--rie-space-6) 0 var(--rie-space-5);
  padding: 0;
}
.rie-figure > img,
.rie-figure > a > img,
.rie-figure > picture > img,
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure, figure.wp-caption, div.wp-caption) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: var(--rie-radius-card);
  box-shadow: none;
  vertical-align: bottom;
}
.rie-figure > img,
.rie-figure > a > img,
.rie-figure > picture > img,
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.size-large, figure.size-full, .size-large > figure, .size-full > figure) img {
  width: 100%;
}

.rie-figure figcaption,
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure, figure.wp-caption, div.wp-caption) :is(figcaption, .wp-element-caption, .wp-caption-text) {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-style: normal;
  text-align: left;
}
.rie-figure figcaption p { margin: 0 0 var(--rie-space-5); }
.rie-figure figcaption p:last-child { margin: 0; }

/* On a tint band #717171 is 4.31:1, so a caption placed there takes the body colour. */
.rie-section--tint :is(.rie-figure, figure) :is(figcaption, .wp-element-caption, .wp-caption-text) {
  color: var(--rie-color-text);
}

/* The rule under the caption (rotary.org PullImage ends with a divider). */
.rie-figure:has(figcaption)::after,
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure, figure.wp-caption):has(figcaption)::after {
  content: "";
  display: block;
  height: 1px;
  border-radius: 1px;
  background: var(--rie-color-line);
}

/* Right / left figures (Gutenberg Align right / left): 50 % float from 769 px. */
.rie-figure--right,
.rie-figure--left,
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure, figure.wp-caption, div.wp-caption):is(.alignright, .alignleft) {
  display: flex;
  width: 100%;
  max-width: 100%;
  float: none;
  margin: var(--rie-space-5) 0;
}
@media (min-width: 769px) {
  .rie-figure--right,
  :where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure, figure.wp-caption, div.wp-caption).alignright {
    float: right;
    width: 50%;
    margin: 0 0 var(--rie-space-5) var(--rie-space-5);
  }
  .rie-figure--left,
  :where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure, figure.wp-caption, div.wp-caption).alignleft {
    float: left;
    width: 50%;
    margin: 0 var(--rie-space-5) var(--rie-space-5) 0;
  }
}
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :is(figure.wp-block-image, .wp-block-image > figure).aligncenter {
  margin-inline: auto;
}
/* Full-width blocks never wrap beside a float. */
:where(.rie-prose, .rie-article__body, .tribe-events-content, .single-post .page-content) :where(figure:not(.alignright):not(.alignleft), .wp-block-image:not(.alignright):not(.alignleft), .rie-highlight, .rie-callout, .rie-quote, .rie-embed, .wp-block-table, .wp-block-embed) {
  clear: both;
}

/* Wide figure (article featured image, 10-col media): up to 1080, breaking out of 860. */
.rie-figure--wide {
  width: 100%;
  max-width: var(--rie-wide);
  margin-inline: auto;
}
.rie-figure--wide > img,
.rie-figure--wide > picture > img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}
@media (min-width: 1025px) {
  :where(.rie-prose, .rie-article__body) > .rie-figure--wide,
  :where(.rie-prose, .rie-article__body, .single-post .page-content) > :where(.alignwide) {
    width: min(var(--rie-wide), 100vw - 2 * var(--rie-gutter));
    max-width: none;
    margin-inline: calc((100% - min(var(--rie-wide), 100vw - 2 * var(--rie-gutter))) / 2);
  }
}

/* ---------------------------------------------------------------------------
   6. Article head (T-POST): 860 column, 24 / 32 / 64 px below the header
   --------------------------------------------------------------------------- */
.rie-article-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: var(--rie-measure);
  margin: 0 auto;
  padding-top: var(--rie-stack-lg);
  color: var(--rie-color-text);
}
.rie-article-head > .rie-badge {
  margin: 0 0 var(--rie-space-4);
}
.rie-article-head__title {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h1);
  line-height: var(--rie-lh-h1);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
  overflow-wrap: break-word;
}
.rie-article-head__standfirst {
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h3);
  line-height: var(--rie-lh-h3);
  font-weight: var(--rie-fw-semibold);
}

.rie-byline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--rie-space-1) var(--rie-space-4);
  width: 100%;
  margin: var(--rie-space-6) 0 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
.rie-byline strong,
.rie-byline__name {
  font-weight: var(--rie-fw-bold);
}
.rie-byline__date {
  margin-left: auto;
}

/* Featured image under the head: 1080, 16:9, radius 16, caption if set. */
.rie-article__media {
  margin: var(--rie-space-6) auto 0;
}

/* Body follows the head/image with the same rhythm. */
.rie-article-head + .rie-article__body,
.rie-article__media + .rie-article__body {
  margin-top: var(--rie-space-6);
}

@media (min-width: 769px) {
  .rie-byline,
  .rie-article__media,
  .rie-article-head + .rie-article__body,
  .rie-article__media + .rie-article__body {
    margin-top: var(--rie-space-8);
  }
}

/* ---------------------------------------------------------------------------
   7. Archive + search layouts (T-ARCHIVE, search.php)
   --------------------------------------------------------------------------- */
.rie-archive__head {
  max-width: var(--rie-max);
  margin: 0;
}
.rie-archive__title {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h1);
  line-height: var(--rie-lh-h1);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}
.rie-archive__intro {
  max-width: var(--rie-measure);
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
.rie-archive__intro > :last-child { margin-bottom: 0; }

/* Search box, then the count row, then results (rotary.org space-y-4 = 16 px). */
.rie-archive__tools {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--rie-space-4);
  margin: var(--rie-space-6) 0 var(--rie-space-4);
}
.rie-archive__head + .rie-archive__tools { margin-top: var(--rie-space-6); }

.rie-results-count {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
.rie-results-count :where(strong, b) {
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-bold);
}
/* #717171 on a tint band is 4.31:1: the muted lines of this file take the body colour there. */
.rie-section--tint :is(.rie-results-count, .rie-byline) {
  color: var(--rie-color-text);
}

.rie-search-results {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-5);
  max-width: var(--rie-measure);
  margin: 0;
  padding: 0;
  list-style: none;
}
.rie-search-results > li { margin: 0; }
.rie-search-results > .rie-card--text:first-child,
.rie-search-results > li:first-child > .rie-card--text {
  padding-top: var(--rie-space-5);
  border-top: 1px solid var(--rie-color-line);
}

/* Search results highlight the query inside titles/excerpts (<mark>). */
.rie-search-results mark {
  padding: 0 2px;
  color: inherit;
  background: var(--rie-color-pale);
  border-radius: 2px;
}

@media (min-width: 769px) {
  .rie-archive__tools { margin-top: var(--rie-space-8); }
}

/* Converted legacy pages (Phase 7): a shortcode block and the prose after it in the same band,
   and the H1 of a plain utility page (no hero), need the editorial stack gap between them. */
.e-con > .e-con-inner > .elementor-widget-shortcode + .elementor-widget,
.e-con > .e-con-inner > .rie-actions + .elementor-widget,
.rie-container--measure > .elementor-widget-heading:has(h1) + * {
  margin-block-start: var(--rie-stack-md);
}


/* ===== 70-district.css ===== */
/* =============================================================================
   rie.css · 70 DISTRICT  (owner: css-content)
   District-only components, designed in rotary.org's language (DESIGN-BRIEF §4.6, §6.6, §6.2):
     .rie-appeal-hero   contained photo hero with the live total, progress and two giving routes
     .rie-progress      12 px pill track + fill; role="progressbar" (or a native <progress>)
     .rie-impact        "What your gift does" panel: amount rows with dividers
     .rie-bank          € / £ bank-transfer sub-cards with "Show account details" reveal
     .rie-finder        club finder: search → count → link-list rows → "Browse all 66 clubs"
     .rie-directory     club directory: search + 3 selects → count → grid of .rie-card--club
     .rie-map           club map frame (radius 16, 16:9 / 4:5) + Leaflet control/popup skin
   The legacy shortcodes (.rcb-*, .rfc, .rotary-cd, .rotary-cm) are mapped onto these looks
   in rie-legacy.css; this file only styles the new .rie-* markup (plus Leaflet itself).
   ============================================================================= */

/* ---------------------------------------------------------------------------
   1. Appeal hero
   ≤768: image 16:9 on top, text on the light page (royal figure, tint track).
   ≥769: contained 1296 × 600, radius 20, photo + gradient, text bottom-left (max 640),
         gold figure in the Stat style, white-on-photo track with a gold fill.
   Markup: primary + outline buttons (their mobile look); ≥769 they turn into the
   pale pill and the inverse outline, as the brief specifies for the photo.
   --------------------------------------------------------------------------- */
.rie-appeal-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--rie-max);
  margin-inline: auto;
  color: var(--rie-color-text);
  isolation: isolate;
  padding-bottom: var(--rie-space-8);    /* ≤768 the pills end on the page: room before the next band */
}

.rie-appeal-hero__media {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  margin: 0;
  object-fit: cover;
  border-radius: var(--rie-radius-card);
}
.rie-appeal-hero__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.rie-appeal-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 640px;
  padding-top: var(--rie-space-4);
}

.rie-appeal-hero__content > .rie-badge {
  margin-bottom: var(--rie-space-4);
}

.rie-appeal-hero__title {
  margin: 0;
  color: inherit;
  font-size: var(--rie-fs-h1);
  line-height: var(--rie-lh-h1);
  font-weight: var(--rie-fw-semibold);
  letter-spacing: 0;
  text-transform: none;
}

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

.rie-appeal-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);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
.rie-appeal-hero__amount {
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-h1);
  line-height: var(--rie-lh-h1);
  font-weight: var(--rie-fw-semibold);
  font-variant-numeric: tabular-nums;
}

.rie-appeal-hero .rie-progress {
  max-width: 100%;
}

.rie-appeal-hero__meta {
  margin: var(--rie-space-2) 0 0;
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

.rie-appeal-hero__note {
  margin: var(--rie-space-1) 0 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}

.rie-appeal-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rie-space-4);
  margin-top: var(--rie-space-6);
}

@media (min-width: 769px) {
  .rie-appeal-hero {
    justify-content: flex-end;
    min-height: 600px;
    padding-bottom: 0;
    overflow: hidden;
    color: var(--rie-color-white);
    background: var(--rie-color-ink);
    border-radius: var(--rie-radius-hero);
  }
  .rie-appeal-hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  /* The text block is bottom-LEFT and runs up into the upper half of the photo, where the
     interior-hero gradient alone leaves about 25 % black (H1 5th-percentile 2.87:1 on the
     Nepal photo). So the home hero's left + bottom pair is layered over it: at least
     about 50 % black under every line of the H1, whatever photo a later appeal uses. */
  .rie-appeal-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--rie-overlay-home), var(--rie-overlay-hero);
    pointer-events: none;
  }
  .rie-appeal-hero__content {
    max-width: calc(640px + 2 * var(--rie-space-8));
    padding: var(--rie-space-8);
  }
  .rie-appeal-hero__title { color: var(--rie-color-white); }
  .rie-appeal-hero__amount {
    color: var(--rie-color-gold);
    font-size: var(--rie-fs-stat);
    line-height: var(--rie-lh-stat);
    font-weight: var(--rie-fw-regular);
  }
  .rie-appeal-hero__note { color: var(--rie-color-white); }

  /* Badge on the photo: the dark-surface gold badge (#F7A81B / #212C3F). */
  .rie-appeal-hero .rie-badge.rie-badge--gold {
    --rie-badge-bg: var(--rie-color-gold);
    --rie-badge-fg: var(--rie-color-ink);
  }

  /* Progress on the photo: translucent white track, gold fill. */
  .rie-appeal-hero .rie-progress { background: rgba(255, 255, 255, .24); }
  .rie-appeal-hero .rie-progress__bar,
  .rie-appeal-hero .rie-progress::-webkit-progress-value { background: var(--rie-color-gold); }
  .rie-appeal-hero progress.rie-progress::-moz-progress-bar { background: var(--rie-color-gold); }

  /* Buttons on the photo: primary → pale pill, outline → inverse outline
     (same custom properties as 30-atoms, so every state stays in step). */
  .rie-appeal-hero__actions .rie-btn.rie-btn--primary {
    --rie-btn-bg: var(--rie-color-pale);
    --rie-btn-fg: var(--rie-color-navy);
    --rie-btn-bd: transparent;
  }
  .rie-appeal-hero__actions .rie-btn.rie-btn--primary:hover { --rie-btn-bg: var(--rie-color-pale-hover); }
  .rie-appeal-hero__actions .rie-btn.rie-btn--primary:active { --rie-btn-bg: var(--rie-color-pale-active); }
  .rie-appeal-hero__actions .rie-btn.rie-btn--outline {
    --rie-btn-bg: transparent;
    --rie-btn-fg: var(--rie-color-white);
    --rie-btn-bd: var(--rie-color-white);
  }
  .rie-appeal-hero__actions .rie-btn.rie-btn--outline:hover {
    --rie-btn-bg: var(--rie-color-white);
    --rie-btn-fg: var(--rie-color-navy);
    --rie-btn-bd: var(--rie-color-white);
  }
  .rie-appeal-hero__actions .rie-btn.rie-btn--outline:active {
    --rie-btn-bg: var(--rie-color-tint);
    --rie-btn-fg: var(--rie-color-navy);
    --rie-btn-bd: var(--rie-color-tint);
  }
  .rie-appeal-hero__actions .rie-btn:focus-visible,
  .rie-appeal-hero__content a:focus-visible {
    outline: 2px solid var(--rie-color-white);
    outline-offset: 2px;
    box-shadow: none;
  }
}
@media (min-width: 1025px) {
  .rie-appeal-hero__content {
    max-width: calc(640px + 2 * var(--rie-space-12));
    padding: var(--rie-space-12);
  }
}

/* ---------------------------------------------------------------------------
   2. Progress: 12 px pill; royal on light, gold on dark
   <div class="rie-progress" role="progressbar" aria-valuemin="0" aria-valuemax="50000"
        aria-valuenow="44112" aria-valuetext="€44,112 raised of €50,000 (88%)"
        style="--rie-progress: 88%"><span class="rie-progress__bar"></span></div>
   --------------------------------------------------------------------------- */
.rie-progress {
  position: relative;
  display: block;
  width: 100%;
  height: 12px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: var(--rie-color-tint);
  border: 0;
  border-radius: var(--rie-radius-pill);
  appearance: none;
  -webkit-appearance: none;
}
.rie-progress__bar {
  display: block;
  width: var(--rie-progress, 0%);
  max-width: 100%;
  height: 100%;
  background: var(--rie-color-royal);
  border-radius: inherit;
  transition: width 600ms var(--rie-ease-out);
}
/* Native <progress class="rie-progress" value="44112" max="50000"> */
.rie-progress::-webkit-progress-bar {
  background: transparent;
  border-radius: var(--rie-radius-pill);
}
.rie-progress::-webkit-progress-value {
  background: var(--rie-color-royal);
  border-radius: var(--rie-radius-pill);
}
progress.rie-progress::-moz-progress-bar {
  background: var(--rie-color-royal);
  border-radius: var(--rie-radius-pill);
}

/* On dark surfaces (navy/ink bands, callouts, .rie-on-dark, the --on-dark modifier). */
.rie-progress--on-dark,
:is(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout) .rie-progress {
  background: rgba(255, 255, 255, .24);
}
.rie-progress--on-dark .rie-progress__bar,
:is(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout) .rie-progress__bar,
.rie-progress--on-dark::-webkit-progress-value,
:is(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout) .rie-progress::-webkit-progress-value {
  background: var(--rie-color-gold);
}
progress.rie-progress--on-dark::-moz-progress-bar,
:is(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout) progress.rie-progress::-moz-progress-bar {
  background: var(--rie-color-gold);
}

/* ---------------------------------------------------------------------------
   3. Impact list: white panel, amount rows with 1 px dividers
   --------------------------------------------------------------------------- */
.rie-impact {
  align-self: start;                     /* a panel, not a stretched grid cell */
  padding: var(--rie-space-6);
  color: var(--rie-color-text);
  background: var(--rie-color-white);
  border-radius: var(--rie-radius-card);
  box-shadow: var(--rie-shadow-card);
}
.rie-impact__title {
  margin: 0 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
  font-weight: var(--rie-fw-semibold);
}
.rie-impact__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.rie-impact__row {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  align-items: baseline;
  gap: 0 var(--rie-space-4);
  margin: 0;
  padding: var(--rie-space-4) 0;
}
.rie-impact__row + .rie-impact__row {
  border-top: 1px solid var(--rie-color-line);
}
.rie-impact__row:last-child { padding-bottom: 0; }
.rie-impact__amount {
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
  font-weight: var(--rie-fw-semibold);
  font-variant-numeric: tabular-nums;
}
.rie-impact__alt {
  display: block;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-regular);
}
.rie-impact__text {
  margin: 0;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
.rie-impact__note {
  margin: var(--rie-space-4) 0 0;
  padding-top: var(--rie-space-4);
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  border-top: 1px solid var(--rie-color-line);
}
@media (min-width: 769px) {
  .rie-impact { padding: var(--rie-space-8); }
}
/* The wider amount column only once the panel is a 5/12 column of a 1296 row. */
@media (min-width: 1025px) {
  .rie-impact__row { grid-template-columns: 104px minmax(0, 1fr); }
}

/* T-APPEAL row 2 (§6.6): the situation prose + the impact panel, stacked up to 1024
   (a 50/50 split leaves the panel about 300 px of text at 820), 7 / 5 from 1025.
   Applies to any .rie-grid holding an impact panel, whatever its column modifier. */
@media (min-width: 769px) {
  .rie-grid:has(> .rie-impact),
  .rie-grid:has(> .e-con-inner > .rie-impact) { --rie-grid-cols: 1; }
}
@media (min-width: 1025px) {
  .rie-grid:has(> .rie-impact),
  .rie-grid:has(> .e-con-inner > .rie-impact) > .e-con-inner {
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  }
}

/* ---------------------------------------------------------------------------
   4. Bank cards: € and £ side by side inside an info card
   --------------------------------------------------------------------------- */
.rie-bank {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: var(--rie-space-4);
  width: 100%;
  margin: 0;
}
.rie-bank__account {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rie-space-2);
  min-width: 0;
  padding: var(--rie-space-4) var(--rie-space-5) var(--rie-space-5);
  background: var(--rie-color-page);
  border: 1px solid var(--rie-color-line);
  border-radius: var(--rie-radius-panel);
}
.rie-bank__name {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h5);
  line-height: var(--rie-lh-h5);
  font-weight: var(--rie-fw-semibold);
}
.rie-bank__hint {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
.rie-bank__account > .rie-btn {
  margin-top: var(--rie-space-2);
}
.rie-bank__details {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: baseline;
  gap: var(--rie-space-2) var(--rie-space-3);
  width: 100%;
  margin: var(--rie-space-2) 0 0;
  padding: var(--rie-space-3) 0 0;
  border-top: 1px solid var(--rie-color-line);
}
.rie-bank__details[hidden] { display: none; }
.rie-bank__details dt {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
.rie-bank__details dd {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 var(--rie-space-3);
  min-width: 0;
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-semibold);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.rie-bank__copy {
  display: inline-flex;
  align-items: center;
  gap: var(--rie-space-1);
  /* 14/21 text in a 29 × ~50 px target (WCAG 2.5.8 asks 24): the padding grows the
     hit area and the focus ring, the negative margin keeps the text where it was.
     Rows are 32 px apart, so neighbouring targets never overlap. */
  margin: calc(-1 * var(--rie-space-1)) calc(-1 * var(--rie-space-2));
  padding: var(--rie-space-1) var(--rie-space-2);
  color: var(--rie-color-royal);
  background: none;
  border: 0;
  border-radius: var(--rie-radius-sm);
  font: inherit;
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-bold);
  cursor: pointer;
  transition: color var(--rie-dur-fast) var(--rie-ease);
}
.rie-bank__copy:is(:hover, :focus) {
  color: var(--rie-color-azure);
  background: none;
  border: 0;
  text-decoration: underline;
}
.rie-bank__copy:active { color: var(--rie-color-active); }
.rie-bank__ref {
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
.rie-bank__ref strong { font-weight: var(--rie-fw-bold); }

/* ---------------------------------------------------------------------------
   5. Club finder (Home §7): search → count → rows → "Browse all 66 clubs"
   --------------------------------------------------------------------------- */
.rie-finder {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--rie-space-4);
  width: 100%;
}
.rie-finder > .rie-search,
.rie-finder > form {
  width: 100%;
  max-width: none; /* .rie-search caps at 645px; in the finder it aligns with the list */
}
.rie-finder__count {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
.rie-finder__count :where(strong, b) {
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-bold);
}
.rie-finder__list {
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--rie-color-line);
}
/* The live [rfc] prints all 66 clubs and filters them as you type. Show about five and
   a half rows (a row is 16 + 27 + 21 + 16 px + its 1 px rule) and let the rest scroll
   inside the list: the half row says there is more. Five rows or fewer are unaffected. */
.rie-finder__list:has(> li:nth-child(6)) {
  max-height: calc(5.5 * (var(--rie-lh-h5) + var(--rie-lh-sm) + 2 * var(--rie-space-4) + 1px));
  overflow-y: auto;
  border-bottom: 1px solid var(--rie-color-line);   /* closes the box under the cut row */
}
.rie-finder__list > li { margin: 0; }
.rie-finder__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: var(--rie-space-4);
  padding: var(--rie-space-4) var(--rie-space-2) var(--rie-space-4) 0;
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-regular);
  text-decoration: none;
  border-bottom: 1px solid var(--rie-color-line);
  transition: color var(--rie-dur-fast) var(--rie-ease), background-color var(--rie-dur-fast) var(--rie-ease);
}
.rie-finder__name {
  grid-column: 1;
  font-size: var(--rie-fs-h5);
  line-height: var(--rie-lh-h5);
  font-weight: var(--rie-fw-semibold);
}
.rie-finder__place {
  grid-column: 1;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
.rie-finder__item .rie-icon {
  --rie-icon-size: 20px;
  grid-column: 2;
  grid-row: 1 / span 2;
  color: var(--rie-color-royal);
  transition: transform var(--rie-dur-slow) var(--rie-ease);
}
.rie-finder__item:hover {
  color: var(--rie-color-azure);
}
.rie-finder__item:hover .rie-finder__name { text-decoration: underline; }
.rie-finder__item:hover .rie-icon {
  color: var(--rie-color-azure);
  transform: translateX(4px);
}
.rie-finder__item:focus-visible {
  outline: 2px solid transparent;        /* forced colours drop the box-shadow ring */
  outline-offset: -2px;                  /* drawn inside: the scrolling list would clip an outer ring */
  box-shadow: inset 0 0 0 2px var(--rie-color-navy);
  border-radius: var(--rie-radius-sm);
}
.rie-finder > .rie-btn {
  margin-top: var(--rie-space-4);
}

/* ---------------------------------------------------------------------------
   6. Club directory: filters (search + 3 selects, 56 px, radius 8) → count → grid
   --------------------------------------------------------------------------- */
.rie-directory {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-4);
  width: 100%;
}
.rie-directory__filters {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-space-3);
  margin: 0;
}
.rie-directory__filters > .rie-search {
  width: 100%;
  max-width: none;
}
.rie-directory__field {
  position: relative;
  display: block;
  min-width: 0;
  margin: 0;
}
.rie-directory__select {
  display: block;
  width: 100%;
  height: 56px;
  margin: 0;
  padding: 0 var(--rie-space-12) 0 var(--rie-space-4);
  color: var(--rie-color-text);
  background: var(--rie-color-white);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  text-overflow: ellipsis;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  transition: border-color var(--rie-dur-fast) var(--rie-ease), box-shadow var(--rie-dur-fast) var(--rie-ease);
}
.rie-directory__select:hover { border-color: var(--rie-color-azure); }
.rie-directory__select:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--rie-color-azure);
  box-shadow: var(--rie-shadow-focus);   /* navy ring, 10:1 (the 50 % azure halo was 2.1:1) */
}
.rie-directory__field > .rie-icon {
  --rie-icon-size: 20px;
  position: absolute;
  top: 50%;
  right: var(--rie-space-4);
  color: var(--rie-color-muted);
  transform: translateY(-50%);
  pointer-events: none;
}
.rie-directory__count {
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
.rie-directory__count :where(strong, b) {
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-bold);
}
.rie-directory__reset {
  justify-self: start;
}

/* On a tint band #717171 is 4.31:1: the counts and place lines that sit straight on
   the band take the body colour there. */
.rie-section--tint :is(.rie-finder__count, .rie-finder__place, .rie-directory__count) {
  color: var(--rie-color-text);
}

@media (min-width: 769px) {
  .rie-directory__filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--rie-space-4);
  }
  .rie-directory__filters > .rie-search { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
  .rie-directory__filters {
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));
    gap: var(--rie-space-5);
  }
  .rie-directory__filters > .rie-search { grid-column: auto; }
}

/* ---------------------------------------------------------------------------
   7. Club map frame + Leaflet skin
   The frame: radius 16, overflow hidden, 4:5 (≤768) → 16:9 (≥769).
   Leaflet rules are scoped to .leaflet-container, so the existing club map
   (.rotary-cm, the only Leaflet map on the site) picks them up as well.
   --------------------------------------------------------------------------- */
.rie-map {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  isolation: isolate;
  background: var(--rie-color-white);
  border: 1px solid var(--rie-color-line);
  border-radius: var(--rie-radius-card);
}
.rie-map > .leaflet-container,
.rie-map__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
@media (min-width: 769px) {
  .rie-map { aspect-ratio: 16 / 9; }
}

/* Consent / loading state (Complianz blocks the map until consent is given). A faint
   24 px dot grid in the tint-press blue fills the frame, so a 1296 × 729 panel reads as
   "a map goes here" rather than as an empty box. */
.rie-map__placeholder {
  position: absolute;
  inset: 0;
  background-color: var(--rie-color-white);
  background-image: radial-gradient(circle, var(--rie-color-tint-press) 2px, transparent 2.5px);
  background-size: var(--rie-space-6) var(--rie-space-6);
  background-position: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--rie-space-3);
  padding: var(--rie-space-6);
  color: var(--rie-color-text);
  text-align: center;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
.rie-map__placeholder > .rie-icon {
  --rie-icon-size: 32px;
  color: var(--rie-color-royal);
}
.rie-map__placeholder p { max-width: 440px; margin: 0; background-color: var(--rie-color-white); }

/* Marker for L.divIcon({ className: 'rie-map-pin', html: '<span class="rie-icon rie-icon--map-pin"></span>',
   iconSize: [32, 32], iconAnchor: [16, 32] }) — Phase 7 JS change. */
.rie-map-pin {
  width: 32px;
  height: 32px;
  color: var(--rie-color-royal);
  background: none;
  border: 0;
}
.rie-map-pin > .rie-icon {
  --rie-icon-size: 32px;
  display: block;
  color: inherit;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}
.rie-map-pin:hover,
.rie-map-pin:focus-visible { color: var(--rie-color-azure); }

/* Leaflet: type and link colour. Every rule that styles a Leaflet <a> starts with
   `:root body`; the control and popup link rules carry extra classes / :is() on top, so
   they reach 0,5,2 or more and outrank the legacy band-link rule
   `.rotary-home__section--brand a:not(…×4)` (0,5,1) wherever the map sits. */
body .leaflet-container {
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  background: var(--rie-color-tint);
}
:root body .leaflet-container a { color: var(--rie-color-royal); }

/* Zoom: two 40 px white squares, radius 8, royal glyphs, card shadow, 8 px apart. */
body .leaflet-container .leaflet-bar.leaflet-control {
  display: flex;
  flex-direction: column;
  gap: var(--rie-space-2);
  margin: var(--rie-space-4) 0 0 var(--rie-space-4);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
:root body .leaflet-container .leaflet-bar.leaflet-control a:is(.leaflet-control-zoom-in, .leaflet-control-zoom-out, [role="button"], [href]) {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--rie-color-royal);
  background: var(--rie-color-white);
  border: 0;
  border-radius: var(--rie-radius-input);
  box-shadow: var(--rie-shadow-card);
  font: var(--rie-fw-bold) 22px/40px var(--rie-font);
  text-indent: 0;
  transition: background-color var(--rie-dur-fast) var(--rie-ease), color var(--rie-dur-fast) var(--rie-ease);
}
:root body .leaflet-container .leaflet-bar.leaflet-control a:is(.leaflet-control-zoom-in, .leaflet-control-zoom-out, [role="button"], [href]):hover {
  color: var(--rie-color-azure);
  background: var(--rie-color-hover-tint);
}
:root body .leaflet-container .leaflet-bar.leaflet-control a:is(.leaflet-control-zoom-in, .leaflet-control-zoom-out, [role="button"], [href]):focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}
:root body .leaflet-container .leaflet-bar.leaflet-control a.leaflet-disabled:is(.leaflet-control-zoom-in, .leaflet-control-zoom-out, [role="button"], [href]) {
  color: var(--rie-color-line);
  background: var(--rie-color-white);
  cursor: not-allowed;
}

/* Attribution: 12/18 #717171 (never gold), links royal. */
body .leaflet-container .leaflet-control-attribution {
  padding: 2px var(--rie-space-2);
  color: var(--rie-color-muted);
  background: rgba(255, 255, 255, .85);
  border-radius: var(--rie-radius-sm) 0 0 0;
  font-size: var(--rie-fs-caption);
  line-height: var(--rie-lh-caption);
}
:root body .leaflet-container .leaflet-control-attribution.leaflet-control a:is([href]) {
  color: var(--rie-color-royal);
  text-decoration: none;
}
:root body .leaflet-container .leaflet-control-attribution.leaflet-control a:is([href]):hover { text-decoration: underline; }

/* Popup: radius 12, card shadow, title 16/24 700, bold royal link. */
body .leaflet-container .leaflet-popup-content-wrapper {
  padding: 0;
  color: var(--rie-color-text);
  background: var(--rie-color-white);
  border-radius: var(--rie-radius-panel);
  box-shadow: var(--rie-shadow-card-hover);
}
body .leaflet-container .leaflet-popup-tip {
  background: var(--rie-color-white);
  box-shadow: var(--rie-shadow-card);
}
body .leaflet-container .leaflet-popup-content {
  margin: var(--rie-space-4) var(--rie-space-12) var(--rie-space-4) var(--rie-space-5);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
body .leaflet-container .leaflet-popup-content :is(h2, h3, h4, strong, b):first-child {
  display: block;
  margin: 0 0 var(--rie-space-1);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
}
body .leaflet-container .leaflet-popup-content p { margin: 0 0 var(--rie-space-2); }
body .leaflet-container .leaflet-popup-content p:last-child { margin: 0; }
:root body .leaflet-container .leaflet-popup .leaflet-popup-content a:is([href]) {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}
:root body .leaflet-container .leaflet-popup .leaflet-popup-content a:is([href]):hover { color: var(--rie-color-azure); text-decoration: underline; }
:root body .leaflet-container .leaflet-popup a.leaflet-popup-close-button {
  top: var(--rie-space-2);
  right: var(--rie-space-2);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  color: var(--rie-color-muted);
  border-radius: var(--rie-radius-pill);
  font: 400 22px/32px var(--rie-font);
}
:root body .leaflet-container .leaflet-popup a.leaflet-popup-close-button:hover {
  color: var(--rie-color-royal);
  background: var(--rie-color-hover-tint);
}

@media (prefers-reduced-motion: reduce) {
  .rie-progress__bar,
  .rie-finder__item,
  .rie-finder__item .rie-icon { transition: none; }
  .rie-finder__item:hover .rie-icon { transform: none; }
}


/* ===== 80-plugins.css ===== */
/* =============================================================================
   rie.css · 80 PLUGINS  (owner: css-content)
   DESIGN-BRIEF §4.7, §6.10, §6.11, §5.9:
     1. The Events Calendar 6.17 (Views v2 list + month, classic single event)
     2. Gravity Forms 3.1 Orbital extras (colours come from the gform_default_styles filter)
     3. Complianz banner fallbacks (the real values are set in Complianz → Consent Banner)
     4. reCAPTCHA badge + the required notice (.rie-recaptcha-note)
     5. Ally: one skip link only
   The Rank Math breadcrumb look (.rie-breadcrumb) lives in 20-chrome.css.

   Specificity notes
   - TEC prints its Customizer :root block at the END of <body>; `:root:root` wins it.
   - TEC's own rules reach (0,3,0)–(0,4,0) (`.tribe-common--breakpoint-medium.tribe-events …`),
     so overrides here start with `body` to land one step higher, whatever the load order.
   - Gravity Forms button rules are (0,4,0); ours are (0,4,1)+.
   ============================================================================= */

/* ===========================================================================
   1. THE EVENTS CALENDAR
   =========================================================================== */

/* 1.1 Variables: the brief's mapping (§4.7) … */
:root:root {
  --tec-font-family-sans-serif: var(--rie-font);
  --tec-font-family-base: var(--rie-font);
  --tec-color-text-primary: var(--rie-color-text);
  --tec-color-text-secondary: var(--rie-color-muted);
  --tec-color-text-events-title: var(--rie-color-text);
  --tec-color-accent-primary: var(--rie-color-royal);
  --tec-color-accent-primary-hover: var(--rie-color-azure);
  --tec-color-accent-primary-active: var(--rie-color-navy);
  --tec-color-accent-primary-background: var(--rie-color-hover-tint);
  --tec-color-button-primary: var(--rie-color-royal);
  --tec-color-button-primary-hover: var(--rie-color-azure);
  --tec-color-link-accent: var(--rie-color-royal);
  --tec-color-link-accent-hover: var(--rie-color-azure);
  --tec-color-background-secondary: var(--rie-color-page);
  --tec-color-border-default: var(--rie-color-line);
  --tec-border-radius-default: var(--rie-radius-input);

  /* … plus the values TEC hard-codes to its own #334AFF blue and greys. */
  --tec-color-button-primary-active: var(--rie-color-active);
  --tec-color-accent-secondary: var(--rie-color-text);
  --tec-color-icon-focus: var(--rie-color-navy);
  --tec-color-event-icon-hover: var(--rie-color-azure);
  --tec-color-border-secondary: var(--rie-color-line);
  --tec-color-border-active: var(--rie-color-azure);
  --tec-color-background-messages: var(--rie-color-tint);
  --tec-color-background-secondary-hover: var(--rie-color-hover-tint);
  --tec-color-background-primary-multiday: var(--rie-color-tint);
  --tec-color-background-primary-multiday-hover: var(--rie-color-tint-press);
  --tec-color-background-secondary-multiday: var(--rie-color-tint);
  --tec-color-background-secondary-multiday-hover: var(--rie-color-tint-press);
  --tec-color-accent-primary-week-event: var(--rie-color-tint);
  --tec-color-accent-primary-week-event-hover: var(--rie-color-tint-press);
  --tec-color-text-event-date: var(--rie-color-muted);
  --tec-color-day-marker-current-month: var(--rie-color-royal);
  --tec-color-background-month-grid: var(--rie-color-white);
  --tec-color-background-events-bar: transparent;
  --tec-color-border-events-bar: transparent;
  --tec-box-shadow-card: var(--rie-shadow-card);
  --tec-box-shadow-default: var(--rie-shadow-card);
  --tec-box-shadow-tooltip: var(--rie-shadow-card-hover);

  /* Layout: TEC's 1176 px grid → the site's 1296 px content width and gutters. */
  --tec-grid-width-default: var(--rie-max);
  --tec-grid-gutter-page: var(--rie-gutter);
  --tec-grid-gutter-page-small: var(--rie-gutter);
}

/* 1.2 Page frame (Views v2 archive) */
body .tribe-events .tribe-events-l-container,
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-l-container {
  min-height: 0;
  padding-top: var(--rie-section-y-sm);
  padding-bottom: var(--rie-section-y);
}
body .tribe-common.tribe-events {
  color: var(--rie-color-text);
  font-family: var(--rie-font);
}
/* "Add HTML before event content": the pasted H1 + sub-nav. */
body .tribe-events .tribe-events-before-html {
  margin-bottom: var(--rie-space-6);
}
body .tribe-events .tribe-events-before-html :where(h1) {
  margin: 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h1);
  line-height: var(--rie-lh-h1);
  font-weight: var(--rie-fw-semibold);
}
/* TEC prints the same block on single events too, where the pasted "Events" H1 would be a
   second H1 above the event title (and the sub-nav is replaced by "← All events"). */
body.single-tribe_events .tribe-events-before-html,
body .tribe-events-pg-template:has(.tribe-events-single) .tribe-events-before-html {
  display: none;
}

/* 1.3 Search bar → .rie-search look; "Find Events" → primary pill */
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-events-bar--border,
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-header--has-event-search .tribe-events-c-events-bar {
  gap: var(--rie-space-4);
  align-items: center;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search {
  gap: var(--rie-space-4);
}
/* The field takes the free width and may shrink, so "Find Events" stays on the same row
   from 769 up (at 820 a fixed-width field pushed the pill onto a second row). */
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input-group {
  flex: 1 1 auto;
  min-width: 0;
}
body .tribe-events .tribe-events-c-search__input-control,
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input-control {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  height: 56px;
  margin: 0;
  background: var(--rie-color-white);
  border: 1px solid var(--rie-color-muted);
  border-radius: var(--rie-radius-input);
  transition: border-color var(--rie-dur-fast) var(--rie-ease), box-shadow var(--rie-dur-fast) var(--rie-ease);
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input-control:last-child {
  border-right: 1px solid var(--rie-color-muted);
}
body .tribe-events .tribe-events-c-search__input-control:hover {
  border-color: var(--rie-color-azure);
}
/* Focus: the navy ring (10:1; the 50 % azure halo was 2.1:1) on the box, plus a
   transparent outline that forced-colours mode paints. */
body .tribe-events .tribe-events-c-search__input-control:focus-within {
  outline: 2px solid transparent;
  outline-offset: 2px;
  border-color: var(--rie-color-azure);
  box-shadow: var(--rie-shadow-focus);
}
body .tribe-common .tribe-events-c-search__input-control .tribe-common-form-control-text__input,
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input {
  width: 100%;
  height: 54px;
  margin: 0;
  padding: 0 var(--rie-space-4) 0 var(--rie-space-12);
  color: var(--rie-color-text);
  background: transparent;
  border: 0;
  border-radius: var(--rie-radius-input);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  box-shadow: none;
  outline: none;                         /* the ring is on the control around it (:focus-within) */
}
body .tribe-events .tribe-events-c-search__input::placeholder { color: var(--rie-color-muted); opacity: 1; }
body .tribe-events .tribe-events-c-search__input-control-icon-svg,
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-search__input-control-icon-svg {
  display: block;
  left: var(--rie-space-4);
  right: auto;
  width: 20px;
  height: 20px;
  color: var(--rie-color-muted);
}

body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button,
body .tribe-events button.tribe-common-c-btn.tribe-events-c-search__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 56px;
  padding: var(--rie-space-4) var(--rie-space-8);
  color: var(--rie-color-white);
  background: var(--rie-color-royal);
  border: 0;
  border-radius: var(--rie-radius-pill);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
  box-shadow: none;
  transition: all var(--rie-dur-base) var(--rie-ease);
}
body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button:is(:hover, :focus-visible) {
  color: var(--rie-color-white);
  background: var(--rie-color-azure);
  border-radius: var(--rie-radius-pill);
  font-size: var(--rie-fs-body);
}
body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}
body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button:active {
  background: var(--rie-color-active);
}
body .tribe-events .tribe-events-c-events-bar__search-button { color: var(--rie-color-royal); }

/* 1.4 View switcher (List · Month) → .rie-subnav tabs */
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list {
  gap: var(--rie-space-4);
  height: auto;
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item {
  height: auto;
  margin: 0;
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rie-space-2);
  height: auto;
  padding: var(--rie-space-2) 0 0;
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h6);
  line-height: var(--rie-lh-h6);
  font-weight: var(--rie-fw-semibold);
  transition: color var(--rie-dur-fast) var(--rie-ease);
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-link::after {
  content: "";
  position: static;
  display: block;
  width: 100%;
  height: 4px;
  background: transparent;
  border-radius: var(--rie-radius-sm);
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-link:hover {
  color: var(--rie-color-royal);
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link {
  color: var(--rie-color-royal);
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active .tribe-events-c-view-selector__list-item-link::after {
  position: static;
  height: 4px;
  background: var(--rie-color-royal);
}
/* TEC draws its own active underline with ::after on the list item; the link draws ours. */
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item--active::after {
  display: none;
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-icon {
  display: none;
}
body .tribe-common--breakpoint-medium.tribe-events .tribe-events-c-view-selector--tabs .tribe-events-c-view-selector__list-item-text {
  margin: 0;
  color: inherit;
  font: inherit;
}
/* Mobile: the view dropdown keeps its behaviour, in brand colours. */
body .tribe-events .tribe-events-c-view-selector__button { color: var(--rie-color-royal); }
body .tribe-events .tribe-events-c-view-selector__content {
  border-radius: var(--rie-radius-panel);
  box-shadow: var(--rie-shadow-card-hover);
}
body .tribe-events .tribe-events-c-view-selector__list-item-link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
  border-radius: var(--rie-radius-sm);
}

/* 1.5 Date navigation: prev/next = .rie-icon-btn--filled, "Today" = text button */
body .tribe-events .tribe-events-c-top-bar__nav-list {
  gap: var(--rie-space-2);
}
body .tribe-events .tribe-events-c-top-bar__nav-link,
body .tribe-events .tribe-common-c-btn-icon.tribe-events-c-top-bar__nav-link {
  --tec-color-icon-active: currentColor;
  display: inline-grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  color: var(--rie-color-royal);
  background: var(--rie-color-white);
  border: 0;
  border-radius: var(--rie-radius-pill);
  box-shadow: var(--rie-shadow-card);
  transition: all var(--rie-dur-base) var(--rie-ease);
}
body .tribe-events .tribe-events-c-top-bar__nav-link:is(:hover, :focus-visible):not([disabled]) {
  color: var(--rie-color-white);
  background: var(--rie-color-azure);
}
body .tribe-events .tribe-events-c-top-bar__nav-link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}
body .tribe-events .tribe-events-c-top-bar__nav-link[disabled],
body .tribe-events button.tribe-events-c-top-bar__nav-link:disabled {
  width: 48px;
  height: 48px;
  color: var(--rie-color-line);
  background: var(--rie-color-white);
  border-radius: var(--rie-radius-pill);
  box-shadow: inset 0 0 0 1px var(--rie-color-line);
  cursor: not-allowed;
}
body .tribe-events .tribe-events-c-top-bar__nav-link svg,
body .tribe-events .tribe-events-c-top-bar__nav-link-icon-svg {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0;
}
body .tribe-events .tribe-events-c-top-bar__nav-link path { fill: currentColor; }
/* TEC's .tribe-common-c-btn-icon::before is an empty block that pushes the caret off-centre. */
body .tribe-events .tribe-common-c-btn-icon.tribe-events-c-top-bar__nav-link::before { display: none; }

body .tribe-events .tribe-common-c-btn-border-small.tribe-events-c-top-bar__today-button {
  min-height: 0;
  margin: 0 var(--rie-space-2);
  padding: 0;
  color: var(--rie-color-royal);
  background: none;
  border: 0;
  border-radius: 0;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
}
body .tribe-events .tribe-common-c-btn-border-small.tribe-events-c-top-bar__today-button:hover { color: var(--rie-color-azure); }
body .tribe-events .tribe-common-c-btn-border-small.tribe-events-c-top-bar__today-button:active { color: var(--rie-color-active); }

body .tribe-events .tribe-events-c-top-bar__datepicker-button {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events .tribe-events-c-top-bar__datepicker-button-icon-svg path { fill: var(--rie-color-royal); }

/* 1.6 List view rows: date block · title · time/venue · excerpt · image
   (TEC's list rules reach (0,4,0); these are (0,4,1).) */
body .tribe-common.tribe-events .tribe-events-calendar-list .tribe-events-calendar-list__month-separator {
  margin: var(--rie-space-8) 0 0;
}
body .tribe-common.tribe-events .tribe-events-calendar-list .tribe-events-calendar-list__month-separator:first-child { margin-top: 0; }
body .tribe-common.tribe-events .tribe-events-calendar-list :is(.tribe-events-calendar-list__month-separator-text, .tribe-events-calendar-list__month-separator h3) {
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h6);
  line-height: var(--rie-lh-h6);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events .tribe-events-calendar-list__month-separator::after {
  background-color: var(--rie-color-line);
}

body .tribe-common.tribe-events :is(.tribe-events-calendar-list, .tribe-events-calendar-latest-past) :is(.tribe-events-calendar-list__event-row, .tribe-events-calendar-latest-past__event-row) {
  flex-wrap: nowrap;
  margin: 0;
  padding: var(--rie-space-6) 0;
  border-bottom: 1px solid var(--rie-color-line);
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list, .tribe-events-calendar-latest-past) :is(.tribe-events-calendar-list__event-row, .tribe-events-calendar-latest-past__event-row) > .tribe-common-g-col {
  padding-left: 0;
  padding-right: 0;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list, .tribe-events-calendar-latest-past) :is(.tribe-events-calendar-list__event-date-tag, .tribe-events-calendar-latest-past__event-date-tag) {
  flex: none;
  width: 72px;
  min-width: 0;
  margin-right: var(--rie-space-4);
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list, .tribe-events-calendar-latest-past) :is(.tribe-events-calendar-list__event-wrapper, .tribe-events-calendar-latest-past__event-wrapper) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}
@media (min-width: 769px) {
  body .tribe-common.tribe-events :is(.tribe-events-calendar-list, .tribe-events-calendar-latest-past) :is(.tribe-events-calendar-list__event-date-tag, .tribe-events-calendar-latest-past__event-date-tag) {
    margin-right: var(--rie-space-6);
  }
}

/* Date tag → the 72 × 72 tint block used by .rie-card--event */
body .tribe-events :is(.tribe-events-calendar-list__event-date-tag-datetime, .tribe-events-calendar-latest-past__event-date-tag-datetime) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  padding: 0;
  background: var(--rie-color-tint);
  border-radius: var(--rie-radius-panel);
  text-align: center;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-date-tag-weekday, .tribe-events-calendar-latest-past__event-date-tag-month, .tribe-events-calendar-latest-past__event-date-tag-year) {
  color: var(--rie-color-text);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-regular);
  letter-spacing: 0;
  text-transform: none;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-date-tag-daynum, .tribe-events-calendar-latest-past__event-date-tag-daynum) {
  color: var(--rie-color-royal);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h4);
  line-height: var(--rie-lh-h4);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events .tribe-events-calendar-latest-past__event-date-tag-year { display: none; }

/* Header order: title, then time, then venue (TEC puts the time first). */
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-header, .tribe-events-calendar-latest-past__event-header) {
  display: flex;
  flex-direction: column;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-header, .tribe-events-calendar-latest-past__event-header) > :is(.tribe-events-calendar-list__event-title, .tribe-events-calendar-latest-past__event-title) {
  order: 1;
  margin: 0 0 var(--rie-space-1);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h5);
  line-height: var(--rie-lh-h5);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-header, .tribe-events-calendar-latest-past__event-header) > :is(.tribe-events-calendar-list__event-datetime-wrapper, .tribe-events-calendar-latest-past__event-datetime-wrapper) {
  order: 2;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-header, .tribe-events-calendar-latest-past__event-header) > :is(.tribe-events-calendar-list__event-venue, .tribe-events-calendar-latest-past__event-venue) {
  order: 3;
  margin: 0;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-datetime-wrapper, .tribe-events-calendar-latest-past__event-datetime-wrapper, .tribe-events-calendar-list__event-venue, .tribe-events-calendar-latest-past__event-venue) {
  margin: 0;
  color: var(--rie-color-muted);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-style: normal;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-venue-title, .tribe-events-calendar-latest-past__event-venue-title) {
  color: var(--rie-color-muted);
  font-weight: var(--rie-fw-regular);
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-venue-title, .tribe-events-calendar-latest-past__event-venue-title)::after {
  content: ",";
}
body .tribe-events :is(.tribe-events-calendar-list__event-title-link, .tribe-events-calendar-latest-past__event-title-link),
body .tribe-events :is(.tribe-events-calendar-list__event-title-link, .tribe-events-calendar-latest-past__event-title-link):is(:hover, :focus, :active, :visited) {
  color: var(--rie-color-text);
  font-weight: inherit;
  border-bottom: 0;
  text-decoration: none;
}
body .tribe-events :is(.tribe-events-calendar-list__event-title-link, .tribe-events-calendar-latest-past__event-title-link):is(:hover, :focus-visible) {
  text-decoration: underline;
}
body .tribe-common.tribe-events :is(.tribe-events-calendar-list__event-description, .tribe-events-calendar-latest-past__event-description) {
  margin-top: var(--rie-space-3);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
body .tribe-events :is(.tribe-events-calendar-list__event-description, .tribe-events-calendar-latest-past__event-description) p { margin: 0; }
body .tribe-events :is(.tribe-events-calendar-list__event-featured-image, .tribe-events-calendar-latest-past__event-featured-image) {
  border-radius: var(--rie-radius-card);
}
body .tribe-events .tribe-events-calendar-list__event-cost { color: var(--rie-color-muted); font-size: var(--rie-fs-sm); }

/* 1.7 Messages ("There are no upcoming events.") → .rie-empty look */
body .tribe-events .tribe-events-c-messages__message,
body .tribe-events .tribe-events-c-messages__message--notice {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: var(--rie-space-3);
  margin: 0 0 var(--rie-space-6);
  padding: var(--rie-space-6);
  text-align: left;
  color: var(--rie-color-text);
  background: var(--rie-color-tint);
  border: 0;
  border-radius: var(--rie-radius-panel);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
body .tribe-events .tribe-events-c-messages__message a {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}
body .tribe-events .tribe-events-c-messages__message a:hover { color: var(--rie-color-azure); text-decoration: underline; }
body .tribe-events .tribe-events-c-messages__message-icon-svg { color: var(--rie-color-royal); flex: none; }
body .tribe-events .tribe-events-c-messages__message:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}

/* "Latest past events" heading at the H2 token */
body .tribe-events .tribe-events-calendar-latest-past__heading {
  margin: var(--rie-space-8) 0 var(--rie-space-2);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h2);
  line-height: var(--rie-lh-h2);
  font-weight: var(--rie-fw-semibold);
}

/* 1.8 Bottom nav (Previous · Today · Next) */
body .tribe-events .tribe-events-c-nav__list { align-items: center; }
body .tribe-common.tribe-events .tribe-events-c-nav :is(.tribe-events-c-nav__prev, .tribe-events-c-nav__next, .tribe-events-c-nav__today) {
  --tec-color-icon-active: currentColor;
  display: inline-flex;
  align-items: center;
  gap: var(--rie-space-2);
  padding: var(--rie-space-2) 0;
  color: var(--rie-color-royal);
  background: none;
  border: 0;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}
body .tribe-common.tribe-events .tribe-events-c-nav :is(.tribe-events-c-nav__prev, .tribe-events-c-nav__next, .tribe-events-c-nav__today):is(:hover, :focus-visible):not([disabled]) {
  color: var(--rie-color-azure);
  text-decoration: underline;
  background: none;
}
body .tribe-common.tribe-events .tribe-events-c-nav :is(.tribe-events-c-nav__prev, .tribe-events-c-nav__next)[disabled] {
  color: var(--rie-color-line);
  cursor: not-allowed;
}
body .tribe-events :is(.tribe-events-c-nav__prev-icon-svg, .tribe-events-c-nav__next-icon-svg) path { fill: currentColor; }

/* 1.9 Subscribe / Add to calendar → .rie-btn--outline + card dropdown */
body .tribe-events .tribe-events-c-subscribe-dropdown__container {
  margin-top: var(--rie-space-8);
}
body .tribe-common .tribe-events-c-subscribe-dropdown .tribe-common-c-btn-border,
body .tribe-events .tribe-events-c-subscribe-dropdown__button {
  display: inline-flex;
  align-items: center;
  gap: var(--rie-space-2);
  min-height: 56px;
  padding: 0 var(--rie-space-8);
  color: var(--rie-color-royal);
  background: var(--rie-color-white);
  border: 2px solid var(--rie-color-royal);
  border-radius: var(--rie-radius-pill);
  box-shadow: none;
  transition: all var(--rie-dur-base) var(--rie-ease);
}
body .tribe-common .tribe-events-c-subscribe-dropdown .tribe-common-c-btn-border:is(:hover, :focus-within),
body .tribe-events .tribe-events-c-subscribe-dropdown__button:is(:hover, :focus-within) {
  color: var(--rie-color-white);
  background: var(--rie-color-azure);
  border-color: var(--rie-color-azure);
}
body .tribe-events .tribe-events-c-subscribe-dropdown__button-text,
body .tribe-events .tribe-events-c-subscribe-dropdown__button button {
  padding: var(--rie-space-4) 0;
  color: inherit;
  background: none;
  border: 0;
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
}
body .tribe-events .tribe-events-c-subscribe-dropdown__button-text:is(:hover, :focus) {
  color: inherit;
  background: none;
}
body .tribe-events .tribe-events-c-subscribe-dropdown__button svg path,
body .tribe-events .tribe-events-c-subscribe-dropdown__button-icon path { fill: currentColor; }
body .tribe-events .tribe-events-c-subscribe-dropdown__content {
  margin-top: var(--rie-space-2);
  padding: var(--rie-space-2) 0;
  background: var(--rie-color-white);
  border: 0;
  border-radius: var(--rie-radius-panel);
  box-shadow: var(--rie-shadow-card-hover);
}
body .tribe-events .tribe-events-c-subscribe-dropdown__list { padding: 0; }
body .tribe-events .tribe-events-c-subscribe-dropdown__list-item {
  margin: 0;
  padding: 0;
}
body .tribe-events .tribe-events-c-subscribe-dropdown__list-item-link {
  display: block;
  padding: var(--rie-space-3) var(--rie-space-6);
  color: var(--rie-color-royal);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
}
body .tribe-events .tribe-events-c-subscribe-dropdown__list-item:hover,
body .tribe-events .tribe-events-c-subscribe-dropdown__list-item-link:is(:hover, :focus-visible) {
  color: var(--rie-color-azure);
  background: var(--rie-color-hover-tint);
}

/* 1.10 Month view: white cells, hairline grid, royal day marker */
/* Hello's reset.css styles every table: 1 px grey cell borders, 15 px padding and
   zebra rows (the grey weeks). The month grid draws its own lines. */
body .tribe-events .tribe-events-calendar-month__header .tribe-events-calendar-month__header-column {
  border: 0;                             /* beats Hello's thead:first-child … th (0,2,4) */
  text-transform: none;
}
body .tribe-events .tribe-events-calendar-month__body .tribe-events-calendar-month__day,
body .tribe-events .tribe-events-calendar-month__body .tribe-events-calendar-month__day:hover {
  background-color: var(--rie-color-white);
}
body .tribe-events .tribe-events-calendar-month__body .tribe-events-calendar-month__day--past,
body .tribe-events .tribe-events-calendar-month__body .tribe-events-calendar-month__day--other-month {
  background-color: var(--rie-color-page);
}
body .tribe-events .tribe-events-calendar-month__header-column-title {
  color: var(--rie-color-muted);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events .tribe-events-calendar-month__body {
  background: var(--rie-color-white);
  border-radius: var(--rie-radius-panel);
}
body .tribe-events .tribe-events-calendar-month__day-date,
body .tribe-events .tribe-events-calendar-month__day-date-daynum {
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h6);
  line-height: var(--rie-lh-h6);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum,
body .tribe-events .tribe-events-calendar-month__day--other-month .tribe-events-calendar-month__day-date-daynum {
  color: var(--rie-color-muted);
  font-weight: var(--rie-fw-regular);
}
body .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum,
body .tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-link {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
}
body .tribe-events .tribe-events-calendar-month__day--current::after {
  background-color: var(--rie-color-royal);
}
body .tribe-events .tribe-events-calendar-month__day-date-link {
  color: var(--rie-color-royal);
}
body .tribe-events :is(.tribe-events-calendar-month__multiday-event-bar-title, .tribe-events-calendar-month__calendar-event-title) {
  color: var(--rie-color-navy);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events .tribe-events-calendar-month__calendar-event-datetime {
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
body .tribe-events .tribe-events-calendar-month__day-cell--selected,
body .tribe-events .tribe-events-calendar-month__day-cell--selected:is(:hover, :focus) {
  background-color: var(--rie-color-royal);
}
body .tribe-events .tribe-events-calendar-month__day-cell--selected .tribe-events-calendar-month__day-date-daynum { color: var(--rie-color-white); }
body .tribe-events .tribe-events-calendar-month__mobile-events-icon--event { background-color: var(--rie-color-royal); }
body .tribe-events .tribe-events-calendar-month-mobile-events__mobile-event-title-link { color: var(--rie-color-text); }
body .tribe-events :is(.tribe-events-tooltip-theme, .tooltipster-base.tribe-events-tooltip-theme) {
  border-radius: var(--rie-radius-panel);
  box-shadow: var(--rie-shadow-card-hover);
}

/* 1.11 Single event (classic "Default Events Template")
   Until the child override lands: an 860 reading column, H1 58/70, bold date line,
   figure radius 16, prose description, meta groups as info cards, text-button nav. */
body .tribe-events-pg-template {
  max-width: calc(var(--rie-wide) + 2 * var(--rie-gutter));
  margin: 0 auto;
  padding: var(--rie-stack-lg) var(--rie-gutter) var(--rie-section-y);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
}
body .tribe-events-single {
  display: flow-root;
}
body .tribe-events-single > :not(.tribe-events-event-image):not([class*="post-"]),
body .tribe-events-single > [class*="post-"] > :not(.tribe-events-event-image):not(.tribe-events-event-meta) {
  max-width: var(--rie-measure);
  margin-inline: auto;
}
body .tribe-events-single .tribe-events-back {
  margin: 0 auto var(--rie-space-4);
}
body .tribe-events-single .tribe-events-back a {
  display: inline-flex;
  align-items: center;
  gap: var(--rie-space-2);
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}
body .tribe-events-single .tribe-events-back a:hover { color: var(--rie-color-azure); text-decoration: underline; }
body .tribe-events-single .tribe-events-notices {
  margin: 0 auto var(--rie-space-4);
  padding: var(--rie-space-3) var(--rie-space-4);
  color: var(--rie-color-text);
  background: var(--rie-color-tint);
  border: 0;
  border-radius: var(--rie-radius-panel);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  text-shadow: none;
}
body .tribe-events-single .tribe-events-notices ul { margin: 0; padding: 0; list-style: none; }
body .tribe-events-single .tribe-events-single-event-title {
  margin: 0 auto var(--rie-space-4);
  color: var(--rie-color-text);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-h1);
  line-height: var(--rie-lh-h1);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events-single .tribe-events-schedule {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--rie-space-1) var(--rie-space-4);
  margin: 0 auto var(--rie-space-8);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
}
body .tribe-events-single .tribe-events-schedule :is(h2, div, span) {
  margin: 0;
  color: inherit;
  font: inherit;
}
body .tribe-events-single .tribe-events-schedule .tribe-events-cost {
  color: var(--rie-color-muted);
  font-weight: var(--rie-fw-regular);
}
/* The header copy of prev/next is redundant; keep the footer one. */
body .tribe-events-single > div:not(:last-child) > .tribe-events-nav-pagination { display: none; }

body .tribe-events-single .tribe-events-event-image {
  max-width: var(--rie-wide);
  margin: 0 auto var(--rie-space-8);
}
/* 16:9 like the article's featured image, so a 4:3 or portrait upload is not 800 px tall. */
body .tribe-events-single .tribe-events-event-image img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--rie-radius-card);
}
body .tribe-events-single .tribe-events-single-event-description {
  margin-bottom: var(--rie-space-8);
}
/* TEC's single stylesheet sets the description to 18/27 with its own margins, inside
   list markers, bold headings and a bordered link (`.tribe-events-content p|ol|ul|a|h2…`,
   0,1,1), which beats the prose rules. Back to the prose look (T-EVENT §6.11: 16/24). */
body .tribe-events-single .tribe-events-content :is(p, ol, ul) {
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
body .tribe-events-single .tribe-events-content p {
  margin: 0 0 var(--rie-space-5);
}
body .tribe-events-single .tribe-events-content :is(ol, ul) {
  margin: var(--rie-space-4) 0;
  padding-inline-start: 40px;
  list-style-position: outside;
}
body .tribe-events-single .tribe-events-content :is(p, ol, ul):last-child {
  margin-bottom: 0;
}
body .tribe-events-single .tribe-events-content :is(h2, h3, h4, h5, h6) {
  margin: var(--rie-space-6) 0 var(--rie-space-4);
  font-weight: var(--rie-fw-semibold);
}
body .tribe-events-single .tribe-events-content a:not([class]) {
  color: var(--rie-color-royal);
  border-bottom: 0;
  text-decoration: underline;           /* the prose link look (60-editorial §2) */
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
body .tribe-events-single .tribe-events-content a:not([class]):is(:hover, :focus-visible) {
  color: var(--rie-color-azure);
  text-decoration-thickness: 2px;
}

/* Details / Venue / Organiser → info cards without a header bar, on the .rie-grid
   columns: 1 → 2 (769) → 3 (1025). At 769–1024 an odd last group takes the full row. */
body .tribe-events-single .tribe-events-event-meta {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--rie-gap);
  width: 100%;
  max-width: var(--rie-wide);
  margin: var(--rie-space-8) auto;
  padding: 0;
  background: none;
  border: 0;
  font-family: var(--rie-font);
}
body .tribe-events-single .tribe-events-event-meta::before,
body .tribe-events-single .tribe-events-event-meta::after { display: none; }
@media (min-width: 769px) {
  body .tribe-events-single .tribe-events-event-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .tribe-events-single .tribe-events-event-meta .tribe-events-meta-group:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
  body .tribe-events-single .tribe-events-event-meta { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body .tribe-events-single .tribe-events-event-meta .tribe-events-meta-group:last-child:nth-child(odd) { grid-column: auto; }
}
body .tribe-events-single .tribe-events-event-meta .tribe-events-meta-group {
  float: none;
  width: auto;
  margin: 0;
  padding: var(--rie-space-6);
  color: var(--rie-color-text);
  background: var(--rie-color-white);
  border-radius: var(--rie-radius-card);
  box-shadow: var(--rie-shadow-card);
}
body .tribe-events-single .tribe-events-event-meta .tribe-events-single-section-title {
  margin: 0 0 var(--rie-space-3);
  color: var(--rie-color-text);
  font-size: var(--rie-fs-h6);
  line-height: var(--rie-lh-h6);
  font-weight: var(--rie-fw-semibold);
  text-transform: none;
  letter-spacing: 0;
}
body .tribe-events-single .tribe-events-event-meta :is(ul, dl) {
  margin: 0;
  padding: 0;
  list-style: none;
}
body .tribe-events-single .tribe-events-event-meta :is(li, dd) {
  margin: 0 0 var(--rie-space-3);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
}
body .tribe-events-single .tribe-events-event-meta :is(li, dd):last-child { margin-bottom: 0; }
body .tribe-events-single .tribe-events-event-meta :is(.tribe-events-meta-label, dt) {
  display: block;
  margin: 0;
  color: var(--rie-color-muted);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
  font-weight: var(--rie-fw-regular);
}
body .tribe-events-single .tribe-events-event-meta :is(.tribe-events-meta-value, abbr) {
  display: block;
  color: var(--rie-color-text);
  text-decoration: none;
  border: 0;
}
/* <address> is italic by default, and the only italic face loaded is Open Sans 700i,
   so the venue address rendered bold italic (TEC's Skeleton styles do not reset it). */
body .tribe-events-single .tribe-events-address {
  display: block;
  margin: 0;
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-style: normal;
}
body .tribe-events-single .tribe-events-event-meta a {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}
body .tribe-events-single .tribe-events-event-meta a:hover { color: var(--rie-color-azure); text-decoration: underline; }
body .tribe-events-single .tribe-events-venue-map {
  float: none;
  width: auto;
  margin: 0;
  overflow: hidden;
  border-radius: var(--rie-radius-card);
}
body .tribe-events-single .tribe-events-venue-map iframe { display: block; width: 100%; border: 0; }

/* Add to calendar (single) spacing */
body .tribe-events-single .tribe-events-c-subscribe-dropdown__container {
  max-width: var(--rie-measure);
  margin: 0 auto var(--rie-space-8);
}

/* Prev / next event → text buttons */
body .tribe-events-single .tribe-events-nav-pagination {
  max-width: var(--rie-measure);
  margin: 0 auto;
  padding-top: var(--rie-space-6);
}
body .tribe-events-single .tribe-events-sub-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--rie-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
body .tribe-events-single .tribe-events-sub-nav li {
  float: none;
  width: auto;
  max-width: 100%;
  margin: 0;
  padding: 0;
}
body .tribe-events-single .tribe-events-sub-nav .tribe-events-nav-next { margin-left: auto; text-align: right; }
body .tribe-events-single .tribe-events-sub-nav :is(.tribe-events-nav-next, .tribe-events-nav-previous) a {
  color: var(--rie-color-royal);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}
body .tribe-events-single .tribe-events-sub-nav :is(.tribe-events-nav-next, .tribe-events-nav-previous) a:is(:hover, :focus-visible) { color: var(--rie-color-azure); text-decoration: underline; }

/* ===========================================================================
   2. GRAVITY FORMS (Orbital) — extras the gform_default_styles filter cannot set
   =========================================================================== */
body .gform-theme--framework {
  --gf-ctrl-shadow: none;
  --gf-form-gap-y: 24px;
}

/* Submit (and multi-page next/prev): the 56 px pill, 16/32 padding, 700 weight. */
body .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(.gform_button, .button, input[type="submit"], button[type="submit"]) {
  --gf-local-radius: var(--rie-radius-pill);
  --gf-local-padding-x: var(--rie-space-8);
  --gf-local-padding-y: var(--rie-space-4);
  --gf-local-min-height: 56px;
  --gf-local-font-size: var(--rie-fs-body);
  --gf-local-font-weight: var(--rie-fw-bold);
  --gf-local-line-height: var(--rie-lh-body);
  --gf-local-shadow: none;
  min-height: 56px;
  padding: var(--rie-space-4) var(--rie-space-8);
  border-radius: var(--rie-radius-pill);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-body);
  line-height: var(--rie-lh-body);
  font-weight: var(--rie-fw-bold);
  text-transform: none;
  letter-spacing: 0;
  box-shadow: none;
  transition: all var(--rie-dur-base) var(--rie-ease);
}
/* Hover/active: rotary.org's azure / #20BBE6, not GF's computed "darker" primary. */
body .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(.gform_button, .button, input[type="submit"], button[type="submit"]):hover {
  --gf-local-bg-color: var(--rie-color-azure);
  --gf-local-border-color: var(--rie-color-azure);
  background-color: var(--rie-color-azure);
  border-color: var(--rie-color-azure);
}
body .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(.gform_button, .button, input[type="submit"], button[type="submit"]):active {
  --gf-local-bg-color: var(--rie-color-active);
  background-color: var(--rie-color-active);
  border-color: var(--rie-color-active);
}
body .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_footer, .gform_page_footer) :is(.gform_button, .button, input[type="submit"], button[type="submit"]):focus-visible {
  --gf-local-shadow: var(--rie-shadow-focus);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}
/* Previous (multi-page) reads as the outline pill. */
body .gform-theme.gform-theme--framework.gform_wrapper .gform_page_footer .gform_previous_button {
  --gf-local-bg-color: var(--rie-color-white);
  --gf-local-color: var(--rie-color-royal);
  --gf-local-border-color: var(--rie-color-royal);
  --gf-local-border-width: 2px;
}
body .gform-theme.gform-theme--framework.gform_wrapper :is(.gform_footer, .gform_page_footer) {
  gap: var(--rie-space-4);
  margin-top: var(--rie-space-8);
  padding: 0;
}
/* Field focus: azure border + the navy ring (10:1; the 50 % azure halo was 2.1:1), and a
   transparent 2 px outline in place of GF's 65 % primary one, so forced-colours mode
   (which drops box-shadows) still paints a ring. */
body .gform-theme.gform-theme--framework.gform_wrapper :is(input:not([type="submit"]):not([type="button"]):not([type="checkbox"]):not([type="radio"]), select, textarea):focus {
  --gf-local-border-color: var(--rie-color-azure);
  --gf-local-shadow: var(--rie-shadow-focus);
  --gf-local-outline-color: transparent;
  --gf-local-outline-width: 2px;
  border-color: var(--rie-color-azure);
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}
body .gform-theme.gform-theme--framework.gform_wrapper .gfield_required { color: var(--rie-color-error); }
body .gform-theme.gform-theme--framework.gform_wrapper :is(.gfield_validation_message, .validation_message, .gform_validation_errors) {
  color: var(--rie-color-error);
  font-family: var(--rie-font);
}
body .gform-theme.gform-theme--framework.gform_wrapper .gform_confirmation_message {
  padding: var(--rie-space-6);
  color: var(--rie-color-text);
  background: var(--rie-color-tint);
  border-radius: var(--rie-radius-panel);
}

/* A form on a tint band sits in a white panel: radius 16, padding 24 → 32, card shadow
   (docs/01 §3.2.9, T-FORM). The GF description and reCAPTCHA greys (#717171) are
   4.31:1 on tint but 4.81:1 on white. Covers the Gravity Form, its confirmation, and the
   .rie-form skin (the static stand-in in the prototypes); a form already inside a card
   (the appeal's pledge form) is left alone. */
body .rie-section--tint :is(.gform_wrapper, .gform_confirmation_wrapper, .rie-form):not(:where(.rie-card, .rie-impact) *) {
  margin-inline: 0;
  padding: var(--rie-space-6);
  background: var(--rie-color-white);
  border-radius: var(--rie-radius-card);
  box-shadow: var(--rie-shadow-card);
}
@media (min-width: 769px) {
  body .rie-section--tint :is(.gform_wrapper, .gform_confirmation_wrapper, .rie-form):not(:where(.rie-card, .rie-impact) *) {
    padding: var(--rie-space-8);
  }
}

/* ===========================================================================
   3. COMPLIANZ — fallbacks for the banner colours (set them in the plugin UI too)
   =========================================================================== */
:root:root {
  --cmplz_banner_background_color: var(--rie-color-white);
  --cmplz_banner_border_color: var(--rie-color-line);
  --cmplz_banner_border_radius: var(--rie-radius-card);
  --cmplz_text_color: var(--rie-color-text);
  --cmplz_hyperlink_color: var(--rie-color-royal);
  --cmplz_title_font_size: var(--rie-fs-h6);
  --cmplz_text_font_size: var(--rie-fs-sm);
  --cmplz_text_line_height: var(--rie-lh-sm);
  --cmplz_link_font_size: var(--rie-fs-sm);
  --cmplz_category_body_font_size: var(--rie-fs-sm);
  --cmplz_button_font_size: var(--rie-fs-body);
  --cmplz_button_border_radius: var(--rie-radius-pill);
  --cmplz_button_accept_background_color: var(--rie-color-royal);
  --cmplz_button_accept_border_color: var(--rie-color-royal);
  --cmplz_button_accept_text_color: var(--rie-color-white);
  --cmplz_button_deny_background_color: var(--rie-color-white);
  --cmplz_button_deny_border_color: var(--rie-color-royal);
  --cmplz_button_deny_text_color: var(--rie-color-royal);
  --cmplz_button_settings_background_color: var(--rie-color-white);
  --cmplz_button_settings_border_color: var(--rie-color-royal);
  --cmplz_button_settings_text_color: var(--rie-color-royal);
  --cmplz_slider_active_color: var(--rie-color-royal);
  --cmplz_slider_inactive_color: var(--rie-color-muted);
  --cmplz_slider_bullet_color: var(--rie-color-white);
  --cmplz_category_header_always_active_color: var(--rie-color-royal);
}
body .cmplz-cookiebanner {
  font-family: var(--rie-font);
  box-shadow: var(--rie-shadow-card-hover);
}
body .cmplz-cookiebanner .cmplz-title {
  color: var(--rie-color-text);
  font-weight: var(--rie-fw-semibold);
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn {
  min-height: 48px;
  border-width: 2px;
  font-family: var(--rie-font);
  font-weight: var(--rie-fw-bold);
  transition: all var(--rie-dur-base) var(--rie-ease);
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn.cmplz-accept:hover {
  background-color: var(--rie-color-azure);
  border-color: var(--rie-color-azure);
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:is(.cmplz-deny, .cmplz-view-preferences, .cmplz-save-preferences, .cmplz-manage-options):hover {
  color: var(--rie-color-white);
  background-color: var(--rie-color-azure);
  border-color: var(--rie-color-azure);
}
body .cmplz-cookiebanner .cmplz-buttons .cmplz-btn:focus-visible,
body .cmplz-cookiebanner .cmplz-links .cmplz-link:focus-visible {
  outline: 2px solid transparent;
  outline-offset: 2px;
  box-shadow: var(--rie-shadow-focus);
}
body .cmplz-cookiebanner .cmplz-links .cmplz-link { font-weight: var(--rie-fw-bold); text-decoration: none; }
body .cmplz-cookiebanner .cmplz-links .cmplz-link:hover { color: var(--rie-color-azure); text-decoration: underline; }
/* The floating "Manage consent" tab is replaced by the footer's "Cookie settings" button.
   Complianz only reacts to `button.cmplz-manage-consent`, so that button carries the class
   too (plus .rie-footer__cookie): hide every copy EXCEPT the footer's. */
body .cmplz-manage-consent:not(.rie-footer__cookie) { display: none; }

/* ===========================================================================
   4. reCAPTCHA — hide the badge, show the required notice instead
   =========================================================================== */
.grecaptcha-badge { visibility: hidden; }

.rie-recaptcha-note {
  margin: var(--rie-space-4) 0 0;
  color: var(--rie-color-muted);
  font-family: var(--rie-font);
  font-size: var(--rie-fs-sm);
  line-height: var(--rie-lh-sm);
}
.rie-recaptcha-note a {
  color: var(--rie-color-royal);
  font-weight: var(--rie-fw-bold);
  text-decoration: none;
}
.rie-recaptcha-note a:hover { color: var(--rie-color-azure); text-decoration: underline; }
/* The note prints after the form, so on a tint band it sits on the band (4.31:1 in #717171). */
.rie-section--tint .rie-recaptcha-note { color: var(--rie-color-text); }
:is(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout) .rie-recaptcha-note,
:is(.rie-on-dark, .rie-section--navy, .rie-section--ink, .rie-callout) .rie-recaptcha-note a { color: var(--rie-color-white); }

/* ===========================================================================
   5. ALLY (pojo-accessibility) — one skip link only: the child theme prints .rie-skip
   Only where it does (the Phase 2 header): until then Ally's link is the page's only
   skip link and stays (docs/04 Q29).
   =========================================================================== */
body:has(.rie-skip) :is(.ea11y-skip-to-content-link, .ea11y-skip-to-content-backdrop) { display: none; }

/* The Events Calendar, "Latest past events" list: TEC gives each row -21px side margins (a grid
   gutter trick) that pushed the page 4–6 px wider than phones and tablets (Phase 8, WCAG 1.4.10). */
body .tribe-events .tribe-events-calendar-latest-past__event.tribe-common-g-row {
  margin-inline: 0;
}