/* ===== ABOUT SECTION =====
 * Centered "personnel dossier" panel, distinct from left/right project panels.
 * Layout and styling follow the Stitch-generated template (stitch_about.html).
 */

/* Positioning overlay (GSAP controls opacity + scale) */
#about {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

#about.is-visible {
  pointer-events: auto;
}

/* Centered container -- wider than project panels */
.about-panel {
  max-width: 920px;
  width: calc(100% - 80px);
  position: relative;
}

/* Stronger glow than default .glass-panel (panel.css) — the about section
   is the primary content panel and needs more visual presence. */
.about-panel > .glass-panel {
  box-shadow:
    0 0 40px var(--shadow-dark),
    0 0 15px rgb(var(--accent) / 0.15);
}

/* Local CRT scanline texture inside the panel (Stitch design) */
.about-scanline {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
}

/* ===== PORTRAIT ===== */
.about-portrait img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0.8) brightness(0.68) contrast(1.15);
  opacity: 0.95;
  transition: filter 0.7s ease;
}

.about-portrait:hover img {
  filter: grayscale(0.3) brightness(0.78) contrast(1.1);
}

/* Portrait brackets: see panel.css bracket system (.portrait-bracket variant) */

/* ===== DIAMONDS (size only — base styles from effects.css) ===== */
.scan-header__diamond,
.about-footer__diamond {
  width: 4px;
  height: 4px;
  flex-shrink: 0;
}

/* ===== QUOTE ===== */
.about-quote {
  font-family: var(--font-serif);
  font-style: italic;
  color: rgb(var(--text-primary-rgb) / 0.9);
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.4;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
  .about-panel {
    width: calc(100% - 40px);
  }

  #about {
    align-items: flex-start;
    padding-top: 5vh;
  }
}