/* Resume 2025 - Main Stylesheet */

:root {
    /* Content body text font - can be changed via font tester */
    --content-font-family: 'Sunflower', sans-serif;
    --content-font-weight: 500;
    --content-font-size: 1.1rem;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    background-color: #e2e9f1; /* Match content background to prevent flash on load */
}

/* Respect user preference for reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    overflow-x: hidden;
    background-color: #e2e9f1; /* Match content background to prevent flash on load */
}

/* Navigation Bar */
.main-nav {
    width: 100%;
    background-color: #897F80;
    padding: 1.5rem 0;
    position: relative;
    z-index: 100;
    /* border-bottom: 1px solid rgba(255, 255, 255, 0.1); */
}

/* Desktop only - sticky nav at top when scrolling */
@media (min-width: 769px) {
    .main-nav {
        position: sticky;
        top: 0;
        z-index: 1000;
    }
}

/* Hamburger Menu Button */
.hamburger-menu {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(137, 127, 128, 0.85);
    backdrop-filter: blur(8px);
    border: 2px solid #e8b0b9;
    border-radius: 4px;
    cursor: pointer;
    padding: 0.5rem;
    position: fixed;
    z-index: 1000;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.hamburger-menu:hover {
    border-color: #e8b0b9;
    background-color: rgba(137, 127, 128, 0.95);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.hamburger-menu:focus {
    outline: 2px solid #e8b0b9;
    outline-offset: 2px;
}

.hamburger-menu.active {
    background-color: rgba(137, 127, 128, 0.95);
}

/* Hover state when active (X icon) */
.hamburger-menu.active:hover {
    border-color: #64D570; /* Green on hover when active */
    background-color: rgba(137, 127, 128, 0.98);
}

.hamburger-menu.active:hover .hamburger-line {
    background-color: #64D570; /* Green X on hover */
}

.hamburger-line {
    width: 100%;
    height: 3px;
    background-color: #e8b0b9;
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger-menu:hover .hamburger-line {
    background-color: #e8b0b9;
    opacity: 0.9;
}

/* Base transforms - will be overridden by viewport-specific rules */
.hamburger-menu.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translateY(0.2rem) translateX(0.1rem); /* Small translateX to center X */
}

.hamburger-menu.active .hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-1rem);
}

.hamburger-menu.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translateY(-0.2rem) translateX(0.1rem); /* Small translateX to center X */
}

.nav-list {
    list-style: none;
    display: flex;
    justify-content: flex-end; /* Right justify nav items (logo uses margin-right:auto to sit left) */
    align-items: center;
    flex-wrap: nowrap; /* Prevent wrapping - keep all items on one line */
    gap: clamp(0.4rem, 0.8vw, 1rem); /* Tighter spacing - reduced from 0.75rem-2rem to 0.4rem-1rem */
    padding: 0 2rem;
    margin: 0;
    transition: all 0.3s ease;
    overflow-x: auto; /* Allow horizontal scroll if absolutely necessary */
    overflow-y: hidden; /* Prevent vertical expansion for text items */
    min-height: 0; /* Prevent flex container from expanding vertically */
}

.nav-list li {
    margin: 0;
    flex-shrink: 0; /* Prevent items from shrinking */
}

/* Text navigation items - group them together, right-align text within each box */
.nav-list li:not(.nav-logo) {
    display: flex;
    justify-content: flex-end; /* Right-align text within each li */
}

/* Logo item in desktop nav - pinned to far left */
.desktop-nav .nav-logo {
    margin-right: auto; /* Push other items to the right */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
}

.desktop-nav .nav-logo a {
    padding: 0; /* No large text padding around the icon */
    position: relative;
}

.desktop-nav .nav-logo img {
    height: 40px; /* Adjust icon size as desired */
    width: auto;
    display: block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.nav-list a {
    font-family: 'Poiret One', cursive;
    color: #F8F9FF;
    text-decoration: none;
    font-size: 1.75rem; /* Reduced from 2rem to 1.75rem for tighter fit */
    font-weight: 75;
    text-align: right; /* Right-align all nav text */
    display: block; /* Make link fill container for right-alignment */
    padding: 0.75rem clamp(0.75rem, 1vw, 1.25rem); /* Horizontal padding can scale slightly to help fit */
    transition: color 0.3s ease;
    position: relative;
    white-space: nowrap; /* Prevent text from wrapping within links */
}

.nav-list a:hover {
    color: #64D570; /* Match active nav green */
    opacity: 1;
}

.nav-list a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #64D570; /* Match hover/active color */
    transition: width 0.3s ease;
}

.nav-list a:hover::after {
    width: 80%;
}

.nav-list a.active {
    color: #64D570;
    opacity: 1;
}

.nav-list a.active::after {
    width: 80%;
    background-color: #64D570;
}

/* Remove underline effect from logo icon and keep its colors stable */
.desktop-nav .nav-logo a::after {
    content: none;
}

.desktop-nav .nav-logo a:hover {
    color: inherit;
    opacity: 1;
}

/* Clear hover effect on the logo icon itself */
.desktop-nav .nav-logo a:hover img {
    transform: scale(1.16); /* More pronounced enlargement */
    filter: drop-shadow(0 0 6px rgba(248, 249, 255, 0.9));
}

/* Background highlight for the entire logo area on hover */
.desktop-nav .nav-logo:hover {
    background-color: #64D570; /* Same green as active nav text */
}

/* Allow the logo to grow slightly outside the text baseline without being clipped */
.nav-list.desktop-nav {
    overflow: visible;
}

/* Mobile Navigation Logo - Same styling as desktop */
.mobile-nav .nav-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.2rem 0.6rem;
    border-radius: 0.5rem;
    transition: background-color 0.2s ease;
    margin-bottom: 0.5rem; /* Add spacing below logo */
}

.mobile-nav .nav-logo a {
    padding: 0; /* No large text padding around the icon */
    position: relative;
}

.mobile-nav .nav-logo img {
    height: 40px; /* Same size as desktop */
    width: auto;
    display: block;
    transition: transform 0.2s ease, filter 0.2s ease;
}

/* Remove underline effect from mobile logo icon */
.mobile-nav .nav-logo a::after {
    content: none;
}

.mobile-nav .nav-logo a:hover {
    color: inherit;
    opacity: 1;
}

/* Hover effect on the logo icon - scale and glow */
.mobile-nav .nav-logo a:hover img {
    transform: scale(1.16); /* Same enlargement as desktop */
    filter: drop-shadow(0 0 6px rgba(248, 249, 255, 0.9));
}

/* Background highlight for the entire logo area on hover - green backdrop */
.mobile-nav .nav-logo:hover {
    background-color: #64D570; /* Same green as active nav text */
}

/* Mobile Navigation - Hidden by default on desktop */
.mobile-nav {
    display: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0;
}

