.about-page { overflow: clip; }
.js-ready .about-page .reveal { opacity: 0; transform: translateY(18px); transition: opacity .75s ease, transform .9s cubic-bezier(.2,.75,.25,1); }
.js-ready .about-page .reveal.visible { opacity: 1; transform: none; }
.about-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 9%; padding-top: 58px; padding-bottom: 76px; max-width: 1800px; margin-inline: auto; }
.about-hello { align-self: end; padding-top: 25px; }
.about-hello .eyebrow { color: var(--cranberry); margin-bottom: 28px; }
.about-hello h1 { font-size: clamp(72px, 8.8vw, 148px); line-height: .99; letter-spacing: -.04em; }
.about-hello h1 em { display: inline-block; padding-bottom: .08em; }
.about-portrait { grid-column: 2; grid-row: 1 / 3; min-width: 0; align-self: center; position: relative; }
.about-portrait img { width: 100%; height: auto; max-height: calc(100svh - var(--header) - 118px); object-fit: contain; }
.about-portrait figcaption { display: flex; justify-content: space-between; gap: 16px; font-size: 10px; margin-top: 16px; color: var(--muted); }
.about-intro { align-self: start; max-width: 510px; padding-top: 30px; }
.about-intro p { font-size: 14px; color: var(--muted); }
.about-intro .about-lead { color: var(--ink); font-size: 18px; line-height: 1.6; margin-bottom: 20px; }
.about-intro .text-link { margin-top: 23px; }
.about-origin { background: var(--ink); color: var(--paper); display: grid; grid-template-columns: .7fr 1.3fr; gap: 8%; padding-block: 104px; }
.about-chapter-label { display: flex; flex-direction: column; justify-content: space-between; align-items: start; gap: 48px; }
.about-chapter-label .eyebrow { color: #d6cbd4; }
.about-origin-place { font-family: var(--serif); font-size: clamp(70px, 9vw, 150px); line-height: 1; color: #b4afc2; letter-spacing: -.04em; }
.about-origin-copy h2 { font-size: clamp(36px, 4.4vw, 70px); line-height: 1.12; letter-spacing: -.025em; }
.about-origin .about-prose { margin-top: 34px; max-width: 590px; color: #d8d6e1; }
.about-prose p { font-size: 15px; line-height: 1.85; }
.about-prose p + p { margin-top: 22px; }
.about-college { display: grid; grid-template-columns: .8fr 1.2fr; gap: 34px 7%; padding-block: 96px; }
.about-college-heading { align-self: end; }
.about-college-heading .eyebrow, .about-approach .eyebrow { color: var(--cranberry); margin-bottom: 25px; }
.about-college-heading h2 { font-size: clamp(43px, 5vw, 78px); }
.about-college-photo { grid-column: 1 / -1; grid-row: 2; margin-top: 5px; }
.about-college-photo img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.about-college-photo figcaption { font-size: 11px; color: var(--muted); margin-top: 15px; }
.about-college-copy { grid-column: 2; grid-row: 1; max-width: 540px; align-self: end; }
.about-college-copy p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.about-college-copy p + p { margin-top: 18px; }
.about-approach { display: grid; grid-template-columns: .8fr 1.2fr; gap: 7%; padding-top: 20px; padding-bottom: 110px; }
.about-approach .about-prose { max-width: 590px; color: var(--muted); }
.about-invitation { border-top: 1px solid var(--line); text-align: center; }
.about-invitation .eyebrow { color: var(--cranberry); margin-bottom: 26px; }
.about-invitation h2 { font-size: clamp(56px, 7vw, 106px); }
.about-invitation > p:not(.eyebrow) { margin-top: 27px; font-size: 14px; color: var(--muted); }
.about-actions { display: flex; justify-content: center; flex-wrap: wrap; align-items: center; gap: 18px 35px; margin-top: 31px; }
.about-text-contact a { text-decoration: underline; text-underline-offset: 4px; }
@media(max-width:1050px) { .about-hero { column-gap: 6%; }.about-intro .about-lead { font-size: 16px; }.about-intro p { font-size: 13px; }.about-portrait figcaption { font-size: 9px; }.about-origin { grid-template-columns: .5fr 1fr; gap: 6%; } }
@media(max-width:700px) {
  .about-hero { display: flex; flex-direction: column; padding: 30px 22px 53px; gap: 0; }
  .about-hello { align-self: stretch; padding: 0; }
  .about-hello .eyebrow { font-size: 9px; margin-bottom: 18px; }
  .about-hello h1 { font-size: clamp(64px, 19vw, 98px); line-height: .98; }
  .about-hello h1 br { display: none; }
  .about-portrait { width: 100%; margin: 23px auto 0; align-self: center; }
  .about-portrait img { max-height: 71svh; width: 100%; object-fit: contain; }
  .about-portrait figcaption { font-size: 9px; margin-top: 12px; }
  .about-intro { padding-top: 32px; max-width: none; }
  .about-intro .about-lead { font-size: 18px; }
  .about-intro p { font-size: 14px; }
  .about-origin { display: block; padding: 54px 22px 61px; }
  .about-chapter-label { flex-direction: row; align-items: center; gap: 18px; margin-bottom: 34px; }
  .about-chapter-label .eyebrow { font-size: 8px; }
  .about-origin-place { font-size: 48px; }
  .about-origin-copy h2 { font-size: clamp(36px, 10vw, 50px); line-height: 1.16; }
  .about-origin .about-prose { margin-top: 28px; }
  .about-prose p { font-size: 14px; line-height: 1.85; }
  .about-college { display: flex; flex-direction: column; gap: 27px; padding: 57px 22px 51px; }
  .about-college-heading h2, .about-approach h2 { font-size: clamp(44px, 12vw, 60px); }
  .about-college-heading .eyebrow, .about-approach .eyebrow { margin-bottom: 18px; }
  .about-college-photo { margin-top: 0; }
  .about-college-photo figcaption { font-size: 10px; line-height: 1.6; }
  .about-college-copy { order: 2; }
  .about-college-copy p { font-size: 14px; }
  .about-approach { display: block; padding: 12px 22px 62px; }
  .about-approach .about-prose { margin-top: 27px; }
  .about-invitation { padding: 56px 22px 60px; }
  .about-invitation h2 { font-size: clamp(52px, 14vw, 72px); }
  .about-actions { flex-direction: column; gap: 17px; }
  .about-actions .button { max-width: 100%; }
}
@media(prefers-reduced-motion:reduce) { .js-ready .about-page .reveal { opacity: 1; transform: none; transition: none; } }

/* Personal work: two generous photographs with optional in-place collections. */
.about-origin { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 8%; row-gap: 40px; }
.about-chapter-label { grid-column: 1; grid-row: 1; gap: 30px; }
.about-origin-copy { grid-column: 1; grid-row: 2; align-self: center; }
.about-origin-copy h2 { font-size: clamp(34px, 3.55vw, 58px); }
.about-origin .about-prose { margin-top: 25px; }
.about-journey-photo { min-width: 0; width: 100%; max-width: 560px; margin-inline: auto; }
.about-hawaii-photo { grid-column: 2; grid-row: 1 / 3; align-self: center; }
.about-journey-photo > a { display: block; position: relative; }
.about-journey-photo img { display: block; width: 100%; height: auto; }
.about-journey-photo figcaption { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 10px; line-height: 1.6; margin-top: 16px; color: var(--muted); }
.about-hawaii-photo figcaption { color: #d8d6e1; }
.about-journey-photo figcaption a { display: inline-flex; gap: 8px; align-items: center; text-decoration: underline; text-underline-offset: 4px; }
.about-journey-photo figcaption .ui-icon { width: 15px; height: 15px; }
.about-photo-open { position: absolute; bottom: 18px; right: 18px; width: 44px; height: 44px; display: grid; place-items: center; color: var(--ink); background: var(--paper); border-radius: 50%; transition: transform .25s ease; }
.about-journey-photo > a:hover .about-photo-open { transform: translate(2px,-2px); }
.about-journey-photo a:focus-visible { outline: 2px solid var(--cranberry); outline-offset: 5px; }
.about-cars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8%; padding-block: 96px; border-bottom: 1px solid var(--line); }
.about-cars-copy { grid-column: 2; grid-row: 1; align-self: center; }
.about-cars .eyebrow { color: var(--cranberry); margin-bottom: 25px; }
.about-cars h2 { font-size: clamp(50px, 6vw, 90px); }
.about-cars .about-prose { max-width: 510px; margin-top: 28px; color: var(--muted); }
.about-cars .text-link { margin-top: 24px; }
.about-car-photo { grid-column: 1; grid-row: 1; max-width: 440px; }
@media(max-width:700px) {
 .about-origin { display: block; }
 .about-chapter-label { margin-bottom: 34px; }
 .about-origin-copy h2 { font-size: clamp(36px,10vw,50px); }
 .about-journey-photo { max-width: 100%; }
 .about-hawaii-photo { margin-top: 34px; }
 .about-journey-photo figcaption { font-size: 10px; gap: 8px; margin-top: 13px; }
 .about-photo-open { bottom: 14px; right: 14px; }
 .about-cars { display: flex; flex-direction: column; gap: 30px; padding: 57px 22px; }
 .about-cars h2 { font-size: clamp(54px,15vw,72px); }
 .about-cars .eyebrow { margin-bottom: 18px; }
 .about-cars .about-prose { margin-top: 24px; }
 .about-car-photo { width: min(100%, 440px); }
}
@media(prefers-reduced-motion:reduce) { .about-photo-open { transition: none; } }

/* Studio and personal work keep each photograph at its native portrait ratio. */
.about-work-chapter { display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 57px 22px; }
.about-work-copy { min-width: 0; align-self: center; }
.about-work-copy .eyebrow { color: var(--cranberry); margin-bottom: 18px; }
.about-work-copy h2 { font-size: clamp(44px, 12vw, 62px); line-height: 1.08; }
.about-work-copy .about-prose { max-width: 510px; margin-top: 25px; color: var(--muted); }
.about-work-copy .text-link { max-width: 100%; gap: 18px; margin-top: 23px; }
.about-work-photo { width: 100%; max-width: 100%; margin-inline: auto; }
.about-work-photo img { width: 100%; height: auto; object-fit: contain; }
.about-studio { border-top: 1px solid var(--line); }
.about-personal-work { background: var(--ink); color: var(--paper); margin-bottom: 57px; }
.about-personal-work .eyebrow { color: #d6cbd4; }
.about-personal-work .about-prose, .about-personal-photo figcaption { color: #d8d6e1; }
.about-personal-work a:focus-visible { outline-color: var(--paper); }
@media(min-width:701px) {
 .about-work-chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8%; padding: 96px var(--gutter); }
 .about-work-copy h2 { font-size: clamp(44px, 5.2vw, 80px); }
 .about-work-copy .eyebrow { margin-bottom: 25px; }
 .about-work-copy .about-prose { margin-top: 30px; }
 .about-work-copy .text-link { margin-top: 27px; }
 .about-work-photo { max-width: 560px; }
 .about-personal-work { margin-bottom: 88px; }
 .about-personal-work .about-work-copy { grid-column: 2; grid-row: 1; }
 .about-personal-photo { grid-column: 1; grid-row: 1; }
}

.about-college-photo > a { display: block; position: relative; }
.about-college-photo a:focus-visible { outline: 2px solid var(--cranberry); outline-offset: 5px; }
.about-college-photo figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
.about-college-photo figcaption a { display: inline-flex; align-items: center; gap: 8px; text-decoration: underline; text-underline-offset: 4px; }
.about-college-photo figcaption .ui-icon { width: 15px; height: 15px; }

.about-approach-heading { grid-column: 1; grid-row: 1; }
.about-approach-photo { grid-column: 1; grid-row: 2; min-width: 0; max-width: 360px; margin-top: 26px; }
.about-approach-photo img { display: block; width: 100%; height: auto; }
.about-approach-photo figcaption { margin-top: 13px; color: var(--muted); font-size: 10px; line-height: 1.6; }
.about-approach > .about-prose { grid-column: 2; grid-row: 1 / 3; align-self: center; }
@media(max-width:700px) { .about-approach-photo { width: 100%; max-width: 400px; margin: 28px auto 0; } }