:root{
  --bg:#0B1220;
  --panel:#111A2B;
  --panel-2:#0E1626;
  --line:#22304A;
  --ink:#E8ECF1;
  --muted:#8592A6;
  --amber:#C98A3E;
  --amber-bright:#E3A855;
  --cyan:#4FD1C5;
  --radius:10px;
}
html[data-theme="light"]{
  --bg:#F4F6FA;
  --panel:#FFFFFF;
  --panel-2:#EDF1F7;
  --line:#D6DEEA;
  --ink:#0F1B2D;
  --muted:#5B6B82;
  --amber:#B06E22;
  --amber-bright:#9C5C16;
  --cyan:#0A7D73;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:
    radial-gradient(circle at 15% 0%, rgba(79,209,197,0.06), transparent 45%),
    radial-gradient(circle at 85% 20%, rgba(201,138,62,0.07), transparent 40%),
    var(--bg);
  color:var(--ink);
  font-family:'Inter', sans-serif;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  transition:background .25s ease, color .25s ease;
}
h1,h2,h3{font-family:'Space Grotesk', sans-serif; letter-spacing:-0.01em; margin:0;}
.mono{font-family:'JetBrains Mono', monospace;}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

body::before{
  content:"";
  position:fixed; inset:0;
  background-image:
    linear-gradient(rgba(79,209,197,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(79,209,197,0.045) 1px, transparent 1px);
  background-size:32px 32px;
  pointer-events:none;
  z-index:0;
}
header, main, footer{position:relative; z-index:1;}

:focus-visible{outline:2px solid var(--cyan); outline-offset:3px;}

.skip-link{
  position:absolute; left:12px; top:-60px; z-index:100;
  background:var(--cyan); color:#08131A; font-weight:700; font-size:14px;
  padding:10px 16px; border-radius:8px; text-decoration:none;
  transition:top .15s ease;
}
.skip-link:focus{ top:12px; }

.wrap{max-width:1080px; margin:0 auto; padding:0 24px;}

.bp{
  position:relative;
  background-repeat:no-repeat;
  background-image:
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan)),
    linear-gradient(var(--cyan), var(--cyan)), linear-gradient(var(--cyan), var(--cyan));
  background-size:12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px, 12px 2px, 2px 12px;
  background-position:
    top 0 left 0, top 0 left 0,
    top 0 right 0, top 0 right 0,
    bottom 0 right 0, bottom 0 right 0,
    bottom 0 left 0, bottom 0 left 0;
}

.bp-rule{display:flex; align-items:center; gap:6px; margin-top:14px; color:var(--muted);}
.bp-rule::before, .bp-rule::after{
  content:"";
  height:1px;
  background-image:linear-gradient(90deg, var(--line) 0 6px, transparent 6px 10px);
  background-size:10px 1px;
  flex:1;
}
.bp-rule .tick{width:1px; height:9px; background:var(--line);}

/* ---------- NAV ---------- */
header{
  position:sticky; top:0; z-index:50;
  background:rgba(11,18,32,0.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
html[data-theme="light"] header{background:rgba(244,246,250,0.88);}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 24px; max-width:1080px; margin:0 auto; gap:12px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-weight:700; font-size:15px;
  letter-spacing:0.04em; text-decoration:none; white-space:nowrap;
}
.brand .dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--cyan); box-shadow:0 0 8px var(--cyan);
  animation:pulse 2.4s ease-in-out infinite; flex-shrink:0;
}
@keyframes pulse{0%,100%{opacity:1; transform:scale(1);} 50%{opacity:.4; transform:scale(.8);}}

