/**

 * About page — magazine-style portrait float

 * /about/index.html

 */



.about-content {

  max-width: 61.25rem; /* ~980px */

}



.about-prose {

  font-size: var(--text-lg);

  line-height: var(--leading-relaxed);

  color: var(--color-text-secondary);

}



.about-prose::after {

  content: "";

  display: table;

  clear: both;

}



.about-prose p {

  margin: 0 0 var(--space-5);

}



.about-prose p:last-child {

  margin-bottom: 0;

}



.about-prose__closing {

  font-style: italic;

  color: var(--color-text-muted);

}



.about-portrait {

  margin: 0 0 var(--space-6);

  width: min(100%, 18.5rem);

}



.about-portrait__frame {

  overflow: hidden;

  border-radius: var(--radius-lg);

  border: 1px solid rgba(196, 165, 116, 0.38);

  background: linear-gradient(145deg, #faf8f5, #f0ebe3);

  box-shadow:

    0 4px 20px rgba(42, 51, 68, 0.07),

    inset 0 1px 0 rgba(255, 255, 255, 0.8);

}



.about-portrait__frame img {

  display: block;

  width: 100%;

  aspect-ratio: 3 / 4;

  object-fit: cover;

  object-position: center 15%;

}



@media (min-width: 768px) {

  .about-portrait {

    float: left;

    width: clamp(18.75rem, 21vw, 21.25rem); /* 300–340px */

    margin: 0 clamp(1.75rem, 2.5vw, 2.5rem) var(--space-5) 0;

  }

}



@media (max-width: 767px) {

  .about-portrait {

    margin-inline: auto;

    width: min(100%, 20rem);

  }

}