/* CSS Variables for Theme Support */
:root {
    /* Light theme (default) */
    --bg-color: #fcfdfd;
    --text-color: #333333;
    --text-body: var(--text-color);
    --text-secondary: #5c5c5c;
    --accent-color: #6ec5e0;
    --accent-color-2: #46abc9;
    --border-color: var(--text-color);
    --lex: 'Lexend', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --lora: 'Lora', Georgia, 'Times New Roman', serif;
    --rob: 'Roboto Condensed', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --funnel: 'Funnel Display', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    --action: #f0f0f0;
    --toggle-track-bg: #f3f4f6;
    --toggle-track-bg-active: #e5e7eb;
    --toggle-track-border: var(--text-color);
    --shadow-color: #24496444;
}

/* Dark theme */
[data-theme="dark"] {
    --bg-color: #1c1c1d;
    --text-color: #e2e2e2;
    --text-body: #e5e5e5;
    --text-secondary: #aaaaaa;
    --accent-color: #a06fbf;
    --accent-color-2: #a06fbf;
    --border-color: #444444;
    --action: #4d4b4b;
    --toggle-track-bg: #2c2c2c;
    --toggle-track-bg-active: #4a4a4a;
    --toggle-track-border: var(--text-color);
    --shadow-color: rgba(229, 185, 215, 0.1);
}

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

html {
    scroll-behavior: auto;
}

body {
    font-family: var(--lex);
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--bg-color);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.page-header {
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 20;
    margin-bottom: 1rem;
    padding: 0.75rem calc(2vh + 0.5rem);
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--bg-color);
    box-shadow: 0 2px 8px var(--shadow-color);
    border: none;
}

[data-theme="dark"] .page-header {
    box-shadow: none;
    border-bottom: 2px solid var(--border-color);
}

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

.page-nav .back-link {
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--funnel);
    font-size: 0.95rem;
    font-weight: 500;
}

.page-nav .back-link:hover {
    text-decoration: underline;
}

.page-nav .back-link[aria-current="page"] {
    color: var(--accent-color);
}

main {
    display: flex;
    flex-direction: column;
    padding: 40px 10vw 20px 10vw;
    gap: 2rem;
}

html.theme-switching *,
html.theme-switching *::before,
html.theme-switching *::after {
    transition: none !important;
}

html.theme-switching .toggle-track {
    transition: background-color 0.25s ease, border-color 0.25s ease !important;
}

html.theme-switching .toggle-thumb {
    transition: transform 0.25s ease, background-color 0.25s ease !important;
}

#name {
    font-family: var(--funnel);
    font-size: 5rem;
    font-weight: 300;
    line-height: 1;
    color: var(--text-color);
    letter-spacing: -.01em;
    text-align: center;
    margin: 1.5rem 0 0.75rem 0;
}

main h1, h2 {
    color: var(--text-color);
    margin-bottom: 1rem;
    text-wrap: balance;
}

main h1 {
    text-align: center;
    font-size: 3rem;
    font-family: var(--funnel);
    font-weight: 400;
    line-height: 1.2;
}



h2 {
    font-size: 2rem;
    font-family: var(--lex);
    font-weight: 400;
    line-height: 1.3;
}

p {
    font-size: 1.2rem;
    color: var(--text-color);
}

footer p {
    text-align: center;
    font-family: var(--funnel);
    color: var(--accent-color-2);
    margin-bottom: 2rem;
    font-size: 1rem;
}

#fold h2 {
    font-size: 2.5rem;
}

#specialties {
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 1rem;
    text-wrap: balance;
    font-size: 1.4rem;
}

/* Button Row */
.button-row {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    margin-top: 2rem;
    width: 100%;
    flex-wrap: nowrap;
}

.cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    width: min(100%, 16.5rem);
    padding: 0.5rem 0.5rem 0.5rem 1rem;
    background: var(--bg-color);
    color: var(--text-color);
    text-decoration: none;
    font-family: var(--funnel);
    font-weight: 600;
    font-size: 1.1rem;
    border: 2.5px solid var(--border-color);
    border-radius: 999px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.cta-button:hover {
    background: var(--accent-color);
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
    border-color: var(--accent-color);
}

.button-row:has(.cta-button:hover) .cta-button:not(:hover) {
    border-color: color-mix(in srgb, var(--border-color) 75%, transparent);
    transition: border-color 0.3s ease;
}

.button-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    padding: 0.35rem;
    background: var(--accent-color);
    border-radius: 50%;
}

.button-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

#fold {
    min-height: 95vh;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    isolation: isolate;
}

#fold::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: calc(50% - 138px);
    background-color: #6ec5e020;
    background-image:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%236ec5e0' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
    clip-path: polygon(
        0 0,
        100% 0,
        100% 100%,
        84% calc(100% - 7px),
        68% calc(100% - 14px),
        50% calc(100% - 18px),
        32% calc(100% - 14px),
        16% calc(100% - 7px),
        0 100%
    );
    z-index: -1;
    pointer-events: none;
}

/* Image Container */
#image-container {
    position: relative;
    border-radius: 60px;
    box-shadow: 0 8px 32px var(--shadow-color);
    border: 2.5px solid var(--border-color);
    box-sizing: content-box;
    height: 300px;
    width: 300px;
}

#image-container img {
    width: 100%;
    height: 100%;
    max-height: 100%;
    border-radius: 57.5px;
    object-fit: cover;
}
.content-row {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
}

.toggle-panel {
    position: absolute;
    top: 25%;
    right: -48px;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    z-index: 12;
}

.toggle-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

.toggle-switch:focus-visible {
    outline: none;
}

.toggle-switch:focus-visible .toggle-track {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 70%, white);
    outline-offset: 3px;
}

.toggle-switch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-track {
    width: 88px;
    height: 50px;
    border-radius: 999px;
    background: var(--toggle-track-bg);
    border: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 6px;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

.toggle-thumb {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.toggle-icon {
    width: 20px;
    height: 20px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Toggle 1: Light/Dark Mode */
.toggle-panel label:nth-of-type(1) .toggle-track {
    background: #94dcf2;
}

.toggle-panel label:nth-of-type(1) .toggle-icon {
    background-image: url('icons/light_day.svg');
}

.toggle-panel label:nth-of-type(1) input:checked + .toggle-track {
    background: #a06fbf;
}

.toggle-panel label:nth-of-type(1) input:checked + .toggle-track .toggle-icon {
    background-image: url('icons/dark_night.svg');
}

/* Toggle 2: Casual/Business Image */
.toggle-panel label:nth-of-type(2) .toggle-track {
    background: #e87758;
}

.toggle-panel label:nth-of-type(2) .toggle-icon {
    background-image: url('icons/business.svg');
}

.toggle-panel label:nth-of-type(2) input:checked + .toggle-track {
    background: #a9e36f;
}

.toggle-panel label:nth-of-type(2) input:checked + .toggle-track .toggle-icon {
    background-image: url('icons/casual.svg');
}

.toggle-switch input:checked + .toggle-track .toggle-thumb {
    transform: translateX(36px);
}

@media (max-width: 840px) {
    .toggle-label {
        display: none;
    }

    #name {
        font-size: 4rem;
    }

    .button-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 600px) {
    #fold {
        padding: 2rem 1.5rem;
    }

    #image-container {
        width: 250px;
        height: auto;
        border: none;
        box-shadow: none
    }

    #image-container img {
        height: auto;
        max-height: 250px;
    }

    #name {
        font-size: 3rem;
    }

    #fold h2 {
        font-size: 1.6rem;
        text-wrap: normal;
        text-align: center;
    }

    #specialties {
        font-size: 1.1rem;
    }

    .toggle-panel {
        position: static;
        flex-direction: row;
        justify-content: center;
        margin-top: 1rem;
        width: 100%;;
    }

    #intro {
        padding: 0 1.5rem;
        margin: 2rem 0 3rem 0;
    }

    .intro-copy {
        padding-top: 0;
    }
}

