/* A note "represents a short written work typically less than a single
 * paragraph in length."
 *     — https://www.w3.org/TR/activitystreams-vocabulary/#dfn-note
 */

@import "base.css";
@import "variables.css";
@import "unfurl.css";

/* Layout */

article {
    max-width: 60ch;
    margin: auto;
    /* padding: 0.25rem 1rem; */
}

@media print {
    article {
        max-width: 90%;
    }
}

article > .note-contents {
    margin: 0 1rem;
}

@media (max-width: 40rem) {
    blockquote, dl, dd {
        margin-left: 0;
    }
    dt {
        font-weight: bold;
    }
}

@media (min-height: 15rem) and (min-width: 45rem) {
    html {
        min-height: 60vh;
        display: flex;
        align-items: center;
        justify-content: center;
        /* padding: 1rem; */
    }

    footer {
        margin: 1em 0;
    }
}

/* Type */

html {
    font-family: var(--page-font-stack);
    font-weight: var(--page-font-weight);
    font-size: 125%;
    font-size-adjust: 0.528;
    font-size-adjust: from-font;
    text-underline-position: from-font;
}

@media (min-width: 700px) {
    html {
        font-size: 150%;
    }
}

@media (min-width: 900px) {
    html {
        font-size: 175%;
    }
}

code, pre {
    font-family: var(--code-font-stack);
    font-weight: var(--code-font-weight);
}

figcaption {
    margin-block-start: 0;
}

figure > * {
    width: 100%;
    height: auto;
}

iframe {
    width: 80vw;
}

figure > blockquote {
    width: auto;
}

figure > a:has(> img:only-child), figure > picture {
    display: flex;
    align-items: center;
    justify-content: center;
}

figure > :is(img, picture, video),
figure > :not(tess-carousel) > :is(img, picture, video) {
    max-height: 70vh;
}

figure > section.gallery > img,
figure > blockquote iframe,
figure > blockquote img,
figure > blockquote video,
figure > picture img {
    max-width: 100%;
    width: 100%;
}

figure > blockquote iframe {
    aspect-ratio: 16 / 9;
}

figure > blockquote iframe[height] {
    height: auto;
}

figure > picture > img, figure > img, figure > a > img, figure > section.gallery > img {
    object-fit: scale-down;
}

footer {
    text-align: center;
    text-wrap: balance;
}

hgroup > p {
    font-size: 0.875em;
    text-indent: 1ic;
}

html { counter-reset: update 1; }
ins {
    counter-increment: update;
    text-decoration: none;
}

p:has(> ins:only-child) {
    margin: -0.5rem auto;
    padding: 0.5rem 1ch;
}

p:has(> ins:only-child)::before {
    display: inline;
    font-family: var(--heading-font-stack);
    font-weight: bold;
    content: "Update: ";
}

p:has(> ins:only-child) + p:has(> ins:only-child)::before {
    content: "Update " counter(update) ": ";
}

/* Colors */

article {
    border-color: currentColor;
    border-color: color-mix(in srgb, currentColor, transparent);
}

html     { color: var(--page-contrast);
           background-color: var(--page-color); }
footer   { color: var(--muted-fg); }
:link    { color: var(--link-fg); }
:visited { color: var(--visited-fg); }
p:has(> ins:only-child),
ins {
    background-color: var(--note-bg);
    color: var(--listing-fg);
}