/* =========================================================
   MUHAMMAD SOHAIL AKHTAR
   PERSONAL ACADEMIC PROFILE
   PREMIUM INTERNATIONAL RESEARCH THEME
   Version 4.0
========================================================= */


/* =========================================================
   01. PROFILE DESIGN SYSTEM
========================================================= */

:root {

    --profile-bg: #f8fafc;
    --profile-surface: #ffffff;
    --profile-surface-soft: #f4f7fa;

    --profile-text: #172033;
    --profile-text-dark: #0b1628;
    --profile-text-soft: #526174;
    --profile-text-muted: #7b8798;

    --profile-primary: #123c69;
    --profile-primary-dark: #0b2949;
    --profile-accent: #1687a7;
    --profile-accent-soft: #e8f7fa;

    --profile-gold: #a27b28;

    --profile-border: #e2e8f0;
    --profile-border-soft: #edf1f5;
    --profile-border-blue: #d4e3f0;

    --profile-container: 1180px;

    --profile-radius-sm: 10px;
    --profile-radius-md: 16px;
    --profile-radius-lg: 24px;
    --profile-radius-xl: 32px;

    --profile-shadow-xs:
        0 4px 15px rgba(15, 35, 60, .035);

    --profile-shadow-sm:
        0 10px 30px rgba(15, 35, 60, .06);

    --profile-shadow-md:
        0 20px 55px rgba(15, 35, 60, .09);

    --profile-shadow-lg:
        0 30px 80px rgba(15, 35, 60, .12);

    --profile-transition:
        320ms cubic-bezier(.2,.65,.3,1);

}


/* =========================================================
   02. PROFILE PAGE FOUNDATION
========================================================= */

.profile-page {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #f8fafc 45%,
            #ffffff 100%
        );

    color: var(--profile-text);

}


/* =========================================================
   03. PROFILE CONTAINER
========================================================= */

.profile-page .profile-container {

    width:
        min(
            calc(100% - 48px),
            var(--profile-container)
        );

    margin-inline: auto;

}


/* =========================================================
   04. AMBIENT BACKGROUND
========================================================= */

.profile-page .ambient-background {

    position: fixed;

    inset: 0;

    z-index: -1;

    pointer-events: none;

    overflow: hidden;

    background:

        radial-gradient(
            circle at 8% 12%,
            rgba(22,135,167,.055),
            transparent 25%
        ),

        radial-gradient(
            circle at 92% 28%,
            rgba(18,60,105,.045),
            transparent 28%
        ),

        radial-gradient(
            circle at 55% 85%,
            rgba(22,135,167,.035),
            transparent 30%
        );

}


/* Mathematical grid */

.profile-page .ambient-background::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image:

        linear-gradient(
            rgba(18,60,105,.022) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(18,60,105,.022) 1px,
            transparent 1px
        );

    background-size:
        72px 72px;

    mask-image:
        linear-gradient(
            to bottom,
            black,
            transparent 85%
        );

}


/* =========================================================
   05. MATHEMATICAL FLOATING ELEMENTS
========================================================= */

.profile-page .math-float {

    color:
        rgba(18,60,105,.045);

    font-family:
        var(--font-display);

    user-select:
        none;

    pointer-events:
        none;

}


/* Different visual weights */

.profile-page .math-01,
.profile-page .math-05 {

    opacity: .75;

}


.profile-page .math-02,
.profile-page .math-07 {

    opacity: .55;

}


.profile-page .math-03,
.profile-page .math-06 {

    opacity: .45;

}


/* =========================================================
   06. HERO SECTION
========================================================= */

.profile-hero {

    position: relative;

    min-height:
        760px;

    display:
        flex;

    align-items:
        center;

    padding:
        145px 0 90px;

    overflow:
        hidden;

}


/* Hero container */

.profile-hero .hero-grid {

    position: relative;

    width:
        min(
            calc(100% - 48px),
            var(--profile-container)
        );

    margin-inline:
        auto;

}


/* =========================================================
   07. HERO GRID
========================================================= */

.profile-hero .hero-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(390px, .92fr);

    align-items:
        center;

    gap:
        75px;

}


/* =========================================================
   08. HERO CONTENT
========================================================= */

.hero-content {

    position:
        relative;

    z-index:
        5;

}


/* =========================================================
   09. HERO STATUS
========================================================= */

