/* main.css — shared styles for index.html, work.html, projects.html */

:root{
  --bg: #09080d;
  --bg-raised: #131019;
  --card: #161320;
  --card-hover: #1c1828;
  --accent: #8c75e8;
  --accent-dim: #5b4b9e;
  --accent-glow: rgba(140,117,232,0.35);
  --text: #eeeaf6;
  --text-muted: #8a8598;
  --border: #262133;
  --mono: 'JetBrains Mono', monospace;
  --display: 'Space Grotesk', sans-serif;
  --body: 'Inter', sans-serif;
}
*{box-sizing:border-box; margin:0; padding:0;}
html{scroll-behavior:smooth;}
body{
  background: var(--bg);
  color: var(--text);
  font-family: var(--body);
  min-height:100vh;
  overflow-x:hidden;
}
body::before{
  content:'';
  position:fixed; inset:0;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(140,117,232,0.10), transparent 40%),
    radial-gradient(circle at 85% 0%, rgba(140,117,232,0.06), transparent 35%);
  pointer-events:none;
  z-index:0;
}
.wrap{ max-width:1100px; margin:0 auto; padding:0 32px; position:relative; z-index:1;}

/* ---- nav ---- */
nav{
  display:flex; align-items:center; justify-content:space-between;
  padding:28px 0;
}
.logo{
  font-family:var(--mono); font-size:15px; color:var(--text);
  display:flex; align-items:center; gap:8px;
  text-decoration:none;
}
.logo .dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); box-shadow:0 0 12px var(--accent-glow); }
nav a{ color:var(--text-muted); text-decoration:none; font-size:14px; font-family:var(--mono); }
nav a:hover, nav a.active{ color:var(--accent); }
.nav-links{ display:flex; gap:28px; }

/* ---- hero with editor gutter ---- */
.hero{
  display:flex;
  padding:80px 0 60px;
  border-bottom:1px solid var(--border);
  position:relative;
}
.gutter{
  font-family:var(--mono);
  color:#3a3550;
  font-size:13px;
  padding-right:24px;
  display:flex; flex-direction:column; gap:10px;
  user-select:none;
  padding-top:6px;
  flex-shrink:0;
  border-right:1px solid var(--border);
  margin-right:32px;
}
.hero-content{ flex:1; }
.eyebrow{
  font-family:var(--mono); font-size:13px; color:var(--accent);
  display:flex; align-items:center; gap:8px; margin-bottom:20px;
}
.eyebrow::before{ content:'//'; color:#4a4460; }
.cursor{
  display:inline-block; width:9px; height:18px; background:var(--accent);
  margin-left:2px; animation: blink 1s step-end infinite;
  vertical-align:middle; box-shadow:0 0 10px var(--accent-glow);
}
@keyframes blink{ 50%{ opacity:0; } }
h1{
  font-family:var(--display);
  font-weight:700;
  font-size:clamp(38px, 5.5vw, 62px);
  line-height:1.05;
  letter-spacing:-0.02em;
  margin-bottom:22px;
}
h1 .accent{ color:var(--accent); }
.hero p{
  font-size:17px; color:var(--text-muted); max-width:520px; line-height:1.6;
  margin-bottom:32px;
}

/* ---- page header (for work.html / projects.html, no gutter) ---- */
.page-header{
  padding:64px 0 40px;
  border-bottom:1px solid var(--border);
}
.page-header .eyebrow{ margin-bottom:16px; }
.page-header h1{ font-size:clamp(32px, 4.5vw, 46px); margin-bottom:14px; }
.page-header p{ font-size:16px; color:var(--text-muted); max-width:560px; line-height:1.6; }

/* ---- section heading ---- */
.section{ padding:64px 0; }
.section-head{
  display:flex; align-items:baseline; justify-content:space-between;
  margin-bottom:32px;
}
.section-head h2{
  font-family:var(--display); font-size:26px; font-weight:600;
}
.section-head span{
  font-family:var(--mono); font-size:13px; color:var(--text-muted);
}

/* ---- category tile buttons ---- */
.tiles{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
  gap:16px;
}
.tile{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:28px 24px;
  text-decoration:none;
  color:var(--text);
  position:relative;
  overflow:hidden;
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
  display:flex; flex-direction:column; gap:36px;
  min-height:150px;
}
.tile::after{
  content:'';
  position:absolute; inset:0;
  background:radial-gradient(160px circle at var(--mx,50%) var(--my,50%), var(--accent-glow), transparent 70%);
  opacity:0; transition:opacity .25s ease; pointer-events:none;
}
.tile:hover{ border-color:var(--accent-dim); background:var(--card-hover); transform:translateY(-3px); }
.tile:hover::after{ opacity:1; }
.tile-top{ display:flex; justify-content:space-between; align-items:flex-start; }
.tile-icon{
  font-family:var(--mono); font-size:12px; color:var(--accent);
  background:rgba(140,117,232,0.1); border:1px solid var(--accent-dim);
  padding:4px 8px; border-radius:6px;
}
.tile-arrow{ color:var(--text-muted); transition:transform .2s ease, color .2s ease; display:flex; }
.tile-arrow svg{ width:16px; height:16px; }
.tile:hover .tile-arrow{ transform:translate(3px,-3px); color:var(--accent); }
.tile-name{ font-family:var(--display); font-size:20px; font-weight:600; }
.tile-desc{ font-family:var(--mono); font-size:12px; color:var(--text-muted); margin-top:4px; }

/* ---- project cards ---- */
.projects{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
  gap:20px;
}
.project-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  transition:border-color .2s ease, transform .2s ease;
}
.project-card:hover{ border-color:var(--accent-dim); transform:translateY(-3px); }
.project-thumb{
  height:120px;
  background-size:cover;
  background-position:center;
  background-color:#1a1626;
  border-bottom:1px solid var(--border);
  position:relative;
}
.project-thumb.no-image{
  background-image:
    linear-gradient(135deg, rgba(140,117,232,0.15), transparent 60%),
    repeating-linear-gradient(90deg, #1a1626 0px, #1a1626 1px, transparent 1px, transparent 24px);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); color:#3a3550; font-size:12px;
}
.project-body{ padding:20px; }
.project-tag{
  font-family:var(--mono); font-size:11px; color:var(--accent);
  background:rgba(140,117,232,0.1); display:inline-block;
  padding:3px 8px; border-radius:5px; margin-bottom:10px;
}
.project-body h3{ font-family:var(--display); font-size:17px; margin-bottom:6px; }
.project-body p{ font-size:13px; color:var(--text-muted); line-height:1.5; }

footer{
  border-top:1px solid var(--border);
  padding:32px 0 48px;
  display:flex; justify-content:space-between; align-items:center;
  font-family:var(--mono); font-size:12px; color:var(--text-muted);
}
footer a{ color:var(--text-muted); text-decoration:none; }
footer a:hover{ color:var(--accent); }

@media (max-width:640px){
  .gutter{ display:none; }
  nav .nav-links{ gap:16px; }
}