/* HalfSheet News. The landing page's /style.css sets the colours, type, header,
   signup box and footer; this adds the list of posts and the posts, one quiet
   column like Bear's blog. */

/* Wide and full-width images reach past the column; never scroll sideways. */
html { overflow-x: clip; }

.blog {
  width: 100%;
  max-width: 776px;
  margin: 0 auto;
  padding: 0 16px 96px;
}

/* The header lines up with the column of posts. */
.page-header { max-width: 776px; }

/* The first page: the title and the signup box, as on the landing page. */

.blog-intro { text-align: center; padding: 72px 0 8px; }

.blog-intro h1 {
  font-size: 56px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.05;
}

.blog-intro .signup { margin-top: 28px; }

/* Ghost's Portal marks the form; these mirror the landing page's states. */
.signup .signup-sent { display: none; }
.signup.success .signup-row { display: none; }
.signup.success .signup-sent { display: inline; font-size: 17px; font-weight: 600; color: var(--text); }
.signup.error .signup-error { color: var(--error); }
.signup.loading button { opacity: 0.5; cursor: default; }

/* The list of posts. */

.blog-list { padding-top: 24px; }

.blog-item { padding-top: 64px; }

.blog-date { font-size: 15px; color: var(--secondary); }

.blog-item h2 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin-top: 6px;
  text-wrap: balance;
}

.blog-item h2 a { color: var(--text); }
.blog-item h2 a:hover { text-decoration: none; opacity: 0.7; }

.blog-image,
.blog-feature img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
}

.blog-item .blog-image { margin-top: 28px; }

.blog-excerpt { margin-top: 20px; font-size: 19px; line-height: 1.53; }

.pagination {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  margin-top: 72px;
  font-size: 15px;
  color: var(--secondary);
}

/* A post or page. */

.blog-post header { padding-top: 72px; }

.blog-post h1 {
  font-size: 48px;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.08;
  margin-top: 8px;
  text-wrap: balance;
}

.blog-lead { margin-top: 16px; font-size: 21px; line-height: 1.38; color: var(--secondary); }

.blog-feature { margin: 40px 0 0; }

.blog-feature figcaption,
.blog-content figcaption {
  margin-top: 10px;
  font-size: 14px;
  color: var(--secondary);
  text-align: center;
}

.blog-content { margin-top: 40px; font-size: 19px; line-height: 1.58; }

.blog-content > * + * { margin-top: 1em; }

.blog-content h2 { font-size: 28px; font-weight: 600; line-height: 1.2; margin-top: 1.8em; }
.blog-content h3 { font-size: 22px; font-weight: 600; line-height: 1.25; margin-top: 1.6em; }
.blog-content h2 + *, .blog-content h3 + * { margin-top: 0.5em; }

.blog-content ul,
.blog-content ol { padding-left: 1.3em; }
.blog-content li + li { margin-top: 0.4em; }

.blog-content blockquote { margin-left: 0; margin-right: 0; padding-left: 20px; border-left: 3px solid var(--brand); }

.blog-content figure { margin-left: 0; margin-right: 0; }
.blog-content img { max-width: 100%; height: auto; border-radius: 12px; }

.blog-content hr { border: 0; border-top: 1px solid var(--separator); margin: 2.4em 0; }

.blog-content code { font: 0.88em ui-monospace, SFMono-Regular, Menlo, monospace; background: var(--fill); padding: 0.1em 0.35em; border-radius: 5px; }
.blog-content pre { overflow-x: auto; background: var(--fill); padding: 16px 20px; border-radius: 12px; font-size: 15px; line-height: 1.5; }
.blog-content pre code { background: none; padding: 0; }

.kg-width-wide { position: relative; left: 50%; width: min(1032px, 100vw - 32px); transform: translateX(-50%); }
.kg-width-full { position: relative; left: 50%; width: 100vw; transform: translateX(-50%); }
.kg-width-full img { border-radius: 0; }

/* The signup box at the end of a post, as at the foot of the landing page. */

.blog-subscribe {
  margin-top: 88px;
  padding-top: 64px;
  border-top: 1px solid var(--separator);
  text-align: center;
}

.blog-subscribe h2 { font-size: 32px; font-weight: 600; letter-spacing: 0.004em; }

.blog-subscribe .signup { margin-top: 24px; }

@media (max-width: 600px) {
  .blog-intro { padding-top: 48px; }
  .blog-intro h1 { font-size: 40px; }
  .blog-item { padding-top: 48px; }
  .blog-item h2 { font-size: 30px; }
  .blog-post header { padding-top: 48px; }
  .blog-post h1 { font-size: 34px; }
  .blog-lead { font-size: 19px; }
  .blog-content { font-size: 18px; }
  .blog-image, .blog-feature img { border-radius: 14px; }
}