/* Explicitly hide mobile nav on desktop (above 1024px) */
@media (min-width: 1025px) {
    .mobile-nav {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        height: 0 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* Hero Section */
.hero-section {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    overflow: hidden;
    position: relative;
}

.hero-section img,
.hero-section video,
.hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Ensure video maintains aspect ratio and covers full hero section */
.hero-video {
    position: absolute;
    top: 0;
    left: 0;
    object-position: center;
}

.hero-section-text {
    position: absolute;
    z-index: 10;
    left: 5%;
    top: auto;
    bottom: 23%; /* Positioned 40% from bottom instead of from top */
    /* Transparent background for now */
}

.hero-name {
    font-family: 'Barriecito', cursive;
    /* color: #F8F9FF; */
    color: #B31420;
    /* color: #E91649; */
    font-size: 5rem;
    line-height: 1.2;
    display: inline-block;
    text-shadow: 
        -0.25px -0.25px 0 #E8B0B9,
        0.25px -0.25px 0 #E8B0B9,
        -0.25px 0.25px 0 #E8B0B9,
        0.25px 0.25px 0 #E8B0B9;
}

.hero-name .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: letterFlowUp 0.6s ease-out forwards;
}

.hero-name .letter.space {
    width: 0.3em;
}

.hero-title {
    font-family: 'Barriecito', cursive;
    color: #64D570;
    color: #e8b0b9;
    /* color: #b98a89; */
    /* color: #D5E8B0; */
    /* color: #E91649; */
    font-size: 2rem;
    line-height: 1.2;
    display: block;
    margin-top: 0.25em;
    /* Allow line break - "Developer" should be on second line */
    text-shadow: 
        -0.25px -0.25px 0 #B9A8A9,
        0.25px -0.25px 0 #B9A8A9,
        -0.25px 0.25px 0 #B9A8A9,
        0.25px 0.25px 0 #B9A8A9;
}

.hero-title .letter {
    display: inline-block;
    opacity: 0;
    transform: translateY(30px);
    animation: letterFlowUp 0.45s ease-out forwards;
}

.hero-title .letter.space {
    width: 0.3em;
}

/* Show line break on all screen sizes - "Developer" on second line */
.hero-title .line-break-mobile::before {
    content: '\A';
    white-space: pre;
}

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

/* Shared: Hide desktop navigation bar on mobile and tablet (≤1024px) */
@media (max-width: 1024px) {
    .main-nav {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
        opacity: 0 !important;
        height: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border: none !important;
        overflow: hidden !important;
    }
    
    .main-nav .nav-list {
        display: none !important;
        visibility: hidden !important;
    }
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
    
    /* Show hamburger menu on mobile/tablet - fixed bottom-right, aligned with hero text */
    .hamburger-menu {
        display: flex;
        position: fixed;
        right: 1.5rem; /* Match hero text left: 1.5rem spacing */
        bottom: 22%; /* Align with hero text bottom: 22% */
        overflow: visible; /* Allow X icon to extend beyond container when active */
    }
    
    /* Expand hamburger menu container when active - separate from side drawer */
    .hamburger-menu.active {
        width: 3.5rem; /* Larger container when active (was 2.5rem) */
        height: 3.5rem; /* Larger container when active (was 2.5rem) */
        padding: 5px; /* Reduced padding to maximize content area */
        justify-content: center; /* Center lines vertically when active */
        right: 1.5rem; /* Maintain right alignment when active */
        bottom: 22%; /* Maintain bottom alignment when active */
        border-radius: 4px; /* Restore border radius for distinct button */
        background-color: rgba(137, 127, 128, 0.85); /* Original button background */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Restore button shadow */
    }
    
    /* Mobile-specific transforms - smaller content area needs different values */
    .hamburger-menu.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translateY(0.15rem) translateX(0.125rem); /* Matched tablet translateX value */
    }
    
    .hamburger-menu.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translateY(-0.15rem) translateX(0.125rem); /* Matched tablet translateX value */
    }
    
    /* Side drawer navigation - slides in from right edge */
    .mobile-nav {
        display: block; /* Required for position: fixed to work */
        position: fixed;
        top: 0;
        right: 0;
        width: 240px; /* Fixed width for drawer - matches tablet */
        height: 100vh; /* Full viewport height */
        background-color: rgba(137, 127, 128, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        margin: 0;
        overflow-y: auto; /* Allow scrolling if content exceeds height */
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2); /* Shadow on left edge */
        z-index: 998; /* Below hamburger button */
        list-style: none;
        transform: translateX(100%); /* Hidden off-screen to the right */
        opacity: 1; /* Keep opacity at 1 for smooth transition */
        visibility: visible; /* Keep visible for transform to work */
        pointer-events: none; /* Prevent interaction when hidden */
    }
    
    .mobile-nav.active {
        transform: translateX(0); /* Slide into view */
        pointer-events: auto; /* Allow interaction when active */
        padding-top: 2rem; /* Top spacing for drawer content */
    }
    
    .mobile-nav li {
        width: 100%;
        margin: 0;
    }
    
    .mobile-nav a {
        display: block;
        width: 100%;
        font-family: 'Poiret One', cursive;
        color: #F8F9FF;
        text-decoration: none;
        font-size: 1.5rem;
        padding: 1rem 2rem;
        text-align: left;
        border-left: 4px solid transparent;
        transition: all 0.3s ease;
        position: relative; /* Create stacking context */
        z-index: 10; /* Above any geometric patterns */
        min-height: 48px; /* iOS minimum touch target size (44px + padding) */
        touch-action: manipulation; /* Optimize touch response, disable double-tap zoom */
        cursor: pointer; /* Ensure pointer cursor on hover */
        -webkit-tap-highlight-color: rgba(100, 213, 112, 0.2); /* Visual feedback on tap */
    }
    
    /* Active/pressed state for immediate touch feedback */
    .mobile-nav a:active {
        background-color: rgba(100, 213, 112, 0.15);
        transform: scale(0.98);
    }
    
    .mobile-nav a:hover,
    .mobile-nav a.active {
        background-color: rgba(100, 213, 112, 0.1);
        border-left-color: #64D570;
        padding-left: 2.5rem;
        color: #64D570;
    }
    
    .hero-section-text {
        left: 1.5rem;
        top: auto;
        bottom: 22%;
        right: 5%;
    }
    
    .hero-name {
        font-size: 3rem;
    }
    
    .hero-title {
        font-size: 1.5rem;
        margin-top: 0.3em;
    }
}

