/* ===== DAIS Lab — Shared Stylesheet ===== */
/* Palette: https://colorhunt.co/palette/819a91a7c1a8d1d8beeeefe0 */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@300;400;500;600;700&family=Source+Serif+4:wght@400;500;600;700&display=swap');

:root {
    --bg: #FAFCFB;
    --text: #1a1a1a;
    --muted: #666666;
    --accent: #819A91;
    --accent-light: #A7C1A8;
    --accent-dark: #617A71;
    --accent-pale: #d4ddd6;
    --border: #d0d0d0;
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: "Source Sans 3", "Helvetica Neue", Helvetica, Arial, sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.75;
    font-size: 16px;
}

/* ---- Navigation ---- */
nav {
    background: var(--accent);
    padding: 0 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
}

nav a {
    color: #f5f7f2;
    text-decoration: none;

    font-size: 0.92rem;
    padding: 12px 16px;
    border-bottom: 2px solid transparent;
    display: inline-block;
    transition: background 0.3s ease, border-bottom-color 0.3s ease;
}

nav a:hover {
    background: rgba(255, 255, 255, 0.18);
}

nav a.active {
    border-bottom-color: var(--accent-pale);
}


/* ---- Layout ---- */
@keyframes fadeInSlideUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    max-width: 800px;
    margin: 0 auto;
    padding: 28px 24px 96px;
    animation: fadeInSlideUp 0.6s ease-out forwards;
}

/* ---- Typography ---- */
h1,
h2 {
    font-family: "Source Serif 4", Georgia, serif;
}

h1 {
    font-size: 2rem;
    font-weight: bold;
    margin: 0 0 4px;
    line-height: 1.2;
}

