:root {
  --port-accent: #1e3a8a; /* deep blue accent */
  --port-accent-2: #0ea5e9; /* cyan accent */
  --port-text: #1f2937;
  --port-muted: #6b7280;
  --port-shadow: 0 10px 30px rgba(0,0,0,.12);
}


/* Project titles (###) */
article#page h3 {
  color: var(--port-text);
  margin: .25rem 0 .4rem;
  font-weight: 700;
}
article#page h3::before {
  content: '▎';
  color: var(--port-accent-2);
  margin-right: .4rem;
}

/* Optional badges you can drop under titles */
article#page .badge {
  display: inline-block;
  font-size: .75rem;
  color: #0b4a6f;
  background: rgba(14,165,233,.12);
  border: 1px solid rgba(14,165,233,.35);
  border-radius: 999px;
  padding: .15rem .5rem;
  margin: .25rem .25rem .5rem 0;
}


/* Image links: lift + glow on hover, rounded corners */
article#page a > img {
  border-radius: 10px;
  box-shadow: var(--port-shadow);
  transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
article#page a:hover > img {
  transform: translateY(-2px);
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  filter: saturate(1.05) contrast(1.02);
}

/* Better alignment for Octopress img floats */
article#page img.left { margin: 0 .75rem .5rem 0; }
article#page img.right { margin: 0 0 .5rem .75rem; }