@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');







:root {



    --primary: #5b48d4;



    --primary-dark: #2e1f8c;



    --primary-light: #efedff;



    --accent: #a893ff;



    --accent-soft: #d9d2ff;



    --text: #0d1a3d;



    --text-light: #2f3a5c;



    --muted: #6a7290;



    --border: #e0e2f0;



    --white: #ffffff;



    --background: #f6f7fe;



    --shadow-sm: 0 8px 24px rgba(54, 49, 125, 0.08);



    --shadow-md: 0 18px 44px rgba(64, 54, 160, 0.14);



    --shadow-lg: 0 26px 70px rgba(46, 31, 140, 0.22);



}







* {



    margin: 0;



    padding: 0;



    box-sizing: border-box;



}







html {



    scroll-behavior: smooth;



}







body {



    min-height: 100vh;



    overflow-x: hidden;



    color: var(--text);



    font-family: 'Plus Jakarta Sans', system-ui, -apple-system, sans-serif;



    line-height: 1.65;



    background:



        radial-gradient(circle at 8% 8%, rgba(168, 147, 255, 0.26), transparent 28%),



        radial-gradient(circle at 92% 24%, rgba(144, 196, 255, 0.22), transparent 30%),



        radial-gradient(circle at 50% 100%, rgba(202, 188, 255, 0.18), transparent 32%),



        var(--background);



    -webkit-font-smoothing: antialiased;



}







body.spotlight-open {



    overflow: hidden;



}







img {



    display: block;



    max-width: 100%;



}







a {



    color: inherit;



    text-decoration: none;



}







button {



    font: inherit;



}







/* =========================================================



   SCROLL PROGRESS



========================================================= */



.scroll-progress {



    position: fixed;



    top: 0;



    left: 0;



    z-index: 10000;



    width: 100%;



    height: 3px;



    pointer-events: none;



}







