/* 
   DUSTIN DUONG - MAIN STYLESHEET
   Swiss Design System v2.1
   
   TABLE OF CONTENTS:
   1. VARIABLES & THEMES        - Color palettes and system-wide values
   2. GLOBAL RESET & BASE       - Core styles, fonts, and grain effect
   3. ANIMATIONS & REVEAL       - Entry animations for sections
   4. CURSOR ENGINE             - Custom kinetic crosshair logic
   5. NAVIGATION (TOP & SIDE)   - Floating nav bars and language switching
   6. GRID ARCHITECTURE        - The 12-column Swiss grid system
   7. COMPONENTS                - Dossiers, accordions, and pills
   8. SPECIAL SECTIONS          - Hero name and contact card
   9. PROJECT PEEK & TOOLTIPS   - Hover previews and citations
   10. READING & MEDIA PAGES    - Layouts for sub-pages
   11. MOBILE RESPONSIVENESS    - Handheld device overrides
   12. UTILITY CLASSES (u-)     - Reusable helper classes for quick styling
*/

/* ==========================================================================
   1. VARIABLES & THEMES
   ========================================================================== */
@import url('./inter/inter.css');

:root {
    /* Colors - Light Mode Default */
    --bg: #f4f4f4;
    --ink: #000;
    --accent: #0038ff; /* Academic Blue */
    --accent-ink: #fff; /* Text color inside blue blocks */
    --border: #d0d0d0;
    
    /* System Vars (updated via JS) */
    --cursor-x: 0px; 
    --cursor-y: 0px;
}

[data-theme="dark"] {
    /* Colors - Dark Mode Override */
    --bg: #0d0d0d;
    --ink: #fff;
    --accent: #fff; /* White blocks in Dark Mode */
    --accent-ink: #000; /* Black text inside white blocks */
    --border: #2a2a2a;
}

/* ==========================================================================
   2. GLOBAL RESET & BASE
   ========================================================================== */
* { 
    margin: 0; 
    padding: 0; 
    box-sizing: border-box; 
    cursor: none; /* Custom cursor is used, so hide the default system one */
    scroll-behavior: smooth; 
}

body {
    background: var(--bg); 
    color: var(--ink);
    font-family: 'Inter', sans-serif; 
    -webkit-font-smoothing: antialiased; /* Better font rendering on macOS */
    overflow-x: hidden; 
    overflow-y: visible; 
    transition: background 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* FILM GRAIN OVERLAY: Adds a subtle vintage texture over the entire site */
body::after {
    content: ""; position: fixed; top: -150%; left: -150%; width: 400%; height: 400%;
    background-image: url("https://upload.wikimedia.org/wikipedia/commons/7/76/1k_Resolution_White_Noise_Video_Frame.png");
    opacity: 0.02; 
    pointer-events: none; 
    z-index: 10000;
    animation: grain 0.8s steps(2) infinite;
}

@keyframes grain { 
    0%, 100% { transform:translate(0,0); } 
    33% { transform:translate(-1%,-1%); } 
    66% { transform:translate(1%,1%); } 
}

/* SECTION WRAPPERS: Standard container for vertical stacking */
section {
    position: relative;
    width: 100%;
    display: block;
    min-height: 10vh;
}

/* ==========================================================================
   3. ANIMATIONS & REVEAL
   ========================================================================== */
/* .reveal: Class applied to elements that should slide up when the page loads */
.reveal { 
    opacity: 0; 
    transform: translateY(30px); 
    animation: swiss 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards; 
}

@keyframes swiss { 
    to { opacity: 1; transform: translateY(0); } 
}

/* ==========================================================================
   4. CURSOR ENGINE
   ========================================================================== */
/* #cursor-wrap: The container that follows the mouse movement */
#cursor-wrap { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 44px; 
    height: 44px; 
    pointer-events: none; 
    z-index: 10001; 
    mix-blend-mode: difference; /* Inverts colors based on background for visibility */
    transform: translate3d(var(--cursor-x), var(--cursor-y), 0); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
}

/* #cursor-circle: The outer ring of the custom cursor */
#cursor-circle { 
    width: 30px; 
    height: 30px; 
    border: 1.2px solid #fff; 
    border-radius: 50%; 
    transition: transform 0.1s ease-out; 
}