.hero-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        9px;

    margin-bottom:
        24px;

    padding:
        8px 13px;

    border:
        1px solid
        rgba(22,135,167,.18);

    border-radius:
        999px;

    background:
        rgba(232,247,250,.65);

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;

}


/* Status dot */

.hero-status::before {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        var(--profile-accent);

    box-shadow:
        0 0 0 5px
        rgba(22,135,167,.08);

}


/* =========================================================
   10. HERO KICKER
========================================================= */

.hero-kicker {

    display:
        block;

    margin-bottom:
        12px;

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        11px;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


/* =========================================================
   11. HERO HEADING
========================================================= */

.profile-hero h1 {

    max-width:
        760px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            54px,
            6.4vw,
            86px
        );

    font-weight:
        600;

    line-height:
        .98;

    letter-spacing:
        -.045em;

}


/* Name gradient */

.profile-hero h1 span {

    display:
        inline-block;

    background:

        linear-gradient(
            110deg,
            var(--profile-text-dark) 0%,
            var(--profile-primary) 42%,
            var(--profile-accent) 78%,
            #2f6aa3 100%
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

}


/* =========================================================
   12. HERO LEAD
========================================================= */

.hero-lead {

    max-width:
        650px;

    margin-top:
        28px;

    color:
        var(--profile-text-soft);

    font-size:
        17px;

    line-height:
        1.85;

}


/* =========================================================
   13. HERO BUTTONS
========================================================= */

.hero-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        34px;

}


/* =========================================================
   14. HERO TAGS
========================================================= */

.hero-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        28px;

}


.hero-tags span {

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        31px;

    padding:
        0 11px;

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

    border-radius:
        999px;

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

    color:
        var(--profile-text-muted);

    font-size:
        10px;

    font-weight:
        600;

    transition:
        var(--profile-transition);

}


.hero-tags span:hover {

    transform:
        translateY(-2px);

    border-color:
        rgba(22,135,167,.25);

    color:
        var(--profile-accent);

}


/* =========================================================
   15. HERO VISUAL
========================================================= */

.hero-visual {

    position:
        relative;

    min-height:
        560px;

    display:
        grid;

    place-items:
        center;

}


/* =========================================================
   16. PHOTO FRAME
========================================================= */

.hero-photo-frame {

    position:
        relative;

    z-index:
        4;

    width:
        min(
            390px,
            75vw
        );

    aspect-ratio:
        4 / 5;

    padding:
        10px;

    border:
        1px solid
        rgba(18,60,105,.18);

    border-radius:
        28px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #edf3f7
        );

    box-shadow:
        0 35px 85px
        rgba(15,35,60,.14);

    transform:
        rotate(1deg);

    transition:
        transform 600ms
        cubic-bezier(.2,.65,.3,1);

}


.hero-photo-frame:hover {

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

}


.hero-photo-frame img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

    border-radius:
        21px;

}


/* Inner border */

.hero-photo-frame::before {

    content:
        "";

    position:
        absolute;

    inset:
        17px;

    z-index:
        2;

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

    border-radius:
        17px;

    pointer-events:
        none;

}


/* =========================================================
   17. PHOTO OVERLAY
========================================================= */

.photo-overlay {

    position:
        absolute;

    inset:
        10px;

    z-index:
        3;

    border-radius:
        21px;

    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(11,41,73,.24) 100%
        );

    pointer-events:
        none;

}


/* =========================================================
   18. RESEARCH ORBITS
========================================================= */

.research-orbit {

    position:
        absolute;

    width:
        480px;

    height:
        480px;

    border:
        1px solid
        rgba(22,135,167,.11);

    border-radius:
        50%;

    animation:
        orbitRotate 35s
        linear infinite;

}


.orbit-two {

    width:
        380px;

    height:
        380px;

    border-color:
        rgba(18,60,105,.09);

    animation-duration:
        27s;

    animation-direction:
        reverse;

}


.orbit-three {

    width:
        570px;

    height:
        570px;

    border-color:
        rgba(22,135,167,.065);

    animation-duration:
        45s;

}


@keyframes orbitRotate {

    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }

}


/* =========================================================
   19. RESEARCH NODES
========================================================= */

.research-node {

    position:
        absolute;

    z-index:
        8;

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

    padding:
        10px 13px;

    border:
        1px solid
        rgba(22,135,167,.17);

    border-radius:
        12px;

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

    box-shadow:
        0 14px 35px
        rgba(15,35,60,.09);

    backdrop-filter:
        blur(12px);

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

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

}


