/* Base */
:root{
  --ink:#0a0a0a; --ink-2:#222; --muted:#666; --line:#e8e8e8;
  --card:#fff; --bg:#fff;
  --pink:#ffbbea;           /* small pink accent */
  --black:#000001;          /* brand black */
}
html,body{
  background:var(--bg);
  color:var(--ink-2);
  font-family:Arial,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue","Noto Sans",sans-serif;
}
a{color:#0072b1;text-decoration:none;transition:color .2s ease}
a:hover{color:#C0737A;text-decoration:underline}

/* Hero: black background, pink title */
.proj-hero{
  background: var(--black);
  color: #fff;
  padding: 3rem 0 2rem;
  text-align: center;
}
.page-title{
  font-family: 'Antonio', sans-serif;
  font-size: 3.5rem;
  margin-bottom: 0.25rem;
  color: var(--pink);
}
.page-subtitle{
    font-family: 'TT Bricks Trial', sans-serif;
    font-style: italic;
    margin-bottom: 1.5rem;
    font-size: 1.2rem;
}

/* Small spacing between rows */
.row-gap > .cell{ margin-bottom:1rem; }

/* Cards */
.project-card{
  border:1px solid var(--line); border-radius:14px; overflow:hidden;
  background:var(--card); box-shadow:0 10px 26px rgba(0,0,0,.06);
  height:100%; display:flex; flex-direction:column;
}
.project-media{
  background:#fafafa; border-bottom:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; min-height:150px;
}
.project-media img{
  max-width:100%; height:auto; max-height:180px; object-fit:cover; padding:1rem;
}
.card-section{display:flex;flex-direction:column;gap:.4rem}
.project-title{font-size:1.15rem;margin:0;font-weight:800;color:#111}
.project-meta{margin:0;color:var(--muted);font-size:.92rem}

/* Objective / How/What lines with small pink accent label */
.project-line{margin:.1rem 0 .15rem; line-height:1.35; color:#333;}
.project-line .label{
  display:inline-block; font-weight:700; letter-spacing:.2px; margin-right:.35rem;
  padding:.05rem .35rem; border-radius:6px;
  background:rgba(255,111,183,.12); color:#111; border:1px solid rgba(255,111,183,.35);
}

/* Tech tags at bottom — clean chips, no bullets/dots */
.tech-tags{
  list-style:none; display:flex; flex-wrap:wrap; gap:.35rem; margin:.35rem 0 0; padding:0;
}
.tech-tags li{
  font-size:.8rem; background:#f2f2f2; border:1px solid #e7e7e7;
  border-radius:999px; padding:.25rem .55rem;
}

/* Footer with LinkedIn + Email */
.site-footer{
  border-top:1px solid var(--line); padding:1.5rem 0 2rem; margin-top:1rem; text-align:center;
}
.footer-line{margin:0 0 .75rem; font-weight:700}
.footer-cta{display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap}
.footer-btn{
  background:var(--pink); color:#111; border:none; font-weight:700; display:inline-flex; align-items:center; gap:.4rem;
}
.footer-btn .icon{display:inline-block}
.footer-btn:hover{background:#ff5aa9; color:#111}
.footer-btn.hollow{
  background:#fff; color:#111; border:1px solid #333; display:inline-flex; align-items:center; gap:.4rem;
}
.footer-btn.hollow:hover{background:#f9f9f9}

/* Minor cleanups */
h1.name{font-family:'Antonio',sans-serif;font-weight:700}
