/* RESET */
@layer reset {
    /* 1. Use a more-intuitive box-sizing model */
    *,
    *::before,
    *::after {
        box-sizing: border-box;
    }

    /* 2. Remove default margin */
    * {
        margin: 0;
    }

    /* 3. Enable keyword animations */
    @media (prefers-reduced-motion: no-preference) {
        html {
            interpolate-size: allow-keywords;
        }
    }

    body {
        /* 4. Add accessible line-height */
        line-height: 1.5;
        /* 5. Improve text rendering */
        -webkit-font-smoothing: antialiased;
    }

    /* 6. Improve media defaults */
    img,
    picture,
    video,
    canvas,
    svg {
        display: block;
        max-width: 100%;
    }

    /* 7. Inherit fonts for form controls */
    input,
    button,
    textarea,
    select {
        font: inherit;
    }

    /* 8. Avoid text overflows */
    p,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        overflow-wrap: break-word;
    }

    /* 9. Improve line wrapping */
    p {
        text-wrap: pretty;
    }
    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        text-wrap: balance;
    }

    /* 10. Create a root stacking context */
    #root,
    #__next {
        isolation: isolate;
    }
}

/* VARIABLES */
@layer base {
    :root {
        /* Colors */
        --ink: #17160f;
        --paper: #f2f0ef;
        --muted: #706a5a;
        --accent: #a70e16;
        --rule: #dbd6cc;

        /* Layout */
        --width: 640px;

        /* Spacing rhythm (multiples of ~0.25rem) */
        --space-xs: 0.25rem;
        --space-sm: 0.5rem;
        --space-md: 1rem;
        --space-lg: 1.4rem;
        --space-xl: 2.4rem;
        --space-2xl: 4.5rem;

        /* Typography font families */
        --font-family-serif: "EB Garamond", "Garamond", serif;
        --font-family-mono: "Maple Mono", monospace;

        /* Typography scale */
        --text-size-base: 13pt;
        --text-size-mono: 0.82rem;
        --text-size-mono-sm: 0.68rem;

        /* Footer */
        --footer-height: 2rem;
        --footer-displacement-width: clamp(1.2rem, 5vw, 2rem);
    }
}

/* DOCUMENT STRUCTURE */
@layer base {
    body {
        max-width: var(--width);
        margin: 0 auto;
        padding: 3rem var(--footer-displacement-width) calc(3rem + var(--footer-height));
        background-color: var(--paper);
        color: var(--ink);
    }
}

/* FONTS */
@layer base {
    @font-face {
        font-family: "EB Garamond";
        src: url("/public/fonts/EBGaramond/EBGaramond-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "EB Garamond";
        src: url("/public/fonts/EBGaramond/EBGaramond-Italic.woff2") format("woff2");
        font-weight: 400;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: "EB Garamond";
        src: url("/public/fonts/EBGaramond/EBGaramond-Medium.woff2") format("woff2");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "EB Garamond";
        src: url("/public/fonts/EBGaramond/EBGaramond-MediumItalic.woff2") format("woff2");
        font-weight: 500;
        font-style: italic;
        font-display: swap;
    }

    @font-face {
        font-family: "Maple Mono";
        src: url("/public/fonts/MapleMono/MapleMono-Regular.woff2") format("woff2");
        font-weight: 400;
        font-style: normal;
        font-display: swap;
    }

    @font-face {
        font-family: "Maple Mono";
        src: url("/public/fonts/MapleMono/MapleMono-Italic.woff2") format("woff2");
        font-weight: 400;
        font-style: italic;
        font-display: swap;
    }
}

/* TYPOGRAPHY */
@layer base {
    body {
        font-family: var(--font-family-serif);
        font-size: var(--text-size-base);
        font-weight: 400;
        text-align: justify;
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    /* Indent paragraphs that follow another paragraph. */
    p + p {
        text-indent: 1.4em;
    }

    /* Do not indent after semantic breaks */
    h2 + p,
    h3 + p {
        text-indent: 0;
    }

    h2 {
        margin: var(--space-lg) 0 var(--space-xs);
        font-size: 1.2em;
        font-style: italic;
        font-weight: 500;
        text-align: left;
    }

    h3 {
        margin: var(--space-md) 0 var(--space-xs);
        font-size: 1em;
        font-style: italic;
        font-weight: 500;
        text-align: left;
    }

    /* Do not allow sub-sub-+ headings. */
    h4,
    h5,
    h6 {
        display: none;
    }

    /* Preformatted text is styled with the monospace font. */
    pre,
    code,
    kbd,
    samp {
        font-family: var(--font-family-mono);
        font-size: var(--text-size-mono);
    }

    /*
        Elements that break the flow of content are styled
        with margin instead of text-indent.
    */
    pre,
    blockquote,
    table,
    figure,
    math[display="block"] {
        margin: var(--space-md) 0;
        padding: 0 var(--space-md);
    }

    /* Make hr rules look elegant. */
    hr {
        display: block;
        width: 2.5rem;
        height: 1px;
        margin: 1rem auto 1rem;
        border: none;
        background: var(--rule);
    }

    /* Subtly style links. */
    a {
        text-decoration: underline;
        text-decoration-color: var(--rule);
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
        color: var(--ink);
        transition:
            text-decoration-color 100ms,
            text-decoration-thickness 100ms;

        &:hover {
            text-decoration-color: var(--ink);
            text-decoration-thickness: 2px;
        }
    }
}

/* HEADER */
@layer layout {
    header {
        text-align: center;
    }

    #kicker {
        margin-bottom: var(--space-sm);
        font-family: var(--font-family-mono);
        font-size: var(--text-size-mono-sm);
        letter-spacing: 0.1em;
        color: var(--muted);
    }

    h1,
    #title {
        margin-bottom: 0.2rem;
        font-size: 1.55rem;
        font-weight: 400;
        line-height: 1.2;
    }

    #subtitle {
        font-style: italic;
        line-height: 1.3;
        color: var(--muted);
    }

    #abstract {
        margin-top: var(--space-lg);
        text-align: justify;
        hyphens: auto;

        &::before {
            content: "— Abstract —";
            display: block;
            font-family: var(--font-family-mono);
            font-size: var(--text-size-mono);
            color: var(--muted);
            text-align: center;
        }
    }

    hr#rule {
        margin-top: 0.9rem;
    }
}