/* .ch, .cv: Horizontal and vertical lines forming the inner crosshair */
.ch, .cv { position: absolute; background: #fff; } 
.ch { width: 14px; height: 1.2px; } 
.cv { width: 1.2px; height: 14px; }

/* ==========================================================================
   5. NAVIGATION (TOP & SIDE)
   ========================================================================== */
/* .top-nav: The sticky bar at the top with branding and theme/lang controls */
.top-nav {
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 24px 4vw;
    z-index: 9500;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
    mix-blend-mode: normal;
    color: var(--ink);
}

/* .nav-controls: Groups the language buttons and theme toggle */
.nav-controls { display: flex; align-items: center; gap: 16px; }

/* Proficiency Grid & Skills */
.skill-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 24px;
}

.skill-cat {
    font-family: 'Courier New', Courier, monospace;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.5;
    display: block;
    margin-bottom: 4px;
}

.skill-val {
    font-size: 1.1rem;
    font-weight: 500;
}

.lang-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    border-top: 1px solid var(--border);
    padding-top: 16px;
}

@media (max-width: 800px) {
    .skill-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .skill-val {
        line-height: 1.2;
    }
    .skill-cat {
        margin-bottom: 2px;
    }
    .lang-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.lang-entry {
    display: flex;
    flex-direction: column;
    font-size: 10px;
}

.lang-entry span { opacity: 0.6; margin-bottom: 2px; }
.lang-entry b { font-size: 1.2rem; font-weight: 900; }

/* .btn-ui: Generic button style used for the theme toggle and CV download */
.btn-ui { 
    background: none; 
    border: 1px solid var(--ink); 
    color: var(--ink); 
    padding: 8px 16px; 
    font-size: 11px; 
    font-weight: 900; 
    text-transform: uppercase; 
    text-decoration: none; 
    transition: 0.2s; 
    display: inline-block;
    will-change: transform;
}

.btn-ui:hover { background: var(--ink); color: var(--bg); }

/* .lang-nav: Container for EN/FR/DE language selectors */
.lang-nav { display: flex; gap: 8px; align-items: center; }

/* Individual language spans */
.lang-nav span { 
    font-size: 11px; 
    font-weight: 900; 
    opacity: 0.4; 
    transition: all 0.3s ease; 
    width: 24px; 
    height: 24px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    border-radius: 50%;
}

/* .active: Highlight state for the currently selected language */
.lang-nav span.active { 
    opacity: 1; 
    background: var(--accent); 
    color: var(--accent-ink); 
}

/* .side-nav: The kinetic vertical navigation on the left side (01, 02, etc.) */
.side-nav {
    position: fixed;
    left: 0;
    width: 8vw;
    top: 120px;
    z-index: 9000;
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: center;
    justify-content: flex-start;
}

/* .nav-item: Individual link in the side navigation */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--ink);
    font-size: 11px;
    font-weight: 900;
    gap: 8px;
    opacity: 0.3;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    padding: 16px 0;
    position: relative;
    will-change: transform;
}

.nav-item:hover { opacity: 1; color: var(--accent); }

/* Active state for side nav, adds a dot indicator via ::before */
.nav-item.active {
    opacity: 1 !important;
    color: var(--accent) !important;
    transform: translateX(5px);
}

.nav-item.active span { font-weight: 900; }

.nav-item.active::before {
    content: "";
    position: absolute;
    left: -15px;
    width: 6px;
    height: 6px;
    background: var(--accent);
    border-radius: 50%;
}

/* .nav-item-contact: Special styling for the contact nav item with SVG icon */
.nav-item-contact svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.nav-item-contact:hover svg,
.nav-item-contact.active svg {
    stroke: var(--accent);
}

@media (max-width: 1000px) {
    .side-nav { 
        left: auto; right: 4vw; bottom: 4vw; top: auto; transform: none; align-items: flex-end; 
    }
    .nav-item { font-size: 10px; flex-direction: row-reverse; }
}

/* ==========================================================================
   6. GRID ARCHITECTURE
   ========================================================================== */
/* .main-grid: Core 12-column grid container. All content is placed inside this. */
.main-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    margin: 0 5vw 0 8vw; /* Offsets to accommodate the side navigation */
    padding-top: 0; 
    border-left: 1px solid var(--border);
    position: relative;
    width: auto;
}

section.main-grid {
    border-left: 1px solid var(--border);
}

/* .grid-cell: A standard modular block in the Swiss grid. */
.grid-cell {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg);
    padding: 64px 48px;
    position: relative;
    z-index: 1;
    transition: 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), 
        z-index 0s, 
        box-shadow 0.4s ease, 
        background 0.3s ease, 
        color 0.3s ease;
    margin-top: -1px; /* Overlap borders to prevent double-line thickness */
}

