@charset "UTF-8";

/* ====================
   DESIGN TOKENS
   ==================== */

:root {
    --ink: #1f2933;
    --muted: #5b6470;
    --accent: #243e63;
    --bg: #f7f9fc;
}

/* ====================
   GLOBAL
   ==================== */

* {
    box-sizing: border-box;
}

html {
    background: var(--bg);
}

body {
    margin: 0;
    padding: 2rem 1rem;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;

    font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    line-height: 1.5;
    color: var(--ink);
}

/* ====================
   TYPOGRAPHY
   ==================== */

h1 {
    font-size: 2rem;
    font-weight: 600;
    margin: 0 0 0.5em 0;
    color: var(--accent);
}

h2 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 1.2em 0 0.5em 0;
    color: var(--accent);
}

h3 {
    font-size: 1rem;
    font-weight: 600;
    margin: 1em 0 0.25em 0;
}

p {
    margin: 0 0 0.6em 0;
}

.address {
    margin-left: 1em;
    line-height: 1.4;
}

/* ====================
   LINKS
   ==================== */

a {
    color: color-mix(in srgb, var(--accent) 85%, #ffffff);
    text-decoration: underline;
}

a:visited {
    color: var(--accent);
}

a:hover {
    text-decoration: none;
}

/* ====================
   STRUCTURE
   ==================== */

header {
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--muted);
}

section {
    clear: both;
    margin-bottom: 2rem;
}

article {
    margin-bottom: 1.5rem;
}

/* ====================
   LISTS
   ==================== */

ul {
    margin: 0 0 0.8em 1.2em;
    padding: 0;
}

li {
    margin-bottom: 0.15em;
}

/* ====================
   TWO-COLUMN LOGIC
   ==================== */

/* Wide screens: two columns */
@media (min-width: 900px) {
    section > article {
        float: left;
        width: 48%;
        margin-right: 4%;
    }

    section > article:nth-of-type(2n) {
        margin-right: 0;
    }
}

/* Narrow screens: one column */
@media (max-width: 899px) {
    section > article {
        float: none;
        width: 100%;
        margin-right: 0;
    }
}

/* Hide floating menu when it would overlap content */
@media (max-width: 1000px) {
    .floating-menu {
        display: none !important;
    }
}
/* ====================
   PUBLICATIONS PAGE
   ==================== */

.summary,
.mainpanel {
    max-width: 700px;
    margin: 1.5rem auto;
}

.mainpanel {
    position: relative;
}

.ptitle,
.authors,
.ref,
.conference,
.link {
    margin-left: 3.75rem;
}

.number {
    position: absolute;
    left: 0;
    width: 3rem;
    text-align: right;
    color: var(--muted);
    font-size: 120%;
}

.ptitle {
    font-weight: 600;
}

.authors {
    font-size: 90%;
    line-height: 1.4;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
    position: relative;
}

.ref,
.conference {
    font-size: 85%;
    color: var(--muted);
}

.link {
    font-size: 85%;
    margin-bottom: 1rem;
}

/* ====================
   FLOATING MENU
   ==================== */

.floating-menu {
    position: fixed;
    top: 6rem;
    left: calc(50% - 350px - 120px - 1rem);
    width: 120px;
    padding-left: 0.5rem;
    font-size: 80%;
    opacity: 0.7;
}