/* ABOUT PAGE 2026-09-24
   Scoped to #about-page-2026 / .abp-*. Dedicated sheet — do not merge into adaptive tip
   or any *-lock.css. Links surgically from main.tpl BEFORE font-scale-110. */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Source+Serif+4:opsz,wght@8..60,600;700&display=swap");

.abp {
  --abp-ink: #1a2430;
  --abp-ink-soft: #2c3a4a;
  --abp-muted: #5a6675;
  --abp-line: #d5dde6;
  --abp-bg: #eef2f6;
  --abp-paper: #f7f9fb;
  --abp-card: #ffffff;
  --abp-accent: #1f5f74;
  --abp-accent-deep: #0e3f4d;
  --abp-accent-soft: #e4f1f5;
  --abp-warm: #9a4e28;
  --abp-warm-soft: #f7ebe4;
  --abp-ok: #1f6b4a;
  color: var(--abp-ink);
  font-family: "Manrope", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  margin: 0 0 1.5rem;
}

#about-page-2026.abp {
  animation: abp-fade 0.55s ease both;
}

@keyframes abp-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}

@keyframes abp-rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

.abp__hero {
  position: relative;
  overflow: hidden;
  padding: 1.2rem 1.2rem 1.35rem;
  margin: 0 0 1.15rem;
  border: 1px solid var(--abp-line);
  border-left: 4px solid var(--abp-accent);
  background:
    linear-gradient(125deg, rgba(31, 95, 116, 0.14), rgba(238, 242, 246, 0.94) 44%, #e8eef3),
    repeating-linear-gradient(
      -16deg,
      transparent,
      transparent 11px,
      rgba(31, 95, 116, 0.035) 11px,
      rgba(31, 95, 116, 0.035) 12px
    );
  animation: abp-rise 0.6s ease both;
}

.abp__kicker {
  margin: 0 0 0.35rem;
  font-size: 0.76rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--abp-accent);
}

.abp__title {
  margin: 0 0 0.5rem;
  font-family: "Source Serif 4", Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  line-height: 1.18;
  font-weight: 700;
  color: var(--abp-ink);
}

.abp__lead {
  margin: 0;
  max-width: 44rem;
  color: var(--abp-muted);
  font-size: 1rem;
}

.abp__lead strong {
  color: var(--abp-ink-soft);
  font-weight: 700;
}

.abp__note {
  margin: 0 0 1.1rem;
  padding: 0.75rem 0.95rem;
  border: 1px solid var(--abp-line);
  border-left: 3px solid var(--abp-warm);
  background: var(--abp-warm-soft);
  color: var(--abp-ink-soft);
  font-size: 0.92rem;
  animation: abp-rise 0.55s ease 0.05s both;
}

.abp__note a {
  color: var(--abp-accent-deep);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.abp__section {
  margin: 0 0 1.25rem;
  padding: 0;
  animation: abp-rise 0.6s ease 0.1s both;
}

.abp__section + .abp__section {
  animation-delay: 0.14s;
}

.abp__h2 {
  margin: 0 0 0.45rem;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 1.28rem;
  line-height: 1.25;
  font-weight: 700;
  color: var(--abp-ink);
}

.abp__text {
  margin: 0 0 0.75rem;
  max-width: 44rem;
  color: var(--abp-muted);
  font-size: 0.98rem;
}

.abp__text a {
  color: var(--abp-accent);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(31, 95, 116, 0.35);
}

.abp__text a:hover,
.abp__text a:focus {
  border-bottom-color: var(--abp-accent);
}

.abp__sections {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.55rem 0.85rem;
}

.abp__sections li {
  margin: 0;
  padding: 0;
}

.abp__sections a {
  display: block;
  padding: 0.55rem 0.15rem 0.55rem 0;
  color: var(--abp-ink);
  text-decoration: none;
  border-bottom: 1px solid var(--abp-line);
  transition: color 0.15s ease, border-color 0.15s ease;
}

.abp__sections a:hover,
.abp__sections a:focus {
  color: var(--abp-accent-deep);
  border-bottom-color: var(--abp-accent);
}

.abp__sec-name {
  display: block;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1.3;
}

.abp__sec-desc {
  display: block;
  margin-top: 0.15rem;
  font-size: 0.86rem;
  color: var(--abp-muted);
  font-weight: 500;
  line-height: 1.4;
}

.abp__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.65rem;
}

.abp__facts li {
  margin: 0;
  padding: 0.7rem 0.85rem;
  border-left: 3px solid var(--abp-accent);
  background: var(--abp-paper);
  color: var(--abp-ink-soft);
  font-size: 0.95rem;
}

.abp__facts strong {
  color: var(--abp-ink);
}

.abp__cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem 0.7rem;
  margin: 0.85rem 0 0;
}

.abp__btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  border: 1px solid var(--abp-accent);
  background: var(--abp-accent);
  color: #fff !important;
  text-decoration: none !important;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.abp__btn:hover,
.abp__btn:focus {
  background: var(--abp-accent-deep);
  border-color: var(--abp-accent-deep);
}

.abp__btn--ghost {
  background: var(--abp-card);
  color: var(--abp-accent-deep) !important;
  border-color: var(--abp-line);
}

.abp__btn--ghost:hover,
.abp__btn--ghost:focus {
  background: var(--abp-accent-soft);
  border-color: var(--abp-accent);
}

.abp__legal {
  margin: 1.1rem 0 0;
  padding: 0.85rem 0 0;
  border-top: 1px solid var(--abp-line);
  color: var(--abp-muted);
  font-size: 0.9rem;
}

.abp__legal p {
  margin: 0 0 0.55rem;
  max-width: 46rem;
}

.abp__legal a {
  color: var(--abp-accent-deep);
  font-weight: 600;
}

.abp__contact {
  margin: 0;
  padding: 0.85rem 0.95rem;
  background: var(--abp-accent-soft);
  border: 1px solid var(--abp-line);
}

.abp__contact p {
  margin: 0 0 0.45rem;
  color: var(--abp-ink-soft);
  font-size: 0.95rem;
}

.abp__contact p:last-child {
  margin-bottom: 0;
}

.abp__soft {
  color: var(--abp-muted);
  font-size: 0.88rem;
}

/* Hide legacy full-story title chrome when our block is present */
.full-story:has(#about-page-2026) > .post_title {
  display: none;
}

.full-story:has(#about-page-2026) .post_content {
  padding-top: 0.15rem;
}

@media (max-width: 720px) {
  .abp__title {
    font-size: 1.4rem;
  }

  .abp__h2 {
    font-size: 1.15rem;
  }

  .abp__sections {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .abp__hero {
    padding: 1rem 0.95rem 1.15rem;
  }

  .abp__btn {
    width: 100%;
    text-align: center;
  }
}