/* Accessibility panel (Grapple kit a11y, ported 2026-10-28): grapple/css/a11y-panel.css.tmpl with
   the prefix rh-, plus Michael's seven tokens. The panel builds its own markup; contrast modes are
   derived by the script, so no per-client contrast rules are needed. */
:root{
  --rh-a11y-ink:#0A0909; --rh-a11y-paper:#FFFFFF; --rh-a11y-text:#23201E; --rh-a11y-muted:#6E6862;
  --rh-a11y-line:#D8D1C6; --rh-a11y-display:'Raleway',Georgia,serif;
  --rh-a11y-body:'Montserrat',-apple-system,Helvetica,Arial,sans-serif;
}
/* ==========================================================================
   Grapple · accessibility settings. Generated from grapple/css/a11y-panel.css.tmpl
   (cssbuild.py --layer a11y on a site, grapple/kit/a11y/mockup_bundle.py for a
   client's mockups). Loaded after the project's adapt.css, before its page styles.
   The panel's markup and script are one module, grapple/kit/a11y/a11y-panel.js, the
   same on the site and in the mockups; the settings are classes on <html>, set from
   localStorage in <head> before first paint. Every panel rule states its own type,
   spacing and backgrounds, so it looks the same with or without a site's resets.

   The panel takes its look from the design through SEVEN tokens the project maps
   in its adapt.css (Steve: `.sc-site { --sc-a11y-ink: var(--sc-ink); ... }`):
     --rh-a11y-ink      dark ink (text, filled buttons)      fallback #111111
     --rh-a11y-paper    light paper (panel background)       fallback #ffffff
     --rh-a11y-text     body text colour                     fallback #333333
     --rh-a11y-muted    secondary text, legends              fallback #595959
     --rh-a11y-line     hairlines between groups             fallback #d6d3cd
     --rh-a11y-display  display font stack (labels)          fallback system-ui
     --rh-a11y-body     body font stack                      fallback system-ui

   Settings that depend on the design (which tokens the contrast mode darkens, which
   classes "readable" also touches, which links "underline" leaves alone, the
   reveal-on-scroll class under reduced motion) live in the project's adapt.css.
   Prefix rh-.
   ========================================================================== */

