@layer reset, base, layout, elements;

/* 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;
        --wash: #e8e4df;
        --muted: #706a5a;
        --accent: #a70e16;
        --rule: #cbc5ba;

        /* Layout */
        --width: 640px;
        --overhang: 3rem;

        /* 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-family-serif: "EB Garamond", "Garamond", serif;
        --font-family-mono: "Maple Mono", monospace;
        --font-size-base: 13pt;
        --font-size-sm: 10pt;
        --font-size-mono: 0.82rem;
        --font-size-code: 0.78rem;
        --font-size-mono-sm: 0.68rem;

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

/* 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;
    }
}

/* DOCUMENT */
@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);
    }
}

/* PROSE */
@layer base {
    body {
        font-family: var(--font-family-serif);
        font-size: var(--font-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;
    }

    hr {
        display: block;
        width: 2.5rem;
        height: 1px;
        margin: 1rem auto;
        border: none;
        background: var(--rule);
    }

    a {
        color: var(--ink);
        text-decoration: underline;
        text-decoration-color: var(--rule);
        text-decoration-thickness: 1px;
        text-underline-offset: 4px;
        transition:
            text-decoration-color 100ms,
            text-decoration-thickness 100ms;

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

    strong {
        font-weight: 500;
    }
}

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

    #kicker {
        margin-bottom: var(--space-sm);
        font-family: var(--font-family-mono);
        font-size: var(--font-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(--font-size-mono);
            color: var(--muted);
            text-align: center;
        }
    }

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

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

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

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

        /* Progress indicator: the overline that tracks scroll position. */
        &::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(--font-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);
        }
    }
}

/* COMMON ELEMENT STYLES */
@layer elements {
    /* Common margin and padding for elements that disrupt the flow of prose. */
    blockquote,
    pre,
    img,
    table,
    figure,
    math[display="block"] {
        margin: var(--space-md) 0;
        padding: 0 var(--space-lg);
    }

    /*
     * Elements that need serve supplementary purpose stick out of the content
     * width slightly (by --space-md).
     */
    img,
    pre,
    blockquote,
    figure {
        --overhang: clamp(0px, calc((100vw - var(--width)) / 2), var(--space-md));
        margin-left: calc(-1 * var(--overhang));
        margin-right: calc(-1 * var(--overhang));
        padding: var(--space-md);
        overflow-x: auto;
    }
}

/* LISTS */
@layer elements {
    ol,
    ul {
        padding: 0 var(--space-md) 0 var(--space-lg);
    }

    ol li,
    ul li {
        margin: var(--space-sm) 0;
    }

    /* References use bracketed counters per IEEE convention. */
    .references li::marker {
        content: "[" counter(list-item) "] ";
    }
}

/* QUOTES */
@layer elements {
    /* Blockquote — decorative opening-quote glyph. */
    blockquote {
        position: relative;
        border-left: 1px solid var(--rule);
    }
}

/* CODE & PRE-FORMATTED TEXT */
/* NOTE: code should be wrapped to 72 characters. */
@layer elements {
    /* Style inline pre-formatted elements. */
    code,
    kbd,
    samp {
        font-family: var(--font-family-mono);
        font-size: var(--font-size-mono);
        padding: 0.08em var(--space-xs);
        border-radius: 2px;
        background: var(--wash);
    }

    /* Style block pre-formatted elements. */
    pre {
        font-size: var(--font-size-mono-sm);
        background-color: var(--wash);
        border: 1px solid var(--rule);
        border-radius: 3px;

        /* Reset inline styles if inside a pre. */
        & > code {
            padding: 0;
            border-radius: 0;
            background: none;
        }
    }
}

/* FIGURES */
@layer elements {
    figure {
        counter-increment: figure;
        border: 1px solid var(--rule);
        border-radius: 3px;

        &:has(figcaption) {
            padding-bottom: 0;
        }
    }

    /*
     * When inside a figure, disable the inner margin. It will be handled by
     * the figure instead.
     */
    figure img,
    figure pre,
    figure table {
        margin: 0;
        padding: 0;
    }

    figcaption {
        margin: 0 calc(-1 * var(--space-md));
        padding: var(--space-sm) var(--space-md);
        border-top: 1px solid var(--rule);

        /*font-family: var(--font-family-mono);*/
        font-size: var(--font-size-sm);
        /*font-style: italic;*/

        &::before {
            content: "Figure " counter(figure) " | ";
            font-weight: 500;
        }
    }
}

/* TABLES */
/* IMPORTANT: Incomplete */
@layer elements {
    table {
        overflow-x: auto;
        min-width: 50%;
        max-width: 100%;
        margin: var(--space-lg) auto;
        border-collapse: collapse;
        font-size: 0.95em;
        line-height: 1.4;
    }

    th,
    td {
        vertical-align: baseline;
        padding: var(--space-xs) var(--space-sm);

        &:last-child {
            padding-right: 0;
        }
    }

    thead th {
        padding-bottom: 0.3rem;
        border-bottom: 2px solid var(--ink);
        font-weight: 500;
        text-align: left;
        white-space: nowrap;
    }

    tbody tr:last-child td {
        padding-bottom: 0;
    }

    caption {
        caption-side: bottom;
        padding-top: var(--space-sm);

        font-family: var(--font-family-mono);
        font-size: var(--font-size-mono-sm);
        font-style: italic;
        text-align: left;
        color: var(--muted);
    }
}

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