.research-node small {

    display:
        block;

    color:
        var(--profile-text-muted);

    font-size:
        8px;

    letter-spacing:
        .04em;

}


.node-symbol {

    color:
        var(--profile-accent);

    font-family:
        var(--font-display);

    font-size:
        18px;

}


.node-1 {

    top:
        12%;

    left:
        3%;

}


.node-2 {

    top:
        23%;

    right:
        0;

    animation-delay:
        -1.5s;

}


.node-3 {

    bottom:
        17%;

    left:
        4%;

    animation-delay:
        -3s;

}


@keyframes nodeFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-10px);
    }

}


/* =========================================================
   20. HERO EQUATION
========================================================= */

.hero-equation {

    position:
        absolute;

    right:
        4%;

    bottom:
        4%;

    color:
        rgba(18,60,105,.25);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            24px,
            3vw,
            42px
        );

    font-style:
        italic;

    pointer-events:
        none;

}


/* =========================================================
   21. HERO SCROLL
========================================================= */

.hero-scroll {

    position:
        absolute;

    bottom:
        28px;

    left:
        50%;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        9px;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

    transform:
        translateX(-50%);

}


.hero-scroll i {

    color:
        var(--profile-accent);

    animation:
        scrollBounce 2s
        ease-in-out infinite;

}


@keyframes scrollBounce {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(5px);
    }

}


/* =========================================================
   22. IDENTITY STRIP
========================================================= */

.profile-page .identity-strip {

    position:
        relative;

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

    border-bottom:
        1px solid
        var(--profile-border);

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

    backdrop-filter:
        blur(12px);

}


.profile-page .identity-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

}


.profile-page .identity-item {

    min-height:
        105px;

    padding:
        22px 25px;

    border-right:
        1px solid
        var(--profile-border);

}


.profile-page .identity-item:last-child {

    border-right:
        0;

}


.identity-number {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        10px;

}


.identity-item strong {

    color:
        var(--profile-text-dark);

}


.identity-item small {

    color:
        var(--profile-text-muted);

}


/* =========================================================
   23. PROFILE SECTIONS
========================================================= */

.profile-page .profile-section {

    position:
        relative;

    padding:
        120px 0;

}


/* Alternate section */

.profile-page .section-soft {

    background:
        rgba(18,60,105,.012);

}


/* =========================================================
   24. SECTION INTRO
========================================================= */

.profile-page .section-intro {

    margin-bottom:
        62px;

}


.profile-page .section-index {

    color:
        var(--profile-accent);

}


.profile-page .section-intro h2 {

    color:
        var(--profile-text-dark);

}


.profile-page .section-intro h2 em {

    color:
        var(--profile-primary);

}


/* =========================================================
   25. ABOUT SECTION
========================================================= */

.about-grid {

    display:
        grid;

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

    gap:
        85px;

    align-items:
        start;

}


.about-main .large-text {

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            27px,
            3vw,
            42px
        );

    line-height:
        1.3;

    letter-spacing:
        -.02em;

}


.about-main p {

    margin-top:
        24px;

    color:
        var(--profile-text-soft);

    line-height:
        1.85;

}


/* =========================================================
   26. ABOUT QUOTE
========================================================= */

.about-quote {

    margin-top:
        40px;

    padding:
        25px 30px;

    border-left:
        2px solid
        var(--profile-accent);

    background:
        linear-gradient(
            90deg,
            rgba(22,135,167,.055),
            transparent
        );

}


.about-quote blockquote {

    color:
        var(--profile-text-soft);

    font-family:
        var(--font-display);

    font-size:
        19px;

    font-style:
        italic;

    line-height:
        1.7;

}


.quote-mark {

    display:
        block;

    margin-bottom:
        4px;

    color:
        var(--profile-accent);

    font-family:
        Georgia,
        serif;

    font-size:
        42px;

    line-height:
        .5;

}


/* =========================================================
   27. FACT CARDS
========================================================= */

.about-facts {

    display:
        grid;

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

    gap:
        12px;

}


.fact-card {

    min-height:
        150px;

    padding:
        23px;

    border-radius:
        var(--profile-radius-md);

}


.fact-card span {

    display:
        block;

    margin-bottom:
        10px;

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .12em;

}


.fact-card strong {

    display:
        block;

    color:
        var(--profile-text-dark);

    font-size:
        16px;

    line-height:
        1.4;

}


