/* ======================================
   GENERAL
====================================== */

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


html {
    scroll-behavior: smooth;
}


body {
    min-height: 100vh;

    background-color: #f6f0ec;
    color: #938b8b;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    overflow-x: hidden;
}


/* ======================================
   HEADER
====================================== */

.site-header {
    width: 100%;

    display: flex;

    justify-content: space-between;
    align-items: center;

    padding:
        45px 55px;

    background-color:
        #f6f0ec;

    position: relative;

    z-index: 10;
}


.logo {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 34px;

    font-weight: 400;

    color: #706a69;

    text-decoration: none;
}


.nav-links {
    display: flex;

    align-items: center;

    gap: 28px;
}


/* ======================================
   MAGNETIC ZONES
====================================== */

.mag-zone {
    display: inline-flex;

    padding: 16px;

    margin: -16px;

    perspective: 700px;
}


.portfolio-zone {
    grid-area: button;

    justify-self: start;
}


.contact-zone {
    margin-left: -16px;
}


/* ======================================
   NAVIGATION
====================================== */

.nav-links a {
    position: relative;

    text-decoration: none;

    color: #918989;

    font-size: 18px;

    padding-bottom: 9px;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.nav-links a:hover {
    color: #111111;
}


.nav-links a.active {
    color: #111111;
}


.nav-links a.active::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 2px;

    background:
        #111111;

    z-index: 4;
}


/* ======================================
   MAGNETIC LINKS
====================================== */

