/* About page (#section-about): all the bio text in one column with the studio photo beside it on the right, so no
   paragraph changes width halfway through. References across the bottom.
   When the box is narrower than 760px (phones, small windows) the photo sits above the text at full width.
   (Previous version: _to_delete/about.css.before-aboutv3)
   (Earlier versions: _to_delete/about.css.before-photowrap (two columns), about.css.before-aboutgrid (text flowing round the photo)) */

.about-heading {
  font-size: 1.1rem;
  letter-spacing: 1px;
  color: #ffffff;
  margin: 0 0 14px;
}
.about-bio {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40%;
  column-gap: 32px;
  align-items: start;
}
.about-text { grid-column: 1; grid-row: 1; }
.about-bio p {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.75;
  margin: 0 0 14px;
}
.about-bio em { color: #ffffff; }

/* the photo stays in view beside the text while the box is scrolled */
#section-about .studio-photo { grid-column: 2; grid-row: 1; margin: 4px 0 16px; position: sticky; top: 16px; }
#section-about .studio-photo img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}

/* "Get in touch" button under the bio: opens the Contact page (same look as the buttons in Latest) */
.about-bio p.about-contact-row { margin-top: 6px; }
.about-contact {
  display: inline-block;
  font-family: var(--font-family);
  color: #ffffff;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 999px;
  padding: 9px 18px;
  font-size: 0.7rem;
  letter-spacing: 1px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.about-contact:hover, .about-contact:focus-visible { background: #ffffff; color: #000000; outline: none; }

.about-refs {
  margin-top: 26px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}
.about-quotes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
.about-quote {
  margin: 0;
  padding: 20px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
}
.about-quote blockquote { margin: 0 0 14px; }
.about-quote blockquote p {
  margin: 0;
  color: #ffffff;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.7;
}
.about-quote figcaption { color: var(--text-muted); font-size: 0.8rem; line-height: 1.5; }
.about-quote figcaption strong { display: block; color: #ffffff; font-weight: bold; }

/* Narrow About box (phones, small windows): the photo above the text at full width.
   The width of the box decides, not the window, so the text column never gets too narrow. */
#section-about .content-box { container-type: inline-size; }
@container (max-width: 760px) {
  .about-bio { grid-template-columns: 1fr; }
  #section-about .studio-photo { grid-column: 1; grid-row: 1; margin: 0 0 20px; position: static; }
  .about-text { grid-row: 2; }
  #section-about .studio-photo img { max-height: 46vh; object-fit: cover; }
}