:root
{
    /* Typefaces */
    --font-dm: "DM Sans", sans-serif;
    --font-mono: "JetBrainsMono", monospace;
    --font-inter: "InterTight", sans-serif;
    --font-archivo: "Archivo", sans-serif;
    --font-garamond: "EB Garamond", serif;

    /* Theme - Colors */
    --article-image-border: rgba(128, 128, 128, 1);

    /* Theme - Sizing */
    --article-width-full:   45vw;
    --article-width-medium: 55vw;
    --article-width-small:  65vw;

    /* Theme - Fonts */
    --article-title-font: var(--font-archivo);
    --article-body-font: var(--font-archivo);

    --article-title-font-size: 40px;
    --article-body-font-size: 20px;
}

.article
{
    width:100%;
}

.article .heading
{
    font-family: var(--article-title-font);
    margin-bottom:16px;
}
.article .heading h1
{
    font-weight:800;
    font-size:var(--article-title-font-size);
}
.article .heading .metadata
{
    display:flex;
}
.article .heading .metadata span
{
    padding-right:1ch;
}
.article .heading .metadata span + span:before
{
    content: "|";
    padding-right:1ch;
}
.article .heading .hero-image
{
    display:flex;
    flex-direction: column;

    margin-top:1ch;
    margin-bottom:1ch;

    border:1px solid rgba(64, 64, 64, 1);
}
.article .heading .hero-image img
{
    display:block;

    aspect-ratio:16/9;
    width:100%;

    object-fit: cover;

    margin-left:auto;
    margin-right:auto;

    box-sizing:border-box;
}
.article .heading .hero-image .caption
{
    display:block;
    width:100%;

    font-size:16px;
    color:rgba(196, 196, 196, 1);

    padding:1ch;
}

.article .body
{
    display:flex;
}
.article .body .text
{
    max-width:var(--article-width-full);
}
.article .body .text p
{
    font-family: var(--article-body-font);
    font-size: var(--article-body-font-size);
    font-weight:400;
    text-align:justify;
}
.article .body .text p + p
{
    margin-top:1.5ch;
}

.article .body .text .refs
{
    margin-top:2ch;
}
.article .body .text .refs ol
{
    list-style-position: inside;
}