@import url("home-editorial.css?v=20261109-7");

.about-page .site-nav a[aria-current="page"] { color: #bdbdbd; }
.about-hero { padding-bottom: 0; }
.about-portrait { display: flex; align-items: end; justify-content: center; height: 440px; margin: 0; }
.about-portrait img { width: auto; height: 100%; max-width: 100%; object-fit: contain; border-radius: 8px 8px 0 0; }
.about-snapshots { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 20px; border-top: 1px solid var(--portfolio-line); padding-block: 32px 64px; }
.about-snapshots a { display: block; min-width: 0; padding: 6px; border-radius: 12px; background: var(--portfolio-paper); box-shadow: 0 1px 4px rgb(0 0 0 / .2); transition: box-shadow var(--portfolio-motion); }
.about-snapshots img { width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: contain; border-radius: 6px; background: var(--portfolio-fog); }
.about-band { padding-block: 96px; background: #fafafa; border-block: 1px solid var(--portfolio-line); }
.about-section { padding-block: 96px; }
.about-page h2 { font-size: 2.25rem; font-weight: 300; line-height: 1.2; letter-spacing: 0; }
.about-page h2 + p { margin-top: 24px; }
.about-page p + p { margin-top: 24px; }
.about-section, .about-story { font-size: 1.25rem; line-height: 1.7; }
.about-section-lead { color: var(--portfolio-text); font-size: 1.25rem; line-height: 1.7; }
.about-story { display: grid; grid-template-columns: minmax(0, 41fr) minmax(0, 59fr); gap: 40px; }
.about-story p { max-width: 65ch; }
.about-practice { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px) minmax(0, 1fr); align-items: center; gap: 80px; }
.about-practice > :last-child { justify-self: end; }
.about-practice h2 { font-size: 2.25rem; }
.about-practice ul { list-style: none; padding: 0; margin-top: 24px; }
.about-practice li + li { margin-top: 8px; }
.about-practice-image, .about-leadership-image { min-width: 0; margin: 0; }
.about-leadership-image img { width: 100%; height: auto; border-radius: 8px; }
.about-practice-image svg { display: block; width: 100%; height: auto; }
.practice-designer { fill: #d2d2d2; }
.practice-coder { fill: var(--portfolio-text); }
.about-practice-image text { font: 600 22px var(--portfolio-font); }
.practice-designer-label { fill: var(--portfolio-text); }
.practice-coder-label { fill: var(--portfolio-paper); }
.about-principles { display: grid; gap: 32px; margin: 0; }
.about-principles dt { margin-bottom: 8px; font-size: 1.5rem; line-height: 1.3; }
.about-principles dd { margin: 0; }
.about-leadership { align-items: center; }
.about-text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 24px; text-decoration: underline; }
.about-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; align-items: start; margin-top: 40px; }
.about-faq details { border-bottom: 1px solid var(--portfolio-line); }
.about-faq summary { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; padding-block: 24px; list-style: none; cursor: pointer; font-weight: 500; }
.about-faq summary::-webkit-details-marker { display: none; }
.about-faq summary::after { content: ""; flex: 0 0 8px; width: 8px; height: 8px; margin-right: 4px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.about-faq details[open] summary::after { transform: rotate(225deg); }
.about-faq details p { padding-bottom: 24px; }
.about-faq a { text-decoration: underline; }

@media (hover: hover) {
  .about-snapshots a:hover { box-shadow: 0 4px 8px rgb(0 0 0 / .2); }
}

@media (max-width: 1000px) and (min-width: 760px) {
  .about-practice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
  .about-practice-image { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 400px; justify-self: center; }
}

@media (max-width: 759px) {
  .about-hero { gap: 32px; }
  .about-portrait { height: auto; max-width: 340px; justify-self: center; }
  .about-portrait img { width: 100%; height: auto; }
  .about-snapshots { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-block: 24px 48px; }
  .about-section, .about-band { padding-block: 64px; }
  .about-story { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .about-practice { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; align-items: start; }
  .about-practice > :last-child { justify-self: stretch; }
  .about-practice h2 { font-size: 1.5rem; letter-spacing: 0; }
  .about-practice ul { font-size: 1rem; }
  .about-practice-image { grid-column: 1 / -1; grid-row: 2; width: 100%; max-width: 400px; justify-self: center; }
  .about-faq { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
}

@media (max-width: 374px) {
  .about-practice { grid-template-columns: minmax(0, 1fr); }
  .about-practice-image { grid-row: auto; }
}