@font-face {
    font-family: "Boldonse";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/boldonse-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2212;
}
@font-face {
    font-family: "Boldonse";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/assets/fonts/boldonse-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+1E00-1EFF;
}
@font-face {
    font-family: "Caveat";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/assets/fonts/caveat-latin.woff2") format("woff2");
}

:root {
    /* the palette: yellow and purple, plus shades of them */
    --yellow: #dea30e;
    --yellow-light: #f5c95c;
    --yellow-dark: #a87a06;
    --purple: #6e00cc;
    --purple-light: #a64dff;
    --purple-dark: #43007a;
    --red: #d43a2f;

    /* light theme (default) */
    --bg: var(--yellow);
    --text: #ffffff;
    --accent: var(--purple);
    --accent-soft: var(--purple-light);
    --card-bg: linear-gradient(145deg, rgba(110, 0, 204, 0.2), rgba(255, 255, 255, 0.15));
}

:root[data-theme="dark"] {
    --bg: #1a1023; /* purple-tinted near-black */
    --text: #f3e8d0;
    --accent: var(--yellow);
    --accent-soft: var(--yellow-light);
    --card-bg: linear-gradient(145deg, rgba(110, 0, 204, 0.25), rgba(222, 163, 14, 0.12));
}

html {
    scroll-behavior: smooth;
}

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg);
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    font-family: "Boldonse", system-ui;
    color: var(--text);
    font-size: 23px;
    transition: background-color 0.4s ease, color 0.4s ease;
}

/* the home page does not scroll: everything fits the viewport */
body.home {
    height: 100vh;
    overflow: hidden;
}

main, nav {
    position: relative;
}

h1, h2, h3, p {
    color: var(--text);
    margin: 0;
    margin-bottom: 1%;
}

h1 { font-size: 5vw; }
h2 { font-size: 3vw; }
h3 { font-size: 2vw; }

a {
    text-decoration: none;
    color: var(--text);
}

a:hover {
    color: var(--accent);
}

.accent {
    color: var(--accent);
}

.icon {
    width: 1em;
    height: 1em;
    fill: currentColor;
    vertical-align: -0.125em;
}

/* ### navigation */

nav {
    display: flex;
    width: 100%;
    font-size: 38px;
    z-index: 3;
}

nav .nav_section {
    display: flex;
    gap: 1.2rem;
    padding: 1.5rem 2rem;
    align-items: center;
    flex: 1;
}

#menu { justify-content: flex-start; }
#contacts { justify-content: center; }
#toggle { justify-content: flex-end; }

nav a, nav button {
    /* comfortable touch targets on mobile */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    cursor: pointer;
}

nav button {
    background: none;
    border: none;
    color: var(--text);
    font-size: inherit;
    padding: 0;
}

nav button:hover {
    color: var(--accent);
}

/* ### hero (home) */

section {
    padding: 4%;
}

#about {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    height: calc(100vh - 180px); /* nav on top, scribbles fit above the text */
    padding-bottom: 10vh; /* a bit of space from the end of the page */
}

/* main.js scales the hero down (never up) when the viewport is too short for
   it to sit below the strip reserved for the handwritten notes */
#hero {
    transform: scale(var(--hero-scale, 1));
    transform-origin: bottom left;
}

#roles {
    color: var(--accent);
    min-height: 1.4em;
}

#caret {
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    50% { opacity: 0; }
}

/* ### handwritten notes (home) */

.scribble {
    position: absolute;
    z-index: 2;
    display: inline-block;
    font-family: "Caveat", cursive;
    font-size: 34px;
    color: var(--text);
    pointer-events: none;
    line-height: 1;
}

/* the arrows are drawn here by main.js: label -> target, any screen size */
#scribble-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    fill: none;
    stroke: var(--text);
    stroke-width: 2.5;
    stroke-linecap: round;
}

#scribble-projects, #scribble-blog {
    color: var(--accent);
}

/* fallback positions; main.js randomizes them inside per-label areas */
#scribble-projects {
    top: 150px;
    left: 70px;
    transform: rotate(-7deg);
}

#scribble-blog {
    top: 185px;
    left: 210px;
    transform: rotate(8deg);
}

#scribble-donut {
    top: 22vh;
    right: 6vw;
    max-width: 240px;
    transform: rotate(-6deg);
}

/* ### page travel veil (donut spin navigation) */

.page-veil {
    position: fixed;
    inset: 0;
    background-color: var(--bg);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
    transition: opacity 0.8s ease;
}

.page-veil.down {
    opacity: 1;
}

/* the toggle carries both icons; data-theme decides which one shows */
.theme-moon { display: none; }
:root[data-theme="dark"] .theme-sun { display: none; }
:root[data-theme="dark"] .theme-moon { display: inline; }

/* soft fade-in when a page opens */
main {
    animation: page-arrive 0.4s ease;
}

