@charset "utf-8";

/*
 * Art Gallery Theme
 * Minimalist, white-background, editorial aesthetic
 * Inspired by Collectiv Gallery / contemporary art gallery sites
 */

/* ============================================= */
/* Variables */
/* ============================================= */

:root {
    --gallery-white: #ffffff;
    --gallery-off-white: #f8f8f6;
    --gallery-light-gray: #f0efec;
    --gallery-mid-gray: #d8d6d0;
    --gallery-dark-gray: #1a1a1a;   /* was #6b6b6b — raised to near-black for full contrast */
    --gallery-charcoal: #111111;    /* was #2a2a2a — unified with black */
    --gallery-black: #111111;

    --gallery-font-serif: 'Playfair Display', 'Georgia', serif;
    --gallery-font-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;

    --gallery-transition: 0.3s ease;
    --gallery-transition-slow: 0.6s ease;
}

/* ============================================= */
/* Google Fonts Import (via <link> in HTML) */
/* ============================================= */

/* ============================================= */
/* CSS Reset / Base */
/* ============================================= */

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    scrollbar-width: thin;
    scrollbar-color: var(--gallery-mid-gray) var(--gallery-white);
}

html::-webkit-scrollbar { width: 6px; }
html::-webkit-scrollbar-track { background: var(--gallery-white); }
html::-webkit-scrollbar-thumb { background: var(--gallery-mid-gray); border-radius: 0; }

body {
    margin: 0;
    padding: 0;
    background: var(--gallery-white) !important;
    color: var(--gallery-black) !important;
    font-family: var(--gallery-font-sans) !important;
    font-size: 15px;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: default;
}

/* Remove dark body class overrides */
body.dark {
    background-color: var(--gallery-white) !important;
    color: var(--gallery-black) !important;
    font-family: var(--gallery-font-sans) !important;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--gallery-font-serif) !important;
    color: var(--gallery-black) !important;
    font-weight: 400 !important;
    line-height: 1.2;
    margin: 0;
}

p {
    color: var(--gallery-charcoal) !important;
    margin: 0 0 1em;
}

a {
    color: var(--gallery-black);
    text-decoration: none;
    transition: opacity var(--gallery-transition);
}

a:hover {
    opacity: 0.6;
}

img {
    display: block;
    max-width: 100%;
}

/* ============================================= */
/* Hide ALL old theme elements */
/* ============================================= */

/* Hide old preloader */
#preloader { display: none !important; }

/* Hide magic cursor */
.mouse-cursor { display: none !important; }

/* Hide old header entirely */
.aali_tm_header { display: none !important; }

/* Hide old mobile menu */
.aali_tm_mobile_menu { display: none !important; }

/* Hide old hero section */
.aali_tm_hero { display: none !important; }

/* Hide old about section */
.aali_tm_about { display: none !important; }

/* Hide old skills section */
.aali_tm_skills { display: none !important; }

/* Hide old portfolio section */
.aali_tm_portfolio { display: none !important; }

/* Hide old resume section */
.aali_tm_resume { display: none !important; }

/* Hide old contact section */
.aali_tm_contact { display: none !important; }

/* Hide old copyright section */
.aali_tm_copyright { display: none !important; }

/* Hide modal */
.aali_tm_modalbox { display: none !important; }

/* ============================================= */
/* LOADING SCREEN */
/* ============================================= */

#gallery-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000000;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

#gallery-loader.fade-out {
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.6s ease 0.2s;
}

#gallery-loader.hidden {
    display: none !important;
}

.loader-lily {
    position: relative;
    width: clamp(260px, 58vmin, 500px);
    height: clamp(260px, 58vmin, 500px);
}

.loader-lily svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/*
 * Each petal is structured as:
 *   <g transform="rotate(N)">        ← static rotation (SVG attribute)
 *     <g class="lily-petal petal-X"> ← CSS-animated: translates along -Y
 *       <path .../>                   ← the petal shape
 *     </g>
 *   </g>
 * translateY(-N) in the child's local space = fly outward in that direction.
 */
.lily-petal {
    opacity: 1;
}

