/* ==========================================================
   Muhammad Umar Khan - Academic Portfolio
   Main Stylesheet
========================================================== */


/* ==========================================================
   Global
========================================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

    font-family: Arial, Helvetica, sans-serif;

    color: #222;
    background-color: #ffffff;

    line-height: 1.65;
}

.container {
    width: 90%;
    max-width: 1100px;

    margin: 0 auto;
}

a {
    transition: color 0.2s ease;
}



/* ---------- Keyboard Focus Accessibility ---------- */

a:focus-visible {
    outline: 3px solid #0066cc;
    outline-offset: 3px;
    border-radius: 3px;
}

/* ==========================================================
   Navigation
========================================================== */

header {
    background-color: #ffffff;

    border-bottom: 1px solid #e8e8e8;
}

.navbar {
    min-height: 76px;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    color: #111;

    font-size: 1.25rem;
    font-weight: 700;

    text-decoration: none;

    white-space: nowrap;
}

.logo:hover {
    color: #0066cc;
}

nav {
    display: flex;
    align-items: center;
}

nav a {
    margin-left: 30px;

    color: #444;

    font-size: 0.95rem;
    font-weight: 400;

    text-decoration: none;
}

nav a:hover {
    color: #0066cc;
}


/* ---------- Active Navigation ---------- */

nav a.active {
    color: #0066cc;
    font-weight: 600;
}


/* ==========================================================
   Profile / Hero
========================================================== */

.hero {
    display: grid;

    grid-template-columns: 270px 1fr;

    gap: 55px;

    align-items: center;

    padding: 75px 0 70px;
}

.profile-image-container {
    display: flex;

    justify-content: flex-start;
    align-items: center;
}

.profile-photo {
    display: block;

    width: 250px;
    height: 250px;

    object-fit: cover;
    object-position: center;

    border-radius: 50%;
}

.profile-content {
    max-width: 760px;
}

.hero h1 {
    margin: 0 0 10px;

    color: #1d1d1f;

    font-size: 2.5rem;
    font-weight: 700;

    line-height: 1.2;
}

.subtitle {
    margin: 0 0 14px;

    color: #4d4d4d;

    font-size: 1.12rem;

    line-height: 1.55;
}

.affiliation {
    margin: 0 0 26px;

    color: #666;

    font-size: 1rem;
}

.bio {
    max-width: 720px;

    margin: 0;

    color: #333;

    font-size: 1rem;
}


/* ==========================================================
   Professional Profile Links
========================================================== */

.profile-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;

    margin-top: 26px;
}

.profile-links a {
    color: #0066cc;

    font-size: 0.95rem;
    font-weight: 500;

    text-decoration: none;
}

.profile-links a:hover {
    color: #004999;

    text-decoration: underline;
}


/* ==========================================================
   General Sections
========================================================== */

section {
    padding: 55px 0;
}

.section-heading {
    max-width: 760px;

    margin-bottom: 36px;
}

.section-heading h2 {
    margin: 0 0 12px;

    color: #1d1d1f;

    font-size: 1.8rem;
    font-weight: 700;

    line-height: 1.3;
}

.section-heading p {
    margin: 0;

    color: #606060;

    font-size: 1rem;
}


/* ==========================================================
   Research Areas
========================================================== */

.research-section {
    padding: 60px 0 75px;

    border-top: 1px solid #eeeeee;
}

.research-grid {
    display: grid;

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

    gap: 24px;
}