.magnetic-link {
    --mouse-x: 50%;
    --mouse-y: 50%;

    position: relative;

    z-index: 1;

    transform-style:
        preserve-3d;

    will-change:
        transform;

    transition:
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.magnetic-link span {
    position: relative;

    z-index: 3;

    display: inline-block;

    transform:
        translateZ(18px);

    pointer-events: none;
}


/* ======================================
   METALLIC HOVER
====================================== */

.magnetic-link::before {
    content: "";

    position: absolute;

    inset:
        -8px -12px;

    border-radius: 999px;

    opacity: 0;

    pointer-events: none;

    z-index: -1;

    background:

        radial-gradient(
            circle at
            var(--mouse-x)
            var(--mouse-y),

            rgba(255, 255, 255, 1) 0%,
            rgba(245, 245, 245, 0.98) 10%,
            rgba(180, 180, 185, 0.88) 24%,
            transparent 46%
        ),

        linear-gradient(
            115deg,

            #626468 0%,
            #e6e7e9 14%,
            #7e8085 28%,
            #ffffff 42%,
            #8e9094 55%,
            #eeeeef 68%,
            #6b6d71 82%,
            #d8dade 100%
        );

    background-size:
        100% 100%,
        220% 220%;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 5px rgba(40, 40, 45, 0.24),
        0 8px 18px rgba(60, 60, 65, 0.18);

    transition:
        opacity 0.25s ease;
}


.magnetic-link:hover::before {
    opacity: 1;
}


.nav-links .magnetic-link:hover {
    color: #202124;
}


/* ======================================
   HOMEPAGE HERO
====================================== */

.hero {
    display: grid;

    grid-template-columns:
        44% 56%;

    grid-template-areas:
        "title image"
        "description image"
        "button image";

    column-gap: 65px;

    align-items: center;

    min-height:
        calc(100vh - 130px);

    padding:
        90px 0 75px 85px;
}


.hero-title {
    grid-area: title;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(58px, 5vw, 78px);

    line-height: 1.15;

    font-weight: 400;

    color: #9a9292;

    margin-bottom: 45px;
}


.hero-description {
    grid-area:
        description;

    max-width: 620px;

    font-size: 21px;

    line-height: 1.75;

    color: #999191;

    margin-bottom: 60px;
}


/* ======================================
   JELLY HOMEPAGE IMAGE
====================================== */

.hero-image {
    grid-area: image;

    width: 100%;

    align-self: stretch;

    padding:
        20px 0 20px 20px;
}


.jelly-image {
    perspective: 900px;
}


.jelly-image-inner {
    width: 100%;
    height: 100%;

    min-height: 660px;

    overflow: hidden;

    border-radius:
        42% 58% 46% 54% /
        55% 42% 58% 45%;

    transform-style:
        preserve-3d;

    will-change:
        transform,
        border-radius;

    box-shadow:
        0 20px 45px
        rgba(70, 65, 65, 0.14);

    transition:
        border-radius 0.45s ease,
        box-shadow 0.45s ease;
}


.jelly-image-inner img {
    width: 100%;
    height: 100%;

    min-height: 660px;

    display: block;

    object-fit: cover;
    object-position: center;

    transform:
        scale(1.04);

    will-change:
        transform;
}


.jelly-image:hover .jelly-image-inner {
    box-shadow:
        0 28px 60px
        rgba(70, 65, 65, 0.20);
}


/* ======================================
   PORTFOLIO BUTTON
====================================== */

.portfolio-button {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    position: relative;

    padding:
        23px 52px;

    background-color:
        #d1c7ca;

    color: white;

    text-decoration: none;

    font-size: 18px;

    border-radius: 10px;

    box-shadow:
        0 7px 18px
        rgba(0, 0, 0, 0.06);

    transition:
        color 0.25s ease,
        background 0.25s ease,
        box-shadow 0.25s ease;
}


.portfolio-button.magnetic-link::before {
    inset: 0;

    border-radius: inherit;
}


.portfolio-button.magnetic-link:hover {
    background: transparent;

    color: #202124;

    box-shadow:
        0 10px 24px
        rgba(60, 60, 65, 0.18);
}


/* ======================================
   SKILLS MARQUEE
====================================== */

.skills-marquee {
    position: relative;

    width: 100%;

    overflow: hidden;

    padding:
        60px 0 75px;
}


.marquee-track {
    display: flex;

    width:
        max-content;

    animation:
        marquee-scroll
        60s
        linear
        infinite;

    will-change:
        transform;
}


.marquee-group {
    display: flex;

    align-items: center;

    gap: 48px;

    padding-right: 48px;

    flex-shrink: 0;
}


.marquee-pill {
    position: relative;

    flex-shrink: 0;

    padding:
        22px 34px;

    border-radius: 26px;

    white-space: nowrap;

    font-size: 20px;

    font-weight: 600;

    color: #242424;

    border:
        1px solid
        rgba(255, 255, 255, 0.72);

    transform:
        scale(1);

    transform-origin:
        center;

    transition:
        transform 0.34s ease,
        border-radius 0.34s ease,
        box-shadow 0.34s ease,
        filter 0.34s ease;

    box-shadow:
        inset 0 1px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 5px rgba(50, 50, 55, 0.16),
        0 8px 20px rgba(60, 60, 65, 0.10);
}


.skills-marquee.marquee-active
.marquee-pill {
    border-radius: 999px;
}


.marquee-pill.puffer {
    transform:
        scale(1.18);

    border-radius: 999px;

    z-index: 5;

    filter:
        brightness(1.10)
        saturate(1.06);

    box-shadow:
        inset 0 3px 4px rgba(255, 255, 255, 1),
        inset 0 -5px 10px rgba(60, 60, 65, 0.18),
        0 18px 35px rgba(60, 60, 65, 0.20);
}


.marquee-pill.puffer-near {
    transform:
        scale(1.07);

    border-radius: 999px;

    z-index: 4;
}


/* ======================================
   METALLIC COLORS
====================================== */

.tone-1 {
    background:
        linear-gradient(
            120deg,
            #8e9095,
            #e9eaec,
            #adb0b5,
            #ffffff,
            #9da0a5,
            #dcdddf
        );
}


.tone-2 {
    background:
        linear-gradient(
            120deg,
            #9e9397,
            #e9dfe2,
            #bbb0b4,
            #fffafa,
            #a89da1,
            #ded3d6
        );
}


.tone-3 {
    background:
        linear-gradient(
            120deg,
            #8b949d,
            #e2e9ef,
            #a7b2bc,
            #fbfdff,
            #949fa9,
            #d3dce3
        );
}


.tone-4 {
    background:
        linear-gradient(
            120deg,
            #a2968d,
            #eee5dd,
            #c1b5ab,
            #fffaf5,
            #aea299,
            #dfd4cb
        );
}


.tone-5 {
    background:
        linear-gradient(
            120deg,
            #899c90,
            #deebe2,
            #abc0b1,
            #f9fffb,
            #96a99d,
            #d1ded5
        );
}


.tone-6 {
    background:
        linear-gradient(
            120deg,
            #97919e,
            #e8e2ec,
            #b9b2c0,
            #fcf9ff,
            #a39dab,
            #d9d3df
        );
}


.tone-7 {
    background:
        linear-gradient(
            120deg,
            #8e9ca4,
            #e4edf1,
            #adbec7,
            #fbfeff,
            #9daab2,
            #d6e0e5
        );
}


.tone-8 {
    background:
        linear-gradient(
            120deg,
            #a49a90,
            #eee7df,
            #c3b8ae,
            #fffbf7,
            #afa59c,
            #e0d7cf
        );
}


/* ======================================
   MARQUEE FADES
====================================== */

.marquee-fade {
    position: absolute;

    top: 0;
    bottom: 0;

    width: 120px;

    z-index: 10;

    pointer-events: none;
}


.marquee-fade-left {
    left: 0;

    background:
        linear-gradient(
            to right,
            #f6f0ec,
            rgba(246, 240, 236, 0)
        );
}


.marquee-fade-right {
    right: 0;

    background:
        linear-gradient(
            to left,
            #f6f0ec,
            rgba(246, 240, 236, 0)
        );
}


@keyframes marquee-scroll {

    from {
        transform:
            translateX(0);
    }

    to {
        transform:
            translateX(-50%);
    }

}


/* ======================================
   BIO PAGE
====================================== */

.bio-page {
    min-height:
        calc(100vh - 130px);

    padding:
        85px 30px 120px;
}


.bio-content {
    max-width: 920px;

    margin:
        0 auto;

    text-align: center;

    color: #817979;
}


.bio-content h1 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(58px, 7vw, 88px);

    font-style: italic;

    font-weight: 400;

    color: #8e8686;

    margin-bottom: 12px;
}


.bio-content h2 {
    font-size: 15px;

    font-weight: 500;

    text-transform: uppercase;

    letter-spacing:
        0.18em;

    color: #aaa1a0;

    margin-bottom: 40px;
}


.bio-photo {
    width:
        min(420px, 80vw);

    margin:
        0 auto 55px;

    overflow: hidden;

    border-radius: 10px;

    box-shadow:
        0 18px 40px
        rgba(70, 65, 65, 0.10);
}


.bio-photo img {
    width: 100%;

    height: auto;

    display: block;

    object-fit: contain;
}


.bio-content p {
    font-size: 20px;

    line-height: 1.8;

    color: #8f8787;

    margin-bottom: 38px;
}


/* ======================================
   PROJECTS PAGE
====================================== */

