*{margin:0;padding:0;box-sizing:border-box}
html{height:100%}
body{
  background:#B5AD8E;
  color:#1a1a2e;
  font-family:'Poppins',sans-serif;
  min-height:100%;
  -webkit-font-smoothing:antialiased;
}

/* ── HOME ── */
.home{
  display:flex;
  align-items:flex-end;
  min-height:100vh;
  padding:0 60px 80px;
}
.hero{max-width:900px;width:100%}
.hero-title{
  font-size:clamp(48px,8vw,96px);
  font-weight:300;
  letter-spacing:-1px;
  line-height:1.05;
  margin-bottom:36px;
  color:#1a1a2e;
}
.hero-links a{
  color:#1a1a2e;
  text-decoration:none;
  font-size:14px;
  margin-right:2.5em;
  opacity:.5;
  transition:opacity .2s;
}
.hero-links a:hover{opacity:1}

.home-footer{
  position:fixed;
  bottom:24px;
  left:60px;
  font-size:11px;
  opacity:.35;
  letter-spacing:.5px;
}

/* ── LINKS ── */
a.link{
  color:#1a1a2e;
  text-decoration:none;
  border-bottom:1px solid rgba(26,26,46,.3);
  transition:border-color .2s;
}
a.link:hover{border-color:#1a1a2e}

/* ── SHARED NAV ── */
.nav{
  padding:24px 60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.nav-brand{
  color:#1a1a2e;
  text-decoration:none;
  font-size:14px;
  font-weight:500;
}
.nav-links a{
  color:#1a1a2e;
  text-decoration:none;
  font-size:14px;
  margin-left:2.5em;
  opacity:.5;
  transition:opacity .2s;
}
.nav-links a:hover{opacity:1}

/* ── BLOG LIST ── */
.page-wrap{
  max-width:640px;
  margin:0 auto;
  padding:40px 60px 80px;
}
.page-title{
  font-size:13px;
  font-weight:500;
  opacity:.4;
  margin-bottom:48px;
  letter-spacing:1px;
  text-transform:uppercase;
}
.post-item{
  padding:24px 0;
  border-bottom:1px solid rgba(26,26,46,.1);
}
.post-item:first-child{padding-top:0}
.post-date{
  font-size:12px;
  opacity:.35;
  margin-bottom:6px;
}
.post-title{font-size:18px;font-weight:500;line-height:1.3}
.post-title a{
  color:#1a1a2e;
  text-decoration:none;
  transition:opacity .2s;
}
.post-title a:hover{opacity:.6}
.post-summary{
  opacity:.5;
  font-size:14px;
  margin-top:8px;
  line-height:1.6;
}

/* ── BLOG POST ── */
.post-header{margin-bottom:48px}
.post-header .post-date{margin-bottom:16px}
.post-header h1{
  font-size:clamp(28px,4vw,38px);
  font-weight:500;
  line-height:1.25;
}
.post-content{
  font-size:15px;
  line-height:1.85;
  opacity:.8;
}
.post-content h2{
  font-size:18px;
  font-weight:500;
  margin:2.5em 0 0.8em;
  opacity:1;
}
.post-content h3{
  font-size:15px;
  font-weight:500;
  margin:2em 0 0.6em;
  opacity:1;
}
.post-content p{margin-bottom:1.3em}
.post-content a{
  color:#1a1a2e;
  border-bottom:1px solid rgba(26,26,46,.3);
  text-decoration:none;
}
.post-content a:hover{border-color:#1a1a2e}
.post-content code{
  background:rgba(26,26,46,.08);
  padding:2px 6px;
  border-radius:3px;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
}
.post-content pre{
  background:rgba(26,26,46,.06);
  border:1px solid rgba(26,26,46,.08);
  border-radius:8px;
  padding:20px 24px;
  overflow-x:auto;
  margin:1.8em 0;
  font-family:'JetBrains Mono',monospace;
  font-size:13px;
  line-height:1.6;
}
.post-content pre code{
  background:none;
  padding:0;
}
.post-content blockquote{
  border-left:2px solid rgba(26,26,46,.25);
  padding-left:20px;
  opacity:.6;
  margin:1.8em 0;
}
.post-content ul,.post-content ol{
  margin:1em 0 1.3em 1.5em;
}
.post-content li{margin-bottom:0.5em}
.post-content img{
  max-width:100%;
  border-radius:8px;
  margin:1.8em 0;
}
.post-back{
  margin-top:3em;
  padding-top:2em;
  border-top:1px solid rgba(26,26,46,.1);
}
.post-back a{
  color:#1a1a2e;
  text-decoration:none;
  font-size:14px;
  opacity:.5;
}
.post-back a:hover{opacity:1}

/* ── MOBILE ── */
@media(max-width:600px){
  .home{padding:0 28px 60px}
  .nav{padding:20px 28px}
  .page-wrap{padding:24px 28px 60px}
  .home-footer{left:28px}
}