*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

  :root{
    --bg:#1b1d23;
    --bg-card:#252830;
    --cream:#e8dcc8;
    --gold:#c4a96a;
    --gold-muted:#9a8564;
    --text:#b8b5af;
    --text-light:#d4cfc6;
    --border:rgba(196,169,106,.25);
    --btn:#c4a880;
  }

  html{scroll-behavior:smooth}

  body{
    background:var(--bg);
    color:var(--text);
    font-family:'Outfit',sans-serif;
    font-weight:300;
    min-height:100vh;
    overflow-x:hidden;
    position:relative;
  }

  /* ── Geometric background decorations ── */
  .geo{position:fixed;pointer-events:none;z-index:0}

  .geo-cube{
    width:340px;height:340px;
    top:-40px;right:-60px;
    opacity:.08;
    animation:spinSlow 60s linear infinite;
  }
  .geo-cube svg{width:100%;height:100%}

  .geo-cube-2{
    width:280px;height:280px;
    bottom:60px;left:-80px;
    opacity:.06;
    animation:spinSlow 80s linear infinite reverse;
  }
  .geo-cube-2 svg{width:100%;height:100%}

  .geo-hex{
    width:500px;height:500px;
    top:10%;right:-100px;
    opacity:.04;
    animation:float 20s ease-in-out infinite;
  }
  .geo-hex svg{width:100%;height:100%}

  @keyframes spinSlow{to{transform:rotate(360deg)}}
  @keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-20px)}}

  /* ── Sparkle ── */
  .sparkle{
    position:fixed;
    bottom:60px;right:80px;
    width:36px;height:36px;
    opacity:.35;
    z-index:1;
    animation:pulse 3s ease-in-out infinite;
  }
  @keyframes pulse{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:.6;transform:scale(1.15)}}

  /* ── Noise overlay ── */
  body::after{
    content:'';position:fixed;inset:0;
    background:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events:none;z-index:0;opacity:.5;
  }

  /* ── Main wrapper ── */
  .wrapper{
    position:relative;z-index:1;
    max-width:820px;
    margin:0 auto;
    padding:100px 32px 60px;
  }

  /* ── Hero ── */
  .hero{margin-bottom:70px}

  .hero__subtitle{
    font-family:'Outfit',sans-serif;
    font-weight:400;
    font-size:clamp(.75rem,1.4vw,1.15rem);
    letter-spacing:.28em;
    color:var(--gold-muted);
    text-transform:uppercase;
    margin-bottom:12px;
    opacity:0;animation:fadeUp .8s .2s forwards;
  }

  .hero__name{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(2.8rem,7vw,5.2rem);
    font-weight:600;
    color:var(--cream);
    line-height:1.05;
    letter-spacing:.02em;
    opacity:0;animation:fadeUp .8s .4s forwards;
  }
  .hero__name em{
    font-style:italic;
    font-weight:500;
  }

  /* ── Bio card ── */
  .bio{
    display:flex;
    align-items:center;
    gap:28px;
    border:1px solid var(--border);
    border-radius:6px;
    padding:32px 36px;
    background:rgba(37,40,48,.6);
    backdrop-filter:blur(12px);
    margin-bottom:80px;
    opacity:0;animation:fadeUp .8s .6s forwards;
  }

  .bio__avatar{
    flex-shrink:0;
    width:90px;height:90px;
    border-radius:50%;
    overflow:hidden;
    border:2px solid var(--border);
    background:var(--bg-card);
  }
  .bio__avatar img{
    width:100%;height:100%;
    object-fit:cover;
    filter:grayscale(1) contrast(1.05);
  }

  .bio__text{
    font-family:'Outfit',sans-serif;
    font-weight:300;
    font-size:.82rem;
    letter-spacing:.14em;
    line-height:1.7;
    text-transform:uppercase;
    color:var(--text-light);
  }

  /* ── Contact ── */
  .contact{
    text-align:center;
    margin-bottom:60px;
    opacity:0;animation:fadeUp .8s .8s forwards;
  }

  .contact__heading{
    font-family:'Cormorant Garamond',serif;
    font-size:clamp(1.4rem,3.5vw,2rem);
    font-weight:600;
    letter-spacing:.12em;
    color:var(--cream);
    text-transform:uppercase;
    margin-bottom:40px;
  }

  .contact__form{
    text-align:left;
    max-width:600px;
    margin:0 auto;
  }

  .contact__row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:20px;
    margin-bottom:20px;
  }

  .field{position:relative}

  .field input,.field textarea{
    width:100%;
    background:transparent;
    border:none;
    border-bottom:1px solid rgba(255,255,255,.15);
    padding:14px 0 12px;
    font-family:'Outfit',sans-serif;
    font-weight:300;
    font-size:.9rem;
    color:var(--text-light);
    outline:none;
    transition:border-color .3s;
  }
  .field input::placeholder,.field textarea::placeholder{
    color:var(--text);
    opacity:.6;
    font-weight:300;
    letter-spacing:.04em;
  }
  .field input:focus,.field textarea:focus{
    border-bottom-color:var(--gold-muted);
  }
  .field textarea{
    resize:vertical;
    min-height:80px;
    margin-bottom:10px;
  }

  .contact__actions{
    display:flex;
    justify-content:flex-end;
    margin-top:20px;
  }

  .btn{
    font-family:'Outfit',sans-serif;
    font-weight:500;
    font-size:.82rem;
    letter-spacing:.1em;
    text-transform:uppercase;
    padding:12px 32px;
    border:none;
    cursor:pointer;
    background:var(--btn);
    color:var(--bg);
    transition:all .3s ease;
  }
  .btn:hover{
    background:var(--cream);
    transform:translateY(-1px);
    box-shadow:0 4px 20px rgba(196,169,106,.25);
  }

  /* ── Footer / Social ── */
  .footer{
    text-align:center;
    padding:30px 0 0;
    opacity:0;animation:fadeUp .8s 1s forwards;
  }

  .social{
    display:flex;
    justify-content:center;
    gap:20px;
  }
  .social a{
    display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;
    color:var(--text);
    transition:color .3s,transform .3s;
  }
  .social a:hover{
    color:var(--cream);
    transform:translateY(-2px);
  }
  .social a svg{width:20px;height:20px}

  /* ── Animations ── */
  @keyframes fadeUp{
    from{opacity:0;transform:translateY(24px)}
    to{opacity:1;transform:translateY(0)}
  }

  /* ── Responsive ── */
  @media(max-width:600px){
    .wrapper{padding:60px 20px 40px}
    .bio{flex-direction:column;text-align:center;padding:24px 20px}
    .contact__row{grid-template-columns:1fr}
    .geo-cube,.geo-cube-2,.geo-hex{display:none}
    .sparkle{right:24px;bottom:24px}
  }