/* ============================================================================ bto-about-founder.css — styling for #about-founder only. Ported 2026-08-11 from founder.html (bto-founder.css §4b .fdr-portrait, and founder-mph.css's .sva-cards--founder / .sva-card--world / .svw-* block). Founder.html's body carries `bto-mph-f` and scopes those rules to `body.bto-static.bto-mph-f`. about.html's body carries `bto-mph`, not `bto-mph-f` — so the originals never matched here. Rather than add the `bto-mph-f` class to about.html's (untested blast radius across a 534-line stylesheet written for a different page), every rule below is rescoped to `#about-founder` only. Nothing outside that section is touched. --bw-ink / --bw-amber are declared in bto-work-screen.css, which about.html does not load — the var() fallbacks (#F0EEEB / #FFBF65) carry the same values, so this renders identically without adding that stylesheet. ============================================================================ */ #about-founder .fdr-portrait { margin: clamp(16px, 2vh, 24px) 0 0; max-width: 168px; } #about-founder .fdr-portrait img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; } #about-founder .sva-cards--founder { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 1.6vw, 24px); margin-top: clamp(20px, 2.5vh, 32px); } @media (max-width: 900px) { #about-founder .sva-cards--founder { grid-template-columns: 1fr; } } #about-founder .sva-card--world { aspect-ratio: auto; border-radius: 16px; padding: 0; gap: 0; overflow: hidden; background: rgba(255, 255, 255, .045); border-color: rgba(240, 238, 235, .18); } #about-founder .sva-card--world .svw-media { position: relative; z-index: 1; aspect-ratio: 16 / 9; overflow: hidden; } #about-founder .sva-card--world .svw-media video, #about-founder .sva-card--world .svw-media img { display: block; width: 100%; height: 100%; object-fit: cover; } #about-founder .sva-card--world .svw-body { position: relative; z-index: 1; padding: clamp(16px, 1.8vw, 22px) clamp(16px, 1.8vw, 22px) clamp(20px, 2.2vw, 26px); display: flex; flex-direction: column; gap: 8px; } #about-founder .sva-card--world .svw-tag { margin: 0; display: flex; align-items: center; gap: 8px; font-family: Antonio, Archivo, sans-serif; font-weight: 600; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--bw-amber, #FFBF65); } #about-founder .sva-card--world .svw-icon { flex: 0 0 auto; width: 16px; height: 16px; color: var(--bw-amber, #FFBF65); } #about-founder .sva-card--world .svw-name { margin: 0; font-family: Antonio, Archivo, sans-serif; font-weight: 700; text-transform: uppercase; font-size: clamp(19px, 1.6vw, 24px); line-height: 1.1; color: var(--bw-ink, #F0EEEB); } #about-founder .sva-card--world .svw-desc { margin: 0; font-size: 14px; line-height: 1.55; color: rgba(240, 238, 235, .78); } @media (prefers-reduced-motion: reduce) { #about-founder .sva-card--world .svw-media video { display: none; } }