.forfolia-content {
  /* Override any of these to blend the block into your own design; leave them alone and it
     renders exactly as the editor showed it. --forfolia-font needs the webfont loaded — see
     the docs snippet — otherwise the block falls back to the system sans. */
  --forfolia-font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, sans-serif;
  /* The slots the editor's font control writes to (data-font="serif" and friends). Remap one
     and every span an author marked with it follows, here and on the page. */
  --forfolia-font-sans: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --forfolia-font-serif: Georgia, 'Times New Roman', Times, serif;
  --forfolia-font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;
  --forfolia-size: 16px;
  --forfolia-leading: 1.6;
  --forfolia-ink: rgb(23 23 20);
  --forfolia-link: rgb(37 99 235);
  --forfolia-rule: rgb(0 0 0 / 0.12);
  --forfolia-wash: rgb(0 0 0 / 0.05);

  font-family: var(--forfolia-font);
  font-size: var(--forfolia-size);
  line-height: var(--forfolia-leading);
  color: var(--forfolia-ink);
  text-align: left;
  overflow-wrap: break-word;
}

/* Everything below is sized in em against the block, never in rem, so the host page's root
   font-size cannot rescale the content. Every element the editor can emit sets its own margin,
   padding and list-style, so neither a reset (Tailwind preflight) nor a stray host rule on a
   bare tag can reach in and change it. */
.forfolia-content *, .forfolia-content *::before, .forfolia-content *::after { box-sizing: border-box; }
.forfolia-content > :first-child { margin-top: 0; }
.forfolia-content > :last-child { margin-bottom: 0; }
.forfolia-content p { margin: 0.4em 0; }

.forfolia-content h1 { font-size: 1.6em; font-weight: 700; line-height: 1.25; margin: 0.6em 0 0.3em; }
.forfolia-content h2 { font-size: 1.3em; font-weight: 700; line-height: 1.3; margin: 0.6em 0 0.3em; }
.forfolia-content h3 { font-size: 1.1em; font-weight: 700; line-height: 1.35; margin: 0.6em 0 0.3em; }
.forfolia-content h4 { font-size: 1em; font-weight: 700; line-height: 1.4; margin: 0.6em 0 0.3em; }
.forfolia-content strong, .forfolia-content b { font-weight: 700; }
.forfolia-content em, .forfolia-content i { font-style: italic; }
.forfolia-content u { text-decoration: underline; }
.forfolia-content s { text-decoration: line-through; }
/* Declared the way normalize and Tailwind preflight do it — position plus an offset, not
   vertical-align. The dashboard loads preflight, which puts position/top/bottom on these on
   top of whatever we set; pinning the whole mechanism is what stops the editor raising them
   twice as far as the customer's page, which has no preflight, ever will. */
.forfolia-content sub, .forfolia-content sup { font-size: 0.75em; line-height: 0; position: relative; vertical-align: baseline; }
.forfolia-content sup { top: -0.5em; bottom: auto; }
.forfolia-content sub { bottom: -0.25em; top: auto; }
.forfolia-content mark { border-radius: 0.2em; padding: 0 0.1em; color: inherit; }
.forfolia-content a { color: var(--forfolia-link); text-decoration: underline; }

.forfolia-content ul { list-style: disc; padding-left: 1.4em; margin: 0.4em 0; }
.forfolia-content ol { list-style: decimal; padding-left: 1.4em; margin: 0.4em 0; }
.forfolia-content li { margin: 0; padding: 0; }
.forfolia-content li > p { margin: 0.2em 0; }
.forfolia-content ul ul { list-style: circle; }
.forfolia-content ul ul ul { list-style: square; }
.forfolia-content ul[data-type='taskList'] { list-style: none; padding-left: 0.2em; }
.forfolia-content ul[data-type='taskList'] li { display: flex; gap: 0.5em; align-items: flex-start; }
.forfolia-content ul[data-type='taskList'] li > label { flex: 0 0 auto; margin: 0.35em 0 0; }
.forfolia-content ul[data-type='taskList'] li > div { flex: 1 1 auto; }
/* The editor writes data-checked="true"/"false"; the publish-time serializer writes a bare
   data-checked and omits it entirely when unchecked. Presence-minus-"false" is the one test
   that reads both the same way — matching on "true" alone left every completed item unstruck
   on the delivered page. */
.forfolia-content ul[data-type='taskList'] li[data-checked]:not([data-checked='false']) > div { opacity: 0.6; text-decoration: line-through; }
/* Preflight zeroes input margins in the dashboard; a page without it gets the browser's own
   checkbox margin and the row shifts out of line with the text. */
.forfolia-content input[type='checkbox'] { margin: 0; padding: 0; }

.forfolia-content blockquote { border-left: 3px solid rgb(0 0 0 / 0.15); padding: 0 0 0 0.8em; color: rgb(0 0 0 / 0.6); margin: 0.5em 0; font-style: normal; }
.forfolia-content blockquote::before, .forfolia-content blockquote::after { content: none; }
.forfolia-content hr { border: 0; border-top: 1px solid var(--forfolia-rule); margin: 0.8em 0; height: 0; }

.forfolia-content pre { background: var(--forfolia-wash); color: inherit; padding: 0.6em 0.8em; border-radius: 0.5em; font-family: var(--forfolia-font-mono); font-size: 0.9em; line-height: 1.5; margin: 0.5em 0; overflow-x: auto; white-space: pre; }
.forfolia-content pre code { background: none; padding: 0; font-size: inherit; font-family: inherit; border-radius: 0; }
.forfolia-content code { background: rgb(0 0 0 / 0.06); font-family: var(--forfolia-font-mono); padding: 0.1em 0.3em; border-radius: 0.3em; font-size: 0.9em; }

/* Code block tokens. The publish-time renderer walks lowlight's tree into real hljs-* spans
   (codeBlock.ts), so these colour the delivered page exactly as they colour the editor. */
.forfolia-content .hljs-comment, .forfolia-content .hljs-quote { color: rgb(107 114 128); font-style: italic; }
.forfolia-content .hljs-keyword, .forfolia-content .hljs-selector-tag, .forfolia-content .hljs-built_in { color: rgb(126 34 206); }
.forfolia-content .hljs-string, .forfolia-content .hljs-attr, .forfolia-content .hljs-template-tag { color: rgb(21 128 61); }
.forfolia-content .hljs-number, .forfolia-content .hljs-literal { color: rgb(180 83 9); }
.forfolia-content .hljs-title, .forfolia-content .hljs-name, .forfolia-content .hljs-tag { color: rgb(29 78 216); }
.forfolia-content .hljs-attribute, .forfolia-content .hljs-variable, .forfolia-content .hljs-selector-class { color: rgb(190 24 93); }

/* A chosen image width ships as an inline style; these keep it inside the column. */
.forfolia-content img { display: block; max-width: 100%; height: auto; border-radius: 0.4em; margin: 0.4em 0; }
.forfolia-content div[data-youtube-video] { margin: 0.6em 0; max-width: 100%; }
.forfolia-content div[data-youtube-video] iframe { display: block; width: 100%; max-width: 640px; aspect-ratio: 16 / 9; height: auto; border-radius: 0.4em; border: 0; }

.forfolia-content table { border-collapse: collapse; border-spacing: 0; width: 100%; margin: 0.6em 0; table-layout: fixed; font-size: inherit; }
.forfolia-content th, .forfolia-content td { border: 1px solid var(--forfolia-rule); padding: 0.35em 0.5em; vertical-align: top; min-width: 3em; text-align: left; }
.forfolia-content th { font-weight: 600; background: rgb(0 0 0 / 0.03); }