/* ===========================================================================
   About page body — ported from src/components/context-port/about-page.tsx
   Every class is prefixed "ab-". Breakpoints mirror Tailwind:
   sm 640px · md 768px · lg 1024px · xl 1280px
   =========================================================================== */

/* ---------- Fixed background layers (behind the page content) ---------- */
.ab-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: radial-gradient(176.57% 161.52% at 50% 50%, #3a1819 0%, #1a0b0b 100%);
}
.ab-noise {
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: url('../../images/noise.png');
  background-repeat: repeat;
  background-size: 200px 200px;
  opacity: 0.35;
  mix-blend-mode: soft-light;
}

/* ---------- Content layer ---------- */
.ab-content {
  position: relative;
  z-index: 2;
  padding-left: 12px;
  padding-right: 12px;
  line-height: 1.5;
  letter-spacing: normal;
  --ab-hero: var(--font-garamond, 'EB Garamond'), 'EB Garamond', Georgia, serif;
  --ab-mono: 'JetBrains Mono', 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}
/* site.css already zeroes margin/padding on every element (* { margin:0 }) */
.ab-principles { list-style: none; }
.ab-content em { font-style: italic; color: #fdead4; }
@media (min-width: 640px) { .ab-content { padding-left: 20px; padding-right: 20px; } }
@media (min-width: 1280px) { .ab-content { padding-left: 28px; padding-right: 28px; } }

.ab-section { position: relative; z-index: 10; width: 100%; }

/* ---------- Reveal-on-scroll (JS adds .is-visible to [data-ab-reveal]) ----------
   Each .ab-fx element sets its own offset / duration / delay via
   --ty, --dur, --d (inline style in the HTML). */
.ab-fx {
  opacity: 0;
  transform: translateY(var(--ty, 14px));
  transition:
    opacity var(--dur, 700ms) ease-out var(--d, 0ms),
    transform var(--dur, 700ms) ease-out var(--d, 0ms);
}
.is-visible .ab-fx { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .ab-fx { opacity: 1; transform: none; transition: none; }
}

/* ---------- Shared type ---------- */
.ab-h2 {
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(1.5rem, 3.4vw, 2.35rem);
  line-height: 1.08;
  letter-spacing: 0.005em;
  color: #fbf5ee;
}
.ab-lede {
  max-width: 460px;
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.25vw, 0.95rem);
  line-height: 1.6;
  letter-spacing: 0.015em;
  color: rgba(251, 245, 238, 0.68);
}
.ab-kicker {
  font-family: var(--ab-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.35);
}
.ab-ord { margin-right: 6px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.25); }

