/* Inline gallery slide button */
.gallery-slide-btn {
    margin-left: 0.5em;
    padding: 0.18em 0.7em;
    font-size: 0.92em;
    border-radius: 1em;
    border: 1px solid var(--col-navy, #1e3a5f);
    background: var(--bg-main, #fff);
    color: var(--col-navy, #1e3a5f);
    cursor: pointer;
    transition: background 0.18s, border-color 0.18s;
    vertical-align: middle;
}
.gallery-slide-btn:hover {
    background: var(--col-navy, #1e3a5f);
    color: #fff;
}
/* Embed gallery arrows (Design Work section) */
.embed-arrows {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.embed-arrow {
    background: var(--bg-main, #fff);
    border: 1.5px solid rgba(30,58,95,0.14);
    color: var(--text-main);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(30,58,95,0.05);
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    z-index: 2;
}
.embed-arrow:hover {
    background: var(--bg-accent, #f3f6fa);
    border-color: var(--text-main);
    transform: translateY(-1px);
}
body.dark-mode .embed-arrow {
    background: rgba(40, 40, 40, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}
/* Appearances gallery arrows */
.appearances-arrows {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.75rem;
}
.appearances-arrow {
    background: var(--bg-main, #fff);
    border: 1.5px solid rgba(30,58,95,0.14);
    color: var(--text-main);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(30,58,95,0.05);
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    z-index: 2;
}
.appearances-arrow:hover {
    background: var(--bg-accent, #f3f6fa);
    border-color: var(--text-main);
    transform: translateY(-1px);
}
body.dark-mode .appearances-arrow {
    background: rgba(40, 40, 40, 0.9);
    border-color: rgba(255, 255, 255, 0.2);
}
/* Card gallery navigation arrows */
.gallery-nav-arrow {
    position: static;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(30,58,95,0.14);
    color: var(--text-main);
    border-radius: 50%;
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    line-height: 1;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(30,58,95,0.05);
    transition: background 0.18s, border-color 0.18s, transform 0.18s;
    z-index: 10;
}
.gallery-nav-arrow-left {
    left: auto;
}
.gallery-nav-arrow-right {
    right: auto;
}
.gallery-nav-arrow:hover {
    background: var(--bg-accent, #f3f6fa);
    border-color: var(--text-main);
    transform: translateY(-1px);
}
.gallery-nav-arrow-left:hover {
    transform: translateY(-1px);
}
.gallery-nav-arrow-right:hover {
    transform: translateY(-1px);
}
body.dark-mode .gallery-nav-arrow {
    background: rgba(40, 40, 40, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}
/* =========================================
   THEME ENGINE
   ========================================= */
:root {
    /* PALETTE (Accents Only) */
    --col-magenta: #c73aa4;
    --col-red: #ff5757;
    --col-orange: #e9a34d;
    --col-green: #75af5c;
    --col-teal: #00a8a8;
    --col-grey: #7f8c8d; /* New Grey for Tags */
    --col-navy: #1e3a5f;

    /* BASE THEME: JOURNAL SOFT */
    --bg-color: #fdfbf7; 
    --text-main: #1e3a5f;
    --text-sub: #5f6c7b;
    --card-bg: #ffffff;
    --border: 1px solid rgba(0,0,0,0.06);
    --shadow: 0 4px 12px rgba(0,0,0,0.03);
    --shadow-hover: 0 10px 25px rgba(0,0,0,0.08);
    --nav-bg: rgba(253, 251, 247, 0.98);
    --role-line-gap: 0.2rem;
    --current-role-gap: -0.06rem;
    --current-role-org-gap: -0.3rem;
    --current-role-meta-gap: -0.12rem;
    
    /* TYPOGRAPHY */
    --font-head: 'Playfair Display', serif;
    --font-body: 'Merriweather', serif;
    --text-scale: 1.08;
    --text-scale-head: 1;
    --text-scale-body: 1;

    --transition: 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);

}

/* In-card link color normalization */
.card-body a,
.course-content a,
.highlight-box a,
.notable-acc-item a {
    color: var(--col-navy);
}

.card-body a:visited,
.course-content a:visited,
.highlight-box a:visited,
.notable-acc-item a:visited {
    color: var(--col-navy);
}

.card-body a:hover,
.course-content a:hover,
.highlight-box a:hover,
.notable-acc-item a:hover {
    opacity: 0.82;
}

html {
    font-size: 17px;
}

/* Dynamic Accent Colors */
body[data-accent="magenta"] .accordion-header.pill-style { background: linear-gradient(135deg, var(--col-magenta) 0%, var(--col-red) 100%); }
body[data-accent="teal"] .accordion-header.pill-style { background: linear-gradient(135deg, var(--col-teal) 0%, var(--col-green) 100%); }
body[data-accent="orange"] .accordion-header.pill-style { background: linear-gradient(135deg, var(--col-orange) 0%, var(--col-red) 100%); }
body[data-accent="green"] .accordion-header.pill-style { background: linear-gradient(135deg, var(--col-green) 0%, var(--col-teal) 100%); }

/* DARK MODE */
body.dark-mode {
    --bg-color: #1a1a1a;
    --text-main: #e0e0e0;
    --text-sub: #a0a0a0;
    --card-bg: #252525;
    --border: 1px solid #333;
    --shadow: 0 4px 20px rgba(0,0,0,0.4);
    --nav-bg: rgba(26, 26, 26, 0.98);
}
body.dark-mode .roles-header {
    border-bottom-color: rgba(255,255,255,0.2);
}
body.dark-mode .bio-body {
    color: #d0d0d0;
}
body.dark-mode .bio-body strong {
    color: #ffffff;
}
body.dark-mode .stat-divider {
    background: rgba(255, 255, 255, 0.2);
    opacity: 0.8;
}
body.dark-mode .current-roles {
    background: rgba(37, 37, 37, 0.92);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark-mode .role-item {
    background: rgba(40, 40, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark-mode .role-item:hover {
    border-color: var(--text-main);
}
body.dark-mode .nested-item:hover .nested-role-meta,
body.dark-mode .nested-item:hover .role-org,
body.dark-mode .nested-item:hover .role-meta {
    color: var(--text-sub);
}
body.dark-mode .logo h1 {
    color: #ffffff;
}
body.dark-mode .logo-subtitle {
    color: #a0a0a0;
    opacity: 1;
}
body.dark-mode .card-h1,
body.dark-mode .card-summary,
body.dark-mode .card-list li {
    color: var(--text-main);
}
body.dark-mode .highlight-box {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-sub);
}
body.dark-mode .course-header {
    background: var(--card-bg);
    color: var(--text-main);
}
body.dark-mode .course-header:hover {
    background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .nested-role-title {
    color: var(--text-main);
}
body.dark-mode .gallery-display {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .gallery-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--text-sub);
}
body.dark-mode .gallery-thumb:hover,
body.dark-mode .gallery-thumb.active {
    background: var(--col-magenta);
    border-color: var(--col-magenta);
    color: #fff;
}
body.dark-mode .gallery-tool-pill {
    background: rgba(199, 58, 164, 0.2);
    border-color: rgba(199, 58, 164, 0.35);
    color: var(--text-main);
}
body.dark-mode .card-link-btn {
    color: var(--text-main);
    border-color: rgba(255, 255, 255, 0.25);
}
body.dark-mode .card-link-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

/* =========================================
   GLOBAL & ANIMATIONS
   ========================================= */
* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    background-color: var(--bg-color);
    color: var(--text-main);
    font-family: var(--font-body);
    transition: background-color var(--transition), color var(--transition);
    line-height: 1.7;
    padding-top: 0;
    scroll-padding-top: 64px;
    position: relative;
    overflow-x: hidden;
    max-width: 100vw;
    font-size: calc(1rem * var(--text-scale-body));
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    opacity: 0.04;
    background-image:
        url('LOGOS/JJLOGOMagenta.svg'),
        url('LOGOS/JJLOGO%20Blue.svg'),
        url('LOGOS/JJLOGOGreen.svg'),
        url('LOGOS/JJLOGORed.svg'),
        url('LOGOS/JJLOGOYellow.svg');
    background-repeat: repeat;
    background-size: 140px 140px, 170px 170px, 150px 150px, 165px 165px, 155px 155px;
    background-position: 0 0, 220px 140px, 420px 60px, 120px 280px, 360px 320px;
    animation: globalLogoDrift 46s linear infinite;
}

body > * {
    position: relative;
    z-index: 1;
}

@keyframes globalLogoDrift {
    0% {
        background-position: 0 0, 220px 140px, 420px 60px, 120px 280px, 360px 320px;
    }
    50% {
        background-position: 90px 120px, 120px 80px, 340px 200px, 260px 220px, 300px 120px;
    }
    100% {
        background-position: 0 0, 220px 140px, 420px 60px, 120px 280px, 360px 320px;
    }
}

body.dark-mode::before {
    opacity: 0.03;
}

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

@keyframes gradientFlow {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* =========================================
   1. DEV TOOLBAR
   ========================================= */
#dev-toolbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: #222;
    color: #fff;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0 4%;
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    border-bottom: 1px solid #444;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}
.dev-group { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; flex-shrink: 0; }
.dev-label { color: var(--col-grey); font-weight: 700; text-transform: uppercase; margin-right: 6px; font-size: 0.7rem; white-space: nowrap; }
.dev-btn {
    background: #444; border: 1px solid #555; color: #ddd; padding: 4px 8px; cursor: pointer; border-radius: 4px; font-size: 0.7rem; transition: all 0.2s;
}
.dev-group.dev-readout {
    margin-left: auto;
    color: #fff;
    gap: 0.35rem;
    white-space: nowrap;
}
.dev-size-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px 10px;
    border-radius: 999px;
    border: 1px solid rgba(255,255,255,0.25);
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    color: #fff;
    background: rgba(255,255,255,0.08);
    white-space: nowrap;
}
.dev-btn:hover { background: #666; color: #fff; }
.dev-btn.active { background: var(--col-magenta); border-color: var(--col-magenta); color: #fff; }

/* Spacing debug overlay */
body.spacing-debug * {
    outline: 1px dashed rgba(0, 128, 255, 0.35);
    outline-offset: -1px;
}
body.spacing-debug .about-hero,
body.spacing-debug .about-container,
body.spacing-debug .cell-bio,
body.spacing-debug .cell-photo,
body.spacing-debug .cell-skills,
body.spacing-debug .mini-stats,
body.spacing-debug .skills-list,
body.spacing-debug .bio-stack {
    box-shadow: inset 0 0 0 2px rgba(0, 200, 120, 0.25), 0 0 0 2px rgba(255, 165, 0, 0.25);
}
body.spacing-debug .stat-divider {
    background: rgba(255, 99, 71, 0.8);
    box-shadow: 0 0 0 2px rgba(255, 99, 71, 0.35);
}
body.spacing-debug .mini-stats { outline: 1px dashed rgba(128, 0, 255, 0.35); }

/* Measurement (Ruler) Overlay */
body.measure-mode {
    cursor: crosshair;
}

body.measure-mode .measure-target {
    outline: 1px dashed rgba(30, 58, 95, 0.4);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35), 0 0 0 4px rgba(199, 58, 164, 0.18);
    transition: box-shadow 0.2s ease, outline-color 0.2s ease;
    position: relative;
}

body.measure-mode .measure-target:hover {
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.65), 0 0 18px rgba(255, 214, 0, 0.55);
}

#measurement-overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 8000;
    font-family: 'Inter', sans-serif;
}

.measure-outline {
    position: absolute;
    border: 1px solid rgba(30, 58, 95, 0.45);
    outline: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
    background: rgba(30, 58, 95, 0.04);
}

.measure-callout {
    position: absolute;
    min-width: 180px;
    max-width: 320px;
    background: rgba(5, 9, 16, 0.92);
    color: #f1f5f9;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.35);
    pointer-events: none;
    backdrop-filter: blur(14px);
}

.measure-name {
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #8ec5ff;
    margin-bottom: 0.2rem;
}

.measure-size {
    font-family: 'Courier Prime', monospace;
    font-size: 0.78rem;
    margin-bottom: 0.25rem;
}

.measure-meta {
    font-family: 'Courier Prime', monospace;
    font-size: 0.65rem;
    color: rgba(248, 250, 252, 0.8);
    line-height: 1.3;
}

/* Settings Tray */
.settings-panel {
    position: fixed;
    top: 60px;
    right: 4%;
    background: var(--card-bg);
    border: var(--border);
    box-shadow: var(--shadow-hover);
    border-radius: 10px;
    padding: 12px 14px;
    width: 260px;
    max-width: calc(100vw - 2rem);
    max-height: calc(100vh - 80px);
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-6px);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1500;
}
.settings-panel.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.settings-row { display: grid; grid-template-columns: 1fr 1.2fr auto; align-items: center; gap: 8px; }
.settings-label { font-size: 0.75rem; font-weight: 700; color: var(--text-sub); text-transform: uppercase; letter-spacing: 0.04em; }
.settings-value { font-family: 'Inter', sans-serif; font-weight: 700; color: var(--text-main); font-size: 0.9rem; }
.settings-row input[type="range"] { 
    width: 100%; 
    accent-color: #000;
}
body.dark-mode .settings-row input[type="range"] {
    accent-color: #fff;
}
.settings-theme-group {
    grid-column: 2 / -1;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}

.settings-theme-option {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: 1.6px solid rgba(30, 58, 95, 0.35);
    background: transparent;
    color: var(--text-main);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.settings-theme-option:hover {
    transform: translateY(-1px);
    border-color: var(--text-main);
}

.settings-theme-option.active {
    background: var(--text-main);
    color: var(--bg-color);
    border-color: var(--text-main);
}

body.dark-mode .settings-theme-option {
    border-color: rgba(255, 255, 255, 0.28);
}

/* =========================================
   2. NAVIGATION
   ========================================= */
.nav-sticky {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: var(--col-navy);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--col-navy);
    transition: all var(--transition);
}


.main-nav {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 1rem;
    padding: 0.75rem 2%;
    max-width: none;
    margin: 0;
}

.logo { display: flex; flex-direction: column; justify-content: center; min-width: 0; gap: 0.3rem; }
.logo h1 { font-family: var(--font-head); font-size: clamp(1.1rem, 2.2vw, 1.4rem); font-weight: 700; letter-spacing: -0.02em; color: var(--bg-color); line-height: 1.1; margin: 0; }
.logo-subtitle { font-family: 'Inter', sans-serif; font-size: clamp(0.65rem, 1.6vw, 0.75rem); color: var(--bg-color); opacity: 0.85; margin: 0; line-height: 1.1; }

.nav-stats {
    display: flex;
    gap: 1.5rem;
    align-items: center;
}
.nav-right {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    justify-self: end;
    margin-left: 0;
    border-left: 1px solid rgba(253, 251, 247, 0.4);
    padding-left: 1rem;
}
.nav-actions { display: flex; gap: 1rem; align-items: center; position: relative; }
.nav-text-link {
    border: 0;
    background: transparent;
    color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    cursor: pointer;
    padding: 0;
    transition: opacity 0.2s ease;
}
.nav-text-link:hover { opacity: 0.78; }
.nav-divider {
    color: rgba(253, 251, 247, 0.75);
    font-size: 0.9rem;
    line-height: 1;
}
.icon-tile {
    width: 62px;
    height: 62px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--hero-accent, var(--col-magenta));
    border-radius: 999px;
    background: transparent;
    color: var(--bg-color);
    font-size: 2rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    transition: transform 0.2s ease, opacity 0.2s ease, border-color 0.2s ease;
}
.icon-email {
    width: 62px;
    height: 62px;
    border-width: 2px;
    font-size: 0;
}
.icon-email svg {
    width: 28px;
    height: 28px;
    display: block;
    flex-shrink: 0;
}
.icon-settings {
    font-size: 2.4rem;
}
.icon-settings svg {
    width: 30px;
    height: 30px;
}
.icon-linkedin {
    text-decoration: none;
    color: var(--bg-color);
    font-family: 'Inter', sans-serif;
    font-weight: 800;
    font-size: 2rem;
    letter-spacing: -0.03em;
    text-transform: lowercase;
}
.icon-linkedin-text {
    display: inline-block;
    font-size: 1.35rem;
    line-height: 1;
    transform: translateY(-1px);
}

.email-dropdown {
    position: absolute;
    top: calc(100% + 0.45rem);
    right: 4.5rem;
    min-width: 250px;
    border-radius: 12px;
    border: 1px solid rgba(30, 58, 95, 0.22);
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(15, 23, 42, 0.18);
    padding: 0.35rem;
    display: none;
    z-index: 1200;
}

.email-dropdown.open {
    display: block;
}

.email-dropdown-item {
    width: 100%;
    border: 0;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    border-radius: 8px;
    padding: 0.6rem 0.7rem;
    text-align: left;
    cursor: pointer;
}

.email-dropdown-item:hover,
.email-dropdown-item:focus-visible {
    background: rgba(30, 58, 95, 0.08);
    outline: none;
}

.email-dropdown-address {
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    color: #1e3a5f;
}

.email-dropdown-copy {
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #4b5563;
}
.icon-tile:hover,
.icon-tile:active,
.icon-tile.clicked {
    color: var(--bg-color);
    transform: translateY(-2px);
    opacity: 0.75;
    border-color: var(--hero-accent, var(--col-magenta));
}

body.dark-mode .icon-tile,
body.dark-mode .icon-linkedin,
body.dark-mode .icon-linkedin-text {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.65);
}

body.dark-mode .email-dropdown {
    border-color: rgba(255, 255, 255, 0.2);
    background: #0f172a;
    box-shadow: 0 16px 38px rgba(0, 0, 0, 0.48);
}

body.dark-mode .email-dropdown-item:hover,
body.dark-mode .email-dropdown-item:focus-visible {
    background: rgba(255, 255, 255, 0.12);
}

body.dark-mode .email-dropdown-address,
body.dark-mode .email-dropdown-copy {
    color: #f1f5f9;
}

body.dark-mode .icon-tile:hover,
body.dark-mode .icon-tile:active,
body.dark-mode .icon-tile.clicked {
    color: #fff;
    border-color: #fff;
}
.stat-compact {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.stat-num {
    font-family: var(--font-head);
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 700;
    color: var(--text-sub);
    margin-top: 2px;
}

.toggle-btn {
    padding: 8px 16px; border-radius: 50px; border: 1px solid var(--text-main); background: transparent; color: var(--text-main);
    font-family: var(--font-body); font-size: 0.75rem; font-weight: 700; cursor: pointer; transition: all 0.2s;
    display: flex; align-items: center; gap: 6px;
}
.toggle-btn:hover { background: var(--text-main); color: var(--bg-color); transform: scale(1.05); }

/* =========================================
   3. ABOUT ME & ACCORDION SECTIONS
   ========================================= */

/* About Me Hero */
.about-hero {
    margin-bottom: 4rem;
    padding: 0;
    display: block;
    background: transparent;
    border: none;
    box-shadow: none;
    position: relative;
    transition: all 0.4s ease;
    max-width: 100%;
    overflow: visible;
    width: 100%;
}
.about-hero::before,
.about-hero::after { content: none; }

/* Hero OS + Neural variant */
.hero-os {
    position: relative;
    border-radius: 0;
    overflow: visible;
    margin-bottom: 1.5rem;
    background: transparent;
    border: 0;
    box-shadow: none;
}

.hero-particles {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.22;
    pointer-events: none;
    z-index: 0;
}

.hero-logo-playground {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: visible;
    opacity: 0.66;
}

.hero-logo-chip {
    position: absolute;
    width: clamp(36px, 3.9vw, 58px);
    height: clamp(36px, 3.9vw, 58px);
    border-radius: 999px;
    border: 1.1px solid rgba(255, 255, 255, 0.38);
    background: linear-gradient(160deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0.08));
    box-shadow: 0 5px 14px rgba(30, 58, 95, 0.08);
    backdrop-filter: blur(2px);
    pointer-events: none;
    cursor: default;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    animation: logoDrift 6.4s ease-in-out infinite;
    transition: transform 0.2s ease;
    opacity: 0.22;
    --repel-x: 0px;
    --repel-y: 0px;
}

.hero-logo-chip img {
    width: 72%;
    height: 72%;
    object-fit: contain;
    filter: saturate(0.82) drop-shadow(0 1px 2px rgba(30, 58, 95, 0.12));
}

.hero-logo-chip.is-popped {
    animation: logoPop 0.36s ease;
}

.hero-logo-chip.tone-magenta { border-color: color-mix(in srgb, var(--col-magenta) 55%, white); }
.hero-logo-chip.tone-red { border-color: color-mix(in srgb, var(--col-red) 55%, white); }
.hero-logo-chip.tone-orange { border-color: color-mix(in srgb, var(--col-orange) 55%, white); }
.hero-logo-chip.tone-green { border-color: color-mix(in srgb, var(--col-green) 55%, white); }
.hero-logo-chip.tone-teal { border-color: color-mix(in srgb, var(--col-teal) 55%, white); }

.hero-logo-sparkle {
    position: absolute;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: calc(50% - 4px);
    top: calc(50% - 4px);
    opacity: 1;
    pointer-events: none;
    animation: logoSparkleBurst 0.68s ease forwards;
}

@keyframes logoDrift {
    0%, 100% { transform: translate3d(var(--repel-x), var(--repel-y), 0); }
    50% { transform: translate3d(var(--repel-x), calc(var(--repel-y) - var(--float-shift, 10px)), 0); }
}

@keyframes logoPop {
    0% { transform: translate3d(var(--repel-x), var(--repel-y), 0) scale(1); }
    45% { transform: translate3d(var(--repel-x), var(--repel-y), 0) scale(1.12); }
    100% { transform: translate3d(var(--repel-x), var(--repel-y), 0) scale(1); }
}

@keyframes logoSparkleBurst {
    0% { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
    100% { transform: translate3d(var(--dx), var(--dy), 0) scale(0.3); opacity: 0; }
}

@media (max-width: 780px) {
    .hero-logo-chip:nth-child(n+16) {
        display: none;
    }
}

.hero-os-window {
    position: relative;
    z-index: 2;
    padding: 0;
}

.hero-os-content {
    display: flex;
    flex-direction: column;
    gap: clamp(1.1rem, 2.2vw, 1.8rem);
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    align-items: stretch;
    width: 100%;
}

.hero-top {
    display: grid;
    grid-template-columns: minmax(0, 1.62fr) minmax(200px, 1fr);
    align-items: start;
    gap: clamp(0.5rem, 1.1vw, 0.85rem);
    width: 100%;
}

.hero-title {
    font-family: var(--font-head);
    color: var(--text-main);
    font-size: clamp(2rem, 3.2vw, 2.75rem);
    line-height: 1.08;
    margin: 0 0 0.7rem 0;
    text-wrap: balance;
}

.hero-title-line {
    display: inline;
}

.hero-title-break {
    display: none;
}

.hero-title-emph {
    font-family: 'Inter', sans-serif;
    font-weight: 900;
    color: var(--hero-accent, var(--col-magenta));
    white-space: nowrap;
}

.hero-description {
    font-family: var(--font-body);
    color: var(--text-sub);
    max-width: 46ch;
    margin-bottom: 1rem;
    text-wrap: pretty;
}

.hero-description strong {
    color: var(--text-main);
}

.hero-actions {
    display: flex;
    gap: 0.65rem;
    flex-wrap: wrap;
}

.hero-actions .hero-btn {
    min-width: 172px;
}

.hero-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    padding: 0.64rem 1.1rem;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.86rem;
    letter-spacing: 0.01em;
    text-decoration: none;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.hero-btn-linkedin {
    min-width: 46px !important;
    width: 46px;
    height: 46px;
    padding: 0;
    font-size: 1.25rem;
    line-height: 1;
    font-weight: 800;
    text-transform: lowercase;
}

.hero-btn-linkedin .linkedin-short {
    font-size: 1.6rem;
    line-height: 1;
}

.linkedin-long {
    display: none;
}

.hero-btn-primary {
    border: 1px solid var(--hero-accent, var(--col-magenta));
    color: #fff;
    background: var(--hero-accent, var(--col-magenta));
}

.hero-btn-primary:hover {
    background: var(--hero-accent-dark, var(--col-red));
    border-color: var(--hero-accent-dark, var(--col-red));
}

.hero-btn-secondary {
    border: 1px solid rgba(30, 58, 95, 0.35);
    color: var(--text-main);
    background: rgba(253, 251, 247, 0.92);
}

.hero-btn-secondary:hover {
    background: rgba(30,58,95,0.08);
}

.hero-btn-secondary.hero-btn-resume {
    border-color: var(--hero-accent-resume, var(--col-orange));
    background: var(--hero-accent-resume, var(--col-orange));
    color: #fff;
}

.hero-btn-secondary.hero-btn-resume:hover {
    border-color: var(--hero-accent-resume-dark, #c8822f);
    background: var(--hero-accent-resume-dark, #c8822f);
}

.hero-btn-secondary.hero-btn-linkedin {
    border-color: var(--hero-accent-linkedin, var(--col-teal));
    background: var(--hero-accent-linkedin, var(--col-teal));
    color: #fff;
}

.hero-btn-secondary.hero-btn-linkedin:hover {
    border-color: var(--hero-accent-linkedin-dark, #008080);
    background: var(--hero-accent-linkedin-dark, #008080);
}

.hero-photo-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(30, 58, 95, 0.2);
    min-height: 210px;
    background: rgba(30, 58, 95, 0.08);
}

.hero-photo {
    width: 100%;
    height: 100%;
    min-height: 210px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: clamp(2.6rem, 5vw, 3.8rem);
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #2f4b72, #1e3a5f 55%, #4e3a7f);
}

.hero-photo picture {
    width: 100%;
    height: 100%;
    display: block;
}

.hero-photo picture > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

body.layout-centered .hero-photo-card {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

body.layout-centered .hero-photo {
    border-radius: 50%;
    background-position: center;
}

.hero-pill-stack {
    display: flex;
    flex-wrap: wrap;
    gap: 0.7rem;
}
/* Center pills when only two are present */
.hero-pill-stack:has(.hero-skill-pill:nth-child(2)):not(:has(.hero-skill-pill:nth-child(3))) {
    justify-content: center;
}

.hero-skill-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.55rem;
    min-width: 148px;
    flex: 1 1 148px;
    border-radius: 16px;
    border: 1px solid rgba(30, 58, 95, 0.2);
    background: linear-gradient(90deg, rgba(253, 251, 247, 0.98), rgba(247, 244, 239, 0.98));
    box-shadow: 0 8px 24px rgba(30, 58, 95, 0.08);
    position: relative;
    z-index: 1;
    color: var(--text-main);
    padding: 0.88rem 1.15rem;
    font-family: 'Inter', sans-serif;
    text-transform: none;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.hero-skill-pill > span:first-child {
    min-width: 0;
    white-space: nowrap;
}

.hero-skill-dot {
    width: 12px;
    height: 12px;
    border-radius: 999px;
    box-shadow: 0 0 14px currentColor;
    flex-shrink: 0;
}

.hero-skill-dot.dot-red { color: #ef4444; background: #ef4444; }
.hero-skill-dot.dot-blue { color: #3b82f6; background: #3b82f6; }
.hero-skill-dot.dot-pink { color: #ec4899; background: #ec4899; }
.hero-skill-dot.dot-magenta { color: var(--col-magenta); background: var(--col-magenta); }
.hero-skill-dot.dot-orange { color: var(--col-orange); background: var(--col-orange); }
.hero-skill-dot.dot-teal { color: var(--col-teal); background: var(--col-teal); }

@media (max-width: 760px) {
    .hero-os-content {
        padding: 0;
        gap: 1rem;
    }

    .hero-skill-pill {
        flex: 1 1 220px;
    }
}

@media (max-width: 560px) {
    .hero-title {
        font-size: clamp(2rem, 8.1vw, 2.45rem);
        max-width: none;
        line-height: 1.08;
    }

    .hero-title-line {
        display: block;
        text-align: center;
    }

    .hero-title-line-1 {
        font-size: 0.88em;
    }

    .hero-copy,
    .hero-copy-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-description {
        text-align: center;
    }

    .hero-photo-card {
        width: min(188px, 48vw);
        height: min(188px, 48vw);
    }

    .hero-actions .hero-btn {
        min-width: 100%;
    }

    .hero-actions .hero-btn-linkedin {
        min-width: 100% !important;
        width: 100%;
        justify-content: center;
        text-transform: none;
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.2;
        padding: 0.64rem 1.1rem;
        height: auto;
    }

    .linkedin-short {
        display: none;
    }

    .linkedin-long {
        display: inline;
    }

    .hero-pill-stack {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .hero-pill-stack .hero-skill-pill:nth-child(3) {
        grid-column: auto;
    }

    .hero-skill-pill {
        flex: 0 0 auto;
        letter-spacing: 0.04em;
    }

    .hero-skill-pill > span:first-child {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }

    .hero-skill-pill {
        flex: 1 1 100%;
    }
}

@media (max-width: 1100px) and (min-width: 841px) {
    .hero-top {
        grid-template-columns: minmax(0, 1.35fr) minmax(190px, 0.9fr);
        gap: 0.7rem;
    }

    .hero-photo-card,
    .hero-photo {
        min-height: 190px;
    }

    .hero-title {
        font-size: clamp(1.85rem, 3.6vw, 2.45rem);
    }
}

@media (max-width: 840px) {
    .hero-top {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 1.25rem;
    }

    .hero-copy {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-copy-group {
        text-align: center;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-photo-card {
        order: -1;
        width: min(230px, 58vw);
        height: min(230px, 58vw);
        min-height: 0;
        overflow: hidden;
    }

    .hero-photo {
        width: 100%;
        height: 100%;
        min-height: 0;
    }

    body.layout-centered .hero-photo-card,
    body.layout-centered .hero-photo {
        border-radius: 50%;
    }

    body.layout-classic .hero-photo-card,
    body.layout-classic .hero-photo {
        border-radius: 18px;
    }

    .hero-title {
        font-size: clamp(2rem, 5.2vw, 2.55rem);
        max-width: none;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }

    .hero-title-line {
        display: block;
        text-align: center;
    }

    .hero-description {
        margin-left: auto;
        margin-right: auto;
        max-width: 42ch;
        text-align: center;
    }

    .hero-actions {
        justify-content: center;
        gap: 0.8rem;
    }

    .hero-actions .hero-btn {
        min-width: 168px;
    }

    .hero-pill-stack {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        align-items: stretch;
        gap: 0.8rem;
        width: 100%;
    }

    .hero-skill-pill {
        width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }

    .hero-pill-stack .hero-skill-pill:nth-child(3) {
        grid-column: 1 / -1;
    }

    .hero-os-content {
        align-items: center;
    }
}

@media (max-width: 560px) {
    .hero-title {
        font-size: clamp(2rem, 8.1vw, 2.45rem);
        line-height: 1.08;
    }

    .hero-copy,
    .hero-copy-group {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .hero-title-line {
        display: block;
        text-align: center;
    }

    .hero-description {
        text-align: center;
    }

    .hero-photo-card {
        width: min(188px, 48vw);
        height: min(188px, 48vw);
    }

    .hero-actions .hero-btn {
        min-width: 100%;
    }

    .hero-actions .hero-btn-linkedin {
        min-width: 100% !important;
        width: 100%;
        justify-content: center;
        text-transform: none;
        font-size: 0.86rem;
        font-weight: 700;
        line-height: 1.2;
        padding: 0.64rem 1.1rem;
        height: auto;
    }

    .linkedin-short {
        display: none;
    }

    .linkedin-long {
        display: inline;
    }

    .hero-pill-stack {
        grid-template-columns: 1fr;
        gap: 0.7rem;
    }

    .hero-pill-stack .hero-skill-pill:nth-child(3) {
        grid-column: auto;
    }

    .hero-skill-pill {
        flex: 0 0 auto;
        letter-spacing: 0.04em;
    }

    .hero-skill-pill > span:first-child {
        white-space: normal;
        overflow-wrap: anywhere;
        text-align: left;
    }
}

body.dark-mode .hero-os {
    background: transparent;
    border-color: transparent;
}

body.dark-mode .hero-os-content {
    background: transparent;
    border-color: transparent;
}

body.dark-mode .hero-title {
    color: #f1f5f9;
}

body.dark-mode .hero-title-emph {
    color: #f9a8d4;
}

body.dark-mode .hero-description,
body.dark-mode .hero-skill-pill {
    color: #d1d5db;
}

body.dark-mode .hero-description strong {
    color: #ffffff;
}

body.dark-mode .hero-btn-secondary {
    border-color: rgba(226,232,240,0.4);
    color: #f8fafc;
    background: rgba(15, 23, 42, 0.7);
}

body.dark-mode .hero-btn-secondary:hover {
    background: rgba(255,255,255,0.1);
}

body.dark-mode .hero-btn-secondary.hero-btn-resume,
body.dark-mode .hero-btn-secondary.hero-btn-linkedin {
    color: #fff;
}

body.dark-mode .hero-skill-pill {
    border-color: rgba(255,255,255,0.12);
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.98), rgba(17, 24, 39, 0.98));
}
.photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-head);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    object-fit: cover;
    object-position: center;
}

@media (min-width: 1431px) {
    .style-bento .skills-list {
        flex-wrap: nowrap;
        justify-content: center;
    }
    .style-bento .skills-label {
        font-family: var(--font-head);
        font-size: 1.15rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.14em;
        color: var(--text-sub);
        margin-bottom: 0.5rem;
    }
}


/* =========================================
   ABOUT ME HERO - NEW LAYOUT ENGINE
   ========================================= */
/* Shared Elements */
.bio-headline { font-family: var(--font-head); margin-bottom: 1rem; line-height: 1.1; color: var(--text-main); }
.bio-headline .hl-line-1 { display: block; white-space: nowrap; }
.bio-headline .hl-line-2 { display: block; font-size: 1.15em; }
.bio-headline .hl-line-3 { display: block; font-size: 1.15em; }
.highlight { color: var(--highlight-color, var(--col-magenta)); }
.bio-body { font-size: 1rem; color: var(--text-sub); margin-bottom: 1rem; max-width: 60ch; }
.bio-stack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0.75rem;
    max-width: 58ch;
    align-self: flex-start;
}

/* Baseline desktop text layout (matches 1123px reference) */
@media (min-width: 1123px) {
    .bio-headline {
        font-size: clamp(2.6rem, 3vw, 3.4rem);
        line-height: 1.08;
    }
    .bio-body {
        font-size: 1.03rem;
        line-height: 1.65;
        max-width: 64ch;
    }
    .mini-stats {
        padding-top: 1.25rem;
    }
}
.mini-stats {
    display: flex;
    gap: clamp(1.5rem, 5vw, 3.5rem);
    align-items: center;
    padding-top: 0.75rem;
    margin-top: 0.75rem;
    border-top: 1px solid rgba(0,0,0,0.08);
    width: 100%;
    max-width: 58ch;
    align-self: flex-start;
    justify-content: space-between;
}
.mini-stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; justify-content: center; }
.ms-val { font-family: var(--font-head); font-size: clamp(3rem, 6vw, 4.8rem); font-weight: 800; color: var(--text-main); line-height: 1; letter-spacing: -0.02em; margin-top: 0.25rem; }
.ms-val.stat-dynamic { color: var(--stat-color, var(--text-main)); }
.ms-label { display: flex; flex-direction: column; align-items: center; gap: 0.3rem; margin-top: 0.85rem; }
.ms-subtext { font-family: var(--font-head); font-size: 0.8rem; text-transform: none; letter-spacing: 0.01em; color: var(--text-sub); }
.stat-divider { width: 1px; height: 32px; background: rgba(0,0,0,0.15); opacity: 0.6; }
.stat-pill { display: inline-block; padding: 6px 16px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; background: var(--col-navy); color: #fff; white-space: nowrap; }
.skills-list { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; max-width: 100%; overflow: hidden; }
.skills-label {
    font-family: var(--font-body);
    font-weight: 700;
    font-size: clamp(1.45rem, 2.6vw, 1.9rem);
    color: var(--text-main);
    text-transform: none;
    display: block;
    margin-bottom: 0.2rem;
    margin-top: -0.25rem;
    text-align: center;
    letter-spacing: 0;
}

@media (max-width: 2000px) {
    .style-bento .skills-label {
        font-family: var(--font-body);
        font-size: clamp(1.2rem, 2.2vw, 1.6rem);
        font-weight: 700;
        text-transform: none;
        letter-spacing: 0;
        color: var(--text-main);
    }
}

/* --- STYLE: BENTO GRID --- */
.style-bento .about-container {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    grid-template-rows: minmax(280px, auto) auto;
    gap: 1.5rem;
    max-width: 100%;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
    align-items: start;
    position: relative;
}

@media (max-width: 1280px) {
    .style-bento .about-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .style-bento .cell-photo {
        grid-column: 1;
        grid-row: 1;
        max-width: 400px;
        margin: 0 auto;
    }
    .style-bento .cell-bio {
        grid-column: 1;
        grid-row: 2;
    }
    .style-bento .cell-skills {
        grid-column: 1;
        grid-row: 3;
    }
}

@media (max-width: 1093px) {
    .style-bento .about-container {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto auto;
    }
    .style-bento .cell-photo { 
        grid-column: 1;
        grid-row: 1;
        height: 150px;
        width: 150px;
        margin: 0 auto 0.5rem;
        border-radius: 50%;
        min-height: auto;
        border: none;
        box-shadow: none;
        max-width: 150px;
    }
    .style-bento .cell-photo .photo-placeholder {
        font-size: 3rem;
    }
    .style-bento .cell-bio {
        grid-column: 1;
        grid-row: 2;
        padding: 1.5rem 0 0;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
    .style-bento .bio-headline {
        text-align: center;
    }
    .style-bento .bio-body {
        margin-left: auto;
        margin-right: auto;
        text-align: center;
    }
    .style-bento .mini-stats {
        justify-content: center;
        border-top: none;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        gap: 1.25rem;
    }
    .style-bento .cell-skills {
        grid-column: 1;
        grid-row: 3;
        margin-top: 0.6rem;
        padding-top: 0.75rem;
    }
    .style-bento .skills-list {
        justify-content: center;
    }
}
.style-bento .cell-bio {
    grid-column: 1;
    grid-row: span 2;
    background: transparent;
    border: none;
    border-radius: 24px;
    padding: clamp(2.25rem, 4vw, 2.75rem);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-shadow: none;
    max-width: 100%;
    width: 100%;
    overflow: visible;
    box-sizing: border-box;
    align-self: start;
}
.style-bento .bio-headline { font-size: clamp(2rem, 4vw, 2.8rem); }
.style-bento .cell-photo {
    grid-column: 2;
    grid-row: 1;
    min-height: 280px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow);
    max-width: 100%;
    box-sizing: border-box;
    width: 100%;
    align-self: start;
}
.style-bento .cell-photo .photo-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea, #764ba2);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: clamp(2.8rem, 6vw, 3.6rem);
}
.style-bento .cell-skills {
    grid-column: 2;
    grid-row: 2;
    background: transparent;
    border: none;
    border-radius: 0;
    padding-top: 0.75rem;
    padding-bottom: 1.25rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    margin-top: 0;
    border-top: 1px solid rgba(0,0,0,0.12);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    flex-shrink: 0;
    min-height: 0;
    box-shadow: none;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    align-self: start;
}
.style-bento .skills-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem 1.35rem;
    justify-content: center;
    margin: 0.35rem 0 0 0;
    max-width: 100%;
    width: 100%;
}

@media (min-width: 1431px) {
    .style-bento .skills-list {
        flex-wrap: nowrap;
    }
}

@media (max-width: 1280px) {
    .style-bento .skills-list {
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .style-bento .skills-list {
        flex-wrap: wrap;
    }
}
.style-bento .skills-list .role-pill {
    padding: 8px 20px;
    font-size: 0.88rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border-radius: 999px;
    background: var(--col-navy);
    color: #fff;
}

.pill-navy {
    background: var(--col-navy);
    color: #fff;
}

@media (max-width: 768px) {
    .style-bento .about-container { 
        grid-template-columns: 1fr; 
        grid-template-rows: auto auto auto;
    }
}

/* =========================================
   EMBED SHOWCASE CAROUSEL
   ========================================= */
.embed-showcase {
    margin: 0 auto 2rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
}
body.dark-mode .embed-showcase {
    background: rgba(37, 37, 37, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}
.embed-showcase-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 1rem;
}
.embed-showcase-title {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1.1;
}
.embed-showcase-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--text-sub);
    opacity: 0.8;
}
.embed-track-wrap {
    overflow: hidden;
    border-radius: 12px;
    width: 100%;
    max-width: min(100%, 920px);
    margin: 0 auto;
}
.embed-track {
    display: flex;
    gap: 1rem;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    will-change: transform;
}
.embed-slide {
    flex: 0 0 100%;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    transition: opacity 0.28s ease, transform 0.28s ease;
}

.embed-slide .embed-frame {
    transform: scale(0.97);
    opacity: 0.84;
    transition: transform 0.28s ease, opacity 0.28s ease, box-shadow 0.28s ease;
}

.embed-slide.is-active .embed-frame {
    transform: scale(1);
    opacity: 1;
    box-shadow: 0 10px 28px rgba(30, 58, 95, 0.16);
}
.embed-frame {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.06), rgba(30, 58, 95, 0.02));
    border: 1px solid rgba(30, 58, 95, 0.12);
    position: relative;
}
.embed-frame iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}
.embed-frame-link {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
}
.embed-frame-link img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.embed-image-badge {
    position: absolute;
    right: 0.75rem;
    bottom: 0.75rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.74rem;
    font-weight: 700;
    color: #fff;
    background: rgba(30, 58, 95, 0.86);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 999px;
    padding: 0.35rem 0.7rem;
    letter-spacing: 0.01em;
}
.embed-placeholder {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    color: var(--text-sub);
    opacity: 0.5;
}
.embed-placeholder-icon {
    font-size: 2.2rem;
    line-height: 1;
}
.embed-placeholder-label {
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.embed-caption {
    font-family: 'Inter', sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-sub);
    text-align: center;
    margin: 0;
}
.embed-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 0.9rem;
}
.embed-dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    border: 2px solid rgba(30, 58, 95, 0.35);
    background: transparent;
    padding: 0;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, transform 0.2s;
}
.embed-dot.active {
    background: var(--text-main);
    border-color: var(--text-main);
    transform: scale(1.2);
}

@media (min-width: 1100px) {
    .embed-track-wrap {
        max-width: min(100%, 1140px);
    }

    .embed-slide {
        flex: 0 0 68%;
    }
}
body.dark-mode .embed-dot {
    border-color: rgba(255,255,255,0.3);
}
body.dark-mode .embed-dot.active {
    background: #e0e0e0;
    border-color: #e0e0e0;
}

/* Notable Accomplishments Strip */
.notable-accomplishments {
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid rgba(0,0,0,0.07);
}
.notable-acc-label {
    font-family: 'Inter', sans-serif;
    font-size: 1.08rem;
    font-weight: 700;
    color: var(--text-main);
    letter-spacing: 0;
    text-transform: none;
    margin-bottom: 0.55rem;
}
.notable-acc-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
}
.notable-acc-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-sub);
    line-height: 1.3;
    white-space: normal;
}
.notable-acc-item span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-sub);
    line-height: 1.3;
}
.notable-acc-item span strong {
    font-weight: 600;
    color: var(--text-main);
}
.notable-acc-item span em,
.notable-acc-item span .acc-sep {
    font-weight: 400;
    font-style: normal;
    color: var(--text-sub);
    font-size: 0.9rem;
}
.acc-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
    color: var(--text-sub);
    opacity: 0.7;
}
body.dark-mode .notable-accomplishments {
    border-top-color: rgba(255,255,255,0.08);
}

/* Inline scroll-to-top button (same shape as role-btn) */
.scroll-top-inline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.42rem;
    white-space: nowrap;
}
.scroll-top-arrow {
    display: inline-block;
    transition: transform 0.22s ease, opacity 0.22s ease;
}
.scroll-top-inline:hover .scroll-top-arrow {
    transform: translateY(-2px);
    opacity: 0.9;
}

