/* ── PAGE HEADER ── */
.page-header{
  padding:180px 0 100px;
  position:relative;overflow:hidden;
}
.page-header::before{
  content:'';position:absolute;top:-300px;right:-200px;
  width:700px;height:700px;border-radius:50%;
  background:radial-gradient(ellipse,rgba(15,30,120,.5),transparent 70%);
  pointer-events:none;
}
.page-title{
  font-size:clamp(4.5rem,11vw,9rem);
  font-weight:700;letter-spacing:-.05em;line-height:.9;
  margin:16px 0 24px;
}
.page-subtitle{font-size:.9rem;color:var(--dim);line-height:1.8;font-weight:300;max-width:440px}

/* ── FILTER ── */
.filter-bar{
  position:sticky;top:62px;z-index:100;
  background:rgba(3,4,10,.8);
  backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid var(--border);
}
.filter-inner{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  overflow-x:auto;scrollbar-width:none;
}
.filter-inner::-webkit-scrollbar{display:none}
.filter-tabs{display:flex}
.filter-tab{
  padding:18px 22px;background:none;border:none;
  border-bottom:2px solid transparent;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dimmer);transition:color .3s,border-color .3s;cursor:none;white-space:nowrap;
}
.filter-tab:hover{color:var(--off-white)}
.filter-tab.active{color:var(--white);border-bottom-color:var(--white)}
.filter-count{font-family:var(--font-mono);font-size:.65rem;color:var(--dimmer);letter-spacing:.06em;white-space:nowrap;padding-right:4px}

/* ── GRID ── */
.posts-main{padding:60px 0 140px;min-height:50vh}
.posts-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:20px}
.posts-loading{
  grid-column:1/-1;display:flex;flex-direction:column;align-items:center;gap:20px;
  padding:100px 0;color:var(--dimmer);font-family:var(--font-mono);font-size:.75rem;letter-spacing:.1em;
}
.loading-dots{display:flex;gap:8px}
.loading-dots span{
  width:8px;height:8px;background:var(--dimmer);border-radius:50%;
  animation:ldot 1.2s ease-in-out infinite;
}
.loading-dots span:nth-child(2){animation-delay:.2s}
.loading-dots span:nth-child(3){animation-delay:.4s}
.posts-empty{
  grid-column:1/-1;text-align:center;padding:100px 0;
  color:var(--dimmer);font-family:var(--font-mono);font-size:.78rem;letter-spacing:.1em;
}

/* ── MODAL ── */
.post-modal{
  position:fixed;inset:0;z-index:2000;
  display:flex;align-items:flex-end;justify-content:center;
  pointer-events:none;opacity:0;
  transition:opacity .4s;
}
.post-modal.open{pointer-events:all;opacity:1}
.modal-backdrop{position:absolute;inset:0;background:rgba(3,4,10,.8);backdrop-filter:blur(12px);cursor:none}
.modal-panel{
  position:relative;z-index:1;
  width:100%;max-width:820px;max-height:90vh;
  background:var(--bg2);
  border:1px solid var(--glass-border);
  border-radius:24px 24px 0 0;
  padding:40px;
  overflow-y:auto;
  transform:translateY(100%);
  transition:transform .6s cubic-bezier(.16,1,.3,1);
  scrollbar-width:thin;scrollbar-color:var(--dimmer) var(--bg2);
}
.post-modal.open .modal-panel{transform:translateY(0)}
@media(min-width:769px){
  .post-modal{align-items:center}
  .modal-panel{border-radius:24px;max-height:88vh;margin:0 24px;transform:translateY(40px) scale(.96)}
  .post-modal.open .modal-panel{transform:none}
}
.modal-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
.modal-meta{display:flex;align-items:center;gap:12px}
.modal-date{font-family:var(--font-mono);font-size:.68rem;color:var(--dimmer);letter-spacing:.06em}
.modal-actions{display:flex;gap:8px}
.modal-share,.modal-close{
  width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  background:var(--glass-bg);border:1px solid var(--border);border-radius:10px;
  color:var(--dim);transition:color .3s,border-color .3s;cursor:none;
}
.modal-share svg,.modal-close svg{width:15px;height:15px}
.modal-share:hover{color:var(--white);border-color:var(--border2)}
.modal-close:hover{color:#ff6b6b;border-color:rgba(255,107,107,.4)}
.modal-title{
  font-size:clamp(1.8rem,4vw,3rem);font-weight:700;letter-spacing:-.04em;line-height:.95;
  margin-bottom:32px;padding-bottom:32px;border-bottom:1px solid var(--border);
}
.modal-content{font-size:.9rem;line-height:1.9;color:var(--dim)}
.modal-content h1,.modal-content h2,.modal-content h3{font-family:var(--font-display);color:var(--white);letter-spacing:-.03em;margin:32px 0 14px}
.modal-content h2{font-size:1.6rem}
.modal-content h3{font-size:1.2rem}
.modal-content p{margin-bottom:16px}
.modal-content a{color:var(--off-white);border-bottom:1px solid var(--border2);transition:border-color .3s}
.modal-content a:hover{border-color:var(--off-white)}
.modal-content code{background:var(--glass-bg2);border:1px solid var(--border);border-radius:6px;padding:2px 8px;font-family:var(--font-mono);font-size:.82em;color:var(--off-white)}
.modal-content pre{background:var(--bg3);border:1px solid var(--border);border-radius:14px;padding:20px;overflow-x:auto;margin-bottom:20px}
.modal-content pre code{background:none;border:none;padding:0;font-size:.8rem}
.modal-content img{width:100%;border-radius:14px;border:1px solid var(--border);margin-bottom:20px}
.modal-content ul,.modal-content ol{padding-left:20px;margin-bottom:16px}
.modal-content li{margin-bottom:8px}
.modal-content blockquote{border-left:2px solid var(--dimmer);padding-left:20px;margin:24px 0;color:var(--dim);font-style:italic}

/* share toast */
.share-toast{
  position:fixed;bottom:40px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--white);color:var(--bg);
  padding:10px 24px;border-radius:100px;
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;letter-spacing:.1em;
  z-index:3000;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;
}
.share-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes ldot{0%,80%,100%{transform:scale(.4);opacity:.3}40%{transform:scale(1);opacity:1}}

@media(max-width:768px){
  .page-header{padding:120px 0 60px}
  .posts-grid{grid-template-columns:1fr}
  .modal-panel{padding:24px 20px}
  .filter-tab{padding:16px 14px;font-size:.62rem}
}