/* About page: same left edge and page opening as every page, reading width for the text */
.about-shell{max-width:calc(var(--b-wide) + 2 * var(--b-gutter));margin:0 auto;padding:32px var(--b-gutter) 40px;box-sizing:border-box}
.about-shell > *{max-width:var(--b-read)}
.about-card{display:flex;gap:24px;align-items:flex-start;margin-top:20px;padding:24px 28px;background:var(--b-surface);border:1px solid var(--b-line);border-radius:var(--b-r-card)}
.about-avatar{flex:0 0 72px;height:72px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--b-surface-2);border:2px solid var(--b-teal);color:var(--b-teal);font:700 22px var(--b-font);letter-spacing:1px}
.about-text p{margin:0 0 14px;color:var(--b-text-2);font-size:16px;line-height:1.65}
.about-text .about-lead{color:var(--b-text);font-size:18px;line-height:1.45}
.about-text strong{color:var(--b-text)}
.about-actions{display:flex;align-items:center;gap:18px;margin-top:20px}
.about-btn{display:inline-block;padding:12px 26px;background:var(--b-teal);color:#0F1117;border-radius:var(--b-r-pill);font-size:14px;font-weight:700;text-decoration:none}
.about-btn:hover{opacity:.85}
.about-link{color:var(--b-text-2);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:4px;text-decoration-color:var(--b-line)}
.about-link:hover{color:var(--b-teal);text-decoration-color:var(--b-teal)}
@media (max-width:600px){.about-card{flex-direction:column;padding:20px}.about-text .about-lead{font-size:18px}}
.about-shell > .about-card{max-width:var(--b-wide)}
.about-text p:not(.about-lead){font-size:15px;line-height:1.6}
/* Phones: no box around the story (it was squeezing it), a round avatar the first lines wrap beside */
@media (max-width:600px){
  .about-shell{padding-top:16px}
  .about-card{display:block;margin-top:12px;padding:0;background:none;border:0}
  .about-avatar{float:left;width:56px;height:56px;flex:none;margin:2px 14px 4px 0;font-size:18px}
  .about-text .about-lead{font-size:17px;line-height:1.45}
  .about-text p:not(.about-lead){font-size:15px;line-height:1.55;clear:left}
  .about-actions{clear:left;gap:16px;margin-top:16px}
}