/* ===========================================================================
   DRHP 2026 header — visual layer, matched to the Figma handoff states.
   All colours are the 7 pixel-sampled tokens; every pair's measured ratio is
   noted where it is used. Focus rings: with outline-offset 2px the ring's
   adjacent colour is the SURFACE BEHIND the control — gold on dark surfaces
   (8.09:1 vs the bar), purple on light ones.
   =========================================================================== */

:root {
  --d26-ink:        #3f124d;  /* white on it 14.95:1 */
  --d26-purple:     #5a246c;  /* white on it 11.03:1 · on white 11.03:1 */
  --d26-soft:       #ede2f2;  /* purple on it 8.81:1 · ink on it 11.93:1 */
  --d26-band:       #f7f3fa;  /* ink on it 13.9:1 */
  --d26-gold:       #f2b43a;  /* ink on it 8.09:1 */
  --d26-gold-hover: #d59218;  /* ink on it 5.66:1 */
  --d26-red:        #b42318;  /* white on it 6.57:1 */
  --d26-red-hover:  #8b1810;  /* white on it 9.39:1 */
  --d26-white:      #ffffff;
  --d26-grey:       #5f5866;  /* 6.9:1 on white — hint / purpose text */
  --d26-text:       #241a29;  /* frame --color/text — 16.9:1 on white */
  --d26-muted:      #625568;  /* frame --color/text-muted — 6.95:1 on white */
  --d26-border:     #d9ccde;  /* frame --color/border — dropdown card edge */
  --d26-ring-w: 4px;                             /* state sheet 132:296–328: rings are a 4px inside stroke */
}

/* The site's locally-hosted Inter subsets omit U+2192, so the dropdown's
   "→" arrows fell back to the system font. This 948-byte self-hosted subset
   carries the one glyph, composed into Inter via unicode-range. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../fonts/inter-600-arrow.woff2') format('woff2');
  unicode-range: U+2192;
}

/* ---------------------------------------------------------------- shell -- */
.drhp26 {
  font-family: Montserrat, Inter, system-ui, sans-serif;
  box-shadow: 0 2px 10px rgba(63, 18, 77, 0.25);
}
/* Sticky lives on #masthead (the header is its only child, so sticky on the
   header itself has zero travel); body{overflow-x:clip} keeps body from being
   a scroll container. Both verified necessary together. */
.drhp-header-2026-active #masthead { position: sticky; top: 0; z-index: 1000; }
/* The parent's headroom JS still stamps scroll classes on #masthead, and its
   CSS reacts: position:fixed on .headroom, and a logo grown to 70px on
   .headroom--not-top — which wrapped our Menu chip onto a second row and made
   the sticky header jump 141px → 209px mid-scroll. Pin both. */
.drhp-header-2026-active .site-header.headroom,
.drhp-header-2026-active .site-header.headroom--not-top {
  position: sticky;
  top: 0;
}
/* The parent's headroom CSS re-sizes the logo once .headroom--not-top is
   stamped (its `.headroom--not-top .custom-logo-link img` out-specifies the
   brand crop below and blew the image up to 258.9×64 on scroll). Pin the full
   crop geometry — not just max-height — in every headroom state, header and
   footer alike, so the wordmark is identical at rest and scrolled. */
body.drhp-header-2026-active.wp-custom-logo .headroom--not-top .custom-logo-link img,
body.drhp-header-2026-active.wp-custom-logo .custom-logo-link img {
  width: 112.62%;
  max-width: none;
  height: auto;
  max-height: none;
  margin-left: -12.49%;
  transition: none;
}
body.drhp-header-2026-active { overflow-x: clip; }

/* ------------------------------------------------------------------ rail -- */
.drhp26-rail {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 4px 16px;
  background: var(--d26-ink);
  /* States 1+2 render the rail 68px (py-10, no hairline); state 3's 64px is
     the outlier. Content capped at the mockup's 1344px and centred on wider
     screens; the ink background stays full-bleed. */
  padding: 10px max(48px, calc((100% - 1344px) / 2));
}
.drhp26-rail__list { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 18px; list-style: none; margin: 0; padding: 0; }
.drhp26-rail__list a {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; min-width: 44px; padding: 0 8px;   /* handoff acceptance §6: ≥44×44 (frame 131:221 draws FR at 34; the extra 10px is invisible at rest) */
  border-radius: 8px;
  color: var(--d26-white);                        /* 14.95:1 */
  font: 600 14px/20px Inter, system-ui, sans-serif; text-decoration: none;
}
/* State sheet 132:294 draws nav-link hover as primary fill + underline; the
   client asked for no underline on header hover, so the fill alone carries it. */
.drhp26-rail__list a:hover { background: var(--d26-purple); text-decoration: none; }
/* Emphasised first pathway — canvas pill, 162px fixed, per the frame. */
.drhp26-rail__pill a {
  background: var(--d26-band);
  color: var(--d26-purple);                       /* 9.7:1 on canvas */
  border-radius: 8px;
  min-width: 162px; padding: 0 5px; white-space: nowrap;   /* 162 at rest (frame); grows under WCAG 1.4.12 text-spacing instead of wrapping (audit, 4 Sept 2026) */
}
.drhp26-rail__pill a:hover { background: var(--d26-white); }
/* FR's natural box (31px) is narrower than its 44px target; left-align the
   label so its ink sits at the frame position while the target stays 44px. */
.drhp26-rail__list a[lang="fr"] { justify-content: flex-start; }
.drhp26-rail__actions { display: flex; align-items: center; gap: 18px; }

/* ActionQuickExit (6:4): red fill, no border, gap 10, radius 8, Label/M. */
.drhp26-qe {
  text-transform: none; letter-spacing: normal;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; min-width: 44px; padding: 0 16px;
  background: var(--d26-red); color: var(--d26-white);   /* 6.57:1 */
  border: 0;
  border-radius: 8px;
  font: 600 14px/20px Inter, system-ui, sans-serif;
  cursor: pointer;
}
.drhp26-qe:hover { background: var(--d26-red-hover); }  /* state sheet: darker red · 9.39:1 */
/* The parent theme teals button:hover text everywhere — pin the label in BOTH
   the header and footer scopes (the footer band chip has no .drhp26 ancestor). */
.drhp26 .drhp26-qe:hover,
.drhp26f .drhp26-qe:hover { color: var(--d26-white); text-decoration: none; }
.drhp26-qe svg { flex: 0 0 auto; }

/* ActionDonate (6:8): gold fill, no border, radius 8, Label/M, accent-text. */
.drhp26-donate {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; min-width: 44px; padding: 0 16px;
  background: var(--d26-gold); color: var(--d26-text) !important;  /* 8.7:1 — !important defends against the parent's teal a:hover */
  border-radius: 8px;
  font: 600 14px/20px Inter, system-ui, sans-serif;
  text-decoration: none;
}
.drhp26-donate:hover { background: var(--d26-gold-hover); }  /* state sheet: darker accent · 5.66:1 */

