/* =========================================
   about.css - About view only (QUO-13 / OCW-6)
   Follows the same page furniture as the four role pages (scroll surface,
   eyebrow, title scale, block rhythm) so About reads as part of one site.
   Monochrome, base.css tokens only, spring easing, no literal hex.
   ========================================= */

.about-view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: transparent;
  z-index: 1;
}

/* #viewMount clips, so the page scrolls on its own surface. */
.about-scroll {
  height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(32px, 6vh, 72px) clamp(20px, 5vw, 64px) clamp(48px, 10vh, 96px);
  -webkit-overflow-scrolling: touch;
}

.about-header {
  max-width: 30ch;
  margin: 0 0 clamp(36px, 6vh, 60px);
}

.about-eyebrow {
  margin: 0 0 18px;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--sidebar-text);
}

/* Mission pull-quote: the one piece of final copy, so it gets the headline scale. */
.about-mission {
  margin: 0;
  padding: 0 0 0 clamp(16px, 2vw, 24px);
  border-left: 2px solid var(--sidebar-active-text);
}

.about-mission p {
  margin: 0;
  font-size: clamp(1.6rem, 3.6vw, 2.5rem);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -0.025em;
  color: var(--sidebar-active-text);
}

.about-block {
  max-width: 68ch;
  margin: 0 0 clamp(32px, 5vh, 52px);
}

.about-body p {
  margin: 0 0 18px;
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.7;
  color: var(--sidebar-text);
}

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

.about-entity-list {
  margin: 0;
  border: 1px solid var(--border-content-frame);
  border-radius: 18px;
  background: var(--modal-close-bg);
  overflow: hidden;
}

.about-entity-row {
  display: grid;
  grid-template-columns: minmax(150px, 34%) 1fr;
  gap: 16px;
  padding: 16px 20px;
}

.about-entity-row + .about-entity-row { border-top: 1px solid var(--border-content-frame); }

.about-entity-row dt {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sidebar-text);
  padding-top: 3px;
}

.about-entity-row dd {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--sidebar-active-text);
}

.about-lineage {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-top: clamp(22px, 3vh, 30px);
  border-top: 1px solid var(--border-content-frame);
}

.about-quonord {
  margin: 0;
  font-size: 0.9rem;
  letter-spacing: 0.02em;
  color: var(--sidebar-text);
}

.about-social { display: flex; gap: 10px; }

.about-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--border-content-frame);
  border-radius: 50%;
  color: var(--sidebar-text);
  transition: color 0.22s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.22s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-social-link:hover {
  color: var(--sidebar-active-text);
  border-color: var(--modal-dialog-border);
  background: var(--nav-icon-hover-bg);
}

.about-social-link:focus-visible {
  outline: 2px solid var(--sidebar-active-text);
  outline-offset: 2px;
}

@media (max-width: 600px) {
  .about-entity-row { grid-template-columns: 1fr; gap: 4px; padding: 14px 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-social-link { transition: none; }
}