/* ---------- Buttons ---------- */
.ab-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 2px;
  background: #fbf5ee;
  padding: 12px 24px;
  font-family: var(--ab-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.5;
  color: #210d0e;
  text-decoration: none;
  cursor: pointer;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-btn:hover { background: #fdead4; }
.ab-btn--lg { padding: 14px 28px; font-size: 11px; }
.ab-arrow { display: inline-block; transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1); }
.ab-btn:hover .ab-arrow,
.ab-link:hover .ab-arrow { transform: translateX(3px); }

.ab-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid rgba(251, 245, 238, 0.25);
  padding: 8px 0;
  font-family: var(--ab-hero);
  font-size: 14px;
  font-style: italic;
  color: rgba(251, 245, 238, 0.78);
  text-decoration: none;
  transition: border-color 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-link:hover { border-bottom-color: rgba(251, 245, 238, 0.7); }
.ab-link .ab-arrow { font-style: normal; }

/* ---------- Hero ---------- */
.ab-hero { overflow: hidden; min-height: calc(100vh - 62px); }
.ab-hero__inner {
  max-width: 1220px;
  margin: 0 auto;
  min-height: calc(100vh - 62px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: calc(62px + 4rem) 24px 80px;
}
@media (min-width: 640px) {
  .ab-hero__inner { padding: calc(62px + 6rem) 40px 80px; }
}
.ab-hero__eyebrow { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.ab-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 2px;
  border: 1px solid rgba(251, 245, 238, 0.22);
  background: rgba(251, 245, 238, 0.04);
  padding: 5px 10px;
  font-family: var(--ab-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(251, 245, 238, 0.72);
  text-transform: uppercase;
}
.ab-badge__dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; background: #fdead4; }
.ab-hero__title {
  margin-top: 28px;
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(2rem, 5.5vw, 3.5rem);
  line-height: 1.08;
  letter-spacing: -0.005em;
  color: #fbf5ee;
}
@media (min-width: 640px) { .ab-hero__title { margin-top: 36px; } }
.ab-hero__dek {
  margin-top: 20px;
  max-width: 620px;
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.35vw, 1.05rem);
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: rgba(251, 245, 238, 0.7);
}
.ab-hero__ctas { margin-top: 36px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }

/* ---------- Glass grids (stats + backers) ---------- */
.ab-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
}
@media (min-width: 640px) { .ab-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-grid__lines {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.06);
}
.ab-stats { margin-top: 56px; }
@media (min-width: 640px) { .ab-stats { margin-top: 80px; } }
.ab-stat {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(12, 6, 7, 0.72);
  padding: 20px;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
@media (min-width: 640px) { .ab-stat { padding: 24px; } }
.ab-stat__label {
  font-family: var(--ab-mono);
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgba(255, 255, 255, 0.4);
}
.ab-stat__value {
  font-family: var(--ab-hero);
  font-size: clamp(1.85rem, 3vw, 2.35rem);
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  color: #fbf5ee;
}
.ab-stat__text,
.ab-backer__text,
.ab-leader__bio {
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: 0.85rem;
  line-height: 1.5;
  letter-spacing: 0.01em;
  color: rgba(251, 245, 238, 0.6);
}

/* ---------- Mission ---------- */
.ab-mission__inner { max-width: 920px; margin: 0 auto; padding: 80px 24px; text-align: center; }
@media (min-width: 640px) { .ab-mission__inner { padding: 96px 40px; } }
/* The kicker is an inline <span> (as in the original), so only its opacity animates. */
.ab-quote { position: relative; margin-top: 28px; padding: 0 8px; }
@media (min-width: 640px) { .ab-quote { padding: 0 32px; } }
.ab-quote__mark {
  position: absolute;
  top: -20px;
  left: 0;
  user-select: none;
  line-height: 1;
  font-family: var(--ab-hero);
  font-size: clamp(3rem, 6vw, 5rem);
  font-style: italic;
  color: rgba(253, 234, 212, 0.45);
}
@media (min-width: 640px) { .ab-quote__mark { top: -28px; } }
.ab-quote__text {
  position: relative;
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.55rem);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: #fbf5ee;
}

/* ---------- Chapter break ---------- */
.ab-break {
  position: relative;
  z-index: 10;
  max-width: 1220px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 40px 24px;
}
@media (min-width: 640px) { .ab-break { padding: 56px 40px; } }
.ab-break__line { height: 1px; flex: 1 1 0%; }
.ab-break__line--l { background: linear-gradient(to right, transparent, rgba(251,245,238,0.14) 60%, rgba(251,245,238,0.22)); }
.ab-break__line--r { background: linear-gradient(to left, transparent, rgba(251,245,238,0.14) 60%, rgba(251,245,238,0.22)); }
.ab-break__mark {
  flex-shrink: 0;
  user-select: none;
  font-family: var(--ab-mono);
  font-size: 10px;
  letter-spacing: 0.28em;
  color: rgba(251, 245, 238, 0.38);
  text-transform: uppercase;
  line-height: 1;
}

/* ---------- Article sections (Art. I–IV) ---------- */
.ab-article { scroll-margin-top: 64px; }
.ab-article__inner { max-width: 1220px; margin: 0 auto; padding: 80px 24px; }
@media (min-width: 640px) { .ab-article__inner { padding: 112px 40px; } }

.ab-eyebrow { margin-bottom: 40px; display: flex; align-items: flex-start; gap: 12px; }
.ab-eyebrow__sect {
  font-family: var(--ab-hero);
  font-style: italic;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.04em;
  color: rgba(255, 255, 255, 0.12);
}
.ab-eyebrow__col { display: flex; flex-direction: column; gap: 4px; padding-top: 5px; }
.ab-eyebrow__label {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  background: transparent;
  padding: 3px 8px;
  font-family: var(--ab-mono);
  font-size: 8px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.7);
}

/* Two-column header (Leadership / Backers) */
.ab-split { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) {
  .ab-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: end;
    gap: 64px;
  }
  .ab-split .ab-lede { padding-bottom: 8px; }
}

/* Story */
.ab-story { display: flex; flex-direction: column; gap: 32px; }
@media (min-width: 1024px) {
  .ab-story {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    align-items: start;
    gap: 64px;
  }
  .ab-story .ab-h2 { position: sticky; top: 96px; }
}
.ab-story__body {
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  padding-left: 24px;
}
@media (min-width: 640px) { .ab-story__body { padding-left: 32px; } }
.ab-story__body p {
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(0.9rem, 1.3vw, 1rem);
  line-height: 1.65;
  letter-spacing: 0.012em;
  color: rgba(251, 245, 238, 0.68);
}
.ab-story__body p:first-child { color: rgba(251, 245, 238, 0.85); }

/* Leadership */
.ab-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  font-family: var(--ab-mono);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: rgba(253, 234, 212, 0.85);
}
.ab-tag__line { display: inline-block; height: 1px; width: 24px; background: rgba(253, 234, 212, 0.55); }
.ab-leadhead { display: flex; flex-direction: column; gap: 12px; }

