/* ==========================================================================
   mateovr.com stylesheet
   One file for every page. Sections, in order:

   1.  Colors and settings
   2.  Base styles (reset, page background, grain)
   3.  Text and links
   4.  Navigation (sideways bar on desktop, hamburger menu on mobile)
   5.  Page layout (wrapper, main content, footer)
   6.  Home page (name block; the project cards below it are in section 9)
   7.  About page
   8.  Photography page
   9.  Design page (project cards)
   10. Project pages (title, summary, images, "View Other Work")
   11. Floating shapes (home page animation)
   11b. Section indicator (home page, desktop only)
   11c. Page transitions
   12. Archived pages

   Screen sizes used throughout:
   1350px and below = smaller laptops
   1050px and below = tablets (navigation switches to the hamburger menu)
   800px and below  = large phones
   550px and below  = phones
   ========================================================================== */


/* Fonts
   Source Sans Pro is stored with the site (in /fonts) instead of loading from
   Google, so it's ready right away and the page doesn't flash a default
   font first. The two weights the homepage needs first (400 and 700) are
   also "preloaded" in each page's <head>.
   font-display: block tells the browser to wait for the font (a split
   second, since it's stored here) instead of showing a stand-in font first.
   Change it to swap if you'd rather show a stand-in while it loads.
   ========================================================================== */