/* Footer copyright */
.footer-copy {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.8);
    flex: 1;
    text-align: center;
}

/* Current Roles Section */
.current-roles {
    margin: 0 auto 2rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
    box-shadow: none;
}

.roles-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.8rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding-bottom: 0.55rem;
}

.roles-title {
    font-family: var(--font-head);
    font-size: calc(clamp(1.4rem, 3vw, 2rem) * var(--text-scale-head));
    letter-spacing: -0.02em;
    color: var(--text-main);
    text-wrap: balance;
}

.roles-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.7rem;
}

.role-item {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.78rem 0.95rem;
    border-radius: 12px;
    border: 1px solid rgba(30, 58, 95, 0.08);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: none;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.role-item:hover {
    transform: translateY(-1px);
    border-color: var(--text-main);
    box-shadow: none;
}

.role-item.role-static {
    cursor: default;
}

.role-indicator {
    width: 6px;
    height: 42px;
    border-radius: 999px;
    flex-shrink: 0;
    margin-top: 0;
    box-shadow: none;
}

.role-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.2rem;
}

.role-content h4 {
    font-family: 'Inter', sans-serif;
    font-size: 1.08rem;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.38rem;
    line-height: 1.2;
    margin: 0;
    color: var(--text-main);
}
.role-content .role-org.role-org-nowrap {
    white-space: nowrap;
}
.role-content .role-chapter {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.72rem;
    border-radius: 999px;
    background: rgba(199, 58, 164, 0.08);
    color: var(--col-magenta);
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    margin: 0;
    flex-shrink: 0;
    vertical-align: baseline;
}

