/* PROSE
   Text styles for long-form content written in markdown, like blog posts. Add the prose
   class to the element that holds the rendered markdown. Every element markdown can produce
   has a style here, and every value comes from tokens.css.

   Style          Element                Size       Weight  Line height
   Heading 2      h2                     L   24px   L 600   S 1.2
   Heading 3      h3                     M   20px   L 600   S 1.2
   Heading 4      h4, h5, h6             S   18px   L 600   M 1.4
   Body           p, li, blockquote      S   18px   M 400   L 1.6
   Small          footnotes, table,      XS  16px   M 400   L 1.6
                  figcaption
   Code block     pre                    2XS 14px   M 400   L 1.6   mono
   Inline code    code, kbd              0.875em    M 400   inherit mono

   The page title (h1) belongs to the page layout, not the prose, so it isn't styled here */

.prose {
    font-family: var(--font-family-body);
    font-size: var(--font-size-s);
    font-weight: var(--font-weight-m);
    line-height: var(--line-height-l);
    letter-spacing: var(--letter-spacing-m);
    color: var(--color-text-primary);
}

/* SPACING
   Space only goes on top of each element, so it's never doubled up between them */

.prose > * {
    margin-top: 0;
    margin-bottom: 0;
}

.prose > * + * {
    margin-top: 3rem;
}

/* More space above a heading than below, so it groups with the text it introduces */
.prose > * + h2 {
    margin-top: 7rem;
}

.prose > * + :is(h3, h4, h5, h6) {
    margin-top: 5rem;
}

.prose > :is(h2, h3, h4, h5, h6) + * {
    margin-top: 2rem;
}

/* HEADINGS */

.prose :is(h2, h3, h4, h5, h6) {
    font-family: var(--font-family-body);
    font-weight: var(--font-weight-l);
    letter-spacing: var(--letter-spacing-s);
    color: var(--color-text-primary);
    text-wrap: balance;
}

.prose h2 {
    font-size: var(--font-size-l);
    line-height: var(--line-height-s);
}

.prose h3 {
    font-size: var(--font-size-m);
    line-height: var(--line-height-s);
}

/* h5 and h6 are rare enough in posts that they share the h4 style */
.prose :is(h4, h5, h6) {
    font-size: var(--font-size-s);
    line-height: var(--line-height-m);
}

/* BODY TEXT */

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

.prose strong {
    font-weight: var(--font-weight-l);
}

.prose em {
    font-style: italic;
}

.prose s {
    color: var(--color-text-secondary);
}

.prose mark {
    background: var(--color-surface-tertiary);
    color: inherit;
    padding: 0 0.25em;
    border-radius: 0.5rem;
}

.prose sub,
.prose sup {
    font-size: 0.75em;
    line-height: 0;
}

/* LINKS */

.prose a {
    color: inherit;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
}

.prose a:hover {
    color: var(--color-accent-text);
}

.prose a:focus-visible {
    outline: 2px solid var(--color-accent-text);
    outline-offset: 2px;
    border-radius: 2px;
}

/* LISTS
   Loose lists (items separated by a blank line in markdown) wrap each item in a p,
   which gets the same spacing as the gap between items */

.prose ul {
    list-style: disc;
    padding-left: 3rem;
}

.prose ol {
    list-style: decimal;
    padding-left: 3rem;
}

.prose ul ul {
    list-style: circle;
}

.prose ol ol {
    list-style: lower-alpha;
}

.prose li > p {
    margin: 0;
}

.prose li + li,
.prose li > ul,
.prose li > ol,
.prose li > p + * {
    margin-top: 1rem;
}

.prose li::marker {
    color: var(--color-text-secondary);
}

/* QUOTES */

.prose blockquote {
    margin-left: 0;
    margin-right: 0;
    padding-left: 3rem;
    border-left: 3px solid var(--color-accent);
    color: var(--color-text-secondary);
}

.prose blockquote > * {
    margin: 0;
}

.prose blockquote > * + * {
    margin-top: 2rem;
}

/* CODE
   Inline code is sized in em so it stays in proportion inside headings, body and footnotes */

.prose code,
.prose kbd {
    font-family: var(--font-family-mono);
    font-size: 0.875em;
    font-weight: var(--font-weight-m);
    letter-spacing: 0;
    padding: 0.1em 0.4em;
    border: 1px solid var(--color-border);
    border-radius: 0.5rem;
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
}

.prose kbd {
    border-bottom-width: 2px;
}

.prose pre {
    font-family: var(--font-family-mono);
    font-size: var(--font-size-2xs);
    line-height: var(--line-height-l);
    letter-spacing: 0;
    padding: 2rem 2.5rem;
    border: 1px solid var(--color-border);
    border-radius: 1rem;
    background: var(--color-surface-secondary);
    color: var(--color-text-primary);
    overflow-x: auto;
    tab-size: 4;
}

.prose pre code {
    font-size: inherit;
    padding: 0;
    border: none;
    border-radius: 0;
    background: none;
}

/* TABLES
   Wide tables scroll sideways rather than squashing the columns */

.prose table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-l);
}

.prose th,
.prose td {
    padding: 1rem 2rem 1rem 0;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: top;
}

.prose th {
    font-weight: var(--font-weight-l);
}

.prose :is(th, td):last-child {
    padding-right: 0;
}

/* IMAGES AND FIGURES */

.prose img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 1rem;
    margin: 0 auto;
}

.prose figure {
    margin-left: 0;
    margin-right: 0;
}

.prose figcaption {
    margin-top: 1.5rem;
    font-size: var(--font-size-xs);
    line-height: var(--line-height-l);
    color: var(--color-text-secondary);
}

/* DIVIDERS */

/* Browsers centre hr with auto side margins, which shrinks it to nothing in a grid */
.prose hr {
    margin-left: 0;
    margin-right: 0;
    border: none;
    border-top: 1px solid var(--color-border);
}

.prose > * + hr,
.prose > hr + * {
    margin-top: 6rem;
}

/* FOOTNOTES
   [^1] in markdown. The reference is a small superscript link, and the notes are listed
   at the bottom of the post after a divider */

.prose .footnote-ref {
    font-size: 0.75em;
    line-height: 0;
    margin-left: 0.1em;
}

.prose .footnote-ref a {
    text-decoration: none;
}

.prose .footnote-ref a:hover {
    text-decoration: underline;
}

.prose .footnotes {
    margin-top: 2rem;
    font-size: var(--font-size-xs);
    color: var(--color-text-secondary);
}

.prose .footnotes-list {
    padding-left: 3rem;
}

.prose .footnote-backref {
    margin-left: 0.5rem;
    text-decoration: none;
}