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

body {
  font-family:"Google Sans Code", monospace;
  background:#000;
  color:#fff;
  line-height:1.6;
  overflow-x:hidden;
}

.cursor {
  position:fixed;
  width:15px;
  height:15px;
  background:#8400ff;
  /* border-radius:50%; */
  pointer-events:none;
  z-index:99999;
  transform:translate(-50%,-50%);
}

html, body, * { cursor:none; }

@media (pointer:coarse),(max-width:1024px) {
  .cursor { display:none; }
  html, body, * { cursor:auto; }
}

header {
  position:fixed;
  top:0; left:0; right:0;
  padding:40px;
  background:rgba(0,0,0,.8);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,.1);
  z-index:100;
  transition:.3s;
}

header.shrink { padding:15px 20px; }
header.hide { transform:translateY(-100%); }

.header-content {
  max-width:1400px;
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.logo { font-size:24px; letter-spacing:2px; font-weight:300; }

nav ul { list-style:none; display:flex; gap:40px; }
nav a { color:#fff; text-decoration:none; font-size:14px; letter-spacing:1px; }

main {
  padding-top:140px;
  max-width:1400px;
  margin:0 auto;
  padding-inline:40px;
}

.about { padding:2rem; margin-bottom:2rem; }

.about-grid {
  display:grid;
  grid-template-columns:1fr 2fr;
  gap:6rem;
}

.about-text h2 {
  font-family:"DM Serif Display", serif;
  font-size:50px;
  font-weight:300;
}

.back-link {
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
  font-size:14px;
  letter-spacing:1px;
  opacity:0.6;
  margin-top:20px;
  transition:all 0.3s ease;
}

.back-link:hover {
  opacity:1;
  color:#8400ff;
  transform:translateX(-4px);
}

.back-link svg {
  width:20px;
  height:20px;
}

.portfolio-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-auto-rows:16.666vh;
  gap:3px;
  width:100vw;
  margin-left:calc(-50vw + 50%);
}

.portfolio-item { position:relative; overflow:hidden; grid-row: span 2; }

.portfolio-item img,
.portfolio-item video {
  width:100%;
  height:100%;
  object-fit:cover;
}

.portfolio-item.medium { grid-row: span 3; }
.portfolio-item.tall { grid-row: span 4; }


footer {
  padding:80px 40px;
  text-align:center;
  border-top:1px solid rgba(255,255,255,.1);
}

footer p { opacity:.5; font-size:14px; letter-spacing:1px; }

/* ── Tablet ── */
@media (max-width:900px) {
  .portfolio-grid { grid-template-columns:repeat(2,1fr); }
}

/* ── Mobile ── */
@media (max-width:768px) {

  .header-content {
    flex-direction:column;
    align-items:center;
    gap:15px;
  }

  header.shrink .header-content { gap:8px; }

  nav ul { gap:25px; }

  header.shrink nav ul { gap:15px; }

  main { padding-inline:20px; }

 .about {
	 
	margin-bottom: 3rem;
	padding: 2rem 1rem;
	
	}

.about-grid {
  display:block;
  margin-left:-2rem;
  padding:0 10px;
}

.about-text h2 { line-height:1.1; }

.about-text { margin-bottom: 1.5rem; }

.back-link { margin-top:3rem; }

.portfolio-grid { grid-template-columns:1fr; }