/* Shared styles — layout pattern from Start Bootstrap "Resume" theme (MIT). */
:root {
  --bg: #0e1116;
  --bg-panel: #151a21;
  --bg-card: #1a2029;
  --line: #262d38;
  --ink: #d7dde6;
  --ink-dim: #8b95a3;
  --accent: #7ee787;
  --accent-dim: #3fb950;
  --mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
body {
  background: var(--bg);
  color: var(--ink);
}

/* ---------- Sidebar / navbar ---------- */
#sideNav {
  background: var(--bg-panel);
  border-bottom: 1px solid var(--line);
}
#sideNav .navbar-brand {
  font-family: var(--mono);
  color: var(--accent);
  font-size: 1rem;
}
#sideNav .brand-sub { font-size: .78rem; color: var(--ink-dim); }
#sideNav .brand-sub a { color: var(--accent-dim); text-decoration: none; }
#sideNav .nav-link {
  color: var(--ink-dim);
  border-left: 2px solid transparent;
  border-radius: 0 6px 6px 0;
  padding: .35rem .75rem;
}
#sideNav .nav-link:hover { color: var(--ink); background: var(--bg-card); }
#sideNav .nav-link.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: var(--bg-card);
}
@media (min-width: 992px) {
  #sideNav {
    position: fixed;
    top: 0; left: 0;
    height: 100vh;
    width: 16.5rem;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 2.2rem 1.4rem;
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  #sideNav .navbar-collapse { width: 100%; }
  #sideNav .navbar-nav { flex-direction: column; width: 100%; margin-top: 1.6rem; }
  main, footer { margin-left: 16.5rem; }
}
@media (max-width: 991.98px) {
  body { padding-top: 3.6rem; }
}

/* ---------- Content ---------- */
main { max-width: 860px; padding: 3rem 2rem 4rem; }
@media (min-width: 992px) { main { padding: 3rem 3.5rem 4rem; } }
h1 { font-size: 2.1rem; }
h1 .cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
h2 {
  font-family: var(--mono);
  font-size: 1.25rem;
  color: var(--accent);
  margin-bottom: 1rem;
}
h2::before { content: "// "; color: var(--ink-dim); }
a { color: var(--accent-dim); }
.tagline {
  font-family: var(--mono);
  color: var(--ink-dim);
  font-size: .95rem;
  margin-bottom: 1.4rem;
}
.tagline b { color: #e3b341; font-weight: 600; }
.dim { color: var(--ink-dim); }

ul.clean { list-style: none; padding-left: 0; }
ul.clean li { padding-left: 1.3rem; position: relative; margin-bottom: .55rem; }
ul.clean li::before { content: "▸"; position: absolute; left: 0; color: var(--accent-dim); }

.timeline { list-style: none; margin: .6rem 0 1.2rem; padding-left: 0; }
.timeline li {
  position: relative;
  padding: 0 0 1.1rem 1.6rem;
  border-left: 2px solid var(--line);
  margin-left: .4rem;
}
.timeline li:last-child { padding-bottom: .2rem; }
.timeline li::before {
  content: "";
  position: absolute;
  left: -6px; top: .42em;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--bg);
  border: 2px solid var(--accent-dim);
}
.timeline li.current::before { background: var(--accent); border-color: var(--accent); }
.timeline .role { font-weight: 600; }
.timeline .org { color: var(--accent); font-family: var(--mono); font-size: .85rem; }
.timeline .desc { color: var(--ink-dim); font-size: .9rem; }

footer {
  padding: 1.4rem 2rem 2.2rem;
  max-width: 860px;
  border-top: 1px solid var(--line);
  color: var(--ink-dim);
  font-size: .84rem;
}
@media (min-width: 992px) { footer { padding: 1.4rem 3.5rem 2.2rem; } }