/* Shared by public articles and the isolated editor preview. */
.blog-content { display: flow-root; overflow-wrap: anywhere; }
.blog-content img { max-width: 100%; height: auto; }
.blog-content > p > img { display: block; margin: 1.5rem auto; max-width: 70%; }
.blog-content pre { overflow-x: auto; }
.blog-content table { display: block; overflow-x: auto; }
.blog-content .blog-media {
  display: grid;
  gap: 1rem;
  margin: 1.75rem 0;
  clear: both;
}
.blog-content .blog-media figure { margin: 0; min-width: 0; }
.blog-content .blog-media img {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
  margin: 0;
  border-radius: 6px;
}
.blog-content .blog-media figcaption {
  color: var(--d2-parchment-dim, #c4b59c);
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: center;
  margin-top: .6rem;
  white-space: pre-line;
}
.blog-content .blog-media--center { width: 70%; margin-inline: auto; }
.blog-content .blog-media--columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.blog-content .blog-media--columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.blog-content .blog-media--cover img { aspect-ratio: 4 / 3; object-fit: cover; }
.blog-content .blog-media--left { float: left; width: 44%; margin: .5rem 1.5rem 1rem 0; }
.blog-content .blog-media--right { float: right; width: 44%; margin: .5rem 0 1rem 1.5rem; }
.blog-content h1, .blog-content h2, .blog-content h3, .blog-content hr { clear: both; }
@media (max-width: 575px) {
  .blog-content .blog-media--columns-2, .blog-content .blog-media--columns-3 { grid-template-columns: 1fr; }
  .blog-content .blog-media--left, .blog-content .blog-media--right, .blog-content .blog-media--center {
    float: none; width: 100%; margin: 1.5rem 0;
  }
  .blog-content > p > img { max-width: 100%; }
}

/* Reader comments, outside the article's floated media. */
.blog-comments { clear: both; border-top: 1px solid #55452f; padding-top: 1.5rem; }
.blog-comments .is-error { color: #ffb4a8; }
.blog-comments .small, .blog-comment time { color: #c4b59c; }
.blog-comment { padding: 1.25rem 0; border-bottom: 1px solid #55452f; }
.blog-comment-header { display: flex; align-items: center; flex-wrap: wrap; gap: .75rem; }
.blog-comment-header strong { color: #e5c48a; overflow-wrap: anywhere; }
.blog-comment time { font-size: .8rem; }
.blog-comment-header button { margin-left: auto; color: #f4a49a; }
.blog-comment-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: .75rem 0 0; }
.blog-comments textarea { background: #15110e; color: #eee3cf; border-color: #65543c; }
.blog-comments textarea:focus { background: #15110e; color: #eee3cf; border-color: #c9aa71; }

/* Admin workspace. */
.blog-admin { max-width: 1600px; }
.blog-editor-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.blog-panel { min-width: 0; padding: 1.5rem; background: var(--d2-bg-panel, #15110e); border: 1px solid #55452f; border-radius: 10px; }
.blog-admin .form-control, .blog-admin .form-select { color: #eee3cf; background-color: #0e0c0a; border-color: #65543c; }
.blog-admin .form-control:focus, .blog-admin .form-select:focus { border-color: #c9aa71; box-shadow: 0 0 0 .2rem #c9aa7126; }
.blog-admin #post-body { font-family: ui-monospace, monospace; font-size: .9rem; resize: vertical; }
.blog-admin .small { color: #c4b59c; }
.blog-admin button { white-space: normal; }
.blog-admin .btn-outline-primary { color: #e5c48a; border-color: #a18453; }
.blog-admin .btn-outline-primary:hover { color: #16100a; background: #e5c48a; }
.blog-admin .btn-outline-danger { color: #f4a49a; border-color: #9b5750; }
.blog-admin .btn-outline-danger:hover { color: #fff; background: #853c33; }
.blog-admin .btn:disabled { opacity: .5; }
.blog-dropzone { padding: 1rem; border: 1px dashed #a18453; border-radius: 8px; }
.blog-dropzone.is-dragging { background: #c9aa7126; border-style: solid; }
.blog-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(125px, 1fr)); gap: .75rem; }
.blog-library-card { border: 1px solid #65543c; padding: .5rem; border-radius: 6px; min-width: 0; }
.blog-library-card:has(input:checked) { border-color: #e5c48a; background: #c9aa7126; }
.blog-library-card label { display: block; cursor: pointer; overflow-wrap: anywhere; }
.blog-library-card img { display: block; width: 100%; height: 90px; object-fit: contain; margin: .5rem 0; }
.blog-library-card .btn { font-size: .75rem; }
.blog-block { border: 1px solid #65543c; border-radius: 8px; padding: 1rem; margin-top: 1rem; min-width: 0; }
.blog-block legend { float: none; width: auto; font-size: 1rem; padding: 0 .3rem; }
.blog-block-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: .75rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid #55452f; }
.blog-block-item img { width: 76px; height: 76px; object-fit: contain; }
.blog-block-item label { display: block; font-size: .8rem; }
.blog-block-item input, .blog-block-item textarea { margin-bottom: .5rem; }
.blog-preview-panel { position: sticky; top: 1rem; }
.blog-preview-frame { display: block; border: 0; width: 100%; height: 75vh; background: #0e0b08; margin-inline: auto; }
.blog-preview-frame.is-mobile { width: 375px; max-width: 100%; }
.blog-admin [aria-pressed="true"] { background: #c9aa71; color: #16100a; }
.blog-post-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding: 1rem 0; border-bottom: 1px solid #55452f; }
.blog-post-row h3 { overflow-wrap: anywhere; }
.blog-admin .is-error { color: #ffb4a8; }
@media (max-width: 991px) {
  .blog-editor-grid { grid-template-columns: 1fr; }
  .blog-preview-panel { position: static; }
  .blog-panel { padding: 1rem; }
}