/* ============================================================================
   UXID Lab stylesheet
   Extracted from index.html on 2026-10-12. Previously 15 separate <style>
   blocks with no shared variables, which is why the same component was
   redefined up to six times with conflicting values.

   Edit colours, spacing and type here in :root; everything else refers to it.
   ========================================================================= */

:root {
  /* Colour -------------------------------------------------------------- */
  --color-bg:              #1D3557;  /* page + alternating sections (navy)  */
  --color-surface:         #2C3E50;  /* section panels (slate)              */
  --color-surface-raised:  #1F2937;  /* cards, publication rows, team cards */
  --color-border:          rgba(255, 255, 255, 0.10);
  --color-text:            #ECECEC;
  --color-text-muted:      #AAB7B8;
  --color-accent:          #F4D03F;  /* gold - 8.2:1 on navy                */
  --color-accent-contrast: #1F2937;  /* text on gold fills                  */
  --color-accent-soft:     rgba(244, 208, 63, 0.14);

  /* Type ---------------------------------------------------------------- */
  --font-body:    'Roboto', system-ui, -apple-system, sans-serif;
  --font-display: 'Playfair Display', Georgia, serif;
  --text-xs:      clamp(0.72rem, 0.70rem + 0.15vw, 0.80rem);
  --text-sm:      clamp(0.85rem, 0.82rem + 0.20vw, 0.95rem);
  --text-base:    clamp(1.00rem, 0.95rem + 0.30vw, 1.125rem);
  --text-lg:      clamp(1.15rem, 1.05rem + 0.50vw, 1.40rem);
  --text-xl:      clamp(1.50rem, 1.20rem + 1.20vw, 2.25rem);
  --text-display: clamp(1.9rem, 1.35rem + 2.2vw, 2.6rem);
  --leading-body: 1.65;

  /* Space --------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 1rem;
  --space-4: 2rem;
  --space-5: 4rem;
  --space-section: clamp(2rem, 5vw, 4rem);

  /* Shape and depth ----------------------------------------------------- */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.30);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.30);
  --shadow-lg: 0 10px 30px rgba(0, 0, 0, 0.40);

  /* Layout -------------------------------------------------------------- */
  --container-max:    1200px;
  --container-narrow: 1000px;
  --header-h:         65px;
}

/* ---------- block 1 of 15 (was inline in index.html) ---------- */

        /* Reset and Global Styles */
        html { scroll-behavior: smooth; }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Roboto', sans-serif;
            color: #333333;
            background-color: #f3f4f6;
            line-height: 1.6;
        }
        .container { width: 90%; max-width: 1200px; margin: auto; padding: 20px; }

        /* Section Titles */
        /* Section Titles */
        h2.section-title {
            font-size: 3rem;
            color: #F4D03F;
            font-family: 'Playfair Display', serif;
            text-align: center;
            margin-bottom: 30px;
            text-transform: uppercase !important;
            font-weight: 700;
        }

        /* Generic Section Styling */
        section {
            padding: 30px 0;
            background-color: #fefefe;
        }

        /* Teaching and Research Sections */

        /* People Section */

        /* Publications Section */
        #publications { padding: 60px 0; background-color: #ffffff; color: #333333; }

        /* Contact Section */

        /* Footer */
        footer {
            background-color: #003049;
            padding: 40px 0;
            color: #f7f7f7;
            border-top: 4px solid #fcbf49;
            text-align: center;
            font-size: 0.9rem;
        }
        footer a { color: #fcbf49; text-decoration: none; transition: color 0.3s; }
        footer a:hover { color: #f77f00; }

        /* Responsive Design */
        @media (max-width: 768px) {
            nav ul { flex-direction: column; }
            .publication-item, .content-section { flex-direction: column; text-align: center; }
        }

/* ---------- block 2 of 15 (was inline in index.html) ---------- */

        /* Team Section */
        #people {
            padding: 40px 0;
            background-color: #fefae0;
        }
        .section-title {
            font-size: 2.5rem;
            color: #264653;
            text-align: center;
            margin-bottom: 50px;
            font-family: 'Playfair Display', serif;
        }
        .team-category {
            margin-bottom: 40px;
        }
        .team-category h3 {
            font-size: 2rem;
            color: #2A9D8F;
            text-align: center;
            margin-bottom: 30px;
        }

        /* Card Layout for Team Members */
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            max-width: 1200px;
            margin: auto;
        }
        .team-card {
            background-color: #fff;
            padding: 20px;
            border-radius: 15px;
            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
            text-align: center;
            transition: transform 0.3s, box-shadow 0.3s;
        }
        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
        }
        .team-card img {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            margin-bottom: 15px;
        }
        .team-card h4 {
            font-size: 1.2rem;
            color: #264653;
            margin-bottom: 10px;
        }
        .team-card p {
            font-size: 0.9rem;
            color: #555;
            margin-bottom: 8px;
        }

/* Contact Section */

/* ---------- block 3 of 15 (was inline in index.html) ---------- */

        
        /* Teaching & Research Sections */

        /* Publications Section */
        #publications { padding: 40px 0; background: linear-gradient(135deg, #1F2937, #2C3E50); color: #ECECEC; }

        .publication-item {
            display: flex;
            align-items: flex-start;
            background-color: rgba(31, 41, 55, 0.6);
            padding: 15px;
            border-radius: 10px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
            margin-bottom: 15px;
            border: 1px solid rgba(255, 255, 255, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            position: relative;
        }

        .publication-item:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
            border-color: rgba(244, 208, 63, 0.3);
        }

        .publication-thumbnail {
            width: 180px;
            height: 115px;
            border-radius: 6px;
            margin-right: 18px;
            border: 2px solid #F4D03F;
            object-fit: cover;
            flex-shrink: 0;
            box-shadow: 0 4px 10px rgba(0,0,0,0.3);
        }

        .publication-details {
            flex: 1;
        }

        .publication-details h3, .publication-details h4 {
            font-size: 1.15rem;
            color: #F4D03F;
            margin-bottom: 5px;
            font-family: 'Playfair Display', serif;
            font-weight: 700;
            line-height: 1.25;
            padding-right: 120px;
        }

        .publication-authors {
            font-size: 0.9rem;
            color: #ECECEC;
            font-style: italic;
            margin-bottom: 4px;
        }

        /* Full Venue Detail Style (Normal Text) */
        .publication-venue {
            display: block;
            font-size: 0.85rem;
            color: #AAB7B8;
            margin-bottom: 8px;
            font-weight: 500;
        }

        /* Restored Button and Link Styles */
        .publication-links {
            display: flex;
            gap: 10px;
            margin-top: 8px;
            flex-wrap: wrap;
        }

        .btn-pub {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            padding: 5px 12px;
            border-radius: 5px;
            font-size: 0.8rem;
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .btn-pdf {
            background: rgba(244, 208, 63, 0.12);
            color: #F4D03F;
            border: 1px solid #F4D03F;
        }

        .btn-pdf:hover {
            background: #F4D03F;
            color: #1F2937;
        }

        .btn-video {
            background: rgba(133, 193, 233, 0.12);
            color: #A9CCE3;
            border: 1px solid #A9CCE3;
        }

        .btn-video:hover {
            background: #A9CCE3;
            color: #1F2937;
        }

        .honorable-mention {
            margin-top: 10px;
            font-weight: bold;
            color: #F4D03F;
            display: flex;
            align-items: center;
            gap: 5px;
        }

        /* Badge Style (Short Acronym) */
        .publication-badge {
            display: inline-block;
            background-color: rgba(244, 208, 63, 0.1);
            color: #F4D03F;
            padding: 4px 10px;
            border-radius: 6px;
            font-weight: 600;
            font-size: 0.8rem;
            margin-bottom: 10px;
            border: 1px solid rgba(244, 208, 63, 0.3);
        }

        /* Desktop Positioning for Badge */
        @media (min-width: 769px) {
            .publication-badge {
                position: absolute;
                top: 15px;
                right: 15px;
                background-color: #F4D03F;
                color: #1F2937;
                padding: 3px 10px;
                border-radius: 15px;
                font-weight: 700;
                font-size: 0.75rem;
                text-transform: uppercase;
                letter-spacing: 0.5px;
                box-shadow: 0 2px 5px rgba(0,0,0,0.2);
                border: none;
                margin-bottom: 0;
            }
        }

        /* Mobile Style */
        @media (max-width: 768px) {
            .publication-item {
                flex-direction: column;
                align-items: center;
                text-align: center;
                padding: 15px;
            }
            .publication-thumbnail {
                width: 100%;
                margin-right: 0;
                margin-bottom: 12px;
                max-width: 250px; height: auto; aspect-ratio: 16/9; box-shadow: 0 4px 10px rgba(0,0,0,0.3);
            }
            .publication-details h3, .publication-details h4 {
                padding-right: 0;
                font-size: 1.05rem;
            }
            .publication-links {
                justify-content: center;
            }
            .publication-badge {
                position: relative;
                top: 0;
                right: 0;
                margin-bottom: 10px;
            }
        }

/* ---------- block 4 of 15 (was inline in index.html) ---------- */
        /* Teaching and Research Sections */
.section-container {
    padding: 30px 0;
    background-color: #2C3E50;
    color: #ECECEC;
}

.section-title {
    font-size: 2.5rem;
    color: #F4D03F;
    text-align: center;
    margin-bottom: 40px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
}

/* Teaching Grid */
.teaching-grid, .research-areas {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    justify-content: center;
}

.course-block, .research-area {
    background-color: #34495E;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 320px;
    transition: transform 0.3s ease;
}

.course-block:hover, .research-area:hover {
    transform: translateY(-5px);
}

.course-block h3, .research-area h3 {
    font-size: 1.8rem;
    color: #F4D03F;
    margin-bottom: 10px;
    font-family: 'Playfair Display', Georgia, serif;
}

/* List Styles */

/* ---------- block 5 of 15 (was inline in index.html) ---------- */
    /* General Section Styling */
.section-container, #publications, #people, #opportunities {
    padding: 30px 0;
    background: linear-gradient(135deg, #2C3E50, #34495E) !important; /* Strong gradient background */
    color: #ECECEC;
    border-radius: 10px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

/* Publications Section */
#publications .publication-list li {
    background-color: rgba(44, 62, 80, 0.9) !important; /* Dark background */
    color: #ECECEC !important;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#publications .publication-list li:hover {
    transform: scale(1.03);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.3);
}

