/* the founder's portrait frame (assets/js/founder.mjs): rounded with the shared radius, a thin gradient edge in the logo palette, no distortion (object-fit: cover, face toward the upper third) */
.fphoto { position: relative; margin: 0; width: var(--fphoto-w, 15rem); aspect-ratio: 4 / 5; border-radius: var(--r-panel); isolation: isolate; }
.fphoto[hidden] { display: none; }
.fphoto::before { content: ''; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px; background: linear-gradient(135deg, var(--brand-amber), var(--brand-red) 40%, var(--brand-indigo) 75%, var(--brand-blue)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75; }
.fphoto picture, .fphoto img { display: block; width: 100%; height: 100%; border-radius: inherit; }
.fphoto img { object-fit: cover; object-position: 50% 28%; background: var(--surface-2); }
.fphoto--sm { --fphoto-w: 5.5rem; }

/* the founder section on /about (rendered by tools/build.mjs from assets/data/founder.mjs): photo column left, message right.
   Type sizes come from the tokens only; the motion (rise, aurora, sweep) is the shared .m-* motion in system.css, gated by prefers-reduced-motion. */
.fo { position: relative; --fo-gap: clamp(2rem, 4vw, 3.5rem); display: grid; grid-template-columns: 12rem minmax(0, 1fr); column-gap: var(--fo-gap); row-gap: var(--space-block); align-items: start; }
.fo__head { grid-column: 1 / -1; }
.fo__side { position: sticky; top: calc(var(--header-h) + 1.25rem); display: grid; gap: 12px; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: var(--r-panel); }
.fo__btn { position: relative; display: block; width: 100%; aspect-ratio: 4 / 5; margin: 0; padding: 0; border: 0; border-radius: var(--r-control); background: var(--surface-2); color: inherit; cursor: pointer; isolation: isolate; transition: box-shadow 600ms var(--ease); }
.fo__btn picture { display: block; width: 100%; height: 100%; overflow: hidden; border-radius: inherit; }
.fo__btn img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; filter: grayscale(1) contrast(1.05); transform: none; transition: filter 600ms var(--ease), transform 600ms var(--ease); }
/* the thin gradient ring and the corner tick */
.fo__btn::before { content: ''; position: absolute; inset: -1px; z-index: 1; border-radius: inherit; padding: 1px; pointer-events: none; background: linear-gradient(135deg, var(--brand-amber), var(--brand-red) 40%, var(--brand-indigo) 75%, var(--brand-blue)); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); opacity: .75; }
.fo__btn::after { content: ''; position: absolute; top: -7px; left: -7px; width: 12px; height: 12px; border-top: 2px solid rgb(var(--framed-orange)); border-left: 2px solid rgb(var(--framed-orange)); border-top-left-radius: 4px; pointer-events: none; }
.fo__btn:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; }
.fo__btn--mono { display: grid; place-items: center; cursor: default; font: var(--type-card-title); letter-spacing: .12em; color: var(--text-dim); }
/* colour state: hover (devices that hover), keyboard focus, or the touch toggle; a soft glow in the logo colours */
.fo__btn.is-color img, .fo__btn:focus-visible img { filter: none; transform: scale(1.02); }
.fo__btn.is-color, .fo__btn:focus-visible { box-shadow: 0 0 26px -2px rgb(var(--framed-orange) / .38), 0 0 34px -4px rgb(var(--framed-magenta) / .32), 0 6px 40px -4px rgb(var(--framed-blue) / .42); }
@media (hover: hover) {
  .fo__btn:hover img { filter: none; transform: scale(1.02); }
  .fo__btn:hover { box-shadow: 0 0 26px -2px rgb(var(--framed-orange) / .38), 0 0 34px -4px rgb(var(--framed-magenta) / .32), 0 6px 40px -4px rgb(var(--framed-blue) / .42); }
}
@media (prefers-reduced-motion: reduce) { .fo__btn, .fo__btn img { transition: none; } .fo__btn.is-color img, .fo__btn:focus-visible img, .fo__btn:hover img { transform: none; } }
.fo__cap { display: grid; gap: 8px; }
.fo__who { display: grid; gap: 2px; min-width: 0; }
.fo__name { font: var(--type-card-title); letter-spacing: var(--type-card-title-ls); color: var(--text); }
.fo__role { font: var(--text-small); color: var(--text-dim); }
.fo__cap .c-social { list-style: none; padding: 0; margin: 0; }
/* the message */
.fo__main { display: grid; gap: var(--space-block); min-width: 0; }
.fo__main .sec-head { margin: 0; }
.fo__lead { position: relative; margin: 0; padding-left: 1.25rem; }
.fo__lead::before { content: ''; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, var(--brand-amber), var(--brand-red) 40%, var(--brand-indigo) 75%, var(--brand-blue)); }
/* the thin line from the photo frame to the pull-quote (its light travels under no-preference, see .m-sweep) */
.fo__lead::after { content: ''; position: absolute; right: 100%; top: 50%; width: var(--fo-gap); height: 1px; background: linear-gradient(90deg, transparent, var(--border) 40%, rgb(var(--framed-magenta) / .5)); background-size: 200% 100%; pointer-events: none; }
.fo__lt { font: var(--type-subtitle); letter-spacing: var(--type-subtitle-ls); color: var(--text); text-wrap: balance; }
.fo__key { font-style: normal; color: var(--text); }
@supports ((background-clip: text) or (-webkit-background-clip: text)) { .fo__key { background: linear-gradient(90deg, #F81530, #9094F5 60%, #0189FD); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--text); } }
.fo__text { display: grid; gap: var(--space-head); }
.fo__p { margin: 0; font: var(--text-body); font-family: var(--font-italic); font-style: italic; line-height: 1.65; color: var(--text-dim); text-align: left; }
.fo__close { grid-column: 1 / -1; }
.fo__ct { font: var(--text-body); font-family: var(--font-italic); font-style: italic; font-weight: 500; line-height: 1.55; color: var(--text); text-align: left; }
.fo__main > :nth-child(2) { --m-i: 1; } .fo__main > :nth-child(3) { --m-i: 2; }
@media (max-width: 52rem) {
  .fo { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-block); }
  .fo__side { position: static; width: 9.25rem; }
  .fo__lead::after { display: none; }
}