/* ============================================================
   Fonts
   ============================================================ */

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/inter/latin-400-normal.woff2") format("woff2"),
         url("fonts/inter/latin-400-normal.woff") format("woff");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/inter/latin-500-normal.woff2") format("woff2"),
         url("fonts/inter/latin-500-normal.woff") format("woff");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/inter/latin-600-normal.woff2") format("woff2"),
         url("fonts/inter/latin-600-normal.woff") format("woff");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/inter/latin-700-normal.woff2") format("woff2"),
         url("fonts/inter/latin-700-normal.woff") format("woff");
    unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ============================================================
   Theme variables
   ============================================================ */

:root {
    color-scheme: light dark;

    --page-bg: #ffffff;
    --text: #111111;
    --muted: #616161;
    --rule: #333333;
    --heading: #000000;
    --highlight: #efff73;
    --highlight-text: #111111;

    --link: #0a0a0a;
    --link-underline: rgba(0, 0, 0, 0.45);
    --link-hover: #5f46a8;
    --link-hover-underline: #b99af5;

    --nav-bg: #ffffff;
    --nav-border: #000000;
    --toggler-line: #111111;

    --cv-bg: #e9ddff;
    --cv-color: #111111;
    --cv-bg-hover: #000000;
    --cv-color-hover: #ffffff;

    --body-font: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    --text-sm: 0.875rem;
}

@media (prefers-color-scheme: dark) {
    :root {
        --page-bg: #0e0e10;
        --text: #e8e8ea;
        --muted: #9a9a9d;
        --rule: #3a3a3c;
        --heading: #fafafa;
        --highlight: #efff73;
        --highlight-text: #111111;

        --link: #ededef;
        --link-underline: rgba(255, 255, 255, 0.4);
        --link-hover: #c9b3ff;
        --link-hover-underline: #8a6fdd;

        --nav-bg: #0e0e10;
        --nav-border: #2a2a2c;
        --toggler-line: #ededef;

        --cv-bg: #5f46a8;
        --cv-color: #ffffff;
        --cv-bg-hover: #ffffff;
        --cv-color-hover: #111111;
    }
}

/* ============================================================
   Reset / reboot
   ============================================================ */

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

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *, *::before, *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

body {
    margin: 0;
    padding-top: 72px;
    background: var(--page-bg);
    color: var(--text);
    font-family: var(--body-font);
    font-size: 1rem;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img {
    vertical-align: middle;
    max-width: 100%;
    height: auto;
}

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 0.5rem;
}

p {
    margin: 0 0 1rem;
}

ul, ol {
    margin: 0 0 1rem;
    padding-left: 1.15rem;
}

p, li {
    line-height: 1.68;
}

/* ============================================================
   Base typography
   ============================================================ */

h1, h2 {
    color: var(--heading);
    font-weight: 400;
    line-height: 1.12;
    letter-spacing: -0.04em;
}

h3, h4 {
    color: var(--heading);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

h1 { font-size: 2.5rem; }
h2 { font-size: 2rem; margin-bottom: 1.5rem; }
h3 { font-size: 1.5rem; }
h4 { font-size: 1.25rem; }

a {
    color: var(--link);
    text-decoration: underline;
    text-decoration-thickness: 0.08em;
    text-underline-offset: 0.16em;
    text-decoration-color: var(--link-underline);
}

a:hover {
    color: var(--link-hover);
    text-decoration-color: var(--link-hover-underline);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
    outline: 2px solid var(--link-hover);
    outline-offset: 3px;
}

/* ============================================================
   Layout container
   ============================================================ */

.container {
    width: 100%;
    max-width: 970px;
    margin-inline: auto;
    padding-inline: clamp(1rem, 4vw, 2rem);
}

/* ============================================================
   Navbar
   ============================================================ */

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    background: var(--nav-bg);
    border-bottom: 1px solid var(--nav-border);
}

.navbar-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    max-width: 970px;
    margin-inline: auto;
    padding: 0.65rem clamp(1rem, 4vw, 2rem);
}

.navbar-brand {
    margin-right: auto;
    color: var(--heading);
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    text-decoration: none;
    transition: opacity 0.18s ease;
}

.navbar-brand:hover,
.navbar-brand:focus {
    color: var(--heading);
}

.navbar-brand.brand-hidden {
    opacity: 0;
    pointer-events: none;
}

.navbar-toggler {
    padding: 0.75rem;
    margin: -0.75rem;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.6rem;
    height: 1.2rem;
    vertical-align: middle;
    background-image:
        linear-gradient(var(--toggler-line), var(--toggler-line)),
        linear-gradient(var(--toggler-line), var(--toggler-line)),
        linear-gradient(var(--toggler-line), var(--toggler-line));
    background-size: 100% 2.5px;
    background-position: center top, center center, center bottom;
    background-repeat: no-repeat;
}

.navbar-collapse {
    flex-basis: 100%;
    flex-grow: 1;
    align-items: center;
}

