/* Writing and publication use the same text metrics and reading width. */
.post-layout { display: block; width: 100%; max-width: 880px; margin-inline: auto; }
.post-main { min-width: 0; }
.post-layout .post-aside { position: static; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line, #e5ebe9); }
:is(.post-body, .blog-editor-page .ql-editor) {
  display: flow-root;
  max-width: 880px;
  color: var(--ink, #0c1e2a);
  font-family: "Helvetica Neue", Helvetica, Arial, "Liberation Sans", sans-serif;
  font-size: 17px;
  font-weight: 400;
  line-height: 1.75;
  letter-spacing: -0.003em;
  text-align: left;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.post-body { width: 100%; }
:is(.post-body, .blog-editor-page .ql-editor) p { margin: 0 0 1.1em; padding: 0; }
:is(.post-body, .blog-editor-page .ql-editor) :is(h1, h2, h3, h4) {
  clear: both;
  color: var(--navy, #0c1e2a);
  font-family: inherit;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: inherit;
  margin: 1.5em 0 .5em;
  padding: 0;
}
:is(.post-body, .blog-editor-page .ql-editor) h1 { font-size: 2em; }
:is(.post-body, .blog-editor-page .ql-editor) h2 { font-size: 1.5em; }
:is(.post-body, .blog-editor-page .ql-editor) h3 { font-size: 1.25em; }
:is(.post-body, .blog-editor-page .ql-editor) h4 { font-size: 1.1em; }
:is(.post-body, .blog-editor-page .ql-editor) > :first-child { margin-top: 0; }
:is(.post-body, .blog-editor-page .ql-editor) a { color: var(--green, #1a8e73); text-decoration: underline; text-underline-offset: 2px; }
:is(.post-body, .blog-editor-page .ql-editor) :is(strong, b) { font-weight: 700; }
:is(.post-body, .blog-editor-page .ql-editor) blockquote {
  margin: 1.4em 0;
  padding: .4em 1.2em;
  border-left: 3px solid var(--green, #1a8e73);
  color: var(--ink-soft, #5c6b74);
  font-style: italic;
  background: var(--surface-alt, #f6f9f8);
}
:is(.post-body, .blog-editor-page .ql-editor) :is(ol, ul) { margin: 0 0 1.1em; padding-left: 1.6em; }
:is(.post-body, .blog-editor-page .ql-editor) li { margin: .35em 0; padding-left: 0; }
:is(.post-body, .blog-editor-page .ql-editor) ul > li { list-style-type: disc; }
:is(.post-body, .blog-editor-page .ql-editor) ol > li,
:is(.post-body, .blog-editor-page .ql-editor) li[data-list="ordered"] { list-style-type: decimal; }
:is(.post-body, .blog-editor-page .ql-editor) li[data-list="bullet"] { list-style-type: disc; }
.blog-editor-page .ql-editor li > .ql-ui { display: none; }
:is(.post-body, .blog-editor-page .ql-editor) .ql-align-center { text-align: center; }
:is(.post-body, .blog-editor-page .ql-editor) .ql-align-right { text-align: right; }
:is(.post-body, .blog-editor-page .ql-editor) .ql-align-justify { text-align: justify; }
:is(.post-body, .blog-editor-page .ql-editor) pre {
  margin: 0 0 1.1em;
  padding: 1em 1.2em;
  border-radius: var(--r-card, 4px);
  color: #fff;
  background: var(--navy, #0c1e2a);
  overflow: auto;
  font-family: var(--mono, monospace);
  font-size: .9em;
}
/* Image spacing is based on body text, including legacy photos inside headings. */
:is(.post-body, .blog-editor-page .ql-editor) img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.2em 0;
  border-radius: var(--r-card, 4px);
  font-size: 17px;
  vertical-align: middle;
}
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-left { display: inline; float: left; margin: .35em 1.4em .8em 0; max-width: 60%; }
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-right { display: inline; float: right; margin: .35em 0 .8em 1.4em; max-width: 60%; }
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-left:not([width]),
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-right:not([width]) { width: 45%; }
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-center { display: block; float: none; clear: both; margin: 1.2em auto; }
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-full { display: block; float: none; clear: both; margin: 1.2em 0; }
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-full:not([width]) { width: 100%; }
/* Free positions stay in text flow. Reserve the full margin box so the text
   also stays clear when an author types directly before a photograph. */
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-free {
  --blog-image-size: min(var(--blog-image-width, 320px), 100%);
  --blog-image-gap: min(1.4em, max(0px, (100% - var(--blog-image-size)) / 2));
  --blog-image-top: calc(.35em + var(--blog-image-y, 0px));
  display: inline;
  float: left;
  width: var(--blog-image-size);
  max-width: 100%;
  height: auto;
  margin: var(--blog-image-top) var(--blog-image-gap) .8em calc((100% - var(--blog-image-size)) * var(--blog-image-x, 0));
  shape-outside: none;
}
:is(.post-body, .blog-editor-page .ql-editor) img.ql-img-free[data-image-side="right"] {
  float: right;
  margin-right: calc((100% - var(--blog-image-size)) * (1 - var(--blog-image-x, 0)));
  margin-left: var(--blog-image-gap);
}
:is(.post-body, .blog-editor-page .ql-editor) :is(h2, h3) { clear: both; }
@media (max-width: 560px) {
  :is(.post-body, .blog-editor-page .ql-editor) img.ql-img-left,
  :is(.post-body, .blog-editor-page .ql-editor) img.ql-img-right {
    float: none; display: block; max-width: 100%; margin: 1.2em auto;
  }
  :is(.post-body, .blog-editor-page .ql-editor) img.ql-img-left:not([width]),
  :is(.post-body, .blog-editor-page .ql-editor) img.ql-img-right:not([width]) { width: 100%; }
  /* Preserve horizontal placement on phones, with prose below the photo
     instead of a narrow column beside it. Stored coordinates stay unchanged. */
  :is(.post-body, .blog-editor-page .ql-editor) img.ql-img-free,
  :is(.post-body, .blog-editor-page .ql-editor) img.ql-img-free[data-image-side="right"] {
    float: none;
    clear: both;
    display: block;
    margin: calc(.35em + min(var(--blog-image-y, 0px), 60px)) 0 .8em calc((100% - var(--blog-image-size)) * var(--blog-image-x, 0));
    shape-outside: none;
  }
}