.research-card {
    padding: 28px 30px;

    background-color: #ffffff;

    border: 1px solid #e5e5e5;
    border-radius: 8px;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.research-card:hover {
    transform: translateY(-3px);

    border-color: #d6d6d6;

    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.research-card h3 {
    margin: 0 0 12px;

    color: #222;

    font-size: 1.15rem;
    font-weight: 600;
}

.research-card p {
    margin: 0;

    color: #555;

    font-size: 0.95rem;

    line-height: 1.65;
}


/* ==========================================================
   Selected Publications - Homepage
========================================================== */

.publications-section {
    padding: 65px 0 75px;

    border-top: 1px solid #eeeeee;
}

.publication-list {
    display: flex;

    flex-direction: column;
}


/* ---------- Individual Publication ---------- */

.publication-item {
    display: grid;

    grid-template-columns: 75px 1fr;

    gap: 28px;

    padding: 28px 0;

    border-bottom: 1px solid #eeeeee;
}

.publication-item:first-child {
    border-top: 1px solid #eeeeee;
}


/* ---------- Publication Year ---------- */

.publication-year {
    padding-top: 3px;

    color: #777;

    font-size: 0.95rem;
    font-weight: 600;
}


/* ---------- Publication Content ---------- */

.publication-content {
    max-width: 850px;
}

.publication-content h3 {
    margin: 0 0 9px;

    color: #222;

    font-size: 1.08rem;
    font-weight: 600;

    line-height: 1.45;
}

.publication-authors {
    margin: 0 0 5px;

    color: #555;

    font-size: 0.92rem;

    line-height: 1.55;
}

.publication-journal {
    margin: 0;

    color: #666;

    font-size: 0.92rem;

    line-height: 1.55;
}


/* ---------- Publication Links ---------- */

.publication-links {
    margin-top: 10px;
}

.publication-links a {
    display: inline-block;

    margin-right: 15px;

    color: #0066cc;

    font-size: 0.9rem;
    font-weight: 500;

    text-decoration: none;
}

.publication-links a:hover {
    color: #004999;

    text-decoration: underline;
}


/* ---------- View All Publications ---------- */

.all-publications {
    margin-top: 32px;
}

.button-link {
    display: inline-block;

    color: #0066cc;

    font-size: 0.95rem;
    font-weight: 600;

    text-decoration: none;
}

.button-link:hover {
    color: #004999;

    text-decoration: underline;
}


/* ==========================================================
   Publications Page
========================================================== */


/* ---------- Publications Page Header ---------- */

.page-header {
    max-width: 820px;

    padding: 70px 0 55px;
}

.page-header h1 {
    margin: 0 0 18px;

    color: #1d1d1f;

    font-size: 2.4rem;
    font-weight: 700;

    line-height: 1.2;
}

.page-header p {
    margin: 0 0 12px;

    color: #555;

    font-size: 1rem;

    line-height: 1.65;
}


/* ---------- Google Scholar Button ---------- */

.scholar-button {
    display: inline-block;

    margin-top: 15px;

    padding: 9px 16px;

    color: #ffffff;

    background-color: #0066cc;

    border-radius: 5px;

    font-size: 0.92rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.scholar-button:hover {
    color: #ffffff;

    background-color: #004f9e;
}


/* ---------- Publication Year Sections ---------- */

.publication-year-section {
    padding: 35px 0 45px;

    border-top: 1px solid #eeeeee;
}

.year-heading {
    margin: 0 0 12px;

    color: #777;

    font-size: 1.25rem;
    font-weight: 600;

    line-height: 1.3;
}


/* ---------- Publication Entries ---------- */

.publication-entry {
    max-width: 900px;

    padding: 25px 0;

    border-bottom: 1px solid #eeeeee;
}

.publication-entry:last-child {
    border-bottom: none;
}

.publication-entry h3 {
    margin: 0 0 9px;

    color: #222;

    font-size: 1.08rem;
    font-weight: 600;

    line-height: 1.45;
}


/* ==========================================================
   Complete Publication Record
========================================================== */

.complete-publications {
    padding: 50px 0 70px;

    border-top: 1px solid #eeeeee;
}

.complete-publications h2 {
    margin: 0 0 12px;

    color: #1d1d1f;

    font-size: 1.5rem;
    font-weight: 700;

    line-height: 1.3;
}

.complete-publications p {
    max-width: 700px;

    margin: 0;

    color: #555;

    font-size: 1rem;

    line-height: 1.65;
}


/* ---------- Publication Profile Links ---------- */

.publication-profile-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;

    margin-top: 18px;
}

.publication-profile-links a {
    color: #0066cc;

    font-size: 0.95rem;
    font-weight: 500;

    text-decoration: none;
}

.publication-profile-links a:hover {
    color: #004999;

    text-decoration: underline;
}


/* ==========================================================
   Research Page
========================================================== */

.research-page-header {
    max-width: 850px;
}


/* ---------- Detailed Research Areas ---------- */

.research-detail-section {
    padding: 55px 0 70px;
    border-top: 1px solid #eeeeee;
}

.research-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.research-detail-card {
    padding: 30px;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
}

.research-detail-card h3 {
    margin: 0 0 13px;
    color: #222;
    font-size: 1.15rem;
    font-weight: 600;
}

.research-detail-card p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ---------- Application Areas ---------- */

.application-section {
    padding: 60px 0 70px;
    border-top: 1px solid #eeeeee;
}

.application-list {
    max-width: 900px;
}

.application-item {
    padding: 25px 0;
    border-bottom: 1px solid #eeeeee;
}

.application-item:first-child {
    border-top: 1px solid #eeeeee;
}

.application-item h3 {
    margin: 0 0 9px;
    color: #222;
    font-size: 1.08rem;
    font-weight: 600;
}

.application-item p {
    max-width: 800px;
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}


/* ---------- Methods and Technologies ---------- */

.methods-section {
    padding: 60px 0 70px;
    border-top: 1px solid #eeeeee;
}

.methods-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

.method-group {
    padding: 24px;
    background-color: #fafafa;
    border: 1px solid #eeeeee;
    border-radius: 7px;
}

.method-group h3 {
    margin: 0 0 9px;
    color: #222;
    font-size: 1rem;
    font-weight: 600;
}

.method-group p {
    margin: 0;
    color: #606060;
    font-size: 0.9rem;
    line-height: 1.65;
}


/* ---------- Research Links ---------- */

.research-links-section {
    padding: 55px 0 70px;
    border-top: 1px solid #eeeeee;
}

.research-links-section h2 {
    margin: 0 0 12px;
    color: #1d1d1f;
    font-size: 1.5rem;
}

.research-links-section > p {
    max-width: 700px;
    margin: 0;
    color: #555;
}

.research-page-links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-top: 22px;
}

.research-page-links a {
    color: #0066cc;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
}

.research-page-links a:hover {
    color: #004999;
    text-decoration: underline;
}

/* ==========================================================
   Projects Page
========================================================== */

.projects-page-header {
    max-width: 850px;
}


/* ---------- Projects ---------- */

.projects-section {
    padding: 20px 0 70px;
    border-top: 1px solid #eeeeee;
}

.project-card {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 28px;

    padding: 42px 0;

    border-bottom: 1px solid #eeeeee;
}

.project-number {
    padding-top: 4px;

    color: #999;

    font-size: 0.9rem;
    font-weight: 600;
}

.project-content {
    max-width: 900px;
}

.project-content h2 {
    margin: 0 0 12px;

    color: #1d1d1f;

    font-size: 1.35rem;
    font-weight: 700;

    line-height: 1.35;
}

.project-summary {
    max-width: 800px;

    margin: 0 0 25px;

    color: #555;

    font-size: 0.98rem;

    line-height: 1.7;
}


/* ---------- Project Details ---------- */

.project-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 25px;

    margin-top: 20px;
}

.project-details h3 {
    margin: 0 0 6px;

    color: #333;

    font-size: 0.88rem;
    font-weight: 700;
}

.project-details p {
    margin: 0;

    color: #666;

    font-size: 0.9rem;

    line-height: 1.6;
}


/* ---------- Project Tags ---------- */

.project-tags {
    display: flex;
    flex-wrap: wrap;

    gap: 8px;

    margin-top: 24px;
}

.project-tags span {
    display: inline-block;

    padding: 5px 10px;

    color: #555;
    background-color: #f5f5f5;

    border: 1px solid #e8e8e8;
    border-radius: 4px;

    font-size: 0.8rem;
}