@media (max-width: 480px) {
    /* These nav-list styles are now redundant since nav is hidden, but keeping for consistency */
    .nav-list {
        gap: 0.5rem;
        padding: 0 0.5rem;
    }
    
    .nav-list a {
        font-size: 1.2rem;
        padding: 0.5rem 0.8rem;
    }
    
    .hero-section-text {
        left: 1.5rem;
        bottom: 22%;
        right: 5%;
    }
    
    .hero-name {
        font-size: 2.5rem;
    }
    
    .hero-title {
        font-size: 1.2rem;
        margin-top: 0.25em;
    }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .hero-name .letter,
    .hero-title .letter {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* Adjust hero text positioning on small mobile devices in landscape (e.g., iPhone SE) */
@media (max-width: 667px) and (orientation: landscape) {
    .hero-section-text {
        bottom: 12%; /* Lower text by 10% (from 22% to 32%) to prevent it from being too high */
    }
}

/* Bottom Container */
.bottom-container {
    width: 100%;
    min-height: 100vh;
    background-color: #e2e9f1;
    padding: 40px 20px;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column; /* Allow footer to sit at bottom of framed area */
}

/* Geometric Pattern Background */
.geometric-pattern-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background-color: #e2e9f1;
    z-index: 1;
}

/* FRAMING LINES - Creating structure to support text */

/* Top horizontal frame line */
.frame-line-top {
    position: absolute;
    top: 9vh;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #171717;
    opacity: 0.6;
    animation: frameLineTop 12s ease-in-out infinite;
}

/* Bottom horizontal frame line */
.frame-line-bottom {
    position: absolute;
    bottom: 9vh;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #171717;
    opacity: 0.6;
    animation: frameLineBottom 14s ease-in-out infinite;
}

/* Left vertical frame line */
.frame-line-left {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 4vw;
    width: 4px;
    background-color: #897f80;
    opacity: 0.55;
    animation: frameLineLeft 16s ease-in-out infinite;
}

/* Right vertical frame line */
.frame-line-right {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 4vw;
    width: 4px;
    background-color: #897f80;
    opacity: 0.55;
    animation: frameLineRight 15s ease-in-out infinite;
}

/* Secondary framing lines */
.frame-line-secondary-top {
    position: absolute;
    top: 12vh;
    left: 3.3vw;
    right: 3.3vw;
    height: 1px;
    background-color: #b9a8a9;
    opacity: 0.5;
    animation: frameLineSecondaryTop 10s ease-in-out infinite;
}

.frame-line-secondary-bottom {
    position: absolute;
    bottom: 13vh;
    left: 3.3vw;
    right: 3.3vw;
    height: 1px;
    background-color: #b9a8a9;
    opacity: 0.5;
    animation: frameLineSecondaryBottom 11s ease-in-out infinite;
}

/* CORNER TRIANGULAR DOT GRIDS */
.corner-dots-container {
    position: absolute;
    width: 120px;
    height: 120px;
}

.corner-dot {
    position: absolute;
    /* Desktop: Fixed 8px. Below 950px: vw scaling */
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

/* Below 950px - Scale dots with viewport */
@media (max-width: 949px) {
    .corner-dot {
        /* Use vw for both to keep dots square. 0.8vw = ~6.56px on 820px iPad */
        width: clamp(4px, 0.8vw, 8px);
        height: clamp(4px, 0.8vw, 8px);
    }
}

/* Top Left Corner Dots */
.corner-dots-tl {
    top: 3vh;
    left: 1.67vw;
}

/* Top Right Corner Dots */
.corner-dots-tr {
    top: 3vh;
    right: 1.67vw;
}

/* Bottom Left Corner Dots */
.corner-dots-bl {
    bottom: 3vh;
    left: 1.67vw;
}

/* Bottom Right Corner Dots */
.corner-dots-br {
    bottom: 3vh;
    right: 1.67vw;
}

/* LEFT MARGIN ELEMENTS */

/* Hexagonal cluster */
.margin-left-hex {
    position: absolute;
    top: 25%;
    left: 2.5vw;
    overflow: visible; /* Prevent clipping during rotation */
}

/* Crystalline triangle */
.margin-left-triangle {
    position: absolute;
    top: 50%;
    left: 3.33vw;
    width: 0;
    height: 0;
    border-left: 1.15vw solid transparent;
    border-right: 1.15vw solid transparent;
    border-bottom: 2.29vw solid #b31420; /* 44px on 1920px = 2.29vw. Use vw to maintain proportions */
}

/* Organic blob */
.margin-left-blob {
    position: absolute;
    top: 66.6667%;
    left: 2vw;
    width: 2.2vw;
    height: 2.2vw; /* Use vw for both to maintain square proportions */
    background-color: #897f80;
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
}

/* RIGHT MARGIN ELEMENTS */

/* Parallel lines */
.margin-right-lines {
    position: absolute;
    top: 33.3333%;
    right: 3vw;
}

/* Dodecagon */
.margin-right-dodecagon {
    position: absolute;
    top: 50%;
    right: 2vw;
    overflow: visible; /* Prevent clipping during rotation */
}

/* Soft blob */
.margin-right-blob {
    position: absolute;
    top: 75%;
    right: 2.5vw;
    width: 2.1vw;
    height: 2.1vw; /* Use vw for both to maintain square proportions */
    background-color: #e8b0b9;
    border-radius: 48% 52% 68% 32% / 42% 68% 32% 58%;
}

/* TOP MARGIN ELEMENTS */

/* Chevron */
.margin-top-chevron {
    position: absolute;
    top: 4vh;
    left: 25%;
    overflow: visible; /* Prevent clipping during rotation */
}

/* Molecular node cluster */
.margin-top-molecular {
    position: absolute;
    top: 5vh;
    left: 50%;
    transform: translateX(-50%);
    overflow: visible; /* Prevent clipping during rotation */
}

/* Angular crystalline form */
.margin-top-crystal {
    position: absolute;
    top: 4.5vh;
    right: 25%;
    width: 2.2vw;
    height: 2.2vw; /* Use vw for both to maintain square proportions */
    background-color: #897f80;
    clip-path: polygon(50% 0%, 90% 30%, 75% 100%, 25% 100%, 10% 30%);
    overflow: visible; /* Prevent clipping during rotation */
}

/* BOTTOM MARGIN ELEMENTS */

/* Hexagonal grid */
.margin-bottom-hex {
    position: absolute;
    bottom: 4.5vh;
    left: 33.3333%;
    overflow: visible; /* Prevent clipping during rotation */
}

/* Grid of dots */
.margin-bottom-dots {
    position: absolute;
    bottom: 4vh;
    left: 50%;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4vw;
    transition: transform 4.2s ease-out, opacity 4.2s ease-out;
    will-change: transform;
}

/* Grid dots migrate down slightly and fade when content is in view */
.margin-bottom-dots.migrated {
    transform: translateX(-30%) translateY(10vh);
    opacity: 0.3;
}

.grid-dot {
    /* Desktop: Fixed 6px. Below 950px: vw scaling */
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #57c567;
}

@media (max-width: 949px) {
    .grid-dot {
        /* Use vw for both to keep dots square. 0.6vw = ~4.92px on 820px iPad */
        width: clamp(3px, 0.6vw, 6px);
        height: clamp(3px, 0.6vw, 6px);
    }
}

/* Organic blob */
.margin-bottom-blob {
    position: absolute;
    bottom: 5vh;
    right: 33.3333%;
    width: 2.3vw;
    height: 2.3vw; /* Use vw for both to maintain square proportions */
    background-color: #171717;
    border-radius: 72% 28% 41% 59% / 58% 71% 29% 42%;
    overflow: visible; /* Prevent clipping during animation */
}

/* SCATTERED DETAIL DOTS */
.dots-left {
    position: absolute;
    top: 25%;
    left: 5vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4vw;
    transition: transform 2.2s ease-out, opacity 2.2s ease-out;
    will-change: transform;
}

.dots-right {
    position: absolute;
    top: 33.3333%;
    right: 5vw;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4vw;
    transition: transform 2.2s ease-out, opacity 2.2s ease-out;
    will-change: transform;
}

.dots-bottom-left {
    position: absolute;
    bottom: 33.3333%;
    left: 25%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4vw;
    transition: transform 2.2s ease-out, opacity 2.2s ease-out;
    will-change: transform;
}

.dots-bottom-right {
    position: absolute;
    bottom: 25%;
    right: 25%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4vw;
    transition: transform 2.2s ease-out, opacity 2.2s ease-out;
    will-change: transform;
}

/* DOT MIGRATION STATES - Top dots move UP toward titles, bottom dots move DOWN */

/* TOP DOTS - Move UP to bracket the title, creating a frame */
.dots-left.migrated {
    transform: translateX(-1vw) translateY(-10vh);
    opacity: 0.45;
}

.dots-right.migrated {
    transform: translateX(2vw) translateY(-14vh);
    opacity: 0.45;
}

/* BOTTOM DOTS - Move DOWN and slightly outward, away from text */
.dots-bottom-left.migrated {
    transform: translate(-8vw, 15vh);
    opacity: 0.45;
}

.dots-bottom-right.migrated {
    transform: translate(8vw, 12vh);
    opacity: 0.45;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
    .dots-left,
    .dots-right,
    .dots-bottom-left,
    .dots-bottom-right,
    .margin-bottom-dots {
        transition: none;
    }
    
    /* Simply hide dots instead of animating for users who prefer reduced motion */
    .dots-left.migrated,
    .dots-right.migrated,
    .dots-bottom-left.migrated,
    .dots-bottom-right.migrated,
    .margin-bottom-dots.migrated {
        opacity: 0;
        transform: none;
    }
}

.dot {
    /* Desktop: Fixed 8px. Below 950px: vw scaling */
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

@media (max-width: 949px) {
    .dot {
        /* Use vw for both to keep dots square */
        width: clamp(4px, 0.8vw, 8px);
        height: clamp(4px, 0.8vw, 8px);
    }
}

.dot-dark {
    background-color: #171717;
}

.dot-red {
    background-color: #b31420;
}

.dot-green {
    background-color: #57c567;
}

.dot-pink {
    background-color: #e8b0b9;
}

.dot-bright-green {
    background-color: #64d570;
}

.dot-gray {
    background-color: #897f80;
}

.dot-light-gray {
    background-color: #b9a8a9;
}

/* SUBTLE DIRECTIONAL LINES */
.svg-lines {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.1;
    pointer-events: none;
}

/* Subtle grid for order - very faint */
.grid-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    pointer-events: none;
}

/* CSS ANIMATIONS */

/* Framing lines animations */
@keyframes frameLineTop {
    0%, 100% { 
        transform: scaleX(0.95);
        opacity: 0.5;
    }
    50% { 
        transform: scaleX(1);
        opacity: 0.7;
    }
}

@keyframes frameLineBottom {
    0%, 100% { 
        transform: scaleX(0.95);
        opacity: 0.5;
    }
    50% { 
        transform: scaleX(1);
        opacity: 0.7;
    }
}

@keyframes frameLineLeft {
    0%, 100% { 
        transform: scaleY(0.92);
        opacity: 0.45;
    }
    50% { 
        transform: scaleY(1);
        opacity: 0.65;
    }
}

@keyframes frameLineRight {
    0%, 100% { 
        transform: scaleY(0.92);
        opacity: 0.45;
    }
    50% { 
        transform: scaleY(1);
        opacity: 0.65;
    }
}

@keyframes frameLineSecondaryTop {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.6; }
}

@keyframes frameLineSecondaryBottom {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.6; }
}

/* Corner dot animations */
@keyframes cornerDotTL {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.4);
        opacity: 0.95;
    }
}

@keyframes cornerDotTR {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.75;
    }
    50% { 
        transform: scale(1.4);
        opacity: 1;
    }
}

@keyframes cornerDotBL {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.4);
        opacity: 0.95;
    }
}

@keyframes cornerDotBR {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.75;
    }
    50% { 
        transform: scale(1.4);
        opacity: 1;
    }
}

/* Left margin animations */
@keyframes hexRotate {
    0%, 100% { 
        transform: rotate(0deg);
        opacity: 0.65;
    }
    50% { 
        transform: rotate(60deg);
        opacity: 0.85;
    }
}

@keyframes hexInner {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.6;
    }
}

@keyframes triangleMove {
    0%, 100% { 
        transform: translateY(0) rotate(0deg);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(-1vh) rotate(180deg);
        opacity: 0.9;
    }
}

@keyframes blobLeft {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.65;
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    }
    50% { 
        transform: scale(1.15);
        opacity: 0.85;
        border-radius: 47% 53% 42% 58% / 63% 52% 48% 37%;
    }
}

/* Right margin animations */
@keyframes lineMove {
    0%, 100% { 
        transform: translateX(0);
        opacity: 0.65;
    }
    50% { 
        transform: translateX(-10px);
        opacity: 0.85;
    }
}

@keyframes dodecagonRotate {
    0%, 100% { 
        transform: rotate(0deg);
        opacity: 0.65;
    }
    50% { 
        transform: rotate(30deg);
        opacity: 0.85;
    }
}

