/* About page editorial chapters. Scoped below the existing organization map. */
.about-story {
  --story-ink: #f3f1e7;
  --story-muted: #b9c4ba;
  --story-gold: #d8bd79;
  position: relative;
  color: var(--story-ink);
  background: transparent;
}
.about-story, .about-story * { box-sizing: border-box; }
.about-story .story-shell {
  width: min(1120px, calc(100% - 64px));
  margin-inline: auto;
}
.about-story .story-chapter {
  position: relative;
  min-height: 0;
  margin: 0;
  padding: clamp(42px, 6vw, 80px) 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  overflow: visible;
}
.about-story .story-chapter::before,
.about-story .story-chapter::after { content: none; }
.about-story h2,
.about-story h3,
.about-story p { margin: 0; padding: 0; text-shadow: none; }
.about-story h2,
.about-story h3 {
  color: var(--story-ink);
  background: none;
  -webkit-text-fill-color: currentColor;
  transform: none;
  opacity: 1;
  letter-spacing: -.025em;
  text-wrap: pretty;
  overflow-wrap: break-word;
}
.about-story h2 {
  font-size: clamp(30px, 3.15vw, 44px);
  font-weight: 650;
  line-height: 1.45;
}
.about-story h2 span {
  color: var(--story-gold);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.about-story h3 { font-size: 23px; line-height: 1.5; font-weight: 650; }
.about-story p { font-size: 16px; line-height: 1.85; color: var(--story-muted); }
.about-story .story-label {
  font-size: 13px;
  line-height: 1.6;
  font-weight: 600;
  letter-spacing: .13em;
  color: var(--story-gold);
  margin-bottom: 22px;
}
.about-story .story-directory,
.about-story .story-principles {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(36px, 6vw, 90px);
}
.about-story .story-intro > p:last-child:not(.story-label) { margin-top: 20px; max-width: 34ch; }
.about-story .story-organizations { min-width: 0; }
.about-story .story-org {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  column-gap: 28px;
  align-items: center;
  padding: 26px 0;
  border: 0;
  border-bottom: 1px solid rgba(174, 200, 173, .12);
  background: none;
  border-radius: 0;
  box-shadow: none;
}
.about-story .story-org:first-child { padding-top: 0; }
.about-story .story-org:last-child { border-bottom: 0; padding-bottom: 0; }
.about-story .story-org-logo { display: flex; align-items: center; justify-content: center; height: 84px; }
.about-story .story-org-logo img { display: block; width: 100%; height: 80px; object-fit: contain; border: 0; border-radius: 10px; }
.about-story .story-org:first-child .story-org-logo img { width: 64px; height: 64px; }
.about-story .story-role { color: #94ad9d; font-size: 13px; line-height: 1.7; margin-bottom: 4px; }
.about-story .story-org h3 { margin-bottom: 8px; }
.about-story .story-founder {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.about-story .story-portrait {
  position: relative;
  margin: 0;
  aspect-ratio: 4 / 4.6;
  overflow: hidden;
  border-radius: 22px;
  background: #0c1912;
}
.about-story .story-portrait::after {
  content: '';
  position: absolute;
  inset: 40% 0 0;
  background: linear-gradient(transparent, rgba(3, 14, 8, .94));
  pointer-events: none;
}
.about-story .story-portrait > img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 78% center;
}
.about-story .story-portrait figcaption { position: absolute; z-index: 1; inset: auto 30px 28px; display: grid; gap: 3px; }
.about-story .story-portrait figcaption strong { font-size: 28px; letter-spacing: .08em; color: var(--story-ink); }
.about-story .story-portrait figcaption span { font-size: 12px; letter-spacing: .1em; color: var(--story-gold); }
.about-story .story-founder-copy > p:not(.story-label) { margin-top: 22px; }
.about-story .story-text-link {
  display: inline-flex;
  align-items: center;
  gap: 20px;
  color: var(--story-ink);
  text-decoration: none;
  font-size: 16px;
  line-height: 1.65;
  padding: 12px 0;
  border-bottom: 1px solid rgba(216, 189, 121, .45);
  transition: color .2s, border-color .2s;
}
.about-story .story-founder-copy .story-text-link { margin-top: 22px; }
.about-story .story-text-link span { color: var(--story-gold); }
.about-story .story-text-link:hover { color: var(--story-gold); border-color: var(--story-gold); }
.about-story a:focus-visible { outline: 2px solid var(--story-gold); outline-offset: 6px; }
.about-story .story-principle-list { list-style: none; padding: 0; margin: 0; }
.about-story .story-principle-list li {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 20px;
  padding: 22px 0;
  border-bottom: 1px solid rgba(174, 200, 173, .12);
}
.about-story .story-principle-list li:first-child { padding-top: 0; }
.about-story .story-principle-list li:last-child { border: 0; padding-bottom: 0; }
.about-story .story-number { font-size: 15px; line-height: 2.2; font-variant-numeric: tabular-nums; color: var(--story-gold); }
.about-story .story-principle-list h3 { margin-bottom: 8px; }
.about-story .story-closing { padding-bottom: 64px; }
.about-story .story-contact {
  position: relative;
  isolation: isolate;
  text-align: center;
  padding: 44px 0;
}
.about-story .story-contact::before {
  content: '';
  position: absolute;
  inset: -50px -20px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(49, 112, 70, .16), transparent 68%);
}
.about-story .story-contact h2 { font-size: clamp(32px, 3.8vw, 52px); }
.about-story .story-contact > p:not(.story-label) { margin: 24px auto 0; max-width: 650px; }
.about-story .story-actions { display: flex; justify-content: center; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 30px; }
.about-story .story-actions .btn { min-height: 52px; padding: 14px 28px; font-size: 16px; gap: 20px; }
@media (max-width: 760px) {
  .about-story .story-shell { width: calc(100% - 40px); }
  .about-story .story-chapter { padding: 36px 0; }
  .about-story .story-directory,
  .about-story .story-principles,
  .about-story .story-founder { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .about-story h2 { font-size: clamp(28px, 6.9vw, 36px); line-height: 1.5; }
  .about-story h3 { font-size: 21px; line-height: 1.5; }
  .about-story .story-label { margin-bottom: 16px; font-size: 12px; }
  .about-story .story-intro > p:last-child:not(.story-label) { max-width: 100%; margin-top: 16px; }
  .about-story .story-org { grid-template-columns: 78px minmax(0, 1fr); gap: 18px; padding: 24px 0; align-items: start; }
  .about-story .story-org-logo { height: 64px; margin-top: 8px; }
  .about-story .story-org-logo img { height: 64px; }
  .about-story .story-org:first-child .story-org-logo img { width: 54px; height: 54px; }
  .about-story .story-portrait { aspect-ratio: 4 / 4.2; max-width: 480px; width: 100%; margin-inline: auto; }
  .about-story .story-principle-list li { grid-template-columns: 28px minmax(0, 1fr); gap: 16px; }
  .about-story .story-contact { padding: 16px 0; }
  .about-story .story-contact h2 { font-size: clamp(29px, 7.2vw, 38px); }
  .about-story .story-desktop-break { display: none; }
  .about-story .story-actions { flex-direction: column; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .about-story * { transition: none !important; }
}