#publications .publication-thumbnail {
    border: 3px solid #F4D03F;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* People Section Styling */
#people {
    padding: 30px 0;
    background-color: #34495E;
    color: #ECECEC;
    text-align: center;
}

.section-title {
    font-size: 3rem;
    color: #F4D03F;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase !important;
    font-weight: 700;
    margin-bottom: 40px;
    text-align: center;
}

.team-category h3 {
    font-size: 1.8rem;
    color: #F4D03F;
    margin-top: 40px;
    margin-bottom: 20px;
    font-family: 'Playfair Display', Georgia, serif;
}

.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.team-card {
    background-color: #2C3E50;
    border-radius: 10px;
    padding: 20px;
    width: 250px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: box-shadow 0.3s ease;
    text-align: center;
}

.team-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.team-card img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #F4D03F;
    margin-bottom: 15px;
}

.team-card h4 {
    font-size: 1.3rem;
    color: #F4D03F;
    margin-bottom: 10px;
}

.team-card p {
    font-size: 1rem;
    color: #ECECEC;
    line-height: 1.6;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.contact-info a {
    font-size: 1.4rem;
    color: #F4D03F;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #F4D03F;
}

@media (max-width: 768px) {
    .team-grid {
        flex-direction: column;
        align-items: center;
    }
}

/* Opportunities Grid Layout */

/* Responsive Design for Smaller Screens */
@media (max-width: 768px) {
    .opportunity-grid {
        flex-direction: column;
    }
}

/* People Section Styling */
#people {
    padding: 30px 0;
    background-color: #34495E;
    color: #ECECEC;
    text-align: center;
}

.team-category h3 {
    font-size: 1.8rem;
    color: #F4D03F;
    margin-top: 40px;
    margin-bottom: 20px;
    font-family: 'Playfair Display', Georgia, serif;
}

/* Team Grid and Card Layout */
.team-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.team-card {
    background-color: #2C3E50;
    border-radius: 15px;
    padding: 20px;
    width: 250px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    text-align: center;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.3);
}
.image-container {
    position: relative;
}
.image-container img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #F4D03F;
    transition: transform 0.3s;
}
.image-container:hover img {
    transform: scale(1.1);
}

.team-card h4 {
    font-size: 1.3rem;
    color: #F4D03F;
    margin: 15px 0 10px;
}

.team-card p {
    font-size: 1rem;
    color: #ECECEC;
    line-height: 1.4;
}

.contact-info {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px;
}

.contact-info a {
    font-size: 1.4rem;
    color: #F4D03F;
    transition: color 0.3s ease;
}

.contact-info a:hover {
    color: #F4D03F;
}

/* Description Section (Hidden by Default) */
.description {
    display: none;
    background-color: #1F2937;
    color: #ECECEC;
    font-size: 0.9rem;
    line-height: 1.4;
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
}

/* Teaching Section */
#teaching {
    padding: 30px 0;
    background: linear-gradient(135deg, #34495e, #2c3e50);
    color: #ececec;
}

.section-title {
    font-size: 2.5rem;
    color: #f39c12;
    text-align: center;
    margin-bottom: 40px;
    font-family: 'Playfair Display', serif;
    text-transform: uppercase;
}

.teaching-grid {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    gap: 30px;
}

.course-block {
    background-color: #2f3640;
    padding: 18px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    max-width: 360px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.course-block:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}

.course-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

.course-header img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.course-block h3 {
    font-size: 1.35rem;
    color: #f4d03f;
    margin-bottom: 6px;
}

.course-block p {
    font-size: 1rem;
    color: #dcdde1;
    line-height: 1.6;
    margin-bottom: 15px;
}

.details-list {
    list-style: none;
    padding: 0;
    font-size: 0.9rem;
}

.details-list li {
    padding: 6px 0 6px 26px;
    border-bottom: 1px solid rgba(244, 208, 63, 0.2);
    color: #e1e1e1;
    position: relative;
    text-align: left;
    line-height: 1.35;
}

.details-list li::before {
    content: '\f19d'; /* Graduation Cap Icon */
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 7px;
    color: #F4D03F;
    font-size: 0.9rem;
}

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

/* Responsive Styling */
@media (max-width: 768px) {
    .teaching-grid {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }
    .details-list li {
        padding-left: 20px;
    }
}

/* ---------- block 6 of 15 (was inline in index.html) ---------- */
/* General Styles */
.nav-link {
    color: #F1FAEE;
    text-decoration: none;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s, color 0.3s;
    white-space: nowrap;
}
.nav-link:hover {
    background-color: #A8DADC;
    color: #1D3557;
}

/* Desktop Navigation Styles */
.desktop-nav {
    display: flex;
    gap: 20px;
}

/* Hide Mobile Menu and Button on Larger Screens */
.menu-btn, .mobile-nav {
    display: none;
}

/* Hide logo full text on medium screens to save navbar space.
   Raised again for the tenth nav item (Venues): the full nav needs
   ~1300px alongside the wordmark, ~1140px without it. */
@media (max-width: 1320px) {
    .logo-text {
        display: none;
    }
}

