/* Prose — organism. Spec: component-specs/prose.md */

.prose {
    --block-spacing: 20px;
    --block-spacing-small: 8px;
    --list-inset: 24px;
    --figure-margin: 20px;
    --h2-bottom-margin: 12px;
    --h3-bottom-margin: 6px;
    --h4-bottom-margin: 10px;

    max-width: var(--prose-max-width, 624px);
    font-size: var(--text-regular-size);
    line-height: var(--text-regular-line-height);
    font-family: var(--font-family-sans);
    color: var(--text-secondary);
}

.prose * {
    word-break: break-word;
}

/* ---------- Block rhythm ---------- */
.prose > * + * {
    margin-top: var(--block-spacing);
}

.prose > aside,
.prose > div:not([data-scroll-container], .markdown-actions) {
    margin-block: 36px;
}

.prose > p + ul,
.prose > p + ol {
    margin-top: 12px;
}

.prose > p:empty {
    display: none;
}

.prose > * + h2 {
    margin-top: 56px;
}

.prose > * + h3 {
    margin-top: 32px;
}

.prose > * + h4 {
    margin-top: 28px;
}

.prose h2 + h3 {
    margin-top: 24px;
}

.prose h2 + p {
    margin-top: var(--h2-bottom-margin);
}

.prose h3 + p {
    margin-top: var(--h3-bottom-margin);
}

.prose h4 + p {
    margin-top: var(--h4-bottom-margin);
}

/* ---------- Headings — the register ---------- */
.prose h1,
.prose h2,
.prose h3,
.prose h4 {
    text-wrap: balance;
}

.prose p,
.prose li {
    text-wrap: pretty;
}

.page-lede {
    color: var(--text-tertiary);
    text-wrap: pretty;
}

.page-cover {
    border-radius: var(--radius-8);
    width: 100%;
    height: auto;
    margin-bottom: 32px;
    display: block;
}

[data-theme='light'] .page-cover {
    border: var(--border-hairline) solid var(--color-border-tertiary);
}

.prose h1 {
    font-family: var(--heading-page-family);
    font-size: var(--heading-page-size);
    line-height: var(--heading-page-line-height);
    letter-spacing: var(--heading-page-letter-spacing);
    font-weight: var(--heading-page-weight);
}

.prose h2 {
    font-family: var(--heading-section-family);
    font-size: var(--heading-section-size);
    line-height: var(--heading-section-line-height);
    letter-spacing: var(--heading-section-letter-spacing);
    font-weight: var(--heading-section-weight);
    margin-bottom: var(--h2-bottom-margin);
}

.prose h3,
.prose h4 {
    font-family: var(--heading-sub-family);
    font-size: var(--heading-sub-size);
    line-height: var(--heading-sub-line-height);
    letter-spacing: var(--heading-sub-letter-spacing);
    font-weight: var(--heading-sub-weight);
}

.prose h3 {
    margin-bottom: var(--h3-bottom-margin);
}

.prose h4 {
    margin-bottom: var(--h4-bottom-margin);
}

/* ---------- Heading permalinks ---------- */
.prose-heading-anchor {
    display: inline-block;
    margin-left: 8px;
    color: var(--text-quaternary);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.1s ease;
}

.prose h2:hover .prose-heading-anchor,
.prose h2:focus-within .prose-heading-anchor,
.prose h3:hover .prose-heading-anchor,
.prose h3:focus-within .prose-heading-anchor,
.prose h4:hover .prose-heading-anchor,
.prose h4:focus-within .prose-heading-anchor {
    opacity: 1;
}

.prose strong,
.prose b {
    color: var(--text-primary);
    font-weight: var(--font-weight-semibold);
}

/* ---------- Lists — custom counters ---------- */
.prose ul,
.prose ol {
    padding-left: var(--list-inset);
    list-style: none;
}

.prose ul > li {
    position: relative;
    margin-bottom: 0;
}

.prose ol > li {
    position: relative;
    margin-bottom: 0;
}

.prose ul > li::before {
    content: '\2022';
    position: absolute;
    right: calc(100% + 0.0625 * var(--list-inset));
    min-width: var(--list-inset);
    text-align: center;
}

.prose ol {
    counter-reset: prose-ol;
}

.prose ol > li {
    counter-increment: prose-ol;
}

.prose ol > li::before {
    content: counter(prose-ol) '.';
    position: absolute;
    right: calc(100% + 0.25 * var(--list-inset));
    min-width: var(--list-inset);
    text-align: end;
    font-variant-numeric: tabular-nums;
}

.prose li + li {
    margin-top: var(--block-spacing-small);
}

.prose ul ul,
.prose ol ol,
.prose ul ol,
.prose ol ul {
    margin-top: var(--block-spacing-small);
}

/* ---------- Figures ---------- */
.prose figure {
    margin-block: var(--figure-margin);
}

.prose figure img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.prose figcaption {
    font-size: var(--text-micro-size);
    line-height: var(--text-micro-line-height);
    color: var(--text-tertiary);
    margin-top: 13px;
    text-align: center;
    text-wrap: balance;
    max-width: var(--prose-max-width, 624px);
    margin-inline: auto;
}

/* ---------- Blockquote as display quote ---------- */
.prose blockquote {
    font: var(--font-weight-medium) 1.5rem/1.33 var(--font-family-sans);
    letter-spacing: -0.02em;
    color: var(--text-primary);
    quotes: '\201C' '\201D' '\2018' '\2019';
}

.prose blockquote > p {
    text-indent: -0.5em;
}

.prose blockquote > p::before {
    content: open-quote;
}

.prose blockquote > p::after {
    content: close-quote;
}

.prose blockquote footer,
.prose blockquote figcaption {
    margin-top: 12px;
    font-size: var(--text-small-size);
    color: var(--text-tertiary);
    font-weight: var(--font-weight-normal);
    text-align: left;
}

.prose [data-wide='true'] {
    max-width: none;
}