/* =============================================================================
   DESIGN TOKENS — GitHub Dark palette
   ============================================================================= */
:root {
  /* Backgrounds */
  --bg:          #0d1117;
  --bg2:         #161b22;
  --bg3:         #21262d;
  --bg4:         #30363d;

  /* Borders */
  --border:      #30363d;
  --border2:     #484f58;

  /* Text */
  --text:        #e6edf3;
  --text2:       #8b949e;
  --text3:       #6e7681;

  /* Accent (blue) */
  --accent:      #58a6ff;
  --accent2:     #1f6feb;
  --accent-dim:  #0d2840;

  /* Status */
  --green:       #3fb950;
  --green-dim:   #0d2a14;
  --amber:       #f0883e;
  --red:         #f85149;

  /* Typography */
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
  --font-display: 'Syne', system-ui, sans-serif;

  /* Layout */
  --radius:       8px;
  --radius-lg:    12px;
  --sidebar-width: 240px;
}

/* =============================================================================
   RESET & BASE
   ============================================================================= */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { font-size: 14px; scroll-behavior: smooth; }

body {
  background:   var(--bg);
  color:        var(--text);
  font-family:  var(--font-mono);
  line-height:  1.7;
  min-height:   100vh;
}

a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button { cursor: pointer; }
img  { max-width: 100%; height: auto; }

/* =============================================================================
   LAYOUT SHELL
   ============================================================================= */
.shell {
  display:    flex;
  min-height: 100vh;
}

/* =============================================================================
   SIDEBAR
   ============================================================================= */
.sidebar {
  width:      var(--sidebar-width);
  background: var(--bg2);
  border-right: 1px solid var(--border);
  position:   fixed;
  top:        0;
  left:       0;
  bottom:     0;
  display:    flex;
  flex-direction: column;
  padding:    1.75rem 1rem;
  z-index:    50;
  overflow-y: auto;
}

.sidebar-top {
  margin-bottom: 2rem;
}

/* Logo */
.logo {
  display:     inline-flex;
  align-items: center;
  gap:         2px;
  font-size:   14px;
  font-weight: 700;
  color:       var(--text);
  margin-bottom: 0.75rem;
  transition:  opacity 0.15s;
}
.logo:hover   { opacity: 0.75; }
.bracket      { color: var(--accent); }
.logo-text    { color: var(--text2); }

.sidebar-tagline {
  font-size:   11px;
  color:       var(--text3);
  line-height: 1.6;
}

/* Nav items */
.sidebar-nav {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  flex:           1;
}

.nav-item {
  display:     flex;
  align-items: center;
  padding:     7px 10px;
  color:       var(--text2);
  border-radius: var(--radius);
  font-size:   13px;
  transition:  all 0.15s;
  letter-spacing: 0.01em;
}
.nav-item:hover {
  color:      var(--text);
  background: var(--bg3);
}
.nav-item.active {
  color:      var(--accent);
  background: var(--accent-dim);
}
.nav-tilde                  { color: var(--text3); }
.nav-item.active .nav-tilde { color: var(--accent2); }

/* Social footer */
.sidebar-footer {
  margin-top:  auto;
  padding-top: 1rem;
  border-top:  1px solid var(--border);
  display:     flex;
  flex-direction: column;
  gap:         2px;
}

.social-link {
  display:       flex;
  align-items:   center;
  gap:           8px;
  padding:       7px 10px;
  color:         var(--text2);
  font-size:     13px;
  border-radius: var(--radius);
  transition:    all 0.15s;
}
.social-link:hover {
  color:      var(--text);
  background: var(--bg3);
}
.social-prefix {
  font-size:     10px;
  font-weight:   700;
  color:         var(--text3);
  background:    var(--bg3);
  border:        1px solid var(--border);
  padding:       1px 5px;
  border-radius: 3px;
  letter-spacing: 0.05em;
  flex-shrink:   0;
}

/* =============================================================================
   CONTENT AREA
   ============================================================================= */
.content-wrap {
  margin-left: var(--sidebar-width);
  flex:        1;
  min-width:   0;
}

.content {
  max-width: 860px;
  margin:    0 auto;
  padding:   2.5rem 3rem;
}

/* =============================================================================
   SECTION HEADERS  (terminal-prompt style)
   ============================================================================= */
.section-header {
  margin-bottom: 2rem;
}

.section-title {
  font-family: var(--font-display);
  font-size:   28px;
  font-weight: 800;
  color:       var(--text);
  line-height: 1.2;
}
.section-title .accent { color: var(--accent); }

