/* Minimal modern styles + dark mode */
:root{
  --bg: #ffffff; --ink:#0f172a; --muted:#475569;
  --card:#ffffff; --line:#e5e7eb; --brand:#5B6CFF;
}
html.dark{
  --bg:#0b1220; --ink:#e5e7eb; --muted:#94a3b8;
  --card:#0f172a; --line:#1f2937; --brand:#8ea1ff;
}

*{box-sizing:border-box}
body{margin:0; background:var(--bg); color:var(--muted); font:16px/1.6 Inter,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;}
h1,h2,h3{color:var(--ink); font-family:Poppins,Inter,sans-serif; margin:.2rem 0 1rem}
.wrap{max-width:1100px; margin:0 auto; padding:24px}
.section{margin:48px 0}
.two-col{display:grid; grid-template-columns:1.2fr .8fr; gap:24px}
.headshot{width:100%; border-radius:16px}

.site-header{display:flex; align-items:center; justify-content:space-between; padding:14px 24px; border-bottom:1px solid var(--line); position:sticky; top:0; background:var(--bg); z-index:10}
.logo{font-weight:800; color:var(--ink); text-decoration:none; letter-spacing:.5px}
nav .nav-link{margin:0 10px; text-decoration:none; color:var(--muted)}
nav .nav-link:hover{color:var(--ink)}
nav .nav-link.active{ color: var(--brand); font-weight:600; }
#themeToggle{border:1px solid var(--line); background:var(--card); border-radius:10px; padding:6px 10px; cursor:pointer}

.hero h1{font-size:2rem}
.actions .button{margin-right:8px}

.button{display:inline-block; padding:10px 14px; border:1px solid var(--line); border-radius:12px; text-decoration:none; color:var(--ink); background:var(--card)}
.button.primary{background:var(--brand); color:#fff; border-color:var(--brand)}
.button.small{padding:6px 10px; font-size:.9rem}
.buttons .button{margin-right:10px}

.grid{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{border:1px solid var(--line); background:var(--card); border-radius:16px; overflow:hidden; transition:transform .15s, box-shadow .15s}
.card:hover{transform:translateY(-3px); box-shadow:0 10px 25px rgba(0,0,0,.08)}
.card img{width:100%; height:180px; object-fit:cover}
.card-body{padding:14px}
.tags .tag{display:inline-block; border:1px solid var(--line); border-radius:999px; padding:3px 10px; margin:4px 6px 0 0; font-size:.8rem; color:var(--ink)}
.card-actions .button{margin-right:6px}

.filters{margin-bottom:18px}
.pill-list{display:flex; flex-wrap:wrap; gap:8px; padding:0; list-style:none}
.pill-list li{border:1px solid var(--line); border-radius:999px; padding:6px 10px}
.timeline{padding-left:18px}
.hero-img{width:100%; border-radius:16px}
.lede{font-size:1.1rem; color:var(--ink)}
@media (max-width:900px){ .two-col{grid-template-columns:1fr} }


/* Small side-by-side thumbnails (override) */
.thumbs,
.thumbs.small {                 /* applies to both .thumbs and .thumbs small */
  display: flex;
  flex-wrap: wrap;
  gap: 8px;                     /* space between thumbnails */
  margin-top: 8px;
  justify-content: flex-start;
}

.thumbs img,
.thumbs.small img {
  width: 90px;                  /* make them small squares */
  height: 90px;
  object-fit: cover;            /* neat crop */
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #fff;
  transition: transform .15s ease;
}

.thumbs a:hover img { transform: translateY(-2px); }

/* Even smaller option: add class 'tiny' to your thumbs container */
.thumbs.tiny img { width: 72px; height: 72px; }

/* Force exactly 2 per row (optional): add class 'two' to the container */
.thumbs.two { display: grid; grid-template-columns: repeat(2, auto); gap: 8px; }
.thumbs.two img { width: 100px; height: 100px; }  /* tweak size if needed */




/* Typewriter cursor */
.type-cursor {
  display:inline-block;
  margin-left:2px;
  font-weight:600;
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .type-cursor { display:none; }
}

/* Certifications: responsive card grid */
#certifications { scroll-margin-top: 80px; }

.cert-grid {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;                        /* mobile: 1 per row */
}

@media (min-width: 720px) {
  .cert-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }  /* 2 per row */
}

@media (min-width: 1100px) {
  .cert-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }  /* 3 per row on wide screens */
}

.cert-card {
  border: 1px solid var(--line);
  background: var(--card);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cert-title { margin: 0; color: var(--ink); }
.cert-meta  { font-size: .9rem; opacity: .85; }
.cert-actions .button.small { margin-right: 6px; }