@keyframes dodecagonCircle {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.5;
    }
    50% { 
        transform: scale(1.33);
        opacity: 0.7;
    }
}

@keyframes blobRight {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
        border-radius: 48% 52% 68% 32% / 42% 68% 32% 58%;
    }
    50% { 
        transform: scale(1.2);
        opacity: 0.9;
        border-radius: 58% 42% 35% 65% / 68% 38% 62% 32%;
    }
}

/* Top margin animations */
@keyframes chevronMove {
    0%, 100% { 
        transform: translateY(-3px);
        opacity: 0.7;
    }
    50% { 
        transform: translateY(3px);
        opacity: 0.9;
    }
}

@keyframes molecularPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.33);
        opacity: 0.9;
    }
}

@keyframes crystalRotate {
    0%, 100% { 
        transform: rotate(0deg);
        opacity: 0.65;
    }
    50% { 
        transform: rotate(72deg);
        opacity: 0.85;
    }
}

/* Bottom margin animations */
@keyframes hexBottomScale {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.65;
    }
    50% { 
        transform: scale(1.1);
        opacity: 0.85;
    }
}

@keyframes hexBottomRotate {
    0%, 100% { 
        transform: rotate(0deg);
        opacity: 0.4;
    }
    50% { 
        transform: rotate(60deg);
        opacity: 0.6;
    }
}

@keyframes gridDotPulse {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.65;
    }
    50% { 
        transform: scale(1.5);
        opacity: 0.9;
    }
}

@keyframes blobBottom {
    0%, 100% { 
        transform: translateY(0);
        opacity: 0.7;
        border-radius: 72% 28% 41% 59% / 58% 71% 29% 42%;
    }
    50% { 
        transform: translateY(-8px);
        opacity: 0.9;
        border-radius: 38% 62% 55% 45% / 72% 34% 66% 28%;
    }
}

/* Dot animations */
@keyframes dotPulseLeft {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: scale(1.4);
        opacity: 0.7;
    }
}

@keyframes dotPulseRight {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.4;
    }
    50% { 
        transform: scale(1.4);
        opacity: 0.7;
    }
}

@keyframes dotPulseBottomLeft {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.35;
    }
    50% { 
        transform: scale(1.3);
        opacity: 0.65;
    }
}

@keyframes dotPulseBottomRight {
    0%, 100% { 
        transform: scale(1);
        opacity: 0.35;
    }
    50% { 
        transform: scale(1.3);
        opacity: 0.65;
    }
}

/* SVG line animations */
@keyframes svgLine1 {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.15; }
}

@keyframes svgLine2 {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.15; }
}

@keyframes svgLine3 {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.15; }
}

@keyframes svgLine4 {
    0%, 100% { opacity: 0.05; }
    50% { opacity: 0.15; }
}

/* Apply animations */
.frame-line-top {
    animation: frameLineTop 12s ease-in-out infinite;
}

.frame-line-bottom {
    animation: frameLineBottom 14s ease-in-out infinite;
}

.frame-line-left {
    animation: frameLineLeft 16s ease-in-out infinite;
}

.frame-line-right {
    animation: frameLineRight 15s ease-in-out infinite;
}

.frame-line-secondary-top {
    animation: frameLineSecondaryTop 10s ease-in-out infinite;
}

.frame-line-secondary-bottom {
    animation: frameLineSecondaryBottom 11s ease-in-out infinite;
}

/* Corner dots - staggered delays will be applied via nth-child */
.corner-dots-tl .corner-dot {
    animation: cornerDotTL 3s ease-in-out infinite;
}

.corner-dots-tr .corner-dot {
    animation: cornerDotTR 3.2s ease-in-out infinite;
}

.corner-dots-bl .corner-dot {
    animation: cornerDotBL 3.5s ease-in-out infinite;
}

.corner-dots-br .corner-dot {
    animation: cornerDotBR 3.8s ease-in-out infinite;
}

/* Left margin */
.margin-left-hex polygon:first-child {
    animation: hexRotate 12s ease-in-out infinite;
    transform-origin: 1.43vw 2.55vh;
}

.margin-left-hex polygon:last-child {
    animation: hexInner 8s ease-in-out infinite;
    transform-origin: 1.43vw 2.55vh;
}

.margin-left-triangle {
    animation: triangleMove 16s ease-in-out infinite;
}

.margin-left-blob {
    animation: blobLeft 8s ease-in-out infinite;
}

/* Right margin */
.margin-right-lines line {
    animation: lineMove 4s ease-in-out infinite;
}

.margin-right-dodecagon polygon {
    animation: dodecagonRotate 15s ease-in-out infinite;
    transform-origin: 1.3vw 2.31vh;
}

.margin-right-dodecagon circle {
    animation: dodecagonCircle 10s ease-in-out infinite;
    transform-origin: 1.3vw 2.31vh;
}

.margin-right-blob {
    animation: blobRight 9s ease-in-out infinite;
}

/* Top margin */
.margin-top-chevron path {
    animation: chevronMove 8s ease-in-out infinite;
}

.margin-top-molecular circle:not(:first-child) {
    animation: molecularPulse 4s ease-in-out infinite;
}

.margin-top-molecular circle:nth-child(2) {
    animation-delay: 0.5s;
}

.margin-top-molecular circle:nth-child(4) {
    animation-delay: 1s;
}

.margin-top-molecular circle:nth-child(6) {
    animation-delay: 1.5s;
}

.margin-top-crystal {
    animation: crystalRotate 14s ease-in-out infinite;
}

/* Bottom margin */
.margin-bottom-hex polygon:first-child {
    animation: hexBottomScale 10s ease-in-out infinite;
    transform-origin: 1.3vw 2.22vh;
}

.margin-bottom-hex polygon:last-child {
    animation: hexBottomRotate 16s ease-in-out infinite;
    transform-origin: 1.3vw 2.22vh;
}

.margin-bottom-dots .grid-dot {
    animation: gridDotPulse 2s ease-in-out infinite;
}

.margin-bottom-blob {
    animation: blobBottom 9s ease-in-out infinite;
}

/* Scattered dots with staggered delays */
.dots-left .dot:nth-child(1) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 0s; }
.dots-left .dot:nth-child(2) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 0.15s; }
.dots-left .dot:nth-child(3) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 0.3s; }
.dots-left .dot:nth-child(4) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 0.45s; }
.dots-left .dot:nth-child(5) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 0.6s; }
.dots-left .dot:nth-child(6) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 0.75s; }
.dots-left .dot:nth-child(7) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 0.9s; }
.dots-left .dot:nth-child(8) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 1.05s; }
.dots-left .dot:nth-child(9) { animation: dotPulseLeft 2s ease-in-out infinite; animation-delay: 1.2s; }

.dots-right .dot:nth-child(1) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 0s; }
.dots-right .dot:nth-child(2) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 0.15s; }
.dots-right .dot:nth-child(3) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 0.3s; }
.dots-right .dot:nth-child(4) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 0.45s; }
.dots-right .dot:nth-child(5) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 0.6s; }
.dots-right .dot:nth-child(6) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 0.75s; }
.dots-right .dot:nth-child(7) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 0.9s; }
.dots-right .dot:nth-child(8) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 1.05s; }
.dots-right .dot:nth-child(9) { animation: dotPulseRight 2.2s ease-in-out infinite; animation-delay: 1.2s; }

.dots-bottom-left .dot:nth-child(1) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0s; }
.dots-bottom-left .dot:nth-child(2) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0.12s; }
.dots-bottom-left .dot:nth-child(3) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0.24s; }
.dots-bottom-left .dot:nth-child(4) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0.36s; }
.dots-bottom-left .dot:nth-child(5) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0.48s; }
.dots-bottom-left .dot:nth-child(6) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0.6s; }
.dots-bottom-left .dot:nth-child(7) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0.72s; }
.dots-bottom-left .dot:nth-child(8) { animation: dotPulseBottomLeft 2.5s ease-in-out infinite; animation-delay: 0.84s; }

.dots-bottom-right .dot:nth-child(1) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0s; }
.dots-bottom-right .dot:nth-child(2) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0.12s; }
.dots-bottom-right .dot:nth-child(3) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0.24s; }
.dots-bottom-right .dot:nth-child(4) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0.36s; }
.dots-bottom-right .dot:nth-child(5) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0.48s; }
.dots-bottom-right .dot:nth-child(6) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0.6s; }
.dots-bottom-right .dot:nth-child(7) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0.72s; }
.dots-bottom-right .dot:nth-child(8) { animation: dotPulseBottomRight 2.3s ease-in-out infinite; animation-delay: 0.84s; }

