/* Cutting Room — About section: bio copy + grayscale-to-color portrait */

.about-grid { display: grid; grid-template-columns: 1.3fr 0.9fr; gap: clamp(40px, 6vw, 80px); align-items: start; }
.about-copy { font-size: 17px; font-weight: 400; line-height: 1.75; max-width: 58ch; }
.about-copy p { text-align: justify; hyphens: auto; margin: 0 0 1.1em; }
.about-copy p:last-child { margin-bottom: 0; }
.about-photo {
  aspect-ratio: 3 / 4; width: 100%; max-width: 380px;
  background: var(--panel); border: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.about-photo img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  filter: grayscale(1); transition: filter 0.5s ease;
}
.about-photo:hover img, .about-photo:focus-within img { filter: grayscale(0); }
.about-photo:focus-visible { outline: 1px solid var(--ink); outline-offset: 4px; }
.about-photo span { font-size: 13px; letter-spacing: 0.03em; color: var(--ink-faint); }
.about-list {
  margin-top: clamp(36px, 5vw, 56px);
  font-size: 13px; letter-spacing: 0.04em;
  color: var(--ink-dim); display: flex; flex-wrap: wrap; gap: 10px 0;
}
.about-list span:not(:last-child)::after { content: "  /  "; color: var(--ink-faint); }

@media (max-width: 900px) {
  .about-grid { grid-template-columns: 1fr; gap: 28px; }
  .about-photo { max-width: none; aspect-ratio: 4 / 5; }
  .about-copy { font-size: 16px; }
  .about-copy p { text-align: left; hyphens: none; }
}

@media (hover: none) {
  .about-photo img { filter: grayscale(0); }
}