:root{
  --ink: #C0C0C0;
  --ink-strong: #E9E9E9;
  --glass: rgba(12,14,18,.62);
  --stroke: rgba(255,255,255,.12);
  --shadow: 0 10px 26px rgba(0,0,0,.45);
  --rule: #C0C0C0;
}

.blog, .post{
  color: var(--ink);
  padding: clamp(40px,6vw,100px) 0;    }

.blog__inner, .post__inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 clamp(16px,3vw,32px);
}

.blog__header{ text-align:center; margin-bottom: clamp(24px,4vw,40px); }
.blog__title, .post__title{
  margin:0 0 10px;
  font-weight:900; color:var(--ink-strong);
  font-size: clamp(28px,4.4vw,44px);
  line-height:1.06;
  letter-spacing:.02em;
}
.blog__rule{
  display:inline-block; height:3px; width:min(240px,36%); border-radius:999px;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}

.blog__grid{
  display:grid;
  gap: clamp(16px,2.2vw,24px);
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: stretch;
}
@media (max-width: 1024px){ .blog__grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width: 640px){  .blog__grid{ grid-template-columns: 1fr; } }

.post-card{
  display:flex; flex-direction:column; overflow:hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border:1px solid var(--stroke);
  border-radius:16px;
  box-shadow: var(--shadow);
  transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.post-card:hover{
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(0,0,0,.55);
  border-color: rgba(255,255,255,.16);
}

.post-card__link{ display:flex; flex-direction:column; color:inherit; text-decoration:none; height:100%; }

.post-card__media{
  position: relative;
  background: rgba(255,255,255,.03);
  aspect-ratio: 16/9;
  max-height: clamp(180px, 28vw, 220px);
}
.post-card__media img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover; display:block;
}

.post-card__body{ padding: 14px 16px 16px; display:flex; flex-direction:column; gap:8px; }

.post-card__title{
  margin:0;
  font-weight:900; color:var(--ink-strong);
  font-size: clamp(18px,2.2vw,22px);
  line-height:1.2;
  overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card__excerpt{
  margin:0;
  line-height:1.7; opacity:.95;
  font-size: clamp(14px,1.7vw,16px);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.post-card__meta{ font-weight:700; font-size:.9rem; opacity:.85; }

.blog__nav{ margin-top: clamp(18px,3vw,28px); text-align:center; }
.blog__nav .page-numbers{
  display:inline-block; padding:.45em .75em; margin:.1em;
  border:1px solid var(--stroke); border-radius:10px;
}
.blog__nav .current{
  background: rgba(255,255,255,.08);
  color: var(--ink-strong);
}

.post__header{ margin-bottom: clamp(16px,3vw,24px); text-align:center; }
.post__meta{ font-weight:700; opacity:.9; }

.post__hero{
  margin: clamp(16px,3vw,24px) 0;
  border-radius:16px; overflow:hidden;
  background: var(--glass);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  backdrop-filter: blur(8px) saturate(120%);
  border:1px solid var(--stroke);
  box-shadow: var(--shadow);
}
.post__hero-inner{
  position:relative; aspect-ratio: 16/9; max-height: clamp(220px, 45vw, 560px);
}
.post__hero img{
  position:absolute; inset:0;
  width:100%; height:100%; object-fit:cover; display:block;
}

.post__content{
  line-height:1.85;
  font-size: clamp(15px,1.7vw,17px);
}
.post__content p{ margin: 0 0 1em; }
.post__content h2, .post__content h3{
  color: var(--ink-strong);
  margin: 1.2em 0 .5em;
  line-height:1.2;
}
.post__content hr{
  height:2px; border:0; margin: 1.4em 0;
  background: linear-gradient(90deg, transparent, var(--rule), transparent);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.35));
  border-radius:999px;
}
.post__content a{
  color: var(--ink-strong); text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.18);
  padding-bottom:2px;
}
.post__content a:hover{ border-color: rgba(255,255,255,.32); }

