/* Self-hosted fonts */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/inter-400.woff2') format('woff2');
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('fonts/jetbrains-mono-400.woff2') format('woff2');
}

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

:root{
  --bg:#fafafa;
  --surface:rgba(255,255,255,.6);
  --surface-border:rgba(0,0,0,.06);
  --surface-hover:rgba(255,255,255,.85);
  --surface-shadow:0 1px 3px rgba(0,0,0,.04),0 4px 16px rgba(0,0,0,.04);
  --surface-shadow-hover:0 2px 8px rgba(0,0,0,.06),0 8px 32px rgba(0,0,0,.06);
  --text:#111;
  --muted:#777;
  --dim:#aaa;
  --dot:rgba(0,0,0,.08);
  --accent:#111;
  --accent-bg:rgba(0,0,0,.04);
  --tag-bg:rgba(0,0,0,.04);
  --tag-text:#555;
}
[data-theme="dark"]{
  --bg:#0a0a0c;
  --surface:rgba(255,255,255,.04);
  --surface-border:rgba(255,255,255,.07);
  --surface-hover:rgba(255,255,255,.08);
  --surface-shadow:0 1px 3px rgba(0,0,0,.2),0 4px 16px rgba(0,0,0,.2);
  --surface-shadow-hover:0 2px 8px rgba(0,0,0,.3),0 8px 32px rgba(0,0,0,.3);
  --text:#e8e8e8;
  --muted:#777;
  --dim:#444;
  --dot:rgba(255,255,255,.045);
  --accent:#e8e8e8;
  --accent-bg:rgba(255,255,255,.06);
  --tag-bg:rgba(255,255,255,.06);
  --tag-text:#999;
}

body{
  font-family:'Inter',-apple-system,system-ui,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  transition:background .35s,color .35s;
}

/* dot grid */
body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background-image:radial-gradient(circle,var(--dot) 1px,transparent 1px);
  background-size:24px 24px;
}

.mono{font-family:'JetBrains Mono',monospace}

.container{
  position:relative;
  z-index:1;
  max-width:600px;
  margin:0 auto;
  padding:3.5rem 1.5rem 4rem;
}

/* glass card base */
.card{
  background:var(--surface);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--surface-border);
  border-radius:12px;
  box-shadow:var(--surface-shadow);
  transition:all .25s ease;
}

/* theme toggle */
.toggle{
  position:fixed;
  top:1.25rem;
  right:1.25rem;
  z-index:10;
  width:42px;
  height:42px;
  border-radius:10px;
  border:1.5px solid var(--surface-border);
  background:var(--bg);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.15rem;
  box-shadow:var(--surface-shadow);
}
.toggle:hover{transform:translateY(-1px);box-shadow:var(--surface-shadow-hover)}
.toggle:active{transform:translateY(0)}

/* ── profile ── */
.profile{
  text-align:center;
  padding:2.25rem 2rem 1.75rem;
  margin-bottom:1.25rem;
}
.avatar-wrap{
  position:relative;
  display:inline-block;
  margin-bottom:1rem;
}
.avatar{
  width:110px;
  height:110px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--surface-border);
  transition:transform .3s,box-shadow .3s;
}
.avatar:hover{transform:scale(1.04);box-shadow:0 8px 28px rgba(0,0,0,.08)}
.status{
  position:absolute;
  bottom:4px;right:4px;
  width:14px;height:14px;
  background:#22c55e;
  border-radius:50%;
  border:2.5px solid var(--bg);
  transition:border-color .35s;
}
h1.name{font-size:1.5rem;font-weight:700;letter-spacing:-.03em;margin:0}
.handle{
  font-size:.78rem;
  color:var(--muted);
  margin-top:.1rem;
}
.location{
  color:var(--muted);
  font-size:.8rem;
  margin-top:.35rem;
}
.tagline{
  margin-top:.85rem;
  font-size:.88rem;
  color:var(--muted);
  max-width:420px;
  margin-left:auto;
  margin-right:auto;
  line-height:1.55;
}