/* ------------------------------------------------------------------- bar -- */
.drhp26-bar {
  display: flex; align-items: center;
  gap: 12px;                                      /* frame bar gap */
  background: var(--d26-ink);
  /* Frame draws a fixed 92px bar with items centred (the 64px brand box no
     longer fits a padding-derived height). */
  min-height: 92px;
  padding: 0 max(48px, calc((100% - 1344px) / 2));
  box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.08);   /* frames 131:148 / 131:225 */
}
.drhp26-bar__brand { flex: 0 0 auto; display: flex; align-items: center; }

/* ---------------------------------------------------------------- brand --
   The logo file (530×131) carries 62px of blank space on its left edge —
   11.7% of its width — against 15px on the right, so rendered raw it sits
   ~23px inside the content edge. Every frame instance crops that away: the
   Figma logo box is 194×54 (centred in a 64px brand box) with the image at
   width 112.62% / left −12.49%, clipped, putting the wordmark's ink 2px
   inside the content edge at 185×41. Header and footer are identical in all
   four artboards. Revisit these numbers if the logo file is ever replaced. */
.drhp26-bar__brand .custom-logo-link,
.drhp26f-brand .custom-logo-link {
  display: flex; align-items: center;
  width: 194px; height: 64px;
  overflow: hidden;
}
.drhp26-bar__brand .custom-logo,
.drhp26f-brand .custom-logo {
  display: block; flex: 0 0 auto;
  width: 112.62%; max-width: none; height: auto;
  margin-left: -12.49%;
}
/* The frame's 194px logo box fits one row down to 340px (194 + 12 gap + the
   102px Menu chip + 32 padding), so it is kept at full size on every common
   phone — 360 and 375px devices included. Only below that does the box
   narrow; the crop is box-relative, so the composition is unchanged.
   Measured one-row minimum is 341px; 349 leaves margin for font-metric
   variance across browsers. */
@media (max-width: 349px) {
  .drhp26-bar__brand .custom-logo-link { width: 160px; }
}

.drhp26-nav { flex: 1 1 auto; }
.drhp26-nav__list {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: 2px 12px; list-style: none; margin: 0; padding: 0;
}
.drhp26-nav__item { position: relative; }

.drhp26-nav__link,
.drhp26-disclosure {
  text-transform: none; letter-spacing: normal;
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 8px;
  background: transparent; border: 0; border-radius: 8px;
  color: var(--d26-white);                        /* 14.95:1 */
  font: 600 14px/20px Inter, system-ui, sans-serif;   /* Label/M per frame */
  text-decoration: none; cursor: pointer;
}
.drhp26-nav__link:hover,
.drhp26-disclosure:hover {
  background: var(--d26-purple);                  /* white on it 11.03:1 */
  text-decoration: none;                          /* client: no hover underline */
}
/* The parent's bare a:hover teals link text — pin the sheet's white label
   (and the pill's purple one). */
.drhp26 .drhp26-nav__link:hover,
.drhp26 .drhp26-rail__list li:not(.drhp26-rail__pill) a:hover { color: var(--d26-white); }
.drhp26 .drhp26-rail__pill a:hover { color: var(--d26-purple); }
.drhp26-nav__link[aria-current="page"] {
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 2px;
}
/* Open trigger = soft chip with ink text, per state 2. */
.drhp26 .drhp26-disclosure[aria-expanded="true"] {
  background: var(--d26-soft);
  color: var(--d26-text);                         /* #241a29 per frame, 12.6:1 */
  text-decoration: none;
}
/* Desktop triggers carry no glyph (state 1/2); the +/− appears on mobile. */
.drhp26-disclosure__glyph { display: none; }

/* ---- Dropdown panel (state 2): label + purpose + arrowed rows ---- */
.drhp26-panel {
  position: absolute; top: calc(100% + 11px); left: 6px;   /* frame: panel at 704,147 (trigger 698, bottom 136) */
  width: 360px;
  background: var(--d26-white);
  border-radius: 14px;
  /* Inner 1px #d9ccde stroke (as Figma draws it) + the frame's drop shadow;
     an inset ring keeps the rows at the frame's exact 328px width. */
  box-shadow: inset 0 0 0 1px var(--d26-border), 0 12px 28px -8px rgba(31, 10, 36, 0.18);
  padding: 16px;
  z-index: 60;
}
.drhp26-nav__item:last-child .drhp26-panel,
.drhp26-nav__item:nth-last-child(2) .drhp26-panel { left: auto; right: 6px; }
/* Hover bridge: spans the 11px gap between trigger and panel so the pointer
   never leaves the control while travelling to it (WCAG 1.4.13 hoverable).
   Sized to stop exactly at the trigger's edge, so it can never swallow a click.
   Desktop only — the mobile panel is static, where this would overlay the
   trigger above it. */
@media (min-width: 1100px) {
  .drhp26-panel::before {
    content: ""; position: absolute; left: 0; right: 0; top: -11px; height: 11px;
  }
}
.drhp26-panel__head { padding: 0; }
.drhp26-panel__head .drhp26-panel__label {
  margin: 0;
  font: 600 14px/20px Inter, system-ui, sans-serif;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--d26-purple);                       /* 11.03:1 on white */
}
.drhp26-panel__purpose { margin: 4px 0 0; font: 400 13px/20px Inter, sans-serif; color: var(--d26-muted); }  /* 6.95:1 */
.drhp26-panel__list { display: grid; gap: 4px; list-style: none; margin: 4px 0 0; padding: 0; }
.drhp26-panel__list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 10px;
  border-radius: 8px;
  background: var(--d26-white);
  color: var(--d26-text);                         /* 16.9:1 */
  font: 400 16px/24px Inter, system-ui, sans-serif;
  text-decoration: none;
}
/* Client direction (3 Sept 2026): a hovered row looks like the priority row —
   soft fill, primary semibold text and a primary arrow — not the fill alone
   that state sheet 132:326 draws. Weight changes inside a full-width row, so
   nothing reflows. */
.drhp26-panel__list a:hover { background: var(--d26-soft); text-decoration: none; color: var(--d26-purple); font-weight: 600; }
.drhp26-panel__list a:hover .drhp26-arrow { color: var(--d26-purple); }
/* Client direction (3 Sept 2026): the soft fill is the HOVER state only. The
   row for the CURRENT page is filled primary with white semibold text and a
   white arrow — the look frame state 2 gave the View-all row — and keeps that
   fill under the pointer. Get Immediate Help (the frame's priority row) is an
   ordinary row at rest; a filled row anywhere in the menus means "you are here". */
