:root {
    --navy-rgb: 5, 5, 8;
    --linen-rgb: 242, 238, 220;
    --gold-rgb: 212, 175, 55;
    --gold-muted-rgb: 140, 120, 80;

    --navy: rgb(var(--navy-rgb));
    --linen: rgb(var(--linen-rgb));
    --gold: rgb(var(--gold-rgb));
    --gold-muted: rgb(var(--gold-muted-rgb));

    --font-primary: 'Playfair Display', Georgia, serif;
    --font-mono: 'JetBrains Mono', monospace;

    --transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    --row-height: 80px;
    --visible-rows: 5;
    --window-height: calc(var(--row-height) * var(--visible-rows));

    /* Carousel hover-lift amount — used by both the track padding and the arrow offset */
    --hover-lift: 60px;
    --hover-lift-extra: 40px;
    /* extra bottom padding = lift + visual breathing room */
}

body.light-mode {
    --bg-rgb: var(--linen-rgb);
    --text-rgb: var(--navy-rgb);
    --bg: var(--linen);
    --text: var(--navy);
    --accent: var(--gold-muted);
    --border: rgba(10, 15, 25, 0.08);
    --card-bg: rgba(255, 255, 255, 0.4);
    --glow: rgba(160, 140, 90, 0.2);
}

body.dark-mode {
    --bg-rgb: var(--navy-rgb);
    --text-rgb: var(--linen-rgb);
    --bg: var(--navy);
    --text: var(--linen);
    --accent: var(--gold);
    --border: rgba(242, 238, 220, 0.08);
    --card-bg: rgba(255, 255, 255, 0.02);
    --glow: rgba(255, 215, 100, 0.4);
}

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

/* scroll-behavior is managed entirely by JS (script.js lines 2 and 9).
   Setting it here would be immediately overridden; the rule is omitted. */

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-primary);
    overflow-x: hidden;
    transition: background-color var(--transition), color var(--transition);
}

/* Nav */
.floating-nav {
    position: fixed;
    top: 40px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    z-index: 1000;
}

.nav-pill {
    background: rgba(var(--bg-rgb), 0.7);
    backdrop-filter: blur(20px);
    border: 1px solid var(--border);
    padding: 14px 30px;
    border-radius: 100px;
    display: flex;
    gap: 40px;
    align-items: center;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
}

.brand {
    font-weight: 800;
    letter-spacing: -0.05em;
    font-size: 1.2rem;
    text-decoration: none;
    color: inherit;
}

.nav-links {
    display: flex;
    gap: 24px;
    align-items: center;
}

.nav-links a {
    text-decoration: none;
    color: var(--text);
    font-size: 0.85rem;
    font-weight: 600;
    opacity: 0.7;
    transition: 0.3s;
}

.nav-links a:hover,
.nav-links a.active {
    opacity: 1;
    color: var(--accent);
}

#theme-toggle {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.hamburger-menu {
    display: none;
    background: none;
    border: none;
    color: var(--text);
    font-size: 1.5rem;
    cursor: pointer;
}

/* Modern Labels */
.modern-label {
    font-family: var(--font-mono);
    font-size: 1.4rem;
    font-weight: 300;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 35px;
    letter-spacing: 0.1em;
}

.modern-label::before {
    content: "";
    height: 2px;
    flex: 0 0 60px;
    background: var(--accent);
}

/* Sections */
.modern-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 60px;
}

section {
    padding: 120px 0;
}

/* About Section */
.about-section {
    padding-top: 80px;
    padding-bottom: 120px;
}

.about-grid-sleek {
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    margin-top: 40px;
}

