/* =========================================================
   profile.css — avatar, name, short bio
   ========================================================= */

.profile {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Avatar: the S_ logo mark inside a cyan ring (one glow, not two) */
.avatar {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:
    0 0 0 3px var(--bg),                    /* gap between avatar and ring */
    0 0 0 4px rgba(103,232,249,.5),         /* the 1px cyan ring           */
    0 0 24px rgba(34,211,238,.16);          /* soft outer glow             */
}
.avatar img { display: block; width: 46px; height: 46px; }

/* Groundwork h3: weight 500 (never bold), tight tracking */
.name {
  margin-top: var(--space-4);
  font-size: var(--text-h3);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.eyebrow {
  margin-top: var(--space-1);
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--muted);
  text-wrap: balance;                       /* even line lengths if it ever wraps */
}
.eyebrow .dot { color: var(--accent); }

/* Short screens (iPhone SE, Instagram's in-app browser with its toolbars):
   tighten the header so more links fit in the first screen */
@media (max-height: 700px) {
  .avatar     { width: 56px; height: 56px; }
  .avatar img { width: 36px; height: 36px; }
  .name       { margin-top: var(--space-3); }
}