@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');

:root {
  --bg:        #0d0d0d;
  --bg-card:   #111111;
  --bg-hover:  #161616;
  --border:    rgba(255,255,255,0.07);
  --text:      #e2e8f0;
  --muted:     #6b7280;
  --aurora-1:  #00e5b0;
  --aurora-2:  #00cfff;
  --aurora-3:  #a78bfa;
  --aurora-4:  #38bdf8;
  --aurora-5:  #34d399;
  --aurora-6:  #818cf8;
  --font:      'JetBrains Mono', monospace;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.75;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

.aurora-text {
  background: linear-gradient(
    90deg,
    var(--aurora-1) 0%,
    var(--aurora-2) 18%,
    var(--aurora-3) 36%,
    var(--aurora-4) 52%,
    var(--aurora-5) 68%,
    var(--aurora-6) 84%,
    var(--aurora-1) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: auroraShift 4s linear infinite;
}

@keyframes auroraShift {
  0%   { background-position: 0% center; }
  100% { background-position: 200% center; }
}

.aurora-text-static {
  background: linear-gradient(90deg, var(--aurora-1), var(--aurora-2), var(--aurora-3));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.container {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

main { flex: 1; padding: 3rem 0; }

nav {
  border-bottom: 1px solid var(--border);
  padding: 1.25rem 0;
  position: sticky;
  top: 0;
  background: rgba(13,13,13,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  z-index: 100;
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-logo {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.nav-links {
  display: flex;
  gap: 2rem;
  list-style: none;
}

.nav-links a {
  font-size: 0.8rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color 0.2s;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--text);
}

.hero {
  padding: 4rem 0 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 1.5rem;
}

.avatar-ring {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--aurora-1), var(--aurora-3), var(--aurora-4));
  animation: auroraShift 4s linear infinite;
  background-size: 200% auto;
}

.avatar-ring img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-card);
  display: block;
}

.avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 700;
  color: var(--muted);
  border: 2px solid var(--bg);
}

.hero-name {
  font-size: clamp(2rem, 6vw, 3rem);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.hero-bio {
  color: var(--muted);
  font-size: 0.9rem;
  max-width: 420px;
  line-height: 1.7;
}

.social-links {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 1rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  letter-spacing: 0.05em;
  color: var(--muted);
  background: var(--bg-card);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}

.social-link:hover {
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
  background: var(--bg-hover);
}

.social-link svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
  flex-shrink: 0;
}

.social-link-github:hover   { border-color: rgba(0,229,176,0.5);   background: rgba(0,229,176,0.1); }
.social-link-twitter:hover  { border-color: rgba(56,189,248,0.5);  background: rgba(56,189,248,0.1); }
.social-link-linkedin:hover { border-color: rgba(129,140,248,0.5); background: rgba(129,140,248,0.1); }
.social-link-email:hover    { color: #00cfff; border-color: rgba(0,207,255,0.5); background: rgba(0,207,255,0.1); }
.social-link-mastodon:hover { border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.1); }
.social-link-bluesky:hover  { border-color: rgba(0,207,255,0.5);   background: rgba(0,207,255,0.1); }
.social-link-youtube:hover  { border-color: rgba(0,229,176,0.5);   background: rgba(0,229,176,0.1); }
.social-link-twitch:hover   { border-color: rgba(167,139,250,0.5); background: rgba(167,139,250,0.1); }
.social-link-discord:hover  { border-color: rgba(129,140,248,0.5); background: rgba(129,140,248,0.1); }
.social-link-rss:hover      { border-color: rgba(52,211,153,0.5);  background: rgba(52,211,153,0.1); }
.social-link-website:hover  { border-color: rgba(56,189,248,0.5);  background: rgba(56,189,248,0.1); }
.social-link-tryhackme:hover  { color: #88cc14; border-color: rgba(136,204,20,0.5);  background: rgba(136,204,20,0.1); }
.social-link-cryptohack:hover { color: #f97316; border-color: rgba(249,115,22,0.5);  background: rgba(249,115,22,0.1); }
.social-link-pwncollege:hover { color: #ef4444; border-color: rgba(239,68,68,0.5);   background: rgba(239,68,68,0.1); }

.section-label {
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.post-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.post-card {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 1.1rem 1.25rem;
  border-radius: 8px;
  background: transparent;
  transition: background 0.15s;
  gap: 1rem;
}

.post-card:hover { background: var(--bg-card); }

.post-card-title {
  font-size: 0.95rem;
  font-weight: 400;
  color: var(--text);
  transition: color 0.15s;
}

.post-card:hover .post-card-title { color: var(--aurora-2); }

.post-card-date {
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

.post-card-tags {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.tag {
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  padding: 0.15rem 0.5rem;
  border-radius: 4px;
  color: rgb(var(--tag-rgb));
  border: 1px solid rgba(var(--tag-rgb), 0.3);
  --tag-rgb: 0, 229, 176;
}

.tag:nth-child(6n+1) { --tag-rgb: 0, 229, 176; }
.tag:nth-child(6n+2) { --tag-rgb: 0, 207, 255; }
.tag:nth-child(6n+3) { --tag-rgb: 167, 139, 250; }
.tag:nth-child(6n+4) { --tag-rgb: 56, 189, 248; }
.tag:nth-child(6n+5) { --tag-rgb: 52, 211, 153; }
.tag:nth-child(6n+6) { --tag-rgb: 129, 140, 248; }

.post-card-left { display: flex; flex-direction: column; gap: 0.25rem; }

.post-header { margin-bottom: 2.5rem; }

.post-title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.post-meta {
  display: flex;
  gap: 1.25rem;
  font-size: 0.78rem;
  color: var(--muted);
  flex-wrap: wrap;
}

.post-content {
  color: #c9d1d9;
  line-height: 1.85;
}

.post-content h1,
.post-content h2,
.post-content h3 {
  color: var(--text);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 2rem 0 0.75rem;
}

.post-content h2 { font-size: 1.25rem; }
.post-content h3 { font-size: 1.05rem; }

.post-content p { margin-bottom: 1.25rem; }

.post-content a {
  color: var(--aurora-2);
  border-bottom: 1px solid rgba(0,207,255,0.3);
  transition: border-color 0.15s;
}
.post-content a:hover { border-color: var(--aurora-2); }

.post-content code {
  font-family: var(--font);
  font-size: 0.84em;
  background: #1e2228;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 0.15em 0.45em;
  color: #e5c07b;
}

.post-content pre {
  position: relative;
  padding: 2px;
  border-radius: 10px;
  margin: 2rem 0;
  background: linear-gradient(
    90deg,
    #00e5b0 0%,
    #00cfff 18%,
    #a78bfa 36%,
    #38bdf8 52%,
    #34d399 68%,
    #818cf8 84%,
    #00e5b0 100%
  );
  background-size: 200% auto;
  animation: auroraShift 4s linear infinite;
  box-shadow: 0 0 24px rgba(0,229,176,0.08), 0 8px 32px rgba(0,0,0,0.5);
}

.post-content pre code {
  display: block;
  background: #0d0f12;
  border-radius: 8px;
  padding: 1.4rem 1.6rem;
  font-family: var(--font);
  font-size: 0.84rem;
  font-weight: 700;
  color: #abb2bf;
  overflow-x: auto;
  line-height: 1.75;
  border: none;
}

.chroma .k,  .chroma .kc, .chroma .kd,
.chroma .kn, .chroma .kp, .chroma .kr { color: #c678dd; }
.chroma .kt { color: #e5c07b; }

.chroma .n  { color: #abb2bf; }
.chroma .na { color: #e06c75; }
.chroma .nb { color: #56b6c2; }
.chroma .nc { color: #e5c07b; }
.chroma .no { color: #56b6c2; }
.chroma .nd { color: #61afef; }
.chroma .nf,
.chroma .nx { color: #61afef; }
.chroma .nn { color: #e5c07b; }
.chroma .nt { color: #e06c75; }
.chroma .nv,
.chroma .vc,
.chroma .vg,
.chroma .vi { color: #e06c75; }

.chroma .s,  .chroma .sa, .chroma .sb,
.chroma .sc, .chroma .dl, .chroma .sd,
.chroma .s2, .chroma .sh, .chroma .si,
.chroma .sx, .chroma .s1, .chroma .ss { color: #98c379; }
.chroma .se { color: #56b6c2; }
.chroma .sr { color: #56b6c2; }

.chroma .m,  .chroma .mb, .chroma .mf,
.chroma .mh, .chroma .mi, .chroma .il,
.chroma .mo { color: #d19a66; }

.chroma .o,
.chroma .ow { color: #56b6c2; }

.chroma .p  { color: #abb2bf; }

.chroma .c,  .chroma .ch, .chroma .cm,
.chroma .c1, .chroma .cs, .chroma .cp,
.chroma .cpf { color: #5c6370; font-style: italic; }

.chroma .gd { color: #e06c75; background: rgba(224,108,117,0.15); }
.chroma .gi { color: #98c379; background: rgba(152,195,121,0.15); }
.chroma .ge { font-style: italic; }
.chroma .gs { font-weight: 700; }
.chroma .gh,
.chroma .gu { color: #61afef; font-weight: 700; }
.chroma .go { color: #5c6370; }
.chroma .gp { color: #c678dd; font-weight: 700; }
.chroma .gt { color: #e06c75; }

.chroma .hl { background: rgba(255,255,255,0.06); display: block; margin: 0 -1.5rem; padding: 0 1.5rem; }

.chroma .ln,
.chroma .lnt { color: #3d4148; user-select: none; padding-right: 1.25rem; }

.post-content blockquote {
  border-left: 2px solid var(--aurora-3);
  padding-left: 1.25rem;
  margin: 1.5rem 0;
  color: var(--muted);
  font-style: italic;
}

.post-content ul, .post-content ol {
  padding-left: 1.5rem;
  margin-bottom: 1.25rem;
}

.post-content li { margin-bottom: 0.4rem; }

.post-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 2.5rem 0;
}

.about-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.about-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  padding: 2px;
  background: linear-gradient(135deg, var(--aurora-1), var(--aurora-3));
  background-size: 200% auto;
  animation: auroraShift 4s linear infinite;
  flex-shrink: 0;
}

.about-avatar img,
.about-avatar .avatar-placeholder {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  background: var(--bg-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--muted);
  border: 2px solid var(--bg);
}

.about-intro-name {
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-bottom: 0.25rem;
}

.about-intro-role {
  font-size: 0.82rem;
  color: var(--muted);
}

footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0;
  text-align: center;
  font-size: 0.75rem;
  color: var(--muted);
}

.pagination {
  display: flex;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 2.5rem;
}

.pagination a, .pagination span {
  padding: 0.4rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.78rem;
  color: var(--muted);
  background: var(--bg-card);
  transition: border-color 0.2s, color 0.2s;
}

.pagination a:hover { color: var(--text); border-color: rgba(255,255,255,0.2); }
.pagination .current { color: var(--aurora-2); border-color: rgba(0,207,255,0.3); }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 2rem;
  transition: color 0.15s;
}
.back-link:hover { color: var(--text); }

@media (max-width: 600px) {
  .post-card { flex-direction: column; gap: 0.25rem; }
  .post-card-date { font-size: 0.7rem; }
}