.role-content .role-org {
    font-size: 0.95rem;
    line-height: 1.35;
}

.role-content .role-org {
    font-size: 0.95rem;
}
.role-content .role-meta {
    display: inline-block;
    margin: 0;
    font-size: 0.79rem;
    color: var(--text-sub);
    font-weight: 400;
    letter-spacing: 0.02em;
    line-height: 1.35;
}
.roles-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}
.role-pill {
    padding: 0.5rem 1.2rem;
    border-radius: 50px;
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    display: inline-block;
    white-space: nowrap;
}
.pill-magenta { background: var(--col-magenta); }
.pill-red { background: var(--col-red); }
.pill-orange { background: var(--col-orange); }
.pill-green { background: var(--col-green); }
.pill-teal { background: var(--col-teal); }
.roles-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}
.role-btn {
    padding: 0.72rem 1.5rem;
    border-radius: 8px;
    border: 2px solid var(--text-main);
    background: transparent;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
}
.role-btn:hover {
    background: var(--text-main);
    color: var(--bg-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Accordion Sections */
.accordion-section {
    margin-bottom: 1.5rem;
}
.accordion-header {
    width: 100%;
    background: var(--card-bg);
    border: var(--border);
    border-radius: 10px;
    padding: 1.5rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    text-align: left;
}
.accordion-titles {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
    flex: 1;
}
.accordion-header.pill-style {
    border-radius: 30px;
    background: var(--col-red);
    border: none;
    color: #fff;
    padding: 0.8rem 1.5rem;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
#section-academic .accordion-header.pill-style {
    background: linear-gradient(135deg, var(--col-red), #d63447);
}
#section-papers .accordion-header.pill-style {
    background: linear-gradient(135deg, var(--col-orange), #ffd93d);
}
#section-creative .accordion-header.pill-style {
    background: linear-gradient(135deg, var(--col-green), var(--col-teal));
}
#section-academic .accordion-header.pill-style:hover {
    background: linear-gradient(135deg, #b91d47, #a01838);
}
#section-papers .accordion-header.pill-style:hover {
    background: linear-gradient(135deg, #c8822f, #e9a34d);
}
#section-creative .accordion-header.pill-style:hover {
    background: linear-gradient(135deg, #5a8c47, #00a8a8);
}
.accordion-header.pill-style .accordion-title { color: #fff; }
.accordion-icon {
    font-size: 1.2rem;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.accordion-header:hover {
    background: rgba(0,0,0,0.02);
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}
.accordion-titles {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    align-items: flex-start;
    flex: 1;
}
.accordion-title {
    font-family: var(--font-head);
    font-size: calc(1.6rem * var(--text-scale-head));
    color: var(--text-main);
    font-weight: 700;
}
.accordion-tag { display: none; }
.accordion-icon {
    font-size: 1.2rem;
    color: var(--text-sub);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.accordion-content {
    max-height: none;
    overflow: visible;
    opacity: 1;
    padding: 2rem 0 0;
}
.accordion-section.open .accordion-content { padding: 2rem 0 0; }

/* Nested Accordions */
.nested-accordion {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.nested-item {
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(12px) saturate(1.2);
    -webkit-backdrop-filter: blur(12px) saturate(1.2);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 10px;
    overflow: hidden;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    scroll-margin-top: 7rem;
    overflow-anchor: none;
}

.nested-item:hover {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.nested-item.open {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15);
}

body.dark-mode .nested-item {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

body.dark-mode .nested-item:hover {
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

body.dark-mode .nested-item.open {
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(16px) saturate(1.4);
    -webkit-backdrop-filter: blur(16px) saturate(1.4);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.6);
}
#section-academic .nested-item { --nested-color: var(--col-red); }
#section-papers .nested-item { --nested-color: var(--col-orange); }
#section-creative .nested-item { --nested-color: var(--col-green); }
.nested-header {
    width: 100%;
    background: var(--card-bg);
    border: none;
    padding: 0;
    text-align: left;
}
.nested-header .inner {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border: var(--border);
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nested-header .inner:hover {
    box-shadow: var(--shadow);
    transform: translateY(-1px);
}
.nested-indicator {
    width: 6px;
    height: 100%;
    min-height: 50px;
    border-radius: 3px;
    flex-shrink: 0;
    background: var(--nested-color, var(--text-sub));
    transition: all 0.3s ease;
}
.nested-item.open .nested-indicator {
    background: linear-gradient(180deg, var(--nested-color, var(--text-sub)), transparent);
}
.nested-left {
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
}
.nested-role-title {
    font-family: 'Inter', sans-serif;
    font-size: calc(1.2rem * var(--text-scale-head));
    font-weight: 700;
    margin: 0;
    color: var(--nested-color-dark, var(--text-main));
    text-wrap: balance;
}

#section-academic .nested-role-title {
    color: var(--nested-color-dark, #b91d47);
}

#section-papers .nested-role-title {
    color: var(--nested-color-dark, #c8822f);
}

#section-creative .nested-role-title {
    color: var(--nested-color-dark, #5a8c47);
}
.nested-role-meta {
    font-family: 'Merriweather', serif;
    font-size: calc(0.85rem * var(--text-scale-body));
    font-weight: 600;
    color: var(--text-main);
    margin: 0;
    line-height: 1.65;
}
.nested-term {
    display: inline-block;
    font-weight: 400;
    color: var(--text-sub);
}
.nested-meta {
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-sub);
    margin: 0;
}
.nested-title {
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.3;
    color: var(--text-main);
    margin: 0;
}
.nested-icon {
    font-size: 1.2rem;
    color: var(--text-sub);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    margin-left: auto;
}
.nested-content {
    max-height: 0;
    overflow: hidden;
    overflow-anchor: none;
    opacity: 0;
    padding: 0 2rem;
    transition: max-height 0.4s ease, opacity 0.3s ease;
}
.nested-item.open { box-shadow: var(--shadow-hover); }
.nested-item.open .nested-content {
    max-height: 2000px;
    opacity: 1;
    padding: 0 2rem 2rem 2rem;
}
.nested-item.open .nested-icon { transform: rotate(180deg); }

.course-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin-top: 1rem;
}
.course-item {
    border: var(--border);
    border-radius: 10px;
    background: var(--card-bg);
    overflow: hidden;
    border-left: 4px solid var(--nested-color, var(--text-main));
    transition: all 0.3s ease;
    scroll-margin-top: 7.5rem;
    overflow-anchor: none;
}
.course-header {
    width: 100%;
    border: none;
    background: transparent;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', sans-serif;
}
.course-header:hover {
    background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.05));
}
.course-title {
    font-weight: 700;
    color: var(--text-main);
    font-size: calc(1rem * var(--text-scale-head));
    margin-bottom: 0.2rem;
}
.course-meta {
    font-size: calc(0.75rem * var(--text-scale-body));
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-sub);
    font-family: 'Merriweather', serif;
}
.course-icon {
    font-size: 1.5rem;
    color: var(--text-sub);
    transition: color 0.3s ease;
}
.course-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.25rem;
    transition: max-height 0.4s ease, padding 0.4s ease;
}
.course-item.open {
    box-shadow: var(--shadow);
}
.course-item.open .course-content {
    max-height: 1600px;
    padding: 0 1.25rem 1.25rem 1.25rem;
}
.course-item.open .course-icon {
    color: var(--text-main);
}

/* Nested headers match Current Roles style */
.nested-header .inner {
    display: flex;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: var(--card-bg);
    border: var(--border);
    border-radius: 8px;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nested-header .inner:hover {
    box-shadow: var(--shadow-hover);
    transform: translateY(-2px);
    border-color: transparent;
    background: linear-gradient(180deg, var(--card-bg) 0%, color-mix(in sRGB, var(--nested-color, var(--text-sub)), var(--card-bg) 88%) 100%);
}

/* Mobile: center pill titles */
body.device-phone .accordion-header.pill-style { justify-content: center; }
body.device-phone .accordion-titles { align-items: center; }
body.device-phone .accordion-title { text-align: center; }

/* Notable Classes */
.notable-classes {
    margin-top: 0;
    padding-top: 0.35rem;
    padding-bottom: 1.25rem;
}
.classes-sections {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
    align-items: center;
}
.classes-sections .class-filter-btn:nth-child(1),
.classes-sections .class-filter-btn:nth-child(2) {
    white-space: nowrap;
}
.classes-sections .class-filter-btn:nth-child(3),
.classes-sections .class-filter-btn:nth-child(4) {
    white-space: nowrap;
}
.class-filter-btn {
    padding: 0.5rem 1.25rem;
    border: 2px solid var(--text-main);
    border-radius: 999px;
    background: var(--card-bg);
    opacity: 1;
    color: var(--text-main);
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}
.class-filter-btn:hover {
    background: var(--text-main);
    color: var(--bg-color);
}
.class-filter-btn.active {
    background: var(--text-main);
    color: var(--bg-color);
}

body.dark-mode .class-filter-btn {
    background: #252525;
    border-color: rgba(255, 255, 255, 0.34);
    color: #f1f5f9;
}

body.dark-mode .class-filter-btn:hover,
body.dark-mode .class-filter-btn.active {
    background: #f1f5f9;
    border-color: #f1f5f9;
    color: #0f172a;
}
.classes-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: start;
    gap: 1rem;
    margin-bottom: 0.75rem;
}
/* Psychology cards span full width */
.classes-grid .classes-full {
    grid-column: 1 / -1;
}
/* Multimedia + Research sit in one column each */
.classes-grid .classes-half {
    grid-column: span 1;
}
/* Smaller text for half-width cards */
.classes-half .class-code {
    font-size: 1.1rem;
}
.classes-half .class-title {
    font-size: 0.88rem;
}
.class-blurb {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 0.92rem;
}
/* Stack all on small screens */
@media (max-width: 540px) {
    .classes-grid {
        grid-template-columns: 1fr;
    }
    .classes-grid .classes-full,
    .classes-grid .classes-half {
        grid-column: 1 / -1;
    }
    .portfolio-link {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 760px) {
    .portfolio-link {
        grid-template-columns: 1fr;
    }
}
.class-card {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 12px;
    align-self: start;
    transition: all 0.3s ease;
    overflow: hidden;
}

.class-card:not(.open) {
    min-height: 92px;
}
.class-card.hidden {
    display: none;
}
.class-card-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.2rem;
    border: 0;
    background: transparent;
    cursor: pointer;
    text-align: left;
}

.class-card:not(.open) .class-card-header {
    min-height: 92px;
}
.class-card-header:hover {
    background: rgba(30,58,95,0.04);
}
.class-card-copy {
    min-width: 0;
}
.class-card-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.2rem;
    transition: max-height 0.3s ease, padding 0.3s ease;
}
.class-accordion-item.open .class-card-content {
    max-height: 360px;
    padding: 0 1.2rem 1.35rem;
}
.class-card-icon {
    font-size: 1.15rem;
    color: var(--text-sub);
    flex-shrink: 0;
}
.class-accordion-item.open .class-card-icon {
    color: var(--text-main);
}
.class-code {
    font-family: var(--font-head);
    font-size: calc(1.4rem * var(--text-scale-head));
    font-weight: 700;
    color: var(--text-main);
    margin-bottom: 0.15rem;
}
.class-title {
    font-family: var(--font-body);
    font-size: calc(1.05rem * var(--text-scale-body));
    font-weight: 600;
    color: var(--text-main);
    margin-bottom: 0.75rem;
}
.class-term {
    font-family: var(--font-body);
    font-size: calc(0.85rem * var(--text-scale-body));
    color: var(--text-sub);
}
.class-links-label {
    margin-top: 0.65rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-sub);
}
.class-links {
    margin-top: 0.45rem;
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
}
.class-link-icon {
    width: 2rem;
    height: 2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    border: 1px solid rgba(30,58,95,0.18);
    background: rgba(30,58,95,0.07);
    color: var(--text-main);
    text-decoration: none;
    font-size: 0.95rem;
    line-height: 1;
    transition: transform 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.class-link-icon svg {
    width: 1rem;
    height: 1rem;
    display: block;
}
.class-link-icon:hover {
    transform: translateY(-1px);
    background: rgba(30,58,95,0.14);
    border-color: rgba(30,58,95,0.35);
}
.class-link-note {
    margin-top: 0.6rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.82rem;
    color: var(--text-sub);
}
.portfolio-link {
    display: grid;
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 1rem;
    margin-top: 1.75rem;
    margin-bottom: 0;
    width: 100%;
}
.portfolio-link .role-btn {
    min-width: 0;
    width: 100%;
    white-space: nowrap;
    padding-left: 1rem;
    padding-right: 1rem;
    font-size: clamp(0.82rem, 1.6vw, 0.9rem);
    background: var(--col-navy);
    border-color: var(--col-navy);
    color: #fdfbf7;
}
.portfolio-link .scroll-top-inline {
    width: 100% !important;
}

.portfolio-link .role-btn:hover,
.portfolio-link .role-btn:focus-visible {
    background: #2b4a73;
    border-color: #2b4a73;
    color: #fdfbf7;
}

body.dark-mode .portfolio-link .role-btn {
    background: #fdfbf7;
    border-color: #fdfbf7;
    color: var(--col-navy);
}

body.dark-mode .portfolio-link .role-btn:hover,
body.dark-mode .portfolio-link .role-btn:focus-visible {
    background: #eae6df;
    border-color: #eae6df;
    color: var(--col-navy);
}

@media (max-width: 900px) {
    .nav-right {
        border-left-color: rgba(253, 251, 247, 0.5);
        padding-left: 0.75rem;
    }
}

#section-classes.accordion-section {
    margin-bottom: 0;
}
body.dark-mode .class-card {
    background: rgba(40, 40, 40, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.08);
}
body.dark-mode .class-card:hover {
    border-color: var(--text-main);
}