.section-divider {
  height:     1px;
  background: linear-gradient(90deg, var(--accent2), transparent);
  width:      120px;
  margin:     1rem 0 2rem;
}

/* =============================================================================
   HERO / ABOUT
   ============================================================================= */
.hero {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   3rem;
  align-items:           start;
  margin-bottom:         2.5rem;
}

/* "Available" pulse badge */
.hero-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  background:    var(--green-dim);
  border:        1px solid var(--green);
  color:         var(--green);
  font-size:     11px;
  padding:       4px 10px;
  border-radius: 20px;
  margin-bottom: 1.5rem;
}
.hero-badge::before {
  content:       '';
  width:         6px;
  height:        6px;
  background:    var(--green);
  border-radius: 50%;
  animation:     pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

.hero-name {
  font-family:   var(--font-display);
  font-size:     42px;
  font-weight:   800;
  line-height:   1.1;
  margin-bottom: 0.75rem;
}

.hero-role {
  color:         var(--accent);
  font-size:     14px;
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
}

.hero-bio {
  color:         var(--text2);
  max-width:     520px;
  line-height:   1.8;
  margin-bottom: 1.5rem;
  font-size:     13px;
}

/* Skill tags */
.hero-tags {
  display:       flex;
  flex-wrap:     wrap;
  gap:           8px;
  margin-bottom: 2rem;
}
.tag {
  background:    var(--bg3);
  border:        1px solid var(--border);
  color:         var(--text2);
  font-size:     11px;
  padding:       4px 10px;
  border-radius: 4px;
}

/* Avatar initials box */
.hero-avatar {
  width:         100px;
  height:        100px;
  border-radius: var(--radius-lg);
  background:    var(--bg3);
  border:        1px solid var(--border2);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-display);
  font-size:     20px;
  font-weight:   800;
  color:         var(--accent);
  flex-shrink:   0;
  letter-spacing: 1px;
}

/* Stat cards row */
.stat-row {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   12px;
}
.stat-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1rem;
  text-align:    center;
}
.stat-num {
  font-family: var(--font-display);
  font-size:   24px;
  font-weight: 800;
  color:       var(--accent);
}
.stat-label {
  color:      var(--text3);
  font-size:  11px;
  margin-top: 2px;
}

/* =============================================================================
   BLOG — post list
   ============================================================================= */
.post-list {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.post-card {
  display:       block;
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem 1.5rem;
  transition:    all 0.15s;
  position:      relative;
  overflow:      hidden;
  color:         inherit;
}
.post-card::before {
  content:    '';
  position:   absolute;
  left:       0; top: 0; bottom: 0;
  width:      3px;
  background: var(--accent2);
  opacity:    0;
  transition: 0.15s;
}
.post-card:hover             { border-color: var(--border2); background: var(--bg3); }
.post-card:hover::before     { opacity: 1; }

.post-meta {
  display:     flex;
  align-items: center;
  gap:         12px;
  margin-bottom: 0.5rem;
}
.post-date     { color: var(--text3); font-size: 11px; }
.post-category {
  background:    var(--accent-dim);
  color:         var(--accent);
  font-size:     10px;
  padding:       2px 8px;
  border-radius: 3px;
  border:        1px solid var(--accent2);
}
.post-title {
  font-family:   var(--font-display);
  font-size:     16px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 0.4rem;
}
.post-excerpt { color: var(--text2); font-size: 12px; line-height: 1.7; }

.post-tags      { display: flex; gap: 6px; margin-top: 0.75rem; flex-wrap: wrap; }
.post-tag       { color: var(--text3); font-size: 11px; }
.post-tag::before { content: '#'; }

/* Empty state placeholder */
.empty-state {
  color:      var(--text3);
  font-size:  13px;
  padding:    2rem;
  text-align: center;
  border:     1px dashed var(--border);
  border-radius: var(--radius-lg);
}
.empty-state code {
  background: var(--bg3);
  padding:    2px 6px;
  border-radius: 4px;
  color:      var(--amber);
  font-size:  12px;
}

/* =============================================================================
   PROJECTS — card grid
   ============================================================================= */
.project-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap:                   16px;
}

.project-card {
  display:       block;
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem;
  transition:    all 0.15s;
  color:         inherit;
}
.project-card:hover {
  border-color: var(--accent2);
  transform:    translateY(-2px);
}