.projects-page {
    max-width: 1250px;

    margin:
        0 auto;

    padding:
        100px 60px 130px;
}


.projects-heading {
    margin-bottom: 70px;
}


.projects-heading h1 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 76px;

    line-height: 1.1;

    font-weight: 400;

    color: #958d8d;

    margin-bottom: 30px;
}


.projects-heading p {
    max-width: 600px;

    font-size: 20px;

    line-height: 1.7;

    color: #999191;
}


/* ======================================
   PROJECT MOVIE CREDITS
====================================== */

.credits-project {
    width: 100%;

    margin-bottom: 110px;
}


.credits-photo {
    position: relative;

    width: 100%;

    height: 700px;

    overflow: hidden;

    border-radius: 18px;

    background:
        #e7dfdb;
}


.credits-photo > img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    opacity: 0.72;

    filter:
        brightness(1.06)
        contrast(0.82)
        saturate(0.68)
        sepia(0.08);

    transition:
        transform 1s ease,
        filter 0.6s ease,
        opacity 0.6s ease;
}


.credits-overlay {
    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            to bottom,

            rgba(246, 240, 236, 0.08) 0%,
            rgba(86, 80, 78, 0.22) 45%,
            rgba(55, 51, 50, 0.68) 100%
        );

    opacity: 0;

    transition:
        opacity 0.45s ease;

    pointer-events: none;
}


.credits-window {
    position: absolute;

    inset: 0;

    overflow: hidden;

    opacity: 0;

    pointer-events: none;

    transition:
        opacity 0.35s ease;

    -webkit-mask-image:
        linear-gradient(
            to bottom,

            transparent 0%,
            black 17%,
            black 83%,
            transparent 100%
        );

    mask-image:
        linear-gradient(
            to bottom,

            transparent 0%,
            black 17%,
            black 83%,
            transparent 100%
        );
}


.credits-roll {
    position: absolute;

    left: 50%;

    width:
        min(760px, 82%);

    text-align: center;

    color: white;

    transform:
        translateX(-50%);
}


.credit-entry {
    margin-bottom: 115px;
}


.credit-number {
    display: block;

    margin-bottom: 15px;

    font-size: 13px;

    letter-spacing:
        0.24em;

    opacity: 0.65;
}


.credit-entry h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 42px;

    font-weight: 400;

    line-height: 1.15;

    margin-bottom: 20px;
}


.credit-entry p {
    max-width: 620px;

    margin:
        0 auto 18px;

    font-size: 18px;

    line-height: 1.65;

    color:
        rgba(255, 255, 255, 0.88);
}


.credit-type {
    font-size: 12px;

    text-transform: uppercase;

    letter-spacing:
        0.16em;

    color:
        rgba(255, 255, 255, 0.68);
}


.credits-photo.credits-active > img {
    transform:
        scale(1.035);

    opacity: 0.52;

    filter:
        brightness(0.82)
        contrast(0.78)
        saturate(0.55)
        sepia(0.10);
}


.credits-photo.credits-active
.credits-overlay {
    opacity: 1;
}


.credits-photo.credits-active
.credits-window {
    opacity: 1;
}


/* ======================================
   NORMAL PROJECT ENTRY
====================================== */

.project {
    display: grid;

    grid-template-columns:
        95px 1fr;

    gap: 30px;

    padding:
        55px 0;

    border-top:
        1px solid
        #cec5c2;
}


.project:last-child {
    border-bottom:
        1px solid
        #cec5c2;
}


.project-number {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 19px;

    color: #aaa1a0;
}


.project h2 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 38px;

    font-weight: 400;

    color: #817979;

    margin-bottom: 17px;
}


.project p {
    max-width: 700px;

    font-size: 18px;

    line-height: 1.7;

    color: #999191;

    margin-bottom: 17px;
}


.project-type {
    font-size: 13px;

    text-transform: uppercase;

    letter-spacing:
        0.13em;

    color: #aaa1a0;
}


/* ======================================
   CONTACT PAGE
====================================== */

.contact-page {
    min-height:
        calc(100vh - 130px);

    display: flex;

    align-items: center;

    padding:
        80px 9%;
}


.contact-content {
    max-width: 900px;
}


.contact-small {
    margin-bottom: 25px;

    font-size: 16px;

    text-transform: uppercase;

    letter-spacing:
        0.18em;

    color: #aaa1a0;
}


.contact-content h1 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size:
        clamp(70px, 8vw, 125px);

    line-height: 0.95;

    font-weight: 400;

    color: #958d8d;

    margin-bottom: 50px;
}


.contact-intro {
    max-width: 620px;

    font-size: 20px;

    line-height: 1.7;

    color: #999191;

    margin-bottom: 45px;
}


.contact-email {
    display: inline-block;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 27px;

    color: #766f6e;

    text-decoration: none;

    border-bottom:
        1px solid
        #766f6e;

    padding-bottom: 5px;
}


/* ======================================
   METAL LIGHT CURSOR
====================================== */

body,
a,
button,
.magnetic-link,
.portfolio-button,
.marquee-pill,
.credits-photo {
    cursor: none;
}


