.posts {
  margin: 5em 0;
  padding: 0;
}
.post {
  list-style: none;
  position:relative;
  padding-bottom: 10vmin;
  /* border-bottom: 1px solid var(--background-off-color); */
}
.post::after {
  display: block;
  content: " ";
  width: 200vw;
  height: 1.5em;
  background: var(--background-off-color) linear-gradient(to bottom, rgba(0,0,0,.05) 0%, transparent 30%, transparent 96%, rgba(255,255,255,.5) 100%);
  position: absolute;
  bottom: 0;
  left: -50vw;
}
.post + .post {
  margin-top: 10vmin;
}
.post-footer section {
  border-bottom: 1px solid var(--background-off-color);
  margin-bottom: 2em;
  padding-bottom: 2em;
}
.post-meta {
  display: flex;
  margin:1em 0 .75em;
  line-height:1.4;
}
.post-meta dl {
  margin:.5em;
  font-size:.85em;
}
.post-meta dd {
  hyphens:none;
}

.post h2 {
  font-size: clamp(1.25em, 5vw, 3em);
  margin: 0 0 0.35em;
  padding: 0;
  border: none;
}
.comments {
  padding: 0;
  margin: 0;
}
.comments,
.comments ul {
  list-style: none;
}

.comments .comment {
  position: relative;
  padding: 0.5em;
  display: flex;
  flex-direction: column;
}

.comments p {
  order: 2;
  margin: 0.5em 0 0;
  background: var(--background-off-color);
  padding: 1em 1.2em;
  border-radius: 0 1.2em 1.2em 1.2em;
}
.comment .comment-meta {
  display: flex;
  align-items: center;
}
.comment-meta time,
.comment-meta span {
  display: block;
}

.comment-meta time {
  color: var(--text-faded-color);
  font-size: 0.8em;
}

.comment a {
  display: flex;
  align-items: center;
  margin-right: 0.5em;
}
.comment img {
  width: 2em;
  height: 2em;
  object-fit: cover;
  border-radius: 50%;
  order: 0;
  margin: 0.2em;
}
.comment aside {
  position: absolute;
}

form.comment-form {
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: rgb(240, 240, 240);
  width: calc(100% - 1em);
  display: flex;
}
.comment-form button {
  width: 2em;
}
.comment-form button.more {
  order: 1;
  display: none;
}
.comment-form button.emoji {
  order: 2;
}
.comment-form button.sticker {
  order: 2;
}
.comment-form button.photo {
  order: 3;
}
.comment-form input[type="text"] {
  order: 4;
  flex-grow: 1;
}
.comment-form [type="submit"] {
  order: 5;
}
.comment-form input[type="text"]:focus ~ button {
  display: none;
}
.comment-form input[type="text"]:focus ~ button.more {
  display: block !important;
}

.post[data-post-status="Test"] {
  display: none !important;
}


.post article.preview::after {
  content: " ";
  display: flex;
  width: 100%;
  bottom: 0;
  align-items: flex-end;
  left: 0;
  height: 15vh;
  background: linear-gradient(to top, #eeeae5 15%, transparent 100%);
  position: absolute;
  z-index: 9;
}
.post article.preview {
  max-height: 60vh;
  overflow: hidden;
  position: relative;
}




/* truncate posts: */

.post .content {
  -webkit-box-orient: vertical;
  display: block;
  /*display: -webkit-box;*/
  overflow: hidden !important;
  text-overflow: ellipsis;
  -webkit-line-clamp: 4;
  max-height:8em;
  position:relative;
}
.post .content * {
  cursor:pointer;
}
.post .content.open {
  display: block;
  overflow:auto;
  text-overflow:unset;
  -webkit-line-clamp: 9999;
  max-height:9999px;
}
.post .content.open * {
  cursor:auto;
}

.post .content::after {
  display:block;
  content: " ";
  background: linear-gradient(to top, var(--background-color) 0%, transparent 50%);
  width:100%;
  height:4em;
  position: absolute;
  bottom:0;
  left:0;
}

.post .content.open::after {
  display:none;
  content:none;
}