/* Hover effect: Cell lifts up and changes to the accent color (Blue in light mode) */
.grid-cell:hover {
    z-index: 100 !important;
    background: var(--accent);
    color: var(--accent-ink) !important;
}

/* .section-header: Sticky labels for main categories (e.g., "01 // EDUCATION") */
.section-header {
    grid-column: 1 / -1; /* Span across all 12 columns */
    background: var(--accent);
    color: var(--accent-ink);
    padding: 24px 48px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 0.25em;
    position: -webkit-sticky;
    position: sticky;
    top: 72px; /* Sticks below the top-nav */
    z-index: 8000;
    border-bottom: 1px solid var(--border);
    margin-top: -1px;
    margin-bottom: -1px;
}

/* ==========================================================================
   7. COMPONENTS (DOSSIERS, ACCORDIONS, PILLS)
   ========================================================================== */

/* .sub-label: Small uppercase labels (tabs) sitting at the top of grid cells */
.sub-label {
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    display: inline-block;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 8px 16px;
    border-radius: 4px;
    position: relative;
    z-index: 10;
    transition: 
        background 0.2s ease, 
        color 0.2s ease, 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    margin-bottom: 24px;
    margin-top: -56px; /* Positions label half-outside the container */
    margin-left: -8px;
}

.grid-cell:hover .sub-label {
    background: var(--bg);
    color: var(--accent);
}

/* .dossier: A specific cell type styled like a physical file folder */
.grid-cell.dossier {
    border-radius: 40px 40px 0 0;
    overflow: visible;
    border-left: 1px solid var(--border); /* Restore border */
    margin-left: -1px; /* Overlap with grid/previous cell border */
}

/* Fix Expertise Matrix flush to the right border */
.grid-cell.dossier.u-span-5 {
    border-right: none !important;
}

/* Specific fix for first dossier in a row to align with grid border */
.main-grid .grid-cell.dossier:first-of-type {
    margin-left: -1px;
}

/* Adjusted tab style for dossiers */
.grid-cell.dossier .sub-label {
    border-radius: 16px 16px 0 0;
    margin-top: 0;
    margin-left: -16px;
    padding: 8px 24px;
}

/* Standalone Dossier Style (e.g. Research Profile, Email Card) */
#home .grid-cell.dossier,
#contact .grid-cell.dossier {
    margin-bottom: 48px;
    border-radius: 40px;
    border-top: 1px solid var(--border);
    border-right: 1px solid var(--border);
}

#home .grid-cell.dossier:hover,
#contact .grid-cell.dossier:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    border-radius: 40px !important;
}

/* .dossier-tab: Wrapper for the tab label and serial number/ID */
.dossier-tab {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: -88px;
    margin-bottom: 24px;
}

/* .dossier-id: Serial number style text (e.g., REF_098) */
.dossier-id {
    font-family: 'Courier New', Courier, monospace;
    font-size: 8px;
    font-weight: 700;
    opacity: 0.4;
    letter-spacing: 0.05em;
    padding-bottom: 8px;
}

/* .dossier-meta: Secondary info line in dossiers (dates, locations) */
.dossier-meta {
    display: flex;
    gap: 24px;
    margin-bottom: 32px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 8px;
    font-weight: 700;
    opacity: 0.8;
    border-bottom: 1px dashed var(--ink);
    padding-bottom: 8px;
}

/* Hover state for Dossiers: Specific refinements for folder look */
.grid-cell.dossier:hover {
    border-bottom-color: var(--accent) !important;
}

.grid-cell.dossier:hover .sub-label {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
}

.grid-cell.dossier:hover .dossier-id,
.grid-cell.dossier:hover .dossier-meta,
.grid-cell.dossier:hover h2,
.grid-cell.dossier:hover .pill,
.grid-cell.dossier:hover .cite-trigger {
    opacity: 1 !important;
    color: var(--accent-ink) !important;
}

.grid-cell.dossier:hover .dossier-meta { border-bottom-color: var(--accent-ink); }

/* .row-accordion: A horizontal list item that expands on click */
.row-accordion { 
    grid-column: span 12; 
    border-bottom: 1px solid var(--border); 
    border-right: 1px solid var(--border); 
    margin-bottom: -1px;
    position: relative; 
    background: transparent; 
    overflow: hidden; 
    transition: border-color 0.4s ease; 
}