.about-cell {
    padding: 60px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.primary-cell {
    border-right: 1px solid var(--border);
}

.about-right-pane {
    display: flex;
    flex-direction: column;
}

.secondary-cell {
    flex: 1;
    border-bottom: 1px solid var(--border);
}

.tertiary-cell {
    flex: 1;
}

.about-title {
    font-family: var(--font-primary);
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: var(--text);
}

.about-cell p {
    font-family: var(--font-primary);
    font-size: 1.15rem;
    line-height: 1.8;
    color: var(--text);
    opacity: 0.8;
}

.glow-text {
    color: var(--accent);
    text-shadow: 0 0 20px var(--glow);
    font-style: italic;
}

@media (max-width: 1024px) {
    .about-grid-sleek {
        grid-template-columns: 1fr;
    }

    .primary-cell {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }

    .about-cell {
        padding: 40px 20px;
    }
}

/* Hero Full-Width */
.hero-full {
    position: relative;
    width: 100vw;
    aspect-ratio: 5 / 3;
    padding-top: 0;
    padding-bottom: 0;
    background-color: var(--bg);
    display: flex;
    align-items: center;
}

.hero-image-wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 90%, transparent 100%);
}

.hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.hero-overlay-pattern {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: radial-gradient(rgba(var(--text-rgb), 0.15) 2px, transparent 2px);
    background-size: 40px 40px;
    background-position: center;
    mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
    pointer-events: none;
}

.hero-content-overlay {
    position: relative;
    z-index: 3;
    width: 55%;
    padding-left: 60px;
}

.hero-content-overlay.centered {
    width: 100%;
    padding: 0 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.hero-full h1 {
    font-size: clamp(4rem, 8vw, 10rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 0.8;
    margin-bottom: 20px;
    color: var(--text);
}

.film-strip-wrap {
    margin-top: 20px;
}

.strip-item {
    font-family: var(--font-mono);
    font-size: clamp(0.7rem, 1.2vw, 1.2rem);
    color: var(--text);
    opacity: 0.8;
    letter-spacing: 0.1em;
}

/* Experience Carousel */
.carousel-container {
    position: relative;
    width: 100%;
    /* Arrow centering: flexbox aligns arrows vertically with the track */
    display: flex;
    align-items: center;
}

.carousel-track {
    display: flex;
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    /* Expanded padding to allow hover translateY + shadow to render without clipping.
       --hover-lift controls all four values so they stay in sync. */
    padding-top: var(--hover-lift);
    padding-bottom: calc(var(--hover-lift) + var(--hover-lift-extra));
    margin-top: calc(var(--hover-lift) * -1);
    margin-bottom: calc(var(--hover-lift) * -1);

    /* Hide scrollbar */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.carousel-track::-webkit-scrollbar {
    display: none;
}

/* .history-item: sized for carousel; visual card styling comes from .proj-card */
.history-item {
    scroll-snap-align: start;
    flex: 0 0 calc(33.333% - 20px);
    /* 3 items on desktop + peek handled by gap */
    overflow: hidden;
}


.carousel-arrow {
    position: absolute;
    /* The track has extra bottom padding (--hover-lift-extra) that pulls the visual
       centre down. Subtracting half of it corrects the arrow back to true centre. */
    top: calc(50% - var(--hover-lift-extra) / 2);
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(var(--bg-rgb), 0.7);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
    color: var(--text);
    cursor: pointer;
    z-index: 10;
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.right-arrow {
    right: 0;
}

.carousel-arrow:hover {
    background: var(--text);
    color: var(--bg);
    /* Fix L: preserve transform on hover for left arrow */
    transform: translateY(-50%);
}

/* Fix L: left arrow uses text direction, not button rotation, so icon faces left */
.left-arrow {
    left: 0;
    display: none;
    /* hidden by default until scrolled */
}

@media (max-width: 1023px) {
    .history-item {
        flex: 0 0 calc(50% - 15px);
        /* 2 items on tablet */
    }
}

@media (max-width: 767px) {
    .history-item {
        flex: 0 0 85%;
        /* 1 item + peek on mobile */
    }
}

/* History/Experience items now use .proj-card for all visual states.
   .history-item only controls carousel sizing (flex-basis). */

/* Grid */
.project-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.proj-card {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s, background-color 0.4s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    /* overflow:hidden removed — it was clipping hover shadows and translateY.
       The flight clone gets its own overflow:hidden rule below. */
}

.proj-card:hover {
    border-color: var(--accent);
    background: var(--text);
    color: var(--bg);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
    z-index: 5;
}

.proj-card .mono {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    opacity: 0.6;
    margin-bottom: 8px;
    display: block;
}

/* Tech chips */
.tech-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 15px;
}

.tech-chip {
    font-family: var(--font-mono);
    font-size: 0.7rem;
    padding: 4px 8px;
    border-radius: 4px;
    background: rgba(128, 128, 128, 0.1);
}

.all-link-wrap {
    text-align: center;
    margin-top: 40px;
}

.all-link {
    display: inline-block;
    font-family: var(--font-mono);
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    border-bottom: 2px solid var(--accent);
}

/* Skills Slots */
.skills-section {
    display: flex;
    flex-direction: column;
}

.elegant-slot-container {
    width: 100%;
    position: relative;
}

.slot-window {
    display: flex;
    height: var(--window-height);
    position: relative;
    overflow: hidden;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    outline: none;
}

.window-mask {
    position: absolute;
    left: 0;
    right: 0;
    height: 35%;
    z-index: 20;
    pointer-events: none;
}

.top-mask {
    top: 0;
    background: linear-gradient(to bottom, var(--bg) 10%, transparent);
}

.bottom-mask {
    bottom: 0;
    background: linear-gradient(to top, var(--bg) 10%, transparent);
}

.reel {
    flex: 1;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-right: 1px solid var(--border);
}

/* Fix O: remove border on last reel; mobile already handles this via breakpoint */
.reel:last-of-type {
    border-right: none;
}

.reel-strip {
    display: flex;
    flex-direction: column;
    width: 100%;
    will-change: transform;
}

/* Fix N: removed arbitrary fallback 7; --items-count is always set by JS before animation starts */
@keyframes scroll-up {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(calc(var(--items-count) * var(--row-height) * -1));
    }
}

@keyframes scroll-left {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-25%);
    }
}

