:root {
      --c-bg:       #F7F8FA;
      --c-surface:  #FFFFFF;
      --c-ink:      #1A1B1E;
      --c-muted:    #6B7280;
      --c-accent:   #2563EB;
      --c-border:   #E5E7EB;

      --f-display: "DM Serif Display", Georgia, serif;
      --f-body:    "Inter", system-ui, sans-serif;
    }

    body {
      background: var(--c-bg);
      font-family: var(--f-body);
      color: var(--c-ink);
      min-height: 100vh;
      display: flex;
      align-items: center;
    }

    /* ── Profile card ────────────────────────────────────── */
    .profile-card {
      background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: 1.25rem;
      overflow: hidden;
      margin: 2rem 0 1rem 0;
    }

    /* ── Left: image column ──────────────────────────────── */
    .profile-image-col {
      background: #DBEAFE;           /* soft blue wash behind photo */
      display: flex;
      align-items: stretch;
      min-height: 420px;
    }

    .profile-image-col img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
      display: block;
    }

    /* Placeholder shown when no real photo is present */
    .profile-placeholder {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 5rem;
      color: #93C5FD;
      background: #DBEAFE;
      min-height: 360px;
    }

    /* ── Right: text column ──────────────────────────────── */
    .profile-body {
      padding: 3rem 2.5rem;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .profile-eyebrow {
      font-size: 0.8125rem;
      font-weight: 500;
      letter-spacing: 0.04em;
      color: var(--c-accent);
      margin-bottom: 0.625rem;
    }

    .profile-name {
      font-family: var(--f-display);
      font-size: clamp(2rem, 4vw, 2.75rem);
      line-height: 1.1;
      margin-bottom: 0.25rem;
      color: var(--c-ink);
    }

    .profile-title {
      font-size: 1rem;
      color: var(--c-muted);
      margin-bottom: 1.75rem;
    }

    .profile-bio {
      font-size: 1rem;
      line-height: 1.75;
      color: #374151;
      max-width: 42ch;
      margin-bottom: 2rem;
    }

    /* ── Tags ────────────────────────────────────────────── */
    .tag-list {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem;
      margin-bottom: 2rem;
    }

    .tag {
      font-size: 0.8125rem;
      font-weight: 500;
      padding: 0.3rem 0.75rem;
      border-radius: 99px;
      background: #EFF6FF;
      color: var(--c-accent);
      border: 1px solid #BFDBFE;
    }

    /* ── CTA ─────────────────────────────────────────────── */
    .contact-btn {
      height: 48px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
    }

  .btn-profile {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      background: var(--c-accent);
      color: #fff;
      font-size: 0.9375rem;
      font-weight: 500;
      padding: 0.65rem 1.5rem;
      border-radius: 0.5rem;
      border: none;
      text-decoration: none;
      transition: background 0.15s;
      align-self: flex-start;
    }
    
  .linkedin-btn {
    border-radius: 0.5rem;
    overflow: hidden; 
    width: 48px;       
  }

  .linkedin-btn svg {
    width: 100%;
    height: 100%;
    display: block;
  }

  .projects-card {
	background: var(--c-surface);
      border: 1px solid var(--c-border);
      border-radius: 1.25rem;
      overflow: hidden;
      margin: 0 0 2rem 0;
	  padding: 1rem;
	  font-family: var(--f-display);
  }

    .btn-profile:hover {
      background: #1D4ED8;
      color: #fff;
    }

    /* ── Responsive ──────────────────────────────────────── */
    @media (max-width: 767px) {
      .profile-image-col {
        min-height: 260px;
      }

      .profile-body {
        padding: 2rem 1.5rem;
      }

      .profile-bio {
        max-width: 100%;
      }
    }