/* ── Developer Page Styles ── */
html { scroll-behavior: smooth; }

body {
  background: #0d0d0f;
  color: #c8c4be;
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.7;
  opacity: 0;
  min-height: 100vh;
}
body.loaded { opacity: 1; transition: opacity 300ms ease; }

/* ── Header ── */
header {
  position: fixed; top: 0; left: 0; right: 0;
  padding: 24px 40px;
  display: flex; align-items: center; gap: 12px;
  z-index: 10;
  background: linear-gradient(to bottom, #0d0d0f 60%, transparent);
}
.back {
  font-size: 20px; font-weight: 100;
  color: #4a4845; text-decoration: none;
  transition: color 150ms;
}
.back:hover { color: #c8c4be; }
.sep { color: #2a2825; font-size: 11px; }
.logo {
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal; font-weight: 200;
  font-size: 14px; color: #adaba6;
}

/* ── Main ── */
main {
  max-width: 680px;
  margin: 0 auto;
  padding: 100px 40px 120px;
}

/* ── Comment labels ── */
.comment {
  font-size: 13px; font-weight: 300;
  color: #3d3b38; letter-spacing: 0.04em;
  margin-bottom: 20px;
  display: flex; align-items: center; gap: 8px;
}
.comment::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #1e1c1a;
}

section { margin-bottom: 64px; }

/* ── Academic ── */
.edu-item { margin-bottom: 20px; }
.edu-degree {
  font-size: 13px; font-weight: 400; color: #e8e3da;
  margin-bottom: 2px;
}
.edu-school { font-size: 12px; color: #6b6560; }
.edu-year { font-size: 11px; color: #3d3b38; margin-top: 1px; }

/* ── Experience timeline ── */
.timeline { border-left: 1px solid #1e1c1a; padding-left: 20px; }
.timeline-item { margin-bottom: 28px; position: relative; }
.timeline-item::before {
  content: '';
  position: absolute; left: -24px; top: 6px;
  width: 5px; height: 5px; border-radius: 50%;
  background: #2a2825; border: 1px solid #3d3b38;
}
.timeline-item:first-child::before,
.timeline-item:nth-child(2)::before { background: #5a7a5a; border-color: #5a7a5a; }

.job-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 4px; }
.job-title { font-size: 13px; font-weight: 400; color: #e8e3da; }
.job-date  { font-size: 11px; color: #3d3b38; letter-spacing: 0.04em; flex-shrink: 0; margin-left: 12px; }
.job-company { font-size: 12px; color: #5a7a5a; margin-bottom: 6px; }
.job-desc { font-size: 12px; color: #6b6560; line-height: 1.65; }
.social-iconrow {font-size: 25px;}
.social-iconrow ul {display: flex; align-items: center;}
.social-iconrow ul li {list-style-type: none; margin-right: 20px;}
.social-iconrow ul li a {color: #6b6560}
.social-iconrow ul li a:hover {color: #5a7a5a;}

/* ── Stack ── */
.stack-groups { display: flex; flex-direction: column; gap: 16px; }
.stack-group-label {
  font-size: 13px; color: #3d3b38; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 8px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; font-weight: 300; letter-spacing: 0.04em;
  padding: 3px 10px;
  background: #161614; color: #8a8680;
  border: 1px solid #242220;
  cursor: default; transition: color 150ms, border-color 150ms;
}
.chip:hover { color: #c8c4be; border-color: #3d3b38; }
.chip.hot { border-color: #2a3a2a; color: #5a8a5a; }
.chip.hot:hover { color: #7ab07a; border-color: #3a5a3a; }
.chip.lang { border-color: #2a2a3a; color: #6a6a9a; }
.chip.lang:hover { color: #8a8aba; border-color: #3a3a5a; }

/* ── Currently ── */
.reading-item {
  display: flex; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid #161614;
  font-size: 13px; color: #6b6560;
}
.reading-item .r-title { color: #9a9590; }
.reading-item .r-author { font-size: 12px; color: #3d3b38; }

/* ── Bookmarks ── */
.bookmark-list { display: flex; flex-direction: column; gap: 1px; }
.bookmark {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 0; border-bottom: 1px solid #161614;
  text-decoration: none; color: #6b6560;
  font-size: 13px; transition: color 150ms;
}
.bookmark:first-child { border-top: 1px solid #161614; }
.bookmark .b-arrow { font-size: 12px; color: #2a2825; transition: transform 150ms, color 150ms; }
.bookmark:hover { color: #c8c4be; }
.bookmark:hover .b-arrow { transform: translateX(3px); color: #c8c4be; }
.bookmark .b-tag {
  margin-left: auto; font-size: 11px; color: #2a2825; letter-spacing: 0.08em;
}

/* cursor blink */
.cursor { display: inline-block; width: 7px; height: 13px; background: #3d3b38; animation: blink 1.2s step-end infinite; vertical-align: middle; margin-left: 2px; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }

/* highlight colors */
.hl-green { color: #5a8a5a; }
.hl-blue  { color: #5a6a8a; }
.hl-amber { color: #8a7a4a; }
.hl-muted { color: #4a4845; }