/* Grid dots with staggered delays */
.margin-bottom-dots .grid-dot:nth-child(1) { animation-delay: 0s; }
.margin-bottom-dots .grid-dot:nth-child(2) { animation-delay: 0.1s; }
.margin-bottom-dots .grid-dot:nth-child(3) { animation-delay: 0.2s; }
.margin-bottom-dots .grid-dot:nth-child(4) { animation-delay: 0.3s; }
.margin-bottom-dots .grid-dot:nth-child(5) { animation-delay: 0.4s; }
.margin-bottom-dots .grid-dot:nth-child(6) { animation-delay: 0.5s; }
.margin-bottom-dots .grid-dot:nth-child(7) { animation-delay: 0.6s; }
.margin-bottom-dots .grid-dot:nth-child(8) { animation-delay: 0.7s; }
.margin-bottom-dots .grid-dot:nth-child(9) { animation-delay: 0.8s; }
.margin-bottom-dots .grid-dot:nth-child(10) { animation-delay: 0.9s; }
.margin-bottom-dots .grid-dot:nth-child(11) { animation-delay: 1.0s; }
.margin-bottom-dots .grid-dot:nth-child(12) { animation-delay: 1.1s; }
.margin-bottom-dots .grid-dot:nth-child(13) { animation-delay: 1.2s; }
.margin-bottom-dots .grid-dot:nth-child(14) { animation-delay: 1.3s; }
.margin-bottom-dots .grid-dot:nth-child(15) { animation-delay: 1.4s; }
.margin-bottom-dots .grid-dot:nth-child(16) { animation-delay: 1.5s; }

/* Right margin lines with staggered delays */
.margin-right-lines line:nth-child(1) { animation-delay: 0s; }
.margin-right-lines line:nth-child(2) { animation-delay: 0.2s; }
.margin-right-lines line:nth-child(3) { animation-delay: 0.4s; }
.margin-right-lines line:nth-child(4) { animation-delay: 0.6s; }
.margin-right-lines line:nth-child(5) { animation-delay: 0.8s; }

/* SVG line animations */
.svg-line-1 {
    animation: svgLine1 8s ease-in-out infinite;
}

.svg-line-2 {
    animation: svgLine2 9s ease-in-out infinite;
}

.svg-line-3 {
    animation: svgLine3 10s ease-in-out infinite;
}

.svg-line-4 {
    animation: svgLine4 8.5s ease-in-out infinite;
}

/* End of Geometric Pattern P7 Styles */

/* Carousel Wrapper */
.carousel-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    z-index: 2;
    flex: 1 0 auto; /* Take available vertical space, push footer to bottom */
    /* Text content now visible to view with new geometric pattern design */
    /* display: none; */
}

.carousel-container {
    display: flex;
    width: 100%;
    height: 100%;
    position: relative;
    transition: transform 0.5s ease-in-out;
}

/* Resume Sections */
.resume-section {
    min-width: 100%;
    width: 100%;
    padding: 60px min(5vw, 80px);  /* Responsive horizontal padding - scales from 41px@1024px to 80px@2000px+ */
    background-color: transparent;
    opacity: 0;
    transform: translateX(100%);
    transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
    position: absolute;
    top: 0;
    left: 0;
    /* height: 100%; */ /* REMOVED - let content determine height */
    min-height: 50vh;  /* Minimum viewport height */
    height: auto;  /* Content-driven height */
    overflow-y: auto;
    z-index: 3;
}

.resume-section.active {
    opacity: 1;
    transform: translateX(0);
    position: relative;
    z-index: 10;
}

.resume-section.prev {
    transform: translateX(-100%);
}

.resume-section.next {
    transform: translateX(100%);
}

/* Profile section override - no longer needed, using global height: auto solution */
/* #profile-section {
    height: auto;
    min-height: 100vh;
} */

.section-content {
    max-width: 900px;
    margin: 0 auto;
    /* Removed flexbox - using block layout for simpler structure */
    padding-top: 6rem;
}

.section-content h2 {
    font-family: 'Barriecito', cursive;
    font-size: 3rem;
    color: #B31420;
    margin-bottom: 2rem;
    margin-top: 0;
    text-align: center;
    text-shadow: 
        -0.25px -0.25px 0 #E8B0B9,
        0.25px -0.25px 0 #E8B0B9,
        -0.25px 0.25px 0 #E8B0B9,
        0.25px 0.25px 0 #E8B0B9;
    position: relative;
    /* top: -3rem; */ /* Removed - testing if this was causing grid offset in flexbox */
}

.section-content p {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.8;
    color: #171717;
    margin-top: 0;
    margin-bottom: 1rem;
}

.section-content a {
    color: #64D570;
    text-decoration: none;
    transition: color 0.3s ease;
}

.section-content a:hover {
    color: #57c567;
    text-decoration: underline;
}

/* Contact Section - DEPRECATED: Now using modal popup instead */
/* Keep this code for reference but hide the old panel */
#contact-section {
    display: none !important; /* Modal replaces panel functionality */
}

.contact-info {
    text-align: center;
}

.contact-info p {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
}

.contact-links {
    margin-top: 2rem;
    text-align: left;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.contact-links p {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 0.6rem;
}

/* Contact icon row (email, website, GitHub, LinkedIn, Stack Overflow) */
.contact-icon-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1.25rem;
    margin: 1rem 0 1.5rem;
}

.contact-icon-row a {
    color: #171717;
    font-size: 1.6rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none; /* No underline for icon links */
    transition: color 0.2s ease, transform 0.2s ease;
}

.contact-icon-row a:hover {
    color: #64D570;
    transform: translateY(-2px);
    text-decoration: none; /* Prevent underline on hover */
}

/* Experience Section */
.experience-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.experience-item {
    padding: 1.5rem;
    background-color: transparent;
    border-left: 4px solid #64D570;
}

/* Experience Title - Clickable (same pattern as project titles) */
.experience-title-clickable {
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Trirong', serif;
    font-weight: 600;
    font-size: 1.7rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    width: 100%;
    margin: 0 0 0.5rem 0;
}

.experience-title-clickable:hover {
    color: #64D570;
}

.experience-title-text {
    flex: 1 1 0;
    min-width: 0;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.experience-title-triangle {
    width: 0;
    height: 0;
    border-top: 0.75rem solid transparent;
    border-bottom: 0.75rem solid transparent;
    border-left: 1.125rem solid #b31420;
    transition: border-left-color 0.2s ease, transform 0.2s ease;
    flex: 0 0 1.875rem;
}

.experience-title-clickable:hover .experience-title-triangle {
    border-left-color: #64D570;
    transform: scale(1.1);
}

/* Keep regular experience h3 styling for non-clickable items */
.experience-item h3:not(.experience-title-clickable) {
    border-radius: 4px;
}

/* Keep regular experience h3 styling for non-clickable items */
.experience-item h3:not(.experience-title-clickable) {
    font-family: 'Trirong', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #171717;
    margin-bottom: 0.5rem;
}

.experience-item .company {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    color: #897F80;
    font-style: italic;
    margin-bottom: 0.3rem;
}

.experience-item .period {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    color: #B9A8A9;
}

/* Skills Section */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}

.skill-category {
    padding: 1.5rem;
    background-color: transparent;
    border-radius: 8px;
    border-top: 3px solid #57c567;
}

/* Skills Header - Flexbox Layout: Triangle | Text (matches Education pattern) */
.skills-header {
    font-family: 'Trirong', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #171717;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    display: flex;
    gap: 0.75rem;  /* Slightly tighter gap than Education (1rem) for Skills card context */
    align-items: center;  /* Vertically centers triangle with text block */
    width: 100%;  /* Full width to allow text to fill remaining space */
    line-height: 1.3;  /* Tighter line spacing for wrapped text to maintain visual grouping */
}

.skills-header:hover {
    color: #64D570;
}

/* Remove default blue focus outline, add custom styling */
.skills-header:focus {
    outline: none; /* Remove browser default blue border */
}

/* Optional: Add subtle custom focus indicator for accessibility */
.skills-header:focus-visible {
    outline: 2px solid #64D570; /* Green outline matching hover color */
    outline-offset: 2px;
    border-radius: 4px;
}

