:root {
    /* Polar Night - Dark theme colors */
    --polar-100: #2e3440;
    --polar-200: #3b4252;
    --polar-300: #434c5e;
    --polar-400: #4c566a;

    /* Snow Storm - Light theme colors */
    --snow-100: #d8dee9;
    --snow-200: #e5e9f0;
    --snow-300: #eceff4;

    /* Frost - Blue accent colors */
    --frost-sage: #8fbcbb;
    --frost-sky: #88c0d0;
    --frost-ocean: #81a1c1;
    --frost-deep: #5e81ac;

    /* Aurora - Accent colors */
    --aurora-red: #bf616a;
    --aurora-orange: #d08770;
    --aurora-yellow: #ebcb8b;
    --aurora-green: #a3be8c;
    --aurora-purple: #b48ead;

    /* Red Mountain Brown colors */
    --mountain-100: #AF967D;
    --mountain-200: #7d6464;
    --mountain-300: #7D4b4b;

    --off-black: #2e3440;
    --off-white: #eceff4;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.poppins-thin {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: normal;
}

.poppins-extralight {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: normal;
}

.poppins-light {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: normal;
}

.poppins-regular {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.poppins-medium {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: normal;
}

.poppins-semibold {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: normal;
}

.poppins-bold {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: normal;
}

.poppins-extrabold {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: normal;
}

.poppins-black {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: normal;
}

.poppins-thin-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 100;
    font-style: italic;
}

.poppins-extralight-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 200;
    font-style: italic;
}

.poppins-light-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 300;
    font-style: italic;
}

.poppins-regular-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: italic;
}

.poppins-medium-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 500;
    font-style: italic;
}

.poppins-semibold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 600;
    font-style: italic;
}

.poppins-bold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 700;
    font-style: italic;
}

.poppins-extrabold-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 800;
    font-style: italic;
}

.poppins-black-italic {
    font-family: "Poppins", sans-serif;
    font-weight: 900;
    font-style: italic;
}

.forum-regular {
    font-family: "Forum", serif;
    font-weight: 400;
    font-style: normal;
}