@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url('../fonts/source-sans-pro-latin-300-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/source-sans-pro-latin-400-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 400;
    font-display: block;
    src: url('../fonts/source-sans-pro-latin-400-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 600;
    font-display: block;
    src: url('../fonts/source-sans-pro-latin-600-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 600;
    font-display: block;
    src: url('../fonts/source-sans-pro-latin-600-italic.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: normal;
    font-weight: 700;
    font-display: block;
    src: url('../fonts/source-sans-pro-latin-700-normal.woff2') format('woff2');
}

@font-face {
    font-family: 'Source Sans Pro';
    font-style: italic;
    font-weight: 700;
    font-display: block;
    src: url('../fonts/source-sans-pro-latin-700-italic.woff2') format('woff2');
}


/* 1. Colors and settings
   ========================================================================== */
:root {
    --background: rgb(255, 246, 224);   /* cream, used for text on dark backgrounds */
    --text-color: rgb(0, 0, 0);
    --accent-color: #1b998b;            /* teal: active nav link, underlines, mobile menu */
    --accent-text: #137267;             /* darker teal for text, so it's easy to read on the light background */
    --button-hover: rgba(27, 153, 139, 0.12);   /* pale wash of the teal behind buttons on hover */
    --card-background: rgba(255, 255, 255, .25);   /* soft fill behind the project cards (use transparent for none) */
    --menu-text: #ebfff3;               /* links and X in the open mobile menu (between the gradient mint and white) */
    --sidebar-width: 70px;              /* width of the sideways menu on desktop */
    --menu-speed: 1s;                   /* how fast the mobile menu circle opens */
    --hover-speed: 0.5s;                /* how long the project card hover takes (bigger = slower, smoother) */
    --hover-ease: cubic-bezier(0.4, 0, 0.2, 1);   /* starts gently and settles gently */
}


/* 2. Base styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style: none;
    text-decoration: none;
    font-family: 'Source Sans Pro', sans-serif;
}

/* Slowly shifting pastel gradient behind every page */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
    background: linear-gradient(-45deg, #ffe5e9, #e0ffec, #d6ecff, #fed1e7);
    background-color: #ede8ef;   /* average of the gradient colors, shown if the gradient isn't drawn yet */
    background-size: 400% 400%;
    animation: gradient 15s ease infinite;
    animation-delay: var(--gradient-delay, 0s);   /* set by js/gradient.js so it continues across pages */
    height: 100vh;
}

@keyframes gradient {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Film grain overlay (drawn by js/noise.js) */
.noise {
    z-index: 100;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .03;
}


/* 3. Text and links
   ========================================================================== */
h1, h2, h3, p {
    color: var(--text-color);
}

h1 { font-size: 12.5vw; }
h2 { font-size: 5.5vw; font-weight: 600; }
h3 { font-size: 6vw; font-weight: 600; }
p  { font-size: 16px; }

a,
a:visited,
a:hover,
a:active {
    color: var(--text-color);
}

a:hover {
    cursor: pointer;
}

/* Teal underline that grows in on hover (About page email and footer links) */
.bio1 a,
footer a {
    position: relative;
}

.bio1 a::before,
footer a::before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 2px;
    bottom: -3px;
    left: 0;
    background-color: var(--accent-color);
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.bio1 a:hover::before,
footer a:hover::before {
    transform: scaleX(1);
}


/* 4. Navigation
   The menu HTML is the same on every page. On desktop it's a bar turned on
   its side along the left edge. On tablets and phones it becomes a
   hamburger button that opens a full-screen teal circle.
   The current page's link has id="clicked".
   ========================================================================== */
.sidebar ul li {
    font-size: 25px;
    letter-spacing: .1em;
}

/* Desktop: sideways bar */
@media only screen and (min-width: 1051px) {
    .sidebar .toggler,
    .sidebar .menu-small,
    .sidebar .menu-burst {
        display: none;
    }

    /* The bar is turned on its side, so inside it "left to right" runs
       from the bottom of the screen to the top. */
    .sidebar {
        width: 100vh;
        height: var(--sidebar-width);   /* the bar is on its side, so its height is the width on screen */
        position: fixed;
        background: transparent;
        transform-origin: left top;
        transform: rotate(-90deg) translateX(-100%);
        border-bottom: 2px solid black;   /* the vertical line on screen */
        overflow: hidden;
        z-index: 3;       /* above the floating shapes */
    }

    .sidebar .menu,
    .sidebar .menu > div,
    .sidebar .menu > div > div {
        height: 100%;
    }

    /* Links run from the top of the screen down. Spacing is based on the
       screen height (vh), so short windows never run out of room. */
    .sidebar ul {
        height: 100%;
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        --menu-gap: clamp(18px, 5.6vh, 50px);    /* space between links */
        --burst-gap: calc(var(--menu-gap) * 0.6); /* space above and below the burst */
        gap: var(--menu-gap);
        padding-right: var(--burst-gap);         /* space above the burst: matches the space
                                                    below it, so it's centered above the divider */
    }

    /* A little extra room under the burst, so the divider has the same
       space above it (to the burst) and below it (to "Design") */
    .sidebar ul:not(.menu-small) > li:first-child {
        margin-left: calc(var(--burst-gap) * 2 - var(--menu-gap) - 3px);  /* 3px makes up for the letter spacing after "Design" */
    }

    .sidebar ul li {
        position: relative;
        display: flex;
        align-items: center;
        font-size: min(25px, 3.4vh);             /* shrinks a little on short windows */
    }

    /* Each link can show a soft rounded box behind it, the same shape as the
       category tags on the project cards. Grey behind the current page;
       a light teal fades in on hover. Negative margins stop the box from
       shifting the spacing between links. */
    .sidebar ul li a {
        padding: 5px 12px;
        margin: 0 -12px;
        border-radius: 18px;   /* same roundness as the tags, scaled to this box's size */
        transition: color var(--hover-speed) var(--hover-ease),
            background-color var(--hover-speed) var(--hover-ease);
    }

    .sidebar ul li a:hover {
        color: var(--accent-text);
        background-color: var(--button-hover);
    }

    /* The grey "you are here" box is its own small element (.nav-marker)
       behind the current link's text, so that when you move to another
       page it can glide over to the new link (see "Page transitions"). */
    .sidebar ul li a {
        position: relative;
        z-index: 0;
    }

    .sidebar .nav-marker {
        display: none;
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: inherit;
        background-color: rgba(0, 0, 0, 0.06);   /* same grey as the tags */
        transition: background-color var(--hover-speed) var(--hover-ease);
    }

    .sidebar ul li a#clicked {
        color: var(--text-color);
    }

    .sidebar ul li a#clicked .nav-marker {
        display: block;
        view-transition-name: nav-marker;
    }

    /* Hovering the current page tints its box teal instead */
    .sidebar ul li a#clicked:hover {
        background-color: transparent;
    }

    .sidebar ul li a#clicked:hover .nav-marker {
        background-color: var(--button-hover);
    }

    /* "Home" is the burst shape instead of a word on desktop (the word stays
       in the phone menu). The outline comes from img/shapes/burst-silhouette.svg.
       It turns a little on hover. */
    .sidebar .home-label {
        display: none;
    }

    .sidebar .home-link {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 5px;          /* square box around the shape */
        margin: 0 -5px;
        border-radius: 50%;    /* a full circle */
    }

    /* The burst silhouette is drawn right in each page's menu (so it can
       change color): black, turning dark teal on hover like the words */
    .sidebar .home-shape {
        display: block;
        width: 44px;    /* size of the shape */
        height: 44px;
        fill: var(--text-color);
        animation: menu-burst-spin 24s linear infinite;   /* always turning slowly */
        transition: rotate var(--hover-speed) var(--hover-ease),
            fill var(--hover-speed) var(--hover-ease);
    }

    /* On hover it gets an extra quarter-ish turn on top of the slow spin */
    .sidebar .home-link:hover .home-shape {
        rotate: 45deg;
        fill: var(--accent-text);
    }

    /* The burst doesn't get the grey "you are here" box, only the hover */
    .sidebar ul li a.home-link#clicked:hover {
        background-color: var(--button-hover);
    }

    /* Dividing line between the burst and the rest of the menu. It runs
       across the sidebar from the screen edge to the menu line. */
    .sidebar ul:not(.menu-small) > li:first-child::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(var(--burst-gap) * -1 - 1px);
        width: 2px;
        background: black;
    }

    /* Email and Instagram icons at the bottom of the sidebar (email on top) */
    .side-links {
        position: fixed;
        left: 0;
        bottom: 22px;
        width: var(--sidebar-width);
        z-index: 3;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 16px;
    }

    .side-link {
        display: block;
        width: 24px;
        height: 24px;
        color: var(--text-color);
        transition: color var(--hover-speed) var(--hover-ease);
    }

    .side-link:hover {
        color: var(--accent-text);
    }

    .side-link svg {
        display: block;
        width: 100%;
        height: 100%;
        fill: none;
        stroke: currentColor;
        stroke-width: 1.8;
        stroke-linejoin: round;
        stroke-linecap: round;
    }

    .side-link svg .dot {
        fill: currentColor;
    }
}

/* Tablet and phone: the email and Instagram links are in the menu instead */
@media only screen and (max-width: 1050px) {
    .side-links {
        display: none;
    }
}