.slot-item {
    height: var(--row-height);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2rem;
    white-space: nowrap;
}

.skill-value {
    font-family: var(--font-primary);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--text);
    letter-spacing: -0.02em;
    opacity: 0.85;
}

.accessibility-notice {
    display: none;
    color: var(--accent);
    font-family: var(--font-mono);
    font-size: 0.8rem;
    text-align: center;
    margin-top: 20px;
}

/* Exploring Section — now uses the same project-grid layout and proj-card style */
.exploring-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* Exploring cards are display-only — no interactivity */
.exploring-card-item {
    cursor: default;
    /* Strip the transition so there is no animation on hover either */
    transition: none;
}

.exploring-card-item:hover {
    border-color: var(--border);
    background: var(--card-bg);
    color: var(--text);
    transform: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    z-index: auto;
}

/* Footer */
.footer-cta h2 {
    font-size: clamp(3rem, 5vw, 6rem);
    line-height: 1;
    letter-spacing: -0.04em;
    margin-bottom: 60px;
}

.links {
    display: flex;
    gap: 40px;
    flex-wrap: wrap;
}

.links a {
    color: var(--text);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* Modal Interaction Toggles */
body.disable-interactions main,
body.disable-interactions nav {
    pointer-events: none !important;
}

/* Modal */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: transparent;
    backdrop-filter: blur(0px);
    -webkit-backdrop-filter: blur(0px);
    z-index: 5000;
    display: none;
}

.modal-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.modal-surface {
    position: fixed;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    overflow: hidden;

    top: var(--start-top, 50%);
    left: var(--start-left, 50%);
    width: var(--start-width, 300px);
    height: var(--start-height, 300px);
    transform: translate(-50%, -50%);

    opacity: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    transition: none;
}

.modal-overlay.active .modal-surface {
    top: 50%;
    left: 50%;
    width: 90%;
    height: 80vh;
    max-width: 840px;
    /* Fix M: removed redundant max-height: 80vh (height already constrains it) */
    border-radius: 20px;
    transform: translate(-50%, -50%);
    background: var(--bg);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4);
    opacity: 1;
    transition: top 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        left 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.05s ease;
}

.modal-body {
    opacity: 0;
    padding: 60px;
    height: 100%;
    overflow-y: auto;
    transition: none;
}

#modal-flight-clone {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    border: none;
    box-shadow: none;
    opacity: 1;
    transition: none;
    z-index: -1;
    overflow: hidden;
    /* isolate overflow clipping to the clone only */
    border-radius: 16px;
}

