:root{--bg:#f2f4ef;--ink:#17211d;--muted:#55635d;--accent:#1f6f5c;--line:#c9d1c8;--chip:#e2e8e0;
--head:'Bricolage Grotesque',system-ui,sans-serif;--body:'Newsreader',Georgia,serif}
@media(prefers-color-scheme:dark){:root{--bg:#121916;--ink:#e8eee9;--muted:#9fb0a8;--accent:#6fc4ad;--line:#2b3a34;--chip:#1c2823}}
*{box-sizing:border-box}html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font:1.15rem/1.65 var(--body)}
a{color:var(--accent)}a:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.top{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.5rem 1.5rem;padding:1rem clamp(1rem,5vw,4rem);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--bg);z-index:5}
.brand{font:800 1.1rem var(--head);color:var(--ink);text-decoration:none}
.top nav{display:flex;gap:1.2rem;flex-wrap:wrap}.top nav a{font:500 .95rem var(--head);color:var(--muted);text-decoration:none}
.top nav a:hover{color:var(--accent)}
main,footer{padding:0 clamp(1rem,5vw,4rem)}
.hero{padding:clamp(3rem,10vw,8rem) 0 clamp(2rem,6vw,5rem);max-width:1100px}
.hero h1{font:800 clamp(2.8rem,10vw,7.5rem)/.95 var(--head);letter-spacing:-.03em;margin:0 0 1.5rem;overflow-wrap:anywhere}
.role{font:500 1.2rem var(--head);color:var(--accent);margin:0}
.tag{max-width:36rem;color:var(--muted);font-size:1.3rem}
.foto{width:11rem;height:11rem;object-fit:cover;border-radius:50%;margin-top:1rem}
.blok{display:grid;grid-template-columns:minmax(9rem,1fr) 3fr;gap:1rem 3rem;padding:2.5rem 0;border-top:1px solid var(--line);max-width:1100px}
.blok h2{font:800 1.3rem var(--head);margin:0}
.isi{max-width:42rem}.isi p{margin:0 0 1rem}
h3{font:500 1.1rem var(--head);margin:0 0 .3rem}
.grup{margin-bottom:1.2rem}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:.4rem;padding:0;margin:.4rem 0 0}
.chips li{background:var(--chip);padding:.1rem .7rem;border-radius:99px;font:500 .9rem var(--head)}
.timeline{list-style:none;padding:0;margin:0}.timeline li{margin-bottom:1.6rem;padding-left:1rem;border-left:3px solid var(--accent)}
time{font:500 .9rem var(--head);color:var(--muted)}
.proyek{display:grid;gap:1.6rem}.proyek article{padding-bottom:1.4rem;border-bottom:1px solid var(--line)}
.proyek article:last-child{border:0}
.kontak{list-style:none;padding:0;display:grid;gap:.4rem}.kontak a{font:500 1.05rem var(--head)}
footer{padding-top:2rem;padding-bottom:2rem;color:var(--muted);font-size:.95rem;border-top:1px solid var(--line)}
@media(max-width:700px){.blok{grid-template-columns:1fr}}