/* ---------- v15: about overlay on the homepage (replaces the standalone about page) ---------- */
.about-overlay { position: fixed; inset: 0; z-index: 80; }
.about-overlay[hidden] { display: none; }
.about-backdrop { position: absolute; inset: 0; background: rgba(24, 20, 14, .46); }
.about-panel { position: absolute; left: 50%; top: calc(var(--hdr-h) + 12px);
  transform: translate(-50%, 0);
  width: min(520px, 94vw); max-height: min(76vh, calc(100vh - 130px));
  display: flex; flex-direction: column;
  background: rgba(245,242,234,.28); color: #1c1a16; border: 1px solid rgba(160,148,116,.5);
  backdrop-filter: blur(22px) saturate(1.4); -webkit-backdrop-filter: blur(22px) saturate(1.4);
  box-shadow: 0 24px 70px rgba(10, 8, 4, .40); }
.about-scroll { overflow-y: auto; font-size: 11.5px; line-height: 1.65; }
.about-scroll .doc-h1 { font-size: 1.28rem; }
.about-scroll .doc-h2 { font-size: .98rem; }
.about-scroll .lede { font-size: .88rem; }
.about-foot { font-size: .78rem; }
.about-close { position: absolute; top: 10px; right: 12px; z-index: 2; width: 34px; height: 34px;
  background: transparent; border: 1px solid #b9b2a4; color: inherit; cursor: pointer;
  font-family: var(--serif); font-size: 20px; line-height: 1; }
.about-close:hover { background: rgba(176, 32, 42, .08); }
.about-foot { margin-top: 2.6rem; border-top: 1px solid #b9b2a4; padding-top: 1.2rem;
  font-size: .88rem; color: #6b655a; }
.about-foot .brand-line { color: #1c1a16; font-weight: 700; margin-bottom: .3rem; }
.about-foot a { color: #B0202A; text-decoration: none; }
body.theme-dark .about-panel { background: rgba(10,17,23,.28); color: #dfe7ee; border-color: rgba(60,84,104,.5); }
body.theme-dark .bgis-help { color: #e8eef4; }
body.theme-dark .about-close { border-color: #2e4a59; }
body.theme-dark .about-foot { border-top-color: #2e4a59; color: #8fa3b0; }
body.theme-dark .about-foot .brand-line { color: #dfe7ee; }
.bgis-help { font-family: var(--serif); font-weight: 700; font-size: 16px; }
@media (max-width: 640px) {
  .about-panel { max-height: min(84vh, calc(100vh - 120px)); width: 94vw; }
}

/* ---------- v19: about head fixed, only the body scrolls ---------- */
.about-head { flex: 0 0 auto; padding-bottom: 0; }
.about-scroll { padding-top: 0; padding-bottom: 1.3rem; }

/* ---------- v29: about type smaller, head tighter, footer one row ----------
   The generic doc styles (.bawrap p 16px, .doc-h1 2rem, 2.5rem wrap
   padding) outrank the old about rules, so these are scoped to the
   panel with higher specificity. */
.about-panel .about-head { padding: 16px 20px 0; }
.about-panel .about-scroll { padding: 2px 20px 18px; }
.about-panel .doc-h1 { font-size: 17px; line-height: 1.35; margin: 0 0 .3em; }
.about-panel .lede { font-size: 12.5px; margin: 0; }
.about-panel .doc-rule { margin: 10px 0 4px; }
.about-panel .doc-h2 { font-size: 13.5px; margin: 1.15em 0 .45em; }
.about-panel .about-scroll .doc-h2:first-child { margin-top: .3em; }
.about-panel .about-scroll { font-size: 11px; line-height: 1.65; }
.about-panel .about-scroll p, .about-panel .about-scroll li { font-size: 11px; line-height: 1.7; }
.about-panel .about-foot { margin-top: 1.5rem; padding-top: .85rem; font-size: 11px; }
.about-foot .foot-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.about-foot .foot-row .brand-line { margin-bottom: 0; }
.about-foot .foot-tag { margin-top: .35rem; }