*{box-sizing:border-box}
html{font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,"Helvetica Neue",Arial,sans-serif;line-height:1.6}
body{margin:0;background:#0b0f14;color:#e6edf3}
a{color:#9bdcff;text-decoration:none}
a:hover{text-decoration:underline}

.container{max-width:980px;margin:0 auto;padding:24px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;border-bottom:1px solid #1f2937;background:rgba(255,255,255,0.03);backdrop-filter:blur(8px);position:sticky;top:0;z-index:10}
.id-block h1{margin:0;font-size:2rem}
.role{margin:.25rem 0 .5rem;color:#cbd5e1}
.contact{margin:0;color:#94a3b8}

.links{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.btn{border:1px solid #334155;background:transparent;color:#e6edf3;padding:8px 12px;border-radius:10px;cursor:pointer;transition:all .15s ease}
.btn:hover{transform:translateY(-1px);background:rgba(255,255,255,0.03)}
.btn.active{border-color:#60a5fa}
.btn.outline{border-style:dashed}

h2{margin:28px 0 10px;font-size:1.15rem;color:#e6edf3}
h3{margin:0 0 6px;font-size:1.05rem}
.meta{color:#94a3b8;font-size:.9rem}

section{margin:18px 0 24px}
ul{margin:10px 0 0 1.2rem;padding:0}
ul li{margin:6px 0;list-style:disc}

.project{padding:14px;border:1px solid #1f2937;border-radius:12px;margin:12px 0;background:rgba(255,255,255,0.02)}
.project .links{margin-top:8px}
.project .shot{display:block;width:100%;height:auto;border-radius:10px;margin-top:10px;border:1px solid #1f2937}

.foot{border-top:1px solid #1f2937;color:#94a3b8;margin-top:24px}

@media (min-width:900px){
  .container{max-width:1024px}
}
@media print{
  header .btn{display:none}
  a{color:#000;text-decoration:none}
  body{background:#fff;color:#000}
  .project{background:#fff;border-color:#ddd}
}

/* anchor navigation */
html{scroll-behavior:smooth;}
section{scroll-margin-top:90px;}
section:target{outline:2px solid currentColor;outline-offset:12px;border-radius:12px;}