/* ── section labels ── */
.label{
  font-size:.68rem;
  text-transform:uppercase;
  letter-spacing:.14em;
  color:var(--dim);
  margin-bottom:.6rem;
  padding-left:.15rem;
  font-weight:600;
}
.label .prefix{color:var(--muted)}
.section{margin-bottom:1.25rem}

/* ── project cards ── */
.projects{display:flex;flex-direction:column;gap:.5rem}
.project{
  display:flex;
  align-items:center;
  gap:.85rem;
  padding:.8rem 1rem;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  cursor:pointer;
}
.project:hover{
  background:var(--surface-hover);
  transform:translateY(-1px);
  box-shadow:var(--surface-shadow-hover);
}
.project:active{transform:translateY(0)}
.project-icon{
  font-size:1.25rem;
  width:42px;height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:var(--accent-bg);
  flex-shrink:0;
  transition:transform .25s;
}
.project:hover .project-icon{transform:scale(1.08)}
.project-body{flex:1;min-width:0}
.project-title{font-size:.88rem;font-weight:600}
.project-desc{font-size:.76rem;color:var(--muted);margin-top:.05rem}
.project-tag{
  font-size:.62rem;
  padding:.15rem .45rem;
  border-radius:4px;
  background:var(--tag-bg);
  color:var(--tag-text);
  font-weight:500;
  white-space:nowrap;
  flex-shrink:0;
}
.project-go{
  color:var(--dim);
  font-size:.8rem;
  opacity:0;
  transform:translateX(-4px);
  transition:all .2s;
  flex-shrink:0;
}
.project:hover .project-go{opacity:1;transform:translateX(0);color:var(--muted)}

/* ── social grid ── */
.socials{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.5rem;
}
.social{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:.3rem;
  padding:.75rem .5rem;
  border-radius:12px;
  text-decoration:none;
  color:var(--text);
  cursor:pointer;
}
.social:hover{
  background:var(--surface-hover);
  transform:translateY(-1px);
  box-shadow:var(--surface-shadow-hover);
}
.social:active{transform:translateY(0)}
.social-icon{font-size:1.2rem;transition:transform .25s}
.social:hover .social-icon{transform:scale(1.12)}
.social-name{font-size:.72rem;font-weight:500;color:var(--muted);transition:color .2s}
.social:hover .social-name{color:var(--text)}

/* ── quick actions ── */
.actions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.5rem;
  margin-bottom:1.25rem;
}
.action{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.45rem;
  padding:.7rem 1rem;
  border-radius:10px;
  text-decoration:none;
  font-weight:600;
  font-size:.82rem;
  cursor:pointer;
  transition:all .25s;
}
.action.primary{
  background:var(--text);
  color:var(--bg);
  border:1px solid transparent;
}
.action.primary:hover{opacity:.85;transform:translateY(-1px)}
.action.secondary{
  border:1px solid var(--surface-border);
  color:var(--text);
  background:var(--surface);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.action.secondary:hover{
  background:var(--surface-hover);
  transform:translateY(-1px);
  box-shadow:var(--surface-shadow-hover);
}
.action:active{transform:translateY(0)}

/* ── quote ── */
.quote{
  padding:1.25rem 1.25rem 1.25rem 1.5rem;
  border-radius:12px;
  position:relative;
  margin-top:.25rem;
}
.quote::before{
  content:"";
  position:absolute;
  left:0;top:12px;bottom:12px;
  width:2px;
  border-radius:1px;
  background:var(--dim);
  transition:background .35s;
}
.quote-text{
  color:var(--muted);
  font-size:.82rem;
  line-height:1.7;
  font-style:italic;
}

/* ── footer ── */
.footer{
  text-align:center;
  padding:2rem 0 0;
  font-size:.7rem;
  color:var(--dim);
}
.footer a{color:var(--muted);text-decoration:none}
.footer a:hover{color:var(--text)}

@media(max-width:520px){
  .container{padding:3rem 1rem 3rem}
  .profile{padding:1.75rem 1.25rem 1.5rem}
  .socials{grid-template-columns:repeat(3,1fr)}
  .actions{grid-template-columns:1fr}
  .project{padding:.75rem .85rem}
  .project-tag{display:none}
}