/* About page — portrait (B mask) + bio stack */

.about {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  padding: 16px 24px 48px;
  box-sizing: border-box;
}

.about__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
  margin-bottom: 32px;
}

.about__content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  flex: 1;
}

.about__text {
  margin: 0;
  max-width: 40ch;
  color: var(--md-sys-color-on-surface);
}

/* 3:4 portrait in expressive “B” mask (two stacked bowls + stem radii) */

.about-portrait {
  display: flex;
  flex-direction: column;
  width: min(100%, 300px);
  aspect-ratio: 3 / 4;
  margin: 0;
  flex-shrink: 0;
  border-radius: 40px;
  overflow: hidden;
}

.about-portrait__bowl {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    var(--md-sys-color-surface-container) 0%,
    var(--md-sys-color-surface-container-highest) 100%
  );
}

.about-portrait__bowl--top {
  border-start-start-radius: var(--md-sys-shape-corner-large);
  border-start-end-radius: var(--md-sys-shape-corner-full);
  border-end-end-radius: var(--md-sys-shape-corner-full);
}

.about-portrait__bowl--bottom {
  border-end-start-radius: var(--md-sys-shape-corner-large);
  border-start-end-radius: var(--md-sys-shape-corner-full);
  border-end-end-radius: var(--md-sys-shape-corner-full);
}

.about-portrait__image {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(200% + 8px);
  object-fit: cover;
}

.about-portrait__bowl--top .about-portrait__image {
  top: 0;
}

.about-portrait__bowl--bottom .about-portrait__image {
  bottom: 0;
  top: auto;
}

.about-portrait__image[src=""],
.about-portrait__image:not([src]) {
  visibility: hidden;
}

@media (min-width: 768px) {
  .about__content {
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    gap: 80px;
    max-width: 960px;
    margin-inline: auto;
  }

  .about-portrait {
    width: 300px;
  }

  .about__text {
    flex: 1;
    min-width: 0;
    max-width: 40ch;
  }
}

@media (max-width: 767px) {
  .about {
    padding: 16px 16px 40px;
  }

  .about-portrait {
    width: min(100%, 260px);
  }
}