.announcement {
    margin: 16px 0 24px;
    padding: 12px 16px;
    border: 1px solid var(--accent-light);
    background: rgba(167, 193, 168, 0.12);
    border-radius: 6px;
    font-size: 0.95rem;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

a.announcement:hover {
    background: rgba(167, 193, 168, 0.22);
    border-color: var(--accent);
    text-decoration: none;
}

.announcement-tag {
    background: var(--accent);
    color: #fff;
    font-size: 0.72rem;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 3px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.culture-row {
    margin: 4px 0 8px;
}

.culture-row::after {
    content: "";
    display: block;
    clear: both;
}

.culture-row > p {
    margin: 0;
}

.culture-row .lab-photo {
    float: right;
    width: 34%;
    margin: 4px 0 -12px 24px;
}

.culture-row .lab-photo figcaption {
    margin-top: 2px;
    margin-bottom: 0;
    line-height: 1.2;
}

.lab-photo img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.lab-photo figcaption {
    text-align: center;
    font-size: 0.82rem;
    color: var(--muted);
    font-style: italic;
    margin-top: 8px;
}

@media (max-width: 640px) {
    .culture-row .lab-photo {
        float: none;
        width: 100%;
        margin: 16px 0;
    }
}

footer .footer-logo {
    height: 28px;
    width: auto;
    opacity: 0.75;
    flex-shrink: 0;
}

h2 {
    font-size: 1.25rem;
    font-weight: bold;
    margin: 48px 0 12px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 6px;
}

h3 {
    font-size: 1rem;
    font-weight: bold;
    margin: 24px 0 8px;
    color: var(--accent-dark);
}

h4 {
    font-size: 0.93rem;
    font-weight: 600;
    margin: 12px 0 4px;
    color: var(--accent-dark);
}

p {
    margin: 0 0 16px;
}

a {
    color: var(--accent-dark);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.subtitle {
    color: var(--muted);
    font-style: italic;
    margin: 0 0 20px;
}

/* ---- Mission / Highlight box ---- */
.highlight-box {
    margin: 20px 0 0;
    padding: 16px 20px;
    border-left: 3px solid var(--accent);
    background: rgba(167, 193, 168, 0.15);
    font-style: italic;
    color: #333;
}

.mission {
    color: var(--accent);
    font-style: italic;
    margin: 0 auto 20px;
    font-size: 1rem;
    text-align: center;
}

/* ---- News list ---- */
.news-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.news-list li {
    display: flex;
    align-items: baseline;
    padding: 6px 0;
    font-size: 0.93rem;
    position: relative;
}

.news-list li:has(.date)::after {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: 4.1em;
    right: 0;
    border-bottom: 1px solid var(--border);
}

.news-list li:not(:has(.date)) {
    border-bottom: 1px solid var(--border);
}

.news-list li:last-child {
    border-bottom: none;
}

.news-list li:last-child::after {
    display: none;
}

.date {
    color: var(--accent-dark);

    font-size: 0.83rem;
    margin-right: 6px;
    flex-shrink: 0;
}

/* ---- PI block ---- */
.pi-block {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    margin-top: 16px;
    flex-wrap: wrap;
}

.pi-block img {
    width: 160px;
    height: 200px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    flex-shrink: 0;
}

.pi-info .name {
    font-size: 1.15rem;
    font-weight: bold;
    margin-bottom: 4px;
}

.pi-info .role {
    color: var(--muted);
    margin: 0 0 8px;
    font-style: italic;
}

.pi-info p {
    margin: 0 0 4px;
    font-size: 0.9rem;
}

/* ---- Member grid ---- */
.member-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.member-card {
    padding: 14px;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.88rem;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.member-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
}

.member-card img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    object-position: top;
    background: #fff;
    border-radius: 4px;
    margin-bottom: 8px;
    display: block;
}

.member-card img[src*="hyunwoong_lim"] {
    object-fit: contain;
}

.member-card img[src*="myeongchun_kim"] {
    object-position: center 40%;
}

.member-card .name {
    font-weight: bold;
    margin-bottom: 3px;
}

.member-card .role {
    color: var(--muted);
    font-size: 0.82rem;
}

.member-card .email {
    margin-top: 4px;
}

/* ---- Research grid ---- */
.research-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .research-grid {
        grid-template-columns: 1fr;
    }
}

.research-card {
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 8px;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s, border-color 0.3s;
}

.research-card h3 {
    margin: 0 0 8px;
    font-size: 0.95rem;
    color: var(--accent-dark);
}

.research-card ul {
    margin: 0;
    padding-left: 18px;
    font-size: 0.87rem;
    color: var(--muted);
}

/* ---- Publication list ---- */
.pub-list {
    padding: 0 0 0 32px;
    margin: 0;
}

.pub-list li {
    padding: 10px 0 10px 8px;
    border-bottom: 1px solid var(--border);
    font-size: 0.92rem;
}

.pub-list li::marker {

    font-size: 0.82rem;
    color: var(--accent-dark);
    font-weight: bold;
}

.pub-list li:last-child {
    border-bottom: none;
}

#filter-label {
    font-size: 0.85rem;
    font-weight: normal;
    color: var(--accent-dark);
    font-style: italic;
    cursor: pointer;
}

#filter-label:hover {
    text-decoration: none;
}

.pub-authors {
    font-size: 0.82rem;
    color: var(--muted);
    margin-top: 2px;
}

.pub-venue {
    font-size: 0.8rem;
    color: var(--muted);
    margin-top: 2px;
    font-style: italic;
}

.badge-links a {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    font-size: 0;
    color: transparent;
    margin-right: 6px;
    margin-top: 3px;
    text-decoration: none;
    border: 1px solid var(--border);
    border-radius: 4px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 13px;
    vertical-align: middle;
    transition: border-color 0.15s, background-color 0.15s;
}

.badge-links a::after {
    content: "Paper";
    position: absolute;
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    padding: 3px 7px;
    background: #333;
    color: #fff;
    font-size: 0.7rem;
    border-radius: 3px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    z-index: 10;
}

