/* The blog: a reading column inside the same window as the rest of the site. Posts are set larger and looser
   than the documents, code keeps its own colors in both appearances, and nothing here loads from outside. */

:root {
  --prose: #2a2a30;
  --rule: rgb(0 0 0 / 0.09);
  --hl-keyword: #9334b4;
  --hl-string: #1c7a40;
  --hl-comment: #7d838c;
  --hl-number: #b25700;
  --hl-type: #0a5fc9;
  --hl-attr: #a1508b;
}
@media (prefers-color-scheme: dark) {
  :root {
    --prose: #dedee4;
    --rule: rgb(255 255 255 / 0.1);
    --hl-keyword: #d79cf5;
    --hl-string: #8fd6a2;
    --hl-comment: #81868f;
    --hl-number: #f2a865;
    --hl-type: #7cc2ff;
    --hl-attr: #f09ad0;
  }
}

.blog { max-width: calc(680px + 2 * var(--s-6)); margin: 0 auto; padding: var(--s-8) var(--s-6) var(--s-9); }

/* A post's head: what kind of note, when, how long; the title; the one-line summary. */
.post-meta { display: flex; flex-wrap: wrap; gap: 0 var(--s-2); font-size: var(--t-4); color: var(--text-3); }
.post-meta .kind { color: var(--text-2); font-weight: 600; }
.post-meta span + span::before { content: "·"; margin-right: var(--s-2); color: var(--text-3); }
.post h1 { margin-top: var(--s-4); font: 700 46px/1.08 var(--display); letter-spacing: -0.035em; color: var(--text);
  text-wrap: balance; }
.post .dek { margin-top: var(--s-5); font-size: 21px; line-height: 1.5; color: var(--text-2); text-wrap: pretty; }
.post-head { padding-bottom: var(--s-7); border-bottom: 1px solid var(--rule); }

/* The body. */
.post-body { padding-top: var(--s-6); color: var(--prose); font-size: 17.5px; line-height: 1.75; }
.post-body > * + * { margin-top: var(--s-5); }
.post-body p { text-wrap: pretty; }
.post-body a { color: var(--link); }
.post-body strong { color: var(--text); }
.post-body ul { padding-left: 1.25em; list-style: disc; }
.post-body li + li { margin-top: var(--s-2); }
.post-body p code, .post-body li code { white-space: nowrap; font-size: 0.86em; }
.post-body p code.long, .post-body li code.long { white-space: normal; overflow-wrap: anywhere; }
.post-body h2 { position: relative; margin-top: var(--s-8); font: 700 25px/1.25 var(--display); letter-spacing: -0.02em;
  color: var(--text); }
.post-body h2 + * { margin-top: var(--s-4); }
.post-body h3 { margin-top: var(--s-7); font: 650 19px/1.3 var(--display); color: var(--text); }
.post-body .anchor { position: absolute; right: 100%; padding-right: 0.35em; color: var(--text-3); text-decoration: none;
  font-weight: 500; opacity: 0; transition: opacity 0.12s; }
.post-body h2:hover .anchor, .post-body .anchor:focus-visible { opacity: 1; }

/* A note set apart from the text, such as a post's short version. */
.post-body .note { padding: var(--s-1) 0 var(--s-1) var(--s-5); border-left: 3px solid var(--text-3); color: var(--text-2); }
.post-body .note p + p { margin-top: var(--s-3); }

/* Code: a label and a copy button above, the code below scrolling on its own. */
.code { margin-left: 0; margin-right: 0; border-radius: 12px; background: var(--card-fill);
  box-shadow: 0 0 0 1px var(--card-ring); overflow: hidden; }
.code figcaption { display: flex; align-items: center; justify-content: space-between; min-height: 36px;
  padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--rule); font-size: var(--t-5);
  color: var(--text-3); letter-spacing: 0.02em; }
.code .copy { padding: 3px 9px; border: 0; border-radius: 6px; background: transparent; color: var(--text-3);
  font: 500 var(--t-5)/1.5 var(--font); cursor: pointer; }
.code .copy:hover { background: var(--quiet); color: var(--text); }
.code pre { margin: 0; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-4); overflow-x: auto; }
.code pre code { display: block; padding: 0; background: none; border-radius: 0; font: 13.5px/1.65 var(--mono);
  white-space: pre; color: var(--text); tab-size: 4; }
.hl-k { color: var(--hl-keyword); }
.hl-s { color: var(--hl-string); }
.hl-c { color: var(--hl-comment); font-style: italic; }
.hl-n { color: var(--hl-number); }
.hl-t { color: var(--hl-type); }
.hl-a { color: var(--hl-attr); }

/* After a post: what Yardlet is, in one line, and the way back. */
.post-end { margin-top: var(--s-8); padding-top: var(--s-6); border-top: 1px solid var(--rule); }
.about { display: grid; grid-template-columns: 44px 1fr; gap: var(--s-4); align-items: start; }
.about img { width: 44px; height: 44px; border-radius: 10px; }
.about p { color: var(--text-2); font-size: 15.5px; line-height: 1.6; }
.about p strong { color: var(--text); }
.about .links { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-3); }
.post-nav { display: flex; justify-content: space-between; margin-top: var(--s-6); font-size: var(--t-4); }
.post-nav a { color: var(--text-2); text-decoration: none; }
.post-nav a:hover { color: var(--text); text-decoration: underline; }

/* The list of posts. */
.blog-head h1 { font: 700 46px/1.08 var(--display); letter-spacing: -0.035em; color: var(--text); }
.blog-head p { margin-top: var(--s-4); font-size: 19px; line-height: 1.55; color: var(--text-2); }
.blog-head .feed { margin-top: var(--s-3); font-size: var(--t-4); }
.blog .post-list { margin-top: var(--s-7); padding-left: 0; list-style: none; border-top: 1px solid var(--rule); }
.post-list li + li { margin-top: 0; }
.post-list li { padding: var(--s-6) 0; border-bottom: 1px solid var(--rule); }
.post-list h2 { margin-top: var(--s-2); font: 700 26px/1.2 var(--display); letter-spacing: -0.02em; text-wrap: balance; }
.post-list h2 a { color: var(--text); text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.post-list p { margin-top: var(--s-3); color: var(--text-2); line-height: 1.6; }

@media (max-width: 640px) {
  .blog { padding: var(--s-6) var(--s-4) var(--s-8); }
  .post h1, .blog-head h1 { font-size: 32px; }
  .post .dek { font-size: 18px; }
  .post-body { font-size: 16.5px; line-height: 1.7; }
  .post-body h2 { margin-top: var(--s-7); font-size: 22px; }
  .post-body .anchor { display: none; }
  .code { margin-left: calc(-1 * var(--s-4)); margin-right: calc(-1 * var(--s-4)); border-radius: 0; box-shadow: none;
    border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
  .code pre code { font-size: 12.5px; }
  .post-list h2 { font-size: 22px; }
}