/* ============================================================
   ABOUT.CSS — About teaser section
   ============================================================ */

.about-teaser .wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:clamp(40px,6vw,80px);align-items:center}
.about-portrait{
  position:relative;aspect-ratio:4/5;border-radius:16px;overflow:hidden;
  background:linear-gradient(160deg, var(--midnight) 0%, var(--midnight-deep) 100%);
}
.about-portrait img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
}
.about-portrait .tag{
  position:absolute;left:16px;top:16px;
  background:var(--lionsmane);color:var(--midnight);padding:6px 12px;border-radius:999px;
  font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;
}
.about-portrait .cap{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;
  display:flex;justify-content:space-between;align-items:end;gap:10px;
  background:linear-gradient(to top, rgba(0,41,61,0.9), transparent);
  color:var(--lionsmane);
}
.about-portrait .cap b{font-family:var(--serif);font-style:italic;font-weight:400;font-size:17px}
.about-portrait .cap span{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--marigold-soft)}

.about-copy h2{
  font-family:var(--serif);font-weight:400;font-size:clamp(32px,4vw,48px);line-height:1.1;letter-spacing:-0.02em;
  color:var(--midnight);margin-bottom:20px;font-variation-settings:"opsz" 96;
}
.about-copy h2 em{font-style:italic}
.about-copy p{font-size:17px;color:var(--ink-soft);line-height:1.7;margin-bottom:16px;max-width:54ch}
.about-copy .about-meta{margin-top:28px;display:grid;grid-template-columns:repeat(3,1fr);gap:18px;padding-top:20px;border-top:1px solid var(--rule)}
.about-copy .about-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:0.14em;text-transform:uppercase;color:var(--ink-mute);margin-bottom:4px}
.about-copy .about-meta dd{font-family:var(--serif);font-size:19px;color:var(--midnight);font-weight:400}

/* Responsive */
@media (max-width:980px){
  .about-teaser .wrap{grid-template-columns:1fr;gap:40px}
  .about-portrait{max-width:360px}
}
@media (max-width:720px){
  .about-copy .about-meta{grid-template-columns:1fr 1fr}
}