@keyframes page-arrive {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ### CV dialog */

dialog {
    border: none;
    border-radius: 20px;
    padding: 2.5rem 3rem;
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 20px;
    text-align: center;
    max-width: min(90vw, 480px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

dialog::backdrop {
    background: rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(4px);
}

.dialog-actions {
    margin-top: 1.8rem;
    display: flex;
    justify-content: center;
}

.red-button {
    /* an actual big red button */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 84px;
    height: 84px;
    border-radius: 50%;
    font-size: 34px;
    background-color: var(--red);
    color: white;
    box-shadow: 0 6px 0 #8f221a, 0 10px 20px rgba(0, 0, 0, 0.3);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.red-button:hover {
    color: white;
    transform: translateY(2px);
    box-shadow: 0 4px 0 #8f221a, 0 6px 12px rgba(0, 0, 0, 0.3);
}

.red-button:active {
    transform: translateY(6px);
    box-shadow: 0 0 0 #8f221a, 0 2px 6px rgba(0, 0, 0, 0.3);
}

.dialog-close {
    position: absolute;
    top: 0.8rem;
    right: 0.8rem;
    background: none;
    border: none;
    color: var(--text);
    font-size: 20px;
    cursor: pointer;
    min-width: 44px;
    min-height: 44px;
}

.dialog-close:hover {
    color: var(--accent);
}

/* ### projects */

#projects {
    position: relative;
    max-width: 1150px;
    margin: 0 auto;
}

/* the hand-drawn line walking from one project to the next (projects.js) */
#project-path {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: visible; /* cards may sit outside the column, the path follows */
    fill: none;
    stroke: var(--text);
    stroke-width: 2.5;
    stroke-linecap: round;
    opacity: 0.8;
}

.projects-sub {
    font-size: 0.9em;
    margin-bottom: 3rem;
}

.project-period {
    display: block;
    font-size: 0.7em;
    color: var(--accent);
    margin-bottom: 0.6em;
}

/* cards size themselves to their content; image cards are wide and give the
   image the stage, text-only cards stay compact and readable */
.project {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 400px auto; /* firm text column: the image column adapts */
    width: fit-content;
    /* no column limit: a card may grow past #projects, only the screen bounds
       it (projects.js keeps it inside the viewport) */
    gap: 28px;
    align-items: stretch;
    margin-bottom: 130px;
    border-radius: 20px;
    padding: 24px;
    background: var(--card-bg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

/* alternate the cards along the path, deterministically; on right cards the
   image comes first, so the columns mirror too (image auto, text 380px) */
.project-left { margin-right: auto; }
.project-right {
    margin-left: auto;
    grid-template-columns: auto 400px;
}

.project h2 {
    font-size: clamp(24px, 2.4vw, 34px);
}

.project-canvas {
    /* projects.js sizes each image to the exact card height at its own
       aspect ratio, so the card grows as wide as the image needs */
    display: block;
    align-self: center; /* when the width cap makes it shorter than the text */
    justify-self: center;
    border-radius: 20px; /* same rounding as the card */
}

.project-content {
    align-self: center;
}

.project-right .project-content {
    order: 1;
}

.project.no-image {
    grid-template-columns: 1fr;
    max-width: min(620px, 100%);
    font-size: 0.9em;
}

.project-content ul {
    line-height: 1.9;
    font-size: 0.88em;
    padding-left: 1.2em;
    margin: 0;
}

@counter-style space-counter {
    system: cyclic;
    symbols: ">";
    suffix: "  ";
}

li {
    list-style-type: space-counter;
}

/* scroll reveal (JS adds .visible via IntersectionObserver) */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;
    transform: none;
}

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
    #caret {
        animation: none;
    }
    .page-veil {
        transition: none;
        opacity: 0;
    }
}

/* ### background canvas */

#bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    filter: blur(7px);
    transform: scale(1.1);
}

/* ### back to top */

#backToTopBtn {
    pointer-events: none;
    font-size: 25px;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 2;
    border: none;
    outline: none;
    background-color: var(--text);
    color: var(--accent);
    cursor: pointer;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

#backToTopBtn:hover {
    background-color: var(--accent);
    color: var(--bg);
}

/* ### short viewports (browsers with a taller UI, small laptops): the home
   page never scrolls, so the hero has to shrink instead of overflowing */

@media (max-height: 800px) {
    body.home { font-size: 20px; }
    body.home h1 { font-size: min(5vw, 46px); }
    body.home h2 { font-size: min(3vw, 28px); }
    body.home nav { font-size: 32px; }
    body.home .scribble { font-size: 28px; }
    #about {
        height: calc(100vh - 130px);
        padding-bottom: 5vh;
    }
}

@media (max-height: 650px) {
    body.home { font-size: 17px; }
    body.home h1 { font-size: min(5vw, 36px); }
    body.home h2 { font-size: min(3vw, 23px); }
    body.home nav { font-size: 27px; }
    body.home .scribble { font-size: 24px; }
    #about {
        height: calc(100vh - 105px);
        padding-bottom: 3vh;
    }
}

/* ### mobile */

@media (max-width: 700px) {
    body { font-size: 18px; }
    nav { font-size: 27px; }
    nav .nav_section { padding: 1rem 0.4rem; gap: 0.2rem; min-width: 0; }
    nav a, nav button { min-width: 38px; min-height: 44px; }
    h1 { font-size: 40px; }
    h2 { font-size: 26px; }
    h3 { font-size: 22px; }

    #about {
        height: calc(100vh - 140px);
        padding-bottom: 6vh;
    }

    #roles { min-height: 2.2em; }

    .scribble { font-size: 24px; }
    #scribble-projects { top: 120px; left: 16px; }
    #scribble-blog { top: 150px; left: 110px; }
    #scribble-donut { top: 26vh; right: 5vw; max-width: 170px; }

    .project {
        grid-template-columns: 1fr;
        gap: 0;
        width: 100%;
    }

    .project-content, .project.no-image .project-content {
        max-width: none;
    }

    .project-content { order: 0; }

    .project-canvas {
        /* projects.js sets the width (percentage); the height follows, so the
           aspect ratio is kept and the image can never leave the card */
        order: 1;
        max-width: 100%;
        height: auto;
        margin-top: 15px;
    }
}