:root{
    --ink:#1c1510;
    --cream:#f6efe1;
    --paper:#fbf6ec;
    --pine:#1f4d3d;
    --pine-dark:#12332a;
    --brick:#a3372f;
    --gold:#b6904f;
    --sand:#ded0b2;
    --line: rgba(28,21,16,0.12);
    --shadow: 0 20px 50px -25px rgba(18,51,42,0.35);
  }
  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    background:var(--cream);
    color:var(--ink);
    font-family:'Inter',sans-serif;
    font-size:16px;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
  }
  h1,h2,h3,.display{
    font-family:'Fraunces',serif;
    font-weight:450;
    letter-spacing:-0.01em;
    margin:0;
  }
  .eyebrow{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.72rem;
    letter-spacing:0.18em;
    text-transform:uppercase;
    color:var(--pine);
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:1px;
    background:var(--gold);
    display:inline-block;
  }
  a{color:inherit;}
  img{max-width:100%;display:block;}
  .wrap{max-width:1180px;margin:0 auto;padding:0 32px;}
  section{padding:118px 0;position:relative;}

  /* reveal */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform .8s ease;}
  .reveal.in{opacity:1;transform:translateY(0);}

  /* NAV */
  header.nav{
    position:fixed;top:0;left:0;right:0;z-index:50;
    background:rgba(246,239,225,0.86);
    backdrop-filter:blur(10px);
    border-bottom:1px solid var(--line);
  }
  .nav-inner{
    max-width:1180px;margin:0 auto;padding:18px 32px;
    display:flex;align-items:center;justify-content:space-between;
  }
  .nav-name{font-family:'Fraunces',serif;font-size:1.05rem;font-weight:600;}
  .nav-name span{color:var(--brick);}
  nav.links{display:flex;gap:32px;font-size:0.86rem;font-weight:500;}
  nav.links a{text-decoration:none;color:var(--ink);opacity:0.75;transition:opacity .25s;position:relative;}
  nav.links a:hover{opacity:1;}
  .nav-cta{
    display:inline-flex;align-items:center;gap:8px;
    background:var(--pine);color:var(--paper);
    padding:10px 20px;border-radius:2px;
    font-size:0.82rem;font-weight:600;text-decoration:none;
    letter-spacing:0.02em;
    transition:background .25s;
  }
  .nav-cta:hover{background:var(--pine-dark);}
  .nav-cta svg{width:15px;height:15px;flex-shrink:0;}
  .nav-icons{display:flex;align-items:center;gap:8px;}
  .nav-icon-btn{
    display:inline-flex;align-items:center;justify-content:center;
    width:38px;height:38px;border-radius:2px;
    border:1px solid var(--line);color:var(--ink);
    transition:border-color .25s, color .25s, background .25s;
    text-decoration:none;
  }
  .nav-icon-btn svg{width:16px;height:16px;}
  .nav-icon-btn:hover{border-color:var(--pine);color:var(--pine);background:rgba(31,77,61,0.06);}
  .burger{display:none;}

  /* HERO */
  .hero{
    min-height:100vh;
    display:flex;align-items:center;
    padding-top:120px;
    position:relative;
    overflow:hidden;
    background:
      radial-gradient(circle at 88% 18%, rgba(182,144,79,0.16), transparent 42%),
      radial-gradient(circle at 8% 82%, rgba(31,77,61,0.12), transparent 45%),
      var(--cream);
  }
  .hero-grid{
    display:grid;grid-template-columns:1.15fr 0.85fr;gap:60px;align-items:center;width:100%;
  }
  .hero .eyebrow{margin-bottom:26px;}
  .hero h1{
    font-size:clamp(2.6rem,5.2vw,4.4rem);
    line-height:1.03;
    color:var(--ink);
  }
  .hero h1 em{
    font-style:italic;color:var(--pine);
  }
  .hero .role{
    margin-top:22px;
    font-size:1.15rem;
    color:var(--brick);
    font-weight:600;
    font-family:'Fraunces',serif;
    font-style:italic;
  }
  .hero p.pitch{
    margin-top:26px;max-width:520px;
    font-size:1.02rem;color:rgba(28,21,16,0.78);
  }
  .hero-ctas{margin-top:38px;display:flex;gap:16px;flex-wrap:wrap;}
  .btn{
    display:inline-flex;align-items:center;gap:10px;
    padding:14px 26px;border-radius:2px;
    font-size:0.88rem;font-weight:600;text-decoration:none;
    letter-spacing:0.01em;
    transition:transform .25s ease, box-shadow .25s ease, background .25s ease;
  }
  .btn-primary{background:var(--pine);color:var(--paper);box-shadow:var(--shadow);}
  .btn-primary:hover{transform:translateY(-2px);background:var(--pine-dark);}
  .btn-ghost{border:1px solid var(--line);color:var(--ink);}
  .btn-ghost:hover{border-color:var(--pine);color:var(--pine);}
  .btn-whatsapp{background:#25674f;color:var(--paper);box-shadow:var(--shadow);}
  .btn-whatsapp:hover{transform:translateY(-2px);background:#1c4d3a;}
  .btn svg{width:17px;height:17px;flex-shrink:0;}
  .scroll-link{
    display:inline-block;margin-top:22px;font-size:0.82rem;
    color:rgba(28,21,16,0.55);text-decoration:none;border-bottom:1px solid transparent;
    transition:color .25s, border-color .25s;
  }
  .scroll-link:hover{color:var(--pine);border-color:var(--pine);}

  .hero-mark{
    position:relative;display:flex;align-items:center;justify-content:center;
  }
  .star-plate{
    width:min(100%,380px);aspect-ratio:1;
    display:flex;align-items:center;justify-content:center;
    position:relative;
  }
  .star-plate svg{width:100%;height:100%;}
  .hero-loc{
    position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);
    font-size:0.72rem;letter-spacing:0.14em;text-transform:uppercase;
    color:rgba(28,21,16,0.55);white-space:nowrap;
  }

  /* divider */
  .divider{
    display:flex;align-items:center;justify-content:center;
    padding:6px 0 0;
  }
  .divider svg{width:64px;height:64px;opacity:0.9;}

  /* ABOUT */
  .about-grid{
    display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;align-items:start;
  }
  .about-grid h2{font-size:clamp(2rem,3.4vw,2.7rem);margin-bottom:24px;}
  .about-grid p{color:rgba(28,21,16,0.8);font-size:1.02rem;max-width:520px;}
  .facts{
    margin-top:36px;display:grid;grid-template-columns:1fr 1fr;gap:22px 28px;
  }
  .fact{border-top:1px solid var(--line);padding-top:12px;}
  .fact .num{font-family:'Fraunces',serif;font-size:1.6rem;color:var(--brick);}
  .fact .lbl{font-size:0.8rem;color:rgba(28,21,16,0.6);margin-top:2px;}

  .skills-col{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:4px;
    padding:38px 36px;
  }
  .skill-group{margin-bottom:28px;}
  .skill-group:last-child{margin-bottom:0;}
  .skill-group h4{
    font-family:'Inter';font-size:0.76rem;letter-spacing:0.12em;text-transform:uppercase;
    color:var(--pine);font-weight:700;margin-bottom:14px;
  }
  .chips{display:flex;flex-wrap:wrap;gap:9px;}
  .chip{
    font-size:0.83rem;padding:8px 14px;border-radius:20px;
    border:1px solid var(--line);background:var(--cream);
    color:var(--ink);
  }
  .lang-bars{display:flex;flex-direction:column;gap:12px;}
  .lang-row{display:flex;align-items:center;gap:12px;font-size:0.85rem;}
  .lang-row .lname{width:76px;flex-shrink:0;font-weight:600;}
  .lang-track{flex:1;height:6px;background:var(--sand);border-radius:4px;overflow:hidden;}
  .lang-fill{height:100%;background:var(--pine);border-radius:4px;}

  /* PORTFOLIO */
  .work-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:56px;flex-wrap:wrap;}
  .work-head h2{font-size:clamp(2rem,3.4vw,2.7rem);max-width:640px;}
  .work-head p{max-width:360px;color:rgba(28,21,16,0.7);font-size:0.95rem;}

  .cat-label{
    grid-column:1/-1;
    display:flex;align-items:center;gap:14px;
    margin:6px 0 4px;
  }
  .cat-label span{
    font-size:0.75rem;letter-spacing:0.14em;text-transform:uppercase;
    color:var(--gold);font-weight:700;white-space:nowrap;
  }
  .cat-label::after{content:"";flex:1;height:1px;background:var(--line);}

  .gallery{
    display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:22px;
  }
  .gallery:first-of-type{margin-top:0;}
  .card{
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:4px;
    overflow:hidden;
    transition:transform .35s ease, box-shadow .35s ease;
  }
  .card:hover{transform:translateY(-6px);box-shadow:var(--shadow);}
  .card .imgwrap{
    aspect-ratio:4/3;overflow:hidden;background:var(--ink);
  }
  .card.tall .imgwrap{aspect-ratio:3/4;}
  .card img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
  .card:hover img{transform:scale(1.05);}
  .card .meta{padding:18px 20px 22px;}
  .card .meta h4{font-family:'Fraunces',serif;font-size:1.08rem;font-weight:600;margin-bottom:6px;}
  .card .meta p{font-size:0.84rem;color:rgba(28,21,16,0.65);margin:0;}

  /* EXPERIENCE */
  .exp-wrap{display:grid;grid-template-columns:0.9fr 1.1fr;gap:70px;}
  .timeline{border-left:1px solid var(--line);padding-left:36px;display:flex;flex-direction:column;gap:44px;}
  .tl-item{position:relative;}
  .tl-item::before{
    content:"";position:absolute;left:-42px;top:4px;
    width:11px;height:11px;border-radius:50%;
    background:var(--paper);border:2px solid var(--brick);
  }
  .tl-item .period{font-size:0.78rem;letter-spacing:0.06em;color:var(--gold);font-weight:700;text-transform:uppercase;}
  .tl-item h3{font-size:1.3rem;margin-top:6px;}
  .tl-item .place{font-size:0.9rem;color:rgba(28,21,16,0.6);margin-top:2px;}
  .tl-item ul{margin:14px 0 0;padding-left:18px;color:rgba(28,21,16,0.78);font-size:0.92rem;}
  .tl-item li{margin-bottom:6px;}

  .edu-card{
    background:var(--pine);color:var(--paper);
    border-radius:4px;padding:34px 32px;margin-bottom:20px;
  }
  .edu-card h4{font-family:'Fraunces',serif;font-size:1.15rem;}
  .edu-card .period{font-size:0.78rem;color:var(--sand);letter-spacing:0.08em;text-transform:uppercase;margin-top:8px;display:block;}
  .edu-card p{font-size:0.88rem;color:rgba(251,246,236,0.85);margin-top:10px;}

  /* CONTACT */
  .contact{
    background:var(--ink);color:var(--paper);
    border-radius:0;
  }
  .contact .wrap{padding:118px 32px;}
  .contact .eyebrow{color:var(--gold);}
  .contact .eyebrow::before{background:var(--brick);}
  .contact h2{
    font-size:clamp(2.2rem,4.6vw,3.4rem);color:var(--paper);
    max-width:760px;line-height:1.08;
  }
  .contact h2 em{color:var(--gold);font-style:italic;}
  .contact-ctas{
    margin-top:44px;display:flex;gap:16px;flex-wrap:wrap;
  }
  .contact-grid{
    margin-top:44px;display:grid;grid-template-columns:repeat(3,1fr);gap:28px;
  }
  .contact-card{
    border:1px solid rgba(251,246,236,0.16);
    padding:26px;border-radius:4px;
    transition:border-color .25s, background .25s;
  }
  .contact-card:hover{border-color:var(--gold);background:rgba(251,246,236,0.03);}
  .contact-card .lbl{font-size:0.74rem;letter-spacing:0.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px;}
  .contact-card a, .contact-card span{
    font-family:'Fraunces',serif;font-size:1.12rem;text-decoration:none;color:var(--paper);
    word-break:break-word;
  }
  footer{
    text-align:center;padding:26px 32px;font-size:0.78rem;
    color:rgba(251,246,236,0.45);border-top:1px solid rgba(251,246,236,0.1);
  }

  @media (max-width:920px){
    .hero-grid{grid-template-columns:1fr;}
    .hero-mark{order:-1;max-width:220px;margin:0 auto 20px;}
    .about-grid,.exp-wrap{grid-template-columns:1fr;gap:44px;}
    .gallery{grid-template-columns:repeat(2,1fr);}
    .contact-grid{grid-template-columns:1fr;}
    nav.links{display:none;}
    section{padding:80px 0;}
  }
  @media (max-width:560px){
    .gallery{grid-template-columns:1fr;}
    .wrap{padding:0 22px;}
    .facts{grid-template-columns:1fr 1fr;}
  }
  @media (prefers-reduced-motion: reduce){
    .reveal{transition:none;opacity:1;transform:none;}
    .card:hover{transform:none;}
    .card:hover img{transform:none;}
  }