/* Footer */
.site-footer {
    --mind-accent: var(--hero-accent, #E20074);
    --mind-deep: var(--hero-accent, #E20074);
    --mind-accent-rgb: var(--hero-accent-rgb, 199,58,164);
    margin-top: 0;
    padding: 2rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    color: #fff;
    background:
        radial-gradient(circle at 20% 50%, rgba(255, 255, 255, 0.16) 0 4%, transparent 5%),
        radial-gradient(circle at 35% 50%, rgba(255, 255, 255, 0.14) 0 3.2%, transparent 4.2%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.16) 0 4.8%, transparent 5.8%),
        radial-gradient(circle at 65% 50%, rgba(255, 255, 255, 0.14) 0 3.2%, transparent 4.2%),
        radial-gradient(circle at 80% 50%, rgba(255, 255, 255, 0.16) 0 4%, transparent 5%),
        var(--mind-deep);
    overflow: hidden;
    position: relative;
}

.site-footer::before,
.site-footer::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
}

.site-footer::before {
    width: 360px;
    height: 360px;
    top: -180px;
    left: -120px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, 0.22) 39% 43%, rgba(255, 255, 255, 0) 44%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 52%, rgba(var(--mind-accent-rgb), 0.26) 53% 57%, rgba(255, 255, 255, 0) 58%);
}