/* Outer 4 petals detach first */
.petal-outer { animation: petal-fly 0.65s ease-in 0.05s forwards; }
/* Mid 4 petals next */
.petal-mid   { animation: petal-fly 0.65s ease-in 0.20s forwards; }
/* Inner 4 petals last */
.petal-inner { animation: petal-fly 0.65s ease-in 0.34s forwards; }
/* Center circle fades after all petals gone */
.lily-center { animation: petal-fade 0.4s ease-in 0.46s forwards; }

@keyframes petal-fly {
    0%   { transform: translateY(0);      opacity: 1; }
    25%  { opacity: 1; }
    100% { transform: translateY(-80px);  opacity: 0; }
}

@keyframes petal-fade {
    to { opacity: 0; }
}

/* ============================================= */
/* SITE WRAPPER */
/* ============================================= */

#gallery-site {
    opacity: 0;
    transition: opacity 0.5s ease;
}

#gallery-site.visible {
    opacity: 1;
}

/* ============================================= */
/* TOP NAV BAR */
/* ============================================= */

#gallery-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: 0 40px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid transparent;
    transition: border-color var(--gallery-transition);
}

#gallery-nav.scrolled {
    border-bottom-color: var(--gallery-mid-gray);
}

.nav-name {
    font-family: var(--gallery-font-sans) !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--gallery-black) !important;
    text-transform: uppercase;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.nav-links a {
    font-family: var(--gallery-font-sans) !important;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.06em;
    color: var(--gallery-charcoal) !important;
    text-transform: uppercase;
    text-decoration: none;
    transition: color var(--gallery-transition);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--gallery-black) !important;
    opacity: 1;
}

.nav-mobile-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 4px;
    background: none;
    border: none;
}

.nav-mobile-toggle span {
    display: block;
    width: 22px;
    height: 1px;
    background: var(--gallery-black);
    transition: var(--gallery-transition);
}

/* Mobile nav drawer */
.nav-mobile-drawer {
    display: none;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    background: var(--gallery-white);
    border-bottom: 1px solid var(--gallery-mid-gray);
    z-index: 999;
    padding: 24px 40px 32px;
}

.nav-mobile-drawer.open {
    display: block;
}

.nav-mobile-drawer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.nav-mobile-drawer ul a {
    font-size: 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gallery-charcoal) !important;
}

/* ============================================= */
/* LANDING / HERO SECTION */
/* ============================================= */

#gallery-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: var(--gallery-white);
}

/* Lily pad — fills left side, behind petal — pure CSS gradient, no image */
.hero-lilypad {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* no z-index — stays in paint step 6 so flower (z-index:1) renders above it */
    /* ── Pthalo green painted canvas stack (back → front) ───────────────────
       1. Base pthalo gradient   (#0C3D2C → #093325 → #061E17)
       2. Canvas warp threads    (vertical — tight repeating bands)
       3. Canvas weft threads    (horizontal — tight repeating bands)
       4. Directional light      (top-left glaze, bottom-right shadow)
       5. Edge vignette          (all sides darken inward)
    ─────────────────────────────────────────────────────────────────────── */
    background:
        /* 5. All-edge vignette */
        radial-gradient(ellipse at center, transparent 30%, rgba(3, 12, 8, 0.72) 100%),
        /* 4. Directional glaze — top-left warm highlight, bottom-right cold shadow */
        linear-gradient(140deg, rgba(30,110,70,0.13) 0%, transparent 40%, rgba(0,0,0,0.18) 100%),
        /* 3. Weft threads — horizontal canvas weave */
        repeating-linear-gradient(
            0deg,
            transparent               0px,
            transparent               5px,
            rgba(255,255,255,0.028)   5px,
            rgba(255,255,255,0.028)   6px,
            transparent               6px,
            transparent               11px,
            rgba(0,0,0,0.04)          11px,
            rgba(0,0,0,0.04)          12px
        ),
        /* 2. Warp threads — vertical canvas weave (slightly narrower pitch) */
        repeating-linear-gradient(
            90deg,
            transparent               0px,
            transparent               4px,
            rgba(255,255,255,0.022)   4px,
            rgba(255,255,255,0.022)   5px,
            transparent               5px,
            transparent               9px,
            rgba(0,0,0,0.035)         9px,
            rgba(0,0,0,0.035)         10px
        ),
        /* 1. Base pthalo green gradient */
        linear-gradient(158deg, #0E4535 0%, #0C3D2C 35%, #093325 65%, #061E17 100%);
}

/* Layer A — fractalNoise grain (coarser, canvas-like) */
.hero-lilypad::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    opacity: 0.11;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.42' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 300px 300px;
    background-repeat: repeat;
}

