@import url("https://fonts.googleapis.com/css2?family=Share+Tech&family=Bitcount&display=swap");

:root {
  --bg:      #0a0906;
  --ink:     #ede8df;
  --muted:   rgba(237,232,223,0.62);
  --faint:   rgba(237,232,223,0.09);
  --warm:    #c8b99a;
  --mono:    'Courier New', monospace;
  --sans:    'Share Tech', sans-serif;
  --display: 'Bitcount', sans-serif;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.018) 2px, rgba(0,0,0,0.018) 3px);
  pointer-events: none;
  z-index: 9999;
}

/* HERO */
#hero {
  width: 100vw; height: 100vh;
  display: grid;
  grid-template-columns: 52% 48%;
  position: relative;
  overflow: hidden;
}
#portrait-col {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
#portrait-wrap {
  position: relative;
  will-change: transform;
  width: 100%;
  height: 100%;
}
#portrait-wrap canvas {
  display: block;
  width: 100%;
  height: 100%;
}

#info-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 64px 72px 72px 56px;
  height: 100%;
}
.info-top {
  display: flex;
  flex-direction: column;
  margin-bottom: auto;
  padding-top: 0;
}

/* Work intro */
#work-intro { padding-top: 48px; }
#work-intro h2 {
  font-family: var(--display);
  font-size: clamp(14px, 1.4vw, 18px);
  font-weight: 300;
  color: var(--muted);
  letter-spacing: 0.01em;
}

/* NAME */
#name {
  font-family: var(--display);
  font-size: clamp(52px, 5.5vw, 80px);
  font-weight: 200;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 28px;
}
#name .last {
  font-weight: 200;
  color: var(--warm);
  display: block;
}

.h-rule { width: 40px; height: 1px; background: var(--faint); margin-bottom: 24px; }

#descriptor {
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.85;
  color: var(--muted);
  max-width: 380px;
  margin-bottom: 32px;
}
#descriptor em { font-style: normal; color: var(--ink); font-weight: 400; }

#hero-links { display: flex; flex-direction: column; gap: 14px; }
#hero-links a {
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); text-decoration: none;
  display: flex; align-items: center; gap: 12px;
  transition: color 0.2s; width: fit-content;
}
#hero-links a::before {
  content: ""; width: 20px; height: 1px;
  background: currentColor; transition: width 0.3s; flex-shrink: 0;
}
#hero-links a:hover { color: var(--ink); }
#hero-links a:hover::before { width: 36px; }

/* PROJECT SECTIONS */
.project-section {
  width: 100vw; min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  position: relative;
  overflow: hidden;
}
.project-section.visual-left {
  grid-template-columns: 1fr 1fr;
}
.project-visual {
  position: relative;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.ascii-wrap { position: relative; will-change: transform; }
.particle-canvas { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
#ufo-canvas { display: block; }

.project-info {
  display: flex; flex-direction: column;
  padding: 0 72px;
}
.project-info.text-left { padding-left: 200px; padding-right: 56px; }
.project-info.text-right { padding-left: 96px; padding-right: 96px; }

.project-title {
  font-family: var(--display);
  font-size: clamp(36px, 4.5vw, 64px);
  font-weight: 200;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 20px;
}
.project-title em {
  font-style: normal;
  font-weight: 300;
  color: var(--warm);
}

.project-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.project-tag {
  font-size: 8px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted); border: 1px solid var(--faint); padding: 5px 12px;
}

.project-desc {
  font-size: clamp(13px, 1.15vw, 15px);
  line-height: 1.85; color: var(--muted);
  max-width: 400px; margin-bottom: 36px;
}

.project-link {
  font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 14px;
  width: fit-content; transition: gap 0.3s;
}
.project-link::after {
  content: ""; width: 28px; height: 1px;
  background: var(--ink); transition: width 0.3s;
}
.project-link:hover { gap: 20px; }
.project-link:hover::after { width: 44px; }