:root {
  --bg: #0b0c10; --card:#14151a; --text:#e6e6e6; --muted:#a7adba;
  --brand:#6ee7b7; --brand-ghost:#2a2f36; --ring: #3dd6a0;
}
* { box-sizing: border-box; }
html,body { margin:0; padding:0; background:var(--bg); color:var(--text); font:16px/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* NAV */
.nav { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:16px 24px; position:sticky; top:0; background:rgba(11,12,16,0.8); backdrop-filter: blur(8px); border-bottom:1px solid #1f232b; }
.nav .brand { font-weight:700; letter-spacing:.3px; }
.nav nav a { margin-left:16px; }

/* HERO */
.hero { max-width:1100px; margin:56px auto 12px; padding:0 24px; text-align:center; }
.hero h1 { font-size: clamp(28px, 5vw, 48px); margin: 0 0 6px; }
.tagline { color: var(--muted); margin:0 0 20px; }
.cta { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.btn { display:inline-block; padding:12px 18px; border-radius:12px; background:var(--brand); color:#0b0c10; font-weight:700; border:2px solid var(--brand); }
.btn.ghost { background:var(--brand-ghost); color:var(--text); border-color:var(--ring); }
.btn:hover { filter: brightness(1.02); text-decoration:none; }

/* HIGHLIGHTS */
.highlights { max-width:1100px; margin:36px auto 64px; padding:0 24px; display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card { background:var(--card); border:1px solid #232733; border-radius:16px; padding:16px; }
.card .ph { width:100%; height:140px; background:#1e222b; border-radius:12px; margin-bottom:12px; }
.card h3 { margin:2px 0 8px; }
.card p { margin:0 0 10px; color:var(--muted); }
.card .link { font-weight:600; }

/* INTRO */
.intro {
  font-size: 1.25rem; /* ~20px */
  margin: 12px 0;
}

/* PROJECT CARDS */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.project-card .project-hero {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 0.5rem;
}

.project-card .date {
  font-size: 0.85rem;
  color: var(--muted);
}

.project-card .tags {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.project-card .tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--brand-ghost);
  font-size: 0.75rem;
  color: var(--muted);
}

.project-card .links {
  margin-top: auto;
  font-size: 0.9rem;
}

.project-card .status {
  font-size: 0.8rem;
  color: var(--muted);
}

/* FOOTER */
.footer { border-top:1px solid #1f232b; padding:18px 24px; text-align:center; color:var(--muted); }