/* ---------- Project Publication Links ---------- */

.project-links {
    margin-top: 18px;
}

.project-links a {
    color: #0066cc;

    font-size: 0.9rem;
    font-weight: 600;

    text-decoration: none;
}

.project-links a:hover {
    color: #004999;
    text-decoration: underline;
}


/* ---------- Project Footer ---------- */

.project-footer-section {
    padding: 55px 0 70px;
    border-top: 1px solid #eeeeee;
}

.project-footer-section h2 {
    margin: 0 0 12px;

    color: #1d1d1f;

    font-size: 1.5rem;
}

.project-footer-section > p {
    max-width: 700px;

    margin: 0;

    color: #555;
}




/* ==========================================================
   Earlier Research & Research Leadership
========================================================== */

.earlier-research-section {
    margin-top: 80px;
    padding-top: 60px;
    border-top: 1px solid #e5e5e5;
}

.earlier-research-header {
    max-width: 850px;
    margin-bottom: 40px;
}

.earlier-research-header h2 {
    margin: 0 0 16px;
    color: #1d1d1f;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.25;
}

.earlier-research-header p {
    margin: 0;
    color: #555;
    font-size: 1rem;
    line-height: 1.75;
}

.earlier-projects-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
}

.earlier-project-card {
    display: flex;
    flex-direction: column;
    padding: 28px;
    background-color: #ffffff;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        border-color 0.2s ease;
}

.earlier-project-card:hover {
    transform: translateY(-3px);
    border-color: #d0d0d0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}

.earlier-project-code {
    align-self: flex-start;
    display: inline-block;
    margin-bottom: 14px;
    padding: 5px 10px;
    color: #0066cc;
    background-color: #f2f7fc;
    border-radius: 5px;
    font-size: 0.78rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: 0.04em;
}

.earlier-project-card h3 {
    margin: 0 0 12px;
    color: #111;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.4;
}

.earlier-project-card > p {
    margin: 0 0 20px;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.7;
}

.earlier-project-card .project-tags {
    margin-top: auto;
}

/* ==========================================================
   Teaching Page
========================================================== */

.teaching-page-header {
    max-width: 850px;
}


/* ---------- Institution ---------- */

.teaching-institution {
    padding: 55px 0 65px;
    border-top: 1px solid #eeeeee;
}

.institution-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;

    margin-bottom: 32px;
}

.institution-header h2 {
    margin: 0 0 5px;

    color: #1d1d1f;

    font-size: 1.5rem;
    font-weight: 700;
}

.institution-location {
    margin: 0;

    color: #777;

    font-size: 0.92rem;
}

.teaching-role {
    margin: 3px 0 0;

    color: #555;

    font-size: 0.92rem;
    font-weight: 600;

    white-space: nowrap;
}


/* ---------- Course Grid ---------- */

.course-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 24px;
}

.course-item {
    padding: 18px 20px;

    background-color: #fafafa;

    border: 1px solid #eeeeee;
    border-radius: 6px;
}

.course-item h3 {
    margin: 0;

    color: #333;

    font-size: 0.96rem;
    font-weight: 600;

    line-height: 1.45;
}

.course-code {
    margin: 6px 0 0;

    color: #777;

    font-size: 0.85rem;
}


/* ---------- Teaching Subsections ---------- */

.teaching-subsection {
    margin-top: 35px;
}

.teaching-subsection:first-of-type {
    margin-top: 0;
}

.teaching-subheading {
    margin: 0 0 17px;

    color: #555;

    font-size: 1rem;
    font-weight: 600;
}


/* ---------- Teaching Areas ---------- */

.teaching-areas-section {
    padding: 60px 0 70px;

    border-top: 1px solid #eeeeee;
}

.teaching-areas-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 20px;
}

.teaching-area {
    padding: 24px;

    border: 1px solid #eeeeee;
    border-radius: 7px;
}

.teaching-area h3 {
    margin: 0 0 9px;

    color: #222;

    font-size: 1rem;
    font-weight: 600;
}

.teaching-area p {
    margin: 0;

    color: #606060;

    font-size: 0.9rem;

    line-height: 1.65;
}


/* ---------- Teaching Approach ---------- */

.teaching-approach-section {
    padding: 55px 0 70px;

    border-top: 1px solid #eeeeee;
}

.teaching-approach-section h2 {
    margin: 0 0 14px;

    color: #1d1d1f;

    font-size: 1.5rem;
}

.teaching-approach-section p {
    max-width: 800px;

    margin: 0;

    color: #555;

    font-size: 1rem;

    line-height: 1.7;
}


/* ==========================================================
   CV Page
========================================================== */

.cv-page-header {
    max-width: 850px;
}


/* ---------- CV Header Links ---------- */

.cv-header-links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;

    margin-top: 22px;
}

.cv-header-links a {
    color: #0066cc;

    font-size: 0.95rem;
    font-weight: 600;

    text-decoration: none;
}

.cv-header-links a:hover {
    color: #004999;
    text-decoration: underline;
}


/* ---------- Download CV Button ---------- */

.cv-download-button {
    display: inline-block;

    margin-top: 24px;
    padding: 10px 18px;

    color: #ffffff;
    background-color: #0066cc;

    border-radius: 5px;

    font-size: 0.92rem;
    font-weight: 600;

    text-decoration: none;

    transition:
        background-color 0.2s ease,
        color 0.2s ease;
}

.cv-download-button:hover {
    color: #ffffff;
    background-color: #004f9e;
}


/* ---------- Main CV Sections ---------- */

.cv-section {
    display: grid;
    grid-template-columns: 210px 1fr;
    gap: 45px;

    padding: 48px 0;

    border-top: 1px solid #eeeeee;
}

.cv-section-title h2 {
    margin: 0;

    color: #1d1d1f;

    font-size: 1.2rem;
    font-weight: 700;

    line-height: 1.4;
}

.cv-section-content {
    max-width: 850px;
}