/* Show Mobile Button and Hide Desktop Navigation on Smaller Screens.
   Raised from 768px for the same reason - below ~1150px the ten-item nav
   collides with the logo instead of fitting. */
@media (max-width: 1150px) {
    .desktop-nav {
        display: none;
    }
    .menu-btn {
        display: block;
        background-color: #A8DADC;
        color: #1D3557;
        padding: 10px 20px;
        border: none;
        border-radius: 5px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.3s;
    }
    .mobile-nav {
        display: none;
        background-color: #1D3557;
        padding: 10px;
        position: absolute;
        width: 100%;
        top: 65px; /* must match the fixed header height */
        left: 0;
        z-index: 999;
    }
    .mobile-nav ul {
        display: flex;
        flex-direction: column;
        gap: 15px;
    }

    /* Show Mobile Menu when Active */
    .mobile-nav.active {
        display: block;
    }
}

/* ---------- block 7 of 15 (was inline in index.html) ---------- */
/* Mobile Menu Button */
.menu-btn {
    display: none; /* Hidden on larger screens */
    background: linear-gradient(135deg, #A8DADC, #457B9D);
    color: #1D3557;
    padding: 12px 18px;
    border: none;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: background 0.4s ease, color 0.4s ease, box-shadow 0.3s ease, transform 0.3s ease;
    box-shadow: 0px 4px 14px rgba(0, 0, 0, 0.3);
    position: relative;
    overflow: hidden;
}

/* Hover Effect */
.menu-btn:hover {
    background: linear-gradient(135deg, #F1FAEE, #A8DADC);
    color: #1D3557;
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.4);
    transform: scale(1.07) translateY(-2px);
}

/* Advanced Shadow and Click State */
.menu-btn:active {
    transform: scale(0.98) translateY(1px);
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}

/* Pulsing Animation */
.menu-btn::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: rgba(255, 255, 255, 0.2);
    transform: translate(-50%, -50%) scale(0);
    border-radius: 50%;
    transition: transform 0.5s ease-out;
    z-index: 1;
}

.menu-btn:hover::before {
    transform: translate(-50%, -50%) scale(1);
}

/* Display on Mobile Screens.
   Must match the nav breakpoint above (raised to 1100px for the ninth nav
   item); this rule comes after `.menu-btn { display: none }`, so it is the
   one that actually decides whether the hamburger shows. */
@media (max-width: 1150px) {
    .menu-btn {
        display: block;
    }
}

/* ---------- block 8 of 15 (was inline in index.html) ---------- */
    /* Push body content below the fixed header with no gap */
    body { padding-top: 65px; }
    /* dvh avoids the mobile-Safari toolbar overflow; falls back to the vh rule above */
    @supports (height: 100dvh) {
    }
    /* Anchor targets must clear the fixed header + section indicator bar */
    section[id], footer[id], [id^="news-"] { scroll-margin-top: 110px; }
    /* Screen-reader-only utility */
    .visually-hidden {
        position: absolute !important; width: 1px; height: 1px;
        padding: 0; margin: -1px; overflow: hidden;
        clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
    }
    /* Visible keyboard focus everywhere (there was none before) */
    a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
        outline: 3px solid #F4D03F;
        outline-offset: 2px;
        border-radius: 4px;
    }
    /* Skip link */
    .skip-link {
        position: absolute; left: 8px; top: -60px; z-index: 2000;
        background: #F4D03F; color: #1F2937; padding: 10px 16px;
        border-radius: 0 0 8px 8px; font-weight: 700; text-decoration: none;
        transition: top 0.2s ease;
    }
    .skip-link:focus { top: 0; }

/* ---------- block 9 of 15 (was inline in index.html) ---------- */
    @media (max-width: 768px) {
        #lab-stats .stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    }

/* ---------- block 10 of 15 (was inline in index.html) ---------- */
    /* Responsive Styles for Full Width Hero */
    @media (max-width: 992px) {
        #hero-text-section h2, #hero h2 {
            font-size: 2.8rem !important;
        }
        #hero-text-section p, #hero p {
            font-size: 1.1rem !important;
        }
    }

    @media (max-width: 768px) {
        #hero {
            height: auto !important;
            min-height: 100vh;
            padding-top: 100px; /* Space for fixed header */
        }
        #hero-text-section h2, #hero h2 {
            font-size: 2.2rem !important;
        }
        #hero-text-section p, #hero p {
            font-size: 1.05rem !important;
        }
    }
    
    @media (max-width: 480px) {
        #hero-text-section h2, #hero h2 {
            font-size: 1.8rem !important;
        }
    }

/* ---------- block 11 of 15 (was inline in index.html) ---------- */
    .news-permalink {
        color: rgba(244, 208, 63, 0.35);
        text-decoration: none;
        font-weight: 700;
        margin-right: 6px;
        transition: color 0.2s ease;
    }
    .news-permalink:hover, .news-permalink:focus { color: #F4D03F; }
    .news-date-chip {
        display: inline-block; background: rgba(244, 208, 63, 0.15); color: #F4D03F;
        border: 1px solid rgba(244, 208, 63, 0.35); border-radius: 20px;
        font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
        padding: 2px 10px; margin-right: 8px; vertical-align: 2px; white-space: nowrap;
    }
    .news-new-badge {
        display: inline-block; background: #F4D03F; color: #1F2937; border-radius: 20px;
        font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px;
        padding: 2px 10px; margin-right: 8px; vertical-align: 2px;
    }

/* ---------- block 12 of 15 (was inline in index.html) ---------- */
    @media (max-width: 768px) {
        #awards .awards-grid { grid-template-columns: 1fr !important; }
    }

/* ---------- block 13 of 15 (was inline in index.html) ---------- */
.events-timeline {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
}

@media (min-width: 769px) {
    .events-timeline {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, auto);
        grid-auto-flow: column;
    }
}