/* Text container - fills remaining space after triangle */
.skills-header-text {
    flex: 1 1 0;  /* Fill remaining space, can shrink, base size 0 */
    min-width: 0;  /* Allows text to shrink below content size for wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Triangle indicator - always visible, points right, fixed width on left */
.skills-header-triangle {
    width: 0;
    height: 0;
    border-top: 0.75rem solid transparent;
    border-bottom: 0.75rem solid transparent;
    border-left: 1.125rem solid #b31420;
    transition: border-left-color 0.2s ease, transform 0.3s ease;
    flex: 0 0 1.875rem;  /* Fixed 1.875rem width (1.125rem triangle + 0.75rem spacing) */
    transform-origin: 0.375rem center;  /* Set pivot point to center of visual triangle */
}

.skills-header:hover .skills-header-triangle {
    border-left-color: #64D570;
    transform: scale(1.1);
}

/* Rotate 90° clockwise when expanded (points down) */
.skills-header.expanded .skills-header-triangle {
    transform: rotate(90deg);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .skills-header-triangle {
        transition: border-left-color 0.2s ease;
    }
    
    .skills-header:hover .skills-header-triangle {
        transform: none;
    }
    
    .skills-header.expanded .skills-header-triangle {
        transform: rotate(90deg);
    }
}

/* Skills Body - Collapsible Content */
.skills-body {
    display: flex;
    flex-direction: column;
    gap: 0;  /* Remove gaps - tighter spacing between items */
    padding-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
    margin-bottom: 0;
}

.skills-body.expanded {
    max-height: 1500px;  /* Large enough for longest category (Professional Approach: 6 items) */
    margin-bottom: 0;
}

.skills-body p {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.6;
    color: #171717;
    margin-bottom: 0.8rem;
}

.skills-body p:last-child {
    margin-bottom: 0;
}

/* Projects Section */
.projects-list {
    display: flex;
    flex-direction: column;
    gap: 0;  /* Remove gaps between projects */
}

.project-item {
    padding: 2rem;
    background-color: transparent;
    border-radius: 4px;
    position: relative;  /* For pseudo-element positioning */
}

/* Red vertical bar - spans content only, excludes padding */
/* COMMENTED OUT - Testing layout without red bars */
/*
.project-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 2rem;
    bottom: 2rem;
    width: 4px;
    background-color: #B31420;
    border-radius: 2px;
}
*/

.project-item h3 {
    font-family: 'Trirong', serif;
    font-size: 1.7rem;
    color: #171717;
    margin-bottom: 1rem;
    font-weight: 600;
}

.project-item p {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 0.8rem;
    margin-left: 2.375rem;  /* Align with title text (after triangle 1.875rem + gap 0.5rem) */
}

.project-item .project-org {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    color: #897F80;
    font-style: italic;
    margin-top: 0.5rem;
    margin-left: 2.375rem;  /* Align with title text (after triangle 1.875rem + gap 0.5rem) */
}

/* Education Section */
.education-list {
    display: flex;
    flex-direction: column;
    gap: 0;  /* Remove gaps between education items */
}

.education-item {
    padding: 1.5rem;
    margin-bottom: 1.5rem;  /* Visual separation between education groups */
    background-color: transparent;
    /* border-left: 4px solid #64D570; */ /* Removed - using background elements only */
    border-radius: 4px;
}

.education-item h3 {
    font-family: 'Trirong', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #171717;
    margin-top: 0;
    margin-bottom: 0.75rem;  /* Reduced to keep title closer to its content */
    line-height: 1.3;  /* Tighter line spacing for wrapped text */
}

.education-item p {
    font-family: 'Pridi', serif;
    font-weight: 350;  /* Consistent font-weight for all education items */
    font-size: 1.4rem;
    margin-bottom: 0.5rem;
    padding-left: 3rem;  /* Align with .historical-header-text (triangle 1.875rem + gap 1rem = 2.875rem total) */
    line-height: 1.4;  /* Balanced line spacing for readability and grouping */
}

/* Historical Section - Historical Education */
.education-historical {
    margin-top: 0;  /* No extra top margin, relies on previous item's margin-bottom */
    padding: 1.5rem;  /* Match .education-item padding */
    background-color: transparent;
    /* border-left: 4px solid #64D570; */ /* Removed - using background elements only */
    border-radius: 4px;
}

/* Historical Header - Flexbox Layout: Text | Triangle */
.historical-header {
    font-family: 'Trirong', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: #171717;
    margin-top: 0;
    margin-bottom: 1rem;
    padding: 0;
    cursor: pointer;
    user-select: none;
    transition: color 0.2s ease;
    display: flex;
    gap: 1rem;  /* Increased gap to prevent rotation overlap */
    align-items: center;  /* Vertically centers triangle with text block */
    width: 100%;  /* Full width to allow text to fill remaining space */
    line-height: 1.3;  /* Tighter line spacing for wrapped text to maintain visual grouping */
}

.historical-header:hover {
    color: #64D570;
}

/* Text container - fills remaining space after triangle */
.historical-header-text {
    flex: 1 1 0;  /* Fill remaining space, can shrink, base size 0 */
    min-width: 0;  /* Allows text to shrink below content size for wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
    /* Removed negative margin - let flexbox gap naturally space text from triangle */
}

/* Triangle indicator - always visible, points right, fixed width on left */
.historical-header-triangle {
    width: 0;
    height: 0;
    border-top: 0.75rem solid transparent;
    border-bottom: 0.75rem solid transparent;
    border-left: 1.125rem solid #b31420;
    transition: border-left-color 0.2s ease, transform 0.3s ease;
    flex: 0 0 1.875rem;  /* Fixed 1.875rem width (1.125rem triangle + 0.75rem spacing) */
    transform-origin: 0.375rem center;  /* Set pivot point to center of visual triangle */
}

.historical-header:hover .historical-header-triangle {
    border-left-color: #64D570;
    transform: scale(1.1);
}

/* Rotate 90° clockwise when expanded (points down) */
.historical-header.expanded .historical-header-triangle {
    transform: rotate(90deg);
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .historical-header-triangle {
        transition: border-left-color 0.2s ease;
    }
    
    .historical-header:hover .historical-header-triangle {
        transform: none;
    }
    
    .historical-header.expanded .historical-header-triangle {
        transform: rotate(90deg);
    }
}

.historical-list {
    display: flex;
    flex-direction: column;
    gap: 0;  /* Remove gaps - tighter spacing between items */
    padding-left: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, margin-bottom 0.4s ease-out;
    margin-bottom: 0;
}

.historical-list.expanded {
    max-height: 2000px;
    margin-bottom: 0;
}

.historical-item {
    margin-bottom: 0.75rem;  /* Add spacing between items (since gap removed) */
    padding-left: 4rem;  /* Indentation for historical items */
}

.historical-item:last-child {
    margin-bottom: 0;  /* No margin on last item */
}

.historical-institution {
    font-family: 'Trirong', serif;
    font-size: 1.2rem;
    font-weight: 600;
    color: #171717;
    display: block;
    margin-bottom: 0.1rem;
    line-height: 1.2;  /* Tighter line spacing for better grouping */
}

.historical-course {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 0;
    padding-left: 1rem;
    line-height: 1.3;  /* Tighter line spacing for better grouping */
    color: #171717;
    line-height: 1.3;
}

/* References Section */
.references-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.reference-item {
    padding: 1.5rem;
    background-color: transparent;
    border-left: 4px solid #E8B0B9;
    border-radius: 4px;
}

.reference-item p {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

/* Tablet Responsive for Carousel */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Show hamburger menu on tablet - larger size, bottom-right aligned with hero text */
    .hamburger-menu {
        display: flex;
        position: fixed;
        width: 3.5rem; /* Increased from 2.5rem */
        height: 3.5rem; /* Increased from 2.5rem */
        right: 3rem; /* Match hero text left: 3rem spacing */
        bottom: 15%; /* Align with hero text bottom: 15% */
        padding: 0.75rem; /* Increased padding */
        overflow: visible; /* Allow X icon to extend beyond container when active */
    }
    
    /* Expand hamburger menu container when active - separate from side drawer */
    .hamburger-menu.active {
        width: 4.5rem; /* Larger container when active to fit rotated X */
        height: 4.5rem; /* Larger container when active to fit rotated X */
        padding: 5px; /* Reduced padding to maximize content area for rotated lines */
        right: 3rem; /* Maintain right alignment when active */
        bottom: 15%; /* Maintain bottom alignment when active */
        justify-content: center; /* Center lines vertically when active for centered X */
        border-radius: 4px; /* Restore border radius for distinct button */
        background-color: rgba(137, 127, 128, 0.85); /* Original button background */
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); /* Restore button shadow */
    }
    
    /* Tablet-specific transforms - larger content area allows for slightly different values */
    .hamburger-menu.active .hamburger-line:nth-child(1) {
        transform: rotate(45deg) translateY(0.2rem) translateX(0.025rem); /* Decreased translateX to 0.05rem to center X */
    }
    
    .hamburger-menu.active .hamburger-line:nth-child(3) {
        transform: rotate(-45deg) translateY(-0.2rem) translateX(0.025rem); /* Decreased translateX to 0.05rem to center X */
    }
    
    /* Side drawer navigation - slides in from right edge */
    .mobile-nav {
        display: block; /* Required for position: fixed to work */
        position: fixed;
        top: 0;
        right: 0;
        width: 240px; /* Fixed width for drawer - reduced from 320px */
        height: 100vh; /* Full viewport height */
        background-color: rgba(137, 127, 128, 0.98);
        backdrop-filter: blur(10px);
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: 0;
        padding: 0;
        margin: 0;
        overflow-y: auto; /* Allow scrolling if content exceeds height */
        transition: transform 0.3s ease, opacity 0.3s ease, visibility 0.3s ease;
        box-shadow: -4px 0 12px rgba(0, 0, 0, 0.2); /* Shadow on left edge */
        z-index: 998; /* Below hamburger button */
        list-style: none;
        transform: translateX(100%); /* Hidden off-screen to the right */
        opacity: 1; /* Keep opacity at 1 for smooth transition */
        visibility: visible; /* Keep visible for transform to work */
        pointer-events: none; /* Prevent interaction when hidden */
    }
    
    .mobile-nav.active {
        transform: translateX(0); /* Slide into view */
        pointer-events: auto; /* Allow interaction when active */
        padding-top: 2rem; /* Top spacing for drawer content */
    }
    
    .mobile-nav li {
        width: 100%;
        margin: 0;
    }
    
    .mobile-nav a {
        display: block;
        width: 100%;
        font-family: 'Poiret One', cursive;
        color: #F8F9FF;
        text-decoration: none;
        font-size: 1.5rem;
        padding: 1rem 2rem;
        text-align: left;
        border-left: 4px solid transparent;
        transition: all 0.3s ease;
        position: relative; /* Create stacking context */
        z-index: 10; /* Above any geometric patterns */
        min-height: 48px; /* iOS minimum touch target size (44px + padding) */
        touch-action: manipulation; /* Optimize touch response, disable double-tap zoom */
        cursor: pointer; /* Ensure pointer cursor on hover */
        -webkit-tap-highlight-color: rgba(100, 213, 112, 0.2); /* Visual feedback on tap */
    }
    
    /* Active/pressed state for immediate touch feedback */
    .mobile-nav a:active {
        background-color: rgba(100, 213, 112, 0.15);
        transform: scale(0.98);
    }
    
    .mobile-nav a:hover,
    .mobile-nav a.active {
        background-color: rgba(100, 213, 112, 0.1);
        border-left-color: #64D570;
        padding-left: 2.5rem;
        color: #64D570;
    }
    
    /* Position hero text aligned with hamburger menu left edge, moved down 10-15% */
    .hero-section-text {
        left: 3rem; /* Aligned with hamburger menu left edge */
        top: auto;
        bottom: 15%; /* Moved down from 22% to 15% (about 10-15% lower) */
        right: 5%;
    }
    
    .hero-name {
        font-size: 4rem; /* Increased from 3rem - closer to desktop 5rem */
    }
    
    .hero-title {
        font-size: 2rem; /* Increased from 1.5rem - closer to desktop 2rem */
        margin-top: 0.3em;
    }
    
    .resume-section {
        padding: 50px min(6vw, 80px); /* Responsive horizontal padding - inherits from global setting */
    }
    
    .section-content {
        padding-top: 2rem; /* Reduced from 6rem (96px) to 2rem (32px) */
        padding-bottom: 2rem; /* Added bottom padding for consistency */
    }
    
    .section-content h2 {
        font-size: 2.5rem; /* Increased from 2rem to compensate for Barriecito's condensed appearance vs Trirong H3 */
    }
}