/* Window Controls */
.window-controls {
    position: absolute;
    top: 20px;
    left: 24px;
    display: flex;
    gap: 8px;
    z-index: 10;
}

.control-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid var(--border-color);
    transition: background-color 0.25s ease, filter 0.25s ease;
}

.control-circle.close {
    background-color: #ef447a;
}

.control-circle.minimize {
    background-color: #f1d444;
}

.control-circle.maximize {
    background-color: #4fd998;
}

.window-controls:hover .control-circle {
    background-color: rgba(255, 255, 255, 0.65);
    filter: saturate(0.2);
}

.control-circle.close:hover {
    background-color: #ef447a;
    filter: none;
}

.control-circle.minimize:hover {
    background-color: #f1d444;
    filter: none;
}

.control-circle.maximize:hover {
    background-color: #4fd998;
    filter: none;
}

/* Cursor Flourish */
.cursor-flourish {
    position: absolute;
    left: -68px;
    top: 65%;
    transform: translateY(-50%);
    z-index: 5;
    filter: drop-shadow(0 2px 4px var(--shadow-color));
    transition: transform 0.3s ease;
}

.cursor-flourish:hover {
    animation: wiggle 0.4s ease-out;
    transform-origin: 100% 36%;
}

/* Dark mode styling */
[data-theme="dark"] #fold::before {
    background-color: #121212;
    background-image:
     url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 304 304' width='304' height='304'%3E%3Cpath fill='%23BC13FE' fill-opacity='0.4' d='M44.1 224a5 5 0 1 1 0 2H0v-2h44.1zm160 48a5 5 0 1 1 0 2H82v-2h122.1zm57.8-46a5 5 0 1 1 0-2H304v2h-42.1zm0 16a5 5 0 1 1 0-2H304v2h-42.1zm6.2-114a5 5 0 1 1 0 2h-86.2a5 5 0 1 1 0-2h86.2zm-256-48a5 5 0 1 1 0 2H0v-2h12.1zm185.8 34a5 5 0 1 1 0-2h86.2a5 5 0 1 1 0 2h-86.2zM258 12.1a5 5 0 1 1-2 0V0h2v12.1zm-64 208a5 5 0 1 1-2 0v-54.2a5 5 0 1 1 2 0v54.2zm48-198.2V80h62v2h-64V21.9a5 5 0 1 1 2 0zm16 16V64h46v2h-48V37.9a5 5 0 1 1 2 0zm-128 96V208h16v12.1a5 5 0 1 1-2 0V210h-16v-76.1a5 5 0 1 1 2 0zm-5.9-21.9a5 5 0 1 1 0 2H114v48H85.9a5 5 0 1 1 0-2H112v-48h12.1zm-6.2 130a5 5 0 1 1 0-2H176v-74.1a5 5 0 1 1 2 0V242h-60.1zm-16-64a5 5 0 1 1 0-2H114v48h10.1a5 5 0 1 1 0 2H112v-48h-10.1zM66 284.1a5 5 0 1 1-2 0V274H50v30h-2v-32h18v12.1zM236.1 176a5 5 0 1 1 0 2H226v94h48v32h-2v-30h-48v-98h12.1zm25.8-30a5 5 0 1 1 0-2H274v44.1a5 5 0 1 1-2 0V146h-10.1zm-64 96a5 5 0 1 1 0-2H208v-80h16v-14h-42.1a5 5 0 1 1 0-2H226v18h-16v80h-12.1zm86.2-210a5 5 0 1 1 0 2H272V0h2v32h10.1zM98 101.9V146H53.9a5 5 0 1 1 0-2H96v-42.1a5 5 0 1 1 2 0zM53.9 34a5 5 0 1 1 0-2H80V0h2v34H53.9zm60.1 3.9V66H82v64H69.9a5 5 0 1 1 0-2H80V64h32V37.9a5 5 0 1 1 2 0zM101.9 82a5 5 0 1 1 0-2H128V37.9a5 5 0 1 1 2 0V82h-28.1zm16-64a5 5 0 1 1 0-2H146v44.1a5 5 0 1 1-2 0V18h-26.1zm102.2 270a5 5 0 1 1 0 2H98v14h-2v-16h124.1zM242 149.9V160h16v34h-16v62h48v48h-2v-46h-48v-66h16v-30h-16v-12.1a5 5 0 1 1 2 0zM53.9 18a5 5 0 1 1 0-2H64V2H48V0h18v18H53.9zm112 32a5 5 0 1 1 0-2H192V0h50v2h-48v48h-28.1zm-48-48a5 5 0 0 1-9.8-2h2.07a3 3 0 1 0 5.66 0H178v34h-18V21.9a5 5 0 1 1 2 0V32h14V2h-58.1zm0 96a5 5 0 1 1 0-2H137l32-32h39V21.9a5 5 0 1 1 2 0V66h-40.17l-32 32H117.9zm28.1 90.1a5 5 0 1 1-2 0v-76.51L175.59 80H224V21.9a5 5 0 1 1 2 0V82h-49.59L146 112.41v75.69zm16 32a5 5 0 1 1-2 0v-99.51L184.59 96H300.1a5 5 0 0 1 3.9-3.9v2.07a3 3 0 0 0 0 5.66v2.07a5 5 0 0 1-3.9-3.9H185.41L162 121.41v98.69zm-144-64a5 5 0 1 1-2 0v-3.51l48-48V48h32V0h2v50H66v55.41l-48 48v2.69zM50 53.9v43.51l-48 48V208h26.1a5 5 0 1 1 0 2H0v-65.41l48-48V53.9a5 5 0 1 1 2 0zm-16 16V89.41l-34 34v-2.82l32-32V69.9a5 5 0 1 1 2 0zM12.1 32a5 5 0 1 1 0 2H9.41L0 43.41V40.6L8.59 32h3.51zm265.8 18a5 5 0 1 1 0-2h18.69l7.41-7.41v2.82L297.41 50H277.9zm-16 160a5 5 0 1 1 0-2H288v-71.41l16-16v2.82l-14 14V210h-28.1zm-208 32a5 5 0 1 1 0-2H64v-22.59L40.59 194H21.9a5 5 0 1 1 0-2H41.41L66 216.59V242H53.9zm150.2 14a5 5 0 1 1 0 2H96v-56.6L56.6 162H37.9a5 5 0 1 1 0-2h19.5L98 200.6V256h106.1zm-150.2 2a5 5 0 1 1 0-2H80v-46.59L48.59 178H21.9a5 5 0 1 1 0-2H49.41L82 208.59V258H53.9zM34 39.8v1.61L9.41 66H0v-2h8.59L32 40.59V0h2v39.8zM2 300.1a5 5 0 0 1 3.9 3.9H3.83A3 3 0 0 0 0 302.17V256h18v48h-2v-46H2v42.1zM34 241v63h-2v-62H0v-2h34v1zM17 18H0v-2h16V0h2v18h-1zm273-2h14v2h-16V0h2v16zm-32 273v15h-2v-14h-14v14h-2v-16h18v1zM0 92.1A5.02 5.02 0 0 1 6 97a5 5 0 0 1-6 4.9v-2.07a3 3 0 1 0 0-5.66V92.1zM80 272h2v32h-2v-32zm37.9 32h-2.07a3 3 0 0 0-5.66 0h-2.07a5 5 0 0 1 9.8 0zM5.9 0A5.02 5.02 0 0 1 0 5.9V3.83A3 3 0 0 0 3.83 0H5.9zm294.2 0h2.07A3 3 0 0 0 304 3.83V5.9a5 5 0 0 1-3.9-5.9zm3.9 300.1v2.07a3 3 0 0 0-1.83 1.83h-2.07a5 5 0 0 1 3.9-3.9zM97 100a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-48 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 96a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-144a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm96 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM49 36a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-32 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM33 68a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 240a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm80-176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 48a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm112 176a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm-16 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 180a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0 16a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm0-32a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16 0a3 3 0 1 0 0-6 3 3 0 0 0 0 6zM17 84a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm32 64a3 3 0 1 0 0-6 3 3 0 0 0 0 6zm16-16a3 3 0 1 0 0-6 3 3 0 0 0 0 6z'%3E%3C/path%3E%3C/svg%3E");
}