/* Layer B — coarser turbulence simulating bristle strokes, multiply blended */
.hero-lilypad::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    opacity: 0.09;
    mix-blend-mode: multiply;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512'%3E%3Cfilter id='b'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.18 0.06' numOctaves='3' seed='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='512' height='512' filter='url(%23b)'/%3E%3C/svg%3E");
    background-size: 512px 512px;
    background-repeat: repeat;
}

/* Water lily flower — fixed overlay, persists across all sections, behind all content */
.hero-petal {
    position: fixed;
    right: -50%;       /* keep right half off-screen */
    top: 50%;
    transform: translateY(-50%);
    width: 90%;
    height: auto;
    z-index: 1;        /* above section backgrounds (step 6), below content wrappers (z-index:2) */
    will-change: transform;
    transform-origin: center center;
    pointer-events: none; /* never intercept clicks meant for content */
    filter: drop-shadow(0 8px 40px rgba(0,0,0,0.28));
}

/* Base layer — original image, no tint, always visible */
.hero-petal .petal-base {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Tinted layer — stacked exactly on top; mask punches out the yellow center */
.hero-petal .petal-tinted {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Radial mask: transparent circle over the yellow center (~15% radius),
       soft feather ring 15%→22%, fully opaque beyond that (the white petals) */
    -webkit-mask-image: radial-gradient(circle at 50% 50%,
        transparent 0%,
        transparent 14%,
        black       21%,
        black       100%);
    mask-image: radial-gradient(circle at 50% 50%,
        transparent 0%,
        transparent 14%,
        black       21%,
        black       100%);
    /* filter applied via JS on scroll */
}

/* Name — top-left */
.hero-text {
    position: absolute;
    top: 96px;
    left: 48px;
    right: auto;
    text-align: left;
    z-index: 3;
}

.hero-name {
    font-family: var(--gallery-font-serif) !important;
    font-size: clamp(32px, 4vw, 56px);
    font-weight: 400 !important;
    color: #ffffff !important;
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.hero-subtitle {
    margin-top: 10px;
    font-family: var(--gallery-font-sans) !important;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75) !important;
}

/* Scroll cue at bottom center */
.hero-scroll-cue {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    text-decoration: none;
}

.hero-scroll-cue span {
    font-size: 10px;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray) !important;
    font-family: var(--gallery-font-sans) !important;
}

.hero-scroll-cue .scroll-line {
    width: 1px;
    height: 40px;
    background: var(--gallery-dark-gray);
    animation: scroll-pulse 2s ease-in-out infinite;
}

@keyframes scroll-pulse {
    0%, 100% { opacity: 0.4; transform: scaleY(1); }
    50%       { opacity: 1;   transform: scaleY(1.2); }
}

/* ============================================= */
/* SHARED SECTION STYLES */
/* ============================================= */

.gallery-section {
    padding: 100px 48px;
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-section-full {
    padding: 100px 0;
}

.section-label {
    font-family: var(--gallery-font-sans) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray) !important;
    margin-bottom: 16px;
    display: block;
}

.section-title {
    font-family: var(--gallery-font-serif) !important;
    font-size: clamp(28px, 3.5vw, 48px);
    font-weight: 400 !important;
    color: var(--gallery-black) !important;
    line-height: 1.15;
    margin-bottom: 40px;
}

.section-divider {
    width: 100%;
    height: 1px;
    background: var(--gallery-mid-gray);
    margin: 0;
}

/* ============================================= */
/* ABOUT SECTION */
/* ============================================= */

