:where(.lexxy-content) {
  --lexxy-content-margin: 1.25rem;

  ul {
    list-style-position: outside;
    list-style-type: disc;
    padding-inline-start: 1.625em;
    margin-inline-start: 1.25em;

    ul {
      list-style-type: circle;

      ul {
        list-style-type: square;
      }
    }
  }

  ol {
    list-style-position: outside;
    list-style-type: decimal;
    padding-inline-start: 1.625em;
    margin-inline-start: 1.5em;

    ol {
      list-style-type: lower-alpha;

      ol {
        list-style-type: lower-roman;
      }
    }
  }

  li {
    padding-inline-start: 0.375em;
    margin-block: 0.5em;
  }

  a {
    text-decoration: underline;
    font-weight: 500;
  }

  strong, b {
    font-weight: 600;
  }

  h1, h2, h3, h4, h5, h6 {
    line-height: 1.5;
  }

  h1 { font-size: 1.75em; }
  h2 { font-size: 1.6em; }
  h3 { font-size: 1.25em; }
  h4 { font-size: 1em; }
  h5 { font-size: 0.875em; }
  h6 { font-size: 0.75em; }

  h1, h2, h3, h4, h5, h6 {
    text-wrap: wrap;
    hyphens: none;
    margin-block-end: calc(var(--lexxy-content-margin) * 0.75);
  }

  * + h1, * + h2 {
    margin-block-start: calc(var(--lexxy-content-margin) * 1.75);
  }

  * + h3 {
    margin-block-start: calc(var(--lexxy-content-margin) * 1.5);
  }

  * + h4, * + h5, * + h6 {
    margin-block-start: calc(var(--lexxy-content-margin) * 1.25);
  }

  :is(figure, action-text-attachment) + :is(h1, h2, h3, h4, h5, h6) {
    margin-block-start: 0;
  }

  .lexxy-content__table-wrapper,
  & > table {
    margin-block: calc(var(--lexxy-content-margin) * 1.5);
  }

  blockquote {
    padding-block: 0.375em;
  }

  /* Obsidian-style callouts. Lives here rather than in blogs.css so the editor
     and the published post share one definition. Colours come from the
     [data-callout] mapping at the end of this file. */
  aside[data-callout] {
    display: block;
    margin-block: 0 var(--lexxy-content-margin);
    border-left: 0.25em solid var(--callout-color);
    background-color: color-mix(in srgb, var(--callout-color) 8%, transparent);
    padding: 0.75em 1em;
    border-radius: 0 0.25em 0.25em 0;

    [data-callout-title] {
      color: var(--callout-color);
      font-weight: 600;
    }

    > :last-child {
      margin-block-end: 0;
    }
  }

  /* Footnotes. Also shared between the editor and the published post. */
  /* Size only. The anchor inside is left alone so the marker picks up Lexxy's own
     link styling, and a plain <sup> already raises itself. Anything more gets in the
     caret's way in the editor: line-height: 0 leaves it no height to draw, and a
     background, padding or position: relative covers or paints over its spot. */
  sup[data-footnote-ref] {
    font-size: 0.75em;
  }

  /* The number is a counter on the note's own first line rather than a list
     marker, so nothing is indented and a wrapped note lines up under its own
     text. The <ol> is still an <ol>, so anywhere this CSS does not reach (feed
     readers, mail clients) falls back to native numbering. */
  ol[data-footnotes] {
    margin-block: calc(var(--lexxy-content-margin) * 2) 0;
    padding-inline-start: 0;
    list-style: none;
    counter-reset: footnote;
    font-size: 0.875em;

    li {
      counter-increment: footnote;

      > :first-child::before {
        content: counter(footnote) ". ";
      }

      > :last-child {
        margin-block-end: 0;
      }
    }
  }

  details {
    margin-block: 0 var(--lexxy-content-margin);
  }

  summary {
    cursor: pointer;
  }

  summary::marker {
    color: var(--color-text-light);
    font-size: 1.25em;
  }

  details[open] summary {
    margin-block-end: var(--lexxy-content-margin);
  }

  details > :not(summary) {
    margin-inline-start: 1.25em;
  }

  /* Legacy Trix content (pre-Lexxy posts use <div> instead of <p>) */
  div + blockquote,
  div + pre {
    margin: calc(var(--lexxy-content-margin) / 2) 0;
  }
  blockquote + pre {
    margin: 0;
  }
  div + :is(ul, ol) {
    margin-block: var(--lexxy-content-margin);
  }

  br + :is(action-text-attachment, .attachment) {
    margin-top: 0;
  }

  :is(action-text-attachment, .attachment) + br {
    display: none;
  }

  pre,
  code[data-language] {
    margin: calc(var(--lexxy-content-margin) * 1.5) 0;
    padding: 1.5ch;
    border-radius: 0.5em;
    font-weight: normal;
    overflow-wrap: break-word;
    overflow-x: auto;
    line-height: 1.5;

    ol, ul {
      padding: 0;
      margin: 0;
    }

    li {
      padding: 0;
      margin: 0;
    }
  }

  pre > code[data-language] {
    margin: 0;
  }

  /* Lexxy caps content images at 32rem. With inline-size: auto that acts as a
     width limit, so anything squarer than 9:8 renders narrower than the column
     and the edge goes ragged. 48rem is the widest column we offer, so at this
     height only images taller than 2:3 are still narrowed. Blogs can override
     with --content-image-max-height (none for no cap at all).
     Keep any cap paired with inline-size: auto: against a fixed width it
     squashes the image instead of narrowing it, hence mobile clearing it. */
  img, video {
    max-block-size: var(--content-image-max-height, 48rem);
  }

  @media (max-width: 640px) {
    img {
      width: 100%;
      height: auto;
      max-block-size: none;
    }
  }
}

/* Callout colours, following Obsidian's grouping: its aliases and related types
   share a colour. Kept outside .lexxy-content so the editor's type picker, which
   sits in the toolbar rather than the content, can reuse the same swatches. */
[data-callout] { --callout-color: var(--color-text-muted, currentColor); }
[data-callout="note"],
[data-callout="info"],
[data-callout="todo"] { --callout-color: #086ddd; }
[data-callout="abstract"],
[data-callout="tip"] { --callout-color: #00bfbc; }
[data-callout="success"] { --callout-color: #08b94e; }
[data-callout="question"],
[data-callout="warning"] { --callout-color: #ec7500; }
[data-callout="failure"],
[data-callout="danger"],
[data-callout="bug"] { --callout-color: #e93147; }
[data-callout="example"] { --callout-color: #7852ee; }
[data-callout="quote"] { --callout-color: #9e9e9e; }