.site-footer::after {
    width: 300px;
    height: 300px;
    right: -90px;
    bottom: -170px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 34%, rgba(255, 255, 255, 0.2) 35% 40%, rgba(255, 255, 255, 0) 41%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0) 50%, rgba(var(--mind-accent-rgb), 0.22) 51% 56%, rgba(255, 255, 255, 0) 57%);
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    position: relative;
    z-index: 1;
}

.footer-content::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(540px, 82vw);
    height: 1px;
    transform: translate(-50%, -50%);
    background: repeating-linear-gradient(
        to right,
        transparent 0 12px,
        rgba(var(--mind-accent-rgb), 0.38) 12px 22px
    );
    opacity: 0.72;
    pointer-events: none;
}

.footer-name {
    font-family: var(--font-head);
    font-weight: 700;
    color: #fff;
    position: relative;
    z-index: 1;
}

.site-footer .footer-copy {
    color: rgba(255, 255, 255, 0.9);
    margin-left: auto;
    text-align: right;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}

.site-footer .footer-extra {
    color: rgba(255, 255, 255, 0.92);
    text-align: right;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    font-size: 0.78rem;
}

.site-footer .footer-extra a {
    font-size: inherit;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.4rem;
    }

    .footer-content::before {
        display: none;
    }

    .site-footer .footer-name {
        order: 1;
    }

    .site-footer .footer-copy {
        order: 2;
        margin-left: 0;
        text-align: center;
    }

    .site-footer .footer-extra {
        order: 3;
        text-align: center;
    }
}