/* Josefin Sans variations */
.josefin-thin {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.josefin-extralight {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.josefin-light {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.josefin-regular {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.josefin-medium {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.josefin-semibold {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.josefin-bold {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

/* Josefin Sans Italic variations */
.josefin-thin-italic {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: italic;
}

.josefin-extralight-italic {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: italic;
}

.josefin-light-italic {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: italic;
}

.josefin-regular-italic {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

.josefin-medium-italic {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
}

.josefin-semibold-italic {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
}

.josefin-bold-italic {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
}

/* Raleway variations */
.raleway-thin {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
}

.raleway-extralight {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: normal;
}

.raleway-light {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.raleway-regular {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

.raleway-medium {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: normal;
}

.raleway-semibold {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: normal;
}

.raleway-bold {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
}

.raleway-extrabold {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: normal;
}

.raleway-black {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: normal;
}

/* Raleway Italic variations */
.raleway-thin-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: italic;
}

.raleway-extralight-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 200;
    font-style: italic;
}

.raleway-light-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: italic;
}

.raleway-regular-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: italic;
}

.raleway-medium-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 500;
    font-style: italic;
}

.raleway-semibold-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 600;
    font-style: italic;
}

.raleway-bold-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: italic;
}

.raleway-extrabold-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 800;
    font-style: italic;
}

.raleway-black-italic {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: 900;
    font-style: italic;
}

body {
    font-family: 'Poppins', sans-serif;
    line-height: 1.6;
    min-height: 100vh;
    background-color: var(--snow-100);
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: "Josefin Sans", sans-serif;
    font-optical-sizing: auto;
    font-weight: 100;
    font-style: normal;
    margin-bottom: 1rem;
    line-height: 1.2;  
}

h1 { font-size: 5rem; }     /* 64px */
h2 { font-size: 4rem; }   /* 40px */
h3 { font-size: 2.25rem; }  /* 36px */
h4 { font-size: 1.5rem; }   /* 24px */
p {
    font-family: 'Poppins', sans-serif;
    font-size: 1rem;     /* 20px */
    margin-bottom: 1rem;
    /* color: var(--off-black); */
}

.subtitle {
    font-family: 'Raleway', sans-serif;
    font-weight: 300;
    font-size: 1rem;        /* 16px */
    color: var(--off-black);
    margin-bottom: 1rem;
}

.note {
    font-family: 'Poppins', sans-serif;
    font-size: 0.85rem;        /* 16px */
    color: var(--off-black);
}

.bold {
    font-weight: 700;
}

a {
    font-family: 'Forum', serif;
    font-size: 1.25rem;     /* 20px */
    color: var(--mountain-200);
    text-decoration: none;
    box-shadow: inset 0 0 0 0 var(--mountain-200);
    margin: 0 -.25rem;
    padding: 0 .25rem;
    transition: color .6s ease-in-out, box-shadow .3s ease-in-out;
}

a:hover {
    box-shadow: inset width 0 0 0 var(--mountain-200);
    color: var(--snow-300);
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    padding: 3rem;
}

.site-title {
    font-family: 'Josefin Sans', sans-serif;
    color: var(--polar-200);
    font-size: 1.5rem;     /* 48px */
    font-weight: 100;
    margin: 0;
}

.nav-links {
    display: flex;
    gap: 2rem;
    list-style: none;
}

.nav-links a {
    font-family: 'Forum', serif;
    font-size: 1.25rem;      /* 24px */
    color: var(--mountain-200);
    text-decoration: none;
    box-shadow: inset 0 0 0 0 var(--mountain-200);
    margin: 0 -.25rem;
    padding: 0 .5rem;
    transition: color .5s ease-in-out, box-shadow .5s ease-in-out;
    border-radius: 2px;
}

.nav-links a:hover {
    box-shadow: inset 400px 0 0 0 var(--mountain-200);
    color: var(--snow-300);
}

section {
    /* min-height: 100vh; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
}

section h2 {
    margin-bottom: 3rem;
}

.section-content {
    max-width: min(1280px, calc(100vw - 6rem));
    margin: 0 auto;
    width: 100%;
}

.section-dark-100 {
    background-color: var(--polar-100);
    color: var(--snow-100);
}

.section-dark-200 {
    background-color: var(--polar-200);
    color: var(--snow-100);
}

.section-dark-300 {
    background-color: var(--polar-300);
    color: var(--snow-100);
}

.section-dark-400 {
    background-color: var(--polar-400);
    color: var(--snow-100);
}

.section-light-100 {
    background-color: var(--snow-100);
    color: var(--polar-400);
}

.section-light-200 {
    background-color: var(--snow-200);
    color: var(--polar-400);
}

.section-light-300 {
    background-color: var(--snow-300);
    color: var(--polar-400);
}

.footer-section {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: 2.5rem;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    gap: 2.5rem;
    width: 100%;
    max-width: 1200px;
}

.footer-left {
    flex: 1;
}

.footer-right {
    flex: 0 0 25%;
}

.footer-left h4 {
    margin-bottom: 1rem;
    color: var(--polar-200);
}

.footer-section .note {
    margin-bottom: 0.5rem;
}
button {
    background-color: var(--snow-100);
    color: var(--polar-400);
    border: none;
    padding: 1rem 2rem;
    border-radius: 2rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1rem;
    font-weight: 400;
}

button:hover {
    background-color: var(--snow-200);
}

button.dark-400 {
    background-color: var(--polar-400);
    color: var(--snow-100);
}

button.dark-400:hover {
    background-color: var(--polar-300);
}

/* Article title: plain text matching surrounding style */
.pub-title {
    font-family: inherit;
    font-size: inherit;
    font-weight: 600;
    color: var(--polar-200);
    text-decoration: none;
}

/* Author name (Borui Wang) in publications: same style as pub-title */
.publication-list .author-name {
    font-weight: 600;
    color: var(--polar-200);
}

/* DOI link for publications: with underline animation on hover */
.pub-doi {
    font-family: inherit;
    font-size: .85rem;
    color: var(--mountain-200);
    text-decoration: none;
    margin-left: 0.08rem;
    position: relative;
    padding: 0 .12rem;
    transition: color .22s ease;
}

.pub-doi::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    height: 2px;
    width: 0;
    background: var(--mountain-200);
    transition: width .22s ease;
}

.pub-doi:hover {
    color: var(--polar-400);
}

.pub-doi:hover::after {
    width: 100%;
}

/* Media query for mobile responsiveness */
@media screen and (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        gap: 2rem;
    }

    .footer-right {
        flex: 1;
    }
}