/* .row-header: The visible part of the accordion before expansion */
.row-header { 
    display: grid; 
    grid-template-columns: repeat(12, 1fr); 
    cursor: pointer; 
    transition: background 0.4s ease;
    overflow: visible !important;
}

.row-accordion:hover .row-header {
    background: var(--accent);
    color: var(--accent-ink);
}

.row-accordion.active .row-header {
    background: var(--bg);
    color: var(--ink);
}

.row-accordion:hover .sub-label {
    background-color: var(--bg) !important;
    color: var(--accent) !important;
    opacity: 1 !important;
}

.row-accordion.active .sub-label {
    background-color: var(--accent) !important;
    color: var(--accent-ink) !important;
    opacity: 1 !important;
}

/* .cell: Internal padding and border for accordion headers */
.cell { 
    padding: 48px; 
    border-right: 1px solid var(--border); 
    position: relative; 
    grid-column: span 3;
} 
.cell:nth-child(2) {
    grid-column: span 6;
}
.cell:last-child { 
    grid-column: span 3;
    border: none; 
    text-align: right; 
    padding-right: 80px; 
    font-weight: 900; 
}

/* .org-title: Prominent title text for institutions or projects */
.org-title { 
    font-size: 1.8rem; 
    font-weight: 800; 
    letter-spacing: -0.02em; 
    display: block; 
    margin-top: 5px; 
}

/* .accordion-content: The hidden container that slides open */
.accordion-content { 
    display: grid; 
    grid-template-rows: 0fr; /* Collapsed by default */
    transition: grid-template-rows 0.6s cubic-bezier(0.16, 1, 0.3, 1); 
    background: rgba(127,127,127,0.03); 
}

/* .active: State where the accordion content is revealed */
.row-accordion.active .accordion-content { 
    grid-template-rows: 1fr; 
    border-top: 1px solid var(--border); 
}

/* .inner-padding: Wrapper inside accordion to handle overflow and text layout */
.inner-padding { 
    overflow: hidden; 
    padding: 48px; 
    max-width: 1000px; 
    font-size: 1.1rem; 
    line-height: 1.7; 
    opacity: 0.9; 
}

