/* Mesh Labz – About page. Uses clonr.css for .c-section / .c-head / .float-chip. */

.about-page { padding-top: 120px; }
@media (max-width: 860px) { .about-page { padding-top: 150px; } }
@media (max-width: 520px) { .about-page { padding-top: 180px; } }

/* Intro: text left, overlapping collage of renders right */
.a-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(28px, 5vw, 72px); align-items: center; min-height: min(78vh, 720px); }
.a-hero .tag { border-radius: 999px; padding: .6em 1.1em; color: #cfe6f7; border-color: rgba(26, 155, 230, .45); background: rgba(26, 155, 230, .08); }
.a-hero h1 { margin: 1.2rem 0 1rem; font: 700 clamp(3.2rem, 7.5vw, 6.4rem)/.95 var(--f-head); letter-spacing: -0.045em; }
.a-hero h1 em { font-style: normal; color: var(--bright); }
.a-lede { margin: 0 0 1.8rem; color: #c9d4de; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.65; max-width: 36ch; }
.a-hero .row { display: flex; gap: 10px; flex-wrap: wrap; }
.a-hero .row .btn { min-width: 190px; }

.a-collage { position: relative; aspect-ratio: 1 / .92; }
.a-collage::before { content: ""; position: absolute; inset: -10%; z-index: -1; background: radial-gradient(45% 45% at 55% 50%, rgba(26,155,230,.25), rgba(0,0,0,0) 70%); }
.a-collage img { position: absolute; object-fit: cover; border-radius: var(--r-lg); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06); }
.a-collage .c1 { left: -2%; top: 7%; width: 66%; aspect-ratio: 4 / 3; object-position: 72% center; }   /* tucks slightly behind the raptor; left side trimmed */
.a-collage .c2 { right: 0; top: 0; width: 42%; aspect-ratio: 4 / 5; object-position: center; background: #000; }   /* Spider-Man render, head and torso in frame */
.a-collage .c3 { right: 10%; bottom: 0; width: 46%; aspect-ratio: 16 / 11; }
.a-collage .float-chip { left: 4%; bottom: 10%; }
@media (prefers-reduced-motion: no-preference) {
  .a-collage img { animation: rise 1.1s cubic-bezier(.22, 1, .36, 1) both; }
  .a-collage .c2 { animation-delay: .12s; } .a-collage .c3 { animation-delay: .24s; }
}
@media (max-width: 860px) { .a-hero { grid-template-columns: 1fr; min-height: 0; } }

/* Numbers */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: clamp(40px, 6vw, 72px); }
.stats div { padding: 1.4rem 1.5rem; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--line); }
.stats b { display: block; font: 700 clamp(2rem, 3.6vw, 2.8rem)/1 var(--f-head); letter-spacing: -0.03em; margin-bottom: .5rem; }
.stats span { color: var(--muted); }
@media (max-width: 860px) { .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Three roles: image + text, alternating sides */
.roles { display: grid; gap: clamp(20px, 3vw, 32px); }
.role { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.role img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--r-lg); border: 1px solid var(--line); }
.role.flip img { order: 2; object-position: center 4%; }
.role-txt .mono { color: var(--bright); display: block; margin-bottom: .7rem; }
.role-txt h3 { margin: 0 0 .7rem; font: 700 clamp(1.5rem, 2.6vw, 2.1rem)/1.1 var(--f-head); letter-spacing: -0.02em; }
.role-txt p { margin: 0 0 1.1rem; color: #c3ced9; font-size: 1.03rem; }
@media (max-width: 860px) { .role { grid-template-columns: 1fr; } .role.flip img { order: 0; } }

/* Manifesto band */
.manifesto { text-align: center; padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px); border-radius: var(--r-lg);
  background: radial-gradient(70% 90% at 50% 0%, rgba(26,155,230,.22), rgba(14,59,94,.08) 50%, rgba(0,0,0,0) 80%), #070b10; border: 1px solid var(--line); }
.manifesto .eyebrow { display: block; color: var(--bright); margin-bottom: 1rem; }
.manifesto h2 { margin: 0 auto 1rem; max-width: 16ch; font: 700 clamp(2.2rem, 5.4vw, 4.4rem)/1 var(--f-head); letter-spacing: -0.04em; }
.manifesto h2 em { font-style: normal; color: var(--bright); }
.manifesto h2.long { max-width: 24ch; font-size: clamp(1.7rem, 3.6vw, 2.9rem); line-height: 1.12; letter-spacing: -0.03em; }
.manifesto p { margin: 0 auto; max-width: 56ch; color: #c3ced9; font-size: 1.08rem; }

/* Toolkit */
.kit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.kit li { padding: 1.2rem 1.3rem; border-radius: var(--r-md); background: var(--field); border: 1px solid var(--line); display: flex; flex-direction: column; gap: .25rem; transition: border-color .2s; }
.kit li:hover { border-color: rgba(26,155,230,.5); }
.kit b { font: 700 1.15rem/1.2 var(--f-head); }
.kit span { color: var(--muted); }
@media (max-width: 760px) { .kit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Experience */
.xp { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.xp li { padding: 1.5rem 1.5rem 1.6rem; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(26,155,230,.07), rgba(26,155,230,0) 60%), var(--field); border: 1px solid var(--line); }
.xp .mono { color: var(--bright); display: block; margin-bottom: .8rem; }
.xp h3 { margin: 0 0 .25rem; font: 700 1.3rem/1.15 var(--f-head); }
.xp .org { margin: 0 0 .8rem; color: var(--text); font-weight: 600; }
.xp .org a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232,238,244,.35); }
.xp .org a:hover { color: var(--bright); }
.xp p { margin: 0; color: #c3ced9; }
@media (max-width: 860px) { .xp { grid-template-columns: 1fr; } }

/* Portrait in the intro collage (replaces the lantern) */
.a-collage .c3.me { right: 8%; width: 34%; aspect-ratio: 4 / 5; object-position: center 25%; }

/* Experience: desk photo beside the three roles */
.xp-wrap { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 12px; align-items: stretch; }
.xp-photo { margin: 0; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); }
.xp-photo img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: 62% 30%; }
.xp-wrap .xp { grid-template-columns: 1fr; }
@media (max-width: 860px) { .xp-wrap { grid-template-columns: 1fr; } .xp-photo { max-width: 340px; } .xp-photo img { height: auto; } }

/* Small black and white headshot beside the About tag */
.a-id { display: flex; align-items: center; gap: 14px; }
.a-id .avatar { width: 80px; height: 80px; border-radius: 22px; object-fit: cover; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 30px rgba(0,0,0,.45); }

/* Experience as a short paragraph beside the desk photo */
.xp-text { display: flex; flex-direction: column; justify-content: center; gap: 1rem; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-lg);
  background: linear-gradient(180deg, rgba(26,155,230,.07), rgba(26,155,230,0) 60%), var(--field); border: 1px solid var(--line); }
.xp-text p { margin: 0; color: #c9d4de; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.7; }
.xp-text a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232,238,244,.35); }
.xp-text a:hover { color: var(--bright); }

/* Two numbers only (followers, guide downloads) */
.stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Two-paragraph intro: the second sits a little quieter */
.a-hero .a-lede { max-width: 46ch; }
.a-hero .a-lede-2 { margin-top: -0.6rem; font-size: 1rem; color: var(--muted); }
.a-lede a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(232,238,244,.35); }
.a-lede a:hover { color: var(--bright); }
/* Desk photo in the Educator card: keep his face in frame */
.role img.me-photo { object-position: center top; }