.badge-links a[href*="alphaxiv"]::after { content: "alphaXiv"; }
.badge-links a[href*="github"]::after { content: "Code"; }
.badge-links a[href*="/poster/"]::after { content: "Poster"; }

.badge-links a:hover::after {
    opacity: 1;
}

.badge-links span {
    display: inline-block;
    font-size: 0.75rem;
    color: var(--muted);
    padding: 0;
    margin-right: 8px;
    margin-top: 3px;
    border-bottom: 1px dotted var(--border);
}

.badge-links a:hover {
    border-color: var(--accent-dark);
    background-color: rgba(0, 0, 0, 0.04);
}

/* Default: Paper icon (document) */
.badge-links a {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' y1='13' x2='8' y2='13'/><line x1='16' y1='17' x2='8' y2='17'/><line x1='10' y1='9' x2='8' y2='9'/></svg>");
}

/* alphaXiv: official logo */
.badge-links a[href*="alphaxiv"] {
    background-size: 14px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 718.41 504.47' fill='%23666'><polygon points='591.15 258.54 718.41 385.73 663.72 440.28 536.57 313.62 591.15 258.54'/><path d='M273.86.3c34.56-2.41,67.66,9.73,92.51,33.54l94.64,94.63-55.11,54.55-96.76-96.55c-16.02-12.7-37.67-12.1-53.19,1.11L54.62,288.82,0,234.23,204.76,29.57C223.12,13.31,249.27,2.02,273.86.3Z'/><path d='M663.79,1.29l54.62,54.58-418.11,417.9c-114.43,95.94-263.57-53.49-167.05-167.52l160.46-160.33,54.62,54.58-157.88,157.77c-33.17,40.32,18.93,91.41,58.66,57.48L663.79,1.29Z'/></svg>");
}

/* Poster icon: pinned poster */
.badge-links a[href*="/poster/"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='5' width='14' height='16' rx='1'/><line x1='9' y1='10' x2='15' y2='10'/><line x1='9' y1='14' x2='13' y2='14'/><circle cx='12' cy='5' r='2' fill='%23666'/></svg>");
}

/* Code: GitHub mark */
.badge-links a[href*="github"] {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23666'><path d='M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12'/></svg>");
}

.venue-tag {
    color: var(--muted);
    font-size: 0.8rem;
    display: block;
}

/* ---- Topic filter ---- */
.topic-filter {
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
    padding: 2px 4px;
    border-radius: 3px;
    margin: -2px -4px;
}

.topic-filter:hover {
    background: rgba(129, 154, 145, 0.1);
}

.topic-filter.active {
    background: rgba(129, 154, 145, 0.18);
    color: var(--accent-dark);
    font-weight: bold;
}

.research-card h3 {
    cursor: pointer;
}

.research-card.card-active {
    background: rgba(129, 154, 145, 0.12);
    border-color: var(--accent-dark);
    transition: all 0.3s ease;
}