.project-icon {
  width:         36px;
  height:        36px;
  background:    var(--accent-dim);
  border:        1px solid var(--accent2);
  border-radius: var(--radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size:     16px;
}
.project-name {
  font-family:   var(--font-display);
  font-size:     15px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 0.4rem;
}
.project-desc {
  color:         var(--text2);
  font-size:     12px;
  line-height:   1.7;
  margin-bottom: 0.75rem;
}
.project-stack { display: flex; flex-wrap: wrap; gap: 6px; }
.stack-pill {
  background:    var(--bg3);
  border:        1px solid var(--border);
  color:         var(--text3);
  font-size:     10px;
  padding:       2px 8px;
  border-radius: 3px;
}

.project-status {
  display:       inline-flex;
  align-items:   center;
  gap:           5px;
  font-size:     10px;
  margin-bottom: 0.75rem;
}
.status-dot               { width: 6px; height: 6px; border-radius: 50%; }
.status-active            { color: var(--green); }
.status-active .status-dot { background: var(--green); }
.status-wip               { color: var(--amber); }
.status-wip .status-dot   { background: var(--amber); }

/* =============================================================================
   CTF — filtered list
   ============================================================================= */
.ctf-filters {
  display:       flex;
  gap:           8px;
  margin-bottom: 1.5rem;
  flex-wrap:     wrap;
}
.filter-btn {
  background:    var(--bg2);
  border:        1px solid var(--border);
  color:         var(--text2);
  font-family:   var(--font-mono);
  font-size:     11px;
  padding:       5px 12px;
  border-radius: var(--radius);
  transition:    all 0.15s;
}
.filter-btn:hover,
.filter-btn.active {
  border-color: var(--accent2);
  color:        var(--accent);
  background:   var(--accent-dim);
}

.ctf-list { display: flex; flex-direction: column; gap: 10px; }

.ctf-card {
  display:               grid;
  grid-template-columns: 1fr auto;
  gap:                   1rem;
  align-items:           center;
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1rem 1.25rem;
  transition:    border-color 0.15s;
  color:         inherit;
}
.ctf-card:hover { border-color: var(--border2); }

.ctf-name {
  font-family:   var(--font-display);
  font-size:     14px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 0.25rem;
}
.ctf-meta { color: var(--text3); font-size: 11px; display: flex; gap: 12px; }

.ctf-difficulty {
  font-size:     11px;
  padding:       3px 10px;
  border-radius: 3px;
  font-weight:   500;
  white-space:   nowrap;
  align-self:    start;
}
.diff-easy   { background: var(--green-dim);              color: var(--green); border: 1px solid var(--green); }
.diff-medium { background: rgba(240,136,62,.10);           color: var(--amber); border: 1px solid var(--amber); }
.diff-hard   { background: rgba(248, 81, 73, .10);         color: var(--red);   border: 1px solid var(--red);   }

/* =============================================================================
   SKILLS — interests + cert cards
   ============================================================================= */
.interests-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   16px;
  margin-bottom:         2.5rem;
}

.interest-group {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1.25rem;
}

/* Reused by both interest groups and cert section heading */
.skill-group-title {
  font-family:    var(--font-display);
  font-size:      11px;
  font-weight:    700;
  color:          var(--accent);
  margin-bottom:  1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.interest-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.interest-tag {
  background:    var(--bg3);
  border:        1px solid var(--border2);
  color:         var(--text2);
  font-size:     11px;
  padding:       4px 10px;
  border-radius: 4px;
  transition:    border-color 0.15s, color 0.15s;
}
.interest-tag:hover {
  border-color: var(--accent2);
  color:        var(--text);
}

.certs-heading {
  font-family:   var(--font-display);
  font-size:     18px;
  font-weight:   700;
  color:         var(--text);
  margin-bottom: 1rem;
}

.cert-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:                   12px;
}
.cert-card {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       1rem;
  display:       flex;
  align-items:   center;
  gap:           12px;
}
.cert-icon {
  width:         40px;
  height:        40px;
  background:    var(--accent-dim);
  border:        1px solid var(--accent2);
  border-radius: var(--radius);
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     18px;
  flex-shrink:   0;
}
.cert-name   { font-size: 12px; font-weight: 500; color: var(--text); margin-bottom: 2px; }
.cert-issuer { font-size: 11px; color: var(--text3); }

.cert-card-link {
  text-decoration: none;
  transition:      border-color 0.15s, transform 0.15s;
}
.cert-card-link:hover {
  border-color: var(--accent2);
  transform:    translateY(-1px);
}

/* =============================================================================
   SINGLE PAGE — markdown body
   ============================================================================= */
.post-title-large {
  font-family:   var(--font-display);
  font-size:     32px;
  font-weight:   800;
  color:         var(--text);
  line-height:   1.2;
  margin-bottom: 0.75rem;
}

