/* The approved About composition shares the site's type, palette and spacing. */
.about-page { overflow-wrap: anywhere; }
.about-hero { position: relative; isolation: isolate; min-height: 410px; background: var(--paper); }
.about-hero-image { position: absolute; z-index: -1; inset: 0; overflow: hidden; }
.about-hero-image > img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 45%; }
.about-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, var(--paper) 8%, rgb(250 248 243 / 96%) 26%, rgb(250 248 243 / 72%) 36%, transparent 61%); }
.about-hero-layout { min-height: inherit; display: flex; align-items: center; }
.about-intro { width: min(540px, 46%); padding-block: 48px; }
.about-intro h1 { margin: 0 0 15px; color: var(--ink); font: 400 clamp(46px, 5.2vw, 76px)/.98 var(--serif); text-wrap: balance; }
.about-intro > p { max-width: 450px; margin: 0 0 22px; color: var(--ink); font: 26px/1.2 var(--serif); }
.about-story-link { display: inline-flex; align-items: center; justify-content: center; gap: 26px; min-height: 48px; padding: 11px 28px; border-radius: 3px; background: var(--green-800); color: var(--white); font-size: 21px; text-decoration: none; }
.about-story-link:hover { background: var(--green-900); }
.about-story-link:focus-visible { outline: 3px solid var(--green-700); outline-offset: 4px; }
.about-content { padding-block: 20px 54px; }
.about-sections { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; align-items: start; }
.about-section { min-width: 0; }
.about-section-image { display: block; width: 100%; height: auto; aspect-ratio: 2.2 / 1; object-fit: cover; border-radius: 3px; }
.about-section h2 { margin: 12px 0 7px; color: var(--ink); font: 400 clamp(27px, 2.4vw, 34px)/1.05 var(--serif); }
.about-section-text { margin: 0; color: var(--muted); font-size: 20px; line-height: 1.22; white-space: pre-line; }
.about-placeholder { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at top left, var(--green-100), var(--cream) 80%); }
.about-placeholder > img { width: auto; max-width: 55%; height: auto; max-height: 62%; opacity: .34; object-fit: contain; }
.about-placeholder-section { width: 100%; aspect-ratio: 2.2 / 1; border: 1px solid var(--line); border-radius: 3px; }
.about-placeholder-hero { height: 100%; justify-content: flex-end; padding-right: 15%; }
.about-hero-empty::after { background: linear-gradient(90deg, var(--paper), rgb(250 248 243 / 85%) 36%, transparent 75%); }
.about-quote { display: flex; align-items: center; gap: 16px; margin: 12px 0 0; padding: 14px 16px; border-radius: 7px; background: var(--cream); }
.about-quote > img { flex: 0 0 44px; object-fit: contain; }
.about-quote p { margin: 0; color: var(--ink); font-size: 18px; font-style: italic; line-height: 1.15; white-space: pre-line; }
@media (min-width: 1600px) {
    .about-hero { min-height: 460px; }
    .about-sections { gap: 30px; }
}
@media (max-width: 1024px) {
    .about-hero { min-height: 380px; }
    .about-intro { width: 52%; }
    .about-hero::after { background: linear-gradient(90deg, var(--paper) 5%, rgb(250 248 243 / 94%) 29%, rgb(250 248 243 / 70%) 43%, transparent 80%); }
    .about-sections { gap: 20px; }
    .about-section-text { font-size: 19px; }
    .about-quote { gap: 10px; padding: 12px; }
}
@media (max-width: 767px) {
    .about-hero { display: flex; flex-direction: column; min-height: 0; }
    .about-hero-image { position: relative; z-index: auto; order: 2; height: clamp(190px, 52vw, 340px); }
    .about-hero-image > img { object-position: center; }
    .about-hero::after { display: none; }
    .about-hero-layout { width: 100%; }
    .about-intro { width: 100%; max-width: 550px; padding-block: 30px; }
    .about-intro h1 { font-size: clamp(43px, 8vw, 62px); }
    .about-intro > p { font-size: 24px; }
    .about-placeholder-hero { justify-content: center; padding-right: 0; }
    .about-sections { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .about-section-image, .about-placeholder-section { aspect-ratio: 1.8 / 1; }
    .about-section h2 { font-size: 33px; }
    .about-section-text { font-size: 21px; line-height: 1.3; }
    .about-quote p { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }