/*************************************************
 * 01) RESET
 *************************************************/
* { margin: 0; padding: 0; box-sizing: border-box; }

/*************************************************
 * 02) THEME TOKENS
 *************************************************/
:root{
  --bg:#0a0f1a;           /* dark navy */
  --text:#e6e6e6;         /* primary text */
  --muted:#a8a8a8;        /* secondary text */
  --accent1:#4fd1ff;      /* bright blue */
  --accent2:#6a5cff;      /* purple */
  --content-max:800px;    /* aligns nav + body */
}

/*************************************************
 * 03) GLOBAL ELEMENTS
 *************************************************/
body{
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  line-height:1.6;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  display:flex; flex-direction:column;
}
a{ color:var(--accent1); text-decoration:none; }
a:hover{ text-decoration:underline; }

/*************************************************
 * 04) HEADER & NAVIGATION
 *************************************************/
header{ background:#121318; padding:.5rem .75rem; }
.nav{
  max-width:var(--content-max);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr auto 1fr; /* left / center / right */
  align-items:center;
  column-gap:.75rem;
}
.brand{ justify-self:start; font-weight:700; color:var(--text); }
.nav-links{ justify-self:center; display:flex; gap:1.25rem; }
.nav-links a{ font-weight:600; color:var(--text); }
.nav-actions{ justify-self:end; display:flex; gap:.5rem; align-items:center; }
.btn--nav{ padding:.4rem .7rem; font-size:.9rem; border-radius:.45rem; }
.nav-actions img{
  width:22px; height:22px; display:block;
  filter:brightness(0) saturate(100%) invert(70%) sepia(90%) saturate(500%) hue-rotate(180deg);
}
@media (max-width:720px){
  .nav{ grid-template-columns:1fr; row-gap:.5rem; text-align:center; }
  .brand,.nav-links,.nav-actions{ justify-self:center; }
}

/*************************************************
 * 05) PAGE LAYOUT
 *************************************************/
main{ flex:1; max-width:var(--content-max); margin:0 auto; }
section{ margin-bottom:2.5rem; }
h2{ margin-bottom:1rem; font-size:1.5rem; }

/*************************************************
 * 06) PAGE HEADER (shared)
 *************************************************/
.page-header{
  text-align:center;
  max-width:720px;
  margin:2rem auto 1.5rem;
  background:var(--bg); /* same as body */
}
.page-title{ font-size:1.6rem; margin-bottom:.5rem; color:var(--accent1); }
.page-subtitle{ color:var(--text); font-size:1rem; }

/* Small row for tags/date under the title */
.meta-row{
  display:flex; gap:.6rem .75rem; align-items:center; justify-content:center;
  flex-wrap:wrap; margin-top:.35rem;
}
.meta-row .tag{
  font-size:.8rem; padding:.2rem .45rem; border:1px solid #26304a;
  border-radius:.45rem; color:var(--muted);
}
.meta-row .date{ color:var(--muted); font-size:.95rem; }

/*************************************************
 * 07) GENERIC SECTION WRAPPER
 *************************************************/
.section{ max-width:900px; margin:2rem auto; }

/*************************************************
 * 08) PROJECT CARDS (stacked list)
 *************************************************/
.projects-list{ display:flex; flex-direction:column; gap:1.5rem; margin-top:1rem; }

.card{
  background:#121318;
  border:1px solid #1d2437;
  border-radius:.75rem;
  overflow:hidden;
  transition:transform .15s ease, border-color .15s ease;
}
.card:hover{ transform:translateY(-2px); border-color:#2a3553; }

.card a{ color:inherit; text-decoration:none; display:block; }

.card-hero{
  display:block; width:100%; height:200px; object-fit:cover;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
}
.card-body{ padding:1rem; }
.card-title{ font-weight:700; margin-bottom:.35rem; }
.card-summary{ color:var(--muted); font-size:.95rem; }
.card-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.6rem; }
.tag{ font-size:.8rem; padding:.2rem .45rem; border:1px solid #26304a; border-radius:.45rem; color:var(--muted); }

/*************************************************
 * 09) MARKDOWN / ARTICLE PROSE
 *************************************************/
.md{
  max-width:820px; margin:0 auto; text-align:left; line-height:1.75;
}
.md p{ margin:.75rem 0; }
.md h2,.md h3,.md h4{ margin:1.2rem 0 .6rem; color:var(--accent1); font-weight:700; }
.md ul,.md ol{ margin:.4rem 0 1rem; padding-left:1.25rem; list-style-position:outside; }
.md li{ margin:.25rem 0; }
.md blockquote{
  margin:.9rem 0; padding-left:.9rem; border-left:3px solid var(--accent2); color:var(--muted);
}
.md code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#0f1522; border:1px solid #1d2437; padding:.12rem .35rem; border-radius:.35rem; font-size:.95em;
}
.md pre{
  background:#0f1522; border:1px solid #1d2437; padding:.9rem 1rem; border-radius:.6rem; overflow:auto;
}
.md pre code{ background:transparent; border:0; padding:0; font-size:.95em; }

/*************************************************
 * 10) ABOUT / RESUME
 *************************************************/
.resume{ max-width:820px; margin:0 auto; }
.resume h2{ margin:1.5rem 0 .75rem; font-size:1.2rem; color:var(--accent1); }
.resume h3{ margin:1rem 0 .5rem; font-size:1.05rem; }
.resume .when{ font-weight:normal; color:var(--muted); font-size:.95rem; margin-left:.25rem; }
.resume ul{ margin-left:1.2rem; margin-bottom:.75rem; }
.resume li{ margin:.35rem 0; list-style:disc; }

/*************************************************
 * 11) BUTTONS
 *************************************************/
.btn{
  display:inline-block; padding:.6rem 1rem; border-radius:.5rem;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  color:#fff; font-weight:600; border:none;
}
.btn:hover{ opacity:.9; }

/*************************************************
 * 12) FOOTER
 *************************************************/
footer{
  background:#121318; text-align:center; padding:1rem; font-size:.9rem; color:var(--muted);
}
.back-row {
  text-align: center;
}