:root{
      --black:#0f1310;           /* top dark bg */
      --ivory:#e9f0e8;           /* pale greenish background */
      --mint:#22c55e;            /* bright green */
      --muted-dark:#222826;
      --card:#f7fbf7;           /* white cards */
      --pill-shadow: rgba(0,0,0,0.06);
      --rounded:22px;
      --gutter:28px;
      --maxw:1100px;
    }

    *{box-sizing:border-box}
    html,body{height:100%}
    body{
      margin:0;
      font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
      background:var(--ivory);
      color:var(--muted-dark);
      -webkit-font-smoothing:antialiased;
      -moz-osx-font-smoothing:grayscale;
      line-height:1.35;
      -webkit-text-size-adjust:100%;
    }

    .wrap{max-width:var(--maxw);margin:0 auto;padding:36px 20px}

    /* HERO (dark) */
    .hero{
      background:var(--black);
      color:#e8e7e3;
      border-radius:28px;
      padding:36px;
      display:grid;
      grid-template-columns: 1fr 360px;
      gap:30px;
      align-items:center;
      overflow:visible;
    }

    /* left hero text */
    .hero-intro small{display:block;color:#d7d7d3;font-weight:500;margin-bottom:8px}
    .hero-title{
      font-size:46px;
      line-height:1;
      margin:0 0 10px;
      font-weight:800;
      letter-spacing: -0.6px;
    }
    .hero-title .name{
      display:block;
      font-weight:900;
      color:#f6efe8;
    }
    .subtitle{
      color: #35d07a; /* bright green text below name */
      font-weight:700;
      margin-top:10px;
      font-size:16px;
    }

    /* profile picture card (right) */
    .profile-card{
      width:100%;
      max-width:360px;
      margin-left:auto;
    }
    .profile-frame{
      background:#2b352b;
      padding:14px;
      border-radius:22px;
      display:flex;
      justify-content:center;
      align-items:center;
      box-shadow: 0 14px 30px rgba(0,0,0,0.45);
    }
    .profile-frame:hover{
      transform: scale(1.05);
      transition: transform 0.3s ease-in-out; 
     
    }
    .profile-img{
      width:100%;
      height:320px;
      max-width:320px;
      object-fit:cover;
      border-radius:14px;
      display:block;
      background:linear-gradient(180deg,#7a8c7a, #3f6b55);
    }

    /* spacing under hero */
    .section{
      margin-top:36px;
    }

    /* "A Quick Background" row layout */
    .bg-row{
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:var(--gutter);
      align-items:start;
    }
    .section-title{
      font-size:36px;
      font-weight:800;
      margin:0 0 18px;
    }

    /* right column uses white rounded pills */
    .info-pills{
      display:flex;
      flex-direction:column;
      gap:16px;
    }
    .pill{
      background:var(--card);
      padding:18px;
      border-radius:14px;
      box-shadow: 0 6px 18px var(--pill-shadow);
      font-weight:600;
      font-size:14px;
      
    }
    .pill:hover{
      background-color:#22c55e;
      transition: background 0.3s ease, background-color 0.3s ease;
    }
    .pill:hover .lead{
      color:#fff;
    }
    .pill .lead{color:var(--mint); font-weight:700; margin-bottom:6px}
    .pill small{display:block; font-weight:500; color:#111; margin-top:3px; font-size:13px; letter-spacing:0.2px}

    /* gallery strip of creative work */
    .gallery{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:18px;
      margin-top:18px;
      align-items:stretch;
    }
    .thumb{
      background:#fff;
      border-radius:16px;
      overflow:hidden;
      box-shadow:0 8px 20px rgba(0,0,0,0.08);
      min-height:140px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
     .thumb:hover{
      transform: scale(1.07);
      transition: transform 0.5s ease;
     }
    .thumb img{width:100%;height:100%;object-fit:cover;display:block;}

    .gallery .thumb-large{grid-column:2; grid-row:1 / span 2; min-height:280px}

    .gallery-caption{
      text-align:center;
      margin-top:14px;
      color:#2b2f2b;
      font-weight:600;
      letter-spacing:0.2px;
      font-size:15px;
    }

    /* Green block: Three Fun Facts */
    .green-block{
      background:var(--mint);
      color:#04220b;
      border-radius:0;
      padding:38px 36px;
      margin-top:28px;
      border-radius:14px;
    }
    .green-row{display:grid;grid-template-columns: 1fr 520px;gap:var(--gutter);align-items:start}
    .fact-pills{display:flex;flex-direction:column;gap:14px}
    .fact{
      background:var(--card);
      border-radius:12px;
      padding:14px;
      box-shadow: 0 6px 16px rgba(0,0,0,0.08);
      font-weight:600;
    }

     

    .fact .fhead{color:var(--mint);font-weight:800;margin-bottom:6px}
    .fact p{margin:0;font-weight:500;color:#12321a;font-size:13px}

    /* "Things I Love" */
    .love-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px;align-items:start}
    .love-card{background:var(--card);border-radius:14px;padding:12px;box-shadow:0 6px 18px rgba(0,0,0,0.06)}
    .love-card img{width:100%;height:220px;object-fit:cover;border-radius:12px;display:block}

    .love-caption{
      text-align:center;margin-top:12px;color:#2b2f2b;font-weight:600;
    }

    /* Footer green section */
    footer{
      margin-top:28px;
      background:var(--mint);
      color:#04220b;
      border-radius:12px;
      padding:30px 36px;
      display:grid;
      grid-template-columns: 1fr 420px;
      gap:var(--gutter);
      align-items:center;
    }

    footer .left h3{font-size:26px;margin:0 0 8px;font-weight:800}
    footer .left small{display:block;margin-top:6px;color:#043116;font-weight:600}
    footer .right{display:flex;flex-direction:column;gap:6px;align-items:flex-start}
    footer .right small{font-weight:600;color:#052815}
    .socials{display:flex;gap:12px;margin-top:8px}
    .socials a{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;background:#fff;border-radius:999px;text-decoration:none;color:var(--mint);font-weight:800;box-shadow:0 6px 16px rgba(0,0,0,0.08)}

    /* smaller text near bottom */
    .credit{margin-top:18px;color:#053118;font-weight:600;font-size:14px}

    /* responsive */
    @media (max-width:1100px){
      .hero{grid-template-columns:1fr 320px}
      .bg-row{grid-template-columns:1fr 360px}
      .green-row{grid-template-columns:1fr 1fr}
      footer{grid-template-columns:1fr 1fr}
    }
    @media (max-width:880px){
      .hero{grid-template-columns:1fr; padding:28px}
      .profile-card{margin-top:18px}
      .bg-row{grid-template-columns:1fr}
      .gallery{grid-template-columns: repeat(2, 1fr)}
      .gallery .thumb-large{grid-column:auto;grid-row:auto;min-height:180px}
      .green-row{grid-template-columns:1fr}
      .love-row{grid-template-columns:1fr}
      footer{grid-template-columns:1fr}
    }

    /* small tweaks */
    a{color:inherit}
    .muted{color: #7b7f7a; font-weight:500}
    .btn{
      display:inline-block;
      background:transparent;
      color:#e9f0e8;
      border:1px solid rgba(255,255,255,0.06);
      padding:10px 14px;border-radius:12px;
      text-decoration:none;font-weight:700;
    }