.drhp26-panel__list a[aria-current="page"],
.drhp26-panel__list a[aria-current="page"]:hover {
  background: var(--d26-purple); color: var(--d26-white); font-weight: 600; text-decoration: none;   /* 11.03:1 */
}
.drhp26-panel__list a[aria-current="page"] .drhp26-arrow,
.drhp26-panel__list a[aria-current="page"]:hover .drhp26-arrow,
.drhp26-panel__list .drhp26-row--priority a[aria-current="page"] .drhp26-arrow { color: var(--d26-white); }   /* last selector outranks the priority arrow rule (0,3,1) */
@media (min-width: 1100px) {
  .drhp26-panel__list .drhp26-row--priority a { line-height: 24px; }   /* Body/M like its neighbours (the priority rule below is Label/L 16/22) */
  .drhp26-panel__list .drhp26-row--priority a:not([aria-current="page"]):not(:hover) {
    background: var(--d26-white); color: var(--d26-text); font-weight: 400;
  }
  .drhp26-panel__list .drhp26-row--priority a:not([aria-current="page"]):not(:hover) .drhp26-arrow { color: var(--d26-muted); }
}
.drhp26-arrow { color: var(--d26-muted); font: 600 16px/22px Inter, sans-serif; }  /* 6.95:1 */
.drhp26-row--priority a {
  background: var(--d26-soft);
  color: var(--d26-purple);                       /* 8.81:1 on soft */
  font: 600 16px/22px Inter, system-ui, sans-serif;   /* Label/L per frame 131:196 */
}
.drhp26-panel__list .drhp26-row--priority a .drhp26-arrow { color: var(--d26-purple); }
.drhp26-row--priority a:hover { background: var(--d26-soft); }

/* ---- Search / Menu / Close chip ---- */
.drhp26-search-toggle {
  text-transform: none; letter-spacing: normal;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; min-width: 44px; padding: 0 14px;   /* Action / Menu: 16px inset = 14px + the 2px border → 110×48 */
  background: var(--d26-soft); color: var(--d26-purple);   /* 8.81:1 */
  border: 2px solid var(--d26-soft); border-radius: 8px;   /* 132:302: hover border is 2px; invisible at rest */
  font: 600 14px/20px Inter, system-ui, sans-serif; cursor: pointer;
}
/* State sheet 132:302: soft-chip hover = canvas fill + stronger (#d9ccde) 2px border. */
.drhp26-search-toggle:hover { background: var(--d26-band); border-color: var(--d26-border); }
/* ☰ icon: the frame's exported 20×20 SVG (Figma 6:13 — three 1.8px round-capped
   lines on 4.5px centres), inline in the markup and coloured by currentColor.
   Replaced the CSS-bar drawing (15×2.2 on 5px centres) after the 4 Sept audit. */
.drhp26-chip-icon { flex: 0 0 auto; width: 20px; height: 20px; }

/* Search field focus (client, 4 Sept 2026): the 4px inside ring on the
   auto-focused field read as a heavy border against the frame's 1px #ddd.
   The sheet's global rule asks for ≥2px, so this one control takes a 2px
   primary edge (outline drawn inside over the 1px border); chips and links
   keep the 4px ring the state cards draw. Desktop and drawer fields alike. */
.drhp26 .drhp26-searchform input[type="search"]:focus-visible {
  outline-width: 2px !important;
  outline-offset: -2px !important;
}

/* No page scroll behind the open search panel (client, 4 Sept 2026); the
   panel itself scrolls (max-height / overflow-y below). */
html.drhp-search-open, html.drhp-search-open body { overflow: hidden; }
/* With the root's overflow hidden the sticky header no longer tracks a
   scrolled page, so while the panel is open the header is fixed at the top
   and the body takes its height as padding: nothing behind the panel moves,
   wherever the visitor was. */
html.drhp-search-open .drhp-header-2026-active #masthead { position: fixed; top: 0; left: 0; right: 0; }
html.drhp-search-open body.drhp-header-2026-active { padding-top: calc(var(--drhp26-header-h, 168px) - 8px); }

/* ---- Mega panel (state 3) ---- */
.drhp26-search {
  /* Out of the header's flow (4 Sept 2026): revealing the panel inside the
     sticky header grew its in-flow box by 550px, Chrome's scroll anchoring
     then shifted the page by that much and the header-height variable moved
     the hero — the content behind the panel jumped. Anchored under the bar
     (#masthead is the containing block), nothing behind it moves. */
  position: absolute; top: 100%; left: 0; right: 0;
  background: var(--d26-white);
  box-shadow: inset 0 1px 0 var(--d26-border);   /* frame 3 row 156: 1px seam under the bar */
  border-radius: 0 0 16px 16px;
  padding: 36px max(48px, calc((100% - 1344px) / 2)) 40px;
  max-height: calc(100dvh - 160px);
  overflow-y: auto;
}
.drhp26-search__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.drhp26-search__title { margin: 0; font: 700 24px/32px Montserrat, sans-serif; color: var(--d26-text); }  /* frame: 24px #241a29 */
.drhp26-search__hint { margin: 6px 0 0; font: 400 16px/24px Inter, sans-serif; color: var(--d26-muted); }  /* 6.9:1 */
.drhp26-search__close {
  text-transform: none; letter-spacing: normal;
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 48px; padding: 0 14px; flex: 0 0 auto;   /* frame 131:241: 16px inset = 14px + the 2px border → 142×48 */
  margin-top: 7px;                                /* frame: chip sits below the title cap line */
  background: var(--d26-soft); color: var(--d26-purple);   /* 8.81:1 */
  border: 2px solid var(--d26-soft); border-radius: 8px;   /* 132:302: 2px hover border */
  font: 600 14px/20px Inter, system-ui, sans-serif; cursor: pointer;
}   /* text-muted #625568 per 131:239 (was --d26-grey) */
.drhp26-search__close:hover { background: var(--d26-band); border-color: var(--d26-border); }
/* FormSimpleField (40:1125): 1px #ddd field, radius 8, 18/28 text, chip beside. */
.drhp26-searchform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 28px 0 0; max-width: 639px; }
.drhp26-searchform input[type="search"] {
  flex: 1 1 260px;
  min-height: 60px; padding: 0 16px;
  border: 1px solid #ddd; border-radius: 8px;
  font: 400 18px/28px Inter, sans-serif; color: #151515; background: var(--d26-white);
}
.drhp26-searchform input[type="search"]::placeholder { color: var(--d26-purple); opacity: 1; }  /* 11.03:1 */
.drhp26-searchform input[type="search"]:hover,
.drhp26 .drhp26-searchform input[type="search"]:focus { border-color: var(--d26-purple); }   /* :focus: the parent theme sets #7100e2 here; it sits under the ring */
.drhp26-searchform button[type="submit"] {
  text-transform: none; letter-spacing: normal;
  min-height: 60px; min-width: 44px; padding: 0 14px;   /* 16px inset incl. the 2px border → 80×60 (40:1130) */
  background: var(--d26-soft); color: var(--d26-purple);   /* 8.81:1 */
  border: 2px solid var(--d26-soft); border-radius: 8px;   /* 132:302: hover border is 2px */
  font: 600 14px/20px Inter, system-ui, sans-serif; cursor: pointer;
}
.drhp26-searchform button[type="submit"]:hover { background: var(--d26-band); border-color: var(--d26-border); }
.drhp26-search__cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 20px; margin-top: 28px;
  align-items: start;                              /* frame: cards hug content */
}
/* Design context for group 131:244: soft/band fill, radius 12, padding 18px 16px,
   column with a 4px gap between the label and the rows. */
