:root {
  --ink: #1d2630;
  --muted: #69747b;
  --paper: #f1f4f2;
  --line: #d7dfdc;
  --lime: #dcefa2;
  --lime-dark: #718633;
  --blue: #4169e1;
  --shadow: 0 24px 70px rgba(29, 38, 48, 0.1);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--ink);
  background: var(--paper);
  font-family: "DM Sans", "Avenir Next", sans-serif;
}

body::before {
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(115deg, rgba(220, 239, 162, 0.42), transparent 34%), linear-gradient(300deg, rgba(65, 105, 225, 0.09), transparent 38%);
  content: "";
}

.profile-shell { width: min(1120px, calc(100% - 48px)); min-height: 100vh; margin: 0 auto; padding: 34px 0 24px; }
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; animation: rise-in 500ms ease both; }
.brand-mark { display: grid; width: 48px; height: 48px; place-items: center; border-radius: 50%; color: var(--ink); background: var(--lime); font-family: "Nunito", sans-serif; font-size: 0.82rem; font-weight: 800; letter-spacing: -0.04em; text-decoration: none; }
.status-pill { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 0.82rem; }
.status-pill span { width: 8px; height: 8px; border-radius: 50%; background: var(--lime-dark); box-shadow: 0 0 0 4px rgba(113, 134, 51, 0.14); }
.eyebrow { margin: 0 0 10px; color: var(--blue); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.14em; }
h1, h2 { margin: 0; font-family: "Nunito", "Avenir Next", sans-serif; }
h1 { max-width: 900px; font-size: clamp(4rem, 12vw, 9.5rem); letter-spacing: -0.05em; line-height: 0.9; text-align: justify; }
.name-line { display: block; color: var(--ink); }
.name-line-secondary { font-size: 0.78em; line-height: 1; white-space: nowrap; }
.name-dot { color: var(--blue); }
h2 { font-size: 1.5rem; letter-spacing: -0.02em; }
.profile-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 0.38fr); align-items: end; gap: 72px; min-height: 520px; padding: 100px 0 88px; animation: rise-in 650ms 100ms ease both; }
.hero-message { margin: 28px 0 0; font-family: "Nunito", sans-serif; font-size: clamp(1.35rem, 3vw, 2rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.2; }
.hero-detail { max-width: 450px; margin: 16px 0 0; color: #526069; font-size: 1.05rem; line-height: 1.7; }
.portrait-placeholder { display: grid; min-height: 280px; align-content: center; justify-items: center; gap: 16px; border: 1px solid var(--ink); border-radius: 48% 48% 10px 10px; color: var(--ink); background: var(--lime); box-shadow: var(--shadow); transform: rotate(3deg); }
.portrait-initials { font-family: "Nunito", sans-serif; font-size: clamp(3rem, 8vw, 5rem); font-weight: 800; letter-spacing: -0.06em; }
.portrait-placeholder span { color: var(--lime-dark); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; line-height: 1.4; text-align: center; text-transform: uppercase; }
.connect-section { display: grid; grid-template-columns: 0.65fr 1fr; gap: 72px; padding: 32px 0 76px; border-top: 1px solid var(--line); animation: rise-in 650ms 180ms ease both; }
.social-links { display: grid; gap: 0; }
.social-link { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 14px; border-bottom: 1px solid var(--line); padding: 16px 0; color: var(--ink); font-size: 1.05rem; text-decoration: none; transition: color 160ms ease, padding 160ms ease; }
.social-link:first-child { border-top: 1px solid var(--line); }
.social-link:hover { padding-left: 8px; color: var(--blue); }
.social-logo { display: grid; width: 30px; height: 30px; place-items: center; border: 1.5px solid currentColor; border-radius: 9px; font-family: "Nunito", sans-serif; font-size: 1.1rem; font-weight: 800; }
.instagram-logo { font-size: 1.7rem; line-height: 0.7; }
.facebook-logo { border-radius: 50%; color: #fff; background: var(--blue); font-size: 1.2rem; }
.threads-logo { border-radius: 50%; font-size: 0.9rem; }
.arrow { color: var(--muted); font-size: 1.25rem; }
.site-footer { display: flex; justify-content: space-between; gap: 20px; border-top: 1px solid var(--line); padding-top: 18px; color: var(--muted); font-size: 0.8rem; }

@keyframes rise-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 760px) {
  .profile-shell { width: min(100% - 32px, 560px); padding-top: 24px; }
  .profile-hero { grid-template-columns: 1fr; gap: 42px; min-height: auto; padding: 88px 0 72px; }
  .portrait-placeholder { width: min(100%, 250px); min-height: 240px; justify-self: end; }
  .connect-section { grid-template-columns: 1fr; gap: 28px; padding-bottom: 62px; }
}

@media (max-width: 460px) {
  .status-pill { font-size: 0.7rem; }
  h1 { font-size: clamp(3.7rem, 20vw, 5.8rem); letter-spacing: -0.04em; }
  .site-footer { align-items: flex-start; flex-direction: column; gap: 8px; }
}