/* FOOTER */
@layer layout {
    footer {
        /* Positioning: fixed to bottom, centered within --width */
        position: fixed;
        bottom: 0;
        left: 50%;
        width: min(var(--width), 100%);
        transform: translateX(-50%);

        /* Layout */
        display: flex;
        height: var(--footer-height);
        padding: 0 var(--footer-displacement-width);
        gap: 1rem;
        align-items: center;

        /* Appearance */
        border-top: 1px solid var(--rule);
        background: var(--paper);

        &::before {
            content: "";
            position: absolute;
            top: -1px;
            width: 2.8rem;
            height: 2px;
            background: var(--ink);
            transition: opacity 500ms ease;
        }

        &.hidden::before {
            opacity: 0;
            transition: opacity 200ms ease;
        }
    }

    #locus,
    .endnotes {
        font-family: var(--font-family-mono);
        font-size: var(--text-size-mono-sm);
        color: var(--muted);
    }

    #locus {
        flex: 1;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        transition: opacity 500ms ease;

        &.hidden {
            opacity: 0;
        }
    }

    .endnotes {
        flex-shrink: 0;
        text-decoration: none;

        & > sup {
            color: var(--accent);
        }
    }
}

/* CODE */
@layer components {
    /* TODO: figure out the design for code blocks. */
}

/* FIGURES */
@layer components {
    figure {
        display: flow-root;
        margin: 1em auto;
        overflow-x: scroll;
    }

    figure:has(figcaption) {
        margin-bottom: 0.5em;
    }

    figure figcaption {
        margin: 4px 10px;
        font-style: italic;
        line-height: 1.4;
        color: var(--muted);
    }
}

/* LISTS */
@layer components {
    ol,
    ul,
    ul li,
    ol li {
        margin: var(--space-sm) 0;
    }

    ol,
    ul {
        padding: 0 var(--space-md) 0 var(--space-lg);
    }

    .references li::marker {
        content: "[" counter(list-item) "] ";
    }
}

/* QUOTES */
@layer components {
    blockquote {
        position: relative;
    }

    blockquote::before {
        content: "\201C"; /* " */
        position: absolute;
        left: 0;
        top: -0.15em;
        font-size: 2.5em;
        line-height: 1;
        color: var(--rule);
        font-style: normal;
    }
}

/* TABLES */
@layer components {
    table {
        width: auto;
        min-width: 50%;
        margin-left: auto;
        margin-right: auto;

        border-collapse: collapse;

        font-size: 0.95em;
        line-height: 1.4;
        color: var(--ink);
    }

    th,
    td {
        vertical-align: baseline;

        &:not(:last-child) {
            padding-right: var(--space-sm);
        }
    }

    /* Style the table header */
    table thead th {
        padding: 0.1rem var(--space-xs);
        border-bottom: 1px solid var(--muted);
        font-weight: 500;
        text-align: left;
    }

    table tbody td {
        padding: 0.12rem var(--space-xs);
    }

    caption {
        color: var(--muted);
        caption-side: bottom;
        padding-top: 4px;
        text-align: left;
        font-style: italic;
    }
}

/* MATH */
@layer components {
    math {
        font-family: "EB Garamond", "Garamond-Math", serif;
    }
}