.drhp26-card26 { background: var(--d26-band); border-radius: 12px; padding: 18px 16px; display: flex; flex-direction: column; gap: 4px; }
.drhp26-card26--lead { background: var(--d26-soft); }
/* Card titles are Label/M (Inter 600 14/20, no tracking) in primary — design
   context 131:245; the frame's text is upper-case, so the menu title is
   transformed here. Earlier build used a 12px Montserrat label: wrong. */
.drhp26-card26 .drhp26-panel__label {
  margin: 0; padding: 0;
  font: 600 14px/20px Inter, system-ui, sans-serif;
  letter-spacing: 0; text-transform: uppercase;
  color: var(--d26-purple);                       /* 11.03:1 on white */
}
.drhp26-card26__list { list-style: none; margin: 0; padding: 0; }
.drhp26-card26__list { display: flex; flex-direction: column; gap: 4px; }
.drhp26-card26__list a {
  display: flex; align-items: center;
  min-height: 44px; padding: 0 0 0 8px; border-radius: 8px; max-width: 282px;   /* menu item 131:246: 282×44, pl 8, radius 8 */
  color: var(--d26-text);                         /* frame #241a29 · 15.5:1 on band */
  font: 400 16px/24px Inter, system-ui, sans-serif; text-decoration: none;   /* Body/M — was 500 */
}
/* Sheet 132:326: row hover = soft fill; client direction adds primary semibold text.
   The lead card is itself soft, so its rows hover with a 12% primary tint instead. */
.drhp26-card26__list a:hover { background: var(--d26-soft); text-decoration: none; color: var(--d26-purple); font-weight: 600; }
.drhp26-card26--lead .drhp26-card26__list a:hover { background: rgba(90, 36, 108, 0.12); }
.drhp26-card26__list .drhp26-row--priority a { background: none; color: var(--d26-purple); font: 600 16px/22px Inter, system-ui, sans-serif; }  /* Label/L (131:249) · ≥5.9:1 */
.drhp26-card26__list .drhp26-row--priority a:hover { background: var(--d26-soft); }            /* audit: priority rows had no hover fill */
.drhp26-card26--lead .drhp26-card26__list .drhp26-row--priority a:hover { background: rgba(90, 36, 108, 0.12); }

/* Menu toggle (mobile only). */
.drhp26-menu-toggle {
  text-transform: none; letter-spacing: normal;
  display: none; align-items: center; gap: 10px;
  min-height: 44px; min-width: 44px; padding: 0 14px;   /* 16px inset incl. the 2px border */
  background: var(--d26-soft); color: var(--d26-purple);   /* 8.81:1 */
  border: 2px solid var(--d26-soft); border-radius: 8px;   /* 132:302: 2px hover border */
  font: 600 14px/20px Inter, system-ui, sans-serif; cursor: pointer;
}

/* Help card + utility line live in the mobile panel only. */
.drhp26-nav__help, .drhp26-searchform--mobile, .drhp26-nav__utility { display: none; }

/* ------------------------------------------------------- focus indicators -- */
/* The parent theme's `a { transition: all .1s }` fades rings in; show them instantly. */
:focus-visible { transition: none; }
.drhp26 :focus-visible { outline-offset: 2px; border-radius: 8px; }
.drhp26 a:focus-visible, .drhp26 button:focus-visible, .drhp26 input:focus-visible {
  box-shadow: none !important;
  outline-width: var(--d26-ring-w) !important;
  outline-style: solid !important;
}
/* Transparent controls: ring adjacency is the surface BEHIND them. Dark bar → gold
   (state sheet 132:296 draws the nav-link focus in accent on primary-strong). */
.drhp26-rail__list a:focus-visible,
.drhp26-nav__link:focus-visible,
.drhp26-disclosure:focus-visible,
.drhp26-bar__brand a:focus-visible {
  outline-color: var(--d26-gold) !important;      /* 8.09:1 vs #3f124d */
  /* The sheet draws the ring INSIDE the control's box (border-4 on the card),
     so on these 44px boxes it sits within their own padding. */
  outline-offset: calc(-1 * var(--d26-ring-w)) !important;
}
/* Light surfaces (dropdown, mega panel, forms) → purple. */
.drhp26-panel__list a:focus-visible,
.drhp26-card26__list a:focus-visible,
.drhp26-searchform input:focus-visible,
.drhp26-nav__utility a:focus-visible,
.drhp26-nav__utility button:focus-visible {
  outline-color: var(--d26-purple) !important;    /* ≥8.8:1 on white/band */
  outline-offset: calc(-1 * var(--d26-ring-w)) !important;   /* inside, as 132:328 draws the menu row */
}
/* Filled chips per the state sheet: the ring sits ON the control, adjacent to its
   own fill — soft/gold chips take primary (132:304/312), Quick Exit takes accent
   (132:320) — so visibility no longer depends on what is behind the chip. */
.drhp26-search-toggle:focus-visible,
.drhp26-menu-toggle:focus-visible,
.drhp26-search__close:focus-visible,
.drhp26-searchform button:focus-visible,
.drhp26-donate:focus-visible,
.drhp26-hero__cta:focus-visible {
  outline-color: var(--d26-purple) !important;    /* 8.81:1 on soft · 6.0:1 on gold */
  outline-offset: calc(-1 * var(--d26-ring-w)) !important;  /* beats a11y.css's global offset */
}
.drhp26-qe:focus-visible {
  outline-color: var(--d26-gold) !important;      /* 3.55:1 on the red chip */
  outline-offset: calc(-1 * var(--d26-ring-w)) !important;
}

/* Pin every state of our controls so no parent-theme state rule leaks in. */
.drhp26 .drhp26-search-toggle, .drhp26 .drhp26-search-toggle:active,
.drhp26 .drhp26-search-toggle[aria-expanded="true"],
.drhp26 .drhp26-menu-toggle, .drhp26 .drhp26-menu-toggle:active,
.drhp26 .drhp26-search__close {
  color: var(--d26-purple); background: var(--d26-soft);
}
/* Chip hover per state sheet 132:302: canvas fill, #d9ccde border, no underline
   (a11y.css underlines generic button hovers — these chips are drawn without). */
