@layer components {
    .publications {
        margin-top: 0;
        margin-bottom: 0;
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        letter-spacing: var(--letter-spacing-body);
    }

    .publications h2 {
        margin-top: calc(var(--spacer-vertical) * 2);
        margin-bottom: var(--spacer-vertical);
        font-weight: 500;
        font-size: var(--font-size-h2);
        line-height: var(--line-height-h2);
        letter-spacing: var(--letter-spacing-h2);
    }

    .pub-legend {
        margin-top: 0;
        margin-bottom: var(--spacer-inter-item);
        font-family: var(--font-sans);
        font-size: var(--font-size-caption);
        line-height: var(--line-height-caption);
        letter-spacing: var(--letter-spacing-caption);
        color: var(--color-text-muted);
    }

    .legend-mark {
        font-style: italic;
        background: color-mix(in srgb, var(--color-bg) 90%, var(--color-accent, #0076ba) 10%);
    }

    .pub-list {
        margin: 0;
        margin-bottom: var(--spacer-vertical);
        list-style: none;
        display: grid;
    }

    .pub {
        margin: 0;
        margin-bottom: var(--spacer-inter-item);
        display: grid;
        grid-template-columns: 2ch var(--graphical-abstract-width) 1fr;
        column-gap: var(--spacer-inter-item);
        /* border-radius: var(--corner-radius-small); */
    }

    .pub__id {
        font-variant-numeric: lining-nums tabular-nums;
        font-feature-settings: "lnum" 1, "tnum" 1;
        font-weight: 400;
        font-size: var(--font-size-ui);
        line-height: var(--line-height-ui);
        letter-spacing: var(--letter-spacing-ui);
        color: var(--color-text-muted);
        white-space: nowrap;
        display: flex;
        align-items: flex-start;
    }

    .pub__id::after {
        content: attr(data-pub-id) ".";
    }

    .pub__graphic {
        margin: 0;
    }

    .pub__authors,
    .pub__title,
    .pub__venue {
        margin: 0;
    }

    .pub__authors {
        font-family: var(--font-sans);
        font-size: var(--font-size-ui);
        line-height: var(--line-height-ui);
        letter-spacing: var(--letter-spacing-ui);
        color: var(--color-text-muted);
        text-wrap: pretty;
    }

    .pub__title {
        font-size: var(--font-size-body);
        line-height: var(--line-height-body);
        letter-spacing: var(--letter-spacing-body);
        text-align: start;
        hyphens: auto;
        text-wrap: pretty;
    }

    .pub__venue {
        font-family: var(--font-sans);
        font-size: var(--font-size-ui);
        line-height: var(--line-height-ui);
        letter-spacing: var(--letter-spacing-ui);
        color: var(--color-text);
    }

    .pub__media {
        display: block;
        aspect-ratio: var(--graphical-abstract-aspect-ratio);
        border: 1px solid var(--color-border);
        background: var(--grey-200);
        position: relative;
        overflow: hidden;
        text-decoration: none;
    }

    .pub__media img,
    .pub__media video {
        position: absolute;
    }

    .pub__media video {
        opacity: 0;
    }

    .pub--no-graphic {
        grid-template-columns: 2ch 1fr;
    }

    .pub__details {
        display: grid;
        gap: calc(var(--spacer-inter-item) * 0.35);
        overflow-wrap: break-word;
        word-break: normal;
        min-inline-size: 0;
        hyphens: manual;
        text-wrap: pretty;
    }

    .pub__links {
        display: flex;
        flex-wrap: wrap;
        gap: 0;
        margin: 0;
        margin-top: calc(var(--spacer-inter-item) * 0.35);
        font-family: var(--font-sans);
        font-size: var(--font-size-ui);
        line-height: var(--line-height-ui);
        letter-spacing: var(--letter-spacing-ui);
    }

    .pub__links > li {
        display: inline-flex;
        align-items: baseline;
    }

    .pub__links > li + li::before {
        content: "·";
        color: var(--color-text-muted);
        margin-inline: 0.6ch;
    }

    .pub__github-link {
        display: inline-flex;
        align-items: center;
        gap: 0.55ch;
        white-space: nowrap;
    }

    .pub__github-stars {
        display: block;
        height: 18px;
        width: auto;
    }

    .pub--highlighted {
        position: relative;
        background-color: color-mix(in srgb, var(--color-bg) 90%, var(--color-accent, #0076ba) 10%);
        padding: var(--spacer-inter-item);
        border-radius: var(--radius-s, 0.5rem);
        transition: background-color 0.2s ease-in-out;
    }

    .pub--highlighted::before {
        content: '';
        position: absolute;
        inset-inline-start: 0;
        top: 0;
        bottom: 0;
        width: 4px;
        background-color: var(--color-accent, #0076ba);
        border-top-left-radius: var(--radius-s);
        border-bottom-left-radius: var(--radius-s);
    }

    .pub__badge {
        display: inline-block;
        margin-inline-start: 0.5ch;
        font-family: var(--font-sans);
        font-size: var(--font-size-caption);
        line-height: var(--line-height-caption);
        letter-spacing: var(--letter-spacing-caption);
        font-weight: 600;
        color: var(--color-accent, #0076ba);
        text-transform: uppercase;
    }

    @media (prefers-reduced-motion: no-preference) {
        .pub__media.has-video-preview:is(:hover, :focus-visible) video {
            opacity: 1;
        }

        .pub__media.has-video-preview:is(:hover, :focus-visible) img {
            opacity: 0;
        }
    }
}