/* =========================================
   4. PROJECT CARDS & "+" BUTTON
   ========================================= */
.container { 
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 3rem 5% 0; 
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.section-title {
    font-family: var(--font-head);
    font-size: 1.8rem;
    margin: 3rem 0 1.5rem 0;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(0,0,0,0.1);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}
.section-tag { 
    font-size: 0.8rem; 
    font-family: 'Inter', sans-serif; 
    text-transform: uppercase; 
    color: var(--col-grey); /* CHANGED TO GREY */
    letter-spacing: 0.05em;
}

.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 2rem; align-items: start; }

.project-card {
    background: var(--card-bg);
    border: var(--border);
    border-radius: 12px;
    padding: 2.5rem 2rem 3rem 2rem;
    box-shadow: var(--shadow);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
    line-height: 1.8;
}
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-hover); }

/* Device preview widths */
body.device-desktop .nav-sticky,
body.device-desktop .container,
body.device-desktop .footer-section { max-width: 100%; margin-left: auto; margin-right: auto; }

body.device-tablet .nav-sticky,
body.device-tablet .container,
body.device-tablet .footer-section { max-width: 900px; margin-left: auto; margin-right: auto; border-left: 2px dashed rgba(0,0,0,0.1); border-right: 2px dashed rgba(0,0,0,0.1); }
body.device-tablet .main-nav { max-width: 900px; }
body.device-tablet .about-hero { gap: 1.5rem; }
body.device-tablet .about-content { min-width: 240px; }

body.device-phone .nav-sticky,
body.device-phone .container,
body.device-phone .footer-section { max-width: 480px; margin-left: auto; margin-right: auto; border-left: 2px dashed rgba(0,0,0,0.15); border-right: 2px dashed rgba(0,0,0,0.15); padding-left: 1rem; padding-right: 1rem; }

/* Identity Borders */
.border-magenta { border-top: 4px solid var(--col-magenta); }
.border-red { border-top: 4px solid var(--col-red); }
.border-orange { border-top: 4px solid var(--col-orange); }
.border-green { border-top: 4px solid var(--col-green); }
.border-teal { border-top: 4px solid var(--col-teal); }


/* THE PLUS BUTTON */
.viz-toggle-btn {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--text-sub);
    background: transparent;
    color: var(--text-main);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 5;
}
.viz-toggle-btn:hover {
    background: var(--text-main);
    color: var(--bg-color);
    transform: scale(1.1);
}
/* Rotated state when active (becomes an X) */
.viz-toggle-btn.active {
    transform: rotate(45deg);
    background: var(--text-main);
    color: var(--bg-color);
    border-color: var(--text-main);
}

/* TEXT CONTENT */
/* Universal spacing for nested discipline cards */
.nested-left > * {
    margin: 0 0 var(--role-line-gap) 0;
}
.nested-left > *:last-child {
    margin-bottom: 0;
}

.card-meta {
    font-family: 'Inter', sans-serif; font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; margin-bottom: 0.8rem; display: block; color: var(--text-sub);
}
.card-title { font-family: 'Inter', sans-serif; font-weight: 800; letter-spacing: -0.01em; font-size: 1.72rem; line-height: 1.25; margin-bottom: 1rem; }
.card-body { font-size: calc(0.95rem * var(--text-scale-body)); color: var(--text-sub); line-height: 1.8; }
.card-h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: calc(1.72rem * var(--text-scale-head)); line-height: 1.25; color: var(--text-main); margin: 1rem 0 0.75rem 0; }
.card-title,
.card-h1,
.card-summary,
.card-list li,
.nested-role-meta,
.role-content .role-org,
.role-content .role-meta {
    text-wrap: pretty;
}
.card-subtitle { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1rem; color: var(--text-main); margin: 0 0 0.75rem 0; }
.card-subtitle strong { font-weight: 800; }
.card-summary { font-weight: 700; color: var(--text-main); margin-bottom: rem; }
.card-term {
    display: inline-block;
    font-weight: 400;
}
.card-body > .card-summary:first-child { margin-top: 1.5rem; display: block; }
.card-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.card-list li { position: relative; padding-left: 1.25rem; color: var(--text-sub); line-height: 1.7; }
.card-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--text-main);
    font-weight: 700;
}

.highlight-box {
    background: rgba(0,0,0,0.03); padding: 1rem; border-radius: 6px; margin-top: 1rem;
    border-left: 3px solid var(--text-main); animation: fadeIn 0.5s ease;
}

.card-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 1rem;
    padding: 0.65rem 1.4rem;
    border-radius: 999px;
    border: 2px solid var(--text-main);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-main);
    text-decoration: none;
    transition: all 0.25s ease;
    white-space: nowrap;
}
.card-link-btn:hover {
    background: var(--text-main);
    color: var(--bg-color);
    transform: translateY(-2px);
}

.card-body .card-link-btn:not(.paper-portfolio-btn) {
    margin-inline: auto;
    display: flex;
    width: fit-content;
    text-align: center;
}

.paper-link-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
}

.card-body.gallery-controls-open .card-link-btn,
.card-body.gallery-controls-open .gallery-slide-btn,
.card-body.gallery-controls-open .role-btn {
    margin-inline: auto;
    display: flex;
    justify-content: center;
    text-align: center;
}

.card-link-btn.paper-portfolio-btn,
.card-link-btn.paper-portfolio-btn:link,
.card-link-btn.paper-portfolio-btn:visited {
    width: 100%;
    min-width: 100%;
    height: 48px;
    padding-top: 0.78rem;
    padding-bottom: 0.78rem;
    background: var(--col-navy);
    border-color: var(--col-navy);
    color: #fdfbf7;
}

.card-link-btn.paper-portfolio-btn:hover,
.card-link-btn.paper-portfolio-btn:focus-visible {
    background: #2b4a73;
    border-color: #2b4a73;
    color: #fdfbf7;
}

body.dark-mode .card-link-btn.paper-portfolio-btn,
body.dark-mode .card-link-btn.paper-portfolio-btn:link,
body.dark-mode .card-link-btn.paper-portfolio-btn:visited {
    background: #fdfbf7;
    color: var(--col-navy);
    border-color: #fdfbf7;
}

body.dark-mode .card-link-btn.paper-portfolio-btn:hover,
body.dark-mode .card-link-btn.paper-portfolio-btn:focus-visible {
    background: #eae6df;
    border-color: #eae6df;
    color: var(--col-navy);
}

.role-embed-block {
    margin-top: 1.25rem;
}

.role-embed-title {
    margin: 0 0 0.65rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-sub);
}

.role-embed-frame {
    position: relative;
    width: 100%;
    max-width: 780px;
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    padding-top: 0;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid rgba(30, 58, 95, 0.16);
    background: rgba(30, 58, 95, 0.03);
}

.role-embed-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* =========================================
   RECENT APPEARANCES SHOWCASE
   ========================================= */
.appearances-showcase {
    margin: 0 auto 2rem;
    padding: clamp(1rem, 2vw, 1.35rem);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 16px;
}
body.dark-mode .appearances-showcase {
    background: rgba(37, 37, 37, 0.92);
    border-color: rgba(255, 255, 255, 0.08);
}
.appearances-showcase-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
    margin-bottom: 1rem;
}
.appearances-showcase-title {
    font-family: var(--font-head);
    font-size: clamp(1.4rem, 3vw, 2rem);
    letter-spacing: -0.02em;
    color: var(--text-main);
    line-height: 1.1;
}
.appearances-showcase-sub {
    font-family: 'Inter', sans-serif;
    font-size: 0.8rem;
    color: var(--text-sub);
    opacity: 0.8;
}
.appearances-track-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    border-radius: 12px;
    scrollbar-width: none;
    max-width: 100%;
    margin: 0 auto;
}
.appearances-track-wrap::-webkit-scrollbar {
    display: none;
}
.appearances-track {
    display: flex;
    gap: 1rem;
    width: fit-content;
    padding-bottom: 0.25rem;
}
.appearances-card {
    scroll-snap-align: start;
    flex: 0 0 clamp(280px, 39vw, 520px);
    min-width: clamp(280px, 39vw, 520px);
    max-width: 520px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(30, 58, 95, 0.1);
    background: rgba(255, 255, 255, 0.6);
    display: flex;
    flex-direction: column;
}
body.dark-mode .appearances-card {
    background: rgba(50, 50, 50, 0.5);
    border-color: rgba(255, 255, 255, 0.1);
}
.appearances-card .instagram-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border: 0 !important;
    margin: 0 !important;
}
.appearances-card--social {
    height: clamp(320px, 42vw, 420px);
}
.appearances-linkedin-frame {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
}
.appearances-card--article {
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.05), rgba(30, 58, 95, 0.02));
    justify-content: center;
}
.appearances-card--feature-sonic,
.appearances-card--feature-mayo {
    --feature-color-a: rgba(92, 72, 179, 0.18);
    --feature-color-b: rgba(33, 150, 243, 0.14);
    --feature-border: rgba(92, 72, 179, 0.26);
    background:
        radial-gradient(140% 120% at 12% 8%, var(--feature-color-a), transparent 58%),
        radial-gradient(120% 100% at 88% 100%, var(--feature-color-b), transparent 52%),
        repeating-linear-gradient(135deg, rgba(30, 58, 95, 0.045) 0 12px, rgba(30, 58, 95, 0.018) 12px 24px),
        linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(249, 251, 255, 0.95));
    border-color: var(--feature-border);
}
.appearances-card--feature-sonic {
    --feature-ink: var(--col-magenta);
    --feature-ink-rgb: 199,58,164;
    background:
        linear-gradient(160deg, rgba(var(--feature-ink-rgb), 0.16), rgba(255, 255, 255, 0.95));
    border-color: rgba(var(--feature-ink-rgb), 0.42);
}
.appearances-card--feature-mayo {
    --feature-ink: var(--col-orange);
    --feature-ink-rgb: 233,163,77;
    background:
        linear-gradient(160deg, rgba(var(--feature-ink-rgb), 0.16), rgba(255, 255, 255, 0.95));
    border-color: rgba(var(--feature-ink-rgb), 0.42);
}
body.dark-mode .appearances-card--feature-sonic,
body.dark-mode .appearances-card--feature-mayo {
    background:
        radial-gradient(140% 120% at 12% 8%, rgba(123, 79, 224, 0.22), transparent 58%),
        radial-gradient(120% 100% at 88% 100%, rgba(56, 189, 248, 0.2), transparent 52%),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.045) 0 12px, rgba(255, 255, 255, 0.015) 12px 24px),
        linear-gradient(135deg, rgba(42, 42, 48, 0.96), rgba(32, 32, 37, 0.96));
}
body.dark-mode .appearances-card--feature-sonic {
    background:
        linear-gradient(160deg, rgba(var(--feature-ink-rgb), 0.28), rgba(34, 34, 39, 0.97));
    border-color: rgba(var(--feature-ink-rgb), 0.5);
}
body.dark-mode .appearances-card--feature-mayo {
    background:
        linear-gradient(160deg, rgba(var(--feature-ink-rgb), 0.28), rgba(34, 34, 39, 0.97));
    border-color: rgba(var(--feature-ink-rgb), 0.5);
}
.appearances-article {
    padding: 2.15rem 1.65rem;
    display: flex;
    flex-direction: column;
    gap: 0.72rem;
}
.appearances-article-tag {
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-main);
    background: rgba(30, 58, 95, 0.1);
    padding: 0.25rem 0.6rem;
    border-radius: 999px;
    width: fit-content;
}
.appearances-article-title {
    font-family: var(--font-head);
    font-size: clamp(1.32rem, 2.8vw, 1.72rem);
    line-height: 1.22;
    color: var(--text-main);
    margin: 0;
}
.appearances-article-source {
    font-family: 'Inter', sans-serif;
    font-size: 0.92rem;
    color: var(--text-sub);
    margin: 0;
}
.appearances-article-link {
    margin-top: 0.5rem;
    display: inline-block;
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    text-decoration: none;
    border-bottom: 1.5px solid currentColor;
    width: fit-content;
    transition: opacity 0.18s;
}
.appearances-article-link:hover {
    opacity: 0.65;
}