[data-theme="dark"] .cursor-flourish path {
    stroke: var(--border-color);
    fill: #ededed;
}

/* Wiggle Animation */
@keyframes wiggle {
    0% { transform: translateY(-50%) rotate(0deg); }
    25% { transform: translateY(-50%) rotate(3deg); }
    50% { transform: translateY(-50%) rotate(-3deg); }
    75% { transform: translateY(-50%) rotate(3deg); }
    100% { transform: translateY(-50%) rotate(0deg); }
}

.toggle-label {
    font-family: 'Funnel Display', sans-serif;
    font-size: 0.9rem;
    color: var(--text-primary);
    user-select: none;
}

.page-header .theme-toggle-container {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.page-header .toggle-track {
    width: 66px;
    height: 37.5px;
    padding: 4.5px;
}

.page-header .toggle-thumb {
    width: 27px;
    height: 27px;
}

.page-header .toggle-icon {
    width: 15px;
    height: 15px;
}
/* Theme Toggle: Light/Dark Mode */
.theme-toggle-container .toggle-track {
    background: #94dcf2;
}

.theme-toggle-container .toggle-icon {
    background-image: url('icons/light_day.svg');
}

.theme-toggle-container input:checked + .toggle-track {
    background: #a06fbf;
}

.theme-toggle-container input:checked + .toggle-track .toggle-icon {
    background-image: url('icons/dark_night.svg');
}

.page-header .theme-toggle-container input:checked + .toggle-track .toggle-thumb {
    transform: translateX(27px);
}

.theme-toggle-container input:checked + .toggle-track .toggle-thumb {
    transform: translateX(36px);
}

/* Intro Section */
#intro {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 40px 0 60px 0;
}