/* Tablet and phone: hamburger menu */
@media only screen and (max-width: 1050px) {
    #clicked {
        color: var(--menu-text);
    }

    .sidebar ul li {
        padding: 0;
    }

    .sidebar {
        width: 0px;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1;
    }

    /* Invisible checkbox on top of the hamburger icon. Checking it opens the menu.
       Same size and spot as the icon (top-right corner), so the whole icon is tappable. */
    .sidebar .toggler {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 2;
        cursor: pointer;
        width: 60px;
        height: 60px;
        opacity: 0;
    }

    .sidebar .hamburger {
        position: fixed;
        top: 0;
        right: 0;
        z-index: 1;
        width: 60px;
        height: 60px;
        padding: 1rem;
        background-color: transparent;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Middle line of the icon */
    .sidebar .hamburger > div {
        position: relative;
        width: 100%;
        height: 2px;
        background-color: rgb(0, 0, 0);
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.4s ease;
    }

    /* Top and bottom lines */
    .sidebar .hamburger > div::before,
    .sidebar .hamburger > div::after {
        content: '';
        position: absolute;
        z-index: 1;
        top: -10px;
        width: 100%;
        height: 2px;
        background: inherit;
    }

    .sidebar .hamburger > div::after {
        top: 10px;
    }

    /* Menu open: lines turn into an X, in the same color as the menu links */
    .sidebar .toggler:checked + .hamburger > div {
        transform: rotate(135deg);
        background-color: var(--menu-text);
    }

    .sidebar .toggler:checked + .hamburger > div::before,
    .sidebar .toggler:checked + .hamburger > div::after {
        top: 0;
        transform: rotate(90deg);
    }

    .sidebar .toggler:checked:hover + .hamburger > div {
        transform: rotate(225deg);
    }

    /* Menu open: show the teal circle and fade in the links */
    .sidebar .toggler:checked ~ .menu {
        visibility: visible;
    }

    .sidebar .toggler:checked ~ .menu > div {
        transform: scale(1);
        transition-duration: var(--menu-speed);
    }

    .sidebar .toggler:checked ~ .menu > div > div {
        opacity: 1;
    }

    /* Full-screen menu layer (hidden until opened) */
    .sidebar .menu {
        position: fixed;
        top: 0%;
        left: 0%;
        width: 100%;
        height: 100%;
        visibility: hidden;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    /* The teal circle that grows to fill the screen */
    .sidebar .menu > div {
        background-color: var(--accent-color);
        border-radius: 50%;
        width: 250vw;
        height: 250vw;
        display: flex;
        flex: none;
        align-items: center;
        justify-content: center;
        transform: scale(0);
        transition: all 0.4s ease;
    }

    /* The links, placed in the top-left of the screen, big and left-aligned.
       They live inside the growing circle, so their position is worked out
       from the circle's size: the circle's top-left corner is 75vw to the
       left of the screen and (125vw - 50% of the screen height) above it.
       The last number in each line (24px, 110px) is the actual spacing from
       the screen's left edge and top. */
    .sidebar .menu > div > div {
        position: absolute;
        left: calc(75vw + 24px);
        top: calc(125vw - 50vh + 110px);
        top: calc(125vw - 50dvh + 110px);
        text-align: left;
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    /* Fade the links in once the circle has mostly grown */
    .sidebar .toggler:checked ~ .menu > div > div {
        transition-delay: 0.25s;
    }

    .sidebar .menu > div > div > ul > li {
        list-style: none;
        color: var(--menu-text);
        font-size: clamp(44px, 13vw, 72px);   /* grows with the screen, between 44 and 72px */
        font-weight: 700;
        line-height: 1.05;
        letter-spacing: normal;
        padding: 0;
    }

    /* "Home" shows as a word in the phone menu (the shape is desktop only) */
    .sidebar .home-shape {
        display: none;
    }

    /* Burst mark in the top-left corner of the open menu, across from the X.
       Like the links, it's placed from the growing circle's corner (see the
       note on the links above); 24px and 18px are the real spacing from the
       screen's left and top edges. */
    .sidebar .menu > div > .menu-burst {
        display: block;
        position: absolute;
        left: calc(75vw + 24px);
        top: calc(125vw - 50vh + 18px);
        top: calc(125vw - 50dvh + 18px);
        width: 40px;
        height: 40px;
        fill: var(--menu-text);
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .sidebar .toggler:checked ~ .menu > div > .menu-burst {
        opacity: 1;
        transition-delay: 0.25s;
        animation: menu-burst-spin 24s linear infinite;
    }

    /* Smaller links (Email, Instagram) under the main ones */
    .sidebar .menu > div > div > ul.menu-small {
        margin-top: 36px;
    }

    .sidebar .menu > div > div > ul.menu-small > li {
        font-size: 22px;
        font-weight: 400;
        line-height: 1.5;
    }

    .sidebar .menu > div > div > ul > li > a {
        color: inherit;
        transition: color 0.4s ease;
    }
}


/* 5. Page layout
   ========================================================================== */
.wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    min-height: 100vh;
}

.wrapper .main-content {
    width: 100%;
    height: auto;
    text-align: center;
    padding-top: 2em;
    margin-left: var(--sidebar-width);   /* leaves room for the sideways nav bar */
    margin-right: 0;
}

footer {
    text-align: center;
    width: 100%;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    margin: auto;
    border-top: 2px solid black;
}

/* On desktop the footer starts at the sidebar, so its top line meets the
   sidebar line instead of running through the menu */
@media only screen and (min-width: 1051px) {
    footer {
        width: auto;
        margin-left: var(--sidebar-width);
    }
}

footer .bottom {
    margin: auto;
    margin-bottom: 10px;
    margin-top: 10px;
}

footer p {
    font-size: 1.2vw;
}


/* 6. Home page
   ========================================================================== */

/* Name and tagline, fills the first screen with the text a little above
   center. The 4em at the bottom balances the 2em gap above the block; the
   5vh lifts the text higher (bigger number = higher). */
.wrapper .block1 {
    border-bottom: 2px solid black;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-bottom: calc(4em + 5vh);
}

.wrapper .main-content .header {
    margin: 0 5% 0 5%;
    user-select: none;
}

/* Line spacing for the name (the font's default is about 1.25; lower = tighter).
   The bottom padding keeps the gap above "Based in New York City" the same
   as before, so only the space between the name's lines changes. */
.wrapper .main-content .header h1 {
    line-height: 1.1;
    padding-bottom: 0.15em;
}

/* Wraps the About page content */
.wrapper .block2 {
    display: flex;
    flex-wrap: wrap;
    align-items: start;
}

/* Image that fills its box (About portrait, photos) */
.wrapper .cover {
    width: 100%;
    height: auto;
    margin-right: auto;
    margin-left: auto;
    display: block;
    object-fit: cover;
}

@media only screen and (max-width: 1050px) {
    h1 { font-size: 16vw; }
    h2 { font-size: 5vw; }
    h3 { font-size: 8vw; }

    footer p {
        font-size: 2.3vw;
    }

    .wrapper .main-content {
        margin: 0%;
    }

    .wrapper .main-content .header {
        margin: 0 6% 0 6%;
    }

    .wrapper .main-content .info {
        position: relative;
        cursor: default;
        margin-right: 5%;
        margin-left: 5%;
        padding: 0%;
    }

    .wrapper .block1,
    .wrapper .block2 {
        height: auto;
        padding-bottom: 5vw;
        padding-top: 5vw;
    }
}

@media only screen and (max-width: 800px) {
    h2 { font-size: 10vw; }
}

@media only screen and (max-width: 550px) {
    h1 { font-size: 20.3vw; }

    .wrapper .main-content {
        width: 100%;
        margin: 0;
        padding-top: 60px;   /* room for the hamburger button */
    }

    .wrapper .block1 {
        padding-bottom: 10vw;
    }

    .wrapper .container2 {
        width: 70vw;
        margin: 0%;
        height: auto;
        transition: .5s ease;
    }

    .wrapper .container2:hover {
        transform: scale(1.05);
    }
}

@media only screen and (max-width: 380px) {
    h1 { font-size: 16vw; }
}


/* 7. About page
   ========================================================================== */

/* Bio text */
.wrapper .bio1 {
    font-size: 1.5vw;
    margin: 0%;
    padding: 1vw 0 1vw 0;
    text-align: left;
    width: 100%;
}

/* Section headings ("About Me", "What I Do", ...) */
.heading2 {
    font-weight: 600;
    font-size: 1.5vw;
    margin: 0%;
    padding: 1.3vw 0 0vw 0;
    text-align: left;
    width: 100%;
}

/* Column that holds the bio */
.wrapper .container2 {
    width: 40vw;
    margin: auto;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    margin-top: 2.5vw;
    margin-bottom: 2.5vw;
}

/* Oval portrait */
.wrapper .containerAbout {
    width: 40vw;
    height: 48vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: left;
    align-items: center;
    position: relative;
    border: 2px solid black;
}


/* 8. Photography page
   ========================================================================== */
.wrapper .container4 {
    width: 30vw;
    height: auto;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-align: center;
    position: relative;
    transition: .5s ease;
    padding-top: 1em;
    padding-bottom: 1em;
}

.wrapper .container4:hover {
    transform: scale(1.05);
}


/* 9. Design page
   ========================================================================== */

/* Grid that holds the project cards (Home and Design pages; also the Photography page grid) */
.wrapper .block3 {
    width: 100%;
    height: auto;
    padding-bottom: 5em;
    padding-top: 1em;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    position: relative;
}

/* One card: image on the left, text on the right.
   The whole card is one link to the project page. */
.project-card {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
    width: 46vw;
    margin: 20px auto;
    border: 2px solid black;
    overflow: hidden;
    background-color: var(--card-background);
    transition: transform var(--hover-speed) var(--hover-ease), border-color var(--hover-speed) var(--hover-ease),
        box-shadow var(--hover-speed) var(--hover-ease);
}

/* Hover (and keyboard focus): the card lifts a little, its border turns
   teal, and the image zooms and darkens slightly */
.project-card:hover,
.project-card:focus-visible {
    transform: translateY(-4px);
    border-color: var(--accent-color);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    outline: none;
}

.project-image {
    width: 50%;
    overflow: hidden;
}

/* The image fills its half of the card from top to bottom. When the text
   side is taller than the image, the image is trimmed slightly at the
   sides (object-fit: cover) instead of leaving a gap at the bottom. */
.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--hover-speed) var(--hover-ease), filter var(--hover-speed) var(--hover-ease);
}

