:root{
  --bg: #ffffff;
  --card: #ffffff;
  --muted: #6b7280; /* gray-500 */
  --accent: #0b84ff; /* bright blue */
  --text: #111827; /* gray-900 */
  --border: #e6eef6;
  --max-width: 900px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
}

/* link styling */
a{color:var(--accent);text-decoration:none;transition:opacity 0.15s ease}
a:hover{opacity:0.85}

.container{max-width:var(--max-width);margin:0 auto;padding:28px}
.site-header{margin-top:100px;text-align:center}
.name{margin:0;font-size:2.25rem}
.tagline{color:var(--muted);margin:8px 0 12px}
.nav{margin-top:12px}
.nav a{color:var(--accent);margin:0 12px;text-decoration:none;font-weight:600}

.card{background:var(--card);padding:30px;border-radius:10px;margin-bottom:18px;border:1px solid var(--border);box-shadow:0 1px 2px rgba(16,24,40,0.03)}
.projects{list-style:none;padding-left:0;margin:0}
.projects li{padding:12px 0;border-bottom:1px solid #f1f5f9}
.projects li:last-child{border-bottom:none}
.muted{color:var(--muted);margin:6px 0}
.site-footer{padding:20px 0;text-align:center;color:var(--muted);font-size:0.9rem}

.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.project{padding:18px;border-radius:12px;border:1px solid #f1f5f9;background:#fff}
.project h3{margin:0 0 9px 0;font-size:1.575rem}
.project .small{font-size:0.9rem}

@media (min-width:900px){
  .nav{display:inline-block}
}



/* Project list with inline icon */
.project-list{display:flex;flex-direction:column;gap:18px;margin-top:18px}
.project-link{text-decoration:none;color:inherit;display:block;transition:transform 0.2s ease, box-shadow 0.2s ease}
.project-link:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(16,24,40,0.1)}
.project-link:hover .project-item{border-color:var(--accent)}
.project-item{display:flex;align-items:center;gap:21px;padding:21px;border-radius:12px;border:1px solid #f1f5f9;background:#fff;transition:border-color 0.2s ease}
.project-item h3{margin:0}
.project-icon-inline{width:150px;height:150px;object-fit:contain;border-radius:12px}
.project-meta{flex:1}
@media (max-width:700px){
  .project-item{flex-direction:row;align-items:center}
  .project-icon-inline{width:72px;height:72px}
}

/* Project page banner */
.project-banner img{width:100%;height:auto;border-radius:8px}

/* Back link positioning in project headers */
.site-header .container{position:relative}
.back-link{position:absolute;left:0;top:50%;transform:translateY(-50%);color:var(--text);text-decoration:none;padding:6px 8px;border-radius:6px;font-weight:600}
.back-link:hover{opacity:0.85}