/* === RESET & VARIABLES === */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#1a191f;
  --surface:#222128;
  --surface-2:#2a2930;
  --surface-3:#1e1d24;
  --border:rgba(255,255,255,.12);
  --border-bright:rgba(255,255,255,.22);
  --text:#e8e6ed;
  --text-dim:rgba(255,255,255,.5);
  --text-muted:rgba(255,255,255,.3);
  --accent:#d4845a;
  --accent-2:#9b5fd6;
  --green:#5ae086;
  --yellow:#f0d65e;
  --font:'Martian Mono',monospace;
  --radius:1.25rem;
}
html{font-size:14px;scroll-behavior:smooth}
body{
  background:var(--bg);font-family:var(--font);color:var(--text);
  min-height:100vh;line-height:1;-webkit-font-smoothing:antialiased;
}

/* === ANIMATED EYES BACKGROUND === */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  opacity:.4;
  background-image:url('data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%22640%22%20height%3D%22480%22%20viewBox%3D%220%200%20640%20480%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cstyle%3Epath%7Bfill%3Argba(255%2C255%2C255%2C.18)%3Bstroke%3Anone%7D%3C%2Fstyle%3E%3Cpath%20d%3D%22M236.7%2C60q-6.5-6.89-13-1.69%205.2%209.49%2013%201.69%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%224s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.3%3B.32%3B.85%3B.87%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M239.3%2C60q6.5-6.89%2013-1.69-5.2%209.49-13%201.69%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%224s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.3%3B.32%3B.85%3B.87%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M405.3%2C137q-8.5-8.84-17-2.04%206.8%2010.54%2017%202.04%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%225.5s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.45%3B.47%3B.88%3B.9%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M408.7%2C137q8.5-8.84%2017-2.04-6.8%2010.54-17%202.04%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%225.5s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.45%3B.47%3B.88%3B.9%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M519.05%2C290q-5.2-6.11-13-.91%206.5%206.11%2013%20.91%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%227s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.2%3B.22%3B.75%3B.77%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M522.95%2C290q5.2-6.11%2013-.91-6.5%206.11-13%20.91%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%227s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.2%3B.22%3B.75%3B.77%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M96%2C40q-15-11.25-25-3.75%2015%2018.75%2025%203.75%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.5%3B.52%3B.9%3B.92%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M106%2C40q15-11.25%2025-3.75-15%2018.75-25%203.75%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%226s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.5%3B.52%3B.9%3B.92%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M371.2%2C352q-14.5-8.99-29-3.19%2017.4%2023.49%2029%203.19%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%228s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.35%3B.37%3B.8%3B.82%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M382.8%2C352q14.5-8.99%2029-3.19-17.4%2023.49-29%203.19%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%228s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.35%3B.37%3B.8%3B.82%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M144%2C415q-15-9.5-25-2%2015%2017%2025%202%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%225s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.6%3B.62%3B.92%3B.94%3B1%22%2F%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M154%2C415q15-9.5%2025-2-15%2017-25%202%22%20opacity%3D%220%22%3E%3Canimate%20attributeName%3D%22opacity%22%20dur%3D%225s%22%20repeatCount%3D%22indefinite%22%20values%3D%220%3B0%3B1%3B1%3B0%3B0%22%20keyTimes%3D%220%3B.6%3B.62%3B.92%3B.94%3B1%22%2F%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-size:cover;background-repeat:repeat;
}

/* === NAV === */
nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:3rem;padding-bottom:1rem;border-bottom:1px solid var(--border)}
nav .logo{font-size:.85rem;font-weight:300;color:var(--text);text-decoration:none;letter-spacing:.08rem}
nav .logo span{color:var(--accent)}
nav ul{display:flex;gap:1.5rem;list-style:none}
nav a{font-size:.7rem;font-weight:200;color:var(--text-dim);text-decoration:none;text-transform:uppercase;letter-spacing:.15rem;transition:color .2s}
nav a:hover,nav a.active{color:var(--accent)}

/* === LAYOUT === */
.page{position:relative;z-index:1;max-width:64rem;margin:0 auto;padding:2rem 1.5rem 4rem}
.page--narrow{max-width:52rem}
.page--post{max-width:46rem}