.drhp26 .drhp26-search-toggle:hover,
.drhp26 .drhp26-menu-toggle:hover,
.drhp26 .drhp26-search__close:hover,
.drhp26 .drhp26-searchform button[type="submit"]:hover {
  color: var(--d26-purple); background: var(--d26-band); border-color: var(--d26-border);
  text-decoration: none;
}
.drhp26 .drhp26-qe:hover { text-decoration: none; }
.drhp26 .drhp26-donate:hover { text-decoration: none; }
/* Open Search chip: frame 131:234 and sheet 132:300 draw no ring; the panel itself is the state (audit, 4 Sept 2026). */
.drhp26 .drhp26-menu-toggle[aria-expanded="true"] { color: var(--d26-purple); background: var(--d26-soft); border-color: var(--d26-soft); }
.drhp26 .drhp26-menu-toggle[aria-expanded="true"]:hover { background: var(--d26-band); border-color: var(--d26-border); }   /* sheet 132:302 also while open (verification, 4 Sept 2026) */
/* The swapped "Close" chip keeps its hover affordance (sheet row 2 fill). */
.drhp26 .drhp26-menu-toggle[aria-expanded="true"]:hover { background: var(--d26-band); }
.drhp26 .drhp26-disclosure, .drhp26 .drhp26-disclosure:hover, .drhp26 .drhp26-disclosure:active { color: var(--d26-white); }
.drhp26 .drhp26-disclosure[aria-expanded="true"],
.drhp26 .drhp26-disclosure[aria-expanded="true"]:hover { color: var(--d26-text); background: var(--d26-soft); }  /* frame #241a29, 12.6:1 */
.drhp26 .drhp26-qe, .drhp26 .drhp26-qe:hover, .drhp26 .drhp26-qe:active { color: var(--d26-white); }

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 1099px) {
  .drhp26-menu-toggle { display: inline-flex; min-height: 48px; }
  .drhp26-rail { padding: 8px 12px; }
  .drhp26-bar { min-height: 80px; padding: 0 16px; }   /* frame m1: 80px bar */
  /* Frame m2 draws a 1px #d9ccde seam between the bar and the open drawer
     (invisible in the closed state over the photo, so open-state only). */
  .drhp26.is-menu-open .drhp26-bar,
  .drhp26:has(.drhp26-menu-toggle[aria-expanded="true"]) .drhp26-bar {
    background: var(--d26-ink) !important;        /* frame m2: solid while open */
    row-gap: 0;                                   /* the sheet's own margin sets the seam row */
  }
  /* Frames m2/m3 keep the 80px logo/chip row while the drawer is open (logo y72,
     chip y80). Without this the first flex line shrinks to the 64px logo and
     both jump up 8px the moment the menu opens. */
  .drhp26-bar__brand { min-height: 80px; }
  /* The Figma logo box is 194×64, but the real asset is wider (530×131). At
     390px the frame's binding constraint is the 194px width — capping by
     height would wrap the Menu chip onto a second row. */
  /* logo box handled by the brand crop (194×64) at every viewport */
  .drhp26-search-toggle { display: none; }
  .drhp26-search { display: none !important; }
  .drhp26-rail__nav { display: none; }
  .drhp26-rail { justify-content: space-between; }
  .drhp26-rail__actions { width: 100%; justify-content: space-between; }
  .drhp26-bar { flex-wrap: wrap; justify-content: space-between; }

  .drhp26-nav { flex: 1 1 100%; }
  .drhp26-nav[hidden] { display: none; }
  /* Page scroll is locked while the menu is open (class set by the script),
     so the page behind the takeover cannot be scrolled into view either. */
  html.drhp-menu-open, html.drhp-menu-open body { overflow: hidden; }
  /* With the root's overflow hidden a sticky header no longer tracks a
     scrolled page, so a Menu tap made after scrolling left the header and the
     top of the sheet above the viewport (client, 4 Sept 2026 — invisible to
     Playwright's click(), which scrolls the target into view first). While
     the sheet is open the header is fixed at the top and the body keeps its
     height as padding, exactly as the desktop search panel does. */
  html.drhp-menu-open .drhp-header-2026-active #masthead { position: fixed; top: 0; left: 0; right: 0; }
  html.drhp-menu-open body.drhp-header-2026-active { padding-top: calc(var(--drhp26-header-h, 152px) - 8px); }
  /* Light panel, per the mobile open state. */
  .drhp26-nav:not([hidden]) {
    display: block;
    background: var(--d26-white);
    /* Row ends 144; the sheet starts one pixel early so its inset top line is
       row 143 — exactly where frame m2 renders the #d9ccde seam — and the
       21px top padding keeps the help card at the frame's 164. */
    margin: -1px -16px -16px;
    box-shadow: inset 0 1px 0 var(--d26-border);
    padding: 21px 20px 24px;
    /* The sheet starts at 143 (rail 64 + bar 80 − seam row), not the desktop
       header's 160: with 160 the sheet came up 17px short of the frame's
       bottom edge and scrolled where m2/m3 show it whole. */
    max-height: calc(100dvh - 143px);
    /* The open menu is a takeover: the sheet fills the viewport below the
       header so none of the page shows beneath it (frame m2's white panel
       runs to the bottom edge), and it scrolls internally when its content
       is taller than the screen. */
    min-height: calc(100dvh - 143px);
    box-sizing: border-box;
    overflow-y: auto;
  }

  /* Dark "Need help now?" card. */
  .drhp26-nav__help {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 5px;
    background: var(--d26-ink);
    border-radius: 12px;
    padding: 16px;
    margin: 0 0 10px;
  }
  .drhp26-nav__help-title { flex: 0 0 150px; margin: 0; color: var(--d26-band); font: 700 20px/28px Montserrat, sans-serif; }  /* 13.9:1 */
  .drhp26-nav__help-links { flex: 1 1 auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
  .drhp26-nav__help-links a {
    display: inline-flex; align-items: center;
    min-height: 44px; min-width: 44px; padding: 0 8px;
    color: var(--d26-white); font: 600 14px/20px Inter, sans-serif;  /* 14.95:1 */
    text-decoration: none;
  }
  /* Underline removed per client direction. This row's hover was carried by the
     underline alone, so a soft wash replaces it rather than leaving mouse users
     at narrow widths with no feedback at all. */
  .drhp26-nav__help-links a:hover {
    text-decoration: none;
    background: rgba(255, 255, 255, 0.14);
    border-radius: 8px;
  }
  /* Frames m2/m3: the card carries 3 rows; French is reached from the
     En français row and the utility line. Class-based, so no :has() needed. */
  .drhp26-nav__help-links li.lang-fr { display: none; }
  .drhp26-nav__help-links .drhp26-rail__pill a {
    background: var(--d26-band); color: var(--d26-purple);           /* 9.7:1 */
    border-radius: 8px; padding: 0 5px; align-self: flex-start;
    min-width: min(162px, 100%); max-width: 100%; justify-content: center; white-space: nowrap;   /* grows under text-spacing instead of overflowing */
  }

  /* One row per the frame: field grows, Search chip beside it at 60px. */
  .drhp26-searchform--mobile { display: flex; flex-wrap: nowrap; gap: 8px; margin: 0 0 10px; max-width: none; }
  .drhp26-searchform--mobile input[type="search"] { flex: 1 1 auto; min-width: 0; min-height: 60px; }
  .drhp26-searchform--mobile button[type="submit"] { min-height: 60px; padding: 0 14px; }

  .drhp26-nav__list { display: block; }
  .drhp26-nav__item { border-bottom: 0; margin-bottom: 10px; padding-bottom: 0; }
  /* Frame m2 rows 469/531/593/655/717/779: the #d9ccde hairline is the 52nd
     pixel of each collapsed row, so it is painted inside the row rather than
     added beneath it (a border made every row 53px and drifted 1px per row). */
  .drhp26-nav__item > .drhp26-nav__link,
  .drhp26-nav__item > .drhp26-disclosure:not([aria-expanded="true"]) {
    box-shadow: inset 0 -1px 0 var(--d26-border);
  }
  .drhp26-nav__item:last-child { margin-bottom: 0; }  /* frame keeps the rule above the utility line */
  .drhp26-nav__link,
  .drhp26-disclosure {
    width: 100%; justify-content: space-between;
    min-height: 52px; padding: 0 12px; border-radius: 0;
    color: var(--d26-text);                      /* 16.9:1 on white */
    font: 600 16px/22px Inter, system-ui, sans-serif;
  }
  .drhp26 .drhp26-disclosure, .drhp26 .drhp26-disclosure:hover { color: var(--d26-text); }
  /* State sheet 132:326: menu-row hover = soft fill only (no underline). */
  .drhp26-nav__link:hover, .drhp26-disclosure:hover { background: var(--d26-soft); color: var(--d26-text); text-decoration: none; }
  .drhp26 .drhp26-nav__link:hover { color: var(--d26-text); }
  /* Open accordion header: soft fill, purple text, − glyph. */
  .drhp26 .drhp26-disclosure[aria-expanded="true"],
  .drhp26 .drhp26-disclosure[aria-expanded="true"]:hover {
    background: var(--d26-soft); color: var(--d26-purple);  /* 8.81:1 */
    border-radius: 10px 10px 0 0;                 /* frame 131:640: the open group is one 10px card */
  }
  /* …and the card's own bottom corners; the separator under an expanded group
     belongs to the card edge, not a divider line. */
  .drhp26-nav__item:has(.drhp26-disclosure[aria-expanded="true"]) { border-bottom: 0; }
  .drhp26-panel__list li:last-child a { border-radius: 0 0 10px 10px; }

  /* +/− glyph, per the states panel. */
  .drhp26-disclosure__glyph {
    display: block; position: relative;
    width: 10px; height: 10px; border: 0; transform: none; transition: none;
    color: var(--d26-purple);                    /* the frame's + glyph is purple */
  }
  .drhp26-disclosure__glyph::before,
  .drhp26-disclosure__glyph::after {
    content: ""; position: absolute; background: currentColor; border-radius: 1px;
  }
  .drhp26-disclosure__glyph::before { left: 0; top: 4px; width: 10px; height: 2px; }
  .drhp26-disclosure__glyph::after  { top: 0; left: 4px; width: 2px; height: 10px; }
  .drhp26-disclosure[aria-expanded="true"] .drhp26-disclosure__glyph::after { display: none; }

  /* Accordion rows per frame m3: every non-priority row soft, priority white,
     1px #d9ccde hairlines between rows, #241a29 labels. */
  .drhp26-panel {
    position: static; min-width: 0; width: auto;
    background: transparent; border: 0; border-radius: 0; box-shadow: none;
    padding: 0;
  }
  .drhp26-panel__head { display: none; }
  .drhp26-panel__list { margin: 0; gap: 0; }
  .drhp26-panel__list a {
    min-height: 44px; padding: 2px 12px 2px 28px; border-radius: 0;
    background: var(--d26-soft);
    border-top: 1px solid var(--d26-border);
    color: var(--d26-text);                      /* 15.5:1 on soft */
  }
  .drhp26-panel__list li:last-child a { border-bottom: 1px solid var(--d26-border); }
  .drhp26-panel__list a:hover { background: var(--d26-band); }
  /* Frame 131:645–664: nested arrows are Label/M 14/20; the priority row's
     label is Label/M semibold too (the 16px Body/M is desktop-only). */
  .drhp26-panel__list .drhp26-arrow { font: 600 14px/20px Inter, sans-serif; }
  /* Client direction (3 Sept 2026): Get Immediate Help rests like its
     neighbours (Body/M on the soft stack) — the frame's white / primary
     priority look (131:650) is retired. The CURRENT page's row is filled
     primary with white Label/M semibold, as on desktop. Scoped to the drawer:
     a bare .drhp26-row--priority selector here leaked into the footer columns
     (white-on-white at 768–1099px). */
  .drhp26-panel__list .drhp26-row--priority a {
    background: var(--d26-soft);
    color: var(--d26-text);                      /* 15.5:1 on soft */
    font: 400 16px/24px Inter, system-ui, sans-serif;
  }
  .drhp26-panel__list .drhp26-row--priority a .drhp26-arrow { color: var(--d26-muted); }
  .drhp26-panel__list a[aria-current="page"],
  .drhp26-panel__list a[aria-current="page"]:hover,
  .drhp26-panel__list .drhp26-row--priority a[aria-current="page"] {
    background: var(--d26-purple);
    color: var(--d26-white);                     /* 11.03:1 */
    font: 600 14px/20px Inter, system-ui, sans-serif;
  }
  .drhp26-panel__list a[aria-current="page"] .drhp26-arrow { color: var(--d26-white); }
  /* Frame m3 carries no View-all row in the header drawer (the footer
     accordions keep theirs). */
  /* Frame m3 omits the View-all row in the drawer; the client approved adding
     it (decision Q17, 2026-09-02) after the individual help links, so the
     Get Help hub is reachable from the mobile navigation. */
  .drhp26-nav .drhp26-panel__list .drhp26-row--viewall { display: list-item; }

  /* Utility line. */
  .drhp26-nav__utility {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px;
    padding: 0; margin-top: 10px;                 /* frame: text 790–810, Contact row ends 780 */
    color: var(--d26-muted);
    font: 400 13px/20px Inter, sans-serif;
  }
  .drhp26-nav__utility a,
  .drhp26-nav__utility button {
    text-transform: none; letter-spacing: normal;
    display: inline-flex; align-items: center;
    min-height: 44px; padding: 0 2px;
    margin: -12px 0;                              /* 44px target inside the frame's 20px line */
    background: none; border: 0; cursor: pointer;
    color: var(--d26-muted);                     /* frame: #625568 · 6.95:1 */
    font: 400 13px/20px Inter, sans-serif;
    text-decoration: none;
  }
  /* No hover underline (client); the colour shift to purple carries it. */
  .drhp26-nav__utility a:hover,
  .drhp26-nav__utility button:hover { text-decoration: none; color: var(--d26-purple); }

  /* Rings inside the light panel are purple; inside the dark card, gold. */
  .drhp26-nav__link:focus-visible,
  .drhp26-disclosure:focus-visible,
  .drhp26-panel__list a:focus-visible,
  .drhp26-searchform--mobile input:focus-visible,
  .drhp26-searchform--mobile button:focus-visible {
    outline-color: var(--d26-purple) !important;
  }
  .drhp26-nav__help a:focus-visible,
  .drhp26-nav__help-links a:focus-visible {
    outline-color: var(--d26-gold) !important;   /* 8.09:1 on the ink card */
  }
}

/* --------------------------------------------------------- system modes -- */
@media (prefers-reduced-motion: reduce) {
  .drhp26 *, .drhp26 *::before, .drhp26 *::after { transition: none !important; }
}
@media (forced-colors: active) {
  .drhp26-qe, .drhp26-donate, .drhp26-search-toggle, .drhp26-menu-toggle,
  .drhp26-disclosure, .drhp26-search__close, .drhp26-searchform button { border: 1px solid ButtonText; }
  .drhp26 :focus-visible { outline: 4px solid Highlight; }
}
/* The offset tracks the real header height (set by ResizeObserver in the JS);
   a fixed constant left skip-link targets 59px under the 209px mobile header. */
html { scroll-padding-top: var(--drhp26-header-h, 150px); }

/* "View all …" row. Frame state 2 draws it permanently filled; client direction
   (3 Sept 2026): it is an ordinary row in every state — plain at rest, the
   shared soft hover, and the primary fill only when it is the current page
   (the generic [aria-current] rules above). Its drawer visibility is Q17. */

/* ===========================================================================
   HERO — the handoff frames' remaining region.
   Desktop: title 32/40 Montserrat Bold max 819px; body 18/28 Inter max 720px;
   14px gaps; 52px top pad; 48px side pad; min-height 497; photo with the
   frames' gradient (-82°, 0 → 0.5). The photo extends up behind the header so
   it shows through the translucent bar, exactly as drawn.
   Mobile: 24px sides, 40px top, title 24/32 (max 330), body 16/24 (max 330),
   gradient 0 → 0.7, min-height 617; bar rgba(63,18,77,0.6).
   =========================================================================== */

.drhp26-hero {
  position: relative;
  /* The frame's hero region is 497px BELOW the header; the section also spans
     up behind the translucent bar, so the header height is added back. */
  min-height: calc(var(--drhp26-header-h, 156px) - 8px + 497px);
  display: flex;
  overflow: clip;
  /* Pull the hero up behind the (translucent) header. */
  margin-top: calc(-1 * var(--drhp26-header-h, 156px) + 8px);
  padding-top: calc(var(--drhp26-header-h, 156px) - 8px + 52px);
  padding-bottom: 56px;
}
.drhp26-hero__media,
.drhp26-hero__media img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  /* Frame 131:139 crop, solved by normalised cross-correlation against the
     rendered frame (0.979): the photograph is a plain cover crop (1440×720)
     whose TOP edge sits at y=64, the rail's bottom, running behind the
     translucent bar. This box spans the full 657px frame, so the image is
     placed 64px down; the strip above is under the opaque rail. */
  object-fit: cover; object-position: center 64px;
}
.drhp26-hero__cta-short { display: none; }        /* phones-only label, see the mobile block */
.drhp26-hero__scrim {
  position: absolute; inset: 0;
  /* Scrim depth is measured, not guessed: with the text hidden, every
     background pixel under the copy is sampled and the worst one must keep
     white text above 3:1 (title) and 4.5:1 (body). */
  /* Layer 2 is the frame's own gradient, measured off the render as pure black,
     0.46 at the left edge falling linearly to 0 (its declared −82°, 0 → 0.5).
     On the charity's photograph that alone measures 2.88:1 under the title
     and 3.00:1 under the body (floors 3 and 4.5). Layer 1 is the SMALLEST
     addition that clears both with a 5% margin — searched in 0.05 steps with
     the text hidden and every background pixel sampled — and it is confined
     to the text block (title/body end at 819px = 57%), so the hands and
     ribbon stay exactly as the frame draws them. */
  background:
    /* The layer's stops follow the content column in px (it starts at
       max(48px, (100% − 1344px) / 2)), because a 57% stop only covered the
       819px text block at ≥1300px wide: at 1100–1260 the cover crop pulls the
       hands under the title and it measured 2.0:1 (4 Sept 2026 sweep). */
    linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0, rgba(0, 0, 0, 0.25) calc(max(48px, (100% - 1344px) / 2) + 830px), rgba(0, 0, 0, 0) calc(max(48px, (100% - 1344px) / 2) + 1000px)),
    linear-gradient(-82deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
}
.drhp26-hero__content {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 14px;
  padding: 0 max(48px, calc((100% - 1344px) / 2));
  width: 100%;
}
.drhp26-hero__title {
  margin: 0;
  font: 700 32px/40px Montserrat, Inter, sans-serif;
  color: var(--d26-white);
  max-width: 819px;
}
.drhp26-hero__body {
  margin: 0;
  font: 400 18px/28px Inter, system-ui, sans-serif;
  color: var(--d26-white);
  max-width: 720px;
}
/* The frame's body block ends with an empty 28px line before the CTA, so the
   rendered ink gap is 42px (14 flex gap + 28), verified by pixel scan. */
