:root{
  --bg:#fafafa;
  --panel:#ffffff;
  --text:#1c1c1e;
  --muted:#6b6b6f;
  --border:#e4e4e6;
  --accent:#2b6cb0;
  --sidebar-w:220px;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
}

/* Layout */
.layout{display:flex;min-height:100vh;}

/* Sidebar */
.sidebar{
  width:var(--sidebar-w);
  flex-shrink:0;
  background:var(--panel);
  border-right:1px solid var(--border);
  padding:24px 16px;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.sidebar h1{
  font-size:17px;
  margin:0 0 24px 4px;
  letter-spacing:.2px;
}
.sidebar nav ul{list-style:none;margin:0;padding:0;}
.sidebar nav li{margin-bottom:2px;}
.sidebar nav a{
  display:block;
  padding:10px 12px;
  border-radius:8px;
  color:var(--text);
  text-decoration:none;
  font-size:14.5px;
}
.sidebar nav a:hover{background:var(--bg);}
.sidebar nav a.active{background:#eef3f9;color:var(--accent);font-weight:600;}

/* Mobile nav toggle */
.nav-toggle{
  display:none;
  position:fixed;
  top:14px;
  left:14px;
  z-index:50;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  width:40px;height:40px;
  align-items:center;justify-content:center;
  font-size:18px;
  cursor:pointer;
}

/* Main content */
.content{
  flex:1;
  min-width:0;
  padding:40px 48px 80px;
  max-width:1100px;
}
.content h2{font-size:26px;margin:0 0 6px;}
.page-intro{color:var(--muted);margin:0 0 28px;font-size:15px;max-width:65ch;}

/* Home / bio */
.bio-card{
  display:flex;
  gap:28px;
  align-items:flex-start;
  flex-wrap:wrap;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:12px;
  padding:28px;
}
.selfie{
  width:160px;
  height:160px;
  border-radius:12px;
  object-fit:cover;
  background:var(--bg);
  border:1px solid var(--border);
  flex-shrink:0;
}
.bio-text{flex:1;min-width:220px;color:var(--text);}
.bio-placeholder{color:var(--muted);font-style:italic;}

.section-links{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-top:32px;}
.section-links a{
  display:block;
  padding:18px;
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  font-weight:600;
  font-size:15px;
}
.section-links a:hover{border-color:var(--accent);color:var(--accent);}

/* Gallery grid: two columns = half viewport width each */
.gallery{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px;
}
.gallery figure{margin:0;position:relative;overflow:hidden;background:#eee;aspect-ratio:3/4;}
.gallery img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  cursor:zoom-in;
  transition:opacity .2s ease;
}
.gallery img[loading]{background:#eee;}
.empty-note{
  border:1px dashed var(--border);
  border-radius:10px;
  padding:24px;
  color:var(--muted);
  font-size:14px;
}
code{background:#f1f1f2;padding:1px 5px;border-radius:4px;font-size:13px;}

/* Lightbox */
.lightbox{
  position:fixed;inset:0;
  background:rgba(0,0,0,.92);
  display:none;
  align-items:center;justify-content:center;
  z-index:100;
  padding:20px;
}
.lightbox.open{display:flex;}
.lightbox img{max-width:100%;max-height:100%;object-fit:contain;}
.lightbox-close,.lightbox-prev,.lightbox-next{
  position:absolute;
  background:rgba(255,255,255,.1);
  color:#fff;border:none;
  width:44px;height:44px;
  border-radius:50%;
  font-size:20px;
  cursor:pointer;
}
.lightbox-close{top:16px;right:16px;}
.lightbox-prev{left:16px;top:50%;transform:translateY(-50%);}
.lightbox-next{right:16px;top:50%;transform:translateY(-50%);}
.lightbox-close:hover,.lightbox-prev:hover,.lightbox-next:hover{background:rgba(255,255,255,.25);}

/* Mobile */
@media (max-width:820px){
  .sidebar{
    position:fixed;
    left:0;top:0;
    transform:translateX(-100%);
    transition:transform .2s ease;
    z-index:40;
    width:240px;
    box-shadow:2px 0 12px rgba(0,0,0,.1);
  }
  .sidebar.open{transform:translateX(0);}
  .nav-toggle{display:flex;}
  .content{padding:80px 20px 60px;}
  .gallery{grid-template-columns:1fr;}
  .bio-card{padding:20px;}
}