/* === TERMINAL WINDOW === */
.terminal-bar{
  display:flex;align-items:center;gap:.5rem;padding:.5rem 1rem;
  background:var(--surface);border:1px solid var(--border);border-radius:.6rem .6rem 0 0;
  font-size:.6rem;color:var(--text-muted);letter-spacing:.1rem;text-transform:uppercase;
}
.terminal-bar .dot{width:8px;height:8px;border-radius:50%}
.terminal-bar .dot:nth-child(1){background:#ff5f57}
.terminal-bar .dot:nth-child(2){background:#ffbd2e}
.terminal-bar .dot:nth-child(3){background:#28c840}
.terminal-body{
  background:var(--surface);border:1px solid var(--border);border-top:0;
  border-radius:0 0 var(--radius) var(--radius);padding:2rem;overflow:hidden;
  min-width:0;
}
.terminal-body *{max-width:100%;box-sizing:border-box}

/* === HOMEPAGE: HERO === */
.hero{display:grid;grid-template-columns:280px 1fr;gap:3rem;margin-bottom:3rem}
@media(max-width:800px){.hero{grid-template-columns:1fr;gap:2rem}}

.hero-identity{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:2rem;position:sticky;top:2rem;height:fit-content;
}
.avatar{width:5.5rem;height:5.5rem;border-radius:50%;border:1px solid var(--border-bright);overflow:hidden;margin-bottom:1.5rem}
.avatar img{width:100%;height:100%;object-fit:cover;padding:3px;border-radius:50%}
.hero-identity h1{font-size:1.35rem;font-weight:300;line-height:1.4;margin-bottom:.75rem}
.hero-identity .role{
  font-size:.7rem;font-weight:200;text-transform:uppercase;letter-spacing:.18rem;line-height:1.8;
  background:linear-gradient(135deg,var(--accent-2),var(--accent));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  margin-bottom:1.5rem;
}
.socials{display:flex;gap:1rem;flex-wrap:wrap}
.socials a{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.65rem;font-weight:200;color:var(--text-dim);text-decoration:none;
  padding:.3rem .65rem;border:1px solid var(--border);border-radius:2rem;
  transition:all .25s;letter-spacing:.05rem;
}
.socials a:hover{border-color:var(--accent);color:var(--accent)}

.hero-content{display:flex;flex-direction:column;gap:2rem}
.bio{font-size:.85rem;font-weight:200;line-height:2;color:var(--text-dim)}
.bio p+p{margin-top:1.25rem}
.bio strong{color:var(--text);font-weight:300}

/* === SPECIALTY TAGS === */
.specialties{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.5rem}
.specialties .tag{
  font-size:.6rem;font-weight:200;color:var(--text-dim);letter-spacing:.08rem;
  padding:.35rem .8rem;border:1px solid var(--border);border-radius:2rem;
  transition:all .3s;cursor:default;
}
.specialties .tag.highlight{border-color:var(--accent);color:var(--accent)}
.specialties .tag:hover{border-color:var(--accent-2);color:var(--accent-2)}

/* === SECTION DIVIDER === */
.section-divider{display:flex;align-items:center;gap:1rem;margin:3rem 0 2rem}
.section-divider::before,.section-divider::after{content:'';flex:1;height:1px;background:var(--border)}
.section-divider span{
  font-size:.65rem;font-weight:200;color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.2rem;white-space:nowrap;
}

/* === POST CARDS (homepage) === */
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:1rem}
.post-card{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);
  padding:1.75rem;text-decoration:none;color:inherit;
  transition:all .3s;display:flex;flex-direction:column;gap:.75rem;
}
.post-card:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:0 8px 30px rgba(212,132,90,.08)}
.post-card .meta{font-size:.6rem;font-weight:200;color:var(--text-muted);text-transform:uppercase;letter-spacing:.12rem}
.post-card .meta .tag{color:var(--accent)}
.post-card h3{font-size:.95rem;font-weight:300;line-height:1.5;color:var(--text)}
.post-card p{font-size:.75rem;font-weight:200;line-height:1.8;color:var(--text-dim)}
.post-card .read-more{
  font-size:.6rem;font-weight:200;color:var(--accent);text-transform:uppercase;letter-spacing:.15rem;
  margin-top:auto;
}

/* === VIEW ALL LINK === */
.view-all{
  display:inline-flex;align-items:center;gap:.5rem;margin-top:1.5rem;
  font-size:.7rem;font-weight:200;color:var(--text-dim);text-decoration:none;
  text-transform:uppercase;letter-spacing:.15rem;transition:color .2s;
}
.view-all:hover{color:var(--accent)}