.intro-content {
    width: min(1100px, 100%);
    display: grid;
    grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

.intro-media {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.intro-media img {
    width: 100%;
    height: auto;
    max-height: 75vh;
    border-radius: 24px;
    border: 2.5px solid var(--border-color);
    box-shadow: 0 8px 32px var(--shadow-color);
}

.intro-media figcaption {
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
    text-align: center;
    font-family: var(--funnel);
    font-weight: 500;
}

.intro-copy {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    padding-top: 32px;
}

.intro-copy h2 {
    text-align: left;
}

.intro-copy p {
    color: var(--text-body);
    margin-bottom: 1rem;
    text-align: left;
}

@media (max-width: 900px) {
    .intro-content {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .intro-media {
        max-width: 360px;
        width: 100%;
        margin: 0 auto;
    }

    .intro-copy h2 {
        text-align: center;
    }
}

/* Keep section heights tighter on very large/zoomed-out viewports */
@media (min-height: 1200px) {
    #fold {
        min-height: fit-content;
    }

    #intro {
        min-height: fit-content;
        margin: 4.5rem 0 60px 0;
    }
}

/* ─── CV Page ─────────────────────────────────────────────── */

.cv-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 10vw;
    display: flex;
    flex-direction: column;
    gap: 3rem;
}

main h1 {
    font-family: var(--funnel);
    font-size: 2.6rem;
    font-weight: 300;
    margin-bottom: 0;
}

/* Section */
.cv-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.cv-section h2 {
    font-family: var(--funnel);
    font-size: 1.2rem;
    font-weight: 800;
    text-align: left;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    padding-bottom: 0.5rem;
    border-bottom: 1.5px solid var(--border-color);
}

