/* layout container */
.journal-wrap{ padding:48px 18px; }

.journal{
  width:min(1100px, 92vw);
  min-height: 72vh;
  display:grid;
  grid-template-columns: 340px 1fr;
  overflow:hidden;
}

/* sidebar */
.journal-sidebar{
  border-right: 1px solid rgba(255,255,255,0.06);
  padding:16px;
  background: rgba(0,0,0,0.10);
}

.journal-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:14px;
}

.journal-home{
  text-decoration:none;
  color: rgba(255,255,255,0.70);
  font-size:12px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}

.journal-home:hover{
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}

.journal-title{
  font-size:11px;
  letter-spacing:3px;
  color: rgba(255,255,255,0.45);
}

.journal-search{ margin-bottom:12px; }

.journal-input{
  width:100%;
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(0,0,0,0.18);
  color: rgba(255,255,255,0.85);
  padding:10px 12px;
  outline:none;
}

/* list */
.journal-list{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height: calc(72vh - 120px);
  overflow:auto;
  padding-right:6px;
}

/* list item */
.item{
  text-decoration:none;
  color: rgba(255,255,255,0.78);
  border:1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
  border-radius:14px;
  padding:10px 12px;
  cursor:pointer;

  display:flex;
  flex-direction:column;
  gap:6px;

  transition: transform .16s cubic-bezier(.2,.8,.2,1),
              background .16s cubic-bezier(.2,.8,.2,1),
              border-color .16s cubic-bezier(.2,.8,.2,1);
}

.item:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.14);
}

.item.active{
  background: rgba(255,255,255,0.10);
  border-color: rgba(255,255,255,0.18);
}

.item-title{
  font-size:13px;
  letter-spacing:.4px;
}

.item-snippet{
  font-size:12px;
  color: rgba(255,255,255,0.55);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.item-meta{
  font-size:10px;
  letter-spacing:2px;
  color: rgba(255,255,255,0.38);
}

/* main content */
.journal-main{
  padding:18px 22px;
}

.journal-main-top{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}

.post-title{
  font-size:18px;
  letter-spacing:.5px;
}

.post-meta{
  font-size:10px;
  letter-spacing:2px;
  color: rgba(255,255,255,0.45);
}

.post-body{
  color: rgba(255,255,255,0.72);
  line-height:1.7;
  font-size:14px;
  white-space: pre-wrap; /* preserves your line breaks */
  max-height: calc(72vh - 90px);
  overflow:auto;
  padding-right:8px;
}

/* responsive */
@media (max-width: 980px){
  .journal{
    grid-template-columns: 1fr;
  }
  .journal-sidebar{
    border-right:none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
  }
}