.rh-site .rh-a11y__open {
  position: fixed; left: 16px; bottom: 16px; z-index: 70;
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 16px 0 12px;
  background: var(--rh-a11y-ink, #111111); color: var(--rh-a11y-paper, #ffffff); border: 1px solid var(--rh-a11y-paper, #ffffff);
  font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 600; font-size: 12px; letter-spacing: .2em; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.rh-site .rh-a11y__open svg { width: 24px; height: 24px; }
.rh-site .rh-a11y__open:focus-visible { outline: 3px solid var(--rh-a11y-ink, #111111); outline-offset: 3px; box-shadow: 0 0 0 3px var(--rh-a11y-paper, #ffffff); }
/* The on badge: a check in the paper on the button's corner while any setting is on (the
   device's contrast included), and ", settings on" in the button's name. */
.rh-site .rh-a11y__badge { position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 50%; background: var(--rh-a11y-paper, #ffffff); color: var(--rh-a11y-ink, #111111); border: 2px solid var(--rh-a11y-ink, #111111); }
.rh-site .rh-a11y__badge svg { width: 12px; height: 12px; }
.rh-site .rh-a11y__badge[hidden], .rh-site .rh-a11y__on[hidden] { display: none; }
.rh-site .rh-a11y__on { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* Where the visitor put the button (bottom left unless chosen); the panel opens on its side.
   !important: a site's own placement (above a phone call bar) moves only the default. */
html.rh-a11y-pos-br .rh-site .rh-a11y__open, html.rh-a11y-pos-mr .rh-site .rh-a11y__open { left: auto !important; right: 16px !important; }
/* the middle of the edge only where there is room beside the text; on a phone it would sit on the
   words, so there a middle choice keeps to the bottom of its side and is not offered */
@media (min-width: 641px) { html.rh-a11y-pos-ml .rh-site .rh-a11y__open, html.rh-a11y-pos-mr .rh-site .rh-a11y__open { top: 50% !important; bottom: auto !important; transform: translateY(-50%); } }
@media (max-width: 640px) { .rh-site .rh-a11y__pos label:has(input[value="ml"]), .rh-site .rh-a11y__pos label:has(input[value="mr"]) { display: none; } }
html.rh-a11y-pos-hide .rh-site .rh-a11y__open { display: none !important; }
html.rh-a11y-pos-br .rh-site .rh-a11y__panel, html.rh-a11y-pos-mr .rh-site .rh-a11y__panel { margin: auto 16px 16px auto; }
@media (max-width: 640px) { .rh-site .rh-a11y__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .rh-site .rh-a11y__open { padding: 0; width: 48px; justify-content: center; } }
.rh-site .rh-a11y__panel {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); overflow: auto;
  margin: auto auto 16px 16px; padding: 28px 28px 24px; border: 0; background: var(--rh-a11y-paper, #ffffff); color: var(--rh-a11y-text, #333333);
  box-shadow: 0 24px 70px rgba(0,0,0,.28); font-family: var(--rh-a11y-body, system-ui, sans-serif); font-size: 16px;
  line-height: 1.7; text-align: left;
}
.rh-site .rh-a11y__panel::backdrop { background: rgba(17,17,17,.45); }
.rh-site .rh-a11y__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 18px; }
.rh-site .rh-a11y__title { font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 500; font-size: 18px !important; line-height: 1.08; letter-spacing: .12em; text-transform: uppercase; color: var(--rh-a11y-ink, #111111); margin: 0; }
.rh-site .rh-a11y__close { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; background: transparent; color: var(--rh-a11y-ink, #111111); cursor: pointer; }
.rh-site .rh-a11y__close svg { width: 14px; height: 14px; }
.rh-site .rh-a11y__group { min-width: 0; border: 0; border-top: 1px solid var(--rh-a11y-line, #d6d3cd); margin: 0; padding: 16px 0 10px; }
.rh-site .rh-a11y__group legend, .rh-site .rh-a11y__legend { font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 600; font-size: 12px; line-height: 20px; letter-spacing: .22em; text-transform: uppercase; color: var(--rh-a11y-muted, #595959); padding: 0; margin: 0 0 10px; float: left; width: 100%; }
.rh-site .rh-a11y__sizes { display: flex; gap: 8px; clear: both; }
.rh-site .rh-a11y__sizes label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; margin: 0; border: 1px solid var(--rh-a11y-ink, #111111); color: var(--rh-a11y-ink, #111111); cursor: pointer; font-size: 14px; font-weight: 500; line-height: 20px; }
.rh-site .rh-a11y__sizes label:has(input:checked) { background: var(--rh-a11y-ink, #111111); color: var(--rh-a11y-paper, #ffffff); }
.rh-site .rh-a11y__sizes label:has(input:focus-visible) { outline: 2px solid var(--rh-a11y-ink, #111111); outline-offset: 3px; }
.rh-site .rh-a11y__opt { clear: both; display: flex; align-items: center; gap: 12px; min-height: 44px; margin: 0; cursor: pointer; color: var(--rh-a11y-ink, #111111); font-size: 14px; font-weight: 500; line-height: 20px; }
/* The controls' marks: each input sits out of sight and its mark follows the label's colour, so
   a selected (filled) option turns its mark to paper. Off is an empty box or ring; on is a check or
   a dot, both drawn with borders so they survive forced colours. */
.rh-site .rh-a11y__opt, .rh-site .rh-a11y__sizes label { position: relative; }
.rh-site .rh-a11y__opt input, .rh-site .rh-a11y__sizes input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.rh-site .rh-a11y__mark { flex: none; box-sizing: border-box; width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid currentColor; background: transparent; }
.rh-site .rh-a11y__sizes .rh-a11y__mark { border-radius: 50%; }
.rh-site .rh-a11y__opt input:checked + .rh-a11y__mark { background: currentColor; }
.rh-site .rh-a11y__opt input:checked + .rh-a11y__mark::after { content: ""; width: 5px; height: 10px; margin-top: -3px; border: solid var(--rh-a11y-paper, #ffffff); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.rh-site .rh-a11y__sizes input:checked + .rh-a11y__mark::after { content: ""; width: 0; height: 0; border: 4px solid currentColor; border-radius: 50%; }
.rh-site .rh-a11y__opt input:focus-visible + .rh-a11y__mark { outline: 2px solid currentColor; outline-offset: 3px; }
@media (forced-colors: active) {
  .rh-site .rh-a11y__opt input, .rh-site .rh-a11y__sizes input { position: static; opacity: 1; width: 20px; height: 20px; pointer-events: auto; }
  .rh-site .rh-a11y__mark { display: none; }
}
/* A narrow panel (a phone): the options of a row carry their state in their fill alone, so three
   fit on one line without wrapping (Contrast's "High, light"). */
@media (max-width: 480px) { .rh-site .rh-a11y__sizes .rh-a11y__mark { display: none; } .rh-site .rh-a11y__sizes label { padding: 0 6px; } }
/* Narrower still (320): Contrast's three longer names stack, one full-width option each. */
@media (max-width: 360px) { .rh-site .rh-a11y__contrast .rh-a11y__sizes { flex-direction: column; } }
.rh-site .rh-a11y__note { font-size: 14px; line-height: 1.7; color: var(--rh-a11y-muted, #595959); margin: 14px 0 18px; }
/* Quick start: three profiles, each a toggle listing what it turns on, On while all of it is. */
.rh-site .rh-a11y__plist { clear: both; display: grid; gap: 8px; }
.rh-site .rh-a11y__plist button {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; align-items: center; min-height: 48px; padding: 10px 14px; margin: 0;
  border: 1px solid var(--rh-a11y-ink, #111111); background: transparent; color: var(--rh-a11y-ink, #111111); text-align: left; cursor: pointer;
  font-family: var(--rh-a11y-body, system-ui, sans-serif); font-size: 14px; line-height: 1.3;
}
.rh-site .rh-a11y__plist button[aria-pressed="true"] { background: var(--rh-a11y-ink, #111111); color: var(--rh-a11y-paper, #ffffff); }
.rh-site .rh-a11y__plist b { font-weight: 600; font-size: 15px; }
.rh-site .rh-a11y__plist small { grid-column: 1; font-size: 13px; line-height: 1.45; }
.rh-site .rh-a11y__state { grid-column: 2; grid-row: 1 / span 2; font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; }

/* The Accessibility button: where it sits, five choices in two columns; the shortcuts line. */
.rh-site .rh-a11y__pos { display: grid; grid-template-columns: repeat(2, 1fr); }
.rh-site .rh-a11y__pos label:last-child { grid-column: 1 / -1; }
.rh-site .rh-a11y__hidden-note[hidden] { display: none; }
/* Keyboard hints: with the stronger focus outline on, while the visitor moves with the keyboard. */
.rh-a11y__hints { display: none; }
html.rh-a11y-focus.rh-a11y-kbd .rh-a11y__hints {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 69;
  max-width: calc(100vw - 160px); padding: 10px 18px; pointer-events: none; background: var(--rh-a11y-ink, #111111); color: var(--rh-a11y-paper, #ffffff);
  font-family: var(--rh-a11y-body, system-ui, sans-serif); font-size: 13px; line-height: 20px; box-shadow: 0 8px 24px rgba(0,0,0,.18);
}

/* Contrast: the line that says the device chose High, light. */
.rh-site .rh-a11y__why { clear: both; margin: 8px 0 0; font-size: 14px; line-height: 1.6; color: var(--rh-a11y-muted, #595959); }
.rh-site .rh-a11y__why b { color: var(--rh-a11y-ink, #111111); font-weight: 600; }
.rh-site .rh-a11y__contrast[hidden] { display: none; }
.rh-site .rh-a11y__actions { display: flex; gap: 10px; justify-content: flex-end; }
.rh-site .rh-a11y__actions button, .rh-site .rh-a11y__speak button {
  min-height: 48px; padding: 0 24px; border: 1px solid var(--rh-a11y-ink, #111111); background: transparent; color: var(--rh-a11y-ink, #111111); cursor: pointer;
  font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 600; font-size: 12px; line-height: 1.7; letter-spacing: .22em; text-transform: uppercase;
}
.rh-site .rh-a11y__done, .rh-site .rh-a11y__read { background: var(--rh-a11y-ink, #111111) !important; color: var(--rh-a11y-paper, #ffffff) !important; }
/* Every button and link in the panel: a ring in the design's ink (a filled button's own
   colour would be paper on paper). The stronger-focus setting still wins. */
.rh-site .rh-a11y__panel :is(button, a):focus-visible { outline: 2px solid var(--rh-a11y-ink, #111111); outline-offset: 3px; }

/* ---------- Listen: the page read aloud. The group is hidden unless the browser can
   speak (html.rh-can-speak); Read (filled) and Stop (outlined) look like the actions. */
.rh-site .rh-a11y__listen[hidden], .rh-site .rh-a11y__jump[hidden] { display: none; }
.rh-site .rh-a11y__speak { display: flex; gap: 8px; clear: both; }
.rh-site .rh-a11y__speak button { flex: 1; padding: 0 12px; }
.rh-site .rh-a11y__speak button:disabled { opacity: .45; cursor: default; }
.rh-site .rh-a11y__rate { clear: both; min-width: 0; border: 0; margin: 14px 0 0; padding: 0; }
.rh-site .rh-a11y__status { min-height: 1.7em; margin: 10px 0 0; font-size: 14px; line-height: 1.7; color: var(--rh-a11y-muted, #595959); }
/* The block being read: the design's ink on a paper halo, so it shows on a photograph. */
.rh-site .rh-speaking { outline: 3px solid var(--rh-a11y-ink, #111111) !important; outline-offset: 4px; box-shadow: 0 0 0 7px var(--rh-a11y-paper, #ffffff) !important; }

/* ---------- Something not working?: one sentence, Report a problem (outlined, like Stop) and
   the statement (a quiet underlined link). Hidden until the panel finds the site's Accessibility page. */
.rh-site .rh-a11y__help[hidden] { display: none; }
.rh-site .rh-a11y__help p { clear: both; margin: 0 0 12px; font-size: 14px; line-height: 1.6; color: var(--rh-a11y-text, #333333); }
.rh-site .rh-a11y__help .rh-a11y__speak a {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 12px;
  border: 1px solid var(--rh-a11y-ink, #111111); color: var(--rh-a11y-ink, #111111); text-decoration: none; text-align: center;
  font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 600; font-size: 12px; line-height: 1.4; letter-spacing: .22em; text-transform: uppercase;
}
.rh-site .rh-a11y__help .rh-a11y__speak a.rh-a11y__statement { border-color: transparent; text-decoration: underline; text-underline-offset: .25em; }

/* ---------- Read selected text (opt-in): a bar with the count, Listen and Close, at the bottom above
   anything fixed there, or at the top when the selection is down there (the script places it). */
.rh-site .rh-a11y__selbar {
  position: fixed; left: 50%; transform: translateX(-50%); z-index: 80; display: flex; align-items: center; gap: 14px;
  width: min(560px, calc(100vw - 32px)); min-height: 60px; padding: 8px 10px 8px 18px; margin: 0; box-sizing: border-box;
  background: var(--rh-a11y-ink, #111111); color: var(--rh-a11y-paper, #ffffff); box-shadow: 0 12px 34px rgba(0,0,0,.28);
  font-family: var(--rh-a11y-body, system-ui, sans-serif); font-size: 14px; font-weight: 500; line-height: 1.4;
}
.rh-site .rh-a11y__selbar[hidden] { display: none; }
.rh-site .rh-a11y__selcount { flex: 1; }
.rh-site .rh-a11y__sellisten {
  min-height: 44px; padding: 0 16px; margin: 0; border: 0; cursor: pointer; background: var(--rh-a11y-paper, #ffffff); color: var(--rh-a11y-ink, #111111);
  font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 600; font-size: 12px; line-height: 1; letter-spacing: .2em; text-transform: uppercase;
}
.rh-site .rh-a11y__selclose { flex: none; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; margin: 0; border: 1px solid currentColor; background: transparent; color: var(--rh-a11y-paper, #ffffff); cursor: pointer; }
.rh-site .rh-a11y__selclose svg { width: 14px; height: 14px; }
.rh-site .rh-a11y__selbar button:focus-visible { outline: 2px solid var(--rh-a11y-paper, #ffffff); outline-offset: 3px; }

/* ---------- Page outline: Menu, Main content and Footer as buttons, then the page's h2s as
   links, each with its h3s behind a +N toggle (shown from three headings, or two areas). */
.rh-site .rh-a11y__marks { clear: both; display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 10px; padding: 0; }
.rh-site .rh-a11y__marks[hidden], .rh-site .rh-a11y__sublabel[hidden], .rh-site .rh-a11y__subs[hidden] { display: none; }
.rh-site .rh-a11y__marks li { margin: 0; padding: 0; }
.rh-site .rh-a11y__marks button {
  min-height: 44px; padding: 0 14px; border: 1px solid var(--rh-a11y-ink, #111111); background: transparent; color: var(--rh-a11y-ink, #111111);
  font-family: var(--rh-a11y-body, system-ui, sans-serif); font-size: 14px; font-weight: 500; line-height: 20px; cursor: pointer;
}
.rh-site .rh-a11y__sublabel {
  clear: both; margin: 6px 0 4px; font-family: var(--rh-a11y-display, system-ui, sans-serif); font-size: 12px; font-weight: 600;
  line-height: 20px; letter-spacing: .18em; text-transform: uppercase; color: var(--rh-a11y-muted, #595959);
}
.rh-site .rh-a11y__jumps, .rh-site .rh-a11y__subs { clear: both; list-style: none; margin: 0; padding: 0; }
.rh-site .rh-a11y__jumps li { margin: 0; padding: 0; }
.rh-site .rh-a11y__row { display: flex; align-items: center; gap: 10px; }
.rh-site .rh-a11y__jumps a {
  display: flex; align-items: center; min-height: 44px; color: var(--rh-a11y-ink, #111111);
  font-size: 14px; font-weight: 500; line-height: 20px; text-decoration: underline; text-underline-offset: .2em;
}
.rh-site .rh-a11y__subs a { position: relative; padding-left: 22px; font-weight: 400; }
.rh-site .rh-a11y__subs a::before { content: ""; position: absolute; left: 6px; top: 50%; width: 9px; border-top: 1px solid var(--rh-a11y-muted, #595959); }
.rh-site .rh-a11y__more {
  flex: none; margin-left: auto; min-width: 44px; min-height: 44px; padding: 0 8px; border: 1px solid var(--rh-a11y-line, #d6d3cd);
  background: transparent; color: var(--rh-a11y-muted, #595959); font-size: 12px; line-height: 1; cursor: pointer;
}

/* Astra's skip link: keep it, make it visible and on top when focused. */
.rh-site .skip-link.screen-reader-text:focus {
  z-index: 100000; background: var(--rh-a11y-paper, #ffffff); color: var(--rh-a11y-ink, #111111); padding: 14px 22px;
  font-family: var(--rh-a11y-display, system-ui, sans-serif); font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  outline: 2px solid var(--rh-a11y-ink, #111111); outline-offset: 2px;
}

/* ---------- the settings */
/* Text size: mockcss.py writes every font-size as calc(X * var(--rh-fs, 1)). */
html.rh-a11y-text-1 { --rh-fs: 1.15; }
html.rh-a11y-text-2 { --rh-fs: 1.3; }
/* Contrast, both modes (html.rh-a11y-contrast, with -light or -dark beside it): one flat
   60% scrim under all cover text, no photo filters. The modes' colours are derived from the
   page's own stylesheet by a11y-panel.js; adapt.css adds rules only for colours it cannot
   reach (an inline style), under html.rh-a11y-contrast-light or -dark. */
html.rh-a11y-contrast .rh-site .wp-block-cover__background { background-image: none !important; background-color: rgba(0,0,0,.6) !important; opacity: 1 !important; display: block !important; }
html.rh-a11y-contrast .rh-site img { filter: none !important; }
/* Underline all links, the default: only where the page has no rule of its own for the setting
   (a11y-panel.js marks html.rh-a11y-ul-default then; a Grapple build keeps its own in adapt.css,
   with its own exclusions). Every link on the page except what is not read as a text link:
   buttons, the logo, a link that is only an image, Spectra's image tiles, the header's own menu,
   IDX apps and the panel. Written for the markup Astra, Spectra and Kadence print. */
html.rh-a11y-underline.rh-a11y-ul-default .rh-site a:not(
  .wp-block-button__link, .uagb-buttons-repeater, .kb-button, .kt-button, .ast-button, .ast-custom-button-link, [role="button"],
  .custom-logo-link, .wp-block-uagb-image--layout-overlay-link, .spectra-container-link-overlay, :has(> img:only-child),
  #masthead .menu-link, .ast-mobile-popup-drawer .menu-link, .rh-a11y__open, :is([class*="sidx"], [id^="sidx"], [class*="IDX-"], .rh-a11y, .rh-3p) a),
html.rh-a11y-underline.rh-a11y-ul-default .rh-site a:is(.uagb-post__title a, .uagb-ifb-title-wrap a) {
  text-decoration: underline !important; text-decoration-thickness: max(1px, .07em) !important; text-underline-offset: .2em !important;
}
/* Readable type: medium-weight headings, regular body text. The project adds its own
   heading-like classes (eyebrows, footer headings) at higher specificity. */
html.rh-a11y-readable .rh-site :is(h1, h2, h3) { font-weight: 500 !important; letter-spacing: .02em !important; }
html.rh-a11y-readable .rh-site :is(p, li) { font-weight: 400 !important; }
/* Readable font: Atkinson Hyperlegible (self-hosted; a11y-panel.js declares it beside
   itself, so it downloads only when this setting is on), then the design's own stack.
   Third-party zones and icon fonts keep theirs. */
html.rh-a11y-font .rh-site :is(p, li, dt, dd, blockquote, figcaption, cite, td, th, caption, label, legend, summary, a, span, strong, em, b, small, button, input, select, textarea):not(.rh-3p, .rh-3p *, [class*="icon"], [class*="dashicons"], [class*="fa-"]) { font-family: "Atkinson Hyperlegible", var(--rh-a11y-body, system-ui, sans-serif) !important; }
html.rh-a11y-font .rh-site :is(h1, h2, h3, h4, h5, h6):not(.rh-3p *) { font-family: "Atkinson Hyperlegible", var(--rh-a11y-display, system-ui, sans-serif) !important; }
/* Reading guide: a clear band about three lines tall that follows the pointer or focus,
   the page above and below it dimmed. Never takes a click; no movement under reduced motion. */
.rh-a11y__guide { display: none; }
html.rh-a11y-guide .rh-a11y__guide { display: block; position: fixed; inset: 0; z-index: 2147483000; pointer-events: none; }
.rh-a11y__guide-above, .rh-a11y__guide-below { position: absolute; left: 0; right: 0; background: rgba(17, 17, 17, .3); pointer-events: none; }
.rh-a11y__guide-above { top: 0; height: var(--rh-guide-top, 40vh); }
.rh-a11y__guide-below { top: calc(var(--rh-guide-top, 40vh) + var(--rh-guide-h, 84px)); bottom: 0; }
html:not(.rh-a11y-motion) .rh-a11y__guide-above, html:not(.rh-a11y-motion) .rh-a11y__guide-below { transition: top 90ms linear, height 90ms linear; }
@media (prefers-reduced-motion: reduce) { .rh-a11y__guide-above, .rh-a11y__guide-below { transition: none !important; } }
/* Text spacing at the WCAG 1.4.12 values. */
html.rh-a11y-spacing .rh-site :is(p, li, dd, blockquote) { line-height: 1.9 !important; letter-spacing: .12em !important; word-spacing: .16em !important; }
/* A heavy focus ring everywhere, blue with a white halo so it shows on any colour. */
html.rh-a11y-focus .rh-site :focus-visible { outline: 3px solid #0b57d0 !important; outline-offset: 3px !important; box-shadow: 0 0 0 6px #ffffff !important; }
/* Reduced motion, on request or from the OS setting. */
html.rh-a11y-motion *, html.rh-a11y-motion *::before, html.rh-a11y-motion *::after {
  animation-duration: .001ms !important; animation-iteration-count: 1 !important;
  transition-duration: .001ms !important; scroll-behavior: auto !important;
}
html.rh-a11y-motion .has-parallax { background-attachment: scroll !important; }
@media (prefers-reduced-motion: reduce) {
  .rh-site .has-parallax { background-attachment: scroll !important; }
}

/* Square button at every width (Curtis, 2026-10-28: "a small square" instead of the labelled
   rectangle). The kit's phone treatment, applied everywhere. The word "Accessibility" stays in the
   button's accessible name for screen readers; it is only hidden from view. */
.rh-site .rh-a11y__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.rh-site .rh-a11y__open { padding: 0; width: 48px; justify-content: center; }