/* About: Figma Page 12, frame 7008:20176. */
.about-main { padding-top: var(--header-height); }
.about-page .nav__link[aria-current="page"] { color: #000; font-weight: 700; }
.about-page .case-section { width: 100%; }
.about-page h1, .about-page h2, .about-page h3, .about-page p, .about-page figure { margin: 0; }
.about-page .about-lead { width: 903px; max-width: 100%; font: 400 27px/53px Geist, sans-serif; white-space: pre-line; }
.about-intro, .about-personal, .about-contact { display: flex; flex-direction: column; padding: 100px var(--page-gutter) 60px; }
.about-intro { align-items: flex-start; gap: 70px; }
.about-portrait { width: 211px; max-width: 100%; }
.about-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 211 / 300; }
.about-personal { align-items: flex-end; gap: 90px; }
.about-photography { width: 280px; max-width: 100%; display: flex; flex-direction: column; gap: 10px; }
.about-photography img { display: block; width: 100%; height: auto; }
.about-photography figcaption { color: #979797; font: 300 13px/17px Geist, sans-serif; }
.about-carousel { position: relative; width: 280px; max-width: 100%; }
.about-carousel-slides { display: grid; position: relative; }
.about-carousel-edge { position: absolute; top: 0; bottom: 27px; width: 25%; z-index: 2; display: grid; place-items: center; border: 0; padding: 0; background: transparent; cursor: pointer; }
.about-carousel-edge--prev { left: 0; }
.about-carousel-edge--next { right: 0; }
.about-carousel-edge span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #fff; color: #111; box-shadow: 0 2px 12px #0003; font: 400 23px/1 sans-serif; opacity: 0; }
.about-carousel-edge:hover span, .about-carousel-edge:focus-visible span { opacity: 1; }
@media (hover: none) { .about-carousel-edge span { opacity: 1; } }
.about-carousel .about-photography { grid-area: 1 / 1; width: 100%; opacity: 0; pointer-events: none; transition: opacity 800ms cubic-bezier(.22,1,.36,1); }
.about-carousel .about-photography.is-current { opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .about-carousel .about-photography { transition: none; } }
.about-section { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 85px var(--page-gutter); }
.about-section > h2 { flex: 0 1 506px; font: 600 26px/34px Geist, sans-serif; }
.about-list { flex: 0 1 743px; min-width: 0; display: flex; flex-direction: column; gap: 30px; }
.about-entry { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; }
.about-entry > div { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.about-entry h3 { font: 500 15px/20px Geist, sans-serif; }
.about-entry p { color: #a2a2a2; font: 300 16px/21px Geist, sans-serif; }
.about-entry time { flex-shrink: 0; font: 400 13px/17px Geist, sans-serif; }
.about-section[data-figma-id="7008:20227"] .about-entry { display: grid; grid-template-columns: minmax(0, 1fr) max-content; }
.about-section[data-figma-id="7008:20227"] .about-entry > div { overflow-wrap: anywhere; }
.about-section[data-figma-id="7008:20227"] .about-entry time { white-space: nowrap; }
.about-contact { gap: 20px; }
.about-contact-links { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 20px; }
.about-linkedin { display: grid; place-items: center; min-width: 44px; min-height: 44px; }
.about-linkedin img { display: block; width: 25px; height: 25px; }
.about-contact a:hover { text-decoration: underline; text-underline-offset: 5px; }
.about-page > .site-footer { margin: 68px auto 0; max-width: 1442px; }
@media (max-width: 1100px) {
  .about-section > h2 { flex-basis: 36%; }
  .about-list { flex-basis: 60%; }
  .about-entry { flex-wrap: wrap; gap: 10px 20px; }
}
@media (max-width: 760px) {
  .about-page .about-lead { font-size: 23px; line-height: 1.7; }
  .about-intro, .about-personal, .about-contact { gap: 32px !important; }
  .about-section > h2, .about-list { flex-basis: auto; width: 100%; }
  .about-contact-links { align-items: flex-start; }
  .about-contact-links .about-lead { width: auto; font-size: clamp(17px, 4.5vw, 23px); overflow-wrap: anywhere; }
  .about-page > .site-footer { margin-top: 32px; }
}