.gh-stats-loading{
  display:flex; align-items:center; gap:10px;
  font-family:'JetBrains Mono', monospace; font-size:13px; color:var(--muted);
}
.spinner-dot{
  width:8px; height:8px; border-radius:50%; background:var(--cyan);
  box-shadow:0 0 6px var(--cyan); animation:pulse 1.2s ease-in-out infinite;
}
.nav-right{display:flex; align-items:center; gap:14px;}
nav ul{list-style:none; display:flex; gap:28px; margin:0; padding:0;}
nav a{text-decoration:none; color:var(--muted); font-size:14px; font-weight:500; transition:color .2s;}
nav a:hover, nav a.active{color:var(--ink);}
.theme-toggle{
  background:none; border:1px solid var(--line); color:var(--ink);
  border-radius:100px; padding:7px 10px; cursor:pointer; font-size:13px;
  display:flex; align-items:center; gap:6px;
}
.theme-toggle:hover{border-color:var(--cyan);}
.nav-toggle{display:none; background:none; border:1px solid var(--line); color:var(--ink); border-radius:6px; padding:8px 10px; cursor:pointer;}

@media (max-width:760px){
  nav ul{
    position:fixed; top:64px; left:0; right:0;
    flex-direction:column; gap:0; background:var(--panel);
    border-bottom:1px solid var(--line);
    max-height:0; overflow:hidden; transition:max-height .3s ease;
  }
  nav ul.open{max-height:460px;}
  nav ul li{border-top:1px solid var(--line);}
  nav ul a{display:block; padding:16px 24px;}
  .nav-toggle{display:block;}
}

/* ---------- HERO ---------- */
.hero-small{padding:56px 0 20px;}
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'JetBrains Mono', monospace; font-size:12px;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--amber-bright);
  border:1px solid rgba(201,138,62,0.4); background:rgba(201,138,62,0.08);
  padding:6px 12px; border-radius:100px; margin-bottom:18px;
}
.hero-small h1{font-size:clamp(28px,5vw,44px); line-height:1.1; font-weight:700;}
.hero-small .lead{margin-top:14px; font-size:16px; color:var(--muted); max-width:60ch;}

/* ---------- FILTERS ---------- */
.filter-row{display:flex; flex-wrap:wrap; gap:10px; margin:32px 0 24px;}
.filter-chip{
  font-family:'JetBrains Mono', monospace; font-size:12px;
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:100px; padding:8px 16px; cursor:pointer; transition:all .15s;
}
.filter-chip:hover{border-color:var(--cyan);}
.filter-chip.active{background:var(--cyan); color:#08131A; border-color:var(--cyan); font-weight:600;}

/* ---------- POST GRID / CARDS ---------- */
.post-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; padding-bottom:40px;}
.post-card{
  border:1px solid var(--line); background:var(--panel); border-radius:var(--radius);
  padding:22px; text-decoration:none; color:var(--ink);
  display:flex; flex-direction:column; transition:border-color .2s, transform .2s;
}
.post-card:hover{border-color:var(--cyan); transform:translateY(-2px);}
.post-meta{
  display:flex; justify-content:space-between; align-items:center;
  font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--muted);
  text-transform:uppercase; letter-spacing:.06em; margin-bottom:12px;
}
.post-card h3{font-size:17px; margin-bottom:8px;}
.post-card p{color:var(--muted); font-size:14px; margin:0; flex:1;}
.post-tags{display:flex; flex-wrap:wrap; gap:6px; margin-top:14px;}
.post-tag{
  font-family:'JetBrains Mono', monospace; font-size:10px;
  border:1px solid var(--line); color:var(--muted); border-radius:5px; padding:3px 7px;
}
.post-read{margin-top:14px; font-size:13px; font-weight:600; color:var(--cyan);}

.card-empty{
  border:1px dashed var(--line); background:transparent; border-radius:var(--radius);
  padding:22px; color:var(--muted); font-size:13px;
}
.card-empty .status-line{
  font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--amber-bright); display:block; margin-bottom:8px;
}