.cv-profile-text {
    max-width: 800px;

    margin: 0;

    color: #555;

    font-size: 0.97rem;

    line-height: 1.7;
}


/* ---------- Research Interests ---------- */

.cv-interest-list {
    display: flex;
    flex-wrap: wrap;

    gap: 9px;
}

.cv-interest-list span {
    padding: 6px 11px;

    color: #555;
    background-color: #f6f6f6;

    border: 1px solid #e8e8e8;
    border-radius: 4px;

    font-size: 0.85rem;
}


/* ---------- Experience / Education ---------- */

.cv-entry {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 25px;

    padding: 0 0 28px;
    margin-bottom: 28px;

    border-bottom: 1px solid #eeeeee;
}

.cv-entry:last-child {
    padding-bottom: 0;
    margin-bottom: 0;

    border-bottom: none;
}

.cv-entry-date {
    padding-top: 3px;

    color: #777;

    font-size: 0.88rem;
    font-weight: 600;
}

.cv-entry-content h3 {
    margin: 0 0 4px;

    color: #222;

    font-size: 1.05rem;
    font-weight: 600;
}

.cv-entry-content p {
    margin: 7px 0 0;

    color: #555;

    font-size: 0.92rem;

    line-height: 1.65;
}

.cv-entry-organisation {
    margin-top: 0 !important;

    color: #666 !important;

    font-weight: 500;
}


/* ---------- Skills ---------- */

.cv-skills-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 18px;
}

.cv-skill-group {
    padding: 20px;

    background-color: #fafafa;

    border: 1px solid #eeeeee;
    border-radius: 6px;
}

.cv-skill-group h3 {
    margin: 0 0 7px;

    color: #222;

    font-size: 0.95rem;
    font-weight: 600;
}

.cv-skill-group p {
    margin: 0;

    color: #606060;

    font-size: 0.88rem;

    line-height: 1.6;
}


/* ---------- CV Publications ---------- */

.cv-publication {
    display: grid;
    grid-template-columns: 65px 1fr;
    gap: 20px;

    padding: 18px 0;

    border-bottom: 1px solid #eeeeee;
}

.cv-publication:first-child {
    padding-top: 0;
}

.cv-publication-year {
    color: #777;

    font-size: 0.88rem;
    font-weight: 600;
}

.cv-publication h3 {
    margin: 0 0 4px;

    color: #333;

    font-size: 0.95rem;
    font-weight: 600;

    line-height: 1.5;
}

.cv-publication p {
    margin: 0;

    color: #666;

    font-size: 0.88rem;
}


/* ---------- CV Links ---------- */

.cv-more-link {
    margin-top: 22px;
}

.cv-more-link a {
    color: #0066cc;

    font-size: 0.92rem;
    font-weight: 600;

    text-decoration: none;
}

.cv-more-link a:hover {
    color: #004999;
    text-decoration: underline;
}


/* ---------- Academic Service ---------- */

.cv-service-block {
    margin-bottom: 28px;
}

.cv-service-block:last-child {
    margin-bottom: 0;
}

.cv-service-block h3 {
    margin: 0 0 8px;

    color: #222;

    font-size: 1rem;
}

.cv-service-block p {
    max-width: 780px;

    margin: 0;

    color: #555;

    font-size: 0.92rem;

    line-height: 1.7;
}


/* ---------- Awards ---------- */

.cv-award-list p {
    margin: 0 0 20px;

    color: #555;

    font-size: 0.92rem;

    line-height: 1.6;
}

.cv-award-list p:last-child {
    margin-bottom: 0;
}


/* ---------- Research Profiles ---------- */

.cv-profile-section {
    padding: 50px 0 70px;

    border-top: 1px solid #eeeeee;
}

.cv-profile-section h2 {
    margin: 0 0 18px;

    color: #1d1d1f;

    font-size: 1.5rem;
}

.cv-profile-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 22px;
}

.cv-profile-links a {
    color: #0066cc;

    font-size: 0.95rem;
    font-weight: 600;

    text-decoration: none;
}

.cv-profile-links a:hover {
    color: #004999;
    text-decoration: underline;
}


/* ==========================================================
   Footer
========================================================== */

footer {
    margin-top: 20px;

    padding: 28px 0;

    background-color: #fafafa;

    border-top: 1px solid #e8e8e8;
}

footer p {
    margin: 0;

    color: #777;

    font-size: 0.88rem;

    text-align: center;
}


/* ==========================================================
   Tablet
========================================================== */

@media (max-width: 900px) {

    /* ---------- Navigation ---------- */

    .navbar {
        align-items: flex-start;

        flex-direction: column;

        padding: 18px 0;
    }

    nav {
        flex-wrap: wrap;

        margin-top: 12px;
    }

    nav a {
        margin: 5px 22px 5px 0;
    }


    /* ---------- Profile ---------- */

    .hero {
        grid-template-columns: 220px 1fr;

        gap: 40px;

        padding: 55px 0;
    }

    .profile-photo {
        width: 210px;
        height: 210px;
    }

    .hero h1 {
        font-size: 2.15rem;
    }


    /* ---------- Earlier Research ---------- */

    .earlier-research-section {
        margin-top: 65px;
        padding-top: 50px;
    }

    .earlier-projects-grid {
        gap: 20px;
    }

}


/* ==========================================================
   Mobile
========================================================== */

