:root{
  --text: #000000;
  --muted: #5d626d;
  --link: #0d2cf0;
  --border: rgb(150, 149, 149);
  --maxw: 680px;
}

*{ box-sizing: border-box; }
html,body{ 
  height:100%; 
  background-color: #ffffff;
}

body{
  margin:0;
  color:var(--text);
  font:16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* top nav */

.nav{
  max-width:var(--maxw);
  margin:0 auto;
  padding:14px 20px;
  display:flex;
  justify-content:flex-end;
  gap:25px;
  border-bottom:1px solid var(--border);
}
.nav-link{
  color:var(--text);
  font-size:14px;
  text-decoration:none;
  opacity:.85;
}

/* page container */
.container{
  max-width:var(--maxw);
  margin:0 auto;
  padding:40px 20px 72px;
}

/* title */
.title{
  font-size:34px;
  font-weight:700;
  letter-spacing:.2px;
  margin:6px 0 24px;
}

/* identity row */
.id-row{
  list-style:none;
  padding:0;
  margin:0 0 18px 0;
  display:flex;
  flex-wrap:wrap;
  gap:14px 22px;
}
.id-item{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:var(--muted);
  font-size:14px;
}
.icon{
  display:inline-flex;
  width:16px;
  height:16px;
  color:var(--muted);
}
.id-link{
  color:var(--text);
  text-decoration:none;
}
.id-link:hover{ 
  text-decoration:underline; 
}

/* paragraphs & links */
p{ 
  margin:14px 0;
}

.bio-link{
  color:var(--text); 
  text-decoration:underline; 
  text-underline-offset: 4px;
}

.project-link{
  color:var(--text); 
  text-decoration: none;
}

/* footer */
.footer{
  
  margin-top:40px;
  padding-top:18px;
  text-align:center;
  color:var(--muted);
}

/* responsive niceties */
@media (max-width:480px){
  .title{ font-size:28px; }
  .nav{ gap:16px; padding:12px 16px; }
}

/* timeline */
.timeline{ margin-top:18px; }

.timeline h2{ color:var(--text); font-weight:600; margin:0 0 12px; }

.timeline-list{
  list-style:none;
  margin:0;
  padding:0 0 0 24px;
  position:relative;
}
.timeline-list::before{
  content:"";
  position:absolute;
  left:10px;
  top:10px;
  bottom:-10px;
  width:1px;
  background:var(--border);
}
.timeline-item{
  position:relative;
  padding:12px 0 12px 0;
}
.timeline-item::before{
    content: "";
    position: absolute;
    left: -15px;
    top: 10px;
    width: 3px;
    height: 36px;
    background: #000;
    border-radius: 1px;
}
.timeline-date{
  display:block;
  color:var(--muted);
  font-size:15px;
  margin-bottom:2px;
}
.timeline-link{ 
  color:var(--text);
  font-size:20px;
  font-weight:600;
}

.archieve-p{
  color: var(--muted);
}

.archieve-link{
  color: var(--text);
}

/* gallery masonry (VSCO/Pinterest-like) */
.gallery{
  column-count:3;            /* at least 3 per row */
  column-gap:12px;
}

/* Scale up to 4 and then 5 per row on wider screens */
@media (min-width:560px){
  .gallery{ column-count:4; }
}
@media (min-width:640px){
  .gallery{ column-count:6; }
}

.gallery-item{
  display:block;
  break-inside:avoid;        /* prevent splitting items across columns */
  margin:0 0 12px;
  border-radius:10px;
  overflow:hidden;
  background:#111;           /* subtle placeholder while loading */
}

.gallery-item img{
  display:block;
  width:100%;                /* no fixed width/height; keep natural ratio */
  height:auto;
}