.navbar-nav {
    --nav-pad-x: 1rem;
    display: flex;
    flex-direction: column;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-link {
    display: block;
    padding: 0.5rem var(--nav-pad-x);
    color: var(--muted);
    font-weight: 500;
    letter-spacing: -0.015em;
    white-space: nowrap;
    text-decoration: none;
}

.nav-link:hover,
.nav-link:focus {
    color: var(--heading);
}

.nav-cv {
    padding-left: var(--nav-pad-x);
}

@media (max-width: 767.98px) {
    .navbar-collapse {
        display: none;
        padding-top: 0.5rem;
    }

    .navbar-collapse.open {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .navbar-nav {
        width: 100%;
    }

    .nav-cv {
        padding: 0.5rem 1rem 0;
    }
}

@media (min-width: 768px) {
    .navbar-toggler {
        display: none;
    }

    .navbar-collapse {
        display: flex;
        flex-basis: auto;
    }

    .navbar-nav {
        flex-direction: row;
        align-items: center;
        margin-left: auto;
    }

    .nav-link {
        text-align: center;
    }
}

@media (min-width: 768px) and (max-width: 930px) {
    .navbar-inner {
        padding-inline: clamp(1.25rem, 4vw, 2rem);
    }

    .navbar-nav {
        --nav-pad-x: 0.7rem;
    }
}

/* ============================================================
   Sections
   ============================================================ */

.section-block {
    border-top: 1px solid var(--rule);
    padding: 2rem 0 1.6rem;
    margin-top: 3rem;
}

.section-block--hero {
    border-top: 0;
    padding: 1rem 0 1.75rem;
    margin-top: 0.75rem;
}

.section-narrow {
    max-width: 40em;
}

.scroll-offset {
    scroll-margin-top: 104px;
}

/* ============================================================
   Profile (hero)
   ============================================================ */

#hero-name {
    font-size: clamp(2.2rem, 4vw, 3rem);
    line-height: 1.02;
    margin-bottom: 0.35rem;
}

.profile-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 1.5rem;
    row-gap: 1.5rem;
    justify-content: space-between;
    margin-top: 1.5rem;
}

.profile-bio,
.profile-portrait {
    flex: 0 0 100%;
    max-width: 100%;
}

@media (min-width: 768px) {
    .profile-bio {
        flex: 0 0 auto;
        width: 66.6667%;
    }

    .profile-portrait {
        flex: 0 0 auto;
        width: auto;
    }
}

.profile-bio > ul,
.profile-bio > p {
    margin-block: 1.5rem;
}

.portrait {
    display: block;
    width: 200px;
    max-width: 100%;
}

/* Label block (Email / Profiles / CV rows) */
.label-block {
    margin-top: 1.5rem;
}

.label-block > div {
    margin-bottom: 0.5rem;
}

.label-block > div > a,
.label-block > div > .profile-links {
    margin-left: 0.5rem;
}

.label-block strong {
    display: inline-block;
    min-width: 4.4em;
    color: var(--heading);
    font-weight: 600;
}

.profile-links a {
    margin-right: 1rem;
}

.profile-links a:last-child {
    margin-right: 0;
}

/* ============================================================
   Entries — recurring content-item pattern
   (papers, reviews, blog posts, etc.)
   ============================================================ */

.entry + .entry {
    margin-top: 3rem;
}

.entry-title {
    font-size: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.entry-meta {
    margin-bottom: 1rem;
}

.entry-subhead {
    display: flow-root;
    font-size: 1.25rem;
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

/* ============================================================
   Disclosure — collapsible <details> section
   (paper abstracts, "Read more", FAQs, etc.)
   ============================================================ */

.disclosure {
    margin-top: 0.5rem;
    margin-bottom: 1rem;
}

.disclosure > summary {
    display: inline-block;
    margin-top: 0;
    margin-bottom: 1rem;
    color: var(--heading);
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.03em;
    list-style: none;
    cursor: pointer;
}

.disclosure > summary::-webkit-details-marker {
    display: none;
}

.disclosure > summary::after {
    content: " \25BC";
    margin-left: 0.35em;
    font-size: 0.7em;
    vertical-align: 0.15em;
    opacity: 0.6;
}

.disclosure[open] > summary::after {
    content: " \25B2";
}

.disclosure > summary:hover,
.disclosure > summary:focus-visible {
    color: var(--link-hover);
}

.disclosure > p {
    margin-bottom: 0.5rem;
}

/* ============================================================
   CV pill
   ============================================================ */

.btn-cv {
    display: inline-block;
    padding: 0.14em 0.34em 0.18em;
    background: var(--cv-bg);
    color: var(--cv-color);
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
}

.btn-cv:hover {
    background: var(--cv-bg-hover);
    color: var(--cv-color-hover);
    text-decoration: none;
}

/* ============================================================
   Badge (e.g. "Job market paper")
   ============================================================ */

.badge {
    display: inline-block;
    margin-left: 0.25rem;
    padding: 0.1em 0.28em 0.14em;
    background: var(--highlight);
    color: var(--highlight-text);
    font-size: 0.58em;
    font-weight: 700;
    letter-spacing: 0.01em;
    line-height: 1;
    vertical-align: 0.08em;
    white-space: nowrap;
}

/* ============================================================
   Figure (about-me photo)
   ============================================================ */

.figure-block {
    margin-top: 3rem;
}

.figure-img {
    display: block;
    width: 100%;
}

.figure-caption {
    margin-top: 1.5rem;
    color: var(--muted);
    font-size: var(--text-sm);
    text-align: right;
}

/* ============================================================
   Site footer (last-updated + external profiles)
   ============================================================ */

.site-footer {
    color: var(--muted);
    margin-bottom: 0.5rem;
    font-size: var(--text-sm);
}

.site-footer ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.site-footer ul > li {
    display: inline-block;
    margin-right: 0.5rem;
}

.site-footer ul > li:last-child {
    margin-right: 0;
}