/* Custom Styles & Typography Support */
body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    background-color: #ffffff;
    color: #111827;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.03) 1px, transparent 1px),
                      linear-gradient(to bottom, rgba(0, 0, 0, 0.03) 1px, transparent 1px);
    background-size: 32px 32px;
}

html.dark body {
    background-image:
        radial-gradient(circle at 20% 0%, rgba(59, 130, 246, 0.12), transparent 45%),
        radial-gradient(circle at 80% 100%, rgba(16, 185, 129, 0.10), transparent 45%),
        linear-gradient(to right, rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: auto, auto, 32px 32px, 32px 32px;
}

html.dark section:not(#home) {
    position: relative;
    isolation: isolate;
}

html.dark section:not(#home)::before {
    content: "";
    position: absolute;
    inset: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    background: var(--section-bg, #0b0b0b);
    z-index: -1;
    pointer-events: none;
}

html.dark section:not(#home) > * {
    position: relative;
    z-index: 1;
}

html.dark section:not(#home) {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

html.dark #about {
    --section-bg: #111827;
}

html.dark #experience {
    --section-bg: #0f172a;
}

html.dark #projects {
    --section-bg: #111827;
}

html.dark #services {
    --section-bg: #1f2937;
}

html.dark #education {
    --section-bg: #0b1220;
}

html.dark #software-knowledge {
    --section-bg: #111827;
}

html.dark #contact {
    --section-bg: #0f172a;
}

/* Render section top borders at full viewport width. */
section.border-t {
    position: relative;
    border-top-width: 0;
}

section.border-t::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    border-top: 1px solid rgb(243 244 246);
    pointer-events: none;
}

html.dark section.border-t::before {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.serif-heading {
    font-family: 'Playfair Display', serif;
}

.mono-font {
    font-family: 'JetBrains Mono', monospace;
}

/* Project image hover zoom */
#projects img.object-cover {
    transition: transform 300ms ease;
    cursor: pointer;
}

#projects .grid.items-center:hover img.object-cover {
    transform: scale(1.05);
}