.project-card:hover .project-image img,
.project-card:focus-visible .project-image img {
    transform: scale(1.02);
    filter: brightness(0.9);
}

.project-info {
    width: 50%;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.project-info h2 {
    font-size: 1.5em;
    margin-bottom: 8px;   /* tags sit close to the title */
    color: #333;
    transition: color var(--hover-speed) var(--hover-ease);
}

/* Title turns teal along with the border */
.project-card:hover .project-info h2,
.project-card:focus-visible .project-info h2 {
    color: var(--accent-text);
}

.project-info p {
    font-size: 1em;
    margin-bottom: 15px;
    color: #666;
}

/* Category tags (Brand, Print, ...): small grey boxes under the title */
.project-info .tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;   /* more room before the description */
}

.project-info .tags li {
    font-size: 0.85em;
    color: #555;
    background-color: rgba(0, 0, 0, 0.06);   /* soft grey that works on any part of the gradient */
    padding: 3px 10px;
    border-radius: 10px;
}

/* "Read More" label: a hint that the card leads somewhere (especially on
   phones, where there's no hover). The whole card is the link, so the label
   fills teal whenever the card is hovered. */
.read-more-btn {
    border: 2px solid black;
    text-align: center;
    padding: 10px 15px;
    font-size: 1em;
    width: fit-content;
    transition: background-color var(--hover-speed) var(--hover-ease), border-color var(--hover-speed) var(--hover-ease),
        color var(--hover-speed) var(--hover-ease);
}

