/* Author Page profile band. Scoped entirely to .author-* classes so nothing here can leak into
   any other template — this file only loads on is_author() (see inc/enqueue.php). */

.author-hero{background:var(--dark);color:#fff}
.author-hero-in{display:flex;align-items:center;gap:clamp(20px,3vw,36px);padding-block:clamp(32px,5vw,56px)}

.author-photo-wrap{flex:none}
/* Fixes the real bug found in review: get_avatar()'s <img> was inheriting a full-width ".media"
   rule from elsewhere and rendering stretched. This gives it its own explicit, contained size. */
.author-photo{display:block;width:120px;height:120px;border-radius:50%;object-fit:cover;border:3px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08)}

.author-info{min-width:0}
.author-name{font-family:var(--serif);font-weight:800;font-size:clamp(1.8rem,1.3rem + 2vw,2.6rem);line-height:1.1;letter-spacing:-.01em;color:#fff;margin:0}
.author-bio{font-family:var(--sans);font-size:1rem;line-height:1.55;color:rgba(255,255,255,.82);max-width:62ch;margin:12px 0 0}

.author-social{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:16px 0 0}
.author-social a{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.3);color:#fff;transition:background .15s ease,border-color .15s ease}
.author-social a:hover,.author-social a:focus-visible{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.55)}
.author-social svg{display:block}

@media (max-width:720px){
  .author-hero-in{flex-direction:column;align-items:flex-start;text-align:left;gap:16px}
  .author-photo{width:88px;height:88px}
  .author-name{font-size:1.6rem}
  .author-bio{font-size:.95rem}
}