@media (max-width: 700px) {

    .container {
        width: 88%;
    }


    /* ---------- Navigation ---------- */

    .navbar {
        min-height: auto;

        padding: 18px 0;
    }

    .logo {
        font-size: 1.1rem;
    }

    nav {
        width: 100%;

        margin-top: 14px;
    }

    nav a {
        margin: 4px 18px 4px 0;

        font-size: 0.9rem;
    }


    /* ---------- Profile ---------- */

    .hero {
        grid-template-columns: 1fr;

        gap: 30px;

        padding: 45px 0 50px;
    }

    .profile-image-container {
        justify-content: center;
    }

    .profile-photo {
        width: 190px;
        height: 190px;
    }

    .profile-content {
        max-width: 100%;
    }

    .hero h1 {
        font-size: 2rem;
    }

    .subtitle {
        font-size: 1rem;
    }

    .affiliation {
        margin-bottom: 22px;
    }


    /* ---------- Profile Links ---------- */

    .profile-links {
        gap: 8px 18px;

        margin-top: 22px;
    }


    /* ---------- General Sections ---------- */

    section {
        padding: 45px 0;
    }

    .section-heading {
        margin-bottom: 28px;
    }

    .section-heading h2 {
        font-size: 1.55rem;
    }


    /* ---------- Research ---------- */

    .research-section {
        padding: 50px 0 60px;
    }

    .research-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }

    .research-card {
        padding: 24px;
    }


    /* ---------- Homepage Publications ---------- */

    .publications-section {
        padding: 50px 0 60px;
    }

    .publication-item {
        grid-template-columns: 1fr;

        gap: 5px;

        padding: 24px 0;
    }

    .publication-year {
        margin-bottom: 4px;

        padding-top: 0;
    }

    .publication-content h3 {
        font-size: 1.02rem;
    }

    .publication-authors,
    .publication-journal {
        font-size: 0.9rem;
    }

    .all-publications {
        margin-top: 28px;
    }


    /* ---------- Publications Page ---------- */

    .page-header {
        max-width: 100%;

        padding: 50px 0 40px;
    }

    .page-header h1 {
        font-size: 2rem;
    }

    .publication-year-section {
        padding: 30px 0 38px;
    }

    .year-heading {
        font-size: 1.15rem;
    }

    .publication-entry {
        padding: 22px 0;
    }

    .publication-entry h3 {
        font-size: 1.02rem;
    }

    .complete-publications {
        padding: 40px 0 55px;
    }

    .complete-publications h2 {
        font-size: 1.4rem;
    }

    .publication-profile-links {
        gap: 8px 18px;
    }


       /* ---------- Research Page ---------- */

    .research-detail-section,
    .application-section,
    .methods-section {
        padding: 45px 0 55px;
    }

    .research-detail-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .research-detail-card {
        padding: 24px;
    }

    .application-item {
        padding: 22px 0;
    }

    .methods-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .method-group {
        padding: 22px;
    }

    .research-links-section {
        padding: 45px 0 55px;
    }

    .research-page-links {
        gap: 10px 18px;
    }

       /* ---------- Projects Page ---------- */

    .projects-section {
        padding: 10px 0 55px;
    }

    .project-card {
        grid-template-columns: 1fr;
        gap: 6px;

        padding: 34px 0;
    }

    .project-number {
        padding-top: 0;
    }

    .project-content h2 {
        font-size: 1.2rem;
    }

    .project-details {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .project-tags {
        margin-top: 20px;
    }

    .project-footer-section {
        padding: 45px 0 55px;
    }


    /* ---------- Earlier Research ---------- */

    .earlier-research-section {
        margin-top: 55px;
        padding-top: 42px;
    }

    .earlier-research-header {
        margin-bottom: 30px;
    }

    .earlier-research-header h2 {
        font-size: 1.7rem;
    }

    .earlier-projects-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .earlier-project-card {
        padding: 24px;
    }

       /* ---------- Teaching Page ---------- */

    .teaching-institution {
        padding: 45px 0 55px;
    }

    .institution-header {
        flex-direction: column;
        gap: 8px;

        margin-bottom: 25px;
    }

    .teaching-role {
        margin-top: 0;
    }

    .course-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .course-item {
        padding: 17px 18px;
    }

    .teaching-subsection {
        margin-top: 30px;
    }

    .teaching-areas-section {
        padding: 45px 0 55px;
    }

    .teaching-areas-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .teaching-area {
        padding: 22px;
    }

    .teaching-approach-section {
        padding: 45px 0 55px;
    }


   /* ---------- CV Page ---------- */

   .cv-section {
       grid-template-columns: 1fr;
       gap: 22px;
   
       padding: 40px 0;
   }
   
   .cv-section-title h2 {
       font-size: 1.15rem;
   }
   
   .cv-entry {
       grid-template-columns: 1fr;
       gap: 5px;
   
       padding-bottom: 24px;
       margin-bottom: 24px;
   }
   
   .cv-entry-date {
       padding-top: 0;
   }
   
   .cv-skills-grid {
       grid-template-columns: 1fr;
       gap: 14px;
   }
   
   .cv-publication {
       grid-template-columns: 1fr;
       gap: 4px;
   }
   
   .cv-profile-section {
       padding: 45px 0 55px;
   }

}


/* ==========================================================
   Small Mobile
========================================================== */

@media (max-width: 420px) {

    .container {
        width: 90%;
    }


    /* ---------- Profile ---------- */

    .profile-photo {
        width: 170px;
        height: 170px;
    }

    .hero h1 {
        font-size: 1.8rem;
    }

    .profile-links {
        flex-direction: column;

        gap: 7px;
    }


    /* ---------- Homepage Publications ---------- */

    .publication-item {
        padding: 21px 0;
    }

    .publication-content h3 {
        font-size: 1rem;
    }


    /* ---------- Publications Page ---------- */

    .page-header h1 {
        font-size: 1.8rem;
    }

    .publication-entry {
        padding: 20px 0;
    }

    .publication-entry h3 {
        font-size: 1rem;
    }

    .publication-profile-links {
        flex-direction: column;

        gap: 7px;
    }

}

