/* About — rebuilt 2026-07-14 (owner review pass): intro (portrait + bio),
   four role cards in one row, focus image + paths, stage highlight panel,
   author outlets, centered closing statement. Hero lives in page-hero.css. */

/* --- intro: portrait + bio --- */
.about-intro{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(1.8rem,5vw,3.5rem);align-items:center}
@media(max-width:860px){.about-intro{grid-template-columns:1fr;gap:1.8rem}}
.about-intro__figure{margin:0;position:relative;aspect-ratio:4/5;border-radius:calc(var(--radius) + 6px);
  overflow:hidden;border:1px solid var(--line);background:var(--silver-soft)}
.about-intro__figure::after{content:"";position:absolute;inset:0;background:var(--glow);pointer-events:none}
.about-intro__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;
  transition:transform .6s var(--ease)}
.about-intro__figure:hover .about-intro__img{transform:scale(1.03)}
@media(max-width:860px){.about-intro__figure{aspect-ratio:1/1;max-width:440px}}
.about-intro__body h2{max-width:18ch;margin-block-start:.3rem}
.about-intro__body p{color:var(--ink-soft);line-height:1.7;margin-block-start:1.1rem;max-width:60ch}
.about-intro__body .lede--sm{color:var(--ink)}

/* --- role cards: as many per row as fit, min 220px each --- */
.role-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(.9rem,1.6vw,1.3rem)}
@media(max-width:1024px){.role-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.role-grid{grid-template-columns:1fr}}
.role-card{position:relative;border:1px solid var(--line);border-radius:var(--radius);
  padding:clamp(1.3rem,2.2vw,1.7rem);background:var(--surface);overflow:hidden;transition:.35s var(--ease)}
.role-card::before{content:"";position:absolute;inset-block-start:0;inset-inline-start:0;width:100%;height:3px;
  background:var(--silver);opacity:.7}
.role-card:hover{transform:translateY(-4px);background:var(--surface-2)}
.role-card__n{font-family:var(--font-display);font-weight:600;font-size:var(--step--1);color:var(--ink-faint);letter-spacing:.05em}
.role-card__k{font-family:var(--font-display);font-weight:600;font-size:1.2rem;letter-spacing:-.01em;margin-block-start:.5rem}
.role-card p{color:var(--ink-soft);line-height:1.55;margin-block-start:.5rem;font-size:var(--step--1)}
.role-card__link{display:inline-flex;align-items:center;gap:.35rem;margin-block-start:.7rem;font-size:var(--step--1);font-weight:600;color:var(--accent)}
.role-card__link:hover{text-decoration:underline}

/* --- focus: image + the two paths --- */
.focus-split{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(1.6rem,4vw,3rem);align-items:center}
@media(max-width:860px){.focus-split{grid-template-columns:1fr}}
/* aspect kept <= 1:1 so the left-anchored crop always excludes the banner's text */
.focus-media{margin:0;position:relative;aspect-ratio:4/5;border-radius:calc(var(--radius) + 6px);
  overflow:hidden;border:1px solid var(--line);background:var(--bg-2)}
.focus-media__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left center}
@media(max-width:860px){.focus-media{aspect-ratio:1/1;max-width:520px;margin-inline:auto}}
.focus-list{display:grid;gap:clamp(1.4rem,3vw,2rem)}
.focus{border-inline-start:2px solid var(--line);padding-inline-start:clamp(1rem,2vw,1.4rem)}
.focus h3{font-family:var(--font-display);font-weight:500;font-size:1.3rem;letter-spacing:-.01em}
.focus p{color:var(--ink-soft);line-height:1.65;margin-block-start:.7rem}

/* --- stage highlight panel: stat + keynote note + press --- */
.stage-band{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center;
  background:var(--silver-soft);border:1px solid var(--line);border-radius:calc(var(--radius) + 6px);
  padding:clamp(1.8rem,4vw,3rem);position:relative;overflow:hidden}
.stage-band::before{content:"";position:absolute;inset:0;background:var(--silver);opacity:.06;pointer-events:none}
.stage-band>*{position:relative}
@media(max-width:768px){.stage-band{grid-template-columns:1fr;gap:1.4rem}}
.stage-band__stat b{display:block;font-family:var(--font-display);font-weight:500;font-size:clamp(3rem,7vw,4.6rem);
  line-height:.9;letter-spacing:-.03em;background:var(--silver);-webkit-background-clip:text;background-clip:text;color:transparent}
.stage-band__stat span{display:block;margin-block-start:.5rem;color:var(--ink-soft);font-size:var(--step--1);max-width:14ch}
.stage-band__body p{color:var(--ink-soft);line-height:1.7;max-width:60ch}
.logos{display:flex;flex-wrap:wrap;gap:1rem 1.8rem;align-items:center;margin-block-start:1.5rem;opacity:.82}
.logos span{font-family:var(--font-display);font-weight:500;font-size:1.05rem;color:var(--ink-faint)}

/* --- author outlets --- */
.about-text{max-width:64ch;color:var(--ink-soft);line-height:1.7}
.outlet-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,1.6vw,1.2rem);margin-block-start:1.8rem}
/* Projects & microsites grid has 6 cards, not 4 — let it wrap evenly instead of 4+2. */
.outlet-grid--projects{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
@media(max-width:768px){.outlet-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.outlet-grid{grid-template-columns:1fr}}
.outlet{position:relative;display:block;border:1px solid var(--line);border-radius:var(--radius);
  padding:1.3rem 1.4rem;background:var(--surface);transition:.3s var(--ease)}
.outlet:hover{background:var(--surface-2);transform:translateY(-3px)}
.outlet__h{font-family:var(--font-display);font-weight:600;font-size:1.1rem;letter-spacing:-.01em;padding-inline-end:1.4rem}
.outlet__s{display:block;margin-block-start:.3rem;color:var(--ink-soft);font-size:var(--step--1)}
.outlet__go{position:absolute;inset-block-start:1.15rem;inset-inline-end:1.2rem;color:var(--ink-faint);transition:.3s var(--ease)}
.outlet:hover .outlet__go{color:var(--accent);transform:translateX(3px)}

/* --- closing statement --- */
.statement{position:relative;font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.5rem,1rem + 2vw,2.4rem);line-height:1.3;text-align:center;max-width:34ch;
  margin-inline:auto;padding-block:clamp(1.5rem,4vw,3rem)}
.statement::before{content:"\201C";display:block;font-size:3em;line-height:.6;margin-block-end:.2em;color:var(--ink-faint);opacity:.35}
.statement cite{display:block;margin-block-start:1.2rem;font-family:var(--font-body);font-style:normal;
  font-size:var(--step--1);color:var(--ink-faint);letter-spacing:.02em}

/* --- AI affordance chip --- */
.ai-affordance{display:inline-flex;align-items:center;gap:.6rem;border:1px dashed var(--line);border-radius:99px;
  padding:.5rem 1rem;font-size:var(--step--1);color:var(--ink-soft);margin-block-start:1.6rem}
.ai-affordance b{color:var(--accent)}
.ai-affordance code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.9em}