.fact-card p {

    margin-top:
        7px;

    color:
        var(--profile-text-muted);

    font-size:
        11px;

}


/* =========================================================
   28. RESEARCH FOCUS
========================================================= */

.research-focus {

    position:
        relative;

    overflow:
        hidden;

    padding:
        55px;

    border:
        1px solid
        rgba(22,135,167,.15);

    border-radius:
        var(--profile-radius-lg);

    background:

        linear-gradient(
            135deg,
            rgba(22,135,167,.055),
            rgba(18,60,105,.025),
            rgba(255,255,255,.85)
        );

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

}


.research-focus-header {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        10px;

    font-weight:
        600;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.research-focus h3 {

    max-width:
        900px;

    margin-top:
        15px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            27px,
            3vw,
            42px
        );

    line-height:
        1.2;

}


.research-tags {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        8px;

    margin-top:
        25px;

}


.research-tags span {

    padding:
        8px 12px;

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

    border-radius:
        999px;

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

    color:
        var(--profile-text-muted);

    font-size:
        10px;

}


/* =========================================================
   29. RESEARCH CARDS
========================================================= */

.research-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

    margin-top:
        28px;

}


.research-card {

    min-height:
        300px;

    padding:
        28px;

    border-radius:
        var(--profile-radius-md);

}


.research-number {

    color:
        var(--profile-text-light);

    font-family:
        var(--font-mono);

    font-size:
        10px;

}


.research-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    margin:
        35px 0 22px;

    border:
        1px solid
        rgba(22,135,167,.18);

    border-radius:
        12px;

    background:
        rgba(22,135,167,.04);

    color:
        var(--profile-accent);

    font-size:
        18px;

}


.research-card h3 {

    color:
        var(--profile-text-dark);

    font-size:
        18px;

    line-height:
        1.35;

}


.research-card p {

    margin-top:
        12px;

    color:
        var(--profile-text-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================================
   30. RESEARCH PHILOSOPHY
========================================================= */

.research-philosophy {

    margin-top:
        70px;

    padding:
        65px 30px;

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

    border-bottom:
        1px solid
        var(--profile-border);

    text-align:
        center;

    background:
        radial-gradient(
            circle at center,
            rgba(22,135,167,.045),
            transparent 60%
        );

}


.philosophy-label span {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        10px;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.philosophy-statement {

    max-width:
        920px;

    margin:
        20px auto 0;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            28px,
            4vw,
            52px
        );

    line-height:
        1.2;

}


.philosophy-statement span {

    color:
        var(--profile-accent);

}


.philosophy-statement strong {

    color:
        var(--profile-primary);

}


/* =========================================================
   31. PROJECTS
========================================================= */

.projects-grid {

    display:
        grid;

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

    gap:
        18px;

}


.project-card {

    position:
        relative;

    overflow:
        hidden;

    border-radius:
        var(--profile-radius-md);

}


.project-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    padding:
        20px 22px;

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        9px;

}


.project-visual {

    position:
        relative;

    min-height:
        190px;

    display:
        grid;

    place-items:
        center;

    background:
        radial-gradient(
            circle,
            rgba(22,135,167,.065),
            transparent 60%
        );

}


.project-symbol {

    color:
        rgba(18,60,105,.55);

    font-family:
        var(--font-display);

    font-size:
        72px;

    transition:
        var(--profile-transition);

}


.project-card:hover .project-symbol {

    color:
        var(--profile-accent);

    transform:
        scale(1.05);

}


.project-content {

    padding:
        26px;

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

}


.project-type {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        9px;

    letter-spacing:
        .12em;

    text-transform:
        uppercase;

}


.project-content h3 {

    margin-top:
        8px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        23px;

}


.project-content p {

    margin-top:
        10px;

    color:
        var(--profile-text-muted);

    font-size:
        13px;

    line-height:
        1.75;

}


/* =========================================================
   32. TEACHING
========================================================= */

.teaching-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

}


.teaching-card {

    min-height:
        250px;

    padding:
        28px;

    border-radius:
        var(--profile-radius-md);

}


.teaching-number {

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        10px;

}


.teaching-card > i {

    display:
        block;

    margin:
        35px 0 20px;

    color:
        var(--profile-accent);

    font-size:
        22px;

}


.teaching-card h3 {

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        21px;

}


.teaching-card p {

    margin-top:
        9px;

    color:
        var(--profile-text-muted);

    font-size:
        12px;

    line-height:
        1.7;

}