.scroll-progress span {



    display: block;



    width: 100%;



    height: 100%;



    transform: scaleX(0);



    transform-origin: left center;



    background: linear-gradient(90deg, #5b48d4, #a893ff, #5b48d4);



}







/* =========================================================



   SITE HEADER



========================================================= */



.site-header {



    position: sticky;



    top: 12px;



    z-index: 999;



    width: min(1150px, calc(100% - 32px));



    margin: 12px auto 0;



}







.header-inner {



    position: relative;



    display: flex;



    align-items: center;



    gap: 22px;



    padding: 10px 18px;



    background: rgba(255, 255, 255, 0.96);



    border: 1px solid rgba(220, 222, 240, 0.9);



    border-radius: 14px;



    box-shadow: 0 6px 22px rgba(56, 52, 125, 0.07);



    backdrop-filter: blur(15px);



    -webkit-backdrop-filter: blur(15px);



    transition: box-shadow 0.3s ease, background 0.3s ease;



}







.site-header.scrolled .header-inner {



    background: rgba(255,255,255,.985);



    box-shadow: 0 14px 34px rgba(54, 51, 110, 0.14);



}







.header-brand {



    display: flex;



    align-items: center;



    gap: 10px;



    flex-shrink: 0;



    color: var(--primary-dark);



    font-family: 'Sora', sans-serif;



    font-size: 13px;



    font-weight: 800;



    letter-spacing: .1em;



}







.header-brand img {



    width: 28px;



    height: 28px;



    padding: 3px;



    object-fit: contain;



    border-radius: 50%;



    background: rgba(118, 98, 233, .12);



}







.header-collapse {



    display: flex;



    align-items: center;



    gap: 22px;



    margin-left: auto;



}







.header-nav {



    display: flex;



    align-items: center;



    gap: 4px;



}







.header-nav a {



    padding: 7px 12px;



    border-radius: 8px;



    color: #3a4467;



    font-size: 11.5px;



    font-weight: 600;



    transition: color .2s ease, background .2s ease, transform .2s ease;



}







.header-nav a:hover,



.header-nav a.is-active {



    color: var(--primary);



    background: rgba(118, 98, 233, .09);



}







.header-nav a:hover {



    transform: translateY(-1px);



}







.header-actions {



    display: flex;



    align-items: center;



    gap: 10px;



    flex-shrink: 0;



}







.header-profile {



    width: 38px;



    height: 38px;



    display: grid;



    place-items: center;



    flex-shrink: 0;



    overflow: hidden;



    border: 1px solid #d9d2ff;



    border-radius: 50%;



    background: linear-gradient(135deg, #f0edff, #e0d9ff);



    transition: transform .2s ease, box-shadow .2s ease;



}







.header-profile:hover {



    transform: translateY(-2px) scale(1.05);



    box-shadow: 0 8px 18px rgba(98, 82, 220, .28);



}







.header-profile img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.header-cta {



    display: inline-flex;



    align-items: center;



    padding: 10px 20px;



    border-radius: 999px;



    color: #fff;



    font-family: 'Sora', sans-serif;



    font-size: 11.5px;



    font-weight: 700;



    background: linear-gradient(135deg, #7765ed, #5945ce);



    box-shadow: 0 7px 17px rgba(98, 82, 220, .28);



    transition: transform .25s ease, box-shadow .25s ease;



}







.header-cta:hover {



    transform: translateY(-2px);



    box-shadow: 0 12px 24px rgba(98, 82, 220, .36);



}







.logout-btn {



    display: inline-flex;



    align-items: center;



    gap: 6px;



    padding: 8px 14px;



    border: 1px solid rgba(217, 74, 94, .22);



    border-radius: 999px;



    color: #b3324a;



    font-family: 'Sora', sans-serif;



    font-size: 11px;



    font-weight: 700;



    background: rgba(217, 74, 94, .08);



    transition: transform .2s ease, background .2s ease, color .2s ease;



}







.logout-btn svg {



    width: 14px;



    height: 14px;



}







.logout-btn:hover {



    color: #fff;



    background: linear-gradient(135deg, #e46476, #c93a4d);



    border-color: transparent;



    transform: translateY(-2px);



}







.nav-toggle {



    display: none;



}







.nav-toggle-label {



    display: none;



}







/* =========================================================



   PAGE



========================================================= */



.about-page {



    width: min(1120px, calc(100% - 32px));



    margin: 24px auto 90px;



}







/* =========================================================



   HERO



========================================================= */



.research-hero {



    position: relative;



    min-height: 390px;



    display: grid;



    place-items: center;



    overflow: hidden;



    isolation: isolate;



    margin-bottom: 24px;



    border: 1px solid rgba(214, 211, 242, .94);



    border-radius: 28px;



    background:



        radial-gradient(circle at 50% 42%, rgba(255,255,255,.98) 0 15%, rgba(255,255,255,.7) 35%, transparent 62%),



        linear-gradient(145deg, #f8f7ff 0%, #eeebff 55%, #eef5ff 100%);



    box-shadow: var(--shadow-md);



}







.research-hero::before,



.research-hero::after {



    content: "";



    position: absolute;



    width: 330px;



    height: 330px;



    border-radius: 50%;



    filter: blur(4px);



    opacity: .55;



    z-index: -1;



}







.research-hero::before {



    left: -130px;



    top: -130px;



    background: radial-gradient(circle, rgba(140, 112, 255, .42), transparent 68%);



}







.research-hero::after {



    right: -130px;



    bottom: -130px;



    background: radial-gradient(circle, rgba(113, 184, 255, .32), transparent 68%);



}







.research-hero h1 {



    position: relative;



    z-index: 4;



    padding: 18px 28px;



    text-align: center;



    color: transparent;



    font-family: 'Sora', sans-serif;



    font-size: clamp(34px, 7vw, 74px);



    line-height: 1;



    font-weight: 800;



    letter-spacing: -.055em;



    background: linear-gradient(135deg, #21166f 5%, #5b48d4 58%, #947ef1 100%);



    -webkit-background-clip: text;



    background-clip: text;



    filter: drop-shadow(0 8px 24px rgba(91,72,212,.12));



}







.hero-orbit {



    position: absolute;



    width: min(720px, 80vw);



    aspect-ratio: 1;



    border: 1px dashed rgba(91,72,212,.16);



    border-radius: 50%;



    animation: orbitSpin 34s linear infinite;



}







.hero-orbit::before,



.hero-orbit::after {



    content: "";



    position: absolute;



    inset: 12%;



    border: 1px dashed rgba(91,72,212,.12);



    border-radius: 50%;



}







.hero-orbit::after {



    inset: 28%;



}







.orbit-dot {



    --angle: calc(var(--i) * 40deg);



    position: absolute;



    left: 50%;



    top: 50%;



    width: 9px;



    height: 9px;



    margin: -4.5px;



    border-radius: 50%;



    background: linear-gradient(135deg, #8d77f1, #5b48d4);



    box-shadow: 0 0 0 6px rgba(91,72,212,.08);



    transform:



        rotate(var(--angle))



        translateX(min(36vw, 320px))



        rotate(calc(var(--angle) * -1));



}







@keyframes orbitSpin {



    to { transform: rotate(360deg); }



}







.hero-stack {



    position: absolute;



    inset: 0;



    pointer-events: none;



}







.stack-card {



    position: absolute;



    width: 98px;



    aspect-ratio: 4 / 5;



    overflow: hidden;



    border: 6px solid rgba(255,255,255,.92);



    border-radius: 20px;



    background: #ece9ff;



    box-shadow: 0 18px 35px rgba(64,54,160,.18);



    animation: stackFloat 5s ease-in-out infinite;



}







.stack-card img {



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.stack-1 { left: 8%; top: 18%; transform: rotate(-10deg); }



.stack-2 { right: 10%; top: 15%; transform: rotate(9deg); animation-delay: .6s; }



.stack-3 { left: 18%; bottom: 9%; transform: rotate(7deg); animation-delay: 1.2s; }



.stack-4 { right: 20%; bottom: 8%; transform: rotate(-8deg); animation-delay: 1.8s; }



.stack-5 { left: 48%; top: 6%; width: 76px; transform: rotate(4deg); animation-delay: 2.4s; }







@keyframes stackFloat {



    0%,100% { translate: 0 0; }



    50% { translate: 0 -10px; }



}







.hero-random {



    position: absolute;



    right: 22px;



    bottom: 22px;



    z-index: 5;



    width: 48px;



    height: 48px;



    display: grid;



    place-items: center;



    border: 1px solid rgba(91,72,212,.18);



    border-radius: 50%;



    color: var(--primary);



    background: rgba(255,255,255,.88);



    box-shadow: 0 10px 24px rgba(66,55,160,.13);



    cursor: pointer;



    backdrop-filter: blur(12px);



    transition: transform .25s ease, box-shadow .25s ease, background .25s ease;



}







.hero-random:hover {



    transform: translateY(-4px) rotate(8deg);



    background: #fff;



    box-shadow: 0 15px 28px rgba(66,55,160,.2);



}







.hero-random svg {



    width: 20px;



    height: 20px;



}







/* =========================================================



   RESEARCHER BOARD



========================================================= */



.researcher-board {



    display: grid;



    grid-template-columns: repeat(2, minmax(0,1fr));



    gap: 20px;



    align-items: start;



}







.researcher-card {



    position: relative;



    overflow: hidden;



    padding: 22px;



    border: 1px solid rgba(223,221,242,.98);



    border-radius: 22px;



    background: rgba(255,255,255,.92);



    box-shadow: var(--shadow-sm);



    outline: none;



    isolation: isolate;



    cursor: pointer;



    transition:



        transform .35s cubic-bezier(.2,.7,.2,1),



        box-shadow .35s ease,



        border-color .35s ease;



}







.researcher-card:nth-child(3n + 2) {



    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(247,244,255,.96));



}







.researcher-card:nth-child(3n) {



    background: linear-gradient(160deg, rgba(255,255,255,.96), rgba(244,248,255,.96));



}







.researcher-card:hover,



.researcher-card:focus-visible,



.researcher-card.is-open {



    transform: translateY(-6px);



    border-color: rgba(168,147,255,.72);



    box-shadow: var(--shadow-md);



}







.card-glow {



    position: absolute;



    width: 180px;



    height: 180px;



    right: -90px;



    top: -90px;



    border-radius: 50%;



    background: radial-gradient(circle, rgba(168,147,255,.24), transparent 70%);



    pointer-events: none;



    z-index: -1;



    transition: transform .4s ease;



}







.researcher-card:hover .card-glow {



    transform: scale(1.35);



}







.researcher-head {



    display: grid;



    grid-template-columns: 82px minmax(0,1fr) 38px;



    gap: 16px;



    align-items: center;



}







.portrait-shell {



    position: relative;



    width: 82px;



    height: 82px;



    overflow: hidden;



    border: 4px solid rgba(255,255,255,.96);



    border-radius: 22px;



    background: linear-gradient(145deg,#eeeaff,#ddd5ff);



    box-shadow:



        0 0 0 1px rgba(168,147,255,.34),



        0 10px 22px rgba(87,70,180,.16);



    transform: rotate(-2deg);



    transition: transform .35s cubic-bezier(.2,.7,.2,1);



}







.researcher-card:nth-child(even) .portrait-shell {



    transform: rotate(2deg);



}







.researcher-card:hover .portrait-shell {



    transform: rotate(0) scale(1.05);



}







.researcher-image {



    position: relative;



    z-index: 2;



    width: 100%;



    height: 100%;



    object-fit: cover;



}







.portrait-fallback,



.spotlight-fallback {



    position: absolute;



    inset: 0;



    display: grid;



    place-items: center;



    color: var(--primary-dark);



    font-family: 'Sora', sans-serif;



    font-size: 28px;



    font-weight: 800;



    background:



        radial-gradient(circle at 30% 20%, rgba(255,255,255,.9), transparent 34%),



        linear-gradient(145deg,#eeeaff,#dcd5ff);



}







.researcher-image:not(.is-missing) + .portrait-fallback {



    display: none;



}







.researcher-title {



    min-width: 0;



}







.researcher-title h2 {



    color: var(--text);



    font-family: 'Sora', sans-serif;



    font-size: 15px;



    line-height: 1.3;



    font-weight: 800;



    letter-spacing: -.02em;



}







.researcher-role {



    margin-top: 5px;



    color: var(--primary);



    font-size: 11.5px;



    font-weight: 700;



}







.card-expand {



    width: 38px;



    height: 38px;



    display: grid;



    place-items: center;



    border: 1px solid rgba(91,72,212,.16);



    border-radius: 12px;



    color: var(--primary);



    background: rgba(91,72,212,.06);



    cursor: pointer;



    transition: transform .3s ease, background .25s ease;



}







.card-expand:hover {



    background: rgba(91,72,212,.12);



}







.card-expand svg {



    width: 17px;



    height: 17px;



    transition: transform .35s ease;



}







.researcher-card.is-open .card-expand svg {



    transform: rotate(45deg);



}







.reflection {



    position: relative;



    max-height: 150px;



    overflow: hidden;



    margin-top: 18px;



    color: var(--text-light);



    font-size: 12.2px;



    line-height: 1.85;



    transition: max-height .7s cubic-bezier(.2,.7,.2,1);



}







.reflection::after {



    content: "";



    position: absolute;



    left: 0;



    right: 0;



    bottom: 0;



    height: 72px;



    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.98));



    pointer-events: none;



    transition: opacity .3s ease;



}







.researcher-card:nth-child(3n + 2) .reflection::after {



    background: linear-gradient(to bottom, transparent, rgba(247,244,255,.98));



}







.researcher-card:nth-child(3n) .reflection::after {



    background: linear-gradient(to bottom, transparent, rgba(244,248,255,.98));



}







.researcher-card.is-open .reflection {



    max-height: 1800px;



}







.researcher-card.is-open .reflection::after {



    opacity: 0;



}







.reflection p + p {



    margin-top: 14px;



}







.reflection strong {



    color: var(--primary-dark);



}







.card-pulse {



    display: flex;



    gap: 5px;



    margin-top: 16px;



}







.card-pulse span {



    width: 5px;



    height: 5px;



    border-radius: 50%;



    background: rgba(91,72,212,.2);



    transition: transform .3s ease, background .3s ease;



}







.researcher-card:hover .card-pulse span,



.researcher-card.is-open .card-pulse span {



    background: rgba(91,72,212,.72);



}







.researcher-card:hover .card-pulse span:nth-child(2),



.researcher-card.is-open .card-pulse span:nth-child(2) {



    transform: translateY(-3px);



}







.researcher-card:hover .card-pulse span:nth-child(3),



.researcher-card.is-open .card-pulse span:nth-child(3) {



    transform: translateY(-6px);



}







/* =========================================================



   SPOTLIGHT



========================================================= */



.spotlight {



    position: fixed;



    inset: 0;



    z-index: 5000;



    display: grid;



    grid-template-columns: 52px minmax(0,900px) 52px;



    gap: 16px;



    align-items: center;



    justify-content: center;



    padding: 40px;



    background: rgba(23,19,63,.64);



    backdrop-filter: blur(18px);



    -webkit-backdrop-filter: blur(18px);



    opacity: 0;



    visibility: hidden;



    pointer-events: none;



    transition: opacity .35s ease, visibility .35s ease;



}







.spotlight.is-visible {



    opacity: 1;



    visibility: visible;



    pointer-events: auto;



}







.spotlight-card {



    max-height: min(84vh, 840px);



    min-height: 0;



    display: grid;



    grid-template-columns: minmax(240px, .7fr) minmax(0,1.3fr);



    overflow: hidden;



    border: 1px solid rgba(255,255,255,.65);



    border-radius: 28px;



    background: rgba(255,255,255,.97);



    box-shadow: 0 30px 90px rgba(13,8,60,.35);



    transform: translateY(18px) scale(.97);



    transition: transform .4s cubic-bezier(.2,.7,.2,1);



}







.spotlight.is-visible .spotlight-card {



    transform: translateY(0) scale(1);



}







.spotlight-photo {



    position: relative;



    min-height: 360px;



    overflow: hidden;



    background: linear-gradient(145deg,#eeeaff,#d9d1ff);



}







.spotlight-photo::after {



    content: "";



    position: absolute;



    inset: auto 0 0;



    height: 34%;



    background: linear-gradient(to top, rgba(46,31,140,.18), transparent);



    pointer-events: none;



}







.spotlight-photo img {



    position: relative;



    z-index: 2;



    width: 100%;



    height: 100%;



    min-height: 360px;



    object-fit: cover;



}







.spotlight-photo img:not(.is-missing) + .spotlight-fallback {



    display: none;



}







.spotlight-copy {



    min-width: 0;



    min-height: 0;



    overflow-y: auto;



    overscroll-behavior: contain;



    -webkit-overflow-scrolling: touch;



    padding: 36px 38px 40px;



}







.spotlight-copy h2 {



    color: var(--text);



    font-family: 'Sora', sans-serif;



    font-size: clamp(20px,3vw,31px);



    line-height: 1.2;



    font-weight: 800;



    letter-spacing: -.035em;



}







.spotlight-role {



    margin-top: 7px;



    color: var(--primary);



    font-size: 12px;



    font-weight: 700;



}







.spotlight-role:empty {



    display: none;



}







.spotlight-reflection {



    margin-top: 24px;



    color: var(--text-light);



    font-size: 13px;



    line-height: 1.9;



}







.spotlight-reflection p + p {



    margin-top: 16px;



}







.spotlight-reflection strong {



    color: var(--primary-dark);



}







.spotlight-nav,



.spotlight-close {



    border: 1px solid rgba(255,255,255,.28);



    color: #fff;



    background: rgba(255,255,255,.12);



    cursor: pointer;



    backdrop-filter: blur(10px);



    transition: transform .25s ease, background .25s ease;



}







.spotlight-nav {



    width: 52px;



    height: 52px;



    display: grid;



    place-items: center;



    border-radius: 50%;



}







.spotlight-nav:hover,



.spotlight-close:hover {



    background: rgba(255,255,255,.22);



    transform: scale(1.08);



}







.spotlight-nav svg {



    width: 21px;



    height: 21px;



}







.spotlight-close {



    position: absolute;



    right: 28px;



    top: 28px;



    width: 44px;



    height: 44px;



    display: grid;



    place-items: center;



    border-radius: 14px;



}







.spotlight-close svg {



    width: 19px;



    height: 19px;



}







/* =========================================================



   REVEAL



========================================================= */



.researcher-card {



    opacity: 0;



    transform: translateY(24px);



}







.researcher-card.is-visible {



    opacity: 1;



    transform: translateY(0);



}







.researcher-card.is-visible:hover,



.researcher-card.is-visible:focus-visible,



.researcher-card.is-visible.is-open {



    transform: translateY(-6px);



}







/* =========================================================



   TABLET



========================================================= */



@media (max-width: 900px) {



    .researcher-board {



        grid-template-columns: 1fr;



    }







    .research-hero {



        min-height: 340px;



    }







    .stack-card {



        width: 82px;



    }







    .spotlight-card {



        grid-template-columns: 220px minmax(0,1fr);



    }







    .spotlight {



        padding: 26px;



    }



}







/* =========================================================



   MOBILE NAV + PAGE



========================================================= */



@media (max-width: 780px) {



    .site-header {



        top: 8px;



        width: calc(100% - 20px);



        margin-top: 8px;



    }







    .header-inner {



        flex-wrap: wrap;



        gap: 12px;



        padding: 10px 14px;



    }







    .header-brand {



        gap: 8px;



    }







    .header-brand img {



        width: 24px;



        height: 24px;



    }







    .header-brand span {



        font-size: 12px;



    }







    .nav-toggle {



        position: absolute;



        opacity: 0;



        pointer-events: none;



    }







    .nav-toggle-label {



        display: flex;



        width: 40px;



        height: 40px;



        margin-left: auto;



        align-items: center;



        justify-content: center;



        flex-direction: column;



        gap: 4px;



        border: 1px solid rgba(98,82,220,.15);



        border-radius: 11px;



        background: rgba(98,82,220,.08);



        cursor: pointer;



    }







    .nav-toggle-label span {



        display: block;



        width: 18px;



        height: 2px;



        border-radius: 999px;



        background: var(--primary);



        transform-origin: center;



        transition: transform .35s cubic-bezier(.2,.7,.2,1), opacity .25s ease;



    }







    .header-collapse {



        flex: 0 0 100%;



        width: 100%;



        flex-direction: column;



        align-items: stretch;



        gap: 6px;



        margin-left: 0;



        max-height: 0;



        overflow: hidden;



        opacity: 0;



        transform: translateY(-8px);



        pointer-events: none;



        transition:



            max-height .45s cubic-bezier(.2,.7,.2,1),



            opacity .25s ease,



            transform .3s ease,



            margin-top .35s ease,



            padding-top .35s ease;



    }







    .nav-toggle:checked ~ .header-collapse {



        max-height: 700px;



        opacity: 1;



        transform: translateY(0);



        margin-top: 10px;



        padding-top: 12px;



        border-top: 1px solid var(--border);



        pointer-events: auto;



    }







    .header-nav {



        width: 100%;



        flex-direction: column;



        align-items: stretch;



        gap: 6px;



    }







    .header-nav a {



        width: 100%;



        padding: 12px 14px;



        text-align: center;



        font-size: 12.5px;



        border: 1px solid rgba(98,82,220,.12);



        border-radius: 10px;



        background: rgba(98,82,220,.06);



    }







    .header-actions {



        width: 100%;



        justify-content: space-between;



        margin-top: 8px;



        padding-top: 12px;



        border-top: 1px dashed rgba(98,82,220,.22);



    }







    .header-profile {



        width: 46px;



        height: 46px;



    }







    .logout-btn {



        flex: 1;



        max-width: 220px;



        justify-content: center;



        padding: 13px 18px;



        border-radius: 12px;



        font-size: 12.5px;



    }







    .header-cta {



        width: 100%;



        justify-content: center;



        padding: 13px 18px;



        font-size: 12.5px;



    }







    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {



        transform: translateY(6px) rotate(45deg);



    }







    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {



        opacity: 0;



        transform: scaleX(0);



    }







    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {



        transform: translateY(-6px) rotate(-45deg);



    }







    .about-page {



        width: calc(100% - 20px);



        margin-top: 18px;



    }







    .research-hero {



        min-height: 310px;



        border-radius: 22px;



    }







    .research-hero h1 {



        font-size: clamp(32px, 11vw, 54px);



        max-width: 90%;



    }







    .stack-card {



        width: 70px;



        border-width: 4px;



        border-radius: 15px;



    }







    .stack-1 { left: 4%; top: 15%; }



    .stack-2 { right: 5%; top: 13%; }



    .stack-3 { left: 10%; bottom: 8%; }



    .stack-4 { right: 11%; bottom: 7%; }



    .stack-5 { display: none; }







    .hero-random {



        right: 14px;



        bottom: 14px;



        width: 43px;



        height: 43px;



    }







    .researcher-card {



        padding: 18px;



        border-radius: 19px;



    }







    .researcher-head {



        grid-template-columns: 68px minmax(0,1fr) 36px;



        gap: 13px;



    }







    .portrait-shell {



        width: 68px;



        height: 68px;



        border-radius: 18px;



    }







    .researcher-title h2 {



        font-size: 13.5px;



    }







    .researcher-role {



        font-size: 10.5px;



    }







    .reflection {



        font-size: 11.5px;



        line-height: 1.8;



        max-height: 135px;



    }







    .spotlight {



        grid-template-columns: 44px minmax(0,1fr) 44px;



        gap: 8px;



        padding: 18px 10px;



    }







    .spotlight-card {



        width: min(100%, 680px);



        height: min(84vh, 760px);



        max-height: 84vh;



        min-height: 0;



        grid-template-columns: 1fr;



        grid-template-rows: minmax(180px, 30vh) minmax(0, 1fr);



        border-radius: 22px;



        overflow: hidden;



    }







    .spotlight-photo {



        min-height: 0;



        height: 100%;



        max-height: none;



    }







    .spotlight-photo img {



        width: 100%;



        height: 100%;



        min-height: 0;



        max-height: none;



        object-fit: cover;



    }







    .spotlight-copy {



        min-height: 0;



        height: 100%;



        overflow-y: auto;



        overscroll-behavior-y: contain;



        -webkit-overflow-scrolling: touch;



        scrollbar-gutter: stable;



        padding: 22px 20px 34px;



    }







    .spotlight-reflection {



        padding-bottom: 8px;



    }







    .spotlight-copy h2 {



        font-size: 20px;



    }







    .spotlight-reflection {



        margin-top: 18px;



        font-size: 11.5px;



        line-height: 1.8;



    }







    .spotlight-nav {



        width: 42px;



        height: 42px;



    }







    .spotlight-close {



        right: 12px;



        top: 12px;



        width: 40px;



        height: 40px;



        z-index: 4;



    }



}







@media (max-width: 520px) {



    .research-hero {



        min-height: 270px;



    }







    .stack-card {



        width: 58px;



    }







    .researcher-head {



        grid-template-columns: 60px minmax(0,1fr) 34px;



        gap: 11px;



    }







    .portrait-shell {



        width: 60px;



        height: 60px;



        border-radius: 16px;



    }







    .researcher-title h2 {



        font-size: 12.5px;



    }







    .card-expand {



        width: 34px;



        height: 34px;



    }







    .spotlight {



        grid-template-columns: 1fr;



        padding: 14px;



    }







    .spotlight-nav {



        position: absolute;



        top: 50%;



        z-index: 6;



        transform: translateY(-50%);



    }







    .spotlight-nav:hover {



        transform: translateY(-50%) scale(1.06);



    }







    .spotlight-prev {



        left: 8px;



    }







    .spotlight-next {



        right: 8px;



    }







    .spotlight-card {



        width: 100%;



        height: 88vh;



        max-height: 88vh;



        grid-template-rows: minmax(150px, 25vh) minmax(0, 1fr);



    }







    .spotlight-copy {



        padding: 20px 18px 30px;



    }



}







@media (max-width: 420px) {



    .header-inner {



        padding: 9px 12px;



        gap: 10px;



    }







    .header-brand img {



        width: 22px;



        height: 22px;



    }







    .header-brand span {



        font-size: 11px;



        letter-spacing: .08em;



    }







    .nav-toggle-label {



        width: 36px;



        height: 36px;



        border-radius: 10px;



    }







    .nav-toggle-label span {



        width: 16px;



    }







    .research-hero h1 {



        font-size: 34px;



    }







    .researcher-card {



        padding: 16px;



    }







    .reflection {



        font-size: 11px;



    }



}







@media (prefers-reduced-motion: reduce) {



    *,



    *::before,



    *::after {



        animation-duration: .01ms !important;



        animation-iteration-count: 1 !important;



        transition-duration: .01ms !important;



        scroll-behavior: auto !important;



    }



}



/* ============================================================

   PERSONIUM HEADER — ENHANCED VERSION

   HEADER ONLY. About-page content is untouched.

   ============================================================ */



.site-header {

    position: sticky;

    top: 14px;

    z-index: 999;

    width: min(1160px, calc(100% - 32px));

    margin: 14px auto 0;

}



.header-inner {

    position: relative;

    min-height: 58px;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 9px 12px 9px 16px;

    background: rgba(255, 255, 255, 0.97);

    border: 1px solid rgba(220, 222, 240, 0.92);

    border-radius: 17px;

    box-shadow: 0 10px 30px rgba(56, 52, 125, 0.10);

    backdrop-filter: blur(16px);

    -webkit-backdrop-filter: blur(16px);

}



.site-header.scrolled .header-inner {

    background: rgba(255, 255, 255, 0.99);

    box-shadow: 0 16px 38px rgba(54, 51, 110, 0.15);

}



.header-brand {

    display: flex;

    align-items: center;

    gap: 9px;

    flex: 0 0 auto;

    color: var(--primary-dark);

    font-family: 'Sora', sans-serif;

    font-size: 13px;

    font-weight: 800;

    letter-spacing: 0.09em;

}



.header-brand img {

    width: 30px;

    height: 30px;

    padding: 3px;

    object-fit: contain;

    border: 1px solid rgba(118, 98, 233, 0.14);

    border-radius: 10px;

    background: linear-gradient(145deg, #f1eeff, #e4ddff);

}



.header-collapse {

    min-width: 0;

    flex: 1 1 auto;

    display: flex;

    align-items: center;

    justify-content: flex-end;

    gap: 14px;

    margin-left: auto;

}



.header-nav {

    min-width: 0;

    display: flex;

    align-items: center;

    gap: 3px;

    padding: 3px;

    background: rgba(118, 98, 233, 0.045);

    border: 1px solid rgba(118, 98, 233, 0.08);

    border-radius: 11px;

}



.header-nav a {

    padding: 7px 10px;

    border-radius: 8px;

    color: #3a4467;

    font-size: 11px;

    font-weight: 650;

    white-space: nowrap;

    transition:

        color 0.2s ease,

        background 0.2s ease,

        transform 0.2s ease;

}



.header-nav a:hover,

.header-nav a.is-active,

.header-nav a:focus-visible {

    color: var(--primary-dark);

    background: #fff;

    outline: none;

}



.header-nav a:hover,

.header-nav a:focus-visible {

    transform: translateY(-1px);

}



.header-actions {

    flex: 0 0 auto;

    min-width: max-content;

    display: flex;

    align-items: center;

    gap: 8px;

}





/* Compact PC profile — prevents collision with Logout */

.header-profile {

    width: 42px;

    min-width: 42px;

    height: 42px;

    display: inline-grid;

    place-items: center;

    padding: 3px;

    flex: 0 0 42px;

    overflow: visible;

    color: var(--primary);

    border: 1px solid rgba(118, 98, 233, 0.18);

    border-radius: 12px;

    background: linear-gradient(145deg, #f7f5ff, #ece8ff);

    box-shadow: 0 5px 13px rgba(98, 82, 220, 0.10);

    transition:

        transform 0.22s ease,

        border-color 0.22s ease,

        box-shadow 0.22s ease;

}



.header-profile:hover,

.header-profile:focus-visible {

    transform: translateY(-2px);

    border-color: rgba(118, 98, 233, 0.34);

    box-shadow: 0 10px 22px rgba(98, 82, 220, 0.17);

    outline: none;

}



.header-profile-avatar {

    width: 34px;

    height: 34px;

    display: grid;

    place-items: center;

    overflow: hidden;

    border-radius: 9px;

    background: linear-gradient(145deg, #f1eeff, #ded7ff);

}



.header-profile-avatar > img {

    width: 100%;

    height: 100%;

    padding: 0;

    object-fit: cover;

    object-position: center;

    border-radius: 9px;

}



.header-default-profile {

    width: 100%;

    height: 100%;

    display: grid;

    place-items: center;

    color: var(--primary);

}



.header-default-profile svg {

    width: 20px;

    height: 20px;

}



.header-profile-copy {

    display: none;

}





/* Logout stays separate from profile */

.logout-btn {

    min-width: 82px;

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 6px;

    flex: 0 0 auto;

    padding: 8px 12px;

    color: #b3324a;

    font-family: 'Sora', sans-serif;

    font-size: 10.5px;

    font-weight: 700;

    border: 1px solid rgba(217, 74, 94, 0.20);

    border-radius: 12px;

    background: rgba(217, 74, 94, 0.06);

    white-space: nowrap;

    transition:

        transform 0.2s ease,

        background 0.2s ease,

        color 0.2s ease,

        box-shadow 0.2s ease;

}



.logout-btn svg {

    width: 14px;

    height: 14px;

}



.logout-btn:hover,

.logout-btn:focus-visible {

    color: #fff;

    background: linear-gradient(135deg, #e46476, #c93a4d);

    border-color: transparent;

    transform: translateY(-2px);

    box-shadow: 0 8px 18px rgba(217, 74, 94, 0.25);

    outline: none;

}



.header-cta {

    min-height: 42px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 9px 17px;

    color: #fff;

    background: linear-gradient(135deg, #7765ed, #5945ce);

    border-radius: 12px;

    font-family: 'Sora', sans-serif;

    font-size: 10.5px;

    font-weight: 700;

    white-space: nowrap;

    box-shadow: 0 7px 17px rgba(98, 82, 220, 0.25);

}



.nav-toggle {

    display: none;

}



.nav-toggle-label {

    display: none;

}





/* ============================================================

   SMALLER PC / TABLET HEADER — 651px to 900px

   ============================================================ */

@media (min-width: 651px) and (max-width: 900px) {



    .site-header {

        width: calc(100% - 24px);

    }



    .header-inner {

        gap: 10px;

        padding-left: 12px;

        padding-right: 10px;

    }



    .header-brand {

        gap: 7px;

        font-size: 11px;

    }



    .header-brand img {

        width: 28px;

        height: 28px;

    }



    .nav-toggle-label {

        display: none;

    }



    .header-collapse {

        width: auto;

        max-height: none;

        margin: 0 0 0 auto;

        padding: 0;

        flex: 1 1 auto;

        display: flex;

        flex-direction: row;

        align-items: center;

        justify-content: flex-end;

        gap: 8px;

        overflow: visible;

        opacity: 1;

        transform: none;

        border-top: 0;

        pointer-events: auto;

        transition: none;

    }



    .header-nav {

        width: auto;

        flex-direction: row;

        gap: 1px;

        padding: 2px;

    }



    .header-nav a {

        width: auto;

        padding: 6px 7px;

        font-size: 9.4px;

        border: 0;

        background: transparent;

    }



    .header-actions {

        width: auto;

        margin: 0;

        padding: 0;

        flex-direction: row;

        gap: 6px;

        border-top: 0;

    }



    .header-profile {

        width: 38px;

        min-width: 38px;

        height: 38px;

        flex-basis: 38px;

    }



    .header-profile-avatar {

        width: 30px;

        height: 30px;

    }



    .logout-btn {

        min-width: 38px;

        min-height: 38px;

        width: 38px;

        padding: 0;

    }



    .logout-btn span {

        display: none;

    }



    .header-cta {

        width: auto;

        min-height: 38px;

        padding: 8px 12px;

        font-size: 9.5px;

    }

}





/* ============================================================

   MOBILE HEADER — ≤ 650px

   ============================================================ */

@media (max-width: 650px) {



    .site-header {

        top: 10px;

        width: calc(100% - 16px);

        margin: 8px auto 0;

    }



    .header-inner {

        min-height: 54px;

        padding: 8px 10px 8px 11px;

        display: flex;

        flex-wrap: wrap;

        align-items: center;

        justify-content: space-between;

        gap: 0;

        row-gap: 8px;

        border-radius: 16px;

        box-shadow: 0 10px 28px rgba(48, 40, 108, 0.12);

    }



    .header-brand {

        min-width: 0;

        margin-right: auto;

        gap: 8px;

        font-size: 12px;

        letter-spacing: 0.075em;

    }



    .header-brand img {

        width: 28px;

        height: 28px;

        padding: 2px;

        border-radius: 9px;

    }



    .nav-toggle {

        position: absolute;

        opacity: 0;

        pointer-events: none;

    }



    .nav-toggle-label {

        width: 36px;

        height: 36px;

        margin-left: 10px;

        display: flex;

        flex-shrink: 0;

        align-items: center;

        justify-content: center;

        flex-direction: column;

        gap: 4px;

        cursor: pointer;

        border: 1px solid rgba(98, 82, 220, 0.14);

        border-radius: 11px;

        background: rgba(98, 82, 220, 0.07);

        -webkit-tap-highlight-color: transparent;

        user-select: none;

    }



    .nav-toggle-label span {

        width: 16px;

        height: 2px;

        display: block;

        border-radius: 999px;

        background: var(--primary);

        transform-origin: center;

        transition:

            transform 0.3s cubic-bezier(0.2, 0.7, 0.2, 1),

            opacity 0.2s ease;

    }



    .header-collapse {

        flex: 0 0 100%;

        width: 100%;

        max-height: 0;

        margin: 0;

        padding: 0;

        display: flex;

        flex-direction: column;

        align-items: stretch;

        gap: 8px;

        overflow: hidden;

        opacity: 0;

        transform: translateY(-7px);

        pointer-events: none;

        border-top: 0;

        transition:

            max-height 0.42s cubic-bezier(0.2, 0.7, 0.2, 1),

            opacity 0.24s ease,

            transform 0.30s ease,

            padding-top 0.32s ease,

            margin-top 0.32s ease;

    }



    .nav-toggle:checked ~ .header-collapse {

        max-height: 590px;

        margin-top: 2px;

        padding-top: 10px;

        opacity: 1;

        transform: translateY(0);

        pointer-events: auto;

        border-top: 1px solid rgba(98, 82, 220, 0.10);

    }



    .header-nav {

        width: 100%;

        padding: 0;

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 7px;

        border: 0;

        background: transparent;

    }



    .header-nav a {

        width: 100%;

        min-height: 42px;

        display: flex;

        align-items: center;

        justify-content: center;

        padding: 9px 10px;

        text-align: center;

        font-size: 10.5px;

        font-weight: 700;

        border: 1px solid rgba(98, 82, 220, 0.10);

        border-radius: 11px;

        background: linear-gradient(

            135deg,

            rgba(255,255,255,.95),

            rgba(245,243,255,.90)

        );

    }



    .header-nav a.is-active {

        color: var(--primary-dark);

        border-color: rgba(98, 82, 220, 0.20);

        background: rgba(98, 82, 220, 0.10);

    }



    .header-actions {

        width: 100%;

        min-width: 0;

        margin-top: 1px;

        padding-top: 9px;

        display: grid;

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: stretch;

        gap: 7px;

        border-top: 1px dashed rgba(98, 82, 220, 0.17);

    }



    .header-profile {

        width: 100%;

        min-width: 0;

        height: 50px;

        padding: 5px 9px 5px 6px;

        display: flex;

        align-items: center;

        justify-content: flex-start;

        gap: 9px;

        flex: none;

        border-radius: 12px;

    }



    .header-profile-avatar {

        width: 38px;

        height: 38px;

        flex: 0 0 38px;

        border-radius: 10px;

    }



    .header-profile-avatar > img {

        border-radius: 10px;

    }



    .header-profile-copy {

        min-width: 0;

        display: flex;

        flex: 1;

        flex-direction: column;

        align-items: flex-start;

        gap: 1px;

        line-height: 1.1;

    }



    .header-profile-copy > span {

        color: var(--muted);

        font-size: 8.5px;

        font-weight: 700;

    }



    .header-profile-copy > strong {

        color: var(--primary-dark);

        font-family: 'Sora', sans-serif;

        font-size: 10.5px;

        font-weight: 800;

        letter-spacing: 0.06em;

    }



    .logout-btn {

        width: 50px;

        min-width: 50px;

        min-height: 50px;

        padding: 0;

        border-radius: 12px;

    }



    .logout-btn svg {

        width: 17px;

        height: 17px;

    }



    .logout-btn span {

        display: none;

    }



    .header-cta {

        grid-column: 1 / -1;

        width: 100%;

        min-height: 46px;

        justify-content: center;

        border-radius: 12px;

        font-size: 11px;

    }



    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(1) {

        transform: translateY(6px) rotate(45deg);

    }



    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(2) {

        opacity: 0;

        transform: scaleX(0);

    }



    .nav-toggle:checked ~ .nav-toggle-label span:nth-child(3) {

        transform: translateY(-6px) rotate(-45deg);

    }

}





/* ============================================================

   SMALL MOBILE HEADER — ≤ 420px

   ============================================================ */

@media (max-width: 420px) {



    .site-header {

        top: 8px;

        width: calc(100% - 14px);

        margin-top: 7px;

    }



    .header-inner {

        min-height: 50px;

        padding: 7px 8px 7px 9px;

        border-radius: 14px;

    }



    .header-brand {

        gap: 7px;

        font-size: 11px;

        letter-spacing: 0.06em;

    }



    .header-brand img {

        width: 26px;

        height: 26px;

    }



    .nav-toggle-label {

        width: 32px;

        height: 32px;

        margin-left: 7px;

        border-radius: 10px;

    }



    .nav-toggle-label span {

        width: 14px;

    }



    .nav-toggle:checked ~ .header-collapse {

        max-height: 560px;

        padding-top: 8px;

    }



    .header-nav {

        gap: 6px;

    }



    .header-nav a {

        min-height: 39px;

        padding: 8px 7px;

        font-size: 9.5px;

        border-radius: 10px;

    }



    .header-actions {

        gap: 6px;

        padding-top: 8px;

    }



    .header-profile {

        height: 46px;

        padding: 4px 7px 4px 5px;

        gap: 7px;

        border-radius: 11px;

    }



    .header-profile-avatar {

        width: 36px;

        height: 36px;

        flex-basis: 36px;

    }



    .header-profile-copy > span {

        font-size: 8px;

    }



    .header-profile-copy > strong {

        font-size: 10px;

    }



    .logout-btn {

        width: 46px;

        min-width: 46px;

        min-height: 46px;

        border-radius: 11px;

    }



    .header-cta {

        min-height: 43px;

        padding: 9px 13px;

        font-size: 10px;

        border-radius: 11px;

    }

}


/* =========================================================
   RESEARCHER CONTACTS
   ========================================================= */
.researcher-contact {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.researcher-contact-item {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    width: fit-content;
    max-width: 100%;
    color: var(--muted);
    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.4;
    transition: color .2s ease, transform .2s ease;
}

.researcher-contact-item svg {
    width: 13px;
    height: 13px;
    flex: 0 0 13px;
    color: var(--primary);
}

.researcher-contact-item span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.researcher-contact-item:hover,
.researcher-contact-item:focus-visible {
    color: var(--primary-dark);
    transform: translateX(2px);
    outline: none;
}

@media (max-width: 520px) {
    .researcher-contact {
        gap: 5px;
    }

    .researcher-contact-item {
        font-size: 9.8px;
    }

    .researcher-contact-item svg {
        width: 12px;
        height: 12px;
        flex-basis: 12px;
    }
}

/* =========================================================
   HOSTING-SAFE CONTACT ICON SIZE
   Keeps phone/email icons identical on localhost and Hostinger.
   ========================================================= */
.researcher-card .researcher-contact .researcher-contact-item > svg {
    width: 13px !important;
    min-width: 13px !important;
    max-width: 13px !important;
    height: 13px !important;
    min-height: 13px !important;
    max-height: 13px !important;
    flex: 0 0 13px !important;
    display: block !important;
    overflow: visible;
}

@media (max-width: 520px) {
    .researcher-card .researcher-contact .researcher-contact-item > svg {
        width: 12px !important;
        min-width: 12px !important;
        max-width: 12px !important;
        height: 12px !important;
        min-height: 12px !important;
        max-height: 12px !important;
        flex: 0 0 12px !important;
    }
}