@import "variables.css";

html {
    background: var(--page-color);
    color: var(--page-contrast);

    font-family: Osaka, var(--serif-font-stack);
    font-weight: var(--serif-font-weight);
    font-size: 125%;
    line-fit-edge: alphabetic ideographic;
    line-height: 1.7;
    text-underline-position: from-font;

    max-width: 80ch;
    margin: 0 auto;
}

abbr {
    text-decoration: none;
}

h1 {
    font-size: 3em;
    line-height: 1;
}

h1 abbr[title=and],
h2 abbr[title=and] {
    font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", serif;
    font-style: italic;
    font-weight: normal;
    opacity: 0.75;

    /* Hack to prevent Baskerville Italic's ampersand getting cut off */
    display: inline-block;
    padding-inline-end: 0.1ch;
}

blockquote {
    font-style: italic;
}

:link {
    color: var(--link-fg);
}

:visited {
    color: var(--visited-fg);
}

aside > p:first-child::before {
    content: "Aside: ";
    font-weight: bold;
}

aside.note > p:first-child::before {
    content: "Note: ";
    font-weight: bold;
}

[lang|=ga], [lang|=tok] {
    quotes: "“" "”" "‘" "’";
}

:link:has(ruby), :link:lang(ja), :link:lang(zh) {
    text-underline-offset: 0.25ic;
}