.drhp26-hero__cta { margin-top: 28px; text-transform: none; letter-spacing: normal; }
/* The hero sits outside .drhp26, so the header's focus resets don't reach it:
   kill a11y.css's white halo + 2px radius on the focused chip. */
.drhp26-hero__cta:focus-visible { box-shadow: none !important; border-radius: 8px; }

/* Translucent bar on EVERY page (client direction, 4 Sept 2026: interior pages
   had a solid bar and "a different opacity"). Over the home hero the photo
   shows through; elsewhere the white page does, which is the lightest thing
   the bar can sit on — white text on 0.75 over white measures 6.95:1. Once the
   header has scrolled away from the top the alpha steps up (rule below). */
body.drhp-header-2026-active .drhp26-bar {
  background: rgba(63, 18, 77, 0.75);
}
/* Once the header has scrolled away from the top (headroom pins it), the bar
   steps up a little — client direction, 3 Sept 2026 — but stays translucent:
   0.75 → 0.85 here, 0.6 → 0.72 on mobile. A short fade so it does not snap. */
body.drhp-header-2026-active .drhp26-bar { transition: background-color .2s ease; }
body.drhp-header-2026-active .headroom--not-top .drhp26-bar { background: rgba(63, 18, 77, 0.92); }   /* 0.75 → 0.85 → 0.92 (client, 3 Sept 2026, twice) */
@media (prefers-reduced-motion: reduce) {
  body.drhp-header-2026-active .drhp26-bar { transition: none; }
}
/* Frame 3 (131:216) renders the bar SOLID ink while the search panel is open —
   sampled (63,18,77) at every point across rows 64–155 — where frames 1/2 keep
   it translucent over the photograph. Class set by the script; :has() covers
   the same state without it. */