/* === BLOG LISTING: PAGE HEADER === */
.page-header{margin-bottom:2rem}
.page-header h1{font-size:1.6rem;font-weight:300;margin-bottom:.6rem}
.page-header p{font-size:.8rem;font-weight:200;color:var(--text-dim);line-height:1.9}

/* === FILTER BAR === */
.filter-bar{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border)}
.filter-bar .label{font-size:.6rem;font-weight:200;color:var(--text-muted);text-transform:uppercase;letter-spacing:.15rem;margin-right:.25rem}
.filter-bar button{
  font-family:var(--font);font-size:.6rem;font-weight:200;color:var(--text-dim);
  background:transparent;border:1px solid var(--border);border-radius:2rem;
  padding:.35rem .9rem;cursor:pointer;text-transform:uppercase;letter-spacing:.1rem;transition:all .25s;
}
.filter-bar button:hover{border-color:var(--text-dim);color:var(--text)}
.filter-bar button.active{background:var(--accent);color:var(--bg);border-color:var(--accent)}

/* === POST ROWS (blog listing) === */
.post-list{display:flex;flex-direction:column}
.post-row{
  display:grid;grid-template-columns:7rem 1fr auto;gap:1.5rem;align-items:start;
  padding:1.5rem 1rem;border-bottom:1px solid var(--border);
  text-decoration:none;color:inherit;transition:all .25s;position:relative;
}
.post-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);border-radius:2px;opacity:0;transition:opacity .25s}
.post-row:first-child{border-top:1px solid var(--border)}
.post-row:hover{background:rgba(212,132,90,.04);padding-left:1.5rem}
.post-row:hover::before{opacity:1}
.post-row .date{font-size:.65rem;font-weight:200;color:var(--text-muted);letter-spacing:.05rem;padding-top:.15rem;white-space:nowrap}
.post-row .body h3{font-size:.9rem;font-weight:300;line-height:1.5;margin-bottom:.4rem;transition:color .25s}
.post-row .body .tag{display:inline-block;font-size:.55rem;font-weight:200;color:var(--accent);text-transform:uppercase;letter-spacing:.12rem;margin-bottom:.35rem;padding:.15rem .5rem;border:1px solid rgba(212,132,90,.3);border-radius:1rem}
.post-row .body p{font-size:.72rem;font-weight:200;line-height:1.8;color:var(--text-dim)}
.post-row .arrow{font-size:.8rem;color:var(--text-muted);padding-top:.15rem;transition:color .25s,transform .25s}
.post-row:hover .arrow{color:var(--accent);transform:translateX(4px)}
.post-row:hover h3{color:var(--accent)}
.post-count{font-size:.6rem;font-weight:200;color:var(--text-muted);text-transform:uppercase;letter-spacing:.12rem;margin-top:1.5rem}

/* === BLOG POST === */
.back{display:inline-flex;align-items:center;gap:.4rem;font-size:.7rem;font-weight:200;color:var(--text-dim);text-decoration:none;text-transform:uppercase;letter-spacing:.12rem;margin-bottom:2rem;transition:color .2s}
.back:hover{color:var(--text)}

.post-header{margin-bottom:2.5rem}
.post-header .meta{display:flex;align-items:center;gap:.75rem;margin-bottom:1rem;flex-wrap:wrap}
.post-header .tag{font-size:.55rem;font-weight:200;color:var(--accent);text-transform:uppercase;letter-spacing:.12rem;padding:.2rem .6rem;border:1px solid rgba(212,132,90,.3);border-radius:1rem}
.post-header .date{font-size:.6rem;font-weight:200;color:var(--text-muted);letter-spacing:.08rem}
.post-header .reading{font-size:.6rem;font-weight:200;color:var(--text-muted);letter-spacing:.08rem}
.post-header h1{font-size:1.8rem;font-weight:300;line-height:1.45}

.terminal{margin-bottom:3rem}