.project-card:hover .read-more-btn,
.project-card:focus-visible .read-more-btn {
    background-color: var(--button-hover);
    border-color: var(--accent-color);
    color: var(--accent-text);
}


/* 10. Project pages
   Every project page follows the same pattern:
   .project-top           title and details on the left, summary on the right
   .project-image-section one or more images
   .project-text          a heading and a few paragraphs
   ...repeat images and text as needed...
   .textReturn            "View Other Work" button back to the Design page
   ========================================================================== */
.project-top {
    display: flex;
    justify-content: space-between;
    padding: 2em 5%;
    margin-bottom: 2em;
    text-align: left;
}

.project-left {
    width: 40%;
    text-align: left;
}

.project-left h1 {
    font-size: 3.2em;
    font-weight: bold;
}

.project-left p {
    margin: 0.2em 0;
    font-size: 1.1em;
    line-height: 1.6em;
}

.project-right {
    width: 55%;
}

.project-right p {
    font-size: 1.1em;
    line-height: 1.6em;
    margin: 0.5em 0;
}

.project-image-section {
    padding: 0 5%;
    margin: 2em 0;
}

.project-image-section img {
    max-width: 100%;
    border: 2px solid black;
}

.project-text {
    padding: 0 5%;
    margin-bottom: 2.5em;
    margin-top: 2.5em;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    text-align: left;
}

.project-text h3 {
    font-size: 2.5em;
    text-align: center;
}

.project-text p {
    font-size: 1.25em;
    line-height: 1.6em;
    margin: 1em 0;
}

/* "View Other Work" button */
.textReturn {
    border: 2px solid black;
    text-align: center;
    padding: 10px 25px;
    text-decoration: none;
    font-size: 1.2em;
    width: fit-content;
    display: inline-block;
    color: black;
    margin: 30px auto;
    margin-top: 0%;
    transition: 0.3s ease;
}

.textReturn:hover {
    background-color: var(--button-hover);
    border-color: var(--accent-color);
    color: var(--accent-text);
}


/* Sections 7 to 10 on smaller screens
   ========================================================================== */
@media only screen and (max-width: 1350px) {
    .project-card {
        width: 78vw;
    }

    .project-text {
        width: auto;
    }
}

@media only screen and (max-width: 1050px) {
    .wrapper .bio1 {
        font-size: 2.5vw;
        margin: 0%;
    }

    .heading2 {
        font-size: 2.5vw;
        margin: 0%;
    }

    .wrapper .container2 {
        width: 80vw;
    }

    .wrapper .containerAbout {
        width: 70vw;
        height: 70vw;
        margin-top: 0;
        margin-bottom: 1vw;
    }

    .wrapper .container4 {
        width: 80vw;
    }

    .project-top {
        flex-direction: column;
        align-items: flex-start;
        padding: 0em 11%;
    }

    .project-left {
        width: 100%;
        margin-bottom: 1em;
    }

    .project-right {
        width: 100%;
        font-size: 1.1em;
        margin-bottom: 1em;
    }

    .project-image-section {
        padding: 0 11%;
    }

    .project-text {
        padding: 0 11%;
        width: 100%;
    }
}

@media only screen and (max-width: 800px) {
    .wrapper .bio1 {
        font-size: 3.5vw;
    }

    .wrapper .heading2 {
        font-size: 3.5vw;
    }

    .textReturn {
        width: auto;
    }

    /* Design page cards stack: image on top, text below */
    .project-card {
        flex-direction: column;
    }

    .project-image,
    .project-info {
        width: 100%;
    }

    .project-info {
        padding: 15px;
    }

    .read-more-btn {
        width: auto;
    }
}


/* 11. Floating shapes (home page)
   Four shapes from img/shapes/ drift around and fade in and out.
   js/shapes.js adds on top of that: they fade away as you scroll down to
   the projects, gently grow and shrink, and drift around the mouse.
   ========================================================================== */
/* On desktop the shapes can be clicked (spin) and grabbed (throw); see
   js/shape-play.js. Once scrolled away they stop catching clicks. */
/* Shapes turned off with the eye button: fade the whole layer away */
.shapes.off {
    filter: opacity(0);
    pointer-events: none;
}

.shapes.off img {
    pointer-events: none !important;
}