body.drhp-header-2026-active .drhp26.is-search-open .drhp26-bar,
body.drhp-header-2026-active .drhp26:has(.drhp26-search-toggle[aria-expanded="true"]) .drhp26-bar {
  background: var(--d26-ink);
}
/* The bar keeps its translucency while scrolling — it does not turn solid.
   (Client direction; the frames only ever draw the translucent state.) */

/* The brand crop above owns the logo box (194×64, image 112.62% / −12.49%);
   the bar is a fixed 92px with centred items, per the frame. */
.drhp26-bar { min-height: 92px; padding: 0 max(48px, calc((100% - 1344px) / 2)); }

@media (max-width: 1099px) {
  .drhp26-hero { min-height: calc(var(--drhp26-header-h, 144px) - 8px + 617px); padding-bottom: 48px; }
  /* Frame m1's ink gap before the CTA is 20px — the desktop empty-line
     spacing does not apply at mobile. */
  .drhp26-hero__cta { margin-top: 0; }
  .drhp26-hero { padding-top: calc(var(--drhp26-header-h, 144px) - 8px + 40px); }
  /* Mobile text spans nearly the full width, so the floor applies throughout. */
  /* The banner is 2000×1000 and its subject — the hands and ribbon — sits in
     the right 40%; the left half is flat, bright background. A centred cover
     crop at this aspect shows only ~31% of the width, so it landed on that
     empty area: the photograph read as a plain purple wash and forced a heavy
     scrim. Cropping to the subject matches the artboard and is darker, so the
     scrim can be lighter too. Measured 5.6:1 at the worst pixel behind the copy. */
  .drhp26-hero__img,
  .drhp26-hero__cta-full { display: none; }
  .drhp26-hero__cta-short { display: inline; }      /* frame 131:561: "Donate" */
  .drhp26-hero img {
    /* Frame 131:561 crop: a plain cover crop over the full 390×761 frame
       (1522×761) at 85% horizontal — no zoom. The earlier 1.25× came from
       modelling only the 617px below the bar; the box here is the whole frame. */
    object-position: 85% center;
    transform: none;
  }
  /* Frame 131:561's 0 → 0.7 measures 2.17:1 / 2.13:1 on this photograph (the
     frame's own crop puts the bright ribbon under the copy). The text spans the
     width here, so the smallest passing addition is a uniform 0.40 layer. */
  .drhp26-hero__scrim {
    background:
      linear-gradient(rgba(0, 0, 0, 0.40), rgba(0, 0, 0, 0.40)),
      linear-gradient(-82deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.7) 100%);
  }
  .drhp26-hero__content { padding: 0 24px; }
  .drhp26-hero__title { font: 700 24px/32px Montserrat, Inter, sans-serif; max-width: 330px; }
  .drhp26-hero__body { font: 400 16px/24px Inter, system-ui, sans-serif; max-width: 330px; }
  body.drhp-header-2026-active .drhp26-bar { background: rgba(63, 18, 77, 0.6); }
  body.drhp-header-2026-active .headroom--not-top .drhp26-bar { background: rgba(63, 18, 77, 0.8); }   /* 0.6 → 0.72 → 0.8 */
  /* translucency is kept while scrolling here too */
  .drhp26-bar { min-height: 80px; padding: 0 16px; }   /* frame m1: 80px bar */
}