/* ==========================================================
   Research Technology Theme
========================================================== */
:root {
 --bg:#f7faff; --surface:#fff; --text:#142033; --soft:#526174;
 --heading:#0b1f3a; --accent:#087cf0; --accent2:#005fc4;
 --accent-soft:#eaf4ff; --border:#dce6f1;
}
body{color:var(--text);background:radial-gradient(circle at 82% 7%,rgba(8,124,240,.07),transparent 24rem),var(--bg);}
header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.94);border-bottom-color:var(--border);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);}
.logo,.hero h1,.page-header h1,.section-heading h2,.complete-publications h2,.research-links-section h2,.project-content h2,.earlier-research-header h2,.institution-header h2,.teaching-approach-section h2,.cv-section-title h2,.cv-profile-section h2{color:var(--heading);}
nav a{color:#3e4c60;font-weight:500;} nav a:hover,nav a.active,.logo:hover{color:var(--accent);}
nav a.active{position:relative;font-weight:700;} nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-10px;height:2px;background:var(--accent);border-radius:999px;}
.hero{position:relative;min-height:500px;}
.hero::after{content:"";position:absolute;z-index:-1;width:430px;height:430px;right:-80px;top:20px;border-radius:50%;background:radial-gradient(circle,rgba(8,124,240,.10) 0 1px,transparent 2px) 0 0/22px 22px,radial-gradient(circle at center,rgba(8,124,240,.08),transparent 68%);pointer-events:none;}
.profile-photo{border:5px solid rgba(255,255,255,.9);box-shadow:0 18px 45px rgba(15,47,79,.16);}
.hero h1{font-size:clamp(2.35rem,5vw,3.2rem);letter-spacing:-.035em;}
.subtitle{color:#24405f;font-weight:600;}
.affiliation,.bio,.section-heading p,.page-header p,.complete-publications p,.research-links-section>p,.project-summary,.earlier-research-header p,.teaching-approach-section p,.cv-profile-text{color:var(--soft);}
.profile-links a,.publication-links a,.button-link,.publication-profile-links a,.research-page-links a,.project-links a,.cv-header-links a,.cv-more-link a,.cv-profile-links a{color:var(--accent);}
.profile-links a{padding:7px 11px;background:var(--surface);border:1px solid var(--border);border-radius:7px;box-shadow:0 3px 12px rgba(21,53,87,.04);}
.research-card,.research-detail-card,.method-group,.earlier-project-card,.course-item,.teaching-area,.cv-skill-group{background:var(--surface);border-color:var(--border);border-radius:10px;box-shadow:0 5px 18px rgba(21,53,87,.045);transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;}
.research-card:hover,.research-detail-card:hover,.method-group:hover,.earlier-project-card:hover,.course-item:hover,.teaching-area:hover,.cv-skill-group:hover{transform:translateY(-3px);border-color:#bdd8f4;box-shadow:0 16px 38px rgba(21,53,87,.13);}
.research-card h3,.research-detail-card h3,.method-group h3,.application-item h3,.earlier-project-card h3,.course-item h3,.teaching-area h3,.cv-entry-content h3,.cv-skill-group h3,.cv-publication h3,.cv-service-block h3{color:var(--heading);}
.scholar-button,.cv-download-button{background:linear-gradient(135deg,var(--accent),#0067d8);border-radius:7px;box-shadow:0 7px 18px rgba(8,124,240,.20);}
.project-tags span,.cv-interest-list span{color:#27506f;background:var(--accent-soft);border-color:#d3e7fb;border-radius:6px;}
.earlier-project-code,.project-number{color:var(--accent);}
.project-card{border-radius:12px;padding-left:18px;padding-right:18px;}
.page-header::before{content:"";display:block;width:52px;height:4px;margin-bottom:22px;background:var(--accent);border-radius:999px;}
footer{background:#eef4fa;border-top-color:var(--border);}

/* Dark theme: activated by adding class="dark-theme" to body */
body.dark-theme{--bg:#08131f;--surface:#0e1c2b;--text:#e7eef7;--soft:#b1bfd0;--heading:#f4f8fc;--accent:#3c9cff;--accent2:#70b6ff;--accent-soft:#102c48;--border:#24394e;background:radial-gradient(circle at 82% 7%,rgba(31,131,235,.15),transparent 24rem),var(--bg);}
body.dark-theme header{background:rgba(8,19,31,.94);}
body.dark-theme nav a{color:#b8c5d4;} body.dark-theme nav a:hover,body.dark-theme nav a.active{color:var(--accent);}
body.dark-theme .subtitle{color:#d0deed;} body.dark-theme .profile-links a{background:var(--surface);}
body.dark-theme .project-tags span,body.dark-theme .cv-interest-list span{color:#b8dcff;background:var(--accent-soft);border-color:#24496b;}
body.dark-theme footer{background:#0b1826;}

/* Theme toggle */
.theme-toggle{width:38px;height:38px;margin-left:24px;display:inline-grid;place-items:center;flex:0 0 auto;color:var(--heading);background:var(--surface);border:1px solid var(--border);border-radius:50%;cursor:pointer;font:inherit;line-height:1;box-shadow:0 4px 14px rgba(21,53,87,.08);transition:transform .2s ease,border-color .2s ease;}
.theme-toggle:hover{transform:translateY(-1px);border-color:var(--accent);}
.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:3px;}
@media(max-width:900px){.navbar{position:relative}.theme-toggle{position:absolute;top:18px;right:0;margin-left:0;}}
@media(max-width:700px){.hero::after{width:300px;height:300px;right:-90px;top:120px;opacity:.7}nav a.active::after{bottom:-5px;}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important;}}



/* ==========================================================
   Dark Theme - Text Contrast Fix
========================================================== */

body.dark-theme {
    color: #e7eef7;
}

/* General secondary text */
body.dark-theme p {
    color: #b7c4d3;
}

/* Research cards */
body.dark-theme .research-card p,
body.dark-theme .research-detail-card p,
body.dark-theme .method-group p {
    color: #aebdcd;
}

/* Publications */
body.dark-theme .publication-content h3,
body.dark-theme .publication-entry h3 {
    color: #f0f5fa;
}

body.dark-theme .publication-authors,
body.dark-theme .publication-journal {
    color: #aebdcd;
}

body.dark-theme .publication-year,
body.dark-theme .year-heading {
    color: #91a4b8;
}

/* Projects */
body.dark-theme .project-summary,
body.dark-theme .project-details p {
    color: #aebdcd;
}

body.dark-theme .project-details h3 {
    color: #dce6f0;
}

body.dark-theme .project-number {
    color: #3c9cff;
}

/* Teaching */
body.dark-theme .course-code,
body.dark-theme .institution-location,
body.dark-theme .teaching-role,
body.dark-theme .teaching-area p {
    color: #aebdcd;
}

/* CV */
body.dark-theme .cv-entry-date,
body.dark-theme .cv-entry-content p,
body.dark-theme .cv-profile-text,
body.dark-theme .cv-skill-group p,
body.dark-theme .cv-publication p,
body.dark-theme .cv-service-block p,
body.dark-theme .cv-award-list p {
    color: #aebdcd;
}

/* Earlier research */
body.dark-theme .earlier-project-card > p {
    color: #aebdcd;
}

/* Links */
body.dark-theme .publication-links a,
body.dark-theme .project-links a,
body.dark-theme .button-link,
body.dark-theme .research-page-links a,
body.dark-theme .cv-more-link a {
    color: #58a6ff;
}


/* ==========================================================
   Modern Homepage Hero
========================================================== */

.hero-modern {
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
    gap: 70px;

    min-height: 560px;

    padding: 75px 0 70px;
}

.hero-main {
    max-width: 720px;
}

.hero-eyebrow {
    display: inline-block;

    margin: 0 0 18px;
    padding: 7px 12px;

    color: #087cf0;
    background: #eaf4ff;

    border: 1px solid #d4e8fb;
    border-radius: 6px;

    font-size: 0.78rem;
    font-weight: 700;

    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.hero-modern h1 {
    margin-bottom: 15px;

    font-size: clamp(2.8rem, 4.5vw, 3.7rem);

    line-height: 1.08;
    letter-spacing: -0.045em;
}

.hero-modern .subtitle {
    max-width: 700px;

    margin-bottom: 13px;

    font-size: 1.12rem;
}

.hero-modern .affiliation {
    margin-bottom: 25px;
}

.hero-modern .bio {
    max-width: 690px;

    font-size: 1rem;
    line-height: 1.75;
}


/* ---------- Hero Buttons ---------- */

.hero-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 30px;
}

.hero-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 44px;

    padding: 10px 18px;

    border-radius: 7px;

    font-size: 0.92rem;
    font-weight: 700;

    text-decoration: none;

    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}

.hero-button:hover {
    transform: translateY(-2px);
}

.hero-button-primary {
    color: #ffffff;

    background: linear-gradient(
        135deg,
        #087cf0,
        #0067d8
    );

    border: 1px solid #087cf0;

    box-shadow:
        0 8px 20px rgba(8, 124, 240, 0.22);
}

.hero-button-primary:hover {
    color: #ffffff;

    box-shadow:
        0 11px 25px rgba(8, 124, 240, 0.30);
}

.hero-button-secondary {
    color: #16324f;

    background: #ffffff;

    border: 1px solid #cbdceb;
}

.hero-button-secondary:hover {
    color: #087cf0;

    border-color: #87bceb;

    box-shadow:
        0 8px 20px rgba(21, 53, 87, 0.08);
}


/* ---------- Hero Visual ---------- */

.hero-visual {
    position: relative;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

.profile-photo-frame {
    position: relative;
    width: 315px;
    height: 315px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    border: none;
    border-radius: 50%;
    background: transparent;
    filter: drop-shadow(0 20px 35px rgba(0, 0, 0, 0.25));
}

/* ---------- Main Broken Orbital Ring ---------- */
.profile-photo-frame::before {
    content: "";
    position: absolute;
    inset: -14px;
    border-radius: 50%;
    background: conic-gradient(
        from 15deg,
        #3c9cff 0deg 48deg,
        transparent 48deg 78deg,
        rgba(60,156,255,.35) 78deg 145deg,
        transparent 145deg 185deg,
        #087cf0 185deg 245deg,
        transparent 245deg 280deg,
        rgba(60,156,255,.55) 280deg 335deg,
        transparent 335deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px));
    opacity: .85;
    pointer-events: none;
}

/* ---------- Second Outer Orbit ---------- */
.profile-photo-frame::after {
    content: "";
    position: absolute;
    inset: -27px;
    border-radius: 50%;
    background: conic-gradient(
        from 210deg,
        transparent 0deg 35deg,
        rgba(60,156,255,.25) 35deg 92deg,
        transparent 92deg 180deg,
        rgba(60,156,255,.55) 180deg 225deg,
        transparent 225deg 310deg,
        rgba(60,156,255,.25) 310deg 345deg,
        transparent 345deg 360deg
    );
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 calc(100% - 1px));
    pointer-events: none;
}

/* ---------- Actual Photograph ---------- */
.hero-modern .profile-photo {
    position: relative;
    z-index: 2;
    display: block;
    width: 295px;
    height: 295px;
    object-fit: cover;
    object-position: center;
    border: 5px solid #ffffff;
    border-radius: 50%;
    box-shadow:
        0 0 0 1px rgba(60,156,255,.25),
        0 0 30px rgba(8,124,240,.12);
    transition: transform .3s ease, box-shadow .3s ease;
}

.profile-photo-frame:hover .profile-photo {
    transform: scale(1.015);
    box-shadow:
        0 0 0 1px rgba(60,156,255,.45),
        0 0 38px rgba(8,124,240,.20);
}


/* ---------- Technical Signal Decoration ---------- */

.hero-signal {
    position: absolute;

    width: 420px;
    height: 260px;

    opacity: 0.34;

    pointer-events: none;
}

.hero-signal::before {
    content: "";

    position: absolute;

    inset: 0;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(8,124,240,0.15) 1px,
            transparent 1.5px
        );

    background-size: 20px 20px;

    mask-image:
        radial-gradient(
            ellipse at center,
            black 20%,
            transparent 72%
        );
}

.hero-signal span {
    position: absolute;

    left: 0;

    width: 100%;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(8,124,240,0.15),
            rgba(8,124,240,0.7),
            rgba(8,124,240,0.15),
            transparent
        );
}

.hero-signal span:nth-child(1) {
    top: 38%;
    transform: rotate(-5deg);
}

.hero-signal span:nth-child(2) {
    top: 50%;
    transform: rotate(4deg);
}

.hero-signal span:nth-child(3) {
    top: 62%;
    transform: rotate(-2deg);
}


/* ---------- Hero Specialisms ---------- */

.hero-specialisms {
    display: flex;
    flex-wrap: wrap;

    justify-content: center;

    gap: 7px;

    max-width: 340px;

    margin-top: 25px;
}

.hero-specialisms span {
    padding: 6px 10px;

    color: #31516e;
    background: #f4f8fc;

    border: 1px solid #dbe7f1;
    border-radius: 999px;

    font-size: 0.75rem;
    font-weight: 600;
}


/* ==========================================================
   Dark Hero
========================================================== */

body.dark-theme .hero-eyebrow {
    color: #72b9ff;

    background: #102c48;

    border-color: #24496b;
}

body.dark-theme .profile-photo-frame {
    background: transparent;
    border-color: transparent;
    box-shadow: none;
    filter: drop-shadow(0 20px 35px rgba(0,0,0,.32));
}

body.dark-theme .hero-modern .profile-photo {
    border-color: #132a40;
    box-shadow:
        0 0 0 1px rgba(60,156,255,.30),
        0 0 32px rgba(8,124,240,.16);
}

body.dark-theme .hero-button-secondary {
    color: #d9e8f7;

    background: #0e1c2b;

    border-color: #2c465e;
}

body.dark-theme .hero-button-secondary:hover {
    color: #58a6ff;

    border-color: #3c78aa;
}

body.dark-theme .hero-specialisms span {
    color: #b9d9f5;

    background: #102337;

    border-color: #27425c;
}


/* ==========================================================
   Hero Responsive
========================================================== */

@media (max-width: 900px) {

    .hero-modern {
        grid-template-columns:
            minmax(0, 1fr)
            230px;

        gap: 40px;

        min-height: auto;

        padding: 65px 0 70px;
    }

    .profile-photo-frame {
        width: 240px;
        height: 240px;
    }

    .hero-modern .profile-photo {
        width: 220px;
        height: 220px;
    }

    .hero-signal {
        width: 300px;
        height: 220px;
    }
}


@media (max-width: 700px) {

    .hero-modern {
        grid-template-columns: 1fr;

        gap: 45px;

        padding: 55px 0 65px;
    }

    .hero-main {
        order: 1;
    }

    .hero-visual {
        order: 2;
    }

    .hero-modern h1 {
        font-size: 2.65rem;
    }

    .profile-photo-frame {
        width: 230px;
        height: 230px;
    }

    .hero-modern .profile-photo {
        width: 210px;
        height: 210px;
    }

    .hero-actions {
        margin-top: 26px;
    }

    .hero-signal {
        width: 310px;
        height: 220px;
    }
}


@media (max-width: 420px) {

    .hero-modern h1 {
        font-size: 2.25rem;
    }

    .hero-actions {
        flex-direction: column;
    }

    .hero-button {
        width: 100%;
    }

    .profile-photo-frame {
        width: 210px;
        height: 210px;
    }

    .hero-modern .profile-photo {
        width: 190px;
        height: 190px;
    }
}


/* ==========================================================
   Research Impact
========================================================== */

.research-impact {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    margin: 0 0 12px;
    padding: 24px 0;

    background: var(--surface);

    border: 1px solid var(--border);
    border-radius: 12px;

    box-shadow:
        0 8px 28px rgba(21, 53, 87, 0.06);
}

.impact-stat {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    min-height: 82px;

    padding: 10px 20px;

    text-align: center;
}

/* Vertical separators */

.impact-stat:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 15%;
    right: 0;

    width: 1px;
    height: 70%;

    background: var(--border);
}


/* Number */

.impact-number {
    display: block;

    margin-bottom: 5px;

    color: var(--accent);

    font-size: 1.9rem;
    font-weight: 750;
    line-height: 1;
    letter-spacing: -0.025em;
}


/* Label */

.impact-label {
    color: var(--soft);

    font-size: 0.82rem;
    font-weight: 600;

    letter-spacing: 0.025em;
}


/* Source */

.impact-source {
    margin: 0 0 65px;

    color: var(--soft);

    font-size: 0.75rem;
    text-align: right;
}


/* ==========================================================
   Dark Theme
========================================================== */

body.dark-theme .research-impact {
    background: rgba(14, 28, 43, 0.72);

    border-color: #24394e;

    box-shadow:
        0 10px 32px rgba(0, 0, 0, 0.16);
}

body.dark-theme .impact-number {
    color: #58a6ff;
}

body.dark-theme .impact-label,
body.dark-theme .impact-source {
    color: #9fb0c2;
}


/* ==========================================================
   Research Impact Responsive
========================================================== */

@media (max-width: 700px) {

    .research-impact {
        grid-template-columns: repeat(2, 1fr);
    }

    .impact-stat {
        min-height: 90px;
    }

    .impact-stat:nth-child(1),
    .impact-stat:nth-child(2) {
        border-bottom: 1px solid var(--border);
    }

    .impact-stat:nth-child(2)::after {
        display: none;
    }

    .impact-source {
        margin-bottom: 50px;
        text-align: center;
    }
}


@media (max-width: 420px) {

    .research-impact {
        grid-template-columns: 1fr;
    }

    .impact-stat {
        min-height: 75px;
        border-bottom: 1px solid var(--border);
    }

    .impact-stat:last-child {
        border-bottom: none;
    }

    .impact-stat::after {
        display: none;
    }

    .impact-number {
        font-size: 1.7rem;
    }
}