.shapes.playable img {
    pointer-events: auto;
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

.shapes.playable img.grabbed {
    cursor: grabbing;
}

.shapes.playable.faded img {
    pointer-events: none;
}

.shapes {
    transition: opacity 0.2s linear, filter 0.6s ease;   /* scroll fade, and the eye button's fade */
    position: fixed;
    z-index: 1;       /* above the intro text, below the menu and the glass pill */
    pointer-events: none;
    width: 100%;
    height: 100vh;
    overflow: hidden;
}

#shape-burst,
#shape-flower,
#shape-star,
#shape-sparkle {
    position: absolute;
    opacity: 85%;
}

#shape-burst {
    left: 10%;
    top: 60%;
    animation: drift-burst 40s infinite;
}

#shape-flower {
    left: 80%;
    top: 1%;
    animation: drift-flower 40s infinite;
}

#shape-star {
    left: 8%;
    top: 1%;
    animation: drift-star 40s infinite;
}

#shape-sparkle {
    left: 65%;
    top: 70%;
    animation: drift-sparkle 40s infinite;
}

/* The shapes fade in at a new spot, pause there, fade out while moving on,
   then fade in at the next spot. Each "layout" below is one of those spots
   for every shape (8 layouts in all, one every 5 seconds, 40 seconds
   per full loop). To add a layout, add a line to each shape and space the
   percentages evenly; the lines in between with only an opacity are the
   moments they're faded out. scale sets each shape's size in that layout
   (1 = normal, 1.2 = 20% bigger); sizes change smoothly while faded out. */

@keyframes drift-burst {
    0%      { opacity: 0; }
    6.25%   { opacity: 1; left: 30%; top: 50%; scale: 1; }   /* layout 1 */
    12.5%   { opacity: 0; }
    18.75%  { opacity: 1; left: 78%; top: 12%; scale: 1.2; }   /* layout 2 */
    25%     { opacity: 0; }
    31.25%  { opacity: 1; left: 90%; top: 80%; scale: 0.85; }   /* layout 3 */
    37.5%   { opacity: 0; }
    43.75%  { opacity: 1; left: 20%; top: 15%; scale: 1.1; }   /* layout 4 */
    50%     { opacity: 0; }
    56.25%  { opacity: 1; left: 50%; top: 82%; scale: 0.9; }   /* layout 5 */
    62.5%   { opacity: 0; }
    68.75%  { opacity: 1; left: 8%; top: 75%; scale: 1.25; }   /* layout 6 */
    75%     { opacity: 0; }
    81.25%  { opacity: 1; left: 85%; top: 30%; scale: 0.8; }   /* layout 7 */
    87.5%   { opacity: 0; }
    93.75%  { opacity: 1; left: 35%; top: 5%; scale: 1.05; }   /* layout 8 */
    100%    { opacity: 0; }
}


@keyframes drift-flower {
    0%      { opacity: 0; }
    6.25%   { opacity: 1; left: 15%; top: 85%; scale: 1; }   /* layout 1 */
    12.5%   { opacity: 0; }
    18.75%  { opacity: 1; left: 8%; top: 40%; scale: 0.85; }   /* layout 2 */
    25%     { opacity: 0; }
    31.25%  { opacity: 1; left: 86%; top: 57%; scale: 1.2; }   /* layout 3 */
    37.5%   { opacity: 0; }
    43.75%  { opacity: 1; left: 60%; top: 30%; scale: 0.9; }   /* layout 4 */
    50%     { opacity: 0; }
    56.25%  { opacity: 1; left: 70%; top: 5%; scale: 1.15; }   /* layout 5 */
    62.5%   { opacity: 0; }
    68.75%  { opacity: 1; left: 40%; top: 60%; scale: 0.8; }   /* layout 6 */
    75%     { opacity: 0; }
    81.25%  { opacity: 1; left: 25%; top: 8%; scale: 1.1; }   /* layout 7 */
    87.5%   { opacity: 0; }
    93.75%  { opacity: 1; left: 90%; top: 75%; scale: 0.95; }   /* layout 8 */
    100%    { opacity: 0; }
}


@keyframes drift-star {
    0%      { opacity: 0; }
    6.25%   { opacity: 1; left: 70%; top: 68%; scale: 1; }   /* layout 1 */
    12.5%   { opacity: 0; }
    18.75%  { opacity: 1; left: 45%; top: 78%; scale: 1.15; }   /* layout 2 */
    25%     { opacity: 0; }
    31.25%  { opacity: 1; left: 30%; top: 23%; scale: 0.8; }   /* layout 3 */
    37.5%   { opacity: 0; }
    43.75%  { opacity: 1; left: 10%; top: 70%; scale: 1.2; }   /* layout 4 */
    50%     { opacity: 0; }
    56.25%  { opacity: 1; left: 85%; top: 40%; scale: 0.9; }   /* layout 5 */
    62.5%   { opacity: 0; }
    68.75%  { opacity: 1; left: 62%; top: 8%; scale: 1.05; }   /* layout 6 */
    75%     { opacity: 0; }
    81.25%  { opacity: 1; left: 55%; top: 55%; scale: 0.85; }   /* layout 7 */
    87.5%   { opacity: 0; }
    93.75%  { opacity: 1; left: 15%; top: 35%; scale: 1.25; }   /* layout 8 */
    100%    { opacity: 0; }
}


