/* Reuses the site's native dialog and palette; no overlay service or tracking. */
.hub .about-open { margin-top: 18px; align-self: flex-start; min-height: 44px; padding: 10px 18px; border: 1px solid var(--hub-line); border-radius: 999px; background: var(--hub-surface); color: var(--hub-text); font: 600 14px/1.5 'Spectral', Georgia, serif; cursor: pointer; }
.hub .about-open:hover { border-color: var(--hub-accent); box-shadow: inset 0 0 0 1px var(--hub-accent); }
.hub .welcome-start { border-bottom: 1px solid var(--hub-line); }
.hub .welcome-start .path-grid > a { border-radius: 18px; background: var(--hub-surface); }
.hub .welcome-start .path-grid h3 { font-size: clamp(27px, 2.5vw, 34px); }
.hub .about-dialog { width: min(820px, calc(100vw - 28px)); max-height: min(88vh, 920px); max-height: min(88dvh, 920px); padding: 0; overflow: hidden; }
.hub .about-dialog[open] { display: flex; flex-direction: column; }
.hub .about-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex: 0 0 auto; padding: 25px 30px 20px; border-bottom: 1px solid var(--hub-line); background: var(--hub-surface); }
.hub .about-dialog-head .eyebrow { margin: 0 0 8px; font-size: 10px; }
.hub .about-dialog-head h2 { margin: 0; font-size: clamp(29px, 4vw, 42px); line-height: 1.15; }
.hub .about-dialog-head .dialog-close { flex: 0 0 auto; margin: 0; min-width: 76px; min-height: 44px; }
.hub .about-dialog-reading { overflow-y: auto; overscroll-behavior: contain; padding: 24px 30px 32px; min-height: 0; font-size: var(--reader-size, 18px); line-height: 1.8; color: var(--hub-text); }
.hub .about-dialog-reading > *, .hub .about-dialog-reading section { max-width: 66ch; margin-inline: auto; }
.hub .about-dialog-reading h3 { font-size: 29px; line-height: 1.25; margin: 32px 0 16px; }
.hub .about-dialog-reading p { margin: 0 0 20px; }
.hub .about-dialog-reading li { margin-bottom: 14px; }
.hub .about-dialog-reading ul { padding-left: 24px; }
.hub .about-dialog-reading .about-lead { font-size: 1.08em; font-weight: 600; }
.hub .about-boundary { border-top: 1px solid var(--hub-line); margin-top: 30px; padding-top: 1px; }
.hub .about-dialog-reading .about-ending { border-top: 1px solid var(--hub-line); padding-top: 22px; font-style: italic; margin-top: 28px; }
.hub .about-dialog :focus-visible, .hub .about-open:focus-visible { outline: 3px solid var(--hub-accent); outline-offset: 3px; }
.hub .about-dialog-reading:focus-visible { outline-offset: -5px; }
html:has(#about-dialog[open]) { overflow: hidden; }
.hub .site-footer .about-open { margin-top: 5px; }
.hub .about-fallback { margin-top: 26px; max-width: 70ch; }
.hub .about-fallback summary { padding: 14px 0; cursor: pointer; font-weight: 600; }
@media (max-width: 560px) {
  .hub .about-dialog-head { padding: 18px 16px; gap: 12px; }
  .hub .about-dialog-head .eyebrow { font-size: 8px; letter-spacing: .12em; }
  .hub .about-dialog-head h2 { font-size: 29px; }
  .hub .about-dialog-reading { padding: 20px; font-size: max(16px, var(--reader-size, 18px)); }
  .hub .about-dialog-reading h3 { font-size: 26px; }
  .hub .welcome-start .section-heading { display: block; }
  .hub .welcome-start .section-heading > p { margin-top: 18px; }
}
@media (max-height: 450px) {
  .hub .about-dialog { max-height: calc(100dvh - 16px); }
  .hub .about-dialog-head { padding: 10px 18px; align-items: center; }
  .hub .about-dialog-head .eyebrow { display: none; }
}
@media (forced-colors: active) {
  .hub .about-open, .hub .about-dialog, .hub .about-dialog-head { border: 1px solid CanvasText; }
}