.modal-overlay.active #modal-flight-clone {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.modal-overlay.active .modal-body {
    opacity: 1;
    transition: opacity 0.3s 0.2s ease;
}

.close-btn {
    position: absolute;
    top: 30px;
    right: 30px;
    font-size: 2.5rem;
    background: none;
    border: none;
    color: var(--text);
    cursor: pointer;
    opacity: 0;
    transition: none;
    z-index: 30;
    /* Ensure the button always captures clicks, even at opacity:0 */
    pointer-events: all;
}

.modal-overlay.active .close-btn {
    opacity: 1;
    transition: opacity 0.3s 0.2s ease;
}

/* Modal tags sticky footer — experience tags, immune to scroll */
.modal-tags-footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 20px 60px;
    background: var(--bg);
    border-top: 1px solid var(--border);
    z-index: 30;
}

.modal-tag {
    font-family: var(--font-mono);
    font-size: 0.75rem;
    padding: 5px 12px;
    border-radius: 4px;
    background: rgba(var(--gold-rgb), 0.15);
    color: var(--accent);
    border: 1px solid rgba(var(--gold-rgb), 0.3);
}

/* Coursework list inside modal */
.coursework-list {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.coursework-item {
    border-left: 3px solid var(--accent);
    padding-left: 20px;
}

/* View Coursework button card */
.coursework-btn-wrap {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

#coursework-btn {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 20px 48px;
    cursor: pointer;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s, border-color 0.4s, background-color 0.4s;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
    font-family: var(--font-primary);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    pointer-events: all;
}

#coursework-btn:hover {
    border-color: var(--accent);
    background: var(--text);
    color: var(--bg);
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

/* Media Queries for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .accessibility-notice {
        display: block;
    }
}

@media (max-width: 1024px) {

    .project-grid,
    .exploring-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .hero-content-overlay {
        width: 80%;
    }

    .skill-value {
        font-size: 2rem;
    }
}

@media (max-width: 768px) {
    .modern-container {
        padding: 0 30px;
    }

    .hamburger-menu {
        display: block;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg);
        padding: 20px;
        border-radius: 16px;
        border: 1px solid var(--border);
        margin-top: 10px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    }

    .nav-links.show-menu {
        display: flex;
    }

    .project-grid,
    .exploring-list {
        grid-template-columns: 1fr;
    }

    .hero-content-overlay {
        width: 100%;
        padding: 0 30px;
    }

    .hero-full {
        align-items: flex-end;
        padding-bottom: 20px;
    }

    .slot-window {
        flex-direction: column;
        height: 300px;
    }

    /* Fix O: all reels on mobile get border-bottom; :last-of-type keeps no border-right */
    .reel {
        border-right: none;
        border-bottom: 1px solid var(--border);
        display: flex;
    }

    .reel-strip {
        flex-direction: row;
        width: max-content;
        height: 100%;
        animation-name: scroll-left !important;
    }

    .slot-item {
        height: 100%;
    }

    .window-mask {
        height: 100%;
        width: 15%;
    }

    .top-mask {
        top: 0;
        bottom: 0;
        left: 0;
        right: auto;
        background: linear-gradient(to right, var(--bg) 20%, transparent);
    }

    .bottom-mask {
        top: 0;
        bottom: 0;
        left: auto;
        right: 0;
        background: linear-gradient(to left, var(--bg) 20%, transparent);
    }

    .skill-value {
        font-size: 1.5rem;
    }

    .modal-tags-footer {
        padding: 16px 30px;
    }
}

.page-projects-main {
    padding-top: 160px;
}

/* 'The Repository' hero title on the all-projects page */
.repository-title {
    font-size: clamp(4rem, 8vw, 8rem);
    line-height: 0.85;
    letter-spacing: -0.03em;
    margin-bottom: 60px;
    font-weight: 800;
}

/* All-projects grid top border — avoids inline style on projects.html */
.all-projects-grid {
    border-top: 1px solid var(--border);
    padding-top: 40px;
}

/* Focus-visible styles for keyboard navigation */
.proj-card:focus-visible,
.carousel-arrow:focus-visible,
#coursework-btn:focus-visible,
#theme-toggle:focus-visible,
.hamburger-menu:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}

.slot-window:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
}