#gallery-about {
    position: relative;
    /* no z-index — does not form a stacking context, flower renders above bg */
    padding-top: 120px;
    padding-bottom: 120px;
    border-top: 1px solid var(--gallery-mid-gray);
}

.about-grid {
    position: relative;
    z-index: 2;        /* above flower */
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
}

.about-image-wrap {
    position: relative;
}

.about-image-wrap img {
    width: 100%;
    height: 560px;
    object-fit: cover;
    object-position: top center;
    display: block;
    filter: grayscale(15%);
    transition: filter var(--gallery-transition-slow);
}

.about-image-wrap:hover img {
    filter: grayscale(0%);
}

.about-content {
    padding-top: 16px;
}

.about-content .section-label {
    margin-bottom: 24px;
}

.about-content .section-title {
    font-size: clamp(24px, 2.8vw, 38px);
    margin-bottom: 12px;
}

.about-role {
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray) !important;
    font-family: var(--gallery-font-sans) !important;
    margin-bottom: 32px;
    display: block;
}

.about-text p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--gallery-charcoal) !important;
    margin-bottom: 16px;
}

.about-text p:last-child {
    margin-bottom: 0;
}

.gallery-btn {
    display: inline-block;
    margin-top: 36px;
    padding: 12px 28px;
    border: 1px solid var(--gallery-black);
    font-family: var(--gallery-font-sans) !important;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gallery-black) !important;
    text-decoration: none;
    transition: background var(--gallery-transition), color var(--gallery-transition);
}

.gallery-btn:hover {
    background: var(--gallery-black);
    color: var(--gallery-white) !important;
    opacity: 1;
}

.gallery-btn-ghost {
    border-color: var(--gallery-mid-gray);
    color: var(--gallery-charcoal) !important;
}

.gallery-btn-ghost:hover {
    background: var(--gallery-charcoal);
    color: var(--gallery-white) !important;
    border-color: var(--gallery-charcoal);
}

/* ============================================= */
/* PROJECTS SECTION */
/* ============================================= */

#gallery-projects {
    position: relative;
    /* no z-index — does not form a stacking context, flower renders above bg */
    padding: 100px 0;
    border-top: 1px solid var(--gallery-mid-gray);
    background: var(--gallery-off-white);
}

.projects-header {
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 48px 48px;
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Experience summary ─────────────────────────────────── */
.projects-summary {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto 52px;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 32px 64px;
    align-items: stretch;   /* both cells grow to the same height */
    border-top: 1px solid var(--gallery-mid-gray, #d8d8d8);
    padding-top: 40px;
}

.projects-summary-bio {
    font-family: var(--gallery-font-sans);
    font-size: 15px;
    line-height: 1.75;
    color: var(--gallery-dark-gray);
    margin: 0;
    max-width: 620px;
}

.projects-summary-skills {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;  /* rows pin to top & bottom, spread evenly */
    height: 100%;                    /* fill the stretched grid cell */
    white-space: nowrap;
}

.projects-summary-skills li {
    font-family: var(--gallery-font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray);
    border-left: 2px solid var(--gallery-black);
    padding-left: 12px;
}

.projects-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2px;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
}

/* ── GitHub Repos Carousel ─────────────────────────────────────────────── */
.repos-carousel-wrap {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 56px auto 0;
    padding: 0 48px 0;
    overflow: hidden;
}

.repos-carousel-label {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 20px;
}

.repos-all-link {
    font-family: var(--gallery-font-sans);
    font-size: 11px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray);
    text-decoration: none;
    transition: color var(--gallery-transition);
}
.repos-all-link:hover { color: var(--gallery-black); }

/* Outer clip + fade edges */
.repos-track-outer {
    display: flex;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    /* pause on hover */
    cursor: default;
}
.repos-track-outer:hover .repos-track {
    animation-play-state: paused;
}

/* Each strip */
.repos-track {
    display: flex;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 4px 0 12px;
    /* width set by JS; animation added by JS once width is known */
    will-change: transform;
    flex-shrink: 0;
}

