@font-face { font-family: "OpenDyslexic"; src: url("/assets/reading-fonts/OpenDyslexic-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/reading-fonts/OpenDyslexic-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/reading-fonts/OpenDyslexic-Italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "OpenDyslexic"; src: url("/assets/reading-fonts/OpenDyslexic-BoldItalic.woff2") format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }
html[data-reading-font="dyslexic"] { --rp-font: "OpenDyslexic", "Reading Noto Sans", Roboto, Arial, sans-serif; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2"); font-style: normal; font-weight: 700; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2"); font-style: italic; font-weight: 400; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("/assets/reading-fonts/AtkinsonHyperlegible-BoldItalic.woff2") format("woff2"); font-style: italic; font-weight: 700; font-display: swap; }
html[data-reading-font="atkinson"] { --rp-font: "Atkinson Hyperlegible", "Reading Noto Sans", "OpenDyslexic", Roboto, Arial, sans-serif; }
/* All four family editions share the same fixed reading entry and native drawer. */
.masthead { container: family-header / inline-size; }
.masthead .masthead-inner { position: relative; }
.masthead .header-actions .language-link {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; min-height: 44px; padding: 0;
}
.masthead .language-link img { display: block; width: 24px; height: 16px; object-fit: contain; }
.masthead .mobile-menu > summary svg { display: none; }
.masthead .language-link:focus-visible, .masthead .mobile-menu > summary:focus-visible {
  outline: 3px solid white; outline-offset: 2px;
}
html[data-reading-font] .masthead .brand { font-family: var(--rp-font); }
html[data-reading-font] :where(main, .site-introduction, .practice-band, footer) { overflow-wrap: anywhere; }

.family-reader { border: 0; margin: 0; padding: 0; background: transparent; }
.family-reader .reading-launch {
  position: fixed; z-index: 40;
  inset-inline-end: env(safe-area-inset-right, 0px);
  inset-block-end: max(28px, calc(env(safe-area-inset-bottom, 0px) + 12px));
  display: flex; align-items: center; justify-content: flex-end;
  box-sizing: border-box; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  padding: 0; margin: 0; border: 0; background: transparent;
  color: #23495e; cursor: pointer;
}
.reading-launch span {
  display: grid; place-items: center; box-sizing: border-box;
  min-width: 34px; height: 32px; padding-inline: 3px;
  border: 1px solid #97abb5; border-inline-end: 0; border-radius: 5px 0 0 5px;
  background: #f4f8fa; font: 500 16px/1 Roboto, Arial, sans-serif;
}
.reading-launch:hover span { background: #e5eff4; border-color: #54778b; }
.reading-launch:focus-visible { outline: none; }
.reading-launch:focus-visible span { outline: 3px solid #07568c; outline-offset: 1px; }

/* Keep the enlarged arrow glyph inside its original 44px button. */
html[data-reading-size] .home-balance .example-carousel__controls button {
  display: inline-grid; place-items: center; padding-inline: 0; flex: 0 0 44px;
}

/* Visible page text and links end before the complete hit target, including on phones. */
@media screen and (max-width: 78rem) {
  body:has(.family-reader:not([hidden])) :is(main .container, .site-introduction > .container, .practice-band > .container, .footer > .container) {
    padding-inline-end: max(48px, min(5.3vw, 76px), calc(48px + env(safe-area-inset-right, 0px)));
  }
  /* Standalone articles already have at least 22px of margin and a 690px maximum measure. */
  body:has(.family-reader:not([hidden])) main > .reading-body:not(.container) {
    padding-inline-end: max(0px, calc(48px + env(safe-area-inset-right, 0px) - max(22px, 50% - 345px)));
  }
}

.family-reader dialog {
  position: fixed; inset: 0 0 0 auto; box-sizing: border-box;
  width: min(24rem, calc(100% - 12px)); max-width: 100%; height: 100%; height: 100dvh; max-height: none;
  margin: 0; padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) 18px;
  border: 0; border-inline-start: 1px solid #bdcbd3;
  background: #fff; color: #102d40; overflow: auto; overscroll-behavior: contain;
  container: reading-drawer / inline-size;
}
.family-reader dialog::backdrop { background: rgb(8 31 46 / 28%); }
html:has(.family-reader dialog[open]) { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .family-reader dialog[open] { animation: reading-drawer-enter 150ms ease-out; }
  @keyframes reading-drawer-enter { from { transform: translateX(100%); } to { transform: translateX(0); } }
}
.reading-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-block-end: 1rem; }
.reading-panel-heading h2 { min-width: 0; margin: 0; color: inherit; font: 600 1.125rem/1.3 Roboto, Arial, sans-serif; }
.reading-panel-heading button { flex: none; white-space: nowrap; }
.reading-panel-heading button svg { display: none; }
.family-reader .reading-settings__fields { grid-template-columns: minmax(0, 1fr); gap: .875rem; }
.family-reader .reading-settings__panel :focus-visible { outline: 3px solid #07568c; outline-offset: 2px; }
.reading-settings__status.reading-notice { position: static; width: auto; height: auto; clip-path: none; white-space: normal; }
.reading-choice { display: block; }
.reading-choice-display { display: none; }

@container family-header (max-width: 47.5em) {
  .masthead .container.masthead-inner {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0 4px; padding-block: 3px;
  }
  .masthead .brand {
    flex: 1 1 min-content; min-width: 0; max-width: 100%; padding: 0;
    font-size: clamp(1.125rem, 5cqi, 1.375rem); line-height: 1.12; text-wrap: balance; overflow-wrap: normal;
  }
  .masthead .header-actions { display: flex; flex: none; flex-wrap: nowrap; align-items: center; margin-inline-start: auto; gap: 0; }
  .masthead .desktop-nav { display: none; }
  .masthead .mobile-menu { display: block; position: static; }
  .masthead .mobile-menu > summary {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; margin: 0; padding: 0; border: 0; background: transparent; list-style: none;
    color: #fff; font: 500 .875rem/1.25 Roboto, Arial, sans-serif; cursor: pointer;
  }
  .masthead .mobile-menu > summary::-webkit-details-marker { display: none; }
  .masthead .mobile-menu nav { inset-inline: 0; width: auto; }
}
@container family-header (max-width: 17.5em) {
  html[data-reading-size] .masthead .container.masthead-inner { padding-inline: max(12px, 4cqi); }
  .masthead .mobile-menu .action-caption { display: none; }
  .masthead .mobile-menu > summary svg { display: block; width: 20px; height: 20px; }
}
@container reading-drawer (max-width: 17.5em) {
  .reading-panel-heading button .action-caption { display: none; }
  .reading-panel-heading button { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; }
  .reading-panel-heading button svg { display: block; width: 22px; height: 22px; }
  .reading-panel-heading h2 { font-size: 1rem; }
  .reading-choice { display: grid; position: relative; margin-top: 6px; }
  .family-reader .reading-choice select { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; }
  .reading-choice-display {
    display: flex; align-items: center; justify-content: space-between; gap: 6px;
    min-width: 0; min-height: 44px; padding: 8px; border: 1px solid #7796aa; border-radius: 3px;
    background: #fff; color: #102d40; font: inherit; line-height: 1.35; overflow-wrap: anywhere; pointer-events: none;
  }
  .reading-choice-display svg { flex: none; width: 14px; height: 14px; }
  .reading-choice select:focus-visible + .reading-choice-display { outline: 3px solid #07568c; outline-offset: 2px; }
}
@media (forced-colors: active) {
  .reading-launch span, .reading-choice-display { background: Canvas; color: CanvasText; border-color: ButtonText; }
  .reading-launch:focus-visible span, .reading-choice select:focus-visible + .reading-choice-display { outline-color: Highlight; }
}
@media print { .family-reader, .family-reader dialog { display: none !important; } .family-reader dialog::backdrop { background: transparent; } }