#skills .skills-list {
    list-style: none;
    margin: 0;
    padding: 0;
    column-count: 2;
    column-gap: 1.75rem;
}

#skills .skills-list li {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--lex);
    font-size: 0.95rem;
    color: var(--text-color);
    --logo-url-light: none;
    --logo-url-dark: none;
    margin-bottom: 0.55rem;
    break-inside: avoid;
}

#skills .tech-logo {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, var(--border-color) 25%, transparent);
    background-color: color-mix(in srgb, var(--action) 55%, transparent);
    background-image: var(--logo-url-light);
    background-size: 60% 60%;
    background-repeat: no-repeat;
    background-position: center;
}

[data-theme="dark"] #skills .tech-logo {
    background-image: var(--logo-url-dark);
}

@media (max-width: 720px) {
    #skills .skills-list {
        column-count: 1;
    }
}

/* Item card */
.item {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 1.5rem 0;
    border-bottom: 1px solid color-mix(in srgb, var(--border-color) 30%, transparent);
}

.item:last-child {
    border-bottom: none;
}

.item .title {
    font-family: var(--funnel);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--text-color);
    margin: 0;
    line-height: 1.3;
}

.item .institution_datetime {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 0.5rem;
    align-items: center;
}

.item .institution_datetime span {
    font-family: var(--lex);
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--text-color);
    margin: 0;
}

.item .institution_datetime span.slashslash {
    color: var(--accent-color-2);
}

/* Tags */
.item .tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 0.45rem;
    margin: 0.3rem 0;
    padding: 0;
}

.item .tags li {
    display: inline-flex;
    align-items: center;
    padding: 0.18rem 0.55rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--text-color) 45%, transparent);
    background: color-mix(in srgb, var(--action) 65%, transparent);
    font-family: var(--lex);
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.5;
}

[data-theme="dark"] .item .tags li {
    border: none;
}

.item .tags li strong {
    font-weight: 500;
}

.item .tags li strong,
.item .tags li i {
    font-size: inherit;
    color: var(--text-color);
}

/* Description */
.item .description {
    list-style: none;
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    padding-left: 1.6rem;
}

.item .context {
    font-family: var(--lora);
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--text-secondary);
    line-height: 1.6;
}

.item .description li {
    font-family: var(--lex);
    font-size: 0.9rem;
    color: var(--text-body);
    line-height: 1.55;
    padding-left: 1rem;
    position: relative;
}

.item .description li::before {
    content: '•';
    font-weight: 700;
    position: absolute;
    left: 0;
    color: var(--accent-color-2);
}

.portfolio-content {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2.5rem 10vw;
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.portfolio-overview {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.portfolio-overview p {
    font-size: 1rem;
    color: var(--text-body);
}

#info-alert {
    font-family: var(--lora);
    font-style: italic;
    color: var(--text-secondary);
    margin: 0.75rem 0 0 0;
    padding-left: 0.8rem;
    border-left: 3px solid var(--accent-color-2);
    /* text-wrap: balance; */
}

.portfolio-content .cv-section {
    margin-top: 0.25rem;
}

.portfolio-content .item {
    padding: 1.15rem 0;
}

.sample-embed {
    width: 100%;
    max-width: 760px;
    margin-top: 0.85rem;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid color-mix(in srgb, var(--border-color) 28%, transparent);
    background: color-mix(in srgb, var(--action) 72%, transparent);
}

.sample-embed iframe,
.sample-embed img {
    width: 100%;
    border: none;
    display: block;
}

.sample-embed-video iframe {
    aspect-ratio: 16 / 9;
}

.sample-embed-image img {
    height: auto;
}

[data-theme="dark"] #info-alert {
    border-left-color: var(--accent-color);
}

@media (max-width: 640px) {
    .cv-content {
        padding: 2rem 6vw;
    }

    .portfolio-content {
        padding: 2rem 6vw;
        gap: 2rem;
    }
}