.event-card {
    display: flex;
    align-items: center;
    background: rgba(31, 41, 55, 0.7);
    border-radius: 12px;
    padding: 12px 18px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-left: 5px solid #F4D03F;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.event-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0,0,0,0.4);
    background: rgba(31, 41, 55, 0.9);
}
.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #F4D03F;
    color: #1F2937;
    min-width: 65px;
    height: 65px;
    border-radius: 8px;
    margin-right: 15px;
    font-weight: bold;
    flex-shrink: 0;
}
.event-date .month {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.event-date .day {
    font-size: 1.6rem;
    line-height: 1;
}
.event-details h3, .event-details h4 {
    color: #F4D03F;
    font-size: 1.25rem;
    margin-bottom: 2px;
    font-family: 'Playfair Display', serif;
}
.event-details p {
    margin: 4px 0 0;
    font-size: 0.9rem;
    line-height: 1.5;
    color: #AAB7B8;
}

@media (max-width: 768px) {
    .event-card {
        flex-direction: column;
        text-align: center;
        padding: 25px 15px;
    }
    .event-date {
        margin-right: 0;
        margin-bottom: 15px;
    }
}

/* ---------- block 14 of 15 (was inline in index.html) ---------- */
.pub-filter-btn {
    padding: 8px 18px; border: 2px solid #F4D03F; border-radius: 25px;
    background: transparent; color: #F4D03F; font-size: 0.9rem; font-weight: 600;
    cursor: pointer; transition: all 0.3s ease;
}
.pub-filter-btn:hover, .pub-filter-btn.active {
    background: #F4D03F; color: #1F2937;
}
.publication-item { transition: opacity 0.3s ease, transform 0.3s ease; }
.publication-item.hidden { display: none; }
#backToTop:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }

/* Collapsible Abstract Styles */
.btn-abstract {
    background: rgba(168, 218, 220, 0.1); color: #A8DADC; border: 1px solid #A8DADC;
}
.btn-abstract:hover { background: #A8DADC; color: #1F2937; }
.pub-abstract {
    max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease;
    background: rgba(29, 53, 87, 0.5); border-radius: 6px; margin-top: 8px;
    font-size: 0.85rem; line-height: 1.5; color: #ccc; padding: 0 12px;
}
.pub-abstract.expanded {
    max-height: 300px; padding: 10px 12px; overflow-y: auto;
}

/* Section Indicator responsive */
@media (max-width: 768px) {
    #section-indicator { top: 65px; }
}

/* Comprehensive Mobile Fixes */
@media (max-width: 768px) {
    /* Header padding - less on mobile */
    header > div { padding: 0 15px !important; }

    /* Team cards */
    .team-card { width: 100% !important; max-width: 300px !important; }
    .team-category h3 { font-size: 1.5rem !important; margin-bottom: 15px !important; margin-top: 25px !important; }

    /* Section titles smaller on mobile */
    .section-title { font-size: 2rem !important; margin-bottom: 20px !important; }

    /* Teaching grid tighter */
    .teaching-grid { gap: 15px !important; }
    .course-block { max-width: 100% !important; width: 100% !important; }

    /* Opportunity grid tighter */
    .opportunity-grid { gap: 15px !important; }

    /* Publication filter buttons tighter */
    .pub-filter-btn { padding: 6px 12px; font-size: 0.8rem; }

    /* Back to top button smaller */
    #backToTop { width: 42px !important; height: 42px !important; bottom: 20px !important; right: 20px !important; font-size: 1.1rem !important; }

    /* Footer tighter */
    footer .container { padding: 0 15px !important; }
    footer div[style*="font-size: 1.1rem"] { font-size: 0.95rem !important; }
}

/* Small phones */
@media (max-width: 400px) {
    header > div { padding: 0 10px !important; }
    .section-title { font-size: 1.7rem !important; }
    .pub-filter-btn { padding: 5px 10px; font-size: 0.75rem; }
    .publication-item { padding: 10px !important; }
    .publication-details h3, .publication-details h3, .publication-details h4 { font-size: 0.95rem !important; }
    .publication-authors { font-size: 0.8rem !important; }
    .publication-venue { font-size: 0.75rem !important; }
}

/* ---------- block 15 of 15 (was inline in index.html) ---------- */
    .reveal-init {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 0.5s ease, transform 0.5s ease;
        will-change: opacity, transform;
    }
    .reveal-visible {
        opacity: 1;
        transform: none;
    }

/* ============================================================================
   PHASE 2 POLISH LAYER (2026-10-12)

   The rules above accumulated over time: the same component is declared up to
   six times with conflicting values, so editing an earlier one often does
   nothing. Rather than rewrite all of it at once, this layer sets the small
   number of properties that carry the visual identity, expressed in tokens.
   Anything here should eventually migrate up into the component rules.
   ========================================================================= */

/* --- Page base. The body was white with Bootstrap's font stack, which showed
       through on overscroll and during the brief moment before sections paint. */
body {
    background-color: var(--color-bg);
    color: var(--color-text);
    font-family: var(--font-body);
    line-height: var(--leading-body);
    -webkit-font-smoothing: antialiased;
}

/* --- Section headings: 3rem uppercase everywhere flattened the hierarchy and
       wrapped awkwardly on phones. Sentence case at a fluid size, with a short
       gold rule to mark the start of a section. */
h1.section-title,
h2.section-title {
    font-size: var(--text-display);
    text-transform: none !important;
    letter-spacing: -0.01em;
    margin-bottom: var(--space-4);
}
h1.section-title::after,
h2.section-title::after {
    content: "";
    display: block;
    width: 64px;
    height: 3px;
    margin: var(--space-3) auto 0;
    background: var(--color-accent);
    border-radius: var(--radius-pill);
}

/* --- Cards: dark cards on a dark background had almost no edge. A hairline
       border separates them from the section without lightening the palette. */
.publication-item,
.team-card,
.award-card,
.event-card,
.stat-tile,
.course-block {
    border: 1px solid var(--color-border);
}

/* --- Consistent, calmer hover. Several components animated `all`, which also
       animates layout properties. */
.publication-item,
.team-card,
.award-card,
.event-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.publication-item:hover,
.team-card:hover,
.award-card:hover,
.event-card:hover {
    border-color: rgba(244, 208, 63, 0.35);
    box-shadow: var(--shadow-lg);
}

/* --- Body copy was 1.15-1.25rem with a 1.8 line height, which reads as large
       and loose on desktop and overflows on small phones. */
#hero-text-section p,
.publication-authors,
.publication-venue {
    font-size: var(--text-base);
}

/* --- Mobile menu overlay: page text used to show through underneath it. */
body.menu-open { overflow: hidden; }
@media (max-width: 768px) {
    .mobile-nav.active {
        min-height: calc(100vh - var(--header-h));
        background-color: var(--color-bg);
        overflow-y: auto;
        padding-bottom: var(--space-5);
    }
}

/* --- Respect reduced motion everywhere, including smooth scrolling
       and the smooth scrolling, which were previously unguarded. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .reveal-init { opacity: 1 !important; transform: none !important; }
}

/* The Abstract control is a real <button> (it toggles content, it does not
   navigate). Match it to the sibling link-buttons. */
button.btn-pub {
    font: inherit;
    cursor: pointer;
    background: none;
}

/* ===== Publication controls: theme + year filters, search ================= */
.pub-profile-links {
    text-align: center;
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    margin: calc(-1 * var(--space-3)) 0 var(--space-4);
}
.pub-profile-links a { color: var(--color-accent); }

.pub-controls {
    max-width: 1000px;
    margin: 0 auto var(--space-4);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
.pub-filter-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
}
.pub-filter-label {
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--color-text-muted);
    margin-right: var(--space-1);
}
.pub-theme-btn {
    background: transparent;
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 6px 14px;
    font: inherit;
    font-size: var(--text-xs);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.pub-theme-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pub-theme-btn.active {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-accent-contrast);
    font-weight: 700;
}

.pub-search-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3);
    flex-wrap: wrap;
}
.pub-search {
    flex: 1 1 320px;
    max-width: 420px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    padding: 10px 18px;
    color: var(--color-text);
    font: inherit;
    font-size: var(--text-sm);
}
.pub-search::placeholder { color: var(--color-text-muted); }
.pub-search:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}
.pub-count {
    font-size: var(--text-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}
.pub-empty {
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: var(--space-4);
}
.pub-reset {
    background: none;
    border: none;
    color: var(--color-accent);
    text-decoration: underline;
    cursor: pointer;
    font: inherit;
}

/* ===== Research themes =================================================== */
.research-section { background: linear-gradient(135deg, #1D3557, #2C3E50); color: var(--color-text); }
.section-lede {
    max-width: 64ch;
    margin: calc(-1 * var(--space-2)) auto var(--space-4);
    text-align: center;
    font-size: var(--text-base);
    color: var(--color-text);
    opacity: 0.92;
}
.research-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--space-3);
    max-width: var(--container-max);
    margin: 0 auto;
}
.research-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.research-card:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 208, 63, 0.35);
    box-shadow: var(--shadow-lg);
}
.research-card__media { aspect-ratio: 16 / 9; background: #0d1117; overflow: hidden; }
.research-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.research-card__body {
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    flex: 1;
}
.research-card__body h3 {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-accent);
    margin: 0;
    line-height: 1.25;
}
.research-card__body p {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text);
    opacity: 0.88;
    flex: 1;
}
.research-card__link {
    align-self: flex-start;
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--color-accent);
    cursor: pointer;
}
.research-card__link:hover { text-decoration: underline; }