/* ---------- SINGLE POST PAGE ---------- */
.post-header{padding:56px 0 20px;}
.post-header .post-meta{margin-bottom:16px;}
.post-header h1{font-size:clamp(26px,5vw,40px); line-height:1.15;}
.post-body{
  max-width:72ch; margin:0 auto; padding:20px 24px 60px;
  font-size:16px; color:var(--ink);
}
.post-body h2{font-size:22px; margin:36px 0 14px;}
.post-body h3{font-size:18px; margin:28px 0 10px;}
.post-body p{color:var(--ink); margin:0 0 16px;}
.post-body p.muted{color:var(--muted);}
.post-body ul, .post-body ol{color:var(--ink); margin:0 0 16px; padding-left:22px;}
.post-body li{margin-bottom:6px;}
.post-body code{
  font-family:'JetBrains Mono', monospace; font-size:0.9em;
  background:var(--panel); border:1px solid var(--line);
  border-radius:4px; padding:2px 6px;
}
.post-body pre{
  background:var(--panel); border:1px solid var(--line); border-radius:8px;
  padding:16px; overflow-x:auto; margin:0 0 20px;
}
.post-body pre code{border:none; background:none; padding:0;}
.post-body blockquote{
  border-left:2px solid var(--amber); padding:6px 0 6px 20px;
  font-style:italic; color:var(--muted); margin:0 0 20px;
}
.back-link{
  display:inline-flex; align-items:center; gap:6px; font-size:14px;
  font-weight:600; color:var(--cyan); text-decoration:none; margin-bottom:20px;
}
.back-link:hover{text-decoration:underline;}

footer{border-top:1px solid var(--line); padding:36px 0;}
.foot-bottom{
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:12px; color:var(--muted); font-family:'JetBrains Mono', monospace;
}
.foot-bottom a{color:var(--cyan); text-decoration:none;}
.foot-bottom a:hover{text-decoration:underline;}

/* ---------- CARDS (projects, achievements, certs) — shared with index.html ---------- */
.cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:18px;
}
.card{
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:var(--radius);
  padding:22px;
  transition:transform .2s ease, border-color .2s ease;
}
.card:hover{ transform:translateY(-2px); border-color:rgba(79,209,197,0.35); }
.card .icon{font-size:24px; margin-bottom:14px; display:block; transition:transform .25s ease;}
.card:hover .icon{transform:translateY(-3px) rotate(-4deg);}
.card h3{font-size:16px; margin-bottom:6px;}
.card p{color:var(--muted); font-size:14px; margin:0;}

.card-empty{
  border:1px dashed var(--line);
  background:transparent;
  border-radius:var(--radius);
  padding:22px;
  color:var(--muted);
  font-size:13px;
}
.card-empty .status-line{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--amber-bright); display:block; margin-bottom:8px;
}

.project-stack{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:12px 0 14px;
}
.stack-tag{
  font-family:'JetBrains Mono', monospace;
  font-size:11px; letter-spacing:.03em;
  border:1px solid var(--line);
  color:var(--muted);
  border-radius:5px;
  padding:3px 8px;
}
.project-links{display:flex; gap:14px;}
.project-links a{
  font-size:13px; font-weight:600; color:var(--cyan);
  text-decoration:none;
  display:inline-flex; align-items:center; gap:5px;
}
.project-links a:hover{text-decoration:underline;}

@media (max-width:480px){
  .wrap{padding:0 16px;}
  .hero-small{padding:40px 0 16px;}
  .post-body{padding:16px 16px 48px;}
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

@media print{
  body::before{ display:none; }
  header, footer, .skip-link, .bp-rule, .theme-toggle, .nav-toggle, .filter-row, .back-link{ display:none !important; }
  body{ background:#fff; color:#111; }
  .post-card, .card-empty{ border:1px solid #ccc !important; background:#fff !important; }
  a{ color:#111 !important; text-decoration:underline; }
  .eyebrow, .tag, .post-tag{ color:#555 !important; }
  .post-body pre, .post-body code{ background:#f4f4f4 !important; border-color:#ccc !important; }
}