/* ===== Theme colors (EDIT HERE to change the look) ===== */
:root{--bg:#f7faf9;--card:#fff;--text:#16302d;--muted:#5a6e6b;--accent:#0f766e;--accent-2:#e8f3f1;--line:#d6e4e1;--r:14px}
[data-theme="dark"]{--bg:#0e1a19;--card:#152624;--text:#e6f2f0;--muted:#9bb3af;--accent:#4fd1c0;--accent-2:#1b3330;--line:#264542}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:70px}
body{font-family:Inter,sans-serif;background:var(--bg);color:var(--text);line-height:1.65;transition:background .3s,color .3s}
h1,h2,.logo{font-family:Fraunces,serif}
a{color:inherit;text-decoration:none}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* Navbar */
.nav{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:8px;padding:12px 5%;background:var(--bg);border-bottom:1px solid var(--line)}
.logo{font-weight:700;font-size:1.2rem;margin-right:auto;color:var(--accent)}
nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;background:var(--bg);padding:10px 5%;border-bottom:1px solid var(--line)}
nav.open{display:flex}
nav a{padding:10px 0;color:var(--muted);font-weight:500}
nav a.active,nav a:hover{color:var(--accent)}
.nav button{background:none;border:1px solid var(--line);color:var(--text);border-radius:10px;width:40px;height:40px;font-size:1.15rem;cursor:pointer}
#burger{order:3}
/* Hero */
.hero{display:flex;flex-direction:column-reverse;align-items:center;gap:32px;padding:56px 5%;max-width:1100px;margin:auto;text-align:center}
.hello{color:var(--accent);font-weight:600}
.hero h1{font-size:clamp(2.4rem,8vw,4rem);line-height:1.1}
.hero h2{font-size:1.4rem;color:var(--muted);font-weight:600;margin:6px 0 14px}
.lead{max-width:520px;margin:0 auto 24px;color:var(--muted)}
.btns{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.btn{display:inline-flex;gap:6px;align-items:center;padding:10px 20px;border:1.5px solid var(--accent);border-radius:999px;font-weight:600;color:var(--accent);transition:.2s}
.btn:hover,.btn.primary{background:var(--accent);color:var(--bg)}
.btn.primary:hover{opacity:.85}
.photo{width:230px;height:290px;flex:none;border-radius:120px 120px 24px 24px;overflow:hidden;border:4px solid var(--accent);background:var(--accent-2);display:grid;place-items:center;font:700 3rem Fraunces,serif;color:var(--accent)}
.photo img{width:100%;height:100%;object-fit:cover;object-position:top}
/* Sections */
.sec{max-width:1000px;margin:auto;padding:56px 5%}
.title{font-size:2rem;margin-bottom:24px}
.about{max-width:720px;color:var(--muted)}
.grid{display:grid;gap:18px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:transform .25s,box-shadow .25s}
.card:hover{transform:translateY(-4px);box-shadow:0 10px 24px rgba(0,0,0,.12)}
.card h3{font-size:1.1rem;margin-bottom:4px}
.meta{color:var(--muted);font-size:.9rem}
.card img{width:100%;height:170px;object-fit:cover;border-radius:10px;margin-bottom:12px}
.ph{height:170px;border-radius:10px;margin-bottom:12px;background:var(--accent-2);color:var(--accent);display:grid;place-items:center;font-size:2.5rem}
.timeline{border-left:3px solid var(--accent);padding-left:20px;display:grid;gap:18px}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{background:var(--accent-2);color:var(--accent);padding:4px 12px;border-radius:999px;font-size:.88rem;font-weight:500}
.group{margin-bottom:20px}.group h3{font-size:1.05rem}
.links{display:flex;gap:10px;margin-top:14px}
.links .btn{padding:6px 14px;font-size:.9rem}
.contacts{display:grid;gap:12px;margin-top:20px}
.contacts a{display:flex;gap:10px;align-items:center;padding:14px 18px;background:var(--card);border:1px solid var(--line);border-radius:var(--r)}
.contacts a:hover{border-color:var(--accent);color:var(--accent)}
footer{display:flex;justify-content:space-between;align-items:center;padding:24px 5%;border-top:1px solid var(--line);color:var(--muted)}
/* Reveal animation (one subtle fade-in per section) */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s,transform .6s}
.reveal.show{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}.reveal{opacity:1;transform:none}}
/* Tablet and desktop */
@media(min-width:700px){.grid{grid-template-columns:repeat(2,1fr)}.contacts{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  #burger{display:none}
  nav{display:flex;position:static;flex-direction:row;gap:18px;padding:0;border:0;background:none}
  nav a{padding:0;font-size:.95rem}
  .logo{margin-right:24px}
  nav{margin-left:auto}
  .hero{flex-direction:row;justify-content:space-between;text-align:left;padding-top:80px}
  .lead{margin-left:0}.btns{justify-content:flex-start}
  .photo{width:300px;height:380px}
  #projects-list{grid-template-columns:repeat(2,1fr)}
}