/* ===== Hero ============================================================== */
.hero {
    position: relative;
    isolation: isolate;
    min-height: min(78vh, 760px);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--color-bg);
}
@supports (min-height: 78dvh) {
    .hero { min-height: min(78dvh, 760px); }
}
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.hero__bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 45%;
    display: block;
}
/* Legibility over an arbitrary photograph: a strong directional scrim rather
   than relying on text-shadow, which failed on light areas of the image. */
.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(to right, rgba(16, 29, 48, 0.94) 0%, rgba(16, 29, 48, 0.82) 42%, rgba(16, 29, 48, 0.22) 100%),
        linear-gradient(to top, rgba(16, 29, 48, 0.90) 0%, rgba(16, 29, 48, 0.15) 55%);
}
.hero__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    padding: var(--space-5) var(--space-3);
    width: 100%;
}
.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-accent-soft);
    border: 1px solid rgba(244, 208, 63, 0.45);
    color: var(--color-accent);
    border-radius: var(--radius-pill);
    padding: 6px 16px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin: 0 0 var(--space-3);
}
.hero__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.2rem + 3.4vw, 3.4rem);
    line-height: 1.12;
    color: #fff;
    max-width: 19ch;
    margin: 0 0 var(--space-3);
    font-weight: 700;
    letter-spacing: -0.015em;
}
.hero__sub {
    font-size: var(--text-base);
    line-height: 1.6;
    color: #DCE3EA;
    max-width: 56ch;
    margin: 0 0 var(--space-4);
}
.hero__cta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin: 0;
}

/* ===== One button system ================================================= */
.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    border-radius: var(--radius-pill);
    padding: 12px 24px;
    font-weight: 700;
    font-size: var(--text-sm);
    text-decoration: none;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.2s ease, background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn--primary:hover { background: #ffdf5c; color: var(--color-accent-contrast); }
.btn--secondary { border-color: var(--color-accent); color: var(--color-accent); }
.btn--secondary:hover { background: var(--color-accent); color: var(--color-accent-contrast); }
.btn--ghost { color: #DCE3EA; padding-left: var(--space-1); padding-right: var(--space-1); }
.btn--ghost:hover { color: var(--color-accent); }

@media (max-width: 768px) {
    .hero { min-height: auto; }
    .hero__inner { padding: var(--space-5) var(--space-3) var(--space-4); }
    .hero__title { max-width: none; }
    .hero__cta .btn { flex: 1 1 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .btn:hover { transform: none; }
}

/* ===== Selected work strip =============================================== */
.pub-featured-wrap { max-width: var(--container-max); margin: 0 auto var(--space-5); }
.pub-featured-heading {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--color-text);
    text-align: center;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    opacity: 0.75;
    margin: 0 0 var(--space-3);
}
.pub-featured {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
    gap: var(--space-3);
}
.pub-feature {
    display: flex;
    flex-direction: column;
    background: var(--color-surface-raised);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.pub-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(244, 208, 63, 0.35);
    box-shadow: var(--shadow-lg);
}
.pub-feature__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: #0d1117;
    overflow: hidden;
}
.pub-feature__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pub-feature__pill,
.pub-feature__award {
    position: absolute;
    top: 10px;
    border-radius: var(--radius-pill);
    padding: 3px 11px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.03em;
}
.pub-feature__pill { left: 10px; background: var(--color-accent); color: var(--color-accent-contrast); }
.pub-feature__award { right: 10px; background: rgba(16, 29, 48, 0.9); color: var(--color-accent); border: 1px solid var(--color-accent); }
.pub-feature__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); flex: 1; }
.pub-feature__title { margin: 0; font-family: var(--font-display); font-size: var(--text-base); line-height: 1.3; }
.pub-feature__title a { color: var(--color-accent); text-decoration: none; }
.pub-feature__title a:hover { text-decoration: underline; }
.pub-feature__teaser { margin: 0; font-size: var(--text-sm); color: var(--color-text); opacity: 0.85; flex: 1; }
.pub-feature__links { margin: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.pub-feature__links a { font-size: var(--text-xs); font-weight: 700; color: var(--color-text-muted); text-decoration: none; }
.pub-feature__links a:hover { color: var(--color-accent); text-decoration: underline; }

/* ===== About ============================================================= */
.about-section { background: linear-gradient(135deg, #1D3557, #2C3E50); color: var(--color-text); }
.about-container { max-width: 74ch; margin: 0 auto; text-align: left; }
.about-container .section-title { text-align: center; }
.about-lead {
    font-size: var(--text-lg);
    line-height: 1.55;
    color: #fff;
    margin: 0 0 var(--space-3);
}
.about-body {
    font-size: var(--text-base);
    line-height: var(--leading-body);
    margin: 0 0 var(--space-3);
    opacity: 0.92;
}
.about-director {
    margin-top: var(--space-4);
    padding: var(--space-3);
    background: rgba(31, 41, 55, 0.5);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
}
.about-director h3 {
    margin: 0 0 var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-sm);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-accent);
}
.about-director p { margin: 0; font-size: var(--text-sm); line-height: 1.6; opacity: 0.92; }

/* ===== Phase 4: Join Us ================================================== */
.join-section { background: linear-gradient(135deg, #2C3E50, #34495E); color: var(--color-text); }
.join-invite {
    max-width: var(--container-max);
    margin: 0 auto var(--space-4);
    padding: var(--space-3) var(--space-4);
    background: linear-gradient(135deg, rgba(244,208,63,0.16), rgba(244,208,63,0.04));
    border: 1px solid rgba(244,208,63,0.45);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}
.join-badge {
    display: inline-flex; align-items: center; gap: var(--space-2);
    background: var(--color-accent); color: var(--color-accent-contrast);
    border-radius: var(--radius-pill); padding: 4px 12px;
    font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase;
    margin-bottom: var(--space-2);
}
.join-invite h3 {
    font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent);
    margin: 0 0 var(--space-2); line-height: 1.2;
}
.join-invite p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); color: #FDFDFD; }
.join-invite a { color: var(--color-accent); }

.join-grid {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-3); max-width: var(--container-max); margin: 0 auto var(--space-4);
}
.join-card {
    background: var(--color-surface-raised); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3);
    display: flex; flex-direction: column; gap: var(--space-2);
}
.join-card h3 {
    font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent);
    margin: 0; display: flex; align-items: center; gap: var(--space-2);
}
.join-card h3 i { font-size: 0.85em; opacity: 0.85; }
.join-card > p { margin: 0; font-size: var(--text-sm); opacity: 0.9; }
.join-card h4 {
    margin: var(--space-2) 0 0; font-size: var(--text-xs); letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--color-text-muted); font-weight: 700;
}
.join-card ul { margin: 0; padding-left: 1.1em; font-size: var(--text-sm); line-height: 1.55; }
.join-card li { margin-bottom: 4px; }

.join-apply {
    max-width: var(--container-max); margin: 0 auto;
    padding: var(--space-3) var(--space-4);
    background: rgba(31,41,55,0.5); border-left: 4px solid var(--color-accent);
    border-radius: var(--radius-sm);
}
.join-apply h3 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent); margin: 0 0 var(--space-2); }
.join-apply p { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.join-apply a { color: var(--color-accent); }
.join-apply__list { margin: 0 0 var(--space-3); padding-left: 1.1em; font-size: var(--text-sm); line-height: 1.6; }
.join-apply__note { font-size: var(--text-sm); color: var(--color-text-muted); margin: 0; }

/* ===== Phase 4: News highlights ========================================== */
.highlights {
    list-style: none; margin: 0 auto var(--space-4); padding: 0;
    display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3);
    max-width: var(--container-max);
}
.highlight a {
    display: block; height: 100%; text-decoration: none; color: inherit;
    background: var(--color-surface-raised); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.highlight a:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(244,208,63,0.35); }