.custom-cursor {
    position: fixed;

    top: 0;
    left: 0;

    width: 24px;
    height: 24px;

    pointer-events: none;

    z-index: 9999;

    transform:
        translate(-50%, -50%);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 35% 30%,

            #ffffff 0%,
            #f7f7f8 15%,
            #cfd1d4 34%,
            #8d9095 55%,
            #505357 75%,
            #202225 100%
        );

    border:
        1px solid
        rgba(255, 255, 255, 0.8);

    box-shadow:
        inset 2px 2px 5px rgba(255, 255, 255, 0.95),
        inset -3px -3px 7px rgba(30, 30, 35, 0.45),
        0 0 8px rgba(255, 255, 255, 0.85),
        0 0 18px rgba(220, 225, 235, 0.55),
        0 0 32px rgba(210, 215, 225, 0.28);

    transition:
        width 0.2s ease,
        height 0.2s ease,
        box-shadow 0.2s ease;
}


.custom-cursor::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 5px;

    width: 7px;
    height: 7px;

    border-radius: 50%;

    background: white;

    filter:
        blur(1px);
}


.custom-cursor::after {
    content: "";

    position: absolute;

    inset: -10px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,

            rgba(255, 255, 255, 0.20),
            transparent 68%
        );

    filter:
        blur(4px);
}


.custom-cursor.cursor-hover {
    width: 30px;
    height: 30px;
}


/* ======================================
   CURSOR STARS
====================================== */

.cursor-stars {
    position: fixed;

    inset: 0;

    pointer-events: none;

    z-index: 9998;
}