.ab-leaders { margin-top: 48px; display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) { .ab-leaders { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.ab-leader {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 6, 7, 0.6);
  padding: 24px 20px;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  transition: all 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
@media (min-width: 640px) { .ab-leader { padding: 28px 24px; } }
.ab-leader:hover { border-color: rgba(255, 255, 255, 0.18); background: rgba(12, 6, 7, 0.78); }
.ab-leader__row { display: flex; align-items: flex-start; gap: 16px; }
.ab-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  overflow: hidden;
  border-radius: 9999px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  background: rgba(33, 13, 14, 0.7);
}
@media (min-width: 640px) { .ab-avatar { width: 68px; height: 68px; } }
.ab-avatar img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 28%;
  transform: scale(1.06);
  transition: transform 700ms ease-out;
  filter: grayscale(0.5) contrast(1.04) brightness(0.97) sepia(0.16);
}
.ab-leader:hover .ab-avatar img { transform: scale(1.12); }
.ab-avatar__shade {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  background: radial-gradient(120% 80% at 50% 0%, transparent 55%, rgba(33, 13, 14, 0.55) 100%);
  mix-blend-mode: multiply;
}
.ab-avatar__ring {
  position: absolute;
  inset: 0;
  border-radius: 9999px;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(253, 234, 212, 0.1);
}
.ab-leader__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 0%; }
.ab-leader__title {
  font-family: var(--ab-mono);
  font-size: 8.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.4);
}
.ab-leader__name {
  font-family: var(--ab-hero);
  font-size: clamp(1rem, 1.55vw, 1.2rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #fbf5ee;
}
.ab-leader__bio { line-height: 1.55; color: rgba(251, 245, 238, 0.62); }

/* Principles */
.ab-principles {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(12, 6, 7, 0.5);
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
.ab-principle {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 28px 24px;
  transition: background-color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.ab-principle + .ab-principle { border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ab-principle:hover { background-color: rgba(255, 255, 255, 0.02); }
@media (min-width: 640px) { .ab-principle { padding: 36px 32px; } }
@media (min-width: 1024px) { .ab-principle { grid-template-columns: 180px minmax(0, 1fr); gap: 40px; } }
.ab-principle__num { display: flex; align-items: baseline; gap: 12px; }
.ab-principle__roman {
  font-family: var(--ab-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  color: rgba(253, 234, 212, 0.75);
}
.ab-principle__idx {
  font-family: var(--ab-mono);
  font-size: 9.5px;
  font-variant-numeric: tabular-nums;
  color: rgba(251, 245, 238, 0.2);
}
.ab-principle__copy { display: flex; flex-direction: column; gap: 12px; }
.ab-principle__head {
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
  line-height: 1.2;
  letter-spacing: 0.005em;
  color: #fbf5ee;
}
.ab-principle__body {
  max-width: 640px;
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(0.85rem, 1.25vw, 0.95rem);
  line-height: 1.6;
  letter-spacing: 0.015em;
  color: rgba(251, 245, 238, 0.66);
}

/* Backers */
.ab-backers { margin-top: 48px; }
.ab-backer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(12, 6, 7, 0.78);
  padding: 28px 24px;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
}
@media (min-width: 640px) { .ab-backer { padding: 32px 28px; } }
.ab-backer__ord {
  font-family: var(--ab-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(253, 234, 212, 0.75);
}
.ab-backer__names { display: flex; flex-direction: column; gap: 4px; }
.ab-backer__name {
  font-family: var(--ab-hero);
  font-size: clamp(1.4rem, 2.5vw, 1.85rem);
  letter-spacing: -0.005em;
  line-height: 1.1;
  color: #fbf5ee;
}
.ab-backer__qual {
  font-family: var(--ab-hero);
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(253, 234, 212, 0.55);
}
.ab-backer__text { line-height: 1.55; }

/* Join Us CTA */
.ab-cta__inner { max-width: 820px; margin: 0 auto; padding: 96px 24px; text-align: center; }
@media (min-width: 640px) { .ab-cta__inner { padding: 112px 40px; } }
.ab-cta .ab-h2 { margin-top: 24px; line-height: 1.15; }
.ab-cta__text {
  max-width: 520px;
  margin: 24px auto 0;
  font-family: var(--ab-hero);
  font-weight: 400;
  font-size: clamp(0.875rem, 1.3vw, 1rem);
  line-height: 1.6;
  letter-spacing: 0.015em;
  color: rgba(251, 245, 238, 0.68);
}
.ab-cta__btnrow { margin-top: 36px; display: flex; justify-content: center; }

/* Mobile stability: keep the fixed background layers a constant height
   while the phone's address bar slides in and out (prevents flicker). */
.ab-bg,
.ab-noise {
  bottom: auto;
  height: 100vh;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@supports (height: 100lvh) {
  .ab-bg,
  .ab-noise { height: 100lvh; }
}