<style>
    
    /* This tells the browser: "Only apply this to a DIV that has the class font-visible" */
    div.font-visible {
        font-size: 1.0rem !important; /* The !important is a pragmatic "sledgehammer" to force the change */
        font-weight: 400 !important;
        line-height: 1.0 !important;
        letter-spacing: 1.0px !important;
        display: block; 
        margin-top: 1px;
    }
    
   .font-elegant {
        font-family: 'Cormorant Garamond', serif;
    }
    
    .code-font {
        font-family: 'Courier New', Courier, monospace;
        background: rgba(197, 179, 148, 0.15); /* Slightly darker for visibility */
        padding: 4px 10px;                     /* Vertical and Horizontal padding */
        border-radius: 4px;
        color: var(--off-White);
        font-size: 0.9rem;
        display: inline-block;                 /* MAGIC LINE: Fits the box to the word */
        text-decoration: none;                 /* Removes the underline */
        margin-top: 5px;
    }

    /* This ensures the links inside don't have underlines either */
    .code-font a {
        text-decoration: none;
        color: inherit;
    }
    
    :root {
        --bg-deep: #141a0f;       /* Midnight Moss */
        --text-sand: #d9d2c5;     /* Warm Sand/Beige */
        --off-white: #fdfaf5;      /* Even lighter, like Ivory */
        --mid-tone: #cfc7ad; /* The new bridge color */
        --accent-gold: #c5b394;   /* Muted Champagne */
        --box-bg: #1e2618;        /* Slightly lighter moss for boxes */
        --max-width: 1000px;
    }

    * { box-sizing: border-box; }

    body {
        background-color: var(--bg-deep);
        color: var(--text-sand);
        font-family: 'Inter', sans-serif;
        margin: 0;
        line-height: 1.8;
        font-weight: 300;
    }

    .container {
        max-width: var(--max-width);
        margin: 0 auto;
        padding: 0 50px;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
    }

    /* NAVIGATION & HEADER */
    nav {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 50px 0;
        flex-wrap: wrap;
        gap: 25px;
    }

    nav a {
        color: var(--text-sand);
        text-decoration: none;
        font-size: 0.8rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        transition: color 0.3s;
    }

    nav a:hover { color: var(--accent-gold); }

    /* THE CV BOX LINK */
    .cv-box {
        border: 1px solid var(--accent-gold);
        padding: 6px 15px;
        border-radius: 2px;
        color: var(--accent-gold) !important;
    }

    header { text-align: center; margin-bottom: 10px; }   /*bottom margin, space between header and next line*/
    header a { text-decoration: none; color: inherit; }

    /*Name title*/
    h1 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 2.4rem;       /* Smaller size for a more delicate look */
        font-weight: 800;        /* Slightly lighter weight */
        letter-spacing: 3px;     /* Increased spacing for an elegant, open feel */
        color: var(--accent-gold);
        margin: 0 auto;          /* Centers the block */
        text-align: center;      /* Centers the text inside the block */
        line-height: 1.2;
        /*text-transform: uppercase; /* Optional: often looks better with high letter-spacing */
    }

    /*Work title*/
    .expert-tag {
        font-size: 0.8rem;         /* Decreased size for a delicate look */
        /*text-transform: uppercase;  /* Keeps it clean and modern */
        letter-spacing: 1.2px;        /* Increased spacing makes it look "designed" */
        color: var(--text-sand);  /* Matches the name but we will dim it */
        opacity: 0.8;               /* Dimming it makes the main name stand out */
        margin-top: 8px;            /* Slight gap from the name */
        font-weight: 500;
        display: block;             /* Ensures it stays on its own line */
    }

    /* PAGE CONTROL LOGIC */
    .page-content {
        display: none;
        padding: 20px 0 60px 0;  /* 20px at top, 0 sides, 60px at bottom */
        animation: fadeIn 0.6s ease forwards;
    }

    .page-content:target { display: block; }

    /* LANDING PAGE (HOME) */
    #home-view {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 60px;
        padding: 80px 0;
    }

    /* Hide Home when a link is active */
     :has(section:target) #home-view { display: none; }

    .intro-text { flex: 1.5; font-size: 0.9rem; font-style: italic; opacity: 2.0; color: var(--off-White); letter-spacing: 0.8px; font-weight: 300; }
    .intro-photo { flex: 1; text-align: right; }

    /*Text like about and research interests.*/
    .content-text { font-size: 0.9rem; opacity: 2.0; color: var(--off-White); letter-spacing: 0.8px; font-weight: 300; }

    .profile-img {
        width: 350px;
        height: 450px;
        object-fit: cover;
        filter: sepia(20%) contrast(95%); /* Adds a gentle, creative warmth */
        border-radius: 2px;
    }

    /* SECTION STYLES */
    h2 {
        font-family: 'Cormorant Garamond', serif;
        font-size: 1.6rem;
        font-weight: 600;
        letter-spacing: 2px;
        
        /* The New "Section Break" Color */
        color: #8a9a86; 
        
        /* The Physical Divider */
        border-bottom: 1px solid rgba(138, 154, 134, 0.3);
        padding-bottom: 10px;
        margin: 60px auto 10px auto; /* More space above to separate from previous section */
        
        text-align: center;
        width: 60%; /* Keeps the line from hitting the edges */
    }
    
    /* CONTACT CARD */
    .contact-card {
        background: var(--box-bg);
        max-width: 500px;
        margin: 40px auto;
        padding: 50px;
        text-align: center;
        border-radius: 4px;
    }

    /*For first line introducing a page.*/
    .gallery-intro {
        font-family: 'Inter', sans-serif;
        text-align: center;         /* Centers the text */
        font-size: 0.9rem;
        font-weight: 400;
        letter-spacing: 1px;
        color: var(--text-sand);    /* Or your new Off-White */
        opacity: 1.0;               /* Makes it feel like a subtle caption */
        margin-bottom: 30px;        /* Adds space before the photos start */
        max-width: 600px;           /* Keeps the line from getting too long */
        margin-left: auto;          /* Works with right margin to center the block */
        margin-right: auto;
    }

    .contact-item { margin-bottom: 25px; }
    .label { display: block; font-size: 0.7rem; text-transform: uppercase; color: var(--accent-gold); letter-spacing: 2px; margin-bottom: 8px; }
    .value { font-size: 1.2rem; }

    /* PERSONAL TOUCH GRID */
    .photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 40px; }
    .grid-item { background: var(--box-bg); padding: 12px; }
    .grid-img { width: 100%; height: 300px; object-fit: cover; margin-bottom: 15px; }
    .caption { font-size: 0.85rem; font-style: italic; color: var(--off-White); }

    footer { margin-top: auto; padding: 60px 0; text-align: center; font-size: 0.7rem; letter-spacing: 1px; opacity: 0.4; }

    @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 768px) {
        #home-view { flex-direction: column; text-align: center; }
        .intro-photo { order: -1; }
        .profile-img { width: 100%; max-width: 300px; height: auto; }
        h1 { font-size: 2.8rem; }
        .photo-grid { grid-template-columns: 1fr; }
    }
    
        /* Style for the sub-titles */
    h3 {
        font-family: 'Inter', sans-serif; /* Clean sans-serif looks better for sub-categories */
        color: var(--text-sand);
        opacity: 0.6;                   /* Dims it so it doesn't fight the H2 */
        font-size: 0.9rem;
        text-transform: uppercase;
        letter-spacing: 3px;
        margin-top: 50px;
        margin-bottom: 20px;
        border-bottom: 1px solid rgba(217, 210, 197, 0.1); /* Very faint line */
        padding-bottom: 8px;
        display: inline-block;          /* Line only goes as far as the word */
    }
    
    ul {
        list-style-type: none;          /* Removes the squares for a cleaner look */
        padding-left: 0;                /* Aligns text to the left margin */
        margin-bottom: 40px;
    }
            
    li {
        margin-bottom: 25px;            /* Gap BETWEEN different research items */
        border-left: 2px solid #8a9a86;
        padding-left: 20px;
        line-height: 1.3 !important;    /* Tightens the gap WITHIN the item */
    }
    
    /* Tightens the entire research entry */
    #communication li {
        line-height: 1.3 !important;
        margin-bottom: 30px;
        border-left: 2px solid #8a9a86;
        padding-left: 15px;
    }
    
    /* Styles the author and date lines */
    .li-details {
        display: block;
        font-size: 0.8rem;
        margin-top: 4px;
        opacity: 0.9;
        color: var(--text-sand);
    }
    
    /* Styles the link to be subtle but clear */
    .article-link {
        color: var(--accent-gold);
        text-decoration: none;
        border-bottom: 1px solid rgba(197, 179, 148, 0.3);
        transition: border-color 0.3s;
    }
    
    .article-link:hover {
        border-bottom: 1px solid var(--accent-gold);
    }
    
</style>
