/* About Flow follows the finalized Stay layout; all rules stay on this page. */
.about-flow-page { --about-ink: #2d3433; }
.about-flow-page .about-opening { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px 40px; align-items: center; padding-bottom: 48px; }
.about-flow-page .about-opening-photo { margin: 0; overflow: hidden; border-radius: 28% 6% 28% 6% / 32% 8% 32% 8%; box-shadow: 0 10px 26px rgba(22,59,74,.13), 0 2px 6px rgba(22,59,74,.06); }
.about-flow-page .about-opening-photo img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.about-flow-page .inner-page-intro__copy { min-width: 0; }
.about-flow-page :is(.about-opening, .about-section) .eyebrow { margin: 0 0 12px; color: #4e6033; font-family: "Manrope", Arial, sans-serif; font-size: .8125rem; line-height: 1.4; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; }
.about-flow-page :is(.about-opening, .about-section) :is(h1, h2) { margin: 0; max-width: 760px; color: var(--deep-pacific); font-family: "Satoshi", "Manrope", Arial, sans-serif; font-size: clamp(2.375rem, 4vw, 3rem); font-weight: 700; line-height: 1.1; letter-spacing: -.025em; text-wrap: balance; }
.about-flow-page .about-opening .inner-page-intro__copy > p:not(.eyebrow) { color: var(--about-ink); font-size: 1.125rem; line-height: 1.65; }
.about-flow-page .about-paths { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid rgba(22,59,74,.2); border-radius: 24px; overflow: hidden; }
.about-flow-page .about-paths > a { display: flex; flex-direction: column; min-width: 0; padding: 25px; color: var(--deep-pacific); text-decoration: none; background: transparent; transition: background .2s; }
.about-flow-page .about-paths > a + a { border-left: 1px solid rgba(22,59,74,.2); }
.about-flow-page .about-paths > a:hover { background: color-mix(in srgb, var(--seafoam) 14%, var(--warm-white)); }
.about-flow-page .about-paths h2 { margin: 0 0 12px; font-size: 1.7rem; line-height: 1.18; }
.about-flow-page .about-paths p { margin: 0 0 20px; color: var(--about-ink); font-size: 1rem; line-height: 1.65; font-weight: 400; }
.about-flow-page .about-paths > a > span { margin-top: auto; font-size: .94rem; font-weight: 700; }
.about-flow-page .about-container { width: min(calc(100% - 48px), var(--max)); margin-inline: auto; }
.about-flow-page .about-section { padding-block: 72px; background: var(--warm-white); color: var(--deep-pacific); }
.about-flow-page .about-section p { margin: 20px 0 0; color: var(--about-ink); font-size: 1rem; line-height: 1.65; font-weight: 400; }
.about-flow-page .about-section .eyebrow { margin: 0 0 12px; color: #4e6033; font-size: .8125rem; font-weight: 700; line-height: 1.4; }
.about-flow-page .about-heading { margin-bottom: 32px; }
.about-flow-page .about-heading > p:not(.eyebrow) { max-width: 920px; font-size: 1.125rem; }
.about-flow-page .about-copy-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }
.about-flow-page .about-copy-grid > div > p:first-child:not(.eyebrow) { margin-top: 0; }
.about-flow-page .about-copy-grid .text-link { display: inline-block; margin-top: 24px; }
.about-flow-page .about-story { padding-top: 24px; }
.about-flow-page .about-story-panel { padding: clamp(28px, 5vw, 64px); border-radius: 30px; background: linear-gradient(180deg, var(--warm-white), color-mix(in srgb, var(--seafoam) 18%, var(--warm-white)) 55%); }
.about-flow-page :is(.about-home, .about-community) { background: color-mix(in srgb, var(--seafoam) 14%, var(--warm-white)); }
.about-flow-page .about-method { background: radial-gradient(circle at 8% 90%, rgba(130,188,174,.28), transparent 28%), var(--sand); }
.about-flow-page .about-media-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 48px; align-items: center; }
.about-flow-page .about-media-grid > div { min-width: 0; }
.about-flow-page .about-feature-photo { margin: 0; overflow: hidden; border-radius: 28% 6% 28% 6% / 32% 8% 32% 8%; }
.about-flow-page .about-feature-photo img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.about-flow-page .about-section .button { margin-top: 24px; }
.about-flow-page .about-method-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; list-style: none; padding: 0; margin: 0; }
.about-flow-page .about-method-grid li { min-width: 0; padding: 24px; border: 1px solid rgba(22,59,74,.16); border-radius: 20px; background: var(--warm-white); }
.about-flow-page .about-initial { display: block; margin-bottom: 24px; color: #476b7e; font: 700 2rem/1 "Satoshi", sans-serif; }
.about-flow-page .about-method-grid h3 { margin: 0; font-family: "Satoshi", sans-serif; font-size: clamp(1.3rem, 1.8vw, 1.6rem); line-height: 1.12; color: var(--deep-pacific); }
.about-flow-page .about-method-grid p { margin-top: 16px; }
.about-flow-page .about-community-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.about-flow-page .about-community-grid article { min-width: 0; padding: 28px; border: 1px solid rgba(22,59,74,.14); border-radius: 24px; background: var(--warm-white); }
.about-flow-page .about-community-grid h3 { margin: 0; color: var(--deep-pacific); font-family: "Satoshi", sans-serif; font-size: clamp(1.5rem, 2.2vw, 1.75rem); line-height: 1.18; }
.about-flow-page .about-planner p { margin-top: 0; }
.about-flow-page .button--coral { color: #202625; }
.about-flow-page :is(a, button, summary, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--deep-pacific); outline-offset: 4px; box-shadow: 0 0 0 6px var(--warm-white); }
.about-flow-page .about-paths > a:focus-visible { outline-offset: -6px; box-shadow: none; }
.about-flow-page #flow-team { scroll-margin-top: 100px; }
@media (max-width: 1100px) { .about-flow-page .about-method-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 800px) {
  .about-flow-page :is(.about-opening, .about-media-grid, .about-copy-grid) { grid-template-columns: 1fr; gap: 28px; }
  .about-flow-page .about-media-grid--reverse .about-feature-photo { grid-row: 1; }
}
@media (max-width: 700px) {
  .about-flow-page .about-opening { padding-bottom: 32px; }
  .about-flow-page .about-container { width: calc(100% - 36px); }
  .about-flow-page .about-section { padding-block: 48px; }
  .about-flow-page .about-story { padding-top: 24px; }
  .about-flow-page .about-story-panel { padding: 28px 20px; border-radius: 24px; }
  .about-flow-page .about-paths, .about-flow-page .about-community-grid { grid-template-columns: 1fr; }
  .about-flow-page .about-paths > a + a { border-left: 0; border-top: 1px solid rgba(22,59,74,.2); }
  .about-flow-page .about-heading { margin-bottom: 24px; }
  .about-flow-page .about-method-grid { gap: 16px; }
}
@media (max-width: 480px) { .about-flow-page .about-method-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .about-flow-page .about-paths > a { transition: none; } }

/* Keep the instructor, students and board in view in the portrait source. */
.about-flow-page .about-people .about-feature-photo img { object-position: 50% 56%; }