.about-page .template-shell { max-width: 1240px; }
.about-hero { min-height: 510px; display: grid; grid-template-columns: minmax(0,1.2fr) minmax(320px,.8fr); align-items: center; gap: clamp(2rem,7vw,7rem); padding: 2.5rem 0 6rem; }
.about-hero h1 { max-width: 850px; margin: 0; font: 700 clamp(3.3rem,6.4vw,6.8rem)/.98 var(--display); letter-spacing: -.065em; }
.about-hero h1 em,.about-team h2 em { color: var(--purple-light); font-style: normal; }
.about-hero .template-lede { max-width: 650px; }
.about-principle { position: relative; min-height: 340px; padding: 2rem; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; border: 1px solid rgba(188,165,255,.27); border-radius: 24px; background: radial-gradient(circle at 90% 8%,rgba(139,92,246,.28),transparent 48%),radial-gradient(circle at 0 100%,rgba(249,115,22,.12),transparent 45%),var(--panel); box-shadow: 0 24px 70px rgba(0,0,0,.12); transform: rotate(2deg); }
.about-principle::after { content: ''; position: absolute; width: 180px; height: 180px; right: -85px; bottom: -90px; border: 1px solid rgba(188,165,255,.3); border-radius: 50%; box-shadow: 0 0 0 36px rgba(139,92,246,.045),0 0 0 72px rgba(139,92,246,.035); }
.about-principle > span,.about-person-meta,.about-source { font: 600 .63rem var(--mono); letter-spacing: .09em; }
.about-principle > span { color: var(--purple-light); }
.about-principle div { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25em .4em; font: 500 clamp(1.65rem,3vw,2.7rem)/1.2 var(--display); letter-spacing: -.04em; }
.about-principle strong { color: var(--white); }
.about-principle i { color: var(--orange); font-style: normal; }
.about-principle p { max-width: 20rem; margin: 0; color: var(--muted); font-size: .85rem; line-height: 1.6; }
.about-story { padding: 4.5rem 0 5.5rem; display: grid; grid-template-columns: minmax(240px,.8fr) minmax(0,1.2fr); gap: clamp(2rem,7vw,8rem); border-top: 1px solid var(--line); }
.about-section-heading h2 { max-width: 850px; margin: 0; font: 600 clamp(2.3rem,4vw,4.2rem)/1.05 var(--display); letter-spacing: -.05em; }
.about-section-heading > p:last-child { max-width: 600px; margin: 1.2rem 0 0; color: var(--muted); font-size: .95rem; line-height: 1.7; }
.about-story-copy p { margin: 0 0 1.3rem; color: var(--muted); font-size: 1rem; line-height: 1.85; }
.about-story-copy p:first-child { color: var(--white); font-size: 1.13rem; }
.about-source { display: inline-flex; gap: .5rem; margin-top: .4rem; color: var(--purple-light); text-decoration: none; letter-spacing: 0; }
.about-source:hover { text-decoration: underline; }
.about-founder { padding: 2rem; display: grid; grid-template-columns: 114px minmax(0,1fr) auto; align-items: center; gap: 1.5rem; border: 1px solid rgba(188,165,255,.25); border-radius: 18px; background: linear-gradient(105deg,rgba(139,92,246,.12),transparent 70%),var(--panel); }
.about-founder-mark { width: 108px; height: 108px; display: block; object-fit: cover; object-position: center 42%; border: 3px solid rgba(139,92,246,.38); border-radius: 18px; background: var(--panel); filter: contrast(1.12) brightness(1.12) saturate(.92); box-shadow: 0 12px 28px rgba(36,23,65,.16); }
.about-founder .page-kicker { margin: 0 0 .45rem; }
.about-founder h2 { margin: 0; font: 600 1.5rem var(--display); }
.about-founder p:last-child { max-width: 670px; margin: .4rem 0 0; color: var(--muted); font-size: .85rem; line-height: 1.65; }
.about-founder > a { color: var(--purple-light); font-size: .78rem; text-decoration: none; white-space: nowrap; }
.about-founder > a:hover { text-decoration: underline; }
.about-team { padding: 7rem 0; }
.about-team-grid { margin-top: 2.5rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .8rem; }
.about-person { min-height: 258px; padding: 1.5rem; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.about-person-avatar { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid rgba(188,165,255,.26); border-radius: 14px; color: var(--purple-light); background: rgba(139,92,246,.1); font: 700 .84rem var(--display); }
.about-person-meta { margin-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; color: var(--purple-light); letter-spacing: .035em; }
.about-person-meta span:last-child { color: var(--muted); }
.about-person h3 { margin: .45rem 0 .45rem; font: 600 1.3rem var(--display); }
.about-person p { margin: 0; color: var(--muted); font-size: .8rem; line-height: 1.65; }
.about-armie { border-color: rgba(249,115,22,.3); background: radial-gradient(circle at 100% 0,rgba(249,115,22,.13),transparent 58%),var(--panel); }
.about-armie .about-person-avatar { border-color: rgba(249,115,22,.4); color: var(--orange); background: rgba(249,115,22,.1); font-size: 1.5rem; }
.about-armie .about-person-meta { color: var(--orange); }
.about-armie button { width: fit-content; margin-top: auto; padding: 1rem 0 0; border: 0; color: var(--orange); background: none; font: 600 .75rem var(--body); cursor: pointer; }
.about-armie button:hover { text-decoration: underline; }
.about-close { padding: 3rem 0 1rem; border-top: 1px solid var(--line); }
.about-close h2 { max-width: 800px; margin: 0; font: 600 clamp(2.3rem,4.5vw,4.6rem)/1.06 var(--display); letter-spacing: -.05em; }
.about-close > p:not(.page-kicker) { color: var(--muted); }
@media(max-width:900px) { .about-hero,.about-story { grid-template-columns: 1fr; } .about-principle { max-width: 500px; min-height: 270px; transform: none; } .about-team-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .about-founder { grid-template-columns: 114px minmax(0,1fr); } .about-founder > a { grid-column: 2; } }
@media(max-width:600px) { .about-hero { min-height: 0; padding-bottom: 4rem; } .about-hero h1 { font-size: clamp(3rem,12vw,4.4rem); } .about-team { padding: 5rem 0; } .about-team-grid { grid-template-columns: 1fr; } .about-person { min-height: 225px; } .about-founder { padding: 1.25rem; grid-template-columns: 76px minmax(0,1fr); gap: .9rem; } .about-founder-mark { width: 72px; height: 72px; border-radius: 12px; } .about-founder > a { grid-column: 1 / -1; } }