/* .accordion-icon: The plus/minus toggle symbol on accordions */
.accordion-icon {
    position: absolute;
    right: 20px;
    bottom: 37px;
    width: 16px;
    height: 16px;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.accordion-icon::before, .accordion-icon::after {
    content: ""; 
    position: absolute; 
    background: currentColor; 
    transition: transform 0.4s ease;
}
.accordion-icon::before { top: 50%; left: 0; width: 100%; height: 2px; margin-top: -1px; }
.accordion-icon::after { left: 50%; top: 0; width: 2px; height: 100%; margin-left: -1px; }
.row-accordion.active .accordion-icon { transform: rotate(180deg); color: #0038ff; }
[data-theme="dark"] .row-accordion.active .accordion-icon { color: #fff; }
.row-accordion.active .accordion-icon::before, 
.row-accordion.active .accordion-icon::after { transform: rotate(45deg); }

/* .row-ext-link: External arrow link (↗) found in project rows */
.row-ext-link {
    position: absolute; right: 30px; bottom: 20px; width: 50px; height: 50px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; text-decoration: none; color: inherit; z-index: 10;
    opacity: 0.3; border: 2px solid transparent; border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.row-accordion:hover .row-ext-link { 
    opacity: 1; 
    color: var(--accent-ink); 
}
.row-ext-link:hover { 
    border-color: var(--accent-ink) !important; 
    transform: scale(1.1) !important; 
}
.row-accordion.active .row-ext-link:hover {
    border-color: #0038ff !important;
}
.row-accordion.active .row-ext-link { color: #0038ff !important; opacity: 1; }
[data-theme="dark"] .row-accordion.active .row-ext-link:hover {
    border-color: #fff !important;
}
[data-theme="dark"] .row-accordion.active .row-ext-link { color: #fff !important; }

/* .skills-section: Container for the skills label and pills within a dossier */
.skills-section {
    margin-top: 48px;
    border-top: 1px dashed var(--border);
    padding-top: 24px;
}

.t-skills-label {
    font-size: 8px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: var(--accent);
    margin-bottom: 16px;
    opacity: 0.6;
}

.grid-cell:hover .t-skills-label {
    color: var(--accent-ink);
    opacity: 1;
}

/* .pill: Small rounded tags used for skills and technologies */
.pill { 
    border: 1.5px solid var(--accent); 
    color: var(--accent); 
    padding: 8px 16px; 
    border-radius: 24px; 
    font-size: 8px; 
    font-weight: 800; 
    text-transform: uppercase; 
    display: inline-block; 
    margin: 8px; 
    transition: 0.3s; 
    background: transparent; 
    will-change: transform;
}
.pill:hover { background: var(--accent); color: var(--accent-ink) !important; }

/* Invert mode (Dark): Pills have white border (accent) by default, 
   but user wants black border on invert specifically? 
   Wait, the instruction said: 
   "on invert, the pills should be black border so we can see it more clearly. 
    on regular, the pills should have white borders."
   
   If "regular" (light mode) pills have white borders, they won't be visible on #f4f4f4.
   Maybe the user meant the border color when the CARD is hovered (turning blue)?
   
   Let's re-read carefully:
   "on invert, the pills should be black border so we can see it more clearly. 
    on regular, the pills should have white borders."
   
   In light mode (regular), --bg is #f4f4f4. White border is invisible.
   In dark mode (invert), --bg is #0d0d0d. Black border is invisible.
   
   HOWEVER, when a grid cell is HOVERED, it turns into the accent color (Blue in light, White in dark).
   
   Ah! I see. 
   When the card turns BLUE (light mode hover), white borders on pills look great.
   When the card turns WHITE (dark mode hover), black borders on pills look great.
   
   But the user said "pills should still have an accent border when not hovered".
   So:
   - Not hovered card: Pill has accent border (Blue in light, White in dark).
   - Hovered card: Pill has specific border (White in light, Black in dark).
*/

.grid-cell:hover .pill {
    border-color: #fff;
}

[data-theme="dark"] .grid-cell:hover .pill {
    border-color: #000;
}

/* .skill-container: Flex wrapper to keep pills organized and wrapping correctly */
.skill-container { display: flex; flex-wrap: wrap; gap: 10px; }

/* ==========================================================================
   8. SPECIAL SECTIONS (HERO, CONTACT)
   ========================================================================= */

/* .hero-name: The large "Dustin Duong" name at the start of the site */
.hero-name {
    grid-column: span 12;
    font-size: clamp(3rem, 8vw, 6rem);
    font-weight: 900;
    line-height: 0.8;
    letter-spacing: -0.06em;
    padding: 160px 48px 64px 48px;
    text-transform: uppercase;
}

/* #kinetic-name: Specific span for the name tracking (letter spacing) animation */
#kinetic-name {
    display: inline-block;
    transition: letter-spacing 0.1s ease-out;
    will-change: letter-spacing;
    letter-spacing: 0em;
}

/* #contact: Container for the footer contact section */
#contact { margin-top: 64px; padding-bottom: 120px; }
#contact.main-grid { border-left: none !important; border-bottom: none; }

/* Centered email card styling */
#contact .grid-cell {
    padding: 96px 48px 64px 48px !important;
    text-align: center;
    border: 1px solid var(--border) !important;
    border-radius: 40px !important;
}

#contact .grid-cell:hover {
    transform: none !important;
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    box-shadow: 0 40px 80px rgba(0, 56, 255, 0.15);
}

[data-theme="dark"] #contact .grid-cell:hover {
    box-shadow: 0 40px 80px rgba(255, 255, 255, 0.05);
}

/* Centered floating label for the contact card */
#contact .grid-cell .sub-label {
    position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%);
    margin: 0; padding: 10px 20px; font-size: 9px;
}

#contact .grid-cell:hover .sub-label {
    background: var(--bg) !important;
    color: var(--accent) !important;
    transform: translate(-50%, calc(-50% + 20px)) scale(1.1);
}

/* Animated underline for the email address on hover */
#contact .grid-cell h1 { position: relative; display: inline-block; cursor: pointer; }
#contact .grid-cell h1::after {
    content: ""; position: absolute; bottom: -5px; left: 0; width: 0; height: 2px;
    background: var(--accent-ink); transition: width 0.4s ease;
}
#contact .grid-cell:hover h1::after { width: 100%; }

#contact .grid-cell:hover h1 {
    opacity: 1 !important;
    color: var(--accent-ink) !important;
}

/* Invert mode contact card text colors */
[data-theme="dark"] #contact .grid-cell,
[data-theme="dark"] #contact .grid-cell a,
[data-theme="dark"] #contact .grid-cell h1 {
    color: #fff !important;
}

