:root{
    /* Warmer palette than Devan's portfolio: deep plum/navy with rose-gold accent */
    --bg1:#2a1f3a;
    --bg2:#120b1f;
    --card:#1c1530;
    --ink:#f4ecff;
    --muted:#cdb8e2;
    --brand:#e8b4b8;       /* soft rose-gold */
    --brand-ink:#1a0f24;
    --ring:#c9a3ff;
  }

  *{box-sizing:border-box}
  html,body{margin:0;padding:0}
  body{
    font-family:Inter,system-ui,Segoe UI,Roboto,Arial,sans-serif;
    color:var(--ink);
    background:linear-gradient(180deg,var(--bg1),var(--bg2));
    min-height:100vh; display:flex; flex-direction:column;
  }

  a{color:var(--brand); text-decoration:none}
  a:hover{opacity:.9}

  .container{width:min(1100px,92%); margin:32px auto; display:grid; gap:24px}

  .site-header, .site-footer{width:min(1100px,92%); margin:16px auto}
  .site-header{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    padding:12px 0; flex-wrap:wrap;
  }
  .brand{display:flex; align-items:center; gap:14px}
  .avatar img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
  }

  .brand-text .name{margin:0;font-size:1.4rem}
  .brand-text .tagline{margin:2px 0 0;color:var(--muted); font-size:.95rem}

  .site-nav{display:flex; gap:18px; align-items:center; flex-wrap:wrap}
  .site-nav a{color:var(--ink)}
  .btn{
    background:var(--brand); color:var(--brand-ink); padding:10px 14px;
    border-radius:10px; font-weight:700; border:2px solid var(--brand); display:inline-block
  }
  .btn:hover{transform:translateY(-1px)}
  .btn.outline{
    background:transparent; color:var(--ink); border-color:var(--ink)
  }
  .btn.primary{box-shadow:0 0 0 0 rgba(201,163,255,0); outline:none}
  .btn.primary:focus{box-shadow:0 0 0 3px var(--ring)}

  .card{
    background:var(--card);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px; padding:22px;
    box-shadow:0 6px 24px rgba(0,0,0,.30)
  }

  /* Hero — photo + intro side-by-side on wider screens */
  .hero{display:grid; gap:22px; align-items:center}
  @media (min-width: 760px){
    .hero{grid-template-columns: 280px 1fr}
  }
  .hero-photo img{
    width:100%; max-width:280px;
    aspect-ratio: 3/4;
    object-fit: cover;
    border-radius: 14px;
    display:block;
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
  }
  .hero-text h2{margin:0 0 .5rem}
  .hero-text p{margin:0; line-height:1.7; color:#efe6ff}

  .grid-3{display:grid; gap:18px}
  @media (min-width: 860px){
    .grid-3{grid-template-columns:repeat(3,1fr)}
  }

  .facts .fact{display:flex; gap:14px; align-items:flex-start}
  .facts .fact i{font-size:1.6rem; color:var(--brand); margin-top:2px}
  .facts h3{margin:.2rem 0 .25rem}
  .facts p{margin:0; color:var(--muted); line-height:1.55}

  .education h2, .music h2, .family h2, .contact h2, .hero-text h2{margin-top:0}

  .timeline{list-style:none; margin:0; padding:0; display:grid; gap:16px}
  .timeline .meta{color:var(--muted); font-size:.95rem}
  .timeline h4{margin:.1rem 0}
  .timeline p{margin:.35rem 0 0; color:#efe6ff; line-height:1.6}

  .family p{margin:0; line-height:1.7; color:#efe6ff}

  .contact .contact-list{
    list-style:none; padding:0; margin:0 0 14px 0; display:grid; gap:8px
  }
  .contact .contact-list i{color:var(--brand); width:20px}
  .contact .cta-row{display:flex; gap:12px; flex-wrap:wrap}

  .site-footer{color:var(--muted); text-align:center; padding:18px 0 36px}

  /* Decorative section icons, parallel to the About Devan page */
  .education h2::before { content: "🎓 "; }
  .music h2::before     { content: "🎺 "; }
  .family h2::before    { content: "🏡 "; }