/* Individual repo box */
.repo-card {
    flex-shrink: 0;
    width: 168px;
    height: 168px;
    border: 1px solid var(--gallery-mid-gray, #d8d8d8);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 16px;
    gap: 6px;
    text-decoration: none;
    background: var(--gallery-white);
    transition: border-color var(--gallery-transition), box-shadow var(--gallery-transition);
    box-sizing: border-box;
}
.repo-card:hover {
    border-color: var(--gallery-black);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

.repo-card-name {
    font-family: var(--gallery-font-sans);
    font-size: 12px;
    font-weight: 500;
    color: var(--gallery-black);
    line-height: 1.35;
    word-break: break-all;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.repo-card-lang {
    font-family: var(--gallery-font-sans);
    font-size: 10px;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray);
}

@keyframes repos-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(var(--repos-scroll-dist)); }
}


.project-card {
    position: relative;
    overflow: hidden;
    background: var(--gallery-light-gray);
    cursor: pointer;
    aspect-ratio: 3/4;
}

.project-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--gallery-transition-slow);
    filter: grayscale(20%);
}

.project-card:hover .project-card-img {
    transform: scale(1.04);
    filter: grayscale(0%);
}

.project-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 24px;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, transparent 100%);
    transform: translateY(8px);
    transition: transform var(--gallery-transition);
}

.project-card:hover .project-card-overlay {
    transform: translateY(0);
}

.project-card-tag {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    font-family: var(--gallery-font-sans) !important;
    display: block;
    margin-bottom: 6px;
}

.project-card-title {
    font-family: var(--gallery-font-serif) !important;
    font-size: 17px;
    font-weight: 400 !important;
    color: #ffffff !important;
    line-height: 1.3;
}

/* Placeholder card for empty slots */
.project-card-placeholder {
    background: var(--gallery-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.project-card-placeholder span {
    font-size: 11px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gallery-mid-gray) !important;
    font-family: var(--gallery-font-sans) !important;
}

/* ============================================= */
/* ART SECTION (teaser) */
/* ============================================= */

#gallery-art-teaser {
    position: relative;
    /* no z-index — does not form a stacking context, flower renders above bg */
    padding: 100px 0;
    border-top: 1px solid var(--gallery-mid-gray);
    background: var(--gallery-white);
}

.art-teaser-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.art-teaser-text .section-title {
    margin-bottom: 20px;
}

.art-teaser-text p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--gallery-charcoal) !important;
    margin-bottom: 32px;
}

.art-teaser-visual {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    aspect-ratio: 1;
}

.art-teaser-tile {
    background: var(--gallery-light-gray);
    overflow: hidden;
}

.art-teaser-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--gallery-transition-slow), filter var(--gallery-transition-slow);
    filter: grayscale(30%);
}

.art-teaser-tile:hover img {
    transform: scale(1.06);
    filter: grayscale(0%);
}

.art-teaser-tile-empty {
    background: var(--gallery-light-gray);
    display: flex;
    align-items: center;
    justify-content: center;
}

.art-teaser-tile-empty span {
    font-size: 10px;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gallery-mid-gray) !important;
    font-family: var(--gallery-font-sans) !important;
}

/* ============================================= */
/* CONTACT SECTION */
/* ============================================= */

#gallery-contact {
    position: relative;
    /* no z-index — does not form a stacking context, flower renders above bg */
    padding: 100px 0;
    border-top: 1px solid var(--gallery-mid-gray);
    background: var(--gallery-off-white);
}

.contact-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

.contact-info .section-title {
    margin-bottom: 24px;
}

.contact-info p {
    font-size: 15px;
    line-height: 1.75;
    color: var(--gallery-charcoal) !important;
    margin-bottom: 36px;
}

.contact-details {
    list-style: none;
    margin: 0 0 36px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.contact-details li {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.contact-details .detail-label {
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray) !important;
    font-family: var(--gallery-font-sans) !important;
}

.contact-details .detail-value {
    font-size: 15px;
    color: var(--gallery-black) !important;
}

.contact-details .detail-value a {
    color: var(--gallery-black) !important;
    text-decoration: none;
    border-bottom: 1px solid var(--gallery-mid-gray);
    padding-bottom: 1px;
    transition: border-color var(--gallery-transition);
}

.contact-details .detail-value a:hover {
    border-color: var(--gallery-black);
    opacity: 1;
}

.contact-form-wrap {
    background: var(--gallery-white);
    padding: 48px;
}

.contact-form-wrap .form-group {
    margin-bottom: 24px;
}

.contact-form-wrap label {
    display: block;
    font-size: 10px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray) !important;
    font-family: var(--gallery-font-sans) !important;
    margin-bottom: 8px;
}