[data-theme="dark"] #contact .grid-cell:hover,
[data-theme="dark"] #contact .grid-cell:hover a,
[data-theme="dark"] #contact .grid-cell:hover h1 {
    color: #fff !important;
}


/* ==========================================================================
   9. PROJECT PEEK & TOOLTIPS
   ========================================================================== */
/* .peek-image: Floating project screenshot that follows the cursor on hover */
.peek-image {
    position: fixed; width: 280px; height: 180px; object-fit: cover; pointer-events: none;
    opacity: 0; z-index: 10005; transform: scale(0.8);
    transition: 
        opacity 0.3s ease, 
        transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    filter: contrast(1.1); border: 1px solid var(--accent);
    box-shadow: 15px 15px 40px rgba(0,0,0,0.25);
}

/* .cite-trigger: Underlined text that reveals a technical tooltip on hover */
.cite-trigger { border-bottom: 2px dotted var(--accent); cursor: help; position: relative; display: inline-block; padding-bottom: 1px; }

/* .cite-tooltip: The dark tooltip box with methodological details */
.cite-tooltip {
    position: fixed; background: var(--bg); color: var(--accent); padding: 16px; font-size: 8px;
    font-weight: 500; width: 224px; z-index: 10006; pointer-events: none; opacity: 0;
    transform: translateY(8px); transition: all 0.3s ease; border: 1px solid var(--accent);
}
.cite-trigger:hover .cite-tooltip { opacity: 1; transform: translateY(0); }
.grid-cell:hover .cite-trigger .cite-tooltip { background: var(--bg); color: var(--accent); }
[data-theme="dark"] .cite-tooltip { background: #000; color: #fff; border-color: #fff; }
[data-theme="dark"] .grid-cell:hover .cite-trigger .cite-tooltip { background: #000; color: #fff; }

/* Enhanced underline visibility on hover */
.grid-cell:hover .cite-trigger { border-bottom-color: var(--accent-ink) !important; border-bottom-style: solid !important; }
.row-accordion:hover .cite-trigger { border-bottom-color: var(--accent-ink) !important; border-bottom-style: solid !important; }


/* ==========================================================================
   10. READING & MEDIA PAGES
   ========================================================================== */
/* .reading-container: Centered text layout for essay pages */
.reading-container { 
    grid-column: 3 / 11; 
    padding: 120px 0; 
    border-left: 1px dashed var(--border); 
    border-right: 1px dashed var(--border); 
    background: var(--bg); 
}

/* .reading-body: Typography constraints for long-form reading */
.reading-body { max-width: 680px; margin: 0 auto; font-size: 1.25rem; line-height: 1.8; color: var(--ink); }
.reading-body h3 { font-weight: 900; text-transform: uppercase; margin: 64px 0 24px 0; letter-spacing: -0.02em; }
.reading-body p { margin-bottom: 32px; }

/* .video-hero: Large widescreen container for video projects */
.video-hero { 
    grid-column: span 12; 
    width: 100%; 
    aspect-ratio: 16/9; 
    background: #000; 
    overflow: hidden; 
    border-bottom: 1px solid var(--border); 
}

/* Video element: Default grayscale that becomes color on hover */
video { width: 100%; height: 100%; filter: grayscale(1); transition: filter 0.5s; }
video:hover { filter: grayscale(0); }

/* ==========================================================================
   11. MOBILE RESPONSIVENESS (< 800px)
   ========================================================================== */
@media (max-width: 800px) {
    /* Collapse the 12-column grid into a single column flow */
    .main-grid { 
        grid-template-columns: repeat(12, 1fr) !important; 
        margin: 0 !important; 
        padding-top: 32px; 
        border-left: none !important; 
        width: 100% !important; 
        overflow-x: visible !important;
    }
    
    /* Global stacking for most elements */
    .main-grid > * { grid-column: span 12 !important; }

    /* Remove interactive transforms and side borders for simple stacking */
    .grid-cell { 
        margin: 0 !important; 
        padding: 48px 20px !important; /* Slightly reduced padding for small screens */
        border-radius: 0 !important; 
        border-left: none !important; 
        border-right: none !important; 
        border-bottom: 1px solid var(--border) !important; 
        transform: none !important; 
        box-shadow: none !important; 
    }
    .grid-cell:hover { transform: none !important; box-shadow: none !important; }
    
    .grid-cell.dossier { 
        margin-top: 32px !important; 
        border-top: 1px solid var(--border) !important; 
        border-left: 1px solid var(--border) !important;
        border-right: 1px solid var(--border) !important;
        margin-left: 20px !important;
        margin-right: 20px !important;
        border-radius: 40px 40px 0 0 !important;
    }
    .main-grid .grid-cell.dossier:first-of-type { margin-left: 20px !important; }

    .dossier-tab { 
        position: relative; 
        margin-top: -62px; /* Pull label completely outside the card on top */
        padding: 0; 
        display: flex;
        justify-content: flex-start;
        z-index: 100;
        pointer-events: none; 
    }
    .grid-cell.dossier .sub-label { 
        margin-left: 0 !important; 
        margin-top: 0 !important; 
        font-size: 7px; 
        border-radius: 12px 12px 0 0 !important;
        position: relative;
        left: -1px; /* Align with the card's left border */
        top: 0px;   /* Sits perfectly on top of the card border */
        padding: 6px 16px !important;
        pointer-events: auto; /* Re-enable for the label itself */
    }

    /* Remove gap between Research Profile and next section on mobile */
    #home.main-grid { padding-bottom: 0 !important; }
    #edu.main-grid, #exp.main-grid, #work.main-grid { padding-top: 0 !important; padding-bottom: 0 !important; }
    #home .grid-cell.dossier { 
        margin-bottom: 32px !important; 
        border-radius: 40px !important;
        border-bottom: 1px solid var(--border) !important;
    }
    #edu .section-header, #exp .section-header, #work .section-header { margin-top: 0 !important; }
    .section-header { margin-bottom: 0 !important; }
    .row-accordion { margin-top: 0 !important; }

    /* Recalibrate the contact card for small screens */
    #contact.main-grid { margin: 64px 0 0 0 !important; padding-bottom: 120px; }
    #contact .grid-cell.dossier { 
        margin-bottom: 32px !important; 
        border: 1px solid var(--border) !important;
        border-radius: 40px !important;
        padding: 48px 20px 48px 20px !important;
    }
    #contact h1 { 
        font-size: clamp(2.5rem, 15vw, 4rem); 
        text-align: center; 
        width: 100%; 
        line-height: 1.1;
        word-break: break-all;
    }

    /* Wrapping for Expertise Matrix pills on mobile instead of scroll */
    .skills-section { margin-top: 24px; }
    .lang-section.u-mt-48 { margin-top: 32px !important; }
    .skill-container {
        flex-wrap: wrap !important;
        overflow-x: visible !important;
        padding-bottom: 0;
        margin-bottom: 0;
        gap: 8px !important;
        justify-content: flex-start !important;
    }
    
    .skill-container::-webkit-scrollbar { display: none; }
    
    .skill-container .pill { flex: 0 1 auto; margin: 0; }

    .hero-name { 
        padding: 60px 20px 24px 20px !important; 
        font-size: clamp(1.5rem, 10vw, 2.8rem) !important; 
        line-height: 1;
        letter-spacing: -0.05em;
    }
    
    /* Move Side-nav to Bottom on mobile, Keep Top-nav at Top */
    .top-nav { 
        top: 0;
        bottom: auto; 
        padding: 12px 20px; 
        min-height: 60px; 
        border-top: none;
        border-bottom: 1px solid var(--border);
    }
    
    .side-nav {
        display: flex !important;
        flex-direction: row !important;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 60px;
        background: var(--bg);
        border-top: 1px solid var(--border);
        z-index: 9500;
        padding: 0 10px; /* Reduced padding to fit 4 items comfortably */
        top: auto;
        transform: none;
        justify-content: space-around;
        gap: 0;
    }

    .nav-item {
        flex-direction: column !important;
        padding: 8px 4px !important; /* Narrower padding */
        font-size: 8px !important; /* Smaller font for safety */
        opacity: 0.5;
        width: auto !important;
        flex: 1; /* Even distribution */
        text-align: center;
    }

    .nav-item.active {
        transform: translateY(-2px) !important;
    }

    .nav-item.active::before {
        display: none;
    }
    .top-nav div:first-child { font-size: 9px !important; letter-spacing: 0.1em !important; }
    .nav-controls { gap: 8px; }
    .btn-ui { padding: 6px 8px; font-size: 8px; }
    .lang-nav { gap: 4px; }
    .lang-nav span { width: 18px; height: 18px; font-size: 8px; }

    /* Sticky headers should stick to top, but no longer need to offset for top-nav */
    .section-header { 
        top: 0; 
        padding: 16px 20px; 
        margin: 0; 
        font-size: 7px;
    }
    
    .row-header { 
        display: block !important;
        gap: 16px; 
        padding: 24px 20px; 
    }
    .cell { padding: 0 !important; border: none !important; text-align: left !important; display: block !important; }
    .cell:last-child { text-align: left !important; padding-right: 0 !important; margin-top: 8px; opacity: 0.6; }
    .org-title { font-size: 1.4rem; }
    .accordion-icon { bottom: 20px; right: 20px; }
    .row-ext-link { bottom: 15px; right: 60px; width: 32px; height: 32px; font-size: 1.2rem; }

    /* Disable desktop-only features on mobile */
    .side-nav { display: flex !important; }
    #cursor-wrap, #global-peek { display: none !important; }
    * { cursor: auto !important; -webkit-tap-highlight-color: transparent; }
}