/* === ARTICLE TYPOGRAPHY === */
article{font-size:.85rem;font-weight:200;line-height:2.1;color:var(--text-dim);overflow:hidden;max-width:100%}
article p{margin-bottom:1.25rem}
article p:last-child{margin-bottom:0}
article strong{color:var(--text);font-weight:300}
article em{font-style:italic}
article a{color:var(--accent);text-decoration:underline;text-underline-offset:3px;transition:color .2s}
article a:hover{color:var(--accent-2)}
article h2{color:var(--text);font-size:1.15rem;font-weight:300;line-height:1.5;margin-top:2.5rem;margin-bottom:1rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
article h3{color:var(--text);font-size:.95rem;font-weight:400;line-height:1.5;margin-top:2rem;margin-bottom:.75rem}
article blockquote{border-left:3px solid var(--accent-2);padding:.75rem 1.5rem;margin:1.75rem 0;background:rgba(155,95,214,.06);border-radius:0 .5rem .5rem 0;font-style:italic}
article blockquote p{margin-bottom:0}
article pre{background:var(--surface-3);border:1px solid var(--border);border-radius:.75rem;padding:1.25rem;overflow-x:auto;margin:1.75rem 0;font-size:.8rem;line-height:1.7}
article code{font-family:'Lucida Console','Courier New',monospace;font-size:.88em}
article pre code{background:none;padding:0;margin:0;border-radius:0}
article code:not(pre code){background:rgba(144,144,144,.2);border-radius:.25em;padding:.15em .4em}
article ul,article ol{margin:1rem 0 1.5rem 1.5rem}
article li{margin-bottom:.5rem;line-height:1.9}
article ul li{list-style-type:disc}
article ol li{list-style-type:decimal}
article hr{border:0;height:1px;background:var(--border);margin:2.5rem 0}
article img{max-width:100% !important;width:100% !important;height:auto !important;display:block;border-radius:.5rem;margin:1.5rem 0;box-sizing:border-box;object-fit:contain}

/* === CALLOUT BOXES === */
article .callout{border-left:3px solid var(--border-bright);border-radius:0 .5rem .5rem 0;padding:1rem 1.5rem;margin:1.75rem 0;font-style:normal}
article .callout p:last-child{margin-bottom:0}
article .callout-label{display:block;font-size:.7rem;font-weight:300;text-transform:uppercase;letter-spacing:.1rem;margin-bottom:.75rem}
article .callout--tip{border-left-color:var(--green);background:rgba(90,224,134,.06)}
article .callout--tip .callout-label{color:var(--green)}
article .callout--info{border-left-color:#5b9fe0;background:rgba(91,159,224,.06)}
article .callout--info .callout-label{color:#5b9fe0}
article .callout--warning{border-left-color:var(--accent);background:rgba(212,132,90,.06)}
article .callout--warning .callout-label{color:var(--accent)}
article .callout--error{border-left-color:#e05a5a;background:rgba(224,90,90,.06)}
article .callout--error .callout-label{color:#e05a5a}
article .callout--highlight{border-left-color:var(--accent);border-left-width:4px;background:rgba(212,132,90,.10);padding:1.25rem 1.75rem}
article .callout--highlight .callout-label{color:var(--accent);font-weight:400}

/* === POST FOOTER NAV === */
.post-footer{display:flex;align-items:center;justify-content:space-between;padding-top:2rem;border-top:1px solid var(--border);gap:1rem;flex-wrap:wrap}
.post-footer a{font-size:.65rem;font-weight:200;color:var(--text-dim);text-decoration:none;text-transform:uppercase;letter-spacing:.12rem;transition:color .2s;display:flex;align-items:center;gap:.3rem}
.post-footer a:hover{color:var(--accent)}
.post-footer .next{margin-left:auto}

/* === ANIMATIONS === */
.fade-up{opacity:0;transform:translateY(1rem);animation:fadeUp .6s ease forwards}
@keyframes fadeUp{to{opacity:1;transform:none}}
.fade-up:nth-child(1){animation-delay:.05s}
.fade-up:nth-child(2){animation-delay:.12s}
.fade-up:nth-child(3){animation-delay:.19s}
.fade-up:nth-child(4){animation-delay:.26s}
.fade-up:nth-child(5){animation-delay:.33s}
.fade-up:nth-child(6){animation-delay:.40s}
.fade-up:nth-child(7){animation-delay:.47s}
.fade-up:nth-child(8){animation-delay:.54s}

.fade{opacity:0;transform:translateY(.6rem);animation:fadeUp .6s ease forwards}
.fade.d1{animation-delay:.1s}
.fade.d2{animation-delay:.2s}

/* Blinking cursor */
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
.cursor{display:inline-block;width:8px;height:1.1em;background:var(--accent);margin-left:4px;vertical-align:text-bottom;animation:blink 1s step-end infinite}

/* === RESPONSIVE === */
@media(max-width:700px){
  .post-row{grid-template-columns:1fr;gap:.5rem;padding:1.25rem .75rem}
  .post-row .arrow{display:none}
  .post-row .date{order:-1}
}
@media(max-width:600px){
  .post-header h1{font-size:1.4rem}
  .terminal-body{padding:1.5rem}
}