.highlight img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.highlight__body { display: block; padding: var(--space-2) var(--space-3) var(--space-3); }
.highlight__body .news-date-chip { margin: 0 0 var(--space-2); display: inline-block; }
.highlight__title { display: block; font-size: var(--text-sm); font-weight: 600; line-height: 1.4; color: var(--color-text); }
@media (max-width: 900px) {
    .highlights {
        display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
        gap: var(--space-2); padding: 0 var(--space-3) var(--space-2); margin-left: calc(-1 * var(--space-3)); margin-right: calc(-1 * var(--space-3));
        -webkit-overflow-scrolling: touch; scrollbar-width: thin;
    }
    .highlight { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ===== Phase 4: Hero eyebrow on phones =================================== */
.hero__eyebrow-short { display: none; }
@media (max-width: 600px) {
    .hero__eyebrow-long { display: none; }
    .hero__eyebrow-short { display: inline; }
}

/* ===== Phase 4: Footer =================================================== */
.site-footer { background: #152a46; color: var(--color-text); padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border); text-align: left; }
.footer-grid {
    max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3) var(--space-4);
    display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-4);
}
.footer-lab { font-family: var(--font-display); font-size: var(--text-xl); color: var(--color-accent); margin: 0 0 var(--space-2); }
.footer-sub { margin: 0; font-size: var(--text-sm); color: var(--color-text-muted); line-height: 1.6; }
.footer-heading { font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-text-muted); margin: 0 0 var(--space-2); font-weight: 700; }
.footer-address { font-style: normal; font-size: var(--text-sm); line-height: 1.7; margin: 0; }
.footer-contact { font-size: var(--text-sm); line-height: 1.7; margin: 0 0 var(--space-3); }
.site-footer a { color: var(--color-accent); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.footer-social { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-2); }
.footer-social a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 50%;
    background: var(--color-accent); color: var(--color-accent-contrast);
    transition: transform 0.2s ease;
}
.footer-social a:hover { transform: translateY(-2px); text-decoration: none; }
.footer-bottom { border-top: 1px solid var(--color-border); padding: var(--space-3); text-align: center; }
.footer-bottom p { margin: 0; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ===== Phase 4: Sub-pages (tools.html) =================================== */
.subpage-section { background: linear-gradient(135deg, #1D3557, #2C3E50); min-height: 60vh; }
.subpage-container { max-width: var(--container-narrow); margin: 0 auto; }
.subpage h1.section-title { font-size: var(--text-display); color: var(--color-accent); font-family: var(--font-display); text-align: center; margin-bottom: var(--space-3); }
.subpage h1.section-title::after { content: ""; display: block; width: 64px; height: 3px; margin: var(--space-3) auto 0; background: var(--color-accent); border-radius: var(--radius-pill); }
.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-3); margin-top: var(--space-4); }
.tool-card {
    background: var(--color-surface-raised); border: 1px solid var(--color-border); border-radius: var(--radius-md);
    padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3);
}
.tool-card h2 { font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent); margin: 0; display: flex; gap: var(--space-2); align-items: center; }
.tool-card p { margin: 0; font-size: var(--text-base); line-height: var(--leading-body); flex: 1; }
.tool-card .btn { align-self: flex-start; }

/* ===== Phase 4: Teaching ================================================= */
.teaching-list { max-width: var(--container-narrow); margin: 0 auto; text-align: left; display: grid; gap: var(--space-3); }
.teaching-group {
    background: var(--color-surface-raised); border: 1px solid var(--color-border);
    border-radius: var(--radius-md); padding: var(--space-3) var(--space-4);
}
.teaching-group__name {
    display: flex; align-items: center; gap: var(--space-2);
    font-family: var(--font-display); font-size: var(--text-lg); color: var(--color-accent);
    margin: 0 0 var(--space-2);
}
.teaching-group__name img { width: 32px; height: 32px; object-fit: contain; border-radius: 6px; background: #fff; padding: 2px; }
.teaching-current {
    margin-left: auto; font-family: var(--font-body); font-size: var(--text-xs); font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-contrast);
    background: var(--color-accent); border-radius: var(--radius-pill); padding: 3px 10px;
}
.teaching-group .details-list { margin: 0; }
.teaching-group .details-list li { font-size: var(--text-sm); }