.contact-form-wrap input,
.contact-form-wrap textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--gallery-mid-gray);
    background: transparent;
    padding: 10px 0;
    font-size: 14px;
    font-family: var(--gallery-font-sans) !important;
    color: var(--gallery-black) !important;
    outline: none;
    transition: border-color var(--gallery-transition);
    border-radius: 0;
    -webkit-appearance: none;
    appearance: none;
}

.contact-form-wrap input:focus,
.contact-form-wrap textarea:focus {
    border-bottom-color: var(--gallery-black);
}

.contact-form-wrap input::placeholder,
.contact-form-wrap textarea::placeholder {
    color: var(--gallery-mid-gray) !important;
}

.contact-form-wrap textarea {
    resize: none;
    height: 100px;
}

.form-success {
    display: none;
    font-size: 13px;
    color: #2a7a2a !important;
    margin-top: 12px;
    font-family: var(--gallery-font-sans) !important;
    letter-spacing: 0.04em;
}

.form-error {
    display: none;
    font-size: 13px;
    color: #b00020 !important;
    margin-top: 12px;
    font-family: var(--gallery-font-sans) !important;
    letter-spacing: 0.04em;
}

/* ============================================= */
/* FOOTER */
/* ============================================= */

#gallery-footer {
    position: relative;
    /* no z-index — does not form a stacking context, flower renders above bg */
    padding: 48px;
    border-top: 1px solid var(--gallery-mid-gray);
    background: var(--gallery-white);
}

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

.footer-name {
    font-family: var(--gallery-font-serif) !important;
    font-size: 20px;
    font-weight: 400 !important;
    color: var(--gallery-black) !important;
}

.footer-copy {
    font-size: 12px;
    color: var(--gallery-dark-gray) !important;
    font-family: var(--gallery-font-sans) !important;
}

.footer-socials {
    display: flex;
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.footer-socials a {
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--gallery-dark-gray) !important;
    text-decoration: none;
    transition: color var(--gallery-transition);
}

.footer-socials a:hover {
    color: var(--gallery-black) !important;
    opacity: 1;
}

/* ============================================= */
/* RESPONSIVE */
/* ============================================= */

@media (max-width: 900px) {
    .gallery-section { padding: 80px 24px; }

    #gallery-nav { padding: 0 24px; }
    .nav-links { display: none; }
    .nav-mobile-toggle { display: flex; }

    .nav-mobile-drawer { padding: 24px 24px 32px; }

    .hero-text { left: 24px; right: auto; }
    .hero-lilypad { width: 100%; }
    .hero-petal { width: 110%; right: -55%; }

    .about-grid { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
    .about-image-wrap img { height: 380px; object-position: center; }

    .projects-header { padding: 0 24px 36px; flex-direction: column; align-items: flex-start; gap: 20px; }
    .projects-summary { grid-template-columns: 1fr; padding: 32px 24px 0; margin-bottom: 40px; }
    .projects-summary-skills { white-space: normal; }
    .repos-carousel-wrap { padding: 0 24px; margin-top: 40px; }
    .projects-grid { grid-template-columns: 1fr 1fr; padding: 0 24px; }

    .art-teaser-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }

    .contact-inner { grid-template-columns: 1fr; gap: 48px; padding: 0 24px; }
    .contact-form-wrap { padding: 32px 24px; }

    .footer-inner { flex-direction: column; align-items: flex-start; gap: 20px; padding: 0; }
    #gallery-footer { padding: 40px 24px; }
}

@media (max-width: 600px) {
    .projects-grid { grid-template-columns: 1fr; }
    .art-teaser-visual { grid-template-columns: 1fr 1fr; }
    .hero-name { font-size: 28px; }
    .hero-petal { width: 130%; right: -65%; }
}