@media (max-width: 760px) {
    .appearances-card {
        flex: 0 0 86vw;
        min-width: 86vw;
        max-width: 86vw;
    }
    .appearances-card--social {
        height: 460px;
    }
}

/* =========================================
   CARD GALLERY (Museum Style)
   ========================================= */

.gallery-toggle-btn {
    margin-top: 0;
    padding: 0.65rem 1.4rem;
    min-width: 170px;
    background: transparent;
    color: var(--text-main);
    border: 2px solid var(--text-main);
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    font-size: 0.85rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    text-align: center;
    box-shadow: none;
    height: 40px;
    white-space: nowrap;
}

.gallery-toggle-btn.active {
    background: var(--nested-color, var(--col-magenta));
    color: #fff;
    border-color: var(--nested-color, var(--col-magenta));
    opacity: 1;
    box-shadow: 0 8px 18px rgba(30, 58, 95, 0.16);
}

.gallery-toggle-btn:hover {
    background: var(--text-main);
    color: var(--bg-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(30, 58, 95, 0.12);
}

.gallery-toggle-btn.active:hover {
    transform: translateY(-1px);
    opacity: 0.94;
}

#section-academic .gallery-toggle-btn.active {
    background: linear-gradient(135deg, var(--nested-color, var(--col-red)), var(--nested-color-dark, #b91d47));
}

#section-papers .gallery-toggle-btn.active {
    background: linear-gradient(135deg, var(--nested-color, var(--col-orange)), var(--nested-color-dark, #c8822f));
}

#section-creative .gallery-toggle-btn.active {
    background: linear-gradient(135deg, var(--nested-color, var(--col-green)), var(--nested-color-dark, #5a8c47));
}

.card-gallery {
    display: none;
    margin-top: 0.75rem;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    position: relative;
    box-shadow: none;
    overflow-anchor: none;
}

.card-gallery.open {
    display: block;
}

.gallery-inline-bar {
    margin-top: 1.1rem;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.35rem;
    width: 100%;
}

.gallery-header-line {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.gallery-header-line .gallery-toggle-btn {
    grid-column: 1;
    justify-self: start;
}

.gallery-header-line .gallery-caption {
    grid-column: 2;
}

.gallery-header-line .gallery-position {
    grid-column: 3;
    justify-self: end;
}

.gallery-inline-bar .gallery-caption {
    display: none;
}

.gallery-inline-bar:not(.gallery-open) .gallery-header-line {
    display: flex;
    justify-content: center;
}

.gallery-inline-bar.gallery-open .gallery-caption {
    display: flex;
}

.gallery-inline-bar.gallery-open .gallery-header-line {
    grid-template-columns: 1fr auto 1fr;
}

.gallery-inline-bar.gallery-open .gallery-header-line .gallery-toggle-btn {
    grid-column: 2;
    justify-self: center;
}

.gallery-inline-bar.gallery-open .gallery-header-line .gallery-caption {
    grid-column: 1;
    justify-self: end;
    text-align: right;
}

.gallery-inline-bar.gallery-open .gallery-header-line .gallery-position {
    grid-column: 3;
    justify-self: start;
}

.gallery-detail-line {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-width: 0;
    width: 100%;
}

.gallery-inline-bar .gallery-detail-line {
    display: none;
}

.gallery-inline-bar.gallery-open .gallery-detail-line {
    display: flex;
}

.gallery-container {
    display: grid;
    grid-template-columns: 1fr auto auto 1fr;
    grid-template-areas:
        'main main main main'
        '. prev next .'
        'thumbs thumbs thumbs thumbs';
    align-items: center;
    gap: 0.7rem;
    text-align: left;
    width: 100%;
    max-width: min(100%, 920px);
    margin: 0 auto;
    position: relative;
}

.gallery-thumbnails {
    grid-area: thumbs;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 0.4rem;
    margin-top: 0;
    max-width: min(100%, 400px);
    overflow-x: auto;
    padding: 0.05rem 0.25rem 0.25rem;
    min-width: 0;
    margin-inline: auto;
}

.gallery-thumb {
    width: 12px;
    height: 12px;
    aspect-ratio: 1;
    background: rgba(30,58,95,0.22);
    border: 1px solid rgba(30, 58, 95, 0.12);
    border-radius: 999px;
    cursor: pointer;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s, background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0;
    color: transparent;
    position: relative;
    overflow: hidden;
    flex: 0 0 auto;
    box-shadow: 0 0 14px currentColor;
}

.gallery-thumb:hover {
    border-color: var(--col-magenta);
    transform: scale(1.08);
}

.gallery-thumb.active {
    border-color: transparent;
    background: linear-gradient(135deg, var(--nested-color, var(--col-magenta)), var(--nested-color-dark, #7c1f4b));
    box-shadow: 0 0 0 2px rgba(30,58,95,0.16), 0 0 14px currentColor;
}

.gallery-thumb.active::after {
    content: none;
}

.gallery-position {
    display: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-main);
    padding: 0.28rem 0.55rem;
    background: rgba(30,58,95,0.08);
    border-radius: 999px;
    box-shadow: none;
    flex-shrink: 0;
    min-width: 46px;
    text-align: center;
    justify-self: center;
}

.gallery-inline-bar.gallery-open .gallery-position {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.gallery-main {
    grid-area: main;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
}

.gallery-nav-arrow-left {
    grid-area: prev;
    justify-self: end;
}

.gallery-nav-arrow-right {
    grid-area: next;
    justify-self: start;
}

/* Gallery display: fixed 16:9 letterbox — images letterbox inside regardless of source ratio */
.gallery-display {
    width: min(100%, 860px);
    margin: 0 auto;
    aspect-ratio: 16 / 9;
    max-height: min(58vh, 500px);
    background: linear-gradient(135deg, rgba(255,255,255,0.96), rgba(249, 246, 252, 0.96));
    border: 1px solid rgba(30, 58, 95, 0.08);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    color: var(--text-sub);
    position: relative;
    overflow: hidden;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 18px rgba(30, 58, 95, 0.05);
}
/* Aspect modifier classes are kept for when you slot in real <img> tags */
.gallery-display.aspect-square { aspect-ratio: 1; }
.gallery-display.aspect-16-9  { aspect-ratio: 16 / 9; }
.gallery-display.aspect-4-5   { aspect-ratio: 4 / 5; max-height: min(70vh, 620px); }
.gallery-display.aspect-flyer  { aspect-ratio: 8.5 / 11; max-height: 480px; }
.gallery-display.aspect-flyer  { max-height: min(70vh, 620px); }

.gallery-display img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* letterbox — never crops */
    display: block;
}

.gallery-display-role-scroller {
    aspect-ratio: auto;
    max-height: none;
    min-height: 0;
    align-items: stretch;
    justify-content: flex-start;
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
}

.role-gallery-track-wrap {
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    border-radius: 12px;
    overscroll-behavior-x: contain;
}

.role-gallery-track-wrap::-webkit-scrollbar {
    display: none;
}

.role-gallery-track {
    display: flex;
    gap: 1rem;
    width: fit-content;
    padding: 0 0 0.25rem;
}

.role-gallery-card {
    flex: 0 0 clamp(240px, 30vw, 380px);
    min-width: clamp(240px, 30vw, 380px);
    max-width: 400px;
    border-radius: 12px;
    border: 1px solid rgba(30, 58, 95, 0.1);
    background: rgba(255, 255, 255, 0.6);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    scroll-snap-align: start;
}

body.dark-mode .role-gallery-card {
    background: rgba(37, 37, 37, 0.9);
    border-color: rgba(255, 255, 255, 0.12);
}

.role-gallery-media {
    width: 100%;
    min-height: 300px;
    max-height: 72vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(30, 58, 95, 0.04);
    overflow: hidden;
}

.role-gallery-media .instagram-media {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
}

.role-gallery-frame,
.role-gallery-media img {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    object-fit: contain;
}

.role-gallery-fallback {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(30,58,95,0.2);
    background: rgba(30,58,95,0.06);
    color: var(--text-main);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-weight: 600;
}

.role-gallery-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.7rem;
    padding: 0.6rem 0.75rem 0.75rem;
}

.role-gallery-title {
    font-family: 'Inter', sans-serif;
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text-main);
}

.role-gallery-open {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.35rem 0.68rem;
    border-radius: 999px;
    border: 1px solid rgba(30,58,95,0.2);
    color: var(--text-main);
    text-decoration: none;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    background: rgba(30,58,95,0.06);
}

.tournament-stats {
    margin-top: 0.95rem;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.55rem;
}

.tournament-stat-chip {
    border-radius: 10px;
    border: 1px solid rgba(30, 58, 95, 0.14);
    background: rgba(255, 255, 255, 0.78);
    padding: 0.55rem 0.45rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    line-height: 1.2;
}

.tournament-stat-chip strong {
    font-family: 'Inter', sans-serif;
    font-size: 1.02rem;
    color: var(--text-main);
}

.tournament-stat-chip span {
    font-family: 'Inter', sans-serif;
    font-size: 0.68rem;
    color: var(--text-sub);
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.tournament-nowrap {
    white-space: nowrap;
}

body.dark-mode .tournament-stat-chip {
    background: rgba(40, 40, 40, 0.9);
    border-color: rgba(255, 255, 255, 0.16);
}

@media (max-width: 820px) {
    .tournament-stats {
        grid-template-columns: 1fr;
    }
}

.gallery-spreadsheet-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(248, 251, 255, 0.95));
    min-height: 0;
}

.gallery-spreadsheet-wrap > img {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    object-fit: contain;
    display: block;
}

.gallery-spreadsheet-frame {
    width: 100%;
    height: auto;
    flex: 1 1 auto;
    min-height: 0;
    max-height: 100%;
    border: 0;
    background: #ffffff;
}

.gallery-spreadsheet-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0.55rem 0.75rem 0.7rem;
    padding: 0.62rem 1rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-main);
    text-decoration: none;
    border: 1px solid rgba(30, 58, 95, 0.2);
    border-radius: 999px;
    background: rgba(30, 58, 95, 0.05);
    width: fit-content;
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.gallery-spreadsheet-link:hover {
    opacity: 1;
    background: rgba(30, 58, 95, 0.12);
    border-color: rgba(30, 58, 95, 0.3);
    transform: translateY(-1px);
}

body.dark-mode .gallery-spreadsheet-link {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

.gallery-caption {
    font-family: 'Inter', sans-serif;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text-main);
    margin: 0;
    text-align: center;
    text-wrap: pretty;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    flex-wrap: nowrap;
    min-height: 40px;
}

.gallery-caption-title {
    display: inline-block;
    min-width: 0;
    flex: 0 1 auto;
    text-align: center;
}

.gallery-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    flex: 0 0 auto;
}

.gallery-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0.44rem 0.74rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--text-main);
    text-decoration: none;
    border: 1px solid rgba(30, 58, 95, 0.2);
    border-radius: 999px;
    background: rgba(30, 58, 95, 0.05);
    transition: transform 0.18s ease, background 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.gallery-action-btn:hover {
    opacity: 1;
    background: rgba(30, 58, 95, 0.12);
    border-color: rgba(30, 58, 95, 0.3);
    transform: translateY(-1px);
}