/* =========================================================
   33. NOW SECTION
========================================================= */

.now-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

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

    border-radius:
        var(--profile-radius-md);

    overflow:
        hidden;

}


.now-item {

    min-height:
        220px;

    padding:
        30px;

    border:
        0;

    border-right:
        1px solid
        var(--profile-border);

}


.now-item:last-child {

    border-right:
        0;

}


.now-item > span {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        10px;

}


.now-item small {

    display:
        block;

    margin-top:
        30px;

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        9px;

    text-transform:
        uppercase;

    letter-spacing:
        .1em;

}


.now-item h3 {

    margin-top:
        8px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        22px;

}


/* =========================================================
   34. WRITING / BLOG
========================================================= */

.writing-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap:
        18px;

}


.writing-card {

    min-height:
        250px;

    padding:
        28px;

    border-radius:
        var(--profile-radius-md);

}


.writing-meta {

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        9px;

    letter-spacing:
        .08em;

}


.writing-card h3 {

    margin-top:
        30px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        22px;

    line-height:
        1.3;

}


.writing-card p {

    margin-top:
        12px;

    color:
        var(--profile-text-muted);

    font-size:
        12px;

}


.writing-card a {

    display:
        inline-flex;

    margin-top:
        20px;

    color:
        var(--profile-primary);

    font-size:
        11px;

}


/* =========================================================
   35. YOUTUBE
========================================================= */

.youtube-section {

    position:
        relative;

    overflow:
        hidden;

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

    border-radius:
        var(--profile-radius-lg);

    background:
        radial-gradient(
            circle at 75% 50%,
            rgba(220,38,38,.035),
            transparent 35%
        );

}


.youtube-section .profile-container {

    padding:
        70px 0;

}


.youtube-grid {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    align-items:
        center;

    gap:
        70px;

}


.youtube-copy h2 {

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            32px,
            4vw,
            55px
        );

    line-height:
        1.08;

}


.youtube-copy p {

    max-width:
        570px;

    margin-top:
        20px;

    color:
        var(--profile-text-soft);

}


.youtube-visual {

    position:
        relative;

    min-height:
        320px;

    display:
        grid;

    place-items:
        center;

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

    border-radius:
        var(--profile-radius-lg);

    background:
        radial-gradient(
            circle at center,
            rgba(220,38,38,.055),
            transparent 60%
        );

}


.youtube-play {

    position:
        relative;

    z-index:
        3;

    width:
        82px;

    height:
        58px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        17px;

    background:
        #172033;

    color:
        #ffffff;

    box-shadow:
        0 20px 50px
        rgba(15,35,60,.18);

    transition:
        var(--profile-transition);

}


.youtube-play:hover {

    transform:
        scale(1.08);

}


.youtube-equation {

    position:
        absolute;

    top:
        25px;

    right:
        30px;

    color:
        rgba(18,60,105,.25);

    font-family:
        var(--font-display);

    font-size:
        25px;

}


/* =========================================================
   36. ACADEMIC TIMELINE
========================================================= */

.academic-timeline {

    position:
        relative;

}


.academic-timeline::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    bottom:
        0;

    left:
        50%;

    width:
        1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            var(--profile-border-blue),
            transparent
        );

}


.timeline-entry {

    position:
        relative;

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    min-height:
        170px;

    border-bottom:
        1px solid
        var(--profile-border);

}


.timeline-year {

    padding:
        35px;

    color:
        var(--profile-text-muted);

    font-family:
        var(--font-mono);

    font-size:
        11px;

}


.timeline-content {

    padding:
        35px;

}


.timeline-marker {

    position:
        absolute;

    top:
        39px;

    left:
        50%;

    width:
        11px;

    height:
        11px;

    border:
        2px solid
        var(--profile-accent);

    border-radius:
        50%;

    background:
        #ffffff;

    transform:
        translateX(-50%);

}


.timeline-content span {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        9px;

    text-transform:
        uppercase;

}


.timeline-content h3 {

    margin-top:
        7px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        22px;

}


.timeline-content small {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--profile-text-muted);

}


/* =========================================================
   37. LEADERSHIP
========================================================= */

.leadership-card {

    padding:
        35px;

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

    border-radius:
        var(--profile-radius-md);

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

    box-shadow:
        var(--profile-shadow-xs);

}


.leadership-year {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        10px;

}


.leadership-main h3 {

    margin-top:
        8px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        25px;

}