.cursor-star {
    position: fixed;

    pointer-events: none;

    transform:
        translate(-50%, -50%);

    line-height: 1;

    user-select: none;

    background:
        linear-gradient(
            135deg,

            #6d7075,
            #ffffff,
            #b9bdc2,
            #ffffff,
            #85898f,
            #dadddf
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;

    text-shadow:
        0 0 6px rgba(255, 255, 255, 0.35),
        0 2px 5px rgba(0, 0, 0, 0.18);
}


.cursor-star.tone-a {
    background:
        linear-gradient(
            135deg,

            #777b80,
            #ffffff,
            #b8bcc2,
            #dfe2e5
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.cursor-star.tone-b {
    background:
        linear-gradient(
            135deg,

            #978d92,
            #fffafb,
            #c0b5ba,
            #ded6da
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


.cursor-star.tone-c {
    background:
        linear-gradient(
            135deg,

            #83919b,
            #ffffff,
            #adb9c2,
            #d9e1e7
        );

    -webkit-background-clip:
        text;

    background-clip:
        text;

    color:
        transparent;
}


/* ======================================
   TABLET
====================================== */

@media (max-width: 850px) {

    .site-header {
        padding:
            35px 30px;
    }


    .logo {
        font-size: 30px;
    }


    .nav-links {
        gap: 16px;
    }


    .hero {
        grid-template-columns:
            1fr;

        grid-template-areas:
            "title"
            "image"
            "description"
            "button";

        min-height: auto;

        padding:
            70px 30px 90px;

        text-align: center;
    }


    .hero-title {
        font-size: 62px;

        margin-bottom: 25px;
    }


    .hero-image {
        width: 100%;

        max-width: 520px;

        margin:
            0 auto 35px;

        padding: 0;
    }


    .jelly-image-inner {
        min-height: 0;

        height: 320px;
    }


    .jelly-image-inner img {
        height: 100%;

        min-height: 0;
    }


    .hero-description {
        max-width: 530px;

        margin:
            0 auto 55px;

        font-size: 20px;
    }


    .portfolio-zone {
        justify-self: center;
    }


    .skills-marquee {
        padding:
            50px 0 60px;
    }


    .marquee-group {
        gap: 38px;

        padding-right: 38px;
    }


    .marquee-pill {
        padding:
            19px 28px;

        font-size: 18px;
    }


    .projects-page {
        padding:
            80px 35px 110px;
    }


    .projects-heading h1 {
        font-size: 60px;
    }


    .credits-photo {
        height: 600px;
    }


    .credit-entry h2 {
        font-size: 34px;
    }

}


/* ======================================
   PHONE
====================================== */

@media (max-width: 600px) {

    .site-header {
        flex-direction:
            column;

        align-items:
            flex-start;

        gap: 25px;

        padding:
            28px 22px;
    }


    .logo {
        font-size: 28px;
    }


    .nav-links {
        gap: 4px;

        flex-wrap: wrap;
    }


    .nav-links a {
        font-size: 15px;
    }


    .mag-zone {
        padding: 12px;

        margin: -12px;
    }


    .hero {
        padding:
            50px 22px 75px;
    }


    .hero-title {
        font-size: 47px;
    }


    .jelly-image-inner {
        height: 270px;
    }


    .hero-description {
        font-size: 18px;
    }


    .portfolio-button {
        padding:
            19px 40px;

        font-size: 17px;
    }


    .skills-marquee {
        padding:
            40px 0 48px;
    }


    .marquee-group {
        gap: 28px;

        padding-right: 28px;
    }


    .marquee-pill {
        padding:
            16px 22px;

        font-size: 16px;
    }


    .marquee-fade {
        width: 55px;
    }


    .bio-page {
        padding:
            55px 22px 90px;
    }


    .bio-content h1 {
        font-size: 48px;
    }


    .bio-content h2 {
        font-size: 12px;

        margin-bottom: 30px;
    }


    .bio-photo {
        width:
            min(320px, 88vw);

        margin-bottom: 40px;
    }


    .bio-content p {
        font-size: 17px;

        line-height: 1.7;
    }


    .projects-page {
        padding:
            65px 24px 90px;
    }


    .projects-heading h1 {
        font-size: 48px;
    }


    .credits-photo {
        height: 520px;

        border-radius: 12px;
    }


    .credits-roll {
        width: 84%;
    }


    .credit-entry {
        margin-bottom: 90px;
    }


    .credit-entry h2 {
        font-size: 28px;
    }


    .credit-entry p {
        font-size: 15px;
    }


    .project {
        grid-template-columns:
            45px 1fr;

        gap: 18px;
    }


    .project h2 {
        font-size: 28px;
    }


    .contact-page {
        padding:
            70px 24px;
    }


    .contact-content h1 {
        font-size: 65px;
    }


    .contact-email {
        font-size: 21px;
    }

}


/* ======================================
   TOUCH DEVICES
====================================== */

@media (hover: none) {

    body,
    a,
    button,
    .magnetic-link,
    .portfolio-button,
    .marquee-pill,
    .credits-photo {
        cursor: auto;
    }


    .custom-cursor,
    .cursor-stars {
        display: none;
    }


    .magnetic-link::before {
        display: none;
    }

}

/* ===== ADORA AUDIO / SOFTWARE PROJECTS ===== */
.software-projects {
    margin: clamp(85px, 10vw, 150px) 0 80px;
}
.software-intro { max-width: 790px; margin-bottom: 42px; }
.software-eyebrow {
    display:block; font-size: 12px; letter-spacing:.2em;
    font-weight:600; color:#a39b9b; margin-bottom:19px;
}
.software-intro h2 {
    font-family: Georgia,"Times New Roman",serif;
    font-size:clamp(40px,5.5vw,72px); line-height:1.05;
    font-weight:400; letter-spacing:-.055em;
    color:#8d8587; margin:0 0 20px;
}
.software-intro p {
    font-size:17px; line-height:1.7; max-width:620px; color:#989092;
}
.software-cards {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px;
}
.software-card {
    display:flex; flex-direction:column; overflow:hidden; text-decoration:none;
    color:inherit; border-radius:16px; background:#f9f5f2;
    border:1px solid #e6deda;
    box-shadow:0 9px 28px rgba(91,73,73,.045);
    transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease;
    min-width:0;
}
.software-card:hover,.software-card:focus-visible {
    transform:translateY(-5px);
    border-color:#c8beb9; box-shadow:0 24px 48px rgba(91,73,73,.12);
}
.software-card:focus-visible {outline:2px solid #8e8587;outline-offset:4px}
.software-card-head {
    display:flex; justify-content:space-between; align-items:center;
    padding:22px 26px; font-size:11px; letter-spacing:.16em;
    color:#827a7c; border-bottom:1px solid #e9e1dc;
}
.software-arrow {
    width:33px;height:33px;display:grid;place-items:center;font-size:21px;
    border:1px solid #dad2ce;border-radius:50%;transition:.24s ease;
}
.software-card:hover .software-arrow {
    background:linear-gradient(140deg,#fcfcfc,#a1a5a9 46%,#f5f5f5 73%,#82878a);
    border-color:#aeb2b5;color:#1f2224; transform:rotate(45deg);
}
.software-art {
    height:clamp(215px,23vw,310px);position:relative;isolation:isolate;
    overflow:hidden; display:flex;align-items:center;justify-content:center;
}
.pocket-art {
    background:radial-gradient(ellipse at 45% 38%,#423735,#292222 60%,#1a1717);
}
.pocket-art::after,.daw-art::after {
    content:"";position:absolute;inset:0;pointer-events:none;
    background:linear-gradient(165deg,rgba(255,255,255,.065),transparent 25%,transparent 75%,rgba(0,0,0,.11));
}
.pocket-orbit {
    position:absolute;border:1px solid rgba(215,199,192,.12);border-radius:50%;
    width:210px;height:210px;transform:rotate(-23deg) scaleX(1.5);
}
.pocket-orbit-two {width:320px;height:320px;opacity:.6;transform:rotate(27deg) scaleX(1.3)}
.pocket-dot {
    position:absolute;width:10px;height:10px;border-radius:50%;
    background:var(--dot);left:var(--x);top:var(--y);
    box-shadow:0 0 17px var(--dot),0 0 5px var(--dot);
}
.dot-one{--x:24%;--y:63%;--dot:#65a5fc;width:15px;height:15px}
.dot-two{--x:36%;--y:37%;--dot:#f8b95f;width:11px;height:11px}
.dot-three{--x:49%;--y:54%;--dot:#f18abb;width:9px;height:9px}
.dot-four{--x:65%;--y:30%;--dot:#a79bff;width:13px;height:13px}
.dot-five{--x:75%;--y:58%;--dot:#5cd4c6;width:10px;height:10px}
.dot-six{--x:55%;--y:77%;--dot:#b3c5db;width:6px;height:6px}
.dot-seven{--x:19%;--y:26%;--dot:#a79bff;width:6px;height:6px}
.dot-eight{--x:83%;--y:21%;--dot:#f8b95f;width:7px;height:7px}
.pocket-art-label,.daw-art-label {
    position:absolute;bottom:21px;left:27px; font-size:10px;letter-spacing:.18em;
    color:rgba(245,235,229,.65);
}
.daw-art {
    background:radial-gradient(ellipse at 50% 15%,#514644 0%,#312a29 42%,#1a1717 95%);
}
.daw-horizon {position:absolute;height:1px;width:75%;background:#cfb9ad44}
.daw-wave {
    height:140px;width:75%;display:flex;align-items:center;justify-content:space-between;
    gap:4px;filter:drop-shadow(0 0 15px rgba(218,202,191,.25));
}
.daw-wave span {
    width:3px;max-height:100%;height:var(--h);border-radius:6px;
    background:linear-gradient(180deg,#d4c7be,#8a8886 55%,#d1beb4);
    transition:height .28s ease;
}
.software-card:hover .daw-wave span:nth-child(3n) {height:calc(var(--h) * .86)}
.software-copy {padding:27px 28px 31px;display:flex;flex:1;flex-direction:column}
.software-copy h3 {
    font-family:Georgia,"Times New Roman",serif;font-size:clamp(27px,3vw,39px);
    font-weight:400;color:#7d7577;letter-spacing:-.04em;margin:0 0 11px;
}
.software-copy p {font-size:15px;line-height:1.75;color:#969092;margin:0 0 25px}
.software-cta {
    font-size:11px;letter-spacing:.15em; font-weight:600;
    color:#6e686a;margin-top:auto;display:flex;align-items:center;gap:10px;
}
.software-cta span {font-size:19px;transition:transform .2s}
.software-card:hover .software-cta span {transform:translate(3px,-3px)}
@media(max-width:750px) {
    .software-cards {grid-template-columns:1fr}
    .software-art{height:245px}
    .software-projects{margin-top:80px}
    .software-intro h2{font-size:42px}
    .software-copy h3{font-size:33px}
}
@media(hover:none) {
    .software-card {cursor:pointer}
}

/* PROJECTS V2: compact credit photo, unnumbered sections & interactive website credit */
.credits-project{margin-bottom:70px!important}
.credits-photo{height:440px!important;max-height:56vh;border-radius:15px!important}
.credits-photo>img{object-position:center 47%}
.credit-entry{margin-bottom:65px!important}
.credit-entry h2{font-size:clamp(24px,3vw,36px)!important;margin-bottom:12px!important}
.credit-entry p{font-size:clamp(13px,1.5vw,16px)!important;line-height:1.5!important;margin-bottom:12px!important}
.credit-type{font-size:10px!important}
.software-projects{margin-top:75px!important;margin-bottom:100px!important}
.site-showcase{padding:0 0 65px;margin-top:75px}
.site-showcase-intro{max-width:800px;margin-bottom:32px}
.site-showcase-intro h2{font-family:Georgia,'Times New Roman',serif;font-size:clamp(37px,5vw,65px);font-weight:400;color:#8d8587;letter-spacing:-.05em;line-height:1.1;margin:0 0 16px}
.site-showcase-intro p{font-size:16px;line-height:1.75;color:#938b8d;max-width:670px}
.browser-showcase{border:1px solid #d8cfca;border-radius:16px;overflow:hidden;box-shadow:0 24px 65px rgba(75,59,57,.15);background:#211a1a;transition:transform .3s ease,box-shadow .3s ease}
.browser-showcase:hover{box-shadow:0 36px 75px rgba(75,59,57,.2);transform:translateY(-4px)}
.browser-bar{height:49px;background:#e6dfd9;display:flex;align-items:center;gap:20px;padding:0 18px;border-bottom:1px solid #cabeb8}
.browser-lights{display:flex;gap:6px}.browser-lights i{width:10px;height:10px;border:1px solid #aaa09a;background:#c8bab2;border-radius:50%}
.browser-lights i:nth-child(2){background:#d9c6bb}.browser-lights i:nth-child(3){background:#ded4cb}
.browser-address{margin:auto;background:#f5f0ed;border:1px solid #d4c8c1;border-radius:6px;padding:6px 22px;font-size:11px;color:#81736f;letter-spacing:.03em;max-width:65%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.browser-address span{color:#a09894}
.browser-open{font-size:10px;letter-spacing:.12em;text-decoration:none;color:#645a57;white-space:nowrap;font-weight:650}
.browser-open:hover{color:#191616}
.browser-stage{position:relative;overflow:hidden;min-height:455px;background:radial-gradient(ellipse at 78% 33%,rgba(128,102,95,.27),transparent 47%),linear-gradient(135deg,#2c2423,#1c1818 55%,#332723);color:#f0dfd6;--pointer-x:72%;--pointer-y:50%}
.browser-glow{position:absolute;pointer-events:none;width:380px;height:380px;left:var(--pointer-x);top:var(--pointer-y);transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(230,208,194,.13),rgba(230,208,194,0) 65%);transition:left .12s linear,top .12s linear}
.browser-stage-head{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;padding:26px 42px;border-bottom:1px solid #a58b8038;gap:20px}
.browser-wordmark{font-family:Georgia,'Times New Roman',serif;font-size:23px;color:#f0ddd3;white-space:nowrap}.browser-star{display:inline-block;font-size:15px;vertical-align:top;margin-left:9px;color:#d1c2b7;animation:siteShine 8s ease-in-out infinite}
.browser-preview-nav{display:flex;flex-wrap:wrap;gap:6px}.browser-preview-nav button{appearance:none;border:1px solid transparent;border-radius:20px;padding:7px 11px;cursor:pointer;font-size:12px;background:transparent;color:#beada7;transition:background .2s,color .2s,border .2s}
.browser-preview-nav button.selected,.browser-preview-nav button:hover{color:#1d1a19;background:linear-gradient(140deg,#fbfbfa,#a8abad 43%,#f4f4f2 77%,#989d9e);border-color:#c8c5c1}
.browser-stage-body{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(180px,.7fr);gap:18px;align-items:center;padding:50px 52px 64px;min-height:320px;z-index:1}
.browser-preview-copy{max-width:610px;transition:opacity .2s ease,transform .2s ease}.browser-preview-copy.switching{opacity:0;transform:translateY(9px)}
.browser-mini-label{font-size:10px;color:#c6aea3;letter-spacing:.19em;display:block;margin-bottom:25px}
.browser-preview-copy h3{font-family:Georgia,'Times New Roman',serif;font-weight:400;font-size:clamp(34px,4.5vw,68px);line-height:1.04;letter-spacing:-.05em;color:#f2e0d6;margin:0 0 20px}
.browser-preview-copy h3 em{font-weight:400;color:#c1a8a0}
.browser-preview-copy p{max-width:435px;color:#bba8a0;font-size:14px;line-height:1.6;margin:0 0 30px}
.browser-visit{display:inline-flex;align-items:center;gap:15px;color:#e7d7cf;text-decoration:none;font-size:11px;letter-spacing:.14em;border-bottom:1px solid #d7c2b489;padding-bottom:9px}
.browser-visit:hover{color:#fff;border-color:#fff}.browser-visit span{font-size:20px;transition:transform .2s}.browser-visit:hover span{transform:translate(4px,-3px)}
.browser-visual{position:relative;min-height:240px;display:grid;place-items:center;filter:drop-shadow(0 22px 25px rgba(0,0,0,.32))}
.browser-silver{position:absolute;border-radius:50%;width:175px;aspect-ratio:1;background:radial-gradient(circle at 30% 20%,#fff 2%,#f1f0eb 12%,#b4b4b0 22%,#4a5156 43%,#d6d1c9 58%,#777572 72%,#ece9e1 83%,#474344 100%);box-shadow:inset -12px -13px 18px #100d0e90,inset 5px 6px 15px #ffffff90,0 0 36px #b2a39940;transition:transform .4s ease}
.browser-silver-back{width:113px;transform:translate(67px,-60px);opacity:.78;filter:blur(1px)}
.browser-silver-front{transform:translate(-17px,18px)}
.browser-showcase:hover .browser-silver-front{transform:translate(-24px,9px) rotate(24deg)}
.browser-showcase:hover .browser-silver-back{transform:translate(74px,-67px)}
.browser-stage-bottom{position:absolute;bottom:0;width:100%;display:flex;justify-content:space-between;gap:15px;padding:17px 38px;border-top:1px solid #a58b8036;color:#ad9991;font-size:9px;letter-spacing:.17em}
.site-showcase-footer-link{display:inline-flex;gap:20px;text-decoration:none;color:#746d6e;font-size:12px;font-weight:650;letter-spacing:.12em;align-items:center;margin-top:28px;border-bottom:1px solid #aaa19c;padding-bottom:9px}
.site-showcase-footer-link:hover{color:#211c1b}.site-showcase-footer-link span{font-size:19px}
@keyframes siteShine{50%{transform:rotate(48deg) scale(1.25);opacity:.6}}
@media(max-width:780px){.credits-photo{height:360px!important;max-height:none}.browser-stage-head{padding:20px 24px;flex-wrap:wrap}.browser-stage-body{padding:35px 27px 70px;grid-template-columns:1fr;gap:0}.browser-visual{display:none}.browser-stage-bottom{padding:15px 24px}.browser-bar{gap:8px;padding:0 12px}.browser-address{padding:6px 9px}.software-projects{margin-top:60px!important}}
@media(max-width:480px){.credits-photo{height:295px!important}.credit-entry{margin-bottom:42px!important}.credits-roll{width:90%!important}.credit-entry h2{font-size:24px!important}.browser-preview-copy h3{font-size:40px}.browser-stage{min-height:440px}.browser-stage-bottom span:last-child{display:none}.browser-preview-nav button{padding:7px 9px}}
@media(prefers-reduced-motion:reduce){.browser-star{animation:none}.browser-showcase,.browser-silver,.browser-preview-copy{transition:none!important}}

/* V4: full-fidelity preview of the actual homepage and one-line heading. */
.software-intro{max-width:none!important}
.software-intro h2{
    white-space:nowrap;
    font-size:clamp(18px,4.7vw,62px);
    letter-spacing:-.053em;
}
.browser-showcase-live{background:#f6f0ec!important}
.real-home-preview{width:100%;height:clamp(510px,61vw,760px);background:#f6f0ec;overflow:hidden}
.real-home-preview iframe{display:block;width:100%;height:100%;border:0;background:#f6f0ec}
.real-preview-caption{display:flex;justify-content:space-between;gap:15px;flex-wrap:wrap;padding:15px 21px;background:#e9e1dc;border-top:1px solid #d6ccc6;color:#897d79;font-size:10px;letter-spacing:.13em}
@media(max-width:780px){.real-home-preview{height:550px}.software-intro h2{font-size:clamp(17px,4.4vw,36px)}}
@media(max-width:480px){.real-home-preview{height:510px}.real-preview-caption{font-size:9px;letter-spacing:.055em}.software-intro h2{font-size:clamp(16px,4.35vw,23px);letter-spacing:-.065em}}

/* V5 — interactive project micro-demos; no changes to the actual plugins. */
.interactive-plugin{cursor:default}
.interactive-plugin:hover{transform:translateY(-4px)}
.interactive-plugin .software-copy{padding-top:25px}
.plugin-demo{position:relative;isolation:isolate;min-height:285px;padding:24px 25px 18px;background:radial-gradient(ellipse at 70% 0%,#493b38 0%,#2b2322 54%,#1c1818 100%);color:#e7d7cd;overflow:hidden}
.plugin-demo:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(135deg,rgba(255,255,255,.04),transparent 52%)}
.demo-heading{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.12em;color:#d6c4bb;white-space:nowrap;margin-bottom:25px}
.demo-head-right{color:#a79890;margin-left:auto;letter-spacing:.06em;font-size:9px}
.demo-live-dot{width:7px;height:7px;border-radius:50%;background:#6ab6f9;box-shadow:0 0 11px #65a5fc;flex:none}
.demo-live-dot.silver{background:#c9c4c0;box-shadow:0 0 11px #f3ece3}
.demo-matrix{display:grid;gap:11px}
.demo-rhythm-row{display:grid;grid-template-columns:63px minmax(0,1fr);gap:12px;align-items:center}
.demo-rhythm-label{display:flex;gap:8px;align-items:center;font-size:10px;letter-spacing:.08em;color:#dfcfc5}
.demo-rhythm-label:before{content:'';width:8px;height:8px;border-radius:50%;background:var(--instrument);box-shadow:0 0 9px var(--instrument)}
.demo-steps{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px}
.demo-step{cursor:pointer;height:37px;min-width:0;border:1px solid #5a4a45;border-radius:6px;background:#342a28;transition:border .15s,background .15s,box-shadow .15s,transform .15s;position:relative}
.demo-step:nth-child(4n + 1){border-left-color:#998078}
.demo-step.is-on{background:var(--instrument);border-color:var(--instrument);box-shadow:0 0 13px color-mix(in srgb,var(--instrument) 40%,transparent),inset 0 1px 0 rgba(255,255,255,.4)}
.demo-step:hover,.demo-step:focus-visible{transform:translateY(-2px);border-color:#eee1d9;outline:none}
.demo-step.is-playing{outline:2px solid #eee6db;outline-offset:1px}
.demo-actions{display:flex;align-items:center;gap:7px;margin-top:22px;flex-wrap:wrap}
.demo-action,.device-choice{font-family:inherit;font-size:10px;letter-spacing:.055em;border:1px solid #817067;border-radius:7px;cursor:pointer;padding:10px 13px;transition:background .2s,color .2s,border .2s}
.demo-play{background:linear-gradient(145deg,#e8e6e2,#a0a4a4 43%,#f8f7f4 74%,#8d9090);color:#181818;font-weight:700;border-color:#e1e0dc}
.demo-play:hover{filter:brightness(1.1)}
.demo-reset{background:#3a302e;color:#d6c3b9}
.demo-reset:hover{background:#51413c;border-color:#bba69b}
.demo-status{font-size:9px;letter-spacing:.07em;color:#bba8a0;margin-left:auto}
.demo-footnote{font-size:10px;color:#9d8d86;margin-top:15px;letter-spacing:.018em;line-height:1.45}
.plugin-open-link{display:inline-flex;align-items:center;gap:12px;margin-top:auto;align-self:flex-start;padding:11px 17px;text-decoration:none;border-radius:8px;background:#ede5df;border:1px solid #d0c6c0;color:#554e4c;font-size:11px;font-weight:650;letter-spacing:.075em;transition:background .18s,color .18s,box-shadow .18s,transform .18s}
.plugin-open-link span{font-size:18px;transition:transform .18s}
.plugin-open-link:hover,.plugin-open-link:focus-visible{background:linear-gradient(135deg,#fcfcfc,#a7acae 39%,#fbfbfa 61%,#898f92);color:#111;box-shadow:0 8px 20px #4442;transform:translateY(-2px)}
.plugin-open-link:hover span{transform:translate(3px,-3px)}
.demo-device-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:5px}
.device-choice{padding:9px 5px;background:#322927;color:#cbbab2;border-color:#62534e;font-size:9px}
.device-choice:hover{border-color:#d4c5bc;color:#fff}
.device-choice.is-selected{background:linear-gradient(160deg,#f4f4f3,#abb0b0 45%,#e6e7e6);color:#1c1c1c;border-color:#dededb;box-shadow:0 0 15px #dad8d326}
.eq-graph{position:relative;height:108px;margin-top:16px;overflow:hidden;background:repeating-linear-gradient(0deg,transparent 0,transparent 26px,rgba(216,198,185,.09) 27px),linear-gradient(90deg,#281f1e,#2f2725 50%,#251f1e);border:1px solid #574640;border-radius:7px}
.eq-centerline{position:absolute;left:0;right:0;top:50%;height:1px;background:#b4a1984a;pointer-events:none}
.eq-bars{position:absolute;inset:9px 12px;display:grid;grid-template-columns:repeat(18,minmax(0,1fr));gap:5px;align-items:center}
.eq-bar{height:var(--level,24%);border-radius:3px;background:linear-gradient(180deg,#ebe2db,#7b898c 55%,#d7c1b7);box-shadow:0 0 9px #d7c1b72e;transition:height .55s cubic-bezier(.16,.84,.18,1),filter .35s}
.eq-readout{display:flex;justify-content:space-between;gap:8px;color:#e5d4ca;font-size:9px;letter-spacing:.09em;margin-top:14px}
.eq-readout span:last-child{color:#afa097;text-align:right}
@media(max-width:1120px){.demo-head-right{display:none}.demo-status{width:100%;margin-left:0}.plugin-demo{padding:20px 17px}.demo-rhythm-row{grid-template-columns:53px minmax(0,1fr);gap:7px}.demo-steps{gap:3px}}
@media(max-width:750px){.plugin-demo{min-height:270px;padding:22px 20px}.demo-head-right{display:block}.demo-status{width:auto;margin-left:auto}}
@media(max-width:430px){.demo-head-right{display:none}.demo-status{margin-left:0;width:100%}}
@media(prefers-reduced-motion:reduce){.demo-step,.eq-bar,.plugin-open-link{transition:none!important}}