/* ===== Phase 4: People =================================================== */
.role-pill {
    display: inline-block; border-radius: var(--radius-pill); padding: 2px 12px;
    font-size: 0.72rem; font-weight: 600; letter-spacing: 0.4px; margin-bottom: 8px; color: #fff;
}
.role-pill--ug { background: #2563EB; }
.role-pill--director { background: var(--color-accent); color: var(--color-accent-contrast); font-weight: 700; }
/* Uniform cells, centred, no holes when a row is short. Overrides the inline
   flex layout on .team-grid until those inline styles are hoisted (D1). */
.team-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, 250px);
    justify-content: center;
    gap: var(--space-3) !important;
}
.contact-info a { font-size: 1.4rem; color: var(--color-accent); transition: transform 0.2s ease; }
.contact-info a:hover { transform: translateY(-2px); color: #ffdf5c; }

/* ============================================================================
   HOISTED FROM INLINE STYLES (Phase 4, 2026-10-13)
   Each rule is the exact declaration list that used to sit in a style="..."
   attribute on the elements named in its comment. Moved here so the markup
   is editable and the cascade is visible. The main/header/footer-prefixed
   selectors keep these at or above the specificity of older element rules;
   the block is kept last in the file so it wins ties by order. The doubled
   class (.x.x) lifts specificity to beat the older two-class element rules
   (e.g. .publication-item .publication-thumbnail) that inline styles used to override.
   ========================================================================= */
/* was inline on <header> */
.page-x1.page-x1, main .page-x1.page-x1, header .page-x1.page-x1, footer .page-x1.page-x1 { background-color: #1D3557; color: #F1FAEE; padding: 0; height: 65px; display: flex; align-items: center; position: fixed; width: 100%; top: 0; z-index: 1000; box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3); }
/* was inline on <div> */
.header-x1.header-x1, main .header-x1.header-x1, header .header-x1.header-x1, footer .header-x1.header-x1 { display: flex; justify-content: space-between; align-items: center; width: 100%; padding: 0 40px; }
/* was inline on <a> */
.header-x2.header-x2, main .header-x2.header-x2, header .header-x2.header-x2, footer .header-x2.header-x2 { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
/* was inline on <span> */
.header-x3.header-x3, main .header-x3.header-x3, header .header-x3.header-x3, footer .header-x3.header-x3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: #A8DADC; line-height: 1.3; white-space: nowrap; font-weight: 600; }
/* was inline on <ul> */
.header-x4.header-x4, main .header-x4.header-x4, header .header-x4.header-x4, footer .header-x4.header-x4 { list-style: none; display: flex; gap: 20px; margin: 0; padding: 0; }
/* was inline on <div> */
.page-x2.page-x2, main .page-x2.page-x2, header .page-x2.page-x2, footer .page-x2.page-x2 { position: fixed; top: 65px; left: 0; width: 100%; z-index: 999; background: rgba(29, 53, 87, 0.95); backdrop-filter: blur(5px); padding: 6px 20px; display: none; border-bottom: 2px solid #F4D03F; transition: opacity 0.3s ease; }
/* was inline on <span> */
.page-x3.page-x3, main .page-x3.page-x3, header .page-x3.page-x3, footer .page-x3.page-x3 { color: #F4D03F; font-size: 0.85rem; font-weight: 600; font-family: 'Playfair Display', serif; text-transform: uppercase; letter-spacing: 1px; }
/* was inline on <section> */
#lab-stats.lab-stats-section, .lab-stats-section.lab-stats-section { background: linear-gradient(135deg, #2C3E50, #34495E); padding: 36px 0; color: #ECECEC; }
/* was inline on <div> */
.container--narrow.container--narrow, main .container--narrow.container--narrow, header .container--narrow.container--narrow, footer .container--narrow.container--narrow { max-width: 1000px; margin: auto; }
/* was inline on <div> */
.stats-x1.stats-x1, main .stats-x1.stats-x1, header .stats-x1.stats-x1, footer .stats-x1.stats-x1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: center; }
/* was inline on <div> */
.stat-tile.stat-tile, main .stat-tile.stat-tile, header .stat-tile.stat-tile, footer .stat-tile.stat-tile { background: rgba(31, 41, 55, 0.55); border-radius: 12px; padding: 22px 12px; border-top: 3px solid #F4D03F; box-shadow: 0 4px 12px rgba(0,0,0,0.25); }
/* was inline on <i> */
.stat-icon.stat-icon, main .stat-icon.stat-icon, header .stat-icon.stat-icon, footer .stat-icon.stat-icon { font-size: 1.4rem; color: #F4D03F; margin-bottom: 10px; }
/* was inline on <div> */
.stat-number.stat-number, main .stat-number.stat-number, header .stat-number.stat-number, footer .stat-number.stat-number { font-size: 2.4rem; font-weight: 700; color: #F4D03F; font-family: 'Playfair Display', serif; line-height: 1.1; }
/* was inline on <div> */
.stat-label.stat-label, main .stat-label.stat-label, header .stat-label.stat-label, footer .stat-label.stat-label { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; color: #ECECEC; margin-top: 6px; }
/* was inline on <h2> */
.publications-x3.publications-x3, main .publications-x3.publications-x3, header .publications-x3.publications-x3, footer .publications-x3.publications-x3 { font-size: 3rem; color: #F4D03F; margin-bottom: 30px; font-family: 'Playfair Display', serif; }
/* was inline on <img> */
.publications-x1.publications-x1, main .publications-x1.publications-x1, header .publications-x1.publications-x1, footer .publications-x1.publications-x1 { object-fit: contain; background: #fff; }
/* was inline on <i> */
.publications-x2.publications-x2, main .publications-x2.publications-x2, header .publications-x2.publications-x2, footer .publications-x2.publications-x2 { margin-right:5px; }
/* was inline on <section> */
#recent-news.recent-news-section, .recent-news-section.recent-news-section { background: linear-gradient(135deg, #34495E, #2C3E50); padding: 40px 0; color: #ECECEC; }
/* was inline on <h2> */
.news-x1.news-x1, main .news-x1.news-x1, header .news-x1.news-x1, footer .news-x1.news-x1 { margin-bottom: 30px; }
/* was inline on <li> */
.news-item.news-item, main .news-item.news-item, header .news-item.news-item, footer .news-item.news-item { margin-bottom: 15px; position: relative; padding-left: 20px; }
/* was inline on <i> */
.news-icon.news-icon, main .news-icon.news-icon, header .news-icon.news-icon, footer .news-icon.news-icon { position: absolute; left: 0; top: 5px; color: #F4D03F; }
/* was inline on <span> */
.news-text.news-text, main .news-text.news-text, header .news-text.news-text, footer .news-text.news-text { font-size: 1.15rem; line-height: 1.6; color: #ECECEC; }
/* was inline on <a> */
.news-x2.news-x2, main .news-x2.news-x2, header .news-x2.news-x2, footer .news-x2.news-x2 { color: #F4D03F; text-decoration: none; }
/* was inline on <section> */
#awards.awards-section, .awards-section.awards-section,
#important-dates.important-dates-section, .important-dates-section.important-dates-section { background: linear-gradient(135deg, #1D3557, #2C3E50); padding: 40px 0; color: #ECECEC; }
/* was inline on <div> */
.awards-x3.awards-x3, main .awards-x3.awards-x3, header .awards-x3.awards-x3, footer .awards-x3.awards-x3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
/* was inline on <div> */
.award-card.award-card, main .award-card.award-card, header .award-card.award-card, footer .award-card.award-card { background: rgba(31, 41, 55, 0.55); border-radius: 12px; padding: 24px 20px; border-top: 3px solid #F4D03F; box-shadow: 0 4px 12px rgba(0,0,0,0.25); text-align: center; }
/* was inline on <i> */
.award-icon.award-icon, main .award-icon.award-icon, header .award-icon.award-icon, footer .award-icon.award-icon { font-size: 2rem; color: #F4D03F; margin-bottom: 12px; }
/* was inline on <div> */
.awards-x2.awards-x2, main .awards-x2.awards-x2, header .awards-x2.awards-x2, footer .awards-x2.awards-x2 { display: inline-block; background: rgba(244, 208, 63, 0.15); color: #F4D03F; border: 1px solid rgba(244, 208, 63, 0.35); border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; padding: 2px 12px; margin: 0 auto 10px; display: block; width: fit-content; }
/* was inline on <h3> */
.award-title.award-title, main .award-title.award-title, header .award-title.award-title, footer .award-title.award-title { font-size: 1.1rem; color: #FDFDFD; font-weight: 700; margin-bottom: 8px; line-height: 1.4; }
/* was inline on <p> */
.awards-x1.awards-x1, main .awards-x1.awards-x1, header .awards-x1.awards-x1, footer .awards-x1.awards-x1 { font-size: 0.95rem; color: #C9D2DB; line-height: 1.55; margin: 0; }
/* was inline on <strong> */
.text-accent.text-accent, main .text-accent.text-accent, header .text-accent.text-accent, footer .text-accent.text-accent { color: #F4D03F; }
/* was inline on <div> */
.awards-x4.awards-x4, main .awards-x4.awards-x4, header .awards-x4.awards-x4, footer .awards-x4.awards-x4 { background: rgba(244, 208, 63, 0.15); color: #F4D03F; border: 1px solid rgba(244, 208, 63, 0.35); border-radius: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 1px; padding: 2px 12px; margin: 0 auto 10px; display: block; width: fit-content; }
/* was inline on <a> */
.link-accent.link-accent, main .link-accent.link-accent, header .link-accent.link-accent, footer .link-accent.link-accent { color: #F4D03F; text-decoration: none; transition: color 0.3s; }
/* was inline on <section> */
.dates-x1.dates-x1, main .dates-x1.dates-x1, header .dates-x1.dates-x1, footer .dates-x1.dates-x1 { padding: 30px 0; background: linear-gradient(135deg, #1D3557, #2C3E50); color: #ECECEC; }
/* was inline on <div> */
.people-x7.people-x7, main .people-x7.people-x7, header .people-x7.people-x7, footer .people-x7.people-x7 { max-width: 1200px; margin: auto; text-align: center; }
/* was inline on <h3> */
.people-x2.people-x2, main .people-x2.people-x2, header .people-x2.people-x2, footer .people-x2.people-x2 { font-size: 2.2rem; color: #F4D03F; margin-bottom: 30px; font-family: 'Playfair Display', serif; text-transform: uppercase; font-weight: 700; }
/* was inline on <div> */
.people-x3.people-x3, main .people-x3.people-x3, header .people-x3.people-x3, footer .people-x3.people-x3 { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
/* was inline on <div> */
.people-x1.people-x1, main .people-x1.people-x1, header .people-x1.people-x1, footer .people-x1.people-x1 { background-color: #1F2937; padding: 20px; border-radius: 10px; box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.3); text-align: center; max-width: 100%; height: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.3); }
/* was inline on <div> */
.team-avatar.team-avatar, main .team-avatar.team-avatar, header .team-avatar.team-avatar, footer .team-avatar.team-avatar { overflow: hidden; border-radius: 50%; width: 120px; height: 120px; margin: auto; margin-bottom: 15px; }
/* was inline on <img> */
.team-avatar__img.team-avatar__img, main .team-avatar__img.team-avatar__img, header .team-avatar__img.team-avatar__img, footer .team-avatar__img.team-avatar__img { width: 100%; height: 100%; object-fit: cover; }
/* was inline on <h4> */
.team-name.team-name, main .team-name.team-name, header .team-name.team-name, footer .team-name.team-name { font-size: 1.5rem; color: #F4D03F; }
/* was inline on <div> */
.contact-info.contact-info, main .contact-info.contact-info, header .contact-info.contact-info, footer .contact-info.contact-info { display: flex; justify-content: center; gap: 15px; margin-top: 10px; }
/* was inline on <a> */
.people-x6.people-x6, main .people-x6.people-x6, header .people-x6.people-x6, footer .people-x6.people-x6 { font-size: 1.4rem; color: #F4D03F; }
/* was inline on <span> */
.pill-grad.pill-grad, main .pill-grad.pill-grad, header .pill-grad.pill-grad, footer .pill-grad.pill-grad { display: inline-block; background: #059669; color: #fff; border-radius: 20px; padding: 2px 12px; font-size: 0.72rem; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.4px; }
/* was inline on <p> */
.team-dates.team-dates, main .team-dates.team-dates, header .team-dates.team-dates, footer .team-dates.team-dates { font-size: 0.9rem; color: #BBB; margin-bottom: 5px; }
/* was inline on <div> */
.people-x8.people-x8, main .people-x8.people-x8, header .people-x8.people-x8, footer .people-x8.people-x8 { width: 100%; height: 100%; background-color: #374151; display: flex; align-items: center; justify-content: center; color: #F4D03F; font-size: 2.5rem; font-weight: bold; }
/* was inline on <div> */
.team-card.team-card, main .team-card.team-card, header .team-card.team-card, footer .team-card.team-card { background-color: #1F2937; padding: 20px; border-radius: 10px; box-shadow: 0 4px 10px rgba(0,0,0,0.3); text-align: center; max-width: 100%; height: auto; }
/* was inline on <img> */
.people-x9.people-x9, main .people-x9.people-x9, header .people-x9.people-x9, footer .people-x9.people-x9 { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
/* was inline on <p> */
.people-x4.people-x4, main .people-x4.people-x4, header .people-x4.people-x4, footer .people-x4.people-x4 { font-size: 0.8rem; color: #F4D03F; margin-bottom: 6px; }
/* was inline on <i> */
.people-x5.people-x5, main .people-x5.people-x5, header .people-x5.people-x5, footer .people-x5.people-x5 { margin-right: 4px; }
/* was inline on <span> */
.pill-ug.pill-ug, main .pill-ug.pill-ug, header .pill-ug.pill-ug, footer .pill-ug.pill-ug { display: inline-block; background: #2563EB; color: #fff; border-radius: 20px; padding: 2px 12px; font-size: 0.72rem; font-weight: 600; margin-bottom: 8px; letter-spacing: 0.4px; }
/* was inline on <section> */
#teaching.teaching-section, .teaching-section.teaching-section { background: linear-gradient(135deg, #2C3E50, #34495E); padding: 24px 0; color: #ECECEC; }
/* was inline on <button> */
.footer-x1.footer-x1, main .footer-x1.footer-x1, header .footer-x1.footer-x1, footer .footer-x1.footer-x1 { display: none; position: fixed; bottom: 30px; right: 30px; z-index: 999; width: 50px; height: 50px; border-radius: 50%; border: none; cursor: pointer; background: #F4D03F; color: #1D3557; font-size: 1.4rem; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: all 0.3s ease; }

/* ===== Latest from the lab (under the hero) ==============================
   Newest item as a large featured card, the next three stacked beside it.
   Below 900px everything collapses to a single column, featured first.
   ========================================================================= */
.latest {
    background: linear-gradient(180deg, #152a46 0%, #16304f 100%);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
}
.latest__inner { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-3); width: 100%; }

.latest__head {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3);
}
.latest__heading {
    font-family: var(--font-display); font-size: var(--text-xl); line-height: 1.15;
    color: var(--color-accent); margin: 0; text-transform: none; letter-spacing: 0;
}
.latest__all {
    font-size: var(--text-sm); font-weight: 700; color: var(--color-accent);
    text-decoration: none; white-space: nowrap;
    border-bottom: 1px solid rgba(244, 208, 63, 0.35); padding-bottom: 2px;
}
.latest__all:hover, .latest__all:focus-visible { border-bottom-color: var(--color-accent); }

.latest__list {
    list-style: none; margin: 0; padding: 0;
    display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    grid-auto-rows: 1fr; gap: var(--space-3);
}
.latest__item { display: flex; }
.latest__item--featured { grid-row: span 3; }

.latest__item a {
    display: flex; width: 100%; gap: var(--space-3); align-items: center;
    padding: var(--space-2); border-radius: var(--radius-md);
    background: var(--color-surface-raised); border: 1px solid var(--color-border);
    text-decoration: none; color: var(--color-text);
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.latest__item a:hover, .latest__item a:focus-visible {
    transform: translateY(-2px); border-color: rgba(244, 208, 63, 0.55); box-shadow: var(--shadow-md);
}
.latest__item--featured a { flex-direction: column; align-items: stretch; gap: var(--space-3); padding: var(--space-3); }

.latest__media { display: block; overflow: hidden; border-radius: var(--radius-sm); background: #0d1117; }
/* Stand-in when a news item has no photo: the item's own icon, same box. */
.latest__glyph {
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); color: var(--color-accent);
    /* Same dark plate as .latest__media; a gold tint here goes olive on the
       card surface. */
    background: #0d1117; border: 1px solid rgba(244, 208, 63, 0.16);
}
.latest__item--featured .latest__glyph { aspect-ratio: 16 / 9; font-size: 4rem; }
.latest__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.latest__item--featured .latest__media { aspect-ratio: 16 / 9; }
/* Compact cards: the thumbnail fills the card height so the row reads as one
   block rather than a small picture floating in a tall card. */
.latest__item:not(.latest__item--featured) a { align-items: stretch; }
.latest__item:not(.latest__item--featured) .latest__media,
.latest__item:not(.latest__item--featured) .latest__glyph {
    flex: 0 0 120px; width: 120px; min-height: 76px;
}
.latest__item:not(.latest__item--featured) .latest__glyph { font-size: 1.5rem; }
.latest__item:not(.latest__item--featured) .latest__body { justify-content: center; padding: var(--space-1) var(--space-1) var(--space-1) 0; }

.latest__body { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; }
.latest__item--featured .latest__body { padding: 0 var(--space-1) var(--space-1); }
.latest__meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-1); }
.latest__meta .news-date-chip, .latest__meta .news-new-badge { margin: 0; vertical-align: baseline; }

.latest__text {
    font-size: var(--text-sm); line-height: 1.4; font-weight: 600;
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.latest__item--featured .latest__text {
    font-family: var(--font-display); font-size: var(--text-lg);
    line-height: 1.3; font-weight: 700; -webkit-line-clamp: 4;
}
.latest__more { font-size: var(--text-sm); font-weight: 700; color: var(--color-accent); }

@media (max-width: 900px) {
    /* One column: rows must size to their own content, otherwise the equal-row
       sizing above stretches each compact card to the featured card's height. */
    .latest__list { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .latest__item--featured { grid-row: auto; }
}
@media (max-width: 480px) {
    .latest__item:not(.latest__item--featured) .latest__media,
    .latest__item:not(.latest__item--featured) .latest__glyph {
        flex-basis: 92px; width: 92px; min-height: 68px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .latest__item a, .latest__item a:hover, .latest__item a:focus-visible { transition: none; transform: none; }
}