:root {
    --font-primary: "Alegreya", serif;
    --font-secondary: "Alegreya Sans", sans-serif;
    --font-size-base: 1rem;
    --line-leading: 1.3;
    --line-length: 60ch;
    /* strictly approx. 60 characters */
    --paragraph-spacing-after: 0.75rem;
    --paragraph-spacing-before: 0.75rem;

    /*  Font Weights */
    --font-weight-thin: 100;
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;
    --font-weight-black: 900;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* automatic dark/light mode support based on user agent */
html {
    color-scheme: light dark;
    text-size-adjust: 100%;
}

body {
    /* basic typography */
    font-family: var(--font-primary);
    font-kerning: normal;
    font-variant-ligatures: common-ligatures contextual;
    font-variant-numeric: oldstyle-nums proportional-nums;

    /* text rendering and display */
    font-optical-sizing: auto;
    text-rendering: optimizeLegibility;
    text-wrap: pretty;
    hyphens: auto;

    /* colours */
    background-color: canvas;
    /* system default background */
    color: canvastext;
    /* system default text color */

    /* layout */
    min-block-size: 100dvh;
    padding-block: clamp(1.5rem, 6dvh, 4rem);
    padding-inline: clamp(1rem, 4dvw, 2.75rem);

    display: flex;
    flex-direction: column;
    align-items: center;

    font-size: var(--font-size-base);
    line-height: var(--line-leading);
}

main {
    inline-size: min(100%, var(--line-length));
    display: grid;
    grid-auto-flow: row;
    gap: clamp(1.5rem, 5dvh, 3rem);
}

article {
    inline-size: 100%;
}

/* ---------------------------------- Text Elements --------------------------- */
/* Headings */
h1,
h2,
h3,
h4,
h5,
h6 {
    hyphens: none;
    text-wrap: balance;
    text-align: center;

    font-family: var(--font-primary);
    font-variant-ligatures: common-ligatures discretionary-ligatures contextual;

    margin-block: 0 clamp(0.75rem, 2dvh, 1.25rem);
}

h1 {
    font-weight: var(--font-weight-black);
    /* font-size: clamp(2rem, 1.6rem + 2.4dvw, 3.25rem); */
    line-height: 1.08;
}

h2 {
    font-weight: var(--font-weight-extrabold);
    /* font-size: clamp(1.5rem, 1.25rem + 1.4dvw, 2.1rem); */
    line-height: 1.15;
}

h3 {
    font-weight: var(--font-weight-bold);
    /* font-size: clamp(1.25rem, 1.12rem + 0.8dvw, 1.6rem); */
    line-height: 1.2;
}

h4 {
    font-weight: var(--font-weight-bold);
    /* font-size: clamp(1.1rem, 1.05rem + 0.4dvw, 1.3rem); */
    line-height: 1.25;
}

h5 {
    font-weight: var(--font-weight-bold);
    /* font-size: var(--font-size-base); */
    line-height: 1.30;
}

h6 {
    font-weight: var(--font-weight-bold);
    /* font-size: var(--font-size-base); */
    line-height: 1.35;
}

/* Paragraphs */
p {
    font-style: normal;
    font-weight: var(--font-weight-regular);
    text-align: left;
    margin-block-end: var(--paragraph-spacing-after);
}

.introduction p {
    font-family: var(--font-secondary);
    text-align: center;
}

p:last-child {
    margin-block-end: 0;
}

p i,
em {
    font-style: italic;
}

p b,
strong {
    font-weight: var(--font-weight-bold);
}

/* Links: explicit, readable, and accessible */
a {
    color: LinkText;
    text-decoration-line: underline;
    text-decoration-thickness: from-font;
    text-underline-offset: 0.15em;
}

a:visited {
    color: VisitedText;
}

a:focus-visible {
    outline: 0.15em solid currentColor;
    outline-offset: 0.2em;
    border-radius: 0.2em;
}

/* Common text elements */
ul,
ol {
    margin-block: var(--paragraph-spacing-after);
    padding-inline-start: 1.25em;
}

li {
    margin-block: 0.25em;
}

blockquote {
    margin-block: clamp(1rem, 3dvh, 2rem);
    padding-inline-start: 1em;
    border-inline-start: 0.2em solid currentColor;
}

hr {
    margin-block: clamp(1.25rem, 4dvh, 2.5rem);
    border: none;
    border-block-start: 0.1em solid currentColor;
    opacity: 0.25;
}

code,
kbd,
samp,
pre {
    font-family: ui-monospace, monospace;
    font-size: calc(var(--font-size-base) * 0.95);
}

pre {
    margin-block: var(--paragraph-spacing-after);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* ---------------------------------- Graphical Elements --------------------------- */
hr {
    border: 2px dashed black;
}


/* ---------------------------------- Print --------------------------- */
@media print {
    html {
        color-scheme: light;
    }

    body {
        padding: 0;
    }

    a {
        color: inherit;
        text-decoration-thickness: auto;
    }
}