/* iPad Safari viewport adjustment - Safari calculates viewport units differently than Chrome */
/* Safari includes browser chrome in viewport calculations, causing text to appear closer to image */
@media (min-width: 769px) and (max-width: 1366px) and (orientation: landscape) {
    .hero-section-text {
        bottom: 20%; /* Slightly higher on iPad landscape to prevent text from being too close to image chin */
    }
    
    /* Profile section spacing - reduce excessive top padding on landscape tablets */
    .section-content {
        padding-top: 3.5rem;  /* Reduced from 6rem for better vertical space usage */
        padding-top: 3.0rem;  /* Reduced from 6rem for better vertical space usage */
    }
}

/* Mobile Responsive for Carousel */
@media (max-width: 768px) {
    .resume-section {
        padding: 40px min(5vw, 80px); /* Responsive horizontal padding - inherits from global setting */
    }
    
    .section-content {
        padding-top: 2rem; /* Reduced from 6rem (96px) to 2rem (32px) */
        padding-bottom: 2rem; /* Added bottom padding for consistency */
    }
    
    .section-content h2 {
        font-size: 2.5rem; /* Increased from 2rem to compensate for Barriecito's condensed appearance vs Trirong H3 (1.7rem) */
        margin-bottom: 1rem;
        /* top: -1.5rem; */ /* Removed - testing if this was causing grid offset in flexbox */
    }
    
    /* Adjust red bar positioning for smaller padding on mobile */
    /* COMMENTED OUT - Testing layout without red bars */
    /*
    .project-item::before {
        top: 1rem;
        bottom: 1rem;
    }
    */
    
    .skills-grid {
        grid-template-columns: 1fr;
    }
    
    .experience-item,
    .project-item,
    .education-item,
    .education-historical,  /* Match padding with education-item */
    .reference-item {
        padding: 1rem;
    }
    
    /* Tighter line spacing for wrapped education titles in tablet/mobile */
    .education-item h3,
    .historical-header {
        line-height: 1.2;  /* Even tighter for smaller screens */
    }
    
    /* Reduce spacing on mobile for better fit */
    .education-item {
        margin-bottom: 1rem;  /* Reduced from 1.5rem */
    }
    
    .education-item h3 {
        margin-bottom: 0.5rem;  /* Tighter grouping on mobile */
    }
    
    .education-item p {
        line-height: 1.35;  /* Slightly more compact on mobile */
    }
}

/* End of Resume Styles */

/* Project Modal Styles */
.project-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(23, 23, 23, 0.6);
    backdrop-filter: blur(2px);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
    padding: 2rem;
}

.project-modal-backdrop.active {
    opacity: 1;
    visibility: visible;
}

.project-modal {
    background: #F8FCFF;
    max-width: 1000px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    border-radius: 8px;
    padding: 2rem;
    position: relative;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.project-modal-backdrop.active .project-modal {
    transform: scale(1);
}

.project-modal-close {
    background: transparent;
    border: none;
    font-size: 0; /* Hide the × character, we'll use CSS for X */
    color: #F8F9FF; /* Match nav bar text color */
    cursor: pointer;
    width: 56px; /* Increased to accommodate larger X */
    height: 56px; /* Increased to accommodate larger X */
    min-width: 56px; /* Ensure minimum width */
    min-height: 56px; /* Ensure minimum height */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-left: auto; /* Push to right side within flex container */
    margin-right: 0; /* Remove negative margin - let padding handle spacing */
    flex-shrink: 0; /* Prevent shrinking */
    padding: 0;
    line-height: 1; /* Tight line height for X character */
    visibility: visible; /* Ensure button is visible */
    opacity: 1; /* Ensure button is fully opaque */
    z-index: 10; /* Ensure button is above other elements */
    position: relative; /* For pseudo-elements */
}

/* Create X using CSS - thinner stroke */
.project-modal-close::before,
.project-modal-close::after {
    content: '';
    position: absolute;
    width: 2px; /* Thin stroke width */
    height: 40px; /* Length of X lines */
    background-color: #F8F9FF;
    transition: background-color 0.2s ease;
}

.project-modal-close::before {
    transform: rotate(45deg);
}

.project-modal-close::after {
    transform: rotate(-45deg);
}

.project-modal-close:hover::before,
.project-modal-close:hover::after {
    background-color: #64D570; /* Green on hover */
}

.project-modal-close:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* Color change handled by pseudo-elements above */
}

.project-modal-image {
    width: 90%;
    max-width: 842px;
    max-height: 400px;
    object-fit: fill;
    border-radius: 4px;
    margin-bottom: 0.5rem;
    margin-top: 1rem;
    margin-left: auto;
    margin-right: auto;
    display: block;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.2);
}

.project-modal-image-caption {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1rem;
    color: rgba(23, 23, 23, 0.7);
    font-style: italic;
    margin-top: 0;
    margin-bottom: 1.5rem;
    text-align: center;
    line-height: 1.5;
}

.project-modal-image-caption:empty {
    display: none;
}

.project-modal-content {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
}