/* ==========================================================================
   12. UTILITY CLASSES (u-)
   ========================================================================== 
   Utility classes are small, reusable CSS rules used for one-off adjustments 
   directly in the HTML. They help avoid creating 100s of unique class names 
   for simple things like "center this text" or "span 6 columns".
   
   Prefix 'u-' stands for Utility. 
   Most include '!important' to ensure they override component-level styles.
   ========================================================================== */


/* GRID SPANNING: Control how many columns a cell covers (1-12) */
.u-span-12 { grid-column: span 12 !important; }
.u-span-8 { grid-column: span 8 !important; }
.u-span-7 { grid-column: span 7 !important; }
.u-span-6 { grid-column: span 6 !important; }
.u-span-5 { grid-column: span 5 !important; }
.u-span-4 { grid-column: span 4 !important; }

/* FLEXBOX & ALIGNMENT */
.u-font-mono { font-family: 'Courier New', Courier, monospace !important; }
.u-mt-48 { margin-top: 48px !important; }
.u-mb-12 { margin-bottom: 12px !important; }
.u-text-center { text-align: center !important; }
.u-d-flex { display: flex !important; }
.u-items-center { align-items: center !important; }
.u-justify-center { justify-content: center !important; }
.u-flex-wrap { flex-wrap: wrap !important; }
.u-font-weight-900 { font-weight: 900 !important; }
.u-mx-auto { margin-left: auto !important; margin-right: auto !important; }
.u-font-size-lg { font-size: 1.2rem !important; }
.u-font-size-xl { font-size: 2.5rem !important; }
.u-mt-128 { margin-top: 128px !important; }

