/* ==========================================================================
   Writing: /blog/ and /blog/post.html
   Layout only; every color, size and space comes from tokens.css.
   ========================================================================== */

.blog [hidden],
.post [hidden] { display: none !important; }

/* ---- Index -------------------------------------------------------------- */

.blog { padding-bottom: var(--space-4); }

.blog__none {
  padding-block: var(--space-5);
  border-top: var(--hairline) solid var(--line);
  color: var(--ink-3);
}

/* Empty state: a blank notebook page. A gold margin rule, one sentence,
   and a few ruled lines waiting to be written on. */
.blog-empty { max-width: 40rem; }

.blog-empty__page {
  padding-left: var(--space-6);
  border-left: 1.5px solid var(--gold);
  font-family: var(--font-serif);
  font-size: var(--step-3);
  line-height: 1.5;
}
/* Ruled lines one line-height apart, so the sentence sits on them like
   handwriting. Browsers without the lh unit simply skip the lines. */
.blog-empty__line,
.blog-empty__rules {
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0 calc(1lh - 1px),
    var(--line) calc(1lh - 1px) 1lh
  );
}
.blog-empty__line {
  font-style: italic;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.blog-empty__rules {
  display: block;
  height: 3lh;
  -webkit-mask-image: linear-gradient(to bottom, var(--ink), transparent);
          mask-image: linear-gradient(to bottom, var(--ink), transparent);
}
.blog-empty__aside {
  margin-top: var(--space-5);
  padding-left: calc(var(--space-6) + 1.5px);
  color: var(--ink-3);
}

/* While the posts are on their way, the empty line waits, so a real list
   never flashes "Nothing here yet" first. If the script never answers,
   it shows anyway after a moment. */
.blog-empty { transition: opacity var(--dur-slow) var(--ease); }
.js .blog[aria-busy="true"] .blog-empty {
  opacity: 0;
  animation: blog-show var(--dur-slow) var(--ease) 2.5s forwards;
}
@keyframes blog-show { to { opacity: 1; } }

.blog__subscribe {
  margin-top: var(--space-8);
  padding-top: var(--space-6);
  border-top: var(--hairline) solid var(--line);
}
/* Under a list of posts, the list's own last rule is enough. */
.post-list:not([hidden]) ~ .blog__subscribe { padding-top: 0; border-top: 0; }
.blog__subscribe-title {
  margin-bottom: var(--space-2);
  font-size: var(--step-2);
}

/* ---- One post ----------------------------------------------------------- */

.post__back { padding-top: var(--space-6); }
.link-back {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: var(--ink-3);
  font-size: var(--step-n1);
  font-weight: var(--weight-medium);
  text-decoration: none;
}
.link-back:hover { color: var(--accent); }
.link-back__icon {
  width: 1em;
  height: 1em;
  transform: scaleX(-1);
  transition: transform var(--dur) var(--ease);
}
.link-back:hover .link-back__icon { transform: scaleX(-1) translateX(3px); }

.post__head { padding-top: var(--space-6); }
.post__head h1 { max-width: 20ch; font-size: var(--step-5); }
.post__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  margin-top: var(--space-5);
  color: var(--ink-3);
}
.post__read::before {
  content: "\00B7";
  margin-right: var(--space-3);
}

.post__body { font-size: var(--step-0); }
.post__body img,
.post__body video,
.post__body iframe {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius);
}
.post__body figure figcaption {
  margin-top: var(--space-2);
  font-size: var(--step-n1);
  color: var(--ink-3);
}
.post__body hr { margin: var(--space-7) 0; }
.post__body table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  border-collapse: collapse;
  font-size: var(--step-n1);
}
.post__body th,
.post__body td {
  padding: var(--space-2) var(--space-3);
  border-bottom: var(--hairline) solid var(--line);
  text-align: left;
}

.post__foot { margin-top: var(--space-8); }
.post__foot .kuba { margin-top: 0; }
.post__foot-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
}
.post__foot .subscribe__msg:empty { min-height: 0; margin: 0; }

/* Quiet placeholder while the post loads (JavaScript only). */
html:not(.js) [data-post-skeleton] { display: none; }
.post-skeleton {
  display: grid;
  gap: var(--space-3);
  max-width: var(--measure);
  padding-block: var(--space-6) var(--space-7);
}
.post-skeleton__bar {
  display: block;
  height: 1em;
  border-radius: var(--radius-sm);
  background: var(--surface);
  animation: post-pulse calc(var(--dur-slow) * 6) var(--ease) infinite alternate;
}
.post-skeleton__bar--eyebrow { width: 6rem; height: 0.75em; margin-bottom: var(--space-3); }
.post-skeleton__bar--title { width: 80%; height: var(--step-5); }
.post-skeleton__bar--line { margin-top: var(--space-2); }
.post-skeleton__bar--title + .post-skeleton__bar--line { margin-top: var(--space-6); }
.post-skeleton__bar--short { width: 55%; }
@keyframes post-pulse { to { opacity: 0.45; } }

/* The sentence for no JavaScript, a missing slug, or no answer. */
.js .post[aria-busy="true"] .post-note { display: none; }
.post-note {
  display: grid;
  justify-items: start;
  gap: var(--space-4);
  max-width: var(--measure);
  padding-block: var(--space-7) var(--space-4);
}
.post-note__title { font-size: var(--step-3); }
.post-note__text { font-size: var(--step-1); line-height: var(--leading-snug); }
.post-note .btn { margin-top: var(--space-2); }