.leadership-main li {

    margin-top:
        8px;

    color:
        var(--profile-text-soft);

    font-size:
        13px;

}


/* =========================================================
   38. RESOURCES
========================================================= */

.resource-links {

    display:
        grid;

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

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

    border-radius:
        var(--profile-radius-md);

    overflow:
        hidden;

}


.resource-link {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

    min-height:
        90px;

    padding:
        20px 24px;

    border-right:
        1px solid
        var(--profile-border);

    border-bottom:
        1px solid
        var(--profile-border);

    color:
        var(--profile-text-dark);

    transition:
        var(--profile-transition);

}


.resource-link:hover {

    background:
        var(--profile-accent-soft);

    color:
        var(--profile-accent);

}


.resource-link i {

    color:
        var(--profile-accent);

    font-size:
        17px;

}


.resource-link small {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--profile-text-muted);

    font-size:
        10px;

}


/* =========================================================
   39. COLLABORATION
========================================================= */

.collaboration-box {

    position:
        relative;

    overflow:
        hidden;

    padding:
        70px;

    border:
        1px solid
        rgba(22,135,167,.15);

    border-radius:
        var(--profile-radius-xl);

    background:

        radial-gradient(
            circle at 75% 30%,
            rgba(22,135,167,.055),
            transparent 40%
        ),

        #ffffff;

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

}


.collaboration-label span {

    color:
        var(--profile-accent);

    font-family:
        var(--font-mono);

    font-size:
        10px;

    letter-spacing:
        .15em;

    text-transform:
        uppercase;

}


.collaboration-main h2 {

    max-width:
        760px;

    margin-top:
        15px;

    color:
        var(--profile-text-dark);

    font-family:
        var(--font-display);

    font-size:
        clamp(
            34px,
            5vw,
            62px
        );

    line-height:
        1.08;

}


.collaboration-equation {

    position:
        absolute;

    right:
        50px;

    bottom:
        35px;

    color:
        rgba(22,135,167,.16);

    font-family:
        var(--font-display);

    font-size:
        50px;

}


/* =========================================================
   40. FOOTER
========================================================= */

.profile-footer {

    margin-top:
        0;

    background:
        #eef3f7;

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

}


.profile-footer .footer-top {

    padding:
        60px 0;

    border-bottom:
        1px solid
        var(--profile-border);

}


.footer-mark {

    width:
        46px;

    height:
        46px;

    display:
        grid;

    place-items:
        center;

    border:
        1px solid
        rgba(18,60,105,.2);

    border-radius:
        10px;

    color:
        var(--profile-primary);

    font-family:
        var(--font-display);

}


.footer-identity strong {

    color:
        var(--profile-text-dark);

}


.footer-identity span {

    color:
        var(--profile-text-muted);

}


.footer-links a {

    color:
        var(--profile-text-muted);

    transition:
        color var(--profile-transition);

}


.footer-links a:hover {

    color:
        var(--profile-accent);

}


.footer-bottom {

    padding:
        22px 0;

}


.footer-bottom p {

    color:
        var(--profile-text-muted);

    font-size:
        11px;

}


/* =========================================================
   41. BACK TO TOP
========================================================= */

.profile-page .back-to-top {

    width:
        48px;

    height:
        48px;

    border:
        1px solid
        var(--profile-border-blue);

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

    color:
        var(--profile-primary);

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

    backdrop-filter:
        blur(12px);

}


.profile-page .back-to-top:hover {

    background:
        var(--profile-primary);

    color:
        #ffffff;

}


/* =========================================================
   42. REVEAL ANIMATION
========================================================= */

.profile-page .reveal-element {

    opacity:
        0;

    transform:
        translateY(28px);

    transition:
        opacity 700ms ease,
        transform 700ms
        cubic-bezier(.2,.65,.3,1);

}


.profile-page .reveal-element.is-visible {

    opacity:
        1;

    transform:
        translateY(0);

}


/* =========================================================
   43. STAGGER ANIMATIONS
========================================================= */

.profile-page .reveal-element:nth-child(2) {

    transition-delay:
        80ms;

}


.profile-page .reveal-element:nth-child(3) {

    transition-delay:
        160ms;

}


.profile-page .reveal-element:nth-child(4) {

    transition-delay:
        240ms;

}


/* =========================================================
   44. TABLET
========================================================= */