@keyframes drift-sparkle {
    0%      { opacity: 0; }
    6.25%   { opacity: 1; left: 30%; top: 25%; scale: 1; }   /* layout 1 */
    12.5%   { opacity: 0; }
    18.75%  { opacity: 1; left: 88%; top: 60%; scale: 0.9; }   /* layout 2 */
    25%     { opacity: 0; }
    31.25%  { opacity: 1; left: 55%; top: 79%; scale: 1.25; }   /* layout 3 */
    37.5%   { opacity: 0; }
    43.75%  { opacity: 1; left: 80%; top: 82%; scale: 0.8; }   /* layout 4 */
    50%     { opacity: 0; }
    56.25%  { opacity: 1; left: 12%; top: 55%; scale: 1.1; }   /* layout 5 */
    62.5%   { opacity: 0; }
    68.75%  { opacity: 1; left: 20%; top: 10%; scale: 0.95; }   /* layout 6 */
    75%     { opacity: 0; }
    81.25%  { opacity: 1; left: 40%; top: 82%; scale: 1.2; }   /* layout 7 */
    87.5%   { opacity: 0; }
    93.75%  { opacity: 1; left: 75%; top: 45%; scale: 0.85; }   /* layout 8 */
    100%    { opacity: 0; }
}


/* 11b. Section indicator (home page, desktop only)
   Two lines on the right edge: top = intro, bottom = projects. The line for
   the section you're in is black; js/section-nav.js makes the black flow
   from one to the other as you scroll, and jumps to a section on click.
   ========================================================================== */

/* Make room on the right of the home page for the lines. Only the project
   grid is narrowed (evenly on both sides), so the dividing line under the
   name still runs all the way across. */
@media only screen and (min-width: 1051px) {
    /* Project card grid (Home and Design pages). The same space
       (--grid-gap) sits between the sidebar line and the cards, between
       the two columns, and at the right edge. Widths are shares of the
       grid (%), so a visible scrollbar can't push the second column onto
       a new row. */
    .wrapper .block3:has(> .project-card) {
        --grid-gap: 30px;
        justify-content: flex-start;
        column-gap: var(--grid-gap);
        padding-left: var(--grid-gap);
        padding-right: var(--grid-gap);
    }

    /* Home page: 30px more on the right, where the scroll lines are */
    .home .wrapper .block3:has(> .project-card) {
        padding-right: calc(30px + var(--grid-gap));
    }

    .block3 > .project-card {
        width: 100%;               /* one column: the full width of the grid */
        margin-left: 0;
        margin-right: 0;
    }
}

/* Two columns: each card is half the grid, minus half the gap */
@media only screen and (min-width: 1351px) {
    .block3 > .project-card {
        width: calc((100% - var(--grid-gap)) / 2);
    }
}

.section-nav {
    position: fixed;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 14px;          /* space between the two lines */
    z-index: 60;
}

/* Each line sits in a wider invisible button, so it's easy to click */
.section-nav button {
    display: block;
    width: 24px;
    height: 110px;      /* length of each line */
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.section-nav .line {
    position: relative;
    display: block;
    width: 3px;         /* thickness of the lines */
    height: 100%;
    margin: 0 auto;
    background: rgba(0, 0, 0, 0.18);   /* the grey "inactive" line */
    transition: background-color 0.3s ease, width 0.3s ease;
}

/* The black part, shown or hidden by js/section-nav.js */
.section-nav .fill {
    position: absolute;
    inset: 0;
    background: black;
}

.section-nav button:hover .line {
    background: rgba(0, 0, 0, 0.4);
    width: 5px;
}

@media only screen and (max-width: 1050px) {
    .section-nav {
        display: none;
    }
}


/* Shape speed slider (home page, see js/speed-control.js) */
.wrapper .block1 {
    position: relative;
}

/* A frosted glass pill in the bottom-left corner of the intro, desktop only.
   Hidden until the mouse moves; see the three states below. */
.speed-control {
    position: absolute;
    z-index: 5;       /* above the floating shapes */
    left: 30px;       /* same spacing as the cards' gap from the sidebar line */
    bottom: calc(2em + 30px);   /* 30px above the bottom of the screen */
    transform: translateY(6px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.35);
    -webkit-backdrop-filter: blur(12px) saturate(1.4);
    backdrop-filter: blur(12px) saturate(1.4);
    border: 1px solid rgba(0, 0, 0, 0.08);   /* faint edge, like the tag grey */
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    font-size: 14px;
    color: #555;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--hover-ease), transform 0.25s var(--hover-ease);   /* fading out */
}

/* Three states, set by js/speed-control.js:
   hidden (default) -> faint while the mouse is moving -> full when the
   mouse is near it or it was just used */
.speed-control.dim {
    opacity: 0.35;   /* how faint it is while the mouse moves elsewhere */
    transform: translateY(0);
    pointer-events: auto;
    transition-duration: 0.4s;   /* fading in */
}

/* Keyboard users (tabbing to the slider) also get the full state. Clicking
   it with the mouse doesn't count, so it can still fade away afterwards. */
.speed-control.active,
.speed-control:has(:focus-visible) {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition-duration: 0.4s;
}

.speed-slider {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

/* Thin line between the slider and the shuffle button */
.pill-divider {
    width: 1px;
    height: 18px;
    background: rgba(0, 0, 0, 0.15);
}

/* Show/hide button for the shapes (eye icon), and the shuffle button */
.shapes-toggle,
.shuffle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin: -4px -6px -4px 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-color);
    cursor: pointer;
    transition: color var(--hover-speed) var(--hover-ease), background-color var(--hover-speed) var(--hover-ease);
}

