/* ============================================================
   POONJEE — about.css
   Loads AFTER style.css. Uses the same tokens.
   ============================================================ */

/* ---------- portrait ---------- */
.portrait{position:relative}
.portrait img{
  width:100%;height:auto;display:block;
  border-radius:var(--rad);
  border:1px solid var(--line-soft);
}
.portrait::after{
  content:"";position:absolute;inset:0;border-radius:var(--rad);
  background:linear-gradient(180deg,transparent 55%,rgba(5,10,22,.55));
  pointer-events:none;
}
.portrait .cap{
  position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:22px 24px;
}
.portrait .cap b{
  display:block;font-family:var(--font-d);font-size:1.22rem;color:#fff;margin-bottom:3px;
}
.portrait .cap span{
  font-family:var(--font-m);font-size:.73rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--gold);
}

/* ---------- credential row ---------- */
.creds{display:flex;gap:10px;flex-wrap:wrap;margin:26px 0 0}
.creds span{
  font-family:var(--font-m);font-size:.72rem;letter-spacing:.06em;
  border:1px solid var(--line-soft);border-radius:999px;
  padding:7px 14px;color:var(--mut);
}
.creds span.g{border-color:rgba(232,180,52,.28);color:var(--gold)}

/* ---------- story ---------- */
.story{max-width:720px;margin:0 auto}
.story p{color:var(--mut);font-size:1.02rem;line-height:1.85;margin:0 0 20px}
.story p strong{color:var(--ink);font-weight:600}
.story h2{
  font-family:var(--font-d);font-size:clamp(1.4rem,2.6vw,1.85rem);
  color:var(--ink);margin:48px 0 16px;
}
.story h2:first-child{margin-top:0}
.story .pull{
  border-left:2px solid var(--gold);padding:4px 0 4px 26px;margin:30px 0;
}
.story .pull p{
  color:var(--ink);font-family:var(--font-d);font-size:1.16rem;
  font-style:italic;margin:0;line-height:1.6;
}

/* ---------- review cards ---------- */
.reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.review{
  background:var(--panel);border:1px solid var(--line-soft);
  border-radius:var(--rad);padding:26px 24px;
  display:flex;flex-direction:column;
}
.review .stars{color:var(--gold);font-size:.9rem;letter-spacing:.14em;margin-bottom:12px}
.review p{color:var(--mut);font-size:.94rem;line-height:1.7;flex:1;margin:0 0 16px}
.review .src{
  font-family:var(--font-m);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);opacity:.75;
}

@media (max-width:900px){
  .reviews{grid-template-columns:1fr}
  .portrait{max-width:420px;margin:0 auto}
}