.project-modal-title {
    font-family: 'Poiret One', cursive; /* Match desktop nav font */
    font-weight: 75; /* Match nav font weight */
    font-size: 2rem; /* Match nav font size */
    color: #F8F9FF; /* Match nav text color */
    background-color: #897F80; /* Match nav background color */
    padding: 1.5rem; /* Match nav padding */
    margin-bottom: 1rem;
    margin-top: 0;
    display: flex;
    align-items: center; /* Vertically center content */
    justify-content: space-between; /* Space between title text and close button */
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

.project-modal-title-text {
    flex: 1; /* Take up available space, push button to right */
    min-width: 0; /* Allow text to shrink if needed */
    overflow: hidden; /* Prevent text from pushing button off screen */
    text-overflow: ellipsis; /* Show ellipsis if text is too long */
    white-space: nowrap; /* Keep text on one line */
    padding-right: 0.5rem; /* Space between text and button */
}

.project-modal-description {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    color: #171717;
    line-height: 1.6;
    margin-top: 0;
    margin-bottom: 1rem;
}

.project-modal-description p {
    margin-top: 0;
    margin-bottom: 1rem;
}

.project-modal-description p:last-child {
    margin-bottom: 0;
}

.project-modal-org {
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.2rem;
    color: #897F80;
    margin-top: 1rem;
}

/* Clickable Project Title Hover States */
/* Project Title - Flexbox Layout: Text | Triangle */
.project-title-clickable {
    cursor: pointer;
    transition: color 0.2s ease;
    font-family: 'Trirong', serif;
    font-weight: 600;
    font-size: 1.7rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;  /* Vertically centers triangle with text block */
    width: 100%;  /* Full width to allow text to fill remaining space */
}

.project-title-clickable:hover {
    color: #64D570;  /* Green to match triangle hover */
}

/* Text container - fills remaining space after triangle */
.project-title-text {
    flex: 1 1 0;  /* Fill remaining space, can shrink, base size 0 */
    min-width: 0;  /* Allows text to shrink below content size for wrapping */
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* Triangle indicator - always visible, points right, fixed width on left */
.project-title-triangle {
    width: 0;
    height: 0;
    border-top: 0.75rem solid transparent;
    border-bottom: 0.75rem solid transparent;
    border-left: 1.125rem solid #b31420;
    transition: border-left-color 0.2s ease, transform 0.2s ease;
    flex: 0 0 1.875rem;  /* Fixed 1.875rem width (1.125rem triangle + 0.75rem spacing) */
}

.project-title-clickable:hover .project-title-triangle {
    border-left-color: #64D570;
    transform: scale(1.1);
}

/* Respect reduced motion preference for project titles */
@media (prefers-reduced-motion: reduce) {
    .project-title-triangle {
        transition: border-left-color 0.2s ease;
    }
    
    .project-title-clickable:hover .project-title-triangle {
        transform: none;
    }
}

/* Mobile Responsive for Modal */
@media (max-width: 768px) {
    .project-modal {
        max-width: 95%;
        padding: 1.5rem;
        max-height: 95vh;
    }
    
    .project-modal-title {
        font-size: 1.5rem; /* Smaller font for mobile */
        padding: 1rem; /* Restore standard padding */
        line-height: 1.2; /* More compact line spacing */
        margin-bottom: 0.75rem; /* Reduced bottom margin */
    }
    
    .project-modal-title-text {
        white-space: normal; /* Allow text to wrap on mobile */
        overflow: visible; /* Show full text on mobile */
        text-overflow: clip; /* No ellipsis on mobile */
    }
    
    .project-modal-close {
        font-size: 0; /* Hide the × character, using CSS X */
        width: 36px !important; /* Override base 56px */
        height: 36px !important; /* Override base 56px */
        min-width: 36px !important; /* Override base min-width: 56px */
        min-height: 36px !important; /* Override base min-height: 56px */
        margin-right: 0;
        line-height: 1;
        visibility: visible; /* Ensure button is visible */
        opacity: 1; /* Ensure button is fully opaque */
    }
    
    /* Smaller X for mobile */
    .project-modal-close::before,
    .project-modal-close::after {
        height: 22px !important; /* Override base 40px - shorter lines for mobile */
        width: 2px; /* Same thin stroke */
    }
    
    .project-modal-image {
        max-height: 250px;
    }
    
    /* Profile section vertical flow - reduce spacing between title and content */
    .section-content h2 {
        margin-bottom: 1rem;
        /* top: -1.5rem; */ /* Removed - testing if this was causing grid offset in flexbox */
    }
}

/* Small Mobile Responsive for Modal */
@media (max-width: 480px) {
    /* Even smaller X for small mobile */
    .project-modal-close::before,
    .project-modal-close::after {
        height: 18px !important; /* Override base and mobile - smaller lines for small mobile */
        width: 2px; /* Same thin stroke */
    }
}

/* PDF Viewer Modal */
.pdf-modal-backdrop {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 3000; /* Above contact modal */
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.pdf-modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.pdf-modal-container {
    width: 90%;
    height: 90%;
    max-width: 1200px;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.pdf-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background-color: #897F80;
    border-bottom: 2px solid #B31420;
}

.pdf-download-btn {
    background-color: #B31420;
    color: #F8F9FF;
    border: none;
    padding: 0.75rem 1.5rem;
    font-family: 'Pridi', serif;
    font-size: 1rem;
    font-weight: 500;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pdf-download-btn:hover {
    background-color: #64D570;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.pdf-modal-close {
    background: transparent;
    border: none;
    font-size: 3rem;
    color: #B31420;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.pdf-modal-close:hover {
    color: #64D570;
    transform: rotate(90deg);
}

.pdf-viewer {
    width: 100%;
    flex: 1;
    border: none;
    background-color: #fff;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .pdf-modal-container {
        width: 95%;
        height: 85%;
    }
    
    .pdf-modal-header {
        padding: 0.75rem 1rem;
    }
    
    .pdf-download-btn {
        font-size: 0.9rem;
        padding: 0.6rem 1rem;
    }
    
    .pdf-modal-close {
        font-size: 2.5rem;
    }
}

/* Contact Modal */
.contact-modal-backdrop {
    display: none; /* Hidden by default */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    z-index: 2000;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.contact-modal-backdrop.active {
    display: flex;
    opacity: 1;
}

.contact-modal-card {
    background-color: #e2e9f1;
    border-radius: 12px;
    padding: 3rem 4rem;
    max-width: 600px;
    width: 90%;
    position: relative;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
    border: 3px solid #897F80;
}

.contact-modal-backdrop.active .contact-modal-card {
    transform: scale(1);
}

.contact-modal-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: transparent;
    border: none;
    font-size: 3rem;
    color: #B31420;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.contact-modal-close:hover {
    color: #64D570;
    transform: rotate(90deg);
}

.contact-modal-content {
    text-align: center;
}

.contact-name {
    font-family: 'Barriecito', cursive;
    font-size: 3rem;
    color: #B31420; /* Keep name red */
    margin: 0 0 0.5rem 0;
}

.contact-title {
    font-family: 'Pridi', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: #171717;
    margin: 0 0 0.25rem 0;
}

.contact-location {
    font-family: 'Pridi', serif;
    font-size: 1.2rem;
    font-weight: 300;
    color: #897F80;
    margin: 0 0 2rem 0;
}

.contact-icons-large {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.contact-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: #171717;
    transition: all 0.3s ease;
    padding: 1rem;
    border-radius: 8px;
}

.contact-icon-item:hover {
    background-color: rgba(100, 213, 112, 0.1);
    transform: translateY(-5px);
}

.contact-icon-item i {
    font-size: 3rem;
    color: #577EC5; /* Tetradic blue for contrast from all the red */
    transition: all 0.3s ease;
}

.contact-icon-item:hover i {
    color: #B31420; /* Red on hover */
    transform: scale(1.2);
}

.contact-icon-item span {
    font-family: 'Pridi', serif;
    font-size: 0.9rem;
    font-weight: 400;
    color: #171717;
}

/* Mobile responsive */
@media (max-width: 768px) {
    .contact-modal-card {
        padding: 2rem;
        width: 95%;
    }
    
    .contact-modal-close {
        top: 0.5rem;
        right: 0.5rem;
        font-size: 2.5rem; /* Smaller X on mobile */
    }
    
    .contact-name {
        font-size: 2.5rem;
        margin-top: 2rem; /* Push down away from X button */
    }
    
    .contact-title {
        font-size: 1.2rem;
    }
    
    .contact-icons-large {
        gap: 1rem;
    }
    
    .contact-icon-item i {
        font-size: 2.5rem;
    }
}

/* Footer */
.site-footer {
    text-align: center;
    font-family: 'Pridi', serif;
    font-weight: 300;
    font-size: 1.25rem; /* Larger for readability */
    color: #171717;
    padding: 0.5rem 1rem 0;
    margin-bottom: 3.65rem; /* Lift text visibly above bottom frame line */
    background-color: transparent; /* Let geometric backdrop show through */
    position: relative;
    margin-top: auto; /* Pin to bottom of bottom-container flex column */
    z-index: 2; /* Above geometric background (z-index: 1) */
}

.site-footer a {
    color: #64D570;
    text-decoration: none;
}

.site-footer a:hover {
    color: #57c567;
    text-decoration: underline;
}