.post__content blockquote{
  margin: 1.2em 0; padding: .8em 1em;
  background: rgba(255,255,255,.05);
  border-left: 4px solid rgba(255,255,255,.22);
  border-radius: 10px;
}
.post__content img{
  max-width:100%; height:auto; display:block;
  border-radius:14px;
  margin: 12px auto;
  box-shadow: 0 10px 24px rgba(0,0,0,.45);
}

.post__pager{
  display:flex; justify-content:space-between; gap:12px;
  margin-top: clamp(20px,3.5vw,32px);
}
.post__pager a{
  color: var(--ink); text-decoration:none;
  border-bottom:2px solid rgba(255,255,255,.16);
  padding-bottom:2px;
}

@media (prefers-reduced-motion: reduce){
  .post-card{ transition:none !important; }
}


.post{ color: var(--ink); }

.post__title{ color: var(--ink-strong); }

.post__content{
  color: #0d1117;                                 background: rgba(248, 250, 252, 0.92);          -webkit-backdrop-filter: blur(4px) saturate(115%);
  backdrop-filter: blur(4px) saturate(115%);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 16px;
  padding: clamp(18px, 2.6vw, 30px);
  box-shadow: 0 10px 26px rgba(0,0,0,.35);
  font-size: clamp(16px, 1.85vw, 18px);           line-height: 1.9;                              }

.post__content h2,
.post__content h3,
.post__content h4{
  color: #0b0e13;
  margin: 1.2em 0 .6em;
  line-height: 1.2;
}

.post__content p{ margin: 0 0 1.05em; }
.post__content ul,
.post__content ol{ margin: 0 0 1.05em 1.2em; }
.post__content li{ margin: .25em 0; }

.post__content a{
  color: #0b0e13;
  text-decoration: none;
  border-bottom: 2px solid rgba(0,0,0,.25);
  padding-bottom: 2px;
}
.post__content a:hover{
  border-color: rgba(0,0,0,.45);
}

.post__content blockquote{
  margin: 1.2em 0;
  padding: .9em 1em;
  background: rgba(0,0,0,.04);
  border-left: 4px solid rgba(0,0,0,.18);
  border-radius: 10px;
  color: #0b0e13;
}

.post__content hr{
  height: 2px; border: 0; margin: 1.4em 0;
  background: linear-gradient(90deg, transparent, #9fa6ad, transparent);
  border-radius: 999px;
}

.post__content img{
  max-width: 100%; height: auto; display: block;
  border-radius: 12px;
  margin: 12px auto;
  box-shadow: 0 10px 20px rgba(0,0,0,.18);
}

.post__content table{
  width: 100%; border-collapse: collapse; margin: 1em 0;
  border: 1px solid rgba(0,0,0,.12);
  font-size: .98em;
}
.post__content th,
.post__content td{
  padding: .6em .8em;
  border-bottom: 1px solid rgba(0,0,0,.08);
  text-align: left;
}
.post__content pre,
.post__content code{
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  background: rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 8px;
}
.post__content pre{ padding: .9em 1em; overflow: auto; }
.post__content code{ padding: .15em .35em; }

.post__pager a{
  color: var(--ink);
  border-bottom: 2px solid rgba(255,255,255,.16);
}

@media (max-width: 560px){
  .post__content{ padding: clamp(14px, 4vw, 20px); }
}
.post__content{
  background: rgba(248, 250, 252, 0.62) !important;    -webkit-backdrop-filter: blur(10px) saturate(120%);
  backdrop-filter: blur(10px) saturate(120%);           border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.30);               color: #0d1117;                                     }

@media (max-width: 560px){
  .post__content{
    background: rgba(248, 250, 252, 0.68) !important;
    -webkit-backdrop-filter: blur(12px) saturate(120%);
    backdrop-filter: blur(12px) saturate(120%);
  }
}