@media (max-width: 1100px) {

    .profile-hero .hero-grid {

        grid-template-columns:
            minmax(0, 1fr)
            minmax(330px, .8fr);

        gap:
            40px;

    }


    .hero-photo-frame {

        width:
            330px;

    }


    .research-grid,
    .teaching-grid {

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

    }


    .writing-grid {

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

    }

}


/* =========================================================
   45. TABLET / SMALL LAPTOP
========================================================= */

@media (max-width: 900px) {

    .profile-hero {

        min-height:
            auto;

        padding:
            130px 0 90px;

    }


    .profile-hero .hero-grid {

        grid-template-columns:
            1fr;

    }


    .hero-content {

        max-width:
            750px;

    }


    .hero-visual {

        min-height:
            500px;

    }


    .about-grid {

        grid-template-columns:
            1fr;

        gap:
            45px;

    }


    .youtube-grid {

        grid-template-columns:
            1fr;

    }


    .timeline-entry {

        grid-template-columns:
            140px 1fr;

    }


    .academic-timeline::before {

        left:
            140px;

    }


    .timeline-marker {

        left:
            140px;

    }

}


/* =========================================================
   46. MOBILE
========================================================= */

@media (max-width: 700px) {

    .profile-page .profile-container,
    .profile-hero .hero-grid {

        width:
            calc(100% - 32px);

    }


    .profile-page .profile-section {

        padding:
            78px 0;

    }


    .profile-hero {

        padding:
            115px 0 75px;

    }


    .profile-hero h1 {

        font-size:
            clamp(
                45px,
                13vw,
                65px
            );

    }


    .hero-lead {

        font-size:
            15px;

    }


    .hero-actions {

        flex-direction:
            column;

        align-items:
            stretch;

    }


    .profile-btn {

        width:
            100%;

    }


    .hero-visual {

        min-height:
            420px;

        margin-top:
            10px;

    }


    .hero-photo-frame {

        width:
            min(
                300px,
                75vw
            );

    }


    .research-orbit {

        width:
            350px;

        height:
            350px;

    }


    .orbit-two {

        width:
            285px;

        height:
            285px;

    }


    .orbit-three {

        width:
            410px;

        height:
            410px;

    }


    .research-node {

        transform:
            scale(.85);

    }


    .research-grid,
    .projects-grid,
    .teaching-grid,
    .writing-grid {

        grid-template-columns:
            1fr;

    }


    .about-facts {

        grid-template-columns:
            1fr;

    }


    .research-focus {

        padding:
            32px 25px;

    }


    .now-grid {

        grid-template-columns:
            1fr;

    }


    .now-item {

        min-height:
            170px;

        border-right:
            0;

        border-bottom:
            1px solid
            var(--profile-border);

    }


    .now-item:last-child {

        border-bottom:
            0;

    }


    .resource-links {

        grid-template-columns:
            1fr;

    }


    .resource-link {

        border-right:
            0;

    }


    .youtube-section .profile-container {

        padding:
            45px 0;

    }


    .youtube-visual {

        min-height:
            250px;

    }


    .collaboration-box {

        padding:
            40px 25px;

    }


    .collaboration-equation {

        right:
            20px;

        bottom:
            20px;

        font-size:
            30px;

    }


    .academic-timeline::before {

        left:
            9px;

    }


    .timeline-entry {

        display:
            block;

        padding-left:
            35px;

    }


    .timeline-year {

        padding:
            25px 0 5px;

    }


    .timeline-content {

        padding:
            10px 0 30px;

    }


    .timeline-marker {

        left:
            9px;

        top:
            31px;

    }

}


/* =========================================================
   47. SMALL MOBILE
========================================================= */

@media (max-width: 480px) {

    .profile-page .profile-container,
    .profile-hero .hero-grid {

        width:
            calc(100% - 24px);

    }


    .profile-hero h1 {

        font-size:
            43px;

    }


    .hero-status {

        font-size:
            8px;

    }


    .hero-tags span {

        font-size:
            9px;

    }


    .hero-photo-frame {

        width:
            270px;

    }


    .hero-visual {

        min-height:
            370px;

    }


    .research-node {

        display:
            none;

    }


    .research-focus h3 {

        font-size:
            27px;

    }


    .collaboration-main h2 {

        font-size:
            36px;

    }

}


/* =========================================================
   48. REDUCED MOTION
========================================================= */

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

    .profile-page *,
    .profile-page *::before,
    .profile-page *::after {

        animation-duration:
            .01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            .01ms !important;

    }

}