.gallery-action-btn-secondary {
    background: transparent;
}

body.dark-mode .gallery-action-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
}

body.dark-mode .gallery-action-btn-secondary {
    background: transparent;
}

.gallery-subheading {
    margin: 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-sub);
    letter-spacing: 0.01em;
    text-wrap: pretty;
    min-width: 0;
}

.gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 1.2rem;
    text-align: center;
}

.gallery-placeholder-icon {
    width: 56px;
    height: 56px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(30, 58, 95, 0.08), rgba(199, 58, 164, 0.12));
    color: var(--col-magenta);
    font-size: 1.6rem;
    font-weight: 700;
}

.gallery-placeholder-title {
    font-family: 'Inter', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
    text-wrap: balance;
}

.gallery-placeholder-subtitle {
    font-size: 0.8rem;
    color: var(--text-sub);
    letter-spacing: 0.02em;
}

@media (max-width: 640px) {
    .gallery-top-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.9rem;
    }
    .gallery-meta {
        align-items: flex-start;
    }
    .gallery-container {
        text-align: center;
    }
    .gallery-inline-bar {
        gap: 0.5rem;
    }
    .gallery-copy {
        align-items: flex-start;
    }
    .gallery-caption,
    .gallery-description {
        text-align: center;
    }
    .gallery-header-line {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        row-gap: 0.45rem;
    }
    .gallery-position {
        justify-self: start;
    }
    .gallery-main {
        display: block;
    }
}

@media (min-width: 960px) {
    .gallery-main {
        display: block;
    }
}

.gallery-tool-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-family: 'Inter', sans-serif;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(199, 58, 164, 0.12);
    color: var(--text-main);
    border: 1px solid rgba(199, 58, 164, 0.25);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .gallery-display {
        min-height: 200px;
        max-height: 330px;
    }

    .gallery-main {
        padding: 0;
    }

    .gallery-nav-arrow {
        width: 2rem;
        height: 2rem;
    }

    .gallery-nav-arrow-left {
        justify-self: center;
    }

    .gallery-nav-arrow-right {
        justify-self: center;
    }

    .gallery-toggle-btn {
        min-width: 126px;
        padding: 0.58rem 0.95rem;
        font-size: 0.76rem;
    }

    .card-link-btn {
        font-size: 0.76rem;
        margin-inline: auto;
        justify-content: center;
        text-align: center;
    }

    .card-body .card-link-btn,
    .gallery-slide-btn,
    .portfolio-link .role-btn {
        margin-inline: auto;
        display: inline-flex;
        justify-content: center;
        text-align: center;
    }

    .paper-portfolio-btn {
        min-width: 100%;
    }

    .hero-btn {
        font-size: 0.78rem;
    }

    .gallery-caption {
        font-size: 0.9rem;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: wrap;
    }

    .gallery-actions {
        width: 100%;
        justify-content: center;
    }

    .gallery-action-btn {
        flex: 0 0 auto;
    }

    .gallery-subheading {
        font-size: 0.74rem;
    }
    
    .gallery-tool-pill {
        font-size: 0.65rem;
    }
}

@media (max-width: 1024px) {
    .card-link-btn,
    .gallery-toggle-btn,
    .hero-btn,
    .preview-btn,
    .papers-list-btn {
        white-space: nowrap;
    }
}

@media (max-width: 600px) {
    .gallery-container {
        grid-template-columns: 1fr auto auto 1fr;
        grid-template-areas:
            'main main main main'
            '. prev next .'
            'thumbs thumbs thumbs thumbs';
    }

    .gallery-thumbnails {
        justify-content: flex-start;
    }
}

.viz-drawer {
    background: rgba(0,0,0,0.02);
    margin: 0 -2rem -2rem -2rem; /* Bleed to edges */
    border-top: 1px solid rgba(0,0,0,0.05);
    opacity: 0;
    padding: 0 2rem;
    will-change: max-height;
}

.viz-drawer.open {
    max-height: 520px; /* Arbitrary large height */
    transition: max-height 0.5s ease-in-out, opacity 0.2s ease;
    opacity: 1;
    padding: 1.25rem 2rem 2rem 2rem;
}

.viz-content {
    padding: 0;
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.viz-content::-webkit-scrollbar { display: none; }

.viz-item {
    min-width: 140px;
    height: 100px;
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.1);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    cursor: pointer;
}
.viz-item:hover { transform: translateY(-3px); border-color: var(--text-main); }
.viz-label { font-size: 0.65rem; font-family: 'Inter', sans-serif; text-transform: uppercase; margin-top: 8px; color: var(--text-sub); }

/* CSS Graphics (Micro) */
.gfx-shape { width: 30px; height: 30px; border: 2px solid currentColor; border-radius: 50%; display: grid; place-items: center; }

/* =========================================
   IMAGE VIEWER MODAL
   ========================================= */
.viewer-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.viewer-modal.open {
    opacity: 1;
    pointer-events: auto;
}
.viewer-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    cursor: pointer;
}
.viewer-container {
    position: relative;
    background: var(--card-bg);
    border: var(--border);
    border-radius: 16px;
    width: 90%;
    max-width: 900px;
    max-height: 85vh;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    z-index: 1;
    animation: viewerSlideIn 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}
@keyframes viewerSlideIn {
    from { transform: scale(0.9) translateY(30px); opacity: 0; }
    to { transform: scale(1) translateY(0); opacity: 1; }
}
.viewer-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.15);
    color: var(--text-main);
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}
.viewer-close:hover {
    background: rgba(0, 0, 0, 0.25);
    transform: rotate(90deg);
}
.viewer-header {
    padding: 2rem 2rem 1rem 2rem;
    border-bottom: var(--border);
}
.viewer-header h3 {
    font-family: var(--font-head);
    font-size: 1.6rem;
    margin: 0;
}
.viewer-meta {
    display: block;
    margin-top: 0.5rem;
    font-family: 'Inter', sans-serif;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-sub);
    letter-spacing: 0.05em;
}
.viewer-body {
    padding: 2rem;
    flex: 1;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
}
.viewer-placeholder {
    text-align: center;
    color: var(--text-sub);
    padding: 3rem 2rem;
}
.viewer-actions {
    padding: 1rem 2rem 2rem 2rem;
    display: flex;
    gap: 1rem;
    justify-content: center;
    border-top: var(--border);
}
.viewer-btn {
    padding: 0.6rem 1.2rem;
    border-radius: 8px;
    border: 1px solid var(--text-main);
    background: transparent;
    color: var(--text-main);
    font-family: 'Inter', sans-serif;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}
.viewer-btn:hover {
    background: var(--text-main);
    color: var(--bg-color);
    transform: translateY(-2px);
}

/* =========================================
   6. FOOTER
   ========================================= */
.footer-section { background: var(--card-bg); border-top: var(--border); padding: 3rem 5%; margin-top: 6rem; }
.footer-grid { max-width: 1200px; margin: 0 auto; display: flex; justify-content: center; }
.stat-block h4 { font-family: var(--font-head); font-size: 2.5rem; color: var(--col-green); line-height: 1; }
.link-list { text-align: center; }
.link-list a { display: block; margin-bottom: 0.5rem; color: var(--text-main); text-decoration: none; font-family: 'Inter', sans-serif; font-weight: 700; font-size: 0.9rem; transition: color 0.2s; }
.link-list a:hover { color: var(--col-magenta); transform: translateX(5px); display: inline-block; }

/* Visibility Utilities */
body:not(.mode-creative) .content-creative { display: none; }
body.mode-creative .content-research { display: none; }

/* Responsive Breakpoints */
@media (max-width: 1180px) {
    .roles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 1024px) {
}

@media (max-width: 950px) {
    .roles-grid { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {

    .gallery-main {
        padding: 0 1.9rem;
    }

    .container { padding: 2.5rem 5% 0; }
    body.device-phone .container { padding: 2rem 1rem 0; }
}

/* Mobile */
@media (max-width: 768px) {
    #dev-toolbar { padding: 0 1rem; }
    .dev-label { display: none; }
    .main-nav { 
        display: grid;
        grid-template-columns: 1fr auto;
        align-items: center; 
        column-gap: 0.75rem;
        padding: 0.75rem 3%; 
    }
    .logo { min-width: 0; }
    .logo h1 { font-size: clamp(1rem, 4vw, 1.2rem); margin: 0; }
    .logo-subtitle { font-size: clamp(0.6rem, 3vw, 0.75rem); margin: 0; }
    .nav-right { 
        justify-self: end;
        margin-left: 0;
        display: flex;
        align-items: center;
        border-left: 1px solid rgba(253, 251, 247, 0.45);
        padding-left: 0.6rem;
    }
    .nav-actions { gap: 0.75rem; }
    .nav-text-link { font-size: 0.82rem; }
    .nav-divider { font-size: 0.78rem; }
    .icon-tile {
        width: 44px;
        height: 44px;
        border-width: 2px;
        font-size: 1.6rem;
    }
    .icon-email {
        width: 44px;
        height: 44px;
        border-width: 2px;
        font-size: 1.6rem;
    }

    .email-dropdown {
        right: 3.2rem;
        min-width: 220px;
    }

    .icon-linkedin-text {
        font-size: 1.12rem;
    }
    
    .accordion-titles { flex-direction: column; align-items: flex-start; gap: 0.25rem; }
    .accordion-title { font-size: 1.3rem; display: block; width: 100%; }
    .accordion-tag { font-size: 0.7rem; display: block; width: 100%; }
    .accordion-header { padding: 1rem 1.5rem; flex-wrap: wrap; }
    .accordion-header.pill-style { border-radius: 20px; }
    .settings-panel { right: 2%; top: auto; bottom: 80px; }
    .roles-grid { grid-template-columns: 1fr; }
    .roles-actions { flex-direction: column; }
    .role-btn { width: 100%; }
    .read-more-btn { width: 100%; max-width: 300px; }
}

/* =========================================
   MOBILE HERO FIXES (Framed + PFP up + no tilt)
   ========================================= */

@media (max-width: 769px) {
  .about-hero {
        margin-inline: 0;
  }

  .about-hero .about-container {
    background: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
    padding: 0;
    gap: 0.75rem;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto auto !important;
  }

  .style-bento .cell-photo {
    grid-row: 1 !important;
    grid-column: 1 !important;
    height: 150px !important;
    width: 150px !important;
    margin: 0 auto 0.5rem !important;
    border-radius: 50% !important;
    min-height: auto !important;
    max-width: 150px !important;
  }

  .style-bento .cell-bio {
    grid-row: 2 !important;
    grid-column: 1 !important;
    padding-top: 1.1rem;
    padding-bottom: 0.75rem;
    text-align: center !important;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .style-bento .cell-skills {
    grid-row: 3 !important;
    grid-column: 1 !important;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: 0.4rem;
    padding-top: 0.65rem;
    width: 100%;
  }

  .about-hero .cell-photo {
    transform: none;
    margin-top: 0.15rem;
    margin-bottom: 0.35rem;
  }
  .about-hero .cell-photo .photo-placeholder {
    transform: none;
    font-size: 3rem !important;
  }

  .style-bento .bio-headline {
    text-align: center;
  }

  .style-bento .bio-body {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }

  .style-bento .mini-stats {
    border-top: none;
    margin-top: 0.35rem;
    padding-top: 0.35rem;
    justify-content: center;
  }

  .style-bento .mini-stats .stat-divider {
    display: none;
  }

  .style-bento .skills-list {
    justify-content: center;
    gap: 0.45rem 0.85rem;
  }
}