/* BORDER MANAGEMENT */
.u-no-border { border: none !important; }
.u-no-border-bottom { border-bottom: none !important; }
.u-no-border-right { border-right: none !important; }
.u-border-ink { border-color: var(--ink) !important; }

/* TEXT & COLOR */
.u-no-decoration { text-decoration: none !important; }
.u-hover-opacity-100:hover { opacity: 1 !important; }
.u-mb-32 { margin-bottom: 32px !important; }
.u-p-64 { padding: 64px !important; }
.u-gap-32 { gap: 32px !important; }
.u-opacity-20 { opacity: 0.2 !important; }
.u-opacity-70 { opacity: 0.7 !important; }
.u-opacity-100 { opacity: 1 !important; }

/* FONT SIZING */
.u-font-size-sm { font-size: 0.9rem !important; }
.u-font-size-base { font-size: 1.2rem !important; }
.u-font-size-xl { font-size: 3.5rem !important; }
.u-font-size-clamp { font-size: clamp(2rem, 6vw, 5rem) !important; }

/* SPACING & LAYOUT */
.u-mt-neg-1 { margin-top: -1px !important; }
.u-mb-48 { margin-bottom: 48px !important; }
.u-p-128-48 { padding: 128px 48px !important; }
.u-static { position: static !important; }
.u-max-w-680 { max-width: 680px !important; }
.u-mb-16 { margin-bottom: 16px !important; }
.u-lh-18 { line-height: 1.8 !important; }
.u-pos-absolute { position: absolute !important; }
.u-top-20 { top: 20px !important; }
.u-w-full { width: 100% !important; }
.u-h-300 { height: 300px !important; }
.u-aspect-16-9 { aspect-ratio: 16/9 !important; }
.u-overflow-hidden { overflow: hidden !important; }

/* BACKGROUNDS */
.u-bg-var { background: var(--bg) !important; }
.u-bg-border { background: var(--border) !important; }
.u-bg-black { background: #000 !important; }