.research-card:hover {
    background: rgba(129, 154, 145, 0.06);
    border-color: var(--accent-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

.pub-list li {
    transition: opacity 0.3s ease, max-height 0.3s ease;
}

.pub-list li.pub-hidden {
    opacity: 0;
    max-height: 0;
    padding: 0 0 0 36px;
    margin: 0;
    border: none;
    overflow: hidden;
}

/* ---- Icons ---- */
.email-icon,
.cv-icon,
.homepage-icon {
    color: var(--muted);
    display: inline-block;
    margin-top: 4px;
    transition: color 0.2s;
}

.email-icon:hover,
.cv-icon:hover,
.homepage-icon:hover {
    color: var(--accent-dark);
}

.email-icon svg,
.cv-icon svg,
.homepage-icon svg {
    width: 18px;
    height: 18px;
}

/* ---- Join page extras ---- */
ul {
    padding-left: 20px;
    margin: 8px 0 16px;
}

li {
    margin-bottom: 6px;
    font-size: 0.95rem;
}

/* ---- Footer ---- */
footer {
    margin-top: 80px;
    padding: 24px;
    border-top: 1px solid var(--border);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    font-size: 0.85rem;
    color: var(--muted);
}

/* ---- PI Page ---- */
.pi-page {
    max-width: 800px;
}

.pi-profile {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    margin-top: 24px;
    flex-wrap: wrap;
}

.pi-profile-left {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    flex: 1;
}

.pi-profile-left img {
    width: 160px;
    height: 200px;
    object-fit: cover;
    object-position: top;
    border-radius: 4px;
    flex-shrink: 0;
}

.pi-profile-info .role {
    color: var(--muted);
    font-style: italic;
    margin-bottom: 8px;
}

.pi-profile-info p {
    margin: 0 0 4px;
    font-size: 0.9rem;
}

.pi-toc {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.9rem;
    flex-shrink: 0;
    border-left: 2px solid var(--border);
    padding-left: 14px;
}

.pi-toc a {
    color: var(--accent-dark);
    text-decoration: none;
}

.pi-toc a:hover {
    text-decoration: underline;
}

@media (max-width: 700px) {
    .pi-profile {
        flex-direction: column;
    }

    .pi-profile-left {
        flex-direction: column;
    }

    .pi-toc {
        border-left: none;
        padding-left: 0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }
}

/* ---- Archive toggle ---- */
.archive-toggle {
    margin-top: 8px;
}

.archive-toggle summary,
.archive-year summary {
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--muted);
    padding: 6px 0;
    list-style: none;
}

.archive-toggle>summary::before,
.archive-year summary::before {
    content: "\25B6";
    display: inline-block;
    margin-right: 6px;
    transition: transform 0.2s;
}

.archive-toggle[open]>summary::before {
    transform: rotate(90deg);
}

.archive-year[open] summary::before {
    transform: rotate(90deg);
}

.archive-toggle summary:hover,
.archive-year summary:hover {
    color: var(--accent-dark);
}

.archive-toggle .news-list {
    margin-top: 4px;
}

.archive-year {
    margin-left: 12px;
}

/* ---- News year divider ---- */
.news-year-label {
    font-size: 0.78rem;
    font-weight: bold;
    color: var(--accent-dark);
    letter-spacing: 0.06em;
    padding: 10px 0 2px;
    border-bottom: 1px solid var(--accent-pale);
    margin-bottom: 2px;
}

/* ---- Workshop outline ---- */
.workshop-outline {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.88rem;
    border-left: 2px solid var(--border);
    padding-left: 14px;
    margin: 16px 0 8px;
}

.workshop-outline a {
    color: var(--accent-dark);
    text-decoration: none;
}

.workshop-outline a:hover {
    text-decoration: underline;
}

/* ---- Dao image swap ---- */
.dao-swap {
    position: relative;
    width: 100%;
    aspect-ratio: 1;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}

.dao-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    object-position: top;
    transition: opacity 0.5s ease;
    margin: 0 !important;
    border-radius: 0 !important;
}

.dao-hover {
    opacity: 0;
}

.dao-swap:hover .dao-default {
    opacity: 0;
}

.dao-swap:hover .dao-hover {
    opacity: 1;
}

/* ---- Wave Animation ---- */
.wave-hero {
    margin: 0;
    overflow: hidden;
}

.wave-hero canvas {
    width: 100%;
    display: block;
}

/* ---- Quick Links Grid ---- */
.quick-links {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 12px;
    padding: 0;
    margin: 0 0 24px;
    list-style: none;
}

.quick-links li {
    display: block;
    padding: 0;
    border: none;
    height: 100%;
}

.quick-links li:not(:has(.date)) {
    border-bottom: none;
}

.quick-links li a {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 12px 16px;
    background: var(--bg);
    border: 1px solid var(--accent-pale);
    border-radius: 8px;
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--accent-dark);
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.quick-links li a:hover {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(129, 154, 145, 0.2);
}