.writing-page {
  max-width: 640px;
  margin: 0 auto;
  padding: 5rem 1.4rem 2rem;
}

.writing-page nav ul {
  gap: 2.5rem;
}

.writing-page nav ul li {
  padding: 15px 0;
}

.writing-page .substack-note {
  font-size: 13px;
  color: #888;
  margin-top: -0.5rem;
}

.writing-page .substack-note a {
  color: #e74b24;
  text-decoration: none;
}

.writing-page .substack-note a:hover {
  text-decoration: underline;
}

.writing-page .blog-row {
  padding-top: 8px;
}

.writing-page .blog-list {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: left;
}

.writing-page .blog-list-item {
  border-bottom: 1px solid rgba(255, 51, 0, 0.2);
  padding: 14px 0;
}

.writing-page .blog-list-item:first-child {
  border-top: 1px solid rgba(255, 51, 0, 0.2);
}

.writing-page .blog-list-item a {
  font-family: "Balsamiq Sans", cursive;
  font-size: 1.05em;
  color: #333;
  text-decoration: none;
  letter-spacing: 0.3px;
  line-height: 1.4;
  display: inline-block;
}

.writing-page .blog-list-item a:hover {
  color: #e74b24;
}

.writing-page .blog-list-item p {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #888;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.writing-page .loading {
  padding: 2rem 0;
  color: #3bbdc7;
  letter-spacing: 2px;
  font-size: 14px;
}

.writing-page .embed-wrap {
  margin-top: 2.5rem;
}

@media (max-width: 640px) {
  .writing-page {
    padding-top: 4.5rem;
  }

  .writing-page nav ul {
    gap: 1.5rem;
  }
}