/* The 330px hero measure belongs to the 390px artboard, where it reproduces
   the frame exactly (14 body lines, CTA at y=644). Above that width the text
   must keep filling the content box instead of stranding the right side —
   at 768 it was using 330px of 720. Capped at the design's own desktop
   measures so the line length stays readable on tablets. */
/* Tablets (client direction, 4 Sept 2026): the phone layout's 761px hero left
   the text pinned under the bar with ~325px empty below it at 768–1099px.
   Centre the block in the region under the bar: padding-top is header + 40
   (the mobile rule above) and padding-bottom 40 here, so the flex centre is
   the centre of (header bottom … hero bottom). Phones keep frame m1's layout. */
@media (min-width: 768px) and (max-width: 1099px) {
  .drhp26-hero { align-items: center; padding-bottom: 40px; }
}

/* Compact Quick Exit in the bar (client direction, 4 Sept 2026): visible only
   while the rail is hidden on scroll in the mobile layout, so Quick Exit stays
   on screen at every breakpoint (handoff §5). Icon-only on phones (44×48),
   labelled from 600px. display:none otherwise, so the tree holds one Quick
   Exit at a time. */
.drhp26-qe--bar { display: none; }
@media (max-width: 1099px) {
  html:not(.drhp-menu-open) .drhp-header-2026-active .site-header.headroom--not-top .drhp26-qe--bar { display: inline-flex; margin-left: auto; }
  .drhp26-qe--bar { padding: 0 12px; }                       /* icon-only: 44×48 */
  .drhp26-qe--bar .drhp26-qe__label { display: none; }
}
/* The bar is 194 (logo) + 12 + chip + 12 + chip inside 390 − 32: the labelled
   Menu chip (100) and an icon Quick Exit (44) need 394px, so under 480px the
   Menu chip is icon-only while the Quick Exit is shown (its name stays "Menu"
   through visually hidden text); 480–599 keeps the Menu label; from 600 the
   Quick Exit is labelled too (194 + 12 + 130 + 12 + 100 + 32 = 480). */
@media (max-width: 479px) {
  html:not(.drhp-menu-open) .drhp-header-2026-active .site-header.headroom--not-top .drhp26-menu-toggle { padding: 0 12px; }
  html:not(.drhp-menu-open) .drhp-header-2026-active .site-header.headroom--not-top .drhp26-menu-toggle .drhp26-menu-toggle__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (min-width: 600px) and (max-width: 1099px) {
  .drhp26-qe--bar { padding: 0 16px; }
  .drhp26-qe--bar .drhp26-qe__label { display: inline; }
}

/* Scrolling down hides the safety rail on the mobile layout (client direction,
   4 Sept 2026). The sticky header keeps its in-flow height, so nothing
   reflows: the header slides up by the rail's measured height and the rail
   leaves the accessibility tree, so no focusable control sits above the
   viewport. It returns at the top of the page and whenever the menu takeover
   is open (frame m2 draws the rail above the drawer). The header box's
   now-empty lower band must not swallow taps on the content beneath it. */
@media (max-width: 1099px) {
  .drhp-header-2026-active #masthead { pointer-events: none; }
  .drhp-header-2026-active #masthead > * { pointer-events: auto; }
  .drhp-header-2026-active .site-header .drhp26 { transition: transform .2s ease; }
  html:not(.drhp-menu-open) .drhp-header-2026-active .site-header.headroom--not-top .drhp26 { transform: translateY(calc(-1 * var(--drhp26-rail-h, 64px))); }
  html:not(.drhp-menu-open) .drhp-header-2026-active .site-header.headroom--not-top .drhp26-rail { visibility: hidden; }
  /* The parent draws a shadow on the sticky box (.headroom--not-top) — but
     the box keeps its rail+bar height while the content slides up, so that
     shadow floated 64px below the visible bar (client-flagged, 21 Sept
     2026). The bar keeps its own shadow, which moves with it. */
  html:not(.drhp-menu-open) .drhp-header-2026-active .site-header.headroom--not-top { box-shadow: none; }
}
@media (max-width: 1099px) and (prefers-reduced-motion: reduce) {
  .drhp-header-2026-active .site-header .drhp26 { transition: none; }
}
@media (min-width: 391px) and (max-width: 1099px) {
  .drhp26-hero__title { max-width: min(100%, 819px); }
  .drhp26-hero__body { max-width: min(100%, 720px); }
}