.shapes-toggle:hover,
.shuffle-btn:hover {
    color: var(--accent-text);
    background-color: var(--button-hover);
}

.shapes-toggle {
    margin: -4px 0 -4px -6px;
}

/* Eye open while the shapes show, crossed out while they're hidden */
.shapes-toggle .eye-closed,
.shapes-toggle[aria-pressed="false"] .eye-open {
    display: none;
}

.shapes-toggle[aria-pressed="false"] .eye-closed {
    display: block;
}

/* While the shapes are hidden, the speed and shuffle controls rest */
.speed-control.shapes-off .speed-slider,
.speed-control.shapes-off .shuffle-btn {
    opacity: 0.35;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.shapes-toggle svg,
.shuffle-btn svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.shapes-toggle:focus-visible,
.shuffle-btn:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 2px;
}

.speed-control input {
    -webkit-appearance: none;
    appearance: none;
    width: 130px;
    height: 20px;
    background: transparent;
    cursor: pointer;
}

/* The track: a thin black line */
.speed-control input::-webkit-slider-runnable-track {
    height: 2px;
    background: var(--text-color);
}

.speed-control input::-moz-range-track {
    height: 2px;
    background: var(--text-color);
}

/* The handle: a small black circle that turns teal on hover */
.speed-control input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 14px;
    height: 14px;
    margin-top: -6px;
    border-radius: 50%;
    background: var(--text-color);
    transition: background-color var(--hover-speed) var(--hover-ease);
}

.speed-control input::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border: 0;
    border-radius: 50%;
    background: var(--text-color);
}

.speed-control:hover input::-webkit-slider-thumb {
    background: var(--accent-text);
}

.speed-control:hover input::-moz-range-thumb {
    background: var(--accent-text);
}

.speed-control input:focus-visible {
    outline: 2px solid var(--accent-text);
    outline-offset: 4px;
}

/* Desktop only: hidden on tablets, phones and touch screens */
@media only screen and (max-width: 1050px), (hover: none) {
    .speed-control {
        display: none;
    }
}


/* Slow spin used by the burst in the desktop sidebar and the phone menu */
@keyframes menu-burst-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    .sidebar .home-shape,
    .sidebar .menu-burst {
        animation: none !important;
    }
}


/* 11c. Page transitions
   When you click to another page, the old page fades into the new one, and
   the grey "you are here" box in the menu glides to the new page's link.
   Works in Chrome, Edge and Safari; other browsers simply switch pages as
   before. Only works when the site is served (like on GitHub Pages), not
   when a page is opened straight from a folder.
   ========================================================================== */
@view-transition {
    navigation: auto;
}

/* The page fade */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.25s;
}

/* The menu box glide */
::view-transition-group(nav-marker) {
    animation-duration: 0.4s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    @view-transition {
        navigation: none;
    }
}


/* 12. Archived pages
   The older project pages in /archive use an earlier layout. Everything here
   is scoped to <body class="legacy"> so it can't affect the current pages.
   ========================================================================== */
.legacy h3 {
    font-weight: 800;
}

.legacy .caption p {
    font-size: 1.5vw;
}

.legacy .block4 {
    width: 100%;
    height: auto;
    padding-top: 3vw;
    overflow: hidden;
    background-color: transparent;
    display: flex;
    flex-wrap: wrap;
    justify-content: left;
    align-items: start;
    position: relative;
}

/* Half-width image */
.legacy .container5 {
    width: 45vw;
    height: auto;
    margin-left: 4vh;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden;
}

/* Full-width image */
.legacy .container6 {
    width: 92vw;
    height: auto;
    margin: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    overflow: hidden;
}

.legacy .textContainer {
    width: 45vw;
    height: auto;
    margin-left: 4vh;
    margin-right: auto;
    margin-top: 1em;
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: start;
    overflow: hidden;
    position: relative;
}

.legacy .explain {
    font-size: 1.5vw;
    width: 45vw;
    text-align: left;
    margin: auto;
    padding-bottom: 1vw;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    text-indent: 5vw;
}

/* Round "View Other Work" button */
.legacy .textReturn {
    width: 36vw;
    height: 36vw;
    padding: 0;
    font-size: inherit;
    border-radius: 50%;
    margin: auto;
    margin-bottom: 4vw;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    border: solid black 2px;
    transition: .5s ease;
}

.legacy .textReturn p {
    width: 30vw;
    margin-top: auto;
    margin-bottom: auto;
}

.legacy .textReturn:hover {
    background-color: transparent;
    border-color: var(--accent-color);
    transform: scale(1.05);
}

@media only screen and (max-width: 1100px) {
    .legacy .caption p {
        font-size: 2.5vw;
    }
}

@media only screen and (max-width: 800px) {
    .legacy .caption p {
        font-size: 3.5vw;
    }

    .legacy .container5,
    .legacy .textContainer {
        width: 80vw;
        height: auto;
        margin-left: auto;
    }

    .legacy .container6 {
        width: 80vw;
    }

    .legacy .explain {
        font-size: 3.5vw;
        width: 80vw;
        height: auto;
    }

    .legacy .textReturn {
        width: 50vw;
        height: 50vw;
    }

    .legacy .textReturn p {
        width: 10vw;
    }
}