.post-header {
  margin-bottom: 2.5rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.markdown-body {
  color:       var(--text2);
  line-height: 1.8;
  font-size:   14px;
}
.markdown-body h1 {
  font-family:   var(--font-display);
  font-size:     28px;
  font-weight:   800;
  margin:        0 0 1.5rem;
  color:         var(--text);
}
.markdown-body h2 {
  font-family:   var(--font-display);
  font-size:     20px;
  font-weight:   700;
  margin:        2rem 0 1rem;
  color:         var(--text);
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.markdown-body h3 {
  font-size:  16px;
  font-weight: 500;
  margin:     1.5rem 0 0.75rem;
  color:      var(--accent);
}
.markdown-body h4, .markdown-body h5, .markdown-body h6 {
  font-size:  14px;
  font-weight: 500;
  margin:     1rem 0 0.5rem;
  color:      var(--text);
}
.markdown-body p { margin-bottom: 1rem; }

.markdown-body code {
  background:    var(--bg3);
  border:        1px solid var(--border);
  padding:       2px 6px;
  border-radius: 4px;
  font-family:   var(--font-mono);
  font-size:     12px;
  color:         var(--amber);
}
.markdown-body pre {
  background:    var(--bg2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       1rem;
  overflow-x:    auto;
  margin:        1rem 0;
}
.markdown-body pre code {
  background: none;
  border:     none;
  padding:    0;
  color:      var(--green);
  font-size:  12px;
}
/* Hugo chroma line numbers */
.markdown-body .lntable      { border: none; margin: 0; }
.markdown-body .lnt          { color: var(--text3); padding-right: 1rem; user-select: none; }

.markdown-body ul, .markdown-body ol {
  color:         var(--text2);
  padding-left:  1.5rem;
  margin-bottom: 1rem;
}
.markdown-body li          { margin-bottom: 0.4rem; }
.markdown-body blockquote  {
  border-left:  3px solid var(--accent2);
  padding-left: 1rem;
  color:        var(--text3);
  margin:       1rem 0;
  font-style:   italic;
}
.markdown-body strong { color: var(--text); font-weight: 500; }
.markdown-body a      { color: var(--accent); }
.markdown-body a:hover { text-decoration: underline; }
.markdown-body hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2rem 0;
}

.markdown-body table {
  width:           100%;
  border-collapse: collapse;
  margin:          1rem 0;
  font-size:       13px;
}
.markdown-body th, .markdown-body td {
  border:  1px solid var(--border);
  padding: 0.5rem 0.75rem;
}
.markdown-body th {
  background: var(--bg3);
  color:      var(--text);
  font-weight: 500;
}
.markdown-body td { color: var(--text2); }

/* Post prev/next nav */
.post-nav {
  display:        flex;
  justify-content: space-between;
  gap:            1rem;
  margin-top:     3rem;
  padding-top:    1.5rem;
  border-top:     1px solid var(--border);
}
.post-nav-link {
  display:        flex;
  flex-direction: column;
  gap:            4px;
  padding:        0.75rem 1rem;
  background:     var(--bg2);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  transition:     border-color 0.15s;
  max-width:      45%;
}
.post-nav-link:hover { border-color: var(--accent2); }
.post-nav-link .nav-label { color: var(--text3); font-size: 11px; }
.post-nav-link .nav-title {
  color:       var(--text);
  font-size:   13px;
  font-family: var(--font-display);
  font-weight: 600;
}
.post-nav-next { text-align: right; margin-left: auto; }

/* =============================================================================
   MOBILE HAMBURGER
   ============================================================================= */
.mobile-toggle {
  display:       none;
  position:      fixed;
  top:           1rem;
  left:          1rem;
  z-index:       100;
  background:    var(--bg2);
  border:        1px solid var(--border);
  color:         var(--text);
  font-size:     18px;
  width:         36px;
  height:        36px;
  border-radius: var(--radius);
  align-items:   center;
  justify-content: center;
  font-family:   var(--font-mono);
  line-height:   1;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width: 768px) {
  .mobile-toggle  { display: flex; }

  .sidebar {
    transform:  translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar.open { transform: translateX(0); }

  .content-wrap { margin-left: 0; }

  .content {
    padding:     1.5rem;
    padding-top: 4.5rem;
  }

  .hero {
    grid-template-columns: 1fr;
  }
  .hero-avatar { display: none; }
  .hero-name   { font-size: 32px; }

  .stat-row { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 480px) {
  .project-grid { grid-template-columns: 1fr; }
  .skills-grid  { grid-template-columns: 1fr; }
  .cert-grid    { grid-template-columns: 1fr; }

  .content { padding: 1rem; padding-top: 4rem; }
}