/* =====================================================================
   ABOUT  -  photo + intro text + about.json editor + stats.
   ===================================================================== */

.about{display:grid;grid-template-columns:380px minmax(0,1fr);gap:40px;align-items:stretch;min-width:0}
.about>div{min-width:0}

/* photo: fills the full height of the text column on desktop. The img is absolutely
   placed so its own size never pushes the row taller. Change which part of the
   photo stays visible with object-position. */
.about-photo{position:relative;margin:0;min-height:420px;border-radius:8px;border:1px solid var(--line);overflow:hidden;background:var(--panel)}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:55% 28%;display:block}
.js-rv .about-photo img{transform:scale(.94);transition:transform .9s ease .2s}
.js-rv main>section.in .about-photo img{transform:none}

.about p{margin:0 0 12px;max-width:62ch;font-size:18px;text-align:justify;overflow-wrap:anywhere}

/* about.json editor */
.editor.mini{margin:20px 0 0}
.editor.mini .blk.flat{border:0;border-radius:0;background:none;padding:14px 16px;font-size:14px}
/* numbered code lines (same look as the hero editor); wrapped lines hang under the text */
.lines{counter-reset:ln;white-space:normal}
.lines .l{display:block;white-space:pre-wrap;overflow-wrap:anywhere;counter-increment:ln;padding-left:3.4em;text-indent:-3.4em}
.lines .l::before{content:counter(ln);display:inline-block;width:2.2em;margin-right:1.2em;text-align:right;color:var(--ln);font-weight:400;text-indent:0;user-select:none}

/* GPA / years / projects */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:16px}
.stats div{min-width:0;border:1px solid var(--line);border-radius:8px;padding:14px 16px;background:var(--panel)}
.stats b{display:block;font:700 22px var(--mono);color:var(--amber)}
.stats span{font:12px var(--mono);color:var(--dim)}

@media (max-width:1280px){
  /* single column: photo on top, 4:5 crop anchored on the face */
  .about{grid-template-columns:minmax(0,1fr)}
  .about-photo{min-height:0;width:100%;max-width:380px;aspect-ratio:4/5}
  .about-photo img{object-position:55% 22%}
}
@media (max-width:820px){.about p{text-align:left}}
@media (prefers-reduced-motion:reduce){.js-rv .about-photo img{transform:none;transition:none}}